pict-section-flow 0.0.16 → 0.0.18

package/example_applications/simple_cards/source/views/PictView-FlowExample-MainWorkspace.js

@@ -1,5 +1,6 @@
 const libPictView = require('pict-view');
 const libPictSectionFlow = require('pict-section-flow');
+const libSampleFlows = require('../sample-flows.js');
 
 // FlowCard definitions
 const libFlowCardIfThenElse = require('../cards/FlowCard-IfThenElse.js');
@@ -36,7 +37,7 @@ const _ViewConfiguration =
 			flex-shrink: 0;
 			margin: 0 0 0.75em 0;
 			padding-bottom: 0.75em;
-			border-bottom: 1px solid #eee;
+			border-bottom: 1px solid var(--theme-color-border-light, #eee);
 			display: flex;
 			align-items: flex-start;
 			justify-content: space-between;
@@ -59,7 +60,7 @@ const _ViewConfiguration =
 			height: 36px;
 			border-radius: 50%;
 			border: 2px solid #3498db;
-			background: #fff;
+			background: var(--theme-color-background-panel, #fff);
 			color: #3498db;
 			font-size: 1.2em;
 			font-weight: 700;
@@ -71,16 +72,57 @@ const _ViewConfiguration =
 		}
 		.flowexample-help-toggle:hover {
 			background: #3498db;
-			color: #fff;
+			color: var(--theme-color-background-panel, #fff);
 		}
 		.flowexample-help-toggle.active {
 			background: #3498db;
-			color: #fff;
+			color: var(--theme-color-background-panel, #fff);
 		}
 		#FlowExample-Flow-Container {
 			flex: 1;
 			min-height: 0;
 		}
+		.flowexample-sample-bar {
+			flex-shrink: 0;
+			margin: 0 0 0.75em 0;
+			padding: 0.6em 0.75em;
+			background: var(--theme-color-background-panel, #fff);
+			border: 1px solid var(--theme-color-border-light, #dee2e6);
+			border-radius: 6px;
+			display: flex;
+			align-items: center;
+			gap: 0.6em;
+			flex-wrap: wrap;
+		}
+		.flowexample-sample-bar label {
+			font-weight: 600;
+			color: #2c3e50;
+			font-size: 0.9em;
+		}
+		.flowexample-sample-bar select {
+			padding: 0.35em 0.55em;
+			border: 1px solid #ced4da;
+			border-radius: 4px;
+			background: #fff;
+			font-size: 0.95em;
+			min-width: 220px;
+		}
+		.flowexample-sample-description {
+			flex: 1;
+			min-width: 280px;
+			color: #5a6470;
+			font-size: 0.85em;
+			line-height: 1.4;
+		}
+		.flowexample-sample-recommended {
+			padding: 0.2em 0.55em;
+			background: #eaf6ee;
+			color: #1f7a3f;
+			border-radius: 4px;
+			font-size: 0.8em;
+			font-weight: 600;
+			white-space: nowrap;
+		}
 		.flowexample-help-panel {
 			flex-shrink: 0;
 			display: none;
@@ -105,8 +147,8 @@ const _ViewConfiguration =
 			gap: 1em;
 		}
 		.flowexample-hint {
-			background: #fff;
-			border: 1px solid #e0e0e0;
+			background: var(--theme-color-background-panel, #fff);
+			border: 1px solid var(--theme-color-border-default, #e0e0e0);
 			border-radius: 6px;
 			padding: 1em 1.25em;
 		}
@@ -117,7 +159,7 @@ const _ViewConfiguration =
 		}
 		.flowexample-hint p {
 			margin: 0;
-			color: #666;
+			color: var(--theme-color-text-secondary, #666);
 			font-size: 0.85em;
 			line-height: 1.5;
 		}
@@ -126,7 +168,7 @@ const _ViewConfiguration =
 			padding: 0.1em 0.3em;
 			border-radius: 3px;
 			font-size: 0.9em;
-			color: #e74c3c;
+			color: var(--theme-color-status-error, #e74c3c);
 		}
 	`,
 
@@ -180,6 +222,12 @@ const _ViewConfiguration =
 			</div>
 		</div>
 	</div>
+	<div class="flowexample-sample-bar">
+		<label for="FlowExample-SampleSelect">Sample graph:</label>
+		<select id="FlowExample-SampleSelect"></select>
+		<span class="flowexample-sample-recommended" id="FlowExample-SampleRecommended"></span>
+		<span class="flowexample-sample-description" id="FlowExample-SampleDescription">Pick a sample, then open the <strong>Algorithm</strong> popup in the toolbar to compare layouts.</span>
+	</div>
 	<div id="FlowExample-Flow-Container"></div>
 </div>
 `
@@ -311,8 +359,93 @@ class FlowExampleMainWorkspaceView extends libPictView
 			});
 		}
 
+		// Populate the sample-graph selector and wire its change handler.
+		this._populateSampleSelector();
+
 		return super.onAfterRender(pRenderable, pRenderDestinationAddress, pRecord, pContent);
 	}
+
+	/**
+	 * Populate the sample-graph dropdown above the flow diagram and wire
+	 * the change handler. The first option ("Hello World") is the rich
+	 * default flow that lives in AppData.FlowExample.SampleFlow; the rest
+	 * come from sample-flows.js and showcase a different layout strength.
+	 */
+	_populateSampleSelector()
+	{
+		let tmpSelect = document.getElementById('FlowExample-SampleSelect');
+		let tmpDesc   = document.getElementById('FlowExample-SampleDescription');
+		let tmpReco   = document.getElementById('FlowExample-SampleRecommended');
+		if (!tmpSelect || !tmpDesc || !tmpReco) return;
+
+		// Clear pre-existing options
+		while (tmpSelect.firstChild) tmpSelect.removeChild(tmpSelect.firstChild);
+
+		let tmpHelloOpt = document.createElement('option');
+		tmpHelloOpt.value = '__hello-world__';
+		tmpHelloOpt.textContent = 'Hello World — multi-feature reference';
+		tmpSelect.appendChild(tmpHelloOpt);
+
+		let tmpKeys = libSampleFlows.getSampleNames();
+		for (let i = 0; i < tmpKeys.length; i++)
+		{
+			let tmpSample = libSampleFlows.getSample(tmpKeys[i]);
+			let tmpOpt = document.createElement('option');
+			tmpOpt.value = tmpKeys[i];
+			tmpOpt.textContent = tmpSample.Name;
+			tmpSelect.appendChild(tmpOpt);
+		}
+
+		// Initial description (Hello World)
+		tmpDesc.innerHTML = 'Pick a sample, then open the <strong>Algorithm</strong> popup in the toolbar to compare layouts.';
+		tmpReco.style.display = 'none';
+
+		let tmpView = this;
+		tmpSelect.addEventListener('change', function ()
+		{
+			let tmpKey = tmpSelect.value;
+			tmpView._loadSample(tmpKey, tmpDesc, tmpReco);
+		});
+	}
+
+	/**
+	 * Load a sample flow into the FlowView. `__hello-world__` reloads the
+	 * original AppData-backed flow; everything else comes from sample-flows.
+	 *
+	 * @param {string} pKey
+	 * @param {HTMLElement} pDescEl
+	 * @param {HTMLElement} pRecoEl
+	 */
+	_loadSample(pKey, pDescEl, pRecoEl)
+	{
+		if (!this._FlowView) return;
+
+		if (pKey === '__hello-world__')
+		{
+			this._FlowView.setFlowData(this.pict.AppData.FlowExample.SampleFlow);
+			pDescEl.innerHTML = 'The full reference flow with all card types, properties panels, and an error branch. Originally designed by hand — set <code>LayoutAlgorithm</code> to <em>Layered</em> to see how the auto-layout compares.';
+			pRecoEl.style.display = 'none';
+			return;
+		}
+
+		let tmpSample = libSampleFlows.getSample(pKey);
+		if (!tmpSample) return;
+
+		// setFlowData expects a fresh _FlowData-shaped object — deep clone so
+		// re-loading the same sample doesn't share mutated node references
+		// with prior loads.
+		this._FlowView.setFlowData(JSON.parse(JSON.stringify(tmpSample.Flow)));
+		pDescEl.textContent = tmpSample.Description;
+		if (tmpSample.Recommended)
+		{
+			pRecoEl.style.display = '';
+			pRecoEl.textContent = `Try: ${tmpSample.Recommended}`;
+		}
+		else
+		{
+			pRecoEl.style.display = 'none';
+		}
+	}
 }
 
 module.exports = FlowExampleMainWorkspaceView;

package/example_applications/simple_cards/source/views/PictView-FlowExample-TopBar.js

@@ -32,7 +32,7 @@ const _ViewConfiguration =
 			cursor: pointer;
 		}
 		.flowexample-topbar-brand:hover {
-			color: #fff;
+			color: var(--theme-color-background-panel, #fff);
 		}
 		.flowexample-topbar-nav {
 			display: flex;
@@ -50,7 +50,7 @@ const _ViewConfiguration =
 		}
 		.flowexample-topbar-nav a:hover {
 			background-color: #34495e;
-			color: #fff;
+			color: var(--theme-color-background-panel, #fff);
 		}
 	`,
 

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "pict-section-flow",
-    "version": "0.0.16",
+    "version": "0.0.18",
     "description": "Pict Section Flow Diagram",
     "main": "source/Pict-Section-Flow.js",
     "scripts": {
@@ -22,7 +22,8 @@
         "chai": "^6.2.2",
         "mocha": "^11.7.5",
         "pict": "^1.0.359",
+        "pict-docuserve": "^0.1.5",
         "pict-router": "^1.0.9",
-        "quackage": "^1.0.65"
+        "quackage": "^1.1.0"
     }
 }

package/source/Pict-Section-Flow.js

@@ -35,6 +35,32 @@ module.exports.PictProviderFlowCSS = require('./providers/PictProvider-Flow-CSS.
 module.exports.PictProviderFlowIcons = require('./providers/PictProvider-Flow-Icons.js');
 module.exports.PictProviderFlowConnectorShapes = require('./providers/PictProvider-Flow-ConnectorShapes.js');
 
+// Layout algorithm descriptors (consumers can register custom algorithms via
+// _LayoutService.registerAlgorithm({ Name, Apply, DefaultParameters, ParameterSchema }))
+module.exports.LayoutAlgorithms =
+{
+	Custom:           require('./providers/layouts/Layout-Custom.js'),
+	Layered:          require('./providers/layouts/Layout-Layered.js'),
+	ForcedFromCenter: require('./providers/layouts/Layout-ForcedFromCenter.js'),
+	Grid:             require('./providers/layouts/Layout-Grid.js'),
+	Circular:         require('./providers/layouts/Layout-Circular.js'),
+	Tabular:          require('./providers/layouts/Layout-Tabular.js'),
+	Columnar:         require('./providers/layouts/Layout-Columnar.js')
+};
+
+// Edge-theme descriptors (consumers can register custom edge themes via
+// _LayoutService.registerEdgeTheme({ Name, GeneratePath, AdjustLayout?, ResolveAttachment?, ... }))
+module.exports.EdgeThemes =
+{
+	Bezier:               require('./providers/edges/Edge-Bezier.js'),
+	Orthogonal:           require('./providers/edges/Edge-Orthogonal.js'),
+	Straight:             require('./providers/edges/Edge-Straight.js'),
+	OrthogonalSnap:       require('./providers/edges/Edge-OrthogonalSnap.js'),
+	Perimeter:            require('./providers/edges/Edge-Perimeter.js'),
+	PerimeterLinear:      require('./providers/edges/Edge-Perimeter-Linear.js'),
+	PerimeterOrthogonal:  require('./providers/edges/Edge-Perimeter-Orthogonal.js')
+};
+
 // FlowCard base class
 module.exports.PictFlowCard = require('./PictFlowCard.js');
 

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

@@ -47,7 +47,7 @@ class PictProviderFlowCSS extends libFableServiceProviderBase
 			--pf-text-placeholder: #95a5a6;
 
 			/* Node */
-			--pf-node-body-fill: #ffffff;
+			--pf-node-body-fill: var(--theme-color-background-panel, #ffffff);
 			--pf-node-body-stroke: #d0d4d8;
 			--pf-node-body-stroke-hover: #b0b8c0;
 			--pf-node-body-stroke-width: 1;
@@ -56,7 +56,7 @@ class PictProviderFlowCSS extends libFableServiceProviderBase
 			--pf-node-shadow-hover: drop-shadow(0 2px 6px 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-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;
@@ -65,35 +65,35 @@ class PictProviderFlowCSS extends libFableServiceProviderBase
 
 			/* 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);
 
 			/* Ports */
 			--pf-port-input-fill: #3498db;
-			--pf-port-output-fill: #2ecc71;
-			--pf-port-stroke: #ffffff;
+			--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;
 
 			/* Port Type Colors */
 			--pf-port-event-in-fill: #3498db;
-			--pf-port-event-out-fill: #2ecc71;
+			--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-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;
@@ -141,7 +141,7 @@ class PictProviderFlowCSS extends libFableServiceProviderBase
 
 			/* Toolbar */
 			--pf-toolbar-bg: #ffffff;
-			--pf-toolbar-border: #e0e0e0;
+			--pf-toolbar-border: var(--theme-color-border-default, #e0e0e0);
 
 			/* Palette Cards */
 			--pf-card-border: #d5d8dc;
@@ -150,7 +150,7 @@ class PictProviderFlowCSS extends libFableServiceProviderBase
 
 			/* Canvas */
 			--pf-canvas-bg: #fafafa;
-			--pf-grid-stroke: #e8e8e8;
+			--pf-grid-stroke: var(--theme-color-border-light, #e8e8e8);
 
 			position: relative;
 			width: 100%;
@@ -396,6 +396,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;
+		}
 		`;
 	}
 
@@ -787,6 +968,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;
+		}
 		`;
 	}
 
@@ -927,6 +1128,9 @@ class PictProviderFlowCSS extends libFableServiceProviderBase
 			user-select: none;
 			-webkit-user-select: none;
 		}
+		.pict-flow-toolbar-btn:focus {
+			outline: none;
+		}
 		.pict-flow-toolbar-btn:hover {
 			background-color: var(--pf-button-hover-bg);
 			border-color: var(--pf-button-hover-border);
@@ -951,6 +1155,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;
@@ -1072,7 +1299,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;
@@ -1387,6 +1614,9 @@ class PictProviderFlowCSS extends libFableServiceProviderBase
 			justify-content: center;
 			transition: background-color 0.15s;
 		}
+		.pict-flow-floating-btn:focus {
+			outline: none;
+		}
 		.pict-flow-floating-btn:hover {
 			background-color: var(--pf-button-hover-bg);
 		}

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

@@ -219,7 +219,7 @@ class PictProviderFlowTheme extends libFableServiceProviderBase
 				.pict-flow-toolbar-btn {
 					background-color: rgba(255,255,255,0.05);
 					border-color: rgba(255,255,255,0.2);
-					color: #ffffff;
+					color: var(--theme-color-background-panel, #ffffff);
 				}
 				.pict-flow-toolbar-btn:hover {
 					background-color: rgba(255,255,255,0.1);
@@ -458,16 +458,16 @@ class PictProviderFlowTheme extends libFableServiceProviderBase
 				.pict-flow-toolbar {
 					background-color: #c0c0c0;
 					border-bottom: 2px solid #808080;
-					border-top: 1px solid #ffffff;
+					border-top: 1px solid var(--theme-color-background-panel, #ffffff);
 				}
 				.pict-flow-toolbar-btn {
 					background-color: #c0c0c0;
 					border: 2px outset #c0c0c0;
 					border-radius: 0;
-					color: #000000;
+					color: var(--theme-color-text-primary, #000000);
 				}
 				.pict-flow-toolbar-btn:hover {
-					background-color: #d0d0d0;
+					background-color: var(--theme-color-border-default, #d0d0d0);
 				}
 				.pict-flow-toolbar-btn:active {
 					border-style: inset;
@@ -544,10 +544,10 @@ class PictProviderFlowTheme extends libFableServiceProviderBase
 					font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
 				}
 				/* Node-type bracket colors — each type gets its own bracket color */
-				.pict-flow-node-start .pict-flow-node-bracket { stroke: #27ae60; }
+				.pict-flow-node-start .pict-flow-node-bracket { stroke: var(--theme-color-status-success, #27ae60); }
 				.pict-flow-node-end .pict-flow-node-bracket { stroke: #1abc9c; }
-				.pict-flow-node-halt .pict-flow-node-bracket { stroke: #e74c3c; }
-				.pict-flow-node-decision .pict-flow-node-bracket { stroke: #f39c12; }
+				.pict-flow-node-halt .pict-flow-node-bracket { stroke: var(--theme-color-status-error, #e74c3c); }
+				.pict-flow-node-decision .pict-flow-node-bracket { stroke: var(--theme-color-status-warning, #f39c12); }
 				.pict-flow-node-default .pict-flow-node-bracket { stroke: #3498db; }
 				.pict-flow-node-action .pict-flow-node-bracket { stroke: #2c3e50; }
 				/* Override variant rules: no fills/strokes on body rects in whiteboard */