react-panel-layout 0.2.0

package/dist/GridLayout-CmzKfbPP.js

@@ -0,0 +1,1295 @@
+import { jsxs as _, Fragment as O, jsx as w } from "react/jsx-runtime";
+import * as a from "react";
+import { o as xt, p as kt, q as Tt, r as It, s as Ht, t as At, u as _t, v as $t, G as W, w as y, C as Nt, a as Gt, b as Ot, R as ct, x as Wt, y as K } from "./styles-BnvLfp6e.js";
+import { createPortal as Ft } from "react-dom";
+const Bt = () => {
+  const t = /* @__PURE__ */ new Map();
+  return (e) => {
+    if (!e)
+      return;
+    const n = t.get(e);
+    if (n !== void 0)
+      return n;
+    const o = t.size;
+    return t.set(e, o), o;
+  };
+}, Yt = Bt(), q = /* @__PURE__ */ new Map(), Xt = (t) => {
+  const e = `ovs-threshold:${t.threshold}-rootMargin:${t.rootMargin}-root:${Yt(t.root)}`;
+  if (q.has(e))
+    return q.get(e);
+  const n = new class {
+    #t = /* @__PURE__ */ new Map();
+    #e = new IntersectionObserver((o) => {
+      o.forEach((r) => {
+        const s = this.#t.get(r.target);
+        s && s(r);
+      });
+    }, t);
+    observe(o, r) {
+      return this.#t.set(o, r), this.#e.observe(o), () => {
+        this.#t.delete(o), this.#e.unobserve(o);
+      };
+    }
+  }();
+  return q.set(e, n), n;
+}, ut = Object.freeze({
+  x: 0,
+  y: 0,
+  width: 0,
+  height: 0,
+  top: 0,
+  right: 0,
+  bottom: 0,
+  left: 0
+});
+function Ut(t, { threshold: e = 0, rootMargin: n = "0px", root: o = null }) {
+  const [r, s] = a.useState(null);
+  return a.useEffect(() => {
+    const c = t.current;
+    return c ? Xt({
+      threshold: e,
+      rootMargin: n,
+      root: o
+    }).observe(c, (i) => {
+      s({
+        isIntersecting: i.isIntersecting,
+        boundingClientRect: i.boundingClientRect,
+        intersectionRatio: i.intersectionRatio,
+        intersectionRect: i.intersectionRect,
+        rootBounds: i.rootBounds,
+        target: i.target,
+        time: i.time
+      });
+    }) : void 0;
+  }, [t, e, n, o]), a.useMemo(() => ({
+    isIntersecting: r?.isIntersecting ?? !1,
+    boundingClientRect: r?.boundingClientRect ?? ut,
+    intersectionRatio: r?.intersectionRatio ?? 0,
+    intersectionRect: r?.intersectionRect ?? ut,
+    rootBounds: r?.rootBounds ?? null,
+    target: r?.target ?? t.current,
+    time: r?.time ?? 0
+  }), [r, t]);
+}
+const jt = {
+  position: "fixed",
+  inset: 0,
+  background: "rgba(0, 0, 0, 0.5)"
+}, Zt = {
+  position: "fixed",
+  background: kt,
+  boxShadow: xt,
+  willChange: "transform"
+}, Vt = {
+  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%)"
+  }
+}, Kt = {
+  display: "flex",
+  alignItems: "center",
+  padding: `${At} ${_t}`,
+  gap: Ht,
+  borderBottom: `1px solid ${It}`
+}, qt = {
+  fontWeight: 600
+}, Jt = {
+  marginLeft: "auto",
+  border: "none",
+  background: "transparent",
+  cursor: "pointer",
+  fontSize: $t
+}, Qt = {
+  padding: Tt
+}, te = a.memo(({ style: t, dismissible: e, onClose: n }) => {
+  const o = e ? n : void 0, r = a.useMemo(() => ({ ...jt, ...t }), [t]);
+  return /* @__PURE__ */ w("div", { style: r, onClick: o });
+}), ee = a.memo(({ header: t, dismissible: e, onClose: n }) => {
+  if (!t)
+    return null;
+  const o = t.showCloseButton ?? !0, r = () => t.title ? /* @__PURE__ */ w("div", { style: qt, children: t.title }) : null, s = () => !o || !e ? null : /* @__PURE__ */ w("button", { style: Jt, onClick: n, "aria-label": "Close drawer", type: "button", children: "×" });
+  return /* @__PURE__ */ _("div", { style: Kt, children: [
+    r(),
+    s()
+  ] });
+}), ne = ({
+  id: t,
+  config: e,
+  isOpen: n,
+  onClose: o,
+  children: r,
+  className: s,
+  style: c,
+  zIndex: u,
+  width: i,
+  height: f,
+  position: d,
+  backdropStyle: p
+}) => {
+  const { dismissible: h = !0, header: v } = e, P = a.useCallback((z) => z ? z.left !== void 0 ? "left" : z.right !== void 0 ? "right" : z.top !== void 0 ? "top" : z.bottom !== void 0 ? "bottom" : "right" : "right", [])(d), M = a.useMemo(() => {
+    const z = {
+      ...Zt,
+      ...Vt[P],
+      ...c
+    };
+    return u !== void 0 && (z.zIndex = u), i !== void 0 && (z.width = typeof i == "number" ? `${i}px` : i), f !== void 0 && (z.height = typeof f == "number" ? `${f}px` : f), z;
+  }, [c, u, i, f, P]), x = v ? Qt : void 0, $ = () => v ? /* @__PURE__ */ w(ee, { header: v, dismissible: h, onClose: o }) : null;
+  return /* @__PURE__ */ _(O, { children: [
+    p ? /* @__PURE__ */ w(a.Activity, { mode: n ? "visible" : "hidden", children: /* @__PURE__ */ w(te, { style: p, dismissible: h, onClose: o }) }) : null,
+    /* @__PURE__ */ w(a.Activity, { mode: n ? "visible" : "hidden", children: /* @__PURE__ */ _(
+      "div",
+      {
+        className: s,
+        "data-layer-id": t,
+        "data-placement": P,
+        style: M,
+        role: "dialog",
+        "aria-modal": h ? !0 : void 0,
+        "aria-hidden": n ? void 0 : !0,
+        "aria-label": v?.title ?? "Drawer",
+        children: [
+          $(),
+          /* @__PURE__ */ w("div", { style: x, children: r })
+        ]
+      }
+    ) })
+  ] });
+};
+function T(t) {
+  const e = a.useRef(t);
+  return e.current = t, a.useCallback((...n) => {
+    const o = e.current;
+    if (o)
+      return o(...n);
+  }, []);
+}
+const re = (t) => {
+  const [e, n] = a.useState(() => {
+    const i = {};
+    return t.forEach((f) => {
+      f.drawer && (i[f.id] = f.drawer.defaultOpen ?? !1);
+    }), i;
+  }), o = a.useMemo(() => {
+    const i = /* @__PURE__ */ new Map();
+    return t.forEach((f) => {
+      i.set(f.id, f);
+    }), i;
+  }, [t]), r = T((i, f) => {
+    o.get(i)?.drawer?.onStateChange?.(f);
+  }), s = a.useCallback(
+    (i) => {
+      const f = o.get(i);
+      return f?.drawer ? f.drawer.open !== void 0 ? f.drawer.open : e[i] ?? !1 : !1;
+    },
+    [o, e]
+  ), c = a.useCallback(
+    (i) => {
+      const f = o.get(i);
+      if (f?.drawer) {
+        if (f.drawer.open !== void 0) {
+          r(i, !0);
+          return;
+        }
+        n((d) => d[i] ? d : (r(i, !0), { ...d, [i]: !0 }));
+      }
+    },
+    [o, r]
+  ), u = a.useCallback(
+    (i) => {
+      const f = o.get(i);
+      if (f?.drawer) {
+        if (f.drawer.open !== void 0) {
+          r(i, !1);
+          return;
+        }
+        n((d) => d[i] ? (r(i, !1), { ...d, [i]: !1 }) : d);
+      }
+    },
+    [o, r]
+  );
+  return {
+    state: s,
+    open: c,
+    close: u
+  };
+}, oe = ({ layers: t }) => {
+  const e = re(t), n = a.useMemo(() => t.filter((r) => r.drawer), [t]), o = a.useMemo(() => {
+    const r = /* @__PURE__ */ new Map();
+    return n.forEach((s) => {
+      r.set(s.id, () => e.close(s.id));
+    }), r;
+  }, [n, e.close]);
+  return /* @__PURE__ */ w(O, { children: n.map((r) => {
+    if (!r.drawer)
+      return null;
+    const s = e.state(r.id), c = o.get(r.id);
+    return c ? /* @__PURE__ */ w(
+      ne,
+      {
+        id: r.id,
+        config: r.drawer,
+        isOpen: s,
+        onClose: c,
+        style: r.style,
+        zIndex: r.zIndex,
+        width: r.width,
+        height: r.height,
+        position: r.position,
+        backdropStyle: r.backdropStyle,
+        children: r.component
+      },
+      r.id
+    ) : null;
+  }) });
+}, zt = a.createContext(null), se = ({ value: t, children: e }) => /* @__PURE__ */ w(zt.Provider, { value: t, children: e }), ie = () => {
+  const t = a.useContext(zt);
+  if (!t)
+    throw new Error("useGridLayoutContext must be used within a GridLayoutProvider.");
+  return t;
+}, Ct = a.createContext(null), ae = () => {
+  const t = a.useContext(Ct);
+  if (!t)
+    throw new Error("usePanelSystem must be used within a PanelSystemProvider.");
+  return t;
+}, ce = ({ config: t, layers: e, style: n, children: o }) => {
+  const r = a.useMemo(() => {
+    const c = /* @__PURE__ */ new Map();
+    return e.forEach((u) => {
+      c.set(u.id, u);
+    }), c;
+  }, [e]), s = a.useMemo(
+    () => ({
+      config: t,
+      style: n,
+      layers: {
+        defs: e,
+        layerById: r
+      }
+    }),
+    [t, n, e, r]
+  );
+  return /* @__PURE__ */ w(Ct.Provider, { value: s, children: o });
+}, Rt = a.createContext(null), Pt = ({ layerId: t, children: e }) => {
+  const n = a.useMemo(() => ({ layerId: t }), [t]);
+  return /* @__PURE__ */ w(Rt.Provider, { value: n, children: e });
+}, Sn = () => {
+  const t = a.useContext(Rt);
+  if (!t)
+    throw new Error("useLayerInstance must be used within a LayerInstanceProvider.");
+  return t;
+}, lt = (t, e, n) => {
+  if (typeof t == "number" && Number.isFinite(t))
+    return t;
+  throw new Error(`Popup layer "${n}" requires a numeric "${e}" value.`);
+}, yt = (t, e) => {
+  if (!t)
+    throw new Error(`Popup layer "${e}" must define position (left/top).`);
+  return {
+    left: lt(t.left, "left", e),
+    top: lt(t.top, "top", e)
+  };
+}, F = (t) => `${Math.round(t)}`, A = (t) => {
+  if (t !== void 0)
+    return t ? "yes" : "no";
+}, ue = (t, e, n, o, r) => {
+  const s = {}, c = yt(e, t);
+  if (typeof n != "number" || typeof o != "number")
+    throw new Error(`Popup layer "${t}" requires numeric width/height.`);
+  s.width = F(n), s.height = F(o), s.left = F(c.left), s.top = F(c.top);
+  const u = r?.features;
+  if (u) {
+    const i = A(u.toolbar), f = A(u.menubar), d = A(u.location), p = A(u.status), h = A(u.resizable), v = A(u.scrollbars);
+    i !== void 0 && (s.toolbar = i), f !== void 0 && (s.menubar = f), d !== void 0 && (s.location = d), p !== void 0 && (s.status = p), h !== void 0 && (s.resizable = h), v !== void 0 && (s.scrollbars = v);
+  }
+  return Object.entries(s).map(([i, f]) => `${i}=${f}`).join(",");
+}, dt = (t, e, n, o, r) => {
+  const s = yt(n, e);
+  if (typeof o != "number" || typeof r != "number")
+    throw new Error(`Popup layer "${e}" requires numeric width/height.`);
+  t.moveTo(Math.round(s.left), Math.round(s.top)), t.resizeTo(Math.round(o), Math.round(r));
+}, le = ({ layer: t }) => {
+  const e = t.floating;
+  if (!e)
+    throw new Error(`Layer "${t.id}" is missing floating configuration required for popup mode.`);
+  if ((e.mode ?? "embedded") !== "popup")
+    throw new Error(`PopupLayerPortal received layer "${t.id}" that is not configured for popup mode.`);
+  const o = a.useRef(null), r = a.useRef(null), [s, c] = a.useState(!1);
+  return a.useEffect(() => {
+    if (typeof window > "u")
+      return;
+    const u = ue(t.id, t.position, t.width, t.height, e.popup), i = e.popup?.name ?? t.id, f = de(
+      i,
+      u,
+      {
+        position: t.position,
+        size: { width: t.width, height: t.height }
+      },
+      e.popup
+    );
+    if (!f)
+      throw new Error(`Failed to open popup window for layer "${t.id}".`);
+    const d = f;
+    r.current = d, e.popup?.focus !== !1 && d.focus(), d.document.title || (d.document.title = t.id), d.document.body.innerHTML = "";
+    const p = d.document.createElement("div");
+    p.dataset.layerId = t.id, d.document.body.appendChild(p), o.current = p, c(!0), dt(d, t.id, t.position, t.width, t.height);
+    const h = () => {
+      r.current = null, o.current = null, c(!1);
+    };
+    return d.addEventListener("beforeunload", h), () => {
+      d.removeEventListener("beforeunload", h), e.popup?.closeOnUnmount !== !1 && d.close(), r.current = null, o.current = null, c(!1);
+    };
+  }, [
+    e.popup?.closeOnUnmount,
+    e.popup?.features?.location,
+    e.popup?.features?.menubar,
+    e.popup?.features?.resizable,
+    e.popup?.features?.scrollbars,
+    e.popup?.features?.status,
+    e.popup?.features?.toolbar,
+    e.popup?.focus,
+    e.popup?.name,
+    t.id
+  ]), a.useEffect(() => {
+    const u = r.current;
+    u && dt(u, t.id, t.position, t.width, t.height);
+  }, [t.position?.left, t.position?.top, t.height, t.width, t.id]), !s || !o.current ? null : Ft(/* @__PURE__ */ w(Pt, { layerId: t.id, children: t.component }), o.current);
+}, de = (t, e, n, o) => {
+  const r = o?.createWindow;
+  return r ? r({ name: t, features: e, bounds: n }) : window.open("", t, e);
+}, Dt = {
+  position: "absolute",
+  pointerEvents: "auto",
+  boxSizing: "border-box",
+  background: "transparent",
+  border: "none"
+}, fe = {
+  ...Dt,
+  width: y,
+  height: y,
+  zIndex: 2
+}, pe = {
+  ...Dt,
+  zIndex: 1
+}, ge = {
+  "top-left": {
+    top: 0,
+    left: 0,
+    transform: "translate(-50%, -50%)",
+    cursor: "nwse-resize"
+  },
+  "top-right": {
+    top: 0,
+    right: 0,
+    transform: "translate(50%, -50%)",
+    cursor: "nesw-resize"
+  },
+  "bottom-left": {
+    bottom: 0,
+    left: 0,
+    transform: "translate(-50%, 50%)",
+    cursor: "nesw-resize"
+  },
+  "bottom-right": {
+    bottom: 0,
+    right: 0,
+    transform: "translate(50%, 50%)",
+    cursor: "nwse-resize"
+  }
+}, he = {
+  left: {
+    top: y,
+    bottom: y,
+    left: 0,
+    width: W,
+    transform: "translateX(-50%)",
+    cursor: "ew-resize"
+  },
+  right: {
+    top: y,
+    bottom: y,
+    right: 0,
+    width: W,
+    transform: "translateX(50%)",
+    cursor: "ew-resize"
+  },
+  top: {
+    left: y,
+    right: y,
+    top: 0,
+    height: W,
+    transform: "translateY(-50%)",
+    cursor: "ns-resize"
+  },
+  bottom: {
+    left: y,
+    right: y,
+    bottom: 0,
+    height: W,
+    transform: "translateY(50%)",
+    cursor: "ns-resize"
+  }
+}, me = [
+  { key: "top-left", variant: "corner", horizontal: "left", vertical: "top" },
+  { key: "top-right", variant: "corner", horizontal: "right", vertical: "top" },
+  { key: "bottom-left", variant: "corner", horizontal: "left", vertical: "bottom" },
+  { key: "bottom-right", variant: "corner", horizontal: "right", vertical: "bottom" },
+  { key: "left", variant: "edge", horizontal: "left" },
+  { key: "right", variant: "edge", horizontal: "right" },
+  { key: "top", variant: "edge", vertical: "top" },
+  { key: "bottom", variant: "edge", vertical: "bottom" }
+], we = ({ layerId: t, onPointerDown: e }) => /* @__PURE__ */ w(O, { children: me.map((n) => {
+  const o = n.variant === "corner" ? fe : pe, r = n.variant === "corner" ? ge[n.key] : he[n.key], s = { ...o, ...r }, c = n.variant === "corner" ? { "data-resize-corner": n.key } : { "data-resize-edge": n.key };
+  return /* @__PURE__ */ w(
+    "div",
+    {
+      role: "presentation",
+      "aria-hidden": "true",
+      style: s,
+      ...c,
+      "data-layer-id": t,
+      onPointerDown: (u) => e(n, u)
+    },
+    n.key
+  );
+}) }), be = ({ layers: t }) => {
+  const { handleLayerPointerDown: e, getLayerRenderState: n } = ie(), o = a.useCallback((r) => r.length === 0 ? null : r.map((s) => /* @__PURE__ */ w(we, { layerId: s.layerId, onPointerDown: s.onPointerDown }, s.layerId)), []);
+  return /* @__PURE__ */ w(O, { children: t.map((r) => {
+    const s = r.floating?.mode ?? "embedded";
+    if (r.floating && s === "popup")
+      return /* @__PURE__ */ w(le, { layer: r }, r.id);
+    const { style: c, isResizable: u, isResizing: i, onResizeHandlePointerDown: f } = n(r), d = {};
+    r.gridArea && (d.gridArea = r.gridArea), r.gridRow && (d.gridRow = r.gridRow), r.gridColumn && (d.gridColumn = r.gridColumn);
+    const h = u ? { ...c, ...d, position: "relative" } : { ...c, ...d }, S = o(u ? [
+      {
+        layerId: r.id,
+        onPointerDown: f
+      }
+    ] : []);
+    return /* @__PURE__ */ _(
+      "div",
+      {
+        "data-layer-id": r.id,
+        "data-draggable": !!r.floating?.draggable,
+        "data-resizable": u,
+        "data-resizing": i,
+        style: h,
+        onPointerDown: e,
+        children: [
+          /* @__PURE__ */ w(Pt, { layerId: r.id, children: r.component }),
+          S
+        ]
+      },
+      r.id
+    );
+  }) });
+};
+function J(t, e) {
+  const n = T(e.onMove), o = T(e.onUp), r = T(e.onCancel);
+  a.useEffect(() => {
+    if (t)
+      return e.onMove && document.addEventListener("pointermove", n, { passive: !1 }), e.onUp && document.addEventListener("pointerup", o), e.onCancel && document.addEventListener("pointercancel", r), () => {
+        e.onMove && document.removeEventListener("pointermove", n), e.onUp && document.removeEventListener("pointerup", o), e.onCancel && document.removeEventListener("pointercancel", r);
+      };
+  }, [t, e.onMove, e.onUp, e.onCancel, n, o, r]);
+}
+function ve(t, e, n) {
+  a.useEffect(() => {
+    const o = t.current;
+    if (!(!e || !o || n === void 0))
+      return o.setPointerCapture(n), () => {
+        o.hasPointerCapture && o.hasPointerCapture(n) && o.releasePointerCapture(n);
+      };
+  }, [t, e, n]);
+}
+function Ee(t, e, n = ["pointerdown", "pointermove", "pointerup"]) {
+  a.useEffect(() => {
+    const o = t.current;
+    if (!e || !o)
+      return;
+    const r = (s) => {
+      s.preventDefault();
+    };
+    return n.forEach((s) => {
+      o.addEventListener(s, r, { passive: !1 });
+    }), () => {
+      n.forEach((s) => {
+        o.removeEventListener(s, r);
+      });
+    };
+  }, [t, e, n]);
+}
+function Se(t, e, n) {
+  const { onMove: o, onUp: r, onCancel: s, pointerId: c, capturePointer: u = !0, preventDefaults: i = !0 } = n;
+  J(e, { onMove: o, onUp: r, onCancel: s }), ve(t, e ? u : !1, c), Ee(t, e ? i : !1);
+}
+const ze = (t) => {
+  const e = a.useRef(null), n = a.useRef(null), o = a.useRef(0), [r, s] = a.useState(!1), c = T((p) => {
+    t.onResize?.(p);
+  }), u = a.useCallback(
+    (p) => t.axis === "x" ? p.clientX : p.clientY,
+    [t.axis]
+  ), i = a.useCallback(
+    (p) => {
+      p.preventDefault(), e.current = p.currentTarget, n.current = p.pointerId, o.current = u(p), s(!0);
+    },
+    [u]
+  ), f = a.useCallback(
+    (p) => {
+      const h = u(p), v = h - o.current;
+      v !== 0 && (o.current = h, c(v));
+    },
+    [u, c]
+  ), d = a.useCallback(() => {
+    s(!1), n.current = null;
+  }, []);
+  return Se(e, r, {
+    onMove: f,
+    onUp: d,
+    pointerId: n.current ?? void 0,
+    capturePointer: !0,
+    preventDefaults: !1
+  }), {
+    ref: e,
+    onPointerDown: i,
+    isDragging: r
+  };
+}, Ce = ({
+  element: t,
+  component: e
+}) => a.forwardRef(({ children: n, ...o }, r) => t ? a.cloneElement(
+  t,
+  { ...o, ref: r },
+  n ?? t.props.children
+) : e ? /* @__PURE__ */ w(e, { ...o, ref: r, children: n }) : /* @__PURE__ */ w("div", { ...o, ref: r, children: n }));
+function Re({
+  element: t,
+  component: e
+}) {
+  return a.useMemo(
+    () => Ce({
+      element: t,
+      component: e
+    }),
+    [e, t]
+  );
+}
+const Pe = {
+  position: "absolute",
+  zIndex: Wt
+}, ye = {
+  vertical: {
+    width: ct,
+    height: "100%",
+    top: 0,
+    cursor: "col-resize"
+  },
+  horizontal: {
+    width: "100%",
+    height: ct,
+    left: 0,
+    cursor: "row-resize"
+  }
+}, De = {
+  idle: Ot,
+  hovered: Gt,
+  dragging: Nt
+}, Le = ({
+  direction: t,
+  onResize: e,
+  component: n,
+  element: o,
+  children: r
+}) => {
+  const s = t === "vertical" ? "x" : "y", { ref: c, isDragging: u, onPointerDown: i } = ze({ axis: s, onResize: e }), [f, d] = a.useState(!1), p = a.useCallback(() => {
+    d(!0);
+  }, []), h = a.useCallback(() => {
+    d(!1);
+  }, []), v = Re({
+    element: o,
+    component: n
+  }), S = a.useMemo(() => u ? "dragging" : f ? "hovered" : "idle", [u, f]), P = a.useMemo(() => ({
+    ...Pe,
+    ...ye[t],
+    backgroundColor: De[S],
+    touchAction: "none"
+  }), [t, S]);
+  return /* @__PURE__ */ w(
+    v,
+    {
+      ref: c,
+      style: P,
+      role: "separator",
+      "aria-orientation": t,
+      "aria-hidden": void 0,
+      "data-resize-handle": "true",
+      "data-direction": t,
+      "data-is-dragging": u ? "true" : void 0,
+      onPointerDown: i,
+      onPointerEnter: p,
+      onPointerLeave: h,
+      children: r
+    }
+  );
+}, ft = {
+  position: "absolute",
+  pointerEvents: "auto"
+}, pt = ({
+  direction: t,
+  trackIndex: e,
+  align: n,
+  gap: o,
+  span: r,
+  onResize: s
+}) => {
+  const c = t === "col" ? "vertical" : "horizontal", u = a.useCallback(
+    (d) => {
+      s(t, e, d);
+    },
+    [t, e, s]
+  ), i = a.useMemo(() => t === "col" ? {
+    gridColumn: `${e + 1} / ${e + 2}`,
+    gridRow: `${r.start} / ${r.end}`
+  } : {
+    gridRow: `${e + 1} / ${e + 2}`,
+    gridColumn: `${r.start} / ${r.end}`
+  }, [t, e, r]), f = a.useMemo(() => {
+    const p = Math.max(0, o) / 2 + K / 2;
+    return t === "col" ? {
+      ...ft,
+      width: K,
+      height: "100%",
+      top: 0,
+      bottom: 0,
+      ...n === "start" ? { left: -p } : { right: -p }
+    } : {
+      ...ft,
+      width: "100%",
+      height: K,
+      left: 0,
+      right: 0,
+      ...n === "start" ? { top: -p } : { bottom: -p }
+    };
+  }, [n, t, o]);
+  return /* @__PURE__ */ w("div", { "data-resizable": "true", style: { ...i, position: "relative", pointerEvents: "none" }, children: /* @__PURE__ */ w("div", { "data-direction": c, "data-align": n, "data-handle": "true", style: f, children: /* @__PURE__ */ w(Le, { direction: c, onResize: u }) }) });
+}, Me = (t) => {
+  const e = /* @__PURE__ */ new Map();
+  t.forEach((o, r) => {
+    o.forEach((s, c) => {
+      if (!s || s === ".")
+        return;
+      const u = e.get(s);
+      if (u) {
+        const f = {
+          rowStart: Math.min(u.rowStart, r),
+          rowEnd: Math.max(u.rowEnd, r),
+          colStart: Math.min(u.colStart, c),
+          colEnd: Math.max(u.colEnd, c)
+        };
+        e.set(s, f);
+        return;
+      }
+      const i = {
+        rowStart: r,
+        rowEnd: r,
+        colStart: c,
+        colEnd: c
+      };
+      e.set(s, i);
+    });
+  });
+  const n = /* @__PURE__ */ new Map();
+  return e.forEach((o, r) => {
+    const s = o.rowStart + 1, c = o.rowEnd + 2, u = o.colStart + 1, i = o.colEnd + 2, f = {
+      gridArea: r,
+      gridRow: `${s} / ${c}`,
+      gridColumn: `${u} / ${i}`
+    };
+    n.set(r, f);
+  }), n;
+}, xe = (t, e) => {
+  if ((t.positionMode ?? "grid") !== "grid")
+    return t;
+  const o = t.gridArea ?? t.id, r = e.get(o);
+  if (!r)
+    return t;
+  const s = !t.gridArea, c = !t.gridRow, u = !t.gridColumn;
+  return !s && !c && !u ? t : {
+    ...t,
+    gridArea: s ? r.gridArea : t.gridArea,
+    gridRow: c ? r.gridRow : t.gridRow,
+    gridColumn: u ? r.gridColumn : t.gridColumn
+  };
+}, ke = (t, e) => {
+  const n = a.useMemo(() => Me(t.areas), [t.areas]), o = a.useMemo(() => e.map((u) => xe(u, n)), [e, n]), r = a.useMemo(
+    () => o.filter((u) => u.visible !== !1),
+    [o]
+  ), s = a.useMemo(
+    () => r.filter((u) => !u.drawer),
+    [r]
+  ), c = a.useMemo(() => {
+    const u = /* @__PURE__ */ new Map();
+    return o.forEach((i) => {
+      u.set(i.id, i);
+    }), u;
+  }, [o]);
+  return {
+    normalizedLayers: o,
+    visibleLayers: r,
+    regularLayers: s,
+    layerById: c
+  };
+}, Te = typeof window < "u" && typeof window.document < "u", Lt = Te ? a.useLayoutEffect : a.useEffect, U = (t, e) => `${t}-${e}`, Ie = (t, e, n, o) => {
+  const r = U(n, o), s = e[r];
+  return s !== void 0 ? `${s}px` : t.size;
+}, gt = (t, e, n) => t.map((o, r) => Ie(o, e, n, r)).join(" "), B = (t, e) => t.reduce((n, o, r) => (o.resizable && o.size.endsWith("px") && (n[U(e, r)] = parseInt(o.size, 10)), n), {}), He = (t, e, n) => {
+  const o = e !== void 0 ? Math.max(t, e) : t;
+  return n !== void 0 ? Math.min(o, n) : o;
+}, Ae = (t, e, n) => {
+  const o = t + e;
+  return He(o, n.minSize, n.maxSize);
+}, _e = (t, e, n, o, r) => {
+  const s = U(t, e);
+  return (c) => {
+    const u = Ae(n, o, r);
+    return { ...c, [s]: u };
+  };
+}, ht = (t, e) => {
+  const n = t.length, o = [];
+  for (let c = 0; c < n; c++) {
+    const u = t[c], i = u[e], f = u[e + 1];
+    i !== f && o.push(c);
+  }
+  if (o.length === 0)
+    return { start: 1, end: n + 1 };
+  const r = Math.min(...o), s = Math.max(...o);
+  return { start: r + 1, end: s + 2 };
+}, mt = (t, e) => {
+  const n = t[e], o = t[e + 1], r = n?.length ?? 0, s = [];
+  for (let i = 0; i < r; i++) {
+    const f = n?.[i], d = o?.[i];
+    f !== d && s.push(i);
+  }
+  if (s.length === 0)
+    return { start: 1, end: r + 1 };
+  const c = Math.min(...s), u = Math.max(...s);
+  return { start: c + 1, end: u + 2 };
+}, $e = (t, e) => {
+  if (t.length === 0)
+    return [];
+  const n = e.length;
+  if (t.length === 1)
+    return t[0]?.resizable ? [{ trackIndex: 0, align: "end", span: { start: 1, end: n + 1 } }] : [];
+  const o = [];
+  return Array.from({ length: t.length - 1 }, (s, c) => c).forEach((s) => {
+    const c = t[s];
+    if (t[s + 1]?.resizable) {
+      const i = ht(e, s);
+      o.push({ trackIndex: s + 1, align: "start", span: i });
+      return;
+    }
+    if (c?.resizable) {
+      const i = ht(e, s);
+      o.push({ trackIndex: s, align: "end", span: i });
+    }
+  }), o;
+}, Ne = (t, e) => {
+  if (t.length === 0)
+    return [];
+  const n = e[0]?.length ?? 0;
+  if (t.length === 1)
+    return t[0]?.resizable ? [{ trackIndex: 0, align: "end", span: { start: 1, end: n + 1 } }] : [];
+  const o = [];
+  return Array.from({ length: t.length - 1 }, (s, c) => c).forEach((s) => {
+    const c = t[s];
+    if (t[s + 1]?.resizable) {
+      const i = mt(e, s);
+      o.push({ trackIndex: s + 1, align: "start", span: i });
+      return;
+    }
+    if (c?.resizable) {
+      const i = mt(e, s);
+      o.push({ trackIndex: s, align: "end", span: i });
+    }
+  }), o;
+}, Ge = (t) => {
+  if (!t)
+    return { rowGap: 0, columnGap: 0 };
+  const e = t.split(/\s+/).map((o) => o.trim()).filter(Boolean), n = (o) => {
+    const r = o.match(/^(-?\d+(?:\.\d+)?)px$/);
+    return r ? Number.parseFloat(r[1]) : 0;
+  };
+  if (e.length === 1) {
+    const o = n(e[0]);
+    return { rowGap: o, columnGap: o };
+  }
+  return {
+    rowGap: n(e[0]),
+    columnGap: n(e[1])
+  };
+}, Oe = (t) => t !== void 0 ? { gap: t } : {}, We = (t, e, n, o) => {
+  const r = U(n, o), s = t[r];
+  return s !== void 0 ? s : e.size.endsWith("px") ? Number.parseInt(e.size, 10) : 300;
+}, Fe = (t, e) => {
+  const [n, o] = a.useState(() => ({
+    ...B(t.columns, "col"),
+    ...B(t.rows, "row")
+  }));
+  Lt(() => {
+    const d = {
+      ...B(t.columns, "col"),
+      ...B(t.rows, "row")
+    };
+    o((p) => {
+      const h = /* @__PURE__ */ new Set([...Object.keys(p), ...Object.keys(d)]);
+      return Array.from(h).some((S) => p[S] !== d[S]) ? d : p;
+    });
+  }, [t.columns, t.rows]);
+  const r = a.useMemo(() => t.areas.map((d) => `"${d.join(" ")}"`).join(" "), [t.areas]), s = a.useMemo(() => Ge(t.gap), [t.gap]), c = a.useMemo(
+    () => $e(t.columns, t.areas),
+    [t.columns, t.areas]
+  ), u = a.useMemo(
+    () => Ne(t.rows, t.areas),
+    [t.rows, t.areas]
+  ), i = a.useMemo(() => ({
+    ...t.style,
+    ...e,
+    gridTemplateAreas: r,
+    gridTemplateRows: gt(t.rows, n, "row"),
+    gridTemplateColumns: gt(t.columns, n, "col"),
+    ...Oe(t.gap)
+  }), [r, t.columns, t.gap, t.rows, t.style, e, n]), f = a.useCallback(
+    (d, p, h) => {
+      const S = (d === "row" ? t.rows : t.columns)[p];
+      if (!S || !S.resizable)
+        return;
+      const P = We(n, S, d, p);
+      o(_e(d, p, P, h, S));
+    },
+    [t.columns, t.rows, n]
+  );
+  return {
+    columnHandles: c,
+    rowHandles: u,
+    gapSizes: s,
+    gridStyle: i,
+    handleResize: f
+  };
+}, Be = (t, e = Number.NEGATIVE_INFINITY, n = Number.POSITIVE_INFINITY) => Math.min(Math.max(t, e), n), zn = (t, e) => typeof t != "number" || !Number.isFinite(t) ? e : t, Ye = (t) => t.positionMode ? t.positionMode : t.floating ? (t.floating.mode ?? "embedded") === "embedded" ? "absolute" : "relative" : "grid", Xe = (t) => ({ position: t === "grid" ? "relative" : t }), Ue = (t, e) => e !== "grid" ? {} : {
+  gridArea: t.gridArea,
+  gridRow: t.gridRow,
+  gridColumn: t.gridColumn
+}, je = (t) => t ? {
+  top: t.top,
+  right: t.right,
+  bottom: t.bottom,
+  left: t.left
+} : {}, Ze = (t) => t !== void 0 ? { zIndex: t } : {}, Ve = (t, e) => ({
+  width: t,
+  height: e
+}), Ke = (t, e) => t.pointerEvents !== void 0 ? typeof t.pointerEvents == "boolean" ? { pointerEvents: t.pointerEvents ? "auto" : "none" } : { pointerEvents: t.pointerEvents } : e === "absolute" || e === "fixed" ? { pointerEvents: "auto" } : {}, qe = (t) => t.position, Je = (t) => ({
+  width: t.width,
+  height: t.height
+}), Qe = (t) => t.zIndex, tn = (t) => {
+  const e = Ye(t), n = qe(t), o = Je(t), r = Qe(t);
+  return {
+    ...t.style,
+    ...Xe(e),
+    ...Ue(t, e),
+    ...je(n),
+    ...Ze(r),
+    ...Ve(o.width, o.height),
+    ...Ke(t, e)
+  };
+}, en = (t) => {
+  const e = t.floating;
+  return e ? e.mode ?? "embedded" : null;
+}, I = (t) => en(t) !== "embedded" ? null : t.floating ?? null, wt = (t) => t instanceof HTMLElement ? ["INPUT", "TEXTAREA", "SELECT", "BUTTON"].includes(t.tagName) : !1, bt = (t, e, n) => {
+  const o = e ?? Number.NEGATIVE_INFINITY, r = n ?? Number.POSITIVE_INFINITY;
+  return Be(t, o, r);
+}, vt = (t, e, n) => {
+  if (typeof t == "number" && Number.isFinite(t))
+    return t;
+  throw new Error(
+    `Floating layer "${n}" must provide a numeric "${e}" value when draggable mode is enabled.`
+  );
+}, Et = (t) => {
+  if (!I(t))
+    throw new Error(`Floating layer "${t.id}" is missing floating configuration required for dragging.`);
+  const n = t.position;
+  if (!n)
+    throw new Error(`Floating layer "${t.id}" must define position with left and top values.`);
+  return {
+    left: vt(n.left, "left", t.id),
+    top: vt(n.top, "top", t.id)
+  };
+}, nn = (t) => {
+  const e = I(t);
+  return e ? e.constraints ?? {} : {};
+}, rn = (t, e, n) => t ? t === "left" ? e - n : e + n : e, on = (t, e, n) => t ? t === "top" ? e - n : e + n : e, sn = (t, e, n) => !t || t === "right" ? e : e + n, an = (t, e, n) => !t || t === "bottom" ? e : e + n, Q = (t, e) => t ? t.dataset.layerId === e ? t : Q(t.parentElement, e) : null, tt = (t, e, n) => !t || n?.(t) ? null : e(t) ? t : tt(t.parentElement, e, n), cn = (t) => t instanceof HTMLElement ? tt(
+  t,
+  (e) => e.dataset.dragHandle === "true",
+  (e) => e.dataset.dragIgnore === "true"
+) : null, St = (t) => t instanceof HTMLElement ? tt(
+  t,
+  (e) => e.dataset.resizeCorner !== void 0 || e.dataset.resizeEdge !== void 0
+) !== null : !1, Y = (t) => {
+  const e = I(t);
+  return e ? e.resizable === !0 : !1;
+}, X = (t) => {
+  if (!I(t))
+    return null;
+  const n = dn(t);
+  if (!n)
+    throw new Error(`Floating layer "${t.id}" must define width and height when resizable or draggable.`);
+  return {
+    width: n.width,
+    height: n.height
+  };
+}, un = (t, e, n) => {
+  const o = t.filter(Y).reduce((p, h) => {
+    if (n === h.id) {
+      const S = e[h.id];
+      if (S)
+        return p[h.id] = S, p;
+    }
+    const v = X(h);
+    return v && (p[h.id] = v), p;
+  }, {}), r = Object.keys(e), s = Object.keys(o), c = r.length !== s.length, u = r.some((p) => !Object.prototype.hasOwnProperty.call(o, p)), i = c ? !0 : u, f = s.some((p) => {
+    const h = e[p], v = o[p];
+    return !h || !v ? !0 : h.width !== v.width || h.height !== v.height;
+  });
+  return {
+    sizes: o,
+    changed: i ? !0 : f
+  };
+}, ln = ({
+  layers: t,
+  layerById: e
+}) => {
+  const [n, o] = a.useState(null), [r, s] = a.useState(null), [c, u] = a.useState({}), [i, f] = a.useState({}), d = a.useRef(null), p = a.useRef(null), h = T((g, l) => {
+    e.get(g)?.floating?.onMove?.(l);
+  }), v = T((g, l) => {
+    e.get(g)?.floating?.onResize?.(l);
+  });
+  Lt(() => {
+    const { sizes: g, changed: l } = un(t, i, r);
+    l && f(g);
+  }, [t, r]);
+  const S = a.useCallback(
+    (g, l, m, b) => {
+      const E = Et(l), R = c[g] ?? { x: 0, y: 0 }, C = {
+        pointerStartX: b.clientX,
+        pointerStartY: b.clientY,
+        initialTranslationX: R.x,
+        initialTranslationY: R.y,
+        baseLeft: E.left,
+        baseTop: E.top,
+        layerId: g,
+        pointerId: b.pointerId,
+        target: m
+      };
+      if (C.target.setPointerCapture)
+        try {
+          C.target.setPointerCapture(C.pointerId);
+        } catch {
+        }
+      d.current = C, o(g);
+    },
+    [c]
+  ), P = a.useCallback(
+    (g) => {
+      const l = g.target, m = cn(l);
+      if (!m)
+        return;
+      const b = m.closest("[data-layer-id]")?.getAttribute("data-layer-id");
+      if (!b)
+        return;
+      const E = e.get(b);
+      if (!E)
+        return;
+      const R = I(E);
+      if (!(!R || R.draggable !== !0) && !wt(g.target) && !St(g.target) && m) {
+        const C = Q(m, b);
+        if (!C)
+          return;
+        S(b, E, C, g);
+        return;
+      }
+    },
+    [S, e]
+  ), M = a.useCallback(
+    (g, l) => {
+      const m = e.get(g), b = m ? I(m) : null;
+      if (!m || !b || b.draggable !== !0 || wt(l.target) || St(l.target))
+        return;
+      const E = Q(l.currentTarget, g);
+      E && S(g, m, E, l);
+    },
+    [S, e]
+  ), x = a.useCallback(
+    (g, l, m) => {
+      const b = e.get(g);
+      if (!b || !Y(b))
+        return;
+      const E = i[g] ?? X(b);
+      if (!E)
+        return;
+      const R = Et(b), C = nn(b), D = c[g] ?? { x: 0, y: 0 };
+      if (m.stopPropagation(), m.preventDefault(), m.currentTarget.setPointerCapture)
+        try {
+          m.currentTarget.setPointerCapture(m.pointerId);
+        } catch {
+        }
+      p.current = {
+        layerId: g,
+        pointerId: m.pointerId,
+        horizontalEdge: l.horizontal,
+        verticalEdge: l.vertical,
+        startX: m.clientX,
+        startY: m.clientY,
+        startWidth: E.width,
+        startHeight: E.height,
+        startPosition: D,
+        baseLeft: R.left,
+        baseTop: R.top,
+        minWidth: C.minWidth,
+        maxWidth: C.maxWidth,
+        minHeight: C.minHeight,
+        maxHeight: C.maxHeight,
+        target: m.currentTarget
+      }, s(g);
+    },
+    [e, c, i]
+  ), $ = a.useCallback(
+    (g) => {
+      const l = d.current;
+      if (!l)
+        return;
+      const m = g.clientX - l.pointerStartX, b = g.clientY - l.pointerStartY, E = {
+        x: l.initialTranslationX + m,
+        y: l.initialTranslationY + b
+      };
+      u((R) => ({ ...R, [l.layerId]: E })), h(l.layerId, {
+        left: l.baseLeft + E.x,
+        top: l.baseTop + E.y
+      });
+    },
+    [h]
+  ), L = a.useCallback(
+    (g) => {
+      const l = p.current;
+      if (!l || l.pointerId !== g.pointerId || !e.get(l.layerId))
+        return;
+      const b = g.clientX - l.startX, E = g.clientY - l.startY, R = rn(l.horizontalEdge, l.startWidth, b), C = on(l.verticalEdge, l.startHeight, E), D = bt(R, l.minWidth, l.maxWidth), k = bt(C, l.minHeight, l.maxHeight), N = l.startWidth - D, j = l.startHeight - k, st = sn(
+        l.horizontalEdge,
+        l.startPosition.x,
+        N
+      ), Mt = an(l.verticalEdge, l.startPosition.y, j), Z = i[l.layerId], it = { width: D, height: k };
+      (!Z || Z.width !== D || Z.height !== k) && (f((V) => ({
+        ...V,
+        [l.layerId]: it
+      })), v(l.layerId, it));
+      const at = c[l.layerId] ?? { x: 0, y: 0 }, G = { x: st, y: Mt };
+      (at.x !== G.x || at.y !== G.y) && (u((V) => ({
+        ...V,
+        [l.layerId]: G
+      })), h(l.layerId, {
+        left: l.baseLeft + G.x,
+        top: l.baseTop + G.y
+      }));
+    },
+    [e, c, i, h, v]
+  ), z = a.useCallback((g) => {
+    const l = d.current;
+    if (l) {
+      if (l.pointerId === g.pointerId && l.target.releasePointerCapture)
+        try {
+          l.target.releasePointerCapture(l.pointerId);
+        } catch {
+        }
+      d.current = null;
+    }
+    o(null);
+  }, []), H = a.useCallback((g) => {
+    const l = p.current;
+    if (l) {
+      if (l.pointerId === g.pointerId && l.target.releasePointerCapture)
+        try {
+          l.target.releasePointerCapture(l.pointerId);
+        } catch {
+        }
+      p.current = null;
+    }
+    s(null);
+  }, []);
+  J(n !== null, {
+    onMove: $,
+    onUp: z,
+    onCancel: z
+  }), J(r !== null, {
+    onMove: L,
+    onUp: H,
+    onCancel: H
+  });
+  const et = a.useCallback(
+    (g) => {
+      const l = tn(g), m = I(g);
+      if (!m || m.draggable !== !0)
+        return l;
+      const b = c[g.id], E = n === g.id, R = r === g.id, C = b ? { transform: `translate(${b.x}px, ${b.y}px)` } : {}, D = i[g.id], k = Y(g) ? X(g) : null, N = D ?? k, j = N ? { width: `${N.width}px`, height: `${N.height}px` } : {};
+      return {
+        ...l,
+        ...j,
+        ...C,
+        ...E || R ? { cursor: "grabbing" } : {}
+      };
+    },
+    [n, c, i, r]
+  ), nt = a.useCallback(
+    (g) => {
+      if (!Y(g))
+        return { isResizable: !1 };
+      const m = i[g.id], b = X(g);
+      return (m ?? b) !== null ? { isResizable: !0, onPointerDown: (D, k) => {
+        x(g.id, D, k);
+      } } : { isResizable: !1 };
+    },
+    [x, i]
+  ), rt = a.useCallback(
+    (g) => {
+      const { isResizable: l, onPointerDown: m } = nt(g), b = et(g), E = r === g.id;
+      return {
+        style: b,
+        isResizable: l,
+        isResizing: E,
+        onResizeHandlePointerDown: (R, C) => {
+          m && m(R, C);
+        }
+      };
+    },
+    [et, nt, r]
+  ), ot = a.useCallback(
+    (g) => ({
+      "data-drag-handle": "true",
+      role: "button",
+      "aria-roledescription": "Drag handle",
+      "aria-label": "Drag layer",
+      onPointerDown: (l) => {
+        M(g, l);
+      }
+    }),
+    [M]
+  );
+  return {
+    providerValue: a.useMemo(
+      () => ({
+        handleLayerPointerDown: P,
+        getLayerRenderState: rt,
+        getLayerHandleProps: ot
+      }),
+      [ot, rt, P]
+    ),
+    draggingLayerId: n,
+    resizingLayerId: r
+  };
+}, dn = (t) => {
+  if (typeof t.width == "number" && typeof t.height == "number")
+    return { width: t.width, height: t.height };
+}, fn = {
+  display: "grid",
+  width: "100%",
+  height: "100%",
+  overflow: "hidden"
+}, pn = {
+  touchAction: "none",
+  WebkitTouchCallout: "none",
+  WebkitUserSelect: "none",
+  userSelect: "none"
+}, Cn = ({ config: t, layers: e, style: n }) => {
+  const o = a.useRef(null), { isIntersecting: r } = Ut(o, { threshold: 0 });
+  return /* @__PURE__ */ w(ce, { config: t, layers: e, style: n, children: /* @__PURE__ */ w(gn, { gridRef: o, isIntersecting: r }) });
+}, gn = ({ gridRef: t, isIntersecting: e }) => {
+  const { config: n, style: o, layers: r } = ae(), { normalizedLayers: s, visibleLayers: c, regularLayers: u, layerById: i } = ke(n, r.defs), { columnHandles: f, rowHandles: d, gapSizes: p, gridStyle: h, handleResize: v } = Fe(n, o), { providerValue: S, draggingLayerId: P, resizingLayerId: M } = ln({
+    layers: s,
+    layerById: i
+  }), x = P ? !0 : !!M, $ = a.useMemo(() => ({
+    ...fn,
+    ...h,
+    ...x ? pn : {}
+  }), [h, x]);
+  return /* @__PURE__ */ _(O, { children: [
+    /* @__PURE__ */ _(
+      "div",
+      {
+        ref: t,
+        style: $,
+        "data-dragging": !!P,
+        "data-resizing": !!M,
+        "data-visible": e,
+        children: [
+          /* @__PURE__ */ w(se, { value: S, children: /* @__PURE__ */ w(be, { layers: u }) }),
+          f.map(({ trackIndex: L, align: z, span: H }) => /* @__PURE__ */ w(
+            pt,
+            {
+              direction: "col",
+              trackIndex: L,
+              align: z,
+              gap: p.columnGap,
+              span: H,
+              onResize: v
+            },
+            `col-${L}:${z}`
+          )),
+          d.map(({ trackIndex: L, align: z, span: H }) => /* @__PURE__ */ w(
+            pt,
+            {
+              direction: "row",
+              trackIndex: L,
+              align: z,
+              gap: p.rowGap,
+              span: H,
+              onResize: v
+            },
+            `row-${L}:${z}`
+          ))
+        ]
+      }
+    ),
+    /* @__PURE__ */ w(oe, { layers: c })
+  ] });
+};
+export {
+  ne as D,
+  Cn as G,
+  Le as R,
+  Sn as a,
+  ie as b,
+  T as c,
+  Re as d,
+  Be as e,
+  Lt as f,
+  oe as g,
+  zn as t,
+  ze as u
+};
+//# sourceMappingURL=GridLayout-CmzKfbPP.js.map