f1ow 0.1.5 → 1.1.0

package/README.md

@@ -20,15 +20,16 @@
 
 ## ✨ Features
 
-- **10 Drawing Tools** — Rectangle, Ellipse, Diamond, Line, Arrow, Free Draw, Text, Image, Eraser.
-- **Smart Connectors** — Arrows and lines snap to shapes with auto-routing (sharp, curved, elbow).
+- **9 Drawing Tools + Navigation** — Rectangle, Ellipse, Diamond, Line, Arrow, Free Draw, Text, Image, Eraser, plus Select and Hand tools.
+- **Smart Connectors** — Arrows and lines snap to shapes with auto-routing (sharp, curved, elbow with obstacle-aware fallback).
 - **11 Arrowhead Variants** — Triangle, circle, diamond, bar, crow's foot (ERD), and more.
 - **Selection & Transform** — Click, drag, resize, rotate, multi-select, group/ungroup, lock/unlock.
 - **Pan & Zoom** — Hand tool, scroll-wheel, trackpad pinch, zoom-to-fit, zoom-to-selection.
 - **Rich Styling** — Stroke, fill, width, dash, opacity, roughness, fonts.
+- **Markdown Text** — Text elements render markdown (bold, italic, lists, links, code) with inline editing via double-click.
 - **Customizable UI** — Floating toolbar (top/bottom/hidden), style panel, context menu.
-- **Undo / Redo** — 100-step history snapshot system.
-- **Export** — Export canvas to PNG, SVG, or JSON.
+- **Undo / Redo** — 100-step diff-based history system.
+- **Export** — Export canvas to PNG, SVG (with graceful fallback), or JSON.
 - **Real-Time Collaboration** — Optional CRDT via Yjs (experimental) with cursor presence.
 - **Plugin / Extension System** — Register custom element types with per-type validation and default values.
 - **Element Validation** — Every mutation path (add, update, import) is validated; invalid elements are rejected gracefully.
@@ -36,6 +37,10 @@
 - **Zero CSS Dependencies** — No external stylesheets required. Inline styled.
 - **TypeScript** — Full type safety with strict mode.
 
+> **Multi-instance support (preview):** `createCanvasStore()` and `<CanvasStoreProvider>` let React subscribers (`<FlowCanvas>`, toolbar, style panel, overlays) operate on independent stores. Tools, keyboard shortcuts, and the collaboration sync bridge still read from the singleton store via `getState()`, so full per-instance isolation across those subsystems is a follow-up phase. Until then, mounting multiple editable `<FlowCanvas>` instances on the same page is supported for layout/preview use cases but tool input and collaboration target the singleton.
+>
+> **Optional collaboration peers:** `yjs` and `y-websocket` are loaded via dynamic `import()` and ship in separate chunks. Apps that never enable collaboration do not need either package installed when consuming the ESM build. Lower-level CRDT APIs (`createCollaborationProvider`, `startSync`, `CollaborationManager`, codec helpers) live under the `f1ow/collaboration` subpath; the root `f1ow` entry only re-exports types, the `useCollaboration` hook (lazy), and `CursorOverlay`.
+
 ## 📦 Installation
 
 ```bash

package/dist/components/Canvas/AnnotationsOverlay.d.ts

@@ -0,0 +1,34 @@
+import { default as React } from 'react';
+import { CanvasElement, ViewportState } from '../../types';
+/** Screen-space bounding box passed to the annotation renderer */
+export interface AnnotationScreenBounds {
+    /** Left edge in pixels (relative to canvas container) */
+    x: number;
+    /** Top edge in pixels (relative to canvas container) */
+    y: number;
+    /** Width in screen pixels */
+    width: number;
+    /** Height in screen pixels */
+    height: number;
+}
+/** Context provided to the `renderAnnotation` callback */
+export interface AnnotationContext {
+    /** The canvas element being annotated */
+    element: CanvasElement;
+    /** Screen-space bounding box of the element (after zoom/pan) */
+    screenBounds: AnnotationScreenBounds;
+    /** Current viewport zoom level */
+    scale: number;
+}
+/** Signature for the `renderAnnotation` prop */
+export type RenderAnnotationFn = (ctx: AnnotationContext) => React.ReactNode;
+interface AnnotationsOverlayProps {
+    elements: CanvasElement[];
+    viewport: ViewportState;
+    /** Container dimensions for viewport-culling */
+    containerWidth: number;
+    containerHeight: number;
+    renderAnnotation: RenderAnnotationFn;
+}
+export declare const AnnotationsOverlay: React.FC<AnnotationsOverlayProps>;
+export {};

package/dist/components/Canvas/ConnectionPoints.d.ts

@@ -6,6 +6,8 @@ interface Props {
     snapTarget: SnapTarget | null;
     /** Whether to render at all (only during line/arrow tool) */
     visible: boolean;
+    /** Whether to render the center binding indicator */
+    showCenterIndicator?: boolean;
     /** Accent color */
     color?: string;
     /** Current viewport scale for LOD */

package/dist/components/Canvas/TextHtmlOverlay.d.ts

@@ -0,0 +1,12 @@
+import { default as React } from 'react';
+import { ViewportState, TextElement } from '../../types';
+export interface TextHtmlOverlayProps {
+    viewport: ViewportState;
+    autoEditTextId: string | null;
+    onEditStart: (id: string) => void;
+    onEditEnd: (id: string, isEmpty: boolean) => void;
+    onChange: (id: string, updates: Partial<TextElement>) => void;
+}
+export declare const TextHtmlOverlay: React.FC<TextHtmlOverlayProps>;
+export declare function isStylePanelTarget(target: EventTarget | null): boolean;
+export declare function shouldKeepEditingOnBlur(relatedTarget: EventTarget | null, activeElement: EventTarget | null): boolean;

package/dist/components/shapes/TextLabel.d.ts

@@ -0,0 +1,16 @@
+import { default as React } from 'react';
+import { TextElement, ArrowElement, LineElement } from '../../types';
+export interface TextLabelProps {
+    element: TextElement;
+    /** The parent connector element (arrow or line) */
+    connector: ArrowElement | LineElement;
+    onChange: (id: string, updates: Partial<TextElement>) => void;
+    /** If true, auto-opens the editor immediately after mount */
+    autoEdit?: boolean;
+    /** Called to notify parent that text editing started */
+    onEditStart?: (id: string) => void;
+    /** Called to notify parent that text editing ended */
+    onEditEnd?: (id: string, isEmpty: boolean) => void;
+}
+declare const _default: React.NamedExoticComponent<TextLabelProps>;
+export default _default;

package/dist/components/shapes/TextShape.d.ts

@@ -6,6 +6,7 @@ interface Props {
     /** When true, individual drag is disabled — the parent KonvaGroup handles dragging */
     isGrouped?: boolean;
     onSelect: (id: string) => void;
+    onDoubleClick?: (id: string) => void;
     onChange: (id: string, updates: Partial<TextElement>) => void;
     onDragMove?: (id: string, updates: Partial<TextElement>) => void;
     /** If true, auto-opens the textarea editor immediately after mount */