@orbit-work/ui 0.1.0

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

@@ -0,0 +1,192 @@
+import type { Meta, StoryObj } from "@storybook/react"
+import type { CSSProperties, ReactNode } from "react"
+import { OrbitworkLockup, OrbitworkLogo, OrbitworkMark } from "./index"
+
+/**
+ * 品牌锁定件（§12）。dark / mono-white 变体只在暗面出现，light / mono-navy
+ * 只在浅面出现，故矩阵里的底板用锁定的 navy / paper 面（与 brand.card.html 一致）；
+ * auto 档与兼容导出 OrbitworkLogo 用主题面（--ow-bg/--ow-surface），
+ * 随 storybook 工具栏 data-theme 切换验证双主题可读。
+ */
+const meta = {
+  title: "Composite/OrbitworkLogo",
+  component: OrbitworkLogo,
+  parameters: {
+    layout: "centered",
+  },
+  tags: ["autodocs"],
+} satisfies Meta<typeof OrbitworkLogo>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+const navyPanel: CSSProperties = {
+  background: "var(--ow-navy)",
+  borderRadius: 12,
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
+  gap: 24,
+  padding: "20px 28px",
+}
+
+const paperPanel: CSSProperties = {
+  background: "var(--ow-surface)",
+  border: "1px solid var(--ow-border)",
+  borderRadius: 12,
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
+  gap: 24,
+  padding: "20px 28px",
+}
+
+const themePanel: CSSProperties = {
+  background: "var(--ow-bg)",
+  border: "1px solid var(--ow-border)",
+  borderRadius: 12,
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
+  gap: 24,
+  padding: "20px 28px",
+}
+
+function Column({ children }: { children: ReactNode }) {
+  return <div style={{ display: "flex", flexDirection: "column", gap: 12 }}>{children}</div>
+}
+
+/** 四色制矩阵：dark/mono-white 于暗面、light/mono-navy 于浅面（配色规格锁定）。 */
+export const MarkVariants: Story = {
+  render: () => (
+    <Column>
+      <div style={navyPanel}>
+        <OrbitworkMark variant="dark" size={60} />
+        <OrbitworkMark variant="mono-white" size={42} />
+      </div>
+      <div style={paperPanel}>
+        <OrbitworkMark variant="light" size={60} />
+        <OrbitworkMark variant="mono-navy" size={42} />
+      </div>
+    </Column>
+  ),
+}
+
+/** optical=内容光学框（排版居中）；construction=96 构造框（旋转/图标制图）。 */
+export const MarkFrames: Story = {
+  render: () => (
+    <div style={paperPanel}>
+      <span style={{ outline: "1px dashed var(--ow-border)", lineHeight: 0 }}>
+        <OrbitworkMark variant="light" frame="optical" size={64} />
+      </span>
+      <span style={{ outline: "1px dashed var(--ow-border)", lineHeight: 0 }}>
+        <OrbitworkMark variant="light" frame="construction" size={64} />
+      </span>
+    </div>
+  ),
+}
+
+/** 尺寸阶梯（品牌最小 16px；再小请勿使用标志）。 */
+export const MarkSizes: Story = {
+  render: () => (
+    <div style={{ ...paperPanel, alignItems: "flex-end" }}>
+      {[16, 24, 32, 48, 64].map((s) => (
+        <OrbitworkMark key={s} variant="light" size={s} />
+      ))}
+    </div>
+  ),
+}
+
+/** auto 档：随 data-theme 在 light/dark 两档官方配色间切换（工具栏切主题验证）。 */
+export const MarkAuto: Story = {
+  render: () => (
+    <div style={themePanel}>
+      <OrbitworkMark variant="auto" size={48} />
+      <OrbitworkMark variant="auto" size={32} />
+      <OrbitworkMark variant="auto" size={16} />
+    </div>
+  ),
+}
+
+/** 锁排：标=1.17×字号、间距=0.4×字号、光学基线补偿=0.12×字号，字标全小写 Space Grotesk 500。 */
+export const LockupLight: Story = {
+  render: () => (
+    <div style={paperPanel}>
+      <OrbitworkLockup size={21} />
+    </div>
+  ),
+}
+
+export const LockupDark: Story = {
+  render: () => (
+    <div style={navyPanel}>
+      <OrbitworkLockup theme="dark" size={21} />
+    </div>
+  ),
+}
+
+/** 双语段「泛舟星轨」：仅国内正式场合追加。 */
+export const LockupBilingual: Story = {
+  render: () => (
+    <Column>
+      <div style={paperPanel}>
+        <OrbitworkLockup size={20} bilingual />
+      </div>
+      <div style={navyPanel}>
+        <OrbitworkLockup theme="dark" size={20} bilingual />
+      </div>
+    </Column>
+  ),
+}
+
+/** auto 锁排（工具栏切主题验证双主题可读）。 */
+export const LockupAuto: Story = {
+  render: () => (
+    <div style={themePanel}>
+      <OrbitworkLockup theme="auto" size={22} />
+      <OrbitworkLockup theme="auto" size={22} bilingual />
+    </div>
+  ),
+}
+
+/** 锁排尺寸阶梯（最小锁排高 20px；更小场景改用 OrbitworkMark）。 */
+export const LockupSizes: Story = {
+  render: () => (
+    <div style={{ ...themePanel, alignItems: "flex-end" }}>
+      {[18, 22, 28, 36].map((s) => (
+        <OrbitworkLockup key={s} theme="auto" size={s} />
+      ))}
+    </div>
+  ),
+}
+
+/** 兼容导出 OrbitworkLogo（= 锁排 auto 档）：titlebar 28 / 分享卡 20 两个真实档位。 */
+export const CompatLogo: Story = {
+  render: () => (
+    <div style={themePanel}>
+      <OrbitworkLogo size={28} label="Orbitwork" />
+      <OrbitworkLogo size={20} />
+    </div>
+  ),
+}
+
+/** 品牌总览（对照 ow/components/brand/brand.card.html）。 */
+export const BrandBoard: Story = {
+  render: () => (
+    <Column>
+      <div style={navyPanel}>
+        <OrbitworkMark variant="dark" size={60} />
+        <OrbitworkMark variant="mono-white" size={42} />
+        <OrbitworkLockup theme="dark" size={21} />
+      </div>
+      <div style={paperPanel}>
+        <OrbitworkMark variant="light" size={60} />
+        <OrbitworkMark variant="mono-navy" size={42} />
+        <OrbitworkLockup size={21} />
+      </div>
+      <div style={paperPanel}>
+        <OrbitworkLockup size={20} bilingual />
+      </div>
+    </Column>
+  ),
+}

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

@@ -0,0 +1,207 @@
+import type { HTMLAttributes, SVGProps } from "react"
+
+/**
+ * Orbitwork 品牌锁定件（DS 2.0 §12）——照卡逐像素移植自
+ * design/ow/components/brand/{OrbitworkMark,OrbitworkLockup}.jsx。
+ * 几何、时序、配色、三极归属均为规格锁定值，不得自行改动。
+ */
+
+/** 信标轨迹五点（cx, cy, r, opacity）——规格锁定几何，勿改 */
+const TRAIL: ReadonlyArray<readonly [number, number, number, number]> = [
+  [48, 48, 8.2, 1],
+  [60.2, 20.6, 6.7, 0.6],
+  [41.76, 18.66, 5.5, 0.45],
+  [25.71, 27.93, 4.3, 0.3],
+  [18.16, 44.86, 3.3, 0.2],
+]
+
+/**
+ * 四色制锁定配色 [trail 墨色, satellite 卫星色]。
+ * 品牌墨色是锁定 hex（#0F1B3D / #F7F6F1），不得改经 --ow-text 间接取色
+ * （--ow-text 落 #333B50/#ECEBE5，非品牌墨）。荧黄 #FFD23E 只出现在暗面。
+ */
+const VARIANT_COLORS = {
+  dark: ["#F7F6F1", "#FFD23E"],
+  light: ["#0F1B3D", "#D8A300"],
+  "mono-white": ["#F7F6F1", "#F7F6F1"],
+  "mono-navy": ["#0F1B3D", "#0F1B3D"],
+} satisfies Record<string, readonly [string, string]>
+
+/**
+ * auto 档（包内适配层，非规格四色制成员）：随祖先 data-theme 在 light/dark
+ * 两档官方配色之间切换，终值仍是上表锁定 hex——变量由 styles/utilities.css
+ * 的 .ow-brand-auto 块按主题赋值，fallback 为浅色档。
+ */
+const AUTO_TRAIL = "var(--ow-brand-ink, #0F1B3D)"
+const AUTO_SATELLITE = "var(--ow-brand-satellite, #D8A300)"
+
+const OPTICAL_VIEWBOX = "13 11.7 73.4 45.3"
+const CONSTRUCTION_VIEWBOX = "0 0 96 96"
+
+/** 品牌最小渲染尺寸（guidelines/brand-mark）。 */
+const MIN_MARK_PX = 16
+
+const warned = new Set<string>()
+
+function warnBelowMinSize(component: string, px: number) {
+  if (typeof process !== "undefined" && process.env.NODE_ENV !== "production") {
+    if (Number.isFinite(px) && px < MIN_MARK_PX && !warned.has(`${component}:${px}`)) {
+      warned.add(`${component}:${px}`)
+      // eslint-disable-next-line no-console
+      console.warn(
+        `[Orbitwork DS2] ${component}: 渲染尺寸 ${px}px 低于品牌最小 ${MIN_MARK_PX}px（见 ow/guidelines/brand-mark），请增大 size 或改用其他呈现。`,
+      )
+    }
+  }
+}
+
+function joinClassNames(...names: Array<string | undefined>) {
+  const joined = names.filter(Boolean).join(" ")
+  return joined === "" ? undefined : joined
+}
+
+/** dark=暗面彩色（默认）· light=浅面彩色（卫星深黄）· mono-white / mono-navy=单色 · auto=随 data-theme（包内适配档） */
+export type OrbitworkMarkVariant = "dark" | "light" | "mono-white" | "mono-navy" | "auto"
+
+export type OrbitworkMarkProps = Omit<SVGProps<SVGSVGElement>, "viewBox"> & {
+  /** 四色制变体；auto 为包内主题适配档（终值仍是 light/dark 两档锁定 hex） */
+  variant?: OrbitworkMarkVariant
+  /** 宽度 px；optical 框时高度自动 ≈ size×0.617。数字场景最小 16 */
+  size?: number
+  /** optical=内容光学框（默认，排版居中用）；construction=96 构造框（旋转/图标制图用） */
+  frame?: "optical" | "construction"
+  /** 无障碍名称；传 undefined 且配合 aria-hidden 可作纯装饰 */
+  label?: string
+}
+
+/** 信标标志（The Beacon）。中心是你，尾迹是积累的工作，荧黄卫星是当下。 */
+export function OrbitworkMark({
+  variant = "dark",
+  size = 32,
+  frame = "optical",
+  label = "Orbitwork",
+  className,
+  style,
+  ...rest
+}: OrbitworkMarkProps) {
+  const auto = variant === "auto"
+  const [trailColor, satelliteColor] = auto
+    ? ([AUTO_TRAIL, AUTO_SATELLITE] as const)
+    : (VARIANT_COLORS[variant] ?? VARIANT_COLORS.dark)
+  const optical = frame !== "construction"
+  const height = optical ? Math.round(((size * 45.3) / 73.4) * 10) / 10 : size
+  warnBelowMinSize("OrbitworkMark", size)
+  return (
+    <svg
+      width={size}
+      height={height}
+      viewBox={optical ? OPTICAL_VIEWBOX : CONSTRUCTION_VIEWBOX}
+      role="img"
+      aria-label={label}
+      className={auto ? joinClassNames("ow-brand-auto", className) : className}
+      style={style}
+      {...rest}
+    >
+      {TRAIL.map(([cx, cy, r, o], i) => (
+        <circle key={i} cx={cx} cy={cy} r={r} fill={trailColor} opacity={o} />
+      ))}
+      <circle cx="75.4" cy="35.8" r="10.4" fill={satelliteColor} />
+    </svg>
+  )
+}
+
+/** light=浅底（默认）· dark=暗底 · auto=随 data-theme（包内适配档） */
+export type OrbitworkLockupTheme = "light" | "dark" | "auto"
+
+export type OrbitworkLockupProps = Omit<HTMLAttributes<HTMLSpanElement>, "children"> & {
+  theme?: OrbitworkLockupTheme
+  /** 字标字号 px；锁排最小高 20px，更小场景用 OrbitworkMark */
+  size?: number
+  /** 追加「泛舟星轨」双语段（仅国内正式场合） */
+  bilingual?: boolean
+  /** 无障碍名称 */
+  label?: string
+}
+
+/**
+ * 横排锁排：信标 + 全小写字标（Space Grotesk 500），标字间距=中心点直径。
+ * 比例锁定：标=1.17×字号，间距=0.4×字号，光学基线补偿=0.12×字号。
+ */
+export function OrbitworkLockup({
+  theme = "light",
+  size = 22,
+  bilingual = false,
+  label = "Orbitwork",
+  className,
+  style,
+  ...rest
+}: OrbitworkLockupProps) {
+  const auto = theme === "auto"
+  const dark = theme === "dark"
+  const inkColor = auto ? "var(--ow-brand-ink, #0F1B3D)" : dark ? "#F7F6F1" : "#0F1B3D"
+  const dividerColor = auto ? "var(--ow-brand-divider, #D8D5CC)" : dark ? "#333B50" : "#D8D5CC"
+  const cnColor = auto ? "var(--ow-brand-cn, #3A3E46)" : dark ? "#C9CBD1" : "#3A3E46"
+  warnBelowMinSize("OrbitworkLockup", Math.round(size * 1.17))
+  return (
+    <span
+      role="img"
+      aria-label={label}
+      className={auto ? joinClassNames("ow-brand-auto", className) : className}
+      style={{ display: "inline-flex", alignItems: "center", gap: Math.round(size * 0.4), ...style }}
+      {...rest}
+    >
+      <OrbitworkMark
+        variant={auto ? "auto" : dark ? "dark" : "light"}
+        size={Math.round(size * 1.17)}
+        style={{ marginBottom: Math.round(size * 0.12) }}
+        aria-hidden="true"
+        role={undefined}
+        aria-label={undefined}
+      />
+      <span
+        style={{
+          fontFamily: "var(--ow-font-display, 'Space Grotesk', sans-serif)",
+          fontWeight: 500,
+          fontSize: size,
+          letterSpacing: "-0.01em",
+          color: inkColor,
+          lineHeight: 1,
+          whiteSpace: "nowrap",
+        }}
+      >
+        orbitwork
+      </span>
+      {bilingual && <span aria-hidden="true" style={{ width: 1, alignSelf: "stretch", background: dividerColor }} />}
+      {bilingual && (
+        <span
+          style={{
+            fontFamily: "var(--ow-font-body, sans-serif)",
+            fontWeight: 500,
+            fontSize: Math.round(size * 0.68),
+            letterSpacing: "0.1em",
+            color: cnColor,
+            whiteSpace: "nowrap",
+          }}
+        >
+          泛舟星轨
+        </span>
+      )}
+    </span>
+  )
+}
+
+export type OrbitworkLogoProps = HTMLAttributes<HTMLSpanElement> & {
+  /** 字标字号 px（与 OrbitworkLockup 的 size 同义）。 */
+  size?: number | string
+  label?: string
+}
+
+/**
+ * 兼容导出：等价于 `<OrbitworkLockup theme="auto">`——随 data-theme 自适应的锁排，
+ * 供 titlebar / 分享卡等主题跟随语境使用。新代码请直接用 OrbitworkLockup / OrbitworkMark。
+ */
+export function OrbitworkLogo({ size = 24, label, ...rest }: OrbitworkLogoProps) {
+  const numeric = typeof size === "number" ? size : Number.parseFloat(size)
+  const px = Number.isNaN(numeric) ? 22 : numeric
+  return <OrbitworkLockup theme="auto" size={px} label={label} data-component="orbitwork-logo" {...rest} />
+}

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

@@ -0,0 +1,58 @@
+import type { Meta, StoryObj } from "@storybook/react"
+import { Button } from "../../primitives"
+import { OrbitworkModal } from "./index"
+
+/**
+ * @deprecated 已合并进 `Dialog`（蓝图 02 patterns）。本页只留兼容验证，
+ * 新用法请看 Composite/Dialog —— 自带 chrome 的内容传 `bare`。
+ */
+const meta = {
+  title: "Composite/OrbitworkModal (deprecated)",
+  component: OrbitworkModal,
+  parameters: {
+    layout: "fullscreen",
+  },
+  tags: ["autodocs"],
+} satisfies Meta<typeof OrbitworkModal>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+/** 兼容路径：等价于 `<Dialog bare>`，立面由基座给（16 圆角＋1px 边＋modal 影）。 */
+export const Open: Story = {
+  args: {
+    open: true,
+    onClose: () => {},
+    children: (
+      <div style={{ padding: 24, width: 460, maxWidth: "86vw" }}>
+        <div
+          style={{
+            marginBottom: 8,
+            color: "var(--ow-text)",
+            font: "600 var(--ow-fs-subtitle)/1.3 var(--ow-font-sans)",
+          }}
+        >
+          分享这个会话
+        </div>
+        <p
+          style={{ margin: "0 0 20px", color: "var(--ow-text-2)", font: "400 var(--ow-fs-ui)/1.5 var(--ow-font-sans)" }}
+        >
+          内容自带 chrome：裸壳只提供遮罩、立面、Escape 与焦点闭环。
+        </p>
+        <div style={{ display: "flex", gap: 12, justifyContent: "flex-end" }}>
+          <Button variant="secondary">取消</Button>
+          <Button variant="primary">生成链接</Button>
+        </div>
+      </div>
+    ),
+  },
+}
+
+/** 关闭态：不渲染任何节点（不留空遮罩）。 */
+export const Closed: Story = {
+  args: {
+    open: false,
+    onClose: () => {},
+    children: <div>关闭时不应出现</div>,
+  },
+}

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

@@ -0,0 +1,31 @@
+"use client"
+
+import type { ReactNode } from "react"
+import { Dialog } from "../Dialog"
+
+export interface OrbitworkModalProps {
+  open: boolean
+  onClose: () => void
+  children: ReactNode
+  className?: string
+  overlayClassName?: string
+}
+
+/**
+ * @deprecated DS 2.0 已把模态基座统一到 `Dialog`（蓝图 02 patterns：Dialog 合并 OrbitworkModal）。
+ * 本件仅作薄兼容导出：等价于 `<Dialog bare>`（只出遮罩＋立面，内容自带 chrome）。
+ * 新代码直接用 `Dialog`；需要自带 chrome 的预览壳传 `bare`。
+ */
+export function OrbitworkModal({
+  open,
+  onClose,
+  children,
+  className = "",
+  overlayClassName = "",
+}: OrbitworkModalProps) {
+  return (
+    <Dialog bare open={open} onClose={onClose} className={className} overlayClassName={overlayClassName}>
+      {children}
+    </Dialog>
+  )
+}