@bysages/workflow 0.2.2 → 0.3.0

package/dist/index.d.mts

@@ -1,4 +1,5 @@
 import { Graph } from "@antv/x6";
+import { LayoutOptions } from "elkjs/lib/elk.bundled.js";
 //#region src/types.d.ts
 /** The engine-independent facts of a workflow graph. The canvas adapter
  * reads them; the execution backend writes states back through the
@@ -142,6 +143,29 @@ export declare const deserializeWorkflowGraph: (serialized: {
   graph: WorkflowGraph;
 }) => WorkflowGraph;
 //#endregion
+//#region src/mindmap.d.ts
+/** A section''s payload — a ```json fence placed under its heading rides
+ * along parsed into data, so the outline carries both the tree and the
+ * machine-readable facts of each branch. */
+export interface MindmapNodeData {
+  label: string;
+  payload?: unknown;
+}
+/** Turns a markdown outline into a workflow graph: every heading and
+ * every list item becomes a node, the nesting becomes edges, and a json
+ * fence deepens its nearest section with parsed payload. An h1 names the
+ * root; without one the first entry grows into the trunk. Positions all
+ * start at the origin — the canvas sweep (ELK''s mrtree) hands out the
+ * real geometry. Every node keeps both handles, so any branch can grow
+ * on the canvas later. */
+export declare function outlineToGraph(markdown: string): WorkflowGraph;
+/** Folds a tree-shaped graph back into the outline the parser accepts:
+ * the root as the h1, first-level branches as h2s, deeper nodes as
+ * nested list items, and a payload re-entering as a json fence under
+ * its section. Extra parents (a node several edges reach) are ignored —
+ * the first edge wins, so the fold stays a tree. */
+export declare function graphToOutline(graph: WorkflowGraph): string;
+//#endregion
 //#region src/x6-canvas.d.ts
 /** How the layered engine should sweep the graph. Left out, the
  * direction is read off the graph: edges drawn between side handles
@@ -150,6 +174,11 @@ export declare const deserializeWorkflowGraph: (serialized: {
  * handles on the bottom, in handles on top. */
 export interface WorkflowAutoLayoutOptions {
   direction?: "TB" | "LR" | "BT" | "RL";
+  /** The ELK algorithm id — layered by default; org.eclipse.elk.mrtree
+   * sweeps the same graph as a tree. The vocabulary belongs to ELK's own
+   * option table, so the field reads its type from there instead of
+   * closing over a hand-written union. */
+  algorithm?: LayoutOptions["elk.algorithm"];
   /** The gap between layers, in px. */
   rankSep?: number;
   /** The gap between siblings on one layer, in px. */
@@ -167,6 +196,10 @@ export interface WorkflowCanvasOptions {
   minimap?: {
     container: HTMLElement;
   };
+  /** Which way the flow reads — the edge the first in/out handles sit
+   * on follows it, and an unspecified layout direction inherits it.
+   * Vertical stays the default: every existing graph keeps its anatomy. */
+  orientation?: "TB" | "LR";
 }
 /** Viewport options for fitView. X6's own fit options are accepted in
  * full through the graph escape hatch; these cover the calls a toolbar
@@ -186,7 +219,7 @@ export interface WorkflowCanvas {
   /** Frames the whole graph. Defaults to what a toolbar wants: a
    * breathing margin and no magnifying past 100%. */
   fitView(options?: WorkflowFitViewOptions): void;
-  /** Sweeps the graph with the ELK layered algorithm and writes every
+  /** Sweeps the graph with the chosen ELK algorithm and writes every
    * node's new position back through the store. Async: the layout
    * engine is heavy, so it's pulled in only when this runs. */
   layout(options?: WorkflowAutoLayoutOptions): Promise<void>;

package/dist/index.mjs

@@ -1,3 +1,4 @@
+import { parseMarkdown } from "@tanstack/markdown";
 import { Graph, History, Keyboard, MiniMap, Selection, Shape } from "@antv/x6";
 import { injectComponentStyle } from "@bysages/core";
 //#region src/store.ts
@@ -158,6 +159,143 @@ const deserializeWorkflowGraph = (serialized) => {
 	return serialized.graph;
 };
 //#endregion
+//#region src/mindmap.ts
+const inlineText = (nodes) => nodes.map((node) => {
+	if (node.type === "text" || node.type === "inlineCode") return node.value;
+	if (node.type === "break") return " ";
+	if ("children" in node) return inlineText(node.children);
+	if (node.type === "footnoteReference") return node.id;
+	return "";
+}).join("");
+const blockText = (block) => {
+	if (block.type === "heading" || block.type === "paragraph") return inlineText(block.children);
+	return "";
+};
+/** Turns a markdown outline into a workflow graph: every heading and
+* every list item becomes a node, the nesting becomes edges, and a json
+* fence deepens its nearest section with parsed payload. An h1 names the
+* root; without one the first entry grows into the trunk. Positions all
+* start at the origin — the canvas sweep (ELK''s mrtree) hands out the
+* real geometry. Every node keeps both handles, so any branch can grow
+* on the canvas later. */
+function outlineToGraph(markdown) {
+	const document = parseMarkdown(markdown);
+	const nodes = [];
+	const edges = [];
+	const stack = [];
+	let counter = 0;
+	const attachPayload = (nodeId, block) => {
+		const node = nodes.find((candidate) => candidate.id === nodeId);
+		if (!node) return;
+		try {
+			node.data.payload = JSON.parse(block.value);
+		} catch {
+			node.data.payload = block.value;
+		}
+	};
+	const grow = (label, depth) => {
+		counter += 1;
+		const id = `m${counter}`;
+		while (stack.length > 0 && stack[stack.length - 1].depth >= depth) stack.pop();
+		nodes.push({
+			id,
+			type: "mindmap",
+			position: {
+				x: 0,
+				y: 0
+			},
+			ports: stack.length === 0 ? [{
+				id: "out",
+				dir: "out"
+			}] : [{
+				id: "in",
+				dir: "in"
+			}, {
+				id: "out",
+				dir: "out"
+			}],
+			data: { label }
+		});
+		if (stack.length > 0) edges.push({
+			id: `e${counter}`,
+			source: {
+				node: stack[stack.length - 1].nodeId,
+				port: "out"
+			},
+			target: {
+				node: id,
+				port: "in"
+			}
+		});
+		stack.push({
+			depth,
+			nodeId: id
+		});
+		return id;
+	};
+	const walkList = (list, depth) => {
+		for (const item of list.items) {
+			const lead = item.children[0];
+			const id = grow(lead ? blockText(lead) || "—" : "—", depth);
+			for (const child of item.children) if (child.type === "list") walkList(child, depth + 1);
+			else if (child.type === "code" && child.lang === "json") attachPayload(id, child);
+		}
+	};
+	const headings = document.children.filter((block) => block.type === "heading");
+	if (headings[0]?.depth === 1) grow(inlineText(headings[0].children), 0);
+	for (const block of document.children) if (block.type === "heading") {
+		if (!(block === headings[0] && block.depth === 1)) grow(inlineText(block.children), block.depth - 1);
+	} else if (block.type === "list") walkList(block, stack[stack.length - 1].depth + 1);
+	else if (block.type === "code" && block.lang === "json" && stack.length > 0) attachPayload(stack[stack.length - 1].nodeId, block);
+	return {
+		nodes,
+		edges
+	};
+}
+const FENCE = "```";
+/** Folds a tree-shaped graph back into the outline the parser accepts:
+* the root as the h1, first-level branches as h2s, deeper nodes as
+* nested list items, and a payload re-entering as a json fence under
+* its section. Extra parents (a node several edges reach) are ignored —
+* the first edge wins, so the fold stays a tree. */
+function graphToOutline(graph) {
+	const dataOf = (id) => {
+		const node = graph.nodes.find((candidate) => candidate.id === id);
+		return {
+			label: typeof node?.data.label === "string" ? node.data.label : id,
+			payload: node?.data.payload
+		};
+	};
+	const parentOf = /* @__PURE__ */ new Map();
+	const childrenOf = /* @__PURE__ */ new Map();
+	for (const edge of graph.edges) {
+		if (parentOf.has(edge.target.node)) continue;
+		parentOf.set(edge.target.node, edge.source.node);
+		const siblings = childrenOf.get(edge.source.node) ?? [];
+		siblings.push(edge.target.node);
+		childrenOf.set(edge.source.node, siblings);
+	}
+	const lines = [];
+	const emitPayload = (indent, payload) => {
+		lines.push("");
+		const pad = " ".repeat(indent);
+		lines.push(pad + "```json");
+		for (const line of JSON.stringify(payload, null, 2).split("\n")) lines.push(pad + line);
+		lines.push(pad + FENCE, "");
+	};
+	const walk = (id, depth) => {
+		const { label, payload } = dataOf(id);
+		if (depth <= 1) {
+			if (lines.length > 0 && lines[lines.length - 1] !== "") lines.push("");
+			lines.push(depth === 0 ? `# ${label}` : `## ${label}`, "");
+		} else lines.push(`${" ".repeat((depth - 2) * 2)}- ${label}`);
+		if (payload !== void 0) emitPayload(depth >= 2 ? (depth - 2) * 2 + 2 : 0, payload);
+		for (const child of childrenOf.get(id) ?? []) walk(child, depth + 1);
+	};
+	for (const node of graph.nodes) if (!parentOf.has(node.id)) walk(node.id, 0);
+	return lines.join("\n").replace(/\n{3,}/g, "\n\n").trim() + "\n";
+}
+//#endregion
 //#region src/x6-canvas.ts
 const NODE_WIDTH = 256;
 const NODE_HEIGHT = 88;
@@ -221,7 +359,12 @@ function createWorkflowCanvas(container, source, options = {}) {
 			"data-dir": dir
 		} }
 	});
-	const portGroups = {
+	const portGroups = options.orientation === "LR" ? {
+		in: sideGroup("left", "in"),
+		"in-alt": sideGroup("top", "in"),
+		out: sideGroup("right", "out"),
+		"out-alt": sideGroup("bottom", "out")
+	} : {
 		in: sideGroup("top", "in"),
 		"in-alt": sideGroup("left", "in"),
 		out: sideGroup("bottom", "out"),
@@ -333,11 +476,26 @@ function createWorkflowCanvas(container, source, options = {}) {
 			container: options.minimap.container,
 			width: 200,
 			height: 140,
-			padding: 8
+			padding: 8,
+			createGraph: (paperOptions) => {
+				const paper = new Graph(paperOptions);
+				const translate = paper.translate.bind(paper);
+				const readTranslate = paper.translate.bind(paper);
+				paper.translate = ((tx, ty) => {
+					if (tx === void 0 && ty === void 0) return readTranslate();
+					return tx !== void 0 && ty !== void 0 && Number.isFinite(tx) && Number.isFinite(ty) ? translate(tx, ty) : paper;
+				});
+				const resize = paper.resize.bind(paper);
+				paper.resize = (width, height) => Number.isFinite(width) && Number.isFinite(height) ? resize(width, height) : paper;
+				return paper;
+			}
 		}));
 	}
 	options.onReady?.(graph);
-	const followHost = () => graph.resize(container.clientWidth, container.clientHeight);
+	const followHost = () => {
+		if (container.clientWidth === 0 || container.clientHeight === 0) return;
+		graph.resize(container.clientWidth, container.clientHeight);
+	};
 	followHost();
 	const hostResize = new ResizeObserver(followHost);
 	hostResize.observe(container);
@@ -447,6 +605,7 @@ function createWorkflowCanvas(container, source, options = {}) {
 	let elkLoader;
 	let layoutRun = Promise.resolve();
 	const inferDirection = () => {
+		if (options.orientation) return options.orientation;
 		const sideOf = (nodeId, portId, dir) => {
 			const node = store.getNode(nodeId);
 			if (!node) return dir === "in" ? "top" : "bottom";
@@ -479,13 +638,14 @@ function createWorkflowCanvas(container, source, options = {}) {
 		const direction = options?.direction ?? inferDirection();
 		const rankSep = options?.rankSep ?? 80;
 		const nodeSep = options?.nodeSep ?? 40;
+		const algorithm = options?.algorithm ?? "layered";
 		elkLoader ??= import("elkjs/lib/elk.bundled.js").then(({ default: ELK }) => new ELK());
 		const elk = await elkLoader;
 		const { nodes, edges } = store.getGraph();
 		const result = await elk.layout({
 			id: "workflow",
 			layoutOptions: {
-				"elk.algorithm": "layered",
+				"elk.algorithm": algorithm,
 				"elk.direction": {
 					TB: "DOWN",
 					LR: "RIGHT",
@@ -558,4 +718,4 @@ function createWorkflowCanvas(container, source, options = {}) {
 	return canvas;
 }
 //#endregion
-export { WORKFLOW_GRAPH_VERSION, createWorkflowCanvas, createWorkflowStore, deserializeWorkflowGraph, serializeWorkflowGraph };
+export { WORKFLOW_GRAPH_VERSION, createWorkflowCanvas, createWorkflowStore, deserializeWorkflowGraph, graphToOutline, outlineToGraph, serializeWorkflowGraph };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bysages/workflow",
-  "version": "0.2.2",
+  "version": "0.3.0",
   "description": "AI-ready workflow graphs for By Sages Elements — a headless graph protocol dressed in the paper-and-ink system, rendered by a swappable canvas engine",
   "keywords": [
     "ai",
@@ -39,8 +39,9 @@
   },
   "dependencies": {
     "@antv/x6": "3.1.8",
+    "@tanstack/markdown": "1.0.0",
     "elkjs": "0.12.0",
-    "@bysages/core": "0.2.2"
+    "@bysages/core": "0.3.0"
   },
   "devDependencies": {
     "@types/react": "19.3.0",
@@ -48,8 +49,8 @@
     "react": "19.3.0",
     "react-dom": "19.3.0",
     "vue": "3.5.43",
-    "@bysages/react": "0.2.2",
-    "@bysages/vue": "0.2.2"
+    "@bysages/react": "0.3.0",
+    "@bysages/vue": "0.3.0"
   },
   "scripts": {
     "dev": "basis build --stub",