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

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

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

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

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

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

@@ -1,18 +0,0 @@
-/**
- * @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"