@unofficialbox/box-open-elements 0.33.0 → 0.35.0

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.33.0/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.35.0/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.33.0/docs/api-guidelines.md).
+See the versioned [API guidelines](https://github.com/unofficialbox/box-open-elements/blob/v0.35.0/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.33.0/docs/README.md). The most important entries:
-
-- [Taxonomy](https://github.com/unofficialbox/box-open-elements/blob/v0.33.0/docs/taxonomy.md)
-- [Architecture](https://github.com/unofficialbox/box-open-elements/blob/v0.33.0/docs/architecture.md)
-- [API Guidelines](https://github.com/unofficialbox/box-open-elements/blob/v0.33.0/docs/api-guidelines.md)
-- [Components catalog](https://github.com/unofficialbox/box-open-elements/blob/v0.33.0/docs/components/catalog.md) and [patterns catalog](https://github.com/unofficialbox/box-open-elements/blob/v0.33.0/docs/patterns/catalog.md)
-- [Using with React, Angular, Vue, and Svelte](https://github.com/unofficialbox/box-open-elements/blob/v0.33.0/docs/integration/frameworks.md)
-- [Design Tokens](https://github.com/unofficialbox/box-open-elements/blob/v0.33.0/docs/foundations/tokens.md)
-- [Content Explorer](https://github.com/unofficialbox/box-open-elements/blob/v0.33.0/docs/patterns/content-explorer.md)
-- [Box Server Integration](https://github.com/unofficialbox/box-open-elements/blob/v0.33.0/docs/integration/box-server.md)
-- [Agent UI guidelines](https://github.com/unofficialbox/box-open-elements/blob/v0.33.0/docs/patterns/agent-ui-guidelines.md), [building blocks](https://github.com/unofficialbox/box-open-elements/blob/v0.33.0/docs/patterns/agent-ui.md), and [motion](https://github.com/unofficialbox/box-open-elements/blob/v0.33.0/docs/foundations/motion.md)
+The versioned docs index is at [docs/README.md](https://github.com/unofficialbox/box-open-elements/blob/v0.35.0/docs/README.md). The most important entries:
+
+- [Taxonomy](https://github.com/unofficialbox/box-open-elements/blob/v0.35.0/docs/taxonomy.md)
+- [Architecture](https://github.com/unofficialbox/box-open-elements/blob/v0.35.0/docs/architecture.md)
+- [API Guidelines](https://github.com/unofficialbox/box-open-elements/blob/v0.35.0/docs/api-guidelines.md)
+- [Components catalog](https://github.com/unofficialbox/box-open-elements/blob/v0.35.0/docs/components/catalog.md) and [patterns catalog](https://github.com/unofficialbox/box-open-elements/blob/v0.35.0/docs/patterns/catalog.md)
+- [Using with React, Angular, Vue, and Svelte](https://github.com/unofficialbox/box-open-elements/blob/v0.35.0/docs/integration/frameworks.md)
+- [Design Tokens](https://github.com/unofficialbox/box-open-elements/blob/v0.35.0/docs/foundations/tokens.md)
+- [Content Explorer](https://github.com/unofficialbox/box-open-elements/blob/v0.35.0/docs/patterns/content-explorer.md)
+- [Box Server Integration](https://github.com/unofficialbox/box-open-elements/blob/v0.35.0/docs/integration/box-server.md)
+- [Agent UI guidelines](https://github.com/unofficialbox/box-open-elements/blob/v0.35.0/docs/patterns/agent-ui-guidelines.md), [building blocks](https://github.com/unofficialbox/box-open-elements/blob/v0.35.0/docs/patterns/agent-ui.md), and [motion](https://github.com/unofficialbox/box-open-elements/blob/v0.35.0/docs/foundations/motion.md)
 
 ## Contributing
 

package/dist/native-types.d.ts

@@ -122,7 +122,7 @@ export interface BoxElementPropertyKeys {
     "box-presence": "label" | "max" | "transport" | "users";
     "box-preview-element": "actions" | "adapterState" | "heading" | "itemLabel" | "message" | "provider" | "providerAdapter" | "providerLabel" | "status";
     "box-preview-header": "actions" | "breadcrumbs" | "heading" | "message" | "status";
-    "box-process-modeler": "catalog" | "connections" | "detail" | "disableConnections" | "document" | "embedMode" | "fields" | "headingLevel" | "history" | "lastRun" | "layout" | "locked" | "model" | "outline" | "processSummary" | "processTitle" | "renderInspector" | "selectedPath" | "showLastRun" | "snapToGrid" | "variables" | "variablesEditable";
+    "box-process-modeler": "catalog" | "connections" | "connectionsHelp" | "detail" | "disableConnections" | "document" | "embedMode" | "fields" | "headingLevel" | "history" | "lastRun" | "layout" | "locked" | "model" | "outline" | "processSummary" | "processTitle" | "renderInspector" | "selectedPath" | "showLastRun" | "snapToGrid" | "variables" | "variablesEditable";
     "box-progress-bar": "hideLabel" | "label" | "max" | "value";
     "box-progress-ring": "label" | "max" | "size" | "value";
     "box-progress-steps": "compact" | "items" | "label" | "value";

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

@@ -1,2 +1,2 @@
 /** Riptide Diagram anatomy expressed through public Box Open Elements tokens. */
-export declare const processModelerDesign = "\n  :host([hidden]), [hidden] { display: none !important; }\n  *, *::before, *::after { box-sizing: border-box; }\n  button, input, textarea, select { font: inherit; color: inherit; }\n  button { min-height: 36px; padding: 8px; border: 1px solid var(--boe-token-stroke-stroke, #e8e8e8); border-radius: 8px; background: var(--boe-token-surface-surface, #fff); cursor: pointer; }\n  button:disabled { opacity: .5; cursor: default; }\n  :is(button,input,textarea,select,[part=canvas],[part=minimap],[part=box],[part=frame]):focus-visible { outline: 2px solid var(--boe-token-surface-surface-brand, #0061d5); outline-offset: 2px; }\n  :host {\n    display: block;\n    position: relative;\n    isolation: isolate;\n    min-width: 0;\n    --boe-process-box-edge: color-mix(in srgb, var(--boe-token-text-text, #141413) 55%, var(--boe-token-surface-surface, #fff));\n    color: var(--boe-token-text-text, #141413);\n    background: var(--boe-token-surface-surface, #fff);\n    font: 14px/1.5 var(--boe-token-font-family-base, Inter, sans-serif);\n  }\n  [part=sr-only], [part=status], [part=urgent-status] { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }\n  [part=toolbar] {\n    min-height: 56px;\n    margin: 0;\n    padding: 8px 16px;\n    display: flex;\n    align-items: center;\n    justify-content: flex-end;\n    gap: 8px;\n    flex-wrap: wrap;\n    border-bottom: 1px solid var(--boe-token-stroke-stroke, #e8e8e8);\n    background: var(--boe-token-surface-surface, #fff);\n  }\n  [part=toolbar] button, [part=controls] button, [part=selection-toolbar] button {\n    min-height: 30px;\n    padding: 4px 10px;\n    border: 1px solid transparent;\n    border-radius: 8px;\n    background: transparent;\n    font-size: 13px;\n    font-weight: 600;\n  }\n  [part=toolbar] svg, [part=controls] svg { width: 16px; height: 16px; display: block; }\n  [part=toolbar] [data-command=undo], [part=toolbar] [data-command=redo], [part=controls] button:not([data-command=reset]) { width: 30px; height: 30px; padding: 6px; display: grid; place-items: center; }\n  [part=controls] [data-command=snap][aria-pressed=true], [part=controls] [data-command=lock][aria-pressed=true] { background: color-mix(in srgb, var(--boe-token-surface-surface-brand, #0061d5) 10%, var(--boe-token-surface-surface, #fff)); color: var(--boe-token-surface-surface-brand, #0061d5); }\n  [part=toolbar] button:hover, [part=controls] button:hover, [part=selection-toolbar] button:hover {\n    background: var(--boe-token-surface-surface-hover, #f4f4f4);\n  }\n  [part=toolbar] [data-command=tidy] { border-color: var(--boe-token-stroke-stroke, #e8e8e8); border-radius: 18px; }\n  [part=view-switch] { display: flex; gap: 2px; padding: 3px; border: 1px solid var(--boe-token-stroke-stroke, #e8e8e8); border-radius: 20px; }\n  [part=view-switch] button { border-radius: 16px; }\n  [part=view-switch] button[aria-pressed=true] { border-color: var(--boe-token-stroke-stroke, #e8e8e8); background: var(--boe-token-surface-surface, #fff); }\n  [part=run-toggle] { display: flex; align-items: center; gap: 8px; white-space: nowrap; font-size: 13px; font-weight: 600; cursor: pointer; }\n  [part=run-toggle] input { appearance: none; position: relative; width: 32px; height: 18px; margin: 0; border: 0; border-radius: 9px; background: var(--boe-token-surface-surface-hover, #f4f4f4); cursor: pointer; transition: background var(--boe-profile-motion-interactive, 200ms) ease-out; }\n  [part=run-toggle] input::after { content: ''; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%; background: var(--boe-token-surface-surface, #fff); box-shadow: 0 1px 2px rgb(0 0 0 / .25); transition: transform var(--boe-profile-motion-interactive, 200ms) ease-out; }\n  [part=run-toggle] input:checked { background: var(--boe-token-surface-surface-brand, #0061d5); }\n  [part=run-toggle] input:checked::after { transform: translateX(14px); }\n  [part=run-toggle] input:focus-visible { outline: 2px solid var(--boe-token-surface-surface-brand, #0061d5); outline-offset: 2px; }\n  [part=toolbar] [data-command=checks-status] { white-space: nowrap; color: var(--boe-token-text-text-secondary, #6f6f6f); }\n  [part=toolbar] [data-command=checks-status][data-state=bad] { color: var(--boe-token-text-status-text-error, #b92340); }\n  [part=view-menu] { display: none; position: relative; }\n  [part=view-menu] summary { list-style: none; padding: 4px 14px; border: 1px solid var(--boe-token-stroke-stroke, #e8e8e8); border-radius: 18px; font-size: 13px; font-weight: 600; cursor: pointer; }\n  [part=view-menu][open] { z-index: 20; }\n  [part=view-menu-options] { position: absolute; z-index: 20; top: calc(100% + 4px); left: 0; width: 192px; padding: 6px; border: 1px solid var(--boe-token-stroke-stroke, #e8e8e8); border-radius: 10px; background: var(--boe-token-surface-surface, #fff); box-shadow: var(--boe-shadow-overlay, 0 4px 12px rgb(0 0 0 / .16)); }\n  [part=view-menu] button { display: block; width: 100%; text-align: start; background: transparent; }\n  [part=layout] {\n    display: grid;\n    grid-template-columns: 248px minmax(0, 1fr) 320px;\n    gap: 0;\n    min-height: 0;\n    height: var(--boe-process-height, 660px);\n    overflow: hidden;\n  }\n  [part=pane-drawer] { display: contents; color: inherit; }\n  [part=canvas-stack] { display: grid; grid-template-rows: auto minmax(0, 1fr); min-width: 0; min-height: 0; }\n  /* The hidden hold leaves row 1 empty. Keep the canvas in the flexible row\n     explicitly; auto-placement otherwise puts its absolute world in a 0px row. */\n  [part=canvas-stack] > [part=hold] { grid-row: 1; }\n  [part=canvas-stack] > [part=canvas] { grid-row: 2; }\n  [part=insert-chooser]::backdrop { background: rgb(0 0 0 / .45); }\n  [part=pane-scrim] { position: absolute; inset: 0; z-index: 30; background: rgb(0 0 0 / .45); }\n  [part=pane-title], [part=pane-close], [data-command=palette], [data-command=details] { display: none; }\n  [part=palette], [part=inspector] {\n    min-width: 0;\n    overflow: auto;\n    padding: 12px;\n    border: 0;\n    border-radius: 0;\n    background: var(--boe-token-surface-surface, #fff);\n  }\n  [part=palette] { display: flex; flex-direction: column; gap: 12px; border-right: 1px solid var(--boe-token-stroke-stroke, #e8e8e8); }\n  [part=palette-heading] { margin: 0 4px; font-size: 14px; font-weight: 650; line-height: 20px; }\n  [part=skip-link] { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }\n  [part=skip-link]:focus-visible { position: static; width: auto; height: auto; clip-path: none; }\n  [part=inspector] { border-left: 1px solid var(--boe-token-stroke-stroke, #e8e8e8); padding: 16px 0; }\n  [part=palette] label { font-size: 0; position: relative; }\n  [part=search-icon] { position: absolute; left: 12px; top: 9px; width: 18px; height: 18px; color: var(--boe-token-text-text-secondary, #6f6f6f); pointer-events: none; }\n  [part=palette] input {\n    width: 100%; min-width: 0;\n    height: 36px;\n    padding: 0 12px 0 36px;\n    border: 1px solid transparent;\n    border-radius: 24px;\n    background: var(--boe-token-surface-surface-hover, #f4f4f4);\n    font-size: 13px;\n  }\n  [part=palette] input:focus-visible { border-color: var(--boe-token-surface-surface-brand, #0061d5); background: var(--boe-token-surface-surface, #fff); }\n  [part=choices] { display: grid; align-content: start; gap: 4px; max-height: none; overflow: visible; }\n  [part=group] { margin: 4px 4px 6px; font-size: 12px; line-height: 1.45; 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; touch-action: none;\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.45; }\n  [part=choice-description] { grid-column: 2; color: var(--boe-token-text-text-secondary, #6f6f6f); font-size: 12px; line-height: 1.35; }\n  [part=palette-hint] { margin: 4px; color: var(--boe-token-text-text-secondary, #6f6f6f); font-size: 12px; line-height: 1.45; }\n  [part=canvas] {\n    position: relative; min-width: 0; height: 100%; overflow: hidden;\n    border: 0; border-radius: 0;\n    background-color: var(--boe-token-surface-surface-secondary, #fbfbfb);\n    background-image: radial-gradient(circle, color-mix(in srgb, var(--boe-token-text-text-secondary, #6f6f6f) 26%, transparent) 1px, transparent 1.2px);\n    background-size: 12px 12px;\n    touch-action: none; user-select: none; cursor: grab;\n  }\n  [part=canvas][data-panning] { cursor: grabbing; }\n  [part=hold] { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 10px 16px; border-bottom: 1px solid color-mix(in srgb, var(--boe-token-text-status-text-warning, #9a6b00) 45%, var(--boe-token-stroke-stroke, #e8e8e8)); background: color-mix(in srgb, var(--boe-token-surface-status-surface-inprogress, #ffc447) 14%, var(--boe-token-surface-surface, #fff)); color: var(--boe-token-text-status-text-warning, #6b4a00); font-size: 13px; }\n  [part=hold-text] { flex: 1 1 280px; min-width: 0; }\n  [part=hold] button { min-height: 28px; padding: 3px 8px; border: 1px solid currentColor; border-radius: 6px; background: transparent; font-size: 12px; font-weight: 650; white-space: nowrap; }\n  [part=world] { position: absolute; inset: 0; transform-origin: 0 0; }\n  [part=lines] { position: absolute; inset: 0; width: 1px; height: 1px; overflow: visible; pointer-events: none; z-index: 3; }\n  [part=line] { stroke: var(--boe-token-text-text-secondary, #6f6f6f); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; fill: none; }\n  [part=line][data-selected=true] { stroke: var(--boe-token-surface-surface-brand, #0061d5); stroke-width: 2; }\n  [part=line][data-drop=true] { stroke: var(--boe-token-surface-surface-brand, #0061d5); stroke-width: 2.5; stroke-dasharray: 6 4; }\n  [part=line-hit] { fill: none; stroke: transparent; stroke-width: 24; pointer-events: stroke; }\n  [part=connection-preview] { fill: none; stroke: var(--boe-token-surface-surface-brand, #0061d5); stroke-width: 2.5; stroke-dasharray: 6 4; }\n  [part=pinned-end] { fill: var(--boe-token-surface-surface-brand, #0061d5); pointer-events: none; }\n  [part=box], [part=frame] {\n    position: absolute; touch-action: none; text-align: start; z-index: 4; display: grid; grid-template-columns: 20px minmax(0,1fr); align-content: center;\n    gap: 2px 10px; min-width: 0; min-height: 64px; padding: 11px 12px;\n    border: 1px solid var(--boe-process-box-edge, var(--boe-control-edge, #858585));\n    border-radius: 8px; background: var(--boe-token-surface-surface, #fff);\n    font-size: 13px; line-height: 1.3;\n    transition: border-color var(--boe-profile-motion-interactive, 200ms) ease-out,\n      background var(--boe-profile-motion-interactive, 200ms) ease-out;\n  }\n  [part=box][data-shape=task] { align-content: normal; font-size: 14px; line-height: 1.45; }\n  [part=box][data-shape=task] > [part=icon] { grid-row: span 4; margin-top: 1px; }\n  [part=box]:hover, [part=frame]:hover { border-color: var(--boe-token-text-text-secondary, #6f6f6f); }\n  [data-connect-target=true][data-connect-invalid=true] { border-color: var(--boe-token-text-status-text-error, #b92340) !important; }\n  [part=connection-preview][data-invalid=true] { stroke: var(--boe-token-text-status-text-error, #b92340); }\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; display: flex; gap: 6px; flex-wrap: wrap; margin-top: 3px; font-size: 12px; line-height: 1.45; font-variant-numeric: tabular-nums; }\n  [part=metrics][data-state=unmeasured] { color: var(--boe-token-text-text-secondary, #6f6f6f); }\n  [part=metric-separator] { color: var(--boe-token-text-text-tertiary, #767676); }\n  [part=technical-summary] { overflow-wrap: anywhere; }\n  [part=technical-inline-code] { font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace; }\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][data-palette-drop=true] { border-color: var(--boe-token-surface-surface-brand, #0061d5); box-shadow: 0 0 0 2px color-mix(in srgb, var(--boe-token-surface-surface-brand, #0061d5) 18%, transparent); }\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  [part=caption] { position: absolute; left: 50%; translate: -50% 0; width: max-content; max-width: 168px; padding: 1px 4px; border-radius: 4px; text-align: center; background: color-mix(in srgb, var(--boe-token-surface-surface-hover, #f4f4f4) 88%, transparent); }\n  [part=caption][data-side=below] { top: 60px; }\n  [part=caption][data-side=above] { bottom: 60px; }\n  [part=caption] strong { font-size: 12.5px; font-weight: 600; line-height: 1.3; }\n  [part=caption] small { display: block; font-weight: 400; }\n  [part=caption] [part=technical-description] { font: 10.5px ui-monospace, 'SF Mono', Menlo, Consolas, monospace !important; white-space: nowrap; }\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  [part=event-details] { position: absolute; top: 75px; left: 50%; width: 172px; translate: -50% 0; text-align: center; }\n  [part=event-details] small { display: block; font-size: 11px; line-height: 1.25; }\n  [data-shape=gateway][aria-current=true]::before, [data-shape=event][aria-current=true]::before { border-color: var(--boe-token-surface-surface-brand, #0061d5); background: color-mix(in srgb, var(--boe-token-surface-surface-brand, #0061d5) 7%, var(--boe-token-surface-surface, #fff)); }\n  [part=port] { position: absolute; z-index: 5; width: 24px; height: 24px; min-height: 24px; padding: 0; border: 0; border-radius: 50%; background: transparent; opacity: 0; }\n  [part=port][data-side=north] { left: calc(50% - 12px); top: -12px; }\n  [part=port][data-side=south] { left: calc(50% - 12px); bottom: -12px; }\n  [part=port][data-side=east] { right: -12px; top: calc(50% - 12px); }\n  [part=port][data-side=west] { left: -12px; top: calc(50% - 12px); }\n  [part=port]::before { content: ''; display: block; width: 10px; height: 10px; margin: 7px; border: 1.5px solid var(--boe-token-surface-surface-brand, #0061d5); border-radius: 50%; background: var(--boe-token-surface-surface, #fff); }\n  [part=port]:hover::before, [part=port]:focus-visible::before { width: 22px; height: 22px; margin: 1px; background: var(--boe-token-surface-surface-brand, #0061d5); }\n  [part=port]::after { position: absolute; inset: 1px; display: none; place-items: center; color: #fff; font-size: 15px; font-weight: 700; line-height: 1; }\n  [part=port][data-side=north]::after { content: '\u2191'; }\n  [part=port][data-side=east]::after { content: '\u2192'; }\n  [part=port][data-side=south]::after { content: '\u2193'; }\n  [part=port][data-side=west]::after { content: '\u2190'; }\n  [part=port]:hover::after, [part=port]:focus-visible::after, [part=port][data-hot=true]::after { display: grid; }\n  [part=port][data-hot=true] { opacity: 1; }\n  [part=port][data-hot=true]::before { width: 22px; height: 22px; margin: 1px; background: var(--boe-token-surface-surface-brand, #0061d5); }\n  [part=end-grip] { position: absolute; z-index: 8; width: 24px; height: 24px; min-height: 24px; padding: 0; border: 0; border-radius: 50%; background: transparent; }\n  [part=end-grip]::before { content: ''; display: block; width: 10px; height: 10px; margin: 7px; border: 1.5px solid var(--boe-token-surface-surface-brand, #0061d5); border-radius: 50%; background: var(--boe-token-surface-surface, #fff); }\n  [part=box]:hover [part=port], [part=box]:focus-within [part=port], [part=box][aria-current=true] [part=port], [part=frame]:hover [part=port] { opacity: 1; }\n  [part=connection] { position: absolute; z-index: 5; display: flex; align-items: center; gap: 4px; transform: translate(-50%,-50%); min-width: 0; min-height: 0; padding: 2px 6px; border-radius: 6px; background: var(--boe-token-surface-surface-secondary, #fbfbfb); font-size: 12px; font-weight: 600; white-space: nowrap; }\n  /* Unlabelled lines still need a reachable midpoint for pointer insert/selection. */\n  [part=connection]:has(> span:empty):not(:has(> small)) { padding: 0; background: transparent; min-width: var(--boe-process-hit-target, calc(24px * var(--boe-process-inverse-zoom, 1))); min-height: var(--boe-process-hit-target, calc(24px * var(--boe-process-inverse-zoom, 1))); }\n  [part=connection] > small { margin-left: 4px; color: var(--boe-token-text-text-secondary, #6f6f6f); font-size: 11px; font-weight: 400; font-variant-numeric: tabular-nums; }\n  [part=connection-actions] { position: absolute; top: 100%; left: 50%; transform: translateX(-50%); display: flex; gap: 4px; width: max-content; padding: 4px; border: 1px solid var(--boe-token-stroke-stroke, #e8e8e8); border-radius: 8px; background: var(--boe-token-surface-surface, #fff); box-shadow: var(--boe-shadow-overlay, 0 4px 12px rgb(0 0 0 / .16)); opacity: 0; pointer-events: none; }\n  [part=connection]:hover [part=connection-actions], [part=connection]:focus-within [part=connection-actions] { opacity: 1; pointer-events: auto; }\n  [part=connection-actions] button { min-width: max(24px, var(--boe-process-hit-target, calc(24px * var(--boe-process-inverse-zoom, 1)))); min-height: max(32px, var(--boe-process-hit-target, calc(24px * var(--boe-process-inverse-zoom, 1)))); 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] { pointer-events: auto !important; }\n  [part=note][data-selected=true] { outline: 2px solid var(--boe-process-line-selected, var(--boe-brand-fill, #1976d2)); }\n  [part=note]:focus-visible { outline: 2px solid var(--boe-focus-ring, #1976d2); outline-offset: 3px; }\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=palette-ghost][data-pointer] { position: fixed; z-index: 100; padding: 8px 12px; border: 1px solid var(--boe-token-surface-surface-brand, #0061d5); border-radius: 10px; background: var(--boe-token-surface-surface, #fff); box-shadow: var(--boe-token-elevation-overlay, 0 8px 24px #0002); font-size: 13px; font-weight: 600; line-height: 1.45; gap: 8px; translate: -50% -50%; }\n  [part=palette-ghost][data-pointer] svg { width: 20px; height: 20px; }\n  [part=guide] { position: absolute; background: var(--boe-token-surface-surface-brand, #0061d5); pointer-events: none; }\n  [part=measure] { position: absolute; padding: 4px; background: var(--boe-token-surface-surface, #fff); font-size: 12px; pointer-events: none; }\n  [part=insert-chooser] { max-width: calc(100vw - 32px); max-height: 65vh; overflow: auto; padding: 12px; border: 1px solid var(--boe-token-stroke-stroke, #e8e8e8); border-radius: 12px; background: var(--boe-token-surface-surface, #fff); }\n  [part=keyboard-chooser] { position: fixed; inset: auto; width: min(320px, calc(100vw - 24px)); max-height: min(420px, calc(100dvh - 24px)); margin: 0; overflow: auto; padding: 12px; border: 1px solid var(--boe-token-stroke-stroke, #e8e8e8); border-radius: 12px; background: var(--boe-token-surface-surface, #fff); color: var(--boe-token-text-text, #141413); box-shadow: var(--boe-shadow-overlay, 0 4px 12px rgb(0 0 0 / .16)); }\n  [part=chooser-title] { margin: 0 0 10px; font-size: 12px; font-weight: 650; line-height: 1.4; color: var(--boe-token-text-text-secondary, #6f6f6f); }\n  [part=controls] { position: absolute; left: 16px; bottom: 16px; z-index: 10; display: flex; align-items: center; gap: 2px; padding: 4px; border: 1px solid var(--boe-token-stroke-stroke, #e8e8e8); border-radius: 12px; background: var(--boe-token-surface-surface, #fff); box-shadow: var(--boe-shadow-overlay, 0 4px 12px rgb(0 0 0 / .16)); }\n  [part=controls] button:not([data-command=reset]) { width: 32px; padding: 0; }\n  [part=controls-divider] { width: 1px; height: 20px; margin: 0 4px; background: var(--boe-token-stroke-stroke, #e8e8e8); }\n  [part=controls] [data-command=reset] { min-width: 56px; padding: 0 6px; 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: color-mix(in srgb, var(--boe-token-text-text-secondary, #6f6f6f) 35%, transparent); }\n  [part=minimap] rect[data-selected=true] { fill: var(--boe-token-surface-surface-brand, #0061d5); }\n  [part=minimap] rect[data-section] { fill: color-mix(in srgb, var(--boe-token-text-text-secondary, #6f6f6f) 8%, transparent); }\n  [part=minimap] [data-viewport] { fill: color-mix(in srgb, var(--boe-token-surface-surface-brand, #0061d5) 8%, transparent); stroke: var(--boe-token-surface-surface-brand, #0061d5); stroke-width: 1.5; vector-effect: non-scaling-stroke; }\n  [part=selection-toolbar] { position: absolute; bottom: auto; z-index: 11; display: flex; flex-wrap: nowrap; gap: 2px; padding: 4px; border: 1px solid var(--boe-token-stroke-stroke, #e8e8e8); border-radius: 12px; background: var(--boe-token-surface-surface, #fff); box-shadow: var(--boe-shadow-overlay, 0 4px 12px rgb(0 0 0 / .16)); white-space: nowrap; }\n  [part=selection-toolbar] button { display: inline-flex; align-items: center; gap: 4px; }\n  [part=selection-plus] { font-size: 18px; line-height: 12px; font-weight: 500; }\n  [part=checks] { display: grid; gap: 6px; margin: 0; padding: 0; }\n  [part=checks] button { width: 100%; display: grid; grid-template-columns: 16px 1fr; align-items: start; gap: 8px; padding: 8px 10px; border: 1px solid var(--boe-token-stroke-stroke, #e8e8e8); border-radius: 10px; text-align: start; background: var(--boe-token-surface-surface, #fff); color: var(--boe-token-text-text, #222); line-height: 1.45; }\n  [part=check-icon] { flex: 0 0 16px; width: 16px; height: 16px; margin-top: 1px; color: var(--boe-token-text-status-text-error, #b92340); }\n  [part=checks] strong { display: block; font-size: 13px; font-weight: 600; line-height: 1.45; }\n  [part=checks] small { color: var(--boe-token-text-text-secondary, #6f6f6f); font-size: 12.5px; }\n  [part=check-icon][data-tone=success] { color: var(--boe-token-text-status-text-success, #138a58); }\n  [part=problem] { display: flex; align-items: center; gap: 4px; }\n  [part=problem] [part=check-icon] { flex-basis: 12px; width: 12px; height: 12px; margin: 0; }\n  [part=checks-ready] { display: flex; align-items: center; gap: 8px; margin: 0; color: var(--boe-token-text-text, #222); font-size: 13px; line-height: 1.45; }\n  [part=process-heading] { display: grid; gap: 2px; padding: 0 16px 12px; }\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=editor], [part=pane-content], [part=editor] > *, [part=pane-content] > * { min-width: 0; }\n  [part=process-title], [part=process-summary] { min-width: 0; overflow-wrap: anywhere; }\n  :is([part=local-variable-summary],[part=saved-result-summary]) :is(ul,li) { min-width: 0; max-width: 100%; }\n  [part=pane-content][data-pane=Variables] { display: grid; align-content: start; gap: 14px; }\n  [part=variables-intro], [part=variable-list] > p { margin: 0; font-size: 12.5px; line-height: 1.5; color: var(--boe-token-text-text-secondary,#6f6f6f); }\n  [part=variable-scopes] { display: grid; grid-template-columns: auto 1fr; gap: 4px 10px; margin: 0; font-size: 12.5px; line-height: 1.45; }\n  [part=variable-scopes] dt { font-weight: 650; }\n  [part=variable-scopes] dd { margin: 0; color: var(--boe-token-text-text-secondary, #6f6f6f); }\n  :is([part=local-variable-summary],[part=saved-result-summary],[part=local-variables]) { font-size: 12.5px; line-height: 1.45; }\n  :is([part=local-variable-summary],[part=saved-result-summary],[part=local-variables]) h3 { margin: 0 0 6px; font-size: 12.5px; line-height: 1.45; font-weight: 650; }\n  :is([part=local-variable-summary],[part=saved-result-summary],[part=local-variables]) p { margin: 0; line-height: 1.5; color: var(--boe-token-text-text-secondary,#6f6f6f); }\n  :is([part=local-variable-summary],[part=saved-result-summary]) ul { list-style: none; display: grid; gap: 4px; margin: 0; padding: 0; }\n  :is([part=local-variable-summary],[part=saved-result-summary]) li { display: flex; align-items: center; gap: 8px; padding: 4px 4px 4px 10px; border: 1px solid var(--boe-token-stroke-stroke,#e8e8e8); border-radius: 10px; background: var(--boe-token-surface-surface-secondary,#fbfbfb); font-size: 13px; line-height: 1.45; }\n  :is([part=local-variable-summary],[part=saved-result-summary]) li > span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }\n  :is([part=local-variable-summary],[part=saved-result-summary]) code { font-family: monospace; font-size: 13px; }\n  :is([part=local-variable-summary],[part=saved-result-summary]) em { font-style: normal; color: var(--boe-token-text-text-secondary,#6f6f6f); }\n  [part=local-variable-list], [part=variable-list] { display: grid; gap: 10px; }\n  [part=local-variable-row] { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr) 32px; gap: 6px; align-items: center; }\n  [part=local-variable-row] [part=field-problem] { grid-column: 1 / -1; color: var(--boe-token-text-status-text-error, #b92340); font-size: 12px; }\n  [part=local-variables] label { display: block; min-width: 0; }\n  [part=local-variables] input { width: 100%; min-width: 0; min-height: 32px; padding: 5px 10px; border: 1px solid var(--boe-token-surface-surface-quaternary,#d3d3d3); border-radius: 10px; background: var(--boe-token-surface-surface,#fff); color: var(--boe-token-text-text,#141413); font: 12.5px/1.45 var(--boe-token-font-family-base,Inter,sans-serif); }\n  [part=local-variables] input:focus-visible { outline-offset: 1px; }\n  [part=local-variable-actions], [part=variable-actions] { display: flex; gap: 8px; flex-wrap: wrap; padding-top: 4px; }\n  [part=variable-icon] { flex: 0 0 16px; width: 16px; height: 16px; color: var(--boe-token-text-text-secondary,#6f6f6f); }\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; font-size: 12.5px; line-height: 1.5; font-variant-numeric: tabular-nums; }\n  [part=inspector-metrics] h3 { margin: 0 0 6px; font-size: 12.5px; }\n  [part=inspector-metrics] p { margin: 0; color: var(--boe-token-text-text-secondary, #6f6f6f); }\n  [part=inspector-metrics] table { width: 100%; border-collapse: collapse; font-size: 13px; line-height: 1.45; }\n  [part=inspector-metrics] :is(th,td) { padding: 5px 0; border-bottom: 1px solid var(--boe-token-stroke-stroke, #e8e8e8); font-weight: 400; }\n  [part=inspector-metrics] th { text-align: start; font-variant-numeric: normal; }\n  [part=inspector-metrics] td { text-align: right; font-variant-numeric: tabular-nums; }\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: 32px; margin-top: 4px; padding: 0 14px; border-radius: 20px; font-size: 13px; font-weight: 600; letter-spacing: .01em; }\n  [part=outline-list] { margin: 0; padding-left: 22px; font-size: 13.5px; line-height: 1.5; }\n  [part=outline-list] [part=outline-list] { margin-top: 2px; }\n  [part=outline-list] li { margin: 3px 0; padding-left: 2px; }\n  [part=outline-list] li::marker { color: var(--boe-token-text-text-secondary, #6f6f6f); font-variant-numeric: tabular-nums; font-size: 12.5px; }\n  [part=outline-list] button, [part=outline-list] strong { border: 0; border-radius: 4px; background: transparent; padding: 0; min-height: 24px; display: inline-block; font-size: 13.5px; font-weight: 600; line-height: 24px; text-align: start; }\n  [part=outline-list] button:hover { color: var(--boe-token-surface-surface-brand, #0061d5); text-decoration: underline; text-underline-offset: 2px; }\n  [part=outline-list] button[aria-current=true] { color: var(--boe-token-surface-surface-brand, #0061d5); }\n  [part=outline-list] p { margin: 0; color: var(--boe-token-text-text-secondary, #6f6f6f); font-size: 12.5px; line-height: 1.5; }\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=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  :host([data-variables-editable]) [part=variable-row] { grid-template-columns: minmax(0,1fr) minmax(0,1fr) 32px; gap: 6px; align-items: center; }\n  :host([data-variables-editable]) [part=variable-row] label:has([data-variable-key=name]) { grid-column: 1; grid-row: 1; }\n  :host([data-variables-editable]) [part=variable-row] label:has([data-variable-key=value]) { grid-column: 2; grid-row: 1; }\n  :host([data-variables-editable]) [part=variable-row] label:has([data-variable-key=scope]) { grid-column: 2; grid-row: 2; }\n  :host([data-variables-editable]) [part=variable-remove] { grid-column: 3; grid-row: 1; }\n  :host([data-variables-editable]) [part=variable-row] :is(input,select) { width: 100%; min-width: 0; min-height: 32px; border-radius: 10px; font-size: 12.5px; }\n  :host([data-variables-editable]) [part=variable-row] p { grid-column: 1 / -1; }\n  :host([data-variables-editable]) [part=variable-row] [part=field-problem] { color: var(--boe-token-text-status-text-error, #b92340); }\n  [part=variable-remove], [part=variable-add] { min-height: 32px; align-self: end; border: 1px solid var(--boe-token-stroke-stroke, #e8e8e8); border-radius: 8px; background: var(--boe-token-surface-surface, #fff); color: inherit; cursor: pointer; }\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] :is(input,select) { 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  :host([data-variables-editable]) [part=variable-row] { padding: 0; border: 0; }\n  :host([data-variables-editable]) [part=variable-row] label { display: block; min-width: 0; }\n  :host([data-variables-editable]) [part=variable-row] label:has([data-variable-key=description]) { grid-column: 1; grid-row: 2; }\n  :host([data-variables-editable]) [part=variable-row] :is(input,select) { min-height: 32px; padding: 5px 10px; border: 1px solid var(--boe-token-surface-surface-quaternary,#d3d3d3); font: 12.5px/1.45 var(--boe-token-font-family-base,Inter,sans-serif); }\n  :host([data-variables-editable]) [part=variable-row] select { padding: 4px 8px; }\n  :host([data-variables-editable]) [part=variable-row] input:focus-visible { outline-offset: 1px; }\n  [part=local-variables] button, [part=variable-add], [part=variable-remove] { display: inline-flex; align-items: center; gap: 6px; height: 32px; min-height: 32px; padding: 0 14px; border: 1px solid var(--boe-token-stroke-stroke,#e8e8e8); border-radius: 20px; background: var(--boe-token-surface-surface,#fff); font: 600 13px/1.45 var(--boe-token-font-family-base,Inter,sans-serif); letter-spacing: .01em; white-space: nowrap; }\n  [part=local-variables] [data-local-key=remove], [part=variable-remove] { width: 32px; padding: 0; justify-content: center; border-color: transparent; background: transparent; align-self: center; }\n  [part=local-variables] button:hover, [part=variable-add]:hover, [part=variable-remove]:hover { background: var(--boe-token-surface-surface-hover,#f4f4f4); }\n  [part=local-variables] button:disabled, [part=variable-add]:disabled, [part=variable-remove]:disabled { opacity: .45; }\n  [part=help] { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }\n  :host([data-narrow]) [part=layout] { grid-template-columns: minmax(0,1fr); }\n  :host([data-narrow]) [part=layout] { overflow: visible; }\n  :host([data-narrow]) [part=pane-drawer] { display: none; position: absolute; z-index: 40; margin: 0; max-width: none; max-height: none; padding: 0; overflow: auto; border: 0; border-radius: 0; background: var(--boe-token-surface-surface, #fff); box-shadow: var(--boe-shadow-overlay, 0 4px 12px rgb(0 0 0 / .24)); }\n  :host([data-narrow]) [part=pane-drawer][open] { display: block; }\n  :host([data-narrow]) [part=pane-title] { display: block; position: absolute; top: 18px; left: 16px; margin: 0; font-size: 14px; font-weight: 650; line-height: 20px; }\n  :host([data-narrow]) [part=pane-close], :host([data-narrow]) [data-command=palette], :host([data-narrow]) [data-command=details] { display: inline-block; }\n  :host([data-narrow]) [part=pane-close] { position: absolute; top: 12px; right: 12px; z-index: 1; width: 28px; height: 28px; padding: 0; border-radius: 50%; font-size: 16px; font-weight: 600; line-height: 1; }\n  :host([data-narrow]) [part=pane-drawer][data-pane=palette] { left: 0; top: 0; bottom: auto; width: min(320px, 86%); height: 100%; max-height: 100%; }\n  :host([data-narrow]) [part=pane-drawer][data-pane=inspector] { left: 0; right: 0; top: auto; bottom: 0; width: 100%; height: min(62%, 560px); border-radius: 24px 24px 0 0; }\n  :host([data-narrow]) [part=pane-drawer][data-pane=inspector]::before { content: ''; display: block; width: 36px; height: 4px; margin: 6px auto; border-radius: 2px; background: var(--boe-token-text-text-secondary, #767676); opacity: .55; }\n  :host([data-narrow]) [part=palette], :host([data-narrow]) [part=inspector] { height: 100%; }\n  :host([data-narrow]) [part=inspector] { border-left: 0; }\n  :host([data-narrow]) [part=palette] { padding-top: 54px; }\n  :host([data-narrow]) [part=palette-heading] { display: none; }\n  :host([data-narrow]) [part=minimap] { display: none; }\n  :host([data-narrow]) [part=toolbar] { justify-content: flex-start; }\n  :host([data-narrow]) [data-command=palette] { order: -2; }\n  :host([data-narrow]) [part=view-menu] { order: -1; }\n  :host([data-narrow]) [part=view-switch], :host([data-narrow]) [part=run-toggle] { display: none; }\n  :host([data-narrow]) [data-command=checks-status] { display: none; }\n  :host([data-narrow]) [part=view-menu] { display: block; }\n  :host([data-hide-tidy]) [part=controls] { left: 12px; bottom: 12px; }\n  :host([data-narrow]) [part=selection-toolbar] [part=selection-plus] + span { display: none; }\n  :host([data-hide-tidy]) [data-command=tidy] { display: none; }\n  :host([data-phone]) [data-command=undo], :host([data-phone]) [data-command=redo] { display: none; }\n  @media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition-duration: 0s !important; animation-duration: 0s !important; scroll-behavior: auto !important; } }\n";
+export declare const processModelerDesign = "\n  :host([hidden]), [hidden] { display: none !important; }\n  *, *::before, *::after { box-sizing: border-box; }\n  button, input, textarea, select { font: inherit; color: inherit; }\n  button { min-height: 36px; padding: 8px; border: 1px solid var(--boe-token-stroke-stroke, #e8e8e8); border-radius: 8px; background: var(--boe-token-surface-surface, #fff); cursor: pointer; }\n  button:disabled { opacity: .5; cursor: default; }\n  :is(button,input,textarea,select,[part=canvas],[part=minimap],[part=box],[part=frame]):focus-visible { outline: 2px solid var(--boe-token-surface-surface-brand, #0061d5); outline-offset: 2px; }\n  :host {\n    display: block;\n    position: relative;\n    isolation: isolate;\n    min-width: 0;\n    --boe-process-box-edge: color-mix(in srgb, var(--boe-token-text-text, #141413) 55%, var(--boe-token-surface-surface, #fff));\n    color: var(--boe-token-text-text, #141413);\n    background: var(--boe-token-surface-surface, #fff);\n    font: 14px/1.5 var(--boe-token-font-family-base, Inter, sans-serif);\n  }\n  [part=sr-only], [part=status], [part=urgent-status] { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }\n  [part=toolbar] {\n    min-height: 56px;\n    margin: 0;\n    padding: 10px 16px;\n    display: flex;\n    align-items: center;\n    justify-content: flex-end;\n    gap: 12px;\n    flex-wrap: nowrap;\n    border-bottom: 1px solid var(--boe-token-stroke-stroke, #e8e8e8);\n    background: var(--boe-token-surface-surface, #fff);\n  }\n  [part=toolbar] button, [part=controls] button, [part=selection-toolbar] button {\n    min-height: 30px;\n    padding: 4px 10px;\n    border: 1px solid transparent;\n    border-radius: 8px;\n    background: transparent;\n    font-size: 13px;\n    font-weight: 600;\n  }\n  [part=toolbar] svg, [part=controls] svg { width: 16px; height: 16px; display: block; }\n  [part=toolbar] [data-command=undo], [part=toolbar] [data-command=redo], [part=controls] button:not([data-command=reset]) { width: 30px; height: 30px; padding: 6px; display: grid; place-items: center; }\n  [part=controls] [data-command=snap][aria-pressed=true], [part=controls] [data-command=lock][aria-pressed=true] { background: color-mix(in srgb, var(--boe-token-surface-surface-brand, #0061d5) 10%, var(--boe-token-surface-surface, #fff)); color: var(--boe-token-surface-surface-brand, #0061d5); }\n  [part=toolbar] button:hover, [part=controls] button:hover, [part=selection-toolbar] button:hover {\n    background: var(--boe-token-surface-surface-hover, #f4f4f4);\n  }\n  [part=toolbar] [data-command=tidy] { border-color: var(--boe-token-stroke-stroke, #e8e8e8); border-radius: 18px; }\n  [part=view-switch] { display: flex; gap: 2px; padding: 3px; border: 1px solid var(--boe-token-stroke-stroke, #e8e8e8); border-radius: 20px; }\n  [part=view-switch] button { border-radius: 16px; }\n  [part=view-switch] button[aria-pressed=true] { border-color: var(--boe-token-stroke-stroke, #e8e8e8); background: var(--boe-token-surface-surface, #fff); }\n  [part=run-toggle] { display: flex; align-items: center; gap: 8px; white-space: nowrap; font-size: 13px; font-weight: 600; cursor: pointer; }\n  [part=run-toggle] input { appearance: none; position: relative; width: 32px; height: 18px; margin: 0; border: 0; border-radius: 9px; background: var(--boe-token-surface-surface-hover, #f4f4f4); cursor: pointer; transition: background var(--boe-profile-motion-interactive, 200ms) ease-out; }\n  [part=run-toggle] input::after { content: ''; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%; background: var(--boe-token-surface-surface, #fff); box-shadow: 0 1px 2px rgb(0 0 0 / .25); transition: transform var(--boe-profile-motion-interactive, 200ms) ease-out; }\n  [part=run-toggle] input:checked { background: var(--boe-token-surface-surface-brand, #0061d5); }\n  [part=run-toggle] input:checked::after { transform: translateX(14px); }\n  [part=run-toggle] input:focus-visible { outline: 2px solid var(--boe-token-surface-surface-brand, #0061d5); outline-offset: 2px; }\n  [part=toolbar] [data-command=checks-status] { white-space: nowrap; color: var(--boe-token-text-text-secondary, #6f6f6f); }\n  [part=toolbar] [data-command=checks-status][data-state=bad] { color: color-mix(in srgb, var(--boe-token-text-status-text-error, #b92340) 85%, var(--boe-token-text-text, #141413)); }\n  [part=toolbar] [data-command=checks-status] svg { flex: none; }\n  [part=toolbar] [data-command=checks-status][data-state=ready] svg { color: var(--boe-token-text-status-text-success, #187657); }\n  [part=view-menu] { display: none; position: relative; }\n  [part=view-menu] summary { list-style: none; height: 32px; display: flex; align-items: center; padding: 0 14px; border: 1px solid var(--boe-token-stroke-stroke, #e8e8e8); border-radius: 20px; font-size: 13px; font-weight: 600; letter-spacing: .01em; cursor: pointer; white-space: nowrap; }\n  [part=view-menu][open] { z-index: 20; }\n  [part=view-menu-options] { position: absolute; z-index: 20; top: calc(100% + 4px); right: 0; width: 200px; max-width: calc(100vw - 24px); 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: flex; justify-content: space-between; gap: 16px; width: 100%; min-height: 32px; padding: 0 10px; text-align: start; background: transparent; }\n  [part=view-menu] small { color: var(--boe-token-text-text-secondary, #6f6f6f); }\n  [part=view-menu] [role=separator] { border-top: 1px solid var(--boe-token-stroke-stroke, #e8e8e8); margin: 4px 2px; }\n  [part=toolbar-document] { display: flex; align-items: baseline; gap: 10px; min-width: 0; flex: 1 1 auto; visibility: hidden; }\n  [part=toolbar-title] { font-size: 15px; font-weight: 650; margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }\n  [part=toolbar-document] span { font-size: 12px; white-space: nowrap; }\n  [part=toolbar-actions] { display: flex; align-items: center; gap: 8px; }\n  [part=toolbar] button:not([role]) { height: 32px; min-height: 32px; padding: 0 14px; border-radius: 20px; font-size: 13px; font-weight: 600; letter-spacing: .01em; white-space: nowrap; }\n  [part=toolbar] [part=view-switch] { padding: 2px; gap: 0; background: var(--boe-token-surface-surface-secondary, #fbfbfb); }\n  [part=toolbar] [part=view-switch] button { height: 26px; min-height: 26px; padding: 0 12px; border: 0; border-radius: 16px; font-size: 12.5px; letter-spacing: normal; }\n  [part=toolbar] [part=view-switch] button[aria-pressed=true] { box-shadow: 0 0 0 1px var(--boe-token-stroke-stroke, #e8e8e8); }\n  [part=toolbar] button[data-command=checks-status] { display: inline-flex; align-items: center; gap: 6px; height: auto; min-height: 0; line-height: 1.45; padding: 4px 6px; border: 0; border-radius: 8px; font-weight: 400; letter-spacing: normal; }\n  [part=toolbar] [data-command=palette], [part=toolbar] [data-command=undo], [part=toolbar] [data-command=redo] { width: 32px; padding: 0; place-items: center; }\n  [part=toolbar] [data-command=palette], [part=toolbar] [data-command=details] { border-color: var(--boe-token-stroke-stroke, #e8e8e8); background: var(--boe-token-surface-surface, #fff); }\n  :host([data-compact-toolbar]) [part=view-switch], :host([data-compact-toolbar]) [part=run-toggle] { display: none; }\n  :host([data-compact-toolbar]) [part=view-menu] { display: block; }\n  [part=layout] {\n    display: grid;\n    grid-template-columns: 248px minmax(0, 1fr) 320px;\n    gap: 0;\n    min-height: 0;\n    height: var(--boe-process-height, 660px);\n    overflow: hidden;\n  }\n  [part=pane-drawer] { display: contents; color: inherit; }\n  [part=canvas-stack] { display: grid; grid-template-rows: auto minmax(0, 1fr); min-width: 0; min-height: 0; }\n  /* The hidden hold leaves row 1 empty. Keep the canvas in the flexible row\n     explicitly; auto-placement otherwise puts its absolute world in a 0px row. */\n  [part=canvas-stack] > [part=hold] { grid-row: 1; }\n  [part=canvas-stack] > [part=canvas] { grid-row: 2; }\n  [part=insert-chooser]::backdrop { background: rgb(0 0 0 / .45); }\n  [part=pane-scrim] { position: absolute; inset: 0; z-index: 30; background: rgb(0 0 0 / .45); }\n  [part=pane-title], [part=pane-close], [data-command=palette], [data-command=details] { display: none; }\n  [part=palette], [part=inspector] {\n    min-width: 0;\n    overflow: auto;\n    padding: 12px;\n    border: 0;\n    border-radius: 0;\n    background: var(--boe-token-surface-surface, #fff);\n  }\n  [part=palette] { display: flex; flex-direction: column; gap: 12px; border-right: 1px solid var(--boe-token-stroke-stroke, #e8e8e8); }\n  [part=palette-heading] { margin: 0 4px; font-size: 14px; font-weight: 650; line-height: 20px; }\n  [part=skip-link] { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }\n  [part=skip-link]:focus-visible { position: static; width: auto; height: auto; clip-path: none; }\n  [part=inspector] { border-left: 1px solid var(--boe-token-stroke-stroke, #e8e8e8); padding: 16px 0; }\n  [part=palette] label { font-size: 0; position: relative; }\n  [part=search-icon] { position: absolute; left: 12px; top: 9px; width: 18px; height: 18px; color: var(--boe-token-text-text-secondary, #6f6f6f); pointer-events: none; }\n  [part=palette] input {\n    width: 100%; min-width: 0;\n    height: 36px;\n    padding: 0 12px 0 36px;\n    border: 1px solid transparent;\n    border-radius: 24px;\n    background: var(--boe-token-surface-surface-hover, #f4f4f4);\n    font-size: 13px;\n  }\n  [part=palette] input:focus-visible { border-color: var(--boe-token-surface-surface-brand, #0061d5); background: var(--boe-token-surface-surface, #fff); }\n  [part=choices] { display: grid; align-content: start; gap: 4px; max-height: none; overflow: visible; }\n  [part=group] { margin: 4px 4px 6px; font-size: 12px; line-height: 1.45; 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; touch-action: none;\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.45; }\n  [part=choice-description] { grid-column: 2; color: var(--boe-token-text-text-secondary, #6f6f6f); font-size: 12px; line-height: 1.35; }\n  [part=palette-hint] { margin: 4px; color: var(--boe-token-text-text-secondary, #6f6f6f); font-size: 12px; line-height: 1.45; }\n  [part=canvas] {\n    position: relative; min-width: 0; height: 100%; overflow: hidden;\n    border: 0; border-radius: 0;\n    background-color: var(--boe-token-surface-surface-secondary, #fbfbfb);\n    background-image: radial-gradient(circle, color-mix(in srgb, var(--boe-token-text-text-secondary, #6f6f6f) 26%, transparent) 1px, transparent 1.2px);\n    background-size: 12px 12px;\n    touch-action: none; user-select: none; cursor: grab;\n  }\n  [part=canvas][data-panning] { cursor: grabbing; }\n  [part=hold] { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 10px 16px; border-bottom: 1px solid color-mix(in srgb, var(--boe-token-text-status-text-warning, #9a6b00) 45%, var(--boe-token-stroke-stroke, #e8e8e8)); background: color-mix(in srgb, var(--boe-token-surface-status-surface-inprogress, #ffc447) 14%, var(--boe-token-surface-surface, #fff)); color: var(--boe-token-text-status-text-warning, #6b4a00); font-size: 13px; }\n  [part=hold-text] { flex: 1 1 280px; min-width: 0; }\n  [part=hold] button { min-height: 28px; padding: 3px 8px; border: 1px solid currentColor; border-radius: 6px; background: transparent; font-size: 12px; font-weight: 650; white-space: nowrap; }\n  [part=world] { position: absolute; inset: 0; transform-origin: 0 0; }\n  [part=lines] { position: absolute; inset: 0; width: 1px; height: 1px; overflow: visible; pointer-events: none; z-index: 3; }\n  [part=line] { stroke: var(--boe-token-text-text-secondary, #6f6f6f); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; fill: none; }\n  [part=line][data-selected=true] { stroke: var(--boe-token-surface-surface-brand, #0061d5); stroke-width: 2; }\n  [part=line][data-drop=true] { stroke: var(--boe-token-surface-surface-brand, #0061d5); stroke-width: 2.5; stroke-dasharray: 6 4; }\n  [part=line-hit] { fill: none; stroke: transparent; stroke-width: 24; pointer-events: stroke; }\n  [part=connection-preview] { fill: none; stroke: var(--boe-token-surface-surface-brand, #0061d5); stroke-width: 2.5; stroke-dasharray: 6 4; }\n  [part=pinned-end] { fill: var(--boe-token-surface-surface-brand, #0061d5); pointer-events: none; }\n  [part=box], [part=frame] {\n    position: absolute; touch-action: none; text-align: start; z-index: 4; display: grid; grid-template-columns: 20px minmax(0,1fr); align-content: center;\n    gap: 2px 10px; min-width: 0; min-height: 64px; padding: 11px 12px;\n    border: 1px solid var(--boe-process-box-edge, var(--boe-control-edge, #858585));\n    border-radius: 8px; background: var(--boe-token-surface-surface, #fff);\n    font-size: 13px; line-height: 1.3;\n    transition: border-color var(--boe-profile-motion-interactive, 200ms) ease-out,\n      background var(--boe-profile-motion-interactive, 200ms) ease-out;\n  }\n  [part=box][data-shape=task] { align-content: normal; font-size: 14px; line-height: 1.45; }\n  [part=box][data-shape=task] > [part=icon] { grid-row: span 4; margin-top: 1px; }\n  [part=box]:hover, [part=frame]:hover { border-color: var(--boe-token-text-text-secondary, #6f6f6f); }\n  [data-connect-target=true][data-connect-invalid=true] { border-color: var(--boe-token-text-status-text-error, #b92340) !important; }\n  [part=connection-preview][data-invalid=true] { stroke: var(--boe-token-text-status-text-error, #b92340); }\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; display: flex; gap: 6px; flex-wrap: wrap; margin-top: 3px; font-size: 12px; line-height: 1.45; font-variant-numeric: tabular-nums; }\n  [part=metrics][data-state=unmeasured] { color: var(--boe-token-text-text-secondary, #6f6f6f); }\n  [part=metric-separator] { color: var(--boe-token-text-text-tertiary, #767676); }\n  [part=technical-summary] { overflow-wrap: anywhere; }\n  [part=technical-inline-code] { font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace; }\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][data-palette-drop=true] { border-color: var(--boe-token-surface-surface-brand, #0061d5); box-shadow: 0 0 0 2px color-mix(in srgb, var(--boe-token-surface-surface-brand, #0061d5) 18%, transparent); }\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  [part=caption] { position: absolute; left: 50%; translate: -50% 0; width: max-content; max-width: 168px; padding: 1px 4px; border-radius: 4px; text-align: center; background: color-mix(in srgb, var(--boe-token-surface-surface-hover, #f4f4f4) 88%, transparent); }\n  [part=caption][data-side=below] { top: 60px; }\n  [part=caption][data-side=above] { bottom: 60px; }\n  [part=caption] strong { font-size: 12.5px; font-weight: 600; line-height: 1.3; }\n  [part=caption] small { display: block; font-weight: 400; }\n  [part=caption] [part=technical-description] { font: 10.5px ui-monospace, 'SF Mono', Menlo, Consolas, monospace !important; white-space: nowrap; }\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  [part=event-details] { position: absolute; top: 75px; left: 50%; width: 172px; translate: -50% 0; text-align: center; }\n  [part=event-details] small { display: block; font-size: 11px; line-height: 1.25; }\n  [data-shape=gateway][aria-current=true]::before, [data-shape=event][aria-current=true]::before { border-color: var(--boe-token-surface-surface-brand, #0061d5); background: color-mix(in srgb, var(--boe-token-surface-surface-brand, #0061d5) 7%, var(--boe-token-surface-surface, #fff)); }\n  [part=port] { position: absolute; z-index: 5; width: 24px; height: 24px; min-height: 24px; padding: 0; border: 0; border-radius: 50%; background: transparent; opacity: 0; }\n  [part=port][data-side=north] { left: calc(50% - 12px); top: -12px; }\n  [part=port][data-side=south] { left: calc(50% - 12px); bottom: -12px; }\n  [part=port][data-side=east] { right: -12px; top: calc(50% - 12px); }\n  [part=port][data-side=west] { left: -12px; top: calc(50% - 12px); }\n  [part=port]::before { content: ''; display: block; width: 10px; height: 10px; margin: 7px; border: 1.5px solid var(--boe-token-surface-surface-brand, #0061d5); border-radius: 50%; background: var(--boe-token-surface-surface, #fff); }\n  [part=port]:hover::before, [part=port]:focus-visible::before { width: 22px; height: 22px; margin: 1px; background: var(--boe-token-surface-surface-brand, #0061d5); }\n  [part=port]::after { position: absolute; inset: 1px; display: none; place-items: center; color: #fff; font-size: 15px; font-weight: 700; line-height: 1; }\n  [part=port][data-side=north]::after { content: '\u2191'; }\n  [part=port][data-side=east]::after { content: '\u2192'; }\n  [part=port][data-side=south]::after { content: '\u2193'; }\n  [part=port][data-side=west]::after { content: '\u2190'; }\n  [part=port]:hover::after, [part=port]:focus-visible::after, [part=port][data-hot=true]::after { display: grid; }\n  [part=port][data-hot=true] { opacity: 1; }\n  [part=port][data-hot=true]::before { width: 22px; height: 22px; margin: 1px; background: var(--boe-token-surface-surface-brand, #0061d5); }\n  [part=end-grip] { position: absolute; z-index: 8; width: 24px; height: 24px; min-height: 24px; padding: 0; border: 0; border-radius: 50%; background: transparent; }\n  [part=end-grip]::before { content: ''; display: block; width: 10px; height: 10px; margin: 7px; border: 1.5px solid var(--boe-token-surface-surface-brand, #0061d5); border-radius: 50%; background: var(--boe-token-surface-surface, #fff); }\n  [part=box]:hover [part=port], [part=box]:focus-within [part=port], [part=box][aria-current=true] [part=port], [part=frame]:hover [part=port] { opacity: 1; }\n  [part=connection] { position: absolute; z-index: 5; display: flex; align-items: center; gap: 4px; transform: translate(-50%,-50%); min-width: 0; min-height: 0; padding: 2px 6px; border-radius: 6px; background: var(--boe-token-surface-surface-secondary, #fbfbfb); font-size: 12px; font-weight: 600; white-space: nowrap; }\n  /* Unlabelled lines still need a reachable midpoint for pointer insert/selection. */\n  [part=connection]:has(> span:empty):not(:has(> small)) { padding: 0; background: transparent; min-width: var(--boe-process-hit-target, calc(24px * var(--boe-process-inverse-zoom, 1))); min-height: var(--boe-process-hit-target, calc(24px * var(--boe-process-inverse-zoom, 1))); }\n  [part=connection] > small { margin-left: 4px; color: var(--boe-token-text-text-secondary, #6f6f6f); font-size: 11px; font-weight: 400; font-variant-numeric: tabular-nums; }\n  [part=connection-actions] { position: absolute; top: 100%; left: 50%; transform: translateX(-50%); display: flex; gap: 4px; width: max-content; padding: 4px; border: 1px solid var(--boe-token-stroke-stroke, #e8e8e8); border-radius: 8px; background: var(--boe-token-surface-surface, #fff); box-shadow: var(--boe-shadow-overlay, 0 4px 12px rgb(0 0 0 / .16)); opacity: 0; pointer-events: none; }\n  [part=connection]:hover [part=connection-actions], [part=connection]:focus-within [part=connection-actions] { opacity: 1; pointer-events: auto; }\n  [part=connection-actions] button { min-width: max(24px, var(--boe-process-hit-target, calc(24px * var(--boe-process-inverse-zoom, 1)))); min-height: max(32px, var(--boe-process-hit-target, calc(24px * var(--boe-process-inverse-zoom, 1)))); 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] { pointer-events: auto !important; }\n  [part=note][data-selected=true] { outline: 2px solid var(--boe-process-line-selected, var(--boe-brand-fill, #1976d2)); }\n  [part=note]:focus-visible { outline: 2px solid var(--boe-focus-ring, #1976d2); outline-offset: 3px; }\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=palette-ghost][data-pointer] { position: fixed; z-index: 100; padding: 8px 12px; border: 1px solid var(--boe-token-surface-surface-brand, #0061d5); border-radius: 10px; background: var(--boe-token-surface-surface, #fff); box-shadow: var(--boe-token-elevation-overlay, 0 8px 24px #0002); font-size: 13px; font-weight: 600; line-height: 1.45; gap: 8px; translate: -50% -50%; }\n  [part=palette-ghost][data-pointer] svg { width: 20px; height: 20px; }\n  [part=guide] { position: absolute; background: var(--boe-token-surface-surface-brand, #0061d5); pointer-events: none; }\n  [part=measure] { position: absolute; padding: 4px; background: var(--boe-token-surface-surface, #fff); font-size: 12px; pointer-events: none; }\n  [part=insert-chooser] { max-width: calc(100vw - 32px); max-height: 65vh; overflow: auto; padding: 12px; border: 1px solid var(--boe-token-stroke-stroke, #e8e8e8); border-radius: 12px; background: var(--boe-token-surface-surface, #fff); }\n  [part=keyboard-chooser] { position: fixed; inset: auto; width: min(320px, calc(100vw - 24px)); max-height: min(420px, calc(100dvh - 24px)); margin: 0; overflow: auto; padding: 12px; border: 1px solid var(--boe-token-stroke-stroke, #e8e8e8); border-radius: 12px; background: var(--boe-token-surface-surface, #fff); color: var(--boe-token-text-text, #141413); box-shadow: var(--boe-shadow-overlay, 0 4px 12px rgb(0 0 0 / .16)); }\n  [part=chooser-title] { margin: 0 0 10px; font-size: 12px; font-weight: 650; line-height: 1.4; color: var(--boe-token-text-text-secondary, #6f6f6f); }\n  [part=controls] { position: absolute; left: 16px; bottom: 16px; z-index: 10; display: flex; align-items: center; gap: 2px; padding: 4px; border: 1px solid var(--boe-token-stroke-stroke, #e8e8e8); border-radius: 12px; background: var(--boe-token-surface-surface, #fff); box-shadow: var(--boe-shadow-overlay, 0 4px 12px rgb(0 0 0 / .16)); }\n  [part=controls] button:not([data-command=reset]) { width: 32px; padding: 0; }\n  [part=controls-divider] { width: 1px; height: 20px; margin: 0 4px; background: var(--boe-token-stroke-stroke, #e8e8e8); }\n  [part=controls] [data-command=reset] { min-width: 56px; padding: 0 6px; 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: color-mix(in srgb, var(--boe-token-text-text-secondary, #6f6f6f) 35%, transparent); }\n  [part=minimap] rect[data-selected=true] { fill: var(--boe-token-surface-surface-brand, #0061d5); }\n  [part=minimap] rect[data-section] { fill: color-mix(in srgb, var(--boe-token-text-text-secondary, #6f6f6f) 8%, transparent); }\n  [part=minimap] [data-viewport] { fill: color-mix(in srgb, var(--boe-token-surface-surface-brand, #0061d5) 8%, transparent); stroke: var(--boe-token-surface-surface-brand, #0061d5); stroke-width: 1.5; vector-effect: non-scaling-stroke; }\n  [part=selection-toolbar] { position: absolute; bottom: auto; z-index: 11; display: flex; flex-wrap: nowrap; gap: 2px; padding: 4px; border: 1px solid var(--boe-token-stroke-stroke, #e8e8e8); border-radius: 12px; background: var(--boe-token-surface-surface, #fff); box-shadow: var(--boe-shadow-overlay, 0 4px 12px rgb(0 0 0 / .16)); white-space: nowrap; }\n  [part=selection-toolbar] button { display: inline-flex; align-items: center; gap: 4px; }\n  [part=selection-plus] { font-size: 18px; line-height: 12px; font-weight: 500; }\n  [part=checks] { display: grid; gap: 6px; margin: 0; padding: 0; }\n  [part=checks] button { width: 100%; display: grid; grid-template-columns: 16px 1fr; align-items: start; gap: 8px; padding: 8px 10px; border: 1px solid var(--boe-token-stroke-stroke, #e8e8e8); border-radius: 10px; text-align: start; background: var(--boe-token-surface-surface, #fff); color: var(--boe-token-text-text, #222); line-height: 1.45; }\n  [part=check-icon] { flex: 0 0 16px; width: 16px; height: 16px; margin-top: 1px; color: var(--boe-token-text-status-text-error, #b92340); }\n  [part=checks] strong { display: block; font-size: 13px; font-weight: 600; line-height: 1.45; }\n  [part=checks] small { color: var(--boe-token-text-text-secondary, #6f6f6f); font-size: 12.5px; }\n  [part=check-icon][data-tone=success] { color: var(--boe-token-text-status-text-success, #138a58); }\n  [part=problem] { display: flex; align-items: center; gap: 4px; }\n  [part=problem] [part=check-icon] { flex-basis: 12px; width: 12px; height: 12px; margin: 0; }\n  [part=checks-ready] { display: flex; align-items: center; gap: 8px; margin: 0; color: var(--boe-token-text-text, #222); font-size: 13px; line-height: 1.45; }\n  [part=process-heading] { display: grid; gap: 2px; padding: 0 16px 12px; }\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] :is(input,textarea)[part=expression-control] { border-color: var(--boe-token-surface-surface-quaternary, #d3d3d3); padding: 7px 12px; border-radius: 12px; box-shadow: inset 0 2px 4px rgb(0 0 0 / .06); font: 12.5px/1.5 ui-monospace, \"SF Mono\", Menlo, Consolas, monospace; }\n  [part=field] textarea[part=expression-control] { min-height: 72px; }\n  [part=field]:has([part=expression-control]), [part=field] label:has([part=expression-control]) { gap: 6px; }\n  [part=field] label:has([part=expression-control]) { font-weight: 600; line-height: 1.45; }\n  [part=field]:has([part=expression-control]) small { line-height: 1.45; }\n  [part=expression-help] { margin-top: 8px; font-size: 12.5px; line-height: 1.45; color: var(--boe-token-text-text-secondary, #6f6f6f); }\n  [part=expression-help] summary { cursor: pointer; font-weight: 600; }\n  [part=expression-help] ul { padding-left: 18px; margin: 6px 0 0; display: grid; gap: 4px; }\n  [part=expression-help] li { margin: 0; }\n  [part=field-feedback][data-tone=success] { color: var(--boe-token-text-status-text-success, #247b3e); }\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=editor], [part=pane-content], [part=editor] > *, [part=pane-content] > * { min-width: 0; }\n  [part=process-title], [part=process-summary] { min-width: 0; overflow-wrap: anywhere; }\n  :is([part=local-variable-summary],[part=saved-result-summary]) :is(ul,li) { min-width: 0; max-width: 100%; }\n  [part=pane-content][data-pane=Variables] { display: grid; align-content: start; gap: 14px; }\n  [part=variables-intro], [part=variable-list] > p { margin: 0; font-size: 12.5px; line-height: 1.5; color: var(--boe-token-text-text-secondary,#6f6f6f); }\n  [part=variable-scopes] { display: grid; grid-template-columns: auto 1fr; gap: 4px 10px; margin: 0; font-size: 12.5px; line-height: 1.45; }\n  [part=variable-scopes] dt { font-weight: 650; }\n  [part=variable-scopes] dd { margin: 0; color: var(--boe-token-text-text-secondary, #6f6f6f); }\n  :is([part=local-variable-summary],[part=saved-result-summary],[part=local-variables]) { font-size: 12.5px; line-height: 1.45; }\n  :is([part=local-variable-summary],[part=saved-result-summary],[part=local-variables]) h3 { margin: 0 0 6px; font-size: 12.5px; line-height: 1.45; font-weight: 650; }\n  :is([part=local-variable-summary],[part=saved-result-summary],[part=local-variables]) p { margin: 0; line-height: 1.5; color: var(--boe-token-text-text-secondary,#6f6f6f); }\n  :is([part=local-variable-summary],[part=saved-result-summary]) ul { list-style: none; display: grid; gap: 4px; margin: 0; padding: 0; }\n  :is([part=local-variable-summary],[part=saved-result-summary]) li { display: flex; align-items: center; gap: 8px; padding: 4px 4px 4px 10px; border: 1px solid var(--boe-token-stroke-stroke,#e8e8e8); border-radius: 10px; background: var(--boe-token-surface-surface-secondary,#fbfbfb); font-size: 13px; line-height: 1.45; }\n  :is([part=local-variable-summary],[part=saved-result-summary]) li > span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }\n  :is([part=local-variable-summary],[part=saved-result-summary]) code { font-family: monospace; font-size: 13px; }\n  :is([part=local-variable-summary],[part=saved-result-summary]) em { font-style: normal; color: var(--boe-token-text-text-secondary,#6f6f6f); }\n  [part=local-variable-list], [part=variable-list] { display: grid; gap: 10px; }\n  [part=local-variable-row] { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr) 32px; gap: 6px; align-items: center; }\n  [part=local-variable-row] [part=field-problem] { grid-column: 1 / -1; color: var(--boe-token-text-status-text-error, #b92340); font-size: 12px; }\n  [part=local-variables] label { display: block; min-width: 0; }\n  [part=local-variables] input { width: 100%; min-width: 0; min-height: 32px; padding: 5px 10px; border: 1px solid var(--boe-token-surface-surface-quaternary,#d3d3d3); border-radius: 10px; background: var(--boe-token-surface-surface,#fff); color: var(--boe-token-text-text,#141413); font: 12.5px/1.45 var(--boe-token-font-family-base,Inter,sans-serif); }\n  [part=local-variables] input:focus-visible { outline-offset: 1px; }\n  [part=local-variable-actions], [part=variable-actions] { display: flex; gap: 8px; flex-wrap: wrap; padding-top: 4px; }\n  [part=variable-icon] { flex: 0 0 16px; width: 16px; height: 16px; color: var(--boe-token-text-text-secondary,#6f6f6f); }\n  [part=variable-chips] { display: flex; flex-wrap: wrap; gap: 6px; }\n  [part=variable-chips] button { min-height: 24px; padding: 3px 8px; border: 1px solid var(--boe-token-stroke-stroke, #e8e8e8); border-radius: 12px; background: var(--boe-token-surface-surface-secondary, #fbfbfb); font: 12px ui-monospace, \"SF Mono\", Menlo, Consolas, monospace; }\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; font-size: 12.5px; line-height: 1.5; font-variant-numeric: tabular-nums; }\n  [part=inspector-metrics] h3 { margin: 0 0 6px; font-size: 12.5px; }\n  [part=inspector-metrics] p { margin: 0; color: var(--boe-token-text-text-secondary, #6f6f6f); }\n  [part=inspector-metrics] table { width: 100%; border-collapse: collapse; font-size: 13px; line-height: 1.45; }\n  [part=inspector-metrics] :is(th,td) { padding: 5px 0; border-bottom: 1px solid var(--boe-token-stroke-stroke, #e8e8e8); font-weight: 400; }\n  [part=inspector-metrics] th { text-align: start; font-variant-numeric: normal; }\n  [part=inspector-metrics] td { text-align: right; font-variant-numeric: tabular-nums; }\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: 32px; margin-top: 4px; padding: 0 14px; border-radius: 20px; font-size: 13px; font-weight: 600; letter-spacing: .01em; }\n  [part=outline-list] { margin: 0; padding-left: 22px; font-size: 13.5px; line-height: 1.5; }\n  [part=outline-list] [part=outline-list] { margin-top: 2px; }\n  [part=outline-list] li { margin: 3px 0; padding-left: 2px; }\n  [part=outline-list] li::marker { color: var(--boe-token-text-text-secondary, #6f6f6f); font-variant-numeric: tabular-nums; font-size: 12.5px; }\n  [part=outline-list] button, [part=outline-list] strong { border: 0; border-radius: 4px; background: transparent; padding: 0; min-height: 24px; display: inline-block; font-size: 13.5px; font-weight: 600; line-height: 24px; text-align: start; }\n  [part=outline-list] button:hover { color: var(--boe-token-surface-surface-brand, #0061d5); text-decoration: underline; text-underline-offset: 2px; }\n  [part=outline-list] button[aria-current=true] { color: var(--boe-token-surface-surface-brand, #0061d5); }\n  [part=outline-list] p { margin: 0; color: var(--boe-token-text-text-secondary, #6f6f6f); font-size: 12.5px; line-height: 1.5; }\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=variable-row] { display: grid; gap: 4px; padding: 10px 0; border-bottom: 1px solid var(--boe-token-stroke-stroke, #e8e8e8); font-size: 12.5px; }\n  [part=pane-content][data-pane=Connections] { display: grid; align-content: start; gap: 14px; padding: 16px; }\n  [part=connections-help] { font-size: 12.5px; color: var(--boe-token-text-text-secondary, #6f6f6f); margin: 0; line-height: 1.5; }\n  [part=connections-list] { min-width: 0; list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }\n  [part=connection-row] { min-width: 0; line-height: 1.45; display: flex; align-items: center; gap: 8px; font-size: 13px; padding: 4px 4px 4px 10px; border-radius: 10px; background: var(--boe-token-surface-surface-secondary, #fbfbfb); border: 1px solid var(--boe-token-stroke-stroke, #e8e8e8); }\n  [part=connection-row] > span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }\n  [part=connection-row] b { font-weight: 600; }\n  [part=connection-row] em { font-style: normal; color: var(--boe-token-text-text-secondary, #6f6f6f); }\n  [part=connections-actions] { display: flex; gap: 8px; flex-wrap: wrap; padding-top: 4px; }\n  [part=connections-actions] button { line-height: 1.45; min-height: 32px; padding: 0 14px; border-radius: 20px; font-size: 13px; font-weight: 600; letter-spacing: .01em; }\n  :host([data-variables-editable]) [part=variable-row] { grid-template-columns: minmax(0,1fr) minmax(0,1fr) 32px; gap: 6px; align-items: center; }\n  :host([data-variables-editable]) [part=variable-row] label:has([data-variable-key=name]) { grid-column: 1; grid-row: 1; }\n  :host([data-variables-editable]) [part=variable-row] label:has([data-variable-key=value]) { grid-column: 2; grid-row: 1; }\n  :host([data-variables-editable]) [part=variable-row] label:has([data-variable-key=scope]) { grid-column: 2; grid-row: 2; }\n  :host([data-variables-editable]) [part=variable-remove] { grid-column: 3; grid-row: 1; }\n  :host([data-variables-editable]) [part=variable-row] :is(input,select) { width: 100%; min-width: 0; min-height: 32px; border-radius: 10px; font-size: 12.5px; }\n  :host([data-variables-editable]) [part=variable-row] p { grid-column: 1 / -1; }\n  :host([data-variables-editable]) [part=variable-row] [part=field-problem] { color: var(--boe-token-text-status-text-error, #b92340); }\n  [part=variable-remove], [part=variable-add] { min-height: 32px; align-self: end; border: 1px solid var(--boe-token-stroke-stroke, #e8e8e8); border-radius: 8px; background: var(--boe-token-surface-surface, #fff); color: inherit; cursor: pointer; }\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] :is(input,select) { 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  :host([data-variables-editable]) [part=variable-row] { padding: 0; border: 0; }\n  :host([data-variables-editable]) [part=variable-row] label { display: block; min-width: 0; }\n  :host([data-variables-editable]) [part=variable-row] label:has([data-variable-key=description]) { grid-column: 1; grid-row: 2; }\n  :host([data-variables-editable]) [part=variable-row] :is(input,select) { min-height: 32px; padding: 5px 10px; border: 1px solid var(--boe-token-surface-surface-quaternary,#d3d3d3); font: 12.5px/1.45 var(--boe-token-font-family-base,Inter,sans-serif); }\n  :host([data-variables-editable]) [part=variable-row] select { padding: 4px 8px; }\n  :host([data-variables-editable]) [part=variable-row] input:focus-visible { outline-offset: 1px; }\n  [part=local-variables] button, [part=variable-add], [part=variable-remove] { display: inline-flex; align-items: center; gap: 6px; height: 32px; min-height: 32px; padding: 0 14px; border: 1px solid var(--boe-token-stroke-stroke,#e8e8e8); border-radius: 20px; background: var(--boe-token-surface-surface,#fff); font: 600 13px/1.45 var(--boe-token-font-family-base,Inter,sans-serif); letter-spacing: .01em; white-space: nowrap; }\n  [part=local-variables] [data-local-key=remove], [part=variable-remove] { width: 32px; padding: 0; justify-content: center; border-color: transparent; background: transparent; align-self: center; }\n  [part=local-variables] button:hover, [part=variable-add]:hover, [part=variable-remove]:hover { background: var(--boe-token-surface-surface-hover,#f4f4f4); }\n  [part=local-variables] button:disabled, [part=variable-add]:disabled, [part=variable-remove]:disabled { opacity: .45; }\n  [part=help] { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }\n  :host([data-narrow]) [part=layout] { grid-template-columns: minmax(0,1fr); }\n  :host([data-narrow]) [part=layout] { overflow: visible; }\n  :host([data-narrow]) [part=pane-drawer] { display: none; position: absolute; z-index: 40; margin: 0; max-width: none; max-height: none; padding: 0; overflow: auto; border: 0; border-radius: 0; background: var(--boe-token-surface-surface, #fff); box-shadow: var(--boe-shadow-overlay, 0 4px 12px rgb(0 0 0 / .24)); }\n  :host([data-narrow]) [part=pane-drawer][open] { display: block; }\n  :host([data-narrow]) [part=pane-title] { display: block; position: absolute; top: 18px; left: 16px; margin: 0; font-size: 14px; font-weight: 650; line-height: 20px; }\n  :host([data-narrow]) [part=pane-close], :host([data-narrow]) [data-command=palette], :host([data-narrow]) [data-command=details] { display: inline-block; }\n  :host([data-narrow]) [part=pane-close] { position: absolute; top: 12px; right: 12px; z-index: 1; width: 28px; height: 28px; padding: 0; border-radius: 50%; font-size: 16px; font-weight: 600; line-height: 1; }\n  :host([data-narrow]) [part=pane-drawer][data-pane=palette] { left: 0; top: 0; bottom: auto; width: min(320px, 86%); height: 100%; max-height: 100%; }\n  :host([data-narrow]) [part=pane-drawer][data-pane=inspector] { left: 0; right: 0; top: auto; bottom: 0; width: 100%; height: min(62%, 560px); border-radius: 24px 24px 0 0; }\n  :host([data-narrow]) [part=pane-drawer][data-pane=inspector]::before { content: ''; display: block; width: 36px; height: 4px; margin: 6px auto; border-radius: 2px; background: var(--boe-token-text-text-secondary, #767676); opacity: .55; }\n  :host([data-narrow]) [part=palette], :host([data-narrow]) [part=inspector] { height: 100%; }\n  :host([data-narrow]) [part=inspector] { border-left: 0; }\n  :host([data-narrow]) [part=palette] { padding-top: 54px; }\n  :host([data-narrow]) [part=palette-heading] { display: none; }\n  :host([data-narrow]) [part=minimap] { display: none; }\n  :host([data-narrow]) [part=toolbar] { justify-content: flex-start; gap: 8px; padding: 8px 12px; flex-wrap: wrap; }\n  :host([data-narrow]) [part=view-switch], :host([data-narrow]) [part=run-toggle] { display: none; }\n  :host([data-narrow]) [data-command=checks-status] { display: none; }\n  :host([data-narrow]) [part=view-menu] { display: block; }\n  :host([data-hide-tidy]) [part=toolbar-title] { font-size: 14px; }\n  :host([data-hide-tidy]) [part=toolbar-document] span { display: none; }\n  :host([data-hide-tidy]) [part=controls] { left: 12px; bottom: 12px; }\n  :host([data-narrow]) [part=selection-toolbar] [part=selection-plus] + span { display: none; }\n  :host([data-hide-tidy]) [part=toolbar-actions] [data-command=tidy] { display: none; }\n  :host([data-narrow]) [part=toolbar-actions] [data-command=undo], :host([data-narrow]) [part=toolbar-actions] [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

@@ -20,12 +20,12 @@ export const processModelerDesign = `
   [part=toolbar] {
     min-height: 56px;
     margin: 0;
-    padding: 8px 16px;
+    padding: 10px 16px;
     display: flex;
     align-items: center;
     justify-content: flex-end;
-    gap: 8px;
-    flex-wrap: wrap;
+    gap: 12px;
+    flex-wrap: nowrap;
     border-bottom: 1px solid var(--boe-token-stroke-stroke, #e8e8e8);
     background: var(--boe-token-surface-surface, #fff);
   }
@@ -55,12 +55,29 @@ export const processModelerDesign = `
   [part=run-toggle] input:checked::after { transform: translateX(14px); }
   [part=run-toggle] input:focus-visible { outline: 2px solid var(--boe-token-surface-surface-brand, #0061d5); outline-offset: 2px; }
   [part=toolbar] [data-command=checks-status] { white-space: nowrap; color: var(--boe-token-text-text-secondary, #6f6f6f); }
-  [part=toolbar] [data-command=checks-status][data-state=bad] { color: var(--boe-token-text-status-text-error, #b92340); }
+  [part=toolbar] [data-command=checks-status][data-state=bad] { color: color-mix(in srgb, var(--boe-token-text-status-text-error, #b92340) 85%, var(--boe-token-text-text, #141413)); }
+  [part=toolbar] [data-command=checks-status] svg { flex: none; }
+  [part=toolbar] [data-command=checks-status][data-state=ready] svg { color: var(--boe-token-text-status-text-success, #187657); }
   [part=view-menu] { display: none; position: relative; }
-  [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; }
+  [part=view-menu] summary { list-style: none; height: 32px; display: flex; align-items: center; padding: 0 14px; border: 1px solid var(--boe-token-stroke-stroke, #e8e8e8); border-radius: 20px; font-size: 13px; font-weight: 600; letter-spacing: .01em; cursor: pointer; white-space: nowrap; }
   [part=view-menu][open] { z-index: 20; }
-  [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)); }
-  [part=view-menu] button { display: block; width: 100%; text-align: start; background: transparent; }
+  [part=view-menu-options] { position: absolute; z-index: 20; top: calc(100% + 4px); right: 0; width: 200px; max-width: calc(100vw - 24px); 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)); }
+  [part=view-menu] button { display: flex; justify-content: space-between; gap: 16px; width: 100%; min-height: 32px; padding: 0 10px; text-align: start; background: transparent; }
+  [part=view-menu] small { color: var(--boe-token-text-text-secondary, #6f6f6f); }
+  [part=view-menu] [role=separator] { border-top: 1px solid var(--boe-token-stroke-stroke, #e8e8e8); margin: 4px 2px; }
+  [part=toolbar-document] { display: flex; align-items: baseline; gap: 10px; min-width: 0; flex: 1 1 auto; visibility: hidden; }
+  [part=toolbar-title] { font-size: 15px; font-weight: 650; margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
+  [part=toolbar-document] span { font-size: 12px; white-space: nowrap; }
+  [part=toolbar-actions] { display: flex; align-items: center; gap: 8px; }
+  [part=toolbar] button:not([role]) { height: 32px; min-height: 32px; padding: 0 14px; border-radius: 20px; font-size: 13px; font-weight: 600; letter-spacing: .01em; white-space: nowrap; }
+  [part=toolbar] [part=view-switch] { padding: 2px; gap: 0; background: var(--boe-token-surface-surface-secondary, #fbfbfb); }
+  [part=toolbar] [part=view-switch] button { height: 26px; min-height: 26px; padding: 0 12px; border: 0; border-radius: 16px; font-size: 12.5px; letter-spacing: normal; }
+  [part=toolbar] [part=view-switch] button[aria-pressed=true] { box-shadow: 0 0 0 1px var(--boe-token-stroke-stroke, #e8e8e8); }
+  [part=toolbar] button[data-command=checks-status] { display: inline-flex; align-items: center; gap: 6px; height: auto; min-height: 0; line-height: 1.45; padding: 4px 6px; border: 0; border-radius: 8px; font-weight: 400; letter-spacing: normal; }
+  [part=toolbar] [data-command=palette], [part=toolbar] [data-command=undo], [part=toolbar] [data-command=redo] { width: 32px; padding: 0; place-items: center; }
+  [part=toolbar] [data-command=palette], [part=toolbar] [data-command=details] { border-color: var(--boe-token-stroke-stroke, #e8e8e8); background: var(--boe-token-surface-surface, #fff); }
+  :host([data-compact-toolbar]) [part=view-switch], :host([data-compact-toolbar]) [part=run-toggle] { display: none; }
+  :host([data-compact-toolbar]) [part=view-menu] { display: block; }
   [part=layout] {
     display: grid;
     grid-template-columns: 248px minmax(0, 1fr) 320px;
@@ -275,6 +292,16 @@ export const processModelerDesign = `
   [part=field] label { display: grid; gap: 5px; font-size: 12.5px; font-weight: 650; }
   [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; }
   [part=field] textarea { min-height: 76px; resize: vertical; }
+  [part=field] :is(input,textarea)[part=expression-control] { border-color: var(--boe-token-surface-surface-quaternary, #d3d3d3); padding: 7px 12px; border-radius: 12px; box-shadow: inset 0 2px 4px rgb(0 0 0 / .06); font: 12.5px/1.5 ui-monospace, "SF Mono", Menlo, Consolas, monospace; }
+  [part=field] textarea[part=expression-control] { min-height: 72px; }
+  [part=field]:has([part=expression-control]), [part=field] label:has([part=expression-control]) { gap: 6px; }
+  [part=field] label:has([part=expression-control]) { font-weight: 600; line-height: 1.45; }
+  [part=field]:has([part=expression-control]) small { line-height: 1.45; }
+  [part=expression-help] { margin-top: 8px; font-size: 12.5px; line-height: 1.45; color: var(--boe-token-text-text-secondary, #6f6f6f); }
+  [part=expression-help] summary { cursor: pointer; font-weight: 600; }
+  [part=expression-help] ul { padding-left: 18px; margin: 6px 0 0; display: grid; gap: 4px; }
+  [part=expression-help] li { margin: 0; }
+  [part=field-feedback][data-tone=success] { color: var(--boe-token-text-status-text-success, #247b3e); }
   [part=field]:has([part=action-options]) { position: relative; }
   [part=field]:has([part=action-options]) input { padding-right: 34px; }
   [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; }
@@ -312,8 +339,8 @@ export const processModelerDesign = `
   [part=local-variables] input:focus-visible { outline-offset: 1px; }
   [part=local-variable-actions], [part=variable-actions] { display: flex; gap: 8px; flex-wrap: wrap; padding-top: 4px; }
   [part=variable-icon] { flex: 0 0 16px; width: 16px; height: 16px; color: var(--boe-token-text-text-secondary,#6f6f6f); }
-  [part=variable-chips] { display: flex; flex-wrap: wrap; gap: 4px; }
-  [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; }
+  [part=variable-chips] { display: flex; flex-wrap: wrap; gap: 6px; }
+  [part=variable-chips] button { min-height: 24px; padding: 3px 8px; border: 1px solid var(--boe-token-stroke-stroke, #e8e8e8); border-radius: 12px; background: var(--boe-token-surface-surface-secondary, #fbfbfb); font: 12px ui-monospace, "SF Mono", Menlo, Consolas, monospace; }
   [part=leads-to] { display: grid; gap: 6px; padding-top: 10px; border-top: 1px solid var(--boe-token-stroke-stroke, #e8e8e8); }
   [part=leads-to] h3 { margin: 0; font-size: 12.5px; }
   [part=lead-row] { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 12.5px; }
@@ -340,7 +367,16 @@ export const processModelerDesign = `
   [part=outline-list] p { margin: 0; color: var(--boe-token-text-text-secondary, #6f6f6f); font-size: 12.5px; line-height: 1.5; }
   [part=inspector-heading] { margin: 0 0 2px; font-size: 15px; font-weight: 650; }
   [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; }
-  [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; }
+  [part=variable-row] { display: grid; gap: 4px; padding: 10px 0; border-bottom: 1px solid var(--boe-token-stroke-stroke, #e8e8e8); font-size: 12.5px; }
+  [part=pane-content][data-pane=Connections] { display: grid; align-content: start; gap: 14px; padding: 16px; }
+  [part=connections-help] { font-size: 12.5px; color: var(--boe-token-text-text-secondary, #6f6f6f); margin: 0; line-height: 1.5; }
+  [part=connections-list] { min-width: 0; list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
+  [part=connection-row] { min-width: 0; line-height: 1.45; display: flex; align-items: center; gap: 8px; font-size: 13px; padding: 4px 4px 4px 10px; border-radius: 10px; background: var(--boe-token-surface-surface-secondary, #fbfbfb); border: 1px solid var(--boe-token-stroke-stroke, #e8e8e8); }
+  [part=connection-row] > span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+  [part=connection-row] b { font-weight: 600; }
+  [part=connection-row] em { font-style: normal; color: var(--boe-token-text-text-secondary, #6f6f6f); }
+  [part=connections-actions] { display: flex; gap: 8px; flex-wrap: wrap; padding-top: 4px; }
+  [part=connections-actions] button { line-height: 1.45; min-height: 32px; padding: 0 14px; border-radius: 20px; font-size: 13px; font-weight: 600; letter-spacing: .01em; }
   :host([data-variables-editable]) [part=variable-row] { grid-template-columns: minmax(0,1fr) minmax(0,1fr) 32px; gap: 6px; align-items: center; }
   :host([data-variables-editable]) [part=variable-row] label:has([data-variable-key=name]) { grid-column: 1; grid-row: 1; }
   :host([data-variables-editable]) [part=variable-row] label:has([data-variable-key=value]) { grid-column: 2; grid-row: 1; }
@@ -380,15 +416,15 @@ export const processModelerDesign = `
   :host([data-narrow]) [part=palette] { padding-top: 54px; }
   :host([data-narrow]) [part=palette-heading] { display: none; }
   :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=toolbar] { justify-content: flex-start; gap: 8px; padding: 8px 12px; flex-wrap: wrap; }
   :host([data-narrow]) [part=view-switch], :host([data-narrow]) [part=run-toggle] { display: none; }
   :host([data-narrow]) [data-command=checks-status] { display: none; }
   :host([data-narrow]) [part=view-menu] { display: block; }
+  :host([data-hide-tidy]) [part=toolbar-title] { font-size: 14px; }
+  :host([data-hide-tidy]) [part=toolbar-document] span { display: none; }
   :host([data-hide-tidy]) [part=controls] { left: 12px; bottom: 12px; }
   :host([data-narrow]) [part=selection-toolbar] [part=selection-plus] + span { display: none; }
-  :host([data-hide-tidy]) [data-command=tidy] { display: none; }
-  :host([data-phone]) [data-command=undo], :host([data-phone]) [data-command=redo] { display: none; }
+  :host([data-hide-tidy]) [part=toolbar-actions] [data-command=tidy] { display: none; }
+  :host([data-narrow]) [part=toolbar-actions] [data-command=undo], :host([data-narrow]) [part=toolbar-actions] [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/model.d.ts

@@ -118,6 +118,32 @@ export interface ProcessOutlineItem {
     boxId?: string;
     children?: readonly ProcessOutlineItem[];
 }
+/** Host-authored expression presentation; BOE does not infer scope or evaluate CEL. */
+export interface ProcessExpressionField {
+    /** Complete ordered scope; [] suppresses legacy global-variable chips. */
+    variables?: readonly {
+        name: string;
+        description?: string;
+    }[];
+    /** Values greater than one render a textarea. */
+    rows?: number;
+    /** Error feedback uses ProcessField.problem and takes precedence. */
+    feedback?: {
+        message: string;
+        tone?: 'neutral' | 'success';
+    };
+    help?: {
+        summary: string;
+        examples: readonly {
+            expression: string;
+            description: string;
+            segments?: readonly {
+                text: string;
+                format?: 'code' | 'text';
+            }[];
+        }[];
+    };
+}
 /** Host-supplied field values; the modeler draws controls and requests edits. */
 export interface ProcessField {
     key: string;
@@ -134,6 +160,7 @@ export interface ProcessField {
     required?: boolean;
     disabled?: boolean;
     problem?: string;
+    expression?: ProcessExpressionField;
 }
 export interface ProcessPositionSnapshot {
     path?: NodePath;

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

@@ -95,6 +95,7 @@ export declare class ProcessModeler<D = ProcessProjection, N = unknown> extends
     private readableValue;
     private lastDocument?;
     private connectionsValue;
+    private connectionsHelpValue;
     private variablesValue;
     private variablesEditableValue;
     private outlineValue;
@@ -125,6 +126,9 @@ export declare class ProcessModeler<D = ProcessProjection, N = unknown> extends
     set selectedPath(path: NodePath | null);
     get connections(): readonly ProcessConnection[];
     set connections(value: readonly ProcessConnection[]);
+    /** Plain-text help describing where this host owns connection setup. */
+    get connectionsHelp(): string;
+    set connectionsHelp(value: string);
     get variables(): readonly ProcessVariable[];
     set variables(value: readonly ProcessVariable[]);
     private pendingVariableRename?;
@@ -232,6 +236,9 @@ export declare class ProcessModeler<D = ProcessProjection, N = unknown> extends
     private minimapBounds;
     private bounds;
     protected renderTemplate(): void;
+    private viewMenuDocument?;
+    private syncViewMenuDismissal;
+    private dismissViewMenuOutside;
     private setupPanes;
     private openDrawer;
     private closeDrawer;

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

@@ -132,6 +132,7 @@ export class ProcessModeler extends BaseElement {
     readableValue = null;
     lastDocument;
     connectionsValue = [];
+    connectionsHelpValue = "Steps sign in with the host’s connections. Connections are set up by the host.";
     variablesValue = [];
     variablesEditableValue = false;
     outlineValue = [];
@@ -174,6 +175,9 @@ export class ProcessModeler extends BaseElement {
     }
     get connections() { return this.connectionsValue; }
     set connections(value) { this.connectionsValue = value; this.refresh(); }
+    /** Plain-text help describing where this host owns connection setup. */
+    get connectionsHelp() { return this.connectionsHelpValue; }
+    set connectionsHelp(value) { this.connectionsHelpValue = value; this.refresh(); }
     get variables() { return this.variablesValue; }
     set variables(value) {
         this.variablesValue = value;
@@ -215,8 +219,15 @@ export class ProcessModeler extends BaseElement {
     }
     load(document, options = {}) {
         this.pendingLocalRename = undefined;
-        this.layoutEditSession++;
+        const session = ++this.layoutEditSession;
+        this.insertion = undefined;
         this.cancelPalettePointer();
+        this.closeKeyboardChooser();
+        const chooser = this.shadowRoot?.querySelector('[part=insert-chooser]');
+        if (chooser)
+            dismissModal(chooser);
+        if (session !== this.layoutEditSession)
+            return;
         const projection = this.model.project(document);
         validateProjection(projection);
         this.documentValue = document;
@@ -387,6 +398,11 @@ export class ProcessModeler extends BaseElement {
         this.refresh();
     }
     disconnectedCallback() {
+        const menu = this.shadowRoot?.querySelector('[part=view-menu]');
+        if (menu)
+            menu.open = false;
+        this.viewMenuDocument?.removeEventListener('pointerdown', this.dismissViewMenuOutside, true);
+        this.viewMenuDocument = undefined;
         this.layoutEditSession++;
         this.resizeObserver?.disconnect();
         this.clearClipboard();
@@ -407,7 +423,7 @@ export class ProcessModeler extends BaseElement {
         this.marquee = undefined;
         this.segmentDrag = undefined;
     }
-    connectedCallback() { super.connectedCallback(); this.resizeObserver?.observe(this); }
+    connectedCallback() { super.connectedCallback(); this.resizeObserver?.observe(this); this.syncViewMenuDismissal(); }
     refresh() {
         if (this.isRendered)
             this.update();
@@ -906,13 +922,13 @@ export class ProcessModeler extends BaseElement {
         chooser.append(picker);
         this.shadowRoot.append(chooser);
         picker.addEventListener("kind-pick", event => {
-            const insertion = this.insertion;
-            dismissModal(chooser);
+            const insertion = this.insertion, session = this.layoutEditSession;
             this.insertion = undefined;
-            if (insertion)
+            dismissModal(chooser);
+            if (insertion && session === this.layoutEditSession && this.isConnected)
                 this.requestEdit({ ...insertion, kind: event.detail.kind });
         });
-        picker.addEventListener("picker-cancel", () => { dismissModal(chooser); this.insertion = undefined; });
+        picker.addEventListener("picker-cancel", () => { this.insertion = undefined; dismissModal(chooser); });
         const keyboardChooser = document.createElement('div');
         keyboardChooser.setAttribute('part', 'keyboard-chooser');
         keyboardChooser.setAttribute('popover', 'manual');
@@ -927,18 +943,35 @@ export class ProcessModeler extends BaseElement {
         keyboardChooser.append(keyboardTitle, keyboardPicker);
         this.shadowRoot.append(keyboardChooser);
         keyboardPicker.addEventListener('kind-pick', event => {
-            const edit = this.keyboardInsertion;
+            const edit = this.keyboardInsertion, session = this.layoutEditSession;
             this.closeKeyboardChooser(true);
+            if (session !== this.layoutEditSession || !this.isConnected)
+                return;
             // Keep a stable step focused while the host applies and accepts the edit.
             // World refreshes preserve step focus, including deferred acceptance.
             if (edit?.from)
                 this.focusBox(edit.from);
-            if (edit)
+            if (edit && session === this.layoutEditSession && this.isConnected)
                 this.requestEdit({ ...edit, kind: event.detail.kind });
         });
         keyboardPicker.addEventListener('picker-cancel', () => this.closeKeyboardChooser(true));
         this.setupPanes();
     }
+    viewMenuDocument;
+    syncViewMenuDismissal() {
+        const menu = this.shadowRoot?.querySelector('[part=view-menu]');
+        const target = this.isConnected && menu?.open ? this.ownerDocument : undefined;
+        if (this.viewMenuDocument === target)
+            return;
+        this.viewMenuDocument?.removeEventListener('pointerdown', this.dismissViewMenuOutside, true);
+        this.viewMenuDocument = target;
+        target?.addEventListener('pointerdown', this.dismissViewMenuOutside, true);
+    }
+    dismissViewMenuOutside = (event) => {
+        const menu = this.shadowRoot?.querySelector('[part=view-menu]');
+        if (menu?.open && !event.composedPath().includes(menu))
+            menu.open = false;
+    };
     setupPanes() {
         const root = this.shadowRoot;
         const toolbar = root.querySelector('[part=toolbar]');
@@ -971,27 +1004,99 @@ export class ProcessModeler extends BaseElement {
         viewMenu.append(summary);
         const viewOptions = document.createElement('div');
         viewOptions.setAttribute('part', 'view-menu-options');
+        viewOptions.setAttribute('role', 'menu');
+        viewOptions.setAttribute('aria-label', 'Diagram view');
         viewMenu.append(viewOptions);
+        summary.setAttribute('aria-haspopup', 'menu');
+        viewMenu.addEventListener('toggle', () => { summary.setAttribute('aria-expanded', String(viewMenu.open)); this.syncViewMenuDismissal(); });
+        const closeViewMenu = () => { const session = this.layoutEditSession; viewMenu.open = false; summary.focus({ preventScroll: true }); return session === this.layoutEditSession && this.isConnected; };
+        viewMenu.addEventListener('keydown', event => {
+            const items = Array.from(viewOptions.querySelectorAll('button')).filter(item => !item.hidden && !item.disabled);
+            if (event.key === 'Tab') {
+                if (viewMenu.open && root.activeElement === summary && !event.shiftKey && items.length) {
+                    event.preventDefault();
+                    items[0].focus();
+                }
+                else
+                    viewMenu.open = false;
+                return;
+            }
+            if (!['ArrowDown', 'ArrowUp', 'Home', 'End'].includes(event.key) || !items.length)
+                return;
+            event.preventDefault();
+            viewMenu.open = true;
+            const index = items.indexOf(root.activeElement);
+            const next = event.key === 'Home' ? 0 : event.key === 'End' ? items.length - 1 : event.key === 'ArrowDown' ? (index + 1) % items.length : (index < 0 ? items.length - 1 : (index + items.length - 1) % items.length);
+            items[next].focus();
+        });
+        root.addEventListener('pointerdown', event => { if (!event.composedPath().includes(viewMenu))
+            viewMenu.open = false; });
         for (const [value, label] of [["business", "Business view"], ["technical", "Technical view"]]) {
             const button = document.createElement("button");
             button.type = "button";
             button.dataset.detail = value;
             button.textContent = label;
-            button.onclick = () => { this.detail = value; viewMenu.open = false; };
+            button.setAttribute('role', 'menuitemradio');
+            button.onclick = () => { if (closeViewMenu())
+                this.detail = value; };
             viewOptions.append(button);
         }
         const mobileRun = document.createElement('button');
         mobileRun.type = 'button';
         mobileRun.dataset.viewOption = 'last-run';
-        mobileRun.textContent = 'Last run';
-        mobileRun.onclick = () => { this.showLastRun = !this.showLastRun; viewMenu.open = false; };
+        mobileRun.textContent = 'Show last run';
+        mobileRun.setAttribute('role', 'menuitem');
+        mobileRun.onclick = () => { if (closeViewMenu())
+            this.showLastRun = !this.showLastRun; };
         viewOptions.append(mobileRun);
         const mobileChecks = document.createElement('button');
         mobileChecks.type = 'button';
-        mobileChecks.textContent = 'Checks';
-        mobileChecks.onclick = () => { this.select(null); this.activePane = 'Checks'; this.renderPane(); viewMenu.open = false; this.openDrawer('inspector'); };
+        mobileChecks.dataset.viewOption = 'checks';
+        mobileChecks.textContent = 'Checks: ready to run';
+        mobileChecks.setAttribute('role', 'menuitem');
+        mobileChecks.onclick = () => { if (closeViewMenu())
+            checksStatus.click(); };
         viewOptions.append(mobileChecks);
-        toolbar.prepend(viewSwitch, runToggle, viewMenu);
+        const separator = document.createElement('div');
+        separator.setAttribute('role', 'separator');
+        viewOptions.append(separator);
+        for (const [command, label, hint] of [['tidy', 'Tidy up', ''], ['undo', 'Undo', 'Ctrl Z'], ['redo', 'Redo', 'Shift Ctrl Z']]) {
+            const item = document.createElement('button');
+            item.type = 'button';
+            item.dataset.viewOption = command;
+            item.setAttribute('role', 'menuitem');
+            const text = document.createElement('span');
+            text.textContent = label;
+            item.append(text);
+            if (hint) {
+                const key = document.createElement('small');
+                key.textContent = hint;
+                item.append(key);
+            }
+            item.onclick = () => { if (!closeViewMenu())
+                return; if (command === 'tidy')
+                this.tidy();
+            else if (command === 'undo')
+                this.undo();
+            else
+                this.redo(); };
+            viewOptions.append(item);
+        }
+        const spacer = document.createElement('div');
+        spacer.setAttribute('part', 'toolbar-document');
+        spacer.setAttribute('aria-hidden', 'true');
+        const spacerTitle = document.createElement('strong');
+        spacerTitle.setAttribute('part', 'toolbar-title');
+        spacerTitle.textContent = this.processTitleValue;
+        const saved = document.createElement('span');
+        saved.textContent = 'Saved';
+        spacer.append(spacerTitle, saved);
+        toolbar.prepend(spacer, viewSwitch, runToggle, viewMenu);
+        const actions = document.createElement('div');
+        actions.setAttribute('part', 'toolbar-actions');
+        for (const command of ['undo', 'redo', 'tidy'])
+            actions.append(toolbar.querySelector(`[data-command=${command}]`));
+        toolbar.append(actions);
         const layout = root.querySelector('[part=layout]');
         const scrim = document.createElement('div');
         scrim.setAttribute('part', 'pane-scrim');
@@ -1071,7 +1176,13 @@ export class ProcessModeler extends BaseElement {
             trigger.setAttribute("aria-label", part === "palette" ? "Add building blocks" : `Open ${label.toLowerCase()}`);
             trigger.setAttribute('aria-expanded', 'false');
             trigger.onclick = () => this.openDrawer(part);
-            toolbar.append(trigger);
+            if (part === 'palette') {
+                trigger.textContent = '';
+                trigger.append(variableGlyph(true));
+                toolbar.prepend(trigger);
+            }
+            else
+                actions.append(trigger);
         }
         const inspector = root.querySelector('[part=inspector]');
         const heading = document.createElement("div");
@@ -1170,6 +1281,7 @@ export class ProcessModeler extends BaseElement {
                 this.narrowValue = narrow;
                 this.toggleAttribute("data-narrow", narrow);
                 this.toggleAttribute('data-phone', entries[0].contentRect.width < 560);
+                this.toggleAttribute('data-compact-toolbar', entries[0].contentRect.width <= 1100);
                 this.toggleAttribute('data-hide-tidy', entries[0].contentRect.width <= 560);
                 this.renderSelectionToolbar();
                 this.positionSelectionToolbar();
@@ -1483,23 +1595,41 @@ export class ProcessModeler extends BaseElement {
             summary('saved-result-summary', 'Saved by steps', savedRows, 'No step saves its result yet. Set “Save the result as” on a step.');
         }
         else if (this.activePane === "Connections") {
-            if (!this.connections.length)
-                content.textContent = 'No connections supplied by the host.';
-            for (const connection of this.connections) {
-                const row = document.createElement('div');
-                row.setAttribute('part', 'connection-row');
-                const name = document.createElement('strong');
-                name.textContent = connection.name;
-                const kind = document.createElement('span');
-                kind.textContent = `(${connection.kind})${connection.signIn ? ` · ${connection.signIn}` : ''}`;
-                row.append(name, document.createTextNode(' '), kind);
-                content.append(row);
+            const help = document.createElement('p');
+            help.setAttribute('part', 'connections-help');
+            help.textContent = this.connectionsHelp;
+            content.append(help);
+            if (this.connections.length) {
+                const list = document.createElement('ul');
+                list.setAttribute('part', 'connections-list');
+                for (const connection of this.connections) {
+                    const row = document.createElement('li');
+                    row.setAttribute('part', 'connection-row');
+                    const text = document.createElement('span');
+                    const name = document.createElement('b');
+                    name.textContent = connection.name;
+                    const kind = document.createElement('em');
+                    kind.textContent = `${connection.kind}${connection.signIn ? ` · ${connection.signIn}` : ''}`;
+                    text.append(name, document.createTextNode(' '), kind);
+                    row.append(text);
+                    list.append(row);
+                }
+                content.append(list);
             }
+            else {
+                const empty = document.createElement('p');
+                empty.setAttribute('part', 'connections-help');
+                empty.textContent = 'None yet.';
+                content.append(empty);
+            }
+            const actions = document.createElement('div');
+            actions.setAttribute('part', 'connections-actions');
             const setup = document.createElement('button');
             setup.type = 'button';
-            setup.textContent = 'Manage connections';
+            setup.textContent = 'Set up connections';
             setup.onclick = () => emit(this, 'connection-setup-request', {});
-            content.append(setup);
+            actions.append(setup);
+            content.append(actions);
         }
         else if (this.activePane === "Shortcuts") {
             content.textContent = "Tab: move between steps. Alt+arrows: select the nearest step that way. Arrows: move one grid square. Shift+arrows: move four. N: add the next step. Ctrl+Alt+arrows: add in a direction. Enter: edit. Delete: remove. Ctrl/Command+A: select all. Ctrl/Command+C/V/D: copy, paste, duplicate. Ctrl/Command+Z and Shift+Ctrl/Command+Z: undo and redo. Shift+1: fit the whole process. Shift+drag: select a region. Drag a port: connect. Escape: cancel.";
@@ -2616,9 +2746,10 @@ export class ProcessModeler extends BaseElement {
         this.transientChooserAnchor = undefined;
         document.removeEventListener('pointerdown', this.dismissKeyboardChooserOutside, true);
         this.keyboardInsertion = undefined;
-        if (returnFocus)
-            this.keyboardReturn?.focus({ preventScroll: true });
+        const target = this.keyboardReturn;
         this.keyboardReturn = undefined;
+        if (returnFocus)
+            target?.focus({ preventScroll: true });
     }
     dismissKeyboardChooserOutside = (event) => {
         const chooser = this.shadowRoot?.querySelector('[part=keyboard-chooser]');
@@ -3462,14 +3593,17 @@ export class ProcessModeler extends BaseElement {
             checks.append(button);
         });
     }
-    renderField(box, field) {
+    renderField(box, field, helpOpen = false) {
         const row = document.createElement('div');
         row.setAttribute('part', 'field');
         const label = document.createElement('label');
         label.textContent = field.label;
         let control;
-        if (field.kind === 'multiline')
+        if (field.kind === 'multiline' || (field.kind === 'expression' && (field.expression?.rows ?? 1) > 1)) {
             control = document.createElement('textarea');
+            if (field.expression?.rows)
+                control.rows = Math.max(2, Math.floor(field.expression.rows));
+        }
         else if (field.kind === 'choice') {
             const select = document.createElement('select');
             const groups = new Map();
@@ -3498,14 +3632,20 @@ export class ProcessModeler extends BaseElement {
             control = input;
         }
         control.dataset.field = field.key;
+        control.dataset.fieldBox = box.id;
         if (control instanceof HTMLInputElement && control.type === 'checkbox')
             control.checked = Boolean(field.value);
         else
             control.value = field.kind === 'action' ? field.options?.find(option => option.value === field.value)?.label ?? String(field.value) : String(field.value);
         control.disabled = Boolean(field.disabled || this.locked);
         control.required = Boolean(field.required);
-        if (field.placeholder && control instanceof HTMLInputElement)
+        if (field.placeholder && (control instanceof HTMLInputElement || control instanceof HTMLTextAreaElement))
             control.placeholder = field.placeholder;
+        if (field.kind === 'expression') {
+            control.spellcheck = false;
+            control.setAttribute('autocomplete', 'off');
+            control.setAttribute('part', 'expression-control');
+        }
         if (field.problem)
             control.setAttribute('aria-invalid', 'true');
         const submit = () => emit(this, 'process-field-change-request', { boxId: box.id, path: box.path, key: field.key, value: control instanceof HTMLInputElement && control.type === 'checkbox' ? control.checked : control instanceof HTMLInputElement && control.type === 'number' && control.value !== '' ? Number(control.value) : control.value });
@@ -3642,30 +3782,88 @@ export class ProcessModeler extends BaseElement {
             control.setAttribute('list', options.id);
             row.append(options);
         }
-        if (field.kind === 'expression' && this.variables.length) {
+        const scope = field.expression?.variables ?? this.variables;
+        if (field.kind === 'expression' && scope.length) {
             const chips = document.createElement('div');
             chips.setAttribute('part', 'variable-chips');
-            chips.setAttribute('aria-label', 'Variables in scope');
-            for (const variable of this.variables) {
+            chips.setAttribute('role', 'group');
+            chips.setAttribute('aria-label', 'Insert a variable');
+            for (const variable of scope) {
                 const chip = document.createElement('button');
                 chip.type = 'button';
                 chip.textContent = variable.name;
                 chip.disabled = control.disabled;
-                chip.onclick = () => { control.value += variable.name; submit(); control.focus(); };
+                if (variable.description)
+                    chip.title = variable.description;
+                chip.addEventListener('pointerdown', event => event.preventDefault());
+                chip.onclick = () => {
+                    if (control.disabled || !control.isConnected || this.selected?.id !== box.id)
+                        return;
+                    const input = control;
+                    const session = this.layoutEditSession;
+                    const start = input.selectionStart ?? input.value.length, end = input.selectionEnd ?? start;
+                    input.focus();
+                    if (session !== this.layoutEditSession || !input.isConnected || input.disabled || this.locked || this.selected?.id !== box.id || this.shadowRoot?.activeElement !== input || input.closest('[inert]'))
+                        return;
+                    input.value = input.value.slice(0, start) + variable.name + input.value.slice(end);
+                    input.setSelectionRange(start + variable.name.length, start + variable.name.length);
+                    submit();
+                };
                 chips.append(chip);
             }
             row.append(chips);
         }
+        const messageId = `process-field-${encodeURIComponent(box.id)}-${encodeURIComponent(field.key)}`;
+        const describedBy = [];
         if (field.description) {
             const help = document.createElement('small');
+            help.id = `${messageId}-description`;
             help.textContent = field.description;
             row.append(help);
-        }
-        if (field.problem) {
-            const problem = document.createElement('small');
-            problem.setAttribute('part', 'field-problem');
-            problem.textContent = field.problem;
-            row.append(problem);
+            describedBy.push(help.id);
+        }
+        const feedback = field.problem || (field.kind === 'expression' ? field.expression?.feedback?.message : undefined);
+        if (feedback) {
+            const message = document.createElement('small');
+            message.id = `${messageId}-feedback`;
+            message.textContent = feedback;
+            message.setAttribute('part', field.problem ? 'field-problem' : 'field-feedback');
+            if (field.kind === 'expression')
+                message.setAttribute('aria-live', 'polite');
+            if (!field.problem && field.expression?.feedback?.tone)
+                message.dataset.tone = field.expression.feedback.tone;
+            const chips = row.querySelector('[part=variable-chips]');
+            row.insertBefore(message, chips);
+            describedBy.push(message.id);
+        }
+        if (describedBy.length)
+            control.setAttribute('aria-describedby', describedBy.join(' '));
+        if (field.kind === 'expression' && field.expression?.help) {
+            const details = document.createElement('details');
+            details.setAttribute('part', 'expression-help');
+            details.dataset.helpField = field.key;
+            details.dataset.session = String(this.layoutEditSession);
+            details.open = helpOpen;
+            const summary = document.createElement('summary');
+            summary.textContent = field.expression.help.summary;
+            details.append(summary);
+            const list = document.createElement('ul');
+            details.append(list);
+            for (const example of field.expression.help.examples) {
+                const paragraph = document.createElement('li'), code = document.createElement('code');
+                code.textContent = example.expression;
+                paragraph.append(code, document.createTextNode(' '));
+                if (example.segments)
+                    for (const segment of example.segments) {
+                        const run = document.createElement(segment.format === 'code' ? 'code' : 'span');
+                        run.textContent = segment.text;
+                        paragraph.append(run);
+                    }
+                else
+                    paragraph.append(document.createTextNode(example.description));
+                list.append(paragraph);
+            }
+            row.append(details);
         }
         return row;
     }
@@ -3676,14 +3874,20 @@ export class ProcessModeler extends BaseElement {
         const focusedControl = this.shadowRoot.activeElement;
         const focusedKey = focusedControl?.dataset.field ?? focusedControl?.dataset.variable ?? focusedControl?.dataset.localVariable;
         const variableKey = focusedControl?.dataset.variableKey;
+        const fieldBox = focusedControl?.dataset.fieldBox;
         const localKey = focusedControl?.dataset.localKey, localName = focusedControl?.dataset.localName;
         const focusedType = focusedControl?.dataset.field !== undefined ? 'field' : focusedControl?.dataset.variable !== undefined ? 'variable' : focusedControl?.dataset.localVariable !== undefined ? 'localVariable' : null;
         const caret = focusedControl && 'selectionStart' in focusedControl ? focusedControl.selectionStart : null;
+        const selectionEnd = focusedControl && 'selectionEnd' in focusedControl ? focusedControl.selectionEnd : null;
+        const direction = focusedControl && 'selectionDirection' in focusedControl ? focusedControl.selectionDirection : null;
+        const scrollTop = focusedControl?.scrollTop, scrollLeft = focusedControl?.scrollLeft;
         const restoreControlFocus = () => {
             if (focusedKey === undefined || !focusedType)
                 return;
+            if (focusedType === 'field' && (this.selected?.id !== fieldBox || this.locked))
+                return;
             const controls = Array.from(this.shadowRoot.querySelectorAll('input,textarea,select,button'));
-            const control = controls.find(item => item.dataset[focusedType] === focusedKey && (focusedType !== 'variable' || item.dataset.variableKey === variableKey) && focusedType !== 'localVariable')
+            const control = controls.find(item => item.dataset[focusedType] === focusedKey && (focusedType !== 'field' || item.dataset.fieldBox === fieldBox) && (focusedType !== 'variable' || item.dataset.variableKey === variableKey) && focusedType !== 'localVariable')
                 ?? (focusedType === 'variable' ? controls.find(item => this.pendingVariableRename?.name === focusedKey && item.dataset.variable === this.pendingVariableRename.value && item.dataset.variableKey === variableKey) ?? controls.find(item => item.dataset.variableKey === 'add') : undefined);
             if (focusedType === 'localVariable') {
                 if (focusedControl?.dataset.localAmbiguous === 'true') {
@@ -3712,11 +3916,15 @@ export class ProcessModeler extends BaseElement {
                     localControl.setSelectionRange(caret, caret);
                 return;
             }
-            if (!control)
+            if (!control || control.disabled || control.closest('[inert]'))
                 return;
-            control.focus();
+            control.focus({ preventScroll: true });
             if (caret !== null && (control instanceof HTMLInputElement || control instanceof HTMLTextAreaElement) && control.type !== 'number' && control.type !== 'checkbox')
-                control.setSelectionRange(caret, caret);
+                control.setSelectionRange(caret, selectionEnd ?? caret, direction ?? undefined);
+            if (scrollTop !== undefined)
+                control.scrollTop = scrollTop;
+            if (scrollLeft !== undefined)
+                control.scrollLeft = scrollLeft;
         };
         this.shadowRoot.querySelectorAll('[part=minimap] [data-map-box]').forEach(rect => rect.dataset.selected = String(this.selectedIds.has(rect.dataset.mapBox)));
         this.shadowRoot.querySelectorAll('[part=line]').forEach(line => { const selected = this.selectedLineIds.has(line.dataset.lineId); line.dataset.selected = String(selected); line.setAttribute('marker-end', `url(#${selected ? 'boe-process-arrow-brand' : 'boe-process-arrow'})`); });
@@ -3729,7 +3937,8 @@ export class ProcessModeler extends BaseElement {
         });
         const editor = this.shadowRoot.querySelector("[part=editor]");
         const selected = this.selected;
-        const controlsKey = `${[...this.selectedIds].join(',')}|${this.locked}|${this.disableConnections}|${this.showLastRunValue}|${selected?.runMetrics}|${JSON.stringify([selected?.localVariables, selected?.localVariablesEditable, selected?.frame])}|${JSON.stringify(selected ? this.fieldsValue[selected.id] ?? [] : [])}`;
+        const fallbackScope = selected && (this.fieldsValue[selected.id] ?? []).some(field => field.kind === 'expression' && field.expression?.variables === undefined) ? this.variables.map(({ name, description }) => ({ name, description })) : undefined;
+        const controlsKey = `${JSON.stringify(fallbackScope)}|${[...this.selectedIds].join(',')}|${this.locked}|${this.disableConnections}|${this.showLastRunValue}|${selected?.runMetrics}|${JSON.stringify([selected?.localVariables, selected?.localVariablesEditable, selected?.frame])}|${JSON.stringify(selected ? this.fieldsValue[selected.id] ?? [] : [])}`;
         this.shadowRoot.querySelector("[part=palette]").hidden = false;
         this.shadowRoot.querySelector('[part=selection-toolbar]').hidden = this.selection.length === 0;
         this.renderSelectionToolbar();
@@ -3749,6 +3958,13 @@ export class ProcessModeler extends BaseElement {
             restoreControlFocus();
             return;
         }
+        const expressionHelp = new Map();
+        if (this.inspectedId === selected?.id && this.selectedIds.size === 1) {
+            for (const help of Array.from(editor.querySelectorAll('[part=expression-help]'))) {
+                if (help.dataset.session === String(this.layoutEditSession))
+                    expressionHelp.set(help.dataset.helpField, help.open);
+            }
+        }
         this.cleanupInspector?.();
         this.cleanupInspector = undefined;
         editor.replaceChildren();
@@ -3798,7 +4014,7 @@ export class ProcessModeler extends BaseElement {
                 editor.append(purpose);
             }
             for (const field of this.fieldsValue[selected.id] ?? [])
-                editor.append(this.renderField(selected, field));
+                editor.append(this.renderField(selected, field, expressionHelp.get(field.key)));
             if (selected.localVariables !== undefined)
                 editor.append(this.renderLocalVariables(selected));
             this.cleanupInspector =
@@ -4057,21 +4273,49 @@ export class ProcessModeler extends BaseElement {
         button("undo").disabled = !this.history.canUndo || this.locked;
         button("redo").disabled = !this.history.canRedo || this.locked;
         button("tidy").disabled = this.locked;
+        this.shadowRoot.querySelector('[part=toolbar-title]').textContent = this.processTitleValue;
+        for (const command of ['undo', 'redo', 'tidy'])
+            this.shadowRoot.querySelector(`[data-view-option=${command}]`).disabled = button(command).disabled;
         button("lock").setAttribute("aria-pressed", String(this.locked));
         button("snap").setAttribute("aria-pressed", String(this.snapToGrid));
         this.shadowRoot.querySelectorAll('[data-detail]').forEach(control => {
-            control.setAttribute("aria-pressed", String(control.dataset.detail === this.detailValue));
+            if (!control.closest('[part=view-menu]'))
+                control.setAttribute("aria-pressed", String(control.dataset.detail === this.detailValue));
+            if (control.closest('[part=view-menu]'))
+                control.setAttribute('aria-checked', String(control.dataset.detail === this.detailValue));
+            if (control.closest('[part=view-menu]'))
+                control.textContent = `${control.dataset.detail === this.detailValue ? '✓ ' : ''}${control.dataset.detail === 'business' ? 'Business view' : 'Technical view'}`;
         });
         const runToggle = this.shadowRoot.querySelector('[part=run-toggle]');
         runToggle.hidden = !this.lastRunValue;
         runToggle.querySelector('input').checked = this.showLastRunValue;
         const mobileRun = this.shadowRoot.querySelector('[data-view-option=last-run]');
         mobileRun.hidden = !this.lastRunValue;
-        mobileRun.setAttribute('aria-pressed', String(this.showLastRunValue));
+        mobileRun.removeAttribute('aria-pressed');
+        mobileRun.textContent = this.showLastRunValue ? 'Hide last run' : 'Show last run';
         const checksStatus = button('checks-status');
         const count = this.allChecks.length;
-        checksStatus.textContent = count ? `${count} ${count === 1 ? 'problem' : 'problems'}` : '✓ Ready to run';
+        const glyph = svgElement('svg');
+        glyph.setAttribute('viewBox', '0 0 16 16');
+        glyph.setAttribute('aria-hidden', 'true');
+        const circle = svgElement('circle');
+        circle.setAttribute('cx', '8');
+        circle.setAttribute('cy', '8');
+        circle.setAttribute('r', '7');
+        circle.setAttribute('fill', 'currentColor');
+        const mark = svgElement('path');
+        mark.setAttribute('d', count ? 'm5 5 6 6m0-6-6 6' : 'm4.5 8 2.5 2.5 4.5-5');
+        mark.setAttribute('stroke', 'var(--boe-token-surface-surface, #fff)');
+        mark.setAttribute('stroke-width', '1.5');
+        mark.setAttribute('fill', 'none');
+        mark.setAttribute('stroke-linecap', 'round');
+        mark.setAttribute('stroke-linejoin', 'round');
+        glyph.append(circle, mark);
+        const label = document.createElement('span');
+        label.textContent = count ? `${count} ${count === 1 ? 'thing needs' : 'things need'} attention` : 'Ready to run';
+        checksStatus.replaceChildren(glyph, label);
         checksStatus.dataset.state = count ? 'bad' : 'ready';
+        this.shadowRoot.querySelector('[data-view-option=checks]').textContent = count ? `Checks (${count})` : 'Checks: ready to run';
     }
     paintViewport() {
         const world = this.shadowRoot.querySelector("[part=world]");

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@unofficialbox/box-open-elements",
-  "version": "0.33.0",
+  "version": "0.35.0",
   "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",
@@ -210,7 +210,7 @@
     "test:watch": "vitest",
     "test:coverage": "vitest run --coverage",
     "verify": "bun run maps:check && bun run types:check && bun run typecheck && bun run test:coverage && bun run build && bun run types:validate && bun run frameworks:validate",
-    "types:validate": "tsc -p test/types/tsconfig.json --noEmit && tsc -p test/types/react-jsx-only.tsconfig.json --noEmit",
+    "types:validate": "tsc -p test/types/tsconfig.json --noEmit && tsc -p test/types/react-jsx-only.tsconfig.json --noEmit && tsc -p test/types/modeler-properties-only.tsconfig.json --noEmit",
     "frameworks:react": "tsc --noEmit -p examples/frameworks/react/tsconfig.json && vite build --config examples/frameworks/react/vite.config.ts",
     "frameworks:react:ssr": "next build examples/frameworks/react-ssr",
     "frameworks:angular": "ngc -p examples/frameworks/angular/tsconfig.json && vite build --config examples/frameworks/angular/vite.config.ts",