@orbit-work/ui 0.1.0

package/src/components/domain/chat/Composer/parts/ComposerPopoverSource.test.mjs

@@ -0,0 +1,71 @@
+import assert from "node:assert/strict"
+import { readFile } from "node:fs/promises"
+import test from "node:test"
+
+const source = await readFile(new URL("./ComposerPopover.tsx", import.meta.url), "utf8")
+const stories = await readFile(new URL("./ComposerPopover.stories.tsx", import.meta.url), "utf8")
+const surfaces = await readFile(new URL("../../../../../../styles/desktop-surfaces.css", import.meta.url), "utf8")
+
+test("弹层立面由组件自带：基类 cpop 恒在，调用方类去重后接在后面（§5）", () => {
+  assert.match(source, /const classes = \[\s*\n\s*"cpop",/)
+  assert.match(source, /token !== "cpop" && token !== "cpop--portal"/)
+  assert.match(source, /className=\{classes\}/)
+  // 立面本体在共享 CSS 的 .cpop 段：popover 面 + 1px 边 + pop 影 + 菜单档圆角
+  const cpop = surfaces.slice(surfaces.indexOf("\n.cpop {"), surfaces.indexOf("\n.cpop .ow-dropdown"))
+  assert.match(cpop, /background: var\(--ow-popover-bg\)/)
+  assert.match(cpop, /solid var\(--ow-border\)/)
+  assert.match(cpop, /box-shadow: var\(--ow-shadow-pop\)/)
+  assert.match(cpop, /border-radius: var\(--ow-radius-menu\)/)
+})
+
+test("入场动效按 §9：纯透明度、时长走档位 token、缓动只用 --ow-ease-beacon（禁缩放/位移）", () => {
+  const cpop = surfaces.slice(surfaces.indexOf("\n.cpop {"), surfaces.indexOf(".cpop--left"))
+  assert.match(cpop, /animation: cpop-portal-in var\(--ow-dur-2\) var\(--ow-ease-beacon\)/)
+  assert.doesNotMatch(cpop, /animation: pop-in/)
+  assert.doesNotMatch(cpop, /transform-origin/)
+  assert.match(surfaces, /@keyframes cpop-portal-in \{ from \{ opacity: 0; \} to \{ opacity: 1; \} \}/)
+})
+
+test("story 的自定义立面只取 DS2 档位，无裸阴影/裸圆角/V1 token", () => {
+  // 只看代码，注释里记着的旧值不算（去掉块注释与行注释）
+  const code = stories.replace(/\/\*[\s\S]*?\*\//g, "").replace(/^\s*\/\/.*$/gm, "")
+  assert.doesNotMatch(code, /rgba\(/)
+  assert.doesNotMatch(code, /var\(--bg-|var\(--border-primary\)/)
+  assert.match(stories, /boxShadow: "var\(--ow-shadow-pop\)"/)
+  assert.match(stories, /borderRadius: "var\(--ow-radius-menu\)"/)
+})
+
+test("z 梯度走 token，不手写数值（§5）", () => {
+  assert.match(source, /zIndex: "var\(--ow-z-popover\)"/)
+  assert.doesNotMatch(source, /zIndex: \d/)
+})
+
+/* ── R2 复审批 ───────────────────────────────────────────────── */
+
+// §9：200ms 是「弹层与主题切换」档。ComposerPopover 恒挂 cpop--portal，portal 分支原走
+// --ow-dur-1(120ms)，于是同一枚弹层在内联用法与本组件下两种入场时长。
+test("R2 §9：cpop 与 cpop--portal 入场同档 --ow-dur-2", () => {
+  assert.match(surfaces, /\.cpop \{[^}]*animation: cpop-portal-in var\(--ow-dur-2\) var\(--ow-ease-beacon\);/)
+  assert.match(
+    surfaces,
+    /\.cpop\.cpop--portal \{ animation: cpop-portal-in var\(--ow-dur-2\) var\(--ow-ease-beacon\); \}/,
+  )
+})
+
+// §8 中文文案；§7 字阶。原来十条 story 一律裸 <h3>+<p> 配裸 padding，字号差是浏览器默认值。
+test("R2 fixture：弹层演示内容走 DS2 字阶与中文，不留裸标题/正文与英文 Lorem", () => {
+  assert.doesNotMatch(stories, /Lorem ipsum/i)
+  assert.doesNotMatch(stories, /<h3>/)
+  assert.match(stories, /fontSize: "var\(--ow-fs-ui\)"/)
+  assert.match(stories, /fontSize: "var\(--ow-fs-body-sm\)"/)
+  assert.match(stories, /padding: "var\(--ow-space-3, 12px\)"/)
+})
+
+// §6 交互件必做清单：弹层里的菜单行有现成基座（.cpop .mi 高 32 · hover/press 走 -pop 档 ·
+// focus-visible 走焦点环三件套），story 不再手搓无状态的裸 <button>。
+test("R2 fixture：WithList 用 .cpop .mi 基座，不手搓裸 button 行", () => {
+  assert.match(stories, /className="cpop__scroll"/)
+  assert.match(stories, /className="mi"/)
+  assert.doesNotMatch(stories, /border: "none",\s*\n\s*background: "transparent",/)
+  assert.match(surfaces, /\.cpop \.mi \{[^}]*height: 32px;/)
+})

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

@@ -0,0 +1,260 @@
+import type { Meta, StoryObj } from "@storybook/react"
+import { useState } from "react"
+import { ComposerProjectPicker } from "./ComposerProjectPicker"
+import type { ComposerProjectOption } from "./ComposerProjectPicker"
+
+const meta = {
+  title: "Chat/ComposerProjectPicker",
+  component: ComposerProjectPicker,
+  decorators: [
+    (Story) => (
+      <div style={{ padding: 40, background: "var(--ow-bg)", minHeight: 400 }}>
+        <Story />
+      </div>
+    ),
+  ],
+} satisfies Meta<typeof ComposerProjectPicker>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+const mockOptions: ComposerProjectOption[] = [
+  {
+    id: "proj-1",
+    name: "orbit-fe",
+    label: "orbit-fe",
+    description: "前端项目",
+  },
+  {
+    id: "proj-2",
+    name: "backend",
+    label: "backend",
+    description: "后端服务",
+  },
+  {
+    id: "proj-3",
+    name: "docs",
+    label: "docs",
+    description: "文档站点",
+  },
+]
+
+export const Default: Story = {
+  render: () => {
+    const [value, setValue] = useState("proj-1")
+    return (
+      <ComposerProjectPicker
+        value={value}
+        options={mockOptions}
+        onChange={(option) => {
+          console.log("Change:", option)
+          setValue(option.id)
+        }}
+      />
+    )
+  },
+}
+
+export const WithCreate: Story = {
+  render: () => {
+    const [value, setValue] = useState("proj-1")
+    const [options, setOptions] = useState(mockOptions)
+
+    return (
+      <ComposerProjectPicker
+        value={value}
+        options={options}
+        onChange={(option) => {
+          console.log("Change:", option)
+          setValue(option.id)
+        }}
+        onCreate={(name) => {
+          console.log("Create:", name)
+          const newOption = {
+            id: `proj-${Date.now()}`,
+            name,
+            label: name,
+            description: "新项目",
+          }
+          setOptions([...options, newOption])
+          setValue(newOption.id)
+        }}
+      />
+    )
+  },
+}
+
+export const SingleOption: Story = {
+  render: () => (
+    <ComposerProjectPicker
+      value="proj-1"
+      options={[mockOptions[0]!]}
+      onChange={(option) => console.log("Change:", option)}
+    />
+  ),
+}
+
+export const ManyOptions: Story = {
+  render: () => {
+    const [value, setValue] = useState("proj-1")
+    const manyOptions = Array.from({ length: 10 }, (_, i) => ({
+      id: `proj-${i + 1}`,
+      name: `project-${i + 1}`,
+      label: `项目 ${i + 1}`,
+      description: `项目 ${i + 1} 的描述`,
+    }))
+
+    return (
+      <ComposerProjectPicker
+        value={value}
+        options={manyOptions}
+        onChange={(option) => {
+          console.log("Change:", option)
+          setValue(option.id)
+        }}
+      />
+    )
+  },
+}
+
+export const LongNames: Story = {
+  render: () => {
+    const [value, setValue] = useState("proj-1")
+    const longOptions = [
+      {
+        id: "proj-1",
+        name: "very-long-project-name-that-might-overflow",
+        label: "very-long-project-name-that-might-overflow",
+        description: "这是一个名称很长的项目",
+      },
+      {
+        id: "proj-2",
+        name: "another-project-with-a-long-description",
+        label: "another-project-with-a-long-description",
+        description: "这个项目的描述也非常长，用于测试 UI 如何处理长文本内容",
+      },
+    ]
+
+    return (
+      <ComposerProjectPicker
+        value={value}
+        options={longOptions}
+        onChange={(option) => {
+          console.log("Change:", option)
+          setValue(option.id)
+        }}
+      />
+    )
+  },
+}
+
+export const CustomLabels: Story = {
+  render: () => {
+    const [value, setValue] = useState("proj-1")
+    return (
+      <ComposerProjectPicker
+        value={value}
+        options={mockOptions}
+        onChange={(option) => {
+          console.log("Change:", option)
+          setValue(option.id)
+        }}
+        onCreate={(name) => console.log("Create:", name)}
+        selectTitle="切换项目"
+        menuLabel="保存任务到"
+        createLabel="创建新项目"
+        createDescription="输入项目名称并按 Enter"
+      />
+    )
+  },
+}
+
+export const NoCreate: Story = {
+  render: () => {
+    const [value, setValue] = useState("proj-1")
+    return (
+      <ComposerProjectPicker
+        value={value}
+        options={mockOptions}
+        onChange={(option) => {
+          console.log("Change:", option)
+          setValue(option.id)
+        }}
+      />
+    )
+  },
+}
+
+export const WithCreateError: Story = {
+  render: () => {
+    const [value, setValue] = useState("proj-1")
+    return (
+      <ComposerProjectPicker
+        value={value}
+        options={mockOptions}
+        onChange={(option) => {
+          console.log("Change:", option)
+          setValue(option.id)
+        }}
+        onCreate={async (name) => {
+          console.log("Create:", name)
+          await new Promise((resolve) => setTimeout(resolve, 500))
+          throw new Error("项目名称已存在")
+        }}
+      />
+    )
+  },
+}
+
+export const WithAsyncCreate: Story = {
+  render: () => {
+    const [value, setValue] = useState("proj-1")
+    const [options, setOptions] = useState(mockOptions)
+
+    return (
+      <ComposerProjectPicker
+        value={value}
+        options={options}
+        onChange={(option) => {
+          console.log("Change:", option)
+          setValue(option.id)
+        }}
+        onCreate={async (name) => {
+          console.log("Create:", name)
+          await new Promise((resolve) => setTimeout(resolve, 1500))
+          const newOption = {
+            id: `proj-${Date.now()}`,
+            name,
+            label: name,
+            description: "新项目",
+          }
+          setOptions([...options, newOption])
+          setValue(newOption.id)
+        }}
+      />
+    )
+  },
+}
+
+export const NoDescriptions: Story = {
+  render: () => {
+    const [value, setValue] = useState("proj-1")
+    const simpleOptions = mockOptions.map(({ id, name, label }) => ({
+      id,
+      name,
+      label,
+    }))
+
+    return (
+      <ComposerProjectPicker
+        value={value}
+        options={simpleOptions}
+        onChange={(option) => {
+          console.log("Change:", option)
+          setValue(option.id)
+        }}
+        onCreate={(name) => console.log("Create:", name)}
+      />
+    )
+  },
+}

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

@@ -0,0 +1,246 @@
+"use client"
+
+import { type ReactElement, type ReactNode, useState } from "react"
+import { useImeAwareEnter } from "../../../../../hooks/useImeAwareEnter"
+import { cn } from "../../../../../lib/utils"
+import { ChevDown, Folder, Plus } from "../../../../composite/Icons"
+import { Button, Field } from "../../../../primitives"
+import { MenuSurface } from "../../../../primitives/Menu"
+
+export type ComposerProjectOption = {
+  id: string
+  name: string
+  label: ReactNode
+  description?: ReactNode
+}
+
+export type ComposerProjectPickerProps = {
+  value: string
+  options: readonly ComposerProjectOption[]
+  onChange: (option: ComposerProjectOption) => void | Promise<void>
+  onCreate?: (name: string) => void | Promise<void>
+  onOpen?: () => void | Promise<void>
+  selectTitle?: string
+  menuLabel?: string
+  createLabel?: string
+  createDescription?: string
+}
+
+/** 「新增项目」这一条不是业务项目，用一个不会与项目 id 撞车的保留键。 */
+const CREATE_KEY = "__composer-project-create__"
+
+/**
+ * ComposerProjectPicker —— Composer 页脚的项目选择（Composer 簇内部件）。
+ *
+ * 菜单面走 `MenuSurface`：立面（popover 面 ＋ pop 影 ＋ 1px 边 ＋ 菜单档圆角）、
+ * 条目 -pop 档 hover、勾选、键盘导航都由原语承担；本件只留触发器、开合，以及
+ * 「就地新建项目」这段业务流（Enter 建、Esc 取消、失败留在原位报错）。
+ * 业务持久化仍在调用方。
+ */
+export function ComposerProjectPicker({
+  value,
+  options,
+  onChange,
+  onCreate,
+  onOpen,
+  selectTitle = "选择当前任务所属项目",
+  menuLabel = "新任务保存到",
+  createLabel = "新增项目",
+  createDescription = "输入名称后立即创建",
+}: ComposerProjectPickerProps): ReactElement | null {
+  const [open, setOpen] = useState(false)
+  const [creating, setCreating] = useState(false)
+  const [createName, setCreateName] = useState("")
+  const [createPending, setCreatePending] = useState(false)
+  const [createError, setCreateError] = useState<string | null>(null)
+  const { isImeEnter, onCompositionEnd, onCompositionStart } = useImeAwareEnter()
+  const activeOption = options.find((option) => option.id === value) ?? options[0]
+  const canCreate = createName.trim() !== "" && !createPending
+
+  if (!activeOption) return null
+
+  const closeMenu = () => {
+    setOpen(false)
+    setCreating(false)
+    setCreateName("")
+    setCreateError(null)
+  }
+
+  const toggleOpen = () => {
+    if (open && createPending) return
+    const nextOpen = !open
+    if (nextOpen) setOpen(true)
+    else closeMenu()
+    if (nextOpen) void onOpen?.()
+  }
+
+  const selectOption = async (option: ComposerProjectOption) => {
+    await onChange(option)
+    closeMenu()
+  }
+
+  const createOption = async () => {
+    const name = createName.trim()
+    if (!name || createPending || !onCreate) return
+
+    setCreatePending(true)
+    setCreateError(null)
+    try {
+      await onCreate(name)
+      closeMenu()
+    } catch (cause) {
+      setCreateError(cause instanceof Error ? cause.message : "创建项目失败，请重试")
+    } finally {
+      setCreatePending(false)
+    }
+  }
+
+  const items = [
+    ...options.map((option) => ({
+      key: option.id,
+      label: option.label,
+      searchText: option.name,
+      description: typeof option.description === "string" ? option.description : undefined,
+      icon: <Folder />,
+      selected: option.id === activeOption.id,
+      disabled: createPending,
+    })),
+    ...(onCreate && !creating
+      ? [
+          {
+            key: CREATE_KEY,
+            label: createLabel,
+            description: createDescription,
+            icon: <Plus />,
+            disabled: createPending,
+          },
+        ]
+      : []),
+  ]
+
+  return (
+    <div data-slot="composer-project" className="relative inline-flex">
+      <Button
+        variant="ghost"
+        size="sm"
+        data-ow-part="button"
+        data-ow-state={open ? "open" : undefined}
+        className="max-w-full data-[ow-state=open]:bg-[var(--ow-btn-ghost-press)]"
+        type="button"
+        onClick={toggleOpen}
+        title={selectTitle}
+        aria-haspopup="menu"
+        aria-expanded={open}
+        icon={<Folder />}
+      >
+        <span data-ow-part="name" className="min-w-0 overflow-hidden text-ellipsis whitespace-nowrap">
+          {activeOption.label}
+        </span>
+        <ChevDown
+          data-ow-part="chevron"
+          className={cn(
+            "transition-transform duration-[var(--ow-dur-1)] ease-[var(--ow-ease-beacon)]",
+            open && "rotate-180",
+          )}
+        />
+      </Button>
+      {open && (
+        <>
+          <Button
+            variant="unstyled"
+            data-ow-part="backdrop"
+            className="fixed inset-0 z-[calc(var(--ow-z-popover)-1)] bg-transparent cursor-default focus-visible:outline-none"
+            aria-label="关闭项目选择"
+            onClick={() => {
+              if (!createPending) closeMenu()
+            }}
+          />
+          <div data-ow-part="menu" className="absolute bottom-[calc(100%+8px)] left-0 z-[var(--ow-z-popover)]">
+            <MenuSurface
+              width={288}
+              header={menuLabel}
+              ariaLabel="选择新任务项目"
+              autoAdjust
+              items={items}
+              onSelect={(key) => {
+                if (key === CREATE_KEY) {
+                  setCreating(true)
+                  return
+                }
+                const option = options.find((candidate) => candidate.id === key)
+                if (option) void selectOption(option)
+              }}
+              footer={
+                creating ? (
+                  <div data-ow-part="create" className="flex flex-col gap-2 p-1" role="none">
+                    <div data-ow-part="create-row" className="flex items-center gap-2">
+                      <Field
+                        autoFocus
+                        data-ow-part="create-input"
+                        value={createName}
+                        placeholder="输入项目名称"
+                        aria-label="项目名称"
+                        aria-invalid={Boolean(createError)}
+                        aria-describedby={
+                          createError ? "composer-project-create-error" : "composer-project-create-hint"
+                        }
+                        disabled={createPending}
+                        onChange={setCreateName}
+                        onCompositionStart={onCompositionStart}
+                        onCompositionEnd={onCompositionEnd}
+                        onKeyDown={(event) => {
+                          if (isImeEnter(event)) return
+                          if (event.key === "Enter") {
+                            event.preventDefault()
+                            void createOption()
+                          }
+                          if (event.key === "Escape") {
+                            event.stopPropagation()
+                            setCreating(false)
+                            setCreateName("")
+                            setCreateError(null)
+                          }
+                        }}
+                      />
+                      <Button
+                        variant="primary"
+                        size="sm"
+                        type="button"
+                        data-ow-part="create-submit"
+                        loading={createPending}
+                        disabled={!canCreate}
+                        onClick={() => {
+                          void createOption()
+                        }}
+                      >
+                        创建
+                      </Button>
+                    </div>
+                    {createError ? (
+                      <div
+                        id="composer-project-create-error"
+                        data-ow-part="create-error"
+                        className="text-[color:var(--ow-error)] font-normal text-ow-fs-eyebrow leading-[1.4]"
+                        role="alert"
+                      >
+                        {createError}
+                      </div>
+                    ) : (
+                      <div
+                        id="composer-project-create-hint"
+                        data-ow-part="create-hint"
+                        className="text-[color:var(--ow-text-3)] font-normal text-ow-fs-eyebrow leading-[1.4]"
+                      >
+                        按 Enter 创建，Esc 取消
+                      </div>
+                    )}
+                  </div>
+                ) : undefined
+              }
+            />
+          </div>
+        </>
+      )}
+    </div>
+  )
+}

package/src/components/domain/chat/Composer/parts/ComposerProjectPickerSource.test.mjs

@@ -0,0 +1,46 @@
+import assert from "node:assert/strict"
+import { readFile } from "node:fs/promises"
+import test from "node:test"
+
+const source = await readFile(new URL("./ComposerProjectPicker.tsx", import.meta.url), "utf8")
+
+test("composer project picker owns its menu and creation presentation", () => {
+  assert.ok(source.includes("export type ComposerProjectPickerProps = {"))
+  assert.ok(source.includes("onChange: (option: ComposerProjectOption)"))
+  assert.ok(source.includes("onOpen?: () => void | Promise<void>"))
+  // DS 2.0 批次③：菜单面并入 primitives/Menu 的 MenuSurface，条目语义（menuitemcheckbox）、
+  // 勾选、-pop 档 hover、键盘导航都由原语出，本件不再自绘条目。
+  assert.ok(source.includes("<MenuSurface"))
+  assert.match(source, /import \{ MenuSurface \} from ['"](?:\.\.\/)+primitives\/Menu['"]/)
+  assert.ok(source.includes("selected: option.id === activeOption.id"))
+  assert.ok(source.includes('data-ow-part="create-input"'))
+  assert.ok(source.includes('placeholder="输入项目名称"'))
+  assert.ok(source.includes('event.key === "Enter"'))
+  assert.ok(source.includes('event.key === "Escape"'))
+  assert.ok(source.includes("isImeEnter(event)"))
+  assert.ok(source.includes('role="alert"'))
+  assert.ok(source.includes("const closeMenu = () =>"))
+  assert.ok(source.includes("await onChange(option)\n    closeMenu()"))
+  assert.ok(source.includes("await onCreate(name)"))
+  assert.ok(source.includes("disabled={createPending}"))
+  assert.ok(source.includes("if (!createPending) closeMenu()"))
+  assert.ok(source.includes("if (open && createPending) return"))
+})
+
+test("composer project picker keeps the desktop visual contract in ow-ui", () => {
+  assert.ok(source.includes('data-ow-part="button"'))
+  assert.ok(source.includes('data-ow-part="menu"'))
+  assert.ok(source.includes("bottom-[calc(100%+8px)]"))
+  assert.ok(source.includes("z-[var(--ow-z-popover)]"))
+  assert.ok(source.includes('data-ow-part="create-input"'))
+  assert.ok(source.includes("text-[color:var(--ow-error)]"))
+  // 遮罩紧贴弹层档之下，不再手写 z 数值（§5 z 梯度）。
+  assert.ok(source.includes("z-[calc(var(--ow-z-popover)-1)]"))
+})
+
+test("composer project picker keeps the create row inside the menu footer", () => {
+  assert.ok(source.includes("footer={"))
+  assert.ok(source.includes("creating ? ("))
+  assert.ok(source.includes("const CREATE_KEY ="))
+  assert.ok(source.includes("if (key === CREATE_KEY) {"))
+})