@claw-link/clom-renderer 1.0.0 → 1.0.1

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 ClawLink
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,112 @@
+# clom-renderer
+
+React component library for rendering [CLOM protocol](https://openclaw.ai) interactions. Pass any JSON output from a CLOM agent directly to `<ClomRenderer>` and it renders the appropriate interactive UI.
+
+[![npm version](https://img.shields.io/npm/v/clom-renderer)](https://www.npmjs.com/package/clom-renderer)
+[![license](https://img.shields.io/npm/l/clom-renderer)](./LICENSE)
+
+## Overview
+
+CLOM (ClawLink Local Orchestration Module) is an AI agent protocol that returns structured JSON describing interactive UI — forms, date pickers, OTP inputs, product grids, appointment slots, and more. `clom-renderer` sits on the client side: it receives that JSON and renders the right React component. No API calls, no configuration — just JSON in, UI out.
+
+```
+CLOM agent (server) → JSON output → [request/response layer] → <ClomRenderer data={...} />
+```
+
+## Install
+
+```bash
+npm install clom-renderer
+```
+
+## Usage
+
+```tsx
+import { ClomRenderer } from 'clom-renderer';
+import 'clom-renderer/style.css';
+
+<ClomRenderer
+  data={clomOutput}           // raw JSON from CLOM
+  onSubmit={(text) => send(text)}  // called with user's response as plain text
+  locked={false}              // true = already submitted, renders nothing
+/>
+```
+
+### Props
+
+| Prop | Type | Description |
+|------|------|-------------|
+| `data` | `ClomOutput` | Raw CLOM JSON output, discriminated by `interaction` field |
+| `onSubmit` | `(text: string) => void` | Called when user submits — receives a formatted plain-text summary |
+| `locked` | `boolean` | When `true`, component renders nothing (prevents re-submission) |
+
+## Supported interaction types
+
+| `interaction` | UI rendered | Submits |
+|---|---|---|
+| `form` | Multi-field form | Line-separated `label: value` |
+| `address` | Address form with prefill support | Line-separated `label: value` |
+| `select` | Single-choice button group | Selected option text |
+| `multiselect` | Checkbox list | Comma-separated selections |
+| `date_picker` | Date input with min/max | `label: YYYY-MM-DD` |
+| `otp` | Auto-advancing digit inputs with paste | `label: 123456` |
+| `rating` | Star rating with hover labels | `label: 4/5 (Great)` |
+| `file_upload` | Drag-and-drop file zone with size validation | `label: filename.pdf` |
+| `card_grid` | Responsive product/service card grid | `Selected: card title` |
+| `confirmation_card` | Key-value summary + action buttons | Action label |
+| `timeline` | Read-only status timeline | _(display only)_ |
+| `slot_picker` | Appointment slot grid | `Selected slot: label (datetime)` |
+| `data_table` | Read-only scrollable table | _(display only)_ |
+| `stepper` | Multi-step form wizard with progress dots | All step fields combined |
+
+## Theming
+
+The component uses CSS custom properties. When used inside a ClawLink app the host app's existing variables are picked up automatically. For standalone use, a dark theme is applied by default. Override any `--clom-*` variable on `:root` or a parent element:
+
+```css
+:root {
+  --clom-bg:         #ffffff;
+  --clom-surface:    #f5f5f5;
+  --clom-border:     #e0e0e0;
+  --clom-text:       #111111;
+  --clom-text-muted: #666666;
+  --clom-accent:     #6366f1;
+  --clom-accent2:    #8b5cf6;
+}
+```
+
+## TypeScript
+
+Full types are exported:
+
+```ts
+import type {
+  ClomOutput,
+  InteractionSpec,
+  FormField,
+  InteractionCard,
+  TimelineStep,
+  StepperStep,
+} from 'clom-renderer';
+```
+
+`ClomOutput` is `InteractionSpec & Record<string, unknown>` — CLOM can attach any custom metadata fields alongside the standard ones; they are ignored by the renderer.
+
+## Custom metadata
+
+Since CLOM (generator) and `clom-renderer` (consumer) are designed together, you can freely add custom fields to the JSON for tracking or context purposes:
+
+```json
+{
+  "interaction": "form",
+  "fields": [...],
+  "_session_ref": "abc123",
+  "_tenant_id": "xyz"
+}
+```
+
+The renderer ignores unknown fields and only uses what it knows.
+
+## License
+
+MIT — see [LICENSE](./LICENSE)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@claw-link/clom-renderer",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "description": "React component library for rendering CLOM protocol interactions",
   "type": "module",
   "main": "./dist/index.cjs",
@@ -14,8 +14,11 @@
     },
     "./style.css": "./dist/style.css"
   },
+  "license": "MIT",
   "files": [
-    "dist"
+    "dist",
+    "LICENSE",
+    "README.md"
   ],
   "scripts": {
     "build": "vite build",