f1ow 1.0.0 → 1.1.0

package/dist/hooks/useFlowAnimation.d.ts

@@ -0,0 +1,8 @@
+import { default as Konva } from 'konva';
+/**
+ * Animate dashOffset on a Konva node to create a "flowing" dash effect.
+ * @param nodeRef - React ref to a Konva Line or Shape node
+ * @param enabled - whether animation is active
+ * @param speed - pixels per second (default 40)
+ */
+export declare function useFlowAnimation(nodeRef: React.RefObject<Konva.Line | Konva.Shape | null>, enabled: boolean, speed?: number): void;

package/dist/lib/FlowCanvasProps.d.ts

@@ -1,8 +1,9 @@
-import { CanvasElement, ElementStyle, ToolType } from '../types';
+import { CanvasElement, ElementStyle, ToolType, ConnectionConfig } from '../types';
 import { ContextMenuItem } from '../components/ContextMenu/ContextMenu';
 import { CollaborationConfig } from '../collaboration/types';
 import { CustomElementConfig } from '../utils/elementRegistry';
 import { RenderAnnotationFn } from '../components/Canvas/AnnotationsOverlay';
+import { CanvasStore } from '../store/useCanvasStore';
 export type { ContextMenuItem };
 /** Context passed to custom context menu renderers */
 export interface ContextMenuContext {
@@ -122,6 +123,19 @@ export interface FlowCanvasProps {
      * Pass a `CollaborationConfig` to connect, or `undefined`/`null` to disable.
      */
     collaboration?: CollaborationConfig | null;
+    /**
+     * Optional canvas store instance produced by `createCanvasStore()`.
+     * When supplied, this `<FlowCanvas>` and its descendant React
+     * subscribers (Toolbar, StylePanel, overlays) read state from this
+     * isolated store instead of the module-level singleton, allowing
+     * multiple canvases to coexist on the same page without cross-talk.
+     *
+     * Note: tools, keyboard shortcuts, and the collaboration sync bridge
+     * still read from the singleton via `getState()`. Until that wiring
+     * is migrated, those subsystems target the singleton even when this
+     * prop is supplied.
+     */
+    store?: CanvasStore;
     /**
      * Register custom element types for this canvas instance.
      *
@@ -143,6 +157,22 @@ export interface FlowCanvasProps {
      * ```
      */
     customElementTypes?: CustomElementConfig[];
+    /**
+     * Configure the connection/binding system behavior.
+     * Controls snap thresholds, port visibility, default line styles, and more.
+     *
+     * @example
+     * ```tsx
+     * <FlowCanvas
+     *   connectionConfig={{
+     *     enablePorts: true,
+     *     snapThreshold: 20,
+     *     defaultLineType: 'elbow',
+     *   }}
+     * />
+     * ```
+     */
+    connectionConfig?: ConnectionConfig;
     /**
      * Configure Web Workers for background processing (elbow routing, SVG export).
      *

package/dist/lib/collaboration.d.ts

@@ -0,0 +1,10 @@
+export type { CollaborationUser, AwarenessState, CollaborationConfig, ConnectionStatus, CollaborationEvent, } from '../collaboration/types';
+export { createCollaborationProvider, destroyCollaborationProvider, getYDoc, getYProvider, getYElements, isCollaborationActive, onStatusChange, updateAwareness, getRemoteAwareness, } from '../collaboration/yjsProvider';
+export { startSync, stopSync } from '../collaboration/syncBridge';
+export { elementToYMap, yMapToElement, SYNC_FIELDS, STYLE_FIELDS } from '../collaboration/syncBridgeCodec';
+export { CollaborationManager } from '../collaboration/CollaborationManager';
+export { SyncWorkerAdapter } from '../collaboration/syncWorker';
+export type { WorkerInMessage, WorkerOutMessage, SyncWorkerCallbacks } from '../collaboration/syncWorker';
+export { useCollaboration } from '../collaboration/useCollaboration';
+export type { UseCollaborationReturn } from '../collaboration/useCollaboration';
+export { default as CursorOverlay } from '../collaboration/CursorOverlay';

package/dist/lib/index.d.ts

@@ -2,20 +2,23 @@ export { default as FlowCanvas } from './FlowCanvas';
 export type { FlowCanvasProps, FlowCanvasRef, FlowCanvasTheme, ContextMenuItem, ContextMenuContext, } from './FlowCanvasProps';
 export { DEFAULT_THEME } from './FlowCanvasProps';
 export type { AnnotationContext, AnnotationScreenBounds, RenderAnnotationFn, } from '../components/Canvas/AnnotationsOverlay';
-export type { CanvasElement, RectangleElement, EllipseElement, DiamondElement, LineElement, ArrowElement, FreeDrawElement, TextElement, ImageElement, BaseElement, ElementStyle, ElementType, ToolType, Point, ViewportState, ConnectionAnchor, BoundElement, Binding, SnapTarget, Arrowhead, LineType, TextAlign, VerticalAlign, ImageScaleMode, ImageCrop, ElementMeta, CanvasOperation, } from '../types';
-export { useCanvasStore } from '../store/useCanvasStore';
+export type { CanvasElement, RectangleElement, EllipseElement, DiamondElement, LineElement, ArrowElement, FreeDrawElement, TextElement, ImageElement, BaseElement, ElementStyle, ElementType, ToolType, Point, ViewportState, ConnectionAnchor, BoundElement, Binding, SnapTarget, Arrowhead, LineType, TextAlign, VerticalAlign, ImageScaleMode, ImageCrop, ElementMeta, CanvasOperation, AnchorId, Port, SnapMode, LineGradient, LineTaper, LineStyleExtension, ConnectionConfig, } from '../types';
+export { useCanvasStore, createCanvasStore } from '../store/useCanvasStore';
+export type { CanvasStore } from '../store/useCanvasStore';
+export { CanvasStoreProvider, useCanvasStoreInstance } from '../store/CanvasStoreContext';
+export type { CanvasStoreProviderProps } from '../store/CanvasStoreContext';
 export { DEFAULT_STYLE, STROKE_COLORS, FILL_COLORS, STROKE_WIDTHS, TOOLS, ARROWHEAD_TYPES, LINE_TYPES, ROUGHNESS_CONFIGS } from '../constants';
 export { generateId } from '../utils/id';
 export { distance, normalizeRect, rotatePoint, isPointInRect, getDiamondPoints, getStrokeDash } from '../utils/geometry';
 export { exportToDataURL, downloadPNG, exportToJSON, downloadJSON, exportToSVG, downloadSVG } from '../utils/export';
 export { drawArrowhead, arrowheadSize, flatToPoints } from '../utils/arrowheads';
 export { computeCurveControlPoint, quadBezierAt, quadBezierTangent, curveArrowPrev, CURVE_RATIO } from '../utils/curve';
+export { anchorToFixedPoint, fixedPointToAnchor, resolvePort, resolveBindingPoint, createBindingFromSnap, isBindingStale, findNearestSnapTarget, recomputeBoundPoints, computeFixedPoint, getEdgePointFromFixedPoint, isConnectable, getConnectionPoints, getEdgePoint, getAnchorPosition, findConnectorsForElement, addBoundElement, removeBoundElement, syncBoundElements, } from '../utils/connection';
 export { LABEL_PADDING_H, LABEL_PADDING_V, LABEL_CORNER, LABEL_LINE_HEIGHT, LABEL_MIN_WIDTH, measureLabelText, computePillSize } from '../utils/labelMetrics';
 export { elementRegistry, registerCustomElement } from '../utils/elementRegistry';
 export type { CustomElementConfig, ValidationResult } from '../utils/elementRegistry';
 export { computeElbowPoints, computeElbowRoute, simplifyElbowPath, clearElbowRouteCache, directionFromFixedPoint, directionFromPoints, directionFromShapeToPoint, directionFromEdgePoint, getElbowPreferredDirection, } from '../utils/elbow';
 export type { Direction } from '../utils/elbow';
-export { getConnectionPoints, getEdgePoint, getEdgePointFromFixedPoint, computeFixedPoint, getAnchorPosition, findNearestSnapTarget, isConnectable, recomputeBoundPoints, findConnectorsForElement, addBoundElement, removeBoundElement, syncBoundElements, } from '../utils/connection';
 export { fileToDataURL, loadImage, computeImageElementDimensions, createImageElement, getImageFilesFromDataTransfer, extractImageDataFromClipboard, clipboardHasImage, resolveImageSource, openImageFilePicker, } from '../utils/image';
 export { getVisibleBounds, getElementAABB, aabbOverlaps, cullToViewport, buildElementMap, cloneElementsForHistory, rafThrottle, batchElementUpdates, } from '../utils/performance';
 export type { AABB } from '../utils/performance';
@@ -41,19 +44,13 @@ export { generateKeyBetween, generateNKeysBetween, isValidFractionalIndex, compa
 export { OperationLog, opAdd, opDelete, opMove, opResize, opStyle, opRotate, opReorder, opUpdatePoints, opSetText, opBatch, applyOperation, detectOperations, } from '../utils/crdtPrep';
 export type { OperationEntry } from '../utils/crdtPrep';
 export type { CollaborationUser, AwarenessState, CollaborationConfig, ConnectionStatus, CollaborationEvent, } from '../collaboration/types';
-export { createCollaborationProvider, destroyCollaborationProvider, getYDoc, getYProvider, getYElements, isCollaborationActive, onStatusChange, updateAwareness, getRemoteAwareness, } from '../collaboration/yjsProvider';
-export { startSync, stopSync } from '../collaboration/syncBridge';
-export { elementToYMap, yMapToElement, SYNC_FIELDS, STYLE_FIELDS } from '../collaboration/syncBridgeCodec';
-export { CollaborationManager } from '../collaboration/CollaborationManager';
-export { SyncWorkerAdapter } from '../collaboration/syncWorker';
-export type { WorkerInMessage, WorkerOutMessage, SyncWorkerCallbacks } from '../collaboration/syncWorker';
 export { useCollaboration } from '../collaboration/useCollaboration';
 export type { UseCollaborationReturn } from '../collaboration/useCollaboration';
 export { default as CursorOverlay } from '../collaboration/CursorOverlay';
 export { TileCache, tileKey } from '../rendering/tileCache';
 export type { TileCoord } from '../rendering/tileCache';
 export { TileRenderer, TILE_SIZE, discreteZoom, worldTileSize, getVisibleTiles, tileBounds, getElementTiles, } from '../rendering/tileRenderer';
-export type { TileDrawFn, TileRendererOptions } from '../rendering/tileRenderer';
+export type { TileDrawFn, TileRendererOptions, TileSpatialQuery } from '../rendering/tileRenderer';
 export { useTileRenderer } from '../rendering/useTileRenderer';
 export type { UseTileRendererOptions, UseTileRendererReturn } from '../rendering/useTileRenderer';
 export { TextureAtlas } from '../webgl/textureAtlas';

package/dist/store/CanvasStoreContext.d.ts

@@ -0,0 +1,14 @@
+import { ReactNode } from 'react';
+import { CanvasStore } from './useCanvasStore';
+export interface CanvasStoreProviderProps {
+    /** Store instance produced by `createCanvasStore()`. */
+    store: CanvasStore;
+    children: ReactNode;
+}
+export declare function CanvasStoreProvider({ store, children }: CanvasStoreProviderProps): import("react/jsx-runtime").JSX.Element;
+/**
+ * Resolve the canvas store for the current React subtree. Falls back to
+ * the singleton `useCanvasStore` when no provider is mounted, so existing
+ * single-instance apps work without changes.
+ */
+export declare function useCanvasStoreInstance(): CanvasStore;

package/dist/store/useCanvasStore.d.ts

@@ -15,11 +15,17 @@ interface ElementDiff {
  */
 interface HistoryEntry {
     diffs: ElementDiff[];
+    /** Element order before this entry, used to restore z-order changes. */
+    beforeOrder?: string[];
+    /** Element order after this entry, used to redo z-order changes. */
+    afterOrder?: string[];
     /** Optional named mark/checkpoint for grouping */
     mark?: string;
     /** Timestamp for squash heuristics */
     timestamp: number;
 }
+type AlignMode = 'left' | 'centerH' | 'right' | 'top' | 'centerV' | 'bottom';
+type FlipAxis = 'horizontal' | 'vertical';
 interface CanvasState {
     elements: CanvasElement[];
     selectedIds: string[];
@@ -35,6 +41,8 @@ interface CanvasState {
     historyIndex: number;
     /** Baseline snapshot for computing diffs against current state */
     _historyBaseline: Map<string, CanvasElement>;
+    /** Baseline element order for z-order history. */
+    _historyOrderBaseline: string[];
     /** Whether history recording is temporarily paused */
     _historyPaused: boolean;
     showGrid: boolean;
@@ -55,6 +63,9 @@ interface CanvasState {
     sendToBack: (ids: string[]) => void;
     bringForward: (ids: string[]) => void;
     sendBackward: (ids: string[]) => void;
+    alignElements: (ids: string[], mode: AlignMode) => void;
+    rotateElements: (ids: string[], deltaDegrees: number) => void;
+    flipElements: (ids: string[], axis: FlipAxis) => void;
     toggleLockElements: (ids: string[]) => void;
     groupElements: (ids: string[]) => void;
     ungroupElements: (ids: string[]) => void;
@@ -123,5 +134,26 @@ interface CanvasState {
     canRedo: () => boolean;
     toggleGrid: () => void;
 }
+/**
+ * Factory: create a fresh canvas store instance.
+ *
+ * Each call returns an independent Zustand store with its own elements,
+ * selection, viewport, and history. Use this with `CanvasStoreProvider`
+ * to render multiple `<FlowCanvas>` instances side-by-side without state
+ * cross-talk on the React subscriber side.
+ *
+ * Note: the module-level `useCanvasStore` singleton remains exported for
+ * backward compatibility and is still used by tools, hooks, and the
+ * collaboration sync bridge that read state via `getState()`. Full
+ * multi-instance isolation across those subsystems is a follow-up phase.
+ */
+export type CanvasStore = ReturnType<typeof createCanvasStore>;
+export declare function createCanvasStore(): import('zustand').UseBoundStore<import('zustand').StoreApi<CanvasState>>;
+/**
+ * Default singleton store. Used by tools, hooks, and the collaboration sync
+ * bridge that read state via `getState()`. Most apps render a single
+ * `<FlowCanvas>` per page, in which case this singleton is what the
+ * `CanvasStoreProvider` exposes.
+ */
 export declare const useCanvasStore: import('zustand').UseBoundStore<import('zustand').StoreApi<CanvasState>>;
 export {};

package/dist/syncBridge-CveP4QyQ.js

@@ -0,0 +1,428 @@
+import * as Y from "yjs";
+import { useCanvasStore } from "./f1ow.js";
+import { getYElements, getYDoc } from "./yjsProvider-mWrSFiNG.js";
+const SYNC_FIELDS = [
+  "id",
+  "type",
+  "x",
+  "y",
+  "width",
+  "height",
+  "rotation",
+  "isLocked",
+  "isVisible",
+  "sortOrder",
+  "version"
+];
+const STYLE_FIELDS = [
+  "strokeColor",
+  "fillColor",
+  "strokeWidth",
+  "opacity",
+  "strokeStyle",
+  "roughness",
+  "fontSize",
+  "fontFamily"
+];
+function elementToYMap(el, yMap) {
+  const elRecord = el;
+  for (const field of SYNC_FIELDS) {
+    const value = elRecord[field];
+    if (value !== void 0) {
+      yMap.set(field, value);
+    }
+  }
+  if (el.style) {
+    for (const sf of STYLE_FIELDS) {
+      yMap.set(`style.${sf}`, el.style[sf]);
+    }
+  }
+  if (el.boundElements) {
+    yMap.set("boundElements", JSON.stringify(el.boundElements));
+  } else {
+    yMap.set("boundElements", null);
+  }
+  if (el.ports) {
+    yMap.set("ports", JSON.stringify(el.ports));
+  }
+  if ("lineStyle" in el && el.lineStyle) {
+    yMap.set("lineStyle", JSON.stringify(el.lineStyle));
+  }
+  if (el.ports) {
+    yMap.set("ports", JSON.stringify(el.ports));
+  }
+  if ("lineStyle" in el && el.lineStyle) {
+    yMap.set("lineStyle", JSON.stringify(el.lineStyle));
+  }
+  if (el.groupIds) {
+    yMap.set("groupIds", JSON.stringify(el.groupIds));
+  }
+  switch (el.type) {
+    case "rectangle":
+      yMap.set("cornerRadius", el.cornerRadius);
+      break;
+    case "line":
+    case "arrow":
+      yMap.set("points", JSON.stringify(el.points));
+      yMap.set("lineType", el.lineType);
+      if (el.curvature !== void 0) yMap.set("curvature", el.curvature);
+      yMap.set("startBinding", el.startBinding ? JSON.stringify(el.startBinding) : null);
+      yMap.set("endBinding", el.endBinding ? JSON.stringify(el.endBinding) : null);
+      if (el.type === "arrow") {
+        yMap.set("startArrowhead", el.startArrowhead);
+        yMap.set("endArrowhead", el.endArrowhead);
+      }
+      break;
+    case "freedraw":
+      yMap.set("points", JSON.stringify(el.points));
+      break;
+    case "text":
+      yMap.set("text", el.text);
+      yMap.set("containerId", el.containerId);
+      yMap.set("textAlign", el.textAlign);
+      yMap.set("verticalAlign", el.verticalAlign);
+      break;
+    case "image":
+      yMap.set("src", el.src);
+      yMap.set("naturalWidth", el.naturalWidth);
+      yMap.set("naturalHeight", el.naturalHeight);
+      yMap.set("scaleMode", el.scaleMode);
+      yMap.set("crop", el.crop ? JSON.stringify(el.crop) : null);
+      yMap.set("cornerRadius", el.cornerRadius);
+      yMap.set("alt", el.alt);
+      break;
+  }
+}
+function yMapToElement(yMap) {
+  const type = yMap.get("type");
+  const id = yMap.get("id");
+  if (!type || !id) return null;
+  const style = {};
+  for (const sf of STYLE_FIELDS) {
+    const val = yMap.get(`style.${sf}`);
+    if (val !== void 0) {
+      style[sf] = val;
+    }
+  }
+  const base = {
+    id,
+    type,
+    x: yMap.get("x") ?? 0,
+    y: yMap.get("y") ?? 0,
+    width: yMap.get("width") ?? 100,
+    height: yMap.get("height") ?? 100,
+    rotation: yMap.get("rotation") ?? 0,
+    isLocked: yMap.get("isLocked") ?? false,
+    isVisible: yMap.get("isVisible") ?? true,
+    version: yMap.get("version") ?? 0,
+    style,
+    boundElements: safeParseJSON(yMap.get("boundElements")) ?? null,
+    groupIds: safeParseJSON(yMap.get("groupIds")) ?? void 0,
+    sortOrder: yMap.get("sortOrder") ?? void 0,
+    ports: safeParseJSON(yMap.get("ports")) ?? void 0
+  };
+  switch (type) {
+    case "rectangle":
+      base.cornerRadius = yMap.get("cornerRadius") ?? 0;
+      break;
+    case "line":
+    case "arrow":
+      base.points = safeParseJSON(yMap.get("points")) ?? [0, 0, 100, 0];
+      base.lineType = yMap.get("lineType") ?? "sharp";
+      base.curvature = yMap.get("curvature") ?? void 0;
+      base.startBinding = safeParseJSON(yMap.get("startBinding"));
+      base.endBinding = safeParseJSON(yMap.get("endBinding"));
+      if (type === "arrow") {
+        base.startArrowhead = yMap.get("startArrowhead") ?? null;
+        base.endArrowhead = yMap.get("endArrowhead") ?? "arrow";
+      }
+      {
+        const ls = safeParseJSON(yMap.get("lineStyle"));
+        if (ls) base.lineStyle = ls;
+      }
+      break;
+    case "freedraw":
+      base.points = safeParseJSON(yMap.get("points")) ?? [];
+      break;
+    case "text":
+      base.text = yMap.get("text") ?? "";
+      base.containerId = yMap.get("containerId") ?? null;
+      base.textAlign = yMap.get("textAlign") ?? "center";
+      base.verticalAlign = yMap.get("verticalAlign") ?? "middle";
+      break;
+    case "image":
+      base.src = yMap.get("src") ?? "";
+      base.naturalWidth = yMap.get("naturalWidth") ?? 0;
+      base.naturalHeight = yMap.get("naturalHeight") ?? 0;
+      base.scaleMode = yMap.get("scaleMode") ?? "fit";
+      base.crop = safeParseJSON(yMap.get("crop")) ?? null;
+      base.cornerRadius = yMap.get("cornerRadius") ?? 0;
+      base.alt = yMap.get("alt") ?? "";
+      break;
+  }
+  return base;
+}
+function safeParseJSON(json) {
+  if (json == null) return null;
+  try {
+    return JSON.parse(json);
+  } catch {
+    return null;
+  }
+}
+let _isApplyingRemote = false;
+let _isApplyingLocal = false;
+let _unsubscribe = null;
+let _yObserverCleanup = null;
+let _syncTimer = null;
+let _lastElements = [];
+function startSync(debounceMs = 50) {
+  const doc = getYDoc();
+  const yElements = getYElements();
+  if (!doc || !yElements) {
+    console.warn("[SyncBridge] Cannot start sync — no Yjs doc");
+    return;
+  }
+  stopSync();
+  if (yElements.size > 0) {
+    _isApplyingRemote = true;
+    const elements = yMapCollectionToElements(yElements);
+    useCanvasStore.getState().setElements(elements);
+    _lastElements = elements;
+    _isApplyingRemote = false;
+  } else {
+    const localElements = useCanvasStore.getState().elements;
+    if (localElements.length > 0) {
+      _isApplyingLocal = true;
+      doc.transact(() => {
+        for (const el of localElements) {
+          const yMap = new Y.Map();
+          elementToYMap(el, yMap);
+          yElements.set(el.id, yMap);
+        }
+      }, "local-init");
+      _isApplyingLocal = false;
+    }
+    _lastElements = localElements;
+  }
+  const yObserver = (events, transaction) => {
+    if (transaction.origin === "local-sync" || transaction.origin === "local-init") return;
+    if (_isApplyingLocal) return;
+    _isApplyingRemote = true;
+    const store = useCanvasStore.getState();
+    let elements = [..._lastElements];
+    let changed = false;
+    for (const [key, change] of events.keys) {
+      if (change.action === "add" || change.action === "update") {
+        const yMap = yElements.get(key);
+        if (yMap) {
+          const el = yMapToElement(yMap);
+          if (el) {
+            const idx = elements.findIndex((e) => e.id === key);
+            if (idx >= 0) {
+              elements[idx] = el;
+            } else {
+              elements.push(el);
+            }
+            changed = true;
+          }
+        }
+      } else if (change.action === "delete") {
+        elements = elements.filter((e) => e.id !== key);
+        changed = true;
+      }
+    }
+    if (changed) {
+      elements.sort((a, b) => {
+        if (a.sortOrder && b.sortOrder) {
+          return a.sortOrder < b.sortOrder ? -1 : a.sortOrder > b.sortOrder ? 1 : 0;
+        }
+        return 0;
+      });
+      store.setElements(elements);
+      _lastElements = elements;
+    }
+    _isApplyingRemote = false;
+  };
+  let _deepObserverTimer = null;
+  const _dirtyElementIds = /* @__PURE__ */ new Set();
+  const deepObserver = (events) => {
+    if (_isApplyingLocal) return;
+    for (const event of events) {
+      let target = event.target;
+      while (target && !(target instanceof Y.Map && target.parent === yElements)) {
+        target = target.parent;
+      }
+      if (target instanceof Y.Map) {
+        const id = target.get("id");
+        if (id) _dirtyElementIds.add(id);
+      }
+    }
+    if (_deepObserverTimer) clearTimeout(_deepObserverTimer);
+    _deepObserverTimer = setTimeout(() => {
+      if (_dirtyElementIds.size === 0 || _isApplyingLocal) return;
+      _isApplyingRemote = true;
+      let elements = [..._lastElements];
+      let changed = false;
+      for (const id of _dirtyElementIds) {
+        const yMap = yElements.get(id);
+        if (!yMap) continue;
+        const el = yMapToElement(yMap);
+        if (!el) continue;
+        const idx = elements.findIndex((e) => e.id === id);
+        if (idx >= 0) {
+          elements[idx] = el;
+          changed = true;
+        }
+      }
+      _dirtyElementIds.clear();
+      if (changed) {
+        useCanvasStore.getState().setElements(elements);
+        _lastElements = elements;
+      }
+      _isApplyingRemote = false;
+    }, 16);
+  };
+  yElements.observe(yObserver);
+  yElements.observeDeep(deepObserver);
+  _yObserverCleanup = () => {
+    yElements.unobserve(yObserver);
+    yElements.unobserveDeep(deepObserver);
+    if (_deepObserverTimer) clearTimeout(_deepObserverTimer);
+    _dirtyElementIds.clear();
+  };
+  _unsubscribe = useCanvasStore.subscribe(
+    (state) => {
+      if (_isApplyingRemote) return;
+      if (state.elements === _lastElements) return;
+      if (_syncTimer) clearTimeout(_syncTimer);
+      _syncTimer = setTimeout(() => {
+        syncLocalToYjs(state.elements, yElements, doc);
+      }, debounceMs);
+    }
+  );
+}
+function stopSync() {
+  if (_unsubscribe) {
+    _unsubscribe();
+    _unsubscribe = null;
+  }
+  if (_yObserverCleanup) {
+    _yObserverCleanup();
+    _yObserverCleanup = null;
+  }
+  if (_syncTimer) {
+    clearTimeout(_syncTimer);
+    _syncTimer = null;
+  }
+  _lastElements = [];
+}
+function syncLocalToYjs(elements, yElements, doc) {
+  _isApplyingLocal = true;
+  _lastElements = elements;
+  const localMap = /* @__PURE__ */ new Map();
+  for (const el of elements) {
+    localMap.set(el.id, el);
+  }
+  doc.transact(() => {
+    for (const [id] of yElements.entries()) {
+      if (!localMap.has(id)) {
+        yElements.delete(id);
+      }
+    }
+    for (const el of elements) {
+      let yMap = yElements.get(el.id);
+      if (!yMap) {
+        yMap = new Y.Map();
+        elementToYMap(el, yMap);
+        yElements.set(el.id, yMap);
+      } else {
+        updateYMapFromElement(el, yMap);
+      }
+    }
+  }, "local-sync");
+  _isApplyingLocal = false;
+}
+function updateYMapFromElement(el, yMap) {
+  const elRecord = el;
+  for (const field of SYNC_FIELDS) {
+    const value = elRecord[field];
+    if (value !== yMap.get(field)) {
+      yMap.set(field, value);
+    }
+  }
+  if (el.style) {
+    for (const sf of STYLE_FIELDS) {
+      const val = el.style[sf];
+      if (val !== yMap.get(`style.${sf}`)) {
+        yMap.set(`style.${sf}`, val);
+      }
+    }
+  }
+  const beJson = el.boundElements ? JSON.stringify(el.boundElements) : null;
+  if (beJson !== yMap.get("boundElements")) {
+    yMap.set("boundElements", beJson);
+  }
+  switch (el.type) {
+    case "rectangle":
+      if (el.cornerRadius !== yMap.get("cornerRadius")) {
+        yMap.set("cornerRadius", el.cornerRadius);
+      }
+      break;
+    case "line":
+    case "arrow": {
+      const ptsJson = JSON.stringify(el.points);
+      if (ptsJson !== yMap.get("points")) yMap.set("points", ptsJson);
+      if (el.lineType !== yMap.get("lineType")) yMap.set("lineType", el.lineType);
+      if (el.curvature !== yMap.get("curvature")) yMap.set("curvature", el.curvature);
+      const sbJson = el.startBinding ? JSON.stringify(el.startBinding) : null;
+      if (sbJson !== yMap.get("startBinding")) yMap.set("startBinding", sbJson);
+      const ebJson = el.endBinding ? JSON.stringify(el.endBinding) : null;
+      if (ebJson !== yMap.get("endBinding")) yMap.set("endBinding", ebJson);
+      if (el.type === "arrow") {
+        if (el.startArrowhead !== yMap.get("startArrowhead")) yMap.set("startArrowhead", el.startArrowhead);
+        if (el.endArrowhead !== yMap.get("endArrowhead")) yMap.set("endArrowhead", el.endArrowhead);
+      }
+      break;
+    }
+    case "freedraw": {
+      const fpJson = JSON.stringify(el.points);
+      if (fpJson !== yMap.get("points")) yMap.set("points", fpJson);
+      break;
+    }
+    case "text":
+      if (el.text !== yMap.get("text")) yMap.set("text", el.text);
+      if (el.containerId !== yMap.get("containerId")) yMap.set("containerId", el.containerId);
+      if (el.textAlign !== yMap.get("textAlign")) yMap.set("textAlign", el.textAlign);
+      if (el.verticalAlign !== yMap.get("verticalAlign")) yMap.set("verticalAlign", el.verticalAlign);
+      break;
+    case "image":
+      if (el.src !== yMap.get("src")) yMap.set("src", el.src);
+      if (el.naturalWidth !== yMap.get("naturalWidth")) yMap.set("naturalWidth", el.naturalWidth);
+      if (el.naturalHeight !== yMap.get("naturalHeight")) yMap.set("naturalHeight", el.naturalHeight);
+      if (el.scaleMode !== yMap.get("scaleMode")) yMap.set("scaleMode", el.scaleMode);
+      const cropJson = el.crop ? JSON.stringify(el.crop) : null;
+      if (cropJson !== yMap.get("crop")) yMap.set("crop", cropJson);
+      if (el.cornerRadius !== yMap.get("cornerRadius")) yMap.set("cornerRadius", el.cornerRadius);
+      if (el.alt !== yMap.get("alt")) yMap.set("alt", el.alt);
+      break;
+  }
+}
+function yMapCollectionToElements(yElements) {
+  const elements = [];
+  for (const [, yMap] of yElements.entries()) {
+    const el = yMapToElement(yMap);
+    if (el) elements.push(el);
+  }
+  elements.sort((a, b) => {
+    if (a.sortOrder && b.sortOrder) {
+      return a.sortOrder < b.sortOrder ? -1 : a.sortOrder > b.sortOrder ? 1 : 0;
+    }
+    return 0;
+  });
+  return elements;
+}
+export {
+  startSync,
+  stopSync
+};