f1ow 0.1.0 → 0.1.2

package/README.md

@@ -1,61 +1,90 @@
 <p align="center">
-  <h1 align="center">f1ow-canvas</h1>
+  <h1 align="center">f1ow</h1>
   <p align="center">
     Interactive canvas drawing toolkit built on <strong>KonvaJS</strong> — drop-in React component for any project.
   </p>
 </p>
 
 <p align="center">
-  <a href="https://www.npmjs.com/package/f1ow-canvas"><img src="https://img.shields.io/npm/v/f1ow-canvas.svg" alt="npm version"></a>
-  <a href="https://www.npmjs.com/package/f1ow-canvas"><img src="https://img.shields.io/npm/dm/f1ow-canvas.svg" alt="npm downloads"></a>
-  <a href="https://github.com/nuumz/f1ow-canvas/blob/main/LICENSE"><img src="https://img.shields.io/npm/l/f1ow-canvas.svg" alt="license"></a>
+  <a href="https://www.npmjs.com/package/f1ow"><img src="https://img.shields.io/npm/v/f1ow.svg" alt="npm version"></a>
+  <a href="https://www.npmjs.com/package/f1ow"><img src="https://img.shields.io/npm/dm/f1ow.svg" alt="npm downloads"></a>
+  <a href="https://github.com/nuumz/f1ow-canvas/blob/main/LICENSE"><img src="https://img.shields.io/npm/l/f1ow.svg" alt="license"></a>
   <a href="https://github.com/nuumz/f1ow-canvas"><img src="https://img.shields.io/badge/TypeScript-strict-blue.svg" alt="TypeScript"></a>
 </p>
 
+<p align="center">
+  <img src="assets/preview.png" alt="f1ow preview" width="800" />
+</p>
+
 ---
 
-## Features
-
-- **10 Drawing Tools** — Rectangle, Ellipse, Diamond, Line, Arrow, Free Draw, Text, Image, Eraser
-- **Selection & Transform** — Click, drag, resize, rotate, multi-select
-- **Smart Connectors** — Arrows/lines snap to shapes with auto-routing (sharp, curved, elbow)
-- **11 Arrowhead Variants** — Triangle, circle, diamond, bar, crow's foot (ERD), and more
-- **Pan & Zoom** — Hand tool, scroll-wheel, trackpad pinch, zoom-to-fit
-- **Undo / Redo** — 100-step history
-- **Rich Styling** — Stroke, fill, width, dash, opacity, roughness, fonts
-- **Export** — PNG, SVG, JSON
-- **Context Menu** — Built-in + extensible
-- **Grouping & Locking** — Group/ungroup, lock/unlock
-- **Real-Time Collaboration** — Optional CRDT via Yjs (experimental)
-- **Fully Themeable** — Dark mode, custom colors, all via props
-- **Zero CSS** — No external stylesheets required
-- **TypeScript** — Full type safety with strict mode
-
-## Installation
+## ✨ 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).
+- **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.
+- **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.
+- **Real-Time Collaboration** — Optional CRDT via Yjs (experimental) with cursor presence.
+- **Fully Themeable** — Dark mode, custom colors, all via props.
+- **Zero CSS Dependencies** — No external stylesheets required. Inline styled.
+- **TypeScript** — Full type safety with strict mode.
+
+## 📦 Installation
 
 ```bash
-npm install f1ow-canvas
+npm install f1ow
+# or
+pnpm add f1ow
+# or
+yarn add f1ow
+```
+
+> **Peer dependencies:** `react` (≥17), `react-dom` (≥17), `konva` (≥9), `react-konva` (≥18), `zustand` (≥5)
+
+### Next.js / Non-Vite Bundlers
+
+f1ow-canvas uses Web Workers for performance-intensive operations. When using Next.js, Webpack, or other non-Vite bundlers, workers auto-fallback to synchronous mode. For optimal performance on large canvases, see the [Next.js Integration Guide](docs/NEXTJS_INTEGRATION.md).
+
+**TL;DR:**
+- **No config needed** — auto-fallback works out of the box.
+- **For better performance** — copy worker files to `public/` and pass `workerConfig` prop.
+
+```tsx
+<FlowCanvas
+  workerConfig={{
+    elbowWorkerUrl: '/workers/elbowWorker.js',
+    exportWorkerUrl: '/workers/exportWorker.js',
+  }}
+/>
 ```
 
-> **Peer dependencies:** `react` and `react-dom` ≥ 17
+See the [integration guide](docs/NEXTJS_INTEGRATION.md) for detailed setup instructions.
 
-## Quick Start
+## 🚀 Quick Start
 
 ```tsx
-import { FlowCanvas } from "f1ow-canvas";
+import { FlowCanvas } from "f1ow";
 
 function App() {
   return (
     <div style={{ width: "100vw", height: "100vh" }}>
-      <FlowCanvas onChange={(elements) => console.log(elements)} />
+      <FlowCanvas 
+        onChange={(elements) => console.log('Canvas updated:', elements)} 
+        toolbarPosition="bottom"
+      />
     </div>
   );
 }
 ```
 
-That's it — you get a full-featured canvas editor with toolbar, style panel, keyboard shortcuts, and grid out of the box.
+That's it — you get a full-featured canvas editor with a toolbar, style panel, keyboard shortcuts, and grid out of the box.
 
-## Props
+## ⚙️ Props
 
 | Prop | Type | Default | Description |
 | --- | --- | --- | --- |
@@ -68,8 +97,9 @@ That's it — you get a full-featured canvas editor with toolbar, style panel, k
 | `onElementDoubleClick` | `(id, element) => boolean` | — | Return `true` to prevent default |
 | `width` / `height` | `number \| string` | `'100%'` | Canvas dimensions |
 | `tools` | `ToolType[]` | all | Visible tools in toolbar |
-| `defaultStyle` | `Partial<ElementStyle>` | — | Default style for new elements |
-| `showToolbar` | `boolean` | `true` | Show toolbar |
+| `defaultTool` | `ToolType` | `'select'` | Default active tool on mount |
+| `toolbarPosition` | `'top' \| 'bottom' \| 'hidden'` | `'bottom'` | Position of the main toolbar |
+| `showToolbar` | `boolean` | `true` | Show toolbar (legacy, use `toolbarPosition`) |
 | `showStylePanel` | `boolean` | `true` | Show style panel |
 | `showStatusBar` | `boolean` | `true` | Show status bar |
 | `showGrid` | `boolean` | `true` | Show grid |
@@ -80,14 +110,15 @@ That's it — you get a full-featured canvas editor with toolbar, style panel, k
 | `contextMenuItems` | `ContextMenuItem[]` or `(ctx) => ContextMenuItem[]` | — | Extra context menu items |
 | `renderContextMenu` | `(ctx) => ReactNode` | — | Replace built-in context menu |
 | `collaboration` | `CollaborationConfig` | — | Enable real-time collaboration |
+| `workerConfig` | `{ elbowWorkerUrl?: string, exportWorkerUrl?: string, disabled?: boolean }` | — | Worker URLs for Next.js ([docs](docs/NEXTJS_INTEGRATION.md)) |
 
-## Ref API
+## 🕹️ Ref API
 
 Control the canvas programmatically via `ref`:
 
 ```tsx
 import { useRef } from "react";
-import type { FlowCanvasRef } from "f1ow-canvas";
+import type { FlowCanvasRef } from "f1ow";
 
 const ref = useRef<FlowCanvasRef>(null);
 
@@ -115,7 +146,7 @@ const ref = useRef<FlowCanvasRef>(null);
 | `importJSON(json)` | — | Load from JSON |
 | `getStage()` | `Konva.Stage` | Raw Konva stage access |
 
-## Keyboard Shortcuts
+## ⌨️ Keyboard Shortcuts
 
 `⌘` = Cmd (Mac) / Ctrl (Windows/Linux)
 
@@ -128,7 +159,7 @@ const ref = useRef<FlowCanvasRef>(null);
 | `D` Diamond | `E` Eraser | `Del` Delete | `⌘⇧L` Lock toggle |
 | `L` Line | `G` Grid | `⌘+/-/0` Zoom | `⌘]/[` Layer order |
 
-## Theming
+## 🎨 Theming
 
 ```tsx
 <FlowCanvas
@@ -148,7 +179,7 @@ const ref = useRef<FlowCanvasRef>(null);
 
 All properties are optional — only override what you need.
 
-## Context Menu
+## 🖱️ Context Menu
 
 Append custom items or fully replace the built-in menu:
 
@@ -166,7 +197,7 @@ Append custom items or fully replace the built-in menu:
 />
 ```
 
-## Collaboration (Experimental)
+## 🤝 Collaboration (Experimental)
 
 ```tsx
 <FlowCanvas
@@ -180,19 +211,19 @@ Append custom items or fully replace the built-in menu:
 
 Provides CRDT-based real-time sync with cursor presence overlay. Requires a [Yjs WebSocket server](https://github.com/yjs/y-websocket).
 
-## Element Types
+## 🧩 Element Types
 
 `CanvasElement` is a discriminated union of 8 types:
 
-**Shapes** — `rectangle`, `ellipse`, `diamond`
-**Connectors** — `line`, `arrow` (with bindings, routing, arrowheads)
-**Content** — `text`, `image`, `freedraw`
+- **Shapes** — `rectangle`, `ellipse`, `diamond`
+- **Connectors** — `line`, `arrow` (with bindings, routing, arrowheads)
+- **Content** — `text`, `image`, `freedraw`
 
 All elements share: `id`, `x`, `y`, `width`, `height`, `rotation`, `style`, `isLocked`, `isVisible`, `boundElements`, `groupIds`.
 
 > Full type definitions are bundled in the package `.d.ts` files.
 
-## Development
+## 🛠️ Development
 
 ```bash
 pnpm install       # Install dependencies
@@ -201,10 +232,10 @@ pnpm build:lib     # Build library → dist/
 pnpm typecheck     # Type check (strict)
 ```
 
-## Browser Support
+## 🌐 Browser Support
 
 Chrome/Edge ≥ 80 · Firefox ≥ 78 · Safari ≥ 14
 
-## License
+## 📄 License
 
-[MIT](LICENSE) © [KhUmBaL!](https://github.com/nuumz)
+[MIT](LICENSE) © [Nuumz](https://github.com/nuumz)

package/dist/components/StylePanel/ui.d.ts

@@ -0,0 +1,82 @@
+import { default as React } from 'react';
+import { FlowCanvasTheme } from '../../lib/FlowCanvasProps';
+export interface PanelButtonProps {
+    /** Theme for color tokens */
+    theme: FlowCanvasTheme;
+    /**
+     * 'toggle'  (default) — highlights with border + tinted bg when `isActive`
+     * 'action'             — no active state; hover-only background tint
+     */
+    variant?: 'toggle' | 'action';
+    /** Active / selected state (used in toggle variant) */
+    isActive?: boolean;
+    /** When hovered, use danger (red) color instead of accent */
+    dangerHover?: boolean;
+    onClick?: () => void;
+    title?: string;
+    disabled?: boolean;
+    width?: number | string;
+    height?: number;
+    style?: React.CSSProperties;
+    /**
+     * Children may be a render-prop that receives `isHighlighted` so icons
+     * can change colour on hover/active without needing external hover state.
+     *
+     * `isHighlighted` is true when the button is hovered OR active.
+     */
+    children: React.ReactNode | ((isHighlighted: boolean) => React.ReactNode);
+}
+export declare const PanelButton: React.FC<PanelButtonProps>;
+/** Computed icon color helper — use inside PanelButton's render-prop children */
+export declare const iconColor: (isHighlighted: boolean, theme: FlowCanvasTheme, options?: {
+    danger?: boolean;
+    isActive?: boolean;
+}) => string;
+export interface PanelTextButtonProps {
+    theme: FlowCanvasTheme;
+    isActive?: boolean;
+    onClick?: () => void;
+    title?: string;
+    disabled?: boolean;
+    flex?: number | string;
+    width?: number | string;
+    children: React.ReactNode;
+    style?: React.CSSProperties;
+}
+export declare const PanelTextButton: React.FC<PanelTextButtonProps>;
+export interface PanelSectionProps {
+    theme: FlowCanvasTheme;
+    /** Section label rendered as small bold uppercase caption */
+    label?: string;
+    /** Optional element rendered on the right side of the header (e.g. a dropdown) */
+    headerAction?: React.ReactNode;
+    /** Section body content — can be omitted for header-only sections */
+    children?: React.ReactNode;
+    style?: React.CSSProperties;
+}
+export declare const PanelSection: React.FC<PanelSectionProps>;
+export declare const ButtonRow: React.FC<{
+    children: React.ReactNode;
+    gap?: number;
+    wrap?: boolean;
+    style?: React.CSSProperties;
+}>;
+export interface CompactPickerOption {
+    value: string | number;
+    /** Icon render-prop that receives the current display color */
+    icon: React.ReactNode | ((color: string) => React.ReactNode);
+    label: string;
+}
+export interface CompactDropdownPickerProps {
+    options: CompactPickerOption[];
+    value: string | number;
+    onChange: (value: string | number) => void;
+    theme: FlowCanvasTheme;
+    label: string;
+    isOpen: boolean;
+    onToggle: () => void;
+    pickerRef: React.RefObject<HTMLDivElement | null>;
+    /** Number of columns in the dropdown grid. Defaults to all items in a single row. */
+    columns?: number;
+}
+export declare const CompactDropdownPicker: React.FC<CompactDropdownPickerProps>;

package/dist/components/Toolbar/Toolbar.d.ts

@@ -4,6 +4,7 @@ import { FlowCanvasTheme } from '../../lib/FlowCanvasProps';
 interface Props {
     visibleTools: ToolConfig[];
     theme: FlowCanvasTheme;
+    position?: 'top' | 'bottom';
 }
 declare const Toolbar: React.FC<Props>;
 export default Toolbar;