@alekstar79/draggable-resizable-container 1.0.2 → 1.0.4

package/dist/index.es.js

@@ -1,9 +1,9 @@
-import './index.css';var z = Object.defineProperty;
-var S = (o, t, e) => t in o ? z(o, t, { enumerable: !0, configurable: !0, writable: !0, value: e }) : o[t] = e;
-var a = (o, t, e) => S(o, typeof t != "symbol" ? t + "" : t, e);
-import f, { reactive as b, computed as x, effect as p } from "@alekstar79/reactive-event-system";
-import { clamp as m, deepMerge as M } from "@alekstar79/utility";
-class R {
+import './index.css';var Z = Object.defineProperty;
+var _ = (c, t, e) => t in c ? Z(c, t, { enumerable: !0, configurable: !0, writable: !0, value: e }) : c[t] = e;
+var a = (c, t, e) => _(c, typeof t != "symbol" ? t + "" : t, e);
+import Q, { reactive as $, computed as tt, effect as k, batch as D } from "@alekstar79/reactive-event-system";
+import { clamp as v, deepMerge as et, debounce as z } from "@alekstar79/utility";
+class it {
   constructor(t) {
     a(this, "container");
     this.container = t || this.createContainer();
@@ -60,17 +60,17 @@ class R {
       this.container.removeChild(this.container.firstChild);
   }
 }
-new R();
-class I {
+new it();
+class pt {
   /**
    * Create container element with proper initialization
    */
   static createContainerElement(t, e, i, s, r) {
-    const n = document.createElement("div");
-    return n.className = "container advanced-container new", n.style.position = "absolute", n.style.width = `${t}px`, n.style.height = `${e}px`, i !== void 0 && (n.style.left = `${i}px`), s !== void 0 && (n.style.top = `${s}px`), r && (n.style.borderColor = r), n;
+    const o = document.createElement("div");
+    return o.className = "container advanced-container new", o.style.position = "absolute", o.style.width = `${t}px`, o.style.height = `${e}px`, i !== void 0 && (o.style.left = `${i}px`), s !== void 0 && (o.style.top = `${s}px`), r && (o.style.borderColor = r), o;
   }
 }
-class k {
+class vt {
   constructor(t) {
     a(this, "templateLoader");
     this.templateLoader = t;
@@ -106,10 +106,86 @@ class k {
     this.templateLoader = t;
   }
 }
-var T = Object.defineProperty, H = (o, t, e) => t in o ? T(o, t, { enumerable: !0, configurable: !0, writable: !0, value: e }) : o[t] = e, d = (o, t, e) => H(o, typeof t != "symbol" ? t + "" : t, e);
-class C {
+class ft {
   constructor() {
-    d(this, "templates", /* @__PURE__ */ new Map()), d(this, "lastUpdated", /* @__PURE__ */ new Map());
+    a(this, "globalStatsElement", null);
+  }
+  /**
+   * Initialize stats manager
+   */
+  initialize(t) {
+    this.globalStatsElement = t;
+  }
+  /**
+   * Show container-specific statistics
+   */
+  showContainerStats(t) {
+    this.globalStatsElement && this.updateStatsPanel(this.generateContainerStatsHTML(t));
+  }
+  /**
+   * Show global statistics
+   */
+  showGlobalStats(t) {
+    this.globalStatsElement && this.updateStatsPanel(this.generateGlobalStatsHTML(t));
+  }
+  /**
+   * Generate HTML for container statistics
+   */
+  generateContainerStatsHTML(t) {
+    const e = t.hasSnapping && t.step !== void 0 ? `<div class="stat-item">
+           <span class="stat-label">Step:</span>
+           <span class="stat-value">${t.step}</span>
+         </div>` : "";
+    return `
+      <h4>Block Stats</h4>
+      <div class="stat-item">
+        <span class="stat-label">Active Block:</span>
+        <span class="stat-value">${t.activeBlock}</span>
+      </div>
+      <div class="stat-item">
+        <span class="stat-label">Lock:</span>
+        <span class="stat-value">${t.lock}</span>
+      </div>
+      <div class="stat-item">
+        <span class="stat-label">Direction:</span>
+        <span class="stat-value">${t.direction}</span>
+      </div>
+      ${e}`;
+  }
+  /**
+   * Generate HTML for global statistics
+   */
+  generateGlobalStatsHTML(t) {
+    return `
+      <h4>Global Stats</h4>
+      <div class="stat-item">
+        <span class="stat-label">Containers:</span>
+        <span class="stat-value">${t.containerCount}</span>
+      </div>
+      <div class="stat-item">
+        <span class="stat-label">Content Types:</span>
+        <span class="stat-value">${t.contentTypes}</span>
+      </div>
+      <div class="stat-item">
+        <span class="stat-label">Pinned Mode:</span>
+        <span class="stat-value">${t.pinnedMode}</span>
+      </div>
+      <div class="stat-item">
+        <span class="stat-label">With Snapping:</span>
+        <span class="stat-value">${t.snappingCount}</span>
+      </div>`;
+  }
+  /**
+   * Update stats panel with new HTML content
+   */
+  updateStatsPanel(t) {
+    this.globalStatsElement && (this.globalStatsElement.innerHTML = t);
+  }
+}
+var st = Object.defineProperty, nt = (c, t, e) => t in c ? st(c, t, { enumerable: !0, configurable: !0, writable: !0, value: e }) : c[t] = e, m = (c, t, e) => nt(c, typeof t != "symbol" ? t + "" : t, e);
+class I {
+  constructor() {
+    m(this, "templates", /* @__PURE__ */ new Map()), m(this, "lastUpdated", /* @__PURE__ */ new Map());
   }
   register(t) {
     if (!t.name.trim()) throw new Error("Template name cannot be empty");
@@ -138,9 +214,9 @@ class C {
     return (e = this.templates.get(t)) == null ? void 0 : e.metadata;
   }
 }
-class L {
+class at {
   constructor(t = 36e5) {
-    d(this, "cache", /* @__PURE__ */ new Map()), d(this, "ttl"), this.ttl = t;
+    m(this, "cache", /* @__PURE__ */ new Map()), m(this, "ttl"), this.ttl = t;
   }
   set(t, e) {
     this.cache.set(t, { content: e, timestamp: Date.now() });
@@ -159,9 +235,9 @@ class L {
     return this.cache.size;
   }
 }
-class A {
+class J {
   constructor(t, e = {}) {
-    d(this, "cache"), d(this, "config"), d(this, "metrics"), d(this, "retryQueue", /* @__PURE__ */ new Map()), d(this, "registry"), this.registry = t ?? new C(), this.cache = new L(e == null ? void 0 : e.cacheTTL), this.config = this.normalizeConfig(e), this.metrics = { totalLoads: 0, totalHits: 0, totalMisses: 0, totalErrors: 0, averageLoadTime: 0, cacheHitRate: 0 };
+    m(this, "cache"), m(this, "config"), m(this, "metrics"), m(this, "retryQueue", /* @__PURE__ */ new Map()), m(this, "registry"), this.registry = t ?? new I(), this.cache = new at(e == null ? void 0 : e.cacheTTL), this.config = this.normalizeConfig(e), this.metrics = { totalLoads: 0, totalHits: 0, totalMisses: 0, totalErrors: 0, averageLoadTime: 0, cacheHitRate: 0 };
   }
   normalizeConfig(t = {}) {
     var i;
@@ -173,27 +249,27 @@ class A {
   async loadTemplate(t, e = 2) {
     const i = performance.now(), s = this.retryQueue.get(t) ?? 0;
     if (this.metrics.totalLoads++, this.config.cache) {
-      const n = this.cache.get(t);
-      if (n) return this.metrics.totalHits++, this.updateCacheHitRate(), n;
+      const o = this.cache.get(t);
+      if (o) return this.metrics.totalHits++, this.updateCacheHitRate(), o;
     }
     this.metrics.totalMisses++;
     const r = this.registry.get(t);
     if (!r) {
-      const n = this.createError(`Template "${t}" not found. Available: ${this.registry.list().join(", ")}`, t, s);
-      return this.metrics.totalErrors++, this.config.onError(n), this.config.fallbackTemplate;
+      const o = this.createError(`Template "${t}" not found. Available: ${this.registry.list().join(", ")}`, t, s);
+      return this.metrics.totalErrors++, this.config.onError(o), this.config.fallbackTemplate;
     }
     try {
-      let n = typeof r.source == "function" ? await r.source() : r.source;
-      if (typeof n != "string") {
-        const h = this.createError("Template source must return a string, got " + typeof n, t, s);
+      let o = typeof r.source == "function" ? await r.source() : r.source;
+      if (typeof o != "string") {
+        const h = this.createError("Template source must return a string, got " + typeof o, t, s);
         return this.metrics.totalErrors++, this.config.onError(h), this.config.fallbackTemplate;
       }
-      return this.config.cache && this.cache.set(t, n), this.retryQueue.delete(t), this.recordLoadTime(i), n;
-    } catch (n) {
-      const h = n instanceof Error ? n : new Error(String(n));
-      if (s < e) return this.retryQueue.set(t, s + 1), this.config.onWarn(`Retrying template "${t}" (attempt ${s + 1}/${e})`), await new Promise((u) => setTimeout(u, 100 * Math.pow(2, s))), this.loadTemplate(t, e);
-      const l = this.createError(`Failed to load template "${t}": ${h.message}`, t, s);
-      return this.metrics.totalErrors++, this.config.onError(l), this.retryQueue.delete(t), this.config.fallbackTemplate;
+      return this.config.cache && this.cache.set(t, o), this.retryQueue.delete(t), this.recordLoadTime(i), o;
+    } catch (o) {
+      const h = o instanceof Error ? o : new Error(String(o));
+      if (s < e) return this.retryQueue.set(t, s + 1), this.config.onWarn(`Retrying template "${t}" (attempt ${s + 1}/${e})`), await new Promise((l) => setTimeout(l, 100 * Math.pow(2, s))), this.loadTemplate(t, e);
+      const d = this.createError(`Failed to load template "${t}": ${h.message}`, t, s);
+      return this.metrics.totalErrors++, this.config.onError(d), this.retryQueue.delete(t), this.config.fallbackTemplate;
     }
   }
   async loadTemplates(t) {
@@ -233,12 +309,373 @@ class A {
     this.config.enableMetrics && (this.metrics.cacheHitRate = this.metrics.totalHits / this.metrics.totalLoads);
   }
 }
-const c = class c {
+let u;
+async function rt(c = []) {
+  const t = new I();
+  let e = {};
+  try {
+    e = /* @__PURE__ */ Object.assign({
+      "../demo/templates/media.html": () => import("./media-BMYuYfio.js").then((s) => s.default),
+      "../demo/templates/stats.html": () => import("./stats-CfbjjoNm.js").then((s) => s.default),
+      "../demo/templates/tasks.html": () => import("./tasks-dygJ8dHT.js").then((s) => s.default)
+    });
+    const i = {};
+    Object.entries(e).forEach(([s, r]) => {
+      var h;
+      const o = (h = s.split("/").pop()) == null ? void 0 : h.replace(/\.html$/, "");
+      o && (i[o] = async () => typeof r == "function" ? await r() : String(r));
+    }), await t.registerBulk(i);
+  } catch (i) {
+    console.error("[TemplateLoader] Failed to load templates:", i), c.forEach(({ name: s, source: r }) => {
+      t.register({ name: s, source: r });
+    });
+  }
+  return new J(t, {
+    environment: "development",
+    cache: !0,
+    cacheTTL: 36e5,
+    enableMetrics: !0,
+    fallbackTemplate: '<div class="template-error">Template not found</div>',
+    onError: (i) => console.error(`[TemplateLoader Error] ${i.templateName}:`, i.message),
+    onWarn: (i) => console.warn(`[TemplateLoader] ${i}`)
+  });
+}
+function ot() {
+  const c = new I();
+  return new J(c, {
+    environment: "production",
+    cache: !0,
+    cacheTTL: 36e5,
+    enableMetrics: !1,
+    onWarn: (t) => console.warn(`[TemplateLoader] ${t}`),
+    onError: (t) => {
+      console.warn(`Template load failed: ${t.templateName}`);
+    }
+  });
+}
+async function St() {
+  return u || (// @ts-ignore - Vite environment variable
+  typeof process < "u" && process.env && process.env.NODE_ENV === "development" ? u = await rt() : (u = ot(), u.registry.register({
+    name: "media",
+    source: async () => (await fetch("./templates/media.html")).text(),
+    metadata: {
+      version: "1.0",
+      description: "Media card",
+      cached: !0
+    }
+  }), u.registry.register({
+    name: "userProfile",
+    source: '<div class="user-profile"><h2>Profile</h2></div>',
+    metadata: {
+      version: "1.0",
+      description: "User profile card",
+      cached: !0
+    }
+  })), u);
+}
+function Et() {
+  if (!u)
+    throw new Error("Template system not initialized. Call initializeTemplateSystem() first.");
+  return u;
+}
+function ct(c, [t, e]) {
+  return e ? { ...c, [t]: e } : c;
+}
+class W {
+  constructor(t) {
+    a(this, "source", "cursor");
+    a(this, "element", null);
+    a(this, "top", !1);
+    a(this, "right", !1);
+    a(this, "bottom", !1);
+    a(this, "left", !1);
+    a(this, "edge", null);
+    Object.assign(this, t);
+  }
+}
+class X {
+  constructor() {
+    a(this, "listeners", {});
+  }
+  on(t, e) {
+    return this.listeners[t] || (this.listeners[t] = /* @__PURE__ */ new Set()), this.listeners[t].add(e), () => {
+      var i;
+      (i = this.off) == null || i.call(this, t, e);
+    };
+  }
+  emit(t, e) {
+    var i;
+    (i = this.listeners[t]) == null || i.forEach((s) => {
+      try {
+        s(e);
+      } catch (r) {
+        console.error(`Error in event listener for ${String(t)}:`, r);
+      }
+    });
+  }
+  off(t, e) {
+    var i;
+    (i = this.listeners[t]) == null || i.delete(e);
+  }
+  destroy() {
+    this.listeners = {};
+  }
+}
+class ht {
+  constructor(t = 50, e, i = null) {
+    a(this, "root");
+    a(this, "edgeThreshold");
+    a(this, "targets", /* @__PURE__ */ new Set());
+    a(this, "currentEdges", /* @__PURE__ */ new Map());
+    a(this, "rafId", null);
+    a(this, "isActive", !1);
+    a(this, "callbacks", /* @__PURE__ */ new Set());
+    a(this, "currentMousePos", { x: 0, y: 0 });
+    a(this, "currentCursorEdge", {
+      top: !1,
+      right: !1,
+      bottom: !1,
+      left: !1,
+      edge: null
+    });
+    this.edgeThreshold = t, this.targets = e instanceof Set ? e : new Set(e), this.root = i, e && e.forEach((s) => this.targets.add(s)), this.checkBoundaries = this.checkBoundaries.bind(this);
+  }
+  /**
+   * Start tracking the approach to the edges
+   */
+  start() {
+    this.isActive || (this.isActive = !0, this.setupMouseTracking(), this.checkBoundaries());
+  }
+  /**
+   * Stop tracking
+   */
+  stop() {
+    this.rafId !== null && (cancelAnimationFrame(this.rafId), this.rafId = null), this.isActive = !1;
+  }
+  addTarget(t) {
+    this.targets.add(t);
+  }
+  removeTarget(t) {
+    this.targets.delete(t), this.currentEdges.delete(t);
+  }
+  /**
+   * Subscribe to boundary changes
+   */
+  onChange(t) {
+    return this.callbacks.add(t), () => {
+      this.callbacks.delete(t);
+    };
+  }
+  /**
+   * Get current information about cursor boundaries
+   */
+  getCursorEdgeInfo() {
+    return { ...this.currentCursorEdge };
+  }
+  /**
+   * Update threshold (distance to edge)
+   */
+  setEdgeThreshold(t) {
+    if (t < 0)
+      throw new Error("Edge threshold must be non-negative");
+    this.edgeThreshold = t;
+  }
+  /**
+   * Set up Mouse Tracking
+   */
+  setupMouseTracking() {
+    document.addEventListener("mousemove", (t) => {
+      this.currentMousePos = { x: t.clientX, y: t.clientY };
+    });
+  }
+  getViewportSize() {
+    return this.root ? { width: this.root.clientWidth, height: this.root.clientHeight } : { width: window.innerWidth, height: window.innerHeight };
+  }
+  getRelativeRect(t) {
+    const e = t.getBoundingClientRect();
+    if (!this.root) return e;
+    const i = this.root.getBoundingClientRect();
+    return {
+      x: e.left - i.left,
+      y: e.top - i.top,
+      top: e.top - i.top,
+      bottom: e.bottom - i.top,
+      left: e.left - i.left,
+      right: e.right - i.left,
+      height: e.height,
+      width: e.width,
+      toJSON: () => {
+      }
+    };
+  }
+  getCursorPosition() {
+    if (!this.root) return this.currentMousePos;
+    const t = this.root.getBoundingClientRect();
+    return {
+      x: this.currentMousePos.x - t.left,
+      y: this.currentMousePos.y - t.top
+    };
+  }
+  /**
+   * Check the proximity to the borders (element and cursor)
+   */
+  checkBoundaries() {
+    this.targets.forEach((e) => {
+      const i = this.checkElementBoundaries(e), s = this.currentEdges.get(e);
+      (!s || this.hasEdgeChanged(s, i)) && (this.currentEdges.set(e, i), this.notifyCallbacks(new W({ ...i, source: "element", element: e })));
+    });
+    const t = this.checkCursorBoundaries();
+    this.hasEdgeChanged(this.currentCursorEdge, t) && (this.currentCursorEdge = t, this.notifyCallbacks(new W({ ...t, source: "cursor", element: null }))), this.isActive && (this.rafId = requestAnimationFrame(
+      this.checkBoundaries
+    ));
+  }
+  /**
+   * Emulating Bounding Rect for cursor
+   */
+  getCursorBoundingClientRect() {
+    const { x: t, y: e } = this.getCursorPosition();
+    return {
+      x: t,
+      y: e,
+      top: e,
+      bottom: e,
+      left: t,
+      right: t,
+      width: 0,
+      height: 0,
+      toJSON: () => {
+      }
+    };
+  }
+  /**
+   * Check the boundaries of an element
+   */
+  checkElementBoundaries(t) {
+    const { width: e, height: i } = this.getViewportSize(), s = this.getRelativeRect(t), r = {
+      top: s.top < this.edgeThreshold,
+      right: s.right > e - this.edgeThreshold,
+      bottom: s.bottom > i - this.edgeThreshold,
+      left: s.left < this.edgeThreshold,
+      edge: null
+    };
+    return this.determineEdge(r, s, e, i), r;
+  }
+  /**
+   * Check the boundaries of a cursor
+   */
+  checkCursorBoundaries() {
+    const t = this.getCursorBoundingClientRect(), e = window.innerWidth, i = window.innerHeight, s = {
+      top: t.top < this.edgeThreshold,
+      right: t.right > e - this.edgeThreshold,
+      bottom: t.bottom > i - this.edgeThreshold,
+      left: t.left < this.edgeThreshold,
+      edge: null
+    };
+    return this.determineEdge(s, t, e, i), s;
+  }
+  /**
+   * Check if the state has changed
+   */
+  hasEdgeChanged(t, e) {
+    return t.top !== e.top || t.right !== e.right || t.bottom !== e.bottom || t.left !== e.left;
+  }
+  /**
+   * Determine a priority edge-side (or several)
+   */
+  determineEdge(t, e, i, s) {
+    const r = [];
+    if (t.top && r.push("top"), t.right && r.push("right"), t.bottom && r.push("bottom"), t.left && r.push("left"), r.length === 0)
+      t.edge = null;
+    else if (r.length === 1)
+      t.edge = r[0];
+    else {
+      const o = {
+        top: e.top,
+        right: i - e.right,
+        bottom: s - e.bottom,
+        left: e.left
+      };
+      t.edge = r.reduce(
+        (h, d) => o[d] < o[h] ? d : h
+      );
+    }
+  }
+  /**
+   * Notify all subscribers of the change
+   */
+  notifyCallbacks(t) {
+    this.callbacks.forEach((e) => {
+      try {
+        e(t);
+      } catch (i) {
+        console.error("Error in boundary change callback:", i);
+      }
+    });
+  }
+  /**
+   * Clear resources
+   */
+  destroy() {
+    this.stop(), this.callbacks.clear();
+  }
+}
+const y = class y extends ht {
+  constructor(e, i) {
+    super(e, i);
+    a(this, "lastEdge", {});
+    a(this, "emitter", null);
+    this.onChange(this.onBoundaryChange.bind(this)), this.start();
+  }
+  static init(e, i) {
+    return y.instance ?? (y.instance = new y(e, i));
+  }
+  changed({ edge: e, source: i, element: s }) {
+    return e !== this.lastEdge.edge || i !== this.lastEdge.source || s !== this.lastEdge.element;
+  }
+  onBoundaryChange({ edge: e, source: i, element: s }) {
+    this.changed({ edge: e, source: i, element: s }) && (this.lastEdge = Object.entries({ edge: e, source: i, element: s }).reduce(ct, {}), s ? e ? this.onEdgeEnter({ edge: e, source: i, element: s }) : this.onEdgeLeave(this.lastEdge) : e ? this.onCursorEnter({ edge: e, source: i }) : this.onCursorLeave(this.lastEdge));
+  }
+  onEdgeEnter(e) {
+    var i;
+    (i = this.emitter) == null || i.emit("edge:enter", e);
+  }
+  onEdgeLeave(e) {
+    var i;
+    (i = this.emitter) == null || i.emit("edge:leave", e);
+  }
+  onCursorEnter(e) {
+    var i;
+    (i = this.emitter) == null || i.emit("cursor:enter", e);
+  }
+  onCursorLeave(e) {
+    var i;
+    (i = this.emitter) == null || i.emit("cursor:leave", e);
+  }
+  setEmitter(e) {
+    this.emitter = e;
+  }
+  on(e, i) {
+    var s;
+    (s = this.emitter) == null || s.on(e, i);
+  }
+  getCurrentEdge() {
+    return this.lastEdge;
+  }
+};
+a(y, "instance");
+let P = y;
+function dt(c = {}, t = []) {
+  const e = P.init(c.edgeThreshold, t);
+  return c.emitter && e.setEmitter(
+    c.emitter instanceof X ? c.emitter : new X()
+  ), e;
+}
+const g = class g {
   constructor() {
     a(this, "draggable", []);
   }
   zIndex(t) {
-    return `${c.highestZIndex + this.draggable.findIndex((e) => e === t)}`;
+    return `${g.highestZIndex + this.draggable.findIndex((e) => e === t)}`;
   }
   push(t) {
     return this.draggable = [.../* @__PURE__ */ new Set([...this.draggable, t])], this;
@@ -250,18 +687,18 @@ const c = class c {
     return this.draggable.sort((e, i) => e === t ? 1 : i === t ? -1 : 0), this;
   }
 };
-a(c, "inatance"), a(c, "highestZIndex", 1e3), a(c, "init", () => c.inatance ?? (c.inatance = new c()));
-let v = c;
-function w() {
+a(g, "inatance"), a(g, "highestZIndex", 1e3), a(g, "init", () => g.inatance ?? (g.inatance = new g()));
+let O = g;
+function G() {
   return {
     width: window.innerWidth || document.documentElement.clientWidth,
     height: window.innerHeight || document.documentElement.clientHeight
   };
 }
-function D() {
-  return v.init();
+function lt() {
+  return O.init();
 }
-const g = class g {
+const f = class f {
   /**
    * Create a new container manager instance with reactive state management
    * @param container - HTML element to manage
@@ -289,7 +726,7 @@ const g = class g {
     a(this, "resizeObserver", null);
     a(this, "parentResizeObserver", null);
     a(this, "zIndexState");
-    a(this, "reactiveState", b({
+    a(this, "reactiveState", $({
       x: 0,
       y: 0,
       width: 0,
@@ -298,28 +735,28 @@ const g = class g {
       draggingDirection: "all"
     }));
     // Computed state with applied constraints
-    a(this, "constrainedState", x(() => {
+    a(this, "constrainedState", tt(() => {
       var s;
       const t = this.reactiveState;
       if (!this.config) return { ...t };
       let e = { ...t };
       const { boundaries: i } = this.config;
-      if (e.width = m(
+      if (e.width = v(
         t.width,
-        i.minWidth || g.MINWIDTH,
+        i.minWidth || f.MINWIDTH,
         i.maxWidth || 1 / 0
-      ), e.height = m(
+      ), e.height = v(
         t.height,
-        i.minHeight || g.MINHEIGHT,
+        i.minHeight || f.MINHEIGHT,
         i.maxHeight || 1 / 0
       ), this.shouldConstrainToViewport()) {
-        const r = w();
-        e.x = m(t.x, 0, r.width - e.width), e.y = m(t.y, 0, r.height - e.height);
+        const r = G();
+        e.x = v(t.x, 0, r.width - e.width), e.y = v(t.y, 0, r.height - e.height);
       }
       return (s = this.config) != null && s.constrainToParent && (e = this.constrainToParent(e)), e;
     }));
     // Automatic DOM updates with reactive effect
-    a(this, "domUpdateEffect", p(() => {
+    a(this, "domUpdateEffect", k(() => {
       var e;
       const t = this.constrainedState.value;
       this.container && (this.container.style.left = `${t.x}px`, this.container.style.top = `${t.y}px`, this.container.style.width = `${t.width}px`, this.container.style.height = `${t.height}px`, (e = this.eventEmitter) == null || e.emit("stateChange", {
@@ -329,15 +766,15 @@ const g = class g {
         element: this.container
       }));
     }));
-    this.config = M({
+    this.config = et({
       _uid: "",
       mode: "smooth",
       constrainToViewport: !1,
       draggingDirection: "all",
       constrainToParent: !1,
       boundaries: {
-        minWidth: g.MINWIDTH,
-        minHeight: g.MINHEIGHT
+        minWidth: f.MINWIDTH,
+        minHeight: f.MINHEIGHT
       },
       autoAdjust: {
         enabled: !1,
@@ -348,9 +785,9 @@ const g = class g {
         enabled: !0,
         directions: ["se"]
       }
-    }, e), this.container = t, this.zIndexState = D();
+    }, e), this.container = t, this.zIndexState = lt();
     const i = this.getCurrentState();
-    this.reactiveState.x = i.x, this.reactiveState.y = i.y, this.reactiveState.width = i.width, this.reactiveState.height = i.height, this.reactiveState.mode = this.config.mode, this.reactiveState.draggingDirection = this.config.draggingDirection, this.eventEmitter = new f({ enableMetrics: !0 }), this.pluginEventEmitter = new f({ enableMetrics: !0 }), this.stateChangeStream = this.eventEmitter.stream("stateChange"), this.dragStream = this.eventEmitter.stream("drag"), this.resizeStream = this.eventEmitter.stream("resize"), this.startState = this.getState(), this.setupEventMiddleware(), this.initializeHandles(), this.bindEvents(), this.setupResizeObservers(), this.setupReactiveMonitoring();
+    this.reactiveState.x = i.x, this.reactiveState.y = i.y, this.reactiveState.width = i.width, this.reactiveState.height = i.height, this.reactiveState.mode = this.config.mode, this.reactiveState.draggingDirection = this.config.draggingDirection, this.eventEmitter = new Q({ enableMetrics: !0 }), this.pluginEventEmitter = new Q({ enableMetrics: !0 }), this.stateChangeStream = this.eventEmitter.stream("stateChange"), this.dragStream = this.eventEmitter.stream("drag"), this.resizeStream = this.eventEmitter.stream("resize"), this.startState = this.getState(), this.setupEventMiddleware(), this.initializeHandles(), this.bindEvents(), this.setupResizeObservers(), this.setupReactiveMonitoring();
   }
   /**
    * Set up ResizeObserver to track viewport and parent size changes
@@ -381,7 +818,7 @@ const g = class g {
    */
   handleViewportResize() {
     if (!this.shouldConstrainToViewport()) return;
-    const t = w(), i = { ...this.getState() };
+    const t = G(), i = { ...this.getState() };
     let s = !1;
     i.x + i.width > t.width && (i.x = Math.max(0, t.width - i.width), s = !0), i.y + i.height > t.height && (i.y = Math.max(0, t.height - i.height), s = !0), i.x < 0 && (i.x = 0, s = !0), i.y < 0 && (i.y = 0, s = !0), s && (this.setState(i), this.eventEmitter.emit("viewportResize", {
       type: "viewportResize",
@@ -407,16 +844,16 @@ const g = class g {
     const { autoAdjust: e } = this.config;
     if (!(e != null && e.enabled)) return;
     const i = t.contentRect, r = { ...this.getState() };
-    let n = !1;
+    let o = !1;
     if (e.width) {
-      const h = this.getMaxWidthConstraint(), l = Math.min(i.width, h);
-      Math.abs(r.width - l) > 1 && (r.width = l, n = !0);
+      const h = this.getMaxWidthConstraint(), d = Math.min(i.width, h);
+      Math.abs(r.width - d) > 1 && (r.width = d, o = !0);
     }
     if (e.height) {
-      const h = this.getMaxHeightConstraint(), l = Math.min(i.height, h);
-      Math.abs(r.height - l) > 1 && (r.height = l, n = !0);
+      const h = this.getMaxHeightConstraint(), d = Math.min(i.height, h);
+      Math.abs(r.height - d) > 1 && (r.height = d, o = !0);
     }
-    n && (this.setState(r), this.eventEmitter.emit("autoAdjust", {
+    o && (this.setState(r), this.eventEmitter.emit("autoAdjust", {
       type: "autoAdjust",
       state: this.getState(),
       mode: this.reactiveState.mode,
@@ -558,12 +995,12 @@ const g = class g {
     const i = e.getBoundingClientRect();
     if (i.width === 0 || i.height === 0)
       return t;
-    const s = Math.max(0, i.width - t.width), r = Math.max(0, i.height - t.height), n = i.width - t.x, h = i.height - t.y;
+    const s = Math.max(0, i.width - t.width), r = Math.max(0, i.height - t.height), o = i.width - t.x, h = i.height - t.y;
     return {
-      x: m(t.x, 0, s),
-      y: m(t.y, 0, r),
-      width: m(t.width, 0, n),
-      height: m(t.height, 0, h)
+      x: v(t.x, 0, s),
+      y: v(t.y, 0, r),
+      width: v(t.width, 0, o),
+      height: v(t.height, 0, h)
     };
   }
   /**
@@ -628,11 +1065,11 @@ const g = class g {
    * Setup reactive monitoring for container metrics
    */
   setupReactiveMonitoring() {
-    const t = p(() => {
+    const t = k(() => {
       const { state: i } = this.stateChangeStream;
     });
     this.reactiveEffects.push(t);
-    const e = p(() => {
+    const e = k(() => {
       const i = this.eventEmitter.getMetrics();
       i.state.errorCount > 10 && console.warn("[ContainerManager] High error count in event system:", i.state.errorCount);
     });
@@ -738,8 +1175,8 @@ const g = class g {
     const { clientX: e, clientY: i } = this.directionResolver(
       t instanceof MouseEvent ? t.clientX : t.touches[0].clientX,
       t instanceof MouseEvent ? t.clientY : t.touches[0].clientY
-    ), s = e - this.startX, r = i - this.startY, n = this.applyMovementMode(s, r);
-    this.setState(n), this.eventEmitter.emit("drag", {
+    ), s = e - this.startX, r = i - this.startY, o = this.applyMovementMode(s, r);
+    this.setState(o), this.eventEmitter.emit("drag", {
       type: "drag",
       state: this.getState(),
       mode: this.reactiveState.mode,
@@ -776,8 +1213,8 @@ const g = class g {
    */
   onResizeMove(t) {
     if (!this.isResizing || !this.resizeDirection) return;
-    const e = t instanceof MouseEvent ? t.clientX : t.touches[0].clientX, i = t instanceof MouseEvent ? t.clientY : t.touches[0].clientY, s = e - this.startX, r = i - this.startY, n = this.calculateResizeState(s, r, this.resizeDirection);
-    this.setState(n), this.eventEmitter.emit("resize", {
+    const e = t instanceof MouseEvent ? t.clientX : t.touches[0].clientX, i = t instanceof MouseEvent ? t.clientY : t.touches[0].clientY, s = e - this.startX, r = i - this.startY, o = this.calculateResizeState(s, r, this.resizeDirection);
+    this.setState(o), this.eventEmitter.emit("resize", {
       type: "resize",
       state: this.getState(),
       mode: this.reactiveState.mode,
@@ -913,12 +1350,12 @@ const g = class g {
     const t = this.container.parentElement.getBoundingClientRect(), e = this.getState();
     if (t.width === 0 || t.height === 0)
       return;
-    const i = e.width, s = e.height, r = Math.min(i, t.width), n = Math.min(s, t.height), h = e.x, l = e.y, u = Math.min(h, t.width - r), y = Math.min(l, t.height - n);
+    const i = e.width, s = e.height, r = Math.min(i, t.width), o = Math.min(s, t.height), h = e.x, d = e.y, l = Math.min(h, t.width - r), S = Math.min(d, t.height - o);
     this.setState({
-      x: u,
-      y,
+      x: l,
+      y: S,
       width: r,
-      height: n
+      height: o
     }), this.eventEmitter.emit("parentRecalculated", {
       type: "parentRecalculated",
       state: this.getState(),
@@ -959,12 +1396,901 @@ const g = class g {
     }), this.resizeObserver && (this.resizeObserver.disconnect(), this.resizeObserver = null), this.parentResizeObserver && (this.parentResizeObserver.disconnect(), this.parentResizeObserver = null), this.installedPlugins.clear(), this.zIndexState.remove(this.config._uid);
   }
 };
-a(g, "MINWIDTH", 200), a(g, "MINHEIGHT", 45);
-let E = g;
+a(f, "MINWIDTH", 200), a(f, "MINHEIGHT", 45);
+let V = f;
+const x = class x {
+  constructor(t = {}) {
+    // Plugin state
+    a(this, "reactiveState", $({
+      snapStep: 10,
+      enabled: !0,
+      isActive: !1,
+      lastPosition: null
+    }));
+    a(this, "manager");
+    a(this, "startState", null);
+    a(this, "startX", 0);
+    a(this, "startY", 0);
+    this.reactiveState.snapStep = t.snapStep ?? 10, this.reactiveState.enabled = t.enabled ?? !0, this.onDragMove = this.onDragMove.bind(this), this.onDragEnd = this.onDragEnd.bind(this);
+  }
+  get pluginId() {
+    return x._pluginId;
+  }
+  /**
+   * Install plugin on container manager instance with reactive state
+   */
+  install(t, e) {
+    this.manager = t, e && (this.reactiveState.snapStep = e.snapStep ?? this.reactiveState.snapStep, this.reactiveState.enabled = e.enabled ?? this.reactiveState.enabled), this.overrideDragMethods(), this.addPluginMethods();
+  }
+  /**
+   * Override drag handling methods to add snapping functionality
+   */
+  overrideDragMethods() {
+    if (!this.manager) return;
+    const t = this.manager.getContainer().querySelector(".drag-handle");
+    t && (t.onmousedown = (e) => {
+      this.onDragStart(e);
+    }, t.ontouchstart = (e) => {
+      this.onDragStart(e);
+    });
+  }
+  /**
+   * Handle drag start event with snapping support
+   */
+  onDragStart(t) {
+    var s, r;
+    if (!this.manager || this.manager.getMode() === "pinned") return;
+    t.preventDefault(), (r = (s = this.manager).bringToFront) == null || r.call(s), this.reactiveState.isActive = !0;
+    const e = t instanceof MouseEvent ? t.clientX : t.touches[0].clientX, i = t instanceof MouseEvent ? t.clientY : t.touches[0].clientY;
+    this.startX = e, this.startY = i, this.startState = this.manager.getState(), this.reactiveState.lastPosition = { x: this.startState.x, y: this.startState.y }, document.addEventListener("mousemove", this.onDragMove), document.addEventListener("mouseup", this.onDragEnd), document.addEventListener("touchmove", this.onDragMove), document.addEventListener("touchend", this.onDragEnd), this.manager.emitPluginEvent("dragStart", {
+      type: "drag",
+      state: this.startState,
+      mode: this.manager.getMode()
+    });
+  }
+  /**
+   * Handle drag movement with reactive snapping
+   */
+  onDragMove(t) {
+    if (!this.reactiveState.isActive || !this.manager || !this.startState) return;
+    const { clientX: e, clientY: i } = this.manager.directionResolver(
+      t instanceof MouseEvent ? t.clientX : t.touches[0].clientX,
+      t instanceof MouseEvent ? t.clientY : t.touches[0].clientY
+    );
+    let s = e - this.startX, r = i - this.startY;
+    if (this.reactiveState.enabled) {
+      const d = this.applySnapping(s, r);
+      s = d.deltaX, r = d.deltaY;
+    }
+    const o = {
+      x: this.startState.x + s,
+      y: this.startState.y + r,
+      width: this.startState.width,
+      height: this.startState.height
+    }, h = this.manager.config;
+    h != null && h.constrainToViewport && this.constrainToViewport(o), this.manager.setState(o), this.reactiveState.lastPosition = { x: o.x, y: o.y }, this.manager.emitPluginEvent("drag", {
+      type: "drag",
+      state: o,
+      mode: this.manager.getMode()
+    });
+  }
+  /**
+   * Handle drag end event
+   */
+  onDragEnd() {
+    this.manager && (this.reactiveState.isActive = !1, this.reactiveState.lastPosition = null, this.startState = null, document.removeEventListener("mousemove", this.onDragMove), document.removeEventListener("mouseup", this.onDragEnd), document.removeEventListener("touchmove", this.onDragMove), document.removeEventListener("touchend", this.onDragEnd), this.manager.emitPluginEvent("dragEnd", {
+      type: "drag",
+      state: this.manager.getState(),
+      mode: this.manager.getMode()
+    }));
+  }
+  /**
+   * Apply snapping to drag movement based on current mode
+   */
+  applySnapping(t, e) {
+    return {
+      deltaX: this.snapToGrid(t, this.reactiveState.snapStep),
+      deltaY: this.snapToGrid(e, this.reactiveState.snapStep)
+    };
+  }
+  /**
+   * Snap value to grid using reactive step
+   */
+  snapToGrid(t, e) {
+    return Math.round(t / e) * e;
+  }
+  /**
+   * Constrain container to viewport boundaries
+   */
+  constrainToViewport(t) {
+    const e = window.innerWidth || document.documentElement.clientWidth, i = window.innerHeight || document.documentElement.clientHeight;
+    t.x = Math.max(0, Math.min(t.x, e - t.width)), t.y = Math.max(0, Math.min(t.y, i - t.height));
+  }
+  /**
+   * Add plugin methods to container manager
+   */
+  addPluginMethods() {
+    this.manager.setSnapStep = (t) => {
+      this.reactiveState.snapStep = t, this.manager.emitPluginEvent("snapStepChanged", { snapStep: t });
+    }, this.manager.setSnappingEnabled = (t) => {
+      this.reactiveState.enabled = t, this.manager.emitPluginEvent("snappingEnabledChanged", { enabled: t });
+    }, this.manager.getSnappingConfig = () => ({
+      snapStep: this.reactiveState.snapStep,
+      enabled: this.reactiveState.enabled
+    });
+  }
+  /**
+   * Clean up plugin resources
+   */
+  destroy() {
+    this.reactiveState.isActive = !1, this.reactiveState.lastPosition = null;
+  }
+};
+a(x, "_pluginId", Symbol("SnappingPlugin"));
+let U = x;
+const R = class R {
+  constructor(t = {}) {
+    a(this, "dockedContainers", /* @__PURE__ */ new Map());
+    a(this, "occupiedEdges", /* @__PURE__ */ new Map());
+    a(this, "tracker", dt({ emitter: !0, edgeThreshold: 20 }));
+    a(this, "manager");
+    a(this, "edgeThreshold");
+    this.edgeThreshold = t.edgeThreshold ?? 30, this.occupiedEdges.set("top", null), this.occupiedEdges.set("bottom", null), this.occupiedEdges.set("left", null), this.occupiedEdges.set("right", null);
+  }
+  get pluginId() {
+    return R._pluginId;
+  }
+  install(t) {
+    this.manager = t, this.tracker.addTarget(this.manager.getContainer()), this.tracker.on("edge:enter", (e) => {
+      e.source === "element" && e.element === this.manager.getContainer() && this.handleEdgeEnter(e.edge);
+    }), this.tracker.on("edge:leave", (e) => {
+      e.source === "element" && e.element === this.manager.getContainer() && this.handleEdgeLeave(e.edge);
+    }), this.attachEventHandlers();
+  }
+  /**
+   * Handle edge enter for visual feedback
+   */
+  handleEdgeEnter(t) {
+    const e = this.manager.getContainer();
+    this.isEdgeOccupied(t) ? e.classList.add("edge-dock-hint", `edge-dock-hint-${t}`, "edge-dock-blocked") : e.classList.add("edge-dock-hint", `edge-dock-hint-${t}`);
+  }
+  /**
+   * Handle edge leave - remove visual feedback
+   */
+  handleEdgeLeave(t) {
+    this.manager.getContainer().classList.remove("edge-dock-hint", `edge-dock-hint-${t}`, "edge-dock-blocked");
+  }
+  /**
+   * Check if an edge is occupied by another container
+   */
+  isEdgeOccupied(t) {
+    return this.occupiedEdges.get(t) !== null;
+  }
+  /**
+   * Attach event handlers to container manager
+   */
+  attachEventHandlers() {
+    const t = this.manager.getContainer();
+    t.addEventListener("mouseenter", this.onMouseEnter.bind(this)), t.addEventListener("mouseleave", this.onMouseLeave.bind(this)), this.manager.on("dragStart", (e) => {
+      this.onDragStart(e.element);
+    }), this.manager.on("drag", (e) => {
+      this.onDrag(e.element);
+    }), this.manager.on("dragEnd", (e) => {
+      this.onDragEnd(e.element);
+    });
+  }
+  /**
+   * Handle mouse enter - show docked container
+   */
+  onMouseEnter() {
+    const t = this.manager.getContainer();
+    this.isContainerDocked(t) && t.classList.add("edge-docked-visible");
+  }
+  /**
+   * Handle mouse leave - hide docked container
+   */
+  onMouseLeave() {
+    const t = this.manager.getContainer();
+    this.isContainerDocked(t) && t.classList.remove("edge-docked-visible");
+  }
+  /**
+   * Handle drag start - undock if docked
+   */
+  onDragStart(t) {
+    t.classList.remove(
+      "edge-dock-hint",
+      "edge-dock-blocked",
+      "edge-docked-visible",
+      "edge-dock-hint-top",
+      "edge-dock-hint-bottom",
+      "edge-dock-hint-left",
+      "edge-dock-hint-right"
+    );
+    const e = this.dockedContainers.get(t);
+    e && this.undockContainer(t, e);
+  }
+  /**
+   * Handle drag - update edge hints based on position
+   */
+  onDrag(t) {
+    const e = t.getBoundingClientRect(), i = this.getClosestEdge(e);
+    this.updateEdgeHints(t, i);
+  }
+  /**
+   * Handle drag end - dock if close to edge
+   */
+  onDragEnd(t) {
+    const e = t.getBoundingClientRect(), i = this.getClosestEdge(e);
+    t.classList.remove(
+      "edge-dock-hint",
+      "edge-dock-blocked",
+      "edge-dock-hint-top",
+      "edge-dock-hint-bottom",
+      "edge-dock-hint-left",
+      "edge-dock-hint-right"
+    ), i && !this.isEdgeOccupied(i) && this.dockContainer(t, i);
+  }
+  /**
+   * Update visual hints for edge docking
+   */
+  updateEdgeHints(t, e) {
+    t.classList.remove(
+      "edge-dock-hint",
+      "edge-dock-blocked",
+      "edge-dock-hint-top",
+      "edge-dock-hint-bottom",
+      "edge-dock-hint-left",
+      "edge-dock-hint-right"
+    ), e && (this.isEdgeOccupied(e) ? t.classList.add("edge-dock-hint", `edge-dock-hint-${e}`, "edge-dock-blocked") : t.classList.add("edge-dock-hint", `edge-dock-hint-${e}`));
+  }
+  /**
+   * Get the closest edge to the container
+   */
+  getClosestEdge(t) {
+    const e = t.top, i = t.left, s = window.innerHeight - t.bottom, r = window.innerWidth - t.right, h = Object.entries({
+      top: e,
+      bottom: s,
+      left: i,
+      right: r
+    }).filter(([d, l]) => l >= -this.edgeThreshold && l <= this.edgeThreshold).sort((d, l) => d[1] - l[1]);
+    return h.length > 0 ? h[0][0] : null;
+  }
+  /**
+   * Dock container to specified edge
+   */
+  dockContainer(t, e) {
+    const i = window.getComputedStyle(t), s = t.getBoundingClientRect(), r = {
+      x: s.left,
+      y: s.top
+    };
+    this.dockedContainers.set(t, {
+      element: t,
+      edge: e,
+      screenPosition: r,
+      originalPosition: {
+        top: parseFloat(i.top) || s.top,
+        left: parseFloat(i.left) || s.left,
+        width: s.width,
+        height: s.height,
+        transform: i.transform,
+        position: i.position
+      }
+    }), this.occupiedEdges.set(e, t), t.style.top = "", t.style.bottom = "", t.style.left = "", t.style.right = "", t.style.width = "", t.style.height = "", t.style.transform = "", t.classList.add("edge-docked", `edge-docked-${e}`), this.applyEdgePositioning(t, e, r), t.setAttribute("data-docked", "true"), t.setAttribute("data-docked-edge", e);
+  }
+  /**
+   * Apply proper positioning for each edge to prevent shifting
+   */
+  applyEdgePositioning(t, e, i) {
+    const s = t.getBoundingClientRect();
+    switch (e) {
+      case "top":
+        t.style.left = `${i.x}px`, t.style.width = `${s.width}px`;
+        break;
+      case "bottom":
+        t.style.left = `${i.x}px`, t.style.width = `${s.width}px`;
+        break;
+      case "left":
+        t.style.top = `${i.y}px`, t.style.height = `${s.height}px`;
+        break;
+      case "right":
+        t.style.top = `${i.y}px`, t.style.height = `${s.height}px`;
+        break;
+    }
+  }
+  /**
+   * Undock container from edge
+   */
+  undockContainer(t, e) {
+    this.dockedContainers.delete(t), this.occupiedEdges.set(e.edge, null), t.classList.remove(
+      "edge-docked",
+      "edge-docked-visible",
+      "edge-docked-top",
+      "edge-docked-bottom",
+      "edge-docked-left",
+      "edge-docked-right"
+    ), t.removeAttribute("data-docked"), t.removeAttribute("data-docked-edge"), t.style.top = "", t.style.bottom = "", t.style.left = "", t.style.right = "", t.style.width = "", t.style.height = "", t.style.transform = "", t.style.position = "", this.restoreOriginalPosition(t, e);
+  }
+  /**
+   * Restore container to its original position without shifting
+   */
+  restoreOriginalPosition(t, e) {
+    this.manager.setState({
+      x: e.screenPosition.x,
+      y: e.screenPosition.y,
+      width: e.originalPosition.width,
+      height: e.originalPosition.height
+    });
+  }
+  /**
+   * Get the docked container for a specific edge
+   */
+  getDockedContainer(t) {
+    const e = this.occupiedEdges.get(t);
+    return e && this.dockedContainers.get(e) || null;
+  }
+  /**
+   * Check if container is docked
+   */
+  isContainerDocked(t) {
+    return this.dockedContainers.has(t);
+  }
+  /**
+   * Get the edge where container is docked
+   */
+  getContainerDockEdge(t) {
+    const e = this.dockedContainers.get(t);
+    return e ? e.edge : null;
+  }
+  /**
+   * Clean up resources
+   */
+  destroy() {
+    const t = this.manager.getContainer();
+    t.removeEventListener("mouseenter", this.onMouseEnter.bind(this)), t.removeEventListener("mouseleave", this.onMouseLeave.bind(this)), this.dockedContainers.forEach((e, i) => {
+      this.undockContainer(i, e);
+    }), this.dockedContainers.clear(), this.occupiedEdges.forEach((e, i) => {
+      this.occupiedEdges.set(i, null);
+    });
+  }
+};
+a(R, "_pluginId", Symbol("EdgeDockingPlugin"));
+let j = R;
+const n = class n {
+  constructor() {
+    a(this, "manager");
+    a(this, "containerId");
+    a(this, "isDemoContainer", !1);
+    // Эффект для автоматического сохранения при изменении состояния
+    a(this, "autoSaveEffect");
+  }
+  get pluginId() {
+    return n._pluginId;
+  }
+  // Вычисляемое свойство для доступа к состояниям
+  static get containerStates() {
+    return n.reactiveState.containerStates;
+  }
+  static get closedQueue() {
+    return n.reactiveState.closedQueue;
+  }
+  static get demoContainers() {
+    return n.reactiveState.demoContainers;
+  }
+  /**
+   * Install plugin on container manager instance with reactive state management
+   */
+  install(t, e) {
+    if (this.manager = t, this.containerId = e == null ? void 0 : e.containerId, this.isDemoContainer = (e == null ? void 0 : e.isDemo) || !1, !this.containerId) {
+      console.warn("[StatePersistencePlugin] containerId is required for state persistence");
+      return;
+    }
+    n.containers.push({
+      manager: t,
+      containerId: this.containerId,
+      isDemo: this.isDemoContainer
+    }), this.isDemoContainer && n.registerDemoContainer(this.containerId), n.isGlobalEventsInitialized || (n.initializeGlobalEvents(), n.isGlobalEventsInitialized = !0), this.isDemoContainer && this.setupAutoSaveEffect(), this.bindContainerEvents();
+  }
+  /**
+   * Set up reactive auto-save effect for container state changes
+   */
+  setupAutoSaveEffect() {
+    if (!this.manager || !this.containerId) return;
+    const t = z(() => {
+      this.isDemoContainer && this.saveState();
+    }, 300);
+    this.autoSaveEffect = k(() => {
+      this.manager.getState(), this.manager.getMode(), t();
+    });
+  }
+  /**
+   * Bind to container-specific events to save state on changes
+   * Simplified since most saving handled using effects
+   */
+  bindContainerEvents() {
+    this.manager && (this.manager.on("dragStart", () => {
+    }), this.manager.on("dragEnd", () => {
+      this.isDemoContainer && this.saveState();
+    }), this.manager.on("resizeEnd", () => {
+      this.isDemoContainer && this.saveState();
+    }), this.manager.onPluginEvent("maximizeChanged", () => {
+      this.isDemoContainer && this.saveState();
+    }), this.manager.onPluginEvent("directionChanged", () => {
+      this.isDemoContainer && this.saveState();
+    }));
+  }
+  /**
+   * Initialize global event handlers for all containers
+   */
+  static initializeGlobalEvents() {
+    window.addEventListener("beforeunload", () => {
+      n.saveAllContainers();
+    }), document.addEventListener("visibilitychange", () => {
+      document.hidden && n.saveAllContainers();
+    }), window.addEventListener("resize", z(() => {
+      n.saveAllContainers();
+    }, 500));
+  }
+  /**
+   * Register a container as a demo container
+   */
+  static registerDemoContainer(t) {
+    try {
+      n.demoContainers.includes(t) || (n.demoContainers.push(t), n.saveDemoContainersToStorage());
+    } catch (e) {
+      console.error("[StatePersistencePlugin] Failed to register demo container:", e);
+    }
+  }
+  /**
+   * Save demo containers to localStorage
+   */
+  static saveDemoContainersToStorage() {
+    try {
+      localStorage.setItem(
+        n.DEMO_CONTAINERS_KEY,
+        JSON.stringify(n.demoContainers)
+      );
+    } catch (t) {
+      console.error("[StatePersistencePlugin] Failed to save demo containers:", t);
+    }
+  }
+  /**
+   * Get list of all demo containers
+   */
+  static getDemoContainers() {
+    try {
+      const t = localStorage.getItem(n.DEMO_CONTAINERS_KEY);
+      return t ? JSON.parse(t) : [];
+    } catch (t) {
+      return console.error("[StatePersistencePlugin] Failed to parse demo containers:", t), [];
+    }
+  }
+  /**
+   * Check if a container is a demo container
+   */
+  static isDemoContainer(t) {
+    return n.getDemoContainers().includes(t);
+  }
+  /**
+   * Get all saved states from localStorage
+   */
+  static getAllStates() {
+    try {
+      const t = localStorage.getItem(n.STORAGE_KEY);
+      return t ? JSON.parse(t) : {};
+    } catch (t) {
+      return console.error("[StatePersistencePlugin] Failed to parse stored states:", t), {};
+    }
+  }
+  /**
+   * Add container ID to closed containers queue
+   */
+  static addToClosedQueue(t) {
+    if (!n.isDemoContainer(t)) {
+      console.log(`[StatePersistencePlugin] Skipping closed queue for non-demo container: ${t}`);
+      return;
+    }
+    if (!n.getContainerState(t)) {
+      console.error(`[StatePersistencePlugin] Cannot add ${t} to closed queue: state not found`);
+      return;
+    }
+    const i = n.closedQueue, s = i.indexOf(t);
+    s > -1 && i.splice(s, 1), i.push(t), n.saveClosedQueueToStorage();
+  }
+  /**
+   * Save closed queue to localStorage
+   */
+  static saveClosedQueueToStorage() {
+    try {
+      localStorage.setItem(
+        n.CLOSED_QUEUE_KEY,
+        JSON.stringify(n.closedQueue)
+      );
+    } catch (t) {
+      console.error("[StatePersistencePlugin] Failed to save closed queue:", t);
+    }
+  }
+  /**
+   * Get closed containers queue (LIFO - last in first out)
+   */
+  static getClosedQueue() {
+    try {
+      const t = localStorage.getItem(n.CLOSED_QUEUE_KEY);
+      return t ? JSON.parse(t) : [];
+    } catch (t) {
+      return console.error("[StatePersistencePlugin] Failed to parse closed queue:", t), [];
+    }
+  }
+  saveState() {
+    !this.manager || !this.containerId || !this.isDemoContainer || D(() => {
+      var b;
+      n.reactiveState.isSaving = !0, n.reactiveState.pendingChanges = !0;
+      const t = this.manager.getContainer(), e = t.dataset.maximized === "true", i = this.manager.getState(), s = this.manager.getMode(), r = this.manager.getDirection(), o = t.dataset.containerType || "unknown", h = t.dataset.title, d = t.dataset.color, l = t.dataset.useSnapping === "true", S = (b = this.manager.config) == null ? void 0 : b.resize, E = t.parentElement, M = E && E !== document.body ? E.id || `parent-${this.containerId}` : void 0, w = {
+        ...i,
+        mode: s,
+        draggingDirection: r,
+        isMaximized: e,
+        containerType: o,
+        title: h,
+        color: d,
+        useSnapping: l,
+        isClosed: !1,
+        parentElementId: M,
+        closedTimestamp: 0,
+        resize: S,
+        isDemoContainer: !0
+      };
+      n.reactiveState.containerStates[this.containerId] = w;
+      const p = n.getAllStates();
+      p[this.containerId] = w, localStorage.setItem(
+        n.STORAGE_KEY,
+        JSON.stringify(p)
+      ), n.reactiveState.lastSaved = Date.now(), n.reactiveState.isSaving = !1;
+    });
+  }
+  /**
+   * Save container state with current manager state before closing
+   */
+  static saveContainerStateBeforeClose(t, e) {
+    var Y, B, F;
+    const i = t.getState(), s = t.getMode();
+    if (!n.isDemoContainer(e)) {
+      n.containers = n.containers.filter(
+        (T) => T.containerId !== e
+      );
+      return;
+    }
+    const o = t.getContainer(), h = t.getDirection(), d = o.dataset.maximized === "true", l = o.dataset.containerType || "unknown", S = o.dataset.title, E = o.dataset.color, M = o.dataset.useSnapping === "true", w = (Y = t.config) == null ? void 0 : Y.resize, p = ((B = t.isEdgeDocked) == null ? void 0 : B.call(t)) || !1, b = ((F = t.getDockEdge) == null ? void 0 : F.call(t)) || null, C = o.parentElement, q = C && C !== document.body ? C.id || `parent-${e}` : void 0, A = {
+      ...i,
+      mode: s,
+      draggingDirection: h,
+      isMaximized: d,
+      isEdgeDocked: p,
+      dockEdge: b || void 0,
+      containerType: l,
+      title: S,
+      color: E,
+      useSnapping: M,
+      isClosed: !0,
+      parentElementId: q,
+      closedTimestamp: Date.now(),
+      resize: w,
+      isDemoContainer: !0
+    }, N = n.getAllStates();
+    N[e] = A;
+    try {
+      localStorage.setItem(
+        n.STORAGE_KEY,
+        JSON.stringify(N)
+      );
+    } catch (T) {
+      console.error("[StatePersistencePlugin] Failed to save to localStorage:", T);
+    }
+    n.reactiveState.containerStates[e] = A, n.containers = n.containers.filter(
+      (T) => T.containerId !== e
+    ), n.addToClosedQueue(e);
+  }
+  /**
+   * Save all containers state (for global events) - including closed ones
+   */
+  static saveAllContainers() {
+    D(() => {
+      const t = n.getAllStates();
+      n.containers.filter(({ isDemo: e }) => e).forEach(({ manager: e, containerId: i }) => {
+        var C;
+        const s = e.getState(), r = e.getMode(), o = e.getContainer(), h = e.getDirection(), d = o.dataset.maximized === "true", l = o.dataset.containerType || "unknown", S = o.dataset.title, E = o.dataset.color, M = o.dataset.useSnapping === "true", w = (C = e.config) == null ? void 0 : C.resize, p = o.parentElement, b = p && p !== document.body ? p.id || `parent-${i}` : void 0;
+        t[i] = {
+          ...s,
+          mode: r,
+          draggingDirection: h,
+          isMaximized: d,
+          containerType: l,
+          title: S,
+          color: E,
+          useSnapping: M,
+          isClosed: !1,
+          parentElementId: b,
+          closedTimestamp: 0,
+          resize: w,
+          isDemoContainer: !0
+        };
+      }), n.reactiveState.containerStates = t, localStorage.setItem(
+        n.STORAGE_KEY,
+        JSON.stringify(t)
+      ), n.reactiveState.lastSaved = Date.now();
+    });
+  }
+  /**
+   * Remove the most recently closed container from queue and return its ID
+   */
+  static popLastClosedContainer() {
+    try {
+      const t = n.closedQueue;
+      if (t.length === 0) return null;
+      const e = t.pop();
+      return n.saveClosedQueueToStorage(), e;
+    } catch (t) {
+      return console.error("[StatePersistencePlugin] Failed to pop last closed container:", t), null;
+    }
+  }
+  /**
+   * Check if there are any closed containers that can be restored
+   */
+  static hasClosedContainers() {
+    return n.closedQueue.length > 0;
+  }
+  /**
+   * Get saved state for specific container (including closed ones)
+   */
+  static getContainerState(t) {
+    try {
+      const e = n.containerStates[t];
+      if (e) return e;
+      const s = n.getAllStates()[t];
+      return s ? (n.reactiveState.containerStates[t] = s, s) : null;
+    } catch (e) {
+      return console.error("[StatePersistencePlugin] Failed to get container state:", e), null;
+    }
+  }
+  /**
+   * Get all container states including closed ones
+   */
+  static getAllContainerStates() {
+    return n.getAllStates();
+  }
+  /**
+   * Check if container state exists (including closed)
+   */
+  static hasContainerState(t) {
+    return n.getContainerState(t) !== null;
+  }
+  /**
+   * Update container state in storage
+   */
+  static updateContainerState(t, e) {
+    try {
+      const i = n.getAllStates(), s = i[t];
+      if (s) {
+        const r = { ...s, ...e };
+        i[t] = r, localStorage.setItem(
+          n.STORAGE_KEY,
+          JSON.stringify(i)
+        ), n.reactiveState.containerStates[t] = r;
+      } else {
+        console.warn(`[StatePersistencePlugin] No state found for container ${t}, creating new state`);
+        const r = {
+          x: 0,
+          y: 0,
+          width: 300,
+          height: 200,
+          mode: "smooth",
+          draggingDirection: "all",
+          isMaximized: !1,
+          containerType: "unknown",
+          isClosed: !1,
+          isDemoContainer: n.isDemoContainer(t),
+          ...e
+        };
+        i[t] = r, localStorage.setItem(
+          n.STORAGE_KEY,
+          JSON.stringify(i)
+        ), n.reactiveState.containerStates[t] = r;
+      }
+    } catch (i) {
+      console.error("[StatePersistencePlugin] Failed to update container state:", i);
+    }
+  }
+  /**
+   * Clear all saved states from localStorage
+   */
+  static clearStorage() {
+    D(() => {
+      n.reactiveState.containerStates = {}, n.closedQueue.length = 0, n.demoContainers.length = 0, n.reactiveState.isSaving = !1, n.reactiveState.lastSaved = null, n.reactiveState.pendingChanges = !1;
+    }), localStorage.removeItem(n.STORAGE_KEY), localStorage.removeItem(n.CLOSED_QUEUE_KEY), localStorage.removeItem(n.DEMO_CONTAINERS_KEY), n.containers = [];
+  }
+  /**
+   * Initialize reactive state from localStorage on plugin load
+   */
+  static initializeReactiveState() {
+    try {
+      const t = n.getAllStates(), e = n.getClosedQueue(), i = n.getDemoContainers();
+      D(() => {
+        n.reactiveState.containerStates = t, n.closedQueue.length = 0, n.closedQueue.push(...e), n.demoContainers.length = 0, n.demoContainers.push(...i);
+      });
+    } catch (t) {
+      console.error("[StatePersistencePlugin] Failed to initialize reactive state:", t);
+    }
+  }
+  /**
+   * Get plugin metrics and statistics
+   */
+  static getMetrics() {
+    return {
+      totalContainers: Object.keys(n.containerStates).length,
+      demoContainers: n.demoContainers.length,
+      closedContainers: n.closedQueue.length,
+      lastSaved: n.reactiveState.lastSaved,
+      isSaving: n.reactiveState.isSaving
+    };
+  }
+  /**
+   * Debug method to check the current state of localStorage
+   */
+  static debugStorage() {
+    console.log("[StatePersistencePlugin] === START DEBUG INFO ===");
+    try {
+      const t = localStorage.getItem(n.STORAGE_KEY);
+      if (t) {
+        const s = JSON.parse(t);
+        console.log(`[StatePersistencePlugin] Number of states: ${Object.keys(s).length}`), console.log("[StatePersistencePlugin] State keys:", Object.keys(s));
+        for (const [r, o] of Object.entries(s))
+          console.log(`[StatePersistencePlugin] State ${r}:`, {
+            isDemoContainer: o.isDemoContainer,
+            isClosed: o.isClosed,
+            title: o.title
+          });
+      }
+      const e = localStorage.getItem(n.CLOSED_QUEUE_KEY);
+      console.log("[StatePersistencePlugin] Closed queue:", e ? JSON.parse(e) : []);
+      const i = localStorage.getItem(n.DEMO_CONTAINERS_KEY);
+      console.log("[StatePersistencePlugin] Demo containers:", i ? JSON.parse(i) : []);
+    } catch (t) {
+      console.error("[StatePersistencePlugin] Debug error:", t);
+    }
+    console.log("[StatePersistencePlugin] === END DEBUG INFO ===");
+  }
+  /**
+   * Clean up plugin resources
+   */
+  destroy() {
+    this.autoSaveEffect && (this.autoSaveEffect(), this.autoSaveEffect = void 0), this.containerId && (n.containers = n.containers.filter(
+      (t) => t.containerId !== this.containerId
+    ));
+  }
+};
+a(n, "_pluginId", Symbol("StatePersistencePlugin")), a(n, "STORAGE_KEY", "containerManagerState"), a(n, "CLOSED_QUEUE_KEY", "containerManagerClosedQueue"), a(n, "DEMO_CONTAINERS_KEY", "containerManagerDemoContainers"), // Статическое реактивное состояние для всех плагинов
+a(n, "reactiveState", $({
+  isSaving: !1,
+  lastSaved: null,
+  pendingChanges: !1,
+  containerStates: {},
+  closedQueue: [],
+  demoContainers: []
+})), a(n, "isGlobalEventsInitialized", !1), a(n, "containers", []);
+let H = n;
+H.initializeReactiveState();
+const L = class L {
+  constructor() {
+    a(this, "manager");
+    a(this, "containerName", "");
+    a(this, "notificationSystem", null);
+  }
+  get pluginId() {
+    return L._pluginId;
+  }
+  /**
+   * Install plugin on container manager instance
+   */
+  install(t, e) {
+    this.manager = t, this.containerName = (e == null ? void 0 : e.containerName) || `Container-${Math.random().toString(36).substring(2, 11)}`, this.notificationSystem = e == null ? void 0 : e.notificationSystem, this.bindEvents();
+  }
+  /**
+   * Bind to container events
+   */
+  bindEvents() {
+    this.manager && (this.logResize = z(this.logResize.bind(this), 250), this.logDrag = z(this.logDrag.bind(this), 250), this.logViewportResize = z(this.logViewportResize.bind(this), 250), this.logSnapStep = z(this.logSnapStep.bind(this), 250), this.manager.on("modeChange", (t) => {
+      this.logModeChange(t.mode);
+    }), this.manager.on("resize", (t) => {
+      this.logResize(t.state);
+    }), this.manager.on("resizeEnd", (t) => {
+      this.logResize(t.state);
+    }), this.manager.on("drag", (t) => {
+      this.logDrag(t.state);
+    }), this.manager.on("dragEnd", (t) => {
+      this.logDrag(t.state);
+    }), this.manager.on("viewportResize", (t) => {
+      this.logViewportResize(t.state);
+    }), this.manager.onPluginEvent("snappingEnabledChanged", (t) => {
+      this.logSnappingEnabled(t.enabled);
+    }), this.manager.onPluginEvent("snapStepChanged", (t) => {
+      this.logSnapStep(t.snapStep);
+    }), this.manager.onPluginEvent("directionChanged", (t) => {
+      this.logDirectionChange(t.direction);
+    }));
+  }
+  /**
+   * Log resize event
+   */
+  logResize(t) {
+    const e = `Resized to ${Math.round(t.width)}×${Math.round(t.height)}`;
+    this.showNotification(e, "info");
+  }
+  /**
+   * Log drag event
+   */
+  logDrag(t) {
+    const e = `Moved to (${Math.round(t.x)}, ${Math.round(t.y)})`;
+    this.showNotification(e, "info");
+  }
+  /**
+   * Log mode change event
+   */
+  logModeChange(t) {
+    const e = `Mode changed to ${t}`;
+    this.showNotification(e, "warning");
+  }
+  /**
+   * Log viewport resize adjustment event
+   */
+  logViewportResize(t) {
+    const e = `Adjusted position to (${Math.round(t.x)}, ${Math.round(t.y)}) due to window resize`;
+    this.showNotification(e, "info");
+  }
+  /**
+   * Log snapping enabled/disabled
+   */
+  logSnappingEnabled(t) {
+    const e = `Snapping ${t ? "enabled" : "disabled"}`;
+    this.showNotification(e, t ? "success" : "warning");
+  }
+  /**
+   * Log snap step change
+   */
+  logSnapStep(t) {
+    const e = `Snap step changed to ${t}px`;
+    this.showNotification(e, "info");
+  }
+  /**
+   * Log direction change
+   */
+  logDirectionChange(t) {
+    const e = `Drag direction: ${t}`;
+    this.showNotification(e, "info");
+  }
+  /**
+   * Show notification using notification system
+   */
+  showNotification(t, e) {
+    if (this.notificationSystem) {
+      const i = `${this.containerName}: ${t}`;
+      this.notificationSystem.show(i, e);
+    }
+  }
+};
+a(L, "_pluginId", Symbol("LoggingPlugin"));
+let K = L;
 export {
-  I as ContainerInitializer,
-  E as ContainerManager,
-  k as ContentCreator,
-  A as TemplateLoader
+  pt as ContainerInitializer,
+  V as ContainerManager,
+  vt as ContentCreator,
+  j as EdgeDockingPlugin,
+  K as LoggingPlugin,
+  it as NotificationSystem,
+  U as SnappingPlugin,
+  H as StatePersistencePlugin,
+  ft as StatsManager,
+  J as TemplateLoader,
+  lt as getState,
+  Et as getTemplateLoader,
+  St as initializeTemplateSystem
 };
 //# sourceMappingURL=index.es.js.map