@kubex/zinc 1.1.25 → 1.1.27

package/dist/custom-elements.json

@@ -47,79 +47,6 @@
         }
       ]
     },
-    {
-      "kind": "javascript-module",
-      "path": "components/action-bar/action-bar.js",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "",
-          "name": "ZnActionBar",
-          "cssProperties": [
-            {
-              "description": "An example CSS custom property.",
-              "name": "--example"
-            }
-          ],
-          "cssParts": [
-            {
-              "description": "The component's base wrapper.",
-              "name": "base"
-            }
-          ],
-          "slots": [
-            {
-              "description": "The default slot.",
-              "name": ""
-            },
-            {
-              "description": "An example slot.",
-              "name": "example"
-            }
-          ],
-          "members": [
-            {
-              "kind": "field",
-              "name": "localize",
-              "privacy": "private",
-              "readonly": true,
-              "default": "new LocalizeController(this)"
-            }
-          ],
-          "events": [
-            {
-              "description": "Emitted as an example.",
-              "name": "zn-event-name"
-            }
-          ],
-          "superclass": {
-            "name": "ZincElement",
-            "module": "/src/internal/zinc-element"
-          },
-          "summary": "Short summary of the component's intended use.",
-          "tagNameWithoutPrefix": "action-bar",
-          "tagName": "zn-action-bar",
-          "customElement": true,
-          "jsDoc": "/**\n * @summary Short summary of the component's intended use.\n * @documentation https://zinc.style/components/action-bar\n * @status experimental\n * @since 1.0\n *\n * @dependency zn-example\n *\n * @event zn-event-name - Emitted as an example.\n *\n * @slot - The default slot.\n * @slot example - An example slot.\n *\n * @csspart base - The component's base wrapper.\n *\n * @cssproperty --example - An example CSS custom property.\n */",
-          "documentation": "https://zinc.style/components/action-bar",
-          "status": "experimental",
-          "since": "1.0",
-          "dependencies": [
-            "zn-example"
-          ]
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "default",
-          "declaration": {
-            "name": "ZnActionBar",
-            "module": "components/action-bar/action-bar.js"
-          }
-        }
-      ]
-    },
     {
       "kind": "javascript-module",
       "path": "components/alert/alert.js",
@@ -296,6 +223,79 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "components/action-bar/action-bar.js",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "",
+          "name": "ZnActionBar",
+          "cssProperties": [
+            {
+              "description": "An example CSS custom property.",
+              "name": "--example"
+            }
+          ],
+          "cssParts": [
+            {
+              "description": "The component's base wrapper.",
+              "name": "base"
+            }
+          ],
+          "slots": [
+            {
+              "description": "The default slot.",
+              "name": ""
+            },
+            {
+              "description": "An example slot.",
+              "name": "example"
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "localize",
+              "privacy": "private",
+              "readonly": true,
+              "default": "new LocalizeController(this)"
+            }
+          ],
+          "events": [
+            {
+              "description": "Emitted as an example.",
+              "name": "zn-event-name"
+            }
+          ],
+          "superclass": {
+            "name": "ZincElement",
+            "module": "/src/internal/zinc-element"
+          },
+          "summary": "Short summary of the component's intended use.",
+          "tagNameWithoutPrefix": "action-bar",
+          "tagName": "zn-action-bar",
+          "customElement": true,
+          "jsDoc": "/**\n * @summary Short summary of the component's intended use.\n * @documentation https://zinc.style/components/action-bar\n * @status experimental\n * @since 1.0\n *\n * @dependency zn-example\n *\n * @event zn-event-name - Emitted as an example.\n *\n * @slot - The default slot.\n * @slot example - An example slot.\n *\n * @csspart base - The component's base wrapper.\n *\n * @cssproperty --example - An example CSS custom property.\n */",
+          "documentation": "https://zinc.style/components/action-bar",
+          "status": "experimental",
+          "since": "1.0",
+          "dependencies": [
+            "zn-example"
+          ]
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "ZnActionBar",
+            "module": "components/action-bar/action-bar.js"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "components/animated-button/animated-button.js",
@@ -8664,71 +8664,6 @@
         }
       ]
     },
-    {
-      "kind": "javascript-module",
-      "path": "components/data-table-sort/data-table-sort.js",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "",
-          "name": "ZnDataTableSort",
-          "cssProperties": [
-            {
-              "description": "An example CSS custom property.",
-              "name": "--example"
-            }
-          ],
-          "cssParts": [
-            {
-              "description": "The component's base wrapper.",
-              "name": "base"
-            }
-          ],
-          "slots": [
-            {
-              "description": "The default slot.",
-              "name": ""
-            },
-            {
-              "description": "An example slot.",
-              "name": "example"
-            }
-          ],
-          "members": [],
-          "events": [
-            {
-              "description": "Emitted as an example.",
-              "name": "zn-event-name"
-            }
-          ],
-          "superclass": {
-            "name": "ZincElement",
-            "module": "/src/internal/zinc-element"
-          },
-          "summary": "Short summary of the component's intended use.",
-          "tagNameWithoutPrefix": "data-table-sort",
-          "tagName": "zn-data-table-sort",
-          "customElement": true,
-          "jsDoc": "/**\n * @summary Short summary of the component's intended use.\n * @documentation https://zinc.style/components/data-table-sort\n * @status experimental\n * @since 1.0\n *\n * @dependency zn-example\n *\n * @event zn-event-name - Emitted as an example.\n *\n * @slot - The default slot.\n * @slot example - An example slot.\n *\n * @csspart base - The component's base wrapper.\n *\n * @cssproperty --example - An example CSS custom property.\n */",
-          "documentation": "https://zinc.style/components/data-table-sort",
-          "status": "experimental",
-          "since": "1.0",
-          "dependencies": [
-            "zn-example"
-          ]
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "default",
-          "declaration": {
-            "name": "ZnDataTableSort",
-            "module": "components/data-table-sort/data-table-sort.js"
-          }
-        }
-      ]
-    },
     {
       "kind": "javascript-module",
       "path": "components/data-table-search/data-table-search.js",
@@ -9001,6 +8936,71 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "components/data-table-sort/data-table-sort.js",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "",
+          "name": "ZnDataTableSort",
+          "cssProperties": [
+            {
+              "description": "An example CSS custom property.",
+              "name": "--example"
+            }
+          ],
+          "cssParts": [
+            {
+              "description": "The component's base wrapper.",
+              "name": "base"
+            }
+          ],
+          "slots": [
+            {
+              "description": "The default slot.",
+              "name": ""
+            },
+            {
+              "description": "An example slot.",
+              "name": "example"
+            }
+          ],
+          "members": [],
+          "events": [
+            {
+              "description": "Emitted as an example.",
+              "name": "zn-event-name"
+            }
+          ],
+          "superclass": {
+            "name": "ZincElement",
+            "module": "/src/internal/zinc-element"
+          },
+          "summary": "Short summary of the component's intended use.",
+          "tagNameWithoutPrefix": "data-table-sort",
+          "tagName": "zn-data-table-sort",
+          "customElement": true,
+          "jsDoc": "/**\n * @summary Short summary of the component's intended use.\n * @documentation https://zinc.style/components/data-table-sort\n * @status experimental\n * @since 1.0\n *\n * @dependency zn-example\n *\n * @event zn-event-name - Emitted as an example.\n *\n * @slot - The default slot.\n * @slot example - An example slot.\n *\n * @csspart base - The component's base wrapper.\n *\n * @cssproperty --example - An example CSS custom property.\n */",
+          "documentation": "https://zinc.style/components/data-table-sort",
+          "status": "experimental",
+          "since": "1.0",
+          "dependencies": [
+            "zn-example"
+          ]
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "ZnDataTableSort",
+            "module": "components/data-table-sort/data-table-sort.js"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "components/datepicker/datepicker.js",
@@ -21557,6 +21557,116 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "components/opt-group/opt-group.js",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "",
+          "name": "ZnOptGroup",
+          "cssParts": [
+            {
+              "description": "The component's base wrapper.",
+              "name": "base"
+            },
+            {
+              "description": "The group label element.",
+              "name": "label"
+            }
+          ],
+          "slots": [
+            {
+              "description": "The default slot for `<zn-option>` elements.",
+              "name": ""
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "label",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "The label for the opt-group, displayed as a non-selectable header above the grouped options.",
+              "attribute": "label"
+            },
+            {
+              "kind": "field",
+              "name": "disabled",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Disables all options within the group.",
+              "attribute": "disabled",
+              "reflects": true
+            },
+            {
+              "kind": "method",
+              "name": "handleLabelChange"
+            },
+            {
+              "kind": "method",
+              "name": "handleDisabledChange"
+            },
+            {
+              "kind": "method",
+              "name": "handleSlotChange",
+              "privacy": "private"
+            },
+            {
+              "kind": "method",
+              "name": "propagateDisabled",
+              "privacy": "private"
+            }
+          ],
+          "attributes": [
+            {
+              "name": "label",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "The label for the opt-group, displayed as a non-selectable header above the grouped options.",
+              "fieldName": "label"
+            },
+            {
+              "name": "disabled",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Disables all options within the group.",
+              "fieldName": "disabled"
+            }
+          ],
+          "superclass": {
+            "name": "ZincElement",
+            "module": "/src/internal/zinc-element"
+          },
+          "summary": "Groups options within a `<zn-select>` under a labeled header, similar to `<optgroup>` in native HTML.",
+          "tagNameWithoutPrefix": "opt-group",
+          "tagName": "zn-opt-group",
+          "customElement": true,
+          "jsDoc": "/**\n * @summary Groups options within a `<zn-select>` under a labeled header, similar to `<optgroup>` in native HTML.\n * @documentation https://zinc.style/components/opt-group\n * @status experimental\n * @since 1.0\n *\n * @slot - The default slot for `<zn-option>` elements.\n *\n * @csspart base - The component's base wrapper.\n * @csspart label - The group label element.\n */",
+          "documentation": "https://zinc.style/components/opt-group",
+          "status": "experimental",
+          "since": "1.0"
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "ZnOptGroup",
+            "module": "components/opt-group/opt-group.js"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "components/option/option.js",
@@ -21775,116 +21885,6 @@
         }
       ]
     },
-    {
-      "kind": "javascript-module",
-      "path": "components/opt-group/opt-group.js",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "",
-          "name": "ZnOptGroup",
-          "cssParts": [
-            {
-              "description": "The component's base wrapper.",
-              "name": "base"
-            },
-            {
-              "description": "The group label element.",
-              "name": "label"
-            }
-          ],
-          "slots": [
-            {
-              "description": "The default slot for `<zn-option>` elements.",
-              "name": ""
-            }
-          ],
-          "members": [
-            {
-              "kind": "field",
-              "name": "label",
-              "type": {
-                "text": "string"
-              },
-              "default": "''",
-              "description": "The label for the opt-group, displayed as a non-selectable header above the grouped options.",
-              "attribute": "label"
-            },
-            {
-              "kind": "field",
-              "name": "disabled",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Disables all options within the group.",
-              "attribute": "disabled",
-              "reflects": true
-            },
-            {
-              "kind": "method",
-              "name": "handleLabelChange"
-            },
-            {
-              "kind": "method",
-              "name": "handleDisabledChange"
-            },
-            {
-              "kind": "method",
-              "name": "handleSlotChange",
-              "privacy": "private"
-            },
-            {
-              "kind": "method",
-              "name": "propagateDisabled",
-              "privacy": "private"
-            }
-          ],
-          "attributes": [
-            {
-              "name": "label",
-              "type": {
-                "text": "string"
-              },
-              "default": "''",
-              "description": "The label for the opt-group, displayed as a non-selectable header above the grouped options.",
-              "fieldName": "label"
-            },
-            {
-              "name": "disabled",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Disables all options within the group.",
-              "fieldName": "disabled"
-            }
-          ],
-          "superclass": {
-            "name": "ZincElement",
-            "module": "/src/internal/zinc-element"
-          },
-          "summary": "Groups options within a `<zn-select>` under a labeled header, similar to `<optgroup>` in native HTML.",
-          "tagNameWithoutPrefix": "opt-group",
-          "tagName": "zn-opt-group",
-          "customElement": true,
-          "jsDoc": "/**\n * @summary Groups options within a `<zn-select>` under a labeled header, similar to `<optgroup>` in native HTML.\n * @documentation https://zinc.style/components/opt-group\n * @status experimental\n * @since 1.0\n *\n * @slot - The default slot for `<zn-option>` elements.\n *\n * @csspart base - The component's base wrapper.\n * @csspart label - The group label element.\n */",
-          "documentation": "https://zinc.style/components/opt-group",
-          "status": "experimental",
-          "since": "1.0"
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "default",
-          "declaration": {
-            "name": "ZnOptGroup",
-            "module": "components/opt-group/opt-group.js"
-          }
-        }
-      ]
-    },
     {
       "kind": "javascript-module",
       "path": "components/order-table/order-table.js",
@@ -38271,7 +38271,7 @@
   "package": {
     "name": "@kubex/zinc",
     "description": "A collection of web components for building web applications based off of @shoelace-style/Shoelace",
-    "version": "1.1.25",
+    "version": "1.1.27",
     "author": "",
     "license": "MIT"
   }

package/dist/vscode.html-custom-data.json

@@ -13,17 +13,6 @@
         }
       ]
     },
-    {
-      "name": "zn-action-bar",
-      "description": "Short summary of the component's intended use.\n---\n\n\n### **Events:**\n - **zn-event-name** - Emitted as an example.\n\n### **Slots:**\n - _default_ - The default slot.\n- **example** - An example slot.\n\n### **CSS Properties:**\n - **--example** - An example CSS custom property. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.",
-      "attributes": [],
-      "references": [
-        {
-          "name": "Documentation",
-          "url": "https://zinc.style/components/action-bar"
-        }
-      ]
-    },
     {
       "name": "zn-alert",
       "description": "Short summary of the component's intended use.\n---\n\n\n### **Events:**\n - **zn-event-name** - Emitted as an example.\n\n### **Slots:**\n - _default_ - The default slot.\n- **example** - An example slot.\n\n### **CSS Properties:**\n - **--example** - An example CSS custom property. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.",
@@ -63,6 +52,17 @@
         }
       ]
     },
+    {
+      "name": "zn-action-bar",
+      "description": "Short summary of the component's intended use.\n---\n\n\n### **Events:**\n - **zn-event-name** - Emitted as an example.\n\n### **Slots:**\n - _default_ - The default slot.\n- **example** - An example slot.\n\n### **CSS Properties:**\n - **--example** - An example CSS custom property. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.",
+      "attributes": [],
+      "references": [
+        {
+          "name": "Documentation",
+          "url": "https://zinc.style/components/action-bar"
+        }
+      ]
+    },
     {
       "name": "zn-animated-button",
       "description": "\n---\n\n\n### **Methods:**\n - **purchase(): _void_** - Programmatically trigger the purchase flow\n- **setSuccess(): _void_** - Set the button to success state manually\n- **setFailure(message): _void_** - Set the button to failure state manually with optional error message\n- **reset(): _void_** - Reset the button to idle state",
@@ -1073,17 +1073,6 @@
         }
       ]
     },
-    {
-      "name": "zn-data-table-sort",
-      "description": "Short summary of the component's intended use.\n---\n\n\n### **Events:**\n - **zn-event-name** - Emitted as an example.\n\n### **Slots:**\n - _default_ - The default slot.\n- **example** - An example slot.\n\n### **CSS Properties:**\n - **--example** - An example CSS custom property. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.",
-      "attributes": [],
-      "references": [
-        {
-          "name": "Documentation",
-          "url": "https://zinc.style/components/data-table-sort"
-        }
-      ]
-    },
     {
       "name": "zn-data-table-search",
       "description": "A search component for data tables.\n---\n\n\n### **Events:**\n - **zn-search-change** - Emitted when the search value changes (debounced).\n\n### **Methods:**\n - **getFormData(): _Record<string, any>_** - Collects form data from slotted input elements\n\n### **Slots:**\n - _default_ - The default slot for additional form inputs.\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.",
@@ -1126,6 +1115,17 @@
         }
       ]
     },
+    {
+      "name": "zn-data-table-sort",
+      "description": "Short summary of the component's intended use.\n---\n\n\n### **Events:**\n - **zn-event-name** - Emitted as an example.\n\n### **Slots:**\n - _default_ - The default slot.\n- **example** - An example slot.\n\n### **CSS Properties:**\n - **--example** - An example CSS custom property. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.",
+      "attributes": [],
+      "references": [
+        {
+          "name": "Documentation",
+          "url": "https://zinc.style/components/data-table-sort"
+        }
+      ]
+    },
     {
       "name": "zn-datepicker",
       "description": "A date picker component with calendar popup and input validation.\n---\n\n\n### **Events:**\n - **zn-change** - Emitted when the date value changes.\n- **zn-input** - Emitted when the input value changes.\n- **zn-blur** - Emitted when the input loses focus.\n- **zn-focus** - Emitted when the input gains focus.\n\n### **Methods:**\n - **focus(options: _FocusOptions_)** - Sets focus on the input.\n- **blur()** - Removes focus from the input.\n- **select()** - Selects all the text in the input.\n- **checkValidity(): _boolean_** - Checks the validity but does not show a validation message. Returns `true` when valid and `false` when invalid.\n- **getForm(): _HTMLFormElement | null_** - Gets the associated form, if one exists.\n- **reportValidity()** - Checks for validity and shows the browser's validation message if the control is invalid.\n- **setCustomValidity(message: _string_)** - Sets a custom validation message. Pass an empty string to restore validity.\n\n### **Slots:**\n - **label** - The datepicker's label. Alternatively, you can use the `label` attribute.\n- **label-tooltip** - Tooltip content for the label. Alternatively, you can use the `label-tooltip` attribute.\n- **context-note** - Additional context text displayed above the input. Alternatively, you can use the `context-note` attribute.\n- **help-text** - Help text displayed below the input. Alternatively, you can use the `help-text` attribute.\n- **prefix** - Content to display before the input (in addition to the default calendar icon).\n- **suffix** - Content to display after the input.\n\n### **CSS Properties:**\n - **--zn-input-*** - Inherited input component CSS custom properties. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **form-control** - The form control wrapper.\n- **form-control-label** - The label element.\n- **form-control-input** - The input wrapper.\n- **form-control-help-text** - The help text element.",
@@ -2432,47 +2432,47 @@
       ]
     },
     {
-      "name": "zn-option",
-      "description": "Short summary of the component's intended use.\n---\n\n\n### **Methods:**\n - **getTextLabel()** - Returns a plain text label based on the option's content.\n\n### **Slots:**\n - _default_ - The option's label.\n- **prefix** - Used to prepend an icon or similar element to the menu item.\n- **suffix** - Used to append an icon or similar element to the menu item.\n\n### **CSS Parts:**\n - **checked-option-icon** - The checked option icon, an `<zn-icon>` element.\n- **base** - The component's base wrapper.\n- **label** - The option's label.\n- **prefix** - The container that wraps the prefix.\n- **suffix** - The container that wraps the suffix.",
+      "name": "zn-opt-group",
+      "description": "Groups options within a `<zn-select>` under a labeled header, similar to `<optgroup>` in native HTML.\n---\n\n\n### **Slots:**\n - _default_ - The default slot for `<zn-option>` elements.\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **label** - The group label element.",
       "attributes": [
         {
-          "name": "value",
-          "description": "The option's value. When selected, the containing form control will receive this value. The value must be unique\nfrom other options in the same group. Values may contain spaces when using JSON array syntax on the parent select.",
+          "name": "label",
+          "description": "The label for the opt-group, displayed as a non-selectable header above the grouped options.",
           "values": []
         },
         {
           "name": "disabled",
-          "description": "Draws the option in a disabled state, preventing selection.",
+          "description": "Disables all options within the group.",
           "values": []
-        },
-        { "name": "selected", "values": [] }
+        }
       ],
       "references": [
         {
           "name": "Documentation",
-          "url": "https://zinc.style/components/option"
+          "url": "https://zinc.style/components/opt-group"
         }
       ]
     },
     {
-      "name": "zn-opt-group",
-      "description": "Groups options within a `<zn-select>` under a labeled header, similar to `<optgroup>` in native HTML.\n---\n\n\n### **Slots:**\n - _default_ - The default slot for `<zn-option>` elements.\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **label** - The group label element.",
+      "name": "zn-option",
+      "description": "Short summary of the component's intended use.\n---\n\n\n### **Methods:**\n - **getTextLabel()** - Returns a plain text label based on the option's content.\n\n### **Slots:**\n - _default_ - The option's label.\n- **prefix** - Used to prepend an icon or similar element to the menu item.\n- **suffix** - Used to append an icon or similar element to the menu item.\n\n### **CSS Parts:**\n - **checked-option-icon** - The checked option icon, an `<zn-icon>` element.\n- **base** - The component's base wrapper.\n- **label** - The option's label.\n- **prefix** - The container that wraps the prefix.\n- **suffix** - The container that wraps the suffix.",
       "attributes": [
         {
-          "name": "label",
-          "description": "The label for the opt-group, displayed as a non-selectable header above the grouped options.",
+          "name": "value",
+          "description": "The option's value. When selected, the containing form control will receive this value. The value must be unique\nfrom other options in the same group. Values may contain spaces when using JSON array syntax on the parent select.",
           "values": []
         },
         {
           "name": "disabled",
-          "description": "Disables all options within the group.",
+          "description": "Draws the option in a disabled state, preventing selection.",
           "values": []
-        }
+        },
+        { "name": "selected", "values": [] }
       ],
       "references": [
         {
           "name": "Documentation",
-          "url": "https://zinc.style/components/opt-group"
+          "url": "https://zinc.style/components/option"
         }
       ]
     },

package/dist/web-types.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://raw.githubusercontent.com/JetBrains/web-types/master/schema/web-types.json",
   "name": "@kubex/zinc",
-  "version": "1.1.25",
+  "version": "1.1.27",
   "description-markup": "markdown",
   "contributions": {
     "html": {
@@ -15,28 +15,6 @@
           "events": [],
           "js": { "properties": [], "events": [] }
         },
-        {
-          "name": "zn-action-bar",
-          "description": "Short summary of the component's intended use.\n---\n\n\n### **Events:**\n - **zn-event-name** - Emitted as an example.\n\n### **Slots:**\n - _default_ - The default slot.\n- **example** - An example slot.\n\n### **CSS Properties:**\n - **--example** - An example CSS custom property. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.",
-          "doc-url": "",
-          "attributes": [],
-          "slots": [
-            { "name": "", "description": "The default slot." },
-            { "name": "example", "description": "An example slot." }
-          ],
-          "events": [
-            { "name": "zn-event-name", "description": "Emitted as an example." }
-          ],
-          "js": {
-            "properties": [],
-            "events": [
-              {
-                "name": "zn-event-name",
-                "description": "Emitted as an example."
-              }
-            ]
-          }
-        },
         {
           "name": "zn-alert",
           "description": "Short summary of the component's intended use.\n---\n\n\n### **Events:**\n - **zn-event-name** - Emitted as an example.\n\n### **Slots:**\n - _default_ - The default slot.\n- **example** - An example slot.\n\n### **CSS Properties:**\n - **--example** - An example CSS custom property. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.",
@@ -100,6 +78,28 @@
             ]
           }
         },
+        {
+          "name": "zn-action-bar",
+          "description": "Short summary of the component's intended use.\n---\n\n\n### **Events:**\n - **zn-event-name** - Emitted as an example.\n\n### **Slots:**\n - _default_ - The default slot.\n- **example** - An example slot.\n\n### **CSS Properties:**\n - **--example** - An example CSS custom property. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.",
+          "doc-url": "",
+          "attributes": [],
+          "slots": [
+            { "name": "", "description": "The default slot." },
+            { "name": "example", "description": "An example slot." }
+          ],
+          "events": [
+            { "name": "zn-event-name", "description": "Emitted as an example." }
+          ],
+          "js": {
+            "properties": [],
+            "events": [
+              {
+                "name": "zn-event-name",
+                "description": "Emitted as an example."
+              }
+            ]
+          }
+        },
         {
           "name": "zn-animated-button",
           "description": "\n---\n\n\n### **Methods:**\n - **purchase(): _void_** - Programmatically trigger the purchase flow\n- **setSuccess(): _void_** - Set the button to success state manually\n- **setFailure(message): _void_** - Set the button to failure state manually with optional error message\n- **reset(): _void_** - Reset the button to idle state",
@@ -2447,28 +2447,6 @@
             ]
           }
         },
-        {
-          "name": "zn-data-table-sort",
-          "description": "Short summary of the component's intended use.\n---\n\n\n### **Events:**\n - **zn-event-name** - Emitted as an example.\n\n### **Slots:**\n - _default_ - The default slot.\n- **example** - An example slot.\n\n### **CSS Properties:**\n - **--example** - An example CSS custom property. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.",
-          "doc-url": "",
-          "attributes": [],
-          "slots": [
-            { "name": "", "description": "The default slot." },
-            { "name": "example", "description": "An example slot." }
-          ],
-          "events": [
-            { "name": "zn-event-name", "description": "Emitted as an example." }
-          ],
-          "js": {
-            "properties": [],
-            "events": [
-              {
-                "name": "zn-event-name",
-                "description": "Emitted as an example."
-              }
-            ]
-          }
-        },
         {
           "name": "zn-data-table-search",
           "description": "A search component for data tables.\n---\n\n\n### **Events:**\n - **zn-search-change** - Emitted when the search value changes (debounced).\n\n### **Methods:**\n - **getFormData(): _Record<string, any>_** - Collects form data from slotted input elements\n\n### **Slots:**\n - _default_ - The default slot for additional form inputs.\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.",
@@ -2562,6 +2540,28 @@
             ]
           }
         },
+        {
+          "name": "zn-data-table-sort",
+          "description": "Short summary of the component's intended use.\n---\n\n\n### **Events:**\n - **zn-event-name** - Emitted as an example.\n\n### **Slots:**\n - _default_ - The default slot.\n- **example** - An example slot.\n\n### **CSS Properties:**\n - **--example** - An example CSS custom property. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.",
+          "doc-url": "",
+          "attributes": [],
+          "slots": [
+            { "name": "", "description": "The default slot." },
+            { "name": "example", "description": "An example slot." }
+          ],
+          "events": [
+            { "name": "zn-event-name", "description": "Emitted as an example." }
+          ],
+          "js": {
+            "properties": [],
+            "events": [
+              {
+                "name": "zn-event-name",
+                "description": "Emitted as an example."
+              }
+            ]
+          }
+        },
         {
           "name": "zn-datepicker",
           "description": "A date picker component with calendar popup and input validation.\n---\n\n\n### **Events:**\n - **zn-change** - Emitted when the date value changes.\n- **zn-input** - Emitted when the input value changes.\n- **zn-blur** - Emitted when the input loses focus.\n- **zn-focus** - Emitted when the input gains focus.\n\n### **Methods:**\n - **focus(options: _FocusOptions_)** - Sets focus on the input.\n- **blur()** - Removes focus from the input.\n- **select()** - Selects all the text in the input.\n- **checkValidity(): _boolean_** - Checks the validity but does not show a validation message. Returns `true` when valid and `false` when invalid.\n- **getForm(): _HTMLFormElement | null_** - Gets the associated form, if one exists.\n- **reportValidity()** - Checks for validity and shows the browser's validation message if the control is invalid.\n- **setCustomValidity(message: _string_)** - Sets a custom validation message. Pass an empty string to restore validity.\n\n### **Slots:**\n - **label** - The datepicker's label. Alternatively, you can use the `label` attribute.\n- **label-tooltip** - Tooltip content for the label. Alternatively, you can use the `label-tooltip` attribute.\n- **context-note** - Additional context text displayed above the input. Alternatively, you can use the `context-note` attribute.\n- **help-text** - Help text displayed below the input. Alternatively, you can use the `help-text` attribute.\n- **prefix** - Content to display before the input (in addition to the default calendar icon).\n- **suffix** - Content to display after the input.\n\n### **CSS Properties:**\n - **--zn-input-*** - Inherited input component CSS custom properties. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **form-control** - The form control wrapper.\n- **form-control-label** - The label element.\n- **form-control-input** - The input wrapper.\n- **form-control-help-text** - The help text element.",
@@ -5687,93 +5687,93 @@
           }
         },
         {
-          "name": "zn-option",
-          "description": "Short summary of the component's intended use.\n---\n\n\n### **Methods:**\n - **getTextLabel()** - Returns a plain text label based on the option's content.\n\n### **Slots:**\n - _default_ - The option's label.\n- **prefix** - Used to prepend an icon or similar element to the menu item.\n- **suffix** - Used to append an icon or similar element to the menu item.\n\n### **CSS Parts:**\n - **checked-option-icon** - The checked option icon, an `<zn-icon>` element.\n- **base** - The component's base wrapper.\n- **label** - The option's label.\n- **prefix** - The container that wraps the prefix.\n- **suffix** - The container that wraps the suffix.",
+          "name": "zn-opt-group",
+          "description": "Groups options within a `<zn-select>` under a labeled header, similar to `<optgroup>` in native HTML.\n---\n\n\n### **Slots:**\n - _default_ - The default slot for `<zn-option>` elements.\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **label** - The group label element.",
           "doc-url": "",
           "attributes": [
             {
-              "name": "value",
-              "description": "The option's value. When selected, the containing form control will receive this value. The value must be unique\nfrom other options in the same group. Values may contain spaces when using JSON array syntax on the parent select.",
+              "name": "label",
+              "description": "The label for the opt-group, displayed as a non-selectable header above the grouped options.",
               "value": { "type": "string", "default": "''" }
             },
             {
               "name": "disabled",
-              "description": "Draws the option in a disabled state, preventing selection.",
-              "value": { "type": "boolean", "default": "false" }
-            },
-            {
-              "name": "selected",
+              "description": "Disables all options within the group.",
               "value": { "type": "boolean", "default": "false" }
             }
           ],
           "slots": [
-            { "name": "", "description": "The option's label." },
-            {
-              "name": "prefix",
-              "description": "Used to prepend an icon or similar element to the menu item."
-            },
             {
-              "name": "suffix",
-              "description": "Used to append an icon or similar element to the menu item."
+              "name": "",
+              "description": "The default slot for `<zn-option>` elements."
             }
           ],
           "events": [],
           "js": {
             "properties": [
-              { "name": "multiple", "type": "boolean" },
-              { "name": "defaultSlot", "type": "HTMLSlotElement" },
-              { "name": "current", "type": "boolean" },
-              { "name": "hasHover", "type": "boolean" },
               {
-                "name": "value",
-                "description": "The option's value. When selected, the containing form control will receive this value. The value must be unique\nfrom other options in the same group. Values may contain spaces when using JSON array syntax on the parent select.",
+                "name": "label",
+                "description": "The label for the opt-group, displayed as a non-selectable header above the grouped options.",
                 "type": "string"
               },
               {
                 "name": "disabled",
-                "description": "Draws the option in a disabled state, preventing selection.",
+                "description": "Disables all options within the group.",
                 "type": "boolean"
-              },
-              { "name": "selected", "type": "boolean" }
+              }
             ],
             "events": []
           }
         },
         {
-          "name": "zn-opt-group",
-          "description": "Groups options within a `<zn-select>` under a labeled header, similar to `<optgroup>` in native HTML.\n---\n\n\n### **Slots:**\n - _default_ - The default slot for `<zn-option>` elements.\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **label** - The group label element.",
+          "name": "zn-option",
+          "description": "Short summary of the component's intended use.\n---\n\n\n### **Methods:**\n - **getTextLabel()** - Returns a plain text label based on the option's content.\n\n### **Slots:**\n - _default_ - The option's label.\n- **prefix** - Used to prepend an icon or similar element to the menu item.\n- **suffix** - Used to append an icon or similar element to the menu item.\n\n### **CSS Parts:**\n - **checked-option-icon** - The checked option icon, an `<zn-icon>` element.\n- **base** - The component's base wrapper.\n- **label** - The option's label.\n- **prefix** - The container that wraps the prefix.\n- **suffix** - The container that wraps the suffix.",
           "doc-url": "",
           "attributes": [
             {
-              "name": "label",
-              "description": "The label for the opt-group, displayed as a non-selectable header above the grouped options.",
+              "name": "value",
+              "description": "The option's value. When selected, the containing form control will receive this value. The value must be unique\nfrom other options in the same group. Values may contain spaces when using JSON array syntax on the parent select.",
               "value": { "type": "string", "default": "''" }
             },
             {
               "name": "disabled",
-              "description": "Disables all options within the group.",
+              "description": "Draws the option in a disabled state, preventing selection.",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "selected",
               "value": { "type": "boolean", "default": "false" }
             }
           ],
           "slots": [
+            { "name": "", "description": "The option's label." },
             {
-              "name": "",
-              "description": "The default slot for `<zn-option>` elements."
+              "name": "prefix",
+              "description": "Used to prepend an icon or similar element to the menu item."
+            },
+            {
+              "name": "suffix",
+              "description": "Used to append an icon or similar element to the menu item."
             }
           ],
           "events": [],
           "js": {
             "properties": [
+              { "name": "multiple", "type": "boolean" },
+              { "name": "defaultSlot", "type": "HTMLSlotElement" },
+              { "name": "current", "type": "boolean" },
+              { "name": "hasHover", "type": "boolean" },
               {
-                "name": "label",
-                "description": "The label for the opt-group, displayed as a non-selectable header above the grouped options.",
+                "name": "value",
+                "description": "The option's value. When selected, the containing form control will receive this value. The value must be unique\nfrom other options in the same group. Values may contain spaces when using JSON array syntax on the parent select.",
                 "type": "string"
               },
               {
                 "name": "disabled",
-                "description": "Disables all options within the group.",
+                "description": "Draws the option in a disabled state, preventing selection.",
                 "type": "boolean"
-              }
+              },
+              { "name": "selected", "type": "boolean" }
             ],
             "events": []
           }

package/dist/zn.d.ts

@@ -8774,6 +8774,9 @@ declare module "components/flow-builder/modules/flow-canvas/flow-canvas.componen
         private _linkPos;
         /** The valid node under the cursor while linking — the preview snaps to its input. */
         private _linkTarget;
+        /** Last pointer position (client coords) while linking, for edge auto-pan. */
+        private _linkClient;
+        private _linkScrollRaf;
         private _dragMoved;
         /** Centre the flow when it first arrives; any earlier user interaction opts out. */
         private _viewInitialised;
@@ -8808,6 +8811,13 @@ declare module "components/flow-builder/modules/flow-canvas/flow-canvas.componen
         private _onPortClick;
         private _startLink;
         private _onLinkPointerMove;
+        private _updateLinkFromClient;
+        /**
+         * While a branch rides the cursor, holding the pointer near (or past) a
+         * canvas edge auto-pans in that direction, so the target can be off-screen.
+         * Runs per frame until the link attaches or cancels.
+         */
+        private _linkEdgeScroll;
         private _onLinkKeyDown;
         private _cancelLink;
         private _onPointerMove;

package/dist/zn.min.js

@@ -5086,7 +5086,7 @@ Please report this to https://github.com/markedjs/marked.`,a){let i="<p>An error
         tooltip=${n}
         aria-pressed=${o?"true":"false"}
       ></zn-button>
-    `}};Ir.styles=[Er.styles,Y(P6e)],b([pe("zn-textarea")],Ir.prototype,"textarea",2),b([pe(".markdown-editor__preview")],Ir.prototype,"previewEl",2),b([w()],Ir.prototype,"name",2),b([w()],Ir.prototype,"value",2),b([ia()],Ir.prototype,"defaultValue",2),b([w()],Ir.prototype,"label",2),b([w({attribute:"help-text"})],Ir.prototype,"helpText",2),b([w()],Ir.prototype,"placeholder",2),b([w({type:Number})],Ir.prototype,"rows",2),b([w({reflect:!0,attribute:"view-mode"})],Ir.prototype,"viewMode",2),b([w({attribute:"storage-key"})],Ir.prototype,"storageKey",2),b([w({type:Boolean,reflect:!0})],Ir.prototype,"required",2),b([w({type:Boolean,reflect:!0})],Ir.prototype,"readonly",2),b([w({type:Boolean,reflect:!0})],Ir.prototype,"disabled",2),b([w({type:Boolean,reflect:!0})],Ir.prototype,"expanded",2),b([He("viewMode",{waitUntilFirstUpdate:!0})],Ir.prototype,"handleViewModeChange",1),b([He("value",{waitUntilFirstUpdate:!0})],Ir.prototype,"handleValueChange",1),b([He("markedReady",{waitUntilFirstUpdate:!0})],Ir.prototype,"handleMarkedReady",1);var tat=Ir;Ir.define("zn-markdown-editor");var rat={},VD=Kr(class extends ii{constructor(){super(...arguments),this.ot=rat}render(a,r){return r()}update(a,[r,t]){if(Array.isArray(r)){if(Array.isArray(this.ot)&&this.ot.length===r.length&&r.every((i,n)=>i===this.ot[n]))return jr}else if(this.ot===r)return jr;return this.ot=Array.isArray(r)?Array.from(r):r,this.render(r,t)}});var O6e={id:"in"},c4={id:"out"},p4="__new__",d0="application/x-zn-flow-type",d4;function u4(){return d4||(d4=new Image,d4.src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"),d4}var ua=240,zi=60,f4=200,GD=40,WD=40,aat=40,q6e=240,iat=20;function jD(a){let r=a.length*7.2,t=Math.max(1,Math.ceil(r/(q6e-36)));return{w:Math.min(q6e,Math.round(36+r)),h:aat+(t-1)*iat}}var Mi=20;function bn(a){return Math.round(a/Mi)*Mi}var N6e=10,nat=4;function H6e(a,r){let t=a.m+r.m;return a.x<r.x+r.w+t&&r.x<a.x+a.w+t&&a.y<r.y+r.h+t&&r.y<a.y+a.h+t}function KD(a,r,t,i){let n=Za(a,r(a.type)),o=a.x+ua/2,s=c=>Math.round(o+(n.length===1?0:(c-(n.length-1)/2)*f4)),l=170,d=n.map((c,f)=>{let p=s(f),u=i.find(k=>k.source.node===a.id&&k.source.port===c.id),m=u?t.find(k=>k.id===u.target.node):void 0;if(!u||!m)return{x:p,aligned:!1};if(i.some(k=>k!==u&&k.target.node===u.target.node&&k.target.port===u.target.port))return{x:p,aligned:!1};let _=zc(m,r(m.type)),x=Math.max(_.findIndex(k=>k.id===u.target.port),0),y=r_(m,"in",x,_.length).x;return Math.abs(y-p)>f4?{x:p,aligned:!1}:{x:y,aligned:!0}});for(let c=0;c<d.length;c++)d[c].aligned&&d.some((f,p)=>p!==c&&Math.abs(f.x-d[c].x)<l)&&(d[c]={x:s(c),aligned:!1});return d.map(c=>c.x)}function UD(a,r,t,i){let n=[{x:a.x,y:a.y,w:ua,h:zi,m:N6e}],o=Za(a,r(a.type)),s=KD(a,r,t,i);return o.forEach((l,d)=>{if(!l.label)return;let c=jD(l.label);n.push({x:s[d]-c.w/2,y:a.y+zi+GD+WD,w:c.w,h:c.h,m:nat})}),n}function B6e(a,r,t,i,n){let o=UD(a,t,i,n);return UD(r,t,i,n).some(s=>o.some(l=>H6e(l,s)))}function F6e(a,r,t,i,n){let o={x:a.x,y:a.y,w:ua,h:zi,m:N6e};return UD(r,t,i,n).some(s=>H6e(o,s))}var YD=200,XD=120,$6e=120,V6e=80;function r_(a,r,t,i){return{x:a.x+ua*(t+1)/(i+1),y:a.y+(r==="in"?0:zi)}}function U6e(){return{nodes:[],connections:[],notes:[]}}function h4(a){var r;return a?(r=a.inputs)!=null?r:[O6e]:[O6e]}function QD(a){var r;return a?(r=a.outputs)!=null?r:[c4]:[c4]}function zc(a,r){var t;return(t=a.inputs)!=null?t:h4(r)}function Za(a,r){var t;return(t=a.outputs)!=null?t:QD(r)}function a_(a,r){var t,i;return(i=(t=zc(a,r)[0])==null?void 0:t.id)!=null?i:null}function G6e(a,r){let t=new Set,i=n=>{for(let o of a.connections)o.source.node===n&&!t.has(o.target.node)&&(t.add(o.target.node),i(o.target.node))};return i(r),t}function mp(a,r){let t=new Set(a.map(c=>c.id)),i=new Map(a.map(c=>[c.id,[]])),n=new Set;for(let c of r)!t.has(c.source.node)||!t.has(c.target.node)||(i.get(c.source.node).push(c),n.add(c.target.node));let o=new Set,s=new Set,l=new Set,d=c=>{var f;s.add(c),l.add(c);for(let p of(f=i.get(c))!=null?f:[])l.has(p.target.node)?o.add(p):s.has(p.target.node)||d(p.target.node);l.delete(c)};return a.filter(c=>!n.has(c.id)).forEach(c=>d(c.id)),a.forEach(c=>{s.has(c.id)||d(c.id)}),o}var W6e=Q`@keyframes rotate-gradient{from{--rotate:0deg}to{--rotate:360deg}}:host{text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-transform:none}:host *,:host *::before,:host *::after{box-sizing:border-box;border-width:0;border-style:solid;border-color:rgb(var(--zn-border-color))}[hidden]{display:none !important}.width-container,.form-container,.wide-form-container{height:100%;width:100%;margin:var(--zn-default-margin,0 auto)}.width-container{max-width:var(--zn-container)}.form-container{max-width:var(--zn-container-ph)}.wide-form-container{max-width:var(--zn-container-lg)}:host{--node-accent:rgb(var(--zn-color-primary));--port-size:11px;position:absolute;top:0;left:0;display:block;-webkit-user-select:none;-moz-user-select:none;user-select:none;touch-action:none}:host([dragging]) .card{cursor:grabbing}.card{position:relative;display:flex;flex-direction:column;justify-content:center;width:100%;height:100%;padding:0 10px;background:rgb(var(--zn-panel));border:1px solid rgb(var(--zn-border-color));border-radius:10px;box-shadow:0 1px 2px rgba(var(--zn-shadow),0.4);cursor:grab;transition:border-color 0.12s ease,box-shadow 0.12s ease}.card:hover{border-color:rgb(var(--zn-color-border-active))}.card.selected{border-color:var(--node-accent);box-shadow:0 0 0 2px color-mix(in srgb,var(--node-accent) 35%,transparent)}.card.link-target{border-color:rgb(var(--zn-color-primary));box-shadow:0 0 0 3px color-mix(in srgb,rgb(var(--zn-color-primary)) 30%,transparent)}.card.error{border-color:rgb(var(--zn-color-error));background:color-mix(in srgb,rgb(var(--zn-color-error)) 6%,rgb(var(--zn-panel)))}.body{display:flex;align-items:center;gap:10px}.icon-tile{display:flex;align-items:center;justify-content:center;flex:0 0 auto;width:36px;height:36px;border-radius:8px;color:var(--node-accent);background:color-mix(in srgb,var(--node-accent) 14%,transparent)}.text{display:flex;flex-direction:column;min-width:0;flex:1 1 auto}.text .title{font-size:0.8125rem;font-weight:600;color:rgb(var(--zn-text));white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.text .subtitle{font-size:0.75rem;color:rgb(var(--zn-color-muted-text));white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.menu{flex:0 0 auto;margin-right:-4px}zn-menu-item.danger{color:rgb(var(--zn-color-error))}.ports{position:absolute;left:0;width:100%;height:0}.ports--in{top:0}.ports--out{bottom:0}.port-wrap{position:absolute}.port{position:absolute;left:0;top:0;transform:translate(-50%,-50%);width:var(--port-size);height:var(--port-size);border-radius:50%;background:rgb(var(--zn-panel));border:2px solid var(--node-accent);box-sizing:border-box;pointer-events:none}.port--in{transition:transform 0.12s ease,background 0.12s ease,box-shadow 0.12s ease}:host([link-target]) .port--in{transform:translate(-50%,-50%) scale(1.4);background:rgb(var(--zn-color-primary));border-color:rgb(var(--zn-color-primary));box-shadow:0 0 0 4px color-mix(in srgb,rgb(var(--zn-color-primary)) 25%,transparent)}.port--out{pointer-events:auto;cursor:pointer;transition:transform 0.12s ease,background 0.12s ease,box-shadow 0.12s ease}.port--out:hover{transform:translate(-50%,-50%) scale(1.4);background:var(--node-accent);box-shadow:0 0 0 4px color-mix(in srgb,var(--node-accent) 25%,transparent)}.port-label{position:absolute;top:calc(var(--port-size) / 2 + 3px);left:8px;font-size:0.625rem;font-weight:600;letter-spacing:0.02em;color:rgb(var(--zn-color-muted-text));white-space:nowrap;pointer-events:none}`;var Yn=class extends K{constructor(){super(...arguments);this.selected=!1;this.error=!1;this.dragging=!1;this.linkTarget=!1;this._onBodyPointerDown=t=>{if(t.button!==0)return;let i=t.target;i.closest(".port")||i.closest("zn-dropdown")||(t.stopPropagation(),this._emit("flow-node-select",{nodeId:this.node.id}),this._emit("flow-node-grab",{nodeId:this.node.id,clientX:t.clientX,clientY:t.clientY}))}}updated(t){var i,n;super.updated(t),this.style.width=`${ua}px`,this.style.height=`${zi}px`,this.style.setProperty("--node-accent",(n=(i=this.type)==null?void 0:i.color)!=null?n:"rgb(var(--zn-color-primary))")}get nodeTitle(){var t,i,n,o,s,l;return(l=(s=(n=(t=this.node)==null?void 0:t.label)!=null?n:(i=this.type)==null?void 0:i.label)!=null?s:(o=this.node)==null?void 0:o.type)!=null?l:"Node"}get nodeSubtitle(){var i,n,o,s,l,d,c;let t=(l=(n=(i=this.node)==null?void 0:i.data)==null?void 0:n.subtitle)!=null?l:(s=(o=this.node)==null?void 0:o.data)==null?void 0:s.description;return typeof t=="string"?t:(c=(d=this.type)==null?void 0:d.description)!=null?c:""}_emit(t,i){this.dispatchEvent(new CustomEvent(t,{bubbles:!0,composed:!0,detail:i}))}_action(t){this._emit("flow-node-action",{nodeId:this.node.id,action:t})}_renderPorts(t,i){let n=t.length;return C`
+    `}};Ir.styles=[Er.styles,Y(P6e)],b([pe("zn-textarea")],Ir.prototype,"textarea",2),b([pe(".markdown-editor__preview")],Ir.prototype,"previewEl",2),b([w()],Ir.prototype,"name",2),b([w()],Ir.prototype,"value",2),b([ia()],Ir.prototype,"defaultValue",2),b([w()],Ir.prototype,"label",2),b([w({attribute:"help-text"})],Ir.prototype,"helpText",2),b([w()],Ir.prototype,"placeholder",2),b([w({type:Number})],Ir.prototype,"rows",2),b([w({reflect:!0,attribute:"view-mode"})],Ir.prototype,"viewMode",2),b([w({attribute:"storage-key"})],Ir.prototype,"storageKey",2),b([w({type:Boolean,reflect:!0})],Ir.prototype,"required",2),b([w({type:Boolean,reflect:!0})],Ir.prototype,"readonly",2),b([w({type:Boolean,reflect:!0})],Ir.prototype,"disabled",2),b([w({type:Boolean,reflect:!0})],Ir.prototype,"expanded",2),b([He("viewMode",{waitUntilFirstUpdate:!0})],Ir.prototype,"handleViewModeChange",1),b([He("value",{waitUntilFirstUpdate:!0})],Ir.prototype,"handleValueChange",1),b([He("markedReady",{waitUntilFirstUpdate:!0})],Ir.prototype,"handleMarkedReady",1);var tat=Ir;Ir.define("zn-markdown-editor");var rat={},VD=Kr(class extends ii{constructor(){super(...arguments),this.ot=rat}render(a,r){return r()}update(a,[r,t]){if(Array.isArray(r)){if(Array.isArray(this.ot)&&this.ot.length===r.length&&r.every((i,n)=>i===this.ot[n]))return jr}else if(this.ot===r)return jr;return this.ot=Array.isArray(r)?Array.from(r):r,this.render(r,t)}});var O6e={id:"in"},c4={id:"out"},p4="__new__",d0="application/x-zn-flow-type",d4;function u4(){return d4||(d4=new Image,d4.src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"),d4}var ua=240,zi=60,f4=200,GD=40,WD=40,aat=40,q6e=240,iat=20;function jD(a){let r=a.length*7.2,t=Math.max(1,Math.ceil(r/(q6e-36)));return{w:Math.min(q6e,Math.round(36+r)),h:aat+(t-1)*iat}}var Mi=20;function bn(a){return Math.round(a/Mi)*Mi}var N6e=10,nat=4;function H6e(a,r){let t=a.m+r.m;return a.x<r.x+r.w+t&&r.x<a.x+a.w+t&&a.y<r.y+r.h+t&&r.y<a.y+a.h+t}function KD(a,r,t,i){let n=Za(a,r(a.type)),o=a.x+ua/2,s=c=>Math.round(o+(n.length===1?0:(c-(n.length-1)/2)*f4)),l=170,d=n.map((c,f)=>{let p=s(f),u=i.find(k=>k.source.node===a.id&&k.source.port===c.id),m=u?t.find(k=>k.id===u.target.node):void 0;if(!u||!m)return{x:p,aligned:!1};if(i.some(k=>k!==u&&k.target.node===u.target.node&&k.target.port===u.target.port))return{x:p,aligned:!1};let _=zc(m,r(m.type)),x=Math.max(_.findIndex(k=>k.id===u.target.port),0),y=r_(m,"in",x,_.length).x;return Math.abs(y-p)>f4?{x:p,aligned:!1}:{x:y,aligned:!0}});for(let c=0;c<d.length;c++)d[c].aligned&&d.some((f,p)=>p!==c&&Math.abs(f.x-d[c].x)<l)&&(d[c]={x:s(c),aligned:!1});return d.map(c=>c.x)}function UD(a,r,t,i){let n=[{x:a.x,y:a.y,w:ua,h:zi,m:N6e}],o=Za(a,r(a.type)),s=KD(a,r,t,i);return o.forEach((l,d)=>{if(!l.label)return;let c=jD(l.label);n.push({x:s[d]-c.w/2,y:a.y+zi+GD+WD,w:c.w,h:c.h,m:nat})}),n}function B6e(a,r,t,i,n){let o=UD(a,t,i,n);return UD(r,t,i,n).some(s=>o.some(l=>H6e(l,s)))}function F6e(a,r,t,i,n){let o={x:a.x,y:a.y,w:ua,h:zi,m:N6e};return UD(r,t,i,n).some(s=>H6e(o,s))}var YD=200,XD=120,$6e=120,V6e=80;function r_(a,r,t,i){return{x:a.x+ua*(t+1)/(i+1),y:a.y+(r==="in"?0:zi)}}function U6e(){return{nodes:[],connections:[],notes:[]}}function h4(a){var r;return a?(r=a.inputs)!=null?r:[O6e]:[O6e]}function QD(a){var r;return a?(r=a.outputs)!=null?r:[c4]:[c4]}function zc(a,r){var t;return(t=a.inputs)!=null?t:h4(r)}function Za(a,r){var t;return(t=a.outputs)!=null?t:QD(r)}function a_(a,r){var t,i;return(i=(t=zc(a,r)[0])==null?void 0:t.id)!=null?i:null}function G6e(a,r){let t=new Set,i=n=>{for(let o of a.connections)o.source.node===n&&!t.has(o.target.node)&&(t.add(o.target.node),i(o.target.node))};return i(r),t}function mp(a,r){let t=new Set(a.map(c=>c.id)),i=new Map(a.map(c=>[c.id,[]])),n=new Set;for(let c of r)!t.has(c.source.node)||!t.has(c.target.node)||(i.get(c.source.node).push(c),n.add(c.target.node));let o=new Set,s=new Set,l=new Set,d=c=>{var f;s.add(c),l.add(c);for(let p of(f=i.get(c))!=null?f:[])l.has(p.target.node)?o.add(p):s.has(p.target.node)||d(p.target.node);l.delete(c)};return a.filter(c=>!n.has(c.id)).forEach(c=>d(c.id)),a.forEach(c=>{s.has(c.id)||d(c.id)}),o}var W6e=Q`@keyframes rotate-gradient{from{--rotate:0deg}to{--rotate:360deg}}:host{text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-transform:none}:host *,:host *::before,:host *::after{box-sizing:border-box;border-width:0;border-style:solid;border-color:rgb(var(--zn-border-color))}[hidden]{display:none !important}.width-container,.form-container,.wide-form-container{height:100%;width:100%;margin:var(--zn-default-margin,0 auto)}.width-container{max-width:var(--zn-container)}.form-container{max-width:var(--zn-container-ph)}.wide-form-container{max-width:var(--zn-container-lg)}:host{--node-accent:rgb(var(--zn-color-primary));--port-size:11px;position:absolute;top:0;left:0;display:block;-webkit-user-select:none;-moz-user-select:none;user-select:none;touch-action:none}:host([dragging]) .card{cursor:grabbing}.card{position:relative;display:flex;flex-direction:column;justify-content:center;width:100%;height:100%;padding:0 10px;background:rgb(var(--zn-panel));border:1px solid rgb(var(--zn-border-color));border-radius:10px;box-shadow:0 1px 2px rgba(var(--zn-shadow),0.4);cursor:grab;transition:border-color 0.12s ease,box-shadow 0.12s ease}.card:hover{border-color:rgb(var(--zn-color-border-active))}.card.selected{border-color:var(--node-accent);box-shadow:0 0 0 2px color-mix(in srgb,var(--node-accent) 35%,transparent)}.card.link-target{border-color:rgb(var(--zn-color-primary));box-shadow:0 0 0 3px color-mix(in srgb,rgb(var(--zn-color-primary)) 30%,transparent)}.card.error{border-color:rgb(var(--zn-color-error));background:color-mix(in srgb,rgb(var(--zn-color-error)) 6%,rgb(var(--zn-panel)))}.body{display:flex;align-items:center;gap:10px}.icon-tile{display:flex;align-items:center;justify-content:center;flex:0 0 auto;width:36px;height:36px;border-radius:8px;color:var(--node-accent);background:color-mix(in srgb,var(--node-accent) 14%,transparent)}.text{display:flex;flex-direction:column;min-width:0;flex:1 1 auto}.text .title{font-size:0.8125rem;font-weight:600;color:rgb(var(--zn-text));white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.text .subtitle{font-size:0.75rem;color:rgb(var(--zn-color-muted-text));white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.menu{flex:0 0 auto}zn-menu-item.danger{color:rgb(var(--zn-color-error))}.ports{position:absolute;left:0;width:100%;height:0}.ports--in{top:0}.ports--out{bottom:0}.port-wrap{position:absolute}.port{position:absolute;left:0;top:0;transform:translate(-50%,-50%);width:var(--port-size);height:var(--port-size);border-radius:50%;background:rgb(var(--zn-panel));border:2px solid var(--node-accent);box-sizing:border-box;pointer-events:none}.port--in{transition:transform 0.12s ease,background 0.12s ease,box-shadow 0.12s ease}:host([link-target]) .port--in{transform:translate(-50%,-50%) scale(1.4);background:rgb(var(--zn-color-primary));border-color:rgb(var(--zn-color-primary));box-shadow:0 0 0 4px color-mix(in srgb,rgb(var(--zn-color-primary)) 25%,transparent)}.port--out{pointer-events:auto;cursor:pointer;transition:transform 0.12s ease,background 0.12s ease,box-shadow 0.12s ease}.port--out:hover{transform:translate(-50%,-50%) scale(1.4);background:var(--node-accent);box-shadow:0 0 0 4px color-mix(in srgb,var(--node-accent) 25%,transparent)}.port-label{position:absolute;top:calc(var(--port-size) / 2 + 3px);left:8px;font-size:0.625rem;font-weight:600;letter-spacing:0.02em;color:rgb(var(--zn-color-muted-text));white-space:nowrap;pointer-events:none}`;var Yn=class extends K{constructor(){super(...arguments);this.selected=!1;this.error=!1;this.dragging=!1;this.linkTarget=!1;this._onBodyPointerDown=t=>{if(t.button!==0)return;let i=t.target;i.closest(".port")||i.closest("zn-dropdown")||(t.stopPropagation(),this._emit("flow-node-select",{nodeId:this.node.id}),this._emit("flow-node-grab",{nodeId:this.node.id,clientX:t.clientX,clientY:t.clientY}))}}updated(t){var i,n;super.updated(t),this.style.width=`${ua}px`,this.style.height=`${zi}px`,this.style.setProperty("--node-accent",(n=(i=this.type)==null?void 0:i.color)!=null?n:"rgb(var(--zn-color-primary))")}get nodeTitle(){var t,i,n,o,s,l;return(l=(s=(n=(t=this.node)==null?void 0:t.label)!=null?n:(i=this.type)==null?void 0:i.label)!=null?s:(o=this.node)==null?void 0:o.type)!=null?l:"Node"}get nodeSubtitle(){var i,n,o,s,l,d,c;let t=(l=(n=(i=this.node)==null?void 0:i.data)==null?void 0:n.subtitle)!=null?l:(s=(o=this.node)==null?void 0:o.data)==null?void 0:s.description;return typeof t=="string"?t:(c=(d=this.type)==null?void 0:d.description)!=null?c:""}_emit(t,i){this.dispatchEvent(new CustomEvent(t,{bubbles:!0,composed:!0,detail:i}))}_action(t){this._emit("flow-node-action",{nodeId:this.node.id,action:t})}_renderPorts(t,i){let n=t.length;return C`
       <div class="ports ports--${i}">
         ${t.map((o,s)=>{let l=`${100*(s+1)/(n+1)}%`;return C`
             <div class="port-wrap" style="left:${l}">
@@ -5135,7 +5135,7 @@ Please report this to https://github.com/markedjs/marked.`,a){let i="<p>An error
               </div>
             </div>`:""}
       </div>
-    `}};Yn.styles=Y(W6e),Yn.dependencies={"zn-icon":It,"zn-button":Tr,"zn-dropdown":Xi,"zn-menu":Rs,"zn-menu-item":Sd},b([w({attribute:!1})],Yn.prototype,"node",2),b([w({attribute:!1})],Yn.prototype,"type",2),b([w({type:Boolean,reflect:!0})],Yn.prototype,"selected",2),b([w({type:Boolean,reflect:!0})],Yn.prototype,"error",2),b([w({type:Boolean,reflect:!0})],Yn.prototype,"dragging",2),b([w({type:Boolean,reflect:!0,attribute:"link-target"})],Yn.prototype,"linkTarget",2);var j6e=Yn;Yn.define("zn-flow-node");var K6e=Q`@keyframes rotate-gradient{from{--rotate:0deg}to{--rotate:360deg}}:host{text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-transform:none}:host *,:host *::before,:host *::after{box-sizing:border-box;border-width:0;border-style:solid;border-color:rgb(var(--zn-border-color))}[hidden]{display:none !important}.width-container,.form-container,.wide-form-container{height:100%;width:100%;margin:var(--zn-default-margin,0 auto)}.width-container{max-width:var(--zn-container)}.form-container{max-width:var(--zn-container-ph)}.wide-form-container{max-width:var(--zn-container-lg)}:host{display:block;position:relative;width:100%;height:100%;overflow:hidden}.viewport{position:absolute;inset:0;overflow:hidden;background-color:rgb(var(--zn-color-body));background-image:radial-gradient(rgb(var(--zn-color-border)) 1px,transparent 1px);background-size:20px 20px;cursor:grab;touch-action:none}.viewport.grabbing,.viewport.grabbing *{cursor:grabbing !important}.viewport.connecting,.viewport.connecting *{cursor:crosshair !important}.viewport.resizing,.viewport.resizing *{cursor:nwse-resize !important}.connections{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible}.connections .wire{fill:none;stroke:rgb(var(--zn-color-primary));stroke-width:2}.connections .wire--stub{stroke:rgb(var(--zn-color-border-active));stroke-dasharray:4 4}.connections .wire--preview{stroke-dasharray:6 4}.connections .wire--loop{stroke:rgb(var(--zn-color-warning))}.connections marker path{fill:rgb(var(--zn-color-primary))}.connections marker#flow-arrow-loop path{fill:rgb(var(--zn-color-warning))}.viewport.linking{cursor:crosshair}.add-point{position:absolute;top:0;left:0;display:flex;align-items:center;justify-content:center;width:24px;height:24px;margin:-12px;padding:0;border-radius:50%;color:rgb(var(--zn-color-primary));background:rgb(var(--zn-panel));border:1px dashed rgb(var(--zn-color-border-active));cursor:pointer;transition:background 0.12s ease,color 0.12s ease}.add-point:hover{color:rgb(var(--zn-panel));background:rgb(var(--zn-color-primary));border-style:solid}.add-point--target{color:rgb(var(--zn-panel));background:rgb(var(--zn-color-primary));border-style:solid;box-shadow:0 0 0 4px color-mix(in srgb,rgb(var(--zn-color-primary)) 25%,transparent)}.add-point--wire{width:20px;height:20px;margin:-10px}.viewport.step-dragging .add-point{color:rgb(var(--zn-panel));background:rgb(var(--zn-color-primary));border-style:solid;box-shadow:0 0 0 4px color-mix(in srgb,rgb(var(--zn-color-primary)) 22%,transparent)}.layer{position:absolute;top:0;left:0;transform-origin:0 0;width:0;height:0}.node-pos{position:absolute;top:0;left:0}.branch-pill-wrap{position:absolute;top:0;left:0;transform:translateX(-50%);display:flex;align-items:stretch}.branch-pill-wrap::after{content:"";position:absolute;left:100%;top:0;width:40px;height:100%}.branch-pill-wrap:hover .branch-pill-delete{opacity:1;transform:translate(0,-50%);pointer-events:auto;transition-delay:0.15s}.branch-pill{display:flex;align-items:center;justify-content:center;width:-moz-max-content;width:max-content;max-width:240px;box-sizing:border-box;text-align:center;overflow-wrap:anywhere;overflow:hidden;padding:0 18px;border-radius:10px;font:inherit;font-size:0.8125rem;font-weight:600;line-height:20px;color:rgb(var(--zn-text));background:color-mix(in srgb,rgb(var(--zn-color-primary)) 8%,rgb(var(--zn-panel)));border:1px solid color-mix(in srgb,rgb(var(--zn-color-primary)) 45%,transparent);cursor:pointer;transition:border-color 0.12s ease,box-shadow 0.12s ease}.branch-pill:hover{border-color:rgb(var(--zn-color-primary));box-shadow:0 1px 3px rgba(var(--zn-shadow),0.4)}.branch-pill--selected{border-color:rgb(var(--zn-color-primary));background:color-mix(in srgb,rgb(var(--zn-color-primary)) 16%,rgb(var(--zn-panel)))}.branch-pill--loop{background:color-mix(in srgb,rgb(var(--zn-color-warning)) 10%,rgb(var(--zn-panel)));border-color:color-mix(in srgb,rgb(var(--zn-color-warning)) 55%,transparent)}.branch-pill--loop:hover{border-color:rgb(var(--zn-color-warning))}.branch-pill--loop.branch-pill--selected{border-color:rgb(var(--zn-color-warning));background:color-mix(in srgb,rgb(var(--zn-color-warning)) 18%,rgb(var(--zn-panel)))}.branch-pill-delete{position:absolute;z-index:1;left:calc(100% + 8px);top:50%;transform:translate(-10px,-50%);display:flex;align-items:center;justify-content:center;width:24px;height:24px;padding:0;border:none;border-radius:50%;background:rgb(var(--zn-color-error));color:white;cursor:pointer;opacity:0;pointer-events:none;transition:opacity 0.15s ease,transform 0.15s ease}.branch-pill-delete:hover{filter:brightness(1.1)}.drop-ghost{position:absolute;top:0;left:0;display:flex;align-items:center;gap:10px;padding:0 12px;border:2px dashed rgb(var(--zn-color-primary));border-radius:10px;background:color-mix(in srgb,rgb(var(--zn-color-primary)) 10%,rgb(var(--zn-panel)));opacity:0.9;pointer-events:none}.drop-ghost__icon{--node-accent:rgb(var(--zn-color-primary));display:flex;align-items:center;justify-content:center;flex:0 0 auto;width:36px;height:36px;border-radius:8px;color:var(--node-accent);background:color-mix(in srgb,var(--node-accent) 16%,rgb(var(--zn-panel)))}.drop-ghost__label{font-size:0.8125rem;font-weight:600;color:rgb(var(--zn-text));white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.toolbar{position:absolute;top:16px;display:flex;align-items:center;gap:2px;padding:3px;background:rgb(var(--zn-panel));border:1px solid rgb(var(--zn-border-color));border-radius:8px;box-shadow:0 1px 3px rgba(var(--zn-shadow),0.4);z-index:2}.toolbar--history{left:16px}.toolbar--zoom{right:16px}.note{position:absolute;display:flex;flex-direction:column;background:#fef9c3;border:1px solid #fde68a;border-radius:4px;box-shadow:0 2px 6px rgba(0,0,0,0.12)}.note__resize{position:absolute;right:0;bottom:0;width:16px;height:16px;cursor:nwse-resize;background:linear-gradient(135deg,transparent 0 50%,#d9c64a 50% 60%,transparent 60% 70%,#d9c64a 70% 80%,transparent 80%)}.note__bar{display:flex;justify-content:flex-end;height:20px;cursor:grab}.note__close{width:20px;height:20px;padding:0;font-size:14px;line-height:1;color:#92400e;background:transparent;cursor:pointer}.note__text{flex:1;margin:0;padding:0 10px 10px;resize:none;border:none;outline:none;background:transparent;font:inherit;font-size:0.8125rem;color:#713f12}`;var JD=.25,Y6e=2,X6e=.15,ZD=40,oat=20,eR=20,m4=40,sat=20,g4=d0,ha=class ha extends K{constructor(){super(...arguments);this.nodes=[];this.connections=[];this.notes=[];this.selectedNodeId=null;this.errorNodes=new Set;this.movingNodeId=null;this.dragType=null;this.selectedBranch=null;this.zoom=1;this.panX=0;this.panY=0;this.drag=null;this._dropGhost=null;this._linking=null;this._linkPos=null;this._linkTarget=null;this._dragMoved=!1;this._viewInitialised=!1;this._onWheel=t=>{if(t.composedPath().some(d=>d instanceof HTMLTextAreaElement))return;t.preventDefault(),this._viewInitialised=!0;let i=t.deltaMode===1?16:t.deltaMode===2?100:1,n=t.deltaX*i,o=t.deltaY*i;if(t.ctrlKey||t.metaKey){let d=Math.min(Y6e,Math.max(JD,this.zoom*Math.exp(-o*.0015)));if(d===this.zoom)return;let c=this.getBoundingClientRect(),f=t.clientX-c.left,p=t.clientY-c.top,u=(f-this.panX)/this.zoom,m=(p-this.panY)/this.zoom;this.zoom=+d.toFixed(3),this.panX=Math.round(f-u*this.zoom),this.panY=Math.round(p-m*this.zoom);return}let s=t.shiftKey&&!n?o:n,l=t.shiftKey&&!n?0:o;this.panX-=Math.round(s),this.panY-=Math.round(l)};this._onBackgroundPointerDown=t=>{if(t.button===1){t.preventDefault(),this._viewInitialised=!0,this.drag={kind:"pan",ox:t.clientX,oy:t.clientY,px:this.panX,py:this.panY},this._setupWindow("grabbing");return}if(t.button===0){if(this._viewInitialised=!0,this._linking){let i=this._linking,n=this._linkTarget;if(this._cancelLink(),n){this._emit("flow-link-assign",{nodeId:i.nodeId,port:i.port,targetId:n});return}}this._emit("flow-node-select",{nodeId:null}),this.drag={kind:"pan",ox:t.clientX,oy:t.clientY,px:this.panX,py:this.panY},this._setupWindow("grabbing")}};this._onNodeGrab=t=>{if(this._linking){let o=this._linking;this._cancelLink(),o.nodeId!==t.detail.nodeId&&this._emit("flow-link-assign",{nodeId:o.nodeId,port:o.port,targetId:t.detail.nodeId});return}let i=this.nodes.find(o=>o.id===t.detail.nodeId);if(!i)return;let n=this.screenToCanvas(t.detail.clientX,t.detail.clientY);this.drag={kind:"node",id:i.id,offX:n.x-i.x,offY:n.y-i.y},this._dragMoved=!1,this._setupWindow("grabbing")};this._onNodeSelect=t=>{this._linking&&t.detail.nodeId&&t.stopPropagation()};this._onPortClick=t=>{var s;let{nodeId:i}=t.detail;if(this._linking&&this._linking.nodeId!==i){let l=this._linking;this._cancelLink(),this._emit("flow-link-assign",{nodeId:l.nodeId,port:l.port,targetId:i});return}let n=this.nodes.find(l=>l.id===i);if(!n)return;let o=Za(n,this._typeFor(n)).find(l=>!this.connections.some(d=>d.source.node===i&&d.source.port===l.id));this._startLink(i,(s=o==null?void 0:o.id)!=null?s:p4)};this._onLinkPointerMove=t=>{var l;let i=this.screenToCanvas(t.clientX,t.clientY);this._linkPos=i;let n=this._linking;if(!n)return;let o=12,s=this.nodes.find(d=>d.id!==n.nodeId&&i.x>=d.x-o&&i.x<=d.x+ua+o&&i.y>=d.y-o&&i.y<=d.y+zi+o&&zc(d,this._typeFor(d)).length>0);this._linkTarget=(l=s==null?void 0:s.id)!=null?l:null};this._onLinkKeyDown=t=>{t.key==="Escape"&&this._cancelLink()};this._cancelLink=()=>{this._linking&&(this._linking=null,this._linkPos=null,this._linkTarget=null,window.removeEventListener("pointermove",this._onLinkPointerMove),window.removeEventListener("keydown",this._onLinkKeyDown),window.removeEventListener("blur",this._cancelLink))};this._onPointerMove=t=>{if(!this.drag)return;if(this.drag.kind==="pan"){this.panX=this.drag.px+(t.clientX-this.drag.ox),this.panY=this.drag.py+(t.clientY-this.drag.oy);return}let i=this.screenToCanvas(t.clientX,t.clientY);if(this.drag.kind==="node"){let n=this.nodes.find(o=>o.id===this.drag.id);if(n){let o={x:bn(i.x-this.drag.offX),y:bn(i.y-this.drag.offY)},s=this.nodes.filter(c=>c.id!==n.id),l=c=>{let f=le(le({},n),c);return!s.some(p=>B6e(f,p,u=>{var m;return(m=this.registry)==null?void 0:m.get(u)},this.nodes,this.connections))},d=l(o)?o:l({x:o.x,y:n.y})?{x:o.x,y:n.y}:l({x:n.x,y:o.y})?{x:n.x,y:o.y}:null;d&&(d.x!==n.x||d.y!==n.y)&&(this._dragMoved||this._beginMove(),n.x=d.x,n.y=d.y,this.requestUpdate())}}else if(this.drag.kind==="note"){let n=this.notes.find(o=>o.id===this.drag.id);n&&(this._dragMoved||this._beginMove(),n.x=bn(i.x-this.drag.offX),n.y=bn(i.y-this.drag.offY),this.requestUpdate())}else if(this.drag.kind==="note-resize"){let n=this.notes.find(o=>o.id===this.drag.id);n&&(this._dragMoved||this._beginMove(),n.width=Math.max($6e,bn(i.x-n.x)),n.height=Math.max(V6e,bn(i.y-n.y)),this.requestUpdate())}};this._onPointerUp=()=>{let t=this.drag;this.drag=null,this._teardownWindow(),t&&(t.kind==="node"||t.kind==="note"||t.kind==="note-resize")&&this._dragMoved&&this._emit("flow-change-commit")};this._onViewportDragOver=t=>{var o;if(!((o=t.dataTransfer)!=null&&o.types.includes(g4)))return;this._viewInitialised=!0,t.preventDefault();let i=t.composedPath().some(s=>s instanceof Element&&s.classList.contains("add-point"));t.dataTransfer.dropEffect=i?"copy":"move";let n=this.screenToCanvas(t.clientX,t.clientY);this._dropGhost={x:bn(n.x-ua/2),y:bn(n.y-zi/2)}};this._onViewportDragLeave=t=>{let i=this.getBoundingClientRect();(t.clientX<i.left||t.clientX>i.right||t.clientY<i.top||t.clientY>i.bottom)&&(this._dropGhost=null)};this._clearDropGhost=()=>{this._dropGhost=null};this._onAddPointDragOver=t=>{var i;(i=t.dataTransfer)!=null&&i.types.includes(g4)&&(t.preventDefault(),t.dataTransfer.dropEffect="copy")}}connectedCallback(){super.connectedCallback(),this.addEventListener("flow-node-grab",this._onNodeGrab),this.addEventListener("flow-node-select",this._onNodeSelect),this.addEventListener("flow-port-click",this._onPortClick),this.addEventListener("wheel",this._onWheel,{passive:!1})}disconnectedCallback(){this.removeEventListener("flow-node-grab",this._onNodeGrab),this.removeEventListener("flow-node-select",this._onNodeSelect),this.removeEventListener("flow-port-click",this._onPortClick),this.removeEventListener("wheel",this._onWheel),this._cancelLink(),this._teardownWindow(),super.disconnectedCallback()}updated(t){if(super.updated(t),this.style.setProperty("--flow-zoom",String(this.zoom)),t.has("dragType")&&!this.dragType&&(this._dropGhost=null),!this._viewInitialised&&this.nodes.length){let i=this.getBoundingClientRect();i.width&&i.height&&(this._viewInitialised=!0,this._resetView())}}_emit(t,i){this.dispatchEvent(new CustomEvent(t,{bubbles:!0,composed:!0,detail:i}))}screenToCanvas(t,i){let n=this.getBoundingClientRect();return{x:(t-n.left-this.panX)/this.zoom,y:(i-n.top-this.panY)/this.zoom}}_typeFor(t){var i;return(i=this.registry)==null?void 0:i.get(t.type)}_setupWindow(t=""){window.addEventListener("pointermove",this._onPointerMove),window.addEventListener("pointerup",this._onPointerUp),t&&(document.body.style.cursor=t)}_teardownWindow(){window.removeEventListener("pointermove",this._onPointerMove),window.removeEventListener("pointerup",this._onPointerUp),document.body.style.cursor=""}_startLink(t,i){this._linking={nodeId:t,port:i},this._linkPos=null,window.addEventListener("pointermove",this._onLinkPointerMove),window.addEventListener("keydown",this._onLinkKeyDown),window.addEventListener("blur",this._cancelLink)}_beginMove(){this._dragMoved=!0,this._emit("flow-interaction-start")}_outputLayout(t){let i=Za(t,this._typeFor(t)),n=t.x+ua/2,o=t.y+zi,s=o+GD,l=KD(t,c=>{var f;return(f=this.registry)==null?void 0:f.get(c)},this.nodes,this.connections),d=i.map((c,f)=>{let p=this.connections.find(y=>y.source.node===t.id&&y.source.port===c.id),u=p?this.nodes.find(y=>y.id===p.target.node):void 0,m=l[f],g=c.label?s+WD:null,_=c.label?jD(c.label).h:0,x=g===null?s:g+_;return{port:c,conn:p,child:u,x:m,pillTop:g,pillH:_,exitY:x}});return{cx:n,by:o,busY:s,branches:d}}_inputAnchor(t,i){let n=zc(t,this._typeFor(t)),o=Math.max(n.findIndex(s=>s.id===i),0);return{x:r_(t,"in",o,n.length).x,y:t.y}}_elbowMidOffsets(){var n,o;let t=new Map;for(let s of this.nodes){let{branches:l}=this._outputLayout(s);for(let d of l){if(!d.conn||!d.child)continue;let{x:c,y:f}=this._inputAnchor(d.child,d.conn.target.port);if(c===d.x||f-eR<d.exitY)continue;let p=bn((d.exitY+f)/2),u=`${d.conn.target.node}:${d.conn.target.port}`,m=(n=t.get(p))!=null?n:new Map;t.set(p,m),m.set(u,[...(o=m.get(u))!=null?o:[],d.conn.id])}}let i=new Map;for(let s of t.values()){if(s.size<2)continue;let l=[...s.keys()].sort();l.forEach((d,c)=>{let f=(c-Math.floor((l.length-1)/2))*sat;s.get(d).forEach(p=>i.set(p,f))})}return i}_segmentBlocked(t,i,n){let s=Math.min(t.x,i.x),l=Math.max(t.x,i.x),d=Math.min(t.y,i.y),c=Math.max(t.y,i.y);return this.nodes.some(f=>!n.has(f.id)&&s<f.x+ua+8&&l>f.x-8&&d<f.y+zi+8&&c>f.y-8)}_routeClear(t,i){for(let n=0;n<t.length-1;n++)if(this._segmentBlocked(t[n],t[n+1],i))return!1;return!0}_routePoints(t,i,n,o=0,s,l=!1){let{x:d,y:c}=this._inputAnchor(i,n),f=new Set(s?[i.id,s]:[i.id]);if(c-eR>=t.y){let x=Math.round((t.y+c)/2)+o,y=c-t.y,k=Math.min(c-12,Math.ceil((t.y+y/4)/Mi)*Mi),M=Math.max(k,Math.floor((c-y/4)/Mi)*Mi),S=I=>Math.max(k,Math.min(M,I)),T=null;if(d===t.x){let I=[t,{x:d,y:c}];if(this._routeClear(I,f))return I;T=I}else for(let I=0;I<=20;I++)for(let N of I===0?[x]:[x+I*Mi,x-I*Mi]){let B=S(N);if(B!==N&&I>0)continue;let F=[t,{x:t.x,y:B},{x:d,y:B},{x:d,y:c}];if(T!=null||(T=F),this._routeClear(F,f))return F}let E=Math.floor(y/2/10)*10,L=Math.max(10,Math.round(y/4/10)*10);for(let I=0;I<=12;I++)for(let N of I===0?[L]:[L+I*10,L-I*10]){if(N<10||N>E)continue;let B=t.y+N,F=c-N;if(!(F<B))for(let X=1;X<=14;X++)for(let V of[1,-1]){let ee=t.x+V*X*Mi,ne=[t,{x:t.x,y:B},{x:ee,y:B},{x:ee,y:F},{x:d,y:F},{x:d,y:c}];if(this._routeClear(ne,f))return ne}}return T}let p=t.y+oat,u=c-eR,m,g;if(l){let x=this.nodes.filter(T=>T.y+zi>u-Mi&&T.y<p+Mi),y=Math.max(...x.map(T=>T.x+ua))+m4,k=Math.min(...x.map(T=>T.x))-m4,M=Math.abs(y-t.x)+Math.abs(y-d),S=Math.abs(t.x-k)+Math.abs(d-k);m=M<=S,g=m?y:k}else m=t.x>=i.x+ua/2,g=m?i.x+ua+m4:i.x-m4;let _=null;for(let x=0;x<=20;x++){let y=g+(m?1:-1)*x*Mi,k=[t,{x:t.x,y:p},{x:y,y:p},{x:y,y:u},{x:d,y:u},{x:d,y:c}];if(_!=null||(_=k),this._routeClear(k,f))return k}return _}static _pathFrom(t){return t.map((i,n)=>`${n===0?"M":"L"} ${i.x} ${i.y}`).join(" ")}_addPoints(){if(!this.movingNodeId&&!this.dragType)return[];let t=[];for(let i of this.nodes){let{branches:n}=this._outputLayout(i);n.forEach(o=>{o.conn||t.push({nodeId:i.id,port:o.port.id,px:o.x,py:o.exitY+ZD})})}return t}_wirePoints(){if(this.movingNodeId)return[];let t=this._elbowMidOffsets(),i=mp(this.nodes,this.connections),n=[];for(let o of this.nodes){let{branches:s}=this._outputLayout(o);s.forEach(l=>{var u;if(!l.conn||!l.child)return;let d=(u=t.get(l.conn.id))!=null?u:0,c=this._routePoints({x:l.x,y:l.exitY},l.child,l.conn.target.port,d,o.id,i.has(l.conn)),f=0,p=-1;for(let m=0;m<c.length-1;m++){let g=Math.abs(c[m+1].x-c[m].x)+Math.abs(c[m+1].y-c[m].y);g>p&&(p=g,f=m)}n.push({connectionId:l.conn.id,px:(c[f].x+c[f+1].x)/2,py:(c[f].y+c[f+1].y)/2})})}return n}_screenFromCanvas(t,i){let n=this.getBoundingClientRect();return{clientX:n.left+this.panX+t*this.zoom,clientY:n.top+this.panY+i*this.zoom}}_onAddClick(t,i,n){if(t.stopPropagation(),this.movingNodeId){this._emit("flow-output-move-target",{nodeId:i,port:n});return}this._startLink(i,n)}_onWireAddClick(t,i,n,o){t.stopPropagation(),this._emit("flow-wire-pick",le({connectionId:i},this._screenFromCanvas(n,o)))}_onAddDrop(t,i,n){var s;let o=(s=t.dataTransfer)==null?void 0:s.getData(g4);o&&(t.preventDefault(),t.stopPropagation(),this._emit("flow-output-assign",{nodeId:i,port:n,type:o}))}_onWireDrop(t,i){var o;let n=(o=t.dataTransfer)==null?void 0:o.getData(g4);n&&(t.preventDefault(),t.stopPropagation(),this._emit("flow-wire-assign",{connectionId:i,type:n}))}_zoomBy(t){this._viewInitialised=!0,this.zoom=Math.min(Y6e,Math.max(JD,+(this.zoom+t).toFixed(2)))}_contentBounds(){var s,l;if(!this.nodes.length&&!this.notes.length)return null;let t=1/0,i=1/0,n=-1/0,o=-1/0;for(let d of this.nodes){t=Math.min(t,d.x),n=Math.max(n,d.x+ua),i=Math.min(i,d.y),o=Math.max(o,d.y+zi);for(let c of this._outputLayout(d).branches)t=Math.min(t,c.x-70),n=Math.max(n,c.x+70),o=Math.max(o,c.exitY+ZD+14)}for(let d of this.notes)t=Math.min(t,d.x),n=Math.max(n,d.x+((s=d.width)!=null?s:YD)),i=Math.min(i,d.y),o=Math.max(o,d.y+((l=d.height)!=null?l:XD));return{x:t,y:i,width:n-t,height:o-i}}_resetView(){let t=this.getBoundingClientRect(),i=this._contentBounds();if(!i||!t.width||!t.height){this.zoom=1,this.panX=0,this.panY=0;return}let n=60,o=Math.min(1,(t.width-n*2)/i.width,(t.height-n*2)/i.height);this.zoom=Math.max(JD,+o.toFixed(2)),this.panX=Math.round((t.width-i.width*this.zoom)/2-i.x*this.zoom),this.panY=Math.round((t.height-i.height*this.zoom)/2-i.y*this.zoom)}_viewportCursorClass(){return this.drag?this.drag.kind==="note-resize"?"resizing":"grabbing":""}_renderConnections(){var l;let t=`translate(${this.panX} ${this.panY}) scale(${this.zoom})`,i=this._elbowMidOffsets(),n=mp(this.nodes,this.connections),o=[],s=!!(this.movingNodeId||this.dragType);for(let d of this.nodes){let{cx:c,by:f,busY:p,branches:u}=this._outputLayout(d),m=u.filter(y=>y.conn&&y.child||y.pillTop!==null||s);if(!m.length)continue;o.push(Ss`<path class="wire" d="M ${c} ${f} L ${c} ${p}"></path>`);let g=[c,...m.map(y=>y.x)],_=Math.min(...g),x=Math.max(...g);x-_>.5&&o.push(Ss`<path class="wire" d="M ${_} ${p} L ${x} ${p}"></path>`),m.forEach(y=>{var k;if(y.pillTop!==null&&o.push(Ss`<path class="wire" d="M ${y.x} ${p} L ${y.x} ${y.pillTop}" marker-end="url(#flow-arrow)"></path>`),y.conn&&y.child){let M=(k=i.get(y.conn.id))!=null?k:0,S=n.has(y.conn),T=this._routePoints({x:y.x,y:y.exitY},y.child,y.conn.target.port,M,d.id,S);o.push(Ss`<path
+    `}};Yn.styles=Y(W6e),Yn.dependencies={"zn-icon":It,"zn-button":Tr,"zn-dropdown":Xi,"zn-menu":Rs,"zn-menu-item":Sd},b([w({attribute:!1})],Yn.prototype,"node",2),b([w({attribute:!1})],Yn.prototype,"type",2),b([w({type:Boolean,reflect:!0})],Yn.prototype,"selected",2),b([w({type:Boolean,reflect:!0})],Yn.prototype,"error",2),b([w({type:Boolean,reflect:!0})],Yn.prototype,"dragging",2),b([w({type:Boolean,reflect:!0,attribute:"link-target"})],Yn.prototype,"linkTarget",2);var j6e=Yn;Yn.define("zn-flow-node");var K6e=Q`@keyframes rotate-gradient{from{--rotate:0deg}to{--rotate:360deg}}:host{text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-transform:none}:host *,:host *::before,:host *::after{box-sizing:border-box;border-width:0;border-style:solid;border-color:rgb(var(--zn-border-color))}[hidden]{display:none !important}.width-container,.form-container,.wide-form-container{height:100%;width:100%;margin:var(--zn-default-margin,0 auto)}.width-container{max-width:var(--zn-container)}.form-container{max-width:var(--zn-container-ph)}.wide-form-container{max-width:var(--zn-container-lg)}:host{display:block;position:relative;width:100%;height:100%;overflow:hidden}.viewport{position:absolute;inset:0;overflow:hidden;background-color:rgb(var(--zn-color-body));background-image:radial-gradient(rgb(var(--zn-color-border)) 1px,transparent 1px);background-size:20px 20px;cursor:grab;touch-action:none}.viewport.grabbing,.viewport.grabbing *{cursor:grabbing !important}.viewport.connecting,.viewport.connecting *{cursor:crosshair !important}.viewport.resizing,.viewport.resizing *{cursor:nwse-resize !important}.connections{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible}.connections .wire{fill:none;stroke:rgb(var(--zn-color-primary));stroke-width:2}.connections .wire--stub{stroke:rgb(var(--zn-color-border-active));stroke-dasharray:4 4}.connections .wire--preview{stroke-dasharray:6 4}.connections .wire--loop{stroke:rgb(var(--zn-color-warning))}.connections marker path{fill:rgb(var(--zn-color-primary))}.connections marker#flow-arrow-loop path{fill:rgb(var(--zn-color-warning))}.viewport.linking{cursor:crosshair}.add-point{position:absolute;top:0;left:0;display:flex;align-items:center;justify-content:center;width:24px;height:24px;margin:-12px;padding:0;border-radius:50%;color:rgb(var(--zn-color-primary));background:rgb(var(--zn-panel));border:1px dashed rgb(var(--zn-color-border-active));cursor:pointer;transition:background 0.12s ease,color 0.12s ease}.add-point:hover{color:rgb(var(--zn-panel));background:rgb(var(--zn-color-primary));border-style:solid}.add-point--target{color:rgb(var(--zn-panel));background:rgb(var(--zn-color-primary));border-style:solid;box-shadow:0 0 0 4px color-mix(in srgb,rgb(var(--zn-color-primary)) 25%,transparent)}.add-point--wire{width:20px;height:20px;margin:-10px}.viewport.step-dragging .add-point{color:rgb(var(--zn-panel));background:rgb(var(--zn-color-primary));border-style:solid;box-shadow:0 0 0 4px color-mix(in srgb,rgb(var(--zn-color-primary)) 22%,transparent)}.layer{position:absolute;top:0;left:0;transform-origin:0 0;width:0;height:0}.node-pos{position:absolute;top:0;left:0}.branch-pill-wrap{position:absolute;top:0;left:0;transform:translateX(-50%);display:flex;align-items:stretch}.branch-pill-wrap::after{content:"";position:absolute;left:100%;top:0;width:40px;height:100%}.branch-pill-wrap:hover .branch-pill-delete{opacity:1;transform:translate(0,-50%);pointer-events:auto;transition-delay:0.15s}.branch-pill{display:flex;align-items:center;justify-content:center;width:-moz-max-content;width:max-content;max-width:240px;box-sizing:border-box;text-align:center;overflow-wrap:anywhere;overflow:hidden;padding:0 18px;border-radius:10px;font:inherit;font-size:0.8125rem;font-weight:600;line-height:20px;color:rgb(var(--zn-text));background:color-mix(in srgb,rgb(var(--zn-color-primary)) 8%,rgb(var(--zn-panel)));border:1px solid color-mix(in srgb,rgb(var(--zn-color-primary)) 45%,transparent);cursor:pointer;transition:border-color 0.12s ease,box-shadow 0.12s ease}.branch-pill:hover{border-color:rgb(var(--zn-color-primary));box-shadow:0 1px 3px rgba(var(--zn-shadow),0.4)}.branch-pill--selected{border-color:rgb(var(--zn-color-primary));background:color-mix(in srgb,rgb(var(--zn-color-primary)) 16%,rgb(var(--zn-panel)))}.branch-pill--loop{background:color-mix(in srgb,rgb(var(--zn-color-warning)) 10%,rgb(var(--zn-panel)));border-color:color-mix(in srgb,rgb(var(--zn-color-warning)) 55%,transparent)}.branch-pill--loop:hover{border-color:rgb(var(--zn-color-warning))}.branch-pill--loop.branch-pill--selected{border-color:rgb(var(--zn-color-warning));background:color-mix(in srgb,rgb(var(--zn-color-warning)) 18%,rgb(var(--zn-panel)))}.branch-pill-delete{position:absolute;z-index:1;left:calc(100% + 8px);top:50%;transform:translate(-10px,-50%);display:flex;align-items:center;justify-content:center;width:24px;height:24px;padding:0;border:none;border-radius:50%;background:rgb(var(--zn-color-error));color:white;cursor:pointer;opacity:0;pointer-events:none;transition:opacity 0.15s ease,transform 0.15s ease}.branch-pill-delete:hover{filter:brightness(1.1)}.drop-ghost{position:absolute;top:0;left:0;display:flex;align-items:center;gap:10px;padding:0 12px;border:2px dashed rgb(var(--zn-color-primary));border-radius:10px;background:color-mix(in srgb,rgb(var(--zn-color-primary)) 10%,rgb(var(--zn-panel)));opacity:0.9;pointer-events:none}.drop-ghost__icon{--node-accent:rgb(var(--zn-color-primary));display:flex;align-items:center;justify-content:center;flex:0 0 auto;width:36px;height:36px;border-radius:8px;color:var(--node-accent);background:color-mix(in srgb,var(--node-accent) 16%,rgb(var(--zn-panel)))}.drop-ghost__label{font-size:0.8125rem;font-weight:600;color:rgb(var(--zn-text));white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.toolbar{position:absolute;top:16px;display:flex;align-items:center;gap:2px;padding:3px;background:rgb(var(--zn-panel));border:1px solid rgb(var(--zn-border-color));border-radius:8px;box-shadow:0 1px 3px rgba(var(--zn-shadow),0.4);z-index:2}.toolbar--history{left:16px}.toolbar--zoom{right:16px}.note{position:absolute;display:flex;flex-direction:column;background:#fef9c3;border:1px solid #fde68a;border-radius:4px;box-shadow:0 2px 6px rgba(0,0,0,0.12)}.note__resize{position:absolute;right:0;bottom:0;width:16px;height:16px;cursor:nwse-resize;background:linear-gradient(135deg,transparent 0 50%,#d9c64a 50% 60%,transparent 60% 70%,#d9c64a 70% 80%,transparent 80%)}.note__bar{display:flex;justify-content:flex-end;height:20px;cursor:grab}.note__close{width:20px;height:20px;padding:0;font-size:14px;line-height:1;color:#92400e;background:transparent;cursor:pointer}.note__text{flex:1;margin:0;padding:0 10px 10px;resize:none;border:none;outline:none;background:transparent;font:inherit;font-size:0.8125rem;color:#713f12}`;var JD=.25,Y6e=2,X6e=.15,ZD=40,oat=20,eR=20,m4=40,sat=20,g4=d0,ha=class ha extends K{constructor(){super(...arguments);this.nodes=[];this.connections=[];this.notes=[];this.selectedNodeId=null;this.errorNodes=new Set;this.movingNodeId=null;this.dragType=null;this.selectedBranch=null;this.zoom=1;this.panX=0;this.panY=0;this.drag=null;this._dropGhost=null;this._linking=null;this._linkPos=null;this._linkTarget=null;this._linkClient=null;this._linkScrollRaf=null;this._dragMoved=!1;this._viewInitialised=!1;this._onWheel=t=>{if(t.composedPath().some(d=>d instanceof HTMLTextAreaElement))return;t.preventDefault(),this._viewInitialised=!0;let i=t.deltaMode===1?16:t.deltaMode===2?100:1,n=t.deltaX*i,o=t.deltaY*i;if(t.ctrlKey||t.metaKey){let d=Math.min(Y6e,Math.max(JD,this.zoom*Math.exp(-o*.0015)));if(d===this.zoom)return;let c=this.getBoundingClientRect(),f=t.clientX-c.left,p=t.clientY-c.top,u=(f-this.panX)/this.zoom,m=(p-this.panY)/this.zoom;this.zoom=+d.toFixed(3),this.panX=Math.round(f-u*this.zoom),this.panY=Math.round(p-m*this.zoom);return}let s=t.shiftKey&&!n?o:n,l=t.shiftKey&&!n?0:o;this.panX-=Math.round(s),this.panY-=Math.round(l)};this._onBackgroundPointerDown=t=>{if(t.button===1){t.preventDefault(),this._viewInitialised=!0,this.drag={kind:"pan",ox:t.clientX,oy:t.clientY,px:this.panX,py:this.panY},this._setupWindow("grabbing");return}if(t.button===0){if(this._viewInitialised=!0,this._linking){let i=this._linking,n=this._linkTarget;if(this._cancelLink(),n){this._emit("flow-link-assign",{nodeId:i.nodeId,port:i.port,targetId:n});return}}this._emit("flow-node-select",{nodeId:null}),this.drag={kind:"pan",ox:t.clientX,oy:t.clientY,px:this.panX,py:this.panY},this._setupWindow("grabbing")}};this._onNodeGrab=t=>{if(this._linking){let o=this._linking;this._cancelLink(),o.nodeId!==t.detail.nodeId&&this._emit("flow-link-assign",{nodeId:o.nodeId,port:o.port,targetId:t.detail.nodeId});return}let i=this.nodes.find(o=>o.id===t.detail.nodeId);if(!i)return;let n=this.screenToCanvas(t.detail.clientX,t.detail.clientY);this.drag={kind:"node",id:i.id,offX:n.x-i.x,offY:n.y-i.y},this._dragMoved=!1,this._setupWindow("grabbing")};this._onNodeSelect=t=>{this._linking&&t.detail.nodeId&&t.stopPropagation()};this._onPortClick=t=>{var s;let{nodeId:i}=t.detail;if(this._linking&&this._linking.nodeId!==i){let l=this._linking;this._cancelLink(),this._emit("flow-link-assign",{nodeId:l.nodeId,port:l.port,targetId:i});return}let n=this.nodes.find(l=>l.id===i);if(!n)return;let o=Za(n,this._typeFor(n)).find(l=>!this.connections.some(d=>d.source.node===i&&d.source.port===l.id));this._startLink(i,(s=o==null?void 0:o.id)!=null?s:p4)};this._onLinkPointerMove=t=>{this._linkClient={x:t.clientX,y:t.clientY},this._updateLinkFromClient(t.clientX,t.clientY)};this._linkEdgeScroll=()=>{if(this._linkScrollRaf=null,!!this._linking){if(this._linkClient){let t=this.getBoundingClientRect(),i=48,n=14,o=f=>Math.min(n,Math.ceil((i-f)/i*n)),{x:s,y:l}=this._linkClient,d=0,c=0;s<t.left+i?d=o(s-t.left):s>t.right-i&&(d=-o(t.right-s)),l<t.top+i?c=o(l-t.top):l>t.bottom-i&&(c=-o(t.bottom-l)),(d||c)&&(this.panX+=d,this.panY+=c,this._updateLinkFromClient(s,l))}this._linkScrollRaf=requestAnimationFrame(this._linkEdgeScroll)}};this._onLinkKeyDown=t=>{t.key==="Escape"&&this._cancelLink()};this._cancelLink=()=>{this._linking&&(this._linking=null,this._linkPos=null,this._linkTarget=null,this._linkClient=null,this._linkScrollRaf!==null&&(cancelAnimationFrame(this._linkScrollRaf),this._linkScrollRaf=null),window.removeEventListener("pointermove",this._onLinkPointerMove),window.removeEventListener("keydown",this._onLinkKeyDown),window.removeEventListener("blur",this._cancelLink))};this._onPointerMove=t=>{if(!this.drag)return;if(this.drag.kind==="pan"){this.panX=this.drag.px+(t.clientX-this.drag.ox),this.panY=this.drag.py+(t.clientY-this.drag.oy);return}let i=this.screenToCanvas(t.clientX,t.clientY);if(this.drag.kind==="node"){let n=this.nodes.find(o=>o.id===this.drag.id);if(n){let o={x:bn(i.x-this.drag.offX),y:bn(i.y-this.drag.offY)},s=this.nodes.filter(c=>c.id!==n.id),l=c=>{let f=le(le({},n),c);return!s.some(p=>B6e(f,p,u=>{var m;return(m=this.registry)==null?void 0:m.get(u)},this.nodes,this.connections))},d=l(o)?o:l({x:o.x,y:n.y})?{x:o.x,y:n.y}:l({x:n.x,y:o.y})?{x:n.x,y:o.y}:null;d&&(d.x!==n.x||d.y!==n.y)&&(this._dragMoved||this._beginMove(),n.x=d.x,n.y=d.y,this.requestUpdate())}}else if(this.drag.kind==="note"){let n=this.notes.find(o=>o.id===this.drag.id);n&&(this._dragMoved||this._beginMove(),n.x=bn(i.x-this.drag.offX),n.y=bn(i.y-this.drag.offY),this.requestUpdate())}else if(this.drag.kind==="note-resize"){let n=this.notes.find(o=>o.id===this.drag.id);n&&(this._dragMoved||this._beginMove(),n.width=Math.max($6e,bn(i.x-n.x)),n.height=Math.max(V6e,bn(i.y-n.y)),this.requestUpdate())}};this._onPointerUp=()=>{let t=this.drag;this.drag=null,this._teardownWindow(),t&&(t.kind==="node"||t.kind==="note"||t.kind==="note-resize")&&this._dragMoved&&this._emit("flow-change-commit")};this._onViewportDragOver=t=>{var o;if(!((o=t.dataTransfer)!=null&&o.types.includes(g4)))return;this._viewInitialised=!0,t.preventDefault();let i=t.composedPath().some(s=>s instanceof Element&&s.classList.contains("add-point"));t.dataTransfer.dropEffect=i?"copy":"move";let n=this.screenToCanvas(t.clientX,t.clientY);this._dropGhost={x:bn(n.x-ua/2),y:bn(n.y-zi/2)}};this._onViewportDragLeave=t=>{let i=this.getBoundingClientRect();(t.clientX<i.left||t.clientX>i.right||t.clientY<i.top||t.clientY>i.bottom)&&(this._dropGhost=null)};this._clearDropGhost=()=>{this._dropGhost=null};this._onAddPointDragOver=t=>{var i;(i=t.dataTransfer)!=null&&i.types.includes(g4)&&(t.preventDefault(),t.dataTransfer.dropEffect="copy")}}connectedCallback(){super.connectedCallback(),this.addEventListener("flow-node-grab",this._onNodeGrab),this.addEventListener("flow-node-select",this._onNodeSelect),this.addEventListener("flow-port-click",this._onPortClick),this.addEventListener("wheel",this._onWheel,{passive:!1})}disconnectedCallback(){this.removeEventListener("flow-node-grab",this._onNodeGrab),this.removeEventListener("flow-node-select",this._onNodeSelect),this.removeEventListener("flow-port-click",this._onPortClick),this.removeEventListener("wheel",this._onWheel),this._cancelLink(),this._teardownWindow(),super.disconnectedCallback()}updated(t){if(super.updated(t),this.style.setProperty("--flow-zoom",String(this.zoom)),t.has("dragType")&&!this.dragType&&(this._dropGhost=null),!this._viewInitialised&&this.nodes.length){let i=this.getBoundingClientRect();i.width&&i.height&&(this._viewInitialised=!0,this._resetView())}}_emit(t,i){this.dispatchEvent(new CustomEvent(t,{bubbles:!0,composed:!0,detail:i}))}screenToCanvas(t,i){let n=this.getBoundingClientRect();return{x:(t-n.left-this.panX)/this.zoom,y:(i-n.top-this.panY)/this.zoom}}_typeFor(t){var i;return(i=this.registry)==null?void 0:i.get(t.type)}_setupWindow(t=""){window.addEventListener("pointermove",this._onPointerMove),window.addEventListener("pointerup",this._onPointerUp),t&&(document.body.style.cursor=t)}_teardownWindow(){window.removeEventListener("pointermove",this._onPointerMove),window.removeEventListener("pointerup",this._onPointerUp),document.body.style.cursor=""}_startLink(t,i){this._linking={nodeId:t,port:i},this._linkPos=null,this._linkClient=null,window.addEventListener("pointermove",this._onLinkPointerMove),window.addEventListener("keydown",this._onLinkKeyDown),window.addEventListener("blur",this._cancelLink),this._linkScrollRaf=requestAnimationFrame(this._linkEdgeScroll)}_updateLinkFromClient(t,i){var d;let n=this.screenToCanvas(t,i);this._linkPos=n;let o=this._linking;if(!o)return;let s=12,l=this.nodes.find(c=>c.id!==o.nodeId&&n.x>=c.x-s&&n.x<=c.x+ua+s&&n.y>=c.y-s&&n.y<=c.y+zi+s&&zc(c,this._typeFor(c)).length>0);this._linkTarget=(d=l==null?void 0:l.id)!=null?d:null}_beginMove(){this._dragMoved=!0,this._emit("flow-interaction-start")}_outputLayout(t){let i=Za(t,this._typeFor(t)),n=t.x+ua/2,o=t.y+zi,s=o+GD,l=KD(t,c=>{var f;return(f=this.registry)==null?void 0:f.get(c)},this.nodes,this.connections),d=i.map((c,f)=>{let p=this.connections.find(y=>y.source.node===t.id&&y.source.port===c.id),u=p?this.nodes.find(y=>y.id===p.target.node):void 0,m=l[f],g=c.label?s+WD:null,_=c.label?jD(c.label).h:0,x=g===null?s:g+_;return{port:c,conn:p,child:u,x:m,pillTop:g,pillH:_,exitY:x}});return{cx:n,by:o,busY:s,branches:d}}_inputAnchor(t,i){let n=zc(t,this._typeFor(t)),o=Math.max(n.findIndex(s=>s.id===i),0);return{x:r_(t,"in",o,n.length).x,y:t.y}}_elbowMidOffsets(){var n,o;let t=new Map;for(let s of this.nodes){let{branches:l}=this._outputLayout(s);for(let d of l){if(!d.conn||!d.child)continue;let{x:c,y:f}=this._inputAnchor(d.child,d.conn.target.port);if(c===d.x||f-eR<d.exitY)continue;let p=bn((d.exitY+f)/2),u=`${d.conn.target.node}:${d.conn.target.port}`,m=(n=t.get(p))!=null?n:new Map;t.set(p,m),m.set(u,[...(o=m.get(u))!=null?o:[],d.conn.id])}}let i=new Map;for(let s of t.values()){if(s.size<2)continue;let l=[...s.keys()].sort();l.forEach((d,c)=>{let f=(c-Math.floor((l.length-1)/2))*sat;s.get(d).forEach(p=>i.set(p,f))})}return i}_segmentBlocked(t,i,n){let s=Math.min(t.x,i.x),l=Math.max(t.x,i.x),d=Math.min(t.y,i.y),c=Math.max(t.y,i.y);return this.nodes.some(f=>!n.has(f.id)&&s<f.x+ua+8&&l>f.x-8&&d<f.y+zi+8&&c>f.y-8)}_routeClear(t,i){for(let n=0;n<t.length-1;n++)if(this._segmentBlocked(t[n],t[n+1],i))return!1;return!0}_routePoints(t,i,n,o=0,s,l=!1){let{x:d,y:c}=this._inputAnchor(i,n),f=new Set(s?[i.id,s]:[i.id]);if(c-eR>=t.y){let x=Math.round((t.y+c)/2)+o,y=c-t.y,k=Math.min(c-12,Math.ceil((t.y+y/4)/Mi)*Mi),M=Math.max(k,Math.floor((c-y/4)/Mi)*Mi),S=I=>Math.max(k,Math.min(M,I)),T=null;if(d===t.x){let I=[t,{x:d,y:c}];if(this._routeClear(I,f))return I;T=I}else for(let I=0;I<=20;I++)for(let N of I===0?[x]:[x+I*Mi,x-I*Mi]){let B=S(N);if(B!==N&&I>0)continue;let F=[t,{x:t.x,y:B},{x:d,y:B},{x:d,y:c}];if(T!=null||(T=F),this._routeClear(F,f))return F}let E=Math.floor(y/2/10)*10,L=Math.max(10,Math.round(y/4/10)*10);for(let I=0;I<=12;I++)for(let N of I===0?[L]:[L+I*10,L-I*10]){if(N<10||N>E)continue;let B=t.y+N,F=c-N;if(!(F<B))for(let X=1;X<=14;X++)for(let V of[1,-1]){let ee=t.x+V*X*Mi,ne=[t,{x:t.x,y:B},{x:ee,y:B},{x:ee,y:F},{x:d,y:F},{x:d,y:c}];if(this._routeClear(ne,f))return ne}}return T}let p=t.y+oat,u=c-eR,m,g;if(l){let x=this.nodes.filter(T=>T.y+zi>u-Mi&&T.y<p+Mi),y=Math.max(...x.map(T=>T.x+ua))+m4,k=Math.min(...x.map(T=>T.x))-m4,M=Math.abs(y-t.x)+Math.abs(y-d),S=Math.abs(t.x-k)+Math.abs(d-k);m=M<=S,g=m?y:k}else m=t.x>=i.x+ua/2,g=m?i.x+ua+m4:i.x-m4;let _=null;for(let x=0;x<=20;x++){let y=g+(m?1:-1)*x*Mi,k=[t,{x:t.x,y:p},{x:y,y:p},{x:y,y:u},{x:d,y:u},{x:d,y:c}];if(_!=null||(_=k),this._routeClear(k,f))return k}return _}static _pathFrom(t){return t.map((i,n)=>`${n===0?"M":"L"} ${i.x} ${i.y}`).join(" ")}_addPoints(){if(!this.movingNodeId&&!this.dragType)return[];let t=[];for(let i of this.nodes){let{branches:n}=this._outputLayout(i);n.forEach(o=>{o.conn||t.push({nodeId:i.id,port:o.port.id,px:o.x,py:o.exitY+ZD})})}return t}_wirePoints(){if(this.movingNodeId)return[];let t=this._elbowMidOffsets(),i=mp(this.nodes,this.connections),n=[];for(let o of this.nodes){let{branches:s}=this._outputLayout(o);s.forEach(l=>{var u;if(!l.conn||!l.child)return;let d=(u=t.get(l.conn.id))!=null?u:0,c=this._routePoints({x:l.x,y:l.exitY},l.child,l.conn.target.port,d,o.id,i.has(l.conn)),f=0,p=-1;for(let m=0;m<c.length-1;m++){let g=Math.abs(c[m+1].x-c[m].x)+Math.abs(c[m+1].y-c[m].y);g>p&&(p=g,f=m)}n.push({connectionId:l.conn.id,px:(c[f].x+c[f+1].x)/2,py:(c[f].y+c[f+1].y)/2})})}return n}_screenFromCanvas(t,i){let n=this.getBoundingClientRect();return{clientX:n.left+this.panX+t*this.zoom,clientY:n.top+this.panY+i*this.zoom}}_onAddClick(t,i,n){if(t.stopPropagation(),this.movingNodeId){this._emit("flow-output-move-target",{nodeId:i,port:n});return}this._startLink(i,n)}_onWireAddClick(t,i,n,o){t.stopPropagation(),this._emit("flow-wire-pick",le({connectionId:i},this._screenFromCanvas(n,o)))}_onAddDrop(t,i,n){var s;let o=(s=t.dataTransfer)==null?void 0:s.getData(g4);o&&(t.preventDefault(),t.stopPropagation(),this._emit("flow-output-assign",{nodeId:i,port:n,type:o}))}_onWireDrop(t,i){var o;let n=(o=t.dataTransfer)==null?void 0:o.getData(g4);n&&(t.preventDefault(),t.stopPropagation(),this._emit("flow-wire-assign",{connectionId:i,type:n}))}_zoomBy(t){this._viewInitialised=!0,this.zoom=Math.min(Y6e,Math.max(JD,+(this.zoom+t).toFixed(2)))}_contentBounds(){var s,l;if(!this.nodes.length&&!this.notes.length)return null;let t=1/0,i=1/0,n=-1/0,o=-1/0;for(let d of this.nodes){t=Math.min(t,d.x),n=Math.max(n,d.x+ua),i=Math.min(i,d.y),o=Math.max(o,d.y+zi);for(let c of this._outputLayout(d).branches)t=Math.min(t,c.x-70),n=Math.max(n,c.x+70),o=Math.max(o,c.exitY+ZD+14)}for(let d of this.notes)t=Math.min(t,d.x),n=Math.max(n,d.x+((s=d.width)!=null?s:YD)),i=Math.min(i,d.y),o=Math.max(o,d.y+((l=d.height)!=null?l:XD));return{x:t,y:i,width:n-t,height:o-i}}_resetView(){let t=this.getBoundingClientRect(),i=this._contentBounds();if(!i||!t.width||!t.height){this.zoom=1,this.panX=0,this.panY=0;return}let n=60,o=Math.min(1,(t.width-n*2)/i.width,(t.height-n*2)/i.height);this.zoom=Math.max(JD,+o.toFixed(2)),this.panX=Math.round((t.width-i.width*this.zoom)/2-i.x*this.zoom),this.panY=Math.round((t.height-i.height*this.zoom)/2-i.y*this.zoom)}_viewportCursorClass(){return this.drag?this.drag.kind==="note-resize"?"resizing":"grabbing":""}_renderConnections(){var l;let t=`translate(${this.panX} ${this.panY}) scale(${this.zoom})`,i=this._elbowMidOffsets(),n=mp(this.nodes,this.connections),o=[],s=!!(this.movingNodeId||this.dragType);for(let d of this.nodes){let{cx:c,by:f,busY:p,branches:u}=this._outputLayout(d),m=u.filter(y=>y.conn&&y.child||y.pillTop!==null||s);if(!m.length)continue;o.push(Ss`<path class="wire" d="M ${c} ${f} L ${c} ${p}"></path>`);let g=[c,...m.map(y=>y.x)],_=Math.min(...g),x=Math.max(...g);x-_>.5&&o.push(Ss`<path class="wire" d="M ${_} ${p} L ${x} ${p}"></path>`),m.forEach(y=>{var k;if(y.pillTop!==null&&o.push(Ss`<path class="wire" d="M ${y.x} ${p} L ${y.x} ${y.pillTop}" marker-end="url(#flow-arrow)"></path>`),y.conn&&y.child){let M=(k=i.get(y.conn.id))!=null?k:0,S=n.has(y.conn),T=this._routePoints({x:y.x,y:y.exitY},y.child,y.conn.target.port,M,d.id,S);o.push(Ss`<path
             class="wire ${S?"wire--loop":""}"
             d="${ha._pathFrom(T)}"
             marker-end="url(#${S?"flow-arrow-loop":"flow-arrow"})"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kubex/zinc",
-  "version": "1.1.25",
+  "version": "1.1.27",
   "description": "A collection of web components for building web applications based off of @shoelace-style/Shoelace",
   "keywords": [
     "web components",

package/src/components/flow-builder/modules/flow-canvas/flow-canvas.component.ts

@@ -120,6 +120,9 @@ export default class ZnFlowCanvas extends ZincElement {
   @state() private _linkPos: { x: number; y: number } | null = null;
   /** The valid node under the cursor while linking — the preview snaps to its input. */
   @state() private _linkTarget: string | null = null;
+  /** Last pointer position (client coords) while linking, for edge auto-pan. */
+  private _linkClient: { x: number; y: number } | null = null;
+  private _linkScrollRaf: number | null = null;
 
   private _dragMoved = false;
   /** Centre the flow when it first arrives; any earlier user interaction opts out. */
@@ -307,13 +310,20 @@ export default class ZnFlowCanvas extends ZincElement {
   private _startLink(nodeId: string, port: string) {
     this._linking = {nodeId, port};
     this._linkPos = null;
+    this._linkClient = null;
     window.addEventListener('pointermove', this._onLinkPointerMove);
     window.addEventListener('keydown', this._onLinkKeyDown);
     window.addEventListener('blur', this._cancelLink);
+    this._linkScrollRaf = requestAnimationFrame(this._linkEdgeScroll);
   }
 
   private _onLinkPointerMove = (e: PointerEvent) => {
-    const p = this.screenToCanvas(e.clientX, e.clientY);
+    this._linkClient = {x: e.clientX, y: e.clientY};
+    this._updateLinkFromClient(e.clientX, e.clientY);
+  };
+
+  private _updateLinkFromClient(clientX: number, clientY: number) {
+    const p = this.screenToCanvas(clientX, clientY);
     this._linkPos = p;
     const linking = this._linking;
     if (!linking) return;
@@ -327,6 +337,37 @@ export default class ZnFlowCanvas extends ZincElement {
       && nodeInputs(n, this._typeFor(n)).length > 0
     );
     this._linkTarget = target?.id ?? null;
+  }
+
+  /**
+   * While a branch rides the cursor, holding the pointer near (or past) a
+   * canvas edge auto-pans in that direction, so the target can be off-screen.
+   * Runs per frame until the link attaches or cancels.
+   */
+  private _linkEdgeScroll = () => {
+    this._linkScrollRaf = null;
+    if (!this._linking) return;
+    if (this._linkClient) {
+      const rect = this.getBoundingClientRect();
+      const ZONE = 48;
+      const MAX = 14;
+      const speed = (depth: number) => Math.min(MAX, Math.ceil(((ZONE - depth) / ZONE) * MAX));
+      const {x, y} = this._linkClient;
+      let dx = 0;
+      let dy = 0;
+      if (x < rect.left + ZONE) dx = speed(x - rect.left);
+      else if (x > rect.right - ZONE) dx = -speed(rect.right - x);
+      if (y < rect.top + ZONE) dy = speed(y - rect.top);
+      else if (y > rect.bottom - ZONE) dy = -speed(rect.bottom - y);
+      if (dx || dy) {
+        this.panX += dx;
+        this.panY += dy;
+        // The canvas moved under the stationary cursor — keep the preview and
+        // the snap target tracking it.
+        this._updateLinkFromClient(x, y);
+      }
+    }
+    this._linkScrollRaf = requestAnimationFrame(this._linkEdgeScroll);
   };
 
   private _onLinkKeyDown = (e: KeyboardEvent) => {
@@ -338,6 +379,11 @@ export default class ZnFlowCanvas extends ZincElement {
     this._linking = null;
     this._linkPos = null;
     this._linkTarget = null;
+    this._linkClient = null;
+    if (this._linkScrollRaf !== null) {
+      cancelAnimationFrame(this._linkScrollRaf);
+      this._linkScrollRaf = null;
+    }
     window.removeEventListener('pointermove', this._onLinkPointerMove);
     window.removeEventListener('keydown', this._onLinkKeyDown);
     window.removeEventListener('blur', this._cancelLink);

package/src/components/flow-builder/modules/flow-node/flow-node.scss

@@ -94,9 +94,9 @@
   }
 }
 
+// Sits flush with the body padding, mirroring the icon tile's edge gap.
 .menu {
   flex: 0 0 auto;
-  margin-right: -4px;
 }
 
 zn-menu-item.danger {