@orbit-work/ui 0.1.1 → 0.1.2

package/src/components/primitives/Select/SelectSource.test.mjs

@@ -1,94 +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")
-const fselectSource = await readFile(new URL("../../composite/FSelect/index.tsx", import.meta.url), "utf8")
-const modelSelectSource = await readFile(new URL("../../composite/ModelSelect/index.tsx", import.meta.url), "utf8")
-const projectSelectSource = await readFile(new URL("../../composite/ProjectSelect/index.tsx", import.meta.url), "utf8")
-
-test("select trigger is the Field-style three-state shell (rest/hover/open borders, control radius)", () => {
-  assert.ok(source.includes("border-[color:var(--ow-input-border)]"))
-  assert.ok(source.includes("hover:border-[color:var(--ow-input-border-hover)]"))
-  assert.ok(source.includes("border-[color:var(--ow-input-border-focus)]"))
-  // R2：焦点语法全库归一到 .ow-focus-ring（outline 三件套），不再走 --ow-focus-shadow。
-  assert.ok(source.includes('"ow-focus-ring"'))
-  assert.ok(source.includes("[border-radius:var(--ow-radius-control)]"))
-  // 28 / 32 / 40 control heights
-  assert.match(source, /sm: "h-7 /)
-  assert.match(source, /md: "h-8 /)
-  assert.match(source, /lg: "h-10 /)
-  // per-token disabled state, not blanket opacity
-  assert.ok(source.includes("disabled:bg-[var(--ow-input-disabled-bg)]"))
-  assert.ok(!source.includes("disabled:opacity"))
-})
-
-// W5 终扫：三档字号原写死 text-xs/text-sm，与同族 Field 的 text-ow-fs-ui 差一档；
-// 基类过渡缺 §9 唯一缓动 ease-beacon，且 transition-all 范围过宽。
-test("select trigger type scale is the 13px UI tier and motion is fully tokenised", () => {
-  assert.match(source, /sm: "h-7 [^"]*text-ow-fs-ui"/)
-  assert.match(source, /md: "h-8 [^"]*text-ow-fs-ui"/)
-  assert.match(source, /lg: "h-10 [^"]*text-ow-fs-ui"/)
-  // 注释里点名旧写法作文档，禁令只查代码
-  const code = source.replace(/\/\*[\s\S]*?\*\//g, "").replace(/^[ \t]*\/\/.*$/gm, "")
-  assert.doesNotMatch(code, /\btext-xs\b|\btext-sm\b/)
-  assert.ok(source.includes("duration-[var(--ow-dur-1)] ease-[var(--ow-ease-beacon)]"))
-  assert.ok(!source.includes("transition-all"))
-})
-
-test("select menu follows the popover spec (menu radius, pop shadow, 1px border, dropdown z)", () => {
-  assert.ok(source.includes("[border-radius:var(--ow-radius-menu)]"))
-  assert.ok(source.includes("shadow-[var(--ow-shadow-pop)]"))
-  assert.ok(source.includes("border border-ow-border"))
-  assert.ok(source.includes("z-[var(--ow-z-dropdown)]"))
-})
-
-test("select rows use pop-tier interaction colors and a checkmark, not a filled selected background", () => {
-  assert.ok(source.includes("hover:bg-[var(--ow-hover-pop)]"))
-  assert.ok(source.includes("active:bg-[var(--ow-press-pop)]"))
-  assert.ok(!source.includes("--ow-selected-bg"))
-  assert.ok(source.includes("aria-selected={option.value === value}"))
-  // R2：选中勾与触发器箭头都改用 composite/Icons 的 Check / ChevDown，
-  // 不再在文件内自绘 24 网格 svg（图标两个来源，描边/网格无法统一维护）。
-  assert.ok(source.includes('import { Check, ChevDown } from "../../composite/Icons"'))
-  assert.ok(source.includes("<Check className="))
-  assert.ok(!source.includes("m5 12 4.5 4.5L19 7"))
-})
-
-test("select keeps focus on the trigger and supports keyboard navigation", () => {
-  assert.ok(source.includes("aria-activedescendant"))
-  assert.ok(source.includes('role="listbox"'))
-  assert.ok(source.includes('case "ArrowDown":'))
-  assert.ok(source.includes('case "ArrowUp":'))
-  assert.ok(source.includes('case "Home":'))
-  assert.ok(source.includes('case "End":'))
-  assert.ok(source.includes('event.key === "Escape"'))
-  assert.ok(source.includes('scrollIntoView({ block: "nearest" })'))
-})
-
-test("select trigger shell is exported for preset recipes", () => {
-  assert.ok(source.includes("export const SelectTrigger"))
-  assert.ok(source.includes('aria-haspopup="listbox"'))
-})
-
-test("fselect is a deprecated thin compat export over the Select base", () => {
-  assert.ok(fselectSource.includes("@deprecated"))
-  assert.ok(fselectSource.includes('from "../../primitives/Select"'))
-  assert.ok(fselectSource.includes('size="lg"'))
-  assert.ok(!fselectSource.includes("import { usePopover }"))
-})
-
-test("model select is a preset recipe on the shared trigger shell", () => {
-  assert.ok(modelSelectSource.includes("SelectTrigger"))
-  assert.ok(modelSelectSource.includes('from "../../primitives/Select"'))
-  assert.ok(!modelSelectSource.includes("className={`sel"))
-  assert.ok(modelSelectSource.includes("ModelPickerList"))
-})
-
-test("project select stays a preset recipe on the Select base", () => {
-  assert.ok(
-    projectSelectSource.includes('from "../../primitives"') ||
-      projectSelectSource.includes('from "../../primitives/Select"'),
-  )
-  assert.ok(projectSelectSource.includes("footer={footer}"))
-})

package/src/components/primitives/Select/index.tsx

@@ -1,364 +0,0 @@
-"use client"
-
-import { type VariantProps, cva } from "class-variance-authority"
-import {
-  type ButtonHTMLAttributes,
-  type KeyboardEvent,
-  type ReactNode,
-  forwardRef,
-  useEffect,
-  useId,
-  useRef,
-  useState,
-} from "react"
-import { cn } from "../../../lib/utils"
-import { Check, ChevDown } from "../../composite/Icons"
-
-export type SelectOption = {
-  value: string
-  label: string
-  /** Secondary description shown below the label */
-  sub?: string
-}
-
-const selectTriggerVariants = cva(
-  [
-    "w-full cursor-pointer flex items-center text-left font-normal relative",
-    "border bg-[var(--ow-input-bg)] text-[color:var(--ow-input-text)]",
-    "transition-[background-color,border-color,color,box-shadow] duration-[var(--ow-dur-1)] ease-[var(--ow-ease-beacon)]",
-    // R2：焦点语法归一到 .ow-focus-ring（outline 三件套），不再走 --ow-focus-shadow。
-    "ow-focus-ring",
-    "disabled:cursor-not-allowed disabled:bg-[var(--ow-input-disabled-bg)] disabled:border-[color:var(--ow-disabled-border)] disabled:text-[color:var(--ow-input-disabled-text)]",
-    "[border-radius:var(--ow-radius-control)]",
-  ].join(" "),
-  {
-    variants: {
-      open: {
-        true: "border-[color:var(--ow-input-border-focus)]",
-        false: "border-[color:var(--ow-input-border)] hover:border-[color:var(--ow-input-border-hover)]",
-      },
-      size: {
-        sm: "h-7 pr-8 pl-3 text-ow-fs-ui",
-        md: "h-8 pr-9 pl-3.5 text-ow-fs-ui",
-        lg: "h-10 pr-10 pl-4 text-ow-fs-ui",
-      },
-    },
-    defaultVariants: {
-      open: false,
-      size: "md",
-    },
-  },
-)
-
-const selectMenuVariants = cva(
-  [
-    "absolute left-0 right-0 z-[var(--ow-z-dropdown)] p-1.5 max-h-[264px] overflow-y-auto",
-    "bg-[var(--ow-popover-bg)] border border-ow-border",
-    "shadow-[var(--ow-shadow-pop)]",
-    "[border-radius:var(--ow-radius-menu)]",
-  ].join(" "),
-  {
-    variants: {
-      position: {
-        down: "top-[calc(100%+4px)]",
-        up: "bottom-[calc(100%+4px)]",
-      },
-    },
-    defaultVariants: {
-      position: "down",
-    },
-  },
-)
-
-const selectOptionVariants = cva(
-  [
-    "w-full flex items-center gap-2 min-h-8 px-2 py-1.5 border-none bg-transparent cursor-pointer text-left text-ow-fs-ui font-normal leading-snug",
-    "text-[color:var(--ow-text)]",
-    "[border-radius:var(--ow-radius-control)]",
-    // §9 唯一缓动：有 duration 就必须带 ease-beacon，否则落浏览器默认曲线。
-    "transition-colors duration-[var(--ow-dur-1)] ease-[var(--ow-ease-beacon)]",
-    "hover:bg-[var(--ow-hover-pop)] active:bg-[var(--ow-press-pop)]",
-  ].join(" "),
-  {
-    variants: {
-      /** Keyboard-active row highlight — same pop-tier hover color. */
-      active: {
-        true: "bg-[var(--ow-hover-pop)]",
-        false: "",
-      },
-    },
-    defaultVariants: {
-      active: false,
-    },
-  },
-)
-
-export type SelectTriggerProps = {
-  /** Whether the attached menu is open (focus-tier border + rotated chevron). */
-  open?: boolean
-  /** Size variant: 28 / 32 / 40 control heights */
-  size?: VariantProps<typeof selectTriggerVariants>["size"]
-  /** Trigger label content */
-  children?: ReactNode
-  className?: string
-} & Omit<ButtonHTMLAttributes<HTMLButtonElement>, "className" | "children">
-
-/**
- * Select trigger shell — the Field-style three-state control
- * (rest border → hover border-strong → focus/open focus-ring), 32px tall
- * at md, 8px radius, trailing chevron that rotates while open.
- *
- * Exported for preset recipes (ModelSelect and friends) that pair the
- * standard trigger with their own popover/listbox implementation.
- */
-export const SelectTrigger = forwardRef<HTMLButtonElement, SelectTriggerProps>(function SelectTrigger(
-  { open = false, size = "md", children, className, ...rest },
-  ref,
-) {
-  return (
-    <button
-      ref={ref}
-      type="button"
-      data-ow-part="control"
-      data-ow-role={open ? "open" : "closed"}
-      className={cn(selectTriggerVariants({ open, size }), className)}
-      aria-haspopup="listbox"
-      aria-expanded={open}
-      {...rest}
-    >
-      <span className="flex-1 min-w-0 overflow-hidden text-ellipsis whitespace-nowrap">{children}</span>
-      {/* R2：原为文件内自绘 24 网格 svg（1.5 描边），与全库图标目录两个来源；归 composite/Icons。 */}
-      <ChevDown
-        className={cn(
-          "absolute right-3 top-1/2 w-4 h-4 text-[color:var(--ow-text-3)] -translate-y-1/2 pointer-events-none",
-          "transition-transform duration-[var(--ow-dur-1)] ease-[var(--ow-ease-beacon)]",
-          open && "rotate-180",
-        )}
-        aria-hidden="true"
-      />
-    </button>
-  )
-})
-
-export type SelectProps = {
-  /** Currently selected value */
-  value: string
-  /** Available options */
-  options: SelectOption[]
-  /** Called when an option is selected */
-  onChange: (value: string) => void
-  /** Placeholder text when no value is selected */
-  placeholder?: string
-  /** Disable the select */
-  disabled?: boolean
-  /** Size variant */
-  size?: VariantProps<typeof selectTriggerVariants>["size"]
-  /** Optional footer content rendered at the bottom of the dropdown */
-  footer?: ReactNode
-  /** Additional class name */
-  className?: string
-}
-
-/**
- * The single selector base of Orbitwork DS 2.0.
- *
- * - Trigger: Field-style three-state shell (32px @ md, 8px radius)
- * - Menu: popover spec — 10px radius, --ow-shadow-pop, 1px border,
- *   pop-tier row hover, checkmark (not a filled background) for the
- *   selected row, z = var(--ow-z-dropdown), auto-flip near the viewport edge
- *
- * W5 终扫：触发器三档原写死 text-xs/text-sm（12/14px），改统一 UI 密度档
- * --ow-fs-ui(13px)，与同族输入件 Field 并排不再差一档；基类 transition 原缺
- * ease-beacon（§9 唯一缓动），补齐。R2 补完剩下两处：选项行 transition-colors
- * 与触发器箭头 transition-transform 也各自补上 ease-beacon（W5 只改了触发器基类，
- * 注释却写成已全补），并把两枚自绘 svg 换成 composite/Icons 的 ChevDown / Check。
- *
- * - Keyboard: ArrowUp/Down/Home/End navigate, Enter picks, Esc closes,
- *   focus stays on the trigger (aria-activedescendant listbox pattern)
- */
-export function Select({
-  value,
-  options,
-  onChange,
-  placeholder = "请选择",
-  disabled = false,
-  size = "md",
-  footer,
-  className,
-}: SelectProps) {
-  const [open, setOpen] = useState(false)
-  const [up, setUp] = useState(false)
-  const [activeIndex, setActiveIndex] = useState(-1)
-  const wrapRef = useRef<HTMLDivElement>(null)
-  const buttonRef = useRef<HTMLButtonElement>(null)
-  const listRef = useRef<HTMLDivElement>(null)
-  const listId = useId()
-  const selected = options.find((option) => option.value === value)
-  const optionId = (index: number) => `${listId}-opt-${index}`
-
-  useEffect(() => {
-    if (!open) return undefined
-
-    const closeOnOutsideClick = (event: MouseEvent) => {
-      if (wrapRef.current && !wrapRef.current.contains(event.target as Node)) {
-        setOpen(false)
-      }
-    }
-    const closeOnEscape = (event: globalThis.KeyboardEvent) => {
-      if (event.key === "Escape") {
-        setOpen(false)
-        buttonRef.current?.focus()
-      }
-    }
-
-    document.addEventListener("mousedown", closeOnOutsideClick, true)
-    document.addEventListener("keydown", closeOnEscape)
-    return () => {
-      document.removeEventListener("mousedown", closeOnOutsideClick, true)
-      document.removeEventListener("keydown", closeOnEscape)
-    }
-  }, [open])
-
-  // Keep the keyboard-active row visible while navigating.
-  useEffect(() => {
-    if (!open || activeIndex < 0) return
-    listRef.current?.querySelector(`[data-index="${activeIndex}"]`)?.scrollIntoView({ block: "nearest" })
-  }, [open, activeIndex])
-
-  const openMenu = () => {
-    if (disabled) return
-    if (buttonRef.current) {
-      const rect = buttonRef.current.getBoundingClientRect()
-      setUp(window.innerHeight - rect.bottom < 300)
-    }
-    const selectedIndex = options.findIndex((option) => option.value === value)
-    setActiveIndex(selectedIndex >= 0 ? selectedIndex : 0)
-    setOpen(true)
-  }
-
-  const toggle = () => {
-    if (disabled) return
-    if (open) setOpen(false)
-    else openMenu()
-  }
-
-  const pick = (nextValue: string) => {
-    onChange(nextValue)
-    setOpen(false)
-    buttonRef.current?.focus()
-  }
-
-  const onTriggerKeyDown = (event: KeyboardEvent<HTMLButtonElement>) => {
-    if (disabled) return
-    if (!open) {
-      if (event.key === "ArrowDown" || event.key === "ArrowUp") {
-        event.preventDefault()
-        openMenu()
-      }
-      return
-    }
-    switch (event.key) {
-      case "ArrowDown":
-        event.preventDefault()
-        setActiveIndex((index) => Math.min(index + 1, options.length - 1))
-        break
-      case "ArrowUp":
-        event.preventDefault()
-        setActiveIndex((index) => Math.max((index < 0 ? options.length : index) - 1, 0))
-        break
-      case "Home":
-        event.preventDefault()
-        setActiveIndex(0)
-        break
-      case "End":
-        event.preventDefault()
-        setActiveIndex(options.length - 1)
-        break
-      case "Enter":
-      case " ": {
-        event.preventDefault()
-        const active = options[activeIndex]
-        if (active) pick(active.value)
-        else setOpen(false)
-        break
-      }
-      case "Tab":
-        setOpen(false)
-        break
-    }
-  }
-
-  return (
-    <div
-      data-slot="select"
-      data-ow-part="control"
-      className={cn("relative", open && "z-[var(--ow-z-dropdown)]", className)}
-      ref={wrapRef}
-    >
-      <SelectTrigger
-        ref={buttonRef}
-        open={open}
-        size={size}
-        disabled={disabled}
-        onClick={toggle}
-        onKeyDown={onTriggerKeyDown}
-        aria-controls={open ? listId : undefined}
-        aria-activedescendant={open && activeIndex >= 0 ? optionId(activeIndex) : undefined}
-      >
-        {selected ? (
-          selected.label
-        ) : disabled ? (
-          placeholder
-        ) : (
-          <span className="text-[color:var(--ow-placeholder)]">{placeholder}</span>
-        )}
-      </SelectTrigger>
-      {open && (
-        <div
-          ref={listRef}
-          id={listId}
-          data-ow-part="list"
-          className={selectMenuVariants({ position: up ? "up" : "down" })}
-          role="listbox"
-        >
-          {options.map((option, index) => (
-            <button
-              key={option.value}
-              id={optionId(index)}
-              type="button"
-              role="option"
-              tabIndex={-1}
-              aria-selected={option.value === value}
-              data-index={index}
-              data-ow-role={option.value === value ? "selected" : "option"}
-              className={selectOptionVariants({ active: index === activeIndex })}
-              onMouseDown={(event) => event.preventDefault()}
-              onMouseEnter={() => setActiveIndex(index)}
-              onClick={() => pick(option.value)}
-            >
-              <span className="flex-1 min-w-0 flex flex-col gap-0.5">
-                <span
-                  className={cn(
-                    "overflow-hidden text-ellipsis whitespace-nowrap",
-                    option.value === value && "font-medium",
-                  )}
-                >
-                  {option.label}
-                </span>
-                {option.sub && (
-                  <span className="text-ow-fs-eyebrow font-normal leading-snug text-[color:var(--ow-text-3)] overflow-hidden text-ellipsis whitespace-nowrap">
-                    {option.sub}
-                  </span>
-                )}
-              </span>
-              {option.value === value && (
-                <Check className="shrink-0 w-4 h-4 text-[color:var(--ow-text)]" aria-hidden="true" />
-              )}
-            </button>
-          ))}
-          {footer}
-        </div>
-      )}
-    </div>
-  )
-}

package/src/components/primitives/Spinner/index.tsx

@@ -1,58 +0,0 @@
-import { cn } from "../../../lib/utils"
-
-/**
- * Spinner — <20px 小转子（DS 2.0 原语，§9 唯一转子帧）
- *
- * 1.5px 描边圆环 ＋ 90° 缺口（pathLength 100 / dasharray 75 25），
- * linear var(--ow-dur-spin-fast)=0.9s 匀速，色随所在文字（currentColor）。
- * reduced-motion 下 motion-safe: 前缀自动停转，留静态缺口环。
- *
- * 全库四处同款手抄（Button 的 loading 槽、DropZone 忙态、SkillDetailPanelView、
- * ToolDetailModalView）在 W-R2 收到本件，唯一实现只此一份；≥20px 的运行态请用
- * composite/BeaconSpinner（信标构型），不要放大本件。
- */
-export type SpinnerSize = "sm" | "md" | "lg"
-
-const sizeClasses: Record<SpinnerSize, string> = {
-  /** 14px —— 随 body-sm/紧凑行 */
-  sm: "h-3.5 w-3.5",
-  /** 16px —— 默认，随 fs-ui */
-  md: "h-4 w-4",
-  /** 20px —— §9 小转子上限 */
-  lg: "h-5 w-5",
-}
-
-export interface SpinnerProps {
-  /** 尺寸档：sm 14 / md 16 / lg 20，默认 md */
-  size?: SpinnerSize
-  /** 追加类；传了尺寸类会覆盖 size 档（Button 用它接自家 icon 尺寸表） */
-  className?: string
-}
-
-export function Spinner({ size = "md", className }: SpinnerProps) {
-  return (
-    <svg
-      data-slot="spinner"
-      data-ow-part="spinner"
-      className={cn(
-        "flex-shrink-0 motion-safe:animate-[ow-spin_var(--ow-dur-spin-fast)_linear_infinite]",
-        sizeClasses[size],
-        className,
-      )}
-      viewBox="0 0 16 16"
-      fill="none"
-      aria-hidden="true"
-    >
-      <circle
-        cx="8"
-        cy="8"
-        r="6.25"
-        stroke="currentColor"
-        strokeWidth="1.5"
-        strokeLinecap="round"
-        pathLength="100"
-        strokeDasharray="75 25"
-      />
-    </svg>
-  )
-}

package/src/components/primitives/Switch/Switch.stories.tsx

@@ -1,64 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react"
-import { useState } from "react"
-import { Switch } from "./index"
-
-const meta = {
-  title: "Primitives/Switch",
-  component: Switch,
-  parameters: {
-    layout: "centered",
-  },
-  tags: ["autodocs"],
-} satisfies Meta<typeof Switch>
-
-export default meta
-type Story = StoryObj<typeof meta>
-
-export const Default: Story = {
-  args: {
-    defaultChecked: false,
-  },
-}
-
-export const Checked: Story = {
-  args: {
-    defaultChecked: true,
-  },
-}
-
-export const Disabled: Story = {
-  args: {
-    defaultChecked: false,
-    disabled: true,
-  },
-}
-
-export const DisabledChecked: Story = {
-  args: {
-    defaultChecked: true,
-    disabled: true,
-  },
-}
-
-export const Interactive: Story = {
-  render: () => {
-    const [checked, setChecked] = useState(false)
-    return (
-      <div className="flex items-center gap-3">
-        <Switch checked={checked} onChange={setChecked} aria-label="Interactive switch" />
-        <span className="text-sm text-ow-text-2">{checked ? "已开启" : "已关闭"}</span>
-      </div>
-    )
-  },
-}
-
-export const AllStates: Story = {
-  render: () => (
-    <div className="flex items-center gap-4">
-      <Switch aria-label="关" />
-      <Switch defaultChecked aria-label="开" />
-      <Switch disabled aria-label="禁用关" />
-      <Switch disabled defaultChecked aria-label="禁用开" />
-    </div>
-  ),
-}

package/src/components/primitives/Switch/SwitchSource.test.mjs

@@ -1,38 +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")
-/** 注释里会点名被退役的旧写法作存档；禁项只查代码。 */
-const code = source.replace(/\/\*[\s\S]*?\*\//g, "").replace(/^[ \t]*\/\/.*$/gm, "")
-
-test("switch keeps 36x20 visual with a >=24px vertical hit target (A2-B3 原型 2553)", () => {
-  assert.match(source, /w-9 h-5 rounded-full/)
-  assert.match(source, /after:-inset-y-0\.5 after:inset-x-0/)
-})
-
-test("track/knob use control tokens only, never beacon yellow", () => {
-  assert.match(source, /bg-\[var\(--ow-control-on\)\]/)
-  assert.match(source, /bg-\[var\(--ow-control-off\)\]/)
-  assert.match(source, /bg-\[var\(--ow-control-knob\)\]/)
-  assert.match(source, /bg-\[var\(--ow-control-on-glyph\)\]/)
-  assert.doesNotMatch(source, /--ow-beacon|--ow-yellow|--ow-accent-dot/)
-})
-
-test("knob travel runs at the 200ms tier with ease-beacon", () => {
-  assert.match(
-    source,
-    /transition-\[transform,background-color\] duration-\[var\(--ow-dur-2\)\] ease-\[var\(--ow-ease-beacon\)\]/,
-  )
-})
-
-test("state completeness: hover, focus ring, per-token disabled", () => {
-  assert.match(source, /hover:bg-\[var\(--ow-border-strong\)\]/)
-  // R2：焦点语法全库归一到 .ow-focus-ring（outline 三件套），不再走 --ow-focus-shadow。
-  assert.match(source, /"ow-focus-ring"/)
-  assert.doesNotMatch(code, /--ow-focus-shadow/)
-  assert.match(source, /bg-\[var\(--ow-disabled-bg\)\]/)
-  assert.match(source, /border-\[color:var\(--ow-disabled-border\)\]/)
-  assert.match(source, /bg-\[var\(--ow-disabled-text\)\]/)
-  assert.doesNotMatch(source, /disabled:opacity|opacity-disabled/)
-})