@orbit-work/ui 0.1.0

package/src/components/domain/chat/Composer/index.tsx

@@ -0,0 +1,450 @@
+"use client"
+
+import {
+  type HTMLAttributes,
+  type KeyboardEvent,
+  type ReactNode,
+  forwardRef,
+  useCallback,
+  useEffect,
+  useRef,
+  useState,
+} from "react"
+import { useImeAwareEnter } from "../../../../hooks/useImeAwareEnter"
+import { cn } from "../../../../lib/utils"
+import { Arrow, ChevDown, Plus, Zap } from "../../../composite/Icons"
+import { Button, Field } from "../../../primitives"
+import { Menu } from "../../../primitives/Menu"
+
+/* ------------------------------------------------------------------ *
+ * 簇内子件 —— 合并进 Composer 后统一从本文件出口（旧 import 路径已退役）
+ * ------------------------------------------------------------------ */
+export * from "./parts/ComposerAudioSpectrum"
+export * from "./parts/ComposerAuthorization"
+export * from "./parts/ComposerMentions"
+export * from "./parts/mountChip"
+export * from "./parts/ComposerMenu"
+export * from "./parts/ComposerMenuPopover"
+export * from "./parts/ComposerPopover"
+export * from "./parts/ComposerProjectPicker"
+export * from "./parts/ComposerQueue"
+export * from "./parts/ComposerVoiceInput"
+
+export type ComposerMode = { value: string; label: string }
+export type ComposerSubmitState = "send" | "stop" | "busy"
+
+export type ComposerProps = Omit<HTMLAttributes<HTMLDivElement>, "onChange" | "onSubmit"> & {
+  value?: string
+  defaultValue?: string
+  onChange?: (text: string) => void
+  disabled?: boolean
+  /** 队列区：排队中的消息与队列通知，固定在壳内最上。用 `ComposerQueue`。 */
+  queue?: ReactNode
+  /** Business status such as queued messages or connection notices. */
+  status?: ReactNode
+  /** Optional attachment/file preview area above the input. */
+  attachments?: ReactNode
+  /** 提及区：`ComposerMentions` 的 chip 行，与 context 同处上下文区。 */
+  mentions?: ReactNode
+  /** Context references displayed between attachments and the input. */
+  context?: ReactNode
+  /** Replaces the built-in textarea while keeping Composer layout and actions. */
+  input?: ReactNode
+  /** Floating content anchored inside the Composer, such as an add menu. */
+  overlay?: ReactNode
+  /** Replaces the built-in leading add/skills actions. */
+  toolbarStart?: ReactNode
+  /** Replaces the built-in mode selector. */
+  toolbarEnd?: ReactNode
+  /** 语音控件：固定在工具条尾部、模式选择之后。用 `ComposerVoiceInput`。 */
+  voice?: ReactNode
+  /** 项目选择：固定在**井内**工具行起始段、授权之后。用 `ComposerProjectPicker`。 */
+  project?: ReactNode
+  /**
+   * 井外补充行的起始位。原型主屏/会话屏井外都不留行（免责句归每轮转录），
+   * 这两个槽只作宿主兼容留存；不传即整条页脚不渲染。
+   */
+  footerStart?: ReactNode
+  /** 井外补充行的尾位。同 `footerStart`，默认不出。 */
+  footerEnd?: ReactNode
+  /** 授权选择：固定在**井内**工具行起始段、附件之后。用 `ComposerAuthorization`。 */
+  authorization?: ReactNode
+  /** 上下文用量读数：固定在**井内**工具行尾段、模型档之前（锁定叙事件 ContextUsage）。 */
+  contextUsage?: ReactNode
+  /** Controlled filled state for custom input renderers. */
+  filled?: boolean
+  /** Whether the AI is currently generating. Kept for the simple textarea API. */
+  generating?: boolean
+  /** Explicit submit presentation for composed clients. */
+  submitState?: ComposerSubmitState
+  submitDisabled?: boolean
+  submitTitle?: string
+  /** Submits a custom input. The simple textarea continues to use onSend. */
+  onSubmit?: () => void
+  /** Called with the message text when the built-in textarea sends. */
+  onSend?: (text: string) => void
+  onStop?: () => void
+  placeholder?: string
+  onAdd?: () => void
+  onSkillsClick?: () => void
+  mode?: string
+  modes?: ComposerMode[]
+  onModeChange?: (mode: string) => void
+  maxHeight?: number
+}
+
+/**
+ * Composer —— 聊天输入组合器（DS 2.0 蓝图批次③ 合并件）。
+ *
+ * 蓝图把 Composer / ChatSender / DesktopComposer 收敛成同一个组合器，九个
+ * `Composer*` 子件并入 `./parts/` 作内部模块，出口仍从本文件走（旧目录退役）。
+ * 桌面形态是它的配方：`domain/desktop/DesktopComposer`。
+ *
+ * 区域顺序由本件定死，调用方只换内容不换位置：
+ * 队列 → 状态 → 附件 → 上下文（提及＋引用）→ 输入 → 浮层 → 工具条。
+ *
+ * - **井外不留行**（原型模板 863–1063 · A1-B5）：项目选择 / 授权 / 上下文用量三件
+ *   原来挂在井外那条 footer 上，现全部收进井内工具行 —— 左段「附件 → 技能 → 授权 →
+ *   项目」，右段「上下文用量 → 模型档 → 语音 → 发送」，与原型 L928-1062 同序。
+ *   `footerStart` / `footerEnd` 只剩宿主兼容槽，两者都不传时页脚整条不渲染
+ *   （「内容由 AI 生成…」这类免责句在原型里归每一轮转录，不归输入井）。
+ * - 井度量（原型 L865）：`padding 12px 10px 8px`、纵向 `gap 10`、工具行 `gap 6`、
+ *   1px 边 ＋ `--ow-radius-lg` ＋ `--ow-surface-2` 底 ＋ 无影。
+ *
+ * - 输入区走 `Field` 语法（`multiline` + `standalone={false}`），**三态边框挂在整
+ *   个 composer 壳上**：rest `--ow-input-border` → hover `--ow-input-border-hover`
+ *   → focus-within `--ow-input-border-focus`（§6 输入类三态边框；R3 起 focus 只换
+ *   边框色，不叠 2px 外环——键盘环只属按钮与链接）。
+ * - 发送钮＝`Button variant="primary"`，即行动极的正规通道（暗档 btn-primary 族
+ *   落荧黄，由 token 承担，组件里不写死荧黄——R2）。stop / busy 落 secondary，
+ *   形状另编码（方块／小转子），满足 R1 双编码。
+ * - **状态极位置固定，不做可配置插槽**（品牌拍板）：生成中/处理中的状态点由本件
+ *   在工具条首位固定渲染，没有对应的 slot prop，调用方无法搬走它。点用中性的
+ *   `--ow-progress-fill`（§4 让形规则的行尾点定稿口径），聊天屏的荧黄状态极归
+ *   锁定叙事件（Thinking / PlanCard）所有，避免同屏两处状态极。
+ * - 弹层（模式选择/提及/授权/项目）一律走 `Menu` / `MenuSurface` 基座：
+ *   `--ow-popover-bg` ＋ `--ow-shadow-pop` ＋ 1px 边，行 hover 走 -pop 档（§5）。
+ */
+export const Composer = forwardRef<HTMLDivElement, ComposerProps>(function Composer(
+  {
+    generating = false,
+    value,
+    defaultValue = "",
+    onChange,
+    disabled = false,
+    queue,
+    status,
+    attachments,
+    mentions,
+    context,
+    input,
+    overlay,
+    toolbarStart,
+    toolbarEnd,
+    voice,
+    project,
+    footerStart,
+    footerEnd,
+    authorization,
+    contextUsage,
+    filled: controlledFilled,
+    submitState,
+    submitDisabled,
+    submitTitle,
+    onSubmit,
+    onSend,
+    onStop,
+    onAdd,
+    onSkillsClick,
+    mode,
+    modes = [
+      { value: "auto", label: "自动" },
+      { value: "fast", label: "快速" },
+      { value: "deep", label: "深度思考" },
+    ],
+    onModeChange,
+    maxHeight = 241,
+    placeholder = "帮我搜下有没有未完成的待办",
+    className = "",
+    ...rootProps
+  },
+  ref,
+) {
+  const [internalText, setInternalText] = useState(defaultValue)
+  const [internalMode, setInternalMode] = useState(mode ?? modes[0]?.value ?? "")
+  const textareaRef = useRef<HTMLInputElement | HTMLTextAreaElement>(null)
+  const { isImeEnter, onCompositionStart, onCompositionEnd } = useImeAwareEnter()
+  const text = value ?? internalText
+  const filled = controlledFilled ?? text.trim().length > 0
+  const selectedMode = mode ?? internalMode
+  const resolvedSubmitState = submitState ?? (generating ? "stop" : "send")
+  const hasContextRegion = mentions !== undefined || context !== undefined
+  const hasFooter = footerStart !== undefined || footerEnd !== undefined
+
+  useEffect(() => {
+    const textarea = textareaRef.current
+    if (!textarea || !(textarea instanceof HTMLTextAreaElement)) return
+    textarea.style.height = "auto"
+    textarea.style.height = `${Math.min(textarea.scrollHeight, maxHeight)}px`
+    textarea.style.overflowY = textarea.scrollHeight > maxHeight ? "auto" : "hidden"
+  }, [text, maxHeight])
+
+  const handleChange = useCallback(
+    (next: string) => {
+      if (value === undefined) setInternalText(next)
+      onChange?.(next)
+    },
+    [value, onChange],
+  )
+
+  const handleSend = useCallback(() => {
+    if (disabled || submitDisabled) return
+    if (input !== undefined) {
+      onSubmit?.()
+      return
+    }
+    if (filled && onSend) {
+      onSend(text.trim())
+      if (value === undefined) setInternalText("")
+      onChange?.("")
+    }
+  }, [disabled, filled, input, onChange, onSend, onSubmit, submitDisabled, text, value])
+
+  const handleSubmit = useCallback(() => {
+    if (resolvedSubmitState === "stop") onStop?.()
+    else if (resolvedSubmitState !== "busy") handleSend()
+  }, [handleSend, onStop, resolvedSubmitState])
+
+  const handleKeyDown = useCallback(
+    (event: KeyboardEvent<HTMLInputElement | HTMLTextAreaElement>) => {
+      if (isImeEnter(event)) return
+      if (event.key !== "Enter") return
+      if (event.ctrlKey) {
+        event.preventDefault()
+        const target = event.currentTarget as HTMLTextAreaElement
+        const start = target.selectionStart
+        const end = target.selectionEnd
+        const nextText = `${text.slice(0, start)}\n${text.slice(end)}`
+        if (value === undefined) setInternalText(nextText)
+        onChange?.(nextText)
+        requestAnimationFrame(() => textareaRef.current?.setSelectionRange(start + 1, start + 1))
+        return
+      }
+      if (!event.shiftKey) {
+        event.preventDefault()
+        handleSend()
+      }
+    },
+    [handleSend, isImeEnter, onChange, text, value],
+  )
+
+  const actionDisabled = disabled || submitDisabled || resolvedSubmitState === "busy"
+  const sendDisabled = actionDisabled || (resolvedSubmitState === "send" && !filled)
+
+  const stateClasses = cn(filled && "filled", disabled && "disabled")
+
+  return (
+    <div
+      ref={ref}
+      data-slot="composer"
+      data-ow-state={stateClasses || undefined}
+      className={cn("flex flex-col gap-2", className)}
+      {...rootProps}
+    >
+      <div
+        data-ow-part="surface"
+        data-ow-state={disabled ? "disabled" : undefined}
+        className={cn(
+          "relative min-h-20 px-2.5 pt-3 pb-2 flex flex-col gap-2.5",
+          "[border-radius:var(--ow-radius-card)]",
+          // 三态边框走整个壳（§6 输入类）：rest → hover → focus-within，禁光晕。
+          "border border-[color:var(--ow-composer-border,var(--ow-input-border))]",
+          // 输入底＝surface-2 经 --ow-input-bg（§5 / ui-controls-inputs 卡）；
+          // --ow-composer-bg 是 §15 皮肤白名单钩子（多租户半透明 composer），未设皮肤时回落输入底。
+          "bg-[var(--ow-composer-bg,var(--ow-input-bg))]",
+          disabled
+            ? "border-[color:var(--ow-disabled-border)] bg-[var(--ow-input-disabled-bg)]"
+            : [
+                "[&:hover:not(:focus-within)]:border-[color:var(--ow-input-border-hover)]",
+                // R3（Terry 意见 1）：focus 只变边框色，2px 外环撤——输入类不再画光晕。
+                "focus-within:border-[color:var(--ow-input-border-focus)]",
+              ].join(" "),
+        )}
+      >
+        {queue && (
+          <div data-ow-part="queue" className="flex w-full min-w-0 box-border self-stretch flex-col gap-1.5">
+            {queue}
+          </div>
+        )}
+        {status && (
+          <div data-ow-part="status" className="flex w-full min-w-0 box-border self-stretch flex-col gap-1.5">
+            {status}
+          </div>
+        )}
+        {attachments && (
+          <div data-ow-part="attachments" className="flex gap-2 overflow-x-auto overflow-y-hidden">
+            {attachments}
+          </div>
+        )}
+        {hasContextRegion && (
+          <div data-ow-part="context" className="flex min-w-0 items-center flex-wrap gap-1.5">
+            {mentions}
+            {context}
+          </div>
+        )}
+        <div data-ow-part="input" className="min-w-0">
+          {input ?? (
+            <Field
+              ref={textareaRef}
+              multiline
+              standalone={false}
+              data-ow-part="textarea"
+              // R2 复审修：字号原走正文档（14），而同屏转录正文（UserTurn/AgentTurn）是 13——
+              // 「打进去 14、发出来 13」。输入面收到 text-ow-fs-ui 与转录同档（§7 UI 密度档）。
+              className="w-full min-h-6 max-h-60 p-0 resize-none overflow-hidden bg-transparent text-[color:var(--ow-text)] font-normal text-ow-fs-ui leading-normal border-0 shadow-none focus-visible:ring-0"
+              rows={1}
+              placeholder={placeholder}
+              value={text}
+              disabled={disabled}
+              onChange={handleChange}
+              onCompositionStart={onCompositionStart}
+              onCompositionEnd={onCompositionEnd}
+              onKeyDown={handleKeyDown}
+            />
+          )}
+        </div>
+        {overlay && (
+          <div data-ow-part="overlay" className="relative z-30">
+            {overlay}
+          </div>
+        )}
+        <div data-ow-part="bar" className="flex items-center gap-1.5 min-h-7">
+          {/* 状态极：位置由本件定死（品牌拍板：不做可配置插槽）。点＝中性
+              --ow-progress-fill，形（实心/空环）＋文字构成 R1 双编码。 */}
+          {resolvedSubmitState !== "send" && (
+            <span
+              data-ow-part="state"
+              data-ow-state={resolvedSubmitState === "stop" ? "running" : "busy"}
+              className="inline-flex flex-[0_0_auto] items-center gap-1.5 pr-1 text-[color:var(--ow-text-3)] font-normal text-ow-fs-ui leading-none"
+              aria-live="polite"
+            >
+              <span
+                data-ow-part="state-dot"
+                aria-hidden="true"
+                className={cn(
+                  "w-1.5 h-1.5 rounded-full flex-[0_0_auto]",
+                  resolvedSubmitState === "stop"
+                    ? "bg-[var(--ow-progress-fill)]"
+                    : "border border-[color:var(--ow-border-strong)]",
+                )}
+              />
+              {resolvedSubmitState === "stop" ? "生成中" : "处理中"}
+            </span>
+          )}
+          <div data-ow-part="bar-start" className="flex min-w-0 items-center gap-1.5 flex-[0_1_auto]">
+            {toolbarStart ?? (
+              <>
+                <Button
+                  type="button"
+                  data-ow-part="tool"
+                  variant="ghost"
+                  size="sm"
+                  aria-label="添加附件"
+                  disabled={disabled}
+                  onClick={onAdd}
+                  icon={<Plus />}
+                />
+                <Button
+                  type="button"
+                  data-ow-part="tool"
+                  variant="ghost"
+                  size="sm"
+                  disabled={disabled}
+                  onClick={onSkillsClick}
+                  icon={<Zap />}
+                >
+                  技能
+                </Button>
+              </>
+            )}
+            {authorization}
+            {project}
+          </div>
+          <span className="flex-1" />
+          <div data-ow-part="bar-end" className="flex min-w-0 items-center gap-1.5 flex-[0_1_auto]">
+            {contextUsage}
+            {toolbarEnd ?? (
+              <Menu
+                width={128}
+                ariaLabel="回答模式"
+                items={modes.map((item) => ({
+                  key: item.value,
+                  label: item.label,
+                  selected: item.value === selectedMode,
+                }))}
+                onSelect={(key) => {
+                  if (mode === undefined) setInternalMode(key)
+                  onModeChange?.(key)
+                }}
+                trigger={
+                  <Button
+                    type="button"
+                    data-ow-part="mode"
+                    variant="ghost"
+                    size="sm"
+                    disabled={disabled}
+                    icon={<ChevDown />}
+                    className="flex-row-reverse"
+                  >
+                    {modes.find((item) => item.value === selectedMode)?.label ?? selectedMode}
+                  </Button>
+                }
+              />
+            )}
+            {voice}
+          </div>
+          <Button
+            type="button"
+            data-ow-part="submit"
+            data-ow-state={
+              cn(resolvedSubmitState === "stop" && "stop", resolvedSubmitState === "busy" && "busy") || undefined
+            }
+            // 行动极正规通道：发送＝primary（暗档 btn-primary 族即荧黄，token 承担）；
+            // 停止/处理中退回 secondary，靠形状再编码（R1）。
+            variant={resolvedSubmitState === "send" ? "primary" : "secondary"}
+            size="md"
+            loading={resolvedSubmitState === "busy"}
+            icon={
+              resolvedSubmitState === "stop" ? (
+                <span className="w-2.5 h-2.5 [border-radius:var(--ow-radius-2xs)] bg-[var(--ow-text)]" />
+              ) : (
+                <Arrow />
+              )
+            }
+            aria-label={resolvedSubmitState === "stop" ? "停止" : resolvedSubmitState === "busy" ? "处理中" : "发送"}
+            title={submitTitle}
+            onClick={handleSubmit}
+            disabled={sendDisabled}
+          />
+        </div>
+      </div>
+      {hasFooter && (
+        <div
+          data-ow-part="footer"
+          // W5 终扫修：字号原走 Tailwind text-xs（12 裸档），收到 --ow-fs-mark-md 标记档（§7）
+          className="relative flex min-w-0 min-h-6 items-center justify-between gap-4 mx-1.5 mt-px p-0 overflow-visible text-[color:var(--ow-text-3)] font-normal text-[length:var(--ow-fs-mark-md)] leading-[1.4]"
+        >
+          <div data-ow-part="footer-start" className="flex min-w-0 items-center gap-2 overflow-visible flex-[1_1_auto]">
+            {footerStart}
+          </div>
+          <div
+            data-ow-part="footer-end"
+            className="flex min-w-0 items-center gap-2 overflow-visible flex-[0_0_auto] ml-auto"
+          >
+            {footerEnd}
+          </div>
+        </div>
+      )}
+    </div>
+  )
+})

package/src/components/domain/chat/Composer/parts/ComposerAudioSpectrum.stories.tsx

@@ -0,0 +1,203 @@
+import type { Meta, StoryObj } from "@storybook/react"
+import { useEffect, useRef } from "react"
+import { Mic } from "../../../../composite/Icons"
+import { Button } from "../../../../primitives"
+import { ComposerAudioSpectrum } from "./ComposerAudioSpectrum"
+
+const meta = {
+  title: "Chat/ComposerAudioSpectrum",
+  component: ComposerAudioSpectrum,
+  parameters: {
+    layout: "padded",
+  },
+  tags: ["autodocs"],
+} satisfies Meta<typeof ComposerAudioSpectrum>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+/** 演示用小标签：--ow-fs-body-sm（12）＋ text-2，不写裸字号。 */
+const demoCaptionStyle = {
+  fontSize: "var(--ow-fs-body-sm)",
+  color: "var(--ow-text-2)",
+  marginBottom: 8,
+} as const
+
+/**
+ * 波形档位三条（R2 复审并档）：原来 StaticLevelsLow/Medium/High/Silent/Varied/Sparse/Wave/
+ * ManyLevels/SingleLevel 九条只是换一组 levels 数组，渲出来是同一根频谱条的不同波形——
+ * V1 期堆量式 fixture。留低/中/高三档足以覆盖渲染分支（低幅、满幅、条数溢出），
+ * 其余合并进 MultipleInstances 一屏对照。
+ */
+export const StaticLevelsLow: Story = {
+  args: {
+    levels: [0.1, 0.15, 0.2, 0.15, 0.1, 0.05, 0.1, 0.2],
+  },
+}
+
+export const StaticLevelsMedium: Story = {
+  args: {
+    levels: [0.3, 0.4, 0.5, 0.6, 0.5, 0.4, 0.3, 0.4, 0.5, 0.4],
+  },
+}
+
+/** 高幅兼「条数溢出」：50 条时按可用宽度取样，不逐条挤扁。 */
+export const StaticLevelsHigh: Story = {
+  args: {
+    levels: Array.from({ length: 50 }, (_, i) => Math.sin(i / 5) * 0.4 + 0.6),
+  },
+}
+
+/**
+ * 静默：levels 全 0（或空数组）时每根条落到 2px 最小值，渲出来是一排贴底的小点——
+ * 这是**预期形态**，不是画布没渲。录音态真的没有输入信号时看到的就是它。
+ */
+export const StaticLevelsSilent: Story = {
+  parameters: {
+    docs: { description: { story: "全 0 电平：每根条落 2px 最小高度，是「有画布、无信号」的预期形态。" } },
+  },
+  args: {
+    levels: [0, 0, 0, 0, 0, 0, 0, 0],
+  },
+}
+
+export const CustomClassName: Story = {
+  args: {
+    levels: [0.4, 0.5, 0.6, 0.5, 0.4, 0.3],
+    className: "custom-spectrum-class",
+  },
+}
+
+export const CustomAriaLabel: Story = {
+  args: {
+    levels: [0.3, 0.4, 0.5, 0.4, 0.3],
+    // R2 复审修：原来是一句英文覆盖值，而组件默认 aria-label 是中文「语音输入频谱」——
+    // 演示覆盖值改中文，与同簇其余 fixture 一致。
+    "aria-label": "语音输入频谱（自定义）",
+  },
+}
+
+export const ConstrainedWidth: Story = {
+  render: () => (
+    <div style={{ width: 200, border: "1px solid var(--ow-border)", padding: 12 }}>
+      <ComposerAudioSpectrum levels={[0.3, 0.5, 0.7, 0.9, 0.7, 0.5, 0.3, 0.5]} />
+    </div>
+  ),
+}
+
+export const ConstrainedHeight: Story = {
+  render: () => (
+    <div style={{ height: 32, border: "1px solid var(--ow-border)", padding: 12 }}>
+      <ComposerAudioSpectrum levels={[0.3, 0.5, 0.7, 0.9, 0.7, 0.5, 0.3, 0.5]} />
+    </div>
+  ),
+}
+
+export const LargeContainer: Story = {
+  render: () => (
+    <div style={{ width: 600, height: 100, border: "1px solid var(--ow-border)", padding: 16 }}>
+      <ComposerAudioSpectrum levels={[0.3, 0.4, 0.5, 0.6, 0.7, 0.8, 0.9, 1.0, 0.9, 0.8, 0.7, 0.6, 0.5, 0.4, 0.3]} />
+    </div>
+  ),
+}
+
+/**
+ * 工具条里的录音态：麦克风钮走归口的 Button（32 档 · 8px 圆角 · 选中态）、图标取信标族的
+ * Lucide 24 网格件，计时是 mono 读数。
+ *
+ * W5 终扫修：原 story 手搓了一枚 999 圆钮（§7 按钮禁 999）、`color:"white"` 裸值、
+ * 内联 Material 24 网格实心 mic 字形，计时还是 14px 非 mono——四处 V1 痕迹一并换掉。
+ */
+export const InComposerToolbar: Story = {
+  render: () => (
+    <div
+      style={{
+        display: "flex",
+        alignItems: "center",
+        gap: "var(--ow-space-2)",
+        padding: "var(--ow-space-3)",
+        background: "var(--ow-bg)",
+        borderRadius: "var(--ow-radius-card)",
+      }}
+    >
+      <Button variant="primary" size="md" aria-pressed aria-label="停止录音" icon={<Mic />} />
+      <div style={{ flex: 1, height: 40 }}>
+        <ComposerAudioSpectrum levels={[0.2, 0.4, 0.6, 0.8, 0.9, 0.7, 0.5, 0.3, 0.4, 0.6]} />
+      </div>
+      <span
+        style={{
+          fontFamily: "var(--ow-font-mono)",
+          fontSize: "var(--ow-fs-ui)",
+          fontVariantNumeric: "tabular-nums",
+          color: "var(--ow-text-2)",
+        }}
+      >
+        00:05
+      </span>
+    </div>
+  ),
+}
+
+export const LiveAnalyser: Story = {
+  render: () => {
+    const SpectrumWithAnalyser = () => {
+      const analyserRef = useRef<AnalyserNode | null>(null)
+
+      useEffect(() => {
+        const audioContext = new (window.AudioContext || (window as any).webkitAudioContext)()
+        const analyser = audioContext.createAnalyser()
+        analyser.fftSize = 512
+
+        const oscillator = audioContext.createOscillator()
+        oscillator.type = "sine"
+        oscillator.frequency.value = 440
+        oscillator.connect(analyser)
+        analyser.connect(audioContext.destination)
+
+        analyserRef.current = analyser
+        oscillator.start()
+
+        return () => {
+          oscillator.stop()
+          audioContext.close()
+        }
+      }, [])
+
+      return (
+        <div style={{ width: 400, height: 60, border: "1px solid var(--ow-border)", padding: 12 }}>
+          <ComposerAudioSpectrum analyserRef={analyserRef} />
+        </div>
+      )
+    }
+
+    return <SpectrumWithAnalyser />
+  },
+}
+
+export const MultipleInstances: Story = {
+  render: () => (
+    <div style={{ display: "flex", flexDirection: "column", gap: 16, maxWidth: 400 }}>
+      {/* R2 复审修：三条标签原为英文且字号是裸 12，改中文 ＋ --ow-fs-body-sm（§8 中文文案 / §7 字阶）。 */}
+      <div style={{ border: "1px solid var(--ow-border)", padding: 12 }}>
+        <div style={demoCaptionStyle}>低电平</div>
+        <ComposerAudioSpectrum levels={[0.1, 0.15, 0.2, 0.15, 0.1, 0.05]} />
+      </div>
+      <div style={{ border: "1px solid var(--ow-border)", padding: 12 }}>
+        <div style={demoCaptionStyle}>中电平</div>
+        <ComposerAudioSpectrum levels={[0.4, 0.5, 0.6, 0.5, 0.4, 0.3]} />
+      </div>
+      <div style={{ border: "1px solid var(--ow-border)", padding: 12 }}>
+        <div style={demoCaptionStyle}>高电平</div>
+        <ComposerAudioSpectrum levels={[0.8, 0.9, 1.0, 0.9, 0.8, 0.7]} />
+      </div>
+      <div style={{ border: "1px solid var(--ow-border)", padding: 12 }}>
+        <div style={demoCaptionStyle}>稀疏（间断说话）</div>
+        <ComposerAudioSpectrum levels={[0.8, 0, 0, 0.6, 0, 0, 0.9, 0, 0, 0.4]} />
+      </div>
+      <div style={{ border: "1px solid var(--ow-border)", padding: 12 }}>
+        <div style={demoCaptionStyle}>单条</div>
+        <ComposerAudioSpectrum levels={[0.8]} />
+      </div>
+    </div>
+  ),
+}