@zhama/a2ui 0.10.4 → 0.11.0

package/README.md

@@ -74,7 +74,9 @@ Then open http://localhost:5174 and try these commands:
 
 - 🤖 **AI-First Design** - Built specifically for AI-driven UI generation
 - 📦 **Complete Protocol Support** - Full implementation of A2UI protocol specifications
-- 🎨 **Themeable** - Customizable theme system based on Tailwind CSS
+- 🎨 **Standalone Style System** - No Tailwind dependency, built-in CSS utility classes with `a2-` prefix
+- 🔒 **Style Isolation** - Avoid conflicts with host applications
+- 🌓 **Auto Dark Mode** - Uses CSS `light-dark()` function
 - 🧩 **Rich Components** - Comprehensive set of UI components (Text, Button, Card, List, TextField, etc.)
 - 🔌 **Extensible** - Support for custom component registration
 - 📱 **Responsive** - Mobile-first responsive design
@@ -103,34 +105,27 @@ npm install react react-dom react-markdown
 
 #### Basic Setup
 
-1. **Configure Tailwind CSS**
+1. **Wrap with StyleProvider and ThemeProvider**
 
-```js
-// tailwind.config.js
-import a2uiPreset from '@zhama/a2ui/tailwind.preset';
+```tsx
+import { StyleProvider, ThemeProvider, A2UIRoot } from '@zhama/a2ui';
 
-export default {
-  presets: [a2uiPreset],
-  content: [
-    './src/**/*.{js,ts,jsx,tsx}',
-    './node_modules/@zhama/a2ui/**/*.{js,ts,jsx,tsx}',
-  ],
-};
+function App() {
+  return (
+    <StyleProvider>
+      <ThemeProvider>
+        <div className="a2ui-root">
+          {/* Your A2UI components */}
+        </div>
+      </ThemeProvider>
+    </StyleProvider>
+  );
+}
 ```
 
-2. **Import CSS Variables**
-
-```css
-/* globals.css */
-@import '@zhama/a2ui/styles/a2ui-variables.css';
-@import '@zhama/a2ui/styles/a2ui.css';
-
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
-```
+> 💡 **Note:** `StyleProvider` automatically injects A2UI's CSS utility classes. The `a2ui-root` class applies base styles and CSS variables.
 
-3. **Use A2UIRoot Component**
+2. **Use A2UIRoot Component**
 
 ```tsx
 import { A2UIRoot } from '@zhama/a2ui';
@@ -212,26 +207,86 @@ import { A2UIProvider, useA2UI } from '@zhama/a2ui/context';
 A2UI comes with a customizable theme system:
 
 ```tsx
-import { A2UIProvider } from '@zhama/a2ui/context';
-import { defaultTheme } from '@zhama/a2ui/styles/default-theme';
+import { ThemeProvider, createTheme } from '@zhama/a2ui';
 
-const customTheme = {
-  ...defaultTheme,
+const customTheme = createTheme({
   components: {
-    ...defaultTheme.components,
-    Button: 'custom-button-class',
+    Button: {
+      'a2-bgc-p40': true,  // Custom button background
+      'a2-br-4': true,     // Larger border radius
+    },
+    Card: {
+      'a2-shadow-lg': true, // Larger shadow
+    },
   },
-};
+});
 
 function App() {
   return (
-    <A2UIProvider theme={customTheme}>
+    <ThemeProvider theme={customTheme}>
       <YourApp />
-    </A2UIProvider>
+    </ThemeProvider>
   );
 }
 ```
 
+### 🎨 Style System
+
+A2UI uses a standalone CSS utility class system that doesn't depend on Tailwind CSS.
+
+#### Class Naming Convention
+
+All style classes use the `a2-` prefix:
+
+| Category | Prefix | Examples |
+|----------|--------|----------|
+| Layout | `a2-p-*`, `a2-m-*`, `a2-gap-*` | `a2-p-4`, `a2-mx-2`, `a2-gap-2` |
+| Display | `a2-dsp-*` | `a2-dsp-flex`, `a2-dsp-grid` |
+| Flex | `a2-flex-*`, `a2-al-*`, `a2-jc-*` | `a2-flex-1`, `a2-al-center` |
+| Colors | `a2-c-*`, `a2-bgc-*`, `a2-bc-*` | `a2-c-p50`, `a2-bgc-n0` |
+| Typography | `a2-font-*`, `a2-fw-*`, `a2-text-*` | `a2-font-sans`, `a2-fw-500` |
+| Border | `a2-br-*`, `a2-bw-*`, `a2-bs-*` | `a2-br-4`, `a2-bw-1` |
+| Behavior | `a2-opacity-*`, `a2-shadow-*` | `a2-opacity-80`, `a2-shadow-md` |
+
+#### Color System
+
+Uses OKLCH color space with 6 palettes:
+
+| Prefix | Description |
+|--------|-------------|
+| `p` | Primary - Main color |
+| `s` | Secondary - Secondary color |
+| `t` | Tertiary - Third color |
+| `n` | Neutral - Gray tones |
+| `nv` | Neutral Variant - Neutral variant |
+| `e` | Error - Error color |
+
+Color scale: 0 (lightest) ~ 100 (darkest)
+
+```css
+/* Examples */
+.a2-c-p50 { /* Primary 50% */ }
+.a2-bgc-n0 { /* White background */ }
+.a2-bc-e40 { /* Error color border */ }
+```
+
+#### Manual Style Injection
+
+For SSR or special scenarios:
+
+```tsx
+import { getStylesCSS } from '@zhama/a2ui';
+
+// Get complete CSS string
+const css = getStylesCSS();
+
+// Inject into head
+const style = document.createElement('style');
+style.textContent = css;
+document.head.appendChild(style);
+```
+
+
 ### 🧩 Available Components
 
 | Component | Description | Use Case |
@@ -391,7 +446,6 @@ This project is licensed under the MIT License - see the [LICENSE](./LICENSE) fi
 
 - Inspired by [Google's A2UI Protocol](https://developers.google.com/assistant/conversational/a2ui)
 - Built with [React](https://reactjs.org/) and [TypeScript](https://www.typescriptlang.org/)
-- Styled with [Tailwind CSS](https://tailwindcss.com/)
 
 ### 📞 Support
 
@@ -437,7 +491,7 @@ Any LLM that can output structured JSON works. We've tested with:
 <details>
 <summary><b>Can I customize the styling?</b></summary>
 
-Yes! A2UI uses Tailwind CSS and provides a theme system. You can override default styles through the A2UIProvider theme prop or by modifying Tailwind classes.
+Yes! A2UI uses a standalone CSS utility class system with the `a2-` prefix. You can override default styles through the ThemeProvider theme prop or by overriding CSS variables.
 
 </details>
 
@@ -507,7 +561,9 @@ npm run dev
 
 - 🤖 **AI 优先设计** - 专为 AI 驱动的 UI 生成而构建
 - 📦 **完整协议支持** - 完整实现 A2UI 协议规范
-- 🎨 **主题化** - 基于 Tailwind CSS 的可定制主题系统
+- 🎨 **独立样式系统** - 不依赖 Tailwind，自带完整的 `a2-` 前缀 CSS 工具类
+- 🔒 **样式隔离** - 使用 `a2-` 前缀避免与宿主应用冲突
+- 🌓 **自动暗色模式** - 使用 CSS `light-dark()` 函数
 - 🧩 **丰富组件** - 全面的 UI 组件集（Text、Button、Card、List、TextField 等）
 - 🔌 **可扩展** - 支持自定义组件注册
 - 📱 **响应式** - 移动优先的响应式设计
@@ -536,34 +592,27 @@ npm install react react-dom react-markdown
 
 #### 基础设置
 
-1. **配置 Tailwind CSS**
+1. **使用 StyleProvider 和 ThemeProvider 包裹应用**
 
-```js
-// tailwind.config.js
-import a2uiPreset from '@zhama/a2ui/tailwind.preset';
+```tsx
+import { StyleProvider, ThemeProvider, A2UIRoot } from '@zhama/a2ui';
 
-export default {
-  presets: [a2uiPreset],
-  content: [
-    './src/**/*.{js,ts,jsx,tsx}',
-    './node_modules/@zhama/a2ui/**/*.{js,ts,jsx,tsx}',
-  ],
-};
+function App() {
+  return (
+    <StyleProvider>
+      <ThemeProvider>
+        <div className="a2ui-root">
+          {/* 你的 A2UI 组件 */}
+        </div>
+      </ThemeProvider>
+    </StyleProvider>
+  );
+}
 ```
 
-2. **导入 CSS 变量**
-
-```css
-/* globals.css */
-@import '@zhama/a2ui/styles/a2ui-variables.css';
-@import '@zhama/a2ui/styles/a2ui.css';
-
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
-```
+> 💡 **注意：** `StyleProvider` 会自动注入 A2UI 的 CSS 工具类。`a2ui-root` 类会应用基础样式和 CSS 变量。
 
-3. **使用 A2UIRoot 组件**
+2. **使用 A2UIRoot 组件**
 
 ```tsx
 import { A2UIRoot } from '@zhama/a2ui';
@@ -645,26 +694,86 @@ import { A2UIProvider, useA2UI } from '@zhama/a2ui/context';
 A2UI 自带可定制的主题系统：
 
 ```tsx
-import { A2UIProvider } from '@zhama/a2ui/context';
-import { defaultTheme } from '@zhama/a2ui/styles/default-theme';
+import { ThemeProvider, createTheme } from '@zhama/a2ui';
 
-const customTheme = {
-  ...defaultTheme,
+const customTheme = createTheme({
   components: {
-    ...defaultTheme.components,
-    Button: 'custom-button-class',
+    Button: {
+      'a2-bgc-p40': true,  // 自定义按钮背景
+      'a2-br-4': true,     // 更大圆角
+    },
+    Card: {
+      'a2-shadow-lg': true, // 更大阴影
+    },
   },
-};
+});
 
 function App() {
   return (
-    <A2UIProvider theme={customTheme}>
+    <ThemeProvider theme={customTheme}>
       <YourApp />
-    </A2UIProvider>
+    </ThemeProvider>
   );
 }
 ```
 
+### 🎨 样式系统
+
+A2UI 使用独立的 CSS 工具类系统，不依赖 Tailwind CSS。
+
+#### 类名规范
+
+所有样式类使用 `a2-` 前缀：
+
+| 类别 | 前缀 | 示例 |
+|------|------|------|
+| Layout | `a2-p-*`, `a2-m-*`, `a2-gap-*` | `a2-p-4`, `a2-mx-2`, `a2-gap-2` |
+| Display | `a2-dsp-*` | `a2-dsp-flex`, `a2-dsp-grid` |
+| Flex | `a2-flex-*`, `a2-al-*`, `a2-jc-*` | `a2-flex-1`, `a2-al-center` |
+| Colors | `a2-c-*`, `a2-bgc-*`, `a2-bc-*` | `a2-c-p50`, `a2-bgc-n0` |
+| Typography | `a2-font-*`, `a2-fw-*`, `a2-text-*` | `a2-font-sans`, `a2-fw-500` |
+| Border | `a2-br-*`, `a2-bw-*`, `a2-bs-*` | `a2-br-4`, `a2-bw-1` |
+| Behavior | `a2-opacity-*`, `a2-shadow-*` | `a2-opacity-80`, `a2-shadow-md` |
+
+#### 颜色系统
+
+使用 OKLCH 色彩空间，支持 6 个调色板：
+
+| 前缀 | 说明 |
+|------|------|
+| `p` | Primary - 主色调 |
+| `s` | Secondary - 次要色 |
+| `t` | Tertiary - 第三色 |
+| `n` | Neutral - 中性灰色 |
+| `nv` | Neutral Variant - 中性变体 |
+| `e` | Error - 错误色 |
+
+色阶：0 (最亮) ~ 100 (最暗)
+
+```css
+/* 示例 */
+.a2-c-p50 { /* 主色 50% */ }
+.a2-bgc-n0 { /* 白色背景 */ }
+.a2-bc-e40 { /* 错误色边框 */ }
+```
+
+#### 手动注入样式
+
+对于 SSR 或特殊场景：
+
+```tsx
+import { getStylesCSS } from '@zhama/a2ui';
+
+// 获取完整 CSS 字符串
+const css = getStylesCSS();
+
+// 注入到 head
+const style = document.createElement('style');
+style.textContent = css;
+document.head.appendChild(style);
+```
+
+
 ### 🧩 可用组件
 
 | 组件 | 描述 | 使用场景 |
@@ -824,7 +933,6 @@ zhama/a2ui/
 
 - 受 [Google 的 A2UI 协议](https://developers.google.com/assistant/conversational/a2ui)启发
 - 使用 [React](https://reactjs.org/) 和 [TypeScript](https://www.typescriptlang.org/) 构建
-- 使用 [Tailwind CSS](https://tailwindcss.com/) 样式化
 
 ### 📞 支持
 
@@ -869,7 +977,7 @@ A2UI 是协议优先，专为 AI 生成设计。shadcn/ui 是开发者优先，
 <details>
 <summary><b>可以自定义样式吗？</b></summary>
 
-可以！A2UI 使用 Tailwind CSS 并提供主题系统。你可以通过 A2UIProvider 的 theme 属性覆盖默认样式，或修改 Tailwind 类。
+可以！A2UI 使用独立的 `a2-` 前缀 CSS 工具类系统。你可以通过 ThemeProvider 的 theme 属性覆盖默认样式，或覆盖 CSS 变量。
 
 </details>
 
@@ -889,3 +997,4 @@ Made with ❤️ by [Zhama AI](https://zhama.com)
 **如果你觉得有帮助，请给个 Star ⭐！**
 
 </div>
+

package/dist/{a2ui-CnaCcq4c.d.ts → a2ui-CZYqbeoz.d.ts}

@@ -1,4 +1,5 @@
-import { A as Action, E as AnyComponentNode } from './types-CtrG7MJe.js';
+import { Action } from '@zhama/a2ui-core';
+import { A as AnyComponentNode } from './types-Csi2jaoN.js';
 
 /**
  * A2UI Base Event Types

package/dist/{a2ui-vyxwZCoa.d.cts → a2ui-Dpl-E-Do.d.cts}

@@ -1,4 +1,5 @@
-import { A as Action, E as AnyComponentNode } from './types-CtrG7MJe.cjs';
+import { Action } from '@zhama/a2ui-core';
+import { A as AnyComponentNode } from './types-Csi2jaoN.cjs';
 
 /**
  * A2UI Base Event Types