@linkurious/ogma-annotations 2.1.2 → 2.1.4

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 = (s, t, e) => t in s ? _(s, t, { enumerable: !0, configurable: !0, writable: !0, value: e }) : s[t] = e;
+var c = (s, t, e) => R(s, typeof t != "symbol" ? t + "" : t, e);
+import { RgbaBase as z } from "vanilla-colorful/lib/entrypoints/rgba";
+import { j as w, s as k, t as T, i as B, v as E, h as S, L as y, aO as F, F as x, ao as P, aj as M, G as q, u as W, M as V, am as $, aN as U } from "./Polygon-BmJ_q7qz.js";
+const A = "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(A) || customElements.define(A, Y), document.createElement(A);
 }
-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 O(s) {
+  return `rgba(${s.r}, ${s.g}, ${s.b}, ${s.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(s, t) {
+  const e = s.colors.indexOf(t);
+  return e === -1 ? { colors: [t, ...s.colors].slice(0, K), activeIndex: 0 } : { colors: s.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,109 @@ 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 v(s, 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" aria-hidden="true">${tt[s]}</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 D(s, { onShow: t, onHide: e, hideWhenNotEditable: o = !0 }) {
+  const i = (p) => !o || s.isAnnotationEditable(p);
+  let n = null, r = null, d = null, h = null;
+  const a = () => {
+    h !== null && (clearTimeout(h), h = null);
+  }, l = () => {
+    if (a(), n) {
+      const p = n;
+      n = null, i(p.id) ? (r = p, t(p)) : u();
+      return;
+    }
+    if (!r && d != null) {
+      const p = s.getAnnotation(d);
+      p && i(p.id) && (r = p, t(p));
+    }
+  }, u = () => {
+    a(), n = null, r = null, e();
+  }, m = (p) => {
+    if (a(), p.ids.length === 1) {
+      const g = s.getAnnotation(p.ids[0]);
+      if (!g) return;
+      if (d = p.ids[0], n = g, s.isDrawing()) {
+        s.once("cancelDrawing", l), s.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();
+  }, b = () => u(), f = (p) => {
+    const g = n ?? r;
+    g && !p.ids.includes(g.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 s.on("select", m), s.on("click", l), s.on("dragend", l), s.on("dragstart", b), s.on("unselect", f), () => {
+    a(), s.off("select", m), s.off("click", l), s.off("dragend", l), s.off("dragstart", b), s.off("unselect", f), s.off("cancelDrawing", l), s.off("completeDrawing", l);
   };
 }
-const G = "right", Y = "vertical";
-class Z {
+const ot = "right", it = "vertical", nt = [
+  "arrow",
+  "text",
+  "box",
+  "comment",
+  "polygon"
+];
+function rt(s) {
+  return w(s) ? "arrow" : k(s) ? "text" : T(s) ? "box" : B(s) ? "comment" : E(s) ? "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", () => {
+    c(this, "control");
+    c(this, "panel");
+    c(this, "panelBody");
+    c(this, "mode", null);
+    c(this, "currentAnnotation", null);
+    c(this, "currentColor", "#0099FF");
+    c(this, "recent", Z());
+    c(this, "colorCircles", []);
+    c(this, "colorPickerOverlay", null);
+    c(this, "colorPicker", null);
+    c(this, "detachVisibility");
+    c(this, "documentClickHandler");
+    c(this, "enabledTypes");
+    c(this, "hide", () => {
       this.panel.style.display = "none", this.closeColorPicker(), this.currentAnnotation = null, this.mode = null;
     });
-    this.control = t.control;
-    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, {
-      onShow: (o) => {
-        this.setAnnotation(o), this.show();
+    var i, n, r, d;
+    this.control = t.control, this.enabledTypes = t.enabledTypes ?? nt;
+    const e = t.container ?? document.body, o = (d = (r = (n = (i = this.control).getOgma) == null ? void 0 : n.call(i)) == null ? void 0 : r.getContainer) == null ? void 0 : d.call(r);
+    !t.container && o && o !== document.body && console.error(
+      "[ogma-annotations-control] AnnotationPanel: no `container` option given, defaulting to document.body. If this panel should dock to the Ogma graph area (e.g. it is embedded in a smaller/offset div), pass `container: control.getOgma().getContainer()` and give that container `position: relative`."
+    ), this.panel = document.createElement("div"), this.panel.className = "annotation-panel", this.panel.setAttribute("role", "region"), this.panel.setAttribute("aria-label", "Annotation style panel"), this.panel.style.display = "none", this.panel.dataset.placement = t.placement ?? ot, this.panel.dataset.orientation = t.orientation ?? it, this.panelBody = document.createElement("div"), this.panelBody.className = "panel-body", this.panel.appendChild(this.panelBody), e.appendChild(this.panel), this.detachVisibility = D(this.control, {
+      onShow: (h) => {
+        const a = rt(h);
+        if (!a || !this.enabledTypes.includes(a)) {
+          this.hide();
+          return;
+        }
+        this.setAnnotation(h), this.show();
       },
-      onHide: this.hide
+      onHide: this.hide,
+      hideWhenNotEditable: t.hideWhenNotEditable
     }), ["click", "mousedown", "mousemove"].forEach(
-      (o) => this.panel.addEventListener(o, (i) => i.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"));
+      (h) => this.panel.addEventListener(h, (a) => a.stopPropagation())
+    ), this.documentClickHandler = (h) => {
+      this.colorPickerOverlay && !this.colorPickerOverlay.contains(h.target) && !this.colorCircles.some((a) => a.contains(h.target)) && this.closeColorPicker(), this.panelBody.querySelectorAll(".custom-select").forEach((a) => {
+        var l;
+        a.classList.remove("open"), (l = a.querySelector(".custom-select-trigger")) == null || l.setAttribute(
+          "aria-expanded",
+          "false"
+        );
+      });
     }, 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)) : k(t) || 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 +182,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 || y.color);
+    const o = typeof e.fontSize == "number" ? e.fontSize : typeof y.fontSize == "number" ? y.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 || y.background))}
+      ${this.section("Font", `<div class="custom-select-section">${this.fontSelector(e.font || y.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 || y.strokeWidth, 1, 20)}
       ${this.lineTypeButtons(e.strokeType || "plain")}
     `, this.bind();
   }
@@ -166,7 +203,7 @@ class Z {
     const e = t.properties.style || {};
     this.updateColorFromAnnotation(e.strokeColor || "#000000"), this.panelBody.innerHTML = `
       ${this.section("Color", this.colorSelector())}
-      ${this.section("Fill", this.backgroundSelector(e.background || "transparent"))}
+      ${this.section("Fill", this.backgroundSelector(e.background || "transparent", "Fill"))}
       ${this.slider("Stroke width", "line-width", e.strokeWidth || 2, 1, 20)}
       ${this.lineTypeButtons(e.strokeType || "plain")}
     `, this.bind();
@@ -179,54 +216,55 @@ class Z {
     return e ? `<span style="display:inline-flex;transform:rotate(180deg)">${v(t)}</span>` : v(t);
   }
   colorSelector() {
-    return `<div class="color-selector">${this.recent.colors.map(
+    return `<div class="color-selector" role="group" aria-label="Color">${this.recent.colors.map(
       (t, e) => `
-      <button class="color-circle ${e === 0 ? "color-circle-primary" : ""}" data-index="${e}" data-color="${t}">
+      <button type="button" class="color-circle ${e === 0 ? "color-circle-primary" : ""}" data-index="${e}" data-color="${t}" aria-label="Set color to ${t}" aria-pressed="${e === 0}">
         <div class="color-inner"></div>
       </button>
     `
     ).join("")}</div>`;
   }
-  backgroundSelector(t) {
-    return `<div class="color-selector">${O.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>
+  backgroundSelector(t, e = "Background") {
+    return `<div class="color-selector" role="group" aria-label="${e}">${j.map(
+      ({ value: o, style: i }) => `
+      <button type="button" class="color-circle ${o === t ? "color-circle-primary" : ""}" data-background-color="${o}" aria-label="${o === "transparent" ? "No background" : `Background ${o}`}" aria-pressed="${o === t}">
+        <div class="color-inner" style="${i}"></div>
       </button>
     `
     ).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];
+    var r;
+    const o = ((r = e.properties.style) == null ? void 0 : r[t]) || "none", i = 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"
+    })), n = i.find((d) => d.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 = "") {
+    const n = t === "font" ? "Font" : t;
     return `<div class="custom-select" data-type="${t}" ${i}>
-      <div class="custom-select-trigger">
+      <button type="button" class="custom-select-trigger" aria-haspopup="listbox" aria-expanded="false" aria-label="${n}: ${e.label}">
         ${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>
-        </div>
+      </button>
+      <div class="custom-select-options" role="listbox" aria-label="${n} options">${o.map(
+      (r) => `
+        <button type="button" role="option" aria-selected="${r.selected ? "true" : "false"}" class="custom-select-option ${r.selected ? "selected" : ""}" data-value="${r.value}" data-icon="${r.icon}" data-rotate="${r.rotate ? "1" : ""}" title="${r.label}">
+          ${this.icon(r.icon, r.rotate)}
+          <span>${r.label}</span>
+        </button>
       `
     ).join("")}</div>
     </div>`;
@@ -235,7 +273,7 @@ class Z {
     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" aria-label="${t}" min="${i}" max="${n}" value="${o}">
       <div class="slider-value"><span id="${e}-value">${o}</span></div>
     </div>`
     )}`;
@@ -243,9 +281,9 @@ class Z {
   lineTypeButtons(t) {
     return `${this.section(
       "Line type",
-      `<div class="linetype-section">${R.map(
+      `<div class="linetype-section" role="group" aria-label="Line type">${X.map(
         ({ value: e, icon: o }) => `
-      <button class="linetype-button ${t === e ? "active" : ""}" data-linetype="${e}" title="${e}">
+      <button type="button" class="linetype-button ${t === e ? "active" : ""}" data-linetype="${e}" title="${e}" aria-label="${e} line" aria-pressed="${t === e}">
         ${this.icon(o)}
       </button>
     `
@@ -272,20 +310,28 @@ class Z {
         ".custom-select-trigger"
       ), 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");
-        }), 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 });
+      ), i = t.dataset.type === "font" ? "Font" : t.dataset.type;
+      e.addEventListener("click", (n) => {
+        n.stopPropagation(), this.panelBody.querySelectorAll(".custom-select").forEach((d) => {
+          var h;
+          d !== t && (d.classList.remove("open"), (h = d.querySelector(".custom-select-trigger")) == null || h.setAttribute(
+            "aria-expanded",
+            "false"
+          ));
+        });
+        const r = !t.classList.contains("open");
+        t.classList.toggle("open", r), e.setAttribute("aria-expanded", String(r));
+      }), o.forEach((n) => {
+        n.addEventListener("click", (r) => {
+          r.stopPropagation();
+          const d = n.dataset.value;
+          o.forEach((f) => {
+            f.classList.remove("selected"), f.setAttribute("aria-selected", "false");
+          }), n.classList.add("selected"), n.setAttribute("aria-selected", "true");
+          const h = n.dataset.icon, a = n.dataset.rotate === "1", l = n.querySelector("span").textContent || "", u = e.querySelector("svg, span[style]");
+          u && (u.outerHTML = this.icon(h, a)), e.querySelector("span").textContent = l, e.setAttribute("aria-label", `${i}: ${l}`), t.classList.remove("open"), e.setAttribute("aria-expanded", "false");
+          const m = t.dataset.type, b = t.dataset.end;
+          m === "font" ? this.updateStyle({ font: d }) : b === "head" ? this.updateStyle({ head: d }) : b === "tail" && this.updateStyle({ tail: d });
         });
       });
     }), ["line-width", "font-size"].forEach((t) => {
@@ -301,20 +347,21 @@ class Z {
     }), this.panelBody.querySelectorAll(".linetype-button").forEach((t) => {
       t.addEventListener("click", () => {
         const e = t.dataset.linetype;
-        this.panelBody.querySelectorAll(".linetype-button").forEach((o) => o.classList.remove("active")), t.classList.add("active"), this.updateStyle({ strokeType: e });
+        this.panelBody.querySelectorAll(".linetype-button").forEach((o) => {
+          o.classList.remove("active"), o.setAttribute("aria-pressed", "false");
+        }), t.classList.add("active"), t.setAttribute("aria-pressed", "true"), this.updateStyle({ strokeType: e });
       });
     });
   }
   // 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) => {
-      t.setAttribute("data-color", this.recent.colors[e]), t.style.setProperty("--circle-color", this.recent.colors[e]), t.classList.toggle(
-        "color-circle-primary",
-        e === this.recent.activeIndex
-      );
+      t.setAttribute("data-color", this.recent.colors[e]), t.setAttribute("aria-label", `Set color to ${this.recent.colors[e]}`), t.style.setProperty("--circle-color", this.recent.colors[e]);
+      const o = e === this.recent.activeIndex;
+      t.classList.toggle("color-circle-primary", o), t.setAttribute("aria-pressed", String(o));
     });
   }
   toggleColorPicker(t) {
@@ -322,10 +369,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", this.colorPickerOverlay.setAttribute("role", "dialog"), this.colorPickerOverlay.setAttribute("aria-label", "Custom color picker"), 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 = O(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 +380,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 +397,7 @@ class Z {
     this.closeColorPicker(), this.detachVisibility(), document.removeEventListener("click", this.documentClickHandler), this.panel.remove();
   }
 }
-const j = "bottom", J = "horizontal", A = [
+const st = "bottom", at = "horizontal", L = [
   "arrow",
   "comment",
   "sticky-note",
@@ -358,26 +405,29 @@ const j = "bottom", J = "horizontal", A = [
   "text",
   "polygon"
 ];
-class tt {
+class At {
   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());
+    c(this, "control");
+    c(this, "root");
+    c(this, "activeButton", null);
+    c(this, "undoButton");
+    c(this, "redoButton");
+    c(this, "handleDrawingEnd", () => this.setActiveMode(null));
+    c(this, "handleHistory", () => this.updateUndoRedo());
+    var d, h, a, l;
     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())
+    const e = t.container ?? document.body, o = (l = (a = (h = (d = this.control).getOgma) == null ? void 0 : h.call(d)) == null ? void 0 : a.getContainer) == null ? void 0 : l.call(a);
+    !t.container && o && o !== document.body && console.error(
+      "[ogma-annotations-control] AnnotationToolbar: no `container` option given, defaulting to document.body. If this toolbar should dock to the Ogma graph area (e.g. it is embedded in a smaller/offset div), pass `container: control.getOgma().getContainer()` and give that container `position: relative`."
+    ), this.root = document.createElement("div"), this.root.className = "annotation-toolbar oa-toolbar oa-toolbar-bar", this.root.setAttribute("role", "group"), this.root.setAttribute("aria-label", "Annotation tools"), this.root.dataset.placement = t.placement ?? st, this.root.dataset.orientation = t.orientation ?? at, e.appendChild(this.root), ["click", "mousedown", "mousemove"].forEach(
+      (u) => this.root.addEventListener(u, (m) => m.stopPropagation())
     );
-    const o = t.enabledTypes ?? A, i = t.styles ?? {};
-    A.filter((s) => o.includes(s)).forEach(
-      (s) => this.root.appendChild(this.drawingButton(s, i))
-    ), 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 i = t.enabledTypes ?? L, n = t.styles ?? {};
+    L.filter((u) => i.includes(u)).forEach(
+      (u) => this.root.appendChild(this.drawingButton(u, n))
+    ), i.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 r = t.deleteMode ?? "erase";
+    (r === "erase" || r === "both") && (this.root.appendChild(this.separator()), this.root.appendChild(
       this.button(
         "erase",
         "eraser",
@@ -386,16 +436,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(
+    )), (r === "select" || r === "both") && (r === "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 m = this.control.getSelectedAnnotations().features.filter(
+          (b) => this.control.isAnnotationEditable(b.id)
+        );
+        m.length > 0 && this.control.remove({ type: "FeatureCollection", features: m });
       })
     )), (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(P, this.handleDrawingEnd), this.control.on(M, this.handleHistory), this.updateUndoRedo();
   }
   drawingButton(t, e) {
     switch (t) {
@@ -411,11 +463,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 n, r, d, h;
+          const o = (n = e.comment) == null ? void 0 : n.commentStyle, i = (r = e.comment) == null ? void 0 : r.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,
@@ -489,14 +541,14 @@ 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;
+    return n.type = "button", n.className = "oa-toolbar-button", n.dataset.tooltip = o, n.setAttribute("aria-label", o), t && n.setAttribute("aria-pressed", "false"), n.innerHTML = v(e, 16), n.addEventListener("click", i), t && (n.dataset.mode = t), n;
   }
   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");
+    this.activeButton && (this.activeButton.classList.remove("active"), this.activeButton.setAttribute("aria-pressed", "false")), this.activeButton = t ? this.root.querySelector(`[data-mode="${t}"]`) : null, this.activeButton && (this.activeButton.classList.add("active"), this.activeButton.setAttribute("aria-pressed", "true"));
   }
   updateUndoRedo() {
     this.undoButton.disabled = !this.control.canUndo(), this.redoButton.disabled = !this.control.canRedo();
@@ -509,25 +561,413 @@ 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(P, this.handleDrawingEnd), this.control.off(M, this.handleHistory), this.root.remove();
+  }
+}
+class lt {
+  constructor(t, e) {
+    c(this, "element");
+    c(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.setAttribute("aria-label", e.title), this.element.innerHTML = v(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(s, 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 = s, o.setAttribute("aria-haspopup", "listbox"), o.setAttribute("aria-expanded", "false"), o.setAttribute("aria-label", s);
+  const i = document.createElement("span");
+  i.className = "oa-toolbar-dropdown-label", i.textContent = t;
+  const n = document.createElement("span");
+  n.className = "oa-toolbar-dropdown-chevron", n.innerHTML = v("chevron-down", 14), o.appendChild(i), o.appendChild(n);
+  const r = document.createElement("div");
+  r.className = "oa-toolbar-dropdown-panel", r.setAttribute("role", "listbox"), r.setAttribute("aria-label", `${s} options`);
+  const d = (a) => o.setAttribute("aria-expanded", String(a)), h = () => {
+    e.classList.remove("open"), d(!1);
+  };
+  return o.addEventListener("click", (a) => {
+    var u;
+    a.stopPropagation();
+    const l = !e.classList.contains("open");
+    (u = e.closest(".annotation-style-toolbar")) == null || u.querySelectorAll(".oa-toolbar-dropdown.open").forEach((m) => {
+      var b;
+      m !== e && (m.classList.remove("open"), (b = m.querySelector(".oa-toolbar-dropdown-trigger")) == null || b.setAttribute("aria-expanded", "false"));
+    }), e.classList.toggle("open", l), d(l);
+  }), e.appendChild(o), e.appendChild(r), {
+    element: e,
+    panel: r,
+    close: h,
+    setLabel: (a) => {
+      i.textContent = a, o.setAttribute("aria-label", `${s}: ${a || t}`);
+    }
+  };
+}
+class ct {
+  constructor(t, e) {
+    c(this, "element");
+    c(this, "dropdown");
+    c(this, "optionElements", []);
+    this.ctx = t, this.item = e, this.dropdown = I(e.title, ""), this.element = this.dropdown.element, e.options.forEach((o) => {
+      const i = document.createElement("button");
+      i.type = "button", i.className = "oa-toolbar-dropdown-option", i.setAttribute("role", "option"), i.setAttribute("aria-selected", "false"), i.textContent = o.label, o.style && Object.assign(i.style, o.style), i.addEventListener("click", (n) => {
+        n.stopPropagation(), e.onSelect(o.value, this.ctx), this.dropdown.close();
+      }), this.dropdown.panel.appendChild(i), this.optionElements.push(i);
+    });
+  }
+  update(t) {
+    const e = this.item.getValue(t), o = this.item.options.find((n) => n.value === e), i = this.item.getLabel ? this.item.getLabel(e, t) : (o == null ? void 0 : o.label) ?? `${e}`;
+    this.dropdown.setLabel(i), this.element.title = (o == null ? void 0 : o.label) ?? `${e}`, this.optionElements.forEach((n, r) => {
+      n.setAttribute(
+        "aria-selected",
+        String(this.item.options[r].value === e)
+      );
+    });
+  }
+  destroy() {
+  }
+}
+const dt = 12;
+class ht {
+  constructor(t, e) {
+    c(this, "control");
+    c(this, "ogma");
+    c(this, "options");
+    c(this, "annotationId");
+    c(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. */
+    c(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. */
+    c(this, "root");
+    c(this, "cells", []);
+    c(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.root.setAttribute("role", "group"), this.root.setAttribute("aria-label", "Text style toolbar"), this.anchor.appendChild(this.root), ["click", "mousedown", "mousemove"].forEach(
+      (i) => this.root.addEventListener(i, (n) => n.stopPropagation())
+    );
+    const o = {
+      getAnnotation: () => this.control.getAnnotation(this.annotationId),
+      updateStyle: (i) => this.control.updateStyle(this.annotationId, i),
+      deleteAnnotation: () => {
+        const i = this.control.getAnnotation(this.annotationId);
+        i && this.control.remove(i);
+      }
+    };
+    this.setItems(this.getItems(o), o), this.cells.forEach((i) => i.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 lt(e, t);
+      case "dropdown":
+        return new ct(e, t);
+    }
+  }
+  setItems(t, e) {
+    this.cells = [], t.forEach((o) => {
+      if (o.kind === "separator") {
+        const n = document.createElement("span");
+        n.className = "oa-toolbar-separator", this.root.appendChild(n);
+        return;
+      }
+      const i = this.buildCell(o, e);
+      this.cells.push(i), this.root.appendChild(i.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(), i = ((l = t.properties.style) == null ? void 0 : l.fixedSize) === !0;
+    let { height: n } = q(t);
+    i && (n /= e);
+    const r = W(t), d = -(n / 2 + dt / e), h = Math.sin(o), a = Math.cos(o);
+    return {
+      x: r.x - d * h,
+      y: r.y + d * a
+    };
+  }
+  /** 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 ut {
+  constructor(t, e) {
+    c(this, "element");
+    c(this, "dropdown");
+    c(this, "swatch");
+    c(this, "more");
+    c(this, "morePicker", null);
+    c(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 i = document.createElement("div");
+    i.className = "oa-toolbar-swatch-grid", o.forEach((n) => {
+      const r = document.createElement("button");
+      r.type = "button", r.className = "oa-toolbar-swatch-cell", r.classList.toggle("oa-toolbar-swatch-cell-transparent", n.fill === "transparent"), r.title = n.fill, r.setAttribute(
+        "aria-label",
+        n.fill === "transparent" ? "No background" : `Background ${n.fill}`
+      ), r.style.setProperty("--oa-swatch-fill", n.fill), r.style.setProperty("--oa-swatch-stroke", n.stroke), r.addEventListener("click", (d) => {
+        d.stopPropagation(), this.pick(n.fill), this.dropdown.close();
+      }), i.appendChild(r);
+    }), this.dropdown.panel.appendChild(i), 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", (n) => {
+      n.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) || y.background;
+    this.morePicker.color = F(t), this.morePicker.addEventListener("color-changed", (o) => {
+      this.pick(O(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) || y.background;
+    this.swatch.style.setProperty("--oa-swatch-fill", e), this.swatch.classList.toggle("oa-toolbar-swatch-transparent", e === "transparent");
+  }
+  destroy() {
+    this.closeMorePicker();
+  }
+}
+const pt = [
+  { 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" }
+  }
+], bt = [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 ?? bt, i = this.options.swatches ?? pt, n = this.options.onMoreColors, r = [
+      {
+        kind: "custom",
+        id: "color",
+        build: (a) => new ut(a, { swatches: i, onMoreColors: n })
+      },
+      { kind: "separator" },
+      {
+        kind: "dropdown",
+        id: "font",
+        title: "Font",
+        options: e,
+        getValue: (a) => {
+          var l;
+          return ((l = a.properties.style) == null ? void 0 : l.font) || y.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: (a, l) => l.updateStyle({ font: `${a}` })
+      },
+      {
+        kind: "dropdown",
+        id: "fontSize",
+        title: "Font size",
+        options: o.map((a) => ({ value: a, label: `${a}` })),
+        getValue: (a) => {
+          const l = a.properties.style;
+          return Math.round(
+            V(
+              (l == null ? void 0 : l.fontSize) ?? y.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: (a, l) => l.updateStyle({ fontSize: a, fontScale: 1 })
+      },
+      { kind: "separator" },
+      {
+        kind: "button",
+        id: "bold",
+        title: "Bold",
+        icon: "bold",
+        isActive: (a) => {
+          var l;
+          return ((l = a.properties.style) == null ? void 0 : l.fontWeight) === "bold";
+        },
+        action: (a) => {
+          var u;
+          const l = ((u = a.getAnnotation().properties.style) == null ? void 0 : u.fontWeight) === "bold";
+          a.updateStyle({ fontWeight: l ? "normal" : "bold" });
+        }
+      },
+      { kind: "separator" },
+      {
+        kind: "button",
+        id: "showAuthor",
+        title: "Show author",
+        icon: "user",
+        isActive: (a) => {
+          var l;
+          return ((l = a.properties.style) == null ? void 0 : l.showAuthor) === !0;
+        },
+        action: (a) => {
+          var u;
+          const l = ((u = a.getAnnotation().properties.style) == null ? void 0 : u.showAuthor) === !0;
+          a.updateStyle({ showAuthor: !l });
+        }
+      },
+      { kind: "separator" },
+      {
+        kind: "button",
+        id: "delete",
+        title: "Delete",
+        icon: "trash",
+        danger: !0,
+        action: (a) => a.deleteAnnotation()
+      }
+    ];
+    return ((h = (d = this.options).items) == null ? void 0 : h.call(d, r, t)) ?? r;
+  }
+}
+class yt extends H {
+}
+class Ct {
+  constructor(t) {
+    c(this, "control");
+    c(this, "options");
+    c(this, "current", null);
+    c(this, "detachVisibility");
+    c(this, "handleUpdate", (t) => {
+      this.current && t.id === this.current.annotationId && k(t) && this.current.update(t);
+    });
+    this.control = t.control, this.options = t, this.detachVisibility = D(this.control, {
+      onShow: (e) => this.show(e),
+      onHide: () => this.hide(),
+      hideWhenNotEditable: t.hideWhenNotEditable
+    }), this.control.on($, this.handleUpdate);
+  }
+  show(t) {
+    if (!k(t)) {
+      this.hide();
+      return;
+    }
+    const e = U(t) ? yt : 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($, 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,
+  nt as ALL_PANEL_ANNOTATION_TYPES,
+  kt as AnnotationPanel,
+  ht as AnnotationStyleToolbar,
+  At as AnnotationToolbar,
+  j as BACKGROUNDS,
+  lt as ButtonItemCell,
+  ut as ColorCell,
+  it as DEFAULT_PANEL_ORIENTATION,
+  ot as DEFAULT_PANEL_PLACEMENT,
+  J as DEFAULT_RECENT_COLORS,
+  mt as DEFAULT_TOOLBAR_FONTS,
+  bt 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,
+  pt as STICKY_SWATCHES,
+  yt as StickyNoteStyleToolbar,
+  Ct as TextAnnotationToolbar,
+  H as TextStyleToolbar,
+  D as attachPanelVisibility,
+  rt as classifyPanelAnnotationType,
+  N as createRgbaColorPicker,
+  Z as initialRecentColors,
+  O as rgbaToString,
   v as svgIcon,
-  q as withColorFromAnnotation
+  Q as withColorFromAnnotation
 };