@syntrologie/runtime-sdk 0.2.1 → 0.2.3
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 +400 -0
- package/dist/SmartCanvasApp.js +28 -10
- package/dist/SmartCanvasApp.js.map +1 -1
- package/dist/api.d.ts +23 -0
- package/dist/api.js +23 -5
- package/dist/api.js.map +1 -1
- package/dist/blocks/data/ComparisonBlock.d.ts +10 -0
- package/dist/blocks/data/ComparisonBlock.js +92 -0
- package/dist/blocks/data/ComparisonBlock.js.map +1 -0
- package/dist/blocks/data/StatsBlock.d.ts +10 -0
- package/dist/blocks/data/StatsBlock.js +103 -0
- package/dist/blocks/data/StatsBlock.js.map +1 -0
- package/dist/blocks/data/index.d.ts +2 -0
- package/dist/blocks/data/index.js +3 -0
- package/dist/blocks/data/index.js.map +1 -0
- package/dist/blocks/index.d.ts +26 -0
- package/dist/blocks/index.js +94 -0
- package/dist/blocks/index.js.map +1 -0
- package/dist/blocks/interactive/ChecklistBlock.d.ts +11 -0
- package/dist/blocks/interactive/ChecklistBlock.js +110 -0
- package/dist/blocks/interactive/ChecklistBlock.js.map +1 -0
- package/dist/blocks/interactive/RatingBlock.d.ts +11 -0
- package/dist/blocks/interactive/RatingBlock.js +131 -0
- package/dist/blocks/interactive/RatingBlock.js.map +1 -0
- package/dist/blocks/interactive/index.d.ts +2 -0
- package/dist/blocks/interactive/index.js +3 -0
- package/dist/blocks/interactive/index.js.map +1 -0
- package/dist/blocks/notification/NotificationBlock.d.ts +26 -0
- package/dist/blocks/notification/NotificationBlock.js +166 -0
- package/dist/blocks/notification/NotificationBlock.js.map +1 -0
- package/dist/blocks/notification/index.d.ts +1 -0
- package/dist/blocks/notification/index.js +2 -0
- package/dist/blocks/notification/index.js.map +1 -0
- package/dist/bootstrap.d.ts +19 -1
- package/dist/bootstrap.js +118 -17
- package/dist/bootstrap.js.map +1 -1
- package/dist/components/ShadowCanvasOverlay.d.ts +12 -3
- package/dist/components/ShadowCanvasOverlay.js +75 -24
- package/dist/components/ShadowCanvasOverlay.js.map +1 -1
- package/dist/components/{RectangleCard.d.ts → TileCard.d.ts} +4 -4
- package/dist/components/{RectangleCard.js → TileCard.js} +57 -6
- package/dist/components/TileCard.js.map +1 -0
- package/dist/components/TileWheel.d.ts +8 -0
- package/dist/components/{RectangleWheel.js → TileWheel.js} +7 -7
- package/dist/components/TileWheel.js.map +1 -0
- package/dist/configFetcher.js.map +1 -1
- package/dist/earlyPatcher.js +1 -2
- package/dist/earlyPatcher.js.map +1 -1
- package/dist/editorLoader.js +74 -17
- package/dist/editorLoader.js.map +1 -1
- package/dist/experiments/adapters/growthbook.d.ts +18 -2
- package/dist/experiments/adapters/growthbook.js +17 -3
- package/dist/experiments/adapters/growthbook.js.map +1 -1
- package/dist/experiments/registry.d.ts +18 -4
- package/dist/experiments/registry.js +1 -1
- package/dist/experiments/registry.js.map +1 -1
- package/dist/experiments/types.d.ts +8 -3
- package/dist/fetchers/cdnFetcher.js.map +1 -1
- package/dist/fetchers/experimentsFetcher.js +20 -0
- package/dist/fetchers/experimentsFetcher.js.map +1 -1
- package/dist/fetchers/types.d.ts +2 -2
- package/dist/hooks/useCanvasOverlays.d.ts +5 -1
- package/dist/hooks/useCanvasOverlays.js +33 -13
- package/dist/hooks/useCanvasOverlays.js.map +1 -1
- package/dist/hooks/useShadowCanvasConfig.d.ts +9 -2
- package/dist/hooks/useShadowCanvasConfig.js +8 -8
- package/dist/hooks/useShadowCanvasConfig.js.map +1 -1
- package/dist/hostPatcher/core/patcher.js +14 -15
- package/dist/hostPatcher/core/patcher.js.map +1 -1
- package/dist/hostPatcher/core/sanitizer.js +1 -1
- package/dist/hostPatcher/core/sanitizer.js.map +1 -1
- package/dist/hostPatcher/core/types.d.ts +8 -9
- package/dist/hostPatcher/policy/defaultPolicy.d.ts +4 -0
- package/dist/hostPatcher/policy/defaultPolicy.js +9 -37
- package/dist/hostPatcher/policy/defaultPolicy.js.map +1 -1
- package/dist/hostPatcher/utils/anchors.js +3 -3
- package/dist/hostPatcher/utils/anchors.js.map +1 -1
- package/dist/index.d.ts +2 -2
- package/dist/index.js +2 -2
- package/dist/index.js.map +1 -1
- package/dist/overlays/recipeRegistry.d.ts +14 -0
- package/dist/overlays/recipeRegistry.js +32 -0
- package/dist/overlays/recipeRegistry.js.map +1 -0
- package/dist/overlays/runtime/index.d.ts +1 -0
- package/dist/overlays/runtime/index.js +1 -0
- package/dist/overlays/runtime/index.js.map +1 -1
- package/dist/overlays/runtime/overlay/modal.d.ts +11 -0
- package/dist/overlays/runtime/overlay/modal.js +78 -0
- package/dist/overlays/runtime/overlay/modal.js.map +1 -0
- package/dist/overlays/runtime/overlay/root.js +132 -0
- package/dist/overlays/runtime/overlay/root.js.map +1 -1
- package/dist/overlays/runtime/overlay/runner.d.ts +2 -0
- package/dist/overlays/runtime/overlay/runner.js +441 -2
- package/dist/overlays/runtime/overlay/runner.js.map +1 -1
- package/dist/overlays/runtime/overlay/tooltip.d.ts +1 -0
- package/dist/overlays/runtime/overlay/tooltip.js +61 -1
- package/dist/overlays/runtime/overlay/tooltip.js.map +1 -1
- package/dist/overlays/schema.d.ts +6 -6
- package/dist/overlays/types.d.ts +55 -1
- package/dist/react.d.ts +6 -1
- package/dist/react.js +31 -9
- package/dist/react.js.map +1 -1
- package/dist/render/RenderContext.d.ts +39 -0
- package/dist/render/RenderContext.js +67 -0
- package/dist/render/RenderContext.js.map +1 -0
- package/dist/render/index.d.ts +3 -0
- package/dist/render/index.js +3 -0
- package/dist/render/index.js.map +1 -0
- package/dist/render/types.d.ts +81 -0
- package/dist/render/types.js +2 -0
- package/dist/render/types.js.map +1 -0
- package/dist/smart-canvas.esm.js +192 -25
- package/dist/smart-canvas.esm.js.map +4 -4
- package/dist/smart-canvas.js +25962 -26846
- package/dist/smart-canvas.js.map +4 -4
- package/dist/smart-canvas.min.js +192 -25
- package/dist/smart-canvas.min.js.map +4 -4
- package/dist/telemetry/adapters/posthog.d.ts +6 -0
- package/dist/telemetry/adapters/posthog.js +48 -0
- package/dist/telemetry/adapters/posthog.js.map +1 -1
- package/dist/telemetry/types.d.ts +30 -0
- package/dist/theme/ThemeProvider.d.ts +31 -0
- package/dist/theme/ThemeProvider.js +109 -0
- package/dist/theme/ThemeProvider.js.map +1 -0
- package/dist/theme/defaultTheme.d.ts +18 -0
- package/dist/theme/defaultTheme.js +163 -0
- package/dist/theme/defaultTheme.js.map +1 -0
- package/dist/theme/extractHostTheme.d.ts +14 -0
- package/dist/theme/extractHostTheme.js +261 -0
- package/dist/theme/extractHostTheme.js.map +1 -0
- package/dist/theme/index.d.ts +5 -0
- package/dist/theme/index.js +7 -0
- package/dist/theme/index.js.map +1 -0
- package/dist/theme/types.d.ts +91 -0
- package/dist/theme/types.js +6 -0
- package/dist/theme/types.js.map +1 -0
- package/dist/token.d.ts +4 -0
- package/dist/token.js.map +1 -1
- package/dist/types.d.ts +228 -47
- package/package.json +8 -4
- package/schema/canvas-config.schema.json +24 -15
- package/dist/components/RectangleCard.js.map +0 -1
- package/dist/components/RectangleWheel.d.ts +0 -8
- package/dist/components/RectangleWheel.js.map +0 -1
package/CAPABILITIES.md
ADDED
|
@@ -0,0 +1,400 @@
|
|
|
1
|
+
# SmartCanvas SDK Capabilities
|
|
2
|
+
|
|
3
|
+
This document describes all available operations and capabilities of the SmartCanvas SDK for DOM manipulation and enhancement.
|
|
4
|
+
|
|
5
|
+
## Table of Contents
|
|
6
|
+
- [Overview](#overview)
|
|
7
|
+
- [Policy Tiers](#policy-tiers)
|
|
8
|
+
- [Anchor Selectors](#anchor-selectors)
|
|
9
|
+
- [Operations](#operations)
|
|
10
|
+
- [Overlays](#overlays)
|
|
11
|
+
- [Best Practices](#best-practices)
|
|
12
|
+
|
|
13
|
+
## Overview
|
|
14
|
+
|
|
15
|
+
The SmartCanvas SDK allows you to safely modify web pages through a controlled patching system. All modifications are applied through "patches" that contain:
|
|
16
|
+
- An anchor selector to find the target element
|
|
17
|
+
- One or more operations to apply
|
|
18
|
+
- A policy tier that controls what modifications are allowed
|
|
19
|
+
|
|
20
|
+
## Policy Tiers
|
|
21
|
+
|
|
22
|
+
The SDK uses three policy tiers to control what operations are allowed:
|
|
23
|
+
|
|
24
|
+
### 1. **additive** (default)
|
|
25
|
+
- **Purpose**: Safest tier - only add new elements and classes
|
|
26
|
+
- **Allowed**: Adding HTML, adding prefixed classes, safe styles
|
|
27
|
+
- **Not Allowed**: Modifying existing text or attributes
|
|
28
|
+
- **Use When**: Adding badges, tooltips, or decorative elements
|
|
29
|
+
|
|
30
|
+
### 2. **moderate**
|
|
31
|
+
- **Purpose**: Allows limited modifications to existing elements
|
|
32
|
+
- **Allowed**: Everything from additive + title attribute
|
|
33
|
+
- **Not Allowed**: Text changes, color changes
|
|
34
|
+
- **Use When**: Adding accessibility improvements or metadata
|
|
35
|
+
|
|
36
|
+
### 3. **surgical**
|
|
37
|
+
- **Purpose**: Full control over content modification
|
|
38
|
+
- **Allowed**: Everything including setText, background/text colors
|
|
39
|
+
- **Required For**: Changing headlines, CTAs, or any text content
|
|
40
|
+
- **Use When**: A/B testing copy variations or personalizing content
|
|
41
|
+
|
|
42
|
+
## Anchor Selectors
|
|
43
|
+
|
|
44
|
+
Anchors define how to find elements in the DOM. The SDK supports four types:
|
|
45
|
+
|
|
46
|
+
### 1. CSS Selector
|
|
47
|
+
```json
|
|
48
|
+
{
|
|
49
|
+
"by": "css",
|
|
50
|
+
"value": "h1.hero-title"
|
|
51
|
+
}
|
|
52
|
+
```
|
|
53
|
+
- **Use**: Standard CSS selectors
|
|
54
|
+
- **Example**: `"h1"`, `".button-primary"`, `"#hero-section h2"`
|
|
55
|
+
|
|
56
|
+
### 2. Data Attribute
|
|
57
|
+
```json
|
|
58
|
+
{
|
|
59
|
+
"by": "data",
|
|
60
|
+
"key": "testid",
|
|
61
|
+
"value": "hero-banner" // optional
|
|
62
|
+
}
|
|
63
|
+
```
|
|
64
|
+
- **Use**: Target elements by data attributes
|
|
65
|
+
- **Example**: Finds `<div data-testid="hero-banner">`
|
|
66
|
+
- **Note**: If value is omitted, matches any element with that data attribute
|
|
67
|
+
|
|
68
|
+
### 3. ARIA Selector
|
|
69
|
+
```json
|
|
70
|
+
{
|
|
71
|
+
"by": "aria",
|
|
72
|
+
"role": "button", // optional
|
|
73
|
+
"label": "Submit" // optional
|
|
74
|
+
}
|
|
75
|
+
```
|
|
76
|
+
- **Use**: Target accessible elements
|
|
77
|
+
- **Example**: Finds `<button role="button" aria-label="Submit">`
|
|
78
|
+
- **Note**: Can use role, label, or both
|
|
79
|
+
|
|
80
|
+
### 4. Element Reference
|
|
81
|
+
```json
|
|
82
|
+
{
|
|
83
|
+
"by": "ref",
|
|
84
|
+
"el": elementReference
|
|
85
|
+
}
|
|
86
|
+
```
|
|
87
|
+
- **Use**: Direct element reference (programmatic use only)
|
|
88
|
+
- **Note**: Cannot be serialized in JSON configs
|
|
89
|
+
|
|
90
|
+
## Operations
|
|
91
|
+
|
|
92
|
+
### 1. setText
|
|
93
|
+
**Purpose**: Replace the text content of an element
|
|
94
|
+
```json
|
|
95
|
+
{
|
|
96
|
+
"kind": "setText",
|
|
97
|
+
"text": "New headline text"
|
|
98
|
+
}
|
|
99
|
+
```
|
|
100
|
+
- **Requires**: `tier: "surgical"`
|
|
101
|
+
- **Effect**: Replaces all text content in the element
|
|
102
|
+
- **Common Use**: A/B testing headlines, CTAs, product descriptions
|
|
103
|
+
- **Note**: Removes all child elements, use carefully
|
|
104
|
+
|
|
105
|
+
### 2. setStyle
|
|
106
|
+
**Purpose**: Modify CSS styles on an element
|
|
107
|
+
```json
|
|
108
|
+
{
|
|
109
|
+
"kind": "setStyle",
|
|
110
|
+
"prop": "backgroundColor",
|
|
111
|
+
"value": "#ff0000",
|
|
112
|
+
"important": true // optional, adds !important
|
|
113
|
+
}
|
|
114
|
+
```
|
|
115
|
+
- **Allowed Properties (any tier)**:
|
|
116
|
+
- `outline`, `outlineColor`, `outlineWidth`, `outlineStyle`
|
|
117
|
+
- `boxShadow`, `filter`
|
|
118
|
+
- `scrollMargin` and related properties
|
|
119
|
+
- CSS variables (`--custom-var`)
|
|
120
|
+
- **Additional Properties (surgical tier)**:
|
|
121
|
+
- `backgroundColor`, `color`
|
|
122
|
+
- **Common Use**: Highlighting elements, adding visual emphasis
|
|
123
|
+
- **Note**: Value can be `null` to remove a style
|
|
124
|
+
|
|
125
|
+
### 3. addClass
|
|
126
|
+
**Purpose**: Add a CSS class to an element
|
|
127
|
+
```json
|
|
128
|
+
{
|
|
129
|
+
"kind": "addClass",
|
|
130
|
+
"className": "syntro-highlight"
|
|
131
|
+
}
|
|
132
|
+
```
|
|
133
|
+
- **Requirement**: Class must start with `syntro-`, `sc-`, or `sx-`
|
|
134
|
+
- **Common Use**: Apply pre-defined styles, mark elements
|
|
135
|
+
- **Note**: Won't add duplicate classes
|
|
136
|
+
|
|
137
|
+
### 4. removeClass
|
|
138
|
+
**Purpose**: Remove a CSS class from an element
|
|
139
|
+
```json
|
|
140
|
+
{
|
|
141
|
+
"kind": "removeClass",
|
|
142
|
+
"className": "syntro-hidden"
|
|
143
|
+
}
|
|
144
|
+
```
|
|
145
|
+
- **Requirement**: Can only remove prefixed classes
|
|
146
|
+
- **Common Use**: Revealing hidden elements, removing states
|
|
147
|
+
- **Note**: Safe if class doesn't exist
|
|
148
|
+
|
|
149
|
+
### 5. setAttr
|
|
150
|
+
**Purpose**: Set or remove HTML attributes
|
|
151
|
+
```json
|
|
152
|
+
{
|
|
153
|
+
"kind": "setAttr",
|
|
154
|
+
"name": "data-tracked",
|
|
155
|
+
"value": "true" // or null to remove
|
|
156
|
+
}
|
|
157
|
+
```
|
|
158
|
+
- **Allowed Attributes (any tier)**:
|
|
159
|
+
- `data-*` (any data attribute)
|
|
160
|
+
- `aria-*` (accessibility attributes)
|
|
161
|
+
- `role`
|
|
162
|
+
- **Additional Attributes (moderate/surgical)**:
|
|
163
|
+
- `title`
|
|
164
|
+
- **Common Use**: Tracking, accessibility improvements
|
|
165
|
+
- **Note**: Setting to `null` removes the attribute
|
|
166
|
+
|
|
167
|
+
### 6. append
|
|
168
|
+
**Purpose**: Add HTML content at the end of an element
|
|
169
|
+
```json
|
|
170
|
+
{
|
|
171
|
+
"kind": "append",
|
|
172
|
+
"html": "<span class='syntro-badge'>NEW</span>"
|
|
173
|
+
}
|
|
174
|
+
```
|
|
175
|
+
- **Effect**: Inserts after existing children
|
|
176
|
+
- **Common Use**: Adding badges, icons, supplementary content
|
|
177
|
+
- **Note**: HTML is sanitized for safety
|
|
178
|
+
|
|
179
|
+
### 7. prepend
|
|
180
|
+
**Purpose**: Add HTML content at the beginning of an element
|
|
181
|
+
```json
|
|
182
|
+
{
|
|
183
|
+
"kind": "prepend",
|
|
184
|
+
"html": "<span class='syntro-icon'>★</span>"
|
|
185
|
+
}
|
|
186
|
+
```
|
|
187
|
+
- **Effect**: Inserts before existing children
|
|
188
|
+
- **Common Use**: Adding icons, prefixes, notifications
|
|
189
|
+
- **Note**: HTML is sanitized for safety
|
|
190
|
+
|
|
191
|
+
### 8. insertAdjacent
|
|
192
|
+
**Purpose**: Insert HTML at specific positions relative to element
|
|
193
|
+
```json
|
|
194
|
+
{
|
|
195
|
+
"kind": "insertAdjacent",
|
|
196
|
+
"where": "afterbegin",
|
|
197
|
+
"html": "<div class='syntro-alert'>Important!</div>"
|
|
198
|
+
}
|
|
199
|
+
```
|
|
200
|
+
- **Positions**:
|
|
201
|
+
- `beforebegin`: Before the element itself
|
|
202
|
+
- `afterbegin`: Inside element, before first child
|
|
203
|
+
- `beforeend`: Inside element, after last child
|
|
204
|
+
- `afterend`: After the element itself
|
|
205
|
+
- **Common Use**: Complex insertions, wrapping elements
|
|
206
|
+
- **Note**: More flexible than append/prepend
|
|
207
|
+
|
|
208
|
+
## Overlays
|
|
209
|
+
|
|
210
|
+
The SDK supports overlay elements that don't modify the DOM. These are defined in `overlayRecipe.steps`:
|
|
211
|
+
|
|
212
|
+
### Tooltips
|
|
213
|
+
Floating information bubbles that appear near target elements.
|
|
214
|
+
|
|
215
|
+
```json
|
|
216
|
+
{
|
|
217
|
+
"kind": "tooltip",
|
|
218
|
+
"id": "feature_tooltip_1",
|
|
219
|
+
"anchor": {
|
|
220
|
+
"by": "css",
|
|
221
|
+
"value": ".pricing-card"
|
|
222
|
+
},
|
|
223
|
+
"content": {
|
|
224
|
+
"title": "Best Value",
|
|
225
|
+
"body": "This plan includes all features at the lowest per-user cost"
|
|
226
|
+
},
|
|
227
|
+
"placement": "top",
|
|
228
|
+
"trigger": "hover",
|
|
229
|
+
"ctaButtons": [
|
|
230
|
+
{
|
|
231
|
+
"label": "Learn More",
|
|
232
|
+
"actionId": "learn_more_click"
|
|
233
|
+
}
|
|
234
|
+
],
|
|
235
|
+
"dismiss": {
|
|
236
|
+
"onEsc": true,
|
|
237
|
+
"closeButton": true
|
|
238
|
+
}
|
|
239
|
+
}
|
|
240
|
+
```
|
|
241
|
+
|
|
242
|
+
**Properties:**
|
|
243
|
+
- `kind`: Must be `"tooltip"`
|
|
244
|
+
- `id`: Unique identifier for tracking
|
|
245
|
+
- `anchor`: Element selector (same as patches)
|
|
246
|
+
- `content.title`: Optional heading text
|
|
247
|
+
- `content.body`: Required tooltip body text
|
|
248
|
+
- `placement`: `"top"`, `"bottom"`, `"left"`, `"right"`, or `"auto"`
|
|
249
|
+
- `trigger`: `"immediate"`, `"hover"`, or `"click"`
|
|
250
|
+
- `offsetPx`: Distance from anchor element (optional)
|
|
251
|
+
- `blocking`: If true, blocks page interaction (optional)
|
|
252
|
+
- `ctaButtons`: Array of action buttons (optional)
|
|
253
|
+
- `dismiss.onEsc`: Close on Escape key
|
|
254
|
+
- `dismiss.closeButton`: Show X button
|
|
255
|
+
- `dismiss.timeoutMs`: Auto-dismiss after milliseconds
|
|
256
|
+
|
|
257
|
+
### Highlights
|
|
258
|
+
Visual emphasis rings that draw attention to elements.
|
|
259
|
+
|
|
260
|
+
```json
|
|
261
|
+
{
|
|
262
|
+
"kind": "highlight",
|
|
263
|
+
"id": "cta_highlight_1",
|
|
264
|
+
"anchor": {
|
|
265
|
+
"by": "css",
|
|
266
|
+
"value": ".hero-cta button"
|
|
267
|
+
},
|
|
268
|
+
"copy": "Click here to get started",
|
|
269
|
+
"ring": {
|
|
270
|
+
"paddingPx": 8,
|
|
271
|
+
"radiusPx": 4
|
|
272
|
+
},
|
|
273
|
+
"ringColor": "#3b82f6",
|
|
274
|
+
"scrim": {
|
|
275
|
+
"opacity": 0.5
|
|
276
|
+
},
|
|
277
|
+
"blocking": true,
|
|
278
|
+
"dismiss": {
|
|
279
|
+
"onClickOutside": true,
|
|
280
|
+
"onEsc": true
|
|
281
|
+
}
|
|
282
|
+
}
|
|
283
|
+
```
|
|
284
|
+
|
|
285
|
+
**Properties:**
|
|
286
|
+
- `kind`: Must be `"highlight"`
|
|
287
|
+
- `id`: Unique identifier for tracking
|
|
288
|
+
- `anchor`: Element selector (same as patches)
|
|
289
|
+
- `copy`: Text to display near the highlight (optional)
|
|
290
|
+
- `ring.paddingPx`: Space between element and ring
|
|
291
|
+
- `ring.radiusPx`: Corner radius of ring
|
|
292
|
+
- `ringColor`: Color of the highlight ring
|
|
293
|
+
- `scrim.opacity`: Opacity of background dimming (0-1)
|
|
294
|
+
- `blocking`: If true, blocks interaction outside highlight
|
|
295
|
+
- `dismiss.onClickOutside`: Close when clicking outside
|
|
296
|
+
- `dismiss.onEsc`: Close on Escape key
|
|
297
|
+
- `dismiss.timeoutMs`: Auto-dismiss after milliseconds
|
|
298
|
+
|
|
299
|
+
### Overlay Recipe Structure
|
|
300
|
+
|
|
301
|
+
Overlays are defined in `overlayRecipe`:
|
|
302
|
+
|
|
303
|
+
```json
|
|
304
|
+
{
|
|
305
|
+
"overlayRecipe": {
|
|
306
|
+
"id": "onboarding_flow",
|
|
307
|
+
"version": 1,
|
|
308
|
+
"routes": ["/dashboard", "/home"],
|
|
309
|
+
"steps": [
|
|
310
|
+
{ "kind": "tooltip", ... },
|
|
311
|
+
{ "kind": "highlight", ... }
|
|
312
|
+
]
|
|
313
|
+
}
|
|
314
|
+
}
|
|
315
|
+
```
|
|
316
|
+
|
|
317
|
+
- `id`: Recipe identifier
|
|
318
|
+
- `version`: Version number for tracking changes
|
|
319
|
+
- `routes`: URL paths where this recipe applies (optional)
|
|
320
|
+
- `steps`: Array of tooltip and highlight steps
|
|
321
|
+
|
|
322
|
+
## Best Practices
|
|
323
|
+
|
|
324
|
+
### 1. Element Selection
|
|
325
|
+
- Use the most specific selector that won't break
|
|
326
|
+
- Prefer data attributes over classes for stability
|
|
327
|
+
- Test selectors across different page states
|
|
328
|
+
|
|
329
|
+
### 2. Tier Selection
|
|
330
|
+
- Start with the lowest tier that works
|
|
331
|
+
- Only use `surgical` when modifying text
|
|
332
|
+
- Document why a specific tier is needed
|
|
333
|
+
|
|
334
|
+
### 3. Operation Order
|
|
335
|
+
- Operations are applied in array order
|
|
336
|
+
- Plan sequences carefully (e.g., addClass before setStyle)
|
|
337
|
+
- Test operation combinations
|
|
338
|
+
|
|
339
|
+
### 4. Performance
|
|
340
|
+
- Batch related patches together
|
|
341
|
+
- Avoid selecting too many elements
|
|
342
|
+
- Use CSS classes instead of inline styles when possible
|
|
343
|
+
|
|
344
|
+
### 5. Compatibility
|
|
345
|
+
- All HTML is sanitized to prevent XSS
|
|
346
|
+
- Classes must be prefixed to avoid conflicts
|
|
347
|
+
- Test across different browsers and devices
|
|
348
|
+
|
|
349
|
+
## Example: Complete A/B Test
|
|
350
|
+
|
|
351
|
+
```json
|
|
352
|
+
{
|
|
353
|
+
"configVersion": "1.0",
|
|
354
|
+
"patches": [
|
|
355
|
+
{
|
|
356
|
+
"id": "hero_headline_test",
|
|
357
|
+
"anchor": {
|
|
358
|
+
"by": "css",
|
|
359
|
+
"value": "h1.hero-title"
|
|
360
|
+
},
|
|
361
|
+
"tier": "surgical",
|
|
362
|
+
"operations": [
|
|
363
|
+
{
|
|
364
|
+
"kind": "setText",
|
|
365
|
+
"text": "Start Your Free Trial Today"
|
|
366
|
+
},
|
|
367
|
+
{
|
|
368
|
+
"kind": "addClass",
|
|
369
|
+
"className": "syntro-tested"
|
|
370
|
+
}
|
|
371
|
+
]
|
|
372
|
+
},
|
|
373
|
+
{
|
|
374
|
+
"id": "cta_enhancement",
|
|
375
|
+
"anchor": {
|
|
376
|
+
"by": "data",
|
|
377
|
+
"key": "testid",
|
|
378
|
+
"value": "primary-cta"
|
|
379
|
+
},
|
|
380
|
+
"tier": "additive",
|
|
381
|
+
"operations": [
|
|
382
|
+
{
|
|
383
|
+
"kind": "setStyle",
|
|
384
|
+
"prop": "boxShadow",
|
|
385
|
+
"value": "0 4px 6px rgba(0,0,0,0.1)"
|
|
386
|
+
},
|
|
387
|
+
{
|
|
388
|
+
"kind": "append",
|
|
389
|
+
"html": "<span class='syntro-arrow'>→</span>"
|
|
390
|
+
}
|
|
391
|
+
]
|
|
392
|
+
}
|
|
393
|
+
]
|
|
394
|
+
}
|
|
395
|
+
```
|
|
396
|
+
|
|
397
|
+
This example:
|
|
398
|
+
1. Changes the hero headline text (requires surgical tier)
|
|
399
|
+
2. Enhances the CTA button with shadow and an arrow icon (uses additive tier)
|
|
400
|
+
3. Properly tracks both changes with IDs
|
package/dist/SmartCanvasApp.js
CHANGED
|
@@ -6,6 +6,7 @@ import { createCanvasConfigFetcher } from "./configFetcher";
|
|
|
6
6
|
import { useCanvasOverlays } from "./hooks/useCanvasOverlays";
|
|
7
7
|
import { useHostPatches } from "./hooks/useHostPatches";
|
|
8
8
|
export function SmartCanvasApp({ controller, fetcher, configUri, configUriFeatureKey = "smart-canvas-config-uri", configFeatureKey = "smart-canvas-config", fetchCredentials = "include", pollIntervalMs, experiments, telemetry, overlayFetcher, overlayConfigUri, overlayConfigFeatureKey = "smart-canvas-overlay-uri", overlayFetchCredentials = "include", footerSlot, launcherLabel, canvasHost, customRenderers, theme, }) {
|
|
9
|
+
var _a, _b, _c;
|
|
9
10
|
const [open, setOpen] = useState(controller.getState().open);
|
|
10
11
|
const derivedFetcher = useMemo(() => {
|
|
11
12
|
if (fetcher)
|
|
@@ -23,17 +24,22 @@ export function SmartCanvasApp({ controller, fetcher, configUri, configUriFeatur
|
|
|
23
24
|
pollIntervalMs,
|
|
24
25
|
experiments,
|
|
25
26
|
});
|
|
26
|
-
const hasContent = configState.
|
|
27
|
+
const hasContent = configState.tiles.length > 0 && !configState.error;
|
|
27
28
|
useEffect(() => controller.subscribe((state) => setOpen(state.open)), [controller]);
|
|
28
29
|
useEffect(() => {
|
|
29
30
|
if (!hasContent && controller.getState().open) {
|
|
30
31
|
controller.setOpen(false);
|
|
31
32
|
}
|
|
32
33
|
}, [controller, hasContent]);
|
|
33
|
-
// Use inline overlay
|
|
34
|
-
const
|
|
34
|
+
// Use inline overlay recipes from main config if present, otherwise use separate fetcher/URI
|
|
35
|
+
const derivedOverlayRecipesFetcher = useMemo(() => {
|
|
36
|
+
var _a;
|
|
35
37
|
if (overlayFetcher)
|
|
36
38
|
return overlayFetcher;
|
|
39
|
+
// Support multiple recipes (new) or single recipe (legacy)
|
|
40
|
+
if ((_a = configState.overlayRecipes) === null || _a === void 0 ? void 0 : _a.length) {
|
|
41
|
+
return async () => configState.overlayRecipes;
|
|
42
|
+
}
|
|
37
43
|
if (configState.overlayRecipe) {
|
|
38
44
|
return async () => configState.overlayRecipe;
|
|
39
45
|
}
|
|
@@ -42,10 +48,10 @@ export function SmartCanvasApp({ controller, fetcher, configUri, configUriFeatur
|
|
|
42
48
|
return undefined;
|
|
43
49
|
}
|
|
44
50
|
return undefined;
|
|
45
|
-
}, [overlayFetcher, configState.overlayRecipe, configState.isLoading, overlayConfigUri]);
|
|
51
|
+
}, [overlayFetcher, configState.overlayRecipes, configState.overlayRecipe, configState.isLoading, overlayConfigUri]);
|
|
46
52
|
useCanvasOverlays({
|
|
47
|
-
|
|
48
|
-
configUri: !
|
|
53
|
+
recipesFetcher: derivedOverlayRecipesFetcher,
|
|
54
|
+
configUri: !derivedOverlayRecipesFetcher && !configState.isLoading ? overlayConfigUri : undefined,
|
|
49
55
|
featureKey: overlayConfigFeatureKey,
|
|
50
56
|
credentials: overlayFetchCredentials,
|
|
51
57
|
experiments,
|
|
@@ -57,12 +63,24 @@ export function SmartCanvasApp({ controller, fetcher, configUri, configUriFeatur
|
|
|
57
63
|
telemetry,
|
|
58
64
|
canvasHost,
|
|
59
65
|
});
|
|
66
|
+
// Merge theme from config (workspace settings) with any direct theme prop
|
|
67
|
+
// Config theme takes precedence for workspace-set values, but theme prop can override
|
|
68
|
+
// NOTE: This must be called BEFORE any early returns to maintain consistent hook order
|
|
69
|
+
const mergedTheme = useMemo(() => {
|
|
70
|
+
const configTheme = configState.theme;
|
|
71
|
+
if (!configTheme)
|
|
72
|
+
return theme;
|
|
73
|
+
// Map CanvasThemeConfig (from config) to CanvasTheme (for overlay)
|
|
74
|
+
return {
|
|
75
|
+
...configTheme, // position, mode, colors, borderRadius from config
|
|
76
|
+
...theme, // any direct overrides from theme prop
|
|
77
|
+
};
|
|
78
|
+
}, [configState.theme, theme]);
|
|
79
|
+
// Only return null after loading completes with no content
|
|
80
|
+
// (Don't return null while loading - that causes a flash of nothing)
|
|
60
81
|
if (!configState.isLoading && !hasContent) {
|
|
61
82
|
return null;
|
|
62
83
|
}
|
|
63
|
-
|
|
64
|
-
return null;
|
|
65
|
-
}
|
|
66
|
-
return (_jsx(ShadowCanvasOverlay, { rectangles: configState.rectangles, isLoading: configState.isLoading, error: configState.error, canvasTitle: configState.canvasTitle, telemetry: telemetry, launcherLabel: launcherLabel, footerSlot: footerSlot, isOpen: open, onToggle: () => controller.toggle(), customRenderers: customRenderers, displayMode: configState.displayMode, theme: theme }));
|
|
84
|
+
return (_jsx(ShadowCanvasOverlay, { tiles: configState.tiles, isLoading: configState.isLoading, error: configState.error, canvasTitle: configState.canvasTitle, telemetry: telemetry, launcherLabel: launcherLabel !== null && launcherLabel !== void 0 ? launcherLabel : (_a = configState.launcher) === null || _a === void 0 ? void 0 : _a.label, launcherAnimate: (_b = configState.launcher) === null || _b === void 0 ? void 0 : _b.animate, launcherAnimationStyle: (_c = configState.launcher) === null || _c === void 0 ? void 0 : _c.animationStyle, footerSlot: footerSlot, isOpen: open, onToggle: () => controller.toggle(), customRenderers: customRenderers, displayMode: configState.displayMode, theme: mergedTheme }));
|
|
67
85
|
}
|
|
68
86
|
//# sourceMappingURL=SmartCanvasApp.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SmartCanvasApp.js","sourceRoot":"","sources":["../src/SmartCanvasApp.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAa,SAAS,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAChE,OAAO,EAAE,mBAAmB,EAAE,MAAM,kCAAkC,CAAC;AAGvE,OAAO,EAAE,qBAAqB,EAAE,MAAM,+BAA+B,CAAC;AAGtE,OAAO,EAAE,yBAAyB,EAAE,MAAM,iBAAiB,CAAC;AAC5D,OAAO,EAAE,iBAAiB,EAAE,MAAM,2BAA2B,CAAC;AAC9D,OAAO,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAC;AA0BxD,MAAM,UAAU,cAAc,CAAC,EAC7B,UAAU,EACV,OAAO,EACP,SAAS,EACT,mBAAmB,GAAG,yBAAyB,EAC/C,gBAAgB,GAAG,qBAAqB,EACxC,gBAAgB,GAAG,SAAS,EAC5B,cAAc,EACd,WAAW,EACX,SAAS,EACT,cAAc,EACd,gBAAgB,EAChB,uBAAuB,GAAG,0BAA0B,EACpD,uBAAuB,GAAG,SAAS,EACnC,UAAU,EACV,aAAa,EACb,UAAU,EACV,eAAe,EACf,KAAK,GACe
|
|
1
|
+
{"version":3,"file":"SmartCanvasApp.js","sourceRoot":"","sources":["../src/SmartCanvasApp.tsx"],"names":[],"mappings":"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"}
|
package/dist/api.d.ts
CHANGED
|
@@ -4,6 +4,7 @@ import type { TelemetryClient } from "./telemetry/types";
|
|
|
4
4
|
import type { CanvasConfigFetcher } from "./types";
|
|
5
5
|
import type { OverlayRecipeFetcher } from "./overlays/fetcher";
|
|
6
6
|
import type { CanvasTheme } from "./components/ShadowCanvasOverlay";
|
|
7
|
+
import type { RenderProps, ActionHandler, AppearanceConfig } from "./render/types";
|
|
7
8
|
export interface SmartCanvasIntegrations {
|
|
8
9
|
experiments?: ExperimentClient;
|
|
9
10
|
telemetry?: TelemetryClient;
|
|
@@ -29,6 +30,14 @@ export interface SmartCanvasConfig {
|
|
|
29
30
|
earlyPatching?: boolean;
|
|
30
31
|
editorUrl?: string;
|
|
31
32
|
theme?: Partial<CanvasTheme>;
|
|
33
|
+
/** Enable automatic theme extraction from host page CSS variables */
|
|
34
|
+
autoDetectTheme?: boolean;
|
|
35
|
+
/** Theme appearance overrides (CSS variables, base theme) */
|
|
36
|
+
appearance?: AppearanceConfig;
|
|
37
|
+
/** Render props for customizing tile/block rendering */
|
|
38
|
+
renderProps?: RenderProps;
|
|
39
|
+
/** Action handlers for interactive blocks */
|
|
40
|
+
actionHandlers?: ActionHandler;
|
|
32
41
|
}
|
|
33
42
|
/**
|
|
34
43
|
* @deprecated Use TileComponent from types.ts
|
|
@@ -48,6 +57,20 @@ export interface SmartCanvasHandle {
|
|
|
48
57
|
setEnabled(enabled: boolean): void;
|
|
49
58
|
registerComponent(key: string, component: MountableComponent): void;
|
|
50
59
|
setOverrideFetcher(fetcher: any): void;
|
|
60
|
+
/**
|
|
61
|
+
* Register properties on the telemetry client (e.g., for session tagging).
|
|
62
|
+
* Used by editor SDK to tag crawler sessions with canonical IDs.
|
|
63
|
+
*/
|
|
64
|
+
registerTelemetryProperties(properties: Record<string, unknown>): void;
|
|
65
|
+
/**
|
|
66
|
+
* Get the current PostHog session ID.
|
|
67
|
+
*/
|
|
68
|
+
getSessionId(): string | undefined;
|
|
69
|
+
/**
|
|
70
|
+
* Force start session recording.
|
|
71
|
+
* Used by editor SDK to bypass bot detection for crawler sessions.
|
|
72
|
+
*/
|
|
73
|
+
startSessionRecording(): void;
|
|
51
74
|
}
|
|
52
75
|
export declare const createSmartCanvas: (config?: SmartCanvasConfig) => Promise<SmartCanvasHandle>;
|
|
53
76
|
declare global {
|
package/dist/api.js
CHANGED
|
@@ -138,12 +138,30 @@ export const createSmartCanvas = async (config = {}) => {
|
|
|
138
138
|
setOverrideFetcher: (newFetcher) => {
|
|
139
139
|
currentFetcher = newFetcher;
|
|
140
140
|
host.setOverrideFetcher(newFetcher);
|
|
141
|
-
}
|
|
141
|
+
},
|
|
142
|
+
registerTelemetryProperties: (properties) => {
|
|
143
|
+
var _a;
|
|
144
|
+
(_a = telemetry === null || telemetry === void 0 ? void 0 : telemetry.register) === null || _a === void 0 ? void 0 : _a.call(telemetry, properties);
|
|
145
|
+
},
|
|
146
|
+
getSessionId: () => {
|
|
147
|
+
var _a;
|
|
148
|
+
return (_a = telemetry === null || telemetry === void 0 ? void 0 : telemetry.getSessionId) === null || _a === void 0 ? void 0 : _a.call(telemetry);
|
|
149
|
+
},
|
|
150
|
+
startSessionRecording: () => {
|
|
151
|
+
var _a;
|
|
152
|
+
(_a = telemetry === null || telemetry === void 0 ? void 0 : telemetry.startSessionRecording) === null || _a === void 0 ? void 0 : _a.call(telemetry);
|
|
153
|
+
},
|
|
142
154
|
};
|
|
143
|
-
//
|
|
144
|
-
//
|
|
145
|
-
|
|
146
|
-
|
|
155
|
+
// Expose handle for editor SDK access
|
|
156
|
+
// In editor mode: always expose (editor needs it to inject tiles and save config)
|
|
157
|
+
// In dev mode: always expose (for debugging)
|
|
158
|
+
// In production: never expose (security)
|
|
159
|
+
if (typeof window !== "undefined") {
|
|
160
|
+
const isEditorMode = new URLSearchParams(window.location.search).has('editor_token');
|
|
161
|
+
const isDev = process.env.NODE_ENV === 'development';
|
|
162
|
+
if (isEditorMode || isDev) {
|
|
163
|
+
window.__smartCanvasHandle = handle;
|
|
164
|
+
}
|
|
147
165
|
}
|
|
148
166
|
return handle;
|
|
149
167
|
};
|
package/dist/api.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"api.js","sourceRoot":"","sources":["../src/api.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAsB,0BAA0B,EAAE,MAAM,sBAAsB,CAAC;AAKtF,OAAO,EAAE,yBAAyB,EAAE,MAAM,iBAAiB,CAAC;AAE5D,OAAO,EAAE,eAAe,EAAE,MAAM,eAAe,CAAC;AAChD,OAAO,EAAE,iBAAiB,EAAE,wBAAwB,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAC/F,OAAO,EAAE,aAAa,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;
|
|
1
|
+
{"version":3,"file":"api.js","sourceRoot":"","sources":["../src/api.tsx"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import type { ComparisonContent } from "../../types";
|
|
2
|
+
interface ComparisonBlockProps {
|
|
3
|
+
content: ComparisonContent;
|
|
4
|
+
accentColor?: string;
|
|
5
|
+
}
|
|
6
|
+
/**
|
|
7
|
+
* Comparison block component - displays items in grid/list/table layout
|
|
8
|
+
*/
|
|
9
|
+
export declare function ComparisonBlock({ content, accentColor }: ComparisonBlockProps): import("react/jsx-runtime").JSX.Element;
|
|
10
|
+
export {};
|