@tumaet/apollon 4.6.0 → 4.8.0

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

@@ -3,11 +3,13 @@ export type AssessmentSelectionStore = {
     selectedElementIds: string[];
     highlightedElementId: string | null;
     isAssessmentSelectionMode: boolean;
+    highlightedElements: Record<string, string>;
     setAssessmentSelectionMode: (isActive: boolean) => void;
     selectElement: (elementId: string) => void;
     selectMultipleElements: (elementIds: string[]) => void;
     clearSelection: () => void;
     setHighlightedElement: (elementId: string | null) => void;
+    setElementHighlights: (highlights: Record<string, string>) => void;
     isElementSelected: (elementId: string) => boolean;
     isElementHighlighted: (elementId: string) => boolean;
     reset: () => void;

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

@@ -36,7 +36,7 @@ export type DeploymentComponentProps = {
 } & DefaultNodeProps;
 export type PetriNetPlaceProps = {
     tokens: number;
-    capacity: number | "Infinity";
+    capacity: number | string;
 } & DefaultNodeProps;
 export type BPMNTaskType = "default" | "user" | "send" | "receive" | "manual" | "business-rule" | "script";
 export type BPMNMarkerType = "none" | "parallel multi instance" | "sequential multi instance" | "loop";
@@ -48,7 +48,7 @@ export type BPMNStartEventType = "default" | "message" | "timer" | "conditional"
 export type BPMNIntermediateEventType = "default" | "message-catch" | "message-throw" | "timer-catch" | "escalation-throw" | "conditional-catch" | "link-catch" | "link-throw" | "compensation-throw" | "signal-catch" | "signal-throw";
 export type BPMNEndEventType = "default" | "message" | "escalation" | "error" | "compensation" | "signal" | "terminate";
 export type BPMNEventProps = DefaultNodeProps & {
-    eventType: BPMNStartEventType;
+    eventType: BPMNStartEventType | BPMNIntermediateEventType | BPMNEndEventType;
 };
 export type BPMNGatewayType = "complex" | "event-based" | "exclusive" | "inclusive" | "parallel";
 export type BPMNGatewayProps = DefaultNodeProps & {
@@ -73,5 +73,5 @@ export type SfcActionTableProps = DefaultNodeProps & {
     actionRows: SfcActionRow[];
 };
 export type SfcTransitionBranchNodeProps = DefaultNodeProps & {
-    showHint: boolean;
+    showHint?: boolean;
 };

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;
@@ -88,8 +105,12 @@ export type ApollonEdge = {
     data: OrthogonalEdgeData;
 };
 export type InteractiveElements = {
-    elements: Record<string, boolean>;
-    relationships: Record<string, boolean>;
+    elements: {
+        [id: string]: boolean;
+    };
+    relationships: {
+        [id: string]: boolean;
+    };
 };
 export type UMLModel = {
     version: `4.${number}.${number}`;

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/exportFonts.d.ts

@@ -0,0 +1,11 @@
+/**
+ * Inter `@font-face` (base64 woff2) for self-contained `compat`-mode SVG
+ * exports, so the file renders in Inter when opened away from the editor
+ * (browser, Inkscape, PowerPoint). The woff2 is the same file `fonts.css`
+ * bundles. resvg does not resolve data-URI `@font-face` (resvg#541) — pass the
+ * font via its `fontFiles` instead; the embedded face is harmlessly ignored.
+ *
+ * Data-only and loaded lazily (dynamic `import()` in `exportModelAsSvg`) so the
+ * woff2 lands in its own chunk instead of the main bundle.
+ */
+export declare const INTER_FONT_FACE_CSS: string;

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

@@ -0,0 +1,30 @@
+/**
+ * Layout CSS the off-screen export mount needs to be self-contained, so a
+ * consumer rendering headlessly never has to import `@tumaet/apollon/style.css`
+ * for the export to be correct.
+ *
+ * The load-bearing rule is React Flow's `base.css` `.react-flow__node {
+ * position: absolute }`: Apollon positions each connection `<Handle>` with an
+ * inline `left/top: "X%"` (see `DefaultNodeWrapper`), and a percentage offset
+ * resolves against the nearest *positioned* ancestor. React Flow sets the
+ * node's transform/size inline but not `position` — that comes only from
+ * `base.css`. Without it `.react-flow__node` is `position: static`, the handle
+ * `%` offsets resolve against the wrong box, React Flow's on-mount
+ * `getBoundingClientRect` handle measurement is wrong, and edges route through
+ * the node boxes (the symptom reported for browser/Playwright exports). The
+ * same `base.css` also positions `.react-flow__viewport/.react-flow__edges`,
+ * which the `getBoundingClientRect`-based bounds math in `exportUtils` relies on.
+ *
+ * `app.css` adds `.apollon-canvas { flex: 1; ... }` so the canvas fills the
+ * 4000×4000 mount container.
+ *
+ * WARNING: `app.css` is inlined verbatim into this lazy chunk. It must stay
+ * free of `@font-face`, `url(...)`, and `@import`, or those assets leak into
+ * this chunk (the Inter font is shipped separately, see `exportFonts.ts`).
+ *
+ * Reached only via a dynamic `import()` in `exportModelAsSvg`, so Rollup emits
+ * it as its own chunk and these ~26 KB of CSS-as-string stay out of the main
+ * bundle (mirrors the `exportFonts.ts` pattern). The chunk is emitted per build
+ * entry (`dist/` and `dist/react/`).
+ */
+export declare const EXPORT_LAYOUT_CSS: string;

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[];
@@ -7,105 +6,6 @@ type ExportFilterOptions = {
     svgMode?: SvgExportMode;
 };
 export declare function filterRenderedElements(container: HTMLElement, options?: ExportFilterOptions): void;
-export declare const getSVG: (container: HTMLElement, clip: Rect, options?: ExportFilterOptions) => 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 const getSVG: (container: HTMLElement, clip: Rect, options?: ExportFilterOptions, fontFaceCss?: string) => string;
 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;
-/**
- * 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;
-/**
- * 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 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 removeMarkerElements: typeof removeMarkerElements;
-    readonly replaceTextDecorationWithManualUnderline: typeof replaceTextDecorationWithManualUnderline;
-    readonly mergeBounds: typeof mergeBounds;
-    readonly getNodeBoundsFromDOM: typeof getNodeBoundsFromDOM;
-    readonly getNodeOverflowBoundsFromDOM: typeof getNodeOverflowBoundsFromDOM;
-};
 export {};

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

@@ -0,0 +1,66 @@
+/**
+ * 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. Keep cells comfortably large — never below `COMFORT_MIN_H` just to save a
+ *      column, and never below the HIG `CELL_MIN_H` touch floor at all.
+ *
+ * So: walk column counts low→high and take the first one whose cells, sized to
+ * fill the height, are still comfortable. Few elements get big capped cells in
+ * one column; many elements get a taller single column of moderate cells before
+ * a second column is ever added.
+ *
+ * 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<{
+    /** HIG/WCAG touch + legibility floor — never shrink a cell past this. */
+    readonly CELL_MIN_H: 44;
+    /** Bias toward fewer columns: keep a single (or narrower) column as long as
+     *  its height-filling cells stay at least this big; only add a column when
+     *  that would drop below it. Just above the touch floor, so the strong
+     *  preference is fewer columns + filling the height. */
+    readonly COMFORT_MIN_H: 48;
+    /** Upper bound so few-element palettes don't get absurdly tall cells. */
+    readonly CELL_MAX_H: 78;
+    /** 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;
+    /** … but let it use most of the height. */
+    readonly MAX_FRAC_H: 0.9;
+    /** Letterbox padding around the preview inside a cell. */
+    readonly CONTENT_INSET: 6;
+    /** Space kept clear above (top offset) and below (zoom controls) the palette. */
+    readonly TOP_RESERVE: 10;
+    readonly BOTTOM_RESERVE: 84;
+}>;
+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;