pict-section-flow 1.3.0 → 2.0.0

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

@@ -1,39 +0,0 @@
-const libPictFlowCard = require('pict-section-flow').PictFlowCard;
-const libCardHelp = require('../card-help-content');
-
-class FlowCardSwitch extends libPictFlowCard
-{
-	constructor(pFable, pOptions, pServiceHash)
-	{
-		super(pFable, Object.assign(
-			{},
-			{
-				Title: 'Switch',
-				Help: libCardHelp['SW'] || false,
-				Name: 'Multi-way Branch',
-				Code: 'SW',
-				Description: 'Routes flow to one of multiple cases based on a value.',
-				Icon: 'SW',
-				Tooltip: 'Switch: Multi-way branch on a value',
-				Category: 'Control Flow',
-				TitleBarColor: '#d35400',
-				BodyStyle: { fill: '#fbeee6', stroke: '#d35400' },
-				Width: 200,
-				Height: 120,
-				Inputs:
-				[
-					{ Name: 'In', Side: 'left', MinimumInputCount: 1, MaximumInputCount: 1 }
-				],
-				Outputs:
-				[
-					{ Name: 'Case A', Side: 'right' },
-					{ Name: 'Case B', Side: 'right' },
-					{ Name: 'Default', Side: 'bottom' }
-				]
-			},
-			pOptions),
-			pServiceHash);
-	}
-}
-
-module.exports = FlowCardSwitch;

package/example_applications/simple_cards/source/providers/PictRouter-FlowExample-Configuration.json

@@ -1,22 +0,0 @@
-{
-	"ProviderIdentifier": "Pict-Router",
-
-	"AutoInitialize": true,
-	"AutoInitializeOrdinal": 0,
-
-	"Routes":
-	[
-		{
-			"path": "/Home",
-			"template": "{~LV:Pict.PictApplication.showView(`FlowExample-MainWorkspace`)~}"
-		},
-		{
-			"path": "/About",
-			"template": "{~LV:Pict.PictApplication.showView(`FlowExample-About`)~}"
-		},
-		{
-			"path": "/Documentation",
-			"template": "{~LV:Pict.PictApplication.showView(`FlowExample-Documentation`)~}"
-		}
-	]
-}

package/example_applications/simple_cards/source/sample-flows.js

@@ -1,410 +0,0 @@
-/**
- * sample-flows.js
- *
- * Showcase graphs for trying out the seven layout algorithms in
- * pict-section-flow. Each sample is a small flow definition with
- * `Name`, `Description`, `Recommended` (layout that shines), and
- * `Flow` (a `_FlowData`-shaped object).
- *
- * Use the dropdown above the flow diagram to load a sample, then
- * open the Algorithm popup to compare layouts. The descriptions
- * call out which layouts shine and which struggle on each shape.
- *
- * All nodes use the 'default' card type with simple In/Out ports —
- * the focus is on graph topology, not on the cards themselves.
- */
-
-// Ultravisor-flavored category palette — same families as
-// Ultravisor-CardConfigGenerator's _CategoryColors so the per-node
-// hint/border colors here read the same way they do in real flows.
-const _CATEGORY_COLORS =
-{
-	'core':     { TitleBarColor: '#ab47bc', BodyStyle: { fill: '#f3e5f5', stroke: '#ab47bc' } },
-	'flow':     { TitleBarColor: '#78909c', BodyStyle: { fill: '#eceff1', stroke: '#78909c' } },
-	'data':     { TitleBarColor: '#ff9800', BodyStyle: { fill: '#fff3e0', stroke: '#ff9800' } },
-	'file-io':  { TitleBarColor: '#42a5f5', BodyStyle: { fill: '#eaf2f8', stroke: '#42a5f5' } },
-	'rest':     { TitleBarColor: '#29b6f6', BodyStyle: { fill: '#e1f5fe', stroke: '#29b6f6' } },
-	'meadow':   { TitleBarColor: '#66bb6a', BodyStyle: { fill: '#e8f5e9', stroke: '#66bb6a' } },
-	'pipeline': { TitleBarColor: '#ec407a', BodyStyle: { fill: '#fce4ec', stroke: '#ec407a' } },
-	'llm':      { TitleBarColor: '#26a69a', BodyStyle: { fill: '#e0f7fa', stroke: '#26a69a' } },
-	'ext':      { TitleBarColor: '#9c6afe', BodyStyle: { fill: '#ede9fe', stroke: '#9c6afe' } }
-};
-
-function _node(pHash, pTitle, pX, pY, pCategory)
-{
-	let tmpNode =
-	{
-		Hash: pHash,
-		Type: 'default',
-		X: pX,
-		Y: pY,
-		Width: 140,
-		Height: 70,
-		Title: pTitle,
-		Ports:
-		[
-			{ Hash: `${pHash}-in`,  Direction: 'input',  Side: 'left',  Label: 'In' },
-			{ Hash: `${pHash}-out`, Direction: 'output', Side: 'right', Label: 'Out' }
-		],
-		Data: {}
-	};
-	if (pCategory && _CATEGORY_COLORS[pCategory])
-	{
-		let tmpColors = _CATEGORY_COLORS[pCategory];
-		tmpNode.TitleBarColor = tmpColors.TitleBarColor;
-		tmpNode.BodyStyle = tmpColors.BodyStyle;
-	}
-	return tmpNode;
-}
-
-function _edge(pSourceHash, pTargetHash, pSuffix)
-{
-	let tmpHash = `c-${pSourceHash}-${pTargetHash}${pSuffix ? `-${pSuffix}` : ''}`;
-	return {
-		Hash: tmpHash,
-		SourceNodeHash: pSourceHash,
-		SourcePortHash: `${pSourceHash}-out`,
-		TargetNodeHash: pTargetHash,
-		TargetPortHash: `${pTargetHash}-in`,
-		Data: {}
-	};
-}
-
-function _emptyViewState()
-{
-	return { PanX: 0, PanY: 0, Zoom: 1, SelectedNodeHash: null, SelectedConnectionHash: null, SelectedTetherHash: null };
-}
-
-function _flow(pNodes, pConnections, pAlgorithm, pParameters, pAutoApply)
-{
-	return {
-		Nodes: pNodes,
-		Connections: pConnections || [],
-		OpenPanels: [],
-		SavedLayouts: [],
-		ViewState: _emptyViewState(),
-		LayoutAlgorithm: pAlgorithm || 'Custom',
-		LayoutParameters: pParameters || {},
-		LayoutAutoApply: !!pAutoApply
-	};
-}
-
-// ── 1. Linear Chain ────────────────────────────────────────────────────
-//   A → B → C → D → E → F
-function _linearChain()
-{
-	let tmpCount = 6;
-	let tmpNodes = [];
-	let tmpEdges = [];
-	for (let i = 0; i < tmpCount; i++)
-	{
-		let tmpHash = `lc-${String.fromCharCode(65 + i)}`;
-		tmpNodes.push(_node(tmpHash, String.fromCharCode(65 + i), 100, 100 + i * 110));
-		if (i > 0)
-		{
-			let tmpPrev = `lc-${String.fromCharCode(65 + i - 1)}`;
-			tmpEdges.push(_edge(tmpPrev, tmpHash));
-		}
-	}
-	return _flow(tmpNodes, tmpEdges);
-}
-
-// ── 2. Binary Tree (depth 3) ───────────────────────────────────────────
-//   Root → 2 children → 4 grandchildren = 7 nodes
-function _binaryTree()
-{
-	let tmpNodes = [];
-	let tmpEdges = [];
-	let tmpHashes = ['root', 'l', 'r', 'll', 'lr', 'rl', 'rr'];
-	let tmpLabels = ['Root', 'L', 'R', 'LL', 'LR', 'RL', 'RR'];
-	let tmpPositions = [
-		[400, 100],         // root
-		[250, 240], [550, 240],   // l, r
-		[150, 380], [350, 380], [450, 380], [650, 380]  // ll lr rl rr
-	];
-	for (let i = 0; i < tmpHashes.length; i++)
-	{
-		tmpNodes.push(_node(`bt-${tmpHashes[i]}`, tmpLabels[i], tmpPositions[i][0], tmpPositions[i][1]));
-	}
-	tmpEdges.push(_edge('bt-root', 'bt-l'));
-	tmpEdges.push(_edge('bt-root', 'bt-r'));
-	tmpEdges.push(_edge('bt-l', 'bt-ll'));
-	tmpEdges.push(_edge('bt-l', 'bt-lr'));
-	tmpEdges.push(_edge('bt-r', 'bt-rl'));
-	tmpEdges.push(_edge('bt-r', 'bt-rr'));
-	return _flow(tmpNodes, tmpEdges);
-}
-
-// ── 3. Star Hub (1 hub + 8 spokes) ─────────────────────────────────────
-// Each spoke gets a distinct Ultravisor-style category color so the
-// hint beziers (which are colored by the *other end's* identity) fan
-// out in 8 different colors when you hover the hub's "Out" badge.
-function _starHub()
-{
-	let tmpNodes = [];
-	let tmpEdges = [];
-	let tmpSpokeKinds =
-	[
-		{ key: 'rest',     label: 'REST API'   },
-		{ key: 'meadow',   label: 'Meadow'     },
-		{ key: 'data',     label: 'Transform'  },
-		{ key: 'file-io',  label: 'File I/O'   },
-		{ key: 'pipeline', label: 'Pipeline'   },
-		{ key: 'llm',      label: 'LLM'        },
-		{ key: 'ext',      label: 'Extension'  },
-		{ key: 'flow',     label: 'Control'    }
-	];
-	tmpNodes.push(_node('star-hub', 'Hub', 400, 350, 'core'));
-	for (let i = 0; i < tmpSpokeKinds.length; i++)
-	{
-		let tmpAngle = (i / tmpSpokeKinds.length) * 2 * Math.PI;
-		let tmpX = 400 + Math.round(Math.cos(tmpAngle) * 240);
-		let tmpY = 350 + Math.round(Math.sin(tmpAngle) * 240);
-		let tmpHash = `star-s${i}`;
-		tmpNodes.push(_node(tmpHash, tmpSpokeKinds[i].label, tmpX, tmpY, tmpSpokeKinds[i].key));
-		tmpEdges.push(_edge('star-hub', tmpHash));
-	}
-	return _flow(tmpNodes, tmpEdges);
-}
-
-// ── 4. Diamond Lattice ─────────────────────────────────────────────────
-//   Start → {A,B,C} → {D,E,F} (cross-edges) → Merge → End. Nine nodes.
-function _diamondLattice()
-{
-	let tmpNodes =
-	[
-		_node('dl-start',  'Start',  100, 200),
-		_node('dl-a',      'A',      300, 100),
-		_node('dl-b',      'B',      300, 250),
-		_node('dl-c',      'C',      300, 400),
-		_node('dl-d',      'D',      550, 100),
-		_node('dl-e',      'E',      550, 250),
-		_node('dl-f',      'F',      550, 400),
-		_node('dl-merge',  'Merge',  800, 250),
-		_node('dl-end',    'End',    1050, 250)
-	];
-	let tmpEdges =
-	[
-		_edge('dl-start', 'dl-a'),
-		_edge('dl-start', 'dl-b'),
-		_edge('dl-start', 'dl-c'),
-		_edge('dl-a', 'dl-d'),
-		_edge('dl-a', 'dl-e'), // cross
-		_edge('dl-b', 'dl-e'),
-		_edge('dl-c', 'dl-e'), // cross
-		_edge('dl-c', 'dl-f'),
-		_edge('dl-d', 'dl-merge'),
-		_edge('dl-e', 'dl-merge'),
-		_edge('dl-f', 'dl-merge'),
-		_edge('dl-merge', 'dl-end')
-	];
-	return _flow(tmpNodes, tmpEdges);
-}
-
-// ── 5. Disconnected Components (3 chains × 4 nodes) ────────────────────
-function _disconnectedComponents()
-{
-	let tmpNodes = [];
-	let tmpEdges = [];
-	let tmpClusters = ['α', 'β', 'γ'];
-	for (let c = 0; c < tmpClusters.length; c++)
-	{
-		for (let i = 0; i < 4; i++)
-		{
-			let tmpHash = `dc-${tmpClusters[c]}-${i}`;
-			tmpNodes.push(_node(tmpHash, `${tmpClusters[c]}${i}`, 150 + c * 350, 100 + i * 110));
-			if (i > 0)
-			{
-				let tmpPrev = `dc-${tmpClusters[c]}-${i - 1}`;
-				tmpEdges.push(_edge(tmpPrev, tmpHash));
-			}
-		}
-	}
-	return _flow(tmpNodes, tmpEdges);
-}
-
-// ── 6. Dense Cluster (7 nodes, ~15 edges, near-complete) ───────────────
-function _denseCluster()
-{
-	let tmpNodes = [];
-	let tmpEdges = [];
-	let tmpCount = 7;
-	for (let i = 0; i < tmpCount; i++)
-	{
-		let tmpAngle = (i / tmpCount) * 2 * Math.PI;
-		let tmpX = 400 + Math.round(Math.cos(tmpAngle) * 200);
-		let tmpY = 300 + Math.round(Math.sin(tmpAngle) * 200);
-		tmpNodes.push(_node(`dn-${i}`, `N${i}`, tmpX, tmpY));
-	}
-	// Connect each node to ~3 others (skip-1 and skip-2 patterns) — yields ~14 edges
-	for (let i = 0; i < tmpCount; i++)
-	{
-		tmpEdges.push(_edge(`dn-${i}`, `dn-${(i + 1) % tmpCount}`));
-		tmpEdges.push(_edge(`dn-${i}`, `dn-${(i + 2) % tmpCount}`));
-	}
-	return _flow(tmpNodes, tmpEdges);
-}
-
-// ── 7. Cyclic Network (8 nodes, ring + chord) ──────────────────────────
-function _cyclicNetwork()
-{
-	let tmpNodes = [];
-	let tmpEdges = [];
-	let tmpCount = 8;
-	for (let i = 0; i < tmpCount; i++)
-	{
-		let tmpAngle = (i / tmpCount) * 2 * Math.PI;
-		let tmpX = 400 + Math.round(Math.cos(tmpAngle) * 220);
-		let tmpY = 300 + Math.round(Math.sin(tmpAngle) * 220);
-		tmpNodes.push(_node(`cy-${i}`, `Z${i}`, tmpX, tmpY));
-	}
-	// Ring of forward edges 0→1→2→…→7→0 (back-edge creates the cycle)
-	for (let i = 0; i < tmpCount; i++)
-	{
-		tmpEdges.push(_edge(`cy-${i}`, `cy-${(i + 1) % tmpCount}`));
-	}
-	// One chord across the ring
-	tmpEdges.push(_edge('cy-0', 'cy-4'));
-	return _flow(tmpNodes, tmpEdges);
-}
-
-// ── 8. Mesh 4×4 (16 nodes, 4-neighbor edges) ───────────────────────────
-function _mesh4x4()
-{
-	let tmpNodes = [];
-	let tmpEdges = [];
-	let tmpRows = 4, tmpCols = 4;
-	for (let r = 0; r < tmpRows; r++)
-	{
-		for (let c = 0; c < tmpCols; c++)
-		{
-			let tmpHash = `mesh-${r}-${c}`;
-			tmpNodes.push(_node(tmpHash, `(${r},${c})`, 150 + c * 180, 100 + r * 130));
-		}
-	}
-	for (let r = 0; r < tmpRows; r++)
-	{
-		for (let c = 0; c < tmpCols; c++)
-		{
-			if (c < tmpCols - 1) tmpEdges.push(_edge(`mesh-${r}-${c}`, `mesh-${r}-${c + 1}`));
-			if (r < tmpRows - 1) tmpEdges.push(_edge(`mesh-${r}-${c}`, `mesh-${r + 1}-${c}`));
-		}
-	}
-	return _flow(tmpNodes, tmpEdges);
-}
-
-// ── 9. Floating Widgets (12 isolated nodes, no edges) ──────────────────
-function _floatingWidgets()
-{
-	let tmpNodes = [];
-	let tmpLabels = ['Chart', 'Table', 'KPI', 'Gauge', 'Sparkline', 'Heatmap', 'Pie', 'Bar', 'Map', 'Timeline', 'Note', 'Image'];
-	for (let i = 0; i < tmpLabels.length; i++)
-	{
-		let tmpRow = Math.floor(i / 4);
-		let tmpCol = i % 4;
-		tmpNodes.push(_node(`fw-${i}`, tmpLabels[i], 150 + tmpCol * 180, 100 + tmpRow * 130));
-	}
-	return _flow(tmpNodes, []);
-}
-
-// ── 10. Wide Fan-Out (1 root → 12 leaves) ──────────────────────────────
-function _wideFanOut()
-{
-	let tmpNodes = [];
-	let tmpEdges = [];
-	tmpNodes.push(_node('fan-root', 'Source', 100, 400));
-	for (let i = 0; i < 12; i++)
-	{
-		let tmpHash = `fan-leaf-${i}`;
-		tmpNodes.push(_node(tmpHash, `L${i}`, 400 + (i % 4) * 160, 100 + Math.floor(i / 4) * 130));
-		tmpEdges.push(_edge('fan-root', tmpHash));
-	}
-	return _flow(tmpNodes, tmpEdges);
-}
-
-const SAMPLE_FLOWS =
-{
-	'linear-chain':
-	{
-		Name: 'Linear Chain',
-		Description: 'A → B → C → D → E → F. Six nodes, single path. Layered (left-to-right) and Tabular (top-to-bottom) read like a story; Circular wastes a ring on what should be a line; ForcedFromCenter is overkill.',
-		Recommended: 'Layered',
-		Flow: _linearChain()
-	},
-	'binary-tree':
-	{
-		Name: 'Binary Tree (depth 3)',
-		Description: 'Root branches into 2 children, each into 2 grandchildren. Layered shows the hierarchy clearly (depth-by-depth); Circular puts the root at center with leaves on outer ring; Grid loses the parent-child relationships entirely.',
-		Recommended: 'Layered',
-		Flow: _binaryTree()
-	},
-	'star-hub':
-	{
-		Name: 'Star Hub (8 spokes)',
-		Description: 'One hub connected to 8 leaves. Circular shines (root at center, spokes evenly around); Layered crowds all 8 spokes in a single second column; ForcedFromCenter does an OK job; Grid ignores the topology completely.',
-		Recommended: 'Circular',
-		Flow: _starHub()
-	},
-	'diamond-lattice':
-	{
-		Name: 'Diamond Lattice (DAG)',
-		Description: 'Start fans out to 3 paths through 6 middle nodes (with cross-edges) and merges at End. Layered is in its element — the parallel depth structure becomes obvious. Tabular flattens it; Circular loses direction.',
-		Recommended: 'Layered',
-		Flow: _diamondLattice()
-	},
-	'disconnected-components':
-	{
-		Name: 'Disconnected Components',
-		Description: 'Three independent chains of 4 nodes each, no cross-edges. Grid and Columnar give each chain equal real estate. Layered piles the 3 roots in one column. ForcedFromCenter clusters them naturally but with no separation guarantee.',
-		Recommended: 'Columnar',
-		Flow: _disconnectedComponents()
-	},
-	'dense-cluster':
-	{
-		Name: 'Dense Cluster (near-complete)',
-		Description: 'Seven nodes with ~14 edges (each node connects to its two nearest neighbors in both directions). ForcedFromCenter shines — spring forces find a clean radial layout. Layered tries to topo-sort it and produces a wide-and-shallow mess. Circular is also pretty good here.',
-		Recommended: 'ForcedFromCenter',
-		Flow: _denseCluster()
-	},
-	'cyclic-network':
-	{
-		Name: 'Cyclic Network',
-		Description: 'Eight nodes in a ring plus one chord. The cycle defeats Kahn topological sort — Layered falls back to a "remaining nodes" pass (correct but ugly). Circular renders the ring cleanly. ForcedFromCenter finds a relaxed equilibrium.',
-		Recommended: 'Circular',
-		Flow: _cyclicNetwork()
-	},
-	'mesh-4x4':
-	{
-		Name: 'Mesh 4×4',
-		Description: '16 nodes in a 4×4 grid topology with right/down neighbor edges. Grid is the obvious win (the layout matches the data). Columnar (4 cols, FillOrder=row) also nails it. Layered produces a long zig-zag through 7 layers.',
-		Recommended: 'Grid',
-		Flow: _mesh4x4()
-	},
-	'floating-widgets':
-	{
-		Name: 'Floating Widgets (no edges)',
-		Description: '12 unconnected nodes — exactly the dashboard-builder shape. Grid, Columnar, and Tabular all produce clean deterministic arrangements. Layered, Circular, and ForcedFromCenter degrade gracefully (single layer / single ring / random spread).',
-		Recommended: 'Grid',
-		Flow: _floatingWidgets()
-	},
-	'wide-fan-out':
-	{
-		Name: 'Wide Fan-Out (1 → 12)',
-		Description: 'One source node connects to 12 leaves. Circular places the source at center with leaves on a single outer ring — clean and balanced. Layered makes the second column 12 nodes tall. Grid spreads leaves and loses the source-to-leaf relationship.',
-		Recommended: 'Circular',
-		Flow: _wideFanOut()
-	}
-};
-
-module.exports =
-{
-	SAMPLE_FLOWS: SAMPLE_FLOWS,
-	getSampleNames: function ()
-	{
-		return Object.keys(SAMPLE_FLOWS);
-	},
-	getSample: function (pKey)
-	{
-		return SAMPLE_FLOWS[pKey] || null;
-	}
-};

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

@@ -1,184 +0,0 @@
-const libPictView = require('pict-view');
-
-const _ViewConfiguration =
-{
-	ViewIdentifier: "FlowExample-About",
-
-	DefaultRenderable: "FlowExample-About-Content",
-	DefaultDestinationAddress: "#FlowExample-Content-Container",
-
-	AutoRender: false,
-
-	CSS: /*css*/`
-		.flowexample-about {
-			padding: 2em;
-			max-width: 800px;
-			margin: 0 auto;
-		}
-		.flowexample-about-header {
-			text-align: center;
-			padding-bottom: 1.5em;
-			border-bottom: 1px solid var(--theme-color-border-light, #eee);
-			margin-bottom: 2em;
-		}
-		.flowexample-about-header h1 {
-			margin: 0 0 0.25em 0;
-			font-size: 2em;
-			font-weight: 300;
-			color: #2c3e50;
-		}
-		.flowexample-about-header p {
-			margin: 0;
-			color: #7f8c8d;
-			font-size: 1.1em;
-		}
-		.flowexample-about h2 {
-			margin: 1.5em 0 0.5em 0;
-			font-weight: 400;
-			color: #2c3e50;
-			font-size: 1.3em;
-		}
-		.flowexample-about p {
-			color: var(--theme-color-text-secondary, #555);
-			line-height: 1.7;
-		}
-		.flowexample-about-tech {
-			display: grid;
-			grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
-			gap: 1em;
-			margin-top: 1em;
-		}
-		.flowexample-about-tech-item {
-			background: #f8f9fa;
-			border: 1px solid #e9ecef;
-			border-radius: 4px;
-			padding: 1em;
-			text-align: center;
-		}
-		.flowexample-about-tech-item strong {
-			display: block;
-			margin-bottom: 0.25em;
-			color: #2c3e50;
-		}
-		.flowexample-about-tech-item span {
-			font-size: 0.85em;
-			color: var(--theme-color-text-secondary, #666);
-		}
-		.flowexample-about-features {
-			display: grid;
-			grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
-			gap: 1em;
-			margin-top: 1em;
-		}
-		.flowexample-about-feature {
-			background: var(--theme-color-background-panel, #fff);
-			border: 1px solid var(--theme-color-border-default, #e0e0e0);
-			border-radius: 6px;
-			padding: 1.25em;
-		}
-		.flowexample-about-feature h3 {
-			margin: 0 0 0.35em 0;
-			font-size: 1em;
-			color: #2c3e50;
-		}
-		.flowexample-about-feature p {
-			margin: 0;
-			font-size: 0.9em;
-		}
-	`,
-
-	Templates:
-	[
-		{
-			Hash: "FlowExample-About-Template",
-			Template: /*html*/`
-<div class="flowexample-about">
-	<div class="flowexample-about-header">
-		<h1>About Pict Section Flow</h1>
-		<p>A pure SVG flow diagram component for the Pict framework</p>
-	</div>
-
-	<h2>What It Does</h2>
-	<p>Pict Section Flow provides a self-contained, extensible flow diagram view for Pict applications. It renders nodes and connections as SVG elements, supports drag-and-drop node positioning, interactive connection creation between ports, and viewport panning and zooming &mdash; all with zero external diagram library dependencies.</p>
-
-	<h2>Key Features</h2>
-	<div class="flowexample-about-features">
-		<div class="flowexample-about-feature">
-			<h3>Pure SVG Rendering</h3>
-			<p>All diagram elements are rendered as standard SVG, providing native DOM events and CSS styling with no canvas or external libraries required.</p>
-		</div>
-		<div class="flowexample-about-feature">
-			<h3>Drag &amp; Drop Nodes</h3>
-			<p>Click and drag nodes to reposition them. Connections update in real time with smooth cubic bezier curves.</p>
-		</div>
-		<div class="flowexample-about-feature">
-			<h3>Interactive Connections</h3>
-			<p>Drag from an output port to an input port to create connections visually. Validation prevents self-connections and duplicates.</p>
-		</div>
-		<div class="flowexample-about-feature">
-			<h3>Pan &amp; Zoom</h3>
-			<p>Navigate large diagrams with background panning and mouse wheel zoom. Zoom-to-fit centers all nodes automatically.</p>
-		</div>
-		<div class="flowexample-about-feature">
-			<h3>Extensible Node Types</h3>
-			<p>Register custom node types with different shapes, colors, port configurations, and styles through the Node Type Provider.</p>
-		</div>
-		<div class="flowexample-about-feature">
-			<h3>Event Hooks</h3>
-			<p>Listen for node selection, movement, connection creation and removal through the Event Handler Provider for full extensibility.</p>
-		</div>
-	</div>
-
-	<h2>Built With</h2>
-	<div class="flowexample-about-tech">
-		<div class="flowexample-about-tech-item">
-			<strong>Pict</strong>
-			<span>Application Framework</span>
-		</div>
-		<div class="flowexample-about-tech-item">
-			<strong>Pict-View</strong>
-			<span>View Lifecycle</span>
-		</div>
-		<div class="flowexample-about-tech-item">
-			<strong>Pict-Router</strong>
-			<span>Hash Routing</span>
-		</div>
-		<div class="flowexample-about-tech-item">
-			<strong>SVG</strong>
-			<span>Diagram Rendering</span>
-		</div>
-		<div class="flowexample-about-tech-item">
-			<strong>Fable</strong>
-			<span>Service Architecture</span>
-		</div>
-	</div>
-
-	<h2>License</h2>
-	<p>This project is released under the MIT License. It is part of the Retold ecosystem of tools for building complex data-driven applications.</p>
-</div>
-`
-		}
-	],
-
-	Renderables:
-	[
-		{
-			RenderableHash: "FlowExample-About-Content",
-			TemplateHash: "FlowExample-About-Template",
-			DestinationAddress: "#FlowExample-Content-Container",
-			RenderMethod: "replace"
-		}
-	]
-};
-
-class FlowExampleAboutView extends libPictView
-{
-	constructor(pFable, pOptions, pServiceHash)
-	{
-		super(pFable, pOptions, pServiceHash);
-	}
-}
-
-module.exports = FlowExampleAboutView;
-
-module.exports.default_configuration = _ViewConfiguration;