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

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

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

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

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

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