@orbit-work/ui 0.1.0

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

@@ -0,0 +1,339 @@
+"use client"
+
+import type { CSSProperties, PointerEvent as ReactPointerEvent } from "react"
+import { useEffect, useRef, useState } from "react"
+import { FOCUSABLE, trapTab } from "../../../lib/focusTrap"
+import { cn } from "../../../lib/utils"
+import { Button } from "../../primitives"
+import { ChevDown, ChevUp, Close, Download, Folder, Rotate, ZoomIn, ZoomOut } from "../Icons"
+
+/* 工具条坐在 popover 立面上，hover/press 走 pop 档（§5）——ghost 变体自带的是地面档，
+   这里只覆写这两个色，几何/圆角/焦点环仍由 Button 原语出。 */
+const toolbarBtn = "hover:bg-[var(--ow-hover-pop)] active:bg-[var(--ow-press-pop)]"
+
+export type ImagePreviewItem = {
+  src: string
+  alt?: string
+  name?: string
+}
+
+export type ImagePreviewProps = {
+  open: boolean
+  images: ImagePreviewItem[]
+  index?: number
+  onIndexChange?: (index: number) => void
+  onClose: () => void
+  onDownload?: (image: ImagePreviewItem, index: number) => void
+  onReveal?: (image: ImagePreviewItem, index: number) => void
+  className?: string
+}
+
+async function defaultDownload(image: ImagePreviewItem) {
+  const fileName = image.name || image.alt || "image"
+  try {
+    const response = await fetch(image.src)
+    const blob = await response.blob()
+    const url = URL.createObjectURL(blob)
+    const link = document.createElement("a")
+    link.href = url
+    link.download = fileName
+    link.style.display = "none"
+    document.body.appendChild(link)
+    link.click()
+    document.body.removeChild(link)
+    URL.revokeObjectURL(url)
+  } catch {
+    // Fallback: open in new tab if fetch fails (e.g. cross-origin)
+    window.open(image.src, "_blank")
+  }
+}
+
+export function ImagePreview({
+  open,
+  images,
+  index,
+  onIndexChange,
+  onClose,
+  onDownload,
+  onReveal,
+  className = "",
+}: ImagePreviewProps) {
+  const [internalIndex, setInternalIndex] = useState(index ?? 0)
+  const [scale, setScale] = useState(1)
+  const [rotation, setRotation] = useState(0)
+  // Pan offset (px) applied when the image is zoomed in, so the viewer can drag
+  // to reach regions that fall outside the centered stage.
+  const [offset, setOffset] = useState({ x: 0, y: 0 })
+  const [dragging, setDragging] = useState(false)
+  // Drag session start point: pointer coords and the offset at press time.
+  const dragStart = useRef<{ x: number; y: number; offsetX: number; offsetY: number } | null>(null)
+  const overlayRef = useRef<HTMLDivElement | null>(null)
+  const restoreRef = useRef<HTMLElement | null>(null)
+  const activeIndex = Math.min(Math.max(index ?? internalIndex, 0), Math.max(images.length - 1, 0))
+  const active = images[activeIndex]
+  // Panning only makes sense once the image overflows its stage (scale > 1).
+  const canPan = scale > 1
+
+  const resetView = () => {
+    setScale(1)
+    setRotation(0)
+    setOffset({ x: 0, y: 0 })
+  }
+
+  const select = (next: number) => {
+    if (!images.length) return
+    const normalized = (next + images.length) % images.length
+    if (index === undefined) setInternalIndex(normalized)
+    onIndexChange?.(normalized)
+    resetView()
+  }
+
+  const handlePointerDown = (event: ReactPointerEvent<HTMLDivElement>) => {
+    if (!canPan || event.button !== 0) return
+    event.preventDefault()
+    dragStart.current = { x: event.clientX, y: event.clientY, offsetX: offset.x, offsetY: offset.y }
+    setDragging(true)
+    event.currentTarget.setPointerCapture(event.pointerId)
+  }
+
+  const handlePointerMove = (event: ReactPointerEvent<HTMLDivElement>) => {
+    const start = dragStart.current
+    if (!start) return
+    setOffset({ x: start.offsetX + (event.clientX - start.x), y: start.offsetY + (event.clientY - start.y) })
+  }
+
+  const endDrag = (event: ReactPointerEvent<HTMLDivElement>) => {
+    if (!dragStart.current) return
+    dragStart.current = null
+    setDragging(false)
+    if (event.currentTarget.hasPointerCapture(event.pointerId))
+      event.currentTarget.releasePointerCapture(event.pointerId)
+  }
+
+  const zoomOut = () =>
+    setScale((value) => {
+      const next = Math.max(0.5, value - 0.2)
+      if (next <= 1) setOffset({ x: 0, y: 0 })
+      return next
+    })
+  const zoomIn = () => setScale((value) => Math.min(3, value + 0.2))
+
+  const handleDownload = () => {
+    if (!active) return
+    if (onDownload) {
+      onDownload(active, activeIndex)
+    } else {
+      defaultDownload(active)
+    }
+  }
+
+  // §6 模态无障碍三件套（与 Dialog 基座同一份实现，见 lib/focusTrap）：
+  // Escape 出口 ＋ 方向键翻页 ＋ Tab 焦点圈闭环——本件声明了 role="dialog" aria-modal，
+  // 原来只监听 Escape/方向键，Tab 能一路走到背后的页面上去。
+  useEffect(() => {
+    if (!open) return
+    const handleKeyDown = (event: KeyboardEvent) => {
+      if (event.key === "Escape") {
+        onClose()
+        return
+      }
+      if (event.key === "ArrowUp" || event.key === "ArrowLeft") select(activeIndex - 1)
+      if (event.key === "ArrowDown" || event.key === "ArrowRight") select(activeIndex + 1)
+      if (event.key === "Tab" && overlayRef.current) trapTab(event, overlayRef.current)
+    }
+    document.addEventListener("keydown", handleKeyDown, true)
+    const previousOverflow = document.body.style.overflow
+    document.body.style.overflow = "hidden"
+    return () => {
+      document.removeEventListener("keydown", handleKeyDown, true)
+      document.body.style.overflow = previousOverflow
+    }
+  }, [open, activeIndex, images.length, onClose])
+
+  // 入场取焦（第一颗工具钮），离场把焦点还给触发元素。
+  useEffect(() => {
+    if (!open) return undefined
+    restoreRef.current = (document.activeElement as HTMLElement | null) ?? null
+    const overlay = overlayRef.current
+    if (overlay && !overlay.contains(document.activeElement)) {
+      ;(overlay.querySelector<HTMLElement>(FOCUSABLE) ?? overlay).focus()
+    }
+    return () => {
+      restoreRef.current?.focus?.()
+    }
+  }, [open])
+
+  if (!open || !active) return null
+
+  return (
+    <div
+      // 媒体查看器＝§3 常暗域白名单：局部暗档，内部一律走语义 token（不再手取 on-dark/graphite）。
+      data-theme="dark"
+      data-slot="image-preview"
+      data-ow-part="overlay"
+      ref={overlayRef}
+      tabIndex={-1}
+      className={cn("fixed inset-0 flex items-center justify-center bg-[var(--ow-scrim)] outline-none", className)}
+      style={{ zIndex: "var(--ow-z-modal)" }}
+      role="dialog"
+      aria-modal="true"
+      aria-label="查看图片附件"
+      onMouseDown={(event) => event.target === event.currentTarget && onClose()}
+    >
+      <div
+        data-ow-part="stage"
+        data-ow-surface="mat"
+        // 媒体衬底 mat：中性深衬 --ow-surface-2 ＋ 浮层 1px 边（§5 悬浮层永远保留边框）。
+        className="w-[min(62vw,760px)] h-[min(72vh,760px)] flex items-center justify-center overflow-hidden bg-[var(--ow-surface-2)] border border-[color:var(--ow-border)] [border-radius:var(--ow-radius-modal)] [&_img]:max-w-full [&_img]:max-h-full [&_img]:object-contain [&_img]:transition-transform [&_img]:[transition-duration:var(--ow-dur-3)] [&_img]:[transition-timing-function:var(--ow-ease-beacon)]"
+        style={{ cursor: canPan ? (dragging ? "grabbing" : "grab") : "default" } as CSSProperties}
+        onPointerDown={handlePointerDown}
+        onPointerMove={handlePointerMove}
+        onPointerUp={endDrag}
+        onPointerCancel={endDrag}
+      >
+        <img
+          src={active.src}
+          alt={active.alt ?? active.name ?? ""}
+          draggable={false}
+          style={{
+            // translate (screen px) sits outside scale/rotate so drag distance
+            // maps 1:1 to cursor movement regardless of zoom or rotation.
+            transform: `translate(${offset.x}px, ${offset.y}px) scale(${scale}) rotate(${rotation}deg)`,
+            transition: dragging ? "none" : undefined,
+          }}
+        />
+      </div>
+
+      {images.length > 1 && (
+        /* §7 控件高：翻页钮原 32×24（24 不在 {28,32,40}），就近归 28。 */
+        <aside
+          data-ow-part="rail"
+          className="absolute right-7 top-1/2 -translate-y-1/2 flex flex-col items-center gap-2"
+          aria-label="图片列表"
+        >
+          <Button
+            type="button"
+            variant="ghost"
+            size="sm"
+            icon={<ChevUp />}
+            onClick={() => select(activeIndex - 1)}
+            aria-label="上一张"
+          />
+          {/* 缩略轨：选中态＝--ow-control-on 无彩极色 2px 边（§15）＋角标序号 700 字重，
+              两重编码（色＋字重）；非选中不再靠整块降透明度表达（旧口径已清理，§6 禁统一透明度）。
+              缩略轨是真·图片瓦片（48 方块 ＋ 满幅 cover 图），不是正规按钮档，
+              故保留 Button 的 unstyled 逃逸口作结构壳（外观全套由本块给齐）。 */}
+          <div className="flex flex-col gap-2 max-h-[60vh] overflow-y-auto [&_button]:relative [&_button]:w-12 [&_button]:h-12 [&_button]:p-0 [&_button]:bg-transparent [&_button]:cursor-pointer [&_button]:overflow-hidden [&_button]:border-2 [&_button]:border-[color:var(--ow-border)] [&_button]:[border-radius:var(--ow-radius-card)] [&_button:hover]:border-[color:var(--ow-border-strong)] [&_button.is-active]:border-[color:var(--ow-control-on)] [&_img]:w-full [&_img]:h-full [&_img]:object-cover">
+            {images.map((image, itemIndex) => (
+              <Button
+                type="button"
+                variant="unstyled"
+                key={`${image.src}-${itemIndex}`}
+                className={itemIndex === activeIndex ? "is-active" : ""}
+                aria-current={itemIndex === activeIndex ? "true" : undefined}
+                onClick={() => select(itemIndex)}
+                aria-label={`查看第 ${itemIndex + 1} 张图片`}
+              >
+                <img src={image.src} alt="" />
+                <span
+                  data-ow-part="thumb-index"
+                  aria-hidden="true"
+                  className={cn(
+                    "absolute left-0 bottom-0 px-1 font-[family-name:var(--ow-font-mono)] text-ow-fs-eyebrow leading-none [font-variant-numeric:tabular-nums] bg-[var(--ow-scrim)] text-[color:var(--ow-text)]",
+                    itemIndex === activeIndex ? "font-bold" : "font-normal",
+                  )}
+                >
+                  {itemIndex + 1}
+                </span>
+              </Button>
+            ))}
+          </div>
+          <Button
+            type="button"
+            variant="ghost"
+            size="sm"
+            icon={<ChevDown />}
+            onClick={() => select(activeIndex + 1)}
+            aria-label="下一张"
+          />
+        </aside>
+      )}
+
+      <div
+        data-ow-part="toolbar"
+        // 工具条＝浮层：popover 底 ＋ 1px 边 ＋ shadow-pop；条上行 hover/press 走 pop 档（§5）。
+        className="absolute bottom-8 left-1/2 -translate-x-1/2 flex gap-0.5 p-1.5 [border-radius:var(--ow-radius-menu)] bg-[var(--ow-popover-bg)] border border-[color:var(--ow-border)] shadow-[var(--ow-shadow-pop)]"
+      >
+        {/* §7 图标语系：缩放/旋转各用本族真图标——原来两颗都渲染同一个 Search 放大镜，
+            靠绝对定位的 −/+ 文本角标区分（贴字补语义，非 2.0 图标族做法）；旋转原借
+            Refresh（刷新语义）也已换成 Rotate。 */}
+        <Button
+          type="button"
+          variant="ghost"
+          size="md"
+          className={toolbarBtn}
+          icon={<ZoomOut />}
+          onClick={zoomOut}
+          aria-label="缩小"
+        />
+        <Button
+          type="button"
+          variant="ghost"
+          size="md"
+          className={toolbarBtn}
+          icon={<ZoomIn />}
+          onClick={zoomIn}
+          aria-label="放大"
+        />
+        <Button
+          type="button"
+          variant="ghost"
+          size="md"
+          className={toolbarBtn}
+          icon={<Rotate />}
+          onClick={() => {
+            setRotation((value) => value + 90)
+            setOffset({ x: 0, y: 0 })
+          }}
+          aria-label="旋转"
+        />
+        {onReveal && (
+          <Button
+            type="button"
+            variant="ghost"
+            size="md"
+            className={toolbarBtn}
+            icon={<Folder />}
+            onClick={() => onReveal(active, activeIndex)}
+            aria-label="定位到本地目录"
+          />
+        )}
+        <Button
+          type="button"
+          variant="ghost"
+          size="md"
+          className={toolbarBtn}
+          icon={<Download />}
+          onClick={handleDownload}
+          aria-label="下载"
+        />
+        <Button
+          type="button"
+          variant="ghost"
+          size="md"
+          className={toolbarBtn}
+          icon={<Close />}
+          onClick={onClose}
+          aria-label="关闭"
+        />
+      </div>
+      <div
+        data-ow-part="counter"
+        // 读数：mono + tabular-nums（§7），切图时位数不跳。
+        className="absolute bottom-9 right-7 font-[family-name:var(--ow-font-mono)] text-ow-fs-ui font-medium leading-none [font-variant-numeric:tabular-nums] text-[color:var(--ow-text)]"
+      >
+        {activeIndex + 1} / {images.length}
+      </div>
+    </div>
+  )
+}

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

@@ -0,0 +1,257 @@
+import type { Meta, StoryObj } from "@storybook/react"
+import { useState } from "react"
+import { Button } from "../../primitives"
+import { Cpu, Folder, Globe, InfoCircle, Lock, Shield } from "../Icons"
+import { ListRow, ListRowGroup } from "./index"
+
+const meta = {
+  title: "Composite/ListRow",
+  component: ListRow,
+  parameters: { layout: "padded" },
+  tags: ["autodocs"],
+} satisfies Meta<typeof ListRow>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+/** 面板底衬：不写死主题，靠 --ow-surface / --ow-border 跟随当前档。 */
+function Panel({ children, width = 480 }: { children: React.ReactNode; width?: number }) {
+  return (
+    <div
+      style={{
+        width,
+        background: "var(--ow-surface)",
+        border: "1px solid var(--ow-border)",
+        borderRadius: "var(--ow-radius-card)",
+        padding: "8px 4px",
+      }}
+    >
+      {children}
+    </div>
+  )
+}
+
+/** 弹层底衬：坐在 --ow-popover-bg 上的行走 hover-pop 档（§5）。 */
+function Popover({ children, width = 300 }: { children: React.ReactNode; width?: number }) {
+  return (
+    <div
+      style={{
+        width,
+        background: "var(--ow-popover-bg)",
+        border: "1px solid var(--ow-border)",
+        borderRadius: "var(--ow-radius-lg)",
+        boxShadow: "var(--ow-shadow-pop)",
+        padding: 4,
+      }}
+    >
+      {children}
+    </div>
+  )
+}
+
+export const Default: Story = {
+  args: {
+    title: "开机自启动",
+    description: "系统启动时自动运行 Orbitwork。",
+    control: "switch",
+    checked: true,
+  },
+  render: (args) => (
+    <Panel>
+      <ListRowGroup>
+        <ListRow {...args} />
+      </ListRowGroup>
+    </Panel>
+  ),
+}
+
+/** 右操作槽四型：Switch / Checkbox / Chevron / 自定义按钮。 */
+export const ControlSlots: Story = {
+  args: { title: "占位" },
+  render: () => (
+    <Panel>
+      <ListRowGroup label="右槽形态">
+        <ListRow title="桌面通知" description="任务完成时弹系统通知。" control="switch" checked />
+        <ListRow title="发送崩溃报告" description="自动附上崩溃日志。" control="checkbox" checked />
+        <ListRow title="默认工作目录" description="~/Orbitwork" control="chevron" onClick={() => {}} />
+        <ListRow
+          title="清除本地缓存"
+          description="不影响已同步的会话。"
+          action={
+            <Button variant="secondary" size="sm">
+              清除
+            </Button>
+          }
+        />
+      </ListRowGroup>
+    </Panel>
+  ),
+}
+
+/** 左图标槽 + 主文/副文两行。 */
+export const WithIcon: Story = {
+  args: { title: "占位" },
+  render: () => (
+    <Panel>
+      <ListRowGroup>
+        <ListRow
+          icon={<InfoCircle />}
+          title="通知"
+          description="桌面提醒与声音。"
+          control="chevron"
+          onClick={() => {}}
+        />
+        <ListRow icon={<Lock />} title="隐私" description="数据留在本机。" control="chevron" onClick={() => {}} />
+        <ListRow icon={<Cpu />} title="模型" description="默认模型与图片模型。" control="chevron" onClick={() => {}} />
+        <ListRow icon={<Folder />} title="工作目录" control="chevron" onClick={() => {}} />
+      </ListRowGroup>
+    </Panel>
+  ),
+}
+
+/** 密档 32：单行、图标 + 主文，用于紧凑列表。 */
+export const Density: Story = {
+  args: { title: "占位" },
+  render: () => (
+    <div style={{ display: "flex", gap: 16 }}>
+      <Panel width={260}>
+        <ListRowGroup label="标准 40">
+          <ListRow icon={<Globe />} title="站点" control="chevron" onClick={() => {}} />
+          <ListRow icon={<Shield />} title="权限" control="chevron" onClick={() => {}} />
+        </ListRowGroup>
+      </Panel>
+      <Panel width={260}>
+        <ListRowGroup label="密档 32">
+          <ListRow density="compact" icon={<Globe />} title="站点" control="chevron" onClick={() => {}} />
+          <ListRow density="compact" icon={<Shield />} title="权限" control="chevron" onClick={() => {}} />
+        </ListRowGroup>
+      </Panel>
+    </div>
+  ),
+}
+
+/** 状态矩阵：default / 可点 / 选中 / disabled（逐 token，非统一透明度）。 */
+export const States: Story = {
+  args: { title: "占位" },
+  render: () => (
+    <Panel>
+      <ListRowGroup label="状态">
+        <ListRow title="静止" description="default：无底色，1px 上分隔。" control="chevron" />
+        <ListRow
+          title="可点"
+          description="hover=--ow-hover，press=--ow-press，focus 2px 环。"
+          control="chevron"
+          onClick={() => {}}
+        />
+        <ListRow
+          title="选中"
+          description="--ow-selected-bg 递进底 ＋ border-strong 环 ＋ control-on 勾，无彩四重编码。"
+          control="chevron"
+          selected
+          onClick={() => {}}
+        />
+        <ListRow title="禁用" description="逐 token 禁用色，指针 not-allowed。" control="switch" checked disabled />
+        <ListRow
+          title="禁用（可点行）"
+          description="不响应点击，不进 hover。"
+          control="chevron"
+          disabled
+          onClick={() => {}}
+        />
+      </ListRowGroup>
+    </Panel>
+  ),
+}
+
+/** 弹层内行：hover 一律 -pop 档，圆角 8，默认不画分隔线（§5）。 */
+export const OnPopoverSurface: Story = {
+  args: { title: "占位" },
+  render: () => (
+    <Popover>
+      <ListRowGroup label="弹层行">
+        <ListRow surface="pop" density="compact" icon={<Globe />} title="在浏览器打开" onClick={() => {}} />
+        <ListRow surface="pop" density="compact" icon={<Folder />} title="在访达中显示" onClick={() => {}} />
+        <ListRow surface="pop" density="compact" icon={<Shield />} title="复制安全链接" onClick={() => {}} />
+      </ListRowGroup>
+    </Popover>
+  ),
+}
+
+/** 受控 toggle 行家族：一组开关行的实际用法。 */
+export const ToggleGroup: Story = {
+  args: { title: "占位" },
+  render: function ToggleGroupStory() {
+    const [state, setState] = useState({ notify: true, sound: false, badge: true })
+    return (
+      <Panel>
+        <ListRowGroup label="通知">
+          <ListRow
+            title="桌面通知"
+            description="任务完成时显示系统通知。"
+            control="switch"
+            checked={state.notify}
+            onCheckedChange={(notify) => setState((s) => ({ ...s, notify }))}
+          />
+          <ListRow
+            title="声音提示"
+            description="任务完成时播放提示音。"
+            control="switch"
+            checked={state.sound}
+            onCheckedChange={(sound) => setState((s) => ({ ...s, sound }))}
+          />
+          <ListRow
+            title="徽章显示"
+            description="在 Dock 图标显示未读数。"
+            control="switch"
+            checked={state.badge}
+            onCheckedChange={(badge) => setState((s) => ({ ...s, badge }))}
+          />
+        </ListRowGroup>
+      </Panel>
+    )
+  },
+}
+
+/** 勾选行家族（旧 ListRowCheckbox 的去处），含混合态。 */
+export const CheckboxRows: Story = {
+  args: { title: "占位" },
+  render: function CheckboxRowsStory() {
+    const [picked, setPicked] = useState<string[]>(["read"])
+    const all = ["read", "write", "exec"]
+    const toggle = (id: string) => setPicked((p) => (p.includes(id) ? p.filter((x) => x !== id) : [...p, id]))
+    return (
+      <Panel>
+        <ListRowGroup label="权限">
+          <ListRow
+            title="全选"
+            control="checkbox"
+            checked={picked.length === all.length}
+            indeterminate={picked.length > 0 && picked.length < all.length}
+            onCheckedChange={(next) => setPicked(next ? all : [])}
+          />
+          <ListRow
+            title="读取文件"
+            description="允许智能体读取工作目录内的文件。"
+            control="checkbox"
+            checked={picked.includes("read")}
+            onCheckedChange={() => toggle("read")}
+          />
+          <ListRow
+            title="写入文件"
+            description="允许智能体新建与修改文件。"
+            control="checkbox"
+            checked={picked.includes("write")}
+            onCheckedChange={() => toggle("write")}
+          />
+          <ListRow
+            title="执行命令"
+            description="允许智能体在沙箱内运行命令。"
+            control="checkbox"
+            checked={picked.includes("exec")}
+            onCheckedChange={() => toggle("exec")}
+          />
+        </ListRowGroup>
+      </Panel>
+    )
+  },
+}