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

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

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

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

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

@@ -1,239 +0,0 @@
-"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>
-  )
-}