pict-section-flow 1.4.0 → 2.0.1

package/docs/README.md

@@ -1,103 +0,0 @@
-# Pict-Section-Flow
-
-An interactive flow diagram section view for the [Pict](https://fable-retold.github.io/pict/) application framework. Build node-based visual editors, workflow designers, and data pipeline tools with a declarative, configuration-driven API.
-
-Pict-Section-Flow provides a complete graph editing experience -- nodes, ports, connections, properties panels, theming, and layout persistence -- all composable through the Fable service provider pattern.
-
-## What It Does
-
-Pict-Section-Flow renders an SVG-based canvas where users can:
-
-- **Drag nodes** from a palette onto the canvas
-- **Connect ports** between nodes with bezier or orthogonal paths
-- **Open properties panels** on any node for editing, documentation, or custom views
-- **Pan and zoom** the viewport with mouse or trackpad
-- **Save and restore** spatial layouts to localStorage or a remote backend
-- **Theme the entire diagram** with built-in themes or CSS custom properties
-
-All interaction is driven by a JSON data structure that represents the flow graph. The view marshals data bidirectionally with Pict's `AppData` store, so the flow state integrates naturally with the rest of your application.
-
-## Architecture at a Glance
-
-<!-- bespoke diagram: edit diagrams/architecture-at-a-glance.mmd or .hints.json, then: npx pict-renderer-graph build modules/pict/pict-section-flow/docs -->
-![Architecture at a Glance](diagrams/architecture-at-a-glance.svg)
-
-The module follows the standard Pict layered architecture:
-
-- **Views** handle rendering and DOM interaction
-- **Services** contain business logic (CRUD, selection, viewport math)
-- **Providers** supply configuration and stateless utilities (themes, node types, geometry)
-
-## Key Concepts
-
-### Flow Data
-
-The entire graph state lives in a single JSON object with four collections: `Nodes`, `Connections`, `OpenPanels`, and `SavedLayouts`. Every mutation goes through the `DataManager` service and triggers a re-render.
-
-### Custom Card Types
-
-Developers define reusable node types by extending `PictFlowCard`. Each card declares its title, ports, category, appearance, and optional properties panel. Cards register with the flow view's `NodeTypeProvider` and appear in the toolbar palette.
-
-### Properties Panels
-
-Nodes can open floating panels tethered to them by a line. Four built-in panel types cover common needs -- Template, Markdown, Form, and View -- or you can create custom panel types by extending `PictFlowCardPropertiesPanel`.
-
-### Theming
-
-Six built-in themes ship with the module. The theme system is CSS-variable-based: override any of 70+ `--pf-*` design tokens on `.pict-flow-container` to customize colors, shadows, radii, and typography without touching source code.
-
-### Event Hooks
-
-The `EventHandlerProvider` exposes 20+ named events (node selected, connection created, flow changed, theme changed, etc.). Register handlers to build integrations, undo/redo stacks, or server sync without modifying core code.
-
-## Quick Example
-
-```javascript
-const libPictSectionFlow = require('pict-section-flow');
-const libPict = require('pict');
-
-let _Pict = new libPict({ Product: 'FlowDemo' });
-
-_Pict.addView('MyFlow', {}, libPictSectionFlow);
-
-let tmpFlow = _Pict.views.MyFlow;
-
-// Add two nodes
-let tmpStart = tmpFlow.addNode('start', 50, 150, 'Begin');
-let tmpEnd = tmpFlow.addNode('end', 400, 150, 'Done');
-
-// Connect them
-tmpFlow.addConnection(
-	tmpStart.Hash, tmpStart.Ports[0].Hash,
-	tmpEnd.Hash, tmpEnd.Ports[0].Hash
-);
-
-// Listen for changes
-tmpFlow._EventHandlerProvider.registerHandler('onFlowChanged',
-	(pFlowData) =>
-	{
-		console.log('Flow updated:', pFlowData.Nodes.length, 'nodes');
-	});
-```
-
-## Learn More
-
-- **[Getting Started](Getting_Started.md)** -- Build your first flow diagram in five minutes
-- **[Architecture](Architecture.md)** -- Detailed service/provider design with data flow diagrams
-- **[Implementation Reference](Implementation_Reference.md)** -- Complete API surface for every service and provider
-- **[Custom Styling](Custom-Styling.md)** -- CSS custom properties reference and theme API
-- **[Layout Persistence](Layout_Persistence.md)** -- Save and restore layouts with localStorage or REST
-
-## Ecosystem
-
-Pict-Section-Flow is part of the [Retold](https://github.com/stevenvelozo/retold) module suite:
-
-- [pict](https://fable-retold.github.io/pict/) -- Core MVC application framework
-- [pict-view](https://fable-retold.github.io/pict-view/) -- View base class
-- [pict-provider](https://fable-retold.github.io/pict-provider/) -- Provider base class
-- [pict-section-form](https://fable-retold.github.io/pict-section-form/) -- Form sections (used for Form panel type)
-- [fable](https://fable-retold.github.io/fable/) -- Service infrastructure and dependency injection
-
-## License
-
-MIT

package/docs/Theme_Integration.md

@@ -1,150 +0,0 @@
-# Theme integration
-
-`pict-section-flow` participates in the host application's theme system in two layers:
-
-1. **Host theme (light/dark/palette)** - provided by `pict-provider-theme` via `--theme-color-*` CSS custom properties on `:root` and a `theme-light` / `theme-dark` class on `<html>`.
-2. **Flow visual theme (sketch, blueprint, mono, retro-80s, retro-90s, whiteboard, default)** - provided by the editor's own `PictProvider-Flow-Theme` and applied as scope-local overrides on `.pict-flow-container`.
-
-Both layers cooperate. The flow editor's `--pf-*` tokens default to the matching `--theme-color-*` token, so when the host swaps light/dark or palette, all neutral flow chrome (panels, toolbars, text, connections, grid) updates with no JS work. Visual themes that intentionally diverge from the host palette (e.g. blueprint's deep blue canvas, retro-80s neon) override the relevant `--pf-*` tokens explicitly.
-
-## Host wiring
-
-When a host application registers `pict-provider-theme`:
-
-```javascript
-const libPictProviderTheme = require('pict-provider-theme');
-pict.addProvider('Theme', libPictProviderTheme.default_configuration, libPictProviderTheme);
-pict.providers.Theme.registerTheme(require('pict-provider-theme/source/themes/pict-default.json'));
-pict.providers.Theme.applyTheme('pict-default', 'system');
-```
-
-...the flow editor automatically detects it during `onBeforeInitialize` (duck-typed via `applyTheme`/`onApply`/`listThemes`) and subscribes to its `onApply` hook. On every host theme change the editor:
-
-- Re-runs `_CSSProvider.registerCSS()` so CSS layered on top by the active flow visual theme stays in the cascade.
-- Calls `_reinjectMarkerDefs()` so SVG `<marker>` arrowhead polygons rebuild with the new fills.
-- Calls `renderFlow()` to repaint nodes/connections (so any inline-rendered colors refresh).
-
-No code changes are required in host apps beyond installing and applying `pict-provider-theme` as you would for any other consumer.
-
-## Token mapping
-
-| Flow token (`--pf-...`) | Host token (`--theme-color-...`) | Hardcoded fallback |
-|---|---|---|
-| `--pf-text-primary` | `text-primary` | `#2c3e50` |
-| `--pf-text-secondary` | `text-secondary` | `#7f8c8d` |
-| `--pf-text-tertiary` | `text-muted` | `#8e99a4` |
-| `--pf-node-body-fill` | `background-panel` | `#ffffff` |
-| `--pf-node-body-stroke` | `border-default` | `#d0d4d8` |
-| `--pf-node-body-stroke-hover` | `border-strong` | `#b0b8c0` |
-| `--pf-node-selected-stroke` | `brand-primary` | `#3498db` |
-| `--pf-node-shadow` (and hover/dragging) | `shadow-color` | `rgba(0,0,0,0.10)` |
-| `--pf-port-input-fill` | `status-info` | `#3498db` |
-| `--pf-port-output-fill` | `status-success` | `#2ecc71` |
-| `--pf-port-error-fill` | `status-error` | `#e74c3c` |
-| `--pf-connection-stroke` | `border-strong` | `#95a5a6` |
-| `--pf-connection-selected-stroke` | `brand-primary` | `#3498db` |
-| `--pf-panel-bg` | `background-panel` | `#ffffff` |
-| `--pf-panel-titlebar-bg` | `background-secondary` | `#f7f8fa` |
-| `--pf-toolbar-bg` | `background-panel` | `#ffffff` |
-| `--pf-toolbar-border` | `border-default` | `#e0e0e0` |
-| `--pf-canvas-bg` | `background-secondary` | `#fafafa` |
-| `--pf-grid-stroke` | `border-light` | `#e8e8e8` |
-| `--pf-input-border` | `border-default` | `#d5d8dc` |
-| `--pf-input-border-focus` | `focus-outline` | `#3498db` |
-
-Tokens not in this list (e.g. node-variant fills, Chart.js-style category colors) keep hardcoded values because they aren't conventionally part of host palettes.
-
-## Card color roles
-
-Card types and individual nodes can opt into a **color role** that tracks the host theme automatically. Roles are class-driven, so changing the host theme repaints every card using that role with no JS work.
-
-### Available roles
-
-| Role | Tracks | Typical use |
-|---|---|---|
-| `success` | `--theme-color-status-success` | Start, success, complete |
-| `warning` | `--theme-color-status-warning` | Decision, caution, conditional |
-| `error` | `--theme-color-status-error` | Halt, error, abort |
-| `info` | `--theme-color-status-info` | Informational, log, debug |
-| `accent` | `--theme-color-brand-accent` | End, brand-flavored highlights |
-| `neutral` | `--theme-color-text-primary` + `--theme-color-background-panel` | Default, generic |
-
-Each role exposes `--pf-color-<role>` (the strong/title-bar color) and `--pf-color-<role>-soft` (a tinted body fill computed via `color-mix(...)` against the strong color). Hosts can override either token at any scope to retint a role globally.
-
-### Built-in node types
-
-The five default node types ship with roles wired up:
-
-| Type | Role |
-|---|---|
-| `default` | `neutral` |
-| `start` | `success` |
-| `end` | `accent` |
-| `halt` | `error` |
-| `decision` | `warning` |
-
-Their hex `TitleBarColor` / `BodyStyle` fields remain as fallbacks for code paths that bypass CSS (legacy consumers, exports). When the role's CSS class is in effect, those hex presentation attributes are overridden by the role rules - host themes propagate, but the hex values keep the editor presentable in unstyled contexts.
-
-### Custom card types
-
-```javascript
-flowView._NodeTypeProvider.registerNodeType('my-card-type', {
-    Hash: 'my-card-type',
-    Label: 'My Card',
-    DefaultPorts: [ /* ... */ ],
-    ColorRole: 'info',                     // theme-aware
-    TitleBarColor: '#3498db',              // optional fallback
-    BodyStyle: { fill: '#ebf5fb' }         // optional fallback
-});
-```
-
-The renderer adds `pict-flow-node-color-info` to the node group; CSS handles the rest.
-
-### Per-node overrides
-
-A specific card can override the role its type defines:
-
-```javascript
-flowData.Nodes.push({
-    Hash: 'node-special',
-    Type: 'my-card-type',
-    ColorRole: 'warning',                  // override the type's role
-    // ...
-});
-```
-
-Set `ColorRole: 'none'` on a specific node to opt out of role styling entirely (useful when keeping a custom hex via `Style.BodyFill` etc.).
-
-### Custom roles
-
-To define new roles, add `--pf-color-<role>` / `--pf-color-<role>-soft` tokens at `.pict-flow-container` scope and matching `.pict-flow-node-color-<role>` CSS rules in your host stylesheet:
-
-```css
-.pict-flow-container {
-    --pf-color-experimental: var(--theme-color-brand-primary, #6b8eff);
-    --pf-color-experimental-soft: color-mix(in srgb, var(--pf-color-experimental) 14%, transparent);
-}
-.pict-flow-node-color-experimental .pict-flow-node-body {
-    fill: var(--pf-color-experimental-soft);
-    stroke: var(--pf-color-experimental);
-    stroke-width: 1.5;
-}
-.pict-flow-node-color-experimental .pict-flow-node-title-bar,
-.pict-flow-node-color-experimental .pict-flow-node-title-bar-bottom {
-    fill: var(--pf-color-experimental);
-}
-```
-
-## Arrowhead markers
-
-`<marker>` elements live inside `<defs>` and don't pick up the same CSS variable cascade as regular SVG content in every browser. To make them theme-tracking, each generated polygon now carries a class (`pict-flow-arrowhead-default`, `pict-flow-arrowhead-selected`, `pict-flow-arrowhead-event-in`, ...) and the corresponding CSS rule sets `fill` to the matching `--pf-...` token. The `fill="..."` attribute remains on the polygon as a graceful fallback when CSS can't reach it.
-
-## Flow visual themes
-
-The seven flow themes (`default`, `sketch`, `blueprint`, `mono`, `retro-80s`, `retro-90s`, `whiteboard`) ship with explicit `CSSVariables` and `AdditionalCSS` blocks. They layer on top of the host theme by emitting their overrides into `.pict-flow-container { ... }`. Because `:root`-scoped host tokens have lower specificity than `.pict-flow-container`-scoped flow tokens, the visual theme always wins where it sets a value, and the host theme controls everything it doesn't.
-
-The `default` flow theme intentionally sets no overrides - it lets the host theme drive the look.
-
-## Disabling host integration
-
-If a host wants the flow editor to ignore the host theme (e.g. to keep a fixed Sketch-style appearance regardless of the surrounding page), don't apply a host theme provider - or unsubscribe after construction by calling the dispose function returned via `flowView._HostThemeUnsubscribe`. This is rarely needed; flow visual themes already win where they care.

package/docs/_brand.json

@@ -1,18 +0,0 @@
-{
-	"Hash": "pict-section-flow",
-	"Name": "Pict Section Flow",
-	"Tagline": "Flow diagram section for visual workflow and process representations",
-	"Palette": "mix",
-	"Icon": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 96 96\" width=\"96\" height=\"96\">\n\t\t<defs>\n\t\t\t<clipPath id=\"frame-pict-section-flow-filled-light\">\n\t\t\t\t<path d=\"M 2 48\n\t\t\tC 2 18.0222416, 18.0222416 2, 48 2\n\t\t\tC 77.9777584 2, 94 18.0222416, 94 48\n\t\t\tC 94 77.9777584, 77.9777584 94, 48 94\n\t\t\tC 18.0222416 94, 2 77.9777584, 2 48 Z\"/>\n\t\t\t</clipPath>\n\t\t</defs>\n\t\t<path d=\"M 2 48\n\t\t\tC 2 18.0222416, 18.0222416 2, 48 2\n\t\t\tC 77.9777584 2, 94 18.0222416, 94 48\n\t\t\tC 94 77.9777584, 77.9777584 94, 48 94\n\t\t\tC 18.0222416 94, 2 77.9777584, 2 48 Z\" fill=\"#36d1d8\"/>\n\t\t<g clip-path=\"url(#frame-pict-section-flow-filled-light)\"><path d=\"M 16 26 L 48 66 L 80 26 Z\" fill=\"rgba(255,255,255,0.18)\"/>\n\t\t\t\t\t<path d=\"M 24 16 L 48 44 L 72 16 Z\" fill=\"#dc9958\" opacity=\"0.9\"/></g>\n\t\t<text x=\"48\" y=\"50\" text-anchor=\"middle\" dominant-baseline=\"central\"\n\t\t\tfont-family=\"-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif\"\n\t\t\tfont-size=\"28\" font-weight=\"600\"\n\t\t\tfill=\"#ffffff\" letter-spacing=\"-1\">PSF</text>\n\t</svg>",
-	"IconType": "svg",
-	"Favicon": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 96 96\" width=\"96\" height=\"96\">\n\t\t<defs>\n\t\t\t<clipPath id=\"fav-pict-section-flow-light\">\n\t\t\t\t<path d=\"M 2 48\n\t\t\tC 2 18.0222416, 18.0222416 2, 48 2\n\t\t\tC 77.9777584 2, 94 18.0222416, 94 48\n\t\t\tC 94 77.9777584, 77.9777584 94, 48 94\n\t\t\tC 18.0222416 94, 2 77.9777584, 2 48 Z\"/>\n\t\t\t</clipPath>\n\t\t</defs>\n\t\t<path d=\"M 2 48\n\t\t\tC 2 18.0222416, 18.0222416 2, 48 2\n\t\t\tC 77.9777584 2, 94 18.0222416, 94 48\n\t\t\tC 94 77.9777584, 77.9777584 94, 48 94\n\t\t\tC 18.0222416 94, 2 77.9777584, 2 48 Z\" fill=\"#36d1d8\"/>\n\t\t<g clip-path=\"url(#fav-pict-section-flow-light)\"><path d=\"M 16 26 L 48 66 L 80 26 Z\" fill=\"rgba(255,255,255,0.22)\"/></g>\n\t\t<text x=\"48\" y=\"50\" text-anchor=\"middle\" dominant-baseline=\"central\"\n\t\t\tfont-family=\"-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif\"\n\t\t\tfont-size=\"60\" font-weight=\"800\"\n\t\t\tfill=\"#ffffff\" letter-spacing=\"-1\">P</text>\n\t</svg>",
-	"FaviconDark": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 96 96\" width=\"96\" height=\"96\">\n\t\t<defs>\n\t\t\t<clipPath id=\"fav-pict-section-flow-dark\">\n\t\t\t\t<path d=\"M 2 48\n\t\t\tC 2 18.0222416, 18.0222416 2, 48 2\n\t\t\tC 77.9777584 2, 94 18.0222416, 94 48\n\t\t\tC 94 77.9777584, 77.9777584 94, 48 94\n\t\t\tC 18.0222416 94, 2 77.9777584, 2 48 Z\"/>\n\t\t\t</clipPath>\n\t\t</defs>\n\t\t<path d=\"M 2 48\n\t\t\tC 2 18.0222416, 18.0222416 2, 48 2\n\t\t\tC 77.9777584 2, 94 18.0222416, 94 48\n\t\t\tC 94 77.9777584, 77.9777584 94, 48 94\n\t\t\tC 18.0222416 94, 2 77.9777584, 2 48 Z\" fill=\"#87dfe2\"/>\n\t\t<g clip-path=\"url(#fav-pict-section-flow-dark)\"><path d=\"M 16 26 L 48 66 L 80 26 Z\" fill=\"rgba(255,255,255,0.22)\"/></g>\n\t\t<text x=\"48\" y=\"50\" text-anchor=\"middle\" dominant-baseline=\"central\"\n\t\t\tfont-family=\"-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif\"\n\t\t\tfont-size=\"60\" font-weight=\"800\"\n\t\t\tfill=\"#101418\" letter-spacing=\"-1\">P</text>\n\t</svg>",
-	"Colors": {
-		"Primary": "#36d1d8",
-		"Secondary": "#dc9958",
-		"PrimaryLight": "#36d1d8",
-		"PrimaryDark": "#87dfe2",
-		"SecondaryLight": "#dc9958",
-		"SecondaryDark": "#e9c7a7"
-	}
-}

package/docs/_cover.md

@@ -1,17 +0,0 @@
-# Pict-Section-Flow
-
-> Interactive flow diagram section view for the Pict application framework
-
-- Node-based graph editor with typed ports and bezier connections
-- Custom card types, properties panels, and event hooks
-- Six built-in themes with 70+ CSS design tokens
-- Layout persistence to localStorage or any backend
-
-[GitHub](https://github.com/fable-retold/pict-section-flow)
-[Get Started](#pict-section-flow)
-
-<!-- docuserve:examples:start -->
-| Example | Complexity | Launch |
-|---------|------------|--------|
-| [Simple Cards](examples/simple%5Fcards/README.md) | Basic | [Launch](examples/simple%5Fcards/index.html) |
-<!-- docuserve:examples:end -->

package/docs/_playground.json

@@ -1,24 +0,0 @@
-{
-	"Kind":              "section",
-	"WrapperKind":       "view",
-	"SectionType":       "pict-section-flow",
-	"ApplicationModule": "PictSectionFlow",
-	"ApplicationGlobal": "PictSectionFlow",
-	"ViewName":          "Flow",
-	"ViewConfigKey":     "FlowViewConfig",
-	"ManifestKey":       "DefaultFlowManifest",
-	"Editors":
-	[
-		{ "Hash": "pictConfig",  "Label": "Pict Config",       "Language": "json",       "DefaultPath": "playground/pict.json" },
-		{ "Hash": "appConfig",   "Label": "App Config",        "Language": "json",       "DefaultPath": "playground/app.json" },
-		{ "Hash": "appData",     "Label": "Initial AppData",   "Language": "json",       "DefaultPath": "playground/appdata.json" },
-		{ "Hash": "application", "Label": "Application Code",  "Language": "javascript", "DefaultPath": "playground/application.js" }
-	],
-	"Imports":
-	[
-		{ "Name": "pict",                "Source": "local", "Path": "playground/runtime/pict.min.js" },
-		{ "Name": "pict-application",    "Source": "local", "Path": "playground/runtime/pict-application.min.js" },
-		{ "Name": "pict-section-modal",  "Source": "local", "Path": "playground/runtime/pict-section-modal.min.js" },
-		{ "Name": "pict-section-flow",   "Source": "local", "Path": "playground/runtime/pict-section-flow.min.js" }
-	]
-}

package/docs/_sidebar.md

@@ -1,57 +0,0 @@
-- Getting Started
-
-  - [Overview](/)
-  - [Quick Start](Getting_Started.md)
-  - [Custom Styling](Custom-Styling.md)
-  - [Theme Integration](Theme_Integration.md)
-
-- Architecture
-
-  - [Design Overview](Architecture.md)
-  - [Data Model](Data_Model.md)
-  - [Event System](Event_System.md)
-
-- Reference
-
-  - [Implementation Reference](Implementation_Reference.md)
-  - [Layout Persistence](Layout_Persistence.md)
-
-- API -- Data Management
-
-  - [addNode](api/addNode.md)
-  - [removeNode](api/removeNode.md)
-  - [addConnection](api/addConnection.md)
-  - [removeConnection](api/removeConnection.md)
-  - [getFlowData / setFlowData](api/getFlowData.md)
-  - [marshalToView / marshalFromView](api/marshalToView.md)
-
-- API -- Selection & Viewport
-
-  - [selectNode / deselectAll](api/selectNode.md)
-  - [setZoom / zoomToFit](api/setZoom.md)
-  - [autoLayout](api/autoLayout.md)
-  - [screenToSVGCoords](api/screenToSVGCoords.md)
-  - [toggleFullscreen](api/toggleFullscreen.md)
-
-- API -- Panels
-
-  - [openPanel / closePanel / togglePanel](api/openPanel.md)
-
-- API -- Theming & Events
-
-  - [setTheme / registerTheme](api/setTheme.md)
-  - [registerHandler / fireEvent](api/registerHandler.md)
-
-- API -- Layout Persistence
-
-  - [saveLayout / restoreLayout](api/saveLayout.md)
-
-- API -- Extension Points
-
-  - [PictFlowCard](api/PictFlowCard.md)
-  - [PictFlowCardPropertiesPanel](api/PictFlowCardPropertiesPanel.md)
-  - [registerNodeType](api/registerNodeType.md)
-
-- Examples
-
-  - [Simple Cards](#/page/examples/simple_cards/README)

package/docs/_topbar.md

@@ -1,8 +0,0 @@
-# Pict Section Flow
-
-- [Overview](README.md)
-- [Getting Started](Getting_Started.md)
-- [Architecture](Architecture.md)
-- [API Reference](Implementation_Reference.md)
-- [Custom Styling](Custom-Styling.md)
-- [GitHub](https://github.com/fable-retold/pict-section-flow)

package/docs/_version.json

@@ -1,7 +0,0 @@
-{
-	"Name": "pict-section-flow",
-	"Version": "1.0.1",
-	"Description": "Pict Section Flow Diagram",
-	"GeneratedAt": "2026-05-26T21:13:23.849Z",
-	"GitCommit": "2356616"
-}

package/docs/api/PictFlowCard.md

@@ -1,216 +0,0 @@
-# PictFlowCard
-
-Base class for defining reusable flow diagram node types. Extend this class to create custom cards that appear in the toolbar palette. Each card declares its title, ports, category, appearance, and optional properties panel.
-
-## Import
-
-```javascript
-const libPictFlowCard = require('pict-section-flow').PictFlowCard;
-```
-
-## Constructor
-
-```javascript
-class MyCard extends libPictFlowCard
-{
-	constructor(pFable, pOptions, pServiceHash)
-	{
-		super(pFable, Object.assign({},
-			{
-				Title: 'My Card',
-				Code: 'MC',
-				// ... options
-			}, pOptions), pServiceHash);
-	}
-}
-```
-
-## Configuration Options
-
-| Property | Type | Default | Description |
-|----------|------|---------|-------------|
-| `Title` | string | `'Card'` | Display name on the node title bar |
-| `Name` | string | `false` | Longer descriptive name |
-| `Code` | string | `''` | Short identifier used as the node type key |
-| `Description` | string | `false` | Brief explanation of the card's purpose |
-| `Icon` | string | `false` | Icon identifier or emoji |
-| `PreviewImage` | string | `false` | URL to a preview thumbnail |
-| `Documentation` | string | `false` | URL or inline documentation text |
-| `Tooltip` | string | `false` | Hover tooltip text |
-| `Help` | string | `false` | HTML help content for the Help tab |
-| `Category` | string | `'General'` | Palette grouping category |
-| `Enabled` | boolean | `true` | Whether the card appears in the palette |
-| `TitleBarColor` | string | `'#2c3e50'` | Title bar background color |
-| `BodyStyle` | object | `{}` | SVG style attributes for the node body |
-| `Width` | number | `180` | Default node width in pixels |
-| `Height` | number | `80` | Default node height in pixels |
-
-### Port Options
-
-| Property | Type | Default | Description |
-|----------|------|---------|-------------|
-| `Inputs` | array | `[]` | Input port definitions |
-| `Outputs` | array | `[]` | Output port definitions |
-
-Each port object:
-
-| Property | Type | Default | Description |
-|----------|------|---------|-------------|
-| `Name` | string | Required | Port label |
-| `Side` | string | `'left'`/`'right'` | Port side: `'left'`, `'right'`, `'top'`, `'bottom'` |
-| `MinimumInputCount` | number | `0` | Minimum required connections (inputs only) |
-| `MaximumInputCount` | number | `-1` | Maximum allowed connections (-1 = unlimited, inputs only) |
-| `PortType` | string | -- | Type for styling: `'event'`, `'setting'`, `'value'`, `'error'` |
-| `DataType` | string | -- | Semantic data type (for validation/display) |
-
-### Label Display Options
-
-| Property | Type | Default | Description |
-|----------|------|---------|-------------|
-| `ShowTypeLabel` | boolean | `true` | Show the type code badge on hover |
-| `PortLabelsOnHover` | boolean | `false` | Only show port labels on hover |
-| `PortLabelsVertical` | boolean | `false` | Render port labels vertically |
-| `PortLabelPadding` | boolean | `false` | Extra spacing to avoid overlap |
-| `PortLabelsOutside` | boolean | `false` | Render labels outside the node body |
-| `LabelsInFront` | boolean | `true` | Labels render in front of body content |
-
-### Properties Panel Configuration
-
-| Property | Type | Description |
-|----------|------|-------------|
-| `PropertiesPanel.PanelType` | string | `'Template'`, `'Markdown'`, `'Form'`, or `'View'` |
-| `PropertiesPanel.DefaultWidth` | number | Panel width in pixels |
-| `PropertiesPanel.DefaultHeight` | number | Panel height in pixels |
-| `PropertiesPanel.Title` | string | Panel title bar text |
-| `PropertiesPanel.Configuration` | object | Panel-type-specific config |
-
-### Body Content Configuration
-
-| Property | Type | Description |
-|----------|------|-------------|
-| `BodyContent.ContentType` | string | `'svg'`, `'html'`, or `'canvas'` |
-| `BodyContent.Template` | string | Pict template string |
-| `BodyContent.TemplateHash` | string | Registered template hash (overrides Template) |
-| `BodyContent.Templates` | array | Templates to auto-register: `[{ Hash, Template }]` |
-| `BodyContent.RenderCallback` | function | Imperative render callback for canvas mode |
-| `BodyContent.Padding` | number | Inner padding in pixels |
-
-## Methods
-
-### getNodeTypeConfiguration()
-
-Generate the configuration object for the NodeTypes provider.
-
-**Returns:** Node type configuration object.
-
-### registerWithFlowView(pFlowView)
-
-Register this card with a flow view's node type provider.
-
-| Parameter | Type | Description |
-|-----------|------|-------------|
-| `pFlowView` | PictViewFlow | The flow view instance |
-
-**Returns:** `boolean` -- whether registration succeeded.
-
-## Examples
-
-### Minimal card
-
-```javascript
-class LogCard extends libPictFlowCard
-{
-	constructor(pFable, pOptions, pServiceHash)
-	{
-		super(pFable, Object.assign({},
-			{
-				Title: 'Log',
-				Code: 'LOG',
-				Inputs: [{ Name: 'Data', Side: 'left' }],
-				Outputs: [{ Name: 'Pass', Side: 'right' }]
-			}, pOptions), pServiceHash);
-	}
-}
-```
-
-### Card with typed ports and properties panel
-
-```javascript
-class IfThenElseCard extends libPictFlowCard
-{
-	constructor(pFable, pOptions, pServiceHash)
-	{
-		super(pFable, Object.assign({},
-			{
-				Title: 'If-Then-Else',
-				Code: 'ITE',
-				Category: 'Control Flow',
-				Description: 'Route flow based on a boolean condition',
-				TitleBarColor: '#e67e22',
-				Width: 160,
-				Height: 90,
-				Inputs:
-				[
-					{ Name: 'Condition', Side: 'left', PortType: 'value' }
-				],
-				Outputs:
-				[
-					{ Name: 'Then', Side: 'right', PortType: 'event' },
-					{ Name: 'Else', Side: 'bottom', PortType: 'error' }
-				],
-				PropertiesPanel:
-				{
-					PanelType: 'Markdown',
-					Title: 'If-Then-Else',
-					DefaultWidth: 280,
-					DefaultHeight: 150,
-					Configuration:
-					{
-						Markdown: '## Conditional Branch\nRoutes flow based on a boolean condition.'
-					}
-				}
-			}, pOptions), pServiceHash);
-	}
-}
-```
-
-### Card with custom SVG body content
-
-```javascript
-class SparklineCard extends libPictFlowCard
-{
-	constructor(pFable, pOptions, pServiceHash)
-	{
-		super(pFable, Object.assign({},
-			{
-				Title: 'Sparkline',
-				Code: 'SPARK',
-				Category: 'Visualization',
-				Width: 200,
-				Height: 100,
-				Inputs: [{ Name: 'Values', Side: 'left', PortType: 'value' }],
-				BodyContent:
-				{
-					ContentType: 'svg',
-					Template: '<polyline points="0,50 20,30 40,45 60,10 80,35 100,20" fill="none" stroke="#3498db" stroke-width="2" />'
-				}
-			}, pOptions), pServiceHash);
-	}
-}
-```
-
-### Registration
-
-```javascript
-let tmpCard = new IfThenElseCard(_Pict, {});
-tmpCard.registerWithFlowView(flowView);
-
-// The card now appears in the toolbar palette under "Control Flow"
-// Users can drag it onto the canvas to create new ITE nodes
-```
-
-## See Also
-
-- [registerNodeType](registerNodeType.md) -- Register types directly without PictFlowCard
-- [PictFlowCardPropertiesPanel](PictFlowCardPropertiesPanel.md) -- Custom panel types
-- [addNode](addNode.md) -- Create nodes from registered types