myio-js-library 0.1.485 → 0.1.487

package/dist/index.cjs

@@ -1159,7 +1159,7 @@ module.exports = __toCommonJS(index_exports);
 // package.json
 var package_default = {
   name: "myio-js-library",
-  version: "0.1.485",
+  version: "0.1.487",
   description: "A clean, standalone JS SDK for MYIO projects",
   license: "MIT",
   repository: "github:gh-myio/myio-js-library",
@@ -62014,7 +62014,7 @@ var SettingsModalView = class {
         <div class="customer-name-container">
           <div class="customer-info-row">
             <div class="device-type-icon-wrapper">
-              ${this.getDeviceTypeIcon(deviceType)}
+              ${this.getDeviceTypeIcon(deviceType ?? "")}
             </div>
             <div class="customer-info-content">
               <div class="customer-name-label">Shopping</div>
@@ -62620,7 +62620,7 @@ var SettingsModalView = class {
       not_installed: { text: "N\xE3o instalado", color: "#94a3b8" },
       unknown: { text: "Sem informa\xE7\xE3o", color: "#94a3b8" }
     };
-    const statusInfo = statusMap[mapDeviceStatusToCardStatus(deviceStatus) || ""] || {
+    const statusInfo = statusMap[mapDeviceStatusToCardStatus(deviceStatus ?? "") || ""] || {
       text: "Desconhecido",
       color: "#6b7280"
     };
@@ -62713,6 +62713,13 @@ var SettingsModalView = class {
         }
         
         /* Header handled by ModalHeader (RFC-0121) */
+        .myio-device-settings-modal .myio-modal-header__title {
+          font-size: 14px;
+          font-weight: 600;
+        }
+        .myio-device-settings-modal .myio-modal-header__icon {
+          font-size: 15px;
+        }
 
         .myio-device-settings-modal.is-maximized {
           width: 100vw !important;
@@ -89876,6 +89883,7 @@ var UserDetailTab = class {
   // RFC-0197: Assignments section state
   assignments = [];
   availableRoles = [];
+  availablePolicies = [];
   assignmentsEl = null;
   assignmentsVersion = 0;
   constructor(config, user, callbacks) {
@@ -89969,11 +89977,11 @@ var UserDetailTab = class {
     const section = document.createElement("div");
     section.style.cssText = "margin-top:20px;border:1px solid var(--um-border);border-radius:10px;overflow:hidden;";
     const sectionHeader = document.createElement("div");
-    sectionHeader.style.cssText = "display:flex;align-items:center;justify-content:space-between;padding:12px 16px;background:var(--um-bg-surface);border-bottom:1px solid var(--um-border);";
-    sectionHeader.innerHTML = `<span style="font-size:13px;font-weight:600;color:var(--um-text-secondary);">\u{1F511} Atribui\xE7\xF5es de Fun\xE7\xF5es</span>`;
+    sectionHeader.style.cssText = "display:flex;align-items:center;justify-content:space-between;padding:12px 16px;background:var(--um-accent);border-bottom:1px solid var(--um-btn-2-border);";
+    sectionHeader.innerHTML = `<span style="font-size:13px;font-weight:600;color:#fff;">\u{1F511} Fun\xE7\xF5es / Pap\xE9is</span>`;
     const addBtn = document.createElement("button");
     addBtn.className = "um-btn um-btn--secondary um-btn--sm";
-    addBtn.textContent = "+ Atribuir Fun\xE7\xE3o";
+    addBtn.textContent = "+ Adicionar";
     addBtn.addEventListener("click", () => this.showAssignForm());
     sectionHeader.appendChild(addBtn);
     section.appendChild(sectionHeader);
@@ -89988,12 +89996,14 @@ var UserDetailTab = class {
   async loadAssignments() {
     const userId = this.user.id.id;
     try {
-      const [assignRes, rolesRes] = await Promise.all([
+      const [assignRes, rolesRes, policiesRes] = await Promise.all([
         fetch(`${this.gcdrBase()}/authorization/users/${userId}/assignments`, { headers: this.gcdrHeaders() }),
-        fetch(`${this.gcdrBase()}/roles?limit=100`, { headers: this.gcdrHeaders() })
+        fetch(`${this.gcdrBase()}/roles?limit=100`, { headers: this.gcdrHeaders() }),
+        fetch(`${this.gcdrBase()}/policies?limit=100`, { headers: this.gcdrHeaders() })
       ]);
       this.assignments = assignRes.ok ? this.unwrapList(await assignRes.json()) : [];
       this.availableRoles = rolesRes.ok ? this.unwrapList(await rolesRes.json()) : [];
+      this.availablePolicies = policiesRes.ok ? this.unwrapList(await policiesRes.json()) : [];
       this.renderAssignments();
     } catch (err) {
       console.error("[UserDetailTab] loadAssignments error", err);
@@ -90041,14 +90051,19 @@ var UserDetailTab = class {
     overlay.style.zIndex = "100001";
     const modal = document.createElement("div");
     modal.className = "um-modal";
-    modal.style.cssText = "padding: 24px; width: min(480px, 92vw); max-height: 80vh; height: auto; aspect-ratio: unset; overflow-y: auto; display: block;";
+    modal.style.cssText = "width: min(820px, 92vw); max-height: 85vh; height: auto; aspect-ratio: unset; overflow: hidden; display: flex; flex-direction: column;";
     const gcdrCid = window.MyIOOrchestrator?.gcdrCustomerId || "";
     const scopeOptions = [
-      { value: "*", label: "* (global)" },
-      ...gcdrCid ? [{ value: `customer:${gcdrCid}`, label: `customer:${gcdrCid}` }] : []
+      { value: "*", label: "* (global \u2014 todos os clientes)" },
+      ...gcdrCid ? [{ value: `customer:${gcdrCid}`, label: `Cliente atual (${gcdrCid.slice(0, 8)}...)` }] : []
     ];
     modal.innerHTML = `
-      <h4 style="margin:0 0 16px;font-size:15px;font-weight:600;color:var(--um-text-primary,#e2e8f0);">Atribuir Fun\xE7\xE3o</h4>
+      <div style="display:flex;align-items:center;gap:10px;padding:14px 20px;background:var(--um-accent);border-bottom:1px solid var(--um-btn-2-border);flex-shrink:0;">
+        <span style="font-size:15px;">\u{1F511}</span>
+        <span style="flex:1;font-size:14px;font-weight:600;color:#fff;">Atribuir Fun\xE7\xE3o / Papel</span>
+        <button type="button" class="assign-close" style="background:none;border:none;color:rgba(255,255,255,0.8);font-size:18px;cursor:pointer;padding:2px 6px;border-radius:4px;line-height:1;">\u2715</button>
+      </div>
+      <div style="padding:20px 24px;overflow-y:auto;flex:1;">
       <div class="um-form" style="max-width:100%;">
         <div class="um-form-group">
           <label class="um-label">Fun\xE7\xE3o <span class="um-req">*</span></label>
@@ -90058,6 +90073,10 @@ var UserDetailTab = class {
           </select>
           <span class="um-field-error" data-for="roleId"></span>
         </div>
+        <div class="um-assign-policies-preview" style="display:none;border:1px solid var(--um-border);border-radius:8px;padding:12px;background:var(--um-bg-surface);">
+          <div style="font-size:11px;font-weight:600;color:var(--um-text-muted);text-transform:uppercase;letter-spacing:0.05em;margin-bottom:8px;">Pol\xEDticas inclu\xEDdas</div>
+          <div class="um-assign-policies-list" style="display:flex;flex-direction:column;gap:6px;"></div>
+        </div>
         <div class="um-form-group">
           <label class="um-label">Escopo <span class="um-req">*</span></label>
           <select class="um-input" name="scope">
@@ -90077,13 +90096,38 @@ var UserDetailTab = class {
           <button class="um-btn um-btn--primary assign-save">Atribuir</button>
         </div>
       </div>
+      </div>
     `;
     overlay.appendChild(modal);
     document.body.appendChild(overlay);
+    const roleSelect = modal.querySelector("[name=roleId]");
+    const policiesPreview = modal.querySelector(".um-assign-policies-preview");
+    const policiesList = modal.querySelector(".um-assign-policies-list");
+    roleSelect.addEventListener("change", () => {
+      const role = this.availableRoles.find((r) => r.id === roleSelect.value);
+      const policyRefs = role?.policies ?? role?.policyIds ?? [];
+      if (!role || policyRefs.length === 0) {
+        policiesPreview.style.display = "none";
+        return;
+      }
+      const policyByKey = new Map(this.availablePolicies.flatMap((p) => [
+        [p.key || p.id, p],
+        [p.id, p]
+      ]));
+      const matched = policyRefs.map((ref) => policyByKey.get(ref)).filter(Boolean);
+      policiesList.innerHTML = matched.length > 0 ? matched.map((p) => `
+            <div style="display:flex;align-items:flex-start;gap:8px;padding:6px 8px;background:var(--um-bg-input);border-radius:6px;">
+              <span style="font-size:11px;font-weight:600;background:var(--um-btn-2-bg);color:var(--um-btn-2-text);border:1px solid var(--um-btn-2-border);border-radius:9999px;padding:2px 8px;white-space:nowrap;">${this.esc(p.displayName)}</span>
+              ${p.description ? `<span style="font-size:11px;color:var(--um-text-muted);padding-top:2px;">${this.esc(p.description)}</span>` : ""}
+            </div>`).join("") : policyRefs.map((ref) => `
+            <span style="font-size:11px;font-family:monospace;background:var(--um-btn-2-bg);color:var(--um-btn-2-text);border:1px solid var(--um-btn-2-border);border-radius:9999px;padding:2px 8px;">${this.esc(ref)}</span>`).join("");
+      policiesPreview.style.display = "block";
+    });
     const close = () => overlay.remove();
     overlay.addEventListener("click", (e) => {
       if (e.target === overlay) close();
     });
+    modal.querySelector(".assign-close").addEventListener("click", close);
     modal.querySelector(".assign-cancel").addEventListener("click", close);
     modal.querySelector(".assign-save").addEventListener("click", async () => {
       const roleId = modal.querySelector("[name=roleId]").value.trim();
@@ -90697,7 +90741,8 @@ var RolesTab = class {
     const item = document.createElement("div");
     item.className = `gm-accordion-item${this.expandedId === r.id ? " gm-accordion-item--open" : ""}`;
     const sysBadge = r.isSystem ? `<span class="gm-badge gm-badge--count">SISTEMA</span>` : "";
-    const policyCount = r.policyIds?.length || 0;
+    const policyKeys = r.policies ?? r.policyIds ?? [];
+    const policyCount = policyKeys.length;
     const policyBadge = `<span class="gm-badge gm-badge--domain">${policyCount} pol\xEDticas</span>`;
     item.innerHTML = `
       <div class="gm-accordion-header">
@@ -90737,20 +90782,26 @@ var RolesTab = class {
     return item;
   }
   buildRolePoliciesHtml(r) {
-    if (!r.policyIds?.length) {
+    const policyKeys = r.policies ?? r.policyIds ?? [];
+    if (!policyKeys.length) {
       return `<div class="gm-panel-section"><span class="gm-empty-inline">Nenhuma pol\xEDtica associada.</span></div>`;
     }
-    const policyMap = new Map(this.policies.map((p) => [p.id, p]));
-    const items = r.policyIds.map((pid) => {
-      const p = policyMap.get(pid);
+    const policyByKey = new Map(this.policies.flatMap((p) => [
+      [p.key || p.id, p],
+      [p.id, p]
+    ]));
+    const items = policyKeys.map((ref) => {
+      const p = policyByKey.get(ref);
       if (!p)
-        return `<div style="font-size:12px;color:var(--um-text-faint);padding:3px 0;">ID: ${this.esc(pid)}</div>`;
-      const allowStr = p.allow?.join(", ") || "\u2014";
+        return `<div style="padding:6px 0;border-bottom:1px solid var(--um-border-sub);">
+            <span style="font-size:11px;font-family:monospace;background:var(--um-btn-2-bg);color:var(--um-btn-2-text);border:1px solid var(--um-btn-2-border);border-radius:9999px;padding:2px 8px;">${this.esc(ref)}</span>
+          </div>`;
+      const allowStr = p.allow?.length ? p.allow.join(", ") : "\u2014";
       return `<div style="padding:6px 0;border-bottom:1px solid var(--um-border-sub);">
-        <div style="font-size:12px;font-weight:600;color:var(--um-text-secondary);">${this.esc(p.displayName)}</div>
-        ${p.description ? `<div style="font-size:11px;color:var(--um-text-faint);">${this.esc(p.description)}</div>` : ""}
-        <div style="font-size:11px;color:var(--um-badge-user-text);margin-top:2px;">allow: ${this.esc(allowStr)}</div>
-      </div>`;
+          <div style="font-size:12px;font-weight:600;color:var(--um-text-secondary);">${this.esc(p.displayName)}</div>
+          ${p.description ? `<div style="font-size:11px;color:var(--um-text-faint);">${this.esc(p.description)}</div>` : ""}
+          <div style="font-size:11px;color:var(--um-badge-user-text);margin-top:2px;">allow: ${this.esc(allowStr)}</div>
+        </div>`;
     }).join("");
     return `<div class="gm-panel-section">
       <div class="gm-panel-section-header"><span class="gm-panel-section-title">\u{1F4CB} Pol\xEDticas</span></div>
@@ -90766,10 +90817,12 @@ var RolesTab = class {
     const modal = document.createElement("div");
     modal.className = "um-modal";
     modal.style.cssText = "padding: 24px; width: min(520px, 92vw); max-height: 80vh; height: auto; aspect-ratio: unset; overflow-y: auto; display: block;";
+    const existingPolicies = existing?.policies ?? existing?.policyIds ?? [];
     const policiesCheckboxes = this.policies.map((p) => {
-      const checked = existing?.policyIds?.includes(p.id) ? " checked" : "";
+      const ref = p.key || p.id;
+      const checked = existingPolicies.includes(ref) ? " checked" : "";
       return `<label style="display:flex;align-items:center;gap:8px;padding:4px 0;font-size:12px;color:var(--um-text-secondary);cursor:pointer;">
-        <input type="checkbox" class="um-role-policy-chk" value="${this.esc(p.id)}"${checked} />
+        <input type="checkbox" class="um-role-policy-chk" value="${this.esc(ref)}"${checked} />
         ${this.esc(p.displayName)}${p.description ? ` <span style="color:var(--um-text-faint);">\u2014 ${this.esc(p.description)}</span>` : ""}
       </label>`;
     }).join("");
@@ -90813,14 +90866,14 @@ var RolesTab = class {
       }
       errEl.textContent = "";
       const description = modal.querySelector("[name=description]").value.trim();
-      const policyIds = Array.from(
+      const policies = Array.from(
         modal.querySelectorAll(".um-role-policy-chk:checked")
       ).map((c) => c.value);
       const btn = modal.querySelector(".role-save");
       btn.disabled = true;
       btn.textContent = "...";
       try {
-        const body = { name, description: description || void 0, policyIds };
+        const body = { name, description: description || void 0, policies };
         const url = isEdit ? `${this.gcdrBase()}/roles/${existing.id}` : `${this.gcdrBase()}/roles`;
         const res = await fetch(url, {
           method: isEdit ? "PUT" : "POST",
@@ -91107,6 +91160,13 @@ var UserManagementModalView = class {
   }
   // ── Styles ───────────────────────────────────────────────────────────────────
   injectStyles() {
+    if (!document.getElementById("um-font-nunito")) {
+      const link = document.createElement("link");
+      link.id = "um-font-nunito";
+      link.rel = "stylesheet";
+      link.href = "https://fonts.googleapis.com/css2?family=Nunito:wght@400;500;600;700&display=swap";
+      document.head.appendChild(link);
+    }
     if (document.getElementById("um-styles")) return;
     const style = document.createElement("style");
     style.id = "um-styles";
@@ -91125,12 +91185,12 @@ var UserManagementModalView = class {
   --um-text-secondary:      #374151;
   --um-text-muted:          #64748b;
   --um-text-faint:          #94a3b8;
-  --um-accent:              #3b5bdb;
-  --um-accent-hover:        #4c6ef5;
-  --um-btn-2-bg:            #eff6ff;
-  --um-btn-2-text:          #3b5bdb;
-  --um-btn-2-border:        #bfdbfe;
-  --um-btn-2-hover:         #dbeafe;
+  --um-accent:              #3f1a7d;
+  --um-accent-hover:        #5a2bab;
+  --um-btn-2-bg:            #f4effa;
+  --um-btn-2-text:          #3f1a7d;
+  --um-btn-2-border:        #c9a8e8;
+  --um-btn-2-hover:         #e8d8f5;
   --um-btn-ghost-border:    #e2e8f0;
   --um-btn-ghost-hover:     #f1f5f9;
   --um-btn-ghost-text-hover:#475569;
@@ -91149,14 +91209,14 @@ var UserManagementModalView = class {
   --um-toast-err-border:    #ef4444;
   --um-toast-err-text:      #dc2626;
   --um-spinner-border:      #cbd5e1;
-  --um-spinner-top:         #3b5bdb;
+  --um-spinner-top:         #3f1a7d;
   --um-toggle-off:          #cbd5e1;
-  --um-notice-bg:           #eff6ff;
-  --um-notice-border:       #bfdbfe;
+  --um-notice-bg:           #f4effa;
+  --um-notice-border:       #c9a8e8;
   --um-shadow:              0 32px 80px rgba(0,0,0,0.15);
   --um-row-highlight:       #f0fdf4;
-  --um-gm-badge-domain-bg:  #eff6ff;
-  --um-gm-badge-domain-txt: #3b5bdb;
+  --um-gm-badge-domain-bg:  #f4effa;
+  --um-gm-badge-domain-txt: #3f1a7d;
   --um-gm-badge-count-bg:   #f1f5f9;
   --um-gm-badge-count-txt:  #64748b;
   --um-gm-form-card-bg:     #f8fafc;
@@ -91185,12 +91245,12 @@ var UserManagementModalView = class {
   --um-text-secondary:      #c4ccd9;
   --um-text-muted:          #64748b;
   --um-text-faint:          #475569;
-  --um-accent:              #60a5fa;
-  --um-accent-hover:        #93c5fd;
-  --um-btn-2-bg:            #1e2d4a;
-  --um-btn-2-text:          #93c5fd;
-  --um-btn-2-border:        #2a3b60;
-  --um-btn-2-hover:         #253456;
+  --um-accent:              #a78bdb;
+  --um-accent-hover:        #c3a8f0;
+  --um-btn-2-bg:            #2a1a45;
+  --um-btn-2-text:          #c3a8f0;
+  --um-btn-2-border:        #4a2a80;
+  --um-btn-2-hover:         #3a2060;
   --um-btn-ghost-border:    #2a3352;
   --um-btn-ghost-hover:     #1a2235;
   --um-btn-ghost-text-hover:#94a3b8;
@@ -91209,14 +91269,14 @@ var UserManagementModalView = class {
   --um-toast-err-border:    #ef4444;
   --um-toast-err-text:      #f87171;
   --um-spinner-border:      #2a3352;
-  --um-spinner-top:         #60a5fa;
+  --um-spinner-top:         #a78bdb;
   --um-toggle-off:          #2a3352;
-  --um-notice-bg:           #1a2537;
-  --um-notice-border:       #2a3b60;
+  --um-notice-bg:           #1e1235;
+  --um-notice-border:       #4a2a80;
   --um-shadow:              0 32px 80px rgba(0,0,0,0.6);
   --um-row-highlight:       #0e2a1e;
-  --um-gm-badge-domain-bg:  #1a2537;
-  --um-gm-badge-domain-txt: #60a5fa;
+  --um-gm-badge-domain-bg:  #2a1a45;
+  --um-gm-badge-domain-txt: #c3a8f0;
   --um-gm-badge-count-bg:   #1e2d4a;
   --um-gm-badge-count-txt:  #94a3b8;
   --um-gm-form-card-bg:     #0f1829;
@@ -91230,6 +91290,7 @@ var UserManagementModalView = class {
 /* \u2500\u2500 Component styles (theme-agnostic via variables) \u2500\u2500 */
 .um-modal {
   background: var(--um-modal-bg);
+  font-family: 'Nunito', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
   border-radius: 14px; width: 92vw; max-width: 960px;
   --modal-header-radius: 14px 14px 0 0;
   aspect-ratio: 16/9; display: flex; flex-direction: column;
@@ -91239,6 +91300,20 @@ var UserManagementModalView = class {
 
 /* Header handled by ModalHeader (RFC-0121) */
 
+/* Force MyIO purple header regardless of light/dark theme \u2014 overrides myio-modal-header--light */
+.um-modal .myio-modal-header--light {
+  background: #3f1a7d !important;
+  border-bottom-color: #2e1260 !important;
+}
+.um-modal .myio-modal-header--light .myio-modal-header__title { color: #fff !important; }
+.um-modal .myio-modal-header--light .myio-modal-header__btn { color: rgba(255,255,255,0.8) !important; }
+.um-modal .myio-modal-header--light .myio-modal-header__btn:hover {
+  background: rgba(255,255,255,0.15) !important; color: #fff !important;
+}
+.um-modal .myio-modal-header--light .myio-modal-header__btn--close:hover {
+  background: rgba(239,68,68,0.3) !important; color: #fecaca !important;
+}
+
 /* Maximize button \u2014 CSS window icon (emoji renders as plain square on some platforms) */
 #um-modal-maximize { font-size: 0 !important; position: relative; }
 #um-modal-maximize::before {
@@ -91389,7 +91464,7 @@ var UserManagementModalView = class {
 .um-check-label { font-size: 13px; color: var(--um-text-secondary); cursor: pointer; display: flex; align-items: center; gap: 8px; }
 .um-form-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 8px; }
 
-.um-detail-card { max-width: 560px; }
+.um-detail-card { width: 100%; }
 .um-detail-section { border: 1px solid var(--um-border); border-radius: 10px; overflow: hidden; margin-bottom: 20px; }
 .um-detail-row {
   display: flex; align-items: flex-start; gap: 16px;
@@ -135492,6 +135567,50 @@ var STYLES3 = `
     font-size: 12px; font-weight: 600; color: #e67e22;
     background: #fef3e8; border-radius: 4px; padding: 1px 6px;
   }
+  /* Collapse/expand */
+  #${MODAL_ID3} .abm-device-card.collapsed .abm-rule-list { display: none; }
+  #${MODAL_ID3} .abm-rule-group.collapsed .abm-rule-group-devices,
+  #${MODAL_ID3} .abm-rule-group.collapsed .abm-rule-detail-wrap { display: none; }
+  #${MODAL_ID3} .abm-chevron {
+    font-size: 11px; color: #94a3b8; transition: transform 0.18s; flex-shrink: 0; user-select: none;
+  }
+  #${MODAL_ID3} .abm-device-card.collapsed .abm-chevron,
+  #${MODAL_ID3} .abm-rule-group.collapsed .abm-chevron { transform: rotate(-90deg); }
+  #${MODAL_ID3} .abm-device-header { cursor: pointer; }
+  #${MODAL_ID3} .abm-device-header:hover { background: #f0f9f7; }
+  #${MODAL_ID3} .abm-rule-group-header { cursor: pointer; }
+  #${MODAL_ID3} .abm-rule-group-header:hover { background: #e6f4f1; }
+  /* Alarm badge */
+  #${MODAL_ID3} .abm-alarm-badge {
+    display: inline-flex; align-items: center; gap: 3px;
+    background: #fee2e2; color: #b91c1c; border-radius: 10px;
+    font-size: 10px; font-weight: 700; padding: 1px 7px; flex-shrink: 0;
+  }
+  #${MODAL_ID3} .abm-alarm-badge.zero { background: #f0f9f7; color: #6b7280; }
+  /* Filter bar */
+  #${MODAL_ID3} .abm-filter-bar {
+    display: flex; gap: 8px; align-items: center; margin-bottom: 14px;
+    padding: 10px 12px; background: #f8faf9; border: 1px solid #e0eceb; border-radius: 8px;
+  }
+  #${MODAL_ID3} .abm-filter-input {
+    flex: 1; border: 1px solid #d1d5db; border-radius: 6px; padding: 6px 10px;
+    font-size: 12px; outline: none; transition: border-color 0.15s;
+  }
+  #${MODAL_ID3} .abm-filter-input:focus { border-color: ${TEAL2}; }
+  #${MODAL_ID3} .abm-filter-select {
+    border: 1px solid #d1d5db; border-radius: 6px; padding: 5px 8px;
+    font-size: 12px; outline: none; min-width: 140px; max-width: 220px;
+    background: #fff; cursor: pointer;
+  }
+  #${MODAL_ID3} .abm-filter-count {
+    font-size: 11px; color: #64748b; white-space: nowrap; flex-shrink: 0;
+  }
+  #${MODAL_ID3} .abm-filter-clear {
+    background: none; border: 1px solid #e0eceb; border-radius: 6px; cursor: pointer;
+    font-size: 11px; color: #64748b; padding: 4px 8px; white-space: nowrap; flex-shrink: 0;
+    transition: background 0.12s;
+  }
+  #${MODAL_ID3} .abm-filter-clear:hover { background: #f0f4f3; color: #1e293b; }
   /* Confirmation modal \u2014 value edit overwrite warning */
   .abm-confirm-overlay {
     position: fixed; inset: 0;
@@ -135922,6 +136041,8 @@ function bindRuleEditEvents(card, bundle, gcdrTenantId, baseUrl, getViewMode) {
     if (!ruleId) return;
     const rule = bundle.rules[ruleId];
     if (!rule) return;
+    editBtn.closest(".abm-device-card")?.classList.remove("collapsed");
+    editBtn.closest(".abm-rule-group")?.classList.remove("collapsed");
     const viewMode = getViewMode();
     if (viewMode === "por-regra") {
       const ruleGroup = editBtn.closest(".abm-rule-group");
@@ -135940,13 +136061,109 @@ function bindRuleEditEvents(card, bundle, gcdrTenantId, baseUrl, getViewMode) {
     openGranularValueEdit(ruleItem, rule, device, bundle, gcdrTenantId, baseUrl);
   });
 }
+function bindCollapseEvents(card) {
+  card.querySelectorAll(".abm-device-header").forEach((header) => {
+    header.addEventListener("click", (e) => {
+      if (e.target.closest("button")) return;
+      header.closest(".abm-device-card")?.classList.toggle("collapsed");
+    });
+  });
+  card.querySelectorAll(".abm-rule-group-header").forEach((header) => {
+    header.addEventListener("click", (e) => {
+      if (e.target.closest("button")) return;
+      header.closest(".abm-rule-group")?.classList.toggle("collapsed");
+    });
+  });
+}
+function bindFilterBar(card, bundle, getViewMode) {
+  const input = card.querySelector("#abm-filter-input");
+  const select = card.querySelector("#abm-filter-select");
+  const countEl = card.querySelector("#abm-filter-count");
+  const clearBtn = card.querySelector("#abm-filter-clear");
+  if (!input) return;
+  const updateSelectOptions = (text) => {
+    if (!select) return;
+    const lower = text.toLowerCase();
+    const types = /* @__PURE__ */ new Set();
+    bundle.devices.forEach((d) => {
+      const name = (d.displayName || d.name).toLowerCase();
+      if (!lower || name.includes(lower) || d.type.toLowerCase().includes(lower)) {
+        types.add(d.type);
+      }
+    });
+    const prev = new Set(Array.from(select.selectedOptions).map((o) => o.value));
+    select.innerHTML = Array.from(types).sort().map(
+      (t) => `<option value="${escHtml3(t)}"${prev.has(t) ? " selected" : ""}>${escHtml3(t)}</option>`
+    ).join("");
+    select.size = Math.min(types.size, 4) || 1;
+  };
+  const applyFilter = () => {
+    const text = input.value.toLowerCase().trim();
+    const selectedTypes = new Set(Array.from(select?.selectedOptions ?? []).map((o) => o.value));
+    const mode = getViewMode();
+    if (mode === "granular") {
+      let visible = 0;
+      card.querySelectorAll(".abm-device-card").forEach((dc) => {
+        const name = (dc.querySelector(".abm-device-name")?.textContent ?? "").toLowerCase();
+        const type = dc.querySelector(".abm-device-type")?.textContent ?? "";
+        const ruleNames = Array.from(dc.querySelectorAll(".abm-rule-name")).map((el2) => (el2.textContent ?? "").toLowerCase());
+        const matchText = !text || name.includes(text) || type.toLowerCase().includes(text) || ruleNames.some((r) => r.includes(text));
+        const matchType = selectedTypes.size === 0 || selectedTypes.has(type);
+        dc.style.display = matchText && matchType ? "" : "none";
+        if (matchText && matchType) visible++;
+      });
+      if (countEl) countEl.textContent = `${visible} dispositivo(s)`;
+    } else {
+      let visible = 0;
+      card.querySelectorAll(".abm-rule-group").forEach((rg) => {
+        const ruleName = (rg.querySelector(".abm-rule-group-name")?.textContent ?? "").toLowerCase();
+        const deviceTexts = Array.from(rg.querySelectorAll(".abm-rule-group-device span")).map((el2) => (el2.textContent ?? "").toLowerCase());
+        const matchText = !text || ruleName.includes(text) || deviceTexts.some((t) => t.includes(text));
+        rg.style.display = matchText ? "" : "none";
+        if (matchText) visible++;
+      });
+      if (countEl) countEl.textContent = `${visible} regra(s)`;
+    }
+    updateSelectOptions(text);
+  };
+  input.addEventListener("input", applyFilter);
+  select?.addEventListener("change", applyFilter);
+  clearBtn?.addEventListener("click", () => {
+    input.value = "";
+    if (select) Array.from(select.options).forEach((o) => {
+      o.selected = false;
+    });
+    applyFilter();
+  });
+  updateSelectOptions("");
+  const totalDevices = bundle.devices.length;
+  if (countEl) countEl.textContent = `${totalDevices} dispositivo(s)`;
+}
+var _OFFLINE_ALARM_TYPES = ["DEVICE OFFLINE", "DISPOSITIVO OFFLINE"];
+function _getActiveAlarmCount(gcdrDeviceId) {
+  const aso = window.AlarmServiceOrchestrator;
+  if (!aso?.deviceAlarmMap) return 0;
+  const alarms = aso.deviceAlarmMap.get(gcdrDeviceId) || [];
+  const showOffline = window.MyIOOrchestrator?.showOfflineAlarms === true;
+  return showOffline ? alarms.length : alarms.filter((a) => {
+    const t = (a.title ?? "").toUpperCase();
+    return !(_OFFLINE_ALARM_TYPES.some((ex) => t.startsWith(ex)) || a.alarmType === "connectivity");
+  }).length;
+}
+function _alarmBadgeHtml(count) {
+  if (count === 0) return `<span class="abm-alarm-badge zero">0 \u{1F514}</span>`;
+  return `<span class="abm-alarm-badge">\u{1F534} ${count}</span>`;
+}
 function renderDevice(device, rules, viewMode = "granular") {
   const deviceRules = (device.ruleIds ?? []).map((rid) => rules[rid]).filter(Boolean);
+  const alarmCount = _getActiveAlarmCount(device.id);
   return `
-    <div class="abm-device-card">
+    <div class="abm-device-card collapsed" data-device-id="${escHtml3(device.id)}">
       <div class="abm-device-header">
+        <span class="abm-chevron">\u25BE</span>
         <span style="font-size:16px;">\u{1F4E1}</span>
         <span class="abm-device-name">${escHtml3(device.displayName || device.name)}</span>
+        ${_alarmBadgeHtml(alarmCount)}
         <span class="abm-device-type">${escHtml3(device.type)}</span>
       </div>
       <ul class="abm-rule-list">
@@ -135973,11 +136190,14 @@ function renderByRuleView(bundle) {
   for (const [baseRuleId, devs] of ruleDevicesMap) {
     const baseRule = rules[baseRuleId];
     if (!baseRule) continue;
+    const groupAlarmCount = devs.reduce((sum, d) => sum + _getActiveAlarmCount(d.id), 0);
     groups += `
-      <div class="abm-rule-group">
+      <div class="abm-rule-group collapsed" data-rule-id="${escHtml3(baseRuleId)}">
         <div class="abm-rule-group-header">
+          <span class="abm-chevron">\u25BE</span>
           <span style="font-size:16px;">\u{1F514}</span>
           <span class="abm-rule-group-name">${escHtml3(baseRule.name)}</span>
+          ${_alarmBadgeHtml(groupAlarmCount)}
           <button class="abm-edit-rule-btn" data-edit-rule="${escHtml3(baseRuleId)}" title="Editar dias/hor\xE1rio">\u270F\uFE0F</button>
         </div>
         <div class="abm-rule-detail" style="padding:8px 14px;" data-rule-id="${escHtml3(baseRuleId)}">
@@ -136041,7 +136261,6 @@ function renderBundle(bundle, viewMode = "granular") {
       <div class="abm-summary-bar">
         <div class="abm-summary-item"><div class="abm-summary-num">${deviceCount}</div><div class="abm-summary-label">Dispositivos</div></div>
         <div class="abm-summary-item"><div class="abm-summary-num">${ruleCount}</div><div class="abm-summary-label">Regras</div></div>
-        <div class="abm-summary-item"><div class="abm-summary-num">${assets.length}</div><div class="abm-summary-label">Assets</div></div>
       </div>
       ${renderByRuleView(bundle)}
     `;
@@ -136075,10 +136294,6 @@ function renderBundle(bundle, viewMode = "granular") {
         <div class="abm-summary-num">${ruleCount}</div>
         <div class="abm-summary-label">Regras</div>
       </div>
-      <div class="abm-summary-item">
-        <div class="abm-summary-num">${assets.length}</div>
-        <div class="abm-summary-label">Assets</div>
-      </div>
     </div>
     ${groups}
   `;
@@ -136169,7 +136384,21 @@ async function openAlarmBundleMapModal(params) {
     const customerName = bundle.customer.displayName || bundle.customer.name || "";
     const rerenderBundle = () => {
       render3(renderBundle(bundle, viewMode), customerName, true);
+      const body = card.querySelector(".abm-body");
+      if (body) {
+        const filterBarEl = document.createElement("div");
+        filterBarEl.className = "abm-filter-bar";
+        filterBarEl.innerHTML = `
+          <input class="abm-filter-input" type="text" id="abm-filter-input" placeholder="Buscar dispositivo, regra, tipo..." />
+          <select class="abm-filter-select" id="abm-filter-select" multiple size="1"></select>
+          <span class="abm-filter-count" id="abm-filter-count"></span>
+          <button class="abm-filter-clear" id="abm-filter-clear" type="button">\u2715 Limpar</button>
+        `;
+        body.insertBefore(filterBarEl, body.firstChild);
+      }
       bindRuleEditEvents(card, bundle, params.gcdrTenantId, baseUrl, () => viewMode);
+      bindCollapseEvents(card);
+      bindFilterBar(card, bundle, () => viewMode);
       card.querySelectorAll("[data-view]").forEach((btn) => {
         btn.addEventListener("click", () => {
           const newMode = btn.getAttribute("data-view");

package/dist/index.d.cts

@@ -10435,11 +10435,12 @@ interface TBUserPage {
 }
 interface GCDRPolicy {
     id: string;
+    key?: string;
     displayName: string;
     description?: string;
     allow: string[];
     deny: string[];
-    riskLevel?: 'LOW' | 'MEDIUM' | 'HIGH';
+    riskLevel?: 'low' | 'medium' | 'high' | 'critical' | 'LOW' | 'MEDIUM' | 'HIGH';
     /** System policies are immutable */
     isSystem?: boolean;
     createdAt?: string;
@@ -10447,10 +10448,14 @@ interface GCDRPolicy {
 }
 interface GCDRRole {
     id: string;
+    key?: string;
     displayName: string;
     description?: string;
-    /** IDs of associated policies */
-    policyIds: string[];
+    /** Policy keys as returned by the GCDR API (e.g. "policy:alarm-management") */
+    policies?: string[];
+    /** Legacy field — use `policies` instead */
+    policyIds?: string[];
+    riskLevel?: 'low' | 'medium' | 'high' | 'critical';
     isSystem?: boolean;
     createdAt?: string;
     updatedAt?: string;