@linkurious/ogma-annotations 2.1.2 → 2.1.3

package/dist/ui.mjs

@@ -1,47 +1,47 @@
-var x = Object.defineProperty;
-var $ = (r, t, e) => t in r ? x(r, t, { enumerable: !0, configurable: !0, writable: !0, value: e }) : r[t] = e;
-var l = (r, t, e) => $(r, typeof t != "symbol" ? t + "" : t, e);
-import { RgbaBase as M } from "vanilla-colorful/lib/entrypoints/rgba";
-import { j as g, s as L, t as T, i as P, v as k, h as b, G as d, aJ as B, D as C, ak as E, af as S } from "./Polygon-BsnVN6js.js";
-const y = "rgba-color-picker";
-class D extends M {
+var _ = Object.defineProperty;
+var R = (i, t, e) => t in i ? _(i, t, { enumerable: !0, configurable: !0, writable: !0, value: e }) : i[t] = e;
+var r = (i, t, e) => R(i, typeof t != "symbol" ? t + "" : t, e);
+import { RgbaBase as z } from "vanilla-colorful/lib/entrypoints/rgba";
+import { j as w, s as g, t as $, i as B, v as E, h as S, K as m, aN as F, D as x, an as M, ai as P, F as W, u as V, L as q, al as L, aM as U } from "./Polygon-C9ZkyU-t.js";
+const k = "rgba-color-picker";
+class Y extends z {
 }
-function F() {
-  return customElements.get(y) || customElements.define(y, D), document.createElement(y);
+function N() {
+  return customElements.get(k) || customElements.define(k, Y), document.createElement(k);
 }
-const O = [
+const j = [
   { value: "#f5f5f5", style: "--circle-color: #f5f5f5;" },
   { value: "#EDE6FF", style: "--circle-color: #EDE6FF;" },
   {
     value: "transparent",
     style: "--circle-color: white; border: 2px dashed #ccc;"
   }
-], m = [
+], C = [
   { value: "sans-serif", label: "Sans Serif", icon: "type" },
   { value: "serif", label: "Serif", icon: "italic" },
   { value: "monospace", label: "Monospace", icon: "code" }
-], N = [
+], G = [
   { value: "none", label: "None", icon: "x" },
   { value: "arrow", label: "Open Arrow", icon: "arrow-left" },
   { value: "arrow-plain", label: "Filled Arrow", icon: "play" },
   { value: "halo-dot", label: "Halo Dot", icon: "circle-dot" },
   { value: "dot", label: "Dot", icon: "dot" }
-], R = [
+], X = [
   { value: "plain", icon: "circle" },
   { value: "dashed", icon: "circle-dashed" }
-], H = ["#0099FF", "#FF7523", "#44AA99"];
-function I(r) {
-  return `rgba(${r.r}, ${r.g}, ${r.b}, ${r.a})`;
+], J = ["#0099FF", "#FF7523", "#44AA99"];
+function D(i) {
+  return `rgba(${i.r}, ${i.g}, ${i.b}, ${i.a})`;
 }
-const _ = 3;
-function z() {
-  return { colors: [...H], activeIndex: 0 };
+const K = 3;
+function Z() {
+  return { colors: [...J], activeIndex: 0 };
 }
-function q(r, t) {
-  const e = r.colors.indexOf(t);
-  return e === -1 ? { colors: [t, ...r.colors].slice(0, _), activeIndex: 0 } : { colors: r.colors, activeIndex: e };
+function Q(i, t) {
+  const e = i.colors.indexOf(t);
+  return e === -1 ? { colors: [t, ...i.colors].slice(0, K), activeIndex: 0 } : { colors: i.colors, activeIndex: e };
 }
-const W = {
+const tt = {
   "chevron-down": '<path d="m6 9 6 6 6-6"/>',
   x: '<path d="M18 6 6 18"/><path d="m6 6 12 12"/>',
   "arrow-left": '<path d="m12 19-7-7 7-7"/><path d="M19 12H5"/>',
@@ -53,6 +53,8 @@ const W = {
   "circle-dashed": '<path d="M10.1 2.182a10 10 0 0 1 3.8 0"/><path d="M13.9 21.818a10 10 0 0 1-3.8 0"/><path d="M17.609 3.721a10 10 0 0 1 2.69 2.7"/><path d="M2.182 13.9a10 10 0 0 1 0-3.8"/><path d="M20.279 17.609a10 10 0 0 1-2.7 2.69"/><path d="M21.818 10.1a10 10 0 0 1 0 3.8"/><path d="M3.721 6.391a10 10 0 0 1 2.7-2.69"/><path d="M6.391 20.279a10 10 0 0 1-2.69-2.7"/>',
   type: '<path d="M4 7V4h16v3"/><path d="M9 20h6"/><path d="M12 4v16"/>',
   italic: '<line x1="19" x2="10" y1="4" y2="4"/><line x1="14" x2="5" y1="20" y2="20"/><line x1="15" x2="9" y1="4" y2="20"/>',
+  bold: '<path d="M6 12h9a4 4 0 0 1 0 8H7a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1h7a4 4 0 0 1 0 8"/>',
+  user: '<path d="M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/>',
   code: '<polyline points="16 18 22 12 16 6"/><polyline points="8 6 2 12 8 18"/>',
   trash: '<path d="M3 6h18"/><path d="M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6"/><path d="M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2"/>',
   undo: '<path d="M3 7v6h6"/><path d="M21 17a9 9 0 0 0-9-9 9 9 0 0 0-6 2.3L3 13"/>',
@@ -68,74 +70,100 @@ const W = {
   "rotate-ccw": '<path d="M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8"/><path d="M3 3v5h5"/>',
   minimize: '<path d="M8 3v3a2 2 0 0 1-2 2H3"/><path d="M21 8h-3a2 2 0 0 1-2-2V3"/><path d="M3 16h3a2 2 0 0 1 2 2v3"/><path d="M16 21v-3a2 2 0 0 1 2-2h3"/>'
 };
-function v(r, t = 18) {
-  return `<svg xmlns="http://www.w3.org/2000/svg" width="${t}" height="${t}" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">${W[r]}</svg>`;
+function b(i, t = 18) {
+  return `<svg xmlns="http://www.w3.org/2000/svg" width="${t}" height="${t}" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">${tt[i]}</svg>`;
 }
-const V = 150;
-function U(r, { onShow: t, onHide: e }) {
-  let o = null, i = null;
-  const n = () => {
-    i !== null && (clearTimeout(i), i = null);
-  }, s = () => {
-    n(), o && (t(o), o = null);
-  }, a = (h) => {
-    if (n(), h.ids.length === 1) {
-      const u = r.getAnnotation(h.ids[0]);
-      if (!u) return;
-      if (o = u, r.isDrawing()) {
-        r.once("cancelDrawing", s), r.once("completeDrawing", s);
+const et = 150;
+function O(i, { onShow: t, onHide: e, hideWhenNotEditable: o = !0 }) {
+  const n = (p) => !o || i.isAnnotationEditable(p);
+  let s = null, a = null, d = null, h = null;
+  const c = () => {
+    h !== null && (clearTimeout(h), h = null);
+  }, l = () => {
+    if (c(), s) {
+      const p = s;
+      s = null, n(p.id) ? (a = p, t(p)) : u();
+      return;
+    }
+    if (!a && d != null) {
+      const p = i.getAnnotation(d);
+      p && n(p.id) && (a = p, t(p));
+    }
+  }, u = () => {
+    c(), s = null, a = null, e();
+  }, y = (p) => {
+    if (c(), p.ids.length === 1) {
+      const f = i.getAnnotation(p.ids[0]);
+      if (!f) return;
+      if (d = p.ids[0], s = f, i.isDrawing()) {
+        i.once("cancelDrawing", l), i.once("completeDrawing", l);
         return;
       }
-      i = setTimeout(s, V);
+      h = setTimeout(l, et);
     } else
-      o = null, e();
-  }, c = () => {
-    n(), o = null, e();
-  }, p = () => {
-    n(), o = null, e();
+      d = null, u();
+  }, v = () => u(), A = (p) => {
+    const f = s ?? a;
+    f && !p.ids.includes(f.id) || (d = null, u());
   };
-  return r.on("select", a), r.on("click", s), r.on("dragend", s), r.on("dragstart", c), r.on("unselect", p), () => {
-    n(), r.off("select", a), r.off("click", s), r.off("dragend", s), r.off("dragstart", c), r.off("unselect", p), r.off("cancelDrawing", s), r.off("completeDrawing", s);
+  return i.on("select", y), i.on("click", l), i.on("dragend", l), i.on("dragstart", v), i.on("unselect", A), () => {
+    c(), i.off("select", y), i.off("click", l), i.off("dragend", l), i.off("dragstart", v), i.off("unselect", A), i.off("cancelDrawing", l), i.off("completeDrawing", l);
   };
 }
-const G = "right", Y = "vertical";
-class Z {
+const ot = "right", nt = "vertical", st = [
+  "arrow",
+  "text",
+  "box",
+  "comment",
+  "polygon"
+];
+function it(i) {
+  return w(i) ? "arrow" : g(i) ? "text" : $(i) ? "box" : B(i) ? "comment" : E(i) ? "polygon" : null;
+}
+class kt {
   constructor(t) {
-    l(this, "control");
-    l(this, "panel");
-    l(this, "panelBody");
-    l(this, "mode", null);
-    l(this, "currentAnnotation", null);
-    l(this, "currentColor", "#0099FF");
-    l(this, "recent", z());
-    l(this, "colorCircles", []);
-    l(this, "colorPickerOverlay", null);
-    l(this, "colorPicker", null);
-    l(this, "detachVisibility");
-    l(this, "documentClickHandler");
-    l(this, "hide", () => {
+    r(this, "control");
+    r(this, "panel");
+    r(this, "panelBody");
+    r(this, "mode", null);
+    r(this, "currentAnnotation", null);
+    r(this, "currentColor", "#0099FF");
+    r(this, "recent", Z());
+    r(this, "colorCircles", []);
+    r(this, "colorPickerOverlay", null);
+    r(this, "colorPicker", null);
+    r(this, "detachVisibility");
+    r(this, "documentClickHandler");
+    r(this, "enabledTypes");
+    r(this, "hide", () => {
       this.panel.style.display = "none", this.closeColorPicker(), this.currentAnnotation = null, this.mode = null;
     });
-    this.control = t.control;
+    this.control = t.control, this.enabledTypes = t.enabledTypes ?? st;
     const e = t.container ?? document.body;
-    this.panel = document.createElement("div"), this.panel.className = "annotation-panel", this.panel.style.display = "none", this.panel.dataset.placement = t.placement ?? G, this.panel.dataset.orientation = t.orientation ?? Y, this.panelBody = document.createElement("div"), this.panelBody.className = "panel-body", this.panel.appendChild(this.panelBody), e.appendChild(this.panel), this.detachVisibility = U(this.control, {
+    this.panel = document.createElement("div"), this.panel.className = "annotation-panel", this.panel.style.display = "none", this.panel.dataset.placement = t.placement ?? ot, this.panel.dataset.orientation = t.orientation ?? nt, this.panelBody = document.createElement("div"), this.panelBody.className = "panel-body", this.panel.appendChild(this.panelBody), e.appendChild(this.panel), this.detachVisibility = O(this.control, {
       onShow: (o) => {
+        const n = it(o);
+        if (!n || !this.enabledTypes.includes(n)) {
+          this.hide();
+          return;
+        }
         this.setAnnotation(o), this.show();
       },
-      onHide: this.hide
+      onHide: this.hide,
+      hideWhenNotEditable: t.hideWhenNotEditable
     }), ["click", "mousedown", "mousemove"].forEach(
-      (o) => this.panel.addEventListener(o, (i) => i.stopPropagation())
+      (o) => this.panel.addEventListener(o, (n) => n.stopPropagation())
     ), this.documentClickHandler = (o) => {
-      this.colorPickerOverlay && !this.colorPickerOverlay.contains(o.target) && !this.colorCircles.some((i) => i.contains(o.target)) && this.closeColorPicker(), this.panelBody.querySelectorAll(".custom-select").forEach((i) => i.classList.remove("open"));
+      this.colorPickerOverlay && !this.colorPickerOverlay.contains(o.target) && !this.colorCircles.some((n) => n.contains(o.target)) && this.closeColorPicker(), this.panelBody.querySelectorAll(".custom-select").forEach((n) => n.classList.remove("open"));
     }, document.addEventListener("click", this.documentClickHandler);
   }
   setAnnotation(t) {
-    this.currentAnnotation = t, g(t) ? (this.mode = "arrow", this.renderArrow(t)) : L(t) || T(t) || P(t) ? (this.mode = "text", this.renderText(t)) : k(t) && (this.mode = "polygon", this.renderPolygon(t));
+    this.currentAnnotation = t, w(t) ? (this.mode = "arrow", this.renderArrow(t)) : g(t) || $(t) || B(t) ? (this.mode = "text", this.renderText(t)) : E(t) && (this.mode = "polygon", this.renderPolygon(t));
   }
   renderArrow(t) {
     const e = t.properties.style || {};
     this.updateColorFromAnnotation(
-      e.strokeColor || b.strokeColor
+      e.strokeColor || S.strokeColor
     ), this.panelBody.innerHTML = `
       ${this.section("Color", this.colorSelector())}
       ${this.section(
@@ -145,20 +173,20 @@ class Z {
         ${this.extremitySelector("tail", t)}
       </div>`
     )}
-      ${this.slider("Stroke width", "line-width", e.strokeWidth || b.strokeWidth, 1, 20)}
+      ${this.slider("Stroke width", "line-width", e.strokeWidth || S.strokeWidth, 1, 20)}
       ${this.lineTypeButtons(e.strokeType || "plain")}
     `, this.bind();
   }
   renderText(t) {
     const e = t.properties.style || {};
-    this.updateColorFromAnnotation(e.color || d.color);
-    const o = typeof e.fontSize == "number" ? e.fontSize : typeof d.fontSize == "number" ? d.fontSize : 18;
+    this.updateColorFromAnnotation(e.color || m.color);
+    const o = typeof e.fontSize == "number" ? e.fontSize : typeof m.fontSize == "number" ? m.fontSize : 18;
     this.panelBody.innerHTML = `
       ${this.section("Color", this.colorSelector())}
-      ${this.section("Background", this.backgroundSelector(e.background || d.background))}
-      ${this.section("Font", `<div class="custom-select-section">${this.fontSelector(e.font || d.font)}</div>`)}
+      ${this.section("Background", this.backgroundSelector(e.background || m.background))}
+      ${this.section("Font", `<div class="custom-select-section">${this.fontSelector(e.font || m.font)}</div>`)}
       ${this.slider("Font size", "font-size", o, 8, 72)}
-      ${this.slider("Stroke width", "line-width", e.strokeWidth || d.strokeWidth, 1, 20)}
+      ${this.slider("Stroke width", "line-width", e.strokeWidth || m.strokeWidth, 1, 20)}
       ${this.lineTypeButtons(e.strokeType || "plain")}
     `, this.bind();
   }
@@ -176,7 +204,7 @@ class Z {
     return `<div class="section-header"><h3>${t}</h3></div>${e}`;
   }
   icon(t, e = !1) {
-    return e ? `<span style="display:inline-flex;transform:rotate(180deg)">${v(t)}</span>` : v(t);
+    return e ? `<span style="display:inline-flex;transform:rotate(180deg)">${b(t)}</span>` : b(t);
   }
   colorSelector() {
     return `<div class="color-selector">${this.recent.colors.map(
@@ -188,7 +216,7 @@ class Z {
     ).join("")}</div>`;
   }
   backgroundSelector(t) {
-    return `<div class="color-selector">${O.map(
+    return `<div class="color-selector">${j.map(
       ({ value: e, style: o }) => `
       <button class="color-circle ${e === t ? "color-circle-primary" : ""}" data-background-color="${e}">
         <div class="color-inner" style="${o}"></div>
@@ -197,45 +225,45 @@ class Z {
     ).join("")}</div>`;
   }
   fontSelector(t) {
-    const e = m.find((o) => o.value === t) || m[0];
+    const e = C.find((o) => o.value === t) || C[0];
     return this.dropdown(
       "font",
       e,
-      m.map((o) => ({ ...o, selected: o.value === t }))
+      C.map((o) => ({ ...o, selected: o.value === t }))
     );
   }
   extremitySelector(t, e) {
-    var s;
-    const o = ((s = e.properties.style) == null ? void 0 : s[t]) || "none", i = N.map((a) => ({
-      ...a,
-      icon: a.value === "arrow" && t === "tail" ? "arrow-left" : a.value === "arrow" ? "arrow-right" : a.icon,
-      selected: a.value === o,
-      rotate: a.value === "arrow-plain" && t === "tail"
-    })), n = i.find((a) => a.selected) || i[0];
-    return `<div class="extremity-wrapper"><label>${t}</label>${this.dropdown(t, n, i, `data-end="${t}"`)}</div>`;
-  }
-  dropdown(t, e, o, i = "") {
-    return `<div class="custom-select" data-type="${t}" ${i}>
+    var a;
+    const o = ((a = e.properties.style) == null ? void 0 : a[t]) || "none", n = G.map((d) => ({
+      ...d,
+      icon: d.value === "arrow" && t === "tail" ? "arrow-left" : d.value === "arrow" ? "arrow-right" : d.icon,
+      selected: d.value === o,
+      rotate: d.value === "arrow-plain" && t === "tail"
+    })), s = n.find((d) => d.selected) || n[0];
+    return `<div class="extremity-wrapper"><label>${t}</label>${this.dropdown(t, s, n, `data-end="${t}"`)}</div>`;
+  }
+  dropdown(t, e, o, n = "") {
+    return `<div class="custom-select" data-type="${t}" ${n}>
       <div class="custom-select-trigger">
         ${this.icon(e.icon, e.rotate)}
         <span>${e.label}</span>
         ${this.icon("chevron-down")}
       </div>
       <div class="custom-select-options">${o.map(
-      (n) => `
-        <div class="custom-select-option ${n.selected ? "selected" : ""}" data-value="${n.value}" data-icon="${n.icon}" data-rotate="${n.rotate ? "1" : ""}" title="${n.label}">
-          ${this.icon(n.icon, n.rotate)}
-          <span>${n.label}</span>
+      (s) => `
+        <div class="custom-select-option ${s.selected ? "selected" : ""}" data-value="${s.value}" data-icon="${s.icon}" data-rotate="${s.rotate ? "1" : ""}" title="${s.label}">
+          ${this.icon(s.icon, s.rotate)}
+          <span>${s.label}</span>
         </div>
       `
     ).join("")}</div>
     </div>`;
   }
-  slider(t, e, o, i, n) {
+  slider(t, e, o, n, s) {
     return `${this.section(
       t,
       `<div class="slider-section">
-      <input type="range" id="${e}-slider" class="slider" min="${i}" max="${n}" value="${o}">
+      <input type="range" id="${e}-slider" class="slider" min="${n}" max="${s}" value="${o}">
       <div class="slider-value"><span id="${e}-value">${o}</span></div>
     </div>`
     )}`;
@@ -243,7 +271,7 @@ class Z {
   lineTypeButtons(t) {
     return `${this.section(
       "Line type",
-      `<div class="linetype-section">${R.map(
+      `<div class="linetype-section">${X.map(
         ({ value: e, icon: o }) => `
       <button class="linetype-button ${t === e ? "active" : ""}" data-linetype="${e}" title="${e}">
         ${this.icon(o)}
@@ -259,8 +287,8 @@ class Z {
     ), this.colorCircles.forEach((t, e) => {
       t.addEventListener("click", (o) => {
         o.stopPropagation();
-        const i = this.recent.activeIndex === e && t.classList.contains("color-circle-primary");
-        this.recent = { ...this.recent, activeIndex: e }, this.currentColor = this.recent.colors[e], this.updateColorCircles(), i ? this.toggleColorPicker(t) : this.mode === "arrow" ? this.updateStyle({ strokeColor: this.currentColor }) : this.mode === "text" && this.updateStyle({ strokeColor: this.currentColor });
+        const n = this.recent.activeIndex === e && t.classList.contains("color-circle-primary");
+        this.recent = { ...this.recent, activeIndex: e }, this.currentColor = this.recent.colors[e], this.updateColorCircles(), n ? this.toggleColorPicker(t) : this.mode === "arrow" ? this.updateStyle({ strokeColor: this.currentColor }) : this.mode === "text" && this.updateStyle({ strokeColor: this.currentColor });
       });
     }), this.updateColorCircles(), this.panelBody.querySelectorAll("[data-background-color]").forEach((t) => {
       t.addEventListener(
@@ -273,19 +301,19 @@ class Z {
       ), o = t.querySelectorAll(
         ".custom-select-option"
       );
-      e.addEventListener("click", (i) => {
-        i.stopPropagation(), this.panelBody.querySelectorAll(".custom-select").forEach((n) => {
-          n !== t && n.classList.remove("open");
+      e.addEventListener("click", (n) => {
+        n.stopPropagation(), this.panelBody.querySelectorAll(".custom-select").forEach((s) => {
+          s !== t && s.classList.remove("open");
         }), t.classList.toggle("open");
-      }), o.forEach((i) => {
-        i.addEventListener("click", (n) => {
-          n.stopPropagation();
-          const s = i.dataset.value;
-          o.forEach((w) => w.classList.remove("selected")), i.classList.add("selected");
-          const a = i.dataset.icon, c = i.dataset.rotate === "1", p = i.querySelector("span").textContent || "", h = e.querySelector("svg, span[style]");
-          h && (h.outerHTML = this.icon(a, c)), e.querySelector("span").textContent = p, t.classList.remove("open");
-          const u = t.dataset.type, f = t.dataset.end;
-          u === "font" ? this.updateStyle({ font: s }) : f === "head" ? this.updateStyle({ head: s }) : f === "tail" && this.updateStyle({ tail: s });
+      }), o.forEach((n) => {
+        n.addEventListener("click", (s) => {
+          s.stopPropagation();
+          const a = n.dataset.value;
+          o.forEach((v) => v.classList.remove("selected")), n.classList.add("selected");
+          const d = n.dataset.icon, h = n.dataset.rotate === "1", c = n.querySelector("span").textContent || "", l = e.querySelector("svg, span[style]");
+          l && (l.outerHTML = this.icon(d, h)), e.querySelector("span").textContent = c, t.classList.remove("open");
+          const u = t.dataset.type, y = t.dataset.end;
+          u === "font" ? this.updateStyle({ font: a }) : y === "head" ? this.updateStyle({ head: a }) : y === "tail" && this.updateStyle({ tail: a });
         });
       });
     }), ["line-width", "font-size"].forEach((t) => {
@@ -293,10 +321,10 @@ class Z {
         `#${t}-slider`
       ), o = this.panelBody.querySelector(`#${t}-value`);
       e && o && e.addEventListener("input", () => {
-        const i = parseInt(e.value, 10);
-        o.textContent = i.toString(), t === "line-width" ? this.updateStyle(
-          this.mode === "text" ? { strokeWidth: i, strokeColor: this.currentColor } : { strokeWidth: i }
-        ) : t === "font-size" && this.updateStyle({ fontSize: i });
+        const n = parseInt(e.value, 10);
+        o.textContent = n.toString(), t === "line-width" ? this.updateStyle(
+          this.mode === "text" ? { strokeWidth: n, strokeColor: this.currentColor } : { strokeWidth: n }
+        ) : t === "font-size" && this.updateStyle({ fontSize: n });
       });
     }), this.panelBody.querySelectorAll(".linetype-button").forEach((t) => {
       t.addEventListener("click", () => {
@@ -307,7 +335,7 @@ class Z {
   }
   // Color management
   updateColorFromAnnotation(t) {
-    this.recent = q(this.recent, t), this.currentColor = t;
+    this.recent = Q(this.recent, t), this.currentColor = t;
   }
   updateColorCircles() {
     this.colorCircles.forEach((t, e) => {
@@ -322,10 +350,10 @@ class Z {
       this.closeColorPicker();
       return;
     }
-    this.colorPickerOverlay = document.createElement("div"), this.colorPickerOverlay.className = "color-picker-overlay", document.body.appendChild(this.colorPickerOverlay), this.colorPicker = F(), this.colorPicker.color = B(this.currentColor), this.colorPickerOverlay.appendChild(this.colorPicker);
+    this.colorPickerOverlay = document.createElement("div"), this.colorPickerOverlay.className = "color-picker-overlay", document.body.appendChild(this.colorPickerOverlay), this.colorPicker = N(), this.colorPicker.color = F(this.currentColor), this.colorPickerOverlay.appendChild(this.colorPicker);
     const e = t.getBoundingClientRect();
     this.colorPickerOverlay.style.right = `${window.innerWidth - e.right}px`, this.colorPickerOverlay.style.top = `${e.bottom + 10}px`, this.colorPicker.addEventListener("color-changed", (o) => {
-      this.currentColor = I(o.detail.value), this.recent.colors[this.recent.activeIndex] = this.currentColor, this.updateColorCircles(), this.mode === "arrow" ? this.updateStyle({ strokeColor: this.currentColor }) : this.mode === "text" ? this.updateStyle({ color: this.currentColor }) : this.mode === "polygon" && this.updateStyle({ strokeColor: this.currentColor });
+      this.currentColor = D(o.detail.value), this.recent.colors[this.recent.activeIndex] = this.currentColor, this.updateColorCircles(), this.mode === "arrow" ? this.updateStyle({ strokeColor: this.currentColor }) : this.mode === "text" ? this.updateStyle({ color: this.currentColor }) : this.mode === "polygon" && this.updateStyle({ strokeColor: this.currentColor });
     });
   }
   closeColorPicker() {
@@ -333,7 +361,7 @@ class Z {
   }
   // Unified update method
   updateStyle(t) {
-    this.currentAnnotation && (g(this.currentAnnotation) ? this.control.updateStyle(this.currentAnnotation.id, t) : k(this.currentAnnotation) ? this.control.updateStyle(this.currentAnnotation.id, t) : this.control.updateStyle(this.currentAnnotation.id, t));
+    this.currentAnnotation && (w(this.currentAnnotation) ? this.control.updateStyle(this.currentAnnotation.id, t) : E(this.currentAnnotation) ? this.control.updateStyle(this.currentAnnotation.id, t) : this.control.updateStyle(this.currentAnnotation.id, t));
   }
   // Layout
   setPlacement(t) {
@@ -350,7 +378,7 @@ class Z {
     this.closeColorPicker(), this.detachVisibility(), document.removeEventListener("click", this.documentClickHandler), this.panel.remove();
   }
 }
-const j = "bottom", J = "horizontal", A = [
+const rt = "bottom", lt = "horizontal", T = [
   "arrow",
   "comment",
   "sticky-note",
@@ -358,26 +386,26 @@ const j = "bottom", J = "horizontal", A = [
   "text",
   "polygon"
 ];
-class tt {
+class Ct {
   constructor(t) {
-    l(this, "control");
-    l(this, "root");
-    l(this, "activeButton", null);
-    l(this, "undoButton");
-    l(this, "redoButton");
-    l(this, "handleDrawingEnd", () => this.setActiveMode(null));
-    l(this, "handleHistory", () => this.updateUndoRedo());
+    r(this, "control");
+    r(this, "root");
+    r(this, "activeButton", null);
+    r(this, "undoButton");
+    r(this, "redoButton");
+    r(this, "handleDrawingEnd", () => this.setActiveMode(null));
+    r(this, "handleHistory", () => this.updateUndoRedo());
     this.control = t.control;
     const e = t.container ?? document.body;
-    this.root = document.createElement("div"), this.root.className = "annotation-toolbar", this.root.dataset.placement = t.placement ?? j, this.root.dataset.orientation = t.orientation ?? J, e.appendChild(this.root), ["click", "mousedown", "mousemove"].forEach(
-      (s) => this.root.addEventListener(s, (a) => a.stopPropagation())
+    this.root = document.createElement("div"), this.root.className = "annotation-toolbar oa-toolbar oa-toolbar-bar", this.root.dataset.placement = t.placement ?? rt, this.root.dataset.orientation = t.orientation ?? lt, e.appendChild(this.root), ["click", "mousedown", "mousemove"].forEach(
+      (a) => this.root.addEventListener(a, (d) => d.stopPropagation())
     );
-    const o = t.enabledTypes ?? A, i = t.styles ?? {};
-    A.filter((s) => o.includes(s)).forEach(
-      (s) => this.root.appendChild(this.drawingButton(s, i))
+    const o = t.enabledTypes ?? T, n = t.styles ?? {};
+    T.filter((a) => o.includes(a)).forEach(
+      (a) => this.root.appendChild(this.drawingButton(a, n))
     ), o.length > 0 && this.root.appendChild(this.separator()), this.undoButton = this.button(null, "undo", "Undo", () => this.control.undo()), this.redoButton = this.button(null, "redo", "Redo", () => this.control.redo()), this.root.appendChild(this.undoButton), this.root.appendChild(this.redoButton);
-    const n = t.deleteMode ?? "erase";
-    (n === "erase" || n === "both") && (this.root.appendChild(this.separator()), this.root.appendChild(
+    const s = t.deleteMode ?? "erase";
+    (s === "erase" || s === "both") && (this.root.appendChild(this.separator()), this.root.appendChild(
       this.button(
         "erase",
         "eraser",
@@ -386,16 +414,18 @@ class tt {
           this.control.isEraseModeActive() ? (this.control.disableEraseMode(), this.setActiveMode(null)) : (this.control.enableEraseMode(), this.setActiveMode("erase"));
         }
       )
-    )), (n === "select" || n === "both") && (n === "select" && this.root.appendChild(this.separator()), this.root.appendChild(
+    )), (s === "select" || s === "both") && (s === "select" && this.root.appendChild(this.separator()), this.root.appendChild(
       this.button(null, "trash", "Delete selected", () => {
-        const s = this.control.getSelectedAnnotations();
-        s.features.length > 0 && this.control.remove(s);
+        const d = this.control.getSelectedAnnotations().features.filter(
+          (h) => this.control.isAnnotationEditable(h.id)
+        );
+        d.length > 0 && this.control.remove({ type: "FeatureCollection", features: d });
       })
     )), (t.onJsonExport || t.onSvgExport) && (this.root.appendChild(this.separator()), t.onJsonExport && this.root.appendChild(
       this.button(null, "download", "Export annotations", t.onJsonExport)
     ), t.onSvgExport && this.root.appendChild(
       this.button(null, "camera", "Export SVG", t.onSvgExport)
-    )), this.control.on(C, this.handleDrawingEnd), this.control.on(E, this.handleDrawingEnd), this.control.on(S, this.handleHistory), this.updateUndoRedo();
+    )), this.control.on(x, this.handleDrawingEnd), this.control.on(M, this.handleDrawingEnd), this.control.on(P, this.handleHistory), this.updateUndoRedo();
   }
   drawingButton(t, e) {
     switch (t) {
@@ -411,11 +441,11 @@ class tt {
         });
       case "comment":
         return this.button("comment", "message-square", "Add comment", () => {
-          var n, s, a, c;
-          const o = (n = e.comment) == null ? void 0 : n.commentStyle, i = (s = e.comment) == null ? void 0 : s.arrowStyle;
+          var s, a, d, h;
+          const o = (s = e.comment) == null ? void 0 : s.commentStyle, n = (a = e.comment) == null ? void 0 : a.arrowStyle;
           this.control.enableCommentDrawing({
-            offsetX: ((a = e.comment) == null ? void 0 : a.offsetX) ?? 200,
-            offsetY: ((c = e.comment) == null ? void 0 : c.offsetY) ?? -150,
+            offsetX: ((d = e.comment) == null ? void 0 : d.offsetX) ?? 200,
+            offsetY: ((h = e.comment) == null ? void 0 : h.offsetY) ?? -150,
             commentStyle: {
               content: "",
               ...o,
@@ -428,13 +458,13 @@ class tt {
               }
             },
             arrowStyle: {
-              ...i,
+              ...n,
               style: {
                 strokeType: "plain",
                 strokeColor: "#3A03CF",
                 strokeWidth: 2,
                 head: "halo-dot",
-                ...i == null ? void 0 : i.style
+                ...n == null ? void 0 : n.style
               }
             }
           }), this.setActiveMode("comment");
@@ -487,13 +517,13 @@ class tt {
         );
     }
   }
-  button(t, e, o, i) {
-    const n = document.createElement("button");
-    return n.dataset.tooltip = o, n.innerHTML = v(e, 16), n.addEventListener("click", i), t && (n.dataset.mode = t), n;
+  button(t, e, o, n) {
+    const s = document.createElement("button");
+    return s.className = "oa-toolbar-button", s.dataset.tooltip = o, s.innerHTML = b(e, 16), s.addEventListener("click", n), t && (s.dataset.mode = t), s;
   }
   separator() {
     const t = document.createElement("span");
-    return t.className = "separator", t;
+    return t.className = "oa-toolbar-separator", t;
   }
   setActiveMode(t) {
     this.activeButton && this.activeButton.classList.remove("active"), this.activeButton = t ? this.root.querySelector(`[data-mode="${t}"]`) : null, this.activeButton && this.activeButton.classList.add("active");
@@ -509,25 +539,401 @@ class tt {
     this.root.dataset.orientation = t;
   }
   destroy() {
-    this.control.off(C, this.handleDrawingEnd), this.control.off(E, this.handleDrawingEnd), this.control.off(S, this.handleHistory), this.root.remove();
+    this.control.off(x, this.handleDrawingEnd), this.control.off(M, this.handleDrawingEnd), this.control.off(P, this.handleHistory), this.root.remove();
+  }
+}
+class at {
+  constructor(t, e) {
+    r(this, "element");
+    r(this, "onClick", () => {
+      this.item.action(this.ctx);
+    });
+    this.ctx = t, this.item = e, this.element = document.createElement("button"), this.element.type = "button", this.element.className = e.danger ? "oa-toolbar-button oa-toolbar-button-danger" : "oa-toolbar-button", this.element.dataset.tooltip = e.title, this.element.innerHTML = b(e.icon, 16), this.element.addEventListener("click", this.onClick);
+  }
+  update(t) {
+    if (!this.item.isActive) return;
+    const e = this.item.isActive(t);
+    this.element.classList.toggle("active", e), this.element.setAttribute("aria-pressed", String(e));
+  }
+  destroy() {
+    this.element.removeEventListener("click", this.onClick);
+  }
+}
+function I(i, t) {
+  const e = document.createElement("div");
+  e.className = "oa-toolbar-dropdown";
+  const o = document.createElement("button");
+  o.type = "button", o.className = "oa-toolbar-button oa-toolbar-dropdown-trigger", o.dataset.tooltip = i;
+  const n = document.createElement("span");
+  n.className = "oa-toolbar-dropdown-label", n.textContent = t;
+  const s = document.createElement("span");
+  s.className = "oa-toolbar-dropdown-chevron", s.innerHTML = b("chevron-down", 14), o.appendChild(n), o.appendChild(s);
+  const a = document.createElement("div");
+  a.className = "oa-toolbar-dropdown-panel";
+  const d = () => e.classList.remove("open");
+  return o.addEventListener("click", (h) => {
+    var l;
+    h.stopPropagation();
+    const c = !e.classList.contains("open");
+    (l = e.closest(".annotation-style-toolbar")) == null || l.querySelectorAll(".oa-toolbar-dropdown.open").forEach((u) => {
+      u !== e && u.classList.remove("open");
+    }), e.classList.toggle("open", c);
+  }), e.appendChild(o), e.appendChild(a), {
+    element: e,
+    panel: a,
+    close: d,
+    setLabel: (h) => {
+      n.textContent = h;
+    }
+  };
+}
+class ct {
+  constructor(t, e) {
+    r(this, "element");
+    r(this, "dropdown");
+    this.ctx = t, this.item = e, this.dropdown = I(e.title, ""), this.element = this.dropdown.element, e.options.forEach((o) => {
+      const n = document.createElement("button");
+      n.type = "button", n.className = "oa-toolbar-dropdown-option", n.textContent = o.label, o.style && Object.assign(n.style, o.style), n.addEventListener("click", (s) => {
+        s.stopPropagation(), e.onSelect(o.value, this.ctx), this.dropdown.close();
+      }), this.dropdown.panel.appendChild(n);
+    });
+  }
+  update(t) {
+    const e = this.item.getValue(t), o = this.item.options.find((s) => s.value === e), n = this.item.getLabel ? this.item.getLabel(e, t) : (o == null ? void 0 : o.label) ?? `${e}`;
+    this.dropdown.setLabel(n), this.element.title = (o == null ? void 0 : o.label) ?? `${e}`;
+  }
+  destroy() {
+  }
+}
+const dt = 12;
+class ht {
+  constructor(t, e) {
+    r(this, "control");
+    r(this, "ogma");
+    r(this, "options");
+    r(this, "annotationId");
+    r(this, "overlay");
+    /** The element handed to `addOverlay` - Ogma writes its own
+     * `style.transform` (translate/rotate/scale, recomputed on every
+     * viewChanged/zoom/rotate/move) directly onto this node to place it at
+     * `position`, so nothing of ours may also set `transform` here or Ogma's
+     * assignment clobbers it (inline style, last writer wins - there's no way
+     * to compose two separate `transform` writers on one element). Zero-size
+     * and otherwise unstyled; it exists purely as the anchor point. */
+    r(this, "anchor");
+    /** The actual visible pill - a child of `anchor`, `position: absolute`
+     * with its own `transform: translate(-50%, -100%)` (see `styles.css`) to
+     * center horizontally and sit fully above the anchor point. This is where
+     * our own positioning lives, kept off `anchor` for exactly that reason. */
+    r(this, "root");
+    r(this, "cells", []);
+    r(this, "documentClickHandler", (t) => {
+      this.root.contains(t.target) || this.root.querySelectorAll(".oa-toolbar-dropdown.open").forEach((e) => e.classList.remove("open"));
+    });
+    this.control = t.control, this.options = t, this.ogma = this.control.getOgma(), this.annotationId = e.id, this.anchor = document.createElement("div"), this.anchor.className = "annotation-style-toolbar-anchor", this.root = document.createElement("div"), this.root.className = "annotation-style-toolbar oa-toolbar oa-toolbar-bar", this.anchor.appendChild(this.root), ["click", "mousedown", "mousemove"].forEach(
+      (n) => this.root.addEventListener(n, (s) => s.stopPropagation())
+    );
+    const o = {
+      getAnnotation: () => this.control.getAnnotation(this.annotationId),
+      updateStyle: (n) => this.control.updateStyle(this.annotationId, n),
+      deleteAnnotation: () => {
+        const n = this.control.getAnnotation(this.annotationId);
+        n && this.control.remove(n);
+      }
+    };
+    this.setItems(this.getItems(o), o), this.cells.forEach((n) => n.update(e)), this.overlay = this.ogma.layers.addOverlay({
+      element: this.anchor,
+      position: this.getAnchor(e),
+      scaled: !1
+    }), document.addEventListener("click", this.documentClickHandler);
+  }
+  /** Turns one `ToolbarItem` into its `ToolbarCell` - `"separator"` has
+   * none (handled by `setItems` directly), `"custom"` calls its own
+   * `build()` (the color picker's escape hatch), `"button"`/`"dropdown"`
+   * go through the two generic cell classes. */
+  buildCell(t, e) {
+    switch (t.kind) {
+      case "separator":
+        return null;
+      case "custom":
+        return t.build(e);
+      case "button":
+        return new at(e, t);
+      case "dropdown":
+        return new ct(e, t);
+    }
+  }
+  setItems(t, e) {
+    this.cells = [], t.forEach((o) => {
+      if (o.kind === "separator") {
+        const s = document.createElement("span");
+        s.className = "oa-toolbar-separator", this.root.appendChild(s);
+        return;
+      }
+      const n = this.buildCell(o, e);
+      this.cells.push(n), this.root.appendChild(n.element);
+    });
+  }
+  /**
+   * Top-center of the annotation's box, in graph space, offset outward by
+   * `ANCHOR_GAP` (screen-constant, so divided by zoom) and rotated by the
+   * global annotation-rotation angle - the same `ctx.rotate(rotation)`
+   * transform `Handles.renderOutline` applies to a Text box's outline, so
+   * the pill tracks the box exactly as it visually rotates.
+   */
+  getAnchor(t) {
+    var l;
+    const e = this.control.getZoom(), o = this.control.getRotation(), n = ((l = t.properties.style) == null ? void 0 : l.fixedSize) === !0;
+    let { height: s } = W(t);
+    n && (s /= e);
+    const a = V(t), d = -(s / 2 + dt / e), h = Math.sin(o), c = Math.cos(o);
+    return {
+      x: a.x - d * h,
+      y: a.y + d * c
+    };
+  }
+  /** Refreshes every cell and repositions the pill for `annotation` -
+   * called after a select, an own-cell edit, or an external update to the
+   * same annotation. Does not rebuild cells; the host recreates the whole
+   * instance when the annotation identity/kind changes. */
+  update(t) {
+    this.cells.forEach((e) => e.update(t)), this.overlay.setPosition(this.getAnchor(t));
+  }
+  destroy() {
+    document.removeEventListener("click", this.documentClickHandler), this.cells.forEach((t) => t.destroy()), this.overlay.destroy();
+  }
+}
+class pt {
+  constructor(t, e) {
+    r(this, "element");
+    r(this, "dropdown");
+    r(this, "swatch");
+    r(this, "more");
+    r(this, "morePicker", null);
+    r(this, "morePickerHost", null);
+    this.ctx = t, this.options = e;
+    const { swatches: o } = e;
+    this.dropdown = I("Color", ""), this.element = this.dropdown.element, this.element.classList.add("oa-toolbar-color-cell"), this.swatch = document.createElement("span"), this.swatch.className = "oa-toolbar-swatch", this.dropdown.element.querySelector(".oa-toolbar-dropdown-trigger").insertBefore(this.swatch, this.dropdown.element.querySelector(".oa-toolbar-dropdown-label"));
+    const n = document.createElement("div");
+    n.className = "oa-toolbar-swatch-grid", o.forEach((s) => {
+      const a = document.createElement("button");
+      a.type = "button", a.className = "oa-toolbar-swatch-cell", a.classList.toggle("oa-toolbar-swatch-cell-transparent", s.fill === "transparent"), a.title = s.fill, a.style.setProperty("--oa-swatch-fill", s.fill), a.style.setProperty("--oa-swatch-stroke", s.stroke), a.addEventListener("click", (d) => {
+        d.stopPropagation(), this.pick(s.fill), this.dropdown.close();
+      }), n.appendChild(a);
+    }), this.dropdown.panel.appendChild(n), this.more = document.createElement("button"), this.more.type = "button", this.more.className = "oa-toolbar-more-colors", this.more.textContent = "More colors…", this.more.addEventListener("click", (s) => {
+      s.stopPropagation(), this.openMorePicker();
+    }), this.dropdown.panel.appendChild(this.more);
+  }
+  pick(t) {
+    this.ctx.updateStyle({ background: t });
+  }
+  openMorePicker() {
+    var e;
+    if (this.options.onMoreColors) {
+      this.dropdown.close(), this.options.onMoreColors(this.ctx, this.more);
+      return;
+    }
+    if (this.morePickerHost) {
+      this.closeMorePicker();
+      return;
+    }
+    this.morePickerHost = document.createElement("div"), this.morePickerHost.className = "oa-toolbar-more-colors-host", this.morePicker = N();
+    const t = ((e = this.ctx.getAnnotation().properties.style) == null ? void 0 : e.background) || m.background;
+    this.morePicker.color = F(t), this.morePicker.addEventListener("color-changed", (o) => {
+      this.pick(D(o.detail.value));
+    }), this.morePickerHost.appendChild(this.morePicker), this.dropdown.panel.appendChild(this.morePickerHost);
+  }
+  closeMorePicker() {
+    var t;
+    (t = this.morePickerHost) == null || t.remove(), this.morePickerHost = null, this.morePicker = null;
+  }
+  update(t) {
+    var o;
+    const e = ((o = t.properties.style) == null ? void 0 : o.background) || m.background;
+    this.swatch.style.setProperty("--oa-swatch-fill", e), this.swatch.classList.toggle("oa-toolbar-swatch-transparent", e === "transparent");
+  }
+  destroy() {
+    this.closeMorePicker();
+  }
+}
+const ut = [
+  { fill: "#FFE49B", stroke: "#D9A926" },
+  { fill: "#FFC8A7", stroke: "#CC8C66" },
+  { fill: "#FFA7B5", stroke: "#C2707D" },
+  { fill: "#D9F3B0", stroke: "#A2C270" },
+  { fill: "#C7F7EF", stroke: "#8CD9CC" },
+  { fill: "#99D6FF", stroke: "#5CA5D6" },
+  { fill: "#D1C7FA", stroke: "#9B8CD9" },
+  { fill: "#C3DAFE", stroke: "#668ECC" },
+  { fill: "transparent", stroke: "#CCCCCC" }
+], mt = [
+  { value: "sans-serif", label: "Sans Serif" },
+  { value: "serif", label: "Serif", style: { fontFamily: "serif" } },
+  { value: "monospace", label: "Monospace", style: { fontFamily: "monospace" } },
+  {
+    value: "IBM Plex Sans",
+    label: "IBM Plex Sans",
+    style: { fontFamily: "IBM Plex Sans" }
+  },
+  {
+    value: "IBM Plex Mono",
+    label: "IBM Plex Mono",
+    style: { fontFamily: "IBM Plex Mono" }
+  }
+], yt = [12, 14, 16, 18, 24, 32, 48, 64];
+class H extends ht {
+  getItems(t) {
+    var d, h;
+    const e = this.options.fonts ?? mt, o = this.options.fontSizes ?? yt, n = this.options.swatches ?? ut, s = this.options.onMoreColors, a = [
+      {
+        kind: "custom",
+        id: "color",
+        build: (c) => new pt(c, { swatches: n, onMoreColors: s })
+      },
+      { kind: "separator" },
+      {
+        kind: "dropdown",
+        id: "font",
+        title: "Font",
+        options: e,
+        getValue: (c) => {
+          var l;
+          return ((l = c.properties.style) == null ? void 0 : l.font) || m.font;
+        },
+        getLabel: () => "Aa",
+        // `fonts` entries are always string values (font-family names) -
+        // ToolbarDropdownValue is string | number only because the size
+        // cell also uses this same item shape with numbers.
+        onSelect: (c, l) => l.updateStyle({ font: `${c}` })
+      },
+      {
+        kind: "dropdown",
+        id: "fontSize",
+        title: "Font size",
+        options: o.map((c) => ({ value: c, label: `${c}` })),
+        getValue: (c) => {
+          const l = c.properties.style;
+          return Math.round(
+            q(
+              (l == null ? void 0 : l.fontSize) ?? m.fontSize,
+              l == null ? void 0 : l.fontScale
+            )
+          );
+        },
+        // Setting fontSize directly (not fontScale) resets any accumulated
+        // resize-driven scale, matching what picking an explicit size means.
+        onSelect: (c, l) => l.updateStyle({ fontSize: c, fontScale: 1 })
+      },
+      { kind: "separator" },
+      {
+        kind: "button",
+        id: "bold",
+        title: "Bold",
+        icon: "bold",
+        isActive: (c) => {
+          var l;
+          return ((l = c.properties.style) == null ? void 0 : l.fontWeight) === "bold";
+        },
+        action: (c) => {
+          var u;
+          const l = ((u = c.getAnnotation().properties.style) == null ? void 0 : u.fontWeight) === "bold";
+          c.updateStyle({ fontWeight: l ? "normal" : "bold" });
+        }
+      },
+      { kind: "separator" },
+      {
+        kind: "button",
+        id: "showAuthor",
+        title: "Show author",
+        icon: "user",
+        isActive: (c) => {
+          var l;
+          return ((l = c.properties.style) == null ? void 0 : l.showAuthor) === !0;
+        },
+        action: (c) => {
+          var u;
+          const l = ((u = c.getAnnotation().properties.style) == null ? void 0 : u.showAuthor) === !0;
+          c.updateStyle({ showAuthor: !l });
+        }
+      },
+      { kind: "separator" },
+      {
+        kind: "button",
+        id: "delete",
+        title: "Delete",
+        icon: "trash",
+        danger: !0,
+        action: (c) => c.deleteAnnotation()
+      }
+    ];
+    return ((h = (d = this.options).items) == null ? void 0 : h.call(d, a, t)) ?? a;
+  }
+}
+class ft extends H {
+}
+class wt {
+  constructor(t) {
+    r(this, "control");
+    r(this, "options");
+    r(this, "current", null);
+    r(this, "detachVisibility");
+    r(this, "handleUpdate", (t) => {
+      this.current && t.id === this.current.annotationId && g(t) && this.current.update(t);
+    });
+    this.control = t.control, this.options = t, this.detachVisibility = O(this.control, {
+      onShow: (e) => this.show(e),
+      onHide: () => this.hide(),
+      hideWhenNotEditable: t.hideWhenNotEditable
+    }), this.control.on(L, this.handleUpdate);
+  }
+  show(t) {
+    if (!g(t)) {
+      this.hide();
+      return;
+    }
+    const e = U(t) ? ft : H;
+    if (this.current && this.current.annotationId === t.id && this.current instanceof e) {
+      this.current.update(t);
+      return;
+    }
+    this.hide(), this.current = new e(this.options, t);
+  }
+  hide() {
+    var t;
+    (t = this.current) == null || t.destroy(), this.current = null;
+  }
+  destroy() {
+    this.detachVisibility(), this.control.off(L, this.handleUpdate), this.hide();
   }
 }
 export {
-  Z as AnnotationPanel,
-  tt as AnnotationToolbar,
-  O as BACKGROUNDS,
-  Y as DEFAULT_PANEL_ORIENTATION,
-  G as DEFAULT_PANEL_PLACEMENT,
-  H as DEFAULT_RECENT_COLORS,
-  N as EXTREMITY_OPTIONS,
-  m as FONTS,
-  W as ICON_PATHS,
-  R as LINE_TYPES,
-  _ as MAX_RECENT_COLORS,
-  U as attachPanelVisibility,
-  F as createRgbaColorPicker,
-  z as initialRecentColors,
-  I as rgbaToString,
-  v as svgIcon,
-  q as withColorFromAnnotation
+  st as ALL_PANEL_ANNOTATION_TYPES,
+  kt as AnnotationPanel,
+  ht as AnnotationStyleToolbar,
+  Ct as AnnotationToolbar,
+  j as BACKGROUNDS,
+  at as ButtonItemCell,
+  pt as ColorCell,
+  nt as DEFAULT_PANEL_ORIENTATION,
+  ot as DEFAULT_PANEL_PLACEMENT,
+  J as DEFAULT_RECENT_COLORS,
+  mt as DEFAULT_TOOLBAR_FONTS,
+  yt as DEFAULT_TOOLBAR_FONT_SIZES,
+  ct as DropdownItemCell,
+  G as EXTREMITY_OPTIONS,
+  C as FONTS,
+  tt as ICON_PATHS,
+  X as LINE_TYPES,
+  K as MAX_RECENT_COLORS,
+  ut as STICKY_SWATCHES,
+  ft as StickyNoteStyleToolbar,
+  wt as TextAnnotationToolbar,
+  H as TextStyleToolbar,
+  O as attachPanelVisibility,
+  it as classifyPanelAnnotationType,
+  N as createRgbaColorPicker,
+  Z as initialRecentColors,
+  D as rgbaToString,
+  b as svgIcon,
+  Q as withColorFromAnnotation
 };