@samatawy/diagrams 0.1.0

package/dist/index.d.ts

@@ -0,0 +1,4240 @@
+/**
+ * A single point in 2D space, defined by its x and y coordinates.
+ */
+interface IPoint {
+    x: number;
+    y: number;
+}
+/**
+ * A single point in 2D space that serves as an anchor for connections, defined by its ID and coordinates.
+ */
+interface AnchorPoint extends IPoint {
+    id: string;
+}
+/**
+ * A rectangle defined by its left and top coordinates, as well as its width and height.
+ * This is commonly used for bounding boxes and layout calculations.
+ */
+interface IRect {
+    left: number;
+    top: number;
+    width: number;
+    height: number;
+}
+/**
+ * Text alignment options for nodes, which determine how the text is aligned horizontally within the node's bounding box.
+ * - left: Aligns text to the left edge of the node.
+ * - center: Centers text horizontally within the node.
+ * - right: Aligns text to the right edge of the node.
+ */
+type ITextAlign = 'left' | 'center' | 'right';
+/**
+ * Text baseline options for nodes, which determine how the text is aligned vertically within the node's bounding box.
+ * - top: Aligns text to the top edge of the node.
+ * - middle: Centers text vertically within the node.
+ * - bottom: Aligns text to the bottom edge of the node.
+ */
+type ITextBaseline = 'top' | 'middle' | 'bottom';
+/**
+ * NodeHandle represents the different types of handles that can be used for manipulating nodes in the diagram.
+ * - MOVE: A handle for moving the entire node.
+ * - POINT: A handle for manipulating individual points of a node (e.g., for a polyline).
+ * - ROTATE: A handle for rotating the node.
+ * - N, S, E, W: Handles for resizing the node from the north, south, east, and west sides, respectively.
+ * - NE, NW, SE, SW: Handles for resizing the node from the northeast, northwest, southeast, and southwest corners, respectively.
+ * - NONE: Indicates that no handle is active or selected.
+ * These handles are used to determine how user interactions affect the node, such as dragging to move, resize, or rotate the node based on the active handle.
+ * The specific behavior of each handle is defined in the node's interaction logic and rendering code.
+ * For example, dragging the MOVE handle would translate the node's position, while dragging a corner handle like NE would resize the node while maintaining its aspect ratio.
+ */
+declare enum NodeHandle {
+    MOVE = "move",
+    POINT = "point",
+    ROTATE = "rotate",
+    N = "n",
+    S = "s",
+    E = "e",
+    W = "w",
+    NE = "ne",
+    NW = "nw",
+    SE = "se",
+    SW = "sw",
+    NONE = "none"
+}
+
+/**
+ * An ISerializer defines the methods for serializing and deserializing data, allowing objects to be converted to and from a string representation.
+ */
+interface ISerializer {
+    write(data: unknown): string;
+    read<T>(data: string): Promise<T>;
+}
+/**
+ * The Serializable interface defines the contract for objects that can be serialized and deserialized using an ISerializer.
+ * It requires implementing a write method that converts the object to a serializable format, and a read method that reconstructs the object from its serialized representation.
+ */
+interface Serializable {
+    write(serializer: ISerializer): any;
+    read(json: any, serializer: ISerializer): Promise<this>;
+}
+/**
+ * Serialized representation of a connection anchor, where the 'node' property is represented by the node's identifier instead of a reference to the node object.
+ * This format is suitable for JSON serialization and deserialization.
+ */
+interface ISerializedConnectionAnchor extends Omit<IConnectionAnchor, 'node'> {
+    node: string;
+}
+/**
+ * Serialized representation of a node, suitable for JSON serialization.
+ * The 'owner' property is not serialized, and connection anchors are represented with their own serialized format.
+ */
+interface ISerializedNode extends Omit<INode, 'owner'> {
+    from?: ISerializedConnectionAnchor;
+    to?: ISerializedConnectionAnchor;
+    startArrow?: boolean;
+    endArrow?: boolean;
+}
+/**
+ * Serialized representation of a layer, containing its identifier, name, visibility status, and the identifiers of the nodes it contains.
+ */
+interface ISerializedLayer {
+    id: string;
+    name: string;
+    visible: boolean;
+    nodes: string[];
+}
+/**
+ * Serialized representation of a diagram, containing its identifier, nodes, layers, metadata, and optional grid settings.
+ */
+interface ISerializedDiagram {
+    id: string;
+    nodes: ISerializedNode[];
+    layers: ISerializedLayer[];
+    grid?: Partial<IGrid>;
+    meta?: Record<string, unknown>;
+    image_assets?: Record<string, string>;
+}
+
+type ArrowDirection = 'start' | 'end' | 'both' | 'none';
+/**
+ * ShadowStyle defines the properties of a shadow effect that can be applied to nodes in the diagram.
+ */
+interface ShadowStyle {
+    /**
+     * The name of the shadow style, used for display purposes in the UI when selecting a shadow effect.
+     */
+    name: string;
+    /**
+     * The color of the shadow, which can be a CSS color string (e.g., '#000000' for black) or undefined for a default color.
+     * If the color is undefined, the rendering logic may choose a default shadow color based on the node's properties or theme.
+     */
+    color?: string;
+    /**
+     * The blur radius of the shadow, which determines how blurry the shadow appears.
+     * A higher value results in a softer, more diffuse shadow, while a value of 0 creates a sharp shadow with no blur.
+     */
+    blur: number;
+    /**
+     * The offset of the shadow, which determines the horizontal and vertical displacement of the shadow relative to the node.
+     * Positive values move the shadow right and down, while negative values move it left and up.
+     * The offset has an x component for horizontal displacement and a y component for vertical displacement, allowing for directional shadows
+     * (e.g., a shadow that appears to the right and below the node).
+     */
+    offset: IPoint;
+}
+/**
+ * An array of predefined shadow styles that can be applied to nodes in the diagram.
+ */
+declare const shadowStyles: ShadowStyle[];
+
+/**
+ * INode defines the properties of a node in the diagram, including its ID, type, geometry (points), text properties, styling options, and its relationship to the diagram it belongs to.
+ * Nodes are the fundamental building blocks of the diagram, representing entities that can be connected and manipulated.
+ */
+interface INode {
+    /**
+     * The unique identifier of the node, which is used to reference the node within the diagram and for serialization purposes.
+     */
+    id: string;
+    /**
+     * The type of the node, which can be used to determine how the node is rendered and interacted with.
+     */
+    type: string;
+    /**
+     * A reference to the diagram that owns this node, which allows the node to access diagram-level information and functionality.
+     * This is typically set when the node is added to a diagram but not serialized.
+     */
+    owner: IDiagram;
+    /**
+     * The points that define the geometry of the node, which can be used for rendering and for determining how connections attach to the node.
+     */
+    points: IPoint[];
+    /**
+     * The text content of the node, which can be displayed within the node's bounding box.
+     */
+    text?: string;
+    /**
+     * The horizontal alignment of the text within the node, which can be left-aligned, centered, or right-aligned.
+     */
+    textAlign?: ITextAlign;
+    /**
+     * The vertical alignment of the text within the node, which can be top-aligned, middle-aligned, or bottom-aligned.
+     */
+    textBaseline?: ITextBaseline;
+    /**
+     * The font used for the node's text, which can include font family, size, weight, and other CSS font properties.
+     */
+    font?: string;
+    /**
+     * The ID of the image source stored in the diagram-level image_assets dictionary.
+     */
+    image_id?: string;
+    /**
+     * The mode for rendering the image within the node, which can be:
+     * - 'pattern' to fill the node with a repeating pattern of the image,
+     * - 'frame' to draw the image once within the node's bounding box, or
+     * - 'none' to not render the image at all.
+     */
+    img_mode?: 'pattern' | 'frame' | 'none';
+    /**
+     * Indicates whether the node is ready to be rendered, which can be used to control the creation process
+     * and ensure that all necessary information is available before finalizing creation.
+     */
+    ready?: boolean;
+    /**
+     * Indicates whether the whole area of the node is selectable or only its border.
+     */
+    hollow?: boolean;
+    /**
+     * Indicates whether the node is transparent, which can be used to control the rendering style of the node.
+     */
+    transparent?: boolean;
+    /**
+     * The stroke style of the node, which can be used to control the color and pattern of the node's border.
+     */
+    strokeStyle: string;
+    /**
+     * The fill style of the node, which can be used to control the color and pattern of the node's interior.
+     */
+    fillStyle?: string;
+    /**
+     * The text color of the node, which can be used to control the color of the text displayed within the node.
+     */
+    textColor?: string;
+    /**
+     * The line width of the node's border, which can be used to control the thickness of the node's outline.
+     */
+    lineWidth?: number;
+    arrow?: 'forward' | 'backward' | 'both' | 'none';
+    /**
+     * The shadow style of the node, which can be used to apply a shadow effect to the node.
+     */
+    shadowStyle?: ShadowStyle;
+    /**
+     * The rotation angle of the node, which can be used to rotate the node around its center.
+     */
+    angle?: number;
+}
+/**
+ * IConnectionAnchor defines the properties of an anchor point for a connection, including the node it is attached to, the handle of the node,
+ * and optional properties for specifying the exact point on the node where the connection should attach (such as a specific point index or offsets).
+ * This interface is used to determine how connections are anchored to nodes in the diagram,
+ * allowing for flexible connection points based on the node's geometry and the desired connection style.
+ */
+interface IConnectionAnchor {
+    /**
+     * The node to which the connection anchor is attached, specified by either the node's ID or a reference to the INode object.
+     */
+    node: string | INode;
+    /**
+     * The handle of the node that the connection is anchored to, which indicates the specific part of the node (e.g., 'n', 's', 'e', 'w', etc.) where the connection should attach.
+     */
+    handle: NodeHandle;
+    /**
+     * An optional index specifying a particular point on the node's geometry to anchor to, allowing for more precise connection points beyond just the handles.
+     */
+    point?: number;
+    /**
+     * Optional pixel offsets that can be applied to the anchor point, providing additional control over the exact position of the connection attachment on the node.
+     */
+    xOffset?: number;
+    /**
+     * Optional pixel offsets that can be applied to the anchor point, providing additional control over the exact position of the connection attachment on the node.
+     */
+    yOffset?: number;
+}
+/**
+ * The IConnection interface defines the properties of a connection between nodes in the diagram, including the source and target anchors, arrow styles, and readiness state.
+ * It represents the relationships between nodes and is used to determine how nodes are connected and rendered in the diagram.
+ */
+interface IConnection {
+    /**
+     * The source anchor of the connection, which specifies where the connection starts on the source node. It includes information about the node, handle, and optional offsets.
+     */
+    from?: IConnectionAnchor;
+    /**
+     * The target anchor of the connection, which specifies where the connection ends on the target node. It includes information about the node, handle, and optional offsets.
+     */
+    to?: IConnectionAnchor;
+    /**
+     * An optional boolean indicating whether the connection should have an arrow at the starting point, which can be used to indicate directionality of the connection.
+     */
+    startArrow?: boolean;
+    /**
+     * An optional boolean indicating whether the connection should have an arrow at the ending point, which can be used to indicate directionality of the connection.
+     */
+    endArrow?: boolean;
+    /**
+     * An optional boolean indicating whether the connection is ready to be rendered, which can be used to control the rendering process
+     * and ensure that all necessary information is available before drawing the connection.
+     */
+    ready?: boolean;
+}
+/**
+ * The ILayer interface defines the properties of a layer in the diagram, including its ID, name, visibility, and the nodes it contains.
+ */
+interface ILayer {
+    /**
+     * The unique identifier of the layer.
+     */
+    id: string;
+    /**
+     * The name of the layer.
+     */
+    name: string;
+    /**
+     * A boolean indicating whether the layer is visible.
+     */
+    visible: boolean;
+    /**
+     * An array of node IDs that belong to this layer.
+     */
+    nodes: string[];
+}
+/**
+ * The IGrid interface defines the properties of the grid used in the diagram.
+ * It includes options for forcing nodes to snap to the grid, toggling grid visibility, and customizing the grid's color and cell size.
+ */
+interface IGrid {
+    /**
+     * A boolean indicating whether nodes should be forced to snap to the grid, which can help maintain alignment and consistency in the diagram layout.
+     */
+    forced: boolean;
+    /**
+     * A boolean indicating whether the grid should be visible, which can assist users in aligning nodes and understanding the spatial relationships in the diagram.
+     */
+    visible: boolean;
+    /**
+     * The color of the grid lines, which can be customized to improve visibility or match the overall design of the diagram.
+     */
+    color: string;
+    /**
+     * The size of the grid cells in pixels, which determines the spacing of the grid lines and can affect how nodes snap to the grid.
+     */
+    /**
+     * The width of the grid cell in pixels.
+     */
+    width: number;
+    /**
+     * The height of the grid cell in pixels.
+     */
+    height: number;
+}
+/**
+ * IDiagram defines the main interface for a diagram, which includes nodes, layers, and a grid.
+ * It also includes methods for managing nodes and layers, as well as serialization and deserialization of the diagram.
+ * The diagram serves as the central data structure that holds all the information about the nodes, layers, and their relationships.
+ */
+interface IDiagram extends Serializable {
+    id: string;
+    nodes: INode[];
+    layers: ILayer[];
+    meta?: Record<string, unknown>;
+    grid: IGrid;
+    node(id: string): INode | undefined;
+    upsertNode(node: INode): INode;
+    deleteNode(id: string): void;
+    layer(id: string): ILayer | undefined;
+    upsertLayer(layer: string | ILayer): ILayer;
+    deleteLayer(id: string): void;
+    setNodeImageSource(node: string | INode, imageSrc: string, mode?: 'pattern' | 'frame', imageId?: string): INode | undefined;
+    setNodeSvgSource(node: string | INode, svgOrSrc: string, mode?: 'pattern' | 'frame', imageId?: string): INode | undefined;
+    clearNodeImageSource(node: string | INode): INode | undefined;
+    resolveNodeImageSource(node: string | INode): string | undefined;
+    destroy(): void;
+}
+/**
+ * Payload for selection change events, which includes the currently selected nodes and their IDs.
+ */
+interface HasSelection {
+    selection(): INode[];
+    isSelected(node: INode): boolean;
+    select(node: INode): void;
+    deselect(node: INode): void;
+    clearSelection(): void;
+}
+
+type DiagramExportFormat = 'json' | 'bytes' | 'blob';
+interface DiagramSaveOptions {
+    path?: string;
+    fileName?: string;
+    serializer?: ISerializer;
+    pretty?: boolean;
+    mimeType?: string;
+}
+type BrowserImageMimeType = 'image/png' | 'image/jpeg' | 'image/webp' | 'image/avif';
+type BrowserImageSource = HTMLCanvasElement | {
+    canvas: HTMLCanvasElement;
+};
+interface ImageWriteOptions {
+    mimeType?: BrowserImageMimeType;
+    quality?: number;
+    padding?: number;
+}
+interface ImageSaveOptions extends ImageWriteOptions {
+    path?: string;
+    fileName?: string;
+}
+interface ImageSerializer {
+    write(source: BrowserImageSource, options?: ImageWriteOptions): Promise<Blob>;
+}
+type DiagramOpenSource = string | ISerializedDiagram | Diagram;
+interface DiagramOpenOptions {
+    source?: DiagramOpenSource;
+}
+interface DiagramOpenResult {
+    source: DiagramOpenSource;
+    handle?: FileSystemFileHandle;
+}
+interface DiagramSaveResult extends DiagramSaveOptions {
+    handle?: FileSystemFileHandle;
+}
+interface DiagramExportOptions {
+    format?: DiagramExportFormat;
+    pretty?: boolean;
+    serializer?: ISerializer;
+    fileName?: string;
+    mimeType?: string;
+}
+interface DiagramExportResult extends DiagramExportOptions {
+    handle?: FileSystemFileHandle;
+}
+
+/**
+ * A diagram is the core data structure that holds all nodes, layers, and metadata.
+ * It provides methods for managing these elements and supports serialization and deserialization for persistence and data exchange.
+ *
+ * It does not support viewing. For that, use DiagramView which extends this base model and adds rendering, selection, and interaction capabilities.
+ * It does not support editing. For that, use DiagramController which manages user interactions and updates the Diagram model accordingly.
+ */
+declare class Diagram implements IDiagram {
+    id: string;
+    nodes: INode[];
+    layers: ILayer[];
+    meta?: Record<string, any>;
+    grid: IGrid;
+    private readonly assetStore;
+    get image_assets(): Record<string, string>;
+    constructor(id: string, initial?: Partial<Omit<Diagram, 'id'>>);
+    /**
+     * Releases model-managed resources.
+     */
+    destroy(): void;
+    /**
+     * Retrieves a node by its ID.
+     * @param id The ID of the node to retrieve.
+     * @returns The node with the specified ID, or undefined if not found.
+     */
+    node(id: string): INode | undefined;
+    /**
+     * Retrieves a layer by its ID.
+     * @param id The ID of the layer to retrieve.
+     * @returns The layer with the specified ID, or undefined if not found.
+     */
+    layer(id: string): ILayer | undefined;
+    /**
+     * Inserts a new node or updates an existing node in the diagram.
+     * @param node The node to upsert.
+     * @returns The upserted node.
+     */
+    upsertNode(node: INode): INode;
+    /**
+     * Inserts a new layer or updates an existing layer in the diagram.
+     * @param layer The layer to upsert, or the ID of the layer to create.
+     * @returns The upserted layer.
+     */
+    upsertLayer(layer: string | ILayer): ILayer;
+    /**
+     * Deletes a node from the diagram.
+     * @param nodeId The ID of the node to delete.
+     */
+    deleteNode(nodeId: string): void;
+    /**
+     * Deletes a layer from the diagram.
+     * @param layerId The ID of the layer to delete.
+     */
+    deleteLayer(layerId: string): void;
+    /**
+     * Assigns an image source to a node for background/content rendering.
+     */
+    setNodeImageSource(node: string | INode, imageSrc: string, mode?: 'pattern' | 'frame', imageId?: string): INode | undefined;
+    /**
+     * Assigns SVG markup or SVG source URL/data URL to a node.
+     * Raw SVG markup is converted to a data URL.
+     */
+    setNodeSvgSource(node: string | INode, svgOrSrc: string, mode?: 'pattern' | 'frame', imageId?: string): INode | undefined;
+    /**
+     * Removes image source and rendering mode from a node.
+     */
+    clearNodeImageSource(node: string | INode): INode | undefined;
+    /**
+     * Resolves the concrete image source for a node image reference.
+     */
+    resolveNodeImageSource(node: string | INode): string | undefined;
+    /**
+     * Clears all in-memory image assets. Intended for teardown paths.
+     */
+    clearImageAssets(): void;
+    /**
+     * Clears all nodes, layers, metadata, and assets from the diagram, effectively resetting it to an empty state while retaining the same ID.
+     * Intended for reuse scenarios where the diagram instance should be preserved but its content should be cleared.
+     */
+    clear(): void;
+    /**
+     * Loads the diagram data from a serialized JSON object.
+     * @param source The serialized diagram data.
+     * @param serializer The serializer to use for reading the data (optional if source is already an object).
+     * @returns The diagram instance.
+     * @throws An error if the input is an invalid JSON string or if the parsed JSON is null or undefined.
+     */
+    read(source: string | ISerializedDiagram, serializer?: ISerializer): Promise<this>;
+    /**
+     * Writes the diagram data to the specified serializer.
+     * @param serializer The serializer to use for writing the data.
+     * @returns The serialized diagram data.
+     */
+    write(serializer: ISerializer): any;
+    /**
+     * Exports the current diagram in a native format.
+     * Supported formats are JSON text, UTF-8 bytes, and Blob (browser runtime).
+     * @param format The format to export the diagram in ('json', 'bytes', or 'blob'). (defaults to 'json')
+     * @param pretty Whether to pretty-print the output (applicable to JSON format). (defaults to true)
+     * @param serializer The serializer to use for exporting the diagram. (optional)
+     * @returns The exported diagram data in the specified format.
+     */
+    export(format?: DiagramExportFormat, pretty?: boolean, serializer?: ISerializer): string | Uint8Array | Blob;
+    /**
+     * Saves the current diagram directly from the model.
+     * In Node.js this writes to the file system; in browsers this triggers a file download.
+     * @param options The options for saving the diagram, including path, file name, serializer, pretty-printing, and MIME type.
+     * @returns A promise that resolves to the path or download URL of the saved file.
+     */
+    save(options?: DiagramSaveOptions): Promise<string>;
+    private toJsonString;
+    private resolveNode;
+    private toSvgSource;
+    protected applyNodeImageSource(target: INode, imageSrc: string, mode?: 'pattern' | 'frame', imageId?: string): void;
+    /**
+     * Returns all nodes within the specified layer.
+     * @param layer The layer whose nodes should be returned.
+     * @returns An array of nodes within the specified layer.
+     */
+    protected layerNodes(layer: ILayer): INode[];
+    protected serializeNode(node: INode): ISerializedNode;
+    private hydrateNode;
+    private hydrateLayer;
+    /**
+     * Creates a new layer with the specified properties.
+     * @param id The ID of the layer.
+     * @param name The name of the layer.
+     * @param visible Whether the layer is visible.
+     * @param nodes The nodes within the layer.
+     * @returns The created layer.
+     */
+    protected createLayer(id: string, name?: string, visible?: boolean, nodes?: string[]): ILayer;
+    private serializeAnchor;
+    private hydrateAnchor;
+    private anchorTargetsNode;
+    private pruneMissingLayerNodes;
+}
+
+/**
+ * Detects whether browser globals are available.
+ * @returns True when running in a browser-like runtime.
+ */
+declare function isBrowserRuntime(): boolean;
+/**
+ * Creates an offscreen 2D canvas with safe minimum dimensions.
+ * @param width Requested width.
+ * @param height Requested height.
+ * @returns A canvas/context pair.
+ */
+declare function createCanvas2D(width: number, height: number): {
+    canvas: HTMLCanvasElement;
+    context: CanvasRenderingContext2D;
+};
+/**
+ * Resolves a canvas from either a raw canvas or an object containing one.
+ * @param source Canvas source value.
+ * @returns The underlying HTMLCanvasElement.
+ */
+declare function unwrapCanvas(source: HTMLCanvasElement | {
+    canvas: HTMLCanvasElement;
+}): HTMLCanvasElement;
+/**
+ * Checks whether a canvas encoder supports a given MIME type.
+ * @param canvas Source canvas.
+ * @param mimeType MIME type to test.
+ * @returns True when the MIME type is supported.
+ */
+declare function supportsCanvasMimeType(canvas: HTMLCanvasElement, mimeType: string): boolean;
+/**
+ * Lists supported export MIME types for a canvas.
+ * @param canvas Source canvas.
+ * @returns Supported MIME types.
+ */
+declare function supportedCanvasMimeTypes(canvas: HTMLCanvasElement): string[];
+/**
+ * Exports a canvas to a data URL.
+ * @param canvas Source canvas.
+ * @param mimeType Target MIME type.
+ * @param quality Optional quality for lossy formats.
+ * @returns Encoded data URL.
+ */
+declare function canvasToDataUrl(canvas: HTMLCanvasElement, mimeType: string, quality?: number): string;
+/**
+ * Exports a canvas to a Blob.
+ * @param canvas Source canvas.
+ * @param mimeType Target MIME type.
+ * @param quality Optional quality for lossy formats.
+ * @returns A Blob containing the encoded image.
+ */
+declare function canvasToBlob(canvas: HTMLCanvasElement, mimeType: string, quality?: number): Promise<Blob>;
+/**
+ * Creates a text blob for export/download operations.
+ * @param content Text content.
+ * @param mimeType Blob MIME type.
+ * @returns The generated Blob.
+ */
+declare function exportTextBlob(content: string, mimeType?: string): Blob;
+/**
+ * Downloads text content as a file in browser runtimes.
+ * @param content File content.
+ * @param fileName Download file name.
+ * @param mimeType File MIME type.
+ * @returns The file name used for download.
+ */
+declare function downloadTextFile(content: string, fileName: string, mimeType?: string): string;
+/**
+ * Downloads an existing blob as a file in browser runtimes.
+ * @param blob Blob to download.
+ * @param fileName Download file name.
+ * @returns The file name used for download.
+ */
+declare function downloadBlob(blob: Blob, fileName: string): string;
+/**
+ * Writes a blob to a browser file-system access handle.
+ * @param handle Target browser file handle.
+ * @param blob Blob payload to write.
+ * @returns The written file name.
+ */
+declare function writeBlobToFileHandle(handle: FileSystemFileHandle, blob: Blob): Promise<string>;
+/**
+ * Writes text content to a browser file-system access handle.
+ * @param handle Target browser file handle.
+ * @param content Text payload to write.
+ * @param mimeType Optional MIME type.
+ * @returns The written file name.
+ */
+declare function writeTextToFileHandle(handle: FileSystemFileHandle, content: string, mimeType?: string): Promise<string>;
+
+/**
+ * Detects whether the current runtime is Node.js.
+ * @returns True when Node.js APIs are available.
+ */
+declare function isNodeRuntime(): boolean;
+/**
+ * Writes UTF-8 text content to a file path.
+ * @param path Destination path.
+ * @param content Text content.
+ * @returns The written path.
+ */
+declare function writeTextFile(path: string, content: string): Promise<string>;
+/**
+ * Writes binary content to a file path.
+ * @param path Destination path.
+ * @param content Binary payload.
+ * @returns The written path.
+ */
+declare function writeBinaryFile(path: string, content: Uint8Array): Promise<string>;
+
+/**
+ * Serializes browser canvas content to raster image blobs.
+ * Supports PNG/JPEG/WebP/AVIF and falls back to PNG if the requested format is unsupported.
+ */
+declare class CanvasImageSerializer implements ImageSerializer {
+    /**
+     * Serializes the given canvas or canvas wrapper to a Blob.
+     * @param source The source canvas or an object containing a canvas.
+     * @param options Optional image write options, including MIME type and quality.
+     * @returns A promise that resolves to a Blob representing the serialized image.
+     */
+    write(source: HTMLCanvasElement | {
+        canvas: HTMLCanvasElement;
+    }, options?: ImageWriteOptions): Promise<Blob>;
+    private resolveMimeType;
+    private normalizeQuality;
+}
+/**
+ * Convenience PNG-only serializer.
+ */
+declare class PngSerializer extends CanvasImageSerializer {
+    write(source: HTMLCanvasElement | {
+        canvas: HTMLCanvasElement;
+    }): Promise<Blob>;
+}
+
+type DiagramOpenHandler = (options?: DiagramOpenOptions) => Promise<DiagramOpenResult | undefined> | DiagramOpenResult | undefined;
+type DiagramSaveHandler = (options?: DiagramSaveOptions) => Promise<DiagramSaveResult | undefined> | DiagramSaveResult | undefined;
+type DiagramExportHandler = (options?: DiagramExportOptions) => Promise<DiagramExportResult | undefined> | DiagramExportResult | undefined;
+declare class DiagramFileDialogs {
+    onOpenDiagram?: DiagramOpenHandler;
+    onSaveDiagram?: DiagramSaveHandler;
+    onExportDiagram?: DiagramExportHandler;
+    openDiagram(options?: DiagramOpenOptions): Promise<DiagramOpenResult | undefined>;
+    saveDiagram(options?: DiagramSaveOptions): Promise<DiagramSaveResult | undefined>;
+    exportDiagram(options?: DiagramExportOptions): Promise<DiagramExportResult | undefined>;
+    openDiagramDefault(): Promise<DiagramOpenResult | undefined>;
+    saveDiagramDefault(options?: DiagramSaveOptions): Promise<DiagramSaveResult | undefined>;
+    exportDiagramDefault(options?: DiagramExportOptions): Promise<DiagramExportResult | undefined>;
+    private openFromBrowserDialog;
+    private resolveSaveTarget;
+    private extensionFor;
+    private defaultExportFileName;
+}
+
+/**
+ * Serializes and deserializes data to and from JSON format.
+ */
+declare class JsonSerializer implements ISerializer {
+    /**
+     * Serializes the given data to a JSON string.
+     * @param data The data to serialize.
+     * @returns A JSON string representing the serialized data.
+     */
+    write(data: unknown): string;
+    /**
+     * Deserializes the given JSON string to an object of type T.
+     * @param json The JSON string to deserialize.
+     * @returns A promise that resolves to an object of type T.
+     */
+    read<T>(json: string): Promise<T>;
+}
+/**
+ * The default JSON serializer instance for use in the application.
+ * This can be imported conveniently and used wherever JSON serialization or deserialization is needed.
+ */
+declare const jsonSerializer: JsonSerializer;
+
+/**
+ * View events.
+ */
+declare const DIAGRAM_SELECTION_EVENT = "selection";
+declare const DIAGRAM_NODE_CLICK_EVENT = "node-click";
+declare const DIAGRAM_BACKGROUND_CLICK_EVENT = "background-click";
+declare const DIAGRAM_VIEWPORT_EVENT = "viewport-change";
+/**
+ * EditView events.
+ */
+declare const DIAGRAM_DELETE_REQUEST_EVENT = "delete-request";
+declare const DIAGRAM_NODE_ADDED_EVENT = "node-added";
+declare const DIAGRAM_NODE_DELETED_EVENT = "node-deleted";
+declare const DIAGRAM_NODE_MOVED_EVENT = "node-moved";
+declare const DIAGRAM_NODE_RESIZED_EVENT = "node-resized";
+declare const DIAGRAM_NODE_POINTS_CHANGED_EVENT = "node-points-changed";
+declare const DIAGRAM_CONNECTION_CONNECTED_EVENT = "connection-connected";
+declare const DIAGRAM_CONNECTION_DISCONNECTED_EVENT = "connection-disconnected";
+declare const DIAGRAM_EDIT_CONTEXT_MENU_EVENT = "diagram-edit-contextmenu";
+declare const DIAGRAM_TOOL_CHANGED_EVENT = "tool-changed";
+declare const DIAGRAM_CLIPBOARD_EVENT = "clipboard-change";
+/**
+ * Broad compatibility event.
+ */
+declare const DIAGRAM_CHANGED_EVENT = "diagram-changed";
+/**
+ * Defines the scope of a diagram change, which can be related to the model, view, or style of the diagram.
+ * This categorization allows for more specific handling of changes and updates within the diagram system,
+ * enabling developers to optimize performance and user experience by responding appropriately to different types of changes.
+ */
+type DiagramChangeScope = 'model' | 'view' | 'style';
+/**
+ * Represents a change in the diagram, including the scope of the change and the source event that triggered it.
+ * This interface can be used to provide detailed information about changes occurring in the diagram, allowing for more granular handling of updates and interactions.
+ */
+interface DiagramChanged {
+    scope: DiagramChangeScope;
+    sourceEvent: string;
+}
+/**
+ * Defines the structure of a diagram selection change event, which includes information about the selected nodes and their IDs.
+ * This interface can be used to provide detailed information about selection changes in the diagram, allowing for more specific handling of selection-related interactions and updates.
+ */
+interface DiagramSelectionChange {
+    /**
+     * The node that is currently selected, if any. This property may be undefined if no single node is selected or if multiple nodes are selected.
+     */
+    node?: INode;
+    /**
+     * The ID of the node that is currently selected, if any. This property may be undefined if no single node is selected or if multiple nodes are selected.
+     */
+    nodeId?: string;
+    /**
+     * The nodes that are currently selected. This array may be empty if no nodes are selected.
+     */
+    nodes: INode[];
+    /**
+     * The IDs of the nodes that are currently selected. This array may be empty if no nodes are selected.
+     */
+    nodeIds: string[];
+}
+/**
+ * Defines the structure of a diagram background click event, which includes the coordinates of the click in both canvas and world space.
+ * This interface can be used to provide detailed information about background click interactions in the diagram,
+ * allowing for more specific handling of such events, such as deselecting nodes or opening context menus.
+ */
+interface DiagramBackgroundClick {
+    /**
+     * The coordinates of the click in canvas space, which represents the position of the click relative to the diagram's viewport.
+     */
+    canvas: IPoint;
+    /**
+     * The coordinates of the click in world space, which represents the position of the click in the diagram's coordinate system,
+     * taking into account any transformations such as panning and zooming.
+     */
+    world: IPoint;
+}
+/**
+ * Defines the structure of a diagram viewport change event, which includes information about the pan and zoom levels of the diagram's viewport.
+ * This interface can be used to provide detailed information about changes to the diagram's viewport, allowing for more specific handling of such events,
+ * such as updating the display or synchronizing with other components.
+ */
+interface DiagramViewportChange {
+    /**
+     * The pan offset of the diagram's viewport, represented as an object with x and y properties.
+     * This indicates how much the viewport has been panned from its original position.
+     */
+    pan: IPoint;
+    /**
+     * The zoom level of the diagram's viewport, represented as a number.
+     * This indicates how much the viewport has been zoomed in or out from its original scale.
+     * A zoom level of 1 typically represents the original scale, while values greater than 1 indicate zooming in and values less than 1 indicate zooming out.
+     */
+    zoom: number;
+}
+/**
+ * Defines the structure of a diagram node change event, which includes information about the node that has changed and its ID.
+ * This interface can be used to provide detailed information about changes to nodes in the diagram, allowing for more specific handling of such events,
+ * such as updating the display or synchronizing with other components.
+ */
+interface DiagramNodeChange {
+    /**
+     * The node that has changed. This property may be undefined if the change is not related to a specific node or if the node information is not available.
+     */
+    node: INode;
+    /**
+     * The ID of the node that has changed. This property may be undefined if the change is not related to a specific node or if the node information is not available.
+     */
+    nodeId: string;
+}
+/**
+ * Defines the structure of a diagram delete request event, which extends the diagram selection change event
+ * and includes an optional trigger property that represents the keyboard event that initiated the delete request.
+ * This interface can be used to provide detailed information about delete requests in the diagram, allowing for more specific handling of such events,
+ * such as confirming the delete action or performing additional cleanup.
+ */
+interface DiagramDeleteRequest extends DiagramSelectionChange {
+    /**
+     * The keyboard event that triggered the delete request, if applicable.
+     * This property may be undefined if the delete request was not initiated by a keyboard event or if the event information is not available.
+     */
+    trigger?: KeyboardEvent;
+}
+/**
+ * Defines the structure of a diagram connection change event, which extends the diagram node change event and includes information about the connection's endpoints.
+ * This interface can be used to provide detailed information about changes to connections in the diagram, allowing for more specific handling of such events,
+ * such as updating the display or synchronizing with other components.
+ */
+interface DiagramConnectionChange extends DiagramNodeChange {
+    /**
+     * The source anchor of the connection, if applicable.
+     * This property may be undefined if the change is not related to a connection or if the anchor information is not available.
+     */
+    from?: IConnection["from"];
+    /**
+     * The target anchor of the connection, if applicable.
+     * This property may be undefined if the change is not related to a connection or if the anchor information is not available.
+     */
+    to?: IConnection["to"];
+}
+/**
+ * Defines the structure of a diagram edit context menu event, which extends the diagram background click event and includes information about the node(s)
+ * involved in the context menu interaction.
+ */
+interface DiagramEditContextMenu extends DiagramBackgroundClick {
+    /**
+     * The pointer event that triggered the context menu interaction.
+     * This property provides access to the original pointer event, allowing for more specific handling of the context menu interaction,
+     */
+    event: PointerEvent;
+    /**
+     * The node that is the target of the context menu interaction, if applicable.
+     * This property may be undefined if the context menu was triggered on the background or if the node information is not available.
+     */
+    node?: INode;
+    /**
+     * The ID of the node that is the target of the context menu interaction, if applicable.
+     * This property may be undefined if the context menu was triggered on the background or if the node information is not available.
+     */
+    nodeId?: string;
+    /**
+     * The nodes that are involved in the context menu interaction, if applicable.
+     * This array may be empty if the context menu was triggered on the background or if the node information is not available.
+     */
+    nodes: INode[];
+    /**
+     * The IDs of the nodes that are involved in the context menu interaction, if applicable.
+     * This array may be empty if the context menu was triggered on the background or if the node information is not available.
+     */
+    nodeIds: string[];
+}
+/**
+ * Defines the structure of a diagram tool change event, which includes information about the new tool and the previous tool.
+ * This interface can be used to provide detailed information about tool changes in the diagram, allowing for more specific handling of such events,
+ * such as updating the display or synchronizing with other components.
+ */
+interface DiagramToolChange {
+    /**
+     * The new tool that has been selected or activated in the diagram.
+     * This property represents the current tool that is being used for interactions in the diagram.
+     */
+    tool: string;
+    /**
+     * The previous tool that was active in the diagram.
+     * This property represents the tool that was being used before the current tool was selected or activated.
+     */
+    previousTool: string;
+}
+/**
+ * Clipboard operations emitted by the editor.
+ */
+type DiagramClipboardOperation = 'copy' | 'cut' | 'paste';
+/**
+ * Defines the structure of a diagram clipboard event.
+ */
+interface DiagramClipboardEventDetail {
+    /**
+     * The clipboard operation that produced this event.
+     * Can be one of "copy", "cut", or "paste".
+     */
+    operation: DiagramClipboardOperation;
+    /**
+     * Whether a paste action is currently possible.
+     */
+    canPaste: boolean;
+    /**
+     * The first node involved in the operation, if any.
+     */
+    node?: INode;
+    /**
+     * The ID of the first node involved in the operation, if any.
+     */
+    nodeId?: string;
+    /**
+     * All nodes involved in the operation.
+     */
+    nodes: INode[];
+    /**
+     * IDs of nodes involved in the operation.
+     */
+    nodeIds: string[];
+}
+
+/**
+ * Dispatches typed diagram events from a host element and emits a companion
+ * diagram-changed event for high-level change tracking.
+ */
+declare class EventDispatcher {
+    private readonly host;
+    /**
+     * Creates an EventDispatcher bound to a host element.
+     * @param host The element that will emit diagram events.
+     */
+    constructor(host: HTMLElement);
+    /**
+     * Emits the diagram selection change event.
+     * @param detail Selection payload.
+     */
+    selectionChanged(detail: DiagramSelectionChange): void;
+    /**
+     * Emits the node-click event.
+     * @param detail Node-click payload.
+     */
+    nodeClicked(detail: DiagramSelectionChange): void;
+    /**
+     * Emits the background-click event.
+     * @param detail Background-click payload.
+     */
+    backgroundClicked(detail: DiagramBackgroundClick): void;
+    /**
+     * Emits the viewport-change event.
+     * @param detail Viewport payload.
+     */
+    viewportChanged(detail: DiagramViewportChange): void;
+    /**
+     * Emits the delete-request event as cancelable.
+     * @param detail Delete-request payload.
+     * @returns True when the request was not canceled.
+     */
+    deleteRequested(detail: DiagramDeleteRequest): boolean;
+    /**
+     * Emits the node-added event.
+     * @param detail Node change payload.
+     */
+    nodeAdded(detail: DiagramNodeChange): void;
+    /**
+     * Emits the node-deleted event.
+     * @param detail Node change payload.
+     */
+    nodeDeleted(detail: DiagramNodeChange): void;
+    /**
+     * Emits the node-moved event.
+     * @param detail Node change payload.
+     */
+    nodeMoved(detail: DiagramNodeChange): void;
+    /**
+     * Emits the node-resized event.
+     * @param detail Node change payload.
+     */
+    nodeResized(detail: DiagramNodeChange): void;
+    /**
+     * Emits the node-points-changed event.
+     * @param detail Node change payload.
+     */
+    nodePointsChanged(detail: DiagramNodeChange): void;
+    /**
+     * Emits the connection-connected event.
+     * @param detail Connection change payload.
+     */
+    connectionConnected(detail: DiagramConnectionChange): void;
+    /**
+     * Emits the connection-disconnected event.
+     * @param detail Connection change payload.
+     */
+    connectionDisconnected(detail: DiagramConnectionChange): void;
+    /**
+     * Emits the diagram edit context-menu event.
+     * @param detail Context-menu payload.
+     */
+    editContextMenu(detail: DiagramEditContextMenu): void;
+    /**
+     * Emits the tool-changed event.
+     * @param detail Tool-change payload.
+     */
+    toolChanged(detail: DiagramToolChange): void;
+    /**
+     * Emits the clipboard-change event.
+     * @param detail Clipboard payload.
+     */
+    clipboardChanged(detail: DiagramClipboardEventDetail): void;
+    private dispatchInternal;
+    private resolveDiagramChangeScope;
+}
+
+/**
+ * Provides basic operations for manipulating nodes, such as moving, resizing, rotating, and checking for overlaps or containment.
+ * These utilities are designed to work with nodes in a diagram editor, allowing for transformations and hit testing based on the node's geometry and the diagram's coordinate system.
+ * The methods take into account the node's points, angle, and bounding rectangle to perform accurate calculations for movement, resizing, and selection.
+ * This class can be used as a foundation for implementing more complex node behaviors in a diagram editing application.
+ */
+declare class NodeBasics {
+    /**
+     * Moves a node by the specified deltas.
+     * @param node The node to move.
+     * @param byX The horizontal delta.
+     * @param byY The vertical delta.
+     * @param flags Optional flags for movement behavior.
+     */
+    static moveBy(node: INode, byX: number, byY: number, flags?: null | 'ignore_scale'): void;
+    /**
+     * Resizes a node by the specified deltas.
+     * @param node The node to resize.
+     * @param byX The horizontal delta.
+     * @param byY The vertical delta.
+     * @param preserveAspect Whether to preserve the aspect ratio.
+     */
+    static resizeBy(node: INode, byX: number, byY: number, preserveAspect?: boolean): void;
+    /**
+     * Resizes a node based on the specified handle and movement deltas.
+     * @param node The node to resize.
+     * @param handle The handle being used for resizing.
+     * @param byX The horizontal movement delta.
+     * @param byY The vertical movement delta.
+     * @param preserveAspect Whether to preserve the aspect ratio during resizing.
+     */
+    static resizeHandle(node: INode, handle: NodeHandle, byX: number, byY: number, preserveAspect?: boolean): void;
+    /**
+     * Rotates a node to the specified angle.
+     * @param node The node to rotate.
+     * @param degrees The angle to rotate the node to.
+     * @param kind The unit of the angle, either 'degrees' or 'radians'.
+     */
+    static rotateTo(node: INode, degrees: number, kind?: 'degrees' | 'radians'): void;
+    /**
+     * Checks if a node overlaps with a target rectangle or another node's bounding rectangle.
+     * @param node The node to check.
+     * @param target The target rectangle or node to check against.
+     * @returns True if the node overlaps with the target, false otherwise.
+     */
+    static overlaps(node: INode, target: IRect | INode): boolean;
+    /**
+     * Checks if a node is fully inside a target rectangle or another node's bounding rectangle.
+     * @param node The node to check.
+     * @param target The target rectangle or node to check against.
+     * @returns True if the node is fully inside the target, false otherwise.
+     */
+    static inside(node: INode, target: IRect | INode): boolean;
+}
+
+/**
+ * Provides basic utilities for handling connections between nodes in a diagram.
+ * This includes logic for reconnecting and disconnecting endpoints of connections, inserting and removing intermediate points on connections,
+ * synchronizing connection endpoints with their attached nodes, and rendering arrowheads on connections.
+ * The methods in this class are designed to work with the diagram's coordinate system and node structure to ensure accurate manipulation of connections within the diagram editor.
+ */
+declare class ConnectionBasics {
+    /**
+     * Determines if a node supports mutable points, which allows for dynamic modification of its points.
+     * @param node The node to check.
+     * @returns True if the node supports mutable points, false otherwise.
+     */
+    static supportsMutablePoints(node: INode): boolean;
+    /**
+     * Reconnects a connection node to a new target based on the specified coordinates.
+     * @param node The connection node to reconnect.
+     * @param x The x-coordinate of the new target.
+     * @param y The y-coordinate of the new target.
+     */
+    static reconnect(node: INode & IConnection, x: number, y: number): void;
+    /**
+     * Disconnects a connection node from its target based on the specified coordinates.
+     * @param node The connection node to disconnect.
+     * @param x The x-coordinate of the target to disconnect from.
+     * @param y The y-coordinate of the target to disconnect from.
+     */
+    static disconnect(node: INode & IConnection, x: number, y: number): void;
+    /**
+     * Inserts a new point into a connection node at the specified coordinates.
+     * @param node The connection node to modify.
+     * @param x The x-coordinate of the new point.
+     * @param y The y-coordinate of the new point.
+     */
+    static insertPoint(node: INode, x: number, y: number): void;
+    /**
+     * Removes a point from a connection node at the specified coordinates.
+     * @param node The connection node to modify.
+     * @param x The x-coordinate of the point to remove.
+     * @param y The y-coordinate of the point to remove.
+     */
+    static removePoint(node: INode, x: number, y: number): void;
+    /**
+     * Synchronizes the endpoints of a connection node with its anchors.
+     * @param node The connection node to synchronize.
+     */
+    static syncEndpoints(node: INode & IConnection): void;
+    /**
+     * Renders the arrows for a connection node.
+     * @param node The connection node to render arrows for.
+     * @param context The canvas rendering context.
+     */
+    static renderArrows(node: INode & IConnection, context: CanvasRenderingContext2D): void;
+    /**
+     * Gets the anchor point for a connection node.
+     * @param node The connection node.
+     * @param anchor The connection anchor.
+     * @returns The anchor point or undefined if not found.
+     */
+    static getAnchorPoint(node: INode, anchor: IConnectionAnchor): IPoint | undefined;
+    private static resolveAnchorNode;
+    private static getInteractiveDiagram;
+    private static getMouseAnchor;
+    private static getPointIndex;
+    private static handlePoint;
+    private static renderArrow;
+}
+
+type IconSource = {
+    type: 'svg';
+    markup: string;
+} | {
+    type: 'url';
+    src: string;
+};
+/**
+ * Registry of icon sources used by editor and toolbar components.
+ */
+declare class IconRegistry {
+    private static readonly icons;
+    /**
+     * Register an icon by a short key, without the 'icon-' prefix.
+     * @param id The icon identifier.
+     * @param source The icon source.
+     */
+    static register(id: string, source: IconSource): void;
+    /**
+     * Register a symbol-defined icon. The symbol markup is converted to an
+     * inline SVG so no sprite injection is needed.
+     * @param id The icon identifier.
+     * @param _symbolId The symbol identifier (unused).
+     * @param symbolMarkup The SVG symbol markup.
+     */
+    static registerSymbol(id: string, _symbolId: string, symbolMarkup: string): void;
+    /**
+     * Register a standalone SVG string as an icon.
+     * @param id The icon identifier.
+     * @param markup The SVG markup string.
+     */
+    static registerSvg(id: string, markup: string): void;
+    /**
+     * Register an external URL as an icon.
+     * @param id The icon identifier.
+     * @param src The URL of the icon.
+     */
+    static registerUrl(id: string, src: string): void;
+    /**
+     * Checks if an icon with the given identifier is registered.
+     * @param id The icon identifier.
+     * @returns True if the icon is registered, false otherwise.
+     */
+    static has(id: string): boolean;
+    /**
+     * Retrieves the icon source for the given identifier.
+     * @param id The icon identifier.
+     * @returns The icon source if found, undefined otherwise.
+     */
+    static get(id: string): IconSource | undefined;
+    /**
+     * Returns an Element rendering the icon inline, or null if not found.
+     * @param id The icon identifier.
+     * @param size The desired size of the icon in pixels.
+     * @returns An Element representing the icon, or null if not found.
+     */
+    static createElement(id: string, size?: number): Element | null;
+}
+
+type HollowMode = 'always' | 'never' | 'if_transparent';
+type TextOverflowMode = 'visible' | 'hidden' | 'ellipsis';
+/**
+ * INodeAdapter defines the interface for handling different types of nodes in the diagram.
+ * It includes methods for hit testing, rendering, and serialization/deserialization of nodes.
+ */
+interface INodeAdapter {
+    /**
+     * The unique name of the adapter, which is used to associate it with nodes of a specific type.
+     * This name is typically registered with the NodeRegistry to enable the diagram control to find the appropriate adapter for each node.
+     */
+    name: string;
+    /**
+     * Optional icon for this tool shown in the tool palette and any icon-aware UI.
+     *
+     * Two formats are supported:
+     *
+     * - **SVG string** — provide the full `<svg>` markup for the icon:
+     *   ```ts
+     *   icon: {
+     *     type: 'svg',
+     *     markup: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">...</svg>',
+     *   }
+     *   ```
+     *
+     * - **Image URL** — provide any resolvable URL (data URL, CDN, relative path):
+     *   ```ts
+     *   icon: { type: 'url', src: 'https://example.com/my-tool.svg' }
+     *   ```
+     *
+     * When omitted the palette falls back to the built-in `IconRegistry` entry
+     * matching this adapter's `name`, then to a text label.
+     */
+    icon?: IconSource;
+    /**
+     * Indicates whether the adapter is for a connector node, which may require special handling for rendering and hit testing.
+     */
+    is_connector: boolean;
+    /**
+     * Indicates whether the node creation process involves multiple steps, such as defining multiple points for a polyline or curve.
+     * If true, the diagram control may need to handle additional user interactions during node creation.
+     */
+    multistep_create?: boolean;
+    /**
+     * The hollow mode determines how the node's hollow property is calculated based on its fill style.
+     * - 'always': The node is always hollow regardless of its fill style.
+     * - 'never': The node is never hollow regardless of its fill style.
+     * - 'if_transparent': The node is hollow if its fill style is 'transparent', otherwise it is not hollow.
+     */
+    hollow_mode: HollowMode;
+    /**
+     * Indicates whether the adapter supports rendering text within the node, which may affect how the node is rendered and whether text-related interactions are enabled.
+     */
+    has_text: boolean;
+    text_overflow: TextOverflowMode;
+    /**
+     * Updates the draft node's points while the user is dragging during creation.
+     * Called on every pointermove while a draft is active.
+     * @param node The draft node being created.
+     * @param point The current world-space cursor position.
+     */
+    onCreateMove(node: INode, point: IPoint): void;
+    /**
+     * Performs a hit test on the given node with the specified point.
+     * @param node The node to test.
+     * @param point The point to test against the node.
+     * @returns The handle of the node that was hit, or undefined if no hit occurred.
+     */
+    hitTest(node: INode, point: IPoint): NodeHandle | undefined;
+    /**
+     * Snaps the given node to the specified grid by modifying its points.
+     * @param node The node to snap.
+     * @param grid The grid to snap the node to.
+     */
+    snapToGrid(node: INode, grid: IGrid): void;
+    /**
+     * Renders the given node on the specified canvas context.
+     * @param node The node to render.
+     * @param ctx The canvas rendering context to draw on.
+     */
+    render(node: INode, ctx: CanvasRenderingContext2D): void;
+    /**
+     * Renders the selection state of the given node on the specified canvas context.
+     * @param node The node whose selection state to render.
+     * @param ctx The canvas rendering context to draw on.
+     */
+    renderSelection(node: INode, ctx: CanvasRenderingContext2D): void;
+    /**
+     * Writes the given node to a JSON-serializable format using the provided serializer.
+     * @param node The node to serialize.
+     * @param serializer The serializer to use for converting the node to JSON.
+     * @returns The JSON-serializable representation of the node.
+     */
+    write(node: INode, serializer: any): any;
+    /**
+     * Reads a node from the given JSON data using the provided serializer.
+     * @param json The JSON data to read the node from.
+     * @param serializer The serializer to use for converting the JSON data to a node.
+     * @returns A promise that resolves to the deserialized node.
+     */
+    read(json: any, serializer: any): Promise<INode>;
+}
+
+interface TextOptions {
+    overflow: TextOverflowMode;
+    path?: Path2D;
+}
+/**
+ * Provides basic rendering utilities for diagram nodes, including preparation of the canvas context for drawing nodes and their text.
+ * It handles setting up styles, shadows, and transformations based on node properties such as angle and transparency.
+ * The class also includes logic for rendering multi-line text within nodes, taking into account text alignment and baseline settings.
+ */
+declare class RenderBasics {
+    /**
+     * Prepares the canvas context for rendering a node, including setting styles, shadows, and transformations.
+     * @param node The node to prepare for rendering.
+     * @param context The canvas rendering context.
+     */
+    static prepare(node: INode, context: CanvasRenderingContext2D): void;
+    private static ensureImage;
+    /**
+     * Skips shadow for subsequent draw calls on the context.
+     * Call this after fill and before stroke when shadow should not apply to the stroke.
+     */
+    static skipShadow(context: CanvasRenderingContext2D): void;
+    /**
+     * Prepares the canvas context for rendering node handles, including setting styles and transformations based on node properties.
+     * @param node The node for which to prepare handles.
+     * @param context The canvas rendering context.
+     */
+    static prepareHandles(node: INode, context: CanvasRenderingContext2D): void;
+    /**
+     * Renders the text for a node, taking into account text alignment, overflow, and clipping options.
+     * @param node The node for which to render text.
+     * @param context The canvas rendering context.
+     * @param options Options for text rendering, including overflow and clipping path.
+     */
+    static renderText(node: INode, context: CanvasRenderingContext2D, options: TextOptions): void;
+    private static renderLines;
+    private static getTextLayout;
+    private static getLines;
+    private static resolveShadowColor;
+    private static toAlphaColor;
+    /**
+     * Returns a Path2D object representing the hit area for the text of a node, including optional padding.
+     * @param node The node for which to get the text hit path.
+     * @param context The canvas rendering context.
+     * @param padding The padding to apply around the text hit area.
+     * @returns A Path2D object representing the text hit area, or undefined if the node has insufficient points.
+     */
+    static getTextHitPath(node: INode, context: CanvasRenderingContext2D, padding?: number): Path2D | undefined;
+}
+
+/**
+ * CoordinateSystem is a utility class that manages the transformation between diagram coordinates and canvas coordinates, including handling zooming, panning, and grid snapping.
+ * It provides methods to convert points between the diagram's coordinate system and the canvas coordinate system, as well as methods to apply the current viewport transformation to a canvas context.
+ * The class also includes functionality to snap points to a grid if the grid is forced, and to calculate bounding rectangles for nodes based on their geometry and rotation.
+ */
+declare class CoordinateSystem {
+    private diagram?;
+    private context;
+    private origin;
+    private zoom_factor;
+    /**
+     * Creates an instance of CoordinateSystem and attaches it to a canvas rendering context.
+     * The CoordinateSystem will use this context to apply transformations and perform hit testing.
+     * @param context the CanvasRenderingContext2D to attach to the CoordinateSystem
+     */
+    constructor(context: CanvasRenderingContext2D);
+    /**
+     * Attaches a diagram to the CoordinateSystem, allowing it to access diagram-level information such as the grid.
+     * @param diagram the IDiagram to attach to the CoordinateSystem
+     */
+    attach(diagram: IDiagram): void;
+    get zoom(): number;
+    set zoom(value: number);
+    get pan(): IPoint;
+    set pan(value: IPoint);
+    /**
+     * Applies the current viewport transformation to the specified canvas context, including zooming and panning.
+     * @param context the CanvasRenderingContext2D to apply the transformation to
+     */
+    applyViewportTransform(context?: CanvasRenderingContext2D): void;
+    /**
+     * Resets the transformation of the specified canvas context to the identity matrix, effectively removing any zooming or panning.
+     * @param context the CanvasRenderingContext2D to reset the transformation for
+     */
+    resetTransform(context?: CanvasRenderingContext2D): void;
+    /**
+     * Converts the specified coordinates to the nearest grid point, if a grid is defined and forced.
+     * @param x the x-coordinate to convert
+     * @param y the y-coordinate to convert
+     * @param grid an optional grid to use for snapping, defaults to the diagram's grid if not provided
+     * @returns the nearest grid point
+     */
+    getGridPoint(x: number, y: number, grid?: IGrid): IPoint;
+    /**
+     * Converts the specified canvas coordinates to diagram coordinates, applying the current zoom and pan transformations, and optionally snapping to the grid.
+     * @param x the x-coordinate in canvas space
+     * @param y the y-coordinate in canvas space
+     * @param grid an optional grid to use for snapping, defaults to the diagram's grid if not provided
+     * @returns the corresponding point in diagram coordinates
+     */
+    getPoint(x: number, y: number, grid?: IGrid | 'ignore_grid'): IPoint;
+    /**
+     * Converts the specified pointer event coordinates to diagram coordinates, applying the current zoom and pan transformations, and optionally snapping to the grid.
+     * @param event the PointerEvent to convert
+     * @param grid an optional grid to use for snapping, defaults to the diagram's grid if not provided
+     * @returns the corresponding point in diagram coordinates
+     */
+    getPointFromEvent(event: PointerEvent, grid?: IGrid | 'ignore_grid'): IPoint;
+    /**
+     * Converts the specified point from canvas coordinates to diagram coordinates, applying the current zoom and pan transformations, and optionally snapping to the grid.
+     * @param pt the point in canvas coordinates to convert
+     * @param rect the bounding rectangle of the shape
+     * @param angle the rotation angle of the shape
+     * @param cos optional precomputed cosine of the angle
+     * @param sin optional precomputed sine of the angle
+     * @returns the corresponding point in diagram coordinates
+     */
+    getHitPoint(pt: IPoint, rect: IRect, angle: number, cos?: number, sin?: number): IPoint;
+    /**
+     * Converts the specified point from diagram coordinates to canvas coordinates, applying the current zoom and pan transformations.
+     * @param pt the point in diagram coordinates to convert
+     * @param rect the bounding rectangle of the shape
+     * @param angle the rotation angle of the shape
+     * @param cos optional precomputed cosine of the angle
+     * @param sin optional precomputed sine of the angle
+     * @returns the corresponding point in canvas coordinates
+     */
+    getRenderPoint(pt: IPoint, rect: IRect, angle: number, cos?: number, sin?: number): IPoint;
+    /**
+     * Calculates the bounding rectangle for a given node, taking into account its geometry and rotation.
+     * If the node has multiple points, it calculates the bounding rectangle defined by the top-left and bottom-right points.
+     * If the node is rotated, it calculates the bounding rectangle after rotation to ensure that it encompasses the entire shape.
+     * @param node the INode for which to calculate the bounding rectangle
+     * @param withAngle whether to take the node's rotation angle into account when calculating the bounding rectangle.
+     * @returns the calculated bounding rectangle
+     */
+    getBoundingRect(node: INode, withAngle?: boolean): IRect;
+    /**
+     * Detects whether a given point (x, y) is within the stroke of a specified path, taking into account an optional line width.
+     * This method is useful for hit testing when determining if a user interaction (like a mouse click) occurred on the border of a shape.
+     * @param path the Path2D object representing the shape's stroke
+     * @param x the x-coordinate of the point to test
+     * @param y the y-coordinate of the point to test
+     * @param lineWidth optional line width to consider for the stroke
+     * @returns true if the point is within the stroke, false otherwise
+     */
+    isPointInStroke(path: Path2D, x: number, y: number, lineWidth?: number): boolean;
+    /**
+     * Detects whether a given point (x, y) is within the path of a specified shape.
+     * This method is useful for hit testing when determining if a user interaction (like a mouse click) occurred inside a shape.
+     * @param path the Path2D object representing the shape's path
+     * @param x the x-coordinate of the point to test
+     * @param y the y-coordinate of the point to test
+     * @returns true if the point is within the path, false otherwise
+     */
+    isPointInPath(path: Path2D, x: number, y: number): boolean;
+}
+
+type SelectionDiagram = {
+    layers: ILayer[];
+    grid: IGrid;
+    node(id: string): INode | undefined;
+    hitNodes(x: number, y: number): INode[];
+    getCoordinates(): CoordinateSystem;
+};
+/**
+ * Provides basic selection logic for determining which nodes are selected based on a rectangular selection area.
+ * It supports both "include" mode (nodes fully inside the rectangle) and "touch" mode (nodes that intersect or are touched by the rectangle).
+ * The selection process takes into account the visibility of layers and samples points within the rectangle to find nodes that may be partially covered.
+ * This utility can be used in diagram editors to implement selection tools that allow users to select multiple nodes by dragging a selection box.
+ * The methods are designed to work with the diagram's coordinate system and grid to ensure accurate selection behavior.
+ */
+declare class SelectionBasics {
+    /**
+     * Returns the nodes within or touched by the specified rectangular area based on the selection mode.
+     * @param diagram The diagram containing the nodes and layers.
+     * @param rect The rectangular area to check for node selection.
+     * @param mode The selection mode, either 'include' (nodes fully inside) or 'touch' (nodes intersecting).
+     * @returns An array of nodes that match the selection criteria.
+     */
+    static nodesForRect(diagram: SelectionDiagram, rect: IRect, mode: 'include' | 'touch'): INode[];
+    /**
+     * Returns the nodes that are fully inside the specified rectangular area.
+     * @param diagram The diagram containing the nodes and layers.
+     * @param rect The rectangular area to check for node selection.
+     * @returns An array of nodes that are fully inside the rectangle.
+     */
+    static nodesInsideRect(diagram: SelectionDiagram, rect: IRect): INode[];
+    /**
+     * Returns the nodes that are inside or touching the specified rectangular area.
+     * @param diagram The diagram containing the nodes and layers.
+     * @param rect The rectangular area to check for node selection.
+     * @returns An array of nodes that are inside or touching the rectangle.
+     */
+    static nodesTouchingRect(diagram: SelectionDiagram, rect: IRect): INode[];
+    private static visibleNodes;
+    private static samplePoints;
+    private static axisSamples;
+    private static toCanvasPoint;
+}
+
+/**
+ * RectangleAdapter is a node adapter responsible for rendering rectangle nodes in the diagram.
+ * It provides basic rectangle rendering capabilities and hit testing logic.
+ * Registers with the NodeRegistry under the name 'rectangle'.
+ */
+declare class RectangleAdapter implements INodeAdapter {
+    static NAME: string;
+    get name(): string;
+    hollow_mode: HollowMode;
+    is_connector: boolean;
+    multistep_create: boolean;
+    has_text: boolean;
+    text_overflow: TextOverflowMode;
+    /**
+     * Registers the RectangleAdapter with the NodeRegistry.
+     */
+    static register(): void;
+    /**
+     * Registers the RectangleAdapter instance with the NodeRegistry.
+     */
+    register(): void;
+    hitTest(node: INode, point: IPoint): NodeHandle | undefined;
+    onCreateMove(node: INode, point: IPoint): void;
+    snapToGrid(node: INode, grid: IGrid): void;
+    render(node: INode, context: CanvasRenderingContext2D): void;
+    renderSelection(node: INode, context: CanvasRenderingContext2D): void;
+    write(node: INode, serializer: any): any;
+    read(json: any, serializer: any): Promise<INode>;
+}
+
+/**
+ * RoundRectangleAdapter is a node adapter responsible for rendering rounded rectangle nodes in the diagram.
+ * It extends the RectangleAdapter to leverage basic rectangle rendering capabilities while adding specific logic for handling rounded corners and hit testing.
+ * Registers with the NodeRegistry under the name 'round_rectangle'.
+ */
+declare class RoundRectangleAdapter extends RectangleAdapter {
+    static NAME: string;
+    render(node: INode, context: CanvasRenderingContext2D): void;
+}
+
+/**
+ * EllipseAdapter is a node adapter responsible for rendering ellipse nodes in the diagram.
+ * It extends the RectangleAdapter to leverage basic rectangle rendering capabilities while adding specific logic for handling elliptical shapes and hit testing.
+ * Registers with the NodeRegistry under the name 'ellipse'.
+ */
+declare class EllipseAdapter extends RectangleAdapter {
+    static NAME: string;
+    render(node: INode, context: CanvasRenderingContext2D): void;
+}
+
+/**
+ * RhombusAdapter is a node adapter responsible for rendering rhombus nodes in the diagram.
+ * It extends the RectangleAdapter to leverage basic rectangle rendering capabilities while adding specific logic for handling rhombus shapes and hit testing.
+ * Registers with the NodeRegistry under the name 'rhombus'.
+ */
+declare class RhombusAdapter extends RectangleAdapter {
+    static NAME: string;
+    render(node: INode, context: CanvasRenderingContext2D): void;
+}
+
+/**
+ * TextAdapter is a node adapter responsible for rendering text nodes in the diagram.
+ * It extends the RectangleAdapter to leverage basic rectangle rendering capabilities while adding specific logic for handling text content and hit testing.
+ * Registers with the NodeRegistry under the name 'text'.
+ */
+declare class TextAdapter extends RectangleAdapter {
+    static NAME: string;
+    hollow_mode: HollowMode;
+    text_overflow: TextOverflowMode;
+    render(node: INode, context: CanvasRenderingContext2D): void;
+}
+
+/**
+ * SvgAdapter is a node adapter responsible for rendering SVG nodes in the diagram.
+ * It extends the RectangleAdapter to leverage basic rectangle rendering capabilities while adding specific logic for handling SVG content and hit testing.
+ * Registers with the NodeRegistry under the name 'svg'.
+ */
+declare class SvgAdapter extends RectangleAdapter {
+    static NAME: string;
+    hollow_mode: HollowMode;
+    render(node: INode, context: CanvasRenderingContext2D): void;
+}
+
+/**
+ * PolylineAdapter is a node adapter responsible for rendering polyline nodes in the diagram.
+ * It provides rendering capabilities for polylines and hit testing logic specific to polylines.
+ * Registers with the NodeRegistry under the name 'polyline'.
+ */
+declare class PolylineAdapter implements INodeAdapter {
+    static NAME: string;
+    /**
+     * Gets the registry name for this adapter.
+     */
+    get name(): string;
+    hollow_mode: HollowMode;
+    is_connector: boolean;
+    multistep_create: boolean;
+    has_text: boolean;
+    text_overflow: TextOverflowMode;
+    /**
+     * Registers the PolylineAdapter with the NodeRegistry.
+     */
+    static register(): void;
+    /**
+     * Registers the PolylineAdapter instance with the NodeRegistry.
+     */
+    register(): void;
+    hitTest(node: INode, point: IPoint): NodeHandle | undefined;
+    snapToGrid(node: INode, grid: IGrid): void;
+    render(node: INode, context: CanvasRenderingContext2D): void;
+    renderSelection(node: INode, context: CanvasRenderingContext2D): void;
+    write(node: INode, serializer: any): any;
+    onCreateMove(node: INode, point: IPoint): void;
+    read(json: any, serializer: any): Promise<INode>;
+}
+
+/**
+ * PolygonAdapter is a node adapter responsible for rendering polygon nodes in the diagram.
+ * It extends the PolylineAdapter to leverage basic polyline rendering capabilities while adding specific logic for handling closed shapes and hit testing.
+ * Registers with the NodeRegistry under the name 'polygon'.
+ */
+declare class PolygonAdapter extends PolylineAdapter {
+    static NAME: string;
+    hollow_mode: HollowMode;
+    text_overflow: TextOverflowMode;
+    render(node: INode, context: CanvasRenderingContext2D): void;
+}
+
+/**
+ * CurveAdapter is a node adapter responsible for rendering curve nodes in the diagram.
+ * It extends the PolylineAdapter to leverage basic polyline rendering capabilities while adding specific logic for handling curved shapes and hit testing.
+ * Registers with the NodeRegistry under the name 'curve'.
+ * The curve is rendered using quadratic Bezier curves between points, providing a smooth appearance.
+ * Hit testing is performed by checking proximity to control points and the curve path itself, allowing for intuitive interaction with the curve nodes.
+ * The adapter also handles rendering of arrows for connection nodes, ensuring that directional indicators are properly displayed on curves.
+ */
+declare class CurveAdapter extends PolylineAdapter {
+    static NAME: string;
+    render(node: INode, context: CanvasRenderingContext2D): void;
+    onCreateMove(node: INode, point: IPoint): void;
+    private renderCurve;
+    private gradient;
+}
+
+/**
+ * LineAdapter is a node adapter responsible for rendering line nodes in the diagram.
+ * It extends the PolylineAdapter to leverage basic polyline rendering capabilities while adding specific logic for handling straight lines and hit testing.
+ * Registers with the NodeRegistry under the name 'line'.
+ */
+declare class LineAdapter extends PolylineAdapter {
+    static NAME: string;
+    hollow_mode: HollowMode;
+    multistep_create: boolean;
+    render(node: INode, context: CanvasRenderingContext2D): void;
+    renderSelection(node: INode, context: CanvasRenderingContext2D): void;
+    private renderLine;
+}
+
+/**
+ * NodeRegistry is a central registry for managing different types of node handlers.
+ * It allows for registering, retrieving, and unregistering node handlers based on their type.
+ * This enables the diagram system to support various node types and their associated behaviors in a modular way.
+ *
+ * Handlers should be registered with a unique type string that identifies the kind of node they handle.
+ * The registry can then be queried to retrieve the appropriate handler for a given node type when needed.
+ * This design promotes extensibility and separation of concerns within the diagram system.
+ *
+ * Example usage:
+ * const rectangleHandler = new RectangleHandler();
+ * rectangleHandler.register(); // Registers the handler with the NodeRegistry
+ *
+ * const handler = NodeRegistry.get('rectangle'); // Retrieves the handler for 'rectangle' nodes
+ * if (handler) {
+ *     handler.render(node, context); // Uses the handler to render a node
+ * }
+ */
+declare class NodeRegistry {
+    private static _nodes;
+    /**
+     * Registers a node handler for a specific type.
+     * @param type The type of the node.
+     * @param handler The handler responsible for managing the node type.
+     */
+    static register(type: string, handler: INodeAdapter | (new () => INodeAdapter)): void;
+    /**
+     * Retrieves the node handler for a given type.
+     * @param type The type of the node to retrieve the handler for.
+     * @returns The node handler for the specified type, or undefined if no handler is registered for that type.
+     */
+    static adapter(type: string): INodeAdapter | undefined;
+    /**
+     * Unregisters a node handler for a specific type.
+     * @param type The type of the node to unregister the handler for.
+     */
+    static unregister(type: string): void;
+    /**
+     * Retrieves a list of all registered node types in the registry.
+     * @returns An array of strings representing the registered node types.
+     */
+    static registeredTypes(): string[];
+    /**
+     * Checks if the node type represents a connection.
+     * @param type The type of the node.
+     * @returns True if the node type is a connection, false otherwise.
+     */
+    static isConnection(type: string): boolean;
+    /**
+     * Checks if the node type has text.
+     * @param type The type of the node.
+     * @returns True if the node type has text, false otherwise.
+     */
+    static hasText(type: string): boolean;
+    /**
+     * Checks if the node type requires a multistep creation process.
+     * @param type The type of the node.
+     * @returns True if the node type requires multistep creation, false otherwise.
+     */
+    static isMultistepCreate(type: string): boolean;
+}
+
+interface HistoryState {
+    document: string;
+    selection: string[];
+}
+/**
+ * A class that manages the history of changes to a diagram, allowing for undo and redo functionality.
+ * It tracks the state of the diagram at various points in time and provides methods to restore previous states.
+ */
+declare class HistoryStack {
+    private diagram;
+    private undoList;
+    private redoList;
+    private readonly historySerializer;
+    /**
+     * Creates an instance of HistoryStack and attaches it to a diagram model that supports selection.
+     * The HistoryStack will use the model's serialization and selection capabilities to manage history states.
+     * @param diagram The diagram model to attach to the history stack.
+     */
+    constructor(diagram: IDiagram & HasSelection);
+    /**
+     * Retrieves the current state of the diagram, including its serialized document and selected nodes.
+     * @returns the current history state or undefined if the diagram is not available.
+     */
+    getState(): HistoryState | undefined;
+    /**
+     * Restores the diagram to a previous state.
+     * @param state The history state to restore.
+     * @returns A promise that resolves to true if the state was successfully restored, false otherwise.
+     */
+    restoreState(state: HistoryState): Promise<boolean>;
+    /**
+     * Indicates whether there are any states in the undo stack that can be undone. Returns true if there is at least one state in the undo stack, false otherwise.
+     * @returns true if undo is possible, false otherwise.
+     */
+    get canUndo(): boolean;
+    /**
+     * Indicates whether there are any states in the redo stack that can be redone. Returns true if there is at least one state in the redo stack, false otherwise.
+     * @returns true if redo is possible, false otherwise.
+     */
+    get canRedo(): boolean;
+    /**
+     * Clears the history stacks for both undo and redo, effectively resetting the history of changes.
+     */
+    clear(): void;
+    /**
+     * Adds the current state of the diagram to the undo stack.
+     * This should be called whenever a change is made to the diagram that should be undoable.
+     */
+    addUndo(): void;
+    /**
+     * Undoes the last change made to the diagram by restoring the previous state from the undo stack.
+     * The current state is pushed onto the redo stack to allow for redo operations.
+     * @returns A promise that resolves to true if the undo operation was successful, false otherwise.
+     */
+    undo(): Promise<boolean>;
+    /**
+     * Redoes the last undone change by restoring the state from the redo stack.
+     * The current state is pushed onto the undo stack to allow for undo operations.
+     * @returns A promise that resolves to true if the redo operation was successful, false otherwise.
+     */
+    redo(): Promise<boolean>;
+    private isSameState;
+}
+
+/**
+ * A class that manages colors frequently used in a diagram.
+ * It can be used to support building adaptive editor UIs.
+ */
+declare class ColorPalette {
+    private diagram;
+    private colors_used;
+    /**
+     * Creates an instance of ColorPalette and attaches it to a diagram model.
+     * The ColorPalettte will be based on colors used in the given Diagram.
+     * @param diagram The diagram model to read colors from.
+     */
+    constructor(diagram: Diagram);
+    /**
+     * List colors in descending order of their frequency.
+     * @returns An array of color strings sorted by their usage frequency.
+     */
+    frequentColors(): string[];
+    /**
+     * Refreshes the color palette by scanning the diagram for all colors currently in use.
+     * This method should be called whenever there are changes to the diagram that may affect color usage.
+     * It updates the internal count of colors used in the diagram, which can then be retrieved using `frequentColors()`.
+     */
+    refresh(): void;
+    /**
+     * Manually adds a color to the palette's tracking.
+     * This can be used to populate the palette with known colors.
+     * @param style The color string to add to the palette.
+     */
+    addColor(style: string): void;
+    private isColor;
+}
+
+/**
+ * Horizontal alignment options for fit-to-view operations.
+ */
+type HorizontalAlign = "left" | "center" | "right";
+/**
+ * Vertical alignment options for fit-to-view operations.
+ */
+type VerticalAlign = "top" | "center" | "bottom";
+/**
+ * Alignment options used by fit-to-width and fit-to-nodes operations.
+ */
+interface FitAlign {
+    horizontal?: HorizontalAlign;
+    vertical?: VerticalAlign;
+}
+/**
+ * Initial view modes for DiagramView. Determines how the viewport is set when the diagram is first loaded.
+ */
+type InitialViewMode = "saved" | "fit-width" | "fit-all";
+/**
+ * Selection options to define how selection works in the diagram view.
+ */
+interface DiagramSelectionOptions {
+    enable_select: boolean;
+    enable_multi: boolean;
+    enable_rect: boolean;
+    rect_mode: "include" | "touch";
+}
+/**
+ * Initial viewport settings for a diagram view.
+ */
+interface DiagramInitialView {
+    mode?: InitialViewMode;
+    pan?: IPoint;
+    zoom?: number;
+    padding?: number;
+    alignment?: FitAlign;
+}
+/**
+ * Construction options for DiagramView and subclasses.
+ */
+interface DiagramViewOptions {
+    initialView?: DiagramInitialView;
+    selectedNodeId?: string;
+    selectedNodeIds?: string[];
+    selection?: DiagramSelectionOptions;
+}
+
+/**
+ * FitViewport is a utility class that provides methods to adjust the viewport of a DiagramView to fit its content (nodes) within the visible area.
+ * It calculates the appropriate zoom level and pan offset based on the dimensions of the nodes and the canvas,
+ * allowing for different alignment options (center, left, right, top, bottom).
+ * The class also includes methods to clamp the zoom level within specified minimum and maximum values.
+ */
+declare class FitViewport {
+    private diagram;
+    private minZoom;
+    private maxZoom;
+    /**
+     * Creates an instance of FitViewport and attaches it to a DiagramView.
+     * This allows the FitViewport to manipulate the viewport of the DiagramView when fitting content.
+     * @param diagram the DiagramView instance to attach to
+     * @param options optional configuration for minimum and maximum zoom levels
+     */
+    constructor(diagram: DiagramView, options?: {
+        minZoom?: number;
+        maxZoom?: number;
+    });
+    /**
+     * Adjusts the viewport to fit the width of the nodes within the visible area of the canvas.
+     * @param padding The padding to apply around the content.
+     * @param alignment The alignment options for fitting the content.
+     */
+    fitToWidth(options?: {
+        padding?: number;
+        alignment?: FitAlign;
+    }): void;
+    /**
+     * Adjusts the viewport to fit all nodes within the visible area of the canvas.
+     * @param padding The padding to apply around the content.
+     * @param alignment The alignment options for fitting the content.
+     */
+    fitToNodes(options?: {
+        padding?: number;
+        alignment?: FitAlign;
+    }): void;
+    /**
+     * Applies the calculated viewport settings (zoom and pan) to the diagram based on the provided bounds.
+     * This method applies a transform to the diagram's canvas and coordinate system.
+     * @param bounds The bounding rectangle of the content to fit.
+     * @param zoom The zoom level to apply.
+     * @param padding The padding to apply around the content.
+     * @param alignment The alignment options for fitting the content.
+     */
+    protected applyViewportForBounds(bounds: IRect, zoom: number, padding: number, alignment?: FitAlign): void;
+    /**
+     * Clamps the zoom value to the allowed range defined by `minZoom` and `maxZoom`.
+     * @param value The zoom value to clamp.
+     * @returns The clamped zoom value.
+     */
+    clampZoom(value: number): number;
+    private getHorizontalOffset;
+    private getVerticalOffset;
+}
+
+type Cacheable = INode | ILayer;
+/**
+ * Cached properties for nodes and layers.
+ */
+interface INodeCached {
+    cos?: number;
+    sin?: number;
+    path?: Path2D;
+    text_path?: Path2D;
+    img?: HTMLImageElement;
+    pattern?: CanvasPattern;
+    image_loading?: boolean;
+}
+interface ILayerCached {
+    context?: CanvasRenderingContext2D;
+}
+/**
+ * Helper class for caching computed properties of nodes and layers to optimize rendering performance.
+ * It uses WeakMaps to associate cached data with nodes and layers without preventing garbage collection.
+ */
+declare class ViewCache {
+    private node_cache;
+    private layer_cache;
+    /**
+     * Gets cached render data for a node.
+     * @param node Target node.
+     * @returns Cached node data when present.
+     */
+    getNode(node: INode): INodeCached | undefined;
+    /**
+     * Stores cached render data for a node.
+     * @param node Target node.
+     * @param cached Cached node data.
+     */
+    setNode(node: INode, cached: INodeCached): void;
+    /**
+     * Removes cached render data for a node.
+     * @param node Target node.
+     */
+    deleteNode(node: INode): void;
+    /**
+     * Gets cached render data for a layer.
+     * @param layer Target layer.
+     * @returns Cached layer data when present.
+     */
+    getLayer(layer: ILayer): ILayerCached | undefined;
+    /**
+     * Stores cached render data for a layer.
+     * @param layer Target layer.
+     * @param cached Cached layer data.
+     */
+    setLayer(layer: ILayer, cached: ILayerCached): void;
+    /**
+     * Removes cached render data for a layer.
+     * @param layer Target layer.
+     */
+    deleteLayer(layer: ILayer): void;
+    /**
+     * Clears all node and layer cache entries.
+     */
+    clear(): void;
+}
+
+/**
+ * A class representing a diagram in 'view' mode.
+ * This class extends the base Diagram model and adds properties and methods specific to rendering and interacting with the diagram.
+ *
+ * It includes a coordinate system for managing transformations
+ * and a cache for storing precomputed values related to nodes for efficient rendering.
+ */
+declare class DiagramView extends Diagram implements HasSelection {
+    protected readonly ownsCanvas: boolean;
+    protected coordinates: CoordinateSystem;
+    protected cache: ViewCache;
+    protected host: HTMLElement;
+    protected canvas: HTMLCanvasElement;
+    protected context: CanvasRenderingContext2D;
+    protected readonly eventDispatcher: EventDispatcher;
+    protected resizeObserver?: ResizeObserver;
+    protected selected_nodes: INode[];
+    protected selectionOptions: DiagramSelectionOptions;
+    protected fitViewport: FitViewport;
+    protected isSpacePanning: boolean;
+    protected dragStartOnNode: boolean;
+    protected dragPanningWithSpace: boolean;
+    protected readonly handlePointerDown: (event: PointerEvent) => void;
+    protected readonly handlePointerMove: (event: PointerEvent) => void;
+    protected readonly handlePointerUp: (event: PointerEvent) => void;
+    protected readonly handlePointerLeave: (event: PointerEvent) => void;
+    protected readonly handleWheel: (event: WheelEvent) => void;
+    protected readonly handleKeyDown: (event: KeyboardEvent) => void;
+    protected readonly handleKeyUp: (event: KeyboardEvent) => void;
+    protected readonly handleContextMenu: (event: PointerEvent) => void;
+    /**
+     * Creates a new DiagramView instance.
+     * @param id The unique identifier for the diagram.
+     * @param target The HTML element or canvas where the diagram will be rendered.
+     * @param initial Initial properties for the diagram.
+     * @param options Configuration options for the diagram view.
+     */
+    constructor(id: string, target: HTMLElement | HTMLCanvasElement, initial?: Partial<Omit<Diagram, 'id'>>, options?: DiagramViewOptions);
+    /**
+     * Cleans up resources used by the DiagramView, including event listeners and the canvas element if it was created by the view.
+     */
+    destroy(): void;
+    clear(): void;
+    /**
+     * Indicates the rendering mode of this diagram instance.
+     */
+    get render_mode(): 'view' | 'editing';
+    /**
+     * Returns the cache used by the DiagramView.
+     */
+    getCache(): ViewCache;
+    /**
+     * Returns the coordinate system used by the DiagramView.
+     */
+    getCoordinates(): CoordinateSystem;
+    /**
+     * Returns the canvas element used by the DiagramView.
+     */
+    getCanvas(): HTMLCanvasElement;
+    /**
+     * Selects a node by its ID or node object.
+     * @param node The ID of the node or the node object to select.
+     * @returns The selected node, if any.
+     */
+    selectNode(node: string | INode): INode | undefined;
+    /**
+     * Returns the currently selected nodes.
+     * @returns An array of selected nodes.
+     */
+    selection(): INode[];
+    /**
+     * Checks if a node is currently selected.
+     * @param node The node to check.
+     * @returns True if the node is selected, false otherwise.
+     */
+    isSelected(node: INode): boolean;
+    /**
+     * Selects a node.
+     * @param node The node to select.
+     */
+    select(node: INode): void;
+    /**
+     * Deselects a node.
+     * @param node The node to deselect.
+     */
+    deselect(node: INode): void;
+    /**
+     * Clears the selection of all nodes.
+     */
+    clearSelection(): void;
+    /**
+     * Selects all nodes in the diagram. Honors the `enable_multi` selection option to determine whether multiple nodes can be selected at once.
+     */
+    selectAll(): void;
+    /**
+     * Sets the selection of nodes.
+     * @param nodes The nodes to select.
+     */
+    setSelection(nodes: INode[]): void;
+    /**
+     * Toggles the selection state of a node.
+     * @param node The node to toggle.
+     * @returns void
+     */
+    toggleSelection(node: INode): void;
+    /**
+     * Sets the viewport of the diagram with a given pan and/or zoom.
+     * @param viewport The viewport changes to apply.
+     */
+    setViewport(viewport: Partial<DiagramViewportChange>): void;
+    /**
+     * Fits the diagram content to the width of the viewport, with optional padding and alignment.
+     * @param padding The padding to apply around the content.
+     * @param alignment The alignment of the content within the viewport.
+     */
+    fitToWidth(options?: {
+        padding?: number;
+        alignment?: FitAlign;
+    }): void;
+    /**
+     * Fits the diagram content to the viewport, with optional padding and alignment.
+     * @param padding The padding to apply around the content.
+     * @param alignment The alignment of the content within the viewport.
+     */
+    fitToNodes(options?: {
+        padding?: number;
+        alignment?: FitAlign;
+    }): void;
+    /**
+     * Set the zoom level directly, optionally around a canvas-space center point.
+     * @param zoom The desired zoom level.
+     * @param centerX The x coordinate (canvas space) to keep visually stable during zoom.
+     * @param centerY The y coordinate (canvas space) to keep visually stable during zoom.
+     */
+    zoomTo(zoom: number, centerX?: number, centerY?: number): void;
+    /**
+     * Zoom the diagram by multiplying current zoom by a factor, optionally around a canvas-space center point.
+     * @param factor The zoom multiplier. Values greater than 1 zoom in and values between 0 and 1 zoom out.
+     * @param centerX The x coordinate (canvas space) to keep visually stable during zoom.
+     * @param centerY The y coordinate (canvas space) to keep visually stable during zoom.
+     */
+    zoomBy(factor: number, centerX?: number, centerY?: number): void;
+    /**
+     * Pan the diagram by the specified delta values.
+     * @param deltaX The amount to pan in the x direction.
+     * @param deltaY The amount to pan in the y direction.
+     */
+    panBy(deltaX: number, deltaY: number): void;
+    upsertNode(node: INode): INode;
+    upsertLayer(layer: string | ILayer): ILayer;
+    deleteNode(nodeId: string): void;
+    deleteLayer(layerId: string): void;
+    setNodeImageSource(node: string | INode, imageSrc: string, mode?: 'pattern' | 'frame', imageId?: string): INode | undefined;
+    setNodeSvgSource(node: string | INode, svgOrSrc: string, mode?: 'pattern' | 'frame', imageId?: string): INode | undefined;
+    clearNodeImageSource(node: string | INode): INode | undefined;
+    /**
+     * Renders the diagram onto the canvas, including any selection markers.
+     * By default, both nodes and selection markers are rendered, but this can be controlled with the `what` parameter.
+     * @param what A string indicating what to render: 'nodes' to render only nodes, 'selection' to render only selection markers, 'grid' to render only the grid, or 'all' to render everything.
+     */
+    render(what?: 'nodes' | 'selection' | 'grid' | 'all'): void;
+    private renderGrid;
+    /**
+     * Resets the viewport to the default position and zoom level, and clears the selection.
+     */
+    resetView(): void;
+    /**
+     * Exports the full visible diagram content as an image blob.
+     * This export is uncropped and ignores the current viewport pan/zoom.
+     * The exported image will be sized to fit the bounds of all visible nodes, plus optional padding.
+     * @param options The options for writing the image, including padding and MIME type.
+     * @param serializer The serializer to use for writing the image.
+     * @returns A promise that resolves to a Blob containing the exported image.
+     */
+    exportImage(options?: ImageWriteOptions, serializer?: ImageSerializer): Promise<Blob>;
+    /**
+     * Exports and saves the full visible diagram content as an image file.
+     * In Node.js this writes to the file system; in browsers this triggers a download.
+     */
+    saveImage(options?: ImageSaveOptions, serializer?: ImageSerializer): Promise<string>;
+    private createExportCanvas;
+    private renderContentToContext;
+    private getImageExtension;
+    /**
+     * Calculate the bounding rectangle that encompasses all visible nodes in the diagram.
+     * @returns The bounding rectangle of all visible nodes, or `undefined` if there are no visible nodes.
+     */
+    getNodeBounds(): IRect | undefined;
+    /**
+     * Returns the first node found at the specified coordinates, if any.
+     * @param x The x-coordinate to test.
+     * @param y The y-coordinate to test.
+     */
+    protected hitNode(x: number, y: number): INode | undefined;
+    /**
+     * Returns all nodes at the specified coordinates.
+     * @param x The x-coordinate to test.
+     * @param y The y-coordinate to test.
+     * @returns An array of nodes at the specified coordinates.
+     */
+    protected hitNodes(x: number, y: number): INode[];
+    /**
+     * Returns the handle at the specified coordinates, if any.
+     * @param x The x-coordinate to test.
+     * @param y The y-coordinate to test.
+     * @param target The target node to test, if any.
+     * @returns The handle at the specified coordinates, or `NodeHandle.NONE` if none is found.
+     */
+    protected hitHandle(x: number, y: number, target?: INode): NodeHandle;
+    /**
+     * Select the cursor style reflecting a node handle.
+     * @param handle The node handle to determine the cursor style for.
+     * @returns The CSS cursor style for the specified node handle.
+     */
+    protected getCursor(handle: NodeHandle): string | undefined;
+    /**
+     * Respond to pointer down events on the canvas, handling selection and panning based on the event properties and current selection options.
+     * @param event The pointer event.
+     */
+    protected pointerDown(event: PointerEvent): void;
+    /**
+     * Respond to pointer move events on the canvas, updating the cursor style based on hit testing and handling panning if the primary button is pressed.
+     * @param event The pointer event.
+     */
+    protected pointerMove(event: PointerEvent): void;
+    /**
+     * Respond to pointer up events on the canvas, releasing pointer capture and re-rendering the diagram if necessary.
+     * @param event The pointer event.
+     */
+    protected pointerUp(event: PointerEvent): void;
+    /**
+     * Respond to wheel events on the canvas, handling zooming when the Ctrl or Meta key is pressed and panning otherwise.
+     * @param event The wheel event.
+     */
+    protected wheel(event: WheelEvent): void;
+    /**
+     * Respond to keydown events on the window, currently does nothing but can be used for keyboard shortcuts in the future.
+     * @param event The keyboard event.
+     */
+    protected keydown(event: KeyboardEvent): void;
+    /**
+     * Respond to keyup events on the window.
+     * @param event The keyboard event.
+     */
+    protected keyup(event: KeyboardEvent): void;
+    /**
+     * Respond to context menu events on the canvas, preventing the default context menu from appearing.
+     * @param event The pointer event.
+     */
+    protected contextmenu(event: PointerEvent): void;
+    private createCanvas;
+    private syncCanvasSize;
+    private bindResizeObserver;
+    private bindCanvasEvents;
+    private emitSelectionChange;
+    private emitNodeClick;
+    private emitBackgroundClick;
+    private emitViewportEvents;
+    private applyInitialView;
+    private initializeSelection;
+}
+
+type DiagramEditViewUnsavedAction = 'save' | 'discard' | 'cancel';
+type DiagramEditViewPromptReason = 'new' | 'open' | 'load';
+type DiagramEditViewPrompts = {
+    onUnsavedChanges?: (context: {
+        reason: DiagramEditViewPromptReason;
+    }) => DiagramEditViewUnsavedAction | Promise<DiagramEditViewUnsavedAction>;
+    onNoChangesSave?: () => boolean | Promise<boolean>;
+};
+/**
+ * A class representing a diagram in edit mode.
+ * It provides tools for selection of nodes as well as mutation of the diagram's structure by user actions.
+ */
+declare class DiagramEditView extends DiagramView {
+    protected history: HistoryStack;
+    private zOrder;
+    private color_palette;
+    private zOrderHost;
+    protected current: {
+        layer?: ILayer;
+        tool?: string;
+        toolOptions?: {
+            url?: string;
+        };
+        draft?: INode;
+        zoom_factor: number;
+    };
+    protected settings: {
+        lineWidth: number;
+        startArrow: boolean;
+        endArrow: boolean;
+        strokeColor: string;
+        fillColor: string;
+        shadowStyle: ShadowStyle;
+        fontFace: string;
+        fontSize: number;
+        textColor: string;
+        textAlign: ITextAlign;
+        textBaseline: ITextBaseline;
+        nodeText?: string;
+    };
+    protected palette_mode: 'stroke' | 'fill';
+    protected modified: boolean;
+    protected can_paste: boolean;
+    private clipboardSnapshot;
+    private movedNodes;
+    private resizedNodes;
+    private pointChangedNodes;
+    private connectionBeforeEdit?;
+    protected activeTextEditor?: {
+        element: HTMLTextAreaElement;
+        nodeId: string;
+        originalText: string;
+    };
+    fileDialogs?: DiagramFileDialogs;
+    prompts?: DiagramEditViewPrompts;
+    /**
+     * Creates an instance of DiagramEditView.
+     * @param id The unique identifier for the diagram.
+     * @param target The HTML element or canvas where the diagram will be rendered.
+     * @param initial Optional initial properties for the diagram.
+     */
+    constructor(id: string, target: HTMLElement | HTMLCanvasElement, initial?: Partial<Omit<Diagram, 'id'>>);
+    /**
+     * Cleans up resources used by the diagram, such as event listeners and active text editors.
+     */
+    destroy(): void;
+    clear(): void;
+    get canOpenDiagram(): boolean;
+    /**
+     * Clears the current diagram after resolving any unsaved-change prompt.
+     * A prompt will be shown if the diagram has unsaved changes.
+     * @returns True when a new empty diagram was created; otherwise false.
+     */
+    newDiagram(): Promise<boolean>;
+    /**
+     * Loads a diagram from a live diagram instance, a serialized JSON string, or a deserialized payload.
+     * A prompt will be shown if the diagram has unsaved changes.
+     * @param source The diagram source to load.
+     * @returns True when the source was loaded; otherwise false when loading was canceled.
+     */
+    loadDiagram(source: DiagramOpenSource): Promise<boolean>;
+    /**
+     * Opens a diagram using configured file dialog behavior after resolving unsaved-change prompts.
+     * @param options Optional open options or source overrides.
+     * @returns True when a diagram was opened; otherwise false.
+     */
+    openDiagram(options?: DiagramOpenOptions): Promise<boolean>;
+    saveDiagram(options?: DiagramSaveOptions): Promise<string | undefined>;
+    exportDiagram(options?: DiagramExportOptions): Promise<string | Uint8Array | Blob | undefined>;
+    private applyDiagramSource;
+    private confirmReplaceIfNeeded;
+    private confirmSaveWithoutChangesIfNeeded;
+    /**
+     * Gets the active render mode for this view.
+     */
+    get render_mode(): 'view' | 'editing';
+    /**
+     * Gets the current default line width for borders and connections.
+     */
+    get lineWidth(): number;
+    /**
+     * Sets the default line width and applies it to current selection.
+     * @param value Line width value.
+     */
+    set lineWidth(value: number);
+    /**
+     * Sets the default arrow direction and applies it to current selection.
+     * @param value Arrow direction value.
+     */
+    set arrow(value: ArrowDirection);
+    /**
+     * Gets the current default stroke color.
+     */
+    get strokeColor(): string;
+    /**
+     * Sets the default stroke color and applies it to current selection.
+     * @param value Stroke color value.
+     */
+    set strokeColor(value: string);
+    /**
+     * Gets the current default fill color.
+     */
+    get fillColor(): string;
+    /**
+     * Sets the default fill color and applies it to current selection.
+     * @param value Fill color value.
+     */
+    set fillColor(value: string);
+    /**
+     * Gets the current default text color.
+     */
+    get textColor(): string;
+    /**
+     * Sets the default text color and applies it to current selection.
+     * @param value Text color value.
+     */
+    set textColor(value: string);
+    /**
+     * Gets the current default shadow style.
+     */
+    get shadowStyle(): ShadowStyle;
+    /**
+     * Sets the default shadow style and applies it to current selection.
+     * @param value Shadow style value.
+     */
+    set shadowStyle(value: ShadowStyle);
+    /**
+     * Gets the current default font family.
+     */
+    get fontFace(): string;
+    /**
+     * Sets the default font family and applies it to current selection.
+     * @param value Font family value.
+     */
+    set fontFace(value: string);
+    /**
+     * Gets the current default font size.
+     */
+    get fontSize(): number;
+    /**
+     * Sets the default font size and applies it to current selection.
+     * @param value Font size value.
+     */
+    set fontSize(value: number);
+    /**
+     * Gets the current default horizontal text alignment.
+     */
+    get textAlign(): ITextAlign;
+    /**
+     * Sets the default horizontal text alignment and applies it to current selection.
+     * @param value Text alignment value.
+     */
+    set textAlign(value: ITextAlign);
+    /**
+     * Gets the current default vertical text baseline.
+     */
+    get textBaseline(): ITextBaseline;
+    /**
+     * Sets the default vertical text baseline and applies it to current selection.
+     * @param value Text baseline value.
+     */
+    set textBaseline(value: ITextBaseline);
+    /**
+     * Gets the default node text for newly created text-capable nodes.
+     */
+    get nodeText(): string | undefined;
+    /**
+     * Sets the default node text for newly created text-capable nodes.
+     * @param value Text value.
+     */
+    set nodeText(value: string | undefined);
+    /**
+     * Gets the currently active tool identifier.
+     */
+    get currentTool(): string;
+    get canPaste(): boolean;
+    /**
+     * Sets the current tool for the diagram.
+     * The default tool is 'select', which allows for selection and manipulation of existing nodes.
+     * @param tool The name of the tool to set.
+     * @param options Optional parameters for the tool.
+     * @returns A promise that resolves when the tool is set.
+     */
+    setTool(tool: string, options?: any): Promise<void>;
+    /**
+     * Sets the stroke color for the selected nodes and new nodes to be created.
+     * @param color The stroke color to set.
+     */
+    setStrokeColor(color: string): void;
+    /**
+     * Sets the fill color for the selected nodes and new nodes to be created.
+     * @param color The fill color to set.
+     */
+    setFillColor(color: string): void;
+    /**
+     * Sets the text color for the selected nodes and default style state.
+     * @param color The text color to apply.
+     */
+    setTextColor(color: string): void;
+    /**
+     * Sets the line width for the selected nodes and new nodes to be created.
+     * @param width The line width to set.
+     */
+    setLineWidth(width: number): void;
+    /**
+     * Sets the arrow direction for the selected nodes and new nodes to be created.
+     * @param arrow The arrow direction to set.
+     */
+    setArrow(arrow: ArrowDirection): void;
+    /**
+     * Sets the shadow style for the selected nodes and new nodes to be created.
+     * @param style The shadow style to set.
+     */
+    setShadowStyle(style: ShadowStyle): void;
+    /**
+     * Sets the font face for the selected nodes and new nodes to be created.
+     * @param face The font face to set.
+     */
+    setFontFace(face: string): void;
+    /**
+     * Sets the font size for the selected nodes and new nodes to be created.
+     * @param size The font size to set.
+     */
+    setFontSize(size: number): void;
+    /**
+     * Sets the text alignment for the selected nodes and new nodes to be created.
+     * @param align The text alignment to set.
+     */
+    setTextAlign(align: ITextAlign | string): void;
+    /**
+     * Sets the text baseline for the selected nodes and new nodes to be created.
+     * @param align The text baseline to set.
+     */
+    setTextBaseline(align: ITextBaseline | string): void;
+    /**
+     * Sets the text for the selected nodes and new nodes to be created.
+     * @param text The text to set.
+     */
+    setNodeText(text: string): void;
+    /**
+     * Updates the grid settings for the diagram and re-renders it to reflect the changes.
+     * @param json A partial object containing the grid properties to update. Only the provided properties will be updated, while the others will remain unchanged.
+     */
+    updateGrid(json: Partial<IGrid>): void;
+    /**
+     * List colors used in this diagram in descening order of their usage frequency.
+     * @returns Colors as an array of strings.
+     */
+    getFrequentColors(): string[];
+    /**
+     * Indicates whether the diagram contains unsaved modifications.
+     */
+    isModified(): boolean;
+    /**
+     * Take a snapshot of the current diagram state and push it onto the undo stack.
+     * This should be called before making any changes to the diagram that should be undoable.
+     * After calling this method, the `canUndo` property will return true, indicating that there is now an action in the undo stack that can be undone.
+     */
+    protected addUndo(): void;
+    /**
+     * Returns true if there are actions in the undo stack that can be undone, false otherwise.
+     * @returns A boolean indicating whether an undo operation can be performed.
+     */
+    get canUndo(): boolean;
+    /**
+     * Returns true if there are actions in the redo stack that can be redone, false otherwise.
+     * @returns A boolean indicating whether a redo operation can be performed.
+     */
+    get canRedo(): boolean;
+    /**
+     * Undoes the last action performed on the diagram, reverting it to the previous state.
+     */
+    undo(): Promise<void>;
+    /**
+     * Redoes the last undone action on the diagram, restoring it to the state before the undo was performed.
+     */
+    redo(): Promise<void>;
+    /**
+     * Cuts the selected nodes, copying them to the clipboard and then deleting them from the diagram.
+     */
+    cutSelected(): void;
+    /**
+     * Copies the selected nodes to the clipboard in JSON format.
+     * The copied data includes all properties of the nodes, allowing for accurate reconstruction when pasted.
+     * After copying, the `canPaste` flag is set to true, indicating that there is data available in the clipboard that can be pasted into the diagram.
+     */
+    copySelected(operation?: DiagramClipboardOperation): void;
+    /**
+     * Pastes nodes from the clipboard into the diagram.
+     */
+    pasteNodes(): void;
+    /**
+     * Checks if the clipboard contains nodes that can be pasted into the diagram.
+     */
+    clipboardHasNodes(): void;
+    private writeClipboardText;
+    private readClipboardText;
+    private emitClipboardChange;
+    private parseClipboardNodes;
+    /**
+     * Select a layer to be the target for new nodes and operations.
+     * @param layer The layer to set as the current layer.
+     */
+    setCurrentLayer(layer: ILayer): void;
+    /**
+     * Adds a new layer to the diagram at the specified position.
+     * @param id The layer ID.
+     * @param place The position to add the new layer ('top' or 'bottom').
+     */
+    addLayer(id: string, place?: 'top' | 'bottom'): void;
+    /**
+     * Moves the selected nodes to a new layer.
+     */
+    moveToNewLayer(): void;
+    /**
+     * Selects all nodes within the specified layer.
+     * @param layer The layer whose nodes should be selected.
+     */
+    selectLayer(layer: ILayer): void;
+    /**
+     * Shows the specified layer, making it visible in the diagram.
+     * @param layer The layer to show.
+     */
+    showLayer(layer: ILayer): void;
+    /**
+     * Hides the specified layer, making it invisible in the diagram.
+     * Hidden layers are not rendered and their nodes cannot be interacted with until they are shown again.
+     * @param layer The layer to hide.
+     */
+    hideLayer(layer: ILayer): void;
+    /**
+     * Deletes the specified layer from the diagram.
+     * @param layerId The ID of the layer to delete.
+     */
+    deleteLayer(layerId: string): void;
+    /**
+     * Moves selected nodes one step toward the front, confined within their layers.
+     */
+    bringSelectionForward(): void;
+    /**
+     * Moves selected nodes one step toward the back, confined within their layers.
+     */
+    sendSelectionBackward(): void;
+    /**
+     * Moves selected nodes to the front, confined within their layers.
+     */
+    bringSelectionToFront(): void;
+    /**
+     * Moves selected nodes to the back, confined within their layers.
+     */
+    sendSelectionToBack(): void;
+    /**
+     * Moves a node one step toward the front, confined within its layer.
+     * @param node The target node or node ID.
+     */
+    bringNodeForward(node: string | INode): void;
+    /**
+     * Moves a node one step toward the back, confined within its layer.
+     * @param node The target node or node ID.
+     */
+    sendNodeBackward(node: string | INode): void;
+    /**
+     * Moves a node to the front, confined within its layer.
+     * @param node The target node or node ID.
+     */
+    bringNodeToFront(node: string | INode): void;
+    /**
+     * Moves a node to the back, confined within its layer.
+     * @param node The target node or node ID.
+     */
+    sendNodeToBack(node: string | INode): void;
+    /**
+     * Moves a layer one step toward the front.
+     * @param layer The target layer or layer ID.
+     */
+    bringLayerForward(layer: string | ILayer): void;
+    /**
+     * Moves a layer one step toward the back.
+     * @param layer The target layer or layer ID.
+     */
+    sendLayerBackward(layer: string | ILayer): void;
+    /**
+     * Moves a layer to the front.
+     * @param layer The target layer or layer ID.
+     */
+    bringLayerToFront(layer: string | ILayer): void;
+    /**
+     * Moves a layer to the back.
+     * @param layer The target layer or layer ID.
+     */
+    sendLayerToBack(layer: string | ILayer): void;
+    /**
+     * Deletes the currently selected nodes from the diagram.
+     */
+    deleteSelected(): void;
+    /**
+     * Clones the currently selected nodes in the diagram.
+     * The cloned nodes are offset by 24 pixels in both x and y directions.
+     */
+    cloneSelected(): Promise<void>;
+    protected cloneNode(node: INode | ISerializedNode, id?: string): INode;
+    /**
+     * Sets the arrow type for the currently selected connection.
+     * @param where Specifies which end(s) of the connection should have arrows.
+     */
+    pickArrow(where: 'start' | 'end' | 'both' | 'none'): void;
+    /**
+     * Changes the type of the specified node.
+     * @param node The node or node ID to change the type of.
+     * @param type The new type to assign to the node.
+     */
+    changeType(node: string | INode, type: string): void;
+    /**
+     * Aligns the currently selected nodes in the specified direction.
+     * @param dir The direction to align the nodes ('left', 'right', 'center', 'top', 'bottom', 'middle').
+     */
+    alignSelected(dir: 'left' | 'right' | 'center' | 'top' | 'bottom' | 'middle'): void;
+    /**
+     * Spreads the currently selected nodes evenly in the specified direction.
+     * @param dir The direction to spread the nodes ('row' or 'column').
+     */
+    spreadSelected(dir: 'row' | 'column'): void;
+    render(what?: 'nodes' | 'selection' | 'all'): void;
+    /**
+     * Renders the selection markers for the specified node or all selected nodes if no node is specified.
+     * @param node The node to render selection markers for. If not provided, all selected nodes are rendered.
+     */
+    renderSelection(node?: INode): void;
+    /**
+     * Respond to pointer down events on the canvas, handling selection, panning, creation, and modification based on the event properties and current selection options.
+     * @param event The pointer event.
+     */
+    protected pointerDown(event: PointerEvent): void;
+    /**
+     * Respond to pointer move events on the canvas, handling selection, panning, creation, and modification based on the event properties and current selection options.
+     * @param event The pointer event.
+     */
+    protected pointerMove(event: PointerEvent): void;
+    /**
+     * Respond to pointer up events on the canvas, handling selection, panning, creation, and modification based on the event properties and current selection options.
+     * @param event The pointer event.
+     */
+    protected pointerUp(event: PointerEvent): void;
+    /**
+     * Respond to key down events, handling deletion, copying, pasting, cutting, undoing, and exiting drawing mode based on the event properties and current selection state.
+     * @param event The keyboard event.
+     */
+    protected keydown(event: KeyboardEvent): void;
+    protected keyup(event: KeyboardEvent): void;
+    /**
+     * Respond to context menu events on the canvas, preventing the default context menu from appearing.
+     * @param event The pointer event.
+     */
+    protected contextmenu(event: PointerEvent): void;
+    downPos?: IPoint;
+    downShape?: INode;
+    downHandle?: NodeHandle;
+    downRect?: IRect;
+    private selectDown;
+    private selectMove;
+    private selectUp;
+    private createDown;
+    private createMove;
+    private createUp;
+    private hasCreateTool;
+    private isMultistepCreate;
+    private isConnectorType;
+    private hasTextInput;
+    private updateConnectorDraftReadiness;
+    private resolveAnchorNode;
+    private renderConnectorTargets;
+    private previewConnectorTargets;
+    private createDraftFromCurrent;
+    private finishDraftIfReady;
+    init(): Promise<void>;
+    /**
+     * Renders preview output for the provided layer.
+     * @param layer Optional layer to preview.
+     */
+    renderPreview(layer?: ILayer): void;
+    private applyText;
+    private createLayerAt;
+    private ensureCurrentLayer;
+    private generateLayerId;
+    private exitDrawing;
+    private editText;
+    private closeTextEditor;
+    private normalizeRect;
+    private renderSelectionRect;
+    private applyRectSelection;
+    private selectionAdapter;
+    private moveSelected;
+    private resizeSelected;
+    private moveSelectedPoint;
+    private emitPendingMutationEvents;
+    private emitNodeAdded;
+    private emitNodeDeleted;
+    private emitNodeMoved;
+    private emitNodeResized;
+    private emitNodePointsChanged;
+    private emitConnectionConnected;
+    private emitConnectionDisconnected;
+    private emitConnectionChanges;
+    private captureConnectionState;
+    private anchorSignature;
+    private connectionTargetsNode;
+    private reflectStyles;
+    /**
+     * Opens SVG tool/image selection workflow.
+     */
+    pickSVG(): void;
+    /**
+     * Opens image selection workflow for the current node selection.
+     */
+    pickNodeImage(): void;
+    /**
+     * Applies a selected image file to the current node selection.
+     * @param event File input event or undefined to trigger picker flow.
+     */
+    setNodeImage(event?: any): void;
+    /**
+     * Applies an image source to all currently selected nodes.
+     */
+    setSelectedNodeImageSource(imageSrc: string, mode?: 'pattern' | 'frame', imageId?: string): void;
+    /**
+     * Applies SVG markup or source URL/data URL to all currently selected nodes.
+     */
+    setSelectedNodeSvgSource(svgOrSrc: string, mode?: 'pattern' | 'frame', imageId?: string): void;
+    /**
+     * Clears image source configuration from all currently selected nodes.
+     */
+    clearSelectedNodeImageSource(): void;
+    showActions(): void;
+}
+
+type ZOrderAction = 'bringForward' | 'bringToFront' | 'sendBackward' | 'sendToBack';
+interface ZOrderHost {
+    layers: ILayer[];
+    selection(): INode[];
+    layer(id: string): ILayer | undefined;
+    addUndo(): void;
+    render(what?: 'nodes' | 'selection' | 'all'): void;
+    renderPreview(layer?: ILayer): void;
+}
+/**
+ * Handles z-ordering of nodes and layers in the diagram. This class is used by DiagramEditView to implement the z-ordering methods.
+ * The ZOrder class provides methods to reorder nodes and layers based on a specified action (bring forward, send backward, bring to front, send to back).
+ * It operates on the current selection of nodes or a specific layer/node as needed.
+ * The class ensures that any changes to the z-ordering are properly tracked for undo functionality and that the diagram is re-rendered to reflect the changes.
+ */
+declare class ZOrder {
+    private host;
+    /**
+        * Creates an instance of ZOrder and attaches it to a ZOrderHost (e.g., DiagramEditView).
+        * This allows the ZOrder instance to manipulate the layers and nodes of the host diagram when reordering.
+        * @param host The ZOrderHost instance to attach to, which provides access to the diagram's layers, selection, and rendering methods.
+        */
+    constructor(host: ZOrderHost);
+    /**
+     * Reorders the currently selected nodes based on the specified action.
+     * Changes are made to the attached host's layers and nodes, and the diagram is re-rendered to reflect the new z-ordering.
+     * @param action The z-order action to perform (bring forward, send backward, bring to front, send to back).
+     */
+    reorderSelection(action: ZOrderAction): void;
+    /**
+     * Reorders the specified layer based on the given action.
+     * Changes are made to the attached host's layers, and the diagram is re-rendered to reflect the new z-ordering.
+     * @param layer The target layer or layer ID to reorder.
+     * @param action The z-order action to perform (bring forward, send backward, bring to front, send to back).
+     */
+    reorderLayer(layer: string | ILayer, action: ZOrderAction): void;
+    /**
+     * Reorders the specified node based on the given action, confined within its layer.
+     * Changes are made to the attached host's layers, and the diagram is re-rendered to reflect the new z-ordering.
+     * @param node The target node or node ID to reorder.
+     * @param action The z-order action to perform (bring forward, send backward, bring to front, send to back).
+     */
+    reorderNode(node: string | INode, action: ZOrderAction): void;
+    private reorderSelected;
+    private hasChanged;
+}
+
+/**
+ * Stores image asset sources and stable asset identifiers for diagram nodes.
+ *
+ * This cache supports registration, lookup by id, bulk load/snapshot,
+ * and deterministic id generation for non-URL sources.
+ */
+declare class AssetStore {
+    private assetsById;
+    private assetIdBySource;
+    /**
+     * Registers an asset source and returns its asset id.
+     * @param source Asset source URL or serialized value.
+     * @param preferredId Optional preferred id if it is available.
+     * @returns The assigned asset id, or an empty string for blank input.
+     */
+    register(source: string, preferredId?: string): string;
+    /**
+     * Resolves an asset id to its source value.
+     * @param imageId Asset id to resolve.
+     * @returns Asset source when present; otherwise undefined.
+     */
+    resolve(imageId?: string): string | undefined;
+    /**
+     * Replaces the store contents from a serialized asset map.
+     * @param assets Serialized assets keyed by id.
+     */
+    load(assets?: Record<string, string>): void;
+    /**
+     * Creates a serializable snapshot of the current asset map.
+     * @returns Asset map when non-empty; otherwise undefined.
+     */
+    snapshot(): Record<string, string> | undefined;
+    /**
+     * Clears all cached asset mappings.
+     */
+    clear(): void;
+    /**
+     * Releases store resources.
+     */
+    destroy(): void;
+    private createHashedAssetId;
+    private hashString;
+    private looksLikeRemoteUrl;
+}
+
+/** Default custom element tag name for the view-only diagram host. */
+declare const DIAGRAM_VIEW_TAG = "pz-diagram-view";
+/**
+ * Custom element wrapper that hosts a {@link DiagramView} instance.
+ *
+ * The element recreates its internal view when input properties change,
+ * allowing declarative usage through attributes/properties.
+ */
+declare class DiagramViewElement extends HTMLElement {
+    /** Attributes observed by the custom element runtime. */
+    static get observedAttributes(): string[];
+    private viewInstance?;
+    private viewId;
+    private initialState?;
+    private initialOptions?;
+    /** Returns the current DiagramView instance when initialized. */
+    get view(): DiagramView | undefined;
+    /** Gets the diagram identifier used to initialize the internal view. */
+    get diagramId(): string;
+    /**
+     * Sets the diagram identifier and recreates the internal view when changed.
+     * @param value New diagram id.
+     */
+    set diagramId(value: string);
+    /** Gets the initial diagram state used when creating the internal view. */
+    get diagram(): Partial<Omit<Diagram, 'id'>> | undefined;
+    /**
+     * Sets initial diagram data and recreates the internal view when connected.
+     * @param value Initial diagram state.
+     */
+    set diagram(value: Partial<Omit<Diagram, 'id'>> | undefined);
+    /** Gets initial view options used when creating the internal view. */
+    get options(): DiagramViewOptions | undefined;
+    /**
+     * Sets view options and recreates the internal view when connected.
+     * @param value Initial view options.
+     */
+    set options(value: DiagramViewOptions | undefined);
+    /**
+     * Lifecycle callback fired when the element is attached to the DOM.
+     */
+    connectedCallback(): void;
+    /**
+     * Lifecycle callback fired when the element is detached from the DOM.
+     */
+    disconnectedCallback(): void;
+    /**
+     * Reacts to observed attribute changes.
+     * @param name Attribute name.
+     * @param _oldValue Previous attribute value.
+     * @param newValue New attribute value.
+     */
+    attributeChangedCallback(name: string, _oldValue: string | null, newValue: string | null): void;
+    /** Recreates the internal view when the element is connected. */
+    private recreateView;
+    /** Creates the internal view if it does not yet exist. */
+    private ensureView;
+    /** Destroys and clears the internal view instance. */
+    private destroyView;
+}
+/**
+ * Registers the diagram view custom element if not already registered.
+ * @param tagName The custom element tag name to register.
+ * @returns The DiagramViewElement constructor.
+ */
+declare function registerDiagramViewElement(tagName?: string): typeof DiagramViewElement;
+
+/** Default custom element tag name for the editable diagram host. */
+declare const DIAGRAM_EDIT_TAG = "pz-diagram-edit";
+/**
+ * Custom element wrapper that hosts a {@link DiagramEditView} instance.
+ *
+ * The element recreates its internal view when input properties change,
+ * allowing declarative usage through attributes/properties.
+ */
+declare class DiagramEditElement extends HTMLElement {
+    /** Attributes observed by the custom element runtime. */
+    static get observedAttributes(): string[];
+    private editInstance?;
+    private editId;
+    private initialState?;
+    /** Returns the current DiagramEditView instance when initialized. */
+    get edit(): DiagramEditView | undefined;
+    /** Gets the diagram identifier used to initialize the internal edit view. */
+    get diagramId(): string;
+    /**
+     * Sets the diagram identifier and recreates the internal view when changed.
+     * @param value New diagram id.
+     */
+    set diagramId(value: string);
+    /** Gets the initial diagram state used when creating the internal view. */
+    get diagram(): Partial<Omit<Diagram, 'id'>> | undefined;
+    /**
+     * Sets initial diagram data and recreates the internal view when connected.
+     * @param value Initial diagram state.
+     */
+    set diagram(value: Partial<Omit<Diagram, 'id'>> | undefined);
+    /**
+     * Lifecycle callback fired when the element is attached to the DOM.
+     */
+    connectedCallback(): void;
+    /**
+     * Lifecycle callback fired when the element is detached from the DOM.
+     */
+    disconnectedCallback(): void;
+    /**
+     * Reacts to observed attribute changes.
+     * @param name Attribute name.
+     * @param _oldValue Previous attribute value.
+     * @param newValue New attribute value.
+     */
+    attributeChangedCallback(name: string, _oldValue: string | null, newValue: string | null): void;
+    /** Recreates the internal edit view when the element is connected. */
+    private recreateEdit;
+    /** Creates the internal edit view if it does not yet exist. */
+    private ensureEdit;
+    /** Destroys and clears the internal edit view instance. */
+    private destroyEdit;
+}
+/**
+ * Registers the diagram edit custom element if not already registered.
+ * @param tagName The custom element tag name to register.
+ * @returns The DiagramEditElement constructor.
+ */
+declare function registerDiagramEditElement(tagName?: string): typeof DiagramEditElement;
+
+/**
+ * Configuration options for the ColorSelect control.
+ * Provide only the properties you want to override; defaults will be used for the rest.
+ */
+interface ColorSelectConfig {
+    /**
+     * Whether to show a color swatch in the trigger button. Default is true.
+     */
+    showSwatch?: boolean;
+    /**
+     * Whether to show a color label in the trigger button. Default is true.
+     * The label will display the color value or 'clear' for transparent.
+     */
+    showLabel?: boolean;
+    /**
+     * Whether to show the native color input. Default is 'option'.
+     * 'start' - show at the start of the trigger button
+     * 'end' - show at the end of the trigger button
+     * 'option' - show as an option in the menu
+     * 'none' - do not show
+     */
+    showNativeInput?: 'start' | 'end' | 'option' | 'none';
+    /**
+     * Aria label for the native color input. Default is 'Custom color'.
+     */
+    nativeInputAriaLabel?: string;
+    /**
+     * Optional class name for the host element.
+     */
+    hostClassName?: string;
+    /**
+     * Optional class name for the trigger button.
+     */
+    triggerClassName?: string;
+    /**
+     * Optional class name for the menu element.
+     */
+    menuClassName?: string;
+    /**
+     * Optional class name for the option elements.
+     */
+    optionClassName?: string;
+    /**
+     * Optional class name for the color swatch elements.
+     */
+    swatchClassName?: string;
+    /**
+     * Optional class name for the label elements.
+     */
+    labelClassName?: string;
+    /**
+     * Optional class name for the native input element.
+     */
+    nativeInputClassName?: string;
+    /**
+     * Optional class name for the selected state.
+     */
+    selectedClassName?: string;
+    /**
+     * Optional class name for the open state.
+     */
+    openClassName?: string;
+}
+/**
+ * Input shape for adding a color option with an optional display label.
+ */
+interface ColorOptionInput {
+    /**
+     * The color value to display. Can be any valid CSS color string.
+     */
+    color: string;
+    /**
+     * Optional label to display for the color option. If not provided, the color value will be used.
+     */
+    label?: string;
+}
+/**
+ * A color selection control that supports predefined options and an optional native color picker input.
+ * The control can be configured to show color swatches, labels, and the native input in different arrangements.
+ * It dispatches a 'colorchange' event with the selected color whenever the selection changes.
+ */
+declare class ColorSelect {
+    protected host: HTMLElement;
+    protected selected: string;
+    protected config: Required<ColorSelectConfig>;
+    protected trigger: HTMLButtonElement;
+    protected triggerSwatch?: HTMLDivElement;
+    protected triggerLabel?: HTMLSpanElement;
+    protected nativeInput?: HTMLInputElement;
+    protected customInput?: HTMLInputElement;
+    protected customOption?: HTMLButtonElement;
+    protected nativeInputMode: 'start' | 'end' | 'option' | 'none';
+    protected menu: HTMLDivElement;
+    constructor(target: HTMLElement, config?: ColorSelectConfig);
+    /**
+     * Releases DOM/event resources owned by the control.
+     */
+    destroy(): void;
+    /**
+     * Gets the currently selected color value.
+     */
+    get value(): string;
+    /**
+     * Sets the selected color value.
+     */
+    set value(color: string);
+    /**
+     * Manually adds a color option to the menu. This is useful when the color options are dynamic or not known upfront.
+     * @param color The color value to add. Any web color or hexadecimal value including alpha channel.
+     * @param label An optional label for the color option.
+     */
+    addOption(color: string, label?: string): void;
+    /**
+     * Manually adds multiple color options to the menu. This is useful when the color options are dynamic or not known upfront.
+     * @param colors An array of color values or objects containing color and optional label.
+     */
+    addOptions(colors: (string | ColorOptionInput)[]): void;
+    /**
+     * Removes all color options from the menu, including the transparent 'clear' and custom options if present.
+     * The menu will be left empty and the custom option will need to be re-added manually if desired.
+     */
+    clearOptions(): void;
+    /**
+     * Handles the click event on the trigger element. Opens or closes the menu based on its current state.
+     */
+    protected readonly onTriggerClick: () => void;
+    /**
+     * Handles the click event on the document. Closes the menu if the click is outside the host element.
+     */
+    protected readonly onDocumentClick: (event: Event) => void;
+    /**
+     * Handles the click event on a color option. Selects the color and closes the menu.
+     */
+    protected readonly onOptionClick: (event: Event) => void;
+    /**
+     * Handles the input event on the native color input. Selects the color without closing the menu.
+     */
+    protected readonly onNativeInput: () => void;
+    /**
+     * Handles the input event on the custom color input. Selects the color and closes the menu.
+     */
+    protected readonly onCustomInput: () => void;
+    /**
+     * Selects a color and updates the UI accordingly.
+     * @param color The color to select.
+     */
+    protected selectColor(color: string): void;
+    protected buildOption(color: string, label?: string): HTMLButtonElement;
+    protected buildCustomOption(): HTMLButtonElement;
+    protected createSwatch(color: string): HTMLDivElement;
+    protected createCustomSwatch(): HTMLDivElement;
+    protected colorStyleForSwatch(color: string): string;
+    protected syncTrigger(): void;
+    protected displayColorLabel(color: string): string;
+    protected nativeInputValue(color: string): string;
+    protected resolveNativeInputMode(value: ColorSelectConfig['showNativeInput']): 'start' | 'end' | 'option' | 'none';
+    protected customInputOpen(): void;
+    protected placeCustomOption(): void;
+    protected placeTransparentOption(): void;
+    protected hasOption(color: string): boolean;
+    protected normalizeComparableColor(color: string): string;
+    protected syncSelectedOption(): void;
+    protected openMenu(): void;
+    protected closeMenu(): void;
+}
+
+/**
+ * Configuration options for the WidthSelect component.
+ */
+interface WidthSelectConfig {
+    /**
+     * An array of predefined widths to display in the dropdown. Each width should be a positive number.
+     * If not provided, a default set of widths will be used.
+     */
+    widths?: number[];
+    /**
+     * The stroke color to use for the width swatch in the dropdown and trigger button.
+     */
+    strokeColor?: string;
+    /**
+     * Indicates whether to show the width label (e.g., "1px", "2px") next to the swatch in the trigger button and options.
+     */
+    showLabel?: boolean;
+    /**
+     * Optional CSS class name to apply to the host element of the WidthSelect component. This allows for custom styling of the component.
+     */
+    hostClassName?: string;
+    /**
+     * Optional CSS class name to apply to the trigger button of the WidthSelect component. This allows for custom styling of the trigger button.
+     */
+    triggerClassName?: string;
+    /**
+     * Optional CSS class name to apply to the dropdown menu of the WidthSelect component. This allows for custom styling of the dropdown menu.
+     */
+    menuClassName?: string;
+    /**
+     * Optional CSS class name to apply to each option in the dropdown menu. This allows for custom styling of the options.
+     */
+    optionClassName?: string;
+    /**
+     * Optional CSS class name to apply to the swatch element of the WidthSelect component. This allows for custom styling of the swatch.
+     */
+    swatchClassName?: string;
+    /**
+     * Optional CSS class name to apply to the label element of the WidthSelect component. This allows for custom styling of the label.
+     */
+    labelClassName?: string;
+    /**
+     * Optional CSS class name to apply to the selected option of the WidthSelect component. This allows for custom styling of the selected option.
+     */
+    selectedClassName?: string;
+    /**
+     * Optional CSS class name to apply when the WidthSelect component is open. This allows for custom styling when the component is open.
+     */
+    openClassName?: string;
+}
+/**
+ * A dropdown component for selecting line widths.
+ * It displays a list of predefined widths and allows the user to select one.
+ * The selected width is reflected in the trigger button and can be accessed via the `value` property.
+ * The component emits a 'widthchange' event when the selected width changes.
+ */
+declare class WidthSelect {
+    protected host: HTMLElement;
+    protected config: Required<Omit<WidthSelectConfig, 'widths'>> & {
+        widths: number[];
+    };
+    protected selected: number;
+    protected trigger: HTMLButtonElement;
+    protected triggerSwatch: HTMLDivElement;
+    protected triggerLabel?: HTMLSpanElement;
+    protected menu: HTMLDivElement;
+    constructor(target: HTMLElement, config?: WidthSelectConfig);
+    /**
+     * Releases DOM/event resources owned by the control.
+     */
+    destroy(): void;
+    /**
+     * Gets the currently selected width value.
+     */
+    get value(): number;
+    /**
+     * Sets the currently selected width value.
+     */
+    set value(width: number);
+    /**
+     * Sets the available width options and optionally selects a width.
+     * @param widths - An array of widths.
+     * @param selectedWidth - The width to select. Defaults to the first width in the array.
+     */
+    setOptions(widths: number[], selectedWidth?: number): void;
+    /**
+     * Handles the click event on the trigger button. Toggles the open/closed state of the dropdown menu.
+     */
+    protected readonly onTriggerClick: () => void;
+    /**
+     * Handles the click event on the document. Closes the dropdown menu if the click is outside the host element.
+     * @param event - The click event.
+     */
+    protected readonly onDocumentClick: (event: Event) => void;
+    /**
+     * Handles the click event on an option. Selects the clicked width and closes the dropdown menu.
+     * @param event - The click event.
+     */
+    protected readonly onOptionClick: (event: Event) => void;
+    protected rebuildOptions(widths: number[]): void;
+    protected buildOption(width: number): HTMLButtonElement;
+    protected createWidthSvg(width: number): SVGElement;
+    protected selectWidth(width: number, emit?: boolean): void;
+    protected syncTrigger(): void;
+    protected syncSelectedOption(): void;
+    protected openMenu(): void;
+    protected closeMenu(): void;
+}
+
+/**
+ * Configuration options for the font select control.
+ * Provide only the properties you want to customize. All other properties will use default values.
+ */
+interface FontSelectConfig {
+    /**
+     * Optional array of font family names to display in the dropdown. If not provided, a default set of common fonts will be used.
+     * If an empty array is provided, the default fonts will be used.
+     */
+    fonts?: string[];
+    /**
+     * Whether to show a preview of the selected font in the trigger button.
+     */
+    showPreview?: boolean;
+    /**
+     * Custom class name for the host element.
+     */
+    hostClassName?: string;
+    /**
+     * Custom class name for the trigger button.
+     */
+    triggerClassName?: string;
+    /**
+     * Custom class name for the dropdown menu.
+     */
+    menuClassName?: string;
+    /**
+     * Custom class name for each option in the dropdown.
+     */
+    optionClassName?: string;
+    /**
+     * Custom class name for the font preview element.
+     */
+    previewClassName?: string;
+    /**
+     * Custom class name for the label element.
+     */
+    labelClassName?: string;
+    /**
+     * Custom class name for the selected option.
+     */
+    selectedClassName?: string;
+    /**
+     * Custom class name for the open state.
+     */
+    openClassName?: string;
+}
+declare const DEFAULT_FONTS: string[];
+/**
+ * A dropdown control for selecting font families.
+ * Emits a 'fontchange' event when the selected font changes.
+ * Example usage:
+ *
+ * const fontSelect = new FontSelect(document.getElementById('font-select'), {
+ *     fonts: ['Arial', 'Verdana', 'Tahoma'],
+ *     showPreview: true,
+ * });
+ */
+declare class FontSelect {
+    protected host: HTMLElement;
+    protected config: Required<Omit<FontSelectConfig, 'fonts'>> & {
+        fonts: string[];
+    };
+    protected selected: string;
+    protected trigger: HTMLButtonElement;
+    protected triggerPreview: HTMLSpanElement;
+    protected menu: HTMLDivElement;
+    constructor(target: HTMLElement, config?: FontSelectConfig);
+    /**
+     * Releases DOM/event resources owned by the control.
+     */
+    destroy(): void;
+    /**
+     * Gets the currently selected font family.
+     */
+    get value(): string;
+    /**
+     * Sets the currently selected font family.
+     */
+    set value(font: string);
+    /**
+     * Sets the available font options and optionally selects a font.
+     * @param fonts - An array of font family names.
+     * @param selectedFont - The font to select. Defaults to the first font in the array.
+     */
+    setOptions(fonts: string[], selectedFont?: string): void;
+    /**
+     * Handles the click event on the trigger button.
+     * Toggles the open/closed state of the dropdown menu.
+     */
+    protected readonly onTriggerClick: () => void;
+    /**
+     * Handles the click event on the document to close the menu when clicking outside.
+     */
+    protected readonly onDocumentClick: (event: Event) => void;
+    /**
+     * Handles the click event on a font option.
+     * Selects the clicked font and closes the menu.
+     * @param event - The click event.
+     */
+    protected readonly onOptionClick: (event: Event) => void;
+    protected rebuildOptions(fonts: string[]): void;
+    protected buildOption(font: string): HTMLButtonElement;
+    protected selectFont(font: string, emit?: boolean): void;
+    protected syncTrigger(): void;
+    protected syncSelectedOption(): void;
+    protected openMenu(): void;
+    protected closeMenu(): void;
+}
+
+/**
+ * Configuration options for the SizeSelect control.
+ * Provide only the properties you want to customize. All other properties will use default values.
+ */
+interface SizeSelectConfig {
+    /**
+     * Optional array of sizes to display in the dropdown. If not provided, a default set of sizes will be used.
+     */
+    sizes?: number[];
+    /**
+     * Optional unit to display next to the size values (e.g., 'px', 'pt'). Defaults to 'px'.
+     */
+    unit?: string;
+    /**
+     * Whether to show the unit label next to the size values. Defaults to true.
+     */
+    showLabel?: boolean;
+    /**
+     * Optional CSS class name to apply to the host element of the SizeSelect control. This allows for custom styling.
+     */
+    hostClassName?: string;
+    /**
+     * Optional CSS class name to apply to the trigger button of the SizeSelect control. This allows for custom styling.
+     */
+    triggerClassName?: string;
+    /**
+     * Optional CSS class name to apply to the dropdown menu of the SizeSelect control. This allows for custom styling.
+     */
+    menuClassName?: string;
+    /**
+     * Optional CSS class name to apply to each option in the dropdown menu. This allows for custom styling.
+     */
+    optionClassName?: string;
+    /**
+     * Optional CSS class name to apply to the preview element that shows the selected size. This allows for custom styling.
+     */
+    previewClassName?: string;
+    /**
+     * Optional CSS class name to apply to the label element that shows the unit. This allows for custom styling.
+     */
+    labelClassName?: string;
+    /**
+     * Optional CSS class name to apply to the selected option. This allows for custom styling.
+     */
+    selectedClassName?: string;
+    /**
+     * Optional CSS class name to apply when the dropdown is open. This allows for custom styling.
+     */
+    openClassName?: string;
+}
+declare const DEFAULT_SIZES: number[];
+/**
+ * A dropdown control for selecting sizes (e.g., font sizes, line widths).
+ * Emits a 'sizechange' event when the selected size changes.
+ * Example usage:
+ *
+ * const sizeSelect = new SizeSelect(document.getElementById('size-select'), {
+ *     sizes: [8, 10, 12, 14, 16, 18, 20],
+ *     unit: 'px',
+ *     showLabel: true,
+ * });
+ */
+declare class SizeSelect {
+    protected host: HTMLElement;
+    protected config: Required<Omit<SizeSelectConfig, 'sizes'>> & {
+        sizes: number[];
+    };
+    protected selected: number;
+    protected trigger: HTMLButtonElement;
+    protected triggerPreview: HTMLSpanElement;
+    protected menu: HTMLDivElement;
+    constructor(target: HTMLElement, config?: SizeSelectConfig);
+    /**
+     * Releases DOM/event resources owned by the control.
+     */
+    destroy(): void;
+    /**
+     * Gets the currently selected size value.
+     */
+    get value(): number;
+    /**
+     * Sets the currently selected size value.
+     */
+    set value(size: number);
+    /**
+     * Sets the available size options and optionally selects a size.
+     * @param sizes - An array of sizes.
+     * @param selectedSize - The size to select. Defaults to the first size in the array.
+     */
+    setOptions(sizes: number[], selectedSize?: number): void;
+    /**
+     * Handles the click event on the trigger button. Toggles the open/closed state of the dropdown menu.
+     */
+    protected readonly onTriggerClick: () => void;
+    /**
+     * Handles the click event on the document. Closes the dropdown menu if the click is outside the host element.
+     * @param event - The click event.
+     */
+    protected readonly onDocumentClick: (event: Event) => void;
+    /**
+     * Handles the click event on an option. Selects the clicked size and closes the dropdown menu.
+     * @param event - The click event.
+     */
+    protected readonly onOptionClick: (event: Event) => void;
+    protected rebuildOptions(sizes: number[]): void;
+    protected buildOption(size: number): HTMLButtonElement;
+    protected selectSize(size: number, emit?: boolean): void;
+    protected syncTrigger(): void;
+    protected syncSelectedOption(): void;
+    protected openMenu(): void;
+    protected closeMenu(): void;
+}
+
+/**
+ * Configuration options for the IntegerRangeSelect control.
+ */
+interface IntegerRangeSelectConfig {
+    min?: number;
+    max?: number;
+    step?: number;
+    value?: number;
+    unit?: string;
+    hostClassName?: string;
+    trackClassName?: string;
+    valueClassName?: string;
+}
+/**
+ * A compact integer range selector based on native input[type=range].
+ * Emits a 'valuechange' event when the slider change is committed.
+ */
+declare class IntegerRangeSelect {
+    protected host: HTMLElement;
+    protected config: Required<IntegerRangeSelectConfig>;
+    protected input: HTMLInputElement;
+    protected valueText: HTMLSpanElement;
+    protected selected: number;
+    constructor(target: HTMLElement, config?: IntegerRangeSelectConfig);
+    /**
+     * Releases DOM/event resources owned by the control.
+     */
+    destroy(): void;
+    /**
+     * Gets the currently selected integer value.
+     */
+    get value(): number;
+    /**
+     * Sets the currently selected integer value.
+     */
+    set value(value: number);
+    /**
+     * Gets whether the control is disabled.
+     */
+    get disabled(): boolean;
+    /**
+     * Disables or enables the control.
+     */
+    set disabled(value: boolean);
+    /**
+     * Updates the selectable range and optional current value.
+     */
+    setRange(min: number, max: number, step?: number, value?: number): void;
+    protected readonly onInput: () => void;
+    protected readonly onChange: () => void;
+    protected syncDisplay(): void;
+    protected clamp(value: number): number;
+}
+
+/**
+ * Configuration options for the ArrowSelect component.
+ */
+interface ArrowSelectConfig {
+    /**
+     * An array of arrow types to display in the dropdown. Each type is represented as a string.
+     * The default arrow types are: 'start', 'end', 'both', and 'none'.
+     * You can change their order but not add new types without updating the component logic.
+     */
+    arrows?: ArrowDirection[];
+    /**
+     * The stroke color to use for the width swatch in the dropdown and trigger button.
+     */
+    strokeColor?: string;
+    /**
+     * Optional CSS class name to apply to the host element of the ArrowSelect component. This allows for custom styling of the component.
+     */
+    hostClassName?: string;
+    /**
+     * Optional CSS class name to apply to the trigger button of the ArrowSelect component. This allows for custom styling of the trigger button.
+     */
+    triggerClassName?: string;
+    /**
+     * Optional CSS class name to apply to the dropdown menu of the ArrowSelect component. This allows for custom styling of the dropdown menu.
+     */
+    menuClassName?: string;
+    /**
+     * Optional CSS class name to apply to each option in the dropdown menu. This allows for custom styling of the options.
+     */
+    optionClassName?: string;
+    /**
+     * Optional CSS class name to apply to the swatch element of the ArrowSelect component. This allows for custom styling of the swatch.
+     */
+    swatchClassName?: string;
+    /**
+     * Optional CSS class name to apply to the selected option of the ArrowSelect component. This allows for custom styling of the selected option.
+     */
+    selectedClassName?: string;
+    /**
+     * Optional CSS class name to apply when the ArrowSelect component is open. This allows for custom styling when the component is open.
+     */
+    openClassName?: string;
+}
+
+/**
+ * A dropdown component for selecting line widths.
+ * It displays a list of predefined widths and allows the user to select one.
+ * The selected width is reflected in the trigger button and can be accessed via the `value` property.
+ * The component emits a 'widthchange' event when the selected width changes.
+ */
+declare class ArrowSelect {
+    protected host: HTMLElement;
+    protected config: Required<Omit<ArrowSelectConfig, 'arrows'>> & {
+        arrows: ArrowDirection[];
+    };
+    protected selected: ArrowDirection;
+    protected trigger: HTMLButtonElement;
+    protected triggerSwatch: HTMLDivElement;
+    protected triggerLabel?: HTMLSpanElement;
+    protected menu: HTMLDivElement;
+    constructor(target: HTMLElement, config?: ArrowSelectConfig);
+    /**
+     * Releases DOM/event resources owned by the control.
+     */
+    destroy(): void;
+    /**
+     * Gets the currently selected width value.
+     */
+    get value(): string;
+    /**
+     * Sets the currently selected width value.
+     */
+    set value(arrow: ArrowDirection);
+    /**
+     * Sets the available arrow options and optionally selects one.
+     * @param arrows - An array of arrow directions.
+     * @param selectedArrow - The arrow direction to select. Defaults to the first option.
+     */
+    setOptions(arrows: ArrowDirection[], selectedArrow?: ArrowDirection): void;
+    /**
+     * Handles the click event on the trigger button. Toggles the open/closed state of the dropdown menu.
+     */
+    protected readonly onTriggerClick: () => void;
+    /**
+     * Handles the click event on the document. Closes the dropdown menu if the click is outside the host element.
+     * @param event - The click event.
+     */
+    protected readonly onDocumentClick: (event: Event) => void;
+    /**
+     * Handles the click event on an option. Selects the clicked width and closes the dropdown menu.
+     * @param event - The click event.
+     */
+    protected readonly onOptionClick: (event: Event) => void;
+    protected rebuildOptions(arrows: ArrowDirection[]): void;
+    protected buildOption(arrow: ArrowDirection): HTMLButtonElement;
+    protected createArrowSvg(arrow: ArrowDirection): SVGElement;
+    protected createArrowHead(x: number, y: number, direction: 'forward' | 'backward'): SVGPolygonElement;
+    protected normalizeArrow(arrow: ArrowDirection | string | undefined): ArrowDirection;
+    protected selectArrow(arrow: ArrowDirection, emit?: boolean): void;
+    protected syncTrigger(): void;
+    protected syncSelectedOption(): void;
+    protected openMenu(): void;
+    protected closeMenu(): void;
+}
+
+/**
+ * A single action in a prompt dialog, consisting of a value, label, and optional primary flag.
+ */
+type PromptDialogAction<T extends string> = {
+    /**
+     * The value associated with this action. This value will be returned when the action is selected.
+     */
+    value: T;
+    /**
+     * The label displayed on the button for this action.
+     */
+    label: string;
+    /**
+     * Whether this action is the primary action. Primary actions are typically highlighted.
+     */
+    primary?: boolean;
+};
+/**
+ * Options for configuring a prompt dialog, including title, prompt message, optional icon, and a list of actions.
+ */
+type PromptDialogOptions<T extends string> = {
+    /**
+     * The title of the prompt dialog.
+     */
+    title?: string;
+    /**
+     * The message or question to display in the prompt dialog.
+     */
+    prompt: string;
+    /**
+     * An optional icon to display in the prompt dialog.
+     */
+    icon?: string;
+    /**
+     * The list of actions available in the prompt dialog.
+     */
+    actions: PromptDialogAction<T>[];
+};
+/**
+ * A simple prompt dialog component that can be used to display a message and a set of actions to the user.
+ * It uses the native HTML <dialog> element if available, and falls back to a confirm dialog if not.
+ * The component returns a promise that resolves with the value of the selected action.
+ */
+declare class PromptDialog {
+    /**
+     * Displays a prompt dialog with the specified options.
+     * @param input The options for configuring the prompt dialog.
+     * @returns A promise that resolves with the value of the selected action.
+     */
+    static show<T extends string>(input: PromptDialogOptions<T>): Promise<T>;
+    private static fallback;
+    private static buildDialog;
+    private static buildHead;
+    private static buildActions;
+    private static supportsDialog;
+    private static ensureStyles;
+}
+
+declare const TOOL_PALETTE_TOOL_SELECTED_EVENT = "tool-selected";
+type ToolPaletteLayoutItem = string | '*';
+/**
+ * Configuration options for the ToolPalette component.
+ * Provide only the properties you want to customize. All other properties will use default values.
+ */
+interface ToolPaletteConfig {
+    /**
+     * Ordered layout of tools in the palette. '*' means insert all remaining tools at this position.
+     */
+    layout?: ToolPaletteLayoutItem[];
+    /**
+     * Optional CSS class name to apply to the host element of the tool palette. This allows for custom styling of the entire palette.
+     */
+    hostClassName?: string;
+}
+declare const DEFAULT_TOOL_LAYOUT: ToolPaletteLayoutItem[];
+/**
+ * A toolbar component that displays a list of tools for the diagram editor.
+ * It allows users to select a tool, and the selected tool is highlighted.
+ * The component emits a 'tool-selected' event when a tool is selected.
+ * The layout of the tools can be customized via the configuration options.
+ */
+declare class ToolPalette {
+    protected host: HTMLElement;
+    protected diagram: DiagramEditView;
+    protected config: ToolPaletteConfig;
+    protected manualTools: Map<string, string>;
+    protected renderedTools: string[];
+    constructor(host: HTMLElement, diagram: DiagramEditView, config?: ToolPaletteConfig);
+    /**
+     * Cleans up the palette and detaches diagram listeners.
+     */
+    destroy(): void;
+    /**
+     * Rebuilds and re-renders the tool list from the current registry and layout.
+     */
+    refresh(): void;
+    /** Adds a tool entry manually (useful for custom/non-registered tools). */
+    addTool(tool: string, label?: string): void;
+    /**
+     * Removes all manually added tools and clears the rendered palette.
+     */
+    clearTools(): void;
+    /** Swap the underlying diagram view (e.g. after remounting). */
+    setDiagramView(diagram: DiagramEditView): void;
+    /**
+     * Handles the diagram tool change event.
+     * @param event The event object containing the tool change details.
+     */
+    protected readonly onDiagramToolChanged: (event: Event) => void;
+    protected bindDiagramEvents(): void;
+    protected unbindDiagramEvents(): void;
+    protected resolveLayout(allTools: string[]): string[];
+    protected renderTool(tool: string, label: string): void;
+    protected highlight(tool: string): void;
+}
+
+/**
+ * Configuration options for the toolbar.
+ * Provide only the properties you want to customize. All other properties will use default values.
+ */
+interface ToolBarConfig {
+    /**
+     * Optional CSS class name to apply to the toolbar host element. This allows for custom styling of the toolbar.
+     */
+    hostClassName?: string;
+    /**
+     * Optional CSS class name to apply to toolbar buttons. This allows for custom styling of the buttons.
+     */
+    buttonClassName?: string;
+    /**
+     * Optional CSS class name to apply to active toolbar buttons. This allows for custom styling of active buttons.
+     */
+    activeClassName?: string;
+    /**
+     * Optional CSS class name to apply to disabled toolbar buttons. This allows for custom styling of disabled buttons.
+     */
+    disabledClassName?: string;
+    /**
+     * Optional CSS class name to apply to toolbar separators. This allows for custom styling of separators.
+     */
+    separatorClassName?: string;
+    /**
+     * Optional attribute name to use for tooltips. This allows for custom tooltip behavior.
+     */
+    tooltipAttribute?: string;
+}
+/**
+ * Definition of a toolbar button.
+ * Provide only the properties you want to customize. All other properties will use default values.
+ */
+interface ToolButtonDef {
+    /**
+     * Unique identifier for the button. This is used to reference the button in the toolbar.
+     */
+    id: string;
+    /**
+     * SVG use href (e.g. '#icon-undo'), URL string, or an Element
+     */
+    icon?: string | Element;
+    /**
+     * Optional label for the button. This is used for accessibility and tooltips.
+     */
+    label?: string;
+    /**
+     * Optional tooltip text for the button. This is displayed on hover.
+     */
+    tooltip?: string;
+    /**
+     * Indicates if the button is a toggle button.
+     */
+    toggle?: boolean;
+    /**
+     * Indicates if the button is disabled.
+     */
+    disabled?: boolean;
+    /**
+     * Click event handler for the button.
+     */
+    onClick: (event: MouseEvent) => void | Promise<void>;
+}
+/**
+ * A simple toolbar component that can be used to create a toolbar with buttons and separators.
+ * The toolbar can be customized with CSS classes and tooltip attributes.
+ * Buttons can be added with icons, labels, tooltips, and click event handlers.
+ * Buttons can also be toggled on/off and enabled/disabled.
+ */
+declare class ToolBar {
+    protected host: HTMLElement;
+    protected config: Required<ToolBarConfig>;
+    protected buttons: Map<string, HTMLButtonElement>;
+    constructor(target: HTMLElement, config?: ToolBarConfig);
+    /**
+     * Clears toolbar DOM and internal button references.
+     */
+    destroy(): void;
+    /**
+     * Manually adds a button to the toolbar. This is useful for dynamically adding buttons after the toolbar has been created.
+     * @param def The definition of the button to add.
+     * @returns The HTMLButtonElement that was created and added to the toolbar.
+     */
+    addButton(def: ToolButtonDef): HTMLButtonElement;
+    /**
+     * Manually adds a separator to the toolbar. This is useful for dynamically adding separators after the toolbar has been created.
+     * @returns The HTMLDivElement that was created and added to the toolbar.
+     */
+    addSeparator(): HTMLDivElement;
+    /**
+     * Sets the active state of a button.
+     * @param id The ID of the button.
+     * @param active Whether the button should be active.
+     */
+    setActive(id: string, active: boolean): void;
+    /**
+     * Sets the enabled state of a button.
+     * @param id The ID of the button.
+     * @param enabled Whether the button should be enabled.
+     */
+    setEnabled(id: string, enabled: boolean): void;
+    /**
+     * Gets a button by its ID.
+     * @param id The ID of the button.
+     * @returns The HTMLButtonElement if found, otherwise undefined.
+     */
+    getButton(id: string): HTMLButtonElement | undefined;
+    protected buildButton(def: ToolButtonDef): HTMLButtonElement;
+    protected resolveIcon(icon?: string | Element): Element | null;
+}
+
+/**
+ * Configuration options for the diagram toolbar.
+ * Provide only the properties you want to customize. All other properties will use default values.
+ */
+interface DiagramAction {
+    /**
+     * Unique identifier for the action. This is used to reference the action in the toolbar.
+     */
+    id: DiagramToolBarLayoutItem;
+    /**
+     * Optional label for the action. This is used for accessibility and tooltips.
+     */
+    label: string;
+    /**
+     * Optional tooltip text for the action. This is displayed on hover.
+     */
+    tooltip?: string;
+    /**
+     * Optional icon for the action. This can be an SVG use href (e.g. '#icon-undo'), a URL string, or an Element.
+     */
+    icon?: string | Element;
+    /**
+     * Whether the action is a toggle action. Toggle actions can be in an active or inactive state.
+     */
+    toggle?: boolean;
+    /**
+     * Called when the button is clicked; receives the diagram view.
+     */
+    execute: (diagram: DiagramEditView) => void | Promise<void>;
+    /**
+     * Returns true when the button should be enabled; defaults to always enabled.
+     */
+    isEnabled?: (diagram: DiagramEditView) => boolean;
+    /**
+     * Returns true when the button should appear active/pressed.
+     */
+    isActive?: (diagram: DiagramEditView) => boolean;
+}
+/**
+ * Configuration options for the diagram toolbar.
+ * Provide only the properties you want to customize. All other properties will use default values.
+ */
+interface DiagramToolBarConfig extends ToolBarConfig {
+    /**
+     * Ordered toolbar layout mixing action IDs and separators.
+     * Example: ['undo', 'redo', '|', 'delete', 'copy', 'paste']
+     * A default layout will be used if none is provided.
+     */
+    layout?: DiagramToolBarLayoutItem[];
+}
+/**
+ * Available built-in diagram actions. These can be used in the toolbar layout.
+ */
+type DiagramToolBarLayoutItem = '|' | 'new' | 'open' | 'save' | 'export' | 'undo' | 'redo' | 'front' | 'back' | 'delete' | 'duplicate' | 'cut' | 'copy' | 'paste' | 'align-left' | 'align-center' | 'align-right' | 'align-top' | 'align-middle' | 'align-bottom' | 'distribute-h' | 'distribute-v' | 'zoom-in' | 'zoom-out' | 'fit-width' | 'fit-all' | 'show-grid' | 'snap-grid';
+declare const DEFAULT_LAYOUT: DiagramToolBarLayoutItem[];
+/**
+ * Full catalogue of built-in diagram actions.
+ */
+declare const DIAGRAM_ACTIONS: DiagramAction[];
+/**
+ * DiagramToolBar is a specialized toolbar for diagram editing, providing buttons for common actions like undo, redo, copy, paste, alignment, and zooming.
+ * It automatically updates the enabled and active state of buttons based on the current state of the associated DiagramEditView.
+ * The toolbar can be configured with a custom layout and styling options.
+ *
+ * Example usage:
+ * ```ts
+ * const toolbar = new DiagramToolBar(toolbarContainer, diagramView, {
+ *     layout: ['undo', 'redo', '|', 'copy', 'paste'],
+ *     hostClassName: 'my-toolbar',
+ * });
+ * ```
+ */
+declare class DiagramToolBar extends ToolBar {
+    protected diagram: DiagramEditView;
+    protected actions: DiagramAction[];
+    protected readonly onDiagramChanged: () => void;
+    protected readonly onClipboardChanged: () => void;
+    constructor(target: HTMLElement, diagram: DiagramEditView, config?: DiagramToolBarConfig);
+    /**
+     * Cleans up toolbar resources and detaches diagram listeners.
+     */
+    destroy(): void;
+    /**
+     * Re-evaluates enabled and active state for all registered actions.
+     */
+    refresh(): void;
+    /**
+     * Swap the underlying diagram view (e.g. after remounting).
+     */
+    setDiagramView(diagram: DiagramEditView): void;
+    protected bindDiagramEvents(): void;
+    protected unbindDiagramEvents(): void;
+    protected build(config: DiagramToolBarConfig): void;
+    protected resolveLayout(config: DiagramToolBarConfig): DiagramToolBarLayoutItem[];
+}
+
+type DiagramEditorUnsavedAction = 'save' | 'discard' | 'cancel';
+type DiagramEditorPromptReason = 'new' | 'load' | 'close';
+type DiagramEditorPrompts = {
+    onUnsavedChanges?: (context: {
+        reason: DiagramEditorPromptReason;
+    }) => DiagramEditorUnsavedAction | Promise<DiagramEditorUnsavedAction>;
+    onNoChangesSave?: () => boolean | Promise<boolean>;
+};
+type DiagramEditorFileDialogsConfig = {
+    onOpenDiagram?: DiagramOpenHandler;
+    onSaveDiagram?: DiagramSaveHandler;
+    onExportDiagram?: DiagramExportHandler;
+};
+type DiagramEditorConfig = {
+    hostClassName?: string;
+    toolPalette?: ToolPaletteConfig;
+    toolbars?: DiagramToolBarConfig[];
+    prompts?: DiagramEditorPrompts;
+    fontSelect?: FontSelectConfig;
+    fontSizeSelect?: SizeSelectConfig;
+    textColor?: ColorSelectConfig;
+    strokeColor?: ColorSelectConfig;
+    strokeWidth?: WidthSelectConfig;
+    arrowSelect?: ArrowSelectConfig;
+    shadowOffsetX?: IntegerRangeSelectConfig;
+    shadowOffsetY?: IntegerRangeSelectConfig;
+    shadowBlur?: IntegerRangeSelectConfig;
+    fillColor?: ColorSelectConfig;
+    fileDialogs?: DiagramEditorFileDialogsConfig;
+};
+/**
+ * A composed diagram editing component that wires a {@link DiagramEditView} together with
+ * a tool palette, action toolbars, and style controls.
+ * It provides a ready-to-mount editor surface with optional prompts for unsaved-change flows.
+ */
+declare class DiagramEditor {
+    protected host: HTMLElement;
+    protected config: DiagramEditorConfig;
+    protected diagram: DiagramEditView;
+    protected headerHost?: HTMLElement;
+    protected stageHost?: HTMLElement;
+    protected toolbarsHost?: HTMLElement;
+    protected toolbars: DiagramToolBar[];
+    protected toolboxHost?: HTMLElement;
+    protected toolbox?: ToolPalette;
+    protected fontToolbar?: HTMLElement;
+    protected fontSelectHost?: HTMLElement;
+    protected fontSizeSelectHost?: HTMLElement;
+    protected textColorSelectHost?: HTMLElement;
+    protected fontSelect?: FontSelect;
+    protected fontSizeSelect?: SizeSelect;
+    protected textColorSelect?: ColorSelect;
+    protected strokeToolbar?: HTMLElement;
+    protected strokeColorSelectHost?: HTMLElement;
+    protected strokeWidthSelectHost?: HTMLElement;
+    protected arrowSelectHost?: HTMLElement;
+    protected strokeColorSelect?: ColorSelect;
+    protected strokeWidthSelect?: WidthSelect;
+    protected arrowSelect?: ArrowSelect;
+    protected shadowToolbar?: HTMLElement;
+    protected shadowEnableCheckbox?: HTMLInputElement;
+    protected shadowOffsetXHost?: HTMLElement;
+    protected shadowOffsetYHost?: HTMLElement;
+    protected shadowBlurHost?: HTMLElement;
+    protected shadowOffsetXSelect?: IntegerRangeSelect;
+    protected shadowOffsetYSelect?: IntegerRangeSelect;
+    protected shadowBlurSelect?: IntegerRangeSelect;
+    protected fillToolbar?: HTMLElement;
+    protected fillStyleSelectHost?: HTMLElement;
+    protected fillStyleSelect?: ColorSelect;
+    protected listenerDisposers: Array<() => void>;
+    protected syncingControls: boolean;
+    /**
+     * Creates an instance of DiagramEditor.
+     * @param host The container element that will receive the editor layout.
+     * @param config Optional configuration for layout, controls, toolbars, and prompts.
+     * @param diagram Optional initial diagram to load into the editor.
+     */
+    constructor(host: HTMLElement, config?: DiagramEditorConfig, diagram?: Diagram);
+    /**
+     * Cleans up the editor and all owned child controls.
+     */
+    destroy(): void;
+    /**
+     * Clears the current diagram after resolving any unsaved-change prompt.
+     * A prompt will be shown if the diagram has unsaved changes.
+     * @returns True when a new empty diagram was created; otherwise false.
+     */
+    newDiagram(): Promise<boolean>;
+    /**
+     * Loads a diagram from a live diagram instance, a serialized JSON string, or a deserialized payload.
+     * A prompt will be shown if the diagram has unsaved changes.
+     * @param source The diagram source to load.
+     * @returns True when the source was loaded; otherwise false when loading was canceled.
+     */
+    loadDiagram(source: string | ISerializedDiagram | Diagram): Promise<boolean>;
+    /**
+     * Opens a diagram using configured file dialog behavior after resolving unsaved-change prompts.
+     * @param options Optional open options or source overrides.
+     * @returns True when a diagram was opened; otherwise false.
+     */
+    openDiagram(options?: DiagramOpenOptions): Promise<boolean>;
+    /**
+     * Saves the current diagram using the underlying {@link DiagramEditView}.
+     * A prompt will be shown if the diagram has no changes to save.
+     * @param options Optional serialization settings.
+     * @returns The serialized diagram string, or undefined when saving was canceled.
+     */
+    saveDiagram(options?: DiagramSaveOptions): Promise<string | undefined>;
+    /**
+     * Exports the current diagram using the underlying {@link DiagramEditView}.
+     * @param options Optional export settings.
+     * @returns The export result, or undefined when export was canceled.
+     */
+    exportDiagram(options?: DiagramExportOptions): Promise<string | Uint8Array | Blob | undefined>;
+    /**
+     * Closes the current diagram after resolving any unsaved-change prompt.
+     * A prompt will be shown if the diagram has unsaved changes.
+     * @returns True when the diagram was closed; otherwise false.
+     */
+    close(): Promise<boolean>;
+    /**
+     * Returns the owned diagram editing view.
+     */
+    getDiagramView(): DiagramEditView;
+    /**
+     * Returns the action toolbars created for this editor.
+     */
+    getToolbars(): DiagramToolBar[];
+    /**
+     * Returns the tool palette instance when available.
+     */
+    getToolbox(): ToolPalette | undefined;
+    /**
+     * Returns the font family selector control when available.
+     */
+    getFontSelect(): FontSelect | undefined;
+    /**
+     * Returns the font size selector control when available.
+     */
+    getFontSizeSelect(): SizeSelect | undefined;
+    /**
+     * Returns the text color selector control when available.
+     */
+    getTextColorSelect(): ColorSelect | undefined;
+    /**
+     * Returns the stroke color selector control when available.
+     */
+    getStrokeColorSelect(): ColorSelect | undefined;
+    /**
+     * Returns the stroke width selector control when available.
+     */
+    getStrokeWidthSelect(): WidthSelect | undefined;
+    /**
+     * Returns the arrow selector control when available.
+     */
+    getArrowSelect(): ArrowSelect | undefined;
+    /**
+     * Returns the fill color selector control when available.
+     */
+    getFillStyleSelect(): ColorSelect | undefined;
+    /**
+     * Builds the editor layout and initializes all owned controls.
+     * @param host The editor host element.
+     * @param config The editor configuration.
+     * @param diagram Optional initial diagram to load.
+     */
+    protected initialize(host: HTMLElement, config: DiagramEditorConfig, diagram?: Diagram): void;
+    /**
+     * Connects editor controls to the underlying diagram view and change events.
+     */
+    protected attachListeners(): void;
+    /**
+     * Removes all event listeners previously registered by the editor.
+     */
+    protected detachListeners(): void;
+    /**
+     * Synchronizes the style controls with the current style state of the diagram.
+     */
+    protected reflectStyles(): void;
+    private createToolbar;
+    private createControlHost;
+    private applyShadowEnabledState;
+    private addManagedListener;
+    private addManagedEventListener;
+    private createFileDialogs;
+    private createDiagramPrompts;
+    private confirmCloseIfNeeded;
+    /**
+     * Shows the default prompt used when a save is requested without any pending changes.
+     * @returns True when saving should continue; otherwise false.
+     */
+    protected promptNoChangesSave(): Promise<boolean>;
+    /**
+     * Shows the default unsaved-changes prompt for the requested action.
+     * @param reason The operation that triggered the prompt.
+     * @returns The action selected by the user.
+     */
+    protected promptUnsavedChanges(reason: DiagramEditorPromptReason): Promise<DiagramEditorUnsavedAction>;
+}
+
+export { type AnchorPoint, type ArrowDirection, ArrowSelect, type ArrowSelectConfig, AssetStore, type BrowserImageMimeType, type BrowserImageSource, type Cacheable, CanvasImageSerializer, type ColorOptionInput, ColorPalette, ColorSelect, type ColorSelectConfig, ConnectionBasics, CoordinateSystem, CurveAdapter, DEFAULT_FONTS, DEFAULT_LAYOUT, DEFAULT_SIZES, DEFAULT_TOOL_LAYOUT, DIAGRAM_ACTIONS, DIAGRAM_BACKGROUND_CLICK_EVENT, DIAGRAM_CHANGED_EVENT, DIAGRAM_CLIPBOARD_EVENT, DIAGRAM_CONNECTION_CONNECTED_EVENT, DIAGRAM_CONNECTION_DISCONNECTED_EVENT, DIAGRAM_DELETE_REQUEST_EVENT, DIAGRAM_EDIT_CONTEXT_MENU_EVENT, DIAGRAM_EDIT_TAG, DIAGRAM_NODE_ADDED_EVENT, DIAGRAM_NODE_CLICK_EVENT, DIAGRAM_NODE_DELETED_EVENT, DIAGRAM_NODE_MOVED_EVENT, DIAGRAM_NODE_POINTS_CHANGED_EVENT, DIAGRAM_NODE_RESIZED_EVENT, DIAGRAM_SELECTION_EVENT, DIAGRAM_TOOL_CHANGED_EVENT, DIAGRAM_VIEWPORT_EVENT, DIAGRAM_VIEW_TAG, Diagram, type DiagramAction, type DiagramBackgroundClick, type DiagramChangeScope, type DiagramChanged, type DiagramClipboardEventDetail, type DiagramClipboardOperation, type DiagramConnectionChange, type DiagramDeleteRequest, type DiagramEditContextMenu, DiagramEditElement, DiagramEditView, type DiagramEditViewPromptReason, type DiagramEditViewPrompts, type DiagramEditViewUnsavedAction, DiagramEditor, type DiagramEditorConfig, type DiagramEditorFileDialogsConfig, type DiagramEditorPromptReason, type DiagramEditorPrompts, type DiagramEditorUnsavedAction, type DiagramExportFormat, type DiagramExportHandler, type DiagramExportOptions, type DiagramExportResult, DiagramFileDialogs, type DiagramInitialView, type DiagramNodeChange, type DiagramOpenHandler, type DiagramOpenOptions, type DiagramOpenResult, type DiagramOpenSource, type DiagramSaveHandler, type DiagramSaveOptions, type DiagramSaveResult, type DiagramSelectionChange, type DiagramSelectionOptions, DiagramToolBar, type DiagramToolBarConfig, type DiagramToolBarLayoutItem, type DiagramToolChange, DiagramView, DiagramViewElement, type DiagramViewOptions, type DiagramViewportChange, EllipseAdapter, EventDispatcher, type FitAlign, FitViewport, FontSelect, type FontSelectConfig, type HasSelection, HistoryStack, type HistoryState, type HollowMode, type HorizontalAlign, type IConnection, type IConnectionAnchor, type IDiagram, type IGrid, type ILayer, type ILayerCached, type INode, type INodeAdapter, type INodeCached, type IPoint, type IRect, type ISerializedConnectionAnchor, type ISerializedDiagram, type ISerializedLayer, type ISerializedNode, type ISerializer, type ITextAlign, type ITextBaseline, IconRegistry, type IconSource, type ImageSaveOptions, type ImageSerializer, type ImageWriteOptions, type InitialViewMode, IntegerRangeSelect, type IntegerRangeSelectConfig, JsonSerializer, LineAdapter, NodeBasics, NodeHandle, NodeRegistry, PngSerializer, PolygonAdapter, PolylineAdapter, PromptDialog, type PromptDialogAction, type PromptDialogOptions, RectangleAdapter, RenderBasics, RhombusAdapter, RoundRectangleAdapter, SelectionBasics, type SelectionDiagram, type Serializable, type ShadowStyle, SizeSelect, type SizeSelectConfig, SvgAdapter, TOOL_PALETTE_TOOL_SELECTED_EVENT, TextAdapter, type TextOptions, type TextOverflowMode, ToolBar, type ToolBarConfig, type ToolButtonDef, ToolPalette, type ToolPaletteConfig, type ToolPaletteLayoutItem, type VerticalAlign, ViewCache, WidthSelect, type WidthSelectConfig, ZOrder, type ZOrderAction, type ZOrderHost, canvasToBlob, canvasToDataUrl, createCanvas2D, downloadBlob, downloadTextFile, exportTextBlob, isBrowserRuntime, isNodeRuntime, jsonSerializer, registerDiagramEditElement, registerDiagramViewElement, shadowStyles, supportedCanvasMimeTypes, supportsCanvasMimeType, unwrapCanvas, writeBinaryFile, writeBlobToFileHandle, writeTextFile, writeTextToFileHandle };