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

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

@@ -294,6 +294,7 @@ export class CodeEditor extends BaseElement {
       [part=editor]:focus-within{box-shadow:0 0 0 3px var(--boe-token-surface-surface-brand,#0061d5)}
       .cm-editor.cm-focused{outline:none}
       .cm-scroller{max-height:var(--boe-code-editor-height,420px);min-height:160px;overflow:auto;font-family:var(--boe-code-font-family,monospace);font-size:var(--boe-code-font-size,14px);line-height:var(--boe-code-line-height,1.6)}
+      .cm-editor .cm-scroller{line-height:var(--boe-code-line-height,1.4)!important}
       :host([fill-height]){height:100%}
       :host([fill-height]) [part=editor],:host([fill-height]) .cm-editor,:host([fill-height]) .cm-scroller{height:100%;max-height:none;min-height:0}
       .cm-gutters,.cm-panels{color:var(--boe-code-foreground,var(--boe-token-text-text,#222))!important;border-color:var(--boe-token-stroke-stroke,#ddd)!important}
@@ -302,7 +303,7 @@ export class CodeEditor extends BaseElement {
       .cm-tooltip{background:var(--boe-code-popup-background,var(--boe-token-surface-surface-secondary,#fbfbfb))!important;color:var(--boe-code-popup-foreground,var(--boe-code-foreground,var(--boe-token-text-text,#222)))!important;border-color:var(--boe-code-popup-border,var(--boe-token-stroke-stroke,#ddd))!important}
       .cm-tooltip .cm-diagnostic,.cm-tooltip-autocomplete ul li{color:var(--boe-code-popup-foreground,var(--boe-code-foreground,var(--boe-token-text-text,#222)))}
       .cm-cursor{border-left-color:var(--boe-code-caret,var(--boe-token-text-text,#222))}
-      .cm-activeLine,.cm-activeLineGutter{background:color-mix(in srgb,var(--boe-token-surface-surface-brand,#0061d5) 12%,transparent)!important}
+      .cm-activeLine,.cm-activeLineGutter{background:var(--boe-code-active-line,color-mix(in srgb,var(--boe-token-surface-surface-brand,#0061d5) 12%,transparent))!important}
       :host([current-line-style=border]) .cm-activeLine{background:transparent!important;box-shadow:inset 0 1px var(--boe-code-current-line-border,var(--boe-token-stroke-stroke,#ddd)),inset 0 -1px var(--boe-code-current-line-border,var(--boe-token-stroke-stroke,#ddd))}
       :host([current-line-style=none]) .cm-activeLine{background:transparent!important}
       :host([current-line-style=border]) .cm-activeLineGutter,:host([current-line-style=none]) .cm-activeLineGutter{background:transparent!important}

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";
+    "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-progress-bar": "hideLabel" | "label" | "max" | "value";
     "box-progress-ring": "label" | "max" | "size" | "value";
     "box-progress-steps": "compact" | "items" | "label" | "value";
@@ -942,6 +942,20 @@ export interface BoxElementEventMap {
             name: string;
             value: string;
         }>;
+        "process-variable-edit-request": CustomEvent<{
+            type: "add";
+        } | {
+            type: "remove";
+            name: string;
+        } | {
+            type: "rename";
+            name: string;
+            value: string;
+        } | {
+            type: "scope";
+            name: string;
+            value: "iteration" | "process";
+        }>;
         "projection-changed": CustomEvent<{
             projection: import("./patterns/process-modeler/model.js").ProcessProjection<unknown>;
             version: string | number;

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

@@ -1,7 +1,14 @@
 /** Detach graph presentation data without cloning the host-owned node payload. */
 export function snapshotProcessProjection(projection) {
     return {
-        boxes: projection.boxes.map(box => ({ ...box, ...(box.path ? { path: [...box.path] } : {}) })),
+        boxes: projection.boxes.map(box => ({
+            ...box,
+            ...(box.path ? { path: [...box.path] } : {}),
+            ...(box.technicalDetails ? { technicalDetails: box.technicalDetails.map(detail => ({
+                    ...detail,
+                    ...(detail.segments ? { segments: detail.segments.map(segment => ({ ...segment })) } : {}),
+                })) } : {}),
+        })),
         lines: projection.lines.map(line => ({
             ...line,
             ...(line.points ? { points: line.points.map(point => ({ ...point })) } : {}),

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

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

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

@@ -126,7 +126,7 @@ export const processModelerDesign = `
     touch-action: none; user-select: none; cursor: grab;
   }
   [part=canvas][data-panning] { cursor: grabbing; }
-  [part=hold] { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 10px 16px; border-bottom: 1px solid var(--boe-token-stroke-status-stroke-warning, #9a6b00); background: var(--boe-token-surface-status-surface-warning, #fff7df); color: var(--boe-token-text-status-text-warning, #6b4a00); font-size: 13px; }
+  [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; }
   [part=hold-text] { flex: 1 1 280px; min-width: 0; }
   [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; }
   [part=world] { position: absolute; inset: 0; transform-origin: 0 0; }
@@ -152,7 +152,11 @@ export const processModelerDesign = `
   [part=box] strong, [part=frame] strong { font-size: 13.5px; font-weight: 650; line-height: 1.3; }
   [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; }
   [part=technical-description] { font: 12px/1.4 ui-monospace, 'SF Mono', Menlo, Consolas, monospace !important; overflow-wrap: anywhere; }
-  [part=metrics] { grid-column: 2; font-size: 12px; font-variant-numeric: tabular-nums; }
+  [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; }
+  [part=metrics][data-state=unmeasured] { color: var(--boe-token-text-text-secondary, #6f6f6f); }
+  [part=metric-separator] { color: var(--boe-token-text-text-tertiary, #767676); }
+  [part=technical-summary] { overflow-wrap: anywhere; }
+  [part=technical-inline-code] { font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace; }
   [part=metric-warning] { color: var(--boe-token-text-status-text-warning, #8a5800); }
   [part=icon] { grid-row: span 3; width: 20px; height: 20px; color: var(--boe-token-text-text-secondary, #6f6f6f); }
   [part=icon] svg { display: block; width: 20px; height: 20px; }
@@ -177,7 +181,15 @@ export const processModelerDesign = `
   [data-shape=gateway] > [part=icon], [data-shape=event] > [part=icon] { position: absolute; left: 18px; top: 18px; z-index: 1; }
   [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; }
   [data-shape=gateway] > small { display: none; }
+  [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); }
+  [part=caption][data-side=below] { top: 60px; }
+  [part=caption][data-side=above] { bottom: 60px; }
+  [part=caption] strong { font-size: 12.5px; font-weight: 600; line-height: 1.3; }
+  [part=caption] small { display: block; font-weight: 400; }
+  [part=caption] [part=technical-description] { font: 10.5px ui-monospace, 'SF Mono', Menlo, Consolas, monospace !important; white-space: nowrap; }
   [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; }
+  [part=event-details] { position: absolute; top: 75px; left: 50%; width: 172px; translate: -50% 0; text-align: center; }
+  [part=event-details] small { display: block; font-size: 11px; line-height: 1.25; }
   [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)); }
   [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; }
   [part=port][data-side=north] { left: calc(50% - 12px); top: -12px; }
@@ -221,15 +233,23 @@ export const processModelerDesign = `
   [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)); }
   [part=controls] [data-command=reset] { min-width: 56px; font-variant-numeric: tabular-nums; }
   [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)); }
-  [part=minimap] rect:not([data-viewport]) { fill: var(--boe-token-stroke-stroke-hover, #d3d3d3); }
-  [part=minimap] [data-viewport] { fill: color-mix(in srgb, var(--boe-token-surface-surface-brand, #0061d5) 9%, transparent); stroke: var(--boe-token-surface-surface-brand, #0061d5); stroke-width: 1; }
+  [part=minimap] rect:not([data-viewport]) { fill: color-mix(in srgb, var(--boe-token-text-text-secondary, #6f6f6f) 35%, transparent); }
+  [part=minimap] rect[data-selected=true] { fill: var(--boe-token-surface-surface-brand, #0061d5); }
+  [part=minimap] rect[data-section] { fill: color-mix(in srgb, var(--boe-token-text-text-secondary, #6f6f6f) 8%, transparent); }
+  [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; }
   [part=selection-toolbar] { position: absolute; bottom: auto; z-index: 11; display: flex; flex-wrap: nowrap; gap: 2px; padding: 4px; border: 1px solid var(--boe-token-stroke-stroke, #e8e8e8); border-radius: 12px; background: var(--boe-token-surface-surface, #fff); box-shadow: var(--boe-shadow-overlay, 0 4px 12px rgb(0 0 0 / .16)); white-space: nowrap; }
   [part=selection-toolbar] button { display: inline-flex; align-items: center; gap: 4px; }
   [part=selection-plus] { font-size: 18px; line-height: 12px; font-weight: 500; }
-  [part=checks] { display: grid; gap: 6px; margin-top: 12px; }
-  [part=checks] button { color: var(--boe-token-text-status-text-error, #b92340); }
+  [part=checks] { display: grid; gap: 6px; margin: 0; padding: 0; }
+  [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; }
+  [part=check-icon] { flex: 0 0 16px; width: 16px; height: 16px; margin-top: 1px; color: var(--boe-token-text-status-text-error, #b92340); }
+  [part=checks] strong { display: block; font-size: 13px; font-weight: 600; line-height: 1.45; }
+  [part=checks] small { color: var(--boe-token-text-text-secondary, #6f6f6f); font-size: 12.5px; }
+  [part=check-icon][data-tone=success] { color: var(--boe-token-text-status-text-success, #138a58); }
+  [part=problem] { display: flex; align-items: center; gap: 4px; }
+  [part=problem] [part=check-icon] { flex-basis: 12px; width: 12px; height: 12px; margin: 0; }
+  [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; }
   [part=process-heading] { display: grid; gap: 2px; padding: 0 16px 12px; }
-  :host([embed-mode]) [part=view-switch], :host([embed-mode]) [part=run-toggle], :host([embed-mode]) [part=view-menu] { display: none; }
   [part=process-title] { font-size: 15px; line-height: 1.4; }
   [part=process-summary] { color: var(--boe-token-text-text-secondary, #6f6f6f); font-size: 12.5px; }
   [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; }
@@ -262,34 +282,42 @@ export const processModelerDesign = `
   [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; }
   [part=lead-row] button, [part=leads-to] > button, [part=inspector-actions] button { min-height: 28px; padding: 4px 8px; font-size: 12px; }
-  [part=inspector-metrics] { margin: 0; padding-top: 10px; border-top: 1px solid var(--boe-token-stroke-stroke, #e8e8e8); font-size: 12px; font-variant-numeric: tabular-nums; }
+  [part=inspector-metrics] { margin: 0; font-size: 12.5px; line-height: 1.5; font-variant-numeric: tabular-nums; }
   [part=inspector-metrics] h3 { margin: 0 0 6px; font-size: 12.5px; }
-  [part=inspector-metrics] p { margin: 0 0 8px; color: var(--boe-token-text-text-secondary, #6f6f6f); }
-  [part=inspector-metrics] dl { display: grid; grid-template-columns: 1fr auto; gap: 4px 8px; margin: 0; }
-  [part=inspector-metrics] dt { color: var(--boe-token-text-text-secondary, #6f6f6f); }
-  [part=inspector-metrics] dd { margin: 0; font-weight: 650; }
+  [part=inspector-metrics] p { margin: 0; color: var(--boe-token-text-text-secondary, #6f6f6f); }
+  [part=inspector-metrics] table { width: 100%; border-collapse: collapse; font-size: 13px; line-height: 1.45; }
+  [part=inspector-metrics] :is(th,td) { padding: 5px 0; border-bottom: 1px solid var(--boe-token-stroke-stroke, #e8e8e8); font-weight: 400; }
+  [part=inspector-metrics] th { text-align: start; }
+  [part=inspector-metrics] td { text-align: end; font-variant-numeric: tabular-nums; }
   [part=inspector-actions] { display: flex; gap: 8px; padding-top: 10px; border-top: 1px solid var(--boe-token-stroke-stroke, #e8e8e8); }
   [part=arrange-actions] { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 6px; }
   [part=arrange-actions] button { min-height: 32px; padding: 5px 7px; font-size: 12px; text-align: start; }
   [part=outline-intro] { margin: 4px 0 14px; color: var(--boe-token-text-text-secondary, #6f6f6f); font-size: 12.5px; line-height: 1.5; }
-  [part=copy-outline] { justify-self: start; min-height: 28px; margin-bottom: 8px; padding: 4px 10px; border-radius: 16px; font-size: 12px; font-weight: 650; }
-  [part=outline-list] { margin: 0; padding-left: 18px; display: grid; gap: 8px; }
-  [part=outline-list] [part=outline-list] { margin: 6px 0 0; gap: 6px; }
-  [part=outline-list] li { padding-left: 0; font-size: 12.5px; }
-  [part=outline-list] li::marker { color: var(--boe-token-text-text-secondary, #6f6f6f); }
-  [part=outline-list] button, [part=outline-list] strong { border: 0; border-radius: 4px; background: transparent; padding: 0; min-height: 0; font-size: 12.5px; font-weight: 650; line-height: 1.45; text-align: start; }
-  [part=outline-list] button:hover { color: var(--boe-token-surface-surface-brand, #0061d5); text-decoration: underline; }
+  [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; }
+  [part=outline-list] { margin: 0; padding-left: 22px; font-size: 13.5px; line-height: 1.5; }
+  [part=outline-list] [part=outline-list] { margin-top: 2px; }
+  [part=outline-list] li { margin: 3px 0; padding-left: 2px; }
+  [part=outline-list] li::marker { color: var(--boe-token-text-text-secondary, #6f6f6f); font-variant-numeric: tabular-nums; font-size: 12.5px; }
+  [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; }
+  [part=outline-list] button:hover { color: var(--boe-token-surface-surface-brand, #0061d5); text-decoration: underline; text-underline-offset: 2px; }
   [part=outline-list] button[aria-current=true] { color: var(--boe-token-surface-surface-brand, #0061d5); }
-  [part=outline-list] p { margin: 2px 0 0; color: var(--boe-token-text-text-secondary, #6f6f6f); font-size: 12px; line-height: 1.45; }
+  [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=checks] { margin: 0; padding: 0; }
-  [part=checks] button { width: 100%; border: 0; border-bottom: 1px solid var(--boe-token-stroke-stroke, #e8e8e8); border-radius: 0; text-align: start; background: transparent; }
   [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; }
+  :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; }
+  :host([data-variables-editable]) [part=variable-row] label:has([data-variable-key=scope]) { grid-column: 2; grid-row: 2; }
+  :host([data-variables-editable]) [part=variable-remove] { grid-column: 3; grid-row: 1; }
+  :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; }
+  :host([data-variables-editable]) [part=variable-row] p { grid-column: 1 / -1; }
+  :host([data-variables-editable]) [part=variable-row] [part=field-problem] { color: var(--boe-token-text-status-text-error, #b92340); }
+  [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; }
   [part=variable-row] p { margin: 0; color: var(--boe-token-text-text-secondary, #6f6f6f); }
   [part=variable-scope] { color: var(--boe-token-text-text-secondary, #6f6f6f); font-size: 11.5px; }
   [part=variable-row] label { display: grid; gap: 4px; font-weight: 650; }
-  [part=variable-row] input { min-height: 36px; padding: 7px 10px; border: 1px solid var(--boe-token-stroke-stroke, #e8e8e8); border-radius: 8px; background: var(--boe-token-surface-surface, #fff); }
+  [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); }
   [part=help] { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
   :host([data-narrow]) [part=layout] { grid-template-columns: minmax(0,1fr); }
   :host([data-narrow]) [part=layout] { overflow: visible; }
@@ -302,6 +330,7 @@ export const processModelerDesign = `
   :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; }
   :host([data-narrow]) [part=pane-drawer][data-pane=inspector]::before { content: ''; display: block; width: 36px; height: 4px; margin: 6px auto; border-radius: 2px; background: var(--boe-token-text-text-secondary, #767676); opacity: .55; }
   :host([data-narrow]) [part=palette], :host([data-narrow]) [part=inspector] { height: 100%; }
+  :host([data-narrow]) [part=inspector] { border-left: 0; }
   :host([data-narrow]) [part=palette] { padding-top: 54px; }
   :host([data-narrow]) [part=palette-heading] { display: none; }
   :host([data-narrow]) [part=minimap] { display: none; }
@@ -310,7 +339,7 @@ export const processModelerDesign = `
   :host([data-narrow]) [part=view-menu] { order: -1; }
   :host([data-narrow]) [part=view-switch], :host([data-narrow]) [part=run-toggle] { display: none; }
   :host([data-narrow]) [data-command=checks-status] { display: none; }
-  :host([data-narrow]:not([embed-mode])) [part=view-menu] { display: block; }
+  :host([data-narrow]) [part=view-menu] { display: block; }
   :host([data-narrow]) [part=controls] { left: 12px; bottom: 12px; }
   :host([data-narrow]) [part=selection-toolbar] [part=selection-plus] + span { display: none; }
   :host([data-phone]) [data-command=tidy] { display: none; }

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

@@ -1,4 +1,14 @@
 import type { FlowKind, NodePath } from "../flow-builder/model.js";
+/** Plain-text technical lines supplied by the host; code lines use the mono face. */
+export interface ProcessTechnicalDetail {
+    text: string;
+    format?: "code" | "text";
+    /** Optional plain-text runs replacing text, for code embedded within prose. */
+    segments?: readonly {
+        text: string;
+        format?: "code" | "text";
+    }[];
+}
 export interface ProcessBox<N = unknown> {
     id: string;
     node: N;
@@ -7,6 +17,10 @@ export interface ProcessBox<N = unknown> {
     description?: string;
     /** Description used in Technical view; absent values fall back to description. */
     technicalDescription?: string;
+    /** Structured Technical view lines; when supplied, replace technicalDescription. */
+    technicalDetails?: readonly ProcessTechnicalDetail[];
+    /** False when this host does not time this task kind; default task metrics remain enabled. */
+    runMetrics?: boolean;
     /** Visual anatomy, independent of the host's kind identifier. */
     shape?: "task" | "gateway" | "event" | "frame";
     path?: NodePath;
@@ -49,6 +63,21 @@ export interface ProcessVariable {
     startingValue?: string;
     problem?: string;
 }
+/** Host-owned variable edits; the host echoes the updated variables property. */
+export type ProcessVariableEdit = {
+    type: 'add';
+} | {
+    type: 'remove';
+    name: string;
+} | {
+    type: 'rename';
+    name: string;
+    value: string;
+} | {
+    type: 'scope';
+    name: string;
+    value: 'iteration' | 'process';
+};
 /** Host-authored, readable outline; boxId links a row to a projected step. */
 export interface ProcessOutlineItem {
     title: string;
@@ -152,6 +181,8 @@ export interface ProcessLayout {
     }[]>;
 }
 export interface ProcessCheck {
+    /** Short problem title; message supplies its explanatory detail. */
+    title?: string;
     message: string;
     boxId?: string;
     path?: NodePath;

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

@@ -47,6 +47,7 @@ export declare class ProcessModeler<D = ProcessProjection, N = unknown> extends
     private lastDocument?;
     private connectionsValue;
     private variablesValue;
+    private variablesEditableValue;
     private outlineValue;
     private fieldsValue;
     private processTitleValue;
@@ -74,6 +75,10 @@ export declare class ProcessModeler<D = ProcessProjection, N = unknown> extends
     set connections(value: readonly ProcessConnection[]);
     get variables(): readonly ProcessVariable[];
     set variables(value: readonly ProcessVariable[]);
+    private pendingVariableRename?;
+    /** Opt in to name, scope, add and remove controls; edits remain host-owned. */
+    get variablesEditable(): boolean;
+    set variablesEditable(value: boolean);
     get outline(): readonly ProcessOutlineItem[];
     set outline(value: readonly ProcessOutlineItem[]);
     get fields(): Readonly<Record<string, readonly ProcessField[]>>;
@@ -164,12 +169,14 @@ export declare class ProcessModeler<D = ProcessProjection, N = unknown> extends
     zoomBy(factor: number): void;
     fit(): void;
     private fitTo;
+    private minimapBounds;
     private bounds;
     protected renderTemplate(): void;
     private setupPanes;
     private openDrawer;
     private closeDrawer;
     private renderPane;
+    private requestVariableEdit;
     private selectionCommand;
     private tidySelection;
     arrangeSelection(action: 'left' | 'center' | 'right' | 'top' | 'middle' | 'bottom' | 'distribute-horizontal' | 'distribute-vertical'): void;

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

@@ -7,12 +7,33 @@ import { restoreProcessPositions, snapshotProcessPositions, snapshotProcessProje
 import { processModelerDesign } from "./design.js";
 import { completeLayout, ProcessHistory, validateProjection, } from "./model.js";
 const svgElement = (tag) => document.createElementNS("http://www.w3.org/2000/svg", tag);
+const checkGlyph = (success = false) => {
+    const icon = svgElement('svg');
+    icon.setAttribute('part', 'check-icon');
+    icon.setAttribute('viewBox', '0 0 16 16');
+    icon.setAttribute('aria-hidden', 'true');
+    icon.dataset.tone = success ? 'success' : 'error';
+    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', success ? 'm4.5 8 2.5 2.5 4.5-5' : 'm5 5 6 6m0-6-6 6');
+    mark.setAttribute('fill', 'none');
+    mark.setAttribute('stroke', 'var(--boe-token-surface-surface,#fff)');
+    mark.setAttribute('stroke-width', '1.5');
+    mark.setAttribute('stroke-linecap', 'round');
+    icon.append(circle, mark);
+    return icon;
+};
 const emit = (element, name, detail) => element.dispatchEvent(new CustomEvent(name, {
     detail,
     bubbles: true,
     composed: true,
     cancelable: true,
 }));
+const formatFailedShare = (share) => `${Number((share * 100).toFixed(1))}%`;
 const formatRunDuration = (ms) => ms >= 1000 ? `${(ms / 1000).toFixed(ms >= 10000 ? 0 : 1)} s` : `${Math.round(ms)} ms`;
 /** Projects host documents without owning workflow schemas or persistence. */
 export class ProcessModeler extends BaseElement {
@@ -63,6 +84,7 @@ export class ProcessModeler extends BaseElement {
     lastDocument;
     connectionsValue = [];
     variablesValue = [];
+    variablesEditableValue = false;
     outlineValue = [];
     fieldsValue = {};
     processTitleValue = "Process";
@@ -96,7 +118,16 @@ export class ProcessModeler extends BaseElement {
     get connections() { return this.connectionsValue; }
     set connections(value) { this.connectionsValue = value; this.refresh(); }
     get variables() { return this.variablesValue; }
-    set variables(value) { this.variablesValue = value; this.refresh(); }
+    set variables(value) {
+        this.variablesValue = value;
+        this.refresh();
+        if (this.pendingVariableRename && !value.some(v => v.name === this.pendingVariableRename.name) && value.some(v => v.name === this.pendingVariableRename.value))
+            this.pendingVariableRename = undefined;
+    }
+    pendingVariableRename;
+    /** Opt in to name, scope, add and remove controls; edits remain host-owned. */
+    get variablesEditable() { return this.variablesEditableValue; }
+    set variablesEditable(value) { this.variablesEditableValue = value; this.toggleAttribute('data-variables-editable', value); this.refresh(); }
     get outline() { return this.outlineValue; }
     set outline(value) { this.outlineValue = value; this.refresh(); }
     get fields() { return this.fieldsValue; }
@@ -219,7 +250,8 @@ export class ProcessModeler extends BaseElement {
         emit(this, "detail-changed", { detail: value });
     }
     get lastRun() { return this.lastRunValue; }
-    set lastRun(value) { this.lastRunValue = value; this.inspected = undefined; this.refresh(); }
+    set lastRun(value) { this.lastRunValue = value; if (!value)
+        this.showLastRunValue = false; this.inspected = undefined; this.refresh(); }
     get showLastRun() { return this.showLastRunValue; }
     set showLastRun(value) { this.showLastRunValue = Boolean(value); this.inspected = undefined; this.refresh(); }
     get locked() {
@@ -561,6 +593,19 @@ export class ProcessModeler extends BaseElement {
         this.viewport.y = 20 - bounds.y * this.viewport.zoom;
         this.paintViewport();
     }
+    minimapBounds(canvas) {
+        const positions = this.projection.boxes.map(box => this.layoutValue.boxes[box.id]);
+        const view = { x: -this.viewport.x / this.viewport.zoom, y: -this.viewport.y / this.viewport.zoom, width: canvas.clientWidth / this.viewport.zoom, height: canvas.clientHeight / this.viewport.zoom };
+        const sections = this.layoutValue.sections ?? [];
+        const notes = this.layoutValue.notes ?? [];
+        const x = Math.min(view.x, ...positions.map(p => p.x), ...sections.map(s => s.x), ...notes.map(n => n.x));
+        const y = Math.min(view.y, ...positions.map(p => p.y), ...sections.map(s => s.y), ...notes.map(n => n.y));
+        const right = Math.max(view.x + view.width, ...positions.map(p => p.x + (p.width ?? 224)), ...sections.map(s => s.x + s.width), ...notes.map(n => n.x + 208));
+        const bottom = Math.max(view.y + view.height, ...positions.map(p => p.y + (p.height ?? 64)), ...sections.map(s => s.y + s.height), ...notes.map(n => n.y + 80));
+        const pad = 40, scale = Math.min(208 / (right - x + 2 * pad), 136 / (bottom - y + 2 * pad));
+        const width = 208 / scale, height = 136 / scale;
+        return { x: x - pad - (width - (right - x + 2 * pad)) / 2, y: y - pad - (height - (bottom - y + 2 * pad)) / 2, width, height };
+    }
     bounds() {
         const positions = this.projection.boxes.map((box) => this.layoutValue.boxes[box.id]);
         const x = Math.min(0, ...positions.map((pos) => pos.x));
@@ -796,7 +841,7 @@ export class ProcessModeler extends BaseElement {
         content.id = "process-pane-content";
         heading.after(tabs);
         inspector.append(content);
-        root.querySelector('[part=checks]').removeAttribute("role");
+        root.querySelector('[part=checks]').setAttribute("role", "group");
         const canvas = root.querySelector('[part=canvas]');
         const hold = document.createElement('div');
         hold.setAttribute('part', 'hold');
@@ -947,7 +992,6 @@ export class ProcessModeler extends BaseElement {
                 emit(this, 'outline-copy-request', { text: value });
                 void navigator.clipboard?.writeText(value).then(() => this.setStatus('Outline copied')).catch(() => this.setStatus('Use your host copy action to copy the outline'));
             };
-            content.append(copy);
             const appendOutline = (items, parent) => {
                 const list = document.createElement("ol");
                 list.setAttribute("part", "outline-list");
@@ -973,29 +1017,55 @@ export class ProcessModeler extends BaseElement {
                 parent.append(list);
             };
             appendOutline(outline, content);
+            content.append(copy);
         }
         else if (this.activePane === "Checks") {
             content.append(checks);
-            if (!this.allChecks.length) {
-                const message = document.createElement("p");
-                message.textContent = "Ready to run";
-                content.prepend(message);
-            }
         }
         else if (this.activePane === "Variables") {
             if (!this.variables.length)
                 content.textContent = 'No variables supplied by the host.';
-            for (const variable of this.variables) {
+            for (const [index, variable] of this.variables.entries()) {
                 const row = document.createElement('div');
                 row.setAttribute('part', 'variable-row');
-                const heading = document.createElement('strong');
-                heading.textContent = variable.name;
-                row.append(heading);
-                if (variable.scope) {
-                    const scope = document.createElement('span');
-                    scope.textContent = variable.scope;
-                    scope.setAttribute('part', 'variable-scope');
-                    row.append(scope);
+                const identify = (control, key) => { control.dataset.variable = variable.name; control.dataset.variableKey = key; control.dataset.variableIndex = String(index); };
+                if (this.variablesEditable) {
+                    const label = document.createElement('label');
+                    label.textContent = 'Name';
+                    const name = document.createElement('input');
+                    name.type = 'text';
+                    name.value = variable.name;
+                    name.disabled = this.locked;
+                    identify(name, 'name');
+                    name.onchange = () => this.requestVariableEdit({ type: 'rename', name: variable.name, value: name.value });
+                    label.append(name);
+                    row.append(label);
+                    const scopeLabel = document.createElement('label');
+                    scopeLabel.textContent = 'Scope';
+                    const scope = document.createElement('select');
+                    identify(scope, 'scope');
+                    scope.disabled = this.locked;
+                    for (const [value, text] of [['iteration', 'Each iteration'], ['process', 'The whole process']]) {
+                        const option = document.createElement('option');
+                        option.value = value;
+                        option.textContent = text;
+                        scope.append(option);
+                    }
+                    scope.value = variable.scope ?? 'iteration';
+                    scope.onchange = () => this.requestVariableEdit({ type: 'scope', name: variable.name, value: scope.value });
+                    scopeLabel.append(scope);
+                    row.append(scopeLabel);
+                }
+                else {
+                    const heading = document.createElement('strong');
+                    heading.textContent = variable.name;
+                    row.append(heading);
+                    if (variable.scope) {
+                        const scope = document.createElement('span');
+                        scope.textContent = variable.scope;
+                        scope.setAttribute('part', 'variable-scope');
+                        row.append(scope);
+                    }
                 }
                 if (variable.description) {
                     const description = document.createElement('p');
@@ -1007,7 +1077,7 @@ export class ProcessModeler extends BaseElement {
                     label.textContent = 'Starting value';
                     const input = document.createElement('input');
                     input.type = 'text';
-                    input.dataset.variable = variable.name;
+                    identify(input, 'value');
                     input.value = variable.startingValue;
                     input.disabled = this.locked;
                     input.setAttribute('aria-invalid', String(Boolean(variable.problem)));
@@ -1015,14 +1085,39 @@ export class ProcessModeler extends BaseElement {
                     label.append(input);
                     row.append(label);
                 }
+                const scopeControl = row.querySelector('[data-variable-key=scope]')?.closest('label');
+                if (scopeControl)
+                    row.append(scopeControl);
                 if (variable.problem) {
                     const problem = document.createElement('p');
                     problem.setAttribute('part', 'field-problem');
                     problem.textContent = variable.problem;
                     row.append(problem);
                 }
+                if (this.variablesEditable) {
+                    const remove = document.createElement('button');
+                    remove.type = 'button';
+                    remove.setAttribute('part', 'variable-remove');
+                    remove.setAttribute('aria-label', `Remove ${variable.name || 'this variable'}`);
+                    remove.textContent = '×';
+                    remove.disabled = this.locked;
+                    identify(remove, 'remove');
+                    remove.onclick = () => this.requestVariableEdit({ type: 'remove', name: variable.name });
+                    row.append(remove);
+                }
                 content.append(row);
             }
+            if (this.variablesEditable) {
+                const add = document.createElement('button');
+                add.type = 'button';
+                add.setAttribute('part', 'variable-add');
+                add.dataset.variable = '@add';
+                add.dataset.variableKey = 'add';
+                add.textContent = 'Add a variable';
+                add.disabled = this.locked;
+                add.onclick = () => this.requestVariableEdit({ type: 'add' });
+                content.append(add);
+            }
         }
         else if (this.activePane === "Connections") {
             if (!this.connections.length)
@@ -1047,6 +1142,13 @@ export class ProcessModeler extends BaseElement {
             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.";
         }
     }
+    requestVariableEdit(edit) {
+        if (!this.locked) {
+            if (edit.type === 'rename')
+                this.pendingVariableRename = { name: edit.name, value: edit.value };
+            emit(this, 'process-variable-edit-request', edit);
+        }
+    }
     selectionCommand(command) {
         if (this.locked)
             return;
@@ -1273,7 +1375,7 @@ export class ProcessModeler extends BaseElement {
             const rect = minimap.getBoundingClientRect();
             if (!rect.width || !rect.height)
                 return;
-            const bounds = this.bounds();
+            const bounds = this.minimapBounds(canvas);
             this.viewport.x =
                 canvas.clientWidth / 2 -
                     (bounds.x + ((event.clientX - rect.left) / rect.width) * bounds.width) *
@@ -2053,13 +2155,67 @@ export class ProcessModeler extends BaseElement {
             const title = document.createElement("strong");
             title.textContent = box.title;
             element.append(title);
-            const descriptionText = this.detailValue === "technical" ? box.technicalDescription ?? box.description : box.description;
-            if (descriptionText) {
-                const description = document.createElement("small");
-                description.textContent = descriptionText;
-                if (this.detailValue === "technical")
-                    description.setAttribute("part", "technical-description");
-                element.append(description);
+            let descriptionParent = element;
+            if (shape === 'event' && this.detailValue === 'technical' && box.technicalDetails?.length) {
+                const details = document.createElement('div');
+                details.setAttribute('part', 'event-details');
+                element.append(details);
+                descriptionParent = details;
+            }
+            if (shape === 'gateway' && this.detailValue === 'technical' && box.technicalDetails?.length) {
+                const caption = document.createElement('div');
+                caption.setAttribute('part', 'caption');
+                const position = this.layoutValue.boxes[box.id];
+                let topUsed = false, bottomUsed = false;
+                for (const line of this.projection.lines) {
+                    const points = this.routedLines.get(line.id);
+                    const end = line.from === box.id ? points?.[0] : line.to === box.id ? points?.at(-1) : undefined;
+                    if (!end)
+                        continue;
+                    if (Math.abs(end.y - position.y) < .01)
+                        topUsed = true;
+                    if (Math.abs(end.y - (position.y + 56)) < .01)
+                        bottomUsed = true;
+                }
+                caption.dataset.side = bottomUsed && !topUsed ? 'above' : 'below';
+                caption.append(title);
+                element.append(caption);
+                descriptionParent = caption;
+            }
+            if (shape === 'task' && box.technicalDetails)
+                icon.style.gridRow = 'span 4';
+            if (this.detailValue === "technical" && box.technicalDetails) {
+                for (const line of box.technicalDetails) {
+                    if (!line.text && !line.segments?.length)
+                        continue;
+                    const description = document.createElement("small");
+                    if (line.segments) {
+                        for (const segment of line.segments) {
+                            if (segment.format === "code") {
+                                const code = document.createElement("span");
+                                code.setAttribute("part", "technical-inline-code");
+                                code.textContent = segment.text;
+                                description.append(code);
+                            }
+                            else
+                                description.append(document.createTextNode(segment.text));
+                        }
+                    }
+                    else
+                        description.textContent = line.text;
+                    description.setAttribute("part", line.format === "code" ? "technical-description" : "technical-summary");
+                    descriptionParent.append(description);
+                }
+            }
+            else {
+                const descriptionText = this.detailValue === "technical" ? box.technicalDescription ?? box.description : box.description;
+                if (descriptionText) {
+                    const description = document.createElement("small");
+                    description.textContent = descriptionText;
+                    if (this.detailValue === "technical")
+                        description.setAttribute("part", "technical-description");
+                    descriptionParent.append(description);
+                }
             }
             if (box.frame && box.loopMark) {
                 const loop = document.createElement('span');
@@ -2069,25 +2225,39 @@ export class ProcessModeler extends BaseElement {
                 element.append(loop);
             }
             const metrics = this.showLastRunValue ? this.lastRunValue?.steps[box.id] : undefined;
-            if (this.showLastRunValue && this.lastRunValue && shape === 'task') {
+            if (this.showLastRunValue && this.lastRunValue && shape === 'task' && box.runMetrics !== false) {
                 const line = document.createElement("span");
                 line.setAttribute("part", "metrics");
-                line.textContent = !metrics || metrics.notInRun ? "Not in the last run" : [
-                    metrics.callsPerSecond === undefined ? "" : `${metrics.callsPerSecond.toFixed(1)}/s`,
-                    metrics.p95Ms === undefined ? "" : `p95 ${formatRunDuration(metrics.p95Ms)}`,
-                ].filter(Boolean).join(" · ");
-                if (metrics?.failedShare !== undefined && metrics.failedShare > 0 && !metrics.notInRun) {
-                    const failed = document.createElement('span');
-                    failed.setAttribute('part', 'metric-warning');
-                    failed.textContent = `${(metrics.failedShare * 100).toFixed(1)}% failed`;
-                    line.append(document.createTextNode(' · '), failed);
+                if (!metrics || metrics.notInRun) {
+                    line.dataset.state = 'unmeasured';
+                    line.textContent = "Not in the last run";
+                }
+                else {
+                    const parts = [];
+                    const add = (text, warning = false) => { const part = document.createElement('span'); part.textContent = text; if (warning)
+                        part.setAttribute('part', 'metric-warning'); parts.push(part); };
+                    if (metrics.callsPerSecond !== undefined)
+                        add(`${metrics.callsPerSecond.toFixed(1)}/s`);
+                    if (metrics.p95Ms !== undefined)
+                        add(`p95 ${formatRunDuration(metrics.p95Ms)}`);
+                    if (metrics.failedShare !== undefined && metrics.failedShare > 0)
+                        add(`${formatFailedShare(metrics.failedShare)} failed`, true);
+                    for (const [index, part] of parts.entries()) {
+                        if (index) {
+                            const separator = document.createElement('span');
+                            separator.setAttribute('part', 'metric-separator');
+                            separator.textContent = '·';
+                            line.append(document.createTextNode(' '), separator, document.createTextNode(' '));
+                        }
+                        line.append(part);
+                    }
                 }
                 element.append(line);
             }
             if (problem) {
                 const message = document.createElement("span");
                 message.setAttribute("part", "problem");
-                message.textContent = problem.message;
+                message.append(checkGlyph(), document.createTextNode(problem.title ?? problem.message));
                 element.append(message);
             }
             element.addEventListener("keydown", event => {
@@ -2433,16 +2603,32 @@ export class ProcessModeler extends BaseElement {
     renderChecks() {
         const checks = this.shadowRoot.querySelector("[part=checks]");
         checks.replaceChildren();
+        if (!this.allChecks.length) {
+            const message = document.createElement('p');
+            message.setAttribute('part', 'checks-ready');
+            message.append(checkGlyph(true), document.createTextNode('Ready to run. Every step connects from start to finish.'));
+            checks.append(message);
+        }
         const hold = this.shadowRoot.querySelector('[part=hold]');
         hold.hidden = this.allChecks.length === 0;
         hold.querySelector('[part=hold-text]').textContent = `${this.allChecks.length} ${this.allChecks.length === 1 ? 'problem needs' : 'problems need'} fixing before this drawing can be read back.`;
         this.allChecks.forEach((check) => {
             const button = document.createElement("button");
             button.type = "button";
-            button.textContent = check.message;
             const box = this.projection.boxes.find((box) => box.id === check.boxId ||
                 (check.path &&
                     JSON.stringify(box.path) === JSON.stringify(check.path)));
+            const icon = checkGlyph();
+            const text = document.createElement('span');
+            const title = document.createElement('strong');
+            title.textContent = check.title ? box ? `${box.title}: ${check.title.toLowerCase()}` : check.title : check.message;
+            text.append(title);
+            if (check.title) {
+                const detail = document.createElement('small');
+                detail.textContent = check.message;
+                text.append(detail);
+            }
+            button.append(icon, text);
             button.addEventListener("click", () => {
                 if (box) {
                     this.select(box.id);
@@ -2665,18 +2851,22 @@ export class ProcessModeler extends BaseElement {
             return;
         const focusedControl = this.shadowRoot.activeElement;
         const focusedKey = focusedControl?.dataset.field ?? focusedControl?.dataset.variable;
-        const focusedType = focusedControl?.dataset.field ? 'field' : focusedControl?.dataset.variable ? 'variable' : null;
+        const variableKey = focusedControl?.dataset.variableKey;
+        const focusedType = focusedControl?.dataset.field !== undefined ? 'field' : focusedControl?.dataset.variable !== undefined ? 'variable' : null;
         const caret = focusedControl && 'selectionStart' in focusedControl ? focusedControl.selectionStart : null;
         const restoreControlFocus = () => {
-            if (!focusedKey || !focusedType)
+            if (focusedKey === undefined || !focusedType)
                 return;
-            const control = Array.from(this.shadowRoot.querySelectorAll('input,textarea')).find(item => item.dataset[focusedType] === focusedKey);
+            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 === '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 (!control)
                 return;
             control.focus();
-            if (caret !== null && control.type !== 'number' && control.type !== 'checkbox')
+            if (caret !== null && (control instanceof HTMLInputElement || control instanceof HTMLTextAreaElement) && control.type !== 'number' && control.type !== 'checkbox')
                 control.setSelectionRange(caret, caret);
         };
+        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 = line.dataset.lineId === this.selectedLineId; line.dataset.selected = String(selected); line.setAttribute('marker-end', `url(#${selected ? 'boe-process-arrow-brand' : 'boe-process-arrow'})`); });
         this.shadowRoot.querySelectorAll("[data-box-id]").forEach((element) => {
             element.setAttribute("aria-current", String(this.selectedIds.has(element.dataset.boxId)));
@@ -2687,7 +2877,7 @@ 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}|${JSON.stringify(selected ? this.fieldsValue[selected.id] ?? [] : [])}`;
+        const controlsKey = `${[...this.selectedIds].join(',')}|${this.locked}|${this.disableConnections}|${this.showLastRunValue}|${selected?.runMetrics}|${JSON.stringify(selected ? this.fieldsValue[selected.id] ?? [] : [])}`;
         this.shadowRoot.querySelector("[part=palette]").hidden = false;
         this.shadowRoot.querySelector('[part=selection-toolbar]').hidden = this.selectedIds.size === 0 && !this.selectedLineId;
         this.renderSelectionToolbar();
@@ -2784,7 +2974,7 @@ export class ProcessModeler extends BaseElement {
             connect.onclick = () => { this.connecting = selected.id; this.setStatus(`Select the next box to connect from ${selected.title}`); };
             leads.append(connect);
             editor.append(leads);
-            const metrics = this.showLastRunValue ? this.lastRunValue?.steps[selected.id] : undefined;
+            const metrics = this.showLastRunValue && selected.runMetrics !== false ? this.lastRunValue?.steps[selected.id] : undefined;
             if (metrics) {
                 const report = document.createElement('section');
                 report.setAttribute('part', 'inspector-metrics');
@@ -2802,19 +2992,25 @@ export class ProcessModeler extends BaseElement {
                     report.append(note);
                 }
                 else {
-                    const list = document.createElement('dl');
-                    for (const [label, value] of [['Per second', metrics.callsPerSecond === undefined ? '–' : metrics.callsPerSecond.toFixed(1)], ['95% finished within', metrics.p95Ms === undefined ? '–' : formatRunDuration(metrics.p95Ms)], ['Failed', metrics.failedShare === undefined ? '–' : `${(metrics.failedShare * 100).toFixed(1)}%`]]) {
-                        const term = document.createElement('dt');
+                    const list = document.createElement('table');
+                    list.setAttribute('aria-label', 'Last run metrics');
+                    const body = document.createElement('tbody');
+                    list.append(body);
+                    for (const [label, value] of [['Per second', metrics.callsPerSecond === undefined ? '–' : metrics.callsPerSecond.toFixed(1)], ['95% finished within', metrics.p95Ms === undefined ? '–' : formatRunDuration(metrics.p95Ms)], ['Failed', metrics.failedShare === undefined ? '–' : formatFailedShare(metrics.failedShare)]]) {
+                        const row = document.createElement('tr');
+                        const term = document.createElement('th');
+                        term.scope = 'row';
                         term.textContent = label;
-                        const detail = document.createElement('dd');
+                        const detail = document.createElement('td');
                         detail.textContent = value;
                         if (label === 'Failed' && metrics.failedShare)
                             detail.setAttribute('part', 'metric-warning');
-                        list.append(term, detail);
+                        row.append(term, detail);
+                        body.append(row);
                     }
                     report.append(list);
                 }
-                editor.append(report);
+                editor.insertBefore(report, leads);
             }
             const actions = document.createElement('div');
             actions.setAttribute('part', 'inspector-actions');
@@ -2924,10 +3120,18 @@ export class ProcessModeler extends BaseElement {
         this.shadowRoot.querySelector("[data-command=reset]").textContent =
             `${Math.round(this.viewport.zoom * 100)}%`;
         const minimap = this.shadowRoot.querySelector("[part=minimap]");
-        const bounds = this.bounds();
+        const bounds = this.minimapBounds(canvas);
         minimap.replaceChildren();
         minimap.setAttribute("viewBox", `${bounds.x} ${bounds.y} ${bounds.width} ${bounds.height}`);
         minimap.setAttribute("preserveAspectRatio", "none");
+        for (const section of this.layoutValue.sections ?? []) {
+            const rect = svgElement('rect');
+            rect.dataset.section = 'true';
+            for (const key of ['x', 'y', 'width', 'height'])
+                rect.setAttribute(key, String(section[key]));
+            rect.setAttribute('rx', '16');
+            minimap.append(rect);
+        }
         this.projection.boxes.forEach((box) => {
             const pos = this.layoutValue.boxes[box.id];
             const rect = svgElement("rect");
@@ -2935,6 +3139,11 @@ export class ProcessModeler extends BaseElement {
             rect.setAttribute("y", String(pos.y));
             rect.setAttribute("width", String(pos.width ?? 224));
             rect.setAttribute("height", String(pos.height ?? 64));
+            rect.setAttribute('rx', box.frame ? '12' : '8');
+            rect.dataset.mapBox = box.id;
+            rect.dataset.selected = String(this.selectedIds.has(box.id));
+            if (box.frame)
+                rect.setAttribute('fill-opacity', '.35');
             minimap.append(rect);
         });
         const viewport = svgElement("rect");
@@ -2943,6 +3152,7 @@ export class ProcessModeler extends BaseElement {
         viewport.setAttribute("y", String(-this.viewport.y / this.viewport.zoom));
         viewport.setAttribute("width", String(canvas.clientWidth / this.viewport.zoom));
         viewport.setAttribute("height", String(canvas.clientHeight / this.viewport.zoom));
+        viewport.setAttribute('rx', '4');
         minimap.append(viewport);
     }
     positionSelectionToolbar() {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@unofficialbox/box-open-elements",
-  "version": "0.29.2",
+  "version": "0.31.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",