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

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

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

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