@orbit-work/ui 0.1.0

package/src/components/composite/CatalogStates/CatalogEmptyState.stories.tsx

@@ -0,0 +1,108 @@
+import type { Meta, StoryObj } from "@storybook/react"
+import { CatalogEmptyState } from "./index"
+
+/**
+ * CatalogEmptyState — 目录/广场容器的空态（G5）。
+ * W3 起整块走 primitives/EmptyState：信标 mono 母题 ＋ title/hint 并成的一句 text-2
+ * ＋ 可选「清空搜索」（secondary，空态不占行动极）。旧的 `icon` 入参已 @deprecated 不渲染。
+ */
+const meta = {
+  title: "Composite/CatalogEmptyState",
+  component: CatalogEmptyState,
+  parameters: {
+    layout: "centered",
+  },
+  tags: ["autodocs"],
+} satisfies Meta<typeof CatalogEmptyState>
+
+export default meta
+
+type Story = StoryObj<typeof meta>
+
+/** G5 标准形：信标母题 ＋ 一句 text-2。 */
+export const Default: Story = {
+  args: {
+    title: "这里还没有内容",
+    hint: "从右上角新建一个开始。",
+  },
+}
+
+export const NoSearchResult: Story = {
+  args: {
+    title: "没有找到匹配的内容",
+    hint: "换个关键词试试。",
+  },
+}
+
+/** 「清空搜索」是退路不是主张：secondary 按钮，不占行动极。 */
+export const WithClearSearch: Story = {
+  args: {
+    title: "没有找到匹配的内容",
+    hint: "换个关键词试试，或者清空搜索看全部。",
+    onClearSearch: () => console.log("clear search"),
+  },
+}
+
+/** 网格档：`grid` 让空态跨满整行（.plaza__empty 现在只剩 grid-column）。 */
+export const InGrid: Story = {
+  args: {
+    grid: true,
+    title: "还没有技能",
+    hint: "去技能市场装一个，或者自己建。",
+  },
+  decorators: [
+    (Story) => (
+      <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 180px)", gap: 12, width: 588 }}>
+        <Story />
+      </div>
+    ),
+  ],
+}
+
+/** 弃用的 `icon`：传了也不渲染（G5 只有一个母题，不再另配图标筐）。 */
+export const DeprecatedIconIsIgnored: Story = {
+  args: {
+    icon: "📦",
+    title: "这里还没有内容",
+    hint: "从右上角新建一个开始。",
+  },
+}
+
+/**
+ * R2 L2-1-4 ＋ L2-3-2：整栏**首次**空态＝ §6 page 一级——母题 52 ＋ 标题 ＋ 副句 ＋ 一枚钮。
+ * `grid` 现在缺省就是这一档；主动作走 `action` 槽，一律 secondary 描边
+ * （同屏页头已有同名主钮，空态不占第二个行动极）。
+ */
+export const GridFirstRun: Story = {
+  args: {
+    grid: true,
+    title: "还没有站点",
+    hint: "在对话里让专家产出页面，发布成站点后就会出现在这里。",
+    action: { label: "新建站点", onClick: () => console.log("create") },
+  },
+  decorators: [
+    (Story) => (
+      <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 180px)", gap: 12, width: 588 }}>
+        <Story />
+      </div>
+    ),
+  ],
+}
+
+/** 搜索无结果＝二级空态：显式 `size="md"`（母题 40 ＋ 一句 ＋「清空搜索」描边钮）。 */
+export const GridNoSearchResult: Story = {
+  args: {
+    grid: true,
+    size: "md",
+    title: "没有找到匹配的站点",
+    hint: "换个关键词试试，或清空搜索查看全部。",
+    onClearSearch: () => console.log("clear search"),
+  },
+  decorators: [
+    (Story) => (
+      <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 180px)", gap: 12, width: 588 }}>
+        <Story />
+      </div>
+    ),
+  ],
+}

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

@@ -0,0 +1,53 @@
+import type { Meta, StoryObj } from "@storybook/react"
+import { CardGridSkeleton } from "./index"
+
+/**
+ * CardGridSkeleton 的故事。CatalogEmptyState 另起 CatalogEmptyState.stories.tsx——
+ * 一个 CSF 文件只认一个 default export，原来挤在同一文件里的第二个 meta 从未生效，
+ * 「空态」故事其实一直渲染的是骨架（W3 修）。
+ */
+const metaSkeleton = {
+  title: "Composite/CardGridSkeleton",
+  component: CardGridSkeleton,
+  parameters: {
+    layout: "padded",
+  },
+  /* 件名叫 CardGridSkeleton：真实宿主是 .plaza__grid 的多列网格（gap 14），
+     不加 decorator 时骨架会铺成整宽单列，36 徽标 / 72×28 钮在卡里的占比看不出来。 */
+  decorators: [
+    (Story) => (
+      <div style={{ display: "grid", gridTemplateColumns: "repeat(3, minmax(0, 1fr))", gap: 14 }}>
+        <Story />
+      </div>
+    ),
+  ],
+  tags: ["autodocs"],
+} satisfies Meta<typeof CardGridSkeleton>
+
+export default metaSkeleton
+
+type SkeletonStory = StoryObj<typeof metaSkeleton>
+
+export const ThreeItems: SkeletonStory = {
+  args: {
+    count: 3,
+  },
+}
+
+export const SixItems: SkeletonStory = {
+  args: {
+    count: 6,
+  },
+}
+
+export const NineItems: SkeletonStory = {
+  args: {
+    count: 9,
+  },
+}
+
+export const TwelveItems: SkeletonStory = {
+  args: {
+    count: 12,
+  },
+}

package/src/components/composite/CatalogStates/CatalogStatesSource.test.mjs

@@ -0,0 +1,149 @@
+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 styles = await readFile(new URL("../../../../styles/desktop-surfaces.css", import.meta.url), "utf8")
+
+/**
+ * W3 卡骨架收一张：四套卡（.site-card / .skcard / .plan-card / .cronjob-card）
+ * 共用同一骨架语法——容器内距 14 · 卡内字段槽 8 · 圆角 --ow-radius-card。
+ * 立面（1px 边 + 0 影）已在 W1/W2 收口，本组断言只锁内距/结构/字阶。
+ *
+ * A4-B2 起 .skcard 翻成竖排两段（原型 1666–1684），内距不再挂在卡壳整块上，
+ * 而是拆给上段（15/16/0）与卡脚（14/16）——同族的横向 16 与纵向 14/15 仍在同一表内，
+ * 只是承担者从 .skcard 换成 .skcard__top / .skcard__foot。
+ */
+test("四套卡容器统一 14px 内距，圆角落 --ow-radius-card", () => {
+  // A4-B5：站点卡改吃原型产物卡的 12/14 档（.skcard 是 15/16 档 —— 两族卡在原型里本就
+  // 是两张不同的卡：目录卡左字形右文字，产物卡上封面下文字）。
+  assert.match(styles, /\.site-card__body \{[^}]*padding: 12px 14px 0;/)
+  assert.match(styles, /\.site-card__footer \{[^}]*padding: 12px 14px;/)
+  assert.match(styles, /\.skcard__top \{[^}]*padding: 15px var\(--ow-space-4, 16px\) 0;/)
+  assert.match(styles, /\.skcard__foot \{[^}]*padding: 14px var\(--ow-space-4, 16px\);/)
+  assert.match(styles, /\.plan-card \{[^}]*padding: 14px;/)
+  assert.match(styles, /\.cronjob-card \{[^}]*padding: 14px;/)
+
+  for (const re of [
+    /\.site-card \{[^}]*border-radius: var\(--ow-radius-card\)/,
+    /\.skcard \{[^}]*border-radius: var\(--ow-radius-card\)/,
+    /\.plan-card \{[^}]*border-radius: var\(--ow-radius-card\)/,
+    /\.cronjob-card \{[^}]*border-radius: var\(--ow-radius-card\)/,
+  ]) {
+    assert.match(styles, re)
+  }
+  // 18/16 与 16/18 两种 V1 内距不得回流
+  assert.doesNotMatch(styles, /\.skcard__top \{[^}]*padding: 18px/)
+  assert.doesNotMatch(styles, /\.plan-card \{[^}]*padding: 18px/)
+  assert.doesNotMatch(styles, /\.cronjob-card \{[^}]*padding: var\(--ow-space-4, 16px\) 18px/)
+  // 站点卡原来独走 16 大容器圆角，收回卡档 12
+  assert.doesNotMatch(styles, /\.site-card \{[^}]*border-radius: var\(--ow-radius-modal\)/)
+})
+
+test("卡内字段槽一律 8，卡内动作钮落 §7 的 28 档", () => {
+  // A4-B5：站点卡的名与描述贴到 4 槽（原型 L1933 的产物卡；.skcard 的 body 也是 4）。
+  assert.match(styles, /\.site-card__body \{[^}]*gap: var\(--ow-space-1, 4px\);/)
+  assert.match(styles, /\.cronjob-card \{[^}]*gap: var\(--ow-space-2, 8px\);/)
+  // A4-B2：卡脚整段由 .skcard__foot 钉底（margin-top:auto），元信息带不再自带 8 的上外距。
+  assert.match(styles, /\.skcard__foot \{ margin-top: auto;/)
+  assert.match(styles, /\.plan-card \.feat \{[^}]*margin: var\(--ow-space-2, 8px\) 0;/)
+  // skcard 的「安装」钮落 28；cron 卡的更多钮 W5 起走 RowOverflowMenu 的
+  // Button ghost·sm 触发器（同样 28），自绘的 .cjc-act 方钮整族已撤。
+  assert.match(styles, /\.skcard \.inst \{[^}]*height: 28px;/)
+  assert.doesNotMatch(styles, /\.cjc-act \{/)
+  assert.doesNotMatch(styles, /\.skcard \.inst \{[^}]*height: 3[24]px;/)
+  // 目录卡 V1 的 min-height 100 撑高已撤；A4-B2 后同排等高由描述的 min-height:3em 保。
+  assert.doesNotMatch(styles, /\.skcard \{[^}]*min-height: 100px;/)
+  assert.match(styles, /\.skcard \.d \{[^}]*min-height: 3em;/)
+  // A4-B5：站点卡的卡脚同样 margin-top:auto 钉底，动作钮走 Button size="sm"（28）
+  assert.match(styles, /\.site-card__footer \{ margin-top: auto;/)
+  assert.match(styles, /\.site-card__desc \{[^}]*min-height: 3em;/)
+})
+
+test("卡字阶三档：标题 fs-ui/600 · 描述 fs-body-sm/1.5 · 卡脚 fs-caption", () => {
+  // 目录卡 A4-B2 单独抬一阶：名 14/500、描述 13 text-2（竖排卡里这两截是主角，
+  // 与横排列表卡的 13/600 + 12 不同表）。其余三套卡仍按 W3 的密度档。
+  assert.match(styles, /\.skcard \.n \{ font: 500 var\(--ow-fs-body\)\/1\.3/)
+  // A4-B5：站点卡与目录卡一同抬阶（名 14/500、描述 13 text-2）——两张竖排卡同一档。
+  assert.match(styles, /\.site-card__name \{ font: 500 var\(--ow-fs-body\)\/1\.3/)
+  assert.match(styles, /\.cjc-name \{[^}]*font: 600 var\(--ow-fs-ui\)\/1\.3/)
+  assert.match(styles, /\.plan-card \.ph \.n \{ font: 600 var\(--ow-fs-ui\)\/1/)
+
+  assert.match(styles, /\.skcard \.d \{ font: 400 var\(--ow-fs-ui\)\/1\.5/)
+  assert.match(styles, /\.site-card__desc \{ font: 400 var\(--ow-fs-ui\)\/1\.5/)
+  assert.match(styles, /\.cjc-prompt \{ font: 400 var\(--ow-fs-body-sm\)\/1\.5/)
+  assert.match(styles, /\.plan-card \.tag \{ font: 400 var\(--ow-fs-body-sm\)\/1\.5/)
+
+  assert.match(styles, /\.skcard \.ft \{[^}]*font: 400 var\(--ow-fs-caption\)\/1 var\(--ow-font-mono\)/)
+  // 卡脚字阶挪到承担读数的那一段（.site-card__meta，mono caption），卡脚本身只排位置
+  assert.match(styles, /\.site-card__meta \{[^}]*font: 400 var\(--ow-fs-caption\)\/1 var\(--ow-font-mono\)/)
+  assert.match(styles, /\.cjc-foot \{[^}]*font: 400 var\(--ow-fs-caption\)\/1/)
+  // cron 卡名原来独走 14 阶（title-sm），已归 UI 密度档
+  assert.doesNotMatch(styles, /\.cjc-name \{[^}]*var\(--ow-fs-title-sm\)/)
+})
+
+test("§7 形状：纯分类标不占 999——「私有」与套餐标落直角 6", () => {
+  assert.match(styles, /\.skcard \.badge-mine \{[^}]*border-radius: var\(--ow-radius-tag\)/)
+  assert.doesNotMatch(styles, /\.skcard \.badge-mine \{[^}]*border-radius: var\(--ow-radius-pill\)/)
+  // .plan-card .ph .badge 的 999 皮肤零消费方（两个消费方都用 Badge 原语），整条退役
+  assert.doesNotMatch(styles, /\.plan-card \.ph \.badge \{/)
+  assert.doesNotMatch(styles, /\.plan-card\.current \.ph \.badge \{/)
+  // A4-B2：卡上的版本胶囊整件退役——版本号进卡脚 mono 带，名称行不再有第三枚小方块。
+  assert.doesNotMatch(styles, /\.skcard \.ver \{/)
+})
+
+test("目录卡骨架屏逐件对齐它占位的真元素", () => {
+  assert.match(source, /<Skeleton variant="block" width=\{40\} height=\{40\} radius=\{8\} className="gly" \/>/)
+  assert.match(source, /<Skeleton variant="block" width=\{72\} height=\{28\} radius=\{8\} className="inst" \/>/)
+  assert.match(styles, /\.skcard \.gly \{[^}]*border-radius: var\(--ow-radius-sm\)/)
+  // W5：骨架块由 Skeleton 原语渲染，度量只有内联一份；CSS 只负责抹掉 .inst 那圈实边。
+  assert.match(styles, /\.skcard--skeleton \.inst \{ border: none; padding: 0; \}/)
+  assert.doesNotMatch(styles, /\.skcard--skeleton \.[a-z]+\.skeleton-block/)
+  assert.match(styles, /\.skcard--skeleton \.body \{[^}]*gap: var\(--ow-space-2, 8px\);/)
+  // 卡壳翻竖排后骨架自己保持横排（原型 1692 的载态卡是一行 40 字形 + 三条线，无卡脚）。
+  assert.match(styles, /\.skcard--skeleton \{[^}]*flex-direction: row;[^}]*padding: 15px var\(--ow-space-4, 16px\);/)
+})
+
+/**
+ * R2 L2-3-1 / L2-3-8：卡底四卡一张表。原型 template 1666（技能卡）/ 1749（定时任务卡）/
+ * 1909（站点卡）三处都是 `border:1px solid var(--ow-border); background:var(--ow-surface)`；
+ * --ow-bg 按 §5 只属窗口壳／带／侧栏，不做纸面上的卡底。卡内 mono 读数芯片是嵌套井，
+ * 走 --ow-surface-2 且不描边（否则卡改 surface 后芯片与卡同色消失）。
+ */
+test("四套卡底统一 --ow-surface，卡内读数芯片走 surface-2 井档", () => {
+  for (const re of [
+    /\.skcard \{[^}]*background: var\(--ow-surface\)/,
+    /\.site-card \{[^}]*background: var\(--ow-surface\)/,
+    /\.plan-card \{[^}]*background: var\(--ow-surface\)/,
+    /\.cronjob-card \{[^}]*background: var\(--ow-surface\)/,
+  ]) {
+    assert.match(styles, re)
+  }
+  // --ow-bg 卡底不得回潮
+  for (const re of [
+    /\.site-card \{[^}]*background: var\(--ow-bg\)/,
+    /\.plan-card \{[^}]*background: var\(--ow-bg\)/,
+    /\.cronjob-card \{[^}]*background: var\(--ow-bg\)/,
+  ]) {
+    assert.doesNotMatch(styles, re)
+  }
+  // hover 只递进边色，不改卡底
+  assert.match(styles, /\.cronjob-card:hover \{ border-color: var\(--ow-border-strong\); \}/)
+  // 读数芯片：surface-2 井、无边
+  assert.match(styles, /\.cjc-freq \{[^}]*background: var\(--ow-surface-2\)/)
+  assert.doesNotMatch(styles, /\.cjc-freq \{[^}]*border: var\(--ow-border-width-thin/)
+  // R2 L2-3-4：分隔点是文字不是线
+  assert.match(styles, /\.cjc-sep \{ color: var\(--ow-text-3\); \}/)
+})
+
+/**
+ * R2 L2-1-4 ＋ L2-3-2（核对补锁）：`grid` 只有**首次**空态缺省 page；搜索态以 onClearSearch
+ * 判定、缺省仍 md。宿主 SkillsCenter:703/1056 与 ConnectorModal:78 的搜索空态都只传
+ * `grid` ＋ `onClearSearch`、不传 size——缺省若写成「grid 一律 page」，它们会被一并推成 52，
+ * 与裁决「搜索态保持 md、skills--no-result 不是缺陷」相反。
+ */
+test("grid 首次空态缺省 page，搜索态（onClearSearch）缺省仍 md", () => {
+  assert.match(source, /const resolvedSize = size \?\? \(grid && !onClearSearch \? "page" : "md"\)/)
+  // 主动作与「清空搜索」互斥：有 action 走 action，否则才看 onClearSearch
+  assert.match(source, /const actionNode = action \? \(/)
+})

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

@@ -0,0 +1,113 @@
+import type { ReactNode } from "react"
+import { cn } from "../../../lib/utils"
+import { Button } from "../../primitives"
+import { EmptyState } from "../../primitives/EmptyState"
+import { Skeleton } from "../Skeleton"
+
+export function CardGridSkeleton({ count = 6 }: { count?: number }): React.ReactElement {
+  return (
+    <>
+      {Array.from({ length: count }).map((_, index) => (
+        <div key={index} className="skcard skcard--skeleton" aria-hidden="true">
+          {/* 骨架块逐件对齐它占位的真元素（W3 卡骨架统一）：
+              首字徽标圆角 8（.gly = --ow-radius-sm，原来给的 12 越表）；
+              名/描述两行落 13/12 字阶；动作钮 28 档（.inst 随 §7 控件高归 28）。
+              A4-B2：徽标 36 → 40，跟着目录卡的字形位一起放大（原型 1668/1692 同一格）。 */}
+          <Skeleton variant="block" width={40} height={40} radius={8} className="gly" />
+          <div className="body">
+            <Skeleton variant="line" width="50%" height={13} />
+            <Skeleton variant="line" width="100%" height={12} />
+            <Skeleton variant="line" width="60%" height={12} />
+          </div>
+          <Skeleton variant="block" width={72} height={28} radius={8} className="inst" />
+        </div>
+      ))}
+    </>
+  )
+}
+
+export interface CatalogEmptyStateProps {
+  /**
+   * @deprecated 目录空态的图形位归 G5 信标 mono 母题（§6：容器空态一套母题，禁另配图标筐）。
+   * 传值不再渲染，保留只为旧调用点（apps/desktop 的 SkillsCenter / ConnectorModal）不报错；
+   * 下个大版本删除。
+   */
+  icon?: ReactNode
+  /** 空态标题：名词短句（16/500 --ow-text）。R4 起独立成槽，不再与 hint 拼成一句。 */
+  title: string
+  /** 副句：说清「做了会怎样 / 下一步怎么办」，14 text-2 独立一行。 */
+  hint: string
+  /** 网格里用：占满整行（.plaza__empty 只剩 grid-column 跨列，度量全归 EmptyState）。 */
+  grid?: boolean
+  /**
+   * 尺寸档，透传 `EmptyState`。不传时：`grid` 且**不是搜索态**（没给 `onClearSearch`）落
+   * **page**（母题 52×32），其余落 md（40）。搜索无结果是二级空态（§6 md 档）——带
+   * `onClearSearch` 的调用点不传 `size` 也落 md，宿主 SkillsCenter / ConnectorModal 与
+   * `_skillsCatalog` 的搜索空态因此零改动就留在 md（R2 核对：原先「grid 一律 page」把它们
+   * 一并推成了 52，与 L2-1-4 裁决「搜索态保持 md」相反）。
+   */
+  size?: "page" | "md" | "sm"
+  /**
+   * 首次空态的主动作（§6 page 一级＝母题 ＋ 标题 ＋ 副句 ＋ 一枚 32 高钮）。
+   * 一律 **secondary 描边**——同屏页头通常已有同名主钮，空态不占第二个行动极（§4 记账表）。
+   */
+  action?: { label: string; onClick: () => void }
+  onClearSearch?: () => void
+}
+
+/**
+ * CatalogEmptyState — 目录/广场类容器的空态（DS 2.0 W3 · G5 归位）
+ *
+ * V1 里这里是「52px 圆角筐装 Lucide 图标 ＋ 600 字重标题 ＋ text-3 副行 ＋ 手搓 unstyled 钮」，
+ * 与 §6 的容器空态母题各说各话。W3 起整块交给 `primitives/EmptyState`：信标 mono 母题
+ * （单色 --ow-empty-mark＝text-3，不占极）＋ 文字 ＋ 可选按钮。
+ *
+ * R4（原型对齐轮 · 裁决 6）撤销 W3 的 `joinSentence` 退化：那版把 `title` 与 `hint`
+ * 用「。」拼成单段 text-2，比研发 main 的 `__title`/`__hint` 两层还少一层，是相对研发的
+ * 一处明确退化。现在两截直传原语的**标题槽与副句槽**（16/500 ＋ 14 text-2），
+ * 调用点签名一字未动（apps/desktop 的 SkillsCenter / ConnectorModal 零改动）。
+ * 「清空搜索」是退路不是主张，落 secondary（同屏页头已有主钮，不占第二个行动极）。
+ * `grid` 仍挂 `.plaza__empty`——该类现在只剩 `grid-column: 1 / -1`，e2e 也按它定位。
+ *
+ * R2 L2-1-4 ＋ L2-3-2：本件原来不传 `size`，整栏首次空态全落 EmptyState 的缺省 md(40)
+ * 母题，与同级的定时任务整页空态（显式 page，52×32）两副面孔；且没有主动作槽，
+ * 站点首次空态一枚钮都没有、只能靠副句里的「点右上角新建」当路标。
+ * 现在 `grid` 首次空态缺省进 page 档、另开 `action` 槽（secondary）。
+ * **搜索无结果仍是二级空态**（§6 md 档：母题 40 ＋ 一句 ＋ 描边钮）：以 `onClearSearch`
+ * 的有无判搜索态，缺省就落 md，调用点不必显式传 `size="md"`（传了也行）——
+ * 原型 1707–1716 的目录搜索空态也是这一档。
+ */
+export function CatalogEmptyState({
+  icon: _icon,
+  title,
+  hint,
+  grid,
+  size,
+  action,
+  onClearSearch,
+}: CatalogEmptyStateProps): React.ReactElement {
+  // 只给了一截时不留空槽：没有副句就让标题自己当那一句（原型二级空态本就只有一句）。
+  const hasHint = Boolean(hint?.trim())
+  // 搜索态（有 onClearSearch）是二级空态，缺省 md；只有整栏首次空态才缺省 page。
+  const resolvedSize = size ?? (grid && !onClearSearch ? "page" : "md")
+  // 主动作与「清空搜索」不会同时出现：有关键词时是搜索态（只给退路），没关键词才是首次空态。
+  const actionNode = action ? (
+    <Button variant="primary" size="md" onClick={action.onClick}>
+      {action.label}
+    </Button>
+  ) : onClearSearch ? (
+    <Button variant="primary" size="md" onClick={onClearSearch}>
+      清空搜索
+    </Button>
+  ) : undefined
+  return (
+    <EmptyState
+      // page 档自带 mt-14 版心（同 .cron-empty 那张整页空态），不再叠 py-16。
+      className={cn(grid ? "plaza__empty" : "connector-empty", resolvedSize !== "page" && "py-16")}
+      size={resolvedSize}
+      title={hasHint ? title : undefined}
+      message={hasHint ? hint : title}
+      action={actionNode}
+    />
+  )
+}

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

@@ -0,0 +1,174 @@
+import type { Meta, StoryObj } from "@storybook/react"
+import { BarChart, SeriesChart } from "./index"
+
+const usage = [
+  { label: "对话", value: 128400 },
+  { label: "代码", value: 96200 },
+  { label: "检索", value: 41800 },
+  { label: "文档", value: 27300 },
+  { label: "其他", value: 9100 },
+]
+
+const week = ["周一", "周二", "周三", "周四", "周五", "周六", "周日"]
+
+const series = [
+  { name: "运行数", points: [12, 18, 15, 26, 31, 22, 28] },
+  { name: "失败数", points: [1, 3, 2, 4, 2, 1, 3] },
+]
+
+const meta = {
+  title: "Composite/Charts",
+  component: BarChart,
+  parameters: { layout: "padded" },
+  tags: ["autodocs"],
+} satisfies Meta<typeof BarChart>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+const barBase = { data: usage, ariaLabel: "各用途 token 消耗" }
+
+export const Bar: Story = {
+  name: "Bar · 竖列",
+  args: barBase,
+  render: (args) => (
+    <div style={{ maxWidth: 520 }}>
+      <BarChart {...args} showValues />
+    </div>
+  ),
+}
+
+export const BarNoGrid: Story = {
+  name: "Bar · 无网格",
+  args: { ...barBase, gridLines: 0 },
+  render: (args) => (
+    <div style={{ maxWidth: 520 }}>
+      <BarChart {...args} />
+    </div>
+  ),
+}
+
+export const BarHorizontal: Story = {
+  name: "Bar · 横条（用量条形态，归口 UsageQuota）",
+  args: { ...barBase, orientation: "horizontal", showValues: true },
+  render: (args) => (
+    <div style={{ maxWidth: 420 }}>
+      <BarChart {...args} />
+    </div>
+  ),
+}
+
+/**
+ * 荧黄旁注：今日列在条顶点一颗 `--ow-data-today`，占「状态极·图表今日」一处（§4）——
+ * 条身留在系列色，屏级表写的是「今日点」不是「今日条」，面积也守得住 §4 的 ≤3%。
+ * 形差（多一颗点 + 位置）与色同时成立，符合 R1 双编码；默认关闭，需显式传 todayIndex。
+ */
+export const BarToday: Story = {
+  name: "Bar · 今日列（状态极）",
+  args: { ...barBase, todayIndex: 0, showValues: true },
+  render: (args) => (
+    <div style={{ maxWidth: 520 }}>
+      <BarChart {...args} />
+    </div>
+  ),
+}
+
+/** 横条 + 今日：条尾那颗点（`right-0 top-0` 落在 6px 高的槽里）只有这个组合渲得出来。 */
+export const BarHorizontalToday: Story = {
+  name: "Bar · 横条 + 今日（条尾点）",
+  args: { ...barBase, orientation: "horizontal", todayIndex: 0, showValues: true },
+  render: (args) => (
+    <div style={{ maxWidth: 420 }}>
+      <BarChart {...args} />
+    </div>
+  ),
+}
+
+export const BarLoading: Story = {
+  name: "Bar · 加载",
+  args: { ...barBase, loading: true },
+}
+
+export const BarEmpty: Story = {
+  name: "Bar · 空态",
+  args: { data: [], ariaLabel: "各用途 token 消耗" },
+}
+
+export const Series: Story = {
+  name: "Series · 折线（归口 UsageSeries）",
+  args: barBase,
+  render: () => (
+    <div style={{ maxWidth: 560 }}>
+      <SeriesChart labels={week} series={series} legend ariaLabel="近 7 天运行数与失败数" />
+    </div>
+  ),
+}
+
+export const SeriesArea: Story = {
+  name: "Series · 面积",
+  args: barBase,
+  render: () => (
+    <div style={{ maxWidth: 560 }}>
+      <SeriesChart labels={week} series={series.slice(0, 1)} area legend ariaLabel="近 7 天运行数" />
+    </div>
+  ),
+}
+
+/** 荧黄旁注：今日点取 `--ow-data-today`，占「状态极·图表今日」一处（§4）。 */
+export const SeriesToday: Story = {
+  name: "Series · 今日点（状态极）",
+  args: barBase,
+  render: () => (
+    <div style={{ maxWidth: 560 }}>
+      <SeriesChart labels={week} series={series} todayIndex={6} legend ariaLabel="近 7 天运行数与失败数" />
+    </div>
+  ),
+}
+
+export const SeriesSixLines: Story = {
+  name: "Series · 六系列（data-1..6 全轮）",
+  args: barBase,
+  render: () => (
+    <div style={{ maxWidth: 560 }}>
+      <SeriesChart
+        labels={week}
+        series={Array.from({ length: 6 }, (_, index) => ({
+          name: `系列 ${index + 1}`,
+          points: week.map((_, day) => 10 + index * 4 + ((day * (index + 3)) % 9)),
+        }))}
+        legend
+        ariaLabel="六个系列的近 7 天走势"
+      />
+    </div>
+  ),
+}
+
+export const SeriesLoading: Story = {
+  name: "Series · 加载",
+  args: barBase,
+  render: () => <SeriesChart labels={week} series={series} loading ariaLabel="近 7 天运行数" />,
+}
+
+export const SeriesEmpty: Story = {
+  name: "Series · 空态",
+  args: barBase,
+  render: () => <SeriesChart labels={week} series={[]} ariaLabel="近 7 天运行数" />,
+}
+
+/** 双主题对照：同一份 demo 逐字复制，主题由 data-theme 局部驱动。 */
+export const ThemePair: Story = {
+  name: "双主题对照",
+  args: barBase,
+  render: () => (
+    <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 16 }}>
+      <div data-theme="light" style={{ background: "var(--ow-bg)", padding: 16, display: "grid", gap: 20 }}>
+        <BarChart data={usage} showValues ariaLabel="各用途 token 消耗" />
+        <SeriesChart labels={week} series={series} legend ariaLabel="近 7 天运行数与失败数" />
+      </div>
+      <div data-theme="dark" style={{ background: "var(--ow-bg)", padding: 16, display: "grid", gap: 20 }}>
+        <BarChart data={usage} showValues ariaLabel="各用途 token 消耗" />
+        <SeriesChart labels={week} series={series} legend ariaLabel="近 7 天运行数与失败数" />
+      </div>
+    </div>
+  ),
+}