@orbit-work/ui 0.1.0

package/src/components/domain/chat/Composer/parts/ComposerMenu.stories.tsx

@@ -0,0 +1,266 @@
+import type { Meta, StoryObj } from "@storybook/react"
+import { Doc as Code, Branch as GitBranch, Terminal } from "../../../../composite/Icons"
+import { skillGlyph } from "../../../skills/SkillAvatarView"
+import { ComposerMenu } from "./ComposerMenu"
+import type { ComposerMenuGroup, ComposerMenuItem } from "./ComposerMenu"
+
+const meta = {
+  title: "Chat/ComposerMenu",
+  component: ComposerMenu,
+  decorators: [
+    (Story) => (
+      <div style={{ padding: 40, background: "var(--ow-bg)", maxWidth: 600 }}>
+        <Story />
+      </div>
+    ),
+  ],
+} satisfies Meta<typeof ComposerMenu>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+const mockGroups: ComposerMenuGroup[] = [
+  {
+    id: "recent",
+    label: "最近使用",
+    items: [
+      { id: "skill-1", label: "code-review", description: "代码审查", icon: <Code /> },
+      { id: "skill-2", label: "git-commit", description: "提交代码", icon: <GitBranch /> },
+      { id: "skill-3", label: "test", description: "运行测试", icon: <Terminal /> },
+    ],
+  },
+  {
+    id: "all",
+    label: "所有技能",
+    items: [
+      { id: "skill-4", label: "build", description: "构建项目" },
+      { id: "skill-5", label: "deploy", description: "部署应用" },
+      { id: "skill-6", label: "lint", description: "代码检查" },
+    ],
+  },
+]
+
+export const Default: Story = {
+  args: {
+    groups: mockGroups,
+    onSelect: (item) => console.log("Select:", item),
+  },
+}
+
+export const WithActive: Story = {
+  args: {
+    groups: mockGroups,
+    activeId: "skill-2",
+    onSelect: (item) => console.log("Select:", item),
+  },
+}
+
+export const WithSelected: Story = {
+  args: {
+    groups: [
+      {
+        id: "models",
+        label: "模型",
+        items: [
+          { id: "opus", label: "Claude Opus 5", description: "最强大的模型", selected: true },
+          { id: "sonnet", label: "Claude Sonnet 5", description: "平衡性能和速度" },
+          { id: "haiku", label: "Claude Haiku 4.5", description: "最快的模型" },
+        ],
+      },
+    ],
+    onSelect: (item) => console.log("Select:", item),
+  },
+}
+
+export const WithDisabled: Story = {
+  args: {
+    groups: [
+      {
+        id: "features",
+        label: "功能",
+        items: [
+          { id: "feat-1", label: "基础功能", description: "所有用户可用" },
+          {
+            id: "feat-2",
+            label: "高级功能",
+            description: "企业版功能",
+            disabled: true,
+            disabledReason: "需要升级到企业版",
+          },
+          { id: "feat-3", label: "实验功能", description: "实验阶段", disabled: true, disabledReason: "暂未开放" },
+        ],
+      },
+    ],
+    onSelect: (item) => console.log("Select:", item),
+  },
+}
+
+export const WithGroupActions: Story = {
+  args: {
+    groups: [
+      {
+        id: "favorites",
+        label: "收藏夹",
+        actions: [{ id: "manage", label: "管理" }],
+        items: [
+          { id: "fav-1", label: "deploy-prod", description: "生产部署" },
+          { id: "fav-2", label: "hotfix", description: "紧急修复" },
+        ],
+      },
+      {
+        id: "recent",
+        label: "最近使用",
+        actions: [{ id: "clear", label: "清空" }],
+        items: [{ id: "rec-1", label: "code-review", description: "代码审查" }],
+      },
+    ],
+    onSelect: (item) => console.log("Select:", item),
+    onGroupAction: (groupId, actionId) => console.log("Group action:", groupId, actionId),
+  },
+}
+
+export const WithHints: Story = {
+  args: {
+    groups: [
+      {
+        id: "shortcuts",
+        label: "快捷命令",
+        items: [
+          { id: "cmd-1", label: "review", description: "代码审查", hint: "⌘R" },
+          { id: "cmd-2", label: "commit", description: "提交代码", hint: "⌘K" },
+          { id: "cmd-3", label: "push", description: "推送更改", hint: "⌘P" },
+        ],
+      },
+    ],
+    onSelect: (item) => console.log("Select:", item),
+  },
+}
+
+export const WithAvatars: Story = {
+  args: {
+    groups: [
+      {
+        id: "agents",
+        label: "智能体",
+        items: [
+          {
+            id: "agent-1",
+            label: "代码助手",
+            description: "帮助编写和审查代码",
+            glyph: skillGlyph("agent-1", "代码助手"),
+          },
+          {
+            id: "agent-2",
+            label: "数据分析",
+            description: "分析和可视化数据",
+            glyph: skillGlyph("agent-2", "数据分析"),
+          },
+          {
+            id: "agent-3",
+            label: "文档助手",
+            description: "生成和整理文档",
+            glyph: skillGlyph("agent-3", "文档助手"),
+          },
+        ],
+      },
+    ],
+    onSelect: (item) => console.log("Select:", item),
+  },
+}
+
+export const EmptyGroup: Story = {
+  args: {
+    groups: [
+      {
+        id: "favorites",
+        label: "收藏夹",
+        items: [],
+        emptyLabel: "暂无收藏",
+      },
+      {
+        id: "all",
+        label: "所有技能",
+        items: [{ id: "skill-1", label: "code-review", description: "代码审查" }],
+      },
+    ],
+    onSelect: (item) => console.log("Select:", item),
+  },
+}
+
+export const AllEmpty: Story = {
+  args: {
+    groups: [
+      {
+        id: "group-1",
+        label: "分组 1",
+        items: [],
+      },
+    ],
+    emptyMessage: "未找到匹配的项目",
+    onSelect: (item) => console.log("Select:", item),
+  },
+}
+
+export const Overlay: Story = {
+  args: {
+    groups: mockGroups,
+    overlay: true,
+    onSelect: (item) => console.log("Select:", item),
+  },
+}
+
+export const LongList: Story = {
+  args: {
+    groups: [
+      {
+        id: "all",
+        label: "所有技能",
+        items: Array.from({ length: 20 }, (_, i) => ({
+          id: `skill-${i}`,
+          label: `skill-${i}`,
+          description: `技能 ${i} 的描述`,
+        })),
+      },
+    ],
+    onSelect: (item) => console.log("Select:", item),
+  },
+}
+
+export const MixedContent: Story = {
+  args: {
+    groups: [
+      {
+        id: "quick",
+        label: "快捷操作",
+        items: [
+          { id: "q1", label: "review", description: "代码审查", icon: <Code />, hint: "⌘R" },
+          { id: "q2", label: "commit", description: "提交代码", icon: <GitBranch />, hint: "⌘K", selected: true },
+        ],
+      },
+      {
+        id: "agents",
+        label: "智能体",
+        actions: [{ id: "new", label: "新建" }],
+        items: [
+          {
+            id: "a1",
+            label: "代码助手",
+            description: "帮助编写代码",
+            glyph: skillGlyph("a1", "代码助手"),
+          },
+          {
+            id: "a2",
+            label: "测试助手",
+            description: "生成测试用例",
+            glyph: skillGlyph("a2", "测试助手"),
+            disabled: true,
+            disabledReason: "暂未开放",
+          },
+        ],
+      },
+    ],
+    activeId: "q1",
+    onSelect: (item) => console.log("Select:", item),
+    onGroupAction: (groupId, actionId) => console.log("Group action:", groupId, actionId),
+  },
+}

package/src/components/domain/chat/Composer/parts/ComposerMenu.tsx

@@ -0,0 +1,232 @@
+import type { ReactNode, Ref } from "react"
+import { cn } from "../../../../../lib/utils"
+import { Check } from "../../../../composite/Icons"
+import { Button, EmptyState } from "../../../../primitives"
+import { type SkillAvatarGlyph, SkillAvatarView } from "../../../skills/SkillAvatarView"
+
+export type ComposerMenuItem = {
+  id: string
+  label: string
+  description?: string
+  hint?: string
+  icon?: ReactNode
+  avatar?: string
+  glyph?: SkillAvatarGlyph
+  selected?: boolean
+  disabled?: boolean
+  /** Visible reason explaining why the item cannot currently be selected. */
+  disabledReason?: string
+}
+
+export type ComposerMenuAction = {
+  id: string
+  label: string
+}
+
+export type ComposerMenuGroup<TItem extends ComposerMenuItem = ComposerMenuItem> = {
+  id: string
+  label: string
+  items: TItem[]
+  actions?: ComposerMenuAction[]
+  emptyLabel?: string
+}
+
+export type ComposerMenuProps<TItem extends ComposerMenuItem = ComposerMenuItem> = {
+  groups: ComposerMenuGroup<TItem>[]
+  activeId?: string
+  emptyMessage?: string
+  overlay?: boolean
+  className?: string
+  listRef?: Ref<HTMLDivElement>
+  onSelect?: (item: TItem) => void
+  onGroupAction?: (groupId: string, actionId: string) => void
+  renderLeading?: (item: TItem) => ReactNode
+}
+
+/**
+ * ComposerMenu —— Composer 浮层里的分组选择列（Composer 簇内部件）。
+ *
+ * 坐在 popover 面上，行 hover / press 一律走 -pop 档（§5：暗档全局 hover 档坐在
+ * popover 上对比≈1.0）。R3 中性件——不带信标元素。
+ *
+ * 两条不同的态，别混：
+ * - `item.selected`（**选中**）＝ 已选的那一项，只靠行尾的勾（`data-ow-part="check"`，
+ *   --ow-text）表示，不上底色——无彩选中口径。
+ * - `activeId`（**游标高亮**）＝ 键盘/指针当前落点的那一行，靠底色表示。它必须比
+ *   hover 更显眼，否则划过任一行都会把游标行盖过去：故走 --ow-press-pop
+ *   （两档皮肤下都比 --ow-hover-pop 深一档），并把该行的 hover 钉死在同色。
+ *   R2 复审前这里写的是 --ow-selected-bg（地面/面板档），暗档 #262932 比 hover-pop
+ *   #2E323C 还暗，游标态被 hover 反超。
+ */
+export function ComposerMenu<TItem extends ComposerMenuItem>({
+  groups,
+  activeId,
+  emptyMessage,
+  overlay = false,
+  className = "",
+  listRef,
+  onSelect,
+  onGroupAction,
+  renderLeading,
+}: ComposerMenuProps<TItem>) {
+  const leading = (item: TItem) => {
+    const custom = renderLeading?.(item)
+    if (custom !== undefined) return custom
+    if (item.icon)
+      return (
+        <span
+          data-ow-part="icon"
+          className="flex-[0_0_auto] w-5 h-5 inline-flex items-center justify-center text-ow-text-2"
+        >
+          {item.icon}
+        </span>
+      )
+    if (item.avatar || item.glyph) {
+      return (
+        <SkillAvatarView
+          src={item.avatar}
+          glyph={item.glyph ?? { label: item.label.charAt(0), tone: "neutral" }}
+          /* 菜单行头像固定 20×20（研发 754d2b4 意图）：不给 src 尺寸自流，裁剪不外溢。
+             形状/字号按 SkillAvatarView Sizes「菜单行 20 → R4 · 12px/600」（裁决 D-D）。 */
+          className="flex-[0_0_auto] w-5 h-5 inline-flex items-center justify-center overflow-hidden [border-radius:var(--ow-radius-2xs)] text-ow-fs-caption font-semibold"
+          data-ow-part="avatar"
+        />
+      )
+    }
+    return (
+      <span
+        data-ow-part="avatar"
+        /* 无头像无字形的占位：与上面 SkillAvatarView 同一档（20 / R4 / 12px·600），
+           否则同一列里正圆与方章、10px 与 12px 混排。 */
+        className="flex-[0_0_auto] w-5 h-5 [border-radius:var(--ow-radius-2xs)] bg-ow-surface-2 inline-flex items-center justify-center text-ow-text-2 font-semibold text-ow-fs-caption leading-none font-[family-name:var(--ow-font-sans)] uppercase"
+      >
+        {item.label.charAt(0)}
+      </span>
+    )
+  }
+
+  return (
+    <div
+      data-slot="composer-menu"
+      data-ow-state={overlay ? "overlay" : undefined}
+      className={cn(className)}
+      role="menu"
+      ref={listRef}
+    >
+      {groups.map((group) => (
+        <section data-ow-part="group" key={group.id}>
+          <div
+            data-ow-part="group-header"
+            // §8 眉标（中文档）：12px / +0.08em；uppercase 对中文无效，已去。
+            // R2 复审前是拉丁 11px 档 ＋ 一个 0.3 像素的裸字距（≈0.027em，不在任何档上）。
+            className="flex items-center justify-between py-1.5 px-3 text-ow-text-3 font-medium text-[length:var(--ow-fs-eyebrow-cjk,12px)] tracking-[var(--ow-ls-eyebrow-cjk,0.08em)] leading-[1.4] font-[family-name:var(--ow-font-sans)]"
+          >
+            <span>{group.label}</span>
+            {group.actions && group.actions.length > 0 && (
+              <span data-ow-part="group-actions" className="flex items-center gap-2">
+                {group.actions.map((action) => (
+                  <Button
+                    key={action.id}
+                    variant="ghost"
+                    size="sm"
+                    type="button"
+                    data-ow-part="group-action"
+                    className="text-[length:var(--ow-fs-eyebrow-cjk,12px)] tracking-[var(--ow-ls-eyebrow-cjk,0.08em)]"
+                    onMouseDown={(event) => {
+                      event.preventDefault()
+                      onGroupAction?.(group.id, action.id)
+                    }}
+                  >
+                    {action.label}
+                  </Button>
+                ))}
+              </span>
+            )}
+          </div>
+          {/* A5-B4：composer 的 @ 菜单是弹层，分组空态落 `variant="text"`（原型 L923：
+              一行 --ow-fs-ui text-2 灰字，无母题）。度量仍归原语，data-ow-part 钩子保留。 */}
+          {group.items.length === 0 && group.emptyLabel && (
+            <div data-ow-part="empty">
+              <EmptyState message={group.emptyLabel} variant="text" />
+            </div>
+          )}
+          {group.items.map((item) => {
+            const active = item.id === activeId
+            return (
+              <Button
+                key={item.id}
+                type="button"
+                role="menuitem"
+                data-ow-part="item"
+                data-ow-state={active ? "active" : undefined}
+                variant="unstyled"
+                className={cn(
+                  "w-full appearance-none border-0 bg-transparent flex items-center gap-2.5 py-2 px-3 text-left font-[family-name:var(--ow-font-sans)] transition-colors duration-[var(--ow-dur-1)] ease-[var(--ow-ease-beacon)] ow-focus-ring",
+                  "min-h-10 hover:bg-[var(--ow-hover-pop)] active:bg-[var(--ow-press-pop)]",
+                  active && "bg-[var(--ow-press-pop)] hover:bg-[var(--ow-press-pop)]",
+                  item.disabled && "cursor-not-allowed text-[color:var(--ow-disabled-text)]",
+                )}
+                data-active={active}
+                disabled={item.disabled}
+                title={item.disabledReason}
+                onMouseDown={(event) => {
+                  event.preventDefault()
+                  if (!item.disabled) onSelect?.(item)
+                }}
+              >
+                {leading(item)}
+                <span data-ow-part="meta" className="flex-1 min-w-0 flex flex-col gap-0.5">
+                  <span
+                    data-ow-part="name"
+                    className="text-ow-text font-medium text-ow-fs-ui leading-[1.4] font-[family-name:var(--ow-font-sans)] overflow-hidden text-ellipsis whitespace-nowrap"
+                  >
+                    {item.label}
+                  </span>
+                  {item.disabledReason ? (
+                    <span
+                      data-ow-part="disabled-reason"
+                      className="text-ow-error font-normal text-ow-fs-eyebrow leading-[1.4] font-[family-name:var(--ow-font-sans)] overflow-hidden text-ellipsis whitespace-nowrap"
+                    >
+                      {item.disabledReason}
+                    </span>
+                  ) : (
+                    item.description && (
+                      <span
+                        data-ow-part="description"
+                        className="text-ow-text-3 font-normal text-ow-fs-eyebrow leading-[1.4] font-[family-name:var(--ow-font-sans)] overflow-hidden text-ellipsis whitespace-nowrap"
+                      >
+                        {item.description}
+                      </span>
+                    )
+                  )}
+                </span>
+                {item.hint && (
+                  <span
+                    data-ow-part="hint"
+                    className="flex-[0_0_auto] text-ow-text-3 font-normal text-ow-fs-eyebrow leading-[1.4] font-[family-name:var(--ow-font-sans)] ml-auto"
+                  >
+                    {item.hint}
+                  </span>
+                )}
+                {item.selected && (
+                  <span
+                    data-ow-part="check"
+                    className="flex-[0_0_auto] w-4 h-4 inline-flex items-center justify-center text-[color:var(--ow-text)]"
+                    aria-label="已选中"
+                  >
+                    <Check />
+                  </span>
+                )}
+              </Button>
+            )
+          })}
+        </section>
+      ))}
+      {groups.every((group) => group.items.length === 0) && emptyMessage && (
+        <div data-ow-part="empty">
+          <EmptyState message={emptyMessage} variant="text" />
+        </div>
+      )}
+    </div>
+  )
+}

package/src/components/domain/chat/Composer/parts/ComposerMenuPopover.stories.tsx

@@ -0,0 +1,166 @@
+import type { Meta, StoryObj } from "@storybook/react"
+import { useState } from "react"
+import type { ComposerMenuGroup, ComposerMenuItem } from "./ComposerMenu"
+import { ComposerMenuPopover } from "./ComposerMenuPopover"
+
+const meta = {
+  title: "Chat/ComposerMenuPopover",
+  component: ComposerMenuPopover,
+  parameters: {
+    layout: "fullscreen",
+  },
+} satisfies Meta<typeof ComposerMenuPopover>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+const mockGroups: ComposerMenuGroup[] = [
+  {
+    id: "recent",
+    label: "最近使用",
+    items: [
+      { id: "skill-1", label: "code-review", description: "代码审查" },
+      { id: "skill-2", label: "git-commit", description: "提交代码" },
+      { id: "skill-3", label: "test", description: "运行测试" },
+    ],
+  },
+  {
+    id: "all",
+    label: "所有技能",
+    items: [
+      { id: "skill-4", label: "build", description: "构建项目" },
+      { id: "skill-5", label: "deploy", description: "部署应用" },
+      { id: "skill-6", label: "lint", description: "代码检查" },
+    ],
+  },
+]
+
+const mockAnchorRect = new DOMRect(100, 400, 500, 40)
+
+export const Default: Story = {
+  render: () => (
+    <div style={{ height: "100vh", padding: 40, background: "var(--ow-bg)" }}>
+      <div style={{ marginTop: 300 }}>输入框锚点位置</div>
+      <ComposerMenuPopover
+        open={true}
+        groups={mockGroups}
+        anchorRect={mockAnchorRect}
+        onSelect={(item) => console.log("Select:", item)}
+        onClose={() => console.log("Close")}
+      />
+    </div>
+  ),
+}
+
+export const WithActiveItem: Story = {
+  render: () => (
+    <div style={{ height: "100vh", padding: 40, background: "var(--ow-bg)" }}>
+      <div style={{ marginTop: 300 }}>输入框锚点位置</div>
+      <ComposerMenuPopover
+        open={true}
+        groups={mockGroups}
+        activeId="skill-2"
+        anchorRect={mockAnchorRect}
+        onSelect={(item) => console.log("Select:", item)}
+        onClose={() => console.log("Close")}
+      />
+    </div>
+  ),
+}
+
+export const Empty: Story = {
+  render: () => (
+    <div style={{ height: "100vh", padding: 40, background: "var(--ow-bg)" }}>
+      <div style={{ marginTop: 300 }}>输入框锚点位置</div>
+      <ComposerMenuPopover
+        open={true}
+        groups={[]}
+        anchorRect={mockAnchorRect}
+        emptyMessage="未找到匹配的技能"
+        onSelect={(item) => console.log("Select:", item)}
+        onClose={() => console.log("Close")}
+      />
+    </div>
+  ),
+}
+
+export const WithGroupAction: Story = {
+  render: () => (
+    <div style={{ height: "100vh", padding: 40, background: "var(--ow-bg)" }}>
+      <div style={{ marginTop: 300 }}>输入框锚点位置</div>
+      <ComposerMenuPopover
+        open={true}
+        groups={[
+          {
+            id: "favorites",
+            label: "收藏夹",
+            actions: [{ id: "manage", label: "管理" }],
+            items: [
+              { id: "fav-1", label: "deploy-prod", description: "生产部署" },
+              { id: "fav-2", label: "hotfix", description: "紧急修复" },
+            ],
+          },
+        ]}
+        anchorRect={mockAnchorRect}
+        onSelect={(item) => console.log("Select:", item)}
+        onClose={() => console.log("Close")}
+        onGroupAction={(groupId, actionId) => console.log("Group action:", groupId, actionId)}
+      />
+    </div>
+  ),
+}
+
+export const Interactive: StoryObj<typeof ComposerMenuPopover> = {
+  render: () => {
+    const [open, setOpen] = useState(true)
+    const [activeId, setActiveId] = useState<string>()
+
+    return (
+      <div style={{ height: "100vh", padding: 40, background: "var(--ow-bg)" }}>
+        <button onClick={() => setOpen(!open)}>{open ? "关闭" : "打开"} 菜单</button>
+        <div style={{ marginTop: 300 }}>输入框锚点位置</div>
+        <ComposerMenuPopover
+          open={open}
+          groups={mockGroups}
+          activeId={activeId}
+          anchorRect={mockAnchorRect}
+          onSelect={(item) => {
+            console.log("Select:", item)
+            setOpen(false)
+          }}
+          onClose={() => setOpen(false)}
+        />
+      </div>
+    )
+  },
+}
+
+export const WideAnchor: Story = {
+  render: () => (
+    <div style={{ height: "100vh", padding: 40, background: "var(--ow-bg)" }}>
+      <div style={{ marginTop: 300 }}>宽输入框锚点位置</div>
+      <ComposerMenuPopover
+        open={true}
+        groups={mockGroups}
+        anchorRect={new DOMRect(50, 400, 800, 40)}
+        onSelect={(item) => console.log("Select:", item)}
+        onClose={() => console.log("Close")}
+      />
+    </div>
+  ),
+}
+
+export const NearEdge: Story = {
+  render: () => (
+    <div style={{ height: "100vh", padding: 40, background: "var(--ow-bg)" }}>
+      <div style={{ marginTop: 300 }}>靠近右边缘的锚点</div>
+      <ComposerMenuPopover
+        open={true}
+        groups={mockGroups}
+        anchorRect={new DOMRect(window.innerWidth - 200, 400, 500, 40)}
+        onSelect={(item) => console.log("Select:", item)}
+        onClose={() => console.log("Close")}
+      />
+    </div>
+  ),
+}