@dou-ui/flow 0.0.0-stage → 0.1.0-alpha.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 daidr
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,3 +1,11 @@
-# Temporary Holding Version
+# @dou-ui/flow
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+[DouUI](https://github.com/daidr/dou-ui) 的流程编辑器与白板：在无限画布上拖动节点、连接端口，支持分组、导出图片与协同编辑。
+
+```sh
+bun add @dou-ui/flow dou-ui
+```
+
+用法见 [文档](https://ui.daidr.me/flow/)。
+
+许可证：MIT

package/dist/collaboration/index.js

@@ -0,0 +1,360 @@
+import { defineFlowExtension } from "../core/extension.js";
+import { createPeers } from "./peers.js";
+import { collaborationColors } from "dou-ui";
+import { toRaw, watch } from "vue";
+import * as Y from "yjs";
+// src/collaboration/index.ts
+/** Whether a group is folded is each person's own view: it stays out of the shared document. */
+var LOCAL_DATA = "collapsed";
+var same = (a, b) => a === b || typeof a === "object" && JSON.stringify(a) === JSON.stringify(b);
+/** `data` as it is shared: without the local fields. */
+function sharedData(data) {
+	if (!data || typeof data !== "object" || !(LOCAL_DATA in data)) return data;
+	const { [LOCAL_DATA]: _, ...rest } = data;
+	return rest;
+}
+/** A node or edge as the map holds it, or `null` when it holds none. */
+function read(map, id) {
+	const fields = map.get(id);
+	if (!(fields instanceof Y.Map)) return null;
+	return {
+		...fields.toJSON(),
+		id
+	};
+}
+/** Where in `value` something JSON can't carry sits, e.g. a component or a function. */
+function unshareable(value, path) {
+	if (value === null || [
+		"string",
+		"number",
+		"boolean",
+		"undefined"
+	].includes(typeof value)) return null;
+	if (typeof value !== "object") return path;
+	const proto = Object.getPrototypeOf(value);
+	if (Array.isArray(value)) {
+		for (const [i, item] of value.entries()) {
+			const found = unshareable(item, `${path}[${i}]`);
+			if (found) return found;
+		}
+		return null;
+	}
+	if (proto !== Object.prototype && proto !== null) return path;
+	for (const [key, item] of Object.entries(value)) {
+		const found = unshareable(item, `${path}.${key}`);
+		if (found) return found;
+	}
+	return null;
+}
+var warned = /* @__PURE__ */ new Set();
+/** Others would get a broken copy of such a value while this editor shows it fine. */
+function warnUnshareable(id, key, value) {
+	if (process.env.NODE_ENV === "production") return;
+	const path = unshareable(value, key);
+	if (!path || warned.has(`${id}:${path}`)) return;
+	warned.add(`${id}:${path}`);
+	console.warn(`[@dou-ui/flow] "${id}" has ${path}, which can't be shared: only JSON values reach the others. Store a name and look the component or function up where it is drawn.`);
+}
+var warnedDataUrl = false;
+/** A data URL goes into the shared document whole, to everyone, every time it loads. */
+function warnDataUrl(data) {
+	if (process.env.NODE_ENV === "production" || warnedDataUrl || !data || typeof data !== "object") return;
+	for (const value of Object.values(data)) if (typeof value === "string" && value.length > 1e5 && value.startsWith("data:")) {
+		warnedDataUrl = true;
+		console.warn(`[@dou-ui/flow] a node keeps a data URL of ${Math.round(value.length / 1024)} KB, which every collaborator downloads with the document. Upload such files and keep their address instead, e.g. whiteboardKit({ upload }).`);
+		return;
+	}
+}
+/** Writes a node's or edge's fields, only those that changed; `keys` limits which. */
+function write(map, value, keys) {
+	const item = value;
+	const existing = map.get(value.id);
+	const fields = existing instanceof Y.Map ? existing : new Y.Map();
+	const fresh = existing !== fields;
+	for (const [key, raw] of Object.entries(item)) {
+		if (key === "id" || raw === void 0 || keys && !fresh && !keys.has(key)) continue;
+		const field = key === "data" ? sharedData(raw) : raw;
+		warnUnshareable(value.id, key, field);
+		if (key === "data") warnDataUrl(field);
+		if (fresh || !same(fields.get(key), field)) fields.set(key, field);
+	}
+	if (fresh) return void map.set(value.id, fields);
+	for (const key of Array.from(fields.keys())) if (item[key] === void 0 && (!keys || keys.has(key))) fields.delete(key);
+}
+/** The change that makes `local` match `shared`, leaving out `skip` and the local fields. */
+function patchFor(local, shared, skip) {
+	const a = local;
+	const b = shared;
+	const patch = {};
+	for (const key of /* @__PURE__ */ new Set([...Object.keys(a), ...Object.keys(b)])) {
+		if (key === "id" || skip?.has(key)) continue;
+		if (key === "data") {
+			if (same(sharedData(a.data), b.data)) continue;
+			const mine = a.data?.[LOCAL_DATA];
+			patch.data = mine === void 0 ? b.data : {
+				...b.data,
+				[LOCAL_DATA]: mine
+			};
+		} else if (!same(a[key], b[key])) patch[key] = b[key];
+	}
+	return Object.keys(patch).length ? patch : null;
+}
+/**
+* Writes nodes and edges into empty maps, e.g. when a flow that so far was
+* saved as JSON starts being edited together. Do it once, where the shared
+* document is created.
+*/
+function fillMaps(maps, doc) {
+	const fill = () => {
+		for (const node of doc.nodes) write(maps.nodes, node);
+		for (const edge of doc.edges) write(maps.edges, edge);
+	};
+	const ydoc = maps.nodes.doc;
+	if (ydoc) ydoc.transact(fill);
+	else fill();
+}
+/** The fields `touched` holds for an item, when it holds only some. */
+function heldKeys(touched, id) {
+	const keys = touched.get(id);
+	return keys === true ? void 0 : keys;
+}
+function mark(into, id, keys) {
+	const current = into.get(id);
+	if (current === true) return;
+	if (keys === true) return void into.set(id, true);
+	const set = current ?? /* @__PURE__ */ new Set();
+	for (const key of keys) set.add(key);
+	into.set(id, set);
+}
+/** The nodes and edges a transaction added, removed or changed, with the fields it changed. */
+function touch(steps, into) {
+	for (const step of steps) if (step.type === "addNode") mark(into.nodes, step.node.id, true);
+	else if (step.type === "removeNode") mark(into.nodes, step.id, true);
+	else if (step.type === "updateNode") mark(into.nodes, step.id, Object.keys(step.patch));
+	else if (step.type === "addEdge") mark(into.edges, step.edge.id, true);
+	else if (step.type === "removeEdge") mark(into.edges, step.id, true);
+	else mark(into.edges, step.id, Object.keys(step.patch));
+}
+/**
+* Edit a flow together through a Yjs document. Nodes and edges live in two
+* `Y.Map`s, each field on its own, so two people changing different fields
+* of one node both keep their change. The editor's `v-model` only mirrors
+* them: changes made to `v-model` from outside are not written back. While
+* someone drags, the others see an outline; the document changes once they
+* let go. Undo only takes back this user's own changes. Folding a group
+* stays local.
+*/
+function collaboration(options) {
+	const { nodes, edges } = options;
+	const ydoc = nodes.doc;
+	if (!ydoc || edges.doc !== ydoc) throw new Error("[@dou-ui/flow] nodes and edges must be maps of the same Y.Doc");
+	const { awareness, user } = options;
+	if (awareness && user) {
+		const color = user.color ?? collaborationColors[ydoc.clientID % collaborationColors.length];
+		awareness.setLocalStateField("user", {
+			name: user.name,
+			color
+		});
+	}
+	/** This editor's own changes, which undo can take back. */
+	const tracked = { flow: "tracked" };
+	/** Changes that undo leaves alone, e.g. filling the maps or clearing dangling edges. */
+	const untracked = { flow: "untracked" };
+	const undoManager = new Y.UndoManager([nodes, edges], {
+		trackedOrigins: /* @__PURE__ */ new Set([tracked]),
+		captureTimeout: 500
+	});
+	/** Set while shared changes are applied to the editor, so they aren't written back. */
+	let applying = false;
+	/** What undo or redo is running, to name the change. */
+	let travelling = null;
+	let lastGroup;
+	/** What changed during the current drag, written once it ends. */
+	const held = {
+		nodes: /* @__PURE__ */ new Map(),
+		edges: /* @__PURE__ */ new Map(),
+		tracking: false
+	};
+	function writeChanges(doc, changed, tracking) {
+		const nodeById = new Map(doc.nodes.map((node) => [node.id, node]));
+		const edgeById = new Map(doc.edges.map((edge) => [edge.id, edge]));
+		ydoc.transact(() => {
+			for (const [id, keys] of changed.nodes) {
+				const node = nodeById.get(id);
+				if (node) write(nodes, node, keys === true ? void 0 : keys);
+				else nodes.delete(id);
+			}
+			for (const [id, keys] of changed.edges) {
+				const edge = edgeById.get(id);
+				if (edge) write(edges, edge, keys === true ? void 0 : keys);
+				else edges.delete(id);
+			}
+		}, tracking ? tracked : untracked);
+	}
+	/** Writes what a drag changed, as one undo step. */
+	function release(context) {
+		if (!held.nodes.size && !held.edges.size) return;
+		if (held.tracking) undoManager.stopCapturing();
+		writeChanges(toRaw(context.doc.value), held, held.tracking);
+		if (held.tracking) undoManager.stopCapturing();
+		lastGroup = void 0;
+		held.nodes.clear();
+		held.edges.clear();
+		held.tracking = false;
+	}
+	/**
+	* Adds steps to `tr` that bring the given nodes and edges in line with the
+	* maps; returns edges left without a node, to clear from the maps.
+	*/
+	function pull(tr, nodeIds, edgeIds) {
+		for (const id of nodeIds) {
+			const shared = read(nodes, id);
+			const local = tr.getNode(id);
+			if (held.nodes.get(id) === true) continue;
+			if (!shared) {
+				if (local) tr.removeNode(id);
+			} else if (!local) tr.addNode(shared);
+			else {
+				const patch = patchFor(local, shared, heldKeys(held.nodes, id));
+				if (patch) tr.updateNode(id, patch);
+			}
+		}
+		for (const id of edgeIds) {
+			const shared = read(edges, id);
+			const local = tr.getEdge(id);
+			if (held.edges.get(id) === true) continue;
+			if (!shared) {
+				if (local) tr.removeEdge(id);
+			} else if (!local) tr.addEdge(shared);
+			else {
+				const patch = patchFor(local, shared, heldKeys(held.edges, id));
+				if (patch) tr.updateEdge(id, patch);
+			}
+		}
+		const dangling = [];
+		for (const edge of tr.doc.edges) if (!tr.getNode(edge.source.node) || !tr.getNode(edge.target.node)) dangling.push(edge.id);
+		for (const id of dangling) tr.removeEdge(id);
+		return dangling;
+	}
+	return defineFlowExtension({
+		name: "collaboration",
+		priority: 0,
+		transaction(tr, context) {
+			if (applying) return;
+			const tracking = tr.meta.history !== false;
+			if (context.gesturing.value) {
+				touch(tr.steps, held);
+				held.tracking ||= tracking;
+				return;
+			}
+			const changed = {
+				nodes: /* @__PURE__ */ new Map(),
+				edges: /* @__PURE__ */ new Map()
+			};
+			touch(tr.steps, changed);
+			if (tracking && (!tr.meta.group || tr.meta.group !== lastGroup)) undoManager.stopCapturing();
+			if (tracking) lastGroup = tr.meta.group;
+			writeChanges(tr.doc, changed, tracking);
+		},
+		history: () => ({
+			undo: () => run("undo"),
+			redo: () => run("redo"),
+			canUndo: () => undoManager.undoStack.length > 0,
+			canRedo: () => undoManager.redoStack.length > 0
+		}),
+		layers: awareness ? { above: [createPeers(awareness)] } : void 0,
+		setup(context) {
+			const apply = (fn, origin) => {
+				let dangling = [];
+				applying = true;
+				try {
+					context.transact((tr) => dangling = fn(tr), {
+						history: false,
+						origin
+					});
+				} finally {
+					applying = false;
+				}
+				if (dangling.length) queueMicrotask(() => ydoc.transact(() => {
+					for (const id of dangling) edges.delete(id);
+				}, untracked));
+			};
+			const current = () => toRaw(context.doc.value);
+			if (!nodes.size && !edges.size) ydoc.transact(() => fillMaps({
+				nodes,
+				edges
+			}, current()), untracked);
+			const doc = current();
+			apply((tr) => pull(tr, /* @__PURE__ */ new Set([...doc.nodes.map((node) => node.id), ...nodes.keys()]), /* @__PURE__ */ new Set([...doc.edges.map((edge) => edge.id), ...edges.keys()])), "remote");
+			const pending = {
+				nodes: /* @__PURE__ */ new Set(),
+				edges: /* @__PURE__ */ new Set()
+			};
+			const gather = (map, into) => (events, transaction) => {
+				if (transaction.origin === tracked || transaction.origin === untracked) return;
+				for (const event of events) if (event.target === map) for (const key of event.changes.keys.keys()) into.add(key);
+				else if (event.path.length) into.add(String(event.path[0]));
+			};
+			const onNodes = gather(nodes, pending.nodes);
+			const onEdges = gather(edges, pending.edges);
+			const flush = () => {
+				if (!pending.nodes.size && !pending.edges.size) return;
+				const nodeIds = [...pending.nodes];
+				const edgeIds = [...pending.edges];
+				pending.nodes.clear();
+				pending.edges.clear();
+				apply((tr) => pull(tr, nodeIds, edgeIds), travelling ?? "remote");
+			};
+			nodes.observeDeep(onNodes);
+			edges.observeDeep(onEdges);
+			ydoc.on("afterTransaction", flush);
+			const stopRelease = watch(context.gesturing, (on) => !on && release(context), { flush: "sync" });
+			let stopPresence;
+			if (awareness) stopPresence = watch([
+				context.gesturing,
+				context.doc,
+				context.selection,
+				context.connectingPath
+			], ([on, , selection, path]) => {
+				const moving = [];
+				if (on) for (const id of held.nodes.keys()) {
+					if (moving.length >= 100) break;
+					const rect = context.getNodeRect(id);
+					if (rect) moving.push({
+						id,
+						...rect
+					});
+				}
+				awareness.setLocalStateField("flow", {
+					moving,
+					selection: {
+						nodes: selection.nodes.slice(0, 100),
+						edges: selection.edges.slice(0, 100)
+					},
+					path
+				});
+			}, { immediate: true });
+			return () => {
+				nodes.unobserveDeep(onNodes);
+				edges.unobserveDeep(onEdges);
+				ydoc.off("afterTransaction", flush);
+				stopRelease();
+				stopPresence?.();
+				awareness?.setLocalStateField("flow", null);
+			};
+		}
+	});
+	function run(action) {
+		if (!(action === "undo" ? undoManager.undoStack : undoManager.redoStack).length) return false;
+		travelling = action;
+		try {
+			undoManager[action]();
+		} finally {
+			travelling = null;
+		}
+		return true;
+	}
+}
+export { collaboration, collaborationColors, fillMaps };
+
+//# sourceMappingURL=index.js.map

package/dist/collaboration/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../../src/collaboration/index.ts"],"sourcesContent":["import { collaborationColors } from 'dou-ui'\nimport { toRaw, watch } from 'vue'\nimport * as Y from 'yjs'\nimport type { FlowEditorContext } from '../context'\nimport { defineFlowExtension, type FlowExtension } from '../core/extension'\nimport type { FlowDocument, FlowEdge, FlowNode } from '../core/model'\nimport type { FlowStep, FlowTransaction } from '../core/transaction'\nimport { createPeers, type AwarenessLike, type FlowPresence } from './peers'\n\n/** How the people editing together see each other. */\nexport interface CollaborationUser {\n  name: string\n  /** The color of this user's outlines, any CSS color. Picked from the client id when left out. */\n  color?: string\n}\n\nexport interface CollaborationOptions {\n  /** Where the nodes live, e.g. `ydoc.getMap('nodes')`. */\n  nodes: Y.Map<unknown>\n  /** Where the edges live, e.g. `ydoc.getMap('edges')`; in the same `Y.Doc` as `nodes`. */\n  edges: Y.Map<unknown>\n  /** Shares what each person selects, drags and connects (`y-protocols/awareness`). */\n  awareness?: AwarenessLike\n  /** This user, shown to the others. Needs `awareness`. */\n  user?: CollaborationUser\n}\n\nexport { collaborationColors }\n\ntype Shared = Y.Map<unknown>\ntype Item = Record<string, unknown>\n/** The fields of one node or edge a change touched; `true` for all of them. */\ntype Touched = Map<string, Set<string> | true>\n\n/** Whether a group is folded is each person's own view: it stays out of the shared document. */\nconst LOCAL_DATA = 'collapsed'\n\nconst same = (a: unknown, b: unknown) =>\n  a === b || (typeof a === 'object' && JSON.stringify(a) === JSON.stringify(b))\n\n/** `data` as it is shared: without the local fields. */\nfunction sharedData(data: unknown) {\n  if (!data || typeof data !== 'object' || !(LOCAL_DATA in data)) return data\n  const { [LOCAL_DATA]: _, ...rest } = data as Item\n  return rest\n}\n\n/** A node or edge as the map holds it, or `null` when it holds none. */\nfunction read<T>(map: Shared, id: string): T | null {\n  const fields = map.get(id)\n  if (!(fields instanceof Y.Map)) return null\n  return { ...(fields.toJSON() as Item), id } as T\n}\n\n/** Where in `value` something JSON can't carry sits, e.g. a component or a function. */\nfunction unshareable(value: unknown, path: string): string | null {\n  if (value === null || ['string', 'number', 'boolean', 'undefined'].includes(typeof value))\n    return null\n  if (typeof value !== 'object') return path\n  const proto = Object.getPrototypeOf(value)\n  if (Array.isArray(value)) {\n    for (const [i, item] of value.entries()) {\n      const found = unshareable(item, `${path}[${i}]`)\n      if (found) return found\n    }\n    return null\n  }\n  if (proto !== Object.prototype && proto !== null) return path\n  for (const [key, item] of Object.entries(value)) {\n    const found = unshareable(item, `${path}.${key}`)\n    if (found) return found\n  }\n  return null\n}\n\nconst warned = new Set<string>()\n/** Others would get a broken copy of such a value while this editor shows it fine. */\nfunction warnUnshareable(id: string, key: string, value: unknown) {\n  // the app's bundler replaces this, as for Vue's own warnings\n  if (process.env.NODE_ENV === 'production') return\n  const path = unshareable(value, key)\n  if (!path || warned.has(`${id}:${path}`)) return\n  warned.add(`${id}:${path}`)\n  console.warn(\n    `[@dou-ui/flow] \"${id}\" has ${path}, which can't be shared: only JSON values reach the others. Store a name and look the component or function up where it is drawn.`,\n  )\n}\n\nlet warnedDataUrl = false\n/** A data URL goes into the shared document whole, to everyone, every time it loads. */\nfunction warnDataUrl(data: unknown) {\n  if (process.env.NODE_ENV === 'production' || warnedDataUrl || !data || typeof data !== 'object')\n    return\n  for (const value of Object.values(data))\n    if (typeof value === 'string' && value.length > 100_000 && value.startsWith('data:')) {\n      warnedDataUrl = true\n      console.warn(\n        `[@dou-ui/flow] a node keeps a data URL of ${Math.round(value.length / 1024)} KB, which every collaborator downloads with the document. Upload such files and keep their address instead, e.g. whiteboardKit({ upload }).`,\n      )\n      return\n    }\n}\n\n/** Writes a node's or edge's fields, only those that changed; `keys` limits which. */\nfunction write(map: Shared, value: FlowNode | FlowEdge, keys?: Set<string>) {\n  const item = value as unknown as Item\n  const existing = map.get(value.id)\n  const fields: Shared = existing instanceof Y.Map ? existing : new Y.Map<unknown>()\n  const fresh = existing !== fields\n  for (const [key, raw] of Object.entries(item)) {\n    if (key === 'id' || raw === undefined || (keys && !fresh && !keys.has(key))) continue\n    const field = key === 'data' ? sharedData(raw) : raw\n    warnUnshareable(value.id, key, field)\n    if (key === 'data') warnDataUrl(field)\n    // a new map can't be read before it is in the document\n    if (fresh || !same(fields.get(key), field)) fields.set(key, field)\n  }\n  if (fresh) return void map.set(value.id, fields)\n  for (const key of Array.from(fields.keys()))\n    if (item[key] === undefined && (!keys || keys.has(key))) fields.delete(key)\n}\n\n/** The change that makes `local` match `shared`, leaving out `skip` and the local fields. */\nfunction patchFor<T extends object>(local: T, shared: T, skip?: Set<string>) {\n  const a = local as Item\n  const b = shared as Item\n  const patch: Item = {}\n  for (const key of new Set([...Object.keys(a), ...Object.keys(b)])) {\n    if (key === 'id' || skip?.has(key)) continue\n    if (key === 'data') {\n      if (same(sharedData(a.data), b.data)) continue\n      // keep this person's folding\n      const mine = (a.data as Item | undefined)?.[LOCAL_DATA]\n      patch.data = mine === undefined ? b.data : { ...(b.data as Item), [LOCAL_DATA]: mine }\n    } else if (!same(a[key], b[key])) patch[key] = b[key]\n  }\n  return Object.keys(patch).length ? (patch as Partial<T>) : null\n}\n\n/**\n * Writes nodes and edges into empty maps, e.g. when a flow that so far was\n * saved as JSON starts being edited together. Do it once, where the shared\n * document is created.\n */\nexport function fillMaps(\n  maps: { nodes: Y.Map<unknown>; edges: Y.Map<unknown> },\n  doc: FlowDocument,\n) {\n  const fill = () => {\n    for (const node of doc.nodes) write(maps.nodes, node)\n    for (const edge of doc.edges) write(maps.edges, edge)\n  }\n  const ydoc = maps.nodes.doc\n  if (ydoc) ydoc.transact(fill)\n  else fill()\n}\n\n/** The fields `touched` holds for an item, when it holds only some. */\nfunction heldKeys(touched: Touched, id: string) {\n  const keys = touched.get(id)\n  return keys === true ? undefined : keys\n}\n\nfunction mark(into: Touched, id: string, keys: string[] | true) {\n  const current = into.get(id)\n  if (current === true) return\n  if (keys === true) return void into.set(id, true)\n  const set = current ?? new Set<string>()\n  for (const key of keys) set.add(key)\n  into.set(id, set)\n}\n\n/** The nodes and edges a transaction added, removed or changed, with the fields it changed. */\nfunction touch(steps: readonly FlowStep[], into: { nodes: Touched; edges: Touched }) {\n  for (const step of steps) {\n    if (step.type === 'addNode') mark(into.nodes, step.node.id, true)\n    else if (step.type === 'removeNode') mark(into.nodes, step.id, true)\n    else if (step.type === 'updateNode') mark(into.nodes, step.id, Object.keys(step.patch))\n    else if (step.type === 'addEdge') mark(into.edges, step.edge.id, true)\n    else if (step.type === 'removeEdge') mark(into.edges, step.id, true)\n    else mark(into.edges, step.id, Object.keys(step.patch))\n  }\n}\n\n/**\n * Edit a flow together through a Yjs document. Nodes and edges live in two\n * `Y.Map`s, each field on its own, so two people changing different fields\n * of one node both keep their change. The editor's `v-model` only mirrors\n * them: changes made to `v-model` from outside are not written back. While\n * someone drags, the others see an outline; the document changes once they\n * let go. Undo only takes back this user's own changes. Folding a group\n * stays local.\n */\nexport function collaboration(options: CollaborationOptions): FlowExtension {\n  const { nodes, edges } = options\n  const ydoc = nodes.doc\n  if (!ydoc || edges.doc !== ydoc)\n    throw new Error('[@dou-ui/flow] nodes and edges must be maps of the same Y.Doc')\n  const { awareness, user } = options\n  if (awareness && user) {\n    const color = user.color ?? collaborationColors[ydoc.clientID % collaborationColors.length]\n    awareness.setLocalStateField('user', { name: user.name, color })\n  }\n\n  /** This editor's own changes, which undo can take back. */\n  const tracked = { flow: 'tracked' }\n  /** Changes that undo leaves alone, e.g. filling the maps or clearing dangling edges. */\n  const untracked = { flow: 'untracked' }\n  const undoManager = new Y.UndoManager([nodes, edges], {\n    trackedOrigins: new Set([tracked]),\n    captureTimeout: 500,\n  })\n  /** Set while shared changes are applied to the editor, so they aren't written back. */\n  let applying = false\n  /** What undo or redo is running, to name the change. */\n  let travelling: 'undo' | 'redo' | null = null\n  let lastGroup: string | undefined\n  /** What changed during the current drag, written once it ends. */\n  const held = { nodes: new Map() as Touched, edges: new Map() as Touched, tracking: false }\n\n  function writeChanges(\n    doc: FlowDocument,\n    changed: { nodes: Touched; edges: Touched },\n    tracking: boolean,\n  ) {\n    const nodeById = new Map(doc.nodes.map((node) => [node.id, node]))\n    const edgeById = new Map(doc.edges.map((edge) => [edge.id, edge]))\n    ydoc!.transact(\n      () => {\n        for (const [id, keys] of changed.nodes) {\n          const node = nodeById.get(id)\n          if (node) write(nodes, node, keys === true ? undefined : keys)\n          else nodes.delete(id)\n        }\n        for (const [id, keys] of changed.edges) {\n          const edge = edgeById.get(id)\n          if (edge) write(edges, edge, keys === true ? undefined : keys)\n          else edges.delete(id)\n        }\n      },\n      tracking ? tracked : untracked,\n    )\n  }\n\n  /** Writes what a drag changed, as one undo step. */\n  function release(context: FlowEditorContext) {\n    if (!held.nodes.size && !held.edges.size) return\n    if (held.tracking) undoManager.stopCapturing()\n    writeChanges(toRaw(context.doc.value), held, held.tracking)\n    if (held.tracking) undoManager.stopCapturing()\n    lastGroup = undefined\n    held.nodes.clear()\n    held.edges.clear()\n    held.tracking = false\n  }\n\n  /**\n   * Adds steps to `tr` that bring the given nodes and edges in line with the\n   * maps; returns edges left without a node, to clear from the maps.\n   */\n  function pull(tr: FlowTransaction, nodeIds: Iterable<string>, edgeIds: Iterable<string>) {\n    for (const id of nodeIds) {\n      const shared = read<FlowNode>(nodes, id)\n      const local = tr.getNode(id)\n      // a node being dragged here keeps the fields the drag changes\n      if (held.nodes.get(id) === true) continue\n      if (!shared) {\n        if (local) tr.removeNode(id)\n      } else if (!local) tr.addNode(shared)\n      else {\n        const patch = patchFor(local, shared, heldKeys(held.nodes, id))\n        if (patch) tr.updateNode(id, patch)\n      }\n    }\n    for (const id of edgeIds) {\n      const shared = read<FlowEdge>(edges, id)\n      const local = tr.getEdge(id)\n      if (held.edges.get(id) === true) continue\n      if (!shared) {\n        if (local) tr.removeEdge(id)\n      } else if (!local) tr.addEdge(shared)\n      else {\n        const patch = patchFor(local, shared, heldKeys(held.edges, id))\n        if (patch) tr.updateEdge(id, patch)\n      }\n    }\n    // One person deleted a node while another connected to it: the edge goes too.\n    const dangling: string[] = []\n    for (const edge of tr.doc.edges)\n      if (!tr.getNode(edge.source.node) || !tr.getNode(edge.target.node)) dangling.push(edge.id)\n    for (const id of dangling) tr.removeEdge(id)\n    return dangling\n  }\n\n  return defineFlowExtension({\n    name: 'collaboration',\n    // after the other extensions, so it writes what they added\n    priority: 0,\n    transaction(tr, context) {\n      if (applying) return\n      const tracking = tr.meta.history !== false\n      if (context.gesturing.value) {\n        touch(tr.steps, held)\n        held.tracking ||= tracking\n        return\n      }\n      const changed = { nodes: new Map() as Touched, edges: new Map() as Touched }\n      touch(tr.steps, changed)\n      // like the editor's own history: only changes in one group undo together\n      if (tracking && (!tr.meta.group || tr.meta.group !== lastGroup)) undoManager.stopCapturing()\n      if (tracking) lastGroup = tr.meta.group\n      writeChanges(tr.doc, changed, tracking)\n    },\n    history: () => ({\n      undo: () => run('undo'),\n      redo: () => run('redo'),\n      canUndo: () => undoManager.undoStack.length > 0,\n      canRedo: () => undoManager.redoStack.length > 0,\n    }),\n    layers: awareness ? { above: [createPeers(awareness)] } : undefined,\n    setup(context) {\n      const apply = (fn: (tr: FlowTransaction) => string[], origin: string) => {\n        let dangling: string[] = []\n        applying = true\n        try {\n          context.transact((tr) => (dangling = fn(tr)), { history: false, origin })\n        } finally {\n          applying = false\n        }\n        if (dangling.length)\n          queueMicrotask(() =>\n            ydoc.transact(() => {\n              for (const id of dangling) edges.delete(id)\n            }, untracked),\n          )\n      }\n      const current = () => toRaw(context.doc.value)\n\n      // the first one to open the flow brings its nodes; everyone else reads the maps\n      if (!nodes.size && !edges.size)\n        ydoc.transact(() => fillMaps({ nodes, edges }, current()), untracked)\n      const doc = current()\n      apply(\n        (tr) =>\n          pull(\n            tr,\n            new Set([...doc.nodes.map((node) => node.id), ...nodes.keys()]),\n            new Set([...doc.edges.map((edge) => edge.id), ...edges.keys()]),\n          ),\n        'remote',\n      )\n\n      // changes from others, and from undo: gathered per Yjs transaction\n      const pending = { nodes: new Set<string>(), edges: new Set<string>() }\n      const gather =\n        (map: Shared, into: Set<string>) =>\n        (events: Y.YEvent<Y.Map<unknown>>[], transaction: Y.Transaction) => {\n          if (transaction.origin === tracked || transaction.origin === untracked) return\n          for (const event of events) {\n            if (event.target === map) for (const key of event.changes.keys.keys()) into.add(key)\n            else if (event.path.length) into.add(String(event.path[0]))\n          }\n        }\n      const onNodes = gather(nodes, pending.nodes)\n      const onEdges = gather(edges, pending.edges)\n      const flush = () => {\n        if (!pending.nodes.size && !pending.edges.size) return\n        const nodeIds = [...pending.nodes]\n        const edgeIds = [...pending.edges]\n        pending.nodes.clear()\n        pending.edges.clear()\n        apply((tr) => pull(tr, nodeIds, edgeIds), travelling ?? 'remote')\n      }\n      nodes.observeDeep(onNodes)\n      edges.observeDeep(onEdges)\n      ydoc.on('afterTransaction', flush)\n\n      // a drag is written once it ends, cancelled or not\n      const stopRelease = watch(context.gesturing, (on) => !on && release(context), {\n        flush: 'sync',\n      })\n\n      let stopPresence: (() => void) | undefined\n      if (awareness) {\n        // what this user is dragging, connecting and has selected, for the others to see\n        stopPresence = watch(\n          [context.gesturing, context.doc, context.selection, context.connectingPath],\n          ([on, , selection, path]) => {\n            const moving: FlowPresence['moving'] = []\n            if (on)\n              for (const id of held.nodes.keys()) {\n                if (moving.length >= 100) break\n                const rect = context.getNodeRect(id)\n                if (rect) moving.push({ id, ...rect })\n              }\n            awareness.setLocalStateField('flow', {\n              moving,\n              selection: {\n                nodes: selection.nodes.slice(0, 100),\n                edges: selection.edges.slice(0, 100),\n              },\n              path,\n            } satisfies FlowPresence)\n          },\n          { immediate: true },\n        )\n      }\n\n      return () => {\n        nodes.unobserveDeep(onNodes)\n        edges.unobserveDeep(onEdges)\n        ydoc.off('afterTransaction', flush)\n        stopRelease()\n        stopPresence?.()\n        awareness?.setLocalStateField('flow', null)\n      }\n    },\n  })\n\n  function run(action: 'undo' | 'redo') {\n    const stack = action === 'undo' ? undoManager.undoStack : undoManager.redoStack\n    if (!stack.length) return false\n    travelling = action\n    try {\n      undoManager[action]()\n    } finally {\n      travelling = null\n    }\n    return true\n  }\n}\n\nexport type { AwarenessLike, FlowPresence }\n"],"mappings":"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"}

package/dist/collaboration/peers.js

@@ -0,0 +1,76 @@
+import { useFlowEditor } from "../context.js";
+import { defineComponent, h, onBeforeUnmount, shallowRef } from "vue";
+// src/collaboration/peers.ts
+function box(key, rect, rotation, kind, name) {
+	return h("div", {
+		key,
+		class: ["dou-flow-peer", `is-${kind}`],
+		style: {
+			translate: `${rect.x}px ${rect.y}px`,
+			width: `${rect.width}px`,
+			height: `${rect.height}px`,
+			rotate: rotation ? `${rotation}deg` : void 0
+		}
+	}, name ? h("span", {
+		class: "dou-flow-peer__name",
+		style: rotation ? { rotate: `${-rotation}deg` } : void 0
+	}, name) : void 0);
+}
+/**
+* A layer that shows what other people are doing, in their colors: dashed
+* outlines where the nodes they drag would land, outlines around what they
+* have selected, and the edge they are drawing.
+*/
+function createPeers(awareness) {
+	return defineComponent({
+		name: "DouFlowPeers",
+		setup() {
+			const ctx = useFlowEditor();
+			const states = shallowRef([]);
+			const read = () => {
+				const out = [];
+				awareness.getStates().forEach((state, client) => {
+					if (client === awareness.clientID) return;
+					const user = state.user;
+					const presence = state.flow;
+					if (!user || !presence) return;
+					out.push({
+						client,
+						name: user.name ?? "",
+						color: user.color ?? "currentColor",
+						presence
+					});
+				});
+				states.value = out;
+			};
+			read();
+			awareness.on("change", read);
+			onBeforeUnmount(() => awareness.off("change", read));
+			return () => states.value.map((peer) => {
+				const { presence } = peer;
+				const moving = new Set(presence.moving.map((item) => item.id));
+				const children = [];
+				let named = false;
+				const label = () => named ? void 0 : (named = true, peer.name);
+				for (const item of presence.moving) children.push(box(`m-${item.id}`, item, ctx.nodeRotation(item.id), "moving", label()));
+				for (const id of presence.selection?.nodes ?? []) {
+					const rect = !moving.has(id) && ctx.getNodeRect(id);
+					if (rect) children.push(box(`s-${id}`, rect, ctx.nodeRotation(id), "selected", label()));
+				}
+				if (presence.path) children.push(h("svg", {
+					key: "path",
+					class: "dou-flow-peer__lines",
+					"aria-hidden": "true"
+				}, [h("path", { d: presence.path })]));
+				return h("div", {
+					key: peer.client,
+					class: "dou-flow-peers",
+					style: { "--dou-flow-peer-color": peer.color }
+				}, children);
+			});
+		}
+	});
+}
+export { createPeers };
+
+//# sourceMappingURL=peers.js.map

package/dist/collaboration/peers.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"peers.js","names":[],"sources":["../../src/collaboration/peers.ts"],"sourcesContent":["import { defineComponent, h, onBeforeUnmount, shallowRef, type Component, type VNode } from 'vue'\nimport { useFlowEditor } from '../context'\nimport type { FlowSelection, Rect } from '../core/model'\n\n/** The part of an `Awareness` (`y-protocols/awareness`) the editor uses. */\nexport interface AwarenessLike {\n  clientID: number\n  getLocalState(): Record<string, unknown> | null\n  setLocalStateField(field: string, value: unknown): void\n  getStates(): Map<number, Record<string, unknown>>\n  on(event: 'change', listener: (...args: unknown[]) => void): void\n  off(event: 'change', listener: (...args: unknown[]) => void): void\n}\n\n/** What each person shares under the awareness field `flow`. */\nexport interface FlowPresence {\n  /** The nodes they are dragging or resizing, where they would land. */\n  moving: ({ id: string } & Rect)[]\n  selection: FlowSelection\n  /** The edge they are drawing, as an SVG path in canvas coordinates. */\n  path: string | null\n}\n\ninterface Peer {\n  client: number\n  name: string\n  color: string\n  presence: FlowPresence\n}\n\nfunction box(key: string, rect: Rect, rotation: number, kind: string, name?: string) {\n  return h(\n    'div',\n    {\n      key,\n      class: ['dou-flow-peer', `is-${kind}`],\n      style: {\n        // `translate`, not `transform`: it applies before `rotate`, so the\n        // outline turns about the node's own centre, as the node is drawn\n        translate: `${rect.x}px ${rect.y}px`,\n        width: `${rect.width}px`,\n        height: `${rect.height}px`,\n        rotate: rotation ? `${rotation}deg` : undefined,\n      },\n    },\n    // the name, once per person, upright on the outline's corner\n    name\n      ? h(\n          'span',\n          {\n            class: 'dou-flow-peer__name',\n            style: rotation ? { rotate: `${-rotation}deg` } : undefined,\n          },\n          name,\n        )\n      : undefined,\n  )\n}\n\n/**\n * A layer that shows what other people are doing, in their colors: dashed\n * outlines where the nodes they drag would land, outlines around what they\n * have selected, and the edge they are drawing.\n */\nexport function createPeers(awareness: AwarenessLike): Component {\n  return defineComponent({\n    name: 'DouFlowPeers',\n    setup() {\n      const ctx = useFlowEditor()\n      const states = shallowRef<Peer[]>([])\n      const read = () => {\n        const out: Peer[] = []\n        awareness.getStates().forEach((state, client) => {\n          if (client === awareness.clientID) return\n          const user = state.user as { name?: string; color?: string } | undefined\n          const presence = state.flow as FlowPresence | null | undefined\n          if (!user || !presence) return\n          out.push({ client, name: user.name ?? '', color: user.color ?? 'currentColor', presence })\n        })\n        states.value = out\n      }\n      read()\n      awareness.on('change', read)\n      onBeforeUnmount(() => awareness.off('change', read))\n\n      return () =>\n        states.value.map((peer) => {\n          const { presence } = peer\n          const moving = new Set(presence.moving.map((item) => item.id))\n          const children: VNode[] = []\n          let named = false\n          const label = () => (named ? undefined : ((named = true), peer.name))\n          for (const item of presence.moving)\n            children.push(box(`m-${item.id}`, item, ctx.nodeRotation(item.id), 'moving', label()))\n          for (const id of presence.selection?.nodes ?? []) {\n            const rect = !moving.has(id) && ctx.getNodeRect(id)\n            if (rect) children.push(box(`s-${id}`, rect, ctx.nodeRotation(id), 'selected', label()))\n          }\n          if (presence.path)\n            children.push(\n              h('svg', { key: 'path', class: 'dou-flow-peer__lines', 'aria-hidden': 'true' }, [\n                h('path', { d: presence.path }),\n              ]),\n            )\n          return h(\n            'div',\n            {\n              key: peer.client,\n              class: 'dou-flow-peers',\n              style: { '--dou-flow-peer-color': peer.color },\n            },\n            children,\n          )\n        })\n    },\n  })\n}\n"],"mappings":";;;AA8BA,SAAS,IAAI,KAAa,MAAY,UAAkB,MAAc,MAAe;CACnF,OAAO,EACL,OACA;EACE;EACA,OAAO,CAAC,iBAAiB,MAAM,MAAM;EACrC,OAAO;GAGL,WAAW,GAAG,KAAK,EAAE,KAAK,KAAK,EAAE;GACjC,OAAO,GAAG,KAAK,MAAM;GACrB,QAAQ,GAAG,KAAK,OAAO;GACvB,QAAQ,WAAW,GAAG,SAAS,OAAO,KAAA;EACxC;CACF,GAEA,OACI,EACE,QACA;EACE,OAAO;EACP,OAAO,WAAW,EAAE,QAAQ,GAAG,CAAC,SAAS,KAAK,IAAI,KAAA;CACpD,GACA,IACF,IACA,KAAA,CACN;AACF;;;;;;AAOA,SAAgB,YAAY,WAAqC;CAC/D,OAAO,gBAAgB;EACrB,MAAM;EACN,QAAQ;GACN,MAAM,MAAM,cAAc;GAC1B,MAAM,SAAS,WAAmB,CAAC,CAAC;GACpC,MAAM,aAAa;IACjB,MAAM,MAAc,CAAC;IACrB,UAAU,UAAU,CAAC,CAAC,SAAS,OAAO,WAAW;KAC/C,IAAI,WAAW,UAAU,UAAU;KACnC,MAAM,OAAO,MAAM;KACnB,MAAM,WAAW,MAAM;KACvB,IAAI,CAAC,QAAQ,CAAC,UAAU;KACxB,IAAI,KAAK;MAAE;MAAQ,MAAM,KAAK,QAAQ;MAAI,OAAO,KAAK,SAAS;MAAgB;KAAS,CAAC;IAC3F,CAAC;IACD,OAAO,QAAQ;GACjB;GACA,KAAK;GACL,UAAU,GAAG,UAAU,IAAI;GAC3B,sBAAsB,UAAU,IAAI,UAAU,IAAI,CAAC;GAEnD,aACE,OAAO,MAAM,KAAK,SAAS;IACzB,MAAM,EAAE,aAAa;IACrB,MAAM,SAAS,IAAI,IAAI,SAAS,OAAO,KAAK,SAAS,KAAK,EAAE,CAAC;IAC7D,MAAM,WAAoB,CAAC;IAC3B,IAAI,QAAQ;IACZ,MAAM,cAAe,QAAQ,KAAA,KAAc,QAAQ,MAAO,KAAK;IAC/D,KAAK,MAAM,QAAQ,SAAS,QAC1B,SAAS,KAAK,IAAI,KAAK,KAAK,MAAM,MAAM,IAAI,aAAa,KAAK,EAAE,GAAG,UAAU,MAAM,CAAC,CAAC;IACvF,KAAK,MAAM,MAAM,SAAS,WAAW,SAAS,CAAC,GAAG;KAChD,MAAM,OAAO,CAAC,OAAO,IAAI,EAAE,KAAK,IAAI,YAAY,EAAE;KAClD,IAAI,MAAM,SAAS,KAAK,IAAI,KAAK,MAAM,MAAM,IAAI,aAAa,EAAE,GAAG,YAAY,MAAM,CAAC,CAAC;IACzF;IACA,IAAI,SAAS,MACX,SAAS,KACP,EAAE,OAAO;KAAE,KAAK;KAAQ,OAAO;KAAwB,eAAe;IAAO,GAAG,CAC9E,EAAE,QAAQ,EAAE,GAAG,SAAS,KAAK,CAAC,CAChC,CAAC,CACH;IACF,OAAO,EACL,OACA;KACE,KAAK,KAAK;KACV,OAAO;KACP,OAAO,EAAE,yBAAyB,KAAK,MAAM;IAC/C,GACA,QACF;GACF,CAAC;EACL;CACF,CAAC;AACH"}

package/dist/components/default-node.js

@@ -0,0 +1,6 @@
+import default_node_vue_vue_type_script_setup_true_lang_default from "./default-node.vue_vue_type_script_setup_true_lang.js";
+// src/components/default-node.vue
+var default_node_default = default_node_vue_vue_type_script_setup_true_lang_default;
+export { default_node_default as default };
+
+//# sourceMappingURL=default-node.js.map

package/dist/components/default-node.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"default-node.js","names":["_sfc_main"],"sources":["../../src/components/default-node.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed } from 'vue'\nimport { portSide, type NodeViewProps } from '../core/node-types'\nimport { useFlowEditor } from '../context'\nimport type { DefaultNodeData } from './default-node'\nimport FlowPortView from './flow-port.vue'\n\nconst props = defineProps<NodeViewProps<DefaultNodeData>>()\nconst { messages } = useFlowEditor()\n\n// Ports on the top or bottom are placed by the editor.\nconst inputs = computed(() =>\n  props.ports.filter((p) => p.kind === 'input' && portSide(p) === 'left'),\n)\nconst outputs = computed(() =>\n  props.ports.filter((p) => p.kind === 'output' && portSide(p) === 'right'),\n)\n// A single unnamed input and output sit on the title row.\nconst inline = computed(\n  () =>\n    inputs.value.length <= 1 &&\n    outputs.value.length <= 1 &&\n    [...inputs.value, ...outputs.value].every((p) => !p.label),\n)\nconst rows = computed(() => {\n  if (inline.value) return []\n  const count = Math.max(inputs.value.length, outputs.value.length)\n  return Array.from({ length: count }, (_, i) => ({\n    input: inputs.value[i],\n    output: outputs.value[i],\n  }))\n})\n</script>\n\n<template>\n  <div class=\"dou-flow-default-node\">\n    <div class=\"dou-flow-default-node__head\">\n      <FlowPortView v-if=\"inline && inputs[0]\" :id=\"inputs[0].id\" />\n      <span v-if=\"data.icon\" class=\"dou-flow-default-node__icon\">\n        <component :is=\"data.icon\" />\n      </span>\n      <span class=\"dou-flow-default-node__title\">{{ data.label }}</span>\n      <span\n        v-if=\"data.status\"\n        class=\"dou-flow-default-node__status\"\n        :class=\"`is-${data.status}`\"\n        role=\"img\"\n        :aria-label=\"messages.status[data.status]\"\n      />\n      <FlowPortView v-if=\"inline && outputs[0]\" :id=\"outputs[0].id\" />\n    </div>\n    <p v-if=\"data.description\" class=\"dou-flow-default-node__description\">\n      {{ data.description }}\n    </p>\n    <div v-if=\"rows.length\" class=\"dou-flow-default-node__ports\">\n      <div v-for=\"(row, i) in rows\" :key=\"i\" class=\"dou-flow-default-node__row\">\n        <span v-if=\"row.input\" class=\"dou-flow-default-node__port is-input\">\n          <FlowPortView :id=\"row.input.id\" />\n          {{ row.input.label ?? messages.input }}\n        </span>\n        <span v-if=\"row.output\" class=\"dou-flow-default-node__port is-output\">\n          {{ row.output.label ?? messages.output }}\n          <FlowPortView :id=\"row.output.id\" />\n        </span>\n      </div>\n    </div>\n  </div>\n</template>\n"],"mappings":""}

package/dist/components/default-node.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,87 @@
+import { useFlowEditor } from "../context.js";
+import { portSide } from "../core/node-types.js";
+import flow_port_default from "./flow-port.js";
+import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, normalizeClass, openBlock, renderList, resolveDynamicComponent, toDisplayString, unref } from "vue";
+// src/components/default-node.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = { class: "dou-flow-default-node" };
+var _hoisted_2 = { class: "dou-flow-default-node__head" };
+var _hoisted_3 = {
+	key: 1,
+	class: "dou-flow-default-node__icon"
+};
+var _hoisted_4 = { class: "dou-flow-default-node__title" };
+var _hoisted_5 = ["aria-label"];
+var _hoisted_6 = {
+	key: 0,
+	class: "dou-flow-default-node__description"
+};
+var _hoisted_7 = {
+	key: 1,
+	class: "dou-flow-default-node__ports"
+};
+var _hoisted_8 = {
+	key: 0,
+	class: "dou-flow-default-node__port is-input"
+};
+var _hoisted_9 = {
+	key: 1,
+	class: "dou-flow-default-node__port is-output"
+};
+var default_node_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
+	__name: "default-node",
+	props: {
+		node: {},
+		data: {},
+		ports: {},
+		selected: { type: Boolean },
+		readonly: { type: Boolean },
+		updateData: { type: Function }
+	},
+	setup(__props) {
+		const props = __props;
+		const { messages } = useFlowEditor();
+		const inputs = computed(() => props.ports.filter((p) => p.kind === "input" && portSide(p) === "left"));
+		const outputs = computed(() => props.ports.filter((p) => p.kind === "output" && portSide(p) === "right"));
+		const inline = computed(() => inputs.value.length <= 1 && outputs.value.length <= 1 && [...inputs.value, ...outputs.value].every((p) => !p.label));
+		const rows = computed(() => {
+			if (inline.value) return [];
+			const count = Math.max(inputs.value.length, outputs.value.length);
+			return Array.from({ length: count }, (_, i) => ({
+				input: inputs.value[i],
+				output: outputs.value[i]
+			}));
+		});
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", _hoisted_1, [
+				createElementVNode("div", _hoisted_2, [
+					inline.value && inputs.value[0] ? (openBlock(), createBlock(flow_port_default, {
+						key: 0,
+						id: inputs.value[0].id
+					}, null, 8, ["id"])) : createCommentVNode("", true),
+					__props.data.icon ? (openBlock(), createElementBlock("span", _hoisted_3, [(openBlock(), createBlock(resolveDynamicComponent(__props.data.icon)))])) : createCommentVNode("", true),
+					createElementVNode("span", _hoisted_4, toDisplayString(__props.data.label), 1),
+					__props.data.status ? (openBlock(), createElementBlock("span", {
+						key: 2,
+						class: normalizeClass(["dou-flow-default-node__status", `is-${__props.data.status}`]),
+						role: "img",
+						"aria-label": unref(messages).status[__props.data.status]
+					}, null, 10, _hoisted_5)) : createCommentVNode("", true),
+					inline.value && outputs.value[0] ? (openBlock(), createBlock(flow_port_default, {
+						key: 3,
+						id: outputs.value[0].id
+					}, null, 8, ["id"])) : createCommentVNode("", true)
+				]),
+				__props.data.description ? (openBlock(), createElementBlock("p", _hoisted_6, toDisplayString(__props.data.description), 1)) : createCommentVNode("", true),
+				rows.value.length ? (openBlock(), createElementBlock("div", _hoisted_7, [(openBlock(true), createElementBlock(Fragment, null, renderList(rows.value, (row, i) => {
+					return openBlock(), createElementBlock("div", {
+						key: i,
+						class: "dou-flow-default-node__row"
+					}, [row.input ? (openBlock(), createElementBlock("span", _hoisted_8, [createVNode(flow_port_default, { id: row.input.id }, null, 8, ["id"]), createTextVNode(" " + toDisplayString(row.input.label ?? unref(messages).input), 1)])) : createCommentVNode("", true), row.output ? (openBlock(), createElementBlock("span", _hoisted_9, [createTextVNode(toDisplayString(row.output.label ?? unref(messages).output) + " ", 1), createVNode(flow_port_default, { id: row.output.id }, null, 8, ["id"])])) : createCommentVNode("", true)]);
+				}), 128))])) : createCommentVNode("", true)
+			]);
+		};
+	}
+});
+export { default_node_vue_vue_type_script_setup_true_lang_default as default };
+
+//# sourceMappingURL=default-node.vue_vue_type_script_setup_true_lang.js.map