myio-js-library 0.1.511 → 0.1.513

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.511",
+  version: "0.1.513",
   description: "A clean, standalone JS SDK for MYIO projects",
   license: "MIT",
   repository: "github:gh-myio/myio-js-library",
@@ -142528,26 +142528,30 @@ var HEADER_ANNOTATIONS_STYLES = `
 .myio-vlist-container { /* container is .myio-annotations-body in practice */ }
 .myio-vlist-viewport { will-change: transform; }
 
-/* Header */
+/* Header \u2014 subtle line in the InfoTooltip/EnergySummaryTooltip pattern.
+   Soft amethyst gradient + thin border, compact padding. */
 .myio-annotations-panel-header {
   display: flex;
   align-items: center;
   gap: 8px;
-  padding: 12px 16px;
-  border-bottom: 1px solid #e2e8f0;
-  background: linear-gradient(135deg, rgba(108, 92, 231, 0.05), rgba(108, 92, 231, 0.02));
+  padding: 10px 14px;
+  border-bottom: 1px solid #c4b5fd;
+  background: linear-gradient(90deg, #faf9ff 0%, #ede9fe 100%);
+  border-radius: 12px 12px 0 0;
+  cursor: move;
+  user-select: none;
+}
+.myio-annotations-icon {
+  font-size: 16px;
+  flex-shrink: 0;
 }
 .myio-annotations-panel-title {
-  flex: 1;
   margin: 0;
-  font-size: 15px;
+  font-size: 14px;
   font-weight: 700;
   color: #4c3aac;
-  letter-spacing: -0.01em;
-}
-.myio-annotations-panel-title .myio-annotations-icon {
-  margin-right: 6px;
-  font-size: 16px;
+  letter-spacing: 0.2px;
+  flex-shrink: 0;
 }
 .myio-annotations-panel-meta {
   font-size: 11px;
@@ -142927,22 +142931,19 @@ var HEADER_ANNOTATIONS_STYLES = `
   align-items: flex-end;
   gap: 4px;
 }
+/* Importance badge \u2014 label + color come from inline style (RFC-0104
+   canonical colors). Padding leaves room for "Muito Baixa"/"Muito Alta". */
 .myio-annotations-importance-badge {
   display: inline-block;
-  min-width: 18px;
-  padding: 2px 6px;
+  padding: 2px 8px;
   border-radius: 10px;
   font-size: 10px;
   font-weight: 700;
   color: #fff;
   text-align: center;
-  line-height: 1.2;
+  line-height: 1.3;
+  white-space: nowrap;
 }
-.myio-annotations-importance-1 { background: #94a3b8; }
-.myio-annotations-importance-2 { background: #64748b; }
-.myio-annotations-importance-3 { background: #6c5ce7; }
-.myio-annotations-importance-4 { background: #f59e0b; }
-.myio-annotations-importance-5 { background: #dc2626; }
 
 .myio-annotations-overdue {
   font-size: 10px;
@@ -142972,44 +142973,61 @@ var HEADER_ANNOTATIONS_STYLES = `
   font-size: 13px;
 }
 
-/* Footer */
+/* Footer \u2014 modeled on the TELEMETRY_INFO climatiza\xE7\xE3o tooltip:
+   icon-style buttons left + right, subtle meta in the middle. */
 .myio-annotations-panel-footer {
   display: flex;
   align-items: center;
   justify-content: space-between;
-  padding: 8px 16px;
+  gap: 8px;
+  padding: 6px 12px;
   border-top: 1px solid #e2e8f0;
   background: #fafbff;
   font-size: 11px;
   color: #64748b;
   flex-shrink: 0;
 }
+.myio-annotations-panel-footer-tools {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+}
 .myio-annotations-panel-footer-meta {
   flex: 1;
   text-align: center;
   font-size: 11px;
   color: #94a3b8;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
-.myio-annotations-panel-footer-action {
+.myio-annotations-panel-footer-iconbtn {
   font: inherit;
-  font-size: 12px;
+  font-size: 11px;
   font-weight: 600;
   color: #4c3aac;
-  background: transparent;
-  border: 1px solid rgba(108, 92, 231, 0.3);
+  background: rgba(108, 92, 231, 0.06);
+  border: 1px solid rgba(108, 92, 231, 0.2);
   border-radius: 6px;
-  padding: 4px 10px;
+  padding: 4px 8px;
   cursor: pointer;
-  transition: background 0.15s, border-color 0.15s;
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
 }
-.myio-annotations-panel-footer-action:hover {
-  background: rgba(108, 92, 231, 0.08);
+.myio-annotations-panel-footer-iconbtn:hover {
+  background: rgba(108, 92, 231, 0.14);
   border-color: rgba(108, 92, 231, 0.5);
+  color: #3b2e8a;
 }
-.myio-annotations-panel-footer-action:focus-visible {
+.myio-annotations-panel-footer-iconbtn:focus-visible {
   outline: 2px solid #6c5ce7;
   outline-offset: 1px;
 }
+.myio-annotations-panel-footer-iconbtn svg {
+  display: block;
+}
 `;
 function injectStylesOnce() {
   if (typeof document === "undefined") return;
@@ -143086,7 +143104,7 @@ function _compareIsoDesc(a, b) {
 function createDefaultFilter() {
   return {
     types: /* @__PURE__ */ new Set(),
-    statuses: /* @__PURE__ */ new Set(),
+    statuses: /* @__PURE__ */ new Set(["created", "modified"]),
     importance: /* @__PURE__ */ new Set(),
     actionableOnly: false,
     searchTerm: ""
@@ -143132,6 +143150,25 @@ var TYPE_ICONS = {
   maintenance: "\u{1F527}",
   activity: "\u2713"
 };
+var IMPORTANCE_LABELS3 = {
+  1: "Muito Baixa",
+  2: "Baixa",
+  3: "Normal",
+  4: "Alta",
+  5: "Muito Alta"
+};
+var IMPORTANCE_COLORS4 = {
+  1: "#9E9E9E",
+  // gray
+  2: "#64B5F6",
+  // light blue
+  3: "#2196F3",
+  // blue
+  4: "#FF9800",
+  // orange
+  5: "#F44336"
+  // red
+};
 var ITEM_TEXT_MAX = 120;
 function escapeHtml6(input) {
   if (input == null) return "";
@@ -143204,7 +143241,11 @@ function renderAnnotationItemCard(device, annotation, searchTerm) {
     </div>
   </div>
   <div class="myio-annotations-item-side">
-    <span class="myio-annotations-importance-badge myio-annotations-importance-${importance}" title="Import\xE2ncia ${importance}">${importance}</span>
+    <span
+      class="myio-annotations-importance-badge"
+      style="background:${IMPORTANCE_COLORS4[importance]}"
+      title="Import\xE2ncia: ${IMPORTANCE_LABELS3[importance]}"
+    >${IMPORTANCE_LABELS3[importance]}</span>
     ${overdueTag}
   </div>
 </button>
@@ -143823,13 +143864,13 @@ function _formatDate(iso) {
 var TABS = [
   { id: "identifier", label: "Por Identificador" },
   { id: "device", label: "Por Dispositivo" },
-  { id: "domain", label: "Por Dom\xEDnio" }
+  { id: "domain", label: "Por Tipo de Telemetria" }
 ];
 var TAB_STORAGE_KEY = "myio.annotations.activeTab";
 var SORT_STORAGE_KEY = "myio.annotations.sortBy";
 var SEARCH_DEBOUNCE_MS = 250;
 var PANEL_DOM_ID = "myio-annotations-panel";
-var HeaderAnnotationsPanel = class {
+var HeaderAnnotationsPanel = class _HeaderAnnotationsPanel {
   root = null;
   anchorButton = null;
   activeTab = "identifier";
@@ -143854,6 +143895,10 @@ var HeaderAnnotationsPanel = class {
   _onFocusTrap;
   // Debounce timer for search input
   _searchDebounceTimer = null;
+  // RFC-0203 follow-up — hover-to-open + delayed-close pattern (alarm parity)
+  _hideTimer = null;
+  _isMouseOver = false;
+  static DELAYED_HIDE_MS = 450;
   constructor(options = {}) {
     this.opts = {
       getOrchestrator: options.getOrchestrator ?? (() => (typeof window !== "undefined" ? window.AnnotationServiceOrchestrator : null) ?? null),
@@ -143925,8 +143970,23 @@ var HeaderAnnotationsPanel = class {
     this.root.setAttribute("aria-hidden", "false");
     this.isOpen = true;
     this._bindWindowListeners();
-    const firstTab = this.root.querySelector('.myio-annotations-tab[aria-selected="true"]');
-    if (firstTab) firstTab.focus();
+    this.root.onmouseenter = () => {
+      this._isMouseOver = true;
+      if (this._hideTimer) {
+        clearTimeout(this._hideTimer);
+        this._hideTimer = null;
+      }
+    };
+    this.root.onmouseleave = () => {
+      this._isMouseOver = false;
+      this.startDelayedHide();
+    };
+    if (!this._suppressNextFocus) {
+      const firstTab = this.root.querySelector(
+        '.myio-annotations-tab[aria-selected="true"]'
+      );
+      if (firstTab) firstTab.focus();
+    }
   }
   /** Hide the panel without destroying it. */
   hide() {
@@ -143947,9 +144007,42 @@ var HeaderAnnotationsPanel = class {
     if (this.isOpen) this.hide();
     else this.show(anchorButton);
   }
+  /**
+   * RFC-0203 follow-up — hover-to-open helper for the HEADER button.
+   * Cancels any pending delayed-hide so quickly re-entering keeps the panel.
+   * Does NOT steal keyboard focus (mouse-driven UX).
+   */
+  showFromHover(anchorButton) {
+    if (this._hideTimer) {
+      clearTimeout(this._hideTimer);
+      this._hideTimer = null;
+    }
+    if (this.isOpen) return;
+    this._suppressNextFocus = true;
+    this.show(anchorButton);
+    this._suppressNextFocus = false;
+  }
+  _suppressNextFocus = false;
+  /**
+   * RFC-0203 follow-up — delayed-hide entry-point invoked from button mouseleave.
+   * Mirrors AlarmNotificationTooltip.startDelayedHide.
+   */
+  startDelayedHide() {
+    if (this.isPinned) return;
+    if (this._isMouseOver) return;
+    if (this._hideTimer) clearTimeout(this._hideTimer);
+    this._hideTimer = setTimeout(() => {
+      this._hideTimer = null;
+      if (this.isOpen && !this.isPinned && !this._isMouseOver) this.hide();
+    }, _HeaderAnnotationsPanel.DELAYED_HIDE_MS);
+  }
   /** Remove the panel DOM + listeners. After this, `show()` recreates. */
   destroy() {
     this._unbindWindowListeners();
+    if (this._hideTimer) {
+      clearTimeout(this._hideTimer);
+      this._hideTimer = null;
+    }
     if (this.vlist) {
       this.vlist.destroy();
       this.vlist = null;
@@ -143961,6 +144054,7 @@ var HeaderAnnotationsPanel = class {
     this.isPinned = false;
     this.isMaximized = false;
     this.isDragging = false;
+    this._isMouseOver = false;
   }
   /** Test/inspection helper. */
   getActiveTab() {
@@ -144155,7 +144249,7 @@ var HeaderAnnotationsPanel = class {
     const bodyHtml = this._renderBody(groups);
     return `
 <div class="myio-annotations-panel-header" data-region="header" data-drag-handle>
-  <span class="myio-annotations-icon" aria-hidden="true">\u{1F4CB}</span>
+  <span class="myio-annotations-icon" aria-hidden="true">\u270F\uFE0F</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">
@@ -144202,9 +144296,32 @@ var HeaderAnnotationsPanel = class {
 ${this._renderToolbar(filteredCount, totalAllUnfiltered)}
 <div class="myio-annotations-body" id="myio-anno-body" role="tabpanel" aria-labelledby="myio-anno-tab-${this.activeTab}">${bodyHtml}</div>
 <div class="myio-annotations-panel-footer">
-  <button class="myio-annotations-panel-footer-action" type="button" data-action="export">\u{1F4E5} Exportar\u2026</button>
-  <span class="myio-annotations-panel-footer-meta">RFC-0203 \xB7 ${groups.length} grupos \xB7 ${filteredCount} anota\xE7\xF5es</span>
-  <button class="myio-annotations-panel-footer-action" type="button" data-action="refresh">Atualizar \u21BB</button>
+  <div class="myio-annotations-panel-footer-tools">
+    <button class="myio-annotations-panel-footer-iconbtn" type="button" data-action="export-pdf" title="Exportar PDF">
+      <svg viewBox="0 0 24 24" width="14" height="14" fill="currentColor" aria-hidden="true">
+        <path d="M14 2H6c-1.1 0-2 .9-2 2v16c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V8l-6-6zm-1 7V3.5L18.5 9H13z"/>
+      </svg>
+      <span>PDF</span>
+    </button>
+    <button class="myio-annotations-panel-footer-iconbtn" type="button" data-action="export-csv" title="Exportar CSV">
+      <svg viewBox="0 0 24 24" width="14" height="14" fill="currentColor" aria-hidden="true">
+        <path d="M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zM9 17H7v-7h2v7zm4 0h-2v-3h2v3zm0-5h-2v-2h2v2zm4 5h-2V8h2v9z"/>
+      </svg>
+      <span>CSV</span>
+    </button>
+    <button class="myio-annotations-panel-footer-iconbtn" type="button" data-action="export" title="Op\xE7\xF5es avan\xE7adas">
+      <svg viewBox="0 0 24 24" width="14" height="14" fill="currentColor" aria-hidden="true">
+        <path d="M19.14 12.94c.04-.3.06-.61.06-.94 0-.32-.02-.64-.07-.94l2.03-1.58a.49.49 0 0 0 .12-.61l-1.92-3.32a.488.488 0 0 0-.59-.22l-2.39.96c-.5-.38-1.03-.7-1.62-.94l-.36-2.54a.484.484 0 0 0-.48-.41h-3.84c-.24 0-.43.17-.47.41l-.36 2.54c-.59.24-1.13.57-1.62.94l-2.39-.96c-.22-.08-.47 0-.59.22L2.74 8.87c-.12.21-.08.47.12.61l2.03 1.58c-.05.3-.07.62-.07.94 0 .32.02.64.07.94l-2.03 1.58a.49.49 0 0 0-.12.61l1.92 3.32c.12.22.37.29.59.22l2.39-.96c.5.38 1.03.7 1.62.94l.36 2.54c.05.24.24.41.48.41h3.84c.24 0 .44-.17.47-.41l.36-2.54c.59-.24 1.13-.56 1.62-.94l2.39.96c.22.08.47 0 .59-.22l1.92-3.32c.12-.22.07-.47-.12-.61l-2.01-1.58zM12 15.6c-1.98 0-3.6-1.62-3.6-3.6s1.62-3.6 3.6-3.6 3.6 1.62 3.6 3.6-1.62 3.6-3.6 3.6z"/>
+      </svg>
+    </button>
+  </div>
+  <span class="myio-annotations-panel-footer-meta">${groups.length} grupos \xB7 ${filteredCount} anota\xE7\xF5es</span>
+  <button class="myio-annotations-panel-footer-iconbtn" type="button" data-action="refresh" title="Atualizar">
+    <svg viewBox="0 0 24 24" width="14" height="14" fill="currentColor" aria-hidden="true">
+      <path d="M17.65 6.35A7.958 7.958 0 0 0 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08A5.99 5.99 0 0 1 12 18c-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z"/>
+    </svg>
+    <span>Atualizar</span>
+  </button>
 </div>
 `;
   }
@@ -144291,12 +144408,24 @@ ${this._renderToolbar(filteredCount, totalAllUnfiltered)}
   <button type="button" class="myio-annotations-panel-footer-action" data-action="clear-filters">Limpar</button>
 </div>`;
   }
+  /**
+   * Counts only user-DIVERGING-from-default filters so the toolbar badge
+   * doesn't perpetually show "2" because of the default {created, modified}
+   * status preselection. Default statuses do not count; only:
+   *   - selected types
+   *   - selected importance levels
+   *   - actionable toggle
+   *   - 'archived' added to statuses
+   *   - 'created' OR 'modified' UNchecked from defaults
+   */
   _activeFilterCount() {
     let n = 0;
     n += this.filter.types.size;
-    n += this.filter.statuses.size;
     n += this.filter.importance.size;
     if (this.filter.actionableOnly) n += 1;
+    if (this.filter.statuses.has("archived")) n += 1;
+    if (!this.filter.statuses.has("created")) n += 1;
+    if (!this.filter.statuses.has("modified")) n += 1;
     return n;
   }
   _renderBody(groups) {
@@ -144304,7 +144433,7 @@ ${this._renderToolbar(filteredCount, totalAllUnfiltered)}
       const hasFilters = this.filter.searchTerm || this._activeFilterCount() > 0;
       return `
 <div class="myio-annotations-empty">
-  <div class="myio-annotations-empty-icon" aria-hidden="true">\u{1F4CB}</div>
+  <div class="myio-annotations-empty-icon" aria-hidden="true">\u270F\uFE0F</div>
   <div>${hasFilters ? "Nada encontrado para o filtro / busca atual." : "Nenhuma anota\xE7\xE3o ativa."}</div>
 </div>`;
     }
@@ -144437,6 +144566,20 @@ ${this._renderToolbar(filteredCount, totalAllUnfiltered)}
     if (exportBtn) {
       exportBtn.addEventListener("click", () => this._openExportFlow());
     }
+    const exportPdfBtn = this.root.querySelector('[data-action="export-pdf"]');
+    if (exportPdfBtn) {
+      exportPdfBtn.addEventListener(
+        "click",
+        () => this._quickExport({ format: "pdf", levels: ["summary", "consolidated"], scope: "current-tab" })
+      );
+    }
+    const exportCsvBtn = this.root.querySelector('[data-action="export-csv"]');
+    if (exportCsvBtn) {
+      exportCsvBtn.addEventListener(
+        "click",
+        () => this._quickExport({ format: "csv", scope: "current-tab" })
+      );
+    }
     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"]');
@@ -144585,6 +144728,38 @@ ${this._renderToolbar(filteredCount, totalAllUnfiltered)}
       );
     }
   }
+  /**
+   * RFC-0203 follow-up — Quick export from the footer icons. Skips the modal
+   * for the common case (PDF summary+consolidated, CSV, current tab).
+   */
+  _quickExport(opts) {
+    const orch = this.opts.getOrchestrator();
+    if (!orch) {
+      this.opts.logger.warn("[HeaderAnnotationsPanel] quickExport: no orchestrator");
+      return;
+    }
+    const customerName = typeof window !== "undefined" && window.MyIOOrchestrator?.customerName || "";
+    try {
+      const devices = this._devicesForScope(opts.scope, orch);
+      if (opts.format === "csv") {
+        exportAnnotationsCsv(devices, {
+          customerName,
+          includeArchived: this.filter.statuses.has("archived")
+        });
+      } else if (opts.format === "pdf") {
+        const fallback = ["summary", "consolidated"];
+        const levels = opts.levels && opts.levels.length > 0 ? opts.levels : fallback;
+        exportAnnotationsPdf(devices, {
+          customerName,
+          levels,
+          includeArchived: this.filter.statuses.has("archived")
+        });
+      }
+      this.opts.logger.debug(`[HeaderAnnotationsPanel] quick-export ${opts.format} ok`);
+    } catch (err) {
+      this.opts.logger.warn("[HeaderAnnotationsPanel] quick-export failed:", err);
+    }
+  }
   /**
    * RFC-0203 M7 — Opens the export modal and dispatches CSV/PDF generation.
    */

package/dist/index.d.cts

@@ -19503,6 +19503,9 @@ declare class HeaderAnnotationsPanel {
     private readonly _onDragEnd;
     private readonly _onFocusTrap;
     private _searchDebounceTimer;
+    private _hideTimer;
+    private _isMouseOver;
+    private static readonly DELAYED_HIDE_MS;
     constructor(options?: HeaderAnnotationsPanelOptions);
     /** Render + position + show. Idempotent. */
     show(anchorButton: HTMLElement): void;
@@ -19510,6 +19513,18 @@ declare class HeaderAnnotationsPanel {
     hide(): void;
     /** Toggle convenience. */
     toggle(anchorButton: HTMLElement): void;
+    /**
+     * RFC-0203 follow-up — hover-to-open helper for the HEADER button.
+     * Cancels any pending delayed-hide so quickly re-entering keeps the panel.
+     * Does NOT steal keyboard focus (mouse-driven UX).
+     */
+    showFromHover(anchorButton: HTMLElement): void;
+    private _suppressNextFocus;
+    /**
+     * RFC-0203 follow-up — delayed-hide entry-point invoked from button mouseleave.
+     * Mirrors AlarmNotificationTooltip.startDelayedHide.
+     */
+    startDelayedHide(): void;
     /** Remove the panel DOM + listeners. After this, `show()` recreates. */
     destroy(): void;
     /** Test/inspection helper. */
@@ -19544,6 +19559,16 @@ declare class HeaderAnnotationsPanel {
     private _renderHTML;
     private _renderToolbar;
     private _renderFilters;
+    /**
+     * Counts only user-DIVERGING-from-default filters so the toolbar badge
+     * doesn't perpetually show "2" because of the default {created, modified}
+     * status preselection. Default statuses do not count; only:
+     *   - selected types
+     *   - selected importance levels
+     *   - actionable toggle
+     *   - 'archived' added to statuses
+     *   - 'created' OR 'modified' UNchecked from defaults
+     */
     private _activeFilterCount;
     private _renderBody;
     private _renderGroup;
@@ -19559,6 +19584,11 @@ declare class HeaderAnnotationsPanel {
     private _reopenFiltersAfterRender;
     private _onTabKeydown;
     private _handleItemClick;
+    /**
+     * RFC-0203 follow-up — Quick export from the footer icons. Skips the modal
+     * for the common case (PDF summary+consolidated, CSV, current tab).
+     */
+    private _quickExport;
     /**
      * RFC-0203 M7 — Opens the export modal and dispatches CSV/PDF generation.
      */
@@ -19642,6 +19672,12 @@ declare const DEFAULT_SORT: AnnotationSortKey;
  * AC-23.
  */
 declare function sortGroups(groups: AnnotationGroup[], key: AnnotationSortKey): AnnotationGroup[];
+/**
+ * Default filter (RFC-0203 follow-up):
+ *   - statuses pre-checks {'created','modified'}; 'archived' stays UNchecked
+ *     so the panel hides archived by default. User toggles 'archived' to
+ *     include archived items (re-fetch is automatic via re-render).
+ */
 declare function createDefaultFilter(): AnnotationFilter;
 
 /**