@orbit-work/ui 0.1.1 → 0.1.2

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

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

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

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

@@ -1,46 +0,0 @@
-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) {"))
-})