pict-section-flow 0.0.17 → 0.0.19

package/README.md

@@ -5,17 +5,17 @@
 
 An interactive flow diagram section view for the 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.
+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.
 
 ## Features
 
-- **Node-Based Graph Editor** — Drag-and-drop nodes with typed input/output ports and bezier or orthogonal connections
-- **Custom Card Types** — Define reusable node types with the `PictFlowCard` base class; register categories, icons, port constraints, and body content
-- **Properties Panels** — On-graph panels with four built-in types: Template, Markdown, Form, and View
-- **Theming** — Six built-in themes plus a CSS custom properties API with 70+ design tokens
-- **Layout Persistence** — Save and restore spatial arrangements to localStorage or any backend
-- **Event System** — Hook into 20+ lifecycle events for custom behavior without modifying core code
-- **Viewport Controls** — Pan, zoom, fullscreen, grid snap, zoom-to-fit, and auto-layout
+- **Node-Based Graph Editor** -- Drag-and-drop nodes with typed input/output ports and bezier or orthogonal connections
+- **Custom Card Types** -- Define reusable node types with the `PictFlowCard` base class; register categories, icons, port constraints, and body content
+- **Properties Panels** -- On-graph panels with four built-in types: Template, Markdown, Form, and View
+- **Theming** -- Six built-in themes plus a CSS custom properties API with 70+ design tokens
+- **Layout Persistence** -- Save and restore spatial arrangements to localStorage or any backend
+- **Event System** -- Hook into 20+ lifecycle events for custom behavior without modifying core code
+- **Viewport Controls** -- Pan, zoom, fullscreen, grid snap, zoom-to-fit, and auto-layout
 
 ## Installation
 
@@ -128,11 +128,11 @@ The `|| false` fallback ensures the build never fails if a markdown file is miss
 
 Full documentation is available at [https://stevenvelozo.github.io/pict-section-flow/](https://stevenvelozo.github.io/pict-section-flow/)
 
-- [Getting Started](https://stevenvelozo.github.io/pict-section-flow/#/Getting_Started) — First flow diagram in five minutes
-- [Architecture](https://stevenvelozo.github.io/pict-section-flow/#/Architecture) — Service/provider design and data flow
-- [Implementation Reference](https://stevenvelozo.github.io/pict-section-flow/#/Implementation_Reference) — Complete API surface
-- [Custom Styling](https://stevenvelozo.github.io/pict-section-flow/#/Custom-Styling) — CSS custom properties and theme API
-- [Layout Persistence](https://stevenvelozo.github.io/pict-section-flow/#/Layout_Persistence) — Save/restore with localStorage or REST
+- [Getting Started](https://stevenvelozo.github.io/pict-section-flow/#/Getting_Started) -- First flow diagram in five minutes
+- [Architecture](https://stevenvelozo.github.io/pict-section-flow/#/Architecture) -- Service/provider design and data flow
+- [Implementation Reference](https://stevenvelozo.github.io/pict-section-flow/#/Implementation_Reference) -- Complete API surface
+- [Custom Styling](https://stevenvelozo.github.io/pict-section-flow/#/Custom-Styling) -- CSS custom properties and theme API
+- [Layout Persistence](https://stevenvelozo.github.io/pict-section-flow/#/Layout_Persistence) -- Save/restore with localStorage or REST
 
 ## API Reference (Function Docs)
 
@@ -161,11 +161,11 @@ Detailed per-function documentation with code snippets:
 
 ## Related Packages
 
-- [pict](https://github.com/stevenvelozo/pict) — MVC application framework
-- [pict-view](https://github.com/stevenvelozo/pict-view) — View base class
-- [pict-provider](https://github.com/stevenvelozo/pict-provider) — Provider base class
-- [pict-section-form](https://github.com/stevenvelozo/pict-section-form) — Form sections (used for Form panels)
-- [fable](https://github.com/stevenvelozo/fable) — Service infrastructure
+- [pict](https://github.com/stevenvelozo/pict) -- MVC application framework
+- [pict-view](https://github.com/stevenvelozo/pict-view) -- View base class
+- [pict-provider](https://github.com/stevenvelozo/pict-provider) -- Provider base class
+- [pict-section-form](https://github.com/stevenvelozo/pict-section-form) -- Form sections (used for Form panels)
+- [fable](https://github.com/stevenvelozo/fable) -- Service infrastructure
 
 ## License
 

package/docs/Architecture.md

@@ -1,6 +1,6 @@
 # Architecture
 
-Pict-Section-Flow follows the standard Pict layered architecture — Views for rendering, Services for business logic, and Providers for configuration and stateless utilities. All components register with a Fable instance through the service provider pattern.
+Pict-Section-Flow follows the standard Pict layered architecture -- Views for rendering, Services for business logic, and Providers for configuration and stateless utilities. All components register with a Fable instance through the service provider pattern.
 
 ## High-Level Design
 

package/docs/Data_Model.md

@@ -106,8 +106,8 @@ A connection links an output port on one node to an input port on another.
 
 Connections support two path modes:
 
-- **Bezier** (default) — Smooth curves with one or more control handles. Right-click a connection to add a handle; drag handles to reshape the curve.
-- **Orthogonal** — Right-angle paths with two corner points. Double-click a connection handle to toggle between bezier and orthogonal modes.
+- **Bezier** (default) -- Smooth curves with one or more control handles. Right-click a connection to add a handle; drag handles to reshape the curve.
+- **Orthogonal** -- Right-angle paths with two corner points. Double-click a connection handle to toggle between bezier and orthogonal modes.
 
 ## Panel
 

package/docs/Getting_Started.md

@@ -1,6 +1,6 @@
 # Getting Started
 
-This guide walks you through creating a flow diagram from scratch — installing the package, registering a view, adding nodes and connections, and wiring up custom card types.
+This guide walks you through creating a flow diagram from scratch -- installing the package, registering a view, adding nodes and connections, and wiring up custom card types.
 
 ## Prerequisites
 
@@ -231,7 +231,7 @@ This produces a browser bundle in `dist/` that includes pict-section-flow and al
 
 ## Next Steps
 
-- **[Architecture](Architecture.md)** — Understand the service/provider design
-- **[Implementation Reference](Implementation_Reference.md)** — Full API for every method
-- **[Custom Styling](Custom-Styling.md)** — CSS variables and theme configuration
-- **[Layout Persistence](Layout_Persistence.md)** — Save layouts to localStorage or a REST API
+- **[Architecture](Architecture.md)** -- Understand the service/provider design
+- **[Implementation Reference](Implementation_Reference.md)** -- Full API for every method
+- **[Custom Styling](Custom-Styling.md)** -- CSS variables and theme configuration
+- **[Layout Persistence](Layout_Persistence.md)** -- Save layouts to localStorage or a REST API

package/docs/Implementation_Reference.md

@@ -2,7 +2,7 @@
 
 Complete API reference for Pict-Section-Flow. This document covers every public method on the main `PictViewFlow` class and the key internal services and providers developers interact with.
 
-## PictViewFlow — Main View API
+## PictViewFlow -- Main View API
 
 The primary class exported by `pict-section-flow`. Extends `pict-view`.
 
@@ -84,7 +84,7 @@ Delete a node and all its connections.
 |-----------|------|-------------|
 | `pNodeHash` | string | Hash of the node to remove |
 
-**Returns:** `boolean` — `true` if the node was found and removed.
+**Returns:** `boolean` -- `true` if the node was found and removed.
 
 ### addConnection(pSourceNode, pSourcePort, pTargetNode, pTargetPort, pData)
 
@@ -108,7 +108,7 @@ Delete a connection.
 |-----------|------|-------------|
 | `pConnectionHash` | string | Hash of the connection to remove |
 
-**Returns:** `boolean` — `true` if the connection was found and removed.
+**Returns:** `boolean` -- `true` if the connection was found and removed.
 
 ### getFlowData()
 
@@ -168,7 +168,7 @@ Clear all selections (node, connection, and tether).
 
 Delete the currently selected node or connection.
 
-**Returns:** `boolean` — `true` if something was deleted.
+**Returns:** `boolean` -- `true` if something was deleted.
 
 ---
 
@@ -196,7 +196,7 @@ Apply the current pan/zoom state to the SVG viewport group. Called automatically
 
 Toggle fullscreen overlay mode.
 
-**Returns:** `boolean` — the new fullscreen state.
+**Returns:** `boolean` -- the new fullscreen state.
 
 ### exitFullscreen()
 
@@ -466,7 +466,7 @@ Register a named theme.
 
 Activate a registered theme and re-render.
 
-**Returns:** `boolean` — `true` if the theme was found and activated.
+**Returns:** `boolean` -- `true` if the theme was found and activated.
 
 ### getActiveTheme()
 

package/docs/Layout_Persistence.md

@@ -4,7 +4,7 @@ Pict-Section-Flow can save and restore spatial arrangements of nodes and panels
 
 ## How It Works
 
-A **layout** captures the position, size, and viewport state of a flow diagram at a point in time. It does not store the flow's logical content (nodes, connections, data) — only where things are on screen.
+A **layout** captures the position, size, and viewport state of a flow diagram at a point in time. It does not store the flow's logical content (nodes, connections, data) -- only where things are on screen.
 
 Each saved layout contains:
 
@@ -79,8 +79,8 @@ 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).
+- **`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).
 
 ## Events
 

package/docs/README.md

@@ -2,7 +2,7 @@
 
 An interactive flow diagram section view for the [Pict](https://github.com/stevenvelozo/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.
+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
 
@@ -70,7 +70,7 @@ Developers define reusable node types by extending `PictFlowCard`. Each card dec
 
 ### 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`.
+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
 
@@ -112,21 +112,21 @@ tmpFlow._EventHandlerProvider.registerHandler('onFlowChanged',
 
 ## 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
+- **[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://github.com/stevenvelozo/pict) — Core MVC application framework
-- [pict-view](https://github.com/stevenvelozo/pict-view) — View base class
-- [pict-provider](https://github.com/stevenvelozo/pict-provider) — Provider base class
-- [pict-section-form](https://github.com/stevenvelozo/pict-section-form) — Form sections (used for Form panel type)
-- [fable](https://github.com/stevenvelozo/fable) — Service infrastructure and dependency injection
+- [pict](https://github.com/stevenvelozo/pict) -- Core MVC application framework
+- [pict-view](https://github.com/stevenvelozo/pict-view) -- View base class
+- [pict-provider](https://github.com/stevenvelozo/pict-provider) -- Provider base class
+- [pict-section-form](https://github.com/stevenvelozo/pict-section-form) -- Form sections (used for Form panel type)
+- [fable](https://github.com/stevenvelozo/fable) -- Service infrastructure and dependency injection
 
 ## License
 

package/docs/Theme_Integration.md

@@ -0,0 +1,150 @@
+# 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/retold-default.json'));
+pict.providers.Theme.applyTheme('retold-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/_cover.md

@@ -1,4 +1,4 @@
-# Pict-Section-Flow <small>0</small>
+# Pict-Section-Flow
 
 > Interactive flow diagram section view for the Pict application framework
 

package/docs/_sidebar.md

@@ -3,6 +3,7 @@
   - [Overview](/)
   - [Quick Start](Getting_Started.md)
   - [Custom Styling](Custom-Styling.md)
+  - [Theme Integration](Theme_Integration.md)
 
 - Architecture
 
@@ -15,7 +16,7 @@
   - [Implementation Reference](Implementation_Reference.md)
   - [Layout Persistence](Layout_Persistence.md)
 
-- API — Data Management
+- API -- Data Management
 
   - [addNode](api/addNode.md)
   - [removeNode](api/removeNode.md)
@@ -24,7 +25,7 @@
   - [getFlowData / setFlowData](api/getFlowData.md)
   - [marshalToView / marshalFromView](api/marshalToView.md)
 
-- API — Selection & Viewport
+- API -- Selection & Viewport
 
   - [selectNode / deselectAll](api/selectNode.md)
   - [setZoom / zoomToFit](api/setZoom.md)
@@ -32,20 +33,20 @@
   - [screenToSVGCoords](api/screenToSVGCoords.md)
   - [toggleFullscreen](api/toggleFullscreen.md)
 
-- API — Panels
+- API -- Panels
 
   - [openPanel / closePanel / togglePanel](api/openPanel.md)
 
-- API — Theming & Events
+- API -- Theming & Events
 
   - [setTheme / registerTheme](api/setTheme.md)
   - [registerHandler / fireEvent](api/registerHandler.md)
 
-- API — Layout Persistence
+- API -- Layout Persistence
 
   - [saveLayout / restoreLayout](api/saveLayout.md)
 
-- API — Extension Points
+- API -- Extension Points
 
   - [PictFlowCard](api/PictFlowCard.md)
   - [PictFlowCardPropertiesPanel](api/PictFlowCardPropertiesPanel.md)

package/docs/_version.json

@@ -0,0 +1,7 @@
+{
+	"Name": "pict-section-flow",
+	"Version": "0.0.17",
+	"Description": "Pict Section Flow Diagram",
+	"GeneratedAt": "2026-04-10T17:25:15.954Z",
+	"GitCommit": "90d4cd2"
+}

package/docs/api/PictFlowCard.md

@@ -60,8 +60,8 @@ Each port object:
 | `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) |
+| `PortType` | string | -- | Type for styling: `'event'`, `'setting'`, `'value'`, `'error'` |
+| `DataType` | string | -- | Semantic data type (for validation/display) |
 
 ### Label Display Options
 
@@ -111,7 +111,7 @@ Register this card with a flow view's node type provider.
 |-----------|------|-------------|
 | `pFlowView` | PictViewFlow | The flow view instance |
 
-**Returns:** `boolean` — whether registration succeeded.
+**Returns:** `boolean` -- whether registration succeeded.
 
 ## Examples
 
@@ -211,6 +211,6 @@ tmpCard.registerWithFlowView(flowView);
 
 ## See Also
 
-- [registerNodeType](registerNodeType.md) — Register types directly without PictFlowCard
-- [PictFlowCardPropertiesPanel](PictFlowCardPropertiesPanel.md) — Custom panel types
-- [addNode](addNode.md) — Create nodes from registered types
+- [registerNodeType](registerNodeType.md) -- Register types directly without PictFlowCard
+- [PictFlowCardPropertiesPanel](PictFlowCardPropertiesPanel.md) -- Custom panel types
+- [addNode](addNode.md) -- Create nodes from registered types

package/docs/api/PictFlowCardPropertiesPanel.md

@@ -231,5 +231,5 @@ class DataPreviewCard extends libPictFlowCard
 
 ## See Also
 
-- [PictFlowCard](PictFlowCard.md) — Define cards that use panels
-- [openPanel / closePanel](openPanel.md) — Panel lifecycle methods
+- [PictFlowCard](PictFlowCard.md) -- Define cards that use panels
+- [openPanel / closePanel](openPanel.md) -- Panel lifecycle methods

package/docs/api/addConnection.md

@@ -45,8 +45,8 @@ The connection object on success, or `false` if validation failed (e.g. duplicat
 
 ## Events Fired
 
-- `onConnectionCreated` — with the new connection object
-- `onFlowChanged` — with the complete flow data
+- `onConnectionCreated` -- with the new connection object
+- `onFlowChanged` -- with the complete flow data
 
 ## Examples
 
@@ -97,5 +97,5 @@ flowView.addConnection(tmpDecision.Hash, tmpNoPort.Hash, tmpFailure.Hash, tmpFai
 
 ## See Also
 
-- [removeConnection](removeConnection.md) — Delete a connection
-- [addNode](addNode.md) — Create nodes to connect
+- [removeConnection](removeConnection.md) -- Delete a connection
+- [addNode](addNode.md) -- Create nodes to connect

package/docs/api/addNode.md

@@ -46,8 +46,8 @@ The newly created node object:
 
 ## Events Fired
 
-- `onNodeAdded` — with the new node object
-- `onFlowChanged` — with the complete flow data
+- `onNodeAdded` -- with the new node object
+- `onFlowChanged` -- with the complete flow data
 
 ## Examples
 
@@ -131,7 +131,7 @@ buildPipeline(flowView,
 
 ## See Also
 
-- [removeNode](removeNode.md) — Delete a node
-- [getFlowData](getFlowData.md) — Retrieve the full flow state
-- [PictFlowCard](PictFlowCard.md) — Define custom node types
-- [registerNodeType](registerNodeType.md) — Register node types directly
+- [removeNode](removeNode.md) -- Delete a node
+- [getFlowData](getFlowData.md) -- Retrieve the full flow state
+- [PictFlowCard](PictFlowCard.md) -- Define custom node types
+- [registerNodeType](registerNodeType.md) -- Register node types directly

package/docs/api/autoLayout.md

@@ -73,5 +73,5 @@ flowView.autoLayout();
 
 ## See Also
 
-- [setZoom / zoomToFit](setZoom.md) — Fit the result in the viewport
-- [saveLayout / restoreLayout](saveLayout.md) — Persist spatial arrangements
+- [setZoom / zoomToFit](setZoom.md) -- Fit the result in the viewport
+- [saveLayout / restoreLayout](saveLayout.md) -- Persist spatial arrangements

package/docs/api/getFlowData.md

@@ -47,7 +47,7 @@ A deep clone of the complete flow state:
 
 ### Events Fired
 
-- `onFlowChanged` — with the new flow data
+- `onFlowChanged` -- with the new flow data
 
 ## Examples
 
@@ -103,10 +103,10 @@ console.log('Zoom:', tmpData.ViewState.Zoom);
 
 ## Related Methods
 
-- `getNode(pNodeHash)` — Retrieve a single node by hash
-- `getConnection(pConnectionHash)` — Retrieve a single connection by hash
+- `getNode(pNodeHash)` -- Retrieve a single node by hash
+- `getConnection(pConnectionHash)` -- Retrieve a single connection by hash
 
 ## See Also
 
-- [marshalToView / marshalFromView](marshalToView.md) — AppData two-way binding
-- [addNode](addNode.md) — Add individual nodes
+- [marshalToView / marshalFromView](marshalToView.md) -- AppData two-way binding
+- [addNode](addNode.md) -- Add individual nodes

package/docs/api/marshalToView.md

@@ -13,13 +13,13 @@ flowView.marshalFromView();
 
 Load flow data from the AppData address specified in `FlowDataAddress` into the view and render it.
 
-This is the "pull" direction: AppData → Flow View.
+This is the "pull" direction: AppData -> Flow View.
 
 ## marshalFromView
 
 Write the current flow data back to the AppData address specified in `FlowDataAddress`.
 
-This is the "push" direction: Flow View → AppData.
+This is the "push" direction: Flow View -> AppData.
 
 ## Configuration
 
@@ -92,4 +92,4 @@ tmpFlowView._EventHandlerProvider.registerHandler('onFlowChanged',
 
 ## See Also
 
-- [getFlowData / setFlowData](getFlowData.md) — Direct get/set without AppData
+- [getFlowData / setFlowData](getFlowData.md) -- Direct get/set without AppData

package/docs/api/openPanel.md

@@ -124,5 +124,5 @@ flowView._EventHandlerProvider.registerHandler('onPanelClosed',
 
 ## See Also
 
-- [PictFlowCard](PictFlowCard.md) — Define PropertiesPanel configuration on card types
-- [PictFlowCardPropertiesPanel](PictFlowCardPropertiesPanel.md) — Custom panel base class
+- [PictFlowCard](PictFlowCard.md) -- Define PropertiesPanel configuration on card types
+- [PictFlowCardPropertiesPanel](PictFlowCardPropertiesPanel.md) -- Custom panel base class

package/docs/api/registerHandler.md

@@ -169,6 +169,6 @@ flowView._EventHandlerProvider.registerHandler('onNodeAdded',
 
 ## See Also
 
-- [addNode](addNode.md) — Triggers `onNodeAdded` and `onFlowChanged`
-- [selectNode](selectNode.md) — Triggers `onNodeSelected`
-- [setTheme](setTheme.md) — Triggers `onThemeChanged`
+- [addNode](addNode.md) -- Triggers `onNodeAdded` and `onFlowChanged`
+- [selectNode](selectNode.md) -- Triggers `onNodeSelected`
+- [setTheme](setTheme.md) -- Triggers `onThemeChanged`

package/docs/api/registerNodeType.md

@@ -64,7 +64,7 @@ Retrieve a node type configuration by hash. Returns the default type if the hash
 
 ## getNodeTypes
 
-**Returns:** Map of all registered node types (hash → config).
+**Returns:** Map of all registered node types (hash -> config).
 
 ## getNodeTypeList
 
@@ -138,5 +138,5 @@ flowView._NodeTypeProvider.removeNodeType('FREAD');
 
 ## See Also
 
-- [PictFlowCard](PictFlowCard.md) — Higher-level card class (recommended approach)
-- [addNode](addNode.md) — Create nodes from registered types
+- [PictFlowCard](PictFlowCard.md) -- Higher-level card class (recommended approach)
+- [addNode](addNode.md) -- Create nodes from registered types