@tumaet/apollon 4.7.0 → 4.9.0

package/dist/react/store/context.d.ts

@@ -5,15 +5,18 @@ import { PopoverStore } from './popoverStore';
 import { AssessmentSelectionStore } from './assessmentSelectionStore';
 import { AlignmentGuidesStore } from './alignmentGuidesStore';
 import { EdgeGeometryStore } from './edgeGeometryStore';
+import { OverlayStore } from '../overlay/overlayStore';
 export declare const DiagramStoreContext: import('react').Context<StoreApi<DiagramStore> | null>;
 export declare const MetadataStoreContext: import('react').Context<StoreApi<MetadataStore> | null>;
 export declare const PopoverStoreContext: import('react').Context<StoreApi<PopoverStore> | null>;
 export declare const AssessmentSelectionStoreContext: import('react').Context<StoreApi<AssessmentSelectionStore> | null>;
 export declare const AlignmentGuidesStoreContext: import('react').Context<StoreApi<AlignmentGuidesStore> | null>;
 export declare const EdgeGeometryStoreContext: import('react').Context<StoreApi<EdgeGeometryStore> | null>;
+export declare const OverlayStoreContext: import('react').Context<StoreApi<OverlayStore> | null>;
 export declare const useDiagramStore: <T>(selector: (state: DiagramStore) => T) => T;
 export declare const useMetadataStore: <T>(selector: (state: MetadataStore) => T) => T;
 export declare const usePopoverStore: <T>(selector: (state: PopoverStore) => T) => T;
 export declare const useAssessmentSelectionStore: <T>(selector: (state: AssessmentSelectionStore) => T) => T;
 export declare const useAlignmentGuidesStore: <T>(selector: (state: AlignmentGuidesStore) => T) => T;
 export declare const useEdgeGeometryStore: <T>(selector: (state: EdgeGeometryStore) => T) => T;
+export declare const useOverlayStore: <T>(selector: (state: OverlayStore) => T) => T;

package/dist/react/store/diagramStore.d.ts

@@ -1,6 +1,6 @@
 import { StoreApi, UseBoundStore } from 'zustand';
 import { Node, Edge, OnNodesChange, OnEdgesChange } from '@xyflow/react';
-import { Assessment, InteractiveElements } from '../typings';
+import { Assessment, DraggingNode, InteractiveElements } from '../typings';
 import * as Y from "yjs";
 export type DiagramStoreData = {
     nodes: Node[];
@@ -18,8 +18,24 @@ export type DiagramStore = {
     canUndo: boolean;
     canRedo: boolean;
     undoManager: Y.UndoManager | null;
+    collaborationEnabled: boolean;
     previewMode: boolean;
     setDiagramId: (diagramId: string) => void;
+    setCollaborationEnabled: (enabled: boolean) => void;
+    /**
+     * Inject the sink that forwards transient drag/resize frames onto the
+     * ephemeral awareness channel (wired by `YjsSync` for every editor). Kept as
+     * runtime wiring rather than diagram state so a `reset()` never clears it.
+     * The broadcast itself is gated by `collaborationEnabled`, not by this sink;
+     * `null` (headless, where no `YjsSync` runs) just leaves it unwired.
+     */
+    setDraggingNodesPublisher: (publisher: ((draggingNodes: DraggingNode[] | null) => void) | null) => void;
+    /**
+     * Clear the peers' live-drag overlay once a gesture's settled value is
+     * committed. Called from `onNodeDragStop` (after the doc write) and on
+     * collaboration teardown; a no-op when nothing is being broadcast.
+     */
+    endTransientNodeBroadcast: () => void;
     setNodes: (payload: Node[] | ((nodes: Node[]) => Node[])) => void;
     setEdges: (payload: Edge[] | ((edges: Edge[]) => Edge[])) => void;
     setNodesAndEdges: (nodes: Node[], edges: Edge[]) => void;

package/dist/react/sync/perfCounters.d.ts

@@ -0,0 +1,6 @@
+export type PerfCounters = {
+    storeNodeWrites: number;
+};
+export declare const perfCounters: PerfCounters;
+export declare const getPerfCounters: () => PerfCounters | undefined;
+export declare const recordStoreNodeWrite: () => void;

package/dist/react/sync/ydoc.d.ts

@@ -1,7 +1,9 @@
 import { Assessment } from '../typings';
 import { Node, Edge } from '@xyflow/react';
 import * as Y from "yjs";
+export declare const STORE_ORIGIN = "store";
 export declare const getNodesMap: (ydoc: Y.Doc) => Y.Map<Node>;
 export declare const getEdgesMap: (ydoc: Y.Doc) => Y.Map<Edge>;
 export declare const getAssessments: (ydoc: Y.Doc) => Y.Map<Assessment>;
 export declare const getDiagramMetadata: (ydoc: Y.Doc) => Y.Map<string>;
+export declare const reconcileYMap: <T>(map: Y.Map<T>, nextEntries: Iterable<readonly [string, T]>) => void;

package/dist/react/sync/yjsSync.d.ts

@@ -1,6 +1,6 @@
 import { DiagramStore } from '../store/diagramStore';
 import { MetadataStore } from '../store/metadataStore';
-import { CollaborationState, CollaborationUser, CollaborationViewport, CollaboratorInfo } from '../typings';
+import { CollaborationState, CollaborationUser, CollaborationViewport, CollaboratorInfo, DraggingNode } from '../typings';
 import { StoreApi } from 'zustand';
 import * as Y from "yjs";
 export declare enum MessageType {
@@ -37,6 +37,7 @@ export declare class YjsSync {
     setLocalAwarenessViewport: (viewport: CollaborationViewport | null) => void;
     setLocalAwarenessFollowing: (followingClientId: number | null) => void;
     setLocalAwarenessSelectedElement: (selectedElementId: string | null) => void;
+    setLocalAwarenessDraggingNodes: (draggingNodes: DraggingNode[] | null) => void;
     setLocalAwarenessState: (state: Partial<CollaborationState>) => void;
     subscribeToAwarenessChanges: (callback: (states: Map<number, CollaborationState>) => void) => () => void;
     getAwarenessStates: () => Map<number, CollaborationState>;
@@ -58,5 +59,5 @@ export declare class YjsSync {
     /**
      * Convert Base64 string to Uint8Array
      */
-    private base64ToUint8;
+    static base64ToUint8(base64: string): Uint8Array;
 }

package/dist/react/types/nodes/NodeProps.d.ts

@@ -8,6 +8,30 @@ export type DefaultNodeProps = {
 export type ClassNodeElement = {
     id: string;
 } & DefaultNodeProps;
+/** A single partition (lane) inside an activity swimlane. */
+export type SwimlaneLane = {
+    id: string;
+    name: string;
+    /**
+     * Lane's extent along the swimlane's primary axis, in absolute flow px. The
+     * last lane is elastic (fills the remainder), so resizing the swimlane only
+     * changes the last lane. Optional: lanes without it divide the space equally,
+     * so existing saved swimlanes render as equal lanes until a separator moves.
+     */
+    size?: number;
+};
+/**
+ * Activity-partition (swimlane) container. Lanes are equal divisions along the
+ * primary axis (columns when vertical, rows when horizontal). Elements dropped
+ * into the swimlane become its children and move with it; which lane an element
+ * belongs to is expressed by where the modeller places it, matching the UML
+ * activity-partition notation where partition membership is positional rather
+ * than stored per element.
+ */
+export type ActivitySwimlaneProps = DefaultNodeProps & {
+    orientation: "vertical" | "horizontal";
+    lanes: SwimlaneLane[];
+};
 export type ClassNodeProps = {
     methods: ClassNodeElement[];
     attributes: ClassNodeElement[];

package/dist/react/typings.d.ts

@@ -24,12 +24,29 @@ export type CollaborationViewport = {
     y: number;
     zoom: number;
 };
+/**
+ * One node a peer is actively dragging or resizing. Broadcast over the
+ * ephemeral awareness channel — never written to the Yjs document — so peers
+ * can render the in-progress gesture live without growing the CRDT or entering
+ * anyone's undo history. The settled position/size is committed once on
+ * drop/release through the document like any other edit.
+ */
+export type DraggingNode = {
+    id: string;
+    position: {
+        x: number;
+        y: number;
+    };
+    width?: number | null;
+    height?: number | null;
+};
 export type CollaborationState = {
     user?: CollaborationUser;
     cursor?: CollaborationCursor | null;
     viewport?: CollaborationViewport | null;
     followingClientId?: number | null;
     selectedElementId?: string | null;
+    draggingNodes?: DraggingNode[] | null;
 };
 export type CollaboratorInfo = {
     id: string;

package/dist/react/utils/collaboration.d.ts

@@ -1,4 +1,4 @@
-import { CollaborationViewport } from '../typings';
+import { CollaborationViewport, DraggingNode } from '../typings';
 export declare const randomCollabName: () => string;
 export declare const collabColorFromName: (name: string) => string;
 /**
@@ -8,3 +8,12 @@ export declare const collabColorFromName: (name: string) => string;
  * Returns `null` for anything malformed.
  */
 export declare const sanitizeCollaborationViewport: (raw: unknown) => CollaborationViewport | null;
+/**
+ * Narrow an untrusted, peer-supplied `draggingNodes` payload before the overlay
+ * reader iterates it. A non-array value (or entries missing a string `id` or a
+ * finite numeric position) would otherwise throw in the awareness subscription
+ * handler and break the live overlay for everyone reading that peer. Returns the
+ * well-formed entries only; `null` if the value isn't an array. Per-entry
+ * `width`/`height` survive only when finite or explicitly `null`.
+ */
+export declare const sanitizeDraggingNodes: (raw: unknown) => DraggingNode[] | null;

package/dist/react/utils/exportUtils.d.ts

@@ -1,5 +1,4 @@
 import { ReactFlowInstance, Node, Edge, Rect } from '@xyflow/react';
-import { Point } from './pathParsing';
 type SvgExportMode = "web" | "compat";
 type ExportFilterOptions = {
     include?: string[];
@@ -8,134 +7,5 @@ type ExportFilterOptions = {
 };
 export declare function filterRenderedElements(container: HTMLElement, options?: ExportFilterOptions): void;
 export declare const getSVG: (container: HTMLElement, clip: Rect, options?: ExportFilterOptions, fontFaceCss?: string) => string;
-/**
- * Extract all coordinate points from an SVG path string.
- * This includes endpoints AND control points for bezier curves,
- * which is important because bezier curves are bounded by the
- * convex hull of all their control points.
- *
- * For S (smooth cubic) and T (smooth quadratic) commands, we also
- * include the reflected control point which may extend the bounds.
- */
-declare function extractPathPoints(pathD: string): Point[];
-declare function getNodeBoundsFromDOM(container: HTMLElement, reactFlow?: ReactFlowInstance<Node, Edge>): Rect | undefined;
-/**
- * Calculate bounds for node SVG overflow content.
- *
- * Some nodes render elements outside their viewBox (e.g., the initial marking
- * arrow in Reachability Graphs extends to negative coordinates). These elements
- * are visible because the node SVGs use overflow="visible", but they are NOT
- * included in reactFlow.getNodesBounds() which only considers node position
- * and dimensions.
- *
- * This function scans node SVGs for <line>, <path>, and <circle> elements
- * that extend outside the node's local coordinate system (viewBox), converts
- * them to global coordinates, and returns the bounding box of all such content.
- */
-declare function getNodeOverflowBoundsFromDOM(container: HTMLElement): Rect | undefined;
-declare function mergeBounds(a: Rect, b: Rect): Rect;
 export declare function getRenderedDiagramBounds(reactFlow: ReactFlowInstance<Node, Edge>, container: HTMLElement): Rect;
-declare function extractStyles(styleString: string): {
-    transform: {
-        x: number;
-        y: number;
-    };
-    width: string | null;
-    height: string | null;
-};
-type CSSVariableMap = Readonly<Record<string, string>>;
-/**
- * Resolve a single CSS variable reference to its final value.
- * Handles recursive var() resolution and fallback values.
- */
-declare function resolveCSSVariable(value: string, cssVarMap?: CSSVariableMap): string;
-/**
- * Replace CSS variables and currentColor in all attributes of an element tree.
- *
- * @param node - The DOM node to process
- * @param inheritedColor - The inherited 'currentColor' value from parent elements
- */
-declare function replaceCSSVariables(node: Element | ChildNode, inheritedColor?: string, cssVarMap?: CSSVariableMap): void;
-/**
- * Convert inline style properties to direct SVG attributes for better compatibility.
- * PowerPoint and some other applications don't properly parse CSS in style attributes.
- */
-declare function convertStyleToAttributes(node: Element | ChildNode): void;
-/**
- * Ensure all <text> elements have explicit font-size, font-weight, and font-family.
- *
- * In the browser, text inherits these from CSS (:root font-family, default font-size).
- * In exported SVGs opened in non-browser renderers, missing attributes cause text to
- * render with the renderer's own defaults (often Times New Roman at an arbitrary size).
- *
- * This pass runs AFTER convertStyleToAttributes so any font props already extracted
- * from inline styles are present as attributes.
- */
-declare function ensureTextFontDefaults(svg: Element): void;
-/**
- * Resolve relative `font-size` (`%`, `em`) to px against the inherited size —
- * otherwise stereotypes (`font-size="85%"`) balloon over the class title. Walks
- * depth-first carrying the resolved px; runs after ensureTextFontDefaults so
- * every <text> already has a px size to inherit.
- */
-declare function resolveRelativeFontSizes(el: Element, inheritedPx?: number): void;
-/**
- * Flatten cumulative `<tspan dy>` to absolute `y` — Skia collapses sibling
- * tspans onto one line, overlapping a stereotype with its class name. Assumes
- * the flat `<text><tspan/></text>` shape Apollon emits (no nested tspans).
- */
-declare function resolveTspanDy(svg: Element): void;
-/**
- * Resolve `dominant-baseline` to an explicit baseline `y` — non-browser engines
- * draw every label at the alphabetic baseline (too high) otherwise. Runs after
- * resolveTspanDy so tspan `y` is already absolute.
- */
-declare function resolveDominantBaseline(svg: Element): void;
-/**
- * Replace `text-decoration="underline"` on `<text>` elements with manual
- * `<line>` siblings so the underline is visible in non-browser renderers.
- *
- * resvg 2.6.2 has a rendering bug where 3+ `text-decoration="underline"`
- * attributes across nested `<svg>` elements cause unrelated paths (particularly
- * vertical lines) to disappear. This workaround removes the problematic
- * attribute and draws explicit underline lines using `getBBox()` for accurate
- * text measurements.
- *
- * The SVG must be temporarily attached to the DOM for `getBBox()` to work.
- */
-declare function replaceTextDecorationWithManualUnderline(svg: SVGSVGElement): void;
-/**
- * Embed `@font-face` CSS (typically the bundled Inter woff2 as base64) into the
- * export SVG so the document carries its own font and renders identically when
- * opened away from the editor. Inserted first so the face is declared before
- * any `<text>` references it. Idempotent: a second call is a no-op.
- */
-declare function embedFontFaceCss(svg: SVGSVGElement, css: string): void;
-/**
- * Final safety pass: strip any legacy <marker> references that could sneak in
- * from third-party content. Keeps exports clean for PowerPoint/Keynote.
- */
-declare function removeMarkerElements(svg: Element): void;
-/**
- * @internal — Exported for unit testing only. Not part of the public API.
- */
-export declare const __testing: {
-    readonly embedFontFaceCss: typeof embedFontFaceCss;
-    readonly filterRenderedElements: typeof filterRenderedElements;
-    readonly getRenderedDiagramBounds: typeof getRenderedDiagramBounds;
-    readonly extractPathPoints: typeof extractPathPoints;
-    readonly extractStyles: typeof extractStyles;
-    readonly resolveCSSVariable: typeof resolveCSSVariable;
-    readonly replaceCSSVariables: typeof replaceCSSVariables;
-    readonly convertStyleToAttributes: typeof convertStyleToAttributes;
-    readonly ensureTextFontDefaults: typeof ensureTextFontDefaults;
-    readonly resolveRelativeFontSizes: typeof resolveRelativeFontSizes;
-    readonly resolveTspanDy: typeof resolveTspanDy;
-    readonly resolveDominantBaseline: typeof resolveDominantBaseline;
-    readonly removeMarkerElements: typeof removeMarkerElements;
-    readonly replaceTextDecorationWithManualUnderline: typeof replaceTextDecorationWithManualUnderline;
-    readonly mergeBounds: typeof mergeBounds;
-    readonly getNodeBoundsFromDOM: typeof getNodeBoundsFromDOM;
-    readonly getNodeOverflowBoundsFromDOM: typeof getNodeOverflowBoundsFromDOM;
-};
 export {};

package/dist/react/utils/geometry/edgeLabelLayout.d.ts

@@ -0,0 +1,123 @@
+import { IPoint } from '../../edges/Connection';
+/**
+ * Pure geometry for edge-label placement, in flow space. No React, no DOM —
+ * every output is derived synchronously from the edge's polyline so it is
+ * identical interactively and in headless (resvg) export, and unit-testable on
+ * its own (mirrors edges/labelTypes/messageLayout.ts, the #645 gold standard).
+ *
+ * The model follows the cross-tool consensus (yEd / ELK CENTER / mxGraph /
+ * JointJS): keep the text horizontal and offset it by a constant gap onto a
+ * perpendicular side. The label is hosted on whichever ARM of the (possibly
+ * stepped) edge has room — scored against the edge's own arms, nodes, and
+ * neighbour edges — defaulting to centered-on-top of the arc-mid segment when
+ * that is already clear. Deterministic scoring, not a continuous optimizer.
+ */
+export interface Rect {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+}
+export interface MidSegment {
+    /** Rounded midpoint of the chosen mid-segment (flow space). */
+    point: IPoint;
+    /** Orientation of the chosen mid-segment. */
+    isHorizontal: boolean;
+    /** Index of the chosen segment in the collapsed polyline. */
+    segmentIndex: number;
+    /** The chosen segment's endpoints in source->target order. Useful to derive
+     * the LOCAL flow direction at the middle (e.g. communication arrows) instead
+     * of the raw node anchors, which can disagree on a bent edge. */
+    start: IPoint;
+    end: IPoint;
+}
+export type LabelSide = "above" | "below" | "left" | "right";
+export interface PlacedLabel {
+    x: number;
+    y: number;
+    textAnchor: "start" | "middle" | "end";
+    dominantBaseline: "auto" | "middle" | "hanging";
+    /** Exposed for unit assertions; not needed for rendering. */
+    side: LabelSide;
+}
+/**
+ * The mid-SEGMENT midpoint and orientation, computed purely from the polyline.
+ *
+ * Walks the collapsed polyline accumulating Manhattan segment length (exact
+ * because EDGES.STEP_BORDER_RADIUS === 0, so getSmoothStepPath emits no corner
+ * arcs and the rendered path equals the polyline). The "middle" is the first
+ * segment whose cumulative length reaches half the total; the midpoint is lerped
+ * strictly INSIDE that one segment, so it is corner-safe — unlike sampling the
+ * rendered path with getPointAtLength(total/2), which can land on a bend or, if
+ * line-jump bridges are present, on a bridge arc off the straight line.
+ */
+export declare function getMidSegment(renderPoints: IPoint[], fallbackSource: IPoint, fallbackTarget: IPoint): MidSegment;
+/**
+ * Rough single-line text width (flow px). Deterministic — a pure character-count
+ * estimate, never canvas measurement — so the chosen placement is identical
+ * interactively and in headless export, and SSR-safe. Slightly generous so the
+ * scoring box errs toward MORE clearance.
+ */
+export declare function estimateLabelWidth(text: string, fontSize: number): number;
+/**
+ * The text box (flow space) for a label anchored at `point` on the chosen side,
+ * sized to the actual label (`w` × `h`). Used to score overlap against the
+ * edge's own arms, neighbour edges, and nodes.
+ */
+export declare function candidateBox(point: IPoint, side: LabelSide, w: number, h: number): Rect;
+/**
+ * The other edges' polylines whose bounding box comes within `radius` of
+ * `center`, excluding `selfId`. Bounds the neighbour scan to edges actually near
+ * the label so placement stays O(nearby), not O(all edges) per label.
+ */
+export declare function collectNeighborPolylines(geometryById: Record<string, IPoint[]>, selfId: string, center: IPoint, radius: number): IPoint[][];
+export interface MiddleLabelInput {
+    /** The edge's full rendered polyline (source → target). */
+    renderPoints: IPoint[];
+    /** The label text — used for a width fallback when measuredWidth is absent. */
+    labelText: string;
+    /** Render font size (px) of the label. */
+    fontSize: number;
+    /** Real measured label width (px), from the rendering context. Preferred over
+     * the character-count estimate so the scored box equals the rendered ink. */
+    measuredWidth?: number;
+    /** Node rects to avoid — NOT only source/target: every node the edge routes
+     * near, so the label never lands on an unrelated node's body. */
+    nodeRects?: Rect[];
+    /** Nearby other-edge polylines (see collectNeighborPolylines), collected over
+     * the WHOLE edge so they cover any arm the label may land on. */
+    neighborGeometry?: IPoint[][];
+}
+/**
+ * Places the relationship/stereotype middle label so it overlaps nothing it can
+ * avoid. The label is hosted on whichever arm of the edge — and on whichever
+ * perpendicular side — has room: each candidate (every segment × its two sides)
+ * is scored lexicographically by
+ *   [ overlaps (own other arms + nodes + neighbour edges),
+ *     does-not-fit-within-the-segment,
+ *     distance from the arc-midpoint (keep it central),
+ *     side preference (on top / right) ].
+ * For a simple edge the arc-mid segment wins with zero overlaps, so the label
+ * stays centered on top exactly as before; on a zig-zag/stepped edge it moves to
+ * a longer arm with clearance instead of crossing the short mid-segment's
+ * neighbouring arms. All inputs are static geometry, so the placement is stable
+ * across selection and identical in headless export.
+ */
+export declare function computeMiddleLabelLayout(input: MiddleLabelInput): PlacedLabel;
+export interface RotatedLabelPlacement {
+    x: number;
+    y: number;
+    /** Degrees; the label is rotated to lie along the connector, flipped to stay
+     * upright. */
+    rotation: number;
+}
+/**
+ * Placement for a label that lies ALONG a straight (possibly diagonal)
+ * connector — use-case association names and the <<include>>/<<extend>>
+ * stereotype. The text is rotated to the line's slope (flipped to stay upright)
+ * and pushed `perpendicularOffset` px off the line on the upper-left normal.
+ * Pass 0 to center it on the line (e.g. include/extend, which sits in the gap
+ * carved by calculateStraightPath). Centralises the rotation math that was
+ * duplicated across the use-case label components.
+ */
+export declare function computeUseCaseLabelLayout(source: IPoint, target: IPoint, perpendicularOffset: number): RotatedLabelPlacement;

package/dist/react/utils/geometry/interfaceLabelLayout.d.ts

@@ -0,0 +1,44 @@
+/**
+ * Pure side-selection for the provided/required interface node label. The
+ * interface is a small circle that connects only at its four directional
+ * handles ("top"/"right"/"bottom"/"left"). The name sits centered below by
+ * default (see InterfaceLabel), but must move off any side a connecting edge
+ * attaches to — otherwise the label overlaps that edge. Pure and unit-testable
+ * in the spirit of edgeLabelLayout.ts; no React, no DOM, no constants.
+ */
+/** A side an edge can attach to (the four directional interface handles). */
+export type CardinalSide = "top" | "right" | "bottom" | "left";
+/**
+ * Where the label sits relative to the circle: one of the four sides, or — when
+ * every side has a connecting edge — a diagonal quadrant (which no cardinal edge
+ * passes through).
+ */
+export type InterfaceLabelSide = CardinalSide | "top-left" | "top-right" | "bottom-left" | "bottom-right";
+/** Minimal structural view of a React Flow edge (the store's `Edge[]` fits). */
+interface InterfaceEdgeLike {
+    source: string;
+    target: string;
+    sourceHandle?: string | null;
+    targetHandle?: string | null;
+}
+/** The sides of `nodeId` that a connecting edge attaches to. */
+export declare function getOccupiedInterfaceSides(edges: ReadonlyArray<InterfaceEdgeLike>, nodeId: string): Set<CardinalSide>;
+/**
+ * Picks where the label sits. Prefers a free cardinal side by priority — reads
+ * naturally under a small circle (bottom, then top, then a horizontal side).
+ * When the assessment badge occupies the top-right corner, "top" and "right"
+ * are demoted last so a label can't graze the badge.
+ *
+ * If every cardinal side has a connecting edge, the label moves into a DIAGONAL
+ * quadrant: each cardinal edge leaves along an axis, so a corner label sits in
+ * the gap between two of them and crosses none. Prefer a corner away from the
+ * top-right badge.
+ */
+export declare function pickInterfaceLabelSide(occupied: ReadonlySet<CardinalSide>, opts?: {
+    badgeTopRight?: boolean;
+}): InterfaceLabelSide;
+/** Convenience: the interface label side for `nodeId` given the current edges. */
+export declare function computeInterfaceLabelSide(edges: ReadonlyArray<InterfaceEdgeLike>, nodeId: string, opts?: {
+    badgeTopRight?: boolean;
+}): InterfaceLabelSide;
+export {};

package/dist/react/utils/index.d.ts

@@ -10,6 +10,7 @@ export * from './diagramTypeUtils';
 export * from './storeUtils';
 export * from './deepPartial';
 export * from './bpmnConstraints';
+export * from './swimlaneUtils';
 export { importDiagram } from './versionConverter';
 export * from './alignmentUtils';
 export * from './requiredInterfaceUtils';

package/dist/react/utils/paletteLayout.d.ts

@@ -0,0 +1,70 @@
+/**
+ * Layout math for the floating element palette. The palette is an overlay on
+ * the canvas (all viewports — there is no docked variant), so it must lay every
+ * element out in a grid that fits the available canvas WITHOUT scrolling.
+ *
+ * Objective (in priority order):
+ *   1. Use the FEWEST columns — a tall, narrow card preserves horizontal canvas
+ *      space, which is what you actually draw in.
+ *   2. Fill the available VERTICAL space — a single column down the side reads
+ *      like a classic palette and wastes no height.
+ *   3. Shrink the cells down to the `COMFORT_MIN_H` LEGIBILITY threshold BEFORE
+ *      adding a column — but no smaller: below that, spill to another column so
+ *      the node types stay distinguishable (rather than collapsing to an
+ *      illegible sliver). Cap at `CELL_MAX_H` so they're never too large. The
+ *      `CELL_MIN_H` touch floor is the last-resort fallback on a tiny canvas.
+ *
+ * So: walk column counts low→high and take the first one whose cells, sized to
+ * fill the height (capped), are still at least the legibility threshold. One
+ * column of legible cells is preferred over two columns of bigger ones; cells
+ * shrink toward the legibility threshold first, and only spill to another column
+ * when staying legible in fewer columns no longer fits the height.
+ *
+ * `availH` is the palette's REAL available band (the caller measures the space
+ * between the palette's top and the bottom controls), so this math does NOT
+ * re-subtract any top/bottom chrome reserve — it fills the band it is given.
+ *
+ * Cells are rectangular (the dominant elements — class boxes, BPMN tasks — are
+ * ~1.6:1 wide); narrower/square elements letterbox centered inside. Sizing the
+ * cell, not the SVG, keeps the node components untouched.
+ */
+export declare const PALETTE: Readonly<{
+    /** Absolute floor (HIG/WCAG touch) — only reached on a tiny canvas where even
+     *  spilling to more columns can't keep cells legible; never shrink past it. */
+    readonly CELL_MIN_H: 44;
+    /** Legibility threshold: shrink a column's cells down to here BEFORE adding
+     *  another column, but spill (rather than go smaller) so the node types stay
+     *  distinguishable. ~a comfortably legible node-preview cell. */
+    readonly COMFORT_MIN_H: 64;
+    /** Upper bound so few-element palettes don't get absurdly tall cells;
+     *  ~a 0.8-scale class-box preview. */
+    readonly CELL_MAX_H: 88;
+    /** cellW = round(CELL_RATIO * cellH); ~matches the 160×100 class box. */
+    readonly CELL_RATIO: 1.6;
+    readonly GAP: 8;
+    readonly PAD: 6;
+    /** Keep the palette horizontally narrow so the canvas keeps its width. */
+    readonly MAX_FRAC_W: 0.5;
+    /** Letterbox padding around the preview inside a cell. */
+    readonly CONTENT_INSET: 6;
+}>;
+export interface PaletteLayout {
+    cols: number;
+    cellW: number;
+    cellH: number;
+    /** True only in the rare case all items can't fit even at the floor size. */
+    scroll: boolean;
+}
+/**
+ * @param itemCount total grid cells (drag elements + the color-description cell)
+ * @param availW    measured canvas width
+ * @param availH    measured canvas height
+ * @param chromeH   height of non-grid palette chrome (view switch / hint), 0 if none
+ */
+export declare function computePaletteLayout(itemCount: number, availW: number, availH: number, chromeH: number): PaletteLayout;
+/**
+ * Preview scale that fits an element's natural size into a cell's content box.
+ * Elements fill their cell (so they read "big"); wide boxes fit width, tall/
+ * square nodes fit height and letterbox.
+ */
+export declare function previewScaleForCell(naturalWidth: number, naturalHeight: number, cellW: number, cellH: number): number;

package/dist/react/utils/swimlaneUtils.d.ts

@@ -0,0 +1,58 @@
+import { SwimlaneLane } from '../types';
+/** Smallest a lane may be shrunk to (flow px) when dragging a separator. */
+export declare const MIN_LANE_EXTENT = 40;
+/**
+ * Pixel `start`/`extent` of every lane along the primary axis.
+ *
+ * Lane sizes are stored as absolute flow px. The **last** lane is elastic: it
+ * always fills the remaining space. That way resizing the whole swimlane only
+ * grows/shrinks the last lane — the interior separators stay put — instead of
+ * rescaling every lane (which would move every separator). Lanes with no size
+ * at all (a freshly dropped swimlane) divide the axis equally.
+ */
+export declare const getLaneOffsets: (lanes: {
+    size?: number;
+}[], primaryExtent: number) => {
+    start: number;
+    extent: number;
+}[];
+/**
+ * Pin every lane's current rendered extent as its `size`, so the elastic last
+ * lane gets a concrete value before an operation (reorder/add/remove) that
+ * changes which lane is last.
+ */
+export declare const materializeLaneSizes: (lanes: SwimlaneLane[], primaryExtent: number) => SwimlaneLane[];
+/** Index of the lane whose range contains the primary-axis coordinate `pos`. */
+export declare const laneIndexAtOffset: (offsets: {
+    start: number;
+    extent: number;
+}[], pos: number) => number;
+/**
+ * Balanced resize of the divider between lane `index` and `index + 1`: move the
+ * shared boundary by `deltaPx`, growing one lane and shrinking the other by the
+ * same amount so the swimlane's outer size never changes. Neither lane drops
+ * below `MIN_LANE_EXTENT`. Returns lanes with an explicit `size` on every entry.
+ *
+ * When `snapGridPx > 0` the moved boundary is snapped to that grid, so a lane
+ * separator lands on the same grid that nodes and edge bends snap to. The lane
+ * offsets are measured from the swimlane's own origin, which React Flow already
+ * keeps grid-aligned, so the snapped boundary lines up with the absolute grid.
+ */
+export declare const resizeLaneDivider: (lanes: SwimlaneLane[], index: number, deltaPx: number, primaryExtent: number, snapGridPx?: number) => SwimlaneLane[];
+/**
+ * Reposition a swimlane child when orientation flips and the swimlane's
+ * width/height swap: transpose the child's corner (x,y)->(y,x), then clamp it
+ * into the swapped frame by its own size so it can't be stranded off the new
+ * (shorter) cross-axis. `newWidth`/`newHeight` are the post-swap dimensions.
+ */
+export declare const flipSwimlaneChildPosition: (child: {
+    position: {
+        x: number;
+        y: number;
+    };
+    width?: number;
+    height?: number;
+}, newWidth: number, newHeight: number) => {
+    x: number;
+    y: number;
+};