@unofficialbox/box-open-elements 0.28.1 → 0.28.3

package/README.md

@@ -12,7 +12,7 @@
 
 Browse the full catalog on the **[live docs site](https://unofficialbox.github.io/box-open-elements)** — live previews, an events/properties inspector, per-framework code snippets (React / Angular / Vue / Svelte / HTML), and the foundations pages.
 
-The library is organized around three layers (see [taxonomy](https://github.com/unofficialbox/box-open-elements/blob/v0.28.1/docs/taxonomy.md) for the canonical model):
+The library is organized around three layers (see [taxonomy](https://github.com/unofficialbox/box-open-elements/blob/v0.28.3/docs/taxonomy.md) for the canonical model):
 
 - **Foundations** — design decisions as data: tokens, color, typography, iconography, accessibility, theming
 - **Components** — accessible Web Components for single controls, organized by category
@@ -77,7 +77,7 @@ selection.toggleSelection("1");
 - optimized component entrypoints: `@unofficialbox/box-open-elements/<name>`
 - patterns: `@unofficialbox/box-open-elements/patterns/<area>` and `@unofficialbox/box-open-elements/patterns/<area>/<module>`
 
-See the versioned [API guidelines](https://github.com/unofficialbox/box-open-elements/blob/v0.28.1/docs/api-guidelines.md).
+See the versioned [API guidelines](https://github.com/unofficialbox/box-open-elements/blob/v0.28.3/docs/api-guidelines.md).
 
 ## Developing
 
@@ -91,17 +91,17 @@ bun run docs     # build + serve the docs site at http://localhost:4600
 
 ## Documentation
 
-The versioned docs index is at [docs/README.md](https://github.com/unofficialbox/box-open-elements/blob/v0.28.1/docs/README.md). The most important entries:
-
-- [Taxonomy](https://github.com/unofficialbox/box-open-elements/blob/v0.28.1/docs/taxonomy.md)
-- [Architecture](https://github.com/unofficialbox/box-open-elements/blob/v0.28.1/docs/architecture.md)
-- [API Guidelines](https://github.com/unofficialbox/box-open-elements/blob/v0.28.1/docs/api-guidelines.md)
-- [Components catalog](https://github.com/unofficialbox/box-open-elements/blob/v0.28.1/docs/components/catalog.md) and [patterns catalog](https://github.com/unofficialbox/box-open-elements/blob/v0.28.1/docs/patterns/catalog.md)
-- [Using with React, Angular, Vue, and Svelte](https://github.com/unofficialbox/box-open-elements/blob/v0.28.1/docs/integration/frameworks.md)
-- [Design Tokens](https://github.com/unofficialbox/box-open-elements/blob/v0.28.1/docs/foundations/tokens.md)
-- [Content Explorer](https://github.com/unofficialbox/box-open-elements/blob/v0.28.1/docs/patterns/content-explorer.md)
-- [Box Server Integration](https://github.com/unofficialbox/box-open-elements/blob/v0.28.1/docs/integration/box-server.md)
-- [Agent UI guidelines](https://github.com/unofficialbox/box-open-elements/blob/v0.28.1/docs/patterns/agent-ui-guidelines.md), [building blocks](https://github.com/unofficialbox/box-open-elements/blob/v0.28.1/docs/patterns/agent-ui.md), and [motion](https://github.com/unofficialbox/box-open-elements/blob/v0.28.1/docs/foundations/motion.md)
+The versioned docs index is at [docs/README.md](https://github.com/unofficialbox/box-open-elements/blob/v0.28.3/docs/README.md). The most important entries:
+
+- [Taxonomy](https://github.com/unofficialbox/box-open-elements/blob/v0.28.3/docs/taxonomy.md)
+- [Architecture](https://github.com/unofficialbox/box-open-elements/blob/v0.28.3/docs/architecture.md)
+- [API Guidelines](https://github.com/unofficialbox/box-open-elements/blob/v0.28.3/docs/api-guidelines.md)
+- [Components catalog](https://github.com/unofficialbox/box-open-elements/blob/v0.28.3/docs/components/catalog.md) and [patterns catalog](https://github.com/unofficialbox/box-open-elements/blob/v0.28.3/docs/patterns/catalog.md)
+- [Using with React, Angular, Vue, and Svelte](https://github.com/unofficialbox/box-open-elements/blob/v0.28.3/docs/integration/frameworks.md)
+- [Design Tokens](https://github.com/unofficialbox/box-open-elements/blob/v0.28.3/docs/foundations/tokens.md)
+- [Content Explorer](https://github.com/unofficialbox/box-open-elements/blob/v0.28.3/docs/patterns/content-explorer.md)
+- [Box Server Integration](https://github.com/unofficialbox/box-open-elements/blob/v0.28.3/docs/integration/box-server.md)
+- [Agent UI guidelines](https://github.com/unofficialbox/box-open-elements/blob/v0.28.3/docs/patterns/agent-ui-guidelines.md), [building blocks](https://github.com/unofficialbox/box-open-elements/blob/v0.28.3/docs/patterns/agent-ui.md), and [motion](https://github.com/unofficialbox/box-open-elements/blob/v0.28.3/docs/foundations/motion.md)
 
 ## Contributing
 

package/dist/components/feedback/verdict-banner.d.ts

@@ -1,5 +1,5 @@
 import { BaseElement } from "../../core/index.js";
-/** Finished-run verdict with a single action and one-time polite announcement. */
+/** Finished-run verdict with optional secondary action and one-time polite announcement. */
 export declare class VerdictBanner extends BaseElement {
     static readonly tagName = "box-verdict-banner";
     static get observedAttributes(): string[];
@@ -16,6 +16,10 @@ export declare class VerdictBanner extends BaseElement {
     set heading(value: string);
     get headingLevel(): number;
     set headingLevel(value: number);
+    get size(): "default" | "large";
+    set size(value: "default" | "large");
+    get announce(): "polite" | "off";
+    set announce(value: "polite" | "off");
     get reasons(): string[];
     set reasons(value: string[]);
     protected renderTemplate(): void;

package/dist/components/feedback/verdict-banner.js

@@ -5,7 +5,8 @@ import { toneIcon } from "./tone.js";
 const styles = `
   :host { display:block; font:inherit; color:var(--boe-token-text-text,#222); container-type:inline-size; }
   :host([hidden]) { display:none!important; }
-  [part="banner"] { display:grid; grid-template-columns:20px minmax(0,1fr) auto; align-items:start; gap:.7rem; padding:1rem; border-radius:${boeRadius.med}; border:1px solid var(--boe-token-stroke-stroke,#dedede); background:var(--boe-token-surface-surface-secondary,#f4f4f4); }
+  [part="banner"] { display:flex; flex-wrap:wrap; align-items:start; gap:.7rem; padding:1rem; border-radius:${boeRadius.med}; border:1px solid var(--boe-token-stroke-stroke,#dedede); background:var(--boe-token-surface-surface-secondary,#f4f4f4); }
+  [part="main"] { display:grid; grid-template-columns:20px minmax(0,1fr); gap:.7rem; flex:1 1 calc(20px + .7rem + 16rem); min-inline-size:min(100%,calc(20px + .7rem + 16rem)); }
   :host([tone="passed"]) [part="banner"] { border-color:var(--boe-token-text-status-text-success,#187657); background:color-mix(in srgb,var(--boe-token-surface-status-surface-success,#26c281) 9%,var(--boe-token-surface-surface,#fff)); }
   :host([tone="missed"]) [part="banner"] { border-color:var(--boe-token-text-status-text-error,#b92340); background:color-mix(in srgb,var(--boe-token-surface-status-surface-error,#ed3757) 9%,var(--boe-token-surface-surface,#fff)); }
   [part="icon"] { inline-size:20px; block-size:20px; color:var(--boe-token-text-text-secondary,#6f6f6f); }
@@ -14,15 +15,18 @@ const styles = `
   [part="icon"] svg { inline-size:100%; block-size:100%; }
   [part="body"] { min-inline-size:0; }
   [part="heading"] { margin:0; font:inherit; font-weight:700; overflow-wrap:anywhere; }
+  :host([size="large"]) [part="heading"] { font-size:var(--boe-verdict-heading-font-size,1.125rem); line-height:1.35; }
   [part="reasons"] { margin:.45rem 0 0; padding-inline-start:1.2rem; overflow-wrap:anywhere; }
   [part="reasons"]:empty { display:none; }
-  @container (max-width:320px) { [part="banner"] { grid-template-columns:20px minmax(0,1fr); } [part="action"] { grid-column:2; } }
+  [part="action"] { display:flex; flex-wrap:wrap; align-items:center; gap:.5rem; max-inline-size:100%; }
+  [part="action"] slot { display:contents; }
+  @container (max-width:640px) { [part="action"] { margin-inline-start:calc(20px + .7rem); max-inline-size:calc(100% - 20px - .7rem); } }
 `;
 let nextHeadingId = 0;
-/** Finished-run verdict with a single action and one-time polite announcement. */
+/** Finished-run verdict with optional secondary action and one-time polite announcement. */
 export class VerdictBanner extends BaseElement {
     static tagName = "box-verdict-banner";
-    static get observedAttributes() { return ["tone", "heading", "heading-level"]; }
+    static get observedAttributes() { return ["tone", "heading", "heading-level", "size", "announce"]; }
     headingId = `boe-verdict-${++nextHeadingId}`;
     announcement = new FeedbackAnnouncement();
     headingEl;
@@ -36,11 +40,15 @@ export class VerdictBanner extends BaseElement {
     set heading(value) { this.setAttribute("heading", value); }
     get headingLevel() { const value = Number(this.getAttribute("heading-level") ?? 2); return Number.isInteger(value) && value >= 1 && value <= 6 ? value : 2; }
     set headingLevel(value) { this.setAttribute("heading-level", String(value)); }
+    get size() { return this.getAttribute("size") === "large" ? "large" : "default"; }
+    set size(value) { this.setAttribute("size", value); }
+    get announce() { return this.getAttribute("announce") === "off" ? "off" : "polite"; }
+    set announce(value) { this.setAttribute("announce", value); }
     get reasons() { return [...this.reasonsValue]; }
     set reasons(value) { this.reasonsValue = [...value]; if (this.isRendered)
         this.update(); }
     renderTemplate() {
-        this.shadowRoot.innerHTML = `<style>${styles}</style><section part="banner" role="group" aria-labelledby="${this.headingId}"><span part="icon" aria-hidden="true"></span><div part="body"><div part="heading" id="${this.headingId}" role="heading"></div><ul part="reasons"></ul></div><span part="action"><slot name="action"></slot></span></section>`;
+        this.shadowRoot.innerHTML = `<style>${styles}</style><section part="banner" role="group" aria-labelledby="${this.headingId}"><div part="main"><span part="icon" aria-hidden="true"></span><div part="body"><div part="heading" id="${this.headingId}" role="heading"></div><ul part="reasons"></ul></div></div><div part="action"><slot name="action"></slot><slot name="secondary-action"></slot></div></section>`;
         this.headingEl = this.shadowRoot.querySelector('[part="heading"]');
         this.reasonsEl = this.shadowRoot.querySelector('[part="reasons"]');
         this.iconEl = this.shadowRoot.querySelector('[part="icon"]');
@@ -50,7 +58,9 @@ export class VerdictBanner extends BaseElement {
         this.headingEl.setAttribute("aria-level", String(this.headingLevel));
         this.iconEl.innerHTML = toneIcon(this.tone === "passed" ? "success" : this.tone === "missed" ? "error" : "info");
         this.reasonsEl.replaceChildren(...this.reasonsValue.map(reason => { const item = document.createElement("li"); item.textContent = reason; return item; }));
-        if (!this.announced && this.heading && this.tone !== "none") {
+        if (this.announce === "off")
+            this.announcement.reset();
+        else if (!this.announced && this.heading && this.tone !== "none") {
             this.announced = true;
             this.announcement.update(this, this.heading, "polite");
         }

package/dist/components/forms/code-editor.d.ts

@@ -40,6 +40,8 @@ export declare class CodeEditor extends BaseElement {
     private wrapConfig;
     private wrapIndentConfig;
     private highlightsConfig;
+    private bracketColorsConfig;
+    private passKeysConfig;
     private highlightsInternal;
     private source?;
     private timer?;
@@ -56,6 +58,12 @@ export declare class CodeEditor extends BaseElement {
     }): void;
     get wrap(): boolean;
     set wrap(value: boolean);
+    get bracketColors(): boolean;
+    set bracketColors(value: boolean);
+    /** Space-separated CodeMirror key names reserved for the host, e.g. Mod-Enter Mod-s. */
+    get passKeys(): string;
+    set passKeys(value: string);
+    private passKeysExtension;
     get currentLineStyle(): "fill" | "border" | "none";
     set currentLineStyle(value: "fill" | "border" | "none");
     get hideHelp(): boolean;

package/dist/components/forms/code-editor.js

@@ -1,20 +1,74 @@
 import { BaseElement } from "../../core/index.js";
 import { basicSetup } from "codemirror";
 import { Compartment, EditorSelection, EditorState, Prec, Transaction, } from "@codemirror/state";
-import { Decoration, EditorView, keymap } from "@codemirror/view";
+import { Decoration, EditorView, ViewPlugin, keymap } from "@codemirror/view";
 import { indentWithTab } from "@codemirror/commands";
 import { javascript } from "@codemirror/lang-javascript";
 import { go } from "@codemirror/lang-go";
 import { autocompletion, closeCompletion, startCompletion, } from "@codemirror/autocomplete";
 import { closeSearchPanel } from "@codemirror/search";
 import { lintGutter, setDiagnostics } from "@codemirror/lint";
-import { HighlightStyle, syntaxHighlighting } from "@codemirror/language";
+import { HighlightStyle, syntaxHighlighting, syntaxTree } from "@codemirror/language";
 import { tags } from "@lezer/highlight";
+const openingBrackets = "([{", closingBrackets = ")]}";
+/** Walk parsed bracket tokens, not raw text: strings and comments stay untouched. */
+function bracketDecorations(view) {
+    const stack = [];
+    const tokens = [];
+    const visible = (from) => view.visibleRanges.some(range => from >= range.from && from < range.to);
+    const add = (from, className) => { if (visible(from))
+        tokens.push({ from, className }); };
+    const tree = syntaxTree(view.state);
+    tree.iterate({
+        enter(node) {
+            if (node.to !== node.from + 1 || !"()[]{}".includes(node.name))
+                return;
+            const char = view.state.doc.sliceString(node.from, node.to);
+            if (char !== node.name)
+                return;
+            const open = openingBrackets.indexOf(char);
+            if (open !== -1) {
+                stack.push({ from: node.from, char, depth: stack.length });
+                return;
+            }
+            const close = closingBrackets.indexOf(char);
+            if (close === -1)
+                return;
+            let match = stack.length - 1;
+            while (match >= 0 && openingBrackets.indexOf(stack[match].char) !== close)
+                match--;
+            if (match === -1) {
+                add(node.from, "boe-code-bracket-unmatched");
+                return;
+            }
+            for (const orphan of stack.splice(match + 1))
+                add(orphan.from, "boe-code-bracket-unmatched");
+            const pair = stack.pop();
+            const color = `boe-code-bracket-${(pair.depth % 3) + 1}`;
+            add(pair.from, color);
+            add(node.from, color);
+        },
+    });
+    // An incomplete parse can end before the document does; avoid falsely
+    // labeling an opening bracket unmatched until the rest has been parsed.
+    if (tree.length >= view.state.doc.length)
+        for (const orphan of stack)
+            add(orphan.from, "boe-code-bracket-unmatched");
+    return Decoration.set(tokens.sort((a, b) => a.from - b.from).map(({ from, className }) => Decoration.mark({ class: className }).range(from, from + 1)));
+}
+const bracketColorsExtension = ViewPlugin.fromClass(class {
+    decorations;
+    constructor(view) { this.decorations = bracketDecorations(view); }
+    update(update) {
+        if (update.docChanged || update.viewportChanged || syntaxTree(update.startState) !== syntaxTree(update.state))
+            this.decorations = bracketDecorations(update.view);
+    }
+}, { decorations: plugin => plugin.decorations });
 /** Optional CodeMirror entrypoint. Import `code-editor`, not the root catalog. */
 export class CodeEditor extends BaseElement {
     static tagName = "box-code-editor";
     static get observedAttributes() {
-        return ["current-line-style", "fill-height", "hide-help", "hide-problems", "language", "readonly", "label", "value", "wrap"];
+        return ["bracket-colors", "current-line-style", "fill-height", "hide-help", "hide-problems", "language", "pass-keys", "readonly", "label", "value", "wrap"];
     }
     valueInternal = "";
     problemsInternal = [];
@@ -26,6 +80,8 @@ export class CodeEditor extends BaseElement {
     wrapConfig = new Compartment();
     wrapIndentConfig = new Compartment();
     highlightsConfig = new Compartment();
+    bracketColorsConfig = new Compartment();
+    passKeysConfig = new Compartment();
     highlightsInternal = [];
     source;
     timer;
@@ -64,6 +120,17 @@ export class CodeEditor extends BaseElement {
     }
     get wrap() { return this.hasAttribute("wrap"); }
     set wrap(value) { this.toggleAttribute("wrap", value); }
+    get bracketColors() { return this.hasAttribute("bracket-colors"); }
+    set bracketColors(value) { this.toggleAttribute("bracket-colors", value); }
+    /** Space-separated CodeMirror key names reserved for the host, e.g. Mod-Enter Mod-s. */
+    get passKeys() { return this.getAttribute("pass-keys") ?? ""; }
+    set passKeys(value) { this.setAttribute("pass-keys", value); }
+    passKeysExtension() {
+        const keys = [...new Set(this.passKeys.split(/\s+/).filter(key => /^(?:(?:Mod|Ctrl|Alt|Shift|Meta)-)+(?:[A-Za-z0-9]+|Enter|Space|Escape)$/.test(key)))];
+        // Returning true prevents lower-priority editor commands, but CodeMirror
+        // leaves propagation intact so window-level host shortcuts still receive it.
+        return Prec.highest(keymap.of(keys.map(key => ({ key, run: () => true }))));
+    }
     get currentLineStyle() {
         const value = this.getAttribute("current-line-style");
         return value === "border" || value === "none" ? value : "fill";
@@ -225,8 +292,10 @@ export class CodeEditor extends BaseElement {
       .cm-scroller{max-height:var(--boe-code-editor-height,420px);min-height:160px;overflow:auto;font-family:var(--boe-code-font-family,monospace);font-size:var(--boe-code-font-size,14px);line-height:var(--boe-code-line-height,1.6)}
       :host([fill-height]){height:100%}
       :host([fill-height]) [part=editor],:host([fill-height]) .cm-editor,:host([fill-height]) .cm-scroller{height:100%;max-height:none;min-height:0}
-      .cm-gutters,.cm-panels,.cm-tooltip{background:var(--boe-token-surface-surface-secondary,#fbfbfb)!important;color:var(--boe-code-foreground,var(--boe-token-text-text,#222))!important;border-color:var(--boe-token-stroke-stroke,#ddd)!important}
-      .cm-gutters{color:var(--boe-code-gutter,var(--boe-token-text-text,#222))!important;border-right:var(--boe-code-gutter-border,1px solid var(--boe-token-stroke-stroke,#ddd))!important}
+      .cm-gutters,.cm-panels{background:var(--boe-token-surface-surface-secondary,#fbfbfb)!important;color:var(--boe-code-foreground,var(--boe-token-text-text,#222))!important;border-color:var(--boe-token-stroke-stroke,#ddd)!important}
+      .cm-gutters{color:var(--boe-code-gutter,var(--boe-token-text-text,#222))!important;border-right:var(--boe-code-gutter-border,1px solid var(--boe-token-stroke-stroke,#ddd))!important;font-variant-numeric:tabular-nums}
+      .cm-tooltip{background:var(--boe-code-popup-background,var(--boe-token-surface-surface-secondary,#fbfbfb))!important;color:var(--boe-code-popup-foreground,var(--boe-code-foreground,var(--boe-token-text-text,#222)))!important;border-color:var(--boe-code-popup-border,var(--boe-token-stroke-stroke,#ddd))!important}
+      .cm-tooltip .cm-diagnostic,.cm-tooltip-autocomplete ul li{color:var(--boe-code-popup-foreground,var(--boe-code-foreground,var(--boe-token-text-text,#222)))}
       .cm-cursor{border-left-color:var(--boe-code-caret,var(--boe-token-text-text,#222))}
       .cm-activeLine,.cm-activeLineGutter{background:color-mix(in srgb,var(--boe-token-surface-surface-brand,#0061d5) 12%,transparent)!important}
       :host([current-line-style=border]) .cm-activeLine{background:transparent!important;box-shadow:inset 0 1px var(--boe-code-current-line-border,var(--boe-token-stroke-stroke,#ddd)),inset 0 -1px var(--boe-code-current-line-border,var(--boe-token-stroke-stroke,#ddd))}
@@ -234,11 +303,17 @@ export class CodeEditor extends BaseElement {
       :host([current-line-style=border]) .cm-activeLineGutter,:host([current-line-style=none]) .cm-activeLineGutter{background:transparent!important}
       .cm-activeLineGutter{color:var(--boe-code-gutter-active,var(--boe-code-gutter,var(--boe-token-text-text,#222)))!important}
       .cm-selectionBackground,.cm-content ::selection{background:var(--boe-code-selection,color-mix(in srgb,var(--boe-token-surface-surface-brand,#0061d5) 12%,transparent))!important}
-      .boe-code-highlight{background:var(--boe-code-highlight-background,color-mix(in srgb,var(--boe-token-surface-surface-brand,#0061d5) 10%,transparent))!important;box-shadow:inset 3px 0 var(--boe-token-surface-surface-brand,#0061d5)}
-      .cm-matchingBracket,.cm-selectionMatch{background:color-mix(in srgb,var(--boe-token-surface-surface-brand,#0061d5) 15%,transparent)!important;color:inherit!important}
+      .boe-code-highlight{background:var(--boe-code-highlight-background,color-mix(in srgb,var(--boe-token-surface-surface-brand,#0061d5) 10%,transparent))!important;box-shadow:inset var(--boe-code-highlight-bar-width,3px) 0 var(--boe-code-highlight-bar-color,var(--boe-token-surface-surface-brand,#0061d5))}
+      .cm-matchingBracket{background:var(--boe-code-matching-bracket,color-mix(in srgb,var(--boe-token-surface-surface-brand,#0061d5) 15%,transparent))!important;color:inherit!important}
+      .cm-selectionMatch{background:var(--boe-code-selection-match,var(--boe-code-search-match,color-mix(in srgb,var(--boe-token-surface-surface-brand,#0061d5) 15%,transparent)))!important;color:inherit!important}
+      .cm-content .boe-code-bracket-1,.cm-content .boe-code-bracket-1 *{color:var(--boe-code-bracket-1,var(--boe-code-keyword,var(--boe-token-surface-surface-brand,#0061d5)))!important}
+      .cm-content .boe-code-bracket-2,.cm-content .boe-code-bracket-2 *{color:var(--boe-code-bracket-2,var(--boe-token-text-status-text-warning,#9a6500))!important}
+      .cm-content .boe-code-bracket-3,.cm-content .boe-code-bracket-3 *{color:var(--boe-code-bracket-3,var(--boe-token-text-status-text-success,#138a58))!important}
+      .cm-content .boe-code-bracket-unmatched,.cm-content .boe-code-bracket-unmatched *{color:var(--boe-code-bracket-unmatched,var(--boe-token-text-status-text-error,#b92340))!important}
       .cm-nonmatchingBracket{color:var(--boe-token-text-status-text-error,#b92340)!important}
-      .cm-searchMatch{background:color-mix(in srgb,var(--boe-token-text-status-text-warning,#9a6500) 20%,transparent);outline:none}
-      .cm-searchMatch-selected,.cm-tooltip-autocomplete ul li[aria-selected=true]{background:var(--boe-token-surface-surface-brand,#0061d5)!important;color:var(--boe-token-text-text-on-brand,#fff)!important}
+      .cm-searchMatch{background:var(--boe-code-search-match,color-mix(in srgb,var(--boe-token-text-status-text-warning,#9a6500) 20%,transparent));outline:none}
+      .cm-searchMatch-selected{background:var(--boe-code-search-match-selected,var(--boe-token-surface-surface-brand,#0061d5))!important;color:var(--boe-code-search-match-selected-foreground,var(--boe-token-text-text-on-brand,#fff))!important}
+      .cm-tooltip-autocomplete ul li[aria-selected=true]{background:var(--boe-code-popup-selected-background,var(--boe-token-surface-surface-brand,#0061d5))!important;color:var(--boe-code-popup-selected-foreground,var(--boe-token-text-text-on-brand,#fff))!important}
       .cm-panels input,.cm-panels button,.cm-foldPlaceholder{background:var(--boe-token-surface-surface,#fff);color:var(--boe-token-text-text,#222);border:1px solid var(--boe-token-stroke-stroke,#ddd)}
       .cm-lintRange-error,.cm-lintRange-warning,.cm-lintRange-info{background-image:none;text-decoration-line:underline;text-decoration-style:wavy;text-decoration-thickness:1px;text-underline-offset:3px}
       .cm-lintRange-error,.cm-diagnostic-error{color:inherit;text-decoration-color:var(--boe-token-text-status-text-error,#b92340);border-left-color:var(--boe-token-text-status-text-error,#b92340)}
@@ -342,6 +417,8 @@ export class CodeEditor extends BaseElement {
                         this.wrapConfig.of(this.wrap ? EditorView.lineWrapping : []),
                         this.wrapIndentConfig.of(this.wrapIndentExtension()),
                         this.highlightsConfig.of(this.highlightExtension()),
+                        this.bracketColorsConfig.of(this.bracketColors ? bracketColorsExtension : []),
+                        this.passKeysConfig.of(this.passKeysExtension()),
                         syntaxHighlighting(HighlightStyle.define([
                             {
                                 tag: tags.controlKeyword,
@@ -434,6 +511,8 @@ export class CodeEditor extends BaseElement {
                         this.wrapConfig.reconfigure(this.wrap ? EditorView.lineWrapping : []),
                         this.wrapIndentConfig.reconfigure(this.wrapIndentExtension()),
                         this.highlightsConfig.reconfigure(this.highlightExtension()),
+                        this.bracketColorsConfig.reconfigure(this.bracketColors ? bracketColorsExtension : []),
+                        this.passKeysConfig.reconfigure(this.passKeysExtension()),
                     ],
                 });
             }

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    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] { 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: 6px; white-space: nowrap; font-size: 13px; font-weight: 600; }\n  [part=run-toggle] input { accent-color: var(--boe-token-surface-surface-brand, #0061d5); }\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=pane-drawer]::backdrop, [part=insert-chooser]::backdrop { background: rgb(0 0 0 / .45); }\n  [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=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, var(--boe-token-stroke-stroke-hover, #d3d3d3) 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] { position: absolute; z-index: 12; top: 12px; left: 50%; translate: -50% 0; display: flex; align-items: center; gap: 12px; max-width: calc(100% - 24px); padding: 8px 12px; border: 1px solid var(--boe-token-stroke-status-stroke-warning, #9a6b00); border-radius: 8px; background: var(--boe-token-surface-status-surface-warning, #fff7df); color: var(--boe-token-text-status-text-warning, #6b4a00); box-shadow: var(--boe-shadow-overlay, 0 4px 12px rgb(0 0 0 / .16)); font-size: 12.5px; cursor: default; }\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=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=process-heading], :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=pane-drawer] { display: none; position: fixed; 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-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; min-height: 28px; padding: 4px 9px; border-radius: 14px; font-size: 12px; }\n  :host([data-narrow]) [part=pane-drawer][data-pane=palette] { left: 0; top: 0; bottom: 0; width: min(320px, 86vw); }\n  :host([data-narrow]) [part=pane-drawer][data-pane=inspector] { left: 0; right: 0; top: auto; bottom: 0; width: 100%; height: min(62vh, 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-surface-surface-secondary, #e8e8e8); }\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=minimap] { display: none; }\n  :host([data-narrow]) [part=toolbar] { justify-content: flex-start; }\n  :host([data-narrow]) [part=view-switch], :host([data-narrow]) [part=run-toggle] { display: none; }\n  :host([data-narrow]) [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  @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    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: 6px; white-space: nowrap; font-size: 13px; font-weight: 600; }\n  [part=run-toggle] input { accent-color: var(--boe-token-surface-surface-brand, #0061d5); }\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=pane-drawer]::backdrop, [part=insert-chooser]::backdrop { 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=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] { position: absolute; z-index: 12; top: 12px; left: 50%; translate: -50% 0; display: flex; align-items: center; gap: 12px; max-width: calc(100% - 24px); padding: 8px 12px; border: 1px solid var(--boe-token-stroke-status-stroke-warning, #9a6b00); border-radius: 8px; background: var(--boe-token-surface-status-surface-warning, #fff7df); color: var(--boe-token-text-status-text-warning, #6b4a00); box-shadow: var(--boe-shadow-overlay, 0 4px 12px rgb(0 0 0 / .16)); font-size: 12.5px; cursor: default; }\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=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=process-heading], :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=pane-drawer] { display: none; position: fixed; 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: 0; width: min(320px, 86vw); }\n  :host([data-narrow]) [part=pane-drawer][data-pane=inspector] { left: 0; right: 0; top: auto; bottom: 0; width: 100%; height: min(62vh, 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=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]) [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";

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

@@ -14,7 +14,7 @@ export const processModelerDesign = `
     background: var(--boe-token-surface-surface, #fff);
     font: 14px/1.5 var(--boe-token-font-family-base, Inter, sans-serif);
   }
-  [part=sr-only], [part=status] { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
+  [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; }
   [part=toolbar] {
     min-height: 56px;
     margin: 0;
@@ -63,7 +63,7 @@ export const processModelerDesign = `
   }
   [part=pane-drawer] { display: contents; color: inherit; }
   [part=pane-drawer]::backdrop, [part=insert-chooser]::backdrop { background: rgb(0 0 0 / .45); }
-  [part=pane-close], [data-command=palette], [data-command=details] { display: none; }
+  [part=pane-title], [part=pane-close], [data-command=palette], [data-command=details] { display: none; }
   [part=palette], [part=inspector] {
     min-width: 0;
     overflow: auto;
@@ -106,7 +106,7 @@ export const processModelerDesign = `
     position: relative; min-width: 0; height: 100%; overflow: hidden;
     border: 0; border-radius: 0;
     background-color: var(--boe-token-surface-surface-secondary, #fbfbfb);
-    background-image: radial-gradient(circle, var(--boe-token-stroke-stroke-hover, #d3d3d3) 1px, transparent 1.2px);
+    background-image: radial-gradient(circle, color-mix(in srgb, var(--boe-token-text-text-secondary, #6f6f6f) 26%, transparent) 1px, transparent 1.2px);
     background-size: 12px 12px;
     touch-action: none; user-select: none; cursor: grab;
   }
@@ -271,18 +271,22 @@ export const processModelerDesign = `
   :host([data-narrow]) [part=layout] { grid-template-columns: minmax(0,1fr); }
   :host([data-narrow]) [part=pane-drawer] { display: none; position: fixed; 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)); }
   :host([data-narrow]) [part=pane-drawer][open] { display: block; }
+  :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; }
   :host([data-narrow]) [part=pane-close], :host([data-narrow]) [data-command=palette], :host([data-narrow]) [data-command=details] { display: inline-block; }
-  :host([data-narrow]) [part=pane-close] { position: absolute; top: 12px; right: 12px; z-index: 1; min-height: 28px; padding: 4px 9px; border-radius: 14px; font-size: 12px; }
+  :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; }
   :host([data-narrow]) [part=pane-drawer][data-pane=palette] { left: 0; top: 0; bottom: 0; width: min(320px, 86vw); }
   :host([data-narrow]) [part=pane-drawer][data-pane=inspector] { left: 0; right: 0; top: auto; bottom: 0; width: 100%; height: min(62vh, 560px); border-radius: 24px 24px 0 0; }
-  :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-surface-surface-secondary, #e8e8e8); }
+  :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; }
   :host([data-narrow]) [part=palette], :host([data-narrow]) [part=inspector] { height: 100%; }
   :host([data-narrow]) [part=palette] { padding-top: 54px; }
   :host([data-narrow]) [part=minimap] { display: none; }
   :host([data-narrow]) [part=toolbar] { justify-content: flex-start; }
+  :host([data-narrow]) [data-command=palette] { order: -2; }
+  :host([data-narrow]) [part=view-menu] { order: -1; }
   :host([data-narrow]) [part=view-switch], :host([data-narrow]) [part=run-toggle] { display: none; }
   :host([data-narrow]) [part=view-menu] { display: block; }
   :host([data-narrow]) [part=controls] { left: 12px; bottom: 12px; }
   :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.js

@@ -517,7 +517,7 @@ export class ProcessModeler extends BaseElement {
         };
     }
     renderTemplate() {
-        this.shadowRoot.innerHTML = `<style>${processModelerDesign}</style><div part="toolbar" role="toolbar" aria-label="Diagram controls"><button data-command="zoom-out">Zoom out</button><button data-command="reset">100%</button><button data-command="zoom-in">Zoom in</button><button data-command="fit">Fit the whole process</button><button data-command="tidy">Tidy up</button><button data-command="undo">Undo</button><button data-command="redo">Redo</button><button data-command="snap" aria-pressed="false">Snap to grid</button><button data-command="lock" aria-pressed="false">Lock diagram</button></div><div part="layout"><div part="canvas" tabindex="0" role="region" aria-label="Process diagram" aria-describedby="process-help"><div part="world"></div><svg part="minimap" role="img" aria-label="Diagram overview. Click to jump"></svg></div><div part="inspector" role="region" aria-label="Process details"><div part="palette"><label>Find a building block<input type="search" part="search"></label><div part="choices"></div></div><div part="editor"></div><div part="checks" role="region" aria-label="Checks"></div></div></div><p part="help" id="process-help">Tab moves between steps. Alt plus an arrow selects the next step that way. Arrows move the selected step; Shift moves it four grid squares. N opens the building-block chooser. Enter edits. Delete removes. Shift plus 1 fits the process. Drag the background to pan; pinch or use the controls to zoom. Escape cancels connecting.</p><div part="status" role="status" aria-live="polite"></div>`;
+        this.shadowRoot.innerHTML = `<style>${processModelerDesign}</style><div part="toolbar" role="toolbar" aria-label="Diagram controls"><button data-command="zoom-out">Zoom out</button><button data-command="reset">100%</button><button data-command="zoom-in">Zoom in</button><button data-command="fit">Fit the whole process</button><button data-command="tidy">Tidy up</button><button data-command="undo">Undo</button><button data-command="redo">Redo</button><button data-command="snap" aria-pressed="false">Snap to grid</button><button data-command="lock" aria-pressed="false">Lock diagram</button></div><div part="layout"><div part="canvas" tabindex="0" role="region" aria-label="Process diagram" aria-describedby="process-help"><div part="world"></div><svg part="minimap" role="img" aria-label="Diagram overview. Click to jump"></svg></div><div part="inspector" role="region" aria-label="Process details"><div part="palette"><label>Find a building block<input type="search" part="search"></label><div part="choices"></div></div><div part="editor"></div><div part="checks" role="region" aria-label="Checks"></div></div></div><p part="help" id="process-help">Tab moves between steps. Alt plus an arrow selects the next step that way. Arrows move the selected step; Shift moves it four grid squares. N opens the building-block chooser. Enter edits. Delete removes. Shift plus 1 fits the process. Drag the background to pan; pinch or use the controls to zoom. Escape cancels connecting.</p><div part="status" role="status" aria-live="polite"></div><div part="urgent-status" role="alert" aria-live="assertive"></div>`;
         const chooser = document.createElement("dialog");
         chooser.setAttribute("part", "insert-chooser");
         chooser.setAttribute("aria-label", "Insert a building block");
@@ -624,9 +624,18 @@ export class ProcessModeler extends BaseElement {
             dialog.setAttribute("part", "pane-drawer");
             dialog.setAttribute("aria-label", label);
             dialog.dataset.pane = part;
+            if (part === "palette") {
+                const title = document.createElement("h2");
+                title.id = "process-palette-title";
+                title.setAttribute("part", "pane-title");
+                title.textContent = "Add to the process";
+                dialog.removeAttribute("aria-label");
+                dialog.setAttribute("aria-labelledby", title.id);
+                dialog.append(title);
+            }
             const close = document.createElement("button");
             close.setAttribute("part", "pane-close");
-            close.textContent = 'Close';
+            close.textContent = '×';
             close.setAttribute('aria-label', `Close ${label.toLowerCase()}`);
             close.onclick = () => dismissModal(dialog);
             dialog.append(close, pane);
@@ -638,7 +647,8 @@ export class ProcessModeler extends BaseElement {
             trigger.dataset.command = part === "palette" ? "palette" : "details";
             trigger.textContent = part === "palette" ? "Add" : "Details";
             trigger.setAttribute("aria-label", `Open ${label.toLowerCase()}`);
-            trigger.onclick = () => promoteModal(dialog);
+            trigger.onclick = () => { if (promoteModal(dialog) && part === "palette")
+                searchLabel.querySelector('input')?.focus(); };
             toolbar.append(trigger);
         }
         const inspector = root.querySelector('[part=inspector]');
@@ -814,7 +824,7 @@ export class ProcessModeler extends BaseElement {
             content.append(checks);
             if (!this.allChecks.length) {
                 const message = document.createElement("p");
-                message.textContent = "No checks to resolve.";
+                message.textContent = "Ready to run";
                 content.prepend(message);
             }
         }
@@ -980,6 +990,17 @@ export class ProcessModeler extends BaseElement {
         });
         this.shadowRoot.querySelector("[part=search]").addEventListener("input", () => this.renderPalette());
         const canvas = this.shadowRoot.querySelector("[part=canvas]");
+        this.shadowRoot.addEventListener("keydown", event => {
+            if (event.key !== "Escape")
+                return;
+            const menu = this.shadowRoot.querySelector('[part=view-menu]');
+            if (!menu?.open)
+                return;
+            menu.open = false;
+            menu.querySelector("summary")?.focus();
+            event.preventDefault();
+            event.stopPropagation();
+        }, true);
         canvas.addEventListener("keydown", (event) => this.onKey(event));
         canvas.addEventListener('keyup', event => { if (event.key === ' ')
             this.spacePressed = false; });
@@ -1101,6 +1122,7 @@ export class ProcessModeler extends BaseElement {
             return;
         }
         if (event.key === "Escape") {
+            const wasConnecting = Boolean(this.connecting || this.pendingReattach || this.portDrag || this.endDrag);
             this.connecting = null;
             this.pendingReattach = undefined;
             if (this.selectedLineId)
@@ -1111,7 +1133,8 @@ export class ProcessModeler extends BaseElement {
             this.drag = undefined;
             this.pointers.clear();
             this.refresh();
-            this.setStatus("Connecting cancelled");
+            if (wasConnecting)
+                this.setStatus("Connecting cancelled");
             return;
         }
         if (event.shiftKey && (event.key === "1" || event.key === "!" || event.code === "Digit1")) {
@@ -2094,7 +2117,7 @@ export class ProcessModeler extends BaseElement {
                     this.select(box.id);
                     this.focusBox(box.id);
                 }
-                this.setStatus(check.message);
+                this.setStatus(check.message, true);
             });
             checks.append(button);
         });
@@ -2590,8 +2613,9 @@ export class ProcessModeler extends BaseElement {
             .find((box) => box.dataset.boxId === id)
             ?.focus();
     }
-    setStatus(message) {
-        this.shadowRoot.querySelector("[part=status]").textContent = message;
+    setStatus(message, urgent = false) {
+        this.shadowRoot.querySelector(urgent ? "[part=status]" : "[part=urgent-status]").textContent = "";
+        this.shadowRoot.querySelector(urgent ? "[part=urgent-status]" : "[part=status]").textContent = message;
     }
 }
 ProcessModeler.register();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@unofficialbox/box-open-elements",
-  "version": "0.28.1",
+  "version": "0.28.3",
   "description": "Box Open Elements: an open, framework-agnostic design system and web component library for Box-style experiences",
   "license": "MIT",
   "homepage": "https://unofficialbox.github.io/box-open-elements",