@orbit-work/ui 0.1.1 → 0.1.2

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

@@ -1,266 +0,0 @@
-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

@@ -1,232 +0,0 @@
-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

@@ -1,166 +0,0 @@
-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>
-  ),
-}