@pixelmatters/markup 1.5.0 → 1.6.0

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.
Files changed (4) hide show
  1. package/README.md +26 -20
  2. package/dist/widget.d.ts +1 -1
  3. package/dist/widget.js +236 -215
  4. package/package.json +1 -1
package/README.md CHANGED
@@ -35,28 +35,28 @@ CDN drop-in (no build step) — paste this just before `</body>`:
35
35
  ```html
36
36
  <script type="module">
37
37
  // Pin the exact version — esm.sh resolves it from npm
38
- import { init } from 'https://esm.sh/@pixelmatters/markup@1.5.0'
38
+ import { init } from 'https://esm.sh/@pixelmatters/markup@1.6.0'
39
39
  // or
40
- // import { init } from 'https://esm.run/@pixelmatters/markup@1.5.0'
40
+ // import { init } from 'https://esm.run/@pixelmatters/markup@1.6.0'
41
41
 
42
42
  init({
43
43
  apiUrl: 'https://your-deployment.convex.site',
44
44
  apiKey: 'markup_...',
45
- position: 'bottom-right', // optional: 'bottom-right' | 'bottom-left'
45
+ position: 'bottom-right', // optional: 'bottom-right' | 'bottom-left' | 'bottom-center'
46
46
  theme: 'auto', // optional: 'auto' | 'light' | 'dark'
47
47
  fab: 'default', // optional: 'default' | 'icon-only'
48
48
  })
49
49
  </script>
50
50
  ```
51
51
 
52
- > **Why pin the version?** CDN URLs without a version (`@pixelmatters/markup`) resolve to whatever's `latest` on npm — a future major release will break your page silently. Always pin (`@pixelmatters/markup@1.5.0`).
52
+ > **Why pin the version?** CDN URLs without a version (`@pixelmatters/markup`) resolve to whatever's `latest` on npm — a future major release will break your page silently. Always pin (`@pixelmatters/markup@1.6.0`).
53
53
 
54
54
  If your platform doesn't allow inline JS (some CMS / page-builder editors), use the auto-init form instead — point a `<script src=…>` at the bundle and pass config via `data-*` attributes:
55
55
 
56
56
  ```html
57
57
  <script
58
58
  type="module"
59
- src="https://esm.sh/@pixelmatters/markup@1.5.0"
59
+ src="https://esm.sh/@pixelmatters/markup@1.6.0"
60
60
  data-markup-widget="true"
61
61
  data-api-url="https://your-deployment.convex.site"
62
62
  data-api-key="markup_..."
@@ -78,7 +78,7 @@ import { init, destroy } from '@pixelmatters/markup'
78
78
  const stop = init({
79
79
  apiUrl: 'https://your-deployment.convex.site',
80
80
  apiKey: 'markup_...',
81
- position: 'bottom-right', // optional: 'bottom-right' | 'bottom-left'
81
+ position: 'bottom-right', // optional: 'bottom-right' | 'bottom-left' | 'bottom-center'
82
82
  theme: 'light', // optional: 'auto' | 'light' | 'dark'
83
83
  fab: 'default', // optional: 'default' | 'icon-only'
84
84
  })
@@ -98,7 +98,7 @@ export default function App() {
98
98
  return init({
99
99
  apiUrl: import.meta.env.VITE_MARKUP_API_URL,
100
100
  apiKey: import.meta.env.VITE_MARKUP_API_KEY,
101
- position: 'bottom-right', // optional: 'bottom-right' | 'bottom-left'
101
+ position: 'bottom-right', // optional: 'bottom-right' | 'bottom-left' | 'bottom-center'
102
102
  theme: 'auto', // optional: 'auto' | 'light' | 'dark'
103
103
  fab: 'default', // optional: 'default' | 'icon-only'
104
104
  })
@@ -120,7 +120,7 @@ onMounted(() => {
120
120
  stop = init({
121
121
  apiUrl: import.meta.env.VITE_MARKUP_API_URL,
122
122
  apiKey: import.meta.env.VITE_MARKUP_API_KEY,
123
- position: 'bottom-right', // optional: 'bottom-right' | 'bottom-left'
123
+ position: 'bottom-right', // optional: 'bottom-right' | 'bottom-left' | 'bottom-center'
124
124
  theme: 'auto', // optional: 'auto' | 'light' | 'dark'
125
125
  fab: 'default', // optional: 'default' | 'icon-only'
126
126
  })
@@ -140,7 +140,7 @@ export default function App() {
140
140
  const stop = init({
141
141
  apiUrl: import.meta.env.VITE_MARKUP_API_URL,
142
142
  apiKey: import.meta.env.VITE_MARKUP_API_KEY,
143
- position: 'bottom-right', // optional: 'bottom-right' | 'bottom-left'
143
+ position: 'bottom-right', // optional: 'bottom-right' | 'bottom-left' | 'bottom-center'
144
144
  theme: 'auto', // optional: 'auto' | 'light' | 'dark'
145
145
  fab: 'default', // optional: 'default' | 'icon-only'
146
146
  })
@@ -157,13 +157,13 @@ export default function App() {
157
157
 
158
158
  Mounts the widget. Always tears down any existing instance before mounting, so calling `init` again (with the same or a different config) is safe. Returns the `destroy` function.
159
159
 
160
- | Option | Type | Default | Description |
161
- | ---------- | --------------------------------- | ---------------- | ------------------------------------------------------------------------------------------------------------------------ |
162
- | `apiUrl` | `string` | required | Convex deployment site URL (`https://*.convex.site`) |
163
- | `apiKey` | `string` | required | Project API key — mint one in the dashboard |
164
- | `position` | `'bottom-right' \| 'bottom-left'` | `'bottom-right'` | Initial corner for the floating action button — users can drag it across the viewport midline to flip corners at runtime |
165
- | `theme` | `'light' \| 'dark' \| 'auto'` | `'auto'` | Visual theme — `'light'` or `'dark'`, or `'auto'` (default) to follow the host's `prefers-color-scheme` |
166
- | `fab` | `'default' \| 'icon-only'` | `'default'` | Floating button variant — `'icon-only'` drops the "Markup" label for a circular icon button |
160
+ | Option | Type | Default | Description |
161
+ | ---------- | ---------------------------------------------------- | ---------------- | ------------------------------------------------------------------------------------------------------------------------------------- |
162
+ | `apiUrl` | `string` | required | Convex deployment site URL (`https://*.convex.site`) |
163
+ | `apiKey` | `string` | required | Project API key — mint one in the dashboard |
164
+ | `position` | `'bottom-right' \| 'bottom-left' \| 'bottom-center'` | `'bottom-right'` | Initial placement for the floating action button — users can drag it across the viewport thirds to snap between left / center / right |
165
+ | `theme` | `'light' \| 'dark' \| 'auto'` | `'auto'` | Visual theme — `'light'` or `'dark'`, or `'auto'` (default) to follow the host's `prefers-color-scheme` |
166
+ | `fab` | `'default' \| 'icon-only'` | `'default'` | Floating button variant — `'icon-only'` drops the "Markup" label for a circular icon button |
167
167
 
168
168
  ### `destroy()`
169
169
 
@@ -234,7 +234,13 @@ The popup origin is validated against the project's `allowedDomains` before any
234
234
 
235
235
  ## AI prompt
236
236
 
237
- Paste the block below into Claude, ChatGPT, Cursor, or any other LLM and it'll wire the widget into your codebase end-to-end.
237
+ If your IDE / agent supports the [`skills`](https://www.npmjs.com/package/skills) CLI (Claude Code, Cursor, etc.), install the bundled skill instead of pasting a prompt — it gives the agent persistent, up-to-date install + troubleshooting guidance:
238
+
239
+ ```bash
240
+ npx skills add Pixelmatters/markup --skill pixelmatters-markup
241
+ ```
242
+
243
+ Otherwise, paste the block below into Claude, ChatGPT, Cursor, or any other LLM and it'll wire the widget into your codebase end-to-end.
238
244
 
239
245
  ````markdown
240
246
  You are helping me install the **`@pixelmatters/markup`** feedback widget into my web app.
@@ -257,7 +263,7 @@ import { init, destroy } from '@pixelmatters/markup'
257
263
  init({
258
264
  apiUrl: string, // required
259
265
  apiKey: string, // required
260
- position?: 'bottom-right' | 'bottom-left', // default 'bottom-right'
266
+ position?: 'bottom-right' | 'bottom-left' | 'bottom-center', // default 'bottom-right'
261
267
  theme?: 'light' | 'dark' | 'auto', // default 'auto'
262
268
  fab?: 'default' | 'icon-only', // default 'default'
263
269
  }) // returns a destroy() function — call it on unmount / logout / route teardown
@@ -272,7 +278,7 @@ For a `<script>` tag drop-in (no bundler), use the inline ESM form and **pin the
272
278
 
273
279
  ```html
274
280
  <script type="module">
275
- import { init } from 'https://esm.sh/@pixelmatters/markup@1.5.0'
281
+ import { init } from 'https://esm.sh/@pixelmatters/markup@1.6.0'
276
282
 
277
283
  init({
278
284
  apiUrl: '...',
@@ -289,7 +295,7 @@ If inline JS is disallowed (some CMS / page-builder editors), use the auto-init
289
295
  ```html
290
296
  <script
291
297
  type="module"
292
- src="https://esm.sh/@pixelmatters/markup@1.5.0"
298
+ src="https://esm.sh/@pixelmatters/markup@1.6.0"
293
299
  data-markup-widget="true"
294
300
  data-api-url="..."
295
301
  data-api-key="..."
package/dist/widget.d.ts CHANGED
@@ -14,7 +14,7 @@ export interface WidgetConfig {
14
14
  /** Raw API key minted from a project's settings page */
15
15
  apiKey: string;
16
16
  /** Where the floating button sits. Defaults to bottom-right. */
17
- position?: 'bottom-right' | 'bottom-left';
17
+ position?: 'bottom-right' | 'bottom-left' | 'bottom-center';
18
18
  /**
19
19
  * Visual theme.
20
20
  * - `'light'` — force light palette