diff --git a/crates/pseudoscript-emit/src/c4_render.rs b/crates/pseudoscript-emit/src/c4_render.rs
index 1ca9fcb..8908a24 100644
--- a/crates/pseudoscript-emit/src/c4_render.rs
+++ b/crates/pseudoscript-emit/src/c4_render.rs
@@ -36,9 +36,10 @@ use layout::topo::layout::VisualGraph;
 use std::panic::{AssertUnwindSafe, catch_unwind};
 
 use pseudoscript_model::NodeKind;
+use serde::{Deserialize, Serialize};
 
 use crate::render::pal;
-use crate::scene::{C4EdgeKind, C4Scene, PlacedNode, RoutedEdge};
+use crate::scene::{C4EdgeKind, C4Scene, PlacedNode, Rect, RoutedEdge};
 
 // All SVG colours come from the active theme palette (crate::render::pal); the
 // hand-written emitters bind their roles as locals at the top of each function.
@@ -98,6 +99,363 @@ pub(crate) fn render_c4(scene: &C4Scene) -> String {
     }
 }
 
+// --- C4 layout export -------------------------------------------------------
+
+/// A fully positioned C4 view — absolute renderer coordinates a consumer draws
+/// verbatim, the same geometry [`render_c4`] turns into SVG. Serde-serializable
+/// so it crosses the wasm boundary unchanged (the web IDE's interactive canvas
+/// renders it directly, as `FlowTimeline` renders a positioned sequence
+/// `Layout`). Produced by [`layout_c4_scene`].
+#[derive(Debug, Clone, PartialEq, Eq, Default, Serialize, Deserialize)]
+pub struct C4Layout {
+    /// Total canvas width.
+    pub width: i32,
+    /// Total canvas height.
+    pub height: i32,
+    /// Placed node cards.
+    pub nodes: Vec<LaidOutNode>,
+    /// Routed edges between cards.
+    pub edges: Vec<LaidOutEdge>,
+    /// The enclosing frame of a container/component view; `None` for context.
+    pub boundary: Option<BoundaryFrame>,
+}
+
+/// A node card placed by the layout engine: its content (for the card chrome)
+/// and its rectangle (engine placement + content-derived [`card_size`]).
+#[derive(Debug, Clone, PartialEq, Eq, Serialize, Deserialize)]
+pub struct LaidOutNode {
+    /// The node's fully-qualified name.
+    pub fqn: String,
+    /// The node's C4 kind, for the card's accent and eyebrow.
+    pub kind: NodeKind,
+    /// The display label (simple name).
+    pub label: String,
+    /// The node's `///` summary, rendered as the card's dimmed description.
+    #[serde(default)]
+    pub summary: Option<String>,
+    /// The card rectangle.
+    pub rect: Rect,
+}
+
+/// A routed edge: the engine's polyline through `points` (a straight
+/// card-centre-to-centre line when the routed path could not be matched), plus
+/// the relationship it expresses. `points` always has at least two entries.
+/// `dashed` marks a `from`-provenance edge, matching the SVG.
+#[derive(Debug, Clone, PartialEq, Eq, Serialize, Deserialize)]
+pub struct LaidOutEdge {
+    /// Source endpoint FQN.
+    pub from: String,
+    /// Target endpoint FQN.
+    pub to: String,
+    /// The relationship kind.
+    pub kind: C4EdgeKind,
+    /// Edge label (the method name for a call, else empty).
+    pub label: String,
+    /// The routed polyline (at least two points).
+    pub points: Vec<PointI>,
+    /// The engine's label position, when a matching label was found.
+    #[serde(default)]
+    pub label_pos: Option<PointI>,
+    /// Dashed (a `from`-provenance edge), matching the SVG.
+    pub dashed: bool,
+}
+
+/// The enclosing frame of a container/component view: its rectangle and the
+/// boundary node's title and kind (for the frame's accent).
+#[derive(Debug, Clone, PartialEq, Eq, Serialize, Deserialize)]
+pub struct BoundaryFrame {
+    /// The boundary node's display label.
+    pub title: String,
+    /// The boundary node's C4 kind (system for a container view, container for a
+    /// component view), for the frame's accent colour.
+    pub kind: NodeKind,
+    /// The frame rectangle (padded child bounding box).
+    pub rect: Rect,
+}
+
+/// An integer point on the canvas (a rounded layout coordinate).
+#[derive(Debug, Clone, Copy, PartialEq, Eq, Default, Serialize, Deserialize)]
+pub struct PointI {
+    /// Horizontal coordinate.
+    pub x: i32,
+    /// Vertical coordinate.
+    pub y: i32,
+}
+
+/// Positions a [`C4Scene`] into a [`C4Layout`] — the same layout-rs Sugiyama
+/// pass [`render_c4`] runs, returned as structured geometry instead of SVG.
+/// Wrapped exactly like [`render_c4`]: an empty view or a layout-engine panic
+/// falls back to the scene's own simple coordinates ([`fallback_layout`]), so
+/// no input can panic the caller.
+#[must_use]
+pub fn layout_c4_scene(scene: &C4Scene) -> C4Layout {
+    let boundary = scene.of.as_deref();
+    let laid_out = scene.nodes.iter().any(|n| Some(n.fqn.as_str()) != boundary);
+    if !laid_out {
+        return fallback_layout(scene, boundary);
+    }
+
+    match catch_unwind(AssertUnwindSafe(|| layout_capture(scene, boundary))) {
+        Ok(capture) => capture_to_layout(&capture, scene, boundary),
+        Err(_) => fallback_layout(scene, boundary),
+    }
+}
+
+/// Reads the captured geometry into a [`C4Layout`]: cards from the rects whose
+/// `properties` name a scene node (the SVG card filter), edges from each
+/// laid-out scene edge matched to its routed arrow by endpoint proximity
+/// (robust to the engine's draw order and to connector arrows), and the
+/// boundary frame and extent from the shared [`frame_and_extent`].
+fn capture_to_layout(capture: &Capture, scene: &C4Scene, boundary: Option<&str>) -> C4Layout {
+    let by_fqn: HashMap<&str, &PlacedNode> =
+        scene.nodes.iter().map(|n| (n.fqn.as_str(), n)).collect();
+    let (frame, width, height) = frame_and_extent(capture, scene, boundary);
+
+    let mut centre: HashMap<&str, Point> = HashMap::new();
+    let mut nodes = Vec::new();
+    for rect in &capture.rects {
+        let Some((fqn, node)) = rect
+            .properties
+            .as_deref()
+            .and_then(|fqn| Some((fqn, *by_fqn.get(fqn)?)))
+        else {
+            continue;
+        };
+        centre.insert(
+            fqn,
+            Point::new(rect.xy.x + rect.size.x / 2.0, rect.xy.y + rect.size.y / 2.0),
+        );
+        nodes.push(laid_out_node(node, rect_of(rect.xy, rect.size)));
+    }
+
+    let mut used_arrow = vec![false; capture.arrows.len()];
+    let mut used_text = vec![false; capture.texts.len()];
+    let mut edges = Vec::new();
+    for edge in acyclic_edges(scene, boundary) {
+        let (Some(&from_c), Some(&to_c)) =
+            (centre.get(edge.from.as_str()), centre.get(edge.to.as_str()))
+        else {
+            continue;
+        };
+        let (points, dashed, label_pos) =
+            match nearest_arrow(&capture.arrows, &used_arrow, from_c, to_c) {
+                Some(i) => {
+                    used_arrow[i] = true;
+                    let arrow = &capture.arrows[i];
+                    let label_pos =
+                        nearest_label(&capture.texts, &mut used_text, &edge.label, arrow);
+                    (
+                        arrow.points.iter().map(point_i).collect(),
+                        arrow.dashed,
+                        label_pos,
+                    )
+                }
+                None => (
+                    // No routed arrow matched: a straight line between card centres,
+                    // so every edge always carries a drawable polyline.
+                    vec![point_i(&from_c), point_i(&to_c)],
+                    matches!(edge.kind, C4EdgeKind::Provenance),
+                    None,
+                ),
+            };
+        edges.push(LaidOutEdge {
+            from: edge.from.clone(),
+            to: edge.to.clone(),
+            kind: edge.kind,
+            label: edge.label.clone(),
+            points,
+            label_pos,
+            dashed,
+        });
+    }
+
+    C4Layout {
+        width,
+        height,
+        nodes,
+        edges,
+        boundary: frame.and_then(|(min, max, _title)| {
+            boundary_frame(scene, boundary?, rect_corners(min, max))
+        }),
+    }
+}
+
+/// The unused arrow whose ends sit closest to `from`/`to` (the source and target
+/// card centres), or `None` when none is left. Endpoint proximity, not draw
+/// order, so connector arrows and reordering never mismatch an edge.
+fn nearest_arrow(arrows: &[CapturedArrow], used: &[bool], from: Point, to: Point) -> Option<usize> {
+    arrows
+        .iter()
+        .enumerate()
+        .filter(|(i, a)| !used[*i] && a.points.len() >= 2)
+        .map(|(i, a)| {
+            let first = a.points[0];
+            let last = a.points[a.points.len() - 1];
+            (i, dist2(first, from) + dist2(last, to))
+        })
+        .min_by(|(_, x), (_, y)| x.total_cmp(y))
+        .map(|(i, _)| i)
+}
+
+/// The unused captured edge label matching `label` nearest the arrow's midpoint,
+/// marking it consumed so parallel same-label edges take distinct labels. `None`
+/// for an empty label or when none matches.
+fn nearest_label(
+    texts: &[CapturedText],
+    used: &mut [bool],
+    label: &str,
+    arrow: &CapturedArrow,
+) -> Option<PointI> {
+    if label.is_empty() {
+        return None;
+    }
+    let mid = arrow_midpoint(arrow);
+    let (j, text) = texts
+        .iter()
+        .enumerate()
+        .filter(|(j, t)| !used[*j] && t.text == label)
+        .min_by(|(_, a), (_, b)| dist2(a.xy, mid).total_cmp(&dist2(b.xy, mid)))?;
+    used[j] = true;
+    Some(point_i(&text.xy))
+}
+
+/// The arithmetic mean of an arrow's polyline points (its rough centre).
+fn arrow_midpoint(arrow: &CapturedArrow) -> Point {
+    let n = f64::from(u32::try_from(arrow.points.len().max(1)).unwrap_or(u32::MAX));
+    let sum = arrow
+        .points
+        .iter()
+        .fold(Point::zero(), |acc, p| Point::new(acc.x + p.x, acc.y + p.y));
+    Point::new(sum.x / n, sum.y / n)
+}
+
+/// Squared Euclidean distance (avoids a `sqrt` — only the ordering matters).
+fn dist2(a: Point, b: Point) -> f64 {
+    let (dx, dy) = (a.x - b.x, a.y - b.y);
+    dx * dx + dy * dy
+}
+
+/// A captured top-left + size as an integer [`Rect`].
+fn rect_of(xy: Point, size: Point) -> Rect {
+    Rect {
+        x: round(xy.x),
+        y: round(xy.y),
+        w: round(size.x),
+        h: round(size.y),
+    }
+}
+
+/// A min/max corner pair as an integer [`Rect`] (the boundary frame box).
+fn rect_corners(min: Point, max: Point) -> Rect {
+    Rect {
+        x: round(min.x),
+        y: round(min.y),
+        w: round(max.x - min.x),
+        h: round(max.y - min.y),
+    }
+}
+
+/// A rounded [`PointI`] from a layout [`Point`].
+fn point_i(p: &Point) -> PointI {
+    PointI {
+        x: round(p.x),
+        y: round(p.y),
+    }
+}
+
+/// The centre of an integer [`Rect`].
+fn rect_centre(r: &Rect) -> PointI {
+    PointI {
+        x: r.x + r.w / 2,
+        y: r.y + r.h / 2,
+    }
+}
+
+/// A scene node as a [`LaidOutNode`] at `rect` (the engine placement or, in the
+/// fallback, the node's own rect).
+fn laid_out_node(node: &PlacedNode, rect: Rect) -> LaidOutNode {
+    LaidOutNode {
+        fqn: node.fqn.clone(),
+        kind: node.kind,
+        label: node.label.clone(),
+        summary: node.summary.clone(),
+        rect,
+    }
+}
+
+/// The boundary node's [`BoundaryFrame`] at `rect` (its title and kind from the
+/// node), or `None` when `of` names no scene node.
+fn boundary_frame(scene: &C4Scene, of: &str, rect: Rect) -> Option<BoundaryFrame> {
+    let node = scene.nodes.iter().find(|n| n.fqn == of)?;
+    Some(BoundaryFrame {
+        title: node.label.clone(),
+        kind: node.kind,
+        rect,
+    })
+}
+
+/// The two endpoint nodes of an in-view edge, or `None` when the edge touches
+/// the framed boundary or an endpoint is absent. Shared by the SVG fallback and
+/// the layout fallback so the two agree on which edges a fallback draws.
+fn view_edge_endpoints<'a>(
+    scene: &'a C4Scene,
+    edge: &RoutedEdge,
+    boundary: Option<&str>,
+) -> Option<(&'a PlacedNode, &'a PlacedNode)> {
+    if Some(edge.from.as_str()) == boundary || Some(edge.to.as_str()) == boundary {
+        return None;
+    }
+    let from = scene.nodes.iter().find(|n| n.fqn == edge.from)?;
+    let to = scene.nodes.iter().find(|n| n.fqn == edge.to)?;
+    Some((from, to))
+}
+
+/// A panic-proof fallback mirroring [`fallback_svg`]: each node at its own
+/// scene-assigned rect, straight centre-to-centre edges, and the boundary frame
+/// from the boundary node's rect. Used for an empty view or a layout panic.
+fn fallback_layout(scene: &C4Scene, boundary: Option<&str>) -> C4Layout {
+    let pad = 20;
+    let extent =
+        |f: fn(&Rect) -> i32| scene.nodes.iter().map(|n| f(&n.rect)).max().unwrap_or(0) + pad;
+    let width = extent(|r| r.x + r.w).max(pad);
+    let height = extent(|r| r.y + r.h).max(pad);
+
+    let nodes = scene
+        .nodes
+        .iter()
+        .filter(|n| Some(n.fqn.as_str()) != boundary)
+        .map(|n| laid_out_node(n, n.rect))
+        .collect();
+
+    let edges = scene
+        .edges
+        .iter()
+        .filter_map(|e| {
+            let (from, to) = view_edge_endpoints(scene, e, boundary)?;
+            Some(LaidOutEdge {
+                from: e.from.clone(),
+                to: e.to.clone(),
+                kind: e.kind,
+                label: e.label.clone(),
+                points: vec![rect_centre(&from.rect), rect_centre(&to.rect)],
+                label_pos: None,
+                dashed: matches!(e.kind, C4EdgeKind::Provenance),
+            })
+        })
+        .collect();
+
+    let boundary = boundary
+        .and_then(|of| boundary_frame(scene, of, scene.nodes.iter().find(|n| n.fqn == of)?.rect));
+
+    C4Layout {
+        width,
+        height,
+        nodes,
+        edges,
+        boundary,
+    }
+}
+
 /// Builds the layout graph (boundary framed out, cycles broken) and captures the
 /// engine's placement + edge routing. Each node box carries an empty engine
 /// label (so the engine draws no centred text) and its FQN as `properties` (so
@@ -252,14 +610,9 @@ fn fallback_svg(scene: &C4Scene, boundary: Option<&str>) -> String {
         );
     }
     for edge in &scene.edges {
-        let from = scene.nodes.iter().find(|n| n.fqn == edge.from);
-        let to = scene.nodes.iter().find(|n| n.fqn == edge.to);
-        let (Some(from), Some(to)) = (from, to) else {
+        let Some((from, to)) = view_edge_endpoints(scene, edge, boundary) else {
             continue;
         };
-        if Some(from.fqn.as_str()) == boundary || Some(to.fqn.as_str()) == boundary {
-            continue;
-        }
         let _ = write!(
             out,
             "<line x1=\"{x1}\" y1=\"{y1}\" x2=\"{x2}\" y2=\"{y2}\" stroke=\"{STROKE}\" \
@@ -529,12 +882,15 @@ impl RenderBackend for Capture {
 
 // --- SVG emission -----------------------------------------------------------
 
-/// Re-emits captured geometry as a self-contained SVG, framing the boundary
-/// children when the view has an `of`.
-fn emit_svg(capture: &Capture, scene: &C4Scene, boundary: Option<&str>) -> String {
-    let by_fqn: HashMap<&str, &PlacedNode> =
-        scene.nodes.iter().map(|n| (n.fqn.as_str(), n)).collect();
-
+/// The boundary frame (padded child bbox + title) and the document extent
+/// (`w`, `h`) for a captured layout — the geometry both the SVG emitter and the
+/// [`C4Layout`] export derive identically, so the two never drift. The extent
+/// covers the captured content plus any boundary frame.
+fn frame_and_extent<'a>(
+    capture: &Capture,
+    scene: &'a C4Scene,
+    boundary: Option<&str>,
+) -> (Option<(Point, Point, &'a str)>, i32, i32) {
     let boundary_frame = boundary.and_then(|of| {
         let title = boundary_title(scene, of)?;
         // Frame only the boundary's own children, never the external actors the
@@ -548,14 +904,21 @@ fn emit_svg(capture: &Capture, scene: &C4Scene, boundary: Option<&str>) -> Strin
         ))
     });
 
-    // The document extent covers the content plus any boundary frame.
     let (_, mut max) = content_bbox(capture);
     if let Some((_, frame_max, _)) = &boundary_frame {
         max.x = max.x.max(frame_max.x);
         max.y = max.y.max(frame_max.y);
     }
-    let w = round(max.x + MARGIN);
-    let h = round(max.y + MARGIN);
+    (boundary_frame, round(max.x + MARGIN), round(max.y + MARGIN))
+}
+
+/// Re-emits captured geometry as a self-contained SVG, framing the boundary
+/// children when the view has an `of`.
+fn emit_svg(capture: &Capture, scene: &C4Scene, boundary: Option<&str>) -> String {
+    let by_fqn: HashMap<&str, &PlacedNode> =
+        scene.nodes.iter().map(|n| (n.fqn.as_str(), n)).collect();
+
+    let (boundary_frame, w, h) = frame_and_extent(capture, scene, boundary);
 
     let mut out = String::new();
     svg_open(&mut out, w, h);
@@ -984,4 +1347,110 @@ mod tests {
         let lines = wrap_summary("a short note", 300);
         assert_eq!(lines, vec!["a short note".to_owned()]);
     }
+
+    // --- layout_c4_scene --------------------------------------------------
+
+    /// A container view: a system boundary with two component-style children and
+    /// a call between them.
+    fn container_scene() -> C4Scene {
+        let child = |fqn: &str, label: &str| PlacedNode {
+            boundary: Some("m::Sys".to_owned()),
+            ..placed(fqn, NodeKind::Container, label, None)
+        };
+        C4Scene {
+            view: C4View::Container,
+            of: Some("m::Sys".to_owned()),
+            nodes: vec![
+                placed("m::Sys", NodeKind::System, "Sys", None),
+                child("m::Sys::Web", "Web"),
+                child("m::Sys::Api", "Api"),
+            ],
+            edges: vec![RoutedEdge {
+                from: "m::Sys::Web".to_owned(),
+                to: "m::Sys::Api".to_owned(),
+                kind: C4EdgeKind::Call,
+                label: "calls".to_owned(),
+            }],
+        }
+    }
+
+    #[test]
+    fn layout_c4_scene_positions_every_node() {
+        let layout = layout_c4_scene(&context_scene());
+        assert_eq!(layout.nodes.len(), 2, "both nodes placed: {layout:?}");
+        assert!(layout.width > 0 && layout.height > 0, "canvas sized");
+        for node in &layout.nodes {
+            assert!(node.rect.w > 0 && node.rect.h > 0, "card sized: {node:?}");
+        }
+    }
+
+    #[test]
+    fn layout_c4_scene_is_deterministic() {
+        let scene = context_scene();
+        assert_eq!(layout_c4_scene(&scene), layout_c4_scene(&scene));
+    }
+
+    #[test]
+    fn layout_c4_scene_edges_carry_points_and_kind() {
+        let layout = layout_c4_scene(&context_scene());
+        let edge = layout.edges.first().expect("the A->B edge is laid out");
+        assert_eq!((edge.from.as_str(), edge.to.as_str()), ("m::A", "m::B"));
+        assert_eq!(edge.kind, C4EdgeKind::Call);
+        assert_eq!(edge.label, "uses");
+        assert!(edge.points.len() >= 2, "routed polyline: {edge:?}");
+    }
+
+    #[test]
+    fn layout_c4_scene_frames_a_container_view() {
+        let layout = layout_c4_scene(&container_scene());
+        let frame = layout
+            .boundary
+            .expect("container view has a boundary frame");
+        assert_eq!(frame.title, "Sys");
+        // The frame encloses the two children, which are the only laid-out cards.
+        assert_eq!(layout.nodes.len(), 2, "boundary itself is not a card");
+        for node in &layout.nodes {
+            assert!(
+                node.rect.x >= frame.rect.x,
+                "child inside frame x: {node:?}"
+            );
+            assert!(
+                node.rect.y >= frame.rect.y,
+                "child inside frame y: {node:?}"
+            );
+        }
+    }
+
+    #[test]
+    fn layout_c4_scene_cyclic_graph_no_panic() {
+        let mut scene = context_scene();
+        scene.edges.push(RoutedEdge {
+            from: "m::B".to_owned(),
+            to: "m::A".to_owned(),
+            kind: C4EdgeKind::Call,
+            label: "back".to_owned(),
+        });
+        let layout = layout_c4_scene(&scene);
+        assert_eq!(layout.nodes.len(), 2);
+        assert_eq!(layout_c4_scene(&scene), layout);
+    }
+
+    /// An empty view (only the framed boundary, no children) falls back without
+    /// panicking and produces no cards.
+    #[test]
+    fn layout_c4_scene_empty_view_falls_back() {
+        let scene = C4Scene {
+            view: C4View::Container,
+            of: Some("m::Sys".to_owned()),
+            nodes: vec![placed("m::Sys", NodeKind::System, "Sys", None)],
+            edges: Vec::new(),
+        };
+        let layout = layout_c4_scene(&scene);
+        assert!(layout.nodes.is_empty(), "no children to draw");
+        assert_eq!(
+            layout.boundary.map(|b| b.title),
+            Some("Sys".to_owned()),
+            "fallback still frames the boundary"
+        );
+    }
 }
diff --git a/crates/pseudoscript-emit/src/lib.rs b/crates/pseudoscript-emit/src/lib.rs
index 9fe291a..24a9f35 100644
--- a/crates/pseudoscript-emit/src/lib.rs
+++ b/crates/pseudoscript-emit/src/lib.rs
@@ -40,6 +40,7 @@ mod project;
 mod render;
 mod scene;
 
+pub use c4_render::{BoundaryFrame, C4Layout, LaidOutEdge, LaidOutNode, PointI, layout_c4_scene};
 pub use project::{EmitError, View, project, project_symbol};
 pub use render::{Theme, layout_sequence_scene, render_svg, render_svg_themed};
 pub use scene::{
diff --git a/crates/pseudoscript-emit/src/scene.rs b/crates/pseudoscript-emit/src/scene.rs
index 1d6455e..8ab4f0f 100644
--- a/crates/pseudoscript-emit/src/scene.rs
+++ b/crates/pseudoscript-emit/src/scene.rs
@@ -49,7 +49,10 @@ impl C4View {
 /// A laid-out C4 view: an ordered set of placed nodes and routed edges.
 #[derive(Debug, Clone, PartialEq, Serialize, Deserialize)]
 pub struct C4Scene {
-    /// Which C4 view this is.
+    /// Which C4 view this is. Serialised as `c4view`, not `view`: the [`Scene`]
+    /// enum is internally tagged on `view` (`c4`/`sequence`), so the inner field
+    /// must not reuse that key or a round-trip hits a duplicate-`view` error.
+    #[serde(rename = "c4view")]
     pub view: C4View,
     /// The view's boundary node FQN (`of`): the system for a container view, the
     /// container for a component view. `None` for context.
diff --git a/crates/pseudoscript-wasm/src/lib.rs b/crates/pseudoscript-wasm/src/lib.rs
index d375d73..d15e86f 100644
--- a/crates/pseudoscript-wasm/src/lib.rs
+++ b/crates/pseudoscript-wasm/src/lib.rs
@@ -40,7 +40,8 @@ use pseudoscript_doc::{
     try_render_site_with,
 };
 use pseudoscript_emit::{
-    Scene, View, graph_of_source, layout_sequence_scene, project, project_symbol, render_svg,
+    Scene, View, graph_of_source, layout_c4_scene, layout_sequence_scene, project, project_symbol,
+    render_svg,
 };
 use pseudoscript_format::format as format_source;
 use pseudoscript_model::{
@@ -329,14 +330,16 @@ pub fn symbol_svg(modules_json: &str, fqn: &str) -> Result<String, JsError> {
     symbol_svg_impl(modules_json, fqn).map_err(|e| JsError::new(&e))
 }
 
-/// Positions a sequence [`Scene`] (as JSON) into absolute coordinates, returning
-/// the layout as JSON. The host collapses the scene to a chosen depth first,
-/// then hands it here; the layout engine owns all geometry. A non-sequence scene
-/// is an error.
+/// Positions a [`Scene`] (as JSON) into absolute coordinates, returning the
+/// layout as JSON. The layout engine owns all geometry: a sequence scene yields
+/// a positioned sequence layout (the host collapses it to a chosen depth first);
+/// a C4 scene yields a [`pseudoscript_emit::C4Layout`] (placed cards + routed
+/// edges + boundary frame), the same geometry the SVG draws. The two layout
+/// shapes are distinguishable by their fields (`participants` vs `nodes`).
 ///
 /// # Errors
 ///
-/// Returns an error for invalid JSON or a non-sequence scene.
+/// Returns an error for invalid JSON.
 #[wasm_bindgen]
 pub fn layout_scene(scene_json: &str) -> Result<String, JsError> {
     layout_scene_impl(scene_json).map_err(|e| JsError::new(&e))
@@ -752,7 +755,7 @@ fn layout_scene_impl(scene_json: &str) -> Result<String, String> {
     let scene: Scene = serde_json::from_str(scene_json).map_err(|e| e.to_string())?;
     match scene {
         Scene::Sequence(seq) => Ok(to_json(&layout_sequence_scene(&seq))),
-        Scene::C4(_) => Err("layout_scene expects a sequence scene".to_owned()),
+        Scene::C4(c4) => Ok(to_json(&layout_c4_scene(&c4))),
     }
 }
 
@@ -1283,6 +1286,18 @@ mod tests {
         assert!(out.contains("m::F"), "{out}");
     }
 
+    #[test]
+    fn layout_scene_lays_out_a_c4_scene() {
+        // The exact IDE path: a projected C4 scene serialised to JSON
+        // (`emit_scene_modules`) and handed back to `layout_scene`. It must
+        // positionally lay out (placed cards), not error as it once did.
+        let scene = project_view("//! m\npublic person P;\npublic system S;", "context", "")
+            .expect("context view projects");
+        let out = layout_scene_impl(&to_json(&scene)).expect("c4 scene lays out");
+        assert!(out.contains(r#""nodes""#), "C4 layout carries nodes: {out}");
+        assert!(out.contains("m::P") && out.contains("m::S"), "{out}");
+    }
+
     #[test]
     fn layout_scene_rejects_a_scene_missing_the_view_tag() {
         // A scene object without the `view` discriminant cannot deserialize into
diff --git a/web-ide/package-lock.json b/web-ide/package-lock.json
index b15b92a..59c70bb 100644
--- a/web-ide/package-lock.json
+++ b/web-ide/package-lock.json
@@ -18,7 +18,6 @@
         "@codemirror/search": "^6.7.0",
         "@codemirror/state": "^6.6.0",
         "@codemirror/view": "^6.43.0",
-        "@dagrejs/dagre": "3.0.0",
         "@lezer/highlight": "^1.2.3",
         "@lezer/markdown": "^1.6.4",
         "@xyflow/svelte": "1.5.2",
@@ -853,21 +852,6 @@
         "node": ">=20.19.0"
       }
     },
-    "node_modules/@dagrejs/dagre": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/@dagrejs/dagre/-/dagre-3.0.0.tgz",
-      "integrity": "sha512-ZzhnTy1rfuoew9Ez3EIw4L2znPGnYYhfn8vc9c4oB8iw6QAsszbiU0vRhlxWPFnmmNSFAkrYeF1PhM5m4lAN0Q==",
-      "license": "MIT",
-      "dependencies": {
-        "@dagrejs/graphlib": "4.0.1"
-      }
-    },
-    "node_modules/@dagrejs/graphlib": {
-      "version": "4.0.1",
-      "resolved": "https://registry.npmjs.org/@dagrejs/graphlib/-/graphlib-4.0.1.tgz",
-      "integrity": "sha512-IvcV6FduIIAmLwnH+yun+QtV36SC7mERqa86aClNqmMN09WhmPPYU8ckHrZBozErf+UvHPWOTJYaGYiIcs0DgA==",
-      "license": "MIT"
-    },
     "node_modules/@emnapi/core": {
       "version": "1.10.0",
       "resolved": "https://registry.npmjs.org/@emnapi/core/-/core-1.10.0.tgz",
diff --git a/web-ide/package.json b/web-ide/package.json
index 03de90f..1fd3e83 100644
--- a/web-ide/package.json
+++ b/web-ide/package.json
@@ -53,7 +53,6 @@
     "@codemirror/search": "^6.7.0",
     "@codemirror/state": "^6.6.0",
     "@codemirror/view": "^6.43.0",
-    "@dagrejs/dagre": "3.0.0",
     "@lezer/highlight": "^1.2.3",
     "@lezer/markdown": "^1.6.4",
     "@xyflow/svelte": "1.5.2",
diff --git a/web-ide/src/app.css b/web-ide/src/app.css
index 016345e..bcf69c3 100644
--- a/web-ide/src/app.css
+++ b/web-ide/src/app.css
@@ -337,9 +337,14 @@ button { font: inherit; cursor: pointer; color: inherit; }
 .svelte-flow__edge-text { fill: var(--ink-soft); font-family: var(--font-mono); font-size: 10px; }
 .svelte-flow__edge-textbg { fill: var(--surface); }
 
-/* kind-coloured card nodes (shared by C4 graph + timeline) */
+/* kind-coloured card nodes (shared by C4 graph + timeline). The C4 graph sizes
+   each card to the layout engine's rect (width/height set on the node), so the
+   box honours those dimensions and clips overflow; the timeline's lifeline head
+   cards (width unset) size to content. */
 .svelte-flow__node.c4-node {
   width: auto;
+  box-sizing: border-box;
+  overflow: hidden;
   padding: 0.55rem 0.9rem;
   font-family: var(--font-mono);
   font-size: 0.8rem;
diff --git a/web-ide/src/lib/components/C4Flow.svelte b/web-ide/src/lib/components/C4Flow.svelte
index 37c6f9b..f99f0b5 100644
--- a/web-ide/src/lib/components/C4Flow.svelte
+++ b/web-ide/src/lib/components/C4Flow.svelte
@@ -1,50 +1,45 @@
 <script lang="ts">
-  // Interactive C4 graph: structure at a glance. Node geometry comes from the
-  // chosen layout algorithm (layered / grid / circular / radial); Svelte Flow
-  // provides pan / zoom / minimap / fit-to-view. Nodes are immutable — not
-  // draggable or connectable — so the diagram stays a true projection of the
-  // model. Edges float: they anchor at the nearest card borders (shortest path)
-  // rather than fixed handles. A boundary view (container / component) draws its
-  // `of` node as an enclosing box rather than a peer card. A floating "Customise"
-  // button opens the layout/edge modal; right-clicking a node opens its context
-  // menu (drill / flows / go-to-definition / find-usages).
+  // Interactive C4 graph: structure at a glance. All geometry comes from the
+  // `pseudoscript-emit` layout engine (the same layout-rs Sugiyama pass the
+  // static SVG draws), handed in as a positioned `C4Layout`; this component is a
+  // dumb renderer of it — it computes no layout. Svelte Flow provides pan / zoom
+  // / minimap / fit-to-view. Nodes are immutable (not draggable or connectable),
+  // so the diagram stays a true projection. Edges follow the engine's routed
+  // polylines. A boundary view (container / component) draws its `of` node as an
+  // enclosing frame. Right-clicking a node opens its context menu (drill / flows
+  // / go-to-definition / find-usages).
   import { Background, Controls, MarkerType, MiniMap, SvelteFlow } from "@xyflow/svelte";
   import type { Edge, Node } from "@xyflow/svelte";
-  import Dagre from "@dagrejs/dagre";
-  import type { Graph } from "@dagrejs/dagre";
   import BoundaryNode from "./BoundaryNode.svelte";
   import C4Node from "./C4Node.svelte";
   import CanvasMenu from "./CanvasMenu.svelte";
-  import CanvasSettings from "./CanvasSettings.svelte";
   import DiagramExport from "./DiagramExport.svelte";
-  import FitView from "./FitView.svelte";
-  import FloatingEdge from "./FloatingEdge.svelte";
+  import PolylineEdge from "./PolylineEdge.svelte";
   import { theme } from "$lib/theme.svelte.js";
-  import { canvasPrefs } from "$lib/stores/canvas-prefs.svelte.js";
-  import type { LayoutAlgo, LayoutDir } from "$lib/stores/canvas-prefs.svelte.js";
   import type { MenuItem, MenuSection } from "$lib/core/types.js";
 
-  // A node in the projected scene (one C4 element).
-  type SceneNode = {
-    fqn: string;
-    label: string;
-    kind: string;
-    summary?: string;
-    boundary?: string | null;
-  };
-  // A relationship between two scene nodes.
-  type SceneEdge = {
+  // A scene only contributes its boundary subject here (the export name); all
+  // geometry comes from the layout.
+  type Scene = { of?: string | null };
+  // The positioned C4 layout produced by `pseudoscript-emit::layout_c4_scene`.
+  type Rect = { x: number; y: number; w: number; h: number };
+  type Pt = { x: number; y: number };
+  type LaidOutNode = { fqn: string; kind: string; label: string; summary?: string | null; rect: Rect };
+  type LaidOutEdge = {
     from: string;
     to: string;
-    label?: string;
     kind: string;
+    label: string;
+    points: Pt[];
+    label_pos?: Pt | null;
+    dashed: boolean;
   };
-  // The structural scene this component projects: nodes, their relationships,
-  // and (for a boundary view) the `of` element drawn as the enclosing box.
-  type Scene = {
-    nodes: SceneNode[];
-    edges: SceneEdge[];
-    of?: string | null;
+  type Layout = {
+    width: number;
+    height: number;
+    nodes: LaidOutNode[];
+    edges: LaidOutEdge[];
+    boundary?: { title: string; kind: string; rect: Rect } | null;
   };
   // The `data` payload carried by every Svelte Flow node (card or boundary).
   type NodeData = {
@@ -60,6 +55,7 @@
 
   type Props = {
     scene: Scene;
+    layout: Layout | null;
     onpick?: ((fqn: string) => void) | null;
     onup?: (() => void) | null;
     flows?: Map<string, Flow[]> | null;
@@ -67,7 +63,7 @@
     onusages?: ((fqn: string, event: MouseEvent) => void) | null;
   };
 
-  let { scene, onpick, onup, flows = null, onsource = null, onusages = null }: Props = $props();
+  let { scene, layout, onpick, onup, flows = null, onsource = null, onusages = null }: Props = $props();
 
   // Drive Svelte Flow's colour mode from the app theme so the canvas (pane,
   // grid, minimap, controls) follows light/dark instead of being pinned dark.
@@ -79,266 +75,70 @@
   const exportName = $derived((scene.of ?? "").split("::").pop() || "diagram");
 
   const nodeTypes = { boundary: BoundaryNode, card: C4Node };
-  const edgeTypes = { floating: FloatingEdge };
-
-  const NODE_W = 200;
-  const NODE_H = 104;
-  const PAD = 34; // inner gap between the boundary box and its children
-  const TITLE_H = 30; // room at the top of the box for the boundary's label
+  const edgeTypes = { polyline: PolylineEdge };
 
   // Which deeper view a node drills into, by kind. Persons / components have no
   // structural view below them, so they get no drill button (info only).
   const DRILL: Record<string, string> = { system: "Open container diagram", container: "Open component diagram" };
 
-  function dagreGraph(rankdir: LayoutDir): Graph {
-    const g = new Dagre.graphlib.Graph();
-    g.setGraph({ rankdir, nodesep: 60, ranksep: 90, marginx: 28, marginy: 28 });
-    g.setDefaultEdgeLabel(() => ({}));
-    return g;
-  }
-
-  function card(n: SceneNode, parentId?: string) {
-    return {
+  // Map the positioned layout into Svelte Flow nodes + edges. The boundary frame
+  // sits behind (zIndex 0) as a non-interactive box; cards sit on top at their
+  // engine-computed rect (position + size); edges follow the routed polylines.
+  function build(l: Layout | null): { nodes: Node[]; edges: Edge[] } {
+    if (!l || !Array.isArray(l.nodes)) return { nodes: [], edges: [] };
+
+    const frame: Node[] = l.boundary
+      ? [
+          {
+            id: "__boundary",
+            type: "boundary",
+            position: { x: l.boundary.rect.x, y: l.boundary.rect.y },
+            width: l.boundary.rect.w,
+            height: l.boundary.rect.h,
+            data: { label: l.boundary.title, kind: l.boundary.kind, summary: "", fqn: scene.of ?? "", boundary: true, onclose: onup ?? undefined } as NodeData,
+            class: `c4-boundary ${l.boundary.kind}`,
+            draggable: false,
+            connectable: false,
+            selectable: true,
+            zIndex: 0,
+          },
+        ]
+      : [];
+
+    const cards: Node[] = l.nodes.map((n) => ({
       id: n.fqn,
       type: "card",
+      position: { x: n.rect.x, y: n.rect.y },
+      width: n.rect.w,
+      height: n.rect.h,
       data: { label: n.label, kind: n.kind, summary: n.summary ?? "", fqn: n.fqn } as NodeData,
       class: `c4-node ${n.kind}`,
-      width: NODE_W,
-      height: NODE_H,
       draggable: false,
       connectable: false,
-      ...(parentId ? { parentId } : {}),
-    };
-  }
-
-  // A boundary view: lay the `of` children inside a box, the external actors
-  // around it. Two dagre passes — one inside the box, one placing the box and
-  // its outside actors — keep the box from overlapping anything.
-  function grouped(s: Scene, boundaryFqn: string, rankdir: LayoutDir): Node[] {
-    const anchor = s.nodes.find((n) => n.fqn === boundaryFqn);
-    const inside = s.nodes.filter((n) => n.boundary === boundaryFqn);
-    const outside = s.nodes.filter((n) => n.fqn !== boundaryFqn && n.boundary !== boundaryFqn);
-
-    // Inner pass: children, laid out by the edges among them.
-    const inner = dagreGraph(rankdir);
-    for (const n of inside) inner.setNode(n.fqn, { width: NODE_W, height: NODE_H });
-    const insideSet = new Set(inside.map((n) => n.fqn));
-    for (const e of s.edges) if (insideSet.has(e.from) && insideSet.has(e.to)) inner.setEdge(e.from, e.to);
-    Dagre.layout(inner);
-
-    let minX = Infinity, minY = Infinity, maxX = -Infinity, maxY = -Infinity;
-    for (const n of inside) {
-      const p = inner.node(n.fqn);
-      minX = Math.min(minX, p.x - NODE_W / 2);
-      minY = Math.min(minY, p.y - NODE_H / 2);
-      maxX = Math.max(maxX, p.x + NODE_W / 2);
-      maxY = Math.max(maxY, p.y + NODE_H / 2);
-    }
-    const boxW = maxX - minX + PAD * 2;
-    const boxH = maxY - minY + PAD * 2 + TITLE_H;
-
-    // Outer pass: the box (as one node) plus the external actors, positioned by
-    // the edges that cross the boundary.
-    const outer = dagreGraph(rankdir);
-    outer.setNode(boundaryFqn, { width: boxW, height: boxH });
-    for (const n of outside) outer.setNode(n.fqn, { width: NODE_W, height: NODE_H });
-    const lift = (fqn: string): string => (insideSet.has(fqn) ? boundaryFqn : fqn);
-    for (const e of s.edges) {
-      const from = lift(e.from), to = lift(e.to);
-      if (from !== to && outer.hasNode(from) && outer.hasNode(to)) outer.setEdge(from, to);
-    }
-    Dagre.layout(outer);
-
-    const boxPos = outer.node(boundaryFqn);
-    const boxOrigin = { x: boxPos.x - boxW / 2, y: boxPos.y - boxH / 2 };
-
-    // The box first (Svelte Flow needs a parent before its children), then the
-    // framed children positioned relative to it, then the outside actors.
-    const boundaryNode = {
-      id: boundaryFqn,
-      type: "boundary",
-      position: boxOrigin,
-      data: { label: anchor?.label ?? boundaryFqn, kind: anchor?.kind ?? "system", summary: anchor?.summary ?? "", fqn: boundaryFqn, boundary: true, onclose: onup ?? undefined } as NodeData,
-      class: `c4-boundary ${anchor?.kind ?? "system"}`,
-      width: boxW,
-      height: boxH,
-      draggable: false,
-      connectable: false,
-      selectable: true,
-    };
-    const childNodes = inside.map((n) => {
-      const p = inner.node(n.fqn);
-      return {
-        ...card(n, boundaryFqn),
-        position: { x: p.x - NODE_W / 2 - minX + PAD, y: p.y - NODE_H / 2 - minY + PAD + TITLE_H },
-      };
-    });
-    const outsideNodes = outside.map((n) => {
-      const p = outer.node(n.fqn);
-      return { ...card(n), position: { x: p.x - NODE_W / 2, y: p.y - NODE_H / 2 } };
-    });
-    return [boundaryNode, ...childNodes, ...outsideNodes] as Node[];
-  }
-
-  // Lay out positions over a single index, given a position function. Shared by
-  // the geometric algorithms (grid / circular / radial); origin is irrelevant —
-  // fitView re-centres — so they place cards in a tidy local frame.
-  const COL_GAP = 80;
-  const ROW_GAP = 64;
-
-  function placed(s: Scene, pos: (i: number, n: SceneNode) => { x: number; y: number }): Node[] {
-    return s.nodes.map((n, i) => ({ ...card(n), position: pos(i, n) })) as Node[];
-  }
-
-  // Hierarchical: dagre layered, honouring the flow direction.
-  function layered(s: Scene, rankdir: LayoutDir): Node[] {
-    const g = dagreGraph(rankdir);
-    for (const n of s.nodes) g.setNode(n.fqn, { width: NODE_W, height: NODE_H });
-    for (const e of s.edges) g.setEdge(e.from, e.to);
-    Dagre.layout(g);
-    return s.nodes.map((n) => {
-      const p = g.node(n.fqn);
-      return { ...card(n), position: { x: p.x - NODE_W / 2, y: p.y - NODE_H / 2 } };
-    }) as Node[];
-  }
-
-  // Top-left of the k-th of `count` cards spaced evenly on a circle of `radius`,
-  // centred on the origin.
-  function onCircle(radius: number, k: number, count: number): { x: number; y: number } {
-    const a = (2 * Math.PI * k) / count - Math.PI / 2;
-    return { x: radius * Math.cos(a) - NODE_W / 2, y: radius * Math.sin(a) - NODE_H / 2 };
-  }
-
-  // Radius that seats `count` cards around a ring without overlap.
-  function ringRadius(count: number): number {
-    return Math.max(NODE_W, ((NODE_W + COL_GAP) * count) / (2 * Math.PI));
-  }
-
-  // Grid: row-major into the squarest grid that holds every card.
-  function grid(s: Scene): Node[] {
-    const cols = Math.max(1, Math.ceil(Math.sqrt(s.nodes.length)));
-    return placed(s, (i) => ({
-      x: (i % cols) * (NODE_W + COL_GAP),
-      y: Math.floor(i / cols) * (NODE_H + ROW_GAP),
+      zIndex: 1,
     }));
-  }
-
-  // Circular: cards spaced evenly around one ring, sized so they don't overlap.
-  function circular(s: Scene): Node[] {
-    const count = s.nodes.length;
-    const r = ringRadius(count);
-    return placed(s, (i) => onCircle(r, i, count));
-  }
-
-  // Ring index (hop distance from `roots`) of every id; anything unreached lands
-  // one ring beyond the deepest reached.
-  function hopRings(ids: string[], out: Map<string, string[]>, roots: string[]): Map<string, number> {
-    const ring = new Map<string, number>();
-    let frontier = roots;
-    let depth = 0;
-    while (frontier.length) {
-      const next: string[] = [];
-      for (const id of frontier) {
-        if (ring.has(id)) continue;
-        ring.set(id, depth);
-        for (const m of out.get(id) ?? []) if (!ring.has(m)) next.push(m);
-      }
-      frontier = next;
-      depth++;
-    }
-    const maxRing = ring.size ? Math.max(...ring.values()) : 0;
-    for (const id of ids) if (!ring.has(id)) ring.set(id, maxRing + 1);
-    return ring;
-  }
 
-  // Radial: concentric rings by hop distance from the roots (sources with no
-  // incoming edge), so an entry point sits at the centre and dependents fan out.
-  function radial(s: Scene): Node[] {
-    const ids = s.nodes.map((n) => n.fqn);
-    const out = new Map<string, string[]>(ids.map((id) => [id, []]));
-    const indeg = new Map<string, number>(ids.map((id) => [id, 0]));
-    for (const e of s.edges) {
-      if (out.has(e.from) && indeg.has(e.to)) {
-        out.get(e.from)!.push(e.to);
-        indeg.set(e.to, (indeg.get(e.to) ?? 0) + 1);
-      }
-    }
-    let roots = ids.filter((id) => (indeg.get(id) ?? 0) === 0);
-    if (roots.length === 0) roots = ids.slice(0, 1);
-
-    const ring = hopRings(ids, out, roots);
-
-    // Group ids by ring; give each ring a radius that seats its members and clears
-    // the ring inside it (a lone centre sits at 0), then place members around it.
-    const byRing = new Map<number, string[]>();
-    for (const id of ids) {
-      const d = ring.get(id) ?? 0;
-      if (!byRing.has(d)) byRing.set(d, []);
-      byRing.get(d)!.push(id);
-    }
-    const RING_STEP = NODE_W + ROW_GAP + 40;
-    const place = new Map<string, { x: number; y: number }>();
-    let prev = 0;
-    for (const d of [...byRing.keys()].sort((a, b) => a - b)) {
-      const members = byRing.get(d)!;
-      const radius = d === 0 && members.length === 1 ? 0 : Math.max(prev + RING_STEP, ringRadius(members.length));
-      prev = radius;
-      members.forEach((id, k) => place.set(id, onCircle(radius, k, members.length)));
-    }
-    return placed(s, (_i, n) => place.get(n.fqn) ?? { x: 0, y: 0 });
-  }
-
-  // A flat view (context, or a boundary with no children): every node a peer card,
-  // placed by the chosen algorithm. Direction applies to the layered algorithm only.
-  function flat(s: Scene, algo: LayoutAlgo, rankdir: LayoutDir): Node[] {
-    switch (algo) {
-      case "grid":
-        return grid(s);
-      case "circular":
-        return circular(s);
-      case "radial":
-        return radial(s);
-      default:
-        return layered(s, rankdir);
-    }
-  }
-
-  function layout(s: Scene, algo: LayoutAlgo, rankdir: LayoutDir, edgeType: string): { nodes: Node[]; edges: Edge[] } {
-    const boundaryFqn = s.of ?? null;
-    const hasChildren = boundaryFqn && s.nodes.some((n) => n.boundary === boundaryFqn);
-    // A boundary view is a nested-box layout — always layered; the algorithm
-    // choice applies to the flat (peer) views.
-    const nodes = hasChildren ? grouped(s, boundaryFqn, rankdir) : flat(s, algo, rankdir);
-    const edges = s.edges.map((e, i) => ({
+    const edges: Edge[] = l.edges.map((e, i) => ({
       id: `e${i}`,
       source: e.from,
       target: e.to,
       label: e.label || undefined,
-      // Floating: anchored at the nearest borders, routed in the chosen style.
-      type: "floating",
-      data: { pathType: edgeType },
-      animated: true,
+      type: "polyline",
+      data: { points: e.points, labelPos: e.label_pos ?? null, dashed: e.dashed },
       class: `c4-edge ${e.kind}`,
       selectable: false,
-      markerEnd: {
-        type: MarkerType.ArrowClosed,
-        width: 14,
-        height: 14,
-        color: e.kind === "trigger" ? "var(--k-callable)" : "var(--line-strong)",
-      },
-    })) as Edge[];
-    return { nodes, edges };
+      markerEnd: { type: MarkerType.ArrowClosed, width: 14, height: 14, color: e.kind === "trigger" ? "var(--k-callable)" : "var(--line-strong)" },
+    }));
+
+    return { nodes: [...frame, ...cards], edges };
   }
 
-  // Re-project whenever the scene or the algorithm / direction / edge preferences
-  // change. The graph is a projection, so a wholesale re-layout is the right call.
-  const initial = layout(scene, canvasPrefs.algorithm, canvasPrefs.layout, canvasPrefs.edgeType);
-  let nodes = $state<Node[]>(initial.nodes);
-  let edges = $state<Edge[]>(initial.edges);
+  const built = $derived(build(layout));
+  let nodes = $state<Node[]>([]);
+  let edges = $state<Edge[]>([]);
   $effect(() => {
-    const l = layout(scene, canvasPrefs.algorithm, canvasPrefs.layout, canvasPrefs.edgeType);
-    nodes = l.nodes;
-    edges = l.edges;
+    nodes = built.nodes;
+    edges = built.edges;
   });
 
   // The node a right-click opened the context menu on, anchored at the pointer.
@@ -404,16 +204,11 @@
     <Background gap={24} />
     <MiniMap pannable zoomable />
     <Controls showLock={false} />
-    <!-- Re-frame the viewport when the algorithm / direction moves the nodes.
-         The flow stays mounted, so nodes keep their measured sizes and fitView
-         frames them correctly (a remount would refit before re-measuring). -->
-    <FitView sig={`${canvasPrefs.algorithm}|${canvasPrefs.layout}`} />
   </SvelteFlow>
 
-  <!-- Top-right toolbar: export the diagram, and the layout/edge modal. -->
+  <!-- Top-right toolbar: export the diagram. -->
   <div class="customise">
     <DiagramExport container={flowEl} {nodes} filename={exportName} />
-    <CanvasSettings />
   </div>
 
   {#if menu}
@@ -425,7 +220,7 @@
 <style>
   .flow { position: relative; width: 100%; height: 100%; }
 
-  /* Floating "Customise" button, top-right, clear of the minimap (bottom-right). */
+  /* Floating toolbar, top-right, clear of the minimap (bottom-right). */
   .customise {
     position: absolute;
     top: 0.7rem;
diff --git a/web-ide/src/lib/components/CanvasSettings.svelte b/web-ide/src/lib/components/CanvasSettings.svelte
deleted file mode 100644
index dbdd364..0000000
--- a/web-ide/src/lib/components/CanvasSettings.svelte
+++ /dev/null
@@ -1,127 +0,0 @@
-<script lang="ts">
-  // Canvas customisation: a button floating over the C4 graph opens a modal that
-  // controls the layout algorithm, its flow direction, and the edge line style.
-  // Every choice is persisted by the canvas-prefs store and applied live. The
-  // direction control disables itself for algorithms that don't use it.
-  import { SlidersHorizontal } from "@lucide/svelte";
-
-  import * as Dialog from "$lib/components/ui/dialog/index.js";
-  import {
-    ALGORITHMS,
-    EDGE_STYLES,
-    LAYOUTS,
-    canvasPrefs,
-    isDirectional,
-  } from "$lib/stores/canvas-prefs.svelte.js";
-  import type { EdgeStyle, LayoutAlgo, LayoutDir } from "$lib/stores/canvas-prefs.svelte.js";
-
-  const directional = $derived(isDirectional(canvasPrefs.algorithm));
-</script>
-
-<!-- A labelled select row; `disabled` greys it out (used for direction when the
-     algorithm doesn't honour it). Defined at template scope so it isn't mistaken
-     for a Dialog.Content prop. -->
-{#snippet row(id: string, label: string, value: string, options: readonly { id: string; label: string }[], onpick: (v: string) => void, disabled = false)}
-  <div class="row" class:disabled>
-    <label for={id}>{label}</label>
-    <select {id} {value} {disabled} onchange={(e) => onpick(e.currentTarget.value)}>
-      {#each options as o (o.id)}
-        <option value={o.id}>{o.label}</option>
-      {/each}
-    </select>
-  </div>
-{/snippet}
-
-<Dialog.Root>
-  <Dialog.Trigger class="customise-trigger" aria-label="Customise diagram">
-    <SlidersHorizontal size={13} strokeWidth={2} aria-hidden="true" />
-    Customise
-  </Dialog.Trigger>
-  <Dialog.Content class="sm:max-w-sm" data-testid="canvas-settings">
-    <Dialog.Header>
-      <Dialog.Title>Customise diagram</Dialog.Title>
-      <Dialog.Description>Layout and edges. Saved across sessions.</Dialog.Description>
-    </Dialog.Header>
-
-    <div class="rows">
-      {@render row("cs-algo", "Algorithm", canvasPrefs.algorithm, ALGORITHMS, (v) => canvasPrefs.setAlgorithm(v as LayoutAlgo))}
-      {@render row("cs-dir", "Direction", canvasPrefs.layout, LAYOUTS, (v) => canvasPrefs.setLayout(v as LayoutDir), !directional)}
-      {@render row("cs-edge", "Lines", canvasPrefs.edge, EDGE_STYLES, (v) => canvasPrefs.setEdge(v as EdgeStyle))}
-    </div>
-  </Dialog.Content>
-</Dialog.Root>
-
-<style>
-  :global(.customise-trigger) {
-    display: inline-flex;
-    align-items: center;
-    gap: 0.35rem;
-    padding: 0.28rem 0.55rem;
-    font-family: var(--font-mono);
-    font-size: 0.62rem;
-    font-weight: 600;
-    letter-spacing: 0.04em;
-    color: var(--ink-soft);
-    background: var(--surface-2);
-    border: 1px solid var(--line);
-    border-radius: var(--radius-sm);
-    box-shadow: var(--shadow-md);
-    cursor: pointer;
-    white-space: nowrap;
-  }
-  :global(.customise-trigger:hover),
-  :global(.customise-trigger[data-state="open"]) {
-    color: var(--ink);
-    border-color: var(--accent);
-  }
-
-  .rows {
-    display: flex;
-    flex-direction: column;
-    gap: 0.7rem;
-  }
-  .row {
-    display: grid;
-    grid-template-columns: 6rem 1fr;
-    align-items: center;
-    gap: 0.6rem;
-  }
-  .row.disabled label {
-    color: var(--ink-faint);
-  }
-  .row label {
-    font-family: var(--font-mono);
-    font-size: 0.6rem;
-    letter-spacing: 0.12em;
-    text-transform: uppercase;
-    color: var(--ink-faint);
-  }
-  .row select {
-    appearance: none;
-    width: 100%;
-    background: var(--surface-2);
-    border: 1px solid var(--line-strong);
-    border-radius: var(--radius-sm);
-    color: var(--ink);
-    font-family: var(--font-mono);
-    font-size: 0.74rem;
-    padding: 0.3rem 1.6rem 0.3rem 0.5rem;
-    cursor: pointer;
-    background-image: linear-gradient(45deg, transparent 50%, var(--ink-faint) 50%),
-      linear-gradient(135deg, var(--ink-faint) 50%, transparent 50%);
-    background-position:
-      right 0.7rem center,
-      right 0.45rem center;
-    background-size:
-      0.3rem 0.3rem,
-      0.3rem 0.3rem;
-    background-repeat: no-repeat;
-  }
-  .row select:hover:not(:disabled) {
-    border-color: var(--accent);
-  }
-  .row select:disabled {
-    opacity: 0.45;
-    cursor: default;
-  }
-</style>
diff --git a/web-ide/src/lib/components/DiagramPane.svelte b/web-ide/src/lib/components/DiagramPane.svelte
index 9f44ee1..285ddb3 100644
--- a/web-ide/src/lib/components/DiagramPane.svelte
+++ b/web-ide/src/lib/components/DiagramPane.svelte
@@ -58,8 +58,9 @@
   const hasC4 = $derived(!!scene && Array.isArray(scene.nodes) && scene.nodes.length > 0);
   const hasFlow = $derived(isFlow && (scene?.participants?.length ?? 0) > 0);
   const ready = $derived(isFlow ? hasFlow : hasC4);
-  // Remount the flow when the rendered content changes so the view resets.
-  const sig = $derived(isFlow ? JSON.stringify(layout) : scene ? JSON.stringify(scene) : "");
+  // Remount the flow when the rendered content changes so the view resets. Both
+  // kinds are now positioned by the layout engine, so key off the layout.
+  const sig = $derived(layout ? JSON.stringify(layout) : scene ? JSON.stringify(scene) : "");
 </script>
 
 <div class="stage" class:framed={ready}>
@@ -77,7 +78,7 @@
       </div>
     {/if}
     {#key sig}
-      {#if isFlow}<FlowTimeline scene={scene as ComponentProps<typeof FlowTimeline>["scene"]} layout={layout as ComponentProps<typeof FlowTimeline>["layout"]} {onusages} {onsource} {typeFqn} />{:else}<C4Flow scene={scene as ComponentProps<typeof C4Flow>["scene"]} {onpick} {onup} {flows} {onsource} {onusages} />{/if}
+      {#if isFlow}<FlowTimeline scene={scene as ComponentProps<typeof FlowTimeline>["scene"]} layout={layout as ComponentProps<typeof FlowTimeline>["layout"]} {onusages} {onsource} {typeFqn} />{:else}<C4Flow scene={scene as ComponentProps<typeof C4Flow>["scene"]} layout={layout as ComponentProps<typeof C4Flow>["layout"]} {onpick} {onup} {flows} {onsource} {onusages} />{/if}
     {/key}
   {:else}
     <div class="note">
diff --git a/web-ide/src/lib/components/FloatingEdge.svelte b/web-ide/src/lib/components/FloatingEdge.svelte
deleted file mode 100644
index 6d615fd..0000000
--- a/web-ide/src/lib/components/FloatingEdge.svelte
+++ /dev/null
@@ -1,43 +0,0 @@
-<script lang="ts">
-  // A C4 relationship edge that floats: it connects the two cards at the nearest
-  // points on their borders (shortest path) instead of fixed top/bottom handles,
-  // and routes in the line style the user picked (smooth step / bezier / straight
-  // / step). Node geometry comes from the live internal nodes, so the edge stays
-  // correct under pan / zoom / fit-view.
-  import { BaseEdge, getBezierPath, getSmoothStepPath, getStraightPath, useInternalNode } from "@xyflow/svelte";
-  import type { EdgeProps } from "@xyflow/svelte";
-  import { getEdgeParams } from "$lib/floating-edge.js";
-
-  let { source, target, markerEnd, label, data }: EdgeProps = $props();
-
-  const sourceNode = useInternalNode(source);
-  const targetNode = useInternalNode(target);
-
-  // The path + label anchor, recomputed when either node's geometry changes.
-  const geom = $derived.by(() => {
-    const s = sourceNode.current;
-    const t = targetNode.current;
-    // Wait until both nodes are measured — an unmeasured (zero-size) node would
-    // make the border-intersection maths divide by zero. The hook re-runs once
-    // measurement lands, so the edge appears on the next frame.
-    if (!s?.measured.width || !s.measured.height || !t?.measured.width || !t.measured.height) return null;
-
-    const { sx, sy, tx, ty, sourcePos, targetPos } = getEdgeParams(s, t);
-    const params = { sourceX: sx, sourceY: sy, targetX: tx, targetY: ty, sourcePosition: sourcePos, targetPosition: targetPos };
-    const pathType = (data?.pathType as string) ?? "smoothstep";
-
-    const [path, labelX, labelY] =
-      pathType === "straight"
-        ? getStraightPath({ sourceX: sx, sourceY: sy, targetX: tx, targetY: ty })
-        : pathType === "default"
-          ? getBezierPath(params)
-          : pathType === "step"
-            ? getSmoothStepPath({ ...params, borderRadius: 0 })
-            : getSmoothStepPath(params);
-    return { path, labelX, labelY };
-  });
-</script>
-
-{#if geom}
-  <BaseEdge path={geom.path} {markerEnd} label={label as string | undefined} labelX={geom.labelX} labelY={geom.labelY} />
-{/if}
diff --git a/web-ide/src/lib/components/PolylineEdge.svelte b/web-ide/src/lib/components/PolylineEdge.svelte
new file mode 100644
index 0000000..d3252c1
--- /dev/null
+++ b/web-ide/src/lib/components/PolylineEdge.svelte
@@ -0,0 +1,35 @@
+<script lang="ts">
+  // A C4 relationship edge that follows the engine's routed polyline. The points
+  // come from `pseudoscript-emit`'s layout (the same path the static SVG draws),
+  // in the canvas coordinate space the nodes are positioned in, so the edge is
+  // drawn verbatim — no client-side routing. Dashed marks a `from`-provenance
+  // edge, matching the SVG.
+  import { BaseEdge } from "@xyflow/svelte";
+  import type { EdgeProps } from "@xyflow/svelte";
+
+  type Pt = { x: number; y: number };
+
+  let { markerEnd, label, data }: EdgeProps = $props();
+
+  const geom = $derived.by(() => {
+    const points = (data?.points as Pt[] | undefined) ?? [];
+    if (points.length < 2) return null;
+    const path = points.map((p, i) => `${i === 0 ? "M" : "L"}${p.x},${p.y}`).join(" ");
+    // The engine's label anchor, else the polyline's midpoint.
+    const labelPos = (data?.labelPos as Pt | null | undefined) ?? points[Math.floor(points.length / 2)];
+    return { path, labelX: labelPos.x, labelY: labelPos.y };
+  });
+
+  const dash = $derived(data?.dashed ? "4 3" : undefined);
+</script>
+
+{#if geom}
+  <BaseEdge
+    path={geom.path}
+    {markerEnd}
+    label={label as string | undefined}
+    labelX={geom.labelX}
+    labelY={geom.labelY}
+    style={dash ? `stroke-dasharray: ${dash}` : undefined}
+  />
+{/if}
diff --git a/web-ide/src/lib/core/canvas.test.ts b/web-ide/src/lib/core/canvas.test.ts
index 118c059..e15cf13 100644
--- a/web-ide/src/lib/core/canvas.test.ts
+++ b/web-ide/src/lib/core/canvas.test.ts
@@ -26,10 +26,11 @@ describe("projectCanvas", () => {
     expect((r.layout as { laid?: boolean })?.laid).toBe(true);
   });
 
-  it("projects the context overview with no selection (no layout)", () => {
+  it("projects and lays out the context overview with no selection", () => {
     const r = projectCanvas({ selected: null, seqDepth: "component", modules: [], index: idx, wasm: wasm(), onError: () => {} });
     expect((r.scene as { nodes: unknown[] }).nodes).toHaveLength(1);
-    expect(r.layout).toBeNull();
+    // The C4 context is positioned by the layout engine too (not just sequences).
+    expect((r.layout as { laid?: boolean })?.laid).toBe(true);
   });
 
   it("falls back to a lifeline when a selected sequence is empty", () => {
diff --git a/web-ide/src/lib/core/canvas.ts b/web-ide/src/lib/core/canvas.ts
index 492783f..a1d9f78 100644
--- a/web-ide/src/lib/core/canvas.ts
+++ b/web-ide/src/lib/core/canvas.ts
@@ -28,10 +28,10 @@ export type ProjectCanvasArgs = {
 
 /**
  * Project the canvas scene + layout. A selected symbol projects its fitting view;
- * no selection projects the context overview. A sequence is collapsed to `seqDepth`
- * and positioned by the layout engine; C4 stays as-is. An empty or unprojectable
- * selected symbol falls back to its single lifeline; an unprojectable context is an
- * error. Both error paths report via `onError`.
+ * no selection projects the context overview. A sequence is collapsed to `seqDepth`;
+ * both kinds are then positioned by the Rust layout engine. An empty or
+ * unprojectable selected symbol falls back to its single lifeline; an
+ * unprojectable context is an error. Both error paths report via `onError`.
  */
 export function projectCanvas(args: ProjectCanvasArgs): Canvas {
   const { selected, seqDepth, modules, index, wasm, onError } = args;
@@ -47,7 +47,10 @@ export function projectCanvas(args: ProjectCanvasArgs): Canvas {
       ? !(shown?.participants as unknown[] | undefined)?.length
       : !(shown?.nodes as unknown[] | undefined)?.length;
     if (isEmpty && selected) return lifelineFallback();
-    const layout = isSeq && shown ? wasm.layoutScene(shown) : null;
+    // Both kinds are positioned by the Rust layout engine: a sequence yields a
+    // positioned timeline, a C4 scene yields placed cards + routed edges (the
+    // same geometry the static SVG draws).
+    const layout = shown ? wasm.layoutScene(shown) : null;
     return { scene: shown, layout, error: "" };
   } catch (e) {
     const detail = String((e as Error)?.message ?? e);
diff --git a/web-ide/src/lib/floating-edge.ts b/web-ide/src/lib/floating-edge.ts
deleted file mode 100644
index 9b9b987..0000000
--- a/web-ide/src/lib/floating-edge.ts
+++ /dev/null
@@ -1,67 +0,0 @@
-// Floating-edge geometry: anchor an edge at the point where the straight line
-// between two node centres crosses each node's border, rather than at a fixed
-// handle. This gives the shortest visible connection and lets edges leave a card
-// from whichever side faces the other node. Ported from Svelte Flow's floating-
-// edges example, adapted to absolute node positions (parent offsets included).
-
-import { Position, type InternalNode } from "@xyflow/svelte";
-
-type Rect = { x: number; y: number; w: number; h: number };
-
-function rect(node: InternalNode): Rect {
-  return {
-    x: node.internals.positionAbsolute.x,
-    y: node.internals.positionAbsolute.y,
-    w: node.measured.width ?? 0,
-    h: node.measured.height ?? 0,
-  };
-}
-
-// Where the segment from `node`'s centre toward `other`'s centre meets node's
-// border. Projects the centre-to-centre direction into the rectangle's
-// normalised diagonal space, clamps it to the unit diamond (so it lands on an
-// edge), then maps back — Svelte Flow's floating-edges intersection.
-function intersection(node: Rect, other: Rect): { x: number; y: number } {
-  const halfW = node.w / 2;
-  const halfH = node.h / 2;
-  const cx = node.x + halfW;
-  const cy = node.y + halfH;
-  const ox = other.x + other.w / 2;
-  const oy = other.y + other.h / 2;
-
-  // Direction to the other centre, rotated into the rectangle's diagonal axes.
-  const diagA = (ox - cx) / (2 * halfW) - (oy - cy) / (2 * halfH);
-  const diagB = (ox - cx) / (2 * halfW) + (oy - cy) / (2 * halfH);
-  const clamp = 1 / (Math.abs(diagA) + Math.abs(diagB) || 1);
-  const unitA = clamp * diagA;
-  const unitB = clamp * diagB;
-  return { x: halfW * (unitA + unitB) + cx, y: halfH * (-unitA + unitB) + cy };
-}
-
-// Which border the intersection sits on — drives the path's entry/exit direction.
-function side(node: Rect, p: { x: number; y: number }): Position {
-  const nx = Math.round(node.x);
-  const ny = Math.round(node.y);
-  const px = Math.round(p.x);
-  const py = Math.round(p.y);
-  if (px <= nx + 1) return Position.Left;
-  if (px >= nx + node.w - 1) return Position.Right;
-  if (py <= ny + 1) return Position.Top;
-  return Position.Bottom;
-}
-
-// The floating endpoints + their borders for a source→target pair.
-export function getEdgeParams(source: InternalNode, target: InternalNode) {
-  const s = rect(source);
-  const t = rect(target);
-  const sp = intersection(s, t);
-  const tp = intersection(t, s);
-  return {
-    sx: sp.x,
-    sy: sp.y,
-    tx: tp.x,
-    ty: tp.y,
-    sourcePos: side(s, sp),
-    targetPos: side(t, tp),
-  };
-}
diff --git a/web-ide/src/lib/pds-wasm/pseudoscript_wasm.d.ts b/web-ide/src/lib/pds-wasm/pseudoscript_wasm.d.ts
index abca1b6..d47e7c4 100644
--- a/web-ide/src/lib/pds-wasm/pseudoscript_wasm.d.ts
+++ b/web-ide/src/lib/pds-wasm/pseudoscript_wasm.d.ts
@@ -141,14 +141,16 @@ export function format(source: string): string;
 export function hover(modules_json: string, module_fqn: string, offset: number): string;
 
 /**
- * Positions a sequence [`Scene`] (as JSON) into absolute coordinates, returning
- * the layout as JSON. The host collapses the scene to a chosen depth first,
- * then hands it here; the layout engine owns all geometry. A non-sequence scene
- * is an error.
+ * Positions a [`Scene`] (as JSON) into absolute coordinates, returning the
+ * layout as JSON. The layout engine owns all geometry: a sequence scene yields
+ * a positioned sequence layout (the host collapses it to a chosen depth first);
+ * a C4 scene yields a [`pseudoscript_emit::C4Layout`] (placed cards + routed
+ * edges + boundary frame), the same geometry the SVG draws. The two layout
+ * shapes are distinguishable by their fields (`participants` vs `nodes`).
  *
  * # Errors
  *
- * Returns an error for invalid JSON or a non-sequence scene.
+ * Returns an error for invalid JSON.
  */
 export function layout_scene(scene_json: string): string;
 
diff --git a/web-ide/src/lib/pds-wasm/pseudoscript_wasm.js b/web-ide/src/lib/pds-wasm/pseudoscript_wasm.js
index f97ab8c..c4c3b56 100644
--- a/web-ide/src/lib/pds-wasm/pseudoscript_wasm.js
+++ b/web-ide/src/lib/pds-wasm/pseudoscript_wasm.js
@@ -401,14 +401,16 @@ export function hover(modules_json, module_fqn, offset) {
 }
 
 /**
- * Positions a sequence [`Scene`] (as JSON) into absolute coordinates, returning
- * the layout as JSON. The host collapses the scene to a chosen depth first,
- * then hands it here; the layout engine owns all geometry. A non-sequence scene
- * is an error.
+ * Positions a [`Scene`] (as JSON) into absolute coordinates, returning the
+ * layout as JSON. The layout engine owns all geometry: a sequence scene yields
+ * a positioned sequence layout (the host collapses it to a chosen depth first);
+ * a C4 scene yields a [`pseudoscript_emit::C4Layout`] (placed cards + routed
+ * edges + boundary frame), the same geometry the SVG draws. The two layout
+ * shapes are distinguishable by their fields (`participants` vs `nodes`).
  *
  * # Errors
  *
- * Returns an error for invalid JSON or a non-sequence scene.
+ * Returns an error for invalid JSON.
  * @param {string} scene_json
  * @returns {string}
  */
diff --git a/web-ide/src/lib/pds-wasm/pseudoscript_wasm_bg.wasm b/web-ide/src/lib/pds-wasm/pseudoscript_wasm_bg.wasm
index 7e8b21b..ab72555 100644
Binary files a/web-ide/src/lib/pds-wasm/pseudoscript_wasm_bg.wasm and b/web-ide/src/lib/pds-wasm/pseudoscript_wasm_bg.wasm differ
diff --git a/web-ide/src/lib/stores/canvas-prefs.svelte.ts b/web-ide/src/lib/stores/canvas-prefs.svelte.ts
deleted file mode 100644
index 80d753a..0000000
--- a/web-ide/src/lib/stores/canvas-prefs.svelte.ts
+++ /dev/null
@@ -1,98 +0,0 @@
-// Canvas rendering preferences — a reactive rune store, persisted to localStorage.
-//
-// Owns the C4 diagram's layout algorithm, its flow direction, and its edge line
-// style. All three are saved across sessions and edited from the canvas's
-// "Customise" modal. C4Flow reads these and re-projects when any of them change.
-
-// The placement algorithm for the flat (peer) view. "layered" is dagre's
-// hierarchical layout (the only one that honours `direction`); the others are
-// geometric and ignore direction.
-export type LayoutAlgo = "layered" | "grid" | "circular" | "radial";
-// The dagre rank direction a layered graph flows along.
-export type LayoutDir = "TB" | "LR" | "BT" | "RL";
-// The edge routing style (mapped to a Svelte Flow built-in edge type).
-export type EdgeStyle = "smoothstep" | "bezier" | "straight" | "step";
-
-// Algorithm options, in menu order. `directional` flags the ones that use the
-// direction setting, so the modal can disable the direction control otherwise.
-export const ALGORITHMS: readonly { id: LayoutAlgo; label: string; directional: boolean }[] = [
-  { id: "layered", label: "Layered", directional: true },
-  { id: "grid", label: "Grid", directional: false },
-  { id: "circular", label: "Circular", directional: false },
-  { id: "radial", label: "Radial", directional: false },
-];
-// Direction options, in menu order.
-export const LAYOUTS: readonly { id: LayoutDir; label: string }[] = [
-  { id: "TB", label: "Top → bottom" },
-  { id: "LR", label: "Left → right" },
-  { id: "BT", label: "Bottom → top" },
-  { id: "RL", label: "Right → left" },
-];
-// Line-style options, in menu order.
-export const EDGE_STYLES: readonly { id: EdgeStyle; label: string }[] = [
-  { id: "smoothstep", label: "Smooth step" },
-  { id: "bezier", label: "Bezier" },
-  { id: "straight", label: "Straight" },
-  { id: "step", label: "Step" },
-];
-
-const ALGO_KEY = "pds-canvas-algo";
-const LAYOUT_KEY = "pds-canvas-layout";
-const EDGE_KEY = "pds-canvas-edge";
-
-const isAlgo = (v: string | null): v is LayoutAlgo => ALGORITHMS.some((a) => a.id === v);
-const isLayout = (v: string | null): v is LayoutDir => LAYOUTS.some((l) => l.id === v);
-const isEdge = (v: string | null): v is EdgeStyle => EDGE_STYLES.some((e) => e.id === v);
-
-function load<T extends string>(key: string, guard: (v: string | null) => v is T, fallback: T): T {
-  try {
-    const v = localStorage.getItem(key);
-    return guard(v) ? v : fallback;
-  } catch {
-    return fallback;
-  }
-}
-
-function save(key: string, value: string): void {
-  try {
-    localStorage.setItem(key, value);
-  } catch {
-    /* private mode / quota — applies this session only */
-  }
-}
-
-/** Whether an algorithm honours the direction setting. */
-export function isDirectional(algo: LayoutAlgo): boolean {
-  return ALGORITHMS.find((a) => a.id === algo)?.directional ?? false;
-}
-
-class CanvasPrefs {
-  // The flat-view placement algorithm (persisted).
-  algorithm = $state<LayoutAlgo>(load(ALGO_KEY, isAlgo, "layered"));
-  // The layered graph's flow direction (persisted).
-  layout = $state<LayoutDir>(load(LAYOUT_KEY, isLayout, "TB"));
-  // The edge line style (persisted).
-  edge = $state<EdgeStyle>(load(EDGE_KEY, isEdge, "smoothstep"));
-
-  /** The Svelte Flow edge `type` for the chosen style — bezier is the built-in "default". */
-  get edgeType(): string {
-    return this.edge === "bezier" ? "default" : this.edge;
-  }
-
-  setAlgorithm(algo: LayoutAlgo): void {
-    this.algorithm = algo;
-    save(ALGO_KEY, algo);
-  }
-
-  setLayout(dir: LayoutDir): void {
-    this.layout = dir;
-    save(LAYOUT_KEY, dir);
-  }
-
-  setEdge(style: EdgeStyle): void {
-    this.edge = style;
-    save(EDGE_KEY, style);
-  }
-}
-
-export const canvasPrefs = new CanvasPrefs();