@syntrologie/runtime-sdk 2.0.0 → 2.0.1-canary.1
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.
- package/CAPABILITIES.md +232 -138
- package/README.md +76 -57
- package/dist/RuntimeProvider.d.ts +6 -6
- package/dist/RuntimeProvider.js +2 -3
- package/dist/RuntimeProvider.js.map +1 -1
- package/dist/SmartCanvasApp.d.ts +8 -8
- package/dist/SmartCanvasApp.js +16 -18
- package/dist/SmartCanvasApp.js.map +1 -1
- package/dist/SmartCanvasElement.d.ts +5 -5
- package/dist/SmartCanvasElement.js +13 -13
- package/dist/SmartCanvasElement.js.map +1 -1
- package/dist/SmartCanvasPortal.d.ts +2 -2
- package/dist/SmartCanvasPortal.js +2 -2
- package/dist/actions/ActionEngine.d.ts +1 -1
- package/dist/actions/ActionEngine.js +24 -24
- package/dist/actions/ActionEngine.js.map +1 -1
- package/dist/actions/executors/index.d.ts +6 -6
- package/dist/actions/executors/index.js +22 -22
- package/dist/actions/executors/index.js.map +1 -1
- package/dist/actions/executors/tour.d.ts +1 -1
- package/dist/actions/executors/tour.js +19 -19
- package/dist/actions/executors/tour.js.map +1 -1
- package/dist/actions/index.d.ts +5 -5
- package/dist/actions/index.js +3 -3
- package/dist/actions/index.js.map +1 -1
- package/dist/actions/types.d.ts +37 -37
- package/dist/actions/validation.d.ts +1 -1
- package/dist/actions/validation.js +195 -196
- package/dist/actions/validation.js.map +1 -1
- package/dist/antiFlicker.js +1 -1
- package/dist/api.d.ts +10 -10
- package/dist/api.js +11 -11
- package/dist/api.js.map +1 -1
- package/dist/apps/AppContext.d.ts +2 -2
- package/dist/apps/AppContext.js +1 -1
- package/dist/apps/AppContext.js.map +1 -1
- package/dist/apps/AppLoader.d.ts +2 -2
- package/dist/apps/AppLoader.js +24 -24
- package/dist/apps/AppLoader.js.map +1 -1
- package/dist/apps/AppRegistry.d.ts +2 -2
- package/dist/apps/AppRegistry.js +28 -28
- package/dist/apps/AppRegistry.js.map +1 -1
- package/dist/apps/adaptive-chatbot/index.js +7 -0
- package/dist/apps/adaptive-chatbot/index.js.map +7 -0
- package/dist/apps/examples/gamification-app.example.d.ts +3 -3
- package/dist/apps/examples/gamification-app.example.js +94 -94
- package/dist/apps/examples/gamification-app.example.js.map +1 -1
- package/dist/apps/faq/index.js.map +3 -3
- package/dist/apps/gamification/index.js.map +3 -3
- package/dist/apps/index.d.ts +10 -10
- package/dist/apps/index.js +6 -6
- package/dist/apps/nav/index.js.map +3 -3
- package/dist/apps/types.d.ts +10 -10
- package/dist/blocks/data/ComparisonBlock.d.ts +1 -1
- package/dist/blocks/data/ComparisonBlock.js +40 -40
- package/dist/blocks/data/ComparisonBlock.js.map +1 -1
- package/dist/blocks/data/StatsBlock.d.ts +1 -1
- package/dist/blocks/data/StatsBlock.js +41 -41
- package/dist/blocks/data/StatsBlock.js.map +1 -1
- package/dist/blocks/data/index.d.ts +2 -2
- package/dist/blocks/data/index.js +2 -2
- package/dist/blocks/index.d.ts +5 -5
- package/dist/blocks/index.js +29 -29
- package/dist/blocks/index.js.map +1 -1
- package/dist/blocks/interactive/ChecklistBlock.d.ts +1 -1
- package/dist/blocks/interactive/ChecklistBlock.js +60 -60
- package/dist/blocks/interactive/ChecklistBlock.js.map +1 -1
- package/dist/blocks/interactive/RatingBlock.d.ts +1 -1
- package/dist/blocks/interactive/RatingBlock.js +75 -65
- package/dist/blocks/interactive/RatingBlock.js.map +1 -1
- package/dist/blocks/interactive/index.d.ts +2 -2
- package/dist/blocks/interactive/index.js +2 -2
- package/dist/blocks/notification/NotificationBlock.d.ts +2 -2
- package/dist/blocks/notification/NotificationBlock.js +67 -63
- package/dist/blocks/notification/NotificationBlock.js.map +1 -1
- package/dist/blocks/notification/index.d.ts +1 -1
- package/dist/blocks/notification/index.js +1 -1
- package/dist/bootstrap.d.ts +10 -10
- package/dist/bootstrap.js +54 -40
- package/dist/bootstrap.js.map +1 -1
- package/dist/components/ShadowCanvasOverlay.d.ts +6 -6
- package/dist/components/ShadowCanvasOverlay.js +117 -107
- package/dist/components/ShadowCanvasOverlay.js.map +1 -1
- package/dist/components/TileCard.d.ts +5 -5
- package/dist/components/TileCard.js +174 -143
- package/dist/components/TileCard.js.map +1 -1
- package/dist/components/TileWheel.d.ts +3 -3
- package/dist/components/TileWheel.js +7 -7
- package/dist/components/TileWheel.js.map +1 -1
- package/dist/configFetcher.d.ts +2 -2
- package/dist/configFetcher.js +10 -7
- package/dist/configFetcher.js.map +1 -1
- package/dist/context/ContextManager.d.ts +3 -3
- package/dist/context/ContextManager.js +15 -15
- package/dist/context/ContextManager.js.map +1 -1
- package/dist/context/index.d.ts +4 -4
- package/dist/context/index.js +3 -3
- package/dist/context/schema.d.ts +1 -1
- package/dist/context/schema.js +1 -1
- package/dist/decisions/engine.d.ts +5 -5
- package/dist/decisions/engine.js +13 -13
- package/dist/decisions/index.d.ts +6 -6
- package/dist/decisions/index.js +5 -5
- package/dist/decisions/schema.d.ts +1 -1
- package/dist/decisions/schema.js +20 -20
- package/dist/decisions/strategies/rules.d.ts +1 -1
- package/dist/decisions/strategies/rules.js +24 -24
- package/dist/decisions/strategies/rules.js.map +1 -1
- package/dist/decisions/strategies/score.d.ts +1 -1
- package/dist/decisions/strategies/score.js +3 -3
- package/dist/decisions/types.d.ts +19 -19
- package/dist/editorLoader.js +20 -20
- package/dist/editorLoader.js.map +1 -1
- package/dist/events/EventBus.d.ts +3 -3
- package/dist/events/EventBus.js +5 -7
- package/dist/events/EventBus.js.map +1 -1
- package/dist/events/index.d.ts +6 -6
- package/dist/events/index.js +5 -5
- package/dist/events/normalizers/canvas.d.ts +2 -2
- package/dist/events/normalizers/canvas.js +3 -3
- package/dist/events/normalizers/canvas.js.map +1 -1
- package/dist/events/normalizers/posthog.d.ts +1 -1
- package/dist/events/normalizers/posthog.js +35 -27
- package/dist/events/normalizers/posthog.js.map +1 -1
- package/dist/events/schema.d.ts +1 -1
- package/dist/events/schema.js +2 -2
- package/dist/events/types.d.ts +1 -1
- package/dist/events/types.js +27 -27
- package/dist/experiments/adapters/growthbook.d.ts +4 -4
- package/dist/experiments/adapters/growthbook.js +5 -5
- package/dist/experiments/adapters/growthbook.js.map +1 -1
- package/dist/experiments/index.d.ts +3 -3
- package/dist/experiments/index.js +1 -1
- package/dist/experiments/registry.d.ts +2 -2
- package/dist/experiments/registry.js +2 -2
- package/dist/experiments/types.d.ts +5 -1
- package/dist/fetchers/cdnFetcher.d.ts +1 -1
- package/dist/fetchers/cdnFetcher.js +4 -8
- package/dist/fetchers/cdnFetcher.js.map +1 -1
- package/dist/fetchers/experimentsFetcher.d.ts +2 -2
- package/dist/fetchers/experimentsFetcher.js +7 -7
- package/dist/fetchers/experimentsFetcher.js.map +1 -1
- package/dist/fetchers/index.d.ts +3 -3
- package/dist/fetchers/index.js +2 -2
- package/dist/fetchers/index.js.map +1 -1
- package/dist/fetchers/registry.d.ts +1 -1
- package/dist/fetchers/registry.js +4 -4
- package/dist/fetchers/types.d.ts +1 -1
- package/dist/hooks/useCanvasOverlays.d.ts +5 -5
- package/dist/hooks/useCanvasOverlays.js +15 -13
- package/dist/hooks/useCanvasOverlays.js.map +1 -1
- package/dist/hooks/useHostPatches.d.ts +2 -2
- package/dist/hooks/useHostPatches.js +8 -8
- package/dist/hooks/useHostPatches.js.map +1 -1
- package/dist/hooks/useShadowCanvasConfig.d.ts +3 -3
- package/dist/hooks/useShadowCanvasConfig.js +5 -2
- package/dist/hooks/useShadowCanvasConfig.js.map +1 -1
- package/dist/hostPatcher/core/patcher.d.ts +1 -1
- package/dist/hostPatcher/core/patcher.js +18 -9
- package/dist/hostPatcher/core/patcher.js.map +1 -1
- package/dist/hostPatcher/core/sanitizer.js +24 -3
- package/dist/hostPatcher/core/sanitizer.js.map +1 -1
- package/dist/hostPatcher/policy/defaultPolicy.js +15 -5
- package/dist/hostPatcher/policy/defaultPolicy.js.map +1 -1
- package/dist/hostPatcher/utils/anchors.js +4 -6
- package/dist/hostPatcher/utils/anchors.js.map +1 -1
- package/dist/index.d.ts +32 -32
- package/dist/index.js +29 -29
- package/dist/index.js.map +1 -1
- package/dist/metrics/index.d.ts +1 -1
- package/dist/metrics/index.js +1 -1
- package/dist/metrics/sessionMetrics.d.ts +1 -1
- package/dist/metrics/sessionMetrics.js +6 -6
- package/dist/overlays/fetcher.d.ts +2 -2
- package/dist/overlays/fetcher.js +4 -4
- package/dist/overlays/recipeRegistry.js +2 -2
- package/dist/overlays/recipeRegistry.js.map +1 -1
- package/dist/overlays/runtime/anchor/resolve.js +1 -1
- package/dist/overlays/runtime/anchor/resolve.js.map +1 -1
- package/dist/overlays/runtime/index.d.ts +7 -7
- package/dist/overlays/runtime/index.js +7 -7
- package/dist/overlays/runtime/overlay/highlight.js +39 -39
- package/dist/overlays/runtime/overlay/highlight.js.map +1 -1
- package/dist/overlays/runtime/overlay/modal.js +5 -5
- package/dist/overlays/runtime/overlay/modal.js.map +1 -1
- package/dist/overlays/runtime/overlay/root.js +1 -1
- package/dist/overlays/runtime/overlay/runner.js +70 -23
- package/dist/overlays/runtime/overlay/runner.js.map +1 -1
- package/dist/overlays/runtime/overlay/tooltip.d.ts +1 -1
- package/dist/overlays/runtime/overlay/tooltip.js +10 -10
- package/dist/overlays/runtime/overlay/tooltip.js.map +1 -1
- package/dist/overlays/runtime/utils/dom.js +4 -1
- package/dist/overlays/runtime/utils/dom.js.map +1 -1
- package/dist/overlays/schema.js +12 -8
- package/dist/overlays/schema.js.map +1 -1
- package/dist/react.d.ts +7 -7
- package/dist/react.js +4 -4
- package/dist/react.js.map +1 -1
- package/dist/render/RenderContext.d.ts +2 -2
- package/dist/render/RenderContext.js +5 -5
- package/dist/render/RenderContext.js.map +1 -1
- package/dist/render/index.d.ts +3 -3
- package/dist/render/index.js +1 -1
- package/dist/render/types.d.ts +4 -4
- package/dist/runtime.d.ts +12 -12
- package/dist/runtime.js +20 -20
- package/dist/runtime.js.map +1 -1
- package/dist/smart-canvas.esm.js +16 -16
- package/dist/smart-canvas.esm.js.map +4 -4
- package/dist/smart-canvas.js +644 -491
- package/dist/smart-canvas.js.map +4 -4
- package/dist/smart-canvas.min.js +15 -15
- package/dist/smart-canvas.min.js.map +4 -4
- package/dist/state/StateStore.d.ts +1 -1
- package/dist/state/StateStore.js +9 -9
- package/dist/state/StateStore.js.map +1 -1
- package/dist/state/helpers/cooldowns.d.ts +1 -1
- package/dist/state/helpers/cooldowns.js +1 -1
- package/dist/state/helpers/dismissals.d.ts +1 -1
- package/dist/state/helpers/dismissals.js +1 -1
- package/dist/state/helpers/frequency.d.ts +1 -1
- package/dist/state/helpers/frequency.js +1 -1
- package/dist/state/index.d.ts +4 -4
- package/dist/state/index.js +3 -3
- package/dist/state/schema.d.ts +1 -1
- package/dist/state/schema.js +1 -1
- package/dist/store/example.js +13 -13
- package/dist/store/example.js.map +1 -1
- package/dist/store/mini-effector.js +6 -8
- package/dist/store/mini-effector.js.map +1 -1
- package/dist/surfaces/Surfaces.d.ts +1 -1
- package/dist/surfaces/Surfaces.js +25 -25
- package/dist/surfaces/Surfaces.js.map +1 -1
- package/dist/surfaces/index.d.ts +4 -4
- package/dist/surfaces/index.js +3 -3
- package/dist/surfaces/positioning.d.ts +2 -2
- package/dist/surfaces/positioning.js +74 -77
- package/dist/surfaces/positioning.js.map +1 -1
- package/dist/surfaces/types.d.ts +9 -9
- package/dist/surfaces/types.js +7 -7
- package/dist/surfaces/types.js.map +1 -1
- package/dist/telemetry/adapters/noop.d.ts +12 -0
- package/dist/telemetry/adapters/noop.js +42 -0
- package/dist/telemetry/adapters/noop.js.map +1 -0
- package/dist/telemetry/adapters/posthog.d.ts +2 -2
- package/dist/telemetry/adapters/posthog.js +29 -16
- package/dist/telemetry/adapters/posthog.js.map +1 -1
- package/dist/telemetry/index.d.ts +4 -3
- package/dist/telemetry/index.js +3 -2
- package/dist/telemetry/index.js.map +1 -1
- package/dist/telemetry/registry.d.ts +2 -2
- package/dist/telemetry/registry.js +4 -2
- package/dist/telemetry/registry.js.map +1 -1
- package/dist/telemetry/types.d.ts +1 -1
- package/dist/theme/ThemeProvider.d.ts +2 -2
- package/dist/theme/ThemeProvider.js +21 -21
- package/dist/theme/ThemeProvider.js.map +1 -1
- package/dist/theme/defaultTheme.d.ts +2 -2
- package/dist/theme/defaultTheme.js +111 -111
- package/dist/theme/defaultTheme.js.map +1 -1
- package/dist/theme/extractHostTheme.d.ts +1 -1
- package/dist/theme/extractHostTheme.js +42 -44
- package/dist/theme/extractHostTheme.js.map +1 -1
- package/dist/theme/index.d.ts +5 -5
- package/dist/theme/index.js +3 -3
- package/dist/theme/index.js.map +1 -1
- package/dist/theme/types.d.ts +2 -2
- package/dist/token.js +3 -6
- package/dist/token.js.map +1 -1
- package/dist/types-only.d.ts +1 -1
- package/dist/types.d.ts +43 -43
- package/dist/widgets/WidgetRegistry.d.ts +2 -2
- package/dist/widgets/WidgetRegistry.js +11 -11
- package/dist/widgets/WidgetRegistry.js.map +1 -1
- package/dist/widgets/index.d.ts +2 -2
- package/dist/widgets/index.js +1 -1
- package/dist/widgets/index.js.map +1 -1
- package/package.json +4 -2
- package/schema/canvas-config.schema.json +51 -7
- package/schema/runtime-context.schema.json +1 -5
package/CAPABILITIES.md
CHANGED
|
@@ -67,6 +67,7 @@ Change a page header when the element is visible:
|
|
|
67
67
|
|
|
68
68
|
The SDK includes the following adaptive packages, each providing specific capabilities:
|
|
69
69
|
|
|
70
|
+
- [@syntrologie/app-chatbot](#syntrologieapp-chatbot)
|
|
70
71
|
- [@syntrologie/app-content](#syntrologieapp-content)
|
|
71
72
|
- [@syntrologie/app-faq](#syntrologieapp-faq)
|
|
72
73
|
- [@syntrologie/app-gamification](#syntrologieapp-gamification)
|
|
@@ -74,6 +75,85 @@ The SDK includes the following adaptive packages, each providing specific capabi
|
|
|
74
75
|
- [@syntrologie/app-navigation](#syntrologieapp-navigation)
|
|
75
76
|
- [@syntrologie/app-overlays](#syntrologieapp-overlays)
|
|
76
77
|
|
|
78
|
+
---
|
|
79
|
+
|
|
80
|
+
# @syntrologie/app-chatbot
|
|
81
|
+
|
|
82
|
+
AI chat assistant widget with action execution capabilities.
|
|
83
|
+
|
|
84
|
+
## Widgets
|
|
85
|
+
|
|
86
|
+
### adaptive-chatbot:assistant
|
|
87
|
+
|
|
88
|
+
Mounts an AI-powered chat assistant that connects to a backend LLM endpoint. The assistant can parse action instructions from the LLM response and execute them on the page via the runtime's ActionEngine.
|
|
89
|
+
|
|
90
|
+
**Tile config example:**
|
|
91
|
+
|
|
92
|
+
```json
|
|
93
|
+
{
|
|
94
|
+
"id": "chatbot-assistant",
|
|
95
|
+
"title": "Ask Assistant",
|
|
96
|
+
"content": {
|
|
97
|
+
"type": "custom",
|
|
98
|
+
"component": "adaptive-chatbot:assistant",
|
|
99
|
+
"props": {
|
|
100
|
+
"backendUrl": "/api/chat/message",
|
|
101
|
+
"mlflowRunId": "abc123",
|
|
102
|
+
"greeting": "Hi! How can I help?"
|
|
103
|
+
}
|
|
104
|
+
},
|
|
105
|
+
"size": "full",
|
|
106
|
+
"defaultExpanded": true
|
|
107
|
+
}
|
|
108
|
+
```
|
|
109
|
+
|
|
110
|
+
### Config Props
|
|
111
|
+
|
|
112
|
+
| Property | Type | Required | Default | Description |
|
|
113
|
+
| ------------- | ------ | -------- | --------------------- | --------------------------------------- |
|
|
114
|
+
| `backendUrl` | string | Yes | — | URL for the chat API endpoint |
|
|
115
|
+
| `mlflowRunId` | string | No | — | MLflow run ID for experiment tracking |
|
|
116
|
+
| `greeting` | string | No | "Hi! How can I help?" | Initial greeting message |
|
|
117
|
+
| `maxHistory` | number | No | 20 | Max messages sent as history to backend |
|
|
118
|
+
|
|
119
|
+
## Action Execution
|
|
120
|
+
|
|
121
|
+
The chatbot does **not** define its own action kinds. Instead, it parses JSON action blocks from the LLM response and executes them via `runtime.actions.applyBatch()`. This means the chatbot can trigger any action kind registered in the runtime (highlights, tooltips, text changes, navigation, tours, etc.).
|
|
122
|
+
|
|
123
|
+
### LLM Response Format
|
|
124
|
+
|
|
125
|
+
The backend returns a text reply that may contain embedded JSON action blocks in fenced code blocks:
|
|
126
|
+
|
|
127
|
+
```
|
|
128
|
+
Here's what I found. Let me highlight the pricing section for you.
|
|
129
|
+
|
|
130
|
+
\`\`\`json
|
|
131
|
+
{"kind": "overlays:highlight", "anchorId": "pricing-section"}
|
|
132
|
+
\`\`\`
|
|
133
|
+
|
|
134
|
+
Is there anything else you'd like to know?
|
|
135
|
+
```
|
|
136
|
+
|
|
137
|
+
- JSON blocks with a `kind` field are extracted as actions and removed from display text
|
|
138
|
+
- JSON blocks without `kind` are left in the display text as-is
|
|
139
|
+
- Multiple action blocks can appear in a single response
|
|
140
|
+
- Actions with unknown kinds are silently ignored by the ActionEngine
|
|
141
|
+
|
|
142
|
+
## Authentication
|
|
143
|
+
|
|
144
|
+
The widget reads auth credentials from the browser:
|
|
145
|
+
|
|
146
|
+
- **JWT**: `stytch_session_jwt` cookie
|
|
147
|
+
- **Workspace ID**: `syntrologie_workspace_id` from localStorage
|
|
148
|
+
- Headers: `Authorization: Bearer <jwt>` + `X-Workspace-Id: <id>`
|
|
149
|
+
|
|
150
|
+
## Events
|
|
151
|
+
|
|
152
|
+
| Event | Props | Description |
|
|
153
|
+
| ------------------------- | ---------------------------- | --------------------------------- |
|
|
154
|
+
| `chatbot.actions_applied` | `count`, `kinds[]`, `tileId` | Emitted when actions are executed |
|
|
155
|
+
|
|
156
|
+
|
|
77
157
|
---
|
|
78
158
|
|
|
79
159
|
# @syntrologie/app-content
|
|
@@ -83,13 +163,14 @@ DOM content modification capabilities for text, attributes, styles, HTML, and cl
|
|
|
83
163
|
## Actions
|
|
84
164
|
|
|
85
165
|
### set_text
|
|
166
|
+
|
|
86
167
|
Replaces the text content of an element.
|
|
87
168
|
|
|
88
|
-
| Property
|
|
89
|
-
|
|
90
|
-
| `kind`
|
|
91
|
-
| `anchorId` | string
|
|
92
|
-
| `text`
|
|
169
|
+
| Property | Type | Required | Description |
|
|
170
|
+
| ---------- | ------------ | -------- | ---------------- |
|
|
171
|
+
| `kind` | `"set_text"` | Yes | Action type |
|
|
172
|
+
| `anchorId` | string | Yes | Element selector |
|
|
173
|
+
| `text` | string | Yes | New text content |
|
|
93
174
|
|
|
94
175
|
```json
|
|
95
176
|
{
|
|
@@ -100,14 +181,15 @@ Replaces the text content of an element.
|
|
|
100
181
|
```
|
|
101
182
|
|
|
102
183
|
### set_attr
|
|
184
|
+
|
|
103
185
|
Sets an HTML attribute on an element.
|
|
104
186
|
|
|
105
|
-
| Property
|
|
106
|
-
|
|
107
|
-
| `kind`
|
|
108
|
-
| `anchorId` | string
|
|
109
|
-
| `attr`
|
|
110
|
-
| `value`
|
|
187
|
+
| Property | Type | Required | Description |
|
|
188
|
+
| ---------- | ------------ | -------- | ---------------- |
|
|
189
|
+
| `kind` | `"set_attr"` | Yes | Action type |
|
|
190
|
+
| `anchorId` | string | Yes | Element selector |
|
|
191
|
+
| `attr` | string | Yes | Attribute name |
|
|
192
|
+
| `value` | string | Yes | Attribute value |
|
|
111
193
|
|
|
112
194
|
**Blocked attributes:** Event handlers (`onclick`, `onerror`, etc.) are not allowed.
|
|
113
195
|
|
|
@@ -121,13 +203,14 @@ Sets an HTML attribute on an element.
|
|
|
121
203
|
```
|
|
122
204
|
|
|
123
205
|
### set_style
|
|
206
|
+
|
|
124
207
|
Sets inline CSS styles on an element.
|
|
125
208
|
|
|
126
|
-
| Property
|
|
127
|
-
|
|
128
|
-
| `kind`
|
|
129
|
-
| `anchorId` | string
|
|
130
|
-
| `styles`
|
|
209
|
+
| Property | Type | Required | Description |
|
|
210
|
+
| ---------- | ------------- | -------- | ------------------------ |
|
|
211
|
+
| `kind` | `"set_style"` | Yes | Action type |
|
|
212
|
+
| `anchorId` | string | Yes | Element selector |
|
|
213
|
+
| `styles` | object | Yes | CSS property/value pairs |
|
|
131
214
|
|
|
132
215
|
```json
|
|
133
216
|
{
|
|
@@ -141,16 +224,18 @@ Sets inline CSS styles on an element.
|
|
|
141
224
|
```
|
|
142
225
|
|
|
143
226
|
### insert_html
|
|
227
|
+
|
|
144
228
|
Inserts HTML content relative to an element.
|
|
145
229
|
|
|
146
|
-
| Property
|
|
147
|
-
|
|
148
|
-
| `kind`
|
|
149
|
-
| `anchorId` | string
|
|
150
|
-
| `html`
|
|
151
|
-
| `position` | string
|
|
230
|
+
| Property | Type | Required | Description |
|
|
231
|
+
| ---------- | --------------- | -------- | ----------------------------------------------------------- |
|
|
232
|
+
| `kind` | `"insert_html"` | Yes | Action type |
|
|
233
|
+
| `anchorId` | string | Yes | Element selector |
|
|
234
|
+
| `html` | string | Yes | HTML content (sanitized) |
|
|
235
|
+
| `position` | string | Yes | `"before"`, `"after"`, `"prepend"`, `"append"`, `"replace"` |
|
|
152
236
|
|
|
153
237
|
**Positions:**
|
|
238
|
+
|
|
154
239
|
- `before` - Insert before the element
|
|
155
240
|
- `after` - Insert after the element
|
|
156
241
|
- `prepend` - Insert inside, before first child
|
|
@@ -167,13 +252,14 @@ Inserts HTML content relative to an element.
|
|
|
167
252
|
```
|
|
168
253
|
|
|
169
254
|
### add_class
|
|
255
|
+
|
|
170
256
|
Adds a CSS class to an element.
|
|
171
257
|
|
|
172
|
-
| Property
|
|
173
|
-
|
|
174
|
-
| `kind`
|
|
175
|
-
| `anchorId`
|
|
176
|
-
| `className` | string
|
|
258
|
+
| Property | Type | Required | Description |
|
|
259
|
+
| ----------- | ------------- | -------- | ----------------- |
|
|
260
|
+
| `kind` | `"add_class"` | Yes | Action type |
|
|
261
|
+
| `anchorId` | string | Yes | Element selector |
|
|
262
|
+
| `className` | string | Yes | Class name to add |
|
|
177
263
|
|
|
178
264
|
```json
|
|
179
265
|
{
|
|
@@ -184,13 +270,14 @@ Adds a CSS class to an element.
|
|
|
184
270
|
```
|
|
185
271
|
|
|
186
272
|
### remove_class
|
|
273
|
+
|
|
187
274
|
Removes a CSS class from an element.
|
|
188
275
|
|
|
189
|
-
| Property
|
|
190
|
-
|
|
191
|
-
| `kind`
|
|
192
|
-
| `anchorId`
|
|
193
|
-
| `className` | string
|
|
276
|
+
| Property | Type | Required | Description |
|
|
277
|
+
| ----------- | ---------------- | -------- | -------------------- |
|
|
278
|
+
| `kind` | `"remove_class"` | Yes | Action type |
|
|
279
|
+
| `anchorId` | string | Yes | Element selector |
|
|
280
|
+
| `className` | string | Yes | Class name to remove |
|
|
194
281
|
|
|
195
282
|
```json
|
|
196
283
|
{
|
|
@@ -210,24 +297,25 @@ FAQ accordion widget with conditional item visibility.
|
|
|
210
297
|
## Actions
|
|
211
298
|
|
|
212
299
|
### mount_faq
|
|
300
|
+
|
|
213
301
|
Mounts an FAQ accordion widget to a surface slot.
|
|
214
302
|
|
|
215
|
-
| Property
|
|
216
|
-
|
|
217
|
-
| `kind`
|
|
218
|
-
| `slot`
|
|
219
|
-
| `config.title` | string
|
|
220
|
-
| `config.items` | array
|
|
303
|
+
| Property | Type | Required | Description |
|
|
304
|
+
| -------------- | ------------- | -------- | -------------------------------------------------------- |
|
|
305
|
+
| `kind` | `"mount_faq"` | Yes | Action type |
|
|
306
|
+
| `slot` | string | Yes | Target slot (e.g., `"drawer_right"`, `"overlay_center"`) |
|
|
307
|
+
| `config.title` | string | No | Widget title |
|
|
308
|
+
| `config.items` | array | Yes | FAQ items (see below) |
|
|
221
309
|
|
|
222
310
|
### FAQ Item Schema
|
|
223
311
|
|
|
224
312
|
Each item in the `items` array:
|
|
225
313
|
|
|
226
|
-
| Property
|
|
227
|
-
|
|
228
|
-
| `question` | string
|
|
229
|
-
| `answer`
|
|
230
|
-
| `showWhen` | DecisionStrategy | No
|
|
314
|
+
| Property | Type | Required | Description |
|
|
315
|
+
| ---------- | ---------------- | -------- | ----------------------------------- |
|
|
316
|
+
| `question` | string | Yes | The question text |
|
|
317
|
+
| `answer` | string | Yes | The answer text (supports markdown) |
|
|
318
|
+
| `showWhen` | DecisionStrategy | No | Conditional visibility strategy |
|
|
231
319
|
|
|
232
320
|
```json
|
|
233
321
|
{
|
|
@@ -247,9 +335,7 @@ Each item in the `items` array:
|
|
|
247
335
|
"type": "rules",
|
|
248
336
|
"rules": [
|
|
249
337
|
{
|
|
250
|
-
"conditions": [
|
|
251
|
-
{ "type": "page_url", "pattern": "/pricing*" }
|
|
252
|
-
],
|
|
338
|
+
"conditions": [{ "type": "page_url", "pattern": "/pricing*" }],
|
|
253
339
|
"value": true
|
|
254
340
|
}
|
|
255
341
|
],
|
|
@@ -264,6 +350,7 @@ Each item in the `items` array:
|
|
|
264
350
|
## Compositional Pattern
|
|
265
351
|
|
|
266
352
|
The FAQ widget supports **per-item conditional visibility** using `showWhen` strategies. This allows different FAQ items to appear based on:
|
|
353
|
+
|
|
267
354
|
- Current page/route
|
|
268
355
|
- User segment or state
|
|
269
356
|
- Viewport conditions
|
|
@@ -281,34 +368,35 @@ Gamification capabilities including badges, points, and leaderboards.
|
|
|
281
368
|
## Actions
|
|
282
369
|
|
|
283
370
|
### mount_gamification
|
|
371
|
+
|
|
284
372
|
Mounts gamification UI elements.
|
|
285
373
|
|
|
286
|
-
| Property | Type
|
|
287
|
-
|
|
288
|
-
| `kind`
|
|
289
|
-
| `slot`
|
|
290
|
-
| `config` | object
|
|
374
|
+
| Property | Type | Required | Description |
|
|
375
|
+
| -------- | ---------------------- | -------- | -------------------------- |
|
|
376
|
+
| `kind` | `"mount_gamification"` | Yes | Action type |
|
|
377
|
+
| `slot` | string | Yes | Target slot |
|
|
378
|
+
| `config` | object | Yes | Gamification configuration |
|
|
291
379
|
|
|
292
380
|
### Configuration Schema
|
|
293
381
|
|
|
294
|
-
| Property
|
|
295
|
-
|
|
296
|
-
| `badges`
|
|
297
|
-
| `points.enabled`
|
|
298
|
-
| `points.multiplier`
|
|
299
|
-
| `leaderboard.enabled`
|
|
300
|
-
| `leaderboard.refreshInterval` | number
|
|
382
|
+
| Property | Type | Required | Default | Description |
|
|
383
|
+
| ----------------------------- | ------- | -------- | ------- | ---------------------- |
|
|
384
|
+
| `badges` | array | No | `[]` | Badge definitions |
|
|
385
|
+
| `points.enabled` | boolean | No | `false` | Enable points system |
|
|
386
|
+
| `points.multiplier` | number | No | `1` | Points multiplier |
|
|
387
|
+
| `leaderboard.enabled` | boolean | No | `false` | Show leaderboard |
|
|
388
|
+
| `leaderboard.refreshInterval` | number | No | `60000` | Refresh interval in ms |
|
|
301
389
|
|
|
302
390
|
### Badge Schema
|
|
303
391
|
|
|
304
|
-
| Property
|
|
305
|
-
|
|
306
|
-
| `id`
|
|
307
|
-
| `name`
|
|
308
|
-
| `icon`
|
|
309
|
-
| `description`
|
|
310
|
-
| `trigger.event`
|
|
311
|
-
| `trigger.conditions` | array
|
|
392
|
+
| Property | Type | Required | Description |
|
|
393
|
+
| -------------------- | ------ | -------- | ----------------------------- |
|
|
394
|
+
| `id` | string | Yes | Unique badge identifier |
|
|
395
|
+
| `name` | string | Yes | Display name |
|
|
396
|
+
| `icon` | string | Yes | Icon identifier |
|
|
397
|
+
| `description` | string | No | Badge description |
|
|
398
|
+
| `trigger.event` | string | Yes | Event that triggers the badge |
|
|
399
|
+
| `trigger.conditions` | array | No | Additional conditions |
|
|
312
400
|
|
|
313
401
|
```json
|
|
314
402
|
{
|
|
@@ -367,25 +455,26 @@ Navigation link list widget with conditional item visibility.
|
|
|
367
455
|
## Actions
|
|
368
456
|
|
|
369
457
|
### mount_nav
|
|
458
|
+
|
|
370
459
|
Mounts a navigation link list widget to a surface slot.
|
|
371
460
|
|
|
372
|
-
| Property
|
|
373
|
-
|
|
374
|
-
| `kind`
|
|
375
|
-
| `slot`
|
|
376
|
-
| `config.title` | string
|
|
377
|
-
| `config.items` | array
|
|
461
|
+
| Property | Type | Required | Description |
|
|
462
|
+
| -------------- | ------------- | -------- | ---------------------------------------------------------- |
|
|
463
|
+
| `kind` | `"mount_nav"` | Yes | Action type |
|
|
464
|
+
| `slot` | string | Yes | Target slot (e.g., `"drawer_left"`, `"inline:{anchorId}"`) |
|
|
465
|
+
| `config.title` | string | No | Widget title |
|
|
466
|
+
| `config.items` | array | Yes | Navigation items (see below) |
|
|
378
467
|
|
|
379
468
|
### Nav Item Schema
|
|
380
469
|
|
|
381
470
|
Each item in the `items` array:
|
|
382
471
|
|
|
383
|
-
| Property
|
|
384
|
-
|
|
385
|
-
| `label`
|
|
386
|
-
| `href`
|
|
387
|
-
| `icon`
|
|
388
|
-
| `showWhen` | DecisionStrategy | No
|
|
472
|
+
| Property | Type | Required | Description |
|
|
473
|
+
| ---------- | ---------------- | -------- | ------------------------------- |
|
|
474
|
+
| `label` | string | Yes | Link text |
|
|
475
|
+
| `href` | string | Yes | Link destination |
|
|
476
|
+
| `icon` | string | No | Icon identifier |
|
|
477
|
+
| `showWhen` | DecisionStrategy | No | Conditional visibility strategy |
|
|
389
478
|
|
|
390
479
|
```json
|
|
391
480
|
{
|
|
@@ -407,9 +496,7 @@ Each item in the `items` array:
|
|
|
407
496
|
"type": "rules",
|
|
408
497
|
"rules": [
|
|
409
498
|
{
|
|
410
|
-
"conditions": [
|
|
411
|
-
{ "type": "state_equals", "key": "user.role", "value": "admin" }
|
|
412
|
-
],
|
|
499
|
+
"conditions": [{ "type": "state_equals", "key": "user.role", "value": "admin" }],
|
|
413
500
|
"value": true
|
|
414
501
|
}
|
|
415
502
|
],
|
|
@@ -424,9 +511,7 @@ Each item in the `items` array:
|
|
|
424
511
|
"type": "rules",
|
|
425
512
|
"rules": [
|
|
426
513
|
{
|
|
427
|
-
"conditions": [
|
|
428
|
-
{ "type": "state_equals", "key": "user.plan", "value": "free" }
|
|
429
|
-
],
|
|
514
|
+
"conditions": [{ "type": "state_equals", "key": "user.plan", "value": "free" }],
|
|
430
515
|
"value": true
|
|
431
516
|
}
|
|
432
517
|
],
|
|
@@ -441,6 +526,7 @@ Each item in the `items` array:
|
|
|
441
526
|
## Compositional Pattern
|
|
442
527
|
|
|
443
528
|
The nav widget supports **per-item conditional visibility** using `showWhen` strategies. This allows different navigation items to appear based on:
|
|
529
|
+
|
|
444
530
|
- User role or permissions
|
|
445
531
|
- Subscription tier
|
|
446
532
|
- Feature flags
|
|
@@ -458,15 +544,16 @@ Navigation capabilities for scrolling and URL navigation.
|
|
|
458
544
|
## Actions
|
|
459
545
|
|
|
460
546
|
### scroll_to
|
|
547
|
+
|
|
461
548
|
Scrolls the viewport to bring an element into view.
|
|
462
549
|
|
|
463
|
-
| Property
|
|
464
|
-
|
|
465
|
-
| `kind`
|
|
466
|
-
| `anchorId` | string
|
|
467
|
-
| `behavior` | string
|
|
468
|
-
| `block`
|
|
469
|
-
| `inline`
|
|
550
|
+
| Property | Type | Required | Default | Description |
|
|
551
|
+
| ---------- | ------------- | -------- | ----------- | ------------------------------------------- |
|
|
552
|
+
| `kind` | `"scroll_to"` | Yes | | Action type |
|
|
553
|
+
| `anchorId` | string | Yes | | Element selector |
|
|
554
|
+
| `behavior` | string | No | `"smooth"` | `"smooth"`, `"instant"`, `"auto"` |
|
|
555
|
+
| `block` | string | No | `"center"` | `"start"`, `"center"`, `"end"`, `"nearest"` |
|
|
556
|
+
| `inline` | string | No | `"nearest"` | `"start"`, `"center"`, `"end"`, `"nearest"` |
|
|
470
557
|
|
|
471
558
|
```json
|
|
472
559
|
{
|
|
@@ -478,13 +565,14 @@ Scrolls the viewport to bring an element into view.
|
|
|
478
565
|
```
|
|
479
566
|
|
|
480
567
|
### navigate
|
|
568
|
+
|
|
481
569
|
Navigates to a URL.
|
|
482
570
|
|
|
483
|
-
| Property | Type
|
|
484
|
-
|
|
485
|
-
| `kind`
|
|
486
|
-
| `url`
|
|
487
|
-
| `target` | string
|
|
571
|
+
| Property | Type | Required | Default | Description |
|
|
572
|
+
| -------- | ------------ | -------- | --------- | ----------------------- |
|
|
573
|
+
| `kind` | `"navigate"` | Yes | | Action type |
|
|
574
|
+
| `url` | string | Yes | | Destination URL |
|
|
575
|
+
| `target` | string | No | `"_self"` | `"_self"` or `"_blank"` |
|
|
488
576
|
|
|
489
577
|
```json
|
|
490
578
|
{
|
|
@@ -506,16 +594,17 @@ Visual overlay capabilities including highlights, tooltips, badges, and pulse an
|
|
|
506
594
|
## Actions
|
|
507
595
|
|
|
508
596
|
### highlight
|
|
597
|
+
|
|
509
598
|
Creates a spotlight effect around an element with a scrim overlay.
|
|
510
599
|
|
|
511
|
-
| Property
|
|
512
|
-
|
|
513
|
-
| `kind`
|
|
514
|
-
| `anchorId`
|
|
515
|
-
| `style.color`
|
|
516
|
-
| `style.scrimOpacity` | number
|
|
517
|
-
| `style.paddingPx`
|
|
518
|
-
| `style.radiusPx`
|
|
600
|
+
| Property | Type | Required | Default | Description |
|
|
601
|
+
| -------------------- | ------------- | -------- | ----------- | --------------------------------------- |
|
|
602
|
+
| `kind` | `"highlight"` | Yes | | Action type |
|
|
603
|
+
| `anchorId` | string | Yes | | Element selector |
|
|
604
|
+
| `style.color` | string | No | `"#5b8cff"` | Ring color |
|
|
605
|
+
| `style.scrimOpacity` | number | No | `0.55` | Backdrop opacity 0-1 (set to 0 to hide) |
|
|
606
|
+
| `style.paddingPx` | number | No | `12` | Space around element |
|
|
607
|
+
| `style.radiusPx` | number | No | `12` | Ring corner radius |
|
|
519
608
|
|
|
520
609
|
```json
|
|
521
610
|
{
|
|
@@ -529,18 +618,19 @@ Creates a spotlight effect around an element with a scrim overlay.
|
|
|
529
618
|
```
|
|
530
619
|
|
|
531
620
|
### tooltip
|
|
621
|
+
|
|
532
622
|
Shows a tooltip near an element with optional title, body, and CTA.
|
|
533
623
|
|
|
534
|
-
| Property
|
|
535
|
-
|
|
536
|
-
| `kind`
|
|
537
|
-
| `anchorId`
|
|
538
|
-
| `content.title`
|
|
539
|
-
| `content.body`
|
|
540
|
-
| `content.cta.label`
|
|
541
|
-
| `content.cta.action` | Action
|
|
542
|
-
| `trigger`
|
|
543
|
-
| `placement`
|
|
624
|
+
| Property | Type | Required | Default | Description |
|
|
625
|
+
| -------------------- | ----------- | -------- | ------------- | ----------------------------------- |
|
|
626
|
+
| `kind` | `"tooltip"` | Yes | | Action type |
|
|
627
|
+
| `anchorId` | string | Yes | | Element selector |
|
|
628
|
+
| `content.title` | string | No | | Tooltip heading |
|
|
629
|
+
| `content.body` | string | Yes | | Tooltip text |
|
|
630
|
+
| `content.cta.label` | string | No | | CTA button text |
|
|
631
|
+
| `content.cta.action` | Action | No | | Action to execute on CTA click |
|
|
632
|
+
| `trigger` | string | No | `"immediate"` | `"immediate"`, `"hover"`, `"click"` |
|
|
633
|
+
| `placement` | string | No | `"top"` | See placement options below |
|
|
544
634
|
|
|
545
635
|
**Placement options:** `top`, `top-start`, `top-end`, `bottom`, `bottom-start`, `bottom-end`, `left`, `left-start`, `left-end`, `right`, `right-start`, `right-end`
|
|
546
636
|
|
|
@@ -562,14 +652,15 @@ Shows a tooltip near an element with optional title, body, and CTA.
|
|
|
562
652
|
```
|
|
563
653
|
|
|
564
654
|
### badge
|
|
655
|
+
|
|
565
656
|
Adds a small badge indicator near an element.
|
|
566
657
|
|
|
567
|
-
| Property
|
|
568
|
-
|
|
569
|
-
| `kind`
|
|
570
|
-
| `anchorId` | string
|
|
571
|
-
| `text`
|
|
572
|
-
| `position` | string
|
|
658
|
+
| Property | Type | Required | Default | Description |
|
|
659
|
+
| ---------- | --------- | -------- | ------------- | -------------------------------------------------------------- |
|
|
660
|
+
| `kind` | `"badge"` | Yes | | Action type |
|
|
661
|
+
| `anchorId` | string | Yes | | Element selector |
|
|
662
|
+
| `text` | string | Yes | | Badge text (e.g., "NEW", "3") |
|
|
663
|
+
| `position` | string | No | `"top-right"` | `"top-left"`, `"top-right"`, `"bottom-left"`, `"bottom-right"` |
|
|
573
664
|
|
|
574
665
|
```json
|
|
575
666
|
{
|
|
@@ -581,13 +672,14 @@ Adds a small badge indicator near an element.
|
|
|
581
672
|
```
|
|
582
673
|
|
|
583
674
|
### pulse
|
|
675
|
+
|
|
584
676
|
Adds a pulsing animation to draw attention.
|
|
585
677
|
|
|
586
|
-
| Property
|
|
587
|
-
|
|
588
|
-
| `kind`
|
|
589
|
-
| `anchorId` | string
|
|
590
|
-
| `duration` | number
|
|
678
|
+
| Property | Type | Required | Default | Description |
|
|
679
|
+
| ---------- | --------- | -------- | ------- | ------------------------ |
|
|
680
|
+
| `kind` | `"pulse"` | Yes | | Action type |
|
|
681
|
+
| `anchorId` | string | Yes | | Element selector |
|
|
682
|
+
| `duration` | number | No | `2000` | Animation duration in ms |
|
|
591
683
|
|
|
592
684
|
```json
|
|
593
685
|
{
|
|
@@ -598,23 +690,25 @@ Adds a pulsing animation to draw attention.
|
|
|
598
690
|
```
|
|
599
691
|
|
|
600
692
|
### modal
|
|
693
|
+
|
|
601
694
|
Shows a centered modal dialog with optional CTA buttons.
|
|
602
695
|
|
|
603
|
-
| Property
|
|
604
|
-
|
|
605
|
-
| `kind`
|
|
606
|
-
| `content.title`
|
|
607
|
-
| `content.body`
|
|
608
|
-
| `size`
|
|
609
|
-
| `blocking`
|
|
610
|
-
| `scrim.opacity`
|
|
611
|
-
| `dismiss.onEsc`
|
|
612
|
-
| `dismiss.closeButton` | boolean
|
|
613
|
-
| `dismiss.timeoutMs`
|
|
614
|
-
| `ctaButtons`
|
|
615
|
-
| `waitFor`
|
|
696
|
+
| Property | Type | Required | Default | Description |
|
|
697
|
+
| --------------------- | ------------------ | -------- | ------- | ------------------------------------------------------------- |
|
|
698
|
+
| `kind` | `"overlays:modal"` | Yes | | Action type |
|
|
699
|
+
| `content.title` | string | No | | Modal heading |
|
|
700
|
+
| `content.body` | string | Yes | | Modal text |
|
|
701
|
+
| `size` | string | No | `"md"` | `"sm"`, `"md"`, `"lg"` |
|
|
702
|
+
| `blocking` | boolean | No | `false` | Block page interaction |
|
|
703
|
+
| `scrim.opacity` | number | No | `0.6` | Backdrop opacity 0-1 |
|
|
704
|
+
| `dismiss.onEsc` | boolean | No | `true` | Close on Escape key |
|
|
705
|
+
| `dismiss.closeButton` | boolean | No | `true` | Show close button |
|
|
706
|
+
| `dismiss.timeoutMs` | number | No | | Auto-close after timeout |
|
|
707
|
+
| `ctaButtons` | array | No | | Array of CTA buttons |
|
|
708
|
+
| `waitFor` | string | No | | When to complete: `"dismissed"`, `"cta-click"`, `"timeout:N"` |
|
|
616
709
|
|
|
617
710
|
**CTA Button properties:**
|
|
711
|
+
|
|
618
712
|
- `label`: Button text
|
|
619
713
|
- `actionId`: Identifier for the action
|
|
620
714
|
- `primary`: Whether this is a primary button (default: false)
|