pict-section-flow 0.0.16 → 0.0.18

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (84) hide show
  1. package/README.md +18 -18
  2. package/docs/Architecture.md +1 -1
  3. package/docs/Data_Model.md +2 -2
  4. package/docs/Getting_Started.md +5 -5
  5. package/docs/Implementation_Reference.md +6 -6
  6. package/docs/Layout_Persistence.md +3 -3
  7. package/docs/README.md +12 -12
  8. package/docs/_cover.md +1 -1
  9. package/docs/_sidebar.md +6 -6
  10. package/docs/_version.json +7 -0
  11. package/docs/api/PictFlowCard.md +6 -6
  12. package/docs/api/PictFlowCardPropertiesPanel.md +2 -2
  13. package/docs/api/addConnection.md +4 -4
  14. package/docs/api/addNode.md +6 -6
  15. package/docs/api/autoLayout.md +2 -2
  16. package/docs/api/getFlowData.md +5 -5
  17. package/docs/api/marshalToView.md +3 -3
  18. package/docs/api/openPanel.md +2 -2
  19. package/docs/api/registerHandler.md +3 -3
  20. package/docs/api/registerNodeType.md +3 -3
  21. package/docs/api/removeConnection.md +5 -5
  22. package/docs/api/removeNode.md +6 -6
  23. package/docs/api/saveLayout.md +2 -2
  24. package/docs/api/screenToSVGCoords.md +2 -2
  25. package/docs/api/selectNode.md +3 -3
  26. package/docs/api/setTheme.md +2 -2
  27. package/docs/api/setZoom.md +3 -3
  28. package/docs/api/toggleFullscreen.md +2 -2
  29. package/docs/card-help/EACH.md +3 -3
  30. package/docs/card-help/FREAD.md +5 -5
  31. package/docs/card-help/FWRITE.md +5 -5
  32. package/docs/card-help/GET.md +2 -2
  33. package/docs/card-help/ITE.md +3 -3
  34. package/docs/card-help/LOG.md +4 -4
  35. package/docs/card-help/NOTE.md +1 -1
  36. package/docs/card-help/PREV.md +2 -2
  37. package/docs/card-help/SET.md +5 -5
  38. package/docs/card-help/SPKL.md +2 -2
  39. package/docs/card-help/STAT.md +3 -3
  40. package/docs/card-help/SW.md +4 -4
  41. package/docs/css/docuserve.css +277 -23
  42. package/docs/index.html +2 -2
  43. package/docs/retold-catalog.json +1 -1
  44. package/docs/retold-keyword-index.json +1 -1
  45. package/example_applications/simple_cards/css/flowexample.css +2 -2
  46. package/example_applications/simple_cards/source/card-help-content.js +12 -12
  47. package/example_applications/simple_cards/source/cards/FlowCard-DataPreview.js +1 -1
  48. package/example_applications/simple_cards/source/sample-flows.js +410 -0
  49. package/example_applications/simple_cards/source/views/PictView-FlowExample-About.js +5 -5
  50. package/example_applications/simple_cards/source/views/PictView-FlowExample-Documentation.js +5 -5
  51. package/example_applications/simple_cards/source/views/PictView-FlowExample-FileWriteInfo.js +4 -4
  52. package/example_applications/simple_cards/source/views/PictView-FlowExample-MainWorkspace.js +141 -8
  53. package/example_applications/simple_cards/source/views/PictView-FlowExample-TopBar.js +2 -2
  54. package/package.json +3 -2
  55. package/source/Pict-Section-Flow.js +26 -0
  56. package/source/providers/PictProvider-Flow-CSS.js +244 -14
  57. package/source/providers/PictProvider-Flow-Theme.js +7 -7
  58. package/source/providers/edges/Edge-Bezier.js +41 -0
  59. package/source/providers/edges/Edge-Orthogonal.js +37 -0
  60. package/source/providers/edges/Edge-OrthogonalSnap.js +72 -0
  61. package/source/providers/edges/Edge-Perimeter-Linear.js +31 -0
  62. package/source/providers/edges/Edge-Perimeter-Orthogonal.js +39 -0
  63. package/source/providers/edges/Edge-Perimeter.js +48 -0
  64. package/source/providers/edges/Edge-PerimeterMath.js +92 -0
  65. package/source/providers/edges/Edge-Straight.js +24 -0
  66. package/source/providers/layouts/Layout-Circular.js +203 -0
  67. package/source/providers/layouts/Layout-Coerce.js +40 -0
  68. package/source/providers/layouts/Layout-Columnar.js +134 -0
  69. package/source/providers/layouts/Layout-Custom.js +27 -0
  70. package/source/providers/layouts/Layout-ForcedFromCenter.js +256 -0
  71. package/source/providers/layouts/Layout-Grid.js +134 -0
  72. package/source/providers/layouts/Layout-Layered.js +209 -0
  73. package/source/providers/layouts/Layout-Tabular.js +94 -0
  74. package/source/services/PictService-Flow-ConnectionRenderer.js +532 -28
  75. package/source/services/PictService-Flow-DataManager.js +12 -1
  76. package/source/services/PictService-Flow-Layout.js +305 -121
  77. package/source/services/PictService-Flow-PortRenderer.js +122 -26
  78. package/source/services/PictService-Flow-RenderManager.js +41 -11
  79. package/source/views/PictView-Flow-FloatingToolbar.js +3 -3
  80. package/source/views/PictView-Flow-Node.js +28 -0
  81. package/source/views/PictView-Flow-Toolbar.js +715 -10
  82. package/source/views/PictView-Flow.js +272 -5
  83. package/test/Layout_tests.js +1400 -0
  84. package/test/PortRenderer_tests.js +11 -2
@@ -4,10 +4,10 @@ The **File Write** node writes data to a file on the filesystem.
4
4
 
5
5
  ## Ports
6
6
 
7
- - **Path** (input) the destination filesystem path
8
- - **Data** (input) the content to write
9
- - **Done** (output) fires after a successful write
10
- - **Error** (output) fires if the write operation fails
7
+ - **Path** (input) -- the destination filesystem path
8
+ - **Data** (input) -- the content to write
9
+ - **Done** (output) -- fires after a successful write
10
+ - **Error** (output) -- fires if the write operation fails
11
11
 
12
12
  ## Behavior
13
13
 
@@ -19,6 +19,6 @@ The properties panel shows a View-based info panel with details about the config
19
19
 
20
20
  ## Tips
21
21
 
22
- - Directories in the path are not created automatically ensure they exist before writing
22
+ - Directories in the path are not created automatically -- ensure they exist before writing
23
23
  - Combine with a Set Value node to format data before writing
24
24
  - Connect the **Error** output to a Log Values node to capture write failures
@@ -4,8 +4,8 @@ The **Get Value** node retrieves a named variable from the flow context and emit
4
4
 
5
5
  ## Ports
6
6
 
7
- - **In** (input) trigger to read the value
8
- - **Value** (output) the retrieved value
7
+ - **In** (input) -- trigger to read the value
8
+ - **Value** (output) -- the retrieved value
9
9
 
10
10
  ## Behavior
11
11
 
@@ -4,9 +4,9 @@ The **If-Then-Else** node evaluates a boolean condition expression and routes th
4
4
 
5
5
  ## Ports
6
6
 
7
- - **In** (input) trigger that starts the evaluation
8
- - **Then** (output) activated when the condition is **true**
9
- - **Else** (output) activated when the condition is **false**
7
+ - **In** (input) -- trigger that starts the evaluation
8
+ - **Then** (output) -- activated when the condition is **true**
9
+ - **Else** (output) -- activated when the condition is **false**
10
10
 
11
11
  ## Behavior
12
12
 
@@ -4,13 +4,13 @@ The **Log Values** node writes incoming data to the console or log output for de
4
4
 
5
5
  ## Ports
6
6
 
7
- - **Values** (input, multi) accepts one or more connections carrying values to log
8
- - **Pass** (output) passes the last received value through unchanged
7
+ - **Values** (input, multi) -- accepts one or more connections carrying values to log
8
+ - **Pass** (output) -- passes the last received value through unchanged
9
9
 
10
10
  ## Properties
11
11
 
12
- - **LogLevel** the severity level for the log entry (e.g. `info`, `warn`, `error`, `trace`)
13
- - **Format** an optional format string controlling how values are serialized
12
+ - **LogLevel** -- the severity level for the log entry (e.g. `info`, `warn`, `error`, `trace`)
13
+ - **Format** -- an optional format string controlling how values are serialized
14
14
 
15
15
  ## Behavior
16
16
 
@@ -8,7 +8,7 @@ Drop a Comment node anywhere on the canvas to add context, explain design decisi
8
8
 
9
9
  ## Properties
10
10
 
11
- - **NoteText** the annotation content displayed in the node body
11
+ - **NoteText** -- the annotation content displayed in the node body
12
12
 
13
13
  ## Tips
14
14
 
@@ -4,8 +4,8 @@ The **Data Preview** node displays a tabular summary of the data flowing through
4
4
 
5
5
  ## Ports
6
6
 
7
- - **Data** (input) the data object to inspect
8
- - **Pass** (output) passes the data through unchanged
7
+ - **Data** (input) -- the data object to inspect
8
+ - **Pass** (output) -- passes the data through unchanged
9
9
 
10
10
  ## Behavior
11
11
 
@@ -4,13 +4,13 @@ The **Set Value** node assigns a value to a named variable in the flow context.
4
4
 
5
5
  ## Ports
6
6
 
7
- - **In** (input) trigger to perform the assignment
8
- - **Out** (output) fires after the value has been set
7
+ - **In** (input) -- trigger to perform the assignment
8
+ - **Out** (output) -- fires after the value has been set
9
9
 
10
10
  ## Properties
11
11
 
12
- - **Variable Name** the key under which the value will be stored
13
- - **Value Expression** the expression to evaluate and assign
12
+ - **Variable Name** -- the key under which the value will be stored
13
+ - **Value Expression** -- the expression to evaluate and assign
14
14
 
15
15
  ## Behavior
16
16
 
@@ -22,6 +22,6 @@ Open the properties panel to configure the variable name and value expression us
22
22
 
23
23
  ## Tips
24
24
 
25
- - Variable names are case-sensitive use consistent naming conventions
25
+ - Variable names are case-sensitive -- use consistent naming conventions
26
26
  - Value expressions have access to the current flow context
27
27
  - Use Set Value at the beginning of a flow to initialize default variables
@@ -4,8 +4,8 @@ The **Sparkline** node renders a live sparkline chart visualizing numeric throug
4
4
 
5
5
  ## Ports
6
6
 
7
- - **Values** (input) a numeric array or stream of values to plot
8
- - **Stats** (output) emits computed statistics (min, max, mean) for the data set
7
+ - **Values** (input) -- a numeric array or stream of values to plot
8
+ - **Stats** (output) -- emits computed statistics (min, max, mean) for the data set
9
9
 
10
10
  ## Behavior
11
11
 
@@ -4,9 +4,9 @@ The **Status Monitor** node monitors the health status of upstream services and
4
4
 
5
5
  ## Ports
6
6
 
7
- - **Check** (input, multi) accepts connections from one or more services to monitor
8
- - **Healthy** (output) fires when all monitored services report healthy
9
- - **Degraded** (output) fires when one or more services report degraded status
7
+ - **Check** (input, multi) -- accepts connections from one or more services to monitor
8
+ - **Healthy** (output) -- fires when all monitored services report healthy
9
+ - **Degraded** (output) -- fires when one or more services report degraded status
10
10
 
11
11
  ## Behavior
12
12
 
@@ -4,10 +4,10 @@ The **Switch** node routes execution to one of multiple outputs based on a match
4
4
 
5
5
  ## Ports
6
6
 
7
- - **In** (input) the value to match against cases
8
- - **Case A** (output) fires when the input matches case A
9
- - **Case B** (output) fires when the input matches case B
10
- - **Default** (output) fires when the input does not match any defined case
7
+ - **In** (input) -- the value to match against cases
8
+ - **Case A** (output) -- fires when the input matches case A
9
+ - **Case B** (output) -- fires when the input matches case B
10
+ - **Default** (output) -- fires when the input does not match any defined case
11
11
 
12
12
  ## Behavior
13
13
 
@@ -1,73 +1,327 @@
1
1
  /* ============================================================================
2
- Pict Docuserve - Base Styles
2
+ Pict Docuserve - Base Styles & Theme Variables
3
3
  ============================================================================ */
4
4
 
5
- /* Reset and base */
6
- *, *::before, *::after {
5
+ /* ----------------------------------------------------------------------------
6
+ Theme variables light defaults on :root.
7
+ Dark mode applies when either:
8
+ (a) the user explicitly selected dark via <html data-theme="dark">
9
+ (b) the user hasn't chosen anything AND the system prefers dark
10
+ An explicit <html data-theme="light"> pins the light palette regardless.
11
+ ---------------------------------------------------------------------------- */
12
+
13
+ :root
14
+ {
15
+ /* Surfaces */
16
+ --docuserve-bg: #FDFBF7;
17
+ --docuserve-bg-elevated: #FFFFFF;
18
+ --docuserve-border: #DDD6CA;
19
+ --docuserve-border-soft: #EAE3D8;
20
+
21
+ /* Text */
22
+ --docuserve-text: #2A241E;
23
+ --docuserve-text-strong: #3D3229;
24
+ --docuserve-text-muted: #5E5549;
25
+ --docuserve-text-dim: #8A7F72;
26
+
27
+ /* Accent / links */
28
+ --docuserve-accent: #2E7D74;
29
+ --docuserve-accent-hover: #236660;
30
+
31
+ /* Top bar */
32
+ --docuserve-topbar-bg: #3D3229;
33
+ --docuserve-topbar-text: #E8E0D4;
34
+ --docuserve-topbar-text-muted: #B5AA9A;
35
+ --docuserve-topbar-text-dim: #8A7F72;
36
+ --docuserve-topbar-hover-bg: #524438;
37
+ --docuserve-topbar-version-bg: rgba(255, 255, 255, 0.06);
38
+ --docuserve-topbar-version-border: rgba(255, 255, 255, 0.08);
39
+ --docuserve-topbar-version-text: #B5AA9A;
40
+
41
+ /* Sidebar */
42
+ --docuserve-sidebar-bg: #FAF7F1;
43
+ --docuserve-sidebar-border: #DDD6CA;
44
+ --docuserve-sidebar-border-soft: #E5DED1;
45
+ --docuserve-sidebar-text: #423D37;
46
+ --docuserve-sidebar-group-title: #3D3229;
47
+ --docuserve-sidebar-module-text: #5E5549;
48
+ --docuserve-sidebar-hover-bg: #EAE3D8;
49
+ --docuserve-sidebar-hover-text: #2E7D74;
50
+ --docuserve-sidebar-active-bg: #E5DED1;
51
+ --docuserve-sidebar-active-text: #2E7D74;
52
+ --docuserve-sidebar-search-bg: #FFFFFF;
53
+ --docuserve-sidebar-search-border: #DDD6CA;
54
+
55
+ /* Inline code */
56
+ --docuserve-inline-code-bg: #F0ECE4;
57
+ --docuserve-inline-code-text: #9E3A50;
58
+
59
+ /* Code block panel */
60
+ --docuserve-code-bg: #F6F3EE;
61
+ --docuserve-code-border: #E5DED1;
62
+ --docuserve-code-gutter-bg: #EFEAE0;
63
+ --docuserve-code-gutter-border: #DDD6CA;
64
+ --docuserve-code-gutter-text: #A59986;
65
+ --docuserve-code-text: #2A241E;
66
+
67
+ /* Syntax tokens — low-chroma dark-on-light palette */
68
+ --docuserve-tok-keyword: #A03472;
69
+ --docuserve-tok-string: #1A6640;
70
+ --docuserve-tok-number: #B25A00;
71
+ --docuserve-tok-comment: #8A7F72;
72
+ --docuserve-tok-operator: #2E7D74;
73
+ --docuserve-tok-punctuation: #2A241E;
74
+ --docuserve-tok-function: #2A5DB0;
75
+ --docuserve-tok-property: #9E3A50;
76
+ --docuserve-tok-tag: #9E3A50;
77
+ --docuserve-tok-attr-name: #B25A00;
78
+ --docuserve-tok-attr-value: #1A6640;
79
+
80
+ /* Tables, blockquotes, mermaid */
81
+ --docuserve-table-header-bg: #F5F0E8;
82
+ --docuserve-table-row-alt-bg: #F9F6F0;
83
+ --docuserve-blockquote-bg: #F7F5F0;
84
+ --docuserve-blockquote-border: #2E7D74;
85
+ --docuserve-blockquote-text: #5E5549;
86
+ --docuserve-mermaid-bg: #FFFFFF;
87
+
88
+ /* Scrollbars */
89
+ --docuserve-scrollbar-track: #F5F0E8;
90
+ --docuserve-scrollbar-thumb: #D4CCBE;
91
+ --docuserve-scrollbar-thumb-hover: #B5AA9A;
92
+ }
93
+
94
+ @media (prefers-color-scheme: dark)
95
+ {
96
+ :root:not([data-theme="light"])
97
+ {
98
+ --docuserve-bg: #15120F;
99
+ --docuserve-bg-elevated: #1B1814;
100
+ --docuserve-border: #2F2823;
101
+ --docuserve-border-soft: #26211C;
102
+
103
+ --docuserve-text: #E8E0D4;
104
+ --docuserve-text-strong: #F2ECE0;
105
+ --docuserve-text-muted: #B5AA9A;
106
+ --docuserve-text-dim: #7A6F62;
107
+
108
+ --docuserve-accent: #5DB8A8;
109
+ --docuserve-accent-hover: #7FCCB8;
110
+
111
+ --docuserve-topbar-bg: #1A1612;
112
+ --docuserve-topbar-text: #E8E0D4;
113
+ --docuserve-topbar-text-muted: #B5AA9A;
114
+ --docuserve-topbar-text-dim: #7A6F62;
115
+ --docuserve-topbar-hover-bg: #2A241E;
116
+ --docuserve-topbar-version-bg: rgba(255, 255, 255, 0.05);
117
+ --docuserve-topbar-version-border: rgba(255, 255, 255, 0.09);
118
+ --docuserve-topbar-version-text: #B5AA9A;
119
+
120
+ --docuserve-sidebar-bg: #1B1814;
121
+ --docuserve-sidebar-border: #2F2823;
122
+ --docuserve-sidebar-border-soft: #26211C;
123
+ --docuserve-sidebar-text: #C9C0B3;
124
+ --docuserve-sidebar-group-title: #F2ECE0;
125
+ --docuserve-sidebar-module-text: #B5AA9A;
126
+ --docuserve-sidebar-hover-bg: #2A241E;
127
+ --docuserve-sidebar-hover-text: #7FCCB8;
128
+ --docuserve-sidebar-active-bg: #2F2823;
129
+ --docuserve-sidebar-active-text: #7FCCB8;
130
+ --docuserve-sidebar-search-bg: #26211C;
131
+ --docuserve-sidebar-search-border: #2F2823;
132
+
133
+ --docuserve-inline-code-bg: #2A241E;
134
+ --docuserve-inline-code-text: #E8B07A;
135
+
136
+ --docuserve-code-bg: #1E1A17;
137
+ --docuserve-code-border: #2F2823;
138
+ --docuserve-code-gutter-bg: #17130F;
139
+ --docuserve-code-gutter-border: #2F2823;
140
+ --docuserve-code-gutter-text: #6A6052;
141
+ --docuserve-code-text: #E8E0D4;
142
+
143
+ --docuserve-tok-keyword: #C678DD;
144
+ --docuserve-tok-string: #98C379;
145
+ --docuserve-tok-number: #D19A66;
146
+ --docuserve-tok-comment: #7F848E;
147
+ --docuserve-tok-operator: #56B6C2;
148
+ --docuserve-tok-punctuation: #E8E0D4;
149
+ --docuserve-tok-function: #61AFEF;
150
+ --docuserve-tok-property: #E06C75;
151
+ --docuserve-tok-tag: #E06C75;
152
+ --docuserve-tok-attr-name: #D19A66;
153
+ --docuserve-tok-attr-value: #98C379;
154
+
155
+ --docuserve-table-header-bg: #26211C;
156
+ --docuserve-table-row-alt-bg: #1F1B17;
157
+ --docuserve-blockquote-bg: #1F1B17;
158
+ --docuserve-blockquote-border: #5DB8A8;
159
+ --docuserve-blockquote-text: #C9C0B3;
160
+ --docuserve-mermaid-bg: #E8E0D4;
161
+
162
+ --docuserve-scrollbar-track: #1B1814;
163
+ --docuserve-scrollbar-thumb: #3A322B;
164
+ --docuserve-scrollbar-thumb-hover: #524438;
165
+ }
166
+ }
167
+
168
+ :root[data-theme="dark"]
169
+ {
170
+ --docuserve-bg: #15120F;
171
+ --docuserve-bg-elevated: #1B1814;
172
+ --docuserve-border: #2F2823;
173
+ --docuserve-border-soft: #26211C;
174
+
175
+ --docuserve-text: #E8E0D4;
176
+ --docuserve-text-strong: #F2ECE0;
177
+ --docuserve-text-muted: #B5AA9A;
178
+ --docuserve-text-dim: #7A6F62;
179
+
180
+ --docuserve-accent: #5DB8A8;
181
+ --docuserve-accent-hover: #7FCCB8;
182
+
183
+ --docuserve-topbar-bg: #1A1612;
184
+ --docuserve-topbar-text: #E8E0D4;
185
+ --docuserve-topbar-text-muted: #B5AA9A;
186
+ --docuserve-topbar-text-dim: #7A6F62;
187
+ --docuserve-topbar-hover-bg: #2A241E;
188
+ --docuserve-topbar-version-bg: rgba(255, 255, 255, 0.05);
189
+ --docuserve-topbar-version-border: rgba(255, 255, 255, 0.09);
190
+ --docuserve-topbar-version-text: #B5AA9A;
191
+
192
+ --docuserve-sidebar-bg: #1B1814;
193
+ --docuserve-sidebar-border: #2F2823;
194
+ --docuserve-sidebar-border-soft: #26211C;
195
+ --docuserve-sidebar-text: #C9C0B3;
196
+ --docuserve-sidebar-group-title: #F2ECE0;
197
+ --docuserve-sidebar-module-text: #B5AA9A;
198
+ --docuserve-sidebar-hover-bg: #2A241E;
199
+ --docuserve-sidebar-hover-text: #7FCCB8;
200
+ --docuserve-sidebar-active-bg: #2F2823;
201
+ --docuserve-sidebar-active-text: #7FCCB8;
202
+ --docuserve-sidebar-search-bg: #26211C;
203
+ --docuserve-sidebar-search-border: #2F2823;
204
+
205
+ --docuserve-inline-code-bg: #2A241E;
206
+ --docuserve-inline-code-text: #E8B07A;
207
+
208
+ --docuserve-code-bg: #1E1A17;
209
+ --docuserve-code-border: #2F2823;
210
+ --docuserve-code-gutter-bg: #17130F;
211
+ --docuserve-code-gutter-border: #2F2823;
212
+ --docuserve-code-gutter-text: #6A6052;
213
+ --docuserve-code-text: #E8E0D4;
214
+
215
+ --docuserve-tok-keyword: #C678DD;
216
+ --docuserve-tok-string: #98C379;
217
+ --docuserve-tok-number: #D19A66;
218
+ --docuserve-tok-comment: #7F848E;
219
+ --docuserve-tok-operator: #56B6C2;
220
+ --docuserve-tok-punctuation: #E8E0D4;
221
+ --docuserve-tok-function: #61AFEF;
222
+ --docuserve-tok-property: #E06C75;
223
+ --docuserve-tok-tag: #E06C75;
224
+ --docuserve-tok-attr-name: #D19A66;
225
+ --docuserve-tok-attr-value: #98C379;
226
+
227
+ --docuserve-table-header-bg: #26211C;
228
+ --docuserve-table-row-alt-bg: #1F1B17;
229
+ --docuserve-blockquote-bg: #1F1B17;
230
+ --docuserve-blockquote-border: #5DB8A8;
231
+ --docuserve-blockquote-text: #C9C0B3;
232
+ --docuserve-mermaid-bg: #E8E0D4;
233
+
234
+ --docuserve-scrollbar-track: #1B1814;
235
+ --docuserve-scrollbar-thumb: #3A322B;
236
+ --docuserve-scrollbar-thumb-hover: #524438;
237
+ }
238
+
239
+ /* ----------------------------------------------------------------------------
240
+ Reset and base
241
+ ---------------------------------------------------------------------------- */
242
+
243
+ *, *::before, *::after
244
+ {
7
245
  box-sizing: border-box;
8
246
  }
9
247
 
10
- html, body {
248
+ html, body
249
+ {
11
250
  margin: 0;
12
251
  padding: 0;
13
252
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
14
253
  font-size: 16px;
15
254
  line-height: 1.5;
16
- color: #423D37;
17
- background-color: #fff;
255
+ color: var(--docuserve-text);
256
+ background-color: var(--docuserve-bg);
18
257
  -webkit-font-smoothing: antialiased;
19
258
  -moz-osx-font-smoothing: grayscale;
259
+ transition: background-color 0.15s ease, color 0.15s ease;
20
260
  }
21
261
 
22
262
  /* Typography */
23
- h1, h2, h3, h4, h5, h6 {
263
+ h1, h2, h3, h4, h5, h6
264
+ {
24
265
  margin-top: 0;
25
266
  line-height: 1.3;
267
+ color: var(--docuserve-text-strong);
26
268
  }
27
269
 
28
- a {
29
- color: #2E7D74;
270
+ a
271
+ {
272
+ color: var(--docuserve-accent);
30
273
  text-decoration: none;
31
274
  }
32
275
 
33
- a:hover {
34
- color: #256861;
276
+ a:hover
277
+ {
278
+ color: var(--docuserve-accent-hover);
35
279
  }
36
280
 
37
281
  /* Application container */
38
- #Docuserve-Application-Container {
282
+ #Docuserve-Application-Container
283
+ {
39
284
  min-height: 100vh;
40
285
  }
41
286
 
42
287
  /* Utility: scrollbar styling */
43
- ::-webkit-scrollbar {
288
+ ::-webkit-scrollbar
289
+ {
44
290
  width: 8px;
291
+ height: 8px;
45
292
  }
46
293
 
47
- ::-webkit-scrollbar-track {
48
- background: #F5F0E8;
294
+ ::-webkit-scrollbar-track
295
+ {
296
+ background: var(--docuserve-scrollbar-track);
49
297
  }
50
298
 
51
- ::-webkit-scrollbar-thumb {
52
- background: #D4CCBE;
299
+ ::-webkit-scrollbar-thumb
300
+ {
301
+ background: var(--docuserve-scrollbar-thumb);
53
302
  border-radius: 4px;
54
303
  }
55
304
 
56
- ::-webkit-scrollbar-thumb:hover {
57
- background: #B5AA9A;
305
+ ::-webkit-scrollbar-thumb:hover
306
+ {
307
+ background: var(--docuserve-scrollbar-thumb-hover);
58
308
  }
59
309
 
60
310
  /* Responsive adjustments */
61
- @media (max-width: 768px) {
62
- html {
311
+ @media (max-width: 768px)
312
+ {
313
+ html
314
+ {
63
315
  font-size: 14px;
64
316
  }
65
317
 
66
- #Docuserve-Sidebar-Container {
318
+ #Docuserve-Sidebar-Container
319
+ {
67
320
  display: none;
68
321
  }
69
322
 
70
- .docuserve-body {
323
+ .docuserve-body
324
+ {
71
325
  flex-direction: column;
72
326
  }
73
327
  }
package/docs/index.html CHANGED
@@ -4,9 +4,9 @@
4
4
  <meta charset="utf-8">
5
5
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
6
6
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
7
- <meta name="description" content="Documentation powered by pict-docuserve">
7
+ <meta name="description" content="Pict-Section-Flow v0.0.17 Documentation Pict Section Flow Diagram">
8
8
 
9
- <title>Documentation</title>
9
+ <title>Pict-Section-Flow v0.0.17 Documentation</title>
10
10
 
11
11
  <!-- Application Stylesheet -->
12
12
  <link href="css/docuserve.css" rel="stylesheet">
@@ -1,5 +1,5 @@
1
1
  {
2
- "Generated": "2026-03-17T22:19:31.420Z",
2
+ "Generated": "2026-04-10T17:25:15.652Z",
3
3
  "GitHubOrg": "stevenvelozo",
4
4
  "DefaultBranch": "master",
5
5
  "Groups": [
@@ -1,5 +1,5 @@
1
1
  {
2
- "Generated": "2026-03-17T22:19:31.660Z",
2
+ "Generated": "2026-04-10T17:25:15.920Z",
3
3
  "DocumentCount": 30,
4
4
  "LunrIndex": {
5
5
  "version": "2.3.9",
@@ -13,7 +13,7 @@ html, body {
13
13
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
14
14
  font-size: 16px;
15
15
  line-height: 1.5;
16
- color: #333;
16
+ color: var(--theme-color-text-primary, #333);
17
17
  background-color: #f5f7fa;
18
18
  -webkit-font-smoothing: antialiased;
19
19
  -moz-osx-font-smoothing: grayscale;
@@ -45,7 +45,7 @@ a:hover {
45
45
  }
46
46
 
47
47
  ::-webkit-scrollbar-track {
48
- background: #f1f1f1;
48
+ background: var(--theme-color-background-tertiary, #f1f1f1);
49
49
  }
50
50
 
51
51
  ::-webkit-scrollbar-thumb {
@@ -1,16 +1,16 @@
1
1
  // Auto-generated by scripts/generate-card-help.js — do not edit manually.
2
2
  // Source markdown files are in docs/card-help/
3
3
  module.exports = {
4
- "EACH": "<h1>Each (Loop Iterator)</h1><p>The <b>Each</b> node iterates over a collection, executing connected downstream nodes once for each item. When iteration completes, the <b>Done</b> output fires.</p><h2>Ports</h2><ul><li><b>Collection</b> (input) an array or iterable to loop over</li><li><b>Item</b> (output) fires once per element with the current item</li><li><b>Done</b> (output) fires after all items have been processed</li></ul><h2>Behavior</h2><p>When a collection arrives at the input port, the Each node processes items sequentially. For every element in the collection, the <b>Item</b> output is activated with the current element as the payload. After the final element is processed, the <b>Done</b> output fires to signal completion.</p><h2>Tips</h2><ul><li>Connect <b>Item</b> to a processing chain and <b>Done</b> to continuation logic</li><li>Nested loops are supported by chaining multiple Each nodes</li><li>Empty collections skip directly to the <b>Done</b> output</li></ul>",
5
- "FREAD": "<h1>File Read</h1><p>The <b>File Read</b> node reads the contents of a file from the filesystem and outputs the data.</p><h2>Ports</h2><ul><li><b>Path</b> (input) the filesystem path to read</li><li><b>Data</b> (output) the file contents on success</li><li><b>Error</b> (output) fires if the read operation fails</li></ul><h2>Properties</h2><ul><li><b>FilePath</b> the path to the file to read</li><li><b>Encoding</b> character encoding for text files (e.g. <code>utf8</code>, <code>ascii</code>)</li></ul><h2>Behavior</h2><p>When triggered, the node reads the file at the configured path. On success, the raw file contents are emitted from the <b>Data</b> output. If the file does not exist or cannot be read, the <b>Error</b> output fires with a descriptive error message.</p><h2>Tips</h2><ul><li>Use a Get Value node upstream to dynamically set the file path</li><li>Pair with a Data Preview node to inspect the file contents</li><li>Connect the <b>Error</b> output to logging or notification nodes for robust error handling</li></ul>",
6
- "FWRITE": "<h1>File Write</h1><p>The <b>File Write</b> node writes data to a file on the filesystem.</p><h2>Ports</h2><ul><li><b>Path</b> (input) the destination filesystem path</li><li><b>Data</b> (input) the content to write</li><li><b>Done</b> (output) fires after a successful write</li><li><b>Error</b> (output) fires if the write operation fails</li></ul><h2>Behavior</h2><p>When both inputs are satisfied, the node writes the provided data to the specified file path. On success the <b>Done</b> output fires. If the write fails (for example due to permissions or a missing directory), the <b>Error</b> output fires with a descriptive error message.</p><h2>Properties Panel</h2><p>The properties panel shows a View-based info panel with details about the configured file path and write options.</p><h2>Tips</h2><ul><li>Directories in the path are not created automatically ensure they exist before writing</li><li>Combine with a Set Value node to format data before writing</li><li>Connect the <b>Error</b> output to a Log Values node to capture write failures</li></ul>",
7
- "GET": "<h1>Get Value</h1><p>The <b>Get Value</b> node retrieves a named variable from the flow context and emits its current value.</p><h2>Ports</h2><ul><li><b>In</b> (input) trigger to read the value</li><li><b>Value</b> (output) the retrieved value</li></ul><h2>Behavior</h2><p>When triggered, the node looks up a named key in the flow context and emits the stored value from the <b>Value</b> output. If the key does not exist, the output value is <code>undefined</code>.</p><h2>Usage</h2><p>Pair with a <b>Set Value</b> node to establish a read/write variable pattern. The Set Value node stores a value under a named key; the Get Value node retrieves it downstream.</p><h2>Tips</h2><ul><li>Variable names are case-sensitive</li><li>Use descriptive variable names to keep flows readable</li><li>Get Value is especially useful for accessing values set in a different branch of the flow</li></ul>",
8
- "ITE": "<h1>If-Then-Else</h1><p>The <b>If-Then-Else</b> node evaluates a boolean condition expression and routes the flow to one of two outputs.</p><h2>Ports</h2><ul><li><b>In</b> (input) trigger that starts the evaluation</li><li><b>Then</b> (output) activated when the condition is <b>true</b></li><li><b>Else</b> (output) activated when the condition is <b>false</b></li></ul><h2>Behavior</h2><p>When the input fires, the node evaluates the configured condition expression against the current flow context. If the expression resolves to a truthy value, the <b>Then</b> output is activated. Otherwise, the <b>Else</b> output is activated. Exactly one output fires per evaluation.</p><h2>Configuration</h2><p>Set the condition expression in the node's data properties. The expression is evaluated in the flow context, giving it access to any variables set by upstream Set Value nodes.</p><h2>Tips</h2><ul><li>Chain multiple If-Then-Else nodes for complex branching logic</li><li>Connect the <b>Else</b> output to another If-Then-Else to build else-if chains</li><li>Use descriptive condition expressions to keep the flow self-documenting</li></ul>",
9
- "LOG": "<h1>Log Values</h1><p>The <b>Log Values</b> node writes incoming data to the console or log output for debugging purposes.</p><h2>Ports</h2><ul><li><b>Values</b> (input, multi) accepts one or more connections carrying values to log</li><li><b>Pass</b> (output) passes the last received value through unchanged</li></ul><h2>Properties</h2><ul><li><b>LogLevel</b> the severity level for the log entry (e.g. <code>info</code>, <code>warn</code>, <code>error</code>, <code>trace</code>)</li><li><b>Format</b> an optional format string controlling how values are serialized</li></ul><h2>Behavior</h2><p>When data arrives at any input connection, the node serializes the value and writes it to the configured log output at the specified log level. The data is then forwarded to the <b>Pass</b> output unchanged, so the Log Values node can be inserted inline without disrupting the flow.</p><h2>Tips</h2><ul><li>Use multiple input connections to aggregate log output from parallel branches</li><li>Set the log level to <code>trace</code> during development and <code>warn</code> in production flows</li><li>Insert between any two nodes for quick inline debugging</li></ul>",
10
- "NOTE": "<h1>Comment</h1><p>The <b>Comment</b> node is a floating annotation for documenting flow logic. It has no input or output ports and does not participate in data flow execution.</p><h2>Usage</h2><p>Drop a Comment node anywhere on the canvas to add context, explain design decisions, or leave notes for collaborators. The note text is stored in the node's <code>Data.NoteText</code> property and displayed directly in the node body.</p><h2>Properties</h2><ul><li><b>NoteText</b> the annotation content displayed in the node body</li></ul><h2>Tips</h2><ul><li>Use comments to explain complex branching logic or non-obvious configuration choices</li><li>Comment nodes can be freely repositioned without affecting connections</li><li>Group related comments near the nodes they describe</li></ul>",
11
- "PREV": "<h1>Data Preview</h1><p>The <b>Data Preview</b> node displays a tabular summary of the data flowing through it. Use it as an inline debugger to inspect field names, types, and current values without interrupting the flow.</p><h2>Ports</h2><ul><li><b>Data</b> (input) the data object to inspect</li><li><b>Pass</b> (output) passes the data through unchanged</li></ul><h2>Behavior</h2><p>The preview renders a compact table inside the node body showing each field's name, inferred data type, and current value. The node is pass-through: data enters on the left and exits on the right without modification.</p><h2>Tips</h2><ul><li>Insert a Data Preview between two nodes to inspect intermediate state</li><li>The preview updates whenever new data arrives at the input port</li><li>Useful during development for verifying data transformations</li></ul>",
12
- "SET": "<h1>Set Value</h1><p>The <b>Set Value</b> node assigns a value to a named variable in the flow context.</p><h2>Ports</h2><ul><li><b>In</b> (input) trigger to perform the assignment</li><li><b>Out</b> (output) fires after the value has been set</li></ul><h2>Properties</h2><ul><li><b>Variable Name</b> the key under which the value will be stored</li><li><b>Value Expression</b> the expression to evaluate and assign</li></ul><h2>Behavior</h2><p>When triggered, the node evaluates the <b>Value Expression</b> and stores the result under the configured <b>Variable Name</b> in the flow context. Downstream nodes can read this value using a <b>Get Value</b> node with the same variable name.</p><h2>Configuration</h2><p>Open the properties panel to configure the variable name and value expression using the built-in form editor.</p><h2>Tips</h2><ul><li>Variable names are case-sensitive use consistent naming conventions</li><li>Value expressions have access to the current flow context</li><li>Use Set Value at the beginning of a flow to initialize default variables</li></ul>",
13
- "SPKL": "<h1>Sparkline</h1><p>The <b>Sparkline</b> node renders a live sparkline chart visualizing numeric throughput data directly in the node body.</p><h2>Ports</h2><ul><li><b>Values</b> (input) a numeric array or stream of values to plot</li><li><b>Stats</b> (output) emits computed statistics (min, max, mean) for the data set</li></ul><h2>Behavior</h2><p>The node draws a compact line chart inside the node body using a canvas renderer. As new numeric data arrives at the input, the chart updates to reflect the latest values. The filled area under the line and an endpoint dot provide visual emphasis on the current value.</p><h2>Appearance</h2><p>The chart uses the node's theme color for the line and fill area. The last data point is highlighted with a dot. The sparkline scales automatically to fit the available body area.</p><h2>Tips</h2><ul><li>Connect to any node that produces a numeric array for instant visualization</li><li>Use alongside a Data Preview node for combined visual and tabular inspection</li><li>The Stats output is useful for feeding threshold values into an If-Then-Else node</li></ul>",
14
- "STAT": "<h1>Status Monitor</h1><p>The <b>Status Monitor</b> node monitors the health status of upstream services and reports availability.</p><h2>Ports</h2><ul><li><b>Check</b> (input, multi) accepts connections from one or more services to monitor</li><li><b>Healthy</b> (output) fires when all monitored services report healthy</li><li><b>Degraded</b> (output) fires when one or more services report degraded status</li></ul><h2>Behavior</h2><p>The node body displays a visual health grid showing the status of each monitored service with colored indicators. Green indicates a healthy service; yellow indicates degraded performance. When all services are healthy, the <b>Healthy</b> output is activated. If any service reports degraded status, the <b>Degraded</b> output fires instead.</p><h2>Appearance</h2><p>The node body renders SVG status circles labeled with service names (e.g. API, DB, Cache, Queue). Port labels appear on hover for a cleaner default appearance.</p><h2>Tips</h2><ul><li>Connect multiple services to the <b>Check</b> input to build a comprehensive health dashboard</li><li>Route the <b>Degraded</b> output to notification or alerting nodes</li><li>Combine with an Each node to check a dynamic list of service endpoints</li></ul>",
15
- "SW": "<h1>Switch</h1><p>The <b>Switch</b> node routes execution to one of multiple outputs based on a matching value, similar to a switch/case statement in programming.</p><h2>Ports</h2><ul><li><b>In</b> (input) the value to match against cases</li><li><b>Case A</b> (output) fires when the input matches case A</li><li><b>Case B</b> (output) fires when the input matches case B</li><li><b>Default</b> (output) fires when the input does not match any defined case</li></ul><h2>Behavior</h2><p>When a value arrives at the input, the node compares it against each configured case. The first matching case's output is activated. If no case matches, the <b>Default</b> output fires. Only one output is activated per evaluation.</p><h2>Configuration</h2><p>Define case match values in the node's data properties. Each case corresponds to one of the named outputs.</p><h2>Tips</h2><ul><li>Add more output ports by extending the card definition for additional cases</li><li>Use the <b>Default</b> output as a catch-all for unexpected values</li><li>Chain a Switch after an If-Then-Else for multi-level routing logic</li><li>Case matching is based on strict equality</li></ul>"
4
+ "EACH": "<h1>Each (Loop Iterator)</h1><p>The <b>Each</b> node iterates over a collection, executing connected downstream nodes once for each item. When iteration completes, the <b>Done</b> output fires.</p><h2>Ports</h2><ul><li><b>Collection</b> (input) -- an array or iterable to loop over</li><li><b>Item</b> (output) -- fires once per element with the current item</li><li><b>Done</b> (output) -- fires after all items have been processed</li></ul><h2>Behavior</h2><p>When a collection arrives at the input port, the Each node processes items sequentially. For every element in the collection, the <b>Item</b> output is activated with the current element as the payload. After the final element is processed, the <b>Done</b> output fires to signal completion.</p><h2>Tips</h2><ul><li>Connect <b>Item</b> to a processing chain and <b>Done</b> to continuation logic</li><li>Nested loops are supported by chaining multiple Each nodes</li><li>Empty collections skip directly to the <b>Done</b> output</li></ul>",
5
+ "FREAD": "<h1>File Read</h1><p>The <b>File Read</b> node reads the contents of a file from the filesystem and outputs the data.</p><h2>Ports</h2><ul><li><b>Path</b> (input) -- the filesystem path to read</li><li><b>Data</b> (output) -- the file contents on success</li><li><b>Error</b> (output) -- fires if the read operation fails</li></ul><h2>Properties</h2><ul><li><b>FilePath</b> -- the path to the file to read</li><li><b>Encoding</b> -- character encoding for text files (e.g. <code>utf8</code>, <code>ascii</code>)</li></ul><h2>Behavior</h2><p>When triggered, the node reads the file at the configured path. On success, the raw file contents are emitted from the <b>Data</b> output. If the file does not exist or cannot be read, the <b>Error</b> output fires with a descriptive error message.</p><h2>Tips</h2><ul><li>Use a Get Value node upstream to dynamically set the file path</li><li>Pair with a Data Preview node to inspect the file contents</li><li>Connect the <b>Error</b> output to logging or notification nodes for robust error handling</li></ul>",
6
+ "FWRITE": "<h1>File Write</h1><p>The <b>File Write</b> node writes data to a file on the filesystem.</p><h2>Ports</h2><ul><li><b>Path</b> (input) -- the destination filesystem path</li><li><b>Data</b> (input) -- the content to write</li><li><b>Done</b> (output) -- fires after a successful write</li><li><b>Error</b> (output) -- fires if the write operation fails</li></ul><h2>Behavior</h2><p>When both inputs are satisfied, the node writes the provided data to the specified file path. On success the <b>Done</b> output fires. If the write fails (for example due to permissions or a missing directory), the <b>Error</b> output fires with a descriptive error message.</p><h2>Properties Panel</h2><p>The properties panel shows a View-based info panel with details about the configured file path and write options.</p><h2>Tips</h2><ul><li>Directories in the path are not created automatically -- ensure they exist before writing</li><li>Combine with a Set Value node to format data before writing</li><li>Connect the <b>Error</b> output to a Log Values node to capture write failures</li></ul>",
7
+ "GET": "<h1>Get Value</h1><p>The <b>Get Value</b> node retrieves a named variable from the flow context and emits its current value.</p><h2>Ports</h2><ul><li><b>In</b> (input) -- trigger to read the value</li><li><b>Value</b> (output) -- the retrieved value</li></ul><h2>Behavior</h2><p>When triggered, the node looks up a named key in the flow context and emits the stored value from the <b>Value</b> output. If the key does not exist, the output value is <code>undefined</code>.</p><h2>Usage</h2><p>Pair with a <b>Set Value</b> node to establish a read/write variable pattern. The Set Value node stores a value under a named key; the Get Value node retrieves it downstream.</p><h2>Tips</h2><ul><li>Variable names are case-sensitive</li><li>Use descriptive variable names to keep flows readable</li><li>Get Value is especially useful for accessing values set in a different branch of the flow</li></ul>",
8
+ "ITE": "<h1>If-Then-Else</h1><p>The <b>If-Then-Else</b> node evaluates a boolean condition expression and routes the flow to one of two outputs.</p><h2>Ports</h2><ul><li><b>In</b> (input) -- trigger that starts the evaluation</li><li><b>Then</b> (output) -- activated when the condition is <b>true</b></li><li><b>Else</b> (output) -- activated when the condition is <b>false</b></li></ul><h2>Behavior</h2><p>When the input fires, the node evaluates the configured condition expression against the current flow context. If the expression resolves to a truthy value, the <b>Then</b> output is activated. Otherwise, the <b>Else</b> output is activated. Exactly one output fires per evaluation.</p><h2>Configuration</h2><p>Set the condition expression in the node's data properties. The expression is evaluated in the flow context, giving it access to any variables set by upstream Set Value nodes.</p><h2>Tips</h2><ul><li>Chain multiple If-Then-Else nodes for complex branching logic</li><li>Connect the <b>Else</b> output to another If-Then-Else to build else-if chains</li><li>Use descriptive condition expressions to keep the flow self-documenting</li></ul>",
9
+ "LOG": "<h1>Log Values</h1><p>The <b>Log Values</b> node writes incoming data to the console or log output for debugging purposes.</p><h2>Ports</h2><ul><li><b>Values</b> (input, multi) -- accepts one or more connections carrying values to log</li><li><b>Pass</b> (output) -- passes the last received value through unchanged</li></ul><h2>Properties</h2><ul><li><b>LogLevel</b> -- the severity level for the log entry (e.g. <code>info</code>, <code>warn</code>, <code>error</code>, <code>trace</code>)</li><li><b>Format</b> -- an optional format string controlling how values are serialized</li></ul><h2>Behavior</h2><p>When data arrives at any input connection, the node serializes the value and writes it to the configured log output at the specified log level. The data is then forwarded to the <b>Pass</b> output unchanged, so the Log Values node can be inserted inline without disrupting the flow.</p><h2>Tips</h2><ul><li>Use multiple input connections to aggregate log output from parallel branches</li><li>Set the log level to <code>trace</code> during development and <code>warn</code> in production flows</li><li>Insert between any two nodes for quick inline debugging</li></ul>",
10
+ "NOTE": "<h1>Comment</h1><p>The <b>Comment</b> node is a floating annotation for documenting flow logic. It has no input or output ports and does not participate in data flow execution.</p><h2>Usage</h2><p>Drop a Comment node anywhere on the canvas to add context, explain design decisions, or leave notes for collaborators. The note text is stored in the node's <code>Data.NoteText</code> property and displayed directly in the node body.</p><h2>Properties</h2><ul><li><b>NoteText</b> -- the annotation content displayed in the node body</li></ul><h2>Tips</h2><ul><li>Use comments to explain complex branching logic or non-obvious configuration choices</li><li>Comment nodes can be freely repositioned without affecting connections</li><li>Group related comments near the nodes they describe</li></ul>",
11
+ "PREV": "<h1>Data Preview</h1><p>The <b>Data Preview</b> node displays a tabular summary of the data flowing through it. Use it as an inline debugger to inspect field names, types, and current values without interrupting the flow.</p><h2>Ports</h2><ul><li><b>Data</b> (input) -- the data object to inspect</li><li><b>Pass</b> (output) -- passes the data through unchanged</li></ul><h2>Behavior</h2><p>The preview renders a compact table inside the node body showing each field's name, inferred data type, and current value. The node is pass-through: data enters on the left and exits on the right without modification.</p><h2>Tips</h2><ul><li>Insert a Data Preview between two nodes to inspect intermediate state</li><li>The preview updates whenever new data arrives at the input port</li><li>Useful during development for verifying data transformations</li></ul>",
12
+ "SET": "<h1>Set Value</h1><p>The <b>Set Value</b> node assigns a value to a named variable in the flow context.</p><h2>Ports</h2><ul><li><b>In</b> (input) -- trigger to perform the assignment</li><li><b>Out</b> (output) -- fires after the value has been set</li></ul><h2>Properties</h2><ul><li><b>Variable Name</b> -- the key under which the value will be stored</li><li><b>Value Expression</b> -- the expression to evaluate and assign</li></ul><h2>Behavior</h2><p>When triggered, the node evaluates the <b>Value Expression</b> and stores the result under the configured <b>Variable Name</b> in the flow context. Downstream nodes can read this value using a <b>Get Value</b> node with the same variable name.</p><h2>Configuration</h2><p>Open the properties panel to configure the variable name and value expression using the built-in form editor.</p><h2>Tips</h2><ul><li>Variable names are case-sensitive -- use consistent naming conventions</li><li>Value expressions have access to the current flow context</li><li>Use Set Value at the beginning of a flow to initialize default variables</li></ul>",
13
+ "SPKL": "<h1>Sparkline</h1><p>The <b>Sparkline</b> node renders a live sparkline chart visualizing numeric throughput data directly in the node body.</p><h2>Ports</h2><ul><li><b>Values</b> (input) -- a numeric array or stream of values to plot</li><li><b>Stats</b> (output) -- emits computed statistics (min, max, mean) for the data set</li></ul><h2>Behavior</h2><p>The node draws a compact line chart inside the node body using a canvas renderer. As new numeric data arrives at the input, the chart updates to reflect the latest values. The filled area under the line and an endpoint dot provide visual emphasis on the current value.</p><h2>Appearance</h2><p>The chart uses the node's theme color for the line and fill area. The last data point is highlighted with a dot. The sparkline scales automatically to fit the available body area.</p><h2>Tips</h2><ul><li>Connect to any node that produces a numeric array for instant visualization</li><li>Use alongside a Data Preview node for combined visual and tabular inspection</li><li>The Stats output is useful for feeding threshold values into an If-Then-Else node</li></ul>",
14
+ "STAT": "<h1>Status Monitor</h1><p>The <b>Status Monitor</b> node monitors the health status of upstream services and reports availability.</p><h2>Ports</h2><ul><li><b>Check</b> (input, multi) -- accepts connections from one or more services to monitor</li><li><b>Healthy</b> (output) -- fires when all monitored services report healthy</li><li><b>Degraded</b> (output) -- fires when one or more services report degraded status</li></ul><h2>Behavior</h2><p>The node body displays a visual health grid showing the status of each monitored service with colored indicators. Green indicates a healthy service; yellow indicates degraded performance. When all services are healthy, the <b>Healthy</b> output is activated. If any service reports degraded status, the <b>Degraded</b> output fires instead.</p><h2>Appearance</h2><p>The node body renders SVG status circles labeled with service names (e.g. API, DB, Cache, Queue). Port labels appear on hover for a cleaner default appearance.</p><h2>Tips</h2><ul><li>Connect multiple services to the <b>Check</b> input to build a comprehensive health dashboard</li><li>Route the <b>Degraded</b> output to notification or alerting nodes</li><li>Combine with an Each node to check a dynamic list of service endpoints</li></ul>",
15
+ "SW": "<h1>Switch</h1><p>The <b>Switch</b> node routes execution to one of multiple outputs based on a matching value, similar to a switch/case statement in programming.</p><h2>Ports</h2><ul><li><b>In</b> (input) -- the value to match against cases</li><li><b>Case A</b> (output) -- fires when the input matches case A</li><li><b>Case B</b> (output) -- fires when the input matches case B</li><li><b>Default</b> (output) -- fires when the input does not match any defined case</li></ul><h2>Behavior</h2><p>When a value arrives at the input, the node compares it against each configured case. The first matching case's output is activated. If no case matches, the <b>Default</b> output fires. Only one output is activated per evaluation.</p><h2>Configuration</h2><p>Define case match values in the node's data properties. Each case corresponds to one of the named outputs.</p><h2>Tips</h2><ul><li>Add more output ports by extending the card definition for additional cases</li><li>Use the <b>Default</b> output as a catch-all for unexpected values</li><li>Chain a Switch after an If-Then-Else for multi-level routing logic</li><li>Case matching is based on strict equality</li></ul>"
16
16
  };