@alekstar79/draggable-resizable-container 1.0.3 → 1.0.4

package/dist/index.es.js

@@ -1,11 +1,11 @@
 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 r = (c, t, e) => _(c, typeof t != "symbol" ? t + "" : t, e);
-import Q, { reactive as I, computed as tt, effect as x, batch as T } from "@alekstar79/reactive-event-system";
-import { clamp as f, deepMerge as et, debounce as z } from "@alekstar79/utility";
+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) {
-    r(this, "container");
+    a(this, "container");
     this.container = t || this.createContainer();
   }
   /**
@@ -24,8 +24,8 @@ class it {
   show(t, e = "info") {
     const i = document.createElement("li"), s = this.removeToast.bind(this, i);
     i.innerHTML = this.getToastHTML(t, e), i.className = `toast ${e}`, i.timeoutId = window.setTimeout(s, 4e3);
-    const a = i.querySelector(".icon");
-    a && a.addEventListener("click", s), this.container.appendChild(i);
+    const r = i.querySelector(".icon");
+    r && r.addEventListener("click", s), this.container.appendChild(i);
   }
   /**
    * Generate toast HTML based on type
@@ -65,14 +65,14 @@ class pt {
   /**
    * Create container element with proper initialization
    */
-  static createContainerElement(t, e, i, s, a) {
+  static createContainerElement(t, e, i, s, r) {
     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`), a && (o.style.borderColor = a), o;
+    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 ft {
+class vt {
   constructor(t) {
-    r(this, "templateLoader");
+    a(this, "templateLoader");
     this.templateLoader = t;
   }
   /**
@@ -91,8 +91,8 @@ class ft {
       else if (t.template)
         try {
           s.innerHTML = await this.templateLoader.loadTemplate(t.template);
-        } catch (a) {
-          console.error(`[ContentCreator] Failed to load template: ${t.template}`, a), s.innerHTML = `<div class="template-error">Failed to load template: ${t.template}</div>`;
+        } catch (r) {
+          console.error(`[ContentCreator] Failed to load template: ${t.template}`, r), s.innerHTML = `<div class="template-error">Failed to load template: ${t.template}</div>`;
         }
       return s;
     } catch (i) {
@@ -106,8 +106,84 @@ class ft {
     this.templateLoader = t;
   }
 }
+class ft {
+  constructor() {
+    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 $ {
+class I {
   constructor() {
     m(this, "templates", /* @__PURE__ */ new Map()), m(this, "lastUpdated", /* @__PURE__ */ new Map());
   }
@@ -138,7 +214,7 @@ class $ {
     return (e = this.templates.get(t)) == null ? void 0 : e.metadata;
   }
 }
-class rt {
+class at {
   constructor(t = 36e5) {
     m(this, "cache", /* @__PURE__ */ new Map()), m(this, "ttl"), this.ttl = t;
   }
@@ -161,7 +237,7 @@ class rt {
 }
 class J {
   constructor(t, e = {}) {
-    m(this, "cache"), m(this, "config"), m(this, "metrics"), m(this, "retryQueue", /* @__PURE__ */ new Map()), m(this, "registry"), this.registry = t ?? new $(), this.cache = new rt(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;
@@ -177,13 +253,13 @@ class J {
       if (o) return this.metrics.totalHits++, this.updateCacheHitRate(), o;
     }
     this.metrics.totalMisses++;
-    const a = this.registry.get(t);
-    if (!a) {
+    const r = this.registry.get(t);
+    if (!r) {
       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 o = typeof a.source == "function" ? await a.source() : a.source;
+      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;
@@ -234,8 +310,8 @@ class J {
   }
 }
 let u;
-async function at(c = []) {
-  const t = new $();
+async function rt(c = []) {
+  const t = new I();
   let e = {};
   try {
     e = /* @__PURE__ */ Object.assign({
@@ -244,14 +320,14 @@ async function at(c = []) {
       "../demo/templates/tasks.html": () => import("./tasks-dygJ8dHT.js").then((s) => s.default)
     });
     const i = {};
-    Object.entries(e).forEach(([s, a]) => {
+    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 a == "function" ? await a() : String(a));
+      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: a }) => {
-      t.register({ name: s, source: a });
+    console.error("[TemplateLoader] Failed to load templates:", i), c.forEach(({ name: s, source: r }) => {
+      t.register({ name: s, source: r });
     });
   }
   return new J(t, {
@@ -265,7 +341,7 @@ async function at(c = []) {
   });
 }
 function ot() {
-  const c = new $();
+  const c = new I();
   return new J(c, {
     environment: "production",
     cache: !0,
@@ -277,9 +353,9 @@ function ot() {
     }
   });
 }
-async function vt() {
+async function St() {
   return u || (// @ts-ignore - Vite environment variable
-  typeof process < "u" && process.env && process.env.NODE_ENV === "development" ? u = await at() : (u = ot(), u.registry.register({
+  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: {
@@ -297,7 +373,7 @@ async function vt() {
     }
   })), u);
 }
-function St() {
+function Et() {
   if (!u)
     throw new Error("Template system not initialized. Call initializeTemplateSystem() first.");
   return u;
@@ -307,19 +383,19 @@ function ct(c, [t, e]) {
 }
 class W {
   constructor(t) {
-    r(this, "source", "cursor");
-    r(this, "element", null);
-    r(this, "top", !1);
-    r(this, "right", !1);
-    r(this, "bottom", !1);
-    r(this, "left", !1);
-    r(this, "edge", null);
+    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() {
-    r(this, "listeners", {});
+    a(this, "listeners", {});
   }
   on(t, e) {
     return this.listeners[t] || (this.listeners[t] = /* @__PURE__ */ new Set()), this.listeners[t].add(e), () => {
@@ -332,8 +408,8 @@ class X {
     (i = this.listeners[t]) == null || i.forEach((s) => {
       try {
         s(e);
-      } catch (a) {
-        console.error(`Error in event listener for ${String(t)}:`, a);
+      } catch (r) {
+        console.error(`Error in event listener for ${String(t)}:`, r);
       }
     });
   }
@@ -347,15 +423,15 @@ class X {
 }
 class ht {
   constructor(t = 50, e, i = null) {
-    r(this, "root");
-    r(this, "edgeThreshold");
-    r(this, "targets", /* @__PURE__ */ new Set());
-    r(this, "currentEdges", /* @__PURE__ */ new Map());
-    r(this, "rafId", null);
-    r(this, "isActive", !1);
-    r(this, "callbacks", /* @__PURE__ */ new Set());
-    r(this, "currentMousePos", { x: 0, y: 0 });
-    r(this, "currentCursorEdge", {
+    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,
@@ -475,14 +551,14 @@ class ht {
    * Check the boundaries of an element
    */
   checkElementBoundaries(t) {
-    const { width: e, height: i } = this.getViewportSize(), s = this.getRelativeRect(t), a = {
+    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(a, s, e, i), a;
+    return this.determineEdge(r, s, e, i), r;
   }
   /**
    * Check the boundaries of a cursor
@@ -507,11 +583,11 @@ class ht {
    * Determine a priority edge-side (or several)
    */
   determineEdge(t, e, i, s) {
-    const a = [];
-    if (t.top && a.push("top"), t.right && a.push("right"), t.bottom && a.push("bottom"), t.left && a.push("left"), a.length === 0)
+    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 (a.length === 1)
-      t.edge = a[0];
+    else if (r.length === 1)
+      t.edge = r[0];
     else {
       const o = {
         top: e.top,
@@ -519,7 +595,7 @@ class ht {
         bottom: s - e.bottom,
         left: e.left
       };
-      t.edge = a.reduce(
+      t.edge = r.reduce(
         (h, d) => o[d] < o[h] ? d : h
       );
     }
@@ -546,8 +622,8 @@ class ht {
 const y = class y extends ht {
   constructor(e, i) {
     super(e, i);
-    r(this, "lastEdge", {});
-    r(this, "emitter", null);
+    a(this, "lastEdge", {});
+    a(this, "emitter", null);
     this.onChange(this.onBoundaryChange.bind(this)), this.start();
   }
   static init(e, i) {
@@ -586,7 +662,7 @@ const y = class y extends ht {
     return this.lastEdge;
   }
 };
-r(y, "instance");
+a(y, "instance");
 let P = y;
 function dt(c = {}, t = []) {
   const e = P.init(c.edgeThreshold, t);
@@ -596,7 +672,7 @@ function dt(c = {}, t = []) {
 }
 const g = class g {
   constructor() {
-    r(this, "draggable", []);
+    a(this, "draggable", []);
   }
   zIndex(t) {
     return `${g.highestZIndex + this.draggable.findIndex((e) => e === t)}`;
@@ -611,9 +687,9 @@ const g = class g {
     return this.draggable.sort((e, i) => e === t ? 1 : i === t ? -1 : 0), this;
   }
 };
-r(g, "inatance"), r(g, "highestZIndex", 1e3), r(g, "init", () => g.inatance ?? (g.inatance = new g()));
+a(g, "inatance"), a(g, "highestZIndex", 1e3), a(g, "init", () => g.inatance ?? (g.inatance = new g()));
 let O = g;
-function V() {
+function G() {
   return {
     width: window.innerWidth || document.documentElement.clientWidth,
     height: window.innerHeight || document.documentElement.clientHeight
@@ -622,7 +698,7 @@ function V() {
 function lt() {
   return O.init();
 }
-const v = class v {
+const f = class f {
   /**
    * Create a new container manager instance with reactive state management
    * @param container - HTML element to manage
@@ -630,27 +706,27 @@ const v = class v {
    */
   constructor(t, e = {}) {
     // Streams for reactive event handling
-    r(this, "dragStream");
-    r(this, "resizeStream");
-    r(this, "stateChangeStream");
-    r(this, "eventEmitter");
-    r(this, "pluginEventEmitter");
-    r(this, "config");
-    r(this, "container");
-    r(this, "dragHandle");
-    r(this, "resizeHandles", /* @__PURE__ */ new Map());
-    r(this, "installedPlugins", /* @__PURE__ */ new Set());
-    r(this, "reactiveEffects", []);
-    r(this, "isDragging", !1);
-    r(this, "isResizing", !1);
-    r(this, "resizeDirection", null);
-    r(this, "startX", 0);
-    r(this, "startY", 0);
-    r(this, "startState");
-    r(this, "resizeObserver", null);
-    r(this, "parentResizeObserver", null);
-    r(this, "zIndexState");
-    r(this, "reactiveState", I({
+    a(this, "dragStream");
+    a(this, "resizeStream");
+    a(this, "stateChangeStream");
+    a(this, "eventEmitter");
+    a(this, "pluginEventEmitter");
+    a(this, "config");
+    a(this, "container");
+    a(this, "dragHandle");
+    a(this, "resizeHandles", /* @__PURE__ */ new Map());
+    a(this, "installedPlugins", /* @__PURE__ */ new Set());
+    a(this, "reactiveEffects", []);
+    a(this, "isDragging", !1);
+    a(this, "isResizing", !1);
+    a(this, "resizeDirection", null);
+    a(this, "startX", 0);
+    a(this, "startY", 0);
+    a(this, "startState");
+    a(this, "resizeObserver", null);
+    a(this, "parentResizeObserver", null);
+    a(this, "zIndexState");
+    a(this, "reactiveState", $({
       x: 0,
       y: 0,
       width: 0,
@@ -659,28 +735,28 @@ const v = class v {
       draggingDirection: "all"
     }));
     // Computed state with applied constraints
-    r(this, "constrainedState", tt(() => {
+    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 = f(
+      if (e.width = v(
         t.width,
-        i.minWidth || v.MINWIDTH,
+        i.minWidth || f.MINWIDTH,
         i.maxWidth || 1 / 0
-      ), e.height = f(
+      ), e.height = v(
         t.height,
-        i.minHeight || v.MINHEIGHT,
+        i.minHeight || f.MINHEIGHT,
         i.maxHeight || 1 / 0
       ), this.shouldConstrainToViewport()) {
-        const a = V();
-        e.x = f(t.x, 0, a.width - e.width), e.y = f(t.y, 0, a.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
-    r(this, "domUpdateEffect", x(() => {
+    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", {
@@ -697,8 +773,8 @@ const v = class v {
       draggingDirection: "all",
       constrainToParent: !1,
       boundaries: {
-        minWidth: v.MINWIDTH,
-        minHeight: v.MINHEIGHT
+        minWidth: f.MINWIDTH,
+        minHeight: f.MINHEIGHT
       },
       autoAdjust: {
         enabled: !1,
@@ -742,7 +818,7 @@ const v = class v {
    */
   handleViewportResize() {
     if (!this.shouldConstrainToViewport()) return;
-    const t = V(), 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",
@@ -767,17 +843,17 @@ const v = class v {
   handleParentResize(t) {
     const { autoAdjust: e } = this.config;
     if (!(e != null && e.enabled)) return;
-    const i = t.contentRect, a = { ...this.getState() };
+    const i = t.contentRect, r = { ...this.getState() };
     let o = !1;
     if (e.width) {
       const h = this.getMaxWidthConstraint(), d = Math.min(i.width, h);
-      Math.abs(a.width - d) > 1 && (a.width = d, o = !0);
+      Math.abs(r.width - d) > 1 && (r.width = d, o = !0);
     }
     if (e.height) {
       const h = this.getMaxHeightConstraint(), d = Math.min(i.height, h);
-      Math.abs(a.height - d) > 1 && (a.height = d, o = !0);
+      Math.abs(r.height - d) > 1 && (r.height = d, o = !0);
     }
-    o && (this.setState(a), this.eventEmitter.emit("autoAdjust", {
+    o && (this.setState(r), this.eventEmitter.emit("autoAdjust", {
       type: "autoAdjust",
       state: this.getState(),
       mode: this.reactiveState.mode,
@@ -919,12 +995,12 @@ const v = class v {
     const i = e.getBoundingClientRect();
     if (i.width === 0 || i.height === 0)
       return t;
-    const s = Math.max(0, i.width - t.width), a = Math.max(0, i.height - t.height), o = 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: f(t.x, 0, s),
-      y: f(t.y, 0, a),
-      width: f(t.width, 0, o),
-      height: f(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)
     };
   }
   /**
@@ -989,11 +1065,11 @@ const v = class v {
    * Setup reactive monitoring for container metrics
    */
   setupReactiveMonitoring() {
-    const t = x(() => {
+    const t = k(() => {
       const { state: i } = this.stateChangeStream;
     });
     this.reactiveEffects.push(t);
-    const e = x(() => {
+    const e = k(() => {
       const i = this.eventEmitter.getMetrics();
       i.state.errorCount > 10 && console.warn("[ContainerManager] High error count in event system:", i.state.errorCount);
     });
@@ -1099,7 +1175,7 @@ const v = class v {
     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, a = i - this.startY, o = this.applyMovementMode(s, a);
+    ), 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(),
@@ -1137,7 +1213,7 @@ const v = class v {
    */
   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, a = i - this.startY, o = this.calculateResizeState(s, a, this.resizeDirection);
+    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(),
@@ -1173,10 +1249,10 @@ const v = class v {
    * Resolve coordinates based on current direction mode
    */
   directionResolver(t, e) {
-    const i = this.reactiveState.draggingDirection, s = i === "vertical", a = i === "horizontal";
+    const i = this.reactiveState.draggingDirection, s = i === "vertical", r = i === "horizontal";
     return {
       clientX: s ? this.startX : t,
-      clientY: a ? this.startY : e
+      clientY: r ? this.startY : e
     };
   }
   /**
@@ -1274,11 +1350,11 @@ const v = class v {
     const t = this.container.parentElement.getBoundingClientRect(), e = this.getState();
     if (t.width === 0 || t.height === 0)
       return;
-    const i = e.width, s = e.height, a = Math.min(i, t.width), o = Math.min(s, t.height), h = e.x, d = e.y, l = Math.min(h, t.width - a), S = Math.min(d, t.height - o);
+    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: l,
       y: S,
-      width: a,
+      width: r,
       height: o
     }), this.eventEmitter.emit("parentRecalculated", {
       type: "parentRecalculated",
@@ -1320,25 +1396,25 @@ const v = class v {
     }), 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);
   }
 };
-r(v, "MINWIDTH", 200), r(v, "MINHEIGHT", 45);
-let G = v;
-const k = class k {
+a(f, "MINWIDTH", 200), a(f, "MINHEIGHT", 45);
+let V = f;
+const x = class x {
   constructor(t = {}) {
     // Plugin state
-    r(this, "reactiveState", I({
+    a(this, "reactiveState", $({
       snapStep: 10,
       enabled: !0,
       isActive: !1,
       lastPosition: null
     }));
-    r(this, "manager");
-    r(this, "startState", null);
-    r(this, "startX", 0);
-    r(this, "startY", 0);
+    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 k._pluginId;
+    return x._pluginId;
   }
   /**
    * Install plugin on container manager instance with reactive state
@@ -1362,9 +1438,9 @@ const k = class k {
    * Handle drag start event with snapping support
    */
   onDragStart(t) {
-    var s, a;
+    var s, r;
     if (!this.manager || this.manager.getMode() === "pinned") return;
-    t.preventDefault(), (a = (s = this.manager).bringToFront) == null || a.call(s), this.reactiveState.isActive = !0;
+    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",
@@ -1381,14 +1457,14 @@ const k = class k {
       t instanceof MouseEvent ? t.clientX : t.touches[0].clientX,
       t instanceof MouseEvent ? t.clientY : t.touches[0].clientY
     );
-    let s = e - this.startX, a = i - this.startY;
+    let s = e - this.startX, r = i - this.startY;
     if (this.reactiveState.enabled) {
-      const d = this.applySnapping(s, a);
-      s = d.deltaX, a = d.deltaY;
+      const d = this.applySnapping(s, r);
+      s = d.deltaX, r = d.deltaY;
     }
     const o = {
       x: this.startState.x + s,
-      y: this.startState.y + a,
+      y: this.startState.y + r,
       width: this.startState.width,
       height: this.startState.height
     }, h = this.manager.config;
@@ -1450,15 +1526,15 @@ const k = class k {
     this.reactiveState.isActive = !1, this.reactiveState.lastPosition = null;
   }
 };
-r(k, "_pluginId", Symbol("SnappingPlugin"));
-let U = k;
+a(x, "_pluginId", Symbol("SnappingPlugin"));
+let U = x;
 const R = class R {
   constructor(t = {}) {
-    r(this, "dockedContainers", /* @__PURE__ */ new Map());
-    r(this, "occupiedEdges", /* @__PURE__ */ new Map());
-    r(this, "tracker", dt({ emitter: !0, edgeThreshold: 20 }));
-    r(this, "manager");
-    r(this, "edgeThreshold");
+    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() {
@@ -1571,11 +1647,11 @@ const R = class R {
    * Get the closest edge to the container
    */
   getClosestEdge(t) {
-    const e = t.top, i = t.left, s = window.innerHeight - t.bottom, a = window.innerWidth - t.right, h = Object.entries({
+    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: a
+      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;
   }
@@ -1583,14 +1659,14 @@ const R = class R {
    * Dock container to specified edge
    */
   dockContainer(t, e) {
-    const i = window.getComputedStyle(t), s = t.getBoundingClientRect(), a = {
+    const i = window.getComputedStyle(t), s = t.getBoundingClientRect(), r = {
       x: s.left,
       y: s.top
     };
     this.dockedContainers.set(t, {
       element: t,
       edge: e,
-      screenPosition: a,
+      screenPosition: r,
       originalPosition: {
         top: parseFloat(i.top) || s.top,
         left: parseFloat(i.left) || s.left,
@@ -1599,7 +1675,7 @@ const R = class R {
         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, a), t.setAttribute("data-docked", "true"), t.setAttribute("data-docked-edge", e);
+    }), 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
@@ -1677,15 +1753,15 @@ const R = class R {
     });
   }
 };
-r(R, "_pluginId", Symbol("EdgeDockingPlugin"));
+a(R, "_pluginId", Symbol("EdgeDockingPlugin"));
 let j = R;
 const n = class n {
   constructor() {
-    r(this, "manager");
-    r(this, "containerId");
-    r(this, "isDemoContainer", !1);
+    a(this, "manager");
+    a(this, "containerId");
+    a(this, "isDemoContainer", !1);
     // Эффект для автоматического сохранения при изменении состояния
-    r(this, "autoSaveEffect");
+    a(this, "autoSaveEffect");
   }
   get pluginId() {
     return n._pluginId;
@@ -1722,7 +1798,7 @@ const n = class n {
     const t = z(() => {
       this.isDemoContainer && this.saveState();
     }, 300);
-    this.autoSaveEffect = x(() => {
+    this.autoSaveEffect = k(() => {
       this.manager.getState(), this.manager.getMode(), t();
     });
   }
@@ -1845,13 +1921,13 @@ const n = class n {
     }
   }
   saveState() {
-    !this.manager || !this.containerId || !this.isDemoContainer || T(() => {
-      var C;
+    !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(), a = this.manager.getDirection(), o = t.dataset.containerType || "unknown", h = t.dataset.title, d = t.dataset.color, l = t.dataset.useSnapping === "true", S = (C = this.manager.config) == null ? void 0 : C.resize, E = t.parentElement, M = E && E !== document.body ? E.id || `parent-${this.containerId}` : void 0, w = {
+      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: a,
+        draggingDirection: r,
         isMaximized: e,
         containerType: o,
         title: h,
@@ -1879,17 +1955,17 @@ const n = class n {
     const i = t.getState(), s = t.getMode();
     if (!n.isDemoContainer(e)) {
       n.containers = n.containers.filter(
-        (D) => D.containerId !== e
+        (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, C = ((F = t.getDockEdge) == null ? void 0 : F.call(t)) || null, b = o.parentElement, q = b && b !== document.body ? b.id || `parent-${e}` : void 0, A = {
+    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: C || void 0,
+      dockEdge: b || void 0,
       containerType: l,
       title: S,
       color: E,
@@ -1906,25 +1982,25 @@ const n = class n {
         n.STORAGE_KEY,
         JSON.stringify(N)
       );
-    } catch (D) {
-      console.error("[StatePersistencePlugin] Failed to save to localStorage:", D);
+    } catch (T) {
+      console.error("[StatePersistencePlugin] Failed to save to localStorage:", T);
     }
     n.reactiveState.containerStates[e] = A, n.containers = n.containers.filter(
-      (D) => D.containerId !== e
+      (T) => T.containerId !== e
     ), n.addToClosedQueue(e);
   }
   /**
    * Save all containers state (for global events) - including closed ones
    */
   static saveAllContainers() {
-    T(() => {
+    D(() => {
       const t = n.getAllStates();
       n.containers.filter(({ isDemo: e }) => e).forEach(({ manager: e, containerId: i }) => {
-        var b;
-        const s = e.getState(), a = 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 = (b = e.config) == null ? void 0 : b.resize, p = o.parentElement, C = p && p !== document.body ? p.id || `parent-${i}` : void 0;
+        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: a,
+          mode: r,
           draggingDirection: h,
           isMaximized: d,
           containerType: l,
@@ -1932,7 +2008,7 @@ const n = class n {
           color: E,
           useSnapping: M,
           isClosed: !1,
-          parentElementId: C,
+          parentElementId: b,
           closedTimestamp: 0,
           resize: w,
           isDemoContainer: !0
@@ -1994,14 +2070,14 @@ const n = class n {
     try {
       const i = n.getAllStates(), s = i[t];
       if (s) {
-        const a = { ...s, ...e };
-        i[t] = a, localStorage.setItem(
+        const r = { ...s, ...e };
+        i[t] = r, localStorage.setItem(
           n.STORAGE_KEY,
           JSON.stringify(i)
-        ), n.reactiveState.containerStates[t] = a;
+        ), n.reactiveState.containerStates[t] = r;
       } else {
         console.warn(`[StatePersistencePlugin] No state found for container ${t}, creating new state`);
-        const a = {
+        const r = {
           x: 0,
           y: 0,
           width: 300,
@@ -2014,10 +2090,10 @@ const n = class n {
           isDemoContainer: n.isDemoContainer(t),
           ...e
         };
-        i[t] = a, localStorage.setItem(
+        i[t] = r, localStorage.setItem(
           n.STORAGE_KEY,
           JSON.stringify(i)
-        ), n.reactiveState.containerStates[t] = a;
+        ), n.reactiveState.containerStates[t] = r;
       }
     } catch (i) {
       console.error("[StatePersistencePlugin] Failed to update container state:", i);
@@ -2027,7 +2103,7 @@ const n = class n {
    * Clear all saved states from localStorage
    */
   static clearStorage() {
-    T(() => {
+    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 = [];
   }
@@ -2037,7 +2113,7 @@ const n = class n {
   static initializeReactiveState() {
     try {
       const t = n.getAllStates(), e = n.getClosedQueue(), i = n.getDemoContainers();
-      T(() => {
+      D(() => {
         n.reactiveState.containerStates = t, n.closedQueue.length = 0, n.closedQueue.push(...e), n.demoContainers.length = 0, n.demoContainers.push(...i);
       });
     } catch (t) {
@@ -2066,8 +2142,8 @@ const n = class n {
       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 [a, o] of Object.entries(s))
-          console.log(`[StatePersistencePlugin] State ${a}:`, {
+        for (const [r, o] of Object.entries(s))
+          console.log(`[StatePersistencePlugin] State ${r}:`, {
             isDemoContainer: o.isDemoContainer,
             isClosed: o.isClosed,
             title: o.title
@@ -2091,22 +2167,22 @@ const n = class n {
     ));
   }
 };
-r(n, "_pluginId", Symbol("StatePersistencePlugin")), r(n, "STORAGE_KEY", "containerManagerState"), r(n, "CLOSED_QUEUE_KEY", "containerManagerClosedQueue"), r(n, "DEMO_CONTAINERS_KEY", "containerManagerDemoContainers"), // Статическое реактивное состояние для всех плагинов
-r(n, "reactiveState", I({
+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: []
-})), r(n, "isGlobalEventsInitialized", !1), r(n, "containers", []);
+})), a(n, "isGlobalEventsInitialized", !1), a(n, "containers", []);
 let H = n;
 H.initializeReactiveState();
 const L = class L {
   constructor() {
-    r(this, "manager");
-    r(this, "containerName", "");
-    r(this, "notificationSystem", null);
+    a(this, "manager");
+    a(this, "containerName", "");
+    a(this, "notificationSystem", null);
   }
   get pluginId() {
     return L._pluginId;
@@ -2200,19 +2276,21 @@ const L = class L {
     }
   }
 };
-r(L, "_pluginId", Symbol("LoggingPlugin"));
+a(L, "_pluginId", Symbol("LoggingPlugin"));
 let K = L;
 export {
   pt as ContainerInitializer,
-  G as ContainerManager,
-  ft as ContentCreator,
+  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,
-  St as getTemplateLoader,
-  vt as initializeTemplateSystem
+  lt as getState,
+  Et as getTemplateLoader,
+  St as initializeTemplateSystem
 };
 //# sourceMappingURL=index.es.js.map