@alfadocs/ui-kit-debug 1.36.0 → 1.37.0

package/dist/_chunks/{tool-rail-Bq5eiFMG.js → tool-rail-BP8sjxCw.js}

@@ -1,17 +1,19 @@
-import { jsxs as x, jsx as f } from "react/jsx-runtime";
-import { forwardRef as Le, useRef as g, useState as T, useMemo as k, useId as Ve, useEffect as ie, useCallback as O, useImperativeHandle as je, Fragment as Ke } from "react";
+import { jsxs as T, jsx as f } from "react/jsx-runtime";
+import { forwardRef as Ue, useRef as v, useState as k, useMemo as D, useId as We, useCallback as P, useEffect as ge, useImperativeHandle as $e, Fragment as Ze } from "react";
 import { c as w } from "./index-D2ZczOXr.js";
-import { useTranslation as Me } from "react-i18next";
-import { I as oe } from "./icon-button-8xqRnkdG.js";
-import { S as Pe } from "./scroll-area-BZOvUhwQ.js";
-import { a as Be } from "./tooltip-Cp-PLePW.js";
-import { u as qe } from "./use-controllable-state-BiY4xTzM.js";
-import { u as Fe } from "./use-edge-resize-ZnGG7gyO.js";
-import { u as le } from "./use-isomorphic-layout-effect-BGfaCOP1.js";
-import { a as Oe, u as Ue, R as We } from "./use-list-reflow-Cw43nxw5.js";
-import { u as He } from "./use-theme-CAuo6EYT.js";
-import { u as $e } from "./registry-DvAUVLHh.js";
-const Ze = {
+import { useTranslation as Xe } from "react-i18next";
+import { I as be } from "./icon-button-8xqRnkdG.js";
+import { S as Ye } from "./scroll-area-BZOvUhwQ.js";
+import { a as Ge } from "./tooltip-Cp-PLePW.js";
+import { u as Je } from "./use-controllable-state-BiY4xTzM.js";
+import { u as Qe } from "./use-edge-resize-ZnGG7gyO.js";
+import { u as M } from "./use-isomorphic-layout-effect-BGfaCOP1.js";
+import { a as et, u as tt, R as st } from "./use-list-reflow-Cw43nxw5.js";
+import { u as at } from "./use-prefers-reduced-motion-BMwIQRjB.js";
+import { u as nt } from "./use-presence-transition-cDwWUXV-.js";
+import { u as rt } from "./use-theme-CAuo6EYT.js";
+import { u as it } from "./registry-DvAUVLHh.js";
+const ot = {
   id: "tool-rail",
   capabilities: ["open", "close", "select_single"],
   state: {
@@ -83,7 +85,7 @@ const Ze = {
       description: "Stable tool id emitted on each strip IconButton. The active icon also carries data-active set to its id."
     }
   }
-}, Xe = "ds:[inline-size:3rem]", Ye = "ds:[inline-size:var(--tool-rail-panel-inline-size,var(--ai-tools-rail-panel-inline-size,22rem))]", de = "--tool-rail-panel-inline-size", Ge = 288, Je = 880, Qe = 352, es = w(
+}, dt = "ds:[inline-size:3rem]", lt = "ds:[inline-size:var(--tool-rail-panel-inline-size,var(--ai-tools-rail-panel-inline-size,22rem))]", he = "--tool-rail-panel-inline-size", ct = 288, ut = 880, ft = 352, pt = w(
   ["ds:flex ds:shrink-0 ds:h-full", "ds:bg-[var(--background)]"].join(" "),
   {
     variants: {
@@ -101,23 +103,46 @@ const Ze = {
     },
     defaultVariants: { side: "end" }
   }
-), ss = w(
+), vt = w(
   [
     "ds:flex ds:shrink-0 ds:flex-col ds:items-center",
     "ds:pt-[var(--spacing-md)] ds:pb-[var(--spacing-md)]",
     "ds:gap-[var(--spacing-xs)]",
-    Xe
+    dt
   ].join(" ")
-), ts = w(
+), mt = w(
   [
     "ds:relative ds:flex ds:min-h-0 ds:flex-col ds:h-full",
     "ds:bg-[var(--background)]",
-    Ye,
-    // Defensive: the panel doesn't animate its width today, but if a
-    // consumer adds a transition on the var, suppress it mid-drag.
+    lt,
+    // Open / collapse: the panel fades and slides from the strip. The WIDTH
+    // snaps on purpose — animating it would re-lay-out the main area (a
+    // calendar grid) on every frame. Declared at rest so both directions
+    // have a value to move from.
+    "ds:transition-[opacity,translate] ds:duration-[var(--animation-duration)]",
+    "ds:ease-[var(--ease-out)] ds:motion-reduce:transition-none",
+    "ds:data-[presence=entering]:opacity-0 ds:data-[presence=leaving]:opacity-0",
+    "ds:data-[presence=leaving]:pointer-events-none",
     "ds:data-[resizing]:transition-none"
+  ].join(" "),
+  {
+    variants: {
+      // Slide toward the strip the panel belongs to, mirrored in RTL.
+      side: {
+        end: "ds:data-[presence=entering]:translate-x-[var(--spacing-md)] ds:data-[presence=leaving]:translate-x-[var(--spacing-md)] ds:rtl:data-[presence=entering]:-translate-x-[var(--spacing-md)] ds:rtl:data-[presence=leaving]:-translate-x-[var(--spacing-md)]",
+        start: "ds:data-[presence=entering]:-translate-x-[var(--spacing-md)] ds:data-[presence=leaving]:-translate-x-[var(--spacing-md)] ds:rtl:data-[presence=entering]:translate-x-[var(--spacing-md)] ds:rtl:data-[presence=leaving]:translate-x-[var(--spacing-md)]"
+      }
+    },
+    defaultVariants: { side: "end" }
+  }
+), gt = w(
+  [
+    "ds:flex ds:min-h-0 ds:flex-1 ds:flex-col",
+    "ds:transition-opacity ds:duration-[var(--animation-duration)]",
+    "ds:ease-[var(--ease-out)] ds:motion-reduce:transition-none",
+    "ds:data-[presence=entering]:opacity-0"
   ].join(" ")
-), as = w(
+), bt = w(
   [
     "ds:absolute ds:[inset-block:0] ds:z-[1] ds:select-none ds:touch-none",
     "ds:[inline-size:var(--resizable-handle-size)] ds:cursor-col-resize",
@@ -141,7 +166,7 @@ const Ze = {
     },
     defaultVariants: { edge: "inline-start" }
   }
-), rs = w(
+), ht = w(
   [
     "ds:absolute ds:-top-[var(--spacing-xs)] ds:-end-[var(--spacing-xs)]",
     "ds:inline-flex ds:items-center ds:justify-center",
@@ -154,7 +179,7 @@ const Ze = {
     "ds:pointer-events-none ds:select-none",
     "ds:forced-colors:outline ds:forced-colors:outline-1 ds:forced-colors:outline-[CanvasText]"
   ].join(" ")
-), ce = w(
+), ye = w(
   // `group/rail-tool` lets an affordance overlay (e.g. a pin star) reveal on
   // hover / focus-within of the whole slot.
   ["ds:group/rail-tool ds:relative", "ds:rounded-[var(--radius-sm)]"],
@@ -176,203 +201,247 @@ const Ze = {
       reorderable: !1
     }
   }
-), ns = "ds:opacity-0", ue = [
+), yt = "ds:opacity-0", we = [
   "ds:transition-opacity ds:duration-[var(--animation-duration)]",
   "ds:ease-[var(--ease-out)] ds:motion-reduce:transition-none"
 ].join(" ");
-function is(l, a) {
+function wt(l, a) {
   return l > 99 ? a : String(l);
 }
-const os = Le(
+const xt = Ue(
   ({
     id: l,
     tools: a,
-    activeToolId: fe,
-    defaultActiveToolId: pe = null,
-    onActiveToolChange: ve,
-    side: S = "end",
-    railLabel: ge,
-    resizablePanel: _ = !1,
-    onReorder: z,
-    formatReorderAnnouncement: N,
-    renderToolAffordance: C,
-    renderPanelHeader: U,
-    dataComponent: me = "tool-rail",
-    agentAdapter: be = Ze,
-    className: he
-  }, ye) => {
-    var ae;
-    const { t: p } = Me(), [we, v] = qe({
-      value: fe,
-      defaultValue: pe,
-      onChange: ve
-    }), m = we ?? null, L = g([]), A = g(null), [V, j] = T(0), h = g(!1), K = g(!1), b = k(
-      () => a.findIndex((e) => e.id === m),
-      [a, m]
-    ), d = b >= 0 ? a[b] : null, Ie = k(
+    activeToolId: xe,
+    defaultActiveToolId: Ie = null,
+    onActiveToolChange: Re,
+    side: A = "end",
+    railLabel: Te,
+    resizablePanel: N = !1,
+    onReorder: L,
+    formatReorderAnnouncement: F,
+    renderToolAffordance: K,
+    renderPanelHeader: Q,
+    dataComponent: ke = "tool-rail",
+    agentAdapter: Ae = ot,
+    className: Se
+  }, Ee) => {
+    var pe;
+    const { t: m } = Xe(), [_e, g] = Je({
+      value: xe,
+      defaultValue: Ie,
+      onChange: Re
+    }), b = _e ?? null, q = v([]), S = v(null), [B, H] = k(0), x = v(!1), O = v(!1), h = D(
+      () => a.findIndex((e) => e.id === b),
+      [a, b]
+    ), d = h >= 0 ? a[h] : null, U = v(d);
+    d && (U.current = d);
+    const ze = D(
       () => a.findIndex((e) => !e.disabled),
       [a]
-    ), W = k(() => {
-      var s;
-      const e = (s = a[0]) == null ? void 0 : s.scope;
-      return e ? a.findIndex((t) => t.scope && t.scope !== e) : -1;
-    }, [a]), Re = W > 0, c = k(() => {
+    ), ee = D(() => {
       var t;
+      const e = (t = a[0]) == null ? void 0 : t.scope;
+      return e ? a.findIndex((s) => s.scope && s.scope !== e) : -1;
+    }, [a]), De = ee > 0, c = D(() => {
+      var s;
       const e = a.findIndex((n) => n.reorderable);
       if (e < 0) return null;
-      let s = e;
-      for (; s + 1 < a.length && ((t = a[s + 1]) != null && t.reorderable); ) s += 1;
-      return { first: e, last: s };
-    }, [a]), H = !!z && c !== null, xe = Ve(), [I, M] = T(null), [$, E] = T(null), { resolvedTheme: Te } = He(), Z = Te.endsWith("-accessible") || void 0, { containerRef: ke } = Oe({
+      let t = e;
+      for (; t + 1 < a.length && ((s = a[t + 1]) != null && s.reorderable); ) t += 1;
+      return { first: e, last: t };
+    }, [a]), te = !!L && c !== null, Ne = We(), [E, W] = k(null), [se, C] = k(null), { resolvedTheme: Le } = rt(), V = Le.endsWith("-accessible") || void 0, { containerRef: Ce } = et({
       key: a.map((e) => e.id).join(),
-      reduceMotion: Z
-    }), P = Ue({ reduceMotion: Z }), [Se, X] = T([]), Y = g(a);
-    ie(() => {
-      const e = Y.current, s = new Set(a.map((n) => n.id)), t = e.filter((n) => !s.has(n.id));
-      if (t.length > 0) {
-        X((n) => {
+      reduceMotion: V
+    }), $ = tt({ reduceMotion: V }), Z = nt(
+      d !== null,
+      { reduceMotion: V }
+    ), y = d === null && Z.mounted, p = d ?? (y ? U.current : null), { ref: ae } = Z, Ve = P(
+      (e) => {
+        S.current = e, ae(e);
+      },
+      [ae]
+    );
+    M(() => {
+      var s, n;
+      const e = S.current;
+      if (!e) return;
+      const t = document.activeElement;
+      if (y && t instanceof HTMLElement && e.contains(t)) {
+        const i = (s = U.current) == null ? void 0 : s.id, o = i ? (n = z.current) == null ? void 0 : n.querySelector(
+          `[data-tool-id="${CSS.escape(i)}"]`
+        ) : null;
+        t.blur(), e.setAttribute("inert", ""), o == null || o.focus();
+        return;
+      }
+      e.toggleAttribute("inert", y);
+    }, [y]);
+    const je = at(), [j, ne] = k(
+      (d == null ? void 0 : d.id) ?? null
+    ), I = (d == null ? void 0 : d.id) ?? null, X = !V && !je && I !== null && j !== null && j !== I;
+    M(() => {
+      if (j === I) return;
+      if (!X) {
+        ne(I);
+        return;
+      }
+      let e = 0;
+      const t = () => ne(I), s = requestAnimationFrame(() => {
+        e = requestAnimationFrame(t);
+      }), n = window.setTimeout(t, 64);
+      return () => {
+        cancelAnimationFrame(s), cancelAnimationFrame(e), window.clearTimeout(n);
+      };
+    }, [I, j, X]);
+    const [Pe, re] = k([]), ie = v(a);
+    ge(() => {
+      const e = ie.current, t = new Set(a.map((n) => n.id)), s = e.filter((n) => !t.has(n.id));
+      if (s.length > 0) {
+        re((n) => {
           const i = new Set(n.map((o) => o.id));
           return [
             ...n,
-            ...t.filter((o) => !i.has(o.id))
+            ...s.filter((o) => !i.has(o.id))
           ];
         });
-        for (const n of t)
-          P.leave(n.id, () => {
-            X(
+        for (const n of s)
+          $.leave(n.id, () => {
+            re(
               (i) => i.filter((o) => o.id !== n.id)
             );
           });
       }
-      Y.current = a;
-    }, [a, P]);
-    const [_e, ze] = T(""), B = g(!1), G = O(
-      (e, s) => {
-        if (!z || !c) return;
-        const t = Math.max(
+      ie.current = a;
+    }, [a, $]);
+    const [Me, Fe] = k(""), Y = v(!1), oe = P(
+      (e, t) => {
+        if (!L || !c) return;
+        const s = Math.max(
           c.first,
-          Math.min(c.last, s)
+          Math.min(c.last, t)
         );
-        if (t === e) return;
-        z(e, t);
+        if (s === e) return;
+        L(e, s);
         const n = a[e];
         if (n) {
-          const i = N ? N({ tool: n, from: e, to: t }) : p("toolRail.reorderAnnounce", {
+          const i = F ? F({ tool: n, from: e, to: s }) : m("toolRail.reorderAnnounce", {
             tool: n.label,
-            to: t - c.first + 1,
+            to: s - c.first + 1,
             total: c.last - c.first + 1,
             defaultValue: "{{tool}} moved to position {{to}} of {{total}}"
           });
-          i && (B.current = !B.current, ze(B.current ? i : `${i}​`));
+          i && (Y.current = !Y.current, Fe(Y.current ? i : `${i}​`));
         }
       },
-      [z, c, a, p, N]
-    ), R = b >= 0 ? b : V >= 0 && !((ae = a[V]) != null && ae.disabled) ? V : Ie, Ae = O(
-      (e, s) => {
-        const t = a.find((n) => n.id === e);
-        !t || t.disabled || (h.current = s, v(m === e ? null : e));
+      [L, c, a, m, F]
+    ), _ = h >= 0 ? h : B >= 0 && !((pe = a[B]) != null && pe.disabled) ? B : ze, Ke = P(
+      (e, t) => {
+        const s = a.find((n) => n.id === e);
+        !s || s.disabled || (x.current = t, g(b === e ? null : e));
       },
-      [a, m, v]
-    ), Ee = O(
+      [a, b, g]
+    ), qe = P(
       (e) => {
-        var y, r, u;
-        const s = a.length;
-        if (s === 0 || e.altKey) return;
-        let t = null;
-        if (e.key === "ArrowDown" ? t = (R + 1) % s : e.key === "ArrowUp" ? t = (R - 1 + s) % s : e.key === "Home" ? t = 0 : e.key === "End" && (t = s - 1), t === null) return;
+        var R, r, u;
+        const t = a.length;
+        if (t === 0 || e.altKey) return;
+        let s = null;
+        if (e.key === "ArrowDown" ? s = (_ + 1) % t : e.key === "ArrowUp" ? s = (_ - 1 + t) % t : e.key === "Home" ? s = 0 : e.key === "End" && (s = t - 1), s === null) return;
         const n = e.key === "ArrowUp" || e.key === "End";
-        let i = t, o = 0;
-        for (; o < s && ((y = a[i]) != null && y.disabled); )
-          i = n ? (i - 1 + s) % s : (i + 1) % s, o += 1;
-        (r = a[i]) != null && r.disabled || (e.preventDefault(), j(i), (u = L.current[i]) == null || u.focus());
+        let i = s, o = 0;
+        for (; o < t && ((R = a[i]) != null && R.disabled); )
+          i = n ? (i - 1 + t) % t : (i + 1) % t, o += 1;
+        (r = a[i]) != null && r.disabled || (e.preventDefault(), H(i), (u = q.current[i]) == null || u.focus());
       },
-      [a, R]
-    ), D = g(null);
-    ie(() => {
-      const e = D.current;
+      [a, _]
+    ), z = v(null);
+    ge(() => {
+      const e = z.current;
       if (!e) return;
-      const s = (t) => {
-        if (t.key !== "Escape" || b < 0) return;
-        t.preventDefault();
-        const n = b;
-        v(null), j(n), requestAnimationFrame(() => {
+      const t = (s) => {
+        if (s.key !== "Escape" || h < 0) return;
+        s.preventDefault();
+        const n = h;
+        g(null), H(n), requestAnimationFrame(() => {
           var i;
-          (i = L.current[n]) == null || i.focus();
+          (i = q.current[n]) == null || i.focus();
         });
       };
-      return e.addEventListener("keydown", s), () => e.removeEventListener("keydown", s);
-    }, [b, v]), le(() => {
+      return e.addEventListener("keydown", t), () => e.removeEventListener("keydown", t);
+    }, [h, g]), M(() => {
       var e;
-      d && h.current && ((e = A.current) == null || e.focus()), h.current = !1;
+      d && x.current && ((e = S.current) == null || e.focus()), x.current = !1;
     }, [d]);
-    const J = S === "end" ? "inline-start" : "inline-end", { separatorProps: Q, isResizing: ee, isResized: se } = Fe({
-      edge: J,
-      targetRef: A,
-      cssProperty: de,
-      minSize: Ge,
-      maxSize: Je,
-      defaultSize: Qe,
-      disabled: !_
-    }), te = Q["aria-valuenow"];
-    le(() => {
+    const de = A === "end" ? "inline-start" : "inline-end", { separatorProps: le, isResizing: ce, isResized: ue } = Qe({
+      edge: de,
+      targetRef: S,
+      cssProperty: he,
+      minSize: ct,
+      maxSize: ut,
+      defaultSize: ft,
+      disabled: !N
+    }), fe = le["aria-valuenow"];
+    M(() => {
       var e;
-      !_ || !se || !d || (e = A.current) == null || e.style.setProperty(
-        de,
-        `${te}px`
+      !N || !ue || !d || (e = S.current) == null || e.style.setProperty(
+        he,
+        `${fe}px`
       );
-    }, [d, _, se, te]);
-    const q = g(m);
-    q.current = m;
-    const F = k(
+    }, [d, N, ue, fe]);
+    const G = v(b);
+    G.current = b;
+    const J = D(
       () => ({
-        getActiveToolId: () => q.current,
+        getActiveToolId: () => G.current,
         setActiveTool: (e) => {
-          h.current = !1, v(e);
+          x.current = !1, g(e);
         },
         open: (e) => {
-          const s = a.find((t) => t.id === e);
-          !s || s.disabled || (h.current = !1, v(e));
+          const t = a.find((s) => s.id === e);
+          !t || t.disabled || (x.current = !1, g(e));
         },
         close: () => {
-          const e = q.current;
-          h.current = !1, v(null), e != null && requestAnimationFrame(() => {
-            var s, t;
-            (t = (s = D.current) == null ? void 0 : s.querySelector(
+          const e = G.current;
+          x.current = !1, g(null), e != null && requestAnimationFrame(() => {
+            var t, s;
+            (s = (t = z.current) == null ? void 0 : t.querySelector(
               `[data-tool-id="${CSS.escape(e)}"]`
-            )) == null || t.focus();
+            )) == null || s.focus();
           });
         }
       }),
-      [a, v]
+      [a, g]
     );
-    je(ye, () => F, [F]), $e(be, F, l);
-    const De = p("toolRail.badgeCountOverflow", {
+    $e(Ee, () => J, [J]), it(Ae, J, l);
+    const Be = m("toolRail.badgeCountOverflow", {
       defaultValue: "99+"
     });
-    return /* @__PURE__ */ x(
+    return /* @__PURE__ */ T(
       "div",
       {
-        ref: D,
-        "data-component": me,
+        ref: z,
+        "data-component": ke,
         "data-component-id": l,
-        "data-side": S,
-        className: [es({ side: S }), he].filter(Boolean).join(" "),
+        "data-side": A,
+        className: [pt({ side: A }), Se].filter(Boolean).join(" "),
         children: [
-          H ? /* @__PURE__ */ f("span", { role: "status", "aria-live": "polite", className: "ds:sr-only", children: _e }) : null,
-          d ? /* @__PURE__ */ x(
+          te ? /* @__PURE__ */ f("span", { role: "status", "aria-live": "polite", className: "ds:sr-only", children: Me }) : null,
+          p ? /* @__PURE__ */ T(
             "aside",
             {
-              ref: A,
+              ref: Ve,
               tabIndex: -1,
-              "aria-label": p("toolRail.panelLabel", {
-                tool: d.label,
+              "aria-label": m("toolRail.panelLabel", {
+                tool: p.label,
                 defaultValue: "{{tool}} panel"
               }),
-              "data-tool-rail-state": "expanded",
-              "data-active-tool": d.id,
-              "data-resizing": ee ? "" : void 0,
+              "aria-hidden": y || void 0,
+              "data-tool-rail-state": y ? "collapsing" : "expanded",
+              "data-presence": Z.phase,
+              "data-active-tool": p.id,
+              "data-resizing": ce ? "" : void 0,
               className: [
-                ts(),
+                mt({ side: A }),
                 // Subtle shadow — not a line — separating the panel from the
                 // icon strip (the tab row). The panel casts a soft chrome
                 // shadow toward the strip on its strip-facing edge. `z-[1]`
@@ -384,57 +453,67 @@ const os = Le(
                 // theme the soft shadow becomes a solid 1px border on that same
                 // strip-facing edge.
                 "ds:z-[1]",
-                S === "end" ? "ds:shadow-[var(--shadow-chrome-end)] ds:[.theme-accessible_&]:border-e ds:[.theme-accessible_&]:border-[var(--border)] ds:[.theme-accessible_&]:shadow-none" : "ds:shadow-[var(--shadow-chrome-start)] ds:[.theme-accessible_&]:border-s ds:[.theme-accessible_&]:border-[var(--border)] ds:[.theme-accessible_&]:shadow-none",
+                A === "end" ? "ds:shadow-[var(--shadow-chrome-end)] ds:[.theme-accessible_&]:border-e ds:[.theme-accessible_&]:border-[var(--border)] ds:[.theme-accessible_&]:shadow-none" : "ds:shadow-[var(--shadow-chrome-start)] ds:[.theme-accessible_&]:border-s ds:[.theme-accessible_&]:border-[var(--border)] ds:[.theme-accessible_&]:shadow-none",
                 "ds:focus-visible:outline-none"
               ].join(" "),
               children: [
-                U ? U(d, { isActive: !0 }) : null,
-                d.header ? /* @__PURE__ */ f("div", { className: "ds:shrink-0", children: d.header }) : null,
-                d.fill ? (
-                  // data-tool-fill: a self-scrolling panel owns its own native
-                  // scroll (it can't use the rail's ScrollArea), so a token rule
-                  // paints its scrollbar to match the 8px overlay. See tokens/index.css.
-                  /* @__PURE__ */ f("div", { "data-tool-fill": "", className: "ds:flex-1 ds:min-h-0", children: d.panel })
-                ) : /* @__PURE__ */ f(
-                  Pe,
+                Q ? Q(p, { isActive: !y }) : null,
+                /* @__PURE__ */ T(
+                  "div",
                   {
-                    orientation: "vertical",
-                    className: "ds:flex-1 ds:min-h-0",
-                    children: d.panel
-                  }
+                    "data-presence": X ? "entering" : "present",
+                    className: gt(),
+                    children: [
+                      p.header ? /* @__PURE__ */ f("div", { className: "ds:shrink-0", children: p.header }) : null,
+                      p.fill ? (
+                        // data-tool-fill: a self-scrolling panel owns its own native
+                        // scroll (it can't use the rail's ScrollArea), so a token rule
+                        // paints its scrollbar to match the 8px overlay. See tokens/index.css.
+                        /* @__PURE__ */ f("div", { "data-tool-fill": "", className: "ds:flex-1 ds:min-h-0", children: p.panel })
+                      ) : /* @__PURE__ */ f(
+                        Ye,
+                        {
+                          orientation: "vertical",
+                          className: "ds:flex-1 ds:min-h-0",
+                          children: p.panel
+                        }
+                      )
+                    ]
+                  },
+                  p.id
                 ),
-                _ ? /* @__PURE__ */ f(
+                N ? /* @__PURE__ */ f(
                   "div",
                   {
-                    ...Q,
-                    "aria-label": p("toolRail.resizePanel", {
+                    ...le,
+                    "aria-label": m("toolRail.resizePanel", {
                       defaultValue: "Resize tool panel"
                     }),
-                    "data-resizing": ee ? "" : void 0,
-                    className: as({ edge: J })
+                    "data-resizing": ce ? "" : void 0,
+                    className: bt({ edge: de })
                   }
                 ) : null
               ]
             }
           ) : null,
-          /* @__PURE__ */ f(Be, { children: /* @__PURE__ */ x(
+          /* @__PURE__ */ f(Ge, { children: /* @__PURE__ */ T(
             "div",
             {
-              ref: ke,
+              ref: Ce,
               role: "toolbar",
               "aria-orientation": "vertical",
-              "aria-label": ge ?? p("toolRail.railLabel", { defaultValue: "Tools" }),
-              className: ss(),
-              onKeyDown: Ee,
+              "aria-label": Te ?? m("toolRail.railLabel", { defaultValue: "Tools" }),
+              className: vt(),
+              onKeyDown: qe,
               children: [
-                a.map((e, s) => {
-                  const t = e.id === m, n = typeof e.badgeCount == "number" && e.badgeCount > 0, i = n ? p("toolRail.toolWithCount", {
+                a.map((e, t) => {
+                  const s = e.id === b, n = typeof e.badgeCount == "number" && e.badgeCount > 0, i = n ? m("toolRail.toolWithCount", {
                     tool: e.label,
                     count: e.badgeCount,
                     defaultValue: "{{tool}}, {{count}} updates"
-                  }) : e.label, o = H && !!e.reorderable && !e.disabled, y = o ? `${xe}-${e.id}` : void 0;
-                  return /* @__PURE__ */ x(Ke, { children: [
-                    Re && s === W ? /* @__PURE__ */ f(
+                  }) : e.label, o = te && !!e.reorderable && !e.disabled, R = o ? `${Ne}-${e.id}` : void 0;
+                  return /* @__PURE__ */ T(Ze, { children: [
+                    De && t === ee ? /* @__PURE__ */ f(
                       "div",
                       {
                         role: "separator",
@@ -442,45 +521,45 @@ const os = Le(
                         className: "ds:my-[var(--spacing-2xs)] ds:h-px ds:w-[var(--spacing-lg)] ds:shrink-0 ds:bg-[var(--border)] ds:forced-colors:bg-[CanvasText]"
                       }
                     ) : null,
-                    /* @__PURE__ */ x(
+                    /* @__PURE__ */ T(
                       "div",
                       {
                         className: [
-                          ce({
-                            dragging: I === s,
-                            dropTarget: $ === s && I !== s,
+                          ye({
+                            dragging: E === t,
+                            dropTarget: se === t && E !== t,
                             reorderable: o
                           }),
-                          ue,
-                          We
+                          we,
+                          st
                         ].filter(Boolean).join(" "),
                         "data-reflow-id": e.id,
-                        "data-dragging": I === s ? "" : void 0,
+                        "data-dragging": E === t ? "" : void 0,
                         draggable: o || void 0,
                         onDragStart: o ? (r) => {
-                          M(s), r.dataTransfer.effectAllowed = "move", r.dataTransfer.setData(
+                          W(t), r.dataTransfer.effectAllowed = "move", r.dataTransfer.setData(
                             "text/plain",
-                            String(s)
+                            String(t)
                           );
                         } : void 0,
                         onDragOver: o ? (r) => {
-                          I !== null && (r.preventDefault(), r.dataTransfer.dropEffect = "move", $ !== s && E(s));
+                          E !== null && (r.preventDefault(), r.dataTransfer.dropEffect = "move", se !== t && C(t));
                         } : void 0,
-                        onDragLeave: o ? () => E((r) => r === s ? null : r) : void 0,
+                        onDragLeave: o ? () => C((r) => r === t ? null : r) : void 0,
                         onDrop: o ? (r) => {
                           r.preventDefault();
-                          const u = I;
-                          E(null), M(null), !(u === null || u === s) && G(u, s);
+                          const u = E;
+                          C(null), W(null), !(u === null || u === t) && oe(u, t);
                         } : void 0,
                         onDragEnd: o ? () => {
-                          M(null), E(null);
+                          W(null), C(null);
                         } : void 0,
                         children: [
                           /* @__PURE__ */ f(
-                            oe,
+                            be,
                             {
                               ref: (r) => {
-                                L.current[s] = r;
+                                q.current[t] = r;
                               },
                               icon: e.icon,
                               tooltip: e.label,
@@ -488,54 +567,54 @@ const os = Le(
                               intent: "ghost",
                               size: "sm",
                               disabled: e.disabled,
-                              "aria-pressed": t,
-                              "aria-expanded": t,
-                              "data-active": t ? e.id : void 0,
+                              "aria-pressed": s,
+                              "aria-expanded": s,
+                              "data-active": s ? e.id : void 0,
                               "data-tool-id": e.id,
-                              "aria-describedby": y,
+                              "aria-describedby": R,
                               "aria-keyshortcuts": o ? "Alt+ArrowUp Alt+ArrowDown" : void 0,
-                              tabIndex: s === R ? 0 : -1,
+                              tabIndex: t === _ ? 0 : -1,
                               onFocus: () => {
-                                e.disabled || j(s);
+                                e.disabled || H(t);
                               },
-                              onClick: () => Ae(e.id, K.current),
+                              onClick: () => Ke(e.id, O.current),
                               onKeyDown: (r) => {
                                 if (r.key === "Enter" || r.key === " ") {
-                                  K.current = !0;
+                                  O.current = !0;
                                   return;
                                 }
                                 if (o && r.altKey && c) {
                                   let u = null;
-                                  if (r.key === "ArrowUp" ? u = s - 1 : r.key === "ArrowDown" ? u = s + 1 : r.key === "Home" ? u = c.first : r.key === "End" && (u = c.last), u !== null) {
+                                  if (r.key === "ArrowUp" ? u = t - 1 : r.key === "ArrowDown" ? u = t + 1 : r.key === "Home" ? u = c.first : r.key === "End" && (u = c.last), u !== null) {
                                     r.preventDefault();
-                                    const Ne = Math.max(
+                                    const He = Math.max(
                                       c.first,
                                       Math.min(c.last, u)
-                                    ), Ce = e.id;
-                                    G(s, Ne), requestAnimationFrame(() => {
-                                      var re, ne;
-                                      (ne = (re = D.current) == null ? void 0 : re.querySelector(
-                                        `[data-tool-id="${CSS.escape(Ce)}"]`
-                                      )) == null || ne.focus();
+                                    ), Oe = e.id;
+                                    oe(t, He), requestAnimationFrame(() => {
+                                      var ve, me;
+                                      (me = (ve = z.current) == null ? void 0 : ve.querySelector(
+                                        `[data-tool-id="${CSS.escape(Oe)}"]`
+                                      )) == null || me.focus();
                                     });
                                   }
                                 }
                               },
                               onKeyUp: (r) => {
-                                (r.key === "Enter" || r.key === " ") && (K.current = !1);
+                                (r.key === "Enter" || r.key === " ") && (O.current = !1);
                               }
                             }
                           ),
-                          n ? /* @__PURE__ */ f("span", { "aria-hidden": "true", className: rs(), children: is(
+                          n ? /* @__PURE__ */ f("span", { "aria-hidden": "true", className: ht(), children: wt(
                             e.badgeCount,
-                            De
+                            Be
                           ) }) : null,
-                          C == null ? void 0 : C(e, {
-                            index: s,
-                            isActive: t,
-                            isRovingTarget: s === R
+                          K == null ? void 0 : K(e, {
+                            index: t,
+                            isActive: s,
+                            isRovingTarget: t === _
                           }),
-                          y ? /* @__PURE__ */ f("span", { id: y, className: "ds:sr-only", children: p("toolRail.reorderInstructions", {
+                          R ? /* @__PURE__ */ f("span", { id: R, className: "ds:sr-only", children: m("toolRail.reorderInstructions", {
                             tool: e.label,
                             defaultValue: "Reorder {{tool}}. Press Alt + Up or Alt + Down to move."
                           }) }) : null
@@ -544,22 +623,22 @@ const os = Le(
                     )
                   ] }, e.id);
                 }),
-                Se.map(
-                  (e) => P.isLeaving(e.id) ? /* @__PURE__ */ f(
+                Pe.map(
+                  (e) => $.isLeaving(e.id) ? /* @__PURE__ */ f(
                     "div",
                     {
                       className: [
-                        ce({
+                        ye({
                           dragging: !1,
                           dropTarget: !1,
                           reorderable: !1
                         }),
-                        ue,
-                        ns
+                        we,
+                        yt
                       ].filter(Boolean).join(" "),
                       "aria-hidden": "true",
                       children: /* @__PURE__ */ f(
-                        oe,
+                        be,
                         {
                           icon: e.icon,
                           intent: "ghost",
@@ -580,9 +659,9 @@ const os = Le(
     );
   }
 );
-os.displayName = "ToolRail";
+xt.displayName = "ToolRail";
 export {
-  os as T,
-  Ze as t
+  xt as T,
+  ot as t
 };
-//# sourceMappingURL=tool-rail-Bq5eiFMG.js.map
+//# sourceMappingURL=tool-rail-BP8sjxCw.js.map