@orbit-work/ui 0.1.0

package/src/components/domain/desktop/DesktopSettingsView/DesktopSettingsViewSource.test.mjs

@@ -0,0 +1,195 @@
+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 styles = await readFile(new URL("../../../../../styles/desktop-surfaces.css", import.meta.url), "utf8")
+
+test("R2 立面：设置是模态弹窗——定尺 960×640，圆角/影/遮罩/z 全在 composite/Dialog 身上", () => {
+  const surface = styles.match(/^\.settings-dialog \{[^\n]*\}$/m)?.[0] ?? ""
+  assert.match(surface, /width: 960px;/)
+  assert.match(surface, /height: 640px;/)
+  assert.match(surface, /max-width: calc\(100vw - 64px\);/)
+  assert.match(surface, /max-height: calc\(100vh - 64px\);/)
+  assert.match(surface, /display: flex;/)
+  // 立面自滚会把左栏十段一起卷走；滚动只发生在右栏体（.settings__content）内
+  assert.match(surface, /overflow: hidden;/)
+  // 立面地色＝左栏那一档（右栏在下一条覆成纸面）
+  assert.match(surface, /background: var\(--ow-bg\)/)
+  // 这四样一律不在本类上写：Dialog 立面已给，重写 box-shadow 还会踩 check:ds2 的 grounded-shadow
+  assert.doesNotMatch(surface, /border-radius|box-shadow/)
+  assert.doesNotMatch(surface, /z-index|--ow-scrim/)
+  // 表面三档：右栏纸面 ＋ 左沿 1px 分栏线（线只画一条，.settings__nav 不再 border-right）
+  const main = styles.match(/^\.settings-dialog \.settings__main \{[^\n]*\}$/m)?.[0] ?? ""
+  assert.match(main, /background: var\(--ow-surface\)/)
+  assert.match(main, /border-left: var\(--ow-border-width-thin, 1px\) solid var\(--ow-border\)/)
+  assert.doesNotMatch(styles.match(/^\.settings__nav \{[^\n]*\}$/m)?.[0] ?? "", /border-right/)
+  // 弹窗时代的两个 V1 类名不得复活（.overlay 全仓只有设置一家消费过）
+  const bare = styles.replace(/\/\*[\s\S]*?\*\//g, "")
+  assert.doesNotMatch(bare, /^\.overlay[\s.:{,]/m)
+  assert.doesNotMatch(bare, /^\.settings \{/m)
+  // 二级页时代的两条随之退役：让 48 带的补丁规则、以及 .settings-screen 这个类名本身
+  assert.doesNotMatch(bare, /\.settings-screen/)
+  // 结构：立面归口 Dialog bare，fitViewport=false 让开基座的 90vw/85vh/自滚
+  assert.match(source, /<Dialog\s+bare\s+fitViewport=\{false\}/)
+  assert.match(source, /ariaLabel="设置"/)
+  assert.match(source, /className=\{`settings-dialog \$\{className\}`\.trim\(\)\}/)
+  // 它现在是真模态（role=dialog + aria-modal 由 Dialog 给），件内不再自称 region
+  assert.doesNotMatch(source, /role="region"/)
+})
+
+test("A2-B1 左栏：216 宽 · 行高 32 · radius-xs · 无图标槽 · 当前项 --ow-current-bg + 500", () => {
+  const nav = styles.match(/^\.settings__nav \{[^\n]*\}$/m)?.[0] ?? ""
+  assert.match(nav, /width: 216px;/)
+  assert.match(nav, /padding: var\(--ow-space-4, 16px\) var\(--ow-space-2, 8px\);/)
+  const snav = styles.match(/^\.snav \{[^\n]*\}$/m)?.[0] ?? ""
+  assert.match(snav, /height: 32px;/)
+  assert.match(snav, /border-radius: var\(--ow-radius-xs\)/)
+  assert.match(snav, /var\(--ow-fs-ui\)/)
+  assert.match(snav, /color: var\(--ow-text\);/)
+  assert.doesNotMatch(snav, /13\.5px/)
+  assert.match(snav, /var\(--ow-ease-beacon\)/)
+  assert.match(styles, /^\.snav:hover \{ background: var\(--ow-hover\); \}$/m)
+  assert.match(styles, /^\.snav:active \{ background: var\(--ow-press\); \}$/m)
+  assert.match(styles, /^\.snav:focus-visible \{ outline: var\(--ow-focus-ring-w\) solid var\(--ow-focus-ring\)/m)
+  const active = styles.match(/^\.snav\.active \{[^\n]*\}$/m)?.[0] ?? ""
+  assert.match(active, /background: var\(--ow-current-bg\)/)
+  assert.match(active, /font-weight: 500/)
+  assert.doesNotMatch(active, /box-shadow/)
+  // 位置极信标只属侧栏当前项（SidebarCurrent 锁定件），设置的导航不加信标（R3）
+  assert.doesNotMatch(active, /--ow-beacon|--ow-accent-dot/)
+  // 原型左栏无图标：整枚图标槽（结构与样式）退场
+  assert.doesNotMatch(source, /snav__icon/)
+  assert.doesNotMatch(styles, /\.snav__icon/)
+  assert.match(source, /aria-current=\{item\.id === activeId \? "true" : undefined\}/)
+})
+
+test("A2-B1 页首：22px display 大标题 ＋ 13px 说明句 ＋ 右上 28 的 ✕", () => {
+  const top = styles.match(/^\.settings__top \{[^\n]*\}$/m)?.[0] ?? ""
+  assert.match(top, /align-items: flex-start;/)
+  assert.match(top, /padding: 20px 28px var\(--ow-space-4, 16px\);/)
+  const h = styles.match(/^\.settings__top \.h \{[^\n]*\}$/m)?.[0] ?? ""
+  assert.match(h, /font: 500 var\(--ow-fs-title\)\/var\(--ow-lh-title\) var\(--ow-font-display\)/)
+  const desc = styles.match(/^\.settings__desc \{[^\n]*\}$/m)?.[0] ?? ""
+  assert.match(desc, /var\(--ow-fs-ui\)/)
+  assert.match(desc, /color: var\(--ow-text-2\)/)
+  const x = styles.match(/^\.settings__top \.x \{[^\n]*\}$/m)?.[0] ?? ""
+  assert.match(x, /width: 28px; height: 28px;/)
+  assert.match(x, /border-radius: var\(--ow-radius-xs\)/)
+  // 不再是浮起的弹层：hover 回到与壳同一套的 --ow-hover
+  assert.match(styles, /^\.settings__top \.x:hover \{ background: var\(--ow-hover\); color: var\(--ow-text\); \}$/m)
+  assert.match(source, /<h1 className="h">\{title \?\? active\?\.label\}<\/h1>/)
+  assert.match(source, /\{desc && <div className="settings__desc">\{desc\}<\/div>\}/)
+})
+
+// R3（2026-09-04，Terry 意见 5）作废 A2-B2「一条设置一张卡」（原型 2423）——卡一多满屏都是框。
+// 段与段仍隔 14，但改成兄弟间距（gap 归 0 ＋ `> * + *` 14），相邻两条 .set-row 归零——
+// 宿主 SettingsPage 与件级 story 都把行直接铺在内容栏下，gap 会把行顶那条分隔线顶成悬空线。
+test("A2-B1/B2 内容：720 内容栏 · 段间 14（兄弟间距）· 相邻 .set-row 归零 · .set-row 是贴边零内距的分隔线行（R3）", () => {
+  const content = styles.match(/^\.settings__content \{[^\n]*\}$/m)?.[0] ?? ""
+  assert.match(content, /padding: 20px 28px var\(--ow-space-8, 32px\);/)
+  const col = styles.match(/^\.settings__col \{[^\n]*\}$/m)?.[0] ?? ""
+  assert.match(col, /max-width: 720px;/)
+  assert.match(col, /gap: 0;/)
+  assert.match(styles, /^\.settings__col > \* \+ \* \{ margin-top: 14px; \}$/m)
+  assert.match(styles, /^\.settings__col > \.set-row \+ \.set-row \{ margin-top: 0; \}$/m)
+  // 卡形类整枚退役：`.set-card` 在样式表里不复存在（注释里也没有残留说法）
+  assert.doesNotMatch(styles, /\.set-card/)
+  const row = styles.match(/^\.set-row \{[^\n]*\}$/m)?.[0] ?? ""
+  assert.match(row, /display: flex;/)
+  assert.match(row, /gap: var\(--ow-space-4, 16px\);/)
+  assert.match(row, /padding: 12px 0;/)
+  // 行不自带底 / 圆角 / 边 / 影 / margin：分隔线由 ListRow 的 divider 画，段间距由 col 的 gap 给
+  assert.doesNotMatch(row, /box-shadow|margin|border-radius|background|border:/)
+  assert.match(source, /<div className="settings__content">\s*<div className="settings__col">\{children\}<\/div>/)
+})
+
+test("只读选择位对齐输入档 token（真下拉走 Select 原语）", () => {
+  const sel = styles.match(/^\.sel \{[^\n]*\}$/m)?.[0] ?? ""
+  assert.match(sel, /height: 32px;/)
+  assert.match(sel, /var\(--ow-input-bg\)/)
+  assert.match(sel, /var\(--ow-input-border\)/)
+  assert.match(sel, /var\(--ow-radius-control\)/)
+  assert.doesNotMatch(sel, /13\.5px/)
+  assert.match(styles, /^\.sel:hover \{ border-color: var\(--ow-input-border-hover\); \}$/m)
+  assert.match(styles, /^\.sel\.disabled \{[^\n]*var\(--ow-input-disabled-bg\)[^\n]*var\(--ow-input-disabled-text\)/m)
+  // §6 禁用逐 token，不用整体透明度
+  assert.doesNotMatch(styles.match(/^\.sel\.disabled \{[^\n]*\}$/m)?.[0] ?? "", /opacity/)
+  assert.match(source, /@deprecated[\s\S]*Select` 原语/)
+})
+
+test("行家族兼容层仍是 ListRow 的薄壳，且已换 .set-row 分隔线行（R3 意见 5，作废原型 2423 的卡）", () => {
+  assert.match(source, /export function DesktopSettingRow/)
+  assert.match(source, /<ListRow\s+title=\{title\}\s+description=\{description\}\s+action=/)
+  // 行式：贴边零内距 ＋ 上下 12 ＋ 槽间 16，无底无圆角；行与行之间那条 1px --ow-border 由
+  // ListRow 自带的 divider 机制画（上一个兄弟也是行才画），所以调用点**不再**关 divider。
+  assert.match(source, /className="set-row"/)
+  assert.doesNotMatch(source, /className="set-card"/)
+  assert.doesNotMatch(source, /divider=\{false\}/)
+  assert.doesNotMatch(source.replace(/\/\*[\s\S]*?\*\//g, ""), /px-0 py-3\.5/)
+  const row = styles.match(/^\[data-slot="list-row"\]\.set-row \{[\s\S]*?\n\}$/m)?.[0] ?? ""
+  assert.match(row, /gap: var\(--ow-space-4, 16px\);/)
+  assert.match(row, /padding: 12px 0;/)
+  assert.match(row, /border-radius: 0;/)
+  assert.match(row, /background: transparent;/)
+  // 覆写不许碰 border：ListRow 的常驻透明环 ＋ divider 点亮顶边色，正是分隔线的来源
+  assert.doesNotMatch(row, /border(-color|-width|-top)?:/)
+  // 行式没有卡边，禁用态也就没有「卡边转 --ow-disabled-border」那条规则（主副文由 ListRow 逐 token 变灰）
+  assert.doesNotMatch(styles, /\[data-slot="list-row"\]\.set-row\[data-ow-state~="disabled"\]/)
+  // A2-B3：设置面内的内联分段器，选中底指 --ow-current-bg（与 .snav.active 同一枚位置语汇）
+  assert.match(
+    styles,
+    /^\.settings-dialog \[data-slot="segmented-control"\] \[data-ow-part="segment"\]\[data-ow-role="on"\] \{ background: var\(--ow-current-bg\); \}$/m,
+  )
+})
+
+test("授权行归口 ListRow：卡片只留立面，行内块退役；tint 文字取 on-tint", () => {
+  const item = styles.match(/^\.permission-item \{[^\n]*\}$/m)?.[0] ?? ""
+  assert.match(item, /border: var\(--ow-border-width-thin, 1px\) solid var\(--ow-border\)/)
+  assert.match(item, /background: var\(--ow-surface\)/)
+  assert.doesNotMatch(item, /grid-template-columns/)
+  assert.doesNotMatch(styles, /\.permission-item__(icon|copy|title|desc)\s*\{/)
+  // W5 移交 B②：.permission-badge 全族（4 条）零消费方，整族撤——授权行的状态章由
+  // ListRow ＋ Badge 原语承担，正向断言翻成反向。
+  assert.doesNotMatch(styles.replace(/\/\*[\s\S]*?\*\//g, ""), /^\s*\.permission-badge[\s.:{,]/m)
+  assert.match(styles, /^\.runtime-status--installing \{[^\n]*color: var\(--ow-warning-on-tint\)/m)
+  // §2 语义优先于原语：状态胶囊底取 surface-2，不直接引灰阶原语
+  assert.doesNotMatch(styles.match(/^\.runtime-status \{[^\n]*\}$/m)?.[0] ?? "", /--ow-gray-/)
+})
+
+test("设置页头像底色走 data 轮转枚举，功能色不作身份色", () => {
+  const avatar = styles.match(/^\.set-profile \.av\.initials \{[^\n]*\}$/m)?.[0] ?? ""
+  assert.match(avatar, /background: var\(--ow-data-1\)/)
+  assert.match(avatar, /color: var\(--ow-on-fill\)/)
+})
+
+test("R2：Escape / Tab 焦点圈 / 还焦 / 点遮罩关闭一律交给 Dialog，件内不留第二份", () => {
+  // 上一版是壳内二级页，自带一份 Escape+Tab+取焦还焦的副本。改模态后 Dialog 已给同一套，
+  // 两份都在捕获阶段注册 keydown，Escape 会被处理两次——件内那份必须整段删干净。
+  assert.doesNotMatch(source, /addEventListener\("keydown"/)
+  assert.doesNotMatch(source, /event\.key === "Escape"/)
+  assert.doesNotMatch(source, /restoreRef/)
+  assert.doesNotMatch(source, /const FOCUSABLE/)
+  assert.doesNotMatch(source, /useEffect/)
+  // Dialog 取焦是 [autofocus],[data-autofocus] 优先、否则第一枚可聚焦元素。
+  // R3（2026-09-04，Terry 意见 1/6）：落点从「当前段项」改成**右栏面板本体**——指针打开设置时
+  // 当前项上那圈键盘环会被读成「选中态焦点环」（焦点环 too much）。面板 tabIndex={-1} 只作接焦位，
+  // 由 CSS `.settings__main:focus { outline: none }` 保证不画环；Tab 一下即进导航，圈焦不变。
+  // 仍不许用 React 的 autoFocus prop：它在 commit 阶段抢焦，Dialog 的还焦目标会被记成立面内的元素，
+  // 关闭后焦点回不到触发元素（核对 T3 实测）。
+  assert.match(source, /<div className="settings__main" tabIndex=\{-1\} data-autofocus="">/)
+  assert.doesNotMatch(source, /data-autofocus=\{item\.id === activeId/)
+  assert.match(styles, /^\.settings__main:focus \{ outline: none; \}$/m)
+  assert.doesNotMatch(source, /\bautoFocus=/)
+  // 三枚新 prop：open（宿主原来靠槽的有无）/ version（左栏底 mono）/ portal（画框取证用）
+  assert.match(source, /open\?: boolean/)
+  assert.match(source, /version\?: string/)
+  assert.match(source, /portal\?: boolean/)
+  // 「返回」随二级页退役：弹窗里没有它的位置，全仓也零真实消费方
+  assert.doesNotMatch(source, /onBack|backLabel|settings__back/)
+  // 左栏底的版本号读数：mono ＋ --ow-text-3 ＋ margin-top:auto 顶到栏底
+  const ver = styles.match(/^\.settings__ver \{[^\n]*\}$/m)?.[0] ?? ""
+  assert.match(ver, /margin-top: auto;/)
+  assert.match(ver, /var\(--ow-font-mono\)/)
+  assert.match(ver, /color: var\(--ow-text-3\)/)
+})

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

@@ -0,0 +1,176 @@
+"use client"
+
+import type { ReactNode } from "react"
+import { Dialog } from "../../../composite/Dialog"
+import { ChevDown, Close } from "../../../composite/Icons"
+import { ListRow } from "../../../composite/ListRow"
+import { Button } from "../../../primitives"
+
+export interface DesktopSettingsNavItem<Id extends string = string> {
+  id: Id
+  label: string
+  /**
+   * 左栏**不出图标槽**——十段只有文字，图标位在原型（2404）里根本不存在。
+   * 字段保留为可选，只为包外宿主（apps/desktop 的 `settingsNav`）不必同批改数据；
+   * 本件不渲染它。
+   */
+  icon?: ReactNode
+  /** 段说明句（原型 2412）：右栏大标题下那一行 13px --ow-text-2，缺省则不出这一行。 */
+  description?: ReactNode
+}
+
+export interface DesktopSettingsViewProps<Id extends string = string> {
+  items: DesktopSettingsNavItem<Id>[]
+  activeId: Id
+  title?: ReactNode
+  /** 页首说明句；不传则回落当前段的 `description`（原型 2412，两者都空就不出这一行）。 */
+  description?: ReactNode
+  children: ReactNode
+  onChange: (id: Id) => void
+  onClose: () => void
+  /** 开关（缺省 true）：宿主原来靠「槽的有无」控制显隐，两种写法都成立。 */
+  open?: boolean
+  /** 左栏底部的版本号读数（mono），与账户菜单「检查更新」行尾同源；不传就不出这一行。 */
+  version?: string
+  /** 是否 portal 到 body（缺省 true，透传给 Dialog）；画框取证的 story 传 false。 */
+  portal?: boolean
+  className?: string
+}
+
+/**
+ * Desktop 设置弹窗的唯一结构实现。宿主只负责 section 状态与业务内容。
+ *
+ * 立面（R2 · Terry 2026-09-03 第 3 条）：设置是**模态弹窗**，不是壳内二级页——
+ * 上一版那张铺满窗口带以下的 `.settings-screen` 整幅二级页在这一轮撤回：
+ * 十段导航撑不满一整屏，右栏几张卡之外全是空地。
+ *
+ * 现在立面归口 `composite/Dialog` 的 `bare` 档：遮罩 `--ow-scrim`、z `--ow-z-modal`(1300)、
+ * `--ow-radius-modal`(16) ＋ 1px `--ow-border` ＋ `--ow-shadow-modal`、§9 只 opacity 的
+ * fade 入场，以及 Escape 出口 / 遮罩点击关闭 / Tab 焦点圈闭环 / 离场还焦——四件行为一件
+ * 不重写，件内那两段自制 effect（与 Dialog 的重复注册 keydown、Escape 会被处理两次）随之删掉。
+ * 定尺 960×640 与内部两档地色（左栏 `--ow-bg` / 右栏 `--ow-surface` ＋ 左沿分栏线）写在
+ * `.settings-dialog`（desktop-surfaces.css）：`fitViewport={false}` 让开基座的 90vw/85vh
+ * 与自滚，滚动只发生在右栏体内。
+ *
+ * 取焦：Dialog 的取焦是 `[autofocus],[data-autofocus]` 优先、否则第一枚可聚焦元素——R3 起
+ * `data-autofocus` 挂在右栏 `.settings__main`（tabIndex=-1、无环）上，入场焦点不落任何导航项：
+ * 落第一项会读成「当前项是第一段」，落当前项则指针打开时也画出键盘环（Terry 意见 1）。
+ * 不用 React 的 `autoFocus` prop：它不落 DOM 属性、在 commit 阶段就抢焦，等 Dialog 记还焦目标时
+ * 焦点已在立面内，关闭后回不到触发元素（核对 T3 实测 restored=false）。
+ *
+ * 接管**不是路由**：宿主仍旧只切 `settings` 槽的有无（`DesktopWorkbenchShell` 的
+ * `{settings}`），URL 与页面栈都不动，语义从「二级页」回到「模态」。
+ */
+export function DesktopSettingsView<Id extends string = string>({
+  items,
+  activeId,
+  title,
+  description,
+  children,
+  onChange,
+  onClose,
+  open = true,
+  version,
+  portal = true,
+  className = "",
+}: DesktopSettingsViewProps<Id>) {
+  const active = items.find((item) => item.id === activeId)
+  const desc = description ?? active?.description
+
+  return (
+    <Dialog
+      bare
+      fitViewport={false}
+      open={open}
+      portal={portal}
+      onClose={onClose}
+      ariaLabel="设置"
+      className={`settings-dialog ${className}`.trim()}
+    >
+      <div className="settings__nav">
+        <div className="ttl">设置</div>
+        {items.map((item) => (
+          <Button
+            variant="unstyled"
+            key={item.id}
+            type="button"
+            className={`snav${item.id === activeId ? " active" : ""}`}
+            aria-current={item.id === activeId ? "true" : undefined}
+            onClick={() => onChange(item.id)}
+          >
+            <span className="snav__label">{item.label}</span>
+          </Button>
+        ))}
+        {version && <div className="settings__ver">{version}</div>}
+      </div>
+      {/* R3（Terry 意见 1）：入场焦点改落右栏面板本体（tabIndex=-1、无环），不再落当前段项——
+          指针打开设置时当前项上那圈键盘环读作「选中态焦点环」。Tab 一下即进导航，圈焦不变。 */}
+      <div className="settings__main" tabIndex={-1} data-autofocus="">
+        <div className="settings__top">
+          <div className="settings__heading">
+            <h1 className="h">{title ?? active?.label}</h1>
+            {desc && <div className="settings__desc">{desc}</div>}
+          </div>
+          <Button variant="unstyled" className="x" onClick={onClose} title="关闭设置" aria-label="关闭设置">
+            <Close />
+          </Button>
+        </div>
+        <div className="settings__content">
+          <div className="settings__col">{children}</div>
+        </div>
+      </div>
+    </Dialog>
+  )
+}
+
+/**
+ * 设置行 —— R3（2026-09-04，Terry 意见 5）：作废 A2-B2「一条设置一张卡」（原型 2423），
+ * 回到**分隔线行**。本件仍是 `ListRow` 的薄壳，外观类 `.set-row`（贴边零内距、上下 12、
+ * 槽间 16、无底无圆角），行与行之间的 1px `--ow-border` 由 ListRow 的 `divider`
+ * 机制画（上一个兄弟也是行才画，段标题下不多一条）；段与段仍靠容器 `.settings__col`
+ * 的 gap 14 分开。禁用行逐 token（§6，不用整体透明度）：`disabled` 交给 ListRow 出
+ * `--ow-disabled-text` 主副文，右槽的假开关由 `Switch disabled` 出。
+ * 包外消费方（apps/desktop 设置页）零改动即换形。
+ */
+export function DesktopSettingRow({
+  title,
+  description,
+  disabled,
+  children,
+}: {
+  title: ReactNode
+  description?: ReactNode
+  /** 真禁用（如「暂未支持」的三条开关），逐 token 变灰，不用整体透明度 */
+  disabled?: boolean
+  children?: ReactNode
+}) {
+  return (
+    <ListRow
+      title={title}
+      description={description}
+      action={children ?? null}
+      disabled={disabled}
+      className="set-row"
+    />
+  )
+}
+
+/**
+ * @deprecated 只读的「选择位」外观件（无下拉行为）。可选项一旦真的可选，改用 `Select` 原语
+ * （primitives/Select：options + onChange，自带弹层、键盘与 §6 全状态）。
+ * 样式已对齐输入档 token：高 32 · 圆角 8 · --ow-input-bg · rest/hover 两态边框 · 禁用逐 token。
+ */
+export function DesktopSettingSelect({
+  value,
+  disabled = false,
+}: {
+  value: ReactNode
+  disabled?: boolean
+}) {
+  return (
+    <div className={`sel${disabled ? " disabled" : ""}`}>
+      {value}
+      {!disabled && <ChevDown />}
+    </div>
+  )
+}

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

@@ -0,0 +1,77 @@
+import type { Meta, StoryObj } from "@storybook/react"
+import { DesktopShareSelectionBarView } from "./index"
+
+const meta = {
+  title: "Desktop/DesktopShareSelectionBarView",
+  component: DesktopShareSelectionBarView,
+  // 挑选栏已从「absolute 通栏贴底」改成「行内条」：它不再需要定位祖先，宽度也不由自己管，
+  // 而是由 composer 那个列容器给（.composer-wrap > .composer-inner，max-width:752px）。
+  // 这里就用宿主真实的两层类做舞台——故事里量到多少宽，线上就是多少宽。
+  decorators: [
+    (Story) => (
+      <div style={{ background: "var(--ow-bg)" }}>
+        <div className="composer-wrap">
+          <div className="composer-inner">
+            <Story />
+          </div>
+        </div>
+      </div>
+    ),
+  ],
+} satisfies Meta<typeof DesktopShareSelectionBarView>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+const handlers = {
+  onToggleAll: () => console.log("Toggle all"),
+  onCancel: () => console.log("Cancel"),
+  onShare: () => console.log("Share"),
+}
+
+export const Default: Story = {
+  args: { allSelected: false, selectedCount: 3, ...handlers },
+}
+
+export const AllSelected: Story = {
+  args: { allSelected: true, selectedCount: 12, ...handlers },
+}
+
+export const SingleSelected: Story = {
+  args: { allSelected: false, selectedCount: 1, ...handlers },
+}
+
+export const NoneSelected: Story = {
+  args: { allSelected: false, selectedCount: 0, ...handlers },
+}
+
+/**
+ * 同宽证明（裁决 8）：同一个 752 列里，上面是挑选栏、下面是一枚等宽的 composer 占位框。
+ * 两条左右边必须完全对齐——挑选栏顶掉 composer 时，对话的中轴不会挪。
+ * （用 render 而不是再套一层 decorator：meta 的 .composer-wrap/.composer-inner 已经在外面了，
+ * 再套一层会把 752 又收窄一次，量出来的宽就不是线上的宽。）
+ */
+export const SameWidthAsComposer: Story = {
+  args: { allSelected: true, selectedCount: 4, ...handlers },
+  render: (args) => (
+    <div style={{ display: "flex", flexDirection: "column", gap: 8 }}>
+      <DesktopShareSelectionBarView {...args} />
+      <div
+        aria-hidden="true"
+        style={{
+          height: 96,
+          border: "1px solid var(--ow-border)",
+          borderRadius: "var(--ow-radius-lg)",
+          background: "var(--ow-surface-2)",
+          color: "var(--ow-text-3)",
+          font: "400 var(--ow-fs-caption)/1 var(--ow-font-mono)",
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+        }}
+      >
+        composer（让位后的位置） · max-width 752
+      </div>
+    </div>
+  ),
+}

package/src/components/domain/desktop/DesktopShareSelectionBarView/DesktopShareSelectionBarViewSource.test.mjs

@@ -0,0 +1,76 @@
+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 stories = await readFile(new URL("./DesktopShareSelectionBarView.stories.tsx", import.meta.url), "utf8")
+const css = await readFile(new URL("../../../../../styles/desktop-surfaces.css", import.meta.url), "utf8")
+
+const barRule = css.match(/^\.share-pick-bar \{[^}]*\}/ms)?.[0] ?? ""
+const countRule = css.match(/^\.share-pick-bar__count \{[^}]*\}/ms)?.[0] ?? ""
+
+test("挑选栏是可访问的工具条，三枚控件全走 Button sm（28）", () => {
+  assert.match(source, /role="toolbar"/)
+  assert.match(source, /aria-live="polite"/)
+  // 三枚控件：全选 / 全不选（secondary）、取消（secondary）、生成分享图（primary），全部 size="sm"
+  const sm = source.match(/size="sm"/g) ?? []
+  assert.equal(sm.length, 3)
+  assert.match(source, /variant="primary"\s+size="sm"/)
+  assert.equal((source.match(/variant="secondary"/g) ?? []).length, 2)
+  // 全选是一枚描边文字钮，不是复选框——同屏只留一种勾选语法（勾选框归每一轮）
+  assert.match(source, /全选 \/ 全不选/)
+  assert.match(source, /aria-pressed=\{allSelected\}/)
+  assert.doesNotMatch(source, /Checkbox/)
+})
+
+test("文案与量词按裁决 8：已选 N 段 / 取消 / 生成分享图", () => {
+  assert.match(source, /已选 <span className="share-pick-bar__count-value">\{selectedCount\}<\/span> 段/)
+  assert.match(source, />\s*取消\s*</)
+  assert.match(source, />\s*生成分享图\s*</)
+  assert.doesNotMatch(source, /已选 .* 条/)
+})
+
+test("形与面对原型 1430：44 高、1px --ow-border、radius-lg、--ow-surface-2、内距 0 12、gap 10", () => {
+  assert.match(barRule, /height: 44px;/)
+  assert.match(barRule, /padding: 0 var\(--ow-space-3, 12px\);/)
+  assert.match(barRule, /gap: 10px;/)
+  assert.match(barRule, /border: var\(--ow-border-width-thin, 1px\) solid var\(--ow-border\);/)
+  assert.match(barRule, /border-radius: var\(--ow-radius-lg\);/)
+  assert.match(barRule, /background: var\(--ow-surface-2\);/)
+  assert.doesNotMatch(barRule + countRule, /#[0-9a-f]{3,8}/i)
+})
+
+test("不再是 absolute 通栏贴底条，宽度交给外层 752 列", () => {
+  assert.doesNotMatch(barRule, /position:/)
+  assert.doesNotMatch(barRule, /z-index:/)
+  assert.doesNotMatch(barRule, /border-top:/)
+  assert.doesNotMatch(barRule, /(^|[^-])width:/m)
+  // 条不自管宽 → 转录列也不必再为贴底条预留底距
+  assert.doesNotMatch(css, /is-share-picking \.chat \{ padding-bottom/)
+  // 同宽证明用宿主真实的列容器（.composer-wrap > .composer-inner，max-width:752px）
+  assert.match(stories, /className="composer-wrap"/)
+  assert.match(stories, /className="composer-inner"/)
+  assert.match(stories, /export const SameWidthAsComposer/)
+  assert.match(css, /\.composer-inner \{[^}]*max-width: 752px;/s)
+})
+
+test("§7 读数：已选段数走 mono + tabular-nums + fs-caption，占中段", () => {
+  assert.match(countRule, /font-family: var\(--ow-font-mono\);/)
+  assert.match(countRule, /font-variant-numeric: tabular-nums;/)
+  assert.match(countRule, /font-size: var\(--ow-fs-caption\);/)
+  assert.match(countRule, /flex: 1 1 auto;/)
+  assert.match(countRule, /color: var\(--ow-text-2\);/)
+  assert.match(
+    css,
+    /\.share-pick-bar__count-value \{[^}]*font-family: var\(--ow-font-mono\);[^}]*font-variant-numeric: tabular-nums;[^}]*\}/s,
+  )
+  // 读数不再需要 spacer 撑开（自己 flex:1 占中段）
+  assert.doesNotMatch(css, /\.share-pick-bar__spacer/)
+  assert.doesNotMatch(source, /share-pick-bar__spacer/)
+})
+
+test("§4 三极：全选钮不占极，外壳不代画状态、更不碰 --ow-primary", () => {
+  // .share-pick-bar__all 只作接线锚点，不得再有观感声明（形与状态由 Button secondary 自持）
+  assert.doesNotMatch(css, /\.share-pick-bar__all[^{]*\{/)
+  assert.doesNotMatch(barRule, /--ow-primary/)
+})

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

@@ -0,0 +1,55 @@
+import { Button } from "../../../primitives"
+
+export interface DesktopShareSelectionBarViewProps {
+  allSelected: boolean
+  selectedCount: number
+  onToggleAll: () => void
+  onCancel: () => void
+  onShare: () => void
+}
+
+/**
+ * 会话内「选段分享」的挑选栏（原型 template.dc.html:1430）。
+ *
+ * 形：44px 高的行内条——1px --ow-border 描边 ＋ --ow-radius-lg ＋ --ow-surface-2 底，
+ * 内距 0 12、gap 10。**宽度不由本件自管**：它坐在 composer 那个 max-width:752 的列里，
+ * 于是天然与转录列同宽同轴（裁决 8「分享条与对话同宽」）。旧版是 position:absolute
+ * 的通栏贴底条，浏览器预览面板打开时会横穿预览区，已废。
+ *
+ * 三枚控件统一走 Button 的 sm 档（h-7=28，对原型 1431/1433/1434 的 28px）：
+ * - 「全选 / 全不选」是一枚描边**文字钮**，不是复选框——同屏只留一种勾选语法（勾选框归每一轮）。
+ *   §4 三极：它不占任何一极，用 secondary 的常规 hover，绝不碰 --ow-primary（暗档＝荧黄）。
+ * - 「已选 N 段」占中段（flex:1），§7 读数＝mono + tabular-nums + --ow-fs-caption。量词是「段」。
+ * - 「生成分享图」是 primary——分享模式下 composer 的发送键已让位，全屏唯一行动极，自洽。
+ */
+export function DesktopShareSelectionBarView({
+  allSelected,
+  selectedCount,
+  onToggleAll,
+  onCancel,
+  onShare,
+}: DesktopShareSelectionBarViewProps) {
+  return (
+    <div className="share-pick-bar" role="toolbar" aria-label="选择要分享的消息">
+      <Button
+        variant="secondary"
+        size="sm"
+        className="share-pick-bar__all"
+        aria-pressed={allSelected}
+        onClick={onToggleAll}
+      >
+        全选 / 全不选
+      </Button>
+      {/* §7 读数：段数是数字读数 → mono + tabular-nums（样式在 .share-pick-bar__count） */}
+      <span className="share-pick-bar__count" aria-live="polite">
+        已选 <span className="share-pick-bar__count-value">{selectedCount}</span> 段
+      </span>
+      <Button variant="secondary" size="sm" onClick={onCancel}>
+        取消
+      </Button>
+      <Button variant="primary" size="sm" onClick={onShare}>
+        生成分享图
+      </Button>
+    </div>
+  )
+}