@particle-academy/react-fancy 2.8.1 → 2.10.0

package/dist/index.d.cts

@@ -2231,7 +2231,12 @@ interface CanvasContextValue {
     nodeRects: Map<string, NodeRect>;
     registryVersion: number;
     containerRef: React.RefObject<HTMLDivElement | null>;
+    /** Grid spacing in canvas-space pixels (unaffected by zoom). */
+    gridSize: number;
+    /** When true, dragged nodes snap their top-left corner to the grid. */
+    snapToGrid: boolean;
 }
+type GridStyle = "dots" | "lines" | "none";
 interface CanvasProps {
     children: ReactNode;
     viewport?: ViewportState;
@@ -2241,8 +2246,17 @@ interface CanvasProps {
     maxZoom?: number;
     pannable?: boolean;
     zoomable?: boolean;
+    /** Grid spacing in canvas-space pixels. Defaults to 20. */
     gridSize?: number;
+    /** Show/hide the canvas grid. Defaults to false. */
     showGrid?: boolean;
+    /** Grid pattern when shown — dots (default), lines, or none. Setting this
+     *  to "none" hides the grid even when `showGrid` is true. */
+    gridStyle?: GridStyle;
+    /** Grid color (any CSS color). Defaults to a faint zinc. */
+    gridColor?: string;
+    /** Snap dragged nodes to the grid. Defaults to false. */
+    snapToGrid?: boolean;
     /** Automatically fit all nodes into view on initial mount */
     fitOnMount?: boolean;
     className?: string;
@@ -2308,7 +2322,7 @@ declare namespace CanvasControls {
     var displayName: string;
 }
 
-declare function CanvasRoot({ children, viewport: controlledViewport, defaultViewport, onViewportChange, minZoom, maxZoom, pannable, zoomable, showGrid, fitOnMount, className, style, }: CanvasProps): react_jsx_runtime.JSX.Element;
+declare function CanvasRoot({ children, viewport: controlledViewport, defaultViewport, onViewportChange, minZoom, maxZoom, pannable, zoomable, showGrid, gridStyle, gridSize, gridColor, snapToGrid, fitOnMount, className, style, }: CanvasProps): react_jsx_runtime.JSX.Element;
 declare const Canvas: typeof CanvasRoot & {
     Node: typeof CanvasNode;
     Edge: typeof CanvasEdge;
@@ -2319,7 +2333,13 @@ declare const Canvas: typeof CanvasRoot & {
 declare function useCanvas(): CanvasContextValue;
 
 type DiagramType = "erd" | "flowchart" | "general";
-type RelationType = "one-to-one" | "one-to-many" | "many-to-many";
+/** ERD/UML shorthand — sets fromMarker/toMarker (and lineStyle for some). */
+type RelationType = "one-to-one" | "one-to-many" | "many-to-one" | "many-to-many" | "association" | "aggregation" | "composition" | "inheritance" | "implementation" | "dependency" | "custom";
+/** Shape painted at each line endpoint. Strings prefixed `emoji:` render the
+ *  rest of the string as text at the endpoint (e.g. `emoji:🎯`). */
+type MarkerType = "none" | "arrow" | "arrow-open" | "circle" | "circle-open" | "square" | "square-open" | "diamond" | "diamond-open" | "triangle" | "triangle-open" | "one" | "many" | "optional-one" | "optional-many" | "cross" | (string & {});
+type LineStyle = "solid" | "dashed" | "dotted";
+type RoutingMode = "manhattan" | "bezier" | "straight";
 type ExportFormat = "erd" | "uml" | "dfd";
 interface DiagramFieldData {
     name: string;
@@ -2344,6 +2364,11 @@ interface DiagramRelationData {
     fromField?: string;
     toField?: string;
     type: RelationType;
+    fromMarker?: MarkerType;
+    toMarker?: MarkerType;
+    lineStyle?: LineStyle;
+    routing?: RoutingMode;
+    color?: string;
     label?: string;
 }
 interface DiagramSchema {
@@ -2399,7 +2424,20 @@ interface DiagramRelationProps {
     to: string;
     fromField?: string;
     toField?: string;
-    type: RelationType;
+    /** ERD/UML shorthand. Provides defaults for fromMarker/toMarker/lineStyle. */
+    type?: RelationType;
+    /** Override start endpoint marker. */
+    fromMarker?: MarkerType;
+    /** Override end endpoint marker. */
+    toMarker?: MarkerType;
+    /** Line style — solid (default), dashed, dotted. */
+    lineStyle?: LineStyle;
+    /** Routing algorithm — manhattan (default), bezier, straight. */
+    routing?: RoutingMode;
+    /** Stroke color. Defaults to a zinc gray. */
+    color?: string;
+    /** Stroke width. Default 2. */
+    strokeWidth?: number;
     label?: string;
     className?: string;
 }
@@ -2417,7 +2455,7 @@ declare namespace DiagramField {
     var displayName: string;
 }
 
-declare function DiagramRelation({ from, to, fromField: fromFieldProp, toField: toFieldProp, type, label, }: DiagramRelationProps): react_jsx_runtime.JSX.Element | null;
+declare function DiagramRelation({ from, to, fromField: fromFieldProp, toField: toFieldProp, type, fromMarker: fromMarkerProp, toMarker: toMarkerProp, lineStyle: lineStyleProp, routing, color, strokeWidth, label, }: DiagramRelationProps): react_jsx_runtime.JSX.Element | null;
 declare namespace DiagramRelation {
     var _isCanvasEdge: boolean;
     var displayName: string;
@@ -2474,6 +2512,15 @@ interface TreeNavProps {
     draggable?: boolean;
     /** Callback when a node is moved via drag and drop */
     onNodeMove?: (sourceId: string, targetId: string, position: DropPosition) => void;
+    /** Accept drops from outside the tree — OS files, items from other
+     *  components, etc. When true, drag-over is allowed for any data source
+     *  and `onExternalDrop` fires on drop. (default: false) */
+    acceptExternalDrops?: boolean;
+    /** Called when an external drag (file or cross-component) is dropped on
+     *  a node. The raw event lets you read `event.dataTransfer.files` for OS
+     *  file drops or `event.dataTransfer.getData(type)` for custom MIME
+     *  payloads from other components. */
+    onExternalDrop?: (event: React.DragEvent, target: TreeNodeData, position: DropPosition) => void;
     /** Controlled expanded node IDs */
     expandedIds?: string[];
     /** Default expanded node IDs (uncontrolled) */
@@ -2501,6 +2548,8 @@ interface TreeNavContextValue {
     dragState: DragState;
     setDragState: (state: DragState) => void;
     onNodeMove?: (sourceId: string, targetId: string, position: DropPosition) => void;
+    acceptExternalDrops: boolean;
+    onExternalDrop?: (event: React.DragEvent, target: TreeNodeData, position: DropPosition) => void;
     nodes: TreeNodeData[];
     expandNode: (id: string) => void;
 }
@@ -2515,7 +2564,7 @@ declare namespace TreeNode {
     var displayName: string;
 }
 
-declare function TreeNavRoot({ nodes, selectedId, onSelect, onNodeContextMenu, draggable, onNodeMove, expandedIds: controlledExpanded, defaultExpandedIds, onExpandedChange, defaultExpandAll, indentSize, showIcons, className, }: TreeNavProps): react_jsx_runtime.JSX.Element;
+declare function TreeNavRoot({ nodes, selectedId, onSelect, onNodeContextMenu, draggable, onNodeMove, acceptExternalDrops, onExternalDrop, expandedIds: controlledExpanded, defaultExpandedIds, onExpandedChange, defaultExpandAll, indentSize, showIcons, className, }: TreeNavProps): react_jsx_runtime.JSX.Element;
 declare namespace TreeNavRoot {
     var displayName: string;
 }

package/dist/index.d.ts

@@ -2231,7 +2231,12 @@ interface CanvasContextValue {
     nodeRects: Map<string, NodeRect>;
     registryVersion: number;
     containerRef: React.RefObject<HTMLDivElement | null>;
+    /** Grid spacing in canvas-space pixels (unaffected by zoom). */
+    gridSize: number;
+    /** When true, dragged nodes snap their top-left corner to the grid. */
+    snapToGrid: boolean;
 }
+type GridStyle = "dots" | "lines" | "none";
 interface CanvasProps {
     children: ReactNode;
     viewport?: ViewportState;
@@ -2241,8 +2246,17 @@ interface CanvasProps {
     maxZoom?: number;
     pannable?: boolean;
     zoomable?: boolean;
+    /** Grid spacing in canvas-space pixels. Defaults to 20. */
     gridSize?: number;
+    /** Show/hide the canvas grid. Defaults to false. */
     showGrid?: boolean;
+    /** Grid pattern when shown — dots (default), lines, or none. Setting this
+     *  to "none" hides the grid even when `showGrid` is true. */
+    gridStyle?: GridStyle;
+    /** Grid color (any CSS color). Defaults to a faint zinc. */
+    gridColor?: string;
+    /** Snap dragged nodes to the grid. Defaults to false. */
+    snapToGrid?: boolean;
     /** Automatically fit all nodes into view on initial mount */
     fitOnMount?: boolean;
     className?: string;
@@ -2308,7 +2322,7 @@ declare namespace CanvasControls {
     var displayName: string;
 }
 
-declare function CanvasRoot({ children, viewport: controlledViewport, defaultViewport, onViewportChange, minZoom, maxZoom, pannable, zoomable, showGrid, fitOnMount, className, style, }: CanvasProps): react_jsx_runtime.JSX.Element;
+declare function CanvasRoot({ children, viewport: controlledViewport, defaultViewport, onViewportChange, minZoom, maxZoom, pannable, zoomable, showGrid, gridStyle, gridSize, gridColor, snapToGrid, fitOnMount, className, style, }: CanvasProps): react_jsx_runtime.JSX.Element;
 declare const Canvas: typeof CanvasRoot & {
     Node: typeof CanvasNode;
     Edge: typeof CanvasEdge;
@@ -2319,7 +2333,13 @@ declare const Canvas: typeof CanvasRoot & {
 declare function useCanvas(): CanvasContextValue;
 
 type DiagramType = "erd" | "flowchart" | "general";
-type RelationType = "one-to-one" | "one-to-many" | "many-to-many";
+/** ERD/UML shorthand — sets fromMarker/toMarker (and lineStyle for some). */
+type RelationType = "one-to-one" | "one-to-many" | "many-to-one" | "many-to-many" | "association" | "aggregation" | "composition" | "inheritance" | "implementation" | "dependency" | "custom";
+/** Shape painted at each line endpoint. Strings prefixed `emoji:` render the
+ *  rest of the string as text at the endpoint (e.g. `emoji:🎯`). */
+type MarkerType = "none" | "arrow" | "arrow-open" | "circle" | "circle-open" | "square" | "square-open" | "diamond" | "diamond-open" | "triangle" | "triangle-open" | "one" | "many" | "optional-one" | "optional-many" | "cross" | (string & {});
+type LineStyle = "solid" | "dashed" | "dotted";
+type RoutingMode = "manhattan" | "bezier" | "straight";
 type ExportFormat = "erd" | "uml" | "dfd";
 interface DiagramFieldData {
     name: string;
@@ -2344,6 +2364,11 @@ interface DiagramRelationData {
     fromField?: string;
     toField?: string;
     type: RelationType;
+    fromMarker?: MarkerType;
+    toMarker?: MarkerType;
+    lineStyle?: LineStyle;
+    routing?: RoutingMode;
+    color?: string;
     label?: string;
 }
 interface DiagramSchema {
@@ -2399,7 +2424,20 @@ interface DiagramRelationProps {
     to: string;
     fromField?: string;
     toField?: string;
-    type: RelationType;
+    /** ERD/UML shorthand. Provides defaults for fromMarker/toMarker/lineStyle. */
+    type?: RelationType;
+    /** Override start endpoint marker. */
+    fromMarker?: MarkerType;
+    /** Override end endpoint marker. */
+    toMarker?: MarkerType;
+    /** Line style — solid (default), dashed, dotted. */
+    lineStyle?: LineStyle;
+    /** Routing algorithm — manhattan (default), bezier, straight. */
+    routing?: RoutingMode;
+    /** Stroke color. Defaults to a zinc gray. */
+    color?: string;
+    /** Stroke width. Default 2. */
+    strokeWidth?: number;
     label?: string;
     className?: string;
 }
@@ -2417,7 +2455,7 @@ declare namespace DiagramField {
     var displayName: string;
 }
 
-declare function DiagramRelation({ from, to, fromField: fromFieldProp, toField: toFieldProp, type, label, }: DiagramRelationProps): react_jsx_runtime.JSX.Element | null;
+declare function DiagramRelation({ from, to, fromField: fromFieldProp, toField: toFieldProp, type, fromMarker: fromMarkerProp, toMarker: toMarkerProp, lineStyle: lineStyleProp, routing, color, strokeWidth, label, }: DiagramRelationProps): react_jsx_runtime.JSX.Element | null;
 declare namespace DiagramRelation {
     var _isCanvasEdge: boolean;
     var displayName: string;
@@ -2474,6 +2512,15 @@ interface TreeNavProps {
     draggable?: boolean;
     /** Callback when a node is moved via drag and drop */
     onNodeMove?: (sourceId: string, targetId: string, position: DropPosition) => void;
+    /** Accept drops from outside the tree — OS files, items from other
+     *  components, etc. When true, drag-over is allowed for any data source
+     *  and `onExternalDrop` fires on drop. (default: false) */
+    acceptExternalDrops?: boolean;
+    /** Called when an external drag (file or cross-component) is dropped on
+     *  a node. The raw event lets you read `event.dataTransfer.files` for OS
+     *  file drops or `event.dataTransfer.getData(type)` for custom MIME
+     *  payloads from other components. */
+    onExternalDrop?: (event: React.DragEvent, target: TreeNodeData, position: DropPosition) => void;
     /** Controlled expanded node IDs */
     expandedIds?: string[];
     /** Default expanded node IDs (uncontrolled) */
@@ -2501,6 +2548,8 @@ interface TreeNavContextValue {
     dragState: DragState;
     setDragState: (state: DragState) => void;
     onNodeMove?: (sourceId: string, targetId: string, position: DropPosition) => void;
+    acceptExternalDrops: boolean;
+    onExternalDrop?: (event: React.DragEvent, target: TreeNodeData, position: DropPosition) => void;
     nodes: TreeNodeData[];
     expandNode: (id: string) => void;
 }
@@ -2515,7 +2564,7 @@ declare namespace TreeNode {
     var displayName: string;
 }
 
-declare function TreeNavRoot({ nodes, selectedId, onSelect, onNodeContextMenu, draggable, onNodeMove, expandedIds: controlledExpanded, defaultExpandedIds, onExpandedChange, defaultExpandAll, indentSize, showIcons, className, }: TreeNavProps): react_jsx_runtime.JSX.Element;
+declare function TreeNavRoot({ nodes, selectedId, onSelect, onNodeContextMenu, draggable, onNodeMove, acceptExternalDrops, onExternalDrop, expandedIds: controlledExpanded, defaultExpandedIds, onExpandedChange, defaultExpandAll, indentSize, showIcons, className, }: TreeNavProps): react_jsx_runtime.JSX.Element;
 declare namespace TreeNavRoot {
     var displayName: string;
 }