@orbit-work/ui 0.1.1 → 0.1.2

package/src/components/domain/chat/Thinking/Thinking.stories.tsx

@@ -1,196 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react"
-import { useState } from "react"
-import { Thinking } from "./index"
-
-const meta = {
-  title: "Chat/Thinking",
-  component: Thinking,
-  parameters: {
-    layout: "padded",
-  },
-  tags: ["autodocs"],
-} satisfies Meta<typeof Thinking>
-
-export default meta
-type Story = StoryObj<typeof meta>
-
-/** 运转态：完整五点构型公转 1.6s linear，卫星 var(--ow-beacon) 占状态极（每屏限一处）。 */
-export const Default: Story = {
-  args: {
-    label: "正在核对 14 份来源，比对引用页码",
-  },
-}
-
-/** 静止态：转完当前圈停在 +24°，整体落为 text-3 单色，不再占极。 */
-export const Static: Story = {
-  args: {
-    spinning: false,
-    label: "思考收尾——转完当前圈，停在 +24°",
-  },
-}
-
-export const NoLabel: Story = {
-  args: {},
-}
-
-export const Sizes: Story = {
-  render: () => (
-    <div style={{ display: "flex", alignItems: "center", gap: 32 }}>
-      <Thinking size={64} label="size=64" />
-      <Thinking size={48} label="size=48（默认）" />
-      <Thinking size={24} label="size=24" />
-    </div>
-  ),
-}
-
-/** 切换 spinning 观察收笔时序：转完当前圈 → 120ms 落到 +24°。 */
-export const SpinningToggle: Story = {
-  render: function SpinningToggle() {
-    const [spinning, setSpinning] = useState(true)
-    return (
-      <div style={{ display: "flex", alignItems: "center", gap: 24 }}>
-        <Thinking spinning={spinning} label={spinning ? "正在思考" : "已思考"} />
-        <button type="button" onClick={() => setSpinning((s) => !s)}>
-          {spinning ? "停止（收笔）" : "继续思考"}
-        </button>
-      </div>
-    )
-  },
-}
-
-/** transcript 语境：思考行 + mono/tabular-nums 步数耗时读数。 */
-export const WithReadout: Story = {
-  render: () => (
-    <div
-      style={{
-        background: "var(--ow-surface)",
-        border: "1px solid var(--ow-border)",
-        borderRadius: 12,
-        padding: 16,
-        display: "flex",
-        flexDirection: "column",
-        gap: 16,
-      }}
-    >
-      <div style={{ display: "flex", alignItems: "center", gap: 12 }}>
-        <Thinking label="正在核对 14 份来源，比对引用页码" />
-        <span
-          style={{
-            fontFamily: "var(--ow-font-mono)",
-            fontVariantNumeric: "tabular-nums",
-            fontSize: 10,
-            color: "var(--ow-text-2)",
-          }}
-        >
-          第 3 步 · 2m40s
-        </span>
-      </div>
-      <div style={{ display: "flex", alignItems: "center", gap: 12 }}>
-        <Thinking spinning={false} label="已思考" />
-        <span
-          style={{
-            fontFamily: "var(--ow-font-mono)",
-            fontVariantNumeric: "tabular-nums",
-            fontSize: 10,
-            color: "var(--ow-text-2)",
-          }}
-        >
-          共 5 步 · 4m02s
-        </span>
-      </div>
-    </div>
-  ),
-}
-
-/**
- * inline 变体（转录里的思考行，原型模板 template.dc.html:1196-1217）：**整画布信标**（`INLINE_SIZE`，眼下 28）
- * ＋ gap 10 ＋ fs-ui/1.6 text-2 一句话。不给 `children` 就没有 chevron、不折叠。卫星＝状态极。
- *
- * R4 · 2026-09-04（Terry）：原型 1196 那张 40×25 的裁切画布只在静止 0° 时装得下五点，
- * 一转起来卫星（r 10.4）就出右沿与底沿——Terry 两次看到「logo 被裁」。改用 `BeaconSpinner`
- * 的 96 整画布缩到 24：公转圆整个在画布里，静止收笔照规格卡 +24°，**什么姿态都不裁**。
- */
-export const Inline: Story = {
-  args: {
-    variant: "inline",
-    label: "先把组件库里已有的零件数清楚，再决定补哪几件。",
-  },
-}
-
-/** inline 静止态：整组落 text-3 单色，停在 +24°（整画布装得下这个姿态），不占极。 */
-export const InlineStill: Story = {
-  args: {
-    variant: "inline",
-    spinning: false,
-    label: "已经数清楚了：聊天域现有 22 件组件，缺三件。",
-  },
-}
-
-/** inline 让极：同段有工具在跑时，卫星退成无彩 --ow-text-2（原型 logic:3850 的记账）。 */
-export const InlineToolRunning: Story = {
-  args: {
-    variant: "inline",
-    toolRunning: true,
-    label: "按原型模板逐值核对三件缺件的尺寸与 token。",
-  },
-}
-
-/** inline 三态并排对照：运转占极 / 让极 / 静止。 */
-export const InlineStates: Story = {
-  render: () => (
-    <div style={{ display: "flex", flexDirection: "column", gap: 14, maxWidth: 560 }}>
-      <Thinking variant="inline" label="运转 · 卫星＝var(--ow-beacon)，占状态极" />
-      <Thinking variant="inline" toolRunning label="让极 · 卫星退 var(--ow-text-2)，极归工具行" />
-      <Thinking variant="inline" spinning={false} label="静止 · 整组 var(--ow-text-3) 单色，不占极" />
-    </div>
-  ),
-}
-
-/* 思考正文的排版由件自己给（text-3 13/1.7，挂在信标中线下的 1px --ow-border-strong 竖线右侧），
-   宿主只管把段落塞进来——这里按同事口吻写几句真的推理，不用英文 lorem。 */
-const REASONING = (
-  <>
-    <p style={{ margin: "0 0 6px" }}>先数一遍 chat 域现有的件：22 件，其中 3 件是兼容层。</p>
-    <p style={{ margin: "0 0 6px" }}>缺的是执行摘要卡、跑动中的工具行、授权卡——原型 1219-1250 那一段全靠它们。</p>
-    <p style={{ margin: "0 0 6px" }}>先补摘要卡，因为工具行要挂在它的展开体里，顺序反了要返工。</p>
-    <p style={{ margin: 0 }}>授权卡放最后，它只跟 live 段有关，不阻塞前两件。</p>
-  </>
-)
-
-/**
- * R4 · 2026-09-04（Terry：思考要能折叠展开）——给了 `children` 的 inline 行：行尾长出
- * 14px ChevRight，整行成披露触发器。**缺省折叠**：思考过程是过程，不是答案。
- * 与工具调用行（`ExecutionSummaryRow`）、摘要卡头行用的是同一枚 chevron 记号，
- * 转录里「可展开」只有这一种说法。
- */
-export const InlineWithReasoning: Story = {
-  args: {
-    variant: "inline",
-    spinning: false,
-    label: "已思考",
-    children: REASONING,
-  },
-}
-
-/**
- * 展开后：chevron 翻成 ChevDown，正文挂在信标中线（x=12）下的 1px `--ow-border-strong`
- * 竖线右侧，起点与上面那句 label 的左沿对齐（24/2 ＋ gap 10）。正文 `--ow-text-3` 13/1.7。
- */
-export const InlineWithReasoningExpanded: Story = {
-  args: {
-    variant: "inline",
-    spinning: false,
-    label: "已思考",
-    defaultExpanded: true,
-    children: REASONING,
-  },
-}
-
-/** 边转边可展开：卫星仍占状态极（--ow-beacon），公转全程不出画布，chevron 照常在行尾。 */
-export const InlineSpinningWithReasoning: Story = {
-  args: {
-    variant: "inline",
-    label: "正在思考",
-    children: REASONING,
-  },
-}

package/src/components/domain/chat/Thinking/ThinkingInlineSource.test.mjs

@@ -1,154 +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("./Thinking.stories.tsx", import.meta.url), "utf8")
-const beacon = await readFile(new URL("../../../composite/BeaconSpinner/index.tsx", import.meta.url), "utf8")
-const chatThinking = await readFile(new URL("../ChatThinking/index.tsx", import.meta.url), "utf8")
-const artifact = await readFile(new URL("../ArtifactCard/index.tsx", import.meta.url), "utf8")
-
-// 原型模板 template.dc.html:1196-1217 —— 转录里的思考行
-//
-// R4 · 2026-09-04（Terry 两次看到「logo 被裁」）：原型 1196 那张 40×25 的裁切画布只在
-// 静止 0° 时装得下五点，一转起来卫星（r 10.4）就出右沿与底沿。inline 改用锁定件
-// `BeaconSpinner` 的 96 整画布缩到 24–32 一档——公转圆整个在画布里，静止收笔照规格卡 +24°，
-// 什么姿态都不裁。姿态规则从此只锁在 BeaconSpinner 身上，本件不再自搓 svg。
-test("inline 变体＝整画布 BeaconSpinner（24–32 一档），不再自搓 40×25 裁切 svg", () => {
-  assert.match(source, /variant\?: "block" \| "inline"/)
-  // 只锁「整画布 ＋ 落在 24–32 这一档」：具体取 24 / 28 / 32 是 R4 待裁的一项
-  // （见 index.tsx 的 INLINE_SIZE 注释 / ACCEPTANCE-PENDING）；<20 会掉进小转子环那一支。
-  const inlineSize = /const INLINE_SIZE = (\d+)/.exec(source)
-  assert.ok(inlineSize, "找不到 INLINE_SIZE")
-  assert.ok(Number(inlineSize[1]) >= 24 && Number(inlineSize[1]) <= 32, `INLINE_SIZE=${inlineSize?.[1]} 越档`)
-  assert.match(source, /<BeaconSpinner\n\s+size=\{INLINE_SIZE\}/)
-  // 裁切画布与自搓 svg 整枚退役
-  assert.doesNotMatch(source, /viewBox="13 11\.7/)
-  assert.doesNotMatch(source, /width="40"/)
-  assert.doesNotMatch(source, /<svg/)
-  // 姿态（+24° 收笔基线）只属 BeaconSpinner，本件不复写
-  assert.doesNotMatch(source, /rotate\(24deg\)/)
-  assert.doesNotMatch(source, /rotate\(0deg\)/)
-  assert.match(beacon, /transform: "rotate\(24deg\)"/)
-})
-
-test("行＝flex 居中 ＋ gap 10；文案 --ow-fs-ui/1.6 --ow-text-2，无标题词", () => {
-  assert.match(source, /const INLINE_GAP = 10/)
-  assert.match(
-    source,
-    /const inlineRow: CSSProperties = \{ display: "flex", alignItems: "center", gap: INLINE_GAP, minWidth: 0 \}/,
-  )
-  assert.match(
-    source,
-    /const inlineLabel: CSSProperties = \{[\s\S]*?fontSize: "var\(--ow-fs-ui\)",\n\s+lineHeight: 1\.6,\n\s+color: "var\(--ow-text-2\)"/,
-  )
-  // 无标题词：inline 行只渲一个 {label}，「正在思考/已思考」只作 aria-label
-  assert.match(source, /\{label && <span style=\{inlineLabel\}>\{label\}<\/span>\}/)
-  assert.doesNotMatch(source, />(?:已思考|正在思考)</)
-})
-
-// R4（Terry：思考要能折叠展开）——转录里所有可展开的东西用同一枚图标集 chevron，
-// 不再有 ▸/▾ 文字字形，也不再有第二套自搓披露壳。
-test("给了 children 才可折叠：行尾 14px ChevRight/ChevDown，缺省折叠，整行成披露钮", () => {
-  assert.match(source, /children\?: ReactNode/)
-  assert.match(source, /defaultExpanded\?: boolean/)
-  assert.match(source, /expanded\?: boolean/)
-  assert.match(source, /onExpandedChange\?: \(expanded: boolean\) => void/)
-  assert.match(source, /import \{ ChevDown, ChevRight \} from "\.\.\/\.\.\/\.\.\/composite\/Icons"/)
-  assert.match(source, /const collapsible = children != null/)
-  assert.match(source, /defaultExpanded = false/)
-  assert.match(source, /isExpanded \? <ChevDown \/> : <ChevRight \/>/)
-  assert.match(source, /const chevStyle: CSSProperties = \{[\s\S]*?width: 14,\n\s+height: 14/)
-  assert.match(source, /const chevStyle: CSSProperties = \{[\s\S]*?color: "var\(--ow-text-3\)"/)
-  // 不可折叠时落静态 div，不做死钮（§6 交互态只属真的可交互件）
-  assert.match(source, /\{collapsible \? \(\n\s+<button/)
-  assert.match(source, /<div data-ow-part="row" style=\{inlineRow\}>/)
-  assert.doesNotMatch(source, /[▸▾]/)
-})
-
-test("受控/非受控展开都通；展开体带 id 与 aria-controls，data-ow-state 读得出展开态", () => {
-  assert.match(source, /if \(expanded === undefined\) setUncontrolled\(next\)/)
-  assert.match(source, /const isExpanded = collapsible && \(expanded \?\? uncontrolled\)/)
-  assert.match(source, /aria-expanded=\{isExpanded\}/)
-  assert.match(source, /aria-controls=\{isExpanded \? bodyId : undefined\}/)
-  assert.match(source, /data-slot="thinking"/)
-  assert.match(
-    source,
-    // biome 把三项数组折成多行，逐项匹配（R5 加了第三项 no-beacon）
-    /data-ow-state=\{\[\s*spinning \? "spinning" : "still",\s*isExpanded \? "expanded" : null,\s*showBeacon \? null : "no-beacon",?\s*\]/,
-  )
-})
-
-test("展开体＝信标中线下的 1px --ow-border-strong 竖线 ＋ text-3 13/1.7，正文左沿与 label 对齐", () => {
-  assert.match(source, /const inlineBody: CSSProperties = \{[\s\S]*?marginLeft: INLINE_SIZE \/ 2 - 1/)
-  assert.match(
-    source,
-    /const inlineBody: CSSProperties = \{[\s\S]*?padding: `2px 0 6px \$\{INLINE_SIZE \/ 2 \+ INLINE_GAP \+ 1\}px`/,
-  )
-  assert.match(source, /const inlineBody: CSSProperties = \{[\s\S]*?borderLeft: "1px solid var\(--ow-border-strong\)"/)
-  assert.match(
-    source,
-    /const inlineBody: CSSProperties = \{[\s\S]*?fontSize: "var\(--ow-fs-ui\)",\n\s+lineHeight: 1\.7,\n\s+color: "var\(--ow-text-3\)"/,
-  )
-})
-
-test("§4 状态极让极：有工具在跑时卫星退 --ow-text-2，否则 --ow-beacon；静止落 text-3 单色不占极", () => {
-  assert.match(source, /toolRunning\?: boolean/)
-  assert.match(source, /const satellite = toolRunning \? "var\(--ow-text-2\)" : "var\(--ow-beacon\)"/)
-  // 静止：尾迹与卫星一起落 text-3（卫星的静止归位由 BeaconSpinner 做：spinning=false → 取 trail）
-  assert.match(source, /trail=\{spinning \? "var\(--ow-text\)" : "var\(--ow-text-3\)"\}/)
-  assert.match(beacon, /satellite=\{spinning \? satellite : \(trail \?\? "var\(--ow-text\)"\)\}/)
-})
-
-test("§9 动效：转子帧只由 BeaconSpinner 出；inline 壳仍挂 .ow-motion 走 reduced-motion", () => {
-  assert.match(source, /ow-thinking--inline ow-motion/)
-  // 动画声明不在本件里——唯一转子帧 ow-spin ＋ --ow-dur-spin linear 归锁定件
-  assert.doesNotMatch(source, /animation:/)
-  assert.match(beacon, /`ow-spin \$\{spinDuration\} linear infinite`/)
-})
-
-test("block 变体（规格卡形制）没被改坏：仍走 BeaconSpinner ＋ 48 ＋ caption 文案", () => {
-  assert.match(source, /size = 48/)
-  assert.match(source, /<BeaconSpinner\n\s+size=\{size\}/)
-  assert.match(source, /var\(--ow-fs-caption, 12px\)\/1\.5/)
-})
-
-// R4：ChatThinking 归口成本件 inline 变体的薄包装——转录里只剩这一种思考行。
-test("ChatThinking 是本件 inline 的薄包装：零自持形态，只做 title/loading/children 三项映射", () => {
-  assert.match(chatThinking, /import \{ Thinking \} from "\.\.\/Thinking"/)
-  assert.match(chatThinking, /<div data-slot="chat-thinking" className=\{className\}>/)
-  assert.match(chatThinking, /<Thinking\n\s+variant="inline"\n\s+spinning=\{loading\}/)
-  assert.match(chatThinking, /label=\{typeof statusTitle === "string" \? statusTitle : undefined\}/)
-  // 兼容层零配方：不再自搓披露壳与 15px 小记号
-  const code = chatThinking.replace(/\/\*[\s\S]*?\*\//g, "").replace(/^[ \t]*\/\/.*$/gm, "")
-  assert.doesNotMatch(code, /<svg|<button|borderRadius|padding|fontSize/)
-  // icon 退成 no-op（旧调用点传了也不渲第二种记号）
-  assert.match(chatThinking, /本项忽略/)
-  assert.doesNotMatch(code, /\{icon\}/)
-})
-
-test("story 覆盖 inline 三态 ＋ R4 折叠三态", () => {
-  for (const s of [
-    "Inline",
-    "InlineStill",
-    "InlineToolRunning",
-    "InlineStates",
-    "InlineWithReasoning",
-    "InlineWithReasoningExpanded",
-    "InlineSpinningWithReasoning",
-  ]) {
-    assert.match(stories, new RegExp(`export const ${s}: Story`))
-  }
-  // 折叠是缺省：只有 …Expanded 那一张显式传 defaultExpanded
-  assert.equal(stories.match(/defaultExpanded: true/g)?.length, 1)
-})
-
-// A9-B1 顺带：递减短迹间距对齐原型（1222-1227 / 1354-1359 均为 3px）
-test("ArtifactTrail 点间距 5→3，与原型的执行摘要头行/产物卡同值", () => {
-  assert.match(
-    artifact,
-    /const trailStyle: CSSProperties = \{ display: "flex", alignItems: "center", gap: 3, height: 8, flex: "none" \}/,
-  )
-  assert.match(artifact, /\{ size: 6, opacity: 1 \}/)
-  assert.match(artifact, /\{ size: 3, opacity: 0\.25 \}/)
-})

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

@@ -1,237 +0,0 @@
-"use client"
-
-import { type CSSProperties, type ReactNode, useId, useState } from "react"
-import { BeaconSpinner } from "../../../composite/BeaconSpinner"
-import { ChevDown, ChevRight } from "../../../composite/Icons"
-import { useAgentTurnBeacon, useReportAgentTurnActivity } from "../AgentTurn/beaconContext"
-
-export interface ThinkingProps {
-  /**
-   * block（默认）＝规格卡形制：正方信标 ＋ caption 文案，用于独立的思考态陈列。
-   * inline＝转录里的思考行（原型模板 template.dc.html:1196-1217）：**28px 整画布信标**
-   * ＋ gap 10 ＋ `--ow-fs-ui`/1.6 `--ow-text-2` 一句话；给了 `children`（思考正文）
-   * 则行尾长出 chevron、整行成披露触发器（R4 · 2026-09-04，Terry：思考要能折叠展开）。
-   *
-   * 画布口径（R4）：原型 1196 的 40×25 裁切画布只在静止 0° 时装得下五点，一转起来卫星
-   * 就出画布（Terry 两次看到「logo 被裁」）。改用 `BeaconSpinner` 的 96 整画布缩到 28——
-   * 公转圆整个在画布里，静止收笔照规格卡 +24°，什么姿态都不裁。
-   */
-  variant?: "block" | "inline"
-  /** 边长 px，默认 48；<20px 场景请改用系统小转子（1.5px 环 · 90° 缺口 · 0.9s linear）。inline 变体固定 28，本项不生效 */
-  size?: number
-  /** true=运转（ow-spin 1.6s linear infinite），false=转完当前圈停在 +24°，text-3 单色不占极；默认 true */
-  spinning?: boolean
-  /** 思考行文案（text-2），如「正在核对 14 份来源」 */
-  label?: string
-  /**
-   * 同段有工具正在跑时置 true：卫星从 `--ow-beacon` 退成 `--ow-text-2`，把状态极让给那条
-   * ToolCallRow（§4 状态极每屏限一处；原型 logic:3850 的记账口径）。仅 inline 变体生效。
-   */
-  toolRunning?: boolean
-  /**
-   * 思考正文（inline 变体）：给了就可折叠——行尾 chevron，展开体挂在信标中线下的
-   * 1px `--ow-border-strong` 竖线右侧，`--ow-text-3` 13/1.7。缺省折叠（思考过程是过程，
-   * 不是答案；宿主可用 `defaultExpanded` / `expanded` 改）。
-   */
-  children?: ReactNode
-  /**
-   * inline 变体是否自带信标。缺省自动：所在 AgentTurn 已把信标合到脊线节点上（`beacon` prop，
-   * R5 探索）时不带，思考行只剩一句话＋chevron，与正文同一条起线；否则带 28px 信标。
-   */
-  beacon?: boolean
-  /** 非受控初始展开态（inline ＋ children 时生效） */
-  defaultExpanded?: boolean
-  /** 受控展开态 */
-  expanded?: boolean
-  onExpandedChange?: (expanded: boolean) => void
-  className?: string
-}
-
-/**
- * Thinking — transcript 里 agent 的信标思考态（DS 2.0，照 ow/components/chat/Thinking 规格卡）
- *
- * - 完整五点构型公转：中心点 r8.2 恒定不转，尾迹四点与卫星 1.6s linear 绕行
- * - 卫星=var(--ow-beacon)（浅=深黄/暗=荧黄），占状态极（聚焦运行中），每屏限一处；
- *   同段有工具在跑时由 `toolRunning` 让极（inline 变体）
- * - 停止时转完当前圈停在 +24°，整体落为 text-3 单色（与空态母题 --ow-empty-mark 同源），不占极
- * - 不做小尺寸降级版；prefers-reduced-motion 直接呈现静止态
- * - 归口自：ChatThinking / ThinkingDots / ChatThinkView。R4 起 `ChatThinking` 是本件 inline
- *   变体的薄兼容层（title→label、loading→spinning、children→思考正文），转录里只剩这一种思考行。
- */
-export function Thinking({
-  variant = "block",
-  size = 48,
-  spinning = true,
-  label,
-  toolRunning = false,
-  children,
-  beacon,
-  defaultExpanded = false,
-  expanded,
-  onExpandedChange,
-  className = "",
-}: ThinkingProps) {
-  const [uncontrolled, setUncontrolled] = useState(defaultExpanded)
-  const bodyId = useId()
-  const nodeBeacon = useAgentTurnBeacon()
-  const showBeacon = beacon ?? !nodeBeacon
-  // 转录里的思考行只有一种形：坐在带信标节点的轮里时，block 变体也按 inline 渲（信标已在节点上）
-  const inline = variant === "inline" || nodeBeacon
-  // 信标合到节点上时，把自己的转/停与让极报给所在轮（inline 才有意义；block 变体不在轮里）
-  useReportAgentTurnActivity({ spinning: inline && spinning, toolRunning: inline && toolRunning })
-  if (inline) {
-    const collapsible = children != null
-    const isExpanded = collapsible && (expanded ?? uncontrolled)
-    const toggle = () => {
-      if (!collapsible) return
-      const next = !isExpanded
-      if (expanded === undefined) setUncontrolled(next)
-      onExpandedChange?.(next)
-    }
-    // 运转态卫星＝状态极；同段有工具在跑时让极，退成无彩 text-2（原型 logic:3850）
-    const satellite = toolRunning ? "var(--ow-text-2)" : "var(--ow-beacon)"
-    const rowContent = (
-      <>
-        {showBeacon && (
-          <BeaconSpinner
-            size={INLINE_SIZE}
-            spinning={spinning}
-            trail={spinning ? "var(--ow-text)" : "var(--ow-text-3)"}
-            satellite={satellite}
-            aria-label={spinning ? "正在思考" : "已思考"}
-            style={beaconStyle}
-          />
-        )}
-        {label && <span style={inlineLabel}>{label}</span>}
-        {collapsible && (
-          <span aria-hidden="true" data-ow-part="chevron" style={chevStyle}>
-            {isExpanded ? <ChevDown /> : <ChevRight />}
-          </span>
-        )}
-      </>
-    )
-    return (
-      <div
-        className={`ow-thinking ow-thinking--inline ow-motion ${className}`}
-        data-slot="thinking"
-        data-ow-state={[
-          spinning ? "spinning" : "still",
-          isExpanded ? "expanded" : null,
-          showBeacon ? null : "no-beacon",
-        ]
-          .filter(Boolean)
-          .join(" ")}
-        style={inlineWrap}
-      >
-        {collapsible ? (
-          <button
-            type="button"
-            className="ow-focus-ring"
-            data-ow-part="trigger"
-            style={{ ...inlineRow, ...triggerReset }}
-            onClick={toggle}
-            aria-expanded={isExpanded}
-            aria-controls={isExpanded ? bodyId : undefined}
-          >
-            {rowContent}
-          </button>
-        ) : (
-          <div data-ow-part="row" style={inlineRow}>
-            {rowContent}
-          </div>
-        )}
-        {isExpanded && (
-          <div id={bodyId} data-ow-part="content" style={showBeacon ? inlineBody : inlineBodyNoBeacon}>
-            {children}
-          </div>
-        )}
-      </div>
-    )
-  }
-  return (
-    <div
-      className={`ow-thinking ow-motion ${className}`}
-      style={{ display: "inline-flex", alignItems: "center", gap: 12 }}
-    >
-      <BeaconSpinner
-        size={size}
-        spinning={spinning}
-        trail={spinning ? "var(--ow-text)" : "var(--ow-text-3)"}
-        satellite="var(--ow-beacon)"
-        aria-label={spinning ? "正在思考" : "已思考"}
-      />
-      {label && (
-        <span
-          style={{
-            font: "400 var(--ow-fs-caption, 12px)/1.5 var(--ow-font-sans)",
-            color: "var(--ow-text-2)",
-          }}
-        >
-          {label}
-        </span>
-      )}
-    </div>
-  )
-}
-
-/** inline 信标边长：28（§7 控件档——思考行是披露控件）。整画布缩放，公转圆（直径 ≈ 23px）全在画布内；
- *  24 偏小（尾迹点不到 2px）、32 压过 13px 文字，28 是两者之间的一档（R4，24 / 32 备选见 ACCEPTANCE-PENDING）。 */
-const INLINE_SIZE = 28
-/** 信标中线 x＝14；展开体的竖线压在这条中线上，正文从 28＋10 的标签起点开始。 */
-const INLINE_GAP = 10
-
-const inlineWrap: CSSProperties = { display: "flex", flexDirection: "column", alignItems: "stretch", gap: 0 }
-const inlineRow: CSSProperties = { display: "flex", alignItems: "center", gap: INLINE_GAP, minWidth: 0 }
-const triggerReset: CSSProperties = {
-  width: "100%",
-  padding: 0,
-  border: 0,
-  background: "transparent",
-  color: "inherit",
-  font: "inherit",
-  textAlign: "left",
-  cursor: "pointer",
-  borderRadius: "var(--ow-radius-2xs)",
-}
-const beaconStyle: CSSProperties = { flex: "0 0 auto", display: "block" }
-/* 标签不撑满整行：chevron 紧跟在句尾（原型思考行本无 chevron，披露记号该贴着它披露的那句话，
-   不是飘到 752 列的最右边）；长句照常收缩省略。 */
-const inlineLabel: CSSProperties = {
-  flex: "0 1 auto",
-  minWidth: 0,
-  fontSize: "var(--ow-fs-ui)",
-  lineHeight: 1.6,
-  color: "var(--ow-text-2)",
-  textWrap: "pretty",
-}
-const chevStyle: CSSProperties = {
-  flex: "0 0 auto",
-  width: 14,
-  height: 14,
-  display: "inline-flex",
-  alignItems: "center",
-  justifyContent: "center",
-  color: "var(--ow-text-3)",
-}
-/* 无信标（信标已合到脊线节点上）：竖线落在正文起线，正文再进 12 */
-const inlineBodyNoBeacon: CSSProperties = {
-  marginLeft: 0,
-  marginTop: 4,
-  padding: "2px 0 6px 12px",
-  borderLeft: "1px solid var(--ow-border-strong)",
-  fontSize: "var(--ow-fs-ui)",
-  lineHeight: 1.7,
-  color: "var(--ow-text-3)",
-  overflowWrap: "anywhere",
-}
-
-const inlineBody: CSSProperties = {
-  marginLeft: INLINE_SIZE / 2 - 1,
-  marginTop: 4,
-  padding: `2px 0 6px ${INLINE_SIZE / 2 + INLINE_GAP + 1}px`,
-  borderLeft: "1px solid var(--ow-border-strong)",
-  fontSize: "var(--ow-fs-ui)",
-  lineHeight: 1.7,
-  color: "var(--ow-text-3)",
-  overflowWrap: "anywhere",
-}