@kubex/zinc 1.1.26 → 1.1.27

package/dist/custom-elements.json

@@ -6492,6 +6492,224 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "components/copy-button/copy-button.js",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "",
+          "name": "ZnCopyButton",
+          "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": "copyIcon",
+              "type": {
+                "text": "HTMLSlotElement"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "successIcon",
+              "type": {
+                "text": "HTMLSlotElement"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "errorIcon",
+              "type": {
+                "text": "HTMLSlotElement"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "tooltip",
+              "type": {
+                "text": "ZnTooltip"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "isCopying",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false"
+            },
+            {
+              "kind": "field",
+              "name": "status",
+              "type": {
+                "text": "'rest' | 'success' | 'error'"
+              },
+              "default": "'rest'"
+            },
+            {
+              "kind": "field",
+              "name": "value",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "attribute": "value"
+            },
+            {
+              "kind": "field",
+              "name": "copyLabel",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "attribute": "copy-label"
+            },
+            {
+              "kind": "field",
+              "name": "src",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "attribute": "src"
+            },
+            {
+              "kind": "field",
+              "name": "size",
+              "type": {
+                "text": "number"
+              },
+              "default": "24",
+              "attribute": "size",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "from",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "An id that references an element in the same document from which data will be copied. If both this and `value` are\npresent, this value will take precedence. By default, the target element's `textContent` will be copied. To copy an\nattribute, append the attribute name wrapped in square brackets, e.g. `from=\"el[value]\"`. To copy a property,\nappend a dot and the property name, e.g. `from=\"el.value\"`.",
+              "attribute": "from"
+            },
+            {
+              "kind": "method",
+              "name": "showStatus",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "status",
+                  "type": {
+                    "text": "'success' | 'error'"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "handleCopy",
+              "privacy": "private"
+            }
+          ],
+          "events": [
+            {
+              "description": "Emitted as an example.",
+              "name": "zn-event-name"
+            }
+          ],
+          "attributes": [
+            {
+              "name": "value",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "fieldName": "value"
+            },
+            {
+              "name": "copy-label",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "fieldName": "copyLabel"
+            },
+            {
+              "name": "src",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "fieldName": "src"
+            },
+            {
+              "name": "size",
+              "type": {
+                "text": "number"
+              },
+              "default": "24",
+              "fieldName": "size"
+            },
+            {
+              "name": "from",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "An id that references an element in the same document from which data will be copied. If both this and `value` are\npresent, this value will take precedence. By default, the target element's `textContent` will be copied. To copy an\nattribute, append the attribute name wrapped in square brackets, e.g. `from=\"el[value]\"`. To copy a property,\nappend a dot and the property name, e.g. `from=\"el.value\"`.",
+              "fieldName": "from"
+            }
+          ],
+          "superclass": {
+            "name": "ZincElement",
+            "module": "/src/internal/zinc-element"
+          },
+          "summary": "Short summary of the component's intended use.",
+          "tagNameWithoutPrefix": "copy-button",
+          "tagName": "zn-copy-button",
+          "customElement": true,
+          "jsDoc": "/**\n * @summary Short summary of the component's intended use.\n * @documentation https://zinc.style/components/copy-button\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/copy-button",
+          "status": "experimental",
+          "since": "1.0",
+          "dependencies": [
+            "zn-example"
+          ]
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "ZnCopyButton",
+            "module": "components/copy-button/copy-button.js"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "components/data-select/data-select.js",
@@ -8198,248 +8416,20 @@
               "fieldName": "noInitialLoad"
             },
             {
-              "name": "group-by",
-              "type": {
-                "text": "string"
-              },
-              "default": "''",
-              "fieldName": "groupBy"
-            },
-            {
-              "name": "groups",
-              "type": {
-                "text": "string"
-              },
-              "default": "''",
-              "fieldName": "groups"
-            }
-          ],
-          "superclass": {
-            "name": "ZincElement",
-            "module": "/src/internal/zinc-element"
-          },
-          "summary": "Short summary of the component's intended use.",
-          "tagNameWithoutPrefix": "data-table",
-          "tagName": "zn-data-table",
-          "customElement": true,
-          "jsDoc": "/**\n * @summary Short summary of the component's intended use.\n * @documentation https://zinc.style/components/data-table\n * @status experimental\n * @since 1.0\n *\n * @dependency zn-button\n * @dependency zn-empty-state\n * @dependency zn-chip\n * @dependency zn-hover-container\n * @dependency zn-dropdown\n * @dependency zn-menu\n * @dependency zn-menu-item\n * @dependency zn-button-group\n * @dependency zn-confirm\n * @dependency zn-skeleton\n * @dependency zn-data-table-search\n *\n * @slot - The default slot.\n * @slot search - Slot for search component.\n * @slot sort - Slot for sort component.\n * @slot filter - Slot for filter component.\n * @slot filter-top - Slot for top-level filter component.\n * @slot delete-action - Slot for delete action button.\n * @slot modify-action - Slot for modify action button.\n * @slot create-action - Slot for create action button.\n * @slot inputs - Slot for additional input controls.\n * @slot empty-state - Slot for custom empty state.\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",
-          "status": "experimental",
-          "since": "1.0",
-          "dependencies": [
-            "zn-button",
-            "zn-empty-state",
-            "zn-chip",
-            "zn-hover-container",
-            "zn-dropdown",
-            "zn-menu",
-            "zn-menu-item",
-            "zn-button-group",
-            "zn-confirm",
-            "zn-skeleton",
-            "zn-data-table-search"
-          ]
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "default",
-          "declaration": {
-            "name": "ZnDataTable",
-            "module": "components/data-table/data-table.js"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "components/copy-button/copy-button.js",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "",
-          "name": "ZnCopyButton",
-          "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": "copyIcon",
-              "type": {
-                "text": "HTMLSlotElement"
-              }
-            },
-            {
-              "kind": "field",
-              "name": "successIcon",
-              "type": {
-                "text": "HTMLSlotElement"
-              }
-            },
-            {
-              "kind": "field",
-              "name": "errorIcon",
-              "type": {
-                "text": "HTMLSlotElement"
-              }
-            },
-            {
-              "kind": "field",
-              "name": "tooltip",
-              "type": {
-                "text": "ZnTooltip"
-              }
-            },
-            {
-              "kind": "field",
-              "name": "isCopying",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false"
-            },
-            {
-              "kind": "field",
-              "name": "status",
-              "type": {
-                "text": "'rest' | 'success' | 'error'"
-              },
-              "default": "'rest'"
-            },
-            {
-              "kind": "field",
-              "name": "value",
-              "type": {
-                "text": "string"
-              },
-              "default": "''",
-              "attribute": "value"
-            },
-            {
-              "kind": "field",
-              "name": "copyLabel",
-              "type": {
-                "text": "string"
-              },
-              "default": "''",
-              "attribute": "copy-label"
-            },
-            {
-              "kind": "field",
-              "name": "src",
-              "type": {
-                "text": "string"
-              },
-              "default": "''",
-              "attribute": "src"
-            },
-            {
-              "kind": "field",
-              "name": "size",
-              "type": {
-                "text": "number"
-              },
-              "default": "24",
-              "attribute": "size",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "from",
-              "type": {
-                "text": "string"
-              },
-              "default": "''",
-              "description": "An id that references an element in the same document from which data will be copied. If both this and `value` are\npresent, this value will take precedence. By default, the target element's `textContent` will be copied. To copy an\nattribute, append the attribute name wrapped in square brackets, e.g. `from=\"el[value]\"`. To copy a property,\nappend a dot and the property name, e.g. `from=\"el.value\"`.",
-              "attribute": "from"
-            },
-            {
-              "kind": "method",
-              "name": "showStatus",
-              "privacy": "private",
-              "parameters": [
-                {
-                  "name": "status",
-                  "type": {
-                    "text": "'success' | 'error'"
-                  }
-                }
-              ]
-            },
-            {
-              "kind": "method",
-              "name": "handleCopy",
-              "privacy": "private"
-            }
-          ],
-          "events": [
-            {
-              "description": "Emitted as an example.",
-              "name": "zn-event-name"
-            }
-          ],
-          "attributes": [
-            {
-              "name": "value",
-              "type": {
-                "text": "string"
-              },
-              "default": "''",
-              "fieldName": "value"
-            },
-            {
-              "name": "copy-label",
-              "type": {
-                "text": "string"
-              },
-              "default": "''",
-              "fieldName": "copyLabel"
-            },
-            {
-              "name": "src",
-              "type": {
-                "text": "string"
-              },
-              "default": "''",
-              "fieldName": "src"
-            },
-            {
-              "name": "size",
+              "name": "group-by",
               "type": {
-                "text": "number"
+                "text": "string"
               },
-              "default": "24",
-              "fieldName": "size"
+              "default": "''",
+              "fieldName": "groupBy"
             },
             {
-              "name": "from",
+              "name": "groups",
               "type": {
                 "text": "string"
               },
               "default": "''",
-              "description": "An id that references an element in the same document from which data will be copied. If both this and `value` are\npresent, this value will take precedence. By default, the target element's `textContent` will be copied. To copy an\nattribute, append the attribute name wrapped in square brackets, e.g. `from=\"el[value]\"`. To copy a property,\nappend a dot and the property name, e.g. `from=\"el.value\"`.",
-              "fieldName": "from"
+              "fieldName": "groups"
             }
           ],
           "superclass": {
@@ -8447,15 +8437,25 @@
             "module": "/src/internal/zinc-element"
           },
           "summary": "Short summary of the component's intended use.",
-          "tagNameWithoutPrefix": "copy-button",
-          "tagName": "zn-copy-button",
+          "tagNameWithoutPrefix": "data-table",
+          "tagName": "zn-data-table",
           "customElement": true,
-          "jsDoc": "/**\n * @summary Short summary of the component's intended use.\n * @documentation https://zinc.style/components/copy-button\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/copy-button",
+          "jsDoc": "/**\n * @summary Short summary of the component's intended use.\n * @documentation https://zinc.style/components/data-table\n * @status experimental\n * @since 1.0\n *\n * @dependency zn-button\n * @dependency zn-empty-state\n * @dependency zn-chip\n * @dependency zn-hover-container\n * @dependency zn-dropdown\n * @dependency zn-menu\n * @dependency zn-menu-item\n * @dependency zn-button-group\n * @dependency zn-confirm\n * @dependency zn-skeleton\n * @dependency zn-data-table-search\n *\n * @slot - The default slot.\n * @slot search - Slot for search component.\n * @slot sort - Slot for sort component.\n * @slot filter - Slot for filter component.\n * @slot filter-top - Slot for top-level filter component.\n * @slot delete-action - Slot for delete action button.\n * @slot modify-action - Slot for modify action button.\n * @slot create-action - Slot for create action button.\n * @slot inputs - Slot for additional input controls.\n * @slot empty-state - Slot for custom empty state.\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",
           "status": "experimental",
           "since": "1.0",
           "dependencies": [
-            "zn-example"
+            "zn-button",
+            "zn-empty-state",
+            "zn-chip",
+            "zn-hover-container",
+            "zn-dropdown",
+            "zn-menu",
+            "zn-menu-item",
+            "zn-button-group",
+            "zn-confirm",
+            "zn-skeleton",
+            "zn-data-table-search"
           ]
         }
       ],
@@ -8464,8 +8464,8 @@
           "kind": "js",
           "name": "default",
           "declaration": {
-            "name": "ZnCopyButton",
-            "module": "components/copy-button/copy-button.js"
+            "name": "ZnDataTable",
+            "module": "components/data-table/data-table.js"
           }
         }
       ]
@@ -21389,116 +21389,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/note/note.js",
@@ -21667,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",
@@ -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.26",
+    "version": "1.1.27",
     "author": "",
     "license": "MIT"
   }

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

@@ -890,6 +890,27 @@
         }
       ]
     },
+    {
+      "name": "zn-copy-button",
+      "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": [
+        { "name": "value", "values": [] },
+        { "name": "copy-label", "values": [] },
+        { "name": "src", "values": [] },
+        { "name": "size", "values": [] },
+        {
+          "name": "from",
+          "description": "An id that references an element in the same document from which data will be copied. If both this and `value` are\npresent, this value will take precedence. By default, the target element's `textContent` will be copied. To copy an\nattribute, append the attribute name wrapped in square brackets, e.g. `from=\"el[value]\"`. To copy a property,\nappend a dot and the property name, e.g. `from=\"el.value\"`.",
+          "values": []
+        }
+      ],
+      "references": [
+        {
+          "name": "Documentation",
+          "url": "https://zinc.style/components/copy-button"
+        }
+      ]
+    },
     {
       "name": "zn-data-select",
       "description": "A select component with built-in data providers for common options like colors, currencies, and countries.\n---\n\n\n### **Events:**\n - **zn-input** - Emitted when the select's value changes.\n- **zn-clear** - Emitted when the clear button is activated.\n- **blur** - Emitted when the select loses focus.\n\n### **Slots:**\n - **label** - The select's label. Alternatively, you can use the `label` attribute.\n- **label-tooltip** - Used to add text that is displayed in a tooltip next to the label. Alternatively, you can use the `label-tooltip` attribute.\n- **context-note** - Used to add contextual text that is displayed above the select, on the right. Alternatively, you can use the `context-note` attribute.\n- **help-text** - Text that describes how to use the select. Alternatively, you can use the `help-text` attribute.\n\n### **CSS Parts:**\n - **combobox** - The container that wraps the prefix, combobox, clear icon, and expand button (forwarded from zn-select).\n- **expand-icon** - The container that wraps the expand icon (forwarded from zn-select).\n- **form-control-help-text** - The help text's wrapper (forwarded from zn-select).\n- **form-control-input** - The select's wrapper (forwarded from zn-select).\n- **display-input** - The element that displays the selected option's label (forwarded from zn-select).",
@@ -1037,27 +1058,6 @@
         }
       ]
     },
-    {
-      "name": "zn-copy-button",
-      "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": [
-        { "name": "value", "values": [] },
-        { "name": "copy-label", "values": [] },
-        { "name": "src", "values": [] },
-        { "name": "size", "values": [] },
-        {
-          "name": "from",
-          "description": "An id that references an element in the same document from which data will be copied. If both this and `value` are\npresent, this value will take precedence. By default, the target element's `textContent` will be copied. To copy an\nattribute, append the attribute name wrapped in square brackets, e.g. `from=\"el[value]\"`. To copy a property,\nappend a dot and the property name, e.g. `from=\"el.value\"`.",
-          "values": []
-        }
-      ],
-      "references": [
-        {
-          "name": "Documentation",
-          "url": "https://zinc.style/components/copy-button"
-        }
-      ]
-    },
     {
       "name": "zn-data-table-filter",
       "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.",
@@ -2418,6 +2418,19 @@
         }
       ]
     },
+    {
+      "name": "zn-note",
+      "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 - **caption** - The note's caption.\n- **date** - The note's date.\n- **body** - The note's body.\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": [
+        { "name": "color", "values": [{ "name": "typeof colors[number]" }] },
+        { "name": "caption", "values": [] },
+        { "name": "date", "values": [] },
+        { "name": "body", "values": [] }
+      ],
+      "references": [
+        { "name": "Documentation", "url": "https://zinc.style/components/note" }
+      ]
+    },
     {
       "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.",
@@ -2440,19 +2453,6 @@
         }
       ]
     },
-    {
-      "name": "zn-note",
-      "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 - **caption** - The note's caption.\n- **date** - The note's date.\n- **body** - The note's body.\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": [
-        { "name": "color", "values": [{ "name": "typeof colors[number]" }] },
-        { "name": "caption", "values": [] },
-        { "name": "date", "values": [] },
-        { "name": "body", "values": [] }
-      ],
-      "references": [
-        { "name": "Documentation", "url": "https://zinc.style/components/note" }
-      ]
-    },
     {
       "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.",

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.26",
+  "version": "1.1.27",
   "description-markup": "markdown",
   "contributions": {
     "html": {
@@ -1956,6 +1956,57 @@
             "events": []
           }
         },
+        {
+          "name": "zn-copy-button",
+          "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": [
+            { "name": "value", "value": { "type": "string", "default": "''" } },
+            {
+              "name": "copy-label",
+              "value": { "type": "string", "default": "''" }
+            },
+            { "name": "src", "value": { "type": "string", "default": "''" } },
+            { "name": "size", "value": { "type": "number", "default": "24" } },
+            {
+              "name": "from",
+              "description": "An id that references an element in the same document from which data will be copied. If both this and `value` are\npresent, this value will take precedence. By default, the target element's `textContent` will be copied. To copy an\nattribute, append the attribute name wrapped in square brackets, e.g. `from=\"el[value]\"`. To copy a property,\nappend a dot and the property name, e.g. `from=\"el.value\"`.",
+              "value": { "type": "string", "default": "''" }
+            }
+          ],
+          "slots": [
+            { "name": "", "description": "The default slot." },
+            { "name": "example", "description": "An example slot." }
+          ],
+          "events": [
+            { "name": "zn-event-name", "description": "Emitted as an example." }
+          ],
+          "js": {
+            "properties": [
+              { "name": "copyIcon", "type": "HTMLSlotElement" },
+              { "name": "successIcon", "type": "HTMLSlotElement" },
+              { "name": "errorIcon", "type": "HTMLSlotElement" },
+              { "name": "tooltip", "type": "ZnTooltip" },
+              { "name": "isCopying", "type": "boolean" },
+              { "name": "status", "type": "'rest' | 'success' | 'error'" },
+              { "name": "value", "type": "string" },
+              { "name": "copyLabel", "type": "string" },
+              { "name": "src", "type": "string" },
+              { "name": "size", "type": "number" },
+              {
+                "name": "from",
+                "description": "An id that references an element in the same document from which data will be copied. If both this and `value` are\npresent, this value will take precedence. By default, the target element's `textContent` will be copied. To copy an\nattribute, append the attribute name wrapped in square brackets, e.g. `from=\"el[value]\"`. To copy a property,\nappend a dot and the property name, e.g. `from=\"el.value\"`.",
+                "type": "string"
+              }
+            ],
+            "events": [
+              {
+                "name": "zn-event-name",
+                "description": "Emitted as an example."
+              }
+            ]
+          }
+        },
         {
           "name": "zn-data-select",
           "description": "A select component with built-in data providers for common options like colors, currencies, and countries.\n---\n\n\n### **Events:**\n - **zn-input** - Emitted when the select's value changes.\n- **zn-clear** - Emitted when the clear button is activated.\n- **blur** - Emitted when the select loses focus.\n\n### **Slots:**\n - **label** - The select's label. Alternatively, you can use the `label` attribute.\n- **label-tooltip** - Used to add text that is displayed in a tooltip next to the label. Alternatively, you can use the `label-tooltip` attribute.\n- **context-note** - Used to add contextual text that is displayed above the select, on the right. Alternatively, you can use the `context-note` attribute.\n- **help-text** - Text that describes how to use the select. Alternatively, you can use the `help-text` attribute.\n\n### **CSS Parts:**\n - **combobox** - The container that wraps the prefix, combobox, clear icon, and expand button (forwarded from zn-select).\n- **expand-icon** - The container that wraps the expand icon (forwarded from zn-select).\n- **form-control-help-text** - The help text's wrapper (forwarded from zn-select).\n- **form-control-input** - The select's wrapper (forwarded from zn-select).\n- **display-input** - The element that displays the selected option's label (forwarded from zn-select).",
@@ -2355,57 +2406,6 @@
             "events": []
           }
         },
-        {
-          "name": "zn-copy-button",
-          "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": [
-            { "name": "value", "value": { "type": "string", "default": "''" } },
-            {
-              "name": "copy-label",
-              "value": { "type": "string", "default": "''" }
-            },
-            { "name": "src", "value": { "type": "string", "default": "''" } },
-            { "name": "size", "value": { "type": "number", "default": "24" } },
-            {
-              "name": "from",
-              "description": "An id that references an element in the same document from which data will be copied. If both this and `value` are\npresent, this value will take precedence. By default, the target element's `textContent` will be copied. To copy an\nattribute, append the attribute name wrapped in square brackets, e.g. `from=\"el[value]\"`. To copy a property,\nappend a dot and the property name, e.g. `from=\"el.value\"`.",
-              "value": { "type": "string", "default": "''" }
-            }
-          ],
-          "slots": [
-            { "name": "", "description": "The default slot." },
-            { "name": "example", "description": "An example slot." }
-          ],
-          "events": [
-            { "name": "zn-event-name", "description": "Emitted as an example." }
-          ],
-          "js": {
-            "properties": [
-              { "name": "copyIcon", "type": "HTMLSlotElement" },
-              { "name": "successIcon", "type": "HTMLSlotElement" },
-              { "name": "errorIcon", "type": "HTMLSlotElement" },
-              { "name": "tooltip", "type": "ZnTooltip" },
-              { "name": "isCopying", "type": "boolean" },
-              { "name": "status", "type": "'rest' | 'success' | 'error'" },
-              { "name": "value", "type": "string" },
-              { "name": "copyLabel", "type": "string" },
-              { "name": "src", "type": "string" },
-              { "name": "size", "type": "number" },
-              {
-                "name": "from",
-                "description": "An id that references an element in the same document from which data will be copied. If both this and `value` are\npresent, this value will take precedence. By default, the target element's `textContent` will be copied. To copy an\nattribute, append the attribute name wrapped in square brackets, e.g. `from=\"el[value]\"`. To copy a property,\nappend a dot and the property name, e.g. `from=\"el.value\"`.",
-                "type": "string"
-              }
-            ],
-            "events": [
-              {
-                "name": "zn-event-name",
-                "description": "Emitted as an example."
-              }
-            ]
-          }
-        },
         {
           "name": "zn-data-table-filter",
           "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.",
@@ -5650,6 +5650,42 @@
             ]
           }
         },
+        {
+          "name": "zn-note",
+          "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 - **caption** - The note's caption.\n- **date** - The note's date.\n- **body** - The note's body.\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": [
+            { "name": "color", "value": { "type": "typeof colors[number]" } },
+            {
+              "name": "caption",
+              "value": { "type": "string", "default": "''" }
+            },
+            { "name": "date", "value": { "type": "string", "default": "''" } },
+            { "name": "body", "value": { "type": "string", "default": "''" } }
+          ],
+          "slots": [
+            { "name": "caption", "description": "The note's caption." },
+            { "name": "date", "description": "The note's date." },
+            { "name": "body", "description": "The note's body." }
+          ],
+          "events": [
+            { "name": "zn-event-name", "description": "Emitted as an example." }
+          ],
+          "js": {
+            "properties": [
+              { "name": "color", "type": "typeof colors[number]" },
+              { "name": "caption", "type": "string" },
+              { "name": "date", "type": "string" },
+              { "name": "body", "type": "string" }
+            ],
+            "events": [
+              {
+                "name": "zn-event-name",
+                "description": "Emitted as an example."
+              }
+            ]
+          }
+        },
         {
           "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.",
@@ -5689,42 +5725,6 @@
             "events": []
           }
         },
-        {
-          "name": "zn-note",
-          "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 - **caption** - The note's caption.\n- **date** - The note's date.\n- **body** - The note's body.\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": [
-            { "name": "color", "value": { "type": "typeof colors[number]" } },
-            {
-              "name": "caption",
-              "value": { "type": "string", "default": "''" }
-            },
-            { "name": "date", "value": { "type": "string", "default": "''" } },
-            { "name": "body", "value": { "type": "string", "default": "''" } }
-          ],
-          "slots": [
-            { "name": "caption", "description": "The note's caption." },
-            { "name": "date", "description": "The note's date." },
-            { "name": "body", "description": "The note's body." }
-          ],
-          "events": [
-            { "name": "zn-event-name", "description": "Emitted as an example." }
-          ],
-          "js": {
-            "properties": [
-              { "name": "color", "type": "typeof colors[number]" },
-              { "name": "caption", "type": "string" },
-              { "name": "date", "type": "string" },
-              { "name": "body", "type": "string" }
-            ],
-            "events": [
-              {
-                "name": "zn-event-name",
-                "description": "Emitted as an example."
-              }
-            ]
-          }
-        },
         {
           "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.",

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

@@ -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.26",
+  "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);