@orbit-work/ui 0.1.0

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

@@ -0,0 +1,141 @@
+"use client"
+
+import { createContext, useCallback, useContext, useMemo, useState } from "react"
+import type { ComponentProps, ReactNode } from "react"
+import { cn } from "../../../../lib/utils"
+
+/**
+ * WebPreview —— 组合式网页预览的**旧配方层**。
+ *
+ * 蓝图批次④把 WebPreview 族 7 件收敛成三件骨架：
+ *  - `WebPreviewShell`   地址栏（Field 语法）＋ 工具组 ＋ 内容区 ＋ 载/错/空三态；
+ *  - `WebPreviewNav`     tab 条；
+ *  - `WebPreviewConsole` 终端语境控制台。
+ *
+ * 本文件保留 `WebPreview` 根件与它的 Context（宿主想自己摆插槽时用）＋ `WebPreviewBody`；
+ * `WebPreviewNavigation` / `WebPreviewNavigationButton` / `WebPreviewUrl` 三件已被
+ * `WebPreviewShell` 一件覆盖，W5 终扫删除（详见下方注释）；`WebPreviewConsole` 是
+ * 对新骨架的兼容导出（见文件末尾）。
+ */
+
+// ─── Context ───
+
+export interface WebPreviewContextValue {
+  url: string
+  setUrl: (url: string) => void
+  consoleOpen: boolean
+  setConsoleOpen: (open: boolean) => void
+}
+
+const WebPreviewContext = createContext<WebPreviewContextValue | null>(null)
+
+const useWebPreview = () => {
+  const context = useContext(WebPreviewContext)
+  if (!context) {
+    throw new Error("WebPreview components must be used within a WebPreview")
+  }
+  return context
+}
+
+// ─── WebPreview (Root) ───
+
+export type WebPreviewProps = ComponentProps<"div"> & {
+  /** Initial URL displayed in the preview */
+  defaultUrl?: string
+  /** Callback when URL changes */
+  onUrlChange?: (url: string) => void
+}
+
+export function WebPreview({ className = "", children, defaultUrl = "", onUrlChange, ...props }: WebPreviewProps) {
+  const [url, setUrlState] = useState(defaultUrl)
+  const [consoleOpen, setConsoleOpen] = useState(false)
+
+  const handleUrlChange = useCallback(
+    (newUrl: string) => {
+      setUrlState(newUrl)
+      onUrlChange?.(newUrl)
+    },
+    [onUrlChange],
+  )
+
+  const contextValue = useMemo<WebPreviewContextValue>(
+    () => ({
+      consoleOpen,
+      setConsoleOpen,
+      setUrl: handleUrlChange,
+      url,
+    }),
+    [consoleOpen, handleUrlChange, url],
+  )
+
+  return (
+    <WebPreviewContext.Provider value={contextValue}>
+      <div
+        data-slot="web-preview"
+        className={cn(
+          "flex flex-col w-full h-full [border-radius:var(--ow-radius-card)] border border-ow-border-strong bg-ow-bg overflow-hidden",
+          className,
+        )}
+        {...props}
+      >
+        {children}
+      </div>
+    </WebPreviewContext.Provider>
+  )
+}
+
+/* ─── 旧配方三件已退场 ───────────────────────────────────────────────
+ * W5 终扫：`WebPreviewNavigation` / `WebPreviewNavigationButton` / `WebPreviewUrl`
+ * 三件（@deprecated 已久）随本轮删除——它们是 V1 配方骨架的最后残留：
+ * Navigation 用 `p-2 border-b` 拼出 48 高的条（8+32+8），与归口件那条 40 高
+ * （`--ow-h-lg`）工具栏对不上；Url 是裸 <input> 手搓三态边框，绕过 Field 字段壳。
+ * 三件的全部能力（导航组 ＋ 地址栏 ＋ 工具组 ＋ 载/错/空三态）都在 `WebPreviewShell`。
+ * 迁移：`<WebPreviewShell url onNavigate canGoBack onGoBack actions=… />`。
+ * 仓内已无调用点（含 apps/desktop），Storybook 演示同批改到 Shell。
+ * ──────────────────────────────────────────────────────────────── */
+
+// ─── Preview Body (iframe) ───
+
+/* `loading` 在这里是**覆在 iframe 上的一层节点**，不是 iframe 自己的 loading 属性；
+   原来直接与 ComponentProps<"iframe"> 求交，类型塌成 ("eager"|"lazy") & ReactNode，
+   任何真节点都传不进来。Omit 掉原生同名属性，声明与实现才对得上。 */
+export type WebPreviewBodyProps = Omit<ComponentProps<"iframe">, "loading"> & {
+  /** Loading indicator shown over the iframe */
+  loading?: ReactNode
+}
+
+export function WebPreviewBody({ className = "", loading, src, ...props }: WebPreviewBodyProps) {
+  const { url } = useWebPreview()
+
+  return (
+    <div data-ow-part="body" className="flex-1 min-h-0 relative">
+      <iframe
+        data-ow-part="iframe"
+        className={cn("w-full h-full border-0 block", className)}
+        sandbox="allow-scripts allow-same-origin allow-forms allow-popups allow-presentation"
+        src={(src ?? url) || undefined}
+        title="Preview"
+        {...props}
+      />
+      {loading}
+    </div>
+  )
+}
+
+// ─── Console（已归口）───
+
+/**
+ * @deprecated 控制台已归口为独立骨架件 `WebPreviewConsole`
+ * （`domain/browser/WebPreviewConsole`）：那份按 ui-terminal-code 卡走**终端语境**
+ * ——底/字用恒定 `--ow-term-*`、级别色用 `--ow-ansi-*`（warn 是琥珀，刻意远离荧黄），
+ * 而这里原来的实现只是一块普通 `--ow-surface` 面、级别色错用了 UI 功能色。
+ * 旧名保留为源码级兼容导出，新代码直接引 `WebPreviewConsole`。
+ */
+export {
+  WebPreviewConsole,
+  type WebPreviewConsoleProps,
+  type WebPreviewConsoleLevel,
+  type WebPreviewConsoleEntry,
+  /** @deprecated 用 `WebPreviewConsoleEntry`（多了 `source` 字段，`level` 多了 `info`）。 */
+  type WebPreviewConsoleEntry as WebPreviewConsoleLog,
+} from "../WebPreviewConsole"

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

@@ -0,0 +1,61 @@
+import type { Meta, StoryObj } from "@storybook/react"
+import { WebPreviewConsole, type WebPreviewConsoleEntry } from "./index"
+
+const meta = {
+  title: "Preview/WebPreviewConsole",
+  component: WebPreviewConsole,
+  parameters: { layout: "padded" },
+  tags: ["autodocs"],
+} satisfies Meta<typeof WebPreviewConsole>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+const at = (s: string) => new Date(`2026-08-31T${s}`)
+
+const LOGS: WebPreviewConsoleEntry[] = [
+  { level: "log", message: "页面就绪，用时 412ms", timestamp: at("14:32:01") },
+  { level: "info", message: "已注入预览桥接脚本", source: "preview-bridge.js:12", timestamp: at("14:32:01") },
+  { level: "warn", message: "图片缺少 width/height，布局会抖", source: "hero.tsx:42", timestamp: at("14:32:03") },
+  {
+    level: "error",
+    message: "Uncaught TypeError: cannot read properties of null (reading 'focus')",
+    source: "app.js:1187",
+    timestamp: at("14:32:08"),
+  },
+  { level: "log", message: "重试 (2) 成功 · 3.2s", timestamp: at("14:32:11") },
+]
+
+/**
+ * 展开态：日志区是常暗终端域，浅/暗两个主题下逐像素一致；
+ * 级别除颜色外还占一个等宽字形位（R1 双编码）。
+ */
+export const Default: Story = {
+  args: { logs: LOGS, defaultOpen: true },
+}
+
+/** 折叠态：头部保留 warn/error 计数（mono + tabular-nums），不展开也知道有没有出错。 */
+export const Collapsed: Story = {
+  args: { logs: LOGS, defaultOpen: false },
+}
+
+/** 空态：一句人话，落在终端底上。 */
+export const EmptyLog: Story = {
+  args: { logs: [], defaultOpen: true },
+}
+
+/** 带清空动作。 */
+export const Clearable: Story = {
+  args: { logs: LOGS, defaultOpen: true, onClear: () => {} },
+}
+
+/** 只有 log 级：无级别色，只剩终端文字色。 */
+export const PlainOutput: Story = {
+  args: {
+    defaultOpen: true,
+    logs: [
+      { level: "log", message: "orbitwork run brief --fast", timestamp: at("14:31:58") },
+      { level: "log", message: "已写回任务卡，完成度 82%", timestamp: at("14:32:12") },
+    ],
+  },
+}

package/src/components/domain/browser/WebPreviewConsole/WebPreviewConsoleSource.test.mjs

@@ -0,0 +1,66 @@
+import assert from "node:assert/strict"
+import { readFile } from "node:fs/promises"
+import test from "node:test"
+import { fileURLToPath } from "node:url"
+
+const source = await readFile(new URL("./index.tsx", import.meta.url), "utf8")
+const allowlist = JSON.parse(
+  await readFile(new URL("../../../../../scripts/ds2-allowlist.json", import.meta.url), "utf8"),
+)
+
+/** 只在「代码」上验禁令：注释里点名 token 是文档，不是用法。 */
+const code = source.replace(/\/\*[\s\S]*?\*\//g, "").replace(/^[ \t]*\/\/.*$/gm, "")
+
+test("日志区是终端语境常暗域：恒定 --ow-term-* + 局部 data-theme=dark", () => {
+  assert.match(source, /data-theme="dark"/)
+  assert.match(source, /background: "var\(--ow-term-bg\)"/)
+  assert.match(source, /color: "var\(--ow-term-text\)"/)
+})
+
+test("级别色取 ANSI 族（终端语义色），不借 UI 功能色", () => {
+  assert.match(source, /warn: "var\(--ow-ansi-yellow\)"/)
+  assert.match(source, /error: "var\(--ow-ansi-red\)"/)
+  assert.match(source, /info: "var\(--ow-ansi-blue\)"/)
+  assert.doesNotMatch(code, /--ow-warning|--ow-error\b/)
+})
+
+test("term 恒定域已在 allowlist 登记，且带语境理由", () => {
+  const key = "src/components/domain/browser/WebPreviewConsole/**"
+  assert.ok(allowlist.term.includes(key), "allowlist.term 缺 WebPreviewConsole")
+  assert.match(allowlist.$reasons[key], /term：/)
+})
+
+test("R1 双编码：级别除颜色外还占一个等宽字形位", () => {
+  assert.match(source, /const LEVEL_GLYPH: Record<WebPreviewConsoleLevel, string>/)
+  assert.match(source, /data-ow-part="glyph"/)
+  assert.match(source, /aria-label=\{LEVEL_LABEL\[entry\.level\]\}/)
+})
+
+test("§7 读数：日志与计数一律 mono + tabular-nums", () => {
+  assert.match(source, /font-\[family-name:var\(--ow-font-mono\)\][\s\S]{0,120}\[font-variant-numeric:tabular-nums\]/)
+  assert.match(source, /data-ow-part="count"/)
+})
+
+test("只读日志出口：不含输入提示符，因而不占状态极、无荧黄", () => {
+  assert.doesNotMatch(code, /<input|<textarea|--ow-term-cursor/)
+  assert.doesNotMatch(code, /--ow-beacon|--ow-accent-dot|--ow-yellow|--ow-data-today/)
+})
+
+test("折叠头是普通 UI 面：hover/press 走 --ow-hover/--ow-press，§9 缓动只用 ease-beacon", () => {
+  assert.match(source, /hover:bg-\[var\(--ow-hover\)\]/)
+  assert.match(source, /active:bg-\[var\(--ow-press\)\]/)
+  assert.match(source, /var\(--ow-ease-beacon\)/)
+  assert.match(source, /motion-reduce:transition-none/)
+})
+
+test("Tailwind 任意值 var() 带类型标注", () => {
+  assert.equal(source.match(/(?:text|border)-\[(?!color:)var\(/g), null)
+  assert.equal(source.match(/font-\[(?!family-name:)var\(/g), null)
+})
+
+test("旧 WebPreview 复合件里的同名件已改成兼容导出", async () => {
+  const legacy = await readFile(fileURLToPath(new URL("../WebPreview/index.tsx", import.meta.url)), "utf8")
+  assert.match(legacy, /@deprecated[\s\S]*?WebPreviewConsole/)
+  assert.match(legacy, /\} from "\.\.\/WebPreviewConsole"/)
+  assert.doesNotMatch(legacy, /export function WebPreviewConsole/)
+})

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

@@ -0,0 +1,239 @@
+"use client"
+
+import { type ReactNode, useMemo, useState } from "react"
+import { cn } from "../../../../lib/utils"
+import { ChevDown, Trash } from "../../../composite/Icons"
+import { Button } from "../../../primitives"
+
+/**
+ * WebPreviewConsole —— 网页预览「控制台」（蓝图批次④：WebPreview 族 7 件收敛为
+ * Shell / Nav / Console 三件骨架中的第三件）。
+ *
+ * ── 终端语境（§3 常暗域白名单）───────────────────────────────────────
+ * 控制台是**终端**，不是普通面板：日志区底/字取恒定 `--ow-term-bg` / `--ow-term-text`，
+ * 浅暗两档完全一致；级别色取 ANSI 族——`warn` = `--ow-ansi-yellow`（琥珀，刻意远离荧黄）、
+ * `error` = `--ow-ansi-red`、`info` = `--ow-ansi-blue`、时间戳 = `--ow-ansi-br-black`。
+ * 这些是终端语义色，不是 UI 功能色，所以不走 `--ow-warning` / `--ow-error`。
+ * allowlist 已按 term 语境登记 `src/components/domain/browser/WebPreviewConsole/**`。
+ *
+ * **无荧黄**：ui-terminal-code 卡里荧黄在终端只有一个角色——聚焦的终端光标。本件是
+ * **只读日志出口**（没有可输入的提示符），因此不占状态极，R3 中性件成立。日后若加
+ * eval 输入行，光标才可取 `--ow-term-cursor`，并且必须在规格卡上旁注所占极。
+ *
+ * ── 归口 ─────────────────────────────────────────────────────────────
+ * 继承自 `WebPreview` 复合件里的 `WebPreviewConsole` 折叠段（原先只是普通 surface 面，
+ * 没有终端语境，级别色错用 UI 功能色）。旧名在 `../WebPreview` 保留 `@deprecated` 导出。
+ *
+ * 折叠头随主题走普通面（它是 UI 而不是终端）：hover `--ow-hover` / press `--ow-press`，
+ * 计数徽标是 §7 读数 → mono ＋ tabular-nums。
+ *
+ * ── 空态口径（写死备查，免得每轮审计重提）─────────────────────────────
+ * 日志区没有日志时渲的是**一行字**（`data-ow-part="empty"` 的 `<p>`），不是
+ * `primitives/EmptyState`：这是「字段位占位」——控制台是壳里的一个折叠槽，槽内没内容
+ * 时不该弹出信标图形＋动作钮的 G5 空态版面。既定态给这一类显式开了一行字的例外。
+ * 字色取 `--ow-ansi-br-black` 而不是 `--ow-text-3`：这一行落在常暗的终端域里，跟着
+ * 终端语义色走才对得上底。
+ */
+
+export type WebPreviewConsoleLevel = "log" | "info" | "warn" | "error"
+
+export interface WebPreviewConsoleEntry {
+  level: WebPreviewConsoleLevel
+  message: string
+  /** 来源（脚本 URL / 行号），mono 次要色 */
+  source?: string
+  timestamp: Date
+}
+
+export interface WebPreviewConsoleProps {
+  logs?: WebPreviewConsoleEntry[]
+  /** 受控展开；不传则自管理 */
+  open?: boolean
+  defaultOpen?: boolean
+  onOpenChange?: (open: boolean) => void
+  /** 清空日志；不传则不出清空钮 */
+  onClear?: () => void
+  /** 折叠头文案 */
+  label?: string
+  /** 展开后日志区最大高度 */
+  maxHeight?: number | string
+  /** 无日志时的一句话 */
+  emptyMessage?: ReactNode
+  className?: string
+}
+
+/** ANSI 级别色：终端语义色，非 UI 功能色（见文件头注释）。 */
+const LEVEL_COLOR: Record<WebPreviewConsoleLevel, string> = {
+  log: "var(--ow-term-text)",
+  info: "var(--ow-ansi-blue)",
+  warn: "var(--ow-ansi-yellow)",
+  error: "var(--ow-ansi-red)",
+}
+
+/** R1 双编码：级别除了颜色，还有一个固定宽度的 mono 前缀字形。 */
+const LEVEL_GLYPH: Record<WebPreviewConsoleLevel, string> = {
+  log: "  ",
+  info: "i ",
+  warn: "! ",
+  error: "x ",
+}
+
+const LEVEL_LABEL: Record<WebPreviewConsoleLevel, string> = {
+  log: "日志",
+  info: "信息",
+  warn: "警告",
+  error: "错误",
+}
+
+export function WebPreviewConsole({
+  logs = [],
+  open,
+  defaultOpen = false,
+  onOpenChange,
+  onClear,
+  label = "控制台",
+  maxHeight = 192,
+  emptyMessage = "页面还没有输出。",
+  className = "",
+}: WebPreviewConsoleProps) {
+  const [uncontrolledOpen, setUncontrolledOpen] = useState(defaultOpen)
+  const isOpen = open ?? uncontrolledOpen
+  const toggle = () => {
+    const next = !isOpen
+    if (open === undefined) setUncontrolledOpen(next)
+    onOpenChange?.(next)
+  }
+
+  // 折叠时也要能一眼看出「有没有出错」——R1：数字（文字）＋级别色两重编码。
+  const counts = useMemo(() => {
+    let warn = 0
+    let error = 0
+    for (const entry of logs) {
+      if (entry.level === "warn") warn += 1
+      else if (entry.level === "error") error += 1
+    }
+    return { error, warn }
+  }, [logs])
+
+  return (
+    <div
+      data-slot="web-preview-console"
+      data-ow-state={isOpen ? "open" : "closed"}
+      className={cn("shrink-0 border-t border-[color:var(--ow-border)] bg-[var(--ow-surface)]", className)}
+    >
+      <div data-ow-part="header" className="flex items-center gap-2 pr-2">
+        <Button
+          type="button"
+          data-ow-part="toggle"
+          variant="ghost"
+          size="sm"
+          aria-expanded={isOpen}
+          onClick={toggle}
+          className="h-8 min-w-0 flex-1 justify-start gap-2 rounded-none px-3 font-medium text-ow-fs-ui text-[color:var(--ow-text-2)] hover:bg-[var(--ow-hover)] active:bg-[var(--ow-press)]"
+        >
+          <ChevDown
+            aria-hidden="true"
+            data-ow-part="chevron"
+            className={cn(
+              "w-3.5 h-3.5 [transition:transform_var(--ow-dur-2)_var(--ow-ease-beacon)] motion-reduce:transition-none",
+              isOpen ? "rotate-0" : "-rotate-90",
+            )}
+          />
+          <span>{label}</span>
+          {/* §7 读数：条数 mono ＋ tabular-nums；数字本身就是 R1 的第二编码 */}
+          <span
+            data-ow-part="count"
+            className="font-[family-name:var(--ow-font-mono)] [font-variant-numeric:tabular-nums] text-ow-fs-eyebrow text-[color:var(--ow-text-3)]"
+          >
+            {logs.length}
+          </span>
+          {counts.warn > 0 && (
+            <span
+              data-ow-part="count-warn"
+              title={`${LEVEL_LABEL.warn} ${counts.warn} 条`}
+              className="font-[family-name:var(--ow-font-mono)] [font-variant-numeric:tabular-nums] text-ow-fs-eyebrow"
+              style={{ color: LEVEL_COLOR.warn }}
+            >
+              {LEVEL_GLYPH.warn.trim()}
+              {counts.warn}
+            </span>
+          )}
+          {counts.error > 0 && (
+            <span
+              data-ow-part="count-error"
+              title={`${LEVEL_LABEL.error} ${counts.error} 条`}
+              className="font-[family-name:var(--ow-font-mono)] [font-variant-numeric:tabular-nums] text-ow-fs-eyebrow"
+              style={{ color: LEVEL_COLOR.error }}
+            >
+              {LEVEL_GLYPH.error.trim()}
+              {counts.error}
+            </span>
+          )}
+        </Button>
+        {onClear && isOpen && (
+          <Button
+            type="button"
+            data-ow-part="clear"
+            variant="ghost"
+            size="sm"
+            className="h-7 w-7 shrink-0 p-0 [&_svg]:w-4 [&_svg]:h-4 text-[color:var(--ow-text-3)] hover:text-[color:var(--ow-text)]"
+            title="清空控制台"
+            aria-label="清空控制台"
+            onClick={onClear}
+          >
+            <Trash aria-hidden="true" />
+          </Button>
+        )}
+      </div>
+
+      {isOpen && (
+        /* 日志区＝常暗终端域：恒定 --ow-term-* / --ow-ansi-*，两个主题下逐像素一致。 */
+        <div
+          data-ow-part="log"
+          data-theme="dark"
+          role="log"
+          aria-live="polite"
+          aria-label={label}
+          className="overflow-y-auto px-3 py-2 font-[family-name:var(--ow-font-mono)] text-ow-fs-code leading-[var(--ow-lh-code)] [font-variant-numeric:tabular-nums]"
+          style={{
+            background: "var(--ow-term-bg)",
+            color: "var(--ow-term-text)",
+            maxHeight,
+          }}
+        >
+          {logs.length === 0 ? (
+            <p data-ow-part="empty" className="m-0" style={{ color: "var(--ow-ansi-br-black)" }}>
+              {emptyMessage}
+            </p>
+          ) : (
+            logs.map((entry, index) => (
+              <div
+                data-ow-part="entry"
+                data-ow-level={entry.level}
+                key={`${entry.timestamp.getTime()}-${entry.level}-${index}`}
+                className="flex gap-2 whitespace-pre-wrap break-words"
+                style={{ color: LEVEL_COLOR[entry.level] }}
+              >
+                <span data-ow-part="time" className="shrink-0" style={{ color: "var(--ow-ansi-br-black)" }}>
+                  {entry.timestamp.toLocaleTimeString("zh-CN", { hour12: false })}
+                </span>
+                {/* R1：级别不只有颜色，还占一个等宽字形位 */}
+                <span data-ow-part="glyph" className="shrink-0" aria-label={LEVEL_LABEL[entry.level]}>
+                  {LEVEL_GLYPH[entry.level]}
+                </span>
+                <span data-ow-part="message" className="min-w-0 flex-1">
+                  {entry.message}
+                </span>
+                {entry.source && (
+                  <span data-ow-part="source" className="shrink-0" style={{ color: "var(--ow-ansi-br-black)" }}>
+                    {entry.source}
+                  </span>
+                )}
+              </div>
+            ))
+          )}
+        </div>
+      )}
+    </div>
+  )
+}