@nova-design-system/nova-webcomponents 3.15.0 → 3.17.0

package/dist/collection/components/nv-split/nv-split.js

@@ -0,0 +1,549 @@
+import { Host, h, } from "@stencil/core";
+/**
+ * The `nv-split` component is an advanced layout container that enables the creation of interactively resizable panels. It provides a flexible solution for dividing available space between multiple interface sections, with precise control over dimensions and constraints for each panel.
+ * @slot pane - Content of each split pane. Use multiple `<div slot="pane">` elements.
+ * @slot gutter - Optional custom content inside every gutter handle.
+ */
+export class NvSplit {
+    constructor() {
+        /****************************************************************************/
+        //#region PROPERTIES
+        /**
+         * Direction of the split layout.
+         * - `horizontal`: panes side by side
+         * - `vertical`: panes stacked
+         */
+        this.direction = 'horizontal';
+        /**
+         * Initial sizes of the panes in percentages.
+         * Example: `[50, 50]` means two equal panes.
+         * Explicitly `reflect: false` (array) for framework compatibility.
+         */
+        this.sizes = [];
+        /**
+         * Width or height of the gutter (in px) depending on the split direction.
+         * Default is 24px to meet WCAG 2.2 target size requirements for touch accessibility.
+         */
+        this.gutterSize = 24;
+        //#endregion
+        /****************************************************************************/
+        //#region STATE
+        this.isDragging = false;
+        this.dragIndex = -1;
+        this.startPos = 0;
+        this.startSizes = [];
+        // Handlers stored to be able to detach them
+        this.onDocMove = (ev) => this.handleMouseMove(ev);
+        this.onDocUp = () => this.stopDragging();
+    }
+    //#endregion
+    /****************************************************************************/
+    //#region WATCHERS
+    onSizesChanged() {
+        // Re-apply sizes if modified from the outside
+        this.applySizes();
+    }
+    onDirectionChanged() {
+        // Update the orientation and the cursors of the gutters
+        this.ensureGutters();
+        this.applySizes();
+    }
+    //#endregion
+    /****************************************************************************/
+    //#region LIFECYCLE
+    componentDidLoad() {
+        // Initialization (once)
+        this.ensureGutters();
+        this.applySizes();
+        this.positionGutters();
+        // Observer: reposition gutters when resized (nested or parent split changes)
+        this.ro = new ResizeObserver(() => this.positionGutters());
+        this.ro.observe(this.el);
+        window.addEventListener('resize', () => this.positionGutters());
+    }
+    disconnectedCallback() {
+        var _a;
+        // Security cleanup (in case a drag was in progress)
+        this.detachDocumentListeners();
+        (_a = this.ro) === null || _a === void 0 ? void 0 : _a.disconnect();
+        this.ro = undefined;
+    }
+    //#endregion
+    /****************************************************************************/
+    //#region PUBLIC METHODS
+    /**
+     * Programmatically set pane sizes.
+     * @param {Array<number>} sizes Array of pane sizes in percentages.
+     * @returns {Promise<void>}
+     */
+    async setSizes(sizes) {
+        this.sizes = [...sizes];
+        this.applySizes();
+        this.sizesChanged.emit([...this.sizes]);
+        this.positionGutters();
+    }
+    /**
+     * Returns the current pane sizes.
+     * @returns {Promise<number[]>} Array of pane sizes in percentages.
+     */
+    async getSizes() {
+        return [...this.sizes];
+    }
+    /**
+     * Collapse a specific pane to 0 size.
+     * @param {number} index Index of the pane to collapse.
+     * @returns {Promise<void>}
+     */
+    async collapse(index) {
+        const panes = this.getPanes();
+        if (index < 0 || index >= panes.length)
+            return;
+        // Simple strategy: 0% for the index, the rest (100%) for its nearest neighbor
+        const next = new Array(panes.length).fill(0);
+        const target = index < panes.length - 1 ? index + 1 : index - 1;
+        if (target >= 0)
+            next[target] = 100;
+        this.sizes = next;
+        this.applySizes();
+        this.sizesChanged.emit([...this.sizes]);
+        this.positionGutters();
+    }
+    /**
+     * Destroy the split instance: removes gutters and resets layout state.
+     * @returns {Promise<void>}
+     */
+    async destroy() {
+        var _a;
+        this.sizes = [];
+        this.isDragging = false;
+        this.dragIndex = -1;
+        this.removeOwnGutters();
+        this.detachDocumentListeners();
+        (_a = this.ro) === null || _a === void 0 ? void 0 : _a.disconnect();
+    }
+    //#endregion
+    /****************************************************************************/
+    //#region INTERNAL HELPERS
+    /**
+     * Returns the panes of the split.
+     * @returns {HTMLElement[]} The panes of the split.
+     */
+    getPanes() {
+        // Only the direct children slot="pane"
+        return Array.from(this.el.querySelectorAll(':scope > [slot="pane"]'));
+    }
+    /**
+     * Returns the own gutters of the split.
+     * @returns {HTMLElement[]} The own gutters of the split.
+     */
+    getOwnGutters() {
+        // Only the direct gutters of THIS instance
+        return Array.from(this.el.querySelectorAll(':scope > .nv-split-gutter[data-auto="true"]'));
+    }
+    /**
+     * Removes the own gutters of the split.
+     */
+    removeOwnGutters() {
+        this.getOwnGutters().forEach(g => g.remove());
+    }
+    /**
+     * Ensures the gutters of the split.
+     */
+    ensureGutters() {
+        const panes = this.getPanes();
+        // 1) Clean ONLY the old direct gutters of THIS instance
+        this.removeOwnGutters();
+        if (panes.length <= 1)
+            return;
+        // 2) Add the gutters (directs) between the panes
+        panes.forEach((pane, i) => {
+            if (i >= panes.length - 1)
+                return;
+            const g = document.createElement('div');
+            g.className = 'nv-split-gutter';
+            g.setAttribute('data-auto', 'true');
+            if (this.direction === 'horizontal') {
+                g.style.width = `${this.gutterSize}px`;
+                g.style.cursor = 'col-resize';
+            }
+            else {
+                g.style.height = `${this.gutterSize}px`;
+                g.style.cursor = 'row-resize';
+            }
+            // Customizable internal slot
+            const slotEl = document.createElement('slot');
+            slotEl.name = 'gutter';
+            g.appendChild(slotEl);
+            // Listener drag (index = gutter between pane i and i+1)
+            g.addEventListener('mousedown', (ev) => this.startDragging(ev, i));
+            // Insert just after the pane
+            pane.insertAdjacentElement('afterend', g);
+        });
+        this.positionGutters();
+    }
+    /**
+     * Applies the sizes to the panes.
+     */
+    applySizes() {
+        const panes = this.getPanes();
+        const n = panes.length;
+        if (n === 0)
+            return;
+        // Default values if inconsistent
+        if (!this.sizes || this.sizes.length !== n) {
+            this.sizes = Array(n).fill(100 / n);
+        }
+        panes.forEach((pane, i) => {
+            var _a;
+            const size = Math.max(0, (_a = this.sizes[i]) !== null && _a !== void 0 ? _a : 100 / n);
+            // Flex-basis via flex shorthand (https://developer.mozilla.org/en-US/docs/Web/CSS/flex)
+            pane.style.flex = `0 0 ${size}%`;
+            pane.style.minWidth = '0';
+            pane.style.minHeight = '0';
+            pane.style.overflow = 'hidden'; // let a nv-split child extend
+            pane.style.display = 'flex';
+            pane.style.flexDirection = 'column';
+        });
+        this.positionGutters();
+    }
+    /**
+     * Attaches the document listeners.
+     */
+    attachDocumentListeners() {
+        document.addEventListener('mousemove', this.onDocMove);
+        document.addEventListener('mouseup', this.onDocUp);
+    }
+    /**
+     * Detaches the document listeners.
+     */
+    detachDocumentListeners() {
+        document.removeEventListener('mousemove', this.onDocMove);
+        document.removeEventListener('mouseup', this.onDocUp);
+    }
+    /**
+     * Positions the gutters based on the current sizes of the panes.
+     */
+    positionGutters() {
+        var _a, _b;
+        const panes = this.getPanes();
+        const gutters = this.getOwnGutters();
+        if (panes.length <= 1 || gutters.length === 0)
+            return;
+        const horizontal = this.direction === 'horizontal';
+        let cumPct = 0;
+        for (let i = 0; i < gutters.length; i++) {
+            const sizePct = (_b = (_a = this.sizes) === null || _a === void 0 ? void 0 : _a[i]) !== null && _b !== void 0 ? _b : 100 / panes.length;
+            cumPct += sizePct;
+            const g = gutters[i];
+            g.style.position = 'absolute';
+            if (horizontal) {
+                g.style.left = `${cumPct}%`;
+                g.style.top = '0';
+                g.style.bottom = '0';
+                g.style.height = '100%';
+            }
+            else {
+                g.style.top = `${cumPct}%`;
+                g.style.left = '0';
+                g.style.right = '0';
+                g.style.width = '100%';
+            }
+        }
+    }
+    /**
+     * Starts the dragging process.
+     * @param {MouseEvent} ev - The mouse event.
+     * @param {number} index - The index of the gutter.
+     */
+    startDragging(ev, index) {
+        this.isDragging = true;
+        this.dragIndex = index;
+        this.startPos = this.direction === 'horizontal' ? ev.clientX : ev.clientY;
+        this.startSizes = [...this.sizes];
+        this.attachDocumentListeners();
+    }
+    /**
+     * Handles the mouse movement during dragging.
+     * @param {MouseEvent} ev - The mouse event.
+     */
+    handleMouseMove(ev) {
+        var _a, _b, _c, _d;
+        if (!this.isDragging || this.dragIndex < 0)
+            return;
+        const panes = this.getPanes();
+        if (panes.length < 2)
+            return;
+        const rect = this.el.getBoundingClientRect();
+        // Ensure we never divide by zero if the element has zero width/height
+        const rawSize = this.direction === 'horizontal' ? rect.width : rect.height;
+        const totalPx = Math.max(rawSize, 1);
+        const deltaPx = (this.direction === 'horizontal' ? ev.clientX : ev.clientY) -
+            this.startPos;
+        const deltaPct = (deltaPx / totalPx) * 100;
+        const i = this.dragIndex;
+        const j = i + 1;
+        let left = this.startSizes[i] + deltaPct;
+        let right = this.startSizes[j] - deltaPct;
+        // minSizes (px) -> %
+        const minLeftPct = (((_b = (_a = this.minSizes) === null || _a === void 0 ? void 0 : _a[i]) !== null && _b !== void 0 ? _b : 0) / totalPx) * 100;
+        const minRightPct = (((_d = (_c = this.minSizes) === null || _c === void 0 ? void 0 : _c[j]) !== null && _d !== void 0 ? _d : 0) / totalPx) * 100;
+        left = Math.max(left, minLeftPct);
+        right = Math.max(right, minRightPct);
+        // Keep the sum of the pair i/j constant
+        const pairSum = left + right;
+        const targetSum = this.startSizes[i] + this.startSizes[j];
+        if (Math.abs(pairSum - targetSum) > 0.0001) {
+            const k = targetSum / (pairSum || 1);
+            left *= k;
+            right *= k;
+        }
+        const next = [...this.startSizes];
+        next[i] = left;
+        next[j] = right;
+        this.sizes = next;
+        this.applySizes();
+        this.sizesChanged.emit([...this.sizes]);
+        this.positionGutters();
+    }
+    /**
+     * Stops the dragging process.
+     */
+    stopDragging() {
+        if (!this.isDragging)
+            return;
+        this.isDragging = false;
+        this.dragIndex = -1;
+        this.detachDocumentListeners();
+    }
+    //#endregion
+    /****************************************************************************/
+    //#region RENDER
+    render() {
+        return (h(Host, { key: 'e3b158ff1b4f665862079d245c219102d8b8ccda', "data-dragging": this.isDragging.toString() }, h("slot", { key: 'baa8105a05bf8446d7a31a23cd5276edb320ea2f', name: "pane" }), h("slot", { key: '44afe4f4a220aff45f802218f2618e9305141a9f', name: "gutter" })));
+    }
+    static get is() { return "nv-split"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["styles/nv-split.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["styles/nv-split.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "direction": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'horizontal' | 'vertical'",
+                    "resolved": "\"horizontal\" | \"vertical\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Direction of the split layout.\n- `horizontal`: panes side by side\n- `vertical`: panes stacked"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "direction",
+                "reflect": true,
+                "defaultValue": "'horizontal'"
+            },
+            "sizes": {
+                "type": "unknown",
+                "mutable": true,
+                "complexType": {
+                    "original": "number[]",
+                    "resolved": "number[]",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Initial sizes of the panes in percentages.\nExample: `[50, 50]` means two equal panes.\nExplicitly `reflect: false` (array) for framework compatibility."
+                },
+                "getter": false,
+                "setter": false,
+                "defaultValue": "[]"
+            },
+            "minSizes": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "number[]",
+                    "resolved": "number[]",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Minimum sizes (in px) for each pane.\nExample: `[100, 200]` => first pane min 100px, second min 200px.\nExplicitly `reflect: false` (array) for framework compatibility."
+                },
+                "getter": false,
+                "setter": false
+            },
+            "gutterSize": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Width or height of the gutter (in px) depending on the split direction.\nDefault is 24px to meet WCAG 2.2 target size requirements for touch accessibility."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "gutter-size",
+                "reflect": true,
+                "defaultValue": "24"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "isDragging": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "sizesChanged",
+                "name": "sizesChanged",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [{
+                            "name": "bind",
+                            "text": "sizes"
+                        }],
+                    "text": "Emitted when pane sizes are updated (either via dragging or programmatically)."
+                },
+                "complexType": {
+                    "original": "number[]",
+                    "resolved": "number[]",
+                    "references": {}
+                }
+            }];
+    }
+    static get methods() {
+        return {
+            "setSizes": {
+                "complexType": {
+                    "signature": "(sizes: number[]) => Promise<void>",
+                    "parameters": [{
+                            "name": "sizes",
+                            "type": "number[]",
+                            "docs": "Array of pane sizes in percentages."
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Programmatically set pane sizes.",
+                    "tags": [{
+                            "name": "param",
+                            "text": "sizes Array of pane sizes in percentages."
+                        }, {
+                            "name": "returns",
+                            "text": undefined
+                        }]
+                }
+            },
+            "getSizes": {
+                "complexType": {
+                    "signature": "() => Promise<number[]>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<number[]>"
+                },
+                "docs": {
+                    "text": "Returns the current pane sizes.",
+                    "tags": [{
+                            "name": "returns",
+                            "text": "Array of pane sizes in percentages."
+                        }]
+                }
+            },
+            "collapse": {
+                "complexType": {
+                    "signature": "(index: number) => Promise<void>",
+                    "parameters": [{
+                            "name": "index",
+                            "type": "number",
+                            "docs": "Index of the pane to collapse."
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Collapse a specific pane to 0 size.",
+                    "tags": [{
+                            "name": "param",
+                            "text": "index Index of the pane to collapse."
+                        }, {
+                            "name": "returns",
+                            "text": undefined
+                        }]
+                }
+            },
+            "destroy": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Destroy the split instance: removes gutters and resets layout state.",
+                    "tags": [{
+                            "name": "returns",
+                            "text": undefined
+                        }]
+                }
+            }
+        };
+    }
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "sizes",
+                "methodName": "onSizesChanged"
+            }, {
+                "propName": "direction",
+                "methodName": "onDirectionChanged"
+            }];
+    }
+}
+//# sourceMappingURL=nv-split.js.map

package/dist/collection/components/nv-split/nv-split.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"nv-split.js","sourceRoot":"","sources":["../../../src/components/nv-split/nv-split.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  Component,\n  Host,\n  h,\n  Prop,\n  Event,\n  EventEmitter,\n  Element,\n  Method,\n  State,\n  Watch,\n} from '@stencil/core';\n\n/**\n * The `nv-split` component is an advanced layout container that enables the creation of interactively resizable panels. It provides a flexible solution for dividing available space between multiple interface sections, with precise control over dimensions and constraints for each panel.\n * @slot pane - Content of each split pane. Use multiple `<div slot=\"pane\">` elements.\n * @slot gutter - Optional custom content inside every gutter handle.\n */\n@Component({\n  tag: 'nv-split',\n  styleUrl: 'styles/nv-split.scss',\n  shadow: false,\n})\nexport class NvSplit {\n  @Element() el: HTMLNvSplitElement;\n\n  /****************************************************************************/\n  //#region PROPERTIES\n\n  /**\n   * Direction of the split layout.\n   * - `horizontal`: panes side by side\n   * - `vertical`: panes stacked\n   */\n  @Prop({ reflect: true })\n  readonly direction: 'horizontal' | 'vertical' = 'horizontal';\n\n  /**\n   * Initial sizes of the panes in percentages.\n   * Example: `[50, 50]` means two equal panes.\n   * Explicitly `reflect: false` (array) for framework compatibility.\n   */\n  @Prop({ mutable: true, reflect: false })\n  sizes: number[] = [];\n\n  /**\n   * Minimum sizes (in px) for each pane.\n   * Example: `[100, 200]` => first pane min 100px, second min 200px.\n   * Explicitly `reflect: false` (array) for framework compatibility.\n   */\n  @Prop({ reflect: false })\n  readonly minSizes?: number[];\n\n  /**\n   * Width or height of the gutter (in px) depending on the split direction.\n   * Default is 24px to meet WCAG 2.2 target size requirements for touch accessibility.\n   */\n  @Prop({ reflect: true })\n  readonly gutterSize: number = 24;\n\n  //#endregion\n  /****************************************************************************/\n  //#region STATE\n\n  @State()\n  private isDragging: boolean = false;\n\n  private dragIndex: number = -1;\n  private startPos: number = 0;\n  private startSizes: number[] = [];\n  private ro?: ResizeObserver;\n\n  // Handlers stored to be able to detach them\n  private onDocMove = (ev: MouseEvent) => this.handleMouseMove(ev);\n  private onDocUp = () => this.stopDragging();\n\n  //#endregion\n  /****************************************************************************/\n  //#region EVENTS\n\n  /**\n   * Emitted when pane sizes are updated (either via dragging or programmatically).\n   * @bind sizes\n   */\n  @Event()\n  sizesChanged: EventEmitter<number[]>;\n\n  //#endregion\n  /****************************************************************************/\n  //#region WATCHERS\n\n  @Watch('sizes')\n  protected onSizesChanged(): void {\n    // Re-apply sizes if modified from the outside\n    this.applySizes();\n  }\n\n  @Watch('direction')\n  protected onDirectionChanged(): void {\n    // Update the orientation and the cursors of the gutters\n    this.ensureGutters();\n    this.applySizes();\n  }\n\n  //#endregion\n  /****************************************************************************/\n  //#region LIFECYCLE\n\n  componentDidLoad(): void {\n    // Initialization (once)\n    this.ensureGutters();\n    this.applySizes();\n    this.positionGutters();\n\n    // Observer: reposition gutters when resized (nested or parent split changes)\n    this.ro = new ResizeObserver(() => this.positionGutters());\n    this.ro.observe(this.el);\n\n    window.addEventListener('resize', () => this.positionGutters());\n  }\n\n  disconnectedCallback(): void {\n    // Security cleanup (in case a drag was in progress)\n    this.detachDocumentListeners();\n    this.ro?.disconnect();\n    this.ro = undefined;\n  }\n\n  //#endregion\n  /****************************************************************************/\n  //#region PUBLIC METHODS\n\n  /**\n   * Programmatically set pane sizes.\n   * @param {Array<number>} sizes Array of pane sizes in percentages.\n   * @returns {Promise<void>}\n   */\n  @Method()\n  async setSizes(sizes: number[]): Promise<void> {\n    this.sizes = [...sizes];\n    this.applySizes();\n    this.sizesChanged.emit([...this.sizes]);\n    this.positionGutters();\n  }\n\n  /**\n   * Returns the current pane sizes.\n   * @returns {Promise<number[]>} Array of pane sizes in percentages.\n   */\n  @Method()\n  async getSizes(): Promise<number[]> {\n    return [...this.sizes];\n  }\n\n  /**\n   * Collapse a specific pane to 0 size.\n   * @param {number} index Index of the pane to collapse.\n   * @returns {Promise<void>}\n   */\n  @Method()\n  async collapse(index: number): Promise<void> {\n    const panes = this.getPanes();\n    if (index < 0 || index >= panes.length) return;\n\n    // Simple strategy: 0% for the index, the rest (100%) for its nearest neighbor\n    const next = new Array(panes.length).fill(0);\n    const target = index < panes.length - 1 ? index + 1 : index - 1;\n    if (target >= 0) next[target] = 100;\n\n    this.sizes = next;\n    this.applySizes();\n    this.sizesChanged.emit([...this.sizes]);\n    this.positionGutters();\n  }\n\n  /**\n   * Destroy the split instance: removes gutters and resets layout state.\n   * @returns {Promise<void>}\n   */\n  @Method()\n  async destroy(): Promise<void> {\n    this.sizes = [];\n    this.isDragging = false;\n    this.dragIndex = -1;\n    this.removeOwnGutters();\n    this.detachDocumentListeners();\n    this.ro?.disconnect();\n  }\n\n  //#endregion\n  /****************************************************************************/\n  //#region INTERNAL HELPERS\n\n  /**\n   * Returns the panes of the split.\n   * @returns {HTMLElement[]} The panes of the split.\n   */\n  private getPanes(): HTMLElement[] {\n    // Only the direct children slot=\"pane\"\n    return Array.from(\n      this.el.querySelectorAll<HTMLElement>(':scope > [slot=\"pane\"]'),\n    );\n  }\n\n  /**\n   * Returns the own gutters of the split.\n   * @returns {HTMLElement[]} The own gutters of the split.\n   */\n  private getOwnGutters(): HTMLElement[] {\n    // Only the direct gutters of THIS instance\n    return Array.from(\n      this.el.querySelectorAll<HTMLElement>(\n        ':scope > .nv-split-gutter[data-auto=\"true\"]',\n      ),\n    );\n  }\n\n  /**\n   * Removes the own gutters of the split.\n   */\n  private removeOwnGutters(): void {\n    this.getOwnGutters().forEach(g => g.remove());\n  }\n\n  /**\n   * Ensures the gutters of the split.\n   */\n  private ensureGutters(): void {\n    const panes = this.getPanes();\n\n    // 1) Clean ONLY the old direct gutters of THIS instance\n    this.removeOwnGutters();\n\n    if (panes.length <= 1) return;\n\n    // 2) Add the gutters (directs) between the panes\n    panes.forEach((pane, i) => {\n      if (i >= panes.length - 1) return;\n\n      const g = document.createElement('div');\n      g.className = 'nv-split-gutter';\n      g.setAttribute('data-auto', 'true');\n\n      if (this.direction === 'horizontal') {\n        g.style.width = `${this.gutterSize}px`;\n        g.style.cursor = 'col-resize';\n      } else {\n        g.style.height = `${this.gutterSize}px`;\n        g.style.cursor = 'row-resize';\n      }\n\n      // Customizable internal slot\n      const slotEl = document.createElement('slot');\n      slotEl.name = 'gutter';\n      g.appendChild(slotEl);\n\n      // Listener drag (index = gutter between pane i and i+1)\n      g.addEventListener('mousedown', (ev: MouseEvent) =>\n        this.startDragging(ev, i),\n      );\n\n      // Insert just after the pane\n      pane.insertAdjacentElement('afterend', g);\n    });\n\n    this.positionGutters();\n  }\n\n  /**\n   * Applies the sizes to the panes.\n   */\n  private applySizes(): void {\n    const panes = this.getPanes();\n    const n = panes.length;\n    if (n === 0) return;\n\n    // Default values if inconsistent\n    if (!this.sizes || this.sizes.length !== n) {\n      this.sizes = Array(n).fill(100 / n);\n    }\n\n    panes.forEach((pane, i) => {\n      const size = Math.max(0, this.sizes[i] ?? 100 / n);\n      // Flex-basis via flex shorthand (https://developer.mozilla.org/en-US/docs/Web/CSS/flex)\n      pane.style.flex = `0 0 ${size}%`;\n      pane.style.minWidth = '0';\n      pane.style.minHeight = '0';\n      pane.style.overflow = 'hidden'; // let a nv-split child extend\n      pane.style.display = 'flex';\n      pane.style.flexDirection = 'column';\n    });\n\n    this.positionGutters();\n  }\n\n  /**\n   * Attaches the document listeners.\n   */\n  private attachDocumentListeners(): void {\n    document.addEventListener('mousemove', this.onDocMove);\n    document.addEventListener('mouseup', this.onDocUp);\n  }\n\n  /**\n   * Detaches the document listeners.\n   */\n  private detachDocumentListeners(): void {\n    document.removeEventListener('mousemove', this.onDocMove);\n    document.removeEventListener('mouseup', this.onDocUp);\n  }\n\n  /**\n   * Positions the gutters based on the current sizes of the panes.\n   */\n  private positionGutters(): void {\n    const panes = this.getPanes();\n    const gutters = this.getOwnGutters();\n    if (panes.length <= 1 || gutters.length === 0) return;\n\n    const horizontal = this.direction === 'horizontal';\n    let cumPct = 0;\n\n    for (let i = 0; i < gutters.length; i++) {\n      const sizePct = this.sizes?.[i] ?? 100 / panes.length;\n      cumPct += sizePct;\n\n      const g = gutters[i];\n      g.style.position = 'absolute';\n\n      if (horizontal) {\n        g.style.left = `${cumPct}%`;\n        g.style.top = '0';\n        g.style.bottom = '0';\n        g.style.height = '100%';\n      } else {\n        g.style.top = `${cumPct}%`;\n        g.style.left = '0';\n        g.style.right = '0';\n        g.style.width = '100%';\n      }\n    }\n  }\n\n  /**\n   * Starts the dragging process.\n   * @param {MouseEvent} ev - The mouse event.\n   * @param {number} index - The index of the gutter.\n   */\n  private startDragging(ev: MouseEvent, index: number): void {\n    this.isDragging = true;\n    this.dragIndex = index;\n    this.startPos = this.direction === 'horizontal' ? ev.clientX : ev.clientY;\n    this.startSizes = [...this.sizes];\n    this.attachDocumentListeners();\n  }\n\n  /**\n   * Handles the mouse movement during dragging.\n   * @param {MouseEvent} ev - The mouse event.\n   */\n  private handleMouseMove(ev: MouseEvent): void {\n    if (!this.isDragging || this.dragIndex < 0) return;\n\n    const panes = this.getPanes();\n    if (panes.length < 2) return;\n\n    const rect = this.el.getBoundingClientRect();\n\n    // Ensure we never divide by zero if the element has zero width/height\n    const rawSize = this.direction === 'horizontal' ? rect.width : rect.height;\n    const totalPx = Math.max(rawSize, 1);\n\n    const deltaPx =\n      (this.direction === 'horizontal' ? ev.clientX : ev.clientY) -\n      this.startPos;\n    const deltaPct = (deltaPx / totalPx) * 100;\n\n    const i = this.dragIndex;\n    const j = i + 1;\n\n    let left = this.startSizes[i] + deltaPct;\n    let right = this.startSizes[j] - deltaPct;\n\n    // minSizes (px) -> %\n    const minLeftPct = ((this.minSizes?.[i] ?? 0) / totalPx) * 100;\n    const minRightPct = ((this.minSizes?.[j] ?? 0) / totalPx) * 100;\n\n    left = Math.max(left, minLeftPct);\n    right = Math.max(right, minRightPct);\n\n    // Keep the sum of the pair i/j constant\n    const pairSum = left + right;\n    const targetSum = this.startSizes[i] + this.startSizes[j];\n    if (Math.abs(pairSum - targetSum) > 0.0001) {\n      const k = targetSum / (pairSum || 1);\n      left *= k;\n      right *= k;\n    }\n\n    const next = [...this.startSizes];\n    next[i] = left;\n    next[j] = right;\n\n    this.sizes = next;\n    this.applySizes();\n    this.sizesChanged.emit([...this.sizes]);\n    this.positionGutters();\n  }\n\n  /**\n   * Stops the dragging process.\n   */\n  private stopDragging(): void {\n    if (!this.isDragging) return;\n    this.isDragging = false;\n    this.dragIndex = -1;\n    this.detachDocumentListeners();\n  }\n\n  //#endregion\n  /****************************************************************************/\n  //#region RENDER\n\n  render() {\n    return (\n      <Host data-dragging={this.isDragging.toString()}>\n        <slot name=\"pane\"></slot>\n        <slot name=\"gutter\"></slot>\n      </Host>\n    );\n  }\n\n  //#endregion\n  /****************************************************************************/\n}\n"]}