@orbit-work/ui 0.1.0

package/src/components/composite/TimePicker/TimePickerSource.test.mjs

@@ -0,0 +1,98 @@
+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("./TimePicker.stories.tsx", import.meta.url), "utf8")
+
+test("TimePicker 是 R3 中性件：无信标/荧黄", () => {
+  assert.doesNotMatch(source, /--ow-beacon|--ow-accent-dot|--ow-yellow|--ow-data-today/)
+})
+
+test("弹层立面走 pop 档（§5）：popover-bg + 1px 边 + shadow-pop + 圆角 10 + z-dropdown", () => {
+  assert.match(source, /bg-\[var\(--ow-popover-bg\)\] border border-\[color:var\(--ow-border\)\]/)
+  assert.match(source, /\[box-shadow:var\(--ow-shadow-pop\)\]/)
+  assert.match(source, /\[border-radius:var\(--ow-radius-menu\)\]/)
+  assert.match(source, /z-\[var\(--ow-z-dropdown\)\]/)
+})
+
+test("层内行 hover 一律 pop 档 hover-pop / press-pop（不得用全局 hover 档）", () => {
+  assert.match(source, /hover:bg-\[var\(--ow-hover-pop\)\] active:bg-\[var\(--ow-press-pop\)\]/)
+  assert.doesNotMatch(source, /hover:bg-\[var\(--ow-hover\)\]/)
+})
+
+test("读数 mono + tabular-nums（时刻与时区偏移都算读数，§7）", () => {
+  assert.match(
+    source,
+    /const readoutClass = "font-\[family-name:var\(--ow-font-mono\)\] \[font-variant-numeric:tabular-nums\]"/,
+  )
+})
+
+test("触发器 = Field 三态壳（rest → hover → focus/open 只换边框色，R3），高 40 圆角 8", () => {
+  assert.match(
+    source,
+    /border-\[color:var\(--ow-input-border\)\] hover:border-\[color:var\(--ow-input-border-hover\)\]/,
+  )
+  // R3（2026-09-04，Terry 意见 1）：输入类 open/focus 只把 1px 边换成 --ow-input-border-focus，
+  // 不再叠 --ow-focus-shadow 的外环。下一条的键盘 focus-visible 环仍在，那是按钮语汇。
+  assert.match(source, /\? "border-\[color:var\(--ow-input-border-focus\)\]"/)
+  assert.doesNotMatch(source, /border-\[color:var\(--ow-input-border-focus\)\] \[box-shadow:/)
+  assert.match(source, /"w-full h-10 px-3/)
+  assert.match(source, /\[border-radius:var\(--ow-radius-control\)\]/)
+})
+
+test("§6 状态齐：focus-visible 2px 环 + disabled 逐 token（禁统一透明度）", () => {
+  assert.match(source, /focus-visible:\[box-shadow:var\(--ow-focus-shadow\)\]/)
+  assert.match(source, /disabled:bg-\[var\(--ow-input-disabled-bg\)\]/)
+  assert.match(source, /disabled:text-\[color:var\(--ow-input-disabled-text\)\]/)
+  // 断言里不写全字面量，避免 check-ds2 的 disabled 规则误伤本测试文件
+  assert.doesNotMatch(source, new RegExp(["disabled:", "opacity-"].join("")))
+  assert.doesNotMatch(source, new RegExp(["--ow-opacity", "-disabled"].join("")))
+})
+
+test("选中项双编码（R1）：selected-bg + 字重 + aria-selected，不靠单一底色", () => {
+  assert.match(source, /aria-selected=\{hour === draftHours\}/)
+  // R2 复审：600 改 500——无彩选中口径是「surface 递进 + border-strong + 500 字重」，
+  // 且选项挂着 --ow-font-mono，而 mono 族只自托管 400/500，600 会落到浏览器合成粗体。
+  assert.match(source, /bg-\[var\(--ow-selected-bg\)\] text-\[color:var\(--ow-text\)\] font-medium/)
+  assert.doesNotMatch(source, /font-semibold/)
+})
+
+test("弹层可达性：role=dialog + Esc 关闭 + 两列 listbox", () => {
+  assert.match(source, /role="dialog"/)
+  assert.match(source, /event\.key === "Escape"/)
+  assert.match(source, /role="listbox"[\s\S]*aria-label="小时"/)
+  assert.match(source, /aria-label="分钟"/)
+})
+
+test("旧 .tpick BEM 类已退场，样式由组件自绘", () => {
+  assert.doesNotMatch(source, /tpick/)
+})
+
+test("动效只用 ease-beacon + 120/200/320 档，无位移式反馈", () => {
+  assert.match(source, /ease-\[var\(--ow-ease-beacon\)\]/)
+  assert.doesNotMatch(source, /duration-\[(?!var\(--ow-dur-[123]\))/)
+  assert.doesNotMatch(source, /hover:[^"]*(?:scale-|translate-)/)
+})
+
+test("Tailwind 任意值 var() 全部带类型标注（ambiguous-arbitrary 铁律）", () => {
+  assert.doesNotMatch(source, /(?:text|border)-\[var\(--ow-/)
+  assert.doesNotMatch(source, /font-\[var\(--ow-font-/)
+})
+
+test("stories 覆盖全部状态 + 双主题、不写死主题与裸 hex", () => {
+  for (const name of [
+    "Default",
+    "Afternoon",
+    "UTCTimezone",
+    "NewYorkTimezone",
+    "Disabled",
+    "OpenPopover",
+    "ThemePair",
+  ]) {
+    assert.match(stories, new RegExp(`export const ${name}\\b`))
+  }
+  assert.match(stories, /data-theme="light"/)
+  assert.match(stories, /data-theme="dark"/)
+  assert.doesNotMatch(stories, /#[0-9a-fA-F]{3,8}\b/)
+})

package/src/components/composite/TimePicker/index.tsx

@@ -0,0 +1,208 @@
+"use client"
+
+import { useEffect, useRef, useState } from "react"
+import { usePopover } from "../../../hooks/usePopover"
+import { cn } from "../../../lib/utils"
+import { Button } from "../../primitives/Button"
+import { Clock } from "../Icons"
+
+/**
+ * TimePicker — 时刻选择器（DS 2.0 模式件 · R3 中性件，无信标元素）。
+ *
+ * 触发器＝Field 三态壳（rest `--ow-input-border` → hover `--ow-input-border-hover`
+ * → focus/open `--ow-input-border-focus`，R3 起只换边框色不叠外环），高 40、圆角 8。
+ * 弹层＝立面 pop 档（§5）：底 `--ow-popover-bg`、1px `--ow-border`、`--ow-shadow-pop`、
+ * 圆角 10（`--ow-radius-menu`）、z = `var(--ow-z-dropdown)`；层内行 hover 一律
+ * `--ow-hover-pop` / press `--ow-press-pop`，选中项靠 `--ow-selected-bg` + 字重双编码（R1）。
+ * 读数（时刻、时区偏移）一律 mono + tabular-nums（§7）。
+ * 状态（§6）：default / hover / press / focus-visible / disabled 齐；值只在「确定」后回吐。
+ */
+
+export interface TimePickerProps {
+  /** "HH:mm" */
+  value: string
+  /** IANA 时区名，用于显示 GMT 偏移 */
+  timezone: string
+  onChange: (value: string) => void
+  disabled?: boolean
+  /** 无可见标签时的可访问名 */
+  "aria-label"?: string
+  confirmLabel?: string
+  className?: string
+}
+
+const HOURS = Array.from({ length: 24 }, (_, index) => index)
+const MINUTES = Array.from({ length: 60 }, (_, index) => index)
+const pad2 = (value: number) => String(value).padStart(2, "0")
+
+function gmtLabel(timezone: string): string {
+  try {
+    const part = new Intl.DateTimeFormat("en", { timeZone: timezone, timeZoneName: "shortOffset" })
+      .formatToParts(new Date())
+      .find((value) => value.type === "timeZoneName")?.value
+    return part?.replace("GMT+0", "GMT") ?? timezone
+  } catch {
+    return timezone
+  }
+}
+
+const readoutClass = "font-[family-name:var(--ow-font-mono)] [font-variant-numeric:tabular-nums]"
+
+const optionClass = [
+  "shrink-0 h-7 w-full border-none bg-transparent cursor-pointer",
+  "[border-radius:var(--ow-radius-2xs)]",
+  "text-ow-fs-ui text-[color:var(--ow-text-3)]",
+  readoutClass,
+  "transition-colors duration-[var(--ow-dur-1)] ease-[var(--ow-ease-beacon)]",
+  "hover:bg-[var(--ow-hover-pop)] active:bg-[var(--ow-press-pop)]",
+  "focus-visible:outline-none focus-visible:[box-shadow:var(--ow-focus-shadow)]",
+].join(" ")
+
+/** Hour/minute picker that emits only after explicit confirmation. */
+export function TimePicker({
+  value,
+  timezone,
+  onChange,
+  disabled = false,
+  "aria-label": ariaLabel,
+  confirmLabel = "确定",
+  className,
+}: TimePickerProps): React.ReactElement {
+  const { open, up, wrapRef, btnRef, toggle, close } = usePopover(340)
+  const hourColumnRef = useRef<HTMLDivElement>(null)
+  const minuteColumnRef = useRef<HTMLDivElement>(null)
+  const [hoursPart, minutesPart] = value.split(":")
+  const parsedHours = Number(hoursPart)
+  const parsedMinutes = Number(minutesPart)
+  const hours = Number.isFinite(parsedHours) ? parsedHours : 9
+  const minutes = Number.isFinite(parsedMinutes) ? parsedMinutes : 0
+  const [draftHours, setDraftHours] = useState(hours)
+  const [draftMinutes, setDraftMinutes] = useState(minutes)
+
+  useEffect(() => {
+    if (!open) return
+    setDraftHours(hours)
+    setDraftMinutes(minutes)
+    requestAnimationFrame(() => {
+      hourColumnRef.current?.querySelector('[data-ow-role="selected"]')?.scrollIntoView({ block: "center" })
+      minuteColumnRef.current?.querySelector('[data-ow-role="selected"]')?.scrollIntoView({ block: "center" })
+    })
+  }, [hours, minutes, open])
+
+  useEffect(() => {
+    if (!open) return undefined
+    const onKeyDown = (event: globalThis.KeyboardEvent) => {
+      if (event.key === "Escape") close()
+    }
+    document.addEventListener("keydown", onKeyDown)
+    return () => document.removeEventListener("keydown", onKeyDown)
+  }, [open, close])
+
+  const confirm = () => {
+    onChange(`${pad2(draftHours)}:${pad2(draftMinutes)}`)
+    close()
+  }
+
+  return (
+    <div data-slot="time-picker" className={cn("relative w-full", open && "z-10", className)} ref={wrapRef}>
+      <button
+        type="button"
+        ref={btnRef}
+        data-ow-part="control"
+        data-ow-role={open ? "open" : "closed"}
+        disabled={disabled}
+        aria-haspopup="dialog"
+        aria-expanded={open}
+        aria-label={ariaLabel}
+        onClick={toggle}
+        className={cn(
+          "w-full h-10 px-3 flex items-center justify-between gap-1.5 cursor-pointer text-left",
+          "border bg-[var(--ow-input-bg)] text-[color:var(--ow-input-text)] text-ow-fs-ui font-normal",
+          "[border-radius:var(--ow-radius-control)]",
+          "transition-[border-color,box-shadow,background-color] duration-[var(--ow-dur-1)] ease-[var(--ow-ease-beacon)]",
+          "focus-visible:outline-none focus-visible:[box-shadow:var(--ow-focus-shadow)]",
+          "disabled:cursor-not-allowed disabled:bg-[var(--ow-input-disabled-bg)] disabled:border-[color:var(--ow-disabled-border)] disabled:text-[color:var(--ow-input-disabled-text)]",
+          open
+            ? "border-[color:var(--ow-input-border-focus)]"
+            : "border-[color:var(--ow-input-border)] hover:border-[color:var(--ow-input-border-hover)]",
+        )}
+      >
+        <span className={cn("min-w-0 overflow-hidden text-ellipsis whitespace-nowrap", readoutClass)}>
+          {pad2(hours)}:{pad2(minutes)}{" "}
+          <span className={cn("text-ow-fs-mark-md text-[color:var(--ow-text-3)]", readoutClass)}>
+            {gmtLabel(timezone)}
+          </span>
+        </span>
+        <Clock className="w-3.5 h-3.5 shrink-0 text-[color:var(--ow-text-3)]" aria-hidden="true" />
+      </button>
+      {open && (
+        <div
+          role="dialog"
+          aria-label={ariaLabel ?? "选择时刻"}
+          data-ow-part="popover"
+          className={cn(
+            "absolute right-0 w-44 overflow-hidden",
+            "z-[var(--ow-z-dropdown)]",
+            "bg-[var(--ow-popover-bg)] border border-[color:var(--ow-border)]",
+            "[border-radius:var(--ow-radius-menu)] [box-shadow:var(--ow-shadow-pop)]",
+            up ? "bottom-[calc(100%+4px)]" : "top-[calc(100%+4px)]",
+          )}
+        >
+          <div className="flex h-44">
+            <div
+              ref={hourColumnRef}
+              role="listbox"
+              aria-label="小时"
+              className="flex-1 flex flex-col gap-px overflow-y-auto p-1.5 border-r border-[color:var(--ow-border)] [scrollbar-width:none] [&::-webkit-scrollbar]:hidden"
+            >
+              {HOURS.map((hour) => (
+                <button
+                  key={hour}
+                  type="button"
+                  role="option"
+                  aria-selected={hour === draftHours}
+                  data-ow-role={hour === draftHours ? "selected" : "option"}
+                  className={cn(
+                    optionClass,
+                    hour === draftHours && "bg-[var(--ow-selected-bg)] text-[color:var(--ow-text)] font-medium",
+                  )}
+                  onClick={() => setDraftHours(hour)}
+                >
+                  {pad2(hour)}
+                </button>
+              ))}
+            </div>
+            <div
+              ref={minuteColumnRef}
+              role="listbox"
+              aria-label="分钟"
+              className="flex-1 flex flex-col gap-px overflow-y-auto p-1.5 [scrollbar-width:none] [&::-webkit-scrollbar]:hidden"
+            >
+              {MINUTES.map((minute) => (
+                <button
+                  key={minute}
+                  type="button"
+                  role="option"
+                  aria-selected={minute === draftMinutes}
+                  data-ow-role={minute === draftMinutes ? "selected" : "option"}
+                  className={cn(
+                    optionClass,
+                    minute === draftMinutes && "bg-[var(--ow-selected-bg)] text-[color:var(--ow-text)] font-medium",
+                  )}
+                  onClick={() => setDraftMinutes(minute)}
+                >
+                  {pad2(minute)}
+                </button>
+              ))}
+            </div>
+          </div>
+          <div className="border-t border-[color:var(--ow-border)] p-1.5">
+            <Button variant="primary" size="sm" className="w-full" onClick={confirm}>
+              {confirmLabel}
+            </Button>
+          </div>
+        </div>
+      )}
+    </div>
+  )
+}

package/src/components/composite/TitleBar/TitleBar.stories.tsx

@@ -0,0 +1,329 @@
+import type { Meta, StoryObj } from "@storybook/react"
+import { Button } from "../../primitives"
+import { More, Search } from "../Icons"
+import { SidebarToggle, TitleBar, WindowBand, WindowChrome } from "./index"
+
+const meta = {
+  title: "Composite/TitleBar",
+  component: TitleBar,
+  parameters: {
+    layout: "fullscreen",
+  },
+  tags: ["autodocs"],
+} satisfies Meta<typeof TitleBar>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+const Frame = ({ children }: { children: React.ReactNode }) => (
+  <div
+    style={{
+      width: 720,
+      border: "1px solid var(--ow-border)",
+      borderRadius: "var(--ow-radius-modal)",
+      overflow: "hidden",
+      background: "var(--ow-bg)",
+    }}
+  >
+    {children}
+    <div style={{ height: 120, padding: 16, fontSize: 13, color: "var(--ow-text-2)" }}>窗口内容区</div>
+  </div>
+)
+
+/** 基本形：48 高、通栏 1px 底边、贴地无影。 */
+export const Basic: Story = {
+  args: { title: "工作台" },
+  render: (args) => (
+    <Frame>
+      <TitleBar {...args} />
+    </Frame>
+  ),
+}
+
+export const WithSubtitle: Story = {
+  args: { title: "站点发布", subtitle: "orbitwork.dev" },
+  render: (args) => (
+    <Frame>
+      <TitleBar {...args} />
+    </Frame>
+  ),
+}
+
+/** 左侧插槽（折叠钮）+ 右侧动作区。条内交互底色走地面档 hover/press。 */
+export const WithLeadingAndActions: Story = {
+  args: {
+    title: "工作台",
+    leading: <SidebarToggle onToggle={() => {}} />,
+    actions: (
+      <>
+        <Button variant="ghost" size="sm" aria-label="搜索" icon={<Search width={16} height={16} />} />
+        <Button variant="ghost" size="sm" aria-label="更多操作" icon={<More width={16} height={16} />} />
+      </>
+    ),
+  },
+  render: (args) => (
+    <Frame>
+      <TitleBar {...args} />
+    </Frame>
+  ),
+}
+
+/** macOS：左侧让出红绿灯净空，窗口控制交给系统。 */
+export const PlatformMac: Story = {
+  args: { platform: "mac", title: "工作台" },
+  render: (args) => (
+    <Frame>
+      <TitleBar {...args} />
+    </Frame>
+  ),
+}
+
+/** Windows / Linux：右侧挂 WindowChrome 三键。 */
+export const PlatformWindows: Story = {
+  args: {
+    platform: "windows",
+    title: "工作台",
+    chrome: <WindowChrome onMinimize={() => {}} onToggleMaximize={() => {}} onClose={() => {}} />,
+  },
+  render: (args) => (
+    <Frame>
+      <TitleBar {...args} />
+    </Frame>
+  ),
+}
+
+/** 已最大化：最大化键换还原字形。 */
+export const WindowChromeMaximized: Story = {
+  args: {
+    platform: "windows",
+    title: "工作台",
+    chrome: <WindowChrome maximized onMinimize={() => {}} onToggleMaximize={() => {}} onClose={() => {}} />,
+  },
+  render: (args) => (
+    <Frame>
+      <TitleBar {...args} />
+    </Frame>
+  ),
+}
+
+/** 固定尺寸窗口：只留关闭键。 */
+export const WindowChromeCloseOnly: Story = {
+  args: {
+    platform: "windows",
+    title: "关于 Orbitwork",
+    chrome: <WindowChrome hideMinimize hideMaximize onClose={() => {}} />,
+  },
+  render: (args) => (
+    <Frame>
+      <TitleBar {...args} />
+    </Frame>
+  ),
+}
+
+/** 透明底：与正文同面时用（详情页头部）。 */
+export const Transparent: Story = {
+  args: { transparent: true, title: "详情" },
+  render: (args) => (
+    <div style={{ width: 720, background: "var(--ow-surface)", border: "1px solid var(--ow-border)" }}>
+      <TitleBar {...args} />
+      <div style={{ height: 100, padding: 16, fontSize: 13, color: "var(--ow-text-2)" }}>与标题栏同面的正文</div>
+    </div>
+  ),
+}
+
+/** 双主题对照：同一条标题栏在浅/暗两档下的表现（不写死主题，靠 data-theme 作用域）。 */
+export const ThemeMatrix: Story = {
+  args: { title: "工作台" },
+  render: (args) => (
+    <div style={{ display: "flex", flexDirection: "column", gap: 16 }}>
+      {(["light", "dark"] as const).map((theme) => (
+        <div key={theme} data-theme={theme} style={{ background: "var(--ow-bg)", padding: 16 }}>
+          <div
+            style={{
+              border: "1px solid var(--ow-border)",
+              borderRadius: "var(--ow-radius-modal)",
+              overflow: "hidden",
+            }}
+          >
+            <TitleBar
+              {...args}
+              platform="windows"
+              chrome={<WindowChrome onMinimize={() => {}} onToggleMaximize={() => {}} onClose={() => {}} />}
+            />
+            <div style={{ height: 72, padding: 16, fontSize: 13, color: "var(--ow-text-2)" }}>窗口内容区</div>
+          </div>
+        </div>
+      ))}
+    </div>
+  ),
+}
+
+/* ================================================================
+ * 窗口带（A10 / 裁决 11 · R2 改判）：带只属 windows —— 那边 frame:false、三键必须自绘，
+ * 折叠钮跟着住在带里，折叠与展开逐像素同位。mac/linux/web 已撤带，钮住进侧栏顶行
+ * （`Layout/SidebarShell` 的 `data-slot="sidebar-toprow"`，见
+ * `Layout/SidebarShell` 的 TopRowMac / TopRowLinux 几张）。下面三张 mac 带是**历史档**：
+ * 件本身仍支持 mac 档（页内详情头也用同一件），留着当口径对照，不代表产品还有这条带。
+ * ================================================================ */
+
+/**
+ * MockWindow — 整窗骨架：顶上一条通栏 48 带，带下才是 侧栏 + 内容。
+ * 折叠时侧栏整条卸载（宽 0），带不动，所以折叠钮坐标恒定。
+ */
+const MockWindow = ({
+  platform,
+  collapsed,
+  fullscreen = false,
+  height = "100vh",
+}: {
+  platform: "mac" | "windows"
+  collapsed: boolean
+  fullscreen?: boolean
+  height?: number | string
+}) => (
+  <div
+    data-ow-mock-window={platform}
+    style={{ height, display: "flex", flexDirection: "column", overflow: "hidden", background: "var(--ow-bg)" }}
+  >
+    <WindowBand
+      platform={platform}
+      fullscreen={fullscreen}
+      collapsed={collapsed}
+      onToggle={() => {}}
+      chrome={
+        platform === "windows" ? (
+          <WindowChrome onMinimize={() => {}} onToggleMaximize={() => {}} onClose={() => {}} />
+        ) : undefined
+      }
+    />
+    <div style={{ flex: 1, display: "flex", minHeight: 0 }}>
+      {!collapsed && (
+        <aside
+          style={{
+            boxSizing: "border-box",
+            width: "var(--ow-sidebar-w)",
+            flex: "0 0 auto",
+            padding: "0 8px 10px",
+            background: "var(--ow-bg)",
+          }}
+        >
+          {/* 品牌位留在侧栏首行（原型 682–684），带内不放 logo */}
+          <div style={{ padding: "0 9px 20px", fontSize: 15, fontWeight: 600, color: "var(--ow-text)" }}>orbitwork</div>
+          <div style={{ fontSize: 13, color: "var(--ow-text-2)" }}>侧栏内容</div>
+        </aside>
+      )}
+      <main
+        style={{
+          flex: 1,
+          minWidth: 0,
+          background: "var(--ow-surface)",
+          borderLeft: "var(--ow-border-width-thin, 1px) solid var(--ow-border)",
+          padding: 16,
+          fontSize: 13,
+          color: "var(--ow-text-2)",
+        }}
+      >
+        内容区
+      </main>
+    </div>
+  </div>
+)
+
+/** mac · 展开：让位块 68 + gap 4 + 左内距 8 → 折叠钮落在 x=80、y=10。R2 起这套几何搬到了侧栏顶行，坐标一字未改。 */
+export const BandMacExpanded: Story = {
+  name: "Band Mac Expanded（历史档：mac 已改侧栏顶行）",
+  args: {},
+  render: () => <MockWindow platform="mac" collapsed={false} />,
+}
+
+/** mac · 折叠：侧栏整条卸载，折叠钮仍在 x=80、y=10 —— 逐像素零位移。 */
+export const BandMacCollapsed: Story = {
+  name: "Band Mac Collapsed（历史档：mac 已改侧栏顶行）",
+  args: {},
+  render: () => <MockWindow platform="mac" collapsed />,
+}
+
+/** mac · 全屏：红绿灯消失，让位块收 0，折叠钮回到左内距 x=8。 */
+export const BandMacFullscreen: Story = {
+  name: "Band Mac Fullscreen（历史档：mac 已改侧栏顶行）",
+  args: {},
+  render: () => <MockWindow platform="mac" collapsed={false} fullscreen />,
+}
+
+/** Windows · 展开：无让位块，折叠钮直接吃左内距落在 x=8；右端三键 44 × 满带高，右沿贴 8。 */
+export const BandWindowsExpanded: Story = {
+  args: {},
+  render: () => <MockWindow platform="windows" collapsed={false} />,
+}
+
+/** Windows · 折叠：折叠钮仍在 x=8、y=10，右端三键不动。 */
+export const BandWindowsCollapsed: Story = {
+  args: {},
+  render: () => <MockWindow platform="windows" collapsed />,
+}
+
+/** 折叠钮预制件单件：28×28 / radius-xs / ghost 立面，折叠与展开是同一个件。 */
+export const SidebarToggleStates: Story = {
+  args: {},
+  render: () => (
+    <div style={{ display: "flex", gap: 16, padding: 16, background: "var(--ow-bg)" }}>
+      <SidebarToggle collapsed={false} onToggle={() => {}} />
+      <SidebarToggle collapsed onToggle={() => {}} />
+    </div>
+  ),
+}
+
+/** 两格对照：Windows × 展开 / 折叠 —— 用来核「按钮没动」。mac 那半已搬去侧栏顶行取证。 */
+export const BandPlatformMatrix: Story = {
+  args: {},
+  render: () => (
+    <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 16, padding: 16, background: "var(--ow-bg)" }}>
+      {(["windows"] as const).map((platform) =>
+        [false, true].map((collapsed) => (
+          <div
+            key={`${platform}-${String(collapsed)}`}
+            style={{ border: "1px solid var(--ow-border)", overflow: "hidden" }}
+          >
+            <div style={{ padding: "6px 8px", fontSize: 12, color: "var(--ow-text-3)" }}>
+              {platform} · {collapsed ? "折叠" : "展开"}
+            </div>
+            <MockWindow platform={platform} collapsed={collapsed} height={200} />
+          </div>
+        )),
+      )}
+    </div>
+  ),
+}
+
+/** 双主题 × 双态（windows）：带与地同色、无分隔线在浅/暗两档都成立。 */
+export const BandThemeMatrix: Story = {
+  args: {},
+  render: () => (
+    <div style={{ display: "flex", flexDirection: "column" }}>
+      {(["light", "dark"] as const).map((theme) => (
+        <div
+          key={theme}
+          data-theme={theme}
+          style={{
+            background: "var(--ow-bg)",
+            padding: 16,
+            display: "grid",
+            gridTemplateColumns: "1fr 1fr",
+            gap: 16,
+          }}
+        >
+          {(["windows"] as const).map((platform) =>
+            [false, true].map((collapsed) => (
+              <div
+                key={`${theme}-${platform}-${String(collapsed)}`}
+                style={{ border: "1px solid var(--ow-border)", overflow: "hidden" }}
+              >
+                <MockWindow platform={platform} collapsed={collapsed} height={180} />
+              </div>
+            )),
+          )}
+        </div>
+      ))}
+    </div>
+  ),
+}