@alfadocs/ui-kit 1.32.0 → 1.34.0

package/dist/_chunks/tool-rail-8Scslq3X.js

@@ -1,524 +0,0 @@
-import { jsxs as D, jsx as f } from "react/jsx-runtime";
-import { forwardRef as Re, useRef as m, useState as E, useMemo as R, useId as ke, useCallback as F, useEffect as Te, useImperativeHandle as ze, Fragment as _e } from "react";
-import { c as w } from "./index-D2ZczOXr.js";
-import { useTranslation as Ae } from "react-i18next";
-import { I as Se } from "./icon-button-DA2CAGHZ.js";
-import { S as De } from "./scroll-area-BZOvUhwQ.js";
-import { a as Ee } from "./tooltip-DvmfrNvB.js";
-import { u as Ne } from "./use-controllable-state-BiY4xTzM.js";
-import { u as Ce } from "./use-edge-resize-ZnGG7gyO.js";
-import { u as te } from "./use-isomorphic-layout-effect-BGfaCOP1.js";
-import { u as Ve } from "./registry-DvAUVLHh.js";
-const Le = {
-  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: (o) => o.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: (o, a) => {
-        o.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: (o) => {
-        o.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: (o, a) => {
-        o.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."
-    }
-  }
-}, Ke = "ds:[inline-size:3rem]", je = "ds:[inline-size:var(--tool-rail-panel-inline-size,var(--ai-tools-rail-panel-inline-size,22rem))]", ae = "--tool-rail-panel-inline-size", Pe = 288, Me = 880, qe = 352, Be = w(
-  ["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" }
-  }
-), Fe = 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)]",
-    Ke
-  ].join(" ")
-), Ue = w(
-  [
-    "ds:relative ds:flex ds:min-h-0 ds:flex-col ds:h-full",
-    "ds:bg-[var(--background)]",
-    je,
-    // Defensive: the panel doesn't animate its width today, but if a
-    // consumer adds a transition on the var, suppress it mid-drag.
-    "ds:data-[resizing]:transition-none"
-  ].join(" ")
-), He = 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",
-    "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" }
-  }
-), $e = w(
-  [
-    "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(" ")
-), Oe = 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)]"],
-  {
-    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
-    }
-  }
-);
-function We(o, a) {
-  return o > 99 ? a : String(o);
-}
-const Ze = Re(
-  ({
-    id: o,
-    tools: a,
-    activeToolId: re,
-    defaultActiveToolId: ne = null,
-    onActiveToolChange: ie,
-    side: k = "end",
-    railLabel: oe,
-    resizablePanel: T = !1,
-    onReorder: z,
-    formatReorderAnnouncement: N,
-    renderToolAffordance: C,
-    renderPanelHeader: U,
-    dataComponent: le = "tool-rail",
-    agentAdapter: de = Le,
-    className: ce
-  }, ue) => {
-    var Q;
-    const { t: p } = Ae(), [fe, v] = Ne({
-      value: re,
-      defaultValue: ne,
-      onChange: ie
-    }), g = fe ?? null, V = m([]), _ = m(null), [L, K] = E(0), h = m(!1), j = m(!1), b = R(
-      () => a.findIndex((e) => e.id === g),
-      [a, g]
-    ), l = b >= 0 ? a[b] : null, pe = R(
-      () => a.findIndex((e) => !e.disabled),
-      [a]
-    ), H = R(() => {
-      var s;
-      const e = (s = a[0]) == null ? void 0 : s.scope;
-      return e ? a.findIndex((t) => t.scope && t.scope !== e) : -1;
-    }, [a]), ve = H > 0, d = R(() => {
-      var t;
-      const e = a.findIndex((i) => i.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]), $ = !!z && d !== null, ge = ke(), [I, P] = E(null), [O, A] = E(null), [be, me] = E(""), M = m(!1), W = F(
-      (e, s) => {
-        if (!z || !d) return;
-        const t = Math.max(
-          d.first,
-          Math.min(d.last, s)
-        );
-        if (t === e) return;
-        z(e, t);
-        const i = a[e];
-        if (i) {
-          const n = N ? N({ tool: i, from: e, to: t }) : p("toolRail.reorderAnnounce", {
-            tool: i.label,
-            to: t - d.first + 1,
-            total: d.last - d.first + 1,
-            defaultValue: "{{tool}} moved to position {{to}} of {{total}}"
-          });
-          n && (M.current = !M.current, me(M.current ? n : `${n}​`));
-        }
-      },
-      [z, d, a, p, N]
-    ), x = b >= 0 ? b : L >= 0 && !((Q = a[L]) != null && Q.disabled) ? L : pe, he = F(
-      (e, s) => {
-        const t = a.find((i) => i.id === e);
-        !t || t.disabled || (h.current = s, v(g === e ? null : e));
-      },
-      [a, g, v]
-    ), ye = F(
-      (e) => {
-        var y, r, u;
-        const s = a.length;
-        if (s === 0 || e.altKey) return;
-        let t = null;
-        if (e.key === "ArrowDown" ? t = (x + 1) % s : e.key === "ArrowUp" ? t = (x - 1 + s) % s : e.key === "Home" ? t = 0 : e.key === "End" && (t = s - 1), t === null) return;
-        const i = e.key === "ArrowUp" || e.key === "End";
-        let n = t, c = 0;
-        for (; c < s && ((y = a[n]) != null && y.disabled); )
-          n = i ? (n - 1 + s) % s : (n + 1) % s, c += 1;
-        (r = a[n]) != null && r.disabled || (e.preventDefault(), K(n), (u = V.current[n]) == null || u.focus());
-      },
-      [a, x]
-    ), S = m(null);
-    Te(() => {
-      const e = S.current;
-      if (!e) return;
-      const s = (t) => {
-        if (t.key !== "Escape" || b < 0) return;
-        t.preventDefault();
-        const i = b;
-        v(null), K(i), requestAnimationFrame(() => {
-          var n;
-          (n = V.current[i]) == null || n.focus();
-        });
-      };
-      return e.addEventListener("keydown", s), () => e.removeEventListener("keydown", s);
-    }, [b, v]), te(() => {
-      var e;
-      l && h.current && ((e = _.current) == null || e.focus()), h.current = !1;
-    }, [l]);
-    const Z = k === "end" ? "inline-start" : "inline-end", { separatorProps: X, isResizing: Y, isResized: G } = Ce({
-      edge: Z,
-      targetRef: _,
-      cssProperty: ae,
-      minSize: Pe,
-      maxSize: Me,
-      defaultSize: qe,
-      disabled: !T
-    }), J = X["aria-valuenow"];
-    te(() => {
-      var e;
-      !T || !G || !l || (e = _.current) == null || e.style.setProperty(
-        ae,
-        `${J}px`
-      );
-    }, [l, T, G, J]);
-    const q = m(g);
-    q.current = g;
-    const B = R(
-      () => ({
-        getActiveToolId: () => q.current,
-        setActiveTool: (e) => {
-          h.current = !1, v(e);
-        },
-        open: (e) => {
-          const s = a.find((t) => t.id === e);
-          !s || s.disabled || (h.current = !1, v(e));
-        },
-        close: () => {
-          const e = q.current;
-          h.current = !1, v(null), e != null && requestAnimationFrame(() => {
-            var s, t;
-            (t = (s = S.current) == null ? void 0 : s.querySelector(
-              `[data-tool-id="${CSS.escape(e)}"]`
-            )) == null || t.focus();
-          });
-        }
-      }),
-      [a, v]
-    );
-    ze(ue, () => B, [B]), Ve(de, B, o);
-    const we = p("toolRail.badgeCountOverflow", {
-      defaultValue: "99+"
-    });
-    return /* @__PURE__ */ D(
-      "div",
-      {
-        ref: S,
-        "data-component": le,
-        "data-component-id": o,
-        "data-side": k,
-        className: [Be({ side: k }), ce].filter(Boolean).join(" "),
-        children: [
-          $ ? /* @__PURE__ */ f("span", { role: "status", "aria-live": "polite", className: "ds:sr-only", children: be }) : null,
-          l ? /* @__PURE__ */ D(
-            "aside",
-            {
-              ref: _,
-              tabIndex: -1,
-              "aria-label": p("toolRail.panelLabel", {
-                tool: l.label,
-                defaultValue: "{{tool}} panel"
-              }),
-              "data-tool-rail-state": "expanded",
-              "data-active-tool": l.id,
-              "data-resizing": Y ? "" : void 0,
-              className: [
-                Ue(),
-                // 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]",
-                k === "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(l, { isActive: !0 }) : null,
-                l.header ? /* @__PURE__ */ f("div", { className: "ds:shrink-0", children: l.header }) : null,
-                l.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: l.panel })
-                ) : /* @__PURE__ */ f(
-                  De,
-                  {
-                    orientation: "vertical",
-                    className: "ds:flex-1 ds:min-h-0",
-                    children: l.panel
-                  }
-                ),
-                T ? /* @__PURE__ */ f(
-                  "div",
-                  {
-                    ...X,
-                    "aria-label": p("toolRail.resizePanel", {
-                      defaultValue: "Resize tool panel"
-                    }),
-                    "data-resizing": Y ? "" : void 0,
-                    className: He({ edge: Z })
-                  }
-                ) : null
-              ]
-            }
-          ) : null,
-          /* @__PURE__ */ f(Ee, { children: /* @__PURE__ */ f(
-            "div",
-            {
-              role: "toolbar",
-              "aria-orientation": "vertical",
-              "aria-label": oe ?? p("toolRail.railLabel", { defaultValue: "Tools" }),
-              className: Fe(),
-              onKeyDown: ye,
-              children: a.map((e, s) => {
-                const t = e.id === g, i = typeof e.badgeCount == "number" && e.badgeCount > 0, n = i ? p("toolRail.toolWithCount", {
-                  tool: e.label,
-                  count: e.badgeCount,
-                  defaultValue: "{{tool}}, {{count}} updates"
-                }) : e.label, c = $ && !!e.reorderable && !e.disabled, y = c ? `${ge}-${e.id}` : void 0;
-                return /* @__PURE__ */ D(_e, { children: [
-                  ve && s === H ? /* @__PURE__ */ f(
-                    "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__ */ D(
-                    "div",
-                    {
-                      className: Oe({
-                        dragging: I === s,
-                        dropTarget: O === s && I !== s,
-                        reorderable: c
-                      }),
-                      "data-dragging": I === s ? "" : void 0,
-                      draggable: c || void 0,
-                      onDragStart: c ? (r) => {
-                        P(s), r.dataTransfer.effectAllowed = "move", r.dataTransfer.setData(
-                          "text/plain",
-                          String(s)
-                        );
-                      } : void 0,
-                      onDragOver: c ? (r) => {
-                        I !== null && (r.preventDefault(), r.dataTransfer.dropEffect = "move", O !== s && A(s));
-                      } : void 0,
-                      onDragLeave: c ? () => A((r) => r === s ? null : r) : void 0,
-                      onDrop: c ? (r) => {
-                        r.preventDefault();
-                        const u = I;
-                        A(null), P(null), !(u === null || u === s) && W(u, s);
-                      } : void 0,
-                      onDragEnd: c ? () => {
-                        P(null), A(null);
-                      } : void 0,
-                      children: [
-                        /* @__PURE__ */ f(
-                          Se,
-                          {
-                            ref: (r) => {
-                              V.current[s] = r;
-                            },
-                            icon: e.icon,
-                            tooltip: e.label,
-                            "aria-label": n,
-                            intent: "ghost",
-                            size: "sm",
-                            disabled: e.disabled,
-                            "aria-pressed": t,
-                            "aria-expanded": t,
-                            "data-active": t ? e.id : void 0,
-                            "data-tool-id": e.id,
-                            "aria-describedby": y,
-                            "aria-keyshortcuts": c ? "Alt+ArrowUp Alt+ArrowDown" : void 0,
-                            tabIndex: s === x ? 0 : -1,
-                            onFocus: () => {
-                              e.disabled || K(s);
-                            },
-                            onClick: () => he(e.id, j.current),
-                            onKeyDown: (r) => {
-                              if (r.key === "Enter" || r.key === " ") {
-                                j.current = !0;
-                                return;
-                              }
-                              if (c && r.altKey && d) {
-                                let u = null;
-                                if (r.key === "ArrowUp" ? u = s - 1 : r.key === "ArrowDown" ? u = s + 1 : r.key === "Home" ? u = d.first : r.key === "End" && (u = d.last), u !== null) {
-                                  r.preventDefault();
-                                  const Ie = Math.max(
-                                    d.first,
-                                    Math.min(d.last, u)
-                                  ), xe = e.id;
-                                  W(s, Ie), requestAnimationFrame(() => {
-                                    var ee, se;
-                                    (se = (ee = S.current) == null ? void 0 : ee.querySelector(
-                                      `[data-tool-id="${CSS.escape(xe)}"]`
-                                    )) == null || se.focus();
-                                  });
-                                }
-                              }
-                            },
-                            onKeyUp: (r) => {
-                              (r.key === "Enter" || r.key === " ") && (j.current = !1);
-                            }
-                          }
-                        ),
-                        i ? /* @__PURE__ */ f("span", { "aria-hidden": "true", className: $e(), children: We(
-                          e.badgeCount,
-                          we
-                        ) }) : null,
-                        C == null ? void 0 : C(e, {
-                          index: s,
-                          isActive: t,
-                          isRovingTarget: s === x
-                        }),
-                        y ? /* @__PURE__ */ f("span", { id: y, className: "ds:sr-only", children: p("toolRail.reorderInstructions", {
-                          tool: e.label,
-                          defaultValue: "Reorder {{tool}}. Press Alt + Up or Alt + Down to move."
-                        }) }) : null
-                      ]
-                    }
-                  )
-                ] }, e.id);
-              })
-            }
-          ) })
-        ]
-      }
-    );
-  }
-);
-Ze.displayName = "ToolRail";
-export {
-  Ze as T,
-  Le as t
-};
-//# sourceMappingURL=tool-rail-8Scslq3X.js.map