@alfadocs/ui-kit-debug 1.38.0 → 1.39.0

package/dist/_chunks/tool-rail-D89USYE6.js

@@ -0,0 +1,799 @@
+import { jsxs as S, jsx as g } from "react/jsx-runtime";
+import { forwardRef as rt, useRef as h, useState as A, useMemo as M, useId as it, useCallback as N, useEffect as re, useImperativeHandle as ot, Fragment as lt } from "react";
+import { c as E } from "./index-D2ZczOXr.js";
+import { useTranslation as dt } from "react-i18next";
+import { I as Le } from "./icon-button-CehAeZoP.js";
+import { S as ct } from "./scroll-area-BZOvUhwQ.js";
+import { a as ut } from "./tooltip-Cp-PLePW.js";
+import { u as ft } from "./use-controllable-state-BiY4xTzM.js";
+import { u as pt } from "./use-edge-resize-ZnGG7gyO.js";
+import { u as P } from "./use-isomorphic-layout-effect-BGfaCOP1.js";
+import { a as vt, u as ze, R as mt } from "./use-list-reflow-Cw43nxw5.js";
+import { u as gt } from "./use-prefers-reduced-motion-BMwIQRjB.js";
+import { u as bt } from "./use-presence-transition-cDwWUXV-.js";
+import { u as ht } from "./use-theme-CAuo6EYT.js";
+import { u as yt } from "./registry-DvAUVLHh.js";
+const It = {
+  id: "tool-rail",
+  capabilities: ["open", "close", "select_single"],
+  state: {
+    activeToolId: {
+      type: "string | null",
+      descriptionKey: "ui.toolRail.agent.state.activeToolId",
+      description: "Id of the tool whose panel is currently open, or null when the rail is collapsed to its strip. No panel content is ever exposed.",
+      read: (l) => l.getActiveToolId()
+    }
+  },
+  actions: {
+    open: {
+      // Pure ephemeral panel state (open) — no data loss, no external effect.
+      safety: "read",
+      argsType: "{ id: string }",
+      argsSchema: {
+        type: "object",
+        properties: { id: { type: "string" } },
+        required: ["id"]
+      },
+      idempotent: !0,
+      // descriptionKey shape is intentionally pre-existing — already resolves to
+      // real multi-locale translations; do not canonicalise.
+      descriptionKey: "ui.toolRail.agent.actions.open",
+      description: "Open the given tool's panel.",
+      examples: [{ args: { id: "inbox" }, note: "Open the inbox tool panel." }],
+      invoke: (l, n) => {
+        l.open(n.id);
+      }
+    },
+    close: {
+      safety: "read",
+      idempotent: !0,
+      descriptionKey: "ui.toolRail.agent.actions.close",
+      description: "Collapse the rail to its strip (no active tool).",
+      invoke: (l) => {
+        l.close();
+      }
+    },
+    select_tool: {
+      safety: "read",
+      argsType: "{ id: string | null }",
+      argsSchema: {
+        type: "object",
+        properties: { id: { type: ["string", "null"] } },
+        required: ["id"]
+      },
+      idempotent: !0,
+      descriptionKey: "ui.toolRail.agent.actions.selectTool",
+      description: "Set the active tool by id (opens its panel), or pass null to collapse.",
+      invoke: (l, n) => {
+        l.setActiveTool(n.id);
+      }
+    }
+  },
+  domHooks: {
+    root: {
+      attr: "data-component",
+      value: "tool-rail",
+      description: "Marks the ToolRail wrapper."
+    },
+    instanceId: {
+      attr: "data-component-id",
+      sourceProp: "id",
+      description: "Sourced from the id prop. Required to address a specific rail from the agent."
+    },
+    item: {
+      attr: "data-tool-id",
+      description: "Stable tool id emitted on each strip IconButton. The active icon also carries data-active set to its id."
+    }
+  }
+}, xt = "ds:[inline-size:3rem]", wt = "ds:[inline-size:var(--tool-rail-panel-inline-size,var(--ai-tools-rail-panel-inline-size,22rem))]", Ne = "--tool-rail-panel-inline-size", Tt = 288, Rt = 880, St = 352, At = E(
+  ["ds:flex ds:shrink-0 ds:h-full", "ds:bg-[var(--background)]"].join(" "),
+  {
+    variants: {
+      side: {
+        // Strip docks inline-end; the panel mounts inline-start of it
+        // (flex-row, panel rendered first). Shadow faces the main area —
+        // no border against main (the rail stays line-free; the only seam
+        // is the strip↔panel divider on the open panel, see render).
+        // Accessible (AAA) theme swaps the soft chrome shadow for a solid 1px
+        // border on the content-facing edge (border-s for end-docked).
+        end: "ds:flex-row ds:shadow-[var(--shadow-chrome-start)] ds:[.theme-accessible_&]:border-s ds:[.theme-accessible_&]:border-[var(--border)] ds:[.theme-accessible_&]:shadow-none",
+        // Strip docks inline-start; the panel mounts inline-end of it.
+        start: "ds:flex-row-reverse ds:shadow-[var(--shadow-chrome-end)] ds:[.theme-accessible_&]:border-e ds:[.theme-accessible_&]:border-[var(--border)] ds:[.theme-accessible_&]:shadow-none"
+      }
+    },
+    defaultVariants: { side: "end" }
+  }
+), Et = E(
+  [
+    "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)]",
+    xt
+  ].join(" ")
+), kt = E(
+  [
+    "ds:relative ds:flex ds:min-h-0 ds:flex-col ds:h-full",
+    "ds:bg-[var(--background)]",
+    wt,
+    // 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" }
+  }
+), _t = "ds:relative ds:flex ds:min-h-0 ds:flex-1 ds:flex-col ds:overflow-clip", De = E(
+  [
+    "ds:flex ds:min-h-0 ds:flex-col",
+    "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"
+  ].join(" "),
+  {
+    variants: {
+      // Same small distance as the panel's own entrance, mirrored in RTL.
+      layer: {
+        live: [
+          "ds:relative ds:z-[1] ds:flex-1",
+          "ds:data-[presence=entering]:translate-x-[var(--spacing-md)]",
+          "ds:rtl:data-[presence=entering]:-translate-x-[var(--spacing-md)]"
+        ].join(" "),
+        leaving: [
+          "ds:pointer-events-none ds:absolute ds:inset-0 ds:z-0 ds:[&_*]:!animate-none",
+          "ds:data-[presence=leaving]:-translate-x-[var(--spacing-md)]",
+          "ds:rtl:data-[presence=leaving]:translate-x-[var(--spacing-md)]"
+        ].join(" ")
+      }
+    },
+    defaultVariants: { layer: "live" }
+  }
+), Lt = 500, zt = [
+  "id",
+  "name",
+  "for",
+  "data-component",
+  "data-component-id",
+  "data-testid"
+];
+function Nt(l) {
+  return window.getComputedStyle(l).transitionDuration.split(",").some((n) => Number.parseFloat(n) > 0);
+}
+function Dt(l) {
+  const n = l.cloneNode(!0), H = l.querySelectorAll("*"), q = n.querySelectorAll("*"), F = [];
+  return H.forEach((d, D) => {
+    var x;
+    const f = q[D];
+    if (f && ((d.scrollTop !== 0 || d.scrollLeft !== 0) && F.push([f, d.scrollTop, d.scrollLeft]), d instanceof HTMLCanvasElement && f instanceof HTMLCanvasElement))
+      try {
+        (x = f.getContext("2d")) == null || x.drawImage(d, 0, 0);
+      } catch {
+      }
+  }), q.forEach((d) => {
+    const D = d instanceof SVGElement;
+    for (const f of zt)
+      D && f === "id" || d.removeAttribute(f);
+    if (d.matches("iframe, video, audio, embed, object, source"))
+      for (const f of ["src", "srcdoc", "data", "autoplay"])
+        d.removeAttribute(f);
+  }), { nodes: Array.from(n.childNodes), scrolls: F };
+}
+const Ct = E(
+  [
+    "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",
+    "ds:transition-colors ds:duration-[var(--animation-duration)] ds:motion-reduce:transition-none",
+    "ds:hover:bg-[var(--accent)] ds:focus-visible:bg-[var(--accent)] ds:data-[resizing]:bg-[var(--accent)]",
+    "ds:focus-visible:outline-[length:var(--focus-ring-width)] ds:focus-visible:outline-solid",
+    "ds:focus-visible:outline-[color:var(--ring)] ds:focus-visible:outline-offset-[length:var(--focus-ring-offset)]",
+    "ds:forced-colors:focus-visible:outline-[CanvasText]",
+    "ds:before:absolute ds:before:content-['']",
+    "ds:before:[block-size:100%]",
+    "ds:before:[inline-size:var(--min-target-size)]",
+    "ds:before:[inset-block:0]",
+    "ds:before:[inset-inline:calc(0px_-_(var(--min-target-size)_-_var(--resizable-handle-size))_/_2)]"
+  ],
+  {
+    variants: {
+      edge: {
+        "inline-start": "ds:start-0",
+        "inline-end": "ds:end-0"
+      }
+    },
+    defaultVariants: { edge: "inline-start" }
+  }
+), Vt = E(
+  [
+    "ds:absolute ds:-top-[var(--spacing-xs)] ds:-end-[var(--spacing-xs)]",
+    "ds:inline-flex ds:items-center ds:justify-center",
+    "ds:min-w-[calc(var(--spacing-md)+var(--spacing-xs))]",
+    "ds:h-[calc(var(--spacing-md)+var(--spacing-xs))]",
+    "ds:ps-[calc(var(--spacing-xs)/1.5)] ds:pe-[calc(var(--spacing-xs)/1.5)]",
+    "ds:rounded-[var(--radius-full)]",
+    "ds:bg-[color:var(--destructive)] ds:text-[color:var(--destructive-foreground)]",
+    "ds:text-[length:var(--font-size-xs)] ds:font-semibold ds:leading-none",
+    "ds:pointer-events-none ds:select-none",
+    "ds:forced-colors:outline ds:forced-colors:outline-1 ds:forced-colors:outline-[CanvasText]"
+  ].join(" ")
+), Ce = E(
+  // `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)]"],
+  {
+    variants: {
+      dragging: { true: "ds:opacity-60", false: "" },
+      dropTarget: {
+        true: "ds:outline-[length:var(--focus-ring-width)] ds:outline-dashed ds:outline-[var(--accent)] ds:outline-offset-[length:var(--focus-ring-offset)]",
+        false: ""
+      },
+      reorderable: {
+        true: "ds:cursor-grab ds:active:cursor-grabbing",
+        false: ""
+      }
+    },
+    defaultVariants: {
+      dragging: !1,
+      dropTarget: !1,
+      reorderable: !1
+    }
+  }
+), Bt = "ds:opacity-0", Ve = [
+  "ds:transition-opacity ds:duration-[var(--animation-duration)]",
+  "ds:ease-[var(--ease-out)] ds:motion-reduce:transition-none"
+].join(" ");
+function jt(l, n) {
+  return l > 99 ? n : String(l);
+}
+const Mt = rt(
+  ({
+    id: l,
+    tools: n,
+    activeToolId: H,
+    defaultActiveToolId: q = null,
+    onActiveToolChange: F,
+    side: d = "end",
+    railLabel: D,
+    resizablePanel: f = !1,
+    onReorder: x,
+    formatReorderAnnouncement: U,
+    renderToolAffordance: W,
+    renderPanelHeader: ie,
+    dataComponent: Be = "tool-rail",
+    agentAdapter: je = It,
+    className: Me
+  }, Pe) => {
+    var Se, Ae, Ee;
+    const { t: y } = dt(), [qe, I] = ft({
+      value: H,
+      defaultValue: q,
+      onChange: F
+    }), w = qe ?? null, Z = h([]), C = h(null), [G, Y] = A(0), k = h(!1), X = h(!1), T = M(
+      () => n.findIndex((e) => e.id === w),
+      [n, w]
+    ), u = T >= 0 ? n[T] : null, J = h(u);
+    u && (J.current = u);
+    const Fe = M(
+      () => n.findIndex((e) => !e.disabled),
+      [n]
+    ), oe = M(() => {
+      var t;
+      const e = (t = n[0]) == null ? void 0 : t.scope;
+      return e ? n.findIndex((a) => a.scope && a.scope !== e) : -1;
+    }, [n]), Ke = oe > 0, p = M(() => {
+      var a;
+      const e = n.findIndex((s) => s.reorderable);
+      if (e < 0) return null;
+      let t = e;
+      for (; t + 1 < n.length && ((a = n[t + 1]) != null && a.reorderable); ) t += 1;
+      return { first: e, last: t };
+    }, [n]), le = !!x && p !== null, Oe = it(), [V, Q] = A(null), [de, K] = A(null), { resolvedTheme: $e } = ht(), _ = $e.endsWith("-accessible") || void 0, { containerRef: He } = vt({
+      key: n.map((e) => e.id).join(),
+      reduceMotion: _
+    }), ee = ze({ reduceMotion: _ }), te = bt(
+      u !== null,
+      { reduceMotion: _ }
+    ), R = u === null && te.mounted, b = u ?? (R ? J.current : null), { ref: ce } = te, Ue = N(
+      (e) => {
+        C.current = e, ce(e);
+      },
+      [ce]
+    );
+    P(() => {
+      var a, s;
+      const e = C.current;
+      if (!e) return;
+      const t = document.activeElement;
+      if (R && t instanceof HTMLElement && e.contains(t)) {
+        const i = (a = J.current) == null ? void 0 : a.id, o = i ? (s = L.current) == null ? void 0 : s.querySelector(
+          `[data-tool-id="${CSS.escape(i)}"]`
+        ) : null;
+        t.blur(), e.setAttribute("inert", ""), o == null || o.focus();
+        return;
+      }
+      e.toggleAttribute("inert", R);
+    }, [R]);
+    const ue = gt(), [O, fe] = A(
+      (u == null ? void 0 : u.id) ?? null
+    ), v = (u == null ? void 0 : u.id) ?? null, $ = !_ && !ue && v !== null && O !== null && O !== v;
+    P(() => {
+      if (O === v) return;
+      if (!$) {
+        fe(v);
+        return;
+      }
+      let e = 0;
+      const t = () => fe(v), a = requestAnimationFrame(() => {
+        e = requestAnimationFrame(t);
+      }), s = window.setTimeout(t, 64);
+      return () => {
+        cancelAnimationFrame(a), cancelAnimationFrame(e), window.clearTimeout(s);
+      };
+    }, [v, O, $]);
+    const We = !!_ || ue, pe = h(null), [c, ve] = A({ liveId: v, serial: 0, focusLost: !1, leaving: [] });
+    if (c.liveId !== v) {
+      const e = c.liveId !== null && v !== null ? ((Se = pe.current) == null ? void 0 : Se.querySelector(
+        ':scope > [data-tool-rail-layer="live"]'
+      )) ?? null : null, t = c.leaving.filter(
+        (a) => a.toolId !== v
+      );
+      ve({
+        liveId: v,
+        serial: c.serial + 1,
+        focusLost: (e == null ? void 0 : e.contains(document.activeElement)) ?? !1,
+        leaving: e && !We ? [
+          ...t.filter((a) => a.toolId !== c.liveId),
+          {
+            exitId: `${c.liveId}:${c.serial}`,
+            toolId: c.liveId,
+            ...Dt(e)
+          }
+        ] : t
+      });
+    }
+    const B = N((e) => {
+      ve(
+        (t) => t.leaving.some((a) => a.exitId === e) ? {
+          ...t,
+          leaving: t.leaving.filter((a) => a.exitId !== e)
+        } : t
+      );
+    }, []), { leave: me } = ze({
+      reduceMotion: _,
+      durationMs: Lt
+    });
+    re(() => {
+      for (const { exitId: e } of c.leaving)
+        me(e, () => B(e));
+    }, [c.leaving, me, B]);
+    const Ze = b ? c.leaving : [], Ge = ((Ae = c.leaving[c.leaving.length - 1]) == null ? void 0 : Ae.exitId) ?? null, ge = h(c.leaving);
+    ge.current = c.leaving;
+    const Ye = N(
+      (e) => {
+        if (!e || e.childNodes.length > 0) return;
+        const t = ge.current.find(
+          (a) => a.exitId === e.dataset.exitId
+        );
+        if (t) {
+          if (!Nt(e)) {
+            B(t.exitId);
+            return;
+          }
+          e.setAttribute("inert", ""), e.append(...t.nodes);
+          for (const [a, s, i] of t.scrolls)
+            a.scrollTop = s, a.scrollLeft = i;
+        }
+      },
+      [B]
+    );
+    P(() => {
+      var t, a;
+      if (!c.focusLost || !v) return;
+      const e = document.activeElement;
+      e && e !== document.body || (a = (t = L.current) == null ? void 0 : t.querySelector(
+        `[data-tool-id="${CSS.escape(v)}"]`
+      )) == null || a.focus();
+    }, [c.serial]);
+    const [Xe, be] = A([]), he = h(n);
+    re(() => {
+      const e = he.current, t = new Set(n.map((s) => s.id)), a = e.filter((s) => !t.has(s.id));
+      if (a.length > 0) {
+        be((s) => {
+          const i = new Set(s.map((o) => o.id));
+          return [
+            ...s,
+            ...a.filter((o) => !i.has(o.id))
+          ];
+        });
+        for (const s of a)
+          ee.leave(s.id, () => {
+            be(
+              (i) => i.filter((o) => o.id !== s.id)
+            );
+          });
+      }
+      he.current = n;
+    }, [n, ee]);
+    const [Je, Qe] = A(""), ae = h(!1), ye = N(
+      (e, t) => {
+        if (!x || !p) return;
+        const a = Math.max(
+          p.first,
+          Math.min(p.last, t)
+        );
+        if (a === e) return;
+        x(e, a);
+        const s = n[e];
+        if (s) {
+          const i = U ? U({ tool: s, from: e, to: a }) : y("toolRail.reorderAnnounce", {
+            tool: s.label,
+            to: a - p.first + 1,
+            total: p.last - p.first + 1,
+            defaultValue: "{{tool}} moved to position {{to}} of {{total}}"
+          });
+          i && (ae.current = !ae.current, Qe(ae.current ? i : `${i}​`));
+        }
+      },
+      [x, p, n, y, U]
+    ), j = T >= 0 ? T : G >= 0 && !((Ee = n[G]) != null && Ee.disabled) ? G : Fe, et = N(
+      (e, t) => {
+        const a = n.find((s) => s.id === e);
+        !a || a.disabled || (k.current = t, I(w === e ? null : e));
+      },
+      [n, w, I]
+    ), tt = N(
+      (e) => {
+        var z, r, m;
+        const t = n.length;
+        if (t === 0 || e.altKey) return;
+        let a = null;
+        if (e.key === "ArrowDown" ? a = (j + 1) % t : e.key === "ArrowUp" ? a = (j - 1 + t) % t : e.key === "Home" ? a = 0 : e.key === "End" && (a = t - 1), a === null) return;
+        const s = e.key === "ArrowUp" || e.key === "End";
+        let i = a, o = 0;
+        for (; o < t && ((z = n[i]) != null && z.disabled); )
+          i = s ? (i - 1 + t) % t : (i + 1) % t, o += 1;
+        (r = n[i]) != null && r.disabled || (e.preventDefault(), Y(i), (m = Z.current[i]) == null || m.focus());
+      },
+      [n, j]
+    ), L = h(null);
+    re(() => {
+      const e = L.current;
+      if (!e) return;
+      const t = (a) => {
+        if (a.key !== "Escape" || T < 0) return;
+        a.preventDefault();
+        const s = T;
+        I(null), Y(s), requestAnimationFrame(() => {
+          var i;
+          (i = Z.current[s]) == null || i.focus();
+        });
+      };
+      return e.addEventListener("keydown", t), () => e.removeEventListener("keydown", t);
+    }, [T, I]), P(() => {
+      var e;
+      u && k.current && ((e = C.current) == null || e.focus()), k.current = !1;
+    }, [u]);
+    const Ie = d === "end" ? "inline-start" : "inline-end", { separatorProps: xe, isResizing: we, isResized: Te } = pt({
+      edge: Ie,
+      targetRef: C,
+      cssProperty: Ne,
+      minSize: Tt,
+      maxSize: Rt,
+      defaultSize: St,
+      disabled: !f
+    }), Re = xe["aria-valuenow"];
+    P(() => {
+      var e;
+      !f || !Te || !u || (e = C.current) == null || e.style.setProperty(
+        Ne,
+        `${Re}px`
+      );
+    }, [u, f, Te, Re]);
+    const ne = h(w);
+    ne.current = w;
+    const se = M(
+      () => ({
+        getActiveToolId: () => ne.current,
+        setActiveTool: (e) => {
+          k.current = !1, I(e);
+        },
+        open: (e) => {
+          const t = n.find((a) => a.id === e);
+          !t || t.disabled || (k.current = !1, I(e));
+        },
+        close: () => {
+          const e = ne.current;
+          k.current = !1, I(null), e != null && requestAnimationFrame(() => {
+            var t, a;
+            (a = (t = L.current) == null ? void 0 : t.querySelector(
+              `[data-tool-id="${CSS.escape(e)}"]`
+            )) == null || a.focus();
+          });
+        }
+      }),
+      [n, I]
+    );
+    ot(Pe, () => se, [se]), yt(je, se, l);
+    const at = y("toolRail.badgeCountOverflow", {
+      defaultValue: "99+"
+    });
+    return /* @__PURE__ */ S(
+      "div",
+      {
+        ref: L,
+        "data-component": Be,
+        "data-component-id": l,
+        "data-side": d,
+        className: [At({ side: d }), Me].filter(Boolean).join(" "),
+        children: [
+          le ? /* @__PURE__ */ g("span", { role: "status", "aria-live": "polite", className: "ds:sr-only", children: Je }) : null,
+          b ? /* @__PURE__ */ S(
+            "aside",
+            {
+              ref: Ue,
+              tabIndex: -1,
+              "aria-label": y("toolRail.panelLabel", {
+                tool: b.label,
+                defaultValue: "{{tool}} panel"
+              }),
+              "aria-hidden": R || void 0,
+              "data-tool-rail-state": R ? "collapsing" : "expanded",
+              "data-presence": te.phase,
+              "data-active-tool": b.id,
+              "data-resizing": we ? "" : void 0,
+              className: [
+                kt({ side: d }),
+                // 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]`
+                // lifts it above the adjacent strip (the panel is already
+                // `relative`) so the shadow paints at the seam instead of being
+                // covered by the strip's opaque background. Only renders while
+                // the panel is open (the aside is unmounted when collapsed), so
+                // it never doubles as a rail↔main seam. In the accessible (AAA)
+                // theme the soft shadow becomes a solid 1px border on that same
+                // strip-facing edge.
+                "ds:z-[1]",
+                d === "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: [
+                ie ? ie(b, { isActive: !R }) : null,
+                /* @__PURE__ */ S("div", { ref: pe, className: _t, children: [
+                  Ze.map((e) => /* @__PURE__ */ g(
+                    "div",
+                    {
+                      ref: Ye,
+                      "aria-hidden": "true",
+                      "data-exit-id": e.exitId,
+                      "data-tool-rail-body": e.toolId,
+                      "data-tool-rail-layer": "leaving",
+                      "data-presence": $ && e.exitId === Ge ? "present" : "leaving",
+                      className: De({ layer: "leaving" }),
+                      onTransitionEnd: (t) => {
+                        t.target === t.currentTarget && B(e.exitId);
+                      }
+                    },
+                    e.exitId
+                  )),
+                  /* @__PURE__ */ S(
+                    "div",
+                    {
+                      "data-tool-rail-body": b.id,
+                      "data-tool-rail-layer": "live",
+                      "data-presence": $ ? "entering" : "present",
+                      className: De({ layer: "live" }),
+                      children: [
+                        b.header ? /* @__PURE__ */ g("div", { className: "ds:shrink-0", children: b.header }) : null,
+                        b.fill ? (
+                          // data-tool-fill: a self-scrolling panel owns its own native
+                          // scroll, so a token rule paints its scrollbar to match the
+                          // 8px overlay. See tokens/index.css.
+                          /* @__PURE__ */ g("div", { "data-tool-fill": "", className: "ds:flex-1 ds:min-h-0", children: b.panel })
+                        ) : /* @__PURE__ */ g(
+                          ct,
+                          {
+                            orientation: "vertical",
+                            className: "ds:flex-1 ds:min-h-0",
+                            children: b.panel
+                          }
+                        )
+                      ]
+                    },
+                    b.id
+                  )
+                ] }),
+                f ? /* @__PURE__ */ g(
+                  "div",
+                  {
+                    ...xe,
+                    "aria-label": y("toolRail.resizePanel", {
+                      defaultValue: "Resize tool panel"
+                    }),
+                    "data-resizing": we ? "" : void 0,
+                    className: Ct({ edge: Ie })
+                  }
+                ) : null
+              ]
+            }
+          ) : null,
+          /* @__PURE__ */ g(ut, { children: /* @__PURE__ */ S(
+            "div",
+            {
+              ref: He,
+              role: "toolbar",
+              "aria-orientation": "vertical",
+              "aria-label": D ?? y("toolRail.railLabel", { defaultValue: "Tools" }),
+              className: Et(),
+              onKeyDown: tt,
+              children: [
+                n.map((e, t) => {
+                  const a = e.id === w, s = typeof e.badgeCount == "number" && e.badgeCount > 0, i = s ? y("toolRail.toolWithCount", {
+                    tool: e.label,
+                    count: e.badgeCount,
+                    defaultValue: "{{tool}}, {{count}} updates"
+                  }) : e.label, o = le && !!e.reorderable && !e.disabled, z = o ? `${Oe}-${e.id}` : void 0;
+                  return /* @__PURE__ */ S(lt, { children: [
+                    Ke && t === oe ? /* @__PURE__ */ g(
+                      "div",
+                      {
+                        role: "separator",
+                        "aria-orientation": "horizontal",
+                        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__ */ S(
+                      "div",
+                      {
+                        className: [
+                          Ce({
+                            dragging: V === t,
+                            dropTarget: de === t && V !== t,
+                            reorderable: o
+                          }),
+                          Ve,
+                          mt
+                        ].filter(Boolean).join(" "),
+                        "data-reflow-id": e.id,
+                        "data-dragging": V === t ? "" : void 0,
+                        draggable: o || void 0,
+                        onDragStart: o ? (r) => {
+                          Q(t), r.dataTransfer.effectAllowed = "move", r.dataTransfer.setData(
+                            "text/plain",
+                            String(t)
+                          );
+                        } : void 0,
+                        onDragOver: o ? (r) => {
+                          V !== null && (r.preventDefault(), r.dataTransfer.dropEffect = "move", de !== t && K(t));
+                        } : void 0,
+                        onDragLeave: o ? () => K((r) => r === t ? null : r) : void 0,
+                        onDrop: o ? (r) => {
+                          r.preventDefault();
+                          const m = V;
+                          K(null), Q(null), !(m === null || m === t) && ye(m, t);
+                        } : void 0,
+                        onDragEnd: o ? () => {
+                          Q(null), K(null);
+                        } : void 0,
+                        children: [
+                          /* @__PURE__ */ g(
+                            Le,
+                            {
+                              ref: (r) => {
+                                Z.current[t] = r;
+                              },
+                              icon: e.icon,
+                              tooltip: e.label,
+                              "aria-label": i,
+                              intent: "ghost",
+                              size: "sm",
+                              disabled: e.disabled,
+                              "aria-pressed": a,
+                              "aria-expanded": a,
+                              "data-active": a ? e.id : void 0,
+                              "data-tool-id": e.id,
+                              "aria-describedby": z,
+                              "aria-keyshortcuts": o ? "Alt+ArrowUp Alt+ArrowDown" : void 0,
+                              tabIndex: t === j ? 0 : -1,
+                              onFocus: () => {
+                                e.disabled || Y(t);
+                              },
+                              onClick: () => et(e.id, X.current),
+                              onKeyDown: (r) => {
+                                if (r.key === "Enter" || r.key === " ") {
+                                  X.current = !0;
+                                  return;
+                                }
+                                if (o && r.altKey && p) {
+                                  let m = null;
+                                  if (r.key === "ArrowUp" ? m = t - 1 : r.key === "ArrowDown" ? m = t + 1 : r.key === "Home" ? m = p.first : r.key === "End" && (m = p.last), m !== null) {
+                                    r.preventDefault();
+                                    const nt = Math.max(
+                                      p.first,
+                                      Math.min(p.last, m)
+                                    ), st = e.id;
+                                    ye(t, nt), requestAnimationFrame(() => {
+                                      var ke, _e;
+                                      (_e = (ke = L.current) == null ? void 0 : ke.querySelector(
+                                        `[data-tool-id="${CSS.escape(st)}"]`
+                                      )) == null || _e.focus();
+                                    });
+                                  }
+                                }
+                              },
+                              onKeyUp: (r) => {
+                                (r.key === "Enter" || r.key === " ") && (X.current = !1);
+                              }
+                            }
+                          ),
+                          s ? /* @__PURE__ */ g("span", { "aria-hidden": "true", className: Vt(), children: jt(
+                            e.badgeCount,
+                            at
+                          ) }) : null,
+                          W == null ? void 0 : W(e, {
+                            index: t,
+                            isActive: a,
+                            isRovingTarget: t === j
+                          }),
+                          z ? /* @__PURE__ */ g("span", { id: z, className: "ds:sr-only", children: y("toolRail.reorderInstructions", {
+                            tool: e.label,
+                            defaultValue: "Reorder {{tool}}. Press Alt + Up or Alt + Down to move."
+                          }) }) : null
+                        ]
+                      }
+                    )
+                  ] }, e.id);
+                }),
+                Xe.map(
+                  (e) => ee.isLeaving(e.id) ? /* @__PURE__ */ g(
+                    "div",
+                    {
+                      className: [
+                        Ce({
+                          dragging: !1,
+                          dropTarget: !1,
+                          reorderable: !1
+                        }),
+                        Ve,
+                        Bt
+                      ].filter(Boolean).join(" "),
+                      "aria-hidden": "true",
+                      children: /* @__PURE__ */ g(
+                        Le,
+                        {
+                          icon: e.icon,
+                          intent: "ghost",
+                          size: "sm",
+                          disabled: !0,
+                          tabIndex: -1
+                        }
+                      )
+                    },
+                    e.id
+                  ) : null
+                )
+              ]
+            }
+          ) })
+        ]
+      }
+    );
+  }
+);
+Mt.displayName = "ToolRail";
+export {
+  Mt as T,
+  It as t
+};
+//# sourceMappingURL=tool-rail-D89USYE6.js.map