@orbit-work/ui 0.1.2-preview.0 → 0.1.3

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

@@ -1,98 +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("./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

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

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