@focus.matters/diagrams 0.0.8 → 0.0.10

package/dist/src/Diagrams/components/objects/CustomRenderers.d.ts

@@ -0,0 +1,4 @@
+/** Renders every node-owned overlay inside the CSS-scaled canvas surface. */
+export declare const RenderNodeOverlays: (() => import("react").JSX.Element) & {
+    displayName: string;
+};

package/dist/{Diagrams → src/Diagrams}/components/objects/RenderEdge/debugEdges.d.ts

@@ -1,14 +1,14 @@
 import { Edge } from '../../../store/elements/Edge';
 import { Midpoint } from './types';
 type DebugClickTarget = {
-    type: 'edge';
+    type: "edge";
 } | {
-    type: 'drag-point';
+    type: "drag-point";
     midpoint: Midpoint;
     renderedIndex: number;
 } | {
-    type: 'endpoint';
-    endpoint: 'from' | 'to';
+    type: "endpoint";
+    endpoint: "from" | "to";
 };
 export declare function copyEdgeDebugToClipboard(edge: Edge | undefined, target: DebugClickTarget): void;
 export {};

package/dist/{Diagrams → src/Diagrams}/components/objects/RenderEdge/types.d.ts

@@ -18,7 +18,7 @@ export interface RenderEdgeProps {
     lineStyle?: EdgeLineStyle;
     draggable?: boolean;
     onMidpointMouseDown?: (p: Midpoint, ev: React.MouseEvent) => void;
-    onEndpointMouseDown?: (endpoint: 'from' | 'to', ev: React.MouseEvent) => void;
+    onEndpointMouseDown?: (endpoint: "from" | "to", ev: React.MouseEvent) => void;
 }
 export declare class Midpoint extends Coordinates {
     id: string;

package/dist/src/Diagrams/components/objects/ScreenRenderers.d.ts

@@ -0,0 +1,4 @@
+/** Renders node-owned screen content outside the transformed canvas surface. */
+export declare const RenderNodeScreens: (() => import("react").JSX.Element) & {
+    displayName: string;
+};

package/dist/{Diagrams → src/Diagrams}/components/objects/Shape.d.ts

@@ -3,8 +3,8 @@ import { Coordinates } from '../../store/primitives/Coordinates';
 /**
  * Estilo del borde: sólido, rayado o punteado.
  */
-export type StrokeStyle = 'solid' | 'dashed' | 'dotted';
-export type ArrowPosition = 'start' | 'end' | 'both';
+export type StrokeStyle = "solid" | "dashed" | "dotted";
+export type ArrowPosition = "start" | "end" | "both";
 export interface ArrowSpec {
     position?: ArrowPosition;
     size?: number;
@@ -41,7 +41,7 @@ export interface ShapeProps extends SVGProps<SVGGElement> {
     labelFontFamily?: string;
     labelOffset?: Coordinates;
     onMouseDown?: MouseEventHandler<SVGGElement>;
-    'data-id'?: string;
+    "data-id"?: string;
     children?: ReactNode;
 }
 declare const UnobservedShape: React.ForwardRefExoticComponent<Omit<ShapeProps, "ref"> & React.RefAttributes<any>>;

package/dist/{Diagrams → src/Diagrams}/components/objects/customRendererProps.d.ts

@@ -2,6 +2,6 @@ import { Node } from '../../store/elements/Node';
 type DivProps = React.DetailedHTMLProps<React.HTMLAttributes<any>, any> & {
     [key: `data-${string}`]: string | number | boolean | undefined;
 };
-export declare function customRendererStyles(node: Node<any>): React.DetailedHTMLProps<React.HTMLAttributes<any>, any>['style'];
+export declare function customRendererStyles(node: Node<any>): React.DetailedHTMLProps<React.HTMLAttributes<any>, any>["style"];
 export declare function customRendererProps(node: Node<any>): DivProps;
 export {};

package/dist/src/Diagrams/components/objects/screenRendererProps.d.ts

@@ -0,0 +1,18 @@
+import { CSSProperties, HTMLAttributes } from 'react';
+import { Node } from '../../store/elements/Node';
+import { Dimensions } from '../../store/primitives/Dimensions';
+type ScreenStyle = CSSProperties & {
+    "--screen-renderer-x": string;
+    "--screen-renderer-y": string;
+    "--screen-renderer-width": string;
+    "--screen-renderer-height": string;
+    "--screen-renderer-z-index": number;
+    "--screen-label-font-size"?: string;
+};
+type ScreenProps = HTMLAttributes<HTMLElement> & {
+    [key: `data-${string}`]: string | number | boolean | undefined;
+    style: ScreenStyle;
+};
+/** Builds stable world-coordinate properties for a screen-projected renderer. */
+export declare function screenRendererProps(node: Node, box: Dimensions): ScreenProps;
+export {};

package/dist/{Diagrams → src/Diagrams}/custom/agent/edges/AgentEdge.d.ts

@@ -5,7 +5,7 @@ import { AgentEdgeKind } from '../types';
 type AgentEdgeState = Partial<TEdgeState> & {
     kind?: AgentEdgeKind;
 };
-type AgentSerializedEdge = ReturnType<Edge['serialize']> & {
+type AgentSerializedEdge = ReturnType<Edge["serialize"]> & {
     kind?: AgentEdgeKind;
 };
 export declare class AgentEdge extends Edge {

package/dist/{Diagrams → src/Diagrams}/custom/agent/nodes/ActionNode.d.ts

@@ -8,7 +8,7 @@ export declare class ActionNode extends AgentNode<ActionPayload> {
         payload?: Partial<ActionPayload>;
     });
     protected defaultPayload(): ActionPayload;
-    protected Render: (() => import("react").JSX.Element) & {
+    RenderOverlay: (() => import("react").JSX.Element) & {
         displayName: string;
     };
 }

package/dist/{Diagrams → src/Diagrams}/custom/agent/nodes/AgentNode.d.ts

@@ -52,7 +52,7 @@ export declare abstract class AgentNode<TPayload> extends EditableNode {
         strokewWidth: number | undefined;
         class: string;
     };
-    deserialize(o: ReturnType<(typeof this)['serialize']>): void;
+    deserialize(o: ReturnType<(typeof this)["serialize"]>): void;
 }
 export declare function isAgentNode(node: unknown): node is AgentNode<unknown>;
 export {};

package/dist/{Diagrams → src/Diagrams}/custom/agent/nodes/ConditionNode.d.ts

@@ -8,7 +8,7 @@ export declare class ConditionNode extends AgentNode<ConditionPayload> {
         payload?: Partial<ConditionPayload>;
     });
     protected defaultPayload(): ConditionPayload;
-    protected Render: (() => import("react").JSX.Element) & {
+    RenderOverlay: (() => import("react").JSX.Element) & {
         displayName: string;
     };
 }

package/dist/{Diagrams → src/Diagrams}/custom/agent/nodes/OutcomeNode.d.ts

@@ -8,7 +8,7 @@ export declare class OutcomeNode extends AgentNode<OutcomePayload> {
         payload?: Partial<OutcomePayload>;
     });
     protected defaultPayload(): OutcomePayload;
-    protected Render: (() => import("react").JSX.Element) & {
+    RenderOverlay: (() => import("react").JSX.Element) & {
         displayName: string;
     };
 }

package/dist/{Diagrams → src/Diagrams}/custom/agent/nodes/TriggerNode.d.ts

@@ -8,7 +8,7 @@ export declare class TriggerNode extends AgentNode<TriggerPayload> {
         payload?: Partial<TriggerPayload>;
     });
     protected defaultPayload(): TriggerPayload;
-    protected Render: (() => import("react").JSX.Element) & {
+    RenderOverlay: (() => import("react").JSX.Element) & {
         displayName: string;
     };
 }

package/dist/{Diagrams → src/Diagrams}/custom/agent/types.d.ts

@@ -1,16 +1,16 @@
 import { TOrientation } from '../../store/types';
-export type AgentNodeKind = 'trigger' | 'action' | 'condition' | 'outcome';
-export type AgentEdgeKind = 'default' | 'condition-true' | 'condition-false' | 'trigger';
+export type AgentNodeKind = "trigger" | "action" | "condition" | "outcome";
+export type AgentEdgeKind = "default" | "condition-true" | "condition-false" | "trigger";
 export type AgentMetadata = Record<string, string | number | boolean>;
 export type TriggerPayload = {
-    triggerType: 'manual' | 'event' | 'schedule';
+    triggerType: "manual" | "event" | "schedule";
     source: string;
     eventName: string;
     schedule: string;
     metadata?: AgentMetadata;
 };
 export type ActionPayload = {
-    actionType: 'task' | 'api' | 'notification' | 'human';
+    actionType: "task" | "api" | "notification" | "human";
     operation: string;
     inputRef: string;
     outputRef: string;
@@ -18,13 +18,13 @@ export type ActionPayload = {
 };
 export type ConditionPayload = {
     expression: string;
-    language: 'rule' | 'javascript' | 'jsonpath';
+    language: "rule" | "javascript" | "jsonpath";
     trueLabel: string;
     falseLabel: string;
     metadata?: AgentMetadata;
 };
 export type OutcomePayload = {
-    status: 'success' | 'failure' | 'neutral';
+    status: "success" | "failure" | "neutral";
     code: string;
     summary: string;
     metadata?: AgentMetadata;

package/dist/src/Diagrams/custom/bpmn/extensions/BPMNGridSnap.d.ts

@@ -0,0 +1,21 @@
+import { DiagramExtension } from '../../../store/extensions/DiagramExtension';
+import { Lanes } from '../nodes/Lanes';
+type TBPMNResize = {
+    width: number;
+} | {
+    laneId: string;
+    height: number;
+};
+/**
+ * Applies BPMN-specific grid constraints to lane width and height resizing.
+ */
+export declare class BPMNGridSnap extends DiagramExtension {
+    /** Initializes the extension, whose resize constraints are invoked by BPMN tools. */
+    init(): void;
+    /** Applies minimum sizes and optional grid snapping to a BPMN lane resize. */
+    resize(lanes: Lanes, resize: TBPMNResize): void;
+    private constrain;
+    private getLaneSuggestions;
+    private getHorizontalLaneSuggestions;
+}
+export {};

package/dist/src/Diagrams/custom/bpmn/extensions/BPMNLaneResizer.d.ts

@@ -0,0 +1,20 @@
+import { DiagramExtension } from '../../../store/extensions/DiagramExtension';
+import { Lanes } from '../nodes/Lanes';
+/**
+ * Owns BPMN lane resize sessions, including grid constraints and auto-panning.
+ */
+export declare class BPMNLaneResizer extends DiagramExtension {
+    private readonly autopan;
+    private session;
+    private unbindSession;
+    /** Initializes the imperative extension consumed by the lane screen renderer. */
+    init(): void;
+    /** Starts resizing the complete lane container from its right-side handle. */
+    resizeWidth(lanes: Lanes, event: MouseEvent): void;
+    /** Starts resizing one BPMN lane from its horizontal lower-edge handle. */
+    resizeHeight(lanes: Lanes, laneId: string, initialHeight: number, event: MouseEvent): void;
+    private startSession;
+    private handleMouseMove;
+    private handleAutopan;
+    private endSession;
+}

package/dist/{Diagrams → src/Diagrams}/custom/bpmn/nodes/EventNode.d.ts

@@ -1,6 +1,7 @@
 import { Element } from '../../../store/elements/Element';
 import { TNodeConstructorProps } from '../../../store/elements/Node';
 import { BPMNode } from './BPMNode';
+import { Dimensions } from '../../../store/primitives/Dimensions';
 export declare enum EventTypes {
     start = 0,
     end = 1,
@@ -51,8 +52,9 @@ export declare class EventNode extends BPMNode {
         strokewWidth: number | undefined;
         class: string;
     };
-    deserialize(o: ReturnType<this['serialize']>): void;
-    protected Render: (() => import("react").JSX.Element) & {
+    deserialize(o: ReturnType<this["serialize"]>): void;
+    protected get screenLabelBox(): Dimensions;
+    RenderOverlay: (() => import("react").JSX.Element) & {
         displayName: string;
     };
 }

package/dist/{Diagrams → src/Diagrams}/custom/bpmn/nodes/GateNode.d.ts

@@ -1,6 +1,7 @@
 import { Element } from '../../../store/elements/Element';
 import { TNodeConstructorProps } from '../../../store/elements/Node';
 import { BPMNode } from './BPMNode';
+import { Dimensions } from '../../../store/primitives/Dimensions';
 export declare enum GateTypes {
     inclusive = 0,
     exclusive = 1,
@@ -51,8 +52,9 @@ export declare class GateNode extends BPMNode {
         strokewWidth: number | undefined;
         class: string;
     };
-    deserialize(o: ReturnType<this['serialize']>): void;
-    protected Render: (() => import("react").JSX.Element) & {
+    deserialize(o: ReturnType<this["serialize"]>): void;
+    protected get screenLabelBox(): Dimensions;
+    RenderOverlay: (() => import("react").JSX.Element) & {
         displayName: string;
     };
 }

package/dist/src/Diagrams/custom/bpmn/nodes/Lanes/LaneScreenRenderer.d.ts

@@ -0,0 +1,6 @@
+import { TNodeScreenRenderProps } from '../../../../store/elements/Node';
+import { Lanes } from '.';
+/** Renders crisp lane labels and contextual controls in viewport coordinates. */
+export declare const LaneScreenRenderer: (({ node: lanes }: TNodeScreenRenderProps<Lanes>) => import("react").JSX.Element) & {
+    displayName: string;
+};

package/dist/src/Diagrams/custom/bpmn/nodes/Lanes/index.d.ts

@@ -0,0 +1,107 @@
+import { FC } from 'react';
+import { BPMNode } from '../BPMNode';
+import { Element } from '../../../../store/elements/Element';
+import { Dimensions } from '../../../../store/primitives/Dimensions';
+type TPool = {
+    name: string;
+    label: string;
+    height: number;
+    children: TPool[];
+};
+type TLaneLayout = {
+    lane: TPool;
+    depth: number;
+    y: number;
+    height: number;
+    siblingCount: number;
+};
+/**
+ * Models and renders a resizable hierarchy of BPMN lanes and their controls.
+ */
+export declare class Lanes extends BPMNode {
+    static readonly laneHeaderWidth = 50;
+    static readonly laneHeight = 250;
+    static readonly laneHeaderFontSize = 14;
+    static readonly minimumLaneHeight = 150;
+    static readonly minimumWidthInGrids = 10;
+    constructor(parent: Element | null, state: {
+        id: string;
+    });
+    /** Returns bounds that exactly match the rendered lane hierarchy. */
+    get box(): Dimensions;
+    /** Returns every visible lane with its depth and absolute vertical geometry. */
+    get laneLayouts(): TLaneLayout[];
+    get editingLaneId(): string | null;
+    private nextPool;
+    /** Appends one root lane and returns it for existing programmatic callers. */
+    addPool(): TPool;
+    /** Inserts a sibling immediately before or after the referenced visible lane. */
+    insertLane(referenceId: string, position: "before" | "after"): void;
+    /** Replaces a leaf with two children while preserving its previous total height. */
+    subdivideLane(id: string): void;
+    /** Collapses all descendants back into their parent without changing total height. */
+    removeSubdivision(id: string): void;
+    /** Removes one lane only when its hierarchy level retains at least one sibling. */
+    removeLane(id: string): void;
+    /** Resizes a lane while enforcing one task box plus one grid of total padding. */
+    resizeLane(id: string, height: number, gridSize?: number): void;
+    /** Starts label editing for one lane through either screen or keyboard actions. */
+    renameLane(id: string): void;
+    protected editionLaneId: string | null;
+    protected previousPools: TPool[];
+    /** Restores the complete tree that existed before the current edit session. */
+    cancel(): void;
+    /** Commits labels and hierarchy changes made during the current edit session. */
+    confirm(): boolean;
+    /** Starts editing and snapshots the entire hierarchy for cancellation support. */
+    edit(): void;
+    /** Removes every root lane so importers can rebuild the hierarchy explicitly. */
+    resetPools(): void;
+    /** Restores the strictly hierarchical lane payload from serialized diagram data. */
+    deserialize(o: ReturnType<this["serialize"]>): void;
+    /** Serializes lane dimensions and descendants together with the base node state. */
+    serialize(): {
+        pools: TPool[];
+        box: [number, number, number, number];
+        id: string;
+        label: string;
+        movable: boolean | undefined;
+        selectable: boolean | undefined;
+        selected: boolean | undefined;
+        gateways: {
+            coordinates: [number, number];
+            fill: string | undefined;
+            id: string;
+            orientation: import('../../../../store/types').TOrientation;
+            radius: number;
+            stroke: string | undefined;
+            strokeWidth: number;
+            outEdges: {
+                arrowHeadEnd: import('../../../../store/types').EdgeArrowHead | undefined;
+                arrowHeadStart: import('../../../../store/types').EdgeArrowHead | undefined;
+                displacementEnd: [number, number] | undefined;
+                displacementStart: [number, number] | undefined;
+                lineStyle: import('../../../../store/types').EdgeLineStyle | undefined;
+                pathType: import('../../../../store/types').EdgePathType | undefined;
+                steps: import('../../../../store/elements/EdgePoint').TSerializedEdgePoint[];
+                stroke: string | undefined;
+                strokeWidth: number | undefined;
+                to: string;
+                toParentId: string;
+                class: string;
+            }[];
+            class: string;
+        }[];
+        fill: string | undefined;
+        labelFontSize: number | undefined;
+        stroke: string | undefined;
+        strokewWidth: number | undefined;
+        class: string;
+    };
+    pools: TPool[];
+    RenderScreen: (({ node: lanes }: import('../../../../store/elements/Node').TNodeScreenRenderProps<Lanes>) => import("react").JSX.Element) & {
+        displayName: string;
+    };
+    RenderOverlay: FC;
+}
+export {};

package/dist/{Diagrams → src/Diagrams}/custom/bpmn/nodes/TaskNode.d.ts

@@ -3,7 +3,7 @@ import { Element } from '../../../store/elements/Element';
 import { TNodeConstructorProps } from '../../../store/elements/Node';
 export declare class TaskNode extends BPMNode {
     constructor(parent: Element | null, state: TNodeConstructorProps);
-    protected Render: (() => import("react").JSX.Element) & {
+    RenderOverlay: (() => import("react").JSX.Element) & {
         displayName: string;
     };
 }

package/dist/{Diagrams → src/Diagrams}/custom/bpmn/nodes/UnknownBPMNNode.d.ts

@@ -44,8 +44,8 @@ export declare class UnknownBPMNNode extends BPMNode {
         strokewWidth: number | undefined;
         class: string;
     };
-    deserialize(o: ReturnType<this['serialize']>): void;
-    protected Render: (() => import("react").JSX.Element) & {
+    deserialize(o: ReturnType<this["serialize"]>): void;
+    RenderOverlay: (() => import("react").JSX.Element) & {
         displayName: string;
     };
 }

package/dist/{Diagrams → src/Diagrams}/custom/communication/edges/CommunicationEdge.d.ts

@@ -2,7 +2,7 @@ import { Edge } from '../../../store/elements/Edge';
 import { Element } from '../../../store/elements/Element';
 import { TEdgeState } from '../../../store/types';
 type CommunicationEdgeState = Partial<TEdgeState>;
-type SerializedCommunicationEdge = ReturnType<Edge['serialize']> & {
+type SerializedCommunicationEdge = ReturnType<Edge["serialize"]> & {
     label?: string;
     labelPositioning?: [number, number];
 };

package/dist/{Diagrams → src/Diagrams}/custom/communication/nodes/CommunicationActorNode.d.ts

@@ -4,7 +4,7 @@ import { CommunicationNode } from '../CommunicationNode';
 export declare class CommunicationActorNode extends CommunicationNode {
     readonly communicationNodeType: "actor";
     constructor(parent: Element | null, state: TNodeConstructorProps);
-    protected Render: (() => import("react").JSX.Element) & {
+    RenderOverlay: (() => import("react").JSX.Element) & {
         displayName: string;
     };
 }

package/dist/{Diagrams → src/Diagrams}/custom/communication/nodes/CommunicationControllerNode.d.ts

@@ -4,7 +4,7 @@ import { CommunicationNode } from '../CommunicationNode';
 export declare class CommunicationControllerNode extends CommunicationNode {
     readonly communicationNodeType: "controller";
     constructor(parent: Element | null, state: TNodeConstructorProps);
-    protected Render: (() => import("react").JSX.Element) & {
+    RenderOverlay: (() => import("react").JSX.Element) & {
         displayName: string;
     };
 }

package/dist/{Diagrams → src/Diagrams}/custom/communication/nodes/CommunicationObjectNode.d.ts

@@ -4,7 +4,7 @@ import { CommunicationNode } from '../CommunicationNode';
 export declare class CommunicationObjectNode extends CommunicationNode {
     readonly communicationNodeType: "object";
     constructor(parent: Element | null, state: TNodeConstructorProps);
-    protected Render: (() => import("react").JSX.Element) & {
+    RenderOverlay: (() => import("react").JSX.Element) & {
         displayName: string;
     };
 }

package/dist/src/Diagrams/custom/communication/types.d.ts

@@ -0,0 +1 @@
+export type CommunicationNodeType = "actor" | "object" | "controller";

package/dist/src/Diagrams/custom/editable/EditableLabel.d.ts

@@ -0,0 +1,8 @@
+import { EditableNode } from './EditableNode';
+import { Dimensions } from '../../store/primitives/Dimensions';
+export declare const EditableLabel: (({ node, box }: {
+    node: EditableNode;
+    box: Dimensions;
+}) => import("react").JSX.Element | null) & {
+    displayName: string;
+};

package/dist/{Diagrams → src/Diagrams}/custom/editable/EditableNode.d.ts

@@ -10,6 +10,6 @@ export declare abstract class EditableNode extends Node {
     cancel(): void;
     confirm(): boolean;
     get isChanged(): boolean;
-    protected abstract Render: FC;
-    Renderer: () => import("react").JSX.Element;
+    protected get screenLabelBox(): import('../../store/primitives/Dimensions').Dimensions;
+    RenderScreen: FC<any>;
 }

package/dist/{Diagrams → src/Diagrams}/store/elements/Edge.d.ts

@@ -22,7 +22,7 @@ export declare class Edge extends Element {
     setState<K extends keyof TEdgeState>(prop: K, value: TEdgeState[K]): void;
     setSteps(steps: Coordinates[]): void;
     get to(): import('./Gateway').Gateway;
-    deserialize(o: ReturnType<(typeof this)['serialize']>): void;
+    deserialize(o: ReturnType<(typeof this)["serialize"]>): void;
     serialize(): {
         arrowHeadEnd: import('../types').EdgeArrowHead | undefined;
         arrowHeadStart: import('../types').EdgeArrowHead | undefined;
@@ -38,5 +38,5 @@ export declare class Edge extends Element {
         class: string;
     };
     dragStart(midpoint: Midpoint, ev: MouseEvent): void;
-    dragEndpoint(endpoint: 'from' | 'to', ev: MouseEvent): void;
+    dragEndpoint(endpoint: "from" | "to", ev: MouseEvent): void;
 }

package/dist/{Diagrams → src/Diagrams}/store/elements/EdgePoint.d.ts

@@ -1,8 +1,8 @@
 import { Coordinates } from '../primitives/Coordinates';
 import { Element } from './Element';
 import { AnyMouseEvent } from './Events';
-export type TEdgePointType = 'auto' | 'manual' | 'static';
-export type TEdgePointManualAxes = 'none' | 'x' | 'y' | 'both';
+export type TEdgePointType = "auto" | "manual" | "static";
+export type TEdgePointManualAxes = "none" | "x" | "y" | "both";
 export type TSerializedEdgePoint = [number, number, TEdgePointType] | [number, number, TEdgePointType, TEdgePointManualAxes];
 export declare class EdgePoint extends Coordinates {
     parent: Element | null;
@@ -11,8 +11,8 @@ export declare class EdgePoint extends Coordinates {
     constructor(parent: Element | null, items?: AnyMouseEvent | Event | Coordinates | number[] | TSerializedEdgePoint);
     get manualX(): boolean;
     get manualY(): boolean;
-    addManualAxis(axis: 'x' | 'y' | 'both'): this;
-    hasManualAxis(axis: 'x' | 'y'): boolean;
+    addManualAxis(axis: "x" | "y" | "both"): this;
+    hasManualAxis(axis: "x" | "y"): boolean;
     markStatic(): this;
     copy(): EdgePoint;
     toString(includeMode?: boolean): string;

package/dist/{Diagrams → src/Diagrams}/store/elements/Events.d.ts

@@ -191,10 +191,10 @@ export declare class DEdgeDragStartEvent extends DDragEvent {
 }
 export declare class DEdgeEndpointDragStartEvent extends DDragEvent {
     src: Edge;
-    endpoint: 'from' | 'to';
+    endpoint: "from" | "to";
     originalEvent: AnyMouseEvent;
     protected readonly __brand: void;
-    constructor(src: Edge, endpoint: 'from' | 'to', originalEvent: AnyMouseEvent);
+    constructor(src: Edge, endpoint: "from" | "to", originalEvent: AnyMouseEvent);
 }
 export declare class NodePositionProposal {
     readonly node: Node<any>;
@@ -222,11 +222,11 @@ export declare class DDragNodeEvent extends DDragEvent {
 }
 export declare class EdgePointPositionProposal {
     readonly point: Coordinates;
-    readonly movedAxis: 'x' | 'y';
+    readonly movedAxis: "x" | "y";
     private _updated;
     private _lockX;
     private _lockY;
-    constructor(point: Coordinates, movedAxis: 'x' | 'y');
+    constructor(point: Coordinates, movedAxis: "x" | "y");
     get current(): Coordinates;
     get(): Coordinates;
     lockX(): void;
@@ -238,7 +238,7 @@ export declare class EdgePointPositionProposal {
 export declare class DDragEdgeSegmentEvent extends DDragEvent {
     src: Element;
     proposals: EdgePointPositionProposal[];
-    movedAxis: 'x' | 'y';
+    movedAxis: "x" | "y";
     protected readonly __brand: void;
-    constructor(src: Element, proposals: EdgePointPositionProposal[], movedAxis: 'x' | 'y', originalEvent: AnyMouseEvent);
+    constructor(src: Element, proposals: EdgePointPositionProposal[], movedAxis: "x" | "y", originalEvent: AnyMouseEvent);
 }

package/dist/{Diagrams → src/Diagrams}/store/elements/Gateway.d.ts

@@ -6,7 +6,7 @@ import { Element } from './Element';
 export declare class Gateway extends Element {
     parent: Node<any>;
     state: TGatewayState;
-    constructor(parent: Node<any>, state: Pick<TGatewayState, 'maxIncomingConnections' | 'maxOutgoingConnections' | 'orientation' | 'id'> & Partial<TGatewayState>);
+    constructor(parent: Node<any>, state: Pick<TGatewayState, "maxIncomingConnections" | "maxOutgoingConnections" | "orientation" | "id"> & Partial<TGatewayState>);
     addIncomingEdge(edge: Edge): void;
     addOutgoingEdge(edge: Edge): void;
     canConnect(from: Gateway): boolean;
@@ -26,10 +26,10 @@ export declare class Gateway extends Element {
     get id(): string;
     get direction(): "horizontal" | "vertical";
     get orientation(): import('../types').TOrientation;
-    recomputeConnectedEdge(edge: Edge, _movedSide: 'from' | 'to'): void;
+    recomputeConnectedEdge(edge: Edge, _movedSide: "from" | "to"): void;
     updateEdges(): void;
     get remainingSlots(): number;
-    deserialize(c: ReturnType<(typeof this)['serialize']>): void;
+    deserialize(c: ReturnType<(typeof this)["serialize"]>): void;
     serialize(): {
         coordinates: [number, number];
         fill: string | undefined;

package/dist/{Diagrams → src/Diagrams}/store/elements/Node.d.ts

@@ -6,7 +6,14 @@ import { Gateway } from './Gateway';
 import { Element } from './Element';
 import { ClassList } from '../../util/ClassList';
 import { FC } from 'react';
-export type TNodeConstructorProps = Pick<TNodeState, 'id' | 'label'> & Partial<TNodeState>;
+export type TNodeConstructorProps = Pick<TNodeState, "id" | "label"> & Partial<TNodeState>;
+export type TNodeRenderProps<N extends Node<any> = Node<any>> = {
+    node: N;
+    box: Dimensions;
+};
+export type TNodeScreenRenderProps<N extends Node<any> = Node<any>> = TNodeRenderProps<N> & {
+    scale: number;
+};
 export declare class Node<Gateways = TOrientation> extends Element {
     protected _gateways: Map<Gateways, Gateway>;
     state: TNodeState;
@@ -31,7 +38,7 @@ export declare class Node<Gateways = TOrientation> extends Element {
     setPosition(c: Coordinates, options?: {
         updateConnectedEdges?: boolean;
     }): void;
-    deserialize(o: ReturnType<(typeof this)['serialize']>): void;
+    deserialize(o: ReturnType<(typeof this)["serialize"]>): void;
     serialize(): {
         box: [number, number, number, number];
         id: string;
@@ -69,5 +76,6 @@ export declare class Node<Gateways = TOrientation> extends Element {
         strokewWidth: number | undefined;
         class: string;
     };
-    Renderer: FC | null;
+    RenderOverlay: FC<any> | null;
+    RenderScreen: FC<any> | null;
 }

package/dist/{Diagrams → src/Diagrams}/store/extensions/Creator.d.ts

@@ -1,6 +1,6 @@
 import { DClickEvent } from '../elements/Events';
 import { DiagramExtension } from './DiagramExtension';
-export type TCreationMode = 'none' | 'text';
+export type TCreationMode = "none" | "text";
 export declare class Creator extends DiagramExtension {
     creationMode: TCreationMode;
     init(): void;