@orbit-work/ui 0.1.0

package/src/hooks/useUnifiedTheme.ts

@@ -0,0 +1,85 @@
+/**
+ * 统一的主题 Hook
+ *
+ * 这个 Hook 整合了：
+ * 1. 租户主题（从后端获取）
+ * 2. 用户皮肤（本地存储）
+ * 3. 试穿预览
+ *
+ * 使用示例：
+ * ```tsx
+ * function App() {
+ *   const { unifiedTheme, setSkin, tenantLoading } = useTheme()
+ *
+ *   // unifiedTheme 包含：
+ *   // - branding: 租户的品牌标识（logo, 产品名等）
+ *   // - colors: 用户皮肤覆盖后的配色
+ *   // - assets: 用户的装饰性背景
+ * }
+ * ```
+ */
+
+import { useEffect, useMemo, useState } from "react"
+import type { TenantTheme } from "../theme/core/types"
+import { parseTenantTheme } from "../theme/core/tenantTheme"
+import { type UnifiedTheme, mergeThemes } from "../theme/core/unifiedTheme"
+import { useTheme as useOriginalTheme } from "../theme/providers/ThemeProvider"
+
+export function useUnifiedTheme(apiUrl = "/api/v1/tenant/theme") {
+  const originalContext = useOriginalTheme()
+  const [tenantTheme, setTenantTheme] = useState<TenantTheme | null>(null)
+  const [tenantLoading, setTenantLoading] = useState(true)
+  const [tenantError, setTenantError] = useState<string | null>(null)
+
+  // Load tenant theme on mount
+  useEffect(() => {
+    const loadTenantTheme = async () => {
+      try {
+        setTenantLoading(true)
+        const response = await fetch(apiUrl)
+
+        if (!response.ok) {
+          throw new Error(`Failed to load tenant theme: ${response.status}`)
+        }
+
+        const data: unknown = await response.json()
+        const result = parseTenantTheme(data)
+        if (!result.ok) throw new Error(`租户主题契约非法：${result.error}`)
+        setTenantTheme(result.theme)
+      } catch (err) {
+        setTenantError(err instanceof Error ? err.message : "Failed to load tenant theme")
+        console.warn("[useUnifiedTheme]", err)
+      } finally {
+        setTenantLoading(false)
+      }
+    }
+
+    void loadTenantTheme()
+  }, [apiUrl])
+
+  // Determine active skin (try-on or regular)
+  const activeSkin = originalContext.tryOnSkin || originalContext.skin
+
+  // Merge tenant theme with user skin
+  const unifiedTheme = useMemo<UnifiedTheme | null>(() => {
+    if (!tenantTheme) return null
+    return mergeThemes(tenantTheme, activeSkin)
+  }, [tenantTheme, activeSkin])
+
+  return {
+    // Original context values
+    ...originalContext,
+
+    // Tenant theme specific
+    tenantTheme,
+    tenantLoading,
+    tenantError,
+
+    // Unified theme (merged)
+    unifiedTheme,
+  }
+}
+
+// Re-export types
+export type { UnifiedTheme } from "../theme/core/unifiedTheme"
+export type { TenantTheme } from "../theme/core/types"

package/src/index.ts

@@ -0,0 +1,6 @@
+export * from "./components"
+export * from "./hooks"
+export * from "./lib"
+export * from "./theme"
+export * from "./types"
+export * from "./utils"

package/src/lib/InjectedStyleTokenMirrorSource.test.mjs

@@ -0,0 +1,67 @@
+import assert from "node:assert/strict"
+import { readFile } from "node:fs/promises"
+import test from "node:test"
+import { buildThemeMaps, normalizeValue } from "../../scripts/ds2-spec-extract.mjs"
+
+/**
+ * 注入式样式表的「镜像值 vs tokens.css 终值」守卫（R2 补口）。
+ *
+ * src/lib 下两份样式表活在 --ow-* 主 token 表**不在场**的语境里：
+ *  · about-window.ts —— Electron 自绘窗，data: URL 载入的独立 document，CSP 连字体都不给；
+ *  · browser-annotation-popup.ts —— 注进任意第三方页面的浮层，宿主页没有我们的 token。
+ * 两份都因此手抄了 DS 2.0 的终值，两份的文件头也都写着「改值的顺序永远是先改 DS token，
+ * 再回来同步这张表」。但在这条测试之前，那句话只是注释——唯一有守卫的是 skin 的
+ * token **名**清单，值级漂移没有任何拦截：tokens.css 改一个 hex，这两张表照旧是旧值，
+ * 而它们渲出来的窗和浮层与应用其余部分并排出现。
+ *
+ * 判定口径：镜像声明右侧注释里点名的 --ow-* token，其 tokens.css 解析后的终值
+ * 必须与左侧字面量逐字相等（大小写/空白归一化后）。
+ */
+const tokensCss = await readFile(new URL("../../styles/tokens.css", import.meta.url), "utf8")
+const { light, dark } = buildThemeMaps([tokensCss])
+
+/** `--local: VALUE;  /* [light|dark] --ow-token …` → { local, value, theme, token } */
+function mirrorRows(source) {
+  const rows = []
+  const re = /^\s*(--[a-z0-9-]+)\s*:\s*([^;]+);\s*\/\*\s*(light |dark )?(--ow-[a-z0-9-]+)/gim
+  for (const m of source.matchAll(re)) {
+    rows.push({
+      local: m[1],
+      value: m[2].trim(),
+      theme: (m[3] ?? "").trim() || null,
+      token: m[4],
+    })
+  }
+  return rows
+}
+
+function assertMirrors(label, source, defaultTheme) {
+  const rows = mirrorRows(source)
+  assert.ok(rows.length >= 10, `${label}: 只解析到 ${rows.length} 行镜像声明，格式可能变了`)
+  const missing = []
+  for (const row of rows) {
+    const map = (row.theme ?? defaultTheme) === "dark" ? dark : light
+    const impl = map[row.token]
+    if (impl === undefined) {
+      missing.push(`${row.local} 引的 ${row.token} 在 tokens.css 里不存在`)
+      continue
+    }
+    assert.equal(
+      normalizeValue(row.value),
+      normalizeValue(impl),
+      `${label}: ${row.local} 抄的是 ${row.value}，但 ${row.token}（${row.theme ?? defaultTheme}）现在是 ${impl} —— 先改 DS token，再回来同步这张表`,
+    )
+  }
+  assert.deepEqual(missing, [], `${label}: 注释指向了 tokens.css 里不存在的 token`)
+}
+
+test("about-window.ts 的浅/暗两档镜像值与 tokens.css 终值逐条一致", async () => {
+  const source = await readFile(new URL("./about-window.ts", import.meta.url), "utf8")
+  assertMirrors("about-window.ts", source, "light")
+})
+
+test("browser-annotation-popup.ts 的浅档镜像值与 tokens.css 终值逐条一致", async () => {
+  const source = await readFile(new URL("./browser-annotation-popup.ts", import.meta.url), "utf8")
+  // 该表恒取浅档（浮层落在任意宿主页上，不跟宿主猜主题——见文件头）。
+  assertMirrors("browser-annotation-popup.ts", source, "light")
+})

package/src/lib/about-window.test.mjs

@@ -0,0 +1,46 @@
+import assert from "node:assert/strict"
+import test from "node:test"
+
+const { renderAboutWindowHtml } = await import("./about-window.ts")
+
+test("About window only renders the logo, version, and release notes", () => {
+  const html = renderAboutWindowHtml({
+    version: "0.20.0",
+    notes: "本次版本说明",
+    logoSvg: '<svg data-testid="logo"></svg>',
+  })
+
+  assert.match(html, /<svg data-testid="logo"><\/svg>/)
+  assert.match(html, />版本 0\.20\.0</)
+  assert.match(html, />版本说明</)
+  assert.match(html, />本次版本说明</)
+  assert.doesNotMatch(html, /检查更新|更新通道|通用智能体操作系统|保留所有权利|Orbitwork Labs/)
+  assert.doesNotMatch(html, /<button/)
+})
+
+test("About window escapes release metadata before adding it to HTML", () => {
+  const html = renderAboutWindowHtml({
+    version: "<script>1</script>",
+    notes: '<img src=x onerror=alert(1)> & "quoted"',
+    logoSvg: "<svg></svg>",
+  })
+
+  assert.doesNotMatch(html, /<script>1<\/script>/)
+  assert.doesNotMatch(html, /<img src=x/)
+  assert.match(html, /&lt;script&gt;1&lt;\/script&gt;/)
+  assert.match(html, /&lt;img src=x onerror=alert\(1\)&gt; &amp; &quot;quoted&quot;/)
+})
+
+test("About window supplies readable placeholders for missing metadata", () => {
+  const html = renderAboutWindowHtml({ version: " ", notes: "", logoSvg: "<svg></svg>" })
+
+  assert.match(html, />版本 未知</)
+  assert.match(html, />暂无版本说明</)
+})
+
+test("About window keeps the mark grounded — no decorative drop-shadow (§5)", () => {
+  const html = renderAboutWindowHtml({ version: "1.0.0", notes: "n", logoSvg: "<svg></svg>" })
+  assert.doesNotMatch(html, /drop-shadow/)
+  assert.doesNotMatch(html, /--about-mark-shadow/)
+  assert.doesNotMatch(html, /box-shadow/)
+})

package/src/lib/about-window.ts

@@ -0,0 +1,218 @@
+export interface AboutWindowContent {
+  version: string
+  notes: string
+  logoSvg: 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.
+ */
+export function renderAboutWindowHtml({ version, notes, logoSvg }: AboutWindowContent): string {
+  const versionText = escapeHtml(version.trim() || "未知")
+  const notesText = escapeHtml(notes.trim() || "暂无版本说明")
+
+  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>关于 Orbitwork</title>
+<style>
+  /*
+   * 这是一份独立 document（Electron 自绘窗，data: URL 载入），--ow-* 主 token 表不在场，
+   * 也没有任何字体文件可加载（CSP 无 font-src）。所以配色一律「抄 DS 2.0 终值」而非引用变量，
+   * 每组值旁注明出处；字体只写族名栈并给到系统级回退。
+   * 终值出处：packages/ui/src/tokens/light.ts · dark.ts · base.ts（原语解析后的实际值）。
+   */
+  :root {
+    /* ---- 浅档：抄自 tokens light 终值 ---- */
+    --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（--ow-eyebrow 同值） */
+    --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 */
+
+    /* ---- 形状与度量：抄自 base.ts 原语（形状表 §7） ---- */
+    --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（卡片档） */
+    --about-radius-pill: 999px;        /* --ow-radius-pill */
+    --about-border-w: 1px;             /* --ow-border-width-default（贴地 1px 边框） */
+    --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（主题切换过渡，§9） */
+    --about-ease: cubic-bezier(0.22, 1, 0.36, 1); /* --ow-ease-beacon（唯一缓动） */
+
+    /* ---- 字族栈：抄自 base.ts 的族名，尾部补独立 document 可用的系统回退；emoji 族置栈尾（§8） ---- */
+    --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;
+  }
+  /* ---- 暗档：抄自 tokens dark 终值。属性优先（宿主可钉 data-theme），无属性时随系统 ---- */
+  @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"] {
+    /* 与上方媒体查询块逐值一致 */
+    --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;
+  }
+
+  * { 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);
+  }
+  /* 拖拽条 28px＝与 trafficLightPosition y:14 对称的功能几何，非间距阶，保持不动 */
+  .about-drag-region { height: 28px; -webkit-app-region: drag; }
+  .about-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);
+  }
+  /* 字标贴地：§5「影子只属离地之物」——原来的装饰投影（filter 辉光）2.0 一律清除 */
+  .about-logo {
+    width: 84px;
+    height: 84px;
+    flex: 0 0 auto;
+    display: grid;
+    place-items: center;
+  }
+  .about-logo svg { width: 84px; height: 84px; display: block; }
+  .about-version {
+    margin-top: var(--about-space-4);
+    color: var(--about-text);
+    /* 版本号＝读数，§7 一律 mono＋tabular-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;
+  }
+  .about-notes {
+    width: 100%;
+    min-height: 0;
+    flex: 1 1 auto;
+    margin-top: var(--about-space-5);
+    overflow-y: auto;
+    /* 贴地之物：0 影＋1px 边框（§5） */
+    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);
+  }
+  /* 「版本说明」＝中文眉标：500 / 12px / +0.08em / --ow-eyebrow（§8） */
+  .about-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);
+  }
+  .about-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, .about-notes { transition: none; }
+  }
+</style>
+</head>
+<body>
+  <div class="about-drag-region" aria-hidden="true"></div>
+  <main class="about-content">
+    <div class="about-logo" aria-label="Orbitwork Logo" role="img">${logoSvg}</div>
+    <div class="about-version">版本 ${versionText}</div>
+    <section class="about-notes" aria-labelledby="about-notes-title">
+      <h1 class="about-notes-title" id="about-notes-title">版本说明</h1>
+      <p class="about-notes-body">${notesText}</p>
+    </section>
+  </main>
+</body>
+</html>`
+}
+
+function escapeHtml(value: string): string {
+  return value
+    .replaceAll("&", "&amp;")
+    .replaceAll("<", "&lt;")
+    .replaceAll(">", "&gt;")
+    .replaceAll('"', "&quot;")
+    .replaceAll("'", "&#39;")
+}