myio-js-library 0.1.510 → 0.1.511

package/dist/index.cjs

@@ -1193,7 +1193,7 @@ module.exports = __toCommonJS(index_exports);
 // package.json
 var package_default = {
   name: "myio-js-library",
-  version: "0.1.510",
+  version: "0.1.511",
   description: "A clean, standalone JS SDK for MYIO projects",
   license: "MIT",
   repository: "github:gh-myio/myio-js-library",
@@ -142559,28 +142559,44 @@ var HEADER_ANNOTATIONS_STYLES = `
   align-items: center;
   gap: 4px;
 }
+/* Header action buttons \u2014 mirror src/utils/InfoTooltip.ts pattern
+   (24\xD724 button with white-ish bg, SVG 14\xD714, slate hover, emerald
+   pinned state). RFC-0203 M7 follow-up: alignment with InfoTooltip. */
 .myio-annotations-panel-action {
-  width: 28px;
-  height: 28px;
+  width: 24px;
+  height: 24px;
+  border: none;
+  background: rgba(255, 255, 255, 0.7);
+  border-radius: 4px;
+  cursor: pointer;
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  border: 1px solid transparent;
-  border-radius: 6px;
-  background: transparent;
+  transition: background 0.15s ease, color 0.15s ease;
   color: #64748b;
-  cursor: pointer;
-  font-size: 14px;
-  transition: background 0.15s, color 0.15s;
+  padding: 0;
 }
 .myio-annotations-panel-action:hover {
-  background: rgba(108, 92, 231, 0.1);
-  color: #4c3aac;
+  background: rgba(255, 255, 255, 0.95);
+  color: #1e293b;
 }
 .myio-annotations-panel-action:focus-visible {
   outline: 2px solid #6c5ce7;
   outline-offset: 2px;
 }
+/* Pinned state \u2014 emerald-700, matches InfoTooltip */
+.myio-annotations-panel-action.pinned {
+  background: #047857;
+  color: #ffffff;
+}
+.myio-annotations-panel-action.pinned:hover {
+  background: #065f46;
+}
+.myio-annotations-panel-action svg {
+  width: 14px;
+  height: 14px;
+  display: block;
+}
 
 /* Tabs */
 .myio-annotations-tabs {
@@ -142639,6 +142655,25 @@ var HEADER_ANNOTATIONS_STYLES = `
   padding-bottom: 6px;
 }
 .myio-annotations-toolbar-count { font-weight: 600; }
+.myio-annotations-toolbar-spacer { flex: 1; }
+.myio-annotations-toolbar-mini {
+  font: inherit;
+  font-size: 11px;
+  font-weight: 600;
+  color: #64748b;
+  background: transparent;
+  border: 1px solid #e2e8f0;
+  border-radius: 4px;
+  padding: 2px 8px;
+  margin-left: 4px;
+  cursor: pointer;
+  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
+}
+.myio-annotations-toolbar-mini:hover {
+  background: rgba(108, 92, 231, 0.08);
+  color: #4c3aac;
+  border-color: rgba(108, 92, 231, 0.3);
+}
 
 .myio-annotations-toolbar-search {
   flex: 1;
@@ -142795,6 +142830,26 @@ var HEADER_ANNOTATIONS_STYLES = `
   font-size: 12px;
   font-weight: 700;
   color: #334155;
+  cursor: pointer;
+  user-select: none;
+  transition: background 0.15s ease;
+}
+.myio-annotations-group-header:hover {
+  background: #f1f5f9;
+}
+.myio-annotations-group-header:focus-visible {
+  outline: 2px solid #6c5ce7;
+  outline-offset: -2px;
+}
+.myio-annotations-group-chevron {
+  display: inline-block;
+  width: 10px;
+  font-size: 10px;
+  color: #94a3b8;
+  transition: transform 0.15s ease;
+}
+.myio-annotations-group.is-collapsed .myio-annotations-group-header {
+  border-bottom-color: transparent;
 }
 .myio-annotations-group-icon { font-size: 14px; }
 .myio-annotations-group-label { flex: 1; }
@@ -142812,13 +142867,21 @@ var HEADER_ANNOTATIONS_STYLES = `
   border-bottom-color: #fde68a;
 }
 
-/* Item */
+/* Item \u2014 rendered as <button>, so must reset UA defaults
+   (RFC-0203 M7 follow-up: black border + non-100% width came from
+   browser default button styling). */
 .myio-annotations-item {
   display: grid;
   grid-template-columns: 22px 1fr auto;
   gap: 10px;
   padding: 10px 12px;
+  width: 100%;
+  border: none;
   border-bottom: 1px solid #f1f5f9;
+  background: transparent;
+  color: inherit;
+  font: inherit;
+  text-align: left;
   cursor: pointer;
   transition: background 0.12s;
 }
@@ -143759,7 +143822,7 @@ function _formatDate(iso) {
 // src/components/header-annotations-panel/HeaderAnnotationsPanel.ts
 var TABS = [
   { id: "identifier", label: "Por Identificador" },
-  { id: "device", label: "Por Device" },
+  { id: "device", label: "Por Dispositivo" },
   { id: "domain", label: "Por Dom\xEDnio" }
 ];
 var TAB_STORAGE_KEY = "myio.annotations.activeTab";
@@ -143773,6 +143836,8 @@ var HeaderAnnotationsPanel = class {
   sortBy = DEFAULT_SORT;
   filter = createDefaultFilter();
   isOpen = false;
+  // RFC-0203 follow-up — collapsible group state per (tab,key). Default: expanded.
+  collapsedKeys = /* @__PURE__ */ new Set();
   // RFC-0203 M6 — Tooltip behaviors state
   isPinned = false;
   isMaximized = false;
@@ -144090,28 +144155,47 @@ var HeaderAnnotationsPanel = class {
     const bodyHtml = this._renderBody(groups);
     return `
 <div class="myio-annotations-panel-header" data-region="header" data-drag-handle>
-  <h2 class="myio-annotations-panel-title" id="${PANEL_DOM_ID}-title">
-    <span class="myio-annotations-icon" aria-hidden="true">\u{1F4CB}</span>Anota\xE7\xF5es
-  </h2>
+  <span class="myio-annotations-icon" aria-hidden="true">\u{1F4CB}</span>
+  <h2 class="myio-annotations-panel-title" id="${PANEL_DOM_ID}-title">Anota\xE7\xF5es</h2>
   <span class="myio-annotations-panel-meta">${totalAllUnfiltered} ativas \xB7 ${pending} pendentes \xB7 ${overdue} vencidas</span>
   <div class="myio-annotations-panel-actions">
     <button
-      class="myio-annotations-panel-action ${this.isMaximized ? "is-active" : ""}"
+      class="myio-annotations-panel-action ${this.isPinned ? "pinned" : ""}"
+      type="button"
+      data-action="pin"
+      title="${this.isPinned ? "Desafixar" : "Fixar na tela"}"
+      aria-label="${this.isPinned ? "Desafixar painel" : "Fixar painel"}"
+      aria-pressed="${this.isPinned}"
+    >
+      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+        <path d="M9 4v6l-2 4v2h10v-2l-2-4V4"/>
+        <line x1="12" y1="16" x2="12" y2="21"/>
+        <line x1="8" y1="4" x2="16" y2="4"/>
+      </svg>
+    </button>
+    <button
+      class="myio-annotations-panel-action"
       type="button"
       data-action="maximize"
       title="${this.isMaximized ? "Restaurar" : "Maximizar"}"
       aria-label="${this.isMaximized ? "Restaurar tamanho" : "Maximizar painel"}"
       aria-pressed="${this.isMaximized}"
-    >${this.isMaximized ? "\u{1F5D7}" : "\u2922"}</button>
+    >
+      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+        <rect x="3" y="3" width="18" height="18" rx="2"/>
+      </svg>
+    </button>
     <button
-      class="myio-annotations-panel-action ${this.isPinned ? "is-active" : ""}"
+      class="myio-annotations-panel-action"
       type="button"
-      data-action="pin"
-      title="${this.isPinned ? "Desafixar" : "Afixar painel"}"
-      aria-label="${this.isPinned ? "Desafixar painel" : "Afixar painel"}"
-      aria-pressed="${this.isPinned}"
-    >\u{1F4CC}</button>
-    <button class="myio-annotations-panel-action" type="button" data-action="close" title="Fechar" aria-label="Fechar painel">\u2715</button>
+      data-action="close"
+      title="Fechar"
+      aria-label="Fechar painel"
+    >
+      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+        <path d="M18 6L6 18M6 6l12 12"/>
+      </svg>
+    </button>
   </div>
 </div>
 <div class="myio-annotations-tabs" role="tablist" aria-label="Modo de agrupamento">${tabsHtml}</div>
@@ -144158,6 +144242,9 @@ ${this._renderToolbar(filteredCount, totalAllUnfiltered)}
   </div>
   <div class="myio-annotations-toolbar-row myio-annotations-toolbar-meta">
     <span class="myio-annotations-toolbar-count">${showingHtml}</span>
+    <span class="myio-annotations-toolbar-spacer"></span>
+    <button type="button" class="myio-annotations-toolbar-mini" data-action="expand-all" title="Expandir todos os grupos">\u25BC Expandir tudo</button>
+    <button type="button" class="myio-annotations-toolbar-mini" data-action="collapse-all" title="Recolher todos os grupos">\u25B6 Recolher tudo</button>
   </div>
   <div id="myio-anno-filters" class="myio-annotations-filters" hidden>${this._renderFilters()}</div>
 </div>`;
@@ -144229,17 +144316,56 @@ ${this._renderToolbar(filteredCount, totalAllUnfiltered)}
     const items = group.devices.flatMap(
       (d) => d.annotations.map((a) => renderAnnotationItemCard(d, a, term))
     );
-    const groupClass = isNoIdentifier ? "myio-annotations-group myio-annotations-group--no-id" : "myio-annotations-group";
+    const compoundKey = `${this.activeTab}::${group.key}`;
+    const isCollapsed = this.collapsedKeys.has(compoundKey);
+    const baseClass = isNoIdentifier ? "myio-annotations-group myio-annotations-group--no-id" : "myio-annotations-group";
+    const groupClass = isCollapsed ? `${baseClass} is-collapsed` : baseClass;
+    const itemsHtml = isCollapsed ? `<div class="myio-annotations-items" hidden></div>` : `<div class="myio-annotations-items">${items.join("\n")}</div>`;
     return `
 <section class="${groupClass}">
-  <header class="myio-annotations-group-header">
+  <header class="myio-annotations-group-header" role="button" tabindex="0"
+          data-group-toggle="${escapeHtml6(group.key)}"
+          aria-expanded="${!isCollapsed}"
+          title="${isCollapsed ? "Expandir grupo" : "Recolher grupo"}">
+    <span class="myio-annotations-group-chevron" aria-hidden="true">${isCollapsed ? "\u25B6" : "\u25BC"}</span>
     ${group.icon ? `<span class="myio-annotations-group-icon" aria-hidden="true">${escapeHtml6(group.icon)}</span>` : ""}
     <span class="myio-annotations-group-label">${escapeHtml6(group.label)}</span>
     <span class="myio-annotations-group-count">${group.totalAnnotations}</span>
   </header>
-  ${items.join("\n")}
+  ${itemsHtml}
 </section>`;
   }
+  /** Toggle a single group's collapsed state (scoped to current tab). */
+  _toggleGroupCollapsed(groupKey) {
+    const compoundKey = `${this.activeTab}::${groupKey}`;
+    if (this.collapsedKeys.has(compoundKey)) {
+      this.collapsedKeys.delete(compoundKey);
+    } else {
+      this.collapsedKeys.add(compoundKey);
+    }
+    if (this.isOpen) this._render();
+  }
+  /** Expand every group in the current tab. */
+  _expandAll() {
+    const prefix = `${this.activeTab}::`;
+    let changed = false;
+    for (const k of Array.from(this.collapsedKeys)) {
+      if (k.startsWith(prefix)) {
+        this.collapsedKeys.delete(k);
+        changed = true;
+      }
+    }
+    if (changed && this.isOpen) this._render();
+  }
+  /** Collapse every group in the current tab. */
+  _collapseAll() {
+    const orch = this.opts.getOrchestrator();
+    if (!orch) return;
+    const rawGroups = orch.getGroups(this.activeTab, this.filter);
+    const prefix = `${this.activeTab}::`;
+    for (const g of rawGroups) this.collapsedKeys.add(`${prefix}${g.key}`);
+    if (this.isOpen) this._render();
+  }
   _bindInteractiveElements() {
     if (!this.root) return;
     const tabBtns = Array.from(this.root.querySelectorAll(".myio-annotations-tab"));
@@ -144311,6 +144437,22 @@ ${this._renderToolbar(filteredCount, totalAllUnfiltered)}
     if (exportBtn) {
       exportBtn.addEventListener("click", () => this._openExportFlow());
     }
+    const expandAllBtn = this.root.querySelector('[data-action="expand-all"]');
+    if (expandAllBtn) expandAllBtn.addEventListener("click", () => this._expandAll());
+    const collapseAllBtn = this.root.querySelector('[data-action="collapse-all"]');
+    if (collapseAllBtn) collapseAllBtn.addEventListener("click", () => this._collapseAll());
+    const groupHeaders = this.root.querySelectorAll("[data-group-toggle]");
+    groupHeaders.forEach((h) => {
+      const key = h.getAttribute("data-group-toggle") || "";
+      h.addEventListener("click", () => this._toggleGroupCollapsed(key));
+      h.addEventListener("keydown", (e) => {
+        const ke = e;
+        if (ke.key === "Enter" || ke.key === " ") {
+          ke.preventDefault();
+          this._toggleGroupCollapsed(key);
+        }
+      });
+    });
     const searchInput = this.root.querySelector('[data-input="search"]');
     if (searchInput) {
       searchInput.addEventListener("input", () => {

package/dist/index.d.cts

@@ -19489,6 +19489,7 @@ declare class HeaderAnnotationsPanel {
     private sortBy;
     private filter;
     private isOpen;
+    private collapsedKeys;
     private isPinned;
     private isMaximized;
     private isDragging;
@@ -19546,6 +19547,12 @@ declare class HeaderAnnotationsPanel {
     private _activeFilterCount;
     private _renderBody;
     private _renderGroup;
+    /** Toggle a single group's collapsed state (scoped to current tab). */
+    private _toggleGroupCollapsed;
+    /** Expand every group in the current tab. */
+    private _expandAll;
+    /** Collapse every group in the current tab. */
+    private _collapseAll;
     private _bindInteractiveElements;
     /** After a re-render triggered by a filter checkbox, re-open the filter panel
      * so the user keeps the context visible. */

package/dist/index.js

@@ -546,7 +546,7 @@ var init_template_card = __esm({
 // package.json
 var package_default = {
   name: "myio-js-library",
-  version: "0.1.510",
+  version: "0.1.511",
   description: "A clean, standalone JS SDK for MYIO projects",
   license: "MIT",
   repository: "github:gh-myio/myio-js-library",
@@ -141912,28 +141912,44 @@ var HEADER_ANNOTATIONS_STYLES = `
   align-items: center;
   gap: 4px;
 }
+/* Header action buttons \u2014 mirror src/utils/InfoTooltip.ts pattern
+   (24\xD724 button with white-ish bg, SVG 14\xD714, slate hover, emerald
+   pinned state). RFC-0203 M7 follow-up: alignment with InfoTooltip. */
 .myio-annotations-panel-action {
-  width: 28px;
-  height: 28px;
+  width: 24px;
+  height: 24px;
+  border: none;
+  background: rgba(255, 255, 255, 0.7);
+  border-radius: 4px;
+  cursor: pointer;
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  border: 1px solid transparent;
-  border-radius: 6px;
-  background: transparent;
+  transition: background 0.15s ease, color 0.15s ease;
   color: #64748b;
-  cursor: pointer;
-  font-size: 14px;
-  transition: background 0.15s, color 0.15s;
+  padding: 0;
 }
 .myio-annotations-panel-action:hover {
-  background: rgba(108, 92, 231, 0.1);
-  color: #4c3aac;
+  background: rgba(255, 255, 255, 0.95);
+  color: #1e293b;
 }
 .myio-annotations-panel-action:focus-visible {
   outline: 2px solid #6c5ce7;
   outline-offset: 2px;
 }
+/* Pinned state \u2014 emerald-700, matches InfoTooltip */
+.myio-annotations-panel-action.pinned {
+  background: #047857;
+  color: #ffffff;
+}
+.myio-annotations-panel-action.pinned:hover {
+  background: #065f46;
+}
+.myio-annotations-panel-action svg {
+  width: 14px;
+  height: 14px;
+  display: block;
+}
 
 /* Tabs */
 .myio-annotations-tabs {
@@ -141992,6 +142008,25 @@ var HEADER_ANNOTATIONS_STYLES = `
   padding-bottom: 6px;
 }
 .myio-annotations-toolbar-count { font-weight: 600; }
+.myio-annotations-toolbar-spacer { flex: 1; }
+.myio-annotations-toolbar-mini {
+  font: inherit;
+  font-size: 11px;
+  font-weight: 600;
+  color: #64748b;
+  background: transparent;
+  border: 1px solid #e2e8f0;
+  border-radius: 4px;
+  padding: 2px 8px;
+  margin-left: 4px;
+  cursor: pointer;
+  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
+}
+.myio-annotations-toolbar-mini:hover {
+  background: rgba(108, 92, 231, 0.08);
+  color: #4c3aac;
+  border-color: rgba(108, 92, 231, 0.3);
+}
 
 .myio-annotations-toolbar-search {
   flex: 1;
@@ -142148,6 +142183,26 @@ var HEADER_ANNOTATIONS_STYLES = `
   font-size: 12px;
   font-weight: 700;
   color: #334155;
+  cursor: pointer;
+  user-select: none;
+  transition: background 0.15s ease;
+}
+.myio-annotations-group-header:hover {
+  background: #f1f5f9;
+}
+.myio-annotations-group-header:focus-visible {
+  outline: 2px solid #6c5ce7;
+  outline-offset: -2px;
+}
+.myio-annotations-group-chevron {
+  display: inline-block;
+  width: 10px;
+  font-size: 10px;
+  color: #94a3b8;
+  transition: transform 0.15s ease;
+}
+.myio-annotations-group.is-collapsed .myio-annotations-group-header {
+  border-bottom-color: transparent;
 }
 .myio-annotations-group-icon { font-size: 14px; }
 .myio-annotations-group-label { flex: 1; }
@@ -142165,13 +142220,21 @@ var HEADER_ANNOTATIONS_STYLES = `
   border-bottom-color: #fde68a;
 }
 
-/* Item */
+/* Item \u2014 rendered as <button>, so must reset UA defaults
+   (RFC-0203 M7 follow-up: black border + non-100% width came from
+   browser default button styling). */
 .myio-annotations-item {
   display: grid;
   grid-template-columns: 22px 1fr auto;
   gap: 10px;
   padding: 10px 12px;
+  width: 100%;
+  border: none;
   border-bottom: 1px solid #f1f5f9;
+  background: transparent;
+  color: inherit;
+  font: inherit;
+  text-align: left;
   cursor: pointer;
   transition: background 0.12s;
 }
@@ -143112,7 +143175,7 @@ function _formatDate(iso) {
 // src/components/header-annotations-panel/HeaderAnnotationsPanel.ts
 var TABS = [
   { id: "identifier", label: "Por Identificador" },
-  { id: "device", label: "Por Device" },
+  { id: "device", label: "Por Dispositivo" },
   { id: "domain", label: "Por Dom\xEDnio" }
 ];
 var TAB_STORAGE_KEY = "myio.annotations.activeTab";
@@ -143126,6 +143189,8 @@ var HeaderAnnotationsPanel = class {
   sortBy = DEFAULT_SORT;
   filter = createDefaultFilter();
   isOpen = false;
+  // RFC-0203 follow-up — collapsible group state per (tab,key). Default: expanded.
+  collapsedKeys = /* @__PURE__ */ new Set();
   // RFC-0203 M6 — Tooltip behaviors state
   isPinned = false;
   isMaximized = false;
@@ -143443,28 +143508,47 @@ var HeaderAnnotationsPanel = class {
     const bodyHtml = this._renderBody(groups);
     return `
 <div class="myio-annotations-panel-header" data-region="header" data-drag-handle>
-  <h2 class="myio-annotations-panel-title" id="${PANEL_DOM_ID}-title">
-    <span class="myio-annotations-icon" aria-hidden="true">\u{1F4CB}</span>Anota\xE7\xF5es
-  </h2>
+  <span class="myio-annotations-icon" aria-hidden="true">\u{1F4CB}</span>
+  <h2 class="myio-annotations-panel-title" id="${PANEL_DOM_ID}-title">Anota\xE7\xF5es</h2>
   <span class="myio-annotations-panel-meta">${totalAllUnfiltered} ativas \xB7 ${pending} pendentes \xB7 ${overdue} vencidas</span>
   <div class="myio-annotations-panel-actions">
     <button
-      class="myio-annotations-panel-action ${this.isMaximized ? "is-active" : ""}"
+      class="myio-annotations-panel-action ${this.isPinned ? "pinned" : ""}"
+      type="button"
+      data-action="pin"
+      title="${this.isPinned ? "Desafixar" : "Fixar na tela"}"
+      aria-label="${this.isPinned ? "Desafixar painel" : "Fixar painel"}"
+      aria-pressed="${this.isPinned}"
+    >
+      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+        <path d="M9 4v6l-2 4v2h10v-2l-2-4V4"/>
+        <line x1="12" y1="16" x2="12" y2="21"/>
+        <line x1="8" y1="4" x2="16" y2="4"/>
+      </svg>
+    </button>
+    <button
+      class="myio-annotations-panel-action"
       type="button"
       data-action="maximize"
       title="${this.isMaximized ? "Restaurar" : "Maximizar"}"
       aria-label="${this.isMaximized ? "Restaurar tamanho" : "Maximizar painel"}"
       aria-pressed="${this.isMaximized}"
-    >${this.isMaximized ? "\u{1F5D7}" : "\u2922"}</button>
+    >
+      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+        <rect x="3" y="3" width="18" height="18" rx="2"/>
+      </svg>
+    </button>
     <button
-      class="myio-annotations-panel-action ${this.isPinned ? "is-active" : ""}"
+      class="myio-annotations-panel-action"
       type="button"
-      data-action="pin"
-      title="${this.isPinned ? "Desafixar" : "Afixar painel"}"
-      aria-label="${this.isPinned ? "Desafixar painel" : "Afixar painel"}"
-      aria-pressed="${this.isPinned}"
-    >\u{1F4CC}</button>
-    <button class="myio-annotations-panel-action" type="button" data-action="close" title="Fechar" aria-label="Fechar painel">\u2715</button>
+      data-action="close"
+      title="Fechar"
+      aria-label="Fechar painel"
+    >
+      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+        <path d="M18 6L6 18M6 6l12 12"/>
+      </svg>
+    </button>
   </div>
 </div>
 <div class="myio-annotations-tabs" role="tablist" aria-label="Modo de agrupamento">${tabsHtml}</div>
@@ -143511,6 +143595,9 @@ ${this._renderToolbar(filteredCount, totalAllUnfiltered)}
   </div>
   <div class="myio-annotations-toolbar-row myio-annotations-toolbar-meta">
     <span class="myio-annotations-toolbar-count">${showingHtml}</span>
+    <span class="myio-annotations-toolbar-spacer"></span>
+    <button type="button" class="myio-annotations-toolbar-mini" data-action="expand-all" title="Expandir todos os grupos">\u25BC Expandir tudo</button>
+    <button type="button" class="myio-annotations-toolbar-mini" data-action="collapse-all" title="Recolher todos os grupos">\u25B6 Recolher tudo</button>
   </div>
   <div id="myio-anno-filters" class="myio-annotations-filters" hidden>${this._renderFilters()}</div>
 </div>`;
@@ -143582,17 +143669,56 @@ ${this._renderToolbar(filteredCount, totalAllUnfiltered)}
     const items = group.devices.flatMap(
       (d) => d.annotations.map((a) => renderAnnotationItemCard(d, a, term))
     );
-    const groupClass = isNoIdentifier ? "myio-annotations-group myio-annotations-group--no-id" : "myio-annotations-group";
+    const compoundKey = `${this.activeTab}::${group.key}`;
+    const isCollapsed = this.collapsedKeys.has(compoundKey);
+    const baseClass = isNoIdentifier ? "myio-annotations-group myio-annotations-group--no-id" : "myio-annotations-group";
+    const groupClass = isCollapsed ? `${baseClass} is-collapsed` : baseClass;
+    const itemsHtml = isCollapsed ? `<div class="myio-annotations-items" hidden></div>` : `<div class="myio-annotations-items">${items.join("\n")}</div>`;
     return `
 <section class="${groupClass}">
-  <header class="myio-annotations-group-header">
+  <header class="myio-annotations-group-header" role="button" tabindex="0"
+          data-group-toggle="${escapeHtml6(group.key)}"
+          aria-expanded="${!isCollapsed}"
+          title="${isCollapsed ? "Expandir grupo" : "Recolher grupo"}">
+    <span class="myio-annotations-group-chevron" aria-hidden="true">${isCollapsed ? "\u25B6" : "\u25BC"}</span>
     ${group.icon ? `<span class="myio-annotations-group-icon" aria-hidden="true">${escapeHtml6(group.icon)}</span>` : ""}
     <span class="myio-annotations-group-label">${escapeHtml6(group.label)}</span>
     <span class="myio-annotations-group-count">${group.totalAnnotations}</span>
   </header>
-  ${items.join("\n")}
+  ${itemsHtml}
 </section>`;
   }
+  /** Toggle a single group's collapsed state (scoped to current tab). */
+  _toggleGroupCollapsed(groupKey) {
+    const compoundKey = `${this.activeTab}::${groupKey}`;
+    if (this.collapsedKeys.has(compoundKey)) {
+      this.collapsedKeys.delete(compoundKey);
+    } else {
+      this.collapsedKeys.add(compoundKey);
+    }
+    if (this.isOpen) this._render();
+  }
+  /** Expand every group in the current tab. */
+  _expandAll() {
+    const prefix = `${this.activeTab}::`;
+    let changed = false;
+    for (const k of Array.from(this.collapsedKeys)) {
+      if (k.startsWith(prefix)) {
+        this.collapsedKeys.delete(k);
+        changed = true;
+      }
+    }
+    if (changed && this.isOpen) this._render();
+  }
+  /** Collapse every group in the current tab. */
+  _collapseAll() {
+    const orch = this.opts.getOrchestrator();
+    if (!orch) return;
+    const rawGroups = orch.getGroups(this.activeTab, this.filter);
+    const prefix = `${this.activeTab}::`;
+    for (const g of rawGroups) this.collapsedKeys.add(`${prefix}${g.key}`);
+    if (this.isOpen) this._render();
+  }
   _bindInteractiveElements() {
     if (!this.root) return;
     const tabBtns = Array.from(this.root.querySelectorAll(".myio-annotations-tab"));
@@ -143664,6 +143790,22 @@ ${this._renderToolbar(filteredCount, totalAllUnfiltered)}
     if (exportBtn) {
       exportBtn.addEventListener("click", () => this._openExportFlow());
     }
+    const expandAllBtn = this.root.querySelector('[data-action="expand-all"]');
+    if (expandAllBtn) expandAllBtn.addEventListener("click", () => this._expandAll());
+    const collapseAllBtn = this.root.querySelector('[data-action="collapse-all"]');
+    if (collapseAllBtn) collapseAllBtn.addEventListener("click", () => this._collapseAll());
+    const groupHeaders = this.root.querySelectorAll("[data-group-toggle]");
+    groupHeaders.forEach((h) => {
+      const key = h.getAttribute("data-group-toggle") || "";
+      h.addEventListener("click", () => this._toggleGroupCollapsed(key));
+      h.addEventListener("keydown", (e) => {
+        const ke = e;
+        if (ke.key === "Enter" || ke.key === " ") {
+          ke.preventDefault();
+          this._toggleGroupCollapsed(key);
+        }
+      });
+    });
     const searchInput = this.root.querySelector('[data-input="search"]');
     if (searchInput) {
       searchInput.addEventListener("input", () => {