react-panel-layout 0.6.1 → 0.7.1

package/dist/GridLayout-kiWdpMLQ.js

@@ -0,0 +1,947 @@
+import { jsx as z, Fragment as U, jsxs as _ } from "react/jsx-runtime";
+import * as d from "react";
+import { e as vt, F as xt, u as Ct, L as kt, P as Ht, f as Dt, g as Nt, h as Gt, i as at, G as At, b as W } from "./FloatingWindow-CE-WzkNv.js";
+import { G as X, v as I, w as tt } from "./styles-NkjuMOVS.js";
+import { u as $t } from "./SwipePivotTabBar-DWrCuwEI.js";
+import { R as Ft } from "./ResizeHandle-CXjc1meV.js";
+import { u as Rt } from "./useIsomorphicLayoutEffect-DhmEnmZ_.js";
+import { u as ct, b as lt } from "./useDocumentPointerEvents-DXxw3qWj.js";
+const Ot = () => {
+  const t = /* @__PURE__ */ new Map();
+  return (e) => {
+    if (!e)
+      return;
+    const n = t.get(e);
+    if (n !== void 0)
+      return n;
+    const r = t.size;
+    return t.set(e, r), r;
+  };
+}, Yt = Ot(), et = /* @__PURE__ */ new Map(), _t = (t) => {
+  const e = `ovs-threshold:${t.threshold}-rootMargin:${t.rootMargin}-root:${Yt(t.root)}`;
+  if (et.has(e))
+    return et.get(e);
+  const n = new class {
+    #t = /* @__PURE__ */ new Map();
+    #e = new IntersectionObserver((r) => {
+      r.forEach((o) => {
+        const s = this.#t.get(o.target);
+        s && s(o);
+      });
+    }, t);
+    observe(r, o) {
+      return this.#t.set(r, o), this.#e.observe(r), () => {
+        this.#t.delete(r), this.#e.unobserve(r);
+      };
+    }
+  }();
+  return et.set(e, n), n;
+}, ut = Object.freeze({
+  x: 0,
+  y: 0,
+  width: 0,
+  height: 0,
+  top: 0,
+  right: 0,
+  bottom: 0,
+  left: 0
+});
+function Bt(t, { threshold: e = 0, rootMargin: n = "0px", root: r = null }) {
+  const [o, s] = d.useState(null);
+  return d.useEffect(() => {
+    const l = t.current;
+    return l ? _t({
+      threshold: e,
+      rootMargin: n,
+      root: r
+    }).observe(l, (u) => {
+      s({
+        isIntersecting: u.isIntersecting,
+        boundingClientRect: u.boundingClientRect,
+        intersectionRatio: u.intersectionRatio,
+        intersectionRect: u.intersectionRect,
+        rootBounds: u.rootBounds,
+        target: u.target,
+        time: u.time
+      });
+    }) : void 0;
+  }, [t, e, n, r]), d.useMemo(() => ({
+    isIntersecting: o?.isIntersecting ?? !1,
+    boundingClientRect: o?.boundingClientRect ?? ut,
+    intersectionRatio: o?.intersectionRatio ?? 0,
+    intersectionRect: o?.intersectionRect ?? ut,
+    rootBounds: o?.rootBounds ?? null,
+    target: o?.target ?? t.current,
+    time: o?.time ?? 0
+  }), [o, t]);
+}
+const yt = {
+  position: "absolute",
+  pointerEvents: "auto",
+  boxSizing: "border-box",
+  background: "transparent",
+  border: "none"
+}, Wt = {
+  ...yt,
+  width: I,
+  height: I,
+  zIndex: 2
+}, Xt = {
+  ...yt,
+  zIndex: 1
+}, jt = {
+  "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"
+  }
+}, Vt = {
+  left: {
+    top: I,
+    bottom: I,
+    left: 0,
+    width: X,
+    transform: "translateX(-50%)",
+    cursor: "ew-resize"
+  },
+  right: {
+    top: I,
+    bottom: I,
+    right: 0,
+    width: X,
+    transform: "translateX(50%)",
+    cursor: "ew-resize"
+  },
+  top: {
+    left: I,
+    right: I,
+    top: 0,
+    height: X,
+    transform: "translateY(-50%)",
+    cursor: "ns-resize"
+  },
+  bottom: {
+    left: I,
+    right: I,
+    bottom: 0,
+    height: X,
+    transform: "translateY(50%)",
+    cursor: "ns-resize"
+  }
+}, Kt = [
+  { 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" }
+], Ut = ({ layerId: t, onPointerDown: e }) => /* @__PURE__ */ z(U, { children: Kt.map((n) => {
+  const r = n.variant === "corner" ? Wt : Xt, o = n.variant === "corner" ? jt[n.key] : Vt[n.key], s = { ...r, ...o }, l = n.variant === "corner" ? { "data-resize-corner": n.key } : { "data-resize-edge": n.key };
+  return /* @__PURE__ */ z(
+    "div",
+    {
+      role: "presentation",
+      "aria-hidden": "true",
+      style: s,
+      ...l,
+      "data-layer-id": t,
+      onPointerDown: (a) => e(n, a)
+    },
+    n.key
+  );
+}) }), Zt = ({ pivot: t }) => {
+  const { Outlet: e } = $t({
+    items: t.items,
+    activeId: t.activeId,
+    defaultActiveId: t.defaultActiveId,
+    onActiveChange: t.onActiveChange,
+    transitionMode: t.transitionMode
+  });
+  return /* @__PURE__ */ z(e, {});
+}, qt = (t, e) => t.pivot ? /* @__PURE__ */ z(Zt, { pivot: t.pivot }) : t.cache ? e(t.id) : t.component, Et = d.memo(({ layer: t, onClose: e }) => {
+  const { getCachedContent: n } = vt(), r = qt(t, n);
+  return t.floating?.chrome ? /* @__PURE__ */ z(xt, { id: t.id, config: t.floating, onClose: e, children: r }) : r;
+});
+Et.displayName = "LayerContentRenderer";
+const It = d.memo(({ layerId: t, isResizable: e, onPointerDown: n }) => e ? /* @__PURE__ */ z(Ut, { layerId: t, onPointerDown: n }) : null);
+It.displayName = "LayerResizeHandles";
+const Jt = (t, e) => t ? "auto" : e ? "visible" : "hidden", Mt = d.memo(({ layer: t, handleLayerPointerDown: e }) => {
+  const { getLayerRenderState: n } = Ct(), { style: r, isResizable: o, isResizing: s, onResizeHandlePointerDown: l } = n(t), a = d.useMemo(() => {
+    const f = {};
+    return t.gridArea && (f.gridArea = t.gridArea), t.gridRow && (f.gridRow = t.gridRow), t.gridColumn && (f.gridColumn = t.gridColumn), f;
+  }, [t.gridArea, t.gridRow, t.gridColumn]), u = d.useMemo(() => {
+    const f = !!t.floating, g = Jt(t.scrollable, f), b = {
+      ...r,
+      ...a,
+      minWidth: 0,
+      minHeight: 0,
+      overflow: g
+    };
+    return o ? { ...b, position: "relative" } : b;
+  }, [r, a, o, t.scrollable, t.floating]), p = d.useCallback(() => {
+    t.floating?.onClose?.();
+  }, [t.floating]);
+  return /* @__PURE__ */ _(
+    "div",
+    {
+      "data-layer-id": t.id,
+      "data-draggable": !!t.floating?.draggable,
+      "data-resizable": o,
+      "data-resizing": s,
+      style: u,
+      onPointerDown: e,
+      children: [
+        /* @__PURE__ */ z(kt, { layerId: t.id, children: /* @__PURE__ */ z(Et, { layer: t, onClose: p }) }),
+        /* @__PURE__ */ z(It, { layerId: t.id, isResizable: o, onPointerDown: l })
+      ]
+    }
+  );
+});
+Mt.displayName = "EmbeddedLayer";
+const Qt = ({ layers: t }) => {
+  const { handleLayerPointerDown: e } = Ct();
+  return /* @__PURE__ */ z(U, { children: t.map((n) => {
+    const r = n.floating?.mode ?? "embedded";
+    return n.floating && r === "popup" ? /* @__PURE__ */ z(Ht, { layer: n }, n.id) : /* @__PURE__ */ z(Mt, { layer: n, handleLayerPointerDown: e }, n.id);
+  }) });
+}, dt = {
+  position: "absolute",
+  pointerEvents: "auto"
+}, gt = ({
+  direction: t,
+  trackIndex: e,
+  align: n,
+  gap: r,
+  span: o,
+  onResize: s
+}) => {
+  const l = t === "col" ? "vertical" : "horizontal", a = d.useCallback(
+    (f) => {
+      const g = n === "start" ? -f : f;
+      s(t, e, g);
+    },
+    [n, t, e, s]
+  ), u = d.useMemo(() => t === "col" ? {
+    gridColumn: `${e + 1} / ${e + 2}`,
+    gridRow: `${o.start} / ${o.end}`
+  } : {
+    gridRow: `${e + 1} / ${e + 2}`,
+    gridColumn: `${o.start} / ${o.end}`
+  }, [t, e, o]), p = d.useMemo(() => {
+    const g = Math.max(0, r) / 2 + tt / 2;
+    return t === "col" ? {
+      ...dt,
+      width: tt,
+      height: "100%",
+      top: 0,
+      bottom: 0,
+      ...n === "start" ? { left: -g } : { right: -g }
+    } : {
+      ...dt,
+      width: "100%",
+      height: tt,
+      left: 0,
+      right: 0,
+      ...n === "start" ? { top: -g } : { bottom: -g }
+    };
+  }, [n, t, r]);
+  return /* @__PURE__ */ z("div", { "data-resizable": "true", style: { ...u, position: "relative", pointerEvents: "none" }, children: /* @__PURE__ */ z("div", { "data-direction": l, "data-align": n, "data-handle": "true", style: p, children: /* @__PURE__ */ z(Ft, { direction: l, onResize: a }) }) });
+}, te = (t) => {
+  const e = /* @__PURE__ */ new Map();
+  t.forEach((r, o) => {
+    r.forEach((s, l) => {
+      if (!s || s === ".")
+        return;
+      const a = e.get(s);
+      if (a) {
+        const p = {
+          rowStart: Math.min(a.rowStart, o),
+          rowEnd: Math.max(a.rowEnd, o),
+          colStart: Math.min(a.colStart, l),
+          colEnd: Math.max(a.colEnd, l)
+        };
+        e.set(s, p);
+        return;
+      }
+      const u = {
+        rowStart: o,
+        rowEnd: o,
+        colStart: l,
+        colEnd: l
+      };
+      e.set(s, u);
+    });
+  });
+  const n = /* @__PURE__ */ new Map();
+  return e.forEach((r, o) => {
+    const s = r.rowStart + 1, l = r.rowEnd + 2, a = r.colStart + 1, u = r.colEnd + 2, p = {
+      gridArea: o,
+      gridRow: `${s} / ${l}`,
+      gridColumn: `${a} / ${u}`
+    };
+    n.set(o, p);
+  }), n;
+}, ee = (t, e) => {
+  if ((t.positionMode ?? "grid") !== "grid")
+    return t;
+  const r = t.gridArea ?? t.id, o = e.get(r);
+  if (!o)
+    return t;
+  const s = !t.gridArea, l = !t.gridRow, a = !t.gridColumn;
+  return !s && !l && !a ? t : {
+    ...t,
+    gridArea: s ? o.gridArea : t.gridArea,
+    gridRow: l ? o.gridRow : t.gridRow,
+    gridColumn: a ? o.gridColumn : t.gridColumn
+  };
+}, ne = (t, e) => {
+  const n = d.useMemo(() => te(t.areas), [t.areas]), r = d.useMemo(() => e.map((a) => ee(a, n)), [e, n]), o = d.useMemo(
+    () => r.filter((a) => a.visible !== !1),
+    [r]
+  ), s = d.useMemo(
+    () => o.filter((a) => !a.drawer),
+    [o]
+  ), l = d.useMemo(() => {
+    const a = /* @__PURE__ */ new Map();
+    return r.forEach((u) => {
+      a.set(u.id, u);
+    }), a;
+  }, [r]);
+  return {
+    normalizedLayers: r,
+    visibleLayers: o,
+    regularLayers: s,
+    layerById: l
+  };
+}, re = (t) => {
+  if (!t)
+    return { rowGap: 0, columnGap: 0 };
+  const e = t.split(/\s+/).map((r) => r.trim()).filter(Boolean), n = (r) => {
+    const o = r.match(/^(-?\d+(?:\.\d+)?)px$/);
+    return o ? Number.parseFloat(o[1]) : 0;
+  };
+  if (e.length === 1) {
+    const r = n(e[0]);
+    return { rowGap: r, columnGap: r };
+  }
+  return {
+    rowGap: n(e[0]),
+    columnGap: n(e[1])
+  };
+}, oe = (t, e) => {
+  if (!t)
+    return [];
+  const n = getComputedStyle(t);
+  return (e === "col" ? n.gridTemplateColumns : n.gridTemplateRows).split(/\s+/).map((o) => parseFloat(o)).filter((o) => !Number.isNaN(o));
+}, Lt = (t, e = Number.NEGATIVE_INFINITY, n = Number.POSITIVE_INFINITY) => Math.min(Math.max(t, e), n), Ue = (t, e) => typeof t != "number" || !Number.isFinite(t) ? e : t, Z = (t, e) => `${t}-${e}`, se = (t, e, n, r) => {
+  const o = Z(n, r), s = e[o];
+  return s !== void 0 ? `minmax(${t.minSize ?? 0}px, ${s}px)` : t.size;
+}, ht = (t, e, n) => t.map((r, o) => se(r, e, n, o)).join(" "), j = (t, e) => t.reduce((n, r, o) => (r.resizable && r.size.endsWith("px") && (n[Z(e, o)] = parseInt(r.size, 10)), n), {}), ie = ({
+  trackSizes: t,
+  track: e,
+  direction: n,
+  trackIndex: r,
+  containerRef: o
+}) => {
+  const s = Z(n, r), l = t[s];
+  if (l !== void 0)
+    return l;
+  const u = oe(o?.current ?? null, n)[r];
+  return u !== void 0 && u > 0 ? u : e.size.endsWith("px") ? Number.parseInt(e.size, 10) : 300;
+}, ae = (t, e) => t.reduce((n, r, o) => o === e ? n : r.size.includes("fr") ? n + 100 : n + (r.minSize ?? 50), 0), ce = ({
+  track: t,
+  tracks: e,
+  trackIndex: n,
+  direction: r,
+  containerRef: o,
+  gapSizes: s
+}) => {
+  if (!o?.current)
+    return t.maxSize;
+  const l = r === "col" ? o.current.offsetWidth : o.current.offsetHeight, a = ae(e, n), u = e.length - 1, p = r === "col" ? s.columnGap : s.rowGap, f = u * p, g = l - a - f;
+  return t.maxSize !== void 0 ? Math.min(t.maxSize, g) : g;
+}, le = (t, e, n) => Lt(t, e ?? Number.NEGATIVE_INFINITY, n ?? Number.POSITIVE_INFINITY), ft = (t, e) => {
+  const n = t.length, r = [];
+  for (let l = 0; l < n; l++) {
+    const a = t[l], u = a[e], p = a[e + 1];
+    u !== p && r.push(l);
+  }
+  if (r.length === 0)
+    return { start: 1, end: n + 1 };
+  const o = Math.min(...r), s = Math.max(...r);
+  return { start: o + 1, end: s + 2 };
+}, mt = (t, e) => {
+  const n = t[e], r = t[e + 1], o = n?.length ?? 0, s = [];
+  for (let u = 0; u < o; u++) {
+    const p = n?.[u], f = r?.[u];
+    p !== f && s.push(u);
+  }
+  if (s.length === 0)
+    return { start: 1, end: o + 1 };
+  const l = Math.min(...s), a = Math.max(...s);
+  return { start: l + 1, end: a + 2 };
+}, ue = (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 r = [];
+  return Array.from({ length: t.length - 1 }, (s, l) => l).forEach((s) => {
+    const l = t[s];
+    if (t[s + 1]?.resizable) {
+      const u = ft(e, s);
+      r.push({ trackIndex: s + 1, align: "start", span: u });
+      return;
+    }
+    if (l?.resizable) {
+      const u = ft(e, s);
+      r.push({ trackIndex: s, align: "end", span: u });
+    }
+  }), r;
+}, de = (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 r = [];
+  return Array.from({ length: t.length - 1 }, (s, l) => l).forEach((s) => {
+    const l = t[s];
+    if (t[s + 1]?.resizable) {
+      const u = mt(e, s);
+      r.push({ trackIndex: s + 1, align: "start", span: u });
+      return;
+    }
+    if (l?.resizable) {
+      const u = mt(e, s);
+      r.push({ trackIndex: s, align: "end", span: u });
+    }
+  }), r;
+}, ge = (t) => t !== void 0 ? { gap: t } : {}, he = (t, e) => {
+  const n = Object.keys(e), r = {};
+  for (const f of n)
+    r[f] = t[f] ?? e[f];
+  const o = Object.keys(t), s = o.length !== n.length, l = o.some(
+    (f) => !Object.prototype.hasOwnProperty.call(r, f)
+  ), a = s ? !0 : l, u = n.some((f) => t[f] !== r[f]);
+  return (a ? !0 : u) ? r : null;
+}, fe = (t, e, n) => {
+  const [r, o] = d.useState(() => ({
+    ...j(t.columns, "col"),
+    ...j(t.rows, "row")
+  }));
+  Rt(() => {
+    const g = {
+      ...j(t.columns, "col"),
+      ...j(t.rows, "row")
+    };
+    o((b) => he(b, g) ?? b);
+  }, [t.columns, t.rows]);
+  const s = d.useMemo(() => t.areas.map((g) => `"${g.join(" ")}"`).join(" "), [t.areas]), l = d.useMemo(() => re(t.gap), [t.gap]), a = d.useMemo(
+    () => ue(t.columns, t.areas),
+    [t.columns, t.areas]
+  ), u = d.useMemo(
+    () => de(t.rows, t.areas),
+    [t.rows, t.areas]
+  ), p = d.useMemo(() => ({
+    ...t.style,
+    ...e,
+    gridTemplateAreas: s,
+    gridTemplateRows: ht(t.rows, r, "row"),
+    gridTemplateColumns: ht(t.columns, r, "col"),
+    ...ge(t.gap)
+  }), [s, t.columns, t.gap, t.rows, t.style, e, r]), f = d.useCallback(
+    (g, b, C) => {
+      const E = g === "row" ? t.rows : t.columns, y = E[b];
+      if (!y || !y.resizable)
+        return;
+      const T = ie({
+        trackSizes: r,
+        track: y,
+        direction: g,
+        trackIndex: b,
+        containerRef: n
+      }), P = ce({
+        track: y,
+        tracks: E,
+        trackIndex: b,
+        direction: g,
+        containerRef: n,
+        gapSizes: l
+      }), L = Z(g, b);
+      o((H) => {
+        const G = T + C, D = le(G, y.minSize, P);
+        return { ...H, [L]: D };
+      });
+    },
+    [t.columns, t.rows, r, n, l]
+  );
+  return {
+    columnHandles: a,
+    rowHandles: u,
+    gapSizes: l,
+    gridStyle: p,
+    handleResize: f
+  };
+}, me = (t) => t.positionMode ? t.positionMode : t.floating ? (t.floating.mode ?? "embedded") === "embedded" ? "absolute" : "relative" : "grid", pe = (t) => ({ position: t === "grid" ? "relative" : t }), be = (t, e) => e !== "grid" ? {} : {
+  gridArea: t.gridArea,
+  gridRow: t.gridRow,
+  gridColumn: t.gridColumn
+}, ze = (t) => t ? {
+  top: t.top,
+  right: t.right,
+  bottom: t.bottom,
+  left: t.left
+} : {}, we = (t) => t !== void 0 ? { zIndex: t } : {}, Se = (t, e) => ({
+  width: t,
+  height: e
+}), ve = (t, e) => t.pointerEvents !== void 0 ? typeof t.pointerEvents == "boolean" ? { pointerEvents: t.pointerEvents ? "auto" : "none" } : { pointerEvents: t.pointerEvents } : e === "absolute" || e === "fixed" ? { pointerEvents: "auto" } : {}, Ce = (t) => t.floating ? t.floating.position ?? t.floating.defaultPosition ?? t.position : t.position, Re = (t) => {
+  if (t.floating) {
+    const e = t.floating.size ?? t.floating.defaultSize;
+    if (e)
+      return {
+        width: e.width,
+        height: e.height
+      };
+  }
+  return {
+    width: t.width,
+    height: t.height
+  };
+}, ye = (t) => t.floating?.zIndex !== void 0 ? t.floating.zIndex : t.zIndex, Ee = (t) => {
+  const e = me(t), n = Ce(t), r = Re(t), o = ye(t);
+  return {
+    ...t.style,
+    ...pe(e),
+    ...be(t, e),
+    ...ze(n),
+    ...we(o),
+    ...Se(r.width, r.height),
+    ...ve(t, e)
+  };
+}, Ie = (t) => {
+  const e = t.floating;
+  return e ? e.mode ?? "embedded" : null;
+}, k = (t) => Ie(t) !== "embedded" ? null : t.floating ?? null, pt = (t) => t instanceof HTMLElement ? ["INPUT", "TEXTAREA", "SELECT", "BUTTON"].includes(t.tagName) : !1, bt = (t, e, n) => {
+  const r = e ?? Number.NEGATIVE_INFINITY, o = n ?? Number.POSITIVE_INFINITY;
+  return Lt(t, r, o);
+}, zt = (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.`
+  );
+}, wt = (t) => {
+  const e = k(t);
+  if (!e)
+    throw new Error(`Floating layer "${t.id}" is missing floating configuration required for dragging.`);
+  const n = e.position ?? e.defaultPosition ?? t.position;
+  if (!n)
+    throw new Error(`Floating layer "${t.id}" must define position with left and top values.`);
+  return {
+    left: zt(n.left, "left", t.id),
+    top: zt(n.top, "top", t.id)
+  };
+}, Me = (t) => {
+  const e = k(t);
+  return e ? e.constraints ?? {} : {};
+}, Le = (t, e, n) => t ? t === "left" ? e - n : e + n : e, Te = (t, e, n) => t ? t === "top" ? e - n : e + n : e, Pe = (t, e, n) => !t || t === "right" ? e : e + n, xe = (t, e, n) => !t || t === "bottom" ? e : e + n, nt = (t, e) => t ? t.dataset.layerId === e ? t : nt(t.parentElement, e) : null, rt = (t, e, n) => !t || n?.(t) ? null : e(t) ? t : rt(t.parentElement, e, n), ke = (t) => t instanceof HTMLElement ? rt(
+  t,
+  (e) => e.dataset.dragHandle === "true",
+  (e) => e.dataset.dragIgnore === "true"
+) : null, St = (t) => t instanceof HTMLElement ? rt(
+  t,
+  (e) => e.dataset.resizeCorner !== void 0 || e.dataset.resizeEdge !== void 0
+) !== null : !1, V = (t) => {
+  const e = k(t);
+  return e ? e.resizable === !0 : !1;
+}, K = (t) => {
+  if (!k(t))
+    return null;
+  const n = Ne(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
+  };
+}, He = (t, e, n) => {
+  const r = t.filter(V).reduce((g, b) => {
+    if (n === b.id) {
+      const E = e[b.id];
+      if (E)
+        return g[b.id] = E, g;
+    }
+    const C = K(b);
+    return C && (g[b.id] = C), g;
+  }, {}), o = Object.keys(e), s = Object.keys(r), l = o.length !== s.length, a = o.some((g) => !Object.prototype.hasOwnProperty.call(r, g)), u = l ? !0 : a, p = s.some((g) => {
+    const b = e[g], C = r[g];
+    return !b || !C ? !0 : b.width !== C.width || b.height !== C.height;
+  });
+  return {
+    sizes: r,
+    changed: u ? !0 : p
+  };
+}, De = ({
+  layers: t,
+  layerById: e,
+  isRootLevel: n
+}) => {
+  const [r, o] = d.useState(null), [s, l] = d.useState(null), [a, u] = d.useState({}), [p, f] = d.useState({}), g = d.useRef(null), b = d.useRef(null), C = ct((c, i) => {
+    e.get(c)?.floating?.onMove?.(i);
+  }), E = ct((c, i) => {
+    e.get(c)?.floating?.onResize?.(i);
+  });
+  Rt(() => {
+    const { sizes: c, changed: i } = He(t, p, s);
+    i && f(c);
+  }, [t, s]);
+  const y = d.useCallback(
+    (c, i, h, m) => {
+      const w = wt(i), R = a[c] ?? { x: 0, y: 0 }, S = {
+        pointerStartX: m.clientX,
+        pointerStartY: m.clientY,
+        initialTranslationX: R.x,
+        initialTranslationY: R.y,
+        baseLeft: w.left,
+        baseTop: w.top,
+        layerId: c,
+        pointerId: m.pointerId,
+        target: h
+      };
+      if (S.target.setPointerCapture)
+        try {
+          S.target.setPointerCapture(S.pointerId);
+        } catch {
+        }
+      g.current = S, o(c);
+    },
+    [a]
+  ), T = d.useCallback(
+    (c) => {
+      const i = c.target, h = ke(i);
+      if (!h)
+        return;
+      const m = h.closest("[data-layer-id]")?.getAttribute("data-layer-id");
+      if (!m)
+        return;
+      const w = e.get(m);
+      if (!w)
+        return;
+      const R = k(w);
+      if (!(!R || R.draggable !== !0) && !pt(c.target) && !St(c.target) && h) {
+        const S = nt(h, m);
+        if (!S)
+          return;
+        y(m, w, S, c);
+        return;
+      }
+    },
+    [y, e]
+  ), P = d.useCallback(
+    (c, i) => {
+      const h = e.get(c), m = h ? k(h) : null;
+      if (!h || !m || m.draggable !== !0 || pt(i.target) || St(i.target))
+        return;
+      const w = nt(i.currentTarget, c);
+      w && y(c, h, w, i);
+    },
+    [y, e]
+  ), L = d.useCallback(
+    (c, i, h) => {
+      const m = e.get(c);
+      if (!m || !V(m))
+        return;
+      const w = p[c] ?? K(m);
+      if (!w)
+        return;
+      const R = wt(m), S = Me(m), M = a[c] ?? { x: 0, y: 0 };
+      if (h.stopPropagation(), h.preventDefault(), h.currentTarget.setPointerCapture)
+        try {
+          h.currentTarget.setPointerCapture(h.pointerId);
+        } catch {
+        }
+      b.current = {
+        layerId: c,
+        pointerId: h.pointerId,
+        horizontalEdge: i.horizontal,
+        verticalEdge: i.vertical,
+        startX: h.clientX,
+        startY: h.clientY,
+        startWidth: w.width,
+        startHeight: w.height,
+        startPosition: M,
+        baseLeft: R.left,
+        baseTop: R.top,
+        minWidth: S.minWidth,
+        maxWidth: S.maxWidth,
+        minHeight: S.minHeight,
+        maxHeight: S.maxHeight,
+        target: h.currentTarget
+      }, l(c);
+    },
+    [e, a, p]
+  ), H = d.useCallback(
+    (c) => {
+      const i = g.current;
+      if (!i)
+        return;
+      const h = c.clientX - i.pointerStartX, m = c.clientY - i.pointerStartY, w = {
+        x: i.initialTranslationX + h,
+        y: i.initialTranslationY + m
+      };
+      u((R) => ({ ...R, [i.layerId]: w })), C(i.layerId, {
+        left: i.baseLeft + w.x,
+        top: i.baseTop + w.y
+      });
+    },
+    [C]
+  ), G = d.useCallback(
+    (c) => {
+      const i = b.current;
+      if (!i || i.pointerId !== c.pointerId || !e.get(i.layerId))
+        return;
+      const m = c.clientX - i.startX, w = c.clientY - i.startY, R = Le(i.horizontalEdge, i.startWidth, m), S = Te(i.verticalEdge, i.startHeight, w), M = bt(R, i.minWidth, i.maxWidth), x = bt(S, i.minHeight, i.maxHeight), O = i.startWidth - M, q = i.startHeight - x, ot = Pe(
+        i.horizontalEdge,
+        i.startPosition.x,
+        O
+      ), Pt = xe(i.verticalEdge, i.startPosition.y, q), J = p[i.layerId], st = { width: M, height: x };
+      (!J || J.width !== M || J.height !== x) && (f((Q) => ({
+        ...Q,
+        [i.layerId]: st
+      })), E(i.layerId, st));
+      const it = a[i.layerId] ?? { x: 0, y: 0 }, Y = { x: ot, y: Pt };
+      (it.x !== Y.x || it.y !== Y.y) && (u((Q) => ({
+        ...Q,
+        [i.layerId]: Y
+      })), C(i.layerId, {
+        left: i.baseLeft + Y.x,
+        top: i.baseTop + Y.y
+      }));
+    },
+    [e, a, p, C, E]
+  ), D = d.useCallback((c) => {
+    const i = g.current;
+    if (i) {
+      if (i.pointerId === c.pointerId && i.target.releasePointerCapture)
+        try {
+          i.target.releasePointerCapture(i.pointerId);
+        } catch {
+        }
+      g.current = null;
+    }
+    o(null);
+  }, []), A = d.useCallback((c) => {
+    const i = b.current;
+    if (i) {
+      if (i.pointerId === c.pointerId && i.target.releasePointerCapture)
+        try {
+          i.target.releasePointerCapture(i.pointerId);
+        } catch {
+        }
+      b.current = null;
+    }
+    l(null);
+  }, []);
+  lt(r !== null, {
+    onMove: H,
+    onUp: D,
+    onCancel: D
+  }), lt(s !== null, {
+    onMove: G,
+    onUp: A,
+    onCancel: A
+  });
+  const $ = d.useCallback(
+    (c) => {
+      const i = Ee(c), h = k(c);
+      if (!h || h.draggable !== !0)
+        return i;
+      const m = a[c.id], w = r === c.id, R = s === c.id, S = m ? { transform: `translate(${m.x}px, ${m.y}px)` } : {}, M = p[c.id], x = V(c) ? K(c) : null, O = M ?? x, q = O ? { width: `${O.width}px`, height: `${O.height}px` } : {};
+      return {
+        ...i,
+        ...q,
+        ...S,
+        ...w || R ? { cursor: "grabbing" } : {}
+      };
+    },
+    [r, a, p, s]
+  ), B = d.useCallback(
+    (c) => {
+      if (!V(c))
+        return { isResizable: !1 };
+      const h = p[c.id], m = K(c);
+      return (h ?? m) !== null ? { isResizable: !0, onPointerDown: (M, x) => {
+        L(c.id, M, x);
+      } } : { isResizable: !1 };
+    },
+    [L, p]
+  ), F = d.useCallback(
+    (c) => {
+      const { isResizable: i, onPointerDown: h } = B(c), m = $(c), w = s === c.id;
+      return {
+        style: m,
+        isResizable: i,
+        isResizing: w,
+        onResizeHandlePointerDown: (R, S) => {
+          h && h(R, S);
+        }
+      };
+    },
+    [$, B, s]
+  ), v = d.useCallback(
+    (c) => ({
+      "data-drag-handle": "true",
+      role: "button",
+      "aria-roledescription": "Drag handle",
+      "aria-label": "Drag layer",
+      onPointerDown: (i) => {
+        P(c, i);
+      }
+    }),
+    [P]
+  );
+  return {
+    providerValue: d.useMemo(
+      () => ({
+        handleLayerPointerDown: T,
+        getLayerRenderState: F,
+        getLayerHandleProps: v,
+        isRootLevel: n
+      }),
+      [v, F, T, n]
+    ),
+    draggingLayerId: r,
+    resizingLayerId: s
+  };
+}, Ne = (t) => {
+  if (t.floating) {
+    const e = t.floating.size ?? t.floating.defaultSize;
+    if (e)
+      return { width: e.width, height: e.height };
+  }
+  if (typeof t.width == "number" && typeof t.height == "number")
+    return { width: t.width, height: t.height };
+}, Tt = {
+  display: "grid",
+  width: "100%",
+  height: "100%",
+  overflow: "hidden",
+  position: "relative"
+}, Ge = {
+  touchAction: "none",
+  WebkitTouchCallout: "none",
+  WebkitUserSelect: "none",
+  userSelect: "none"
+}, Ae = {
+  ...Tt,
+  overflow: "visible",
+  height: "auto",
+  minHeight: "100%"
+}, $e = (t) => t ? Ae : Tt, Ze = ({ config: t, layers: e, style: n, root: r = !1 }) => {
+  const o = d.useRef(null), { isIntersecting: s } = Bt(o, { threshold: 0 });
+  return /* @__PURE__ */ z(Dt, { config: t, layers: e, style: n, children: /* @__PURE__ */ z(Nt, { children: /* @__PURE__ */ z(Fe, { gridRef: o, isIntersecting: s, isRoot: r }) }) });
+}, Fe = ({ gridRef: t, isIntersecting: e, isRoot: n }) => {
+  const { config: r, style: o, layers: s } = vt(), { normalizedLayers: l, visibleLayers: a, regularLayers: u, layerById: p } = ne(r, s.defs), { columnHandles: f, rowHandles: g, gapSizes: b, gridStyle: C, handleResize: E } = fe(r, o, t), { providerValue: y, draggingLayerId: T, resizingLayerId: P } = De({
+    layers: l,
+    layerById: p,
+    isRootLevel: n
+  }), { setGridRef: L } = Gt();
+  d.useLayoutEffect(() => (L(t), () => {
+    L(null);
+  }), [t, L]);
+  const H = T ? !0 : !!P, G = d.useMemo(() => ({
+    ...$e(n),
+    ...C,
+    ...H ? Ge : {}
+  }), [C, H, n]), D = d.useMemo(
+    () => a.filter((v) => v.drawer?.inline ? !at(v.drawer.animationMode) : !1),
+    [a]
+  ), A = d.useMemo(
+    () => a.filter((v) => v.drawer?.inline ? at(v.drawer.animationMode) : !1),
+    [a]
+  ), $ = d.useMemo(
+    () => a.filter((v) => v.drawer ? !v.drawer.inline : !1),
+    [a]
+  ), B = A.length > 0, F = /* @__PURE__ */ _(
+    "div",
+    {
+      ref: t,
+      style: G,
+      "data-dragging": !!T,
+      "data-resizing": !!P,
+      "data-visible": e,
+      children: [
+        /* @__PURE__ */ z(At, { value: y, children: /* @__PURE__ */ z(Qt, { layers: u }) }),
+        f.map(({ trackIndex: v, align: N, span: c }) => /* @__PURE__ */ z(
+          gt,
+          {
+            direction: "col",
+            trackIndex: v,
+            align: N,
+            gap: b.columnGap,
+            span: c,
+            onResize: E
+          },
+          `col-${v}:${N}`
+        )),
+        g.map(({ trackIndex: v, align: N, span: c }) => /* @__PURE__ */ z(
+          gt,
+          {
+            direction: "row",
+            trackIndex: v,
+            align: N,
+            gap: b.rowGap,
+            span: c,
+            onResize: E
+          },
+          `row-${v}:${N}`
+        )),
+        /* @__PURE__ */ z(W, { layers: D })
+      ]
+    }
+  );
+  return B ? /* @__PURE__ */ _(U, { children: [
+    /* @__PURE__ */ _("div", { style: { position: "relative", width: "100%", height: "100%" }, children: [
+      F,
+      /* @__PURE__ */ z(W, { layers: A })
+    ] }),
+    /* @__PURE__ */ z(W, { layers: $ })
+  ] }) : /* @__PURE__ */ _(U, { children: [
+    F,
+    /* @__PURE__ */ z(W, { layers: $ })
+  ] });
+};
+export {
+  Ze as G,
+  Qt as a,
+  Ut as b,
+  gt as c,
+  fe as d,
+  Lt as e,
+  Ue as t,
+  ne as u
+};
+//# sourceMappingURL=GridLayout-kiWdpMLQ.js.map