@orbit-work/ui 0.1.0

package/src/components/domain/desktop/DesktopAccountMenuView/index.tsx

@@ -0,0 +1,355 @@
+"use client"
+
+import { useEffect, useState } from "react"
+import { THEME_OPTIONS, type Theme } from "../../../../lib/appearance"
+import {
+  Brain,
+  Check,
+  Copy,
+  Download,
+  Help,
+  Layers,
+  Logout,
+  Moon,
+  Settings,
+  Sparkles,
+  Sun,
+} from "../../../composite/Icons"
+import { Tooltip } from "../../../composite/Tooltip"
+import { Avatar, Button, ProgressBar, Switch } from "../../../primitives"
+import { MENU_SEPARATOR, MenuSurface } from "../../../primitives/Menu"
+import type { MenuEntry } from "../../../primitives/Menu"
+import { SegmentedControl } from "../../../primitives/SegmentedControl"
+
+/** 账户菜单的面宽（§7 弹层度量，规格 T4）。 */
+export const DESKTOP_ACCOUNT_MENU_WIDTH = 280
+
+/** 额度条转 warning 的门槛（≥80%）。设置·用量与套餐段的用量条同一门槛（R2 统一，原为 60）。 */
+export const ACCOUNT_CREDITS_WARN_RATIO = 0.8
+
+export interface DesktopAccountMenuUser {
+  name: string
+  /** 头像图；缺省或加载失败回落姓名末字（`primitives/Avatar` 的 data-1..6 轮转）。 */
+  avatarUrl?: string
+  /** 第二行：邮箱优先，没有就出 id。 */
+  email?: string
+  /** 身份键：既是头像配色的取模依据，也是「复制 ID」复制的值。 */
+  id?: string
+}
+
+export interface DesktopAccountMenuPlan {
+  /** 套餐名（「体验版」/「Pro」…）。 */
+  name: string
+  /** 行末的描边钮（升级 / 充值）。菜单是弹层，不占该屏行动极配额 → 永远 secondary。 */
+  action?: { label: string; onClick: () => void }
+}
+
+export interface DesktopAccountMenuCredits {
+  used: number
+  limit: number
+  /** 读数左侧的字（缺省「积分余额」）。 */
+  label?: string
+}
+
+/** 更新三态（与侧栏账户行的更新胶囊同一份文案，见 `updateRowText`）。 */
+export type DesktopAccountMenuUpdateState = "available" | "downloading" | "ready" | "error"
+
+export interface DesktopAccountMenuUpdate {
+  state: DesktopAccountMenuUpdateState
+  version: string
+  percent?: number
+}
+
+export interface DesktopAccountMenuViewProps {
+  user: DesktopAccountMenuUser
+  plan?: DesktopAccountMenuPlan
+  credits?: DesktopAccountMenuCredits
+  /** 版本号读数，挂在「检查更新」行尾（mono ＋ tabular-nums）。 */
+  version?: string
+  update?: DesktopAccountMenuUpdate
+  theme?: Theme
+  onThemeChange?: (theme: Theme) => void
+  petVisible?: boolean
+  onPetVisibleChange?: (visible: boolean) => void
+  onOpenSettings: () => void
+  onOpenMemory?: () => void
+  onCopyUserId?: (id: string) => void
+  onCheckUpdate?: () => void
+  onFeedback: () => void
+  onLogout: () => void
+  /** Esc / 面外点击后由宿主关面（本件不持开合状态）。 */
+  onClose?: () => void
+  /** 开面取焦档（透传 MenuSurface）：键盘打开传 `true`（首行得环），指针打开传 `"surface"`。缺省 `true`。 */
+  autoFocus?: boolean | "surface"
+  className?: string
+}
+
+/**
+ * 更新胶囊/菜单行共用的三态文案（R2 · T4 第 6 步）。
+ *
+ * 侧栏账户行的更新胶囊与本菜单「检查更新」行说的是同一件事，原来两处各写一套三态字，
+ * 改一处就会分叉。胶囊本体只出呼吸点＋按态换字（ready 出「重启安装」，其余态「更新」，
+ * 见 DesktopSidebarView 的 SidebarUpdateButton）；状态说明取 `title` 悬停可见；
+ * `long` 是菜单行尾的字。
+ */
+export function updateRowText(update: DesktopAccountMenuUpdate): { long: string; title: string } {
+  const percent = Math.round(Math.max(0, Math.min(100, update.percent ?? 0)))
+  if (update.state === "downloading") {
+    return {
+      long: `下载中 ${percent}%`,
+      title: `正在下载 Orbitwork ${update.version}：${percent}%`,
+    }
+  }
+  if (update.state === "ready") {
+    return { long: "重启安装", title: `安装 Orbitwork ${update.version} 并重启` }
+  }
+  if (update.state === "error") {
+    return { long: "下载失败，重试", title: `重新下载 Orbitwork ${update.version}` }
+  }
+  return { long: "有新版本", title: `下载 Orbitwork ${update.version}` }
+}
+
+/** 千分位 ＋ tabular-nums 的整数读数（额度条上的 `1,240 / 2,000`）。 */
+function readout(value: number): string {
+  return Math.max(0, Math.round(value)).toLocaleString("en-US")
+}
+
+/**
+ * DesktopAccountMenuView —— 侧栏账户菜单的「面」（R2 · Terry 意见 4 的参考图 → DS2 语法）。
+ *
+ * 纯展示件：不 portal、不持开合状态、不量坐标——定位与 backdrop 归调用方
+ * （`DesktopSidebarView` 在账户行上方 8px 处 portal 出去），本件只画面本体。
+ * 因此它也是本轨的主证据面：story 里直接摆着就能截图，不必先把菜单点开。
+ *
+ * 结构（自上而下，全部走 `primitives/Menu` 的 MenuSurface 基座）：
+ * 1. `headerBare` 头部：32 头像（无图回落姓名末字）＋ 名 ＋ 邮箱/ID ＋ 行末「复制 ID」图标钮。
+ * 2. `banner` 套餐井：`--ow-surface-2` 井 ＋ `--ow-radius-md`；行 1 套餐名＋描边钮，
+ *    行 2 积分读数（mono ＋ tabular-nums），行 3 `ProgressBar size="md"`（6px）。
+ * 3. items：设置 / 记忆 / 桌面宠物（行尾 Switch）/ 外观（行尾三格分段器）/ ─ /
+ *    帮助与反馈 / 检查更新（行尾 mono 版本号，有更新时换三态文字）/ ─ / 退出登录（danger）。
+ *
+ * §4 三极：菜单内**零实底主钮**——「升级 / 充值」走 `Button variant="secondary"`。
+ * 弹层不该占所在半屏的行动极配额（主屏那一处已被 Composer 发送钮占掉），
+ * 这条由 `DesktopAccountMenuViewSource.test.mjs` 锁死。
+ *
+ * §7 读数：积分 `1,240 / 2,000` 与版本号 `v1.4.2` 都是读数，一律 mono ＋ tabular-nums。
+ * 额度条 ≥80% 转 `tone="warning"`（R1 双编码：颜色之外数字仍在，去色也读得懂）。
+ *
+ * 键盘：↑↓ 行间、Enter 触发、Esc 关（MenuSurface 给）；Tab 在「复制 ID → 升级钮 →
+ * 行 → 该行控件 → 下一行」间游走（P2 的 roving Tab，由 control 行/bare 头部/banner 触发）。
+ */
+export function DesktopAccountMenuView({
+  user,
+  plan,
+  credits,
+  version,
+  update,
+  theme,
+  onThemeChange,
+  petVisible,
+  onPetVisibleChange,
+  onOpenSettings,
+  onOpenMemory,
+  onCopyUserId,
+  onCheckUpdate,
+  onFeedback,
+  onLogout,
+  onClose,
+  autoFocus = true,
+  className,
+}: DesktopAccountMenuViewProps): React.ReactElement {
+  // 「复制 ID」的内联反馈：点后 2 秒内图标换成 Check。toast 归宿主，这里只回答「点到了吗」。
+  const [copied, setCopied] = useState(false)
+  useEffect(() => {
+    if (!copied) return
+    const timer = window.setTimeout(() => setCopied(false), 2000)
+    return () => window.clearTimeout(timer)
+  }, [copied])
+
+  const identity = user.id ?? user.email ?? user.name
+  const secondLine = user.email ?? user.id
+  const ratio = credits && credits.limit > 0 ? Math.min(1, Math.max(0, credits.used / credits.limit)) : 0
+  const creditsWarn = Boolean(credits) && ratio >= ACCOUNT_CREDITS_WARN_RATIO
+  const updateText = update ? updateRowText(update) : null
+
+  const items: MenuEntry[] = [
+    { key: "settings", label: "设置", icon: <Settings /> },
+    // 记忆：设置·记忆段本身不出图标（`_settingsNav.ts` 十段一律无 icon），
+    // 故按 brief-r2 T4 第 3 条取库里的记忆字形 `Brain`（裁决写的 `Book` 全库不存在，
+    // 为一行菜单新造字形不划算）。
+    { key: "memory", label: "记忆", icon: <Brain /> },
+    ...(onPetVisibleChange
+      ? ([
+        {
+          key: "pet",
+          label: "桌面宠物",
+          icon: <Sparkles />,
+          control: (
+            <Switch
+              checked={Boolean(petVisible)}
+              onChange={(next) => onPetVisibleChange(next)}
+              aria-label="显示桌面宠物"
+            />
+          ),
+        },
+      ] as MenuEntry[])
+      : []),
+    ...(onThemeChange
+      ? ([
+        {
+          key: "theme",
+          label: "外观",
+          // 图标随当前解析出的档切换：深色出月亮，其余出太阳（「自动」跟随系统，白天即太阳）。
+          icon: theme === "dark" ? <Moon /> : <Sun />,
+          control: (
+            <SegmentedControl
+              size="sm"
+              variant="outline"
+              options={THEME_OPTIONS}
+              value={theme ?? "system"}
+              onChange={(value) => onThemeChange(value as Theme)}
+              aria-label="外观"
+            />
+          ),
+        },
+      ] as MenuEntry[])
+      : []),
+    MENU_SEPARATOR,
+    { key: "feedback", label: "帮助与反馈", icon: <Help /> },
+    {
+      key: "update",
+      label: "检查更新",
+      icon: <Download />,
+      // 有更新＝行尾出「主题色点 ＋ 三态文字」（与账户行更新胶囊同一份 updateRowText）；
+      // 没更新＝行尾出 mono 版本号读数。两者都走 hint 槽，不新造行尾语汇。
+      // R1 双编码：点只是第二编码，文字本身已把三态说全（有新版本/下载中 40%/重启安装）。
+      hint: updateText ? (
+        <span className="inline-flex items-center gap-1.5">
+          <span aria-hidden="true" className="w-1.5 h-1.5 [border-radius:var(--ow-radius-pill)] bg-[var(--ow-accent)]" />
+          {updateText.long}
+        </span>
+      ) : (
+        // §7 读数口径：preview 版版本号（v0.1.5-preview.20260906171447）远超 280 面宽能给的行尾位，
+        // 超长截断＋省略号；全值走 Tooltip hover 出全量（不再用 title——原生 tooltip 与
+        // 自定气泡同现会双重弹层；Tooltip 键盘 focus 即出，读屏走 aria-describedby）。
+        // side=top align=end：气泡贴行尾上方出，菜单面不设 overflow 裁剪，可越面出。
+        <Tooltip content={version ?? ""} side="top" align="end" disabled={!version}>
+          <span className="block max-w-[9rem] truncate">{version}</span>
+        </Tooltip>
+      ),
+      hintMono: !updateText,
+      // 下载中不可再点（与账户行更新胶囊的 disabled 同口径）；行尾「下载中 40%」读数照常出。
+      disabled: update?.state === "downloading",
+    },
+    MENU_SEPARATOR,
+    { key: "logout", label: "退出登录", icon: <Logout />, danger: true },
+  ]
+
+  return (
+    <MenuSurface
+      className={className}
+      width={DESKTOP_ACCOUNT_MENU_WIDTH}
+      autoFocus={autoFocus}
+      ariaLabel="账户菜单"
+      headerBare
+      onClose={onClose}
+      header={
+        <div className="flex items-center gap-2.5 px-2 pt-1.5 pb-2.5">
+          <Avatar size={32} id={identity}>
+            {user.avatarUrl ? (
+              <img
+                src={user.avatarUrl}
+                alt=""
+                className="w-full h-full object-cover"
+                onError={(event) => event.currentTarget.remove()}
+              />
+            ) : (
+              user.name.slice(-1)
+            )}
+          </Avatar>
+          <span className="flex-1 min-w-0 flex flex-col gap-0.5">
+            <span className="truncate font-semibold text-ow-fs-body leading-tight text-[color:var(--ow-text)]">
+              {user.name}
+            </span>
+            {secondLine && (
+              <span className="truncate text-ow-fs-caption leading-tight text-[color:var(--ow-text-3)]">
+                {secondLine}
+              </span>
+            )}
+          </span>
+          {user.id && onCopyUserId && (
+            <Button
+              variant="unstyled"
+              className="shrink-0 w-7 h-7 inline-flex items-center justify-center [border-radius:var(--ow-radius-xs)] text-[color:var(--ow-text-3)] hover:bg-[var(--ow-hover-pop)] hover:text-[color:var(--ow-text)] ow-focus-ring"
+              title={copied ? "已复制" : "复制 ID"}
+              aria-label={copied ? "已复制 ID" : "复制 ID"}
+              onClick={() => {
+                onCopyUserId(user.id as string)
+                setCopied(true)
+              }}
+            >
+              {/* R1 双编码：图标换形（Copy→Check）＋ title/aria-label 换字，不靠颜色说话。 */}
+              {copied ? <Check className="w-4 h-4" /> : <Copy className="w-4 h-4" />}
+            </Button>
+          )}
+        </div>
+      }
+      banner={
+        plan || credits ? (
+          /* 井：`--ow-surface-2` ＋ 1px `--ow-border`。加这道边不是装饰——§14 已知坑：
+             暗档 `--ow-surface-2`(#23252B) 与基座给的弹层面色(#24262C) 逐通道差 ≤2，
+             只靠底色这个井在暗档整个消失（浅档 #F1F0EA on #FFFFFF 是看得见的）。
+             边是「井」的第二编码，两档都成立。 */
+          <div className="mx-2 mb-1.5 px-3 py-2.5 bg-[var(--ow-surface-2)] border border-[color:var(--ow-border)] [border-radius:var(--ow-radius-md)] flex flex-col gap-2">
+            {plan && (
+              <div className="flex items-center gap-2">
+                <Layers className="w-4 h-4 shrink-0 text-[color:var(--ow-text-3)]" aria-hidden="true" />
+                <span className="flex-1 min-w-0 truncate font-medium text-ow-fs-ui leading-none text-[color:var(--ow-text)]">
+                  {plan.name}
+                </span>
+                {plan.action && (
+                  // §4：弹层里不放实底主钮——描边档已足够把「升级/充值」说清楚。
+                  <Button size="sm" variant="secondary" onClick={plan.action.onClick}>
+                    {plan.action.label}
+                  </Button>
+                )}
+              </div>
+            )}
+            {credits && (
+              <>
+                <div className="flex items-baseline gap-2">
+                  <span className="flex-1 min-w-0 truncate text-ow-fs-caption leading-none text-[color:var(--ow-text-2)]">
+                    {credits.label ?? "积分余额"}
+                  </span>
+                  {/* §7 读数：mono ＋ tabular-nums，数字换位不抖。 */}
+                  <span className="shrink-0 font-[family-name:var(--ow-font-mono)] tabular-nums text-ow-fs-caption leading-none text-[color:var(--ow-text)]">
+                    {readout(credits.used)} / {readout(credits.limit)}
+                  </span>
+                </div>
+                <ProgressBar
+                  size="md"
+                  tone={creditsWarn ? "warning" : "default"}
+                  value={ratio * 100}
+                  aria-label={`${credits.label ?? "积分余额"} ${readout(credits.used)} / ${readout(credits.limit)}`}
+                />
+              </>
+            )}
+          </div>
+        ) : undefined
+      }
+      items={items}
+      onSelect={(key) => {
+        // pet / theme 两行的控件自理点击（MenuSurface 的 control 槽已 stopPropagation），
+        // 行本身被点到时也切换一次，且不关面——用户还要接着调。
+        if (key === "pet") return onPetVisibleChange?.(!petVisible)
+        if (key === "theme") return
+        onClose?.()
+        if (key === "settings") onOpenSettings()
+        if (key === "memory") (onOpenMemory ?? onOpenSettings)()
+        if (key === "feedback") onFeedback()
+        if (key === "update") onCheckUpdate?.()
+        if (key === "logout") onLogout()
+      }}
+    />
+  )
+}

package/src/components/domain/desktop/DesktopAppearanceSettings/DesktopAppearanceSettings.stories.tsx

@@ -0,0 +1,96 @@
+import type { Meta, StoryObj } from "@storybook/react"
+import { DesktopAppearanceSettings } from "./index"
+
+/**
+ * 设置「常规」段（R2）。
+ *
+ * 本轮撤掉三样：**皮肤整段**（裁决 10「皮肤不做」，连带「导入主题」钮）、
+ * **聊天背景段**（取值全靠皮肤 tokens，皮肤一撤就没有数据源）、
+ * **「显示模式跟随系统」开关卡**（换成主题三格的第三格「自动」）。
+ * 随之退役的 story：`PurpleSkinSelected` / `WithCustomSkins` / `Importing`
+ * （皮肤三张）与 `BackgroundBusy` / `WithChatBackground` / `ChatBackgroundBusy`
+ * （聊天背景三张）——那六张的主题都已不再渲染，留着就是六张空壳。
+ *
+ * 皮肤与聊天背景的七件 props 仍在签名上（标 `@deprecated`），包外宿主零改动。
+ */
+const meta = {
+  title: "Desktop/DesktopAppearanceSettings",
+  component: DesktopAppearanceSettings,
+  decorators: [
+    (Story) => (
+      <div style={{ padding: 20, background: "var(--ow-bg)", minHeight: "100vh" }}>
+        <Story />
+      </div>
+    ),
+  ],
+} satisfies Meta<typeof DesktopAppearanceSettings>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+/** 退役 props 的空实现：签名还在，件内已不渲染对应段。 */
+const deprecatedArgs = {
+  skinId: "default",
+  skins: [],
+  onSkinChange: () => {},
+  onImport: () => {},
+  onDeleteCustom: () => {},
+  onChooseChatBackground: () => {},
+  onClearChatBackground: () => {},
+  onChatBackgroundMaskColorChange: () => {},
+} satisfies Partial<Story["args"]>
+
+/** 「暂未支持」的三条真禁用开关（原型 template.dc.html L4126–4130）。 */
+const UNSUPPORTED_TOGGLES = [
+  { id: "boot", title: "开机自启动", description: "系统启动时自动运行（暂未支持）" },
+  { id: "awake", title: "任务运行时阻止自动休眠", description: "任务处理期间阻止电脑因空闲自动进入睡眠（暂未支持）" },
+  { id: "sound", title: "完成提示音", description: "任务完成时播放提示音（暂未支持）" },
+]
+
+/** 三格停在「浅色」。 */
+export const LightMode: Story = {
+  args: {
+    ...deprecatedArgs,
+    theme: "light",
+    resolvedTheme: "light",
+    onThemeChange: (theme) => console.log("Theme changed:", theme),
+  },
+}
+
+/** 三格停在「深色」。 */
+export const DarkMode: Story = {
+  args: {
+    ...deprecatedArgs,
+    theme: "dark",
+    resolvedTheme: "dark",
+    onThemeChange: (theme) => console.log("Theme changed:", theme),
+  },
+}
+
+/**
+ * 三格停在第三格「自动」（`theme === "system"`）。
+ * R2 前这张演的是「显示模式跟随系统」那枚开关——开关已撤，语义搬进三格。
+ */
+export const SystemMode: Story = {
+  args: {
+    ...deprecatedArgs,
+    theme: "system",
+    resolvedTheme: "dark",
+    onThemeChange: (theme) => console.log("Theme changed:", theme),
+  },
+}
+
+/** 满配：主题三格 ＋ 字体缩放三格 ＋ 三条真禁用开关 ＋ 默认工作目录（mono 读数）。 */
+export const FullSection: Story = {
+  args: {
+    ...deprecatedArgs,
+    theme: "system",
+    resolvedTheme: "light",
+    fontScale: "md",
+    onFontScaleChange: (scale) => console.log("Font scale:", scale),
+    unsupportedToggles: UNSUPPORTED_TOGGLES,
+    workRoot: "/Users/terry/Coding/orbitwork",
+    onPickWorkRoot: () => console.log("Pick work root"),
+    onThemeChange: (theme) => console.log("Theme changed:", theme),
+  },
+}

package/src/components/domain/desktop/DesktopAppearanceSettings/DesktopAppearanceSettingsSource.test.mjs

@@ -0,0 +1,89 @@
+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")
+const css = await readFile(new URL("../../../../../styles/desktop-surfaces.css", import.meta.url), "utf8")
+
+test("R2 主题三格：浅色 / 深色 / 自动共用 THEME_OPTIONS，跟随系统那张开关卡撤掉", () => {
+  // 三格选项是 lib/appearance 的 THEME_OPTIONS —— 与侧栏账户菜单「外观」行同一份常量，
+  // 本件不许自己再写一份 [{light},{dark},{system}]。
+  assert.match(source, /import \{[^}]*THEME_OPTIONS[^}]*\} from "\.\.\/\.\.\/\.\.\/\.\.\/lib\/appearance"/)
+  assert.match(source, /options=\{THEME_OPTIONS\}/)
+  assert.doesNotMatch(source, /const THEME_MODES/)
+  assert.match(source, /<SegmentedControl[\s\S]*?aria-label="主题"/)
+  assert.match(source, /size="sm"/)
+  // 分段器直接读 theme：theme === "system" 时高亮的是「自动」格，不再解析成浅/深
+  assert.match(source, /value=\{theme\}/)
+  // 「显示模式跟随系统」整张开关卡随三格退役（负向断言扫去注释的源码，件头要能写清撤了什么）
+  const bare = source.replace(/\/\*[\s\S]*?\*\//g, "")
+  assert.doesNotMatch(bare, /followsSystem/)
+  assert.doesNotMatch(bare, /显示模式跟随系统/)
+  // R3（2026-09-04，Terry 意见 5）作废「一条设置一张卡」：常规段的行全部挂 .set-row 分隔线行，
+  // 行间 1px --ow-border 交给 ListRow 的 divider 机制，容器 gap-0 让那条线连成一条；行高仍不自写。
+  assert.match(source, /className="set-row"/)
+  assert.doesNotMatch(source, /className="set-card"/)
+  assert.match(source, /<div className="flex flex-col gap-0">/)
+  assert.doesNotMatch(bare, /py-3\.5/)
+  // 三个 primary/secondary 按钮表达选中的老写法退役：btn-primary 是行动极，暗档为荧黄
+  assert.doesNotMatch(source, /variant=\{theme === mode\.id \? "primary" : "secondary"\}/)
+  assert.doesNotMatch(source, /appearance-settings__(header|section-head|title|description)|appearance-mode-picker/)
+  assert.doesNotMatch(
+    css,
+    /\.appearance-settings__(header|section-head|title|description)\b|\.appearance-mode-picker\b/,
+  )
+})
+
+test("R2 撤皮肤与聊天背景两段：件内零渲染，七件 props 留签名标 @deprecated", () => {
+  // 负向断言扫的是**去注释**的源码：件头注释本身要写清「撤了什么」，那些字不算渲染。
+  const bare = source.replace(/\/\*[\s\S]*?\*\//g, "")
+  // 裁决 10「皮肤不做」：色卡网格、「导入主题」钮、Section 分节头一并不再渲染
+  assert.doesNotMatch(bare, /<Section/)
+  assert.doesNotMatch(bare, /<DesktopSelectionCard/)
+  assert.doesNotMatch(bare, /appearance-skin-grid|导入主题|皮肤只改中性表面/)
+  // 聊天背景的取值全靠皮肤的 activeTokens，皮肤一撤它就没有数据源，同批撤
+  assert.doesNotMatch(bare, /appearance-background|chatBackground|type="color"/)
+  // 签名保留（包外宿主零改动），但逐条标 @deprecated
+  for (const prop of [
+    "skinId",
+    "skins",
+    "customSkinIds",
+    "importing",
+    "backgroundBusy",
+    "onSkinChange",
+    "onImport",
+    "onDeleteCustom",
+    "onChooseChatBackground",
+    "onClearChatBackground",
+    "onChatBackgroundMaskColorChange",
+  ]) {
+    assert.match(source, new RegExp(`@deprecated[\\s\\S]{0,240}?\\b${prop}\\??:`))
+  }
+})
+
+test("选中/焦点走无彩极色与 focus-ring（R2 撤皮肤卡后，选择卡只剩宠物卡在用）", () => {
+  // R2 收口：无彩选中一套口径＝surface 递进 ＋ border-strong 边；--ow-control-on 只留给勾，
+  // --ow-current-bg 是侧栏当前项（位置极）的填充语汇，不外借给设置面的选择卡。
+  assert.match(css, /\.desktop-selection-card\.is-selected \{[^}]*border-color: var\(--ow-border-strong\)/s)
+  assert.match(css, /\.desktop-selection-card\.is-selected \{[^}]*background: var\(--ow-surface-2\)/s)
+  assert.doesNotMatch(css, /\.desktop-selection-card\.is-selected \{[^}]*var\(--ow-current-bg\)/s)
+  assert.match(css, /\.desktop-selection-card__check \{[^}]*color: var\(--ow-control-on\)/s)
+  assert.match(css, /\.appearance-background-mask__opacity \{[^}]*accent-color: var\(--ow-control-on\)/s)
+  assert.doesNotMatch(
+    css,
+    /\.(desktop-selection-card|appearance-background-mask|appearance-skin)[^\n]*var\(--ow-primary/,
+  )
+  // §7 读数 mono + tabular-nums（规则本身仍在表里；R2 撤了聊天背景段后暂无消费方，
+  // 已登记进死 CSS 清单，删除归 T5c/T6 统一执行，这里只保证它没被改成裸值）
+  assert.match(css, /\.appearance-background-mask__value \{[^}]*font-family: var\(--ow-font-mono\)/s)
+})
+
+// ── W5 终扫 ──────────────────────────────────────────────────────────────
+test("§5 立面：背景预览标签去毛玻璃，改实底 ＋ 1px 边，零影", () => {
+  assert.match(
+    css,
+    /\.appearance-background-preview\.has-image \.appearance-background-preview__label \{[^}]*border: var\(--ow-border-width-thin, 1px\) solid var\(--ow-border\); background: var\(--ow-surface\); color: var\(--ow-text\); \}/,
+  )
+  assert.doesNotMatch(css, /\.appearance-background-preview[^{]*\{[^}]*backdrop-filter/)
+  assert.doesNotMatch(css, /\.appearance-(?:skin|background)-preview[^{]*\{[^}]*box-shadow/)
+})