@alfadocs/ui-kit 0.46.0 → 0.48.0

package/dist/_chunks/ai-tools-rail-CxYG04cw.js

@@ -0,0 +1,280 @@
+import { jsxs as j, jsx as f } from "react/jsx-runtime";
+import { forwardRef as M, useRef as v, useState as O, useMemo as k, useCallback as D, useEffect as G, useImperativeHandle as J } from "react";
+import { c as b } from "./index-D2ZczOXr.js";
+import { useTranslation as Q } from "react-i18next";
+import { I as X } from "./icon-button-CKEOrN37.js";
+import { S as Y } from "./scroll-area-BWqCkEGz.js";
+import { a as Z } from "./tooltip-DvmfrNvB.js";
+import { u as $ } from "./use-controllable-state-BiY4xTzM.js";
+import { u as ee } from "./use-isomorphic-layout-effect-BGfaCOP1.js";
+import { u as ae } from "./registry-nPAVE19X.js";
+const te = {
+  id: "ai-tools-rail",
+  capabilities: ["open", "close", "select_single"],
+  state: {
+    activeToolId: {
+      type: "string | null",
+      descriptionKey: "ui.aiToolsRail.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: (n) => n.getActiveToolId()
+    }
+  },
+  actions: {
+    open: {
+      safety: "read",
+      argsType: "{ id: string }",
+      descriptionKey: "ui.aiToolsRail.agent.actions.open",
+      description: "Open the given tool's panel.",
+      invoke: (n, a) => {
+        n.open(a.id);
+      }
+    },
+    close: {
+      safety: "read",
+      descriptionKey: "ui.aiToolsRail.agent.actions.close",
+      description: "Collapse the rail to its strip (no active tool).",
+      invoke: (n) => {
+        n.close();
+      }
+    },
+    select_tool: {
+      safety: "read",
+      argsType: "{ id: string | null }",
+      descriptionKey: "ui.aiToolsRail.agent.actions.selectTool",
+      description: "Set the active tool by id (opens its panel), or pass null to collapse.",
+      invoke: (n, a) => {
+        n.setActiveTool(a.id);
+      }
+    }
+  },
+  domHooks: {
+    root: {
+      attr: "data-component",
+      value: "ai-tools-rail",
+      description: "Marks the AiToolsRail 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."
+    }
+  }
+}, se = "ds:[inline-size:3rem]", ne = "ds:[inline-size:22rem]", ie = b(
+  ["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.
+        end: "ds:flex-row ds:shadow-[var(--shadow-chrome-start)]",
+        // Strip docks inline-start; the panel mounts inline-end of it.
+        start: "ds:flex-row-reverse ds:shadow-[var(--shadow-chrome-end)]"
+      }
+    },
+    defaultVariants: { side: "end" }
+  }
+), oe = b(
+  [
+    "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)]",
+    se
+  ].join(" ")
+), re = b(
+  [
+    "ds:flex ds:min-h-0 ds:flex-col ds:h-full",
+    "ds:bg-[var(--background)]",
+    ne
+  ].join(" ")
+), le = b(
+  [
+    "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(" ")
+);
+function de(n, a) {
+  return n > 99 ? a : String(n);
+}
+const ce = M(
+  ({
+    id: n,
+    tools: a,
+    activeToolId: S,
+    defaultActiveToolId: L = null,
+    onActiveToolChange: B,
+    side: R = "end",
+    railLabel: H,
+    className: z
+  }, _) => {
+    var E;
+    const { t: m } = Q(), [F, l] = $({
+      value: S,
+      defaultValue: L,
+      onChange: B
+    }), d = F ?? null, h = v([]), I = v(null), [y, x] = O(0), u = v(!1), T = v(!1), c = k(
+      () => a.findIndex((e) => e.id === d),
+      [a, d]
+    ), p = c >= 0 ? a[c] : null, P = k(
+      () => a.findIndex((e) => !e.disabled),
+      [a]
+    ), g = c >= 0 ? c : y >= 0 && !((E = a[y]) != null && E.disabled) ? y : P, U = D(
+      (e, t) => {
+        const s = a.find((r) => r.id === e);
+        !s || s.disabled || (u.current = t, l(d === e ? null : e));
+      },
+      [a, d, l]
+    ), W = D(
+      (e) => {
+        var K, N, V;
+        const t = a.length;
+        if (t === 0) return;
+        let s = null;
+        if (e.key === "ArrowDown" ? s = (g + 1) % t : e.key === "ArrowUp" ? s = (g - 1 + t) % t : e.key === "Home" ? s = 0 : e.key === "End" && (s = t - 1), s === null) return;
+        const r = e.key === "ArrowUp" || e.key === "End";
+        let i = s, o = 0;
+        for (; o < t && ((K = a[i]) != null && K.disabled); )
+          i = r ? (i - 1 + t) % t : (i + 1) % t, o += 1;
+        (N = a[i]) != null && N.disabled || (e.preventDefault(), x(i), (V = h.current[i]) == null || V.focus());
+      },
+      [a, g]
+    ), A = v(null);
+    G(() => {
+      const e = A.current;
+      if (!e) return;
+      const t = (s) => {
+        if (s.key !== "Escape" || c < 0) return;
+        s.preventDefault();
+        const r = c;
+        l(null), x(r), requestAnimationFrame(() => {
+          var i;
+          (i = h.current[r]) == null || i.focus();
+        });
+      };
+      return e.addEventListener("keydown", t), () => e.removeEventListener("keydown", t);
+    }, [c, l]), ee(() => {
+      var e;
+      p && u.current && ((e = I.current) == null || e.focus()), u.current = !1;
+    }, [p]);
+    const C = v(d);
+    C.current = d;
+    const w = k(
+      () => ({
+        getActiveToolId: () => C.current,
+        setActiveTool: (e) => {
+          u.current = !1, l(e);
+        },
+        open: (e) => {
+          const t = a.find((s) => s.id === e);
+          !t || t.disabled || (u.current = !1, l(e));
+        },
+        close: () => {
+          u.current = !1, l(null);
+        }
+      }),
+      [a, l]
+    );
+    J(_, () => w, [w]), ae(te, w, n);
+    const q = m("aiToolsRail.badgeCountOverflow", {
+      defaultValue: "99+"
+    });
+    return /* @__PURE__ */ j(
+      "div",
+      {
+        ref: A,
+        "data-component": "ai-tools-rail",
+        "data-component-id": n,
+        "data-side": R,
+        className: [ie({ side: R }), z].filter(Boolean).join(" "),
+        children: [
+          p ? /* @__PURE__ */ f(
+            "aside",
+            {
+              ref: I,
+              tabIndex: -1,
+              "aria-label": m("aiToolsRail.panelLabel", {
+                tool: p.label,
+                defaultValue: "{{tool}} panel"
+              }),
+              "data-ai-tools-rail-state": "expanded",
+              "data-active-tool": p.id,
+              className: [re(), "ds:focus-visible:outline-none"].join(
+                " "
+              ),
+              children: /* @__PURE__ */ f(Y, { orientation: "vertical", className: "ds:flex-1 ds:min-h-0", children: p.panel })
+            }
+          ) : null,
+          /* @__PURE__ */ f(Z, { children: /* @__PURE__ */ f(
+            "div",
+            {
+              role: "toolbar",
+              "aria-orientation": "vertical",
+              "aria-label": H ?? m("aiToolsRail.railLabel", { defaultValue: "AI tools" }),
+              className: oe(),
+              onKeyDown: W,
+              children: a.map((e, t) => {
+                const s = e.id === d, r = typeof e.badgeCount == "number" && e.badgeCount > 0, i = r ? m("aiToolsRail.toolWithCount", {
+                  tool: e.label,
+                  count: e.badgeCount,
+                  defaultValue: "{{tool}}, {{count}} updates"
+                }) : e.label;
+                return /* @__PURE__ */ j("div", { className: "ds:relative", children: [
+                  /* @__PURE__ */ f(
+                    X,
+                    {
+                      ref: (o) => {
+                        h.current[t] = o;
+                      },
+                      icon: e.icon,
+                      tooltip: e.label,
+                      "aria-label": i,
+                      intent: "ghost",
+                      size: "sm",
+                      disabled: e.disabled,
+                      "aria-pressed": s,
+                      "aria-expanded": s,
+                      "data-active": s ? e.id : void 0,
+                      "data-tool-id": e.id,
+                      tabIndex: t === g ? 0 : -1,
+                      onFocus: () => {
+                        e.disabled || x(t);
+                      },
+                      onClick: () => U(e.id, T.current),
+                      onKeyDown: (o) => {
+                        (o.key === "Enter" || o.key === " ") && (T.current = !0);
+                      },
+                      onKeyUp: (o) => {
+                        (o.key === "Enter" || o.key === " ") && (T.current = !1);
+                      }
+                    }
+                  ),
+                  r ? /* @__PURE__ */ f("span", { "aria-hidden": "true", className: le(), children: de(
+                    e.badgeCount,
+                    q
+                  ) }) : null
+                ] }, e.id);
+              })
+            }
+          ) })
+        ]
+      }
+    );
+  }
+);
+ce.displayName = "AiToolsRail";
+export {
+  ce as A,
+  te as a
+};
+//# sourceMappingURL=ai-tools-rail-CxYG04cw.js.map