pict-section-flow 0.0.17 → 0.0.19

package/source/providers/PictProvider-Flow-CSS.js

@@ -37,120 +37,154 @@ class PictProviderFlowCSS extends libFableServiceProviderBase
 			/* ── Design Tokens ─────────────────────────────────────
 			   Override these custom properties to theme the flow diagram.
 			   Node-type classes (.pict-flow-node-{type}) can scope-override
-			   any variable for per-type variation. */
+			   any variable for per-type variation.
+
+			   Defaults reference the host application's pict-provider-theme
+			   tokens (--theme-color-*) when available, with hardcoded
+			   fallbacks so the editor still looks reasonable in unthemed
+			   contexts. Internal flow themes (sketch, blueprint, etc.) keep
+			   layering on top via .pict-flow-container scoped overrides. */
 
 			/* Text */
-			--pf-text-primary: #2c3e50;
-			--pf-text-heading: #1a252f;
-			--pf-text-secondary: #7f8c8d;
-			--pf-text-tertiary: #8e99a4;
-			--pf-text-placeholder: #95a5a6;
+			--pf-text-primary: var(--theme-color-text-primary, #2c3e50);
+			--pf-text-heading: var(--theme-color-text-primary, #1a252f);
+			--pf-text-secondary: var(--theme-color-text-secondary, #7f8c8d);
+			--pf-text-tertiary: var(--theme-color-text-muted, #8e99a4);
+			--pf-text-placeholder: var(--theme-color-text-placeholder, #95a5a6);
 
 			/* Node */
-			--pf-node-body-fill: #ffffff;
-			--pf-node-body-stroke: #d0d4d8;
-			--pf-node-body-stroke-hover: #b0b8c0;
+			--pf-node-body-fill: var(--theme-color-background-panel, #ffffff);
+			--pf-node-body-stroke: var(--theme-color-border-default, #d0d4d8);
+			--pf-node-body-stroke-hover: var(--theme-color-border-strong, #b0b8c0);
 			--pf-node-body-stroke-width: 1;
 			--pf-node-body-radius: 8px;
-			--pf-node-shadow: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.10));
-			--pf-node-shadow-hover: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.15));
+			--pf-node-shadow: drop-shadow(0 1px 3px var(--theme-color-shadow-color, rgba(0, 0, 0, 0.10)));
+			--pf-node-shadow-hover: drop-shadow(0 2px 6px var(--theme-color-shadow-color, rgba(0, 0, 0, 0.15)));
 			--pf-node-shadow-selected: drop-shadow(0 2px 8px rgba(52, 152, 219, 0.25));
-			--pf-node-shadow-dragging: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.20));
-			--pf-node-title-fill: #ffffff;
+			--pf-node-shadow-dragging: drop-shadow(0 4px 12px var(--theme-color-shadow-color, rgba(0, 0, 0, 0.20)));
+			--pf-node-title-fill: var(--theme-color-background-panel, #ffffff);
 			--pf-node-title-size: 11.5px;
 			--pf-node-title-weight: 600;
-			--pf-node-title-bar-color: #2c3e50;
-			--pf-node-type-label-fill: #a0a8b0;
-			--pf-node-selected-stroke: #3498db;
+			--pf-node-title-bar-color: var(--theme-color-text-primary, #2c3e50);
+			--pf-node-type-label-fill: var(--theme-color-text-muted, #a0a8b0);
+			--pf-node-selected-stroke: var(--theme-color-brand-primary, #3498db);
 
 			/* Node Variants */
 			--pf-node-start-fill: #eafaf1;
-			--pf-node-start-stroke: #27ae60;
+			--pf-node-start-stroke: var(--theme-color-status-success, #27ae60);
 			--pf-node-end-fill: #e8f8f5;
 			--pf-node-end-stroke: #1abc9c;
 			--pf-node-halt-fill: #fdedec;
-			--pf-node-halt-stroke: #e74c3c;
+			--pf-node-halt-stroke: var(--theme-color-status-error, #e74c3c);
 			--pf-node-decision-fill: #fff9e6;
-			--pf-node-decision-stroke: #f39c12;
+			--pf-node-decision-stroke: var(--theme-color-status-warning, #f39c12);
+
+			/* ── Color roles ───────────────────────────────────────
+			   Generic, theme-aware semantic colors that node types and
+			   individual cards opt into via a ColorRole field. The
+			   "-soft" variant is the tinted background; the bare role is
+			   the title-bar / outline / accent stroke.
+
+			   Hosts can override any of these tokens at .pict-flow-container
+			   scope (or at their own scope) without touching JS. Built-in
+			   node types resolve their visuals through these tokens, so
+			   theming a role automatically retints every card that uses it.
+
+			   Soft tints use color-mix() — supported in Chrome 111+,
+			   Safari 16.2+, Firefox 113+. The hardcoded fallbacks keep the
+			   editor presentable on older engines. */
+			--pf-color-success: var(--theme-color-status-success, #27ae60);
+			--pf-color-success-soft: color-mix(in srgb, var(--pf-color-success) 12%, transparent);
+			--pf-color-warning: var(--theme-color-status-warning, #f39c12);
+			--pf-color-warning-soft: color-mix(in srgb, var(--pf-color-warning) 14%, transparent);
+			--pf-color-error: var(--theme-color-status-error, #e74c3c);
+			--pf-color-error-soft: color-mix(in srgb, var(--pf-color-error) 12%, transparent);
+			--pf-color-info: var(--theme-color-status-info, #3498db);
+			--pf-color-info-soft: color-mix(in srgb, var(--pf-color-info) 12%, transparent);
+			--pf-color-accent: var(--theme-color-brand-accent, #1abc9c);
+			--pf-color-accent-soft: color-mix(in srgb, var(--pf-color-accent) 14%, transparent);
+			--pf-color-neutral: var(--theme-color-text-primary, #2c3e50);
+			--pf-color-neutral-soft: var(--theme-color-background-panel, #ffffff);
+			--pf-color-neutral-onfill: var(--theme-color-background-panel, #ffffff);
 
 			/* Ports */
-			--pf-port-input-fill: #3498db;
-			--pf-port-output-fill: #2ecc71;
-			--pf-port-stroke: #ffffff;
+			--pf-port-input-fill: var(--theme-color-status-info, #3498db);
+			--pf-port-output-fill: var(--theme-color-status-success, #2ecc71);
+			--pf-port-stroke: var(--theme-color-background-panel, #ffffff);
 			--pf-port-stroke-width: 2;
 			--pf-port-label-bg: rgba(255, 253, 240, 0.5);
-			--pf-port-label-text: #2c3e50;
+			--pf-port-label-text: var(--theme-color-text-primary, #2c3e50);
 
 			/* Port Type Colors */
-			--pf-port-event-in-fill: #3498db;
-			--pf-port-event-out-fill: #2ecc71;
+			--pf-port-event-in-fill: var(--theme-color-status-info, #3498db);
+			--pf-port-event-out-fill: var(--theme-color-status-success, #2ecc71);
 			--pf-port-setting-fill: #e67e22;
 			--pf-port-value-fill: #f1c40f;
-			--pf-port-error-fill: #e74c3c;
+			--pf-port-error-fill: var(--theme-color-status-error, #e74c3c);
 
 			/* Connection Type Colors (match source port) */
-			--pf-connection-event-in-stroke: #3498db;
-			--pf-connection-event-out-stroke: #2ecc71;
+			--pf-connection-event-in-stroke: var(--theme-color-status-info, #3498db);
+			--pf-connection-event-out-stroke: var(--theme-color-status-success, #2ecc71);
 			--pf-connection-setting-stroke: #e67e22;
 			--pf-connection-value-stroke: #f1c40f;
-			--pf-connection-error-stroke: #e74c3c;
+			--pf-connection-error-stroke: var(--theme-color-status-error, #e74c3c);
 
 			/* Connections */
-			--pf-connection-stroke: #95a5a6;
-			--pf-connection-stroke-hover: #7f8c8d;
-			--pf-connection-selected-stroke: #3498db;
+			--pf-connection-stroke: var(--theme-color-border-strong, #95a5a6);
+			--pf-connection-stroke-hover: var(--theme-color-text-secondary, #7f8c8d);
+			--pf-connection-selected-stroke: var(--theme-color-brand-primary, #3498db);
 
 			/* Panels */
-			--pf-panel-bg: #ffffff;
-			--pf-panel-border: #d0d4d8;
+			--pf-panel-bg: var(--theme-color-background-panel, #ffffff);
+			--pf-panel-border: var(--theme-color-border-default, #d0d4d8);
 			--pf-panel-radius: 8px;
-			--pf-panel-shadow: 0 4px 12px rgba(0,0,0,0.10), 0 1px 3px rgba(0,0,0,0.06);
-			--pf-panel-titlebar-bg: #f7f8fa;
-			--pf-panel-titlebar-border: #e8eaed;
-			--pf-panel-title-color: #2c3e50;
+			--pf-panel-shadow: 0 4px 12px var(--theme-color-shadow-color, rgba(0, 0, 0, 0.10)), 0 1px 3px var(--theme-color-shadow-color, rgba(0, 0, 0, 0.06));
+			--pf-panel-titlebar-bg: var(--theme-color-background-secondary, #f7f8fa);
+			--pf-panel-titlebar-border: var(--theme-color-border-light, #e8eaed);
+			--pf-panel-title-color: var(--theme-color-text-primary, #2c3e50);
 
 			/* Tabs */
-			--pf-tab-text: #8e99a4;
-			--pf-tab-text-hover: #5a6a7a;
+			--pf-tab-text: var(--theme-color-text-muted, #8e99a4);
+			--pf-tab-text-hover: var(--theme-color-text-secondary, #5a6a7a);
 			--pf-tab-active-border: var(--pf-node-selected-stroke);
-			--pf-resize-handle-hover: #e0e3e6;
+			--pf-resize-handle-hover: var(--theme-color-border-light, #e0e3e6);
 
 			/* Forms & Inputs */
-			--pf-input-border: #d5d8dc;
-			--pf-input-border-focus: #3498db;
-			--pf-divider-light: #ecf0f1;
-			--pf-divider-medium: #e8eaed;
+			--pf-input-border: var(--theme-color-border-default, #d5d8dc);
+			--pf-input-border-focus: var(--theme-color-focus-outline, #3498db);
+			--pf-divider-light: var(--theme-color-border-light, #ecf0f1);
+			--pf-divider-medium: var(--theme-color-border-light, #e8eaed);
 
 			/* Buttons */
-			--pf-button-border: #bdc3c7;
-			--pf-button-hover-border: #95a5a6;
-			--pf-button-hover-bg: #ecf0f1;
-			--pf-button-active-bg: #d5dbdb;
-			--pf-button-danger-text: #e74c3c;
+			--pf-button-border: var(--theme-color-border-default, #bdc3c7);
+			--pf-button-hover-border: var(--theme-color-border-strong, #95a5a6);
+			--pf-button-hover-bg: var(--theme-color-background-hover, #ecf0f1);
+			--pf-button-active-bg: var(--theme-color-background-selected, #d5dbdb);
+			--pf-button-danger-text: var(--theme-color-status-error, #e74c3c);
 			--pf-button-danger-hover-bg: #fdedec;
-			--pf-button-close-color: #b0b8c0;
+			--pf-button-close-color: var(--theme-color-text-muted, #b0b8c0);
 
 			/* Badges */
-			--pf-badge-category-bg: #f0f2f4;
-			--pf-badge-category-text: #6b7b8d;
+			--pf-badge-category-bg: var(--theme-color-background-tertiary, #f0f2f4);
+			--pf-badge-category-text: var(--theme-color-text-secondary, #6b7b8d);
 			--pf-badge-code-bg: #eaf2f8;
 			--pf-badge-code-text: #2980b9;
 
 			/* Info Panel */
-			--pf-port-item-bg: #f8f9fa;
+			--pf-port-item-bg: var(--theme-color-background-secondary, #f8f9fa);
 
 			/* Toolbar */
-			--pf-toolbar-bg: #ffffff;
-			--pf-toolbar-border: #e0e0e0;
+			--pf-toolbar-bg: var(--theme-color-background-panel, #ffffff);
+			--pf-toolbar-border: var(--theme-color-border-default, #e0e0e0);
 
 			/* Palette Cards */
-			--pf-card-border: #d5d8dc;
-			--pf-card-hover-bg: #eaf2f8;
+			--pf-card-border: var(--theme-color-border-default, #d5d8dc);
+			--pf-card-hover-bg: var(--theme-color-background-hover, #eaf2f8);
 			--pf-card-hover-shadow: 0 1px 3px rgba(52, 152, 219, 0.15);
 
 			/* Canvas */
-			--pf-canvas-bg: #fafafa;
-			--pf-grid-stroke: #e8e8e8;
+			--pf-canvas-bg: var(--theme-color-background-secondary, #fafafa);
+			--pf-grid-stroke: var(--theme-color-border-light, #e8e8e8);
 
 			position: relative;
 			width: 100%;
@@ -330,6 +364,94 @@ class PictProviderFlowCSS extends libFableServiceProviderBase
 			stroke: var(--pf-node-halt-stroke);
 			stroke-width: 1.5;
 		}
+
+		/* ── Color-role variants ────────────────────────────────
+		   Cards opt into a role via ColorRole on the node-type config or
+		   a per-node override. The renderer adds .pict-flow-node-color-{role}
+		   to the node group, which pulls fill/stroke/title-bar colors from
+		   the --pf-color-* tokens — those in turn track the host's
+		   --theme-color-* tokens so light/dark/palette swaps propagate.
+
+		   Roles deliberately don't override .pict-flow-node-body-content-*
+		   styling — the body content's visual identity is the consumer's
+		   responsibility. */
+		.pict-flow-node-color-success .pict-flow-node-body {
+			fill: var(--pf-color-success-soft);
+			stroke: var(--pf-color-success);
+			stroke-width: 1.5;
+		}
+		.pict-flow-node-color-success .pict-flow-node-title-bar,
+		.pict-flow-node-color-success .pict-flow-node-title-bar-bottom {
+			fill: var(--pf-color-success);
+		}
+		.pict-flow-node-color-success .pict-flow-node-bracket {
+			stroke: var(--pf-color-success);
+		}
+
+		.pict-flow-node-color-warning .pict-flow-node-body {
+			fill: var(--pf-color-warning-soft);
+			stroke: var(--pf-color-warning);
+			stroke-width: 1.5;
+		}
+		.pict-flow-node-color-warning .pict-flow-node-title-bar,
+		.pict-flow-node-color-warning .pict-flow-node-title-bar-bottom {
+			fill: var(--pf-color-warning);
+		}
+		.pict-flow-node-color-warning .pict-flow-node-bracket {
+			stroke: var(--pf-color-warning);
+		}
+
+		.pict-flow-node-color-error .pict-flow-node-body {
+			fill: var(--pf-color-error-soft);
+			stroke: var(--pf-color-error);
+			stroke-width: 1.5;
+		}
+		.pict-flow-node-color-error .pict-flow-node-title-bar,
+		.pict-flow-node-color-error .pict-flow-node-title-bar-bottom {
+			fill: var(--pf-color-error);
+		}
+		.pict-flow-node-color-error .pict-flow-node-bracket {
+			stroke: var(--pf-color-error);
+		}
+
+		.pict-flow-node-color-info .pict-flow-node-body {
+			fill: var(--pf-color-info-soft);
+			stroke: var(--pf-color-info);
+			stroke-width: 1.5;
+		}
+		.pict-flow-node-color-info .pict-flow-node-title-bar,
+		.pict-flow-node-color-info .pict-flow-node-title-bar-bottom {
+			fill: var(--pf-color-info);
+		}
+		.pict-flow-node-color-info .pict-flow-node-bracket {
+			stroke: var(--pf-color-info);
+		}
+
+		.pict-flow-node-color-accent .pict-flow-node-body {
+			fill: var(--pf-color-accent-soft);
+			stroke: var(--pf-color-accent);
+			stroke-width: 1.5;
+		}
+		.pict-flow-node-color-accent .pict-flow-node-title-bar,
+		.pict-flow-node-color-accent .pict-flow-node-title-bar-bottom {
+			fill: var(--pf-color-accent);
+		}
+		.pict-flow-node-color-accent .pict-flow-node-bracket {
+			stroke: var(--pf-color-accent);
+		}
+
+		.pict-flow-node-color-neutral .pict-flow-node-body {
+			fill: var(--pf-color-neutral-soft);
+			stroke: var(--pf-color-neutral);
+			stroke-width: 1;
+		}
+		.pict-flow-node-color-neutral .pict-flow-node-title-bar,
+		.pict-flow-node-color-neutral .pict-flow-node-title-bar-bottom {
+			fill: var(--pf-color-neutral);
+		}
+		.pict-flow-node-color-neutral .pict-flow-node-bracket {
+			stroke: var(--pf-color-neutral);
+		}
 		`;
 	}
 
@@ -396,6 +518,187 @@ class PictProviderFlowCSS extends libFableServiceProviderBase
 		.pict-flow-node-port-labels-hover:hover .pict-flow-port-label-bg {
 			opacity: 1;
 		}
+
+		/* Port-hint beziers — drawn from the badge to the actual dot
+		   when an edge theme has rerouted the connection. Hidden by
+		   default; PortRenderer / NodeView toggle data-active on hover. */
+		.pict-flow-port-hint {
+			fill: none;
+			stroke: var(--pf-connection-stroke-hover, #3498db);
+			stroke-width: 1.75;
+			stroke-dasharray: 4 3;
+			stroke-linecap: round;
+			opacity: 0;
+			pointer-events: none;
+			transition: opacity 0.18s ease;
+		}
+		.pict-flow-port-hint[data-active="true"] {
+			opacity: 0.7;
+		}
+
+		/* ── Layout-algorithm popup: tightened layout + form styling ── */
+		.pict-flow-popup-layout-algorithm-row {
+			display: flex;
+			flex-direction: column;
+			gap: 4px;
+			padding: 6px 10px 4px;
+		}
+		.pict-flow-popup-layout-algorithm-row > .pict-flow-popup-settings-label {
+			font-size: 10px;
+			font-weight: 700;
+			text-transform: uppercase;
+			letter-spacing: 0.05em;
+			opacity: 0.7;
+			margin: 0;
+		}
+		.pict-flow-popup-layout-algorithm-controls {
+			display: flex;
+			align-items: stretch;
+			gap: 4px;
+		}
+		.pict-flow-popup-layout-algorithm-select {
+			flex: 1 1 auto;
+			min-width: 0;
+		}
+		.pict-flow-popup-collapse-toggle {
+			flex: 0 0 auto;
+			width: 28px;
+			padding: 0;
+			border: 1px solid var(--pf-button-border, #ccc);
+			border-radius: 3px;
+			background: var(--pf-toolbar-bg, #fff);
+			color: var(--pf-text-secondary, #5a6470);
+			cursor: pointer;
+			display: inline-flex;
+			align-items: center;
+			justify-content: center;
+			transition: background-color 0.15s, color 0.15s, border-color 0.15s;
+		}
+		.pict-flow-popup-collapse-toggle:hover {
+			background-color: var(--pf-button-hover-bg, #eef);
+			color: var(--pf-text-primary, #2c3e50);
+		}
+		/* "Open" state: pressed-in look so the user sees that the form
+		   below is being driven by this gear. */
+		.pict-flow-popup-collapse-toggle[aria-expanded="true"] {
+			background-color: var(--pf-button-active-bg, #d6e4f0);
+			color: var(--pf-text-primary, #2c3e50);
+			border-color: var(--pf-button-hover-border, #3498db);
+		}
+		.pict-flow-popup-collapse-toggle svg {
+			display: block;
+		}
+		/* Subordinate description text — sits under a control (algorithm
+		   dropdown, edge-theme dropdown, etc.) and explains it. Indented
+		   from the section's left edge with a faint left rule so the
+		   visual hierarchy is unambiguous: SECTION LABEL > control >
+		   description. */
+		.pict-flow-popup-control-description {
+			font-size: 11px;
+			line-height: 1.4;
+			color: var(--pf-text-secondary, #5a6470);
+			padding: 4px 12px 8px 28px;
+			margin-left: 14px;
+			border-left: 2px solid var(--pf-divider-light, #e6e6e6);
+		}
+
+		/* The form host. Acts as the collapsible container around the
+		   pict-section-form metacontroller's emitted markup. */
+		.pict-flow-popup-layout-form-host {
+			margin: 0 10px 8px;
+			padding: 8px 10px;
+			background: var(--pf-toolbar-bg, #fafafa);
+			border: 1px solid var(--pf-button-border, #e0e0e0);
+			border-radius: 6px;
+			overflow: hidden;
+			max-height: 600px;
+			transition: max-height 0.22s ease, padding 0.22s ease,
+			            margin 0.22s ease, border-color 0.22s ease, opacity 0.18s ease;
+			opacity: 1;
+		}
+		.pict-flow-popup-layout-form-host[data-collapsed="true"] {
+			max-height: 0;
+			padding-top: 0;
+			padding-bottom: 0;
+			margin-top: 0;
+			margin-bottom: 0;
+			border-color: transparent;
+			opacity: 0;
+		}
+		.pict-flow-popup-layout-form-host > div { width: 100%; }
+
+		/* Form contents — make the auto-rendered sections look professional.
+		   The section headings stay visible; the redundant per-section
+		   "Group: Defaults" h3 is suppressed. */
+		.pict-flow-popup-layout-form .pict-form-view {
+			display: block;
+		}
+		.pict-flow-popup-layout-form .pict-form-section {
+			margin: 0;
+			padding: 0;
+		}
+		.pict-flow-popup-layout-form .pict-form-section h2 {
+			font-size: 10px;
+			font-weight: 700;
+			text-transform: uppercase;
+			letter-spacing: 0.05em;
+			opacity: 0.6;
+			margin: 8px 0 4px;
+			padding: 0;
+			border-bottom: 1px solid var(--pf-button-border, #e6e6e6);
+			padding-bottom: 3px;
+		}
+		.pict-flow-popup-layout-form .pict-form-section:first-child h2,
+		.pict-flow-popup-layout-form .pict-form-section h2:first-child {
+			margin-top: 0;
+		}
+		/* Group headings ("Group: Defaults") are noise — every algorithm
+		   has exactly one group right now. Hide them. */
+		.pict-flow-popup-layout-form .pict-form-section h3 {
+			display: none;
+		}
+		/* Each row of inputs lives in a flat <div> as alternating
+		   <span>label</span><input> pairs. Lay them out in a balanced grid. */
+		.pict-flow-popup-layout-form .pict-form-section > div > div {
+			display: flex;
+			flex-wrap: wrap;
+			gap: 4px 14px;
+			margin: 4px 0;
+			align-items: center;
+		}
+		.pict-flow-popup-layout-form .pict-form-section span {
+			font-size: 12px;
+			color: var(--pf-text-primary, #2c3e50);
+			line-height: 1.4;
+			margin: 0;
+		}
+		.pict-flow-popup-layout-form input[type="number"],
+		.pict-flow-popup-layout-form input[type="text"],
+		.pict-flow-popup-layout-form select {
+			width: 88px;
+			padding: 2px 6px;
+			border: 1px solid var(--pf-button-border, #ccc);
+			border-radius: 3px;
+			font-size: 12px;
+			line-height: 1.3;
+			background: #fff;
+			color: var(--pf-text-primary, #2c3e50);
+			margin-left: -8px; /* tighten gap between label and its input */
+		}
+		.pict-flow-popup-layout-form select {
+			width: auto;
+			min-width: 110px;
+		}
+		.pict-flow-popup-layout-form input[type="number"]:focus,
+		.pict-flow-popup-layout-form input[type="text"]:focus,
+		.pict-flow-popup-layout-form select:focus {
+			outline: none;
+			border-color: var(--pf-button-hover-border, #3498db);
+			box-shadow: 0 0 0 2px rgba(52, 152, 219, 0.15);
+		}
+		.pict-flow-popup-layout-form input[type="checkbox"] {
+			margin: 0 4px 0 0;
+		}
 		`;
 	}
 
@@ -407,6 +710,34 @@ class PictProviderFlowCSS extends libFableServiceProviderBase
 	getConnectionCSS()
 	{
 		return /*css*/`
+		/* Arrowhead markers use CSS-driven fills so they follow --pf-* tokens
+		   (which in turn map to host --theme-color-* tokens). The polygon's
+		   fill attribute is the fallback when CSS does not reach the marker. */
+		.pict-flow-svg .pict-flow-arrowhead-default {
+			fill: var(--pf-connection-stroke);
+		}
+		.pict-flow-svg .pict-flow-arrowhead-selected {
+			fill: var(--pf-connection-selected-stroke);
+		}
+		.pict-flow-svg .pict-flow-arrowhead-tether {
+			fill: var(--pf-connection-stroke);
+		}
+		.pict-flow-svg .pict-flow-arrowhead-event-in {
+			fill: var(--pf-connection-event-in-stroke);
+		}
+		.pict-flow-svg .pict-flow-arrowhead-event-out {
+			fill: var(--pf-connection-event-out-stroke);
+		}
+		.pict-flow-svg .pict-flow-arrowhead-setting {
+			fill: var(--pf-connection-setting-stroke);
+		}
+		.pict-flow-svg .pict-flow-arrowhead-value {
+			fill: var(--pf-connection-value-stroke);
+		}
+		.pict-flow-svg .pict-flow-arrowhead-error {
+			fill: var(--pf-connection-error-stroke);
+		}
+
 		.pict-flow-connection {
 			fill: none;
 			stroke: var(--pf-connection-stroke);
@@ -787,6 +1118,26 @@ class PictProviderFlowCSS extends libFableServiceProviderBase
 			cursor: pointer;
 			flex: 0 0 28px;
 		}
+
+		/* Suppress native number-input spinner buttons on every input
+		   inside a properties panel. Panels live inside <foreignObject>;
+		   browsers (Chromium / WebKit) render the up/down spinner chrome
+		   as native overlays that don't always respect SVG transforms or
+		   the parent tab pane's display:none — leaving stale spinner
+		   artifacts hanging around when the user switches tabs or pans
+		   the diagram. The user can still type numbers; they just don't
+		   get clickable spinners. (If we ever want spinners back, build
+		   them as real DOM elements next to the input, not native chrome.) */
+		.pict-flow-panel input[type="number"] {
+			-moz-appearance: textfield;
+			appearance: textfield;
+		}
+		.pict-flow-panel input[type="number"]::-webkit-outer-spin-button,
+		.pict-flow-panel input[type="number"]::-webkit-inner-spin-button {
+			-webkit-appearance: none;
+			appearance: none;
+			margin: 0;
+		}
 		`;
 	}
 
@@ -954,6 +1305,29 @@ class PictProviderFlowCSS extends libFableServiceProviderBase
 			align-items: center;
 			margin-left: 0.15em;
 		}
+		/* Split button — visible as one connected unit; the two halves
+		   route to different actions. Used for "Auto" so clicking the
+		   icon/text applies the current layout while the chevron half
+		   opens the algorithm popup with a generous hit area. */
+		.pict-flow-toolbar-btn-split {
+			display: inline-flex;
+			align-items: stretch;
+		}
+		.pict-flow-toolbar-btn-split-main {
+			border-top-right-radius: 0;
+			border-bottom-right-radius: 0;
+			border-right: 1px solid var(--pf-button-border);
+			margin-right: -1px; /* collapse the seam between the two buttons */
+		}
+		.pict-flow-toolbar-btn-split-chevron {
+			border-top-left-radius: 0;
+			border-bottom-left-radius: 0;
+			padding-left: 0.55em;
+			padding-right: 0.55em;
+		}
+		.pict-flow-toolbar-btn-split-chevron .pict-flow-toolbar-btn-chevron {
+			margin: 0;
+		}
 		.pict-flow-toolbar-right {
 			margin-left: auto;
 			border-right: none;
@@ -1075,7 +1449,7 @@ class PictProviderFlowCSS extends libFableServiceProviderBase
 			border-radius: 6px;
 			box-shadow: 0 4px 16px rgba(0,0,0,0.12);
 			min-width: 240px;
-			max-height: 340px;
+			max-height: 80vh;
 			overflow-y: auto;
 			padding: 0.35em 0;
 			font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

package/source/providers/PictProvider-Flow-ConnectorShapes.js

@@ -409,14 +409,18 @@ class PictProviderFlowConnectorShapes extends libFableServiceProviderBase
 
 		let tmpMarkup = '';
 
-		// Normal connection arrowhead (default gray)
+		// Normal connection arrowhead — class-driven fill so the host theme's
+		// --theme-color-* tokens (mapped to --pf-connection-stroke etc. in
+		// PictProvider-Flow-CSS) flow through automatically. The polygon's
+		// `fill` attribute is kept as a fallback for environments that
+		// ignore CSS rules on marker children.
 		tmpMarkup += '<marker id="flow-arrowhead-' + pViewIdentifier + '"'
 			+ ' markerWidth="' + tmpConnectionMarker.MarkerWidth + '"'
 			+ ' markerHeight="' + tmpConnectionMarker.MarkerHeight + '"'
 			+ ' refX="' + tmpConnectionMarker.RefX + '"'
 			+ ' refY="' + tmpConnectionMarker.RefY + '"'
 			+ ' orient="auto" markerUnits="strokeWidth">'
-			+ '<polygon points="' + tmpConnectionMarker.Points + '" fill="' + tmpConnectionMarker.Fill + '" />'
+			+ '<polygon class="pict-flow-arrowhead pict-flow-arrowhead-default" points="' + tmpConnectionMarker.Points + '" fill="' + tmpConnectionMarker.Fill + '" />'
 			+ '</marker>';
 
 		// Per-port-type connection arrowheads
@@ -437,7 +441,7 @@ class PictProviderFlowConnectorShapes extends libFableServiceProviderBase
 				+ ' refX="' + tmpConnectionMarker.RefX + '"'
 				+ ' refY="' + tmpConnectionMarker.RefY + '"'
 				+ ' orient="auto" markerUnits="strokeWidth">'
-				+ '<polygon points="' + tmpConnectionMarker.Points + '" fill="' + tmpPortTypeColors[tmpType] + '" />'
+				+ '<polygon class="pict-flow-arrowhead pict-flow-arrowhead-' + tmpType + '" points="' + tmpConnectionMarker.Points + '" fill="' + tmpPortTypeColors[tmpType] + '" />'
 				+ '</marker>';
 		}
 
@@ -448,7 +452,7 @@ class PictProviderFlowConnectorShapes extends libFableServiceProviderBase
 			+ ' refX="' + tmpSelectedMarker.RefX + '"'
 			+ ' refY="' + tmpSelectedMarker.RefY + '"'
 			+ ' orient="auto" markerUnits="strokeWidth">'
-			+ '<polygon points="' + tmpSelectedMarker.Points + '" fill="' + tmpSelectedMarker.Fill + '" />'
+			+ '<polygon class="pict-flow-arrowhead pict-flow-arrowhead-selected" points="' + tmpSelectedMarker.Points + '" fill="' + tmpSelectedMarker.Fill + '" />'
 			+ '</marker>';
 
 		// Tether arrowhead
@@ -458,7 +462,7 @@ class PictProviderFlowConnectorShapes extends libFableServiceProviderBase
 			+ ' refX="' + tmpTetherMarker.RefX + '"'
 			+ ' refY="' + tmpTetherMarker.RefY + '"'
 			+ ' orient="auto" markerUnits="strokeWidth">'
-			+ '<polygon points="' + tmpTetherMarker.Points + '" fill="' + tmpTetherMarker.Fill + '" />'
+			+ '<polygon class="pict-flow-arrowhead pict-flow-arrowhead-tether" points="' + tmpTetherMarker.Points + '" fill="' + tmpTetherMarker.Fill + '" />'
 			+ '</marker>';
 
 		return tmpMarkup;