npm - @ptengine/design-components - Versions diffs - 0.3.0 - Mend

@ptengine/design-components 0.3.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 (197) hide show

package/README.md +309 -0
package/components.json +21 -0
package/dist/components/ui/accordion.d.ts +8 -0
package/dist/components/ui/accordion.d.ts.map +1 -0
package/dist/components/ui/alert-dialog.d.ts +21 -0
package/dist/components/ui/alert-dialog.d.ts.map +1 -0
package/dist/components/ui/alert.d.ts +9 -0
package/dist/components/ui/alert.d.ts.map +1 -0
package/dist/components/ui/aspect-ratio.d.ts +4 -0
package/dist/components/ui/aspect-ratio.d.ts.map +1 -0
package/dist/components/ui/attachment.d.ts +26 -0
package/dist/components/ui/attachment.d.ts.map +1 -0
package/dist/components/ui/avatar.d.ts +10 -0
package/dist/components/ui/avatar.d.ts.map +1 -0
package/dist/components/ui/badge.d.ts +10 -0
package/dist/components/ui/badge.d.ts.map +1 -0
package/dist/components/ui/breadcrumb.d.ts +22 -0
package/dist/components/ui/breadcrumb.d.ts.map +1 -0
package/dist/components/ui/bubble.d.ts +19 -0
package/dist/components/ui/bubble.d.ts.map +1 -0
package/dist/components/ui/button-group.d.ts +13 -0
package/dist/components/ui/button-group.d.ts.map +1 -0
package/dist/components/ui/button.d.ts +13 -0
package/dist/components/ui/button.d.ts.map +1 -0
package/dist/components/ui/calendar.d.ts +9 -0
package/dist/components/ui/calendar.d.ts.map +1 -0
package/dist/components/ui/card.d.ts +9 -0
package/dist/components/ui/card.d.ts.map +1 -0
package/dist/components/ui/carousel.d.ts +23 -0
package/dist/components/ui/carousel.d.ts.map +1 -0
package/dist/components/ui/chart.d.ts +63 -0
package/dist/components/ui/chart.d.ts.map +1 -0
package/dist/components/ui/checkbox.d.ts +5 -0
package/dist/components/ui/checkbox.d.ts.map +1 -0
package/dist/components/ui/collapsible.d.ts +6 -0
package/dist/components/ui/collapsible.d.ts.map +1 -0
package/dist/components/ui/command.d.ts +81 -0
package/dist/components/ui/command.d.ts.map +1 -0
package/dist/components/ui/context-menu.d.ts +28 -0
package/dist/components/ui/context-menu.d.ts.map +1 -0
package/dist/components/ui/dialog.d.ts +22 -0
package/dist/components/ui/dialog.d.ts.map +1 -0
package/dist/components/ui/direction.d.ts +8 -0
package/dist/components/ui/direction.d.ts.map +1 -0
package/dist/components/ui/drawer.d.ts +23 -0
package/dist/components/ui/drawer.d.ts.map +1 -0
package/dist/components/ui/dropdown-menu.d.ts +28 -0
package/dist/components/ui/dropdown-menu.d.ts.map +1 -0
package/dist/components/ui/empty.d.ts +13 -0
package/dist/components/ui/empty.d.ts.map +1 -0
package/dist/components/ui/field.d.ts +25 -0
package/dist/components/ui/field.d.ts.map +1 -0
package/dist/components/ui/hover-card.d.ts +7 -0
package/dist/components/ui/hover-card.d.ts.map +1 -0
package/dist/components/ui/input-group.d.ts +13 -0
package/dist/components/ui/input-group.d.ts.map +1 -0
package/dist/components/ui/input-otp.d.ts +35 -0
package/dist/components/ui/input-otp.d.ts.map +1 -0
package/dist/components/ui/input.d.ts +5 -0
package/dist/components/ui/input.d.ts.map +1 -0
package/dist/components/ui/item.d.ts +24 -0
package/dist/components/ui/item.d.ts.map +1 -0
package/dist/components/ui/kbd.d.ts +5 -0
package/dist/components/ui/kbd.d.ts.map +1 -0
package/dist/components/ui/label.d.ts +6 -0
package/dist/components/ui/label.d.ts.map +1 -0
package/dist/components/ui/marker.d.ts +13 -0
package/dist/components/ui/marker.d.ts.map +1 -0
package/dist/components/ui/menubar.d.ts +29 -0
package/dist/components/ui/menubar.d.ts.map +1 -0
package/dist/components/ui/message-scroller.d.ts +26 -0
package/dist/components/ui/message-scroller.d.ts.map +1 -0
package/dist/components/ui/message.d.ts +11 -0
package/dist/components/ui/message.d.ts.map +1 -0
package/dist/components/ui/native-select.d.ts +4 -0
package/dist/components/ui/native-select.d.ts.map +1 -0
package/dist/components/ui/navigation-menu.d.ts +13 -0
package/dist/components/ui/navigation-menu.d.ts.map +1 -0
package/dist/components/ui/pagination.d.ts +35 -0
package/dist/components/ui/pagination.d.ts.map +1 -0
package/dist/components/ui/popover.d.ts +8 -0
package/dist/components/ui/popover.d.ts.map +1 -0
package/dist/components/ui/progress.d.ts +5 -0
package/dist/components/ui/progress.d.ts.map +1 -0
package/dist/components/ui/radio-group.d.ts +6 -0
package/dist/components/ui/radio-group.d.ts.map +1 -0
package/dist/components/ui/resizable.d.ts +24 -0
package/dist/components/ui/resizable.d.ts.map +1 -0
package/dist/components/ui/scroll-area.d.ts +6 -0
package/dist/components/ui/scroll-area.d.ts.map +1 -0
package/dist/components/ui/search-input.d.ts +23 -0
package/dist/components/ui/search-input.d.ts.map +1 -0
package/dist/components/ui/select.d.ts +14 -0
package/dist/components/ui/select.d.ts.map +1 -0
package/dist/components/ui/separator.d.ts +5 -0
package/dist/components/ui/separator.d.ts.map +1 -0
package/dist/components/ui/sheet.d.ts +28 -0
package/dist/components/ui/sheet.d.ts.map +1 -0
package/dist/components/ui/sidebar.d.ts +70 -0
package/dist/components/ui/sidebar.d.ts.map +1 -0
package/dist/components/ui/skeleton.d.ts +4 -0
package/dist/components/ui/skeleton.d.ts.map +1 -0
package/dist/components/ui/slider.d.ts +5 -0
package/dist/components/ui/slider.d.ts.map +1 -0
package/dist/components/ui/sonner.d.ts +6 -0
package/dist/components/ui/sonner.d.ts.map +1 -0
package/dist/components/ui/spinner.d.ts +7 -0
package/dist/components/ui/spinner.d.ts.map +1 -0
package/dist/components/ui/switch.d.ts +5 -0
package/dist/components/ui/switch.d.ts.map +1 -0
package/dist/components/ui/table.d.ts +11 -0
package/dist/components/ui/table.d.ts.map +1 -0
package/dist/components/ui/tabs.d.ts +13 -0
package/dist/components/ui/tabs.d.ts.map +1 -0
package/dist/components/ui/textarea.d.ts +5 -0
package/dist/components/ui/textarea.d.ts.map +1 -0
package/dist/components/ui/toggle-group.d.ts +13 -0
package/dist/components/ui/toggle-group.d.ts.map +1 -0
package/dist/components/ui/toggle.d.ts +13 -0
package/dist/components/ui/toggle.d.ts.map +1 -0
package/dist/components/ui/tooltip.d.ts +8 -0
package/dist/components/ui/tooltip.d.ts.map +1 -0
package/dist/hooks/use-mobile.d.ts +2 -0
package/dist/hooks/use-mobile.d.ts.map +1 -0
package/dist/index.cjs +82 -0
package/dist/index.d.ts +71 -0
package/dist/index.d.ts.map +1 -0
package/dist/index.js +20969 -0
package/dist/lib/utils.d.ts +4 -0
package/dist/lib/utils.d.ts.map +1 -0
package/llms.txt +173 -0
package/package.json +125 -0
package/src/components/ui/accordion.tsx +51 -0
package/src/components/ui/alert-dialog.tsx +115 -0
package/src/components/ui/alert.tsx +48 -0
package/src/components/ui/aspect-ratio.tsx +5 -0
package/src/components/ui/attachment.tsx +186 -0
package/src/components/ui/avatar.tsx +57 -0
package/src/components/ui/badge.tsx +40 -0
package/src/components/ui/breadcrumb.tsx +101 -0
package/src/components/ui/bubble.tsx +123 -0
package/src/components/ui/button-group.tsx +74 -0
package/src/components/ui/button.tsx +64 -0
package/src/components/ui/calendar.tsx +63 -0
package/src/components/ui/card.tsx +55 -0
package/src/components/ui/carousel.tsx +252 -0
package/src/components/ui/chart.tsx +323 -0
package/src/components/ui/checkbox.tsx +26 -0
package/src/components/ui/collapsible.tsx +9 -0
package/src/components/ui/command.tsx +136 -0
package/src/components/ui/context-menu.tsx +187 -0
package/src/components/ui/dialog.tsx +103 -0
package/src/components/ui/direction.tsx +15 -0
package/src/components/ui/drawer.tsx +98 -0
package/src/components/ui/dropdown-menu.tsx +186 -0
package/src/components/ui/empty.tsx +75 -0
package/src/components/ui/field.tsx +175 -0
package/src/components/ui/hover-card.tsx +27 -0
package/src/components/ui/input-group.tsx +80 -0
package/src/components/ui/input-otp.tsx +67 -0
package/src/components/ui/input.tsx +24 -0
package/src/components/ui/item.tsx +118 -0
package/src/components/ui/kbd.tsx +21 -0
package/src/components/ui/label.tsx +19 -0
package/src/components/ui/marker.tsx +67 -0
package/src/components/ui/menubar.tsx +218 -0
package/src/components/ui/message-scroller.tsx +206 -0
package/src/components/ui/message.tsx +85 -0
package/src/components/ui/native-select.tsx +29 -0
package/src/components/ui/navigation-menu.tsx +120 -0
package/src/components/ui/pagination.tsx +108 -0
package/src/components/ui/popover.tsx +31 -0
package/src/components/ui/progress.tsx +23 -0
package/src/components/ui/radio-group.tsx +36 -0
package/src/components/ui/resizable.tsx +40 -0
package/src/components/ui/scroll-area.tsx +44 -0
package/src/components/ui/search-input.tsx +97 -0
package/src/components/ui/select.tsx +151 -0
package/src/components/ui/separator.tsx +24 -0
package/src/components/ui/sheet.tsx +124 -0
package/src/components/ui/sidebar.tsx +704 -0
package/src/components/ui/skeleton.tsx +9 -0
package/src/components/ui/slider.tsx +41 -0
package/src/components/ui/sonner.tsx +45 -0
package/src/components/ui/spinner.tsx +21 -0
package/src/components/ui/switch.tsx +27 -0
package/src/components/ui/table.tsx +95 -0
package/src/components/ui/tabs.tsx +119 -0
package/src/components/ui/textarea.tsx +23 -0
package/src/components/ui/toggle-group.tsx +55 -0
package/src/components/ui/toggle.tsx +40 -0
package/src/components/ui/tooltip.tsx +30 -0
package/src/hooks/use-mobile.ts +19 -0
package/src/index.ts +414 -0
package/src/lib/utils.ts +7 -0
package/src/styles/tokens.css +360 -0
package/tailwind.preset.js +235 -0

package/src/styles/tokens.css ADDED Viewed

@@ -0,0 +1,360 @@
+/**
+ * PT-AI-Components (@ptengine/pt-ai-components) — Design Token 唯一数据源
+ *
+ * 三层嵌套架构，色值物理上只存在于最底的原语层（单一真值源）：
+ *
+ *  ③ shadcn 兼容别名（--pt-background / --pt-primary / --pt-border …）
+ *     供库内组件（Button / Input …）沿用 shadcn 类名。**只引用语义层**，
+ *     自身不存值、不带透明度、无明暗差异（明暗差异全部在语义层）。
+ *     声明在 `.pt-ui` 作用域块：库不写任何 :root/html 级样式，
+ *     使 var() 替换在各作用域内用当地语义值发生（见该块前的注释）。
+ *
+ *  ② PTEngine 语义层（--pt-text/bg/border/interaction/chart/link/role-*）
+ *     设计系统语义色。**统一「未包裹」形态**（不写 rgb() 外壳）：
+ *       · 实色 → 纯通道引用：      --pt-brand: var(--pt-green-500);
+ *       · 需要透明度 → 通道 + alpha：--pt-text-strong: var(--pt-black) / 0.9;
+ *     透明度只在这一层定义。light / dark 差异通过 .dark 覆盖语义 Token 实现。
+ *
+ *  ① PTEngine 原语层 Primitives（唯一存最终色值的一层，与主题无关）
+ *     **只存纯通道三元组**（如 --pt-green-500: 37 172 0），不含任何透明度
+ *     （原 white/N、black/N 透明档位已删除，透明度改由语义层 `/ a` 表达）。
+ *     改色只需改这一层，三层自动跟随 = single source of truth。
+ *     注：原语在 `.pt-ui` 声明；`.pt-ui.dark` 只覆盖语义层，原语靠继承取用。
+ *     HEX 仅在 /tokens 展示页由运行时计算标注，**不参与代码**。
+ *
+ * 消费规则（rgb() 外壳只在最外层包一次，永不嵌套）：
+ *   · preset 里实色别名 → rgb(var(--x) / <alpha-value>)，支持 bg-primary/90；
+ *   · 自带透明度的别名（border / input / sidebar-border）→ rgb(var(--x))，
+ *     不再叠 <alpha-value>（否则双 alpha 非法）；
+ *   · 在 Tailwind 之外直接使用任何 Token（内联 style / JS / SVG）→
+ *     自己包一层：color: rgb(var(--pt-text-strong))。
+ *
+ * 消费方在入口处 `import '@ptengine/pt-ai-components/styles/tokens.css'`。
+ * 纯 .pt-ui/.pt-ui.dark（不套 @layer）以避免 cascade layer 副作用。
+ * 接入：给 <html>（推荐，浮层 portal 可达）或子树容器挂 `.pt-ui` 类；深浅切换加/去 `.dark` 类。全部变量 --pt- 前缀，与宿主零撞名。
+ */
+/* ── 字体 Typography · --pt-font-sans 按语言切换（由 html lang 驱动）──
+ * 品牌字体（源自 Figma Type/Mode 的 family 变量）：EN 'Inter' /
+ * JA 'Noto Sans JP' / ZH 'Noto Sans SC'。'Inter' 在 CJK 栈中置前：
+ * 拉丁字符与数字三语统一用 Inter，CJK 字符落到 JP/SC；各栈保留
+ * 同语言系统字体回退（webfont 未加载完时观感不劣化）。
+ * 字体文件由消费方应用加载（next/font / fontsource / <link>），库只
+ * 声明栈；中国大陆环境需自托管 Noto Sans SC，详见 README。 */
+.pt-ui {
+    --pt-font-sans: 'Inter', system-ui, -apple-system, sans-serif;
+}
+:lang(ja) {
+    --pt-font-sans: 'Inter', 'Noto Sans JP', 'Hiragino Kaku Gothic ProN', 'Yu Gothic', Meiryo,
+        sans-serif;
+}
+:lang(zh) {
+    --pt-font-sans: 'Inter', 'Noto Sans SC', 'PingFang SC', 'Microsoft YaHei', sans-serif;
+}
+/* ── 行高 Line height · 同字号按语言可不同（preset fontSize 引用）──
+ * .pt-ui ＝ English 基准（Figma Text Styles）。
+ * 现行策略：ja / zh 暂与 English 一致——未覆盖的档位自动沿用
+ * .pt-ui 值，因此无需显式声明。后续按语言精修时，在下方
+ * :lang(ja) / :lang(zh) 块中只填与英文不同的档位即可全站生效。 */
+.pt-ui {
+    --pt-lh-2xs: 16px;
+    --pt-lh-xs: 20px;
+    --pt-lh-sm: 20px;
+    --pt-lh-base: 24px;
+    --pt-lh-lg: 28px;
+    --pt-lh-xl: 32px;
+    --pt-lh-2xl: 36px;
+    --pt-lh-3xl: 40px;
+    --pt-lh-4xl: 48px;
+    --pt-lh-5xl: 56px;
+    --pt-lh-6xl: 72px;
+    --pt-lh-7xl: 72px;
+    --pt-lh-8xl: 96px;
+    --pt-lh-9xl: 128px;
+}
+/* 精修预留位（示例：:lang(ja) { --pt-lh-sm: 24px; }）：
+ * :lang(ja) { }
+ * :lang(zh) { } */
+/* 嵌套语言孤岛（如英文页里一段 lang="ja" 的区域）：显式带 lang 的
+ * 元素重新解析 var，字体随该区域语言切换。 */
+[lang] {
+    font-family: var(--pt-font-sans), system-ui, sans-serif;
+}
+/* ── ③ shadcn 兼容别名 · 全部引用语义层，自身无明暗差异 ────────
+ * 选择器含 .dark 的原因：CSS var() 替换发生在「声明所在元素」上，
+ * 后代继承的是已替换的结果。若只在作用域根声明，嵌套 .dark 容器会
+ * 继承到按亮色语义烘焙的值。让同一份声明同时作用于 .light/.dark
+ * 作用域，替换就会在该作用域内用当地语义值重新发生（零重复代码）。 */
+.pt-ui {
+    --pt-background: var(--pt-bg-default);
+    --pt-foreground: var(--pt-fg-default);
+    --pt-card: var(--pt-bg-box);
+    --pt-card-foreground: var(--pt-fg-default);
+    --pt-popover: var(--pt-bg-box);
+    --pt-popover-foreground: var(--pt-fg-default);
+    --pt-primary: var(--pt-bg-strong); /* 高强调黑（暗色自动反白） */
+    --pt-primary-foreground: var(--pt-text-inverse);
+    --pt-brand: var(--pt-brand); /* 品牌绿，供 Brand 场景（bg-brand） */
+    --pt-brand-foreground: var(--pt-text-stable);
+    --pt-secondary: var(--pt-bg-secondary);
+    --pt-secondary-foreground: var(--pt-fg-default);
+    --pt-muted: var(--pt-bg-secondary);
+    --pt-muted-foreground: var(--pt-fg-muted);
+    --pt-accent: var(--pt-interaction-hover); /* 交互高亮＝中性叠加（黑/白 + alpha，百分比见语义层） */
+    --pt-accent-foreground: var(--pt-fg-default);
+    --pt-destructive: var(--pt-bg-danger-standard);
+    --pt-destructive-foreground: var(--pt-text-stable);
+    --pt-border: var(--pt-border-default);
+    --pt-input: var(--pt-border-input);
+    --pt-ring: var(--pt-interaction-focus); /* 焦点环＝中性（黑90%/白90%），自带 alpha */
+    --pt-chart-1: var(--pt-chart-1);
+    --pt-chart-2: var(--pt-chart-2);
+    --pt-chart-3: var(--pt-chart-3);
+    --pt-chart-4: var(--pt-chart-4);
+    --pt-chart-5: var(--pt-chart-5);
+    --pt-sidebar: var(--pt-bg-box);
+    --pt-sidebar-foreground: var(--pt-fg-default);
+    --pt-sidebar-primary: var(--pt-bg-strong);
+    --pt-sidebar-primary-foreground: var(--pt-text-inverse);
+    --pt-sidebar-accent: var(--pt-interaction-hover);
+    --pt-sidebar-accent-foreground: var(--pt-fg-default);
+    --pt-sidebar-border: var(--pt-border-default);
+    --pt-sidebar-ring: var(--pt-interaction-focus);
+}
+.pt-ui {
+    --pt-radius: 10px; /* px 硬值:rem 会被宿主根字号缩放 */
+    --pt-radius-md: calc(var(--pt-radius) - 2px); /* 8px:default/lg 档控件 */
+    --pt-radius-sm: calc(var(--pt-radius) - 4px); /* 6px:sm 档控件 */
+    /* ── ② PTEngine 语义层（Light）· 未包裹形态，全部引用原语 ──── */
+    /* role（角色：补齐 shadcn 别名所需的语义映射，纯通道或通道+alpha） */
+    --pt-brand: var(--pt-green-500);
+    --pt-fg-default: var(--pt-black);
+    --pt-fg-muted: var(--pt-neutral-600);
+    --pt-bg-secondary: var(--pt-neutral-50);
+    --pt-border-default: var(--pt-neutral-100);
+    --pt-border-input: var(--pt-neutral-100);
+    /* text */
+    --pt-text-strong: var(--pt-black) / 0.9;
+    --pt-text-standard: var(--pt-black) / 0.7;
+    --pt-text-tage: var(--pt-black) / 0.6;
+    --pt-text-weak: var(--pt-black) / 0.4;
+    --pt-text-disabled: var(--pt-black) / 0.3;
+    --pt-text-stable: var(--pt-white);
+    --pt-text-inverse: var(--pt-white);
+    --pt-text-brand: var(--pt-lime-800);
+    --pt-text-brand-standar: var(--pt-lime-500);
+    --pt-text-neutral: var(--pt-neutral-700);
+    --pt-text-success: var(--pt-green-700);
+    --pt-text-success-standar: var(--pt-green-500);
+    --pt-text-danger: var(--pt-red-700);
+    --pt-text-danger-standar: var(--pt-red-600);
+    --pt-text-warning: var(--pt-orange-700);
+    --pt-text-warning-standar: var(--pt-orange-500);
+    --pt-text-information: var(--pt-blue-700);
+    --pt-text-information-standar: var(--pt-blue-500);
+    --pt-text-ai: var(--pt-fuchsia-700);
+    --pt-text-ai-standar: var(--pt-fuchsia-500);
+    /* background */
+    --pt-bg-default: var(--pt-white);
+    --pt-bg-box: var(--pt-white);
+    --pt-bg-strong: var(--pt-neutral-950);
+    --pt-bg-neutral: var(--pt-black) / 0.08;
+    --pt-bg-weak: var(--pt-black) / 0.03;
+    --pt-bg-disable: var(--pt-black) / 0.1;
+    --pt-bg-selected: var(--pt-black) / 0.08; /* 选中/激活底层＝中性 8%（与 hover 同色，靠状态层叠加区分：激活+hover≈16%） */
+    --pt-bg-brand-subtler: var(--pt-lime-100);
+    --pt-bg-brand-subtle: var(--pt-lime-300);
+    --pt-bg-brand-standard: var(--pt-lime-500);
+    --pt-bg-neutral-subtler: var(--pt-neutral-500) / 0.2;
+    --pt-bg-positive-subtler: var(--pt-green-500) / 0.2;
+    --pt-bg-positive-subtle: var(--pt-green-300);
+    --pt-bg-positive-standard: var(--pt-green-500);
+    --pt-bg-danger-subtler: var(--pt-red-500) / 0.2;
+    --pt-bg-danger-subtle: var(--pt-red-300);
+    --pt-bg-danger-standard: var(--pt-red-600);
+    --pt-bg-warning-subtler: var(--pt-orange-500) / 0.2;
+    --pt-bg-warning-subtle: var(--pt-orange-300);
+    --pt-bg-warning-standard: var(--pt-orange-500);
+    --pt-bg-information-subtler: var(--pt-blue-500) / 0.2;
+    --pt-bg-information-subtle: var(--pt-blue-300);
+    --pt-bg-information-standard: var(--pt-blue-500);
+    --pt-bg-ai-subtler: var(--pt-fuchsia-500) / 0.2;
+    --pt-bg-ai-subtle: var(--pt-fuchsia-300);
+    --pt-bg-ai-standard: var(--pt-fuchsia-500);
+    /* border */
+    --pt-border-strong: var(--pt-black) / 0.9;
+    --pt-border-neutral: var(--pt-black) / 0.2;
+    --pt-border-weak: var(--pt-black) / 0.08;
+    --pt-border-inverse: var(--pt-white);
+    --pt-border-brand: var(--pt-lime-200);
+    --pt-border-success: var(--pt-green-100);
+    --pt-border-danger: var(--pt-red-100);
+    --pt-border-warning: var(--pt-orange-100);
+    --pt-border-information: var(--pt-blue-100);
+    --pt-border-ai: var(--pt-fuchsia-100);
+    /* interaction */
+    --pt-interaction-hover: var(--pt-black) / 0.08;
+    --pt-interaction-press: var(--pt-black) / 0.1;
+    --pt-interaction-focus: var(--pt-black) / 0.9;
+    --pt-interaction-reversal-hover: var(--pt-white) / 0.08;
+    --pt-interaction-reversal-press: var(--pt-white) / 0.1;
+    --pt-interaction-reversal-focus: var(--pt-white) / 0.9;
+    /* chart */
+    --pt-chart-0: var(--pt-black);
+    --pt-chart-1: var(--pt-green-500);
+    --pt-chart-2: var(--pt-lime-500);
+    --pt-chart-3: var(--pt-orange-500);
+    --pt-chart-4: var(--pt-blue-500);
+    --pt-chart-5: var(--pt-fuchsia-500);
+    /* link */
+    --pt-link-blue: var(--pt-blue-500);
+    --pt-link-green: var(--pt-green-500);
+    /* ── ① PTEngine 原语层 Primitives（纯通道三元组，唯一真值源）──
+     * 底层调色板（取自 Figma「Primitives」集合，单一模式，与主题无关，
+     * 只在 .pt-ui 声明、不随 .dark 变化）。上面两层从这里取值。
+     * 不含透明度——透明度由语义层以 `var(--pt-x) / a` 表达。 */
+    /* base */
+    --pt-white: 255 255 255;
+    --pt-black: 16 28 31;
+    /* neutral */
+    --pt-neutral-50: 243 244 244;
+    --pt-neutral-100: 231 232 233;
+    --pt-neutral-200: 207 210 210;
+    --pt-neutral-300: 183 187 188;
+    --pt-neutral-400: 159 164 165;
+    --pt-neutral-500: 135 141 143;
+    --pt-neutral-600: 112 119 121;
+    --pt-neutral-700: 88 96 98;
+    --pt-neutral-800: 64 73 76;
+    --pt-neutral-900: 40 51 53;
+    --pt-neutral-950: 28 39 42;
+    /* red */
+    --pt-red: 255 71 71;
+    --pt-red-50: 255 237 237;
+    --pt-red-100: 255 218 218;
+    --pt-red-200: 255 181 181;
+    --pt-red-300: 255 145 145;
+    --pt-red-400: 255 108 108;
+    --pt-red-500: 255 71 71;
+    --pt-red-600: 207 62 63;
+    --pt-red-700: 159 54 55;
+    --pt-red-800: 112 45 47;
+    --pt-red-900: 64 37 39;
+    --pt-red-950: 28 30 33;
+    /* orange */
+    --pt-orange: 255 144 59;
+    --pt-orange-50: 255 244 235;
+    --pt-orange-100: 255 233 216;
+    --pt-orange-200: 255 211 177;
+    --pt-orange-300: 255 188 137;
+    --pt-orange-400: 255 166 98;
+    --pt-orange-500: 255 144 59;
+    --pt-orange-600: 207 121 53;
+    --pt-orange-700: 159 98 48;
+    --pt-orange-800: 112 74 42;
+    --pt-orange-900: 64 51 37;
+    --pt-orange-950: 28 34 32;
+    /* lime */
+    --pt-lime: 200 240 80;
+    --pt-lime-50: 249 253 237;
+    --pt-lime-100: 244 252 220;
+    --pt-lime-200: 233 249 185;
+    --pt-lime-300: 222 246 150;
+    --pt-lime-400: 211 243 115;
+    --pt-lime-500: 200 240 80;
+    --pt-lime-600: 163 198 70;
+    --pt-lime-700: 126 155 60;
+    --pt-lime-800: 90 113 51;
+    --pt-lime-900: 53 70 41;
+    --pt-lime-950: 25 39 33;
+    /* green */
+    --pt-green: 37 172 0;
+    --pt-green-50: 233 247 229;
+    --pt-green-100: 211 238 204;
+    --pt-green-200: 168 222 153;
+    --pt-green-300: 124 205 102;
+    --pt-green-400: 81 189 51;
+    --pt-green-500: 37 172 0;
+    --pt-green-600: 33 143 6;
+    --pt-green-700: 29 114 12;
+    --pt-green-800: 24 86 19;
+    --pt-green-900: 20 57 25;
+    --pt-green-950: 17 35 29;
+    /* blue */
+    --pt-blue: 34 145 248;
+    --pt-blue-50: 233 244 254;
+    --pt-blue-100: 211 233 254;
+    --pt-blue-200: 167 211 252;
+    --pt-blue-300: 122 189 251;
+    --pt-blue-400: 78 167 249;
+    --pt-blue-500: 34 145 248;
+    --pt-blue-600: 30 122 205;
+    --pt-blue-700: 27 98 161;
+    --pt-blue-800: 23 75 118;
+    --pt-blue-900: 20 51 74;
+    --pt-blue-950: 17 34 42;
+    /* fuchsia */
+    --pt-fuchsia: 191 99 243;
+    --pt-fuchsia-50: 249 239 254;
+    --pt-fuchsia-100: 242 224 253;
+    --pt-fuchsia-200: 229 193 250;
+    --pt-fuchsia-300: 217 161 248;
+    --pt-fuchsia-400: 204 130 245;
+    --pt-fuchsia-500: 191 99 243;
+    --pt-fuchsia-600: 156 85 201;
+    --pt-fuchsia-700: 121 71 158;
+    --pt-fuchsia-800: 86 56 116;
+    --pt-fuchsia-900: 51 42 73;
+    --pt-fuchsia-950: 25 32 42;
+}
+/* ── .dark：只覆盖语义层（别名与原语零重复声明）─────────────── */
+.pt-ui.dark,
+.dark .pt-ui {
+    /* role */
+    --pt-fg-default: var(--pt-white);
+    --pt-fg-muted: var(--pt-neutral-400);
+    --pt-bg-secondary: var(--pt-neutral-800);
+    --pt-border-default: var(--pt-white) / 0.1;
+    --pt-border-input: var(--pt-white) / 0.15;
+    /* text */
+    --pt-text-strong: var(--pt-white) / 0.9;
+    --pt-text-standard: var(--pt-white) / 0.7;
+    --pt-text-tage: var(--pt-white) / 0.6;
+    --pt-text-weak: var(--pt-white) / 0.4;
+    --pt-text-disabled: var(--pt-white) / 0.3;
+    --pt-text-inverse: var(--pt-black);
+    /* background */
+    --pt-bg-default: var(--pt-neutral-950);
+    --pt-bg-box: var(--pt-black);
+    --pt-bg-strong: var(--pt-white);
+    --pt-bg-neutral: var(--pt-white) / 0.08;
+    --pt-bg-weak: var(--pt-white) / 0.03;
+    --pt-bg-disable: var(--pt-white) / 0.1;
+    --pt-bg-selected: var(--pt-white) / 0.08; /* 暗色：中性白 8% */
+    /* border */
+    --pt-border-strong: var(--pt-white) / 0.9;
+    --pt-border-neutral: var(--pt-white) / 0.2;
+    --pt-border-weak: var(--pt-white) / 0.08;
+    --pt-border-inverse: var(--pt-black);
+    /* interaction */
+    --pt-interaction-hover: var(--pt-white) / 0.08;
+    --pt-interaction-press: var(--pt-white) / 0.1;
+    --pt-interaction-focus: var(--pt-white) / 0.9;
+    --pt-interaction-reversal-hover: var(--pt-black) / 0.08;
+    --pt-interaction-reversal-press: var(--pt-black) / 0.1;
+    --pt-interaction-reversal-focus: var(--pt-black) / 0.9;
+    /* 状态色(暗色):文字 700→500 提亮;20% 透明底继承亮色定义,双模式自适应。 */
+    --pt-text-neutral: var(--pt-neutral-500);
+    --pt-text-success: var(--pt-green-500);
+    --pt-text-danger: var(--pt-red-500);
+    --pt-text-warning: var(--pt-orange-500);
+    --pt-text-information: var(--pt-blue-500);
+    --pt-text-ai: var(--pt-fuchsia-500);
+    /* chart */
+    --pt-chart-0: var(--pt-white);
+}

package/tailwind.preset.js ADDED Viewed

@@ -0,0 +1,235 @@
+import tailwindcssAnimate from 'tailwindcss-animate';
+import plugin from 'tailwindcss/plugin';
+/**
+ * 状态层 State Layer（Material 式交互反馈）：
+ * 组件加 `state-layer` 类后，hover 在原样式上「叠加」一层
+ * --pt-interaction-hover，按下(active)叠加 --pt-interaction-press
+ * （黑/白中性叠加，具体百分比以 tokens.css 语义层为准）。
+ * 原背景不被替换：实色按钮 hover 变深、透明表面 hover 出现浅灰，
+ * 一条规则全组件通用。覆盖层用 ::after + opacity 过渡（平滑），
+ * 圆角继承宿主，不拦截鼠标。
+ *
+ * 描边宿主（有 1px+ 边框）需把叠层向外扩到 border box，否则叠层缩在
+ * padding box（边框内侧）却仍用外圆角，圆角处与边框内圆弧不同心（错位约边框宽）。
+ * 描边变体自行声明 `[--pt-state-layer-border:<边框宽>]`（如 1px）；默认 0 = 实色宿主不外扩。
+ */
+const stateLayerPlugin = plugin(({ addUtilities }) => {
+    addUtilities({
+        '.state-layer': {
+            position: 'relative',
+            isolation: 'isolate',
+            '&::after': {
+                content: '""',
+                position: 'absolute',
+                inset: 'calc(-1 * var(--pt-state-layer-border, 0px))',
+                'border-radius': 'inherit',
+                'background-color': 'rgb(var(--pt-interaction-hover))',
+                opacity: '0',
+                transition: 'opacity 150ms',
+                'pointer-events': 'none'
+            },
+            '&:hover::after': {
+                opacity: '1'
+            },
+            '&:active::after': {
+                'background-color': 'rgb(var(--pt-interaction-press))',
+                opacity: '1'
+            },
+            /* 禁用时不生成叠层（配合 disabled:cursor-not-allowed：
+             * 鼠标事件保留以显示 🚫 光标，但悬停不得有任何反馈）。 */
+            '&:disabled::after': {
+                content: 'none'
+            }
+        },
+        /* 反转版：深色表面（如高强调黑按钮）用 reversal 交互 Token
+         * （亮色下白8%/10%；暗色下该表面反白，reversal 自动变黑8%/10%）。 */
+        '.state-layer-inverse': {
+            position: 'relative',
+            isolation: 'isolate',
+            '&::after': {
+                content: '""',
+                position: 'absolute',
+                inset: 'calc(-1 * var(--pt-state-layer-border, 0px))',
+                'border-radius': 'inherit',
+                'background-color': 'rgb(var(--pt-interaction-reversal-hover))',
+                opacity: '0',
+                transition: 'opacity 150ms',
+                'pointer-events': 'none'
+            },
+            '&:hover::after': {
+                opacity: '1'
+            },
+            '&:active::after': {
+                'background-color': 'rgb(var(--pt-interaction-reversal-press))',
+                opacity: '1'
+            },
+            '&:disabled::after': {
+                content: 'none'
+            }
+        }
+    });
+});
+/**
+ * PT-AI-Components (@ptengine/pt-ai-components) Tailwind 预设
+ *
+ * 消费方 tailwind.config：presets: [shadcnPreset]
+ * Token 值定义在 src/styles/tokens.css（唯一数据源）；此文件只做
+ * 「CSS 变量 → Tailwind 颜色键」的映射。
+ *
+ * 颜色取自 Ptengine AI Design System。shadcn 兼容别名在 tokens.css 里以
+ * 未包裹形态存储（纯通道，或通道+alpha），这里包一层 rgb()：
+ *   · 纯通道别名 → `rgb(var(--x) / <alpha-value>)`，支持 /alpha 工具类（bg-primary/90）
+ *   · 自带 alpha 的别名（border / input / ring / accent / sidebar 同类）→
+ *     裸 `rgb(var(--x))`——再套 <alpha-value> 会产生非法双 alpha
+ *
+ * @type {import('tailwindcss').Config}
+ */
+export default {
+    darkMode: ['class'],
+    theme: {
+        extend: {
+            colors: {
+                border: 'rgb(var(--pt-border))',
+                input: 'rgb(var(--pt-input))',
+                ring: 'rgb(var(--pt-ring))',
+                background: 'rgb(var(--pt-background) / <alpha-value>)',
+                foreground: 'rgb(var(--pt-foreground) / <alpha-value>)',
+                primary: {
+                    DEFAULT: 'rgb(var(--pt-primary) / <alpha-value>)',
+                    foreground: 'rgb(var(--pt-primary-foreground) / <alpha-value>)'
+                },
+                brand: {
+                    DEFAULT: 'rgb(var(--pt-brand) / <alpha-value>)',
+                    foreground: 'rgb(var(--pt-brand-foreground) / <alpha-value>)'
+                },
+                secondary: {
+                    DEFAULT: 'rgb(var(--pt-secondary) / <alpha-value>)',
+                    foreground: 'rgb(var(--pt-secondary-foreground) / <alpha-value>)'
+                },
+                destructive: {
+                    DEFAULT: 'rgb(var(--pt-destructive) / <alpha-value>)',
+                    foreground: 'rgb(var(--pt-destructive-foreground) / <alpha-value>)'
+                },
+                muted: {
+                    DEFAULT: 'rgb(var(--pt-muted) / <alpha-value>)',
+                    foreground: 'rgb(var(--pt-muted-foreground) / <alpha-value>)'
+                },
+                accent: {
+                    DEFAULT: 'rgb(var(--pt-accent))',
+                    foreground: 'rgb(var(--pt-accent-foreground) / <alpha-value>)'
+                },
+                popover: {
+                    DEFAULT: 'rgb(var(--pt-popover) / <alpha-value>)',
+                    foreground: 'rgb(var(--pt-popover-foreground) / <alpha-value>)'
+                },
+                card: {
+                    DEFAULT: 'rgb(var(--pt-card) / <alpha-value>)',
+                    foreground: 'rgb(var(--pt-card-foreground) / <alpha-value>)'
+                },
+                chart: {
+                    1: 'rgb(var(--pt-chart-1) / <alpha-value>)',
+                    2: 'rgb(var(--pt-chart-2) / <alpha-value>)',
+                    3: 'rgb(var(--pt-chart-3) / <alpha-value>)',
+                    4: 'rgb(var(--pt-chart-4) / <alpha-value>)',
+                    5: 'rgb(var(--pt-chart-5) / <alpha-value>)'
+                },
+                sidebar: {
+                    DEFAULT: 'rgb(var(--pt-sidebar) / <alpha-value>)',
+                    foreground: 'rgb(var(--pt-sidebar-foreground) / <alpha-value>)',
+                    primary: 'rgb(var(--pt-sidebar-primary) / <alpha-value>)',
+                    'primary-foreground': 'rgb(var(--pt-sidebar-primary-foreground) / <alpha-value>)',
+                    accent: 'rgb(var(--pt-sidebar-accent))',
+                    'accent-foreground': 'rgb(var(--pt-sidebar-accent-foreground) / <alpha-value>)',
+                    border: 'rgb(var(--pt-sidebar-border))',
+                    ring: 'rgb(var(--pt-sidebar-ring))'
+                }
+            },
+            borderRadius: {
+                lg: 'var(--pt-radius)',
+                md: 'calc(var(--pt-radius) - 2px)',
+                sm: 'calc(var(--pt-radius) - 4px)'
+            },
+            /* 语义层描边 Token 的工具类（如 hover:border-strong）。
+             * 值自带 alpha，只包一层 rgb()。 */
+            borderColor: {
+                strong: 'rgb(var(--pt-border-strong))',
+                neutral: 'rgb(var(--pt-border-neutral))',
+                weak: 'rgb(var(--pt-border-weak))'
+            },
+            /* 语义层交互/状态 Token 的背景工具类（如 active:bg-press、disabled:bg-disable）。
+             * 状态色 subtler 底＝语义色 500 @ 20%（token 自带 alpha，只包 rgb()），
+             * 双模式共用一份定义，供 Badge/Alert 等状态表面用。 */
+            backgroundColor: {
+                press: 'rgb(var(--pt-interaction-press))',
+                disable: 'rgb(var(--pt-bg-disable))',
+                selected: 'rgb(var(--pt-bg-selected))',
+                'neutral-subtler': 'rgb(var(--pt-bg-neutral-subtler))',
+                'positive-subtler': 'rgb(var(--pt-bg-positive-subtler))',
+                'danger-subtler': 'rgb(var(--pt-bg-danger-subtler))',
+                'warning-subtler': 'rgb(var(--pt-bg-warning-subtler))',
+                'information-subtler': 'rgb(var(--pt-bg-information-subtler))',
+                'ai-subtler': 'rgb(var(--pt-bg-ai-subtler))'
+            },
+            /* 状态色文字（亮色 700 档 / 暗色 500 档，随 token 切换）。 */
+            textColor: {
+                weak: 'rgb(var(--pt-text-weak))',
+                disabled: 'rgb(var(--pt-text-disabled))',
+                neutral: 'rgb(var(--pt-text-neutral) / <alpha-value>)',
+                success: 'rgb(var(--pt-text-success) / <alpha-value>)',
+                danger: 'rgb(var(--pt-text-danger) / <alpha-value>)',
+                warning: 'rgb(var(--pt-text-warning) / <alpha-value>)',
+                information: 'rgb(var(--pt-text-information) / <alpha-value>)',
+                ai: 'rgb(var(--pt-text-ai) / <alpha-value>)'
+            },
+            /* 字体族接 tokens.css 的 --pt-font-sans（按 html lang 切换三语字体栈）。 */
+            fontFamily: {
+                sans: ['var(--pt-font-sans)', 'system-ui', 'sans-serif']
+            },
+            /* 字阶整表覆盖 = Figma「Type/Mode + Text Styles」（design/tokens.json）。
+             * 与 Tailwind 默认的差异：新增 2xs=12；xs 为 13（非 12）；
+             * xl 及以上行高/字号按设计表。
+             * 字号三语一致；行高走 tokens.css 的 --pt-lh-* 变量，
+             * :lang(ja)/:lang(zh) 可按语言覆盖（同字号不同行高）。 */
+            fontSize: {
+                '2xs': ['12px', 'var(--pt-lh-2xs)'],
+                xs: ['13px', 'var(--pt-lh-xs)'],
+                sm: ['14px', 'var(--pt-lh-sm)'],
+                base: ['16px', 'var(--pt-lh-base)'],
+                lg: ['18px', 'var(--pt-lh-lg)'],
+                xl: ['20px', 'var(--pt-lh-xl)'],
+                '2xl': ['24px', 'var(--pt-lh-2xl)'],
+                '3xl': ['28px', 'var(--pt-lh-3xl)'],
+                '4xl': ['32px', 'var(--pt-lh-4xl)'],
+                '5xl': ['40px', 'var(--pt-lh-5xl)'],
+                '6xl': ['48px', 'var(--pt-lh-6xl)'],
+                '7xl': ['56px', 'var(--pt-lh-7xl)'],
+                '8xl': ['64px', 'var(--pt-lh-8xl)'],
+                '9xl': ['72px', 'var(--pt-lh-9xl)']
+            },
+            /* Radix Accordion 高度过渡（内容高度由 Radix 以 CSS 变量注入）；
+             * caret-blink 为 InputOTP 假光标闪烁。 */
+            keyframes: {
+                'accordion-down': {
+                    from: { height: '0' },
+                    to: { height: 'var(--radix-accordion-content-height)' }
+                },
+                'accordion-up': {
+                    from: { height: 'var(--radix-accordion-content-height)' },
+                    to: { height: '0' }
+                },
+                'caret-blink': {
+                    '0%,70%,100%': { opacity: '1' },
+                    '20%,50%': { opacity: '0' }
+                }
+            },
+            animation: {
+                'accordion-down': 'accordion-down 0.2s ease-out',
+                'accordion-up': 'accordion-up 0.2s ease-out',
+                'caret-blink': 'caret-blink 1.25s ease-out infinite'
+            }
+        }
+    },
+    plugins: [tailwindcssAnimate, stateLayerPlugin]
+};