pict-section-flow 0.0.2 → 0.0.3

package/.claude/launch.json

@@ -0,0 +1,11 @@
+{
+  "version": "0.0.1",
+  "configurations": [
+    {
+      "name": "simple-cards",
+      "runtimeExecutable": "npx",
+      "runtimeArgs": ["http-server", "example_applications/simple_cards", "-p", "8085", "-c-1"],
+      "port": 8085
+    }
+  ]
+}

package/docs/README.md

@@ -14,6 +14,57 @@ npm install pict-section-flow
 npx quack build
 ```
 
+## Layout Persistence
+
+Saved layouts are persisted to `localStorage` by default, keyed by the flow view identifier (e.g. `pict-flow-layouts-MyFlowDiagram`). Layouts survive page refreshes without any configuration.
+
+### Overriding Storage (e.g. REST API)
+
+The `LayoutProvider` exposes three hookable storage methods that follow the `fCallback(pError, pResult)` convention. Replace them on the instance to use any backend:
+
+```javascript
+// After your flow view is initialized:
+let layoutProvider = myFlowView._LayoutProvider;
+
+// Persist layouts to a server
+layoutProvider.storageWrite = function(pLayouts, fCallback)
+{
+    fetch('/api/my-flow/layouts',
+    {
+        method: 'PUT',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify(pLayouts)
+    })
+    .then(() => fCallback(null))
+    .catch((pError) => fCallback(pError));
+};
+
+// Load layouts from a server
+layoutProvider.storageRead = function(fCallback)
+{
+    fetch('/api/my-flow/layouts')
+    .then((pResponse) => pResponse.json())
+    .then((pLayouts) => fCallback(null, pLayouts))
+    .catch((pError) => fCallback(pError, []));
+};
+
+// Delete all layouts on the server
+layoutProvider.storageDelete = function(fCallback)
+{
+    fetch('/api/my-flow/layouts', { method: 'DELETE' })
+    .then(() => fCallback(null))
+    .catch((pError) => fCallback(pError));
+};
+
+// Load from the new backend now that hooks are set
+layoutProvider.loadPersistedLayouts();
+```
+
+### Configuration Options
+
+- **`StorageKey`** (string) -- Override the localStorage key. Passed via options when instantiating the provider.
+- **`StorageKey: false`** -- Disable localStorage persistence entirely (useful when using only a remote backend).
+
 ## License
 
 MIT

package/example_applications/simple_cards/source/Pict-Application-FlowExample.js

@@ -242,6 +242,83 @@ class FlowExampleApplication extends libPictApplication
 						{ Hash: 'port-logerr-out', Direction: 'output', Side: 'right', Label: 'Pass' }
 					],
 					Data: {}
+				},
+				// ── Halt: premature termination on write error ────
+				{
+					Hash: 'node-halt',
+					Type: 'halt',
+					X: 1870,
+					Y: 380,
+					Width: 140,
+					Height: 80,
+					Title: 'Halt',
+					Ports:
+					[
+						{ Hash: 'port-halt-in', Direction: 'input', Side: 'left', Label: 'In' }
+					],
+					Data: {}
+				},
+				// ── Body Content Examples ──────────────────────────
+				// SVG body: Status Monitor
+				{
+					Hash: 'node-status',
+					Type: 'STAT',
+					X: 50,
+					Y: 530,
+					Width: 200,
+					Height: 110,
+					Title: 'Service Health',
+					Ports:
+					[
+						{ Hash: 'port-stat-in', Direction: 'input', Side: 'left', Label: 'Check' },
+						{ Hash: 'port-stat-ok', Direction: 'output', Side: 'right', Label: 'Healthy' },
+						{ Hash: 'port-stat-warn', Direction: 'output', Side: 'bottom', Label: 'Degraded' }
+					],
+					Data: {}
+				},
+				// HTML body: Data Preview
+				{
+					Hash: 'node-preview',
+					Type: 'PREV',
+					X: 340,
+					Y: 530,
+					Width: 200,
+					Height: 120,
+					Title: 'Inspect Payload',
+					Ports:
+					[
+						{ Hash: 'port-prev-in', Direction: 'input', Side: 'left', Label: 'Data' },
+						{ Hash: 'port-prev-out', Direction: 'output', Side: 'right', Label: 'Pass' }
+					],
+					Data: {}
+				},
+				// Canvas body: Sparkline
+				{
+					Hash: 'node-spark',
+					Type: 'SPKL',
+					X: 630,
+					Y: 530,
+					Width: 220,
+					Height: 110,
+					Title: 'Throughput',
+					Ports:
+					[
+						{ Hash: 'port-spark-in', Direction: 'input', Side: 'left', Label: 'Values' },
+						{ Hash: 'port-spark-out', Direction: 'output', Side: 'right', Label: 'Stats' }
+					],
+					Data: {}
+				},
+				// HTML body (template): Comment
+				{
+					Hash: 'node-comment',
+					Type: 'NOTE',
+					X: 940,
+					Y: 540,
+					Width: 180,
+					Height: 100,
+					Title: 'Note',
+					Ports: [],
+					Data: { NoteText: 'These four cards demonstrate the three BodyContent renderer types: SVG, HTML, and Canvas.' }
 				}
 			],
 			Connections:
@@ -380,6 +457,34 @@ class FlowExampleApplication extends libPictApplication
 					TargetNodeHash: 'node-end',
 					TargetPortHash: 'port-end-in',
 					Data: {}
+				},
+				// Write error → Halt
+				{
+					Hash: 'conn-16',
+					SourceNodeHash: 'node-fwrite',
+					SourcePortHash: 'port-fwrite-err',
+					TargetNodeHash: 'node-halt',
+					TargetPortHash: 'port-halt-in',
+					Data: {}
+				},
+				// ── Body Content example connections ────────────────
+				// Service Health → Inspect Payload
+				{
+					Hash: 'conn-17',
+					SourceNodeHash: 'node-status',
+					SourcePortHash: 'port-stat-ok',
+					TargetNodeHash: 'node-preview',
+					TargetPortHash: 'port-prev-in',
+					Data: {}
+				},
+				// Inspect Payload → Throughput
+				{
+					Hash: 'conn-18',
+					SourceNodeHash: 'node-preview',
+					SourcePortHash: 'port-prev-out',
+					TargetNodeHash: 'node-spark',
+					TargetPortHash: 'port-spark-in',
+					Data: {}
 				}
 			],
 			ViewState:

package/example_applications/simple_cards/source/cards/FlowCard-Comment.js

@@ -0,0 +1,36 @@
+const libPictFlowCard = require('pict-section-flow').PictFlowCard;
+
+class FlowCardComment extends libPictFlowCard
+{
+	constructor(pFable, pOptions, pServiceHash)
+	{
+		super(pFable, Object.assign(
+			{},
+			{
+				Title: 'Comment',
+				Name: 'Annotation',
+				Code: 'NOTE',
+				Description: 'A floating annotation or comment node for documenting flow logic.',
+				Icon: 'NOTE',
+				Tooltip: 'Comment: Add a note to the diagram',
+				Category: 'Documentation',
+				TitleBarColor: '#f39c12',
+				BodyStyle: { fill: '#fef9e7', stroke: '#f39c12' },
+				Width: 180,
+				Height: 100,
+				Inputs: [],
+				Outputs: [],
+				ShowTypeLabel: false,
+			LabelsInFront: false,
+			BodyContent:
+				{
+					ContentType: 'html',
+					Template: '<div style="padding:6px 8px;font-size:10px;line-height:1.5;color:#7d6608;font-style:italic">{~D:Record.Data.NoteText~}</div>'
+				}
+			},
+			pOptions),
+			pServiceHash);
+	}
+}
+
+module.exports = FlowCardComment;

package/example_applications/simple_cards/source/cards/FlowCard-DataPreview.js

@@ -0,0 +1,42 @@
+const libPictFlowCard = require('pict-section-flow').PictFlowCard;
+
+class FlowCardDataPreview extends libPictFlowCard
+{
+	constructor(pFable, pOptions, pServiceHash)
+	{
+		super(pFable, Object.assign(
+			{},
+			{
+				Title: 'Data Preview',
+				Name: 'Inspect Data',
+				Code: 'PREV',
+				Description: 'Displays a preview of the data flowing through this node.',
+				Icon: 'PREV',
+				Tooltip: 'Data Preview: View data summary',
+				Category: 'Debug',
+				TitleBarColor: '#2980b9',
+				BodyStyle: { fill: '#ebf5fb', stroke: '#2980b9' },
+				Width: 200,
+				Height: 120,
+				Inputs:
+				[
+					{ Name: 'Data', Side: 'left', MinimumInputCount: 1, MaximumInputCount: 1 }
+				],
+				Outputs:
+				[
+					{ Name: 'Pass', Side: 'right' }
+				],
+				ShowTypeLabel: false,
+			PortLabelPadding: true,
+			BodyContent:
+				{
+					ContentType: 'html',
+					Template: '<table style="width:100%;border-collapse:collapse;font-size:9px;color:#2c3e50"><tr style="background:#d6eaf8"><td style="padding:3px 5px;font-weight:600">Field</td><td style="padding:3px 5px;font-weight:600">Type</td><td style="padding:3px 5px;font-weight:600">Value</td></tr><tr><td style="padding:2px 5px;border-top:1px solid #d5dbdb">name</td><td style="padding:2px 5px;border-top:1px solid #d5dbdb;color:#8e44ad">str</td><td style="padding:2px 5px;border-top:1px solid #d5dbdb;color:#7f8c8d">&#x22;config&#x22;</td></tr><tr><td style="padding:2px 5px;border-top:1px solid #d5dbdb">count</td><td style="padding:2px 5px;border-top:1px solid #d5dbdb;color:#8e44ad">num</td><td style="padding:2px 5px;border-top:1px solid #d5dbdb;color:#7f8c8d">42</td></tr><tr><td style="padding:2px 5px;border-top:1px solid #d5dbdb">active</td><td style="padding:2px 5px;border-top:1px solid #d5dbdb;color:#8e44ad">bool</td><td style="padding:2px 5px;border-top:1px solid #d5dbdb;color:#27ae60">true</td></tr></table>'
+				}
+			},
+			pOptions),
+			pServiceHash);
+	}
+}
+
+module.exports = FlowCardDataPreview;

package/example_applications/simple_cards/source/cards/FlowCard-Each.js

@@ -11,7 +11,7 @@ class FlowCardEach extends libPictFlowCard
 				Name: 'Loop Iterator',
 				Code: 'EACH',
 				Description: 'Iterates over a collection, executing the body for each item.',
-				Icon: '\uD83D\uDD01',
+				Icon: 'EACH',
 				Tooltip: 'Each: Iterate over items in a collection',
 				Category: 'Control Flow',
 				TitleBarColor: '#8e44ad',

package/example_applications/simple_cards/source/cards/FlowCard-FileRead.js

@@ -11,7 +11,7 @@ class FlowCardFileRead extends libPictFlowCard
 				Name: 'Read File',
 				Code: 'FREAD',
 				Description: 'Reads the contents of a file from the filesystem.',
-				Icon: '\uD83D\uDCC4',
+				Icon: 'FREAD',
 				Tooltip: 'File Read: Read data from a file',
 				Category: 'I/O',
 				TitleBarColor: '#2980b9',

package/example_applications/simple_cards/source/cards/FlowCard-FileWrite.js

@@ -11,7 +11,7 @@ class FlowCardFileWrite extends libPictFlowCard
 				Name: 'Write File',
 				Code: 'FWRITE',
 				Description: 'Writes data to a file on the filesystem.',
-				Icon: '\uD83D\uDCBE',
+				Icon: 'FWRITE',
 				Tooltip: 'File Write: Write data to a file',
 				Category: 'I/O',
 				TitleBarColor: '#27ae60',

package/example_applications/simple_cards/source/cards/FlowCard-GetValue.js

@@ -11,7 +11,7 @@ class FlowCardGetValue extends libPictFlowCard
 				Name: 'Read Value',
 				Code: 'GET',
 				Description: 'Retrieves a named value from the flow context.',
-				Icon: '\uD83D\uDD0D',
+				Icon: 'GET',
 				Tooltip: 'Get Value: Read a value from the context',
 				Category: 'Data',
 				TitleBarColor: '#2c3e50',

package/example_applications/simple_cards/source/cards/FlowCard-IfThenElse.js

@@ -11,7 +11,7 @@ class FlowCardIfThenElse extends libPictFlowCard
 				Name: 'Conditional Branch',
 				Code: 'ITE',
 				Description: 'Evaluates a condition and routes to the Then or Else branch.',
-				Icon: '\u2753',
+				Icon: 'ITE',
 				Tooltip: 'If-Then-Else: Routes flow based on a boolean condition',
 				Category: 'Control Flow',
 				TitleBarColor: '#e67e22',

package/example_applications/simple_cards/source/cards/FlowCard-LogValues.js

@@ -11,7 +11,7 @@ class FlowCardLogValues extends libPictFlowCard
 				Name: 'Log to Console',
 				Code: 'LOG',
 				Description: 'Logs input values to the console or log output.',
-				Icon: '\uD83D\uDCDD',
+				Icon: 'LOG',
 				Tooltip: 'Log Values: Output values to the log',
 				Category: 'Debug',
 				TitleBarColor: '#7f8c8d',

package/example_applications/simple_cards/source/cards/FlowCard-SetValue.js

@@ -11,7 +11,7 @@ class FlowCardSetValue extends libPictFlowCard
 				Name: 'Assign Value',
 				Code: 'SET',
 				Description: 'Sets a named value in the flow context.',
-				Icon: '\u270F\uFE0F',
+				Icon: 'SET',
 				Tooltip: 'Set Value: Assign a value in the context',
 				Category: 'Data',
 				TitleBarColor: '#16a085',

package/example_applications/simple_cards/source/cards/FlowCard-Sparkline.js

@@ -0,0 +1,98 @@
+const libPictFlowCard = require('pict-section-flow').PictFlowCard;
+
+class FlowCardSparkline extends libPictFlowCard
+{
+	constructor(pFable, pOptions, pServiceHash)
+	{
+		super(pFable, Object.assign(
+			{},
+			{
+				Title: 'Sparkline',
+				Name: 'Metric Chart',
+				Code: 'SPKL',
+				Description: 'Renders a live sparkline visualization of numeric throughput data.',
+				Icon: 'SPKL',
+				Tooltip: 'Sparkline: Visualize numeric throughput',
+				Category: 'Visualization',
+				TitleBarColor: '#c0392b',
+				BodyStyle: { fill: '#fdedec', stroke: '#c0392b' },
+				Width: 220,
+				Height: 110,
+				Inputs:
+				[
+					{ Name: 'Values', Side: 'left', MinimumInputCount: 1, MaximumInputCount: 1 }
+				],
+				Outputs:
+				[
+					{ Name: 'Stats', Side: 'right' }
+				],
+				ShowTypeLabel: false,
+			PortLabelsVertical: true,
+			PortLabelPadding: true,
+			LabelsInFront: true,
+			BodyContent:
+				{
+					ContentType: 'canvas',
+					RenderCallback: function (pCanvas, pNodeData, pNodeTypeConfig, pBounds)
+					{
+						let tmpCtx = pCanvas.getContext('2d');
+						if (!tmpCtx) return;
+
+						let tmpW = pCanvas.width;
+						let tmpH = pCanvas.height;
+
+						// Sample data points (simulated throughput)
+						let tmpData = [12, 19, 8, 25, 15, 30, 22, 18, 35, 28, 14, 32, 20, 26, 10, 24, 33, 17, 29, 21];
+						let tmpMax = Math.max.apply(null, tmpData);
+						let tmpMin = Math.min.apply(null, tmpData);
+						let tmpRange = tmpMax - tmpMin || 1;
+						let tmpPadding = 6;
+						let tmpChartW = tmpW - (tmpPadding * 2);
+						let tmpChartH = tmpH - (tmpPadding * 2);
+						let tmpStep = tmpChartW / (tmpData.length - 1);
+
+						// Draw filled area
+						tmpCtx.beginPath();
+						tmpCtx.moveTo(tmpPadding, tmpH - tmpPadding);
+						for (let i = 0; i < tmpData.length; i++)
+						{
+							let tmpX = tmpPadding + (i * tmpStep);
+							let tmpY = tmpPadding + tmpChartH - ((tmpData[i] - tmpMin) / tmpRange) * tmpChartH;
+							tmpCtx.lineTo(tmpX, tmpY);
+						}
+						tmpCtx.lineTo(tmpPadding + tmpChartW, tmpH - tmpPadding);
+						tmpCtx.closePath();
+						tmpCtx.fillStyle = 'rgba(192, 57, 43, 0.12)';
+						tmpCtx.fill();
+
+						// Draw line
+						tmpCtx.beginPath();
+						for (let i = 0; i < tmpData.length; i++)
+						{
+							let tmpX = tmpPadding + (i * tmpStep);
+							let tmpY = tmpPadding + tmpChartH - ((tmpData[i] - tmpMin) / tmpRange) * tmpChartH;
+							if (i === 0) tmpCtx.moveTo(tmpX, tmpY);
+							else tmpCtx.lineTo(tmpX, tmpY);
+						}
+						tmpCtx.strokeStyle = '#c0392b';
+						tmpCtx.lineWidth = 1.5;
+						tmpCtx.lineJoin = 'round';
+						tmpCtx.lineCap = 'round';
+						tmpCtx.stroke();
+
+						// Draw end dot
+						let tmpLastX = tmpPadding + ((tmpData.length - 1) * tmpStep);
+						let tmpLastY = tmpPadding + tmpChartH - ((tmpData[tmpData.length - 1] - tmpMin) / tmpRange) * tmpChartH;
+						tmpCtx.beginPath();
+						tmpCtx.arc(tmpLastX, tmpLastY, 3, 0, Math.PI * 2);
+						tmpCtx.fillStyle = '#c0392b';
+						tmpCtx.fill();
+					}
+				}
+			},
+			pOptions),
+			pServiceHash);
+	}
+}
+
+module.exports = FlowCardSparkline;

package/example_applications/simple_cards/source/cards/FlowCard-StatusMonitor.js

@@ -0,0 +1,44 @@
+const libPictFlowCard = require('pict-section-flow').PictFlowCard;
+
+class FlowCardStatusMonitor extends libPictFlowCard
+{
+	constructor(pFable, pOptions, pServiceHash)
+	{
+		super(pFable, Object.assign(
+			{},
+			{
+				Title: 'Status Monitor',
+				Name: 'Health Check',
+				Code: 'STAT',
+				Description: 'Monitors the health status of upstream services and reports availability.',
+				Icon: 'STAT',
+				Tooltip: 'Status Monitor: Check service health',
+				Category: 'Monitoring',
+				TitleBarColor: '#27ae60',
+				BodyStyle: { fill: '#eafaf1', stroke: '#27ae60' },
+				Width: 200,
+				Height: 110,
+				Inputs:
+				[
+					{ Name: 'Check', Side: 'left', MinimumInputCount: 1, MaximumInputCount: -1 }
+				],
+				Outputs:
+				[
+					{ Name: 'Healthy', Side: 'right' },
+					{ Name: 'Degraded', Side: 'bottom' }
+				],
+				ShowTypeLabel: false,
+			PortLabelsOnHover: true,
+			LabelsInFront: false,
+			BodyContent:
+				{
+					ContentType: 'svg',
+					Template: '<circle cx="30" cy="28" r="6" fill="#27ae60" opacity="0.9"/><text x="42" y="32" font-size="9" fill="#2c3e50">API</text><circle cx="100" cy="28" r="6" fill="#27ae60" opacity="0.9"/><text x="112" y="32" font-size="9" fill="#2c3e50">DB</text><circle cx="30" cy="54" r="6" fill="#f39c12" opacity="0.9"/><text x="42" y="58" font-size="9" fill="#2c3e50">Cache</text><circle cx="100" cy="54" r="6" fill="#27ae60" opacity="0.9"/><text x="112" y="58" font-size="9" fill="#2c3e50">Queue</text>'
+				}
+			},
+			pOptions),
+			pServiceHash);
+	}
+}
+
+module.exports = FlowCardStatusMonitor;

package/example_applications/simple_cards/source/cards/FlowCard-Switch.js

@@ -11,7 +11,7 @@ class FlowCardSwitch extends libPictFlowCard
 				Name: 'Multi-way Branch',
 				Code: 'SW',
 				Description: 'Routes flow to one of multiple cases based on a value.',
-				Icon: '\uD83D\uDD00',
+				Icon: 'SW',
 				Tooltip: 'Switch: Multi-way branch on a value',
 				Category: 'Control Flow',
 				TitleBarColor: '#d35400',

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

@@ -10,6 +10,10 @@ const libFlowCardFileWrite = require('../cards/FlowCard-FileWrite.js');
 const libFlowCardLogValues = require('../cards/FlowCard-LogValues.js');
 const libFlowCardSetValue = require('../cards/FlowCard-SetValue.js');
 const libFlowCardGetValue = require('../cards/FlowCard-GetValue.js');
+const libFlowCardStatusMonitor = require('../cards/FlowCard-StatusMonitor.js');
+const libFlowCardDataPreview = require('../cards/FlowCard-DataPreview.js');
+const libFlowCardSparkline = require('../cards/FlowCard-Sparkline.js');
+const libFlowCardComment = require('../cards/FlowCard-Comment.js');
 
 const _ViewConfiguration =
 {
@@ -219,7 +223,11 @@ class FlowExampleMainWorkspaceView extends libPictView
 			libFlowCardFileWrite,
 			libFlowCardLogValues,
 			libFlowCardSetValue,
-			libFlowCardGetValue
+			libFlowCardGetValue,
+			libFlowCardStatusMonitor,
+			libFlowCardDataPreview,
+			libFlowCardSparkline,
+			libFlowCardComment
 		];
 
 		let tmpNodeTypes = {};

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "pict-section-flow",
-    "version": "0.0.2",
+    "version": "0.0.3",
     "description": "Pict Section Flow Diagram",
     "main": "source/Pict-Section-Flow.js",
     "scripts": {
@@ -17,6 +17,6 @@
     },
     "devDependencies": {
         "pict": "^1.0.354",
-        "quackage": "^1.0.58"
+        "quackage": "^1.0.59"
     }
 }

package/source/Pict-Section-Flow.js

@@ -6,8 +6,9 @@ module.exports = require('./views/PictView-Flow.js');
 // Node rendering view
 module.exports.PictViewFlowNode = require('./views/PictView-Flow-Node.js');
 
-// Toolbar view
+// Toolbar views
 module.exports.PictViewFlowToolbar = require('./views/PictView-Flow-Toolbar.js');
+module.exports.PictViewFlowFloatingToolbar = require('./views/PictView-Flow-FloatingToolbar.js');
 
 // Services
 module.exports.PictServiceFlowInteractionManager = require('./services/PictService-Flow-InteractionManager.js');
@@ -15,6 +16,9 @@ module.exports.PictServiceFlowConnectionRenderer = require('./services/PictServi
 module.exports.PictServiceFlowTether = require('./services/PictService-Flow-Tether.js');
 module.exports.PictServiceFlowLayout = require('./services/PictService-Flow-Layout.js');
 module.exports.PictServiceFlowPathGenerator = require('./services/PictService-Flow-PathGenerator.js');
+module.exports.PictServiceFlowViewportManager = require('./services/PictService-Flow-ViewportManager.js');
+module.exports.PictServiceFlowSelectionManager = require('./services/PictService-Flow-SelectionManager.js');
+module.exports.PictServiceFlowPanelManager = require('./services/PictService-Flow-PanelManager.js');
 
 // Providers
 module.exports.PictProviderFlowNodeTypes = require('./providers/PictProvider-Flow-NodeTypes.js');
@@ -23,6 +27,9 @@ module.exports.PictProviderFlowLayouts = require('./providers/PictProvider-Flow-
 module.exports.PictProviderFlowSVGHelpers = require('./providers/PictProvider-Flow-SVGHelpers.js');
 module.exports.PictProviderFlowGeometry = require('./providers/PictProvider-Flow-Geometry.js');
 module.exports.PictProviderFlowPanelChrome = require('./providers/PictProvider-Flow-PanelChrome.js');
+module.exports.PictProviderFlowCSS = require('./providers/PictProvider-Flow-CSS.js');
+module.exports.PictProviderFlowIcons = require('./providers/PictProvider-Flow-Icons.js');
+module.exports.PictProviderFlowConnectorShapes = require('./providers/PictProvider-Flow-ConnectorShapes.js');
 
 // FlowCard base class
 module.exports.PictFlowCard = require('./PictFlowCard.js');

package/source/PictFlowCard.js

@@ -31,6 +31,18 @@ const libFableServiceProviderBase = require('fable-serviceproviderbase');
  *       - DefaultHeight  (number)  - Panel height (default 200)
  *       - Title          (string)  - Panel title bar text
  *       - Configuration  (object)  - Panel-type-specific configuration
+ *   - BodyContent     (object, optional) - Custom content rendered in the node body area
+ *       - ContentType    (string)  - 'svg', 'html', or 'canvas'
+ *       - Template       (string)  - Pict template string (html/svg only)
+ *       - TemplateHash   (string)  - Registered template hash (takes precedence over Template)
+ *       - Templates      (array)   - Template definitions to register [{Hash, Template}]
+ *       - RenderCallback (function)- Imperative render callback (required for canvas)
+ *       - Padding        (number)  - Inner padding in pixels (default 2)
+ *   - ShowTypeLabel    (boolean, default true)  - Whether to show the type label/code badge on hover
+ *   - PortLabelsOnHover (boolean, default false) - When true, port labels only appear on hover
+ *   - PortLabelsVertical (boolean, default false) - When true, port labels render vertically
+ *   - PortLabelPadding  (boolean, default false) - When true, port labels have extra padding to avoid overlapping body content
+ *   - LabelsInFront     (boolean, default true)  - When true, labels render in front of body content; when false, behind
  *
  * Usage:
  *   class MyCard extends PictFlowCard {
@@ -82,6 +94,18 @@ class PictFlowCard extends libFableServiceProviderBase
 		this.cardPropertiesPanel = (tmpOptions.PropertiesPanel && typeof tmpOptions.PropertiesPanel === 'object')
 			? tmpOptions.PropertiesPanel
 			: null;
+
+		// --- Body content configuration ---
+		this.cardBodyContent = (tmpOptions.BodyContent && typeof tmpOptions.BodyContent === 'object')
+			? tmpOptions.BodyContent
+			: null;
+
+		// --- Label display booleans ---
+		this.cardShowTypeLabel = (typeof tmpOptions.ShowTypeLabel === 'boolean') ? tmpOptions.ShowTypeLabel : true;
+		this.cardPortLabelsOnHover = (typeof tmpOptions.PortLabelsOnHover === 'boolean') ? tmpOptions.PortLabelsOnHover : false;
+		this.cardPortLabelsVertical = (typeof tmpOptions.PortLabelsVertical === 'boolean') ? tmpOptions.PortLabelsVertical : false;
+		this.cardPortLabelPadding = (typeof tmpOptions.PortLabelPadding === 'boolean') ? tmpOptions.PortLabelPadding : false;
+		this.cardLabelsInFront = (typeof tmpOptions.LabelsInFront === 'boolean') ? tmpOptions.LabelsInFront : true;
 	}
 
 	/**
@@ -155,12 +179,30 @@ class PictFlowCard extends libFableServiceProviderBase
 			}
 		};
 
+		// Include label display booleans
+		tmpResult.ShowTypeLabel = this.cardShowTypeLabel;
+		tmpResult.PortLabelsOnHover = this.cardPortLabelsOnHover;
+		tmpResult.PortLabelsVertical = this.cardPortLabelsVertical;
+		tmpResult.PortLabelPadding = this.cardPortLabelPadding;
+		tmpResult.LabelsInFront = this.cardLabelsInFront;
+
 		// Include properties panel config if defined
 		if (this.cardPropertiesPanel)
 		{
 			tmpResult.PropertiesPanel = JSON.parse(JSON.stringify(this.cardPropertiesPanel));
 		}
 
+		// Include body content config if defined
+		if (this.cardBodyContent)
+		{
+			tmpResult.BodyContent = JSON.parse(JSON.stringify(this.cardBodyContent));
+			// RenderCallback cannot be serialized — preserve the original function reference
+			if (typeof this.options.BodyContent.RenderCallback === 'function')
+			{
+				tmpResult.BodyContent.RenderCallback = this.options.BodyContent.RenderCallback;
+			}
+		}
+
 		return tmpResult;
 	}
 
@@ -203,5 +245,11 @@ module.exports.default_configuration =
 	Width: 180,
 	Height: 80,
 	Category: 'General',
-	PropertiesPanel: null
+	PropertiesPanel: null,
+	BodyContent: null,
+	ShowTypeLabel: true,
+	PortLabelsOnHover: false,
+	PortLabelsVertical: false,
+	PortLabelPadding: false,
+	LabelsInFront: true
 };