@orbit-work/ui 0.1.2-preview.0 → 0.1.2

package/src/components/domain/skills/SkillImportDialogView/index.tsx

@@ -1,147 +0,0 @@
-"use client"
-
-import { cn } from "../../../../lib/utils"
-import { Dialog } from "../../../composite/Dialog"
-import { Folder, Paperclip, Skill } from "../../../composite/Icons"
-import { Button } from "../../../primitives"
-import { EmptyState } from "../../../primitives/EmptyState"
-
-/**
- * SkillImportDialogView / SkillImportResultDialogView —— 技能导入两幕。
- *
- * 立面全部落在 `Dialog` 基座上（§5：`--ow-scrim` 遮罩 + `--ow-shadow-modal` + 1px 边框，
- * 圆角 `--ow-radius-modal`，z 取 `--ow-z-modal`；Escape 关闭、Tab 焦点圈闭环）——
- * 原先这里自造 modal-host（`bg-ow-bg-overlay` + `backdrop-blur`、`rounded-2xl`、
- * `shadow-ow-shadow-3`、`bg-ow-primary/10` 透明度调色）已整体退役。
- * 结果列表的读数（成功/失败/跳过计数）走 mono + tabular-nums（§7）；
- * 三种结果状态 R1 双编码——色是第二编码，「成功/失败/跳过」文字与形位各占一样。
- * R3 中性件——不带信标元素。
- */
-
-export type SkillImportItemStatus = "success" | "failed" | "skipped"
-
-export interface SkillImportResultItemView {
-  sourceName: string
-  name?: string
-  status: SkillImportItemStatus
-  reason?: string
-}
-
-export interface SkillImportDialogViewProps {
-  onClose: () => void
-  onInstallArchive: () => void
-  onInstallDirectory: () => void
-}
-
-export interface SkillImportResultDialogViewProps {
-  summary: { success: number; failed: number; skipped: number }
-  items: SkillImportResultItemView[]
-  onClose: () => void
-}
-
-/** 读数位：mono + tabular-nums。 */
-function Reading({ value }: { value: number }) {
-  return (
-    <span className="font-[family-name:var(--ow-font-mono)] tabular-nums text-[color:var(--ow-text-2)]">{value}</span>
-  )
-}
-
-export function SkillImportDialogView(props: SkillImportDialogViewProps): React.ReactElement {
-  return (
-    <Dialog
-      open
-      width={520}
-      icon={<Skill />}
-      iconTone="info"
-      title="导入技能"
-      subtitle="支持 .zip、.tar.gz 和 .tgz 技能包，或批量扫描本地文件夹。"
-      onClose={props.onClose}
-      actions={null}
-    >
-      <EmptyState
-        markSize={36}
-        message="技能根目录必须包含 SKILL.md；选择文件夹时会批量导入其中的技能。"
-        action={
-          <div className="flex items-center gap-3">
-            <Button variant="secondary" icon={<Paperclip />} onClick={props.onInstallArchive}>
-              选择压缩包
-            </Button>
-            <Button variant="secondary" icon={<Folder />} onClick={props.onInstallDirectory}>
-              选择文件夹
-            </Button>
-          </div>
-        }
-      />
-    </Dialog>
-  )
-}
-
-export function SkillImportResultDialogView(props: SkillImportResultDialogViewProps): React.ReactElement {
-  return (
-    <Dialog
-      open
-      width={520}
-      icon={<Skill />}
-      iconTone="info"
-      title="导入结果"
-      subtitle={
-        <>
-          成功 <Reading value={props.summary.success} /> 个，失败 <Reading value={props.summary.failed} /> 个，跳过{" "}
-          <Reading value={props.summary.skipped} /> 个
-        </>
-      }
-      onClose={props.onClose}
-      actions={
-        <Button variant="primary" onClick={props.onClose}>
-          完成
-        </Button>
-      }
-    >
-      <div
-        data-ow-part="result-list"
-        className="max-h-96 overflow-y-auto flex flex-col gap-2 [border-radius:var(--ow-radius-card)]"
-      >
-        {props.items.map((item, index) => (
-          <div
-            key={`${item.sourceName}-${index}`}
-            data-ow-part="result-item"
-            data-ow-state={item.status}
-            className="flex flex-col gap-1 p-3 bg-ow-surface-2 [border-radius:var(--ow-radius-control)]"
-          >
-            <span
-              data-ow-part="status"
-              className={cn(
-                "text-ow-fs-caption font-semibold leading-[1.3] font-[family-name:var(--ow-font-sans)]",
-                item.status === "success" && "text-[color:var(--ow-success-on-tint)]",
-                item.status === "failed" && "text-[color:var(--ow-error-on-tint)]",
-                item.status === "skipped" && "text-ow-text-3",
-              )}
-            >
-              {skillImportStatusLabel(item.status)}
-            </span>
-            <span
-              data-ow-part="name"
-              className="text-ow-text font-medium text-ow-fs-body leading-[1.4] font-[family-name:var(--ow-font-sans)]"
-            >
-              {item.name ?? item.sourceName}
-            </span>
-            {item.reason && (
-              <span
-                data-ow-part="reason"
-                className="text-ow-text-3 font-normal text-ow-fs-ui leading-[1.4] font-[family-name:var(--ow-font-mono)] break-all line-clamp-2"
-              >
-                {item.reason}
-              </span>
-            )}
-          </div>
-        ))}
-      </div>
-    </Dialog>
-  )
-}
-
-function skillImportStatusLabel(status: SkillImportItemStatus): string {
-  if (status === "success") return "成功"
-  if (status === "failed") return "失败"
-  return "跳过"
-}

package/src/components/domain/skills/ToolDetailModalView/ToolDetailModalView.stories.tsx

@@ -1,160 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react"
-import { Doc, Search } from "../../../composite/Icons"
-import { ToolDetailModalView } from "./index"
-
-const meta = {
-  title: "Skills/ToolDetailModalView",
-  component: ToolDetailModalView,
-  parameters: {
-    layout: "fullscreen",
-  },
-  tags: ["autodocs"],
-} satisfies Meta<typeof ToolDetailModalView>
-
-export default meta
-type Story = StoryObj<typeof meta>
-
-const sampleInput = (
-  <div style={{ fontSize: 13, fontFamily: "var(--ow-font-mono)", padding: 12 }}>
-    <div style={{ marginBottom: 8, color: "var(--ow-text-3)" }}>file_path:</div>
-    <div style={{ marginBottom: 12, color: "var(--ow-text)" }}>src/components/Button.tsx</div>
-    <div style={{ marginBottom: 8, color: "var(--ow-text-3)" }}>limit:</div>
-    <div style={{ color: "var(--ow-text)" }}>100</div>
-  </div>
-)
-
-const sampleOutput = (
-  <pre style={{ margin: 0, fontSize: 12, fontFamily: "var(--ow-font-mono)", padding: 12, whiteSpace: "pre-wrap" }}>
-    {`export function Button({ children, ...props }) {
-  return (
-    <button className="btn" {...props}>
-      {children}
-    </button>
-  )
-}`}
-  </pre>
-)
-
-export const Running: Story = {
-  args: {
-    icon: <Doc />,
-    label: "Read",
-    preview: "src/components/Button.tsx",
-    status: "running",
-    input: sampleInput,
-    onClose: () => console.log("close"),
-  },
-}
-
-export const Success: Story = {
-  args: {
-    icon: <Doc />,
-    label: "Read",
-    preview: "src/components/Button.tsx",
-    status: "success",
-    input: sampleInput,
-    output: sampleOutput,
-    onClose: () => console.log("close"),
-  },
-}
-
-export const Error: Story = {
-  args: {
-    icon: <Doc />,
-    label: "Write",
-    preview: "config.json",
-    status: "error",
-    input: (
-      <div style={{ fontSize: 13, padding: 12 }}>
-        <div style={{ marginBottom: 8, color: "var(--ow-text-3)" }}>content:</div>
-        <div style={{ color: "var(--ow-text)" }}>{'{ "debug": true }'}</div>
-      </div>
-    ),
-    output: <div style={{ padding: 12, color: "var(--ow-error)" }}>Error: Permission denied</div>,
-    onClose: () => console.log("close"),
-  },
-}
-
-export const WithArtifacts: Story = {
-  args: {
-    icon: <Search />,
-    label: "WebFetch",
-    preview: "https://example.com",
-    status: "success",
-    input: (
-      <div style={{ fontSize: 13, padding: 12 }}>
-        <div style={{ marginBottom: 8, color: "var(--ow-text-3)" }}>url:</div>
-        <div style={{ color: "var(--ow-text)" }}>https://example.com</div>
-      </div>
-    ),
-    output: (
-      <div style={{ padding: 12 }}>
-        <div style={{ marginBottom: 8, fontWeight: 600 }}>页面内容摘要</div>
-        <div style={{ fontSize: 13, color: "var(--ow-text-2)" }}>这是一个示例页面的内容摘要...</div>
-      </div>
-    ),
-    artifacts: [
-      {
-        id: "1",
-        type: "image",
-        url: "https://via.placeholder.com/300x200",
-        name: "screenshot.png",
-        mimeType: "image/png",
-      },
-      {
-        id: "2",
-        type: "image",
-        url: "https://via.placeholder.com/300x200/ff0000",
-        name: "logo.jpg",
-        ref: "logo-ref",
-        mimeType: "image/jpeg",
-      },
-    ],
-    onClose: () => console.log("close"),
-  },
-}
-
-export const NoInput: Story = {
-  args: {
-    icon: <Doc />,
-    label: "Execute",
-    status: "success",
-    output: (
-      <pre style={{ margin: 0, fontSize: 12, fontFamily: "var(--ow-font-mono)", padding: 12 }}>
-        Task completed successfully.
-      </pre>
-    ),
-    onClose: () => console.log("close"),
-  },
-}
-
-export const NoOutput: Story = {
-  args: {
-    icon: <Doc />,
-    label: "Initialize",
-    status: "success",
-    input: (
-      <div style={{ fontSize: 13, padding: 12 }}>
-        <div style={{ marginBottom: 8, color: "var(--ow-text-3)" }}>project_name:</div>
-        <div style={{ color: "var(--ow-text)" }}>my-app</div>
-      </div>
-    ),
-    onClose: () => console.log("close"),
-  },
-}
-
-export const LongPreview: Story = {
-  args: {
-    icon: <Doc />,
-    label: "Bash",
-    preview: 'find . -name "*.tsx" -type f | xargs grep -l "useState" | wc -l',
-    status: "success",
-    input: (
-      <div style={{ fontSize: 13, padding: 12, fontFamily: "var(--ow-font-mono)" }}>
-        find . -name "*.tsx" -type f | xargs grep -l "useState" | wc -l
-      </div>
-    ),
-    output: <pre style={{ margin: 0, fontSize: 12, fontFamily: "var(--ow-font-mono)", padding: 12 }}>42</pre>,
-    onClose: () => console.log("close"),
-  },
-}

package/src/components/domain/skills/ToolDetailModalView/ToolDetailModalViewSource.test.mjs

@@ -1,99 +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("./index.tsx", import.meta.url), "utf8")
-const css = await readFile(new URL("../../../../../styles/desktop-surfaces.css", import.meta.url), "utf8")
-
-/** 只看 .artifact 产物卡这一段，别把整份样式表都算进来。
- *  段尾原来锚在 `.prod-list {` 上，A9-B3 把产物列表族撤了（归口 chat/ArtifactCard），
- *  改锚它后面第一条活规则 `.token-plan-card {`；锚点丢失时 indexOf 会给 -1、
- *  slice 一路吃到文件尾，断言就变成对整份样式表生效，所以这里显式校验锚点存在。 */
-const artifactCssEnd = css.indexOf(".token-plan-card {")
-assert.ok(artifactCssEnd > 0, "产物卡段尾锚点 .token-plan-card 不见了，请更新锚点")
-const artifactCss = css.slice(css.indexOf(".artifact {"), artifactCssEnd)
-
-test("W3-4 R1：产物类型章不再是蓝实底——中性井底 + 中性字，类型由 mono 字标说", () => {
-  const gly = artifactCss.match(/\.artifact__cap \.gly \{[^}]*\}/)
-  assert.ok(gly, "找不到 .artifact__cap .gly 规则")
-  assert.match(gly[0], /background: var\(--ow-surface-2\)/)
-  assert.match(gly[0], /color: var\(--ow-text\)/)
-  // 功能色实底 / on-fill 白字全部退役
-  assert.doesNotMatch(gly[0], /--ow-(info|success|warning|error)(-fill)?\)/)
-  assert.doesNotMatch(gly[0], /--ow-on-fill/)
-  // mono 字标仍在，IMG/VID 是类型的文字编码
-  assert.match(gly[0], /var\(--ow-font-mono\)/)
-  assert.ok(source.includes('{artifact.type === "image" ? "IMG" : "VID"}'))
-})
-
-test("R1 双编码：模态状态走 Chip 的点色 + 文字，运行中另加小转子形差", () => {
-  assert.ok(source.includes("dot={STATUS_TONE[status]}"))
-  assert.ok(source.includes("label={STATUS_LABELS[status]}"))
-  assert.ok(source.includes('{ running: "运行中", error: "失败", success: "完成" }'))
-  // W-R2：转子本体收到 primitives/Spinner（§9 唯一转子帧），本件只消费
-  assert.ok(source.includes('status === "running" ? <Spinner size="sm" /> : undefined'))
-})
-
-test("R2/R3：模态与产物卡两段都不落荧黄", () => {
-  assert.doesNotMatch(source, /--ow-beacon|--ow-accent-dot|--ow-data-today/)
-  assert.doesNotMatch(artifactCss, /--ow-beacon|--ow-accent-dot|--ow-data-today/)
-})
-
-// ── W5 残留清扫：产物卡收敛到「一张卡骨架」＋ 递减短迹签名 ──
-
-test("§7 度量：产物类型章 26 → 28（章位度量表）", () => {
-  const gly = artifactCss.match(/\.artifact__cap \.gly \{[^}]*\}/)?.[0] ?? ""
-  assert.match(gly, /width: 28px; height: 28px;/)
-  assert.doesNotMatch(gly, /26px/)
-})
-
-test("判断表「卡片：五套骨架 → 一张骨架」：产物卡走 14 内距 / 8 字段槽 / 1px 边 / 零影", () => {
-  const card = artifactCss.match(/^\.artifact \{[^}]*padding: 14px;[^}]*\}/m)?.[0] ?? ""
-  assert.match(card, /padding: 14px;/)
-  assert.match(card, /gap: var\(--ow-space-2, 8px\);/)
-  assert.match(card, /border: var\(--ow-border-width-thin, 1px\) solid var\(--ow-border\);/)
-  assert.match(card, /border-radius: var\(--ow-radius-card\);/)
-  assert.match(card, /background: var\(--ow-surface\);/)
-  assert.doesNotMatch(artifactCss, /box-shadow/)
-  // 大图不再当卡面：降为卡内一个字段，自带 1px 立边与 radius-sm
-  const img = artifactCss.match(/^\.artifact__img \{[^}]*\}/m)?.[0] ?? ""
-  assert.doesNotMatch(img, /aspect-ratio: 4 \/ 5;/)
-  assert.match(img, /border-radius: var\(--ow-radius-sm\);/)
-  // 底部 cap 条那根分隔线随之退场（卡内层次靠 8 槽，不靠线）
-  const cap = artifactCss.match(/^\.artifact__cap \{[^}]*\}/m)?.[0] ?? ""
-  assert.doesNotMatch(cap, /border-top/)
-})
-
-test("递减短迹＝交付物统一签名：两个消费方都挂 ArtifactTrail（几何取锁定件，不重画）", async () => {
-  const toolCall = await readFile(new URL("../../desktop/DesktopToolCallView/index.tsx", import.meta.url), "utf8")
-  for (const [name, text] of [
-    ["ToolDetailModalView", source],
-    ["DesktopToolCallView", toolCall],
-  ]) {
-    assert.match(text, /import \{ ArtifactTrail \} from "\.\.\/\.\.\/chat\/ArtifactCard"/, `${name} 要引锁定件的短迹`)
-    assert.match(text, /className=\{`artifact artifact--\$\{artifact\.type\}`\}[\s\S]*?<ArtifactTrail \/>/, name)
-  }
-})
-
-// ── R2 修补 ──
-
-// 既定态：页签只有底线式一套（Tabs 的 variant 保留 @deprecated 兼容）。
-// 本处是全仓唯一一处生产代码还在传 segmented（其余都在 Tabs.stories 的废弃演示里）。
-test('页签不再传废弃的 variant="segmented"', () => {
-  assert.doesNotMatch(source, /variant="segmented"/)
-})
-
-// 同一套「壳 ＋ 底线式页签」骨架只留一条横线，且交给页签行（Tabs 的基线由容器给）。
-test("横线只有一条：head 不再自画 border-bottom，基线交给 body 的 border-top", () => {
-  const head = css.match(/\.tool-modal__head \{[^}]*\}/)
-  assert.ok(head, "找不到 .tool-modal__head 规则")
-  assert.doesNotMatch(head[0], /border-bottom/)
-  assert.match(css, /\.tool-modal__body,\s*\.md-modal__body \{[^}]*border-top:/s)
-})
-
-// 图标当 children 传会落进 Button 的 label 槽拿不到尺寸（0×0），这里只是恰好有一条
-// 局部 svg 尺寸规则兜住——同一写法在有/无局部 CSS 的两处后果不同，属脆弱模式。
-test("关闭钮图标走 Button 的 icon 槽", () => {
-  assert.match(source, /icon=\{<Close \/>\}/)
-  assert.doesNotMatch(source, /className="tool-modal__x"[\s\S]{0,120}>\s*<Close \/>/)
-})

package/src/components/domain/skills/ToolDetailModalView/index.tsx

@@ -1,160 +0,0 @@
-"use client"
-
-import { type ReactNode, useState } from "react"
-import { Dialog } from "../../../composite/Dialog"
-import { Close } from "../../../composite/Icons"
-import { Button, EmptyState } from "../../../primitives"
-import { Chip, type ChipDotTone } from "../../../primitives/Chip"
-import { Spinner } from "../../../primitives/Spinner"
-import { Tabs } from "../../../primitives/Tabs"
-import { ArtifactTrail } from "../../chat/ArtifactCard"
-
-/**
- * ToolDetailModalView —— 工具调用详情模态。
- *
- * 立面落在 `Dialog` 基座的裸壳档（bare）上：`--ow-scrim` 遮罩 + `--ow-shadow-modal`
- * + 1px 边框 + `--ow-radius-modal`(16)，z 取 `--ow-z-modal`，Escape 关闭、Tab 焦点圈闭环
- * （原先自造的 `.ow-modal-host` + `.tool-modal` 立面与自造关闭钮已退役）。
- * 状态走 `Chip` 胶囊：R1 双编码——点色是第二编码，「运行中/完成/失败」文字与状态点
- * 形差（运行中另加 <20px 小转子）各占一样；不引荧黄、不占极（R2/R3）。
- * 工具名与产物 MIME 是读数，一律 mono。
- * W3-4：产物类型章（.artifact__cap .gly 的 IMG/VID）原为 --ow-info-fill 蓝实底 + 白字，
- * 蓝色不表达任何状态、只是装饰，却抢走卡内唯一的彩色权重；已归位中性章
- * （--ow-surface-2 井底 + --ow-text 字），类型仍由 mono 字标明说。
- */
-export type ToolDetailStatus = "running" | "error" | "success"
-
-export interface ToolArtifactView {
-  id: string
-  type: string
-  url: string
-  name?: string
-  ref?: string
-  mimeType?: string
-}
-
-export interface ToolDetailModalViewProps {
-  icon: ReactNode
-  label: string
-  preview?: string | null
-  status: ToolDetailStatus
-  input?: ReactNode
-  output?: ReactNode
-  artifacts?: ToolArtifactView[]
-  onClose: () => void
-}
-
-const STATUS_LABELS: Record<ToolDetailStatus, string> = { running: "运行中", error: "失败", success: "完成" }
-/** 运行中＝neutral（--ow-progress-fill，§4 让形口径：状态极不落在中性件上）。 */
-const STATUS_TONE: Record<ToolDetailStatus, ChipDotTone> = {
-  running: "neutral",
-  error: "error",
-  success: "success",
-}
-
-export function ToolDetailModalView({
-  icon,
-  label,
-  preview,
-  status,
-  input,
-  output,
-  artifacts = [],
-  onClose,
-}: ToolDetailModalViewProps): React.ReactElement {
-  const hasInput = input != null
-  const hasOutput = output != null || artifacts.length > 0
-  const [tab, setTab] = useState<"input" | "output">(hasInput ? "input" : "output")
-  return (
-    /* W3 终验：视图自带页头关闭钮，关掉 Dialog 基座的默认关闭钮，避免双关闭钮 + 顶部空带。 */
-    <Dialog
-      open
-      width="min(760px, 92vw)"
-      padded={false}
-      closable={false}
-      onClose={onClose}
-      ariaLabel={`工具详情 ${label}`}
-    >
-      <div className="tool-modal">
-        <div className="tool-modal__head">
-          <span className="tool-modal__icon">{icon}</span>
-          <div className="tool-modal__title">
-            <div className="tool-modal__name">{label}</div>
-            {preview && <div className="tool-modal__preview">{preview}</div>}
-          </div>
-          <Chip
-            className="tool-modal__status"
-            dot={STATUS_TONE[status]}
-            icon={status === "running" ? <Spinner size="sm" /> : undefined}
-            label={STATUS_LABELS[status]}
-          />
-          {/* 图标走 Button 的 icon 槽（icon-only 由原语补 16 尺寸与 28 方）。原来当 children 传，
-              只因 desktop-surfaces.css 恰好有一条 .tool-modal__x svg 尺寸规则才没渲成 0×0
-              ——同一写法在有/无局部 CSS 的两处后果不同，属脆弱模式。 */}
-          <Button
-            variant="ghost"
-            size="sm"
-            className="tool-modal__x"
-            onClick={onClose}
-            aria-label="关闭"
-            icon={<Close />}
-          />
-        </div>
-        <Tabs
-          items={[
-            { key: "input", label: "输入", disabled: !hasInput },
-            { key: "output", label: "输出", disabled: !hasOutput },
-          ]}
-          activeKey={tab}
-          onChange={(key) => setTab(key as "input" | "output")}
-          size="sm"
-        />
-        <div className="tool-modal__body">
-          {/* W3 终验 G5：两处空态走 EmptyState 紧凑档（弹层内），.tool-modal__empty 灰字规则退役。 */}
-          {tab === "input" && (input ?? <EmptyState size="sm" message="无输入参数" />)}
-          {tab === "output" &&
-            (hasOutput ? (
-              <>
-                {output}
-                <ToolArtifacts artifacts={artifacts} />
-              </>
-            ) : (
-              <EmptyState size="sm" message="无输出内容" />
-            ))}
-        </div>
-      </div>
-    </Dialog>
-  )
-}
-
-function ToolArtifacts({ artifacts }: { artifacts: ToolArtifactView[] }): React.ReactElement | null {
-  if (artifacts.length === 0) return null
-  return (
-    <div className="tool-artifacts">
-      {artifacts.map((artifact) => (
-        <a
-          key={artifact.id}
-          className={`artifact artifact--${artifact.type}`}
-          href={artifact.url}
-          target="_blank"
-          rel="noreferrer"
-        >
-          {/* 递减短迹＝Orbitwork 交付物的统一签名（锁定件 chat/ArtifactCard 的 ArtifactTrail，
-              4 颗 6/5/4/3px、色 --ow-text-3、不占荧黄配额、无常驻动画）。 */}
-          <ArtifactTrail />
-          {artifact.type === "image" ? (
-            <img className="artifact__img" src={artifact.url} alt="" />
-          ) : (
-            <div className="artifact__img artifact__img--empty" />
-          )}
-          <div className="artifact__cap">
-            <span className="gly">{artifact.type === "image" ? "IMG" : "VID"}</span>
-            <span className="nm">{artifact.name || artifact.ref}</span>
-            <span className="by">{artifact.mimeType}</span>
-            <span className="open">打开</span>
-          </div>
-        </a>
-      ))}
-    </div>
-  )
-}

package/src/components/domain/skills/index.ts

@@ -1,7 +0,0 @@
-export * from "./McpServerListView/index"
-export * from "./SkillAvatarView/index"
-export * from "./SkillCardView/index"
-export * from "./SkillDetailPanelView/index"
-export * from "./SkillDetailView/index"
-export * from "./SkillImportDialogView/index"
-export * from "./ToolDetailModalView/index"