@orbit-work/ui 0.1.1 → 0.1.2

package/src/hooks/useUnifiedTheme.ts

@@ -1,85 +0,0 @@
-/**
- * 统一的主题 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

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

package/src/lib/InjectedStyleTokenMirrorSource.test.mjs

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

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

@@ -1,218 +0,0 @@
-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;")
-}