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

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

@@ -1,52 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react"
-import { BrowserFindBarView } from "./index"
-
-const meta = {
-  title: "Browser/BrowserFindBarView",
-  component: BrowserFindBarView,
-  parameters: {
-    layout: "padded",
-  },
-  tags: ["autodocs"],
-} satisfies Meta<typeof BrowserFindBarView>
-
-export default meta
-type Story = StoryObj<typeof meta>
-
-export const Default: Story = {
-  args: {
-    onFind: (text, forward, findNext) => console.log("find", { text, forward, findNext }),
-    onClear: () => console.log("clear"),
-    onClose: () => console.log("close"),
-  },
-}
-
-export const InContainer: Story = {
-  args: {
-    onFind: (text, forward, findNext) => console.log("find", { text, forward, findNext }),
-    onClear: () => console.log("clear"),
-    onClose: () => console.log("close"),
-  },
-  decorators: [
-    (Story) => (
-      <div
-        style={{
-          position: "relative",
-          height: 400,
-          border: "1px solid var(--ow-border)",
-          borderRadius: 8,
-          padding: 16,
-          background: "var(--ow-bg)",
-        }}
-      >
-        <div style={{ marginBottom: 16, fontSize: 14, color: "var(--ow-text-2)" }}>
-          <p style={{ margin: "0 0 8px" }}>这是一个示例页面内容，用于演示查找栏的功能。</p>
-          <p style={{ margin: "0 0 8px" }}>你可以在上方的输入框中输入文字进行查找。</p>
-          <p style={{ margin: "0 0 8px" }}>使用 Enter 键跳转到下一个匹配项，Shift+Enter 跳转到上一个。</p>
-          <p style={{ margin: 0 }}>按 Escape 键可以关闭查找栏。</p>
-        </div>
-        <Story />
-      </div>
-    ),
-  ],
-}

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

@@ -1,111 +0,0 @@
-"use client"
-
-import { useCallback, useEffect, useRef, useState } from "react"
-import { useImeAwareEnter } from "../../../../hooks/useImeAwareEnter"
-import { ChevDown, ChevUp, Close } from "../../../composite/Icons"
-import { TextField } from "../../../composite/NativeControls"
-import { Button } from "../../../primitives"
-
-export interface BrowserFindBarViewProps {
-  onFind: (text: string, forward: boolean, findNext: boolean) => void
-  onClear: () => void
-  onClose: () => void
-}
-
-/**
- * @deprecated 已归口为 `WebPreviewShell` 的 **`subToolbar` 插槽配方**（蓝图批次④：
- * WebPreview 族 7 件 → Shell / Nav / Console 三件）——查找条不是独立骨架，它是贴在
- * 壳工具栏下的第二条。用法：`<WebPreviewShell subToolbar={<BrowserFindBarView … />}>`。
- *
- * 类契约 `.browser-findbar*` 在 `styles/desktop-surfaces.css` 的 browser 段，P5 已按
- * DS2 成对改过：输入三态边框走 `--ow-input-border/-hover/-focus`（不再用暗档会变荧黄的
- * `--ow-primary`）、禁用逐 token。条底 `--ow-surface` 与设备条同插槽同底，输入面
- * `--ow-surface-2` 嵌套井。本件不渲染命中计数（`.browser-findbar__count` 已随 W5 死码清扫删除）；
- * 计数回来时连 props 一起加，届时读数按 §7 走 mono ＋ tabular-nums。
- */
-export function BrowserFindBarView({ onFind, onClear, onClose }: BrowserFindBarViewProps): React.ReactElement {
-  const [text, setText] = useState("")
-  const inputRef = useRef<HTMLInputElement>(null)
-  const { isImeEnter, onCompositionEnd, onCompositionStart } = useImeAwareEnter()
-  useEffect(() => {
-    inputRef.current?.focus()
-  }, [])
-
-  const find = useCallback(
-    (forward: boolean, findNext: boolean) => {
-      if (text) onFind(text, forward, findNext)
-      else onClear()
-    },
-    [onClear, onFind, text],
-  )
-
-  const close = useCallback(() => {
-    onClear()
-    onClose()
-  }, [onClear, onClose])
-
-  return (
-    <div className="browser-findbar">
-      <TextField
-        unstyled
-        ref={inputRef}
-        className="browser-findbar__input"
-        type="text"
-        value={text}
-        onChange={(event) => {
-          const next = event.target.value
-          setText(next)
-          if (next) onFind(next, true, false)
-          else onClear()
-        }}
-        onCompositionStart={onCompositionStart}
-        onCompositionEnd={onCompositionEnd}
-        onKeyDown={(event) => {
-          event.stopPropagation()
-          if (isImeEnter(event)) return
-          if (event.key === "Enter") {
-            event.preventDefault()
-            find(!event.shiftKey, true)
-          } else if (event.key === "Escape") {
-            event.preventDefault()
-            close()
-          }
-        }}
-        placeholder="查找..."
-        aria-label="在页面中查找"
-      />
-      <Button
-        variant="unstyled"
-        type="button"
-        className="browser-findbar__btn"
-        onClick={() => find(false, true)}
-        disabled={!text}
-        title="上一个"
-        aria-label="上一个匹配"
-      >
-        <ChevUp width={14} height={14} />
-      </Button>
-      <Button
-        variant="unstyled"
-        type="button"
-        className="browser-findbar__btn"
-        onClick={() => find(true, true)}
-        disabled={!text}
-        title="下一个"
-        aria-label="下一个匹配"
-      >
-        <ChevDown width={14} height={14} />
-      </Button>
-      <Button
-        variant="unstyled"
-        type="button"
-        className="browser-findbar__btn"
-        onClick={close}
-        title="关闭查找"
-        aria-label="关闭查找栏"
-      >
-        <Close width={14} height={14} />
-      </Button>
-    </div>
-  )
-}

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

@@ -1,89 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react"
-import { BrowserImportDialogView } from "./index"
-import type { BrowserImportProfile } from "./index"
-
-const meta = {
-  title: "Browser/BrowserImportDialogView",
-  component: BrowserImportDialogView,
-  parameters: {
-    layout: "fullscreen",
-  },
-  tags: ["autodocs"],
-} satisfies Meta<typeof BrowserImportDialogView>
-
-export default meta
-type Story = StoryObj<typeof meta>
-
-const mockProfiles: BrowserImportProfile[] = [
-  {
-    browser: "Chrome",
-    profile: "Default",
-    profileFolder: "/Users/user/Library/Application Support/Google/Chrome/Default",
-  },
-  {
-    browser: "Chrome",
-    profile: "Profile 1",
-    profileFolder: "/Users/user/Library/Application Support/Google/Chrome/Profile 1",
-  },
-  {
-    browser: "Edge",
-    profile: "Default",
-    profileFolder: "/Users/user/Library/Application Support/Microsoft Edge/Default",
-  },
-]
-
-export const Default: Story = {
-  args: {
-    profiles: mockProfiles,
-    onClose: () => console.log("close"),
-    onImport: async (profile, options) => {
-      console.log("import", profile, options)
-      await new Promise((resolve) => setTimeout(resolve, 1000))
-    },
-  },
-}
-
-export const Loading: Story = {
-  args: {
-    profiles: mockProfiles,
-    loading: true,
-    onClose: () => console.log("close"),
-    onImport: async (profile, options) => {
-      console.log("import", profile, options)
-    },
-  },
-}
-
-export const SingleProfile: Story = {
-  args: {
-    profiles: [mockProfiles[0]],
-    onClose: () => console.log("close"),
-    onImport: async (profile, options) => {
-      console.log("import", profile, options)
-      await new Promise((resolve) => setTimeout(resolve, 1000))
-    },
-  },
-}
-
-export const MultipleProfiles: Story = {
-  args: {
-    profiles: [
-      ...mockProfiles,
-      {
-        browser: "Firefox",
-        profile: "default-release",
-        profileFolder: "/Users/user/Library/Application Support/Firefox/Profiles/xxx.default-release",
-      },
-      {
-        browser: "Safari",
-        profile: "Default",
-        profileFolder: "/Users/user/Library/Safari",
-      },
-    ],
-    onClose: () => console.log("close"),
-    onImport: async (profile, options) => {
-      console.log("import", profile, options)
-      await new Promise((resolve) => setTimeout(resolve, 1500))
-    },
-  },
-}

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

@@ -1,155 +0,0 @@
-"use client"
-
-import { useCallback, useState } from "react"
-import { Switch } from "../../../composite/Controls"
-import { Dialog } from "../../../composite/Dialog"
-import * as I2 from "../../../composite/Icons"
-import { Button } from "../../../primitives"
-
-export interface BrowserImportProfile {
-  browser: string
-  browserIcon?: string
-  profile: string
-  profileFolder: string
-}
-
-export interface BrowserImportOptions {
-  passwords: boolean
-  cookies: boolean
-}
-
-export interface BrowserImportDialogViewProps {
-  profiles: BrowserImportProfile[]
-  loading?: boolean
-  onClose: () => void
-  onImport: (profile: BrowserImportProfile, options: BrowserImportOptions) => Promise<void>
-}
-
-/**
- * @deprecated 不属三件骨架：书签导入是 **Dialog 配方**（蓝图批次④）。新代码请用
- * `Dialog` 原语组这个配方：遮罩／模态立面／标题副标题／关闭钮／动作行全归原语，
- * 本件只留 `__source*` / `__warning` / `__options*` 三族类（`styles/desktop-surfaces.css`
- * 的 browser 段）——来源下拉行走 pop 档、当前项 R1 双编码（底＋字重）、选项列表按
- * 卡骨架 14 内距 ＋ `--ow-surface-2` 列表地。
- *
- * 来源图标走中性浏览器字形（`composite/Icons` 的 `Globe`），档案自带 `browserIcon`
- * 时优先出它——原来对每个档案无差别渲一枚手搓 Chrome 徽标，Edge/Firefox 档案会顶着
- * Chrome 图标，且那 5 个 hex 是 Material 调色板、不落「第三方品牌官方色」豁免。
- */
-export function BrowserImportDialogView({
-  profiles,
-  loading = false,
-  onClose,
-  onImport,
-}: BrowserImportDialogViewProps): React.ReactElement {
-  const [selectedIndex, setSelectedIndex] = useState(0)
-  const [showDropdown, setShowDropdown] = useState(false)
-  const [importPasswords, setImportPasswords] = useState(true)
-  const [importCookies, setImportCookies] = useState(true)
-  const [importing, setImporting] = useState(false)
-  const selected = profiles[selectedIndex] ?? profiles[0]
-
-  const handleImport = useCallback(async () => {
-    if (!selected) return
-    setImporting(true)
-    try {
-      await onImport(selected, { passwords: importPasswords, cookies: importCookies })
-      onClose()
-    } catch {
-      // The host owns error reporting; keep the dialog open so the user can retry.
-    } finally {
-      setImporting(false)
-    }
-  }, [importCookies, importPasswords, onClose, onImport, selected])
-
-  return (
-    <Dialog
-      open
-      title="从浏览器导入"
-      subtitle="选择要导入到内置浏览器的数据"
-      onClose={onClose}
-      closable
-      width={420}
-      actions={
-        <>
-          <Button variant="secondary" size="md" onClick={onClose}>
-            取消
-          </Button>
-          <Button
-            variant="primary"
-            size="md"
-            onClick={() => void handleImport()}
-            disabled={loading || importing || !selected || (!importPasswords && !importCookies)}
-          >
-            {loading ? "正在检测..." : importing ? "导入中..." : "导入"}
-          </Button>
-        </>
-      }
-    >
-      <div className="browser-import-dialog__source">
-        <span className="browser-import-dialog__source-label">从</span>
-        <div className="browser-import-dialog__source-select">
-          <Button
-            variant="unstyled"
-            className="browser-import-dialog__source-btn"
-            onClick={() => setShowDropdown((value) => !value)}
-            disabled={!selected}
-          >
-            <BrowserGlyph profile={selected} />
-            <span>{selected ? `${selected.browser} ${selected.profile}` : "未检测到浏览器"}</span>
-            <I2.ChevDown width={14} height={14} />
-          </Button>
-          {showDropdown && (
-            <div className="browser-import-dialog__source-dropdown">
-              {profiles.map((profile, index) => (
-                <Button
-                  key={`${profile.browser}:${profile.profileFolder}`}
-                  variant="unstyled"
-                  className={`browser-import-dialog__source-option${index === selectedIndex ? " is-active" : ""}`}
-                  onClick={() => {
-                    setSelectedIndex(index)
-                    setShowDropdown(false)
-                  }}
-                >
-                  <BrowserGlyph profile={profile} />
-                  <span>
-                    {profile.browser} {profile.profile}
-                  </span>
-                </Button>
-              ))}
-            </div>
-          )}
-        </div>
-      </div>
-      {selected && <p className="browser-import-dialog__warning">导入前，请完全关闭 {selected.browser}</p>}
-      <div className="browser-import-dialog__options">
-        <div className="browser-import-dialog__option">
-          <div className="browser-import-dialog__option-icon">
-            <I2.Shield width={20} height={20} />
-          </div>
-          <span className="browser-import-dialog__option-label">密码</span>
-          <Switch checked={importPasswords} onChange={setImportPasswords} />
-        </div>
-        <div className="browser-import-dialog__option">
-          <div className="browser-import-dialog__option-icon">
-            <I2.Globe width={20} height={20} />
-          </div>
-          <span className="browser-import-dialog__option-label">Cookie</span>
-          <Switch checked={importCookies} onChange={setImportCookies} />
-        </div>
-      </div>
-    </Dialog>
-  )
-}
-
-/** 来源字形：档案自带 `browserIcon`（宿主推来的 emoji）时出它，否则出中性浏览器字形。 */
-function BrowserGlyph({ profile }: { profile?: BrowserImportProfile }): React.ReactElement {
-  if (profile?.browserIcon) {
-    return (
-      <span aria-hidden="true" className="browser-import-dialog__source-glyph">
-        {profile.browserIcon}
-      </span>
-    )
-  }
-  return <I2.Globe width={18} height={18} aria-hidden="true" />
-}

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

@@ -1,197 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react"
-import { BrowserLoadErrorView } from "./index"
-
-// 组件根 `.browser-load-error` 是 position:absolute;inset:0（覆在 webview 上的一层），
-// 没有定位祖先时会塌成一条窄柱、文字全部裁切。所有 story 统一套一个
-// position:relative ＋ 固定高的容器，还原它在 .browser-webview 里的真实占位。
-const Stage = ({ children }: { children: React.ReactNode }) => (
-  <div
-    style={{
-      position: "relative",
-      width: 760,
-      height: 420,
-      background: "var(--ow-bg)",
-      border: "1px solid var(--ow-border)",
-      borderRadius: 12,
-      overflow: "hidden",
-    }}
-  >
-    {children}
-  </div>
-)
-
-const meta = {
-  title: "Browser/BrowserLoadErrorView",
-  component: BrowserLoadErrorView,
-  parameters: {
-    layout: "centered",
-  },
-  decorators: [
-    (Story) => (
-      <Stage>
-        <Story />
-      </Stage>
-    ),
-  ],
-  tags: ["autodocs"],
-} satisfies Meta<typeof BrowserLoadErrorView>
-
-export default meta
-type Story = StoryObj<typeof meta>
-
-export const SimpleError: Story = {
-  args: {
-    url: "https://example.com",
-    errorDescription: "Connection timed out",
-    onReload: () => console.log("reload"),
-  },
-}
-
-export const LongUrl: Story = {
-  args: {
-    url: "https://very-long-domain-name-that-might-wrap.example.com/with/a/very/long/path/structure",
-    errorDescription: "Failed to load resource",
-    onReload: () => console.log("reload"),
-  },
-}
-
-export const NetworkError: Story = {
-  args: {
-    url: "https://api.github.com",
-    errorDescription: "ERR_NETWORK_CHANGED",
-    onReload: () => console.log("reload"),
-  },
-}
-
-export const CertificateError: Story = {
-  args: {
-    url: "https://untrusted-site.com",
-    errorDescription: "NET::ERR_CERT_AUTHORITY_INVALID",
-    onReload: () => console.log("reload"),
-  },
-}
-
-export const DnsError: Story = {
-  args: {
-    url: "https://non-existent-domain.invalid",
-    errorDescription: "DNS_PROBE_FINISHED_NXDOMAIN",
-    onReload: () => console.log("reload"),
-  },
-}
-
-export const TimeoutError: Story = {
-  args: {
-    url: "https://slow-server.example.com",
-    errorDescription: "ERR_CONNECTION_TIMED_OUT",
-    onReload: () => console.log("reload"),
-  },
-}
-
-export const LocalhostError: Story = {
-  args: {
-    url: "http://localhost:3000",
-    errorDescription: "ERR_CONNECTION_REFUSED",
-    onReload: () => console.log("reload"),
-  },
-}
-
-export const InBrowserLayout: Story = {
-  decorators: [(Story) => <Story />],
-  render: () => (
-    <div
-      style={{
-        width: 800,
-        height: 600,
-        display: "flex",
-        flexDirection: "column",
-        background: "var(--ow-bg)",
-        borderRadius: 8,
-        overflow: "hidden",
-      }}
-    >
-      <div
-        style={{
-          padding: 12,
-          background: "var(--ow-surface)",
-          borderBottom: "1px solid var(--ow-border)",
-          display: "flex",
-          alignItems: "center",
-          gap: 8,
-        }}
-      >
-        <div style={{ width: 12, height: 12, borderRadius: "50%", background: "var(--ow-error)" }} />
-        <div style={{ width: 12, height: 12, borderRadius: "50%", background: "var(--ow-orange-500)" }} />
-        <div style={{ width: 12, height: 12, borderRadius: "50%", background: "var(--ow-green-500)" }} />
-        <div
-          style={{
-            flex: 1,
-            marginLeft: 8,
-            padding: "4px 12px",
-            background: "var(--ow-bg)",
-            borderRadius: 4,
-            fontSize: 13,
-            color: "var(--ow-text-3)",
-          }}
-        >
-          https://example.com/page
-        </div>
-      </div>
-      {/* 组件根是 absolute inset-0 —— 这层必须 position:relative 才是它的定位祖先。 */}
-      <div style={{ position: "relative", flex: 1, minHeight: 0 }}>
-        <BrowserLoadErrorView
-          url="https://example.com/page"
-          errorDescription="ERR_CONNECTION_REFUSED"
-          onReload={() => console.log("reload")}
-        />
-      </div>
-    </div>
-  ),
-}
-
-export const MultipleErrorStates: Story = {
-  decorators: [(Story) => <Story />],
-  render: () => (
-    <div style={{ display: "flex", flexDirection: "column", gap: 32 }}>
-      <div>
-        <h4 style={{ margin: 0, marginBottom: 12, fontSize: 14, fontWeight: 600, color: "var(--ow-text-3)" }}>
-          Network Error
-        </h4>
-        <div
-          style={{
-            position: "relative",
-            height: 320,
-            border: "1px solid var(--ow-border)",
-            borderRadius: 8,
-            overflow: "hidden",
-          }}
-        >
-          <BrowserLoadErrorView
-            url="https://api.example.com"
-            errorDescription="Network connection lost"
-            onReload={() => console.log("reload network")}
-          />
-        </div>
-      </div>
-      <div>
-        <h4 style={{ margin: 0, marginBottom: 12, fontSize: 14, fontWeight: 600, color: "var(--ow-text-3)" }}>
-          DNS Error
-        </h4>
-        <div
-          style={{
-            position: "relative",
-            height: 320,
-            border: "1px solid var(--ow-border)",
-            borderRadius: 8,
-            overflow: "hidden",
-          }}
-        >
-          <BrowserLoadErrorView
-            url="https://invalid.domain"
-            errorDescription="DNS lookup failed"
-            onReload={() => console.log("reload dns")}
-          />
-        </div>
-      </div>
-    </div>
-  ),
-}

package/src/components/domain/browser/BrowserLoadErrorView/BrowserLoadErrorViewSource.test.mjs

@@ -1,29 +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 styles = await readFile(new URL("../../../../../styles/desktop-surfaces.css", import.meta.url), "utf8")
-
-test("browser load errors expose the failed address and a reload action", () => {
-  // R2：错误态改坐 InlineMessage variant="error"（与 WebPreviewShell 的 error 态同语法），
-  // role="alert" 由原语的 error 档自带，标题与 WebPreviewShell 同一句话。
-  assert.match(source, /<InlineMessage/)
-  assert.match(source, /variant="error"/)
-  assert.match(source, /title="这个页面没加载出来"/)
-  assert.match(source, /\{url\}/)
-  assert.match(source, /onClick=\{onReload\}/)
-  assert.match(source, /重新加载/)
-})
-
-// 空态原语只留给空态：同一个「页面没加载出来」的角色不再并存两套语法。
-test("error state no longer borrows the EmptyState primitive", () => {
-  assert.doesNotMatch(source, /<EmptyState/)
-  assert.doesNotMatch(source, /\bEmptyState\b(?=[^\n]*from ")/)
-})
-
-test("browser load error visuals are owned by the shared component package", () => {
-  assert.match(styles, /\.browser-load-error \{/)
-  assert.match(styles, /background: var\(--ow-bg\)/)
-  assert.doesNotMatch(source, /from ['"]electron/)
-})

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

@@ -1,45 +0,0 @@
-"use client"
-
-import { Button, InlineMessage } from "../../../primitives"
-
-export interface BrowserLoadErrorViewProps {
-  url: string
-  errorDescription?: string
-  onReload: () => void
-}
-
-/** Shared browser surface shown when Electron cannot load a top-level page. */
-/**
- * @deprecated 已归口为 `WebPreviewShell` 的 **`error` 态**（蓝图批次④）：
- * `<WebPreviewShell error="这个页面没加载出来" errorDetail={code} onRetry={reload}>`。
- * 本件保留只为桌面端 `.browser-load-error*` 类契约过渡。
- *
- * R2：错误态改用 `InlineMessage variant="error"`，与 `WebPreviewShell` 的 error 态同语法
- * （error tint 三件套 ＋ 一句人话 ＋ mono 折叠详情 ＋ 重试钮）。原来这里用的是
- * `EmptyState`——那是空态专用原语，同一个「页面没加载出来」的角色在库里并存两套语法。
- * `role="alert"` 由 `InlineMessage` 的 error 档自带，外层不再重复声明。
- */
-export function BrowserLoadErrorView({
-  url,
-  errorDescription,
-  onReload,
-}: BrowserLoadErrorViewProps): React.ReactElement {
-  return (
-    <div className="browser-load-error">
-      <InlineMessage
-        className="browser-load-error__content"
-        variant="error"
-        title="这个页面没加载出来"
-        detail={errorDescription}
-        action={
-          <Button type="button" variant="secondary" size="sm" onClick={onReload}>
-            重新加载
-          </Button>
-        }
-      >
-        请检查地址是否正确，或确认对应服务已启动后重试。
-        {url && <span className="browser-load-error__url">{url}</span>}
-      </InlineMessage>
-    </div>
-  )
-}