@orbit-work/ui 0.1.2-preview.0 → 0.1.2

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

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

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

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

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

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