@orbit-work/ui 0.1.0

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

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

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

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

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

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

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

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