@orbit-work/ui 0.1.1 → 0.1.2

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

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

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

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

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

@@ -1,55 +0,0 @@
-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>
-  )
-}