@wxn0brp/nya-dock 0.0.1

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 wxn0brP
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,103 @@
+# Nyadock
+
+A dock panel component library. Currently in early development stage.
+
+> [!WARNING]
+> This project is currently in early development and is not yet ready for production use.
+> Expect breaking changes and incomplete features.
+
+## Features
+- Dock interface component
+- Built with TypeScript for type safety
+- Styled with SCSS
+- Part of the @wxn0brp ecosystem
+
+## Demo
+
+[https://wxn0brp.github.io/Nyadock/demo](https://wxn0brp.github.io/Nyadock/demo)
+
+## Installation
+
+```bash
+yarn add github:wxn0brP/Nyadock#dist
+```
+
+## Usage
+
+Nyadock is controlled via a single `controller` instance that manages the entire layout.
+
+### 1. HTML Setup
+
+First, you need a container element in your HTML to host the dock layout, and individual `div` elements that will become your panels.
+
+```html
+<!-- The main container for the dock layout -->
+<div id="app"></div>
+
+<!-- Your panel content (can be hidden initially) -->
+<div id="panel1-content" style="display: none;">
+    <h2>Panel 1</h2>
+    <p>Content for the first panel.</p>
+</div>
+<div id="panel2-content" style="display: none;">
+    <h2>Panel 2</h2>
+    <p>Content for the second panel.</p>
+</div>
+```
+
+### 2. JavaScript/TypeScript Initialization
+
+Import the `controller` and use it to configure and initialize the layout. Note that you also need to import the stylesheet.
+
+```typescript
+import { controller } from "@wxn0brp/nya-dock/state";
+import "@wxn0brp/nya-dock/style.css";
+
+// 1. Get the master container element
+const appContainer = document.querySelector("#app");
+
+// 2. Get your panel content elements
+const panel1 = document.querySelector("#panel1-content");
+const panel2 = document.querySelector("#panel2-content");
+
+// 3. Assign the master container
+controller.master = appContainer;
+
+// 4. Register your panels with unique IDs
+controller.registerPanel("panel1", panel1);
+controller.registerPanel("panel2", panel2);
+
+// 5. Define the layout structure
+// A horizontal split between "panel1" and "panel2"
+const layout = ["panel1", "panel2"]; 
+
+// A vertical split would be: ["panel1", "panel2", 1]
+// Layouts can be nested.
+controller.setDefaultState(layout);
+
+// 6. Initialize the dock layout
+controller.init();
+```
+
+### How the Layout Structure Works
+
+The layout is defined by a `StructNode`, which is an array of panel IDs and nested arrays.
+
+-   **Horizontal Split (Row):** `["panelA", "panelB"]`
+-   **Vertical Split (Column):** `["panelA", "panelB", 1]` (the `1` indicates a vertical split)
+
+You can nest these structures to create complex layouts:
+
+```javascript
+// panelA is on the left.
+// The right side is a vertical split between panelB and panelC.
+const complexLayout = ["panelA", ["panelB", "panelC", 1]];
+```
+
+## License
+
+MIT [LICENSE](./LICENSE)
+
+## Contributing
+
+Contributions are welcome!

package/dist/const.d.ts

@@ -0,0 +1,2 @@
+export declare const DRAG = 30;
+export declare const RESIZE_MIN = 100;

package/dist/const.js

@@ -0,0 +1,2 @@
+export const DRAG = 30;
+export const RESIZE_MIN = 100;

package/dist/index.d.ts

@@ -0,0 +1,2 @@
+import "@wxn0brp/flanker-ui/html";
+import "./mouse/index.js";

package/dist/index.js

@@ -0,0 +1,103 @@
+import "@wxn0brp/flanker-ui/html";
+import logger from "./logger.js";
+import "./mouse/index.js";
+import { controller } from "./state.js";
+logger.setLogLevel("DEBUG");
+window.logger = logger;
+window.controller = controller;
+const app = qs("#app");
+const panel1 = document.createElement("div");
+panel1.innerHTML = `
+    <div class="panel-header">Panel 1</div>
+    <div class="panel-content">
+        <h3>Welcome to Panel 1</h3>
+        <p>This is the first panel in the layout.</p>
+        <ul>
+            <li>Item 1</li>
+            <li>Item 2</li>
+            <li>Item 3</li>
+        </ul>
+        <div class="button-group">
+            <button onclick="controller.reset()">Reset Config</button>
+        </div>
+    </div>
+`;
+const panel2 = document.createElement("div");
+panel2.innerHTML = `
+    <div class="panel-header">Panel 2</div>
+    <div class="panel-content">
+        <h3>Content for Panel 2</h3>
+        <p>This is the second panel, split from the main container.</p>
+        <div class="button-group">
+            <button>Button 1</button>
+            <button>Button 2</button>
+        </div>
+    </div>
+`;
+const panel3 = document.createElement("div");
+panel3.innerHTML = `
+    <div class="panel-header">Panel 3</div>
+    <div class="panel-content">
+        <h3>Additional Panel</h3>
+        <p>This is the third panel in the layout.</p>
+        <div class="info-box">
+            <p>This panel was created by splitting with Panel 2.</p>
+        </div>
+    </div>
+`;
+const panel4 = document.createElement("div");
+panel4.innerHTML = `
+    <div class="panel-header">Panel 4</div>
+    <div class="panel-content">
+        <h3>Form Panel</h3>
+        <form>
+            <label for="name">Name:</label>
+            <input type="text" id="name" name="name"><br><br>
+            <label for="email">Email:</label>
+            <input type="email" id="email" name="email"><br><br>
+            <input type="submit" value="Submit">
+        </form>
+    </div>
+`;
+const panel5 = document.createElement("div");
+panel5.innerHTML = `
+    <div class="panel-header">Panel 5</div>
+    <div class="panel-content">
+        <h3>Table Panel</h3>
+        <table border="1">
+            <tr>
+                <th>First name</th>
+                <th>Last name</th>
+                <th>Age</th>
+            </tr>
+            <tr>
+                <td>Jill</td>
+                <td>Smith</td>
+                <td>50</td>
+            </tr>
+            <tr>
+                <td>Eve</td>
+                <td>Jackson</td>
+                <td>94</td>
+            </tr>
+        </table>
+    </div>
+`;
+controller.master = app;
+controller.setDefaultState([
+    "panel1",
+    [
+        "panel2",
+        [
+            ["panel3", "panel5", 1],
+            "panel4",
+        ],
+        1
+    ]
+]);
+controller.registerPanel("panel1", panel1);
+controller.registerPanel("panel2", panel2);
+controller.registerPanel("panel3", panel3);
+controller.registerPanel("panel4", panel4);
+controller.registerPanel("panel5", panel5);
+controller.init();

package/dist/logger.d.ts

@@ -0,0 +1,17 @@
+declare const LOG_LEVELS: {
+    DEBUG: number;
+    INFO: number;
+    WARN: number;
+    ERROR: number;
+};
+declare function setLogLevel(level: keyof typeof LOG_LEVELS): void;
+declare function exportLogs(): void;
+declare const logger: {
+    debug: (...args: any[]) => void;
+    info: (...args: any[]) => void;
+    warn: (...args: any[]) => void;
+    error: (...args: any[]) => void;
+    setLogLevel: typeof setLogLevel;
+    exportLogs: typeof exportLogs;
+};
+export default logger;

package/dist/logger.js

@@ -0,0 +1,29 @@
+const LOG_LEVELS = {
+    DEBUG: 0,
+    INFO: 1,
+    WARN: 2,
+    ERROR: 3,
+};
+let logs = [];
+let currentLogLevel = LOG_LEVELS.ERROR;
+function setLogLevel(level) {
+    currentLogLevel = LOG_LEVELS[level];
+}
+function exportLogs() {
+    console.log(logs.join("\n"));
+}
+function log(level, ...args) {
+    if (LOG_LEVELS[level] >= currentLogLevel) {
+        console.log(`[${level}]`, ...args);
+        logs.push(`[${level}] ${args.map(a => typeof a === "string" ? a : JSON.stringify(a)).join(" ")}`);
+    }
+}
+const logger = {
+    debug: (...args) => log("DEBUG", ...args),
+    info: (...args) => log("INFO", ...args),
+    warn: (...args) => log("WARN", ...args),
+    error: (...args) => log("ERROR", ...args),
+    setLogLevel,
+    exportLogs,
+};
+export default logger;

package/dist/mouse/index.d.ts

@@ -0,0 +1,2 @@
+import "./movePanel.js";
+import "./resize.js";

package/dist/mouse/index.js

@@ -0,0 +1,2 @@
+import "./movePanel.js";
+import "./resize.js";

package/dist/mouse/movePanel.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/mouse/movePanel.js

@@ -0,0 +1,74 @@
+import { DRAG } from "../const.js";
+import { controller } from "../state.js";
+import logger from "../logger.js";
+import { detectDockZone, getRelativePosition } from "../utils/detect.js";
+import { saveNyaState } from "../storage.js";
+let draggingPanel = null;
+document.addEventListener("mousedown", (e) => {
+    const target = e.target;
+    if (!target.classList.contains("panel")) {
+        logger.debug("Mousedown event ignored: target is not a panel");
+        return;
+    }
+    const data = getRelativePosition(e, target);
+    if (data.x > DRAG || data.y > DRAG) {
+        logger.debug("Mousedown event ignored: not in drag area");
+        return;
+    }
+    draggingPanel = target;
+    logger.info("Dragging panel started", draggingPanel);
+    document.body.style.cursor = "move";
+});
+document.addEventListener("mouseup", (e) => {
+    if (!draggingPanel) {
+        logger.debug("Mouseup event ignored: no panel is being dragged");
+        return;
+    }
+    document.body.style.cursor = "";
+    function end() {
+        logger.info("Dragging finished");
+        draggingPanel = null;
+    }
+    const allPanels = [...controller._panels.values()].filter(p => p !== draggingPanel);
+    logger.debug("All panels", allPanels);
+    const elemUnder = document.elementFromPoint(e.clientX, e.clientY);
+    if (!elemUnder) {
+        logger.debug("Mouseup event ignored: no element under cursor");
+        return end();
+    }
+    const targetPanel = elemUnder.closest(".panel");
+    if (!targetPanel) {
+        logger.debug("Mouseup event ignored: no target panel under cursor");
+        return end();
+    }
+    logger.debug("Target panel", targetPanel);
+    if (!allPanels.includes(targetPanel)) {
+        logger.debug("Mouseup event ignored: target panel is not a valid drop target");
+        return end();
+    }
+    const zone = detectDockZone(e, targetPanel);
+    logger.info(`Docking to ${zone}`);
+    if (zone === "center") {
+        logger.debug("Docking to center, no action taken");
+        return end();
+    }
+    let sourceId = draggingPanel.dataset.nya_id;
+    const targetId = targetPanel.dataset.nya_id;
+    if (!sourceId)
+        sourceId = draggingPanel.qs(".panel[data-nya_id]")?.dataset.nya_id;
+    if (!sourceId || !targetId) {
+        logger.error("Panel ID not found");
+        logger.error("Source ID:", sourceId);
+        logger.error("Target ID:", targetId);
+        return end();
+    }
+    if (sourceId === targetId) {
+        logger.debug("Mouseup event ignored: source and target are the same");
+        return end();
+    }
+    controller.movePanel(sourceId, targetId, zone);
+    controller._render();
+    controller._setDefaultSize();
+    saveNyaState();
+    end();
+});

package/dist/mouse/resize.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/mouse/resize.js

@@ -0,0 +1,53 @@
+import { clamp } from "@wxn0brp/flanker-ui/utils";
+import { DRAG, RESIZE_MIN } from "../const.js";
+import logger from "../logger.js";
+import { controller } from "../state.js";
+import { getRelativePosition } from "../utils/detect.js";
+import { saveNyaState } from "../storage.js";
+let draggingPanel = null;
+let leftPanel = null;
+let panelType = "width";
+document.addEventListener("mousedown", (e) => {
+    const target = e.target;
+    if (!target.classList.contains("panel"))
+        return;
+    const _panelType = target.parentElement.classList.contains("column") ? "height" : "width";
+    const _leftPanel = target.parentElement.children[0];
+    const data = getRelativePosition(e, _leftPanel);
+    if (_panelType === "width") {
+        const delta = _leftPanel.offsetWidth - data.x;
+        if (delta > DRAG || delta < 0)
+            return;
+    }
+    else {
+        const delta = _leftPanel.offsetHeight - data.y;
+        if (delta > DRAG || delta < 0)
+            return;
+    }
+    draggingPanel = target;
+    leftPanel = _leftPanel;
+    panelType = _panelType;
+    logger.debug(`Resizing panel ${panelType}`);
+    document.body.style.cursor = panelType === "width" ? "col-resize" : "row-resize";
+});
+document.addEventListener("mousemove", (e) => {
+    if (!draggingPanel)
+        return;
+    const data = getRelativePosition(e, leftPanel);
+    let value = 0;
+    if (panelType === "width")
+        value = clamp(RESIZE_MIN, data.x, draggingPanel.parentElement.offsetWidth - RESIZE_MIN);
+    else
+        value = clamp(RESIZE_MIN, data.y, draggingPanel.parentElement.offsetHeight - RESIZE_MIN);
+    const id = draggingPanel.parentElement.dataset.nya_split;
+    const split = controller._splits.get(id);
+    split.style.setProperty("--size", `${value}px`);
+    logger.debug(`Resizing to ${value}`);
+});
+document.addEventListener("mouseup", (e) => {
+    if (draggingPanel)
+        logger.debug("Resizing finished");
+    draggingPanel = null;
+    document.body.style.cursor = "";
+    saveNyaState();
+});

package/dist/render.d.ts

@@ -0,0 +1,2 @@
+import { NyaController } from "./state.js";
+export declare function render(controller: NyaController): void;

package/dist/render.js

@@ -0,0 +1,31 @@
+export function render(controller) {
+    const tempElement = document.createElement("div");
+    for (const panel of controller._panels.values()) {
+        tempElement.appendChild(panel);
+    }
+    controller.master.innerHTML = "";
+    const masterSplit = renderSplit(controller, controller._split);
+    controller.master.appendChild(masterSplit);
+}
+function renderSplit(controller, split, prefix = "0") {
+    const div = document.createElement("div");
+    div.classList.add("split");
+    div.classList.add(split.type);
+    div.dataset.nya_split = prefix;
+    controller._splits.set(prefix, div);
+    for (let i = 0; i < split.nodes.length; i++) {
+        const node = split.nodes[i];
+        if (typeof node === "string") {
+            const panel = controller._panels.get(node);
+            div.appendChild(panel);
+        }
+        else {
+            const splitPanel = document.createElement("div");
+            splitPanel.classList.add("panel");
+            const splitContent = renderSplit(controller, node, `${prefix}.${i}`);
+            splitPanel.appendChild(splitContent);
+            div.appendChild(splitPanel);
+        }
+    }
+    return div;
+}

package/dist/state.d.ts

@@ -0,0 +1,19 @@
+import { Direction, NyaSplit, StructNode } from "./types.js";
+export declare class NyaController {
+    _split: NyaSplit;
+    _panels: Map<string, HTMLDivElement>;
+    _splits: Map<string, HTMLDivElement>;
+    master: HTMLDivElement;
+    settings: {
+        key: string;
+    };
+    _struct: NyaSplit;
+    setDefaultState(state: NyaSplit | StructNode): void;
+    init(): void;
+    registerPanel(id: string, panel: HTMLDivElement): void;
+    _render(): void;
+    _setDefaultSize(): void;
+    movePanel(sourceId: string, targetId: string, zone: Direction): void;
+    reset(): void;
+}
+export declare const controller: NyaController;

package/dist/state.js

@@ -0,0 +1,45 @@
+import { render } from "./render.js";
+import { defaultState, loadState } from "./storage.js";
+import { convertToSplits } from "./utils/convertSplit.js";
+import { movePanel } from "./utils/movePanel.js";
+export class NyaController {
+    _split;
+    _panels = new Map();
+    _splits = new Map();
+    master;
+    settings = {
+        key: "nya.dock",
+    };
+    _struct;
+    setDefaultState(state) {
+        this._struct = Array.isArray(state) ? convertToSplits(state) : state;
+    }
+    init() {
+        if (!this.master)
+            throw new Error("Master element not set");
+        if (!this._struct)
+            throw new Error("Structure not set");
+        loadState(this);
+    }
+    registerPanel(id, panel) {
+        panel.dataset.nya_id = id;
+        panel.classList.add("panel");
+        this._panels.set(id, panel);
+    }
+    _render() {
+        this._splits.clear();
+        return render(this);
+    }
+    _setDefaultSize() {
+        this._splits.forEach((split) => {
+            split.style.setProperty("--size", "50%");
+        });
+    }
+    movePanel(sourceId, targetId, zone) {
+        return movePanel(this, sourceId, targetId, zone);
+    }
+    reset() {
+        defaultState(this);
+    }
+}
+export const controller = new NyaController();

package/dist/storage.d.ts

@@ -0,0 +1,5 @@
+import { NyaController } from "./state.js";
+export declare function saveState(controller: NyaController): void;
+export declare function defaultState(controller: NyaController): void;
+export declare function loadState(controller: NyaController): void;
+export declare const saveNyaState: Function;

package/dist/storage.js

@@ -0,0 +1,32 @@
+import { throttle } from "@wxn0brp/flanker-ui/utils";
+import { controller } from "./state.js";
+import logger from "./logger.js";
+export function saveState(controller) {
+    const state = controller._split;
+    const sizes = {};
+    controller._splits.forEach((split, key) => {
+        sizes[key] = split.style.getPropertyValue("--size");
+    });
+    localStorage.setItem(controller.settings.key, JSON.stringify({ state, sizes }));
+}
+export function defaultState(controller) {
+    controller._split = Object.assign({}, controller._struct);
+    controller._render();
+    controller._setDefaultSize();
+    saveState(controller);
+}
+export function loadState(controller) {
+    const stateString = localStorage.getItem(controller.settings.key);
+    if (!stateString)
+        return defaultState(controller);
+    const { state, sizes } = JSON.parse(stateString);
+    controller._split = state;
+    controller._render();
+    controller._splits.forEach((split, key) => {
+        split.style.setProperty("--size", sizes[key]);
+    });
+}
+export const saveNyaState = throttle(() => {
+    logger.debug("Saving state");
+    saveState(controller);
+}, 3000);

package/dist/style.css

@@ -0,0 +1,142 @@
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+:root {
+  --txt: #fff;
+  --back: #111;
+}
+
+body {
+  background: var(--back);
+  color: var(--txt);
+  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
+  width: 100vw;
+  height: 100vh;
+}
+
+.master {
+  height: 100%;
+  width: 100%;
+}
+
+.split {
+  display: flex;
+  height: 100%;
+  width: 100%;
+  position: relative;
+}
+.split .panel {
+  position: relative;
+}
+.split .panel::after {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 30px;
+  height: 30px;
+  cursor: move;
+  z-index: 99;
+}
+.split.column {
+  flex-direction: column;
+}
+.split.column .panel {
+  width: 100%;
+}
+.split.column > :first-child {
+  border-bottom: 1px solid silver;
+  height: var(--size) !important;
+}
+.split.column > :first-child::before {
+  content: "";
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: -15px;
+  height: 30px;
+  z-index: 99;
+  cursor: row-resize;
+}
+.split.row {
+  flex-direction: row;
+}
+.split.row .panel {
+  height: 100%;
+}
+.split.row > :first-child {
+  border-right: 1px solid silver;
+  width: var(--size) !important;
+}
+.split.row > :first-child::before {
+  content: "";
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  right: -15px;
+  width: 30px;
+  z-index: 99;
+  cursor: col-resize;
+}
+.split > :nth-child(2) {
+  flex: 1;
+}
+
+.split .panel {
+  display: flex;
+  flex-direction: column;
+}
+.split .panel .panel-header {
+  background-color: #2c2c2c;
+  padding: 10px;
+  border-bottom: 1px solid #444;
+  font-weight: bold;
+  color: #ddd;
+}
+.split .panel .panel-content {
+  padding: 15px;
+  flex: 1;
+  overflow-y: auto;
+}
+.split .panel .panel-content h3 {
+  margin-top: 0;
+  color: #aaa;
+  border-bottom: 1px solid #444;
+  padding-bottom: 5px;
+}
+.split .panel .panel-content p {
+  margin: 10px 0;
+  line-height: 1.5;
+}
+.split .panel .panel-content ul {
+  padding-left: 20px;
+}
+.split .panel .panel-content ul li {
+  margin: 5px 0;
+}
+.split .panel .panel-content .button-group {
+  margin-top: 15px;
+}
+.split .panel .panel-content .button-group button {
+  background: #444;
+  color: white;
+  border: none;
+  padding: 8px 15px;
+  margin-right: 10px;
+  border-radius: 4px;
+  cursor: pointer;
+}
+.split .panel .panel-content .button-group button:hover {
+  background: #555;
+}
+.split .panel .panel-content .info-box {
+  background: #222;
+  padding: 10px;
+  border-radius: 4px;
+  border-left: 3px solid #666;
+}
+
+/*# sourceMappingURL=style.css.map */

package/dist/style.css.map

@@ -0,0 +1 @@
+{"version":3,"sourceRoot":"","sources":["../src/style.scss"],"names":[],"mappings":"AAAA;EACI;EACA;EACA;;;AAGJ;EACI;EACA;;;AAGJ;EACI;EACA;EACA;EACA;EACA;;;AAGJ;EACI;EACA;;;AAGJ;EACI;EACA;EACA;EACA;;AAEA;EACI;;AAEA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAIR;EACI;;AAEA;EACI;;AAGJ;EACI;EACA;;AAEA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAKZ;EACI;;AAEA;EACI;;AAGJ;EACI;EACA;;AAEA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAKZ;EACI;;;AAIR;EACI;EACA;;AAEA;EACI;EACA;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;;AAGJ;EACI;EACA;;AAGJ;EACI;;AAEA;EACI;;AAIR;EACI;;AAEA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;;AAKZ;EACI;EACA;EACA;EACA","file":"style.css"}

package/dist/types.d.ts

@@ -0,0 +1,8 @@
+export type Direction = "left" | "right" | "top" | "bottom";
+export type NyaNode = string;
+export type SplitType = "row" | "column";
+export interface NyaSplit {
+    nodes: [NyaNode | NyaSplit, NyaNode | NyaSplit];
+    type: SplitType;
+}
+export type StructNode = [string | StructNode, string | StructNode, 1?];

package/dist/types.js

@@ -0,0 +1 @@
+export {};

package/dist/utils/convertSplit.d.ts

@@ -0,0 +1,2 @@
+import { NyaSplit } from "../types.js";
+export declare function convertToSplits(arr: any[]): NyaSplit;

package/dist/utils/convertSplit.js

@@ -0,0 +1,54 @@
+export function convertToSplits(arr) {
+    if (arr.length === 0) {
+        throw new Error("Array structure must have at least one element");
+    }
+    let isColumnLayout = false;
+    let actualArray = arr;
+    if (arr.length === 3 && arr[2] === 1) {
+        isColumnLayout = true;
+        actualArray = arr.slice(0, 2);
+    }
+    if (actualArray.length === 1) {
+        const element = actualArray[0];
+        if (Array.isArray(element)) {
+            const nestedSplit = convertToSplits(element);
+            return {
+                type: isColumnLayout ? "column" : "row",
+                nodes: [nestedSplit, "empty"]
+            };
+        }
+        else {
+            return {
+                type: isColumnLayout ? "column" : "row",
+                nodes: [element, "empty"]
+            };
+        }
+    }
+    else if (actualArray.length === 2) {
+        const [first, second] = actualArray;
+        const firstElement = Array.isArray(first) ? convertToSplits(first) : first;
+        const secondElement = Array.isArray(second) ? convertToSplits(second) : second;
+        return {
+            type: isColumnLayout ? "column" : "row",
+            nodes: [firstElement, secondElement]
+        };
+    }
+    else {
+        const [first, ...rest] = actualArray;
+        let restStructure = [rest[0]];
+        for (let i = 1; i < rest.length; i++) {
+            if (isColumnLayout) {
+                restStructure = [restStructure, rest[i], 1];
+            }
+            else {
+                restStructure = [restStructure, rest[i]];
+            }
+        }
+        const firstElement = Array.isArray(first) ? convertToSplits(first) : first;
+        const restElement = Array.isArray(restStructure) ? convertToSplits(restStructure) : restStructure;
+        return {
+            type: isColumnLayout ? "column" : "row",
+            nodes: [firstElement, restElement]
+        };
+    }
+}

package/dist/utils/detect.d.ts

@@ -0,0 +1,6 @@
+import { Direction } from "../types.js";
+export declare function getRelativePosition(e: MouseEvent, element: HTMLElement): {
+    x: number;
+    y: number;
+};
+export declare function detectDockZone(e: MouseEvent, panel: HTMLElement, threshold?: number): Direction | "center";

package/dist/utils/detect.js

@@ -0,0 +1,21 @@
+export function getRelativePosition(e, element) {
+    const rect = element.getBoundingClientRect();
+    return {
+        x: e.clientX - rect.left,
+        y: e.clientY - rect.top
+    };
+}
+export function detectDockZone(e, panel, threshold = 0.35) {
+    const rect = panel.getBoundingClientRect();
+    const relX = (e.clientX - rect.left) / rect.width;
+    const relY = (e.clientY - rect.top) / rect.height;
+    if (relX < threshold)
+        return "left";
+    if (relX > 1 - threshold)
+        return "right";
+    if (relY < threshold)
+        return "top";
+    if (relY > 1 - threshold)
+        return "bottom";
+    return "center";
+}

package/dist/utils/movePanel.d.ts

@@ -0,0 +1,3 @@
+import { NyaController } from "../state.js";
+import { Direction } from "../types.js";
+export declare function movePanel(controller: NyaController, sourceId: string, targetId: string, zone: Direction): void;

package/dist/utils/movePanel.js

@@ -0,0 +1,57 @@
+export function movePanel(controller, sourceId, targetId, zone) {
+    if (!controller._split || sourceId === targetId)
+        return;
+    if (controller._split.nodes.length === 0) {
+        controller._split = {
+            nodes: [sourceId, targetId],
+            type: (zone === "left" || zone === "right") ? "row" : "column",
+        };
+        return;
+    }
+    function recursiveRemove(node) {
+        if (typeof node === "string") {
+            return node === sourceId ? null : node;
+        }
+        const [nodeA, nodeB] = node.nodes;
+        const newA = recursiveRemove(nodeA);
+        const newB = recursiveRemove(nodeB);
+        if (newA && newB) {
+            if (newA !== nodeA || newB !== nodeB) {
+                return { ...node, nodes: [newA, newB] };
+            }
+            return node;
+        }
+        return newA || newB;
+    }
+    const treeAfterRemove = recursiveRemove(controller._split);
+    const newSplitNode = {
+        type: (zone === "left" || zone === "right") ? "row" : "column",
+        nodes: (zone === "left" || zone === "top") ? [sourceId, targetId] : [targetId, sourceId],
+    };
+    function recursiveDock(node) {
+        if (typeof node === "string") {
+            return node === targetId ? newSplitNode : node;
+        }
+        const [nodeA, nodeB] = node.nodes;
+        if (typeof nodeA === "string" && nodeA === targetId) {
+            return { ...node, nodes: [newSplitNode, nodeB] };
+        }
+        if (typeof nodeB === "string" && nodeB === targetId) {
+            return { ...node, nodes: [nodeA, newSplitNode] };
+        }
+        const newA = recursiveDock(nodeA);
+        const newB = recursiveDock(nodeB);
+        if (newA !== nodeA || newB !== nodeB) {
+            return { ...node, nodes: [newA, newB] };
+        }
+        return node;
+    }
+    let finalTree;
+    if (!treeAfterRemove) {
+        finalTree = newSplitNode;
+    }
+    else {
+        finalTree = recursiveDock(treeAfterRemove);
+    }
+    controller._split = finalTree;
+}

package/package.json

@@ -0,0 +1,41 @@
+{
+	"name": "@wxn0brp/nya-dock",
+	"version": "0.0.1",
+	"main": "dist/index.js",
+	"types": "dist/index.d.ts",
+	"description": "",
+	"repository": {
+		"type": "git",
+		"url": "https://github.com/wxn0brP/Nyadock.git"
+	},
+	"homepage": "https://github.com/wxn0brP/Nyadock",
+	"author": "wxn0brP",
+	"license": "MIT",
+	"type": "module",
+	"scripts": {
+		"build": "tsc && tsc-alias && sass src:dist"
+	},
+	"devDependencies": {
+		"sass": "*",
+		"tsc-alias": "*",
+		"typescript": "*"
+	},
+	"files": [
+		"dist"
+	],
+	"exports": {
+		".": {
+			"types": "./dist/index.d.ts",
+			"import": "./dist/index.js",
+			"default": "./dist/index.js"
+		},
+		"./*": {
+			"types": "./dist/*.d.ts",
+			"import": "./dist/*.js",
+			"default": "./dist/*.js"
+		}
+	},
+	"dependencies": {
+		"@wxn0brp/flanker-ui": "^0.4.3"
+	}
+}