@floegence/floe-webapp-core 0.89.2 → 0.90.1

package/dist/components/ui/Tabs.js

@@ -1,18 +1,19 @@
-import { createComponent as g, spread as be, mergeProps as ge, insert as v, effect as y, className as S, setAttribute as h, setStyleProperty as fe, memo as ue, use as ve, template as p, delegateEvents as $e } from "solid-js/web";
-import { splitProps as me, Show as A, createSignal as R, untrack as Y, createEffect as O, onCleanup as he } from "solid-js";
+import { createComponent as g, spread as ye, mergeProps as pe, insert as h, effect as I, className as A, setAttribute as f, setStyleProperty as L, memo as Ce, use as ke, template as S, delegateEvents as qe } from "solid-js/web";
+import { splitProps as Ie, Show as B, createSignal as z, untrack as Q, createEffect as q, onCleanup as xe } from "solid-js";
 import { cn as b } from "../../utils/cn.js";
-import { deferAfterPaint as T } from "../../utils/defer.js";
-import { KeyedFor as He } from "./KeyedFor.js";
-import { createUIFirstSelection as De } from "../../utils/uiFirstSelection.js";
-import { useViewActivation as Pe } from "../../context/ViewActivationContext.js";
-import { X as Fe, Plus as Oe, ChevronRight as We } from "../icons/index.js";
-var qe = /* @__PURE__ */ p('<svg xmlns=http://www.w3.org/2000/svg width=24 height=24 viewBox="0 0 24 24"fill=none stroke=currentColor stroke-width=2 stroke-linecap=round stroke-linejoin=round><path d="m15 18-6-6 6-6">'), _ = /* @__PURE__ */ p("<button type=button data-floe-interactive=icon>"), je = /* @__PURE__ */ p("<div>"), Ge = /* @__PURE__ */ p('<button type=button data-floe-interactive=icon aria-label="Add new tab">'), Ue = /* @__PURE__ */ p("<div><div role=tablist data-floe-surface=inset data-floe-surface-part=tab-rail aria-orientation=horizontal>"), Ve = /* @__PURE__ */ p("<span class=flex-shrink-0>"), Xe = /* @__PURE__ */ p('<div role=tab data-floe-surface-part=tab data-floe-interactive=item><span class="min-w-0 truncate max-w-32">'), Ke = /* @__PURE__ */ p("<div role=tabpanel>");
-const J = {
+import { deferAfterPaint as E } from "../../utils/defer.js";
+import { KeyedFor as je } from "./KeyedFor.js";
+import { createUIFirstSelection as Ge } from "../../utils/uiFirstSelection.js";
+import { useViewActivation as Ue } from "../../context/ViewActivationContext.js";
+import { X as Ve, Plus as Xe, ChevronRight as Ke } from "../icons/index.js";
+import { createTabReorder as Ye } from "./tabReorder.js";
+var Je = /* @__PURE__ */ S('<svg xmlns=http://www.w3.org/2000/svg width=24 height=24 viewBox="0 0 24 24"fill=none stroke=currentColor stroke-width=2 stroke-linecap=round stroke-linejoin=round><path d="m15 18-6-6 6-6">'), Z = /* @__PURE__ */ S("<button type=button data-floe-interactive=icon>"), Qe = /* @__PURE__ */ S("<div>"), Ze = /* @__PURE__ */ S('<button type=button data-floe-interactive=icon aria-label="Add new tab">'), _e = /* @__PURE__ */ S("<div><div role=tablist data-floe-surface=inset data-floe-surface-part=tab-rail aria-orientation=horizontal>"), et = /* @__PURE__ */ S("<span class=flex-shrink-0>"), tt = /* @__PURE__ */ S('<div role=tab data-floe-surface-part=tab data-floe-interactive=item style=user-select:none;-webkit-user-select:none><span class="min-w-0 truncate max-w-32">'), rt = /* @__PURE__ */ S("<div role=tabpanel>");
+const _ = {
   x: 0,
   width: 0,
   visible: !1
 };
-function Ye(i, t, m) {
+function ot(i, t, m) {
   const d = i.filter((x) => !x.disabled);
   if (!d.length) return null;
   const k = d.findIndex((x) => x.id === t);
@@ -38,10 +39,10 @@ function Ye(i, t, m) {
   }
   return d[w]?.id ?? null;
 }
-function _e(i) {
+function nt(i) {
   return i === 1 || i === 2 || i === 3 || i === 4 ? i : 2;
 }
-function Je(i) {
+function at(i) {
   switch (i) {
     case 1:
       return {
@@ -65,7 +66,7 @@ function Je(i) {
       };
   }
 }
-function Qe(i) {
+function st(i) {
   switch (i) {
     case "border":
       return {
@@ -84,11 +85,11 @@ function Qe(i) {
       };
   }
 }
-const Ze = (i) => (() => {
-  var t = qe();
-  return y(() => h(t, "class", i.class)), t;
+const lt = (i) => (() => {
+  var t = Je();
+  return I(() => f(t, "class", i.class)), t;
 })();
-function et(i) {
+function it(i) {
   const {
     container: t,
     tab: m
@@ -99,155 +100,160 @@ function et(i) {
       width: k,
       visible: k > 0
     };
-  const w = t.getBoundingClientRect(), x = m.getBoundingClientRect(), z = t.offsetWidth || t.clientWidth, L = w.width > 0 && z > 0 ? w.width / z : 1, E = Number.isFinite(L) && L > 0 ? L : 1, $ = x.width / E;
+  const w = t.getBoundingClientRect(), x = m.getBoundingClientRect(), D = t.offsetWidth || t.clientWidth, M = w.width > 0 && D > 0 ? w.width / D : 1, H = Number.isFinite(M) && M > 0 ? M : 1, P = x.width / H;
   return {
-    x: (x.left - w.left + t.scrollLeft) / E,
-    width: $,
-    visible: $ > 0
+    x: (x.left - w.left + t.scrollLeft) / H,
+    width: P,
+    visible: P > 0
   };
 }
-function ct(i) {
-  const [t, m] = me(i, ["items", "activeId", "defaultActiveId", "onChange", "onActiveIdChange", "onClose", "onAdd", "showAdd", "closable", "size", "features", "slotClassNames", "ariaLabel", "labels", "class"]), d = () => t.features?.indicator?.mode ?? "activeBorder", k = () => _e(t.features?.indicator?.thicknessPx), w = () => t.features?.indicator?.colorToken ?? "primary", x = () => t.features?.indicator?.animated ?? !0, z = () => t.features?.containerBorder ?? !0, L = () => t.features?.scrollButtons ?? "auto", E = () => t.features?.closeButton?.dangerHover ?? !0, $ = () => t.features?.closeButton?.enabledByDefault ?? t.closable ?? !1, we = () => t.features?.addButton?.enabled ?? t.showAdd ?? !1, Q = () => Je(k()), Z = () => Qe(w());
-  let f;
-  const ee = (() => {
+function wt(i) {
+  const [t, m] = Ie(i, ["items", "activeId", "defaultActiveId", "onChange", "onActiveIdChange", "onClose", "onAdd", "onReorder", "showAdd", "closable", "size", "features", "slotClassNames", "ariaLabel", "labels", "class"]), d = () => t.features?.indicator?.mode ?? "activeBorder", k = () => nt(t.features?.indicator?.thicknessPx), w = () => t.features?.indicator?.colorToken ?? "primary", x = () => t.features?.indicator?.animated ?? !0, D = () => t.features?.containerBorder ?? !0, M = () => t.features?.scrollButtons ?? "auto", H = () => t.features?.closeButton?.dangerHover ?? !0, P = () => t.features?.closeButton?.enabledByDefault ?? t.closable ?? !1, Se = () => t.features?.addButton?.enabled ?? t.showAdd ?? !1, ee = () => at(k()), te = () => st(w());
+  let u;
+  const re = (() => {
     try {
-      return Pe();
+      return Ue();
     } catch {
       return null;
     }
-  })(), B = () => ee ? ee.active() : !0;
-  let W = !1;
-  const [H, q] = R(J), I = /* @__PURE__ */ new Map();
+  })(), R = () => re ? re.active() : !0;
   let j = !1;
-  const D = () => d() === "slider", te = (o) => {
-    if (!f || !D()) return !1;
-    const s = I.get(o);
+  const [$, G] = z(_), y = /* @__PURE__ */ new Map(), p = Ye({
+    items: () => t.items,
+    onReorder: () => t.onReorder,
+    container: () => u,
+    elements: y
+  });
+  let U = !1;
+  const F = () => d() === "slider", oe = (n) => {
+    if (!u || !F()) return !1;
+    const s = y.get(n);
     if (!s) return !1;
-    const l = et({
-      container: f,
+    const l = it({
+      container: u,
       tab: s
     });
-    return q(l), l.visible;
-  }, Ce = () => {
-    if (!D()) {
-      q(J);
+    return G(l), l.visible;
+  }, Ae = () => {
+    if (!F()) {
+      G(_);
       return;
     }
-    te(U()) || q(J);
-  }, P = () => {
-    j || (j = !0, T(() => {
-      j = !1, Y(() => {
-        B() && Ce();
+    oe(X()) || G(_);
+  }, O = () => {
+    U || (U = !0, E(() => {
+      U = !1, Q(() => {
+        R() && Ae();
       });
     }));
-  }, re = () => t.activeId !== void 0, ke = () => t.onChange ?? t.onActiveIdChange, [xe, ye] = R(Y(() => t.defaultActiveId ?? t.items[0]?.id ?? "")), G = () => re() ? t.activeId : xe(), oe = De({
-    committed: G,
-    commit: (o) => {
-      re() || ye(o), ke()?.(o);
+  }, ne = () => t.activeId !== void 0, Be = () => t.onChange ?? t.onActiveIdChange, [Re, Le] = z(Q(() => t.defaultActiveId ?? t.items[0]?.id ?? "")), V = () => ne() ? t.activeId : Re(), ae = Ge({
+    committed: V,
+    commit: (n) => {
+      ne() || Le(n), Be()?.(n);
     }
-  }), U = oe.visual;
-  O(() => {
-    B() && (d(), U(), P());
+  }), X = ae.visual;
+  q(() => {
+    R() && (d(), X(), O());
   });
-  const [V, pe] = R(!1), [X, Ie] = R(!1), [Se, Ae] = R(!1), ne = () => L() === "auto" && Se(), Be = () => {
-    if (!f) return;
+  const [K, Me] = z(!1), [Y, Ne] = z(!1), [Te, ze] = z(!1), se = () => M() === "auto" && Te(), Ee = () => {
+    if (!u) return;
     const {
-      scrollLeft: o,
+      scrollLeft: n,
       scrollWidth: s,
       clientWidth: l
-    } = f, e = s > l;
-    Ae(e), pe(o > 0), Ie(o + l < s - 1);
-  }, F = () => {
-    W || (W = !0, T(() => {
-      W = !1, B() && Be();
+    } = u, e = s > l;
+    ze(e), Me(n > 0), Ne(n + l < s - 1);
+  }, W = () => {
+    j || (j = !0, E(() => {
+      j = !1, R() && Ee();
     }));
-  }, Le = () => {
-    f && f.scrollBy({
+  }, De = () => {
+    u && u.scrollBy({
       left: -150,
       behavior: "smooth"
     });
-  }, Me = () => {
-    f && f.scrollBy({
+  }, He = () => {
+    u && u.scrollBy({
       left: 150,
       behavior: "smooth"
     });
   };
-  O(() => {
-    if (!f || !B()) return;
-    F(), P();
-    const o = () => F();
-    f.addEventListener("scroll", o);
+  q(() => {
+    if (!u || !R()) return;
+    W(), O();
+    const n = () => W();
+    u.addEventListener("scroll", n);
     const s = () => {
-      F(), P();
+      W(), O();
     };
     let l;
-    typeof ResizeObserver < "u" ? (l = new ResizeObserver(s), l.observe(f)) : typeof window < "u" && window.addEventListener("resize", s), he(() => {
-      f?.removeEventListener("scroll", o), l?.disconnect(), typeof window < "u" && window.removeEventListener("resize", s);
+    typeof ResizeObserver < "u" ? (l = new ResizeObserver(s), l.observe(u)) : typeof window < "u" && window.addEventListener("resize", s), xe(() => {
+      u?.removeEventListener("scroll", n), l?.disconnect(), typeof window < "u" && window.removeEventListener("resize", s);
     });
-  }), O(() => {
-    const o = G();
-    T(() => {
-      B() && I.get(o)?.scrollIntoView?.({
+  }), q(() => {
+    const n = V();
+    E(() => {
+      R() && y.get(n)?.scrollIntoView?.({
         block: "nearest",
         inline: "nearest"
       });
     });
-  }), O(() => {
-    B() && (t.items.length, F(), P());
+  }), q(() => {
+    R() && (t.items.length, W(), O());
   });
-  const K = (o, s) => {
-    s || (oe.request(o), D() && te(o));
-  }, Ne = (o) => {
-    const s = t.items.find((e) => e.id === o);
+  const J = (n, s) => {
+    s || (ae.request(n), F() && oe(n));
+  }, Pe = (n) => {
+    const s = t.items.find((e) => e.id === n);
     if (!s) return;
-    K(s.id, s.disabled);
-    const l = I.get(s.id);
+    J(s.id, s.disabled);
+    const l = y.get(s.id);
     l?.focus({
       preventScroll: !0
     }), l?.scrollIntoView({
       block: "nearest",
       inline: "nearest"
     });
-  }, Re = (o, s) => {
-    const l = Ye(t.items, s.id, o.key);
-    l && (o.preventDefault(), Ne(l));
-  }, se = (o) => {
-    const l = !!I.get(o)?.contains(document.activeElement), e = t.items.findIndex((r) => r.id === o);
-    if (t.onClose?.(o), l && !t.items.some((r) => r.id === o)) {
-      const r = t.items.find((c) => c.id === G()) ?? t.items[Math.min(e, t.items.length - 1)];
-      r && I.get(r.id)?.focus({
+  }, $e = (n, s) => {
+    const l = ot(t.items, s.id, n.key);
+    l && (n.preventDefault(), Pe(l));
+  }, le = (n) => {
+    const l = !!y.get(n)?.contains(document.activeElement), e = t.items.findIndex((o) => o.id === n);
+    if (t.onClose?.(n), l && !t.items.some((o) => o.id === n)) {
+      const o = t.items.find((c) => c.id === V()) ?? t.items[Math.min(e, t.items.length - 1)];
+      o && y.get(o.id)?.focus({
         preventScroll: !0
       });
     }
-  }, Te = (o, s) => {
-    if (o.stopPropagation(), !t.onClose) return;
+  }, Fe = (n, s) => {
+    if (n.stopPropagation(), !t.onClose) return;
     const e = s;
-    T(() => Y(() => se(e)));
-  }, ze = {
+    E(() => Q(() => le(e)));
+  }, Oe = {
     sm: "h-[var(--floe-control-height-sm)] px-[var(--floe-control-padding-sm)]",
     md: "h-[var(--floe-control-height-md)] px-[var(--floe-control-padding-md)]"
-  }, Ee = (o, s) => {
-    const l = b("relative inline-flex items-center gap-1.5 whitespace-nowrap", "text-[length:var(--floe-type-control)] leading-[var(--floe-line-control)]"), e = s ? "cursor-not-allowed opacity-50" : "cursor-pointer", r = () => {
+  }, We = (n, s) => {
+    const l = b("relative inline-flex items-center gap-1.5 whitespace-nowrap select-none", "text-[length:var(--floe-type-control)] leading-[var(--floe-line-control)]"), e = s ? "cursor-not-allowed opacity-50" : "cursor-pointer", o = () => {
       const c = d();
-      return c === "none" || c === "slider" && H().visible ? "" : b("after:pointer-events-none after:absolute after:bottom-0 after:inset-x-2 after:rounded-full after:content-['']", Q().tabMarkerClass, Z().tabMarkerClass);
+      return c === "none" || c === "slider" && $().visible ? "" : b("after:pointer-events-none after:absolute after:bottom-0 after:inset-x-2 after:rounded-full after:content-['']", ee().tabMarkerClass, te().tabMarkerClass);
     };
     return b(
       l,
       e,
-      ze[t.size ?? "md"],
+      Oe[t.size ?? "md"],
       "rounded-control",
       "border",
       /* The selected face is painted by the surface layer (`data-floe-surface`
        * plus `aria-selected`), which keeps the fill, hairline and first
        * elevation step identical to every other selected control. */
-      o ? b(r(), "text-foreground", t.slotClassNames?.tabActive) : b("border-transparent text-[var(--floe-ink-soft)]", t.slotClassNames?.tabInactive),
+      n ? b(o(), "text-foreground", t.slotClassNames?.tabActive) : b("border-transparent text-[var(--floe-ink-soft)]", t.slotClassNames?.tabInactive),
       s && "opacity-50",
       t.slotClassNames?.tab
     );
   };
   return (() => {
-    var o = Ue(), s = o.firstChild;
-    be(o, ge({
+    var n = _e(), s = n.firstChild;
+    ye(n, pe({
       get class() {
         return b(
           /* One strip, one baseline: the rail, the scroll buttons and the add
@@ -257,22 +263,22 @@ function ct(i) {
            * control. */
           "relative flex items-stretch",
           t.size === "sm" ? "min-h-[var(--floe-control-height-sm)]" : "min-h-[var(--floe-control-height-md)]",
-          z() && "border-b border-[var(--floe-line)]",
+          D() && "border-b border-[var(--floe-line)]",
           t.slotClassNames?.root,
           t.class
         );
       }
-    }, m), !1, !0), v(o, g(A, {
+    }, m), !1, !0), h(n, g(B, {
       get when() {
-        return ne();
+        return se();
       },
       get children() {
-        var e = _();
-        return e.$$click = Le, v(e, g(Ze, {
+        var e = Z();
+        return e.$$click = De, h(e, g(lt, {
           class: "w-4 h-4"
-        })), y((r) => {
-          var c = !V(), a = b("flex-shrink-0 flex items-center justify-center", "w-6 rounded-control cursor-pointer bg-[var(--floe-well)] border border-[var(--floe-line)]", "transition-opacity duration-[var(--floe-duration-fast)] ease-[var(--floe-ease-out)]", V() ? "text-[var(--floe-ink-quiet)] hover:bg-[var(--floe-state-hover)] opacity-100" : "opacity-0 pointer-events-none", t.slotClassNames?.scrollButton), u = t.labels?.scrollLeft ?? "Scroll left";
-          return c !== r.e && (e.disabled = r.e = c), a !== r.t && S(e, r.t = a), u !== r.a && h(e, "aria-label", r.a = u), r;
+        })), I((o) => {
+          var c = !K(), a = b("flex-shrink-0 flex items-center justify-center", "w-6 rounded-control cursor-pointer bg-[var(--floe-well)] border border-[var(--floe-line)]", "transition-opacity duration-[var(--floe-duration-fast)] ease-[var(--floe-ease-out)]", K() ? "text-[var(--floe-ink-quiet)] hover:bg-[var(--floe-state-hover)] opacity-100" : "opacity-0 pointer-events-none", t.slotClassNames?.scrollButton), v = t.labels?.scrollLeft ?? "Scroll left";
+          return c !== o.e && (e.disabled = o.e = c), a !== o.t && A(e, o.t = a), v !== o.a && f(e, "aria-label", o.a = v), o;
         }, {
           e: void 0,
           t: void 0,
@@ -280,72 +286,78 @@ function ct(i) {
         }), e;
       }
     }), s);
-    var l = f;
-    return typeof l == "function" ? ve(l, s) : f = s, v(s, g(A, {
+    var l = u;
+    return typeof l == "function" ? ke(l, s) : u = s, h(s, g(B, {
       get when() {
-        return ue(() => !!D())() && H().visible;
+        return Ce(() => !!F())() && $().visible;
       },
       get children() {
-        var e = je();
-        return y((r) => {
-          var c = b("pointer-events-none absolute bottom-0 left-0 z-10", Q().sliderHeightClass, Z().sliderBgClass, x() ? "transition-[transform,width] duration-[var(--floe-duration-base)] ease-out motion-reduce:transition-none" : "transition-none", "will-change-transform", t.slotClassNames?.indicator), a = `translate3d(${H().x}px, 0, 0)`, u = `${H().width}px`;
-          return c !== r.e && S(e, r.e = c), a !== r.t && fe(e, "transform", r.t = a), u !== r.a && fe(e, "width", r.a = u), r;
+        var e = Qe();
+        return I((o) => {
+          var c = b("pointer-events-none absolute bottom-0 left-0 z-10", ee().sliderHeightClass, te().sliderBgClass, x() ? "transition-[transform,width] duration-[var(--floe-duration-base)] ease-out motion-reduce:transition-none" : "transition-none", "will-change-transform", t.slotClassNames?.indicator), a = `translate3d(${$().x}px, 0, 0)`, v = `${$().width}px`;
+          return c !== o.e && A(e, o.e = c), a !== o.t && L(e, "transform", o.t = a), v !== o.a && L(e, "width", o.a = v), o;
         }, {
           e: void 0,
           t: void 0,
           a: void 0
         }), e;
       }
-    }), null), v(s, g(He, {
+    }), null), h(s, g(je, {
       get each() {
         return t.items;
       },
       by: (e) => e.id,
       children: (e) => {
-        const r = () => e().id === U(), c = () => e().closable ?? $();
+        const o = () => e().id === X(), c = () => e().closable ?? P();
         return (() => {
-          var a = Xe(), u = a.firstChild;
-          return a.$$keydown = (n) => {
-            if (n.target === n.currentTarget) {
-              if (n.key === "Delete" && c() && !e().disabled) {
-                n.preventDefault(), se(e().id);
+          var a = tt(), v = a.firstChild;
+          return a.$$keydown = (r) => {
+            if (r.target === r.currentTarget && !p.keyDown(r, e())) {
+              if (r.key === "Delete" && c() && !e().disabled) {
+                r.preventDefault(), le(e().id);
                 return;
               }
-              if (n.key === "Enter" || n.key === " ") {
-                n.preventDefault(), K(e().id, e().disabled);
+              if (r.key === "Enter" || r.key === " ") {
+                r.preventDefault(), J(e().id, e().disabled);
                 return;
               }
-              Re(n, e());
+              $e(r, e());
+            }
+          }, a.addEventListener("dragstart", (r) => r.preventDefault()), a.$$pointerdown = (r) => p.start(r, e()), a.$$click = (r) => {
+            if (p.suppressClick()) {
+              r.preventDefault(), r.stopPropagation();
+              return;
             }
-          }, a.$$click = () => K(e().id, e().disabled), ve((n) => {
-            I.set(e().id, n), he(() => I.delete(e().id));
-          }, a), v(a, g(A, {
+            J(e().id, e().disabled);
+          }, ke((r) => {
+            y.set(e().id, r), xe(() => y.delete(e().id));
+          }, a), h(a, g(B, {
             get when() {
               return e().icon;
             },
             get children() {
-              var n = Ve();
-              return v(n, () => e().icon), n;
+              var r = et();
+              return h(r, () => e().icon), r;
             }
-          }), u), v(u, () => e().label), v(a, g(A, {
+          }), v), h(v, () => e().label), h(a, g(B, {
             get when() {
-              return ue(() => !!c())() && !e().disabled;
+              return Ce(() => !!c())() && !e().disabled;
             },
             get children() {
-              var n = _();
-              return n.$$click = (C) => Te(C, e().id), v(n, g(Fe, {
+              var r = Z();
+              return r.$$click = (C) => Fe(C, e().id), h(r, g(Ve, {
                 class: "w-3 h-3"
-              })), y((C) => {
-                var M = b("flex-shrink-0 flex items-center justify-center", "w-5 h-5 rounded-control cursor-pointer", "bg-transparent text-[var(--floe-ink-quiet)]", E() ? "hover:bg-error hover:text-error-foreground" : "hover:bg-[var(--floe-state-hover)]", "ml-1.5", t.slotClassNames?.closeButton), N = e().closeLabel ?? `Close ${e().label}`;
-                return M !== C.e && S(n, C.e = M), N !== C.t && h(n, "aria-label", C.t = N), C;
+              })), I((C) => {
+                var N = b("flex-shrink-0 flex items-center justify-center", "w-5 h-5 rounded-control cursor-pointer", "bg-transparent text-[var(--floe-ink-quiet)]", H() ? "hover:bg-error hover:text-error-foreground" : "hover:bg-[var(--floe-state-hover)]", "ml-1.5", t.slotClassNames?.closeButton), T = e().closeLabel ?? `Close ${e().label}`;
+                return N !== C.e && A(r, C.e = N), T !== C.t && f(r, "aria-label", C.t = T), C;
               }, {
                 e: void 0,
                 t: void 0
-              }), n;
+              }), r;
             }
-          }), null), y((n) => {
-            var C = Ee(r(), e().disabled), M = e().domId, N = e().panelId, ae = e().title, le = r() ? "raised" : "flat", ie = r(), ce = e().disabled, de = e().disabled ? -1 : r() ? 0 : -1;
-            return C !== n.e && S(a, n.e = C), M !== n.t && h(a, "id", n.t = M), N !== n.a && h(a, "aria-controls", n.a = N), ae !== n.o && h(a, "title", n.o = ae), le !== n.i && h(a, "data-floe-surface", n.i = le), ie !== n.n && h(a, "aria-selected", n.n = ie), ce !== n.s && h(a, "aria-disabled", n.s = ce), de !== n.h && h(a, "tabindex", n.h = de), n;
+          }), null), I((r) => {
+            var C = We(o(), e().disabled), N = e().id, T = p.dragging() === e().id ? "true" : void 0, ie = t.onReorder ? "none" : "pan-x", ce = p.dragging() === e().id ? "0.55" : void 0, de = p.dragging() ? "grabbing" : void 0, fe = p.before() === e().id ? "-2px 0 0 var(--floe-accent-ink)" : p.after() === e().id ? "2px 0 0 var(--floe-accent-ink)" : void 0, ue = e().domId, ve = e().panelId, he = e().title, be = o() ? "raised" : "flat", ge = o(), me = e().disabled, we = e().disabled ? -1 : o() ? 0 : -1;
+            return C !== r.e && A(a, r.e = C), N !== r.t && f(a, "data-floe-tab-id", r.t = N), T !== r.a && f(a, "data-floe-tab-dragging", r.a = T), ie !== r.o && L(a, "touch-action", r.o = ie), ce !== r.i && L(a, "opacity", r.i = ce), de !== r.n && L(a, "cursor", r.n = de), fe !== r.s && L(a, "box-shadow", r.s = fe), ue !== r.h && f(a, "id", r.h = ue), ve !== r.r && f(a, "aria-controls", r.r = ve), he !== r.d && f(a, "title", r.d = he), be !== r.l && f(a, "data-floe-surface", r.l = be), ge !== r.u && f(a, "aria-selected", r.u = ge), me !== r.c && f(a, "aria-disabled", r.c = me), we !== r.w && f(a, "tabindex", r.w = we), r;
           }, {
             e: void 0,
             t: void 0,
@@ -354,68 +366,74 @@ function ct(i) {
             i: void 0,
             n: void 0,
             s: void 0,
-            h: void 0
+            h: void 0,
+            r: void 0,
+            d: void 0,
+            l: void 0,
+            u: void 0,
+            c: void 0,
+            w: void 0
           }), a;
         })();
       }
-    }), null), v(o, g(A, {
+    }), null), h(n, g(B, {
       get when() {
-        return we();
+        return Se();
       },
       get children() {
-        var e = Ge();
+        var e = Ze();
         return e.$$click = () => {
-          const r = t.onAdd;
-          r && T(() => r());
-        }, v(e, g(Oe, {
+          const o = t.onAdd;
+          o && E(() => o());
+        }, h(e, g(Xe, {
           get class() {
             return t.size === "sm" ? "w-3.5 h-3.5" : "w-4 h-4";
           }
-        })), y(() => S(e, b("flex-shrink-0 flex items-center justify-center", "rounded-control cursor-pointer bg-[var(--floe-well)] border border-[var(--floe-line)]", "text-[var(--floe-ink-quiet)] hover:bg-[var(--floe-state-hover)] hover:text-foreground", t.size === "sm" ? "w-7" : "w-8", t.slotClassNames?.addButton))), e;
+        })), I(() => A(e, b("flex-shrink-0 flex items-center justify-center", "rounded-control cursor-pointer bg-[var(--floe-well)] border border-[var(--floe-line)]", "text-[var(--floe-ink-quiet)] hover:bg-[var(--floe-state-hover)] hover:text-foreground", t.size === "sm" ? "w-7" : "w-8", t.slotClassNames?.addButton))), e;
       }
-    }), null), v(o, g(A, {
+    }), null), h(n, g(B, {
       get when() {
-        return ne();
+        return se();
       },
       get children() {
-        var e = _();
-        return e.$$click = Me, v(e, g(We, {
+        var e = Z();
+        return e.$$click = He, h(e, g(Ke, {
           class: "w-4 h-4"
-        })), y((r) => {
-          var c = !X(), a = b("flex-shrink-0 flex items-center justify-center", "w-6 rounded-control cursor-pointer bg-[var(--floe-well)] border border-[var(--floe-line)]", "transition-opacity duration-[var(--floe-duration-fast)] ease-[var(--floe-ease-out)]", X() ? "text-[var(--floe-ink-quiet)] hover:bg-[var(--floe-state-hover)] opacity-100" : "opacity-0 pointer-events-none", t.slotClassNames?.scrollButton), u = t.labels?.scrollRight ?? "Scroll right";
-          return c !== r.e && (e.disabled = r.e = c), a !== r.t && S(e, r.t = a), u !== r.a && h(e, "aria-label", r.a = u), r;
+        })), I((o) => {
+          var c = !Y(), a = b("flex-shrink-0 flex items-center justify-center", "w-6 rounded-control cursor-pointer bg-[var(--floe-well)] border border-[var(--floe-line)]", "transition-opacity duration-[var(--floe-duration-fast)] ease-[var(--floe-ease-out)]", Y() ? "text-[var(--floe-ink-quiet)] hover:bg-[var(--floe-state-hover)] opacity-100" : "opacity-0 pointer-events-none", t.slotClassNames?.scrollButton), v = t.labels?.scrollRight ?? "Scroll right";
+          return c !== o.e && (e.disabled = o.e = c), a !== o.t && A(e, o.t = a), v !== o.a && f(e, "aria-label", o.a = v), o;
         }, {
           e: void 0,
           t: void 0,
           a: void 0
         }), e;
       }
-    }), null), y((e) => {
-      var r = b(
+    }), null), I((e) => {
+      var o = b(
         "relative flex-1 flex items-center gap-0.5 overflow-x-auto",
         "scrollbar-none",
         // Hide scrollbar for all browsers
         "[&::-webkit-scrollbar]:hidden [-ms-overflow-style:none] [scrollbar-width:none]",
         t.slotClassNames?.scrollContainer
-      ), c = V() ? "" : void 0, a = X() ? "" : void 0, u = t.ariaLabel;
-      return r !== e.e && S(s, e.e = r), c !== e.t && h(s, "data-floe-overflow-start", e.t = c), a !== e.a && h(s, "data-floe-overflow-end", e.a = a), u !== e.o && h(s, "aria-label", e.o = u), e;
+      ), c = K() ? "" : void 0, a = Y() ? "" : void 0, v = t.ariaLabel;
+      return o !== e.e && A(s, e.e = o), c !== e.t && f(s, "data-floe-overflow-start", e.t = c), a !== e.a && f(s, "data-floe-overflow-end", e.a = a), v !== e.o && f(s, "aria-label", e.o = v), e;
     }, {
       e: void 0,
       t: void 0,
       a: void 0,
       o: void 0
-    }), o;
+    }), n;
   })();
 }
-function dt(i) {
-  const [t, m] = me(i, ["active", "keepMounted", "labelledBy", "class", "children"]);
-  return g(A, {
+function Ct(i) {
+  const [t, m] = Ie(i, ["active", "keepMounted", "labelledBy", "class", "children"]);
+  return g(B, {
     get when() {
       return t.keepMounted || t.active;
     },
     get children() {
-      var d = Ke();
-      return be(d, ge({
+      var d = rt();
+      return ye(d, pe({
         get "aria-labelledby"() {
           return t.labelledBy;
         },
@@ -428,13 +446,13 @@ function dt(i) {
         get class() {
           return b(!t.active && t.keepMounted && "hidden", t.class);
         }
-      }, m), !1, !0), v(d, () => t.children), d;
+      }, m), !1, !0), h(d, () => t.children), d;
     }
   });
 }
-$e(["click", "keydown"]);
+qe(["click", "pointerdown", "keydown"]);
 export {
-  dt as TabPanel,
-  ct as Tabs,
-  Ye as resolveTabNavigationTargetId
+  Ct as TabPanel,
+  wt as Tabs,
+  ot as resolveTabNavigationTargetId
 };

package/dist/components/ui/WindowTabs.js

@@ -5,7 +5,7 @@ function m(e) {
   return t(a, n(e, {
     size: "sm",
     get class() {
-      return s("h-full min-h-0 min-w-0 flex-1", e.class);
+      return s("h-full min-h-0 min-w-0 flex-1 pr-8 select-none", e.class);
     },
     get features() {
       return {

package/dist/components/ui/tabReorder.d.ts

@@ -0,0 +1,19 @@
+type Item = {
+    id: string;
+    disabled?: boolean;
+};
+/** A drag proposes an insertion; only a completed drop changes host-owned order. */
+export declare function createTabReorder(options: {
+    items: () => Item[];
+    onReorder: () => ((ids: string[]) => void) | undefined;
+    container: () => HTMLElement | undefined;
+    elements: Map<string, HTMLElement>;
+}): {
+    start: (event: PointerEvent, item: Item) => void;
+    keyDown: (event: KeyboardEvent, item: Item) => boolean;
+    dragging: import("solid-js").Accessor<string | undefined>;
+    before: import("solid-js").Accessor<string | undefined>;
+    after: import("solid-js").Accessor<string | undefined>;
+    suppressClick: () => boolean;
+};
+export {};