@rendra-ui/web 2.8.0 → 2.9.0

package/dist/flow.js

@@ -1,51 +1,31 @@
-/*! Rendra Design System v2.8.0 | MIT | © 2026 Bruno Magalhaes | brunomagalhaes.me */
-import { t as cn } from "./cn-BlJHpkDs.js";
-import { i as useMotionLib } from "./motion-context-PJPj6X4g.js";
-import { t as useMotionPresets } from "./use-motion-presets-I4StrsCi.js";
-import { B as ActionBar, F as CardHeader, I as CardTitle, M as CardContent, N as CardDescription, R as Modal, d as Drawer, i as Field, j as Card, n as useFillHeight, p as Input, r as Select, t as Timeline, z as Alert } from "./timeline-xrMHeV92.js";
-import { t as Button } from "./button-CrSlVIsY.js";
-import { n as useBreakpoint } from "./use-breakpoint-CM-yeDHJ.js";
-import { CheckCircle2, Clock, Flag, FlaskConical, GitBranch, ListChecks, Maximize2, Play, SquarePen, Trash2, TriangleAlert, X, Zap, ZoomIn, ZoomOut } from "lucide-react";
-import { useCallback, useEffect, useId, useMemo, useRef, useState } from "react";
+/*! Rendra Design System v2.9.0 | MIT | © 2026 Bruno Magalhaes | brunomagalhaes.me */
+import { t as cn } from "./cn-CpdCvlkP.js";
+import { i as useMotionLib } from "./motion-context-DWFl2xRr.js";
+import { t as useMotionPresets } from "./use-motion-presets-CmMLBQLI.js";
+import { B as Alert, R as InfoHint, V as ActionBar, a as RadioGroup, b as Input, c as Select, g as Drawer, i as Textarea, l as Field, n as toast, o as useFillHeight, r as Timeline, s as Tabs, v as Checkbox, z as Modal } from "./toast-C7qYslCp.js";
+import { t as Button } from "./button-BcCBrlnt.js";
+import { t as EmptyState } from "./empty-state-Bcx4M0Me.js";
+import { n as useBreakpoint } from "./use-breakpoint-BGmY3ir-.js";
+import { CalendarClock, CheckCircle2, Cog, Copy, Flag, FlaskConical, GitBranch, Hourglass, ListChecks, Mail, Maximize2, MessageCircle, Play, Plus, Search, Send, SquarePen, Trash2, TriangleAlert, UserPlus, Webhook, X, Zap, ZoomIn, ZoomOut } from "lucide-react";
+import { createContext, useCallback, useContext, useEffect, useId, useMemo, useRef, useState } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
-import { ConnectionLineType, Handle, MarkerType, Position, ReactFlow, ReactFlowProvider, applyEdgeChanges, applyNodeChanges, useReactFlow, useStore } from "@xyflow/react";
+import { BaseEdge, ConnectionLineType, EdgeLabelRenderer, Handle, MarkerType, Position, ReactFlow, ReactFlowProvider, applyEdgeChanges, applyNodeChanges, getBezierPath, getNodesBounds, useReactFlow, useStore, useUpdateNodeInternals } from "@xyflow/react";
 import "@xyflow/react/dist/base.css";
-//#region src/lib/flow.ts
-var FLOW_NODE_TYPES = [
-	"gatilho",
-	"acao",
-	"condicao",
-	"espera",
-	"fim"
-];
+//#region src/lib/flow-blocks.ts
+/** Altura mínima de uma linha de saída da condição em px (alvo de toque, `min-h-touch`). */
+var ROW_H = 44;
 var FLOW_WAIT_UNITS = [
 	"segundos",
 	"minutos",
 	"horas",
 	"dias"
 ];
-/** Nome do tipo de bloco, como aparece na interface. */
-var FLOW_TYPE_NAME = {
-	gatilho: "Gatilho",
-	acao: "Ação",
-	condicao: "Condição",
-	espera: "Espera",
-	fim: "Fim"
-};
-var BRANCH_NAME = {
-	sim: "Sim",
-	nao: "Não"
-};
 var WAIT_SINGULAR = {
 	segundos: "segundo",
 	minutos: "minuto",
 	horas: "hora",
 	dias: "dia"
 };
-var DEFAULT_WAIT = {
-	duration: 5,
-	unit: "minutos"
-};
 var isUnit = (v) => typeof v === "string" && FLOW_WAIT_UNITS.includes(v);
 /** A duração do bloco de espera ("5 minutos"), ou `null` se o config não a define. */
 function formatWait(config) {
@@ -59,23 +39,689 @@ function describeWait(config) {
 	const wait = formatWait(config);
 	return wait ? `Aguardaria ${wait}` : "Aguardaria o tempo definido no bloco";
 }
+var none = () => ({});
+var FLOW_BLOCKS = {
+	"webhook-entrada": {
+		type: "webhook-entrada",
+		group: "gatilhos",
+		name: "Receber webhook",
+		description: "Inicia o fluxo quando outro sistema envia dados.",
+		hint: "dados de outro sistema, endereço e mapeamento de campos",
+		defaultConfig: () => ({
+			method: "POST",
+			path: "/hooks/novo-evento",
+			responseCode: 200,
+			received: false,
+			mapping: []
+		}),
+		required: [{
+			key: "path",
+			label: "Endereço"
+		}]
+	},
+	agendamento: {
+		type: "agendamento",
+		group: "gatilhos",
+		name: "Agendamento",
+		description: "Inicia o fluxo em dia e horário definidos.",
+		hint: "diário, semanal ou mensal, em um horário",
+		defaultConfig: () => ({
+			frequency: "diario",
+			time: "09:00"
+		}),
+		required: [{
+			key: "time",
+			label: "Horário"
+		}]
+	},
+	"registro-criado": {
+		type: "registro-criado",
+		group: "gatilhos",
+		name: "Registro criado",
+		description: "Inicia o fluxo quando um registro novo é criado.",
+		hint: "cliente, pedido ou negócio criado",
+		defaultConfig: () => ({ record: "cliente" }),
+		required: []
+	},
+	whatsapp: {
+		type: "whatsapp",
+		group: "mensagens",
+		name: "Enviar WhatsApp",
+		description: "Envia uma mensagem de WhatsApp.",
+		hint: "mensagem de texto para um telefone",
+		defaultConfig: () => ({
+			to: "",
+			message: ""
+		}),
+		required: [{
+			key: "to",
+			label: "Para"
+		}, {
+			key: "message",
+			label: "Mensagem"
+		}]
+	},
+	email: {
+		type: "email",
+		group: "mensagens",
+		name: "Enviar e-mail",
+		description: "Envia um e-mail.",
+		hint: "mensagem com assunto para um endereço",
+		defaultConfig: () => ({
+			to: "",
+			subject: "",
+			message: ""
+		}),
+		required: [
+			{
+				key: "to",
+				label: "Para"
+			},
+			{
+				key: "subject",
+				label: "Assunto"
+			},
+			{
+				key: "message",
+				label: "Mensagem"
+			}
+		]
+	},
+	condicao: {
+		type: "condicao",
+		group: "condicionais",
+		name: "Condição",
+		description: "Escolhe o caminho pelas regras.",
+		hint: "regras com campo, operador e valor, e a saída Senão",
+		defaultConfig: () => ({ rules: [{
+			id: "r1",
+			field: "",
+			operator: "igual",
+			value: ""
+		}] }),
+		required: []
+	},
+	espera: {
+		type: "espera",
+		group: "condicionais",
+		name: "Esperar",
+		description: "Aguarda um tempo antes de seguir.",
+		hint: "pausa por segundos, minutos, horas ou dias",
+		defaultConfig: () => ({
+			duration: 5,
+			unit: "minutos"
+		}),
+		required: []
+	},
+	"webhook-saida": {
+		type: "webhook-saida",
+		group: "integracoes",
+		name: "Enviar webhook",
+		description: "Envia dados para outro sistema.",
+		hint: "requisição com corpo montado das variáveis",
+		defaultConfig: () => ({
+			method: "POST",
+			url: "",
+			headers: [],
+			body: []
+		}),
+		required: [{
+			key: "url",
+			label: "Endereço"
+		}]
+	},
+	tarefa: {
+		type: "tarefa",
+		group: "acoes",
+		name: "Criar tarefa",
+		description: "Cria uma tarefa para uma pessoa.",
+		hint: "título, responsável e prazo em dias",
+		defaultConfig: () => ({
+			title: "",
+			assignee: "",
+			dueDays: 1
+		}),
+		required: [{
+			key: "title",
+			label: "Título"
+		}]
+	},
+	gatilho: {
+		type: "gatilho",
+		group: "gatilhos",
+		name: "Gatilho personalizado",
+		description: "Gatilho sem configuração.",
+		hint: "",
+		defaultConfig: none,
+		required: [],
+		hidden: true
+	},
+	acao: {
+		type: "acao",
+		group: "acoes",
+		name: "Ação personalizada",
+		description: "Ação sem configuração.",
+		hint: "",
+		defaultConfig: none,
+		required: [],
+		hidden: true
+	},
+	fim: {
+		type: "fim",
+		group: "acoes",
+		name: "Fim",
+		description: "Encerra o caminho.",
+		hint: "",
+		defaultConfig: none,
+		required: [],
+		hidden: true
+	}
+};
+var FLOW_BLOCK_GROUPS = [
+	{
+		id: "gatilhos",
+		name: "Gatilhos",
+		types: [
+			"webhook-entrada",
+			"agendamento",
+			"registro-criado"
+		]
+	},
+	{
+		id: "mensagens",
+		name: "Mensagens",
+		types: ["whatsapp", "email"]
+	},
+	{
+		id: "condicionais",
+		name: "Condicionais",
+		types: ["condicao", "espera"]
+	},
+	{
+		id: "integracoes",
+		name: "Integrações",
+		types: ["webhook-saida"]
+	},
+	{
+		id: "acoes",
+		name: "Ações internas",
+		types: ["tarefa"]
+	}
+];
+/** Nome do tipo de bloco, como aparece na interface. */
+var FLOW_TYPE_NAME = Object.fromEntries(Object.keys(FLOW_BLOCKS).map((t) => [t, FLOW_BLOCKS[t].name]));
+/** Gatilho é todo bloco do grupo Gatilhos (inclui o legado `gatilho`). */
+var isTrigger = (type) => FLOW_BLOCKS[type].group === "gatilhos";
+var FLOW_SYSTEM_FIELDS = [
+	{
+		value: "cliente.nome",
+		label: "Cliente › Nome"
+	},
+	{
+		value: "cliente.email",
+		label: "Cliente › E-mail"
+	},
+	{
+		value: "cliente.telefone",
+		label: "Cliente › Telefone"
+	},
+	{
+		value: "cliente.plano",
+		label: "Cliente › Plano"
+	},
+	{
+		value: "negocio.valor",
+		label: "Negócio › Valor"
+	},
+	{
+		value: "pedido.id",
+		label: "Pedido › Número"
+	}
+];
+/** O JSON de exemplo que "chega" no Receber webhook (simulado). */
+var FLOW_SAMPLE_PAYLOAD = {
+	cliente: {
+		nome: "Ana Souza",
+		email: "ana@exemplo.com",
+		telefone: "+55 11 98888-0000",
+		plano: "pro"
+	},
+	pedido: {
+		id: "PED-1042",
+		valor: 1250,
+		criado_em: "2026-10-24"
+	}
+};
+/** Achata o JSON em caminhos (`cliente.nome`) e valores em texto, na ordem de leitura. */
+function flattenPayload(payload, prefix = "") {
+	if (payload && typeof payload === "object" && !Array.isArray(payload)) return Object.entries(payload).flatMap(([k, v]) => flattenPayload(v, prefix ? `${prefix}.${k}` : k));
+	return [{
+		path: prefix,
+		value: String(payload)
+	}];
+}
+var SAMPLE_VALUES = {
+	...Object.fromEntries(flattenPayload(FLOW_SAMPLE_PAYLOAD).map((e) => [e.path, e.value])),
+	"negocio.titulo": "Proposta Plano Pro",
+	"negocio.valor": "1250",
+	"agendamento.data": "24/10/2026"
+};
+var RECORD_VARIABLES = {
+	cliente: [
+		"cliente.nome",
+		"cliente.email",
+		"cliente.telefone"
+	],
+	pedido: [
+		"pedido.id",
+		"pedido.valor",
+		"cliente.nome"
+	],
+	negocio: [
+		"negocio.titulo",
+		"negocio.valor",
+		"cliente.nome"
+	]
+};
+var VARIABLE_LABEL = {
+	...Object.fromEntries(FLOW_SYSTEM_FIELDS.map((f) => [f.value, f.label])),
+	"pedido.valor": "Pedido › Valor",
+	"negocio.titulo": "Negócio › Título",
+	"agendamento.data": "Agendamento › Data"
+};
+var asList = (v) => Array.isArray(v) ? v.filter((x) => !!x && typeof x === "object") : [];
+/** Variáveis que os blocos podem usar: as do gatilho do fluxo (sem escopo por caminho). */
+function flowVariables(flow) {
+	const trigger = flow.nodes.find((n) => isTrigger(n.type));
+	if (!trigger) return [];
+	const cfg = trigger.data.config;
+	if (trigger.type === "webhook-entrada") return asList(cfg?.mapping).filter((m) => typeof m.from === "string" && typeof m.to === "string" && m.to !== "").map((m) => ({
+		id: m.from,
+		label: VARIABLE_LABEL[m.to] ?? m.to
+	}));
+	if (trigger.type === "registro-criado") return (RECORD_VARIABLES[String(cfg?.record)] ?? RECORD_VARIABLES.cliente).map((id) => ({
+		id,
+		label: VARIABLE_LABEL[id] ?? id
+	}));
+	if (trigger.type === "agendamento") return [{
+		id: "agendamento.data",
+		label: VARIABLE_LABEL["agendamento.data"]
+	}];
+	return [];
+}
+/** Valores de exemplo de cada variável do fluxo (usados no teste e na simulação). */
+function flowSampleData(flow) {
+	return Object.fromEntries(flowVariables(flow).map((v) => [v.id, SAMPLE_VALUES[v.id] ?? ""]));
+}
+var VARIABLE = /\{\{\s*([\w.]+)\s*\}\}/g;
+/** Parte o texto em trechos e variáveis `{{x}}` (as variáveis viram chips no card). */
+function splitVariables(text) {
+	const parts = [];
+	let last = 0;
+	for (const m of text.matchAll(VARIABLE)) {
+		if (m.index > last) parts.push({
+			kind: "text",
+			value: text.slice(last, m.index)
+		});
+		parts.push({
+			kind: "var",
+			value: m[1]
+		});
+		last = m.index + m[0].length;
+	}
+	if (last < text.length) parts.push({
+		kind: "text",
+		value: text.slice(last)
+	});
+	return parts;
+}
+/** Troca cada `{{x}}` pelo valor de exemplo; variável sem valor fica como está. */
+function renderTemplate(text, data) {
+	return text.replace(VARIABLE, (whole, id) => data[id] ?? whole);
+}
+var FLOW_RULE_OPERATORS = [
+	{
+		value: "igual",
+		label: "é igual a",
+		symbol: "="
+	},
+	{
+		value: "diferente",
+		label: "é diferente de",
+		symbol: "≠"
+	},
+	{
+		value: "maior",
+		label: "é maior que",
+		symbol: ">"
+	},
+	{
+		value: "menor",
+		label: "é menor que",
+		symbol: "<"
+	},
+	{
+		value: "contem",
+		label: "contém",
+		symbol: "contém"
+	},
+	{
+		value: "vazio",
+		label: "está vazio",
+		symbol: "vazio"
+	},
+	{
+		value: "nao-vazio",
+		label: "não está vazio",
+		symbol: "preenchido"
+	}
+];
+/** Operadores que dispensam o valor. */
+var operatorHasValue = (op) => op !== "vazio" && op !== "nao-vazio";
+var operatorOf = (op) => FLOW_RULE_OPERATORS.find((o) => o.value === op);
+var isRuleComplete = (rule) => rule.field.trim() !== "" && !!operatorOf(rule.operator) && (!operatorHasValue(rule.operator) || rule.value.trim() !== "");
+/** "pedido.valor é maior que 500". */
+function ruleSummary(rule) {
+	if (!isRuleComplete(rule)) return "Regra incompleta";
+	const op = operatorOf(rule.operator).label;
+	return operatorHasValue(rule.operator) ? `${rule.field} ${op} ${rule.value}` : `${rule.field} ${op}`;
+}
+/** As regras do bloco condição (lista vazia se o config não as traz). */
+function rulesOf(node) {
+	return asList(node.data.config?.rules).map((r) => ({
+		id: String(r.id ?? ""),
+		...typeof r.label === "string" ? { label: r.label } : {},
+		field: String(r.field ?? ""),
+		operator: operatorOf(r.operator) ? r.operator : "igual",
+		value: String(r.value ?? "")
+	}));
+}
+/** Nome da saída: o rótulo da regra (ou "Regra N") e "Senão". */
+function branchName(node, branch) {
+	if (branch === "senao") return "Senão";
+	const rules = rulesOf(node);
+	const i = rules.findIndex((r) => r.id === branch);
+	return i < 0 ? branch : rules[i].label || `Regra ${i + 1}`;
+}
+/** Menor `rN` livre para uma regra nova. */
+function nextRuleId(rules) {
+	const taken = new Set(rules.map((r) => r.id));
+	let n = 1;
+	while (taken.has(`r${n}`)) n++;
+	return `r${n}`;
+}
+/** Texto curto na ligação que sai de uma condição ("> 500", "= pro", "Senão"). */
+function edgeLabel(flow, edge) {
+	const from = flow.nodes.find((n) => n.id === edge.source);
+	if (!from || from.type !== "condicao" || !edge.branch) return null;
+	if (edge.branch === "senao") return "Senão";
+	const rule = rulesOf(from).find((r) => r.id === edge.branch);
+	if (!rule) return null;
+	if (!isRuleComplete(rule)) return branchName(from, edge.branch);
+	const symbol = operatorOf(rule.operator).symbol;
+	return operatorHasValue(rule.operator) ? `${symbol} ${rule.value}` : symbol;
+}
+/** Saídas de um bloco: as regras e "Senão" na condição; uma só nos demais. */
+function outputIds(node) {
+	return node.type === "condicao" ? [...rulesOf(node).map((r) => r.id), "senao"] : [void 0];
+}
+var FREQUENCY$1 = {
+	diario: "Diário",
+	semanal: "Semanal",
+	mensal: "Mensal"
+};
+var RECORD_LABEL = {
+	cliente: "Cliente",
+	pedido: "Pedido",
+	negocio: "Negócio"
+};
+/** O texto, ou vazio quando o valor não é texto. */
+var str = (v) => typeof v === "string" ? v : "";
+/** Linhas "rótulo e valor" do resumo no card (variáveis `{{x}}` viram chips). */
+function summarizeConfig(node) {
+	const c = node.data.config;
+	switch (node.type) {
+		case "webhook-entrada": {
+			const mapped = asList(c?.mapping).filter((m) => str(m.to) !== "").map((m) => `{{${str(m.from)}}}`).join(" ");
+			return [{
+				label: "Método e endereço",
+				value: `${str(c?.method) || "POST"} ${str(c?.path)}`.trim()
+			}, {
+				label: "Campos mapeados",
+				value: mapped
+			}];
+		}
+		case "agendamento": return [{
+			label: "Frequência",
+			value: FREQUENCY$1[str(c?.frequency)] ?? ""
+		}, {
+			label: "Horário",
+			value: str(c?.time)
+		}];
+		case "registro-criado": return [{
+			label: "Registro",
+			value: RECORD_LABEL[str(c?.record)] ?? ""
+		}];
+		case "whatsapp": return [{
+			label: "Para",
+			value: str(c?.to)
+		}, {
+			label: "Mensagem",
+			value: str(c?.message)
+		}];
+		case "email": return [
+			{
+				label: "Para",
+				value: str(c?.to)
+			},
+			{
+				label: "Assunto",
+				value: str(c?.subject)
+			},
+			{
+				label: "Mensagem",
+				value: str(c?.message)
+			}
+		];
+		case "espera": return [{
+			label: "Tempo",
+			value: formatWait(c) ?? ""
+		}];
+		case "webhook-saida": return [{
+			label: "Método e endereço",
+			value: `${str(c?.method) || "POST"} ${str(c?.url)}`.trim()
+		}, {
+			label: "Corpo",
+			value: asList(c?.body).map((b) => str(b.value)).filter(Boolean).join(" ")
+		}];
+		case "tarefa": {
+			const days = typeof c?.dueDays === "number" ? c.dueDays : 0;
+			return [
+				{
+					label: "Título",
+					value: str(c?.title)
+				},
+				{
+					label: "Responsável",
+					value: str(c?.assignee)
+				},
+				{
+					label: "Prazo",
+					value: `${days} ${days === 1 ? "dia" : "dias"}`
+				}
+			];
+		}
+		default: return [];
+	}
+}
+/** Requisição simulada do Enviar webhook, com os valores de exemplo no corpo. */
+function buildWebhookRequest(config, data) {
+	const body = {};
+	for (const b of asList(config?.body)) if (str(b.key) !== "") body[str(b.key)] = renderTemplate(str(b.value), data);
+	return {
+		method: str(config?.method) || "POST",
+		url: str(config?.url),
+		body
+	};
+}
+/** Linhas que o valor do resumo ocupa no card (chips largos quebram em mais de uma). */
+function valueLines(value) {
+	let width = 0;
+	for (const part of splitVariables(value)) width += part.kind === "var" ? (part.value.length + 4) * 6.6 + 20 : part.value.length * 6.4;
+	return Math.max(1, Math.ceil(width / 290));
+}
+/**
+* Altura estimada do card em px (medida no navegador e arredondada para cima), usada enquanto o
+* React Flow ainda não mediu o bloco: na arrumação automática e ao procurar espaço livre.
+*/
+function estimateNodeHeight(node) {
+	if (node.type === "condicao") return 88 + ROW_H * (rulesOf(node).length + 1);
+	const rows = summarizeConfig(node);
+	let h = 86;
+	if (rows.length > 0) h += 25 + rows.reduce((sum, r) => sum + 20 + 24 * valueLines(r.value), 0) + 8 * (rows.length - 1);
+	if (node.type === "webhook-entrada" && node.data.config?.received === true) h += 44;
+	return h;
+}
+//#endregion
+//#region src/lib/flow-layout.ts
+/** Camada de cada bloco (maior distância do início sem passar pelas ligações que fecham ciclo). */
+function layoutFlow(flow) {
+	const byId = new Map(flow.nodes.map((n) => [n.id, n]));
+	const edges = flow.edges.filter((e) => byId.has(e.source) && byId.has(e.target));
+	const out = /* @__PURE__ */ new Map();
+	for (const n of flow.nodes) {
+		const mine = edges.filter((e) => e.source === n.id);
+		const order = outputIds(n);
+		mine.sort((a, b) => order.indexOf(a.branch) - order.indexOf(b.branch));
+		out.set(n.id, mine);
+	}
+	const hasIncoming = new Set(edges.map((e) => e.target));
+	let roots = flow.nodes.filter((n) => isTrigger(n.type)).map((n) => n.id);
+	if (roots.length === 0) roots = flow.nodes.filter((n) => !hasIncoming.has(n.id)).map((n) => n.id);
+	if (roots.length === 0 && flow.nodes[0]) roots = [flow.nodes[0].id];
+	const state = /* @__PURE__ */ new Map();
+	const preorder = /* @__PURE__ */ new Map();
+	const post = [];
+	const back = /* @__PURE__ */ new Set();
+	const visit = (id) => {
+		state.set(id, 1);
+		preorder.set(id, preorder.size);
+		for (const e of out.get(id) ?? []) if (state.get(e.target) === 1) back.add(e.id);
+		else if (!state.has(e.target)) visit(e.target);
+		state.set(id, 2);
+		post.push(id);
+	};
+	for (const r of roots) if (!state.has(r)) visit(r);
+	const layer = new Map(roots.map((r) => [r, 0]));
+	for (const id of [...post].reverse()) for (const e of out.get(id) ?? []) if (!back.has(e.id)) layer.set(e.target, Math.max(layer.get(e.target) ?? 0, layer.get(id) + 1));
+	const unreachedLayer = Math.max(-1, ...layer.values()) + 1;
+	const columns = /* @__PURE__ */ new Map();
+	const ordered = [...flow.nodes].sort((a, b) => {
+		const pa = preorder.get(a.id) ?? Infinity;
+		const pb = preorder.get(b.id) ?? Infinity;
+		return pa === pb ? flow.nodes.indexOf(a) - flow.nodes.indexOf(b) : pa - pb;
+	});
+	for (const n of ordered) {
+		const l = layer.get(n.id) ?? unreachedLayer;
+		columns.set(l, [...columns.get(l) ?? [], n.id]);
+	}
+	const position = /* @__PURE__ */ new Map();
+	for (const [l, ids] of columns) {
+		let y = 0;
+		for (const id of ids) {
+			position.set(id, {
+				x: l * 432,
+				y
+			});
+			y += estimateNodeHeight(byId.get(id)) + 32;
+		}
+	}
+	return {
+		...flow,
+		nodes: flow.nodes.map((n) => ({
+			...n,
+			position: position.get(n.id)
+		}))
+	};
+}
+//#endregion
+//#region src/lib/flow.ts
+var V2_TYPES = [
+	"webhook-entrada",
+	"agendamento",
+	"registro-criado",
+	"whatsapp",
+	"email",
+	"condicao",
+	"espera",
+	"webhook-saida",
+	"tarefa",
+	"gatilho",
+	"acao"
+];
+var LEGACY_TYPES = [
+	"gatilho",
+	"acao",
+	"condicao",
+	"espera",
+	"fim"
+];
 /** Nome do bloco para mensagens e rótulos: o rótulo, ou o tipo quando ele está vazio. */
 var nodeName = (n) => n.data.label.trim() || FLOW_TYPE_NAME[n.type];
+function renameEdge(e) {
+	return {
+		id: `${e.source}:senao->${e.target}`,
+		source: e.source,
+		target: e.target,
+		branch: "senao"
+	};
+}
+/**
+* Leva um fluxo da 2.7.0 (sem `version`) ao formato v2: tira os blocos Fim, a condição vira uma
+* regra "Sim" mais "Senão", e os blocos são arrumados da esquerda para a direita. Quem já é v2
+* volta igual.
+*/
+function migrateFlow(flow) {
+	if (flow.version === 2) return flow;
+	const fim = new Set(flow.nodes.filter((n) => n.type === "fim").map((n) => n.id));
+	return layoutFlow({
+		version: 2,
+		nodes: flow.nodes.filter((n) => !fim.has(n.id)).map((n) => n.type === "condicao" && !Array.isArray(n.data.config?.rules) ? {
+			...n,
+			data: {
+				...n.data,
+				config: {
+					...n.data.config,
+					rules: [{
+						id: "sim",
+						label: "Sim",
+						field: "",
+						operator: "igual",
+						value: ""
+					}]
+				}
+			}
+		} : n),
+		edges: flow.edges.filter((e) => !fim.has(e.source) && !fim.has(e.target)).map((e) => e.branch === "nao" ? renameEdge(e) : e)
+	});
+}
 /** Ligações que saem de cada bloco, na ordem do fluxo. */
 function outgoing(flow) {
 	const map = /* @__PURE__ */ new Map();
 	for (const e of flow.edges) map.set(e.source, [...map.get(e.source) ?? [], e]);
 	return map;
 }
+var filled = (v) => typeof v === "string" && v.trim() !== "";
 /** Problemas do fluxo, em ordem estável: a mesma entrada dá sempre a mesma lista. */
-function validateFlow(flow) {
+function validateFlow(input) {
+	const flow = migrateFlow(input);
 	const issues = [];
 	const byId = new Map(flow.nodes.map((n) => [n.id, n]));
 	const out = outgoing(flow);
-	const triggers = flow.nodes.filter((n) => n.type === "gatilho");
+	const triggers = flow.nodes.filter((n) => isTrigger(n.type));
 	if (triggers.length === 0) issues.push({
 		code: "sem-gatilho",
-		message: "O fluxo precisa de um bloco Gatilho para começar."
+		message: "O fluxo precisa de um gatilho para começar."
 	});
 	else if (triggers.length > 1) issues.push({
 		code: "varios-gatilhos",
@@ -93,10 +739,10 @@ function validateFlow(flow) {
 			});
 			continue;
 		}
-		if (from.type === "condicao" ? !e.branch : e.branch) {
+		if (!(from.type === "condicao" ? !!e.branch && (e.branch === "senao" || rulesOf(from).some((r) => r.id === e.branch)) : !e.branch)) {
 			issues.push({
 				code: "ramo-invalido",
-				message: from.type === "condicao" ? `Uma saída da condição "${nodeName(from)}" não diz se é "Sim" ou "Não".` : `A ligação que sai de "${nodeName(from)}" não pode ter "Sim" ou "Não": isso só vale para condição.`,
+				message: from.type === "condicao" ? `Uma saída da condição "${nodeName(from)}" não corresponde a nenhuma regra nem ao "Senão".` : `A ligação que sai de "${nodeName(from)}" não pode ter saída de regra: isso só vale para condição.`,
 				nodeId: from.id,
 				edgeId: e.id
 			});
@@ -107,40 +753,48 @@ function validateFlow(flow) {
 	for (const n of flow.nodes) {
 		const edges = out.get(n.id) ?? [];
 		const name = nodeName(n);
-		if (n.type === "fim") {
-			if (edges.length > 0) issues.push({
-				code: "fim-com-saida",
-				message: `O bloco Fim "${name}" não pode ter saída.`,
-				nodeId: n.id
-			});
-		} else if (n.type === "condicao") {
-			const sim = edges.filter((e) => e.branch === "sim").length;
-			const nao = edges.filter((e) => e.branch === "nao").length;
-			if (sim === 0) issues.push({
-				code: "condicao-sem-sim",
-				message: `A condição "${name}" precisa de uma saída "Sim".`,
+		const cfg = n.data.config;
+		if (n.type === "condicao") {
+			const rules = rulesOf(n);
+			if (rules.length === 0) issues.push({
+				code: "condicao-sem-regra",
+				message: `A condição "${name}" precisa de ao menos uma regra.`,
 				nodeId: n.id
 			});
-			if (nao === 0) issues.push({
-				code: "condicao-sem-nao",
-				message: `A condição "${name}" precisa de uma saída "Não".`,
-				nodeId: n.id
+			rules.forEach((r, i) => {
+				if (!isRuleComplete(r)) issues.push({
+					code: "regra-incompleta",
+					message: `A regra ${i + 1} da condição "${name}" precisa de campo, operador e valor.`,
+					nodeId: n.id
+				});
 			});
-			if (sim > 1 || nao > 1) issues.push({
+			const seen = /* @__PURE__ */ new Set();
+			let repeated = false;
+			for (const e of edges) {
+				if (!e.branch) continue;
+				if (seen.has(e.branch)) repeated = true;
+				seen.add(e.branch);
+			}
+			if (repeated) issues.push({
 				code: "condicao-saida-repetida",
-				message: `A condição "${name}" tem mais de uma saída para o mesmo ramo.`,
+				message: `A condição "${name}" tem mais de uma ligação na mesma saída.`,
 				nodeId: n.id
 			});
-		} else if (edges.length === 0) issues.push({
-			code: "sem-saida",
-			message: `O bloco "${name}" não leva a nenhum próximo bloco.`,
-			nodeId: n.id
-		});
-		else if (edges.length > 1) issues.push({
+		} else if (edges.length > 1) issues.push({
 			code: "varias-saidas",
 			message: `O bloco "${name}" tem mais de uma saída; só a condição pode ter.`,
 			nodeId: n.id
 		});
+		for (const f of FLOW_BLOCKS[n.type].required) if (!filled(cfg?.[f.key])) issues.push({
+			code: "config-obrigatoria-vazia",
+			message: `O bloco "${name}" precisa do campo "${f.label}".`,
+			nodeId: n.id
+		});
+		if (n.type === "espera" && !(typeof cfg?.duration === "number" && cfg.duration > 0)) issues.push({
+			code: "config-obrigatoria-vazia",
+			message: `O bloco "${name}" precisa de uma duração maior que zero.`,
+			nodeId: n.id
+		});
 	}
 	const next = /* @__PURE__ */ new Map();
 	for (const e of sound) next.set(e.source, [...next.get(e.source) ?? [], e.target]);
@@ -183,8 +837,12 @@ var sortKeys = (v) => {
 	if (v && typeof v === "object") return Object.fromEntries(Object.keys(v).sort().map((k) => [k, sortKeys(v[k])]));
 	return v;
 };
-/** JSON do fluxo, com a ordem das chaves fixa: o mesmo fluxo dá sempre o mesmo texto. */
-function serializeFlow(flow) {
+/**
+* JSON do fluxo (sempre no formato v2, com `version` na primeira chave) e a ordem das chaves
+* fixa: o mesmo fluxo dá sempre o mesmo texto. Um fluxo da 2.7.0 é convertido antes.
+*/
+function serializeFlow(input) {
+	const flow = migrateFlow(input);
 	const nodes = flow.nodes.map((n) => ({
 		id: n.id,
 		type: n.type,
@@ -208,12 +866,16 @@ function serializeFlow(flow) {
 		target: e.target
 	});
 	return JSON.stringify({
+		version: 2,
 		nodes,
 		edges
 	}, null, 2);
 }
 var isObject = (v) => typeof v === "object" && v !== null && !Array.isArray(v);
-/** Lê o JSON de um fluxo. Nunca lança; campos que o contrato não conhece são ignorados. */
+/**
+* Lê o JSON de um fluxo. Nunca lança; campos que o contrato não conhece são ignorados. Texto sem
+* `version` é lido pelas regras da 2.7.0 e convertido; `version: 2` segue as regras do formato novo.
+*/
 function parseFlow(text) {
 	let raw;
 	try {
@@ -228,10 +890,16 @@ function parseFlow(text) {
 		ok: false,
 		errors: ["O JSON do fluxo precisa ser um objeto."]
 	};
+	if (raw.version !== void 0 && raw.version !== 2) return {
+		ok: false,
+		errors: ["Versão do formato não suportada (use 2 ou deixe sem versão)."]
+	};
 	if (!Array.isArray(raw.nodes) || !Array.isArray(raw.edges)) return {
 		ok: false,
 		errors: [`O campo "${!Array.isArray(raw.nodes) ? "nodes" : "edges"}" precisa ser uma lista.`]
 	};
+	const v2 = raw.version === 2;
+	const types = v2 ? V2_TYPES : LEGACY_TYPES;
 	const errors = [];
 	const nodes = [];
 	const ids = /* @__PURE__ */ new Set();
@@ -247,7 +915,7 @@ function parseFlow(text) {
 			errors.push(`${at}: o id "${id}" está repetido.`);
 			ok = false;
 		} else ids.add(id);
-		if (!FLOW_NODE_TYPES.includes(type)) {
+		if (!types.includes(type)) {
 			errors.push(`${at}: tipo desconhecido (${String(type)}).`);
 			ok = false;
 		}
@@ -298,9 +966,11 @@ function parseFlow(text) {
 			errors.push(`${at}: o id "${id}" está repetido.`);
 			ok = false;
 		}
-		if (branch !== void 0 && branch !== "sim" && branch !== "nao") {
-			errors.push(`${at}: "branch" só pode ser "sim" ou "nao".`);
-			ok = false;
+		if (branch !== void 0) {
+			if (!(v2 ? typeof branch === "string" && branch !== "" : branch === "sim" || branch === "nao")) {
+				errors.push(v2 ? `${at}: "branch" precisa ser o id de uma regra ou "senao".` : `${at}: "branch" só pode ser "sim" ou "nao".`);
+				ok = false;
+			}
 		}
 		if (ok) {
 			edgeIds.add(id);
@@ -316,310 +986,155 @@ function parseFlow(text) {
 			});
 		}
 	});
-	return errors.length > 0 ? {
+	if (errors.length > 0) return {
 		ok: false,
 		errors
-	} : {
+	};
+	return {
 		ok: true,
-		flow: {
+		flow: migrateFlow(v2 ? {
+			version: 2,
 			nodes,
 			edges
-		}
+		} : {
+			nodes,
+			edges
+		})
 	};
 }
-/** Acrescenta um bloco com id único e determinístico (`tipo-N`). */
-function addNode(flow, type, position, options = {}) {
-	const taken = /* @__PURE__ */ new Set([...flow.nodes.map((n) => n.id), ...options.reservedIds ?? []]);
-	let n = 1;
-	while (taken.has(`${type}-${n}`)) n++;
-	const id = `${type}-${n}`;
-	const node = {
+//#endregion
+//#region src/components/ui/flow-viewer.tsx
+var FlowActionsContext = createContext(null);
+var FLOW_ICON = {
+	"webhook-entrada": Webhook,
+	agendamento: CalendarClock,
+	"registro-criado": UserPlus,
+	whatsapp: MessageCircle,
+	email: Mail,
+	condicao: GitBranch,
+	espera: Hourglass,
+	"webhook-saida": Send,
+	tarefa: ListChecks,
+	gatilho: Zap,
+	acao: Cog,
+	fim: Flag
+};
+var TONE = {
+	gatilhos: "bg-primary-soft text-primary-soft-foreground",
+	mensagens: "bg-success-soft text-success-soft-foreground",
+	condicionais: "bg-warning-soft text-warning-soft-foreground",
+	integracoes: "bg-info-soft text-info-soft-foreground",
+	acoes: "bg-muted text-muted-foreground"
+};
+/** Cor do ícone do bloco, por grupo (também usada na barra de blocos). */
+var flowTone = (type) => TONE[FLOW_BLOCKS[type].group];
+var DIRECTION = {
+	up: "para cima",
+	down: "para baixo",
+	left: "para a esquerda",
+	right: "para a direita"
+};
+/** Os textos que a biblioteca escreve no DOM (leitor de tela), em português. */
+var FLOW_ARIA = {
+	"node.a11yDescription.default": "Pressione Enter para abrir o bloco, Espaço para selecioná-lo e Delete para apagá-lo. Esc cancela.",
+	"node.a11yDescription.keyboardDisabled": "Pressione Enter para abrir o bloco, Espaço para selecioná-lo e Delete para apagá-lo. Esc cancela.",
+	"node.a11yDescription.ariaLiveMessage": ({ direction, x, y }) => `Bloco movido ${DIRECTION[direction] ?? direction}. Nova posição, x: ${x}, y: ${y}`,
+	"edge.a11yDescription.default": "Pressione Espaço para selecionar a ligação e Delete para apagá-la. Esc cancela."
+};
+/** Os blocos do Rendra como nós do React Flow (a biblioteca só vê isto). */
+function toRfNodes(flow, opts = {}) {
+	const byNode = /* @__PURE__ */ new Map();
+	for (const issue of opts.issues ?? []) if (issue.nodeId) byNode.set(issue.nodeId, [...byNode.get(issue.nodeId) ?? [], issue.message]);
+	return flow.nodes.map((n) => ({
+		id: n.id,
+		type: "bloco",
+		position: n.position,
+		ariaLabel: n.data.label,
+		domAttributes: { "aria-roledescription": "bloco" },
+		data: {
+			label: n.data.label,
+			kind: n.type,
+			...n.data.config ? { config: n.data.config } : {},
+			issues: byNode.get(n.id) ?? [],
+			active: opts.activeId === n.id
+		}
+	}));
+}
+/** As ligações do Rendra como arestas do React Flow, com a descrição em português. */
+function toRfEdges(flow) {
+	const nameOf = new Map(flow.nodes.map((n) => [n.id, nodeName(n)]));
+	return flow.edges.map((e) => {
+		const label = edgeLabel(flow, e);
+		const from = nameOf.get(e.source) ?? e.source;
+		const to = nameOf.get(e.target) ?? e.target;
+		return {
+			id: e.id,
+			source: e.source,
+			target: e.target,
+			type: "ligacao",
+			animated: true,
+			...e.branch ? { sourceHandle: e.branch } : {},
+			ariaLabel: `De "${from}" para "${to}"${label ? `, se ${label}` : ""}`,
+			domAttributes: { "aria-roledescription": "ligação" },
+			data: {
+				label,
+				from,
+				to
+			}
+		};
+	});
+}
+function Port({ type, id, isConnectable, position = type === "target" ? Position.Left : Position.Right }) {
+	return /* @__PURE__ */ jsx(Handle, {
 		id,
 		type,
-		position: {
-			x: position.x,
-			y: position.y
-		},
-		data: type === "espera" ? {
-			label: options.label ?? FLOW_TYPE_NAME[type],
-			config: { ...DEFAULT_WAIT }
-		} : { label: options.label ?? FLOW_TYPE_NAME[type] }
-	};
-	return {
-		flow: {
-			...flow,
-			nodes: [...flow.nodes, node]
-		},
-		id
-	};
-}
-/** Apaga o bloco e as ligações que chegam ou saem dele. */
-function removeNode(flow, id) {
-	if (!flow.nodes.some((n) => n.id === id)) return flow;
-	return {
-		nodes: flow.nodes.filter((n) => n.id !== id),
-		edges: flow.edges.filter((e) => e.source !== id && e.target !== id)
-	};
+		position,
+		className: "size-touch",
+		isConnectable,
+		children: /* @__PURE__ */ jsx("span", {
+			"aria-hidden": true,
+			"data-flow-dot": true,
+			className: "pointer-events-none absolute inset-0 m-auto size-3 rounded-full border-2 border-card bg-primary-text"
+		})
+	});
 }
-function removeEdge(flow, id) {
-	return {
-		...flow,
-		edges: flow.edges.filter((e) => e.id !== id)
-	};
-}
-function moveNode(flow, id, position) {
-	return {
-		...flow,
-		nodes: flow.nodes.map((n) => n.id === id ? {
-			...n,
-			position: {
-				x: position.x,
-				y: position.y
-			}
-		} : n)
-	};
-}
-/** Troca o rótulo e/ou o config do bloco (o config informado substitui o anterior). */
-function updateNodeData(flow, id, patch) {
-	return {
-		...flow,
-		nodes: flow.nodes.map((n) => {
-			if (n.id !== id) return n;
-			const label = patch.label ?? n.data.label;
-			const config = patch.config ?? n.data.config;
-			return {
-				...n,
-				data: config ? {
-					label,
-					config
-				} : { label }
-			};
-		})
-	};
-}
-var edgeId = (source, target, branch) => branch ? `${source}:${branch}->${target}` : `${source}->${target}`;
-/**
-* Liga dois blocos. A segunda saída de um bloco comum (ou do mesmo ramo da condição) substitui
-* a primeira. Recusa, com o motivo, o que o fluxo nunca aceita.
-*/
-function connectNodes(flow, source, target, branch) {
-	const from = flow.nodes.find((n) => n.id === source);
-	const to = flow.nodes.find((n) => n.id === target);
-	if (!from || !to) return {
-		ok: false,
-		reason: "Esse bloco não existe mais."
-	};
-	if (source === target) return {
-		ok: false,
-		reason: "Um bloco não pode ligar a ele mesmo."
-	};
-	if (from.type === "fim") return {
-		ok: false,
-		reason: "O bloco Fim termina o fluxo e não tem saída."
-	};
-	if (to.type === "gatilho") return {
-		ok: false,
-		reason: "O gatilho começa o fluxo e não recebe ligação."
-	};
-	if (from.type === "condicao" && !branch) return {
-		ok: false,
-		reason: "Escolha a saída \"Sim\" ou \"Não\" da condição."
-	};
-	if (from.type !== "condicao" && branch) return {
-		ok: false,
-		reason: "\"Sim\" e \"Não\" só existem na condição."
-	};
-	const id = edgeId(source, target, branch);
-	if (flow.edges.some((e) => e.id === id)) return {
-		ok: false,
-		reason: "Essa ligação já existe."
-	};
-	const kept = flow.edges.filter((e) => !(e.source === source && (from.type === "condicao" ? e.branch === branch : true)));
-	const edge = branch ? {
-		id,
-		source,
-		target,
-		branch
-	} : {
-		id,
-		source,
-		target
-	};
-	return {
-		ok: true,
-		flow: {
-			...flow,
-			edges: [...kept, edge]
-		}
-	};
-}
-/**
-* Define (ou, com `target` nulo, tira) o próximo bloco de `id`; na condição, o do ramo dado.
-* Uma ligação recusada devolve o próprio fluxo, sem mudança.
-*/
-function setNext(flow, id, target, branch) {
-	if (target === null) return {
-		...flow,
-		edges: flow.edges.filter((e) => !(e.source === id && (branch ? e.branch === branch : true)))
-	};
-	const r = connectNodes(flow, id, target, branch);
-	return r.ok ? r.flow : flow;
-}
-/** Blocos que `id` pode ter como próximo: nunca ele mesmo nem o gatilho. */
-function nextCandidates(flow, id) {
-	const from = flow.nodes.find((n) => n.id === id);
-	if (!from || from.type === "fim") return [];
-	return flow.nodes.filter((n) => n.id !== id && n.type !== "gatilho");
-}
-function resetSimulation() {
-	return {
-		status: "idle",
-		steps: [],
-		currentId: null,
-		issues: []
-	};
-}
-/** Começa no gatilho. Fluxo inválido não inicia: devolve `error` com os problemas. */
-function startSimulation(flow) {
-	const issues = validateFlow(flow);
-	if (issues.length > 0) return {
-		status: "error",
-		steps: [],
-		currentId: null,
-		issues
-	};
-	return {
-		status: "running",
-		steps: [],
-		currentId: flow.nodes.find((n) => n.type === "gatilho").id,
-		issues: []
-	};
-}
-/**
-* Executa o bloco ativo (um passo) e passa ao próximo. Na condição é preciso escolher o ramo:
-* sem escolha válida nada anda. A espera é instantânea; só o texto diz quanto aguardaria.
-*/
-function advanceSimulation(flow, state, choice) {
-	if (state.status !== "running" && state.status !== "waiting-choice" || !state.currentId) return state;
-	const node = flow.nodes.find((n) => n.id === state.currentId);
-	const edges = node ? flow.edges.filter((e) => e.source === node.id) : [];
-	const fail = () => ({
-		...state,
-		status: "error",
-		currentId: null,
-		issues: [{
-			code: "fluxo-mudou",
-			message: "O fluxo mudou durante o teste. Reinicie para testar de novo."
-		}]
-	});
-	if (!node) return fail();
-	let detail;
-	let target;
-	if (node.type === "condicao") {
-		if (choice !== "sim" && choice !== "nao") return state;
-		target = edges.find((e) => e.branch === choice)?.target;
-		detail = `Escolha: ${BRANCH_NAME[choice]}`;
-		if (!target) return fail();
-	} else if (node.type !== "fim") {
-		target = edges[0]?.target;
-		if (node.type === "espera") detail = describeWait(node.data.config);
-		if (!target) return fail();
-	}
-	const step = {
-		nodeId: node.id,
-		type: node.type,
-		label: nodeName(node),
-		status: "succeeded",
-		...detail ? { detail } : {}
-	};
-	const steps = [...state.steps, step];
-	if (!target) return {
-		status: "finished",
-		steps,
-		currentId: null,
-		issues: []
-	};
-	const next = flow.nodes.find((n) => n.id === target);
-	if (!next) return fail();
-	return {
-		status: next.type === "condicao" ? "waiting-choice" : "running",
-		steps,
-		currentId: target,
-		issues: []
-	};
-}
-//#endregion
-//#region src/components/ui/flow-viewer.tsx
-var FLOW_ICON = {
-	gatilho: Zap,
-	acao: Play,
-	condicao: GitBranch,
-	espera: Clock,
-	fim: Flag
-};
-var TONE = {
-	gatilho: "bg-primary-soft text-primary-soft-foreground",
-	acao: "bg-info-soft text-info-soft-foreground",
-	condicao: "bg-warning-soft text-warning-soft-foreground",
-	espera: "bg-muted text-muted-foreground",
-	fim: "bg-success-soft text-success-soft-foreground"
-};
-var DIRECTION = {
-	up: "para cima",
-	down: "para baixo",
-	left: "para a esquerda",
-	right: "para a direita"
-};
-/** Os textos que a biblioteca escreve no DOM (leitor de tela), em português. */
-var FLOW_ARIA = {
-	"node.a11yDescription.default": "Pressione Enter para abrir o bloco, Espaço para selecioná-lo e Delete para apagá-lo. Esc cancela.",
-	"node.a11yDescription.keyboardDisabled": "Pressione Enter para abrir o bloco, Espaço para selecioná-lo e Delete para apagá-lo. Esc cancela.",
-	"node.a11yDescription.ariaLiveMessage": ({ direction, x, y }) => `Bloco movido ${DIRECTION[direction] ?? direction}. Nova posição, x: ${x}, y: ${y}`,
-	"edge.a11yDescription.default": "Pressione Espaço para selecionar a ligação e Delete para apagá-la. Esc cancela."
-};
-/** Os blocos do Rendra como nós do React Flow (a biblioteca só vê isto). */
-function toRfNodes(flow, opts) {
-	const byNode = /* @__PURE__ */ new Map();
-	for (const issue of opts.issues ?? []) if (issue.nodeId) byNode.set(issue.nodeId, [...byNode.get(issue.nodeId) ?? [], issue.message]);
-	return flow.nodes.map((n) => ({
-		id: n.id,
-		type: "bloco",
-		position: n.position,
-		ariaLabel: n.data.label,
-		domAttributes: { "aria-roledescription": "bloco" },
-		data: {
-			label: n.data.label,
-			kind: n.type,
-			...n.data.config ? { config: n.data.config } : {},
-			issues: byNode.get(n.id) ?? [],
-			active: opts.activeId === n.id,
-			handles: opts.handles,
-			edit: opts.edit
-		}
-	}));
-}
-/** As ligações do Rendra como arestas do React Flow, com a descrição em português. */
-function toRfEdges(flow) {
-	const labelOf = new Map(flow.nodes.map((n) => [n.id, nodeName(n)]));
-	return flow.edges.map((e) => ({
-		id: e.id,
-		source: e.source,
-		target: e.target,
-		...e.branch ? { sourceHandle: e.branch } : {},
-		ariaLabel: `De "${labelOf.get(e.source) ?? e.source}" para "${labelOf.get(e.target) ?? e.target}"${e.branch ? `, se ${e.branch === "sim" ? "sim" : "não"}` : ""}`,
-		domAttributes: { "aria-roledescription": "ligação" }
-	}));
+function Value({ text }) {
+	if (!text) return /* @__PURE__ */ jsx("span", {
+		className: "text-xs text-muted-foreground",
+		children: "Não definido"
+	});
+	return /* @__PURE__ */ jsx("span", {
+		className: "flex flex-wrap items-center gap-1 text-xs break-words",
+		children: splitVariables(text).map((part, i) => part.kind === "var" ? /* @__PURE__ */ jsx("span", {
+			"data-flow-chip": true,
+			className: "rounded-item bg-primary-soft px-2 py-1 text-primary-soft-foreground",
+			children: `{{${part.value}}}`
+		}, i) : /* @__PURE__ */ jsx("span", { children: part.value }, i))
+	});
 }
 function FlowBlock({ id, data, selected, isConnectable }) {
 	const lib = useMotionLib();
 	const presets = useMotionPresets();
+	const actions = useContext(FlowActionsContext);
 	const uid = useId();
 	const Icon = FLOW_ICON[data.kind];
-	const wait = data.kind === "espera" ? formatWait(data.config) : null;
+	const def = FLOW_BLOCKS[data.kind];
+	const shape = {
+		type: data.kind,
+		data: {
+			label: data.label,
+			config: data.config
+		}
+	};
+	const name = nodeName(shape);
+	const summary = summarizeConfig(shape);
+	const rules = data.kind === "condicao" ? rulesOf(shape) : [];
+	const received = data.kind === "webhook-entrada" && data.config?.received === true;
 	const invalid = data.issues.length > 0;
 	const issueId = `${uid}-problema`;
-	const handle = cn("rounded-full border-2 border-card", data.handles === "lg" ? "size-6" : "size-2");
+	const descId = `${uid}-descricao`;
 	const ring = "pointer-events-none absolute -inset-1 rounded-block border-2 border-primary";
+	const action = "nodrag nopan min-h-touch min-w-touch";
 	return /* @__PURE__ */ jsxs("div", {
 		"data-flow-node": true,
 		"data-kind": data.kind,
@@ -627,8 +1142,8 @@ function FlowBlock({ id, data, selected, isConnectable }) {
 		"data-active": data.active ? "true" : void 0,
 		"data-invalid": invalid ? "true" : void 0,
 		"data-selected": selected ? "true" : void 0,
-		"aria-describedby": invalid ? issueId : void 0,
-		className: cn("relative w-flow-node rounded-block border bg-card p-3 text-card-foreground shadow-sm", data.kind === "condicao" && "pr-12 pb-8", invalid && "border-destructive", data.active && "border-primary", selected && "ring-2 ring-primary"),
+		"aria-describedby": invalid ? `${descId} ${issueId}` : descId,
+		className: cn("relative w-flow-node rounded-block border bg-card text-card-foreground shadow-sm", invalid && "border-destructive", data.active && "border-primary", selected && "ring-2 ring-primary"),
 		children: [
 			data.active && (lib ? /* @__PURE__ */ jsx(lib.m.span, {
 				"aria-hidden": true,
@@ -648,17 +1163,15 @@ function FlowBlock({ id, data, selected, isConnectable }) {
 				"aria-hidden": true,
 				className: ring
 			})),
-			data.kind !== "gatilho" && /* @__PURE__ */ jsx(Handle, {
+			!(def.group === "gatilhos") && /* @__PURE__ */ jsx(Port, {
 				type: "target",
-				position: Position.Top,
-				className: handle,
 				isConnectable
 			}),
 			/* @__PURE__ */ jsxs("div", {
-				className: "flex items-start gap-3",
+				className: "flex items-start gap-3 p-3 pb-2",
 				children: [
 					/* @__PURE__ */ jsx("span", {
-						className: cn("flex size-8 shrink-0 items-center justify-center rounded-block", TONE[data.kind]),
+						className: cn("flex size-8 shrink-0 items-center justify-center rounded-block", flowTone(data.kind)),
 						children: /* @__PURE__ */ jsx(Icon, {
 							className: "size-icon-md",
 							"aria-hidden": true
@@ -666,42 +1179,117 @@ function FlowBlock({ id, data, selected, isConnectable }) {
 					}),
 					/* @__PURE__ */ jsxs("div", {
 						className: "flex min-w-0 flex-1 flex-col",
+						children: [/* @__PURE__ */ jsx("span", {
+							"data-flow-title": true,
+							className: "truncate text-sm font-medium",
+							title: name,
+							children: name
+						}), /* @__PURE__ */ jsx("span", {
+							className: "truncate text-xs text-muted-foreground",
+							children: data.active ? "Ativo" : FLOW_TYPE_NAME[data.kind]
+						})]
+					}),
+					actions && /* @__PURE__ */ jsxs("div", {
+						className: "-mt-3 -mr-3 flex shrink-0",
 						children: [
-							/* @__PURE__ */ jsx("span", {
-								className: "text-xs text-muted-foreground",
-								children: FLOW_TYPE_NAME[data.kind]
-							}),
-							/* @__PURE__ */ jsx("span", {
-								className: "text-sm font-medium break-words",
-								children: data.label
+							/* @__PURE__ */ jsx(Button, {
+								variant: "ghost",
+								size: "sm",
+								iconOnly: true,
+								"aria-label": `Executar bloco ${name}`,
+								className: action,
+								icon: /* @__PURE__ */ jsx(Play, {}),
+								onClick: () => actions.play(id)
 							}),
-							wait && /* @__PURE__ */ jsx("span", {
-								className: "text-xs text-muted-foreground",
-								children: wait
+							actions.edit && /* @__PURE__ */ jsx(Button, {
+								"data-flow-edit": true,
+								variant: "ghost",
+								size: "sm",
+								iconOnly: true,
+								"aria-label": `Editar bloco ${name}`,
+								className: action,
+								icon: /* @__PURE__ */ jsx(SquarePen, {}),
+								onClick: () => actions.edit?.(id)
 							}),
-							data.active && /* @__PURE__ */ jsx("span", {
-								className: "text-xs font-medium text-primary-text",
-								children: "Ativo"
+							actions.remove && /* @__PURE__ */ jsx(Button, {
+								variant: "ghost",
+								size: "sm",
+								iconOnly: true,
+								"aria-label": `Excluir bloco ${name}`,
+								className: action,
+								icon: /* @__PURE__ */ jsx(Trash2, {}),
+								onClick: () => actions.remove?.(id)
 							})
 						]
-					}),
-					data.edit && /* @__PURE__ */ jsx(Button, {
-						"data-flow-edit": true,
-						variant: "ghost",
-						size: "sm",
-						iconOnly: true,
-						"aria-label": `Editar bloco ${nodeName({
-							type: data.kind,
-							data
-						})}`,
-						className: "nodrag nopan -mt-1 -mr-1 min-h-touch min-w-touch shrink-0",
-						icon: /* @__PURE__ */ jsx(SquarePen, {})
 					})
 				]
 			}),
+			/* @__PURE__ */ jsx("p", {
+				id: descId,
+				className: "px-3 pb-3 text-xs text-muted-foreground",
+				children: def.description
+			}),
+			summary.length > 0 && /* @__PURE__ */ jsx("dl", {
+				className: "flex flex-col gap-2 border-t p-3",
+				children: summary.map((row) => /* @__PURE__ */ jsxs("div", {
+					className: "flex flex-col gap-1",
+					children: [/* @__PURE__ */ jsx("dt", {
+						className: "text-xs text-muted-foreground",
+						children: row.label
+					}), /* @__PURE__ */ jsx("dd", { children: /* @__PURE__ */ jsx(Value, { text: row.value }) })]
+				}, row.label))
+			}),
+			received && /* @__PURE__ */ jsxs("p", {
+				className: "mx-3 mb-3 flex items-center gap-2 rounded-block bg-success-soft p-2 text-xs text-success-soft-foreground",
+				children: [/* @__PURE__ */ jsx(CheckCircle2, {
+					className: "size-icon-sm shrink-0",
+					"aria-hidden": true
+				}), "Dados de exemplo recebidos"]
+			}),
+			data.kind === "condicao" && /* @__PURE__ */ jsxs("div", {
+				className: "flex flex-col border-t",
+				children: [rules.map((rule) => /* @__PURE__ */ jsxs("div", {
+					"data-flow-output": rule.id,
+					className: "relative flex min-h-touch items-center justify-between gap-2 border-b px-3 pr-4",
+					children: [
+						/* @__PURE__ */ jsx("span", {
+							className: "text-xs font-medium",
+							children: branchName(shape, rule.id)
+						}),
+						/* @__PURE__ */ jsx("span", {
+							className: "min-w-0 truncate text-xs text-muted-foreground",
+							title: ruleSummary(rule),
+							children: ruleSummary(rule)
+						}),
+						/* @__PURE__ */ jsx(Port, {
+							type: "source",
+							id: rule.id,
+							isConnectable
+						})
+					]
+				}, rule.id)), /* @__PURE__ */ jsxs("div", {
+					"data-flow-output": "senao",
+					className: "relative flex min-h-touch items-center justify-between gap-2 px-3 pr-4",
+					children: [
+						/* @__PURE__ */ jsx("span", {
+							className: "text-xs font-medium",
+							children: "Senão"
+						}),
+						/* @__PURE__ */ jsx("span", {
+							className: "min-w-0 truncate text-xs text-muted-foreground",
+							children: "Nenhuma regra bateu"
+						}),
+						/* @__PURE__ */ jsx(Port, {
+							type: "source",
+							id: "senao",
+							isConnectable
+						})
+					]
+				})]
+			}),
 			invalid && /* @__PURE__ */ jsxs("p", {
 				id: issueId,
-				className: "mt-2 flex flex-wrap gap-x-1 rounded-block bg-destructive-soft p-2 text-xs text-destructive-soft-foreground",
+				className: "m-3 mt-0 flex flex-wrap gap-x-1 rounded-block bg-destructive-soft p-2 text-xs text-destructive-soft-foreground",
 				children: [
 					/* @__PURE__ */ jsx(TriangleAlert, {
 						className: "size-icon-sm shrink-0",
@@ -712,42 +1300,119 @@ function FlowBlock({ id, data, selected, isConnectable }) {
 					data.issues.join(" ")
 				]
 			}),
-			data.kind === "condicao" && /* @__PURE__ */ jsxs(Fragment$1, { children: [
+			data.kind !== "condicao" && /* @__PURE__ */ jsx(Port, {
+				type: "source",
+				isConnectable
+			})
+		]
+	});
+}
+/** Ponto da curva de Bézier de uma ligação (t entre 0 e 1), com os mesmos controles da biblioteca. */
+function bezierAt(sx, sy, tx, ty, t) {
+	const d = tx - sx;
+	const offset = d >= 0 ? .5 * d : 6.25 * Math.sqrt(-d);
+	const mt = 1 - t;
+	return {
+		x: mt ** 3 * sx + 3 * mt ** 2 * t * (sx + offset) + 3 * mt * t ** 2 * (tx - offset) + t ** 3 * tx,
+		y: mt ** 3 * sy + 3 * mt ** 2 * t * sy + 3 * mt * t ** 2 * ty + t ** 3 * ty
+	};
+}
+function FlowLink({ id, sourceX, sourceY, targetX, targetY, sourcePosition, targetPosition, markerEnd, selected, data }) {
+	const actions = useContext(FlowActionsContext);
+	const [confirming, setConfirming] = useState(false);
+	const noRef = useRef(null);
+	useEffect(() => {
+		if (confirming) noRef.current?.focus();
+	}, [confirming]);
+	const [path, midX, midY] = getBezierPath({
+		sourceX,
+		sourceY,
+		sourcePosition,
+		targetX,
+		targetY,
+		targetPosition
+	});
+	const start = bezierAt(sourceX, sourceY, targetX, targetY, .18);
+	const showTrash = Boolean(selected && actions?.removeEdge);
+	const names = `${data?.from ?? ""} para ${data?.to ?? ""}`;
+	const label = data?.label;
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(BaseEdge, {
+		id,
+		path,
+		markerEnd,
+		interactionWidth: 24
+	}), /* @__PURE__ */ jsxs(EdgeLabelRenderer, { children: [label && /* @__PURE__ */ jsx("div", {
+		className: "pointer-events-none absolute top-0 left-0 translate-x-(--flow-x) translate-y-(--flow-y)",
+		style: {
+			"--flow-x": `${start.x}px`,
+			"--flow-y": `${start.y}px`
+		},
+		children: /* @__PURE__ */ jsx("span", {
+			"data-flow-edge-label": true,
+			className: "block -translate-x-1/2 -translate-y-1/2 rounded-item border bg-card px-2 py-1 text-xs font-medium text-card-foreground",
+			children: label
+		})
+	}), showTrash && actions?.removeEdge && /* @__PURE__ */ jsx("div", {
+		className: "pointer-events-none absolute top-0 left-0 z-50 translate-x-(--flow-x) translate-y-(--flow-y)",
+		style: {
+			"--flow-x": `${midX}px`,
+			"--flow-y": `${midY}px`
+		},
+		children: /* @__PURE__ */ jsx("div", {
+			"data-flow-edge-actions": true,
+			role: "presentation",
+			className: "nodrag nopan pointer-events-auto flex -translate-x-1/2 -translate-y-1/2 items-center gap-2 rounded-control border bg-card p-1 shadow-md",
+			onKeyDown: (e) => {
+				if (e.key === "Escape" && confirming) {
+					e.stopPropagation();
+					setConfirming(false);
+				}
+			},
+			children: confirming ? /* @__PURE__ */ jsxs(Fragment$1, { children: [
 				/* @__PURE__ */ jsx("span", {
-					className: "absolute inset-y-0 right-4 flex items-center text-xs font-medium",
+					role: "alertdialog",
+					"aria-label": "Confirmar exclusão da ligação",
+					className: "px-2 text-xs font-medium",
+					children: "Excluir ligação?"
+				}),
+				/* @__PURE__ */ jsx(Button, {
+					size: "sm",
+					variant: "destructive",
+					className: "min-h-touch",
+					onClick: () => {
+						setConfirming(false);
+						actions.removeEdge?.(id);
+					},
 					children: "Sim"
 				}),
-				/* @__PURE__ */ jsx("span", {
-					className: "absolute inset-x-0 bottom-3 text-center text-xs font-medium",
+				/* @__PURE__ */ jsx(Button, {
+					size: "sm",
+					variant: "outline",
+					ref: noRef,
+					className: "min-h-touch",
+					onClick: (e) => {
+						setConfirming(false);
+						e.currentTarget.closest(".flow-surface")?.focus();
+					},
 					children: "Não"
-				}),
-				/* @__PURE__ */ jsx(Handle, {
-					id: "sim",
-					type: "source",
-					position: Position.Right,
-					className: handle,
-					isConnectable
-				}),
-				/* @__PURE__ */ jsx(Handle, {
-					id: "nao",
-					type: "source",
-					position: Position.Bottom,
-					className: handle,
-					isConnectable
 				})
-			] }),
-			data.kind !== "condicao" && data.kind !== "fim" && /* @__PURE__ */ jsx(Handle, {
-				type: "source",
-				position: Position.Bottom,
-				className: handle,
-				isConnectable
+			] }) : /* @__PURE__ */ jsx(Button, {
+				size: "sm",
+				variant: "ghost",
+				iconOnly: true,
+				"aria-label": `Excluir ligação de ${names}`,
+				className: "min-h-touch min-w-touch",
+				icon: /* @__PURE__ */ jsx(Trash2, {}),
+				onClick: () => setConfirming(true)
 			})
-		]
-	});
+		})
+	})] })] });
 }
 var nodeTypes = { bloco: FlowBlock };
+var edgeTypes = { ligacao: FlowLink };
 var defaultEdgeOptions = {
-	type: "smoothstep",
+	type: "ligacao",
+	animated: true,
 	markerEnd: { type: MarkerType.ArrowClosed }
 };
 var fitViewOptions = {
@@ -796,47 +1461,78 @@ function FlowZoomControls() {
 		]
 	});
 }
-/** Enquadra de novo quando a largura do canvas muda (painel do teste abrindo, janela redimensionada). */
+/** Zoom mínimo do enquadramento inicial: abaixo disso os cards e as alças ficam ilegíveis e pequenos demais. */
+var MIN_FIT_ZOOM = .5;
+/**
+* Enquadramento inicial e quando a largura do canvas muda. Cabe tudo se o zoom ficar em 50 % ou
+* mais; senão abre em 50 % começando pela esquerda (pelo gatilho) e a pessoa navega. O botão
+* "Enquadrar" continua mostrando o fluxo inteiro, sem piso de zoom.
+*/
 function FlowAutoFit() {
-	const { fitView } = useReactFlow();
+	const { getNodes, setViewport } = useReactFlow();
 	const width = useStore((st) => st.width);
+	const height = useStore((st) => st.height);
+	const ready = useStore((st) => st.nodeLookup.size > 0 && [...st.nodeLookup.values()].every((n) => (n.measured.width ?? 0) > 0));
 	const before = useRef(0);
+	const [attempt, setAttempt] = useState(0);
 	useEffect(() => {
-		if (before.current > 0 && width > 0 && width !== before.current) fitView(fitViewOptions);
-		if (width > 0) before.current = width;
-	}, [width, fitView]);
+		if (!ready || width <= 0 || height <= 0 || width === before.current) return;
+		const nodes = getNodes();
+		if (nodes.length === 0) return;
+		const b = getNodesBounds(nodes);
+		const fit = Math.min(1, (width - 32) / b.width, (height - 128) / b.height);
+		const zoom = Math.max(fit, MIN_FIT_ZOOM);
+		const x = zoom === fit ? (width - b.width * zoom) / 2 - b.x * zoom : 16 - b.x * zoom;
+		const y = Math.max((height - b.height * zoom) / 2, 64) - b.y * zoom;
+		setViewport({
+			x,
+			y,
+			zoom
+		}).then((ok) => {
+			if (ok) before.current = width;
+			else if (attempt < 20) setTimeout(() => setAttempt((a) => a + 1), 50);
+		});
+	}, [
+		ready,
+		width,
+		height,
+		attempt,
+		getNodes,
+		setViewport
+	]);
 	return null;
 }
 /**
 * O canvas: contêiner com a altura que sobra na tela (`h-board`), tema pelos tokens e a
 * biblioteca por dentro. A rolagem horizontal é do canvas (`data-allow-overflow`), nunca da página.
 */
-function FlowSurface({ className, children, ...props }) {
+function FlowSurface({ className, children, fill = true, ...props }) {
 	const ref = useFillHeight();
 	return /* @__PURE__ */ jsx("div", {
-		ref,
+		ref: fill ? ref : void 0,
+		tabIndex: -1,
 		"data-allow-overflow": true,
-		className: cn("flow-surface relative h-board min-h-viewer w-full min-w-0 overflow-hidden rounded-surface border", className),
+		className: cn("flow-surface relative w-full min-w-0 overflow-hidden outline-none", fill ? "h-board min-h-viewer rounded-surface border" : "h-full", className),
 		style: {
 			"--xy-edge-stroke": "var(--rendra-muted-foreground)",
 			"--xy-edge-stroke-selected": "var(--rendra-primary)",
 			"--xy-edge-stroke-width": "2",
 			"--xy-connectionline-stroke": "var(--rendra-primary)",
 			"--xy-connectionline-stroke-width": "2",
-			"--xy-handle-background-color": "var(--rendra-primary)",
+			"--xy-handle-background-color": "var(--rendra-primary-text)",
 			"--xy-attribution-background-color": "var(--rendra-card)",
 			"--xy-background-color": "var(--rendra-muted)"
 		},
 		children: /* @__PURE__ */ jsxs(ReactFlow, {
 			className: "flow-canvas",
 			nodeTypes,
+			edgeTypes,
 			defaultEdgeOptions,
 			defaultMarkerColor: "var(--rendra-muted-foreground)",
-			connectionLineType: ConnectionLineType.SmoothStep,
+			connectionLineType: ConnectionLineType.Bezier,
+			connectionRadius: 12,
 			ariaLabelConfig: FLOW_ARIA,
-			fitView: true,
-			fitViewOptions,
-			minZoom: .25,
+			minZoom: .1,
 			maxZoom: 2,
 			zoomOnDoubleClick: false,
 			zoomOnScroll: false,
@@ -855,17 +1551,16 @@ function FlowSurface({ className, children, ...props }) {
 * não apaga. Para montar e editar, use o FlowEditor.
 */
 function FlowViewer({ value, activeId = null, issues, className }) {
-	const nodes = useMemo(() => toRfNodes(value, {
+	const flow = useMemo(() => migrateFlow(value), [value]);
+	const nodes = useMemo(() => toRfNodes(flow, {
 		activeId,
-		issues,
-		handles: "sm",
-		edit: false
+		issues
 	}), [
-		value,
+		flow,
 		activeId,
 		issues
 	]);
-	const edges = useMemo(() => toRfEdges(value), [value]);
+	const edges = useMemo(() => toRfEdges(flow), [flow]);
 	return /* @__PURE__ */ jsx("div", {
 		"data-rendra": "FLX-002",
 		className: cn("flow-viewer min-w-0", className),
@@ -881,66 +1576,818 @@ function FlowViewer({ value, activeId = null, issues, className }) {
 	});
 }
 //#endregion
-//#region src/components/ui/flow-editor.tsx
-var NODE_W = 256;
-var NODE_H = 72;
-var DRAG_START = 4;
-var NONE = "__nenhum";
-/** Reaproveita os objetos de nó que não mudaram (a biblioteca guarda medida e seleção neles). */
-function mergeNodes(prev, next) {
-	const old = new Map(prev.map((n) => [n.id, n]));
-	return next.map((n) => {
-		const o = old.get(n.id);
-		if (!o) return n;
-		const a = o.data;
-		const b = n.data;
-		if (!o.dragging && o.position.x === n.position.x && o.position.y === n.position.y && o.ariaLabel === n.ariaLabel && a.label === b.label && a.kind === b.kind && a.config === b.config && a.active === b.active && a.handles === b.handles && a.edit === b.edit && a.issues.length === b.issues.length && a.issues.every((m, i) => m === b.issues[i])) return o;
-		return {
-			...o,
-			position: o.dragging ? o.position : n.position,
-			ariaLabel: n.ariaLabel,
-			data: b
-		};
-	});
-}
-function mergeEdges(prev, next) {
-	const old = new Map(prev.map((e) => [e.id, e]));
-	return next.map((e) => {
-		const o = old.get(e.id);
-		if (!o) return e;
-		return o.source === e.source && o.target === e.target && o.sourceHandle === e.sourceHandle && o.ariaLabel === e.ariaLabel ? o : {
-			...o,
-			...e
-		};
+//#region src/components/ui/flow-sidebar.tsx
+var normalize = (s) => s.normalize("NFD").replace(/\p{M}/gu, "").toLowerCase();
+function FlowBlockList({ onAdd, onDragStart, suppressClick }) {
+	const [query, setQuery] = useState("");
+	const q = normalize(query.trim());
+	const groups = FLOW_BLOCK_GROUPS.map((g) => ({
+		...g,
+		types: g.types.filter((t) => {
+			const def = FLOW_BLOCKS[t];
+			return !def.hidden && (q === "" || normalize(`${def.name} ${def.hint}`).includes(q));
+		})
+	})).filter((g) => g.types.length > 0);
+	return /* @__PURE__ */ jsxs("div", {
+		className: "flex flex-col gap-4",
+		children: [
+			/* @__PURE__ */ jsx(Input, {
+				icon: /* @__PURE__ */ jsx(Search, {}),
+				value: query,
+				onChange: setQuery,
+				placeholder: "Buscar gatilho ou ação",
+				"aria-label": "Buscar bloco",
+				clearable: true
+			}),
+			groups.length === 0 && /* @__PURE__ */ jsx(EmptyState, {
+				size: "compact",
+				title: "Nenhum bloco encontrado",
+				description: "Nenhum bloco tem esse nome."
+			}),
+			groups.map((g) => /* @__PURE__ */ jsxs("section", {
+				role: "group",
+				"aria-label": g.name,
+				className: "flex flex-col gap-2",
+				children: [/* @__PURE__ */ jsx("h3", {
+					className: "text-xs font-medium text-muted-foreground",
+					children: g.name
+				}), g.types.map((type) => {
+					const Icon = FLOW_ICON[type];
+					return /* @__PURE__ */ jsx(Button, {
+						variant: "outline",
+						size: "sm",
+						"data-flow-block": type,
+						className: cn("w-full justify-start", onDragStart && "cursor-grab touch-none"),
+						icon: /* @__PURE__ */ jsx("span", {
+							className: cn("flex size-6 items-center justify-center rounded-block", flowTone(type)),
+							children: /* @__PURE__ */ jsx(Icon, {
+								className: "size-icon-sm",
+								"aria-hidden": true
+							})
+						}),
+						onPointerDown: onDragStart ? (e) => onDragStart(e, type) : void 0,
+						onClick: () => {
+							if (suppressClick?.current) return;
+							onAdd(type);
+						},
+						children: FLOW_BLOCKS[type].name
+					}, type);
+				})]
+			}, g.id))
+		]
+	});
+}
+/** Cabeçalho comum dos painéis da barra lateral: título e o botão de fechar. */
+function FlowPanelShell({ title, onClose, closeLabel = "Fechar painel", children, className }) {
+	const id = useId();
+	return /* @__PURE__ */ jsxs("section", {
+		"aria-labelledby": id,
+		className: cn("flex flex-col gap-4", className),
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: "flex items-center justify-between gap-2",
+			children: [/* @__PURE__ */ jsx("h2", {
+				id,
+				className: "text-sm font-semibold",
+				children: title
+			}), onClose && /* @__PURE__ */ jsx(Button, {
+				variant: "ghost",
+				size: "sm",
+				iconOnly: true,
+				"aria-label": closeLabel,
+				className: "min-h-touch min-w-touch",
+				icon: /* @__PURE__ */ jsx(X, {}),
+				onClick: onClose
+			})]
+		}), children]
 	});
 }
-function draftOf(node, flow) {
-	const target = (branch) => flow.edges.find((e) => e.source === node.id && (branch ? e.branch === branch : true))?.target ?? NONE;
-	const cfg = node.data.config;
-	const unit = FLOW_WAIT_UNITS.find((u) => u === cfg?.unit) ?? "minutos";
+//#endregion
+//#region src/lib/flow-edit.ts
+/** Acrescenta um bloco com id único e determinístico (`tipo-N`) e a configuração padrão do tipo. */
+function addNode(input, type, position, options = {}) {
+	const flow = migrateFlow(input);
+	const taken = /* @__PURE__ */ new Set([...flow.nodes.map((n) => n.id), ...options.reservedIds ?? []]);
+	let n = 1;
+	while (taken.has(`${type}-${n}`)) n++;
+	const id = `${type}-${n}`;
+	const config = FLOW_BLOCKS[type].defaultConfig();
+	const node = {
+		id,
+		type,
+		position: {
+			x: position.x,
+			y: position.y
+		},
+		data: Object.keys(config).length > 0 ? {
+			label: options.label ?? FLOW_TYPE_NAME[type],
+			config
+		} : { label: options.label ?? FLOW_TYPE_NAME[type] }
+	};
 	return {
-		label: node.data.label,
-		duration: typeof cfg?.duration === "number" ? String(cfg.duration) : "",
-		unit,
-		next: node.type === "condicao" ? NONE : target(),
-		sim: node.type === "condicao" ? target("sim") : NONE,
-		nao: node.type === "condicao" ? target("nao") : NONE
+		flow: {
+			...flow,
+			nodes: [...flow.nodes, node]
+		},
+		id
 	};
 }
-var sameDraft = (a, b) => a.label === b.label && a.duration === b.duration && a.unit === b.unit && a.next === b.next && a.sim === b.sim && a.nao === b.nao;
-function BlockDrawer({ flow, nodeId, open, onOpenChange, onApply, onDelete }) {
-	const node = flow.nodes.find((n) => n.id === nodeId);
-	const initial = useMemo(() => node ? draftOf(node, flow) : null, [node, flow]);
-	const [draft, setDraft] = useState(initial);
-	const [discarding, setDiscarding] = useState(false);
-	if (!node || !initial || !draft) return null;
-	const dirty = !sameDraft(draft, initial);
-	const duration = Number(draft.duration);
-	const durationError = node.type === "espera" && (draft.duration.trim() === "" || !(duration > 0)) ? "Informe um número maior que zero." : void 0;
-	const set = (patch) => setDraft({
-		...draft,
-		...patch
+var edgeId = (source, target, branch) => branch ? `${source}:${branch}->${target}` : `${source}->${target}`;
+/** Blocos que `id` alcança e que nenhum outro caminho do gatilho alcança sem passar por ele. */
+function exclusiveDescendants(flow, id) {
+	const reach = (starts, skip) => {
+		const seen = /* @__PURE__ */ new Set();
+		const stack = [...starts];
+		while (stack.length) {
+			const cur = stack.pop();
+			if (seen.has(cur) || cur === skip) continue;
+			seen.add(cur);
+			for (const e of flow.edges) if (e.source === cur) stack.push(e.target);
+		}
+		return seen;
+	};
+	const below = reach([id]);
+	below.delete(id);
+	const alive = reach(flow.nodes.filter((n) => isTrigger(n.type) && n.id !== id).map((n) => n.id), id);
+	return flow.nodes.filter((n) => below.has(n.id) && !alive.has(n.id)).map((n) => n.id);
+}
+/**
+* Apaga o bloco. `so-este`: religa o anterior ao posterior quando o bloco tem uma entrada e uma
+* saída e não é condição. `daqui-para-frente`: apaga também tudo o que só existe por causa dele.
+*/
+function removeNode(input, id, mode = "so-este") {
+	const flow = migrateFlow(input);
+	const node = flow.nodes.find((n) => n.id === id);
+	if (!node) return flow;
+	const gone = /* @__PURE__ */ new Set([id, ...mode === "daqui-para-frente" ? exclusiveDescendants(flow, id) : []]);
+	let edges = flow.edges.filter((e) => !gone.has(e.source) && !gone.has(e.target));
+	if (mode === "so-este" && node.type !== "condicao") {
+		const into = flow.edges.filter((e) => e.target === id);
+		const from = flow.edges.filter((e) => e.source === id);
+		if (into.length === 1 && from.length === 1) {
+			const a = into[0];
+			const b = from[0];
+			const bridged = {
+				id: edgeId(a.source, b.target, a.branch),
+				source: a.source,
+				target: b.target,
+				...a.branch ? { branch: a.branch } : {}
+			};
+			if (a.source !== b.target && !edges.some((e) => e.id === bridged.id)) edges = [...edges, bridged];
+		}
+	}
+	return {
+		...flow,
+		nodes: flow.nodes.filter((n) => !gone.has(n.id)),
+		edges
+	};
+}
+function removeEdge(flow, id) {
+	return {
+		...flow,
+		edges: flow.edges.filter((e) => e.id !== id)
+	};
+}
+/** Tira a ligação da saída `branch` de `source` (a única saída, nos blocos comuns). */
+function clearOutput(flow, source, branch) {
+	return {
+		...flow,
+		edges: flow.edges.filter((e) => !(e.source === source && (e.branch ?? void 0) === branch))
+	};
+}
+function moveNode(flow, id, position) {
+	return {
+		...flow,
+		nodes: flow.nodes.map((n) => n.id === id ? {
+			...n,
+			position: {
+				x: position.x,
+				y: position.y
+			}
+		} : n)
+	};
+}
+/** Troca o rótulo e/ou o config do bloco (o config informado substitui o anterior). */
+function updateNodeData(flow, id, patch) {
+	return {
+		...flow,
+		nodes: flow.nodes.map((n) => {
+			if (n.id !== id) return n;
+			const label = patch.label ?? n.data.label;
+			const config = patch.config ?? n.data.config;
+			return {
+				...n,
+				data: config ? {
+					label,
+					config
+				} : { label }
+			};
+		})
+	};
+}
+/**
+* Liga dois blocos. A segunda ligação numa saída substitui a primeira e devolve a trocada em
+* `replaced`, para o editor avisar. Recusa, com o motivo, o que o fluxo nunca aceita.
+*/
+function connectNodes(flow, source, target, branch) {
+	const from = flow.nodes.find((n) => n.id === source);
+	const to = flow.nodes.find((n) => n.id === target);
+	if (!from || !to) return {
+		ok: false,
+		reason: "Esse bloco não existe mais."
+	};
+	if (source === target) return {
+		ok: false,
+		reason: "Um bloco não pode ligar a ele mesmo."
+	};
+	if (isTrigger(to.type)) return {
+		ok: false,
+		reason: "O gatilho começa o fluxo e não recebe ligação."
+	};
+	if (from.type === "condicao") {
+		if (!branch) return {
+			ok: false,
+			reason: "Escolha a saída da condição: uma regra ou \"Senão\"."
+		};
+		if (!outputIds(from).includes(branch)) return {
+			ok: false,
+			reason: "Essa saída não existe mais na condição."
+		};
+	} else if (branch) return {
+		ok: false,
+		reason: "Só a condição tem saídas por regra."
+	};
+	const id = edgeId(source, target, branch);
+	if (flow.edges.some((e) => e.id === id)) return {
+		ok: false,
+		reason: "Essa ligação já existe."
+	};
+	const sameOutput = (e) => e.source === source && (e.branch ?? void 0) === branch;
+	const old = flow.edges.find(sameOutput);
+	const edge = branch ? {
+		id,
+		source,
+		target,
+		branch
+	} : {
+		id,
+		source,
+		target
+	};
+	return {
+		ok: true,
+		flow: {
+			...flow,
+			edges: [...flow.edges.filter((e) => !sameOutput(e)), edge]
+		},
+		...old ? { replaced: {
+			source: old.source,
+			target: old.target,
+			...old.branch ? { branch: old.branch } : {}
+		} } : {}
+	};
+}
+/** Blocos que `id` pode ter como próximo: nunca ele mesmo nem um gatilho. */
+function nextCandidates(flow, id) {
+	if (!flow.nodes.some((n) => n.id === id)) return [];
+	return flow.nodes.filter((n) => n.id !== id && !isTrigger(n.type));
+}
+/** Onde o bloco está ligado: quem vem antes, quem vem depois e quantos cairiam junto. */
+function describeNodeLinks(flow, id) {
+	const byId = new Map(flow.nodes.map((n) => [n.id, n]));
+	const self = byId.get(id);
+	const anteriores = [];
+	const posteriores = [];
+	for (const e of flow.edges) {
+		if (e.target === id) {
+			const node = byId.get(e.source);
+			if (node) anteriores.push({
+				node,
+				...e.branch ? { saida: branchName(node, e.branch) } : {}
+			});
+		}
+		if (e.source === id && self) {
+			const node = byId.get(e.target);
+			if (node) posteriores.push({
+				node,
+				...e.branch ? { saida: branchName(self, e.branch) } : {}
+			});
+		}
+	}
+	return {
+		anteriores,
+		posteriores,
+		descendentes: exclusiveDescendants(flow, id).length
+	};
+}
+/**
+* Primeira posição livre a partir de `from`: desce em passos de `FLOW_GAP_Y` e, se a coluna
+* estiver cheia, passa à coluna da direita. Usa o tamanho medido dos blocos quando há, senão
+* a estimativa. Determinística: o mesmo fluxo e o mesmo ponto dão sempre a mesma posição.
+*/
+function findFreePosition(flow, size, from, measured = {}) {
+	const rects = flow.nodes.map((n) => ({
+		x: n.position.x,
+		y: n.position.y,
+		w: measured[n.id]?.w ?? 336,
+		h: measured[n.id]?.h ?? estimateNodeHeight(n)
+	}));
+	const gap = 16;
+	const free = (x, y) => rects.every((r) => x + size.w + gap <= r.x || r.x + r.w + gap <= x || y + size.h + gap <= r.y || r.y + r.h + gap <= y);
+	for (let col = 0; col < 40; col++) {
+		const x = from.x + col * (size.w + 96);
+		for (let row = 0; row < 60; row++) {
+			const y = from.y + row * 32;
+			if (free(x, y)) return {
+				x,
+				y
+			};
+		}
+	}
+	return {
+		x: from.x,
+		y: from.y
+	};
+}
+/** Aviso de troca: "A ligação anterior de "X" para "Y" foi trocada." */
+function replacedMessage(flow, replaced) {
+	const name = (id) => {
+		const n = flow.nodes.find((x) => x.id === id);
+		return n ? nodeName(n) : id;
+	};
+	return `A ligação anterior de "${name(replaced.source)}" para "${name(replaced.target)}" foi trocada.`;
+}
+//#endregion
+//#region src/components/ui/flow-config-panels.tsx
+var list = asList;
+var NONE = "__nenhum";
+function VariableInsert({ variables, label, onInsert }) {
+	return /* @__PURE__ */ jsx(Select, {
+		label: `Inserir variável em ${label}`,
+		placeholder: "Inserir variável",
+		disabled: variables.length === 0,
+		value: null,
+		options: variables.map((v) => ({
+			value: v.id,
+			label: v.id,
+			description: v.label
+		})),
+		onChange: (v) => v && onInsert(`{{${v}}}`)
+	});
+}
+/** Campo de texto que aceita variáveis `{{x}}`: o texto e o seletor que acrescenta uma no fim. */
+function TemplateField({ label, value, onChange, variables, multiline, help }) {
+	return /* @__PURE__ */ jsxs("div", {
+		className: "flex flex-col gap-2",
+		children: [/* @__PURE__ */ jsx(Field, {
+			label,
+			span: "full",
+			help,
+			children: multiline ? /* @__PURE__ */ jsx(Textarea, {
+				rows: 3,
+				value,
+				onChange
+			}) : /* @__PURE__ */ jsx(Input, {
+				value,
+				onChange
+			})
+		}), /* @__PURE__ */ jsx(VariableInsert, {
+			variables,
+			label,
+			onInsert: (token) => onChange(value + token)
+		})]
+	});
+}
+/** Escolha de uma variável do fluxo para o corpo do webhook: guarda `{{id}}`. */
+function VariableSelect({ label, value, variables, onChange }) {
+	const current = /^\{\{\s*([\w.]+)\s*\}\}$/.exec(value)?.[1] ?? null;
+	const options = variables.map((v) => ({
+		value: v.id,
+		label: v.id,
+		description: v.label
+	}));
+	if (current && !variables.some((v) => v.id === current)) options.push({
+		value: current,
+		label: current
+	});
+	return /* @__PURE__ */ jsx(Select, {
+		label,
+		placeholder: "Variável",
+		value: current,
+		options,
+		clearable: true,
+		onChange: (v) => onChange(v ? `{{${v}}}` : "")
+	});
+}
+function ConditionFields({ flow, node, variables, onApply }) {
+	const rules = rulesOf(node);
+	const fieldOptions = (rule) => {
+		const opts = variables.map((v) => ({
+			value: v.id,
+			label: v.id,
+			description: v.label
+		}));
+		if (rule.field && !opts.some((o) => o.value === rule.field)) opts.push({
+			value: rule.field,
+			label: rule.field,
+			description: ""
+		});
+		return opts;
+	};
+	const save = (next, base = flow) => onApply(updateNodeData(base, node.id, { config: {
+		...node.data.config,
+		rules: next
+	} }));
+	const patch = (i, p) => save(rules.map((r, k) => k === i ? {
+		...r,
+		...p
+	} : r));
+	const add = () => save([...rules, {
+		id: nextRuleId(rules),
+		field: "",
+		operator: "igual",
+		value: ""
+	}]);
+	const remove = (i) => {
+		const rule = rules[i];
+		let next = flow;
+		for (const e of flow.edges) if (e.source === node.id && e.branch === rule.id) next = removeEdge(next, e.id);
+		save(rules.filter((_, k) => k !== i), next);
+	};
+	return /* @__PURE__ */ jsxs("div", {
+		className: "flex flex-col gap-4",
+		children: [
+			rules.map((rule, i) => /* @__PURE__ */ jsxs("div", {
+				role: "group",
+				"aria-label": branchName(node, rule.id),
+				className: "flex flex-col gap-2 rounded-block border p-3",
+				children: [
+					/* @__PURE__ */ jsxs("div", {
+						className: "flex items-center justify-between gap-2",
+						children: [/* @__PURE__ */ jsx("span", {
+							className: "text-sm font-medium",
+							children: branchName(node, rule.id)
+						}), /* @__PURE__ */ jsx(Button, {
+							variant: "ghost",
+							size: "sm",
+							iconOnly: true,
+							"aria-label": `Excluir ${branchName(node, rule.id)}`,
+							className: "min-h-touch min-w-touch",
+							icon: /* @__PURE__ */ jsx(Trash2, {}),
+							onClick: () => remove(i)
+						})]
+					}),
+					/* @__PURE__ */ jsx(Select, {
+						label: `Campo da regra ${i + 1}`,
+						placeholder: "Campo",
+						options: fieldOptions(rule),
+						value: rule.field || null,
+						onChange: (v) => patch(i, { field: v ?? "" })
+					}),
+					/* @__PURE__ */ jsx(Select, {
+						label: `Operador da regra ${i + 1}`,
+						options: FLOW_RULE_OPERATORS.map((o) => ({
+							value: o.value,
+							label: o.label
+						})),
+						value: rule.operator,
+						onChange: (v) => {
+							const operator = v ?? "igual";
+							patch(i, {
+								operator,
+								...operatorHasValue(operator) ? {} : { value: "" }
+							});
+						}
+					}),
+					operatorHasValue(rule.operator) && /* @__PURE__ */ jsx(Input, {
+						"aria-label": `Valor da regra ${i + 1}`,
+						placeholder: "Valor",
+						value: rule.value,
+						onChange: (v) => patch(i, { value: v })
+					})
+				]
+			}, rule.id)),
+			rules.length === 0 && /* @__PURE__ */ jsx(EmptyState, {
+				size: "compact",
+				title: "Nenhuma regra",
+				description: "A condição ainda não tem regras."
+			}),
+			/* @__PURE__ */ jsx(Button, {
+				variant: "outline",
+				size: "sm",
+				icon: /* @__PURE__ */ jsx(Plus, {}),
+				onClick: add,
+				children: "Adicionar regra"
+			}),
+			/* @__PURE__ */ jsxs("p", {
+				className: "rounded-block bg-muted p-3 text-sm",
+				children: [/* @__PURE__ */ jsx("span", {
+					className: "font-medium",
+					children: "Senão"
+				}), /* @__PURE__ */ jsx("span", {
+					className: "text-muted-foreground",
+					children: " segue quando nenhuma regra bater."
+				})]
+			})
+		]
+	});
+}
+function CodeBlock({ children }) {
+	return /* @__PURE__ */ jsx("pre", {
+		className: "rounded-block bg-muted p-3 text-xs break-words whitespace-pre-wrap text-foreground",
+		children
+	});
+}
+var ENDPOINT_ORIGIN = "https://app.exemplo.com";
+function WebhookInFields({ cfg, set }) {
+	const received = cfg.received === true;
+	const mapping = list(cfg.mapping);
+	const sample = flattenPayload(FLOW_SAMPLE_PAYLOAD);
+	const mapOf = (path) => mapping.find((m) => str(m.from) === path);
+	const setMap = (path, to) => set({ mapping: [...mapping.filter((m) => str(m.from) !== path), ...to ? [{
+		from: path,
+		to
+	}] : []] });
+	const copy = async () => {
+		try {
+			await navigator.clipboard.writeText(`${ENDPOINT_ORIGIN}${str(cfg.path)}`);
+			toast.success("Endereço copiado");
+		} catch {
+			toast.error("Não foi possível copiar o endereço");
+		}
+	};
+	return /* @__PURE__ */ jsx(Tabs, {
+		variant: "pill",
+		"aria-label": "Webhook de entrada",
+		items: [{
+			value: "mapeamento",
+			label: "Mapeamento",
+			content: /* @__PURE__ */ jsxs("div", {
+				className: "flex flex-col gap-4 pt-4",
+				children: [
+					/* @__PURE__ */ jsxs("div", {
+						className: "flex items-center gap-2",
+						children: [/* @__PURE__ */ jsx(Button, {
+							variant: "outline",
+							size: "sm",
+							onClick: () => set({ received: true }),
+							children: "Simular chegada"
+						}), /* @__PURE__ */ jsx(InfoHint, {
+							title: "Mapeamento de campos",
+							children: "Simule a chegada de dados de exemplo e ligue cada campo recebido a um campo do sistema. Os campos mapeados viram variáveis para os blocos seguintes."
+						})]
+					}),
+					!received && /* @__PURE__ */ jsx(EmptyState, {
+						size: "compact",
+						title: "Nenhum dado recebido",
+						description: "Os campos aparecem depois da chegada simulada."
+					}),
+					received && /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(CodeBlock, { children: JSON.stringify(FLOW_SAMPLE_PAYLOAD, null, 2) }), /* @__PURE__ */ jsx("ul", {
+						"aria-label": "Campos recebidos",
+						className: "flex flex-col gap-3",
+						children: sample.map((f) => /* @__PURE__ */ jsxs("li", {
+							className: "flex flex-col gap-1",
+							children: [/* @__PURE__ */ jsxs("div", {
+								className: "flex items-center justify-between gap-2 text-xs",
+								children: [/* @__PURE__ */ jsx("code", {
+									className: "font-medium",
+									children: f.path
+								}), /* @__PURE__ */ jsx("span", {
+									className: "truncate text-muted-foreground",
+									children: f.value
+								})]
+							}), /* @__PURE__ */ jsx(Select, {
+								label: `Campo do sistema para ${f.path}`,
+								placeholder: "Não mapear",
+								searchable: true,
+								clearable: true,
+								options: FLOW_SYSTEM_FIELDS.map((o) => ({
+									value: o.value,
+									label: o.label
+								})),
+								value: str(mapOf(f.path)?.to) || null,
+								onChange: (v) => setMap(f.path, v)
+							})]
+						}, f.path))
+					})] })
+				]
+			})
+		}, {
+			value: "configuracoes",
+			label: "Configurações",
+			content: /* @__PURE__ */ jsxs("div", {
+				className: "flex flex-col gap-4 pt-4",
+				children: [
+					/* @__PURE__ */ jsx(Field, {
+						label: "Método",
+						span: "full",
+						children: /* @__PURE__ */ jsx(Select, {
+							label: "Método",
+							options: ["POST", "PUT"].map((m) => ({
+								value: m,
+								label: m
+							})),
+							value: str(cfg.method) || "POST",
+							onChange: (v) => set({ method: v ?? "POST" })
+						})
+					}),
+					/* @__PURE__ */ jsx(Field, {
+						label: "Endereço",
+						span: "full",
+						required: true,
+						children: /* @__PURE__ */ jsx(Input, {
+							value: str(cfg.path),
+							onChange: (v) => set({ path: v })
+						})
+					}),
+					/* @__PURE__ */ jsx(Button, {
+						variant: "outline",
+						size: "sm",
+						icon: /* @__PURE__ */ jsx(Copy, {}),
+						onClick: () => void copy(),
+						children: "Copiar endereço"
+					}),
+					/* @__PURE__ */ jsx(Field, {
+						label: "Código de resposta",
+						span: "full",
+						children: /* @__PURE__ */ jsx(Select, {
+							label: "Código de resposta",
+							options: [
+								{
+									value: "200",
+									label: "200 OK"
+								},
+								{
+									value: "202",
+									label: "202 Accepted"
+								},
+								{
+									value: "204",
+									label: "204 No Content"
+								}
+							],
+							value: String(cfg.responseCode ?? 200),
+							onChange: (v) => set({ responseCode: Number(v ?? 200) })
+						})
+					})
+				]
+			})
+		}]
+	});
+}
+function WebhookOutFields({ flow, cfg, variables, set }) {
+	const [simulated, setSimulated] = useState(false);
+	const body = list(cfg.body);
+	const headers = list(cfg.headers);
+	const patchBody = (i, p) => set({ body: body.map((b, k) => k === i ? {
+		...b,
+		...p
+	} : b) });
+	const patchHeader = (i, p) => set({ headers: headers.map((h, k) => k === i ? {
+		...h,
+		...p
+	} : h) });
+	const request = buildWebhookRequest(cfg, flowSampleData(flow));
+	return /* @__PURE__ */ jsx(Tabs, {
+		variant: "pill",
+		"aria-label": "Webhook de saída",
+		items: [{
+			value: "corpo",
+			label: "Corpo",
+			content: /* @__PURE__ */ jsxs("div", {
+				className: "flex flex-col gap-4 pt-4",
+				children: [
+					body.map((b, i) => /* @__PURE__ */ jsxs("div", {
+						role: "group",
+						"aria-label": `Campo enviado ${i + 1}`,
+						className: "flex flex-col gap-2 rounded-block border p-3",
+						children: [/* @__PURE__ */ jsxs("div", {
+							className: "flex items-center gap-2",
+							children: [/* @__PURE__ */ jsx(Input, {
+								"aria-label": `Nome do campo ${i + 1}`,
+								placeholder: "Nome do campo",
+								value: str(b.key),
+								onChange: (v) => patchBody(i, { key: v })
+							}), /* @__PURE__ */ jsx(Button, {
+								variant: "ghost",
+								size: "sm",
+								iconOnly: true,
+								"aria-label": `Excluir campo ${i + 1}`,
+								className: "min-h-touch min-w-touch shrink-0",
+								icon: /* @__PURE__ */ jsx(Trash2, {}),
+								onClick: () => set({ body: body.filter((_, k) => k !== i) })
+							})]
+						}), /* @__PURE__ */ jsx(VariableSelect, {
+							label: `Variável do campo ${i + 1}`,
+							value: str(b.value),
+							variables,
+							onChange: (token) => patchBody(i, { value: token })
+						})]
+					}, i)),
+					/* @__PURE__ */ jsx(Button, {
+						variant: "outline",
+						size: "sm",
+						icon: /* @__PURE__ */ jsx(Plus, {}),
+						onClick: () => set({ body: [...body, {
+							key: "",
+							value: ""
+						}] }),
+						children: "Adicionar campo"
+					}),
+					/* @__PURE__ */ jsxs("div", {
+						className: "flex items-center gap-2",
+						children: [/* @__PURE__ */ jsx(Button, {
+							variant: "outline",
+							size: "sm",
+							onClick: () => setSimulated(true),
+							children: "Simular envio"
+						}), /* @__PURE__ */ jsx(InfoHint, {
+							title: "Simulação do envio",
+							children: "Nada é enviado de verdade: a requisição é montada com os dados de exemplo e a resposta é uma amostra."
+						})]
+					}),
+					simulated && /* @__PURE__ */ jsxs("div", {
+						role: "region",
+						"aria-label": "Simulação do envio",
+						className: "flex flex-col gap-2",
+						children: [/* @__PURE__ */ jsx(CodeBlock, { children: `${request.method} ${request.url}\n${JSON.stringify(request.body, null, 2)}` }), /* @__PURE__ */ jsx(CodeBlock, { children: "200 OK { \"id\": \"crm-88\" }" })]
+					})
+				]
+			})
+		}, {
+			value: "configuracoes",
+			label: "Configurações",
+			content: /* @__PURE__ */ jsxs("div", {
+				className: "flex flex-col gap-4 pt-4",
+				children: [
+					/* @__PURE__ */ jsx(Field, {
+						label: "Método",
+						span: "full",
+						children: /* @__PURE__ */ jsx(Select, {
+							label: "Método",
+							options: [
+								"POST",
+								"PUT",
+								"PATCH"
+							].map((m) => ({
+								value: m,
+								label: m
+							})),
+							value: str(cfg.method) || "POST",
+							onChange: (v) => set({ method: v ?? "POST" })
+						})
+					}),
+					/* @__PURE__ */ jsx(Field, {
+						label: "Endereço",
+						span: "full",
+						required: true,
+						children: /* @__PURE__ */ jsx(Input, {
+							value: str(cfg.url),
+							onChange: (v) => set({ url: v })
+						})
+					}),
+					headers.map((h, i) => /* @__PURE__ */ jsxs("div", {
+						role: "group",
+						"aria-label": `Cabeçalho ${i + 1}`,
+						className: "flex flex-col gap-2 rounded-block border p-3",
+						children: [/* @__PURE__ */ jsx(Input, {
+							"aria-label": `Nome do cabeçalho ${i + 1}`,
+							placeholder: "Nome",
+							value: str(h.name),
+							onChange: (v) => patchHeader(i, { name: v })
+						}), /* @__PURE__ */ jsxs("div", {
+							className: "flex items-center gap-2",
+							children: [/* @__PURE__ */ jsx(Input, {
+								"aria-label": `Valor do cabeçalho ${i + 1}`,
+								placeholder: "Valor",
+								value: str(h.value),
+								onChange: (v) => patchHeader(i, { value: v })
+							}), /* @__PURE__ */ jsx(Button, {
+								variant: "ghost",
+								size: "sm",
+								iconOnly: true,
+								"aria-label": `Excluir cabeçalho ${i + 1}`,
+								className: "min-h-touch min-w-touch shrink-0",
+								icon: /* @__PURE__ */ jsx(Trash2, {}),
+								onClick: () => set({ headers: headers.filter((_, k) => k !== i) })
+							})]
+						})]
+					}, i)),
+					/* @__PURE__ */ jsx(Button, {
+						variant: "outline",
+						size: "sm",
+						icon: /* @__PURE__ */ jsx(Plus, {}),
+						onClick: () => set({ headers: [...headers, {
+							name: "",
+							value: ""
+						}] }),
+						children: "Adicionar cabeçalho"
+					})
+				]
+			})
+		}]
 	});
+}
+function LinkFields({ flow, node, onApply }) {
 	const options = [{
 		value: NONE,
 		label: "Nenhum"
@@ -948,240 +2395,644 @@ function BlockDrawer({ flow, nodeId, open, onOpenChange, onApply, onDelete }) {
 		value: n.id,
 		label: `${FLOW_TYPE_NAME[n.type]}: ${nodeName(n)}`
 	}))];
-	const target = (value) => value && value !== NONE ? value : null;
-	const apply = () => {
-		let next = updateNodeData(flow, node.id, {
-			label: draft.label,
-			...node.type === "espera" ? { config: {
-				duration,
-				unit: draft.unit
-			} } : {}
-		});
-		if (node.type === "condicao") {
-			next = setNext(next, node.id, target(draft.sim), "sim");
-			next = setNext(next, node.id, target(draft.nao), "nao");
-		} else if (node.type !== "fim") next = setNext(next, node.id, target(draft.next));
-		onApply(next);
-	};
-	const nextField = (name, key) => /* @__PURE__ */ jsx(Field, {
-		label: name,
-		span: "full",
-		children: /* @__PURE__ */ jsx(Select, {
-			label: name,
-			options,
-			value: draft[key],
-			onChange: (v) => set({ [key]: v ?? NONE })
+	return /* @__PURE__ */ jsx("div", {
+		className: "flex flex-col gap-3",
+		children: outputIds(node).map((out) => {
+			const label = out ? `Próximo bloco: ${branchName(node, out)}` : "Próximo bloco";
+			const current = flow.edges.find((e) => e.source === node.id && (e.branch ?? void 0) === out);
+			return /* @__PURE__ */ jsx(Field, {
+				label,
+				span: "full",
+				children: /* @__PURE__ */ jsx(Select, {
+					label,
+					options,
+					value: current?.target ?? NONE,
+					onChange: (v) => {
+						if (!v || v === NONE) return onApply(clearOutput(flow, node.id, out));
+						const r = connectNodes(flow, node.id, v, out);
+						if (!r.ok) return onApply(flow, r.reason);
+						onApply(r.flow, r.replaced ? replacedMessage(flow, r.replaced) : void 0);
+					}
+				})
+			}, out ?? "unica");
 		})
 	});
-	return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(Drawer, {
-		open,
-		onOpenChange,
-		title: `Bloco: ${nodeName(node)}`,
-		description: FLOW_TYPE_NAME[node.type],
-		dirty,
-		footer: /* @__PURE__ */ jsx(ActionBar, {
-			primary: {
-				label: "Aplicar",
-				onClick: apply,
-				disabled: draft.label.trim() === "" || Boolean(durationError)
-			},
-			cancel: {
-				label: "Cancelar",
-				onClick: () => dirty ? setDiscarding(true) : onOpenChange(false)
-			},
-			secondary: [{
-				label: "Excluir bloco",
-				icon: /* @__PURE__ */ jsx(Trash2, {}),
-				destructive: true,
-				onClick: () => onDelete(node.id)
-			}]
-		}),
-		children: /* @__PURE__ */ jsxs("div", {
-			className: "flex flex-col gap-4",
-			children: [
+}
+function BlockConfigPanel({ flow, nodeId, onApply, onClose }) {
+	const uid = useId();
+	const node = flow.nodes.find((n) => n.id === nodeId);
+	if (!node) return null;
+	const cfg = node.data.config ?? {};
+	const variables = flowVariables(flow);
+	const set = (patch) => onApply(updateNodeData(flow, node.id, { config: {
+		...cfg,
+		...patch
+	} }));
+	const ctx = {
+		flow,
+		node,
+		cfg,
+		variables,
+		set
+	};
+	const t = (key, label, opts = {}) => /* @__PURE__ */ jsx(TemplateField, {
+		label,
+		multiline: opts.multiline,
+		value: str(cfg[key]),
+		variables,
+		onChange: (v) => set({ [key]: v })
+	}, `${uid}-${key}`);
+	let fields = null;
+	switch (node.type) {
+		case "webhook-entrada":
+			fields = /* @__PURE__ */ jsx(WebhookInFields, { ...ctx });
+			break;
+		case "webhook-saida":
+			fields = /* @__PURE__ */ jsx(WebhookOutFields, { ...ctx });
+			break;
+		case "agendamento":
+			fields = /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(Field, {
+				label: "Frequência",
+				span: "full",
+				children: /* @__PURE__ */ jsx(Select, {
+					label: "Frequência",
+					options: [
+						{
+							value: "diario",
+							label: "Diário"
+						},
+						{
+							value: "semanal",
+							label: "Semanal"
+						},
+						{
+							value: "mensal",
+							label: "Mensal"
+						}
+					],
+					value: str(cfg.frequency) || "diario",
+					onChange: (v) => set({ frequency: v ?? "diario" })
+				})
+			}), /* @__PURE__ */ jsx(Field, {
+				label: "Horário",
+				span: "full",
+				required: true,
+				children: /* @__PURE__ */ jsx(Input, {
+					type: "time",
+					value: str(cfg.time),
+					onChange: (v) => set({ time: v })
+				})
+			})] });
+			break;
+		case "registro-criado":
+			fields = /* @__PURE__ */ jsx(RadioGroup, {
+				"aria-label": "Registro",
+				options: [
+					{
+						value: "cliente",
+						label: "Cliente"
+					},
+					{
+						value: "pedido",
+						label: "Pedido"
+					},
+					{
+						value: "negocio",
+						label: "Negócio"
+					}
+				],
+				value: str(cfg.record) || "cliente",
+				onChange: (v) => set({ record: v })
+			});
+			break;
+		case "whatsapp":
+			fields = /* @__PURE__ */ jsxs(Fragment$1, { children: [t("to", "Para"), t("message", "Mensagem", { multiline: true })] });
+			break;
+		case "email":
+			fields = /* @__PURE__ */ jsxs(Fragment$1, { children: [
+				t("to", "Para"),
+				t("subject", "Assunto"),
+				t("message", "Mensagem", { multiline: true })
+			] });
+			break;
+		case "tarefa":
+			fields = /* @__PURE__ */ jsxs(Fragment$1, { children: [
+				t("title", "Título"),
 				/* @__PURE__ */ jsx(Field, {
-					label: "Rótulo",
+					label: "Responsável",
 					span: "full",
-					error: draft.label.trim() === "" ? "Informe um rótulo." : void 0,
 					children: /* @__PURE__ */ jsx(Input, {
-						value: draft.label,
-						onChange: (v) => set({ label: v })
+						value: str(cfg.assignee),
+						onChange: (v) => set({ assignee: v })
 					})
 				}),
-				node.type === "espera" && /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(Field, {
-					label: "Duração",
+				/* @__PURE__ */ jsx(Field, {
+					label: "Prazo em dias",
 					span: "full",
-					error: durationError,
 					children: /* @__PURE__ */ jsx(Input, {
-						value: draft.duration,
 						inputMode: "numeric",
-						onChange: (v) => set({ duration: v })
+						value: String(cfg.dueDays ?? ""),
+						onChange: (v) => set({ dueDays: Number(v.replace(/\D/g, "")) || 0 })
 					})
-				}), /* @__PURE__ */ jsx(Field, {
+				})
+			] });
+			break;
+		case "espera":
+			fields = /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(Field, {
+				label: "Duração",
+				span: "full",
+				error: typeof cfg.duration === "number" && cfg.duration > 0 ? void 0 : "Informe um número maior que zero.",
+				children: /* @__PURE__ */ jsx(Input, {
+					inputMode: "numeric",
+					value: cfg.duration === void 0 ? "" : String(cfg.duration),
+					onChange: (v) => set({ duration: Number(v.replace(/\D/g, "")) || 0 })
+				})
+			}), /* @__PURE__ */ jsx(Field, {
+				label: "Unidade",
+				span: "full",
+				children: /* @__PURE__ */ jsx(Select, {
 					label: "Unidade",
-					span: "full",
-					children: /* @__PURE__ */ jsx(Select, {
-						label: "Unidade",
-						options: FLOW_WAIT_UNITS.map((u) => ({
-							value: u,
-							label: u
-						})),
-						value: draft.unit,
-						onChange: (v) => set({ unit: v ?? "minutos" })
-					})
-				})] }),
-				node.type === "condicao" && /* @__PURE__ */ jsxs(Fragment$1, { children: [nextField("Se sim", "sim"), nextField("Se não", "nao")] }),
-				node.type !== "condicao" && node.type !== "fim" && nextField("Próximo bloco", "next")
-			]
+					options: FLOW_WAIT_UNITS.map((u) => ({
+						value: u,
+						label: u
+					})),
+					value: str(cfg.unit) || "minutos",
+					onChange: (v) => set({ unit: v ?? "minutos" })
+				})
+			})] });
+			break;
+		case "condicao": fields = /* @__PURE__ */ jsx(ConditionFields, {
+			...ctx,
+			onApply
+		});
+	}
+	return /* @__PURE__ */ jsxs(FlowPanelShell, {
+		title: FLOW_BLOCKS[node.type].name,
+		onClose,
+		closeLabel: "Fechar configuração",
+		children: [
+			/* @__PURE__ */ jsx(Field, {
+				label: "Nome do bloco",
+				span: "full",
+				children: /* @__PURE__ */ jsx(Input, {
+					value: node.data.label,
+					onChange: (v) => onApply(updateNodeData(flow, node.id, { label: v }))
+				})
+			}),
+			fields,
+			/* @__PURE__ */ jsxs("section", {
+				"aria-label": "Ligações",
+				className: "flex flex-col gap-3 border-t pt-4",
+				children: [/* @__PURE__ */ jsx("h3", {
+					className: "text-xs font-medium text-muted-foreground",
+					children: "Ligações"
+				}), /* @__PURE__ */ jsx(LinkFields, {
+					flow,
+					node,
+					onApply
+				})]
+			})
+		]
+	});
+}
+//#endregion
+//#region src/lib/flow-sim.ts
+function resetSimulation() {
+	return {
+		status: "idle",
+		steps: [],
+		currentId: null,
+		issues: []
+	};
+}
+/** Começa no gatilho. Fluxo inválido não inicia: devolve `error` com os problemas. */
+function startSimulation(input) {
+	const flow = migrateFlow(input);
+	const issues = validateFlow(flow);
+	if (issues.length > 0) return {
+		status: "error",
+		steps: [],
+		currentId: null,
+		issues
+	};
+	return {
+		status: "running",
+		steps: [],
+		currentId: flow.nodes.find((n) => isTrigger(n.type)).id,
+		issues: []
+	};
+}
+/** Avalia uma regra contra os dados de exemplo; campo que não existe conta como vazio. */
+function evaluateRule(rule, data) {
+	const actual = data[rule.field] ?? "";
+	const wanted = rule.value;
+	switch (rule.operator) {
+		case "igual": return actual === wanted;
+		case "diferente": return actual !== wanted;
+		case "maior":
+		case "menor": {
+			const a = Number(actual);
+			const b = Number(wanted);
+			if (actual.trim() === "" || wanted.trim() === "" || Number.isNaN(a) || Number.isNaN(b)) return false;
+			return rule.operator === "maior" ? a > b : a < b;
+		}
+		case "contem": return actual.includes(wanted);
+		case "vazio": return actual === "";
+		case "nao-vazio": return actual !== "";
+	}
+}
+var FREQUENCY = {
+	diario: "todo dia",
+	semanal: "toda semana",
+	mensal: "todo mês"
+};
+/** A regra que bate primeiro (ou `null`, e o caminho segue por "Senão"). */
+function matchedRule(node, data) {
+	const rules = rulesOf(node);
+	const index = rules.findIndex((r) => evaluateRule(r, data));
+	return {
+		rule: index < 0 ? null : rules[index],
+		index
+	};
+}
+function conditionDetail(node, data) {
+	const { rule, index } = matchedRule(node, data);
+	return rule ? `Regra ${index + 1} bateu: ${ruleSummary(rule)}, seguiu por ela` : "Nenhuma regra bateu, seguiu por Senão";
+}
+function blockDetail(node, data) {
+	const c = node.data.config;
+	switch (node.type) {
+		case "webhook-entrada": return `Receberia ${str(c?.method) || "POST"} em ${str(c?.path)}`;
+		case "agendamento": return `Iniciaria ${FREQUENCY[str(c?.frequency)] ?? ""} às ${str(c?.time)}`.replace("  ", " ");
+		case "registro-criado": return `Iniciaria quando um ${(RECORD_LABEL[str(c?.record)] ?? "registro").toLowerCase()} fosse criado`;
+		case "whatsapp": return `Enviaria WhatsApp para ${renderTemplate(str(c?.to), data)}: "${renderTemplate(str(c?.message), data)}"`;
+		case "email": return `Enviaria e-mail para ${renderTemplate(str(c?.to), data)}, assunto "${renderTemplate(str(c?.subject), data)}": "${renderTemplate(str(c?.message), data)}"`;
+		case "espera": return describeWait(c);
+		case "webhook-saida": {
+			const r = buildWebhookRequest(c, data);
+			return `Enviaria ${r.method} ${r.url} com ${JSON.stringify(r.body)}`;
+		}
+		case "tarefa": {
+			const days = typeof c?.dueDays === "number" ? c.dueDays : 0;
+			return `Criaria a tarefa "${renderTemplate(str(c?.title), data)}" para ${str(c?.assignee) || "ninguém"} com prazo de ${days} ${days === 1 ? "dia" : "dias"}`;
+		}
+		case "condicao": return conditionDetail(node, data);
+		default: return "Executaria o bloco";
+	}
+}
+var stepOf = (node, detail) => ({
+	nodeId: node.id,
+	type: node.type,
+	label: nodeName(node),
+	status: "succeeded",
+	detail
+});
+/** Roda só um bloco, com os mesmos dados de exemplo, e devolve o passo (o play do card). */
+function simulateBlock(input, nodeId) {
+	const flow = migrateFlow(input);
+	const node = flow.nodes.find((n) => n.id === nodeId);
+	return node ? stepOf(node, blockDetail(node, flowSampleData(flow))) : null;
+}
+/** Executa o bloco ativo (um passo) e passa ao próximo. A condição escolhe sozinha a saída. */
+function advanceSimulation(input, state) {
+	if (state.status !== "running" || !state.currentId) return state;
+	const flow = migrateFlow(input);
+	const node = flow.nodes.find((n) => n.id === state.currentId);
+	const fail = () => ({
+		...state,
+		status: "error",
+		currentId: null,
+		issues: [{
+			code: "fluxo-mudou",
+			message: "O fluxo mudou durante o teste. Reinicie para testar de novo."
+		}]
+	});
+	if (!node) return fail();
+	const data = flowSampleData(flow);
+	let output;
+	if (node.type === "condicao") output = matchedRule(node, data).rule?.id ?? "senao";
+	const edge = flow.edges.find((e) => e.source === node.id && (e.branch ?? void 0) === output);
+	const target = edge ? flow.nodes.find((n) => n.id === edge.target) : void 0;
+	if (edge && !target) return fail();
+	const detail = blockDetail(node, data);
+	const step = stepOf(node, target ? detail : `${detail}. Caminho encerrado`);
+	const steps = [...state.steps, step];
+	if (!target) return {
+		status: "finished",
+		steps,
+		currentId: null,
+		issues: []
+	};
+	return {
+		status: "running",
+		steps,
+		currentId: target.id,
+		issues: []
+	};
+}
+//#endregion
+//#region src/components/ui/flow-simulation-panel.tsx
+function IssueList({ flow, issues, onViewBlock }) {
+	return /* @__PURE__ */ jsx("ul", {
+		className: "flex flex-col gap-2",
+		children: issues.map((i, k) => {
+			const node = flow.nodes.find((n) => n.id === i.nodeId);
+			return /* @__PURE__ */ jsxs("li", {
+				className: "flex flex-wrap items-center justify-between gap-2 rounded-control border bg-card px-3 py-2 text-sm",
+				children: [/* @__PURE__ */ jsx("span", { children: i.message }), i.nodeId && /* @__PURE__ */ jsx(Button, {
+					size: "sm",
+					variant: "outline",
+					"aria-label": `Ver bloco ${node ? nodeName(node) : i.nodeId}`,
+					onClick: () => onViewBlock(i.nodeId),
+					children: "Ver bloco"
+				})]
+			}, `${i.code}-${i.nodeId ?? i.edgeId ?? k}-${k}`);
 		})
-	}), /* @__PURE__ */ jsx(Modal, {
-		open: discarding,
-		onOpenChange: setDiscarding,
-		type: "destructive",
-		title: "Descartar alterações?",
-		description: "As informações preenchidas neste painel serão perdidas.",
-		confirmLabel: "Descartar",
-		cancelLabel: "Continuar editando",
-		onConfirm: () => onOpenChange(false)
-	})] });
-}
-function SimulationPanel({ flow, sim, onSim, onClose }) {
-	const waiting = sim.status === "waiting-choice";
-	const current = flow.nodes.find((n) => n.id === sim.currentId);
-	const events = sim.steps.map((s, i) => ({
+	});
+}
+function FlowSimulationPanel({ flow, sim, blockStep, onSim, onClose, onViewBlock }) {
+	const events = (sim.steps.length === 0 && blockStep ? [blockStep] : sim.steps).map((s, i) => ({
 		id: `${i}-${s.nodeId}`,
 		title: s.label,
 		description: s.detail,
-		date: `Passo ${i + 1}`,
+		date: blockStep && sim.steps.length === 0 ? "Só este bloco" : `Passo ${i + 1}`,
 		status: s.status
 	}));
-	const choose = (choice) => onSim(advanceSimulation(flow, sim, choice));
-	return /* @__PURE__ */ jsxs(Card, {
-		role: "region",
-		"aria-label": "Teste do fluxo",
-		className: "min-w-0 shrink-0 lg:w-popover",
-		children: [/* @__PURE__ */ jsxs(CardHeader, {
-			actions: /* @__PURE__ */ jsx(Button, {
-				size: "sm",
-				variant: "ghost",
-				iconOnly: true,
-				"aria-label": "Fechar teste",
-				icon: /* @__PURE__ */ jsx(X, {}),
-				onClick: onClose
+	return /* @__PURE__ */ jsxs(FlowPanelShell, {
+		title: "Teste do fluxo",
+		onClose,
+		closeLabel: "Fechar teste",
+		children: [
+			/* @__PURE__ */ jsx(ActionBar, {
+				primary: {
+					label: "Avançar",
+					disabled: sim.status !== "running",
+					onClick: () => onSim(advanceSimulation(flow, sim))
+				},
+				cancel: {
+					label: "Reiniciar",
+					onClick: () => onSim(startSimulation(flow))
+				}
+			}),
+			sim.status === "error" && /* @__PURE__ */ jsxs("div", {
+				className: "flex flex-col gap-3",
+				children: [/* @__PURE__ */ jsx(Alert, {
+					type: "error",
+					title: "O fluxo precisa de ajustes antes do teste"
+				}), /* @__PURE__ */ jsx(IssueList, {
+					flow,
+					issues: sim.issues,
+					onViewBlock
+				})]
+			}),
+			sim.status === "finished" && /* @__PURE__ */ jsxs("p", {
+				role: "status",
+				className: "flex items-center gap-2 text-sm font-medium text-success-soft-foreground",
+				children: [/* @__PURE__ */ jsx(CheckCircle2, {
+					className: "size-icon-md",
+					"aria-hidden": true
+				}), "Fluxo concluído"]
 			}),
-			children: [/* @__PURE__ */ jsx(CardTitle, { children: "Teste do fluxo" }), /* @__PURE__ */ jsx(CardDescription, { children: "Um passo por vez, sem executar nada de verdade." })]
-		}), /* @__PURE__ */ jsxs(CardContent, {
-			className: "flex flex-col gap-4",
+			events.length > 0 && /* @__PURE__ */ jsx(Timeline, { events }),
+			events.length === 0 && sim.status !== "error" && /* @__PURE__ */ jsx("p", {
+				className: "text-sm text-muted-foreground",
+				children: "Nenhum passo executado ainda."
+			})
+		]
+	});
+}
+function FlowValidationPanel({ flow, issues, onClose, onViewBlock }) {
+	return /* @__PURE__ */ jsx(FlowPanelShell, {
+		title: "Validação do fluxo",
+		onClose,
+		closeLabel: "Fechar validação",
+		children: /* @__PURE__ */ jsx("div", {
+			"aria-live": "polite",
+			className: "flex flex-col gap-3",
+			children: issues.length === 0 ? /* @__PURE__ */ jsx(Alert, {
+				type: "success",
+				title: "Fluxo válido"
+			}) : /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(Alert, {
+				type: "error",
+				title: issues.length === 1 ? "1 problema encontrado" : `${issues.length} problemas encontrados`
+			}), /* @__PURE__ */ jsx(IssueList, {
+				flow,
+				issues,
+				onViewBlock
+			})] })
+		})
+	});
+}
+//#endregion
+//#region src/components/ui/flow-editor.tsx
+var DRAG_START = 4;
+var NO_BLOCK = "Exclua um bloco por vez.";
+/** Reaproveita os objetos de nó que não mudaram (a biblioteca guarda medida e seleção neles). */
+function mergeNodes(prev, next) {
+	const old = new Map(prev.map((n) => [n.id, n]));
+	return next.map((n) => {
+		const o = old.get(n.id);
+		if (!o) return n;
+		const a = o.data;
+		const b = n.data;
+		if (!o.dragging && o.position.x === n.position.x && o.position.y === n.position.y && o.ariaLabel === n.ariaLabel && a.label === b.label && a.kind === b.kind && a.config === b.config && a.active === b.active && a.issues.length === b.issues.length && a.issues.every((m, i) => m === b.issues[i])) return o;
+		return {
+			...o,
+			position: o.dragging ? o.position : n.position,
+			ariaLabel: n.ariaLabel,
+			data: b
+		};
+	});
+}
+function mergeEdges(prev, next) {
+	const old = new Map(prev.map((e) => [e.id, e]));
+	return next.map((e) => {
+		const o = old.get(e.id);
+		if (!o) return e;
+		return o.source === e.source && o.target === e.target && o.sourceHandle === e.sourceHandle && o.ariaLabel === e.ariaLabel && o.data?.label === e.data?.label ? o : {
+			...o,
+			...e
+		};
+	});
+}
+/**
+* Excluir bloco: mostra o bloco, onde ele está ligado e duas opções (só este, ou este e tudo o
+* que vem depois), com dupla verificação: a caixa CONFIRMO na primeira, a palavra digitada na
+* segunda. O Modal fica como está: sem a verificação, o botão avisa e o modal continua aberto.
+*/
+function DeleteBlockModal({ flow, nodeId, onClose, onConfirm }) {
+	const node = flow.nodes.find((n) => n.id === nodeId);
+	const [mode, setMode] = useState("so-este");
+	const [checked, setChecked] = useState(false);
+	const [typed, setTyped] = useState("");
+	const [error, setError] = useState(false);
+	const keepOpen = useRef(false);
+	if (!node) return null;
+	const links = describeNodeLinks(flow, node.id);
+	const total = links.descendentes + 1;
+	const verified = mode === "so-este" ? checked : typed.trim().toLowerCase() === "confirmo";
+	const list = (items, empty) => items.length === 0 ? /* @__PURE__ */ jsx("span", {
+		className: "text-muted-foreground",
+		children: empty
+	}) : /* @__PURE__ */ jsx("ul", {
+		className: "flex flex-col gap-1",
+		children: items.map((x) => /* @__PURE__ */ jsxs("li", { children: [nodeName(x.node), x.saida ? /* @__PURE__ */ jsxs("span", {
+			className: "text-muted-foreground",
 			children: [
-				/* @__PURE__ */ jsx(ActionBar, {
-					primary: {
-						label: "Avançar",
-						disabled: sim.status !== "running",
-						onClick: () => onSim(advanceSimulation(flow, sim))
-					},
-					cancel: {
-						label: "Reiniciar",
-						onClick: () => onSim(startSimulation(flow))
-					}
+				" (saída ",
+				x.saida,
+				")"
+			]
+		}) : null] }, x.node.id))
+	});
+	return /* @__PURE__ */ jsx(Modal, {
+		open: true,
+		size: "md",
+		type: "destructive",
+		title: "Excluir este bloco?",
+		description: nodeName(node) === FLOW_TYPE_NAME[node.type] ? nodeName(node) : `${FLOW_TYPE_NAME[node.type]}: ${nodeName(node)}`,
+		confirmLabel: "Excluir",
+		onOpenChange: (open) => {
+			if (open) return;
+			if (keepOpen.current) {
+				keepOpen.current = false;
+				return;
+			}
+			onClose();
+		},
+		onConfirm: () => {
+			if (!verified) {
+				keepOpen.current = true;
+				setError(true);
+				return;
+			}
+			onConfirm(mode);
+		},
+		children: /* @__PURE__ */ jsxs("div", {
+			className: "flex w-full flex-col gap-4 text-left text-sm",
+			children: [
+				/* @__PURE__ */ jsx("p", {
+					className: "text-muted-foreground",
+					children: FLOW_BLOCKS[node.type].description
 				}),
-				sim.status === "error" && /* @__PURE__ */ jsxs("div", {
-					className: "flex flex-col gap-3",
-					children: [/* @__PURE__ */ jsx(Alert, {
-						type: "error",
-						title: "O fluxo precisa de ajustes antes do teste"
-					}), /* @__PURE__ */ jsx("ul", {
-						className: "flex list-disc flex-col gap-1 pl-4 text-sm",
-						children: sim.issues.map((i, k) => /* @__PURE__ */ jsx("li", { children: i.message }, `${i.code}-${k}`))
-					})]
+				/* @__PURE__ */ jsxs("dl", {
+					className: "flex flex-col gap-2",
+					children: [/* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("dt", {
+						className: "text-xs text-muted-foreground",
+						children: "Ligado depois de"
+					}), /* @__PURE__ */ jsx("dd", { children: list(links.anteriores, "Nenhum bloco antes") })] }), /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("dt", {
+						className: "text-xs text-muted-foreground",
+						children: "Ligado antes de"
+					}), /* @__PURE__ */ jsx("dd", { children: list(links.posteriores, "Nenhum bloco depois") })] })]
 				}),
-				waiting && current && /* @__PURE__ */ jsxs("div", {
-					role: "group",
-					"aria-label": "Escolha o caminho da condição",
-					className: "flex flex-col gap-3",
-					children: [/* @__PURE__ */ jsx("p", {
-						className: "text-sm font-medium",
-						children: nodeName(current)
-					}), /* @__PURE__ */ jsxs("div", {
-						className: "grid grid-actions-2 gap-3",
-						children: [/* @__PURE__ */ jsx(Button, {
-							variant: "outline",
-							onClick: () => choose("sim"),
-							children: "Sim"
-						}), /* @__PURE__ */ jsx(Button, {
-							variant: "outline",
-							onClick: () => choose("nao"),
-							children: "Não"
-						})]
-					})]
+				/* @__PURE__ */ jsx(RadioGroup, {
+					"aria-label": "O que excluir",
+					value: mode,
+					onChange: (v) => {
+						setMode(v);
+						setError(false);
+					},
+					options: [{
+						value: "so-este",
+						label: "Excluir só este bloco"
+					}, {
+						value: "daqui-para-frente",
+						label: `Excluir este bloco e tudo o que vem depois dele (${total} ${total === 1 ? "bloco" : "blocos"})`
+					}]
 				}),
-				sim.status === "finished" && /* @__PURE__ */ jsxs("p", {
-					role: "status",
-					className: "flex items-center gap-2 text-sm font-medium text-success-soft-foreground",
-					children: [/* @__PURE__ */ jsx(CheckCircle2, {
-						className: "size-icon-md",
-						"aria-hidden": true
-					}), "Fluxo concluído"]
+				mode === "so-este" ? /* @__PURE__ */ jsx(Checkbox, {
+					checked,
+					onCheckedChange: (v) => {
+						setChecked(v === true);
+						setError(false);
+					},
+					label: "CONFIRMO"
+				}) : /* @__PURE__ */ jsx(Field, {
+					label: "Digite CONFIRMO para excluir",
+					span: "full",
+					children: /* @__PURE__ */ jsx(Input, {
+						value: typed,
+						onChange: (v) => {
+							setTyped(v);
+							setError(false);
+						}
+					})
 				}),
-				events.length > 0 && /* @__PURE__ */ jsx(Timeline, { events }),
-				events.length === 0 && sim.status !== "error" && /* @__PURE__ */ jsx("p", {
-					className: "text-sm text-muted-foreground",
-					children: "Nenhum passo executado ainda."
+				error && /* @__PURE__ */ jsx("p", {
+					role: "alert",
+					className: "font-medium text-destructive",
+					children: mode === "so-este" ? "Marque a caixa CONFIRMO para excluir." : "Digite CONFIRMO para excluir."
 				})
 			]
-		})]
+		})
 	});
 }
-function FlowEditorInner({ value, onChange, readOnly = false, className }) {
+function FlowEditorInner({ value, onChange, readOnly = false, toolbar = true, testOpen: testOpenProp, onTestOpenChange, className }) {
 	const { isMobile } = useBreakpoint();
 	const canEdit = !readOnly;
 	const canBuild = canEdit && !isMobile;
 	const { screenToFlowPosition, fitView } = useReactFlow();
+	const updateNodeInternals = useUpdateNodeInternals();
+	const rootRef = useFillHeight();
 	const canvasRef = useRef(null);
 	const noticeId = useId();
-	const valueRef = useRef(value);
-	valueRef.current = value;
+	const flow = useMemo(() => migrateFlow(value), [value]);
+	const flowRef = useRef(flow);
+	flowRef.current = flow;
 	const everUsed = useRef(/* @__PURE__ */ new Set());
-	value.nodes.forEach((n) => everUsed.current.add(n.id));
-	const [validated, setValidated] = useState(false);
+	flow.nodes.forEach((n) => everUsed.current.add(n.id));
+	const [view, setView] = useState("blocks");
+	const [configId, setConfigId] = useState(null);
+	const [testState, setTestState] = useState(false);
+	const testOpen = testOpenProp ?? testState;
 	const [sim, setSim] = useState(resetSimulation);
+	const [blockStep, setBlockStep] = useState(null);
+	const blockStepRef = useRef(null);
+	blockStepRef.current = blockStep;
+	const [validated, setValidated] = useState(false);
 	const [notice, setNotice] = useState(null);
-	const [drawer, setDrawer] = useState(null);
 	const [drawerOpen, setDrawerOpen] = useState(false);
-	const drawerOpenRef = useRef(false);
-	drawerOpenRef.current = drawerOpen;
 	const [deleting, setDeleting] = useState(null);
+	const deletingRef = useRef(null);
+	deletingRef.current = deleting;
 	const [drag, setDrag] = useState(null);
 	const suppressClick = useRef(false);
-	const issues = useMemo(() => validateFlow(value), [value]);
+	const issues = useMemo(() => validateFlow(flow), [flow]);
 	const shownIssues = validated ? issues : void 0;
-	const activeId = sim.status === "running" || sim.status === "waiting-choice" ? sim.currentId : null;
-	const nextNodes = useMemo(() => toRfNodes(value, {
+	const activeId = sim.status === "running" ? sim.currentId : null;
+	const configNode = configId ? flow.nodes.find((n) => n.id === configId) : void 0;
+	const setTestOpen = useCallback((open) => {
+		setTestState(open);
+		onTestOpenChange?.(open);
+	}, [onTestOpenChange]);
+	const nextNodes = useMemo(() => toRfNodes(flow, {
 		activeId,
-		issues: shownIssues,
-		handles: canBuild ? "lg" : "sm",
-		edit: canBuild
+		issues: shownIssues
 	}), [
-		value,
+		flow,
 		activeId,
-		shownIssues,
-		canBuild
+		shownIssues
 	]);
-	const nextEdges = useMemo(() => toRfEdges(value), [value]);
+	const nextEdges = useMemo(() => toRfEdges(flow), [flow]);
 	const [rfNodes, setRfNodes] = useState(nextNodes);
 	const [rfEdges, setRfEdges] = useState(nextEdges);
 	useEffect(() => setRfNodes((prev) => mergeNodes(prev, nextNodes)), [nextNodes]);
 	useEffect(() => setRfEdges((prev) => mergeEdges(prev, nextEdges)), [nextEdges]);
-	const emit = useCallback((flow) => {
-		setNotice(null);
-		onChange(flow);
+	const ruleKey = flow.nodes.filter((n) => n.type === "condicao").map((n) => `${n.id}:${rulesOf(n).map((r) => r.id).join(",")}`).join("|");
+	useEffect(() => {
+		for (const part of ruleKey.split("|")) if (part) updateNodeInternals(part.split(":")[0]);
+	}, [ruleKey, updateNodeInternals]);
+	const emit = useCallback((next, message) => {
+		setNotice(message ?? null);
+		onChange(next);
 	}, [onChange]);
 	const commitMoves = useCallback((moves) => {
-		let flow = valueRef.current;
+		let next = flowRef.current;
 		for (const m of moves) {
-			const cur = flow.nodes.find((n) => n.id === m.id);
-			if (cur && (cur.position.x !== m.position.x || cur.position.y !== m.position.y)) flow = moveNode(flow, m.id, m.position);
+			const cur = next.nodes.find((n) => n.id === m.id);
+			if (cur && (cur.position.x !== m.position.x || cur.position.y !== m.position.y)) next = moveNode(next, m.id, m.position);
 		}
-		if (flow !== valueRef.current) emit(flow);
+		if (next !== flowRef.current) emit(next);
 	}, [emit]);
 	const onNodesChange = useCallback((changes) => {
 		setRfNodes((nds) => applyNodeChanges(changes.filter((c) => c.type !== "remove"), nds));
@@ -1192,38 +3043,88 @@ function FlowEditorInner({ value, onChange, readOnly = false, className }) {
 		if (moves.length > 0 && canBuild) commitMoves(moves);
 	}, [canBuild, commitMoves]);
 	const onEdgesChange = useCallback((changes) => setRfEdges((eds) => applyEdgeChanges(changes.filter((c) => c.type !== "remove"), eds)), []);
-	const onConnect = useCallback((c) => {
-		if (!c.source || !c.target) return;
-		const branch = c.sourceHandle === "sim" || c.sourceHandle === "nao" ? c.sourceHandle : void 0;
-		const r = connectNodes(valueRef.current, c.source, c.target, branch);
-		if (r.ok) emit(r.flow);
-		else setNotice(r.reason);
+	/** Liga e avisa: o motivo da recusa, ou a ligação trocada. */
+	const connect = useCallback((source, target, branch) => {
+		const r = connectNodes(flowRef.current, source, target, branch);
+		if (!r.ok) setNotice(r.reason);
+		else emit(r.flow, r.replaced ? replacedMessage(flowRef.current, r.replaced) : void 0);
 	}, [emit]);
+	const onConnect = useCallback((c) => {
+		if (c.source && c.target) connect(c.source, c.target, c.sourceHandle ?? void 0);
+	}, [connect]);
+	/** Soltar em qualquer ponto do bloco liga; fora de qualquer bloco, nada acontece. */
+	const onConnectEnd = useCallback((event, state) => {
+		if (state.isValid || !state.fromNode || state.fromHandle?.type !== "source") return;
+		let to = state.toNode?.id;
+		if (!to && typeof document.elementFromPoint === "function") {
+			const p = "changedTouches" in event ? event.changedTouches[0] : event;
+			if (p) to = document.elementFromPoint(p.clientX, p.clientY)?.closest(".react-flow__node")?.getAttribute("data-id") ?? void 0;
+		}
+		if (!to) return;
+		connect(state.fromNode.id, to, state.fromHandle.id ?? void 0);
+	}, [connect]);
+	const showDrawer = () => {
+		if (isMobile) setDrawerOpen(true);
+	};
+	const openBlocks = () => {
+		setView("blocks");
+		setTestOpen(false);
+		showDrawer();
+	};
+	const openConfig = useCallback((id) => {
+		if (!canEdit) return;
+		setConfigId(id);
+		setView("config");
+		setTestOpen(false);
+		if (isMobile) setDrawerOpen(true);
+	}, [
+		canEdit,
+		isMobile,
+		setTestOpen
+	]);
 	const addBlock = useCallback((type, at) => {
-		const flow = valueRef.current;
-		if (type === "gatilho" && flow.nodes.some((n) => n.type === "gatilho")) {
+		const cur = flowRef.current;
+		if (isTrigger(type) && cur.nodes.some((n) => isTrigger(n.type))) {
 			setNotice("Já existe um gatilho neste fluxo.");
 			return;
 		}
-		let pos = at;
-		if (!pos) {
+		const size = {
+			w: 336,
+			h: estimateNodeHeight({
+				type,
+				data: { label: "" }
+			})
+		};
+		let from = at;
+		if (!from) {
 			const rect = canvasRef.current?.getBoundingClientRect();
 			const center = screenToFlowPosition({
 				x: (rect?.left ?? 0) + (rect?.width ?? 0) / 2,
 				y: (rect?.top ?? 0) + (rect?.height ?? 0) / 2
 			});
-			pos = {
-				x: center.x - NODE_W / 2,
-				y: center.y - NODE_H / 2
-			};
-			while (flow.nodes.some((n) => Math.abs(n.position.x - pos.x) < 24 && Math.abs(n.position.y - pos.y) < 24)) pos = {
-				x: pos.x + 24,
-				y: pos.y + 24
+			from = {
+				x: center.x - size.w / 2,
+				y: center.y - size.h / 2
 			};
 		}
-		emit(addNode(flow, type, pos, { reservedIds: everUsed.current }).flow);
-	}, [emit, screenToFlowPosition]);
-	/** Arrastar um item da paleta até o canvas, por pointer events (funciona com mouse e toque). */
+		const measured = Object.fromEntries(rfNodes.flatMap((n) => n.measured?.width && n.measured.height ? [[n.id, {
+			w: n.measured.width,
+			h: n.measured.height
+		}]] : []));
+		const added = addNode(cur, type, findFreePosition(cur, size, from, measured), { reservedIds: everUsed.current });
+		emit(added.flow);
+		setConfigId(added.id);
+		setView("config");
+		setTestOpen(false);
+		if (isMobile) setDrawerOpen(true);
+	}, [
+		emit,
+		isMobile,
+		rfNodes,
+		screenToFlowPosition,
+		setTestOpen
+	]);
+	/** Arrastar um bloco da barra até o canvas, por pointer events (funciona com mouse e toque). */
 	const startPaletteDrag = (e, type) => {
 		if (e.pointerType === "mouse" && e.button !== 0) return;
 		const origin = {
@@ -1263,8 +3164,11 @@ function FlowEditorInner({ value, onChange, readOnly = false, className }) {
 					y: ev.clientY
 				});
 				addBlock(type, {
-					x: p.x - NODE_W / 2,
-					y: p.y - NODE_H / 2
+					x: p.x - 168,
+					y: p.y - estimateNodeHeight({
+						type,
+						data: { label: "" }
+					}) / 2
 				});
 			}
 		};
@@ -1283,14 +3187,6 @@ function FlowEditorInner({ value, onChange, readOnly = false, className }) {
 		window.addEventListener("pointercancel", cancel);
 		window.addEventListener("keydown", key);
 	};
-	const openDrawer = (id) => {
-		if (!canEdit) return;
-		setDrawer((d) => ({
-			id,
-			session: (d?.session ?? 0) + 1
-		}));
-		setDrawerOpen(true);
-	};
 	const viewBlock = (id) => {
 		setRfNodes((nds) => nds.map((n) => n.selected === (n.id === id) ? n : {
 			...n,
@@ -1302,178 +3198,232 @@ function FlowEditorInner({ value, onChange, readOnly = false, className }) {
 			maxZoom: 1
 		});
 	};
-	const startTest = () => setSim(startSimulation(value));
-	const closeTest = () => setSim(resetSimulation());
-	const deleteNode = deleting ? value.nodes.find((n) => n.id === deleting) : void 0;
-	return /* @__PURE__ */ jsxs("div", {
-		"data-rendra": "FLX-001",
-		className: cn("flow-editor flex min-w-0 flex-col gap-4", className),
-		children: [
-			/* @__PURE__ */ jsxs("div", {
-				className: "flex min-w-0 flex-col gap-4 lg:flex-row lg:items-start",
-				children: [/* @__PURE__ */ jsxs(Card, {
-					className: "min-w-0 flex-1",
-					children: [/* @__PURE__ */ jsxs(CardHeader, {
-						actions: /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(Button, {
-							variant: "outline",
-							iconOnly: isMobile,
-							"aria-label": "Validar",
-							icon: /* @__PURE__ */ jsx(ListChecks, {}),
-							onClick: () => setValidated(true),
-							children: isMobile ? null : "Validar"
-						}), /* @__PURE__ */ jsx(Button, {
-							iconOnly: isMobile,
-							"aria-label": "Testar fluxo",
-							icon: /* @__PURE__ */ jsx(FlaskConical, {}),
-							onClick: startTest,
-							children: isMobile ? null : "Testar fluxo"
-						})] }),
-						children: [/* @__PURE__ */ jsx(CardTitle, { children: "Fluxo de automação" }), /* @__PURE__ */ jsx(CardDescription, { children: "Blocos, ligações e teste do caminho." })]
-					}), /* @__PURE__ */ jsxs(CardContent, {
-						className: "flex flex-col gap-4",
-						children: [
-							canBuild && /* @__PURE__ */ jsx("div", {
-								role: "group",
-								"aria-label": "Blocos",
-								className: "flex flex-wrap items-center gap-2",
-								children: FLOW_NODE_TYPES.map((type) => {
-									const Icon = FLOW_ICON[type];
-									return /* @__PURE__ */ jsx(Button, {
-										variant: "outline",
-										size: "sm",
-										icon: /* @__PURE__ */ jsx(Icon, {}),
-										className: "cursor-grab touch-none",
-										onPointerDown: (e) => startPaletteDrag(e, type),
-										onClick: () => {
-											if (suppressClick.current) return;
-											addBlock(type);
-										},
-										children: FLOW_TYPE_NAME[type]
-									}, type);
-								})
-							}),
-							/* @__PURE__ */ jsx("div", {
-								ref: canvasRef,
-								className: "min-w-0",
-								children: /* @__PURE__ */ jsx(FlowSurface, {
-									className: cn(drag?.over && "ring-2 ring-primary"),
-									nodes: rfNodes,
-									edges: rfEdges,
-									onNodesChange,
-									onEdgesChange,
-									onConnect,
-									nodesDraggable: canBuild,
-									nodesConnectable: canBuild,
-									elementsSelectable: canEdit,
-									deleteKeyCode: canEdit ? ["Delete", "Backspace"] : null,
-									onBeforeDelete: async () => canEdit && !drawerOpenRef.current,
-									onDelete: ({ nodes, edges }) => {
-										let flow = valueRef.current;
-										for (const e of edges) flow = removeEdge(flow, e.id);
-										for (const n of nodes) flow = removeNode(flow, n.id);
-										if (flow !== valueRef.current) emit(flow);
-									},
-									onNodeDragStop: (_, __, nodes) => commitMoves(nodes.map((n) => ({
-										id: n.id,
-										position: n.position
-									}))),
-									onNodeClick: (e, node) => {
-										const fromEditButton = e.target.closest("[data-flow-edit]");
-										if (isMobile || fromEditButton) openDrawer(node.id);
-									},
-									onNodeDoubleClick: (_, node) => openDrawer(node.id),
-									onKeyDown: (e) => {
-										const el = e.target;
-										if (e.key === "Enter" && el.classList?.contains("react-flow__node") && el.dataset.id) {
-											e.preventDefault();
-											openDrawer(el.dataset.id);
-										}
+	useEffect(() => {
+		if (testOpen && !blockStepRef.current) setSim((s) => s.status === "idle" ? startSimulation(flowRef.current) : s);
+		if (testOpen && isMobile) setDrawerOpen(true);
+		if (!testOpen) {
+			setSim(resetSimulation());
+			setBlockStep(null);
+		}
+	}, [testOpen, isMobile]);
+	const openTest = () => {
+		setTestOpen(true);
+		showDrawer();
+	};
+	const playBlock = useCallback((id) => {
+		setSim(resetSimulation());
+		const step = simulateBlock(flowRef.current, id);
+		setBlockStep(step);
+		blockStepRef.current = step;
+		setTestOpen(true);
+		if (isMobile) setDrawerOpen(true);
+	}, [isMobile, setTestOpen]);
+	const focusBoard = () => canvasRef.current?.querySelector(".flow-surface")?.focus();
+	const actions = useMemo(() => ({
+		play: playBlock,
+		...canEdit ? {
+			edit: openConfig,
+			remove: (id) => setDeleting(id)
+		} : {},
+		...canBuild ? { removeEdge: (id) => {
+			emit(removeEdge(flowRef.current, id));
+			focusBoard();
+		} } : {}
+	}), [
+		canEdit,
+		canBuild,
+		playBlock,
+		openConfig,
+		emit
+	]);
+	const closeSidebarPanel = () => {
+		setView("blocks");
+		setValidated(false);
+		setDrawerOpen(false);
+	};
+	const panel = testOpen ? /* @__PURE__ */ jsx(FlowSimulationPanel, {
+		flow,
+		sim,
+		blockStep,
+		onSim: (s) => {
+			setBlockStep(null);
+			setSim(s);
+		},
+		onClose: isMobile ? void 0 : () => {
+			setTestOpen(false);
+			setDrawerOpen(false);
+		},
+		onViewBlock: viewBlock
+	}) : view === "validate" ? /* @__PURE__ */ jsx(FlowValidationPanel, {
+		flow,
+		issues,
+		onClose: isMobile ? void 0 : closeSidebarPanel,
+		onViewBlock: viewBlock
+	}) : view === "config" && configNode ? /* @__PURE__ */ jsx(BlockConfigPanel, {
+		flow,
+		nodeId: configNode.id,
+		onApply: (next, message) => emit(next, message),
+		onClose: isMobile ? void 0 : closeSidebarPanel
+	}, configNode.id) : canEdit ? /* @__PURE__ */ jsx(FlowPanelShell, {
+		title: "Adicionar bloco",
+		children: /* @__PURE__ */ jsx(FlowBlockList, {
+			onAdd: (type) => addBlock(type),
+			onDragStart: canBuild ? startPaletteDrag : void 0,
+			suppressClick
+		})
+	}) : null;
+	const sidebarBody = panel && /* @__PURE__ */ jsx("div", {
+		className: "nokey",
+		children: panel
+	});
+	const showAside = !isMobile && sidebarBody !== null;
+	return /* @__PURE__ */ jsx("div", {
+		className: "@container min-w-0",
+		children: /* @__PURE__ */ jsxs("div", {
+			ref: rootRef,
+			"data-rendra": "FLX-001",
+			className: cn("flow-editor flex min-w-0 flex-col overflow-hidden rounded-surface border bg-card @5xl:h-board @5xl:min-h-viewer @5xl:flex-row", className),
+			children: [
+				/* @__PURE__ */ jsxs("div", {
+					ref: canvasRef,
+					className: cn("relative h-board min-w-0 md:h-viewer @5xl:h-full @5xl:flex-1", drag?.over && "ring-2 ring-primary ring-inset"),
+					children: [
+						/* @__PURE__ */ jsx(FlowActionsContext.Provider, {
+							value: actions,
+							children: /* @__PURE__ */ jsx(FlowSurface, {
+								fill: false,
+								nodes: rfNodes,
+								edges: rfEdges,
+								onNodesChange,
+								onEdgesChange,
+								onConnect,
+								onConnectEnd,
+								nodesDraggable: canBuild,
+								nodesConnectable: canBuild,
+								elementsSelectable: canEdit,
+								deleteKeyCode: canEdit ? ["Delete", "Backspace"] : null,
+								onBeforeDelete: async ({ nodes: gone }) => {
+									if (!canEdit || drawerOpen || deletingRef.current) return false;
+									if (gone.length === 0) return true;
+									if (gone.length === 1) setDeleting(gone[0].id);
+									else setNotice(NO_BLOCK);
+									return false;
+								},
+								onDelete: ({ edges: gone }) => {
+									let next = flowRef.current;
+									for (const e of gone) next = removeEdge(next, e.id);
+									if (next !== flowRef.current) emit(next);
+								},
+								onNodeDragStop: (_, __, nodes) => commitMoves(nodes.map((n) => ({
+									id: n.id,
+									position: n.position
+								}))),
+								onNodeClick: (e, node) => {
+									if (e.target.closest("button")) return;
+									openConfig(node.id);
+								},
+								onPaneClick: () => {
+									if (view === "config" && !isMobile) setView("blocks");
+								},
+								onKeyDown: (e) => {
+									const el = e.target;
+									if (e.key === "Enter" && el.classList?.contains("react-flow__node") && el.dataset.id) {
+										e.preventDefault();
+										openConfig(el.dataset.id);
 									}
-								})
-							}),
-							/* @__PURE__ */ jsx("div", {
-								role: "status",
-								"aria-live": "polite",
-								id: noticeId,
-								className: cn(!notice && "sr-only"),
-								children: notice && /* @__PURE__ */ jsx(Alert, {
-									type: "warning",
-									title: notice,
-									onDismiss: () => setNotice(null)
-								})
-							}),
-							validated && /* @__PURE__ */ jsx("section", {
-								"aria-label": "Validação do fluxo",
-								"aria-live": "polite",
-								className: "flex flex-col gap-3",
-								children: issues.length === 0 ? /* @__PURE__ */ jsx(Alert, {
-									type: "success",
-									title: "Fluxo válido"
-								}) : /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(Alert, {
-									type: "error",
-									title: issues.length === 1 ? "1 problema encontrado" : `${issues.length} problemas encontrados`
-								}), /* @__PURE__ */ jsx("ul", {
-									className: "flex flex-col gap-2",
-									children: issues.map((i, k) => /* @__PURE__ */ jsxs("li", {
-										className: "flex flex-wrap items-center justify-between gap-2 rounded-control border bg-card px-3 py-2 text-sm",
-										children: [/* @__PURE__ */ jsx("span", { children: i.message }), i.nodeId && /* @__PURE__ */ jsx(Button, {
-											size: "sm",
-											variant: "outline",
-											"aria-label": `Ver bloco ${nodeName(value.nodes.find((n) => n.id === i.nodeId) ?? {
-												type: "acao",
-												data: { label: i.nodeId }
-											})}`,
-											onClick: () => viewBlock(i.nodeId),
-											children: "Ver bloco"
-										})]
-									}, `${i.code}-${i.nodeId ?? i.edgeId ?? k}`))
-								})] })
+								}
 							})
-						]
-					})]
-				}), sim.status !== "idle" && /* @__PURE__ */ jsx(SimulationPanel, {
-					flow: value,
-					sim,
-					onSim: setSim,
-					onClose: closeTest
-				})]
-			}),
-			drag && /* @__PURE__ */ jsx("div", {
-				"aria-hidden": true,
-				"data-flow-drag": true,
-				className: "pointer-events-none fixed top-0 left-0 z-50 translate-x-(--flow-x) translate-y-(--flow-y) rounded-control border bg-card px-3 py-2 text-sm shadow-md",
-				style: {
-					"--flow-x": `${drag.x}px`,
-					"--flow-y": `${drag.y}px`
-				},
-				children: FLOW_TYPE_NAME[drag.type]
-			}),
-			canEdit && drawer && /* @__PURE__ */ jsx(BlockDrawer, {
-				flow: value,
-				nodeId: drawer.id,
-				open: drawerOpen,
-				onOpenChange: setDrawerOpen,
-				onApply: (flow) => {
-					setDrawerOpen(false);
-					emit(flow);
-				},
-				onDelete: setDeleting
-			}, drawer.session),
-			/* @__PURE__ */ jsx(Modal, {
-				open: Boolean(deleting),
-				onOpenChange: (o) => !o && setDeleting(null),
-				type: "destructive",
-				title: "Excluir este bloco?",
-				description: deleteNode ? `O bloco "${nodeName(deleteNode)}" e as ligações dele serão apagados.` : void 0,
-				confirmLabel: "Excluir",
-				onConfirm: () => {
-					if (!deleting) return;
-					emit(removeNode(valueRef.current, deleting));
-					setDeleting(null);
-					setDrawerOpen(false);
-				}
-			})
-		]
+						}),
+						(toolbar || isMobile && canEdit) && /* @__PURE__ */ jsxs("div", {
+							className: "absolute top-2 right-2 z-10 flex gap-2",
+							children: [isMobile && canEdit && /* @__PURE__ */ jsx(Button, {
+								variant: "outline",
+								iconOnly: true,
+								"aria-label": "Blocos",
+								icon: /* @__PURE__ */ jsx(Plus, {}),
+								onClick: openBlocks
+							}), toolbar && /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(Button, {
+								variant: "outline",
+								iconOnly: isMobile,
+								"aria-label": "Validar",
+								icon: /* @__PURE__ */ jsx(ListChecks, {}),
+								onClick: () => {
+									setValidated(true);
+									setView("validate");
+									setTestOpen(false);
+									showDrawer();
+								},
+								children: isMobile ? null : "Validar"
+							}), /* @__PURE__ */ jsx(Button, {
+								iconOnly: isMobile,
+								"aria-label": "Testar fluxo",
+								icon: /* @__PURE__ */ jsx(FlaskConical, {}),
+								onClick: openTest,
+								children: isMobile ? null : "Testar fluxo"
+							})] })]
+						}),
+						/* @__PURE__ */ jsx("div", {
+							role: "status",
+							"aria-live": "polite",
+							id: noticeId,
+							"data-flow-notice": true,
+							className: cn(notice ? "absolute inset-x-2 top-16 z-10" : "sr-only"),
+							children: notice && /* @__PURE__ */ jsx(Alert, {
+								type: "warning",
+								title: notice,
+								onDismiss: () => setNotice(null)
+							})
+						})
+					]
+				}),
+				showAside && /* @__PURE__ */ jsx("aside", {
+					"aria-label": "Painel do fluxo",
+					className: "w-full shrink-0 scrollbar-subtle border-t p-4 @5xl:h-full @5xl:w-flow-panel @5xl:overflow-y-auto @5xl:border-t-0 @5xl:border-l",
+					children: /* @__PURE__ */ jsx("div", {
+						role: "presentation",
+						onKeyDown: (e) => {
+							if (e.key === "Escape" && view === "config" && !testOpen && !e.target.closest("[role=\"combobox\"],[role=\"listbox\"],[role=\"dialog\"],[data-radix-popper-content-wrapper],[cmdk-root]")) setView("blocks");
+						},
+						children: sidebarBody
+					})
+				}),
+				drag && /* @__PURE__ */ jsx("div", {
+					"aria-hidden": true,
+					"data-flow-drag": true,
+					className: "pointer-events-none fixed top-0 left-0 z-50 translate-x-(--flow-x) translate-y-(--flow-y) rounded-control border bg-card px-3 py-2 text-sm shadow-md",
+					style: {
+						"--flow-x": `${drag.x}px`,
+						"--flow-y": `${drag.y}px`
+					},
+					children: FLOW_TYPE_NAME[drag.type]
+				}),
+				isMobile && sidebarBody !== null && /* @__PURE__ */ jsx(Drawer, {
+					open: drawerOpen,
+					onOpenChange: (open) => {
+						setDrawerOpen(open);
+						if (!open) {
+							if (testOpen) setTestOpen(false);
+							setView("blocks");
+							setValidated(false);
+						}
+					},
+					title: "Fluxo de automação",
+					children: sidebarBody
+				}),
+				canEdit && deleting && /* @__PURE__ */ jsx(DeleteBlockModal, {
+					flow,
+					nodeId: deleting,
+					onClose: () => setDeleting(null),
+					onConfirm: (mode) => {
+						emit(removeNode(flowRef.current, deleting, mode));
+						setDeleting(null);
+						setConfigId((id) => id === deleting ? null : id);
+						setView("blocks");
+						setDrawerOpen(false);
+					}
+				}, deleting)
+			]
+		})
 	});
 }
 function FlowEditor(props) {