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

package/src/components/domain/browser/WebPreviewShell/WebPreviewShellSource.test.mjs

@@ -1,172 +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 field = await readFile(new URL("../../../primitives/Field/index.tsx", import.meta.url), "utf8")
-const styles = await readFile(new URL("../../../../../styles/desktop-surfaces.css", import.meta.url), "utf8")
-
-/** 只在「代码」上验禁令：注释里点名 token 是文档，不是用法。 */
-const code = source.replace(/\/\*[\s\S]*?\*\//g, "").replace(/^[ \t]*\/\/.*$/gm, "")
-
-test("地址栏归口 Field 原语语法，不再手搓 input 三态边框", () => {
-  assert.match(source, /import \{ Field \}/)
-  assert.match(source, /<Field\b/)
-  assert.doesNotMatch(source, /<input\b/)
-  // 字段壳自己给 rest→hover→focus，本件不得再写边框色
-  assert.doesNotMatch(source, /--ow-input-border/)
-})
-
-test("地址是 §7 读数：mono + tabular-nums", () => {
-  assert.match(source, /font-\[family-name:var\(--ow-font-mono\)\][\s\S]{0,80}\[font-variant-numeric:tabular-nums\]/)
-})
-
-test("工具栏 40 高（--ow-h-lg）、图标钮 28（§7 度量表）", () => {
-  assert.match(source, /height: "var\(--ow-h-lg\)"/)
-  // R2：图标钮一律走 Button 的 icon 槽——icon-only 由原语给 28 方与 16 图形，
-  // 本件不再手补 w-7 h-7 / [&_svg]:w-4（一件里三处图标各一套写法是口径散点）。
-  assert.doesNotMatch(source, /const NAV_BTN =[\s\S]*?w-7 h-7/)
-  assert.doesNotMatch(source, /\[&_svg\]:w-4/)
-  assert.match(source, /icon=\{<ChevLeft aria-hidden="true" \/>\}/)
-  assert.match(source, /icon=\{<ChevRight aria-hidden="true" \/>\}/)
-  assert.match(source, /icon=\{loading \? <Close aria-hidden="true" \/> : <Refresh aria-hidden="true" \/>\}/)
-})
-
-// 地址栏站点图标曾渲成 0×0：Icons 族裸 svg 只有 viewBox 没有 width/height，
-// 在没有确定尺寸的 flex 壳里解析成 0。尺寸由 Field 的 affix 壳一次性给足。
-test("地址栏前缀图标有尺寸：Field 的 affix 壳补 16 方", () => {
-  assert.match(field, /const affixClasses =\s*\n?\s*"[^"]*\[&_svg\]:w-4 \[&_svg\]:h-4/)
-})
-
-test("§6 容器三态：空=EmptyState 信标母题 / 载=ProgressBar / 错=InlineMessage", () => {
-  assert.match(source, /import \{ EmptyState \}/)
-  assert.match(source, /import \{ InlineMessage \}/)
-  assert.match(source, /import \{ ProgressBar \}/)
-  assert.match(source, /<EmptyState message=\{emptyMessage\}/)
-  assert.match(source, /<InlineMessage\s+variant="error"/)
-  assert.match(source, /<ProgressBar[\s\S]*?indeterminate/)
-})
-
-/* A8-B4（原型模板 2303–2310 · 裁决 6「空态太小」）：空/占位体那块地。 */
-test("空/占位体：--ow-mat 占位地 ＋ 48×30 母题 ＋ 360 量度一句话", () => {
-  const empty = code.match(/<div data-ow-part="empty"[\s\S]*?<\/div>/)?.[0] ?? ""
-  assert.match(empty, /bg-\[var\(--ow-mat\)\]/)
-  assert.match(empty, /\bp-6\b/)
-  // 母题按原型放到 48（宽给 48，高由 EmptyState 按紧裁 bbox 比例推成 30）——md 档默认的 40 太小
-  assert.match(empty, /markSize=\{48\}/)
-  // 一句话量度 360；md 档自带的 px-4 py-8 让位给外框的 24
-  assert.match(empty, /max-w-\[360px\]/)
-  assert.match(empty, /\bp-0\b/)
-  // 占位地只许走 token，不写裸色
-  assert.doesNotMatch(empty, /#[0-9a-f]{3,8}|rgba?\(/i)
-})
-
-test("载入进度复用原语而不是自造 keyframes（禁 shimmer / 自定义缓动）", () => {
-  assert.doesNotMatch(source, /@keyframes|animate-/)
-})
-
-test("禁用态逐 token，不用统一透明度（§6）", () => {
-  assert.match(source, /disabled:text-\[color:var\(--ow-disabled-text\)\]/)
-  // 禁令字面量拼出来写：整串直接写进源码会被 check-ds2 的 disabled 规则当成违规命中。
-  const banned = new RegExp(`disabled:${"opacity-"}|--ow-${"opacity-disabled"}`)
-  assert.doesNotMatch(source, banned)
-})
-
-test("裸域名补协议在 normalizePreviewUrl 一处收口", () => {
-  assert.match(source, /export function normalizePreviewUrl/)
-  assert.match(source, /\^\[a-z\]\[a-z0-9\+\.-\]\*:/)
-  assert.match(source, /`https:\/\/\$\{trimmed\}`/)
-})
-
-test("IME 感知回车（中文输入法回车不误提交）", () => {
-  assert.match(source, /useImeAwareEnter/)
-  assert.match(source, /if \(isImeEnter\(event\)\) return/)
-})
-
-test("R3 中性件：无信标/荧黄，也不借 --ow-primary 假冒极色", () => {
-  assert.doesNotMatch(code, /--ow-beacon|--ow-accent-dot|--ow-yellow|--ow-data-today/)
-  assert.doesNotMatch(code, /--ow-primary\b/)
-})
-
-test("Tailwind 任意值 var() 带类型标注", () => {
-  assert.equal(source.match(/(?:text|border)-\[(?!color:)var\(/g), null)
-  assert.equal(source.match(/font-\[(?!family-name:)var\(/g), null)
-})
-
-// ── A8-B3（裁决 9 · 原型模板 2273–2291）· 地址条 compact 档 ──
-// 会话侧开栏那一档窄工具条：条 34 / 无前进钮 / 地址位 26 pill / 载入转圈进 pill /
-// 右端 24 查找钮。40 高完整档（独立预览窗、内容区整屏）必须逐字不动 —— 上面那批断言看门。
-
-test("compact 档：条 34 高由类给（内联高度只留给默认档，否则压掉类规则）", () => {
-  assert.match(source, /compact\?: boolean/)
-  assert.match(source, /"web-preview-shell flex flex-col/)
-  assert.match(source, /compact && "web-preview-shell--compact"/)
-  assert.match(source, /style=\{compact \? undefined : \{ height: "var\(--ow-h-lg\)" \}\}/)
-  assert.match(styles, /\.web-preview-shell--compact \[data-ow-part="toolbar"\] \{ height: 34px; \}/)
-  assert.match(
-    styles,
-    /\.web-preview-shell--compact \[data-ow-part="nav-group"\] > button,[\s\S]*?\{[^}]*width: 24px; min-width: 24px; height: 24px;[^}]*border-radius: var\(--ow-radius-2xs\);/,
-  )
-})
-
-test("compact 档：去前进钮，只留后退 ＋ 重载", () => {
-  assert.match(
-    source,
-    /\{!compact && \(\s*<Button[\s\S]*?icon=\{<ChevRight aria-hidden="true" \/>\}[\s\S]*?aria-label="前进"/,
-  )
-  // 后退与重载不带条件，两档都在
-  assert.match(source, /icon=\{<ChevLeft aria-hidden="true" \/>\}[\s\S]{0,240}aria-label="后退"/)
-  assert.match(source, /icon=\{loading \? <Close aria-hidden="true" \/> : <Refresh aria-hidden="true" \/>\}/)
-})
-
-test("compact 档地址位＝26 高 pill，件仍是 Field（hover/focus 三态照旧由字段壳给）", () => {
-  assert.match(source, /className="web-preview-shell__url min-w-0 flex-1/)
-  assert.match(
-    styles,
-    /\.web-preview-shell--compact \.web-preview-shell__url \[data-ow-part="shell"\] \{[^}]*height: 26px;[^}]*border-radius: var\(--ow-radius-xs\);/s,
-  )
-  assert.match(
-    styles,
-    /\.web-preview-shell--compact \.web-preview-shell__url input \{[^}]*font-size: var\(--ow-fs-caption\);[^}]*color: var\(--ow-text-2\);/s,
-  )
-  // pill 的底与边仍取 Field 的 --ow-input-bg / --ow-input-border：本件不复写边框色（§6 字段壳单点）
-  const pill =
-    styles.match(/\.web-preview-shell--compact \.web-preview-shell__url \[data-ow-part="shell"\] \{[^}]*\}/s)?.[0] ?? ""
-  assert.doesNotMatch(pill, /background|border-color|box-shadow/)
-})
-
-test("compact 档：https 才亮 --ow-success 锁形前缀（§4 状态极，绿只说安全这一件事）", () => {
-  assert.match(source, /const securePrefix = \/\^https:\/i\.test\(url\) \?/)
-  assert.match(source, /text-\[color:var\(--ow-success\)\]/)
-  assert.match(source, /<Lock aria-hidden="true" \/>/)
-  assert.match(source, /prefix=\{urlPrefix \?\? \(compact \? securePrefix : <Globe aria-hidden="true" \/>\)\}/)
-})
-
-test("compact 档：载入指示收进 pill 尾部的 12 转圈，通栏 ProgressBar 只留给默认档", () => {
-  assert.match(
-    source,
-    /compact && loading \? <span className="web-preview-shell__url-spin" aria-hidden="true" \/> : urlSuffix/,
-  )
-  assert.match(source, /\{loading && !compact && <ProgressBar indeterminate/)
-  assert.match(
-    styles,
-    /\.web-preview-shell__url-spin \{[^}]*width: 12px; height: 12px;[^}]*border-top-color: transparent;[^}]*border-radius: var\(--ow-radius-pill\);[^}]*animation: ow-spin var\(--ow-dur-spin-fast\) linear infinite;/s,
-  )
-  // §9：自转匀速，但 reduced-motion 下要停
-  assert.match(
-    styles,
-    /@media \(prefers-reduced-motion: reduce\) \{ \.web-preview-shell__url-spin \{ animation: none; \} \}/,
-  )
-  // 不自造 keyframes：复用 §9 唯一转子帧
-  assert.doesNotMatch(styles, /@keyframes web-preview-shell__url-spin/)
-})
-
-test("compact 档：右端 24 方查找钮（查找条本体仍走 subToolbar 插槽）", () => {
-  assert.match(source, /onFind\?: \(\) => void/)
-  assert.match(
-    source,
-    /\{onFind && \(\s*<Button[\s\S]*?data-ow-part="find"[\s\S]*?icon=\{<Search aria-hidden="true" \/>\}[\s\S]*?aria-label="查找"/,
-  )
-  assert.match(styles, /\[data-ow-part="toolbar"\] > \[data-ow-part="find"\]/)
-  assert.match(source, /\{subToolbar\}/)
-})

package/src/components/domain/browser/WebPreviewShell/index.tsx

@@ -1,324 +0,0 @@
-"use client"
-
-import { type ReactNode, useCallback, useEffect, useState } from "react"
-import { useImeAwareEnter } from "../../../../hooks/useImeAwareEnter"
-import { cn } from "../../../../lib/utils"
-import { ChevLeft, ChevRight, Close, Globe, Lock, Refresh, Search } from "../../../composite/Icons"
-import { Button } from "../../../primitives"
-import { EmptyState } from "../../../primitives/EmptyState"
-import { Field } from "../../../primitives/Field"
-import { InlineMessage } from "../../../primitives/InlineMessage"
-import { ProgressBar } from "../../../primitives/ProgressBar"
-
-/**
- * WebPreviewShell —— 网页预览「壳」（蓝图批次④：WebPreview 族 7 件收敛为
- * Shell / Nav / Console 三件骨架中的第一件）。
- *
- * 壳＝**地址栏 ＋ 工具组 ＋ 内容区 ＋ 状态**，不含标签条（那是 `WebPreviewNav`）
- * 也不含控制台（那是 `WebPreviewConsole`）。
- *
- * 归口（旧七件 → 新三件）：
- *  - `BrowserNavBarView`        → 本件的前进/后退/刷新组 ＋ 地址栏 ＋ `actions` 工具组；
- *  - `BrowserLoadErrorView`     → 本件的 `error` 态（InlineMessage 一句人话 ＋ mono 详情 ＋ 重载）；
- *  - `BrowserMoreMenuView`      → `actions` 里的 Menu 配方；
- *  - `BrowserFindBarView`
- *    / `BrowserDeviceToolbarView` → `subToolbar` 插槽配方（贴在工具栏下的第二条）；
- *  - `BrowserAnnotationPopupView` → Popover 配方，挂在 `children` 上，不属壳骨架；
- *  - `BrowserImportDialogView`  → Dialog 配方，不属壳骨架；
- *  - `BrowserTabBarView`        → `WebPreviewNav`。
- *
- * DS 口径：
- *  - 地址栏走 **Field 原语语法**（三态边框 rest→hover→focus，focus 环挂 focus-within），
- *    前缀是站点图标插槽、后缀留给 `urlSuffix`（证书/复制/快捷键 Keycap）；
- *    地址本身是 §7 读数 → mono ＋ tabular-nums。
- *  - 工具栏高度 40（`--ow-h-lg`），图标按钮 28×28（`--ow-h-sm`，§7 度量表）。
- *  - §6 容器三态：空＝`EmptyState` 信标母题；载＝顶部细进度条（`--ow-progress-*`，
- *    无 shimmer）；错＝`InlineMessage` 一句人话 ＋ mono ≤2 行详情。
- *  - R3 中性件：壳里没有信标/荧黄元素——`--ow-primary` 在暗档就是荧黄，所以「模式开着」
- *    的工具钮一律用 `--ow-current-bg` ＋ 文字标签双编码，不取 primary。
- *
- * **`compact`（A8-B3 · 原型模板 2273–2291）**：会话侧开栏那一档窄工具条——
- * 条 34 高、**去掉前进钮**（只留后退 ＋ 重载，各 24 方）、地址位收成 26 高 pill
- * （`--ow-surface-2` 底 ＋ 1px 边 ＋ `--ow-radius-xs`，仍是可编辑的 `Field`：静息就是
- * 一颗 pill，hover / focus 才升起字段三态与 focus 环）、https 时前缀换成
- * `--ow-success` 锁形、载入指示从工具栏下沿那条 `ProgressBar` 挪进 pill 尾部的 12 转圈、
- * 右端一颗 24 方查找钮（`onFind`，查找条本体仍走 `subToolbar` 插槽）。
- * 40 高完整版（独立预览窗 / 内容区整屏）逐字不动。窄档那几个高度（34 / 26 / 24）不在
- * §7 控件高表上，逐条记名进 ds2-allowlist；样式在 desktop-surfaces.css 的
- * `.web-preview-shell--compact` 段。
- */
-
-export interface WebPreviewShellProps {
-  /** 当前地址（受控）。空串＝空态。 */
-  url?: string
-  /** 提交地址栏（回车）。裸域名由本件补 https://。 */
-  onNavigate?: (url: string) => void
-  canGoBack?: boolean
-  canGoForward?: boolean
-  onGoBack?: () => void
-  onGoForward?: () => void
-  /** 载入中：刷新钮变停止钮，工具栏下沿走一条不定长进度条。 */
-  loading?: boolean
-  onReload?: () => void
-  onStop?: () => void
-  /** 地址栏前缀插槽（站点图标/安全标识），默认地球图标。 */
-  urlPrefix?: ReactNode
-  /** 地址栏后缀插槽（复制/证书/快捷键 Keycap）。 */
-  urlSuffix?: ReactNode
-  /** 地址栏右侧工具组：更多菜单、批注、设备模拟等按钮。 */
-  actions?: ReactNode
-  /** 工具栏下的第二条：查找条 / 设备模拟条。 */
-  subToolbar?: ReactNode
-  /** 内容（webview / iframe / 文件预览适配器）。 */
-  children?: ReactNode
-  /** 加载失败一句人话；非空时盖住内容区。 */
-  error?: string
-  /** 失败技术详情，mono ≤2 行。 */
-  errorDetail?: string
-  /** 失败时的重试文案，默认「重新加载」。 */
-  retryLabel?: string
-  onRetry?: () => void
-  /** 无地址时的空态一句话。 */
-  emptyMessage?: ReactNode
-  /** 底部区域（`WebPreviewConsole`）。 */
-  footer?: ReactNode
-  /**
-   * 窄档（会话侧开栏）：条 34、无前进钮、地址位 26 高 pill、载入转圈进 pill、右端查找钮。
-   * 见文件头「compact」段。默认 false ＝ 40 高完整档。
-   */
-  compact?: boolean
-  /** 查找钮（compact 档右端 24 方放大镜）。不传就不渲染这颗钮。 */
-  onFind?: () => void
-  /** 自绘卡片立面。坐进 PreviewDialog / 应用主区时传 false。 */
-  chrome?: boolean
-  className?: string
-}
-
-/* 图标钮一律走 Button 的 `icon` 槽（icon-only ＝ §7 28×28 方，图形尺寸由原语补），
-   本件不再手补 svg 尺寸类——一件里只留一套图标钮写法。 */
-const NAV_BTN =
-  "shrink-0 text-[color:var(--ow-text-3)] hover:text-[color:var(--ow-text)] disabled:text-[color:var(--ow-disabled-text)] disabled:bg-transparent"
-
-/** 裸域名补协议：`orbit.work` → `https://orbit.work`；已带 scheme 的原样透传。 */
-export function normalizePreviewUrl(input: string): string {
-  const trimmed = input.trim()
-  if (!trimmed) return ""
-  return /^[a-z][a-z0-9+.-]*:/i.test(trimmed) ? trimmed : `https://${trimmed}`
-}
-
-export function WebPreviewShell({
-  url = "",
-  onNavigate,
-  canGoBack = false,
-  canGoForward = false,
-  onGoBack,
-  onGoForward,
-  loading = false,
-  onReload,
-  onStop,
-  urlPrefix,
-  urlSuffix,
-  actions,
-  subToolbar,
-  children,
-  error,
-  errorDetail,
-  retryLabel = "重新加载",
-  onRetry,
-  emptyMessage = "输入网址开始预览。",
-  footer,
-  compact = false,
-  onFind,
-  chrome = true,
-  className = "",
-}: WebPreviewShellProps) {
-  const [draft, setDraft] = useState(url)
-  const [editing, setEditing] = useState(false)
-  const { isImeEnter, onCompositionEnd, onCompositionStart } = useImeAwareEnter()
-
-  // 外部导航（点链接、前进后退）时把地址栏同步回来——正在输入时不抢。
-  useEffect(() => {
-    if (!editing) setDraft(url)
-  }, [url, editing])
-
-  /* https 才亮锁：绿只在「连接是安全的」这一件事上说话（§4 状态极之一），
-     http / about:blank / 空地址一律不给前缀图标（原型 2283 的 sc-if webSecure）。 */
-  const securePrefix = /^https:/i.test(url) ? (
-    <span className="inline-flex text-[color:var(--ow-success)]">
-      <Lock aria-hidden="true" />
-    </span>
-  ) : null
-
-  const submit = useCallback(() => {
-    const target = normalizePreviewUrl(draft)
-    if (!target) return
-    onNavigate?.(target)
-    setEditing(false)
-  }, [draft, onNavigate])
-
-  return (
-    <div
-      data-slot="web-preview-shell"
-      data-ow-chrome={chrome ? undefined : "none"}
-      className={cn(
-        "web-preview-shell flex flex-col w-full h-full min-h-0 bg-[var(--ow-bg)] overflow-hidden",
-        compact && "web-preview-shell--compact",
-        chrome && "[border-radius:var(--ow-radius-card)] border border-[color:var(--ow-border-strong)]",
-        className,
-      )}
-    >
-      {/* 工具栏：导航组 · 地址栏 · 工具组。高度 40 = --ow-h-lg（§7 度量表）；
-          compact 档 34 高由 .web-preview-shell--compact 段给（内联样式会压掉类规则，
-          所以这里必须让位，不能写成三目内联值）。 */}
-      <div
-        data-ow-part="toolbar"
-        className="flex shrink-0 items-center gap-1 border-b border-[color:var(--ow-border)] px-2"
-        style={compact ? undefined : { height: "var(--ow-h-lg)" }}
-      >
-        <div data-ow-part="nav-group" className="flex shrink-0 items-center gap-0.5">
-          <Button
-            type="button"
-            variant="ghost"
-            size="sm"
-            className={NAV_BTN}
-            icon={<ChevLeft aria-hidden="true" />}
-            disabled={!canGoBack}
-            onClick={onGoBack}
-            title="后退"
-            aria-label="后退"
-          />
-          {/* compact 档只留「后退 ＋ 重载」两颗（原型 2275/2278 没有前进钮）：
-              38% 窄栏里省下的 24px 直接给地址位。 */}
-          {!compact && (
-            <Button
-              type="button"
-              variant="ghost"
-              size="sm"
-              className={NAV_BTN}
-              icon={<ChevRight aria-hidden="true" />}
-              disabled={!canGoForward}
-              onClick={onGoForward}
-              title="前进"
-              aria-label="前进"
-            />
-          )}
-          <Button
-            type="button"
-            variant="ghost"
-            size="sm"
-            className={NAV_BTN}
-            icon={loading ? <Close aria-hidden="true" /> : <Refresh aria-hidden="true" />}
-            onClick={loading ? onStop : onReload}
-            title={loading ? "停止" : "刷新"}
-            aria-label={loading ? "停止" : "刷新"}
-          />
-        </div>
-
-        {/* 地址栏＝Field 语法：字段壳给三态边框与 focus 环，内部值走 §7 读数 mono。
-            compact 档只换皮不换件：静息是 26 高 pill（--ow-surface-2 底 ＋1px 边），
-            hover / focus 仍由 Field 自己升三态与 focus 环——「只读 pill」是原型镜像的
-            限制，不是设计意图（openQuestion 5 的折中）。 */}
-        <Field
-          data-ow-part="url"
-          className="web-preview-shell__url min-w-0 flex-1 font-[family-name:var(--ow-font-mono)] [font-variant-numeric:tabular-nums]"
-          value={editing ? draft : url}
-          onChange={(next) => {
-            setEditing(true)
-            setDraft(next)
-          }}
-          onFocus={(event) => {
-            const input = event.currentTarget
-            setEditing(true)
-            setDraft(url)
-            window.requestAnimationFrame(() => input.select())
-          }}
-          onBlur={() => setEditing(false)}
-          onCompositionStart={onCompositionStart}
-          onCompositionEnd={onCompositionEnd}
-          onKeyDownCapture={(event) => {
-            event.stopPropagation()
-            if (isImeEnter(event)) return
-            if (event.key === "Enter") {
-              event.preventDefault()
-              submit()
-            }
-            if (event.key === "Escape") {
-              event.preventDefault()
-              setEditing(false)
-              setDraft(url)
-            }
-          }}
-          prefix={urlPrefix ?? (compact ? securePrefix : <Globe aria-hidden="true" />)}
-          suffix={
-            /* 载入指示：compact 档收进 pill 尾部的 12 转圈（原型 2287），
-               不再占工具栏下沿那条整幅 ProgressBar——窄栏里一条通栏进度线太吵。 */
-            compact && loading ? <span className="web-preview-shell__url-spin" aria-hidden="true" /> : urlSuffix
-          }
-          placeholder="输入网址"
-          aria-label="地址栏"
-        />
-
-        {onFind && (
-          <Button
-            type="button"
-            variant="ghost"
-            size="sm"
-            className={NAV_BTN}
-            data-ow-part="find"
-            icon={<Search aria-hidden="true" />}
-            onClick={onFind}
-            title="在页面中查找"
-            aria-label="查找"
-          />
-        )}
-
-        {actions && (
-          <div data-ow-part="actions" className="flex shrink-0 items-center gap-0.5">
-            {actions}
-          </div>
-        )}
-      </div>
-
-      {/* 载入进度：贴工具栏下沿的不定长条。复用 ProgressBar 原语——轨/条取
-          --ow-progress-*（§4 进度＝墨/纸，永不荧黄），段循环走 --ow-ease-beacon，
-          reduced-motion 由原语自己停。 */}
-      {loading && !compact && <ProgressBar indeterminate size="sm" aria-label="页面加载中" className="shrink-0" />}
-
-      {subToolbar}
-
-      <div data-ow-part="body" className="relative flex min-h-0 flex-1 flex-col">
-        {error ? (
-          <div data-ow-part="error" className="flex min-h-0 flex-1 items-center justify-center p-8">
-            <InlineMessage
-              variant="error"
-              title="这个页面没加载出来"
-              detail={errorDetail}
-              action={
-                onRetry ? (
-                  <Button type="button" variant="secondary" size="sm" onClick={onRetry}>
-                    {retryLabel}
-                  </Button>
-                ) : undefined
-              }
-            >
-              {error}
-            </InlineMessage>
-          </div>
-        ) : url ? (
-          children
-        ) : (
-          /* 空/占位体（A8-B4 · 原型模板 2303–2310）：`--ow-mat` 占位地 ＋ 24 内距，
-             母题按原型放到 48×30（`markSize={48}`——md 档默认的 40 正是裁决 6 说的「太小」），
-             一句话量度 360、仍是 --ow-fs-ui / --ow-text-2。EmptyState md 档自带的
-             px-4 py-8 在这里让位给外框的 24（`p-0`），母题与句子之间的 12 由 md 档的 gap 给。
-             两档同用一块——占位体是「webview 落不下来时看见的那块地」，与条高无关。 */
-          <div data-ow-part="empty" className="flex min-h-0 flex-1 items-center justify-center bg-[var(--ow-mat)] p-6">
-            <EmptyState message={emptyMessage} markSize={48} className="max-w-[360px] p-0" />
-          </div>
-        )}
-      </div>
-
-      {footer}
-    </div>
-  )
-}

package/src/components/domain/browser/index.ts

@@ -1,45 +0,0 @@
-/* 预览域 · WebPreview 族（蓝图批次④）
- *
- * 7 件旧 Browser*View 已收敛为三件骨架：
- *   WebPreviewShell   地址栏（Field 语法）＋ 工具组 ＋ 内容区 ＋ 载/错/空三态
- *   WebPreviewNav     tab 条
- *   WebPreviewConsole 终端语境控制台（--ow-term-* / --ow-ansi-*）
- *
- * 旧七件的去向（各自文件头有 @deprecated 与归口说明）：
- *   BrowserNavBarView        → Shell 工具栏
- *   BrowserTabBarView        → WebPreviewNav（原地改名，只留薄兼容导出）
- *   BrowserLoadErrorView     → Shell 的 error 态
- *   BrowserMoreMenuView      → Shell 的 actions 工具组配方
- *   BrowserFindBarView       → Shell 的 subToolbar 插槽配方
- *   BrowserDeviceToolbarView → Shell 的 subToolbar 插槽配方
- *   BrowserAnnotationPopupView / BrowserImportDialogView
- *                            → Popover / Dialog 配方，不属三件骨架
- */
-
-// ─── 三件骨架 ───
-export * from "./WebPreviewShell"
-export * from "./WebPreviewNav"
-export * from "./WebPreviewConsole"
-
-/* ── A8-B6（原型模板 2340–2342 / 2344–2368）· 侧开栏后两类页签体 ────────────────
- * 会话侧开栏有四类页签：网页（WebPreviewShell compact）· 文件（files/FileBrowser）·
- * 终端 · 子任务。后两类没有现成件，这里各出一件**只画画面**的：
- *   TerminalPane  常暗域终端画面（配方与 WebPreviewConsole 同源，见其文件头）
- *   SubAgentPane  单个子任务的转录时间轴（轨道与节点同主会话脊柱，小一号）
- * 能力（PTY / 子智能体调度）一律在宿主。 */
-export * from "./TerminalPane"
-export * from "./SubAgentPane"
-
-// ─── 预览壳（模态） ───
-export * from "./WebPreviewDialog"
-
-// ─── 旧件：配方 / @deprecated 兼容导出 ───
-export * from "./BrowserAnnotationPopupView"
-export * from "./BrowserDeviceToolbarView"
-export * from "./BrowserFindBarView"
-export * from "./BrowserImportDialogView"
-export * from "./BrowserLoadErrorView"
-export * from "./BrowserMoreMenuView"
-export * from "./BrowserNavBarView"
-export * from "./BrowserTabBarView"
-export * from "./WebPreview"

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

@@ -1,107 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react"
-import { AuthorizationCard } from "../AuthorizationCard"
-import { ExecutionSummary } from "../ExecutionSummary"
-import { Thinking } from "../Thinking"
-import { ToolCallRow } from "../ToolCallRow"
-import { AgentLoopSegment } from "./index"
-
-const meta = {
-  title: "Chat/AgentLoopSegment",
-  component: AgentLoopSegment,
-  parameters: {
-    layout: "padded",
-  },
-  tags: ["autodocs"],
-  decorators: [
-    (Story) => (
-      <div style={{ maxWidth: 752 }}>
-        <Story />
-      </div>
-    ),
-  ],
-} satisfies Meta<typeof AgentLoopSegment>
-
-export default meta
-type Story = StoryObj<typeof meta>
-
-const TOOLS = [
-  { name: "read_file", args: "packages/ui/styles/tokens.css", elapsed: "0.3s", out: "760 行 · 命中 --ow-warning-tint" },
-  { name: "grep", args: '"--ow-beacon" packages/ui/src', elapsed: "0.9s", out: "11 处命中" },
-]
-
-const bodyStyle = {
-  fontSize: "var(--ow-fs-body)",
-  lineHeight: "var(--ow-lh-body)",
-  color: "var(--ow-text)",
-} as const
-
-/**
- * 已完成的一段：思考行（静止，text-3 单色不占极）→ 执行摘要卡 → 返回正文。
- *
- * R4 · 2026-09-04：段内三层「可展开的步骤」用同一枚 chevron——思考行（推理正文，缺省折叠）、
- * 摘要卡头行、明细行（输入 / 输出）。原型口径见 template.dc.html:1196-1217 与 1219-1250。
- */
-export const Done: Story = {
-  render: () => (
-    <AgentLoopSegment>
-      <Thinking variant="inline" spinning={false} label="先把组件库里已有的零件数清楚，再决定补哪几件。">
-        <p style={{ margin: "0 0 6px" }}>chat 域现在 22 件，其中 3 件是兼容层，不算新形。</p>
-        <p style={{ margin: "0 0 6px" }}>原型 1219-1250 那一段要的执行摘要卡还没有，先补它。</p>
-        <p style={{ margin: 0 }}>工具行要挂进摘要卡的展开体，顺序反了要返工。</p>
-      </Thinking>
-      <ExecutionSummary label="核对组件库现状" steps={6} duration="2m06s" tools={TOOLS} />
-      <div style={bodyStyle}>聊天域现有 22 件组件，缺的是执行摘要卡、跑动中的工具行、授权卡这三件。</div>
-    </AgentLoopSegment>
-  ),
-}
-
-/** 跑动中的一段：思考行卫星让极（toolRunning）→ 工具行列（gap 6）里最后那条占状态极 */
-export const Running: Story = {
-  render: () => (
-    <AgentLoopSegment>
-      <Thinking variant="inline" toolRunning label="按原型模板逐值核对三件缺件的尺寸与 token。" />
-      <div style={{ display: "flex", flexDirection: "column", gap: 6 }}>
-        <ToolCallRow name="read_file" args="proto/template.dc.html#L1219-L1250" state="done" elapsed="0.4s" />
-        <ToolCallRow name="grep" args='"--ow-warning-tint" packages/ui/styles' />
-      </div>
-    </AgentLoopSegment>
-  ),
-}
-
-/** 等待授权的一段：思考行静止 → 待授权工具行（中性 --ow-pending）→ 授权卡行内停驻 */
-export const AwaitingAuthorization: Story = {
-  render: () => (
-    <AgentLoopSegment>
-      <Thinking variant="inline" spinning={false} label="要把核对结果写成文件，需要你放行一次写入。" />
-      <div style={{ display: "flex", flexDirection: "column", gap: 6 }}>
-        <ToolCallRow name="write_file" args="~/Documents/orbit/report.md" state="pending" />
-      </div>
-      <AuthorizationCard source="Filesystem 连接器" scope="写入 ~/Documents/orbit/report.md，本次会话有效。" />
-    </AgentLoopSegment>
-  ),
-}
-
-/** 多段叠加：段之间不加容器，只靠 10px 节奏与「每段一张执行摘要卡」分辨（裁决 15） */
-export const MultipleSegments: Story = {
-  render: () => (
-    <div style={{ display: "flex", flexDirection: "column", gap: 10 }}>
-      <AgentLoopSegment>
-        <Thinking variant="inline" spinning={false} label="先把组件库里已有的零件数清楚。" />
-        <ExecutionSummary label="核对组件库现状" steps={6} duration="2m06s" tools={TOOLS} />
-        <div style={bodyStyle}>聊天域现有 22 件组件，三件缺件确认要补。</div>
-      </AgentLoopSegment>
-      <AgentLoopSegment>
-        <Thinking variant="inline" spinning={false} label="再按原型模板把每一件的尺寸逐值抄下来。" />
-        <ExecutionSummary label="逐值抄原型尺寸" steps={9} duration="4m12s" tools={TOOLS} />
-        <div style={bodyStyle}>执行摘要卡、工具行、授权卡三件的尺寸与 token 已对齐原型。</div>
-      </AgentLoopSegment>
-      <AgentLoopSegment>
-        <Thinking variant="inline" toolRunning label="正在补 story 与源码断言。" />
-        <div style={{ display: "flex", flexDirection: "column", gap: 6 }}>
-          <ToolCallRow name="write_file" args="ExecutionSummary.stories.tsx" state="done" elapsed="1.2s" />
-          <ToolCallRow name="run_tests" args="pnpm test --filter chat" />
-        </div>
-      </AgentLoopSegment>
-    </div>
-  ),
-}