annotate-image 2.0.0-beta.1 → 2.0.0-beta.3

package/dist/vue.js

@@ -1,6 +1,33 @@
 // src/vue.ts
 import { defineComponent, ref, shallowRef, computed, onMounted, onBeforeUnmount, watch, h } from "vue";
 
+// src/positioning.ts
+function clampNote(note, naturalWidth, naturalHeight) {
+  const width = Math.min(note.width, naturalWidth);
+  const height = Math.min(note.height, naturalHeight);
+  const left = Math.max(0, Math.min(note.left, naturalWidth - width));
+  const top = Math.max(0, Math.min(note.top, naturalHeight - height));
+  return { top, left, width, height };
+}
+function clampNotes(notes, naturalWidth, naturalHeight) {
+  for (const note of notes) {
+    Object.assign(note, clampNote(note, naturalWidth, naturalHeight));
+  }
+}
+function computeNoteLeft(noteWidth, areaLeftInViewport, areaWidth, viewportWidth) {
+  let left = (areaWidth - noteWidth) / 2;
+  const noteLeftInViewport = areaLeftInViewport + left;
+  const noteRightInViewport = noteLeftInViewport + noteWidth;
+  if (noteRightInViewport > viewportWidth) {
+    left -= noteRightInViewport - viewportWidth;
+  }
+  const adjustedNoteLeft = areaLeftInViewport + left;
+  if (adjustedNoteLeft < 0) {
+    left -= adjustedNoteLeft;
+  }
+  return left;
+}
+
 // src/annotate-edit.ts
 var DEFAULT_NOTE_TOP = 30;
 var DEFAULT_NOTE_LEFT = 30;
@@ -30,10 +57,11 @@ var AnnotateEdit = class {
       };
     }
     this.area = image.editOverlay.querySelector(".image-annotate-edit-area");
-    this.area.style.height = this.note.height + "px";
-    this.area.style.width = this.note.width + "px";
-    this.area.style.left = this.note.left + "px";
-    this.area.style.top = this.note.top + "px";
+    const rendered = image.toRendered(this.note);
+    this.area.style.height = rendered.height + "px";
+    this.area.style.width = rendered.width + "px";
+    this.area.style.left = rendered.left + "px";
+    this.area.style.top = rendered.top + "px";
     this.form = document.createElement("div");
     this.form.className = "image-annotate-edit-form";
     const formEl = document.createElement("form");
@@ -49,6 +77,8 @@ var AnnotateEdit = class {
     formEl.appendChild(this.textarea);
     this.form.appendChild(formEl);
     this.area.appendChild(this.form);
+    this.positionForm();
+    this.textarea.focus();
     this.form.addEventListener("pointerdown", (e) => e.stopPropagation());
     const area = this.area;
     const applyRect = (rect) => {
@@ -60,7 +90,10 @@ var AnnotateEdit = class {
     this.handlers.makeResizable(area, {
       containment: image.canvas,
       onResize: applyRect,
-      onStop: applyRect
+      onStop: (rect) => {
+        applyRect(rect);
+        this.positionForm();
+      }
     });
     this.handlers.makeDraggable(area, {
       containment: image.canvas,
@@ -71,9 +104,9 @@ var AnnotateEdit = class {
       onStop: (pos) => {
         area.style.left = pos.left + "px";
         area.style.top = pos.top + "px";
+        this.positionForm();
       }
     });
-    this.textarea.focus();
     this.form.addEventListener("keydown", (e) => {
       if (e.key === "Escape") {
         const cancelBtn = this.form.querySelector(".image-annotate-edit-close");
@@ -89,6 +122,13 @@ var AnnotateEdit = class {
     }
     this.addCancelButton(buttonRow);
   }
+  /** Recompute the form's horizontal position relative to the area. */
+  positionForm() {
+    const formRect = this.form.getBoundingClientRect();
+    const areaRect = this.area.getBoundingClientRect();
+    const left = computeNoteLeft(formRect.width, areaRect.left, areaRect.width, window.innerWidth);
+    this.form.style.left = left + "px";
+  }
   /** Tear down the edit form and interaction handlers. */
   destroy() {
     this.image.activeEdit = null;
@@ -120,13 +160,20 @@ var AnnotateEdit = class {
         }
         this.image.notifySave(stripInternals(this.note));
         this.destroy();
+        this.image.flushPendingRescale();
       };
       const pos = readInlinePosition(this.area);
       const size = readInlineSize(this.area);
-      this.note.top = pos.top;
-      this.note.left = pos.left;
-      this.note.width = size.width;
-      this.note.height = size.height;
+      const natural = this.image.toNatural({
+        top: pos.top,
+        left: pos.left,
+        width: size.width,
+        height: size.height
+      });
+      this.note.top = natural.top;
+      this.note.left = natural.left;
+      this.note.width = natural.width;
+      this.note.height = natural.height;
       this.note.text = text;
       if (this.image.api.save) {
         this.busy = true;
@@ -160,6 +207,7 @@ var AnnotateEdit = class {
         const idx = this.image.notes.indexOf(this.note);
         if (idx !== -1) this.image.notes.splice(idx, 1);
         this.image.notifyDelete(stripInternals(this.note));
+        this.image.flushPendingRescale();
       };
       if (this.image.api.delete) {
         this.busy = true;
@@ -235,36 +283,42 @@ var AnnotateView = class {
       });
     }
   }
-  /** Apply the note's position and dimensions to the area element. */
+  /** Apply the note's position and dimensions to the area element, scaled to rendered size. */
   setPosition() {
+    const rendered = this.image.toRendered(this.note);
     const innerDiv = this.area.firstElementChild;
-    innerDiv.style.height = this.note.height + "px";
-    innerDiv.style.width = this.note.width + "px";
-    this.area.style.left = this.note.left + "px";
-    this.area.style.top = this.note.top + "px";
+    innerDiv.style.height = rendered.height + "px";
+    innerDiv.style.width = rendered.width + "px";
+    this.area.style.left = rendered.left + "px";
+    this.area.style.top = rendered.top + "px";
   }
   /** Update the view's position, size, and text from the edit area after a save. */
   resetPosition(editable, text) {
     this.tooltip.textContent = text;
     this.tooltip.style.display = "none";
-    const areaPos = readInlinePosition(editable.area);
-    const areaSize = readInlineSize(editable.area);
+    const rendered = this.image.toRendered(editable.note);
     const innerDiv = this.area.firstElementChild;
-    innerDiv.style.height = areaSize.height + "px";
-    innerDiv.style.width = areaSize.width + "px";
-    this.area.style.left = areaPos.left + "px";
-    this.area.style.top = areaPos.top + "px";
-    this.note.top = areaPos.top;
-    this.note.left = areaPos.left;
-    this.note.height = areaSize.height;
-    this.note.width = areaSize.width;
+    innerDiv.style.height = rendered.height + "px";
+    innerDiv.style.width = rendered.width + "px";
+    this.area.style.left = rendered.left + "px";
+    this.area.style.top = rendered.top + "px";
+    this.note.top = editable.note.top;
+    this.note.left = editable.note.left;
+    this.note.height = editable.note.height;
+    this.note.width = editable.note.width;
     this.note.text = text;
     this.note.id = editable.note.id;
     this.editable = true;
   }
   /** Show the tooltip and apply hover styling. */
   show() {
+    this.tooltip.style.visibility = "hidden";
     this.tooltip.style.display = "block";
+    const noteRect = this.tooltip.getBoundingClientRect();
+    const areaRect = this.area.getBoundingClientRect();
+    const left = computeNoteLeft(noteRect.width, areaRect.left, areaRect.width, window.innerWidth);
+    this.tooltip.style.left = left + "px";
+    this.tooltip.style.visibility = "";
     if (!this.editable) {
       this.area.classList.add("image-annotate-area-hover");
     } else {
@@ -362,17 +416,19 @@ function destroyDraggable(el) {
 var MIN_SIZE = 10;
 var CORNERS = ["nw", "ne", "sw", "se"];
 function computeResize(corner, startLeft, startTop, startWidth, startHeight, dx, dy) {
-  let left = startLeft, top = startTop, width = startWidth, height = startHeight;
+  let left, top, width, height;
   if (corner === "nw" || corner === "sw") {
     left = startLeft + dx;
     width = startWidth - dx;
   } else {
+    left = startLeft;
     width = startWidth + dx;
   }
   if (corner === "nw" || corner === "ne") {
     top = startTop + dy;
     height = startHeight - dy;
   } else {
+    top = startTop;
     height = startHeight + dy;
   }
   if (width < MIN_SIZE) {
@@ -527,17 +583,30 @@ var AnnotateImage = class {
     this._mode = "view";
     this.activeEdit = null;
     this.destroyed = false;
+    this.pendingRescale = false;
+    this.originalParent = null;
+    this.originalNextSibling = null;
     this.options = options;
     this.handlers = createDefaultHandlers();
     this.img = img;
-    const width = img.width;
-    const height = img.height;
-    if (width === 0 || height === 0) {
+    this.naturalWidth = img.naturalWidth || img.width;
+    this.naturalHeight = img.naturalHeight || img.height;
+    const rendered = img.getBoundingClientRect();
+    const renderedWidth = rendered.width || img.width;
+    const renderedHeight = rendered.height || img.height;
+    if (this.naturalWidth === 0 || this.naturalHeight === 0) {
       throw new Error("image-annotate: image must have non-zero dimensions (is the image loaded?)");
     }
+    this.scaleX = renderedWidth / this.naturalWidth;
+    this.scaleY = renderedHeight / this.naturalHeight;
     this.notes = options.notes.map((n) => ({ ...n }));
+    this.originalParent = img.parentNode;
+    this.originalNextSibling = img.nextSibling;
     this.canvas = document.createElement("div");
     this.canvas.className = "image-annotate-canvas";
+    if (options.theme) {
+      this.canvas.dataset.theme = options.theme;
+    }
     this.viewOverlay = document.createElement("div");
     this.viewOverlay.className = "image-annotate-view";
     this.editOverlay = document.createElement("div");
@@ -546,19 +615,13 @@ var AnnotateImage = class {
     const editArea = document.createElement("div");
     editArea.className = "image-annotate-edit-area";
     this.editOverlay.appendChild(editArea);
-    this.canvas.appendChild(this.viewOverlay);
-    this.canvas.appendChild(this.editOverlay);
     if (!img.parentNode) {
       throw new Error("image-annotate: image must be in the DOM before initialization");
     }
-    img.parentNode.insertBefore(this.canvas, img.nextSibling);
-    this.canvas.style.height = height + "px";
-    this.canvas.style.width = width + "px";
-    this.canvas.style.backgroundImage = 'url("' + img.src + '")';
-    this.viewOverlay.style.height = height + "px";
-    this.viewOverlay.style.width = width + "px";
-    this.editOverlay.style.height = height + "px";
-    this.editOverlay.style.width = width + "px";
+    img.parentNode.insertBefore(this.canvas, img);
+    this.canvas.appendChild(img);
+    this.canvas.appendChild(this.viewOverlay);
+    this.canvas.appendChild(this.editOverlay);
     this.api = this.options.api ? normalizeApi(this.options.api) : {};
     if (this.api.load) {
       this.loadFromApi();
@@ -568,7 +631,38 @@ var AnnotateImage = class {
     if (this.options.editable) {
       this.createButton();
     }
-    img.style.display = "none";
+    if (options.autoResize !== false && typeof ResizeObserver !== "undefined") {
+      this.resizeObserver = new ResizeObserver((entries) => {
+        const entry = entries[0];
+        if (!entry) return;
+        const { width, height } = entry.contentRect;
+        if (width === 0 || height === 0) return;
+        this.rescale(width, height);
+      });
+      this.resizeObserver.observe(this.canvas);
+    }
+  }
+  /** Convert a rect from natural image coordinates to rendered (scaled) coordinates. */
+  toRendered(rect) {
+    return {
+      top: rect.top * this.scaleY,
+      left: rect.left * this.scaleX,
+      width: rect.width * this.scaleX,
+      height: rect.height * this.scaleY
+    };
+  }
+  /** Convert a rect from rendered (scaled) coordinates to natural image coordinates. */
+  toNatural(rect) {
+    const result = {
+      top: rect.top / this.scaleY,
+      left: rect.left / this.scaleX,
+      width: rect.width / this.scaleX,
+      height: rect.height / this.scaleY
+    };
+    if (!isFinite(result.top) || !isFinite(result.left) || !isFinite(result.width) || !isFinite(result.height)) {
+      throw new Error("image-annotate: scale conversion produced non-finite coordinates");
+    }
+    return result;
   }
   /** Current interaction mode — 'view' for browsing, 'edit' when an annotation is being created or modified. */
   get mode() {
@@ -622,6 +716,7 @@ var AnnotateImage = class {
   /** Rebuild annotation views from the current notes array. */
   load() {
     this.destroyViews();
+    clampNotes(this.notes, this.naturalWidth, this.naturalHeight);
     this.createViews();
     this.notifyLoad();
   }
@@ -640,8 +735,15 @@ var AnnotateImage = class {
     if (this.button) {
       this.button.remove();
     }
+    if (this.resizeObserver) {
+      this.resizeObserver.disconnect();
+      this.resizeObserver = void 0;
+    }
+    if (this.originalParent && this.originalParent.isConnected) {
+      const ref2 = this.originalNextSibling?.parentNode === this.originalParent ? this.originalNextSibling : null;
+      this.originalParent.insertBefore(this.img, ref2);
+    }
     this.canvas.remove();
-    this.img.style.display = "";
   }
   /** Cancel the active edit (if any) and return to view mode. */
   cancelEdit() {
@@ -649,6 +751,34 @@ var AnnotateImage = class {
       this.activeEdit.destroy();
       this.setMode("view");
     }
+    this.flushPendingRescale();
+  }
+  /** Recompute scale factors, deferring if an edit is active. */
+  rescale(renderedWidth, renderedHeight) {
+    if (this.mode === "edit") {
+      this.pendingRescale = true;
+      return;
+    }
+    this.applyRescale(renderedWidth, renderedHeight);
+  }
+  /** Apply new scale factors and re-render all views. */
+  applyRescale(renderedWidth, renderedHeight) {
+    const newScaleX = renderedWidth / this.naturalWidth;
+    const newScaleY = renderedHeight / this.naturalHeight;
+    if (newScaleX === this.scaleX && newScaleY === this.scaleY) return;
+    this.scaleX = newScaleX;
+    this.scaleY = newScaleY;
+    this.destroyViews();
+    this.createViews();
+  }
+  /** @internal Flush any deferred rescale after an edit completes. */
+  flushPendingRescale() {
+    if (!this.pendingRescale) return;
+    this.pendingRescale = false;
+    const rect = this.canvas.getBoundingClientRect();
+    if (rect.width > 0 && rect.height > 0) {
+      this.applyRescale(rect.width, rect.height);
+    }
   }
   /** Replace all annotations with new data. Does not fire lifecycle callbacks. */
   setNotes(notes) {
@@ -695,6 +825,7 @@ var AnnotateImage = class {
     this.api.load().then((notes) => {
       this.destroyViews();
       this.notes = notes;
+      clampNotes(this.notes, this.naturalWidth, this.naturalHeight);
       this.createViews();
       this.notifyLoad();
     }).catch((err) => {
@@ -731,7 +862,9 @@ var AnnotateImage2 = defineComponent({
     /** Annotations to render. */
     notes: { type: Array },
     /** Enable annotation editing. Default: true. */
-    editable: { type: Boolean, default: true }
+    editable: { type: Boolean, default: true },
+    /** Enable automatic re-scaling when the container resizes. Default: true. */
+    autoResize: { type: Boolean, default: true }
   },
   emits: {
     save: (_note) => true,
@@ -749,6 +882,7 @@ var AnnotateImage2 = defineComponent({
       try {
         const instance = new AnnotateImage(imgRef.value, {
           editable: props.editable,
+          autoResize: props.autoResize,
           notes: props.notes ? props.notes.slice() : [],
           onChange: (notes) => {
             currentNotes.value = notes;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "annotate-image",
-  "version": "2.0.0-beta.1",
+  "version": "2.0.0-beta.3",
   "description": "Create Flickr-like comment annotations on images — draw rectangles, add notes, save via AJAX or static data",
   "license": "GPL-2.0",
   "repository": {
@@ -64,35 +64,35 @@
     "demo:watch:react": "esbuild src/react.tsx --bundle --format=esm --external:react --external:react-dom --outfile=dist/react.js --watch",
     "demo:watch:vue": "esbuild src/vue.ts --bundle --format=esm --external:vue --outfile=dist/vue.js --watch",
     "demo:watch:css": "esbuild src/annotation.css --minify --outfile=dist/css/annotate.min.css --watch",
-    "demo:serve": "live-server --port=8080 --open=demo/index.html --watch=dist,demo",
+    "demo:serve": "browser-sync start --server --port 8080 --startPath demo/index.html --files 'dist/**/*' 'demo/**/*'",
     "demo:ci": "npm run build && concurrently -k \"npm:demo:watch:*\" \"npm:demo:serve:ci\"",
-    "demo:serve:ci": "live-server --port=8080 --no-browser --watch=dist,demo"
+    "demo:serve:ci": "browser-sync start --server --port 8080 --no-open --files 'dist/**/*' 'demo/**/*'"
   },
   "devDependencies": {
-    "@eslint/js": "^9.39.2",
+    "@eslint/js": "^9.39.4",
     "@playwright/test": "^1.58.2",
     "@testing-library/dom": "^10.4.1",
     "@testing-library/react": "^16.3.2",
-    "@types/jquery": "^3.5.33",
+    "@types/jquery": "^3.5.34",
     "@types/react": "^18.3.28",
     "@types/react-dom": "^18.3.7",
     "@vue/test-utils": "^2.4.6",
+    "browser-sync": "^3.0.4",
     "concurrently": "^9.2.1",
-    "esbuild": "^0.27.3",
-    "eslint": "^9.39.2",
+    "esbuild": "^0.28.1",
+    "eslint": "^9.39.4",
     "eslint-config-prettier": "^10.1.8",
     "eslint-plugin-react-hooks": "^7.0.1",
     "eslint-plugin-vue": "^10.8.0",
     "jquery": "^3.7.1",
-    "jsdom": "^28.0.0",
-    "live-server": "^1.2.2",
+    "jsdom": "^28.1.0",
     "prettier": "^3.8.1",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "typescript": "^5.9.3",
-    "typescript-eslint": "^8.55.0",
-    "vitest": "^4.0.18",
-    "vue": "^3.5.28"
+    "typescript-eslint": "^8.57.0",
+    "vitest": "^4.1.0",
+    "vue": "^3.5.30"
   },
   "peerDependencies": {
     "jquery": ">=3.7.0",

package/readme.md

@@ -1,9 +1,23 @@
 # Annotate Image
 
+<p align="center">
+  <a href="https://pullpatchpush.com/annotate-image"><img src="assets/image-annotate-preview.jpg" alt="Annotate Image preview" width="387"></a>
+</p>
+
+<p align="center">
+  <a href="https://www.npmjs.com/package/annotate-image"><img src="https://img.shields.io/npm/v/annotate-image" alt="npm version"></a>
+  <a href="https://www.npmjs.com/package/annotate-image"><img src="https://img.shields.io/npm/dm/annotate-image" alt="npm downloads"></a>
+  <a href="https://bundlephobia.com/package/annotate-image"><img src="https://img.shields.io/bundlephobia/minzip/annotate-image" alt="bundle size"></a>
+  <img src="https://img.shields.io/badge/TypeScript-strict-blue" alt="TypeScript strict">
+  <a href="https://www.npmjs.com/package/annotate-image"><img src="https://img.shields.io/npm/l/annotate-image" alt="license"></a>
+</p>
+
 A JavaScript image annotation plugin that creates Flickr-like comment annotations on images. Users can draw rectangular regions on images, add text notes, and persist annotations via callbacks or AJAX.
 
 Works standalone (vanilla JS), or with jQuery, React, or Vue. Framework adapters are tree-shakeable — only the one you import gets bundled.
 
+**[Documentation & Live Demo](https://pullpatchpush.com/annotate-image)**
+
 ## Installation
 
 ```sh
@@ -171,6 +185,8 @@ Creates an annotation layer on an image element. Returns an `AnnotateImage` inst
 | `onDelete` | `(note: NoteData) => void` | — | Called after a note is deleted |
 | `onLoad` | `(notes: NoteData[]) => void` | — | Called after notes are loaded |
 | `onError` | `(ctx: AnnotateErrorContext) => void` | — | Called on API errors (defaults to `console.error`) |
+| `autoResize` | `boolean` | `true` | Re-scale annotations when the container resizes |
+| `theme` | `string` | — | CSS theme name; sets `data-theme` on the canvas for variable scoping |
 
 #### `AnnotateApi`
 
@@ -228,6 +244,7 @@ type NoteData = Omit<AnnotationNote, 'view' | 'editable'>;
 | `onDelete` | `(note: NoteData) => void` | — | Note deleted |
 | `onLoad` | `(notes: NoteData[]) => void` | — | Notes loaded |
 | `onError` | `(ctx: AnnotateErrorContext) => void` | — | Error occurred |
+| `autoResize` | `boolean` | `true` | Re-scale on container resize |
 
 #### Ref Methods (`AnnotateImageRef`)
 
@@ -249,6 +266,7 @@ type NoteData = Omit<AnnotationNote, 'view' | 'editable'>;
 | `height` | `Number` | — | Image height in pixels |
 | `notes` | `AnnotationNote[]` | — | Initial annotations |
 | `editable` | `Boolean` | `true` | Enable editing |
+| `autoResize` | `Boolean` | `true` | Re-scale on container resize |
 
 #### Emits
 
@@ -270,6 +288,97 @@ type NoteData = Omit<AnnotationNote, 'view' | 'editable'>;
 | `getNotes()` | `NoteData[]` | Get current annotations |
 | `notes` | `Ref<NoteData[]>` | Reactive current notes |
 
+## Scaling
+
+The plugin automatically detects the rendered image size and scales annotations accordingly. Annotation coordinates are always stored in natural (original) image pixels, so the same data works regardless of display size.
+
+- **CSS constraints** (e.g., `max-width: 500px`) are respected automatically
+- **HTML size attributes** (e.g., `width="400"`) work as expected
+- **Responsive layouts** are supported via `ResizeObserver` — annotations reposition when the container resizes
+- Set `autoResize: false` to disable dynamic resizing (annotations scale once at initialization)
+
+```js
+// Works automatically — no configuration needed
+annotate(document.getElementById('myImage'), {
+  notes: [/* coordinates in natural image pixels */],
+});
+
+// Disable dynamic resizing
+annotate(document.getElementById('myImage'), {
+  autoResize: false,
+  notes: [/* ... */],
+});
+```
+
+## Theming
+
+The plugin uses CSS custom properties for all visual styling. Override these variables in your CSS to create custom themes.
+
+### Using the `theme` option
+
+Set `theme` in options to add a `data-theme` attribute to the canvas element, enabling CSS scoping:
+
+```js
+annotate(document.getElementById('myImage'), {
+  theme: 'dark',
+  notes: [/* ... */],
+});
+```
+
+```css
+.image-annotate-canvas[data-theme="dark"] {
+  --image-annotate-area-border: rgba(255, 255, 255, 0.7);
+  --image-annotate-area-bg: rgba(100, 149, 237, 0.15);
+  --image-annotate-note-bg: #2a2a3e;
+  --image-annotate-note-text: #e0e0f0;
+  --image-annotate-note-radius: 4px;
+  --image-annotate-note-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
+  /* ... see demo for full example */
+}
+```
+
+Multiple instances on the same page can use different themes.
+
+Button icons (save, delete, cancel) use CSS `mask-image`, so their color automatically follows `--image-annotate-button-text`. Dark themes just need to set the text color — no icon overrides required.
+
+### Available CSS variables
+
+Set on `.image-annotate-canvas`:
+
+| Variable | Default | Description |
+|---|---|---|
+| `--image-annotate-canvas-border` | `none` | Border around the canvas |
+| `--image-annotate-font-family` | `Verdana, sans-serif` | Font for notes and buttons |
+| `--image-annotate-font-size` | `12px` | Font size for notes and buttons |
+| `--image-annotate-area-border` | `#000` | Annotation rectangle border color |
+| `--image-annotate-area-inner-border` | `#fff` | Annotation inner border color |
+| `--image-annotate-area-bg` | `transparent` | Annotation rectangle fill |
+| `--image-annotate-area-border-width` | `1px` | Annotation border thickness |
+| `--image-annotate-area-border-style` | `solid` | Annotation border style |
+| `--image-annotate-area-radius` | `0` | Annotation border-radius |
+| `--image-annotate-hover-color` | `yellow` | Hover border color (read-only) |
+| `--image-annotate-hover-editable-color` | `#00ad00` | Hover border color (editable) |
+| `--image-annotate-hover-bg` | `transparent` | Hover background fill |
+| `--image-annotate-note-bg` | `#e7ffe7` | Tooltip background |
+| `--image-annotate-note-border` | `#397f39` | Tooltip border |
+| `--image-annotate-note-text` | `#000` | Tooltip text color |
+| `--image-annotate-note-radius` | `0` | Tooltip border-radius |
+| `--image-annotate-note-shadow` | `none` | Tooltip box-shadow |
+| `--image-annotate-note-max-width` | `300px` | Tooltip max width |
+| `--image-annotate-edit-bg` | `#fffee3` | Edit form background |
+| `--image-annotate-edit-border` | `#000` | Edit form border |
+| `--image-annotate-edit-radius` | `0` | Edit form border-radius |
+| `--image-annotate-edit-shadow` | `none` | Edit form box-shadow |
+| `--image-annotate-edit-max-width` | `300px` | Edit form max width |
+| `--image-annotate-button-bg` | `#fff` | Button background |
+| `--image-annotate-button-bg-hover` | `#eee` | Button hover background |
+| `--image-annotate-button-border` | `#ccc` | Button border |
+| `--image-annotate-button-text` | `#000` | Button text and icon color |
+| `--image-annotate-add-bg` | `rgba(0,0,0,0.4)` | Add Note button background |
+| `--image-annotate-add-bg-hover` | `rgba(0,0,0,0.6)` | Add Note button hover background |
+| `--image-annotate-add-border` | `1px solid rgba(255,255,255,0.5)` | Add Note button border |
+| `--image-annotate-add-radius` | `4px` | Add Note button border-radius |
+
 ## Tree Shaking
 
 Each entry point (`annotate-image`, `annotate-image/jquery`, `annotate-image/react`, `annotate-image/vue`) is a separate bundle. Importing one does not pull in the others. Unused framework adapters are excluded automatically by bundlers that support package `exports`.
@@ -301,13 +410,13 @@ The plugin supports keyboard navigation:
 
 ## Demos
 
-Run the demo server locally:
+Try the [live examples](https://pullpatchpush.com/annotate-image/examples) online, or run the demo server locally:
 
 ```sh
 npm run demo
 ```
 
-This opens a browser at `http://localhost:8080/demo/index.html` with links to demos including static annotations, AJAX loading, vanilla JS, React, Vue, and multiple instances.
+This opens a browser at `http://localhost:8080/demo/index.html` with links to demos including static annotations, AJAX loading, vanilla JS, React, Vue, multiple instances, and CSS theming.
 
 ## Build