react-panel-layout 0.5.2 → 0.6.1

package/dist/FloatingWindow-CUXnEtrb.js

@@ -0,0 +1,827 @@
+import { jsx as p, jsxs as F, Fragment as N } from "react/jsx-runtime";
+import * as i from "react";
+import { F as q, e as j, a as K, b as J, f as Q, d as ue } from "./FloatingPanelFrame-3eU9AwPo.js";
+import { x as ce, y as le, z as de, A as fe, B as pe, E as me, I as he } from "./styles-NkjuMOVS.js";
+import { u as we, a as ge, b as Se, i as be, c as Ee, m as Ce } from "./useNativeGestureGuard-CGYo6O0r.js";
+import { createPortal as De } from "react-dom";
+import { u as Pe } from "./useContentCache-CO3LYNmz.js";
+const ve = "data-swipe-safe-zone", Lt = ({
+  children: e,
+  className: t,
+  style: n
+}) => /* @__PURE__ */ p(
+  "div",
+  {
+    className: t,
+    style: n,
+    "data-swipe-safe-zone": "true",
+    children: e
+  }
+);
+function Re(e, t) {
+  let n = e;
+  for (; n && n !== t; ) {
+    if (n.hasAttribute(ve))
+      return !0;
+    n = n.parentElement;
+  }
+  return !1;
+}
+function ee(e) {
+  switch (e) {
+    case "left":
+    case "right":
+      return "x";
+    case "top":
+    case "bottom":
+      return "y";
+  }
+}
+function G(e) {
+  switch (e) {
+    case "left":
+      return -1;
+    case "right":
+      return 1;
+    case "top":
+      return -1;
+    case "bottom":
+      return 1;
+  }
+}
+function ye(e) {
+  return G(e) * -1;
+}
+const Me = 0.3, Te = 0.5;
+function xe(e, t) {
+  return t === "x" ? e.clientWidth : e.clientHeight;
+}
+function Ae(e, t, n) {
+  return n === "x" ? t.x - e.x : t.y - e.y;
+}
+const Le = {
+  idle: "idle",
+  ended: "ended"
+};
+function _e(e) {
+  return Le[e] ?? "operating";
+}
+function Oe(e, t, n) {
+  const r = e * n;
+  return t === "x" ? { x: r, y: 0 } : { x: 0, y: r };
+}
+function We(e, t) {
+  return Math.abs(t === "x" ? e.x : e.y);
+}
+function Fe(e, t) {
+  return e ? !t : !1;
+}
+function Ie(e, t) {
+  return e ? t : !1;
+}
+function ke(e, t) {
+  return e ? !t : !1;
+}
+function Ne(e, t) {
+  return e === "idle" ? !1 : t;
+}
+function Be(e, t, n) {
+  if (!e || !t)
+    return 0;
+  const r = Math.max(1, t.timestamp - e.timestamp);
+  return n / r;
+}
+function $e(e) {
+  const {
+    edgeContainerRef: t,
+    drawerContentRef: n,
+    direction: r,
+    isOpen: o,
+    onSwipeOpen: s,
+    onSwipeClose: c,
+    enableEdgeSwipeOpen: d = !0,
+    enableSwipeClose: a = !0,
+    edgeWidth: u = 20,
+    dismissThreshold: l = Me
+  } = e, f = ee(r), w = G(r), b = ye(r), m = i.useRef(0);
+  i.useLayoutEffect(() => {
+    const S = n.current;
+    if (!S)
+      return;
+    const D = () => {
+      m.current = xe(S, f);
+    };
+    D();
+    const M = new ResizeObserver(D);
+    return M.observe(S), () => M.disconnect();
+  }, [n, f]);
+  const g = i.useCallback(
+    (S) => {
+      S.direction === b && s();
+    },
+    [b, s]
+  ), {
+    isEdgeGesture: E,
+    state: v,
+    containerProps: L
+  } = we({
+    containerRef: t,
+    edge: r,
+    edgeWidth: u,
+    enabled: Fe(d, o),
+    onSwipeEnd: g
+  }), { containerProps: I } = ge({
+    containerRef: t,
+    active: E,
+    preventEdgeBack: !0,
+    preventOverscroll: !0,
+    edgeWidth: u
+  }), { state: h, onPointerDown: _ } = Se({
+    enabled: Ie(a, o)
+  }), [C, R] = i.useState("idle"), P = i.useRef(0), O = i.useCallback(
+    (S) => {
+      if (!a || !o)
+        return;
+      const D = n.current;
+      if (!D)
+        return;
+      const M = S.target;
+      Re(M, D) || be(M, D, f, w) || _(S);
+    },
+    [a, o, n, f, w, _]
+  ), T = i.useMemo(() => {
+    if (!h.isDown || !h.start || !h.current)
+      return P.current;
+    const D = Ae(h.start, h.current, f) * w;
+    return Math.max(0, D);
+  }, [h.isDown, h.start, h.current, f, w]);
+  i.useEffect(() => {
+    h.isDown && h.current && (P.current = T);
+  }, [h.isDown, h.current, T]), i.useEffect(() => {
+    h.isDown && C === "idle" && R("operating");
+  }, [h.isDown, C]), i.useEffect(() => {
+    if (!h.isDown && C === "operating") {
+      const S = P.current;
+      if (S > 1) {
+        R("ended");
+        const M = m.current;
+        if (M > 0) {
+          const ie = S / M, ae = Be(h.start, h.current, S);
+          (ie >= l || ae >= Te) && c();
+        }
+      } else
+        R("idle"), P.current = 0;
+    }
+  }, [h.isDown, C, l, c, h.start, h.current]), i.useEffect(() => {
+    C === "ended" && queueMicrotask(() => {
+      R("idle"), P.current = 0;
+    });
+  }, [C]), i.useEffect(() => {
+    o || (R("idle"), P.current = 0);
+  }, [o]);
+  const x = ke(E, o), y = Ne(C, o), W = i.useMemo(() => x ? We(v.displacement, f) : y ? T : 0, [x, y, f, v.displacement, T]), B = i.useMemo(() => {
+    const S = m.current;
+    return S <= 0 ? 0 : Math.min(W / S, 1);
+  }, [W]), $ = i.useMemo(() => x ? {
+    phase: _e(v.phase),
+    displacement: v.displacement,
+    velocity: v.velocity
+  } : y ? {
+    phase: C,
+    displacement: Oe(w, f, T),
+    velocity: { x: 0, y: 0 }
+  } : Ee, [x, y, v, C, T, f, w]), H = i.useMemo(
+    () => Ce(L, I),
+    [L, I]
+  ), z = i.useMemo(() => ({
+    onPointerDown: O,
+    style: {
+      touchAction: "none",
+      userSelect: "none",
+      WebkitUserSelect: "none"
+    }
+  }), [O]);
+  return {
+    state: $,
+    isOpening: x,
+    isClosing: y,
+    progress: B,
+    displacement: W,
+    edgeContainerProps: H,
+    drawerContentProps: z
+  };
+}
+const He = {
+  position: "fixed",
+  inset: 0,
+  background: ce
+}, ze = {
+  willChange: "transform"
+}, Ge = {
+  left: {
+    top: 0,
+    bottom: 0,
+    left: 0,
+    transform: "translateX(-100%)"
+  },
+  right: {
+    top: 0,
+    bottom: 0,
+    right: 0,
+    transform: "translateX(100%)"
+  },
+  top: {
+    top: 0,
+    left: 0,
+    right: 0,
+    transform: "translateY(-100%)"
+  },
+  bottom: {
+    bottom: 0,
+    left: 0,
+    right: 0,
+    transform: "translateY(100%)"
+  }
+}, Ve = {
+  left: "translateX(0)",
+  right: "translateX(0)",
+  top: "translateY(0)",
+  bottom: "translateY(0)"
+};
+function Ze(e) {
+  return Ge[e];
+}
+function Ue(e) {
+  return Ve[e];
+}
+function Ye(e, t, n) {
+  return e === "none" ? void 0 : `transform ${t ?? le} ${n ?? de}`;
+}
+function Xe(e, t) {
+  if (e !== "none")
+    return `opacity ${t ?? "220ms"} ease`;
+}
+function U(e) {
+  if (e !== void 0)
+    return typeof e == "number" ? `${e}px` : e;
+}
+function qe(e) {
+  const { placement: t, inline: n, edgeWidth: r, zIndex: o } = e, s = n ? "absolute" : "fixed", c = o !== void 0 ? o - 2 : 1e3;
+  return je(t, s, r, c);
+}
+function je(e, t, n, r) {
+  const o = {
+    position: t,
+    zIndex: r,
+    background: "transparent",
+    pointerEvents: "auto"
+  };
+  return e === "left" ? {
+    ...o,
+    top: 0,
+    bottom: 0,
+    left: 0,
+    width: n
+  } : e === "right" ? {
+    ...o,
+    top: 0,
+    bottom: 0,
+    right: 0,
+    width: n
+  } : e === "top" ? {
+    ...o,
+    top: 0,
+    left: 0,
+    right: 0,
+    height: n
+  } : {
+    ...o,
+    bottom: 0,
+    left: 0,
+    right: 0,
+    height: n
+  };
+}
+const V = 20, Z = 0.3, Ke = {
+  enabled: !1,
+  edgeSwipeOpen: !1,
+  swipeClose: !1,
+  edgeWidth: V,
+  dismissThreshold: Z
+}, Je = {
+  enabled: !0,
+  edgeSwipeOpen: !0,
+  swipeClose: !0,
+  edgeWidth: V,
+  dismissThreshold: Z
+};
+function Qe(e) {
+  return e === !0 ? Je : e === !1 || e === void 0 ? Ke : {
+    enabled: !0,
+    edgeSwipeOpen: e.edgeSwipeOpen ?? !0,
+    swipeClose: e.swipeClose ?? !0,
+    edgeWidth: e.edgeWidth ?? V,
+    dismissThreshold: e.dismissThreshold ?? Z
+  };
+}
+function et(e, t) {
+  return e || (t ? t.left !== void 0 ? "left" : t.right !== void 0 ? "right" : t.top !== void 0 ? "top" : t.bottom !== void 0 ? "bottom" : "right" : "right");
+}
+function tt(e, t, n) {
+  return !e.enabled || !e.edgeSwipeOpen ? !1 : t ? n : !0;
+}
+function nt(e) {
+  const {
+    drawerRef: t,
+    backdropRef: n,
+    placement: r,
+    swipeState: o,
+    displacement: s,
+    isOpening: c,
+    isClosing: d,
+    enabled: a
+  } = e, u = o.phase === "operating";
+  i.useLayoutEffect(() => {
+    if (!a || !u)
+      return;
+    const l = t.current, f = n.current;
+    if (!l)
+      return;
+    const w = ee(r), b = G(r), m = w === "x" ? l.clientWidth : l.clientHeight;
+    if (m <= 0)
+      return;
+    const g = w === "x" ? "translateX" : "translateY";
+    d ? ot(l, f, g, b, s, m) : c && rt(l, f, g, b, s, m);
+  }, [a, u, d, c, s, r, t, n]), i.useLayoutEffect(() => {
+    if (!a || o.phase !== "ended")
+      return;
+    const l = t.current, f = n.current;
+    l && (l.style.transform = ""), f && (f.style.opacity = "");
+  }, [a, o.phase, t, n]);
+}
+function ot(e, t, n, r, o, s) {
+  const c = r * o;
+  e.style.transform = `${n}(${c}px)`;
+  const d = Math.min(o / s, 1);
+  t && (t.style.opacity = String(1 - d));
+}
+function rt(e, t, n, r, o, s) {
+  const d = r * s + r * -1 * o, a = st(d, r);
+  e.style.transform = `${n}(${a}px)`;
+  const u = Math.min(o / s, 1);
+  t && (t.style.opacity = String(u), t.style.pointerEvents = "auto");
+}
+function st(e, t) {
+  return t > 0 ? Math.max(0, e) : Math.min(0, e);
+}
+const it = ({
+  chrome: e,
+  frameStyle: t,
+  header: n,
+  dismissible: r,
+  onClose: o,
+  children: s
+}) => e ? /* @__PURE__ */ F(q, { style: t, children: [
+  /* @__PURE__ */ p(lt, { header: n, dismissible: r, onClose: o }),
+  /* @__PURE__ */ p(
+    j,
+    {
+      style: { padding: fe, flex: 1, display: "flex", flexDirection: "column" },
+      children: s
+    }
+  )
+] }) : /* @__PURE__ */ p(N, { children: s });
+function at(e, t) {
+  return e ? t : !1;
+}
+function ut(e, t) {
+  return e ? /* @__PURE__ */ p(
+    Q,
+    {
+      onClick: t,
+      "aria-label": "Close drawer",
+      style: { marginLeft: "auto" }
+    }
+  ) : null;
+}
+function ct(e, t, n, r, o) {
+  return e ? /* @__PURE__ */ p(
+    "div",
+    {
+      ref: t,
+      style: n,
+      onPointerDown: r,
+      "data-drawer-edge-zone": o
+    }
+  ) : null;
+}
+const lt = ({ header: e, dismissible: t, onClose: n }) => {
+  if (!e)
+    return null;
+  const r = e.showCloseButton ?? !0, o = at(t, r);
+  return /* @__PURE__ */ F(
+    K,
+    {
+      style: { padding: `${me} ${he}`, gap: pe },
+      children: [
+        /* @__PURE__ */ p(J, { children: e.title }),
+        ut(o, n)
+      ]
+    }
+  );
+};
+function dt(e, t, n, r, o) {
+  return i.useMemo(() => {
+    const s = n ? "none" : r.transitionMode, c = Ye(
+      s,
+      r.transitionDuration,
+      r.transitionEasing
+    ), d = Ze(e), a = t ? Ue(e) : d.transform, u = r.inline ? "absolute" : "fixed";
+    return {
+      ...ze,
+      position: u,
+      ...d,
+      transform: a,
+      transition: c,
+      zIndex: o.zIndex,
+      width: U(o.width),
+      height: U(o.height)
+    };
+  }, [e, t, n, r, o]);
+}
+function ft(e, t, n, r, o) {
+  return i.useMemo(() => {
+    const s = n ? "none" : r.transitionMode, c = Xe(s, r.transitionDuration), d = r.inline ? "absolute" : "fixed";
+    return {
+      ...He,
+      position: d,
+      opacity: t ? 1 : 0,
+      pointerEvents: t ? "auto" : "none",
+      transition: c,
+      zIndex: o !== void 0 ? o - 1 : void 0
+    };
+  }, [t, n, r, o]);
+}
+function pt(e) {
+  return i.useMemo(() => {
+    const t = { borderRadius: 0 };
+    return (e === "left" || e === "right") && (t.height = "100%"), t;
+  }, [e]);
+}
+const mt = ({
+  id: e,
+  config: t,
+  isOpen: n,
+  onClose: r,
+  onOpen: o,
+  children: s,
+  zIndex: c,
+  width: d,
+  height: a,
+  position: u
+}) => {
+  const {
+    dismissible: l = !0,
+    header: f,
+    chrome: w = !0,
+    inline: b = !1
+  } = t, m = Qe(t.swipeGestures), g = et(t.anchor, u), E = i.useRef(null), v = i.useRef(null), L = i.useRef(null), I = i.useCallback(() => {
+    o?.(), t.onStateChange?.(!0);
+  }, [o, t]), h = i.useCallback(() => {
+    r();
+  }, [r]), {
+    state: _,
+    displacement: C,
+    edgeContainerProps: R,
+    drawerContentProps: P,
+    isOpening: O,
+    isClosing: T
+  } = $e({
+    edgeContainerRef: L,
+    drawerContentRef: E,
+    direction: g,
+    isOpen: n,
+    onSwipeOpen: I,
+    onSwipeClose: h,
+    enableEdgeSwipeOpen: m.edgeSwipeOpen,
+    enableSwipeClose: m.swipeClose,
+    edgeWidth: m.edgeWidth,
+    dismissThreshold: m.dismissThreshold
+  }), x = _.phase === "operating";
+  nt({
+    drawerRef: E,
+    backdropRef: v,
+    placement: g,
+    swipeState: _,
+    displacement: C,
+    isOpening: O,
+    isClosing: T,
+    enabled: m.enabled
+  });
+  const y = dt(g, n, x, t, { width: d, height: a, zIndex: c }), W = ft(g, n, x, t, c), B = pt(g), $ = i.useMemo(() => ({ ...qe({
+    placement: g,
+    inline: b,
+    edgeWidth: m.edgeWidth,
+    zIndex: c
+  }), ...R.style }), [g, b, m.edgeWidth, c, R.style]), H = i.useMemo(() => m.enabled ? { ...y, ...P.style } : y, [m.enabled, y, P.style]), z = tt(m, n, O), S = f?.title ?? t.ariaLabel ?? "Drawer", D = ct(z, L, $, R.onPointerDown, g);
+  return /* @__PURE__ */ F(N, { children: [
+    D,
+    /* @__PURE__ */ p(
+      "div",
+      {
+        ref: v,
+        style: W,
+        onClick: l ? r : void 0
+      }
+    ),
+    /* @__PURE__ */ p(
+      "div",
+      {
+        ref: E,
+        "data-layer-id": e,
+        "data-placement": g,
+        style: H,
+        role: "dialog",
+        "aria-modal": l ? !0 : void 0,
+        "aria-hidden": n ? void 0 : !0,
+        "aria-label": S,
+        onPointerDown: m.enabled ? P.onPointerDown : void 0,
+        children: /* @__PURE__ */ p(
+          it,
+          {
+            chrome: w,
+            frameStyle: B,
+            header: f,
+            dismissible: l,
+            onClose: r,
+            children: s
+          }
+        )
+      }
+    )
+  ] });
+}, ht = (e, t) => new Promise((n) => {
+  let r = !1;
+  const o = () => {
+    r || (r = !0, e.removeEventListener("transitionend", s), n());
+  }, s = (c) => {
+    c.target === e && o();
+  };
+  e.addEventListener("transitionend", s), setTimeout(o, t + 50);
+}), te = async (e, t, n, r) => {
+  switch (t) {
+    case "none":
+      e();
+      return;
+    case "css":
+      e(), n && await ht(n, r);
+      return;
+  }
+}, _t = (e) => {
+  const [t, n] = i.useState({}), r = i.useRef(e);
+  r.current = e;
+  const o = i.useCallback(
+    async (a, u, l) => {
+      const { mode: f = "none", element: w, duration: b = 300 } = l ?? {};
+      await te(() => {
+        n((E) => E[a] === u ? E : { ...E, [a]: u });
+      }, f, w?.current, b);
+      const g = r.current;
+      u ? g?.onOpen?.(a) : g?.onClose?.(a), g?.onTransitionEnd?.(a, u);
+    },
+    []
+  ), s = i.useCallback((a) => t[a] ?? !1, [t]), c = i.useCallback(
+    (a, u) => o(a, !0, u),
+    [o]
+  ), d = i.useCallback(
+    (a, u) => o(a, !1, u),
+    [o]
+  );
+  return { state: s, open: c, close: d };
+}, wt = (e) => {
+  if (!e)
+    return 300;
+  const t = e.match(/(\d+)/);
+  return t ? parseInt(t[1], 10) : 300;
+}, gt = (e) => {
+  const [t, n] = i.useState(() => {
+    const a = {};
+    return e.forEach((u) => {
+      u.drawer && (a[u.id] = u.drawer.defaultOpen ?? !1);
+    }), a;
+  }), r = i.useMemo(() => {
+    const a = /* @__PURE__ */ new Map();
+    return e.forEach((u) => a.set(u.id, u)), a;
+  }, [e]), o = i.useCallback(
+    async (a, u, l) => {
+      const f = r.get(a);
+      if (!f?.drawer)
+        return;
+      const w = l?.mode ?? f.drawer.transitionMode ?? "css", b = l?.duration ?? wt(f.drawer.transitionDuration), m = l?.element?.current;
+      await te(() => {
+        f.drawer?.open === void 0 && n((E) => E[a] === u ? E : { ...E, [a]: u }), f.drawer?.onStateChange?.(u);
+      }, w, m, b);
+    },
+    [r]
+  ), s = i.useCallback(
+    (a) => {
+      const u = r.get(a);
+      return u?.drawer?.open !== void 0 ? u.drawer.open : t[a] ?? !1;
+    },
+    [r, t]
+  ), c = i.useCallback(
+    (a, u) => o(a, !0, u),
+    [o]
+  ), d = i.useCallback(
+    (a, u) => o(a, !1, u),
+    [o]
+  );
+  return { state: s, open: c, close: d };
+}, Ot = ({ layers: e }) => {
+  const t = gt(e), n = i.useMemo(() => e.filter((s) => s.drawer), [e]), r = i.useMemo(() => {
+    const s = /* @__PURE__ */ new Map();
+    return n.forEach((c) => {
+      s.set(c.id, () => t.close(c.id));
+    }), s;
+  }, [n, t.close]), o = i.useMemo(() => {
+    const s = /* @__PURE__ */ new Map();
+    return n.forEach((c) => {
+      s.set(c.id, () => t.open(c.id));
+    }), s;
+  }, [n, t.open]);
+  return /* @__PURE__ */ p(N, { children: n.map((s) => {
+    if (!s.drawer)
+      return null;
+    const c = t.state(s.id), d = r.get(s.id), a = o.get(s.id);
+    return d ? /* @__PURE__ */ p(
+      mt,
+      {
+        id: s.id,
+        config: s.drawer,
+        isOpen: c,
+        onClose: d,
+        onOpen: a,
+        zIndex: s.zIndex,
+        width: s.width,
+        height: s.height,
+        position: s.position,
+        children: s.component
+      },
+      s.id
+    ) : null;
+  }) });
+}, ne = i.createContext(null), Wt = ({ value: e, children: t }) => /* @__PURE__ */ p(ne.Provider, { value: e, children: t }), Ft = () => {
+  const e = i.useContext(ne);
+  if (!e)
+    throw new Error("useGridLayoutContext must be used within a GridLayoutProvider.");
+  return e;
+}, oe = i.createContext(null), It = () => {
+  const e = i.useContext(oe);
+  if (!e)
+    throw new Error("usePanelSystem must be used within a PanelSystemProvider.");
+  return e;
+}, kt = ({ config: e, layers: t, style: n, children: r }) => {
+  const o = i.useMemo(() => {
+    const u = /* @__PURE__ */ new Map();
+    return t.forEach((l) => {
+      u.set(l.id, l);
+    }), u;
+  }, [t]), s = i.useCallback(
+    (u) => o.get(u)?.component ?? null,
+    [o]
+  ), c = i.useMemo(() => t.map((u) => u.id), [t]), { getCachedContent: d } = Pe({
+    resolveContent: s,
+    validIds: c
+  }), a = i.useMemo(
+    () => ({
+      config: e,
+      style: n,
+      layers: {
+        defs: t,
+        layerById: o
+      },
+      getCachedContent: d
+    }),
+    [e, n, t, o, d]
+  );
+  return /* @__PURE__ */ p(oe.Provider, { value: a, children: r });
+}, re = i.createContext(null), St = ({ layerId: e, children: t }) => {
+  const n = i.useMemo(() => ({ layerId: e }), [e]);
+  return /* @__PURE__ */ p(re.Provider, { value: n, children: t });
+}, Nt = () => {
+  const e = i.useContext(re);
+  if (!e)
+    throw new Error("useLayerInstance must be used within a LayerInstanceProvider.");
+  return e;
+}, Y = (e, t, n) => {
+  if (typeof e == "number" && Number.isFinite(e))
+    return e;
+  throw new Error(`Popup layer "${n}" requires a numeric "${t}" value.`);
+}, se = (e, t) => {
+  if (!e)
+    throw new Error(`Popup layer "${t}" must define position (left/top).`);
+  return {
+    left: Y(e.left, "left", t),
+    top: Y(e.top, "top", t)
+  };
+}, k = (e) => `${Math.round(e)}`, A = (e) => {
+  if (e !== void 0)
+    return e ? "yes" : "no";
+}, bt = (e, t, n, r, o) => {
+  const s = {}, c = se(t, e);
+  if (typeof n != "number" || typeof r != "number")
+    throw new Error(`Popup layer "${e}" requires numeric width/height.`);
+  s.width = k(n), s.height = k(r), s.left = k(c.left), s.top = k(c.top);
+  const d = o?.features;
+  if (d) {
+    const a = A(d.toolbar), u = A(d.menubar), l = A(d.location), f = A(d.status), w = A(d.resizable), b = A(d.scrollbars);
+    a !== void 0 && (s.toolbar = a), u !== void 0 && (s.menubar = u), l !== void 0 && (s.location = l), f !== void 0 && (s.status = f), w !== void 0 && (s.resizable = w), b !== void 0 && (s.scrollbars = b);
+  }
+  return Object.entries(s).map(([a, u]) => `${a}=${u}`).join(",");
+}, X = (e, t, n, r, o) => {
+  const s = se(n, t);
+  if (typeof r != "number" || typeof o != "number")
+    throw new Error(`Popup layer "${t}" requires numeric width/height.`);
+  e.moveTo(Math.round(s.left), Math.round(s.top)), e.resizeTo(Math.round(r), Math.round(o));
+}, Bt = ({ layer: e }) => {
+  const t = e.floating;
+  if (!t)
+    throw new Error(`Layer "${e.id}" is missing floating configuration required for popup mode.`);
+  if ((t.mode ?? "embedded") !== "popup")
+    throw new Error(`PopupLayerPortal received layer "${e.id}" that is not configured for popup mode.`);
+  const r = i.useRef(null), o = i.useRef(null), [s, c] = i.useState(!1);
+  return i.useEffect(() => {
+    if (typeof window > "u")
+      return;
+    const d = bt(e.id, e.position, e.width, e.height, t.popup), a = t.popup?.name ?? e.id, u = Et(
+      a,
+      d,
+      {
+        position: e.position,
+        size: { width: e.width, height: e.height }
+      },
+      t.popup
+    );
+    if (!u)
+      throw new Error(`Failed to open popup window for layer "${e.id}".`);
+    const l = u;
+    o.current = l, t.popup?.focus !== !1 && l.focus(), l.document.title || (l.document.title = e.id), l.document.body.innerHTML = "";
+    const f = l.document.createElement("div");
+    f.dataset.layerId = e.id, l.document.body.appendChild(f), r.current = f, c(!0), X(l, e.id, e.position, e.width, e.height);
+    const w = () => {
+      o.current = null, r.current = null, c(!1);
+    };
+    return l.addEventListener("beforeunload", w), () => {
+      l.removeEventListener("beforeunload", w), t.popup?.closeOnUnmount !== !1 && l.close(), o.current = null, r.current = null, c(!1);
+    };
+  }, [
+    t.popup?.closeOnUnmount,
+    t.popup?.features?.location,
+    t.popup?.features?.menubar,
+    t.popup?.features?.resizable,
+    t.popup?.features?.scrollbars,
+    t.popup?.features?.status,
+    t.popup?.features?.toolbar,
+    t.popup?.focus,
+    t.popup?.name,
+    e.id
+  ]), i.useEffect(() => {
+    const d = o.current;
+    d && X(d, e.id, e.position, e.width, e.height);
+  }, [e.position?.left, e.position?.top, e.height, e.width, e.id]), !s || !r.current ? null : De(/* @__PURE__ */ p(St, { layerId: e.id, children: e.component }), r.current);
+}, Et = (e, t, n, r) => {
+  const o = r?.createWindow;
+  return o ? o({ name: e, features: t, bounds: n }) : window.open("", e, t);
+}, Ct = ({ onClick: e }) => /* @__PURE__ */ p(ue, { children: /* @__PURE__ */ p(Q, { onClick: e, "aria-label": "Close window", "data-drag-ignore": "true" }) }), Dt = ({ header: e, draggable: t, onClose: n }) => {
+  if (!e)
+    return null;
+  const r = e.showCloseButton ?? !1;
+  return /* @__PURE__ */ F(K, { ...t ? { "data-drag-handle": "true" } : {}, style: { cursor: t ? "grab" : void 0 }, children: [
+    e.title ? /* @__PURE__ */ p(J, { children: e.title }) : null,
+    r ? /* @__PURE__ */ p(Ct, { onClick: n }) : null
+  ] });
+}, Pt = ({ header: e, draggable: t, chrome: n, onClose: r, children: o }) => n ? /* @__PURE__ */ F(q, { style: { height: "100%", width: "100%" }, children: [
+  /* @__PURE__ */ p(Dt, { header: e, draggable: t, onClose: r }),
+  /* @__PURE__ */ p(j, { style: { flex: 1, display: "flex", flexDirection: "column" }, children: o })
+] }) : /* @__PURE__ */ p(N, { children: o }), vt = ({ id: e, config: t, onClose: n, children: r }) => {
+  const o = t.chrome ?? !1, s = t.draggable ?? !1, c = t.header?.title ?? t.ariaLabel ?? "Floating window";
+  return /* @__PURE__ */ p("div", { "data-floating-window": e, role: "dialog", "aria-label": c, style: { height: "100%", width: "100%" }, children: /* @__PURE__ */ p(Pt, { header: t.header, draggable: s, chrome: o, onClose: n, children: r }) });
+};
+vt.displayName = "FloatingWindow";
+export {
+  mt as D,
+  vt as F,
+  Wt as G,
+  St as L,
+  Bt as P,
+  Lt as S,
+  Nt as a,
+  Ot as b,
+  _t as c,
+  gt as d,
+  It as e,
+  kt as f,
+  te as r,
+  Ft as u
+};
+//# sourceMappingURL=FloatingWindow-CUXnEtrb.js.map