@rendra-ui/web 2.5.0 → 2.7.0

package/dist/flow.js

@@ -0,0 +1,1485 @@
+/*! Rendra Design System v2.7.0 | MIT | © 2026 Bruno Magalhaes | brunomagalhaes.me */
+import { t as cn } from "./cn-B0N3Pek0.js";
+import { i as useMotionLib } from "./motion-context-BUMPf0e9.js";
+import { t as useMotionPresets } from "./use-motion-presets-D3ww1oJX.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-BOh7gUdA.js";
+import { t as Button } from "./button-DlzWwpZk.js";
+import { n as useBreakpoint } from "./use-breakpoint-En17oXKY.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";
+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 "@xyflow/react/dist/base.css";
+//#region src/lib/flow.ts
+var FLOW_NODE_TYPES = [
+	"gatilho",
+	"acao",
+	"condicao",
+	"espera",
+	"fim"
+];
+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) {
+	const duration = config?.duration;
+	const unit = config?.unit;
+	if (typeof duration !== "number" || !Number.isFinite(duration) || !isUnit(unit)) return null;
+	return `${duration} ${duration === 1 ? WAIT_SINGULAR[unit] : unit}`;
+}
+/** Texto da espera simulada: nunca espera de verdade. */
+function describeWait(config) {
+	const wait = formatWait(config);
+	return wait ? `Aguardaria ${wait}` : "Aguardaria o tempo definido no bloco";
+}
+/** 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];
+/** 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;
+}
+/** Problemas do fluxo, em ordem estável: a mesma entrada dá sempre a mesma lista. */
+function validateFlow(flow) {
+	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");
+	if (triggers.length === 0) issues.push({
+		code: "sem-gatilho",
+		message: "O fluxo precisa de um bloco Gatilho para começar."
+	});
+	else if (triggers.length > 1) issues.push({
+		code: "varios-gatilhos",
+		message: `O fluxo tem ${triggers.length} gatilhos, mas deve ter só um.`
+	});
+	const sound = [];
+	for (const e of flow.edges) {
+		const from = byId.get(e.source);
+		const to = byId.get(e.target);
+		if (!from || !to) {
+			issues.push({
+				code: "ligacao-invalida",
+				message: "Há uma ligação que aponta para um bloco que não existe.",
+				edgeId: e.id
+			});
+			continue;
+		}
+		if (from.type === "condicao" ? !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.`,
+				nodeId: from.id,
+				edgeId: e.id
+			});
+			continue;
+		}
+		sound.push(e);
+	}
+	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".`,
+				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
+			});
+			if (sim > 1 || nao > 1) issues.push({
+				code: "condicao-saida-repetida",
+				message: `A condição "${name}" tem mais de uma saída para o mesmo ramo.`,
+				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({
+			code: "varias-saidas",
+			message: `O bloco "${name}" tem mais de uma saída; só a condição pode ter.`,
+			nodeId: n.id
+		});
+	}
+	const next = /* @__PURE__ */ new Map();
+	for (const e of sound) next.set(e.source, [...next.get(e.source) ?? [], e.target]);
+	if (triggers.length > 0) {
+		const seen = /* @__PURE__ */ new Set();
+		const stack = triggers.map((t) => t.id);
+		while (stack.length) {
+			const id = stack.pop();
+			if (seen.has(id)) continue;
+			seen.add(id);
+			stack.push(...next.get(id) ?? []);
+		}
+		for (const n of flow.nodes) if (!seen.has(n.id)) issues.push({
+			code: "inalcancavel",
+			message: `O bloco "${nodeName(n)}" não é alcançado a partir do gatilho.`,
+			nodeId: n.id
+		});
+	}
+	const state = /* @__PURE__ */ new Map();
+	const path = [];
+	const visit = (id) => {
+		state.set(id, 1);
+		path.push(id);
+		for (const t of next.get(id) ?? []) if (state.get(t) === 1) {
+			const loop = [...path.slice(path.indexOf(t)), t].map((x) => `"${nodeName(byId.get(x))}"`);
+			issues.push({
+				code: "ciclo",
+				message: `O fluxo volta para um bloco por onde já passou: ${loop.join(" → ")}.`,
+				nodeId: t
+			});
+		} else if (!state.has(t)) visit(t);
+		path.pop();
+		state.set(id, 2);
+	};
+	for (const n of flow.nodes) if (!state.has(n.id)) visit(n.id);
+	return issues;
+}
+var sortKeys = (v) => {
+	if (Array.isArray(v)) return v.map(sortKeys);
+	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) {
+	const nodes = flow.nodes.map((n) => ({
+		id: n.id,
+		type: n.type,
+		position: {
+			x: n.position.x,
+			y: n.position.y
+		},
+		data: n.data.config ? {
+			label: n.data.label,
+			config: sortKeys(n.data.config)
+		} : { label: n.data.label }
+	}));
+	const edges = flow.edges.map((e) => e.branch ? {
+		id: e.id,
+		source: e.source,
+		target: e.target,
+		branch: e.branch
+	} : {
+		id: e.id,
+		source: e.source,
+		target: e.target
+	});
+	return JSON.stringify({
+		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. */
+function parseFlow(text) {
+	let raw;
+	try {
+		raw = JSON.parse(text);
+	} catch {
+		return {
+			ok: false,
+			errors: ["O texto não é um JSON válido."]
+		};
+	}
+	if (!isObject(raw)) return {
+		ok: false,
+		errors: ["O JSON do fluxo precisa ser um objeto."]
+	};
+	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 errors = [];
+	const nodes = [];
+	const ids = /* @__PURE__ */ new Set();
+	raw.nodes.forEach((item, i) => {
+		const at = `Bloco ${i + 1}`;
+		if (!isObject(item)) return void errors.push(`${at}: precisa ser um objeto.`);
+		const { id, type, position, data } = item;
+		let ok = true;
+		if (typeof id !== "string" || id === "") {
+			errors.push(`${at}: falta o "id".`);
+			ok = false;
+		} else if (ids.has(id)) {
+			errors.push(`${at}: o id "${id}" está repetido.`);
+			ok = false;
+		} else ids.add(id);
+		if (!FLOW_NODE_TYPES.includes(type)) {
+			errors.push(`${at}: tipo desconhecido (${String(type)}).`);
+			ok = false;
+		}
+		const pos = isObject(position) ? position : null;
+		if (!pos || typeof pos.x !== "number" || typeof pos.y !== "number" || !Number.isFinite(pos.x) || !Number.isFinite(pos.y)) {
+			errors.push(`${at}: "position" precisa ter "x" e "y" numéricos.`);
+			ok = false;
+		}
+		if (!isObject(data) || typeof data.label !== "string") {
+			errors.push(`${at}: "data.label" precisa ser um texto.`);
+			ok = false;
+		} else if (data.config !== void 0 && !isObject(data.config)) {
+			errors.push(`${at}: "data.config" precisa ser um objeto.`);
+			ok = false;
+		}
+		if (ok) {
+			const d = data;
+			nodes.push({
+				id,
+				type,
+				position: {
+					x: pos.x,
+					y: pos.y
+				},
+				data: d.config ? {
+					label: d.label,
+					config: d.config
+				} : { label: d.label }
+			});
+		}
+	});
+	const edges = [];
+	const edgeIds = /* @__PURE__ */ new Set();
+	raw.edges.forEach((item, i) => {
+		const at = `Ligação ${i + 1}`;
+		if (!isObject(item)) return void errors.push(`${at}: precisa ser um objeto.`);
+		const { id, source, target, branch } = item;
+		let ok = true;
+		for (const [campo, v] of [
+			["id", id],
+			["source", source],
+			["target", target]
+		]) if (typeof v !== "string" || v === "") {
+			errors.push(`${at}: falta o campo "${campo}".`);
+			ok = false;
+		}
+		if (ok && edgeIds.has(id)) {
+			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 (ok) {
+			edgeIds.add(id);
+			edges.push(branch ? {
+				id,
+				source,
+				target,
+				branch
+			} : {
+				id,
+				source,
+				target
+			});
+		}
+	});
+	return errors.length > 0 ? {
+		ok: false,
+		errors
+	} : {
+		ok: true,
+		flow: {
+			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 = {
+		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)
+	};
+}
+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 FlowBlock({ id, data, selected, isConnectable }) {
+	const lib = useMotionLib();
+	const presets = useMotionPresets();
+	const uid = useId();
+	const Icon = FLOW_ICON[data.kind];
+	const wait = data.kind === "espera" ? formatWait(data.config) : null;
+	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 ring = "pointer-events-none absolute -inset-1 rounded-block border-2 border-primary";
+	return /* @__PURE__ */ jsxs("div", {
+		"data-flow-node": true,
+		"data-kind": data.kind,
+		"data-block-id": id,
+		"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"),
+		children: [
+			data.active && (lib ? /* @__PURE__ */ jsx(lib.m.span, {
+				"aria-hidden": true,
+				"data-flow-pulse": true,
+				className: ring,
+				animate: presets.reduced ? { opacity: 1 } : { opacity: [
+					1,
+					.3,
+					1
+				] },
+				transition: presets.reduced ? presets.fade.transition : {
+					duration: presets.tokens.duration.pulse,
+					ease: presets.tokens.ease.inOut,
+					repeat: Infinity
+				}
+			}) : /* @__PURE__ */ jsx("span", {
+				"aria-hidden": true,
+				className: ring
+			})),
+			data.kind !== "gatilho" && /* @__PURE__ */ jsx(Handle, {
+				type: "target",
+				position: Position.Top,
+				className: handle,
+				isConnectable
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "flex items-start gap-3",
+				children: [
+					/* @__PURE__ */ jsx("span", {
+						className: cn("flex size-8 shrink-0 items-center justify-center rounded-block", TONE[data.kind]),
+						children: /* @__PURE__ */ jsx(Icon, {
+							className: "size-icon-md",
+							"aria-hidden": true
+						})
+					}),
+					/* @__PURE__ */ jsxs("div", {
+						className: "flex min-w-0 flex-1 flex-col",
+						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
+							}),
+							wait && /* @__PURE__ */ jsx("span", {
+								className: "text-xs text-muted-foreground",
+								children: wait
+							}),
+							data.active && /* @__PURE__ */ jsx("span", {
+								className: "text-xs font-medium text-primary-text",
+								children: "Ativo"
+							})
+						]
+					}),
+					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, {})
+					})
+				]
+			}),
+			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",
+				children: [
+					/* @__PURE__ */ jsx(TriangleAlert, {
+						className: "size-icon-sm shrink-0",
+						"aria-hidden": true
+					}),
+					/* @__PURE__ */ jsx("strong", { children: "Problema" }),
+					" ",
+					data.issues.join(" ")
+				]
+			}),
+			data.kind === "condicao" && /* @__PURE__ */ jsxs(Fragment$1, { children: [
+				/* @__PURE__ */ jsx("span", {
+					className: "absolute inset-y-0 right-4 flex items-center text-xs font-medium",
+					children: "Sim"
+				}),
+				/* @__PURE__ */ jsx("span", {
+					className: "absolute inset-x-0 bottom-3 text-center text-xs font-medium",
+					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
+			})
+		]
+	});
+}
+var nodeTypes = { bloco: FlowBlock };
+var defaultEdgeOptions = {
+	type: "smoothstep",
+	markerEnd: { type: MarkerType.ArrowClosed }
+};
+var fitViewOptions = {
+	padding: {
+		top: "64px",
+		right: "16px",
+		bottom: "64px",
+		left: "16px"
+	},
+	maxZoom: 1
+};
+/** Aproximar, afastar e enquadrar, com 44 px de toque (os botões da biblioteca têm 26 px). */
+function FlowZoomControls() {
+	const { zoomIn, zoomOut, fitView } = useReactFlow();
+	const cls = "min-h-touch min-w-touch";
+	return /* @__PURE__ */ jsxs("div", {
+		className: "absolute top-2 left-2 z-10 flex gap-2",
+		children: [
+			/* @__PURE__ */ jsx(Button, {
+				variant: "outline",
+				size: "sm",
+				iconOnly: true,
+				"aria-label": "Aproximar",
+				className: cls,
+				icon: /* @__PURE__ */ jsx(ZoomIn, {}),
+				onClick: () => void zoomIn()
+			}),
+			/* @__PURE__ */ jsx(Button, {
+				variant: "outline",
+				size: "sm",
+				iconOnly: true,
+				"aria-label": "Afastar",
+				className: cls,
+				icon: /* @__PURE__ */ jsx(ZoomOut, {}),
+				onClick: () => void zoomOut()
+			}),
+			/* @__PURE__ */ jsx(Button, {
+				variant: "outline",
+				size: "sm",
+				iconOnly: true,
+				"aria-label": "Enquadrar",
+				className: cls,
+				icon: /* @__PURE__ */ jsx(Maximize2, {}),
+				onClick: () => void fitView(fitViewOptions)
+			})
+		]
+	});
+}
+/** Enquadra de novo quando a largura do canvas muda (painel do teste abrindo, janela redimensionada). */
+function FlowAutoFit() {
+	const { fitView } = useReactFlow();
+	const width = useStore((st) => st.width);
+	const before = useRef(0);
+	useEffect(() => {
+		if (before.current > 0 && width > 0 && width !== before.current) fitView(fitViewOptions);
+		if (width > 0) before.current = width;
+	}, [width, fitView]);
+	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 }) {
+	const ref = useFillHeight();
+	return /* @__PURE__ */ jsx("div", {
+		ref,
+		"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),
+		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-attribution-background-color": "var(--rendra-card)",
+			"--xy-background-color": "var(--rendra-muted)"
+		},
+		children: /* @__PURE__ */ jsxs(ReactFlow, {
+			className: "flow-canvas",
+			nodeTypes,
+			defaultEdgeOptions,
+			defaultMarkerColor: "var(--rendra-muted-foreground)",
+			connectionLineType: ConnectionLineType.SmoothStep,
+			ariaLabelConfig: FLOW_ARIA,
+			fitView: true,
+			fitViewOptions,
+			minZoom: .25,
+			maxZoom: 2,
+			zoomOnDoubleClick: false,
+			zoomOnScroll: false,
+			preventScrolling: false,
+			...props,
+			children: [
+				/* @__PURE__ */ jsx(FlowZoomControls, {}),
+				/* @__PURE__ */ jsx(FlowAutoFit, {}),
+				children
+			]
+		})
+	});
+}
+/**
+* Fluxo de automação só para ler: aproximar, afastar e mover o canvas. Não arrasta, não liga,
+* não apaga. Para montar e editar, use o FlowEditor.
+*/
+function FlowViewer({ value, activeId = null, issues, className }) {
+	const nodes = useMemo(() => toRfNodes(value, {
+		activeId,
+		issues,
+		handles: "sm",
+		edit: false
+	}), [
+		value,
+		activeId,
+		issues
+	]);
+	const edges = useMemo(() => toRfEdges(value), [value]);
+	return /* @__PURE__ */ jsx("div", {
+		"data-rendra": "FLX-002",
+		className: cn("flow-viewer min-w-0", className),
+		children: /* @__PURE__ */ jsx(FlowSurface, {
+			nodes,
+			edges,
+			nodesDraggable: false,
+			nodesConnectable: false,
+			elementsSelectable: false,
+			edgesFocusable: false,
+			deleteKeyCode: null
+		})
+	});
+}
+//#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
+		};
+	});
+}
+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";
+	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
+	};
+}
+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
+	});
+	const options = [{
+		value: NONE,
+		label: "Nenhum"
+	}, ...nextCandidates(flow, node.id).map((n) => ({
+		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__ */ 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: [
+				/* @__PURE__ */ jsx(Field, {
+					label: "Rótulo",
+					span: "full",
+					error: draft.label.trim() === "" ? "Informe um rótulo." : void 0,
+					children: /* @__PURE__ */ jsx(Input, {
+						value: draft.label,
+						onChange: (v) => set({ label: v })
+					})
+				}),
+				node.type === "espera" && /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(Field, {
+					label: "Duração",
+					span: "full",
+					error: durationError,
+					children: /* @__PURE__ */ jsx(Input, {
+						value: draft.duration,
+						inputMode: "numeric",
+						onChange: (v) => set({ duration: v })
+					})
+				}), /* @__PURE__ */ jsx(Field, {
+					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")
+			]
+		})
+	}), /* @__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) => ({
+		id: `${i}-${s.nodeId}`,
+		title: s.label,
+		description: s.detail,
+		date: `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
+			}),
+			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",
+			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("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}`))
+					})]
+				}),
+				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"
+						})]
+					})]
+				}),
+				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"]
+				}),
+				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 FlowEditorInner({ value, onChange, readOnly = false, className }) {
+	const { isMobile } = useBreakpoint();
+	const canEdit = !readOnly;
+	const canBuild = canEdit && !isMobile;
+	const { screenToFlowPosition, fitView } = useReactFlow();
+	const canvasRef = useRef(null);
+	const noticeId = useId();
+	const valueRef = useRef(value);
+	valueRef.current = value;
+	const everUsed = useRef(/* @__PURE__ */ new Set());
+	value.nodes.forEach((n) => everUsed.current.add(n.id));
+	const [validated, setValidated] = useState(false);
+	const [sim, setSim] = useState(resetSimulation);
+	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 [drag, setDrag] = useState(null);
+	const suppressClick = useRef(false);
+	const issues = useMemo(() => validateFlow(value), [value]);
+	const shownIssues = validated ? issues : void 0;
+	const activeId = sim.status === "running" || sim.status === "waiting-choice" ? sim.currentId : null;
+	const nextNodes = useMemo(() => toRfNodes(value, {
+		activeId,
+		issues: shownIssues,
+		handles: canBuild ? "lg" : "sm",
+		edit: canBuild
+	}), [
+		value,
+		activeId,
+		shownIssues,
+		canBuild
+	]);
+	const nextEdges = useMemo(() => toRfEdges(value), [value]);
+	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);
+	}, [onChange]);
+	const commitMoves = useCallback((moves) => {
+		let flow = valueRef.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);
+		}
+		if (flow !== valueRef.current) emit(flow);
+	}, [emit]);
+	const onNodesChange = useCallback((changes) => {
+		setRfNodes((nds) => applyNodeChanges(changes.filter((c) => c.type !== "remove"), nds));
+		const moves = changes.flatMap((c) => c.type === "position" && c.dragging === false && c.position ? [{
+			id: c.id,
+			position: c.position
+		}] : []);
+		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);
+	}, [emit]);
+	const addBlock = useCallback((type, at) => {
+		const flow = valueRef.current;
+		if (type === "gatilho" && flow.nodes.some((n) => n.type === "gatilho")) {
+			setNotice("Já existe um gatilho neste fluxo.");
+			return;
+		}
+		let pos = at;
+		if (!pos) {
+			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
+			};
+		}
+		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 startPaletteDrag = (e, type) => {
+		if (e.pointerType === "mouse" && e.button !== 0) return;
+		const origin = {
+			x: e.clientX,
+			y: e.clientY
+		};
+		let moved = false;
+		const inside = (x, y) => {
+			const r = canvasRef.current?.getBoundingClientRect();
+			return !!r && x >= r.left && x <= r.right && y >= r.top && y <= r.bottom;
+		};
+		const stop = () => {
+			window.removeEventListener("pointermove", move);
+			window.removeEventListener("pointerup", up);
+			window.removeEventListener("pointercancel", cancel);
+			window.removeEventListener("keydown", key);
+			setDrag(null);
+		};
+		const move = (ev) => {
+			if (!moved && Math.hypot(ev.clientX - origin.x, ev.clientY - origin.y) < DRAG_START) return;
+			moved = true;
+			setDrag({
+				type,
+				x: ev.clientX,
+				y: ev.clientY,
+				over: inside(ev.clientX, ev.clientY)
+			});
+		};
+		const up = (ev) => {
+			stop();
+			if (!moved) return;
+			suppressClick.current = true;
+			setTimeout(() => suppressClick.current = false, 0);
+			if (inside(ev.clientX, ev.clientY)) {
+				const p = screenToFlowPosition({
+					x: ev.clientX,
+					y: ev.clientY
+				});
+				addBlock(type, {
+					x: p.x - NODE_W / 2,
+					y: p.y - NODE_H / 2
+				});
+			}
+		};
+		const cancel = () => {
+			stop();
+			if (moved) {
+				suppressClick.current = true;
+				setTimeout(() => suppressClick.current = false, 0);
+			}
+		};
+		const key = (ev) => {
+			if (ev.key === "Escape") cancel();
+		};
+		window.addEventListener("pointermove", move);
+		window.addEventListener("pointerup", up);
+		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,
+			selected: n.id === id
+		}));
+		fitView({
+			nodes: [{ id }],
+			padding: .5,
+			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);
+										}
+									}
+								})
+							}),
+							/* @__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);
+				}
+			})
+		]
+	});
+}
+function FlowEditor(props) {
+	return /* @__PURE__ */ jsx(ReactFlowProvider, { children: /* @__PURE__ */ jsx(FlowEditorInner, { ...props }) });
+}
+//#endregion
+export { FlowEditor, FlowViewer, parseFlow, serializeFlow, validateFlow };
+
+//# sourceMappingURL=flow.js.map