@caribeng/ui 22.4.0 → 22.5.0

package/fesm2022/caribeng-ui-flow.mjs

@@ -0,0 +1,1508 @@
+import * as i0 from '@angular/core';
+import { model, input, booleanAttribute, numberAttribute, output, inject, ElementRef, Injector, viewChild, signal, computed, effect, untracked, afterNextRender, ViewEncapsulation, ChangeDetectionStrategy, Component } from '@angular/core';
+import { injectCbTranslation, cbFormat } from '@caribeng/ui';
+import { CbIconRegistry, CbIcon } from '@caribeng/ui/icon';
+import { spline, workflow, scan, zoomOut, zoomIn } from '@caribeng/ui/icons';
+
+/** Tamaño de cada tipo de nodo (px a zoom 100 %). */
+const CB_FLOW_NODE_SIZE = {
+    start: { w: 136, h: 44 },
+    end: { w: 136, h: 44 },
+    task: { w: 176, h: 60 },
+    decision: { w: 160, h: 92 },
+};
+const EMPTY_FLOW = { nodes: [], edges: [] };
+/**
+ * Problemas del flujo: falta un inicio o un fin, nodos sin salida o inalcanzables desde el inicio,
+ * decisiones con menos de dos salidas (o salidas sin etiqueta), y conexiones que entran en un inicio
+ * o salen de un fin. Un flujo vacío no tiene problemas.
+ */
+function cbValidateFlow(flow) {
+    const issues = [];
+    if (!flow.nodes.length)
+        return issues;
+    const out = adjacency(flow);
+    const incoming = new Map();
+    for (const e of flow.edges)
+        incoming.set(e.to, (incoming.get(e.to) ?? 0) + 1);
+    const starts = flow.nodes.filter((n) => n.type === 'start');
+    if (!starts.length)
+        issues.push({ code: 'no-start', severity: 'error' });
+    for (const extra of starts.slice(1))
+        issues.push({ code: 'many-starts', nodeId: extra.id, severity: 'error' });
+    if (!flow.nodes.some((n) => n.type === 'end'))
+        issues.push({ code: 'no-end', severity: 'error' });
+    const reachable = new Set();
+    const queue = starts.map((s) => s.id);
+    while (queue.length) {
+        const id = queue.shift();
+        if (reachable.has(id))
+            continue;
+        reachable.add(id);
+        for (const e of out.get(id) ?? [])
+            queue.push(e.to);
+    }
+    for (const n of flow.nodes) {
+        const exits = out.get(n.id) ?? [];
+        if (n.type === 'start' && incoming.get(n.id))
+            issues.push({ code: 'start-incoming', nodeId: n.id, severity: 'error' });
+        if (n.type === 'end' && exits.length)
+            issues.push({ code: 'end-outgoing', nodeId: n.id, severity: 'error' });
+        if (n.type !== 'end' && !exits.length)
+            issues.push({ code: 'dead-end', nodeId: n.id, severity: 'error' });
+        if (n.type === 'decision' && exits.length === 1)
+            issues.push({ code: 'decision-branches', nodeId: n.id, severity: 'error' });
+        if (n.type === 'decision' && exits.length > 1 && exits.some((e) => !e.label?.trim())) {
+            issues.push({ code: 'branch-label', nodeId: n.id, severity: 'warning' });
+        }
+        if (starts.length && !reachable.has(n.id))
+            issues.push({ code: 'unreachable', nodeId: n.id, severity: 'error' });
+    }
+    return issues;
+}
+/** Si se puede conectar `from` con `to`: no consigo mismo, no repetida, no hacia un inicio ni desde un fin. */
+function canConnect(flow, from, to) {
+    if (from === to)
+        return false;
+    const a = flow.nodes.find((n) => n.id === from);
+    const b = flow.nodes.find((n) => n.id === to);
+    if (!a || !b || a.type === 'end' || b.type === 'start')
+        return false;
+    return !flow.edges.some((e) => e.from === from && e.to === to);
+}
+/** Orden de lectura: recorrido en anchura desde los inicios y, después, lo que quede. */
+function readingOrder(flow) {
+    const out = adjacency(flow);
+    const byId = new Map(flow.nodes.map((n) => [n.id, n]));
+    const seen = new Set();
+    const order = [];
+    const visit = (roots) => {
+        const queue = [...roots];
+        while (queue.length) {
+            const id = queue.shift();
+            if (seen.has(id) || !byId.has(id))
+                continue;
+            seen.add(id);
+            order.push(byId.get(id));
+            for (const e of out.get(id) ?? [])
+                queue.push(e.to);
+        }
+    };
+    visit(flow.nodes.filter((n) => n.type === 'start').map((n) => n.id));
+    for (const n of flow.nodes)
+        visit([n.id]);
+    return order;
+}
+/**
+ * Coloca los nodos por niveles de arriba abajo (el inicio arriba y cada paso debajo del anterior),
+ * centrados y sin cruzar más de lo necesario. Las conexiones que vuelven atrás no cuentan para
+ * los niveles. Las posiciones se ajustan a la rejilla `grid`.
+ */
+function cbLayoutFlow(flow, grid = 16) {
+    if (!flow.nodes.length)
+        return flow;
+    const order = readingOrder(flow);
+    const index = new Map(order.map((n, i) => [n.id, i]));
+    // Conexiones hacia delante: las que no vuelven a un nodo anterior en el orden de lectura.
+    const forward = flow.edges.filter((e) => (index.get(e.from) ?? 0) < (index.get(e.to) ?? 0));
+    const level = new Map(order.map((n) => [n.id, 0]));
+    for (const n of order) {
+        for (const e of forward)
+            if (e.from === n.id)
+                level.set(e.to, Math.max(level.get(e.to), level.get(n.id) + 1));
+    }
+    const rows = [];
+    for (const n of order)
+        (rows[level.get(n.id)] ??= []).push(n);
+    // Orden dentro de cada nivel: el medio de sus padres (baricentro), en dos pasadas.
+    const slot = new Map();
+    rows.forEach((row) => row.forEach((n, i) => slot.set(n.id, i)));
+    for (let pass = 0; pass < 2; pass++) {
+        for (const row of rows.slice(1)) {
+            const bary = (n) => {
+                const parents = forward.filter((e) => e.to === n.id).map((e) => slot.get(e.from) ?? 0);
+                return parents.length ? parents.reduce((a, b) => a + b, 0) / parents.length : slot.get(n.id);
+            };
+            row.sort((a, b) => bary(a) - bary(b));
+            row.forEach((n, i) => slot.set(n.id, i));
+        }
+    }
+    const gapX = 48;
+    const gapY = 64;
+    const pos = new Map();
+    let y = 0;
+    for (const row of rows) {
+        const height = Math.max(...row.map((n) => CB_FLOW_NODE_SIZE[n.type].h));
+        const width = row.reduce((s, n) => s + CB_FLOW_NODE_SIZE[n.type].w, 0) + gapX * (row.length - 1);
+        let x = -width / 2;
+        for (const n of row) {
+            const size = CB_FLOW_NODE_SIZE[n.type];
+            pos.set(n.id, { x: snap(x, grid), y: snap(y + (height - size.h) / 2, grid) });
+            x += size.w + gapX;
+        }
+        y += height + gapY;
+    }
+    return { ...flow, nodes: flow.nodes.map((n) => ({ ...n, ...pos.get(n.id) })) };
+}
+/** Ajusta a la rejilla. */
+function snap(value, grid) {
+    return grid > 1 ? Math.round(value / grid) * grid : Math.round(value);
+}
+/**
+ * Curva de una conexión entre los lados enfrentados de los nodos. Hacia abajo sale por abajo y
+ * entra por arriba; en horizontal, por los lados; si vuelve hacia arriba (un bucle), rodea por la
+ * derecha para no cruzar los nodos de en medio.
+ */
+function edgeGeometry(from, to) {
+    const a = centerOf(from);
+    const b = centerOf(to);
+    const [dx, dy] = [b[0] - a[0], b[1] - a[1]];
+    let s;
+    let t;
+    let c1;
+    let c2;
+    if (Math.abs(dy) >= Math.abs(dx) * 0.6 && dy > 0) {
+        s = sidePoint(from, 'bottom');
+        t = sidePoint(to, 'top');
+        const k = Math.max(24, (t[1] - s[1]) / 2);
+        [c1, c2] = [[s[0], s[1] + k], [t[0], t[1] - k]];
+    }
+    else if (Math.abs(dy) >= Math.abs(dx) * 0.6) {
+        // Hacia arriba: rodea por la derecha.
+        s = sidePoint(from, 'right');
+        t = sidePoint(to, 'right');
+        const bulge = Math.max(s[0], t[0]) + 56;
+        [c1, c2] = [[bulge, s[1]], [bulge, t[1]]];
+    }
+    else {
+        const right = dx > 0;
+        s = sidePoint(from, right ? 'right' : 'left');
+        t = sidePoint(to, right ? 'left' : 'right');
+        const k = Math.max(24, Math.abs(t[0] - s[0]) / 2) * (right ? 1 : -1);
+        [c1, c2] = [[s[0] + k, s[1]], [t[0] - k, t[1]]];
+    }
+    const mid = [(s[0] + 3 * c1[0] + 3 * c2[0] + t[0]) / 8, (s[1] + 3 * c1[1] + 3 * c2[1] + t[1]) / 8];
+    // La flecha sigue la tangente final de la curva (de c2 a t).
+    const len = Math.hypot(t[0] - c2[0], t[1] - c2[1]) || 1;
+    const [ux, uy] = [(t[0] - c2[0]) / len, (t[1] - c2[1]) / len];
+    const [bx, by] = [t[0] - ux * 10, t[1] - uy * 10];
+    const arrow = [[t[0], t[1]], [bx - uy * 5, by + ux * 5], [bx + uy * 5, by - ux * 5]].map(([x, y]) => `${r(x)},${r(y)}`).join(' ');
+    return { d: `M${r(s[0])} ${r(s[1])} C${r(c1[0])} ${r(c1[1])} ${r(c2[0])} ${r(c2[1])} ${r(t[0])} ${r(t[1])}`, mid, arrow };
+}
+/** Caja que contiene a todos los nodos (o `null` si no hay). */
+function flowBounds(nodes) {
+    if (!nodes.length)
+        return null;
+    const x = Math.min(...nodes.map((n) => n.x));
+    const y = Math.min(...nodes.map((n) => n.y));
+    const right = Math.max(...nodes.map((n) => n.x + CB_FLOW_NODE_SIZE[n.type].w));
+    const bottom = Math.max(...nodes.map((n) => n.y + CB_FLOW_NODE_SIZE[n.type].h));
+    return { x, y, w: right - x, h: bottom - y };
+}
+function centerOf(n) {
+    const size = CB_FLOW_NODE_SIZE[n.type];
+    return [n.x + size.w / 2, n.y + size.h / 2];
+}
+function sidePoint(n, side) {
+    const { w, h } = CB_FLOW_NODE_SIZE[n.type];
+    switch (side) {
+        case 'top':
+            return [n.x + w / 2, n.y];
+        case 'bottom':
+            return [n.x + w / 2, n.y + h];
+        case 'left':
+            return [n.x, n.y + h / 2];
+        case 'right':
+            return [n.x + w, n.y + h / 2];
+    }
+}
+function adjacency(flow) {
+    const out = new Map();
+    for (const e of flow.edges)
+        (out.get(e.from) ?? out.set(e.from, []).get(e.from)).push(e);
+    return out;
+}
+function r(v) {
+    return Math.round(v * 10) / 10;
+}
+
+let nextUid = 0;
+let nextId = 0;
+const MIN_ZOOM = 0.25;
+const MAX_ZOOM = 2;
+const ZOOM_STEP = 1.2;
+const FLOW_ICONS = { 'zoom-in': zoomIn, 'zoom-out': zoomOut, scan, workflow, spline };
+/**
+ * Editor de flujos (aprobaciones, procesos): nodos de inicio, tarea, decisión y fin unidos por
+ * conexiones con etiqueta. Se arrastran los nodos, se conectan desde su tirador y el lienzo se
+ * desplaza y amplía. Todo se puede hacer con el teclado, y la vista Lista es una alternativa
+ * sin lienzo para editar el flujo con lector de pantalla. Valida el flujo (`issues`) y lo ordena
+ * por niveles (`layout()`).
+ *
+ * @example
+ * ```html
+ * <cb-flow-editor [(flow)]="aprobacion" />
+ * ```
+ */
+class CbFlowEditor {
+    constructor() {
+        /** Textos de interfaz en el idioma activo (`provideCaribeNG({ locale })`). */
+        this.t = injectCbTranslation();
+        this.format = cbFormat;
+        /** El flujo: nodos y conexiones. */
+        this.flow = model(EMPTY_FLOW, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "flow" }] : /* istanbul ignore next */ []));
+        /** Solo lectura: se puede recorrer, desplazar y ampliar, pero no editar. Intro abre el nodo (`nodeOpen`). */
+        this.readonly = input(false, { ...(ngDevMode ? { debugName: "readonly" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        /** Rejilla en px: los nodos se ajustan a ella al moverlos (1 la desactiva). */
+        this.gridSize = input(16, { ...(ngDevMode ? { debugName: "gridSize" } : /* istanbul ignore next */ {}), transform: numberAttribute });
+        /** Zoom (1 = 100 %). */
+        this.zoom = model(1, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "zoom" }] : /* istanbul ignore next */ []));
+        /** Diagrama o lista (alternativa sin lienzo, para teclado y lector de pantalla). */
+        this.view = model('diagram', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "view" }] : /* istanbul ignore next */ []));
+        /** Nodo o conexión seleccionada (su `id`). */
+        this.selected = model(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "selected" }] : /* istanbul ignore next */ []));
+        /** Muestra los problemas del flujo bajo el editor. */
+        this.showValidation = input(true, { ...(ngDevMode ? { debugName: "showValidation" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        /** Ajusta el zoom para ver todo el flujo al cargarlo. */
+        this.fitOnLoad = input(true, { ...(ngDevMode ? { debugName: "fitOnLoad" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        /** Nombre accesible (por defecto, "Editor de flujo"). */
+        this.ariaLabel = input('', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
+        /** Se abrió un nodo: doble clic, o Intro en solo lectura. */
+        this.nodeOpen = output();
+        this.uid = `cb-flow-${++nextUid}`;
+        this.types = ['start', 'task', 'decision', 'end'];
+        this.sizes = CB_FLOW_NODE_SIZE;
+        this.minZoom = MIN_ZOOM;
+        this.maxZoom = MAX_ZOOM;
+        this.step = ZOOM_STEP;
+        this.host = inject(ElementRef);
+        this.injector = inject(Injector);
+        this.viewport = viewChild('viewport', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "viewport" }] : /* istanbul ignore next */ []));
+        this.editor = viewChild('editor', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "editor" }] : /* istanbul ignore next */ []));
+        /** Desplazamiento del lienzo (px de pantalla). */
+        this.pan = signal({ x: 0, y: 0 }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "pan" }] : /* istanbul ignore next */ []));
+        this.panning = signal(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "panning" }] : /* istanbul ignore next */ []));
+        /** Posición provisional de un nodo mientras se arrastra. */
+        this.dragPos = signal(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "dragPos" }] : /* istanbul ignore next */ []));
+        /** Nodo desde el que se conecta (con el teclado o con el botón Conectar). */
+        this.connectFrom = signal(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "connectFrom" }] : /* istanbul ignore next */ []));
+        /** Conexión que se arrastra desde un tirador, hasta el puntero (coordenadas del lienzo). */
+        this.linkDrag = signal(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "linkDrag" }] : /* istanbul ignore next */ []));
+        this.editing = signal(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "editing" }] : /* istanbul ignore next */ []));
+        this.announcement = signal('', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "announcement" }] : /* istanbul ignore next */ []));
+        this.announceFlip = false;
+        this.fitted = false;
+        /** Problemas del flujo (los mismos que muestra el editor). */
+        this.issues = computed(() => cbValidateFlow(this.flow()), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "issues" }] : /* istanbul ignore next */ []));
+        this.nodes = computed(() => {
+            const drag = this.dragPos();
+            const nodes = this.flow().nodes;
+            return drag ? nodes.map((n) => (n.id === drag.id ? { ...n, x: drag.x, y: drag.y } : n)) : nodes;
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "nodes" }] : /* istanbul ignore next */ []));
+        this.nodeMap = computed(() => new Map(this.nodes().map((n) => [n.id, n])), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "nodeMap" }] : /* istanbul ignore next */ []));
+        this.outgoing = computed(() => {
+            const map = new Map();
+            for (const e of this.flow().edges)
+                (map.get(e.from) ?? map.set(e.from, []).get(e.from)).push(e);
+            return map;
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "outgoing" }] : /* istanbul ignore next */ []));
+        this.issuesByNode = computed(() => {
+            const map = new Map();
+            for (const issue of this.issues())
+                if (issue.nodeId)
+                    (map.get(issue.nodeId) ?? map.set(issue.nodeId, []).get(issue.nodeId)).push(issue);
+            return map;
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "issuesByNode" }] : /* istanbul ignore next */ []));
+        this.edgeViews = computed(() => {
+            const nodes = this.nodeMap();
+            const views = [];
+            for (const edge of this.flow().edges) {
+                const from = nodes.get(edge.from);
+                const to = nodes.get(edge.to);
+                if (!from || !to)
+                    continue;
+                const g = edgeGeometry(from, to);
+                const name = cbFormat(this.t().flowEdgeOf, from.label, to.label);
+                views.push({ edge, d: g.d, arrow: g.arrow, mid: g.mid, label: edge.label ? `${name}: ${edge.label}` : name });
+            }
+            return views;
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "edgeViews" }] : /* istanbul ignore next */ []));
+        /** Caja del SVG de conexiones: la de los nodos con margen para las curvas que rodean. */
+        this.svgBox = computed(() => {
+            const b = flowBounds(this.nodes()) ?? { x: 0, y: 0, w: 0, h: 0 };
+            const drag = this.linkDrag();
+            const [x1, y1] = drag ? [Math.min(b.x, drag.x), Math.min(b.y, drag.y)] : [b.x, b.y];
+            const [x2, y2] = drag ? [Math.max(b.x + b.w, drag.x), Math.max(b.y + b.h, drag.y)] : [b.x + b.w, b.y + b.h];
+            return { x: x1 - 160, y: y1 - 160, w: x2 - x1 + 320, h: y2 - y1 + 320 };
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "svgBox" }] : /* istanbul ignore next */ []));
+        this.tempLine = computed(() => {
+            const drag = this.linkDrag();
+            const from = drag && this.nodeMap().get(drag.from);
+            if (!drag || !from)
+                return '';
+            const { w, h } = CB_FLOW_NODE_SIZE[from.type];
+            return `M${from.x + w / 2} ${from.y + h} L${drag.x} ${drag.y}`;
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "tempLine" }] : /* istanbul ignore next */ []));
+        this.worldTransform = computed(() => {
+            const { x, y } = this.pan();
+            return `translate(${x}px, ${y}px) scale(${this.zoom()})`;
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "worldTransform" }] : /* istanbul ignore next */ []));
+        this.gridBackground = computed(() => {
+            const size = Math.max(4, this.gridSize() * this.zoom());
+            const { x, y } = this.pan();
+            return { size: `${size}px ${size}px`, position: `${x}px ${y}px` };
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "gridBackground" }] : /* istanbul ignore next */ []));
+        this.percent = computed(() => `${Math.round(this.zoom() * 100)} %`, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "percent" }] : /* istanbul ignore next */ []));
+        this.ordered = computed(() => readingOrder(this.flow()), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "ordered" }] : /* istanbul ignore next */ []));
+        this.selectedNode = computed(() => {
+            const id = this.selected();
+            return id ? (this.flow().nodes.find((n) => n.id === id) ?? null) : null;
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "selectedNode" }] : /* istanbul ignore next */ []));
+        this.selectedExists = computed(() => {
+            const id = this.selected();
+            return !!id && (this.flow().nodes.some((n) => n.id === id) || this.flow().edges.some((e) => e.id === id));
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "selectedExists" }] : /* istanbul ignore next */ []));
+        /** Caja del campo de edición en línea (sobre el nodo o en el punto medio de la conexión). */
+        this.editorBox = computed(() => {
+            const editing = this.editing();
+            if (!editing)
+                return null;
+            if (editing.kind === 'node') {
+                const n = this.nodeMap().get(editing.id);
+                if (!n)
+                    return null;
+                const { w, h } = CB_FLOW_NODE_SIZE[n.type];
+                const width = Math.min(w - 16, 160);
+                return { x: n.x + (w - width) / 2, y: n.y + h / 2 - 15, w: width, label: cbFormat(this.t().flowNameOf, this.typeLabel(n.type)) };
+            }
+            const e = this.edgeViews().find((v) => v.edge.id === editing.id);
+            if (!e)
+                return null;
+            return { x: e.mid[0] - 70, y: e.mid[1] - 15, w: 140, label: cbFormat(this.t().flowEdgeLabelOf, this.nameOf(e.edge.from), this.nameOf(e.edge.to)) };
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "editorBox" }] : /* istanbul ignore next */ []));
+        const registry = inject(CbIconRegistry);
+        for (const [name, body] of Object.entries(FLOW_ICONS)) {
+            if (!registry.has(name))
+                registry.register({ [name]: body });
+        }
+        // Ajusta el zoom la primera vez que hay nodos y lienzo.
+        effect(() => {
+            const hasNodes = this.flow().nodes.length > 0;
+            const viewport = this.viewport();
+            if (!hasNodes || !viewport || this.fitted || !untracked(this.fitOnLoad))
+                return;
+            this.fitted = true;
+            afterNextRender(() => this.fit(), { injector: this.injector });
+        });
+        // Un nodo o conexión que desaparece del flujo deja de estar seleccionado.
+        effect(() => {
+            const id = this.selected();
+            if (id && !this.selectedExists())
+                untracked(() => this.selected.set(null));
+        });
+    }
+    // --- API pública ------------------------------------------------------------
+    /** Añade un nodo. Con un nodo seleccionado, lo pone debajo y lo conecta desde él; después abre su nombre. */
+    addNode(type) {
+        const flow = this.flow();
+        const source = this.selectedNode();
+        const size = CB_FLOW_NODE_SIZE[type];
+        const grid = this.gridSize();
+        let x;
+        let y;
+        if (source) {
+            const s = CB_FLOW_NODE_SIZE[source.type];
+            // Debajo del nodo; si ya tiene salidas, a la derecha de la última.
+            const siblings = (this.outgoing().get(source.id) ?? []).map((e) => this.nodeMap().get(e.to)).filter((n) => !!n);
+            const below = source.y + s.h + 64;
+            const right = siblings.length ? Math.max(...siblings.map((n) => n.x + CB_FLOW_NODE_SIZE[n.type].w)) + 48 : null;
+            [x, y] = [right ?? source.x + (s.w - size.w) / 2, below];
+        }
+        else if (flow.nodes.length) {
+            const b = flowBounds(flow.nodes);
+            [x, y] = [b.x + (b.w - size.w) / 2, b.y + b.h + 64];
+        }
+        else {
+            [x, y] = [0, 0];
+        }
+        const count = flow.nodes.filter((n) => n.type === type).length + 1;
+        const node = { id: `${type}-${Date.now().toString(36)}${++nextId}`, type, label: `${this.typeLabel(type)} ${count}`, x: snap(x, grid), y: snap(y, grid) };
+        const edges = source && canConnect({ ...flow, nodes: [...flow.nodes, node] }, source.id, node.id) ? [...flow.edges, this.newEdge(source.id, node.id)] : flow.edges;
+        this.flow.set({ nodes: [...flow.nodes, node], edges });
+        this.announce(cbFormat(this.t().flowAdded, cbFormat(this.t().flowNodeOf, this.typeLabel(type), node.label)));
+        this.selected.set(node.id);
+        afterNextRender(() => {
+            if (this.view() === 'list') {
+                const input = this.host.nativeElement.querySelector(`[data-name="${node.id}"]`);
+                input?.focus();
+                input?.select();
+            }
+            else {
+                this.ensureVisible(node);
+                this.startEdit(node.id, 'node');
+            }
+        }, { injector: this.injector });
+        return node;
+    }
+    /** Conecta dos nodos (si se puede: no consigo mismo, no repetida, no hacia un inicio ni desde un fin). */
+    connect(from, to, label) {
+        const flow = this.flow();
+        if (!canConnect(flow, from, to)) {
+            this.announce(cbFormat(this.t().flowCannotConnect, this.nameOf(from), this.nameOf(to)));
+            return null;
+        }
+        const edge = this.newEdge(from, to, label);
+        this.flow.set({ ...flow, edges: [...flow.edges, edge] });
+        this.announce(cbFormat(this.t().flowConnected, this.nameOf(from), this.nameOf(to)));
+        return edge;
+    }
+    removeNode(id) {
+        const flow = this.flow();
+        const node = flow.nodes.find((n) => n.id === id);
+        if (!node)
+            return;
+        const order = readingOrder(flow);
+        const next = order[order.findIndex((n) => n.id === id) + 1] ?? order[order.findIndex((n) => n.id === id) - 1];
+        this.flow.set({ nodes: flow.nodes.filter((n) => n.id !== id), edges: flow.edges.filter((e) => e.from !== id && e.to !== id) });
+        if (this.connectFrom() === id)
+            this.connectFrom.set(null);
+        this.announce(cbFormat(this.t().flowRemoved, cbFormat(this.t().flowNodeOf, this.typeLabel(node.type), node.label)));
+        this.focusAfterRemoval(next && next.id !== id ? next.id : null);
+    }
+    removeEdge(id) {
+        const flow = this.flow();
+        const edge = flow.edges.find((e) => e.id === id);
+        if (!edge)
+            return;
+        this.flow.set({ ...flow, edges: flow.edges.filter((e) => e.id !== id) });
+        this.announce(cbFormat(this.t().flowRemoved, cbFormat(this.t().flowEdgeOf, this.nameOf(edge.from), this.nameOf(edge.to))));
+        this.focusAfterRemoval(edge.from);
+    }
+    rename(id, label) {
+        const clean = label.trim();
+        if (!clean)
+            return;
+        this.flow.update((f) => ({ ...f, nodes: f.nodes.map((n) => (n.id === id ? { ...n, label: clean } : n)) }));
+    }
+    relabel(id, label) {
+        const clean = label.trim();
+        this.flow.update((f) => ({ ...f, edges: f.edges.map((e) => (e.id === id ? { ...e, label: clean || undefined } : e)) }));
+    }
+    /** Coloca los nodos por niveles de arriba abajo y ajusta la vista. */
+    layout() {
+        this.flow.set(cbLayoutFlow(this.flow(), this.gridSize()));
+        this.announce(this.t().flowLaidOut);
+        afterNextRender(() => this.fit(), { injector: this.injector });
+    }
+    /** Ajusta zoom y desplazamiento para ver todo el flujo. */
+    fit() {
+        const el = this.viewport()?.nativeElement;
+        const b = flowBounds(this.flow().nodes);
+        if (!el || !b || !el.clientWidth)
+            return;
+        const pad = 48;
+        const zoom = clamp(Math.min((el.clientWidth - pad * 2) / b.w, (el.clientHeight - pad * 2) / b.h, 1.25), MIN_ZOOM, MAX_ZOOM);
+        this.zoom.set(round2(zoom));
+        this.pan.set({ x: (el.clientWidth - b.w * zoom) / 2 - b.x * zoom, y: (el.clientHeight - b.h * zoom) / 2 - b.y * zoom });
+    }
+    /** Multiplica el zoom por `factor` alrededor del centro de la vista (o del punto `at`, en px de la vista). */
+    zoomBy(factor, at) {
+        const el = this.viewport()?.nativeElement;
+        const z1 = this.zoom();
+        const z2 = round2(clamp(z1 * factor, MIN_ZOOM, MAX_ZOOM));
+        if (z2 === z1)
+            return;
+        const p = at ?? { x: (el?.clientWidth ?? 0) / 2, y: (el?.clientHeight ?? 0) / 2 };
+        const { x, y } = this.pan();
+        this.pan.set({ x: p.x - ((p.x - x) * z2) / z1, y: p.y - ((p.y - y) * z2) / z1 });
+        this.zoom.set(z2);
+    }
+    // --- Barra -------------------------------------------------------------------
+    toggleConnect() {
+        const node = this.selectedNode();
+        if (this.connectFrom())
+            this.cancelConnect();
+        else if (node)
+            this.beginConnect(node);
+    }
+    deleteSelected() {
+        const id = this.selected();
+        if (!id)
+            return;
+        if (this.flow().nodes.some((n) => n.id === id))
+            this.removeNode(id);
+        else
+            this.removeEdge(id);
+    }
+    connectFromList(from, select) {
+        if (!select.value)
+            return;
+        if (this.connect(from, select.value))
+            select.value = '';
+    }
+    reveal(id) {
+        this.selected.set(id);
+        afterNextRender(() => {
+            if (this.view() === 'list') {
+                this.host.nativeElement.querySelector(`[data-name="${id}"]`)?.focus();
+            }
+            else {
+                const node = this.nodeMap().get(id);
+                if (node)
+                    this.ensureVisible(node);
+                this.focusNode(id);
+            }
+        }, { injector: this.injector });
+    }
+    // --- Teclado ---------------------------------------------------------------------
+    onNodeKeydown(event, rendered) {
+        if (event.target !== event.currentTarget || event.ctrlKey || event.metaKey || event.altKey)
+            return;
+        // La de la plantilla puede ser de antes del último repintado (tecla mantenida).
+        const node = this.flow().nodes.find((n) => n.id === rendered.id) ?? rendered;
+        const grid = Math.max(1, this.gridSize());
+        const step = event.shiftKey ? grid * 4 : grid;
+        const arrows = { ArrowLeft: [-step, 0], ArrowRight: [step, 0], ArrowUp: [0, -step], ArrowDown: [0, step] };
+        const key = event.key;
+        if (key === 'Enter' || key === ' ' || key === 'F2') {
+            const from = this.connectFrom();
+            if (from && from !== node.id && key !== 'F2') {
+                this.connect(from, node.id);
+                this.connectFrom.set(null);
+            }
+            else if (this.readonly()) {
+                if (key !== 'F2')
+                    this.nodeOpen.emit(node);
+            }
+            else {
+                this.startEdit(node.id, 'node');
+            }
+        }
+        else if (this.readonly()) {
+            return;
+        }
+        else if (arrows[key]) {
+            const [dx, dy] = arrows[key];
+            this.moveNode(node.id, snap(node.x + dx, grid), snap(node.y + dy, grid));
+            afterNextRender(() => this.ensureVisible(this.nodeMap().get(node.id) ?? node), { injector: this.injector });
+        }
+        else if (key === 'Delete' || key === 'Backspace') {
+            this.removeNode(node.id);
+        }
+        else if ((key === 'c' || key === 'C') && node.type !== 'end') {
+            if (this.connectFrom() === node.id)
+                this.cancelConnect();
+            else
+                this.beginConnect(node);
+        }
+        else {
+            return;
+        }
+        event.preventDefault();
+        event.stopPropagation();
+    }
+    onEdgeKeydown(event, edge) {
+        if (this.readonly() || event.ctrlKey || event.metaKey || event.altKey)
+            return;
+        if (event.key === 'Enter' || event.key === ' ' || event.key === 'F2')
+            this.startEdit(edge.id, 'edge');
+        else if (event.key === 'Delete' || event.key === 'Backspace')
+            this.removeEdge(edge.id);
+        else
+            return;
+        event.preventDefault();
+        event.stopPropagation();
+    }
+    onHostKeydown(event) {
+        const target = event.target;
+        if (/^(INPUT|TEXTAREA|SELECT)$/.test(target.tagName) || event.ctrlKey || event.metaKey || event.altKey)
+            return;
+        if (event.key === 'Escape' && this.connectFrom()) {
+            this.cancelConnect();
+        }
+        else if (this.view() === 'diagram' && (event.key === '+' || event.key === '=')) {
+            this.zoomBy(ZOOM_STEP);
+        }
+        else if (this.view() === 'diagram' && event.key === '-') {
+            this.zoomBy(1 / ZOOM_STEP);
+        }
+        else if (this.view() === 'diagram' && event.key === '0') {
+            this.fit();
+        }
+        else {
+            return;
+        }
+        event.preventDefault();
+    }
+    // --- Edición en línea ----------------------------------------------------------------
+    startEdit(id, kind) {
+        if (this.readonly())
+            return;
+        this.editing.set({ id, kind });
+        afterNextRender(() => {
+            const input = this.editor()?.nativeElement;
+            if (!input)
+                return;
+            const flow = this.flow();
+            input.value = kind === 'node' ? (flow.nodes.find((n) => n.id === id)?.label ?? '') : (flow.edges.find((e) => e.id === id)?.label ?? '');
+            input.focus();
+            input.select();
+        }, { injector: this.injector });
+    }
+    onEditorKeydown(event) {
+        event.stopPropagation();
+        if (event.key === 'Enter') {
+            event.preventDefault();
+            this.commitEdit(true);
+        }
+        else if (event.key === 'Escape') {
+            event.preventDefault();
+            this.cancelEdit();
+        }
+    }
+    /** Guarda lo escrito (al pulsar Intro o al salir del campo). */
+    commitEdit(refocus = false) {
+        const editing = this.editing();
+        const input = this.editor()?.nativeElement;
+        if (!editing || !input)
+            return;
+        this.editing.set(null);
+        if (editing.kind === 'node')
+            this.rename(editing.id, input.value);
+        else
+            this.relabel(editing.id, input.value);
+        if (refocus)
+            this.focusItem(editing);
+    }
+    cancelEdit() {
+        const editing = this.editing();
+        this.editing.set(null);
+        if (editing)
+            this.focusItem(editing);
+    }
+    focusItem(editing) {
+        afterNextRender(() => {
+            const selector = editing.kind === 'node' ? `[data-node="${editing.id}"]` : `[data-edge="${editing.id}"]`;
+            this.host.nativeElement.querySelector(selector)?.focus();
+        }, { injector: this.injector });
+    }
+    // --- Puntero ----------------------------------------------------------------------
+    onNodePointerDown(event, node) {
+        if (event.button !== 0)
+            return;
+        event.stopPropagation();
+        const el = event.currentTarget;
+        const from = this.connectFrom();
+        if (from && from !== node.id) {
+            event.preventDefault();
+            this.connect(from, node.id);
+            this.connectFrom.set(null);
+            el.focus();
+            return;
+        }
+        if (this.editing())
+            this.commitEdit();
+        this.selected.set(node.id);
+        if (this.readonly())
+            return;
+        // Sin el default no se selecciona texto al arrastrar; el foco se da a mano.
+        event.preventDefault();
+        el.focus({ preventScroll: true });
+        const start = { x: event.clientX, y: event.clientY, nx: node.x, ny: node.y };
+        const zoom = this.zoom();
+        const grid = this.gridSize();
+        let moved = false;
+        this.track(event, el, (e) => {
+            const [dx, dy] = [(e.clientX - start.x) / zoom, (e.clientY - start.y) / zoom];
+            if (!moved && Math.hypot(dx, dy) * zoom < 3)
+                return;
+            moved = true;
+            this.dragPos.set({ id: node.id, x: start.nx + dx, y: start.ny + dy });
+        }, () => {
+            const pos = this.dragPos();
+            this.dragPos.set(null);
+            if (moved && pos)
+                this.moveNode(node.id, snap(pos.x, grid), snap(pos.y, grid));
+        });
+    }
+    onNodeDblClick(node) {
+        if (this.readonly())
+            this.nodeOpen.emit(node);
+        else
+            this.startEdit(node.id, 'node');
+    }
+    /** Arrastrar desde el tirador crea una conexión con el nodo donde se suelta. */
+    onHandlePointerDown(event, node) {
+        if (event.button !== 0 || this.readonly())
+            return;
+        event.stopPropagation();
+        event.preventDefault();
+        const el = event.currentTarget;
+        this.selected.set(node.id);
+        this.linkDrag.set({ from: node.id, ...this.toWorld(event) });
+        this.track(event, el, (e) => this.linkDrag.set({ from: node.id, ...this.toWorld(e) }), (e) => {
+            this.linkDrag.set(null);
+            const target = this.host.nativeElement.ownerDocument.elementFromPoint?.(e.clientX, e.clientY)?.closest('[data-node]');
+            const to = target?.dataset['node'];
+            if (to && to !== node.id)
+                this.connect(node.id, to);
+        });
+    }
+    onEdgePointerDown(event, edge) {
+        if (event.button !== 0)
+            return;
+        event.stopPropagation();
+        if (this.editing())
+            this.commitEdit();
+        this.selected.set(edge.id);
+        const g = this.host.nativeElement.querySelector(`[data-edge="${edge.id}"]`);
+        event.preventDefault();
+        g?.focus({ preventScroll: true });
+    }
+    /** Arrastrar el fondo desplaza el lienzo; un clic sin moverse quita la selección. */
+    onBackgroundPointerDown(event) {
+        if (event.button !== 0 && event.button !== 1)
+            return;
+        if (this.editing())
+            this.commitEdit();
+        const el = event.currentTarget;
+        const pointer = { x: event.clientX, y: event.clientY };
+        const origin = this.pan();
+        let moved = false;
+        this.track(event, el, (e) => {
+            const [dx, dy] = [e.clientX - pointer.x, e.clientY - pointer.y];
+            if (!moved && Math.hypot(dx, dy) < 3)
+                return;
+            moved = true;
+            this.panning.set(true);
+            this.pan.set({ x: origin.x + dx, y: origin.y + dy });
+        }, () => {
+            this.panning.set(false);
+            if (!moved) {
+                if (this.connectFrom())
+                    this.cancelConnect();
+                this.selected.set(null);
+            }
+        });
+    }
+    /** Rueda: desplaza; con Ctrl (o el gesto de pellizcar del panel táctil), amplía alrededor del puntero. */
+    onWheel(event) {
+        event.preventDefault();
+        if (event.ctrlKey || event.metaKey) {
+            const rect = event.currentTarget.getBoundingClientRect();
+            this.zoomBy(event.deltaY < 0 ? 1.1 : 1 / 1.1, { x: event.clientX - rect.left, y: event.clientY - rect.top });
+        }
+        else {
+            const { x, y } = this.pan();
+            this.pan.set({ x: x - event.deltaX, y: y - event.deltaY });
+        }
+    }
+    track(event, el, move, end) {
+        el.setPointerCapture?.(event.pointerId);
+        const up = (e) => {
+            el.removeEventListener('pointermove', move);
+            el.removeEventListener('pointerup', up);
+            el.removeEventListener('pointercancel', up);
+            end(e);
+        };
+        el.addEventListener('pointermove', move);
+        el.addEventListener('pointerup', up);
+        el.addEventListener('pointercancel', up);
+    }
+    // --- Utilidades ---------------------------------------------------------------------
+    beginConnect(node) {
+        this.connectFrom.set(node.id);
+        this.announce(cbFormat(this.t().flowConnectFrom, node.label));
+    }
+    cancelConnect() {
+        this.connectFrom.set(null);
+        this.announce(this.t().flowConnectCancelled);
+    }
+    moveNode(id, x, y) {
+        this.flow.update((f) => ({ ...f, nodes: f.nodes.map((n) => (n.id === id ? { ...n, x, y } : n)) }));
+    }
+    newEdge(from, to, label) {
+        return { id: `edge-${Date.now().toString(36)}${++nextId}`, from, to, ...(label ? { label } : {}) };
+    }
+    /** Coordenadas del lienzo bajo el puntero. */
+    toWorld(event) {
+        const rect = this.viewport()?.nativeElement.getBoundingClientRect();
+        const { x, y } = this.pan();
+        const zoom = this.zoom();
+        return { x: (event.clientX - (rect?.left ?? 0) - x) / zoom, y: (event.clientY - (rect?.top ?? 0) - y) / zoom };
+    }
+    /** Desplaza el lienzo lo justo para que se vea el nodo. */
+    ensureVisible(node) {
+        const el = this.viewport()?.nativeElement;
+        if (!el || !el.clientWidth)
+            return;
+        const { w, h } = CB_FLOW_NODE_SIZE[node.type];
+        const zoom = this.zoom();
+        const margin = 24;
+        let { x, y } = this.pan();
+        const [left, top] = [node.x * zoom + x, node.y * zoom + y];
+        const [right, bottom] = [left + w * zoom, top + h * zoom];
+        if (left < margin)
+            x += margin - left;
+        else if (right > el.clientWidth - margin)
+            x -= right - (el.clientWidth - margin);
+        if (top < margin)
+            y += margin - top;
+        else if (bottom > el.clientHeight - margin)
+            y -= bottom - (el.clientHeight - margin);
+        this.pan.set({ x, y });
+    }
+    focusNode(id) {
+        this.host.nativeElement.querySelector(`[data-node="${id}"]`)?.focus();
+    }
+    focusAfterRemoval(nextNode) {
+        const hadFocus = this.host.nativeElement.contains(this.host.nativeElement.ownerDocument.activeElement);
+        if (!hadFocus)
+            return;
+        afterNextRender(() => {
+            if (this.view() === 'list') {
+                const target = nextNode && this.host.nativeElement.querySelector(`[data-name="${nextNode}"]`);
+                (target || this.host.nativeElement.querySelector('.cb-flow__view[aria-pressed="true"]'))?.focus();
+            }
+            else if (nextNode && this.flow().nodes.some((n) => n.id === nextNode)) {
+                this.focusNode(nextNode);
+            }
+            else {
+                this.viewport()?.nativeElement.focus();
+            }
+        }, { injector: this.injector });
+    }
+    nodeLabel(n) {
+        const t = this.t();
+        const exits = (this.outgoing().get(n.id) ?? []).map((e) => (e.label ? `${this.nameOf(e.to)} (${e.label})` : this.nameOf(e.to)));
+        const parts = [cbFormat(t.flowNodeOf, this.typeLabel(n.type), n.label)];
+        if (n.type !== 'end')
+            parts.push(exits.length ? cbFormat(t.flowExits, exits.join(', ')) : t.flowNoExits);
+        for (const issue of this.issuesByNode().get(n.id) ?? [])
+            parts.push(cbFormat(t.flowIssueOf, this.issueText(issue)));
+        return parts.join('. ');
+    }
+    typeLabel(type) {
+        const t = this.t();
+        return { start: t.flowStart, task: t.flowTask, decision: t.flowDecision, end: t.flowEnd }[type];
+    }
+    nameOf(id) {
+        return this.flow().nodes.find((n) => n.id === id)?.label ?? id;
+    }
+    /** Destinos posibles en la lista: todos menos él mismo, los inicios y los ya conectados. */
+    targetsFor(node) {
+        const flow = this.flow();
+        return this.ordered().filter((o) => canConnect(flow, node.id, o.id));
+    }
+    issueText(issue) {
+        const t = this.t();
+        const name = issue.nodeId ? this.nameOf(issue.nodeId) : '';
+        const text = {
+            'no-start': t.flowIssueNoStart,
+            'many-starts': t.flowIssueManyStarts,
+            'no-end': t.flowIssueNoEnd,
+            'start-incoming': t.flowIssueStartIncoming,
+            'end-outgoing': t.flowIssueEndOutgoing,
+            'dead-end': t.flowIssueDeadEnd,
+            'decision-branches': t.flowIssueBranches,
+            'branch-label': t.flowIssueBranchLabel,
+            unreachable: t.flowIssueUnreachable,
+        };
+        return cbFormat(text[issue.code], name);
+    }
+    diamond(type) {
+        const { w, h } = CB_FLOW_NODE_SIZE[type];
+        return `${w / 2},1 ${w - 1},${h / 2} ${w / 2},${h - 1} 1,${h / 2}`;
+    }
+    announce(text) {
+        // Un espacio duro alterno hace que se repita aunque el texto sea el mismo.
+        this.announceFlip = !this.announceFlip;
+        this.announcement.set(this.announceFlip ? text : `${text} `);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: CbFlowEditor, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: CbFlowEditor, isStandalone: true, selector: "cb-flow-editor", inputs: { flow: { classPropertyName: "flow", publicName: "flow", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, gridSize: { classPropertyName: "gridSize", publicName: "gridSize", isSignal: true, isRequired: false, transformFunction: null }, zoom: { classPropertyName: "zoom", publicName: "zoom", isSignal: true, isRequired: false, transformFunction: null }, view: { classPropertyName: "view", publicName: "view", isSignal: true, isRequired: false, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null }, showValidation: { classPropertyName: "showValidation", publicName: "showValidation", isSignal: true, isRequired: false, transformFunction: null }, fitOnLoad: { classPropertyName: "fitOnLoad", publicName: "fitOnLoad", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { flow: "flowChange", zoom: "zoomChange", view: "viewChange", selected: "selectedChange", nodeOpen: "nodeOpen" }, host: { attributes: { "role": "group" }, listeners: { "keydown": "onHostKeydown($event)" }, properties: { "attr.aria-label": "ariaLabel() || t().flowEditor" }, classAttribute: "cb-flow" }, viewQueries: [{ propertyName: "viewport", first: true, predicate: ["viewport"], descendants: true, isSignal: true }, { propertyName: "editor", first: true, predicate: ["editor"], descendants: true, isSignal: true }], ngImport: i0, template: `
+    <div class="cb-flow__bar">
+      @if (!readonly()) {
+        <div class="cb-flow__group" role="group" [attr.aria-label]="t().flowAdd">
+          @for (type of types; track type) {
+            <button type="button" class="cb-flow__btn" (click)="addNode(type)">
+              <span class="cb-flow__swatch" [class]="'cb-flow__swatch cb-flow__swatch--' + type" aria-hidden="true"></span>
+              {{ typeLabel(type) }}
+            </button>
+          }
+        </div>
+        <div class="cb-flow__group">
+          <button
+            type="button"
+            class="cb-flow__btn"
+            [attr.aria-pressed]="!!connectFrom()"
+            [disabled]="!selectedNode() || selectedNode()!.type === 'end'"
+            (click)="toggleConnect()"
+          >
+            <cb-icon name="spline" [size]="16" aria-hidden="true" />{{ t().flowConnect }}
+          </button>
+          <button type="button" class="cb-flow__btn" [disabled]="!selected() || !selectedExists()" (click)="deleteSelected()">
+            <cb-icon name="trash" [size]="16" aria-hidden="true" />{{ t().flowDelete }}
+          </button>
+          <button type="button" class="cb-flow__btn" [disabled]="!flow().nodes.length" (click)="layout()">
+            <cb-icon name="workflow" [size]="16" aria-hidden="true" />{{ t().flowLayout }}
+          </button>
+        </div>
+      }
+      @if (view() === 'diagram') {
+        <div class="cb-flow__group" role="group" [attr.aria-label]="t().flowZoom">
+          <button type="button" class="cb-flow__icon" [attr.aria-label]="t().flowZoomOut" [disabled]="zoom() <= minZoom" (click)="zoomBy(1 / step)">
+            <cb-icon name="zoom-out" [size]="18" aria-hidden="true" />
+          </button>
+          <span class="cb-flow__percent" aria-hidden="true">{{ percent() }}</span>
+          <button type="button" class="cb-flow__icon" [attr.aria-label]="t().flowZoomIn" [disabled]="zoom() >= maxZoom" (click)="zoomBy(step)">
+            <cb-icon name="zoom-in" [size]="18" aria-hidden="true" />
+          </button>
+          <button type="button" class="cb-flow__icon" [attr.aria-label]="t().flowFit" [attr.title]="t().flowFit" [disabled]="!flow().nodes.length" (click)="fit()">
+            <cb-icon name="scan" [size]="18" aria-hidden="true" />
+          </button>
+        </div>
+      }
+      <span class="cb-flow__spacer"></span>
+      <div class="cb-flow__views" role="group" [attr.aria-label]="t().flowView">
+        <button type="button" class="cb-flow__view" [attr.aria-pressed]="view() === 'diagram'" (click)="view.set('diagram')">{{ t().flowDiagram }}</button>
+        <button type="button" class="cb-flow__view" [attr.aria-pressed]="view() === 'list'" (click)="view.set('list')">{{ t().flowList }}</button>
+      </div>
+    </div>
+
+    @if (view() === 'diagram') {
+      <div
+        #viewport
+        class="cb-flow__viewport"
+        tabindex="-1"
+        [class.cb-flow__viewport--connect]="!!connectFrom()"
+        [class.cb-flow__viewport--panning]="panning()"
+        [style.background-size]="gridBackground().size"
+        [style.background-position]="gridBackground().position"
+        (pointerdown)="onBackgroundPointerDown($event)"
+        (wheel)="onWheel($event)"
+      >
+        @if (!flow().nodes.length) {
+          <p class="cb-flow__empty">{{ t().flowEmpty }}</p>
+        }
+        <div class="cb-flow__world" [style.transform]="worldTransform()">
+          @for (n of nodes(); track n.id) {
+            <div
+              class="cb-flow__node"
+              [class]="'cb-flow__node cb-flow__node--' + n.type"
+              [class.cb-is-selected]="selected() === n.id"
+              [class.cb-is-source]="connectFrom() === n.id"
+              [class.cb-flow__node--issue]="issuesByNode().has(n.id)"
+              [attr.data-node]="n.id"
+              tabindex="0"
+              role="button"
+              [attr.aria-label]="nodeLabel(n)"
+              [attr.aria-describedby]="uid + (readonly() ? '-ro-hint' : '-node-hint')"
+              [style.left.px]="n.x"
+              [style.top.px]="n.y"
+              [style.width.px]="sizes[n.type].w"
+              [style.height.px]="sizes[n.type].h"
+              (pointerdown)="onNodePointerDown($event, n)"
+              (dblclick)="onNodeDblClick(n)"
+              (keydown)="onNodeKeydown($event, n)"
+              (focus)="selected.set(n.id)"
+            >
+              <svg class="cb-flow__shape" [attr.viewBox]="'0 0 ' + sizes[n.type].w + ' ' + sizes[n.type].h" aria-hidden="true">
+                @switch (n.type) {
+                  @case ('decision') {
+                    <polygon [attr.points]="diamond(n.type)" />
+                  }
+                  @case ('task') {
+                    <rect x="1" y="1" rx="8" [attr.width]="sizes[n.type].w - 2" [attr.height]="sizes[n.type].h - 2" />
+                  }
+                  @default {
+                    <rect x="1" y="1" [attr.rx]="(sizes[n.type].h - 2) / 2" [attr.width]="sizes[n.type].w - 2" [attr.height]="sizes[n.type].h - 2" />
+                  }
+                }
+              </svg>
+              <span class="cb-flow__label">{{ n.label }}</span>
+              @if (issuesByNode().has(n.id)) {
+                <span class="cb-flow__badge" aria-hidden="true">!</span>
+              }
+              @if (!readonly() && n.type !== 'end') {
+                <span class="cb-flow__handle" aria-hidden="true" (pointerdown)="onHandlePointerDown($event, n)"></span>
+              }
+            </div>
+          }
+          <svg
+            class="cb-flow__edges"
+            [attr.viewBox]="svgBox().x + ' ' + svgBox().y + ' ' + svgBox().w + ' ' + svgBox().h"
+            [style.left.px]="svgBox().x"
+            [style.top.px]="svgBox().y"
+            [style.width.px]="svgBox().w"
+            [style.height.px]="svgBox().h"
+          >
+            @for (e of edgeViews(); track e.edge.id) {
+              <g
+                class="cb-flow__edge"
+                [class.cb-is-selected]="selected() === e.edge.id"
+                [attr.data-edge]="e.edge.id"
+                tabindex="0"
+                role="button"
+                [attr.aria-label]="e.label"
+                [attr.aria-describedby]="readonly() ? null : uid + '-edge-hint'"
+                (pointerdown)="onEdgePointerDown($event, e.edge)"
+                (dblclick)="startEdit(e.edge.id, 'edge')"
+                (keydown)="onEdgeKeydown($event, e.edge)"
+                (focus)="selected.set(e.edge.id)"
+              >
+                <path class="cb-flow__edge-hit" [attr.d]="e.d" />
+                <path class="cb-flow__edge-line" [attr.d]="e.d" />
+                <polygon class="cb-flow__edge-arrow" [attr.points]="e.arrow" />
+              </g>
+            }
+            @if (tempLine(); as line) {
+              <path class="cb-flow__edge-line cb-flow__edge-line--temp" [attr.d]="line" />
+            }
+          </svg>
+          @for (e of edgeViews(); track e.edge.id) {
+            @if (e.edge.label) {
+              <span
+                class="cb-flow__edge-label"
+                [class.cb-is-selected]="selected() === e.edge.id"
+                aria-hidden="true"
+                [style.left.px]="e.mid[0]"
+                [style.top.px]="e.mid[1]"
+                (pointerdown)="onEdgePointerDown($event, e.edge)"
+                (dblclick)="startEdit(e.edge.id, 'edge')"
+                >{{ e.edge.label }}</span
+              >
+            }
+          }
+          @if (editorBox(); as box) {
+            <input
+              #editor
+              class="cb-flow__editor"
+              [attr.aria-label]="box.label"
+              [style.left.px]="box.x"
+              [style.top.px]="box.y"
+              [style.width.px]="box.w"
+              (keydown)="onEditorKeydown($event)"
+              (blur)="commitEdit()"
+              (pointerdown)="$event.stopPropagation()"
+            />
+          }
+        </div>
+      </div>
+    } @else {
+      <ol class="cb-flow__list" [attr.aria-label]="t().flowList">
+        @if (!flow().nodes.length) {
+          <li class="cb-flow__empty cb-flow__empty--list">{{ t().flowEmpty }}</li>
+        }
+        @for (n of ordered(); track n.id) {
+          <li class="cb-flow__item" [class.cb-flow__item--issue]="issuesByNode().has(n.id)">
+            <div class="cb-flow__item-head">
+              <span class="cb-flow__type" [class]="'cb-flow__type cb-flow__type--' + n.type">{{ typeLabel(n.type) }}</span>
+              @if (readonly()) {
+                <strong class="cb-flow__item-name">{{ n.label }}</strong>
+              } @else {
+                <input
+                  class="cb-flow__field cb-flow__item-name"
+                  [attr.data-name]="n.id"
+                  [value]="n.label"
+                  [attr.aria-label]="format(t().flowNameOf, typeLabel(n.type))"
+                  (change)="rename(n.id, $any($event.target).value)"
+                />
+                <button type="button" class="cb-flow__icon" [attr.aria-label]="format(t().flowDeleteNode, n.label)" (click)="removeNode(n.id)">
+                  <cb-icon name="trash" [size]="16" aria-hidden="true" />
+                </button>
+              }
+            </div>
+            @for (issue of issuesByNode().get(n.id) ?? []; track $index) {
+              <p class="cb-flow__item-issue">{{ issueText(issue) }}</p>
+            }
+            <ul class="cb-flow__exits" [attr.aria-label]="format(t().flowExitsOf, n.label)">
+              @for (e of outgoing().get(n.id) ?? []; track e.id) {
+                <li class="cb-flow__exit">
+                  <span aria-hidden="true">→</span>
+                  <span class="cb-flow__exit-target">{{ nameOf(e.to) }}</span>
+                  @if (readonly()) {
+                    @if (e.label) {
+                      <span class="cb-flow__exit-label">{{ e.label }}</span>
+                    }
+                  } @else {
+                    <input
+                      class="cb-flow__field cb-flow__field--sm"
+                      [value]="e.label ?? ''"
+                      [placeholder]="t().flowEdgeLabel"
+                      [attr.aria-label]="format(t().flowEdgeLabelOf, n.label, nameOf(e.to))"
+                      (change)="relabel(e.id, $any($event.target).value)"
+                    />
+                    <button type="button" class="cb-flow__icon" [attr.aria-label]="format(t().flowRemoveConnection, nameOf(e.to))" (click)="removeEdge(e.id)">
+                      <cb-icon name="x" [size]="16" aria-hidden="true" />
+                    </button>
+                  }
+                </li>
+              } @empty {
+                <li class="cb-flow__exit cb-flow__exit--none">{{ t().flowNoExits }}</li>
+              }
+            </ul>
+            @if (!readonly() && n.type !== 'end' && targetsFor(n).length) {
+              <div class="cb-flow__connect-row">
+                <select #target class="cb-flow__field" [attr.aria-label]="format(t().flowConnectTo, n.label)">
+                  <option value="">{{ t().flowChooseTarget }}</option>
+                  @for (o of targetsFor(n); track o.id) {
+                    <option [value]="o.id">{{ typeLabel(o.type) }}: {{ o.label }}</option>
+                  }
+                </select>
+                <button type="button" class="cb-flow__btn" (click)="connectFromList(n.id, target)">{{ t().flowAddConnection }}</button>
+              </div>
+            }
+          </li>
+        }
+      </ol>
+    }
+
+    @if (showValidation() && flow().nodes.length) {
+      @if (issues().length) {
+        <details class="cb-flow__issues" open>
+          <summary>{{ format(t().flowIssues, issues().length) }}</summary>
+          <ul class="cb-flow__issues-list">
+            @for (issue of issues(); track $index) {
+              <li [class.cb-flow__issue--warning]="issue.severity === 'warning'">
+                @if (issue.nodeId) {
+                  <button type="button" class="cb-flow__issue-link" (click)="reveal(issue.nodeId)">{{ issueText(issue) }}</button>
+                } @else {
+                  {{ issueText(issue) }}
+                }
+              </li>
+            }
+          </ul>
+        </details>
+      } @else {
+        <p class="cb-flow__valid">
+          <cb-icon name="check" [size]="16" aria-hidden="true" />{{ t().flowNoIssues }}
+        </p>
+      }
+    }
+
+    <span class="cb-flow__sr" [id]="uid + '-node-hint'">{{ t().flowNodeHint }}</span>
+    <span class="cb-flow__sr" [id]="uid + '-ro-hint'">{{ t().flowReadonlyHint }}</span>
+    <span class="cb-flow__sr" [id]="uid + '-edge-hint'">{{ t().flowEdgeHint }}</span>
+    <span class="cb-flow__sr" aria-live="polite">{{ announcement() }}</span>
+  `, isInline: true, styles: [":host{--_start: var(--cb-color-success-600);--_decision: var(--cb-color-warning-600);--_end: var(--cb-color-text-strong);--_line: var(--cb-color-text-muted);display:flex;flex-direction:column;box-sizing:border-box;width:100%;overflow:hidden;border:var(--cb-border-width, 1px) solid var(--cb-color-border);border-radius:var(--cb-radius-lg);background:var(--cb-color-surface);color:var(--cb-color-text);font-family:var(--cb-font-sans);font-size:var(--cb-text-sm)}.cb-flow__bar{display:flex;flex-wrap:wrap;align-items:center;gap:var(--cb-space-2) var(--cb-space-3);padding:var(--cb-space-2) var(--cb-space-3);border-bottom:var(--cb-border-width, 1px) solid var(--cb-color-border)}.cb-flow__group{display:inline-flex;flex-wrap:wrap;align-items:center;gap:var(--cb-space-1)}.cb-flow__spacer{flex:1}.cb-flow__btn{display:inline-flex;align-items:center;gap:.375rem;height:2.25rem;padding:0 var(--cb-space-3);border:var(--cb-border-width, 1px) solid var(--cb-color-border);border-radius:var(--cb-radius-md);background:var(--cb-color-surface);color:var(--cb-color-text);font:inherit;white-space:nowrap;cursor:pointer}.cb-flow__icon{display:inline-flex;align-items:center;justify-content:center;width:2.25rem;height:2.25rem;padding:0;border:0;border-radius:var(--cb-radius-md);background:transparent;color:var(--cb-color-text);cursor:pointer}.cb-flow__btn:hover:not(:disabled),.cb-flow__icon:hover:not(:disabled){background:var(--cb-color-surface-hover)}.cb-flow__btn[aria-pressed=true]{border-color:var(--cb-color-primary-500);background:color-mix(in srgb,var(--cb-color-primary-500) 14%,transparent);color:var(--cb-color-primary-700)}:host-context([data-theme=\"dark\"]) .cb-flow__btn[aria-pressed=true]{color:var(--cb-color-primary-300)}.cb-flow__btn:disabled,.cb-flow__icon:disabled{opacity:var(--cb-opacity-disabled, .5);cursor:default}.cb-flow__swatch{width:.75rem;height:.75rem;border:2px solid var(--cb-color-border-strong);border-radius:3px;background:var(--cb-color-surface-raised, var(--cb-color-surface))}.cb-flow__swatch--start,.cb-flow__swatch--end{border-radius:var(--cb-radius-full)}.cb-flow__swatch--start{border-color:var(--_start)}.cb-flow__swatch--end{border-color:var(--_end);border-width:3px}.cb-flow__swatch--decision{border-color:var(--_decision);transform:rotate(45deg) scale(.85)}.cb-flow__percent{min-width:3.25rem;color:var(--cb-color-text-muted);font-size:var(--cb-text-xs);text-align:center;font-variant-numeric:tabular-nums}.cb-flow__views{display:inline-flex;gap:2px;padding:2px;border-radius:var(--cb-radius-md);background:var(--cb-color-surface-hover)}.cb-flow__view{padding:.3rem .75rem;border:0;border-radius:calc(var(--cb-radius-md) - 2px);background:transparent;color:var(--cb-color-text-muted);font:inherit;font-size:var(--cb-text-xs);font-weight:var(--cb-font-weight-medium);cursor:pointer}.cb-flow__view[aria-pressed=true]{background:var(--cb-color-surface-raised, var(--cb-color-surface));color:var(--cb-color-text-strong);box-shadow:0 1px 2px #0f172a1f}.cb-flow__btn:focus-visible,.cb-flow__icon:focus-visible,.cb-flow__view:focus-visible,.cb-flow__field:focus-visible,.cb-flow__issue-link:focus-visible,.cb-flow__node:focus-visible{outline:2px solid var(--cb-color-focus-ring);outline-offset:2px}.cb-flow__viewport{position:relative;height:var(--cb-flow-height, 32rem);overflow:hidden;background-color:var(--cb-color-surface-subtle);background-image:radial-gradient(circle,color-mix(in srgb,var(--cb-color-border-strong) 70%,transparent) 1px,transparent 1.5px);cursor:grab;touch-action:none;outline:none}.cb-flow__viewport--panning{cursor:grabbing}.cb-flow__viewport--connect,.cb-flow__viewport--connect .cb-flow__node{cursor:crosshair}.cb-flow__empty{position:absolute;inset:0;display:grid;place-items:center;margin:0;padding:var(--cb-space-6);color:var(--cb-color-text-muted);text-align:center;pointer-events:none}.cb-flow__world{position:absolute;top:0;left:0;transform-origin:0 0}.cb-flow__node{position:absolute;z-index:2;display:flex;align-items:center;justify-content:center;box-sizing:border-box;padding:0 var(--cb-space-3);border-radius:var(--cb-radius-md);color:var(--cb-color-text-strong);cursor:move;-webkit-user-select:none;user-select:none;touch-action:none}.cb-flow__shape{position:absolute;inset:0;width:100%;height:100%;overflow:visible}.cb-flow__shape :is(rect,polygon){fill:var(--cb-color-surface-raised, var(--cb-color-surface));stroke:var(--cb-color-border-strong);stroke-width:1.5}.cb-flow__node--start .cb-flow__shape rect{fill:color-mix(in srgb,var(--_start) 14%,var(--cb-color-surface));stroke:var(--_start);stroke-width:2}.cb-flow__node--end .cb-flow__shape rect{fill:color-mix(in srgb,var(--_end) 8%,var(--cb-color-surface));stroke:var(--_end);stroke-width:3}.cb-flow__node--decision .cb-flow__shape polygon{fill:color-mix(in srgb,var(--_decision) 14%,var(--cb-color-surface));stroke:var(--_decision);stroke-width:2}.cb-flow__node--decision{padding:0 36px}.cb-flow__node.cb-is-selected .cb-flow__shape :is(rect,polygon){stroke:var(--cb-color-primary-500);stroke-width:3}.cb-flow__node.cb-is-source .cb-flow__shape :is(rect,polygon){stroke:var(--cb-color-primary-500);stroke-dasharray:6 4;stroke-width:3}.cb-flow__label{position:relative;min-width:0;max-width:100%;display:-webkit-box;overflow:hidden;-webkit-box-orient:vertical;-webkit-line-clamp:2;font-size:.8125rem;font-weight:var(--cb-font-weight-medium);line-height:1.25;text-align:center;overflow-wrap:anywhere}.cb-flow__badge{position:absolute;top:-.5rem;right:-.25rem;display:grid;place-items:center;width:1.125rem;height:1.125rem;border:2px solid var(--cb-color-surface);border-radius:var(--cb-radius-full);background:var(--cb-color-danger-600);color:#fff;font-size:.6875rem;font-weight:var(--cb-font-weight-bold);line-height:1}.cb-flow__node--decision .cb-flow__badge{right:28px}.cb-flow__handle{position:absolute;left:50%;bottom:0;width:.875rem;height:.875rem;border:2px solid var(--cb-color-surface);border-radius:var(--cb-radius-full);background:var(--cb-color-primary-500);transform:translate(-50%,50%);cursor:crosshair;opacity:0;transition:opacity var(--cb-duration-fast, .12s) var(--cb-ease, ease)}.cb-flow__node:hover .cb-flow__handle,.cb-flow__node:focus-visible .cb-flow__handle,.cb-flow__node.cb-is-selected .cb-flow__handle{opacity:1}@media(hover:none){.cb-flow__handle{opacity:1;width:1.25rem;height:1.25rem}}.cb-flow__edges{position:absolute;z-index:1;overflow:visible;pointer-events:none}.cb-flow__edge{outline:none;cursor:pointer}.cb-flow__edge-hit{fill:none;stroke:transparent;stroke-width:14;pointer-events:stroke}.cb-flow__edge-line{fill:none;stroke:var(--_line);stroke-width:1.75}.cb-flow__edge-arrow{fill:var(--_line)}.cb-flow__edge:hover :is(.cb-flow__edge-line){stroke:var(--cb-color-text)}.cb-flow__edge:hover .cb-flow__edge-arrow{fill:var(--cb-color-text)}.cb-flow__edge.cb-is-selected .cb-flow__edge-line,.cb-flow__edge:focus-visible .cb-flow__edge-line{stroke:var(--cb-color-primary-500);stroke-width:3}.cb-flow__edge.cb-is-selected .cb-flow__edge-arrow,.cb-flow__edge:focus-visible .cb-flow__edge-arrow{fill:var(--cb-color-primary-500)}.cb-flow__edge:focus-visible .cb-flow__edge-hit{stroke:color-mix(in srgb,var(--cb-color-focus-ring) 35%,transparent);stroke-width:10}.cb-flow__edge-line--temp{stroke:var(--cb-color-primary-500);stroke-dasharray:6 4;stroke-width:2}.cb-flow__edge-label{position:absolute;z-index:3;padding:.125rem .5rem;border:var(--cb-border-width, 1px) solid var(--cb-color-border);border-radius:var(--cb-radius-full);background:var(--cb-color-surface);color:var(--cb-color-text);font-size:var(--cb-text-xs);font-weight:var(--cb-font-weight-medium);white-space:nowrap;transform:translate(-50%,-50%);cursor:pointer;-webkit-user-select:none;user-select:none}.cb-flow__edge-label.cb-is-selected{border-color:var(--cb-color-primary-500);color:var(--cb-color-primary-700)}:host-context([data-theme=\"dark\"]) .cb-flow__edge-label.cb-is-selected{color:var(--cb-color-primary-300)}.cb-flow__editor{position:absolute;z-index:5;box-sizing:border-box;height:30px;padding:0 var(--cb-space-2);border:2px solid var(--cb-color-primary-500);border-radius:var(--cb-radius-sm);background:var(--cb-color-surface);color:var(--cb-color-text);font:inherit;font-size:.8125rem;text-align:center;outline:none;box-shadow:var(--cb-shadow-md)}.cb-flow__list{display:flex;flex-direction:column;gap:var(--cb-space-2);max-height:var(--cb-flow-height, 32rem);margin:0;padding:var(--cb-space-3);overflow-y:auto;list-style:none;background:var(--cb-color-surface-subtle)}.cb-flow__empty--list{position:static;padding:var(--cb-space-4)}.cb-flow__item{display:flex;flex-direction:column;gap:var(--cb-space-2);padding:var(--cb-space-3);border:var(--cb-border-width, 1px) solid var(--cb-color-border);border-radius:var(--cb-radius-md);background:var(--cb-color-surface)}.cb-flow__item--issue{border-left:3px solid var(--cb-color-danger-500)}.cb-flow__item-head{display:flex;flex-wrap:wrap;align-items:center;gap:var(--cb-space-2)}.cb-flow__item-name{flex:1;min-width:10rem}.cb-flow__type{flex:none;padding:.125rem .5rem;border-radius:var(--cb-radius-full);background:var(--cb-color-surface-hover);color:var(--cb-color-text);font-size:var(--cb-text-xs);font-weight:var(--cb-font-weight-semibold)}.cb-flow__type--start{background:color-mix(in srgb,var(--_start) 16%,transparent)}.cb-flow__type--decision{background:color-mix(in srgb,var(--_decision) 18%,transparent)}.cb-flow__type--end{background:color-mix(in srgb,var(--_end) 12%,transparent)}.cb-flow__field{box-sizing:border-box;height:2.25rem;padding:0 var(--cb-space-2);border:var(--cb-border-width, 1px) solid var(--cb-color-border-strong);border-radius:var(--cb-radius-md);background:var(--cb-color-surface);color:var(--cb-color-text);font:inherit}.cb-flow__field--sm{height:2rem;width:9rem}.cb-flow__item-issue{margin:0;color:var(--cb-color-danger-700);font-size:var(--cb-text-xs)}:host-context([data-theme=\"dark\"]) .cb-flow__item-issue{color:var(--cb-color-danger-300)}.cb-flow__exits{display:flex;flex-direction:column;gap:var(--cb-space-1);margin:0;padding:0 0 0 var(--cb-space-4);list-style:none}.cb-flow__exit{display:flex;flex-wrap:wrap;align-items:center;gap:var(--cb-space-2)}.cb-flow__exit-target{font-weight:var(--cb-font-weight-medium)}.cb-flow__exit-label,.cb-flow__exit--none{color:var(--cb-color-text-muted)}.cb-flow__connect-row{display:flex;flex-wrap:wrap;gap:var(--cb-space-2);padding-left:var(--cb-space-4)}.cb-flow__issues,.cb-flow__valid{margin:0;padding:var(--cb-space-2) var(--cb-space-3);border-top:var(--cb-border-width, 1px) solid var(--cb-color-border)}.cb-flow__issues summary{color:var(--cb-color-danger-700);font-weight:var(--cb-font-weight-semibold);cursor:pointer}:host-context([data-theme=\"dark\"]) .cb-flow__issues summary{color:var(--cb-color-danger-300)}.cb-flow__issues-list{margin:var(--cb-space-2) 0 0;padding-left:var(--cb-space-5)}.cb-flow__issue--warning{color:var(--cb-color-text-muted)}.cb-flow__issue-link{padding:0;border:0;background:none;color:inherit;font:inherit;text-align:left;text-decoration:underline;text-underline-offset:2px;cursor:pointer}.cb-flow__valid{display:flex;align-items:center;gap:var(--cb-space-2);color:var(--cb-color-success-700)}:host-context([data-theme=\"dark\"]) .cb-flow__valid{color:var(--cb-color-success-300)}.cb-flow__sr{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}@media(forced-colors:active){.cb-flow__shape :is(rect,polygon){stroke:CanvasText}.cb-flow__node.cb-is-selected .cb-flow__shape :is(rect,polygon),.cb-flow__edge.cb-is-selected .cb-flow__edge-line{stroke:Highlight}.cb-flow__edge-line{stroke:CanvasText}.cb-flow__edge-arrow{fill:CanvasText}}\n"], dependencies: [{ kind: "component", type: CbIcon, selector: "cb-icon", inputs: ["name", "size", "spin", "ariaLabel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: CbFlowEditor, decorators: [{
+            type: Component,
+            args: [{ selector: 'cb-flow-editor', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.Emulated, imports: [CbIcon], host: {
+                        class: 'cb-flow',
+                        role: 'group',
+                        '[attr.aria-label]': 'ariaLabel() || t().flowEditor',
+                        '(keydown)': 'onHostKeydown($event)',
+                    }, template: `
+    <div class="cb-flow__bar">
+      @if (!readonly()) {
+        <div class="cb-flow__group" role="group" [attr.aria-label]="t().flowAdd">
+          @for (type of types; track type) {
+            <button type="button" class="cb-flow__btn" (click)="addNode(type)">
+              <span class="cb-flow__swatch" [class]="'cb-flow__swatch cb-flow__swatch--' + type" aria-hidden="true"></span>
+              {{ typeLabel(type) }}
+            </button>
+          }
+        </div>
+        <div class="cb-flow__group">
+          <button
+            type="button"
+            class="cb-flow__btn"
+            [attr.aria-pressed]="!!connectFrom()"
+            [disabled]="!selectedNode() || selectedNode()!.type === 'end'"
+            (click)="toggleConnect()"
+          >
+            <cb-icon name="spline" [size]="16" aria-hidden="true" />{{ t().flowConnect }}
+          </button>
+          <button type="button" class="cb-flow__btn" [disabled]="!selected() || !selectedExists()" (click)="deleteSelected()">
+            <cb-icon name="trash" [size]="16" aria-hidden="true" />{{ t().flowDelete }}
+          </button>
+          <button type="button" class="cb-flow__btn" [disabled]="!flow().nodes.length" (click)="layout()">
+            <cb-icon name="workflow" [size]="16" aria-hidden="true" />{{ t().flowLayout }}
+          </button>
+        </div>
+      }
+      @if (view() === 'diagram') {
+        <div class="cb-flow__group" role="group" [attr.aria-label]="t().flowZoom">
+          <button type="button" class="cb-flow__icon" [attr.aria-label]="t().flowZoomOut" [disabled]="zoom() <= minZoom" (click)="zoomBy(1 / step)">
+            <cb-icon name="zoom-out" [size]="18" aria-hidden="true" />
+          </button>
+          <span class="cb-flow__percent" aria-hidden="true">{{ percent() }}</span>
+          <button type="button" class="cb-flow__icon" [attr.aria-label]="t().flowZoomIn" [disabled]="zoom() >= maxZoom" (click)="zoomBy(step)">
+            <cb-icon name="zoom-in" [size]="18" aria-hidden="true" />
+          </button>
+          <button type="button" class="cb-flow__icon" [attr.aria-label]="t().flowFit" [attr.title]="t().flowFit" [disabled]="!flow().nodes.length" (click)="fit()">
+            <cb-icon name="scan" [size]="18" aria-hidden="true" />
+          </button>
+        </div>
+      }
+      <span class="cb-flow__spacer"></span>
+      <div class="cb-flow__views" role="group" [attr.aria-label]="t().flowView">
+        <button type="button" class="cb-flow__view" [attr.aria-pressed]="view() === 'diagram'" (click)="view.set('diagram')">{{ t().flowDiagram }}</button>
+        <button type="button" class="cb-flow__view" [attr.aria-pressed]="view() === 'list'" (click)="view.set('list')">{{ t().flowList }}</button>
+      </div>
+    </div>
+
+    @if (view() === 'diagram') {
+      <div
+        #viewport
+        class="cb-flow__viewport"
+        tabindex="-1"
+        [class.cb-flow__viewport--connect]="!!connectFrom()"
+        [class.cb-flow__viewport--panning]="panning()"
+        [style.background-size]="gridBackground().size"
+        [style.background-position]="gridBackground().position"
+        (pointerdown)="onBackgroundPointerDown($event)"
+        (wheel)="onWheel($event)"
+      >
+        @if (!flow().nodes.length) {
+          <p class="cb-flow__empty">{{ t().flowEmpty }}</p>
+        }
+        <div class="cb-flow__world" [style.transform]="worldTransform()">
+          @for (n of nodes(); track n.id) {
+            <div
+              class="cb-flow__node"
+              [class]="'cb-flow__node cb-flow__node--' + n.type"
+              [class.cb-is-selected]="selected() === n.id"
+              [class.cb-is-source]="connectFrom() === n.id"
+              [class.cb-flow__node--issue]="issuesByNode().has(n.id)"
+              [attr.data-node]="n.id"
+              tabindex="0"
+              role="button"
+              [attr.aria-label]="nodeLabel(n)"
+              [attr.aria-describedby]="uid + (readonly() ? '-ro-hint' : '-node-hint')"
+              [style.left.px]="n.x"
+              [style.top.px]="n.y"
+              [style.width.px]="sizes[n.type].w"
+              [style.height.px]="sizes[n.type].h"
+              (pointerdown)="onNodePointerDown($event, n)"
+              (dblclick)="onNodeDblClick(n)"
+              (keydown)="onNodeKeydown($event, n)"
+              (focus)="selected.set(n.id)"
+            >
+              <svg class="cb-flow__shape" [attr.viewBox]="'0 0 ' + sizes[n.type].w + ' ' + sizes[n.type].h" aria-hidden="true">
+                @switch (n.type) {
+                  @case ('decision') {
+                    <polygon [attr.points]="diamond(n.type)" />
+                  }
+                  @case ('task') {
+                    <rect x="1" y="1" rx="8" [attr.width]="sizes[n.type].w - 2" [attr.height]="sizes[n.type].h - 2" />
+                  }
+                  @default {
+                    <rect x="1" y="1" [attr.rx]="(sizes[n.type].h - 2) / 2" [attr.width]="sizes[n.type].w - 2" [attr.height]="sizes[n.type].h - 2" />
+                  }
+                }
+              </svg>
+              <span class="cb-flow__label">{{ n.label }}</span>
+              @if (issuesByNode().has(n.id)) {
+                <span class="cb-flow__badge" aria-hidden="true">!</span>
+              }
+              @if (!readonly() && n.type !== 'end') {
+                <span class="cb-flow__handle" aria-hidden="true" (pointerdown)="onHandlePointerDown($event, n)"></span>
+              }
+            </div>
+          }
+          <svg
+            class="cb-flow__edges"
+            [attr.viewBox]="svgBox().x + ' ' + svgBox().y + ' ' + svgBox().w + ' ' + svgBox().h"
+            [style.left.px]="svgBox().x"
+            [style.top.px]="svgBox().y"
+            [style.width.px]="svgBox().w"
+            [style.height.px]="svgBox().h"
+          >
+            @for (e of edgeViews(); track e.edge.id) {
+              <g
+                class="cb-flow__edge"
+                [class.cb-is-selected]="selected() === e.edge.id"
+                [attr.data-edge]="e.edge.id"
+                tabindex="0"
+                role="button"
+                [attr.aria-label]="e.label"
+                [attr.aria-describedby]="readonly() ? null : uid + '-edge-hint'"
+                (pointerdown)="onEdgePointerDown($event, e.edge)"
+                (dblclick)="startEdit(e.edge.id, 'edge')"
+                (keydown)="onEdgeKeydown($event, e.edge)"
+                (focus)="selected.set(e.edge.id)"
+              >
+                <path class="cb-flow__edge-hit" [attr.d]="e.d" />
+                <path class="cb-flow__edge-line" [attr.d]="e.d" />
+                <polygon class="cb-flow__edge-arrow" [attr.points]="e.arrow" />
+              </g>
+            }
+            @if (tempLine(); as line) {
+              <path class="cb-flow__edge-line cb-flow__edge-line--temp" [attr.d]="line" />
+            }
+          </svg>
+          @for (e of edgeViews(); track e.edge.id) {
+            @if (e.edge.label) {
+              <span
+                class="cb-flow__edge-label"
+                [class.cb-is-selected]="selected() === e.edge.id"
+                aria-hidden="true"
+                [style.left.px]="e.mid[0]"
+                [style.top.px]="e.mid[1]"
+                (pointerdown)="onEdgePointerDown($event, e.edge)"
+                (dblclick)="startEdit(e.edge.id, 'edge')"
+                >{{ e.edge.label }}</span
+              >
+            }
+          }
+          @if (editorBox(); as box) {
+            <input
+              #editor
+              class="cb-flow__editor"
+              [attr.aria-label]="box.label"
+              [style.left.px]="box.x"
+              [style.top.px]="box.y"
+              [style.width.px]="box.w"
+              (keydown)="onEditorKeydown($event)"
+              (blur)="commitEdit()"
+              (pointerdown)="$event.stopPropagation()"
+            />
+          }
+        </div>
+      </div>
+    } @else {
+      <ol class="cb-flow__list" [attr.aria-label]="t().flowList">
+        @if (!flow().nodes.length) {
+          <li class="cb-flow__empty cb-flow__empty--list">{{ t().flowEmpty }}</li>
+        }
+        @for (n of ordered(); track n.id) {
+          <li class="cb-flow__item" [class.cb-flow__item--issue]="issuesByNode().has(n.id)">
+            <div class="cb-flow__item-head">
+              <span class="cb-flow__type" [class]="'cb-flow__type cb-flow__type--' + n.type">{{ typeLabel(n.type) }}</span>
+              @if (readonly()) {
+                <strong class="cb-flow__item-name">{{ n.label }}</strong>
+              } @else {
+                <input
+                  class="cb-flow__field cb-flow__item-name"
+                  [attr.data-name]="n.id"
+                  [value]="n.label"
+                  [attr.aria-label]="format(t().flowNameOf, typeLabel(n.type))"
+                  (change)="rename(n.id, $any($event.target).value)"
+                />
+                <button type="button" class="cb-flow__icon" [attr.aria-label]="format(t().flowDeleteNode, n.label)" (click)="removeNode(n.id)">
+                  <cb-icon name="trash" [size]="16" aria-hidden="true" />
+                </button>
+              }
+            </div>
+            @for (issue of issuesByNode().get(n.id) ?? []; track $index) {
+              <p class="cb-flow__item-issue">{{ issueText(issue) }}</p>
+            }
+            <ul class="cb-flow__exits" [attr.aria-label]="format(t().flowExitsOf, n.label)">
+              @for (e of outgoing().get(n.id) ?? []; track e.id) {
+                <li class="cb-flow__exit">
+                  <span aria-hidden="true">→</span>
+                  <span class="cb-flow__exit-target">{{ nameOf(e.to) }}</span>
+                  @if (readonly()) {
+                    @if (e.label) {
+                      <span class="cb-flow__exit-label">{{ e.label }}</span>
+                    }
+                  } @else {
+                    <input
+                      class="cb-flow__field cb-flow__field--sm"
+                      [value]="e.label ?? ''"
+                      [placeholder]="t().flowEdgeLabel"
+                      [attr.aria-label]="format(t().flowEdgeLabelOf, n.label, nameOf(e.to))"
+                      (change)="relabel(e.id, $any($event.target).value)"
+                    />
+                    <button type="button" class="cb-flow__icon" [attr.aria-label]="format(t().flowRemoveConnection, nameOf(e.to))" (click)="removeEdge(e.id)">
+                      <cb-icon name="x" [size]="16" aria-hidden="true" />
+                    </button>
+                  }
+                </li>
+              } @empty {
+                <li class="cb-flow__exit cb-flow__exit--none">{{ t().flowNoExits }}</li>
+              }
+            </ul>
+            @if (!readonly() && n.type !== 'end' && targetsFor(n).length) {
+              <div class="cb-flow__connect-row">
+                <select #target class="cb-flow__field" [attr.aria-label]="format(t().flowConnectTo, n.label)">
+                  <option value="">{{ t().flowChooseTarget }}</option>
+                  @for (o of targetsFor(n); track o.id) {
+                    <option [value]="o.id">{{ typeLabel(o.type) }}: {{ o.label }}</option>
+                  }
+                </select>
+                <button type="button" class="cb-flow__btn" (click)="connectFromList(n.id, target)">{{ t().flowAddConnection }}</button>
+              </div>
+            }
+          </li>
+        }
+      </ol>
+    }
+
+    @if (showValidation() && flow().nodes.length) {
+      @if (issues().length) {
+        <details class="cb-flow__issues" open>
+          <summary>{{ format(t().flowIssues, issues().length) }}</summary>
+          <ul class="cb-flow__issues-list">
+            @for (issue of issues(); track $index) {
+              <li [class.cb-flow__issue--warning]="issue.severity === 'warning'">
+                @if (issue.nodeId) {
+                  <button type="button" class="cb-flow__issue-link" (click)="reveal(issue.nodeId)">{{ issueText(issue) }}</button>
+                } @else {
+                  {{ issueText(issue) }}
+                }
+              </li>
+            }
+          </ul>
+        </details>
+      } @else {
+        <p class="cb-flow__valid">
+          <cb-icon name="check" [size]="16" aria-hidden="true" />{{ t().flowNoIssues }}
+        </p>
+      }
+    }
+
+    <span class="cb-flow__sr" [id]="uid + '-node-hint'">{{ t().flowNodeHint }}</span>
+    <span class="cb-flow__sr" [id]="uid + '-ro-hint'">{{ t().flowReadonlyHint }}</span>
+    <span class="cb-flow__sr" [id]="uid + '-edge-hint'">{{ t().flowEdgeHint }}</span>
+    <span class="cb-flow__sr" aria-live="polite">{{ announcement() }}</span>
+  `, styles: [":host{--_start: var(--cb-color-success-600);--_decision: var(--cb-color-warning-600);--_end: var(--cb-color-text-strong);--_line: var(--cb-color-text-muted);display:flex;flex-direction:column;box-sizing:border-box;width:100%;overflow:hidden;border:var(--cb-border-width, 1px) solid var(--cb-color-border);border-radius:var(--cb-radius-lg);background:var(--cb-color-surface);color:var(--cb-color-text);font-family:var(--cb-font-sans);font-size:var(--cb-text-sm)}.cb-flow__bar{display:flex;flex-wrap:wrap;align-items:center;gap:var(--cb-space-2) var(--cb-space-3);padding:var(--cb-space-2) var(--cb-space-3);border-bottom:var(--cb-border-width, 1px) solid var(--cb-color-border)}.cb-flow__group{display:inline-flex;flex-wrap:wrap;align-items:center;gap:var(--cb-space-1)}.cb-flow__spacer{flex:1}.cb-flow__btn{display:inline-flex;align-items:center;gap:.375rem;height:2.25rem;padding:0 var(--cb-space-3);border:var(--cb-border-width, 1px) solid var(--cb-color-border);border-radius:var(--cb-radius-md);background:var(--cb-color-surface);color:var(--cb-color-text);font:inherit;white-space:nowrap;cursor:pointer}.cb-flow__icon{display:inline-flex;align-items:center;justify-content:center;width:2.25rem;height:2.25rem;padding:0;border:0;border-radius:var(--cb-radius-md);background:transparent;color:var(--cb-color-text);cursor:pointer}.cb-flow__btn:hover:not(:disabled),.cb-flow__icon:hover:not(:disabled){background:var(--cb-color-surface-hover)}.cb-flow__btn[aria-pressed=true]{border-color:var(--cb-color-primary-500);background:color-mix(in srgb,var(--cb-color-primary-500) 14%,transparent);color:var(--cb-color-primary-700)}:host-context([data-theme=\"dark\"]) .cb-flow__btn[aria-pressed=true]{color:var(--cb-color-primary-300)}.cb-flow__btn:disabled,.cb-flow__icon:disabled{opacity:var(--cb-opacity-disabled, .5);cursor:default}.cb-flow__swatch{width:.75rem;height:.75rem;border:2px solid var(--cb-color-border-strong);border-radius:3px;background:var(--cb-color-surface-raised, var(--cb-color-surface))}.cb-flow__swatch--start,.cb-flow__swatch--end{border-radius:var(--cb-radius-full)}.cb-flow__swatch--start{border-color:var(--_start)}.cb-flow__swatch--end{border-color:var(--_end);border-width:3px}.cb-flow__swatch--decision{border-color:var(--_decision);transform:rotate(45deg) scale(.85)}.cb-flow__percent{min-width:3.25rem;color:var(--cb-color-text-muted);font-size:var(--cb-text-xs);text-align:center;font-variant-numeric:tabular-nums}.cb-flow__views{display:inline-flex;gap:2px;padding:2px;border-radius:var(--cb-radius-md);background:var(--cb-color-surface-hover)}.cb-flow__view{padding:.3rem .75rem;border:0;border-radius:calc(var(--cb-radius-md) - 2px);background:transparent;color:var(--cb-color-text-muted);font:inherit;font-size:var(--cb-text-xs);font-weight:var(--cb-font-weight-medium);cursor:pointer}.cb-flow__view[aria-pressed=true]{background:var(--cb-color-surface-raised, var(--cb-color-surface));color:var(--cb-color-text-strong);box-shadow:0 1px 2px #0f172a1f}.cb-flow__btn:focus-visible,.cb-flow__icon:focus-visible,.cb-flow__view:focus-visible,.cb-flow__field:focus-visible,.cb-flow__issue-link:focus-visible,.cb-flow__node:focus-visible{outline:2px solid var(--cb-color-focus-ring);outline-offset:2px}.cb-flow__viewport{position:relative;height:var(--cb-flow-height, 32rem);overflow:hidden;background-color:var(--cb-color-surface-subtle);background-image:radial-gradient(circle,color-mix(in srgb,var(--cb-color-border-strong) 70%,transparent) 1px,transparent 1.5px);cursor:grab;touch-action:none;outline:none}.cb-flow__viewport--panning{cursor:grabbing}.cb-flow__viewport--connect,.cb-flow__viewport--connect .cb-flow__node{cursor:crosshair}.cb-flow__empty{position:absolute;inset:0;display:grid;place-items:center;margin:0;padding:var(--cb-space-6);color:var(--cb-color-text-muted);text-align:center;pointer-events:none}.cb-flow__world{position:absolute;top:0;left:0;transform-origin:0 0}.cb-flow__node{position:absolute;z-index:2;display:flex;align-items:center;justify-content:center;box-sizing:border-box;padding:0 var(--cb-space-3);border-radius:var(--cb-radius-md);color:var(--cb-color-text-strong);cursor:move;-webkit-user-select:none;user-select:none;touch-action:none}.cb-flow__shape{position:absolute;inset:0;width:100%;height:100%;overflow:visible}.cb-flow__shape :is(rect,polygon){fill:var(--cb-color-surface-raised, var(--cb-color-surface));stroke:var(--cb-color-border-strong);stroke-width:1.5}.cb-flow__node--start .cb-flow__shape rect{fill:color-mix(in srgb,var(--_start) 14%,var(--cb-color-surface));stroke:var(--_start);stroke-width:2}.cb-flow__node--end .cb-flow__shape rect{fill:color-mix(in srgb,var(--_end) 8%,var(--cb-color-surface));stroke:var(--_end);stroke-width:3}.cb-flow__node--decision .cb-flow__shape polygon{fill:color-mix(in srgb,var(--_decision) 14%,var(--cb-color-surface));stroke:var(--_decision);stroke-width:2}.cb-flow__node--decision{padding:0 36px}.cb-flow__node.cb-is-selected .cb-flow__shape :is(rect,polygon){stroke:var(--cb-color-primary-500);stroke-width:3}.cb-flow__node.cb-is-source .cb-flow__shape :is(rect,polygon){stroke:var(--cb-color-primary-500);stroke-dasharray:6 4;stroke-width:3}.cb-flow__label{position:relative;min-width:0;max-width:100%;display:-webkit-box;overflow:hidden;-webkit-box-orient:vertical;-webkit-line-clamp:2;font-size:.8125rem;font-weight:var(--cb-font-weight-medium);line-height:1.25;text-align:center;overflow-wrap:anywhere}.cb-flow__badge{position:absolute;top:-.5rem;right:-.25rem;display:grid;place-items:center;width:1.125rem;height:1.125rem;border:2px solid var(--cb-color-surface);border-radius:var(--cb-radius-full);background:var(--cb-color-danger-600);color:#fff;font-size:.6875rem;font-weight:var(--cb-font-weight-bold);line-height:1}.cb-flow__node--decision .cb-flow__badge{right:28px}.cb-flow__handle{position:absolute;left:50%;bottom:0;width:.875rem;height:.875rem;border:2px solid var(--cb-color-surface);border-radius:var(--cb-radius-full);background:var(--cb-color-primary-500);transform:translate(-50%,50%);cursor:crosshair;opacity:0;transition:opacity var(--cb-duration-fast, .12s) var(--cb-ease, ease)}.cb-flow__node:hover .cb-flow__handle,.cb-flow__node:focus-visible .cb-flow__handle,.cb-flow__node.cb-is-selected .cb-flow__handle{opacity:1}@media(hover:none){.cb-flow__handle{opacity:1;width:1.25rem;height:1.25rem}}.cb-flow__edges{position:absolute;z-index:1;overflow:visible;pointer-events:none}.cb-flow__edge{outline:none;cursor:pointer}.cb-flow__edge-hit{fill:none;stroke:transparent;stroke-width:14;pointer-events:stroke}.cb-flow__edge-line{fill:none;stroke:var(--_line);stroke-width:1.75}.cb-flow__edge-arrow{fill:var(--_line)}.cb-flow__edge:hover :is(.cb-flow__edge-line){stroke:var(--cb-color-text)}.cb-flow__edge:hover .cb-flow__edge-arrow{fill:var(--cb-color-text)}.cb-flow__edge.cb-is-selected .cb-flow__edge-line,.cb-flow__edge:focus-visible .cb-flow__edge-line{stroke:var(--cb-color-primary-500);stroke-width:3}.cb-flow__edge.cb-is-selected .cb-flow__edge-arrow,.cb-flow__edge:focus-visible .cb-flow__edge-arrow{fill:var(--cb-color-primary-500)}.cb-flow__edge:focus-visible .cb-flow__edge-hit{stroke:color-mix(in srgb,var(--cb-color-focus-ring) 35%,transparent);stroke-width:10}.cb-flow__edge-line--temp{stroke:var(--cb-color-primary-500);stroke-dasharray:6 4;stroke-width:2}.cb-flow__edge-label{position:absolute;z-index:3;padding:.125rem .5rem;border:var(--cb-border-width, 1px) solid var(--cb-color-border);border-radius:var(--cb-radius-full);background:var(--cb-color-surface);color:var(--cb-color-text);font-size:var(--cb-text-xs);font-weight:var(--cb-font-weight-medium);white-space:nowrap;transform:translate(-50%,-50%);cursor:pointer;-webkit-user-select:none;user-select:none}.cb-flow__edge-label.cb-is-selected{border-color:var(--cb-color-primary-500);color:var(--cb-color-primary-700)}:host-context([data-theme=\"dark\"]) .cb-flow__edge-label.cb-is-selected{color:var(--cb-color-primary-300)}.cb-flow__editor{position:absolute;z-index:5;box-sizing:border-box;height:30px;padding:0 var(--cb-space-2);border:2px solid var(--cb-color-primary-500);border-radius:var(--cb-radius-sm);background:var(--cb-color-surface);color:var(--cb-color-text);font:inherit;font-size:.8125rem;text-align:center;outline:none;box-shadow:var(--cb-shadow-md)}.cb-flow__list{display:flex;flex-direction:column;gap:var(--cb-space-2);max-height:var(--cb-flow-height, 32rem);margin:0;padding:var(--cb-space-3);overflow-y:auto;list-style:none;background:var(--cb-color-surface-subtle)}.cb-flow__empty--list{position:static;padding:var(--cb-space-4)}.cb-flow__item{display:flex;flex-direction:column;gap:var(--cb-space-2);padding:var(--cb-space-3);border:var(--cb-border-width, 1px) solid var(--cb-color-border);border-radius:var(--cb-radius-md);background:var(--cb-color-surface)}.cb-flow__item--issue{border-left:3px solid var(--cb-color-danger-500)}.cb-flow__item-head{display:flex;flex-wrap:wrap;align-items:center;gap:var(--cb-space-2)}.cb-flow__item-name{flex:1;min-width:10rem}.cb-flow__type{flex:none;padding:.125rem .5rem;border-radius:var(--cb-radius-full);background:var(--cb-color-surface-hover);color:var(--cb-color-text);font-size:var(--cb-text-xs);font-weight:var(--cb-font-weight-semibold)}.cb-flow__type--start{background:color-mix(in srgb,var(--_start) 16%,transparent)}.cb-flow__type--decision{background:color-mix(in srgb,var(--_decision) 18%,transparent)}.cb-flow__type--end{background:color-mix(in srgb,var(--_end) 12%,transparent)}.cb-flow__field{box-sizing:border-box;height:2.25rem;padding:0 var(--cb-space-2);border:var(--cb-border-width, 1px) solid var(--cb-color-border-strong);border-radius:var(--cb-radius-md);background:var(--cb-color-surface);color:var(--cb-color-text);font:inherit}.cb-flow__field--sm{height:2rem;width:9rem}.cb-flow__item-issue{margin:0;color:var(--cb-color-danger-700);font-size:var(--cb-text-xs)}:host-context([data-theme=\"dark\"]) .cb-flow__item-issue{color:var(--cb-color-danger-300)}.cb-flow__exits{display:flex;flex-direction:column;gap:var(--cb-space-1);margin:0;padding:0 0 0 var(--cb-space-4);list-style:none}.cb-flow__exit{display:flex;flex-wrap:wrap;align-items:center;gap:var(--cb-space-2)}.cb-flow__exit-target{font-weight:var(--cb-font-weight-medium)}.cb-flow__exit-label,.cb-flow__exit--none{color:var(--cb-color-text-muted)}.cb-flow__connect-row{display:flex;flex-wrap:wrap;gap:var(--cb-space-2);padding-left:var(--cb-space-4)}.cb-flow__issues,.cb-flow__valid{margin:0;padding:var(--cb-space-2) var(--cb-space-3);border-top:var(--cb-border-width, 1px) solid var(--cb-color-border)}.cb-flow__issues summary{color:var(--cb-color-danger-700);font-weight:var(--cb-font-weight-semibold);cursor:pointer}:host-context([data-theme=\"dark\"]) .cb-flow__issues summary{color:var(--cb-color-danger-300)}.cb-flow__issues-list{margin:var(--cb-space-2) 0 0;padding-left:var(--cb-space-5)}.cb-flow__issue--warning{color:var(--cb-color-text-muted)}.cb-flow__issue-link{padding:0;border:0;background:none;color:inherit;font:inherit;text-align:left;text-decoration:underline;text-underline-offset:2px;cursor:pointer}.cb-flow__valid{display:flex;align-items:center;gap:var(--cb-space-2);color:var(--cb-color-success-700)}:host-context([data-theme=\"dark\"]) .cb-flow__valid{color:var(--cb-color-success-300)}.cb-flow__sr{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}@media(forced-colors:active){.cb-flow__shape :is(rect,polygon){stroke:CanvasText}.cb-flow__node.cb-is-selected .cb-flow__shape :is(rect,polygon),.cb-flow__edge.cb-is-selected .cb-flow__edge-line{stroke:Highlight}.cb-flow__edge-line{stroke:CanvasText}.cb-flow__edge-arrow{fill:CanvasText}}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { flow: [{ type: i0.Input, args: [{ isSignal: true, alias: "flow", required: false }] }, { type: i0.Output, args: ["flowChange"] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], gridSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "gridSize", required: false }] }], zoom: [{ type: i0.Input, args: [{ isSignal: true, alias: "zoom", required: false }] }, { type: i0.Output, args: ["zoomChange"] }], view: [{ type: i0.Input, args: [{ isSignal: true, alias: "view", required: false }] }, { type: i0.Output, args: ["viewChange"] }], selected: [{ type: i0.Input, args: [{ isSignal: true, alias: "selected", required: false }] }, { type: i0.Output, args: ["selectedChange"] }], showValidation: [{ type: i0.Input, args: [{ isSignal: true, alias: "showValidation", required: false }] }], fitOnLoad: [{ type: i0.Input, args: [{ isSignal: true, alias: "fitOnLoad", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], nodeOpen: [{ type: i0.Output, args: ["nodeOpen"] }], viewport: [{ type: i0.ViewChild, args: ['viewport', { isSignal: true }] }], editor: [{ type: i0.ViewChild, args: ['editor', { isSignal: true }] }] } });
+function clamp(value, min, max) {
+    return Math.min(max, Math.max(min, value));
+}
+function round2(value) {
+    return Math.round(value * 100) / 100;
+}
+
+/*
+ * Public API Surface de @caribeng/ui/flow
+ */
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { CB_FLOW_NODE_SIZE, CbFlowEditor, cbLayoutFlow, cbValidateFlow };