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

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

@@ -1,462 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react"
-import { useState } from "react"
-import { WebPreviewNav, type WebPreviewTab } from "./index"
-
-const meta = {
-  title: "Preview/WebPreviewNav",
-  component: WebPreviewNav,
-  parameters: {
-    layout: "padded",
-  },
-  tags: ["autodocs"],
-} satisfies Meta<typeof WebPreviewNav>
-
-export default meta
-type Story = StoryObj<typeof meta>
-
-/**
- * 本地字母兜底 favicon（16 方 · 中性灰底 ＋ 白字母，内联 data URI）。
- * 原来 story 的 favicon 全是公网外链（github.com/favicon.ico 一类）：离线与 CI 下取不到，
- * <img> 渲成空盒，而 placeholder 分支又因为 tab.favicon 非空不触发，图标位就空着；
- * 取到的（GitHub 黑标）在暗档底上又看不见。中性灰双档都读得出，且不出网。
- */
-const letterFavicon = (letter: string) =>
-  `data:image/svg+xml;utf8,${encodeURIComponent(
-    `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><rect width="16" height="16" rx="4" fill="#8A8D93"/><text x="8" y="11.6" font-family="system-ui,sans-serif" font-size="10" font-weight="600" fill="#FFFFFF" text-anchor="middle">${letter}</text></svg>`,
-  )}`
-
-const mockTabs: WebPreviewTab[] = [
-  { id: "1", kind: "web", title: "GitHub", url: "https://github.com", favicon: letterFavicon("G") },
-  { id: "2", kind: "web", title: "Google", url: "https://google.com", favicon: letterFavicon("G") },
-  { id: "3", kind: "terminal", title: "bash", path: "/Users/zhangying" },
-  { id: "4", kind: "files", title: "src", path: "/Users/zhangying/projects/src" },
-]
-
-export const Default: Story = {
-  render: () => {
-    const [tabs, setTabs] = useState<WebPreviewTab[]>(mockTabs)
-    const [activeTabId, setActiveTabId] = useState("1")
-    const [isWide, setIsWide] = useState(false)
-
-    return (
-      <WebPreviewNav
-        tabs={tabs}
-        activeTabId={activeTabId}
-        isWide={isWide}
-        onSwitchTab={setActiveTabId}
-        onCloseTab={(id) => setTabs(tabs.filter((t) => t.id !== id))}
-        onCloseOtherTabs={(id) => setTabs(tabs.filter((t) => t.id === id))}
-        onAddBrowser={() => {
-          const newTab: WebPreviewTab = {
-            id: String(Date.now()),
-            kind: "web",
-            title: "新标签页",
-            url: "about:blank",
-          }
-          setTabs([...tabs, newTab])
-          setActiveTabId(newTab.id)
-        }}
-        onAddTerminal={() => {
-          const newTab: WebPreviewTab = {
-            id: String(Date.now()),
-            kind: "terminal",
-            title: "bash",
-            path: "/Users/zhangying",
-          }
-          setTabs([...tabs, newTab])
-          setActiveTabId(newTab.id)
-        }}
-        onAddFiles={() => {
-          const newTab: WebPreviewTab = {
-            id: String(Date.now()),
-            kind: "files",
-            title: "files",
-            path: "/Users/zhangying",
-          }
-          setTabs([...tabs, newTab])
-          setActiveTabId(newTab.id)
-        }}
-        onToggleWide={() => setIsWide(!isWide)}
-        onToggleCollapsed={() => console.log("toggle collapsed")}
-      />
-    )
-  },
-}
-
-export const SingleTab: Story = {
-  render: () => {
-    const [tabs, setTabs] = useState<WebPreviewTab[]>([
-      { id: "1", kind: "web", title: "GitHub", url: "https://github.com", favicon: letterFavicon("G") },
-    ])
-    const [activeTabId, setActiveTabId] = useState("1")
-    const [isWide, setIsWide] = useState(false)
-
-    return (
-      <WebPreviewNav
-        tabs={tabs}
-        activeTabId={activeTabId}
-        isWide={isWide}
-        onSwitchTab={setActiveTabId}
-        onCloseTab={(id) => setTabs(tabs.filter((t) => t.id !== id))}
-        onCloseOtherTabs={(id) => setTabs(tabs.filter((t) => t.id === id))}
-        onAddBrowser={() => {
-          const newTab: WebPreviewTab = {
-            id: String(Date.now()),
-            kind: "web",
-            title: "新标签页",
-            url: "about:blank",
-          }
-          setTabs([...tabs, newTab])
-          setActiveTabId(newTab.id)
-        }}
-        onAddTerminal={() => {
-          const newTab: WebPreviewTab = {
-            id: String(Date.now()),
-            kind: "terminal",
-            title: "bash",
-            path: "/Users/zhangying",
-          }
-          setTabs([...tabs, newTab])
-          setActiveTabId(newTab.id)
-        }}
-        onAddFiles={() => {
-          const newTab: WebPreviewTab = {
-            id: String(Date.now()),
-            kind: "files",
-            title: "files",
-            path: "/Users/zhangying",
-          }
-          setTabs([...tabs, newTab])
-          setActiveTabId(newTab.id)
-        }}
-        onToggleWide={() => setIsWide(!isWide)}
-        onToggleCollapsed={() => console.log("toggle collapsed")}
-      />
-    )
-  },
-}
-
-export const ManyTabs: Story = {
-  render: () => {
-    const [tabs, setTabs] = useState<WebPreviewTab[]>([
-      { id: "1", kind: "web", title: "GitHub", url: "https://github.com", favicon: letterFavicon("G") },
-      {
-        id: "2",
-        kind: "web",
-        title: "Google",
-        url: "https://google.com",
-        favicon: letterFavicon("G"),
-      },
-      {
-        id: "3",
-        kind: "web",
-        title: "Stack Overflow",
-        url: "https://stackoverflow.com",
-        favicon: letterFavicon("S"),
-      },
-      { id: "4", kind: "terminal", title: "bash", path: "/Users/zhangying" },
-      { id: "5", kind: "terminal", title: "zsh", path: "/Users/zhangying/projects" },
-      { id: "6", kind: "files", title: "src", path: "/Users/zhangying/projects/src" },
-      {
-        id: "7",
-        kind: "web",
-        title: "MDN Web Docs",
-        url: "https://developer.mozilla.org",
-        favicon: letterFavicon("M"),
-      },
-      {
-        id: "8",
-        kind: "web",
-        title: "TypeScript Documentation",
-        url: "https://typescriptlang.org",
-        favicon: letterFavicon("T"),
-      },
-    ])
-    const [activeTabId, setActiveTabId] = useState("1")
-    const [isWide, setIsWide] = useState(false)
-
-    return (
-      <WebPreviewNav
-        tabs={tabs}
-        activeTabId={activeTabId}
-        isWide={isWide}
-        onSwitchTab={setActiveTabId}
-        onCloseTab={(id) => setTabs(tabs.filter((t) => t.id !== id))}
-        onCloseOtherTabs={(id) => setTabs(tabs.filter((t) => t.id === id))}
-        onAddBrowser={() => {
-          const newTab: WebPreviewTab = {
-            id: String(Date.now()),
-            kind: "web",
-            title: "新标签页",
-            url: "about:blank",
-          }
-          setTabs([...tabs, newTab])
-          setActiveTabId(newTab.id)
-        }}
-        onAddTerminal={() => {
-          const newTab: WebPreviewTab = {
-            id: String(Date.now()),
-            kind: "terminal",
-            title: "bash",
-            path: "/Users/zhangying",
-          }
-          setTabs([...tabs, newTab])
-          setActiveTabId(newTab.id)
-        }}
-        onAddFiles={() => {
-          const newTab: WebPreviewTab = {
-            id: String(Date.now()),
-            kind: "files",
-            title: "files",
-            path: "/Users/zhangying",
-          }
-          setTabs([...tabs, newTab])
-          setActiveTabId(newTab.id)
-        }}
-        onToggleWide={() => setIsWide(!isWide)}
-        onToggleCollapsed={() => console.log("toggle collapsed")}
-      />
-    )
-  },
-}
-
-export const WideMode: Story = {
-  render: () => {
-    const [tabs] = useState<WebPreviewTab[]>(mockTabs)
-    const [activeTabId, setActiveTabId] = useState("1")
-    const [isWide, setIsWide] = useState(true)
-
-    return (
-      <WebPreviewNav
-        tabs={tabs}
-        activeTabId={activeTabId}
-        isWide={isWide}
-        onSwitchTab={setActiveTabId}
-        onCloseTab={() => console.log("close")}
-        onCloseOtherTabs={() => console.log("close others")}
-        onAddBrowser={() => console.log("add browser")}
-        onAddTerminal={() => console.log("add terminal")}
-        onAddFiles={() => console.log("add files")}
-        onToggleWide={() => setIsWide(!isWide)}
-        onToggleCollapsed={() => console.log("toggle collapsed")}
-      />
-    )
-  },
-}
-
-export const MixedTabKinds: Story = {
-  render: () => {
-    const [tabs, setTabs] = useState<WebPreviewTab[]>([
-      { id: "1", kind: "web", title: "Documentation", url: "https://docs.example.com" },
-      { id: "2", kind: "terminal", title: "npm run dev", path: "/Users/zhangying/projects/app" },
-      { id: "3", kind: "files", title: "components", path: "/Users/zhangying/projects/app/src/components" },
-      { id: "4", kind: "subagent", title: "Code Review Agent", path: "agent://review-123" },
-    ])
-    const [activeTabId, setActiveTabId] = useState("2")
-    const [isWide, setIsWide] = useState(false)
-
-    return (
-      <WebPreviewNav
-        tabs={tabs}
-        activeTabId={activeTabId}
-        isWide={isWide}
-        onSwitchTab={setActiveTabId}
-        onCloseTab={(id) => setTabs(tabs.filter((t) => t.id !== id))}
-        onCloseOtherTabs={(id) => setTabs(tabs.filter((t) => t.id === id))}
-        onAddBrowser={() => console.log("add browser")}
-        onAddTerminal={() => console.log("add terminal")}
-        onAddFiles={() => console.log("add files")}
-        onToggleWide={() => setIsWide(!isWide)}
-        onToggleCollapsed={() => console.log("toggle collapsed")}
-      />
-    )
-  },
-}
-
-/**
- * 标签右键菜单 —— 弹层基座 `.cpop` 在 browser 域的消费点（DS 2.0 P6-7）。
- *
- * 在任一标签上点右键即可打开。核对点：面走 `--ow-popover-bg`（比地面高一档）、
- * 影走 `--ow-shadow-pop`、始终保留 1px `--ow-border`、圆角菜单档；菜单行 hover
- * 是 `--ow-hover-pop`、press 是 `--ow-press-pop`（坐在弹层面上的行不用地面那一套）；
- * 「关闭其他标签页」在只剩一个标签时是 disabled，走 `--ow-disabled-text` 而不是
- * 统一透明度。两个主题都要看。
- */
-export const TabContextMenu: Story = {
-  render: () => {
-    const [tabs, setTabs] = useState<WebPreviewTab[]>(mockTabs)
-    const [activeTabId, setActiveTabId] = useState("1")
-
-    return (
-      <div>
-        <p style={{ margin: "0 0 12px", color: "var(--ow-text-2)", font: "400 13px/1.5 var(--ow-font-sans)" }}>
-          在下面任一标签上点右键，打开标签操作菜单。
-        </p>
-        <WebPreviewNav
-          tabs={tabs}
-          activeTabId={activeTabId}
-          isWide={false}
-          onSwitchTab={setActiveTabId}
-          onCloseTab={(id) => setTabs(tabs.filter((t) => t.id !== id))}
-          onCloseOtherTabs={(id) => setTabs(tabs.filter((t) => t.id === id))}
-          onAddBrowser={() => console.log("add browser")}
-          onAddTerminal={() => console.log("add terminal")}
-          onAddFiles={() => console.log("add files")}
-          onToggleWide={() => console.log("toggle wide")}
-          onToggleCollapsed={() => console.log("toggle collapsed")}
-        />
-      </div>
-    )
-  },
-}
-
-/** 只剩一个标签：右键菜单里「关闭其他标签页」是 disabled 态（§6 逐 token，禁统一透明度）。 */
-export const TabContextMenuSingleTab: Story = {
-  render: () => {
-    const [tabs, setTabs] = useState<WebPreviewTab[]>([mockTabs[0]])
-    const [activeTabId, setActiveTabId] = useState("1")
-
-    return (
-      <div>
-        <p style={{ margin: "0 0 12px", color: "var(--ow-text-2)", font: "400 13px/1.5 var(--ow-font-sans)" }}>
-          在标签上点右键：「关闭其他标签页」应为禁用态。
-        </p>
-        <WebPreviewNav
-          tabs={tabs}
-          activeTabId={activeTabId}
-          isWide={false}
-          onSwitchTab={setActiveTabId}
-          onCloseTab={(id) => setTabs(tabs.filter((t) => t.id !== id))}
-          onCloseOtherTabs={(id) => setTabs(tabs.filter((t) => t.id === id))}
-          onAddBrowser={() => console.log("add browser")}
-          onAddTerminal={() => console.log("add terminal")}
-          onAddFiles={() => console.log("add files")}
-          onToggleWide={() => console.log("toggle wide")}
-          onToggleCollapsed={() => console.log("toggle collapsed")}
-        />
-      </div>
-    )
-  },
-}
-
-/**
- * **右栏 panel 档**（A8-B2 · 原型模板 2251–2271）——只给会话侧开栏用的第二形制。
- *
- * 核对点：条 36 高、坐地面 `--ow-bg`，条底 1px 基线；页签是 26 高圆角胶囊，
- * **选中＝底色换成面板体同色 `--ow-surface` ＋500 字重**（与下面那块面连成一片，
- * 不再画底线）；页签上没有 favicon / 类别图标位，只有标题 ＋ 16 方常显关闭钮；
- * `+` 钮 24 方、紧跟最后一个页签坐在滚动行内，点了**直接开一个网页页签**（不弹菜单）；
- * 右端「最大化 / 还原」与「收起右栏」两颗 26 方。两个主题都要看：选中胶囊与面板体
- * 在暗档也必须是同一色，看不出接缝才对。
- *
- * 荧黄：0 处（R3 中性件）。
- */
-export const PanelDensity: Story = {
-  name: "右栏 panel 档",
-  render: () => {
-    const [tabs, setTabs] = useState<WebPreviewTab[]>([
-      { id: "1", kind: "web", title: "orbitwork.pages.dev", url: "https://orbitwork.pages.dev" },
-      { id: "2", kind: "files", title: "文件" },
-      { id: "3", kind: "terminal", title: "终端" },
-    ])
-    const [activeTabId, setActiveTabId] = useState("1")
-    const [isWide, setIsWide] = useState(false)
-
-    return (
-      // 455 ＝ 1440 窗、240 侧栏下 38% 档的实测栏宽；下面那块 --ow-surface 是面板体，
-      // 用来看「选中胶囊与体同色」这件事。
-      <div
-        style={{
-          width: 455,
-          border: "1px solid var(--ow-border)",
-          background: "var(--ow-surface)",
-          display: "flex",
-          flexDirection: "column",
-        }}
-      >
-        <WebPreviewNav
-          density="panel"
-          tabs={tabs}
-          activeTabId={activeTabId}
-          isWide={isWide}
-          onSwitchTab={setActiveTabId}
-          onCloseTab={(id) => setTabs(tabs.filter((t) => t.id !== id))}
-          onCloseOtherTabs={(id) => setTabs(tabs.filter((t) => t.id === id))}
-          onAddBrowser={() => {
-            const newTab: WebPreviewTab = { id: String(Date.now()), kind: "web", title: "新标签页", url: "about:blank" }
-            setTabs([...tabs, newTab])
-            setActiveTabId(newTab.id)
-          }}
-          onAddTerminal={() => {}}
-          onAddFiles={() => {}}
-          onToggleWide={() => setIsWide(!isWide)}
-          onToggleCollapsed={() => {}}
-        />
-        <div
-          style={{
-            height: 120,
-            display: "grid",
-            placeItems: "center",
-            color: "var(--ow-text-3)",
-            fontSize: "var(--ow-fs-caption)",
-          }}
-        >
-          面板体（--ow-surface）
-        </div>
-      </div>
-    )
-  },
-}
-
-/** panel 档 · 页签多到要横向滚：胶囊不压缩（flex:0 0 auto），滚动行自己滚，`+` 钮跟在最后一个页签后面。 */
-export const PanelDensityManyTabs: Story = {
-  name: "右栏 panel 档 · 多页签",
-  render: () => {
-    const [tabs, setTabs] = useState<WebPreviewTab[]>([
-      { id: "1", kind: "web", title: "orbitwork.pages.dev", url: "https://orbitwork.pages.dev" },
-      { id: "2", kind: "web", title: "设计系统规范", url: "https://orbit.work/docs" },
-      { id: "3", kind: "files", title: "文件" },
-      { id: "4", kind: "terminal", title: "终端" },
-      { id: "5", kind: "subagent", title: "子任务 · 梳理思路" },
-    ])
-    const [activeTabId, setActiveTabId] = useState("2")
-
-    return (
-      <div
-        style={{
-          width: 455,
-          border: "1px solid var(--ow-border)",
-          background: "var(--ow-surface)",
-          display: "flex",
-          flexDirection: "column",
-        }}
-      >
-        <WebPreviewNav
-          density="panel"
-          tabs={tabs}
-          activeTabId={activeTabId}
-          isWide
-          onSwitchTab={setActiveTabId}
-          onCloseTab={(id) => setTabs(tabs.filter((t) => t.id !== id))}
-          onCloseOtherTabs={(id) => setTabs(tabs.filter((t) => t.id === id))}
-          onAddBrowser={() => {}}
-          onAddTerminal={() => {}}
-          onAddFiles={() => {}}
-          onToggleWide={() => {}}
-          onToggleCollapsed={() => {}}
-        />
-        <div
-          style={{
-            height: 120,
-            display: "grid",
-            placeItems: "center",
-            color: "var(--ow-text-3)",
-            fontSize: "var(--ow-fs-caption)",
-          }}
-        >
-          面板体（--ow-surface）
-        </div>
-      </div>
-    )
-  },
-}