@unofficialbox/box-open-elements 0.24.0 → 0.26.0

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

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

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

@@ -0,0 +1,20 @@
+import type { ProcessLayout, ProcessLine, ProcessProjection } from "./model.js";
+export interface ProcessPoint {
+    x: number;
+    y: number;
+}
+/** Stable left-to-right layers; cycles break at the smallest remaining ID. */
+export declare function arrangeProcess(projection: ProcessProjection): ProcessLayout;
+/**
+ * Authored points are interior waypoints; layout points override projection points.
+ * Explicit sides use centered ports with outward leads; unset sides snap to the
+ * nearest edge. Returns [] for missing endpoints, blocked ports or impossible
+ * waypoints (inside an obstacle), never an obstacle-crossing fallback.
+ */
+export declare function routeProcessLine(line: ProcessLine, layout: ProcessLayout, projection: ProcessProjection): ProcessPoint[];
+/** Halfway along the polyline's length, not halfway between its endpoints. */
+export declare function lineMidpoint(points: readonly ProcessPoint[]): ProcessPoint;
+/** SVG route with small rounded orthogonal turns, retaining exact endpoints. */
+export declare function roundedProcessPath(points: readonly ProcessPoint[], radius?: number): string;
+/** Segment-distance hit testing, including zero-length and diagonal segments. */
+export declare function nearProcessLine(point: ProcessPoint, points: readonly ProcessPoint[], tolerance?: number): boolean;

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

@@ -0,0 +1,330 @@
+import { validateProjection } from "./model.js";
+const GAP_X = 80;
+const GAP_Y = 48;
+const PADDING = 24;
+const HEADER = 64;
+const CLEARANCE = 12;
+const compare = (a, b) => a < b ? -1 : a > b ? 1 : 0;
+/** Stable left-to-right layers; cycles break at the smallest remaining ID. */
+export function arrangeProcess(projection) {
+    validateProjection(projection);
+    const boxes = new Map(projection.boxes.map(box => [box.id, box]));
+    const children = new Map();
+    for (const box of projection.boxes) {
+        const siblings = children.get(box.parentId) ?? [];
+        siblings.push(box);
+        children.set(box.parentId, siblings);
+    }
+    for (const siblings of children.values())
+        siblings.sort((a, b) => compare(a.id, b.id));
+    const result = { boxes: Object.fromEntries(projection.boxes.map(box => [box.id, { x: 0, y: 0 }])) };
+    const measureGroup = (parentId) => {
+        const siblings = children.get(parentId) ?? [];
+        const ids = new Set(siblings.map(box => box.id));
+        // Collapse descendant endpoints to the sibling frame at this level.
+        const representative = (id) => {
+            let box = boxes.get(id);
+            while (box && !ids.has(box.id))
+                box = boxes.get(box.parentId ?? "");
+            return box?.id;
+        };
+        const outgoing = new Map(siblings.map(box => [box.id, new Set()]));
+        const incoming = new Map(siblings.map(box => [box.id, 0]));
+        for (const line of projection.lines) {
+            const from = representative(line.from), to = representative(line.to);
+            if (!from || !to || from === to || outgoing.get(from).has(to))
+                continue;
+            outgoing.get(from).add(to);
+            incoming.set(to, incoming.get(to) + 1);
+        }
+        const remaining = new Set(ids);
+        const rank = new Map(siblings.map(box => [box.id, 0]));
+        while (remaining.size) {
+            const ready = [...remaining].filter(id => incoming.get(id) === 0).sort(compare);
+            const id = ready[0] ?? [...remaining].sort(compare)[0];
+            remaining.delete(id);
+            for (const next of outgoing.get(id)) {
+                if (!remaining.has(next))
+                    continue;
+                rank.set(next, Math.max(rank.get(next), rank.get(id) + 1));
+                incoming.set(next, incoming.get(next) - 1);
+            }
+        }
+        const sizes = new Map();
+        for (const box of siblings) {
+            const group = measureGroup(box.id);
+            const compact = box.shape === "gateway" || box.shape === "event";
+            const width = box.frame ? Math.max(320, group.width + PADDING * 2) : compact ? 56 : 224;
+            const height = box.frame ? Math.max(180, group.height + HEADER + PADDING) : compact ? 56 : 64;
+            sizes.set(box.id, { x: 0, y: 0, width, height });
+            // Store local child coordinates until the parent's absolute position is known.
+            for (const [id, position] of group.positions)
+                result.boxes[id] = position;
+        }
+        const positions = new Map();
+        let x = 0, height = 0;
+        const ranks = [...new Set(rank.values())].sort((a, b) => a - b);
+        for (const layer of ranks) {
+            let y = 0, width = 0;
+            for (const box of siblings.filter(box => rank.get(box.id) === layer)) {
+                const size = sizes.get(box.id);
+                positions.set(box.id, { ...size, x, y });
+                width = Math.max(width, size.width);
+                y += size.height + GAP_Y;
+            }
+            height = Math.max(height, y - GAP_Y);
+            x += width + GAP_X;
+        }
+        return { width: Math.max(0, x - GAP_X), height, positions };
+    };
+    const roots = measureGroup();
+    const place = (positions, x, y) => {
+        for (const [id, local] of positions) {
+            const position = { ...local, x: local.x + x, y: local.y + y };
+            result.boxes[id] = position;
+            const nested = new Map((children.get(id) ?? []).map(child => [child.id, result.boxes[child.id]]));
+            place(nested, position.x + PADDING, position.y + HEADER);
+        }
+    };
+    place(roots.positions, 40, 40);
+    return result;
+}
+function rectangle(position, box) {
+    const compact = box?.shape === "gateway" || box?.shape === "event";
+    return { ...position, width: position.width ?? (box?.frame ? 320 : compact ? 56 : 224), height: position.height ?? (box?.frame ? 180 : compact ? 56 : 64) };
+}
+const center = (box) => ({ x: box.x + box.width / 2, y: box.y + box.height / 2 });
+const distance = (a, b) => Math.hypot(a.x - b.x, a.y - b.y);
+const same = (a, b) => a.x === b.x && a.y === b.y;
+const inside = (p, box) => p.x > box.x && p.x < box.x + box.width && p.y > box.y && p.y < box.y + box.height;
+function pin(box, toward, side) {
+    if (side) {
+        const middle = center(box);
+        switch (side) {
+            case "north": return { x: middle.x, y: box.y };
+            case "east": return { x: box.x + box.width, y: middle.y };
+            case "south": return { x: middle.x, y: box.y + box.height };
+            case "west": return { x: box.x, y: middle.y };
+        }
+    }
+    const x = Math.max(box.x, Math.min(toward.x, box.x + box.width));
+    const y = Math.max(box.y, Math.min(toward.y, box.y + box.height));
+    const candidates = [
+        { x: box.x + box.width, y }, { x: box.x, y },
+        { x, y: box.y + box.height }, { x, y: box.y },
+    ];
+    return candidates.reduce((best, point) => distance(point, toward) < distance(best, toward) ? point : best);
+}
+function portLead(point, side) {
+    switch (side) {
+        case "north": return { x: point.x, y: point.y - CLEARANCE };
+        case "east": return { x: point.x + CLEARANCE, y: point.y };
+        case "south": return { x: point.x, y: point.y + CLEARANCE };
+        case "west": return { x: point.x - CLEARANCE, y: point.y };
+        default: return point;
+    }
+}
+function blocked(a, b, obstacles) {
+    return obstacles.some(box => a.x === b.x
+        ? a.x > box.x && a.x < box.x + box.width && Math.max(a.y, b.y) > box.y && Math.min(a.y, b.y) < box.y + box.height
+        : a.y > box.y && a.y < box.y + box.height && Math.max(a.x, b.x) > box.x && Math.min(a.x, b.x) < box.x + box.width);
+}
+function simplify(points) {
+    const result = [];
+    for (const point of points) {
+        if (result.length && same(result[result.length - 1], point))
+            continue;
+        while (result.length > 1) {
+            const a = result[result.length - 2], b = result[result.length - 1];
+            if (!((a.x === b.x && b.x === point.x) || (a.y === b.y && b.y === point.y)))
+                break;
+            result.pop();
+        }
+        result.push(point);
+    }
+    return result;
+}
+/** Rectilinear visibility grid, with deterministic shortest-path tie breaking. */
+function orthogonal(start, end, obstacles) {
+    if (obstacles.some(box => inside(start, box) || inside(end, box)))
+        return [];
+    if (same(start, end))
+        return [{ ...start }];
+    if ((start.x === end.x || start.y === end.y) && !blocked(start, end, obstacles))
+        return [{ ...start }, { ...end }];
+    const xs = [...new Set([start.x, end.x, ...obstacles.flatMap(box => [box.x, box.x + box.width])])].sort((a, b) => a - b);
+    const ys = [...new Set([start.y, end.y, ...obstacles.flatMap(box => [box.y, box.y + box.height])])].sort((a, b) => a - b);
+    const count = xs.length * ys.length;
+    const point = (id) => ({ x: xs[id % xs.length], y: ys[Math.floor(id / xs.length)] });
+    const index = (p) => ys.indexOf(p.y) * xs.length + xs.indexOf(p.x);
+    const first = index(start), last = index(end);
+    const costs = new Float64Array(count).fill(Infinity);
+    const previous = new Int32Array(count).fill(-1);
+    const visited = new Uint8Array(count);
+    const heap = [];
+    const less = (a, b) => a.cost < b.cost || (a.cost === b.cost && a.id < b.id);
+    const push = (entry) => {
+        heap.push(entry);
+        let i = heap.length - 1;
+        while (i > 0) {
+            const parent = Math.floor((i - 1) / 2);
+            if (!less(heap[i], heap[parent]))
+                break;
+            [heap[i], heap[parent]] = [heap[parent], heap[i]];
+            i = parent;
+        }
+    };
+    const pop = () => {
+        const first = heap[0], tail = heap.pop();
+        if (heap.length) {
+            heap[0] = tail;
+            let i = 0;
+            while (i * 2 + 1 < heap.length) {
+                let child = i * 2 + 1;
+                if (child + 1 < heap.length && less(heap[child + 1], heap[child]))
+                    child++;
+                if (!less(heap[child], heap[i]))
+                    break;
+                [heap[i], heap[child]] = [heap[child], heap[i]];
+                i = child;
+            }
+        }
+        return first;
+    };
+    costs[first] = 0;
+    push({ id: first, cost: 0 });
+    while (heap.length) {
+        const { id } = pop();
+        if (visited[id])
+            continue;
+        visited[id] = 1;
+        if (id === last) {
+            const path = [];
+            for (let cursor = last; cursor !== -1; cursor = previous[cursor])
+                path.push(point(cursor));
+            return simplify(path.reverse());
+        }
+        const a = point(id), column = id % xs.length, row = Math.floor(id / xs.length);
+        const neighbors = [column > 0 ? id - 1 : -1, column + 1 < xs.length ? id + 1 : -1,
+            row > 0 ? id - xs.length : -1, row + 1 < ys.length ? id + xs.length : -1];
+        for (const next of neighbors) {
+            if (next < 0 || visited[next])
+                continue;
+            const b = point(next);
+            if (blocked(a, b, obstacles))
+                continue;
+            const cost = costs[id] + distance(a, b);
+            if (cost >= costs[next])
+                continue;
+            costs[next] = cost;
+            previous[next] = id;
+            push({ id: next, cost });
+        }
+    }
+    return [];
+}
+/**
+ * Authored points are interior waypoints; layout points override projection points.
+ * Explicit sides use centered ports with outward leads; unset sides snap to the
+ * nearest edge. Returns [] for missing endpoints, blocked ports or impossible
+ * waypoints (inside an obstacle), never an obstacle-crossing fallback.
+ */
+export function routeProcessLine(line, layout, projection) {
+    const boxes = new Map(projection.boxes.map(box => [box.id, box]));
+    const fromPosition = layout.boxes[line.from], toPosition = layout.boxes[line.to];
+    if (!fromPosition || !toPosition)
+        return [];
+    const from = rectangle(fromPosition, boxes.get(line.from));
+    const to = rectangle(toPosition, boxes.get(line.to));
+    const excluded = new Set();
+    for (const id of [line.from, line.to]) {
+        let parent = boxes.get(id)?.parentId;
+        while (parent && !excluded.has(parent)) {
+            excluded.add(parent);
+            parent = boxes.get(parent)?.parentId;
+        }
+    }
+    const obstacleBoxes = projection.boxes.filter(box => !excluded.has(box.id) && layout.boxes[box.id]);
+    const obstacles = obstacleBoxes.map(box => rectangle(layout.boxes[box.id], box));
+    const waypoints = (layout.lines?.[line.id] ?? line.points ?? []).map(point => ({ ...point }));
+    if (waypoints.some(point => !Number.isFinite(point.x) || !Number.isFinite(point.y)))
+        return [];
+    if (line.from === line.to && !waypoints.length) {
+        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 });
+    }
+    const start = pin(from, waypoints[0] ?? center(to), line.fromSide);
+    const end = pin(to, waypoints.at(-1) ?? center(from), line.toSide);
+    const startLead = portLead(start, line.fromSide), endLead = portLead(end, line.toSide);
+    // Fixed leads preserve port direction rather than detouring along a box edge.
+    if (line.fromSide && blocked(start, startLead, obstacles)
+        || line.toSide && blocked(endLead, end, obstacles))
+        return [];
+    const anchors = [startLead, ...waypoints, endLead];
+    const padded = obstacles.map((rect, index) => {
+        if (obstacleBoxes[index].id === line.from || obstacleBoxes[index].id === line.to)
+            return rect;
+        return { x: rect.x - CLEARANCE, y: rect.y - CLEARANCE, width: rect.width + CLEARANCE * 2, height: rect.height + CLEARANCE * 2 };
+    });
+    const result = line.fromSide ? [start, startLead] : [];
+    for (let i = 1; i < anchors.length; i++) {
+        // Prefer clearance, but never reject a valid narrow corridor or waypoint.
+        let segment = orthogonal(anchors[i - 1], anchors[i], padded);
+        if (!segment.length)
+            segment = orthogonal(anchors[i - 1], anchors[i], obstacles);
+        if (!segment.length)
+            return [];
+        result.push(...(result.length ? segment.slice(1) : segment));
+    }
+    if (line.toSide)
+        result.push(end);
+    return result;
+}
+/** Halfway along the polyline's length, not halfway between its endpoints. */
+export function lineMidpoint(points) {
+    if (!points.length)
+        return { x: 0, y: 0 };
+    let remaining = points.slice(1).reduce((sum, point, i) => sum + distance(points[i], point), 0) / 2;
+    for (let i = 1; i < points.length; i++) {
+        const a = points[i - 1], b = points[i], length = distance(a, b);
+        if (length && remaining <= length) {
+            const ratio = remaining / length;
+            return { x: a.x + (b.x - a.x) * ratio, y: a.y + (b.y - a.y) * ratio };
+        }
+        remaining -= length;
+    }
+    return { ...points[0] };
+}
+/** SVG route with small rounded orthogonal turns, retaining exact endpoints. */
+export function roundedProcessPath(points, radius = 6) {
+    if (!points.length)
+        return "";
+    const commands = [`M ${points[0].x} ${points[0].y}`];
+    for (let index = 1; index < points.length - 1; index++) {
+        const previous = points[index - 1], corner = points[index], next = points[index + 1];
+        const beforeLength = Math.hypot(corner.x - previous.x, corner.y - previous.y);
+        const afterLength = Math.hypot(next.x - corner.x, next.y - corner.y);
+        if (!beforeLength || !afterLength || (corner.x - previous.x) * (next.y - corner.y) === (corner.y - previous.y) * (next.x - corner.x)) {
+            commands.push(`L ${corner.x} ${corner.y}`);
+            continue;
+        }
+        const turn = Math.min(radius, beforeLength / 2, afterLength / 2);
+        const enter = { x: corner.x - (corner.x - previous.x) / beforeLength * turn, y: corner.y - (corner.y - previous.y) / beforeLength * turn };
+        const leave = { x: corner.x + (next.x - corner.x) / afterLength * turn, y: corner.y + (next.y - corner.y) / afterLength * turn };
+        commands.push(`L ${enter.x} ${enter.y}`, `Q ${corner.x} ${corner.y} ${leave.x} ${leave.y}`);
+    }
+    commands.push(`L ${points.at(-1).x} ${points.at(-1).y}`);
+    return commands.join(" ");
+}
+/** Segment-distance hit testing, including zero-length and diagonal segments. */
+export function nearProcessLine(point, points, tolerance = 16) {
+    if (tolerance < 0 || !points.length)
+        return false;
+    if (points.length === 1)
+        return distance(point, points[0]) <= tolerance;
+    return points.slice(1).some((b, i) => {
+        const a = points[i], dx = b.x - a.x, dy = b.y - a.y;
+        const squared = dx * dx + dy * dy;
+        const t = squared ? Math.max(0, Math.min(1, ((point.x - a.x) * dx + (point.y - a.y) * dy) / squared)) : 0;
+        return distance(point, { x: a.x + dx * t, y: a.y + dy * t }) <= tolerance;
+    });
+}