@nice2dev/ui-diagrams 1.0.2

package/CHANGELOG.md

@@ -0,0 +1,64 @@
+# @nice2dev/ui-diagrams — Changelog
+
+All notable changes to the diagram editor package.
+
+## [0.2.0] — 2026-03-25
+
+### Added (FAZA 1.1)
+
+- **NiceDiagramEditor** — full-featured diagram editor:
+  - Canvas with pan/zoom, minimap
+  - Node creation/editing, edge routing (kliknię-port, dnd)
+  - 8 diagram types: flowchart, org chart, mind map, BPMN, ER, sequence, state machine, network topology
+  - Auto-layout: dagre, force-directed, grid, radial, tree
+  - Animation timeline, data binding from DataSource
+  - Export: SVG, PNG, PDF, .ndd.json, Mermaid
+  - Import: .ndd.json, Mermaid, draw.io XML
+- **NiceDiagramViewer** — read-only viewer with auto-play animations, tooltips, fullscreen
+- **Business visualizers**: NiceWorkflowVisualizer, NiceDatabaseSchemaViewer, NiceOrgChartVisualizer, NiceProcessMiningDiagram, NiceDependencyGraph, NiceNetworkTopology, NiceDecisionTreeEditor
+- **Collaborative editing** — multi-user CRDT/op-log with visible cursors
+- **Versioning** — history with diff (node added/removed/moved/restyled)
+- **Comments / annotations** — sticky notes, @mentions, resolve
+- **Templates gallery** — ready-made templates per diagram type
+- **Snap to grid + alignment guides**
+- **Custom node shapes** — SVG/React component shape registry
+- **Conditional styling** — data-driven colors (e.g. red if SLA > threshold)
+- **Search & filter** — node search by name/type, layer filtering
+- **DiagramCellRenderer** — mini-diagram in DataGrid cells with expand-to-modal
+- AI layout suggestions via `useAIDiagramLayout`
+
+### Tests
+
+- 11 unit tests + E2E tests (editor, viewer, workflow, org, deps, network, decision tree)
+
+---
+
+## [0.1.0] — 2025-06-01
+
+Initial beta release with `.ndd.json` format specification.
+
+All notable changes to `@nice2dev/ui-diagrams` will be documented in this file.
+
+The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/),
+and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
+
+---
+
+## [0.1.0] — 2026-03-18
+
+### 📊 Initial Release
+
+First release of `@nice2dev/ui-diagrams` — a diagram editor and viewer suite for React.
+
+### Features
+
+- **NiceDiagramEditor** — full-featured diagram editor with drag-and-drop nodes, edge routing, zoom/pan, undo/redo, snap-to-grid, groups, and multi-select
+- **NiceDiagramViewer** — read-only diagram viewer with zoom/pan and auto-fit
+- **NiceWorkflowVisualizer** — step-based workflow visualization with status indicators, auto-layout, and animated transitions
+- **NiceOrgChartVisualizer** — hierarchical org chart with status badges, expand/collapse, and search
+- **NiceDependencyGraph** — package dependency graph with color-coded version ranges and circular dependency detection
+- **NiceNetworkTopology** — network topology visualizer with device icons, connection status, and traffic animation
+- **NiceDecisionTreeEditor** — interactive decision tree editor with yes/no branches, condition evaluation, and collapse/expand
+- **Animation system** — liquid flow, particle effects, and style presets for edges and nodes
+- **i18n** — full internationalization support via NiceI18nProvider
+- **Theming** — CSS custom properties with light/dark mode support

package/README.md

@@ -0,0 +1,49 @@
+# @nice2dev/ui-diagrams
+
+> Full-featured diagram editor & viewer for React — flowchart, BPMN, ER, org chart, mind map, sequence, state machine, network topology.
+
+## Features
+
+### NiceDiagramEditor
+- Canvas with pan/zoom (scroll wheel, pinch, minimap)
+- Node CRUD — drag, resize, double-click edit, custom shapes (SVG/React)
+- Edge creation — click port → drag to target port
+- Toolbar — select, add node/edge, group, delete, undo/redo
+- Property panel — node style (shape, color, border, font, icon), edge style (line, color, arrow)
+- Auto-layout — dagre hierarchical, force-directed, grid, radial, tree
+- Animations timeline — entry/exit/highlight per element
+- Data binding — DataSource → auto-generated diagram (e.g., org chart from employee table)
+- Export — SVG, PNG, PDF, `.ndd.json`, Mermaid
+- Import — `.ndd.json`, Mermaid, draw.io XML (basic)
+- i18n (10+ languages) + theming (light/dark, custom CSS variables)
+
+### NiceDiagramViewer
+- Read-only with pan/zoom
+- Auto-play animations (step-by-step sequence)
+- Interactive tooltips on hover
+- Fullscreen + print mode
+
+### Business Integrations
+- **NiceWorkflowVisualizer** — auto-generate from workflow engine
+- **NiceDatabaseSchemaViewer** — ER diagram from DB metadata
+- **NiceOrgChartVisualizer** — org chart from HR data
+- **NiceProcessMiningDiagram** — frequent paths, bottlenecks, SLA violations
+- **NiceDependencyGraph** — module/microservice dependency visualization
+- **NiceNetworkTopology** — auto-discovery + real-time status (green/yellow/red)
+- **NiceDecisionTreeEditor** — decision tree with conditions, probabilities
+
+### Collaboration
+- Multi-user CRDT editing with visible cursors
+- Version history with visual diff (node added/removed/moved)
+- Comments & annotations — sticky notes, @mentions, resolve
+- Diagram template gallery
+
+## Installation
+
+```bash
+npm install @nice2dev/ui-diagrams
+```
+
+## License
+
+MIT © NiceToDev

package/dist/__tests__/DiagramModel.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=DiagramModel.test.d.ts.map

package/dist/__tests__/DiagramModel.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DiagramModel.test.d.ts","sourceRoot":"","sources":["../../src/__tests__/DiagramModel.test.ts"],"names":[],"mappings":""}

package/dist/__tests__/animationEngine.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=animationEngine.test.d.ts.map

package/dist/__tests__/animationEngine.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"animationEngine.test.d.ts","sourceRoot":"","sources":["../../src/__tests__/animationEngine.test.ts"],"names":[],"mappings":""}

package/dist/__tests__/businessVisualizers.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=businessVisualizers.test.d.ts.map

package/dist/__tests__/businessVisualizers.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"businessVisualizers.test.d.ts","sourceRoot":"","sources":["../../src/__tests__/businessVisualizers.test.ts"],"names":[],"mappings":""}

package/dist/__tests__/dataBinding.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=dataBinding.test.d.ts.map

package/dist/__tests__/dataBinding.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"dataBinding.test.d.ts","sourceRoot":"","sources":["../../src/__tests__/dataBinding.test.ts"],"names":[],"mappings":""}

package/dist/__tests__/diagramTemplateGallery.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=diagramTemplateGallery.test.d.ts.map

package/dist/__tests__/diagramTemplateGallery.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"diagramTemplateGallery.test.d.ts","sourceRoot":"","sources":["../../src/__tests__/diagramTemplateGallery.test.ts"],"names":[],"mappings":""}

package/dist/__tests__/exportEngine.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=exportEngine.test.d.ts.map

package/dist/__tests__/exportEngine.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"exportEngine.test.d.ts","sourceRoot":"","sources":["../../src/__tests__/exportEngine.test.ts"],"names":[],"mappings":""}

package/dist/__tests__/i18n-locales.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=i18n-locales.test.d.ts.map

package/dist/__tests__/i18n-locales.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"i18n-locales.test.d.ts","sourceRoot":"","sources":["../../src/__tests__/i18n-locales.test.ts"],"names":[],"mappings":""}

package/dist/__tests__/layoutEngine.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=layoutEngine.test.d.ts.map

package/dist/__tests__/layoutEngine.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"layoutEngine.test.d.ts","sourceRoot":"","sources":["../../src/__tests__/layoutEngine.test.ts"],"names":[],"mappings":""}

package/dist/__tests__/serialization.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=serialization.test.d.ts.map

package/dist/__tests__/serialization.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"serialization.test.d.ts","sourceRoot":"","sources":["../../src/__tests__/serialization.test.ts"],"names":[],"mappings":""}

package/dist/__tests__/setup.d.ts

@@ -0,0 +1,2 @@
+
+//# sourceMappingURL=setup.d.ts.map

package/dist/__tests__/setup.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"setup.d.ts","sourceRoot":"","sources":["../../src/__tests__/setup.ts"],"names":[],"mappings":"AACA,OAAO,kCAAkC,CAAC"}

package/dist/__tests__/snapGrid.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=snapGrid.test.d.ts.map

package/dist/__tests__/snapGrid.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"snapGrid.test.d.ts","sourceRoot":"","sources":["../../src/__tests__/snapGrid.test.ts"],"names":[],"mappings":""}

package/dist/__tests__/sprint24-diagrams.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=sprint24-diagrams.test.d.ts.map

package/dist/__tests__/sprint24-diagrams.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"sprint24-diagrams.test.d.ts","sourceRoot":"","sources":["../../src/__tests__/sprint24-diagrams.test.ts"],"names":[],"mappings":""}

package/dist/components/AnimationTimeline.d.ts

@@ -0,0 +1,21 @@
+import { default as React } from 'react';
+import { DiagramAnimation } from '../types/diagramTypes';
+
+export interface AnimationTimelineProps {
+    animations: readonly DiagramAnimation[];
+    onAdd?: (anim: Omit<DiagramAnimation, 'id'>) => void;
+    onRemove?: (id: string) => void;
+    onUpdate?: (id: string, patch: Partial<Omit<DiagramAnimation, 'id'>>) => void;
+    onPlay?: () => void;
+    onStop?: () => void;
+    isPlaying?: boolean;
+    /** Available target IDs (node/edge) for the dropdown */
+    availableTargets?: Array<{
+        id: string;
+        label: string;
+        type: 'node' | 'edge' | 'group';
+    }>;
+    className?: string;
+}
+export declare const AnimationTimeline: React.FC<AnimationTimelineProps>;
+//# sourceMappingURL=AnimationTimeline.d.ts.map

package/dist/components/AnimationTimeline.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AnimationTimeline.d.ts","sourceRoot":"","sources":["../../src/components/AnimationTimeline.tsx"],"names":[],"mappings":"AAAA;;GAEG;AAEH,OAAO,KAAgC,MAAM,OAAO,CAAC;AACrD,OAAO,KAAK,EAAE,gBAAgB,EAA+B,MAAM,uBAAuB,CAAC;AAM3F,MAAM,WAAW,sBAAsB;IACrC,UAAU,EAAE,SAAS,gBAAgB,EAAE,CAAC;IACxC,KAAK,CAAC,EAAE,CAAC,IAAI,EAAE,IAAI,CAAC,gBAAgB,EAAE,IAAI,CAAC,KAAK,IAAI,CAAC;IACrD,QAAQ,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IAChC,QAAQ,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,EAAE,KAAK,EAAE,OAAO,CAAC,IAAI,CAAC,gBAAgB,EAAE,IAAI,CAAC,CAAC,KAAK,IAAI,CAAC;IAC9E,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,wDAAwD;IACxD,gBAAgB,CAAC,EAAE,KAAK,CAAC;QAAE,EAAE,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,MAAM,GAAG,MAAM,GAAG,OAAO,CAAA;KAAE,CAAC,CAAC;IACzF,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAUD,eAAO,MAAM,iBAAiB,EAAE,KAAK,CAAC,EAAE,CAAC,sBAAsB,CAmN9D,CAAC"}

package/dist/components/DiagramCanvas.d.ts

@@ -0,0 +1,54 @@
+import { default as React } from 'react';
+import { DiagramNode, DiagramEdge, DiagramGroup, DiagramViewport, DiagramThemeOverrides, DiagramViewMode, Point, Size } from '../types/diagramTypes';
+import { AnimationState } from '../core/animationEngine';
+import { ParticleEngineState } from '../core/diagramParticleEngine';
+
+export interface DiagramCanvasProps {
+    nodes: readonly DiagramNode[];
+    edges: readonly DiagramEdge[];
+    groups?: readonly DiagramGroup[];
+    viewport: DiagramViewport;
+    onViewportChange?: (viewport: DiagramViewport) => void;
+    theme?: DiagramThemeOverrides;
+    /** Currently selected element IDs */
+    selectedId?: string | null;
+    selectedIds?: readonly string[];
+    onSelectElement?: (id: string | null) => void;
+    onMultiSelect?: (ids: string[]) => void;
+    /** Node drag callbacks (editor only) */
+    onNodeDragStart?: (nodeId: string) => void;
+    onNodeDrag?: (nodeId: string, position: Point) => void;
+    onNodeDragEnd?: (nodeId: string, position: Point) => void;
+    /** Node resize (editor only) */
+    onNodeResize?: (nodeId: string, size: Size, position: Point) => void;
+    /** Edge creation (editor only) */
+    onEdgeCreate?: (sourceNodeId: string, targetNodeId: string) => void;
+    /** In-place text editing */
+    onNodeLabelChange?: (nodeId: string, label: string) => void;
+    /** Animation states (viewer only) */
+    animationStates?: Map<string, AnimationState>;
+    /** Particle engine state (liquid flows, glow, particles) */
+    particleState?: ParticleEngineState;
+    /** View mode: editor / player / playerAnimated */
+    viewMode?: DiagramViewMode;
+    /** Ghost opacity for click-to-reveal elements */
+    ghostOpacity?: number;
+    /** Group collapse/expand callback */
+    onGroupCollapse?: (groupId: string) => void;
+    /** Node collapse/expand callback */
+    onNodeCollapse?: (nodeId: string) => void;
+    /** Interaction trigger callback */
+    onInteraction?: (nodeId: string, interactionId: string) => void;
+    /** Whether the canvas is interactive (editor) or read-only (viewer) */
+    interactive?: boolean;
+    /** Show grid */
+    showGrid?: boolean;
+    /** Show rulers */
+    showRulers?: boolean;
+    /** Snap to grid */
+    snapToGrid?: boolean;
+    gridSnapSize?: number;
+    className?: string;
+}
+export declare const DiagramCanvas: React.FC<DiagramCanvasProps>;
+//# sourceMappingURL=DiagramCanvas.d.ts.map

package/dist/components/DiagramCanvas.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DiagramCanvas.d.ts","sourceRoot":"","sources":["../../src/components/DiagramCanvas.tsx"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,KAA4D,MAAM,OAAO,CAAC;AACjF,OAAO,KAAK,EACV,WAAW,EACX,WAAW,EACX,YAAY,EACZ,eAAe,EACf,qBAAqB,EACrB,eAAe,EACf,KAAK,EACL,IAAI,EACL,MAAM,uBAAuB,CAAC;AAC/B,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,yBAAyB,CAAC;AAC9D,OAAO,KAAK,EAAE,mBAAmB,EAA8B,MAAM,+BAA+B,CAAC;AAKrG,MAAM,WAAW,kBAAkB;IACjC,KAAK,EAAE,SAAS,WAAW,EAAE,CAAC;IAC9B,KAAK,EAAE,SAAS,WAAW,EAAE,CAAC;IAC9B,MAAM,CAAC,EAAE,SAAS,YAAY,EAAE,CAAC;IACjC,QAAQ,EAAE,eAAe,CAAC;IAC1B,gBAAgB,CAAC,EAAE,CAAC,QAAQ,EAAE,eAAe,KAAK,IAAI,CAAC;IACvD,KAAK,CAAC,EAAE,qBAAqB,CAAC;IAE9B,qCAAqC;IACrC,UAAU,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC3B,WAAW,CAAC,EAAE,SAAS,MAAM,EAAE,CAAC;IAChC,eAAe,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAC;IAC9C,aAAa,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;IAExC,wCAAwC;IACxC,eAAe,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IAC3C,UAAU,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,QAAQ,EAAE,KAAK,KAAK,IAAI,CAAC;IACvD,aAAa,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,QAAQ,EAAE,KAAK,KAAK,IAAI,CAAC;IAE1D,gCAAgC;IAChC,YAAY,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,IAAI,EAAE,IAAI,EAAE,QAAQ,EAAE,KAAK,KAAK,IAAI,CAAC;IAErE,kCAAkC;IAClC,YAAY,CAAC,EAAE,CAAC,YAAY,EAAE,MAAM,EAAE,YAAY,EAAE,MAAM,KAAK,IAAI,CAAC;IAEpE,4BAA4B;IAC5B,iBAAiB,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAE5D,qCAAqC;IACrC,eAAe,CAAC,EAAE,GAAG,CAAC,MAAM,EAAE,cAAc,CAAC,CAAC;IAE9C,4DAA4D;IAC5D,aAAa,CAAC,EAAE,mBAAmB,CAAC;IAEpC,kDAAkD;IAClD,QAAQ,CAAC,EAAE,eAAe,CAAC;IAE3B,iDAAiD;IACjD,YAAY,CAAC,EAAE,MAAM,CAAC;IAEtB,qCAAqC;IACrC,eAAe,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;IAE5C,oCAAoC;IACpC,cAAc,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IAE1C,mCAAmC;IACnC,aAAa,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,aAAa,EAAE,MAAM,KAAK,IAAI,CAAC;IAEhE,uEAAuE;IACvE,WAAW,CAAC,EAAE,OAAO,CAAC;IAEtB,gBAAgB;IAChB,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB,kBAAkB;IAClB,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB,mBAAmB;IACnB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,YAAY,CAAC,EAAE,MAAM,CAAC;IAEtB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAuBD,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,kBAAkB,CA8rCtD,CAAC"}

package/dist/components/DiagramCellRenderer.d.ts

@@ -0,0 +1,36 @@
+import { default as React } from 'react';
+import { NiceDiagramDocument, DiagramNode, DiagramEdge } from '../types/diagramTypes';
+
+export interface DiagramCellRendererProps {
+    /** Full diagram document to render. */
+    document?: NiceDiagramDocument;
+    /** Alternative: provide nodes directly. */
+    nodes?: DiagramNode[];
+    /** Alternative: provide edges directly. */
+    edges?: DiagramEdge[];
+    /** Cell width in pixels. */
+    width?: number;
+    /** Cell height in pixels. */
+    height?: number;
+    /** Show node count badge. */
+    showCount?: boolean;
+    /** Enable click to expand to full viewer modal. */
+    expandable?: boolean;
+    /** Custom expand handler instead of built-in modal. */
+    onExpand?: (document: NiceDiagramDocument) => void;
+    /** Padding inside the cell (default: 4). */
+    padding?: number;
+    /** Background color (default: transparent). */
+    backgroundColor?: string;
+    /** Border radius (default: 4). */
+    borderRadius?: number;
+    /** Whether to show mini labels on nodes. */
+    showLabels?: boolean;
+    /** Edge color (default: #94a3b8). */
+    edgeColor?: string;
+    /** Tooltip text. */
+    tooltip?: string;
+}
+export declare const DiagramCellRenderer: React.FC<DiagramCellRendererProps>;
+export default DiagramCellRenderer;
+//# sourceMappingURL=DiagramCellRenderer.d.ts.map

package/dist/components/DiagramCellRenderer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DiagramCellRenderer.d.ts","sourceRoot":"","sources":["../../src/components/DiagramCellRenderer.tsx"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,OAAO,KAAiD,MAAM,OAAO,CAAC;AACtE,OAAO,KAAK,EACR,mBAAmB,EACnB,WAAW,EACX,WAAW,EAGd,MAAM,uBAAuB,CAAC;AAO/B,MAAM,WAAW,wBAAwB;IACrC,uCAAuC;IACvC,QAAQ,CAAC,EAAE,mBAAmB,CAAC;IAC/B,2CAA2C;IAC3C,KAAK,CAAC,EAAE,WAAW,EAAE,CAAC;IACtB,2CAA2C;IAC3C,KAAK,CAAC,EAAE,WAAW,EAAE,CAAC;IACtB,4BAA4B;IAC5B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,6BAA6B;IAC7B,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,6BAA6B;IAC7B,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,mDAAmD;IACnD,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,uDAAuD;IACvD,QAAQ,CAAC,EAAE,CAAC,QAAQ,EAAE,mBAAmB,KAAK,IAAI,CAAC;IACnD,4CAA4C;IAC5C,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,+CAA+C;IAC/C,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,kCAAkC;IAClC,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,4CAA4C;IAC5C,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,qCAAqC;IACrC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,oBAAoB;IACpB,OAAO,CAAC,EAAE,MAAM,CAAC;CACpB;AAmND,eAAO,MAAM,mBAAmB,EAAE,KAAK,CAAC,EAAE,CAAC,wBAAwB,CA+KlE,CAAC;AAEF,eAAe,mBAAmB,CAAC"}

package/dist/components/DiagramMinimap.d.ts

@@ -0,0 +1,17 @@
+import { default as React } from 'react';
+import { DiagramNode, DiagramEdge, DiagramViewport } from '../types/diagramTypes';
+
+export interface DiagramMinimapProps {
+    nodes: readonly DiagramNode[];
+    edges: readonly DiagramEdge[];
+    viewport: DiagramViewport;
+    onViewportChange?: (viewport: DiagramViewport) => void;
+    /** Canvas pixel size (to compute viewport rectangle) */
+    canvasWidth?: number;
+    canvasHeight?: number;
+    width?: number;
+    height?: number;
+    className?: string;
+}
+export declare const DiagramMinimap: React.FC<DiagramMinimapProps>;
+//# sourceMappingURL=DiagramMinimap.d.ts.map

package/dist/components/DiagramMinimap.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DiagramMinimap.d.ts","sourceRoot":"","sources":["../../src/components/DiagramMinimap.tsx"],"names":[],"mappings":"AAAA;;GAEG;AAEH,OAAO,KAA+B,MAAM,OAAO,CAAC;AACpD,OAAO,KAAK,EAAE,WAAW,EAAE,WAAW,EAAE,eAAe,EAAS,MAAM,uBAAuB,CAAC;AAE9F,MAAM,WAAW,mBAAmB;IAClC,KAAK,EAAE,SAAS,WAAW,EAAE,CAAC;IAC9B,KAAK,EAAE,SAAS,WAAW,EAAE,CAAC;IAC9B,QAAQ,EAAE,eAAe,CAAC;IAC1B,gBAAgB,CAAC,EAAE,CAAC,QAAQ,EAAE,eAAe,KAAK,IAAI,CAAC;IACvD,wDAAwD;IACxD,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAKD,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,EAAE,CAAC,mBAAmB,CAwGxD,CAAC"}

package/dist/components/DiagramPropertyPanel.d.ts

@@ -0,0 +1,13 @@
+import { default as React } from 'react';
+import { DiagramNode, DiagramEdge } from '../types/diagramTypes';
+
+export interface DiagramPropertyPanelProps {
+    selectedNode?: DiagramNode | null;
+    selectedEdge?: DiagramEdge | null;
+    onNodeChange?: (id: string, patch: Partial<Omit<DiagramNode, 'id'>>) => void;
+    onEdgeChange?: (id: string, patch: Partial<Omit<DiagramEdge, 'id'>>) => void;
+    onRemove?: (id: string) => void;
+    className?: string;
+}
+export declare const DiagramPropertyPanel: React.FC<DiagramPropertyPanelProps>;
+//# sourceMappingURL=DiagramPropertyPanel.d.ts.map

package/dist/components/DiagramPropertyPanel.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DiagramPropertyPanel.d.ts","sourceRoot":"","sources":["../../src/components/DiagramPropertyPanel.tsx"],"names":[],"mappings":"AAAA;;GAEG;AAEH,OAAO,KAAsB,MAAM,OAAO,CAAC;AAC3C,OAAO,KAAK,EACV,WAAW,EACX,WAAW,EAIZ,MAAM,uBAAuB,CAAC;AAe/B,MAAM,WAAW,yBAAyB;IACxC,YAAY,CAAC,EAAE,WAAW,GAAG,IAAI,CAAC;IAClC,YAAY,CAAC,EAAE,WAAW,GAAG,IAAI,CAAC;IAClC,YAAY,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,EAAE,KAAK,EAAE,OAAO,CAAC,IAAI,CAAC,WAAW,EAAE,IAAI,CAAC,CAAC,KAAK,IAAI,CAAC;IAC7E,YAAY,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,EAAE,KAAK,EAAE,OAAO,CAAC,IAAI,CAAC,WAAW,EAAE,IAAI,CAAC,CAAC,KAAK,IAAI,CAAC;IAC7E,QAAQ,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IAChC,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAYD,eAAO,MAAM,oBAAoB,EAAE,KAAK,CAAC,EAAE,CAAC,yBAAyB,CAiepE,CAAC"}

package/dist/components/DiagramToolbar.d.ts

@@ -0,0 +1,65 @@
+import { default as React } from 'react';
+import { LayoutAlgorithm, NodeShape, DiagramType, DiagramViewMode } from '../types/diagramTypes';
+
+export type DiagramTool = 'select' | 'addNode' | 'addEdge' | 'pan' | 'delete' | 'text' | 'freehand';
+export interface DiagramToolbarProps {
+    activeTool: DiagramTool;
+    onToolChange: (tool: DiagramTool) => void;
+    diagramType: DiagramType;
+    /** Callbacks wired from editor */
+    onAddNode?: (shape: NodeShape) => void;
+    onApplyLayout?: (algorithm: LayoutAlgorithm) => void;
+    onUndo?: () => void;
+    onRedo?: () => void;
+    canUndo?: boolean;
+    canRedo?: boolean;
+    onExport?: (format: 'svg' | 'mermaid' | 'ndd' | 'png') => void;
+    onZoomIn?: () => void;
+    onZoomOut?: () => void;
+    onZoomReset?: () => void;
+    zoomLevel?: number;
+    /** Format & style */
+    onToggleBold?: () => void;
+    onToggleItalic?: () => void;
+    isBold?: boolean;
+    isItalic?: boolean;
+    onFontFamilyChange?: (family: string) => void;
+    currentFontFamily?: string;
+    onFontSizeChange?: (size: number) => void;
+    currentFontSize?: number;
+    /** Alignment & distribute */
+    onAlignLeft?: () => void;
+    onAlignCenterH?: () => void;
+    onAlignRight?: () => void;
+    onAlignTop?: () => void;
+    onAlignCenterV?: () => void;
+    onAlignBottom?: () => void;
+    onDistributeH?: () => void;
+    onDistributeV?: () => void;
+    /** Arrange (z-order, group) */
+    onBringToFront?: () => void;
+    onSendToBack?: () => void;
+    onGroupSelected?: () => void;
+    onUngroupSelected?: () => void;
+    /** Clipboard */
+    onCopy?: () => void;
+    onPaste?: () => void;
+    onDuplicate?: () => void;
+    onSelectAll?: () => void;
+    /** Multi-select info */
+    selectionCount?: number;
+    /** Find */
+    onFind?: () => void;
+    showFind?: boolean;
+    findQuery?: string;
+    onFindQueryChange?: (q: string) => void;
+    /** View mode */
+    viewMode?: DiagramViewMode;
+    onViewModeChange?: (mode: DiagramViewMode) => void;
+    /** Style preset */
+    stylePresetId?: string;
+    onStylePresetChange?: (presetId: string) => void;
+    className?: string;
+}
+export declare const DiagramToolbar: React.FC<DiagramToolbarProps>;
+//# sourceMappingURL=DiagramToolbar.d.ts.map

package/dist/components/DiagramToolbar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DiagramToolbar.d.ts","sourceRoot":"","sources":["../../src/components/DiagramToolbar.tsx"],"names":[],"mappings":"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"}

package/dist/components/NiceDatabaseSchemaViewer.d.ts

@@ -0,0 +1,77 @@
+import { default as React } from 'react';
+
+export interface DatabaseColumn {
+    name: string;
+    type: string;
+    nullable: boolean;
+    primaryKey?: boolean;
+    foreignKey?: {
+        table: string;
+        column: string;
+    };
+    unique?: boolean;
+    defaultValue?: string;
+    comment?: string;
+}
+export interface DatabaseTable {
+    name: string;
+    schema?: string;
+    columns: DatabaseColumn[];
+    comment?: string;
+    metadata?: Record<string, unknown>;
+}
+export interface DatabaseRelation {
+    id: string;
+    fromTable: string;
+    fromColumn: string;
+    toTable: string;
+    toColumn: string;
+    type: RelationType;
+    name?: string;
+}
+export type RelationType = 'one-to-one' | 'one-to-many' | 'many-to-one' | 'many-to-many';
+export interface DatabaseSchema {
+    name: string;
+    tables: DatabaseTable[];
+    relations: DatabaseRelation[];
+    metadata?: Record<string, unknown>;
+}
+export interface DatabaseSchemaViewerProps {
+    /** Database schema data */
+    schema: DatabaseSchema;
+    /** Called when a table is clicked */
+    onTableClick?: (table: DatabaseTable) => void;
+    /** Called when a column is clicked */
+    onColumnClick?: (table: DatabaseTable, column: DatabaseColumn) => void;
+    /** Called when a relation is clicked */
+    onRelationClick?: (relation: DatabaseRelation) => void;
+    /** Show column details */
+    showColumnDetails?: boolean;
+    /** Show only primary/foreign keys */
+    showOnlyKeys?: boolean;
+    /** Highlight specific tables */
+    highlightTables?: string[];
+    /** Show minimap */
+    showMinimap?: boolean;
+    /** Table colors by schema */
+    schemaColors?: Record<string, string>;
+    /** Layout algorithm */
+    layout?: 'auto' | 'grid' | 'hierarchical';
+    /** Maximum columns to display per table */
+    maxColumnsDisplay?: number;
+    /** Additional CSS class */
+    className?: string;
+    /** Inline styles */
+    style?: React.CSSProperties;
+}
+export declare const NiceDatabaseSchemaViewer: React.FC<DatabaseSchemaViewerProps>;
+/**
+ * Parse SQL CREATE TABLE statements to DatabaseSchema
+ */
+export declare function parseSQLToSchema(sql: string): DatabaseSchema;
+/**
+ * Generate SQL CREATE TABLE from DatabaseSchema
+ */
+export declare function schemaToSQL(schema: DatabaseSchema, dialect?: 'mysql' | 'postgres' | 'mssql'): string;
+export default NiceDatabaseSchemaViewer;
+//# sourceMappingURL=NiceDatabaseSchemaViewer.d.ts.map

package/dist/components/NiceDatabaseSchemaViewer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"NiceDatabaseSchemaViewer.d.ts","sourceRoot":"","sources":["../../src/components/NiceDatabaseSchemaViewer.tsx"],"names":[],"mappings":"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"}