@smwb/ui-solid 0.13.0 → 0.14.0

package/dist/headless/components/layout/tabGroups/tabGroups.js

@@ -0,0 +1,893 @@
+import { isServer as $, use as Ct, spread as dr, mergeProps as re, insert as _, createComponent as w, effect as j, className as _t, setAttribute as v, setStyleProperty as gt, addEventListener as Z, memo as fr, template as M, delegateEvents as gr } from "solid-js/web";
+import { splitProps as pr, createUniqueId as mr, createMemo as m, createComputed as br, createSignal as N, createEffect as xt, on as hr, onCleanup as pt, onMount as vr, children as wr, mapArray as Ot, createRenderEffect as yr, Show as st, For as oe } from "solid-js";
+import mt from "clsx";
+import { Tabs as Sr } from "../../navigation/tabs/tabs.js";
+import { Tab as Er } from "../../navigation/tabs/tab/tab.js";
+import { Menu as Ar } from "../../navigation/menu/menu.js";
+import { MenuItem as X } from "../../navigation/menu/menuItem.js";
+import { mergeRefs as Tr } from "../../../primitives/mergeRefs.js";
+import { mergeStyle as Dr } from "../../../primitives/mergeStyle.js";
+import { createControllableState as Cr } from "../../../primitives/createControllableState.js";
+import { callHandler as Q } from "../../../primitives/callHandler.js";
+import { matchesKeyboardShortcut as Rt } from "../../../utils/keyboardShortcut.js";
+import { throttle as _r } from "../../../utils/throttle.js";
+import { TAB_GROUPS_LABELS as xr, createTabGroupsLayout as Or, computeTabGroupsGrid as Rr, getGroups as k, groupBodyArea as ne, setActiveGroup as Mr, moveTab as K, gridTemplateRows as Lr, gridTemplateColumns as Pr, moveTabInDirection as Nr, selectTab as kr, groupHeaderArea as Fr, dropZoneAt as Gr, findGroupOfTab as bt, removeTab as zr, adjacentGroup as $r, separatorArea as Kr, describeTabGroupsChange as Br, resizeSplit as se } from "./tabGroupsLayout.js";
+import { ownerRootOf as ae, frameExitTarget as Hr, ownGroupIdOf as ie, deepActiveElement as ht, containsDeep as ce, tabMove as Ur, lastStopOf as qr, focusFromEnd as Vr } from "./tabGroupsFocus.js";
+import { Icon as Wr } from "../../base/icon/icon.js";
+var Yr = /* @__PURE__ */ M("<button type=button class=smwb-tab-groups__actions-trigger aria-haspopup=menu>"), jr = /* @__PURE__ */ M("<div>"), Zr = /* @__PURE__ */ M("<span class=smwb-tab-groups__panel-end tabindex=-1 aria-hidden=true>"), Xr = /* @__PURE__ */ M('<div class="smwb-tab-panel smwb-tab-groups__panel"role=tabpanel tabindex=0>'), Qr = /* @__PURE__ */ M("<div role=separator tabindex=0 aria-valuemin=0 aria-valuemax=100>"), Jr = /* @__PURE__ */ M("<div class=smwb-tab-groups__empty>"), Ir = /* @__PURE__ */ M("<span class=smwb-tab-groups__focus-guard tabindex=0>"), to = /* @__PURE__ */ M("<div><div class=smwb-tab-groups__status role=status data-testid=tab-groups-status>"), eo = /* @__PURE__ */ M("<div aria-hidden=true>");
+const ro = ["Alt+Shift+ArrowLeft", "Alt+Shift+ArrowRight", "Alt+Shift+ArrowUp", "Alt+Shift+ArrowDown", "Control+Shift+ArrowLeft", "Meta+Shift+ArrowLeft", "Control+Shift+ArrowRight", "Meta+Shift+ArrowRight"].join(" "), oo = [["left", ["Alt", "Shift", "ArrowLeft"]], ["right", ["Alt", "Shift", "ArrowRight"]], ["top", ["Alt", "Shift", "ArrowUp"]], ["bottom", ["Alt", "Shift", "ArrowDown"]]], no = '[role^="menuitem"]:not([aria-disabled="true"])';
+function Mt(f) {
+  let c = f ?? null;
+  for (; c; ) {
+    const T = c.getAttribute("data-group-id");
+    if (T !== null) return T;
+    c = c.parentElement;
+  }
+  return null;
+}
+function ue(f) {
+  return f.closest(".smwb-tab-item") ?? f;
+}
+function le(f) {
+  if (!f) return null;
+  const c = f.closest('[role="tab"]');
+  return c || (f.closest(".smwb-tab-item")?.querySelector('[role="tab"]') ?? null);
+}
+function at(f, c) {
+  if (f.type !== "group") {
+    if (f.id === c) return f;
+    for (const T of f.children) {
+      const E = at(T, c);
+      if (E) return E;
+    }
+  }
+}
+function fe(f) {
+  return f.type === "group" ? [f.id] : f.children.flatMap(fe);
+}
+function de(f) {
+  const c = [], T = (E) => {
+    if (E.type === "group") {
+      c.push(`h:${E.id}`, `p:${E.id}`);
+      return;
+    }
+    E.children.forEach((D, A) => {
+      T(D), A < E.children.length - 1 && c.push(`s:${E.id}:${A}`);
+    });
+  };
+  return T(f), c;
+}
+function so(f, c, T) {
+  const E = new Set(c);
+  T.forEach((d) => {
+    !E.has(d) && d.parentNode === f && d.remove();
+  });
+  const D = Array.from(f.children), A = /* @__PURE__ */ new Map();
+  D.forEach((d, l) => A.set(d, l));
+  const B = f.ownerDocument.activeElement, L = B === null ? -1 : c.findIndex((d) => d.contains(B)), H = L < 0 ? void 0 : A.get(c[L]), x = [];
+  c.forEach((d, l) => {
+    const y = A.get(d);
+    y !== void 0 && (H !== void 0 && l !== L && l < L != y < H || x.push(y));
+  });
+  const O = x.map(() => 1), J = x.map(() => -1);
+  let U = -1;
+  x.forEach((d, l) => {
+    for (let y = 0; y < l; y++)
+      x[y] < d && O[y] + 1 > O[l] && (O[l] = O[y] + 1, J[l] = y);
+    (U < 0 || O[l] > O[U]) && (U = l);
+  });
+  const F = /* @__PURE__ */ new Set();
+  for (let d = U; d >= 0; d = J[d]) F.add(x[d]);
+  let it = F.size > 0 ? D[Math.max(...F)].nextSibling : f.firstChild;
+  for (let d = c.length - 1; d >= 0; d--) {
+    const l = c[d], y = A.get(l);
+    (y === void 0 || !F.has(y)) && f.insertBefore(l, it), it = l;
+  }
+}
+function Lt(f) {
+  return k(f).map((c) => c.active).filter((c) => c !== null);
+}
+function Ao(f) {
+  const [c, T] = pr(f, [
+    "class",
+    "style",
+    "id",
+    "data-testid",
+    "ref",
+    "layout",
+    "defaultLayout",
+    "onLayoutChange",
+    "getTab",
+    "renderPanel",
+    "onTabClose",
+    "empty",
+    "minGroupSize",
+    "keyboardStep",
+    "groupActions",
+    "dense",
+    "labels",
+    // Wrapped so that the caller's handler still runs, first.
+    "onDragStart",
+    "onDragOver",
+    "onDrop",
+    "onDragEnd",
+    "onFocusIn",
+    "onKeyDown"
+  ]), E = mr(), D = () => c.id ?? E, A = (t) => encodeURIComponent(t), B = (t) => `${D()}-tab-${A(t)}`, L = (t) => `${D()}-panel-${A(t)}`, H = (t) => `${D()}-menu-${A(t)}`, x = (t) => `${D()}-header-${A(t)}`, O = (t, e) => `${D()}-separator-${A(t)}-${e}`, J = () => `${D()}-status`, U = () => c.minGroupSize ?? 120, F = () => c.keyboardStep ?? 5, it = () => c.groupActions !== !1, d = m(() => ({
+    ...xr,
+    ...c.labels
+  })), [l, y] = Cr({
+    value: () => c.layout,
+    defaultValue: c.defaultLayout ?? Or()
+  });
+  let b = l();
+  br(() => {
+    b = l();
+  });
+  const R = m(() => Rr(l())), G = m(() => k(l())), ge = m(() => G().length), pe = m(() => G().length > 1), me = m(() => new Set(Lt(l()))), vt = m(() => {
+    const t = /* @__PURE__ */ new Map();
+    return k(l()).forEach((e) => e.tabs.forEach((r) => t.set(r, e.id))), t;
+  }), S = (t, e) => k(t).find((r) => r.id === e), Pt = (t) => G().findIndex((e) => e.id === t), q = m(() => {
+    const t = G();
+    return t.length === 1 && (t[0]?.tabs.length ?? 0) === 0;
+  }), be = m(() => G().map((t) => t.id)), he = m(() => de(l().root).filter((t) => t.startsWith("s:"))), ve = m((t) => {
+    const e = vt(), r = t.filter((n) => e.has(n)), o = new Set(r);
+    return G().forEach((n) => n.tabs.forEach((s) => {
+      o.has(s) || (o.add(s), r.push(s));
+    })), r.length === t.length && r.every((n, s) => n === t[s]) ? t : r;
+  }, []), we = m(() => {
+    if (q()) return;
+    const t = l();
+    return [...de(t.root).flatMap((e) => {
+      if (e.startsWith("h:")) return [x(e.slice(2))];
+      if (e.startsWith("p:")) return (S(t, e.slice(2))?.tabs ?? []).map(L);
+      const r = e.lastIndexOf(":");
+      return [O(e.slice(2, r), Number(e.slice(r + 1)))];
+    }), J()].join(" ");
+  }), [ye, Se] = N(new Set(Lt(l())));
+  $ || xt(() => {
+    const t = l(), e = /* @__PURE__ */ new Set();
+    k(t).forEach((o) => o.tabs.forEach((n) => e.add(n)));
+    const r = Lt(t);
+    Se((o) => {
+      const n = /* @__PURE__ */ new Set();
+      let s = !1;
+      return o.forEach((a) => {
+        e.has(a) ? n.add(a) : s = !0;
+      }), r.forEach((a) => {
+        n.has(a) || (n.add(a), s = !0);
+      }), s || n.size !== o.size ? n : o;
+    });
+  });
+  const [Ee, Ae] = N(""), [ct, ut] = N(null), [Te, Nt] = N(!1), [De, I] = N(null), [Ce, tt] = N(null), [kt, Ft] = N(null);
+  let h, lt, wt = null;
+  const yt = /* @__PURE__ */ new WeakMap();
+  let Gt = 0, St = !1, dt = !1, et = null, Et = !1;
+  const _e = (t, e) => {
+    const r = Br(e, t, Re, d());
+    r !== "" && Ae((o) => o.replace(/\u00a0+$/, "") === r ? `${r} ` : r);
+  }, zt = (t, e, r) => {
+    const o = bt(e, t);
+    o && (wt = {
+      tab: t,
+      group: o.id,
+      index: o.tabs.indexOf(t),
+      ...r === void 0 ? {} : {
+        gone: r
+      },
+      after: e,
+      base: l(),
+      from: h ? ht(h.ownerDocument) : null
+    });
+  }, xe = (t, e) => {
+    if (e === t.base) return !0;
+    const r = yt.get(e), o = yt.get(t.after);
+    return r !== void 0 && o !== void 0 && r < o;
+  }, $t = () => {
+    const t = wt, e = l();
+    if (!t || xe(t, e)) return;
+    const r = h?.ownerDocument, o = bt(e, t.tab), n = o?.id === t.group && o.tabs.indexOf(t.tab) === t.index && (t.gone === void 0 || !S(e, t.gone)), s = n ? r?.getElementById(B(t.tab)) : null;
+    if (n && (!s || Mt(s) !== t.group) || (wt = null, !s || !h || !r)) return;
+    const a = ht(r);
+    a !== s && (a !== null && a !== r.body && a !== t.from && !ce(h, a) || s.focus());
+  }, V = (t, e) => {
+    t !== b && (b = t, Gt += 1, yt.set(t, Gt), y(() => t), c.onLayoutChange?.(t, e), _e(t, e), $t(), c.layout !== void 0 && !St && (St = !0, queueMicrotask(Oe)));
+  }, Oe = () => {
+    St = !1, !(c.layout === void 0 || b === l()) && (b = l());
+  };
+  $ || xt(hr(l, () => {
+    $t();
+  }, {
+    defer: !0
+  }));
+  const Re = (t) => {
+    const e = c.getTab(t);
+    return e ? e.title !== void 0 ? e.title : typeof e.label == "string" ? e.label : t : t;
+  }, P = (t, e, r, o, n = {}) => {
+    if (t === e) return;
+    const s = bt(t, r)?.id, a = s !== void 0 ? S(t, s) : void 0;
+    if (!s || !a) return;
+    const i = !k(t).some((p) => p.id === o), u = k(e).some((p) => p.id === s), g = n.edge !== void 0 && !u ? {
+      type: "split",
+      tab: r,
+      from: o,
+      to: s,
+      edge: n.edge,
+      sourceClosed: i
+    } : {
+      type: "move",
+      tab: r,
+      from: o,
+      to: s,
+      index: a.tabs.indexOf(r),
+      sourceClosed: i
+    };
+    n.focus && zt(r, t), V(t, g);
+  }, Me = (t) => (e, r) => {
+    if (e.type === "drop") return;
+    const o = b, n = S(o, t), s = n?.tabs[r];
+    !n || s === void 0 || V(kr(o, s), {
+      type: "select",
+      tab: s,
+      group: t
+    });
+  }, Le = (t) => (e, r) => {
+    const o = b, n = S(o, t), s = n?.tabs[e];
+    !n || s === void 0 || P(K(o, s, {
+      group: t,
+      index: r
+    }), o, s, t, {
+      focus: Y?.hadFocus ?? !1
+    });
+  }, Pe = (t, e, r) => {
+    const o = b, n = bt(o, t);
+    if (!n || c.onTabClose?.(t, e, r) === !1) return;
+    const s = zr(o, t);
+    if (s === o) return;
+    const a = !k(s).some((C) => C.id === n.id), i = h, u = i ? ht(i.ownerDocument) : null, g = r === "actions" || i !== void 0 && ie(i, u) === n.id, p = a && g ? $r(o, n.id) : void 0;
+    if (p !== void 0) {
+      const C = S(s, p)?.active;
+      C && zt(C, s, n.id);
+    }
+    V(s, {
+      type: "close",
+      tab: t,
+      group: n.id,
+      groupClosed: a
+    });
+  }, Ne = (t) => (e) => {
+    if (e.defaultPrevented || e.repeat || e.isComposing) return;
+    const r = e.target;
+    if (!(r instanceof Element)) return;
+    const o = r.closest('[role="tab"]');
+    if (!o || Mt(o) !== t || o.getAttribute("aria-disabled") === "true") return;
+    const n = o.getAttribute("data-tab-id");
+    if (!n) return;
+    const s = b, a = S(s, t);
+    if (!a) return;
+    for (const [p, C] of oo) {
+      if (!Rt(e, C)) continue;
+      const nt = Nr(s, n, p);
+      if (nt === s) return;
+      e.preventDefault(), P(nt, s, n, t, {
+        edge: p,
+        focus: !0
+      });
+      return;
+    }
+    const i = Rt(e, ["Mod", "Shift", "ArrowLeft"]) ? -1 : Rt(e, ["Mod", "Shift", "ArrowRight"]) ? 1 : 0;
+    if (i === 0) return;
+    const u = a.tabs.indexOf(n), g = u + i;
+    u < 0 || g < 0 || g >= a.tabs.length || (e.preventDefault(), P(K(s, n, {
+      group: t,
+      index: g
+    }), s, n, t, {
+      focus: !0
+    }));
+  }, ke = (t) => {
+    h?.ownerDocument?.getElementById(H(t))?.querySelector(no)?.focus({
+      preventScroll: !0
+    });
+  }, Kt = (t, e) => {
+    ut(t), e && ke(t);
+  }, Fe = (t, e) => {
+    if (ct() === t) {
+      ut(null);
+      return;
+    }
+    Kt(t, e.detail === 0);
+  }, Ge = (t, e) => {
+    e.defaultPrevented || e.repeat || e.key !== "ArrowDown" || (e.preventDefault(), Kt(t, !0));
+  }, Bt = (t) => {
+    const e = S(l(), t);
+    return !!(e && e.active !== null && e.tabs.length >= 2);
+  }, Ht = (t, e) => G()[Pt(t) + e]?.id, Ut = (t, e) => {
+    const r = S(l(), t);
+    return !!(r && r.active !== null && Ht(t, e) !== void 0);
+  }, qt = (t, e) => {
+    const r = S(l(), t);
+    if (!r || r.active === null) return !1;
+    const o = r.tabs.indexOf(r.active) + e;
+    return o >= 0 && o < r.tabs.length;
+  }, W = (t, e) => {
+    ut(null);
+    const r = b, o = S(r, t), n = o?.active;
+    if (!o || !n) return;
+    if (e === "splitRight" || e === "splitDown") {
+      const i = e === "splitRight" ? "right" : "bottom";
+      P(K(r, n, {
+        group: t,
+        edge: i
+      }), r, n, t, {
+        edge: i,
+        focus: !0
+      });
+      return;
+    }
+    if (e === "previous" || e === "next") {
+      const i = Ht(t, e === "previous" ? -1 : 1);
+      if (!i) return;
+      P(K(r, n, {
+        group: i
+      }), r, n, t, {
+        focus: !0
+      });
+      return;
+    }
+    const s = o.tabs.indexOf(n), a = s + (e === "left" ? -1 : 1);
+    s < 0 || a < 0 || a >= o.tabs.length || P(K(r, n, {
+      group: t,
+      index: a
+    }), r, n, t, {
+      focus: !0
+    });
+  }, ze = (t) => {
+    const e = l(), r = at(e.root, t);
+    if (!r) return 0;
+    const o = new Set(fe(r)), n = R().groups.filter((g) => o.has(g.id));
+    if (n.length === 0) return 0;
+    const s = r.direction === "row" ? R().columns : R().rows;
+    let a = Number.POSITIVE_INFINITY, i = Number.NEGATIVE_INFINITY;
+    n.forEach((g) => {
+      const p = r.direction === "row" ? g.column : g.row;
+      a = Math.min(a, p[0]), i = Math.max(i, p[1]);
+    });
+    let u = 0;
+    for (let g = a; g < i; g += 1) u += s[g] ?? 0;
+    return u;
+  }, Vt = (t) => {
+    const e = h?.getBoundingClientRect(), r = at(l().root, t);
+    return !e || !r ? 0 : (r.direction === "row" ? e.width : e.height) * ze(t) / 100;
+  }, Wt = (t) => t > 0 ? U() / t * 100 : 0, Yt = (t, e) => {
+    const r = at(t.root, e);
+    return {
+      type: "resize",
+      split: e,
+      sizes: r ? [...r.sizes] : []
+    };
+  }, $e = (t, e, r, o) => {
+    const n = b, s = se(n, t, e, r, o);
+    s !== n && V(s, Yt(s, t));
+  }, Ke = (t, e, r) => (o) => {
+    if (o.defaultPrevented) return;
+    const n = r === "vertical", s = o.key === (n ? "ArrowLeft" : "ArrowUp"), a = o.key === (n ? "ArrowRight" : "ArrowDown"), i = o.key === "Home" || o.key === "End";
+    if (!s && !a && !i) return;
+    o.preventDefault();
+    const u = i ? o.key === "Home" ? Number.NEGATIVE_INFINITY : Number.POSITIVE_INFINITY : s ? -F() : F();
+    $e(t, e, u, Wt(Vt(t)));
+  };
+  let rt = null;
+  const At = (t, e) => e === "vertical" ? t.clientX : t.clientY, jt = (t) => {
+    const e = rt;
+    if (!e) return;
+    const r = t - e.start, o = e.extentPx > 0 ? r / e.extentPx * 100 : 0, n = se(e.layout, e.split, e.index, o, e.min);
+    n !== b && V(n, Yt(n, e.split));
+  }, Tt = _r(jt, 1e3 / 60);
+  pt(() => Tt.cancel()), $ || xt(() => {
+    const t = kt();
+    if (!t) return;
+    const e = document.body, r = e.style.cursor;
+    e.style.cursor = t.orientation === "vertical" ? "col-resize" : "row-resize", pt(() => {
+      e.style.cursor = r;
+    });
+  });
+  const Be = (t, e, r, o) => (n) => {
+    if ($ || n.pointerType === "mouse" && n.button !== 0) return;
+    const s = Vt(e);
+    rt = {
+      key: t,
+      split: e,
+      index: r,
+      orientation: o,
+      pointerId: n.pointerId,
+      start: At(n, o),
+      extentPx: s,
+      min: Wt(s),
+      layout: b
+    }, Ft({
+      key: t,
+      orientation: o
+    });
+    const a = n.currentTarget;
+    if (typeof a.setPointerCapture == "function")
+      try {
+        a.setPointerCapture(n.pointerId);
+      } catch {
+      }
+  }, He = (t) => (e) => {
+    const r = rt;
+    !r || r.pointerId !== e.pointerId || Tt(At(e, t));
+  }, Zt = (t) => (e) => {
+    const r = rt;
+    !r || r.pointerId !== e.pointerId || (Tt.cancel(), jt(At(e, t)), rt = null, Ft(null), e.currentTarget.hasPointerCapture?.(e.pointerId) && e.currentTarget.releasePointerCapture(e.pointerId));
+  };
+  let Y = null, ft = null, z;
+  pt(() => {
+    z !== void 0 && cancelAnimationFrame(z);
+  });
+  const ot = (t) => {
+    ft !== t && (ft?.classList.remove("smwb-tab-item--drop-target"), ft = t, t?.classList.add("smwb-tab-item--drop-target"));
+  }, Dt = () => {
+    const t = Y?.group;
+    Array.from(h?.querySelectorAll(":scope > .smwb-tab-groups__header") ?? []).find((r) => r.getAttribute("data-group-id") === t)?.querySelectorAll(".smwb-tab-item--drop-target").forEach((r) => {
+      r !== ft && r.classList.remove("smwb-tab-item--drop-target");
+    });
+  }, Xt = () => {
+    Y = null, z !== void 0 && (cancelAnimationFrame(z), z = void 0), ot(null), I(null), tt(null), Nt(!1);
+  }, Qt = (t) => {
+    if (!h || !t || t.closest(".smwb-tab-groups") !== h) return null;
+    const e = t.closest(".smwb-tab-groups__header");
+    if (e) {
+      const n = e.getAttribute("data-group-id");
+      if (!n) return null;
+      const s = le(t), a = s?.getAttribute("data-tab-id"), i = S(b, n)?.tabs ?? [], u = a ? i.indexOf(a) : -1;
+      return {
+        kind: "row",
+        group: n,
+        index: u >= 0 ? u : null,
+        item: u >= 0 && s ? ue(s) : null
+      };
+    }
+    const r = t.closest(".smwb-tab-groups__drop-target");
+    if (!r) return null;
+    const o = r.getAttribute("data-group-id");
+    return o ? {
+      kind: "body",
+      group: o,
+      element: r
+    } : null;
+  }, Jt = (t, e) => {
+    const r = t.getBoundingClientRect();
+    return Gr(e.clientX - r.left, e.clientY - r.top, r.width, r.height);
+  }, It = (t, e, r) => t !== e ? !0 : r === "center" ? !1 : (S(b, e)?.tabs.length ?? 0) >= 2, Ue = (t) => {
+    if (Q(c.onDragStart, t), $) return;
+    const e = t.target;
+    if (!(e instanceof Element) || !h || e.closest(".smwb-tab-groups") !== h) return;
+    const r = le(e), o = r?.getAttribute("data-tab-id");
+    if (!r || !o || r.getAttribute("aria-disabled") === "true") return;
+    const n = Mt(r);
+    if (!n) return;
+    const s = h.ownerDocument, a = s.activeElement;
+    Y = {
+      tab: o,
+      group: n,
+      hadFocus: !!(a && a !== s.body && ue(r).contains(a))
+    };
+    const i = s.defaultView;
+    i && (z = i.requestAnimationFrame(() => {
+      z = void 0, Nt(!0);
+    }));
+  }, qe = (t) => {
+    Q(c.onDragOver, t);
+    const e = Y;
+    if (!e) return;
+    const r = Qt(t.target);
+    if (!r) {
+      ot(null), Dt(), I(null), tt(null);
+      return;
+    }
+    if (r.kind === "row") {
+      if (r.group === e.group) {
+        ot(null), r.item?.classList.add("smwb-tab-item--drop-target");
+        return;
+      }
+      Dt(), t.preventDefault(), t.dataTransfer && (t.dataTransfer.dropEffect = "move"), I(null), tt(null), ot(r.item);
+      return;
+    }
+    ot(null), Dt();
+    const o = Jt(r.element, t);
+    if (!It(e.group, r.group, o)) {
+      I(null), tt(null);
+      return;
+    }
+    t.preventDefault(), t.dataTransfer && (t.dataTransfer.dropEffect = "move"), I(r.group), tt(o);
+  }, Ve = (t) => {
+    Q(c.onDrop, t);
+    const e = Y;
+    if (!e) return;
+    const r = t.defaultPrevented ? null : Qt(t.target), o = r && r.kind === "body" ? Jt(r.element, t) : null;
+    if (Xt(), !r) return;
+    if (r.kind === "row") {
+      if (r.group === e.group) return;
+      const s = r.index === null ? {
+        group: r.group
+      } : {
+        group: r.group,
+        index: r.index
+      };
+      P(K(b, e.tab, s), b, e.tab, e.group, {
+        focus: e.hadFocus
+      });
+      return;
+    }
+    if (!o || !It(e.group, r.group, o)) return;
+    const n = o === "center" ? {
+      group: r.group
+    } : {
+      group: r.group,
+      edge: o
+    };
+    P(K(b, e.tab, n), b, e.tab, e.group, {
+      edge: o === "center" ? void 0 : o,
+      focus: e.hadFocus
+    });
+  }, We = (t) => {
+    Q(c.onDragEnd, t), Xt();
+  }, Ye = (t) => {
+    Q(c.onFocusIn, t);
+    const e = h, r = t.target;
+    if (!e || !(r instanceof HTMLElement)) return;
+    const o = et;
+    if (et = ae(r) === e ? r : null, o instanceof HTMLElement && o.localName === "iframe" && o !== r && !Et) {
+      const s = Hr(e, o, r);
+      if (s !== null && s === lt) {
+        dt = !0, s !== r && s.focus({
+          preventScroll: !0
+        });
+        return;
+      }
+      if (s !== null) {
+        s.focus();
+        return;
+      }
+    }
+    if (r === lt) {
+      Ze();
+      return;
+    }
+    const n = ie(e, r);
+    !n || b.activeGroup === n || V(Mr(b, n), {
+      type: "activate",
+      group: n
+    });
+  }, je = (t) => {
+    if (Q(c.onKeyDown, t), t.defaultPrevented || t.key !== "Tab" || t.altKey || t.ctrlKey || t.metaKey || t.isComposing) return;
+    const e = h, r = e ? ht(e.ownerDocument) : null;
+    if (!e || !r || !ce(e, r)) return;
+    const o = Ur(e, r, t.shiftKey ? -1 : 1);
+    o && (o.element === lt && (dt = !0), et = null, o.prevent ? (t.preventDefault(), o.element.focus()) : o.element.focus({
+      preventScroll: !0
+    }));
+  };
+  vr(() => {
+    const t = h, e = t?.ownerDocument.defaultView;
+    if (!t || !e) return;
+    let r;
+    const o = () => {
+      Et = !0, e.clearTimeout(r), r = e.setTimeout(() => {
+        Et = !1;
+      }, 0);
+    }, n = (a) => {
+      a.relatedTarget instanceof Node && !t.contains(a.relatedTarget) && (et = null);
+    }, s = () => {
+      const a = t.ownerDocument.activeElement;
+      a instanceof e.HTMLIFrameElement && ae(a) === t && (et = a);
+    };
+    t.addEventListener("pointerdown", o, !0), t.addEventListener("focusout", n), e.addEventListener("blur", s), pt(() => {
+      e.clearTimeout(r), t.removeEventListener("pointerdown", o, !0), t.removeEventListener("focusout", n), e.removeEventListener("blur", s);
+    });
+  });
+  const Ze = () => {
+    if (dt || !h) return;
+    const t = qr(h);
+    t && Vr(t);
+  }, Xe = () => Dr(c.style, {
+    "grid-template-columns": Pr(R()),
+    "grid-template-rows": Lr(R())
+  }), Qe = (t) => {
+    const e = R().groups.find((r) => r.id === t);
+    return e ? Fr(e) : "auto";
+  }, Je = (t) => {
+    const e = vt().get(t), r = e === void 0 ? void 0 : R().groups.find((o) => o.id === e);
+    return r ? ne(r) : "auto";
+  }, Ie = (t, e) => R().separators.find((r) => r.split === t && r.index === e), tr = (t, e) => {
+    const r = at(l().root, t);
+    if (!r) return 0;
+    const o = r.sizes[e] ?? 0, n = o + (r.sizes[e + 1] ?? 0);
+    return n > 0 ? Math.round(o / n * 100) : 0;
+  }, er = (t) => {
+    const e = De() === t ? Ce() : null;
+    return e ? `smwb-tab-groups__drop-target--${e}` : void 0;
+  }, rr = wr(() => c.empty), or = (t, e) => {
+    const r = () => c.getTab(e), o = m(() => r()?.closable !== !1), n = m(() => {
+      const a = r(), i = {};
+      return a?.disabled && (i.disabled = !0), a?.closeLabel !== void 0 && (i.closeLabel = a.closeLabel), a?.actions !== void 0 && (i.actions = a.actions), i;
+    }), s = m(() => r()?.disabled ? void 0 : ro);
+    return w(Er, re(n, {
+      get id() {
+        return B(e);
+      },
+      get "aria-controls"() {
+        return L(e);
+      },
+      "data-tab-id": e,
+      get "aria-keyshortcuts"() {
+        return s();
+      },
+      get label() {
+        return r()?.label ?? e;
+      },
+      get icon() {
+        return r()?.icon;
+      },
+      get closable() {
+        return o();
+      },
+      onClose: (a, i) => Pe(e, a, i)
+    }));
+  }, nr = (t) => {
+    const [e, r] = N(null), o = () => S(l(), t), n = () => o()?.tabs ?? [], s = () => {
+      const a = o()?.active;
+      if (a == null) return 0;
+      const i = n().indexOf(a);
+      return i < 0 ? 0 : i;
+    };
+    return (() => {
+      var a = jr();
+      return Z(a, "keydown", Ne(t), !0), v(a, "data-group-id", t), _(a, w(Sr, {
+        class: "smwb-tab-groups__tabs",
+        get value() {
+          return s();
+        },
+        get onChange() {
+          return Me(t);
+        },
+        get onReorder() {
+          return Le(t);
+        },
+        get "aria-label"() {
+          return d().group(Pt(t) + 1, ge());
+        },
+        scrollable: !0,
+        overflowMenu: !0,
+        get dense() {
+          return c.dense === !0;
+        },
+        get children() {
+          return w(oe, {
+            get each() {
+              return n();
+            },
+            children: (i) => or(t, i)
+          });
+        }
+      }), null), _(a, w(st, {
+        get when() {
+          return it();
+        },
+        get children() {
+          return [(() => {
+            var i = Yr();
+            return i.$$keydown = (u) => Ge(t, u), i.$$click = (u) => Fe(t, u), Ct((u) => r(() => u), i), _(i, w(Wr, {
+              name: "more_vert",
+              size: 20
+            })), j((u) => {
+              var g = d().groupActions, p = ct() === t, C = ct() === t ? H(t) : void 0;
+              return g !== u.e && v(i, "aria-label", u.e = g), p !== u.t && v(i, "aria-expanded", u.t = p), C !== u.a && v(i, "aria-controls", u.a = C), u;
+            }, {
+              e: void 0,
+              t: void 0,
+              a: void 0
+            }), i;
+          })(), w(Ar, {
+            get id() {
+              return H(t);
+            },
+            get anchorElement() {
+              return e();
+            },
+            get isOpen() {
+              return ct() === t;
+            },
+            onClose: () => ut(null),
+            placement: "bottom-end",
+            get children() {
+              return [w(X, {
+                get disabled() {
+                  return !Bt(t);
+                },
+                onClick: () => W(t, "splitRight"),
+                get children() {
+                  return d().splitRight;
+                }
+              }), w(X, {
+                get disabled() {
+                  return !Bt(t);
+                },
+                onClick: () => W(t, "splitDown"),
+                get children() {
+                  return d().splitDown;
+                }
+              }), w(X, {
+                get disabled() {
+                  return !Ut(t, -1);
+                },
+                onClick: () => W(t, "previous"),
+                get children() {
+                  return d().moveToPreviousGroup;
+                }
+              }), w(X, {
+                get disabled() {
+                  return !Ut(t, 1);
+                },
+                onClick: () => W(t, "next"),
+                get children() {
+                  return d().moveToNextGroup;
+                }
+              }), w(X, {
+                get disabled() {
+                  return !qt(t, -1);
+                },
+                onClick: () => W(t, "left"),
+                get children() {
+                  return d().moveLeft;
+                }
+              }), w(X, {
+                get disabled() {
+                  return !qt(t, 1);
+                },
+                onClick: () => W(t, "right"),
+                get children() {
+                  return d().moveRight;
+                }
+              })];
+            }
+          })];
+        }
+      }), null), j((i) => {
+        var u = mt("smwb-tab-groups__header", {
+          "smwb-tab-groups__header--active": l().activeGroup === t
+        }), g = x(t), p = Qe(t);
+        return u !== i.e && _t(a, i.e = u), g !== i.t && v(a, "id", i.t = g), p !== i.a && gt(a, "grid-area", i.a = p), i;
+      }, {
+        e: void 0,
+        t: void 0,
+        a: void 0
+      }), a;
+    })();
+  }, sr = (t) => {
+    const e = m(() => ye().has(t)), r = m(() => me().has(t)), o = m(() => vt().get(t) ?? "");
+    return (() => {
+      var n = Xr();
+      return v(n, "data-tab-id", t), _(n, w(st, {
+        get when() {
+          return e();
+        },
+        get children() {
+          return [fr(() => c.renderPanel(t)), Zr()];
+        }
+      })), j((s) => {
+        var a = L(t), i = B(t), u = r() ? void 0 : !0, g = o(), p = Je(t);
+        return a !== s.e && v(n, "id", s.e = a), i !== s.t && v(n, "aria-labelledby", s.t = i), u !== s.a && (n.hidden = s.a = u), g !== s.o && v(n, "data-group-id", s.o = g), p !== s.i && gt(n, "grid-area", s.i = p), s;
+      }, {
+        e: void 0,
+        t: void 0,
+        a: void 0,
+        o: void 0,
+        i: void 0
+      }), n;
+    })();
+  }, ar = (t, e, r) => {
+    const o = () => Ie(e, r), n = () => o()?.orientation ?? "vertical", s = () => {
+      const a = o();
+      return a ? Kr(a) : "auto";
+    };
+    return (() => {
+      var a = Qr();
+      return Z(a, "pointercancel", Zt(n())), Z(a, "pointerup", Zt(n()), !0), Z(a, "pointermove", He(n()), !0), Z(a, "pointerdown", Be(t, e, r, n()), !0), Z(a, "keydown", Ke(e, r, n()), !0), v(a, "data-split-id", e), v(a, "data-index", r), j((i) => {
+        var u = mt("smwb-tab-groups__separator", `smwb-tab-groups__separator--${n()}`, {
+          "smwb-tab-groups__separator--dragging": kt()?.key === t
+        }), g = O(e, r), p = n(), C = tr(e, r), nt = d().resize, ee = s();
+        return u !== i.e && _t(a, i.e = u), g !== i.t && v(a, "id", i.t = g), p !== i.a && v(a, "aria-orientation", i.a = p), C !== i.o && v(a, "aria-valuenow", i.o = C), nt !== i.i && v(a, "aria-label", i.i = nt), ee !== i.n && gt(a, "grid-area", i.n = ee), i;
+      }, {
+        e: void 0,
+        t: void 0,
+        a: void 0,
+        o: void 0,
+        i: void 0,
+        n: void 0
+      }), a;
+    })();
+  }, ir = (t) => {
+    const e = t.lastIndexOf(":");
+    return ar(t, t.slice(2, e), Number(t.slice(e + 1)));
+  }, cr = m(Ot(() => q() ? [] : be(), nr)), ur = m(Ot(() => q() ? [] : he(), ir)), lr = m(Ot(() => q() ? [] : ve(), sr)), te = m(() => [...cr(), ...ur(), ...lr()]);
+  return (() => {
+    var t = to(), e = t.firstChild, r = Tr(c.ref, (o) => {
+      h = o, !$ && yr((n) => {
+        const s = te();
+        return so(o, s, n), s;
+      }, []);
+    });
+    return typeof r == "function" && Ct(r, t), dr(t, re(T, {
+      get id() {
+        return D();
+      },
+      get class() {
+        return mt("smwb-tab-groups", {
+          "smwb-tab-groups--split": pe()
+        }, c.class);
+      },
+      get style() {
+        return Xe();
+      },
+      get "data-testid"() {
+        return c["data-testid"] ?? "tab-groups";
+      },
+      get "aria-owns"() {
+        return we();
+      },
+      onKeyDown: je,
+      onDragStart: Ue,
+      onDragOver: qe,
+      onDrop: Ve,
+      onDragEnd: We,
+      onFocusIn: Ye
+    }), !1, !0), _(t, () => $ ? te() : void 0, e), _(t, w(st, {
+      get when() {
+        return q();
+      },
+      get children() {
+        var o = Jr();
+        return _(o, rr), o;
+      }
+    }), e), _(t, w(st, {
+      get when() {
+        return Te();
+      },
+      get children() {
+        return w(oe, {
+          get each() {
+            return R().groups;
+          },
+          children: (o) => (() => {
+            var n = eo();
+            return j((s) => {
+              var a = mt("smwb-tab-groups__drop-target", er(o.id)), i = o.id, u = ne(o);
+              return a !== s.e && _t(n, s.e = a), i !== s.t && v(n, "data-group-id", s.t = i), u !== s.a && gt(n, "grid-area", s.a = u), s;
+            }, {
+              e: void 0,
+              t: void 0,
+              a: void 0
+            }), n;
+          })()
+        });
+      }
+    }), e), _(t, w(st, {
+      get when() {
+        return !q();
+      },
+      get children() {
+        var o = Ir();
+        return o.addEventListener("blur", () => {
+          dt = !1;
+        }), Ct((n) => lt = n, o), o;
+      }
+    }), e), v(e, "aria-atomic", !0), _(e, Ee), j(() => v(e, "id", J())), t;
+  })();
+}
+gr(["keydown", "click", "pointerdown", "pointermove", "pointerup"]);
+export {
+  Ao as TabGroups
+};
+//# sourceMappingURL=tabGroups.js.map