@orbit-work/ui 0.1.0

package/src/lib/shortcut.ts

@@ -0,0 +1,97 @@
+/**
+ * formatShortcut —— 快捷键字形按平台渲染（R2 · L3-2-8）
+ *
+ * 库里原来有三处把 mac 字形写死：`SIDE_PANEL_EMPTY_ACTIONS` 的 `⌘T/⌘B/⌘P`、
+ * `DesktopChatHeaderView` 与 `WebPreviewNav` 的 `title="… ⌘T"`——windows/linux 上照样
+ * 显示 ⌘，用户按不出来。T1 这一轮把 `platform` 变成组件库的一等公民（壳层三件全收），
+ * 快捷键这一路也跟着走同一个 prop：**组件不嗅探 userAgent，平台一律受控传入**。
+ *
+ * 用法：常量里只存**语义键名**（`["Mod","T"]`），到了组件里才按 platform 渲成字形。
+ * `Mod` 是「本平台的主修饰键」——mac 上是 ⌘（Command），其余平台是 Ctrl。
+ *
+ * ```ts
+ * formatShortcut(["Mod", "T"], "mac")     // "⌘T"
+ * formatShortcut(["Mod", "T"], "windows") // "Ctrl+T"
+ * formatShortcut(["Mod", "Shift", "P"], "linux") // "Ctrl+Shift+P"
+ * ```
+ */
+
+/** 与 `TitleBarPlatform` 同一份词表（壳层三件收的就是它）。 */
+export type ShortcutPlatform = "mac" | "windows" | "linux" | "web"
+
+/**
+ * 语义键名。修饰键用下面这五个；其余按字面渲染（`"T"` / `"Enter"` / `"F5"`）。
+ * `Mod` = 本平台主修饰键；要点名真的 Control 键（mac 上的 ⌃）请用 `Ctrl`。
+ */
+export type ShortcutKey = "Mod" | "Meta" | "Ctrl" | "Alt" | "Shift" | (string & {})
+
+/** mac：修饰键走字形，键之间不加分隔（⌘⇧P）。 */
+const MAC_GLYPHS: Record<string, string> = {
+  Mod: "⌘",
+  Meta: "⌘",
+  Cmd: "⌘",
+  Command: "⌘",
+  Ctrl: "⌃",
+  Control: "⌃",
+  Alt: "⌥",
+  Option: "⌥",
+  Shift: "⇧",
+  Enter: "↩",
+  Return: "↩",
+  Esc: "⎋",
+  Escape: "⎋",
+  Backspace: "⌫",
+  Delete: "⌦",
+  Tab: "⇥",
+  Space: "␣",
+  Up: "↑",
+  Down: "↓",
+  Left: "←",
+  Right: "→",
+}
+
+/** windows / linux / web：修饰键走单词，键之间以 + 相连（Ctrl+Shift+P）。 */
+const PC_LABELS: Record<string, string> = {
+  Mod: "Ctrl",
+  Meta: "Win",
+  Cmd: "Ctrl",
+  Command: "Ctrl",
+  Ctrl: "Ctrl",
+  Control: "Ctrl",
+  Alt: "Alt",
+  Option: "Alt",
+  Shift: "Shift",
+  Enter: "Enter",
+  Return: "Enter",
+  Esc: "Esc",
+  Escape: "Esc",
+  Backspace: "Backspace",
+  Delete: "Del",
+  Tab: "Tab",
+  Space: "Space",
+  Up: "↑",
+  Down: "↓",
+  Left: "←",
+  Right: "→",
+}
+
+export function isMacShortcutPlatform(platform: ShortcutPlatform): boolean {
+  return platform === "mac"
+}
+
+/**
+ * 逐键渲染成本平台的字形，返回数组——给 `KeycapCombo` 这类「一键一帽」的消费方用。
+ */
+export function formatShortcutKeys(keys: readonly ShortcutKey[], platform: ShortcutPlatform = "mac"): string[] {
+  const table = isMacShortcutPlatform(platform) ? MAC_GLYPHS : PC_LABELS
+  return keys.map((key) => table[key] ?? key)
+}
+
+/**
+ * 渲染成一条可直接落进键帽或 `title` 的字串。
+ * mac 不加分隔符（⌘⇧P 是系统惯例），其余平台用 `+`（Ctrl+Shift+P）。
+ */
+export function formatShortcut(keys: readonly ShortcutKey[], platform: ShortcutPlatform = "mac"): string {
+  const parts = formatShortcutKeys(keys, platform)
+  return isMacShortcutPlatform(platform) ? parts.join("") : parts.join("+")
+}

package/src/lib/twMergeOw.ts

@@ -0,0 +1,18 @@
+import { extendTailwindMerge } from "tailwind-merge"
+
+/**
+ * DS 2.0 定制版 tailwind-merge。
+ *
+ * 必须教会 twMerge：`text-ow-fs-*` 是字号工具类（utilities.css 自定义档），
+ * 不是字色。默认配置会把未知的 `text-X` 归入字色组，导致它反杀同组的真字色类
+ * （曾致主按钮 text-[color:var(--ow-btn-primary-fg)] 被 text-ow-fs-ui 吞掉，
+ * 暗字压藏蓝底不可读）。任何新的「text- 前缀但非字色」自定义工具类都要在
+ * 这里登记。
+ */
+export const twMergeOw = extendTailwindMerge({
+  extend: {
+    classGroups: {
+      "font-size": [{ text: [(value: string) => value.startsWith("ow-fs-")] }],
+    },
+  },
+})

package/src/lib/utils.ts

@@ -0,0 +1,6 @@
+import { type ClassValue, clsx } from "clsx"
+import { twMergeOw } from "./twMergeOw"
+
+export function cn(...inputs: ClassValue[]) {
+  return twMergeOw(clsx(inputs))
+}

package/src/screens/Browser.stories.tsx

@@ -0,0 +1,353 @@
+import type { Meta, StoryObj } from "@storybook/react"
+import { More } from "../components/composite/Icons"
+import type { WindowBandPlatform } from "../components/composite/TitleBar"
+import { WebPreviewConsole } from "../components/domain/browser/WebPreviewConsole"
+import type { WebPreviewConsoleEntry } from "../components/domain/browser/WebPreviewConsole"
+import { WebPreviewNav } from "../components/domain/browser/WebPreviewNav"
+import type { WebPreviewTab } from "../components/domain/browser/WebPreviewNav"
+import { WebPreviewShell } from "../components/domain/browser/WebPreviewShell"
+import { DesktopSidebarView } from "../components/domain/desktop/DesktopSidebarView"
+import { DesktopWorkbenchShell } from "../components/domain/desktop/DesktopWorkbenchShell"
+import { FileBrowser } from "../components/domain/files/FileBrowser"
+import { Button } from "../components/primitives"
+import { Keycap } from "../components/primitives/Keycap"
+import type { FileTreeNode } from "../types/file-tree"
+import { DesktopScreenFrame, SCREEN_PARAMETERS, noop, screenSidebarProps } from "./_screen"
+
+/**
+ * Browser 整屏（蓝图 06 · screens）——网页预览工作区的组合证明。
+ *
+ * 组合件：`DesktopWorkbenchShell`｜`DesktopSidebarView`｜`WebPreviewNav`（标签条）
+ * ｜`WebPreviewShell`（40 高工具栏：前进后退刷新组 ＋ `Field` 语法地址栏 ＋ 工具组，
+ * 自带载/错/空三态）｜`WebPreviewConsole`（终端语境，`--ow-term-*` / `--ow-ansi-*`）
+ * ｜`Keycap` 出 ⌘L 提示。
+ *
+ * ## 荧黄逐处旁注
+ * - 左半屏 · 侧栏无 current（浏览器不是 nav 项）→ **位置极 0**，零荧黄。
+ * - 右半屏 · **状态极 0 处**：`WebPreviewNav` / `Shell` / `Console` 三件都是
+ *   §4 R3 中性件（文件头已写明「无信标/荧黄元素」）；载入进度条走
+ *   `--ow-progress-fill`，控制台的 warn 走 `--ow-ansi-yellow`——那是终端语义色，
+ *   不是荧黄极色，且级别另有 mono 前缀字形承义（R1 双编码）。
+ * - 右半屏 · **行动极 0 处**：工具栏全是 ghost 图标钮，没有主按钮。
+ * - 常暗域：控制台按 §3 白名单局部走终端配色，其余壳面随主题翻。
+ *
+ * A11-B5（裁决 16）：本屏多了一枚 **FilesTab** —— 右栏「文件」页签（原型 2313–2338，
+ * `FileBrowser` 树左 44% / 预览右）。它接管了原「我的空间 → 项目 → 目录」那条路径，
+ * `Screens/Workspace` 的 Projects 故事随之退役。
+ *
+ * @deprecated R2 T5b（上轮建议 ⑨）：**整幅浏览器页**（Default / Loading / LoadError /
+ * WithTitleBar 四张）是退役候选——原型里没有「浏览器」这一屏，网页预览归右栏面板，
+ * 与「我的空间」同批清。组件（WebPreviewNav / Shell / Console）一个都不删，
+ * 本轮只在 story 名上打标（`meta.title` 与 story id 一律不动——census / list-screens
+ * 都按 id 取图，id 一漂整批基线作废）。
+ * **FilesTab 例外**：它是现役件，是 `Screens/Workspace` 的 Projects 退役后的接管方，
+ * 不打标。退役条件（宿主是否还有整幅浏览器入口、FilesTab 是否已完全接管）记
+ * ACCEPTANCE-PENDING 第 33 节，随「我的空间」一起裁。
+ */
+const meta = {
+  title: "Screens/Browser",
+  parameters: SCREEN_PARAMETERS,
+} satisfies Meta
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+const TABS: WebPreviewTab[] = [
+  { id: "tab-docs", kind: "web", title: "Orbitwork 设计系统", url: "https://orbit.work/docs/design-system" },
+  { id: "tab-preview", kind: "web", title: "预览 · 落地页草稿", url: "https://preview.orbit.work/lp-draft" },
+  { id: "tab-term", kind: "terminal", title: "终端" },
+  { id: "tab-files", kind: "files", title: "文件" },
+]
+
+const LOGS: WebPreviewConsoleEntry[] = [
+  {
+    level: "info",
+    message: "页面加载完成，用时 812ms",
+    source: "app.js:1",
+    timestamp: new Date("2026-08-31T14:02:11"),
+  },
+  {
+    level: "warn",
+    message: "图片没设置显式宽高，布局会抖一下",
+    source: "hero.tsx:42",
+    timestamp: new Date("2026-08-31T14:02:12"),
+  },
+  {
+    level: "error",
+    message: "GET /api/pricing 404",
+    source: "fetchPricing.ts:18",
+    timestamp: new Date("2026-08-31T14:02:13"),
+  },
+  { level: "log", message: "hydration done", source: "main.tsx:9", timestamp: new Date("2026-08-31T14:02:13") },
+]
+
+/** 失败语境日志：连接被拒的屏上不该摆「加载完成」——LoadError 走这一组。 */
+const ERROR_LOGS: WebPreviewConsoleEntry[] = [
+  {
+    level: "info",
+    message: "开始加载 https://preview.orbit.work/lp-draft",
+    source: "app.js:1",
+    timestamp: new Date("2026-08-31T14:07:02"),
+  },
+  {
+    level: "warn",
+    message: "第 1 次重试握手失败，2s 后再试",
+    source: "devserver.ts:64",
+    timestamp: new Date("2026-08-31T14:07:04"),
+  },
+  {
+    level: "error",
+    message: "GET https://preview.orbit.work/lp-draft net::ERR_CONNECTION_REFUSED",
+    source: "devserver.ts:71",
+    timestamp: new Date("2026-08-31T14:07:06"),
+  },
+  {
+    level: "error",
+    message: "预览服务未在 127.0.0.1:4173 监听",
+    source: "devserver.ts:72",
+    timestamp: new Date("2026-08-31T14:07:06"),
+  },
+]
+
+function BrowserScreen({
+  url,
+  loading,
+  error,
+  errorDetail,
+  logs,
+  platform,
+}: {
+  url: string
+  loading?: boolean
+  error?: string
+  errorDetail?: string
+  logs: WebPreviewConsoleEntry[]
+  /** 窗口带平台（画框顶端那条带）：缺省 mac，Windows 态用来验右端三键与钮落 x=8。 */
+  platform?: WindowBandPlatform
+}) {
+  return (
+    <DesktopScreenFrame platform={platform}>
+      <DesktopWorkbenchShell
+        contained
+        view="chat"
+        sidebar={<DesktopSidebarView {...screenSidebarProps()} />}
+        skills={null}
+        sites={null}
+        scheduledTasks={null}
+        workspace={null}
+        chat={
+          <div style={{ height: "100%", minHeight: 0, display: "flex", flexDirection: "column" }}>
+            <WebPreviewNav
+              tabs={TABS}
+              activeTabId="tab-docs"
+              isWide={false}
+              onSwitchTab={noop}
+              onCloseTab={noop}
+              onCloseOtherTabs={noop}
+              onAddBrowser={noop}
+              onAddTerminal={noop}
+              onAddFiles={noop}
+              onToggleWide={noop}
+              onToggleCollapsed={noop}
+            />
+            <div style={{ flex: 1, minHeight: 0, padding: "8px 12px 12px" }}>
+              <WebPreviewShell
+                chrome={false}
+                url={url}
+                canGoBack
+                canGoForward={false}
+                loading={loading}
+                error={error}
+                errorDetail={errorDetail}
+                onNavigate={noop}
+                onGoBack={noop}
+                onGoForward={noop}
+                onReload={noop}
+                onStop={noop}
+                onRetry={noop}
+                urlSuffix={<Keycap>⌘L</Keycap>}
+                actions={
+                  <Button
+                    type="button"
+                    variant="ghost"
+                    size="sm"
+                    className="w-7 h-7 p-0"
+                    aria-label="更多"
+                    title="更多"
+                  >
+                    <More aria-hidden="true" />
+                  </Button>
+                }
+                footer={<WebPreviewConsole logs={logs} defaultOpen onClear={noop} maxHeight={180} />}
+              >
+                <div
+                  style={{
+                    height: "100%",
+                    display: "flex",
+                    alignItems: "center",
+                    justifyContent: "center",
+                    background: "var(--ow-surface)",
+                    color: "var(--ow-text-2)",
+                    fontSize: "var(--ow-fs-ui)",
+                  }}
+                >
+                  页面内容（webview 落位）
+                </div>
+              </WebPreviewShell>
+            </div>
+          </div>
+        }
+      />
+    </DesktopScreenFrame>
+  )
+}
+
+/** 常规态：标签条 4 页、地址栏有值、控制台展开三档日志。 */
+export const Default: Story = {
+  name: "Default（退役候选）",
+  render: () => <BrowserScreen url="https://orbit.work/docs/design-system" logs={LOGS} />,
+}
+
+/** 载入中：刷新钮变停止钮，工具栏下沿一条不定长进度条（`--ow-progress-fill`，不是荧黄）。 */
+export const Loading: Story = {
+  name: "Loading（退役候选）",
+  render: () => <BrowserScreen url="https://preview.orbit.work/lp-draft" loading logs={[]} />,
+}
+
+/** 失败：§6 错误制式——一句人话＋mono ≤2 行技术详情＋重新加载。 */
+export const LoadError: Story = {
+  name: "LoadError（退役候选）",
+  render: () => (
+    <BrowserScreen
+      url="https://preview.orbit.work/lp-draft"
+      error="这个地址没打开，站点可能还没起来。"
+      errorDetail="ERR_CONNECTION_REFUSED · 127.0.0.1:4173"
+      logs={ERROR_LOGS}
+    />
+  ),
+}
+
+/* ── 文件页签（A11-B5 · 裁决 16）─────────────────────────────────────────────
+   原型 template.dc.html 2313–2338：右栏的第二类页签。整屏里「我的空间 → 进项目 → 翻目录」
+   那条路由此接管——树在**左**（44% ＋ 右侧 1px 分隔线），预览在右（列头 mono 面包屑，
+   正文坐 --ow-code-bg）；过滤框与「打开方式」并排在头部一行。 */
+const FILE_TREE: FileTreeNode[] = [
+  {
+    key: "/orbit-fe/packages",
+    title: "packages",
+    isLeaf: false,
+    children: [
+      {
+        key: "/orbit-fe/packages/ui",
+        title: "ui",
+        isLeaf: false,
+        children: [
+          { key: "/orbit-fe/packages/ui/package.json", title: "package.json", isLeaf: true },
+          { key: "/orbit-fe/packages/ui/README.md", title: "README.md", isLeaf: true },
+        ],
+      },
+      { key: "/orbit-fe/packages/types", title: "types", isLeaf: false },
+    ],
+  },
+  {
+    key: "/orbit-fe/apps",
+    title: "apps",
+    isLeaf: false,
+    children: [{ key: "/orbit-fe/apps/desktop", title: "desktop", isLeaf: false }],
+  },
+  { key: "/orbit-fe/package.json", title: "package.json", isLeaf: true },
+  { key: "/orbit-fe/README.md", title: "README.md", isLeaf: true },
+]
+
+const FILE_TEXT = `# Orbitwork 设计系统
+
+组件库在 packages/ui，桌面端在 apps/desktop。
+
+- 令牌：styles/tokens.css（生成物，改 src/tokens/*.ts 后跑 generate:tokens）
+- 规范：ow/COMPONENT-RULES.md
+`
+
+/**
+ * 文件页签：右栏的第二类页签（原型 2313–2338）。**树左 44% / 预览右**，面包屑是预览列的
+ * 列头，过滤框与「打开方式」并排在头部一行。这一屏接管了原「我的空间 → 项目 → 目录」的路径，
+ * 所以 `Screens/Workspace` 的 Projects 故事随之退役。
+ */
+export const FilesTab: Story = {
+  render: () => (
+    <DesktopScreenFrame>
+      <DesktopWorkbenchShell
+        contained
+        view="chat"
+        sidebar={<DesktopSidebarView {...screenSidebarProps()} />}
+        skills={null}
+        sites={null}
+        scheduledTasks={null}
+        workspace={null}
+        chat={
+          <div style={{ height: "100%", minHeight: 0, display: "flex", flexDirection: "column" }}>
+            <WebPreviewNav
+              tabs={TABS}
+              activeTabId="tab-files"
+              isWide={false}
+              onSwitchTab={noop}
+              onCloseTab={noop}
+              onCloseOtherTabs={noop}
+              onAddBrowser={noop}
+              onAddTerminal={noop}
+              onAddFiles={noop}
+              onToggleWide={noop}
+              onToggleCollapsed={noop}
+            />
+            <div style={{ flex: 1, minHeight: 0, display: "flex" }}>
+              <FileBrowser
+                breadcrumb={[
+                  { key: "/orbit-fe", label: "orbit-fe" },
+                  { key: "/orbit-fe/README.md", label: "README.md" },
+                ]}
+                onBreadcrumbClick={noop}
+                actions={
+                  <Button variant="secondary" size="sm">
+                    打开方式
+                  </Button>
+                }
+                treeData={FILE_TREE}
+                expandedKeys={["/orbit-fe/packages", "/orbit-fe/packages/ui"]}
+                selectedKey="/orbit-fe/README.md"
+                preview={
+                  /* 原型 2335：预览正文 mono ＋ fs-code ＋ lh-code，内距 12；井底
+                     （--ow-code-bg）由 FileBrowser 的预览槽自己铺，这里只出文字。 */
+                  <pre
+                    style={{
+                      margin: 0,
+                      padding: 12,
+                      overflow: "auto",
+                      fontFamily: "var(--ow-font-mono)",
+                      fontSize: "var(--ow-fs-code)",
+                      lineHeight: "var(--ow-lh-code)",
+                      color: "var(--ow-text)",
+                      // R2 · L2-3-5：代码不软折行——长标识符不从中间劈开，横滚交给 overflow:auto
+                      whiteSpace: "pre",
+                    }}
+                  >
+                    {FILE_TEXT}
+                  </pre>
+                }
+              />
+            </div>
+          </div>
+        }
+      />
+    </DesktopScreenFrame>
+  ),
+}
+
+/**
+ * 窗口带取证（Windows 态）：整屏顶端那条带（48 高 `--ow-titlebar-h`、与地同色 `--ow-bg`、
+ * 无分隔线、贴地零影）现在是每一张整屏卡的默认件，本 story 把它切到 Windows——
+ * 没有 mac 让位块，折叠钮直接落在左内距 x=8，右端三键各 `--ow-winctl-w`（44）× 满带高。
+ * 其余整屏卡走默认 mac 态（让位块 68，钮落 x=80）。
+ */
+export const WithTitleBar: Story = {
+  name: "WithTitleBar（退役候选）",
+  render: () => <BrowserScreen url="https://orbit.work/docs/design-system" logs={LOGS} platform="windows" />,
+}