@alfadocs/ui-kit-debug 1.61.0 → 1.63.0

package/dist/_chunks/tool-rail-C-03rH2I.js

@@ -0,0 +1,973 @@
+import { jsxs as R, jsx as c } from "react/jsx-runtime";
+import { forwardRef as Et, useRef as m, useState as S, useMemo as O, useId as kt, useCallback as B, useEffect as te, useImperativeHandle as At, Fragment as Nt } from "react";
+import * as K from "@radix-ui/react-dialog";
+import { c as A } from "./index-D2ZczOXr.js";
+import { useTranslation as zt } from "react-i18next";
+import { u as Lt } from "./app-frame-context-CPszhDDb.js";
+import { I as he } from "./icon-button-C_1TgRiK.js";
+import { a as Ct } from "./panel-header-BJkaUwnl.js";
+import { S as Ze } from "./scroll-area-CY5SLYNw.js";
+import { a as Dt } from "./tooltip-uEBdD1-5.js";
+import { u as _t } from "./use-controllable-state-BiY4xTzM.js";
+import { u as Vt } from "./use-edge-resize-CBtem0j2.js";
+import { u as k } from "./use-isomorphic-layout-effect-BGfaCOP1.js";
+import { a as Pt, u as Xe, R as Bt } from "./use-list-reflow-C7O4Uqnl.js";
+import { u as jt } from "./use-prefers-reduced-motion-BMwIQRjB.js";
+import { u as Mt } from "./use-presence-transition-cDwWUXV-.js";
+import { u as Ft } from "./use-theme-CAuo6EYT.js";
+import { u as qt } from "./registry-DvAUVLHh.js";
+import { X as Ot } from "./x-B5YnXwCz.js";
+const Kt = {
+  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()
+    },
+    panelMode: {
+      type: "'docked' | 'overlay' | 'full-screen'",
+      descriptionKey: "ui.agent.toolRail.state.panelMode",
+      description: "How an open panel shows: docked beside the content, over it because the frame keeps a minimum width for main, or full screen on a phone.",
+      read: (l) => l.getPanelMode()
+    }
+  },
+  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, a) => {
+        l.open(a.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, a) => {
+        l.setActiveTool(a.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."
+    }
+  }
+}, Ht = "ds:[inline-size:3rem]", $t = "ds:[inline-size:var(--tool-rail-panel-inline-size,var(--ai-tools-rail-panel-inline-size,22rem))]", Ge = "--tool-rail-panel-inline-size", Ut = 288, Wt = 880, Yt = 352, Zt = 24;
+function Xt(l, a, D) {
+  return a === void 0 || !Number.isFinite(a) || a <= 0 ? !1 : l === null || !Number.isFinite(l) ? D : D ? l < a + Zt : l < a;
+}
+const Gt = A(
+  [
+    // `relative`: an overlaid panel is positioned against the rail.
+    "ds:relative 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):
+        // the shadow is `--accessible-off` there and the edge is
+        // `--accessible-edge-width`, 0 in the other themes. Both sit in
+        // `[:where(&)]`, so a class passed in className wins.
+        end: "ds:flex-row ds:[:where(&)]:[box-shadow:var(--accessible-off,var(--shadow-chrome-start))] ds:[:where(&)]:border-s-[length:var(--accessible-edge-width,0px)] ds:border-s-[color:var(--border)]",
+        // Strip docks inline-start; the panel mounts inline-end of it.
+        start: "ds:flex-row-reverse ds:[:where(&)]:[box-shadow:var(--accessible-off,var(--shadow-chrome-end))] ds:[:where(&)]:border-e-[length:var(--accessible-edge-width,0px)] ds:border-e-[color:var(--border)]"
+      }
+    },
+    defaultVariants: { side: "end" }
+  }
+), Jt = A(
+  [
+    "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)]",
+    Ht
+  ].join(" ")
+), Qt = A(
+  [
+    // Positioned by the caller: `relative` docked, absolute when overlaid.
+    "ds:flex ds:min-h-0 ds:flex-col ds:h-full",
+    "ds:bg-[var(--background)]",
+    $t,
+    // 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" }
+  }
+), en = A("", {
+  variants: {
+    mode: {
+      docked: "ds:relative ds:z-[1]",
+      overlay: "ds:absolute ds:inset-y-0 ds:z-[var(--z-fixed)]"
+    },
+    side: { end: "", start: "" }
+  },
+  compoundVariants: [
+    {
+      mode: "docked",
+      side: "end",
+      className: "ds:[:where(&)]:[box-shadow:var(--accessible-off,var(--shadow-chrome-end))] ds:[:where(&)]:border-e-[length:var(--accessible-edge-width,0px)] ds:border-e-[color:var(--border)]"
+    },
+    {
+      mode: "docked",
+      side: "start",
+      className: "ds:[:where(&)]:[box-shadow:var(--accessible-off,var(--shadow-chrome-start))] ds:[:where(&)]:border-s-[length:var(--accessible-edge-width,0px)] ds:border-s-[color:var(--border)]"
+    },
+    {
+      // Overlaid, it always opens toward the content, beside the strip, on
+      // either side: a hairline on that edge, the strip-facing border in the
+      // accessible themes, and a shadow toward the content.
+      mode: "overlay",
+      className: "ds:end-full ds:border-s-[length:var(--border-width-hairline)] ds:border-s-[color:var(--border)] ds:[:where(&)]:border-e-[length:var(--accessible-edge-width,0px)] ds:border-e-[color:var(--border)] ds:[:where(&)]:[box-shadow:var(--accessible-off,var(--shadow-chrome-start),var(--shadow-lg))]"
+    }
+  ],
+  defaultVariants: { mode: "docked", side: "end" }
+}), tn = [
+  "ds:fixed ds:inset-0 ds:z-[var(--z-modal)]",
+  "ds:flex ds:flex-col",
+  "ds:bg-[var(--background)] ds:text-[color:var(--foreground)]",
+  "ds:focus-visible:outline-none"
+].join(" "), nn = "ds:relative ds:flex ds:min-h-0 ds:flex-1 ds:flex-col ds:overflow-clip", Je = A(
+  [
+    "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" }
+  }
+), an = 500, sn = [
+  "id",
+  "name",
+  "for",
+  "data-component",
+  "data-component-id",
+  "data-testid"
+];
+function rn(l) {
+  return window.getComputedStyle(l).transitionDuration.split(",").some((a) => Number.parseFloat(a) > 0);
+}
+function on(l) {
+  const a = l.cloneNode(!0), D = l.querySelectorAll("*"), H = a.querySelectorAll("*"), $ = [];
+  return D.forEach((u, j) => {
+    var U;
+    const v = H[j];
+    if (v && ((u.scrollTop !== 0 || u.scrollLeft !== 0) && $.push([v, u.scrollTop, u.scrollLeft]), u instanceof HTMLCanvasElement && v instanceof HTMLCanvasElement))
+      try {
+        (U = v.getContext("2d")) == null || U.drawImage(u, 0, 0);
+      } catch {
+      }
+  }), H.forEach((u) => {
+    const j = u instanceof SVGElement;
+    for (const v of sn)
+      j && v === "id" || u.removeAttribute(v);
+    if (u.matches("iframe, video, audio, embed, object, source"))
+      for (const v of ["src", "srcdoc", "data", "autoplay"])
+        u.removeAttribute(v);
+  }), { nodes: Array.from(a.childNodes), scrolls: $ };
+}
+const ln = A(
+  [
+    "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" }
+  }
+), dn = A(
+  [
+    "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(" ")
+), Qe = A(
+  // `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
+    }
+  }
+), cn = "ds:opacity-0", et = [
+  "ds:transition-opacity ds:duration-[var(--animation-duration)]",
+  "ds:ease-[var(--ease-out)] ds:motion-reduce:transition-none"
+].join(" ");
+function un(l, a) {
+  return l > 99 ? a : String(l);
+}
+const fn = Et(
+  ({
+    id: l,
+    tools: a,
+    activeToolId: D,
+    defaultActiveToolId: H = null,
+    onActiveToolChange: $,
+    side: u = "end",
+    railLabel: j,
+    resizablePanel: v = !1,
+    panelWidth: U,
+    onPanelWidthChange: tt,
+    onReorder: W,
+    formatReorderAnnouncement: ne,
+    renderToolAffordance: ae,
+    renderPanelHeader: be,
+    dataComponent: nt = "tool-rail",
+    agentAdapter: at = Kt,
+    className: st
+  }, rt) => {
+    var $e, Ue;
+    const { t: I } = zt("ui"), [ot, g] = _t({
+      value: D,
+      defaultValue: H,
+      onChange: $
+    }), h = ot ?? null, se = m([]), N = m(null), [ye, re] = S(0), _ = m(!1), oe = m(!1), z = O(
+      () => a.findIndex((e) => e.id === h),
+      [a, h]
+    ), o = z >= 0 ? a[z] : null, ie = m(o);
+    o && (ie.current = o);
+    const it = O(
+      () => a.findIndex((e) => !e.disabled),
+      [a]
+    ), xe = O(() => {
+      var t;
+      const e = (t = a[0]) == null ? void 0 : t.scope;
+      return e ? a.findIndex((n) => n.scope && n.scope !== e) : -1;
+    }, [a]), lt = xe > 0, b = O(() => {
+      var n;
+      const e = a.findIndex((s) => s.reorderable);
+      if (e < 0) return null;
+      let t = e;
+      for (; t + 1 < a.length && ((n = a[t + 1]) != null && n.reorderable); ) t += 1;
+      return { first: e, last: t };
+    }, [a]), we = !!W && b !== null, dt = kt(), [M, le] = S(null), [Ie, Y] = S(null), { resolvedTheme: ct } = Ft(), V = ct.endsWith("-accessible") || void 0, { containerRef: Re } = Pt({
+      key: a.map((e) => e.id).join(),
+      reduceMotion: V
+    }), de = Xe({ reduceMotion: V }), ce = Mt(
+      o !== null,
+      { reduceMotion: V }
+    ), L = o === null && ce.mounted, w = o ?? (L ? ie.current : null), { ref: Se } = ce, ut = B(
+      (e) => {
+        N.current = e, Se(e);
+      },
+      [Se]
+    );
+    k(() => {
+      var n;
+      const e = N.current;
+      if (!e) return;
+      const t = document.activeElement;
+      if (L && t instanceof HTMLElement && e.contains(t)) {
+        const s = (n = ie.current) == null ? void 0 : n.id, r = C.current, d = (s ? r == null ? void 0 : r.querySelector(
+          `[data-tool-id="${CSS.escape(s)}"]`
+        ) : null) ?? /* The tool left the strip with its panel (a host removed it as it
+        closed): the strip's tab stop, else its first enabled icon, so
+        focus never drops to <body>. */
+        (r == null ? void 0 : r.querySelector(
+          '[data-tool-id][tabindex="0"]'
+        )) ?? (r == null ? void 0 : r.querySelector(
+          "[data-tool-id]:not(:disabled)"
+        ));
+        t.blur(), e.setAttribute("inert", ""), d == null || d.focus();
+        return;
+      }
+      e.toggleAttribute("inert", L);
+    }, [L]);
+    const Te = jt(), [Z, Ee] = S(
+      (o == null ? void 0 : o.id) ?? null
+    ), y = (o == null ? void 0 : o.id) ?? null, X = !V && !Te && y !== null && Z !== null && Z !== y;
+    k(() => {
+      if (Z === y) return;
+      if (!X) {
+        Ee(y);
+        return;
+      }
+      let e = 0;
+      const t = () => Ee(y), n = requestAnimationFrame(() => {
+        e = requestAnimationFrame(t);
+      }), s = window.setTimeout(t, 64);
+      return () => {
+        cancelAnimationFrame(n), cancelAnimationFrame(e), window.clearTimeout(s);
+      };
+    }, [y, Z, X]);
+    const ft = !!V || Te, ke = m(null), [f, Ae] = S({ liveId: y, serial: 0, focusLost: !1, leaving: [] });
+    if (f.liveId !== y) {
+      const e = f.liveId !== null && y !== null ? (($e = ke.current) == null ? void 0 : $e.querySelector(
+        ':scope > [data-tool-rail-layer="live"]'
+      )) ?? null : null, t = f.leaving.filter(
+        (n) => n.toolId !== y
+      );
+      Ae({
+        liveId: y,
+        serial: f.serial + 1,
+        focusLost: (e == null ? void 0 : e.contains(document.activeElement)) ?? !1,
+        leaving: e && !ft ? [
+          ...t.filter((n) => n.toolId !== f.liveId),
+          {
+            exitId: `${f.liveId}:${f.serial}`,
+            toolId: f.liveId,
+            ...on(e)
+          }
+        ] : t
+      });
+    }
+    const F = B((e) => {
+      Ae(
+        (t) => t.leaving.some((n) => n.exitId === e) ? {
+          ...t,
+          leaving: t.leaving.filter((n) => n.exitId !== e)
+        } : t
+      );
+    }, []), { leave: Ne } = Xe({
+      reduceMotion: V,
+      durationMs: an
+    });
+    te(() => {
+      for (const { exitId: e } of f.leaving)
+        Ne(e, () => F(e));
+    }, [f.leaving, Ne, F]);
+    const pt = w ? f.leaving : [], vt = ((Ue = f.leaving[f.leaving.length - 1]) == null ? void 0 : Ue.exitId) ?? null, ze = m(f.leaving);
+    ze.current = f.leaving;
+    const mt = B(
+      (e) => {
+        if (!e || e.childNodes.length > 0) return;
+        const t = ze.current.find(
+          (n) => n.exitId === e.dataset.exitId
+        );
+        if (t) {
+          if (!rn(e)) {
+            F(t.exitId);
+            return;
+          }
+          e.setAttribute("inert", ""), e.append(...t.nodes);
+          for (const [n, s, r] of t.scrolls)
+            n.scrollTop = s, n.scrollLeft = r;
+        }
+      },
+      [F]
+    );
+    k(() => {
+      var t, n;
+      if (!f.focusLost || !y) return;
+      const e = document.activeElement;
+      e && e !== document.body || (n = (t = C.current) == null ? void 0 : t.querySelector(
+        `[data-tool-id="${CSS.escape(y)}"]`
+      )) == null || n.focus();
+    }, [f.serial]);
+    const [gt, Le] = S([]), Ce = m(a);
+    te(() => {
+      const e = Ce.current, t = new Set(a.map((s) => s.id)), n = e.filter((s) => !t.has(s.id));
+      if (n.length > 0) {
+        Le((s) => {
+          const r = new Set(s.map((d) => d.id));
+          return [
+            ...s,
+            ...n.filter((d) => !r.has(d.id))
+          ];
+        });
+        for (const s of n)
+          de.leave(s.id, () => {
+            Le(
+              (r) => r.filter((d) => d.id !== s.id)
+            );
+          });
+      }
+      Ce.current = a;
+    }, [a, de]);
+    const [ht, bt] = S(""), ue = m(!1), De = B(
+      (e, t) => {
+        if (!W || !b) return;
+        const n = Math.max(
+          b.first,
+          Math.min(b.last, t)
+        );
+        if (n === e) return;
+        W(e, n);
+        const s = a[e];
+        if (s) {
+          const r = ne ? ne({ tool: s, from: e, to: n }) : I("toolRail.reorderAnnounce", {
+            tool: s.label,
+            to: n - b.first + 1,
+            total: b.last - b.first + 1,
+            defaultValue: "{{tool}} moved to position {{to}} of {{total}}"
+          });
+          r && (ue.current = !ue.current, bt(ue.current ? r : `${r}​`));
+        }
+      },
+      [W, b, a, I, ne]
+    ), _e = a[ye], q = z >= 0 ? z : _e && !_e.disabled ? ye : it, yt = B(
+      (e, t) => {
+        const n = a.find((s) => s.id === e);
+        !n || n.disabled || (_.current = t, g(h === e ? null : e));
+      },
+      [a, h, g]
+    ), xt = B(
+      (e) => {
+        var P, i, x;
+        const t = a.length;
+        if (t === 0 || e.altKey) return;
+        let n = null;
+        if (e.key === "ArrowDown" ? n = (q + 1) % t : e.key === "ArrowUp" ? n = (q - 1 + t) % t : e.key === "Home" ? n = 0 : e.key === "End" && (n = t - 1), n === null) return;
+        const s = e.key === "ArrowUp" || e.key === "End";
+        let r = n, d = 0;
+        for (; d < t && ((P = a[r]) != null && P.disabled); )
+          r = s ? (r - 1 + t) % t : (r + 1) % t, d += 1;
+        (i = a[r]) != null && i.disabled || (e.preventDefault(), re(r), (x = se.current[r]) == null || x.focus());
+      },
+      [a, q]
+    ), C = m(null), p = Lt(), T = (p == null ? void 0 : p.phone) ?? !1, fe = (p == null ? void 0 : p.sharedWidth) ?? null, G = p == null ? void 0 : p.minMainWidth, [E, Ve] = S(!1), J = m(!1);
+    J.current = E;
+    const [Q, Pe] = S(null), Be = m(void 0), je = m(null);
+    k(() => {
+      var n;
+      const e = Be.current;
+      if (Be.current = h, !T || h === null) {
+        Q !== null && Pe(null);
+        return;
+      }
+      if (Q === h) return;
+      if (e !== void 0 && h !== e) {
+        je.current = document.activeElement instanceof HTMLElement ? document.activeElement : null, Pe(h);
+        return;
+      }
+      const t = (n = C.current) == null ? void 0 : n.contains(document.activeElement);
+      g(null), t && (p == null || p.focusMain());
+    }, [T, h, Q, g, p]);
+    const pe = T && o !== null && Q === o.id;
+    te(() => {
+      const e = C.current;
+      if (!e) return;
+      const t = (n) => {
+        if (n.key !== "Escape" || z < 0) return;
+        n.preventDefault();
+        const s = z;
+        g(null), re(s), requestAnimationFrame(() => {
+          var r;
+          (r = se.current[s]) == null || r.focus();
+        });
+      };
+      return e.addEventListener("keydown", t), () => e.removeEventListener("keydown", t);
+    }, [z, g]), te(() => {
+      if (!E || !o || T) return;
+      const e = (t) => {
+        t.key !== "Escape" || t.defaultPrevented || (t.preventDefault(), g(null));
+      };
+      return document.addEventListener("keydown", e), () => document.removeEventListener("keydown", e);
+    }, [E, o, T, g]), k(() => {
+      var e;
+      o && _.current && ((e = N.current) == null || e.focus()), _.current = !1;
+    }, [o]);
+    const Me = u === "end" || E ? "inline-start" : "inline-end", { separatorProps: Fe, isResizing: ee, isResized: qe } = Vt({
+      edge: Me,
+      targetRef: N,
+      cssProperty: Ge,
+      minSize: Ut,
+      maxSize: Wt,
+      defaultSize: Yt,
+      disabled: !v,
+      // A width the user cannot change or reset is a trap: the controlled
+      // value applies only while the handle is on.
+      size: v ? U : void 0,
+      onResize: tt
+    }), ve = Fe["aria-valuenow"];
+    k(() => {
+      var e;
+      !v || !qe || !o || (e = N.current) == null || e.style.setProperty(
+        Ge,
+        `${ve}px`
+      );
+    }, [o, v, qe, ve]);
+    const [wt, It] = S(null), Oe = !!p && !T && G !== void 0;
+    k(() => {
+      const e = N.current;
+      if (!e || !o || !Oe || typeof ResizeObserver > "u") return;
+      const t = new ResizeObserver(() => {
+        const n = e.offsetWidth;
+        It((s) => s === n ? s : n);
+      });
+      return t.observe(e), () => t.disconnect();
+    }, [o, Oe]), k(() => {
+      var r;
+      if (!p || T || G === void 0) {
+        J.current && Ve(!1);
+        return;
+      }
+      if (ee) return;
+      const e = N.current;
+      if (!o || !e) return;
+      const t = ((r = Re.current) == null ? void 0 : r.getBoundingClientRect().width) ?? 0, n = fe === null ? null : fe - t - e.offsetWidth, s = Xt(
+        n,
+        G,
+        J.current
+      );
+      s !== J.current && Ve(s);
+    }, [
+      p,
+      T,
+      fe,
+      G,
+      o,
+      ve,
+      ee,
+      wt
+    ]);
+    const me = m(h);
+    me.current = h;
+    const Ke = m("docked");
+    Ke.current = pe ? "full-screen" : E ? "overlay" : "docked";
+    const ge = O(
+      () => ({
+        getActiveToolId: () => me.current,
+        getPanelMode: () => Ke.current,
+        setActiveTool: (e) => {
+          _.current = !1, g(e);
+        },
+        open: (e) => {
+          const t = a.find((n) => n.id === e);
+          !t || t.disabled || (_.current = !1, g(e));
+        },
+        close: () => {
+          const e = me.current;
+          _.current = !1, g(null), e != null && requestAnimationFrame(() => {
+            var t, n;
+            (n = (t = C.current) == null ? void 0 : t.querySelector(
+              `[data-tool-id="${CSS.escape(e)}"]`
+            )) == null || n.focus();
+          });
+        }
+      }),
+      [a, g]
+    );
+    At(rt, () => ge, [ge]), qt(at, ge, l);
+    const Rt = I("toolRail.badgeCountOverflow", {
+      defaultValue: "99+"
+    }), He = j ?? I("toolRail.railLabel", { defaultValue: "Tools" });
+    return /* @__PURE__ */ R(
+      "aside",
+      {
+        ref: C,
+        "aria-label": He,
+        "data-component": nt,
+        "data-component-id": l,
+        "data-side": u,
+        "data-panel-mode": pe ? "full-screen" : E ? "overlay" : "docked",
+        className: [Gt({ side: u }), st].filter(Boolean).join(" "),
+        children: [
+          we ? /* @__PURE__ */ c("span", { role: "status", "aria-live": "polite", className: "ds:sr-only", children: ht }) : null,
+          w && !T ? /* @__PURE__ */ R(
+            "section",
+            {
+              ref: ut,
+              tabIndex: -1,
+              "aria-label": I("toolRail.panelLabel", {
+                tool: w.label,
+                defaultValue: "{{tool}} panel"
+              }),
+              "aria-hidden": L || void 0,
+              "data-tool-rail-state": L ? "collapsing" : "expanded",
+              "data-presence": ce.phase,
+              "data-active-tool": w.id,
+              "data-resizing": ee ? "" : void 0,
+              className: [
+                // Overlaid, it slides in from the strip on its inline end.
+                Qt({ side: E ? "end" : u }),
+                en({
+                  mode: E ? "overlay" : "docked",
+                  side: u
+                }),
+                "ds:focus-visible:outline-none"
+              ].filter(Boolean).join(" "),
+              children: [
+                be ? be(w, { isActive: !L }) : null,
+                /* @__PURE__ */ R("div", { ref: ke, className: nn, children: [
+                  pt.map((e) => /* @__PURE__ */ c(
+                    "div",
+                    {
+                      ref: mt,
+                      "aria-hidden": "true",
+                      "data-exit-id": e.exitId,
+                      "data-tool-rail-body": e.toolId,
+                      "data-tool-rail-layer": "leaving",
+                      "data-presence": X && e.exitId === vt ? "present" : "leaving",
+                      className: Je({ layer: "leaving" }),
+                      onTransitionEnd: (t) => {
+                        t.target === t.currentTarget && F(e.exitId);
+                      }
+                    },
+                    e.exitId
+                  )),
+                  /* @__PURE__ */ R(
+                    "div",
+                    {
+                      "data-tool-rail-body": w.id,
+                      "data-tool-rail-layer": "live",
+                      "data-presence": X ? "entering" : "present",
+                      className: Je({ layer: "live" }),
+                      children: [
+                        w.header ? /* @__PURE__ */ c("div", { className: "ds:shrink-0", children: w.header }) : null,
+                        w.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__ */ c("div", { "data-tool-fill": "", className: "ds:flex-1 ds:min-h-0", children: w.panel })
+                        ) : /* @__PURE__ */ c(
+                          Ze,
+                          {
+                            orientation: "vertical",
+                            className: "ds:flex-1 ds:min-h-0",
+                            children: w.panel
+                          }
+                        )
+                      ]
+                    },
+                    w.id
+                  )
+                ] }),
+                v ? /* @__PURE__ */ c(
+                  "div",
+                  {
+                    ...Fe,
+                    "aria-label": I("toolRail.resizePanel", {
+                      defaultValue: "Resize tool panel"
+                    }),
+                    "data-resizing": ee ? "" : void 0,
+                    className: ln({ edge: Me })
+                  }
+                ) : null
+              ]
+            }
+          ) : null,
+          pe && o ? /* @__PURE__ */ c(
+            K.Root,
+            {
+              open: !0,
+              onOpenChange: (e) => {
+                e || g(null);
+              },
+              children: /* @__PURE__ */ c(K.Portal, { children: /* @__PURE__ */ R(
+                K.Content,
+                {
+                  "aria-describedby": void 0,
+                  "data-component": "tool-rail-panel",
+                  "data-active-tool": o.id,
+                  className: tn,
+                  onCloseAutoFocus: (e) => {
+                    const t = je.current;
+                    t != null && t.isConnected && (e.preventDefault(), t.focus());
+                  },
+                  children: [
+                    /* @__PURE__ */ R("div", { className: "ds:flex ds:shrink-0 ds:justify-end ds:p-[var(--spacing-xs)]", children: [
+                      /* @__PURE__ */ c(K.Title, { className: "ds:sr-only", children: I("toolRail.panelLabel", {
+                        tool: o.label,
+                        defaultValue: "{{tool}} panel"
+                      }) }),
+                      /* @__PURE__ */ c(K.Close, { asChild: !0, children: /* @__PURE__ */ c(
+                        he,
+                        {
+                          icon: /* @__PURE__ */ c(Ot, { "aria-hidden": "true" }),
+                          intent: "ghost",
+                          size: "lg",
+                          "aria-label": I("common.close", { defaultValue: "Close" })
+                        }
+                      ) })
+                    ] }),
+                    /* @__PURE__ */ R(Ct, { actions: null, children: [
+                      o.header ? /* @__PURE__ */ c("div", { className: "ds:shrink-0", children: o.header }) : null,
+                      o.fill ? /* @__PURE__ */ c("div", { "data-tool-fill": "", className: "ds:flex-1 ds:min-h-0", children: o.panel }) : /* @__PURE__ */ c(
+                        Ze,
+                        {
+                          orientation: "vertical",
+                          className: "ds:flex-1 ds:min-h-0",
+                          children: o.panel
+                        }
+                      )
+                    ] })
+                  ]
+                }
+              ) })
+            }
+          ) : null,
+          /* @__PURE__ */ c(Dt, { children: /* @__PURE__ */ R(
+            "div",
+            {
+              ref: Re,
+              role: "toolbar",
+              "aria-orientation": "vertical",
+              "aria-label": He,
+              className: Jt(),
+              onKeyDown: xt,
+              children: [
+                a.map((e, t) => {
+                  const n = e.id === h, s = typeof e.badgeCount == "number" && e.badgeCount > 0, r = s ? I("toolRail.toolWithCount", {
+                    tool: e.label,
+                    count: e.badgeCount,
+                    defaultValue: "{{tool}}, {{count}} updates"
+                  }) : e.label, d = we && !!e.reorderable && !e.disabled, P = d ? `${dt}-${e.id}` : void 0;
+                  return /* @__PURE__ */ R(Nt, { children: [
+                    lt && t === xe ? /* @__PURE__ */ c(
+                      "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__ */ R(
+                      "div",
+                      {
+                        className: [
+                          Qe({
+                            dragging: M === t,
+                            dropTarget: Ie === t && M !== t,
+                            reorderable: d
+                          }),
+                          et,
+                          Bt
+                        ].filter(Boolean).join(" "),
+                        "data-reflow-id": e.id,
+                        "data-dragging": M === t ? "" : void 0,
+                        draggable: d || void 0,
+                        onDragStart: d ? (i) => {
+                          le(t), i.dataTransfer.effectAllowed = "move", i.dataTransfer.setData(
+                            "text/plain",
+                            String(t)
+                          );
+                        } : void 0,
+                        onDragOver: d ? (i) => {
+                          M !== null && (i.preventDefault(), i.dataTransfer.dropEffect = "move", Ie !== t && Y(t));
+                        } : void 0,
+                        onDragLeave: d ? () => Y((i) => i === t ? null : i) : void 0,
+                        onDrop: d ? (i) => {
+                          i.preventDefault();
+                          const x = M;
+                          Y(null), le(null), !(x === null || x === t) && De(x, t);
+                        } : void 0,
+                        onDragEnd: d ? () => {
+                          le(null), Y(null);
+                        } : void 0,
+                        children: [
+                          /* @__PURE__ */ c(
+                            he,
+                            {
+                              ref: (i) => {
+                                se.current[t] = i;
+                              },
+                              icon: e.icon,
+                              tooltip: e.label,
+                              "aria-label": r,
+                              intent: "ghost",
+                              size: "sm",
+                              disabled: e.disabled,
+                              "aria-pressed": n,
+                              "aria-expanded": n,
+                              "data-active": n ? e.id : void 0,
+                              "data-tool-id": e.id,
+                              "aria-describedby": P,
+                              "aria-keyshortcuts": d ? "Alt+ArrowUp Alt+ArrowDown" : void 0,
+                              tabIndex: t === q ? 0 : -1,
+                              onFocus: () => {
+                                e.disabled || re(t);
+                              },
+                              onClick: () => yt(e.id, oe.current),
+                              onKeyDown: (i) => {
+                                if (i.key === "Enter" || i.key === " ") {
+                                  oe.current = !0;
+                                  return;
+                                }
+                                if (d && i.altKey && b) {
+                                  let x = null;
+                                  if (i.key === "ArrowUp" ? x = t - 1 : i.key === "ArrowDown" ? x = t + 1 : i.key === "Home" ? x = b.first : i.key === "End" && (x = b.last), x !== null) {
+                                    i.preventDefault();
+                                    const St = Math.max(
+                                      b.first,
+                                      Math.min(b.last, x)
+                                    ), Tt = e.id;
+                                    De(t, St), requestAnimationFrame(() => {
+                                      var We, Ye;
+                                      (Ye = (We = C.current) == null ? void 0 : We.querySelector(
+                                        `[data-tool-id="${CSS.escape(Tt)}"]`
+                                      )) == null || Ye.focus();
+                                    });
+                                  }
+                                }
+                              },
+                              onKeyUp: (i) => {
+                                (i.key === "Enter" || i.key === " ") && (oe.current = !1);
+                              }
+                            }
+                          ),
+                          s ? /* @__PURE__ */ c("span", { "aria-hidden": "true", className: dn(), children: un(
+                            e.badgeCount,
+                            Rt
+                          ) }) : null,
+                          ae == null ? void 0 : ae(e, {
+                            index: t,
+                            isActive: n,
+                            isRovingTarget: t === q
+                          }),
+                          P ? /* @__PURE__ */ c("span", { id: P, className: "ds:sr-only", children: I("toolRail.reorderInstructions", {
+                            tool: e.label,
+                            defaultValue: "Reorder {{tool}}. Press Alt + Up or Alt + Down to move."
+                          }) }) : null
+                        ]
+                      }
+                    )
+                  ] }, e.id);
+                }),
+                gt.map(
+                  (e) => de.isLeaving(e.id) ? /* @__PURE__ */ c(
+                    "div",
+                    {
+                      className: [
+                        Qe({
+                          dragging: !1,
+                          dropTarget: !1,
+                          reorderable: !1
+                        }),
+                        et,
+                        cn
+                      ].filter(Boolean).join(" "),
+                      "aria-hidden": "true",
+                      children: /* @__PURE__ */ c(
+                        he,
+                        {
+                          icon: e.icon,
+                          intent: "ghost",
+                          size: "sm",
+                          disabled: !0,
+                          tabIndex: -1
+                        }
+                      )
+                    },
+                    e.id
+                  ) : null
+                )
+              ]
+            }
+          ) })
+        ]
+      }
+    );
+  }
+);
+fn.displayName = "ToolRail";
+export {
+  fn as T,
+  Kt as t
+};
+//# sourceMappingURL=tool-rail-C-03rH2I.js.map