@unofficialbox/box-open-elements 0.22.0 → 0.24.0

package/dist/patterns/flow-builder/flow-builder.d.ts

@@ -39,6 +39,8 @@ export declare class FlowBuilder<N extends FlowNodeBase = FlowNode> extends Base
     private drawer;
     private error;
     static get observedAttributes(): string[];
+    get headingLevel(): number;
+    set headingLevel(value: number);
     get nodes(): N[];
     set nodes(value: N[]);
     /** How to read the host document; defaults to `body` / `branches` ({@link FlowNode}). */

package/dist/patterns/flow-builder/flow-builder.js

@@ -1,4 +1,6 @@
 import { BaseElement } from "../../core/index.js";
+import { Drawer } from "../../components/overlays/drawer.js";
+Drawer.register();
 import { announce } from "../../foundations/a11y/index.js";
 import { defaultFlowModel, nodeAtPath, nodeDescription, nodeTitle } from "./model.js";
 import { FLOW_SPINE_PARTS, InsertPoint, KIND_PICKER_PARTS } from "./primitives.js";
@@ -31,7 +33,9 @@ export class FlowBuilder extends BaseElement {
     inspector;
     drawer;
     error;
-    static get observedAttributes() { return ["start-label", "end-label"]; }
+    static get observedAttributes() { return ["start-label", "end-label", "heading-level"]; }
+    get headingLevel() { const level = Number(this.getAttribute("heading-level") ?? 2); return Number.isInteger(level) && level >= 1 && level <= 6 ? level : 2; }
+    set headingLevel(value) { this.setAttribute("heading-level", String(value)); }
     get nodes() { return this.nodesValue; }
     set nodes(value) { this.nodesValue = value; this.refresh(); }
     /** How to read the host document; defaults to `body` / `branches` ({@link FlowNode}). */
@@ -83,15 +87,15 @@ export class FlowBuilder extends BaseElement {
         this.shadowRoot.innerHTML = `<style>
       :host{display:block;min-width:0;font:inherit;color:var(--boe-token-text-text,#222)}
       :host([hidden]){display:none!important}
-      [part=layout]{display:grid;grid-template-columns:minmax(0,1fr) minmax(240px,320px);gap:24px;align-items:start}
+      [part=layout]{display:grid;grid-template-columns:minmax(0,1fr) minmax(var(--boe-flow-inspector-min-width,240px),var(--boe-flow-inspector-width,320px));gap:24px;align-items:start}
       [part=layout][data-narrow=true]{grid-template-columns:minmax(0,1fr)}
-      aside{min-width:0;padding:16px;border:1px solid var(--boe-token-stroke-stroke,#ddd);border-radius:12px;background:var(--boe-token-surface-surface,#fff)}
+      [part=inspector]{min-width:0;position:sticky;top:var(--boe-flow-inspector-top,16px);max-height:calc(100dvh - var(--boe-flow-inspector-top,16px) - 16px);overflow:auto;box-sizing:border-box;padding:16px;border:1px solid var(--boe-token-stroke-stroke,#ddd);border-radius:12px;background:var(--boe-token-surface-surface,#fff)}
       [part=picker-popup]{position:fixed;z-index:1000;max-width:min(360px,calc(100vw - 24px));max-height:65vh;overflow:auto;padding:16px;background:var(--boe-token-surface-surface,#fff);border:1px solid var(--boe-token-stroke-stroke,#ddd);border-radius:12px;box-shadow:0 8px 32px #0003}
       [part=error]{color:var(--boe-token-text-status-text-error,#b92340);margin-bottom:16px;overflow-wrap:anywhere}
-      [hidden]{display:none!important} h2{font:inherit;font-weight:650;margin:0 0 12px}
-      </style><div part="error" hidden></div><div part="layout"><box-flow-spine exportparts="${FLOW_SPINE_PARTS.join(", ")}"></box-flow-spine><aside part="inspector"><box-kind-picker exportparts="${KIND_PICKER_PARTS.join(", ")}"></box-kind-picker><div part="editor"></div></aside></div><div part="picker-popup" hidden><box-kind-picker exportparts="${KIND_PICKER_PARTS.join(", ")}"></box-kind-picker></div><box-drawer position="bottom" size="large"></box-drawer>`;
+      [hidden]{display:none!important} [part=inspector-heading]{font:inherit;font-weight:650;margin:0 0 12px}
+      </style><div part="error" hidden></div><div part="layout"><box-flow-spine exportparts="${FLOW_SPINE_PARTS.join(", ")}"></box-flow-spine><div part="inspector" role="region" aria-label="Add a step"><box-kind-picker exportparts="${KIND_PICKER_PARTS.join(", ")}"></box-kind-picker><div part="editor"></div></div></div><div part="picker-popup" hidden><box-kind-picker exportparts="${KIND_PICKER_PARTS.join(", ")}"></box-kind-picker></div><box-drawer position="bottom" size="large"></box-drawer>`;
         this.spine = this.shadowRoot.querySelector("box-flow-spine");
-        this.aside = this.shadowRoot.querySelector("aside");
+        this.aside = this.shadowRoot.querySelector("[part=inspector]");
         this.palette = this.aside.querySelector("box-kind-picker");
         this.inspector = this.aside.querySelector("[part=editor]");
         this.popup = this.shadowRoot.querySelector("[part=picker-popup]");
@@ -198,6 +202,7 @@ export class FlowBuilder extends BaseElement {
         this.spine.nodes = this.nodes;
         this.spine.catalog = this.catalog;
         this.spine.model = this.model;
+        this.spine.headingLevel = Math.min(6, this.headingLevel + 1);
         this.spine.startLabel = this.startLabel;
         this.spine.endLabel = this.endLabel;
         this.spine.selected = this.selected;
@@ -208,12 +213,13 @@ export class FlowBuilder extends BaseElement {
         this.updateInspector();
     }
     updateInspector() {
+        this.aside.setAttribute("aria-label", this.selected ? "Step editor" : "Add a step");
         this.aside.hidden = this.narrow;
         this.palette.hidden = Boolean(this.selected);
         const target = this.narrow ? this.drawer : this.aside;
         if (this.inspector.parentElement !== target)
             target.append(this.inspector);
-        if (this.inspected === this.selected && this.renderedRenderer === this.renderer) {
+        if (this.inspected === this.selected && this.renderedRenderer === this.renderer && (!this.selected || this.headingEl?.tagName === `H${this.headingLevel}`)) {
             this.drawer.open = this.narrow && Boolean(this.selected);
             return;
         }
@@ -223,7 +229,7 @@ export class FlowBuilder extends BaseElement {
         this.inspected = this.selected;
         this.renderedRenderer = this.renderer;
         if (this.selected) {
-            const heading = document.createElement("h2");
+            const heading = document.createElement(`h${this.headingLevel}`);
             heading.setAttribute("part", "inspector-heading");
             heading.textContent = nodeTitle(this.selected, this.catalog, this.model);
             this.inspector.append(heading);

package/dist/patterns/flow-builder/model.d.ts

@@ -33,6 +33,8 @@ export interface FlowChildList {
  * (selection, undo, validation paths) is preserved.
  */
 export interface FlowModel<N extends FlowNodeBase = FlowNodeBase> {
+    /** Catalog entry used to draw this node; does not change its document kind. */
+    kind?(node: N): string | undefined;
     /** Nested lists under `node`, in display order. */
     children(node: N): FlowChildList[];
     /** A distinct name for the node; falls back to its kind's label. */

package/dist/patterns/flow-builder/model.js

@@ -8,10 +8,10 @@ export const defaultFlowModel = {
     description: node => node.description,
     status: node => node.status,
 };
-export const nodeTitle = (node, catalog = [], model = defaultFlowModel) => model.title?.(node) || catalog.find(kind => kind.kind === node.kind)?.label || "Step";
-export const nodeDescription = (node, catalog = [], model = defaultFlowModel) => model.description?.(node) || catalog.find(kind => kind.kind === node.kind)?.description || "";
+export const nodeTitle = (node, catalog = [], model = defaultFlowModel) => model.title?.(node) || catalog.find(kind => kind.kind === (model.kind?.(node) ?? node.kind))?.label || "Step";
+export const nodeDescription = (node, catalog = [], model = defaultFlowModel) => model.description?.(node) || catalog.find(kind => kind.kind === (model.kind?.(node) ?? node.kind))?.description || "";
 export function cardLabel(node, catalog = [], invalid = false, model = defaultFlowModel) {
-    const kind = catalog.find(entry => entry.kind === node.kind);
+    const kind = catalog.find(entry => entry.kind === (model.kind?.(node) ?? node.kind));
     const title = nodeTitle(node, catalog, model);
     return [title, kind?.label !== title ? kind?.label : "", nodeDescription(node, catalog, model), model.status?.(node), invalid ? "Needs attention" : ""].filter(Boolean).join(". ");
 }

package/dist/patterns/flow-builder/primitives.d.ts

@@ -46,6 +46,7 @@ export declare class FlowSpine extends BaseElement {
     invalid: FlowNodeBase | null;
     startLabel: string;
     endLabel: string;
+    headingLevel: number;
     private cards;
     protected renderTemplate(): void;
     refresh(): void;

package/dist/patterns/flow-builder/primitives.js

@@ -1,5 +1,5 @@
 import { BaseElement } from "../../core/index.js";
-import { boeFocusVisibleStyles } from "../../foundations/tokens/index.js";
+import { boeFocusVisibleStyles } from "../../foundations/tokens/interaction.js";
 import { cardLabel, defaultFlowModel, insertLabel, nodeDescription, nodeTitle } from "./model.js";
 const styles = `
   :host { display:block; min-width:0; color:var(--boe-token-text-text,#222); font:inherit; }
@@ -36,7 +36,7 @@ export class FlowCard extends BaseElement {
         this.update(); }
     focus(options) { this.shadowRoot?.querySelector("button")?.focus(options); }
     update() {
-        const kind = this.catalog.find(kind => kind.kind === this.node.kind);
+        const kind = this.catalog.find(kind => kind.kind === (this.model.kind?.(this.node) ?? this.node.kind));
         const title = nodeTitle(this.node, this.catalog, this.model);
         const button = this.shadowRoot.querySelector("button");
         button.setAttribute("aria-pressed", String(this.selected));
@@ -148,8 +148,9 @@ export class FlowSpine extends BaseElement {
     invalid = null;
     startLabel = "Flow starts";
     endLabel = "Flow ends";
+    headingLevel = 3;
     cards = new Map();
-    renderTemplate() { this.shadowRoot.innerHTML = `<style>${styles} [part=spine]{display:grid;gap:0;min-width:0} [part=branches]{display:flex;gap:16px;overflow-x:auto;max-width:100%;padding:8px} [part=branch]{flex:1 0 240px;min-width:0} [part=body]{margin:0 0 0 16px;border-inline-start:2px solid var(--boe-token-stroke-stroke,#ddd);padding:8px 12px} [part=endpoint]{text-align:center;font-weight:600;padding:12px} [part=branch-header]{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:1em 0} h3{font:inherit;font-weight:600;margin:0} [part=branch-remove],[part=branch-add]{border:1px solid var(--boe-token-stroke-stroke,#ddd);border-radius:16px;background:var(--boe-token-surface-surface,#fff);padding:4px 10px} [part=branch-add]{justify-self:center;margin:4px 0}</style><div part="spine"></div>`; }
+    renderTemplate() { this.shadowRoot.innerHTML = `<style>${styles} [part=spine]{display:grid;gap:0;min-width:0} [part=branches]{display:flex;gap:16px;overflow-x:auto;max-width:100%;padding:8px} [part=branch]{flex:1 0 240px;min-width:0} [part=body]{margin:0 0 0 16px;border-inline-start:2px solid var(--boe-token-stroke-stroke,#ddd);padding:8px 12px} [part=endpoint]{text-align:center;font-weight:600;padding:12px} [part=branch-header]{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:1em 0} [part=branch-label]{font:inherit;font-weight:600;margin:0} [part=branch-remove],[part=branch-add]{border:1px solid var(--boe-token-stroke-stroke,#ddd);border-radius:16px;background:var(--boe-token-surface-surface,#fff);padding:4px 10px} [part=branch-add]{justify-self:center;margin:4px 0}</style><div part="spine"></div>`; }
     refresh() { if (this.isRendered)
         this.update(); }
     /** Re-render one card after its fields change, without rebuilding the spine. */
@@ -208,7 +209,7 @@ export class FlowSpine extends BaseElement {
                         column.setAttribute("aria-label", label);
                         const header = document.createElement("div");
                         header.setAttribute("part", "branch-header");
-                        const heading = document.createElement("h3");
+                        const heading = document.createElement(`h${this.headingLevel}`);
                         heading.setAttribute("part", "branch-label");
                         heading.textContent = label;
                         header.append(heading);

package/dist/patterns/governance/governance-panel.js

@@ -1,6 +1,6 @@
 import { BaseElement } from "../../core/index.js";
 import { boePanel } from "../../foundations/geometry/index.js";
-import { boeBrandInteractiveStyles, boeNeutralInteractiveStyles, } from "../../foundations/tokens/index.js";
+import { boeBrandInteractiveStyles, boeNeutralInteractiveStyles, } from "../../foundations/tokens/interaction.js";
 const DEFAULT_TAG_NAME = "box-governance-panel";
 const escapeHtml = (value) => value
     .replaceAll("&", "&")

package/dist/patterns/insights/chart-panel.js

@@ -1,6 +1,6 @@
 import { BaseElement } from "../../core/index.js";
 import { boePanel } from "../../foundations/geometry/index.js";
-import { boeBrandInteractiveStyles, boeNeutralInteractiveStyles, } from "../../foundations/tokens/index.js";
+import { boeBrandInteractiveStyles, boeNeutralInteractiveStyles, } from "../../foundations/tokens/interaction.js";
 const DEFAULT_TAG_NAME = "box-chart-panel";
 const escapeHtml = (value) => value
     .replaceAll("&", "&")

package/dist/patterns/insights/metric-card.js

@@ -1,6 +1,6 @@
 import { BaseElement } from "../../core/index.js";
 import { boePanel } from "../../foundations/geometry/index.js";
-import { boeBrandInteractiveStyles, boeNeutralInteractiveStyles, } from "../../foundations/tokens/index.js";
+import { boeBrandInteractiveStyles, boeNeutralInteractiveStyles, } from "../../foundations/tokens/interaction.js";
 const DEFAULT_TAG_NAME = "box-metric-card";
 const escapeHtml = (value) => value
     .replaceAll("&", "&")
@@ -39,7 +39,7 @@ const elementStyles = `
           font-size: 0.76rem;
           font-weight: 700;
           letter-spacing: 0.08em;
-          text-transform: uppercase;
+          text-transform: none;
           color: var(--boe-token-text-text-secondary, #6f6f6f);
         }
 
@@ -68,7 +68,7 @@ const elementStyles = `
           font-size: 0.74rem;
           font-weight: 700;
           letter-spacing: 0.05em;
-          text-transform: uppercase;
+          text-transform: none;
         }
 
         [part="value"] {

package/dist/patterns/item/bulk-action-bar.js

@@ -1,6 +1,6 @@
 import { BaseElement } from "../../core/index.js";
 import { applyRovingTabindex, handleRovingKeydown } from "../../foundations/a11y/index.js";
-import { boeNeutralInteractiveStyles } from "../../foundations/tokens/index.js";
+import { boeNeutralInteractiveStyles } from "../../foundations/tokens/interaction.js";
 import { boeMotionDuration, boeMotionEasing } from "../../foundations/motion/index.js";
 import { boePanel } from "../../foundations/geometry/index.js";
 const DEFAULT_TAG_NAME = "box-bulk-action-bar";

package/dist/patterns/item/item-details-panel.js

@@ -1,6 +1,6 @@
 import { BaseElement } from "../../core/index.js";
 import { boePanel, boeRadius } from "../../foundations/geometry/index.js";
-import { boeBrandInteractiveStyles, boeNeutralInteractiveStyles, } from "../../foundations/tokens/index.js";
+import { boeBrandInteractiveStyles, boeNeutralInteractiveStyles, } from "../../foundations/tokens/interaction.js";
 const DEFAULT_TAG_NAME = "box-item-details-panel";
 const escapeHtml = (value) => value
     .replaceAll("&", "&")

package/dist/patterns/item/item-form.js

@@ -1,6 +1,6 @@
 import { BaseElement } from "../../core/index.js";
 import { boePanel, boeRadius } from "../../foundations/geometry/index.js";
-import { boeBrandInteractiveStyles, boeFocusVisibleStyles, boeNeutralInteractiveStyles, } from "../../foundations/tokens/index.js";
+import { boeBrandInteractiveStyles, boeFocusVisibleStyles, boeNeutralInteractiveStyles, } from "../../foundations/tokens/interaction.js";
 const DEFAULT_TAG_NAME = "box-item-form";
 const escapeHtml = (value) => value
     .replaceAll("&", "&")

package/dist/patterns/item/preview-header.js

@@ -1,6 +1,6 @@
 import { BaseElement } from "../../core/index.js";
 import { boePanel } from "../../foundations/geometry/index.js";
-import { boeBrandInteractiveStyles, boeNeutralInteractiveStyles, } from "../../foundations/tokens/index.js";
+import { boeBrandInteractiveStyles, boeNeutralInteractiveStyles, } from "../../foundations/tokens/interaction.js";
 const DEFAULT_TAG_NAME = "box-preview-header";
 const escapeHtml = (value) => value
     .replaceAll("&", "&")

package/dist/patterns/metadata/metadata-filter-builder.js

@@ -1,5 +1,5 @@
 import { BaseElement } from "../../core/index.js";
-import { boeNeutralInteractiveStyles } from "../../foundations/tokens/index.js";
+import { boeNeutralInteractiveStyles } from "../../foundations/tokens/interaction.js";
 import { boePanel, boeRadius } from "../../foundations/geometry/index.js";
 const DEFAULT_TAG_NAME = "box-metadata-filter-builder";
 const escapeHtml = (value) => value

package/dist/patterns/metadata/metadata-inspector.js

@@ -1,5 +1,5 @@
 import { BaseElement } from "../../core/index.js";
-import { boeNeutralInteractiveStyles } from "../../foundations/tokens/index.js";
+import { boeNeutralInteractiveStyles } from "../../foundations/tokens/interaction.js";
 import { boePanel } from "../../foundations/geometry/index.js";
 const DEFAULT_TAG_NAME = "box-metadata-inspector";
 const escapeHtml = (value) => value

package/dist/patterns/preview/annotation-inspector.js

@@ -1,6 +1,6 @@
 import { BaseElement } from "../../core/index.js";
 import { boePanel, boeRadius } from "../../foundations/geometry/index.js";
-import { boeBrandInteractiveStyles, boeNeutralInteractiveStyles, } from "../../foundations/tokens/index.js";
+import { boeBrandInteractiveStyles, boeNeutralInteractiveStyles, } from "../../foundations/tokens/interaction.js";
 const DEFAULT_TAG_NAME = "box-annotation-inspector";
 const escapeHtml = (value) => value
     .replaceAll("&", "&")

package/dist/patterns/preview/annotation-toolbar.js

@@ -1,7 +1,7 @@
 import { BaseElement } from "../../core/index.js";
 import { applyRovingTabindex, handleRovingKeydown } from "../../foundations/a11y/index.js";
 import { boePanel, boeRadius } from "../../foundations/geometry/index.js";
-import { boeBrandInteractiveStyles, boeNeutralInteractiveStyles, } from "../../foundations/tokens/index.js";
+import { boeBrandInteractiveStyles, boeNeutralInteractiveStyles, } from "../../foundations/tokens/interaction.js";
 const DEFAULT_TAG_NAME = "box-annotation-toolbar";
 const escapeHtml = (value) => value
     .replaceAll("&", "&")

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

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

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

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

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

@@ -0,0 +1,95 @@
+import type { FlowKind, NodePath } from "../flow-builder/model.js";
+export interface ProcessBox<N = unknown> {
+    id: string;
+    node: N;
+    kind: string;
+    title: string;
+    description?: string;
+    path?: NodePath;
+    /** A frame draws behind its children and connects as one box. */
+    frame?: boolean;
+    parentId?: string;
+}
+export interface ProcessLine {
+    id: string;
+    from: string;
+    to: string;
+    label?: string;
+    dashed?: boolean;
+    points?: {
+        x: number;
+        y: number;
+    }[];
+}
+export interface ProcessProjection<N = unknown> {
+    boxes: readonly ProcessBox<N>[];
+    lines: readonly ProcessLine[];
+}
+export interface ProcessModel<D = unknown, N = unknown> {
+    project(document: D): ProcessProjection<N>;
+}
+export interface BoxPosition {
+    x: number;
+    y: number;
+    width?: number;
+    height?: number;
+}
+export interface ProcessLayout {
+    boxes: Record<string, BoxPosition>;
+    notes?: {
+        id: string;
+        text: string;
+        x: number;
+        y: number;
+    }[];
+    sections?: {
+        id: string;
+        title: string;
+        x: number;
+        y: number;
+        width: number;
+        height: number;
+    }[];
+    lines?: Record<string, {
+        x: number;
+        y: number;
+    }[]>;
+}
+export interface ProcessCheck {
+    message: string;
+    boxId?: string;
+    path?: NodePath;
+}
+export interface ProcessEdit {
+    type: "add" | "delete" | "connect" | "disconnect" | "insert";
+    boxId?: string;
+    from?: string;
+    to?: string;
+    lineId?: string;
+    kind?: FlowKind;
+    position?: BoxPosition;
+}
+export interface ReversibleProcessEdit {
+    undo(): void;
+    redo(): void;
+}
+/** Host applies the edit, then calls accept with its inverse and replay. */
+export interface ProcessEditRequest extends ProcessEdit {
+    accept(command: ReversibleProcessEdit): void;
+}
+export declare function validateProjection<N>(projection: ProcessProjection<N>): void;
+/** Deterministic fallback, preserving host-authored positions. */
+export declare function completeLayout<N>(projection: ProcessProjection<N>, layout: ProcessLayout): ProcessLayout;
+/** Bounded history shared by layout edits and host-accepted document commands. */
+export declare class ProcessHistory {
+    private replayingInternal;
+    private past;
+    private future;
+    get canUndo(): boolean;
+    get canRedo(): boolean;
+    get replaying(): boolean;
+    record(command: ReversibleProcessEdit): void;
+    undo(): void;
+    redo(): void;
+    clear(): void;
+}

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

@@ -0,0 +1,113 @@
+export function validateProjection(projection) {
+    const ids = new Set();
+    for (const box of projection.boxes) {
+        if (!box.id || ids.has(box.id))
+            throw new TypeError("Process boxes need unique non-empty IDs");
+        ids.add(box.id);
+    }
+    for (const box of projection.boxes) {
+        const ancestors = new Set([box.id]);
+        let parent = box.parentId;
+        while (parent) {
+            const frame = projection.boxes.find((candidate) => candidate.id === parent);
+            if (!frame?.frame || ancestors.has(parent))
+                throw new TypeError("Frame parents must exist and cannot form a cycle");
+            ancestors.add(parent);
+            parent = frame.parentId;
+        }
+    }
+    const lines = new Set();
+    for (const line of projection.lines) {
+        if (!line.id ||
+            lines.has(line.id) ||
+            !ids.has(line.from) ||
+            !ids.has(line.to))
+            throw new TypeError("Process lines need unique IDs and existing endpoints");
+        lines.add(line.id);
+    }
+}
+/** Deterministic fallback, preserving host-authored positions. */
+export function completeLayout(projection, layout) {
+    const boxes = { ...layout.boxes };
+    const sizes = new Map();
+    const measure = (box) => {
+        const children = projection.boxes
+            .filter((child) => child.parentId === box.id)
+            .map(measure);
+        const size = {
+            width: Math.max(box.frame ? 320 : 220, ...children.map((child) => child.width + 40)),
+            height: box.frame
+                ? Math.max(180, 64 + children.reduce((sum, child) => sum + child.height + 24, 0))
+                : 96,
+        };
+        sizes.set(box.id, size);
+        return size;
+    };
+    const roots = projection.boxes.filter((box) => !box.parentId);
+    roots.forEach(measure);
+    const place = (siblings, x, top) => {
+        let y = top;
+        for (const box of siblings) {
+            const size = sizes.get(box.id);
+            boxes[box.id] ??= { x, y, ...size };
+            const position = boxes[box.id];
+            place(projection.boxes.filter((child) => child.parentId === box.id), position.x + 20, position.y + 64);
+            y += (position.height ?? size.height) + 60;
+        }
+    };
+    place(roots, 40, 40);
+    return { ...layout, boxes };
+}
+/** Bounded history shared by layout edits and host-accepted document commands. */
+export class ProcessHistory {
+    replayingInternal = false;
+    past = [];
+    future = [];
+    get canUndo() {
+        return this.past.length > 0;
+    }
+    get canRedo() {
+        return this.future.length > 0;
+    }
+    get replaying() {
+        return this.replayingInternal;
+    }
+    record(command) {
+        this.past.push(command);
+        if (this.past.length > 100)
+            this.past.shift();
+        this.future = [];
+    }
+    undo() {
+        const command = this.past.at(-1);
+        if (!command)
+            return;
+        this.replayingInternal = true;
+        try {
+            command.undo();
+        }
+        finally {
+            this.replayingInternal = false;
+        }
+        this.past.pop();
+        this.future.push(command);
+    }
+    redo() {
+        const command = this.future.at(-1);
+        if (!command)
+            return;
+        this.replayingInternal = true;
+        try {
+            command.redo();
+        }
+        finally {
+            this.replayingInternal = false;
+        }
+        this.future.pop();
+        this.past.push(command);
+    }
+    clear() {
+        this.past = [];
+        this.future = [];
+    }
+}

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

@@ -0,0 +1,82 @@
+import { BaseElement } from "../../core/index.js";
+import type { FlowKind, NodePath } from "../flow-builder/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 {
+    static readonly tagName = "box-process-modeler";
+    static get observedAttributes(): string[];
+    private documentValue?;
+    private modelValue;
+    private projection;
+    private layoutValue;
+    private catalogValue;
+    private selectedId;
+    private connecting;
+    private checks;
+    private renderer?;
+    private cleanupInspector?;
+    private inspected?;
+    private inspectedId?;
+    private historyValue;
+    private viewport;
+    private pointers;
+    private drag?;
+    private pinchDistance;
+    private gestureZoom;
+    get document(): D | undefined;
+    get history(): ProcessHistory;
+    set history(value: ProcessHistory);
+    set document(value: D | undefined);
+    get model(): ProcessModel<D, N>;
+    set model(value: ProcessModel<D, N>);
+    get layout(): ProcessLayout;
+    set layout(value: ProcessLayout);
+    get catalog(): readonly FlowKind[];
+    set catalog(value: readonly FlowKind[]);
+    get locked(): boolean;
+    set locked(value: boolean);
+    get snapToGrid(): boolean;
+    set snapToGrid(value: boolean);
+    get selected(): ProcessBox<N> | null;
+    get renderInspector(): ((node: N, container: HTMLElement) => void | (() => void)) | undefined;
+    set renderInspector(value: ((node: N, container: HTMLElement) => void | (() => void)) | undefined);
+    disconnectedCallback(): void;
+    refresh(): void;
+    select(id: string | null): void;
+    setValidation(checks: readonly ProcessCheck[]): void;
+    setValidationAtPath(message: string, path: NodePath): void;
+    requestEdit(edit: ProcessEdit): void;
+    undo(): void;
+    redo(): void;
+    private commitLayout;
+    move(id: string, x: number, y: number): void;
+    private translatedLayout;
+    tidy(): void;
+    resize(id: string, width: number, height: number): void;
+    routeLine(id: string, points: readonly {
+        x: number;
+        y: number;
+    }[]): 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;
+    protected setupListeners(): void;
+    private onKey;
+    private pointerDown;
+    private distance;
+    private pointerMove;
+    private pointerEnd;
+    protected update(): void;
+    private renderWorld;
+    private place;
+    private renderPalette;
+    private renderChecks;
+    private renderSelection;
+    private updateToolbar;
+    private paintViewport;
+    private focusBox;
+    private setStatus;
+}