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

package/README.md

@@ -11,7 +11,7 @@ npm i @orbit-work/ui
 在 React 应用入口引入样式，并从包根路径导入组件：
 
 ```tsx
-import '@orbit-work/ui/styles/orbitwork.css'
+import '@orbit-work/ui/styles/core.css'
 import { Button, ThemeProvider } from '@orbit-work/ui'
 
 export default function App() {
@@ -23,31 +23,81 @@ export default function App() {
 }
 ```
 
-项目需要提供 React 18 或更高版本以及 React DOM 18 或更高版本。
+项目需要提供 React 19 或更高版本以及 React DOM 19 或更高版本。
+
+### 公共入口
+
+包根入口只面向 Renderer/Web。不要从 `components/*`、`theme/*` 或其他源码目录深层导入；不同运行环境使用对应的稳定子入口：
+
+| 入口 | 使用环境 |
+| --- | --- |
+| `@orbit-work/ui` | React 组件、Hooks、Theme Provider |
+| `@orbit-work/ui/appearance` | Electron main/preload、SDK/CLI 的无 React 主题合同 |
+| `@orbit-work/ui/slot/core` | Slot registry、声明和类型（运行时无 React） |
+| `@orbit-work/ui/slot/react` | `SlotProvider`、`SlotOutlet` 和 React Hooks |
+| `@orbit-work/ui/about-window` | Electron main 的 About Window HTML |
+| `@orbit-work/ui/browser-annotation-popup` | WebView preload 的批注浮层合同 |
+| `@orbit-work/ui/styles/core.css` | Renderer/Web 必需的 Token、基础样式和共享组件样式 |
+| `@orbit-work/ui/styles/office.css` | OfficePreview 第三方适配；在 `core.css` 后按需引入 |
+| `@orbit-work/ui/styles/file-tree.css` | FileTree 的 rc-tree 适配；在 `core.css` 后按需引入 |
+| `@orbit-work/ui/styles/workbench.css` | 完整 Workbench 样式 profile（core + Office + FileTree） |
+| `@orbit-work/ui/styles/tailwind.css` | 宿主构建期使用的 Tailwind 语义 token 合同；只用于 `@reference` |
+
+Web 应用先引入一次 `core.css`，再按实际功能增加可选适配。完整 Workbench renderer 引入
+`workbench.css`；Electron 的 `app-region` 命中区由 Desktop 宿主自己的
+`renderer/electron-shell.css` 持有。组件视觉由组件源码自身持有，
+不要与其他 profile 重复组合。不存在隐式的“全量入口”；每个消费者必须明确选择职责。
+UI 样式不扫描消费方源码。需要在应用层使用 Tailwind utility 的宿主必须由自己的构建入口扫描自己的源码，
+并通过 `@reference "@orbit-work/ui/styles/tailwind.css"` 复用同一套语义 token。
+
+Token 的唯一可编辑产品源是 `src/tokens/*.ts`，`styles/tokens*.css` 均由脚本生成。
+`contracts/ds2-spec.json` 只保存设计仓库上游快照；Orbitwork 自有 token 与经过审查的上游覆盖登记在
+`contracts/ds2-extensions.json`。`pnpm check:ds2` 双向校验上游合同、本地扩展和最终 CSS，禁止静默缺失、
+未登记新增、单主题 token 或陈旧登记。
+
+## 样式所有权与定制合同
+
+组件的结构、几何和交互态由组件自己持有。优先在组件内使用 Tailwind utility 与 DS2 `--ow-*` 语义 token；只有第三方内容、复杂伪元素或确有级联需要时才使用同目录 CSS。`styles/` 根目录只保留 token、reset、跨组件壳体和明确的第三方适配，不能成为页面私有样式仓库。
+
+视觉类名是实现细节，不是 API。公开结构合同统一为：
+
+- `data-slot="component-name"`：组件根或稳定子组件；
+- `data-ow-part="part-name"`：必须在所属 `data-slot` 下定位的公开部件；
+- `data-ow-state` / `data-ow-role` / `data-ow-kind`：文档列出的状态维度；
+- props、具名 ReactNode 槽和回调：调整内容、布局和行为的首选入口。
+
+对外导出的组件中，已由 Story 与 Source test 固化的 slot/part 名是组件和自动化合同，但它们不会自动成为皮肤权限。可由皮肤精准覆写的 selector 及属性以 `ORBITWORK_SKIN_PUBLIC_PARTS` 为唯一白名单。不要用裸 `[data-ow-part="body"]`；`body`、`title`、`action` 会在很多组件重复。精准规则必须从组件根开始：
+
+```css
+[data-slot="artifact-preview-card"] [data-ow-part="meta"] {
+  color: var(--ow-text-2);
+  font-weight: 500;
+}
+```
+
+消费顺序从稳定到精细依次为：组件 props/组合槽 → 主题 token → 官方开放且由皮肤登记用途的 public-part 精准规则。OEM 改页面结构应走 Slot 的包裹或替换，不应复制宿主 DOM 后覆盖内部类名。运行时皮肤的每条精准规则都必须写入 `contributes.registry`，且 selector 与 CSS 属性都必须出现在 UI 官方白名单中；导入器会拒绝自报 selector、裸 part、视觉类、未登记规则、外部 URL、锁定件和 DS2 禁止的几何/动效/颜色。
 
 ## 目录结构
 
 ```text
 packages/ui/
 ├── src/
-│   ├── components/    # React 组件（primitives / composite / domain / Layout）
+│   ├── components/    # React 组件（primitives / composite / domain / layout）
 │   ├── hooks/         # 通用 Hooks
+│   ├── slot/          # Slot 的 React-free core 与 React bindings
 │   ├── theme/         # 主题、皮肤（skins）与 ThemeProvider
 │   ├── tokens/        # Design Tokens 定义
 │   ├── lib/           # 独立入口（appearance / about-window / browser-annotation-popup）
 │   └── utils/         # 工具函数
 ├── styles/            # 全局样式与组件样式源文件
+├── contracts/         # 上游 DS2 快照与 Orbitwork Token 扩展合同
 ├── scripts/           # 构建与代码生成脚本
 └── .storybook/        # Storybook 文档站配置
 ```
 
-## 研发与测试规范
-
-开发或修改组件前，Coding Agent 应先阅读以下规范文档：
+## 维护指南
 
-- **研发规范**：仓库根 [`AGENTS.md`](../../AGENTS.md) — 硬性规则、Token 约束、Story 强制、工程纪律
-- **组件开发工作流**：[`.agents/skills/ui-development/`](../../.agents/skills/ui-development/SKILL.md) — 新组件的创建流程与目录约定
-- **测试规范**：[`AGENTS.md`](../../AGENTS.md) 的「测试分层」章节 + [`.agents/skills/ui-quality/`](../../.agents/skills/ui-quality/) — 单元测试与 Storybook 视觉测试标准
+修改组件、样式、公共入口或质量守卫前，请阅读同目录的 [`AGENTS.md`](./AGENTS.md)。其中记录了 UI 包的代码所有权、分层边界、组件生产流程、DS 2.0 约束和验证要求。
 
 ## 本地开发
 
@@ -60,51 +110,3 @@ pnpm build          # 构建组件库（ESM/CJS + 样式产物）
 pnpm typecheck      # TypeScript 类型检查
 pnpm test           # 运行单元测试
 ```
-
-## DS 2.0 守卫（`pnpm check:ds2`）
-
-`scripts/check-ds2.mjs` 扫 `src/components/**` 与 `styles/*.css`（`tokens*.css` 是生成物，跳过；
-`*.test.mjs` 也跳过——源码守卫测试的正文本来就是「被禁写法的正则字面量」），把 DS 2.0 契约里
-**改一次就会全库漂**的那几条钉成 HARD 规则（`exit 1`）；另有 WARN 级只打印不拦。
-规则体在 `scripts/ds2-rules.mjs`（纯函数，可单测），测试在 `scripts/check-ds2.test.mjs`
-（`pnpm test:ds2`，也含在 `pnpm test` 里）。
-
-| 规则 | 抓什么 | 正解 |
-| --- | --- | --- |
-| `yellow` | 荧黄/信标极色写死 | 经语义 token 或品牌锁定件取色 |
-| `paper` / `stage` / `term` | 恒定域 token 越出各自语境 | 只在文档纸面 / login·share·splash / 终端语境用 |
-| `primary` | 共享 CSS 里裸引 `--ow-primary` 族 | 见下 `primary-nonpole` |
-| `v1-naming` | V1 token 与类名回流 | DS2 语义 token |
-| `disabled` | 统一透明度禁用态 | 逐 token 禁用色 |
-| `hover-move` | hover 位移/缩放 | hover 只换色 |
-| `shimmer` | 流光扫过动效 | 呼吸（opacity）或静止 |
-| `drift` | `styles/tokens.css` 与设计侧规格 `tokens/ds2-spec.json` 逐值比对 | 改设计仓库后 `--update-spec` 重抽 |
-
-W5 防回流批（新增）：
-
-| 规则 | 抓什么 | 正解 |
-| --- | --- | --- |
-| `radius-literal` | `border-radius: Npx` / `rounded-[Npx]`，N ∉ {0,4,6,8,10,12,16,999,9999}；组件层的裸 Tailwind 圆角刻度类（`rounded-md/lg/2xl…`，含侧向变体） | `[border-radius:var(--ow-radius-*)]` 或 ow 圆角类。`rounded-none` / `rounded-full` 不禁；`calc()/min()/max()/clamp()` 里的 px 不计 |
-| `grounded-shadow` | 在贴地面上消费 `var(--ow-shadow-1\|-2)` / `shadow-ow-shadow-1\|2` | §5 平面贴地零影：分层用 `1px var(--ow-border)`。投影只属 popover/menu/modal/dialog/toast/tooltip/pet/floating 等真悬浮层，且要逐条进 allowlist |
-| `bare-transition` | `transition-all/-colors/-opacity/-shadow/-transform/-[…]` 未配 `duration-[var(--ow-dur-*)]`；CSS/内联/`duration-…` 里的字面时长 ∉ {120,200,320}ms | `--ow-dur-1/2/3` ＋ `--ow-ease(-beacon)`。reduced-motion 兜底(0.01ms)、skeleton/呼吸(1.6s)、自转、第三方皮肤在 allowlist |
-| `primary-nonpole` | 组件层的 `var(--ow-primary…)`、全库的 `(bg\|text\|border)-ow-primary*` 类 | §4 行动极唯一：焦点→`--ow-focus-ring`、选中→`--ow-current-bg`/`--ow-control-on`、链接→`--ow-link`、hover→`--ow-hover`、tint→`--ow-info-tint` 族、实底字→`--ow-on-fill`、真主按钮→`--ow-btn-primary-*` |
-| `control-height` | `h-9` / `h-11` / `h-[NNpx]` / `min-h-[NNpx]` 与 `height\|min-height: NNpx`，NN ∈ {22,24,26,30,34,35,36,38,44,46,48} | §7 控件高只有 {28,32,40}：`--ow-h-sm/md/lg`、行高 `--ow-row-h(-dense)`；48 只属标题带，写成 `var(--ow-titlebar-h)`。`max-height`/`line-height` 与算式里的 px 不计 |
-| `unlayered-global` | `styles/*.css` 里 `@layer` 之外、选择器是 `*` 或裸元素名的规则 | 收进 `@layer base { }`。Tailwind v4 里未分层声明永远压过 `@layer utilities`，这种规则会静默压死整库工具类 |
-
-### allowlist
-
-`scripts/ds2-allowlist.json`：规则名 → 条目数组，每条都要在 `$reasons` 里写理由
-（测试会验「有条目必有 `$reasons`」）。条目两种写法：
-
-```jsonc
-"src/components/composite/Splash/**",              // 整路径豁免
-"styles/desktop-surfaces.css::.scroll-fab"         // 只豁免该文件里 scope 含 needle 的命中
-```
-
-`needle` 按子串、大小写不敏感地匹配命中的 **scope**：CSS 命中的 scope 是
-`选择器 { 声明原文 }`，源码命中的 scope 是出事那行。选择器级豁免是新规的必需品——
-`desktop-surfaces.css` 是六千行共享表，整文件豁免等于把规则关掉。
-
-写 `$reasons` 的要求是**说清它凭什么是例外**，不是「历史如此」：`control-height` 要写
-它为什么不是控件（图标位／头像位／内容缩略盒／只读标签／文本块下限），`grounded-shadow`
-要写它凭什么算悬浮层，`primary-nonpole` 要写它凭什么占行动极。

package/dist/about-window.cjs

@@ -1 +1,271 @@
-'use strict';var chunk5VLBKOG7_cjs=require('./chunk-5VLBKOG7.cjs');Object.defineProperty(exports,"renderAboutWindowHtml",{enumerable:true,get:function(){return chunk5VLBKOG7_cjs.a}});
+"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _optionalChain(ops) { let lastAccessLHS = undefined; let value = ops[0]; let i = 1; while (i < ops.length) { const op = ops[i]; const fn = ops[i + 1]; i += 2; if ((op === 'optionalAccess' || op === 'optionalCall') && value == null) { return undefined; } if (op === 'access' || op === 'optionalAccess') { lastAccessLHS = value; value = fn(value); } else if (op === 'call' || op === 'optionalCall') { value = fn((...args) => value.call(lastAccessLHS, ...args)); lastAccessLHS = undefined; } } return value; }// src/lib/about-window.ts
+function renderAboutWindowHtml({
+  version,
+  notes,
+  logoSvg,
+  logoDataUrl,
+  theme,
+  productName = "Orbitwork"
+}) {
+  const versionText = escapeHtml(version.trim() || "\u672A\u77E5");
+  const notesText = escapeHtml(notes.trim() || "\u6682\u65E0\u7248\u672C\u8BF4\u660E");
+  const brandText = escapeHtml(productName.trim() || "Orbitwork");
+  const logoMarkup = logoDataUrl ? `<img src="${escapeHtml(logoDataUrl)}" alt="" aria-hidden="true" />` : logoSvg;
+  const light = resolvePalette(_optionalChain([theme, 'optionalAccess', _ => _.light]), {
+    bg: "#F7F6F1",
+    surface: "#FDFDFC",
+    border: "#DCDCD7",
+    text: "#333B50",
+    text2: "#646B7A"
+  });
+  const dark = resolvePalette(_optionalChain([theme, 'optionalAccess', _2 => _2.dark]), {
+    bg: "#16171B",
+    surface: "#1E2025",
+    border: "#2A2C33",
+    text: "#ECEBE5",
+    text2: "#82878F"
+  });
+  const brandPaletteCss = _optionalChain([theme, 'optionalAccess', _3 => _3.light]) || _optionalChain([theme, 'optionalAccess', _4 => _4.dark]) ? `
+  :root {
+    --about-bg: ${light.bg};
+    --about-surface: ${light.surface};
+    --about-border: ${light.border};
+    --about-text: ${light.text};
+    --about-text-2: ${light.text2};
+  }
+  @media (prefers-color-scheme: dark) {
+    :root:not([data-theme="light"]) {
+      --about-bg: ${dark.bg};
+      --about-surface: ${dark.surface};
+      --about-border: ${dark.border};
+      --about-text: ${dark.text};
+      --about-text-2: ${dark.text2};
+    }
+  }
+  :root[data-theme="dark"] {
+    --about-bg: ${dark.bg};
+    --about-surface: ${dark.surface};
+    --about-border: ${dark.border};
+    --about-text: ${dark.text};
+    --about-text-2: ${dark.text2};
+  }` : "";
+  return `<!doctype html>
+<html lang="zh-CN">
+<head>
+<meta charset="utf-8" />
+<meta http-equiv="Content-Security-Policy" content="default-src 'none'; style-src 'unsafe-inline'; img-src data:;" />
+<meta name="viewport" content="width=device-width, initial-scale=1" />
+<title>\u5173\u4E8E ${brandText}</title>
+<style>
+  /*
+   * \u8FD9\u662F\u4E00\u4EFD\u72EC\u7ACB document\uFF08Electron \u81EA\u7ED8\u7A97\uFF0Cdata: URL \u8F7D\u5165\uFF09\uFF0C--ow-* \u4E3B token \u8868\u4E0D\u5728\u573A\uFF0C
+   * \u4E5F\u6CA1\u6709\u4EFB\u4F55\u5B57\u4F53\u6587\u4EF6\u53EF\u52A0\u8F7D\uFF08CSP \u65E0 font-src\uFF09\u3002\u6240\u4EE5\u914D\u8272\u4E00\u5F8B\u300C\u6284 DS 2.0 \u7EC8\u503C\u300D\u800C\u975E\u5F15\u7528\u53D8\u91CF\uFF0C
+   * \u6BCF\u7EC4\u503C\u65C1\u6CE8\u660E\u51FA\u5904\uFF1B\u5B57\u4F53\u53EA\u5199\u65CF\u540D\u6808\u5E76\u7ED9\u5230\u7CFB\u7EDF\u7EA7\u56DE\u9000\u3002
+   * \u9ED8\u8BA4\u503C\u51FA\u5904\uFF1Apackages/ui/src/tokens/light.ts \xB7 dark.ts \xB7 base.ts \xB7 metrics.ts\uFF1B
+   * \u767D\u6807\u5BBF\u4E3B\u53EF\u901A\u8FC7\u5DF2\u7ECF\u5BA1\u8BA1\u7684\u660E\u6697 palette \u8986\u76D6\u5BF9\u5E94\u8BED\u4E49\u8272\u3002
+   */
+  :root {
+    /* ---- \u6D45\u6863\uFF1A\u6284\u81EA tokens light \u7EC8\u503C ---- */
+    --about-bg: #F7F6F1;               /* light --ow-bg = gray-00 */
+    --about-surface: #FDFDFC;          /* light --ow-surface */
+    --about-border: #DCDCD7;           /* light --ow-border = gray-10 */
+    --about-text: #333B50;             /* light --ow-text = gray-70 */
+    --about-text-2: #646B7A;           /* light --ow-text-2 = gray-50\uFF08--ow-eyebrow \u540C\u503C\uFF09 */
+    --about-scrollbar: #C2C3C1;        /* light --ow-scrollbar = gray-20 */
+    --about-scrollbar-hover: #A2A5A9;  /* light --ow-scrollbar-hover = gray-30 */
+    --about-selection-bg: #0F1B3D;     /* light --ow-selection-bg = navy */
+    --about-selection-fg: #F7F6F1;     /* light --ow-selection-text = white */
+
+    /* ---- \u5F62\u72B6\u4E0E\u5EA6\u91CF\uFF1A\u6284\u81EA base.ts / metrics.ts\uFF08\u5F62\u72B6\u8868 \xA77\uFF09 ---- */
+    --about-space-2: 8px;              /* --ow-space-2 */
+    --about-space-4: 16px;             /* --ow-space-4 */
+    --about-space-5: 20px;             /* --ow-space-5 */
+    --about-space-6: 24px;             /* --ow-space-6 */
+    --about-space-8: 32px;             /* --ow-space-8 */
+    --about-radius-lg: 12px;           /* --ow-radius-lg\uFF08\u5361\u7247\u6863\uFF09 */
+    --about-radius-pill: 999px;        /* --ow-radius-pill */
+    --about-border-w: 1px;             /* --ow-border-width-default\uFF08\u8D34\u5730 1px \u8FB9\u6846\uFF09 */
+    --about-fs-body: 14px;             /* --ow-fs-body */
+    --about-fs-ui: 13px;               /* --ow-fs-ui */
+    --about-fs-eyebrow-cjk: 12px;      /* --ow-fs-eyebrow-cjk */
+    --about-ls-eyebrow-cjk: 0.08em;    /* --ow-ls-eyebrow-cjk */
+    --about-lh-ui: 1.5;                /* --ow-lh-ui */
+    --about-lh-body: 1.75;             /* --ow-lh-body */
+    --about-fw-medium: 500;            /* --ow-font-weight-medium */
+    --about-fw-semibold: 600;          /* --ow-font-weight-semibold */
+    --about-dur-2: 200ms;              /* --ow-dur-2\uFF08\u4E3B\u9898\u5207\u6362\u8FC7\u6E21\uFF0C\xA79\uFF09 */
+    --about-ease: cubic-bezier(0.22, 1, 0.36, 1); /* --ow-ease-beacon\uFF08\u552F\u4E00\u7F13\u52A8\uFF09 */
+
+    /* ---- \u5B57\u65CF\u6808\uFF1A\u6284\u81EA base.ts \u7684\u65CF\u540D\uFF0C\u5C3E\u90E8\u8865\u72EC\u7ACB document \u53EF\u7528\u7684\u7CFB\u7EDF\u56DE\u9000\uFF1Bemoji \u65CF\u7F6E\u6808\u5C3E\uFF08\xA78\uFF09 ---- */
+    --about-font-sans: "HarmonyOS Sans SC", "Noto Sans SC", -apple-system, BlinkMacSystemFont,
+      "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif, "Apple Color Emoji",
+      "Segoe UI Emoji", "Noto Color Emoji";
+    --about-font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, Consolas,
+      "HarmonyOS Sans SC", "Noto Sans SC", "PingFang SC", "Microsoft YaHei", monospace,
+      "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji";
+
+    color-scheme: light dark;
+  }
+  /* ---- \u6697\u6863\uFF1A\u6284\u81EA tokens dark \u7EC8\u503C\u3002\u5C5E\u6027\u4F18\u5148\uFF08\u5BBF\u4E3B\u53EF\u9489 data-theme\uFF09\uFF0C\u65E0\u5C5E\u6027\u65F6\u968F\u7CFB\u7EDF ---- */
+  @media (prefers-color-scheme: dark) {
+    :root:not([data-theme="light"]) {
+      --about-bg: #16171B;               /* dark --ow-bg = graphite */
+      --about-surface: #1E2025;          /* dark --ow-surface = graphite-raised */
+      --about-border: #2A2C33;           /* dark --ow-border = graphite-border */
+      --about-text: #ECEBE5;             /* dark --ow-text = gray-05 */
+      --about-text-2: #82878F;           /* dark --ow-text-2 = gray-40 */
+      --about-scrollbar: #3A3D46;        /* dark --ow-scrollbar */
+      --about-scrollbar-hover: #4A5164;  /* dark --ow-scrollbar-hover */
+      --about-selection-bg: #F7F6F1;     /* dark --ow-selection-bg */
+      --about-selection-fg: #0F1B3D;     /* dark --ow-selection-text = navy */
+    }
+  }
+  :root[data-theme="dark"] {
+    /* \u4E0E\u4E0A\u65B9\u5A92\u4F53\u67E5\u8BE2\u5757\u9010\u503C\u4E00\u81F4 */
+    --about-bg: #16171B;
+    --about-surface: #1E2025;
+    --about-border: #2A2C33;
+    --about-text: #ECEBE5;
+    --about-text-2: #82878F;
+    --about-scrollbar: #3A3D46;
+    --about-scrollbar-hover: #4A5164;
+    --about-selection-bg: #F7F6F1;
+    --about-selection-fg: #0F1B3D;
+  }
+
+  ${brandPaletteCss}
+  * { box-sizing: border-box; }
+  html {
+    width: 100%;
+    height: 100%;
+    background: var(--about-bg);
+  }
+  body {
+    width: 100%;
+    height: 100%;
+    margin: 0;
+    overflow: hidden;
+    color: var(--about-text);
+    background: var(--about-bg);
+    font-family: var(--about-font-sans);
+    -webkit-font-smoothing: antialiased;
+    -webkit-user-select: none;
+    user-select: none;
+    transition: background-color var(--about-dur-2) var(--about-ease),
+      color var(--about-dur-2) var(--about-ease);
+  }
+  ::selection {
+    background: var(--about-selection-bg);
+    color: var(--about-selection-fg);
+  }
+  /* \u62D6\u62FD\u6761 28px\uFF1D\u4E0E trafficLightPosition y:14 \u5BF9\u79F0\u7684\u529F\u80FD\u51E0\u4F55\uFF0C\u975E\u95F4\u8DDD\u9636\uFF0C\u4FDD\u6301\u4E0D\u52A8 */
+  [data-slot="about-window"] [data-ow-part="drag-region"] { height: 28px; -webkit-app-region: drag; }
+  [data-slot="about-window"] [data-ow-part="content"] {
+    height: calc(100% - 28px);
+    min-height: 0;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    padding: var(--about-space-2) var(--about-space-8) var(--about-space-6);
+  }
+  /* \u5B57\u6807\u8D34\u5730\uFF1A\xA75\u300C\u5F71\u5B50\u53EA\u5C5E\u79BB\u5730\u4E4B\u7269\u300D\u2014\u2014\u539F\u6765\u7684\u88C5\u9970\u6295\u5F71\uFF08filter \u8F89\u5149\uFF092.0 \u4E00\u5F8B\u6E05\u9664 */
+  [data-slot="about-window"] [data-ow-part="logo"] {
+    width: 84px;
+    height: 84px;
+    flex: 0 0 auto;
+    display: grid;
+    place-items: center;
+  }
+  [data-slot="about-window"] [data-ow-part="logo"] svg,
+  [data-slot="about-window"] [data-ow-part="logo"] img {
+    width: 84px;
+    height: 84px;
+    display: block;
+    object-fit: contain;
+  }
+  [data-slot="about-window"] [data-ow-part="version"] {
+    margin-top: var(--about-space-4);
+    color: var(--about-text);
+    /* \u7248\u672C\u53F7\uFF1D\u8BFB\u6570\uFF0C\xA77 \u4E00\u5F8B mono\uFF0Btabular-nums */
+    font-family: var(--about-font-mono);
+    font-size: var(--about-fs-body);
+    font-weight: var(--about-fw-semibold);
+    line-height: var(--about-lh-ui);
+    font-variant-numeric: tabular-nums;
+    -webkit-user-select: text;
+    user-select: text;
+  }
+  [data-slot="about-window"] [data-ow-part="notes"] {
+    width: 100%;
+    min-height: 0;
+    flex: 1 1 auto;
+    margin-top: var(--about-space-5);
+    overflow-y: auto;
+    /* \u8D34\u5730\u4E4B\u7269\uFF1A0 \u5F71\uFF0B1px \u8FB9\u6846\uFF08\xA75\uFF09 */
+    border: var(--about-border-w) solid var(--about-border);
+    border-radius: var(--about-radius-lg);
+    padding: var(--about-space-4);
+    background: var(--about-surface);
+    -webkit-user-select: text;
+    user-select: text;
+    transition: background-color var(--about-dur-2) var(--about-ease),
+      border-color var(--about-dur-2) var(--about-ease);
+  }
+  /* \u300C\u7248\u672C\u8BF4\u660E\u300D\uFF1D\u4E2D\u6587\u7709\u6807\uFF1A500 / 12px / +0.08em / --ow-eyebrow\uFF08\xA78\uFF09 */
+  [data-slot="about-window"] [data-ow-part="notes-title"] {
+    margin: 0;
+    color: var(--about-text-2);
+    font-size: var(--about-fs-eyebrow-cjk);
+    font-weight: var(--about-fw-medium);
+    letter-spacing: var(--about-ls-eyebrow-cjk);
+    line-height: var(--about-lh-ui);
+  }
+  [data-slot="about-window"] [data-ow-part="notes-body"] {
+    margin: var(--about-space-2) 0 0;
+    color: var(--about-text);
+    font-size: var(--about-fs-ui);
+    line-height: var(--about-lh-body);
+    white-space: pre-wrap;
+    overflow-wrap: anywhere;
+  }
+  ::-webkit-scrollbar { width: var(--about-space-2); }
+  ::-webkit-scrollbar-thumb {
+    border-radius: var(--about-radius-pill);
+    background: var(--about-scrollbar);
+  }
+  ::-webkit-scrollbar-thumb:hover { background: var(--about-scrollbar-hover); }
+  @media (prefers-reduced-motion: reduce) {
+    body, [data-slot="about-window"] [data-ow-part="notes"] { transition: none; }
+  }
+</style>
+</head>
+<body data-slot="about-window">
+  <div data-ow-part="drag-region" aria-hidden="true"></div>
+  <main data-ow-part="content">
+    <div data-ow-part="logo" aria-label="${brandText} Logo" role="img">${logoMarkup}</div>
+    <div data-ow-part="version">\u7248\u672C ${versionText}</div>
+    <section data-ow-part="notes" aria-labelledby="about-notes-title">
+      <h1 data-ow-part="notes-title" id="about-notes-title">\u7248\u672C\u8BF4\u660E</h1>
+      <p data-ow-part="notes-body">${notesText}</p>
+    </section>
+  </main>
+</body>
+</html>`;
+}
+function escapeHtml(value) {
+  return value.replaceAll("&", "&amp;").replaceAll("<", "&lt;").replaceAll(">", "&gt;").replaceAll('"', "&quot;").replaceAll("'", "&#39;");
+}
+function resolvePalette(source, fallback) {
+  const color = (value, defaultValue) => value && /^#[0-9a-f]{6}$/i.test(value) ? value : defaultValue;
+  return {
+    bg: color(_optionalChain([source, 'optionalAccess', _5 => _5.bg]), fallback.bg),
+    surface: color(_optionalChain([source, 'optionalAccess', _6 => _6.surface]), fallback.surface),
+    border: color(_optionalChain([source, 'optionalAccess', _7 => _7.border]), fallback.border),
+    text: color(_optionalChain([source, 'optionalAccess', _8 => _8.text]), fallback.text),
+    text2: color(_optionalChain([source, 'optionalAccess', _9 => _9.text2]), fallback.text2)
+  };
+}
+
+
+exports.renderAboutWindowHtml = renderAboutWindowHtml;
+//# sourceMappingURL=about-window.cjs.map

package/dist/about-window.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["/Users/wowzin/projects/orbit/packages/ui/dist/about-window.cjs","../src/lib/about-window.ts"],"names":[],"mappings":"AAAA;AC0BO,SAAS,qBAAA,CAAsB;AAAA,EACpC,OAAA;AAAA,EACA,KAAA;AAAA,EACA,OAAA;AAAA,EACA,WAAA;AAAA,EACA,KAAA;AAAA,EACA,YAAA,EAAc;AAChB,CAAA,EAA+B;AAC7B,EAAA,MAAM,YAAA,EAAc,UAAA,CAAW,OAAA,CAAQ,IAAA,CAAK,EAAA,GAAK,cAAI,CAAA;AACrD,EAAA,MAAM,UAAA,EAAY,UAAA,CAAW,KAAA,CAAM,IAAA,CAAK,EAAA,GAAK,sCAAQ,CAAA;AACrD,EAAA,MAAM,UAAA,EAAY,UAAA,CAAW,WAAA,CAAY,IAAA,CAAK,EAAA,GAAK,WAAW,CAAA;AAC9D,EAAA,MAAM,WAAA,EAAa,YAAA,EAAc,CAAA,UAAA,EAAa,UAAA,CAAW,WAAW,CAAC,CAAA,8BAAA,EAAA,EAAmC,OAAA;AACxG,EAAA,MAAM,MAAA,EAAQ,cAAA,iBAAe,KAAA,2BAAO,OAAA,EAAO;AAAA,IACzC,EAAA,EAAI,SAAA;AAAA,IACJ,OAAA,EAAS,SAAA;AAAA,IACT,MAAA,EAAQ,SAAA;AAAA,IACR,IAAA,EAAM,SAAA;AAAA,IACN,KAAA,EAAO;AAAA,EACT,CAAC,CAAA;AACD,EAAA,MAAM,KAAA,EAAO,cAAA,iBAAe,KAAA,6BAAO,MAAA,EAAM;AAAA,IACvC,EAAA,EAAI,SAAA;AAAA,IACJ,OAAA,EAAS,SAAA;AAAA,IACT,MAAA,EAAQ,SAAA;AAAA,IACR,IAAA,EAAM,SAAA;AAAA,IACN,KAAA,EAAO;AAAA,EACT,CAAC,CAAA;AACD,EAAA,MAAM,gBAAA,kBACJ,KAAA,6BAAO,QAAA,mBAAS,KAAA,6BAAO,OAAA,EACnB,CAAA;AAAA;AAAA,gBAAA,EAEU,KAAA,CAAM,EAAE,CAAA;AAAA,qBAAA,EACH,KAAA,CAAM,OAAO,CAAA;AAAA,oBAAA,EACd,KAAA,CAAM,MAAM,CAAA;AAAA,kBAAA,EACd,KAAA,CAAM,IAAI,CAAA;AAAA,oBAAA,EACR,KAAA,CAAM,KAAK,CAAA;AAAA;AAAA;AAAA;AAAA,kBAAA,EAIb,IAAA,CAAK,EAAE,CAAA;AAAA,uBAAA,EACF,IAAA,CAAK,OAAO,CAAA;AAAA,sBAAA,EACb,IAAA,CAAK,MAAM,CAAA;AAAA,oBAAA,EACb,IAAA,CAAK,IAAI,CAAA;AAAA,sBAAA,EACP,IAAA,CAAK,KAAK,CAAA;AAAA;AAAA;AAAA;AAAA,gBAAA,EAIhB,IAAA,CAAK,EAAE,CAAA;AAAA,qBAAA,EACF,IAAA,CAAK,OAAO,CAAA;AAAA,oBAAA,EACb,IAAA,CAAK,MAAM,CAAA;AAAA,kBAAA,EACb,IAAA,CAAK,IAAI,CAAA;AAAA,oBAAA,EACP,IAAA,CAAK,KAAK,CAAA;AAAA,GAAA,EAAA,EAExB,EAAA;AAEN,EAAA,OAAO,CAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,oBAAA,EAMG,SAAS,CAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAA,EA8EjB,eAAe,CAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,yCAAA,EA6GwB,SAAS,CAAA,kBAAA,EAAqB,UAAU,CAAA;AAAA,6CAAA,EAC9C,WAAW,CAAA;AAAA;AAAA;AAAA,mCAAA,EAGX,SAAS,CAAA;AAAA;AAAA;AAAA;AAAA,OAAA,CAAA;AAK9C;AAEA,SAAS,UAAA,CAAW,KAAA,EAAuB;AACzC,EAAA,OAAO,KAAA,CACJ,UAAA,CAAW,GAAA,EAAK,OAAO,CAAA,CACvB,UAAA,CAAW,GAAA,EAAK,MAAM,CAAA,CACtB,UAAA,CAAW,GAAA,EAAK,MAAM,CAAA,CACtB,UAAA,CAAW,GAAA,EAAK,QAAQ,CAAA,CACxB,UAAA,CAAW,GAAA,EAAK,OAAO,CAAA;AAC5B;AAEA,SAAS,cAAA,CAAe,MAAA,EAAwC,QAAA,EAAwC;AACtG,EAAA,MAAM,MAAA,EAAQ,CAAC,KAAA,EAA2B,YAAA,EAAA,GACxC,MAAA,GAAS,iBAAA,CAAkB,IAAA,CAAK,KAAK,EAAA,EAAI,MAAA,EAAQ,YAAA;AACnD,EAAA,OAAO;AAAA,IACL,EAAA,EAAI,KAAA,iBAAM,MAAA,6BAAQ,IAAA,EAAI,QAAA,CAAS,EAAE,CAAA;AAAA,IACjC,OAAA,EAAS,KAAA,iBAAM,MAAA,6BAAQ,SAAA,EAAS,QAAA,CAAS,OAAO,CAAA;AAAA,IAChD,MAAA,EAAQ,KAAA,iBAAM,MAAA,6BAAQ,QAAA,EAAQ,QAAA,CAAS,MAAM,CAAA;AAAA,IAC7C,IAAA,EAAM,KAAA,iBAAM,MAAA,6BAAQ,MAAA,EAAM,QAAA,CAAS,IAAI,CAAA;AAAA,IACvC,KAAA,EAAO,KAAA,iBAAM,MAAA,6BAAQ,OAAA,EAAO,QAAA,CAAS,KAAK;AAAA,EAC5C,CAAA;AACF;ADpCA;AACE;AACF,sDAAC","file":"/Users/wowzin/projects/orbit/packages/ui/dist/about-window.cjs","sourcesContent":[null,"export type AboutWindowPalette = {\n  bg?: string\n  surface?: string\n  border?: string\n  text?: string\n  text2?: string\n}\n\nexport interface AboutWindowContent {\n  version: string\n  notes: string\n  logoSvg: string\n  /** Audited build-time image for branded native hosts. Takes precedence over logoSvg. */\n  logoDataUrl?: string\n  theme?: { light?: AboutWindowPalette; dark?: AboutWindowPalette }\n  /**\n   * 品牌名：驱动文档标题与 logo 无障碍标签。缺省 \"Orbitwork\" 是 DS2 默认\n   * 品牌值（非旧格式兼容）——白标宿主经桌面端 brand.json 注入。\n   */\n  productName?: string\n}\n\n/**\n * Renders the shared, self-contained content for Orbitwork's native About window.\n * Electron owns the window lifecycle; ow-ui owns its visual structure and CSS.\n */\nexport function renderAboutWindowHtml({\n  version,\n  notes,\n  logoSvg,\n  logoDataUrl,\n  theme,\n  productName = \"Orbitwork\",\n}: AboutWindowContent): string {\n  const versionText = escapeHtml(version.trim() || \"未知\")\n  const notesText = escapeHtml(notes.trim() || \"暂无版本说明\")\n  const brandText = escapeHtml(productName.trim() || \"Orbitwork\")\n  const logoMarkup = logoDataUrl ? `<img src=\"${escapeHtml(logoDataUrl)}\" alt=\"\" aria-hidden=\"true\" />` : logoSvg\n  const light = resolvePalette(theme?.light, {\n    bg: \"#F7F6F1\",\n    surface: \"#FDFDFC\",\n    border: \"#DCDCD7\",\n    text: \"#333B50\",\n    text2: \"#646B7A\",\n  })\n  const dark = resolvePalette(theme?.dark, {\n    bg: \"#16171B\",\n    surface: \"#1E2025\",\n    border: \"#2A2C33\",\n    text: \"#ECEBE5\",\n    text2: \"#82878F\",\n  })\n  const brandPaletteCss =\n    theme?.light || theme?.dark\n      ? `\n  :root {\n    --about-bg: ${light.bg};\n    --about-surface: ${light.surface};\n    --about-border: ${light.border};\n    --about-text: ${light.text};\n    --about-text-2: ${light.text2};\n  }\n  @media (prefers-color-scheme: dark) {\n    :root:not([data-theme=\"light\"]) {\n      --about-bg: ${dark.bg};\n      --about-surface: ${dark.surface};\n      --about-border: ${dark.border};\n      --about-text: ${dark.text};\n      --about-text-2: ${dark.text2};\n    }\n  }\n  :root[data-theme=\"dark\"] {\n    --about-bg: ${dark.bg};\n    --about-surface: ${dark.surface};\n    --about-border: ${dark.border};\n    --about-text: ${dark.text};\n    --about-text-2: ${dark.text2};\n  }`\n      : \"\"\n\n  return `<!doctype html>\n<html lang=\"zh-CN\">\n<head>\n<meta charset=\"utf-8\" />\n<meta http-equiv=\"Content-Security-Policy\" content=\"default-src 'none'; style-src 'unsafe-inline'; img-src data:;\" />\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\" />\n<title>关于 ${brandText}</title>\n<style>\n  /*\n   * 这是一份独立 document（Electron 自绘窗，data: URL 载入），--ow-* 主 token 表不在场，\n   * 也没有任何字体文件可加载（CSP 无 font-src）。所以配色一律「抄 DS 2.0 终值」而非引用变量，\n   * 每组值旁注明出处；字体只写族名栈并给到系统级回退。\n   * 默认值出处：packages/ui/src/tokens/light.ts · dark.ts · base.ts · metrics.ts；\n   * 白标宿主可通过已经审计的明暗 palette 覆盖对应语义色。\n   */\n  :root {\n    /* ---- 浅档：抄自 tokens light 终值 ---- */\n    --about-bg: #F7F6F1;               /* light --ow-bg = gray-00 */\n    --about-surface: #FDFDFC;          /* light --ow-surface */\n    --about-border: #DCDCD7;           /* light --ow-border = gray-10 */\n    --about-text: #333B50;             /* light --ow-text = gray-70 */\n    --about-text-2: #646B7A;           /* light --ow-text-2 = gray-50（--ow-eyebrow 同值） */\n    --about-scrollbar: #C2C3C1;        /* light --ow-scrollbar = gray-20 */\n    --about-scrollbar-hover: #A2A5A9;  /* light --ow-scrollbar-hover = gray-30 */\n    --about-selection-bg: #0F1B3D;     /* light --ow-selection-bg = navy */\n    --about-selection-fg: #F7F6F1;     /* light --ow-selection-text = white */\n\n    /* ---- 形状与度量：抄自 base.ts / metrics.ts（形状表 §7） ---- */\n    --about-space-2: 8px;              /* --ow-space-2 */\n    --about-space-4: 16px;             /* --ow-space-4 */\n    --about-space-5: 20px;             /* --ow-space-5 */\n    --about-space-6: 24px;             /* --ow-space-6 */\n    --about-space-8: 32px;             /* --ow-space-8 */\n    --about-radius-lg: 12px;           /* --ow-radius-lg（卡片档） */\n    --about-radius-pill: 999px;        /* --ow-radius-pill */\n    --about-border-w: 1px;             /* --ow-border-width-default（贴地 1px 边框） */\n    --about-fs-body: 14px;             /* --ow-fs-body */\n    --about-fs-ui: 13px;               /* --ow-fs-ui */\n    --about-fs-eyebrow-cjk: 12px;      /* --ow-fs-eyebrow-cjk */\n    --about-ls-eyebrow-cjk: 0.08em;    /* --ow-ls-eyebrow-cjk */\n    --about-lh-ui: 1.5;                /* --ow-lh-ui */\n    --about-lh-body: 1.75;             /* --ow-lh-body */\n    --about-fw-medium: 500;            /* --ow-font-weight-medium */\n    --about-fw-semibold: 600;          /* --ow-font-weight-semibold */\n    --about-dur-2: 200ms;              /* --ow-dur-2（主题切换过渡，§9） */\n    --about-ease: cubic-bezier(0.22, 1, 0.36, 1); /* --ow-ease-beacon（唯一缓动） */\n\n    /* ---- 字族栈：抄自 base.ts 的族名，尾部补独立 document 可用的系统回退；emoji 族置栈尾（§8） ---- */\n    --about-font-sans: \"HarmonyOS Sans SC\", \"Noto Sans SC\", -apple-system, BlinkMacSystemFont,\n      \"Segoe UI\", \"PingFang SC\", \"Microsoft YaHei\", sans-serif, \"Apple Color Emoji\",\n      \"Segoe UI Emoji\", \"Noto Color Emoji\";\n    --about-font-mono: \"IBM Plex Mono\", ui-monospace, \"SF Mono\", Menlo, Consolas,\n      \"HarmonyOS Sans SC\", \"Noto Sans SC\", \"PingFang SC\", \"Microsoft YaHei\", monospace,\n      \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Noto Color Emoji\";\n\n    color-scheme: light dark;\n  }\n  /* ---- 暗档：抄自 tokens dark 终值。属性优先（宿主可钉 data-theme），无属性时随系统 ---- */\n  @media (prefers-color-scheme: dark) {\n    :root:not([data-theme=\"light\"]) {\n      --about-bg: #16171B;               /* dark --ow-bg = graphite */\n      --about-surface: #1E2025;          /* dark --ow-surface = graphite-raised */\n      --about-border: #2A2C33;           /* dark --ow-border = graphite-border */\n      --about-text: #ECEBE5;             /* dark --ow-text = gray-05 */\n      --about-text-2: #82878F;           /* dark --ow-text-2 = gray-40 */\n      --about-scrollbar: #3A3D46;        /* dark --ow-scrollbar */\n      --about-scrollbar-hover: #4A5164;  /* dark --ow-scrollbar-hover */\n      --about-selection-bg: #F7F6F1;     /* dark --ow-selection-bg */\n      --about-selection-fg: #0F1B3D;     /* dark --ow-selection-text = navy */\n    }\n  }\n  :root[data-theme=\"dark\"] {\n    /* 与上方媒体查询块逐值一致 */\n    --about-bg: #16171B;\n    --about-surface: #1E2025;\n    --about-border: #2A2C33;\n    --about-text: #ECEBE5;\n    --about-text-2: #82878F;\n    --about-scrollbar: #3A3D46;\n    --about-scrollbar-hover: #4A5164;\n    --about-selection-bg: #F7F6F1;\n    --about-selection-fg: #0F1B3D;\n  }\n\n  ${brandPaletteCss}\n  * { box-sizing: border-box; }\n  html {\n    width: 100%;\n    height: 100%;\n    background: var(--about-bg);\n  }\n  body {\n    width: 100%;\n    height: 100%;\n    margin: 0;\n    overflow: hidden;\n    color: var(--about-text);\n    background: var(--about-bg);\n    font-family: var(--about-font-sans);\n    -webkit-font-smoothing: antialiased;\n    -webkit-user-select: none;\n    user-select: none;\n    transition: background-color var(--about-dur-2) var(--about-ease),\n      color var(--about-dur-2) var(--about-ease);\n  }\n  ::selection {\n    background: var(--about-selection-bg);\n    color: var(--about-selection-fg);\n  }\n  /* 拖拽条 28px＝与 trafficLightPosition y:14 对称的功能几何，非间距阶，保持不动 */\n  [data-slot=\"about-window\"] [data-ow-part=\"drag-region\"] { height: 28px; -webkit-app-region: drag; }\n  [data-slot=\"about-window\"] [data-ow-part=\"content\"] {\n    height: calc(100% - 28px);\n    min-height: 0;\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    padding: var(--about-space-2) var(--about-space-8) var(--about-space-6);\n  }\n  /* 字标贴地：§5「影子只属离地之物」——原来的装饰投影（filter 辉光）2.0 一律清除 */\n  [data-slot=\"about-window\"] [data-ow-part=\"logo\"] {\n    width: 84px;\n    height: 84px;\n    flex: 0 0 auto;\n    display: grid;\n    place-items: center;\n  }\n  [data-slot=\"about-window\"] [data-ow-part=\"logo\"] svg,\n  [data-slot=\"about-window\"] [data-ow-part=\"logo\"] img {\n    width: 84px;\n    height: 84px;\n    display: block;\n    object-fit: contain;\n  }\n  [data-slot=\"about-window\"] [data-ow-part=\"version\"] {\n    margin-top: var(--about-space-4);\n    color: var(--about-text);\n    /* 版本号＝读数，§7 一律 mono＋tabular-nums */\n    font-family: var(--about-font-mono);\n    font-size: var(--about-fs-body);\n    font-weight: var(--about-fw-semibold);\n    line-height: var(--about-lh-ui);\n    font-variant-numeric: tabular-nums;\n    -webkit-user-select: text;\n    user-select: text;\n  }\n  [data-slot=\"about-window\"] [data-ow-part=\"notes\"] {\n    width: 100%;\n    min-height: 0;\n    flex: 1 1 auto;\n    margin-top: var(--about-space-5);\n    overflow-y: auto;\n    /* 贴地之物：0 影＋1px 边框（§5） */\n    border: var(--about-border-w) solid var(--about-border);\n    border-radius: var(--about-radius-lg);\n    padding: var(--about-space-4);\n    background: var(--about-surface);\n    -webkit-user-select: text;\n    user-select: text;\n    transition: background-color var(--about-dur-2) var(--about-ease),\n      border-color var(--about-dur-2) var(--about-ease);\n  }\n  /* 「版本说明」＝中文眉标：500 / 12px / +0.08em / --ow-eyebrow（§8） */\n  [data-slot=\"about-window\"] [data-ow-part=\"notes-title\"] {\n    margin: 0;\n    color: var(--about-text-2);\n    font-size: var(--about-fs-eyebrow-cjk);\n    font-weight: var(--about-fw-medium);\n    letter-spacing: var(--about-ls-eyebrow-cjk);\n    line-height: var(--about-lh-ui);\n  }\n  [data-slot=\"about-window\"] [data-ow-part=\"notes-body\"] {\n    margin: var(--about-space-2) 0 0;\n    color: var(--about-text);\n    font-size: var(--about-fs-ui);\n    line-height: var(--about-lh-body);\n    white-space: pre-wrap;\n    overflow-wrap: anywhere;\n  }\n  ::-webkit-scrollbar { width: var(--about-space-2); }\n  ::-webkit-scrollbar-thumb {\n    border-radius: var(--about-radius-pill);\n    background: var(--about-scrollbar);\n  }\n  ::-webkit-scrollbar-thumb:hover { background: var(--about-scrollbar-hover); }\n  @media (prefers-reduced-motion: reduce) {\n    body, [data-slot=\"about-window\"] [data-ow-part=\"notes\"] { transition: none; }\n  }\n</style>\n</head>\n<body data-slot=\"about-window\">\n  <div data-ow-part=\"drag-region\" aria-hidden=\"true\"></div>\n  <main data-ow-part=\"content\">\n    <div data-ow-part=\"logo\" aria-label=\"${brandText} Logo\" role=\"img\">${logoMarkup}</div>\n    <div data-ow-part=\"version\">版本 ${versionText}</div>\n    <section data-ow-part=\"notes\" aria-labelledby=\"about-notes-title\">\n      <h1 data-ow-part=\"notes-title\" id=\"about-notes-title\">版本说明</h1>\n      <p data-ow-part=\"notes-body\">${notesText}</p>\n    </section>\n  </main>\n</body>\n</html>`\n}\n\nfunction escapeHtml(value: string): string {\n  return value\n    .replaceAll(\"&\", \"&amp;\")\n    .replaceAll(\"<\", \"&lt;\")\n    .replaceAll(\">\", \"&gt;\")\n    .replaceAll('\"', \"&quot;\")\n    .replaceAll(\"'\", \"&#39;\")\n}\n\nfunction resolvePalette(source: AboutWindowPalette | undefined, fallback: Required<AboutWindowPalette>) {\n  const color = (value: string | undefined, defaultValue: string) =>\n    value && /^#[0-9a-f]{6}$/i.test(value) ? value : defaultValue\n  return {\n    bg: color(source?.bg, fallback.bg),\n    surface: color(source?.surface, fallback.surface),\n    border: color(source?.border, fallback.border),\n    text: color(source?.text, fallback.text),\n    text2: color(source?.text2, fallback.text2),\n  }\n}\n"]}

package/dist/about-window.d.cts

@@ -1,12 +1,30 @@
+type AboutWindowPalette = {
+    bg?: string;
+    surface?: string;
+    border?: string;
+    text?: string;
+    text2?: string;
+};
 interface AboutWindowContent {
     version: string;
     notes: string;
     logoSvg: string;
+    /** Audited build-time image for branded native hosts. Takes precedence over logoSvg. */
+    logoDataUrl?: string;
+    theme?: {
+        light?: AboutWindowPalette;
+        dark?: AboutWindowPalette;
+    };
+    /**
+     * 品牌名：驱动文档标题与 logo 无障碍标签。缺省 "Orbitwork" 是 DS2 默认
+     * 品牌值（非旧格式兼容）——白标宿主经桌面端 brand.json 注入。
+     */
+    productName?: string;
 }
 /**
  * Renders the shared, self-contained content for Orbitwork's native About window.
  * Electron owns the window lifecycle; ow-ui owns its visual structure and CSS.
  */
-declare function renderAboutWindowHtml({ version, notes, logoSvg }: AboutWindowContent): string;
+declare function renderAboutWindowHtml({ version, notes, logoSvg, logoDataUrl, theme, productName, }: AboutWindowContent): string;
 
-export { type AboutWindowContent, renderAboutWindowHtml };
+export { type AboutWindowContent, type AboutWindowPalette, renderAboutWindowHtml };

package/dist/about-window.d.ts

@@ -1,12 +1,30 @@
+type AboutWindowPalette = {
+    bg?: string;
+    surface?: string;
+    border?: string;
+    text?: string;
+    text2?: string;
+};
 interface AboutWindowContent {
     version: string;
     notes: string;
     logoSvg: string;
+    /** Audited build-time image for branded native hosts. Takes precedence over logoSvg. */
+    logoDataUrl?: string;
+    theme?: {
+        light?: AboutWindowPalette;
+        dark?: AboutWindowPalette;
+    };
+    /**
+     * 品牌名：驱动文档标题与 logo 无障碍标签。缺省 "Orbitwork" 是 DS2 默认
+     * 品牌值（非旧格式兼容）——白标宿主经桌面端 brand.json 注入。
+     */
+    productName?: string;
 }
 /**
  * Renders the shared, self-contained content for Orbitwork's native About window.
  * Electron owns the window lifecycle; ow-ui owns its visual structure and CSS.
  */
-declare function renderAboutWindowHtml({ version, notes, logoSvg }: AboutWindowContent): string;
+declare function renderAboutWindowHtml({ version, notes, logoSvg, logoDataUrl, theme, productName, }: AboutWindowContent): string;
 
-export { type AboutWindowContent, renderAboutWindowHtml };
+export { type AboutWindowContent, type AboutWindowPalette, renderAboutWindowHtml };