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

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

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

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