@orbit-work/ui 0.1.0

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

@@ -0,0 +1,351 @@
+"use client"
+
+import { useEffect, useLayoutEffect, useRef, useState } from "react"
+import { createPortal } from "react-dom" // ui-imports-guard-disable-line
+import { type ShortcutPlatform, formatShortcut } from "../../../../lib/shortcut"
+import * as I2 from "../../../composite/Icons"
+import { Tooltip } from "../../../composite/Tooltip"
+import { Button } from "../../../primitives"
+import { type MenuItem, MenuSurface } from "../../../primitives/Menu"
+
+/**
+ * WebPreviewNav —— 网页预览「标签条」（蓝图批次④：WebPreview 族 7 件收敛为
+ * Shell / Nav / Console 三件骨架中的第二件）。
+ *
+ * Nav ＝ **tab 条本体**：标签、favicon、关闭钮、右键菜单（关闭/关闭其他）、
+ * 新建下拉、宽窄与折叠开关。地址栏与工具组在 `WebPreviewShell`，控制台在
+ * `WebPreviewConsole`。
+ *
+ * 归口：`BrowserTabBarView` 就是本件（P5 原地改名，行为与 DOM 契约逐字保留；
+ * 旧名以 `@deprecated` 兼容导出留在 `../BrowserTabBarView`）。
+ *
+ * 样式在 `styles/desktop-surfaces.css` 的 `.browser-tabbar*` / `.browser-tab*` 段
+ * （**底线式条**：静息全透明只一排字，选中＝脚下 2px `--ow-text` 底线＋文字提亮＋500
+ * 字重；图标模式压缩、pop 档弹层行）。Chrome 式曲边融合页签（48 条带 ＋ 8px 凹角
+ * radial-gradient）在去痕轮已整套退役——§7 页签只有底线式一套。
+ *
+ * **`density="panel"`（A8-B2 · 原型模板 2251–2271）**：只给会话侧开栏用的第二形制——
+ * 条 36 高，页签是 26 高圆角胶囊、**选中＝底色换成面板体同色 `--ow-surface` ＋500 字重**
+ * （与面板体连成一片，不再画底线）、无 favicon / 类别图标位、关闭钮 16 方常显；`+` 钮
+ * 24 方、移进滚动行紧跟末个页签且**直连开一个网页页签**（不弹三项菜单）；右端
+ * 「最大化 / 还原」与「收起右栏」两颗 26 方。这是页签的**文档标签**语义（可关、可新建、
+ * 与面板体同面），与内容区那种分段页签不是一回事——§7「页签只有底线式一套」为它开的
+ * 例外条文由 COMPONENT-RULES 另批补写。默认档（`density="default"`）逐字不动。
+ * R3 中性件：无信标/荧黄元素。
+ */
+export interface WebPreviewTab {
+  id: string
+  kind: "web" | "terminal" | "file" | "files" | "subagent"
+  title: string
+  url?: string
+  path?: string
+  favicon?: string
+}
+
+export interface WebPreviewNavProps {
+  /**
+   * 形制档：`default` ＝ 内容区那条 40 高底线式条（原样）；
+   * `panel` ＝ 会话侧开栏那条 36 高胶囊条（原型 2251–2271，见文件头）。
+   */
+  density?: "default" | "panel"
+  tabs: WebPreviewTab[]
+  activeTabId: string | null
+  isWide: boolean
+  onSwitchTab: (id: string) => void
+  onCloseTab: (id: string) => void
+  onCloseOtherTabs: (id: string) => void
+  onAddBrowser: () => void
+  onAddTerminal: () => void
+  onAddFiles: () => void
+  onToggleWide: () => void
+  onToggleCollapsed: () => void
+  /**
+   * panel 档「新建浏览器标签」提示里的快捷键按哪个平台渲字形
+   * （R2 · L3-2-8：原来写死 `⌘T`）。受控，缺省 `"mac"` ＝ 改造前的现状。
+   */
+  platform?: ShortcutPlatform
+}
+
+/** 「新建浏览器标签」的快捷键：语义键名存一份，字形按平台现渲。 */
+const ADD_BROWSER_KEYS = ["Mod", "T"] as const
+
+const ADD_TAB_ITEMS: MenuItem[] = [
+  { key: "browser", label: "浏览器", icon: <TabKindIcon kind="web" /> },
+  { key: "terminal", label: "终端", icon: <TabKindIcon kind="terminal" /> },
+  { key: "files", label: "文件", icon: <TabKindIcon kind="files" /> },
+]
+
+export function WebPreviewNav(props: WebPreviewNavProps): React.ReactElement {
+  const panel = props.density === "panel"
+  const [addMenuOpen, setAddMenuOpen] = useState(false)
+  const [contextMenu, setContextMenu] = useState<{ tabId: string; x: number; y: number } | null>(null)
+  const [hoveredTabId, setHoveredTabId] = useState<string | null>(null)
+  const [iconOnly, setIconOnly] = useState(false)
+  // favicon 取不到时（外链 404 / 离线）<img> 只是渲成空盒，placeholder 分支因为
+  // tab.favicon 非空而不触发，图标位就空着。记下失败的，回落到类别图标。
+  const [brokenFavicons, setBrokenFavicons] = useState<ReadonlySet<string>>(() => new Set())
+  const addBtnRef = useRef<HTMLButtonElement>(null)
+  const tabsRef = useRef<HTMLDivElement>(null)
+
+  useLayoutEffect(() => {
+    const tabs = tabsRef.current
+    // panel 档的页签是 flex:0 0 auto ＋ 横向滚（原型 2252），不走「压到只剩图标」那条路；
+    // 何况那一档本就没有图标位，压缩后只会剩一颗关闭钮。
+    if (!tabs || panel || props.tabs.length === 0) {
+      setIconOnly(false)
+      return undefined
+    }
+    const measure = () => {
+      const firstTab = tabs.querySelector<HTMLElement>(".browser-tab")
+      const tabWidth = firstTab?.getBoundingClientRect().width ?? 180
+      setIconOnly((current) => {
+        const next = current ? tabWidth < 60 : tabWidth < 54
+        return current === next ? current : next
+      })
+    }
+    measure()
+    const observer = typeof ResizeObserver === "undefined" ? null : new ResizeObserver(measure)
+    observer?.observe(tabs)
+    return () => observer?.disconnect()
+  }, [panel, props.tabs.length])
+  useEffect(() => {
+    if (!addMenuOpen) return undefined
+    const handler = (event: MouseEvent) => {
+      const target = event.target as Node
+      if (addBtnRef.current?.contains(target)) return
+      const dropdown = Array.from(document.querySelectorAll(".ow-dropdown")).pop()
+      if (dropdown?.contains(target)) return
+      setAddMenuOpen(false)
+    }
+    document.addEventListener("mousedown", handler)
+    return () => document.removeEventListener("mousedown", handler)
+  }, [addMenuOpen])
+
+  const handleAdd = (key: string) => {
+    setAddMenuOpen(false)
+    if (key === "terminal") props.onAddTerminal()
+    else if (key === "files") props.onAddFiles()
+    else props.onAddBrowser()
+  }
+
+  const handleContextAction = (key: string) => {
+    const tabId = contextMenu?.tabId
+    setContextMenu(null)
+    if (!tabId) return
+    if (key === "close-others") props.onCloseOtherTabs(tabId)
+    else props.onCloseTab(tabId)
+  }
+
+  /* 「新建」钮一件两处落位：默认档在右侧 actions 组里点开三项下拉；panel 档按原型 2261
+     移进滚动行、紧跟最后一个页签，且点了**直接开一个网页页签**（逻辑 4036 的 addTab('web')）。 */
+  const addTabButton = (
+    <div className="browser-tabbar__add-wrap">
+      <Button
+        ref={addBtnRef}
+        variant="unstyled"
+        type="button"
+        className="browser-tabbar__add"
+        onClick={panel ? props.onAddBrowser : () => setAddMenuOpen((value) => !value)}
+        title={panel ? `新建浏览器标签 ${formatShortcut(ADD_BROWSER_KEYS, props.platform ?? "mac")}` : "新建标签"}
+        aria-label="新建标签"
+        aria-expanded={panel ? undefined : addMenuOpen}
+      >
+        <I2.Plus aria-hidden="true" />
+      </Button>
+      {!panel && addMenuOpen && (
+        <MenuSurface items={ADD_TAB_ITEMS} onSelect={handleAdd} width={140} portal={addBtnRef} />
+      )}
+    </div>
+  )
+
+  return (
+    <div className={`browser-tabbar${panel ? " browser-tabbar--panel" : ""}`}>
+      {/* role="tab" 必须坐在 role="tablist" 里，否则整组 tab 语义无效父上下文。 */}
+      <div ref={tabsRef} role="tablist" className={`browser-tabbar__tabs${iconOnly ? " is-icon-only" : ""}`}>
+        {props.tabs.map((tab) => {
+          const tabTitle = tab.title || tab.url || tab.path || "新标签页"
+          const hasFavicon = tab.kind === "web" && !!tab.favicon && !brokenFavicons.has(tab.id)
+          return (
+            <div
+              key={tab.id}
+              className={`browser-tab${tab.id === props.activeTabId ? " is-active" : ""}${tab.id === hoveredTabId ? " is-hovered" : ""}`}
+              onClick={() => props.onSwitchTab(tab.id)}
+              onMouseEnter={() => setHoveredTabId(tab.id)}
+              onMouseLeave={() => setHoveredTabId(null)}
+              onContextMenu={(event) => {
+                event.preventDefault()
+                setAddMenuOpen(false)
+                setContextMenu({ tabId: tab.id, x: event.clientX, y: event.clientY })
+              }}
+              role="tab"
+              aria-label={tabTitle}
+              aria-selected={tab.id === props.activeTabId}
+            >
+              <Tooltip content={tabTitle} followCursor delay={400} showArrow={false} className="browser-tab__tooltip">
+                {/* panel 档整个图标位不渲染：原型 2254-2259 的页签上只有标题 ＋ 关闭，
+                    没有 favicon / 类别图标（26 高胶囊里再塞 16 图标会把标题挤没）。 */}
+                {!panel && (
+                  <span className={`browser-tab__favicon${hasFavicon ? "" : " browser-tab__favicon--placeholder"}`}>
+                    {hasFavicon ? (
+                      <img
+                        src={tab.favicon}
+                        alt=""
+                        width={16}
+                        height={16}
+                        onError={() =>
+                          setBrokenFavicons((prev) => (prev.has(tab.id) ? prev : new Set(prev).add(tab.id)))
+                        }
+                      />
+                    ) : (
+                      <TabKindIcon kind={tab.kind} />
+                    )}
+                  </span>
+                )}
+                <span className="browser-tab__title">{tab.title || "新标签页"}</span>
+                <Button
+                  variant="unstyled"
+                  className="browser-tab__close"
+                  onClick={(event) => {
+                    event.stopPropagation()
+                    props.onCloseTab(tab.id)
+                  }}
+                  aria-label={`关闭 ${tabTitle}`}
+                >
+                  <I2.Close aria-hidden="true" />
+                </Button>
+              </Tooltip>
+            </div>
+          )
+        })}
+        {panel && addTabButton}
+      </div>
+      <div className="browser-tabbar__actions">
+        {!panel && addTabButton}
+        <Button
+          variant="unstyled"
+          type="button"
+          className="browser-tabbar__add"
+          onClick={props.onToggleWide}
+          title={panel ? "最大化 / 还原" : props.isWide ? "恢复面板宽度" : "展开面板"}
+          aria-label={panel ? "最大化 / 还原" : props.isWide ? "恢复面板宽度" : "展开面板"}
+          aria-pressed={props.isWide}
+        >
+          {/* 默认档的 14 字形逐字保留；panel 档按 §7 图标档走 16（原型 2265 是 15）。 */}
+          <I2.Maximize width={panel ? 16 : 14} height={panel ? 16 : 14} />
+        </Button>
+        <Button
+          variant="unstyled"
+          type="button"
+          className="browser-tabbar__add"
+          onClick={props.onToggleCollapsed}
+          title={panel ? "收起右栏" : "折叠预览面板"}
+          aria-label={panel ? "收起右栏" : "折叠预览面板"}
+        >
+          {/* 收起＝把栏推回右边界：panel 档按原型 2268 用右向 chevron；
+              默认档仍是那颗 PanelSidebar（它折的是内容区里的预览面板，语义不同）。 */}
+          {panel ? <I2.ChevRight width={16} height={16} /> : <I2.PanelSidebar width={14} height={14} />}
+        </Button>
+      </div>
+      {contextMenu && (
+        <BrowserTabContextMenu
+          point={contextMenu}
+          canCloseOthers={props.tabs.length > 1}
+          onClose={() => setContextMenu(null)}
+          onSelect={handleContextAction}
+        />
+      )}
+    </div>
+  )
+}
+
+function BrowserTabContextMenu({
+  point,
+  canCloseOthers,
+  onClose,
+  onSelect,
+}: {
+  point: { x: number; y: number }
+  canCloseOthers: boolean
+  onClose: () => void
+  onSelect: (key: string) => void
+}): React.ReactElement {
+  const menuRef = useRef<HTMLDivElement>(null)
+  const [position, setPosition] = useState<{ left: number; top: number } | null>(null)
+
+  useLayoutEffect(() => {
+    const menu = menuRef.current
+    if (!menu) return
+    const rect = menu.getBoundingClientRect()
+    setPosition({
+      left: Math.max(8, Math.min(point.x, window.innerWidth - rect.width - 8)),
+      top: Math.max(8, Math.min(point.y, window.innerHeight - rect.height - 8)),
+    })
+  }, [point.x, point.y])
+
+  useEffect(() => {
+    const closeOnOutsidePointer = (event: PointerEvent) => {
+      if (!menuRef.current?.contains(event.target as Node)) onClose()
+    }
+    const closeOnKey = (event: KeyboardEvent) => {
+      if (event.key === "Escape") onClose()
+    }
+    document.addEventListener("pointerdown", closeOnOutsidePointer, true)
+    document.addEventListener("keydown", closeOnKey)
+    window.addEventListener("blur", onClose)
+    window.addEventListener("scroll", onClose, true)
+    return () => {
+      document.removeEventListener("pointerdown", closeOnOutsidePointer, true)
+      document.removeEventListener("keydown", closeOnKey)
+      window.removeEventListener("blur", onClose)
+      window.removeEventListener("scroll", onClose, true)
+    }
+  }, [onClose])
+
+  return createPortal(
+    <div
+      ref={menuRef}
+      className="cpop browser-tab-context-menu"
+      style={{
+        left: position?.left ?? -9999,
+        top: position?.top ?? -9999,
+        visibility: position ? "visible" : "hidden",
+      }}
+      role="menu"
+      aria-label="标签页操作"
+      onContextMenu={(event) => event.preventDefault()}
+    >
+      <Button variant="unstyled" className="mi" role="menuitem" onClick={() => onSelect("close")}>
+        <I2.Close />
+        <span>关闭</span>
+      </Button>
+      <Button
+        variant="unstyled"
+        className="mi"
+        role="menuitem"
+        disabled={!canCloseOthers}
+        onClick={() => onSelect("close-others")}
+      >
+        <I2.Layers />
+        <span>关闭其他标签页</span>
+      </Button>
+    </div>,
+    document.body,
+  )
+}
+
+/**
+ * 页签类型图标 —— §7 图标语系单一：一律取 composite/Icons 族（同文件工具组的
+ * I2.Maximize / I2.PanelSidebar、右键菜单的 I2.Close / I2.Layers 同源）。
+ * 原来这里是三枚文件内手绘的 16 网格 svg，一件里两套语系。
+ * 五个 kind 逐一有字形：web=Globe / terminal=Terminal / file=Doc / files=Folder /
+ * subagent=Branch（分支＝从主线分出去的一条支线）。
+ */
+function TabKindIcon({ kind }: { kind: WebPreviewTab["kind"] }): React.ReactElement {
+  if (kind === "terminal") return <I2.Terminal aria-hidden="true" />
+  if (kind === "web") return <I2.Globe aria-hidden="true" />
+  // 子代理是从主线分叉出去的一条支线（同 transcript 的分支语义），给它一枚专属字形；
+  // 原来 file/files/subagent 一律落文件夹，条上分不出子代理页签与文件页签。
+  if (kind === "subagent") return <I2.Branch aria-hidden="true" />
+  if (kind === "file") return <I2.Doc aria-hidden="true" />
+  return <I2.Folder aria-hidden="true" />
+}

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

@@ -0,0 +1,226 @@
+import type { Meta, StoryObj } from "@storybook/react"
+import { useState } from "react"
+import { More } from "../../../composite/Icons"
+import { Button } from "../../../primitives"
+import { Keycap } from "../../../primitives/Keycap"
+import { WebPreviewConsole, type WebPreviewConsoleEntry } from "../WebPreviewConsole"
+import { WebPreviewShell } from "./index"
+
+const meta = {
+  title: "Preview/WebPreviewShell",
+  component: WebPreviewShell,
+  parameters: { layout: "padded" },
+  tags: ["autodocs"],
+} satisfies Meta<typeof WebPreviewShell>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+const FRAME = { height: 420 }
+
+function Page({ title }: { title: string }) {
+  return (
+    <div
+      data-ow-part="demo-page"
+      className="flex h-full w-full items-center justify-center bg-[var(--ow-surface)] text-[color:var(--ow-text-2)]"
+    >
+      {title}
+    </div>
+  )
+}
+
+/** 常规态：地址栏有值、可前进后退、工具组挂一枚更多菜单钮。 */
+export const Default: Story = {
+  args: {
+    url: "https://orbit.work/docs/design-system",
+    canGoBack: true,
+    canGoForward: false,
+  },
+  render: (args) => (
+    <div style={FRAME}>
+      <WebPreviewShell
+        {...args}
+        urlSuffix={<Keycap>⌘L</Keycap>}
+        actions={
+          <Button
+            type="button"
+            variant="ghost"
+            size="sm"
+            icon={<More aria-hidden="true" />}
+            aria-label="更多"
+            title="更多"
+          />
+        }
+      >
+        <Page title="页面内容（webview / iframe 落位）" />
+      </WebPreviewShell>
+    </div>
+  ),
+}
+
+/**
+ * 空态（A8-B4 · 原型模板 2303–2310）：没有地址时走 `--ow-mat` 占位地 ＋ 48×30 品牌信标线稿
+ * （`--ow-empty-mark` 单色，不占极）＋ 360 量度一句话。核对点：底是 mat（比 bg 更沉的占位地），
+ * 母题实测 48×30（此前 md 档只有 40×25，就是裁决 6 说的「空态太小」），句子不超过 360 宽。
+ */
+export const Empty: Story = {
+  args: { url: "" },
+  render: (args) => (
+    <div style={FRAME}>
+      <WebPreviewShell {...args} />
+    </div>
+  ),
+}
+
+/** 载入态：刷新钮换停止钮，工具栏下沿走不定长 ProgressBar（禁 shimmer）。 */
+export const Loading: Story = {
+  args: { url: "https://orbit.work", loading: true },
+  render: (args) => (
+    <div style={FRAME}>
+      <WebPreviewShell {...args}>
+        <Page title="正在加载…" />
+      </WebPreviewShell>
+    </div>
+  ),
+}
+
+/** 错误态：一句人话 ＋ mono 技术详情 ＋ 重试（归口自 BrowserLoadErrorView）。 */
+export const LoadError: Story = {
+  args: {
+    url: "https://orbit.work/missing",
+    error: "服务器没有响应，可能是网络断了。",
+    errorDetail: "ERR_CONNECTION_TIMED_OUT · https://orbit.work/missing",
+  },
+  render: (args) => (
+    <div style={FRAME}>
+      <WebPreviewShell {...args} onRetry={() => {}} />
+    </div>
+  ),
+}
+
+/** 全家桶：Shell ＋ subToolbar 插槽 ＋ 底部 WebPreviewConsole。 */
+export const WithConsole: Story = {
+  args: { url: "https://orbit.work" },
+  render: (args) => {
+    const logs: WebPreviewConsoleEntry[] = [
+      { level: "log", message: "页面就绪，用时 412ms", timestamp: new Date("2026-08-31T14:32:01") },
+      {
+        level: "warn",
+        message: "图片缺少 width/height，布局会抖",
+        source: "hero.tsx:42",
+        timestamp: new Date("2026-08-31T14:32:03"),
+      },
+      {
+        level: "error",
+        message: "Uncaught TypeError: cannot read properties of null",
+        source: "app.js:1187",
+        timestamp: new Date("2026-08-31T14:32:08"),
+      },
+    ]
+    return (
+      <div style={{ height: 520 }}>
+        <WebPreviewShell
+          {...args}
+          subToolbar={
+            <div className="flex shrink-0 items-center gap-2 border-b border-[color:var(--ow-border)] bg-[var(--ow-surface)] px-2 py-1 text-ow-fs-ui text-[color:var(--ow-text-2)]">
+              subToolbar 插槽：查找条 / 设备模拟条落位
+            </div>
+          }
+          footer={<WebPreviewConsole logs={logs} defaultOpen onClear={() => {}} />}
+        >
+          <Page title="页面内容" />
+        </WebPreviewShell>
+      </div>
+    )
+  },
+}
+
+/** 坐进 PreviewDialog / 应用主区时关掉自绘立面。 */
+export const WithoutChrome: Story = {
+  args: { url: "https://orbit.work", chrome: false },
+  render: (args) => (
+    <div
+      style={FRAME}
+      className="border border-[color:var(--ow-border)] [border-radius:var(--ow-radius-card)] overflow-hidden"
+    >
+      <WebPreviewShell {...args}>
+        <Page title="外层立面由壳承担" />
+      </WebPreviewShell>
+    </div>
+  ),
+}
+
+/* ── A8-B3（原型模板 2273–2302）· 会话侧开栏那一档窄工具条 ── */
+
+/** 455 ＝ 38% 档实测栏宽；壳坐在侧开栏里，所以 chrome=false（立面由栏给）。 */
+const PANEL_FRAME = {
+  width: 455,
+  height: 360,
+  display: "flex",
+  border: "1px solid var(--ow-border)",
+  background: "var(--ow-surface)",
+} as const
+
+/**
+ * **compact 档**（右栏地址条）。核对点：工具条 34 高；只有「后退 ＋ 重载」两颗 24 方钮，
+ * **没有前进钮**；地址位是 26 高 pill（`--ow-surface-2` 底 ＋1px 边 ＋ xs 圆角），
+ * https 时前缀是 `--ow-success` 锁形；右端一颗 24 方查找钮。地址仍可编辑——点进去
+ * 才升起 Field 的 focus 三态与 focus 环（静息看上去只是一颗 pill）。两个主题都要看。
+ *
+ * 荧黄：0 处（锁形走 --ow-success，是功能绿不是极色）。
+ */
+export const Compact: Story = {
+  args: { url: "https://orbitwork.pages.dev/pricing", canGoBack: true, compact: true, chrome: false },
+  render: (args) => (
+    <div style={PANEL_FRAME}>
+      <WebPreviewShell {...args} onFind={() => {}}>
+        <Page title="webview 落位" />
+      </WebPreviewShell>
+    </div>
+  ),
+}
+
+/** compact · 载入中：转圈收在 pill 尾部（12 方、--ow-dur-spin-fast 匀速），工具栏下沿没有通栏进度条。 */
+export const CompactLoading: Story = {
+  args: { url: "https://orbitwork.pages.dev/pricing", canGoBack: true, compact: true, chrome: false, loading: true },
+  render: (args) => (
+    <div style={PANEL_FRAME}>
+      <WebPreviewShell {...args} onFind={() => {}}>
+        <Page title="正在加载…" />
+      </WebPreviewShell>
+    </div>
+  ),
+}
+
+/**
+ * compact · 非 https：**不亮锁**（前缀位整个不渲染，不用灰锁冒充），地址位左沿直接是地址。
+ * 查找条本体仍走 `subToolbar` 插槽（原型 2295–2301：26 高输入 ＋ mono 计数 ＋22 方关闭），
+ * 那是查找条自己的活，壳这里只出右端那颗 24 方查找钮。
+ */
+export const CompactInsecure: Story = {
+  args: { url: "http://localhost:5173/preview", canGoBack: true, compact: true, chrome: false },
+  render: (args) => (
+    <div style={PANEL_FRAME}>
+      <WebPreviewShell {...args} onFind={() => {}}>
+        <Page title="webview 落位" />
+      </WebPreviewShell>
+    </div>
+  ),
+}
+
+/**
+ * **compact · 空/占位体**（右栏网页页签，A8-B4 · 原型 2303–2310）。窄栏里同一块占位地：
+ * 34 高地址条下面整块 `--ow-mat`，中间 48×30 母题 ＋ 一句 360 量度的话。
+ * 原型这句写的是「webview 无法在镜像中渲染」——那是镜像自己的话；组件库的默认句仍是
+ * 「输入网址开始预览。」，宿主要说别的走 `emptyMessage`。两个主题都要看。
+ *
+ * 荧黄：0 处（母题走 --ow-empty-mark ＝ text-3 单色）。
+ */
+export const CompactEmpty: Story = {
+  args: { url: "", compact: true, chrome: false },
+  render: (args) => (
+    <div style={PANEL_FRAME}>
+      <WebPreviewShell {...args} onFind={() => {}} />
+    </div>
+  ),
+}