@orbit-work/ui 0.1.0

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

@@ -0,0 +1,234 @@
+"use client"
+
+import type { ReactNode } from "react"
+import { Dialog } from "../../../composite/Dialog"
+import { Close, Plus, Search } from "../../../composite/Icons"
+import { Tag } from "../../../composite/Tag"
+import { Avatar, Button, Field } from "../../../primitives"
+
+export type ShareAccessScope = "all" | "selected"
+
+export type ShareSettingsMember = {
+  id: string
+  name: string
+  account: string
+  avatarUrl?: string
+}
+
+export type ShareMemberSearch = {
+  keyword: string
+  results: ShareSettingsMember[]
+  searching: boolean
+  error?: string
+  onKeyword: (value: string) => void
+}
+
+export type ShareSettingsEditorViewProps = {
+  scope: ShareAccessScope
+  members: ShareSettingsMember[]
+  search: ShareMemberSearch
+  busy?: boolean
+  loading?: boolean
+  error?: string
+  onScope: (scope: ShareAccessScope) => void
+  onAddMember: (member: ShareSettingsMember) => void
+  onRemoveMember: (principalId: string) => void
+}
+
+function MemberAvatar({ member }: { member: ShareSettingsMember }) {
+  const fallback = member.name.trim().charAt(0) || "?"
+
+  return (
+    <Avatar size={24} id={member.id} className="share-settings__avatar">
+      <span aria-hidden="true">{fallback}</span>
+      {member.avatarUrl && (
+        <img
+          key={member.avatarUrl}
+          src={member.avatarUrl}
+          alt=""
+          referrerPolicy="no-referrer"
+          onError={(event) => {
+            event.currentTarget.hidden = true
+          }}
+        />
+      )}
+    </Avatar>
+  )
+}
+
+export function ShareSettingsEditorView({
+  scope,
+  members,
+  search,
+  busy = false,
+  loading = false,
+  error,
+  onScope,
+  onAddMember,
+  onRemoveMember,
+}: ShareSettingsEditorViewProps) {
+  const keyword = search.keyword.trim()
+  return (
+    <>
+      <div className="cseg" role="radiogroup" aria-label="分享范围">
+        {(
+          [
+            ["all", "全员访问"],
+            ["selected", "指定成员"],
+          ] as const
+        ).map(([value, label]) => (
+          <button
+            key={value}
+            type="button"
+            role="radio"
+            aria-checked={scope === value}
+            className={`cseg__opt${scope === value ? " on" : ""}`}
+            disabled={busy || loading}
+            onClick={() => onScope(value)}
+          >
+            {label}
+          </button>
+        ))}
+      </div>
+
+      <div className="session-share__body share-settings__body">
+        {loading ? (
+          <div className="session-share__hint" role="status">
+            正在加载分享设置…
+          </div>
+        ) : error ? (
+          <div className="share-settings__error" role="alert">
+            {error}
+          </div>
+        ) : scope === "all" ? (
+          <div className="session-share__hint">所有已登录成员均可访问，未登录访客无法打开。</div>
+        ) : (
+          <>
+            <div className="session-share__search">
+              <Field
+                value={search.keyword}
+                placeholder="搜索姓名或账号"
+                aria-label="搜索成员"
+                prefix={<Search />}
+                disabled={busy}
+                onChange={search.onKeyword}
+              />
+            </div>
+            {search.error && (
+              <div className="share-settings__error" role="alert">
+                {search.error}
+              </div>
+            )}
+            {keyword && (
+              <div className="published-site__member-results" aria-label="成员搜索结果">
+                {search.searching ? (
+                  <div className="published-site__empty">正在搜索…</div>
+                ) : search.results.length === 0 ? (
+                  <div className="published-site__empty">没有匹配的成员。</div>
+                ) : (
+                  search.results.map((member) => {
+                    const selected = members.some((item) => item.id === member.id)
+                    return (
+                      <Button
+                        key={member.id}
+                        size="sm"
+                        variant="ghost"
+                        className="published-site__member-result share-settings__result"
+                        icon={<MemberAvatar member={member} />}
+                        disabled={busy || selected}
+                        onClick={() => onAddMember(member)}
+                      >
+                        <span>{member.name}</span>
+                        <small>{member.account}</small>
+                        {!selected && <Plus aria-hidden="true" />}
+                      </Button>
+                    )
+                  })
+                )}
+              </div>
+            )}
+            <div className="published-site__member-list" aria-label="指定成员">
+              {members.length === 0 ? (
+                <div className="session-share__hint">尚未添加成员，当前只有你可以访问。</div>
+              ) : (
+                members.map((member) => (
+                  <Tag
+                    className="published-site__member share-settings__member"
+                    key={member.id}
+                    size="md"
+                    closable
+                    closeAriaLabel={`移除 ${member.name}`}
+                    disabled={busy}
+                    onClose={() => onRemoveMember(member.id)}
+                  >
+                    <MemberAvatar member={member} />
+                    <span>{member.name}</span>
+                  </Tag>
+                ))
+              )}
+            </div>
+            <div className="session-share__hint">你作为所有者始终可以访问。</div>
+          </>
+        )}
+      </div>
+    </>
+  )
+}
+
+export function ShareSettingsDialogView(
+  props: ShareSettingsEditorViewProps & {
+    title: string
+    subtitle: string
+    notice?: string
+    saveDisabled?: boolean
+    saveLabel?: string
+    onClose: () => void
+    onSave: () => void
+    extraActions?: ReactNode
+  },
+) {
+  return (
+    <Dialog
+      bare
+      open
+      fitViewport={false}
+      ariaLabel={props.title}
+      onClose={props.onClose}
+      className="session-share-modal share-settings-modal"
+    >
+      <div className="session-share">
+        <div className="session-share__head">
+          <div className="session-share__head-text">
+            <strong>{props.title}</strong>
+            <span>{props.subtitle}</span>
+          </div>
+          <Button
+            variant="unstyled"
+            className="session-share__close"
+            aria-label="关闭"
+            disabled={props.busy}
+            onClick={props.onClose}
+          >
+            <Close />
+          </Button>
+        </div>
+
+        <ShareSettingsEditorView {...props} />
+        {props.notice && (
+          <div className="share-settings__notice" role="status">
+            {props.notice}
+          </div>
+        )}
+        <div className="session-share__footer">
+          <Button variant="secondary" onClick={props.onClose} disabled={props.busy}>
+            取消
+          </Button>
+          {props.extraActions}
+          <Button variant="primary" onClick={props.onSave} disabled={props.busy || props.loading || props.saveDisabled}>
+            {props.saveLabel ?? (props.busy ? "保存中…" : "保存")}
+          </Button>
+        </div>
+      </div>
+    </Dialog>
+  )
+}

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

@@ -0,0 +1,100 @@
+import type { Meta, StoryObj } from "@storybook/react"
+import { WorkbenchSidePanel } from "../WorkbenchSidePanel"
+import { SidePanelEmpty } from "./index"
+
+/**
+ * 侧开栏空栏（原型模板 2370–2381 · 文案 4031–4035）。一个页签都没有时栏体中央摆的
+ * **三行快捷动作**——不是「母题 ＋ 一句话」的说明型空态，三行本身就是入口。
+ *
+ * 核对点（两个主题都要看）：行 36 高 ＋ `0 12` 内距 ＋ 1px `--ow-border` ＋ radius-sm(8)
+ * ＋ `--ow-surface` 底；行间 6；列宽 280 封顶并居中；右端键帽 18 高 mono 11
+ * （`Keycap` 原语：surface-2 底 ＋1px 边 ＋4 圆角）。荧黄 0 处。
+ */
+const meta = {
+  title: "Desktop/SidePanelEmpty",
+  component: SidePanelEmpty,
+  parameters: { layout: "fullscreen" },
+} satisfies Meta<typeof SidePanelEmpty>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+/** 455 ＝ 38% 档实测栏宽（1440 窗 · 240 侧栏）。 */
+const PANEL_FRAME = {
+  width: 455,
+  height: 360,
+  display: "flex",
+  border: "1px solid var(--ow-border)",
+  background: "var(--ow-surface)",
+} as const
+
+/** 默认三项（原型 4031–4035）：新建浏览器标签 ⌘T / 打开终端 ⌘B / 打开文件管理 ⌘P。 */
+export const Default: Story = {
+  render: (args) => (
+    <div style={PANEL_FRAME}>
+      <SidePanelEmpty {...args} onSelect={() => { }} />
+    </div>
+  ),
+}
+
+/** 坐进真栏子里：`WorkbenchSidePanel` 38% 档，空栏时栏里只有这三行（连页签条都没有内容）。 */
+export const InSidePanel: Story = {
+  parameters: { layout: "fullscreen" },
+  render: (args) => (
+    <div className="desktop-workbench-row" data-side-panel="on" style={{ height: 420, background: "var(--ow-bg)" }}>
+      <div
+        className="owcenter"
+        style={{ display: "grid", placeItems: "center", color: "var(--ow-text-2)", fontSize: "var(--ow-fs-ui)" }}
+      >
+        会话列
+      </div>
+      <WorkbenchSidePanel>
+        <SidePanelEmpty {...args} onSelect={() => { }} />
+      </WorkbenchSidePanel>
+    </div>
+  ),
+}
+
+/** 只有两项、且其中一项不带快捷键：键帽位空着就不渲染，行文案照常左对齐。 */
+export const CustomActions: Story = {
+  args: {
+    actions: [
+      { id: "web", label: "新建浏览器标签", keys: ["Mod", "T"] },
+      { id: "subagent", label: "查看子任务" },
+    ],
+  },
+  render: (args) => (
+    <div style={PANEL_FRAME}>
+      <SidePanelEmpty {...args} onSelect={() => { }} />
+    </div>
+  ),
+}
+
+/**
+ * 平台字形（R2 · L3-2-8）：常量只存语义键名 `["Mod","T"]`，键帽的字由 `platform` 现渲——
+ * mac 出 `⌘T`，windows/linux 出 `Ctrl+T`。修之前三行在 windows 上照样显示 ⌘。
+ */
+export const PlatformGlyphs: Story = {
+  parameters: { layout: "fullscreen" },
+  render: (args) => (
+    <div style={{ display: "flex", gap: 16, padding: 16, background: "var(--ow-bg)" }}>
+      {(["mac", "windows", "linux"] as const).map((platform) => (
+        <div key={platform}>
+          <div
+            style={{
+              marginBottom: 8,
+              fontSize: "var(--ow-fs-caption)",
+              color: "var(--ow-text-2)",
+              fontFamily: "var(--ow-font-mono)",
+            }}
+          >
+            platform=&quot;{platform}&quot;
+          </div>
+          <div style={PANEL_FRAME}>
+            <SidePanelEmpty {...args} platform={platform} onSelect={() => { }} />
+          </div>
+        </div>
+      ))}
+    </div>
+  ),
+}

package/src/components/domain/desktop/SidePanelEmpty/SidePanelEmptySource.test.mjs

@@ -0,0 +1,67 @@
+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")
+
+/** 只在「代码」上验禁令：注释里点名 token 是文档，不是用法。 */
+const code = source.replace(/\/\*[\s\S]*?\*\//g, "").replace(/^[ \t]*\/\/.*$/gm, "")
+
+/* A8-B4（裁决 9 · 原型模板 2370–2381、文案 4031–4035）：空栏＝三行快捷动作。 */
+/* R2 · L3-2-8：常量改存语义键名，字形交给 `formatShortcut(keys, platform)`——
+   原来写死 ⌘T/⌘B/⌘P，windows/linux 上照样显示 ⌘。 */
+test("三项文案与快捷键照原型 4031–4035，只写一份（键名语义化，字形按平台渲）", () => {
+  assert.match(source, /SIDE_PANEL_EMPTY_ACTIONS/)
+  assert.match(source, /\{ id: "web", label: "新建浏览器标签", keys: \["Mod", "T"\] \}/)
+  assert.match(source, /\{ id: "terminal", label: "打开终端", keys: \["Mod", "B"\] \}/)
+  assert.match(source, /\{ id: "files", label: "打开文件管理", keys: \["Mod", "P"\] \}/)
+  // 库内不得再留 mac 字形字面量
+  assert.doesNotMatch(code, /⌘|⌥|⇧/)
+  assert.match(code, /formatShortcut\(action\.keys, platform\)/)
+  assert.match(code, /platform = "mac"/)
+})
+
+test("行形制：36 高 ＋ 0/12 内距 ＋ 1px --ow-border ＋ radius-sm ＋ --ow-surface 底", () => {
+  assert.match(code, /\bh-9\b/)
+  assert.match(code, /\bpx-3\b/)
+  assert.match(code, /border border-\[color:var\(--ow-border\)\]/)
+  assert.match(code, /\[border-radius:var\(--ow-radius-sm\)\]/)
+  assert.match(code, /bg-\[var\(--ow-surface\)\]/)
+  assert.match(code, /text-ow-fs-ui/)
+})
+
+test("交互按 §5 地面档递进（hover→press），贴地零影、焦点走 .ow-focus-ring", () => {
+  assert.match(code, /hover:bg-\[var\(--ow-hover\)\]/)
+  assert.match(code, /active:bg-\[var\(--ow-press\)\]/)
+  assert.match(code, /ow-focus-ring/)
+  assert.doesNotMatch(code, /shadow|translate|scale/)
+})
+
+test("键帽复用 Keycap 原语（18 高 ＋ mono 11），不手搓一颗", () => {
+  assert.match(source, /import \{ Keycap \}/)
+  // R2 · L3-2-8：帽里的字先由 formatShortcut 按 platform 算出来（`kbd` 仍可字面覆盖）
+  assert.match(code, /<Keycap aria-hidden="true">\{kbd\}<\/Keycap>/)
+  assert.match(
+    code,
+    /const kbd = action\.kbd \?\? \(action\.keys \? formatShortcut\(action\.keys, platform\) : undefined\)/,
+  )
+  // 键帽度量一律由原语给，本件不再写 18 / 11 / surface-2
+  assert.doesNotMatch(code, /h-\[18px\]|--ow-surface-2|11px/)
+})
+
+test("列宽 280 封顶、行间 6；外框 24 内距居中由 .side-panel-empty 段给", () => {
+  assert.match(code, /max-w-\[280px\]/)
+  assert.match(code, /\bgap-1\.5\b/)
+  const rule = css.match(/\.side-panel-empty \{[^}]*\}/s)?.[0] ?? ""
+  assert.match(rule, /place-items: center/)
+  assert.match(rule, /padding: var\(--ow-space-6, 24px\)/)
+  assert.match(rule, /flex: 1 1 auto/)
+  assert.match(rule, /min-height: 0/)
+  assert.doesNotMatch(rule, /box-shadow|border-radius/)
+})
+
+test("R3 中性件：零荧黄、不引信标母题（空栏不是三极中的任何一极）", () => {
+  assert.doesNotMatch(code, /--ow-primary|--ow-beacon|EmptyState|BeaconSpinner/)
+  assert.doesNotMatch(code, /#[0-9a-f]{3,8}|rgba?\(/i)
+})

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

@@ -0,0 +1,113 @@
+"use client"
+
+import type { ReactNode } from "react"
+import { type ShortcutKey, type ShortcutPlatform, formatShortcut } from "../../../../lib/shortcut"
+import { cn } from "../../../../lib/utils"
+import { Keycap } from "../../../primitives/Keycap"
+
+/**
+ * SidePanelEmpty —— 会话侧开栏「一个页签都没有」时的空态（原型模板 2370–2381，
+ * 文案与快捷键 4031–4035 · A8-B4）。
+ *
+ * 这一档**不是** `EmptyState`：栏里没内容时要办的事很具体——开一个页签，
+ * 所以原型给的是「三行可点的快捷动作」而不是「母题＋一句话＋一颗钮」。
+ * §6 容器空态的两级形制管的是「说明型」空态；这里是**动作清单型**，
+ * 三行本身就是入口，不再另起标题与副句（母题也不上——它在网页页签那块占位体上
+ * 已经出现一次，同一栏里不重复信标）。研发侧同款三项现在写死在
+ * `browser-sidebar__empty`，本件把它收进组件库。
+ *
+ * 形制（原型 2371–2380）：外框 `place-items:center` ＋ 24 内距；内列 gap 6、
+ * 量度 280；每行 36 高 ＋ `0 12` 内距 ＋ 1px `--ow-border` ＋ `--ow-radius-sm`
+ * ＋ `--ow-surface` 底 ＋ `--ow-fs-ui`，hover 走 `--ow-hover`（§5 地面档递进，
+ * 贴地零影）；右端键帽直接用 `Keycap` 原语（18 高 ＋ mono 11 ＋ surface-2 ＋ 4 圆角，
+ * 与原型 2378 逐条同值）。
+ *
+ * 36 不在 §7 控件高表 {28,32,40} 上：这三行是「窄栏里的动作行」，比 40 矮一档才
+ * 在 280 量度里排得住，已记名进 ds2-allowlist 的 control-height。
+ *
+ * R3 中性件：零荧黄、无信标元素——空栏不是三极中的任何一极。
+ *
+ * 快捷键（R2 · L3-2-8）：常量里只存**语义键名**（`["Mod","T"]`），字形由 `platform`
+ * 决定——mac 渲 ⌘T、windows/linux 渲 Ctrl+T。改造前 `⌘T/⌘B/⌘P` 是写死的 mac 字形。
+ */
+
+export interface SidePanelEmptyAction {
+  /** 稳定 key（也是宿主分辨点了哪一行的凭据）。 */
+  id: string
+  /** 行文案，如「新建浏览器标签」。 */
+  label: ReactNode
+  /**
+   * 右端键帽的**语义键名**，如 `["Mod","T"]`——`Mod` 在 mac 渲成 ⌘、其余平台渲成 Ctrl
+   * （R2 · L3-2-8：原来这里直接存 `"⌘T"`，windows/linux 上照样显示 ⌘）。
+   */
+  keys?: readonly ShortcutKey[]
+  /**
+   * 键帽字面文案，绕过平台渲染直接照抄（宿主已有成品字串时用）。传了就压过 `keys`。
+   * @deprecated 新代码请传 `keys`，让字形跟着 `platform` 走。
+   */
+  kbd?: string
+  /** 点击回调；不传时由 `onSelect` 统一接。 */
+  onSelect?: () => void
+}
+
+/**
+ * 原型 4031–4035 的三项默认动作。文案与快捷键在这里只写一份，
+ * 组件库与桌面端都取它，免得两处各写一版。
+ */
+export const SIDE_PANEL_EMPTY_ACTIONS: readonly SidePanelEmptyAction[] = [
+  { id: "web", label: "新建浏览器标签", keys: ["Mod", "T"] },
+  { id: "terminal", label: "打开终端", keys: ["Mod", "B"] },
+  { id: "files", label: "打开文件管理", keys: ["Mod", "P"] },
+]
+
+export interface SidePanelEmptyProps {
+  /** 动作行，缺省＝原型三项（新建浏览器标签 / 打开终端 / 打开文件管理）。 */
+  actions?: readonly SidePanelEmptyAction[]
+  /** 统一点击回调：拿到被点那一行；行自带的 `onSelect` 优先。 */
+  onSelect?: (action: SidePanelEmptyAction) => void
+  /** 动作组无障碍名，缺省「新建页签」。 */
+  label?: string
+  /**
+   * 键帽字形按哪个平台渲（受控，权威值由主进程注入，库侧不嗅探 userAgent）。
+   * 缺省 `"mac"` ＝ R2 之前的现状，宿主接上之后按真实平台传。
+   */
+  platform?: ShortcutPlatform
+  className?: string
+}
+
+export function SidePanelEmpty({
+  actions = SIDE_PANEL_EMPTY_ACTIONS,
+  onSelect,
+  label = "新建页签",
+  platform = "mac",
+  className,
+}: SidePanelEmptyProps) {
+  return (
+    <div data-slot="side-panel-empty" className={cn("side-panel-empty", className)}>
+      <div role="group" aria-label={label} className="flex w-full max-w-[280px] flex-col gap-1.5">
+        {actions.map((action) => {
+          const kbd = action.kbd ?? (action.keys ? formatShortcut(action.keys, platform) : undefined)
+          return (
+            <button
+              key={action.id}
+              type="button"
+              data-slot="side-panel-empty-action"
+              onClick={() => (action.onSelect ? action.onSelect() : onSelect?.(action))}
+              className={cn(
+                "flex h-9 w-full cursor-pointer items-center gap-2.5 px-3 text-left",
+                "border border-[color:var(--ow-border)] [border-radius:var(--ow-radius-sm)] bg-[var(--ow-surface)]",
+                "text-ow-fs-ui text-[color:var(--ow-text)]",
+                "transition-colors duration-[var(--ow-dur-1)] ease-[var(--ow-ease-beacon)]",
+                "hover:bg-[var(--ow-hover)] active:bg-[var(--ow-press)]",
+                "ow-focus-ring",
+              )}
+            >
+              <span className="min-w-0 flex-1 truncate">{action.label}</span>
+              {kbd ? <Keycap aria-hidden="true">{kbd}</Keycap> : null}
+            </button>
+          )
+        })}
+      </div>
+    </div>
+  )
+}

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

@@ -0,0 +1,65 @@
+import type { Meta, StoryObj } from "@storybook/react"
+import { useState } from "react"
+import { HOME_STARTER_CAPSULES, StarterCapsules } from "./index"
+
+/**
+ * 主屏起手胶囊（原型模板 842–851 · 裁决 18）。
+ *
+ * 一期五枚固定示例，点一下把这枚的文字塞进输入框。32 高 / `0 14px` / 1px `--ow-border` /
+ * 按钮档圆角 8；选中走「当前项」语法（`--ow-current-bg` ＋ 500 字重），**无彩**——荧黄只归三极。
+ */
+const meta = {
+  title: "Desktop/StarterCapsules",
+  component: StarterCapsules,
+  parameters: { layout: "centered" },
+} satisfies Meta<typeof StarterCapsules>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+/** 静止档：一枚都没按下，全是透明底 ＋ 1px 边。 */
+export const Default: Story = {
+  args: {},
+}
+
+/** 按下档：`--ow-current-bg` 填充块 ＋ 500 字重，边不换色、不加影、不加彩。 */
+export const Pressed: Story = {
+  args: { value: "code-review" },
+}
+
+/** 接线档：点击 → 文字进输入框（这里用一条只读回显代替真 composer）。 */
+export const FeedsTheComposer: Story = {
+  render: () => {
+    const [draft, setDraft] = useState("")
+    const [picked, setPicked] = useState<string | null>(null)
+    return (
+      <div className="flex flex-col items-center gap-5" style={{ width: 520 }}>
+        <StarterCapsules
+          value={picked}
+          onSelect={(option) => {
+            setPicked(option.id)
+            setDraft(option.label)
+          }}
+        />
+        <div
+          className="w-full px-3 py-2 text-ow-fs-body text-[color:var(--ow-text)] border border-[color:var(--ow-border)] [border-radius:var(--ow-radius-lg)]"
+          style={{ background: "var(--ow-surface-2)" }}
+        >
+          {draft || <span className="text-[color:var(--ow-text-3)]">今天帮你做些什么？</span>}
+        </div>
+      </div>
+    )
+  },
+}
+
+/** 真列表接上后的样子（研发把 plugins 数据塞进 `options` 即可，形制不变）。 */
+export const CustomOptions: Story = {
+  args: {
+    options: [
+      ...HOME_STARTER_CAPSULES.slice(0, 2),
+      { id: "weekly-report", label: "周报汇总" },
+      { id: "data-clean", label: "数据清洗与对账" },
+    ],
+    value: "weekly-report",
+  },
+}

package/src/components/domain/desktop/StarterCapsules/StarterCapsulesSource.test.mjs

@@ -0,0 +1,43 @@
+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")
+
+test("一期固定五枚（裁决 18），文案与原型模板 846–850 同字", () => {
+  const list = source.slice(source.indexOf("HOME_STARTER_CAPSULES"), source.indexOf("StarterCapsulesProps"))
+  for (const label of ["每日简报", "代码评审", "文档撰写", "建站发布", "自定义"]) {
+    assert.ok(list.includes(label), `缺胶囊「${label}」`)
+  }
+  assert.equal([...list.matchAll(/label: "/g)].length, 5)
+})
+
+test("形制：32 高 / 0 14px / 1px --ow-border / 按钮档圆角 --ow-radius-sm / --ow-fs-body", () => {
+  assert.match(source, /h-8 px-\[14px\]/)
+  assert.match(source, /border border-\[color:var\(--ow-border\)\]/)
+  assert.match(source, /\[border-radius:var\(--ow-radius-sm\)\]/)
+  assert.match(source, /text-ow-fs-body/)
+  // 999 胶囊只留给带状态点/计数的 chip
+  assert.doesNotMatch(source, /rounded-full|--ow-radius-pill|9999px/)
+})
+
+test("底色递进走地面档：默认透明 → hover --ow-hover → 按下 --ow-press，贴地零影", () => {
+  assert.match(source, /bg-transparent/)
+  assert.match(source, /hover:bg-\[var\(--ow-hover\)\]/)
+  assert.match(source, /active:bg-\[var\(--ow-press\)\]/)
+  assert.doesNotMatch(source, /--ow-hover-pop|--ow-press-pop/)
+  assert.doesNotMatch(source, /shadow/)
+})
+
+test("选中＝当前项语法（--ow-current-bg ＋ 500），无彩；语义走 aria-pressed", () => {
+  assert.match(source, /bg-\[var\(--ow-current-bg\)\] font-medium/)
+  assert.match(source, /aria-pressed=\{pressed\}/)
+  // R3 中性件：荧黄只归三极，选中不是其中之一
+  assert.doesNotMatch(source, /--ow-(beacon|yellow|accent|primary)/)
+  assert.doesNotMatch(source, /#[0-9a-fA-F]{3,8}/)
+})
+
+test("§9 变化只走色，且时长挂 --ow-dur-*（不落 tailwind 默认 150ms）", () => {
+  assert.match(source, /transition-colors duration-\[var\(--ow-dur-1\)\] ease-\[var\(--ow-ease-beacon\)\]/)
+  assert.doesNotMatch(source, /translate|scale-/)
+})