@orbit-work/ui 0.1.0

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

@@ -0,0 +1,288 @@
+import type { Meta, StoryObj } from "@storybook/react"
+import { PreviewDialog } from "./index"
+
+const meta = {
+  title: "Browser/WebPreviewDialog",
+  component: PreviewDialog,
+  parameters: {
+    layout: "fullscreen",
+  },
+  tags: ["autodocs"],
+} satisfies Meta<typeof PreviewDialog>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Open: Story = {
+  args: {
+    open: true,
+    title: "Web Preview",
+    onClose: () => console.log("close"),
+    children: (
+      <div style={{ padding: 24, fontSize: 14, color: "var(--ow-text-2)" }}>
+        <p>Preview content goes here. This is the main content area of the dialog.</p>
+      </div>
+    ),
+  },
+}
+
+export const Closed: Story = {
+  args: {
+    open: false,
+    title: "Web Preview",
+    onClose: () => console.log("close"),
+    children: <div>This content is hidden when dialog is closed</div>,
+  },
+}
+
+export const Loading: Story = {
+  args: {
+    open: true,
+    title: "Loading Preview",
+    loading: true,
+    onClose: () => console.log("close"),
+    children: (
+      <div style={{ padding: 24 }}>
+        <p>Content underneath the loading overlay</p>
+      </div>
+    ),
+  },
+}
+
+export const WithIframe: Story = {
+  args: {
+    open: true,
+    title: "Website Preview",
+    onClose: () => console.log("close"),
+    children: (
+      <iframe
+        src="https://example.com"
+        title="Website preview"
+        style={{ width: "100%", height: "100%", border: "none" }}
+      />
+    ),
+  },
+}
+
+export const WithHtmlContent: Story = {
+  args: {
+    open: true,
+    title: "HTML Preview",
+    onClose: () => console.log("close"),
+    children: (
+      <div style={{ padding: 24, fontSize: 14, lineHeight: 1.6, color: "var(--ow-text)" }}>
+        <h1 style={{ fontSize: 24, marginBottom: 16 }}>Sample HTML Content</h1>
+        <p style={{ marginBottom: 12 }}>This preview dialog can display any HTML content.</p>
+        <ul style={{ marginBottom: 12, paddingLeft: 24 }}>
+          <li>Rendered HTML pages</li>
+          <li>Interactive components</li>
+          <li>Documents and reports</li>
+        </ul>
+        <p>The content area is fully scrollable and resizable.</p>
+      </div>
+    ),
+  },
+}
+
+export const WithImage: Story = {
+  args: {
+    open: true,
+    title: "Image Preview",
+    onClose: () => console.log("close"),
+    children: (
+      <div
+        style={{
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          padding: 24,
+          background: "var(--ow-surface)",
+        }}
+      >
+        <div
+          style={{
+            width: 400,
+            height: 300,
+            background: "var(--ow-border)",
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+            fontSize: 14,
+            color: "var(--ow-text-3)",
+          }}
+        >
+          Image placeholder
+        </div>
+      </div>
+    ),
+  },
+}
+
+export const LongTitle: Story = {
+  args: {
+    open: true,
+    title: "Very Long Preview Dialog Title That Might Wrap to Multiple Lines in Some Cases",
+    onClose: () => console.log("close"),
+    children: <div style={{ padding: 24 }}>Preview content</div>,
+  },
+}
+
+export const ShortTitle: Story = {
+  args: {
+    open: true,
+    title: "Preview",
+    onClose: () => console.log("close"),
+    children: <div style={{ padding: 24 }}>Preview content</div>,
+  },
+}
+
+export const ChineseTitle: Story = {
+  args: {
+    open: true,
+    title: "网页预览",
+    onClose: () => console.log("close"),
+    children: (
+      <div style={{ padding: 24, fontSize: 14, color: "var(--ow-text-2)" }}>
+        <p>这是一个中文内容的预览对话框。</p>
+      </div>
+    ),
+  },
+}
+
+export const EmptyContent: Story = {
+  args: {
+    open: true,
+    title: "Empty Preview",
+    onClose: () => console.log("close"),
+    children: null,
+  },
+}
+
+export const ScrollableContent: Story = {
+  args: {
+    open: true,
+    title: "Long Content",
+    onClose: () => console.log("close"),
+    children: (
+      <div style={{ padding: 24, fontSize: 14, lineHeight: 1.6, color: "var(--ow-text-2)" }}>
+        {Array.from({ length: 50 }, (_, i) => (
+          <p key={i} style={{ marginBottom: 12 }}>
+            Paragraph {i + 1}: This is scrollable content to demonstrate the dialog's scrolling behavior.
+          </p>
+        ))}
+      </div>
+    ),
+  },
+}
+
+export const CodePreview: Story = {
+  args: {
+    open: true,
+    title: "Code Preview",
+    onClose: () => console.log("close"),
+    children: (
+      <div style={{ padding: 24, fontFamily: "monospace", fontSize: 13, color: "var(--ow-text)" }}>
+        <pre style={{ margin: 0, lineHeight: 1.5 }}>
+          {`function example() {
+  const message = "Hello, world!"
+  console.log(message)
+  return message
+}
+
+export default example`}
+        </pre>
+      </div>
+    ),
+  },
+}
+
+export const DarkContent: Story = {
+  args: {
+    open: true,
+    title: "Dark Preview",
+    onClose: () => console.log("close"),
+    children: (
+      <div style={{ background: "#000", color: "#fff", padding: 24, fontSize: 14, height: "100%" }}>
+        <p>Content with dark background</p>
+      </div>
+    ),
+  },
+}
+
+export const LoadingWithContent: Story = {
+  args: {
+    open: true,
+    title: "Loading...",
+    loading: true,
+    onClose: () => console.log("close"),
+    children: (
+      <div style={{ padding: 24, fontSize: 14, color: "var(--ow-text-2)" }}>
+        <h2 style={{ marginBottom: 12 }}>Partial Content</h2>
+        <p>Some content has loaded, but more is being fetched...</p>
+      </div>
+    ),
+  },
+}
+
+export const MinimalContent: Story = {
+  args: {
+    open: true,
+    title: "Minimal",
+    onClose: () => console.log("close"),
+    children: <div style={{ padding: 24 }}>Simple content</div>,
+  },
+}
+
+export const WideContent: Story = {
+  args: {
+    open: true,
+    title: "Wide Content Preview",
+    onClose: () => console.log("close"),
+    children: (
+      <div style={{ padding: 24, minWidth: 1200 }}>
+        <div style={{ display: "flex", gap: 16 }}>
+          <div style={{ flex: 1, padding: 16, background: "var(--ow-surface)", borderRadius: 8 }}>Column 1</div>
+          <div style={{ flex: 1, padding: 16, background: "var(--ow-surface)", borderRadius: 8 }}>Column 2</div>
+          <div style={{ flex: 1, padding: 16, background: "var(--ow-surface)", borderRadius: 8 }}>Column 3</div>
+        </div>
+      </div>
+    ),
+  },
+}
+
+export const InteractiveContent: Story = {
+  args: {
+    open: true,
+    title: "Interactive Preview",
+    onClose: () => console.log("close"),
+    children: (
+      <div style={{ padding: 24 }}>
+        <button
+          style={{
+            padding: "8px 16px",
+            fontSize: 14,
+            background: "var(--ow-btn-primary-bg)",
+            color: "var(--ow-btn-primary-fg)",
+            border: "none",
+            borderRadius: 6,
+            cursor: "pointer",
+          }}
+          onClick={() => console.log("button clicked")}
+        >
+          Click me
+        </button>
+        <input
+          type="text"
+          placeholder="Type something..."
+          style={{
+            marginLeft: 12,
+            padding: "8px 12px",
+            fontSize: 14,
+            border: "1px solid var(--ow-border)",
+            borderRadius: 6,
+          }}
+        />
+      </div>
+    ),
+  },
+}

package/src/components/domain/browser/WebPreviewDialog/WebPreviewDialogSource.test.mjs

@@ -0,0 +1,62 @@
+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("preview dialog provides only title, maximize, and close chrome", () => {
+  assert.match(source, /export function PreviewDialog/)
+  assert.match(source, /export const WebPreviewDialog = PreviewDialog/)
+  assert.match(source, /<OrbitworkModal/)
+  assert.match(source, /<Maximize \/>/)
+  assert.match(source, /<Close \/>/)
+  // §9 旋转圈退役：原 .8s 自转 Loader 图标 → 锁定件 BeaconSpinner size=18（<20px 小转子环 0.9s）
+  assert.match(source, /<BeaconSpinner size=\{18\} className="web-preview-dialog__loading-icon"/)
+  assert.doesNotMatch(source, /<Loader\b/)
+  assert.match(source, /overlayClassName="web-preview-dialog__overlay"/)
+  assert.match(source, /loading\?: boolean/)
+  assert.match(source, /role="status" aria-live="polite"/)
+  assert.match(source, /加载中…/)
+  assert.match(source, /aria-pressed=\{maximized\}/)
+  assert.match(source, /setMaximized\(\(value\) => !value\)/)
+  assert.doesNotMatch(source, /Refresh|Address|goBack|goForward/)
+})
+
+test("web preview dialog layout uses semantic theme tokens", () => {
+  const dialogStyles = styles.match(/\/\* Chrome-free website preview dialog[\s\S]*?(?=\n\/\* =|$)/)?.[0] ?? ""
+  assert.match(dialogStyles, /web-preview-dialog--maximized/)
+  assert.match(dialogStyles, /align-items: flex-end/)
+  assert.match(dialogStyles, /justify-content: flex-end/)
+  assert.match(dialogStyles, /--web-preview-dialog-drag-height: 56px/)
+  // §5 z 梯度：模态档 +20（网页预览浮窗要压在普通模态之上），不再写死 1250。
+  assert.match(
+    dialogStyles,
+    /web-preview-dialog__overlay \{[^}]*inset: 0;[^}]*z-index: calc\(var\(--ow-z-modal\) \+ 20\);/s,
+  )
+  assert.doesNotMatch(dialogStyles, /top: var\(--web-preview-dialog-drag-height\)/)
+  assert.match(dialogStyles, /height: calc\(100vh - var\(--web-preview-dialog-drag-height\)\)/)
+  assert.match(
+    dialogStyles,
+    /web-preview-dialog--maximized \{[^}]*height: calc\(100vh - var\(--web-preview-dialog-drag-height\)\)/s,
+  )
+  assert.match(
+    dialogStyles,
+    /web-preview-dialog__action \{[^}]*width: 28px;[^}]*height: 28px;[^}]*border: none;[^}]*appearance: none;[^}]*background: transparent;/s,
+  )
+  assert.match(dialogStyles, /web-preview-dialog__loading/)
+  // 加载指示零自转：几何与 0.9s 时序全归 BeaconSpinner，共享 CSS 只留 flex-shrink + currentColor。
+  assert.match(dialogStyles, /\.web-preview-dialog__loading-icon \{ flex-shrink: 0; color: currentColor; \}/)
+  assert.doesNotMatch(dialogStyles, /animation: ow-spin/)
+  // P6-8 四条失效停靠选择器已修：限定类换成真实渲染的 data-slot（Dialog 只出 data-slot，
+  // 不挂 .ow-modal*），保留双限定以压过 Dialog 自带的 Tailwind 单类。
+  assert.doesNotMatch(dialogStyles, /^\s*\.ow-modal[^\n]*web-preview-dialog/m)
+  assert.match(dialogStyles, /\[data-slot="dialog-overlay"\]\.web-preview-dialog__overlay/)
+  assert.match(dialogStyles, /\[data-slot="dialog"\]\.web-preview-dialog \{/)
+  // 754d2b4：壳与标题条是弹层，不是地色——两条归 --ow-popover-bg（地色 --ow-bg 不再出现在本段）。
+  assert.match(dialogStyles, /\.web-preview-dialog__surface \{[^}]*background: var\(--ow-popover-bg\);/s)
+  assert.match(dialogStyles, /\.web-preview-dialog__header \{[^}]*background: var\(--ow-popover-bg\);/s)
+  assert.doesNotMatch(dialogStyles, /background: var\(--ow-bg\)/)
+  assert.match(dialogStyles, /var\(--ow-text\)/)
+  assert.doesNotMatch(dialogStyles, /#[0-9a-f]{3,8}/i)
+})

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

@@ -0,0 +1,82 @@
+"use client"
+
+import { type ReactNode, useEffect, useId, useState } from "react"
+import { BeaconSpinner } from "../../../composite/BeaconSpinner"
+import { Close, Maximize } from "../../../composite/Icons"
+import { OrbitworkModal } from "../../../composite/OrbitworkModal"
+import { Button } from "../../../primitives"
+
+export interface PreviewDialogProps {
+  open: boolean
+  title: string
+  children: ReactNode
+  loading?: boolean
+  onClose: () => void
+}
+
+/** A chrome-free preview shell hosted by a platform-specific content adapter. */
+export function PreviewDialog({ open, title, children, loading = false, onClose }: PreviewDialogProps) {
+  const [maximized, setMaximized] = useState(false)
+  const titleId = useId()
+
+  useEffect(() => {
+    if (!open) setMaximized(false)
+  }, [open])
+
+  const sizeLabel = maximized ? "还原窗口" : "放大窗口"
+
+  return (
+    <OrbitworkModal
+      open={open}
+      onClose={onClose}
+      overlayClassName="web-preview-dialog__overlay"
+      className={`web-preview-dialog${maximized ? " web-preview-dialog--maximized" : ""}`}
+    >
+      <section role="dialog" aria-modal="true" aria-labelledby={titleId} className="web-preview-dialog__surface">
+        <header className="web-preview-dialog__header">
+          <h2 id={titleId} className="web-preview-dialog__title">
+            {title}
+          </h2>
+          <div className="web-preview-dialog__actions">
+            <Button
+              variant="unstyled"
+              type="button"
+              className="web-preview-dialog__action"
+              title={sizeLabel}
+              aria-label={sizeLabel}
+              aria-pressed={maximized}
+              onClick={() => setMaximized((value) => !value)}
+            >
+              <Maximize />
+            </Button>
+            <Button
+              variant="unstyled"
+              type="button"
+              className="web-preview-dialog__action"
+              title="关闭预览"
+              aria-label="关闭预览"
+              onClick={onClose}
+            >
+              <Close />
+            </Button>
+          </div>
+        </header>
+        <div className="web-preview-dialog__content">
+          {children}
+          {loading && (
+            <div className="web-preview-dialog__loading" role="status" aria-live="polite">
+              {/* §9 旋转圈退役：原 .8s 自转 Loader 图标 → 锁定件 BeaconSpinner
+                  （size 18 → <20px 小转子环 0.9s，描边随 currentColor，不占荧黄极）。 */}
+              <BeaconSpinner size={18} className="web-preview-dialog__loading-icon" aria-label="加载中" />
+              <span>加载中…</span>
+            </div>
+          )}
+        </div>
+      </section>
+    </OrbitworkModal>
+  )
+}
+
+/** @deprecated Use PreviewDialog; kept as a source-compatible alias. */
+export const WebPreviewDialog = PreviewDialog
+export type WebPreviewDialogProps = PreviewDialogProps