@orbit-work/ui 0.1.1 → 0.1.2

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

@@ -1,110 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react"
-import { ContextUsageIndicatorView } from "./index"
-
-const meta = {
-  title: "Composite/ContextUsageIndicatorView",
-  component: ContextUsageIndicatorView,
-  parameters: {
-    layout: "centered",
-  },
-  tags: ["autodocs"],
-} satisfies Meta<typeof ContextUsageIndicatorView>
-
-export default meta
-type Story = StoryObj<typeof meta>
-
-export const Normal: Story = {
-  args: {
-    loading: false,
-    usageLoading: false,
-    modelLoading: false,
-    percent: 45,
-    percentLabel: "45%",
-    ariaLabel: "上下文占用 45%",
-    cacheHitLabel: "128K",
-    cacheHitPercent: "64%",
-    usedLabel: "90K",
-    remainingLabel: "110K",
-    totalLabel: "200K",
-    compactRecommended: false,
-  },
-}
-
-export const HighUsage: Story = {
-  args: {
-    loading: false,
-    usageLoading: false,
-    modelLoading: false,
-    percent: 92,
-    percentLabel: "92%",
-    ariaLabel: "上下文占用 92%",
-    cacheHitLabel: "150K",
-    cacheHitPercent: "75%",
-    usedLabel: "184K",
-    remainingLabel: "16K",
-    totalLabel: "200K",
-    compactRecommended: false,
-  },
-}
-
-export const CompactRecommended: Story = {
-  args: {
-    loading: false,
-    usageLoading: false,
-    modelLoading: false,
-    percent: 78,
-    percentLabel: "78%",
-    ariaLabel: "上下文占用 78%",
-    cacheHitLabel: "140K",
-    cacheHitPercent: "70%",
-    usedLabel: "156K",
-    remainingLabel: "44K",
-    totalLabel: "200K",
-    compactRecommended: true,
-  },
-}
-
-export const NoCacheHit: Story = {
-  args: {
-    loading: false,
-    usageLoading: false,
-    modelLoading: false,
-    percent: 35,
-    percentLabel: "35%",
-    ariaLabel: "上下文占用 35%",
-    usedLabel: "70K",
-    remainingLabel: "130K",
-    totalLabel: "200K",
-    compactRecommended: false,
-  },
-}
-
-export const Loading: Story = {
-  args: {
-    loading: true,
-    usageLoading: true,
-    modelLoading: false,
-    percentLabel: "—",
-    ariaLabel: "正在加载上下文信息",
-    usedLabel: "—",
-    remainingLabel: "—",
-    totalLabel: "200K",
-    compactRecommended: false,
-  },
-}
-
-export const ModelLoading: Story = {
-  args: {
-    loading: false,
-    usageLoading: false,
-    modelLoading: true,
-    percent: 45,
-    percentLabel: "45%",
-    ariaLabel: "上下文占用 45%",
-    cacheHitLabel: "90K",
-    usedLabel: "90K",
-    remainingLabel: "—",
-    totalLabel: "—",
-    compactRecommended: false,
-  },
-}

package/src/components/composite/ContextUsageIndicatorView/ContextUsageLoadingSource.test.mjs

@@ -1,23 +0,0 @@
-import assert from "node:assert/strict"
-import { readFile } from "node:fs/promises"
-import test from "node:test"
-
-const css = await readFile(new URL("../../../../styles/desktop-surfaces.css", import.meta.url), "utf8")
-
-// W5 终扫：ContextUsage 本体是 §12 锁定件，本条只管消费侧（desktop 面）的加载呼吸。
-test("§9 动效：加载呼吸走骨架定式（opacity 1→.55→1 · --ow-dur-spin · ease-beacon）", () => {
-  // R2 终扫：呼吸周期原写裸 1.6s，归 var(--ow-dur-spin)（同 ActionStatus / ArtifactCard）
-  assert.match(
-    css,
-    /\.context-usage-indicator--loading \.ow-context-usage svg \{[^}]*animation: ow-breathe var\(--ow-dur-spin\) var\(--ow-ease-beacon\) infinite;/s,
-  )
-  // 私有帧 context-usage-pulse 已并入全表共享的 ow-breathe（四条同体帧收成一条）——
-  // 断言帧声明与调用都没了（文件里只剩归档说明的那行注释）。
-  assert.doesNotMatch(css, /@keyframes context-usage-pulse/)
-  assert.doesNotMatch(css, /animation:[^;]*context-usage-pulse/)
-  assert.match(css, /@keyframes ow-breathe \{ 0%, 100% \{ opacity: 1; \} 50% \{ opacity: 0\.55; \} \}/)
-})
-
-test("§9 reduced-motion：呼吸停，静态色即加载态", () => {
-  assert.match(css, /\.context-usage-indicator--loading \.ow-context-usage svg \{\s*animation: none;/)
-})

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

@@ -1,139 +0,0 @@
-"use client"
-
-// DS2 P1-A3：本组件已改造为 domain/chat/ContextUsage（规格锁定件）的兼容包装。
-// 弧本体照卡（+24° 起笔 · 卫星珠 · 60/85 三档），预格式化标签映射进新件槽位；
-// hover 详情 popover 保留。新代码请直接使用 ContextUsage。
-
-import { useId } from "react"
-import { ContextUsage } from "../../domain/chat/ContextUsage"
-import { Button } from "../../primitives"
-import { Badge } from "../../primitives/Badge"
-import { Card } from "../../primitives/Card"
-
-export interface ContextUsageIndicatorViewProps {
-  sessionKey?: string | null
-  loading: boolean
-  usageLoading: boolean
-  modelLoading: boolean
-  percent?: number
-  percentLabel: string
-  ariaLabel: string
-  cacheHitLabel?: string
-  cacheHitPercent?: string
-  usedLabel: string
-  remainingLabel: string
-  totalLabel: string
-  compactRecommended: boolean
-}
-
-export function ContextUsageIndicatorView(props: ContextUsageIndicatorViewProps): React.ReactElement {
-  const tooltipId = useId()
-  // DS2 规格三档：≥85% danger · ≥60% warning。口径与锁定件 ContextUsage 的 tierColor
-  // 逐字一致——R2 终扫前这里还额外把 compactRecommended 也算成 warning，于是
-  // compactRecommended && percent<60 时弹层进度条是 warning 色、弧本体仍是 text-3，
-  // 同一读数出现两种档位。「建议压缩」自有 warning Badge ＋ 一句文字的双编码，不再串档。
-  const tone =
-    props.percent !== undefined && props.percent >= 85
-      ? "danger"
-      : props.percent !== undefined && props.percent >= 60
-        ? "warning"
-        : "normal"
-  // 加载中沿旧行为满弧呼吸（配色由 --loading CSS 压成 text-2）；未知时只结起笔珠
-  const arcValue = props.loading ? 1 : (props.percent ?? 0) / 100
-  // R2 · L2-1-7：读数只留百分比（原型 template.dc.html:1533 的 composer 读数即「72%」），
-  // used / total 明细留在下方 context-usage-popover 里——窄栏时不再从 mono 数字中间切出
-  // 「64k…」这种半截读数。完整口径仍进 aria-label / 弹层，读屏与 hover 都拿得到。
-  const readout = props.percentLabel
-  return (
-    <div
-      className={`context-usage-indicator context-usage-indicator--${tone}${props.loading ? " context-usage-indicator--loading" : ""}`}
-    >
-      <Button
-        variant="unstyled"
-        type="button"
-        className="context-usage-indicator__trigger"
-        aria-label={props.ariaLabel}
-        aria-describedby={tooltipId}
-      >
-        <ContextUsage key={props.sessionKey} value={arcValue} size={18} showReadout readout={readout} />
-      </Button>
-      <div id={tooltipId} role="tooltip" className="context-usage-popover">
-        <Card
-          className="context-usage-card"
-          title="上下文详情"
-          actions={<Badge className="context-usage-card__badge">TOKEN</Badge>}
-        >
-          <div className="context-usage-card__summary">
-            <span>窗口占用</span>
-            <strong>{props.percentLabel}</strong>
-          </div>
-          <div
-            className="context-usage-card__progress"
-            role="progressbar"
-            aria-label="上下文窗口占用"
-            aria-valuemin={0}
-            aria-valuemax={100}
-            aria-valuenow={props.loading || props.percent === undefined ? undefined : Math.round(props.percent)}
-          >
-            <span style={{ width: `${props.loading ? 0 : (props.percent ?? 0)}%` }} />
-          </div>
-          <div className="context-usage-card__cache-hit">
-            <span>缓存命中</span>
-            {props.usageLoading ? (
-              <Badge>加载中</Badge>
-            ) : props.cacheHitLabel ? (
-              <span className="context-usage-card__cache-hit-value">
-                <strong>{props.cacheHitLabel}</strong>
-                {props.cacheHitPercent && (
-                  <>
-                    <span>·</span>
-                    <span>{props.cacheHitPercent}</span>
-                  </>
-                )}
-              </span>
-            ) : (
-              <Badge>未命中</Badge>
-            )}
-          </div>
-          {props.compactRecommended && (
-            <div className="context-usage-card__compact-advice">
-              <Badge variant="warning" className="context-usage-card__compact-badge">
-                建议压缩
-              </Badge>
-              <span>已超过推荐阈值，建议执行 /compact 压缩上下文</span>
-            </div>
-          )}
-          <div className="context-usage-card__divider" />
-          <TotalRow tone="used" label="已使用" value={props.usedLabel} />
-          <TotalRow tone="remaining" label="剩余" value={props.remainingLabel} />
-          <div className="context-usage-card__divider" />
-          <TotalRow label="总可用" value={props.totalLabel} strong />
-          {props.totalLabel === "—" && (
-            <p className="context-usage-card__unavailable">
-              {props.modelLoading ? "正在获取模型上下文上限。" : "Studio 暂未提供此模型的上下文上限。"}
-            </p>
-          )}
-        </Card>
-      </div>
-    </div>
-  )
-}
-
-function TotalRow({
-  tone,
-  label,
-  value,
-  strong = false,
-}: { tone?: "used" | "remaining"; label: string; value: string; strong?: boolean }) {
-  return (
-    <div className={`context-usage-card__row context-usage-card__total${strong ? " is-strong" : ""}`}>
-      {tone ? (
-        <span className={`context-usage-card__dot context-usage-card__dot--${tone}`} />
-      ) : (
-        <span className="context-usage-card__dot-spacer" />
-      )}
-      <span className="context-usage-card__label">{label}</span>
-      <strong>{value}</strong>
-    </div>
-  )
-}

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

@@ -1,227 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react"
-import type * as React from "react"
-import { useState } from "react"
-import { Checkbox, Radio, RadioGroup, Switch } from "./index"
-
-const meta = {
-  title: "Composite/Controls",
-  parameters: {
-    layout: "padded",
-  },
-  tags: ["autodocs"],
-} satisfies Meta
-
-export default meta
-type Story = StoryObj<typeof meta>
-
-export const SwitchDefault: Story = {
-  render: () => {
-    const [checked, setChecked] = useState(false)
-    return (
-      <div style={{ display: "flex", alignItems: "center", gap: 12 }}>
-        <Switch checked={checked} onChange={setChecked} />
-        <span style={{ color: "var(--ow-text-2)", fontSize: 14 }}>{checked ? "已开启" : "已关闭"}</span>
-      </div>
-    )
-  },
-}
-
-export const SwitchDisabled: Story = {
-  render: () => (
-    <div style={{ display: "flex", flexDirection: "column", gap: 16 }}>
-      <div style={{ display: "flex", alignItems: "center", gap: 12 }}>
-        <Switch checked={false} disabled />
-        <span style={{ color: "var(--ow-text-3)", fontSize: 14 }}>关闭状态（禁用）</span>
-      </div>
-      <div style={{ display: "flex", alignItems: "center", gap: 12 }}>
-        <Switch checked={true} disabled />
-        <span style={{ color: "var(--ow-text-3)", fontSize: 14 }}>开启状态（禁用）</span>
-      </div>
-    </div>
-  ),
-}
-
-export const SwitchUncontrolled: Story = {
-  render: () => (
-    <div style={{ display: "flex", alignItems: "center", gap: 12 }}>
-      <Switch defaultChecked={false} onChange={(v) => console.log("changed:", v)} />
-      <span style={{ color: "var(--ow-text-2)", fontSize: 14 }}>非受控开关</span>
-    </div>
-  ),
-}
-
-export const CheckboxDefault: Story = {
-  render: () => {
-    const [checked, setChecked] = useState(false)
-    return (
-      <div style={{ display: "flex", alignItems: "center", gap: 12 }}>
-        <Checkbox checked={checked} onChange={setChecked} />
-        <span style={{ color: "var(--ow-text-2)", fontSize: 14 }}>接受条款和条件</span>
-      </div>
-    )
-  },
-}
-
-export const CheckboxGroup: Story = {
-  render: () => {
-    const [checks, setChecks] = useState({ a: false, b: true, c: false })
-    return (
-      <div style={{ display: "flex", flexDirection: "column", gap: 12 }}>
-        <div style={{ display: "flex", alignItems: "center", gap: 12 }}>
-          <Checkbox checked={checks.a} onChange={(v) => setChecks({ ...checks, a: v })} />
-          <span style={{ color: "var(--ow-text-2)", fontSize: 14 }}>通知</span>
-        </div>
-        <div style={{ display: "flex", alignItems: "center", gap: 12 }}>
-          <Checkbox checked={checks.b} onChange={(v) => setChecks({ ...checks, b: v })} />
-          <span style={{ color: "var(--ow-text-2)", fontSize: 14 }}>邮件订阅</span>
-        </div>
-        <div style={{ display: "flex", alignItems: "center", gap: 12 }}>
-          <Checkbox checked={checks.c} onChange={(v) => setChecks({ ...checks, c: v })} />
-          <span style={{ color: "var(--ow-text-2)", fontSize: 14 }}>短信提醒</span>
-        </div>
-      </div>
-    )
-  },
-}
-
-export const CheckboxDisabled: Story = {
-  render: () => (
-    <div style={{ display: "flex", flexDirection: "column", gap: 12 }}>
-      <div style={{ display: "flex", alignItems: "center", gap: 12 }}>
-        <Checkbox checked={false} disabled />
-        <span style={{ color: "var(--ow-text-3)", fontSize: 14 }}>未选中（禁用）</span>
-      </div>
-      <div style={{ display: "flex", alignItems: "center", gap: 12 }}>
-        <Checkbox checked={true} disabled />
-        <span style={{ color: "var(--ow-text-3)", fontSize: 14 }}>已选中（禁用）</span>
-      </div>
-    </div>
-  ),
-}
-
-const radioLabelStyle: React.CSSProperties = { color: "var(--ow-text-2)", fontSize: 14 }
-
-export const RadioGroupDefault: Story = {
-  render: () => {
-    const [value, setValue] = useState("option-a")
-    return (
-      <RadioGroup value={value} onChange={setValue} aria-label="选择选项">
-        {[
-          ["option-a", "选项 A"],
-          ["option-b", "选项 B"],
-          ["option-c", "选项 C"],
-        ].map(([key, label]) => (
-          <label key={key} className="flex items-center gap-2 cursor-pointer">
-            <Radio value={key} />
-            <span style={radioLabelStyle}>{label}</span>
-          </label>
-        ))}
-      </RadioGroup>
-    )
-  },
-}
-
-export const RadioGroupDisabled: Story = {
-  render: () => {
-    const [value, setValue] = useState("option-b")
-    return (
-      <RadioGroup value={value} onChange={setValue} disabled aria-label="禁用的单选组">
-        {[
-          ["option-a", "选项 A"],
-          ["option-b", "选项 B（已选中）"],
-          ["option-c", "选项 C"],
-        ].map(([key, label]) => (
-          <label key={key} className="flex items-center gap-2 cursor-not-allowed">
-            <Radio value={key} />
-            <span style={radioLabelStyle}>{label}</span>
-          </label>
-        ))}
-      </RadioGroup>
-    )
-  },
-}
-
-export const RadioGroupVertical: Story = {
-  render: () => {
-    const [value, setValue] = useState("monthly")
-    return (
-      <div>
-        <div style={{ color: "var(--ow-text)", fontSize: 14, fontWeight: 500, marginBottom: 12 }}>选择计费周期</div>
-        <RadioGroup value={value} onChange={setValue} aria-label="计费周期">
-          <div style={{ display: "flex", flexDirection: "column", gap: 8 }}>
-            <label className="flex items-start gap-2 cursor-pointer">
-              <Radio value="monthly" />
-              <div style={{ display: "flex", flexDirection: "column" }}>
-                <span style={{ fontSize: 14 }}>按月付费</span>
-                <span style={{ fontSize: 12, color: "var(--ow-text-3)" }}>¥99/月</span>
-              </div>
-            </label>
-            <label className="flex items-start gap-2 cursor-pointer">
-              <Radio value="yearly" />
-              <div style={{ display: "flex", flexDirection: "column" }}>
-                <span style={{ fontSize: 14 }}>按年付费</span>
-                <span style={{ fontSize: 12, color: "var(--ow-text-3)" }}>¥999/年（节省 ¥189）</span>
-              </div>
-            </label>
-          </div>
-        </RadioGroup>
-      </div>
-    )
-  },
-}
-
-export const RadioStandalone: Story = {
-  render: () => {
-    const [checked, setChecked] = useState(false)
-    return (
-      <div style={{ display: "flex", alignItems: "center", gap: 12 }}>
-        <Radio checked={checked} onChange={setChecked} />
-        <span style={{ color: "var(--ow-text-2)", fontSize: 14 }}>独立单选按钮</span>
-      </div>
-    )
-  },
-}
-
-export const AllControls: Story = {
-  render: () => {
-    const [switchValue, setSwitchValue] = useState(true)
-    const [checkboxValue, setCheckboxValue] = useState(false)
-    const [radioValue, setRadioValue] = useState("option-1")
-
-    return (
-      <div style={{ display: "flex", flexDirection: "column", gap: 32 }}>
-        <div>
-          <div style={{ color: "var(--ow-text)", fontWeight: 500, marginBottom: 12 }}>开关</div>
-          <div style={{ display: "flex", alignItems: "center", gap: 12 }}>
-            <Switch checked={switchValue} onChange={setSwitchValue} />
-            <span style={{ color: "var(--ow-text-2)", fontSize: 14 }}>启用功能</span>
-          </div>
-        </div>
-
-        <div>
-          <div style={{ color: "var(--ow-text)", fontWeight: 500, marginBottom: 12 }}>复选框</div>
-          <div style={{ display: "flex", alignItems: "center", gap: 12 }}>
-            <Checkbox checked={checkboxValue} onChange={setCheckboxValue} />
-            <span style={{ color: "var(--ow-text-2)", fontSize: 14 }}>同意服务条款</span>
-          </div>
-        </div>
-
-        <div>
-          <div style={{ color: "var(--ow-text)", fontWeight: 500, marginBottom: 12 }}>单选按钮组</div>
-          <RadioGroup value={radioValue} onChange={setRadioValue} aria-label="选择">
-            {[
-              ["option-1", "选项 1"],
-              ["option-2", "选项 2"],
-              ["option-3", "选项 3"],
-            ].map(([key, label]) => (
-              <label key={key} className="flex items-center gap-2 cursor-pointer">
-                <Radio value={key} />
-                <span style={radioLabelStyle}>{label}</span>
-              </label>
-            ))}
-          </RadioGroup>
-        </div>
-      </div>
-    )
-  },
-}

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

@@ -1,15 +0,0 @@
-"use client"
-
-export {
-  Switch,
-  Checkbox,
-  Radio,
-  RadioGroup,
-} from "../../primitives"
-
-export type {
-  SwitchProps,
-  CheckboxProps,
-  RadioProps,
-  RadioGroupProps,
-} from "../../primitives"

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

@@ -1,56 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react"
-import { CreateProjectDialog } from "./index"
-
-const meta = {
-  title: "Composite/CreateProjectDialog",
-  component: CreateProjectDialog,
-  parameters: {
-    layout: "fullscreen",
-  },
-  tags: ["autodocs"],
-} satisfies Meta<typeof CreateProjectDialog>
-
-export default meta
-type Story = StoryObj<typeof meta>
-
-export const Default: Story = {
-  args: {
-    onCancel: () => console.log("cancel"),
-    onSubmit: async (name) => {
-      console.log("submit", name)
-      await new Promise((resolve) => setTimeout(resolve, 1000))
-    },
-  },
-}
-
-export const WithError: Story = {
-  args: {
-    onCancel: () => console.log("cancel"),
-    onSubmit: async (name) => {
-      console.log("submit", name)
-      await new Promise((resolve) => setTimeout(resolve, 500))
-      throw new Error("项目名称已存在")
-    },
-  },
-}
-
-export const SlowSubmit: Story = {
-  args: {
-    onCancel: () => console.log("cancel"),
-    onSubmit: async (name) => {
-      console.log("submit", name)
-      await new Promise((resolve) => setTimeout(resolve, 3000))
-    },
-  },
-}
-
-export const NetworkError: Story = {
-  args: {
-    onCancel: () => console.log("cancel"),
-    onSubmit: async (name) => {
-      console.log("submit", name)
-      await new Promise((resolve) => setTimeout(resolve, 1000))
-      throw new Error("网络连接失败，请重试")
-    },
-  },
-}

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

@@ -1,70 +0,0 @@
-"use client"
-
-import { useState } from "react"
-import { useImeAwareEnter } from "../../../hooks/useImeAwareEnter"
-import { Button, Field } from "../../primitives"
-import { Dialog } from "../Dialog"
-
-export interface CreateProjectDialogProps {
-  onCancel: () => void
-  onSubmit: (name: string) => Promise<void>
-}
-
-/** 新建项目 —— 坐在统一 Dialog 基座上（遮罩/立面/z/焦点由基座提供）。 */
-export function CreateProjectDialog({ onCancel, onSubmit }: CreateProjectDialogProps): React.ReactElement {
-  const [name, setName] = useState("")
-  const [submitting, setSubmitting] = useState(false)
-  const [error, setError] = useState<string | null>(null)
-  const { isImeEnter, onCompositionEnd, onCompositionStart } = useImeAwareEnter()
-  const canSubmit = name.trim() !== "" && !submitting
-
-  const submit = () => {
-    if (!canSubmit) return
-    setSubmitting(true)
-    setError(null)
-    onSubmit(name.trim())
-      .catch((cause) => setError(cause instanceof Error ? cause.message : "创建项目失败"))
-      .finally(() => setSubmitting(false))
-  }
-
-  return (
-    <Dialog
-      open
-      title="新建项目"
-      width={448}
-      onClose={onCancel}
-      actions={
-        <>
-          <Button variant="secondary" onClick={onCancel}>
-            取消
-          </Button>
-          <Button variant="primary" loading={submitting} disabled={!canSubmit} onClick={submit}>
-            {submitting ? "创建中…" : "创建"}
-          </Button>
-        </>
-      }
-    >
-      <label data-ow-part="field" className="flex flex-col gap-2">
-        <span
-          data-ow-part="field-label"
-          className="text-[color:var(--ow-text-2)] font-medium text-ow-fs-ui leading-[1.4] font-[family-name:var(--ow-font-sans)]"
-        >
-          项目名称
-        </span>
-        <Field
-          autoFocus
-          value={name}
-          placeholder="例如 竞品调研"
-          error={error ?? undefined}
-          onChange={setName}
-          onCompositionStart={onCompositionStart}
-          onCompositionEnd={onCompositionEnd}
-          onKeyDown={(event) => {
-            if (isImeEnter(event)) return
-            if (event.key === "Enter") submit()
-          }}
-        />
-      </label>
-    </Dialog>
-  )
-}