@alekstar79/draggable-resizable-container 1.0.0

package/dist/index.es.js

@@ -0,0 +1,970 @@
+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 {
+  constructor(t) {
+    a(this, "container");
+    this.container = t || this.createContainer();
+  }
+  /**
+   * Create notifications container
+   */
+  createContainer() {
+    const t = document.querySelector(".notifications");
+    if (t)
+      return t;
+    const e = document.createElement("div");
+    return e.className = "notifications", document.body.appendChild(e), e;
+  }
+  /**
+   * Show notification toast
+   */
+  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 r = i.querySelector(".icon");
+    r && r.addEventListener("click", s), this.container.appendChild(i);
+  }
+  /**
+   * Generate toast HTML based on type
+   */
+  getToastHTML(t, e) {
+    return `
+      <div class="column">
+        <i class="fa-solid ${{
+      success: "fa-circle-check",
+      error: "fa-circle-xmark",
+      warning: "fa-triangle-exclamation",
+      info: "fa-circle-info"
+    }[e]}"></i>
+        <span>${t}</span>
+      </div>
+      <i class="icon fa-solid fa-xmark"></i>
+    `;
+  }
+  /**
+   * Remove toast with animation
+   */
+  removeToast(t) {
+    t.classList.add("hide"), t.timeoutId && clearTimeout(t.timeoutId), setTimeout(() => {
+      t.parentNode && t.parentNode.removeChild(t);
+    }, 300);
+  }
+  /**
+   * Clear all notifications
+   */
+  clear() {
+    for (; this.container.firstChild; )
+      this.container.removeChild(this.container.firstChild);
+  }
+}
+new R();
+class I {
+  /**
+   * 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;
+  }
+}
+class k {
+  constructor(t) {
+    a(this, "templateLoader");
+    this.templateLoader = t;
+  }
+  /**
+   * Create content from various sources
+   * @param content - String, HTMLElement, or template name
+   * @param container - Container element to append content to
+   */
+  async createContent(t, e) {
+    try {
+      const i = e.classList.contains("container-content");
+      let s;
+      if (i ? s = e : (s = e.querySelector(".container-content"), s || (s = document.createElement("div"), s.className = "container-content", e.appendChild(s))), s.innerHTML = "", typeof t == "string")
+        s.innerHTML = t;
+      else if (t instanceof HTMLElement)
+        s.appendChild(t);
+      else if (t.template)
+        try {
+          s.innerHTML = await this.templateLoader.loadTemplate(t.template);
+        } 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) {
+      throw console.error("[ContentCreator] Error creating content:", i), i;
+    }
+  }
+  /**
+   * Set template loader instance
+   */
+  setTemplateLoader(t) {
+    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 {
+  constructor() {
+    d(this, "templates", /* @__PURE__ */ new Map()), d(this, "lastUpdated", /* @__PURE__ */ new Map());
+  }
+  register(t) {
+    if (!t.name.trim()) throw new Error("Template name cannot be empty");
+    this.templates.set(t.name, t), this.lastUpdated.set(t.name, Date.now());
+  }
+  async registerBulk(t) {
+    for (const [e, i] of Object.entries(t)) this.register({ name: e, source: i });
+  }
+  get(t) {
+    return this.templates.get(t);
+  }
+  has(t) {
+    return this.templates.has(t);
+  }
+  remove(t) {
+    this.templates.delete(t), this.lastUpdated.delete(t);
+  }
+  list() {
+    return Array.from(this.templates.keys());
+  }
+  clear() {
+    this.templates.clear(), this.lastUpdated.clear();
+  }
+  getMetadata(t) {
+    var e;
+    return (e = this.templates.get(t)) == null ? void 0 : e.metadata;
+  }
+}
+class L {
+  constructor(t = 36e5) {
+    d(this, "cache", /* @__PURE__ */ new Map()), d(this, "ttl"), this.ttl = t;
+  }
+  set(t, e) {
+    this.cache.set(t, { content: e, timestamp: Date.now() });
+  }
+  get(t) {
+    const e = this.cache.get(t);
+    return e ? this.ttl <= 0 || Date.now() - e.timestamp > this.ttl ? (this.cache.delete(t), null) : e.content : null;
+  }
+  has(t) {
+    return this.get(t) !== null;
+  }
+  clear() {
+    this.cache.clear();
+  }
+  size() {
+    return this.cache.size;
+  }
+}
+class A {
+  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 };
+  }
+  normalizeConfig(t = {}) {
+    var i;
+    const e = t || {};
+    return { environment: e.environment === "auto" ? typeof process < "u" && ((i = process.env) == null ? void 0 : i.NODE_ENV) === "production" ? "production" : "development" : e.environment ?? "development", cache: e.cache ?? !0, cacheTTL: e.cacheTTL ?? 36e5, enableMetrics: e.enableMetrics ?? !0, onError: e.onError ?? (() => {
+    }), onWarn: e.onWarn ?? (() => {
+    }), fallbackTemplate: e.fallbackTemplate ?? '<div class="template-error">Template load failed</div>' };
+  }
+  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;
+    }
+    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;
+    }
+    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);
+        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;
+    }
+  }
+  async loadTemplates(t) {
+    const e = {};
+    return await Promise.all(t.map(async (i) => {
+      e[i] = await this.loadTemplate(i);
+    })), e;
+  }
+  getMetrics() {
+    return { ...this.metrics };
+  }
+  clearCache() {
+    this.cache.clear();
+  }
+  resetMetrics() {
+    this.metrics = { totalLoads: 0, totalHits: 0, totalMisses: 0, totalErrors: 0, averageLoadTime: 0, cacheHitRate: 0 };
+  }
+  has(t) {
+    return this.registry.has(t);
+  }
+  list() {
+    return this.registry.list();
+  }
+  info(t) {
+    return this.registry.get(t);
+  }
+  createError(t, e, i) {
+    return Object.assign(new Error(t), { name: "TemplateLoadError", templateName: e, timestamp: /* @__PURE__ */ new Date(), retryCount: i });
+  }
+  recordLoadTime(t) {
+    if (this.config.enableMetrics) {
+      const e = performance.now() - t, i = this.metrics.averageLoadTime * (this.metrics.totalLoads - 1) + e;
+      this.metrics.averageLoadTime = i / this.metrics.totalLoads;
+    }
+  }
+  updateCacheHitRate() {
+    this.config.enableMetrics && (this.metrics.cacheHitRate = this.metrics.totalHits / this.metrics.totalLoads);
+  }
+}
+const c = class c {
+  constructor() {
+    a(this, "draggable", []);
+  }
+  zIndex(t) {
+    return `${c.highestZIndex + this.draggable.findIndex((e) => e === t)}`;
+  }
+  push(t) {
+    return this.draggable = [.../* @__PURE__ */ new Set([...this.draggable, t])], this;
+  }
+  remove(t) {
+    return this.draggable = this.draggable.filter((e) => e !== t), this;
+  }
+  sort(t) {
+    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() {
+  return {
+    width: window.innerWidth || document.documentElement.clientWidth,
+    height: window.innerHeight || document.documentElement.clientHeight
+  };
+}
+function D() {
+  return v.init();
+}
+const g = class g {
+  /**
+   * Create a new container manager instance with reactive state management
+   * @param container - HTML element to manage
+   * @param config - Configuration options
+   */
+  constructor(t, e = {}) {
+    // Streams for reactive event handling
+    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", b({
+      x: 0,
+      y: 0,
+      width: 0,
+      height: 0,
+      mode: "smooth",
+      draggingDirection: "all"
+    }));
+    // Computed state with applied constraints
+    a(this, "constrainedState", x(() => {
+      var s;
+      const t = this.reactiveState;
+      if (!this.config) return { ...t };
+      let e = { ...t };
+      const { boundaries: i } = this.config;
+      if (e.width = m(
+        t.width,
+        i.minWidth || g.MINWIDTH,
+        i.maxWidth || 1 / 0
+      ), e.height = m(
+        t.height,
+        i.minHeight || g.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);
+      }
+      return (s = this.config) != null && s.constrainToParent && (e = this.constrainToParent(e)), e;
+    }));
+    // Automatic DOM updates with reactive effect
+    a(this, "domUpdateEffect", p(() => {
+      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", {
+        type: "stateChange",
+        state: { ...t },
+        mode: this.reactiveState.mode,
+        element: this.container
+      }));
+    }));
+    this.config = M({
+      _uid: "",
+      mode: "smooth",
+      constrainToViewport: !1,
+      draggingDirection: "all",
+      constrainToParent: !1,
+      boundaries: {
+        minWidth: g.MINWIDTH,
+        minHeight: g.MINHEIGHT
+      },
+      autoAdjust: {
+        enabled: !1,
+        width: !1,
+        height: !1
+      },
+      resize: {
+        enabled: !0,
+        directions: ["se"]
+      }
+    }, e), this.container = t, this.zIndexState = D();
+    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();
+  }
+  /**
+   * Set up ResizeObserver to track viewport and parent size changes
+   */
+  setupResizeObservers() {
+    var t;
+    this.shouldConstrainToViewport() && this.setupViewportResizeObserver(), (t = this.config.autoAdjust) != null && t.enabled && this.setupParentResizeObserver();
+  }
+  /**
+   * Determine if viewport constraints should be applied
+   */
+  shouldConstrainToViewport() {
+    return !this.config.constrainToParent || this.config.constrainToViewport;
+  }
+  /**
+   * Set up ResizeObserver to track viewport size changes
+   */
+  setupViewportResizeObserver() {
+    let t = null;
+    this.resizeObserver = new ResizeObserver(() => {
+      t && cancelAnimationFrame(t), t = requestAnimationFrame(() => {
+        this.handleViewportResize();
+      });
+    }), this.resizeObserver.observe(document.body);
+  }
+  /**
+   * Handle viewport resize event with reactive state updates
+   */
+  handleViewportResize() {
+    if (!this.shouldConstrainToViewport()) return;
+    const t = w(), 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",
+      state: this.getState(),
+      mode: this.reactiveState.mode,
+      element: this.container
+    }));
+  }
+  /**
+   * Set up ResizeObserver for parent element auto-adjustment
+   */
+  setupParentResizeObserver() {
+    const t = this.container.parentElement;
+    t && (this.parentResizeObserver = new ResizeObserver((e) => {
+      for (const i of e)
+        this.handleParentResize(i);
+    }), this.parentResizeObserver.observe(t));
+  }
+  /**
+   * Handle parent element resize for auto-adjustment with reactive updates
+   */
+  handleParentResize(t) {
+    const { autoAdjust: e } = this.config;
+    if (!(e != null && e.enabled)) return;
+    const i = t.contentRect, r = { ...this.getState() };
+    let n = !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);
+    }
+    if (e.height) {
+      const h = this.getMaxHeightConstraint(), l = Math.min(i.height, h);
+      Math.abs(r.height - l) > 1 && (r.height = l, n = !0);
+    }
+    n && (this.setState(r), this.eventEmitter.emit("autoAdjust", {
+      type: "autoAdjust",
+      state: this.getState(),
+      mode: this.reactiveState.mode,
+      element: this.container
+    }));
+  }
+  /**
+   * Initialize drag and resize handles based on configuration
+   */
+  initializeHandles() {
+    var t;
+    this.initializeDragHandle(), (t = this.config.resize) != null && t.enabled && this.initializeResizeHandles();
+  }
+  /**
+   * Initialize drag handle
+   */
+  initializeDragHandle() {
+    this.dragHandle = this.container.querySelector("[data-drag-handle]"), this.dragHandle ? this.dragHandle.setAttribute("oncontextmenu", "return false") : (this.dragHandle = document.createElement("div"), this.dragHandle.className = "drag-handle", this.dragHandle.setAttribute("data-drag-handle", "true"), this.dragHandle.setAttribute("oncontextmenu", "return false"), this.container.prepend(this.dragHandle));
+  }
+  /**
+   * Initialize resize handles for all configured directions
+   */
+  initializeResizeHandles() {
+    var e;
+    (((e = this.config.resize) == null ? void 0 : e.directions) || ["se"]).forEach((i) => {
+      const s = this.createResizeHandle(i);
+      this.resizeHandles.set(i, s), this.container.appendChild(s);
+    });
+  }
+  /**
+   * Create individual resize handle for specific direction
+   */
+  createResizeHandle(t) {
+    const e = document.createElement("div");
+    return e.className = `resize-handle resize-${t}`, e.setAttribute("data-resize-handle", t), e.setAttribute("data-resize-direction", t), e.addEventListener("contextmenu", this.onContextMenu), this.applyResizeHandleStyles(e, t), e;
+  }
+  /**
+   * Apply styles and cursor for resize handle based on direction
+   */
+  applyResizeHandleStyles(t, e) {
+    const i = {
+      n: "ns-resize",
+      s: "ns-resize",
+      e: "ew-resize",
+      w: "ew-resize",
+      ne: "nesw-resize",
+      nw: "nwse-resize",
+      se: "nwse-resize",
+      sw: "nesw-resize"
+    };
+    t.style.position = "absolute", t.style.cursor = i[e], this.positionResizeHandle(t, e);
+  }
+  /**
+   * Position resize handle based on direction
+   */
+  positionResizeHandle(t, e) {
+    switch (e) {
+      case "n":
+        t.style.top = "0", t.style.left = "0", t.style.right = "0", t.style.height = "12px";
+        break;
+      case "s":
+        t.style.bottom = "0", t.style.left = "0", t.style.right = "0", t.style.height = "12px";
+        break;
+      case "e":
+        t.style.right = "0", t.style.top = "0", t.style.bottom = "0", t.style.width = "12px";
+        break;
+      case "w":
+        t.style.left = "0", t.style.top = "0", t.style.bottom = "0", t.style.width = "12px";
+        break;
+      case "ne":
+        t.style.top = "0", t.style.right = "0", t.style.width = "12px", t.style.height = "12px";
+        break;
+      case "nw":
+        t.style.top = "0", t.style.left = "0", t.style.width = "12px", t.style.height = "12px";
+        break;
+      case "se":
+        t.style.bottom = "0", t.style.right = "0", t.style.width = "12px", t.style.height = "12px";
+        break;
+      case "sw":
+        t.style.bottom = "0", t.style.left = "0", t.style.width = "12px", t.style.height = "12px";
+        break;
+    }
+  }
+  /**
+   * Bind event listeners to handles
+   */
+  bindEvents() {
+    var t;
+    this.onDragStart = this.onDragStart.bind(this), this.onDragMove = this.onDragMove.bind(this), this.onDragEnd = this.onDragEnd.bind(this), this.onResizeStart = this.onResizeStart.bind(this), this.onResizeMove = this.onResizeMove.bind(this), this.onResizeEnd = this.onResizeEnd.bind(this), this.onContextMenu = this.onContextMenu.bind(this), this.hasPluginByName("SnappingPlugin") || (this.dragHandle.addEventListener("mousedown", this.onDragStart), this.dragHandle.addEventListener("touchstart", this.onDragStart)), (t = this.config.resize) != null && t.enabled && this.resizeHandles.forEach((e, i) => {
+      e.addEventListener("mousedown", (s) => this.onResizeStart(s, i)), e.addEventListener("touchstart", (s) => this.onResizeStart(s, i));
+    }), this.dragHandle.addEventListener("contextmenu", this.onContextMenu);
+  }
+  /**
+   * Apply movement mode to coordinates
+   */
+  applyMovementMode(t, e) {
+    const i = { ...this.startState };
+    return this.reactiveState.mode === "smooth" && (i.x = this.startState.x + t, i.y = this.startState.y + e), i;
+  }
+  /**
+   * Calculate new state based on resize direction and deltas
+   */
+  calculateResizeState(t, e, i) {
+    const s = { ...this.startState };
+    switch (i) {
+      case "e":
+        s.width = this.startState.width + t;
+        break;
+      case "w":
+        s.width = this.startState.width - t, s.x = this.startState.x + t;
+        break;
+      case "n":
+        s.height = this.startState.height - e, s.y = this.startState.y + e;
+        break;
+      case "s":
+        s.height = this.startState.height + e;
+        break;
+      case "ne":
+        s.width = this.startState.width + t, s.height = this.startState.height - e, s.y = this.startState.y + e;
+        break;
+      case "nw":
+        s.width = this.startState.width - t, s.height = this.startState.height - e, s.x = this.startState.x + t, s.y = this.startState.y + e;
+        break;
+      case "se":
+        s.width = this.startState.width + t, s.height = this.startState.height + e;
+        break;
+      case "sw":
+        s.width = this.startState.width - t, s.height = this.startState.height + e, s.x = this.startState.x + t;
+        break;
+    }
+    return s;
+  }
+  /**
+   * Constrain container to parent element boundaries (both position and size)
+   */
+  constrainToParent(t) {
+    const e = this.container.parentElement;
+    if (!e) return t;
+    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;
+    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)
+    };
+  }
+  /**
+   * Get maximum width constraint considering parent and boundaries
+   */
+  getMaxWidthConstraint() {
+    const { boundaries: t } = this.config;
+    let e = t.maxWidth || 1 / 0;
+    if (this.config.constrainToParent && this.container.parentElement) {
+      const i = this.container.parentElement.getBoundingClientRect().width;
+      e = Math.min(e, i);
+    }
+    return e;
+  }
+  /**
+   * Get maximum height constraint considering parent and boundaries
+   */
+  getMaxHeightConstraint() {
+    const { boundaries: t } = this.config;
+    let e = t.maxHeight || 1 / 0;
+    if (this.config.constrainToParent && this.container.parentElement) {
+      const i = this.container.parentElement.getBoundingClientRect().height;
+      e = Math.min(e, i);
+    }
+    return e;
+  }
+  /**
+   * Handle context menu event on drag handle
+   */
+  onContextMenu(t) {
+    t.preventDefault(), t.stopPropagation();
+  }
+  /**
+   * Check if snapping plugin is installed
+   */
+  hasPluginByName(t) {
+    return Array.from(this.installedPlugins).some((e) => e.constructor.name === t);
+  }
+  /**
+   * Get current container state from DOM
+   */
+  getCurrentState() {
+    const t = this.container.getBoundingClientRect(), e = window.getComputedStyle(this.container), i = parseFloat(e.width) || t.width, s = parseFloat(e.height) || t.height;
+    return {
+      x: t.left,
+      y: t.top,
+      width: i,
+      height: s
+    };
+  }
+  /**
+   * Setup event middleware for enhanced event processing
+   */
+  setupEventMiddleware() {
+    this.eventEmitter.use("*", (t, e) => (typeof window < "u" && window.DEBUG_CONTAINER_MANAGER && console.log(`[ContainerManager] ${e}:`, t), t)), this.eventEmitter.use("dragStart", (t, e) => {
+      if (this.reactiveState.mode === "pinned")
+        throw new Error("Cannot drag in pinned mode");
+      return t;
+    }), this.eventEmitter.use("drag", (t, e) => t);
+  }
+  /**
+   * Setup reactive monitoring for container metrics
+   */
+  setupReactiveMonitoring() {
+    const t = p(() => {
+      const { state: i } = this.stateChangeStream;
+    });
+    this.reactiveEffects.push(t);
+    const e = p(() => {
+      const i = this.eventEmitter.getMetrics();
+      i.state.errorCount > 10 && console.warn("[ContainerManager] High error count in event system:", i.state.errorCount);
+    });
+    this.reactiveEffects.push(e);
+  }
+  // Public API Implementation
+  /**
+   * Subscribe to container events
+   * @param event - Event name
+   * @param callback - Callback function
+   */
+  on(t, e) {
+    this.eventEmitter.on(t, e);
+  }
+  /**
+   * Unsubscribe from container events
+   * @param event - Event name
+   * @param callback - Callback function
+   */
+  off(t, e) {
+    this.eventEmitter.off(t, e);
+  }
+  /**
+   * Wait for specific container event
+   * @example
+   * // Wait for drag to complete
+   * const dragResult = await manager.waitFor('dragEnd')
+   * console.log('Drag completed:', dragResult.state)
+   */
+  waitFor(t, e) {
+    return this.eventEmitter.waitFor(t, e);
+  }
+  /**
+   * Get reactive stream for specific event type
+   * @example
+   * // Get state change stream
+   * const stateStream = manager.getStream('stateChange')
+   * stateStream.subscribe((data) => {
+   *   console.log('State changed:', data.state)
+   * })
+   */
+  getStream(t) {
+    return this.eventEmitter.stream(t);
+  }
+  /**
+   * Pipe container events to another emitter
+   * @example
+   * // Pipe all events to analytics emitter
+   * manager.pipe('*', analyticsEmitter)
+   */
+  pipe(t, e, i) {
+    return this.eventEmitter.pipe(t, e, i);
+  }
+  /**
+   * Get event system metrics for monitoring
+   */
+  getEventMetrics() {
+    return this.eventEmitter.getMetrics();
+  }
+  /**
+   * Plugin-specific event emission
+   */
+  emitPluginEvent(t, e) {
+    this.pluginEventEmitter.emit(t, e);
+  }
+  /**
+   * Listen to plugin-specific events
+   */
+  onPluginEvent(t, e) {
+    this.pluginEventEmitter.on(t, e);
+  }
+  /**
+   * Remove plugin event listener
+   */
+  offPluginEvent(t, e) {
+    this.pluginEventEmitter.off(t, e);
+  }
+  /**
+   * Add middleware for plugin events
+   */
+  usePluginMiddleware(t, e) {
+    return this.pluginEventEmitter.use(t, e);
+  }
+  /**
+   * Handle drag start event
+   */
+  onDragStart(t) {
+    if (this.reactiveState.mode === "pinned") return;
+    t.preventDefault(), this.bringToFront(), this.isDragging = !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.getState(), this.eventEmitter.emit("dragStart", {
+      type: "drag",
+      state: this.getState(),
+      mode: this.reactiveState.mode,
+      element: this.container
+    }), document.addEventListener("mousemove", this.onDragMove), document.addEventListener("mouseup", this.onDragEnd), document.addEventListener("touchmove", this.onDragMove), document.addEventListener("touchend", this.onDragEnd);
+  }
+  /**
+   * Handle drag movement with reactive state updates
+   */
+  onDragMove(t) {
+    if (!this.isDragging) return;
+    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", {
+      type: "drag",
+      state: this.getState(),
+      mode: this.reactiveState.mode,
+      element: this.container
+    });
+  }
+  /**
+   * Handle drag end event
+   */
+  onDragEnd() {
+    this.isDragging = !1, document.removeEventListener("mousemove", this.onDragMove), document.removeEventListener("mouseup", this.onDragEnd), document.removeEventListener("touchmove", this.onDragMove), document.removeEventListener("touchend", this.onDragEnd), this.eventEmitter.emit("dragEnd", {
+      type: "drag",
+      state: this.getState(),
+      mode: this.reactiveState.mode,
+      element: this.container
+    });
+  }
+  /**
+   * Handle resize start event with direction
+   */
+  onResizeStart(t, e) {
+    t.preventDefault(), t.stopPropagation(), this.bringToFront(), this.isResizing = !0, this.resizeDirection = e;
+    const i = t instanceof MouseEvent ? t.clientX : t.touches[0].clientX, s = t instanceof MouseEvent ? t.clientY : t.touches[0].clientY;
+    this.startX = i, this.startY = s, this.startState = this.getState(), document.addEventListener("mousemove", this.onResizeMove), document.addEventListener("mouseup", this.onResizeEnd), document.addEventListener("touchmove", this.onResizeMove), document.addEventListener("touchend", this.onResizeEnd), this.eventEmitter.emit("resizeStart", {
+      type: "resize",
+      state: this.getState(),
+      mode: this.reactiveState.mode,
+      element: this.container,
+      direction: e
+    });
+  }
+  /**
+   * Handle resize movement with multi-direction support and reactive updates
+   */
+  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", {
+      type: "resize",
+      state: this.getState(),
+      mode: this.reactiveState.mode,
+      direction: this.resizeDirection,
+      element: this.container
+    });
+  }
+  /**
+   * Handle resize end event
+   */
+  onResizeEnd() {
+    this.isResizing = !1, this.resizeDirection = null, document.removeEventListener("mousemove", this.onResizeMove), document.removeEventListener("mouseup", this.onResizeEnd), document.removeEventListener("touchmove", this.onResizeMove), document.removeEventListener("touchend", this.onResizeEnd), this.eventEmitter.emit("resizeEnd", {
+      type: "resize",
+      state: this.getState(),
+      mode: this.reactiveState.mode,
+      element: this.container
+    });
+  }
+  /**
+   * Set movement direction
+   */
+  setDirection(t) {
+    this.reactiveState.draggingDirection = t, this.emitPluginEvent("directionChanged", { direction: t });
+  }
+  /**
+   * Get current movement direction
+   */
+  getDirection() {
+    return this.reactiveState.draggingDirection;
+  }
+  /**
+   * Resolve coordinates based on current direction mode
+   */
+  directionResolver(t, e) {
+    const i = this.reactiveState.draggingDirection, s = i === "vertical", r = i === "horizontal";
+    return {
+      clientX: s ? this.startX : t,
+      clientY: r ? this.startY : e
+    };
+  }
+  /**
+   * Get current movement mode
+   */
+  getMode() {
+    return this.reactiveState.mode;
+  }
+  /**
+   * Set movement mode with reactive update
+   */
+  setMode(t) {
+    this.reactiveState.mode = t, this.eventEmitter.emit("modeChange", {
+      type: "modeChange",
+      state: this.getState(),
+      mode: this.reactiveState.mode,
+      element: this.container
+    });
+  }
+  /**
+   * Update container boundaries
+   */
+  setBoundaries(t) {
+    this.config.boundaries = { ...this.config.boundaries, ...t };
+  }
+  /**
+   * Get current container state (reactive)
+   */
+  getState() {
+    return {
+      x: this.reactiveState.x,
+      y: this.reactiveState.y,
+      width: this.reactiveState.width,
+      height: this.reactiveState.height
+    };
+  }
+  /**
+   * Update container position and size with reactive state
+   */
+  setState(t) {
+    t.height !== void 0 && (this.reactiveState.height = t.height), t.width !== void 0 && (this.reactiveState.width = t.width), t.x !== void 0 && (this.reactiveState.x = t.x), t.y !== void 0 && (this.reactiveState.y = t.y), this.applyStateToDOM();
+  }
+  /**
+   * Apply current state to DOM immediately for synchronization
+   */
+  applyStateToDOM() {
+    const t = this.getState();
+    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`;
+  }
+  /**
+   * Bring container to front programmatically
+   */
+  bringToFront() {
+    const { _uid: t } = this.config;
+    this.container.style.zIndex = this.zIndexState.sort(t).zIndex(t);
+  }
+  /**
+   * Get container DOM element
+   */
+  getContainer() {
+    return this.container;
+  }
+  /**
+   * Update auto-adjust configuration
+   */
+  setAutoAdjust(t) {
+    var e;
+    this.config.autoAdjust = { ...this.config.autoAdjust, ...t }, this.parentResizeObserver && (this.parentResizeObserver.disconnect(), this.parentResizeObserver = null), (e = this.config.autoAdjust) != null && e.enabled && this.setupParentResizeObserver();
+  }
+  /**
+   * Update resize configuration
+   */
+  setResizeConfig(t) {
+    var e;
+    this.config.resize = { ...this.config.resize, ...t }, this.resizeHandles.forEach((i) => i.remove()), this.resizeHandles.clear(), (e = this.config.resize) != null && e.enabled && (this.initializeResizeHandles(), this.bindEvents());
+  }
+  /**
+   * Set constrain to parent configuration
+   */
+  setConstrainToParent(t) {
+    this.config.constrainToParent = t, this.resizeObserver && (this.resizeObserver.disconnect(), this.resizeObserver = null), this.shouldConstrainToViewport() && this.setupViewportResizeObserver();
+  }
+  /**
+   * Set constrain to viewport configuration
+   */
+  setConstrainToViewport(t) {
+    this.config.constrainToViewport = t, this.resizeObserver && (this.resizeObserver.disconnect(), this.resizeObserver = null), this.shouldConstrainToViewport() && this.setupViewportResizeObserver();
+  }
+  /**
+   * Recalculate container state relative to parent element
+   */
+  recalculateForParent() {
+    if (!this.config.constrainToParent || !this.container.parentElement)
+      return;
+    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);
+    this.setState({
+      x: u,
+      y,
+      width: r,
+      height: n
+    }), this.eventEmitter.emit("parentRecalculated", {
+      type: "parentRecalculated",
+      state: this.getState(),
+      mode: this.reactiveState.mode,
+      element: this.container
+    });
+  }
+  /**
+   * Install plugin on this container manager instance
+   */
+  use(t, e) {
+    if (this.installedPlugins.has(t)) return this;
+    try {
+      t.install(this, e), this.installedPlugins.add(t);
+    } catch (i) {
+      console.error("[ContainerManager] Failed to install plugin:", i);
+    }
+    return this;
+  }
+  /**
+   * Check if plugin is installed on this instance
+   */
+  hasPlugin(t) {
+    return this.installedPlugins.has(t);
+  }
+  /**
+   * Get all installed plugins on this instance
+   */
+  getInstalledPlugins() {
+    return Array.from(this.installedPlugins);
+  }
+  /**
+   * Destroy container manager with proper cleanup
+   */
+  destroy() {
+    this.reactiveEffects.forEach((t) => t()), this.reactiveEffects = [], this.stateChangeStream.destroy(), this.dragStream.destroy(), this.resizeStream.destroy(), this.eventEmitter.destroy(), this.pluginEventEmitter.destroy(), this.domUpdateEffect(), this.dragHandle.removeEventListener("mousedown", this.onDragStart), this.dragHandle.removeEventListener("touchstart", this.onDragStart), this.dragHandle.removeEventListener("contextmenu", this.onContextMenu), this.resizeHandles.forEach((t, e) => {
+      t.removeEventListener("mousedown", (i) => this.onResizeStart(i, e)), t.removeEventListener("touchstart", (i) => this.onResizeStart(i, e));
+    }), 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;
+export {
+  I as ContainerInitializer,
+  E as ContainerManager,
+  k as ContentCreator,
+  A as TemplateLoader
+};
+//# sourceMappingURL=index.es.js.map