f1ow 1.0.0 → 1.1.1

package/dist/utils/editable.d.ts

@@ -0,0 +1,2 @@
+export declare function isTextEditingTarget(target: EventTarget | null): boolean;
+export declare function blurTextEditingTarget(target: EventTarget | null): boolean;

package/dist/utils/elbow.d.ts

@@ -7,6 +7,7 @@ interface BBox {
     width: number;
     height: number;
 }
+type BoxLike = Pick<BBox, 'x' | 'y' | 'width' | 'height'>;
 /**
  * Determine the preferred exit direction for elbow routing from a
  * center (imprecise) binding.
@@ -21,8 +22,11 @@ interface BBox {
  * shapes at their vertical center — visually too close to objects and
  * often requiring more bends.
  *
- * Only uses horizontal exits when the target is strongly horizontally
- * aligned (>3× horizontal dominance after normalizing by shape size).
+ * When both endpoint shapes are known, prefer the axis with the smaller
+ * inter-shape gap (or the orthogonal axis with less overlap). This makes
+ * diagonal routes look more intentional than a pure center-to-center
+ * heuristic. If only a target point is known, fall back to the normalized
+ * center-delta heuristic with a slight vertical bias.
  *
  * This function should be used by BOTH:
  * - The binding system (connection.ts) to compute edge points for
@@ -31,12 +35,7 @@ interface BBox {
  *
  * For PRECISE bindings, always use directionFromFixedPoint instead.
  */
-export declare function getElbowPreferredDirection(shape: {
-    x: number;
-    y: number;
-    width: number;
-    height: number;
-}, targetPoint: Point): Direction;
+export declare function getElbowPreferredDirection(shape: BoxLike, targetPoint: Point, targetShape?: BoxLike | null, targetBinding?: Binding | null): Direction;
 /**
  * Determine the exit/entry direction from a binding's fixedPoint.
  * fixedPoint is [fx, fy] in [0-1, 0-1] on the target shape's bbox.
@@ -67,6 +66,34 @@ export declare function directionFromShapeToPoint(shape: BBox, targetPoint: Poin
  * computed edge point from the binding system.
  */
 export declare function directionFromEdgePoint(shape: BBox, edgePoint: Point): Direction;
+export declare function selectElbowDirectionPair(args: {
+    startWorld: Point;
+    endWorld: Point;
+    startBinding: Binding | null;
+    endBinding: Binding | null;
+    startShape?: {
+        x: number;
+        y: number;
+        width: number;
+        height: number;
+    } | null;
+    endShape?: {
+        x: number;
+        y: number;
+        width: number;
+        height: number;
+    } | null;
+    intermediateObstacles?: Array<{
+        x: number;
+        y: number;
+        width: number;
+        height: number;
+    }>;
+    minStubLength?: number;
+}): {
+    startDir: Direction;
+    endDir: Direction;
+};
 /**
  * Compute an orthogonal route between two points using a multi-candidate
  * grid-based shortest-path algorithm.
@@ -99,6 +126,12 @@ export declare function directionFromEdgePoint(shape: BBox, edgePoint: Point): D
 export declare function computeElbowRoute(start: Point, end: Point, startDir: Direction, endDir: Direction, startBBox?: BBox | null, endBBox?: BBox | null, minStubLength?: number, 
 /** Additional obstacles (intermediate shapes) to avoid — already as BBox */
 intermediateObstacles?: BBox[]): Point[];
+export declare function collectElbowIntermediateObstacles(startWorld: Point, endWorld: Point, allElements: CanvasElement[], excludeIds: Set<string>): Array<{
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+}>;
 /** Clear the route cache (call when elements change structurally) */
 export declare function clearElbowRouteCache(): void;
 export declare function computeElbowPoints(startWorld: Point, endWorld: Point, startBinding: Binding | null, endBinding: Binding | null, allElements: CanvasElement[], minStubLength?: number): number[];

package/dist/utils/labelMetrics.d.ts

@@ -36,6 +36,27 @@ export declare function measureLabelText(text: string, fontSize: number, fontFam
     width: number;
     height: number;
 };
+/**
+ * Compute the CSS half-leading offset for a given font.
+ *
+ * Konva renders text with `textBaseline='top'` — the glyph top aligns
+ * with the node's y position (no leading above).
+ * CSS distributes leading equally above and below the content area
+ * within each line box.  The half-leading is the space ABOVE the glyphs
+ * that CSS adds but Konva does not.
+ *
+ * To align a DOM textarea's visible text with Konva's rendered text,
+ * shift the textarea UP by this amount (in canvas-space pixels).
+ *
+ * Uses `fontBoundingBoxAscent/Descent` for accurate per-font measurement
+ * with a safe fallback for older browsers.
+ *
+ * @param fontSize   - Font size in canvas-space pixels
+ * @param fontFamily - CSS font-family string
+ * @param lineHeight - Line-height multiplier (default: LABEL_LINE_HEIGHT)
+ * @returns Half-leading in canvas-space pixels (≥ 0)
+ */
+export declare function computeHalfLeading(fontSize: number, fontFamily: string, lineHeight?: number): number;
 /**
  * Compute the full pill (background rect) dimensions for a connector label.
  *

package/dist/utils/markdown.d.ts

@@ -0,0 +1,14 @@
+export declare function htmlToPlainText(html: string): string;
+/**
+ * Render markdown text to inline-styled HTML.
+ * Safe for use with `innerHTML` — raw HTML in the source is escaped.
+ */
+export declare function renderMarkdown(text: string): string;
+export declare function markdownToPlainText(text: string): string;
+/** CSS class name for the markdown overlay container */
+export declare const MD_CLASS = "fc-md";
+/**
+ * CSS rules for markdown-rendered content.
+ * Injected once via a <style> tag by the overlay component.
+ */
+export declare const MD_STYLES = "\n.fc-md { line-height: inherit; }\n.fc-md p { margin: 0; }\n.fc-md h1 { margin: 0; font-weight: bold; font-size: 1.5em; line-height: 1.3; }\n.fc-md h2 { margin: 0; font-weight: bold; font-size: 1.3em; line-height: 1.3; }\n.fc-md h3 { margin: 0; font-weight: bold; font-size: 1.15em; line-height: 1.3; }\n.fc-md h4, .fc-md h5, .fc-md h6 { margin: 0; font-weight: bold; font-size: 1em; }\n.fc-md strong { font-weight: bold; }\n.fc-md em { font-style: italic; }\n.fc-md del { text-decoration: line-through; }\n.fc-md code {\n    background: rgba(0,0,0,0.06);\n    padding: 0.1em 0.3em;\n    border-radius: 3px;\n    font-size: 0.9em;\n    font-family: 'SF Mono', Monaco, Menlo, Consolas, monospace;\n}\n.fc-md pre {\n    background: rgba(0,0,0,0.06);\n    padding: 0.4em 0.6em;\n    border-radius: 4px;\n    font-size: 0.85em;\n    overflow-x: auto;\n    margin: 0.2em 0;\n}\n.fc-md pre code { background: none; padding: 0; font-size: inherit; }\n.fc-md ul, .fc-md ol { padding-left: 1.5em; margin: 0.15em 0; }\n.fc-md li { margin: 0; }\n.fc-md blockquote {\n    border-left: 3px solid rgba(0,0,0,0.15);\n    padding-left: 0.8em;\n    margin: 0.2em 0;\n    color: rgba(0,0,0,0.55);\n}\n.fc-md a { color: #4f8df7; text-decoration: underline; }\n.fc-md hr { border: none; border-top: 1px solid rgba(0,0,0,0.12); margin: 0.3em 0; }\n.fc-md img { max-width: 100%; }\n";

package/dist/utils/markdownEditing.d.ts

@@ -0,0 +1 @@
+export declare function serializeEditableHtmlToMarkdown(html: string): string;

package/dist/utils/textBinding.d.ts

@@ -0,0 +1,18 @@
+import { CanvasElement, ElementStyle, Point, TextElement } from '../types';
+export type TextContainerElement = Extract<CanvasElement, {
+    type: 'rectangle' | 'ellipse' | 'diamond' | 'image';
+}>;
+export declare function isTextContainerElement(element: CanvasElement): element is TextContainerElement;
+export declare function isPointInsideTextContainer(element: TextContainerElement, point: Point): boolean;
+export declare function findTopmostTextContainerAtPoint(elements: CanvasElement[], point: Point): TextContainerElement | null;
+/**
+ * Reorder elements so every bound text element is placed immediately
+ * after its container. This keeps a shape and its label at the same
+ * logical z-index — shapes stacked above the container occlude the
+ * label, and the label never leaks above unrelated foreground elements.
+ *
+ * Pure function — returns the input reference unchanged when no
+ * reordering is required so downstream memoization stays stable.
+ */
+export declare function orderBoundTextWithContainers(elements: CanvasElement[]): CanvasElement[];
+export declare function createBoundTextElement(id: string, container: TextContainerElement, style: ElementStyle): TextElement;

package/dist/utils/textStyleTargets.d.ts

@@ -0,0 +1,6 @@
+import { CanvasElement } from '../types';
+/**
+ * Resolve text element ids that should receive font style updates.
+ * Includes directly selected text elements and bound text from selected containers.
+ */
+export declare function collectTextStyleTargetIds(selectedIds: string[], elements: CanvasElement[]): string[];

package/dist/yjsProvider-CXmqUJXr.js

@@ -0,0 +1,72 @@
+import * as c from "yjs";
+import { WebsocketProvider as i } from "y-websocket";
+let n = null, e = null, u = null, l = /* @__PURE__ */ new Set();
+function w(t) {
+  return e && d(), u = t, n = new c.Doc(), e = new i(
+    t.serverUrl,
+    t.roomName,
+    n,
+    {
+      connect: !0,
+      params: t.authToken ? { token: t.authToken } : void 0
+    }
+  ), e.awareness.setLocalState({
+    user: t.user,
+    cursor: null,
+    selectedIds: []
+  }), e.on("status", (r) => {
+    const o = r.status;
+    for (const s of l)
+      s(o);
+  }), { doc: n, provider: e };
+}
+function d() {
+  e && (e.awareness.setLocalState(null), e.disconnect(), e.destroy(), e = null), n && (n.destroy(), n = null), u = null;
+}
+function m() {
+  return n;
+}
+function p() {
+  return e;
+}
+function v() {
+  return n?.getMap("elements");
+}
+function S() {
+  return u;
+}
+function g() {
+  return e !== null && e.wsconnected;
+}
+function C(t) {
+  return l.add(t), () => {
+    l.delete(t);
+  };
+}
+function b(t) {
+  if (!e) return;
+  const r = e.awareness.getLocalState();
+  e.awareness.setLocalState({
+    ...r,
+    ...t
+  });
+}
+function L() {
+  if (!e) return /* @__PURE__ */ new Map();
+  const t = e.awareness.getStates(), r = e.awareness.clientID, o = /* @__PURE__ */ new Map();
+  for (const [s, a] of t)
+    s !== r && a && a.user && o.set(s, a);
+  return o;
+}
+export {
+  w as createCollaborationProvider,
+  d as destroyCollaborationProvider,
+  S as getCollaborationConfig,
+  L as getRemoteAwareness,
+  m as getYDoc,
+  v as getYElements,
+  p as getYProvider,
+  g as isCollaborationActive,
+  C as onStatusChange,
+  b as updateAwareness
+};

package/package.json

@@ -1,107 +1,121 @@
-{
-  "name": "f1ow",
-  "version": "1.0.0",
-  "type": "module",
-  "description": "Interactive canvas drawing toolkit built on KonvaJS — drop-in React component for diagrams, sketches & whiteboards",
-  "author": "Nuumz <info@nuumz.com>",
-  "homepage": "https://github.com/nuumz/f1ow-canvas#readme",
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/nuumz/f1ow-canvas.git"
-  },
-  "bugs": {
-    "url": "https://github.com/nuumz/f1ow-canvas/issues"
-  },
-  "main": "./dist/f1ow.umd.cjs",
-  "module": "./dist/f1ow.js",
-  "types": "./dist/lib/index.d.ts",
-  "exports": {
-    ".": {
-      "types": "./dist/lib/index.d.ts",
-      "import": "./dist/f1ow.js",
-      "require": "./dist/f1ow.umd.cjs"
-    }
-  },
-  "files": [
-    "dist",
-    "LICENSE",
-    "README.md"
-  ],
-  "sideEffects": false,
-  "scripts": {
-    "dev": "vite",
-    "build": "vite build",
-    "build:lib": "vite build --mode lib",
-    "preview": "vite preview",
-    "typecheck": "tsc --noEmit",
-    "prepublishOnly": "npm run typecheck && npm run build:lib"
-  },
-  "peerDependencies": {
-    "react": ">=17.0.0",
-    "react-dom": ">=17.0.0",
-    "konva": ">=9.0.0",
-    "react-konva": ">=18.0.0",
-    "zustand": ">=5.0.0",
-    "yjs": ">=13.0.0",
-    "y-websocket": ">=2.0.0"
-  },
-  "peerDependenciesMeta": {
-    "konva": {
-      "optional": false
-    },
-    "react-konva": {
-      "optional": false
-    },
-    "zustand": {
-      "optional": false
-    },
-    "yjs": {
-      "optional": true
-    },
-    "y-websocket": {
-      "optional": true
-    }
-  },
-  "devDependencies": {
-    "@types/node": "^25.2.1",
-    "@types/rbush": "^4.0.0",
-    "@types/react": "^18.3.18",
-    "@types/react-dom": "^18.3.5",
-    "@vitejs/plugin-react": "^4.3.4",
-    "konva": "^9.3.18",
-    "lucide-react": "^0.468.0",
-    "nanoid": "^5.0.9",
-    "rbush": "^4.0.1",
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1",
-    "react-konva": "^18.2.10",
-    "typescript": "^5.7.3",
-    "vite": "^6.0.7",
-    "vite-plugin-dts": "^4.3.0",
-    "y-websocket": "^3.0.0",
-    "yjs": "^13.6.29",
-    "zustand": "^5.0.3"
-  },
-  "keywords": [
-    "canvas",
-    "drawing",
-    "konvajs",
-    "react",
-    "whiteboard",
-    "diagram",
-    "flowchart",
-    "react-component",
-    "konva",
-    "collaborative",
-    "vector",
-    "sketch"
-  ],
-  "license": "MIT",
-  "pnpm": {
-    "overrides": {
-      "minimatch@9": "9.0.7",
-      "minimatch@10": "10.2.1",
-      "ajv": "8.18.0"
-    }
-  }
-}
+{
+  "name": "f1ow",
+  "version": "1.1.1",
+  "type": "module",
+  "description": "Interactive canvas drawing toolkit built on KonvaJS — drop-in React component for diagrams, sketches & whiteboards",
+  "author": "Nuumz <info@nuumz.com>",
+  "homepage": "https://github.com/nuumz/f1ow-canvas#readme",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/nuumz/f1ow-canvas.git"
+  },
+  "bugs": {
+    "url": "https://github.com/nuumz/f1ow-canvas/issues"
+  },
+  "main": "./dist/f1ow.umd.cjs",
+  "module": "./dist/f1ow.js",
+  "types": "./dist/lib/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/lib/index.d.ts",
+      "import": "./dist/f1ow.js",
+      "require": "./dist/f1ow.umd.cjs"
+    },
+    "./collaboration": {
+      "types": "./dist/lib/collaboration.d.ts",
+      "import": "./dist/f1ow-collaboration.js"
+    }
+  },
+  "files": [
+    "dist",
+    "LICENSE",
+    "README.md"
+  ],
+  "sideEffects": false,
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "build:lib": "vite build --mode lib && vite build --mode lib-collab",
+    "preview": "vite preview",
+    "typecheck": "tsc --noEmit",
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "test:coverage": "vitest run --coverage",
+    "prepublishOnly": "pnpm typecheck && pnpm build:lib"
+  },
+  "peerDependencies": {
+    "konva": ">=9.0.0",
+    "react": ">=19.0.0",
+    "react-dom": ">=19.0.0",
+    "react-konva": ">=19.0.0",
+    "y-websocket": ">=2.0.0",
+    "yjs": ">=13.0.0",
+    "zustand": ">=5.0.0"
+  },
+  "peerDependenciesMeta": {
+    "konva": {
+      "optional": false
+    },
+    "react-konva": {
+      "optional": false
+    },
+    "zustand": {
+      "optional": false
+    },
+    "yjs": {
+      "optional": true
+    },
+    "y-websocket": {
+      "optional": true
+    }
+  },
+  "devDependencies": {
+    "@types/node": "^25.6.0",
+    "@types/rbush": "^4.0.0",
+    "@types/react": "^19.2.2",
+    "@types/react-dom": "^19.2.2",
+    "@vitejs/plugin-react": "^4.7.0",
+    "@vitest/coverage-v8": "^4.1.4",
+    "happy-dom": "^20.9.0",
+    "konva": "^10.2.5",
+    "lucide-react": "^0.468.0",
+    "nanoid": "^5.1.9",
+    "rbush": "^4.0.1",
+    "react": "^19.2.5",
+    "react-dom": "^19.2.5",
+    "react-konva": "^19.2.3",
+    "typescript": "^5.9.3",
+    "vite": "^6.4.2",
+    "vite-plugin-dts": "^4.5.4",
+    "vitest": "^4.1.4",
+    "y-websocket": "^3.0.0",
+    "yjs": "^13.6.30",
+    "zustand": "^5.0.12"
+  },
+  "keywords": [
+    "canvas",
+    "drawing",
+    "konvajs",
+    "react",
+    "whiteboard",
+    "diagram",
+    "flowchart",
+    "react-component",
+    "konva",
+    "collaborative",
+    "vector",
+    "sketch"
+  ],
+  "license": "MIT",
+  "pnpm": {
+    "overrides": {
+      "minimatch@9": "9.0.7",
+      "minimatch@10": "10.2.3",
+      "ajv": "8.18.0",
+      "rollup@4": "4.59.0"
+    }
+  },
+  "dependencies": {
+    "marked": "^18.0.2"
+  }
+}