pict-section-flow 1.0.1 → 1.1.0

package/README.md

@@ -1,7 +1,8 @@
 # Pict-Section-Flow
 
-[![npm version](https://badge.fury.io/js/pict-section-flow.svg)](https://www.npmjs.com/package/pict-section-flow)
-[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
+> **[Read the Pict-Section-Flow Documentation](https://fable-retold.github.io/pict-section-flow/)**
+
+[pict-section-flow on npm](https://www.npmjs.com/package/pict-section-flow) | [MIT License](LICENSE)
 
 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.
 
@@ -112,6 +113,36 @@ The `|| false` fallback ensures the build never fails if a markdown file is miss
 | `MinZoom` | number | `0.1` | Minimum zoom level |
 | `MaxZoom` | number | `5.0` | Maximum zoom level |
 | `Theme` | string | `'default'` | Active theme key |
+| `ConnectionPropertiesPanel` | object/false | `false` | Properties panel config for connections (edges). When set, double-clicking a connection opens an on-graph panel for it. |
+
+## Connection (edge) panels
+
+Nodes carry a `PropertiesPanel` on their card type; connections are not typed, so a single
+`ConnectionPropertiesPanel` on the view config serves them all. Its shape matches a card's
+properties panel (`PanelType`, `DefaultWidth`, `DefaultHeight`, `Title`, `Configuration`) and any
+panel type works — a `Form` panel binds to the connection (editing `Record.Data.*`), a `Template`
+panel renders against it. When it is set, double-clicking a connection opens the panel near the
+edge midpoint and tethers to it; when it is not set, double-clicking a connection adds a bezier
+handle as before, so existing apps are unaffected.
+
+```javascript
+_Pict.addView('MyFlow',
+	{
+		ConnectionPropertiesPanel:
+		{
+			PanelType: 'Form',
+			Title: 'Connection',
+			DefaultWidth: 320,
+			Configuration: { Manifest: { /* sections + descriptors over Record.Data.* */ } }
+		}
+	},
+	libPictSectionFlow);
+
+// Programmatic control mirrors the node-panel API:
+tmpFlowView.openConnectionPanel(connectionHash);
+tmpFlowView.toggleConnectionPanel(connectionHash);
+tmpFlowView.closePanelForConnection(connectionHash);
+```
 
 ## Built-in Themes
 
@@ -126,13 +157,13 @@ The `|| false` fallback ensures the build never fails if a markdown file is miss
 
 ## Documentation
 
-Full documentation is available at [https://stevenvelozo.github.io/pict-section-flow/](https://stevenvelozo.github.io/pict-section-flow/)
+Full documentation is available at [https://fable-retold.github.io/pict-section-flow/](https://fable-retold.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://fable-retold.github.io/pict-section-flow/#/Getting_Started) -- First flow diagram in five minutes
+- [Architecture](https://fable-retold.github.io/pict-section-flow/#/Architecture) -- Service/provider design and data flow
+- [Implementation Reference](https://fable-retold.github.io/pict-section-flow/#/Implementation_Reference) -- Complete API surface
+- [Custom Styling](https://fable-retold.github.io/pict-section-flow/#/Custom-Styling) -- CSS custom properties and theme API
+- [Layout Persistence](https://fable-retold.github.io/pict-section-flow/#/Layout_Persistence) -- Save/restore with localStorage or REST
 
 ## API Reference (Function Docs)
 
@@ -161,11 +192,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/fable-retold/pict) -- MVC application framework
+- [pict-view](https://github.com/fable-retold/pict-view) -- View base class
+- [pict-provider](https://github.com/fable-retold/pict-provider) -- Provider base class
+- [pict-section-form](https://github.com/fable-retold/pict-section-form) -- Form sections (used for Form panels)
+- [fable](https://github.com/fable-retold/fable) -- Service infrastructure
 
 ## License
 

package/docs/Architecture.md

@@ -4,143 +4,22 @@ Pict-Section-Flow follows the standard Pict layered architecture -- Views for re
 
 ## High-Level Design
 
-```mermaid
-graph TB
-    subgraph Application["Your Application"]
-        AppCode[Application Code]
-        AppData[Pict AppData Store]
-    end
-
-    subgraph FlowView["PictViewFlow (Main Entry Point)"]
-        direction TB
-        FV[PictViewFlow]
-    end
-
-    subgraph Views["Views (Rendering)"]
-        NodeView[Flow Node View]
-        ToolbarView[Toolbar View]
-        FloatingToolbar[Floating Toolbar View]
-        PanelView[Properties Panel View]
-    end
-
-    subgraph Services["Services (Business Logic)"]
-        DM[DataManager]
-        RM[RenderManager]
-        SM[SelectionManager]
-        VM[ViewportManager]
-        PM[PanelManager]
-        IM[InteractionManager]
-        LS[Layout Service]
-        CR[ConnectionRenderer]
-        PG[PathGenerator]
-        PR[PortRenderer]
-        CHM[ConnectionHandleManager]
-        TM[Tether Service]
-    end
-
-    subgraph Providers["Providers (Configuration)"]
-        NTP[NodeTypes Provider]
-        EHP[EventHandler Provider]
-        LP[Layouts Provider]
-        TP[Theme Provider]
-        CP[CSS Provider]
-        GP[Geometry Provider]
-        NP[Noise Provider]
-        SVG[SVGHelpers Provider]
-        CSP[ConnectorShapes Provider]
-        IP[Icons Provider]
-        PCP[PanelChrome Provider]
-    end
-
-    subgraph Extension["Extension Points"]
-        FC[PictFlowCard]
-        FCP[PictFlowCardPropertiesPanel]
-        PT[Panel: Template]
-        PMD[Panel: Markdown]
-        PF[Panel: Form]
-        PVW[Panel: View]
-    end
-
-    AppCode --> FV
-    FV <--> AppData
-    FV --> Views
-    FV --> Services
-    FV --> Providers
-
-    DM <--> AppData
-    RM --> NodeView
-    RM --> CR
-    PM --> PanelView
-    IM --> SM
-    IM --> VM
-    CR --> PG
-    CR --> PR
-
-    FC --> NTP
-    FCP --> PM
-    PT --> PanelView
-    PMD --> PanelView
-    PF --> PanelView
-    PVW --> PanelView
-
-    EHP --> AppCode
-
-    style Application fill:#e8f5e9,stroke:#42b983,color:#333
-    style FlowView fill:#e3f2fd,stroke:#42a5f5,color:#333
-    style Views fill:#fce4ec,stroke:#ef5350,color:#333
-    style Services fill:#fff3e0,stroke:#ffa726,color:#333
-    style Providers fill:#f3e5f5,stroke:#ab47bc,color:#333
-    style Extension fill:#e0f2f1,stroke:#26a69a,color:#333
-```
+<!-- bespoke diagram: edit diagrams/high-level-design.mmd or .hints.json, then: npx pict-renderer-graph build modules/pict/pict-section-flow/docs -->
+![High-Level Design](diagrams/high-level-design.svg)
 
 ## Data Flow
 
 All mutations flow through a predictable pipeline:
 
-```mermaid
-sequenceDiagram
-    participant App as Application
-    participant FV as PictViewFlow
-    participant DM as DataManager
-    participant EH as EventHandler
-    participant RM as RenderManager
-
-    App->>FV: addNode('start', 50, 100, 'Begin')
-    FV->>DM: addNode(pType, pX, pY, pTitle, pData)
-    DM->>DM: Create node object with UUID hash
-    DM->>DM: Merge default ports from NodeType
-    DM->>EH: fireEvent('onNodeAdded', node)
-    DM->>EH: fireEvent('onFlowChanged', flowData)
-    DM->>RM: renderFlow()
-    RM->>RM: Render SVG nodes, connections, tethers, panels
-    DM-->>FV: Return node object
-    FV-->>App: Return node object
-```
+<!-- bespoke diagram: edit diagrams/data-flow.mmd or .hints.json, then: npx pict-renderer-graph build modules/pict/pict-section-flow/docs -->
+![Data Flow](diagrams/data-flow.svg)
 
 ## SVG Layer Structure
 
 The rendering system uses SVG group elements in a specific z-order:
 
-```mermaid
-graph TB
-    subgraph SVG["SVG Canvas"]
-        Grid["Grid Background (pattern)"]
-        subgraph Viewport["Viewport Group (pan/zoom transform)"]
-            Connections["Connections Layer (bezier/orthogonal paths)"]
-            Nodes["Nodes Layer (rect + ports + labels)"]
-            Tethers["Tethers Layer (panel-to-node lines)"]
-            Panels["Panels Layer (foreignObject panels)"]
-        end
-    end
-
-    Grid --> Viewport
-    Connections --> Nodes
-    Nodes --> Tethers
-    Tethers --> Panels
-
-    style SVG fill:#f5f5f5,stroke:#bdbdbd,color:#333
-    style Viewport fill:#e3f2fd,stroke:#42a5f5,color:#333
-```
+<!-- bespoke diagram: edit diagrams/svg-layer-structure.mmd or .hints.json, then: npx pict-renderer-graph build modules/pict/pict-section-flow/docs -->
+![SVG Layer Structure](diagrams/svg-layer-structure.svg)
 
 Connections render behind nodes so lines do not obscure node bodies. Tethers render above nodes so the connecting line from a panel to its node is always visible. Panels render last so they float above everything.
 
@@ -262,27 +141,8 @@ The canonical flow state is a plain JavaScript object:
 
 When PictViewFlow initializes, it follows a declarative registry to instantiate all components:
 
-```mermaid
-sequenceDiagram
-    participant App as Application
-    participant FV as PictViewFlow
-    participant PR as Providers
-    participant SV as Services
-    participant VW as Child Views
-
-    App->>FV: new PictViewFlow(fable, options)
-    FV->>PR: Register & instantiate providers
-    Note over PR: SVGHelpers, Geometry, Noise (no FlowView ref)
-    Note over PR: Theme, CSS, Icons, NodeTypes, EventHandler, Layouts (with FlowView ref)
-    FV->>SV: Register & instantiate services
-    Note over SV: DataManager, RenderManager, SelectionManager, etc.
-    FV->>VW: Register & instantiate child views
-    Note over VW: Node, Toolbar, FloatingToolbar, PropertiesPanel
-
-    App->>FV: render()
-    FV->>SV: DataManager.marshalToView()
-    FV->>SV: RenderManager.renderFlow()
-```
+<!-- bespoke diagram: edit diagrams/service-initialization-sequence.mmd or .hints.json, then: npx pict-renderer-graph build modules/pict/pict-section-flow/docs -->
+![Service Initialization Sequence](diagrams/service-initialization-sequence.svg)
 
 ## Design Patterns
 

package/docs/Data_Model.md

@@ -145,14 +145,5 @@ Viewport and selection state, persisted with the flow data.
 
 ## Relationships
 
-```mermaid
-erDiagram
-    FlowData ||--o{ Node : contains
-    FlowData ||--o{ Connection : contains
-    FlowData ||--o{ Panel : contains
-    FlowData ||--|| ViewState : has
-    Node ||--o{ Port : has
-    Connection }o--|| Port : "source port"
-    Connection }o--|| Port : "target port"
-    Panel }o--|| Node : "attached to"
-```
+<!-- bespoke diagram: edit diagrams/relationships.mmd or .hints.json, then: npx pict-renderer-graph build modules/pict/pict-section-flow/docs -->
+![Relationships](diagrams/relationships.svg)

package/docs/README.md

@@ -1,6 +1,6 @@
 # Pict-Section-Flow
 
-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.
+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.
 
@@ -19,38 +19,8 @@ All interaction is driven by a JSON data structure that represents the flow grap
 
 ## Architecture at a Glance
 
-```mermaid
-graph TD
-    A[Your Application] --> B[PictViewFlow]
-    B --> C[Services]
-    B --> D[Providers]
-    B --> E[Views]
-
-    C --> C1[DataManager]
-    C --> C2[RenderManager]
-    C --> C3[SelectionManager]
-    C --> C4[ViewportManager]
-    C --> C5[PanelManager]
-    C --> C6[InteractionManager]
-    C --> C7[Layout Service]
-
-    D --> D1[NodeTypes]
-    D --> D2[EventHandler]
-    D --> D3[Layouts]
-    D --> D4[Theme]
-    D --> D5[CSS]
-    D --> D6[Geometry]
-
-    E --> E1[Flow Node View]
-    E --> E2[Toolbar View]
-    E --> E3[Properties Panel View]
-
-    style A fill:#e8f5e9,stroke:#42b983,color:#333
-    style B fill:#e3f2fd,stroke:#42a5f5,color:#333
-    style C fill:#fff3e0,stroke:#ffa726,color:#333
-    style D fill:#f3e5f5,stroke:#ab47bc,color:#333
-    style E fill:#fce4ec,stroke:#ef5350,color:#333
-```
+<!-- 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:
 
@@ -122,11 +92,11 @@ tmpFlow._EventHandlerProvider.registerHandler('onFlowChanged',
 
 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://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
 

package/docs/Theme_Integration.md

@@ -2,8 +2,8 @@
 
 `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`.
+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.
 
@@ -18,7 +18,7 @@ pict.providers.Theme.registerTheme(require('pict-provider-theme/source/themes/pi
 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:
+...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.
@@ -28,7 +28,7 @@ No code changes are required in host apps beyond installing and applying `pict-p
 
 ## Token mapping
 
-| Flow token (`--pf-…`) | Host token (`--theme-color-…`) | Hardcoded fallback |
+| Flow token (`--pf-...`) | Host token (`--theme-color-...`) | Hardcoded fallback |
 |---|---|---|
 | `--pf-text-primary` | `text-primary` | `#2c3e50` |
 | `--pf-text-secondary` | `text-secondary` | `#7f8c8d` |
@@ -83,7 +83,7 @@ The five default node types ship with roles wired up:
 | `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.
+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
 
@@ -91,7 +91,7 @@ Their hex `TitleBarColor` / `BodyStyle` fields remain as fallbacks for code path
 flowView._NodeTypeProvider.registerNodeType('my-card-type', {
     Hash: 'my-card-type',
     Label: 'My Card',
-    DefaultPorts: [ /* … */ ],
+    DefaultPorts: [ /* ... */ ],
     ColorRole: 'info',                     // theme-aware
     TitleBarColor: '#3498db',              // optional fallback
     BodyStyle: { fill: '#ebf5fb' }         // optional fallback
@@ -109,7 +109,7 @@ flowData.Nodes.push({
     Hash: 'node-special',
     Type: 'my-card-type',
     ColorRole: 'warning',                  // override the type's role
-    // …
+    // ...
 });
 ```
 
@@ -137,14 +137,14 @@ To define new roles, add `--pf-color-<role>` / `--pf-color-<role>-soft` tokens a
 
 ## 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.
+`<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 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.
+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.
+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

@@ -7,5 +7,11 @@
 - Six built-in themes with 70+ CSS design tokens
 - Layout persistence to localStorage or any backend
 
-[GitHub](https://github.com/stevenvelozo/pict-section-flow)
+[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

@@ -0,0 +1,24 @@
+{
+	"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

@@ -51,3 +51,7 @@
   - [PictFlowCard](api/PictFlowCard.md)
   - [PictFlowCardPropertiesPanel](api/PictFlowCardPropertiesPanel.md)
   - [registerNodeType](api/registerNodeType.md)
+
+- Examples
+
+  - [Simple Cards](#/page/examples/simple_cards/README)

package/docs/_topbar.md

@@ -5,4 +5,4 @@
 - [Architecture](Architecture.md)
 - [API Reference](Implementation_Reference.md)
 - [Custom Styling](Custom-Styling.md)
-- [GitHub](https://github.com/stevenvelozo/pict-section-flow)
+- [GitHub](https://github.com/fable-retold/pict-section-flow)

package/docs/_version.json

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

package/docs/card-help/FREAD.md

@@ -21,4 +21,4 @@ When triggered, the node reads the file at the configured path. On success, the
 
 - Use a Get Value node upstream to dynamically set the file path
 - Pair with a Data Preview node to inspect the file contents
-- Connect the **Error** output to logging or notification nodes for robust error handling
+- Connect the **Error** output to logging or notification nodes for reliable error handling