@orbit-work/ui 0.1.0

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

@@ -0,0 +1,66 @@
+import type { Meta, StoryObj } from "@storybook/react"
+import { useState } from "react"
+import { BrowserMoreMenuView } from "./index"
+
+const meta = {
+  title: "Browser/BrowserMoreMenuView",
+  component: BrowserMoreMenuView,
+  parameters: {
+    layout: "padded",
+  },
+  tags: ["autodocs"],
+} satisfies Meta<typeof BrowserMoreMenuView>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+  render: () => {
+    const [zoomLevel, setZoomLevel] = useState(0)
+    return (
+      <div style={{ padding: 40 }}>
+        <BrowserMoreMenuView
+          getZoomLevel={() => zoomLevel}
+          onZoomChange={setZoomLevel}
+          onOpenFind={() => console.log("open find")}
+          onOpenDeviceToolbar={() => console.log("open device toolbar")}
+          onScreenshot={() => console.log("screenshot")}
+          onOpenImport={() => console.log("open import")}
+          onClearBrowsingData={async (options) => {
+            console.log("clear data", options)
+            await new Promise((resolve) => setTimeout(resolve, 500))
+          }}
+        />
+      </div>
+    )
+  },
+}
+
+export const WithZoom: Story = {
+  render: () => {
+    const [zoomLevel, setZoomLevel] = useState(2)
+    return (
+      <div style={{ padding: 40 }}>
+        {/* §7 读数：级别与百分比走 mono ＋ tabular-nums，加减时数字不跳宽 */}
+        <div
+          className="font-[family-name:var(--ow-font-mono)] [font-variant-numeric:tabular-nums]"
+          style={{ marginBottom: 16, color: "var(--ow-text-2)", fontSize: 14 }}
+        >
+          当前缩放级别: {zoomLevel} ({Math.round(Math.pow(1.2, zoomLevel) * 100)}%)
+        </div>
+        <BrowserMoreMenuView
+          getZoomLevel={() => zoomLevel}
+          onZoomChange={setZoomLevel}
+          onOpenFind={() => console.log("open find")}
+          onOpenDeviceToolbar={() => console.log("open device toolbar")}
+          onScreenshot={() => console.log("screenshot")}
+          onOpenImport={() => console.log("open import")}
+          onClearBrowsingData={async (options) => {
+            console.log("clear data", options)
+            await new Promise((resolve) => setTimeout(resolve, 500))
+          }}
+        />
+      </div>
+    )
+  },
+}

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

@@ -0,0 +1,268 @@
+"use client"
+
+import { useCallback, useRef, useState } from "react"
+import { Checkbox } from "../../../composite/Controls"
+import * as I2 from "../../../composite/Icons"
+import { Button } from "../../../primitives"
+import { type MenuItem, MenuSurface } from "../../../primitives/Menu"
+
+export interface BrowserClearDataOptions {
+  cookies?: boolean
+  cache?: boolean
+  localStorage?: boolean
+}
+
+export interface BrowserMoreMenuViewProps {
+  getZoomLevel: () => number
+  onZoomChange: (level: number) => void
+  onOpenFind: () => void
+  onOpenDeviceToolbar: () => void
+  onScreenshot: () => void
+  onOpenImport: () => void
+  onClearBrowsingData: (options: BrowserClearDataOptions) => Promise<void>
+}
+
+/**
+ * @deprecated 已归口为 `WebPreviewShell` 的 **`actions` 工具组配方**（蓝图批次④）——
+ * 更多菜单是壳工具组里的一个 Menu 配方，不是独立骨架件。
+ * 用法：`<WebPreviewShell actions={<BrowserMoreMenuView … />}>`。
+ *
+ * 类契约 `.browser-more-menu*` 在 `styles/desktop-surfaces.css` 的 browser 段，P5 已按
+ * DS2 成对改过：菜单坐在 `--ow-popover-bg` 上，所有行改 `--ow-hover-pop`/`--ow-press-pop`
+ * （§5 已知坑：暗档弹层用全局 hover 档对比≈1.0）；清除数据按钮走 `--ow-btn-danger-*` 全态
+ * 而不是统一透明度；缩放读数补 tabular-nums。勾选态（§15 无彩选中、勾 `--ow-control-on`）
+ * 由 `primitives/Checkbox` 承担，不在本段类契约里——原来那条
+ * `__check input[type="checkbox"]{accent-color}` 永不生效（原语渲的是
+ * `<button role="checkbox">`），已随 R2 清除。
+ *
+ * R2 形状收口：缩放加减钮/读数框归 `--ow-radius-action`(8)、清除钮归 `--ow-radius-action`(8)、
+ * 返回行与勾选行归 `--ow-radius-control`(8) 与 MenuSurface 自己的行同形。
+ *
+ * W5 终扫（§5 面中面）：原来外层自建一个 `.browser-more-menu__dropdown` 弹层立面
+ * （popover-bg ＋ 1px 边 ＋ shadow-pop ＋ radius-menu），里面再塞一个自带同套立面的
+ * `MenuSurface` —— 渲出来是双边框双阴影、内层面小一圈且与触发钮脱位。现在整件只有
+ * **一个面**：`MenuSurface` 自己（portal 到 body、`align="end"` 贴触发钮右缘），
+ * 缩放行进它的 `footer` 固定区（上分隔线由原语出），清除面板进它的 `children`。
+ */
+export function BrowserMoreMenuView(props: BrowserMoreMenuViewProps): React.ReactElement {
+  const [open, setOpen] = useState(false)
+  const [zoomLevel, setZoomLevel] = useState(0)
+  const [showClearData, setShowClearData] = useState(false)
+  const [cookies, setCookies] = useState(true)
+  const [cache, setCache] = useState(true)
+  const [localStorage, setLocalStorage] = useState(false)
+  const [clearing, setClearing] = useState(false)
+  const anchorRef = useRef<HTMLDivElement>(null)
+
+  const close = useCallback(() => {
+    setOpen(false)
+    setShowClearData(false)
+  }, [])
+  const toggle = useCallback(() => {
+    setOpen((value) => {
+      if (!value) setZoomLevel(props.getZoomLevel())
+      return !value
+    })
+    setShowClearData(false)
+  }, [props])
+  const changeZoom = useCallback(
+    (next: number) => {
+      setZoomLevel(next)
+      props.onZoomChange(next)
+    },
+    [props],
+  )
+
+  const menuItems: MenuItem[] = [
+    { key: "find", label: "在页面中查找", icon: <I2.Search width={16} height={16} /> },
+    { key: "---", label: "" },
+    { key: "device", label: "显示设备工具栏", icon: <DeviceIcon /> },
+    { key: "screenshot", label: "截取屏幕截图", icon: <I2.Image width={16} height={16} /> },
+    { key: "---", label: "" },
+    { key: "import", label: "导入 Cookie 和密码...", icon: <I2.Download width={16} height={16} /> },
+    { key: "clear-data", label: "清除浏览数据", icon: <I2.Trash width={16} height={16} /> },
+  ]
+
+  const handleSelect = useCallback(
+    (key: string) => {
+      if (key === "clear-data") {
+        setShowClearData(true)
+        return
+      }
+      close()
+      if (key === "find") props.onOpenFind()
+      else if (key === "device") props.onOpenDeviceToolbar()
+      else if (key === "screenshot") props.onScreenshot()
+      else if (key === "import") props.onOpenImport()
+    },
+    [close, props],
+  )
+
+  const zoomRow = (
+    <div className="browser-more-menu__zoom">
+      <span className="browser-more-menu__zoom-label">缩放</span>
+      <div className="browser-more-menu__zoom-controls">
+        <Button
+          variant="unstyled"
+          className="browser-more-menu__zoom-btn"
+          onClick={() => changeZoom(zoomLevel - 1)}
+          aria-label="缩小"
+        >
+          −
+        </Button>
+        <Button
+          variant="unstyled"
+          className="browser-more-menu__zoom-value"
+          onClick={() => changeZoom(0)}
+          title="重置缩放"
+        >
+          {Math.round(Math.pow(1.2, zoomLevel) * 100)}%
+        </Button>
+        <Button
+          variant="unstyled"
+          className="browser-more-menu__zoom-btn"
+          onClick={() => changeZoom(zoomLevel + 1)}
+          aria-label="放大"
+        >
+          ＋
+        </Button>
+        <Button
+          variant="unstyled"
+          className="browser-more-menu__zoom-btn"
+          onClick={() => changeZoom(0)}
+          aria-label="重置缩放"
+          title="重置"
+        >
+          <I2.Refresh width={14} height={14} />
+        </Button>
+      </div>
+    </div>
+  )
+
+  return (
+    <div ref={anchorRef} className="browser-more-menu">
+      <Button
+        variant="unstyled"
+        type="button"
+        className={`browser-navbar__btn${open ? " is-active" : ""}`}
+        onClick={toggle}
+        title="更多"
+        aria-label="更多"
+        aria-expanded={open}
+      >
+        <svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true">
+          <circle cx="8" cy="3" r="1.3" />
+          <circle cx="8" cy="8" r="1.3" />
+          <circle cx="8" cy="13" r="1.3" />
+        </svg>
+      </Button>
+      {open &&
+        (!showClearData ? (
+          <MenuSurface
+            items={menuItems}
+            onSelect={handleSelect}
+            footer={zoomRow}
+            width={240}
+            portal={anchorRef}
+            align="end"
+            onClose={close}
+          />
+        ) : (
+          <MenuSurface
+            role="none"
+            width={240}
+            portal={anchorRef}
+            align="end"
+            contentKey="clear-data"
+            onClose={close}
+            footer={
+              <Button
+                variant="unstyled"
+                className="browser-more-menu__clear-btn"
+                disabled={clearing}
+                onClick={() => {
+                  setClearing(true)
+                  void props
+                    .onClearBrowsingData({ cookies, cache, localStorage })
+                    .then(close)
+                    .finally(() => setClearing(false))
+                }}
+              >
+                {clearing ? "清除中…" : "清除数据"}
+              </Button>
+            }
+          >
+            <ClearDataPanel
+              cookies={cookies}
+              cache={cache}
+              localStorage={localStorage}
+              setCookies={setCookies}
+              setCache={setCache}
+              setLocalStorage={setLocalStorage}
+              onBack={() => setShowClearData(false)}
+            />
+          </MenuSurface>
+        ))}
+    </div>
+  )
+}
+
+/** 清除数据面板：只出内容，立面/内距/footer 分隔线全归 MenuSurface（§5 一件一个面）。 */
+function ClearDataPanel({
+  cookies,
+  cache,
+  localStorage,
+  setCookies,
+  setCache,
+  setLocalStorage,
+  onBack,
+}: {
+  cookies: boolean
+  cache: boolean
+  localStorage: boolean
+  setCookies: (value: boolean) => void
+  setCache: (value: boolean) => void
+  setLocalStorage: (value: boolean) => void
+  onBack: () => void
+}): React.ReactElement {
+  return (
+    <div className="browser-more-menu__clear-panel">
+      <Button variant="unstyled" className="browser-more-menu__back" onClick={onBack}>
+        <I2.ChevLeft width={14} height={14} />
+        <span>清除浏览数据</span>
+      </Button>
+      <div className="browser-more-menu__divider" role="separator" />
+      <label className="browser-more-menu__check">
+        <Checkbox checked={cookies} onChange={() => setCookies(!cookies)} />
+        <span>Cookie 及站点数据</span>
+      </label>
+      <label className="browser-more-menu__check">
+        <Checkbox checked={cache} onChange={() => setCache(!cache)} />
+        <span>缓存的图片和文件</span>
+      </label>
+      <label className="browser-more-menu__check">
+        <Checkbox checked={localStorage} onChange={() => setLocalStorage(!localStorage)} />
+        <span>本地存储数据</span>
+      </label>
+    </div>
+  )
+}
+
+function DeviceIcon(): React.ReactElement {
+  return (
+    <svg
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="1.2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      aria-hidden="true"
+    >
+      <rect x="1" y="3" width="9" height="7" rx="1" />
+      <rect x="6" y="6" width="9" height="7" rx="1" />
+    </svg>
+  )
+}

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

@@ -0,0 +1,149 @@
+import type { Meta, StoryObj } from "@storybook/react"
+import { useState } from "react"
+import { BrowserNavBarView } from "./index"
+
+const meta = {
+  title: "Browser/BrowserNavBarView",
+  component: BrowserNavBarView,
+  parameters: {
+    layout: "padded",
+  },
+  tags: ["autodocs"],
+} satisfies Meta<typeof BrowserNavBarView>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+  render: () => {
+    const [url, setUrl] = useState("https://example.com")
+    const [canGoBack, setCanGoBack] = useState(false)
+    const [canGoForward, setCanGoForward] = useState(false)
+    const [isLoading, setIsLoading] = useState(false)
+    const [commentMode, setCommentMode] = useState(false)
+
+    return (
+      <BrowserNavBarView
+        currentUrl={url}
+        canGoBack={canGoBack}
+        canGoForward={canGoForward}
+        isLoading={isLoading}
+        commentMode={commentMode}
+        moreMenu={<div style={{ width: 32, height: 32 }} />}
+        onGoBack={() => {
+          setCanGoBack(false)
+          setCanGoForward(true)
+        }}
+        onGoForward={() => {
+          setCanGoForward(false)
+          setCanGoBack(true)
+        }}
+        onReload={() => {
+          setIsLoading(true)
+          setTimeout(() => setIsLoading(false), 1000)
+        }}
+        onStop={() => setIsLoading(false)}
+        onNavigate={(newUrl) => {
+          setUrl(newUrl)
+          setCanGoBack(true)
+        }}
+        onToggleCommentMode={() => setCommentMode(!commentMode)}
+      />
+    )
+  },
+}
+
+export const Loading: Story = {
+  render: () => {
+    const [url] = useState("https://example.com/loading")
+    return (
+      <BrowserNavBarView
+        currentUrl={url}
+        canGoBack={true}
+        canGoForward={false}
+        isLoading={true}
+        commentMode={false}
+        moreMenu={<div style={{ width: 32, height: 32 }} />}
+        onGoBack={() => console.log("go back")}
+        onGoForward={() => console.log("go forward")}
+        onReload={() => console.log("reload")}
+        onStop={() => console.log("stop")}
+        onNavigate={(newUrl) => console.log("navigate", newUrl)}
+        onToggleCommentMode={() => console.log("toggle comment")}
+      />
+    )
+  },
+}
+
+export const CommentMode: Story = {
+  render: () => {
+    const [commentMode, setCommentMode] = useState(true)
+    return (
+      <BrowserNavBarView
+        currentUrl="https://example.com"
+        canGoBack={true}
+        canGoForward={true}
+        isLoading={false}
+        commentMode={commentMode}
+        moreMenu={<div style={{ width: 32, height: 32 }} />}
+        onGoBack={() => console.log("go back")}
+        onGoForward={() => console.log("go forward")}
+        onReload={() => console.log("reload")}
+        onStop={() => console.log("stop")}
+        onNavigate={(newUrl) => console.log("navigate", newUrl)}
+        onToggleCommentMode={() => setCommentMode(!commentMode)}
+      />
+    )
+  },
+}
+
+export const WithNavigation: Story = {
+  render: () => {
+    const [url, setUrl] = useState("https://github.com")
+    const [history, setHistory] = useState(["https://github.com"])
+    const [historyIndex, setHistoryIndex] = useState(0)
+
+    const navigate = (newUrl: string) => {
+      const newHistory = [...history.slice(0, historyIndex + 1), newUrl]
+      setHistory(newHistory)
+      setHistoryIndex(newHistory.length - 1)
+      setUrl(newUrl)
+    }
+
+    const goBack = () => {
+      if (historyIndex > 0) {
+        setHistoryIndex(historyIndex - 1)
+        setUrl(history[historyIndex - 1])
+      }
+    }
+
+    const goForward = () => {
+      if (historyIndex < history.length - 1) {
+        setHistoryIndex(historyIndex + 1)
+        setUrl(history[historyIndex + 1])
+      }
+    }
+
+    return (
+      <div style={{ display: "flex", flexDirection: "column", gap: 16 }}>
+        <BrowserNavBarView
+          currentUrl={url}
+          canGoBack={historyIndex > 0}
+          canGoForward={historyIndex < history.length - 1}
+          isLoading={false}
+          commentMode={false}
+          moreMenu={<div style={{ width: 32, height: 32 }} />}
+          onGoBack={goBack}
+          onGoForward={goForward}
+          onReload={() => console.log("reload")}
+          onStop={() => console.log("stop")}
+          onNavigate={navigate}
+          onToggleCommentMode={() => console.log("toggle comment")}
+        />
+        <div style={{ fontSize: 13, color: "var(--ow-text-3)" }}>
+          历史记录: {historyIndex + 1} / {history.length}
+        </div>
+      </div>
+    )
+  },
+}

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

@@ -0,0 +1,156 @@
+"use client"
+
+import { type ReactNode, useCallback, useEffect, useState } from "react"
+import { useImeAwareEnter } from "../../../../hooks/useImeAwareEnter"
+import { ChevLeft, ChevRight, CommentPlus, Refresh, Stop } from "../../../composite/Icons"
+import { TextField } from "../../../composite/NativeControls"
+import { Button } from "../../../primitives"
+
+export interface BrowserNavBarViewProps {
+  currentUrl: string
+  canGoBack: boolean
+  canGoForward: boolean
+  isLoading: boolean
+  commentMode: boolean
+  moreMenu: ReactNode
+  onGoBack: () => void
+  onGoForward: () => void
+  onReload: () => void
+  onStop: () => void
+  onNavigate: (url: string) => void
+  onToggleCommentMode: () => void
+}
+
+/**
+ * @deprecated 已归口 `WebPreviewShell`（蓝图批次④：WebPreview 族 7 件 → Shell / Nav /
+ * Console 三件）。Shell 把前进/后退/刷新组、地址栏（`Field` 原语语法，三态边框与
+ * focus 环由字段壳承担）、工具组做成一条 40 高工具栏，并自带 §6 的载/错/空三态。
+ *
+ * 本件保留是因为桌面端浏览器面还挂着 `.browser-navbar*` 的类契约（样式在
+ * `styles/desktop-surfaces.css` 的 browser 段，P5 已按 DS2 成对改过：hover 走
+ * `--ow-hover`、禁用逐 token、模式开着的按钮不再取会在暗档变荧黄的 `--ow-primary`）。
+ * 新代码一律用 `WebPreviewShell`。
+ *
+ * W5 终扫（图标语系）：后退/前进/刷新/停止四枚原本是就地手写的 16 网格 path、描边 1.5，
+ * 与同一条上取自 `composite/Icons` 的 `CommentPlus`（24 网格 / 1.75）配重对不上。
+ * 四枚一并收进 Icons 族（`ChevLeft` / `ChevRight` / `Refresh` / `Stop`），
+ * 与归口件 `WebPreviewShell` 那条工具栏用的是同一套字形。
+ *
+ * 合并记（origin/main 9.2，2026-09-03）：停止键取研发的 `Stop` 字形（圆角方＋实心方），
+ * 宿主 apps/desktop 的 BrowserNavBarSource.test.mjs 钉着这枚 import 与四枚图标的 JSX 原样
+ * （`<ChevLeft width={16} height={16} />` 等，不带 aria-hidden——钮本身已有 aria-label）；
+ * `WebPreviewShell` 那条仍是 `Close`(X)，两处要不要统一待 Terry 裁。
+ */
+export function BrowserNavBarView({
+  currentUrl,
+  canGoBack,
+  canGoForward,
+  isLoading,
+  commentMode,
+  moreMenu,
+  onGoBack,
+  onGoForward,
+  onReload,
+  onStop,
+  onNavigate,
+  onToggleCommentMode,
+}: BrowserNavBarViewProps): React.ReactElement {
+  const [urlInput, setUrlInput] = useState(currentUrl)
+  const [isEditing, setIsEditing] = useState(false)
+  const { isImeEnter, onCompositionEnd, onCompositionStart } = useImeAwareEnter()
+
+  useEffect(() => {
+    if (!isEditing) setUrlInput(currentUrl)
+  }, [currentUrl, isEditing])
+
+  const submit = useCallback(() => {
+    let targetUrl = urlInput.trim()
+    if (!targetUrl) return
+    if (!/^[a-z][a-z0-9+.-]*:/i.test(targetUrl)) targetUrl = `https://${targetUrl}`
+    onNavigate(targetUrl)
+    setIsEditing(false)
+  }, [onNavigate, urlInput])
+
+  return (
+    <div className="browser-navbar">
+      <div className="browser-navbar__controls">
+        <Button
+          variant="unstyled"
+          className="browser-navbar__btn"
+          disabled={!canGoBack}
+          onClick={onGoBack}
+          title="后退"
+          aria-label="后退"
+        >
+          <ChevLeft width={16} height={16} />
+        </Button>
+        <Button
+          variant="unstyled"
+          className="browser-navbar__btn"
+          disabled={!canGoForward}
+          onClick={onGoForward}
+          title="前进"
+          aria-label="前进"
+        >
+          <ChevRight width={16} height={16} />
+        </Button>
+        <Button
+          variant="unstyled"
+          className="browser-navbar__btn"
+          onClick={isLoading ? onStop : onReload}
+          title={isLoading ? "停止" : "刷新"}
+          aria-label={isLoading ? "停止" : "刷新"}
+        >
+          {isLoading ? <Stop width={16} height={16} /> : <Refresh width={16} height={16} />}
+        </Button>
+      </div>
+      <div className="browser-navbar__url-bar">
+        <TextField
+          unstyled
+          className="browser-navbar__url-input"
+          value={isEditing ? urlInput : currentUrl}
+          onChange={(event) => {
+            setIsEditing(true)
+            setUrlInput(event.target.value)
+          }}
+          onFocus={(event) => {
+            const input = event.currentTarget
+            setIsEditing(true)
+            setUrlInput(currentUrl)
+            window.requestAnimationFrame(() => input.select())
+          }}
+          onBlur={() => setIsEditing(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()
+              setIsEditing(false)
+              setUrlInput(currentUrl)
+            }
+          }}
+          placeholder="输入网址..."
+          aria-label="地址栏"
+        />
+      </div>
+      <Button
+        variant="unstyled"
+        className={`browser-navbar__btn${commentMode ? " browser-navbar__comment-active" : ""}`}
+        onClick={onToggleCommentMode}
+        title={commentMode ? "退出批注模式 (Esc)" : "批注页面"}
+        aria-label={commentMode ? "退出批注模式" : "批注页面"}
+        aria-pressed={commentMode}
+      >
+        <CommentPlus width={16} height={16} />
+        {commentMode && <span className="browser-navbar__comment-label">正在注释</span>}
+      </Button>
+      {moreMenu}
+    </div>
+  )
+}

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

@@ -0,0 +1,18 @@
+/**
+ * @deprecated 已归口为 `WebPreviewNav`（蓝图批次④：WebPreview 族 7 件 → Shell / Nav /
+ * Console 三件）。这里只留薄兼容导出，桌面端按自己的节奏改名；包内消费方已全部迁移。
+ * 新代码请从 `@orbit-work/ui` 直接引 `WebPreviewNav` / `WebPreviewTab` / `WebPreviewNavProps`。
+ */
+export {
+  WebPreviewNav,
+  /** @deprecated 用 `WebPreviewNav`。 */
+  WebPreviewNav as BrowserTabBarView,
+} from "../WebPreviewNav"
+export type {
+  WebPreviewNavProps,
+  WebPreviewTab,
+  /** @deprecated 用 `WebPreviewNavProps`。 */
+  WebPreviewNavProps as BrowserTabBarViewProps,
+  /** @deprecated 用 `WebPreviewTab`。 */
+  WebPreviewTab as BrowserTabView,
+} from "../WebPreviewNav"