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

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

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

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