@unofficialbox/box-open-elements 0.28.7 → 0.29.1

package/dist/native-types.js

@@ -0,0 +1 @@
+export {};

package/dist/patterns/form-wizard/form-wizard.d.ts

@@ -1,6 +1,14 @@
 import { FormWizardController } from "./controller.js";
-import type { WizardStepConfig, WizardStepValidator, WizardStepStatus } from "./types.js";
+import type { WizardEvents, WizardStepConfig, WizardStepValidator, WizardStepStatus } from "./types.js";
 import { BaseElement } from "../../core/index.js";
+/** DOM event payloads forwarded from the wizard controller. */
+export interface FormWizardEventDetails {
+    "step-changed": WizardEvents["stepChanged"];
+    "values-changed": WizardEvents["valuesChanged"];
+    "step-invalid": WizardEvents["stepInvalid"];
+    "draft-saved": WizardEvents["draftSaved"];
+    submitted: WizardEvents["submitted"];
+}
 export declare class FormWizard extends BaseElement {
     static readonly tagName: string;
     static get observedAttributes(): string[];

package/dist/patterns/insights/box-plot.d.ts

@@ -0,0 +1,55 @@
+import { BaseElement } from "../../core/index.js";
+export interface BoxPlotRow {
+    id: string;
+    label: string;
+    min: number;
+    p5?: number;
+    q1: number;
+    median: number;
+    q3: number;
+    p95?: number;
+    p99?: number;
+    max: number;
+    mean?: number;
+    count?: number;
+    samples?: number[];
+    reference?: number;
+}
+export type BoxPlotWhiskers = "min-max" | "p5-p95" | "p5-p99";
+export type BoxPlotScale = "linear" | "log";
+export type BoxPlotOrientation = "horizontal" | "vertical";
+export declare function boxPlotWhiskerValues(row: BoxPlotRow, whiskers: BoxPlotWhiskers): [number, number];
+export declare function validBoxPlotRow(row: BoxPlotRow, scale: BoxPlotScale): boolean;
+export interface BoxPlotDomain {
+    min: number;
+    max: number;
+    ticks: number[];
+}
+export declare function boxPlotDomain(rows: BoxPlotRow[], scale: BoxPlotScale): BoxPlotDomain;
+export declare function boxPlotPosition(value: number, domain: BoxPlotDomain, scale: BoxPlotScale): number;
+/** Distribution chart for host-computed summary statistics. Invalid rows are omitted. */
+export declare class BoxPlot extends BaseElement {
+    static readonly tagName = "box-box-plot";
+    static get observedAttributes(): string[];
+    private _rows;
+    private _formatter;
+    private tableVisible;
+    get heading(): string;
+    set heading(value: string);
+    get description(): string;
+    set description(value: string);
+    get rows(): BoxPlotRow[];
+    set rows(value: BoxPlotRow[]);
+    get orientation(): BoxPlotOrientation;
+    set orientation(value: BoxPlotOrientation);
+    get scale(): BoxPlotScale;
+    set scale(value: BoxPlotScale);
+    get whiskers(): BoxPlotWhiskers;
+    set whiskers(value: BoxPlotWhiskers);
+    get unit(): string;
+    set unit(value: string);
+    get format(): (value: number) => string;
+    set format(value: (value: number) => string);
+    protected renderTemplate(): void;
+    protected update(): void;
+}

package/dist/patterns/insights/box-plot.js

@@ -0,0 +1,201 @@
+import { BaseElement } from "../../core/index.js";
+const escapeHtml = (value) => value.replaceAll("&", "&amp;").replaceAll("<", "&lt;")
+    .replaceAll(">", "&gt;").replaceAll('"', "&quot;").replaceAll("'", "&#39;");
+const finite = (value) => typeof value === "number" && Number.isFinite(value);
+const round = (value) => Math.round(value * 1000) / 1000;
+export function boxPlotWhiskerValues(row, whiskers) {
+    if (whiskers === "p5-p95" && row.p5 !== undefined && row.p95 !== undefined)
+        return [row.p5, row.p95];
+    if (whiskers === "p5-p99" && row.p5 !== undefined && row.p99 !== undefined)
+        return [row.p5, row.p99];
+    return [row.min, row.max];
+}
+const whiskerLabel = (row, whiskers) => {
+    if (whiskers === "p5-p95" && row.p5 !== undefined && row.p95 !== undefined)
+        return "5% to 95%";
+    if (whiskers === "p5-p99" && row.p5 !== undefined && row.p99 !== undefined)
+        return "5% to 99%";
+    return "minimum to maximum";
+};
+export function validBoxPlotRow(row, scale) {
+    if (!row || typeof row.id !== "string" || !row.id.trim() || typeof row.label !== "string" || !row.label.trim())
+        return false;
+    const values = [row.min, row.q1, row.median, row.q3, row.max];
+    if (!values.every(finite) || values.some(value => scale === "log" && value <= 0))
+        return false;
+    if (!(row.min <= row.q1 && row.q1 <= row.median && row.median <= row.q3 && row.q3 <= row.max))
+        return false;
+    for (const value of [row.p5, row.p95, row.p99, row.mean, row.reference]) {
+        if (value !== undefined && (!finite(value) || (scale === "log" && value <= 0)))
+            return false;
+    }
+    if (row.p5 !== undefined && !(row.min <= row.p5 && row.p5 <= row.q1))
+        return false;
+    if (row.p95 !== undefined && !(row.q3 <= row.p95 && row.p95 <= row.max))
+        return false;
+    if (row.p99 !== undefined && (row.p95 ?? row.q3) > row.p99)
+        return false;
+    if (row.p99 !== undefined && row.p99 > row.max)
+        return false;
+    if (row.mean !== undefined && (row.mean < row.min || row.mean > row.max))
+        return false;
+    if (row.count !== undefined && (!Number.isInteger(row.count) || row.count < 0))
+        return false;
+    if (row.samples !== undefined && (!Array.isArray(row.samples) || !row.samples.every(value => finite(value) && value >= row.min && value <= row.max && (scale !== "log" || value > 0))))
+        return false;
+    return true;
+}
+export function boxPlotDomain(rows, scale) {
+    const values = rows.flatMap(row => [row.min, row.max, row.reference, ...((row.samples?.length ?? 0) <= 30 ? row.samples ?? [] : [])].filter(finite));
+    if (!values.length)
+        return { min: scale === "log" ? 1 : 0, max: scale === "log" ? 10 : 1, ticks: scale === "log" ? [1, 10] : [0, 1] };
+    const low = Math.min(...values);
+    const high = Math.max(...values);
+    if (scale === "log") {
+        const min = 10 ** Math.floor(Math.log10(low));
+        const max = 10 ** Math.ceil(Math.log10(high === low ? high * 10 : high));
+        const ticks = Array.from({ length: Math.min(16, Math.round(Math.log10(max / min)) + 1) }, (_, index) => min * 10 ** index);
+        if (ticks.at(-1) !== max)
+            ticks.push(max);
+        return { min, max, ticks };
+    }
+    const span = high - low || Math.abs(high) || 1;
+    const roughStep = span / 4;
+    const magnitude = 10 ** Math.floor(Math.log10(roughStep));
+    const step = [1, 2, 5, 10].map(value => value * magnitude).find(value => value >= roughStep) ?? 10 * magnitude;
+    const min = Math.floor(low / step) * step;
+    const max = Math.ceil((high === low ? high + step : high) / step) * step;
+    const ticks = Array.from({ length: Math.min(12, Math.round((max - min) / step) + 1) }, (_, index) => min + index * step);
+    if (ticks.at(-1) !== max)
+        ticks.push(max);
+    return { min, max, ticks };
+}
+export function boxPlotPosition(value, domain, scale) {
+    const transform = scale === "log" ? Math.log10 : (number) => number;
+    return Math.max(0, Math.min(100, (transform(value) - transform(domain.min)) / (transform(domain.max) - transform(domain.min)) * 100));
+}
+const styles = `
+  :host { display:block; container-type:inline-size; color:var(--boe-token-text-text, #1f1e1b); font:inherit; min-width:0 }
+  :host([hidden]) { display:none !important }
+  [part=panel] { padding:1rem; background:var(--boe-token-surface-surface, #fff); border:1px solid var(--boe-token-stroke-stroke, #dedfe4); border-radius:0.75rem; min-width:0 }
+  [part=header] { display:flex; justify-content:space-between; align-items:start; gap:0.75rem; flex-wrap:wrap; margin-bottom:0.8rem }
+  h2 { margin:0; font:inherit; font-weight:700; font-size:1.05rem }
+  [part=description], [part=note] { color:var(--boe-token-text-text-secondary, #626b7d); font-size:0.82rem; line-height:1.4 }
+  [part=note] { margin:0.3rem 0 0 }
+  button[part=table-toggle] { font:inherit; color:inherit; background:none; border:0; border-radius:0.25rem; cursor:pointer; padding:0.2rem 0.35rem; text-decoration:underline; text-underline-offset:0.2em }
+  button:focus-visible { outline:2px solid var(--boe-token-surface-surface-brand, #0061d5); outline-offset:3px }
+  [part=plot] { display:grid; gap:0.25rem; min-width:0 }
+  [part=axis], [part=row] { display:grid; grid-template-columns:minmax(7rem, 11rem) minmax(0,1fr); gap:0.7rem; align-items:center; min-width:0 }
+  [part=axis] { margin-bottom:0.2rem }
+  [part=ticks] { position:relative; height:1.8rem; color:var(--boe-token-text-text-secondary, #626b7d); font-size:0.72rem }
+  [part=tick] { position:absolute; top:0; transform:translateX(-50%); white-space:nowrap }
+  [part=tick]:first-child { transform:none } [part=tick]:last-child { transform:translateX(-100%) }
+  [part=label] { min-width:0; overflow-wrap:anywhere; font-size:0.82rem; font-weight:600 }
+  [part=row] { border-radius:0.3rem; padding:0.1rem 0 }
+  [part=row]:hover, [part=row]:focus-within { background:var(--boe-token-surface-surface-secondary, #f5f7fb) }
+  [part=mark] { position:relative; appearance:none; display:block; width:100%; height:2.4rem; padding:0; border:0; background:none; cursor:help; color:inherit }
+  [part=mark]:focus-visible { outline:2px solid var(--boe-token-surface-surface-brand, #0061d5); outline-offset:2px }
+  [part=gridline] { position:absolute; top:0; bottom:0; border-left:1px solid var(--boe-boxplot-grid, var(--boe-token-stroke-stroke, #dedfe4)); pointer-events:none }
+  [part=whisker] { position:absolute; top:50%; height:0; border-top:2px solid var(--boe-boxplot-whisker, #68748b); pointer-events:none }
+  [part=cap], [part=median], [part=reference] { position:absolute; top:25%; height:50%; width:2px; transform:translateX(-50%); background:var(--boe-boxplot-whisker, #68748b); pointer-events:none }
+  [part=box] { position:absolute; top:25%; height:50%; box-sizing:border-box; border:2px solid var(--boe-boxplot-edge, #0054bd); border-radius:0.2rem; background:var(--boe-boxplot-fill, #cde2ff); pointer-events:none }
+  [part=median] { top:20%; height:60%; width:3px; background:var(--boe-boxplot-median, #092e68) }
+  [part=reference] { top:8%; height:84%; border-left:2px dashed var(--boe-boxplot-reference, #b54a1b); background:none }
+  [part=dot] { position:absolute; width:0.32rem; height:0.32rem; border-radius:50%; transform:translate(-50%,-50%); background:var(--boe-boxplot-dot, #354668); pointer-events:none }
+  [part=detail] { display:none; position:absolute; z-index:3; left:50%; bottom:100%; transform:translateX(-50%); box-sizing:border-box; width:max-content; max-width:min(14rem, 85vw); max-width:min(14rem, calc(100cqi - 2rem)); padding:0.55rem 0.7rem; border-radius:0.35rem; background:var(--boe-token-surface-surface, #fff); border:1px solid var(--boe-token-stroke-stroke, #dedfe4); box-shadow:0 4px 16px #0002; text-align:left; font-size:0.75rem; line-height:1.5; white-space:normal; overflow-wrap:anywhere; pointer-events:none }
+  [part=mark]:is(:hover,:focus-visible) [part=detail] { display:block }
+  [part=table-wrap] { overflow:auto; max-width:100% } table { border-collapse:collapse; width:100%; font-size:0.8rem } th,td { padding:0.4rem 0.5rem; text-align:left; border-bottom:1px solid var(--boe-token-stroke-stroke, #dedfe4) } th { white-space:nowrap } caption { text-align:left; font-weight:700; padding:0.3rem 0 }
+  [part=table-wrap]:focus-visible { outline:2px solid var(--boe-token-surface-surface-brand, #0061d5); outline-offset:-2px }
+  [part=empty] { padding:1.2rem; color:var(--boe-token-text-text-secondary, #626b7d) }
+  [data-orientation=vertical] [part=plot] { position:relative; box-sizing:border-box; grid-template-columns:repeat(var(--row-count), minmax(0,1fr)); gap:0.4rem; padding-left:3.5rem; max-width:42rem; margin-inline:auto }
+  [data-orientation=vertical] [part=axis] { display:block; position:absolute; top:0; left:0; width:3rem; height:12rem; margin:0 }
+  [data-orientation=vertical] [part=ticks] { height:100% }
+  [data-orientation=vertical] [part=tick], [data-orientation=vertical] [part=tick]:first-child, [data-orientation=vertical] [part=tick]:last-child { left:0 !important; top:auto; bottom:var(--pos); transform:translateY(50%) }
+  [data-orientation=vertical] [part=row] { display:flex; flex-direction:column-reverse; gap:0.3rem; align-items:stretch; min-width:0 }
+  [data-orientation=vertical] [part=label] { text-align:center }
+  [data-orientation=vertical] [part=mark] { height:12rem; width:min(100%, 5.5rem); margin:auto }
+  [data-orientation=vertical] [part=gridline] { top:auto; left:0; right:0; bottom:var(--pos); border-left:0; border-bottom:1px solid var(--boe-boxplot-grid, var(--boe-token-stroke-stroke, #dedfe4)) }
+  [data-orientation=vertical] [part=whisker] { left:50% !important; width:0 !important; border-top:0; border-left:2px solid var(--boe-boxplot-whisker, #68748b); bottom:var(--start); height:var(--size); top:auto }
+  [data-orientation=vertical] [part=box] { left:33% !important; width:34% !important; bottom:var(--start); height:var(--size); top:auto }
+  [data-orientation=vertical] [part=cap], [data-orientation=vertical] [part=median], [data-orientation=vertical] [part=reference] { left:27% !important; width:46%; height:2px; top:auto; bottom:var(--pos); transform:translateY(50%) }
+  [data-orientation=vertical] [part=median] { left:23% !important; width:54%; height:3px }
+  [data-orientation=vertical] [part=reference] { left:16% !important; width:68%; height:0; border-left:0; border-top:2px dashed var(--boe-boxplot-reference, #b54a1b) }
+  [data-orientation=vertical] [part=dot] { left:var(--jitter) !important; bottom:var(--pos); top:auto; transform:translate(-50%,50%) }
+  [data-orientation=vertical] [part=detail] { left:50%; bottom:100% }
+  [data-orientation=vertical] [part=row]:nth-child(2) [part=detail] { left:0; transform:none }
+  [data-orientation=vertical] [part=row]:last-child [part=detail] { left:auto; right:0; transform:none }
+  [data-orientation=vertical] [part=row]:nth-child(2):last-child [part=detail] { left:50%; right:auto; transform:translateX(-50%) }
+  @container (max-width:600px) { [part=panel] { padding:0.75rem } [part=axis], [part=row] { display:block } [part=axis] { padding-top:0.2rem } [part=label] { display:block; margin-bottom:0.1rem } [part=mark] { height:2.6rem } [data-orientation=vertical] [part=plot] { grid-template-columns:repeat(auto-fit, minmax(4.5rem,1fr)) } [data-orientation=vertical] [part=axis] { padding:0 } }
+  @media (prefers-reduced-motion:reduce) { *, *::before, *::after { transition:none !important; animation:none !important } }
+`;
+/** Distribution chart for host-computed summary statistics. Invalid rows are omitted. */
+export class BoxPlot extends BaseElement {
+    static tagName = "box-box-plot";
+    static get observedAttributes() { return ["heading", "description", "rows", "orientation", "scale", "whiskers", "unit"]; }
+    _rows = null;
+    _formatter = null;
+    tableVisible = false;
+    get heading() { return this.getAttribute("heading")?.trim() || "Distribution"; }
+    set heading(value) { this.setAttribute("heading", value); }
+    get description() { return this.getAttribute("description") ?? ""; }
+    set description(value) { this.setAttribute("description", value); }
+    get rows() {
+        if (this._rows)
+            return this._rows;
+        try {
+            const value = JSON.parse(this.getAttribute("rows") ?? "[]");
+            return Array.isArray(value) ? value : [];
+        }
+        catch {
+            return [];
+        }
+    }
+    set rows(value) { this._rows = value; this.update(); }
+    get orientation() { return this.getAttribute("orientation") === "vertical" ? "vertical" : "horizontal"; }
+    set orientation(value) { this.setAttribute("orientation", value); }
+    get scale() { return this.getAttribute("scale") === "log" ? "log" : "linear"; }
+    set scale(value) { this.setAttribute("scale", value); }
+    get whiskers() {
+        const value = this.getAttribute("whiskers");
+        return value === "p5-p95" || value === "p5-p99" ? value : "min-max";
+    }
+    set whiskers(value) { this.setAttribute("whiskers", value); }
+    get unit() { return this.getAttribute("unit") ?? ""; }
+    set unit(value) { this.setAttribute("unit", value); }
+    get format() { return this._formatter ?? ((value) => `${new Intl.NumberFormat(undefined, { maximumSignificantDigits: 4 }).format(value)}${this.unit ? ` ${this.unit}` : ""}`); }
+    set format(value) { this._formatter = value; this.update(); }
+    renderTemplate() { if (this.shadowRoot)
+        this.shadowRoot.innerHTML = `<style>${styles}</style><div part="content-host"></div>`; }
+    update() {
+        const host = this.shadowRoot?.querySelector('[part="content-host"]');
+        if (!host)
+            return;
+        const focusedId = this.shadowRoot?.activeElement?.getAttribute("data-row-id");
+        const rows = this.rows.filter(row => validBoxPlotRow(row, this.scale));
+        const domain = boxPlotDomain(rows, this.scale);
+        const span = domain.max - domain.min;
+        const digits = span < 1 ? Math.min(12, Math.max(2, 1 - Math.floor(Math.log10(span)))) : 2;
+        const defaultFormatter = new Intl.NumberFormat(undefined, { maximumFractionDigits: digits });
+        const formatValue = this._formatter ?? ((value) => `${defaultFormatter.format(value)}${this.unit ? ` ${this.unit}` : ""}`);
+        const fmt = (value) => escapeHtml(String(formatValue(value)));
+        const position = (value) => round(boxPlotPosition(value, domain, this.scale));
+        const range = (start, end) => `--start:${position(start)}%;--size:${round(position(end) - position(start))}%`;
+        const heading = escapeHtml(this.heading);
+        const ticks = domain.ticks.map(value => `<span part="tick" style="left:${position(value)}%;--pos:${position(value)}%">${fmt(value)}</span>`).join("");
+        const grid = domain.ticks.map(value => `<span part="gridline" style="left:${position(value)}%;--pos:${position(value)}%"></span>`).join("");
+        const marks = rows.map(row => {
+            const [low, high] = boxPlotWhiskerValues(row, this.whiskers);
+            const summary = `${row.label}: median ${formatValue(row.median)}, middle half ${formatValue(row.q1)} to ${formatValue(row.q3)}, ${whiskerLabel(row, this.whiskers)} ${formatValue(low)} to ${formatValue(high)}, minimum ${formatValue(row.min)}, maximum ${formatValue(row.max)}${row.count === undefined ? "" : `, ${new Intl.NumberFormat().format(row.count)} calls`}${row.mean === undefined ? "" : `, mean ${formatValue(row.mean)}`}${row.reference === undefined ? "" : `, reference ${formatValue(row.reference)}`}`;
+            const dots = (row.samples?.length ?? 0) <= 30 ? (row.samples ?? []).map((value, index) => `<span part="dot" style="left:${position(value)}%;top:${38 + (index % 5) * 6}%;--pos:${position(value)}%;--jitter:${35 + (index % 5) * 7}%"></span>`).join("") : "";
+            const caps = [low, high].map(value => `<span part="cap" style="left:${position(value)}%;--pos:${position(value)}%"></span>`).join("");
+            return `<div part="row"><span part="label">${escapeHtml(row.label)}</span><div tabindex="0" role="img" part="mark" data-row-id="${escapeHtml(row.id)}" aria-label="${escapeHtml(summary)}">${grid}<span part="whisker" style="left:${position(low)}%;width:${round(position(high) - position(low))}%;${range(low, high)}"></span>${caps}<span part="box" style="left:${position(row.q1)}%;width:${round(position(row.q3) - position(row.q1))}%;${range(row.q1, row.q3)}"></span><span part="median" style="left:${position(row.median)}%;--pos:${position(row.median)}%"></span>${row.reference === undefined ? "" : `<span part="reference" style="left:${position(row.reference)}%;--pos:${position(row.reference)}%"></span>`}${dots}<span part="detail" aria-hidden="true">${escapeHtml(summary)}</span></div></div>`;
+        }).join("");
+        const tableRows = rows.map(row => `<tr><th scope="row">${escapeHtml(row.label)}</th>${[row.min, row.p5, row.q1, row.median, row.q3, row.p95, row.p99, row.max, row.mean, row.reference].map(value => `<td>${value === undefined ? "—" : fmt(value)}</td>`).join("")}<td>${row.count === undefined ? "—" : new Intl.NumberFormat().format(row.count)}</td></tr>`).join("");
+        host.innerHTML = `<section part="panel" data-orientation="${this.orientation}" aria-label="${heading}" style="--row-count:${Math.max(1, rows.length)}"><header part="header"><div><h2>${heading}</h2>${this.description ? `<div part="description">${escapeHtml(this.description)}</div>` : ""}<p part="note">Box: middle 50%; line: median; whiskers: ${this.whiskers === "min-max" ? "minimum–maximum" : this.whiskers === "p5-p95" ? "5th–95th percentile" : "5th–99th percentile"}${this.whiskers === "min-max" ? "" : " (missing percentiles use minimum–maximum)"}. ${this.scale === "log" ? "Logarithmic scale." : "Linear scale."}</p></div><button part="table-toggle" type="button" aria-expanded="${this.tableVisible}" aria-controls="${this.tableVisible ? "boxplot-table" : "boxplot-chart"}">${this.tableVisible ? "Show chart" : "Show as a table"}</button></header>${this.tableVisible ? `<div part="table-wrap" id="boxplot-table" role="region" aria-label="${heading} data table" tabindex="0"><table><caption>${heading}</caption><thead><tr>${["Row", "Min", "5%", "25%", "Median", "75%", "95%", "99%", "Max", "Mean", "Reference", "Count"].map(label => `<th scope="col">${label}</th>`).join("")}</tr></thead><tbody>${tableRows}</tbody></table></div>` : rows.length ? `<div part="plot" id="boxplot-chart" role="group" aria-label="${heading}"><div part="axis" aria-hidden="true"><span></span><div part="ticks">${ticks}</div></div>${marks}</div>` : `<div part="empty" id="boxplot-chart">No valid distribution rows to display.</div>`}</section>`;
+        host.querySelector('[part="table-toggle"]')?.addEventListener("click", () => { this.tableVisible = !this.tableVisible; this.update(); this.shadowRoot?.querySelector('[part="table-toggle"]')?.focus(); });
+        if (focusedId)
+            this.shadowRoot?.querySelectorAll('[part="mark"]').forEach(mark => { if (mark.dataset.rowId === focusedId)
+                mark.focus(); });
+    }
+}
+BoxPlot.register();

package/dist/patterns/insights/index.d.ts

@@ -3,3 +3,4 @@ export * from "./chart-panel.js";
 export * from "./bar-chart.js";
 export * from "./line-chart.js";
 export * from "./donut-chart.js";
+export * from "./box-plot.js";

package/dist/patterns/insights/index.js

@@ -3,3 +3,4 @@ export * from "./chart-panel.js";
 export * from "./bar-chart.js";
 export * from "./line-chart.js";
 export * from "./donut-chart.js";
+export * from "./box-plot.js";

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

@@ -1,2 +1,2 @@
 /** Riptide Diagram anatomy expressed through public Box Open Elements tokens. */
-export declare const processModelerDesign = "\n  :host([hidden]), [hidden] { display: none !important; }\n  *, *::before, *::after { box-sizing: border-box; }\n  button, input, textarea, select { font: inherit; color: inherit; }\n  button { min-height: 36px; padding: 8px; border: 1px solid var(--boe-token-stroke-stroke, #e8e8e8); border-radius: 8px; background: var(--boe-token-surface-surface, #fff); cursor: pointer; }\n  button:disabled { opacity: .5; cursor: default; }\n  :is(button,input,textarea,select,[part=canvas],[part=minimap],[part=box],[part=frame]):focus-visible { outline: 2px solid var(--boe-token-surface-surface-brand, #0061d5); outline-offset: 2px; }\n  :host {\n    display: block;\n    position: relative;\n    isolation: isolate;\n    min-width: 0;\n    --boe-process-box-edge: color-mix(in srgb, var(--boe-token-text-text, #141413) 55%, var(--boe-token-surface-surface, #fff));\n    color: var(--boe-token-text-text, #141413);\n    background: var(--boe-token-surface-surface, #fff);\n    font: 14px/1.5 var(--boe-token-font-family-base, Inter, sans-serif);\n  }\n  [part=sr-only], [part=status], [part=urgent-status] { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }\n  [part=toolbar] {\n    min-height: 56px;\n    margin: 0;\n    padding: 8px 16px;\n    display: flex;\n    align-items: center;\n    justify-content: flex-end;\n    gap: 8px;\n    flex-wrap: wrap;\n    border-bottom: 1px solid var(--boe-token-stroke-stroke, #e8e8e8);\n    background: var(--boe-token-surface-surface, #fff);\n  }\n  [part=toolbar] button, [part=controls] button, [part=selection-toolbar] button {\n    min-height: 30px;\n    padding: 4px 10px;\n    border: 1px solid transparent;\n    border-radius: 8px;\n    background: transparent;\n    font-size: 13px;\n    font-weight: 600;\n  }\n  [part=toolbar] svg, [part=controls] svg { width: 16px; height: 16px; display: block; }\n  [part=toolbar] [data-command=undo], [part=toolbar] [data-command=redo], [part=controls] button:not([data-command=reset]) { width: 30px; height: 30px; padding: 6px; display: grid; place-items: center; }\n  [part=controls] [data-command=snap][aria-pressed=true], [part=controls] [data-command=lock][aria-pressed=true] { background: color-mix(in srgb, var(--boe-token-surface-surface-brand, #0061d5) 10%, var(--boe-token-surface-surface, #fff)); color: var(--boe-token-surface-surface-brand, #0061d5); }\n  [part=toolbar] button:hover, [part=controls] button:hover, [part=selection-toolbar] button:hover {\n    background: var(--boe-token-surface-surface-hover, #f4f4f4);\n  }\n  [part=toolbar] [data-command=tidy] { border-color: var(--boe-token-stroke-stroke, #e8e8e8); border-radius: 18px; }\n  [part=view-switch] { display: flex; gap: 2px; padding: 3px; border: 1px solid var(--boe-token-stroke-stroke, #e8e8e8); border-radius: 20px; }\n  [part=view-switch] button { border-radius: 16px; }\n  [part=view-switch] button[aria-pressed=true] { border-color: var(--boe-token-stroke-stroke, #e8e8e8); background: var(--boe-token-surface-surface, #fff); }\n  [part=run-toggle] { display: flex; align-items: center; gap: 8px; white-space: nowrap; font-size: 13px; font-weight: 600; cursor: pointer; }\n  [part=run-toggle] input { appearance: none; position: relative; width: 32px; height: 18px; margin: 0; border: 0; border-radius: 9px; background: var(--boe-token-surface-surface-hover, #f4f4f4); cursor: pointer; transition: background var(--boe-profile-motion-interactive, 200ms) ease-out; }\n  [part=run-toggle] input::after { content: ''; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%; background: var(--boe-token-surface-surface, #fff); box-shadow: 0 1px 2px rgb(0 0 0 / .25); transition: transform var(--boe-profile-motion-interactive, 200ms) ease-out; }\n  [part=run-toggle] input:checked { background: var(--boe-token-surface-surface-brand, #0061d5); }\n  [part=run-toggle] input:checked::after { transform: translateX(14px); }\n  [part=run-toggle] input:focus-visible { outline: 2px solid var(--boe-token-surface-surface-brand, #0061d5); outline-offset: 2px; }\n  [part=toolbar] [data-command=checks-status] { white-space: nowrap; color: var(--boe-token-text-text-secondary, #6f6f6f); }\n  [part=toolbar] [data-command=checks-status][data-state=bad] { color: var(--boe-token-text-status-text-error, #b92340); }\n  [part=view-menu] { display: none; position: relative; }\n  [part=view-menu] summary { list-style: none; padding: 4px 14px; border: 1px solid var(--boe-token-stroke-stroke, #e8e8e8); border-radius: 18px; font-size: 13px; font-weight: 600; cursor: pointer; }\n  [part=view-menu][open] { z-index: 20; }\n  [part=view-menu-options] { position: absolute; z-index: 20; top: calc(100% + 4px); left: 0; width: 192px; padding: 6px; border: 1px solid var(--boe-token-stroke-stroke, #e8e8e8); border-radius: 10px; background: var(--boe-token-surface-surface, #fff); box-shadow: var(--boe-shadow-overlay, 0 4px 12px rgb(0 0 0 / .16)); }\n  [part=view-menu] button { display: block; width: 100%; text-align: start; background: transparent; }\n  [part=layout] {\n    display: grid;\n    grid-template-columns: 248px minmax(0, 1fr) 320px;\n    gap: 0;\n    min-height: 0;\n    height: var(--boe-process-height, 660px);\n    overflow: hidden;\n  }\n  [part=pane-drawer] { display: contents; color: inherit; }\n  [part=canvas-stack] { display: grid; grid-template-rows: auto minmax(0, 1fr); min-width: 0; min-height: 0; }\n  /* The hidden hold leaves row 1 empty. Keep the canvas in the flexible row\n     explicitly; auto-placement otherwise puts its absolute world in a 0px row. */\n  [part=canvas-stack] > [part=hold] { grid-row: 1; }\n  [part=canvas-stack] > [part=canvas] { grid-row: 2; }\n  [part=insert-chooser]::backdrop { background: rgb(0 0 0 / .45); }\n  [part=pane-scrim] { position: absolute; inset: 0; z-index: 30; background: rgb(0 0 0 / .45); }\n  [part=pane-title], [part=pane-close], [data-command=palette], [data-command=details] { display: none; }\n  [part=palette], [part=inspector] {\n    min-width: 0;\n    overflow: auto;\n    padding: 12px;\n    border: 0;\n    border-radius: 0;\n    background: var(--boe-token-surface-surface, #fff);\n  }\n  [part=palette] { display: flex; flex-direction: column; gap: 12px; border-right: 1px solid var(--boe-token-stroke-stroke, #e8e8e8); }\n  [part=palette-heading] { margin: 0 4px; font-size: 14px; font-weight: 650; line-height: 20px; }\n  [part=skip-link] { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }\n  [part=skip-link]:focus-visible { position: static; width: auto; height: auto; clip-path: none; }\n  [part=inspector] { border-left: 1px solid var(--boe-token-stroke-stroke, #e8e8e8); padding: 16px 0; }\n  [part=palette] label { font-size: 0; position: relative; }\n  [part=search-icon] { position: absolute; left: 12px; top: 9px; width: 18px; height: 18px; color: var(--boe-token-text-text-secondary, #6f6f6f); pointer-events: none; }\n  [part=palette] input {\n    width: 100%; min-width: 0;\n    height: 36px;\n    padding: 0 12px 0 36px;\n    border: 1px solid transparent;\n    border-radius: 24px;\n    background: var(--boe-token-surface-surface-hover, #f4f4f4);\n    font-size: 13px;\n  }\n  [part=palette] input:focus-visible { border-color: var(--boe-token-surface-surface-brand, #0061d5); background: var(--boe-token-surface-surface, #fff); }\n  [part=choices] { display: grid; align-content: start; gap: 4px; max-height: none; overflow: visible; }\n  [part=group] { margin: 4px 4px 6px; font-size: 12px; font-weight: 650; color: var(--boe-token-text-text-secondary, #6f6f6f); }\n  [part=choice] {\n    display: grid; grid-template-columns: 20px minmax(0,1fr); gap: 0 10px;\n    min-height: 44px; padding: 8px 10px; border: 1px solid transparent; border-radius: 10px;\n    text-align: start; background: transparent; cursor: grab;\n  }\n  [part=choice]:hover { border-color: var(--boe-token-stroke-stroke, #e8e8e8); background: var(--boe-token-surface-surface-hover, #f4f4f4); }\n  [part=choice-icon] { grid-row: span 2; width: 20px; height: 20px; color: var(--boe-token-text-text-secondary, #6f6f6f); }\n  [part=choice][data-tone=accent] [part=choice-icon] { color: var(--boe-token-surface-surface-brand, #0061d5); }\n  [part=choice-icon] svg { width: 20px; height: 20px; }\n  [part=choice-name] { font-size: 13px; font-weight: 600; line-height: 1.3; }\n  [part=choice-description] { grid-column: 2; color: var(--boe-token-text-text-secondary, #6f6f6f); font-size: 12px; line-height: 1.35; }\n  [part=palette-hint] { margin: 4px; color: var(--boe-token-text-text-secondary, #6f6f6f); font-size: 12px; line-height: 1.45; }\n  [part=canvas] {\n    position: relative; min-width: 0; height: 100%; overflow: hidden;\n    border: 0; border-radius: 0;\n    background-color: var(--boe-token-surface-surface-secondary, #fbfbfb);\n    background-image: radial-gradient(circle, color-mix(in srgb, var(--boe-token-text-text-secondary, #6f6f6f) 26%, transparent) 1px, transparent 1.2px);\n    background-size: 12px 12px;\n    touch-action: none; user-select: none; cursor: grab;\n  }\n  [part=canvas][data-panning] { cursor: grabbing; }\n  [part=hold] { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 10px 16px; border-bottom: 1px solid var(--boe-token-stroke-status-stroke-warning, #9a6b00); background: var(--boe-token-surface-status-surface-warning, #fff7df); color: var(--boe-token-text-status-text-warning, #6b4a00); font-size: 13px; }\n  [part=hold-text] { flex: 1 1 280px; min-width: 0; }\n  [part=hold] button { min-height: 28px; padding: 3px 8px; border: 1px solid currentColor; border-radius: 6px; background: transparent; font-size: 12px; font-weight: 650; white-space: nowrap; }\n  [part=world] { position: absolute; inset: 0; transform-origin: 0 0; }\n  [part=lines] { position: absolute; inset: 0; width: 1px; height: 1px; overflow: visible; pointer-events: none; z-index: 3; }\n  [part=line] { stroke: var(--boe-token-text-text-secondary, #6f6f6f); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; fill: none; }\n  [part=line][data-selected=true] { stroke: var(--boe-token-surface-surface-brand, #0061d5); stroke-width: 2; }\n  [part=line][data-drop=true] { stroke: var(--boe-token-surface-surface-brand, #0061d5); stroke-width: 2.5; stroke-dasharray: 6 4; }\n  [part=line-hit] { fill: none; stroke: transparent; stroke-width: 24; pointer-events: stroke; }\n  [part=connection-preview] { fill: none; stroke: var(--boe-token-surface-surface-brand, #0061d5); stroke-width: 2.5; stroke-dasharray: 6 4; }\n  [part=pinned-end] { fill: var(--boe-token-surface-surface-brand, #0061d5); pointer-events: none; }\n  [part=box], [part=frame] {\n    position: absolute; touch-action: none; text-align: start; z-index: 4; display: grid; grid-template-columns: 20px minmax(0,1fr); align-content: center;\n    gap: 2px 10px; min-width: 0; min-height: 64px; padding: 11px 12px;\n    border: 1px solid var(--boe-process-box-edge, var(--boe-control-edge, #858585));\n    border-radius: 8px; background: var(--boe-token-surface-surface, #fff);\n    font-size: 13px; line-height: 1.3;\n    transition: border-color var(--boe-profile-motion-interactive, 200ms) ease-out,\n      background var(--boe-profile-motion-interactive, 200ms) ease-out;\n  }\n  [part=box]:hover, [part=frame]:hover { border-color: var(--boe-token-text-text-secondary, #6f6f6f); }\n  [data-connect-target=true] { border-color: var(--boe-token-surface-surface-brand, #0061d5) !important; }\n  [part=box] strong, [part=frame] strong { overflow-wrap: anywhere; }\n  [part=box] strong, [part=frame] strong { font-size: 13.5px; font-weight: 650; line-height: 1.3; }\n  [part=box] small, [part=frame] small { grid-column: 2; color: var(--boe-token-text-text-secondary, #6f6f6f); font-size: 12.5px; line-height: 1.35; }\n  [part=technical-description] { font: 12px/1.4 ui-monospace, 'SF Mono', Menlo, Consolas, monospace !important; overflow-wrap: anywhere; }\n  [part=metrics] { grid-column: 2; font-size: 12px; font-variant-numeric: tabular-nums; }\n  [part=metric-warning] { color: var(--boe-token-text-status-text-warning, #8a5800); }\n  [part=icon] { grid-row: span 3; width: 20px; height: 20px; color: var(--boe-token-text-text-secondary, #6f6f6f); }\n  [part=icon] svg { display: block; width: 20px; height: 20px; }\n  [data-tone=accent] > [part=icon] { color: var(--boe-token-surface-surface-brand, #0061d5); }\n  [part=box][aria-current=true], [part=frame][aria-current=true] {\n    border: 1px solid var(--boe-token-surface-surface-brand, #0061d5);\n    background: color-mix(in srgb, var(--boe-token-surface-surface-brand, #0061d5) 7%, var(--boe-token-surface-surface, #fff));\n  }\n  [data-invalid=true] { border-color: var(--boe-token-text-status-text-error, #b92340) !important; }\n  [part=problem] { grid-column: 1 / -1; color: var(--boe-token-text-status-text-error, #b92340); font-size: 12px; }\n  [part=frame] { z-index: 1; align-content: start; border-radius: 12px; background: color-mix(in srgb, var(--boe-token-surface-surface, #fff) 78%, transparent); }\n  [part=frame] small { grid-column: 2; }\n  [part=loop-mark] { position: absolute; right: 12px; bottom: 8px; font-size: 20px; line-height: 1; color: var(--boe-token-text-text-secondary, #6f6f6f); }\n  [part=frame-resize] { position: absolute; right: -12px; bottom: -12px; z-index: 8; width: 28px; height: 28px; min-height: 28px; padding: 0; border: 0; border-radius: 8px; background: var(--boe-token-surface-surface, #fff); box-shadow: 0 0 0 1px var(--boe-process-box-edge, #858585); cursor: nwse-resize; }\n  [part=frame-resize]::before { content: ''; position: absolute; right: 7px; bottom: 7px; width: 11px; height: 11px; border-right: 2px solid var(--boe-token-text-text-secondary, #6f6f6f); border-bottom: 2px solid var(--boe-token-text-text-secondary, #6f6f6f); }\n  [part=frame]:not([aria-current=true]) [part=frame-resize] { visibility: hidden; }\n  [data-shape=gateway], [data-shape=event] { width: 56px !important; height: 56px !important; min-height: 0; padding: 0; border: 0 !important; background: transparent !important; display: block; overflow: visible; }\n  [data-shape=gateway]::before { content: ''; position: absolute; left: 8px; top: 8px; width: 40px; height: 40px; rotate: 45deg; border: 1.5px solid var(--boe-process-box-edge, var(--boe-control-edge, #858585)); border-radius: 8px; background: var(--boe-token-surface-surface, #fff); }\n  [data-shape=event]::before { content: ''; position: absolute; left: 8px; top: 8px; width: 40px; height: 40px; border: 1.5px solid var(--boe-process-box-edge, var(--boe-control-edge, #858585)); border-radius: 50%; background: var(--boe-token-surface-surface, #fff); }\n  [data-shape=event][data-kind=finish]::before { border-width: 4px; }\n  [data-shape=event][data-kind=scheduled-start]::after { content: ''; position: absolute; left: 13px; top: 13px; width: 30px; height: 30px; border: 1px solid currentColor; border-radius: 50%; }\n  [data-shape=gateway] > [part=icon], [data-shape=event] > [part=icon] { position: absolute; left: 18px; top: 18px; z-index: 1; }\n  [data-shape=gateway] > strong, [data-shape=event] > strong { position: absolute; top: 58px; left: 50%; width: 150px; translate: -50% 0; text-align: center; font-size: 12px; }\n  [data-shape=gateway] > small { display: none; }\n  [data-shape=event] > small { position: absolute; top: 75px; left: 50%; width: 172px; translate: -50% 0; text-align: center; font-size: 11px; line-height: 1.25; }\n  [data-shape=gateway][aria-current=true]::before, [data-shape=event][aria-current=true]::before { border-color: var(--boe-token-surface-surface-brand, #0061d5); background: color-mix(in srgb, var(--boe-token-surface-surface-brand, #0061d5) 7%, var(--boe-token-surface-surface, #fff)); }\n  [part=port] { position: absolute; z-index: 5; width: 24px; height: 24px; min-height: 24px; padding: 0; border: 0; border-radius: 50%; background: transparent; opacity: 0; }\n  [part=port][data-side=north] { left: calc(50% - 12px); top: -12px; }\n  [part=port][data-side=south] { left: calc(50% - 12px); bottom: -12px; }\n  [part=port][data-side=east] { right: -12px; top: calc(50% - 12px); }\n  [part=port][data-side=west] { left: -12px; top: calc(50% - 12px); }\n  [part=port]::before { content: ''; display: block; width: 10px; height: 10px; margin: 7px; border: 1.5px solid var(--boe-token-surface-surface-brand, #0061d5); border-radius: 50%; background: var(--boe-token-surface-surface, #fff); }\n  [part=port]:hover::before, [part=port]:focus-visible::before { width: 22px; height: 22px; margin: 1px; background: var(--boe-token-surface-surface-brand, #0061d5); }\n  [part=port]::after { position: absolute; inset: 1px; display: none; place-items: center; color: #fff; font-size: 15px; font-weight: 700; line-height: 1; }\n  [part=port][data-side=north]::after { content: '\u2191'; }\n  [part=port][data-side=east]::after { content: '\u2192'; }\n  [part=port][data-side=south]::after { content: '\u2193'; }\n  [part=port][data-side=west]::after { content: '\u2190'; }\n  [part=port]:hover::after, [part=port]:focus-visible::after, [part=port][data-hot=true]::after { display: grid; }\n  [part=port][data-hot=true] { opacity: 1; }\n  [part=port][data-hot=true]::before { width: 22px; height: 22px; margin: 1px; background: var(--boe-token-surface-surface-brand, #0061d5); }\n  [part=end-grip] { position: absolute; z-index: 8; width: 24px; height: 24px; min-height: 24px; padding: 0; border: 0; border-radius: 50%; background: transparent; }\n  [part=end-grip]::before { content: ''; display: block; width: 10px; height: 10px; margin: 7px; border: 1.5px solid var(--boe-token-surface-surface-brand, #0061d5); border-radius: 50%; background: var(--boe-token-surface-surface, #fff); }\n  [part=box]:hover [part=port], [part=box]:focus-within [part=port], [part=box][aria-current=true] [part=port], [part=frame]:hover [part=port] { opacity: 1; }\n  [part=connection] { position: absolute; z-index: 5; display: flex; align-items: center; gap: 4px; transform: translate(-50%,-50%); min-width: 0; min-height: 0; padding: 2px 6px; border-radius: 6px; background: var(--boe-token-surface-surface-secondary, #fbfbfb); font-size: 12px; font-weight: 600; white-space: nowrap; }\n  [part=connection]:has(> span:empty) { padding: 0; background: transparent; min-width: 0; min-height: 0; }\n  [part=connection-actions] { position: absolute; top: 100%; left: 50%; transform: translateX(-50%); display: flex; gap: 4px; width: max-content; padding: 4px; border: 1px solid var(--boe-token-stroke-stroke, #e8e8e8); border-radius: 8px; background: var(--boe-token-surface-surface, #fff); box-shadow: var(--boe-shadow-overlay, 0 4px 12px rgb(0 0 0 / .16)); opacity: 0; pointer-events: none; }\n  [part=connection]:hover [part=connection-actions], [part=connection]:focus-within [part=connection-actions] { opacity: 1; pointer-events: auto; }\n  [part=connection-actions] button { min-height: 32px; padding: 4px; font-size: 12px; }\n  [part=note] { width: 208px; border: 1px dashed var(--boe-process-box-edge, var(--boe-control-edge, #858585)); border-radius: 8px; }\n  [part=section] { z-index: 0; border: 1px solid var(--boe-process-box-edge, var(--boe-control-edge, #858585)); border-radius: 16px; background: color-mix(in srgb, var(--boe-token-surface-surface, #fff) 45%, transparent); }\n  [part=section] strong { display: block; font-size: 12.5px; font-weight: 650; line-height: 1.3; }\n  [part=section] small { display: block; color: var(--boe-token-text-text-secondary, #6f6f6f); font-size: 11.5px; line-height: 1.35; }\n  [part=note], [part=section] { position: absolute; padding: 8px; pointer-events: none; }\n  [part=marquee] { position: absolute; border: 2px solid var(--boe-token-surface-surface-brand, #0061d5); background: color-mix(in srgb, var(--boe-token-surface-surface-brand, #0061d5) 12%, transparent); pointer-events: none; }\n  [part=connect-tooltip] { position: absolute; z-index: 20; max-width: 240px; padding: 5px 8px; border-radius: 7px; background: var(--boe-token-text-text, #141413); color: var(--boe-token-surface-surface, #fff); font-size: 12px; pointer-events: none; box-shadow: var(--boe-shadow-overlay, 0 4px 12px rgb(0 0 0 / .16)); }\n  [part=connect-tooltip][data-invalid=true] { background: var(--boe-token-text-status-text-error, #b92340); color: #fff; }\n  [part=ghost-box], [part=palette-ghost] { position: absolute; z-index: 5; display: flex; align-items: center; padding: 11px 12px; border: 1.5px dashed var(--boe-token-surface-surface-brand, #0061d5); border-radius: 8px; background: color-mix(in srgb, var(--boe-token-surface-surface-brand, #0061d5) 10%, var(--boe-token-surface-surface, #fff)); font-size: 13px; font-weight: 650; pointer-events: none; }\n  [part=guide] { position: absolute; background: var(--boe-token-surface-surface-brand, #0061d5); pointer-events: none; }\n  [part=measure] { position: absolute; padding: 4px; background: var(--boe-token-surface-surface, #fff); font-size: 12px; pointer-events: none; }\n  [part=insert-chooser] { max-width: calc(100vw - 32px); max-height: 65vh; overflow: auto; padding: 12px; border: 1px solid var(--boe-token-stroke-stroke, #e8e8e8); border-radius: 12px; background: var(--boe-token-surface-surface, #fff); }\n  [part=keyboard-chooser] { position: fixed; inset: auto; width: min(320px, calc(100vw - 24px)); max-height: min(420px, calc(100dvh - 24px)); margin: 0; overflow: auto; padding: 12px; border: 1px solid var(--boe-token-stroke-stroke, #e8e8e8); border-radius: 12px; background: var(--boe-token-surface-surface, #fff); color: var(--boe-token-text-text, #141413); box-shadow: var(--boe-shadow-overlay, 0 4px 12px rgb(0 0 0 / .16)); }\n  [part=chooser-title] { margin: 0 0 10px; font-size: 12px; font-weight: 650; line-height: 1.4; color: var(--boe-token-text-text-secondary, #6f6f6f); }\n  [part=controls] { position: absolute; left: 16px; bottom: 16px; z-index: 10; display: flex; align-items: center; gap: 2px; padding: 4px; border: 1px solid var(--boe-token-stroke-stroke, #e8e8e8); border-radius: 12px; background: var(--boe-token-surface-surface, #fff); box-shadow: var(--boe-shadow-overlay, 0 4px 12px rgb(0 0 0 / .16)); }\n  [part=controls] [data-command=reset] { min-width: 56px; font-variant-numeric: tabular-nums; }\n  [part=minimap] { position: absolute; right: 16px; bottom: 16px; width: 208px; height: 136px; touch-action: none; background: var(--boe-token-surface-surface, #fff); border: 1px solid var(--boe-token-stroke-stroke, #e8e8e8); border-radius: 12px; box-shadow: var(--boe-shadow-overlay, 0 4px 12px rgb(0 0 0 / .16)); }\n  [part=minimap] rect:not([data-viewport]) { fill: var(--boe-token-stroke-stroke-hover, #d3d3d3); }\n  [part=minimap] [data-viewport] { fill: color-mix(in srgb, var(--boe-token-surface-surface-brand, #0061d5) 9%, transparent); stroke: var(--boe-token-surface-surface-brand, #0061d5); stroke-width: 1; }\n  [part=selection-toolbar] { position: absolute; bottom: auto; z-index: 11; display: flex; flex-wrap: nowrap; gap: 2px; padding: 4px; border: 1px solid var(--boe-token-stroke-stroke, #e8e8e8); border-radius: 12px; background: var(--boe-token-surface-surface, #fff); box-shadow: var(--boe-shadow-overlay, 0 4px 12px rgb(0 0 0 / .16)); white-space: nowrap; }\n  [part=checks] { display: grid; gap: 6px; margin-top: 12px; }\n  [part=checks] button { color: var(--boe-token-text-status-text-error, #b92340); }\n  [part=process-heading] { display: grid; gap: 2px; padding: 0 16px 12px; }\n  :host([embed-mode]) [part=view-switch], :host([embed-mode]) [part=run-toggle], :host([embed-mode]) [part=view-menu] { display: none; }\n  [part=process-title] { font-size: 15px; line-height: 1.4; }\n  [part=process-summary] { color: var(--boe-token-text-text-secondary, #6f6f6f); font-size: 12.5px; }\n  [part=pane-tabs] { display: flex; flex-wrap: nowrap; gap: 4px; margin: 0; padding: 0 16px; border-bottom: 1px solid var(--boe-token-stroke-stroke, #e8e8e8); overflow-x: auto; }\n  [part=pane-tabs] button { flex: none; min-height: 40px; border: 0; border-bottom: 2px solid transparent; border-radius: 0; background: transparent; color: var(--boe-token-text-text-secondary, #6f6f6f); font-size: 13px; font-weight: 600; }\n  [part=pane-tabs] button[aria-selected=true] { color: var(--boe-token-text-text, #141413); border-bottom-color: currentColor; }\n  [part=editor], [part=pane-content] { padding: 8px 16px; }\n  [part=editor] { display: grid; align-content: start; gap: 12px; }\n  [part=inspector-kind] { display: none; }\n  [part=inspector-purpose] { margin: 0; color: var(--boe-token-text-text-secondary, #6f6f6f); font-size: 12.5px; }\n  [part=field] { display: grid; gap: 4px; }\n  [part=field] label { display: grid; gap: 5px; font-size: 12.5px; font-weight: 650; }\n  [part=field] :is(input:not([type=checkbox]),textarea,select) { width: 100%; min-height: 36px; padding: 7px 10px; border: 1px solid var(--boe-token-stroke-stroke, #e8e8e8); border-radius: 8px; background: var(--boe-token-surface-surface, #fff); color: var(--boe-token-text-text, #141413); font-family: inherit; font-size: 13px; line-height: 1.4; }\n  [part=field] textarea { min-height: 76px; resize: vertical; }\n  [part=field]:has([part=action-options]) { position: relative; }\n  [part=field]:has([part=action-options]) input { padding-right: 34px; }\n  [part=action-caret] { position: absolute; z-index: 1; top: 25px; right: 2px; width: 32px; min-height: 32px; padding: 0; border: 0; background: transparent; font-size: 18px; }\n  [part=action-options] { position: absolute; z-index: 30; top: calc(100% - 1px); left: 0; right: 0; max-height: 280px; overflow: auto; padding: 6px; border: 1px solid var(--boe-token-stroke-stroke, #e8e8e8); border-radius: 10px; background: var(--boe-token-surface-surface, #fff); box-shadow: var(--boe-shadow-overlay, 0 4px 12px rgb(0 0 0 / .16)); }\n  [part=action-options][hidden] { display: none; }\n  [part=action-options] button { display: block; width: 100%; min-height: 36px; padding: 7px 9px; border: 0; border-radius: 7px; text-align: start; background: transparent; font-size: 12.5px; }\n  [part=action-options] button:hover, [part=action-options] [aria-selected=true] { background: var(--boe-token-surface-surface-hover, #f4f4f4); }\n  [part=action-options] button strong { display: block; font-size: 13px; font-weight: 650; }\n  [part=action-options] button small { display: block; color: var(--boe-token-text-text-secondary, #6f6f6f); }\n  [part=action-options] [part=action-back] { color: var(--boe-token-text-text-secondary, #6f6f6f); }\n  [part=field] input[type=checkbox] { justify-self: start; width: 18px; height: 18px; accent-color: var(--boe-token-surface-surface-brand, #0061d5); }\n  [part=field] small { color: var(--boe-token-text-text-secondary, #6f6f6f); font-size: 12px; line-height: 1.4; }\n  [part=field] [part=field-problem] { color: var(--boe-token-text-status-text-error, #b92340); }\n  [part=variable-chips] { display: flex; flex-wrap: wrap; gap: 4px; }\n  [part=variable-chips] button { min-height: 24px; padding: 2px 8px; border: 1px solid var(--boe-token-stroke-stroke, #e8e8e8); border-radius: 12px; background: var(--boe-token-surface-surface-secondary, #fbfbfb); font-size: 11.5px; }\n  [part=leads-to] { display: grid; gap: 6px; padding-top: 10px; border-top: 1px solid var(--boe-token-stroke-stroke, #e8e8e8); }\n  [part=leads-to] h3 { margin: 0; font-size: 12.5px; }\n  [part=lead-row] { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 12.5px; }\n  [part=lead-row] button, [part=leads-to] > button, [part=inspector-actions] button { min-height: 28px; padding: 4px 8px; font-size: 12px; }\n  [part=inspector-metrics] { margin: 0; padding-top: 10px; border-top: 1px solid var(--boe-token-stroke-stroke, #e8e8e8); font-size: 12px; font-variant-numeric: tabular-nums; }\n  [part=inspector-metrics] h3 { margin: 0 0 6px; font-size: 12.5px; }\n  [part=inspector-metrics] dl { display: grid; grid-template-columns: 1fr auto; gap: 4px 8px; margin: 0; }\n  [part=inspector-metrics] dt { color: var(--boe-token-text-text-secondary, #6f6f6f); }\n  [part=inspector-metrics] dd { margin: 0; font-weight: 650; }\n  [part=inspector-actions] { display: flex; gap: 8px; padding-top: 10px; border-top: 1px solid var(--boe-token-stroke-stroke, #e8e8e8); }\n  [part=arrange-actions] { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 6px; }\n  [part=arrange-actions] button { min-height: 32px; padding: 5px 7px; font-size: 12px; text-align: start; }\n  [part=outline-intro] { margin: 4px 0 14px; color: var(--boe-token-text-text-secondary, #6f6f6f); font-size: 12.5px; line-height: 1.5; }\n  [part=copy-outline] { justify-self: start; min-height: 28px; margin-bottom: 8px; padding: 4px 10px; border-radius: 16px; font-size: 12px; font-weight: 650; }\n  [part=outline-list] { margin: 0; padding-left: 18px; display: grid; gap: 8px; }\n  [part=outline-list] [part=outline-list] { margin: 6px 0 0; gap: 6px; }\n  [part=outline-list] li { padding-left: 0; font-size: 12.5px; }\n  [part=outline-list] li::marker { color: var(--boe-token-text-text-secondary, #6f6f6f); }\n  [part=outline-list] button, [part=outline-list] strong { border: 0; border-radius: 4px; background: transparent; padding: 0; min-height: 0; font-size: 12.5px; font-weight: 650; line-height: 1.45; text-align: start; }\n  [part=outline-list] button:hover { color: var(--boe-token-surface-surface-brand, #0061d5); text-decoration: underline; }\n  [part=outline-list] button[aria-current=true] { color: var(--boe-token-surface-surface-brand, #0061d5); }\n  [part=outline-list] p { margin: 2px 0 0; color: var(--boe-token-text-text-secondary, #6f6f6f); font-size: 12px; line-height: 1.45; }\n  [part=inspector-heading] { margin: 0 0 2px; font-size: 15px; font-weight: 650; }\n  [part=inspector-heading][data-single=true]:not(:focus-visible) { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }\n  [part=checks] { margin: 0; padding: 0; }\n  [part=checks] button { width: 100%; border: 0; border-bottom: 1px solid var(--boe-token-stroke-stroke, #e8e8e8); border-radius: 0; text-align: start; background: transparent; }\n  [part=variable-row], [part=connection-row] { display: grid; gap: 4px; padding: 10px 0; border-bottom: 1px solid var(--boe-token-stroke-stroke, #e8e8e8); font-size: 12.5px; }\n  [part=variable-row] p { margin: 0; color: var(--boe-token-text-text-secondary, #6f6f6f); }\n  [part=variable-scope] { color: var(--boe-token-text-text-secondary, #6f6f6f); font-size: 11.5px; }\n  [part=variable-row] label { display: grid; gap: 4px; font-weight: 650; }\n  [part=variable-row] input { min-height: 36px; padding: 7px 10px; border: 1px solid var(--boe-token-stroke-stroke, #e8e8e8); border-radius: 8px; background: var(--boe-token-surface-surface, #fff); }\n  [part=help] { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }\n  :host([data-narrow]) [part=layout] { grid-template-columns: minmax(0,1fr); }\n  :host([data-narrow]) [part=layout] { overflow: visible; }\n  :host([data-narrow]) [part=pane-drawer] { display: none; position: absolute; z-index: 40; margin: 0; max-width: none; max-height: none; padding: 0; overflow: auto; border: 0; border-radius: 0; background: var(--boe-token-surface-surface, #fff); box-shadow: var(--boe-shadow-overlay, 0 4px 12px rgb(0 0 0 / .24)); }\n  :host([data-narrow]) [part=pane-drawer][open] { display: block; }\n  :host([data-narrow]) [part=pane-title] { display: block; position: absolute; top: 18px; left: 16px; margin: 0; font-size: 14px; font-weight: 650; line-height: 20px; }\n  :host([data-narrow]) [part=pane-close], :host([data-narrow]) [data-command=palette], :host([data-narrow]) [data-command=details] { display: inline-block; }\n  :host([data-narrow]) [part=pane-close] { position: absolute; top: 12px; right: 12px; z-index: 1; width: 28px; height: 28px; padding: 0; border-radius: 50%; font-size: 16px; font-weight: 600; line-height: 1; }\n  :host([data-narrow]) [part=pane-drawer][data-pane=palette] { left: 0; top: 0; bottom: auto; width: min(320px, 86%); height: 100%; max-height: 100%; }\n  :host([data-narrow]) [part=pane-drawer][data-pane=inspector] { left: 0; right: 0; top: auto; bottom: 0; width: 100%; height: min(62%, 560px); border-radius: 24px 24px 0 0; }\n  :host([data-narrow]) [part=pane-drawer][data-pane=inspector]::before { content: ''; display: block; width: 36px; height: 4px; margin: 6px auto; border-radius: 2px; background: var(--boe-token-text-text-secondary, #767676); opacity: .55; }\n  :host([data-narrow]) [part=palette], :host([data-narrow]) [part=inspector] { height: 100%; }\n  :host([data-narrow]) [part=palette] { padding-top: 54px; }\n  :host([data-narrow]) [part=palette-heading] { display: none; }\n  :host([data-narrow]) [part=minimap] { display: none; }\n  :host([data-narrow]) [part=toolbar] { justify-content: flex-start; }\n  :host([data-narrow]) [data-command=palette] { order: -2; }\n  :host([data-narrow]) [part=view-menu] { order: -1; }\n  :host([data-narrow]) [part=view-switch], :host([data-narrow]) [part=run-toggle] { display: none; }\n  :host([data-narrow]) [data-command=checks-status] { display: none; }\n  :host([data-narrow]:not([embed-mode])) [part=view-menu] { display: block; }\n  :host([data-narrow]) [part=controls] { left: 12px; bottom: 12px; }\n  :host([data-phone]) [data-command=tidy] { display: none; }\n  :host([data-phone]) [data-command=undo], :host([data-phone]) [data-command=redo] { display: none; }\n  @media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition-duration: 0s !important; animation-duration: 0s !important; scroll-behavior: auto !important; } }\n";
+export declare const processModelerDesign = "\n  :host([hidden]), [hidden] { display: none !important; }\n  *, *::before, *::after { box-sizing: border-box; }\n  button, input, textarea, select { font: inherit; color: inherit; }\n  button { min-height: 36px; padding: 8px; border: 1px solid var(--boe-token-stroke-stroke, #e8e8e8); border-radius: 8px; background: var(--boe-token-surface-surface, #fff); cursor: pointer; }\n  button:disabled { opacity: .5; cursor: default; }\n  :is(button,input,textarea,select,[part=canvas],[part=minimap],[part=box],[part=frame]):focus-visible { outline: 2px solid var(--boe-token-surface-surface-brand, #0061d5); outline-offset: 2px; }\n  :host {\n    display: block;\n    position: relative;\n    isolation: isolate;\n    min-width: 0;\n    --boe-process-box-edge: color-mix(in srgb, var(--boe-token-text-text, #141413) 55%, var(--boe-token-surface-surface, #fff));\n    color: var(--boe-token-text-text, #141413);\n    background: var(--boe-token-surface-surface, #fff);\n    font: 14px/1.5 var(--boe-token-font-family-base, Inter, sans-serif);\n  }\n  [part=sr-only], [part=status], [part=urgent-status] { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }\n  [part=toolbar] {\n    min-height: 56px;\n    margin: 0;\n    padding: 8px 16px;\n    display: flex;\n    align-items: center;\n    justify-content: flex-end;\n    gap: 8px;\n    flex-wrap: wrap;\n    border-bottom: 1px solid var(--boe-token-stroke-stroke, #e8e8e8);\n    background: var(--boe-token-surface-surface, #fff);\n  }\n  [part=toolbar] button, [part=controls] button, [part=selection-toolbar] button {\n    min-height: 30px;\n    padding: 4px 10px;\n    border: 1px solid transparent;\n    border-radius: 8px;\n    background: transparent;\n    font-size: 13px;\n    font-weight: 600;\n  }\n  [part=toolbar] svg, [part=controls] svg { width: 16px; height: 16px; display: block; }\n  [part=toolbar] [data-command=undo], [part=toolbar] [data-command=redo], [part=controls] button:not([data-command=reset]) { width: 30px; height: 30px; padding: 6px; display: grid; place-items: center; }\n  [part=controls] [data-command=snap][aria-pressed=true], [part=controls] [data-command=lock][aria-pressed=true] { background: color-mix(in srgb, var(--boe-token-surface-surface-brand, #0061d5) 10%, var(--boe-token-surface-surface, #fff)); color: var(--boe-token-surface-surface-brand, #0061d5); }\n  [part=toolbar] button:hover, [part=controls] button:hover, [part=selection-toolbar] button:hover {\n    background: var(--boe-token-surface-surface-hover, #f4f4f4);\n  }\n  [part=toolbar] [data-command=tidy] { border-color: var(--boe-token-stroke-stroke, #e8e8e8); border-radius: 18px; }\n  [part=view-switch] { display: flex; gap: 2px; padding: 3px; border: 1px solid var(--boe-token-stroke-stroke, #e8e8e8); border-radius: 20px; }\n  [part=view-switch] button { border-radius: 16px; }\n  [part=view-switch] button[aria-pressed=true] { border-color: var(--boe-token-stroke-stroke, #e8e8e8); background: var(--boe-token-surface-surface, #fff); }\n  [part=run-toggle] { display: flex; align-items: center; gap: 8px; white-space: nowrap; font-size: 13px; font-weight: 600; cursor: pointer; }\n  [part=run-toggle] input { appearance: none; position: relative; width: 32px; height: 18px; margin: 0; border: 0; border-radius: 9px; background: var(--boe-token-surface-surface-hover, #f4f4f4); cursor: pointer; transition: background var(--boe-profile-motion-interactive, 200ms) ease-out; }\n  [part=run-toggle] input::after { content: ''; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%; background: var(--boe-token-surface-surface, #fff); box-shadow: 0 1px 2px rgb(0 0 0 / .25); transition: transform var(--boe-profile-motion-interactive, 200ms) ease-out; }\n  [part=run-toggle] input:checked { background: var(--boe-token-surface-surface-brand, #0061d5); }\n  [part=run-toggle] input:checked::after { transform: translateX(14px); }\n  [part=run-toggle] input:focus-visible { outline: 2px solid var(--boe-token-surface-surface-brand, #0061d5); outline-offset: 2px; }\n  [part=toolbar] [data-command=checks-status] { white-space: nowrap; color: var(--boe-token-text-text-secondary, #6f6f6f); }\n  [part=toolbar] [data-command=checks-status][data-state=bad] { color: var(--boe-token-text-status-text-error, #b92340); }\n  [part=view-menu] { display: none; position: relative; }\n  [part=view-menu] summary { list-style: none; padding: 4px 14px; border: 1px solid var(--boe-token-stroke-stroke, #e8e8e8); border-radius: 18px; font-size: 13px; font-weight: 600; cursor: pointer; }\n  [part=view-menu][open] { z-index: 20; }\n  [part=view-menu-options] { position: absolute; z-index: 20; top: calc(100% + 4px); left: 0; width: 192px; padding: 6px; border: 1px solid var(--boe-token-stroke-stroke, #e8e8e8); border-radius: 10px; background: var(--boe-token-surface-surface, #fff); box-shadow: var(--boe-shadow-overlay, 0 4px 12px rgb(0 0 0 / .16)); }\n  [part=view-menu] button { display: block; width: 100%; text-align: start; background: transparent; }\n  [part=layout] {\n    display: grid;\n    grid-template-columns: 248px minmax(0, 1fr) 320px;\n    gap: 0;\n    min-height: 0;\n    height: var(--boe-process-height, 660px);\n    overflow: hidden;\n  }\n  [part=pane-drawer] { display: contents; color: inherit; }\n  [part=canvas-stack] { display: grid; grid-template-rows: auto minmax(0, 1fr); min-width: 0; min-height: 0; }\n  /* The hidden hold leaves row 1 empty. Keep the canvas in the flexible row\n     explicitly; auto-placement otherwise puts its absolute world in a 0px row. */\n  [part=canvas-stack] > [part=hold] { grid-row: 1; }\n  [part=canvas-stack] > [part=canvas] { grid-row: 2; }\n  [part=insert-chooser]::backdrop { background: rgb(0 0 0 / .45); }\n  [part=pane-scrim] { position: absolute; inset: 0; z-index: 30; background: rgb(0 0 0 / .45); }\n  [part=pane-title], [part=pane-close], [data-command=palette], [data-command=details] { display: none; }\n  [part=palette], [part=inspector] {\n    min-width: 0;\n    overflow: auto;\n    padding: 12px;\n    border: 0;\n    border-radius: 0;\n    background: var(--boe-token-surface-surface, #fff);\n  }\n  [part=palette] { display: flex; flex-direction: column; gap: 12px; border-right: 1px solid var(--boe-token-stroke-stroke, #e8e8e8); }\n  [part=palette-heading] { margin: 0 4px; font-size: 14px; font-weight: 650; line-height: 20px; }\n  [part=skip-link] { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }\n  [part=skip-link]:focus-visible { position: static; width: auto; height: auto; clip-path: none; }\n  [part=inspector] { border-left: 1px solid var(--boe-token-stroke-stroke, #e8e8e8); padding: 16px 0; }\n  [part=palette] label { font-size: 0; position: relative; }\n  [part=search-icon] { position: absolute; left: 12px; top: 9px; width: 18px; height: 18px; color: var(--boe-token-text-text-secondary, #6f6f6f); pointer-events: none; }\n  [part=palette] input {\n    width: 100%; min-width: 0;\n    height: 36px;\n    padding: 0 12px 0 36px;\n    border: 1px solid transparent;\n    border-radius: 24px;\n    background: var(--boe-token-surface-surface-hover, #f4f4f4);\n    font-size: 13px;\n  }\n  [part=palette] input:focus-visible { border-color: var(--boe-token-surface-surface-brand, #0061d5); background: var(--boe-token-surface-surface, #fff); }\n  [part=choices] { display: grid; align-content: start; gap: 4px; max-height: none; overflow: visible; }\n  [part=group] { margin: 4px 4px 6px; font-size: 12px; font-weight: 650; color: var(--boe-token-text-text-secondary, #6f6f6f); }\n  [part=choice] {\n    display: grid; grid-template-columns: 20px minmax(0,1fr); gap: 0 10px;\n    min-height: 44px; padding: 8px 10px; border: 1px solid transparent; border-radius: 10px;\n    text-align: start; background: transparent; cursor: grab;\n  }\n  [part=choice]:hover { border-color: var(--boe-token-stroke-stroke, #e8e8e8); background: var(--boe-token-surface-surface-hover, #f4f4f4); }\n  [part=choice-icon] { grid-row: span 2; width: 20px; height: 20px; color: var(--boe-token-text-text-secondary, #6f6f6f); }\n  [part=choice][data-tone=accent] [part=choice-icon] { color: var(--boe-token-surface-surface-brand, #0061d5); }\n  [part=choice-icon] svg { width: 20px; height: 20px; }\n  [part=choice-name] { font-size: 13px; font-weight: 600; line-height: 1.3; }\n  [part=choice-description] { grid-column: 2; color: var(--boe-token-text-text-secondary, #6f6f6f); font-size: 12px; line-height: 1.35; }\n  [part=palette-hint] { margin: 4px; color: var(--boe-token-text-text-secondary, #6f6f6f); font-size: 12px; line-height: 1.45; }\n  [part=canvas] {\n    position: relative; min-width: 0; height: 100%; overflow: hidden;\n    border: 0; border-radius: 0;\n    background-color: var(--boe-token-surface-surface-secondary, #fbfbfb);\n    background-image: radial-gradient(circle, color-mix(in srgb, var(--boe-token-text-text-secondary, #6f6f6f) 26%, transparent) 1px, transparent 1.2px);\n    background-size: 12px 12px;\n    touch-action: none; user-select: none; cursor: grab;\n  }\n  [part=canvas][data-panning] { cursor: grabbing; }\n  [part=hold] { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 10px 16px; border-bottom: 1px solid var(--boe-token-stroke-status-stroke-warning, #9a6b00); background: var(--boe-token-surface-status-surface-warning, #fff7df); color: var(--boe-token-text-status-text-warning, #6b4a00); font-size: 13px; }\n  [part=hold-text] { flex: 1 1 280px; min-width: 0; }\n  [part=hold] button { min-height: 28px; padding: 3px 8px; border: 1px solid currentColor; border-radius: 6px; background: transparent; font-size: 12px; font-weight: 650; white-space: nowrap; }\n  [part=world] { position: absolute; inset: 0; transform-origin: 0 0; }\n  [part=lines] { position: absolute; inset: 0; width: 1px; height: 1px; overflow: visible; pointer-events: none; z-index: 3; }\n  [part=line] { stroke: var(--boe-token-text-text-secondary, #6f6f6f); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; fill: none; }\n  [part=line][data-selected=true] { stroke: var(--boe-token-surface-surface-brand, #0061d5); stroke-width: 2; }\n  [part=line][data-drop=true] { stroke: var(--boe-token-surface-surface-brand, #0061d5); stroke-width: 2.5; stroke-dasharray: 6 4; }\n  [part=line-hit] { fill: none; stroke: transparent; stroke-width: 24; pointer-events: stroke; }\n  [part=connection-preview] { fill: none; stroke: var(--boe-token-surface-surface-brand, #0061d5); stroke-width: 2.5; stroke-dasharray: 6 4; }\n  [part=pinned-end] { fill: var(--boe-token-surface-surface-brand, #0061d5); pointer-events: none; }\n  [part=box], [part=frame] {\n    position: absolute; touch-action: none; text-align: start; z-index: 4; display: grid; grid-template-columns: 20px minmax(0,1fr); align-content: center;\n    gap: 2px 10px; min-width: 0; min-height: 64px; padding: 11px 12px;\n    border: 1px solid var(--boe-process-box-edge, var(--boe-control-edge, #858585));\n    border-radius: 8px; background: var(--boe-token-surface-surface, #fff);\n    font-size: 13px; line-height: 1.3;\n    transition: border-color var(--boe-profile-motion-interactive, 200ms) ease-out,\n      background var(--boe-profile-motion-interactive, 200ms) ease-out;\n  }\n  [part=box]:hover, [part=frame]:hover { border-color: var(--boe-token-text-text-secondary, #6f6f6f); }\n  [data-connect-target=true] { border-color: var(--boe-token-surface-surface-brand, #0061d5) !important; }\n  [part=box] strong, [part=frame] strong { overflow-wrap: anywhere; }\n  [part=box] strong, [part=frame] strong { font-size: 13.5px; font-weight: 650; line-height: 1.3; }\n  [part=box] small, [part=frame] small { grid-column: 2; color: var(--boe-token-text-text-secondary, #6f6f6f); font-size: 12.5px; line-height: 1.35; }\n  [part=technical-description] { font: 12px/1.4 ui-monospace, 'SF Mono', Menlo, Consolas, monospace !important; overflow-wrap: anywhere; }\n  [part=metrics] { grid-column: 2; font-size: 12px; font-variant-numeric: tabular-nums; }\n  [part=metric-warning] { color: var(--boe-token-text-status-text-warning, #8a5800); }\n  [part=icon] { grid-row: span 3; width: 20px; height: 20px; color: var(--boe-token-text-text-secondary, #6f6f6f); }\n  [part=icon] svg { display: block; width: 20px; height: 20px; }\n  [data-tone=accent] > [part=icon] { color: var(--boe-token-surface-surface-brand, #0061d5); }\n  [part=box][aria-current=true], [part=frame][aria-current=true] {\n    border: 1px solid var(--boe-token-surface-surface-brand, #0061d5);\n    background: color-mix(in srgb, var(--boe-token-surface-surface-brand, #0061d5) 7%, var(--boe-token-surface-surface, #fff));\n  }\n  [data-invalid=true] { border-color: var(--boe-token-text-status-text-error, #b92340) !important; }\n  [part=problem] { grid-column: 1 / -1; color: var(--boe-token-text-status-text-error, #b92340); font-size: 12px; }\n  [part=frame] { z-index: 1; align-content: start; border-radius: 12px; background: color-mix(in srgb, var(--boe-token-surface-surface, #fff) 78%, transparent); }\n  [part=frame] small { grid-column: 2; }\n  [part=loop-mark] { position: absolute; right: 12px; bottom: 8px; font-size: 20px; line-height: 1; color: var(--boe-token-text-text-secondary, #6f6f6f); }\n  [part=frame-resize] { position: absolute; right: -12px; bottom: -12px; z-index: 8; width: 28px; height: 28px; min-height: 28px; padding: 0; border: 0; border-radius: 8px; background: var(--boe-token-surface-surface, #fff); box-shadow: 0 0 0 1px var(--boe-process-box-edge, #858585); cursor: nwse-resize; }\n  [part=frame-resize]::before { content: ''; position: absolute; right: 7px; bottom: 7px; width: 11px; height: 11px; border-right: 2px solid var(--boe-token-text-text-secondary, #6f6f6f); border-bottom: 2px solid var(--boe-token-text-text-secondary, #6f6f6f); }\n  [part=frame]:not([aria-current=true]) [part=frame-resize] { visibility: hidden; }\n  [data-shape=gateway], [data-shape=event] { width: 56px !important; height: 56px !important; min-height: 0; padding: 0; border: 0 !important; background: transparent !important; display: block; overflow: visible; }\n  [data-shape=gateway]::before { content: ''; position: absolute; left: 8px; top: 8px; width: 40px; height: 40px; rotate: 45deg; border: 1.5px solid var(--boe-process-box-edge, var(--boe-control-edge, #858585)); border-radius: 8px; background: var(--boe-token-surface-surface, #fff); }\n  [data-shape=event]::before { content: ''; position: absolute; left: 8px; top: 8px; width: 40px; height: 40px; border: 1.5px solid var(--boe-process-box-edge, var(--boe-control-edge, #858585)); border-radius: 50%; background: var(--boe-token-surface-surface, #fff); }\n  [data-shape=event][data-kind=finish]::before { border-width: 4px; }\n  [data-shape=event][data-kind=scheduled-start]::after { content: ''; position: absolute; left: 13px; top: 13px; width: 30px; height: 30px; border: 1px solid currentColor; border-radius: 50%; }\n  [data-shape=gateway] > [part=icon], [data-shape=event] > [part=icon] { position: absolute; left: 18px; top: 18px; z-index: 1; }\n  [data-shape=gateway] > strong, [data-shape=event] > strong { position: absolute; top: 58px; left: 50%; width: 150px; translate: -50% 0; text-align: center; font-size: 12px; }\n  [data-shape=gateway] > small { display: none; }\n  [data-shape=event] > small { position: absolute; top: 75px; left: 50%; width: 172px; translate: -50% 0; text-align: center; font-size: 11px; line-height: 1.25; }\n  [data-shape=gateway][aria-current=true]::before, [data-shape=event][aria-current=true]::before { border-color: var(--boe-token-surface-surface-brand, #0061d5); background: color-mix(in srgb, var(--boe-token-surface-surface-brand, #0061d5) 7%, var(--boe-token-surface-surface, #fff)); }\n  [part=port] { position: absolute; z-index: 5; width: 24px; height: 24px; min-height: 24px; padding: 0; border: 0; border-radius: 50%; background: transparent; opacity: 0; }\n  [part=port][data-side=north] { left: calc(50% - 12px); top: -12px; }\n  [part=port][data-side=south] { left: calc(50% - 12px); bottom: -12px; }\n  [part=port][data-side=east] { right: -12px; top: calc(50% - 12px); }\n  [part=port][data-side=west] { left: -12px; top: calc(50% - 12px); }\n  [part=port]::before { content: ''; display: block; width: 10px; height: 10px; margin: 7px; border: 1.5px solid var(--boe-token-surface-surface-brand, #0061d5); border-radius: 50%; background: var(--boe-token-surface-surface, #fff); }\n  [part=port]:hover::before, [part=port]:focus-visible::before { width: 22px; height: 22px; margin: 1px; background: var(--boe-token-surface-surface-brand, #0061d5); }\n  [part=port]::after { position: absolute; inset: 1px; display: none; place-items: center; color: #fff; font-size: 15px; font-weight: 700; line-height: 1; }\n  [part=port][data-side=north]::after { content: '\u2191'; }\n  [part=port][data-side=east]::after { content: '\u2192'; }\n  [part=port][data-side=south]::after { content: '\u2193'; }\n  [part=port][data-side=west]::after { content: '\u2190'; }\n  [part=port]:hover::after, [part=port]:focus-visible::after, [part=port][data-hot=true]::after { display: grid; }\n  [part=port][data-hot=true] { opacity: 1; }\n  [part=port][data-hot=true]::before { width: 22px; height: 22px; margin: 1px; background: var(--boe-token-surface-surface-brand, #0061d5); }\n  [part=end-grip] { position: absolute; z-index: 8; width: 24px; height: 24px; min-height: 24px; padding: 0; border: 0; border-radius: 50%; background: transparent; }\n  [part=end-grip]::before { content: ''; display: block; width: 10px; height: 10px; margin: 7px; border: 1.5px solid var(--boe-token-surface-surface-brand, #0061d5); border-radius: 50%; background: var(--boe-token-surface-surface, #fff); }\n  [part=box]:hover [part=port], [part=box]:focus-within [part=port], [part=box][aria-current=true] [part=port], [part=frame]:hover [part=port] { opacity: 1; }\n  [part=connection] { position: absolute; z-index: 5; display: flex; align-items: center; gap: 4px; transform: translate(-50%,-50%); min-width: 0; min-height: 0; padding: 2px 6px; border-radius: 6px; background: var(--boe-token-surface-surface-secondary, #fbfbfb); font-size: 12px; font-weight: 600; white-space: nowrap; }\n  /* Unlabelled lines still need a reachable midpoint for pointer insert/selection. */\n  [part=connection]:has(> span:empty):not(:has(> small)) { padding: 0; background: transparent; min-width: calc(24px * var(--boe-process-inverse-zoom, 1)); min-height: calc(24px * var(--boe-process-inverse-zoom, 1)); }\n  [part=connection] > small { margin-left: 4px; color: var(--boe-token-text-text-secondary, #6f6f6f); font-size: 11px; font-weight: 400; font-variant-numeric: tabular-nums; }\n  [part=connection-actions] { position: absolute; top: 100%; left: 50%; transform: translateX(-50%); display: flex; gap: 4px; width: max-content; padding: 4px; border: 1px solid var(--boe-token-stroke-stroke, #e8e8e8); border-radius: 8px; background: var(--boe-token-surface-surface, #fff); box-shadow: var(--boe-shadow-overlay, 0 4px 12px rgb(0 0 0 / .16)); opacity: 0; pointer-events: none; }\n  [part=connection]:hover [part=connection-actions], [part=connection]:focus-within [part=connection-actions] { opacity: 1; pointer-events: auto; }\n  [part=connection-actions] button { min-height: 32px; padding: 4px; font-size: 12px; }\n  [part=note] { width: 208px; border: 1px dashed var(--boe-process-box-edge, var(--boe-control-edge, #858585)); border-radius: 8px; }\n  [part=section] { z-index: 0; border: 1px solid var(--boe-process-box-edge, var(--boe-control-edge, #858585)); border-radius: 16px; background: color-mix(in srgb, var(--boe-token-surface-surface, #fff) 45%, transparent); }\n  [part=section] strong { display: block; font-size: 12.5px; font-weight: 650; line-height: 1.3; }\n  [part=section] small { display: block; color: var(--boe-token-text-text-secondary, #6f6f6f); font-size: 11.5px; line-height: 1.35; }\n  [part=note], [part=section] { position: absolute; padding: 8px; pointer-events: none; }\n  [part=marquee] { position: absolute; border: 2px solid var(--boe-token-surface-surface-brand, #0061d5); background: color-mix(in srgb, var(--boe-token-surface-surface-brand, #0061d5) 12%, transparent); pointer-events: none; }\n  [part=connect-tooltip] { position: absolute; z-index: 20; max-width: 240px; padding: 5px 8px; border-radius: 7px; background: var(--boe-token-text-text, #141413); color: var(--boe-token-surface-surface, #fff); font-size: 12px; pointer-events: none; box-shadow: var(--boe-shadow-overlay, 0 4px 12px rgb(0 0 0 / .16)); }\n  [part=connect-tooltip][data-invalid=true] { background: var(--boe-token-text-status-text-error, #b92340); color: #fff; }\n  [part=ghost-box], [part=palette-ghost] { position: absolute; z-index: 5; display: flex; align-items: center; padding: 11px 12px; border: 1.5px dashed var(--boe-token-surface-surface-brand, #0061d5); border-radius: 8px; background: color-mix(in srgb, var(--boe-token-surface-surface-brand, #0061d5) 10%, var(--boe-token-surface-surface, #fff)); font-size: 13px; font-weight: 650; pointer-events: none; }\n  [part=guide] { position: absolute; background: var(--boe-token-surface-surface-brand, #0061d5); pointer-events: none; }\n  [part=measure] { position: absolute; padding: 4px; background: var(--boe-token-surface-surface, #fff); font-size: 12px; pointer-events: none; }\n  [part=insert-chooser] { max-width: calc(100vw - 32px); max-height: 65vh; overflow: auto; padding: 12px; border: 1px solid var(--boe-token-stroke-stroke, #e8e8e8); border-radius: 12px; background: var(--boe-token-surface-surface, #fff); }\n  [part=keyboard-chooser] { position: fixed; inset: auto; width: min(320px, calc(100vw - 24px)); max-height: min(420px, calc(100dvh - 24px)); margin: 0; overflow: auto; padding: 12px; border: 1px solid var(--boe-token-stroke-stroke, #e8e8e8); border-radius: 12px; background: var(--boe-token-surface-surface, #fff); color: var(--boe-token-text-text, #141413); box-shadow: var(--boe-shadow-overlay, 0 4px 12px rgb(0 0 0 / .16)); }\n  [part=chooser-title] { margin: 0 0 10px; font-size: 12px; font-weight: 650; line-height: 1.4; color: var(--boe-token-text-text-secondary, #6f6f6f); }\n  [part=controls] { position: absolute; left: 16px; bottom: 16px; z-index: 10; display: flex; align-items: center; gap: 2px; padding: 4px; border: 1px solid var(--boe-token-stroke-stroke, #e8e8e8); border-radius: 12px; background: var(--boe-token-surface-surface, #fff); box-shadow: var(--boe-shadow-overlay, 0 4px 12px rgb(0 0 0 / .16)); }\n  [part=controls] [data-command=reset] { min-width: 56px; font-variant-numeric: tabular-nums; }\n  [part=minimap] { position: absolute; right: 16px; bottom: 16px; width: 208px; height: 136px; touch-action: none; background: var(--boe-token-surface-surface, #fff); border: 1px solid var(--boe-token-stroke-stroke, #e8e8e8); border-radius: 12px; box-shadow: var(--boe-shadow-overlay, 0 4px 12px rgb(0 0 0 / .16)); }\n  [part=minimap] rect:not([data-viewport]) { fill: var(--boe-token-stroke-stroke-hover, #d3d3d3); }\n  [part=minimap] [data-viewport] { fill: color-mix(in srgb, var(--boe-token-surface-surface-brand, #0061d5) 9%, transparent); stroke: var(--boe-token-surface-surface-brand, #0061d5); stroke-width: 1; }\n  [part=selection-toolbar] { position: absolute; bottom: auto; z-index: 11; display: flex; flex-wrap: nowrap; gap: 2px; padding: 4px; border: 1px solid var(--boe-token-stroke-stroke, #e8e8e8); border-radius: 12px; background: var(--boe-token-surface-surface, #fff); box-shadow: var(--boe-shadow-overlay, 0 4px 12px rgb(0 0 0 / .16)); white-space: nowrap; }\n  [part=selection-toolbar] button { display: inline-flex; align-items: center; gap: 4px; }\n  [part=selection-plus] { font-size: 18px; line-height: 12px; font-weight: 500; }\n  [part=checks] { display: grid; gap: 6px; margin-top: 12px; }\n  [part=checks] button { color: var(--boe-token-text-status-text-error, #b92340); }\n  [part=process-heading] { display: grid; gap: 2px; padding: 0 16px 12px; }\n  :host([embed-mode]) [part=view-switch], :host([embed-mode]) [part=run-toggle], :host([embed-mode]) [part=view-menu] { display: none; }\n  [part=process-title] { font-size: 15px; line-height: 1.4; }\n  [part=process-summary] { color: var(--boe-token-text-text-secondary, #6f6f6f); font-size: 12.5px; }\n  [part=pane-tabs] { display: flex; flex-wrap: nowrap; gap: 4px; margin: 0; padding: 0 16px; border-bottom: 1px solid var(--boe-token-stroke-stroke, #e8e8e8); overflow-x: auto; }\n  [part=pane-tabs] button { flex: none; min-height: 40px; border: 0; border-bottom: 2px solid transparent; border-radius: 0; background: transparent; color: var(--boe-token-text-text-secondary, #6f6f6f); font-size: 13px; font-weight: 600; }\n  [part=pane-tabs] button[aria-selected=true] { color: var(--boe-token-text-text, #141413); border-bottom-color: currentColor; }\n  [part=editor], [part=pane-content] { padding: 8px 16px; }\n  [part=editor] { display: grid; align-content: start; gap: 12px; }\n  [part=inspector-kind] { display: none; }\n  [part=inspector-purpose] { margin: 0; color: var(--boe-token-text-text-secondary, #6f6f6f); font-size: 12.5px; }\n  [part=field] { display: grid; gap: 4px; }\n  [part=field] label { display: grid; gap: 5px; font-size: 12.5px; font-weight: 650; }\n  [part=field] :is(input:not([type=checkbox]),textarea,select) { width: 100%; min-height: 36px; padding: 7px 10px; border: 1px solid var(--boe-token-stroke-stroke, #e8e8e8); border-radius: 8px; background: var(--boe-token-surface-surface, #fff); color: var(--boe-token-text-text, #141413); font-family: inherit; font-size: 13px; line-height: 1.4; }\n  [part=field] textarea { min-height: 76px; resize: vertical; }\n  [part=field]:has([part=action-options]) { position: relative; }\n  [part=field]:has([part=action-options]) input { padding-right: 34px; }\n  [part=action-caret] { position: absolute; z-index: 1; top: 25px; right: 2px; width: 32px; min-height: 32px; padding: 0; border: 0; background: transparent; font-size: 18px; }\n  [part=action-options] { position: absolute; z-index: 30; top: calc(100% - 1px); left: 0; right: 0; max-height: 280px; overflow: auto; padding: 6px; border: 1px solid var(--boe-token-stroke-stroke, #e8e8e8); border-radius: 10px; background: var(--boe-token-surface-surface, #fff); box-shadow: var(--boe-shadow-overlay, 0 4px 12px rgb(0 0 0 / .16)); }\n  [part=action-options][hidden] { display: none; }\n  [part=action-options] button { display: block; width: 100%; min-height: 36px; padding: 7px 9px; border: 0; border-radius: 7px; text-align: start; background: transparent; font-size: 12.5px; }\n  [part=action-options] button:hover, [part=action-options] [aria-selected=true] { background: var(--boe-token-surface-surface-hover, #f4f4f4); }\n  [part=action-options] button strong { display: block; font-size: 13px; font-weight: 650; }\n  [part=action-options] button small { display: block; color: var(--boe-token-text-text-secondary, #6f6f6f); }\n  [part=action-options] [part=action-back] { color: var(--boe-token-text-text-secondary, #6f6f6f); }\n  [part=field] input[type=checkbox] { justify-self: start; width: 18px; height: 18px; accent-color: var(--boe-token-surface-surface-brand, #0061d5); }\n  [part=field] small { color: var(--boe-token-text-text-secondary, #6f6f6f); font-size: 12px; line-height: 1.4; }\n  [part=field] [part=field-problem] { color: var(--boe-token-text-status-text-error, #b92340); }\n  [part=variable-chips] { display: flex; flex-wrap: wrap; gap: 4px; }\n  [part=variable-chips] button { min-height: 24px; padding: 2px 8px; border: 1px solid var(--boe-token-stroke-stroke, #e8e8e8); border-radius: 12px; background: var(--boe-token-surface-surface-secondary, #fbfbfb); font-size: 11.5px; }\n  [part=leads-to] { display: grid; gap: 6px; padding-top: 10px; border-top: 1px solid var(--boe-token-stroke-stroke, #e8e8e8); }\n  [part=leads-to] h3 { margin: 0; font-size: 12.5px; }\n  [part=lead-row] { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 12.5px; }\n  [part=lead-row] button, [part=leads-to] > button, [part=inspector-actions] button { min-height: 28px; padding: 4px 8px; font-size: 12px; }\n  [part=inspector-metrics] { margin: 0; padding-top: 10px; border-top: 1px solid var(--boe-token-stroke-stroke, #e8e8e8); font-size: 12px; font-variant-numeric: tabular-nums; }\n  [part=inspector-metrics] h3 { margin: 0 0 6px; font-size: 12.5px; }\n  [part=inspector-metrics] p { margin: 0 0 8px; color: var(--boe-token-text-text-secondary, #6f6f6f); }\n  [part=inspector-metrics] dl { display: grid; grid-template-columns: 1fr auto; gap: 4px 8px; margin: 0; }\n  [part=inspector-metrics] dt { color: var(--boe-token-text-text-secondary, #6f6f6f); }\n  [part=inspector-metrics] dd { margin: 0; font-weight: 650; }\n  [part=inspector-actions] { display: flex; gap: 8px; padding-top: 10px; border-top: 1px solid var(--boe-token-stroke-stroke, #e8e8e8); }\n  [part=arrange-actions] { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 6px; }\n  [part=arrange-actions] button { min-height: 32px; padding: 5px 7px; font-size: 12px; text-align: start; }\n  [part=outline-intro] { margin: 4px 0 14px; color: var(--boe-token-text-text-secondary, #6f6f6f); font-size: 12.5px; line-height: 1.5; }\n  [part=copy-outline] { justify-self: start; min-height: 28px; margin-bottom: 8px; padding: 4px 10px; border-radius: 16px; font-size: 12px; font-weight: 650; }\n  [part=outline-list] { margin: 0; padding-left: 18px; display: grid; gap: 8px; }\n  [part=outline-list] [part=outline-list] { margin: 6px 0 0; gap: 6px; }\n  [part=outline-list] li { padding-left: 0; font-size: 12.5px; }\n  [part=outline-list] li::marker { color: var(--boe-token-text-text-secondary, #6f6f6f); }\n  [part=outline-list] button, [part=outline-list] strong { border: 0; border-radius: 4px; background: transparent; padding: 0; min-height: 0; font-size: 12.5px; font-weight: 650; line-height: 1.45; text-align: start; }\n  [part=outline-list] button:hover { color: var(--boe-token-surface-surface-brand, #0061d5); text-decoration: underline; }\n  [part=outline-list] button[aria-current=true] { color: var(--boe-token-surface-surface-brand, #0061d5); }\n  [part=outline-list] p { margin: 2px 0 0; color: var(--boe-token-text-text-secondary, #6f6f6f); font-size: 12px; line-height: 1.45; }\n  [part=inspector-heading] { margin: 0 0 2px; font-size: 15px; font-weight: 650; }\n  [part=inspector-heading][data-single=true]:not(:focus-visible) { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }\n  [part=checks] { margin: 0; padding: 0; }\n  [part=checks] button { width: 100%; border: 0; border-bottom: 1px solid var(--boe-token-stroke-stroke, #e8e8e8); border-radius: 0; text-align: start; background: transparent; }\n  [part=variable-row], [part=connection-row] { display: grid; gap: 4px; padding: 10px 0; border-bottom: 1px solid var(--boe-token-stroke-stroke, #e8e8e8); font-size: 12.5px; }\n  [part=variable-row] p { margin: 0; color: var(--boe-token-text-text-secondary, #6f6f6f); }\n  [part=variable-scope] { color: var(--boe-token-text-text-secondary, #6f6f6f); font-size: 11.5px; }\n  [part=variable-row] label { display: grid; gap: 4px; font-weight: 650; }\n  [part=variable-row] input { min-height: 36px; padding: 7px 10px; border: 1px solid var(--boe-token-stroke-stroke, #e8e8e8); border-radius: 8px; background: var(--boe-token-surface-surface, #fff); }\n  [part=help] { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }\n  :host([data-narrow]) [part=layout] { grid-template-columns: minmax(0,1fr); }\n  :host([data-narrow]) [part=layout] { overflow: visible; }\n  :host([data-narrow]) [part=pane-drawer] { display: none; position: absolute; z-index: 40; margin: 0; max-width: none; max-height: none; padding: 0; overflow: auto; border: 0; border-radius: 0; background: var(--boe-token-surface-surface, #fff); box-shadow: var(--boe-shadow-overlay, 0 4px 12px rgb(0 0 0 / .24)); }\n  :host([data-narrow]) [part=pane-drawer][open] { display: block; }\n  :host([data-narrow]) [part=pane-title] { display: block; position: absolute; top: 18px; left: 16px; margin: 0; font-size: 14px; font-weight: 650; line-height: 20px; }\n  :host([data-narrow]) [part=pane-close], :host([data-narrow]) [data-command=palette], :host([data-narrow]) [data-command=details] { display: inline-block; }\n  :host([data-narrow]) [part=pane-close] { position: absolute; top: 12px; right: 12px; z-index: 1; width: 28px; height: 28px; padding: 0; border-radius: 50%; font-size: 16px; font-weight: 600; line-height: 1; }\n  :host([data-narrow]) [part=pane-drawer][data-pane=palette] { left: 0; top: 0; bottom: auto; width: min(320px, 86%); height: 100%; max-height: 100%; }\n  :host([data-narrow]) [part=pane-drawer][data-pane=inspector] { left: 0; right: 0; top: auto; bottom: 0; width: 100%; height: min(62%, 560px); border-radius: 24px 24px 0 0; }\n  :host([data-narrow]) [part=pane-drawer][data-pane=inspector]::before { content: ''; display: block; width: 36px; height: 4px; margin: 6px auto; border-radius: 2px; background: var(--boe-token-text-text-secondary, #767676); opacity: .55; }\n  :host([data-narrow]) [part=palette], :host([data-narrow]) [part=inspector] { height: 100%; }\n  :host([data-narrow]) [part=palette] { padding-top: 54px; }\n  :host([data-narrow]) [part=palette-heading] { display: none; }\n  :host([data-narrow]) [part=minimap] { display: none; }\n  :host([data-narrow]) [part=toolbar] { justify-content: flex-start; }\n  :host([data-narrow]) [data-command=palette] { order: -2; }\n  :host([data-narrow]) [part=view-menu] { order: -1; }\n  :host([data-narrow]) [part=view-switch], :host([data-narrow]) [part=run-toggle] { display: none; }\n  :host([data-narrow]) [data-command=checks-status] { display: none; }\n  :host([data-narrow]:not([embed-mode])) [part=view-menu] { display: block; }\n  :host([data-narrow]) [part=controls] { left: 12px; bottom: 12px; }\n  :host([data-narrow]) [part=selection-toolbar] [part=selection-plus] + span { display: none; }\n  :host([data-phone]) [data-command=tidy] { display: none; }\n  :host([data-phone]) [data-command=undo], :host([data-phone]) [data-command=redo] { display: none; }\n  @media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition-duration: 0s !important; animation-duration: 0s !important; scroll-behavior: auto !important; } }\n";

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

@@ -198,7 +198,9 @@ export const processModelerDesign = `
   [part=end-grip]::before { content: ''; display: block; width: 10px; height: 10px; margin: 7px; border: 1.5px solid var(--boe-token-surface-surface-brand, #0061d5); border-radius: 50%; background: var(--boe-token-surface-surface, #fff); }
   [part=box]:hover [part=port], [part=box]:focus-within [part=port], [part=box][aria-current=true] [part=port], [part=frame]:hover [part=port] { opacity: 1; }
   [part=connection] { position: absolute; z-index: 5; display: flex; align-items: center; gap: 4px; transform: translate(-50%,-50%); min-width: 0; min-height: 0; padding: 2px 6px; border-radius: 6px; background: var(--boe-token-surface-surface-secondary, #fbfbfb); font-size: 12px; font-weight: 600; white-space: nowrap; }
-  [part=connection]:has(> span:empty) { padding: 0; background: transparent; min-width: 0; min-height: 0; }
+  /* Unlabelled lines still need a reachable midpoint for pointer insert/selection. */
+  [part=connection]:has(> span:empty):not(:has(> small)) { padding: 0; background: transparent; min-width: calc(24px * var(--boe-process-inverse-zoom, 1)); min-height: calc(24px * var(--boe-process-inverse-zoom, 1)); }
+  [part=connection] > small { margin-left: 4px; color: var(--boe-token-text-text-secondary, #6f6f6f); font-size: 11px; font-weight: 400; font-variant-numeric: tabular-nums; }
   [part=connection-actions] { position: absolute; top: 100%; left: 50%; transform: translateX(-50%); display: flex; gap: 4px; width: max-content; padding: 4px; border: 1px solid var(--boe-token-stroke-stroke, #e8e8e8); border-radius: 8px; background: var(--boe-token-surface-surface, #fff); box-shadow: var(--boe-shadow-overlay, 0 4px 12px rgb(0 0 0 / .16)); opacity: 0; pointer-events: none; }
   [part=connection]:hover [part=connection-actions], [part=connection]:focus-within [part=connection-actions] { opacity: 1; pointer-events: auto; }
   [part=connection-actions] button { min-height: 32px; padding: 4px; font-size: 12px; }
@@ -222,6 +224,8 @@ export const processModelerDesign = `
   [part=minimap] rect:not([data-viewport]) { fill: var(--boe-token-stroke-stroke-hover, #d3d3d3); }
   [part=minimap] [data-viewport] { fill: color-mix(in srgb, var(--boe-token-surface-surface-brand, #0061d5) 9%, transparent); stroke: var(--boe-token-surface-surface-brand, #0061d5); stroke-width: 1; }
   [part=selection-toolbar] { position: absolute; bottom: auto; z-index: 11; display: flex; flex-wrap: nowrap; gap: 2px; padding: 4px; border: 1px solid var(--boe-token-stroke-stroke, #e8e8e8); border-radius: 12px; background: var(--boe-token-surface-surface, #fff); box-shadow: var(--boe-shadow-overlay, 0 4px 12px rgb(0 0 0 / .16)); white-space: nowrap; }
+  [part=selection-toolbar] button { display: inline-flex; align-items: center; gap: 4px; }
+  [part=selection-plus] { font-size: 18px; line-height: 12px; font-weight: 500; }
   [part=checks] { display: grid; gap: 6px; margin-top: 12px; }
   [part=checks] button { color: var(--boe-token-text-status-text-error, #b92340); }
   [part=process-heading] { display: grid; gap: 2px; padding: 0 16px 12px; }
@@ -260,6 +264,7 @@ export const processModelerDesign = `
   [part=lead-row] button, [part=leads-to] > button, [part=inspector-actions] button { min-height: 28px; padding: 4px 8px; font-size: 12px; }
   [part=inspector-metrics] { margin: 0; padding-top: 10px; border-top: 1px solid var(--boe-token-stroke-stroke, #e8e8e8); font-size: 12px; font-variant-numeric: tabular-nums; }
   [part=inspector-metrics] h3 { margin: 0 0 6px; font-size: 12.5px; }
+  [part=inspector-metrics] p { margin: 0 0 8px; color: var(--boe-token-text-text-secondary, #6f6f6f); }
   [part=inspector-metrics] dl { display: grid; grid-template-columns: 1fr auto; gap: 4px 8px; margin: 0; }
   [part=inspector-metrics] dt { color: var(--boe-token-text-text-secondary, #6f6f6f); }
   [part=inspector-metrics] dd { margin: 0; font-weight: 650; }
@@ -307,6 +312,7 @@ export const processModelerDesign = `
   :host([data-narrow]) [data-command=checks-status] { display: none; }
   :host([data-narrow]:not([embed-mode])) [part=view-menu] { display: block; }
   :host([data-narrow]) [part=controls] { left: 12px; bottom: 12px; }
+  :host([data-narrow]) [part=selection-toolbar] [part=selection-plus] + span { display: none; }
   :host([data-phone]) [data-command=tidy] { display: none; }
   :host([data-phone]) [data-command=undo], :host([data-phone]) [data-command=redo] { display: none; }
   @media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition-duration: 0s !important; animation-duration: 0s !important; scroll-behavior: auto !important; } }

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

@@ -32,6 +32,7 @@ export declare class ProcessModeler<D = ProcessProjection, N = unknown> extends
     private insertion?;
     private keyboardInsertion?;
     private keyboardReturn?;
+    private transientChooserAnchor?;
     private stopKeyboardAnchor?;
     private activeDrawer?;
     private drawerReturn?;
@@ -149,6 +150,8 @@ export declare class ProcessModeler<D = ProcessProjection, N = unknown> extends
     move(id: string, x: number, y: number): void;
     private emitPositions;
     private translatedLayout;
+    /** Make room only on a simple, root-level horizontal connection. */
+    private reflowStraightInsert;
     tidy(): void;
     resize(id: string, width: number, height: number): void;
     routeLine(id: string, points: readonly {
@@ -160,6 +163,7 @@ export declare class ProcessModeler<D = ProcessProjection, N = unknown> extends
     setSection(section: NonNullable<ProcessLayout["sections"]>[number] | null, id?: string | undefined): void;
     zoomBy(factor: number): void;
     fit(): void;
+    private fitTo;
     private bounds;
     protected renderTemplate(): void;
     private setupPanes;
@@ -183,9 +187,14 @@ export declare class ProcessModeler<D = ProcessProjection, N = unknown> extends
     private markDropLine;
     private alignedPoint;
     private openChooser;
+    private nextEdit;
+    private nextChooserTitle;
+    private openChooserAtPoint;
+    private openLineChooser;
     private closeKeyboardChooser;
     private dismissKeyboardChooserOutside;
     private openKeyboardChooser;
+    private openAnchoredChooser;
     private addLayoutKind;
     private showConnectTooltip;
     protected update(): void;