@orbit-work/ui 0.1.0

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

@@ -0,0 +1,101 @@
+"use client"
+
+import { type ReactNode, useEffect, useState } from "react"
+import { Button } from "../../primitives"
+import { Menu } from "../../primitives/Menu"
+import { Check, More } from "../Icons"
+
+export type RowOverflowMenuItem = {
+  key: string
+  label: string
+  icon: ReactNode
+  /** 危险动作（删除、撤销），用错误色呈现。 */
+  danger?: boolean
+  /**
+   * 动作即时完成且界面上不留痕迹（复制到剪贴板就是这样）。选中后触发器上会短暂
+   * 显示一个勾，把回执放在刚点过的位置 —— 全局 toast 在窗口顶部，而这个菜单可能
+   * 在一个居中弹窗的下半部分，那段距离足以让人完全没注意到提示。
+   */
+  confirmsInPlace?: boolean
+}
+
+/** 就地回执停留时长：够看清，又不至于让人觉得按钮卡住了。 */
+const DONE_ECHO_MS = 1600
+
+/**
+ * RowOverflowMenu — 表格行末的「…」溢出菜单（DS 2.0 起是 `Menu` 的配方）。
+ *
+ * 菜单面、立面规范、外点关闭、Esc 归位、键盘导航全部由 `primitives/Menu` 承担：
+ * 它把面 portal 到 body 并 fixed 定位，而不是在触发器里做 absolute。这类列表常住
+ * 在带 overflow 的滚动容器里（设置页的 .settings__content 就是 overflow-y: auto），
+ * 而 absolute 元素会被这样的祖先裁掉 —— 裁剪是 z-index 管不到的，抬高层级没有用。
+ *
+ * 本文件只剩两件专属的事：行末右对齐的「…」触发器，和「就地回执」那个勾。
+ */
+export function RowOverflowMenu({
+  items,
+  disabled,
+  width = 160,
+  ariaLabel = "更多操作",
+  onSelect,
+}: {
+  items: RowOverflowMenuItem[]
+  disabled?: boolean
+  width?: number
+  ariaLabel?: string
+  onSelect: (key: string) => void
+}) {
+  // tick 让连点同一项也能重新计时：done 是新对象，下面那个 effect 会重置定时器。
+  const [done, setDone] = useState<{ key: string; tick: number } | null>(null)
+
+  useEffect(() => {
+    if (!done) return
+    const timer = setTimeout(() => setDone(null), DONE_ECHO_MS)
+    return () => clearTimeout(timer)
+  }, [done])
+
+  const doneItem = done ? (items.find((item) => item.key === done.key) ?? null) : null
+
+  return (
+    <Menu
+      triggerClassName="row-more"
+      width={width}
+      align="end"
+      ariaLabel={ariaLabel}
+      items={items.map((item) => ({
+        key: item.key,
+        label: item.label,
+        icon: item.icon,
+        danger: item.danger,
+      }))}
+      onSelect={(key) => {
+        if (items.find((item) => item.key === key)?.confirmsInPlace) setDone({ key, tick: Date.now() })
+        onSelect(key)
+      }}
+      trigger={({ open, triggerProps }) => (
+        // 勾只补视觉。读屏那一路由全局 toast 负责（它是 role="status"），这里
+        // 再挂一个 aria-live 只会让同一句话被念两遍。
+        // DS 2.0 P5：原先借的 .msg-action 随消息操作行归口 MessageActions 而退役，
+        // 这里改走同一配方——Button ghost·sm（28×28）＋勾＋success 色回执。
+        <Button
+          variant="ghost"
+          size="sm"
+          type="button"
+          data-state={doneItem ? "done" : open ? "active" : "rest"}
+          className={`[&_svg]:w-4 [&_svg]:h-4 ${
+            doneItem
+              ? "text-[color:var(--ow-success)]"
+              : open
+                ? "text-[color:var(--ow-text)]"
+                : "text-[color:var(--ow-text-3)]"
+          }`}
+          aria-label={ariaLabel}
+          title={doneItem ? `${doneItem.label}：已完成` : ariaLabel}
+          disabled={disabled}
+          icon={doneItem ? <Check /> : <More />}
+          {...triggerProps}
+        />
+      )}
+    />
+  )
+}

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

@@ -0,0 +1,159 @@
+import type { Meta, StoryObj } from "@storybook/react"
+import { SandboxPermissionPrompt } from "./index"
+
+const meta = {
+  title: "Composite/SandboxPermissionPrompt",
+  component: SandboxPermissionPrompt,
+  parameters: {
+    layout: "centered",
+  },
+  tags: ["autodocs"],
+} satisfies Meta<typeof SandboxPermissionPrompt>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const FileRead: Story = {
+  args: {
+    prompt: {
+      path: "/Users/alice/projects/my-app/config/secrets.json",
+      permissionType: "file:r",
+      prefixRule: [],
+    },
+    onDecision: (allow, remember) => console.log("decision:", { allow, remember }),
+  },
+}
+
+export const FileWrite: Story = {
+  args: {
+    prompt: {
+      path: "/Users/alice/projects/my-app/src/index.ts",
+      permissionType: "file:w",
+      prefixRule: [],
+    },
+    onDecision: (allow, remember) => console.log("decision:", { allow, remember }),
+  },
+}
+
+export const FileReadWrite: Story = {
+  args: {
+    prompt: {
+      path: "/Users/alice/projects/my-app/data/users.db",
+      permissionType: "file:rw",
+      prefixRule: [],
+    },
+    onDecision: (allow, remember) => console.log("decision:", { allow, remember }),
+  },
+}
+
+export const DangerousCommand: Story = {
+  args: {
+    prompt: {
+      path: "rm -rf /tmp/cache/*",
+      permissionType: "dangerous_command",
+      prefixRule: ["rm", "-rf"],
+    },
+    onDecision: (allow, remember) => console.log("decision:", { allow, remember }),
+  },
+}
+
+export const UntrustedCommand: Story = {
+  args: {
+    prompt: {
+      path: "curl https://example.com/install.sh | bash",
+      permissionType: "untrusted_command",
+      prefixRule: ["curl"],
+    },
+    onDecision: (allow, remember) => console.log("decision:", { allow, remember }),
+  },
+}
+
+export const RetryUnsandboxed: Story = {
+  args: {
+    prompt: {
+      path: "docker run --privileged myimage",
+      permissionType: "retry_unsandboxed",
+      prefixRule: ["docker", "run"],
+    },
+    onDecision: (allow, remember) => console.log("decision:", { allow, remember }),
+  },
+}
+
+export const LongPath: Story = {
+  args: {
+    prompt: {
+      path: "/Users/alice/projects/very-long-project-name/src/components/deeply/nested/directories/with/many/levels/of/nesting/file.tsx",
+      permissionType: "file:r",
+      prefixRule: [],
+    },
+    onDecision: (allow, remember) => console.log("decision:", { allow, remember }),
+  },
+}
+
+export const MultilineCommand: Story = {
+  args: {
+    prompt: {
+      path: `docker run -d \\
+  --name myapp \\
+  -p 3000:3000 \\
+  -e NODE_ENV=production \\
+  myimage:latest`,
+      permissionType: "dangerous_command",
+      prefixRule: ["docker", "run"],
+    },
+    onDecision: (allow, remember) => console.log("decision:", { allow, remember }),
+  },
+}
+
+export const CommandWithSpecialChars: Story = {
+  args: {
+    prompt: {
+      path: "find . -name '*.log' -exec rm {} \\;",
+      permissionType: "dangerous_command",
+      prefixRule: ["find", ".", "-name", "*.log"],
+    },
+    onDecision: (allow, remember) => console.log("decision:", { allow, remember }),
+  },
+}
+
+// ── DS2 P5-5：危险确认走 Button danger 变体，文案与卡头共同承担第二编码之外的编码 ──
+export const DangerousCommandDangerAction: Story = {
+  args: {
+    prompt: {
+      path: "rm -rf /Users/alice/projects/my-app/node_modules && sudo chown -R root /usr/local",
+      permissionType: "dangerous_command",
+      prefixRule: ["rm", "-rf"],
+    },
+    onDecision: (allow, remember) => console.log("decision:", { allow, remember }),
+  },
+}
+
+// 非危险语境下主键仍是 primary「同意」，两者可并排读差异
+export const DecisionSetComparison: Story = {
+  render: () => (
+    <div style={{ display: "flex", flexDirection: "column", gap: 16, maxWidth: 640 }}>
+      <SandboxPermissionPrompt
+        prompt={{ path: "/Users/alice/projects/my-app/src/index.ts", permissionType: "file:w", prefixRule: [] }}
+        onDecision={(allow, remember) => console.log({ allow, remember })}
+      />
+      <SandboxPermissionPrompt
+        prompt={{ path: "sudo rm -rf /var/log/*", permissionType: "dangerous_command", prefixRule: ["sudo", "rm"] }}
+        onDecision={(allow, remember) => console.log({ allow, remember })}
+      />
+    </div>
+  ),
+}
+
+// 展开态：命令块降一档到 surface-2 嵌套井，无内阴影，靠 1px 边框分隔
+export const ExpandedLongCommand: Story = {
+  args: {
+    prompt: {
+      path: Array.from({ length: 12 }, (_, i) => `step-${i + 1}: pnpm --filter @orbit-work/ui run build --verbose`).join(
+        "\n",
+      ),
+      permissionType: "untrusted_command",
+      prefixRule: ["pnpm", "--filter"],
+    },
+    onDecision: (allow, remember) => console.log("decision:", { allow, remember }),
+  },
+}

package/src/components/composite/SandboxPermissionPrompt/SandboxPermissionPromptSource.test.mjs

@@ -0,0 +1,71 @@
+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")
+
+// ── DS2 P5-5 归口锁（蓝图 03 · PermissionCard）───────────────────────────────
+// W5 终扫：屏级判断表「授权卡＝warning tint 三件套（tint 底 ＋ tint 边 ＋ on-tint 字），
+// 行内停驻」。原来是中性米白 surface 卡，看不出授权语义面。
+test("permission card is a grounded warning-tint card: tint bg + tint border + on-tint text, no shadow", () => {
+  assert.match(
+    source,
+    /bg-\[var\(--ow-warning-tint\)\] border border-\[color:var\(--ow-warning-tint-border\)\] text-\[color:var\(--ow-warning-on-tint\)\] \[border-radius:var\(--ow-radius-card\)\]/,
+  )
+  assert.doesNotMatch(source, /bg-ow-surface(?!-2)/)
+  assert.doesNotMatch(source, /\[border-radius:var\(--ow-radius-modal\)\]/)
+  assert.doesNotMatch(source, /shadow-\[inset_var\(--ow-shadow-1\)\]/)
+  // 注释里留着旧口径记述（shadow-[inset_…] 已删），判定看去注释后的代码
+  const code = source.replace(/\/\*[\s\S]*?\*\//g, "").replace(/\/\/[^\n]*/g, "")
+  assert.doesNotMatch(code, /shadow-\[/)
+})
+
+test("§7 卡骨架：容器内距落 14 一档，不留 py-4 px-5 的 16/20", () => {
+  assert.match(source, /\[border-radius:var\(--ow-radius-card\)\] p-3\.5 flex flex-col gap-2/)
+  assert.doesNotMatch(source, /py-4 px-5/)
+})
+
+test("the command/path block is a nested well one step down, mono + tabular-nums", () => {
+  assert.match(source, /font-\[family-name:var\(--ow-font-mono\)\] \[font-variant-numeric:tabular-nums\]/)
+  assert.match(source, /bg-ow-surface-2 \[border-radius:var\(--ow-radius-control\)\]/)
+})
+
+test("dangerous confirmations go through the Button danger variant with its own wording", () => {
+  assert.match(source, /const isDangerous = kind === ["']dangerous["']/)
+  assert.match(source, /<Button variant=\{isDangerous \? "danger" : "primary"\}/)
+  assert.match(source, /\{isDangerous \? "仍然执行" : "同意"\}/)
+  assert.match(source, /<Button variant="secondary"/)
+  assert.match(source, /<Button variant="ghost" data-ow-part="deny"/)
+})
+
+test("the expand toggle takes ground-level hover/press for the surface it sits on", () => {
+  assert.match(source, /hover:bg-\[var\(--ow-hover\)\] active:bg-\[var\(--ow-press\)\]/)
+  assert.doesNotMatch(source, /hover:bg-ow-surface-2/)
+})
+
+// R3：中性件禁信标
+test("permission card is a neutral component — no beacon, no yellow", () => {
+  assert.doesNotMatch(source, /--ow-beacon|--ow-accent-dot|--ow-yellow/)
+})
+
+// ── W5 终扫：红色配额（§4 R1）─────────────────────────────────────────────
+test("安全动作「不同意」退回中性 ghost，红只留给唯一那颗危险确认键", async () => {
+  const styles = await readFile(new URL("../../../../styles/components.css", import.meta.url), "utf8")
+  const denyRules = styles
+    .split("\n")
+    .filter((line) => line.includes('[data-ow-part="deny"]') && !line.trimStart().startsWith("/*"))
+  assert.equal(denyRules.length, 0, `deny 仍有配色规则：\n${denyRules.join("\n")}`)
+  assert.doesNotMatch(styles, /sandbox-prompt"\] \[data-ow-part="deny"\][^\n]*--ow-error/)
+  assert.match(source, /<Button variant="ghost" data-ow-part="deny"/)
+})
+
+test("卡头标题落 UI 密度档字号，不写裸 text-sm", () => {
+  assert.match(source, /data-ow-part="title" className="font-semibold text-ow-fs-ui/)
+  assert.doesNotMatch(source, /\btext-sm\b/)
+})
+
+// ── R2 复审 ────────────────────────────────────────────────────────────────
+test("§7 圆角：展开/收起图标钮落 8px 行动档，不用菜单档 10", () => {
+  assert.match(source, /w-7 h-7 p-0 border-0 \[border-radius:var\(--ow-radius-action\)\]/)
+  assert.doesNotMatch(source, /--ow-radius-menu/)
+})

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

@@ -0,0 +1,157 @@
+"use client"
+
+import { useState } from "react"
+import { cn } from "../../../lib/utils"
+import { Button } from "../../primitives"
+import { Maximize } from "../Icons"
+
+export interface SandboxPermissionPromptData {
+  path: string
+  permissionType: string
+  prefixRule: string[]
+}
+
+export interface SandboxPermissionPromptProps {
+  prompt: SandboxPermissionPromptData
+  onDecision: (allow: boolean, remember: boolean) => void
+}
+
+/**
+ * SandboxPermissionPrompt — 聊天内授权卡（蓝图 03 · PermissionCard，DS2 P5-5 归口）。
+ *
+ * 立面：行内停驻的授权卡＝warning tint 三件套（--ow-warning-tint 底 ＋ -tint-border 边 ＋
+ * -on-tint 字，屏级判断表「授权卡」），r12、0 影无内阴影（§5/§7）；
+ * 命令/路径块降一档到 surface-2 嵌套井，mono ＋ tabular-nums 读数。
+ * 按钮组全走 Button 原语；高风险（dangerous / retry_unsandboxed）的同意键用 danger 变体，
+ * 且危险语义由「按钮文案 + 卡头标题」双编码承担，颜色只是第二编码（R1）。
+ * R1 红色配额：一屏只允许唯一那颗危险确认键用红——安全动作「不同意」退回中性 ghost，
+ * 原来的 --ow-error 红字与危险键同屏两处红，会稀释危险编码并把语义倒置。无信标（R3）。
+ */
+export function SandboxPermissionPrompt({ prompt, onDecision }: SandboxPermissionPromptProps): React.ReactElement {
+  const kind =
+    prompt.permissionType === "retry_unsandboxed" || prompt.permissionType === "run_unsandboxed"
+      ? "retry"
+      : prompt.permissionType === "dangerous_command"
+        ? "dangerous"
+        : prompt.permissionType === "untrusted_command"
+          ? "untrusted"
+          : "file"
+  const isCommand = kind !== "file"
+  // 危险确认走 Button danger 变体；文案「仍然执行」与卡头「检测到高风险命令」构成第二编码之外的形/文编码（R1）
+  const isDangerous = kind === "dangerous"
+  const [expanded, setExpanded] = useState(false)
+  const accessLabel = describeFileAccess(prompt.permissionType)
+  const title =
+    kind === "retry"
+      ? "该命令被沙箱阻止，是否在沙箱外重新执行？"
+      : kind === "dangerous"
+        ? "检测到高风险命令，是否允许在沙箱外执行？"
+        : kind === "untrusted"
+          ? "是否允许在沙箱外执行该命令？"
+          : `是否同意授予沙箱对以下文件或目录的${accessLabel}权限？`
+  const renderedPrefix = renderShellPrefix(prompt.prefixRule)
+  const rememberLabel = isCommand
+    ? renderedPrefix
+      ? `允许并记住此前缀：${renderedPrefix}`
+      : "自动同意（本会话再次执行该命令时不再询问）"
+    : "自动同意（本次执行的后续文件/目录访问不再询问）"
+  const showPathToggle = prompt.path.length > 180 || prompt.path.includes("\n")
+
+  return (
+    <div
+      data-slot="sandbox-prompt"
+      className="relative bg-[var(--ow-warning-tint)] border border-[color:var(--ow-warning-tint-border)] text-[color:var(--ow-warning-on-tint)] [border-radius:var(--ow-radius-card)] p-3.5 flex flex-col gap-2"
+      role="alertdialog"
+      aria-label="沙箱权限请求"
+    >
+      <div data-ow-part="title" className="font-semibold text-ow-fs-ui leading-[1.5]">
+        {title}
+      </div>
+      {prompt.path && (
+        <div data-ow-part="path-wrap" className="relative min-h-0 flex flex-col">
+          <div
+            data-ow-part="path"
+            data-ow-state={expanded ? "expanded" : undefined}
+            className={cn(
+              // §5 嵌套井：卡面已是 surface，命令/路径块降一档到 surface-2；§7 读数 mono + tabular-nums
+              "min-h-0 font-[family-name:var(--ow-font-mono)] [font-variant-numeric:tabular-nums] text-[length:var(--ow-fs-body-sm)] leading-[1.55] text-ow-text-2 bg-ow-surface-2 [border-radius:var(--ow-radius-control)] py-2 pr-[42px] pl-2.5 overflow-hidden break-words",
+              "[display:-webkit-box] [-webkit-line-clamp:4] [-webkit-box-orient:vertical]",
+              // §5 无内阴影：原 shadow-[inset_...] 已删，展开态靠 1px 边框分隔
+              expanded &&
+                "block min-h-[132px] max-h-[min(33vh,320px)] overflow-auto whitespace-pre-wrap [tab-size:2] border border-ow-border py-3 pr-11 pb-[34px] pl-3 [scrollbar-gutter:stable_both-edges]",
+            )}
+            title={expanded ? undefined : prompt.path}
+          >
+            {prompt.path}
+          </div>
+          {showPathToggle && (
+            <Button
+              variant="unstyled"
+              type="button"
+              data-ow-part="toggle"
+              data-ow-state={expanded ? "expanded" : undefined}
+              className={cn(
+                // §5 交互底色相对所在表面递进：坐在卡面上 → hover/press 走地面档
+                "absolute top-1.5 right-1.5 w-7 h-7 p-0 border-0 [border-radius:var(--ow-radius-action)] bg-transparent text-ow-text-3 inline-flex items-center justify-center cursor-pointer transition-colors duration-[var(--ow-dur-1)] ease-[var(--ow-ease-beacon)] hover:bg-[var(--ow-hover)] active:bg-[var(--ow-press)] hover:text-ow-text",
+                // 研发（BEM 清理后补）：两枚图标里 CollapseFloatIcon 是本文件的裸 <svg>，没有
+                // 尺寸/描边属性，全靠这条容器规则给 16px 与描边——缺了它展开态的收起键会塌成
+                // 默认 300×150。描边取 DS2 §7 的 1.75（研发写 1.9），Maximize 自带 1.75 属性不受影响。
+                "[&_svg]:w-4 [&_svg]:h-4 [&_svg]:fill-none [&_svg]:stroke-current [&_svg]:[stroke-width:1.75] [&_svg]:[stroke-linecap:round] [&_svg]:[stroke-linejoin:round]",
+                expanded && "top-2 right-2",
+              )}
+              onClick={() => setExpanded((value) => !value)}
+              aria-expanded={expanded}
+              aria-label={expanded ? "收起命令内容" : "展开命令内容"}
+              title={expanded ? "收起" : "展开"}
+            >
+              {expanded ? <CollapseFloatIcon /> : <Maximize />}
+            </Button>
+          )}
+        </div>
+      )}
+      <div data-ow-part="acts" className="flex flex-wrap items-center gap-2">
+        <Button variant={isDangerous ? "danger" : "primary"} onClick={() => onDecision(true, false)}>
+          {isDangerous ? "仍然执行" : "同意"}
+        </Button>
+        <Button variant="secondary" onClick={() => onDecision(true, true)} title={rememberLabel}>
+          {rememberLabel}
+        </Button>
+        {/* R1 红色配额：红只留给上面那颗危险确认键。研发在 main 上给「不同意」补了
+            text-ow-error 红字，本分支不采——安全动作染红会把语义倒置。 */}
+        <Button variant="ghost" data-ow-part="deny" onClick={() => onDecision(false, false)}>
+          不同意
+        </Button>
+      </div>
+    </div>
+  )
+}
+
+function describeFileAccess(permissionType: string): string {
+  const modes = permissionType.includes(":") ? (permissionType.split(":")[1] ?? "") : ""
+  const read = modes.includes("r")
+  const write = modes.includes("w")
+  if (read && write) return "读取和写入"
+  if (write) return "写入"
+  if (read) return "读取"
+  return "读取和写入"
+}
+
+function renderShellPrefix(prefixRule: string[]): string {
+  return prefixRule.map(shellQuote).join(" ")
+}
+
+function shellQuote(value: string): string {
+  if (/^[A-Za-z0-9_@%+=:,./-]+$/.test(value)) return value
+  return `'${value.replaceAll("'", `'"'"'`)}'`
+}
+
+function CollapseFloatIcon(): React.ReactElement {
+  return (
+    <svg viewBox="0 0 24 24" aria-hidden="true">
+      <path d="M9 4v5H4" />
+      <path d="M15 4v5h5" />
+      <path d="M9 20v-5H4" />
+      <path d="M15 20v-5h5" />
+    </svg>
+  )
+}

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

@@ -0,0 +1,127 @@
+import type { Meta, StoryObj } from "@storybook/react"
+import { SearchInput } from "./index"
+
+/**
+ * SearchInput — Field 的搜索预设配方（DS 2.0）：搜索图标前缀 + 有值时清除钮后缀。
+ * 2.0 起为 8px 圆角、高 32（lg=40），三态边框由 Field 壳承担。
+ */
+const meta = {
+  title: "Composite/SearchInput",
+  component: SearchInput,
+  parameters: {
+    layout: "padded",
+  },
+  tags: ["autodocs"],
+} satisfies Meta<typeof SearchInput>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+  args: {
+    onChange: (value) => console.log("change", value),
+    onSearch: (value) => console.log("search", value),
+  },
+}
+
+export const CustomPlaceholder: Story = {
+  args: {
+    placeholder: "搜索文件",
+    onChange: (value) => console.log("change", value),
+    onSearch: (value) => console.log("search", value),
+  },
+}
+
+export const WithValue: Story = {
+  name: "有值（显示清除钮）",
+  args: {
+    value: "季度报告",
+    onChange: (value) => console.log("change", value),
+    onSearch: (value) => console.log("search", value),
+  },
+}
+
+export const LongValue: Story = {
+  args: {
+    value: "一个非常长的搜索词，用来验证文本溢出时的表现和清除钮不被挤压",
+    onChange: (value) => console.log("change", value),
+    onSearch: (value) => console.log("search", value),
+  },
+}
+
+export const Large: Story = {
+  name: "大表单档（40）",
+  args: {
+    size: "lg",
+    placeholder: "搜索模型",
+    onChange: (value) => console.log("change", value),
+  },
+}
+
+export const Disabled: Story = {
+  args: {
+    placeholder: "搜索暂不可用",
+    disabled: true,
+  },
+}
+
+export const DisabledWithValue: Story = {
+  args: {
+    value: "被锁定的搜索词",
+    disabled: true,
+  },
+}
+
+export const Uncontrolled: Story = {
+  name: "非受控（内部状态）",
+  args: {
+    placeholder: "输入后按 Enter 触发搜索",
+    onSearch: (value) => console.log("search", value),
+  },
+}
+
+export const States: Story = {
+  name: "状态一览",
+  render: () => (
+    <div style={{ display: "flex", flexDirection: "column", gap: 16, maxWidth: 320 }}>
+      <div>
+        <div style={{ fontSize: "var(--ow-fs-ui, 13px)", color: "var(--ow-text-3)", marginBottom: 6 }}>空</div>
+        <SearchInput placeholder="搜索" onChange={(v) => console.log("change", v)} />
+      </div>
+      <div>
+        <div style={{ fontSize: "var(--ow-fs-ui, 13px)", color: "var(--ow-text-3)", marginBottom: 6 }}>
+          有值（清除钮出现）
+        </div>
+        <SearchInput value="搜索词" onChange={(v) => console.log("change", v)} />
+      </div>
+      <div>
+        <div style={{ fontSize: "var(--ow-fs-ui, 13px)", color: "var(--ow-text-3)", marginBottom: 6 }}>禁用</div>
+        <SearchInput placeholder="搜索" disabled />
+      </div>
+    </div>
+  ),
+}
+
+export const InSidebar: Story = {
+  name: "侧栏语境",
+  render: () => (
+    <div
+      style={{
+        width: 280,
+        padding: 12,
+        background: "var(--ow-surface)",
+        border: "1px solid var(--ow-border)",
+        borderRadius: "var(--ow-radius-card, 12px)",
+      }}
+    >
+      <div style={{ marginBottom: 10 }}>
+        <SearchInput placeholder="搜索" onChange={(v) => console.log("change", v)} />
+      </div>
+      <div style={{ fontSize: "var(--ow-fs-ui, 13px)", color: "var(--ow-text-2)" }}>
+        <div style={{ padding: "8px 10px" }}>全部会话</div>
+        <div style={{ padding: "8px 10px" }}>最近</div>
+        <div style={{ padding: "8px 10px" }}>已收藏</div>
+      </div>
+    </div>
+  ),
+}