@ctgh/a2ui-arco 0.2.0

package/README.md

@@ -0,0 +1,58 @@
+# @ctgh/a2ui-arco
+
+[A2UI](https://a2ui.org) Basic Catalog renderer using [Arco Design Vue](https://arco.design/vue).
+
+Uses the same catalog schema as `@ctgh/a2ui-vue` (headless HTML); only the render layer is swapped to Arco components.
+
+## Install
+
+```bash
+npm install @ctgh/a2ui-arco @arco-design/web-vue vue
+```
+
+Import Arco styles in your app entry:
+
+```ts
+import '@arco-design/web-vue/dist/arco.css';
+```
+
+## Usage
+
+```ts
+import { createApp } from 'vue';
+import { A2uiArcoPlugin, arcoCatalog, MessageProcessor } from '@ctgh/a2ui-arco';
+import '@arco-design/web-vue/dist/arco.css';
+
+const app = createApp(App);
+app.use(A2uiArcoPlugin);
+
+const processor = new MessageProcessor([arcoCatalog]);
+processor.processMessages([/* A2UI messages with basic catalogId */]);
+```
+
+Optional theme wrapper:
+
+```vue
+<script setup lang="ts">
+import { A2uiArcoProvider, A2uiSurface, arcoCatalog, MessageProcessor } from '@ctgh/a2ui-arco';
+</script>
+
+<template>
+  <A2uiArcoProvider theme="light" primary-color="#165DFF">
+    <A2uiSurface :surface="surface" />
+  </A2uiArcoProvider>
+</template>
+```
+
+## Component coverage
+
+| A2UI | Renderer |
+| --- | --- |
+| Button, TextField, CheckBox, Modal, Tabs | Arco |
+| ChoicePicker, Slider, DateTimeInput | Arco |
+| Row, Column, Card, Divider, Text, Icon | Arco |
+| Image, Video, AudioPlayer, List | Headless (`@ctgh/a2ui-vue`) |
+
+## Playground
+
+Monorepo playground → **Arco** tab compares gallery examples with Arco styling.