npm - @orbit-work/ui - Versions diffs - 0.1.0 - Mend

@orbit-work/ui 0.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (755) hide show

package/src/components/composite/PageHead/PageHead.stories.tsx ADDED Viewed

@@ -0,0 +1,235 @@
+import type { Meta, StoryObj } from "@storybook/react"
+import { type ReactNode, useState } from "react"
+import { Button } from "../../primitives"
+import { Plus } from "../Icons"
+import { SearchInput } from "../SearchInput"
+import { PageHead } from "./index"
+const meta = {
+  title: "Composite/PageHead",
+  component: PageHead,
+  parameters: { layout: "fullscreen" },
+  tags: ["autodocs"],
+} satisfies Meta<typeof PageHead>
+export default meta
+type Story = StoryObj<typeof meta>
+/** 页头之下的滚动体：三屏同口径 20/28/28 + 340 列宽 gap14，这里只放几张灰卡示意基线之下的呼吸。 */
+function Body({ count = 3 }: { count?: number }) {
+  return (
+    <div
+      style={{
+        display: "grid",
+        gridTemplateColumns: "repeat(auto-fill,minmax(340px,1fr))",
+        gap: 14,
+        alignItems: "start",
+        padding: "20px 28px 28px",
+      }}
+    >
+      {Array.from({ length: count }, (_, i) => (
+        <div
+          key={i}
+          style={{
+            height: 96,
+            border: "1px solid var(--ow-border)",
+            borderRadius: "var(--ow-radius-lg)",
+            background: "var(--ow-surface)",
+          }}
+        />
+      ))}
+    </div>
+  )
+}
+function Screen({ children }: { children: ReactNode }) {
+  return <div style={{ minHeight: 420, background: "var(--ow-bg-panel)", color: "var(--ow-text)" }}>{children}</div>
+}
+const PLUGIN_TABS = [
+  { key: "agents", label: "专家" },
+  { key: "skills", label: "技能" },
+  { key: "connectors", label: "连接器" },
+]
+const WORKBENCH_TABS = [
+  { key: "sites", label: "站点" },
+  { key: "media", label: "媒体库" },
+  { key: "archive", label: "档案馆" },
+]
+/** 插件中心：三行页头 + 右上（216 搜索 + 主按钮）+ 带基线的页签带。原型 L1617–1648。 */
+export const Plugins: Story = {
+  args: { eyebrow: "工具", title: "插件" },
+  render: () => {
+    const [tab, setTab] = useState("agents")
+    const [q, setQ] = useState("")
+    return (
+      <Screen>
+        <PageHead
+          eyebrow="工具"
+          title="插件"
+          description="专家、技能与连接器都在这里安装与管理；也可以添加自己的。"
+          search={<SearchInput value={q} placeholder="搜索专家" onChange={setQ} />}
+          actions={
+            <Button variant="primary" size="md" icon={<Plus className="w-4 h-4" />}>
+              添加专家
+            </Button>
+          }
+          tabs={PLUGIN_TABS}
+          activeTabKey={tab}
+          onTabChange={setTab}
+        />
+        <Body count={3} />
+      </Screen>
+    )
+  },
+}
+/** 工作台：页签行右端挂「密集」开关（tabsExtra 槽），不再单起一条只装它的空行。原型 L1865–1880。 */
+export const Workbench: Story = {
+  args: { eyebrow: "产物", title: "工作台" },
+  render: () => {
+    const [tab, setTab] = useState("sites")
+    const [dense, setDense] = useState(false)
+    const [q, setQ] = useState("")
+    return (
+      <Screen>
+        <PageHead
+          eyebrow="产物"
+          title="工作台"
+          description="会话里产出的站点、图片与文档都在这里发布与管理。"
+          search={<SearchInput value={q} placeholder="搜索产物" onChange={setQ} />}
+          actions={
+            <Button variant="primary" size="md" icon={<Plus className="w-4 h-4" />}>
+              在会话里新建
+            </Button>
+          }
+          tabs={WORKBENCH_TABS}
+          activeTabKey={tab}
+          onTabChange={setTab}
+          tabsExtra={
+            <Button
+              variant={dense ? "secondary" : "ghost"}
+              size="sm"
+              aria-pressed={dense}
+              onClick={() => setDense((v) => !v)}
+            >
+              {dense ? "标准" : "密集"}
+            </Button>
+          }
+        />
+        <Body count={dense ? 6 : 3} />
+      </Screen>
+    )
+  },
+}
+/** 定时任务：无搜索、无页签，说明句尾挂一段 mono 读数。原型 L1731–1740。 */
+export const Automation: Story = {
+  args: { eyebrow: "自动化", title: "定时任务" },
+  render: () => (
+    <Screen>
+      <PageHead
+        eyebrow="自动化"
+        title="定时任务"
+        description="按计划自己跑起来的任务；每次运行都会开一段新会话。"
+        meta="4 个任务"
+        actions={
+          <Button variant="primary" size="md" icon={<Plus className="w-4 h-4" />}>
+            新建任务
+          </Button>
+        }
+      />
+      <Body count={2} />
+    </Screen>
+  ),
+}
+/** 三屏同框：眉标／大标题／说明句三行与页签基线在三个屏上逐像素同位。 */
+export const AllThree: Story = {
+  args: { eyebrow: "工具", title: "插件" },
+  render: () => (
+    <div style={{ display: "flex", flexDirection: "column", gap: 24, background: "var(--ow-bg-panel)" }}>
+      <PageHead
+        eyebrow="工具"
+        title="插件"
+        description="专家、技能与连接器都在这里安装与管理；也可以添加自己的。"
+        search={<SearchInput placeholder="搜索技能" />}
+        actions={
+          <Button variant="primary" size="md" icon={<Plus className="w-4 h-4" />}>
+            添加技能
+          </Button>
+        }
+        tabs={PLUGIN_TABS}
+        activeTabKey="skills"
+      />
+      <PageHead
+        eyebrow="产物"
+        title="工作台"
+        description="会话里产出的站点、图片与文档都在这里发布与管理。"
+        search={<SearchInput placeholder="搜索产物" />}
+        actions={
+          <Button variant="primary" size="md" icon={<Plus className="w-4 h-4" />}>
+            在会话里新建
+          </Button>
+        }
+        tabs={WORKBENCH_TABS}
+        activeTabKey="sites"
+      />
+      <PageHead
+        eyebrow="自动化"
+        title="定时任务"
+        description="按计划自己跑起来的任务；每次运行都会开一段新会话。"
+        meta="4 个任务"
+        actions={
+          <Button variant="primary" size="md" icon={<Plus className="w-4 h-4" />}>
+            新建任务
+          </Button>
+        }
+      />
+    </div>
+  ),
+}
+/**
+ * 只有读数、没有说明句（R2 · L3-2-11 回归锁）：第 3 行仍然出，mono 读数独占该行、左边不留悬空缝。
+ * 修之前 `meta` 嵌在 `description != null` 分支里，这张图会整行消失。
+ */
+export const MetaWithoutDescription: Story = {
+  render: () => (
+    <Screen>
+      <PageHead
+        eyebrow="自动化"
+        title="定时任务"
+        meta="4 个任务 · 下次 09:00"
+        actions={
+          <Button variant="primary" size="md" icon={<Plus className="w-4 h-4" />}>
+            新建任务
+          </Button>
+        }
+      />
+      <Body count={2} />
+    </Screen>
+  ),
+}
+/** 说明句与读数并存时的基准形，与上一张对照看第 3 行的两种排布。 */
+export const MetaWithDescription: Story = {
+  render: () => (
+    <Screen>
+      <PageHead
+        eyebrow="自动化"
+        title="定时任务"
+        description="按计划自己跑起来的任务；每次运行都会开一段新会话。"
+        meta="4 个任务 · 下次 09:00"
+        actions={
+          <Button variant="primary" size="md" icon={<Plus className="w-4 h-4" />}>
+            新建任务
+          </Button>
+        }
+      />
+      <Body count={2} />
+    </Screen>
+  ),
+}

package/src/components/composite/PageHead/PageHeadSource.test.mjs ADDED Viewed

@@ -0,0 +1,76 @@
+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 tabs = await readFile(new URL("../../primitives/Tabs/index.tsx", import.meta.url), "utf8")
+const composite = await readFile(new URL("../index.ts", import.meta.url), "utf8")
+/** 注释里复述原型度量是文档，不是用法——禁令只在剥掉注释的代码上验。 */
+const code = source.replace(/\/\*[\s\S]*?\*\//g, "").replace(/\{\/\*[\s\S]*?\*\/\}/g, "")
+test("外壳：固定块 + 上内距 32 / 左右 28（不再替窗口带让 48；顶部让红绿灯角）", () => {
+  assert.match(code, /className=\{cn\("shrink-0 px-7 pt-8", className\)\}/)
+  // --ow-titlebar-h(48) 是窗口带的高，页头不吃它——原型把窗口带做成内容区之外的独立一行。
+  assert.doesNotMatch(code, /--ow-titlebar-h/)
+})
+test("三行字模逐条走 token：眉标 12/0.08em/500 · 大标题 display 32/1.15/+0.01em/500 · 说明句 14/text-2", () => {
+  assert.match(
+    code,
+    /text-\[length:var\(--ow-fs-eyebrow-cjk\)\] font-medium tracking-\[var\(--ow-ls-eyebrow-cjk\)\] text-\[color:var\(--ow-eyebrow\)\]/,
+  )
+  assert.match(
+    code,
+    /m-0 mt-0\.5 ow-font-display text-ow-fs-headline font-medium leading-\[var\(--ow-lh-headline\)\] tracking-\[0\.01em\] text-\[color:var\(--ow-text\)\]/,
+  )
+  assert.match(code, /mt-1 text-ow-fs-body text-\[color:var\(--ow-text-2\)\]/)
+  // 标题是 <h1>：三屏各一个屏级标题，不是 div 假标题。
+  assert.match(code, /<h1\b/)
+  // 裸值一律不许：字号/字族/色都从 token 取。
+  assert.doesNotMatch(code, /text-\[\d+px\]|font-\[\d+px\]|#[0-9a-fA-F]{3,8}/)
+})
+test("句尾读数是 mono + tabular-nums 的 caption，跟在说明句里", () => {
+  assert.match(
+    code,
+    /ow-font-mono text-ow-fs-caption text-\[color:var\(--ow-text-3\)\] \[font-variant-numeric:tabular-nums\]/,
+  )
+  // R2 · L3-2-11：左缝 4 改成条件档——与说明句同行才给，独占一行时不给
+  assert.match(code, /description != null && "ml-1"/)
+})
+test("右上槽：216 宽搜索 + 动作槽，gap 8、上内距 6", () => {
+  assert.match(code, /flex shrink-0 items-center gap-2 pt-1\.5/)
+  assert.match(code, /className="w-\[216px\] shrink-0"/)
+})
+test("页签带：本件给 1px --ow-border 基线，页签走 Tabs 的 lg(36) 专档", () => {
+  assert.match(code, /mt-3\.5 flex items-center border-b border-\[color:var\(--ow-border\)\]/)
+  assert.match(code, /<Tabs size="lg" items=\{tabs\} activeKey=\{activeTabKey\} onChange=\{onTabChange\} \/>/)
+  // 页签行右端槽（工作台密集开关）只在有页签时出。
+  assert.match(code, /data-slot="page-head-tabs-extra"/)
+  assert.match(code, /tabs && tabs\.length > 0/)
+})
+test("Tabs 的 lg 档就是页头带那一档：36 / 内距 2 / 未选中 text-2 / 底线压基线", () => {
+  const tabsCode = tabs.replace(/\/\*[\s\S]*?\*\//g, "")
+  assert.match(
+    tabsCode,
+    /lg: "h-9 px-0\.5 text-ow-fs-ui text-\[color:var\(--ow-text-2\)\] hover:text-\[color:var\(--ow-text\)\] after:-bottom-px after:rounded-full"/,
+  )
+  assert.match(tabsCode, /lg: "gap-4"/)
+  // 基线归容器：Tabs 自己只画选中项那根 2px 底线，不画第二根通栏线。
+  assert.doesNotMatch(tabsCode, /border-b/)
+})
+test("新件挂进 composite 出口", () => {
+  assert.match(composite, /export \* from "\.\/PageHead"/)
+})
+test("R2 · L3-2-11：meta 与 description 平级——只传读数时第 3 行仍然渲染", () => {
+  // 第 3 行的守卫必须是「任一存在」，不能只看说明句
+  assert.match(source, /\{\(description != null \|\| meta != null\) && \(/)
+  // 读数的左缝只在与说明句同行时才给
+  assert.match(source, /description != null && "ml-1"/)
+})

package/src/components/composite/PageHead/index.tsx ADDED Viewed

@@ -0,0 +1,128 @@
+"use client"
+import type { ReactNode } from "react"
+import { cn } from "../../../lib/utils"
+import { type TabItem, Tabs } from "../../primitives"
+/**
+ * PageHead —— 屏级页头（DS 2.0 模式层，A3-B1）
+ *
+ * 一件收掉三屏（插件 / 工作台 / 定时任务）原本各写各的页首带。度量逐条照原型
+ * template.dc.html L1617–1648（插件）/ L1731–1740（定时任务）/ L1865–1880（工作台）：
+ *
+ * - **外壳**：`padding: 24px 28px 0`，`flex:0 0 auto` —— 页头是固定块，滚动体在它下面另起。
+ *   上内距 24 而不是 `--ow-titlebar-h`(48)：原型把窗口带做成内容区之外的独立一行
+ *   （L657），页头不再替窗口带让位。
+ * - **三行**（固定顺序，不随页签变）：
+ *   ① 眉标 `--ow-fs-eyebrow-cjk`(12) / `--ow-ls-eyebrow-cjk`(0.08em) / 500 / `--ow-eyebrow`；
+ *   ② 大标题 h1 `--ow-font-display` + `--ow-fs-headline`(32) / `--ow-lh-headline`(1.15)
+ *      / +0.01em / 500 / `--ow-text`（与 DesktopHomeView 主视觉标题同一套字模，是
+ *      utilities.css 里 `.ow-font-display` 记名的「展示大字」合法消费方）；
+ *   ③ 说明句 `--ow-fs-body`(14) / `--ow-text-2`，句尾可挂一段 mono caption 读数（`meta`）；
+ *      `description` 与 `meta` 平级，任一存在就出这一行（只有读数时读数独占该行）。
+ * - **右上槽**：`gap 8` + `padding-top 6`；`search` 由本件统一给 216 宽（三屏同一个量），
+ *   `actions` 放主按钮（`Button variant="primary"`，行动极唯一一处）。
+ * - **页签带**：`margin-top 14` + 通栏 1px `--ow-border` 基线；页签走 `primitives/Tabs`
+ *   的 `lg`(36) 专档，基线由本件给、Tabs 自己不画第二根线。`tabsExtra` 是页签行右端槽
+ *   （工作台的「密集」开关落这里，原型 L1889 明说不再单起一条只装它的空行）。
+ *
+ * 本件只出形与槽：文案、取数、筛选逻辑全在调用方；不新增 token，不引信标/荧黄（R3 中性件）。
+ */
+export interface PageHeadProps {
+  /** 第 1 行眉标：工具 / 产物 / 自动化 */
+  eyebrow: ReactNode
+  /** 第 2 行大标题（32px 展示字） */
+  title: ReactNode
+  /** 第 3 行说明句 */
+  description?: ReactNode
+  /**
+   * 第 3 行的 mono 读数（如「4 个任务」）。与 `description` **平级**：
+   * 两者同传时读数跟在说明句尾（同一行、左缝 4）；只传 `meta` 时读数独占第 3 行。
+   */
+  meta?: ReactNode
+  /** 右上搜索槽（传 composite/SearchInput），宽度由本件锁 216 */
+  search?: ReactNode
+  /** 右上动作槽（主按钮） */
+  actions?: ReactNode
+  /** 页签带；不传即不出这条带（定时任务屏就没有） */
+  tabs?: TabItem[]
+  activeTabKey?: string
+  onTabChange?: (key: string) => void
+  /** 页签行右端槽（密集开关等）；只在有 tabs 时渲染 */
+  tabsExtra?: ReactNode
+  className?: string
+}
+export function PageHead({
+  eyebrow,
+  title,
+  description,
+  meta,
+  search,
+  actions,
+  tabs,
+  activeTabKey,
+  onTabChange,
+  tabsExtra,
+  className,
+}: PageHeadProps) {
+  return (
+    <div data-slot="page-head" className={cn("shrink-0 px-7 pt-8", className)}>
+      <div className="flex items-start gap-4">
+        <div className="min-w-0 flex-1">
+          <div
+            data-slot="page-head-eyebrow"
+            className="text-[length:var(--ow-fs-eyebrow-cjk)] font-medium tracking-[var(--ow-ls-eyebrow-cjk)] text-[color:var(--ow-eyebrow)]"
+          >
+            {eyebrow}
+          </div>
+          <h1
+            data-slot="page-head-title"
+            className="m-0 mt-0.5 ow-font-display text-ow-fs-headline font-medium leading-[var(--ow-lh-headline)] tracking-[0.01em] text-[color:var(--ow-text)]"
+          >
+            {title}
+          </h1>
+          {/* 第 3 行：说明句与读数**平级**——两者任一存在就出这一行。
+              R2 · L3-2-11 之前 meta 嵌在 `description != null` 分支里，
+              只传 meta 不传说明句时读数被静默吞掉（三个消费方碰巧都传了说明句，缺陷潜伏）。 */}
+          {(description != null || meta != null) && (
+            <div data-slot="page-head-desc" className="mt-1 text-ow-fs-body text-[color:var(--ow-text-2)]">
+              {description}
+              {/* 读数一律 mono + tabular-nums，跟在说明句尾，不另起一行也不并列多段；
+                  没有说明句时读数自己占这一行，左边不留那 4px 的悬空缝。 */}
+              {meta != null && (
+                <span
+                  data-slot="page-head-meta"
+                  className={cn(
+                    "ow-font-mono text-ow-fs-caption text-[color:var(--ow-text-3)] [font-variant-numeric:tabular-nums]",
+                    description != null && "ml-1",
+                  )}
+                >
+                  {meta}
+                </span>
+              )}
+            </div>
+          )}
+        </div>
+        {(search != null || actions != null) && (
+          <div data-slot="page-head-aside" className="flex shrink-0 items-center gap-2 pt-1.5">
+            {search != null && <div className="w-[216px] shrink-0">{search}</div>}
+            {actions}
+          </div>
+        )}
+      </div>
+      {tabs && tabs.length > 0 && (
+        /* 页签带的 1px 基线由这条容器给（Tabs 原语只画选中项那根 2px 底线，见其头注释）；
+           基线通栏，左右各内缩 28，是三屏共用的那个固定视觉锚。 */
+        <div data-slot="page-head-tabs" className="mt-3.5 flex items-center border-b border-[color:var(--ow-border)]">
+          <Tabs size="lg" items={tabs} activeKey={activeTabKey} onChange={onTabChange} />
+          {tabsExtra != null && (
+            <div data-slot="page-head-tabs-extra" className="ml-auto flex shrink-0 items-center gap-2">
+              {tabsExtra}
+            </div>
+          )}
+        </div>
+      )}
+    </div>
+  )
+}

package/src/components/composite/PlanFeatureIcon/PlanFeatureIcon.stories.tsx ADDED Viewed

@@ -0,0 +1,205 @@
+import type { Meta, StoryObj } from "@storybook/react"
+import { PlanFeatureIcon } from "./index"
+const meta = {
+  title: "Composite/PlanFeatureIcon",
+  component: PlanFeatureIcon,
+  parameters: {
+    layout: "centered",
+  },
+  tags: ["autodocs"],
+} satisfies Meta<typeof PlanFeatureIcon>
+export default meta
+type Story = StoryObj<typeof meta>
+export const Include: Story = {
+  args: {
+    kind: "include",
+  },
+}
+export const Exclude: Story = {
+  args: {
+    kind: "exclude",
+  },
+}
+export const Highlight: Story = {
+  args: {
+    kind: "highlight",
+  },
+}
+export const IncludeCustomClass: Story = {
+  args: {
+    kind: "include",
+    className: "custom-icon-class",
+  },
+}
+export const ExcludeCustomClass: Story = {
+  args: {
+    kind: "exclude",
+    className: "custom-icon-class",
+  },
+}
+export const HighlightCustomClass: Story = {
+  args: {
+    kind: "highlight",
+    className: "custom-icon-class",
+  },
+}
+export const AllVariants: Story = {
+  render: () => (
+    <div style={{ display: "flex", gap: 16, alignItems: "center" }}>
+      <div style={{ display: "flex", flexDirection: "column", alignItems: "center", gap: 8 }}>
+        <PlanFeatureIcon kind="include" />
+        <span style={{ fontSize: 12, color: "var(--ow-text-3)" }}>Include</span>
+      </div>
+      <div style={{ display: "flex", flexDirection: "column", alignItems: "center", gap: 8 }}>
+        <PlanFeatureIcon kind="exclude" />
+        <span style={{ fontSize: 12, color: "var(--ow-text-3)" }}>Exclude</span>
+      </div>
+      <div style={{ display: "flex", flexDirection: "column", alignItems: "center", gap: 8 }}>
+        <PlanFeatureIcon kind="highlight" />
+        <span style={{ fontSize: 12, color: "var(--ow-text-3)" }}>Highlight</span>
+      </div>
+    </div>
+  ),
+}
+export const InFeatureList: Story = {
+  render: () => (
+    <div style={{ maxWidth: 400, padding: 16, background: "var(--ow-bg)", borderRadius: 8 }}>
+      <h3 style={{ margin: 0, marginBottom: 12, fontSize: 16, fontWeight: 600, color: "var(--ow-text)" }}>
+        Plan Features
+      </h3>
+      <div style={{ display: "flex", flexDirection: "column", gap: 8 }}>
+        <div style={{ display: "flex", alignItems: "center", gap: 8 }}>
+          <PlanFeatureIcon kind="include" />
+          <span style={{ fontSize: 14, color: "var(--ow-text-2)" }}>Unlimited projects</span>
+        </div>
+        <div style={{ display: "flex", alignItems: "center", gap: 8 }}>
+          <PlanFeatureIcon kind="include" />
+          <span style={{ fontSize: 14, color: "var(--ow-text-2)" }}>Advanced analytics</span>
+        </div>
+        <div style={{ display: "flex", alignItems: "center", gap: 8 }}>
+          <PlanFeatureIcon kind="highlight" />
+          <span style={{ fontSize: 14, color: "var(--ow-text-2)", fontWeight: 600 }}>Priority support</span>
+        </div>
+        <div style={{ display: "flex", alignItems: "center", gap: 8 }}>
+          <PlanFeatureIcon kind="exclude" />
+          <span style={{ fontSize: 14, color: "var(--ow-text-3)", textDecoration: "line-through" }}>
+            Ad-free experience
+          </span>
+        </div>
+      </div>
+    </div>
+  ),
+}
+export const DifferentSizes: Story = {
+  render: () => (
+    <div style={{ display: "flex", gap: 24, alignItems: "center" }}>
+      <div style={{ display: "flex", flexDirection: "column", alignItems: "center", gap: 8 }}>
+        <div style={{ width: 16, height: 16 }}>
+          <PlanFeatureIcon kind="include" />
+        </div>
+        <span style={{ fontSize: 12, color: "var(--ow-text-3)" }}>16px</span>
+      </div>
+      <div style={{ display: "flex", flexDirection: "column", alignItems: "center", gap: 8 }}>
+        <div style={{ width: 24, height: 24 }}>
+          <PlanFeatureIcon kind="include" />
+        </div>
+        <span style={{ fontSize: 12, color: "var(--ow-text-3)" }}>24px</span>
+      </div>
+      <div style={{ display: "flex", flexDirection: "column", alignItems: "center", gap: 8 }}>
+        <div style={{ width: 32, height: 32 }}>
+          <PlanFeatureIcon kind="include" />
+        </div>
+        <span style={{ fontSize: 12, color: "var(--ow-text-3)" }}>32px</span>
+      </div>
+    </div>
+  ),
+}
+export const ComparisonTable: Story = {
+  render: () => (
+    <div style={{ maxWidth: 600, background: "var(--ow-bg)", borderRadius: 8, overflow: "hidden" }}>
+      <table style={{ width: "100%", borderCollapse: "collapse" }}>
+        <thead>
+          <tr style={{ background: "var(--ow-surface)" }}>
+            <th style={{ padding: 12, textAlign: "left", fontSize: 14, fontWeight: 600, color: "var(--ow-text)" }}>
+              Feature
+            </th>
+            <th style={{ padding: 12, textAlign: "center", fontSize: 14, fontWeight: 600, color: "var(--ow-text)" }}>
+              Free
+            </th>
+            <th style={{ padding: 12, textAlign: "center", fontSize: 14, fontWeight: 600, color: "var(--ow-text)" }}>
+              Pro
+            </th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr>
+            <td
+              style={{
+                padding: 12,
+                fontSize: 14,
+                color: "var(--ow-text-2)",
+                borderTop: "1px solid var(--ow-border)",
+              }}
+            >
+              Basic features
+            </td>
+            <td style={{ padding: 12, textAlign: "center", borderTop: "1px solid var(--ow-border)" }}>
+              <PlanFeatureIcon kind="include" />
+            </td>
+            <td style={{ padding: 12, textAlign: "center", borderTop: "1px solid var(--ow-border)" }}>
+              <PlanFeatureIcon kind="include" />
+            </td>
+          </tr>
+          <tr>
+            <td
+              style={{
+                padding: 12,
+                fontSize: 14,
+                color: "var(--ow-text-2)",
+                borderTop: "1px solid var(--ow-border)",
+              }}
+            >
+              Advanced analytics
+            </td>
+            <td style={{ padding: 12, textAlign: "center", borderTop: "1px solid var(--ow-border)" }}>
+              <PlanFeatureIcon kind="exclude" />
+            </td>
+            <td style={{ padding: 12, textAlign: "center", borderTop: "1px solid var(--ow-border)" }}>
+              <PlanFeatureIcon kind="highlight" />
+            </td>
+          </tr>
+          <tr>
+            <td
+              style={{
+                padding: 12,
+                fontSize: 14,
+                color: "var(--ow-text-2)",
+                borderTop: "1px solid var(--ow-border)",
+              }}
+            >
+              Priority support
+            </td>
+            <td style={{ padding: 12, textAlign: "center", borderTop: "1px solid var(--ow-border)" }}>
+              <PlanFeatureIcon kind="exclude" />
+            </td>
+            <td style={{ padding: 12, textAlign: "center", borderTop: "1px solid var(--ow-border)" }}>
+              <PlanFeatureIcon kind="highlight" />
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+  ),
+}

package/src/components/composite/PlanFeatureIcon/PlanFeatureIconSource.test.mjs ADDED Viewed

@@ -0,0 +1,38 @@
+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/components.css", import.meta.url), "utf8")
+const code = source.replace(/\/\*[\s\S]*?\*\//g, "").replace(/\/\/[^\n]*/g, "")
+// ── W5 终扫：图标语系归口（§7）──────────────────────────────────────────────
+test("三枚标记走 24 网格构造几何：只描边、16 档配重 2.2、线端与折角 round", () => {
+  assert.match(code, /strokeWidth: 2\.2/)
+  assert.match(code, /strokeLinecap: "round"/)
+  assert.match(code, /strokeLinejoin: "round"/)
+  assert.equal((code.match(/viewBox="0 0 24 24"/g) ?? []).length, 3)
+  assert.equal((code.match(/fill="none"/g) ?? []).length, 3)
+  // Lucide 语系直搬的痕迹：2.5 描边、实心五角星、fill="currentColor"
+  assert.doesNotMatch(code, /strokeWidth="2\.5"|strokeWidth: 2\.5/)
+  assert.doesNotMatch(code, /fill="currentColor"/)
+  assert.doesNotMatch(code, /M12 2l2\.9 6\.2/)
+})
+test("§7 图标档位：落 16 档，不留 14px 表外尺寸", () => {
+  assert.match(styles, /\.ow-plan-feature-icon \{ width: 16px; height: 16px; flex-shrink: 0; \}/)
+  assert.doesNotMatch(styles, /\.ow-plan-feature-icon \{ width: 14px/)
+})
+test("§4 R2：include 勾走无彩极色，不引 --ow-primary（暗档即荧黄）", () => {
+  assert.match(styles, /\.ow-plan-feature-icon--include \{ color: var\(--ow-control-on\); \}/)
+  assert.doesNotMatch(styles, /\.ow-plan-feature-icon--include \{[^}]*--ow-primary/)
+  assert.doesNotMatch(source, /--ow-beacon|--ow-yellow|--ow-accent-dot/)
+})
+// ── R2 复审 ────────────────────────────────────────────────────────────────
+test("§7 图标色：highlight 是特性亮点强调位，不是告警状态——不落功能色", () => {
+  assert.match(styles, /\.ow-plan-feature-icon--highlight \{ color: var\(--ow-text\); \}/)
+  assert.doesNotMatch(styles, /\.ow-plan-feature-icon--highlight \{[^}]*--ow-warning/)
+  assert.match(styles, /\.ow-plan-feature-icon--exclude \{ color: var\(--ow-text-3\); \}/)
+})