@unofficialbox/box-open-elements 0.34.0 → 0.36.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (15) hide show
  1. package/README.md +13 -13
  2. package/dist/components/forms/code-editor.d.ts +1 -0
  3. package/dist/components/forms/code-editor.js +18 -1
  4. package/dist/native-types.d.ts +1 -1
  5. package/dist/patterns/process-modeler/automatic-routing.d.ts +22 -0
  6. package/dist/patterns/process-modeler/automatic-routing.js +329 -0
  7. package/dist/patterns/process-modeler/bridge.js +2 -0
  8. package/dist/patterns/process-modeler/design.d.ts +1 -1
  9. package/dist/patterns/process-modeler/design.js +79 -23
  10. package/dist/patterns/process-modeler/geometry.js +48 -10
  11. package/dist/patterns/process-modeler/model.d.ts +54 -2
  12. package/dist/patterns/process-modeler/model.js +23 -3
  13. package/dist/patterns/process-modeler/process-modeler.d.ts +14 -0
  14. package/dist/patterns/process-modeler/process-modeler.js +782 -197
  15. package/package.json +2 -2
package/dist/patterns/process-modeler/design.d.ts CHANGED
@@ -1,2 +1,2 @@
1
1
  /** Riptide Diagram anatomy expressed through public Box Open Elements tokens. */
2
- export declare const processModelerDesign = "\n :host([hidden]), [hidden] { display: none !important; }\n *, *::before, *::after { box-sizing: border-box; }\n button, input, textarea, select { font: inherit; color: inherit; }\n button { min-height: 36px; padding: 8px; border: 1px solid var(--boe-token-stroke-stroke, #e8e8e8); border-radius: 8px; background: var(--boe-token-surface-surface, #fff); cursor: pointer; }\n button:disabled { opacity: .5; cursor: default; }\n :is(button,input,textarea,select,[part=canvas],[part=minimap],[part=box],[part=frame]):focus-visible { outline: 2px solid var(--boe-token-surface-surface-brand, #0061d5); outline-offset: 2px; }\n :host {\n display: block;\n position: relative;\n isolation: isolate;\n min-width: 0;\n --boe-process-box-edge: color-mix(in srgb, var(--boe-token-text-text, #141413) 55%, var(--boe-token-surface-surface, #fff));\n color: var(--boe-token-text-text, #141413);\n background: var(--boe-token-surface-surface, #fff);\n font: 14px/1.5 var(--boe-token-font-family-base, Inter, sans-serif);\n }\n [part=sr-only], [part=status], [part=urgent-status] { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }\n [part=toolbar] {\n min-height: 56px;\n margin: 0;\n padding: 10px 16px;\n display: flex;\n align-items: center;\n justify-content: flex-end;\n gap: 12px;\n flex-wrap: nowrap;\n border-bottom: 1px solid var(--boe-token-stroke-stroke, #e8e8e8);\n background: var(--boe-token-surface-surface, #fff);\n }\n [part=toolbar] button, [part=controls] button, [part=selection-toolbar] button {\n min-height: 30px;\n padding: 4px 10px;\n border: 1px solid transparent;\n border-radius: 8px;\n background: transparent;\n font-size: 13px;\n font-weight: 600;\n }\n [part=toolbar] svg, [part=controls] svg { width: 16px; height: 16px; display: block; }\n [part=toolbar] [data-command=undo], [part=toolbar] [data-command=redo], [part=controls] button:not([data-command=reset]) { width: 30px; height: 30px; padding: 6px; display: grid; place-items: center; }\n [part=controls] [data-command=snap][aria-pressed=true], [part=controls] [data-command=lock][aria-pressed=true] { background: color-mix(in srgb, var(--boe-token-surface-surface-brand, #0061d5) 10%, var(--boe-token-surface-surface, #fff)); color: var(--boe-token-surface-surface-brand, #0061d5); }\n [part=toolbar] button:hover, [part=controls] button:hover, [part=selection-toolbar] button:hover {\n background: var(--boe-token-surface-surface-hover, #f4f4f4);\n }\n [part=toolbar] [data-command=tidy] { border-color: var(--boe-token-stroke-stroke, #e8e8e8); border-radius: 18px; }\n [part=view-switch] { display: flex; gap: 2px; padding: 3px; border: 1px solid var(--boe-token-stroke-stroke, #e8e8e8); border-radius: 20px; }\n [part=view-switch] button { border-radius: 16px; }\n [part=view-switch] button[aria-pressed=true] { border-color: var(--boe-token-stroke-stroke, #e8e8e8); background: var(--boe-token-surface-surface, #fff); }\n [part=run-toggle] { display: flex; align-items: center; gap: 8px; white-space: nowrap; font-size: 13px; font-weight: 600; cursor: pointer; }\n [part=run-toggle] input { appearance: none; position: relative; width: 32px; height: 18px; margin: 0; border: 0; border-radius: 9px; background: var(--boe-token-surface-surface-hover, #f4f4f4); cursor: pointer; transition: background var(--boe-profile-motion-interactive, 200ms) ease-out; }\n [part=run-toggle] input::after { content: ''; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%; background: var(--boe-token-surface-surface, #fff); box-shadow: 0 1px 2px rgb(0 0 0 / .25); transition: transform var(--boe-profile-motion-interactive, 200ms) ease-out; }\n [part=run-toggle] input:checked { background: var(--boe-token-surface-surface-brand, #0061d5); }\n [part=run-toggle] input:checked::after { transform: translateX(14px); }\n [part=run-toggle] input:focus-visible { outline: 2px solid var(--boe-token-surface-surface-brand, #0061d5); outline-offset: 2px; }\n [part=toolbar] [data-command=checks-status] { white-space: nowrap; color: var(--boe-token-text-text-secondary, #6f6f6f); }\n [part=toolbar] [data-command=checks-status][data-state=bad] { color: color-mix(in srgb, var(--boe-token-text-status-text-error, #b92340) 85%, var(--boe-token-text-text, #141413)); }\n [part=toolbar] [data-command=checks-status] svg { flex: none; }\n [part=toolbar] [data-command=checks-status][data-state=ready] svg { color: var(--boe-token-text-status-text-success, #187657); }\n [part=view-menu] { display: none; position: relative; }\n [part=view-menu] summary { list-style: none; height: 32px; display: flex; align-items: center; padding: 0 14px; border: 1px solid var(--boe-token-stroke-stroke, #e8e8e8); border-radius: 20px; font-size: 13px; font-weight: 600; letter-spacing: .01em; cursor: pointer; white-space: nowrap; }\n [part=view-menu][open] { z-index: 20; }\n [part=view-menu-options] { position: absolute; z-index: 20; top: calc(100% + 4px); right: 0; width: 200px; max-width: calc(100vw - 24px); padding: 6px; border: 1px solid var(--boe-token-stroke-stroke, #e8e8e8); border-radius: 10px; background: var(--boe-token-surface-surface, #fff); box-shadow: var(--boe-shadow-overlay, 0 4px 12px rgb(0 0 0 / .16)); }\n [part=view-menu] button { display: flex; justify-content: space-between; gap: 16px; width: 100%; min-height: 32px; padding: 0 10px; text-align: start; background: transparent; }\n [part=view-menu] small { color: var(--boe-token-text-text-secondary, #6f6f6f); }\n [part=view-menu] [role=separator] { border-top: 1px solid var(--boe-token-stroke-stroke, #e8e8e8); margin: 4px 2px; }\n [part=toolbar-document] { display: flex; align-items: baseline; gap: 10px; min-width: 0; flex: 1 1 auto; visibility: hidden; }\n [part=toolbar-title] { font-size: 15px; font-weight: 650; margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }\n [part=toolbar-document] span { font-size: 12px; white-space: nowrap; }\n [part=toolbar-actions] { display: flex; align-items: center; gap: 8px; }\n [part=toolbar] button:not([role]) { height: 32px; min-height: 32px; padding: 0 14px; border-radius: 20px; font-size: 13px; font-weight: 600; letter-spacing: .01em; white-space: nowrap; }\n [part=toolbar] [part=view-switch] { padding: 2px; gap: 0; background: var(--boe-token-surface-surface-secondary, #fbfbfb); }\n [part=toolbar] [part=view-switch] button { height: 26px; min-height: 26px; padding: 0 12px; border: 0; border-radius: 16px; font-size: 12.5px; letter-spacing: normal; }\n [part=toolbar] [part=view-switch] button[aria-pressed=true] { box-shadow: 0 0 0 1px var(--boe-token-stroke-stroke, #e8e8e8); }\n [part=toolbar] button[data-command=checks-status] { display: inline-flex; align-items: center; gap: 6px; height: auto; min-height: 0; line-height: 1.45; padding: 4px 6px; border: 0; border-radius: 8px; font-weight: 400; letter-spacing: normal; }\n [part=toolbar] [data-command=palette], [part=toolbar] [data-command=undo], [part=toolbar] [data-command=redo] { width: 32px; padding: 0; place-items: center; }\n [part=toolbar] [data-command=palette], [part=toolbar] [data-command=details] { border-color: var(--boe-token-stroke-stroke, #e8e8e8); background: var(--boe-token-surface-surface, #fff); }\n :host([data-compact-toolbar]) [part=view-switch], :host([data-compact-toolbar]) [part=run-toggle] { display: none; }\n :host([data-compact-toolbar]) [part=view-menu] { display: block; }\n [part=layout] {\n display: grid;\n grid-template-columns: 248px minmax(0, 1fr) 320px;\n gap: 0;\n min-height: 0;\n height: var(--boe-process-height, 660px);\n overflow: hidden;\n }\n [part=pane-drawer] { display: contents; color: inherit; }\n [part=canvas-stack] { display: grid; grid-template-rows: auto minmax(0, 1fr); min-width: 0; min-height: 0; }\n /* The hidden hold leaves row 1 empty. Keep the canvas in the flexible row\n explicitly; auto-placement otherwise puts its absolute world in a 0px row. */\n [part=canvas-stack] > [part=hold] { grid-row: 1; }\n [part=canvas-stack] > [part=canvas] { grid-row: 2; }\n [part=insert-chooser]::backdrop { background: rgb(0 0 0 / .45); }\n [part=pane-scrim] { position: absolute; inset: 0; z-index: 30; background: rgb(0 0 0 / .45); }\n [part=pane-title], [part=pane-close], [data-command=palette], [data-command=details] { display: none; }\n [part=palette], [part=inspector] {\n min-width: 0;\n overflow: auto;\n padding: 12px;\n border: 0;\n border-radius: 0;\n background: var(--boe-token-surface-surface, #fff);\n }\n [part=palette] { display: flex; flex-direction: column; gap: 12px; border-right: 1px solid var(--boe-token-stroke-stroke, #e8e8e8); }\n [part=palette-heading] { margin: 0 4px; font-size: 14px; font-weight: 650; line-height: 20px; }\n [part=skip-link] { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }\n [part=skip-link]:focus-visible { position: static; width: auto; height: auto; clip-path: none; }\n [part=inspector] { border-left: 1px solid var(--boe-token-stroke-stroke, #e8e8e8); padding: 16px 0; }\n [part=palette] label { font-size: 0; position: relative; }\n [part=search-icon] { position: absolute; left: 12px; top: 9px; width: 18px; height: 18px; color: var(--boe-token-text-text-secondary, #6f6f6f); pointer-events: none; }\n [part=palette] input {\n width: 100%; min-width: 0;\n height: 36px;\n padding: 0 12px 0 36px;\n border: 1px solid transparent;\n border-radius: 24px;\n background: var(--boe-token-surface-surface-hover, #f4f4f4);\n font-size: 13px;\n }\n [part=palette] input:focus-visible { border-color: var(--boe-token-surface-surface-brand, #0061d5); background: var(--boe-token-surface-surface, #fff); }\n [part=choices] { display: grid; align-content: start; gap: 4px; max-height: none; overflow: visible; }\n [part=group] { margin: 4px 4px 6px; font-size: 12px; line-height: 1.45; font-weight: 650; color: var(--boe-token-text-text-secondary, #6f6f6f); }\n [part=choice] {\n display: grid; grid-template-columns: 20px minmax(0,1fr); gap: 0 10px;\n min-height: 44px; padding: 8px 10px; border: 1px solid transparent; border-radius: 10px;\n text-align: start; background: transparent; cursor: grab; touch-action: none;\n }\n [part=choice]:hover { border-color: var(--boe-token-stroke-stroke, #e8e8e8); background: var(--boe-token-surface-surface-hover, #f4f4f4); }\n [part=choice-icon] { grid-row: span 2; width: 20px; height: 20px; color: var(--boe-token-text-text-secondary, #6f6f6f); }\n [part=choice][data-tone=accent] [part=choice-icon] { color: var(--boe-token-surface-surface-brand, #0061d5); }\n [part=choice-icon] svg { width: 20px; height: 20px; }\n [part=choice-name] { font-size: 13px; font-weight: 600; line-height: 1.45; }\n [part=choice-description] { grid-column: 2; color: var(--boe-token-text-text-secondary, #6f6f6f); font-size: 12px; line-height: 1.35; }\n [part=palette-hint] { margin: 4px; color: var(--boe-token-text-text-secondary, #6f6f6f); font-size: 12px; line-height: 1.45; }\n [part=canvas] {\n position: relative; min-width: 0; height: 100%; overflow: hidden;\n border: 0; border-radius: 0;\n background-color: var(--boe-token-surface-surface-secondary, #fbfbfb);\n background-image: radial-gradient(circle, color-mix(in srgb, var(--boe-token-text-text-secondary, #6f6f6f) 26%, transparent) 1px, transparent 1.2px);\n background-size: 12px 12px;\n touch-action: none; user-select: none; cursor: grab;\n }\n [part=canvas][data-panning] { cursor: grabbing; }\n [part=hold] { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 10px 16px; border-bottom: 1px solid color-mix(in srgb, var(--boe-token-text-status-text-warning, #9a6b00) 45%, var(--boe-token-stroke-stroke, #e8e8e8)); background: color-mix(in srgb, var(--boe-token-surface-status-surface-inprogress, #ffc447) 14%, var(--boe-token-surface-surface, #fff)); color: var(--boe-token-text-status-text-warning, #6b4a00); font-size: 13px; }\n [part=hold-text] { flex: 1 1 280px; min-width: 0; }\n [part=hold] button { min-height: 28px; padding: 3px 8px; border: 1px solid currentColor; border-radius: 6px; background: transparent; font-size: 12px; font-weight: 650; white-space: nowrap; }\n [part=world] { position: absolute; inset: 0; transform-origin: 0 0; }\n [part=lines] { position: absolute; inset: 0; width: 1px; height: 1px; overflow: visible; pointer-events: none; z-index: 3; }\n [part=line] { stroke: var(--boe-token-text-text-secondary, #6f6f6f); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; fill: none; }\n [part=line][data-selected=true] { stroke: var(--boe-token-surface-surface-brand, #0061d5); stroke-width: 2; }\n [part=line][data-drop=true] { stroke: var(--boe-token-surface-surface-brand, #0061d5); stroke-width: 2.5; stroke-dasharray: 6 4; }\n [part=line-hit] { fill: none; stroke: transparent; stroke-width: 24; pointer-events: stroke; }\n [part=connection-preview] { fill: none; stroke: var(--boe-token-surface-surface-brand, #0061d5); stroke-width: 2.5; stroke-dasharray: 6 4; }\n [part=pinned-end] { fill: var(--boe-token-surface-surface-brand, #0061d5); pointer-events: none; }\n [part=box], [part=frame] {\n position: absolute; touch-action: none; text-align: start; z-index: 4; display: grid; grid-template-columns: 20px minmax(0,1fr); align-content: center;\n gap: 2px 10px; min-width: 0; min-height: 64px; padding: 11px 12px;\n border: 1px solid var(--boe-process-box-edge, var(--boe-control-edge, #858585));\n border-radius: 8px; background: var(--boe-token-surface-surface, #fff);\n font-size: 13px; line-height: 1.3;\n transition: border-color var(--boe-profile-motion-interactive, 200ms) ease-out,\n background var(--boe-profile-motion-interactive, 200ms) ease-out;\n }\n [part=box][data-shape=task] { align-content: normal; font-size: 14px; line-height: 1.45; }\n [part=box][data-shape=task] > [part=icon] { grid-row: span 4; margin-top: 1px; }\n [part=box]:hover, [part=frame]:hover { border-color: var(--boe-token-text-text-secondary, #6f6f6f); }\n [data-connect-target=true][data-connect-invalid=true] { border-color: var(--boe-token-text-status-text-error, #b92340) !important; }\n [part=connection-preview][data-invalid=true] { stroke: var(--boe-token-text-status-text-error, #b92340); }\n [data-connect-target=true] { border-color: var(--boe-token-surface-surface-brand, #0061d5) !important; }\n [part=box] strong, [part=frame] strong { overflow-wrap: anywhere; }\n [part=box] strong, [part=frame] strong { font-size: 13.5px; font-weight: 650; line-height: 1.3; }\n [part=box] small, [part=frame] small { grid-column: 2; color: var(--boe-token-text-text-secondary, #6f6f6f); font-size: 12.5px; line-height: 1.35; }\n [part=technical-description] { font: 12px/1.4 ui-monospace, 'SF Mono', Menlo, Consolas, monospace !important; overflow-wrap: anywhere; }\n [part=metrics] { grid-column: 2; display: flex; gap: 6px; flex-wrap: wrap; margin-top: 3px; font-size: 12px; line-height: 1.45; font-variant-numeric: tabular-nums; }\n [part=metrics][data-state=unmeasured] { color: var(--boe-token-text-text-secondary, #6f6f6f); }\n [part=metric-separator] { color: var(--boe-token-text-text-tertiary, #767676); }\n [part=technical-summary] { overflow-wrap: anywhere; }\n [part=technical-inline-code] { font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace; }\n [part=metric-warning] { color: var(--boe-token-text-status-text-warning, #8a5800); }\n [part=icon] { grid-row: span 3; width: 20px; height: 20px; color: var(--boe-token-text-text-secondary, #6f6f6f); }\n [part=icon] svg { display: block; width: 20px; height: 20px; }\n [data-tone=accent] > [part=icon] { color: var(--boe-token-surface-surface-brand, #0061d5); }\n [part=box][aria-current=true], [part=frame][aria-current=true] {\n border: 1px solid var(--boe-token-surface-surface-brand, #0061d5);\n background: color-mix(in srgb, var(--boe-token-surface-surface-brand, #0061d5) 7%, var(--boe-token-surface-surface, #fff));\n }\n [data-invalid=true] { border-color: var(--boe-token-text-status-text-error, #b92340) !important; }\n [part=problem] { grid-column: 1 / -1; color: var(--boe-token-text-status-text-error, #b92340); font-size: 12px; }\n [part=frame] { z-index: 1; align-content: start; border-radius: 12px; background: color-mix(in srgb, var(--boe-token-surface-surface, #fff) 78%, transparent); }\n [part=frame] small { grid-column: 2; }\n [part=loop-mark] { position: absolute; right: 12px; bottom: 8px; font-size: 20px; line-height: 1; color: var(--boe-token-text-text-secondary, #6f6f6f); }\n [part=frame][data-palette-drop=true] { border-color: var(--boe-token-surface-surface-brand, #0061d5); box-shadow: 0 0 0 2px color-mix(in srgb, var(--boe-token-surface-surface-brand, #0061d5) 18%, transparent); }\n [part=frame-resize] { position: absolute; right: -12px; bottom: -12px; z-index: 8; width: 28px; height: 28px; min-height: 28px; padding: 0; border: 0; border-radius: 8px; background: var(--boe-token-surface-surface, #fff); box-shadow: 0 0 0 1px var(--boe-process-box-edge, #858585); cursor: nwse-resize; }\n [part=frame-resize]::before { content: ''; position: absolute; right: 7px; bottom: 7px; width: 11px; height: 11px; border-right: 2px solid var(--boe-token-text-text-secondary, #6f6f6f); border-bottom: 2px solid var(--boe-token-text-text-secondary, #6f6f6f); }\n [part=frame]:not([aria-current=true]) [part=frame-resize] { visibility: hidden; }\n [data-shape=gateway], [data-shape=event] { width: 56px !important; height: 56px !important; min-height: 0; padding: 0; border: 0 !important; background: transparent !important; display: block; overflow: visible; }\n [data-shape=gateway]::before { content: ''; position: absolute; left: 8px; top: 8px; width: 40px; height: 40px; rotate: 45deg; border: 1.5px solid var(--boe-process-box-edge, var(--boe-control-edge, #858585)); border-radius: 8px; background: var(--boe-token-surface-surface, #fff); }\n [data-shape=event]::before { content: ''; position: absolute; left: 8px; top: 8px; width: 40px; height: 40px; border: 1.5px solid var(--boe-process-box-edge, var(--boe-control-edge, #858585)); border-radius: 50%; background: var(--boe-token-surface-surface, #fff); }\n [data-shape=event][data-kind=finish]::before { border-width: 4px; }\n [data-shape=event][data-kind=scheduled-start]::after { content: ''; position: absolute; left: 13px; top: 13px; width: 30px; height: 30px; border: 1px solid currentColor; border-radius: 50%; }\n [data-shape=gateway] > [part=icon], [data-shape=event] > [part=icon] { position: absolute; left: 18px; top: 18px; z-index: 1; }\n [data-shape=gateway] > strong, [data-shape=event] > strong { position: absolute; top: 58px; left: 50%; width: 150px; translate: -50% 0; text-align: center; font-size: 12px; }\n [data-shape=gateway] > small { display: none; }\n [part=caption] { position: absolute; left: 50%; translate: -50% 0; width: max-content; max-width: 168px; padding: 1px 4px; border-radius: 4px; text-align: center; background: color-mix(in srgb, var(--boe-token-surface-surface-hover, #f4f4f4) 88%, transparent); }\n [part=caption][data-side=below] { top: 60px; }\n [part=caption][data-side=above] { bottom: 60px; }\n [part=caption] strong { font-size: 12.5px; font-weight: 600; line-height: 1.3; }\n [part=caption] small { display: block; font-weight: 400; }\n [part=caption] [part=technical-description] { font: 10.5px ui-monospace, 'SF Mono', Menlo, Consolas, monospace !important; white-space: nowrap; }\n [data-shape=event] > small { position: absolute; top: 75px; left: 50%; width: 172px; translate: -50% 0; text-align: center; font-size: 11px; line-height: 1.25; }\n [part=event-details] { position: absolute; top: 75px; left: 50%; width: 172px; translate: -50% 0; text-align: center; }\n [part=event-details] small { display: block; font-size: 11px; line-height: 1.25; }\n [data-shape=gateway][aria-current=true]::before, [data-shape=event][aria-current=true]::before { border-color: var(--boe-token-surface-surface-brand, #0061d5); background: color-mix(in srgb, var(--boe-token-surface-surface-brand, #0061d5) 7%, var(--boe-token-surface-surface, #fff)); }\n [part=port] { position: absolute; z-index: 5; width: 24px; height: 24px; min-height: 24px; padding: 0; border: 0; border-radius: 50%; background: transparent; opacity: 0; }\n [part=port][data-side=north] { left: calc(50% - 12px); top: -12px; }\n [part=port][data-side=south] { left: calc(50% - 12px); bottom: -12px; }\n [part=port][data-side=east] { right: -12px; top: calc(50% - 12px); }\n [part=port][data-side=west] { left: -12px; top: calc(50% - 12px); }\n [part=port]::before { content: ''; display: block; width: 10px; height: 10px; margin: 7px; border: 1.5px solid var(--boe-token-surface-surface-brand, #0061d5); border-radius: 50%; background: var(--boe-token-surface-surface, #fff); }\n [part=port]:hover::before, [part=port]:focus-visible::before { width: 22px; height: 22px; margin: 1px; background: var(--boe-token-surface-surface-brand, #0061d5); }\n [part=port]::after { position: absolute; inset: 1px; display: none; place-items: center; color: #fff; font-size: 15px; font-weight: 700; line-height: 1; }\n [part=port][data-side=north]::after { content: '\u2191'; }\n [part=port][data-side=east]::after { content: '\u2192'; }\n [part=port][data-side=south]::after { content: '\u2193'; }\n [part=port][data-side=west]::after { content: '\u2190'; }\n [part=port]:hover::after, [part=port]:focus-visible::after, [part=port][data-hot=true]::after { display: grid; }\n [part=port][data-hot=true] { opacity: 1; }\n [part=port][data-hot=true]::before { width: 22px; height: 22px; margin: 1px; background: var(--boe-token-surface-surface-brand, #0061d5); }\n [part=end-grip] { position: absolute; z-index: 8; width: 24px; height: 24px; min-height: 24px; padding: 0; border: 0; border-radius: 50%; background: transparent; }\n [part=end-grip]::before { content: ''; display: block; width: 10px; height: 10px; margin: 7px; border: 1.5px solid var(--boe-token-surface-surface-brand, #0061d5); border-radius: 50%; background: var(--boe-token-surface-surface, #fff); }\n [part=box]:hover [part=port], [part=box]:focus-within [part=port], [part=box][aria-current=true] [part=port], [part=frame]:hover [part=port] { opacity: 1; }\n [part=connection] { position: absolute; z-index: 5; display: flex; align-items: center; gap: 4px; transform: translate(-50%,-50%); min-width: 0; min-height: 0; padding: 2px 6px; border-radius: 6px; background: var(--boe-token-surface-surface-secondary, #fbfbfb); font-size: 12px; font-weight: 600; white-space: nowrap; }\n /* Unlabelled lines still need a reachable midpoint for pointer insert/selection. */\n [part=connection]:has(> span:empty):not(:has(> small)) { padding: 0; background: transparent; min-width: var(--boe-process-hit-target, calc(24px * var(--boe-process-inverse-zoom, 1))); min-height: var(--boe-process-hit-target, calc(24px * var(--boe-process-inverse-zoom, 1))); }\n [part=connection] > small { margin-left: 4px; color: var(--boe-token-text-text-secondary, #6f6f6f); font-size: 11px; font-weight: 400; font-variant-numeric: tabular-nums; }\n [part=connection-actions] { position: absolute; top: 100%; left: 50%; transform: translateX(-50%); display: flex; gap: 4px; width: max-content; padding: 4px; border: 1px solid var(--boe-token-stroke-stroke, #e8e8e8); border-radius: 8px; background: var(--boe-token-surface-surface, #fff); box-shadow: var(--boe-shadow-overlay, 0 4px 12px rgb(0 0 0 / .16)); opacity: 0; pointer-events: none; }\n [part=connection]:hover [part=connection-actions], [part=connection]:focus-within [part=connection-actions] { opacity: 1; pointer-events: auto; }\n [part=connection-actions] button { min-width: max(24px, var(--boe-process-hit-target, calc(24px * var(--boe-process-inverse-zoom, 1)))); min-height: max(32px, var(--boe-process-hit-target, calc(24px * var(--boe-process-inverse-zoom, 1)))); padding: 4px; font-size: 12px; }\n [part=note] { width: 208px; border: 1px dashed var(--boe-process-box-edge, var(--boe-control-edge, #858585)); border-radius: 8px; }\n [part=section] { z-index: 0; border: 1px solid var(--boe-process-box-edge, var(--boe-control-edge, #858585)); border-radius: 16px; background: color-mix(in srgb, var(--boe-token-surface-surface, #fff) 45%, transparent); }\n [part=section] strong { display: block; font-size: 12.5px; font-weight: 650; line-height: 1.3; }\n [part=section] small { display: block; color: var(--boe-token-text-text-secondary, #6f6f6f); font-size: 11.5px; line-height: 1.35; }\n [part=note] { pointer-events: auto !important; }\n [part=note][data-selected=true] { outline: 2px solid var(--boe-process-line-selected, var(--boe-brand-fill, #1976d2)); }\n [part=note]:focus-visible { outline: 2px solid var(--boe-focus-ring, #1976d2); outline-offset: 3px; }\n [part=note], [part=section] { position: absolute; padding: 8px; pointer-events: none; }\n [part=marquee] { position: absolute; border: 2px solid var(--boe-token-surface-surface-brand, #0061d5); background: color-mix(in srgb, var(--boe-token-surface-surface-brand, #0061d5) 12%, transparent); pointer-events: none; }\n [part=connect-tooltip] { position: absolute; z-index: 20; max-width: 240px; padding: 5px 8px; border-radius: 7px; background: var(--boe-token-text-text, #141413); color: var(--boe-token-surface-surface, #fff); font-size: 12px; pointer-events: none; box-shadow: var(--boe-shadow-overlay, 0 4px 12px rgb(0 0 0 / .16)); }\n [part=connect-tooltip][data-invalid=true] { background: var(--boe-token-text-status-text-error, #b92340); color: #fff; }\n [part=ghost-box], [part=palette-ghost] { position: absolute; z-index: 5; display: flex; align-items: center; padding: 11px 12px; border: 1.5px dashed var(--boe-token-surface-surface-brand, #0061d5); border-radius: 8px; background: color-mix(in srgb, var(--boe-token-surface-surface-brand, #0061d5) 10%, var(--boe-token-surface-surface, #fff)); font-size: 13px; font-weight: 650; pointer-events: none; }\n [part=palette-ghost][data-pointer] { position: fixed; z-index: 100; padding: 8px 12px; border: 1px solid var(--boe-token-surface-surface-brand, #0061d5); border-radius: 10px; background: var(--boe-token-surface-surface, #fff); box-shadow: var(--boe-token-elevation-overlay, 0 8px 24px #0002); font-size: 13px; font-weight: 600; line-height: 1.45; gap: 8px; translate: -50% -50%; }\n [part=palette-ghost][data-pointer] svg { width: 20px; height: 20px; }\n [part=guide] { position: absolute; background: var(--boe-token-surface-surface-brand, #0061d5); pointer-events: none; }\n [part=measure] { position: absolute; padding: 4px; background: var(--boe-token-surface-surface, #fff); font-size: 12px; pointer-events: none; }\n [part=insert-chooser] { max-width: calc(100vw - 32px); max-height: 65vh; overflow: auto; padding: 12px; border: 1px solid var(--boe-token-stroke-stroke, #e8e8e8); border-radius: 12px; background: var(--boe-token-surface-surface, #fff); }\n [part=keyboard-chooser] { position: fixed; inset: auto; width: min(320px, calc(100vw - 24px)); max-height: min(420px, calc(100dvh - 24px)); margin: 0; overflow: auto; padding: 12px; border: 1px solid var(--boe-token-stroke-stroke, #e8e8e8); border-radius: 12px; background: var(--boe-token-surface-surface, #fff); color: var(--boe-token-text-text, #141413); box-shadow: var(--boe-shadow-overlay, 0 4px 12px rgb(0 0 0 / .16)); }\n [part=chooser-title] { margin: 0 0 10px; font-size: 12px; font-weight: 650; line-height: 1.4; color: var(--boe-token-text-text-secondary, #6f6f6f); }\n [part=controls] { position: absolute; left: 16px; bottom: 16px; z-index: 10; display: flex; align-items: center; gap: 2px; padding: 4px; border: 1px solid var(--boe-token-stroke-stroke, #e8e8e8); border-radius: 12px; background: var(--boe-token-surface-surface, #fff); box-shadow: var(--boe-shadow-overlay, 0 4px 12px rgb(0 0 0 / .16)); }\n [part=controls] button:not([data-command=reset]) { width: 32px; padding: 0; }\n [part=controls-divider] { width: 1px; height: 20px; margin: 0 4px; background: var(--boe-token-stroke-stroke, #e8e8e8); }\n [part=controls] [data-command=reset] { min-width: 56px; padding: 0 6px; font-variant-numeric: tabular-nums; }\n [part=minimap] { position: absolute; right: 16px; bottom: 16px; width: 208px; height: 136px; touch-action: none; background: var(--boe-token-surface-surface, #fff); border: 1px solid var(--boe-token-stroke-stroke, #e8e8e8); border-radius: 12px; box-shadow: var(--boe-shadow-overlay, 0 4px 12px rgb(0 0 0 / .16)); }\n [part=minimap] rect:not([data-viewport]) { fill: color-mix(in srgb, var(--boe-token-text-text-secondary, #6f6f6f) 35%, transparent); }\n [part=minimap] rect[data-selected=true] { fill: var(--boe-token-surface-surface-brand, #0061d5); }\n [part=minimap] rect[data-section] { fill: color-mix(in srgb, var(--boe-token-text-text-secondary, #6f6f6f) 8%, transparent); }\n [part=minimap] [data-viewport] { fill: color-mix(in srgb, var(--boe-token-surface-surface-brand, #0061d5) 8%, transparent); stroke: var(--boe-token-surface-surface-brand, #0061d5); stroke-width: 1.5; vector-effect: non-scaling-stroke; }\n [part=selection-toolbar] { position: absolute; bottom: auto; z-index: 11; display: flex; flex-wrap: nowrap; gap: 2px; padding: 4px; border: 1px solid var(--boe-token-stroke-stroke, #e8e8e8); border-radius: 12px; background: var(--boe-token-surface-surface, #fff); box-shadow: var(--boe-shadow-overlay, 0 4px 12px rgb(0 0 0 / .16)); white-space: nowrap; }\n [part=selection-toolbar] button { display: inline-flex; align-items: center; gap: 4px; }\n [part=selection-plus] { font-size: 18px; line-height: 12px; font-weight: 500; }\n [part=checks] { display: grid; gap: 6px; margin: 0; padding: 0; }\n [part=checks] button { width: 100%; display: grid; grid-template-columns: 16px 1fr; align-items: start; gap: 8px; padding: 8px 10px; border: 1px solid var(--boe-token-stroke-stroke, #e8e8e8); border-radius: 10px; text-align: start; background: var(--boe-token-surface-surface, #fff); color: var(--boe-token-text-text, #222); line-height: 1.45; }\n [part=check-icon] { flex: 0 0 16px; width: 16px; height: 16px; margin-top: 1px; color: var(--boe-token-text-status-text-error, #b92340); }\n [part=checks] strong { display: block; font-size: 13px; font-weight: 600; line-height: 1.45; }\n [part=checks] small { color: var(--boe-token-text-text-secondary, #6f6f6f); font-size: 12.5px; }\n [part=check-icon][data-tone=success] { color: var(--boe-token-text-status-text-success, #138a58); }\n [part=problem] { display: flex; align-items: center; gap: 4px; }\n [part=problem] [part=check-icon] { flex-basis: 12px; width: 12px; height: 12px; margin: 0; }\n [part=checks-ready] { display: flex; align-items: center; gap: 8px; margin: 0; color: var(--boe-token-text-text, #222); font-size: 13px; line-height: 1.45; }\n [part=process-heading] { display: grid; gap: 2px; padding: 0 16px 12px; }\n [part=process-title] { font-size: 15px; line-height: 1.4; }\n [part=process-summary] { color: var(--boe-token-text-text-secondary, #6f6f6f); font-size: 12.5px; }\n [part=pane-tabs] { display: flex; flex-wrap: nowrap; gap: 4px; margin: 0; padding: 0 16px; border-bottom: 1px solid var(--boe-token-stroke-stroke, #e8e8e8); overflow-x: auto; }\n [part=pane-tabs] button { flex: none; min-height: 40px; border: 0; border-bottom: 2px solid transparent; border-radius: 0; background: transparent; color: var(--boe-token-text-text-secondary, #6f6f6f); font-size: 13px; font-weight: 600; }\n [part=pane-tabs] button[aria-selected=true] { color: var(--boe-token-text-text, #141413); border-bottom-color: currentColor; }\n [part=editor], [part=pane-content] { padding: 8px 16px; }\n [part=editor] { display: grid; align-content: start; gap: 12px; }\n [part=inspector-kind] { display: none; }\n [part=inspector-purpose] { margin: 0; color: var(--boe-token-text-text-secondary, #6f6f6f); font-size: 12.5px; }\n [part=field] { display: grid; gap: 4px; }\n [part=field] label { display: grid; gap: 5px; font-size: 12.5px; font-weight: 650; }\n [part=field] :is(input:not([type=checkbox]),textarea,select) { width: 100%; min-height: 36px; padding: 7px 10px; border: 1px solid var(--boe-token-stroke-stroke, #e8e8e8); border-radius: 8px; background: var(--boe-token-surface-surface, #fff); color: var(--boe-token-text-text, #141413); font-family: inherit; font-size: 13px; line-height: 1.4; }\n [part=field] textarea { min-height: 76px; resize: vertical; }\n [part=field] :is(input,textarea)[part=expression-control] { border-color: var(--boe-token-surface-surface-quaternary, #d3d3d3); padding: 7px 12px; border-radius: 12px; box-shadow: inset 0 2px 4px rgb(0 0 0 / .06); font: 12.5px/1.5 ui-monospace, \"SF Mono\", Menlo, Consolas, monospace; }\n [part=field] textarea[part=expression-control] { min-height: 72px; }\n [part=field]:has([part=expression-control]), [part=field] label:has([part=expression-control]) { gap: 6px; }\n [part=field] label:has([part=expression-control]) { font-weight: 600; line-height: 1.45; }\n [part=field]:has([part=expression-control]) small { line-height: 1.45; }\n [part=expression-help] { margin-top: 8px; font-size: 12.5px; line-height: 1.45; color: var(--boe-token-text-text-secondary, #6f6f6f); }\n [part=expression-help] summary { cursor: pointer; font-weight: 600; }\n [part=expression-help] ul { padding-left: 18px; margin: 6px 0 0; display: grid; gap: 4px; }\n [part=expression-help] li { margin: 0; }\n [part=field-feedback][data-tone=success] { color: var(--boe-token-text-status-text-success, #247b3e); }\n [part=field]:has([part=action-options]) { position: relative; }\n [part=field]:has([part=action-options]) input { padding-right: 34px; }\n [part=action-caret] { position: absolute; z-index: 1; top: 25px; right: 2px; width: 32px; min-height: 32px; padding: 0; border: 0; background: transparent; font-size: 18px; }\n [part=action-options] { position: absolute; z-index: 30; top: calc(100% - 1px); left: 0; right: 0; max-height: 280px; overflow: auto; padding: 6px; border: 1px solid var(--boe-token-stroke-stroke, #e8e8e8); border-radius: 10px; background: var(--boe-token-surface-surface, #fff); box-shadow: var(--boe-shadow-overlay, 0 4px 12px rgb(0 0 0 / .16)); }\n [part=action-options][hidden] { display: none; }\n [part=action-options] button { display: block; width: 100%; min-height: 36px; padding: 7px 9px; border: 0; border-radius: 7px; text-align: start; background: transparent; font-size: 12.5px; }\n [part=action-options] button:hover, [part=action-options] [aria-selected=true] { background: var(--boe-token-surface-surface-hover, #f4f4f4); }\n [part=action-options] button strong { display: block; font-size: 13px; font-weight: 650; }\n [part=action-options] button small { display: block; color: var(--boe-token-text-text-secondary, #6f6f6f); }\n [part=action-options] [part=action-back] { color: var(--boe-token-text-text-secondary, #6f6f6f); }\n [part=field] input[type=checkbox] { justify-self: start; width: 18px; height: 18px; accent-color: var(--boe-token-surface-surface-brand, #0061d5); }\n [part=field] small { color: var(--boe-token-text-text-secondary, #6f6f6f); font-size: 12px; line-height: 1.4; }\n [part=field] [part=field-problem] { color: var(--boe-token-text-status-text-error, #b92340); }\n [part=editor], [part=pane-content], [part=editor] > *, [part=pane-content] > * { min-width: 0; }\n [part=process-title], [part=process-summary] { min-width: 0; overflow-wrap: anywhere; }\n :is([part=local-variable-summary],[part=saved-result-summary]) :is(ul,li) { min-width: 0; max-width: 100%; }\n [part=pane-content][data-pane=Variables] { display: grid; align-content: start; gap: 14px; }\n [part=variables-intro], [part=variable-list] > p { margin: 0; font-size: 12.5px; line-height: 1.5; color: var(--boe-token-text-text-secondary,#6f6f6f); }\n [part=variable-scopes] { display: grid; grid-template-columns: auto 1fr; gap: 4px 10px; margin: 0; font-size: 12.5px; line-height: 1.45; }\n [part=variable-scopes] dt { font-weight: 650; }\n [part=variable-scopes] dd { margin: 0; color: var(--boe-token-text-text-secondary, #6f6f6f); }\n :is([part=local-variable-summary],[part=saved-result-summary],[part=local-variables]) { font-size: 12.5px; line-height: 1.45; }\n :is([part=local-variable-summary],[part=saved-result-summary],[part=local-variables]) h3 { margin: 0 0 6px; font-size: 12.5px; line-height: 1.45; font-weight: 650; }\n :is([part=local-variable-summary],[part=saved-result-summary],[part=local-variables]) p { margin: 0; line-height: 1.5; color: var(--boe-token-text-text-secondary,#6f6f6f); }\n :is([part=local-variable-summary],[part=saved-result-summary]) ul { list-style: none; display: grid; gap: 4px; margin: 0; padding: 0; }\n :is([part=local-variable-summary],[part=saved-result-summary]) li { display: flex; align-items: center; gap: 8px; padding: 4px 4px 4px 10px; border: 1px solid var(--boe-token-stroke-stroke,#e8e8e8); border-radius: 10px; background: var(--boe-token-surface-surface-secondary,#fbfbfb); font-size: 13px; line-height: 1.45; }\n :is([part=local-variable-summary],[part=saved-result-summary]) li > span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }\n :is([part=local-variable-summary],[part=saved-result-summary]) code { font-family: monospace; font-size: 13px; }\n :is([part=local-variable-summary],[part=saved-result-summary]) em { font-style: normal; color: var(--boe-token-text-text-secondary,#6f6f6f); }\n [part=local-variable-list], [part=variable-list] { display: grid; gap: 10px; }\n [part=local-variable-row] { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr) 32px; gap: 6px; align-items: center; }\n [part=local-variable-row] [part=field-problem] { grid-column: 1 / -1; color: var(--boe-token-text-status-text-error, #b92340); font-size: 12px; }\n [part=local-variables] label { display: block; min-width: 0; }\n [part=local-variables] input { width: 100%; min-width: 0; min-height: 32px; padding: 5px 10px; border: 1px solid var(--boe-token-surface-surface-quaternary,#d3d3d3); border-radius: 10px; background: var(--boe-token-surface-surface,#fff); color: var(--boe-token-text-text,#141413); font: 12.5px/1.45 var(--boe-token-font-family-base,Inter,sans-serif); }\n [part=local-variables] input:focus-visible { outline-offset: 1px; }\n [part=local-variable-actions], [part=variable-actions] { display: flex; gap: 8px; flex-wrap: wrap; padding-top: 4px; }\n [part=variable-icon] { flex: 0 0 16px; width: 16px; height: 16px; color: var(--boe-token-text-text-secondary,#6f6f6f); }\n [part=variable-chips] { display: flex; flex-wrap: wrap; gap: 6px; }\n [part=variable-chips] button { min-height: 24px; padding: 3px 8px; border: 1px solid var(--boe-token-stroke-stroke, #e8e8e8); border-radius: 12px; background: var(--boe-token-surface-surface-secondary, #fbfbfb); font: 12px ui-monospace, \"SF Mono\", Menlo, Consolas, monospace; }\n [part=leads-to] { display: grid; gap: 6px; padding-top: 10px; border-top: 1px solid var(--boe-token-stroke-stroke, #e8e8e8); }\n [part=leads-to] h3 { margin: 0; font-size: 12.5px; }\n [part=lead-row] { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 12.5px; }\n [part=lead-row] button, [part=leads-to] > button, [part=inspector-actions] button { min-height: 28px; padding: 4px 8px; font-size: 12px; }\n [part=inspector-metrics] { margin: 0; font-size: 12.5px; line-height: 1.5; font-variant-numeric: tabular-nums; }\n [part=inspector-metrics] h3 { margin: 0 0 6px; font-size: 12.5px; }\n [part=inspector-metrics] p { margin: 0; color: var(--boe-token-text-text-secondary, #6f6f6f); }\n [part=inspector-metrics] table { width: 100%; border-collapse: collapse; font-size: 13px; line-height: 1.45; }\n [part=inspector-metrics] :is(th,td) { padding: 5px 0; border-bottom: 1px solid var(--boe-token-stroke-stroke, #e8e8e8); font-weight: 400; }\n [part=inspector-metrics] th { text-align: start; font-variant-numeric: normal; }\n [part=inspector-metrics] td { text-align: right; font-variant-numeric: tabular-nums; }\n [part=inspector-actions] { display: flex; gap: 8px; padding-top: 10px; border-top: 1px solid var(--boe-token-stroke-stroke, #e8e8e8); }\n [part=arrange-actions] { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 6px; }\n [part=arrange-actions] button { min-height: 32px; padding: 5px 7px; font-size: 12px; text-align: start; }\n [part=outline-intro] { margin: 4px 0 14px; color: var(--boe-token-text-text-secondary, #6f6f6f); font-size: 12.5px; line-height: 1.5; }\n [part=copy-outline] { justify-self: start; min-height: 32px; margin-top: 4px; padding: 0 14px; border-radius: 20px; font-size: 13px; font-weight: 600; letter-spacing: .01em; }\n [part=outline-list] { margin: 0; padding-left: 22px; font-size: 13.5px; line-height: 1.5; }\n [part=outline-list] [part=outline-list] { margin-top: 2px; }\n [part=outline-list] li { margin: 3px 0; padding-left: 2px; }\n [part=outline-list] li::marker { color: var(--boe-token-text-text-secondary, #6f6f6f); font-variant-numeric: tabular-nums; font-size: 12.5px; }\n [part=outline-list] button, [part=outline-list] strong { border: 0; border-radius: 4px; background: transparent; padding: 0; min-height: 24px; display: inline-block; font-size: 13.5px; font-weight: 600; line-height: 24px; text-align: start; }\n [part=outline-list] button:hover { color: var(--boe-token-surface-surface-brand, #0061d5); text-decoration: underline; text-underline-offset: 2px; }\n [part=outline-list] button[aria-current=true] { color: var(--boe-token-surface-surface-brand, #0061d5); }\n [part=outline-list] p { margin: 0; color: var(--boe-token-text-text-secondary, #6f6f6f); font-size: 12.5px; line-height: 1.5; }\n [part=inspector-heading] { margin: 0 0 2px; font-size: 15px; font-weight: 650; }\n [part=inspector-heading][data-single=true]:not(:focus-visible) { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }\n [part=variable-row], [part=connection-row] { display: grid; gap: 4px; padding: 10px 0; border-bottom: 1px solid var(--boe-token-stroke-stroke, #e8e8e8); font-size: 12.5px; }\n :host([data-variables-editable]) [part=variable-row] { grid-template-columns: minmax(0,1fr) minmax(0,1fr) 32px; gap: 6px; align-items: center; }\n :host([data-variables-editable]) [part=variable-row] label:has([data-variable-key=name]) { grid-column: 1; grid-row: 1; }\n :host([data-variables-editable]) [part=variable-row] label:has([data-variable-key=value]) { grid-column: 2; grid-row: 1; }\n :host([data-variables-editable]) [part=variable-row] label:has([data-variable-key=scope]) { grid-column: 2; grid-row: 2; }\n :host([data-variables-editable]) [part=variable-remove] { grid-column: 3; grid-row: 1; }\n :host([data-variables-editable]) [part=variable-row] :is(input,select) { width: 100%; min-width: 0; min-height: 32px; border-radius: 10px; font-size: 12.5px; }\n :host([data-variables-editable]) [part=variable-row] p { grid-column: 1 / -1; }\n :host([data-variables-editable]) [part=variable-row] [part=field-problem] { color: var(--boe-token-text-status-text-error, #b92340); }\n [part=variable-remove], [part=variable-add] { min-height: 32px; align-self: end; border: 1px solid var(--boe-token-stroke-stroke, #e8e8e8); border-radius: 8px; background: var(--boe-token-surface-surface, #fff); color: inherit; cursor: pointer; }\n [part=variable-row] p { margin: 0; color: var(--boe-token-text-text-secondary, #6f6f6f); }\n [part=variable-scope] { color: var(--boe-token-text-text-secondary, #6f6f6f); font-size: 11.5px; }\n [part=variable-row] label { display: grid; gap: 4px; font-weight: 650; }\n [part=variable-row] :is(input,select) { min-height: 36px; padding: 7px 10px; border: 1px solid var(--boe-token-stroke-stroke, #e8e8e8); border-radius: 8px; background: var(--boe-token-surface-surface, #fff); }\n :host([data-variables-editable]) [part=variable-row] { padding: 0; border: 0; }\n :host([data-variables-editable]) [part=variable-row] label { display: block; min-width: 0; }\n :host([data-variables-editable]) [part=variable-row] label:has([data-variable-key=description]) { grid-column: 1; grid-row: 2; }\n :host([data-variables-editable]) [part=variable-row] :is(input,select) { min-height: 32px; padding: 5px 10px; border: 1px solid var(--boe-token-surface-surface-quaternary,#d3d3d3); font: 12.5px/1.45 var(--boe-token-font-family-base,Inter,sans-serif); }\n :host([data-variables-editable]) [part=variable-row] select { padding: 4px 8px; }\n :host([data-variables-editable]) [part=variable-row] input:focus-visible { outline-offset: 1px; }\n [part=local-variables] button, [part=variable-add], [part=variable-remove] { display: inline-flex; align-items: center; gap: 6px; height: 32px; min-height: 32px; padding: 0 14px; border: 1px solid var(--boe-token-stroke-stroke,#e8e8e8); border-radius: 20px; background: var(--boe-token-surface-surface,#fff); font: 600 13px/1.45 var(--boe-token-font-family-base,Inter,sans-serif); letter-spacing: .01em; white-space: nowrap; }\n [part=local-variables] [data-local-key=remove], [part=variable-remove] { width: 32px; padding: 0; justify-content: center; border-color: transparent; background: transparent; align-self: center; }\n [part=local-variables] button:hover, [part=variable-add]:hover, [part=variable-remove]:hover { background: var(--boe-token-surface-surface-hover,#f4f4f4); }\n [part=local-variables] button:disabled, [part=variable-add]:disabled, [part=variable-remove]:disabled { opacity: .45; }\n [part=help] { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }\n :host([data-narrow]) [part=layout] { grid-template-columns: minmax(0,1fr); }\n :host([data-narrow]) [part=layout] { overflow: visible; }\n :host([data-narrow]) [part=pane-drawer] { display: none; position: absolute; z-index: 40; margin: 0; max-width: none; max-height: none; padding: 0; overflow: auto; border: 0; border-radius: 0; background: var(--boe-token-surface-surface, #fff); box-shadow: var(--boe-shadow-overlay, 0 4px 12px rgb(0 0 0 / .24)); }\n :host([data-narrow]) [part=pane-drawer][open] { display: block; }\n :host([data-narrow]) [part=pane-title] { display: block; position: absolute; top: 18px; left: 16px; margin: 0; font-size: 14px; font-weight: 650; line-height: 20px; }\n :host([data-narrow]) [part=pane-close], :host([data-narrow]) [data-command=palette], :host([data-narrow]) [data-command=details] { display: inline-block; }\n :host([data-narrow]) [part=pane-close] { position: absolute; top: 12px; right: 12px; z-index: 1; width: 28px; height: 28px; padding: 0; border-radius: 50%; font-size: 16px; font-weight: 600; line-height: 1; }\n :host([data-narrow]) [part=pane-drawer][data-pane=palette] { left: 0; top: 0; bottom: auto; width: min(320px, 86%); height: 100%; max-height: 100%; }\n :host([data-narrow]) [part=pane-drawer][data-pane=inspector] { left: 0; right: 0; top: auto; bottom: 0; width: 100%; height: min(62%, 560px); border-radius: 24px 24px 0 0; }\n :host([data-narrow]) [part=pane-drawer][data-pane=inspector]::before { content: ''; display: block; width: 36px; height: 4px; margin: 6px auto; border-radius: 2px; background: var(--boe-token-text-text-secondary, #767676); opacity: .55; }\n :host([data-narrow]) [part=palette], :host([data-narrow]) [part=inspector] { height: 100%; }\n :host([data-narrow]) [part=inspector] { border-left: 0; }\n :host([data-narrow]) [part=palette] { padding-top: 54px; }\n :host([data-narrow]) [part=palette-heading] { display: none; }\n :host([data-narrow]) [part=minimap] { display: none; }\n :host([data-narrow]) [part=toolbar] { justify-content: flex-start; gap: 8px; padding: 8px 12px; flex-wrap: wrap; }\n :host([data-narrow]) [part=view-switch], :host([data-narrow]) [part=run-toggle] { display: none; }\n :host([data-narrow]) [data-command=checks-status] { display: none; }\n :host([data-narrow]) [part=view-menu] { display: block; }\n :host([data-hide-tidy]) [part=toolbar-title] { font-size: 14px; }\n :host([data-hide-tidy]) [part=toolbar-document] span { display: none; }\n :host([data-hide-tidy]) [part=controls] { left: 12px; bottom: 12px; }\n :host([data-narrow]) [part=selection-toolbar] [part=selection-plus] + span { display: none; }\n :host([data-hide-tidy]) [part=toolbar-actions] [data-command=tidy] { display: none; }\n :host([data-narrow]) [part=toolbar-actions] [data-command=undo], :host([data-narrow]) [part=toolbar-actions] [data-command=redo] { display: none; }\n @media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition-duration: 0s !important; animation-duration: 0s !important; scroll-behavior: auto !important; } }\n";
2
+ export declare const processModelerDesign = "\n :host([hidden]), [hidden] { display: none !important; }\n *, *::before, *::after { box-sizing: border-box; }\n button, input, textarea, select { font: inherit; color: inherit; }\n button { min-height: 36px; padding: 8px; border: 1px solid var(--boe-token-stroke-stroke, #e8e8e8); border-radius: 8px; background: var(--boe-token-surface-surface, #fff); cursor: pointer; }\n button:disabled { opacity: .5; cursor: default; }\n :is(button,input,textarea,select,[part=canvas],[part=minimap],[part=box],[part=frame]):focus-visible { outline: 2px solid var(--boe-token-surface-surface-brand, #0061d5); outline-offset: 2px; }\n :host {\n display: block;\n position: relative;\n isolation: isolate;\n min-width: 0;\n --boe-process-box-edge: color-mix(in srgb, var(--boe-token-text-text, #141413) 55%, var(--boe-token-surface-surface, #fff));\n color: var(--boe-token-text-text, #141413);\n background: var(--boe-token-surface-surface, #fff);\n font: 14px/1.5 var(--boe-token-font-family-base, Inter, sans-serif);\n }\n [part=sr-only], [part=status], [part=urgent-status] { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }\n [part=toolbar] {\n min-height: 56px;\n margin: 0;\n padding: 10px 16px;\n display: flex;\n align-items: center;\n justify-content: flex-end;\n gap: 12px;\n flex-wrap: nowrap;\n border-bottom: 1px solid var(--boe-token-stroke-stroke, #e8e8e8);\n background: var(--boe-token-surface-surface, #fff);\n }\n [part=toolbar] button, [part=controls] button, [part=selection-toolbar] button {\n min-height: 30px;\n padding: 4px 10px;\n border: 1px solid transparent;\n border-radius: 8px;\n background: transparent;\n font-size: 13px;\n font-weight: 600;\n }\n [part=toolbar] svg, [part=controls] svg { width: 16px; height: 16px; display: block; }\n [part=toolbar] [data-command=undo], [part=toolbar] [data-command=redo], [part=controls] button:not([data-command=reset]) { width: 30px; height: 30px; padding: 6px; display: grid; place-items: center; }\n [part=controls] [data-command=snap][aria-pressed=true], [part=controls] [data-command=lock][aria-pressed=true] { background: color-mix(in srgb, var(--boe-token-surface-surface-brand, #0061d5) 10%, var(--boe-token-surface-surface, #fff)); color: var(--boe-token-surface-surface-brand, #0061d5); }\n [part=toolbar] button:hover, [part=controls] button:hover, [part=selection-toolbar] button:hover {\n background: var(--boe-token-surface-surface-hover, #f4f4f4);\n }\n [part=toolbar] [data-command=tidy] { border-color: var(--boe-token-stroke-stroke, #e8e8e8); border-radius: 18px; }\n [part=view-switch] { display: flex; gap: 2px; padding: 3px; border: 1px solid var(--boe-token-stroke-stroke, #e8e8e8); border-radius: 20px; }\n [part=view-switch] button { border-radius: 16px; }\n [part=view-switch] button[aria-pressed=true] { border-color: var(--boe-token-stroke-stroke, #e8e8e8); background: var(--boe-token-surface-surface, #fff); }\n [part=run-toggle] { display: flex; align-items: center; gap: 8px; white-space: nowrap; font-size: 13px; font-weight: 600; cursor: pointer; }\n [part=run-toggle] input { appearance: none; position: relative; width: 32px; height: 18px; margin: 0; border: 0; border-radius: 9px; background: var(--boe-token-surface-surface-hover, #f4f4f4); cursor: pointer; transition: background var(--boe-profile-motion-interactive, 200ms) ease-out; }\n [part=run-toggle] input::after { content: ''; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%; background: var(--boe-token-surface-surface, #fff); box-shadow: 0 1px 2px rgb(0 0 0 / .25); transition: transform var(--boe-profile-motion-interactive, 200ms) ease-out; }\n [part=run-toggle] input:checked { background: var(--boe-token-surface-surface-brand, #0061d5); }\n [part=run-toggle] input:checked::after { transform: translateX(14px); }\n [part=run-toggle] input:focus-visible { outline: 2px solid var(--boe-token-surface-surface-brand, #0061d5); outline-offset: 2px; }\n [part=toolbar] [data-command=checks-status] { white-space: nowrap; color: var(--boe-token-text-text-secondary, #6f6f6f); }\n [part=toolbar] [data-command=checks-status][data-state=bad] { color: color-mix(in srgb, var(--boe-token-text-status-text-error, #b92340) 85%, var(--boe-token-text-text, #141413)); }\n [part=toolbar] [data-command=checks-status] svg { flex: none; }\n [part=toolbar] [data-command=checks-status][data-state=ready] svg { color: var(--boe-token-text-status-text-success, #187657); }\n [part=view-menu] { display: none; position: relative; }\n [part=view-menu] summary { list-style: none; height: 32px; display: flex; align-items: center; padding: 0 14px; border: 1px solid var(--boe-token-stroke-stroke, #e8e8e8); border-radius: 20px; font-size: 13px; font-weight: 600; letter-spacing: .01em; cursor: pointer; white-space: nowrap; }\n [part=view-menu][open] { z-index: 20; }\n [part=view-menu-options] { position: absolute; z-index: 20; top: calc(100% + 4px); right: 0; width: 200px; max-width: calc(100vw - 24px); padding: 6px; border: 1px solid var(--boe-token-stroke-stroke, #e8e8e8); border-radius: 12px; background: var(--boe-token-surface-surface, #fff); box-shadow: var(--boe-process-menu-shadow, 0 8px 32px light-dark(rgb(0 0 0 / .14), rgb(0 0 0 / .5))); }\n [part=view-menu] button { display: flex; justify-content: space-between; gap: 16px; width: 100%; min-height: 32px; padding: 0 10px; text-align: start; background: transparent; }\n [part=view-menu] small { color: var(--boe-token-text-text-secondary, #6f6f6f); }\n [part=view-menu] [role=separator] { border-top: 1px solid var(--boe-token-stroke-stroke, #e8e8e8); margin: 4px 2px; }\n [part=toolbar-document] { display: flex; align-items: baseline; gap: 10px; min-width: 0; flex: 1 1 auto; visibility: hidden; }\n [part=toolbar-title] { font-size: 15px; font-weight: 650; margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }\n [part=toolbar-document] span { font-size: 12px; white-space: nowrap; }\n [part=toolbar-actions] { display: flex; align-items: center; gap: 8px; }\n [part=toolbar] button:not([role]) { height: 32px; min-height: 32px; padding: 0 14px; border-radius: 20px; font-size: 13px; font-weight: 600; letter-spacing: .01em; white-space: nowrap; }\n [part=toolbar] [part=view-switch] { padding: 2px; gap: 0; background: var(--boe-token-surface-surface-secondary, #fbfbfb); }\n [part=toolbar] [part=view-switch] button { height: 26px; min-height: 26px; padding: 0 12px; border: 0; border-radius: 16px; font-size: 12.5px; letter-spacing: normal; }\n [part=toolbar] [part=view-switch] button[aria-pressed=true] { box-shadow: 0 0 0 1px var(--boe-token-stroke-stroke, #e8e8e8); }\n [part=toolbar] button[data-command=checks-status] { display: inline-flex; align-items: center; gap: 6px; height: auto; min-height: 0; line-height: 1.45; padding: 4px 6px; border: 0; border-radius: 8px; font-weight: 400; letter-spacing: normal; }\n [part=toolbar] [data-command=palette], [part=toolbar] [data-command=undo], [part=toolbar] [data-command=redo] { width: 32px; padding: 0; place-items: center; }\n [part=toolbar] [data-command=palette], [part=toolbar] [data-command=details] { border-color: var(--boe-token-stroke-stroke, #e8e8e8); background: var(--boe-token-surface-surface, #fff); }\n :host([data-compact-toolbar]) [part=view-switch], :host([data-compact-toolbar]) [part=run-toggle] { display: none; }\n :host([data-compact-toolbar]) [part=view-menu] { display: block; }\n [part=layout] {\n display: grid;\n grid-template-columns: 248px minmax(0, 1fr) 320px;\n gap: 0;\n min-height: 0;\n height: var(--boe-process-height, 660px);\n overflow: hidden;\n }\n [part=pane-drawer] { display: contents; color: inherit; }\n [part=canvas-stack] { display: grid; grid-template-rows: auto minmax(0, 1fr); min-width: 0; min-height: 0; }\n /* The hidden hold leaves row 1 empty. Keep the canvas in the flexible row\n explicitly; auto-placement otherwise puts its absolute world in a 0px row. */\n [part=canvas-stack] > [part=hold] { grid-row: 1; }\n [part=canvas-stack] > [part=canvas] { grid-row: 2; }\n [part=insert-chooser]::backdrop { background: rgb(0 0 0 / .45); }\n [part=pane-scrim] { position: absolute; inset: 0; z-index: 30; background: rgb(0 0 0 / .45); }\n [part=pane-title], [part=pane-close], [data-command=palette], [data-command=details] { display: none; }\n [part=palette], [part=inspector] {\n min-width: 0;\n overflow: auto;\n padding: 12px;\n border: 0;\n border-radius: 0;\n background: var(--boe-token-surface-surface, #fff);\n }\n [part=palette] { display: flex; flex-direction: column; gap: 12px; border-right: 1px solid var(--boe-token-stroke-stroke, #e8e8e8); }\n [part=palette-heading] { margin: 0 4px; font-size: 14px; font-weight: 650; line-height: 20px; }\n [part=skip-link] { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }\n [part=skip-link]:focus-visible { position: static; width: auto; height: auto; clip-path: none; }\n [part=inspector] { border-left: 1px solid var(--boe-token-stroke-stroke, #e8e8e8); padding: 16px 0; }\n [part=palette] label { font-size: 0; position: relative; }\n [part=search-icon] { position: absolute; left: 12px; top: 9px; width: 18px; height: 18px; color: var(--boe-token-text-text-secondary, #6f6f6f); pointer-events: none; }\n [part=palette] input {\n width: 100%; min-width: 0;\n height: 36px;\n padding: 0 12px 0 36px;\n border: 1px solid transparent;\n border-radius: 24px;\n background: var(--boe-token-surface-surface-hover, #f4f4f4);\n font-size: 13px;\n }\n [part=palette] input:focus-visible { border-color: var(--boe-token-surface-surface-brand, #0061d5); background: var(--boe-token-surface-surface, #fff); }\n [part=choices] { display: grid; align-content: start; gap: 4px; max-height: none; overflow: visible; }\n [part=group] { margin: 4px 4px 6px; font-size: 12px; line-height: 1.45; font-weight: 650; color: var(--boe-token-text-text-secondary, #6f6f6f); }\n [part=choice] {\n display: grid; grid-template-columns: 20px minmax(0,1fr); gap: 0 10px;\n min-height: 44px; padding: 8px 10px; border: 1px solid transparent; border-radius: 10px;\n text-align: start; background: transparent; cursor: grab; touch-action: none;\n }\n [part=choice]:hover { border-color: var(--boe-token-stroke-stroke, #e8e8e8); background: var(--boe-token-surface-surface-hover, #f4f4f4); }\n [part=choice-icon] { grid-row: span 2; width: 20px; height: 20px; color: var(--boe-token-text-text-secondary, #6f6f6f); }\n [part=choice][data-tone=accent] [part=choice-icon] { color: var(--boe-token-surface-surface-brand, #0061d5); }\n [part=choice-icon] svg { width: 20px; height: 20px; }\n [part=choice-name] { font-size: 13px; font-weight: 600; line-height: 1.45; }\n [part=choice-description] { grid-column: 2; color: var(--boe-token-text-text-secondary, #6f6f6f); font-size: 12px; line-height: 1.35; }\n [part=palette-hint] { margin: 4px; color: var(--boe-token-text-text-secondary, #6f6f6f); font-size: 12px; line-height: 1.45; }\n [part=canvas] {\n position: relative; min-width: 0; height: 100%; overflow: hidden;\n border: 0; border-radius: 0;\n background-color: var(--boe-token-surface-surface-secondary, #fbfbfb);\n background-image: radial-gradient(circle, color-mix(in srgb, var(--boe-token-text-text-secondary, #6f6f6f) 26%, transparent) 1px, transparent 1.2px);\n background-size: 12px 12px;\n touch-action: none; user-select: none; cursor: grab;\n }\n [part=canvas][data-panning] { cursor: grabbing; }\n [part=hold] { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 10px 16px; border-bottom: 1px solid color-mix(in srgb, var(--boe-token-text-status-text-warning, #9a6b00) 45%, var(--boe-token-stroke-stroke, #e8e8e8)); background: color-mix(in srgb, var(--boe-token-surface-status-surface-inprogress, #ffc447) 14%, var(--boe-token-surface-surface, #fff)); color: var(--boe-token-text-status-text-warning, #6b4a00); font-size: 13px; }\n [part=hold-text] { flex: 1 1 280px; min-width: 0; }\n [part=hold] button { min-height: 28px; padding: 3px 8px; border: 1px solid currentColor; border-radius: 6px; background: transparent; font-size: 12px; font-weight: 650; white-space: nowrap; }\n [part=world] { position: absolute; inset: 0; transform-origin: 0 0; }\n [part=lines] { position: absolute; inset: 0; width: 1px; height: 1px; overflow: visible; pointer-events: none; z-index: 3; }\n [part=line] { stroke: var(--boe-token-text-text-secondary, #6f6f6f); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; fill: none; }\n [part=line][data-selected=true] { stroke: var(--boe-token-surface-surface-brand, #0061d5); stroke-width: 2; }\n [part=line][data-role=association] { stroke: var(--boe-token-stroke-stroke-hover, #bcbcbc); }\n [part=line][data-drop=true] { stroke: var(--boe-token-surface-surface-brand, #0061d5); stroke-width: 2.5; stroke-dasharray: 6 4; }\n [part=line-hit] { fill: none; stroke: transparent; stroke-width: 24; pointer-events: stroke; }\n [part=connection-preview] { fill: none; stroke: var(--boe-token-surface-surface-brand, #0061d5); stroke-width: 2.5; stroke-dasharray: 6 4; }\n [part=pinned-end] { fill: var(--boe-token-surface-surface-brand, #0061d5); pointer-events: none; }\n [part=box], [part=frame] {\n position: absolute; touch-action: none; text-align: start; z-index: 4; display: grid; grid-template-columns: 20px minmax(0,1fr); align-content: center;\n gap: 2px 10px; min-width: 0; min-height: 64px; padding: 11px 12px;\n border: 1px solid var(--boe-process-box-edge, var(--boe-control-edge, #858585));\n border-radius: 8px; background: var(--boe-token-surface-surface, #fff);\n font-size: 13px; line-height: 1.3;\n transition: border-color var(--boe-profile-motion-interactive, 200ms) ease-out,\n background var(--boe-profile-motion-interactive, 200ms) ease-out;\n }\n [part=box][data-shape=task] { align-content: normal; font-size: 14px; line-height: 1.45; }\n [part=box][data-shape=task] > [part=icon] { grid-row: span 4; margin-top: 1px; }\n [part=box]:hover, [part=frame]:hover { border-color: var(--boe-token-text-text-secondary, #6f6f6f); }\n [data-connect-target=true][data-connect-invalid=true] { border-color: var(--boe-token-text-status-text-error, #b92340) !important; }\n [part=connection-preview][data-invalid=true] { stroke: var(--boe-token-text-status-text-error, #b92340); }\n [data-connect-target=true] { border-color: var(--boe-token-surface-surface-brand, #0061d5) !important; }\n [part=box] strong, [part=frame] strong { overflow-wrap: anywhere; }\n [part=box] strong, [part=frame] strong { font-size: 13.5px; font-weight: 650; line-height: 1.3; }\n [part=box] small, [part=frame] small { grid-column: 2; color: var(--boe-token-text-text-secondary, #6f6f6f); font-size: 12.5px; line-height: 1.35; }\n [part=technical-description] { font: 12px/1.4 ui-monospace, 'SF Mono', Menlo, Consolas, monospace !important; overflow-wrap: anywhere; }\n [part=metrics] { grid-column: 2; display: flex; gap: 6px; flex-wrap: wrap; margin-top: 3px; font-size: 12px; line-height: 1.45; font-variant-numeric: tabular-nums; }\n [part=metrics][data-state=unmeasured] { color: var(--boe-token-text-text-secondary, #6f6f6f); }\n [part=metric-separator] { color: var(--boe-token-text-text-tertiary, #767676); }\n [part=technical-summary] { overflow-wrap: anywhere; }\n [part=technical-inline-code] { font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace; }\n [part=metric-warning] { color: var(--boe-token-text-status-text-warning, #8a5800); }\n [part=icon] { grid-row: span 3; width: 20px; height: 20px; color: var(--boe-token-text-text-secondary, #6f6f6f); }\n [part=icon] svg { display: block; width: 20px; height: 20px; }\n [data-tone=accent] > [part=icon] { color: var(--boe-token-surface-surface-brand, #0061d5); }\n [part=box][aria-current=true], [part=frame][aria-current=true] {\n border: 1px solid var(--boe-token-surface-surface-brand, #0061d5);\n background: color-mix(in srgb, var(--boe-token-surface-surface-brand, #0061d5) 7%, var(--boe-token-surface-surface, #fff));\n }\n [data-invalid=true] { border-color: var(--boe-token-text-status-text-error, #b92340) !important; }\n [part=problem] { grid-column: 1 / -1; color: var(--boe-token-text-status-text-error, #b92340); font-size: 12px; }\n [part=frame] { z-index: 1; align-content: start; border-radius: 12px; background: color-mix(in srgb, var(--boe-token-surface-surface, #fff) 78%, transparent); }\n [part=frame] small { grid-column: 2; }\n [part=loop-mark] { position: absolute; right: 12px; bottom: 8px; font-size: 20px; line-height: 1; color: var(--boe-token-text-text-secondary, #6f6f6f); }\n [part=frame][data-palette-drop=true] { border-color: var(--boe-token-surface-surface-brand, #0061d5); box-shadow: 0 0 0 2px color-mix(in srgb, var(--boe-token-surface-surface-brand, #0061d5) 18%, transparent); }\n [part=frame-resize] { position: absolute; right: -12px; bottom: -12px; z-index: 8; width: 28px; height: 28px; min-height: 28px; padding: 0; border: 0; border-radius: 8px; background: var(--boe-token-surface-surface, #fff); box-shadow: 0 0 0 1px var(--boe-process-box-edge, #858585); cursor: nwse-resize; }\n [part=frame-resize]::before { content: ''; position: absolute; right: 7px; bottom: 7px; width: 11px; height: 11px; border-right: 2px solid var(--boe-token-text-text-secondary, #6f6f6f); border-bottom: 2px solid var(--boe-token-text-text-secondary, #6f6f6f); }\n [part=frame]:not([aria-current=true]) [part=frame-resize] { visibility: hidden; }\n [data-shape=gateway], [data-shape=event] { width: 56px !important; height: 56px !important; min-height: 0; padding: 0; border: 0 !important; background: transparent !important; display: block; overflow: visible; }\n [data-shape=gateway]::before { content: ''; position: absolute; left: 8px; top: 8px; width: 40px; height: 40px; rotate: 45deg; border: 1.5px solid var(--boe-process-box-edge, var(--boe-control-edge, #858585)); border-radius: 8px; background: var(--boe-token-surface-surface, #fff); }\n [data-shape=event]::before { content: ''; position: absolute; left: 8px; top: 8px; width: 40px; height: 40px; border: 1.5px solid var(--boe-process-box-edge, var(--boe-control-edge, #858585)); border-radius: 50%; background: var(--boe-token-surface-surface, #fff); }\n [data-shape=event][data-kind=finish]::before { border-width: 4px; }\n [data-shape=event][data-kind=scheduled-start]::after { content: ''; position: absolute; left: 13px; top: 13px; width: 30px; height: 30px; border: 1px solid currentColor; border-radius: 50%; }\n [data-shape=gateway] > [part=icon], [data-shape=event] > [part=icon] { position: absolute; left: 18px; top: 18px; z-index: 1; }\n [data-shape=gateway] > strong, [data-shape=event] > strong { position: absolute; top: 58px; left: 50%; width: 150px; translate: -50% 0; text-align: center; font-size: 12px; }\n [data-shape=gateway] > small { display: none; }\n [part=caption] { position: absolute; left: 50%; translate: -50% 0; width: max-content; max-width: 168px; padding: 1px 4px; border-radius: 4px; text-align: center; background: color-mix(in srgb, var(--boe-token-surface-surface-hover, #f4f4f4) 88%, transparent); }\n [part=caption][data-side=below] { top: 60px; }\n [part=caption][data-side=above] { bottom: 60px; }\n [part=caption] strong { font-size: 12.5px; font-weight: 600; line-height: 1.3; }\n [part=caption] small { display: block; font-weight: 400; }\n [part=caption] [part=technical-description] { font: 10.5px ui-monospace, 'SF Mono', Menlo, Consolas, monospace !important; white-space: nowrap; }\n [data-shape=event] > small { position: absolute; top: 75px; left: 50%; width: 172px; translate: -50% 0; text-align: center; font-size: 11px; line-height: 1.25; }\n [part=event-details] { position: absolute; top: 75px; left: 50%; width: 172px; translate: -50% 0; text-align: center; }\n [part=event-details] small { display: block; font-size: 11px; line-height: 1.25; }\n [data-shape=gateway][aria-current=true]::before, [data-shape=event][aria-current=true]::before { border-color: var(--boe-token-surface-surface-brand, #0061d5); background: color-mix(in srgb, var(--boe-token-surface-surface-brand, #0061d5) 7%, var(--boe-token-surface-surface, #fff)); }\n [part=port] { position: absolute; z-index: 5; width: 24px; height: 24px; min-height: 24px; padding: 0; border: 0; border-radius: 50%; background: transparent; opacity: 0; }\n [part=port][data-side=north] { left: calc(50% - 12px); top: -12px; }\n [part=port][data-side=south] { left: calc(50% - 12px); bottom: -12px; }\n [part=port][data-side=east] { right: -12px; top: calc(50% - 12px); }\n [part=port][data-side=west] { left: -12px; top: calc(50% - 12px); }\n [part=port]::before { content: ''; display: block; width: 10px; height: 10px; margin: 7px; border: 1.5px solid var(--boe-token-surface-surface-brand, #0061d5); border-radius: 50%; background: var(--boe-token-surface-surface, #fff); }\n [part=port]:hover::before, [part=port]:focus-visible::before { width: 22px; height: 22px; margin: 1px; background: var(--boe-token-surface-surface-brand, #0061d5); }\n [part=port]::after { position: absolute; inset: 1px; display: none; place-items: center; color: #fff; font-size: 15px; font-weight: 700; line-height: 1; }\n [part=port][data-side=north]::after { content: '\u2191'; }\n [part=port][data-side=east]::after { content: '\u2192'; }\n [part=port][data-side=south]::after { content: '\u2193'; }\n [part=port][data-side=west]::after { content: '\u2190'; }\n [part=port]:hover::after, [part=port]:focus-visible::after, [part=port][data-hot=true]::after { display: grid; }\n [part=port][data-hot=true] { opacity: 1; }\n [part=port][data-hot=true]::before { width: 22px; height: 22px; margin: 1px; background: var(--boe-token-surface-surface-brand, #0061d5); }\n [part=end-grip] { position: absolute; z-index: 8; width: 24px; height: 24px; min-height: 24px; padding: 0; border: 0; border-radius: 50%; background: transparent; }\n [part=end-grip]::before { content: ''; display: block; width: 10px; height: 10px; margin: 7px; border: 1.5px solid var(--boe-token-surface-surface-brand, #0061d5); border-radius: 50%; background: var(--boe-token-surface-surface, #fff); }\n [part=box]:hover [part=port], [part=box]:focus-within [part=port], [part=box][aria-current=true] [part=port], [part=frame]:hover [part=port] { opacity: 1; }\n [part=connection] { position: absolute; z-index: 5; display: flex; align-items: center; gap: 4px; transform: translate(-50%,-50%); min-width: 0; min-height: 0; padding: 2px 6px; border-radius: 6px; background: var(--boe-token-surface-surface-secondary, #fbfbfb); font-size: 12px; font-weight: 600; white-space: nowrap; }\n /* Unlabelled lines still need a reachable midpoint for pointer insert/selection. */\n [part=connection]:has(> span:empty):not(:has(> small)) { padding: 0; background: transparent; min-width: var(--boe-process-hit-target, calc(24px * var(--boe-process-inverse-zoom, 1))); min-height: var(--boe-process-hit-target, calc(24px * var(--boe-process-inverse-zoom, 1))); }\n [part=connection] > small { margin-left: 4px; color: var(--boe-token-text-text-secondary, #6f6f6f); font-size: 11px; font-weight: 400; font-variant-numeric: tabular-nums; }\n [part=connection-actions] { position: absolute; top: 100%; left: 50%; transform: translateX(-50%); display: flex; gap: 4px; width: max-content; padding: 4px; border: 1px solid var(--boe-token-stroke-stroke, #e8e8e8); border-radius: 8px; background: var(--boe-token-surface-surface, #fff); box-shadow: var(--boe-shadow-overlay, 0 4px 12px rgb(0 0 0 / .16)); opacity: 0; pointer-events: none; }\n [part=connection]:hover [part=connection-actions], [part=connection]:focus-within [part=connection-actions] { opacity: 1; pointer-events: auto; }\n [part=connection-actions] button { min-width: max(24px, var(--boe-process-hit-target, calc(24px * var(--boe-process-inverse-zoom, 1)))); min-height: max(32px, var(--boe-process-hit-target, calc(24px * var(--boe-process-inverse-zoom, 1)))); padding: 4px; font-size: 12px; }\n [part=box][data-shape=note], [part=box][data-shape=note][aria-current=true] { display: block; width: 208px; min-height: 0; border: 0; padding: 0; background: transparent; }\n [part=note-body] { width: 100%; padding: 9px 12px; border: 1px dashed var(--boe-process-box-edge, var(--boe-control-edge, #858585)); border-radius: 8px; background: var(--boe-token-surface-surface, #fff); color: var(--boe-token-text-text-secondary, #6f6f6f); font-size: 12.5px; line-height: 1.45; white-space: pre-wrap; overflow-wrap: anywhere; }\n [data-shape=note][aria-current=true] [part=note-body] { border-color: var(--boe-token-surface-surface-brand, #0061d5); border-style: solid; }\n [part=connection][data-role=association] { padding: 0; background: transparent; border-color: transparent; }\n [part=note] { width: 208px; border: 1px dashed var(--boe-process-box-edge, var(--boe-control-edge, #858585)); border-radius: 8px; }\n [part=section] { z-index: 0; border: 1px solid var(--boe-process-box-edge, var(--boe-control-edge, #858585)); border-radius: 16px; background: color-mix(in srgb, var(--boe-token-surface-surface, #fff) 45%, transparent); }\n [part=section] strong { display: block; font-size: 12.5px; font-weight: 650; line-height: 1.3; }\n [part=section] small { display: block; color: var(--boe-token-text-text-secondary, #6f6f6f); font-size: 11.5px; line-height: 1.35; }\n [part=note] { pointer-events: auto !important; }\n [part=note][data-selected=true] { outline: 2px solid var(--boe-process-line-selected, var(--boe-brand-fill, #1976d2)); }\n [part=note]:focus-visible { outline: 2px solid var(--boe-focus-ring, #1976d2); outline-offset: 3px; }\n [part=note], [part=section] { position: absolute; padding: 8px; pointer-events: none; }\n [part=marquee] { position: absolute; border: 2px solid var(--boe-token-surface-surface-brand, #0061d5); background: color-mix(in srgb, var(--boe-token-surface-surface-brand, #0061d5) 12%, transparent); pointer-events: none; }\n [part=connect-tooltip] { position: absolute; z-index: 20; max-width: 240px; padding: 5px 8px; border-radius: 7px; background: var(--boe-token-text-text, #141413); color: var(--boe-token-surface-surface, #fff); font-size: 12px; pointer-events: none; box-shadow: var(--boe-shadow-overlay, 0 4px 12px rgb(0 0 0 / .16)); }\n [part=connect-tooltip][data-invalid=true] { background: var(--boe-token-text-status-text-error, #b92340); color: #fff; }\n [part=ghost-box], [part=palette-ghost] { position: absolute; z-index: 5; display: flex; align-items: center; padding: 11px 12px; border: 1.5px dashed var(--boe-token-surface-surface-brand, #0061d5); border-radius: 8px; background: color-mix(in srgb, var(--boe-token-surface-surface-brand, #0061d5) 10%, var(--boe-token-surface-surface, #fff)); font-size: 13px; font-weight: 650; pointer-events: none; }\n [part=palette-ghost][data-pointer] { position: fixed; z-index: 100; padding: 8px 12px; border: 1px solid var(--boe-token-surface-surface-brand, #0061d5); border-radius: 10px; background: var(--boe-token-surface-surface, #fff); box-shadow: var(--boe-token-elevation-overlay, 0 8px 24px #0002); font-size: 13px; font-weight: 600; line-height: 1.45; gap: 8px; translate: -50% -50%; }\n [part=palette-ghost][data-pointer] svg { width: 20px; height: 20px; }\n [part=guide] { position: absolute; background: var(--boe-token-surface-surface-brand, #0061d5); pointer-events: none; }\n [part=measure] { position: absolute; padding: 4px; background: var(--boe-token-surface-surface, #fff); font-size: 12px; pointer-events: none; }\n [part=insert-chooser] { max-width: calc(100vw - 32px); max-height: 65vh; overflow: auto; padding: 12px; border: 1px solid var(--boe-token-stroke-stroke, #e8e8e8); border-radius: 12px; background: var(--boe-token-surface-surface, #fff); }\n [part=keyboard-chooser] { position: fixed; inset: auto; width: min(320px, calc(100vw - 24px)); max-height: min(420px, calc(100dvh - 24px)); margin: 0; overflow: auto; padding: 12px; border: 1px solid var(--boe-token-stroke-stroke, #e8e8e8); border-radius: 12px; background: var(--boe-token-surface-surface, #fff); color: var(--boe-token-text-text, #141413); box-shadow: var(--boe-shadow-overlay, 0 4px 12px rgb(0 0 0 / .16)); }\n [part=chooser-title] { margin: 0 0 10px; font-size: 12px; font-weight: 650; line-height: 1.4; color: var(--boe-token-text-text-secondary, #6f6f6f); }\n [part=controls] { position: absolute; left: 16px; bottom: 16px; z-index: 10; display: flex; align-items: center; gap: 2px; padding: 4px; border: 1px solid var(--boe-token-stroke-stroke, #e8e8e8); border-radius: 12px; background: var(--boe-token-surface-surface, #fff); box-shadow: var(--boe-shadow-overlay, 0 4px 12px rgb(0 0 0 / .16)); }\n [part=controls] button:not([data-command=reset]) { width: 32px; padding: 0; }\n [part=controls-divider] { width: 1px; height: 20px; margin: 0 4px; background: var(--boe-token-stroke-stroke, #e8e8e8); }\n [part=controls] [data-command=reset] { min-width: 56px; padding: 0 6px; font-variant-numeric: tabular-nums; }\n [part=minimap] { position: absolute; right: 16px; bottom: 16px; width: 208px; height: 136px; touch-action: none; background: var(--boe-token-surface-surface, #fff); border: 1px solid var(--boe-token-stroke-stroke, #e8e8e8); border-radius: 12px; box-shadow: var(--boe-shadow-overlay, 0 4px 12px rgb(0 0 0 / .16)); }\n [part=minimap] rect:not([data-viewport]) { fill: color-mix(in srgb, var(--boe-token-text-text-secondary, #6f6f6f) 35%, transparent); }\n [part=minimap] rect[data-selected=true] { fill: var(--boe-token-surface-surface-brand, #0061d5); }\n [part=minimap] rect[data-section] { fill: color-mix(in srgb, var(--boe-token-text-text-secondary, #6f6f6f) 8%, transparent); }\n [part=minimap] [data-viewport] { fill: color-mix(in srgb, var(--boe-token-surface-surface-brand, #0061d5) 8%, transparent); stroke: var(--boe-token-surface-surface-brand, #0061d5); stroke-width: 1.5; vector-effect: non-scaling-stroke; }\n [part=selection-toolbar] { position: absolute; bottom: auto; z-index: 11; display: flex; flex-wrap: nowrap; gap: 2px; padding: 4px; border: 1px solid var(--boe-token-stroke-stroke, #e8e8e8); border-radius: 12px; background: var(--boe-token-surface-surface, #fff); box-shadow: var(--boe-shadow-overlay, 0 4px 12px 0 light-dark(rgb(0 0 0 / 10%), rgb(0 0 0 / 40%))); white-space: nowrap; translate: -50% -100%; }\n [part=selection-toolbar] button { display: inline-flex; align-items: center; gap: 6px; height: 30px; min-height: 30px; padding: 0 10px; border-radius: 20px; font-size: 13px; font-weight: 600; letter-spacing: .01em; line-height: 1.45; }\n [part=selection-plus] { width: 16px; height: 16px; flex: none; display: block; color: var(--boe-token-text-text-secondary, #6f6f6f); }\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=process-heading][data-selected] [part=process-title] { font-weight: 650; line-height: 1.45; text-wrap: balance; }\n [part=process-heading][data-selected] [part=process-summary] { font-size: 13px; line-height: 1.45; }\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-section] { min-width: 0; }\n [part=field-section] h3 { font-size: 12.5px; font-weight: 650; line-height: 1.45; margin: 0 0 6px; }\n [part=field-section-description] { margin: 0; font-size: 12.5px; line-height: 1.5; color: var(--boe-token-text-text-secondary, #6f6f6f); }\n [part=field-section-description] code { font-family: ui-monospace, \"SF Mono\", Menlo, Consolas, monospace; }\n [part=field-section] [part=field] { margin-top: 8px; }\n [part=field-section] input[data-field][part=expression-control] { line-height: 1.45; }\n [part=field-disclosure] { margin-top: 8px; font-size: 12.5px; line-height: 1.45; }\n [part=field-disclosure] summary { cursor: pointer; font-weight: 600; color: var(--boe-token-text-text-secondary, #6f6f6f); }\n [part=field-row] { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; min-width: 0; }\n [part=field] [part=field-optional] { font-style: normal; font-weight: 500; color: var(--boe-token-text-text-secondary, #6f6f6f); }\n [part=field] [part=field-annotation] { color: var(--boe-token-text-text-secondary, #6f6f6f); }\n [part=field] { display: grid; gap: 6px; }\n [part=field] label { display: grid; gap: 6px; font-size: 12.5px; font-weight: 600; line-height: 1.45; }\n [part=field] :is(input:not([type=checkbox]),textarea,select) { width: 100%; min-height: 36px; padding: 7px 12px; border: 1px solid var(--boe-token-surface-surface-quaternary, #d3d3d3); border-radius: 12px; box-shadow: inset 0 2px 4px rgb(0 0 0 / .06); background: var(--boe-token-surface-surface, #fff); color: var(--boe-token-text-text, #141413); font-family: inherit; font-size: 13px; font-weight: 400; line-height: 1.45; }\n [part=field] textarea[data-field] { min-height: 72px; resize: vertical; }\n [part=field] :is(input,textarea)[data-format=code] { font-family: ui-monospace, \"SF Mono\", Menlo, Consolas, monospace; font-size: 12.5px; }\n [part=field] textarea[data-field][data-format=code] { line-height: 1.5; }\n [part=field][data-boolean] label { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 400; }\n [part=field] :is(input,textarea)[part=expression-control] { border-color: var(--boe-token-surface-surface-quaternary, #d3d3d3); padding: 7px 12px; border-radius: 12px; box-shadow: inset 0 2px 4px rgb(0 0 0 / .06); font: 12.5px/1.5 ui-monospace, \"SF Mono\", Menlo, Consolas, monospace; }\n [part=field] textarea[part=expression-control] { min-height: 72px; }\n [part=field]:has([part=expression-control]), [part=field] label:has([part=expression-control]) { gap: 6px; }\n [part=field] label:has([part=expression-control]) { font-weight: 600; line-height: 1.45; }\n [part=field]:has([part=expression-control]) small { line-height: 1.45; }\n [part=expression-help] { margin-top: 8px; font-size: 12.5px; line-height: 1.45; color: var(--boe-token-text-text-secondary, #6f6f6f); }\n [part=expression-help] summary { cursor: pointer; font-weight: 600; }\n [part=expression-help] ul { padding-left: 18px; margin: 6px 0 0; display: grid; gap: 4px; }\n [part=expression-help] li { margin: 0; }\n [part=field-feedback][data-tone=success] { color: var(--boe-token-text-status-text-success, #247b3e); }\n [part=field]:has([part=action-options]) { position: relative; }\n [part=field]:has([part=action-options]) input { padding-right: 32px; }\n [part=action-input] { display: block; position: relative; line-height: 1.45; }\n [part=action-caret] { position: absolute; z-index: 1; top: 0; right: 0; width: 32px; height: 100%; min-height: 36px; padding: 0; border: 0; background: transparent; }\n [part=action-caret-icon] { position: absolute; right: 12px; top: 50%; width: 8px; height: 8px; border-right: 1.5px solid var(--boe-token-text-text-secondary, #6f6f6f); border-bottom: 1.5px solid var(--boe-token-text-text-secondary, #6f6f6f); translate: 0 -70%; rotate: 45deg; pointer-events: none; }\n [part=action-options] { position: fixed; z-index: 50; max-height: 420px; overflow: auto; padding: 6px; border: 1px solid var(--boe-token-stroke-stroke, #e8e8e8); border-radius: 12px; background: var(--boe-token-surface-surface, #fff); box-shadow: var(--boe-process-menu-shadow, 0 8px 32px light-dark(rgb(0 0 0 / .14), rgb(0 0 0 / .5))); }\n [part=action-options][hidden] { display: none; }\n [part=action-options] { overscroll-behavior: contain; animation: none; line-height: 1.45; }\n [part=action-options] button { display: flex; align-items: baseline; gap: 8px; width: 100%; min-height: 32px; padding: 7px 10px; border: 0; border-radius: 8px; text-align: start; background: transparent; font-size: 13px; line-height: 1.45; font-weight: 400; letter-spacing: normal; }\n [part=action-options] button:hover { background: var(--boe-token-surface-surface-hover, #f4f4f4); }\n [part=action-options] [aria-selected=true] { background: var(--boe-token-surface-item-surface-selected, #f2f7fd); }\n [part=action-options] button strong { flex: 1; min-width: 0; font-size: inherit; font-weight: 600; }\n [part=action-options] button small { color: var(--boe-token-text-text-secondary, #6f6f6f); font-size: 11.5px; font-variant-numeric: tabular-nums; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 55%; }\n [part=action-options] [part=action-option]:not([data-custom]) { flex-wrap: wrap; }\n [part=action-options] [part=action-option]:not([data-custom]) small { flex-basis: 100%; max-width: 100%; }\n [part=action-options] small[data-format=code] { font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace; }\n [part=action-chevron], [part=action-options] [part=action-back] { color: var(--boe-token-text-text-secondary, #6f6f6f); }\n [part=action-chevron] { font-weight: 600; }\n [part=action-options] [data-current] strong::after { content: ' \u2713'; color: var(--boe-token-surface-surface-brand, #0061d5); }\n [part=action-heading] { font-size: 12px; line-height: 1.45; color: var(--boe-token-text-text-secondary, #6f6f6f); font-weight: 650; margin: 8px 8px 2px; }\n [part=action-empty] { font-size: 13px; color: var(--boe-token-text-text-secondary, #6f6f6f); margin: 8px; }\n [part=field] input[type=checkbox] { flex: none; width: auto; height: auto; font-family: inherit; font-size: 13px; font-weight: 400; line-height: 1.45; 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.45; }\n [part=field] [part=field-problem] { color: var(--boe-token-text-status-text-error, #b92340); }\n [part=editor], [part=pane-content], [part=editor] > *, [part=pane-content] > * { min-width: 0; }\n [part=process-title], [part=process-summary] { min-width: 0; overflow-wrap: anywhere; }\n :is([part=local-variable-summary],[part=saved-result-summary]) :is(ul,li) { min-width: 0; max-width: 100%; }\n [part=pane-content][data-pane=Variables] { display: grid; align-content: start; gap: 14px; }\n [part=variables-intro], [part=variable-list] > p { margin: 0; font-size: 12.5px; line-height: 1.5; color: var(--boe-token-text-text-secondary,#6f6f6f); }\n [part=variable-scopes] { display: grid; grid-template-columns: auto 1fr; gap: 4px 10px; margin: 0; font-size: 12.5px; line-height: 1.45; }\n [part=variable-scopes] dt { font-weight: 650; }\n [part=variable-scopes] dd { margin: 0; color: var(--boe-token-text-text-secondary, #6f6f6f); }\n :is([part=local-variable-summary],[part=saved-result-summary],[part=local-variables]) { font-size: 12.5px; line-height: 1.45; }\n :is([part=local-variable-summary],[part=saved-result-summary],[part=local-variables]) h3 { margin: 0 0 6px; font-size: 12.5px; line-height: 1.45; font-weight: 650; }\n :is([part=local-variable-summary],[part=saved-result-summary],[part=local-variables]) p { margin: 0; line-height: 1.5; color: var(--boe-token-text-text-secondary,#6f6f6f); }\n :is([part=local-variable-summary],[part=saved-result-summary]) ul { list-style: none; display: grid; gap: 4px; margin: 0; padding: 0; }\n :is([part=local-variable-summary],[part=saved-result-summary]) li { display: flex; align-items: center; gap: 8px; padding: 4px 4px 4px 10px; border: 1px solid var(--boe-token-stroke-stroke,#e8e8e8); border-radius: 10px; background: var(--boe-token-surface-surface-secondary,#fbfbfb); font-size: 13px; line-height: 1.45; }\n :is([part=local-variable-summary],[part=saved-result-summary]) li > span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }\n :is([part=local-variable-summary],[part=saved-result-summary]) code { font-family: monospace; font-size: 13px; }\n :is([part=local-variable-summary],[part=saved-result-summary]) em { font-style: normal; color: var(--boe-token-text-text-secondary,#6f6f6f); }\n [part=local-variable-list], [part=variable-list] { display: grid; gap: 10px; }\n [part=local-variable-row] { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr) 32px; gap: 6px; align-items: center; }\n [part=local-variable-row] [part=field-problem] { grid-column: 1 / -1; color: var(--boe-token-text-status-text-error, #b92340); font-size: 12px; }\n [part=local-variables] label { display: block; min-width: 0; }\n [part=local-variables] input { width: 100%; min-width: 0; min-height: 32px; padding: 5px 10px; border: 1px solid var(--boe-token-surface-surface-quaternary,#d3d3d3); border-radius: 10px; background: var(--boe-token-surface-surface,#fff); color: var(--boe-token-text-text,#141413); font: 12.5px/1.45 var(--boe-token-font-family-base,Inter,sans-serif); }\n [part=local-variables] input:focus-visible { outline-offset: 1px; }\n [part=local-variable-actions], [part=variable-actions] { display: flex; gap: 8px; flex-wrap: wrap; padding-top: 4px; }\n [part=variable-icon] { flex: 0 0 16px; width: 16px; height: 16px; color: var(--boe-token-text-text-secondary,#6f6f6f); }\n [part=variable-chips] { display: flex; flex-wrap: wrap; gap: 6px; }\n [part=variable-chips] button { min-height: 24px; padding: 3px 8px; border: 1px solid var(--boe-token-stroke-stroke, #e8e8e8); border-radius: 12px; background: var(--boe-token-surface-surface-secondary, #fbfbfb); font: 12px ui-monospace, \"SF Mono\", Menlo, Consolas, monospace; }\n [part=shortcut-list] { display: grid; grid-template-columns: auto 1fr; gap: 6px 12px; font-size: 12.5px; line-height: 1.45; margin: 0; }\n [part=shortcut-list] dt { white-space: nowrap; }\n [part=shortcut-list] dd { margin: 0; color: var(--boe-token-text-text-secondary, #6f6f6f); }\n [part=shortcut-list] [part=shortcut-heading] { font-weight: 650; margin-top: 10px; }\n [part=shortcut-list] kbd { font: 11.5px/1 var(--boe-token-font-family-base, Inter, sans-serif); font-weight: 600; padding: 3px 5px; border-radius: 5px; border: 1px solid var(--boe-token-stroke-stroke, #e8e8e8); border-bottom-width: 2px; background: var(--boe-token-surface-surface, #fff); }\n [part=leads-to] { min-width: 0; line-height: 1.45; }\n [part=leads-to] h3 { margin: 0 0 6px; font-size: 12.5px; font-weight: 650; line-height: 1.45; }\n [part=lead-list] { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }\n [part=lead-row] { display: flex; align-items: center; gap: 8px; font-size: 13px; padding: 4px 4px 4px 10px; border-radius: 10px; background: var(--boe-token-surface-surface-secondary, #f9f9f9); border: 1px solid var(--boe-token-stroke-stroke, #e8e8e8); }\n [part=lead-row] > span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }\n [part=lead-control] { width: 64px; min-height: 26px; border-radius: 8px; border: 1px solid var(--boe-token-surface-surface-quaternary, #d3d3d3); padding: 2px 6px; font-size: 12.5px; font-weight: 400; color: inherit; }\n [part=lead-control][type=number] { width: 56px; }\n [part=lead-remove] { font-weight: 600; letter-spacing: .01em; height: 26px; min-height: 26px; width: 26px; padding: 0; display: inline-flex; align-items: center; justify-content: center; border: 1px solid transparent; border-radius: 20px; background: transparent; color: inherit; }\n [part=lead-remove]:hover { background: var(--boe-token-surface-hover, #ededed); }\n [part=lead-remove] svg { width: 16px; height: 16px; color: var(--boe-token-text-text-secondary, #6f6f6f); }\n [part=lead-help] { margin: 0; font-size: 12.5px; line-height: 1.5; color: var(--boe-token-text-text-secondary, #6f6f6f); }\n [part=lead-target] { display: grid; margin-top: 8px; }\n [part=lead-target] select { width: 100%; min-height: 36px; padding: 7px 12px; border: 1px solid var(--boe-token-surface-surface-quaternary, #d3d3d3); border-radius: 12px; box-shadow: inset 0 2px 4px rgb(0 0 0 / .06); background: var(--boe-token-surface-surface, #fff); color: inherit; font-size: 13px; font-weight: 400; line-height: 1.45; }\n [part=inspector-actions] button { min-height: 28px; padding: 4px 8px; font-size: 12px; }\n [part=inspector-metrics] { margin: 0; font-size: 12.5px; line-height: 1.5; font-variant-numeric: tabular-nums; }\n [part=inspector-metrics] h3 { margin: 0 0 6px; font-size: 12.5px; }\n [part=inspector-metrics] p { margin: 0; color: var(--boe-token-text-text-secondary, #6f6f6f); }\n [part=inspector-metrics] table { width: 100%; border-collapse: collapse; font-size: 13px; line-height: 1.45; }\n [part=inspector-metrics] :is(th,td) { padding: 5px 0; border-bottom: 1px solid var(--boe-token-stroke-stroke, #e8e8e8); font-weight: 400; }\n [part=inspector-metrics] th { text-align: start; font-variant-numeric: normal; }\n [part=inspector-metrics] td { text-align: right; font-variant-numeric: tabular-nums; }\n [part=inspector-actions] { display: flex; gap: 8px; padding-top: 10px; border-top: 1px solid var(--boe-token-stroke-stroke, #e8e8e8); }\n [part=arrange-actions] { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 6px; }\n [part=arrange-actions] button { min-height: 32px; padding: 5px 7px; font-size: 12px; text-align: start; }\n [part=outline-intro] { margin: 4px 0 14px; color: var(--boe-token-text-text-secondary, #6f6f6f); font-size: 12.5px; line-height: 1.5; }\n [part=copy-outline] { justify-self: start; min-height: 32px; margin-top: 4px; padding: 0 14px; border-radius: 20px; font-size: 13px; font-weight: 600; letter-spacing: .01em; }\n [part=outline-list] { margin: 0; padding-left: 22px; font-size: 13.5px; line-height: 1.5; }\n [part=outline-list] [part=outline-list] { margin-top: 2px; }\n [part=outline-list] li { margin: 3px 0; padding-left: 2px; }\n [part=outline-list] li::marker { color: var(--boe-token-text-text-secondary, #6f6f6f); font-variant-numeric: tabular-nums; font-size: 12.5px; }\n [part=outline-list] button, [part=outline-list] strong { border: 0; border-radius: 4px; background: transparent; padding: 0; min-height: 24px; display: inline-block; font-size: 13.5px; font-weight: 600; line-height: 24px; text-align: start; }\n [part=outline-list] button:hover { color: var(--boe-token-surface-surface-brand, #0061d5); text-decoration: underline; text-underline-offset: 2px; }\n [part=outline-list] button[aria-current=true] { color: var(--boe-token-surface-surface-brand, #0061d5); }\n [part=outline-list] p { margin: 0; color: var(--boe-token-text-text-secondary, #6f6f6f); font-size: 12.5px; line-height: 1.5; }\n [part=inspector-heading] { margin: 0 0 2px; font-size: 15px; font-weight: 650; }\n [part=inspector-heading][data-single=true]:not(:focus-visible) { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }\n [part=variable-row] { display: grid; gap: 4px; padding: 10px 0; border-bottom: 1px solid var(--boe-token-stroke-stroke, #e8e8e8); font-size: 12.5px; }\n [part=pane-content][data-pane=Connections] { display: grid; align-content: start; gap: 14px; padding: 16px; }\n [part=connections-help] { font-size: 12.5px; color: var(--boe-token-text-text-secondary, #6f6f6f); margin: 0; line-height: 1.5; }\n [part=connections-list] { min-width: 0; list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }\n [part=connection-row] { min-width: 0; line-height: 1.45; display: flex; align-items: center; gap: 8px; font-size: 13px; padding: 4px 4px 4px 10px; border-radius: 10px; background: var(--boe-token-surface-surface-secondary, #fbfbfb); border: 1px solid var(--boe-token-stroke-stroke, #e8e8e8); }\n [part=connection-row] > span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }\n [part=connection-row] b { font-weight: 600; }\n [part=connection-row] em { font-style: normal; color: var(--boe-token-text-text-secondary, #6f6f6f); }\n [part=connections-actions] { display: flex; gap: 8px; flex-wrap: wrap; padding-top: 4px; }\n [part=connections-actions] button { line-height: 1.45; min-height: 32px; padding: 0 14px; border-radius: 20px; font-size: 13px; font-weight: 600; letter-spacing: .01em; }\n :host([data-variables-editable]) [part=variable-row] { grid-template-columns: minmax(0,1fr) minmax(0,1fr) 32px; gap: 6px; align-items: center; }\n :host([data-variables-editable]) [part=variable-row] label:has([data-variable-key=name]) { grid-column: 1; grid-row: 1; }\n :host([data-variables-editable]) [part=variable-row] label:has([data-variable-key=value]) { grid-column: 2; grid-row: 1; }\n :host([data-variables-editable]) [part=variable-row] label:has([data-variable-key=scope]) { grid-column: 2; grid-row: 2; }\n :host([data-variables-editable]) [part=variable-remove] { grid-column: 3; grid-row: 1; }\n :host([data-variables-editable]) [part=variable-row] :is(input,select) { width: 100%; min-width: 0; min-height: 32px; border-radius: 10px; font-size: 12.5px; }\n :host([data-variables-editable]) [part=variable-row] p { grid-column: 1 / -1; }\n :host([data-variables-editable]) [part=variable-row] [part=field-problem] { color: var(--boe-token-text-status-text-error, #b92340); }\n [part=variable-remove], [part=variable-add] { min-height: 32px; align-self: end; border: 1px solid var(--boe-token-stroke-stroke, #e8e8e8); border-radius: 8px; background: var(--boe-token-surface-surface, #fff); color: inherit; cursor: pointer; }\n [part=variable-row] p { margin: 0; color: var(--boe-token-text-text-secondary, #6f6f6f); }\n [part=variable-scope] { color: var(--boe-token-text-text-secondary, #6f6f6f); font-size: 11.5px; }\n [part=variable-row] label { display: grid; gap: 4px; font-weight: 650; }\n [part=variable-row] :is(input,select) { min-height: 36px; padding: 7px 10px; border: 1px solid var(--boe-token-stroke-stroke, #e8e8e8); border-radius: 8px; background: var(--boe-token-surface-surface, #fff); }\n :host([data-variables-editable]) [part=variable-row] { padding: 0; border: 0; }\n :host([data-variables-editable]) [part=variable-row] label { display: block; min-width: 0; }\n :host([data-variables-editable]) [part=variable-row] label:has([data-variable-key=description]) { grid-column: 1; grid-row: 2; }\n :host([data-variables-editable]) [part=variable-row] :is(input,select) { min-height: 32px; padding: 5px 10px; border: 1px solid var(--boe-token-surface-surface-quaternary,#d3d3d3); font: 12.5px/1.45 var(--boe-token-font-family-base,Inter,sans-serif); }\n :host([data-variables-editable]) [part=variable-row] select { padding: 4px 8px; }\n :host([data-variables-editable]) [part=variable-row] input:focus-visible { outline-offset: 1px; }\n [part=local-variables] button, [part=variable-add], [part=variable-remove] { display: inline-flex; align-items: center; gap: 6px; height: 32px; min-height: 32px; padding: 0 14px; border: 1px solid var(--boe-token-stroke-stroke,#e8e8e8); border-radius: 20px; background: var(--boe-token-surface-surface,#fff); font: 600 13px/1.45 var(--boe-token-font-family-base,Inter,sans-serif); letter-spacing: .01em; white-space: nowrap; }\n [part=local-variables] [data-local-key=remove], [part=variable-remove] { width: 32px; padding: 0; justify-content: center; border-color: transparent; background: transparent; align-self: center; }\n [part=local-variables] button:hover, [part=variable-add]:hover, [part=variable-remove]:hover { background: var(--boe-token-surface-surface-hover,#f4f4f4); }\n [part=local-variables] button:disabled, [part=variable-add]:disabled, [part=variable-remove]:disabled { opacity: .45; }\n [part=help] { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }\n :host([data-narrow]) [part=layout] { grid-template-columns: minmax(0,1fr); }\n :host([data-narrow]) [part=layout] { overflow: visible; }\n :host([data-narrow]) [part=pane-drawer] { display: none; position: absolute; z-index: 40; margin: 0; max-width: none; max-height: none; padding: 0; overflow: auto; border: 0; border-radius: 0; background: var(--boe-token-surface-surface, #fff); box-shadow: var(--boe-shadow-overlay, 0 4px 12px rgb(0 0 0 / .24)); }\n :host([data-narrow]) [part=pane-drawer][open] { display: block; }\n :host([data-narrow]) [part=pane-title] { display: block; position: absolute; top: 18px; left: 16px; margin: 0; font-size: 14px; font-weight: 650; line-height: 20px; }\n :host([data-narrow]) [part=pane-close], :host([data-narrow]) [data-command=palette], :host([data-narrow]) [data-command=details] { display: inline-block; }\n :host([data-narrow]) [part=pane-close] { position: absolute; top: 12px; right: 12px; z-index: 1; width: 28px; height: 28px; padding: 0; border-radius: 50%; font-size: 16px; font-weight: 600; line-height: 1; }\n :host([data-narrow]) [part=pane-drawer][data-pane=palette] { left: 0; top: 0; bottom: auto; width: min(320px, 86%); height: 100%; max-height: 100%; }\n :host([data-narrow]) [part=pane-drawer][data-pane=inspector] { left: 0; right: 0; top: auto; bottom: 0; width: 100%; height: min(62%, 560px); border-radius: 24px 24px 0 0; }\n :host([data-narrow]) [part=pane-drawer][data-pane=inspector]::before { content: ''; display: block; width: 36px; height: 4px; margin: 6px auto; border-radius: 2px; background: var(--boe-token-text-text-secondary, #767676); opacity: .55; }\n :host([data-narrow]) [part=palette], :host([data-narrow]) [part=inspector] { height: 100%; }\n :host([data-narrow]) [part=inspector] { border-left: 0; }\n :host([data-narrow]) [part=palette] { padding-top: 54px; }\n :host([data-narrow]) [part=palette-heading] { display: none; }\n :host([data-narrow]) [part=minimap] { display: none; }\n :host([data-narrow]) [part=toolbar] { justify-content: flex-start; gap: 8px; padding: 8px 12px; flex-wrap: wrap; }\n :host([data-narrow]) [part=view-switch], :host([data-narrow]) [part=run-toggle] { display: none; }\n :host([data-narrow]) [data-command=checks-status] { display: none; }\n :host([data-narrow]) [part=view-menu] { display: block; }\n :host([data-hide-tidy]) [part=toolbar-title] { font-size: 14px; }\n :host([data-hide-tidy]) [part=toolbar-document] span { display: none; }\n :host([data-hide-tidy]) [part=controls] { left: 12px; bottom: 12px; }\n :host([data-narrow]) [part=selection-toolbar] [part=selection-plus] + span { display: none; }\n :host([data-hide-tidy]) [part=toolbar-actions] [data-command=tidy] { display: none; }\n :host([data-narrow]) [part=toolbar-actions] [data-command=undo], :host([data-narrow]) [part=toolbar-actions] [data-command=redo] { display: none; }\n @media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition-duration: 0s !important; animation-duration: 0s !important; scroll-behavior: auto !important; } }\n";
package/dist/patterns/process-modeler/design.js CHANGED
@@ -61,7 +61,7 @@ export const processModelerDesign = `
61
61
  [part=view-menu] { display: none; position: relative; }
62
62
  [part=view-menu] summary { list-style: none; height: 32px; display: flex; align-items: center; padding: 0 14px; border: 1px solid var(--boe-token-stroke-stroke, #e8e8e8); border-radius: 20px; font-size: 13px; font-weight: 600; letter-spacing: .01em; cursor: pointer; white-space: nowrap; }
63
63
  [part=view-menu][open] { z-index: 20; }
64
- [part=view-menu-options] { position: absolute; z-index: 20; top: calc(100% + 4px); right: 0; width: 200px; max-width: calc(100vw - 24px); padding: 6px; border: 1px solid var(--boe-token-stroke-stroke, #e8e8e8); border-radius: 10px; background: var(--boe-token-surface-surface, #fff); box-shadow: var(--boe-shadow-overlay, 0 4px 12px rgb(0 0 0 / .16)); }
64
+ [part=view-menu-options] { position: absolute; z-index: 20; top: calc(100% + 4px); right: 0; width: 200px; max-width: calc(100vw - 24px); padding: 6px; border: 1px solid var(--boe-token-stroke-stroke, #e8e8e8); border-radius: 12px; background: var(--boe-token-surface-surface, #fff); box-shadow: var(--boe-process-menu-shadow, 0 8px 32px light-dark(rgb(0 0 0 / .14), rgb(0 0 0 / .5))); }
65
65
  [part=view-menu] button { display: flex; justify-content: space-between; gap: 16px; width: 100%; min-height: 32px; padding: 0 10px; text-align: start; background: transparent; }
66
66
  [part=view-menu] small { color: var(--boe-token-text-text-secondary, #6f6f6f); }
67
67
  [part=view-menu] [role=separator] { border-top: 1px solid var(--boe-token-stroke-stroke, #e8e8e8); margin: 4px 2px; }
@@ -150,6 +150,7 @@ export const processModelerDesign = `
150
150
  [part=lines] { position: absolute; inset: 0; width: 1px; height: 1px; overflow: visible; pointer-events: none; z-index: 3; }
151
151
  [part=line] { stroke: var(--boe-token-text-text-secondary, #6f6f6f); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; fill: none; }
152
152
  [part=line][data-selected=true] { stroke: var(--boe-token-surface-surface-brand, #0061d5); stroke-width: 2; }
153
+ [part=line][data-role=association] { stroke: var(--boe-token-stroke-stroke-hover, #bcbcbc); }
153
154
  [part=line][data-drop=true] { stroke: var(--boe-token-surface-surface-brand, #0061d5); stroke-width: 2.5; stroke-dasharray: 6 4; }
154
155
  [part=line-hit] { fill: none; stroke: transparent; stroke-width: 24; pointer-events: stroke; }
155
156
  [part=connection-preview] { fill: none; stroke: var(--boe-token-surface-surface-brand, #0061d5); stroke-width: 2.5; stroke-dasharray: 6 4; }
@@ -238,6 +239,10 @@ export const processModelerDesign = `
238
239
  [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; }
239
240
  [part=connection]:hover [part=connection-actions], [part=connection]:focus-within [part=connection-actions] { opacity: 1; pointer-events: auto; }
240
241
  [part=connection-actions] button { min-width: max(24px, var(--boe-process-hit-target, calc(24px * var(--boe-process-inverse-zoom, 1)))); min-height: max(32px, var(--boe-process-hit-target, calc(24px * var(--boe-process-inverse-zoom, 1)))); padding: 4px; font-size: 12px; }
242
+ [part=box][data-shape=note], [part=box][data-shape=note][aria-current=true] { display: block; width: 208px; min-height: 0; border: 0; padding: 0; background: transparent; }
243
+ [part=note-body] { width: 100%; padding: 9px 12px; border: 1px dashed var(--boe-process-box-edge, var(--boe-control-edge, #858585)); border-radius: 8px; background: var(--boe-token-surface-surface, #fff); color: var(--boe-token-text-text-secondary, #6f6f6f); font-size: 12.5px; line-height: 1.45; white-space: pre-wrap; overflow-wrap: anywhere; }
244
+ [data-shape=note][aria-current=true] [part=note-body] { border-color: var(--boe-token-surface-surface-brand, #0061d5); border-style: solid; }
245
+ [part=connection][data-role=association] { padding: 0; background: transparent; border-color: transparent; }
241
246
  [part=note] { width: 208px; border: 1px dashed var(--boe-process-box-edge, var(--boe-control-edge, #858585)); border-radius: 8px; }
242
247
  [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); }
243
248
  [part=section] strong { display: block; font-size: 12.5px; font-weight: 650; line-height: 1.3; }
@@ -266,9 +271,9 @@ export const processModelerDesign = `
266
271
  [part=minimap] rect[data-selected=true] { fill: var(--boe-token-surface-surface-brand, #0061d5); }
267
272
  [part=minimap] rect[data-section] { fill: color-mix(in srgb, var(--boe-token-text-text-secondary, #6f6f6f) 8%, transparent); }
268
273
  [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; }
269
- [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; }
270
- [part=selection-toolbar] button { display: inline-flex; align-items: center; gap: 4px; }
271
- [part=selection-plus] { font-size: 18px; line-height: 12px; font-weight: 500; }
274
+ [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 0 light-dark(rgb(0 0 0 / 10%), rgb(0 0 0 / 40%))); white-space: nowrap; translate: -50% -100%; }
275
+ [part=selection-toolbar] button { display: inline-flex; align-items: center; gap: 6px; height: 30px; min-height: 30px; padding: 0 10px; border-radius: 20px; font-size: 13px; font-weight: 600; letter-spacing: .01em; line-height: 1.45; }
276
+ [part=selection-plus] { width: 16px; height: 16px; flex: none; display: block; color: var(--boe-token-text-text-secondary, #6f6f6f); }
272
277
  [part=checks] { display: grid; gap: 6px; margin: 0; padding: 0; }
273
278
  [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; }
274
279
  [part=check-icon] { flex: 0 0 16px; width: 16px; height: 16px; margin-top: 1px; color: var(--boe-token-text-status-text-error, #b92340); }
@@ -281,6 +286,8 @@ export const processModelerDesign = `
281
286
  [part=process-heading] { display: grid; gap: 2px; padding: 0 16px 12px; }
282
287
  [part=process-title] { font-size: 15px; line-height: 1.4; }
283
288
  [part=process-summary] { color: var(--boe-token-text-text-secondary, #6f6f6f); font-size: 12.5px; }
289
+ [part=process-heading][data-selected] [part=process-title] { font-weight: 650; line-height: 1.45; text-wrap: balance; }
290
+ [part=process-heading][data-selected] [part=process-summary] { font-size: 13px; line-height: 1.45; }
284
291
  [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; }
285
292
  [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; }
286
293
  [part=pane-tabs] button[aria-selected=true] { color: var(--boe-token-text-text, #141413); border-bottom-color: currentColor; }
@@ -288,10 +295,24 @@ export const processModelerDesign = `
288
295
  [part=editor] { display: grid; align-content: start; gap: 12px; }
289
296
  [part=inspector-kind] { display: none; }
290
297
  [part=inspector-purpose] { margin: 0; color: var(--boe-token-text-text-secondary, #6f6f6f); font-size: 12.5px; }
291
- [part=field] { display: grid; gap: 4px; }
292
- [part=field] label { display: grid; gap: 5px; font-size: 12.5px; font-weight: 650; }
293
- [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; }
294
- [part=field] textarea { min-height: 76px; resize: vertical; }
298
+ [part=field-section] { min-width: 0; }
299
+ [part=field-section] h3 { font-size: 12.5px; font-weight: 650; line-height: 1.45; margin: 0 0 6px; }
300
+ [part=field-section-description] { margin: 0; font-size: 12.5px; line-height: 1.5; color: var(--boe-token-text-text-secondary, #6f6f6f); }
301
+ [part=field-section-description] code { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; }
302
+ [part=field-section] [part=field] { margin-top: 8px; }
303
+ [part=field-section] input[data-field][part=expression-control] { line-height: 1.45; }
304
+ [part=field-disclosure] { margin-top: 8px; font-size: 12.5px; line-height: 1.45; }
305
+ [part=field-disclosure] summary { cursor: pointer; font-weight: 600; color: var(--boe-token-text-text-secondary, #6f6f6f); }
306
+ [part=field-row] { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; min-width: 0; }
307
+ [part=field] [part=field-optional] { font-style: normal; font-weight: 500; color: var(--boe-token-text-text-secondary, #6f6f6f); }
308
+ [part=field] [part=field-annotation] { color: var(--boe-token-text-text-secondary, #6f6f6f); }
309
+ [part=field] { display: grid; gap: 6px; }
310
+ [part=field] label { display: grid; gap: 6px; font-size: 12.5px; font-weight: 600; line-height: 1.45; }
311
+ [part=field] :is(input:not([type=checkbox]),textarea,select) { width: 100%; min-height: 36px; padding: 7px 12px; border: 1px solid var(--boe-token-surface-surface-quaternary, #d3d3d3); border-radius: 12px; box-shadow: inset 0 2px 4px rgb(0 0 0 / .06); background: var(--boe-token-surface-surface, #fff); color: var(--boe-token-text-text, #141413); font-family: inherit; font-size: 13px; font-weight: 400; line-height: 1.45; }
312
+ [part=field] textarea[data-field] { min-height: 72px; resize: vertical; }
313
+ [part=field] :is(input,textarea)[data-format=code] { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 12.5px; }
314
+ [part=field] textarea[data-field][data-format=code] { line-height: 1.5; }
315
+ [part=field][data-boolean] label { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 400; }
295
316
  [part=field] :is(input,textarea)[part=expression-control] { border-color: var(--boe-token-surface-surface-quaternary, #d3d3d3); padding: 7px 12px; border-radius: 12px; box-shadow: inset 0 2px 4px rgb(0 0 0 / .06); font: 12.5px/1.5 ui-monospace, "SF Mono", Menlo, Consolas, monospace; }
296
317
  [part=field] textarea[part=expression-control] { min-height: 72px; }
297
318
  [part=field]:has([part=expression-control]), [part=field] label:has([part=expression-control]) { gap: 6px; }
@@ -303,17 +324,28 @@ export const processModelerDesign = `
303
324
  [part=expression-help] li { margin: 0; }
304
325
  [part=field-feedback][data-tone=success] { color: var(--boe-token-text-status-text-success, #247b3e); }
305
326
  [part=field]:has([part=action-options]) { position: relative; }
306
- [part=field]:has([part=action-options]) input { padding-right: 34px; }
307
- [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; }
308
- [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)); }
327
+ [part=field]:has([part=action-options]) input { padding-right: 32px; }
328
+ [part=action-input] { display: block; position: relative; line-height: 1.45; }
329
+ [part=action-caret] { position: absolute; z-index: 1; top: 0; right: 0; width: 32px; height: 100%; min-height: 36px; padding: 0; border: 0; background: transparent; }
330
+ [part=action-caret-icon] { position: absolute; right: 12px; top: 50%; width: 8px; height: 8px; border-right: 1.5px solid var(--boe-token-text-text-secondary, #6f6f6f); border-bottom: 1.5px solid var(--boe-token-text-text-secondary, #6f6f6f); translate: 0 -70%; rotate: 45deg; pointer-events: none; }
331
+ [part=action-options] { position: fixed; z-index: 50; max-height: 420px; overflow: auto; padding: 6px; border: 1px solid var(--boe-token-stroke-stroke, #e8e8e8); border-radius: 12px; background: var(--boe-token-surface-surface, #fff); box-shadow: var(--boe-process-menu-shadow, 0 8px 32px light-dark(rgb(0 0 0 / .14), rgb(0 0 0 / .5))); }
309
332
  [part=action-options][hidden] { display: none; }
310
- [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; }
311
- [part=action-options] button:hover, [part=action-options] [aria-selected=true] { background: var(--boe-token-surface-surface-hover, #f4f4f4); }
312
- [part=action-options] button strong { display: block; font-size: 13px; font-weight: 650; }
313
- [part=action-options] button small { display: block; color: var(--boe-token-text-text-secondary, #6f6f6f); }
314
- [part=action-options] [part=action-back] { color: var(--boe-token-text-text-secondary, #6f6f6f); }
315
- [part=field] input[type=checkbox] { justify-self: start; width: 18px; height: 18px; accent-color: var(--boe-token-surface-surface-brand, #0061d5); }
316
- [part=field] small { color: var(--boe-token-text-text-secondary, #6f6f6f); font-size: 12px; line-height: 1.4; }
333
+ [part=action-options] { overscroll-behavior: contain; animation: none; line-height: 1.45; }
334
+ [part=action-options] button { display: flex; align-items: baseline; gap: 8px; width: 100%; min-height: 32px; padding: 7px 10px; border: 0; border-radius: 8px; text-align: start; background: transparent; font-size: 13px; line-height: 1.45; font-weight: 400; letter-spacing: normal; }
335
+ [part=action-options] button:hover { background: var(--boe-token-surface-surface-hover, #f4f4f4); }
336
+ [part=action-options] [aria-selected=true] { background: var(--boe-token-surface-item-surface-selected, #f2f7fd); }
337
+ [part=action-options] button strong { flex: 1; min-width: 0; font-size: inherit; font-weight: 600; }
338
+ [part=action-options] button small { color: var(--boe-token-text-text-secondary, #6f6f6f); font-size: 11.5px; font-variant-numeric: tabular-nums; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 55%; }
339
+ [part=action-options] [part=action-option]:not([data-custom]) { flex-wrap: wrap; }
340
+ [part=action-options] [part=action-option]:not([data-custom]) small { flex-basis: 100%; max-width: 100%; }
341
+ [part=action-options] small[data-format=code] { font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace; }
342
+ [part=action-chevron], [part=action-options] [part=action-back] { color: var(--boe-token-text-text-secondary, #6f6f6f); }
343
+ [part=action-chevron] { font-weight: 600; }
344
+ [part=action-options] [data-current] strong::after { content: ' ✓'; color: var(--boe-token-surface-surface-brand, #0061d5); }
345
+ [part=action-heading] { font-size: 12px; line-height: 1.45; color: var(--boe-token-text-text-secondary, #6f6f6f); font-weight: 650; margin: 8px 8px 2px; }
346
+ [part=action-empty] { font-size: 13px; color: var(--boe-token-text-text-secondary, #6f6f6f); margin: 8px; }
347
+ [part=field] input[type=checkbox] { flex: none; width: auto; height: auto; font-family: inherit; font-size: 13px; font-weight: 400; line-height: 1.45; accent-color: var(--boe-token-surface-surface-brand, #0061d5); }
348
+ [part=field] small { color: var(--boe-token-text-text-secondary, #6f6f6f); font-size: 12px; line-height: 1.45; }
317
349
  [part=field] [part=field-problem] { color: var(--boe-token-text-status-text-error, #b92340); }
318
350
  [part=editor], [part=pane-content], [part=editor] > *, [part=pane-content] > * { min-width: 0; }
319
351
  [part=process-title], [part=process-summary] { min-width: 0; overflow-wrap: anywhere; }
@@ -341,10 +373,25 @@ export const processModelerDesign = `
341
373
  [part=variable-icon] { flex: 0 0 16px; width: 16px; height: 16px; color: var(--boe-token-text-text-secondary,#6f6f6f); }
342
374
  [part=variable-chips] { display: flex; flex-wrap: wrap; gap: 6px; }
343
375
  [part=variable-chips] button { min-height: 24px; padding: 3px 8px; border: 1px solid var(--boe-token-stroke-stroke, #e8e8e8); border-radius: 12px; background: var(--boe-token-surface-surface-secondary, #fbfbfb); font: 12px ui-monospace, "SF Mono", Menlo, Consolas, monospace; }
344
- [part=leads-to] { display: grid; gap: 6px; padding-top: 10px; border-top: 1px solid var(--boe-token-stroke-stroke, #e8e8e8); }
345
- [part=leads-to] h3 { margin: 0; font-size: 12.5px; }
346
- [part=lead-row] { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 12.5px; }
347
- [part=lead-row] button, [part=leads-to] > button, [part=inspector-actions] button { min-height: 28px; padding: 4px 8px; font-size: 12px; }
376
+ [part=shortcut-list] { display: grid; grid-template-columns: auto 1fr; gap: 6px 12px; font-size: 12.5px; line-height: 1.45; margin: 0; }
377
+ [part=shortcut-list] dt { white-space: nowrap; }
378
+ [part=shortcut-list] dd { margin: 0; color: var(--boe-token-text-text-secondary, #6f6f6f); }
379
+ [part=shortcut-list] [part=shortcut-heading] { font-weight: 650; margin-top: 10px; }
380
+ [part=shortcut-list] kbd { font: 11.5px/1 var(--boe-token-font-family-base, Inter, sans-serif); font-weight: 600; padding: 3px 5px; border-radius: 5px; border: 1px solid var(--boe-token-stroke-stroke, #e8e8e8); border-bottom-width: 2px; background: var(--boe-token-surface-surface, #fff); }
381
+ [part=leads-to] { min-width: 0; line-height: 1.45; }
382
+ [part=leads-to] h3 { margin: 0 0 6px; font-size: 12.5px; font-weight: 650; line-height: 1.45; }
383
+ [part=lead-list] { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
384
+ [part=lead-row] { display: flex; align-items: center; gap: 8px; font-size: 13px; padding: 4px 4px 4px 10px; border-radius: 10px; background: var(--boe-token-surface-surface-secondary, #f9f9f9); border: 1px solid var(--boe-token-stroke-stroke, #e8e8e8); }
385
+ [part=lead-row] > span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
386
+ [part=lead-control] { width: 64px; min-height: 26px; border-radius: 8px; border: 1px solid var(--boe-token-surface-surface-quaternary, #d3d3d3); padding: 2px 6px; font-size: 12.5px; font-weight: 400; color: inherit; }
387
+ [part=lead-control][type=number] { width: 56px; }
388
+ [part=lead-remove] { font-weight: 600; letter-spacing: .01em; height: 26px; min-height: 26px; width: 26px; padding: 0; display: inline-flex; align-items: center; justify-content: center; border: 1px solid transparent; border-radius: 20px; background: transparent; color: inherit; }
389
+ [part=lead-remove]:hover { background: var(--boe-token-surface-hover, #ededed); }
390
+ [part=lead-remove] svg { width: 16px; height: 16px; color: var(--boe-token-text-text-secondary, #6f6f6f); }
391
+ [part=lead-help] { margin: 0; font-size: 12.5px; line-height: 1.5; color: var(--boe-token-text-text-secondary, #6f6f6f); }
392
+ [part=lead-target] { display: grid; margin-top: 8px; }
393
+ [part=lead-target] select { width: 100%; min-height: 36px; padding: 7px 12px; border: 1px solid var(--boe-token-surface-surface-quaternary, #d3d3d3); border-radius: 12px; box-shadow: inset 0 2px 4px rgb(0 0 0 / .06); background: var(--boe-token-surface-surface, #fff); color: inherit; font-size: 13px; font-weight: 400; line-height: 1.45; }
394
+ [part=inspector-actions] button { min-height: 28px; padding: 4px 8px; font-size: 12px; }
348
395
  [part=inspector-metrics] { margin: 0; font-size: 12.5px; line-height: 1.5; font-variant-numeric: tabular-nums; }
349
396
  [part=inspector-metrics] h3 { margin: 0 0 6px; font-size: 12.5px; }
350
397
  [part=inspector-metrics] p { margin: 0; color: var(--boe-token-text-text-secondary, #6f6f6f); }
@@ -367,7 +414,16 @@ export const processModelerDesign = `
367
414
  [part=outline-list] p { margin: 0; color: var(--boe-token-text-text-secondary, #6f6f6f); font-size: 12.5px; line-height: 1.5; }
368
415
  [part=inspector-heading] { margin: 0 0 2px; font-size: 15px; font-weight: 650; }
369
416
  [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; }
370
- [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; }
417
+ [part=variable-row] { display: grid; gap: 4px; padding: 10px 0; border-bottom: 1px solid var(--boe-token-stroke-stroke, #e8e8e8); font-size: 12.5px; }
418
+ [part=pane-content][data-pane=Connections] { display: grid; align-content: start; gap: 14px; padding: 16px; }
419
+ [part=connections-help] { font-size: 12.5px; color: var(--boe-token-text-text-secondary, #6f6f6f); margin: 0; line-height: 1.5; }
420
+ [part=connections-list] { min-width: 0; list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
421
+ [part=connection-row] { min-width: 0; line-height: 1.45; display: flex; align-items: center; gap: 8px; font-size: 13px; padding: 4px 4px 4px 10px; border-radius: 10px; background: var(--boe-token-surface-surface-secondary, #fbfbfb); border: 1px solid var(--boe-token-stroke-stroke, #e8e8e8); }
422
+ [part=connection-row] > span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
423
+ [part=connection-row] b { font-weight: 600; }
424
+ [part=connection-row] em { font-style: normal; color: var(--boe-token-text-text-secondary, #6f6f6f); }
425
+ [part=connections-actions] { display: flex; gap: 8px; flex-wrap: wrap; padding-top: 4px; }
426
+ [part=connections-actions] button { line-height: 1.45; min-height: 32px; padding: 0 14px; border-radius: 20px; font-size: 13px; font-weight: 600; letter-spacing: .01em; }
371
427
  :host([data-variables-editable]) [part=variable-row] { grid-template-columns: minmax(0,1fr) minmax(0,1fr) 32px; gap: 6px; align-items: center; }
372
428
  :host([data-variables-editable]) [part=variable-row] label:has([data-variable-key=name]) { grid-column: 1; grid-row: 1; }
373
429
  :host([data-variables-editable]) [part=variable-row] label:has([data-variable-key=value]) { grid-column: 2; grid-row: 1; }
package/dist/patterns/process-modeler/geometry.js CHANGED
@@ -1,4 +1,5 @@
1
- import { validateProjection } from "./model.js";
1
+ import { automaticEventRoute, automaticEventPorts } from './automatic-routing.js';
2
+ import { validateProjection, isFlowBox, isFlowLine } from "./model.js";
2
3
  const GAP_X = 80;
3
4
  const GAP_Y = 48;
4
5
  const PADDING = 24;
@@ -8,6 +9,9 @@ const compare = (a, b) => a < b ? -1 : a > b ? 1 : 0;
8
9
  /** Stable left-to-right layers; cycles break at the smallest remaining ID. */
9
10
  export function arrangeProcess(projection) {
10
11
  validateProjection(projection);
12
+ const flowBoxes = projection.boxes.filter(isFlowBox);
13
+ const flowIds = new Set(flowBoxes.map(box => box.id));
14
+ projection = { boxes: flowBoxes, lines: projection.lines.filter(line => isFlowLine(line) && flowIds.has(line.from) && flowIds.has(line.to)) };
11
15
  const boxes = new Map(projection.boxes.map(box => [box.id, box]));
12
16
  const children = new Map();
13
17
  for (const box of projection.boxes) {
@@ -91,7 +95,7 @@ export function arrangeProcess(projection) {
91
95
  }
92
96
  function rectangle(position, box) {
93
97
  const compact = box?.shape === "gateway" || box?.shape === "event";
94
- return { ...position, width: position.width ?? (box?.frame ? 320 : compact ? 56 : 224), height: position.height ?? (box?.frame ? 180 : compact ? 56 : 64) };
98
+ return { ...position, width: position.width ?? (box?.frame ? 320 : compact ? 56 : box?.role === "note" ? 208 : 224), height: position.height ?? (box?.frame ? 180 : compact ? 56 : 64) };
95
99
  }
96
100
  const center = (box) => ({ x: box.x + box.width / 2, y: box.y + box.height / 2 });
97
101
  const distance = (a, b) => Math.hypot(a.x - b.x, a.y - b.y);
@@ -236,6 +240,32 @@ export function routeProcessLine(line, layout, projection) {
236
240
  return [];
237
241
  const from = rectangle(fromPosition, boxes.get(line.from));
238
242
  const to = rectangle(toPosition, boxes.get(line.to));
243
+ if (!isFlowLine(line)) {
244
+ const a = center(from), b = center(to);
245
+ const horizontal = Math.abs(b.x - a.x) > Math.abs(b.y - a.y);
246
+ const side = horizontal ? b.x > a.x ? "east" : "west" : b.y > a.y ? "south" : "north";
247
+ const opposite = { north: "south", east: "west", south: "north", west: "east" };
248
+ const endpoint = (rect, box, side) => {
249
+ const point = pin(rect, center(rect), side);
250
+ const inset = box?.shape === "event" ? 8 : 0;
251
+ if (side === "east")
252
+ point.x -= inset;
253
+ else if (side === "west")
254
+ point.x += inset;
255
+ else if (side === "north")
256
+ point.y += inset;
257
+ else
258
+ point.y -= inset;
259
+ return point;
260
+ };
261
+ return [endpoint(from, boxes.get(line.from), side), endpoint(to, boxes.get(line.to), opposite[side])];
262
+ }
263
+ // Event wrappers include an inset ring; automatic endpoints also share native task ports.
264
+ if ((boxes.get(line.from)?.shape === 'event' || boxes.get(line.to)?.shape === 'event')
265
+ && line.from !== line.to && !line.fromSide && !line.toSide
266
+ && !(layout.lines?.[line.id] ?? line.points)?.length) {
267
+ return automaticEventRoute(line, layout, projection);
268
+ }
239
269
  const excluded = new Set();
240
270
  for (const id of [line.from, line.to]) {
241
271
  let parent = boxes.get(id)?.parentId;
@@ -252,12 +282,20 @@ export function routeProcessLine(line, layout, projection) {
252
282
  if (line.from === line.to && !waypoints.length) {
253
283
  waypoints.push({ x: from.x + from.width + CLEARANCE * 2, y: from.y + from.height / 2 }, { x: from.x + from.width / 2, y: from.y - CLEARANCE * 2 });
254
284
  }
255
- const start = pin(from, waypoints[0] ?? center(to), line.fromSide);
256
- const end = pin(to, waypoints.at(-1) ?? center(from), line.toSide);
257
- const startLead = portLead(start, line.fromSide), endLead = portLead(end, line.toSide);
285
+ // Ordinary automatic lines sharing an event-connected task must consume the
286
+ // same allocated endpoints; their existing obstacle/waypoint router remains.
287
+ const sharedEvent = !line.fromSide && !line.toSide && !waypoints.length && projection.lines.some(edge => isFlowLine(edge) && !edge.fromSide && !edge.toSide
288
+ && !(layout.lines?.[edge.id] ?? edge.points)?.length
289
+ && (boxes.get(edge.from)?.shape === 'event' || boxes.get(edge.to)?.shape === 'event')
290
+ && [edge.from, edge.to].some(id => id === line.from || id === line.to));
291
+ const ports = sharedEvent ? automaticEventPorts(line, layout, projection) : undefined;
292
+ const fromSide = ports?.fromSide ?? line.fromSide, toSide = ports?.toSide ?? line.toSide;
293
+ const start = ports?.start ?? pin(from, waypoints[0] ?? center(to), fromSide);
294
+ const end = ports?.end ?? pin(to, waypoints.at(-1) ?? center(from), toSide);
295
+ const startLead = portLead(start, fromSide), endLead = portLead(end, toSide);
258
296
  // Fixed leads preserve port direction rather than detouring along a box edge.
259
- if (line.fromSide && blocked(start, startLead, obstacles)
260
- || line.toSide && blocked(endLead, end, obstacles))
297
+ if (fromSide && blocked(start, startLead, obstacles)
298
+ || toSide && blocked(endLead, end, obstacles))
261
299
  return [];
262
300
  const anchors = [startLead, ...waypoints, endLead];
263
301
  const padded = obstacles.map((rect, index) => {
@@ -265,7 +303,7 @@ export function routeProcessLine(line, layout, projection) {
265
303
  return rect;
266
304
  return { x: rect.x - CLEARANCE, y: rect.y - CLEARANCE, width: rect.width + CLEARANCE * 2, height: rect.height + CLEARANCE * 2 };
267
305
  });
268
- const result = line.fromSide ? [start, startLead] : [];
306
+ const result = fromSide ? [start, startLead] : [];
269
307
  for (let i = 1; i < anchors.length; i++) {
270
308
  // Prefer clearance, but never reject a valid narrow corridor or waypoint.
271
309
  let segment = orthogonal(anchors[i - 1], anchors[i], padded);
@@ -275,9 +313,9 @@ export function routeProcessLine(line, layout, projection) {
275
313
  return [];
276
314
  result.push(...(result.length ? segment.slice(1) : segment));
277
315
  }
278
- if (line.toSide)
316
+ if (toSide)
279
317
  result.push(end);
280
- return result;
318
+ return ports ? simplify(result) : result;
281
319
  }
282
320
  /** Halfway along the polyline's length, not halfway between its endpoints. */
283
321
  export function lineMidpoint(points) {