@qijenchen/design-system 0.1.0-beta.144 → 0.1.0-beta.146

package/dist/components/AgentPanel/agent-panel.js

@@ -4,6 +4,7 @@ import * as CollapsiblePrimitive from "@radix-ui/react-collapsible";
 import { X, ChevronDown, Plus, ArrowUp, Copy, ThumbsUp, ThumbsDown, Pencil, Trash2, MessageSquare, createLucideIcon } from "lucide-react";
 import { cn } from "../../lib/utils.js";
 import { useOverlayCoexistence, CoexistenceMask } from "../../lib/overlay-coexistence.js";
+import { useCursorMover } from "../../hooks/use-input-modality.js";
 import { Button } from "../Button/button.js";
 import { ButtonDivider } from "../Button/button-group.js";
 import { ChromeHeader } from "../../patterns/header-canonical/chrome-header.js";
@@ -225,6 +226,7 @@ function HistoryRow({
   onRename,
   onDelete
 }) {
+  const cursorByKeyboard = useCursorMover() === "keyboard";
   return /* @__PURE__ */ jsx(
     CommandItem,
     {
@@ -242,23 +244,17 @@ function HistoryRow({
           className: "!bg-transparent hover:!bg-transparent",
           startContent: conversation.thinking ? /* @__PURE__ */ jsx(CircularProgress, { size: 16, "aria-label": "回覆中" }) : /* @__PURE__ */ jsx(MessageSquare, { size: 16, "aria-hidden": true, className: "text-fg-muted" }),
           endContent: (
-            // 行內動作恆在 DOM(鍵盤 Tab 可達);懸停/focus-visible 淡入=ItemSuffix hoverReveal SSOT。
-            /* MenuItem 的 endContent slot 內再包 ItemSuffix 只為 hoverReveal(opacity 淡入);兩層同盒
+            // 行內動作恆在 DOM;鍵盤用 → 進得去、不在 Tab 路上(B9,Command 的 routeCommandRowKeys 提供);
+            // 懸停/focus-visible 瞬間出現(不淡入,待辦總帳 L9)=ItemSuffix hoverReveal SSOT,鍵盤反白這一列時也浮出(cursorByKeyboard)。
+            /* MenuItem 的 endContent slot 內再包 ItemSuffix 只為 hoverReveal(opacity 0→1,瞬間);兩層同盒
                (h-[1lh] items-center ml-auto gap-2),不疊任何位移——非 drift(2026-09-02 覆核實測)。 */
-            /* @__PURE__ */ jsx(ItemSuffix, { hoverReveal: true, hoverGroup: "menu-item", children: /* @__PURE__ */ jsxs(
-              "span",
+            /* @__PURE__ */ jsx(
+              ItemSuffix,
               {
-                className: "contents",
-                onKeyDown: (e) => {
-                  var _a;
-                  const target = e.target;
-                  if ((e.key === "Enter" || e.key === " ") && target.closest("button")) {
-                    e.preventDefault();
-                    e.stopPropagation();
-                    (_a = target.closest("button")) == null ? void 0 : _a.click();
-                  }
-                },
-                children: [
+                hoverReveal: true,
+                hoverGroup: "menu-item",
+                className: cursorByKeyboard ? "group-data-[selected=true]/menu-item:opacity-100" : void 0,
+                children: /* @__PURE__ */ jsxs("span", { className: "contents", "data-history-row-actions": "", children: [
                   /* @__PURE__ */ jsx(
                     ItemInlineAction,
                     {
@@ -287,9 +283,9 @@ function HistoryRow({
                       }
                     }
                   )
-                ]
+                ] })
               }
-            ) })
+            )
           ),
           children: conversation.title
         }
@@ -721,8 +717,9 @@ const AgentToolbar = React.forwardRef(
       {
         ref,
         className: cn(
+          // 懸停/鍵盤聚焦時「出現」是滑過造成的變化 → 瞬間出現、不淡入(user 2026-09-26 對「全部瞬間」延伸(AI 的題目名)答「確定這樣才是一致設計語言就做」到所有滑過造成的變化;
+          // SSOT = tokens/motion/motion.spec.md「hover 回饋不做過渡」;待辦總帳 L9)。訊息進場的淡入是另一件事(內容出現),不在此。
           "mt-2 flex h-6 items-center gap-2",
-          "transition-opacity duration-[var(--motion-duration-overlay)] motion-reduce:transition-none",
           // 常駐(最後一則)= 在流內佔位,底部才能守 --layout-space-bottom;懸停顯示 = 絕對定位於輪距內,
           // 出現/消失完全不推擠版面(輪距 40 ≥ 8+24+8)。
           pinned ? "relative opacity-100" : "absolute left-0 top-full opacity-0 group-hover/agent-message:opacity-100 focus-within:opacity-100",
@@ -879,6 +876,8 @@ function initialAnswer(q) {
   return q.defaultValue ?? ((_a = q.options[0]) == null ? void 0 : _a.value) ?? "";
 }
 const splitMulti = (v) => v ? v.split(MULTI_JOIN).filter(Boolean) : [];
+const OPTION_RADIO_HOVER = "group-hover/agent-option:border-border-hover data-[state=checked]:group-hover/agent-option:border-primary-hover data-[state=checked]:group-hover/agent-option:text-primary-hover";
+const OPTION_CHECKBOX_HOVER = "group-hover/agent-option:border-border-hover data-[state=checked]:group-hover/agent-option:bg-primary-hover data-[state=checked]:group-hover/agent-option:border-primary-hover";
 const AgentDecisionCard = React.forwardRef(
   ({ questions, onSubmit, onSkip, className, ...props }, ref) => {
     var _a;
@@ -939,7 +938,7 @@ const AgentDecisionCard = React.forwardRef(
       var _a2;
       return (_a2 = document.getElementById(otherInputId)) == null ? void 0 : _a2.focus();
     }, 0);
-    const cardClass = "cursor-pointer rounded-md bg-secondary px-3 py-2";
+    const cardClass = "group/agent-option cursor-pointer rounded-md bg-secondary px-3 py-2";
     return /* @__PURE__ */ jsxs(
       "div",
       {
@@ -999,7 +998,8 @@ const AgentDecisionCard = React.forwardRef(
                               checked,
                               onCheckedChange: (next) => toggle(option.value, next === true),
                               onClick: (e) => e.stopPropagation(),
-                              "aria-controls": isOther ? otherInputId : void 0
+                              "aria-controls": isOther ? otherInputId : void 0,
+                              className: OPTION_CHECKBOX_HOVER
                             }
                           ),
                           label: optionLabel(option),
@@ -1046,7 +1046,8 @@ const AgentDecisionCard = React.forwardRef(
                               id: `${optionIdBase}-${option.value}`,
                               value: option.value,
                               size: "md",
-                              "aria-controls": isOther ? otherInputId : void 0
+                              "aria-controls": isOther ? otherInputId : void 0,
+                              className: OPTION_RADIO_HOVER
                             }
                           ),
                           label: optionLabel(option),