@orbit-work/ui 0.1.0

package/src/components/domain/files/FileBrowser/index.tsx

@@ -0,0 +1,221 @@
+"use client"
+
+import { Fragment } from "react"
+import { cn } from "../../../../lib/utils"
+import type { FileBrowserProps } from "../../../../types/file-browser"
+import { PanelFold } from "../../../composite/Icons"
+import { Button, Field } from "../../../primitives"
+import { FileTree } from "../FileTree"
+
+/**
+ * FileBrowser — 右栏「文件」页签的文件管理器（原型 template.dc.html 2313–2338）。
+ *
+ * 三段式：
+ * ① 顶行工具条 —— 过滤框（撑满）＋ actions 槽（宿主放「打开方式」）＋ 目录折叠钮；
+ * ② 目录树列（默认在**左**，宽 44%，右侧 1px 分隔线）；
+ * ③ 预览列（flex-1）—— 列头是 mono 面包屑，正文坐 --ow-code-bg。
+ *
+ * 纯展示件：数据（树的加载、过滤的实际生效、预览的渲染）全在调用方，经 props 进来。
+ * 枝节点点击切展开，叶节点点击触发 `onSelectFile`。
+ *
+ * 与原型的两处**有意偏差**（DS 2.0 §7 梯子优先于原型的自由值，同 A11-B2 的口径）：
+ * 1. 过滤框原型画的是 26 高 ＋ --ow-radius-xs；§7「输入 32、圆角 8」，故走 Field 的
+ *    md 档（h32 / --ow-radius-control / --ow-input-bg=surface-2 / 1px --ow-input-border），
+ *    只把字号按原型压到 --ow-fs-caption。
+ * 2. 原型没有目录折叠钮（右栏窄，树恒显）；我们的宿主有这枚开关，保留在工具条右端。
+ *
+ * `layout` 是**过渡期开关**：默认 `"tree-left"` ＝ 原型口径；宿主（apps/desktop 的
+ * FilesTabBody）在自己那一侧改完之前可以显式传 `"preview-left"` 留住旧的左右次序，
+ * 两档都吃同一套头部与列头样式。
+ */
+/** R2 L2-1-6：面包屑最多平铺这么多层，再多就把中间层收进一枚「…」。 */
+const BREADCRUMB_MAX_VISIBLE = 4
+
+/** 面包屑段间的 `/`（mono、text-3、不参与压缩）。 */
+function BreadcrumbSlash() {
+  return (
+    <span aria-hidden className="shrink-0 px-0.5 text-ow-fs-caption [font-family:var(--ow-font-mono)] text-ow-text-3">
+      /
+    </span>
+  )
+}
+
+export function FileBrowser({
+  breadcrumb,
+  onBreadcrumbClick,
+  actions,
+  preview,
+  treeData,
+  expandedKeys,
+  onExpand,
+  selectedKey,
+  onSelectFile,
+  loadData,
+  filterText,
+  onFilterChange,
+  filterPlaceholder = "过滤文件",
+  treeCollapsed = false,
+  onToggleTree,
+  layout = "tree-left",
+  className = "",
+}: FileBrowserProps) {
+  const treeFirst = layout === "tree-left"
+
+  /**
+   * R2 L2-1-6 面包屑折叠：原来每段都 `min-w-0` 且等比压缩，四层路径会渲成
+   * 「landi… / s… / compone… / hero.…」——连三个字母的 `src` 都被砍掉两个，
+   * 当前文件名也读不出来。§7「读数一律 mono ＋ tabular-nums」的前提是读得出来。
+   * 现在：末段（当前文件名）不压缩；中间层超过 BREADCRUMB_MAX_VISIBLE 就收成一枚「…」。
+   */
+  const segments = breadcrumb ?? []
+  const collapsed = segments.length > BREADCRUMB_MAX_VISIBLE
+  const hiddenBreadcrumb = collapsed ? segments.slice(1, segments.length - 2) : []
+  const visibleBreadcrumb = collapsed ? [segments[0]!, ...segments.slice(segments.length - 2)] : segments
+
+  const treeColumn = treeCollapsed ? null : (
+    <div
+      data-ow-part="tree"
+      className={cn(
+        "flex flex-col min-h-0 shrink-0 overflow-y-auto px-1 py-1.5",
+        // 原型 2319：树列 width:44% ＋ border-right。preview-left 过渡档留住旧的 240 定宽，
+        // 分隔线那时挂在预览列右侧，避免一屏出现两条线。
+        treeFirst ? "w-[44%] min-w-0 border-r border-ow-border" : "w-60",
+      )}
+    >
+      <FileTree
+        treeData={treeData}
+        expandedKeys={expandedKeys}
+        onExpand={onExpand}
+        selectedKey={selectedKey}
+        onSelect={(node) => {
+          if (node.isLeaf) {
+            onSelectFile?.(node)
+            return
+          }
+          // Branch title clicks toggle expansion (same as the chevron).
+          if (!onExpand) return
+          const current = expandedKeys ?? []
+          onExpand(current.includes(node.key) ? current.filter((key) => key !== node.key) : [...current, node.key])
+        }}
+        loadData={loadData}
+      />
+    </div>
+  )
+
+  const previewColumn = (
+    <div
+      data-ow-part="preview"
+      className={cn(
+        "flex flex-col flex-1 min-w-0 min-h-0 overflow-hidden",
+        !treeFirst && !treeCollapsed && "border-r border-ow-border",
+      )}
+    >
+      {breadcrumb && breadcrumb.length > 0 && (
+        // 原型 2334：面包屑是**预览列的列头**（padding 8/12 ＋ 底线 ＋ mono ＋ fs-caption ＋ text-3），
+        // 不再与折叠钮同排挂在整块 header 上。段落仍可点（我们比原型多一层导航能力）。
+        <div
+          data-ow-part="breadcrumb"
+          className="flex items-center shrink-0 min-w-0 overflow-hidden px-3 py-2 border-b border-ow-border"
+        >
+          {visibleBreadcrumb.map((segment, index) => {
+            const isLast = index === visibleBreadcrumb.length - 1
+            return (
+              <Fragment key={segment.key}>
+                {index > 0 && <BreadcrumbSlash />}
+                {/* R2 L2-1-6：折叠段。层数超过 BREADCRUMB_MAX_VISIBLE 时，
+                    首段与末两段之外的中间层收成一枚「…」（完整路径挂 title），
+                    免得每段被平摊压成「s…」。 */}
+                {hiddenBreadcrumb.length > 0 && index === 1 && (
+                  <>
+                    <span
+                      className="shrink-0 px-1 text-ow-fs-caption [font-family:var(--ow-font-mono)] text-ow-text-3"
+                      title={hiddenBreadcrumb.map((hiddenSegment) => hiddenSegment.label).join(" / ")}
+                    >
+                      …
+                    </span>
+                    <BreadcrumbSlash />
+                  </>
+                )}
+                <span
+                  className={cn(
+                    "inline-flex items-center",
+                    // R2 L2-1-6：末段（当前文件名）不参与压缩——压缩量全给前置目录段，
+                    // 前置段各留 4ch 底线，不再被砍成一个字母。
+                    isLast ? "shrink-0 min-w-0" : "min-w-[4ch]",
+                  )}
+                >
+                  <Button
+                    variant="unstyled"
+                    className={cn(
+                      "ow-focus-ring border-0 bg-transparent px-1 py-0 [border-radius:var(--ow-radius-xs)] font-normal text-ow-fs-caption leading-[1.4] [font-family:var(--ow-font-mono)] [font-variant-numeric:tabular-nums] text-ow-text-3 cursor-pointer whitespace-nowrap overflow-hidden text-ellipsis hover:bg-[var(--ow-hover)] hover:text-ow-text active:bg-[var(--ow-press)]",
+                      isLast && "text-ow-text",
+                    )}
+                    onClick={() => onBreadcrumbClick?.(segment.key)}
+                  >
+                    {segment.label}
+                  </Button>
+                </span>
+              </Fragment>
+            )
+          })}
+        </div>
+      )}
+      {/* 原型 2335：正文坐 --ow-code-bg。内距与滚动留给预览件自己（我们的预览有
+          markdown / PDF / Office / CSV 多种渲染器，各自带纸面与内距，这里不能再补一层 12）。 */}
+      <div
+        data-ow-part="preview-body"
+        className="flex flex-col flex-1 min-h-0 overflow-hidden bg-[var(--ow-code-bg)] [&>*]:flex-1 [&>*]:min-h-0"
+      >
+        {preview}
+      </div>
+    </div>
+  )
+
+  return (
+    <div
+      data-slot="file-browser"
+      data-ow-layout={layout}
+      className={cn("flex flex-col flex-1 min-h-0 overflow-hidden bg-ow-bg", className)}
+    >
+      <div data-ow-part="header" className="flex items-center gap-2 h-10 px-2 border-b border-ow-border shrink-0">
+        <Field
+          data-ow-part="filter"
+          type="text"
+          value={filterText ?? ""}
+          placeholder={filterPlaceholder}
+          onChange={(next) => onFilterChange?.(next)}
+          className="flex-1 min-w-0 [&_[data-slot=field-control]]:[font-size:var(--ow-fs-caption)]"
+          aria-label="过滤文件"
+        />
+        {actions}
+        <Button
+          variant="unstyled"
+          data-ow-part="toggle"
+          className={cn(
+            "ow-focus-ring inline-flex items-center justify-center w-7 h-7 shrink-0 border-0 bg-transparent [border-radius:var(--ow-radius-sm)] cursor-pointer text-ow-text-2 hover:bg-[var(--ow-hover)] active:bg-[var(--ow-press)]",
+            treeCollapsed && "text-ow-text-3",
+          )}
+          onClick={onToggleTree}
+          title={treeCollapsed ? "展开目录" : "收起目录"}
+          aria-label={treeCollapsed ? "展开目录" : "收起目录"}
+          aria-pressed={!treeCollapsed}
+        >
+          <PanelFold width={15} height={15} />
+        </Button>
+      </div>
+      <div data-ow-part="body" className="flex flex-1 min-h-0">
+        {treeFirst ? (
+          <>
+            {treeColumn}
+            {previewColumn}
+          </>
+        ) : (
+          <>
+            {previewColumn}
+            {treeColumn}
+          </>
+        )}
+      </div>
+    </div>
+  )
+}

package/src/components/domain/files/FileIcon/FileIcon.stories.tsx

@@ -0,0 +1,207 @@
+import type { Meta, StoryObj } from "@storybook/react"
+import type { CSSProperties } from "react"
+import { FileIcon } from "./index"
+
+/// DS 2.0：文件类型图标＝单色字形 + 扩展名 mono 标签（§7），禁多彩。
+/// 只用语义 token，主题由 Storybook 工具栏切换，故事内不写死主题。
+const meta = {
+  title: "Files/FileIcon",
+  component: FileIcon,
+  parameters: {
+    layout: "padded",
+  },
+  tags: ["autodocs"],
+} satisfies Meta<typeof FileIcon>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+const cellStyle: CSSProperties = {
+  display: "flex",
+  flexDirection: "column",
+  alignItems: "center",
+  gap: 8,
+  padding: "12px 6px",
+  border: "1px solid var(--ow-border)",
+  borderRadius: 8,
+  background: "var(--ow-surface)",
+  color: "var(--ow-text-2)",
+}
+
+const captionStyle: CSSProperties = {
+  fontSize: 11,
+  lineHeight: 1.2,
+  color: "var(--ow-text-3)",
+  fontFamily: "var(--ow-font-mono)",
+  fontVariantNumeric: "tabular-nums",
+}
+
+function Cell({ name, kind, size = 28 }: { name: string; kind?: string; size?: number }) {
+  return (
+    <div style={cellStyle}>
+      <FileIcon name={name} kind={kind} width={size} height={size} />
+      <span style={captionStyle}>{name}</span>
+    </div>
+  )
+}
+
+/// 常见 20 类型矩阵——一屏看清「同一个字形 + 不同扩展名标签」的读法。
+export const TypeMatrix: Story = {
+  args: { name: "App.tsx" },
+  render: () => {
+    const files = [
+      "App.tsx",
+      "utils.ts",
+      "index.js",
+      "server.go",
+      "main.py",
+      "lib.rs",
+      "Main.java",
+      "app.rb",
+      "styles.css",
+      "index.html",
+      "config.yaml",
+      "Cargo.toml",
+      "package.json",
+      "README.md",
+      "query.sql",
+      "build.sh",
+      "report.pdf",
+      "cover.png",
+      "clip.mp4",
+      "bundle.zip",
+    ]
+    return (
+      <div
+        style={{
+          display: "grid",
+          gridTemplateColumns: "repeat(auto-fill, minmax(104px, 1fr))",
+          gap: 10,
+          maxWidth: 660,
+        }}
+      >
+        {files.map((name) => (
+          <Cell key={name} name={name} />
+        ))}
+      </div>
+    )
+  },
+}
+
+/// 无扩展名 / 扩展名不表身份的文件，按文件名给短标签。
+export const SpecialNames: Story = {
+  args: { name: "Dockerfile" },
+  render: () => {
+    const files = ["Dockerfile", ".gitignore", ".env", "package-lock.json", "pnpm-lock.yaml", "Makefile", "go.mod"]
+    return (
+      <div style={{ display: "flex", flexWrap: "wrap", gap: 10, maxWidth: 660 }}>
+        {files.map((name) => (
+          <Cell key={name} name={name} />
+        ))}
+      </div>
+    )
+  },
+}
+
+/// 扩展名未命中时用 kind 兜底；两者都没有就只画字形、不挂标签。
+export const KindFallbackAndUnknown: Story = {
+  args: { name: "notes" },
+  render: () => {
+    const items: { name: string; kind?: string }[] = [
+      { name: "扫描件", kind: "image" },
+      { name: "录像", kind: "video" },
+      { name: "录音", kind: "audio" },
+      { name: "季度汇报", kind: "ppt" },
+      { name: "对账表", kind: "xls" },
+      { name: "notes" },
+      { name: "LICENSE" },
+    ]
+    return (
+      <div style={{ display: "flex", flexWrap: "wrap", gap: 10, maxWidth: 660 }}>
+        {items.map((it) => (
+          <Cell key={it.name} name={it.name} kind={it.kind} />
+        ))}
+      </div>
+    )
+  },
+}
+
+/// 档位：16 / 20 / 24 / 32——标签在 16 档是纹理，24 档起可读。
+export const Sizes: Story = {
+  args: { name: "App.tsx" },
+  render: () => (
+    <div style={{ display: "flex", alignItems: "flex-end", gap: 20 }}>
+      {[16, 20, 24, 32].map((size) => (
+        <div key={size} style={cellStyle}>
+          <FileIcon name="App.tsx" width={size} height={size} />
+          <span style={captionStyle}>{size}px</span>
+        </div>
+      ))}
+    </div>
+  ),
+}
+
+/// 字形取 currentColor：随所在文字色走 text / text-2 / text-3，自身不带颜色。
+export const InheritsTextColor: Story = {
+  args: { name: "README.md" },
+  render: () => (
+    <div style={{ display: "flex", gap: 20 }}>
+      {(
+        [
+          ["--ow-text", "text"],
+          ["--ow-text-2", "text-2"],
+          ["--ow-text-3", "text-3"],
+        ] as const
+      ).map(([token, label]) => (
+        <div key={token} style={{ ...cellStyle, color: `var(${token})` }}>
+          <FileIcon name="README.md" width={28} height={28} />
+          <span style={captionStyle}>{label}</span>
+        </div>
+      ))}
+    </div>
+  ),
+}
+
+/// 落到列表行里的样子：密度行高 32，hover 走所在表面的 --ow-hover。
+export const InFileList: Story = {
+  args: { name: "App.tsx" },
+  render: () => {
+    const files = [
+      "src/App.tsx",
+      "src/components/Button.tsx",
+      "src/utils/format.ts",
+      "public/index.html",
+      "README.md",
+      "package.json",
+      ".gitignore",
+      "Dockerfile",
+    ]
+    return (
+      <div style={{ maxWidth: 420, background: "var(--ow-surface)", borderRadius: 12, padding: 6 }}>
+        {files.map((file) => (
+          <div
+            key={file}
+            style={{
+              display: "flex",
+              alignItems: "center",
+              gap: 10,
+              height: 32,
+              padding: "0 10px",
+              borderRadius: 6,
+              color: "var(--ow-text-3)",
+            }}
+            onMouseEnter={(e) => {
+              e.currentTarget.style.background = "var(--ow-hover)"
+            }}
+            onMouseLeave={(e) => {
+              e.currentTarget.style.background = "transparent"
+            }}
+          >
+            <FileIcon name={file.split("/").pop() || file} width={16} height={16} />
+            <span style={{ fontSize: "var(--ow-fs-ui)", color: "var(--ow-text)" }}>{file}</span>
+          </div>
+        ))}
+      </div>
+    )
+  },
+}

package/src/components/domain/files/FileIcon/FileIconSource.test.mjs

@@ -0,0 +1,39 @@
+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")
+
+test("file-type icon is monochrome: no bare colors anywhere in the module", () => {
+  // §7：文件类型图标＝单色字形 + 扩展名 mono 标签，禁多彩品牌色徽标。
+  assert.doesNotMatch(source, /#[0-9A-Fa-f]{3,8}\b/)
+  assert.doesNotMatch(source, /\brgba?\(/)
+})
+
+test("glyph follows currentColor and the label uses semantic tokens", () => {
+  assert.match(source, /stroke="currentColor"/)
+  assert.match(source, /fill="var\(--ow-surface-2\)"/)
+  assert.match(source, /fill="var\(--ow-text-2\)"/)
+})
+
+test("extension label is mono with tabular numerals", () => {
+  assert.match(source, /fontFamily="var\(--ow-font-mono[^"]*"/)
+  assert.match(source, /fontVariantNumeric: "tabular-nums"/)
+})
+
+test("public API keeps name/kind props and the resolveFileIcon export", () => {
+  assert.match(source, /export function resolveFileIcon\(name: string, kind\?: string\)/)
+  assert.match(source, /export function FileIcon\(\{ name, kind, label, className = "", width = 15, height = 15 \}/)
+})
+
+// R2：`label` 是右下角标签的显式覆盖（Attachment 的 badge 由此透传），
+// 覆盖走同一条 ≤4 字符大写的口径，不另开一套标签规则。
+test("label override goes through the same clamp as inferred labels", () => {
+  assert.match(source, /label\?: string/)
+  assert.match(source, /const override = label\?\.trim\(\)\.toUpperCase\(\)\.slice\(0, 4\)/)
+})
+
+test("no color-per-language map survives", () => {
+  assert.doesNotMatch(source, /\bbg:\s*["']/)
+  assert.doesNotMatch(source, /\bfg:\s*["']/)
+})

package/src/components/domain/files/FileIcon/index.tsx

@@ -0,0 +1,133 @@
+/// 文件类型图标（DS 2.0 · §7）：单色文档字形 + 右下角扩展名 mono 小标签。
+/// 不用多彩品牌色——文件类型靠「读的是扩展名」区分，颜色只跟随所在文字
+/// （currentColor），标签底走 --ow-surface-2、字走 --ow-text-2。
+
+type FileIconSpec = {
+  /// 右下角标签文案，最多 4 字符（大写）。
+  label: string
+}
+
+/// 特殊文件名优先于扩展名匹配（这些文件要么没扩展名，要么扩展名不表身份）。
+const SPECIAL_NAMES: Record<string, string> = {
+  dockerfile: "DKR",
+  "docker-compose.yml": "DKR",
+  "docker-compose.yaml": "DKR",
+  ".dockerignore": "DKR",
+  ".gitignore": "GIT",
+  ".gitattributes": "GIT",
+  ".env": "ENV",
+  ".env.example": "ENV",
+  "package.json": "NPM",
+  "package-lock.json": "NPM",
+  "pnpm-lock.yaml": "PNPM",
+  makefile: "MAKE",
+  "go.mod": "GO",
+  "go.sum": "GO",
+  "cargo.toml": "RS",
+  "cargo.lock": "RS",
+}
+
+/// 扩展名 → 标签的改写表。只在「原扩展名超 4 字符」或「同族应归一」时登记，
+/// 其余扩展名直接大写使用。
+const EXT_LABELS: Record<string, string> = {
+  markdown: "MD",
+  jpeg: "JPG",
+  javascript: "JS",
+  typescript: "TS",
+  python: "PY",
+  shell: "SH",
+  config: "CFG",
+  properties: "CFG",
+}
+
+/// kind（classifyLocalFile 分类）作为扩展名未命中时的兜底。
+const KIND_LABELS: Record<string, string> = {
+  image: "IMG",
+  video: "VID",
+  audio: "AUD",
+  pdf: "PDF",
+  md: "MD",
+  zip: "ZIP",
+  doc: "DOC",
+  xls: "XLS",
+  ppt: "PPT",
+  text: "TXT",
+  code: "CODE",
+}
+
+/// 兜底：截到 4 字符，保证标签始终塞得进定宽底板。
+function clampLabel(raw: string): string {
+  return raw.toUpperCase().slice(0, 4)
+}
+
+export function resolveFileIcon(name: string, kind?: string): FileIconSpec | null {
+  const base = name.toLowerCase()
+  const special = SPECIAL_NAMES[base]
+  if (special) return { label: special }
+  const dot = base.lastIndexOf(".")
+  if (dot > 0) {
+    const ext = base.slice(dot + 1)
+    const mapped = EXT_LABELS[ext]
+    if (mapped) return { label: mapped }
+    if (ext && /^[a-z0-9]+$/.test(ext)) return { label: clampLabel(ext) }
+  }
+  if (kind) {
+    const byKind = KIND_LABELS[kind]
+    if (byKind) return { label: byKind }
+  }
+  return null
+}
+
+export type FileIconProps = {
+  /// File name (extension is parsed from it).
+  name: string
+  /// Optional app-side file classification, used as fallback.
+  kind?: string
+  /// 右下角标签的显式覆盖（≤4 字符，自动大写）；不传就按文件名/kind 推断。
+  label?: string
+  className?: string
+  width?: number | string
+  height?: number | string
+}
+
+/// 标签字号随字数收敛，底板定宽（x 5.4→15.6），保证一列文件里标签左右对齐。
+function labelFontSize(len: number): string {
+  if (len <= 2) return "5.2"
+  if (len === 3) return "4.4"
+  return "3.6"
+}
+
+/**
+ * 单色文件类型图标：文档字形取 currentColor，右下角是扩展名 mono 小标签。
+ * 未识别的文件只画字形、不挂标签。
+ */
+export function FileIcon({ name, kind, label, className = "", width = 15, height = 15 }: FileIconProps) {
+  const override = label?.trim().toUpperCase().slice(0, 4)
+  const spec = override ? { label: override } : resolveFileIcon(name, kind)
+  return (
+    <svg viewBox="0 0 16 16" className={className} width={width} height={height} aria-hidden="true">
+      {/* 文档轮廓 + 折角：1.25 描边（16 网格上等效 24 网格的 1.75），线端 round */}
+      <g fill="none" stroke="currentColor" strokeWidth="1.25" strokeLinejoin="round" strokeLinecap="round">
+        <path d="M8.4 1.6H4.6a1 1 0 0 0-1 1v10.8a1 1 0 0 0 1 1h6.8a1 1 0 0 0 1-1V5.6L8.4 1.6Z" />
+        <path d="M8.4 1.6v3a1 1 0 0 0 1 1h3" />
+      </g>
+      {spec ? (
+        <>
+          <rect x="5.4" y="9.4" width="10.2" height="6" rx="1.4" fill="var(--ow-surface-2)" />
+          <text
+            x="10.5"
+            y="13.75"
+            textAnchor="middle"
+            fontSize={labelFontSize(spec.label.length)}
+            fontWeight="600"
+            fontFamily="var(--ow-font-mono, ui-monospace, monospace)"
+            style={{ fontVariantNumeric: "tabular-nums" }}
+            fill="var(--ow-text-2)"
+          >
+            {spec.label}
+          </text>
+        </>
+      ) : null}
+    </svg>
+  )
+}