@orbit-work/ui 0.1.0

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

@@ -0,0 +1,235 @@
+"use client"
+
+import { useState } from "react"
+import {
+  BROWSER_ANNOTATION_POPUP_STYLES,
+  BROWSER_ANNOTATION_PROPERTY_DEFS,
+} from "../../../../lib/browser-annotation-popup"
+import { cn } from "../../../../lib/utils"
+
+export interface BrowserAnnotationPopupViewProps {
+  defaultExpanded?: boolean
+  tagName?: string
+  onCancel?: () => void
+  onSubmit?: (comment: string) => void
+}
+
+const SETTINGS_ICON = (
+  <svg
+    width="16"
+    height="16"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    strokeWidth="2"
+    strokeLinecap="round"
+    aria-hidden="true"
+  >
+    <path d="M4 21v-7M4 10V3M12 21v-9M12 8V3M20 21v-5M20 12V3M1 14h6M9 8h6M17 16h6" />
+  </svg>
+)
+
+/* type="number" / "spacing" 的项必须是纯数字字面量：DOM 的 number 输入拒收非数字串，
+   写 var(--ow-fs-body, 14) 只会让 value 变成空串（字号/圆角/边宽/内边距四格全空）。
+   var() 只留给 color 类（走 style.background / input[type=color] 的展示位）。 */
+const PREVIEW_VALUES: Record<string, string> = {
+  textContent: "Desktop UI 收敛说明",
+  color: "var(--ow-text)",
+  backgroundColor: "var(--ow-bg)",
+  opacity: "1",
+  fontFamily: "PingFang SC",
+  fontSize: "14",
+  fontWeight: "400",
+  borderRadius: "12",
+  borderColor: "var(--ow-border-strong)",
+  borderWidth: "1",
+  width: "320",
+  height: "120",
+  padding: "16",
+  margin: "0",
+}
+
+/**
+ * @deprecated 不属三件骨架：批注气泡是挂在 `WebPreviewShell` 内容上的 **Popover 配方**
+ * （蓝图批次④把 WebPreview 族收敛为 Shell / Nav / Console，弹层类各归各的原语）。
+ * 新代码请用 `Popover` 原语组这个配方。
+ */
+export function BrowserAnnotationPopupView({
+  defaultExpanded = false,
+  tagName = "div",
+  onCancel,
+  onSubmit,
+}: BrowserAnnotationPopupViewProps): React.ReactElement {
+  const [expanded, setExpanded] = useState(defaultExpanded)
+  const [comment, setComment] = useState("")
+
+  const settingsButton = (label: string) => (
+    <button
+      type="button"
+      data-ow-part="settings-btn"
+      className="__ow-popup__settings-btn"
+      aria-label={label}
+      onClick={() => setExpanded((value) => !value)}
+    >
+      {SETTINGS_ICON}
+    </button>
+  )
+
+  return (
+    <>
+      <style>{BROWSER_ANNOTATION_POPUP_STYLES}</style>
+      {/* 类名是与 BROWSER_ANNOTATION_POPUP_STYLES 的唯一接口：那份样式表注进第三方页面时
+          也是按 `__ow-popup*` 选择的（desktop preload 的 createPopup 同名建 DOM）。
+          data-* 只作 DS2 语义标记，不承担选择。 */}
+      <div
+        className={cn("__ow-popup", "is-preview", expanded && "is-expanded")}
+        data-slot="annotation-popup"
+        data-ow-variant="preview"
+        data-ow-state={expanded ? "expanded" : "collapsed"}
+      >
+        <div className="__ow-popup__collapsed" data-ow-part="collapsed-view">
+          {settingsButton("展开样式编辑")}
+          <input
+            className="__ow-popup__input"
+            data-ow-part="input"
+            value={comment}
+            onChange={(event) => setComment(event.target.value)}
+            placeholder="添加评论..."
+            aria-label="添加评论"
+          />
+          <button
+            type="button"
+            data-ow-part="submit-btn"
+            className={cn("__ow-popup__submit-btn", comment.trim() && "has-text")}
+            data-ow-state={comment.trim() ? "has-text" : undefined}
+            onClick={() => onSubmit?.(comment.trim())}
+            aria-label="提交评论"
+          >
+            <svg
+              width="16"
+              height="16"
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
+              strokeWidth="2.5"
+              strokeLinecap="round"
+              aria-hidden="true"
+            >
+              <path d="M12 19V5" />
+              <path d="M5 12l7-7 7 7" />
+            </svg>
+          </button>
+        </div>
+
+        <div className="__ow-popup__expanded" data-ow-part="expanded-view">
+          <div className="__ow-popup__top" data-ow-part="top">
+            {settingsButton("收起样式编辑")}
+            <input
+              className="__ow-popup__input"
+              data-ow-part="input"
+              value={comment}
+              onChange={(event) => setComment(event.target.value)}
+              placeholder="描述这些更改..."
+              aria-label="描述更改"
+            />
+          </div>
+          <div className="__ow-popup__tag" data-ow-part="tag">
+            <span className="__ow-popup__tag-name" data-ow-part="tag-name">
+              {tagName}
+            </span>
+            <span className="__ow-popup__tag-drag" data-ow-part="tag-drag">
+              ⁞⁞
+            </span>
+          </div>
+          <div className="__ow-popup__props" data-ow-part="props">
+            {BROWSER_ANNOTATION_PROPERTY_DEFS.map((definition) => (
+              <div className="__ow-popup__prop" data-ow-part="prop" key={definition.key}>
+                <span className="__ow-popup__prop-label" data-ow-part="prop-label">
+                  {definition.label}
+                </span>
+                <div className="__ow-popup__prop-value" data-ow-part="prop-value">
+                  {definition.type === "color" && (
+                    <span
+                      className="__ow-popup__color-swatch"
+                      data-ow-part="color-swatch"
+                      style={{ background: PREVIEW_VALUES[definition.key] }}
+                    >
+                      <input type="color" defaultValue={PREVIEW_VALUES[definition.key]} aria-label={definition.label} />
+                    </span>
+                  )}
+                  {definition.type === "select" ? (
+                    <select
+                      className="__ow-popup__prop-select"
+                      data-ow-part="prop-select"
+                      defaultValue={PREVIEW_VALUES[definition.key]}
+                      aria-label={definition.label}
+                    >
+                      {(definition.key === "fontFamily"
+                        ? ["PingFang SC", "Arial", "Helvetica", "sans-serif", "serif", "monospace"]
+                        : (definition.options ?? [])
+                      ).map((option) => (
+                        <option key={option}>{option}</option>
+                      ))}
+                    </select>
+                  ) : definition.type === "spacing" ? (
+                    <div className="__ow-popup__spacing" data-ow-part="spacing">
+                      {["上", "右", "下", "左"].map((side) => (
+                        <input
+                          type="number"
+                          defaultValue={PREVIEW_VALUES[definition.key]}
+                          aria-label={`${definition.label}${side}`}
+                          key={side}
+                        />
+                      ))}
+                    </div>
+                  ) : (
+                    <input
+                      className="__ow-popup__prop-input"
+                      data-ow-part="prop-input"
+                      type={definition.type === "number" ? "number" : "text"}
+                      defaultValue={PREVIEW_VALUES[definition.key]}
+                      step={definition.step}
+                      min={definition.min}
+                      max={definition.max}
+                      aria-label={definition.label}
+                    />
+                  )}
+                  {definition.unit && (
+                    <span className="__ow-popup__prop-unit" data-ow-part="prop-unit">
+                      {definition.unit}
+                    </span>
+                  )}
+                </div>
+              </div>
+            ))}
+          </div>
+          <div className="__ow-popup__actions" data-ow-part="actions">
+            <button type="button" data-ow-part="cancel" className="__ow-popup__cancel" onClick={onCancel}>
+              取消
+            </button>
+            <button
+              type="button"
+              data-ow-part="confirm"
+              className="__ow-popup__confirm"
+              onClick={() => onSubmit?.(comment.trim())}
+            >
+              <svg
+                width="14"
+                height="14"
+                viewBox="0 0 24 24"
+                fill="none"
+                stroke="currentColor"
+                strokeWidth="3"
+                strokeLinecap="round"
+                aria-hidden="true"
+              >
+                <path d="M20 6L9 17l-5-5" />
+              </svg>
+              确认
+            </button>
+          </div>
+        </div>
+      </div>
+    </>
+  )
+}

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

@@ -0,0 +1,260 @@
+import type { Meta, StoryObj } from "@storybook/react"
+import { type BrowserDevicePreset, BrowserDeviceToolbarView } from "./index"
+
+const meta = {
+  title: "Browser/BrowserDeviceToolbarView",
+  component: BrowserDeviceToolbarView,
+  parameters: {
+    layout: "padded",
+  },
+  tags: ["autodocs"],
+} satisfies Meta<typeof BrowserDeviceToolbarView>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+const standardPresets: BrowserDevicePreset[] = [
+  { label: "响应式", width: 0, height: 0, scaleFactor: 1 },
+  { label: "iPhone 14 Pro", width: 393, height: 852, scaleFactor: 3 },
+  { label: "iPhone 14", width: 390, height: 844, scaleFactor: 3 },
+  { label: "iPhone SE", width: 375, height: 667, scaleFactor: 2 },
+  { label: "iPad Air", width: 820, height: 1180, scaleFactor: 2 },
+  { label: "iPad Mini", width: 768, height: 1024, scaleFactor: 2 },
+  { label: "Galaxy S22", width: 360, height: 800, scaleFactor: 3 },
+  { label: "Pixel 7", width: 412, height: 915, scaleFactor: 2.625 },
+]
+
+export const Default: Story = {
+  args: {
+    presets: standardPresets,
+    initialPresetIndex: 1,
+    onApply: (width, height, scaleFactor) => console.log("apply", { width, height, scaleFactor }),
+    onDisable: () => console.log("disable"),
+    onClose: () => console.log("close"),
+  },
+}
+
+export const ResponsivePreset: Story = {
+  args: {
+    presets: standardPresets,
+    initialPresetIndex: 0,
+    onApply: (width, height, scaleFactor) => console.log("apply", { width, height, scaleFactor }),
+    onDisable: () => console.log("disable"),
+    onClose: () => console.log("close"),
+  },
+}
+
+export const IPhone14Pro: Story = {
+  args: {
+    presets: standardPresets,
+    initialPresetIndex: 1,
+    onApply: (width, height, scaleFactor) => console.log("apply", { width, height, scaleFactor }),
+    onDisable: () => console.log("disable"),
+    onClose: () => console.log("close"),
+  },
+}
+
+export const IPhoneSE: Story = {
+  args: {
+    presets: standardPresets,
+    initialPresetIndex: 3,
+    onApply: (width, height, scaleFactor) => console.log("apply", { width, height, scaleFactor }),
+    onDisable: () => console.log("disable"),
+    onClose: () => console.log("close"),
+  },
+}
+
+export const IPadAir: Story = {
+  args: {
+    presets: standardPresets,
+    initialPresetIndex: 4,
+    onApply: (width, height, scaleFactor) => console.log("apply", { width, height, scaleFactor }),
+    onDisable: () => console.log("disable"),
+    onClose: () => console.log("close"),
+  },
+}
+
+export const IPadMini: Story = {
+  args: {
+    presets: standardPresets,
+    initialPresetIndex: 5,
+    onApply: (width, height, scaleFactor) => console.log("apply", { width, height, scaleFactor }),
+    onDisable: () => console.log("disable"),
+    onClose: () => console.log("close"),
+  },
+}
+
+export const GalaxyS22: Story = {
+  args: {
+    presets: standardPresets,
+    initialPresetIndex: 6,
+    onApply: (width, height, scaleFactor) => console.log("apply", { width, height, scaleFactor }),
+    onDisable: () => console.log("disable"),
+    onClose: () => console.log("close"),
+  },
+}
+
+export const Pixel7: Story = {
+  args: {
+    presets: standardPresets,
+    initialPresetIndex: 7,
+    onApply: (width, height, scaleFactor) => console.log("apply", { width, height, scaleFactor }),
+    onDisable: () => console.log("disable"),
+    onClose: () => console.log("close"),
+  },
+}
+
+export const MinimalPresets: Story = {
+  args: {
+    presets: [
+      { label: "响应式", width: 0, height: 0, scaleFactor: 1 },
+      { label: "Mobile", width: 375, height: 667, scaleFactor: 2 },
+      { label: "Tablet", width: 768, height: 1024, scaleFactor: 2 },
+    ],
+    initialPresetIndex: 1,
+    onApply: (width, height, scaleFactor) => console.log("apply", { width, height, scaleFactor }),
+    onDisable: () => console.log("disable"),
+    onClose: () => console.log("close"),
+  },
+}
+
+export const CustomPresets: Story = {
+  args: {
+    presets: [
+      { label: "响应式", width: 0, height: 0, scaleFactor: 1 },
+      { label: "Small Desktop", width: 1366, height: 768, scaleFactor: 1 },
+      { label: "Full HD", width: 1920, height: 1080, scaleFactor: 1 },
+      { label: "4K", width: 3840, height: 2160, scaleFactor: 2 },
+    ],
+    initialPresetIndex: 2,
+    onApply: (width, height, scaleFactor) => console.log("apply", { width, height, scaleFactor }),
+    onDisable: () => console.log("disable"),
+    onClose: () => console.log("close"),
+  },
+}
+
+export const SinglePreset: Story = {
+  args: {
+    presets: [{ label: "iPhone 14", width: 390, height: 844, scaleFactor: 3 }],
+    initialPresetIndex: 0,
+    onApply: (width, height, scaleFactor) => console.log("apply", { width, height, scaleFactor }),
+    onDisable: () => console.log("disable"),
+    onClose: () => console.log("close"),
+  },
+}
+
+export const SmallDimensions: Story = {
+  args: {
+    presets: [
+      { label: "响应式", width: 0, height: 0, scaleFactor: 1 },
+      { label: "Tiny", width: 240, height: 320, scaleFactor: 1 },
+    ],
+    initialPresetIndex: 1,
+    onApply: (width, height, scaleFactor) => console.log("apply", { width, height, scaleFactor }),
+    onDisable: () => console.log("disable"),
+    onClose: () => console.log("close"),
+  },
+}
+
+export const LargeDimensions: Story = {
+  args: {
+    presets: [
+      { label: "响应式", width: 0, height: 0, scaleFactor: 1 },
+      { label: "Ultra Wide", width: 3440, height: 1440, scaleFactor: 1 },
+    ],
+    initialPresetIndex: 1,
+    onApply: (width, height, scaleFactor) => console.log("apply", { width, height, scaleFactor }),
+    onDisable: () => console.log("disable"),
+    onClose: () => console.log("close"),
+  },
+}
+
+export const HighDPI: Story = {
+  args: {
+    presets: [
+      { label: "响应式", width: 0, height: 0, scaleFactor: 1 },
+      { label: "Retina Display", width: 1440, height: 900, scaleFactor: 2 },
+      { label: "3x DPI", width: 414, height: 896, scaleFactor: 3 },
+    ],
+    initialPresetIndex: 1,
+    onApply: (width, height, scaleFactor) => console.log("apply", { width, height, scaleFactor }),
+    onDisable: () => console.log("disable"),
+    onClose: () => console.log("close"),
+  },
+}
+
+export const PortraitOrientation: Story = {
+  args: {
+    presets: [
+      { label: "响应式", width: 0, height: 0, scaleFactor: 1 },
+      { label: "Portrait Mobile", width: 375, height: 812, scaleFactor: 2 },
+    ],
+    initialPresetIndex: 1,
+    onApply: (width, height, scaleFactor) => console.log("apply", { width, height, scaleFactor }),
+    onDisable: () => console.log("disable"),
+    onClose: () => console.log("close"),
+  },
+}
+
+export const LandscapeOrientation: Story = {
+  args: {
+    presets: [
+      { label: "响应式", width: 0, height: 0, scaleFactor: 1 },
+      { label: "Landscape Mobile", width: 812, height: 375, scaleFactor: 2 },
+    ],
+    initialPresetIndex: 1,
+    onApply: (width, height, scaleFactor) => console.log("apply", { width, height, scaleFactor }),
+    onDisable: () => console.log("disable"),
+    onClose: () => console.log("close"),
+  },
+}
+
+export const InBrowserWindow: Story = {
+  render: () => (
+    <div
+      style={{
+        width: "100%",
+        maxWidth: 1200,
+        border: "1px solid var(--ow-border)",
+        borderRadius: 8,
+        overflow: "hidden",
+      }}
+    >
+      <div style={{ background: "var(--ow-surface)", borderBottom: "1px solid var(--ow-border)" }}>
+        <BrowserDeviceToolbarView
+          presets={standardPresets}
+          initialPresetIndex={1}
+          onApply={(width, height, scaleFactor) => console.log("apply", { width, height, scaleFactor })}
+          onDisable={() => console.log("disable")}
+          onClose={() => console.log("close")}
+        />
+      </div>
+      <div
+        style={{
+          padding: 16,
+          minHeight: 200,
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          background: "var(--ow-bg)",
+        }}
+      >
+        <div
+          style={{
+            width: 393,
+            height: 200,
+            border: "2px dashed var(--ow-border-strong)",
+            borderRadius: 8,
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+            fontSize: 14,
+            color: "var(--ow-text-3)",
+          }}
+        >
+          393 × 852 viewport
+        </div>
+      </div>
+    </div>
+  ),
+}

package/src/components/domain/browser/BrowserDeviceToolbarView/BrowserDeviceToolbarViewSource.test.mjs

@@ -0,0 +1,12 @@
+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")
+
+test("device preset menu escapes browser toolbar clipping and stacking contexts", () => {
+  assert.match(source, /const presetAnchorRef = useRef<HTMLDivElement>\(null\)/)
+  assert.match(source, /ref=\{presetAnchorRef\} className="browser-device-toolbar__preset-wrap"/)
+  // DS 2.0 蓝图批次②：Dropdown 已并入 Menu 簇，面组件更名 MenuSurface（属性同构）。
+  assert.match(source, /<MenuSurface[^>]*width=\{240\}[^>]*portal=\{presetAnchorRef\}/)
+})

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

@@ -0,0 +1,154 @@
+"use client"
+
+import { useCallback, useEffect, useMemo, useRef, useState } from "react"
+import { ChevDown, Close } from "../../../composite/Icons"
+import { TextField } from "../../../composite/NativeControls"
+import { Button } from "../../../primitives"
+import { type MenuItem, MenuSurface } from "../../../primitives/Menu"
+
+export interface BrowserDevicePreset {
+  label: string
+  width: number
+  height: number
+  scaleFactor: number
+}
+
+export interface BrowserDeviceToolbarViewProps {
+  presets: BrowserDevicePreset[]
+  initialPresetIndex?: number
+  onApply: (width: number, height: number, scaleFactor: number) => void
+  onDisable: () => void
+  onClose: () => void
+}
+
+/**
+ * @deprecated 已归口为 `WebPreviewShell` 的 **`subToolbar` 插槽配方**（蓝图批次④）。
+ * 设备模拟条与查找条同位：贴在壳工具栏下的第二条，不是独立骨架件。
+ *
+ * 类契约 `.browser-device-toolbar*` 在 `styles/desktop-surfaces.css` 的 browser 段：
+ * 条高 40 与查找条/地址栏同档，条底 `--ow-surface`（subToolbar 插槽同底），条上输入
+ * 走 `--ow-surface-2` 嵌套井；预设下拉已交给 `MenuSurface`（立面/行高/当前项双编码全归原语，
+ * 手搓的 `__preset-dropdown/__preset-item/__preset-size` 三段已随 W5 删除）；
+ * 尺寸与缩放读数 mono ＋ tabular-nums，缩放读的是当前预设的 `scaleFactor`。
+ */
+export function BrowserDeviceToolbarView({
+  presets,
+  initialPresetIndex = 0,
+  onApply,
+  onDisable,
+  onClose,
+}: BrowserDeviceToolbarViewProps): React.ReactElement {
+  const [presetIndex, setPresetIndex] = useState(initialPresetIndex)
+  const initial = presets[initialPresetIndex] ?? presets[0]
+  const [width, setWidth] = useState(initial?.width || 375)
+  const [height, setHeight] = useState(initial?.height || 812)
+  const [scale, setScale] = useState(initial?.scaleFactor || 1)
+  const [showPresets, setShowPresets] = useState(false)
+  const presetAnchorRef = useRef<HTMLDivElement>(null)
+  const preset = presets[presetIndex] ?? presets[0]
+
+  useEffect(() => {
+    if (initial && initial.width > 0) onApply(initial.width, initial.height, initial.scaleFactor)
+  }, []) // eslint-disable-line react-hooks/exhaustive-deps
+
+  const selectPreset = useCallback(
+    (key: string) => {
+      const index = presets.findIndex((item) => item.label === key)
+      const next = presets[index]
+      if (!next) return
+      setPresetIndex(index)
+      setShowPresets(false)
+      if (next.width > 0) {
+        setWidth(next.width)
+        setHeight(next.height)
+        setScale(next.scaleFactor)
+        onApply(next.width, next.height, next.scaleFactor)
+      } else {
+        setScale(1)
+        onDisable()
+      }
+    },
+    [onApply, onDisable, presets],
+  )
+
+  const dropdownItems = useMemo<MenuItem[]>(
+    () =>
+      presets.map((item) => ({
+        key: item.label,
+        label: item.label,
+        hint: item.width > 0 ? `${item.width}×${item.height}` : undefined,
+        selected: item.label === preset?.label,
+      })),
+    [preset?.label, presets],
+  )
+
+  return (
+    <div className="browser-device-toolbar">
+      <span className="browser-device-toolbar__label">尺寸:</span>
+      <div ref={presetAnchorRef} className="browser-device-toolbar__preset-wrap">
+        <Button
+          variant="unstyled"
+          className="browser-device-toolbar__preset-btn"
+          onClick={() => setShowPresets((value) => !value)}
+        >
+          <span>{preset?.label ?? "响应式"}</span>
+          <ChevDown width={12} height={12} />
+        </Button>
+        {showPresets && (
+          <MenuSurface items={dropdownItems} onSelect={selectPreset} width={240} portal={presetAnchorRef} />
+        )}
+      </div>
+      <TextField
+        unstyled
+        className="browser-device-toolbar__dim-input"
+        type="number"
+        value={width || ""}
+        min={200}
+        max={3840}
+        aria-label="宽度"
+        onChange={(event) => {
+          const next = Number.parseInt(event.target.value, 10) || 0
+          setWidth(next)
+          if (next > 0 && height > 0) {
+            setPresetIndex(0)
+            setScale(1)
+            onApply(next, height, 1)
+          }
+        }}
+      />
+      <span className="browser-device-toolbar__dim-sep">×</span>
+      <TextField
+        unstyled
+        className="browser-device-toolbar__dim-input"
+        type="number"
+        value={height || ""}
+        min={200}
+        max={3840}
+        aria-label="高度"
+        onChange={(event) => {
+          const next = Number.parseInt(event.target.value, 10) || 0
+          setHeight(next)
+          if (width > 0 && next > 0) {
+            setPresetIndex(0)
+            setScale(1)
+            onApply(width, next, 1)
+          }
+        }}
+      />
+      {/* 读数接真值：手输尺寸走 scaleFactor 1，选预设走该预设的 scaleFactor（原来写死 100%）。 */}
+      <span className="browser-device-toolbar__zoom">{`${Math.round(scale * 100)}%`}</span>
+      <Button
+        variant="unstyled"
+        className="browser-device-toolbar__close"
+        onClick={() => {
+          onDisable()
+          onClose()
+        }}
+        title="关闭设备工具栏"
+        aria-label="关闭设备工具栏"
+      >
+        <Close width={14} height={14} />
+      </Button>
+    </div>
+  )
+}