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

package/src/components/composite/ImageCard/ImageCard.stories.tsx

@@ -1,54 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react"
-import { ImageCard } from "./index"
-
-/**
- * 内联缩略图（data-uri）：外网图源（原 21 档全部指向 images.unsplash.com）在离线／CI／
- * 视觉回归里会挂空，快照拍到的是回退占位而非图卡本体。改成不发起任何网络请求的内联 SVG。
- */
-const THUMB_DATA_URI =
-  "data:image/svg+xml;utf8," +
-  encodeURIComponent(
-    `<svg xmlns="http://www.w3.org/2000/svg" width="320" height="180" viewBox="0 0 320 180">
-      <rect width="320" height="180" fill="#2E323C"/>
-      <circle cx="160" cy="90" r="30" fill="none" stroke="#8A8F9A" stroke-width="1.5"/>
-      <circle cx="190" cy="90" r="4" fill="#F7F6F1"/>
-    </svg>`,
-  )
-
-const meta = {
-  title: "Composite/ImageCard",
-  component: ImageCard,
-  parameters: {
-    docs: {
-      description: {
-        component:
-          '已并入 Domain/Chat/Attachment（variant="media"）。本页是 @deprecated 兼容层，' +
-          "只留两档兼容性冒烟（有图 / 无图占位）；视觉档位由 Domain/Chat/Attachment 的" +
-          "「富媒体图卡」维护，不在退役件这边重复一整套快照。",
-      },
-    },
-    layout: "padded",
-  },
-  tags: ["autodocs"],
-} satisfies Meta<typeof ImageCard>
-
-export default meta
-type Story = StoryObj<typeof meta>
-
-/** 冒烟①：有缩略图 ＋ 说明行——转发到 Attachment 的 media 变体后仍能渲出图与 caption。 */
-export const WithImage: Story = {
-  name: "冒烟 · 有图",
-  args: {
-    src: THUMB_DATA_URI,
-    caption: "发布会现场，第二排右起第三位是我们的工程师。",
-  },
-}
-
-/** 冒烟②：无 src——落 --ow-surface-2 平底占位 ＋ mono 读数（§5 无渐变 · §7 读数 mono）。 */
-export const PlaceholderNoImage: Story = {
-  name: "冒烟 · 占位",
-  args: {
-    placeholder: "real-madrid.jpg · 1600×900",
-    caption: "图还没加载出来",
-  },
-}

package/src/components/composite/ImageCard/index.tsx

@@ -1,33 +0,0 @@
-import { Attachment } from "../../domain/chat/Attachment"
-
-export type ImageCardProps = {
-  /** Image source URL (or placeholder text) */
-  src?: string
-  /** Placeholder text when no src (e.g. "real-madrid.jpg · 1600×900") */
-  placeholder?: string
-  /** Caption below the image */
-  caption?: string
-  className?: string
-}
-
-/**
- * 富媒体图卡（图 ＋ 说明行）。
- *
- * @deprecated DS 2.0 起并入 `Attachment`（domain/chat/Attachment，`variant="media"`）。
- * 本导出是薄兼容层；新代码直接用 `Attachment`。占位从旧的斜纹渐变改成 `--ow-surface-2`
- * 平底 ＋ mono 读数（§5 无渐变；§7 读数 mono），不再回退。
- *
- * W5：外边距 `mb-2` 已撤——间距归容器，组件不自带外边距（全仓零消费方，只剩 stories）。
- */
-export function ImageCard({ src, placeholder, caption, className = "" }: ImageCardProps) {
-  return (
-    <Attachment
-      variant="media"
-      name={caption || placeholder || "image"}
-      thumbnail={src}
-      placeholder={placeholder ?? "image"}
-      caption={caption}
-      className={className}
-    />
-  )
-}

package/src/components/composite/ImagePreview/ImagePreview.stories.tsx

@@ -1,172 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react"
-import { useState } from "react"
-import { Button } from "../../primitives"
-import { ImagePreview } from "./index"
-
-const meta = {
-  title: "Composite/ImagePreview",
-  component: ImagePreview,
-  parameters: {
-    layout: "fullscreen",
-  },
-  tags: ["autodocs"],
-} satisfies Meta<typeof ImagePreview>
-
-export default meta
-type Story = StoryObj<typeof meta>
-
-/* 内联样图（data-uri）：原来四张全指向 picsum.photos，离线／CI／视觉回归里必然挂空，
-   快照拍到的是空 stage 而不是查看器本体；且 networkidle 类等待会被永不结束的请求拖住。
-   改成不发起任何网络请求的内联 SVG，构图各异以便看清缩放/旋转/翻页。 */
-const sampleImage = (w: number, h: number, ink: string, mark: string) =>
-  "data:image/svg+xml;utf8," +
-  encodeURIComponent(
-    `<svg xmlns="http://www.w3.org/2000/svg" width="${w}" height="${h}" viewBox="0 0 ${w} ${h}">` +
-      `<rect width="${w}" height="${h}" fill="#22252C"/>` +
-      `<circle cx="${w / 2}" cy="${h / 2}" r="${Math.min(w, h) / 3}" fill="none" stroke="${ink}" stroke-width="2"/>` +
-      `<circle cx="${w / 2 + Math.min(w, h) / 3}" cy="${h / 2}" r="6" fill="${ink}"/>` +
-      `<text x="24" y="${h - 24}" font-family="monospace" font-size="20" fill="${ink}">${mark}</text>` +
-      `</svg>`,
-  )
-
-const sampleImages = [
-  { src: sampleImage(800, 600, "#8A8F9A", "1 · 800×600"), alt: "Sample image 1", name: "landscape-1.jpg" },
-  { src: sampleImage(600, 800, "#F7F6F1", "2 · 600×800"), alt: "Sample image 2", name: "portrait.jpg" },
-  { src: sampleImage(800, 600, "#8A8F9A", "3 · 800×600"), alt: "Sample image 3", name: "landscape-2.jpg" },
-  { src: sampleImage(1200, 800, "#F7F6F1", "4 · 1200×800"), alt: "Sample image 4", name: "wide.jpg" },
-]
-
-export const SingleImage: Story = {
-  render: () => {
-    const [open, setOpen] = useState(false)
-    return (
-      <div style={{ padding: 40 }}>
-        <Button onClick={() => setOpen(true)}>查看图片</Button>
-        <ImagePreview open={open} images={[sampleImages[0]!]} onClose={() => setOpen(false)} />
-      </div>
-    )
-  },
-}
-
-export const MultipleImages: Story = {
-  render: () => {
-    const [open, setOpen] = useState(false)
-    const [index, setIndex] = useState(0)
-    return (
-      <div style={{ padding: 40 }}>
-        <Button onClick={() => setOpen(true)}>查看图片集</Button>
-        <ImagePreview
-          open={open}
-          images={sampleImages}
-          index={index}
-          onIndexChange={setIndex}
-          onClose={() => setOpen(false)}
-        />
-      </div>
-    )
-  },
-}
-
-export const WithDownload: Story = {
-  render: () => {
-    const [open, setOpen] = useState(false)
-    return (
-      <div style={{ padding: 40 }}>
-        <Button onClick={() => setOpen(true)}>查看图片（支持下载）</Button>
-        <ImagePreview
-          open={open}
-          images={sampleImages}
-          onClose={() => setOpen(false)}
-          onDownload={(image, idx) => console.log("download", image.name, idx)}
-        />
-      </div>
-    )
-  },
-}
-
-export const WithReveal: Story = {
-  render: () => {
-    const [open, setOpen] = useState(false)
-    return (
-      <div style={{ padding: 40 }}>
-        <Button onClick={() => setOpen(true)}>查看图片（支持定位）</Button>
-        <ImagePreview
-          open={open}
-          images={sampleImages}
-          onClose={() => setOpen(false)}
-          onReveal={(image, idx) => console.log("reveal", image.name, idx)}
-        />
-      </div>
-    )
-  },
-}
-
-export const StartAtSecondImage: Story = {
-  render: () => {
-    const [open, setOpen] = useState(false)
-    const [index, setIndex] = useState(1)
-    return (
-      <div style={{ padding: 40 }}>
-        <Button onClick={() => setOpen(true)}>查看图片（从第2张开始）</Button>
-        <ImagePreview
-          open={open}
-          images={sampleImages}
-          index={index}
-          onIndexChange={setIndex}
-          onClose={() => setOpen(false)}
-        />
-      </div>
-    )
-  },
-}
-
-export const AlwaysOpen: Story = {
-  render: () => (
-    <ImagePreview
-      open={true}
-      images={sampleImages}
-      onClose={() => console.log("close")}
-      onDownload={(image) => console.log("download", image.name)}
-      onReveal={(image) => console.log("reveal", image.name)}
-    />
-  ),
-}
-
-export const WithThumbnailGrid: Story = {
-  render: () => {
-    const [open, setOpen] = useState(false)
-    const [index, setIndex] = useState(0)
-    return (
-      <div style={{ padding: 40 }}>
-        <div style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 16 }}>
-          {sampleImages.map((image, idx) => (
-            <button
-              key={idx}
-              onClick={() => {
-                setIndex(idx)
-                setOpen(true)
-              }}
-              style={{
-                padding: 0,
-                border: "2px solid var(--ow-border-strong)",
-                borderRadius: 8,
-                overflow: "hidden",
-                cursor: "pointer",
-                aspectRatio: "1",
-              }}
-            >
-              <img src={image.src} alt={image.alt} style={{ width: "100%", height: "100%", objectFit: "cover" }} />
-            </button>
-          ))}
-        </div>
-        <ImagePreview
-          open={open}
-          images={sampleImages}
-          index={index}
-          onIndexChange={setIndex}
-          onClose={() => setOpen(false)}
-        />
-      </div>
-    )
-  },
-}

package/src/components/composite/ImagePreview/ImagePreviewSource.test.mjs

@@ -1,95 +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('媒体查看器＝常暗域白名单：局部 data-theme="dark"，内部只用语义 token', () => {
-  assert.match(source, /data-theme="dark"/)
-  // 旧口径：手取 on-dark 文字色 / graphite 半透明底，已归口
-  assert.doesNotMatch(source, /text-ow-fg-on-dark|bg-ow-graphite|--ow-fg-on-dark/)
-})
-
-test("遮罩用 --ow-scrim ＋ z 取 --ow-z-modal（不写死 1000、不加背景模糊）", () => {
-  assert.match(source, /bg-\[var\(--ow-scrim\)\]/)
-  assert.match(source, /zIndex: "var\(--ow-z-modal\)"/)
-  assert.doesNotMatch(source, /backdrop-blur|z-\[1000\]/)
-})
-
-test("媒体衬底 mat：--ow-surface-2 深衬 ＋ 浮层 1px 边（§5）", () => {
-  assert.match(source, /data-ow-surface="mat"/)
-  assert.match(source, /bg-\[var\(--ow-surface-2\)\] border border-\[color:var\(--ow-border\)\]/)
-})
-
-test("缩略轨旧 opacity 口径已清理：选中＝control-on 无彩边 ＋ 序号字重双编码（R1）", () => {
-  assert.doesNotMatch(source, new RegExp(["opacity-", "\\[0\\.62\\]"].join("")))
-  assert.doesNotMatch(source, /is-active\]:opacity-100/)
-  assert.match(source, /is-active\]:border-\[color:var\(--ow-control-on\)\]/)
-  assert.match(source, /aria-current=/)
-  assert.match(source, /data-ow-part="thumb-index"/)
-  assert.match(source, /itemIndex === activeIndex \? "font-bold" : "font-normal"/)
-})
-
-test("工具条是弹层：popover 底 ＋ 边 ＋ shadow-pop，行 hover/press 走 pop 档", () => {
-  assert.match(source, /bg-\[var\(--ow-popover-bg\)\]/)
-  assert.match(source, /shadow-\[var\(--ow-shadow-pop\)\]/)
-  // W-R2：钮身收回 Button 原语（ghost×md），条上只覆写 pop 档两个交互色
-  assert.match(source, /const toolbarBtn = "hover:bg-\[var\(--ow-hover-pop\)\] active:bg-\[var\(--ow-press-pop\)\]"/)
-})
-
-// W-R2 原语归位：工具条 6 颗 ＋ 翻页 2 颗原为 variant="unstyled" ＋ 祖先层 [&_button]: 覆写
-// 重画几何（cva 的 unstyled 只清 variant，size 默认仍是 md，两组同特指度类靠出现顺序决胜负）。
-// 现全部走 Button 的 ghost 正规档 ＋ icon 槽（iconOnly 自带 w-7/w-8 方形与 --ow-radius-action）。
-test("工具条/翻页钮走 Button 正规档，不再靠祖先层 [&_button]: 重画几何", () => {
-  assert.doesNotMatch(source, /\[&_button\]:w-9|\[&_button\]:h-8|\[&>button\]:w-8|\[&>button\]:h-7/)
-  assert.doesNotMatch(source, /\[&_button\]:\[border-radius:var\(--ow-radius-action\)\]/)
-  // 仍允许的唯一一处 unstyled：缩略轨的图片瓦片（真·48 方块，非按钮档）
-  assert.equal(source.match(/variant="unstyled"/g)?.length, 1)
-})
-
-test("计数读数 mono + tabular-nums（§7）", () => {
-  assert.match(
-    source,
-    /data-ow-part="counter"[\s\S]*font-\[family-name:var\(--ow-font-mono\)\][\s\S]*\[font-variant-numeric:tabular-nums\]/,
-  )
-})
-
-test("图片过渡走 ease-beacon ＋ 320 档（§9），无 hover 缩放位移", () => {
-  assert.match(source, /transition-duration:var\(--ow-dur-3\)/)
-  assert.match(source, /transition-timing-function:var\(--ow-ease-beacon\)/)
-  // 字面量拆写，避免 check-ds2 的 hover-move 规则误伤本测试文件
-  assert.doesNotMatch(source, new RegExp(["hover:", "scale-", "|", "hover:", "translate-"].join("")))
-})
-
-test("R3 中性件：无信标/荧黄", () => {
-  assert.doesNotMatch(source, /--ow-beacon|--ow-accent-dot|--ow-yellow|--ow-data-today/)
-})
-
-// ── W5 终扫：图标语系与控件高 ───────────────────────────────────────────────
-test("§7 控件高：缩略轨翻页钮落 28（Button sm＝h-7/w-7），不留 24 表外档", () => {
-  assert.match(source, /size="sm"\s*\n\s*icon=\{<ChevUp \/>\}/)
-  assert.match(source, /size="sm"\s*\n\s*icon=\{<ChevDown \/>\}/)
-  assert.doesNotMatch(source, /\[&>button\]:h-6/)
-})
-
-test("缩放/旋转走本族真图标：不再一个 Search 配 −/+ 贴字角标，旋转不再借 Refresh", () => {
-  assert.match(source, /import \{[^}]*Rotate[^}]*ZoomIn[^}]*ZoomOut[^}]*\} from "\.\.\/Icons"/)
-  assert.match(source, /icon=\{<ZoomOut \/>\}[\s\S]{0,80}aria-label="缩小"/)
-  assert.match(source, /icon=\{<ZoomIn \/>\}[\s\S]{0,80}aria-label="放大"/)
-  assert.match(source, /icon=\{<Rotate \/>\}[\s\S]{0,200}aria-label="旋转"/)
-  assert.doesNotMatch(source, /<Search \/>/)
-  assert.doesNotMatch(source, /<Refresh \/>/)
-  // 角标托盘一并撤掉，免得留下空的绝对定位规则
-  assert.doesNotMatch(source, /\[&_button_span\]/)
-})
-
-// ── W-R2 无障碍：模态三件套 ────────────────────────────────────────────────
-// 本件声明 role="dialog" aria-modal="true"，就必须与 Dialog 基座同口径：
-// Tab 焦点圈闭环 ＋ 入场取焦 ＋ 离场把焦点还给触发元素（共享 lib/focusTrap）。
-test("模态无障碍三件套：焦点圈闭环 + 入场取焦 + 离场还焦", () => {
-  assert.match(source, /import \{ FOCUSABLE, trapTab \} from "\.\.\/\.\.\/\.\.\/lib\/focusTrap"/)
-  assert.match(source, /event\.key === "Tab" && overlayRef\.current\) trapTab\(event, overlayRef\.current\)/)
-  assert.match(source, /restoreRef\.current = \(document\.activeElement as HTMLElement \| null\) \?\? null/)
-  assert.match(source, /restoreRef\.current\?\.focus\?\.\(\)/)
-  assert.match(source, /querySelector<HTMLElement>\(FOCUSABLE\)/)
-})