@orbit-work/ui 0.1.0

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

@@ -0,0 +1,83 @@
+/**
+ * ShareStrip — 分享页品牌页脚（DS 2.0 品牌锁定件，§12）
+ *
+ * 规格：design/ow/components/stage/ShareStrip/{ShareStrip.html,.prompt.md,.d.ts}
+ *
+ * 对外分享屏（share 链接落地页）底部的品牌条：受享者不登录也能看内容，
+ * 这一条是 Orbitwork 唯一的品牌露出与回流入口。舞台 token 全套恒定——
+ * --ow-stage-bg / --ow-stage-text / --ow-stage-muted / --ow-stage-accent——
+ * 不随宿主 data-theme 翻转，禁渐变。仅用于对外分享屏，应用内不出现。
+ *
+ * 结构（高 58px，左右 padding 18px）：
+ * - 左：信标 mark 22px（月白尾迹＋荧黄卫星）＋小写 orbitwork 字标（SG 500 / 15px / -0.01em）
+ * - 中：口号「交给 Orbitwork，工作继续。」13px 月白，绝对居中（字标永远小写）
+ * - 右：「在 Orbitwork 中打开」次级按钮：描边月白 1px、高 32、圆角 8、字重 500；
+ *   hover＝月白 8% 淡底、press 12%；焦点环 2px 月白＋2px 留白缝
+ *
+ * 品牌文本（productName/wordmark/slogan）可经可选 props 覆盖（白标租户）；几何/
+ * 舞台 token 仍是锁定件，不得改动。缺省回落 Orbitwork 默认品牌。
+ *
+ * 荧黄记账：卫星＝状态极，分享屏内限一处；quiet 模式（内容区已占状态极）卫星降级为月白。
+ * 句点取舍：口号句点随文字色——句点荧黄与卫星同屏即双状态极，违反配额，故本条停用荧黄句点。
+ * 响应：宽 <720px 隐藏中间口号，保 lockup＋按钮；按钮文案不缩写。
+ */
+
+export type ShareStripProps = {
+  /** 「在 {productName} 中打开」点击；缺省跳转应用深链 */
+  onOpen?: () => void
+  /** 分享内容自身已占状态极时置 true：卫星降级为月白 mono 版 mark */
+  quiet?: boolean
+  /** 产品名：驱动「在 {productName} 中打开」；缺省 "Orbitwork" */
+  productName?: string
+  /** 字标文本（永远小写）；缺省 "orbitwork" */
+  wordmark?: string
+  /** 中部口号；缺省「交给 Orbitwork，工作继续。」 */
+  slogan?: string
+}
+
+/* 样式内联随组件走（分享落地页语境自足）；每张分享屏至多一条，不产生重复膨胀。
+   hover 只动底色不动位移；过渡 120ms（--ow-dur-1）ease-beacon。 */
+const STRIP_CSS = `
+.ow-share-strip { container-type: inline-size; position: relative; flex: none; display: flex; align-items: center; height: 58px; padding: 0 18px; box-sizing: border-box; background: var(--ow-stage-bg); color: var(--ow-stage-text); border-top: 1px solid color-mix(in srgb, var(--ow-stage-muted) 30%, transparent); font-family: var(--ow-font-body); }
+.ow-share-strip__lockup { display: flex; align-items: center; gap: 9px; }
+.ow-share-strip__wordmark { font-family: var(--ow-font-display); font-weight: 500; font-size: 15px; letter-spacing: -0.01em; line-height: 1; color: var(--ow-stage-text); }
+.ow-share-strip__tagline { position: absolute; left: 50%; transform: translateX(-50%); font-size: 13px; letter-spacing: 0.02em; color: var(--ow-stage-text); white-space: nowrap; }
+.ow-share-strip__open { margin-left: auto; display: inline-flex; align-items: center; height: 32px; padding: 0 14px; border: 1px solid var(--ow-stage-text); border-radius: 8px; background: transparent; font-family: var(--ow-font-body); font-size: 13px; font-weight: 500; line-height: 1; color: var(--ow-stage-text); white-space: nowrap; cursor: pointer; transition: background-color var(--ow-dur-1, 120ms) var(--ow-ease-beacon); }
+.ow-share-strip__open:hover { background: color-mix(in srgb, var(--ow-stage-text) 8%, transparent); }
+.ow-share-strip__open:active { background: color-mix(in srgb, var(--ow-stage-text) 12%, transparent); }
+.ow-share-strip__open:focus-visible { outline: 2px solid var(--ow-stage-text); outline-offset: 2px; }
+@container (max-width: 719px) { .ow-share-strip__tagline { display: none; } }
+`
+
+export function ShareStrip({
+  onOpen,
+  quiet = false,
+  productName = "Orbitwork",
+  wordmark = "orbitwork",
+  slogan = "交给 Orbitwork，工作继续。",
+}: ShareStripProps) {
+  return (
+    <div className="ow-share-strip">
+      <style>{STRIP_CSS}</style>
+      <div className="ow-share-strip__lockup">
+        {/* 信标 mark 22px：月白尾迹；卫星＝状态极荧黄（quiet 时降级月白，让位于内容区的状态极） */}
+        <svg width="22" height="22" viewBox="2.3 -13.3 96 96" aria-hidden="true" style={{ display: "block" }}>
+          <g fill="var(--ow-stage-text)">
+            <circle cx="48" cy="48" r="8.2" />
+            <circle cx="60.2" cy="20.6" r="6.7" opacity=".6" />
+            <circle cx="41.76" cy="18.66" r="5.5" opacity=".45" />
+            <circle cx="25.71" cy="27.93" r="4.3" opacity=".3" />
+            <circle cx="18.16" cy="44.86" r="3.3" opacity=".2" />
+          </g>
+          <circle cx="75.4" cy="35.8" r="10.4" fill={quiet ? "var(--ow-stage-text)" : "var(--ow-stage-accent)"} />
+        </svg>
+        <span className="ow-share-strip__wordmark">{wordmark}</span>
+      </div>
+      {/* 口号句点随文字色（与卫星同屏，荧黄句点停用） */}
+      <div className="ow-share-strip__tagline">{slogan}</div>
+      <button type="button" className="ow-share-strip__open" onClick={onOpen}>
+        在 {productName} 中打开
+      </button>
+    </div>
+  )
+}

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

@@ -0,0 +1,90 @@
+import type { Meta, StoryObj } from "@storybook/react"
+import { type ShortcutGroup, ShortcutSheet } from "./index"
+
+const meta = {
+  title: "Composite/ShortcutSheet",
+  component: ShortcutSheet,
+  parameters: { layout: "fullscreen" },
+  tags: ["autodocs"],
+} satisfies Meta<typeof ShortcutSheet>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+const groups: ShortcutGroup[] = [
+  {
+    id: "global",
+    title: "全局",
+    items: [
+      { id: "palette", label: "打开命令面板", keys: ["Ctrl", "K"] },
+      { id: "search", label: "全局搜索", keys: ["Ctrl", "Shift", "F"] },
+      { id: "settings", label: "打开设置", keys: ["Ctrl", ","] },
+      { id: "shortcuts", label: "查看快捷键", keys: ["Ctrl", "/"] },
+    ],
+  },
+  {
+    id: "session",
+    title: "会话",
+    items: [
+      { id: "new", label: "新建会话", keys: ["Ctrl", "N"] },
+      { id: "send", label: "发送消息", keys: ["Enter"] },
+      { id: "newline", label: "换行", keys: ["Shift", "Enter"] },
+      { id: "stop", label: "停止生成", keys: ["Esc"] },
+    ],
+  },
+  {
+    id: "nav",
+    title: "导航",
+    items: [
+      { id: "next", label: "下一个会话", keys: ["Alt", "↓"] },
+      { id: "prev", label: "上一个会话", keys: ["Alt", "↑"] },
+      { id: "sidebar", label: "折叠侧栏", keys: ["Ctrl", "B"] },
+    ],
+  },
+]
+
+export const Default: Story = {
+  args: { open: true, groups },
+}
+
+export const WithSubtitle: Story = {
+  name: "带副标题",
+  args: {
+    open: true,
+    groups,
+    subtitle: "按 Esc 关闭这个面板。",
+  },
+}
+
+export const SingleGroup: Story = {
+  name: "单分组",
+  args: { open: true, groups: [groups[0]] },
+}
+
+export const Empty: Story = {
+  name: "空清单",
+  args: { open: true, groups: [] },
+}
+
+export const Closed: Story = {
+  name: "关闭态（不渲染）",
+  args: { open: false, groups },
+}
+
+export const DualTheme: Story = {
+  name: "双主题对照",
+  render: () => (
+    <div style={{ display: "flex" }}>
+      {(["light", "dark"] as const).map((theme) => (
+        // transform 让内部 fixed 覆盖层以本格为包含块，两档才能并排看
+        <div
+          key={theme}
+          data-theme={theme}
+          style={{ position: "relative", flex: 1, minHeight: 560, transform: "translateZ(0)" }}
+        >
+          <ShortcutSheet open groups={groups} width={420} />
+        </div>
+      ))}
+    </div>
+  ),
+}

package/src/components/composite/ShortcutSheet/ShortcutSheetSource.test.mjs

@@ -0,0 +1,49 @@
+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")
+
+test("面板由 Dialog 承载，快捷键由 KeycapCombo 呈现（不自造键帽）", () => {
+  assert.match(source, /import \{ Dialog \} from "\.\.\/Dialog"/)
+  assert.match(source, /import \{ KeycapCombo \} from "\.\.\/\.\.\/primitives\/Keycap"/)
+  assert.match(source, /<KeycapCombo keys=\{item\.keys\}/)
+})
+
+test("键帽右对齐：行内左说明右键帽", () => {
+  assert.match(source, /data-ow-part="row"[\s\S]*?justify-between/)
+  assert.match(source, /<KeycapCombo[^>]*className="shrink-0"/)
+})
+
+test("分组标题走眉标口径（§8：500 字重 + eyebrow 字号/字距/色）", () => {
+  assert.match(source, /--ow-fs-eyebrow-cjk/)
+  assert.match(source, /--ow-ls-eyebrow-cjk/)
+  assert.match(source, /text-\[color:var\(--ow-eyebrow\)\]/)
+  assert.match(source, /font-medium/)
+})
+
+test("空清单走 EmptyState 原语，不自造插画", () => {
+  assert.match(source, /import \{ EmptyState \} from "\.\.\/\.\.\/primitives\/EmptyState"/)
+  assert.match(source, /<EmptyState message=\{emptyMessage\}/)
+})
+
+test("R3 中性件：不带信标/荧黄；任意值 var() 带类型标注", () => {
+  assert.doesNotMatch(source, /var\(--ow-beacon|var\(--ow-accent-dot|var\(--ow-yellow/)
+  assert.doesNotMatch(source, /(?:text|border)-\[var\(--ow-/)
+  assert.doesNotMatch(source, /font-\[var\(--ow-font-/)
+})
+
+// ── A2-B5：设置面「快捷键」段的非弹层版（原型 2675–2692）────────────────────
+test("ShortcutGroupTable 是同一份数据的表卡陈列：眉标 ＋ 1px 边表卡 ＋ 行间线，键位仍走 Keycap", () => {
+  assert.match(source, /export function ShortcutGroupTable/)
+  assert.match(
+    source,
+    /border border-\[color:var\(--ow-border\)\] \[border-radius:var\(--ow-radius-lg\)\] bg-\[var\(--ow-surface\)\]/,
+  )
+  assert.match(source, /index > 0 && "border-t border-\[color:var\(--ow-border\)\]"/)
+  assert.match(source, /<KeycapCombo keys=\{item\.keys\} className="shrink-0" \/>/)
+  // 组间 14（设置面卡距），组内眉标与表卡 8
+  assert.match(source, /flex flex-col gap-3\.5 min-w-0/)
+  // §6 容器空态：全空走 EmptyState；§5 贴地零影
+  assert.match(source, /if \(isEmpty\) return <EmptyState message=\{emptyMessage\} \/>/)
+})

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

@@ -0,0 +1,163 @@
+"use client"
+
+import { Fragment } from "react"
+import { cn } from "../../../lib/utils"
+import { EmptyState } from "../../primitives/EmptyState"
+import { KeycapCombo } from "../../primitives/Keycap"
+import { Dialog } from "../Dialog"
+
+/**
+ * ShortcutSheet — 快捷键清单面板（DS 2.0 模式件，R3 中性件，无信标）。
+ *
+ * Dialog 承载（模态档：--ow-shadow-modal ＋ --ow-scrim ＋ 圆角 16，由 Dialog 提供）；
+ * 分组标题走眉标（§8：中文 500 / --ow-fs-eyebrow-cjk / --ow-ls-eyebrow-cjk / --ow-eyebrow）；
+ * 每行左说明右键帽，KeycapCombo 右对齐；快捷键是读数，mono + tabular-nums 由 Keycap 承担。
+ * 纯陈列，无行 hover/选中态；空清单走 EmptyState 原语（§6 容器空态）。
+ */
+export interface ShortcutItem {
+  id: string
+  /** 这条快捷键干什么，人话一句 */
+  label: string
+  /** 按键序列，如 ["Ctrl", "K"]；组合内顺序即显示顺序 */
+  keys: string[]
+}
+
+export interface ShortcutGroup {
+  id: string
+  /** 分组名（眉标），如「全局」「会话」 */
+  title: string
+  items: ShortcutItem[]
+}
+
+export interface ShortcutSheetProps {
+  open: boolean
+  onClose?: () => void
+  groups: ShortcutGroup[]
+  /** 面板标题，默认「键盘快捷键」 */
+  title?: string
+  subtitle?: string
+  /** 清单为空时的一句话 */
+  emptyMessage?: string
+  width?: number | string
+  className?: string
+}
+
+const groupTitleClass = [
+  "font-medium leading-none",
+  "text-[length:var(--ow-fs-eyebrow-cjk,12px)]",
+  "tracking-[var(--ow-ls-eyebrow-cjk,0.08em)]",
+  "text-[color:var(--ow-eyebrow)]",
+].join(" ")
+
+export function ShortcutSheet({
+  open,
+  onClose,
+  groups,
+  title = "键盘快捷键",
+  subtitle,
+  emptyMessage = "这里还没有可用的快捷键。",
+  width = 520,
+  className,
+}: ShortcutSheetProps) {
+  const isEmpty = groups.every((group) => group.items.length === 0)
+
+  return (
+    <Dialog
+      open={open}
+      title={title}
+      subtitle={subtitle}
+      onClose={onClose}
+      width={width}
+      className={cn("[&_[data-slot=dialog-body]]:overflow-y-auto", className)}
+    >
+      <div data-slot="shortcut-sheet" data-ow-part="list">
+        {isEmpty ? (
+          <EmptyState message={emptyMessage} />
+        ) : (
+          groups.map((group, index) => (
+            <Fragment key={group.id}>
+              {group.items.length > 0 && (
+                <section data-ow-part="group" className={index > 0 ? "mt-5" : undefined}>
+                  <h3 data-ow-part="group-title" className={cn(groupTitleClass, "m-0 mb-2")}>
+                    {group.title}
+                  </h3>
+                  <ul className="m-0 list-none p-0">
+                    {group.items.map((item) => (
+                      <li
+                        key={item.id}
+                        data-ow-part="row"
+                        className="flex h-8 items-center justify-between gap-4 border-b border-[color:var(--ow-border)] last:border-b-0"
+                      >
+                        <span className="min-w-0 truncate text-[length:var(--ow-fs-ui)] text-[color:var(--ow-text)]">
+                          {item.label}
+                        </span>
+                        <KeycapCombo keys={item.keys} className="shrink-0" />
+                      </li>
+                    ))}
+                  </ul>
+                </section>
+              )}
+            </Fragment>
+          ))
+        )}
+      </div>
+    </Dialog>
+  )
+}
+
+/**
+ * ShortcutGroupTable — 快捷键分组表（A2-B5 · 原型 2675–2692）
+ *
+ * 设置面「快捷键」段的陈列件：与 `ShortcutSheet` 同一份 `ShortcutGroup` 数据，
+ * 只是不坐 Dialog——每组是「眉标 ＋ 一张 1px 边 / `--ow-radius-lg` / `--ow-surface` 的表卡」，
+ * 卡内每行 `padding:10px 14px`，行与行之间 1px `--ow-border`（首行不画）。
+ * 键位仍走 `KeycapCombo`（Keycap：18 高 / mono 11 / `--ow-radius-key`）；
+ * 键位数据由研发接入（真机 shortcuts 表），本件不内置任何键位。
+ * R3 中性件：无信标、贴地零影、无行 hover。
+ */
+export interface ShortcutGroupTableProps {
+  groups: ShortcutGroup[]
+  /** 全空时的一句话（§6 容器空态） */
+  emptyMessage?: string
+  className?: string
+}
+
+export function ShortcutGroupTable({
+  groups,
+  emptyMessage = "这里还没有可用的快捷键。",
+  className,
+}: ShortcutGroupTableProps) {
+  const isEmpty = groups.every((group) => group.items.length === 0)
+  if (isEmpty) return <EmptyState message={emptyMessage} />
+
+  return (
+    <div data-slot="shortcut-group-table" className={cn("flex flex-col gap-3.5 min-w-0", className)}>
+      {groups
+        .filter((group) => group.items.length > 0)
+        .map((group) => (
+          <section key={group.id} data-ow-part="group" className="flex flex-col gap-2 min-w-0">
+            <h3 data-ow-part="group-title" className={cn(groupTitleClass, "m-0")}>
+              {group.title}
+            </h3>
+            <div className="flex flex-col min-w-0 overflow-hidden border border-[color:var(--ow-border)] [border-radius:var(--ow-radius-lg)] bg-[var(--ow-surface)]">
+              {group.items.map((item, index) => (
+                <div
+                  key={item.id}
+                  data-ow-part="row"
+                  className={cn(
+                    "flex items-center justify-between gap-3 px-3.5 py-2.5 min-w-0",
+                    index > 0 && "border-t border-[color:var(--ow-border)]",
+                  )}
+                >
+                  <span className="min-w-0 truncate text-[length:var(--ow-fs-ui)] text-[color:var(--ow-text)]">
+                    {item.label}
+                  </span>
+                  <KeycapCombo keys={item.keys} className="shrink-0" />
+                </div>
+              ))}
+            </div>
+          </section>
+        ))}
+    </div>
+  )
+}