@pixelmatters/markup 1.3.12 → 1.4.1

package/README.md

@@ -35,31 +35,34 @@ CDN drop-in (no build step) — paste this just before `</body>`:
 ```html
 <script type="module">
   // Pin the exact version — esm.sh resolves it from npm
-  import { init } from 'https://esm.sh/@pixelmatters/markup@1.3.12'
+  import { init } from 'https://esm.sh/@pixelmatters/markup@1.4.1'
   // or
-  // import { init } from 'https://esm.run/@pixelmatters/markup@1.3.12'
+  // import { init } from 'https://esm.run/@pixelmatters/markup@1.4.1'
 
   init({
     apiUrl: 'https://your-deployment.convex.site',
     apiKey: 'markup_...',
-    position: 'bottom-right', // optional
-    theme: 'auto', // optional
+    position: 'bottom-right', // optional: 'bottom-right' | 'bottom-left'
+    theme: 'auto', // optional: 'auto' | 'light' | 'dark'
+    fab: 'default', // optional: 'default' | 'icon-only'
   })
 </script>
 ```
 
-> **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.3.12`).
+> **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.4.1`).
 
 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:
 
 ```html
 <script
   type="module"
-  src="https://esm.sh/@pixelmatters/markup@1.3.12"
+  src="https://esm.sh/@pixelmatters/markup@1.4.1"
   data-markup-widget="true"
   data-api-url="https://your-deployment.convex.site"
   data-api-key="markup_..."
   data-position="bottom-right"
+  data-theme="auto"
+  data-fab="default"
 ></script>
 ```
 
@@ -75,8 +78,9 @@ import { init, destroy } from '@pixelmatters/markup'
 const stop = init({
   apiUrl: 'https://your-deployment.convex.site',
   apiKey: 'markup_...',
-  position: 'bottom-right', // optional
-  theme: 'light', // optional
+  position: 'bottom-right', // optional: 'bottom-right' | 'bottom-left'
+  theme: 'light', // optional: 'auto' | 'light' | 'dark'
+  fab: 'default', // optional: 'default' | 'icon-only'
 })
 
 // Tear down on logout / route change / page unload:
@@ -94,8 +98,9 @@ export default function App() {
     return init({
       apiUrl: import.meta.env.VITE_MARKUP_API_URL,
       apiKey: import.meta.env.VITE_MARKUP_API_KEY,
-      position: 'bottom-right', // optional
-      theme: 'auto', // optional
+      position: 'bottom-right', // optional: 'bottom-right' | 'bottom-left'
+      theme: 'auto', // optional: 'auto' | 'light' | 'dark'
+      fab: 'default', // optional: 'default' | 'icon-only'
     })
   }, [])
 
@@ -115,6 +120,9 @@ onMounted(() => {
   stop = init({
     apiUrl: import.meta.env.VITE_MARKUP_API_URL,
     apiKey: import.meta.env.VITE_MARKUP_API_KEY,
+    position: 'bottom-right', // optional: 'bottom-right' | 'bottom-left'
+    theme: 'auto', // optional: 'auto' | 'light' | 'dark'
+    fab: 'default', // optional: 'default' | 'icon-only'
   })
 })
 onBeforeUnmount(() => stop?.())
@@ -132,6 +140,9 @@ export default function App() {
     const stop = init({
       apiUrl: import.meta.env.VITE_MARKUP_API_URL,
       apiKey: import.meta.env.VITE_MARKUP_API_KEY,
+      position: 'bottom-right', // optional: 'bottom-right' | 'bottom-left'
+      theme: 'auto', // optional: 'auto' | 'light' | 'dark'
+      fab: 'default', // optional: 'default' | 'icon-only'
     })
     onCleanup(stop)
   })
@@ -152,6 +163,7 @@ Mounts the widget. Always tears down any existing instance before mounting, so c
 | `apiKey`   | `string`                          | required         | Project API key — mint one in the dashboard                                                                              |
 | `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 |
 | `theme`    | `'light' \| 'dark' \| 'auto'`     | `'auto'`         | Visual theme — `'light'` or `'dark'`, or `'auto'` (default) to follow the host's `prefers-color-scheme`                  |
+| `fab`      | `'default' \| 'icon-only'`        | `'default'`      | Floating button variant — `'icon-only'` drops the "Markup" label for a circular icon button                              |
 
 ### `destroy()`
 
@@ -219,6 +231,7 @@ init({
   apiKey: string,                            // required
   position?: 'bottom-right' | 'bottom-left', // default 'bottom-right'
   theme?: 'light' | 'dark' | 'auto',         // default 'auto'
+  fab?: 'default' | 'icon-only',             // default 'default'
 }) // returns a destroy() function — call it on unmount / logout / route teardown
 ```
 
@@ -231,13 +244,14 @@ For a `<script>` tag drop-in (no bundler), use the inline ESM form and **pin the
 
 ```html
 <script type="module">
-  import { init } from 'https://esm.sh/@pixelmatters/markup@1.3.12'
+  import { init } from 'https://esm.sh/@pixelmatters/markup@1.4.1'
 
   init({
     apiUrl: '...',
     apiKey: '...',
     position: 'bottom-right',
     theme: 'auto',
+    fab: 'default',
   })
 </script>
 ```
@@ -247,11 +261,12 @@ If inline JS is disallowed (some CMS / page-builder editors), use the auto-init
 ```html
 <script
   type="module"
-  src="https://esm.sh/@pixelmatters/markup@1.3.12"
+  src="https://esm.sh/@pixelmatters/markup@1.4.1"
   data-markup-widget="true"
   data-api-url="..."
   data-api-key="..."
   data-position="bottom-right"
+  data-fab="default"
 ></script>
 ```
 

package/dist/widget.d.ts

@@ -1,4 +1,5 @@
 export type WidgetTheme = 'light' | 'dark' | 'auto';
+export type WidgetFab = 'default' | 'icon-only';
 export interface WidgetConfig {
     /** Convex deployment site URL, e.g. `https://your-deployment.convex.site` */
     apiUrl: string;
@@ -13,6 +14,14 @@ export interface WidgetConfig {
      * - `'auto'` (default) — follow the host's `prefers-color-scheme`
      */
     theme?: WidgetTheme;
+    /**
+     * Floating action button variant.
+     * - `'default'` — pill button with icon + "Markup" label
+     * - `'icon-only'` — circular icon-only button (no label)
+     *
+     * Defaults to `'default'`.
+     */
+    fab?: WidgetFab;
 }
 /**
  * Mounts the feedback widget on the page. Idempotent — calling init again