tanuki-ui/dist/lib/layouts.js

HTML-first React component library with semantic elements, multi-OS themes, and production-ready visual node editor

var ue = (e) => {
  throw TypeError(e);
};
var we = (e, t, n) => t.has(e) || ue("Cannot " + n);
var O = (e, t, n) => (we(e, t, "read from private field"), n ? n.call(e) : t.get(e)), X = (e, t, n) => t.has(e) ? ue("Cannot add the same private member more than once") : t instanceof WeakSet ? t.add(e) : t.set(e, n);
import { jsx as b, jsxs as P, Fragment as ae } from "react/jsx-runtime";
import * as R from "react";
import N, { useLayoutEffect as Ne, useEffect as F, useState as $, useRef as H, useCallback as E, useMemo as M, createContext as Le, useContext as Ae, useReducer as Ie } from "react";
import { u as Oe, a as Pe } from "./vendor/useMeasure-C5eiiuB0.js";
var _e = typeof window < "u", Me = _e ? Ne : F;
const ze = "lytbase", xe = {
  base: ze
}, $e = (e) => /* @__PURE__ */ b("div", { className: xe.base, children: e.children });
$e.displayName = "ScrollView";
const Be = "lytbaseE4I", Ze = "lytaside", Xe = "lytrsz", Ue = "lytmainTjq", U = {
  base: Be,
  aside: Ze,
  resizer: Xe,
  main: Ue
}, He = 240, be = 120, he = 480, Ve = (e, t) => {
  const [n, a] = R.useState(t);
  return R.useEffect(() => {
    if (e) {
      if (typeof window > "u")
        return;
      const r = window.localStorage.getItem(e);
      if (r) {
        const l = Number(r);
        isNaN(l) || a(Math.min(Math.max(l, be), he));
      }
    }
  }, [e]), R.useEffect(() => {
    if (e) {
      if (typeof window > "u")
        return;
      window.localStorage.setItem(e, String(n));
    }
  }, [n, e]), [n, a];
}, Fe = ({
  aside: e,
  children: t,
  asideId: n,
  minAsideWidth: a = be,
  maxAsideWidth: r = he
}) => {
  const l = n ? `SidebarLayout:width:${n}` : void 0, [s, i] = Ve(l, He), c = R.useRef(null), o = R.useRef(!1), f = R.useRef(null), d = R.useCallback(
    (p) => {
      var h;
      if (p.type === "pointerdown")
        o.current = !0, f.current = ((h = document.querySelector(`.${U.base}`)) == null ? void 0 : h.getBoundingClientRect()) ?? null;
      else if (p.type === "pointermove" && o.current && f.current) {
        const u = Math.min(Math.max(p.pageX - f.current.left, a), r);
        i(u);
      } else p.type === "pointerend" && (o.current = !1, f.current = null);
    },
    [a, r]
  );
  return Oe(c, d), /* @__PURE__ */ P("div", { className: U.base, children: [
    /* @__PURE__ */ b("aside", { className: U.aside, style: { width: s }, "aria-label": n, id: n, children: e }),
    /* @__PURE__ */ b(
      "div",
      {
        className: U.resizer,
        ref: c,
        role: "separator",
        "aria-orientation": "vertical",
        tabIndex: 0,
        "aria-label": "resize",
        style: { left: s - 4 }
      }
    ),
    /* @__PURE__ */ b("main", { className: U.main, children: t })
  ] });
};
Fe.displayName = "SidebarLayout";
const Ge = "lytbasefvK", Ye = "lythdr", We = "lytmain", Q = {
  base: Ge,
  header: Ye,
  main: We
}, je = ({ header: e, children: t }) => /* @__PURE__ */ P("div", { className: Q.base, children: [
  /* @__PURE__ */ b("header", { className: Q.header, children: e }),
  /* @__PURE__ */ b("div", { className: Q.main, children: t })
] });
je.displayName = "HeaderMainLayout";
const ke = "lytautsiz", Ke = "lytbody", pe = {
  autoSizer: ke,
  body: Ke
}, Je = (e) => {
  const t = R.useRef(null), [n] = Pe(t);
  return /* @__PURE__ */ b("div", { ref: t, className: pe.autoSizer, children: /* @__PURE__ */ b("div", { className: pe.body, children: n && e.children(n) }) });
};
Je.displayName = "AutoSizer";
const qe = "lytbasebSr", Qe = "lythdrTR2", et = "lytmainzoo", tt = "lytftr", nt = "lytctn", V = {
  base: qe,
  header: Qe,
  main: et,
  footer: tt,
  content: nt
}, rt = ({
  header: e,
  children: t,
  footer: n
}) => /* @__PURE__ */ P("div", { className: V.base, children: [
  e && /* @__PURE__ */ b("header", { className: V.header, children: e }),
  /* @__PURE__ */ b("main", { className: V.main, children: t }),
  n && /* @__PURE__ */ b("footer", { className: V.footer, children: n })
] }), at = ({ children: e }) => /* @__PURE__ */ b("div", { className: V.content, children: e });
rt.Content = at;
const ot = ({ source: e, className: t }) => {
  const n = N.useRef(null);
  if (Me(() => {
    const a = n.current;
    if (a)
      return e instanceof HTMLVideoElement || e instanceof HTMLImageElement || e instanceof HTMLCanvasElement || e instanceof HTMLObjectElement || e instanceof HTMLIFrameElement ? (a.appendChild(e), () => {
        a.contains(e) && a.removeChild(e);
      }) : () => {
      };
  }, [e]), typeof e == "string")
    return /* @__PURE__ */ b("img", { src: e, className: t });
  if (typeof e == "object" && "src" in e && typeof e.src == "string") {
    const a = "alt" in e && typeof e.alt == "string" ? e.alt : "";
    return /* @__PURE__ */ b("img", { src: e.src, alt: a, className: t });
  }
  return /* @__PURE__ */ b("div", { ref: n, className: t, children: N.isValidElement(e) ? N.cloneElement(e, {}) : /* @__PURE__ */ b("div", { className: t, children: "Unsupported media type" }) });
}, st = () => {
  const [e, t] = N.useState(0);
  return N.useEffect(() => {
    if (typeof window > "u")
      return;
    const n = () => {
      t(window.scrollY);
    };
    return window.addEventListener("scroll", n), () => window.removeEventListener("scroll", n);
  }, []), e;
}, oe = typeof window < "u" ? N.useLayoutEffect : N.useEffect, ee = /* @__PURE__ */ new Map(), lt = (e) => {
  var a, r, l;
  const t = "ovs-";
  if (ee.has(t))
    return ee.get(t);
  const n = new (l = class {
    constructor() {
      X(this, a, /* @__PURE__ */ new Map());
      X(this, r, new ResizeObserver((s, i) => {
        s.forEach((c) => {
          const o = O(this, a).get(c.target);
          o && o(c, i);
        });
      }));
    }
    observe(s, i) {
      return O(this, a).set(s, i), O(this, r).observe(s), () => {
        O(this, a).delete(s), O(this, r).unobserve(s);
      };
    }
  }, a = new WeakMap(), r = new WeakMap(), l)();
  return ee.set(t, n), n;
};
function se(e, { box: t }) {
  const [n, a] = N.useState(null);
  N.useEffect(() => e.current ? lt().observe(e.current, (s, i) => {
    a(s);
  }) : void 0, [t, e.current]);
  const r = N.useMemo(() => {
    var l;
    if (n)
      if (((l = n.borderBoxSize) == null ? void 0 : l.length) > 0) {
        const s = n.borderBoxSize[0];
        return new DOMRect(0, 0, s.inlineSize, s.blockSize);
      } else
        return n.contentRect;
  }, [n]);
  return { entry: n, rect: r };
}
const it = "lytbaseSh4", ct = "lythdri1w", dt = "lytcover", ut = "lytbody7_6", k = {
  base: it,
  header: ct,
  cover: dt,
  body: ut
}, pt = ({ cover: e, children: t }) => {
  const n = R.useRef(null), a = R.useRef(null), r = st(), l = R.useRef(r);
  l.current = r;
  const s = R.useRef(void 0), { rect: i } = se(n, {});
  return Object.is(s.current, i) || (s.current = i), oe(() => {
    const c = n.current, o = a.current;
    if (!o || !c)
      return;
    let f = Number.NaN, d;
    const p = () => {
      const u = s.current;
      if (!u)
        return;
      const m = u.height - l.current;
      m !== f && (o.style.opacity = "1", o.style.height = `${m}px`, f = m), (u.x >= 0 || u.y >= 0 || u.width > 0) && d !== u && (o.style.left = `${u.x}px`, o.style.top = `${u.y}px`, o.style.width = `${u.width}px`, d = u);
    };
    let h = requestAnimationFrame(function u() {
      p(), h = requestAnimationFrame(u);
    });
    return () => {
      cancelAnimationFrame(h);
    };
  }, []), /* @__PURE__ */ P("div", { className: k.base, children: [
    /* @__PURE__ */ b("div", { className: k.cover, ref: a, children: /* @__PURE__ */ b(ot, { source: e }) }),
    /* @__PURE__ */ b("div", { ref: n, className: k.header, children: /* @__PURE__ */ b("div", { className: k.body, children: t }) })
  ] });
};
pt.displayName = "StickyHeader";
const ft = "lytpage", gt = "lytline", bt = "lytghost", G = {
  page: ft,
  line: gt,
  ghost: bt
}, ht = () => {
  let e = 0;
  const t = /* @__PURE__ */ new Map();
  return (n) => {
    if (n === void 0)
      return;
    if (t.has(n))
      return t.get(n);
    const a = e++;
    return t.set(n, a), a;
  };
}, mt = ht(), te = /* @__PURE__ */ new Map(), vt = (e) => {
  var a, r, l;
  const t = `ovs-threshold:${e.threshold}-rootMargin:${e.rootMargin}-root:${mt(e.root)}`;
  if (te.has(t))
    return te.get(t);
  const n = new (l = class {
    constructor() {
      X(this, a, /* @__PURE__ */ new Map());
      X(this, r, new IntersectionObserver((s) => {
        s.forEach((i) => {
          const c = O(this, a).get(i.target);
          c && c(i);
        });
      }, e));
    }
    observe(s, i) {
      return O(this, a).set(s, i), O(this, r).observe(s), () => {
        O(this, a).delete(s), O(this, r).unobserve(s);
      };
    }
  }, a = new WeakMap(), r = new WeakMap(), l)();
  return te.set(t, n), n;
}, fe = Object.freeze({
  x: 0,
  y: 0,
  width: 0,
  height: 0,
  top: 0,
  right: 0,
  bottom: 0,
  left: 0
});
function me(e, { threshold: t = 0, rootMargin: n = "0px", root: a = null }) {
  const [r, l] = N.useState(null);
  return F(() => e.current ? vt({
    threshold: t,
    rootMargin: n,
    root: a
  }).observe(e.current, (i) => {
    l({
      isIntersecting: i.isIntersecting,
      boundingClientRect: i.boundingClientRect,
      intersectionRatio: i.intersectionRatio,
      intersectionRect: i.intersectionRect,
      rootBounds: i.rootBounds,
      target: i.target,
      time: i.time
    });
  }) : void 0, [t, n, a, e.current]), N.useMemo(() => ({
    isIntersecting: (r == null ? void 0 : r.isIntersecting) ?? !1,
    boundingClientRect: (r == null ? void 0 : r.boundingClientRect) ?? fe,
    intersectionRatio: (r == null ? void 0 : r.intersectionRatio) ?? 0,
    intersectionRect: (r == null ? void 0 : r.intersectionRect) ?? fe,
    rootBounds: (r == null ? void 0 : r.rootBounds) ?? null,
    target: (r == null ? void 0 : r.target) ?? e.current,
    time: (r == null ? void 0 : r.time) ?? 0
  }), [r]);
}
const J = R.createContext(
  new Proxy(
    {},
    {
      get: () => {
        throw new Error("Context not initialized");
      }
    }
  )
);
J.displayName = "ParavirtualScrollContext";
const Tt = R.memo(
  ({
    children: e,
    direction: t = "vertical",
    chunkSize: n = 1
  }) => {
    const [a, r] = R.useState(() => ({
      cache: /* @__PURE__ */ new Map(),
      offsets: [],
      totalSize: 0
    })), l = R.useCallback((h, u) => {
      r((m) => {
        if (m.cache.get(h) === u)
          return m;
        const g = new Map(m.cache);
        g.set(h, u);
        const y = [], v = Array.from(g.keys()).reduce((C, S) => {
          const I = g.get(S) ?? 0;
          return y[S] = C, C += I, C;
        }, 0);
        return {
          cache: g,
          offsets: y,
          totalSize: v
        };
      });
    }, []), s = R.useMemo(() => {
      const h = {
        position: "relative"
      };
      return t === "vertical" ? h.minHeight = a.totalSize : (h.minWidth = a.totalSize, h.display = "flex"), h;
    }, [a.totalSize, t]), i = R.useRef(null), [c, o] = R.useState(null);
    R.useEffect(() => {
      if (!i.current) return;
      let h = i.current.parentElement;
      for (; h; ) {
        const u = window.getComputedStyle(h), m = u.overflow + u.overflowY + u.overflowX;
        if (m.includes("auto") || m.includes("scroll")) {
          o(h);
          return;
        }
        h = h.parentElement;
      }
      o(null);
    }, []);
    const f = R.useMemo(() => ({
      dimensionCache: a.cache,
      offsets: a.offsets,
      updateDimension: l,
      scrollContainer: c,
      direction: t,
      chunkSize: n
    }), [a.cache, a.offsets, l, c, t, n]), d = R.useMemo(() => R.Children.toArray(e), [e]), p = R.useMemo(() => {
      if (n <= 1)
        return d.map((u, m) => ({ children: [u], chunkIndex: m }));
      const h = [];
      for (let u = 0; u < d.length; u += n)
        h.push({
          children: d.slice(u, u + n),
          chunkIndex: Math.floor(u / n)
        });
      return h;
    }, [d, n]);
    return /* @__PURE__ */ b("div", { className: G.page, style: s, ref: i, children: /* @__PURE__ */ b(J.Provider, { value: f, children: p.map((h) => /* @__PURE__ */ b(ve, { chunkIndex: h.chunkIndex, children: h.children }, h.chunkIndex)) }) });
  }
);
Tt.displayName = "ParavirtualScroll";
const ve = R.memo(({ children: e, chunkIndex: t }) => {
  const { dimensionCache: n, updateDimension: a, offsets: r, scrollContainer: l, direction: s, chunkSize: i } = R.useContext(J), c = R.useRef(null), { isIntersecting: o } = me(c, {
    rootMargin: "100px",
    threshold: 0,
    root: l
  }), f = se(c, {});
  oe(() => {
    if (!f.rect || !o)
      return;
    const m = s === "vertical" ? f.rect.height : f.rect.width;
    a(t, m);
  }, [f.rect, o, s, t, a]);
  const d = R.useMemo(() => {
    if (o)
      return {};
    const m = n.get(t);
    return typeof m != "number" ? {} : s === "vertical" ? {
      height: m
    } : {
      width: m
    };
  }, [n, o, t, s]), p = n.has(t), h = o || !p, u = R.useMemo(() => {
    const m = r[t], T = {
      opacity: p ? 1 : 0
    };
    return s === "vertical" ? (T.top = m, T.width = "100%") : (T.left = m, T.height = "100%"), T;
  }, [p, t, r, s]);
  return /* @__PURE__ */ b("div", { ref: c, style: u, className: G.line, children: h ? /* @__PURE__ */ b(ae, { children: i <= 1 ? e[0] : e.map((m, T) => /* @__PURE__ */ b(R.Fragment, { children: m }, T)) }) : /* @__PURE__ */ b("div", { className: G.ghost, style: d }) });
});
ve.displayName = "ParavirtualScrollChunk";
const yt = R.memo(({ children: e, index: t }) => {
  const { dimensionCache: n, updateDimension: a, offsets: r, scrollContainer: l, direction: s } = R.useContext(J), i = R.useRef(null), { isIntersecting: c } = me(i, {
    rootMargin: "100px",
    threshold: 0,
    root: l
  }), o = se(i, {});
  oe(() => {
    if (!o.rect || !c)
      return;
    const u = s === "vertical" ? o.rect.height : o.rect.width;
    a(t, u);
  }, [o.rect, c, s, t, a]);
  const f = R.useMemo(() => {
    if (c)
      return {};
    const u = n.get(t);
    return typeof u != "number" ? {} : s === "vertical" ? {
      height: u
    } : {
      width: u
    };
  }, [n, c, t, s]), d = n.has(t), p = c || !d, h = R.useMemo(() => {
    const u = r[t], m = {
      opacity: d ? 1 : 0
    };
    return s === "vertical" ? (m.top = u, m.width = "100%") : (m.left = u, m.height = "100%"), m;
  }, [d, t, r, s]);
  return /* @__PURE__ */ b("div", { ref: i, style: h, className: G.line, children: p ? /* @__PURE__ */ b(ae, { children: e }) : /* @__PURE__ */ b("div", { className: G.ghost, style: f }) });
});
yt.displayName = "ParavirtualScrollItem";
const Dt = "lytcnt", St = "lytcontrols", Et = "lytviewscnt", Rt = "lytview", K = {
  container: Dt,
  controls: St,
  viewsContainer: Et,
  view: Rt
}, Ct = N.memo(({
  items: e,
  defaultSelected: t = 0,
  onViewChange: n,
  header: a,
  currentIndex: r,
  controlled: l = !1
}) => {
  const [s, i] = $(t), c = l && r !== void 0 ? r : s, o = H(null), f = H(null), d = H(!1), p = H(null);
  F(() => {
    const v = document.body.style.overflowX;
    return document.body.style.overflowX = "hidden", () => {
      document.body.style.overflowX = v;
    };
  }, []);
  const h = E((v, C = !0) => {
    if (!f.current || d.current) return;
    const S = f.current, I = -v * window.innerWidth;
    C ? (d.current = !0, S.style.transition = "transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94)", S.style.transform = `translateX(${I}px)`, setTimeout(() => {
      d.current = !1, S && (S.style.transition = "");
    }, 300)) : (S.style.transition = "", S.style.transform = `translateX(${I}px)`);
  }, []);
  F(() => {
    h(c, !1);
  }, [h, c]);
  const u = E((v) => {
    l || i(v);
  }, [l]), m = E(
    (v) => {
      if (d.current) return;
      const C = v.touches[0];
      p.current = {
        startX: C.clientX,
        startY: C.clientY,
        currentX: C.clientX,
        isDragging: !1,
        direction: null
      };
    },
    []
  ), T = E(
    (v) => {
      if (!p.current || !f.current || d.current) return;
      const C = v.touches[0], S = C.clientX - p.current.startX, I = C.clientY - p.current.startY;
      if (p.current.currentX = C.clientX, !p.current.direction && (Math.abs(S) > 8 || Math.abs(I) > 8) && (p.current.direction = Math.abs(S) > Math.abs(I) ? "horizontal" : "vertical", p.current.direction === "horizontal" && (p.current.isDragging = !0)), p.current.direction === "horizontal" && p.current.isDragging) {
        v.preventDefault();
        const x = f.current, j = -c * window.innerWidth;
        let Z = S;
        (c === 0 && S > 0 || c === e.length - 1 && S < 0) && (Z = S * 0.25), x.style.transform = `translateX(${j + Z}px)`;
      }
    },
    [c, e.length]
  ), g = E(() => {
    if (!p.current || !p.current.isDragging || d.current) {
      p.current = null;
      return;
    }
    const v = p.current.currentX - p.current.startX, C = window.innerWidth * 0.25;
    let S = c;
    Math.abs(v) > C && (v > 0 && c > 0 ? S = c - 1 : v < 0 && c < e.length - 1 && (S = c + 1)), u(S), h(S, !0), S !== c && (n == null || n(S)), p.current = null;
  }, [c, e.length, h, n, u]);
  F(() => {
    const v = o.current;
    if (v)
      return v.addEventListener("touchstart", m, { passive: !0 }), v.addEventListener("touchmove", T, { passive: !1 }), v.addEventListener("touchend", g, { passive: !0 }), v.addEventListener("touchcancel", g, { passive: !0 }), () => {
        v.removeEventListener("touchstart", m), v.removeEventListener("touchmove", T), v.removeEventListener("touchend", g), v.removeEventListener("touchcancel", g);
      };
  }, [m, T, g]);
  const y = M(() => e.map((v, C) => {
    const S = v.component, I = C === c, x = Math.abs(C - c) <= 1;
    return /* @__PURE__ */ b("div", { className: K.view, "aria-hidden": !I, children: x && S ? /* @__PURE__ */ b(S, {}) : null }, v.key || C);
  }), [e, c]);
  return /* @__PURE__ */ P("div", { ref: o, className: K.container, children: [
    a && /* @__PURE__ */ b("div", { className: K.controls, children: a }),
    /* @__PURE__ */ b("div", { ref: f, className: K.viewsContainer, children: y })
  ] });
});
Ct.displayName = "ViewSwitcher";
var A = /* @__PURE__ */ ((e) => (e.ACTIVATE_TAB = "ACTIVATE_TAB", e.CLOSE_TAB = "CLOSE_TAB", e.CREATE_TAB = "CREATE_TAB", e.MOVE_TAB = "MOVE_TAB", e.REORDER_TAB = "REORDER_TAB", e.SPLIT_PANEL = "SPLIT_PANEL", e.CLOSE_PANEL = "CLOSE_PANEL", e.RESIZE_PANEL = "RESIZE_PANEL", e.FOCUS_PANEL = "FOCUS_PANEL", e.START_DRAG = "START_DRAG", e.SET_DROP_TARGET = "SET_DROP_TARGET", e.END_DRAG = "END_DRAG", e.EXECUTE_DROP = "EXECUTE_DROP", e.PRUNE_EMPTY_NODES = "PRUNE_EMPTY_NODES", e.RESTORE_TAB = "RESTORE_TAB", e.SET_STATE = "SET_STATE", e))(A || {});
const wt = (e) => ({
  activateTab: (t, n) => {
    e({
      type: "ACTIVATE_TAB",
      payload: { leafId: t, tabId: n }
    });
  },
  closeTab: (t, n) => {
    e({
      type: "CLOSE_TAB",
      payload: { leafId: t, tabId: n }
    });
  },
  createTab: (t, n) => {
    n && e({
      type: "CREATE_TAB",
      payload: { leafId: t, tab: n }
    });
  },
  moveTab: (t, n, a, r) => {
    console.log("🎭 ACTION moveTab dispatching:", { sourceLeafId: t, targetLeafId: n, tabId: a, targetIndex: r }), e({
      type: "MOVE_TAB",
      payload: { sourceLeafId: t, targetLeafId: n, tabId: a, targetIndex: r }
    });
  },
  reorderTab: (t, n, a) => {
    console.log("🎭 ACTION reorderTab dispatching:", { leafId: t, tabId: n, newIndex: a }), e({
      type: "REORDER_TAB",
      payload: { leafId: t, tabId: n, newIndex: a }
    });
  },
  splitPanel: (t, n, a) => {
    e({
      type: "SPLIT_PANEL",
      payload: { leafId: t, orientation: n, ratio: a }
    });
  },
  closePanel: (t) => {
    e({
      type: "CLOSE_PANEL",
      payload: { panelId: t }
    });
  },
  resizePanel: (t, n) => {
    e({
      type: "RESIZE_PANEL",
      payload: { panelId: t, sizes: n }
    });
  },
  focusPanel: (t) => {
    e({
      type: "FOCUS_PANEL",
      payload: { leafId: t }
    });
  },
  startDrag: (t, n) => {
    e({
      type: "START_DRAG",
      payload: { tabId: t, sourceLeafId: n }
    });
  },
  setDropTarget: (t, n, a) => {
    e({
      type: "SET_DROP_TARGET",
      payload: { leafId: t, direction: n, insertIndex: a }
    });
  },
  endDrag: () => {
    e({
      type: "END_DRAG"
      /* END_DRAG */
    });
  },
  executeDrop: () => {
    e({
      type: "EXECUTE_DROP"
      /* EXECUTE_DROP */
    });
  },
  pruneEmptyNodes: () => {
    e({
      type: "PRUNE_EMPTY_NODES"
      /* PRUNE_EMPTY_NODES */
    });
  },
  restoreTab: () => {
    e({
      type: "RESTORE_TAB"
      /* RESTORE_TAB */
    });
  }
}), re = () => Math.random().toString(36).substr(2, 9), B = (e, t) => {
  if (e.id === t) return e;
  if (e.type === "split")
    for (const n of e.children) {
      const a = B(n, t);
      if (a) return a;
    }
  return null;
}, Te = (e, t) => {
  if (e.type === "split") {
    const n = e.children.findIndex((a) => a.id === t);
    if (n !== -1)
      return { parent: e, index: n };
    for (const a of e.children) {
      const r = Te(a, t);
      if (r) return r;
    }
  }
  return null;
}, ye = (e, t) => {
  if (e.id === t) return null;
  if (e.type === "split") {
    const n = e.children.map((a) => ye(a, t)).filter((a) => a !== null);
    return { ...e, children: n };
  }
  return e;
}, Y = (e) => {
  if (e.type === "leaf")
    return e.tabs.length > 0 ? e : null;
  const t = e.children.map((a) => Y(a)).filter((a) => a !== null);
  if (t.length === 0)
    return null;
  if (t.length === 1)
    return t[0];
  const n = t.map(() => 1 / t.length);
  return {
    ...e,
    children: t,
    sizes: n
  };
}, Nt = (e, t, n) => {
  const a = (r) => r.id === t && r.type === "leaf" ? { ...r, activeTabId: n } : r.type === "split" ? { ...r, children: r.children.map(a) } : r;
  return {
    ...e,
    root: a(e.root),
    focusedLeafId: t
  };
}, Lt = (e, t, n) => {
  const a = B(e.root, t);
  if (!a || a.type !== "leaf") return e;
  const r = a.tabs.findIndex((p) => p.id === n);
  if (r === -1) return e;
  const l = a.tabs[r], s = a.tabs.filter((p) => p.id !== n), i = [...e.recentlyClosedTabs || [], l];
  let c = a.activeTabId;
  a.activeTabId === n && (r < s.length ? c = s[r].id : s.length > 0 ? c = s[s.length - 1].id : c = "");
  const o = (p) => p.id === t && p.type === "leaf" ? { ...p, tabs: s, activeTabId: c } : p.type === "split" ? { ...p, children: p.children.map(o) } : p, f = o(e.root), d = Y(f);
  return {
    ...e,
    root: d || W(),
    recentlyClosedTabs: i.slice(-10)
    // Keep last 10 closed tabs
  };
}, De = (e, t, n) => {
  const a = (r) => r.id === t && r.type === "leaf" ? {
    ...r,
    tabs: [...r.tabs, n],
    activeTabId: n.id
  } : r.type === "split" ? { ...r, children: r.children.map(a) } : r;
  return {
    ...e,
    root: a(e.root),
    focusedLeafId: t
  };
}, ne = (e, t, n, a, r) => {
  const l = B(e.root, t), s = B(e.root, n);
  if (!l || !s || l.type !== "leaf" || s.type !== "leaf")
    return e;
  const i = l.tabs.find((T) => T.id === a);
  if (!i) return e;
  const c = l.tabs.filter((T) => T.id !== a);
  let o = l.activeTabId;
  if (l.activeTabId === a && c.length > 0) {
    const T = l.tabs.findIndex((g) => g.id === a);
    T < c.length ? o = c[T].id : o = c[c.length - 1].id;
  }
  const f = r ?? s.tabs.length, d = Math.max(0, Math.min(f, s.tabs.length)), p = [...s.tabs];
  p.splice(d, 0, i), console.log("🚚 Move Tab:", {
    tabId: a,
    sourceLeafId: t,
    targetLeafId: n,
    requestedIndex: r,
    insertIndex: f,
    clampedInsertIndex: d,
    targetTabsLength: s.tabs.length,
    newTargetTabsLength: p.length
  });
  const h = (T) => T.id === t && T.type === "leaf" ? { ...T, tabs: c, activeTabId: o } : T.id === n && T.type === "leaf" ? { ...T, tabs: p, activeTabId: i.id } : T.type === "split" ? { ...T, children: T.children.map(h) } : T, u = h(e.root), m = Y(u);
  return {
    ...e,
    root: m || W(),
    focusedLeafId: n
  };
}, ge = (e, t, n, a = 0.5) => {
  const r = B(e.root, t);
  if (!r || r.type !== "leaf") return e;
  const s = {
    id: re(),
    type: "leaf",
    tabs: [],
    activeTabId: ""
  }, i = {
    id: re(),
    type: "split",
    orientation: n,
    children: [r, s],
    sizes: [a, 1 - a]
  }, c = (o) => o.id === t ? i : o.type === "split" ? { ...o, children: o.children.map(c) } : o;
  return e.root.id === t ? { ...e, root: i } : { ...e, root: c(e.root) };
}, At = (e, t, n) => {
  const a = (r) => r.id === t && r.type === "split" ? { ...r, sizes: n } : r.type === "split" ? { ...r, children: r.children.map(a) } : r;
  return { ...e, root: a(e.root) };
}, It = (e, t, n, a) => {
  const r = (l) => {
    if (l.id === t && l.type === "leaf") {
      const s = l.tabs.findIndex((f) => f.id === n);
      if (s === -1) return l;
      const i = [...l.tabs], [c] = i.splice(s, 1), o = Math.max(0, Math.min(a, i.length));
      return i.splice(o, 0, c), console.log("🔄 REORDER:", {
        tabId: n,
        from: s,
        to: o,
        originalTabs: l.tabs.map((f) => f.id),
        newTabs: i.map((f) => f.id)
      }), { ...l, tabs: i };
    }
    return l.type === "split" ? { ...l, children: l.children.map(r) } : l;
  };
  return { ...e, root: r(e.root) };
}, Ot = (e) => {
  if (!e.recentlyClosedTabs || e.recentlyClosedTabs.length === 0)
    return e;
  const t = e.recentlyClosedTabs[e.recentlyClosedTabs.length - 1], n = e.recentlyClosedTabs.slice(0, -1), a = e.focusedLeafId || Se(e.root);
  return a ? De(
    { ...e, recentlyClosedTabs: n },
    a,
    t
  ) : e;
}, Se = (e) => {
  if (e.type === "leaf") return e.id;
  if (e.type === "split")
    for (const t of e.children) {
      const n = Se(t);
      if (n) return n;
    }
  return null;
}, W = () => ({
  id: re(),
  type: "leaf",
  tabs: [],
  activeTabId: ""
}), Pt = (e, t) => {
  switch (t.type) {
    case A.ACTIVATE_TAB:
      return {
        ...e,
        panelState: Nt(
          e.panelState,
          t.payload.leafId,
          t.payload.tabId
        )
      };
    case A.CLOSE_TAB:
      return {
        ...e,
        panelState: Lt(
          e.panelState,
          t.payload.leafId,
          t.payload.tabId
        )
      };
    case A.CREATE_TAB:
      return {
        ...e,
        panelState: De(
          e.panelState,
          t.payload.leafId,
          t.payload.tab
        )
      };
    case A.MOVE_TAB:
      console.log("📢 REDUCER MOVE_TAB:", t.payload);
      const n = ne(
        e.panelState,
        t.payload.sourceLeafId,
        t.payload.targetLeafId,
        t.payload.tabId,
        t.payload.targetIndex
      );
      return console.log("📢 REDUCER MOVE_TAB result:", {
        oldState: e.panelState,
        newState: n,
        changed: JSON.stringify(e.panelState) !== JSON.stringify(n)
      }), {
        ...e,
        panelState: n
      };
    case A.REORDER_TAB:
      console.log("📢 REDUCER REORDER_TAB:", t.payload);
      const a = It(
        e.panelState,
        t.payload.leafId,
        t.payload.tabId,
        t.payload.newIndex
      );
      return console.log("📢 REDUCER REORDER_TAB result:", {
        oldState: e.panelState,
        newState: a,
        changed: JSON.stringify(e.panelState) !== JSON.stringify(a)
      }), {
        ...e,
        panelState: a
      };
    case A.SPLIT_PANEL:
      return {
        ...e,
        panelState: ge(
          e.panelState,
          t.payload.leafId,
          t.payload.orientation,
          t.payload.ratio
        )
      };
    case A.CLOSE_PANEL: {
      const r = ye(e.panelState.root, t.payload.panelId), l = r ? Y(r) : null;
      return {
        ...e,
        panelState: {
          ...e.panelState,
          root: l || W()
        }
      };
    }
    case A.RESIZE_PANEL:
      return {
        ...e,
        panelState: At(
          e.panelState,
          t.payload.panelId,
          t.payload.sizes
        )
      };
    case A.FOCUS_PANEL:
      return {
        ...e,
        panelState: {
          ...e.panelState,
          focusedLeafId: t.payload.leafId
        }
      };
    case A.START_DRAG:
      return {
        ...e,
        dragState: {
          isDragging: !0,
          draggedTabId: t.payload.tabId,
          sourceLeafId: t.payload.sourceLeafId
        }
      };
    case A.SET_DROP_TARGET:
      return {
        ...e,
        dragState: {
          ...e.dragState,
          dropTargetLeafId: t.payload.leafId,
          dropDirection: t.payload.direction,
          insertIndex: t.payload.insertIndex
        }
      };
    case A.END_DRAG:
      return {
        ...e,
        dragState: {
          isDragging: !1
        }
      };
    case A.EXECUTE_DROP: {
      const { dragState: r } = e;
      if (!r.isDragging || !r.draggedTabId || !r.sourceLeafId)
        return {
          ...e,
          dragState: { isDragging: !1 }
        };
      let l = e.panelState;
      if (r.dropTargetLeafId && r.dropDirection) {
        const s = r.dropDirection === "left" || r.dropDirection === "right" ? "horizontal" : "vertical", i = ge(
          l,
          r.dropTargetLeafId,
          s,
          0.5
        );
        if (B(i.root, r.dropTargetLeafId)) {
          const o = Te(i.root, r.dropTargetLeafId);
          if (o && o.parent.type === "split") {
            const f = o.parent.children.findIndex(
              (h) => h.id === r.dropTargetLeafId
            );
            let d;
            r.dropDirection === "right" || r.dropDirection === "bottom" ? d = f + 1 : d = f;
            const p = o.parent.children[d];
            p && p.type === "leaf" && (l = ne(
              i,
              r.sourceLeafId,
              p.id,
              r.draggedTabId
            ));
          }
        }
      } else r.dropTargetLeafId && (l = ne(
        l,
        r.sourceLeafId,
        r.dropTargetLeafId,
        r.draggedTabId,
        r.insertIndex
      ));
      return {
        ...e,
        panelState: l,
        dragState: { isDragging: !1 }
      };
    }
    case A.PRUNE_EMPTY_NODES: {
      const r = Y(e.panelState.root);
      return {
        ...e,
        panelState: {
          ...e.panelState,
          root: r || W()
        }
      };
    }
    case A.RESTORE_TAB:
      return {
        ...e,
        panelState: Ot(e.panelState)
      };
    case A.SET_STATE:
      return {
        ...e,
        panelState: t.payload.state
      };
    default:
      return e;
  }
}, _t = (e) => {
  const t = {
    root: W(),
    pruneEmptyPanel: !0,
    recentlyClosedTabs: []
  };
  return {
    panelState: e || t,
    dragState: {
      isDragging: !1
    }
  };
}, Ee = Le(null), z = () => {
  const e = Ae(Ee);
  if (!e)
    throw new Error("usePanelContext must be used within a PanelProvider");
  return e;
}, Mt = {
  pruneEmptyGroups: !0,
  enableTabDrag: !0,
  enablePanelSplit: !0,
  enableTabReorder: !0,
  minPanelSize: 100,
  splitterSize: 4,
  showCloseButton: !0,
  maxTabWidth: 200,
  minTabWidth: 80,
  enableKeyboardShortcuts: !0,
  keyBindings: {
    closeTab: ["Ctrl+W", "Cmd+W"],
    newTab: ["Ctrl+T", "Cmd+T"],
    nextTab: ["Ctrl+Tab", "Cmd+Option+ArrowRight"],
    prevTab: ["Ctrl+Shift+Tab", "Cmd+Option+ArrowLeft"],
    splitRight: ["Ctrl+\\", "Cmd+\\"],
    splitDown: ["Ctrl+K Ctrl+\\", "Cmd+K Cmd+\\"],
    focusGroup: ["Ctrl+1", "Cmd+1"],
    moveTabRight: ["Ctrl+Alt+ArrowRight", "Cmd+Ctrl+ArrowRight"],
    moveTabLeft: ["Ctrl+Alt+ArrowLeft", "Cmd+Ctrl+ArrowLeft"]
  }
}, zt = ({
  children: e,
  value: t,
  defaultValue: n,
  onChange: a,
  options: r = {}
}) => {
  const l = M(
    () => ({ ...Mt, ...r }),
    [r]
  ), [s, i] = Ie(
    Pt,
    _t(t || n)
  ), c = t || s.panelState, o = s.dragState, f = N.useRef(s.panelState);
  N.useEffect(() => {
    a && JSON.stringify(f.current) !== JSON.stringify(s.panelState) && (f.current = s.panelState, a(s.panelState));
  }, [s.panelState, a]);
  const d = M(() => wt(i), [i]), p = E((w, L) => {
    d.activateTab(w, L);
  }, [d]), h = E((w, L) => {
    d.closeTab(w, L);
  }, [d]), u = E((w, L) => {
    L && d.createTab(w, L);
  }, [d]), m = E((w, L, _, de) => {
    console.log("🚚 CONTEXT moveTab called:", { sourceLeafId: w, targetLeafId: L, tabId: _, targetIndex: de }), d.moveTab(w, L, _, de);
  }, [d]), T = E((w, L, _) => {
    console.log("🔄 CONTEXT reorderTab called:", { leafId: w, tabId: L, newIndex: _ }), d.reorderTab(w, L, _);
  }, [d]), g = E((w, L, _) => {
    d.splitPanel(w, L, _);
  }, [d]), y = E((w) => {
    d.closePanel(w);
  }, [d]), v = E((w, L) => {
    d.resizePanel(w, L);
  }, [d]), C = E((w) => {
    d.focusPanel(w);
  }, [d]), S = E((w, L) => {
    console.log("🚀 CONTEXT startDrag called:", { tabId: w, sourceLeafId: L, enableTabDrag: l.enableTabDrag }), l.enableTabDrag ? d.startDrag(w, L) : console.log("❌ Tab drag disabled in options");
  }, [d, l.enableTabDrag]), I = E((w, L, _) => {
    d.setDropTarget(w, L, _);
  }, [d]), x = E(() => {
    d.endDrag();
  }, [d]), j = E(() => {
    d.executeDrop();
  }, [d]), Z = E(() => {
    l.pruneEmptyGroups && d.pruneEmptyNodes();
  }, [d, l.pruneEmptyGroups]), ie = E(() => {
    d.restoreTab();
  }, [d]), ce = M(() => ({
    activateTab: p,
    closeTab: h,
    createTab: u,
    moveTab: m,
    reorderTab: T,
    splitPanel: g,
    closePanel: y,
    resizePanel: v,
    focusPanel: C,
    startDrag: S,
    setDropTarget: I,
    endDrag: x,
    executeDrop: j,
    pruneEmptyNodes: Z,
    restoreTab: ie
  }), [
    p,
    h,
    u,
    m,
    T,
    g,
    y,
    v,
    C,
    S,
    I,
    x,
    j,
    Z,
    ie
  ]), Ce = M(
    () => ({
      state: c,
      dragState: o,
      actions: ce,
      options: l
    }),
    [c, o, ce, l]
  );
  return /* @__PURE__ */ b(Ee.Provider, { value: Ce, children: e });
}, Cn = () => {
  const { state: e } = z();
  return e;
}, q = () => {
  const { dragState: e } = z();
  return e;
}, le = () => {
  const { actions: e } = z();
  return e;
}, wn = () => {
  const { options: e } = z();
  return e;
}, Nn = (e) => {
  const { actions: t } = z();
  return M(() => ({
    activateTab: (n) => t.activateTab(e, n),
    closeTab: (n) => t.closeTab(e, n),
    createTab: (n) => t.createTab(e, n),
    reorderTab: (n, a) => t.reorderTab(e, n, a)
  }), [t, e]);
}, Ln = (e) => {
  const { actions: t } = z();
  return M(() => ({
    splitPanel: (n, a) => t.splitPanel(e, n, a),
    closePanel: () => t.closePanel(e),
    focusPanel: () => t.focusPanel(e)
  }), [t, e]);
}, An = () => {
  const { actions: e } = z();
  return M(() => ({
    startDrag: e.startDrag,
    setDropTarget: e.setDropTarget,
    endDrag: e.endDrag,
    executeDrop: e.executeDrop
  }), [e]);
}, xt = "pnlpnl", $t = "pnlpnlcnt", Bt = "pnlsplitcnt", Zt = "pnlpnlChild", Xt = "pnlsplitter", Ut = "pnlvtspl", Ht = "pnlhzspl", Vt = "pnlspl", Ft = "pnlleafcnt", Gt = "pnldrotar", Yt = "pnltabBar", Wt = "pnltabs", jt = "pnltab", kt = "pnlactTab", Kt = "pnltabdrg", Jt = "pnltabdraove", qt = "pnltabdrozon", Qt = "pnltabTitle", en = "pnltabe5v", tn = "pnlnewtab", nn = "pnltabctn", rn = "pnldrozonlay", an = "pnldragact", on = "pnldropZone", sn = "pnlact", ln = "pnldrozonlef", cn = "pnldrozonrig", dn = "pnldrozontop", un = "pnldrozonbot", pn = "pnldrozoncen", fn = "pnldrg", gn = "pnlresizing", D = {
  panel: xt,
  panelContainer: $t,
  splitContainer: Bt,
  panelChild: Zt,
  splitter: Xt,
  verticalSplitter: Ut,
  horizontalSplitter: Ht,
  splitterDragging: Vt,
  leafContainer: Ft,
  dropTarget: Gt,
  tabBar: Yt,
  tabs: Wt,
  tab: jt,
  activeTab: kt,
  tabDragging: Kt,
  tabDragOver: Jt,
  tabDropZone: qt,
  tabTitle: Qt,
  tabCloseButton: en,
  newTabButton: tn,
  tabContent: nn,
  dropZoneLayer: rn,
  dragActive: an,
  dropZone: on,
  active: sn,
  dropZoneLeft: ln,
  dropZoneRight: cn,
  dropZoneTop: dn,
  dropZoneBottom: un,
  dropZoneCenter: pn,
  dragging: fn,
  resizing: gn
}, In = ({
  value: e,
  defaultValue: t,
  onChange: n,
  style: a,
  className: r,
  children: l,
  onRequestTabCreate: s,
  onTabClose: i,
  onTabMove: c,
  onPanelSplit: o,
  onPanelClose: f,
  renderTabBar: d,
  renderSplitter: p,
  renderDropZone: h,
  options: u
}) => /* @__PURE__ */ b(
  zt,
  {
    value: e,
    defaultValue: t,
    onChange: n,
    options: u,
    children: /* @__PURE__ */ b("div", { className: `${D.panel} ${r || ""}`, style: a, children: /* @__PURE__ */ b(
      bn,
      {
        children: l,
        onRequestTabCreate: s,
        onTabClose: i,
        onTabMove: c,
        onPanelSplit: o,
        onPanelClose: f,
        renderTabBar: d,
        renderSplitter: p,
        renderDropZone: h
      }
    ) })
  }
), bn = (e) => {
  const { state: t } = z(), n = q();
  return /* @__PURE__ */ b("div", { className: `${D.panelContainer} ${n.isDragging ? D.dragActive : ""}`, children: /* @__PURE__ */ b(Re, { node: t.root, ...e }) });
}, Re = N.memo(({ node: e, ...t }) => e.type === "split" ? /* @__PURE__ */ b(hn, { node: e, ...t }) : /* @__PURE__ */ b(mn, { node: e, ...t })), hn = N.memo(({
  node: e,
  renderSplitter: t,
  ...n
}) => {
  const a = le(), [r, l] = $(!1), s = H(null), i = E(
    (o, f) => {
      if (!s.current) return;
      const d = e.orientation === "horizontal" ? s.current.offsetWidth : s.current.offsetHeight, p = [...e.sizes], h = p.reduce((y, v) => y + v, 0), u = p.map((y) => y / h * d);
      u[o] += f, u[o + 1] -= f;
      const m = 50;
      if (u[o] < m) {
        const y = m - u[o];
        u[o] = m, u[o + 1] -= y;
      }
      if (u[o + 1] < m) {
        const y = m - u[o + 1];
        u[o + 1] = m, u[o] -= y;
      }
      const T = u.reduce((y, v) => y + v, 0), g = u.map((y) => y / T);
      a.resizePanel(e.id, g);
    },
    [e.id, e.orientation, e.sizes, a]
  ), c = {
    display: "flex",
    flexDirection: e.orientation === "horizontal" ? "row" : "column",
    width: "100%",
    height: "100%"
  };
  return /* @__PURE__ */ b("div", { ref: s, className: D.splitContainer, style: c, children: e.children.map((o, f) => /* @__PURE__ */ P(N.Fragment, { children: [
    /* @__PURE__ */ b(
      "div",
      {
        className: D.panelChild,
        style: {
          flex: e.sizes[f] || 1,
          minWidth: e.orientation === "horizontal" ? "50px" : void 0,
          minHeight: e.orientation === "vertical" ? "50px" : void 0
        },
        children: /* @__PURE__ */ b(Re, { node: o, ...n })
      }
    ),
    f < e.children.length - 1 && /* @__PURE__ */ b(
      Tn,
      {
        orientation: e.orientation,
        onResize: (d) => i(f, d),
        onResizeStart: () => l(!0),
        onResizeEnd: () => l(!1),
        isResizing: r,
        renderSplitter: t
      }
    )
  ] }, o.id)) });
}), mn = N.memo(({
  node: e,
  children: t,
  onRequestTabCreate: n,
  onTabClose: a,
  onTabMove: r,
  renderTabBar: l,
  ...s
}) => {
  const i = le(), c = q(), o = e.tabs.find((g) => g.id === e.activeTabId), f = E(
    (g) => {
      i.activateTab(e.id, g);
    },
    [i, e.id]
  ), d = E(
    (g) => {
      (a ? a(g, e.id) : !0) !== !1 && i.closeTab(e.id, g);
    },
    [i, e.id, a]
  ), p = E(() => {
    if (n) {
      const g = n(e.id);
      g && i.createTab(e.id, g);
    }
  }, [i, e.id, n]), h = E(
    (g, y) => {
      console.log("🚀 Tab Drag Start:", { tabId: g, leafId: e.id }), y.dataTransfer.effectAllowed = "move", y.dataTransfer.setData("text/tab-id", g), i.startDrag(g, e.id);
    },
    [i, e.id]
  ), u = E(() => {
    console.log("🏁 Tab Drag End - Scheduling cleanup"), setTimeout(() => {
      console.log("🧹 Executing endDrag cleanup"), i.endDrag();
    }, 200);
  }, [i]), m = E(
    (g, y) => {
      if (console.log("📍 LEAF DROP:", {
        draggedTabId: g,
        index: y,
        sourceLeaf: c.sourceLeafId,
        targetLeaf: e.id,
        currentDragState: c
      }), !g || !c.sourceLeafId) {
        console.log("❌ Missing essential data:", { draggedTabId: g, sourceLeafId: c.sourceLeafId });
        return;
      }
      console.log("✅ Proceeding with drop execution"), c.sourceLeafId === e.id ? (console.log("🔄 REORDER in same panel"), i.reorderTab(e.id, g, y)) : (console.log("🚚 MOVE to different panel"), (r ? r(g, c.sourceLeafId, e.id, y) : !0) !== !1 && i.moveTab(c.sourceLeafId, e.id, g, y));
    },
    [i, e.id, c, r]
  ), T = c.dropTargetLeafId === e.id;
  return /* @__PURE__ */ P("div", { className: `${D.leafContainer} ${T ? D.dropTarget : ""} ${c.isDragging ? D.dragging : ""}`, children: [
    /* @__PURE__ */ b(yn, { leafId: e.id }),
    l ? l({
      leafId: e.id,
      tabs: e.tabs,
      activeTabId: e.activeTabId,
      onTabClick: f,
      onTabClose: d,
      onTabDragStart: h,
      onTabDragEnd: u,
      onTabDrop: m,
      onNewTab: p,
      isDropTarget: T
    }) : /* @__PURE__ */ b(
      vn,
      {
        leafId: e.id,
        tabs: e.tabs,
        activeTabId: e.activeTabId,
        onTabClick: f,
        onTabClose: d,
        onTabDragStart: h,
        onTabDragEnd: u,
        onTabDrop: m,
        onNewTab: p,
        isDropTarget: T
      }
    ),
    /* @__PURE__ */ b("div", { className: D.tabContent, children: o && t(o) })
  ] });
}), vn = N.memo(({
  tabs: e,
  activeTabId: t,
  onTabClick: n,
  onTabClose: a,
  onTabDragStart: r,
  onTabDragEnd: l,
  onTabDrop: s,
  onNewTab: i,
  isDropTarget: c
}) => {
  const [o, f] = $(null), d = q(), p = E((g, y) => {
    console.log("🎯 START Drag:", { tabId: y }), g.dataTransfer.effectAllowed = "move", g.dataTransfer.setData("text/tab-id", y), r(y, g);
  }, [r]), h = E(() => {
    console.log("🏁 DefaultTabBar END Drag - clearing UI state only"), f(null), setTimeout(() => {
      console.log("🏁 DefaultTabBar calling onTabDragEnd"), l();
    }, 50);
  }, [l]), u = E((g, y) => {
    g.preventDefault(), g.dataTransfer.dropEffect = "move", f(y), console.log("🎯 OVER:", y);
  }, []), m = E(() => {
    f(null);
  }, []), T = E((g, y) => {
    g.preventDefault(), g.stopPropagation();
    const v = g.dataTransfer.getData("text/tab-id");
    console.log("💧 TabBar DROP:", { draggedTabId: v, dropIndex: y, isDragging: d.isDragging }), v ? (console.log("🚀 Executing tab drop immediately"), s(v, y)) : console.log("❌ No dragged tab ID found"), f(null);
  }, [s, d.isDragging]);
  return /* @__PURE__ */ P("div", { className: `${D.tabBar} ${c ? D.dropTarget : ""}`, children: [
    /* @__PURE__ */ P("div", { className: D.tabs, children: [
      e.map((g, y) => {
        const v = d.isDragging && d.draggedTabId === g.id, C = o === y;
        return /* @__PURE__ */ P(
          "div",
          {
            className: `${D.tab} ${g.id === t ? D.activeTab : ""} ${v ? D.tabDragging : ""} ${C ? D.tabDragOver : ""}`,
            draggable: !0,
            onDragStart: (S) => p(S, g.id),
            onDragEnd: h,
            onDragOver: (S) => u(S, y),
            onDragLeave: m,
            onDrop: (S) => T(S, y),
            onClick: () => n(g.id),
            children: [
              /* @__PURE__ */ b("span", { className: D.tabTitle, children: g.title }),
              g.isClosable !== !1 && /* @__PURE__ */ b(
                "button",
                {
                  className: D.tabCloseButton,
                  onClick: (S) => {
                    S.stopPropagation(), a(g.id);
                  },
                  children: "×"
                }
              )
            ]
          },
          g.id
        );
      }),
      /* @__PURE__ */ b(
        "div",
        {
          className: `${D.tabDropZone} ${o === e.length ? D.tabDragOver : ""}`,
          onDragOver: (g) => u(g, e.length),
          onDragLeave: m,
          onDrop: (g) => T(g, e.length)
        }
      )
    ] }),
    /* @__PURE__ */ b("button", { className: D.newTabButton, onClick: i, children: "+" })
  ] });
}), Tn = N.memo(({
  orientation: e,
  onResize: t,
  onResizeStart: n,
  onResizeEnd: a,
  isResizing: r,
  renderSplitter: l
}) => {
  const [s, i] = $(!1), [c, o] = $({ x: 0, y: 0 }), f = E(
    (d) => {
      i(!0), o({ x: d.clientX, y: d.clientY }), n();
      const p = (u) => {
        const m = e === "horizontal" ? u.clientX - c.x : u.clientY - c.y;
        t(m), o({ x: u.clientX, y: u.clientY });
      }, h = () => {
        i(!1), a(), document.removeEventListener("mousemove", p), document.removeEventListener("mouseup", h);
      };
      document.addEventListener("mousemove", p), document.addEventListener("mouseup", h);
    },
    [e, t, n, a, c]
  );
  return l ? l({
    orientation: e,
    onResize: t,
    onResizeStart: n,
    onResizeEnd: a,
    isResizing: r
  }) : /* @__PURE__ */ b(
    "div",
    {
      className: `${D.splitter} ${e === "horizontal" ? D.verticalSplitter : D.horizontalSplitter} ${s ? D.splitterDragging : ""}`,
      onMouseDown: f
    }
  );
}), yn = N.memo(({ leafId: e }) => {
  const t = q(), n = le(), [a, r] = $(null), l = E(
    (o) => {
      console.log("💧 DropZone Drop:", { leafId: e, direction: o, dragState: t }), n.setDropTarget(e, o), n.executeDrop(), r(null);
    },
    [n, e, t]
  ), s = E((o) => {
    t.sourceLeafId !== e ? (console.log("🔥 DropZone activated:", { zone: o, leafId: e, sourceLeafId: t.sourceLeafId }), r(o)) : console.log("🚫 DropZone ignored (same panel):", { zone: o, leafId: e });
  }, [t.sourceLeafId, e]), i = E(() => {
    r(null);
  }, []);
  return t.isDragging ? t.sourceLeafId === e ? (console.log("🚫 DropZone hidden for same panel operation"), null) : /* @__PURE__ */ b("div", { className: D.dropZoneLayer, children: /* @__PURE__ */ P(ae, { children: [
    /* @__PURE__ */ b(
      "div",
      {
        className: `${D.dropZone} ${D.dropZoneLeft} ${a === "left" ? D.active : ""}`,
        onDragOver: (o) => o.preventDefault(),
        onDragEnter: () => s("left"),
        onDragLeave: i,
        onDrop: (o) => {
          o.preventDefault(), o.dataTransfer.getData("text/tab-id") && l("left");
        }
      }
    ),
    /* @__PURE__ */ b(
      "div",
      {
        className: `${D.dropZone} ${D.dropZoneRight} ${a === "right" ? D.active : ""}`,
        onDragOver: (o) => o.preventDefault(),
        onDragEnter: () => s("right"),
        onDragLeave: i,
        onDrop: (o) => {
          o.preventDefault(), o.dataTransfer.getData("text/tab-id") && l("right");
        }
      }
    ),
    /* @__PURE__ */ b(
      "div",
      {
        className: `${D.dropZone} ${D.dropZoneTop} ${a === "top" ? D.active : ""}`,
        onDragOver: (o) => o.preventDefault(),
        onDragEnter: () => s("top"),
        onDragLeave: i,
        onDrop: (o) => {
          o.preventDefault(), o.dataTransfer.getData("text/tab-id") && l("top");
        }
      }
    ),
    /* @__PURE__ */ b(
      "div",
      {
        className: `${D.dropZone} ${D.dropZoneBottom} ${a === "bottom" ? D.active : ""}`,
        onDragOver: (o) => o.preventDefault(),
        onDragEnter: () => s("bottom"),
        onDragLeave: i,
        onDrop: (o) => {
          o.preventDefault(), o.dataTransfer.getData("text/tab-id") && l("bottom");
        }
      }
    ),
    /* @__PURE__ */ b(
      "div",
      {
        className: `${D.dropZone} ${D.dropZoneCenter} ${a === "center" ? D.active : ""}`,
        onDragOver: (o) => o.preventDefault(),
        onDragEnter: () => s("center"),
        onDragLeave: i,
        onDrop: (o) => {
          o.preventDefault(), o.dataTransfer.getData("text/tab-id") && l();
        }
      }
    )
  ] }) }) : null;
});
export {
  rt as AppLayout,
  Je as AutoSizer,
  je as HeaderMainLayout,
  In as Panel,
  A as PanelActionType,
  zt as PanelProvider,
  Tt as ParavirtualScroll,
  $e as ScrollView,
  Fe as SidebarLayout,
  pt as StickyHeader,
  Ct as ViewSwitcher,
  _t as createInitialState,
  wt as createPanelActions,
  Pt as panelReducer,
  An as useDragOperations,
  q as useDragState,
  le as usePanelActions,
  z as usePanelContext,
  Ln as usePanelOperations,
  wn as usePanelOptions,
  Cn as usePanelState,
  Nn as useTabOperations
};