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

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

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

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

@@ -1,39 +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")
-
-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

@@ -1,133 +0,0 @@
-/// 文件类型图标（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>
-  )
-}