@unofficialbox/box-open-elements 0.24.0 → 0.26.0

package/dist/patterns/process-modeler/index.d.ts

@@ -1,2 +1,4 @@
 export * from "./model.js";
+export * from "./geometry.js";
+export * from "./bridge.js";
 export * from "./process-modeler.js";

package/dist/patterns/process-modeler/index.js

@@ -1,2 +1,4 @@
 export * from "./model.js";
+export * from "./geometry.js";
+export * from "./bridge.js";
 export * from "./process-modeler.js";

package/dist/patterns/process-modeler/model.d.ts

@@ -5,9 +5,17 @@ export interface ProcessBox<N = unknown> {
     kind: string;
     title: string;
     description?: string;
+    /** Description used in Technical view; absent values fall back to description. */
+    technicalDescription?: string;
+    /** Visual anatomy, independent of the host's kind identifier. */
+    shape?: "task" | "gateway" | "event" | "frame";
     path?: NodePath;
+    /** Host identity at this path, used to reject stale saved positions. */
+    fingerprint?: string;
     /** A frame draws behind its children and connects as one box. */
     frame?: boolean;
+    /** Show the loop mark in a repeating frame without inferring host semantics from its kind name. */
+    loopMark?: boolean;
     parentId?: string;
 }
 export interface ProcessLine {
@@ -15,18 +23,105 @@ export interface ProcessLine {
     from: string;
     to: string;
     label?: string;
+    weight?: number;
+    fromSide?: ProcessSide;
+    toSide?: ProcessSide;
     dashed?: boolean;
     points?: {
         x: number;
         y: number;
     }[];
+    /** Optional last-run traffic share, between 0 and 1. */
+    share?: number;
+}
+export type ProcessSide = "north" | "east" | "south" | "west";
+export interface ProcessConnection {
+    name: string;
+    kind: string;
+    id?: string;
+    signIn?: string;
+}
+export interface ProcessVariable {
+    name: string;
+    value?: unknown;
+    description?: string;
+    scope?: string;
+    startingValue?: string;
+    problem?: string;
+}
+/** Host-authored, readable outline; boxId links a row to a projected step. */
+export interface ProcessOutlineItem {
+    title: string;
+    description?: string;
+    boxId?: string;
+    children?: readonly ProcessOutlineItem[];
+}
+/** Host-supplied field values; the modeler draws controls and requests edits. */
+export interface ProcessField {
+    key: string;
+    label: string;
+    kind: "text" | "multiline" | "number" | "choice" | "boolean" | "expression" | "search" | "action";
+    value: string | number | boolean;
+    description?: string;
+    options?: readonly {
+        value: string;
+        label: string;
+        group?: string;
+    }[];
+    placeholder?: string;
+    required?: boolean;
+    disabled?: boolean;
+    problem?: string;
+}
+export interface ProcessPositionSnapshot {
+    path?: NodePath;
+    fingerprint?: string;
+    id: string;
+    position: BoxPosition;
+}
+export interface ProcessLoadOptions {
+    /** Keys are JSON.stringify(path); snapshots are also accepted. Fingerprints must match. */
+    positions?: Readonly<Record<string, {
+        fingerprint?: string;
+        position: BoxPosition;
+    }>> | readonly ProcessPositionSnapshot[];
+    version?: string | number;
+    selectedPath?: NodePath | null;
 }
 export interface ProcessProjection<N = unknown> {
     boxes: readonly ProcessBox<N>[];
     lines: readonly ProcessLine[];
 }
+export interface ProcessKind extends FlowKind {
+    /** Alternative terms included in palette search. */
+    aliases?: readonly string[];
+    /** Host kind names never dictate the reusable visual anatomy. */
+    shape?: ProcessBox["shape"];
+    /** Notes and sections live in layout rather than the host workflow graph. */
+    placement?: "note" | "section";
+}
+export interface ProcessStepMetrics {
+    callsPerSecond?: number;
+    p95Ms?: number;
+    failedShare?: number;
+    /** True when the step was not measured in this run. */
+    notInRun?: boolean;
+}
+export interface ProcessLastRun {
+    label: string;
+    /** Keys are projected box IDs, supplied by the host. */
+    steps: Readonly<Record<string, ProcessStepMetrics>>;
+}
 export interface ProcessModel<D = unknown, N = unknown> {
     project(document: D): ProcessProjection<N>;
+    /** Optional host arrangement, used by Tidy up and for missing positions. */
+    arrange?(projection: ProcessProjection<N>): ProcessLayout;
+    /**
+     * The host's workflow read-back/validation. When supplied it is authoritative:
+     * generic vocabulary-based graph checks are not added on top. A host may call
+     * graphChecks itself with its own kind names if it wants those checks too.
+     */
+    validate?(document: D, projection: ProcessProjection<N>): readonly ProcessCheck[];
 }
 export interface BoxPosition {
     x: number;
@@ -45,6 +140,7 @@ export interface ProcessLayout {
     sections?: {
         id: string;
         title: string;
+        description?: string;
         x: number;
         y: number;
         width: number;
@@ -61,17 +157,26 @@ export interface ProcessCheck {
     path?: NodePath;
 }
 export interface ProcessEdit {
-    type: "add" | "delete" | "connect" | "disconnect" | "insert";
+    type: "add" | "delete" | "duplicate" | "connect" | "disconnect" | "reattach" | "insert" | "reparent";
     boxId?: string;
+    sourceId?: string;
     from?: string;
     to?: string;
     lineId?: string;
     kind?: FlowKind;
     position?: BoxPosition;
+    parentId?: string;
+    fromSide?: ProcessSide;
+    toSide?: ProcessSide;
+    /** Optional branch presentation requested by a directional add. */
+    routeLabel?: string;
+    dashed?: boolean;
 }
 export interface ReversibleProcessEdit {
     undo(): void;
     redo(): void;
+    /** The already-applied edit's layout, recorded atomically with the document. */
+    layout?: ProcessLayout;
 }
 /** Host applies the edit, then calls accept with its inverse and replay. */
 export interface ProcessEditRequest extends ProcessEdit {

package/dist/patterns/process-modeler/model.js

@@ -35,10 +35,10 @@ export function completeLayout(projection, layout) {
             .filter((child) => child.parentId === box.id)
             .map(measure);
         const size = {
-            width: Math.max(box.frame ? 320 : 220, ...children.map((child) => child.width + 40)),
+            width: Math.max(box.frame || box.shape === "frame" ? 320 : box.shape === "gateway" || box.shape === "event" ? 56 : 224, ...children.map((child) => child.width + 40)),
             height: box.frame
                 ? Math.max(180, 64 + children.reduce((sum, child) => sum + child.height + 24, 0))
-                : 96,
+                : box.shape === "gateway" || box.shape === "event" ? 56 : 64,
         };
         sizes.set(box.id, size);
         return size;

package/dist/patterns/process-modeler/process-modeler.d.ts

@@ -1,5 +1,6 @@
 import { BaseElement } from "../../core/index.js";
-import type { FlowKind, NodePath } from "../flow-builder/model.js";
+import type { NodePath } from "../flow-builder/model.js";
+import type { ProcessConnection, ProcessVariable, ProcessLoadOptions, ProcessKind, ProcessLastRun, ProcessOutlineItem, ProcessField } from "./model.js";
 import { ProcessHistory, type ProcessBox, type ProcessCheck, type ProcessEdit, type ProcessLayout, type ProcessModel, type ProcessProjection } from "./model.js";
 /** Projects host documents without owning workflow schemas or persistence. */
 export declare class ProcessModeler<D = ProcessProjection, N = unknown> extends BaseElement {
@@ -10,19 +11,101 @@ export declare class ProcessModeler<D = ProcessProjection, N = unknown> extends
     private projection;
     private layoutValue;
     private catalogValue;
+    private detailValue;
+    private lastRunValue?;
+    private showLastRunValue;
     private selectedId;
+    private selectedLineId;
     private connecting;
     private checks;
     private renderer?;
     private cleanupInspector?;
     private inspected?;
     private inspectedId?;
+    private inspectedControls;
     private historyValue;
     private viewport;
     private pointers;
     private drag?;
     private pinchDistance;
     private gestureZoom;
+    private insertion?;
+    private selectedIds;
+    private clipboardIds;
+    private selectionToolbarKey;
+    private sectionSequence;
+    private versionValue;
+    private lastProjection;
+    private lastReadableProjection;
+    private readableValue;
+    private lastDocument?;
+    private connectionsValue;
+    private variablesValue;
+    private outlineValue;
+    private fieldsValue;
+    private processTitleValue;
+    private processSummaryValue;
+    private activePane;
+    private portDrag?;
+    private endDrag?;
+    private pendingReattach?;
+    private marquee?;
+    private segmentDrag?;
+    private frameResize?;
+    private spacePressed;
+    private dropLine?;
+    private paletteDragKind;
+    private narrowValue;
+    private suppressClick;
+    private resizeObserver?;
+    private routedLines;
+    private computedChecks;
+    get selectedBoxes(): readonly ProcessBox<N>[];
+    get selectedLine(): import("./model.js").ProcessLine | null;
+    get selectedPath(): NodePath | null;
+    set selectedPath(path: NodePath | null);
+    get connections(): readonly ProcessConnection[];
+    set connections(value: readonly ProcessConnection[]);
+    get variables(): readonly ProcessVariable[];
+    set variables(value: readonly ProcessVariable[]);
+    get outline(): readonly ProcessOutlineItem[];
+    set outline(value: readonly ProcessOutlineItem[]);
+    get fields(): Readonly<Record<string, readonly ProcessField[]>>;
+    set fields(value: Readonly<Record<string, readonly ProcessField[]>>);
+    get processTitle(): string;
+    set processTitle(value: string);
+    get processSummary(): string;
+    set processSummary(value: string);
+    get view(): Readonly<{
+        x: number;
+        y: number;
+        zoom: number;
+    }>;
+    setView(view: {
+        x: number;
+        y: number;
+        zoom: number;
+    }): void;
+    get version(): string | number;
+    get narrow(): boolean;
+    get positions(): readonly import("./model.js").ProcessPositionSnapshot[];
+    /** Current drawing and last valid drawing; hosts own conversion and persistence. */
+    get readback(): Readonly<{
+        current: ProcessProjection<N> | null;
+        lastReadable: ProcessProjection<N> | null;
+        checks: readonly ProcessCheck[];
+        version: string | number;
+    }>;
+    load(document: D, options?: ProcessLoadOptions): void;
+    selectMany(ids: readonly string[]): void;
+    get headingLevel(): number;
+    set headingLevel(value: number);
+    get disableConnections(): boolean;
+    set disableConnections(value: boolean);
+    /** Hide duplicate process heading/view controls when the host supplies them. */
+    get embedMode(): boolean;
+    set embedMode(value: boolean);
+    private arrangedLayout;
     get document(): D | undefined;
     get history(): ProcessHistory;
     set history(value: ProcessHistory);
@@ -31,8 +114,14 @@ export declare class ProcessModeler<D = ProcessProjection, N = unknown> extends
     set model(value: ProcessModel<D, N>);
     get layout(): ProcessLayout;
     set layout(value: ProcessLayout);
-    get catalog(): readonly FlowKind[];
-    set catalog(value: readonly FlowKind[]);
+    get catalog(): readonly ProcessKind[];
+    set catalog(value: readonly ProcessKind[]);
+    get detail(): "business" | "technical";
+    set detail(value: "business" | "technical");
+    get lastRun(): ProcessLastRun | undefined;
+    set lastRun(value: ProcessLastRun | undefined);
+    get showLastRun(): boolean;
+    set showLastRun(value: boolean);
     get locked(): boolean;
     set locked(value: boolean);
     get snapToGrid(): boolean;
@@ -41,8 +130,10 @@ export declare class ProcessModeler<D = ProcessProjection, N = unknown> extends
     get renderInspector(): ((node: N, container: HTMLElement) => void | (() => void)) | undefined;
     set renderInspector(value: ((node: N, container: HTMLElement) => void | (() => void)) | undefined);
     disconnectedCallback(): void;
+    connectedCallback(): void;
     refresh(): void;
     select(id: string | null): void;
+    selectLine(id: string | null): void;
     setValidation(checks: readonly ProcessCheck[]): void;
     setValidationAtPath(message: string, path: NodePath): void;
     requestEdit(edit: ProcessEdit): void;
@@ -50,6 +141,7 @@ export declare class ProcessModeler<D = ProcessProjection, N = unknown> extends
     redo(): void;
     private commitLayout;
     move(id: string, x: number, y: number): void;
+    private emitPositions;
     private translatedLayout;
     tidy(): void;
     resize(id: string, width: number, height: number): void;
@@ -57,26 +149,46 @@ export declare class ProcessModeler<D = ProcessProjection, N = unknown> extends
         x: number;
         y: number;
     }[]): void;
+    resetLine(id: string): void;
     setNote(note: NonNullable<ProcessLayout["notes"]>[number] | null, id?: string | undefined): void;
     setSection(section: NonNullable<ProcessLayout["sections"]>[number] | null, id?: string | undefined): void;
     zoomBy(factor: number): void;
     fit(): void;
     private bounds;
     protected renderTemplate(): void;
+    private setupPanes;
+    private renderPane;
+    private selectionCommand;
+    arrangeSelection(action: 'left' | 'center' | 'right' | 'top' | 'middle' | 'bottom' | 'distribute-horizontal' | 'distribute-vertical'): void;
+    makeSection(title?: string): void;
     protected setupListeners(): void;
     private onKey;
     private pointerDown;
     private distance;
     private pointerMove;
     private pointerEnd;
+    private canvasPoint;
+    private boxAt;
+    private sideAt;
+    private lineAt;
+    private markDropLine;
+    private alignedPoint;
+    private openChooser;
+    private addLayoutKind;
+    private showConnectTooltip;
     protected update(): void;
+    private get allChecks();
+    private collectChecks;
     private renderWorld;
     private place;
     private renderPalette;
     private renderChecks;
+    private renderField;
     private renderSelection;
+    private renderSelectionToolbar;
     private updateToolbar;
     private paintViewport;
+    private positionSelectionToolbar;
     private focusBox;
     private setStatus;
 }