@orbit-work/ui 0.1.0

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

@@ -0,0 +1,185 @@
+import type { Meta, StoryObj } from "@storybook/react"
+import { useState } from "react"
+import { Button } from "../../primitives"
+import { Doc, Folder } from "../Icons"
+import { DetailPanel } from "./index"
+
+const meta = {
+  title: "Composite/DetailPanel",
+  component: DetailPanel,
+  parameters: {
+    layout: "padded",
+  },
+  tags: ["autodocs"],
+} satisfies Meta<typeof DetailPanel>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const DefaultOpen: Story = {
+  args: {
+    title: "Execution Plan",
+    defaultOpen: true,
+    children: (
+      <div style={{ padding: 16, fontSize: 14, lineHeight: 1.6, color: "var(--ow-text-2)" }}>
+        <ol style={{ margin: 0, paddingLeft: 20 }}>
+          <li>Analyze requirements</li>
+          <li>Design solution architecture</li>
+          <li>Implement core functionality</li>
+          <li>Write tests and documentation</li>
+        </ol>
+      </div>
+    ),
+  },
+}
+
+export const DefaultClosed: Story = {
+  args: {
+    title: "Advanced Settings",
+    defaultOpen: false,
+    children: (
+      <div style={{ padding: 16 }}>
+        <p style={{ margin: 0, fontSize: 14, color: "var(--ow-text-2)" }}>
+          Configuration options for advanced users...
+        </p>
+      </div>
+    ),
+  },
+}
+
+export const WithIcon: Story = {
+  args: {
+    title: "Code Details",
+    icon: <Doc />,
+    defaultOpen: true,
+    children: (
+      <div style={{ padding: 16, fontFamily: "monospace", fontSize: 13, color: "var(--ow-text-2)" }}>
+        <pre style={{ margin: 0 }}>
+          {`export function example() {
+  return "Hello World"
+}`}
+        </pre>
+      </div>
+    ),
+  },
+}
+
+export const FileTree: Story = {
+  args: {
+    title: "Project Structure",
+    icon: <Folder />,
+    defaultOpen: true,
+    children: (
+      <div style={{ padding: 16, fontSize: 14 }}>
+        <div style={{ display: "flex", alignItems: "center", gap: 8, marginBottom: 8 }}>
+          <Folder style={{ width: 16, height: 16, color: "var(--ow-text-3)" }} />
+          <span>src/</span>
+        </div>
+        <div style={{ display: "flex", alignItems: "center", gap: 8, marginLeft: 24, marginBottom: 8 }}>
+          <Doc style={{ width: 16, height: 16, color: "var(--ow-text-3)" }} />
+          <span>index.ts</span>
+        </div>
+        <div style={{ display: "flex", alignItems: "center", gap: 8, marginLeft: 24 }}>
+          <Doc style={{ width: 16, height: 16, color: "var(--ow-text-3)" }} />
+          <span>App.tsx</span>
+        </div>
+      </div>
+    ),
+  },
+}
+
+export const Multiple: Story = {
+  render: () => (
+    <div style={{ display: "flex", flexDirection: "column", gap: 12, maxWidth: 600 }}>
+      <DetailPanel title="Step 1: Setup" icon={<Doc />} defaultOpen={true}>
+        <div style={{ padding: 16, fontSize: 14, color: "var(--ow-text-2)" }}>
+          Initialize project and install dependencies
+        </div>
+      </DetailPanel>
+      <DetailPanel title="Step 2: Implementation" icon={<Doc />} defaultOpen={false}>
+        <div style={{ padding: 16, fontSize: 14, color: "var(--ow-text-2)" }}>Write the core logic and components</div>
+      </DetailPanel>
+      <DetailPanel title="Step 3: Testing" icon={<Doc />} defaultOpen={false}>
+        <div style={{ padding: 16, fontSize: 14, color: "var(--ow-text-2)" }}>Run test suite and verify behavior</div>
+      </DetailPanel>
+    </div>
+  ),
+}
+
+/** 头部右侧读数：mono + tabular-nums（§7 读数规范）。 */
+export const WithMeta: Story = {
+  args: {
+    title: "运行记录",
+    icon: <Doc />,
+    meta: <span className="ow-font-mono tabular-nums">128 次</span>,
+    children: <div style={{ fontSize: 13, color: "var(--ow-text-2)" }}>最近一次运行在 12 分钟前。</div>,
+  },
+}
+
+/** 禁用态：逐 token 禁用色，头部不可展开收起（非统一透明度）。 */
+export const Disabled: Story = {
+  args: {
+    title: "高级设置",
+    icon: <Doc />,
+    disabled: true,
+    defaultOpen: false,
+    children: <div style={{ fontSize: 13, color: "var(--ow-text-2)" }}>需要先解锁工作区。</div>,
+  },
+}
+
+/** 长正文：超过 maxBodyHeight 后正文成滚动区。 */
+export const ScrollableBody: Story = {
+  args: {
+    title: "输出日志",
+    maxBodyHeight: 160,
+    children: (
+      <div style={{ display: "grid", gap: 6 }}>
+        {Array.from({ length: 20 }, (_, i) => (
+          <div key={i} className="ow-font-mono tabular-nums" style={{ fontSize: 12, color: "var(--ow-text-2)" }}>
+            line {i + 1}
+          </div>
+        ))}
+      </div>
+    ),
+  },
+}
+
+/** 受控展开：由外部状态驱动。 */
+export const Controlled: Story = {
+  render: () => {
+    const [open, setOpen] = useState(true)
+    return (
+      <div style={{ display: "grid", gap: 8, maxWidth: 480 }}>
+        <Button variant="secondary" size="sm" onClick={() => setOpen((v) => !v)}>
+          {open ? "收起" : "展开"}
+        </Button>
+        <DetailPanel title="执行计划" open={open} onOpenChange={setOpen}>
+          <div style={{ fontSize: 13, color: "var(--ow-text-2)" }}>受控展开态。</div>
+        </DetailPanel>
+      </div>
+    )
+  },
+}
+
+/** 双主题对照。 */
+export const ThemeMatrix: Story = {
+  render: () => (
+    <div style={{ display: "flex", gap: 16 }}>
+      {(["light", "dark"] as const).map((theme) => (
+        <div key={theme} data-theme={theme} style={{ background: "var(--ow-bg)", padding: 16, width: 320 }}>
+          <div style={{ display: "grid", gap: 10 }}>
+            <DetailPanel title="展开" icon={<Doc />} meta={<span className="ow-font-mono tabular-nums">3</span>}>
+              <div style={{ fontSize: 13, color: "var(--ow-text-2)" }}>正文</div>
+            </DetailPanel>
+            <DetailPanel title="收起" icon={<Doc />} defaultOpen={false}>
+              <div style={{ fontSize: 13 }}>正文</div>
+            </DetailPanel>
+            <DetailPanel title="禁用" icon={<Doc />} disabled defaultOpen={false}>
+              <div style={{ fontSize: 13 }}>正文</div>
+            </DetailPanel>
+          </div>
+        </div>
+      ))}
+    </div>
+  ),
+}

package/src/components/composite/DetailPanel/DetailPanelSource.test.mjs

@@ -0,0 +1,49 @@
+import assert from "node:assert/strict"
+import { readFile } from "node:fs/promises"
+import test from "node:test"
+
+const source = await readFile(new URL("./index.tsx", import.meta.url), "utf8")
+
+test("样式全部走 token 类，不再用行内 style 手搓（P4 restyle）", () => {
+  assert.doesNotMatch(source, /const wrapStyle|const headerStyle|const bodyStyle/)
+  assert.doesNotMatch(source, /padding: "10px 14px"/)
+  assert.match(source, /import \{ cn \} from "\.\.\/\.\.\/\.\.\/lib\/utils"/)
+})
+
+test("立面按 §5/§7：贴地 0 影 + 1px 边，卡片圆角 12", () => {
+  assert.match(source, /bg-ow-surface border border-\[color:var\(--ow-border\)\] shadow-none/)
+  assert.match(source, /\[border-radius:var\(--ow-radius-card\)\]/)
+  assert.doesNotMatch(source, /shadow-\[var\(--ow-shadow/)
+})
+
+test("头部是行高档 40 的按钮行，与正文 1px 分隔；正文可滚", () => {
+  assert.match(source, /h-\[var\(--ow-row-h\)\]/)
+  assert.match(source, /data-slot="detail-panel-body"/)
+  assert.match(source, /border-t border-\[color:var\(--ow-border\)\][^"]*overflow-auto/)
+})
+
+test("状态完整（§6）：hover / press / focus-visible / disabled 逐 token", () => {
+  assert.match(source, /hover:bg-\[var\(--ow-hover\)\] active:bg-\[var\(--ow-press\)\]/)
+  assert.match(source, /ow-focus-ring/)
+  assert.match(source, /disabled:text-\[color:var\(--ow-disabled-text\)\]/)
+  assert.doesNotMatch(source, /opacity-\d/)
+})
+
+test("无障碍：头部是 button，带 aria-expanded / aria-controls", () => {
+  assert.match(source, /<button/)
+  assert.match(source, /aria-expanded=\{open\}/)
+  assert.match(source, /aria-controls=\{bodyId\}/)
+  assert.doesNotMatch(source, /role="button" tabIndex=\{0\}/)
+})
+
+test("动效只有箭头旋转：ease-beacon + 120/200 档，无位移/缩放 hover", () => {
+  assert.match(source, /transition-transform duration-\[var\(--ow-dur-2\)\] ease-\[var\(--ow-ease-beacon\)\]/)
+  assert.match(source, /transition-colors duration-\[var\(--ow-dur-1\)\] ease-\[var\(--ow-ease-beacon\)\]/)
+  assert.doesNotMatch(source, new RegExp(["hover:", "(?:scale|translate)-"].join("")))
+  assert.doesNotMatch(source, /var\(--ow-ease\)/)
+})
+
+test("中性件（R3）：禁信标/荧黄；无 Tailwind 歧义任意值", () => {
+  assert.doesNotMatch(source, /--ow-yellow|--ow-beacon|--ow-accent-dot/)
+  assert.doesNotMatch(source, /(?:text|border)-\[var\(--ow-/)
+})

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

@@ -0,0 +1,120 @@
+"use client"
+
+import { type ReactNode, useCallback, useId, useState } from "react"
+import { cn } from "../../../lib/utils"
+import { ChevRight } from "../Icons"
+
+/**
+ * DetailPanel — 可折叠详情面板（DS 2.0 模式层）
+ *
+ * 规格（COMPONENT-RULES §5/§6/§7/§9）：
+ * - 贴地立面：0 影 + 1px `--ow-border`，圆角 `--ow-radius-card`（12，卡片档）。
+ * - 头部＝行高档 `--ow-row-h`（40）的按钮行，与正文之间 1px 分隔；正文可滚（`maxBodyHeight`）。
+ *   页级详情头部（48）走 DetailScaffold / TitleBar，本件是正文内的嵌套容器。
+ * - 状态齐（§6）：hover / press / focus-visible（2px 环 + 2px 缝，由 ow-focus-ring 提供）/ disabled 逐 token。
+ * - 图标度量（§7）：折叠箭头落图标档 16（{16,20,24}，原 14 不在档上）。
+ * - 动效：只有折叠箭头旋转，ease-beacon + 200ms 档；无位移式 hover 反馈。
+ * - 中性件（R3）：不引信标/荧黄。
+ */
+export type DetailPanelProps = {
+  /** 头部标题 */
+  title: ReactNode
+  /** 头部图标 / 状态指示 */
+  icon?: ReactNode
+  /** 头部右侧附加信息（读数请自带 mono + tabular-nums） */
+  meta?: ReactNode
+  /** 非受控初始展开态 */
+  defaultOpen?: boolean
+  /** 受控展开态 */
+  open?: boolean
+  onOpenChange?: (open: boolean) => void
+  /** 禁用：不可展开收起 */
+  disabled?: boolean
+  /** 正文最大高度，超出即成滚动区 */
+  maxBodyHeight?: number | string
+  children: ReactNode
+  className?: string
+}
+
+export function DetailPanel({
+  title,
+  icon,
+  meta,
+  defaultOpen = true,
+  open: openProp,
+  onOpenChange,
+  disabled = false,
+  maxBodyHeight,
+  children,
+  className = "",
+}: DetailPanelProps) {
+  const [uncontrolledOpen, setUncontrolledOpen] = useState(defaultOpen)
+  const open = openProp ?? uncontrolledOpen
+  const bodyId = useId()
+
+  const toggle = useCallback(() => {
+    if (disabled) return
+    const next = !open
+    if (openProp === undefined) setUncontrolledOpen(next)
+    onOpenChange?.(next)
+  }, [disabled, open, openProp, onOpenChange])
+
+  return (
+    <div
+      data-slot="detail-panel"
+      data-ow-state={open ? "open" : "closed"}
+      className={cn(
+        // 贴地：0 影 + 1px 边；卡片圆角 12
+        "overflow-hidden bg-ow-surface border border-[color:var(--ow-border)] shadow-none",
+        "[border-radius:var(--ow-radius-card)]",
+        className,
+      )}
+    >
+      <button
+        type="button"
+        data-slot="detail-panel-header"
+        aria-expanded={open}
+        aria-controls={bodyId}
+        disabled={disabled}
+        onClick={toggle}
+        className={cn(
+          "flex items-center gap-2 w-full h-[var(--ow-row-h)] px-3",
+          "text-left text-ow-fs-ui font-medium text-[color:var(--ow-text)] bg-transparent",
+          "transition-colors duration-[var(--ow-dur-1)] ease-[var(--ow-ease-beacon)]",
+          "hover:bg-[var(--ow-hover)] active:bg-[var(--ow-press)]",
+          "disabled:text-[color:var(--ow-disabled-text)] disabled:bg-transparent disabled:cursor-not-allowed",
+          "ow-focus-ring",
+        )}
+      >
+        {icon && (
+          <span data-ow-part="icon" className="inline-flex items-center justify-center w-4 h-4 flex-shrink-0">
+            {icon}
+          </span>
+        )}
+        <span className="flex-1 min-w-0 truncate">{title}</span>
+        {meta && <span className="flex-shrink-0 text-[color:var(--ow-text-3)]">{meta}</span>}
+        {/* §7 图标档 {16,20,24}：原 14 不在档上（R2 终扫归 16）。 */}
+        <ChevRight
+          aria-hidden="true"
+          width={16}
+          height={16}
+          className={cn(
+            "flex-shrink-0 text-[color:var(--ow-text-3)]",
+            "transition-transform duration-[var(--ow-dur-2)] ease-[var(--ow-ease-beacon)]",
+            open ? "rotate-90" : "rotate-0",
+          )}
+        />
+      </button>
+      {open && (
+        <div
+          id={bodyId}
+          data-slot="detail-panel-body"
+          className="border-t border-[color:var(--ow-border)] px-3 py-3 overflow-auto text-ow-fs-ui text-[color:var(--ow-text-2)]"
+          style={maxBodyHeight ? { maxHeight: maxBodyHeight } : undefined}
+        >
+          {children}
+        </div>
+      )}
+    </div>
+  )
+}

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

@@ -0,0 +1,203 @@
+import type { Meta, StoryObj } from "@storybook/react"
+import { Button, EmptyState, InlineMessage } from "../../primitives"
+import { DetailOverflowMenu } from "../DetailChrome"
+import { Copy, Edit, Trash } from "../Icons"
+import { Skeleton } from "../Skeleton"
+import { DetailScaffold } from "./index"
+
+const meta = {
+  title: "Composite/DetailScaffold",
+  component: DetailScaffold,
+  parameters: { layout: "fullscreen" },
+  tags: ["autodocs"],
+} satisfies Meta<typeof DetailScaffold>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+const Frame = ({ children }: { children: React.ReactNode }) => (
+  <div style={{ height: 360, border: "1px solid var(--ow-border)", overflow: "hidden" }}>{children}</div>
+)
+
+const LongBody = () => (
+  <div style={{ display: "flex", flexDirection: "column", gap: 12 }}>
+    {Array.from({ length: 12 }, (_, i) => (
+      <p key={i} style={{ margin: 0, fontSize: 13, lineHeight: 1.6, color: "var(--ow-text-2)" }}>
+        第 <span className="ow-font-mono tabular-nums">{i + 1}</span> 段正文，正文区是唯一滚动区，头脚固定。
+      </p>
+    ))}
+  </div>
+)
+
+const menuItems = [
+  { key: "edit", label: "编辑", icon: <Edit /> },
+  { key: "copy", label: "复制链接", icon: <Copy /> },
+  { key: "delete", label: "删除", icon: <Trash />, danger: true },
+]
+
+/** 基本形：48 头部 + 1px 分隔 + 滚动正文。 */
+export const Basic: Story = {
+  args: {
+    title: "每日构建",
+    subtitle: "站点发布",
+    onBack: () => {},
+    children: <LongBody />,
+  },
+  render: (args) => (
+    <Frame>
+      <DetailScaffold {...args} />
+    </Frame>
+  ),
+}
+
+/** 头部动作区 + 溢出菜单。 */
+export const WithActions: Story = {
+  args: {
+    title: "每日构建",
+    onBack: () => {},
+    actions: (
+      <>
+        <Button variant="secondary" size="sm">
+          运行一次
+        </Button>
+        <DetailOverflowMenu items={menuItems} onSelect={() => {}} />
+      </>
+    ),
+    children: <LongBody />,
+  },
+  render: (args) => (
+    <Frame>
+      <DetailScaffold {...args} />
+    </Frame>
+  ),
+}
+
+/** 带右栏：栏间 1px 分隔，两栏各自滚。 */
+export const WithAside: Story = {
+  args: {
+    title: "每日构建",
+    onBack: () => {},
+    aside: (
+      <div style={{ padding: 16, fontSize: 13, color: "var(--ow-text-2)", display: "grid", gap: 8 }}>
+        <div>
+          创建于 <span className="ow-font-mono tabular-nums">2026-08-12</span>
+        </div>
+        <div>
+          运行 <span className="ow-font-mono tabular-nums">128</span> 次
+        </div>
+      </div>
+    ),
+    children: <LongBody />,
+  },
+  render: (args) => (
+    <Frame>
+      <DetailScaffold {...args} />
+    </Frame>
+  ),
+}
+
+/** 带底部操作条。 */
+export const WithFooter: Story = {
+  args: {
+    title: "编辑定时任务",
+    onBack: () => {},
+    footer: (
+      <>
+        <Button variant="secondary" size="md">
+          取消
+        </Button>
+        <Button variant="primary" size="md">
+          保存
+        </Button>
+      </>
+    ),
+    children: <LongBody />,
+  },
+  render: (args) => (
+    <Frame>
+      <DetailScaffold {...args} />
+    </Frame>
+  ),
+}
+
+/** 空态：走 EmptyState 原语（信标 mono 母题，不在骨架里另造）。 */
+export const Empty: Story = {
+  args: {
+    title: "每日构建",
+    onBack: () => {},
+    children: <EmptyState message="还没有运行记录。" actionLabel="运行一次" onAction={() => {}} />,
+  },
+  render: (args) => (
+    <Frame>
+      <DetailScaffold {...args} />
+    </Frame>
+  ),
+}
+
+/** 加载态：skeleton 呼吸，禁 shimmer。 */
+export const Loading: Story = {
+  args: {
+    title: "每日构建",
+    onBack: () => {},
+    children: (
+      <div style={{ display: "grid", gap: 10 }}>
+        <Skeleton variant="line" width="60%" height={16} />
+        <Skeleton variant="line" width="90%" height={12} />
+        <Skeleton variant="line" width="80%" height={12} />
+      </div>
+    ),
+  },
+  render: (args) => (
+    <Frame>
+      <DetailScaffold {...args} />
+    </Frame>
+  ),
+}
+
+/** 错误态：人话一句 + mono 细节，交给 InlineMessage。 */
+export const ErrorState: Story = {
+  args: {
+    title: "每日构建",
+    onBack: () => {},
+    children: <InlineMessage variant="error">读不到运行记录，先检查网络再重试。</InlineMessage>,
+  },
+  render: (args) => (
+    <Frame>
+      <DetailScaffold {...args} />
+    </Frame>
+  ),
+}
+
+/** mac：头部左侧让出红绿灯净空。 */
+export const PlatformMac: Story = {
+  args: { platform: "mac", title: "每日构建", children: <LongBody /> },
+  render: (args) => (
+    <Frame>
+      <DetailScaffold {...args} />
+    </Frame>
+  ),
+}
+
+/** 双主题对照。 */
+export const ThemeMatrix: Story = {
+  args: { title: "每日构建", children: null },
+  render: () => (
+    <div style={{ display: "flex", flexDirection: "column", gap: 16, padding: 16 }}>
+      {(["light", "dark"] as const).map((theme) => (
+        <div key={theme} data-theme={theme} style={{ background: "var(--ow-bg)", padding: 12 }}>
+          <div style={{ height: 220, border: "1px solid var(--ow-border)", overflow: "hidden" }}>
+            <DetailScaffold
+              title="每日构建"
+              subtitle="站点发布"
+              onBack={() => {}}
+              actions={<DetailOverflowMenu items={menuItems} onSelect={() => {}} />}
+              aside={<div style={{ padding: 16, fontSize: 13, color: "var(--ow-text-2)" }}>属性</div>}
+            >
+              <LongBody />
+            </DetailScaffold>
+          </div>
+        </div>
+      ))}
+    </div>
+  ),
+}

package/src/components/composite/DetailScaffold/DetailScaffoldSource.test.mjs

@@ -0,0 +1,38 @@
+import assert from "node:assert/strict"
+import { readFile } from "node:fs/promises"
+import test from "node:test"
+
+const source = await readFile(new URL("./index.tsx", import.meta.url), "utf8")
+
+test("头部复用 TitleBar（48 高 + 1px 分隔），返回钮走归口的 BackButton", () => {
+  assert.match(source, /import \{ BackButton \} from "\.\.\/BackButton"/)
+  assert.match(source, /import \{ TitleBar, type TitleBarPlatform \} from "\.\.\/TitleBar"/)
+  // W5：TitleBar 默认档改成「与地同色、无分隔线」的窗口带，页内详情头显式开 transparent+divided
+  assert.match(source, /<TitleBar\n\s+transparent\n\s+divided/)
+  assert.match(source, /<BackButton size="sm" label=\{backLabel\} onClick=\{onBack\} \/>/)
+  assert.doesNotMatch(source, /h-12|48px|ChevLeft/)
+})
+
+test("正文是唯一滚动区，头/脚固定", () => {
+  assert.match(source, /data-slot="detail-scaffold-content"/)
+  assert.match(source, /"flex-1 min-w-0 min-h-0 overflow-auto"/)
+  assert.match(source, /data-slot="detail-scaffold-footer"/)
+  assert.match(source, /flex-shrink-0 flex items-center justify-end/)
+})
+
+test("立面按 §5：贴地无影，栏间与脚部只有 1px --ow-border", () => {
+  assert.match(source, /bg-ow-surface shadow-none/)
+  assert.match(source, /border-l border-\[color:var\(--ow-border\)\] shadow-none/)
+  assert.match(source, /border-t border-\[color:var\(--ow-border\)\]/)
+  assert.doesNotMatch(source, /shadow-\[var\(--ow-shadow/)
+})
+
+test("中性件（R3）：空/加载/错误交给 EmptyState / Skeleton / InlineMessage，本件不造母题", () => {
+  assert.doesNotMatch(source, /--ow-yellow|--ow-beacon|--ow-accent-dot/)
+  assert.doesNotMatch(source, /<svg/)
+})
+
+test("无 Tailwind 歧义任意值", () => {
+  assert.doesNotMatch(source, /(?:text|border)-\[var\(--ow-/)
+  assert.doesNotMatch(source, /font-\[var\(--ow-font-/)
+})