@orbit-work/ui 0.1.0

package/src/components/domain/artifacts/ArtifactPreviewSidebarView/index.tsx

@@ -0,0 +1,212 @@
+"use client"
+
+import { type ReactNode, useCallback, useRef, useState } from "react"
+import { CodePreview } from "../../../composite/CodePreview"
+import { Close, Doc, Maximize, Share } from "../../../composite/Icons"
+import { MarkdownPreview } from "../../../composite/MarkdownPreview"
+import { Button, EmptyState, Tabs } from "../../../primitives"
+import { OfficePreview } from "../../office/OfficePreview"
+import { PdfPreview } from "../../office/PdfPreview"
+
+/**
+ * ArtifactPreviewSidebarView —— 产物预览侧栏（04 预览域的「壳」形态）。
+ *
+ * 归口口径与 `FilePreviewDialog` 一致：本件是壳，负责 48（`--ow-titlebar-h`）标题带
+ * （文件名 mono＋tabular-nums ＋ 28×28 图标钮组）与页签行；内嵌的四个适配器一律走
+ * 「坐进壳里」的开关（`MarkdownPreview bare` / `PdfPreview|OfficePreview chrome={false}`），
+ * 交出自绘的卡片立面与文件名标题行——§5「一件事只有一层边」，也消掉重复文件名行。
+ *
+ * 标题带与地同色、无分隔线；唯一的横线由页签行（`Tabs` 底线式，基线由本件容器给）承担，
+ * 全库页签只此一套形状。空态一律 G5（`EmptyState` 信标母题）。
+ * wide 态是离地层：按 §5 用 `--ow-shadow-pop` 档（原 shadow-3＝modal 档过重）。
+ */
+
+export type ArtifactPreviewView =
+  | { kind: "markdown"; name: string; path: string; content: string }
+  | { kind: "code"; name: string; path: string; content: string; language: string }
+  | { kind: "pdf" | "web"; name: string; path: string; url: string; mimeType?: string }
+  | { kind: "office"; name: string; path: string; url: string; fileType: "word" | "excel" | "powerpoint" }
+
+export type ArtifactPreviewPanelMode = "normal" | "wide"
+
+export interface ArtifactPreviewSidebarViewProps {
+  preview: ArtifactPreviewView
+  panelMode: ArtifactPreviewPanelMode
+  onPanelModeChange: (mode: ArtifactPreviewPanelMode) => void
+  onClose: () => void
+  onOpenDefault: (path: string) => void
+  renderMarkdown?: (content: string) => ReactNode
+}
+
+const PREVIEW_LABELS: Record<ArtifactPreviewView["kind"], string> = {
+  markdown: "Markdown",
+  code: "代码",
+  pdf: "PDF",
+  web: "网页",
+  office: "Office",
+}
+
+/** 页签：全库唯一一套形状（底线式）。仅 markdown 出。 */
+const MARKDOWN_TABS = [
+  { key: "preview", label: "预览" },
+  { key: "raw", label: "源码" },
+]
+
+export function ArtifactPreviewSidebarView({
+  preview,
+  panelMode,
+  onPanelModeChange,
+  onClose,
+  onOpenDefault,
+  renderMarkdown,
+}: ArtifactPreviewSidebarViewProps) {
+  const [rawMarkdown, setRawMarkdown] = useState(false)
+  const isWide = panelMode === "wide"
+  // 只有拿到 renderMarkdown 才有「预览／源码」两个视图可切；没有渲染器时只剩源码一个视图，不出页签。
+  const hasMarkdownTabs = preview.kind === "markdown" && !!renderMarkdown
+  const sidebarRef = useRef<HTMLElement>(null)
+  const dragging = useRef(false)
+
+  const onResizeStart = useCallback((event: React.MouseEvent) => {
+    event.preventDefault()
+    dragging.current = true
+    const startX = event.clientX
+    const startWidth = sidebarRef.current?.offsetWidth ?? 430
+    const onMove = (moveEvent: MouseEvent) => {
+      if (!dragging.current || !sidebarRef.current) return
+      const parentWidth = sidebarRef.current.parentElement?.offsetWidth ?? window.innerWidth
+      const nextWidth = Math.min(Math.max(startWidth + startX - moveEvent.clientX, 280), parentWidth - 700)
+      sidebarRef.current.style.width = `${nextWidth}px`
+    }
+    const onUp = () => {
+      dragging.current = false
+      document.removeEventListener("mousemove", onMove)
+      document.removeEventListener("mouseup", onUp)
+      document.body.style.cursor = ""
+      document.body.style.userSelect = ""
+    }
+    document.body.style.cursor = "col-resize"
+    document.body.style.userSelect = "none"
+    document.addEventListener("mousemove", onMove)
+    document.addEventListener("mouseup", onUp)
+  }, [])
+
+  const emptyBody = (message: ReactNode, action?: { label: string; onAction: () => void }) => (
+    <div className="artifact-sidebar__empty">
+      <EmptyState message={message} actionLabel={action?.label} onAction={action?.onAction} />
+    </div>
+  )
+
+  let body: ReactNode = null
+  if (preview.kind === "markdown") {
+    if (!preview.content.trim()) {
+      body = emptyBody("这个文件没有可预览的内容。")
+    } else if (rawMarkdown || !renderMarkdown) {
+      // bare：交出自绘卡片立面与文件名标题行——壳的标题带已经承担文件名。
+      // 没有渲染器时也走源码档：MarkdownPreview 的「未渲染」兜底会把正文塞进 .ow-md-rendered 的
+      // pre 代码面（暗档下是浅底卡），不是这里想要的立面。
+      body = (
+        <MarkdownPreview
+          bare
+          rawMode
+          className="artifact-sidebar__preview"
+          content={preview.content}
+          fileName={preview.name}
+        />
+      )
+    } else {
+      body = (
+        <div className="artifact-sidebar__preview artifact-sidebar__markdown-body">
+          <div className="artifact-sidebar__markdown">{renderMarkdown(preview.content)}</div>
+        </div>
+      )
+    }
+  } else if (preview.kind === "code") {
+    body = preview.content.trim() ? (
+      <CodePreview className="artifact-sidebar__preview" language={preview.language} code={preview.content} />
+    ) : (
+      emptyBody("这个文件没有可预览的内容。")
+    )
+  } else if (preview.kind === "pdf") {
+    body = <PdfPreview className="artifact-sidebar__preview" chrome={false} src={preview.url} fileName={preview.name} />
+  } else if (preview.kind === "office") {
+    body = (
+      <OfficePreview
+        className="artifact-sidebar__preview"
+        chrome={false}
+        src={preview.url}
+        fileType={preview.fileType}
+      />
+    )
+  } else {
+    // web：侧栏不内嵌外部页面，给 G5 空态＋一个出口动作。
+    body = emptyBody("网页预览要在系统浏览器里打开。", {
+      label: "系统打开",
+      onAction: () => onOpenDefault(preview.path),
+    })
+  }
+
+  return (
+    <aside ref={sidebarRef} className={`artifact-sidebar artifact-sidebar--${panelMode}`} aria-label="产物预览">
+      {!isWide && <div className="artifact-sidebar__resize-handle" onMouseDown={onResizeStart} />}
+      <header className="artifact-sidebar__head">
+        <div className="artifact-sidebar__title">
+          <span className="artifact-sidebar__icon">
+            <Doc />
+          </span>
+          <div className="artifact-sidebar__title-text">
+            {/* §7 读数：文件名按读数走 mono＋tabular-nums，与 FilePreviewDialog 标题栏同口径。 */}
+            <div className="artifact-sidebar__name" title={preview.name}>
+              {preview.name}
+            </div>
+            <div className="artifact-sidebar__meta">{PREVIEW_LABELS[preview.kind]} 预览</div>
+          </div>
+        </div>
+        <Button
+          variant="ghost"
+          size="sm"
+          type="button"
+          className="artifact-sidebar__action"
+          title="系统打开"
+          aria-label="系统打开"
+          icon={<Share aria-hidden="true" />}
+          onClick={() => onOpenDefault(preview.path)}
+        />
+        <Button
+          variant="ghost"
+          size="sm"
+          type="button"
+          className="artifact-sidebar__action"
+          title={isWide ? "恢复面板宽度" : "展开面板"}
+          aria-label={isWide ? "恢复面板宽度" : "展开面板"}
+          aria-pressed={isWide}
+          icon={<Maximize aria-hidden="true" />}
+          onClick={() => {
+            if (sidebarRef.current) sidebarRef.current.style.width = ""
+            onPanelModeChange(isWide ? "normal" : "wide")
+          }}
+        />
+        <Button
+          variant="ghost"
+          size="sm"
+          type="button"
+          className="artifact-sidebar__action"
+          title="关闭预览"
+          aria-label="关闭预览"
+          icon={<Close aria-hidden="true" />}
+          onClick={onClose}
+        />
+      </header>
+      {hasMarkdownTabs && (
+        <Tabs
+          className="artifact-sidebar__tabs"
+          size="sm"
+          items={MARKDOWN_TABS}
+          activeKey={rawMarkdown ? "raw" : "preview"}
+          onChange={(key) => setRawMarkdown(key === "raw")}
+        />
+      )}
+      <div className="artifact-sidebar__body">{body}</div>
+    </aside>
+  )
+}

package/src/components/domain/artifacts/index.ts

@@ -0,0 +1 @@
+export * from "./ArtifactPreviewSidebarView"

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

@@ -0,0 +1,211 @@
+import type { Meta, StoryObj } from "@storybook/react"
+import * as React from "react"
+import { BrowserAnnotationPopupView } from "./index"
+
+const meta = {
+  title: "Browser/BrowserAnnotationPopupView",
+  component: BrowserAnnotationPopupView,
+  parameters: {
+    layout: "centered",
+  },
+  tags: ["autodocs"],
+} satisfies Meta<typeof BrowserAnnotationPopupView>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const CollapsedDiv: Story = {
+  args: {
+    defaultExpanded: false,
+    tagName: "div",
+    onCancel: () => console.log("cancel"),
+    onSubmit: (comment) => console.log("submit", comment),
+  },
+}
+
+export const ExpandedDiv: Story = {
+  args: {
+    defaultExpanded: true,
+    tagName: "div",
+    onCancel: () => console.log("cancel"),
+    onSubmit: (comment) => console.log("submit", comment),
+  },
+}
+
+export const CollapsedButton: Story = {
+  args: {
+    defaultExpanded: false,
+    tagName: "button",
+    onCancel: () => console.log("cancel"),
+    onSubmit: (comment) => console.log("submit", comment),
+  },
+}
+
+export const ExpandedButton: Story = {
+  args: {
+    defaultExpanded: true,
+    tagName: "button",
+    onCancel: () => console.log("cancel"),
+    onSubmit: (comment) => console.log("submit", comment),
+  },
+}
+
+export const CollapsedInput: Story = {
+  args: {
+    defaultExpanded: false,
+    tagName: "input",
+    onCancel: () => console.log("cancel"),
+    onSubmit: (comment) => console.log("submit", comment),
+  },
+}
+
+export const ExpandedInput: Story = {
+  args: {
+    defaultExpanded: true,
+    tagName: "input",
+    onCancel: () => console.log("cancel"),
+    onSubmit: (comment) => console.log("submit", comment),
+  },
+}
+
+export const CollapsedA: Story = {
+  args: {
+    defaultExpanded: false,
+    tagName: "a",
+    onCancel: () => console.log("cancel"),
+    onSubmit: (comment) => console.log("submit", comment),
+  },
+}
+
+export const ExpandedA: Story = {
+  args: {
+    defaultExpanded: true,
+    tagName: "a",
+    onCancel: () => console.log("cancel"),
+    onSubmit: (comment) => console.log("submit", comment),
+  },
+}
+
+export const CollapsedSpan: Story = {
+  args: {
+    defaultExpanded: false,
+    tagName: "span",
+    onCancel: () => console.log("cancel"),
+    onSubmit: (comment) => console.log("submit", comment),
+  },
+}
+
+export const ExpandedSpan: Story = {
+  args: {
+    defaultExpanded: true,
+    tagName: "span",
+    onCancel: () => console.log("cancel"),
+    onSubmit: (comment) => console.log("submit", comment),
+  },
+}
+
+export const CollapsedP: Story = {
+  args: {
+    defaultExpanded: false,
+    tagName: "p",
+    onCancel: () => console.log("cancel"),
+    onSubmit: (comment) => console.log("submit", comment),
+  },
+}
+
+export const ExpandedP: Story = {
+  args: {
+    defaultExpanded: true,
+    tagName: "p",
+    onCancel: () => console.log("cancel"),
+    onSubmit: (comment) => console.log("submit", comment),
+  },
+}
+
+export const CollapsedH1: Story = {
+  args: {
+    defaultExpanded: false,
+    tagName: "h1",
+    onCancel: () => console.log("cancel"),
+    onSubmit: (comment) => console.log("submit", comment),
+  },
+}
+
+export const ExpandedH1: Story = {
+  args: {
+    defaultExpanded: true,
+    tagName: "h1",
+    onCancel: () => console.log("cancel"),
+    onSubmit: (comment) => console.log("submit", comment),
+  },
+}
+
+export const CollapsedImg: Story = {
+  args: {
+    defaultExpanded: false,
+    tagName: "img",
+    onCancel: () => console.log("cancel"),
+    onSubmit: (comment) => console.log("submit", comment),
+  },
+}
+
+export const ExpandedImg: Story = {
+  args: {
+    defaultExpanded: true,
+    tagName: "img",
+    onCancel: () => console.log("cancel"),
+    onSubmit: (comment) => console.log("submit", comment),
+  },
+}
+
+export const InContext: Story = {
+  render: () => (
+    <div style={{ width: 800, height: 600, background: "var(--ow-bg)", padding: 32, position: "relative" }}>
+      <div
+        style={{
+          padding: 16,
+          border: "2px solid var(--ow-info)",
+          borderRadius: 8,
+          background: "var(--ow-surface)",
+          marginBottom: 16,
+        }}
+      >
+        <button
+          type="button"
+          style={{
+            padding: "8px 16px",
+            background: "var(--ow-btn-primary-bg)",
+            color: "var(--ow-btn-primary-fg)",
+            border: "none",
+            borderRadius: 6,
+            cursor: "pointer",
+          }}
+        >
+          Click me
+        </button>
+      </div>
+      <div style={{ position: "absolute", top: 100, left: 50 }}>
+        <BrowserAnnotationPopupView
+          defaultExpanded={true}
+          tagName="button"
+          onCancel={() => console.log("cancel")}
+          onSubmit={(comment) => console.log("submit", comment)}
+        />
+      </div>
+    </div>
+  ),
+}
+
+export const WithComment: Story = {
+  render: () => {
+    const [comment, setComment] = React.useState("This button should have hover styles")
+    return (
+      <BrowserAnnotationPopupView
+        defaultExpanded={true}
+        tagName="button"
+        onCancel={() => console.log("cancel")}
+        onSubmit={(c) => console.log("submit", c)}
+      />
+    )
+  },
+}

package/src/components/domain/browser/BrowserAnnotationPopupView/BrowserAnnotationPopupViewSource.test.mjs

@@ -0,0 +1,82 @@
+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 skin = await readFile(new URL("../../../../lib/browser-annotation-popup.ts", import.meta.url), "utf8")
+
+/** 样式串里除镜像表（种子声明）外的部分——规则块。
+ * W4 起镜像表按行铺开、每行右注所抄 DS token，故「种子」不再是单行：
+ * 剔除 CSS 注释后，凡 `--ow-annotation-*:` 声明行都算种子，其余行是规则块。 */
+const skinStyles = skin.slice(skin.indexOf("export const BROWSER_ANNOTATION_POPUP_STYLES"))
+const skinRules = skinStyles
+  .replace(/\/\*[\s\S]*?\*\//g, "")
+  .split("\n")
+  .filter((line) => !line.includes("all:initial") && !/^--ow-annotation-[a-z0-9-]+\s*:/.test(line.trim()))
+
+test("批注气泡的类名前缀三方一致：样式表用什么，组件就得挂什么", () => {
+  // 这份皮肤注进的是第三方页面，选择器就是它与 DOM 之间唯一的接口。
+  // 历史事故：preload 建的是 __orbit-popup*，样式表却是 __ow-popup*，
+  // 宿主页里的气泡一直是没有样式的裸 DOM。
+  assert.match(skinStyles, /\.__ow-popup\{/)
+  assert.ok(!skinStyles.includes("__orbit-popup"), "样式表不得回流到 __orbit-popup 前缀")
+
+  for (const part of [
+    "collapsed",
+    "expanded",
+    "top",
+    "settings-btn",
+    "input",
+    "submit-btn",
+    "tag",
+    "props",
+    "prop-label",
+    "prop-value",
+    "prop-input",
+    "prop-unit",
+    "prop-select",
+    "color-swatch",
+    "spacing",
+    "actions",
+    "cancel",
+    "confirm",
+  ]) {
+    assert.ok(skinStyles.includes(`.__ow-popup__${part}`), `样式表缺 .__ow-popup__${part}`)
+    assert.ok(source.includes(`__ow-popup__${part}`), `组件没挂 __ow-popup__${part}，预览会是裸 DOM`)
+  }
+  assert.match(source, /cn\("__ow-popup", "is-preview", expanded && "is-expanded"\)/)
+})
+
+test("规则块零裸色：字面色值只许出现在种子声明那一行", () => {
+  // 宿主页没有全局 --ow-* token 表，所以这行 --ow-annotation-* 就是 DS token 的镜像，
+  // 是本文件唯一允许写死颜色的地方；规则里一律 var()。
+  for (const line of skinRules) {
+    assert.ok(!/#[0-9a-fA-F]{3,8}\b/.test(line), `规则块出现裸 hex: ${line.slice(0, 80)}`)
+    assert.ok(!/\brgba?\(/.test(line), `规则块出现裸 rgb(a): ${line.slice(0, 80)}`)
+  }
+  // W4 去痕：fg-faint(#C2C3C1) 在 DS 2.0 是 --ow-border-strong 不是文字档，已并入 fg-subtle；
+  // 其位由 line-strong（§6 输入 hover 边框档）接任。
+  for (const token of ["--ow-annotation-on-fill", "--ow-annotation-line-strong", "--ow-annotation-shadow-pop"]) {
+    assert.ok(skinStyles.includes(`${token}:`), `种子里缺 ${token}`)
+  }
+})
+
+test("工具条按钮走 ghost：静止透明，hover 才上底；§6 焦点环补齐", () => {
+  assert.match(skinStyles, /\.__ow-popup__settings-btn\{[^}]*background:transparent;/)
+  assert.match(skinStyles, /\.__ow-popup__submit-btn\{[^}]*background:transparent;/)
+  // §7 控件高 {28,32,40}／图标钮 ≥28×28：同一行的两枚钮同档，旧值 30×30 表外（W5 去痕）
+  assert.match(skinStyles, /\.__ow-popup__settings-btn\{[^}]*width:28px;height:28px;/)
+  assert.match(skinStyles, /\.__ow-popup__submit-btn\{[^}]*width:28px;height:28px;/)
+  assert.match(skinStyles, /\.__ow-popup__settings-btn:hover\{background:var\(--ow-annotation-bg-muted\);\}/)
+  assert.match(skinStyles, /\.__ow-popup__submit-btn:hover\{background:var\(--ow-annotation-bg-muted\);\}/)
+  // 有字＝能提交，实底＋提色；形状不变，颜色是第二编码（R1）。
+  assert.match(skinStyles, /\.__ow-popup__submit-btn\.has-text\{background:var\(--ow-annotation-primary\);/)
+  assert.match(skinStyles, /:focus-visible[^{]*\{outline:var\(--ow-focus-ring-w, 2px\) solid/)
+})
+
+test("R3 中性件：批注气泡不带信标，也不写死荧黄", () => {
+  for (const yellow of ["--ow-yellow", "--ow-beacon", "--ow-accent-dot"]) {
+    assert.ok(!skin.includes(yellow), `${yellow} 不该出现在批注气泡里`)
+    assert.ok(!source.includes(yellow), `${yellow} 不该出现在批注气泡里`)
+  }
+})