@andreyshpigunov/x 0.3.89 → 0.4.0

package/src/components/x/device.js

@@ -44,10 +44,11 @@
  *
  * Breakpoints:
  *
- * - s (small): < 600px (mobile)
- * - m (medium): >= 600px and < 1000px (tablet)
- * - l (large): >= 1000px and < 1400px (desktop)
- * - xl (xlarge): >= 1400px (large desktop)
+ * - xs (xsmall): >= 0px
+ * - s (small): >= 640px
+ * - m (medium): >= 768px
+ * - l (large): >= 1024px
+ * - xl (xlarge): >= 1280px
  *
  * Public API:
  *
@@ -61,8 +62,9 @@
  * @property {boolean} touch - true if touch support is available
  * @property {number} width - Current window width in pixels
  * @property {number} height - Current window height in pixels
- * @property {string} breakpoint - Current responsive breakpoint: 's', 'm', 'l', or 'xl'
+ * @property {string} breakpoint - Current responsive breakpoint: 'xs', 's', 'm', 'l', or 'xl'
  * @property {Object} size - Boolean flags for each breakpoint:
+ *   - size.xs - true if xsmall breakpoint
  *   - size.s - true if small breakpoint
  *   - size.m - true if medium breakpoint
  *   - size.l - true if large breakpoint
@@ -70,9 +72,8 @@
  *
  * @method init() - Initializes or re-initializes detection, CSS classes, and resize listeners.
  *   Safe to call multiple times. Automatically cleans up previous state.
- * @method destroy() - Removes listeners and CSS classes. Use when unmounting (e.g. Next.js).
+ * @method destroy() - Removes listeners and CSS classes. Use when unmounting (page change / removing DOM).
  *
- * Next.js: call init() in useEffect() on client; optionally call destroy() in cleanup on route change.
  * SSR-safe: constructor/init/destroy no-op or safe when window is undefined.
  *
  * @event window.breakpointchange - Fired when the responsive breakpoint changes.
@@ -99,11 +100,13 @@
  *   }
  *
  * @example
- * // Next.js — _app.tsx or layout
- * useEffect(() => {
- *   device.init();
- *   return () => device.destroy();
- * }, []);
+ * // Vanilla JS — plain HTML
+ * // index.html:
+ * // <script type="module">
+ * //   import { device } from './src/components/x/device.js';
+ * //   window.addEventListener('DOMContentLoaded', () => device.init());
+ * //   window.addEventListener('breakpointchange', (e) => console.log(e.detail));
+ * // </script>
  *
  * @author Andrey Shpigunov
  * @version 0.7
@@ -119,10 +122,11 @@ const CLASSES_TO_REMOVE = [
 ];
 
 const SIZE_FLAGS = {
-  s: { s: true, m: false, l: false, xl: false },
-  m: { s: false, m: true, l: false, xl: false },
-  l: { s: false, m: false, l: true, xl: false },
-  xl: { s: false, m: false, l: false, xl: true }
+  xs: { xs: true, s: false, m: false, l: false, xl: false },
+  s: { xs: false, s: true, m: false, l: false, xl: false },
+  m: { xs: false, s: false, m: true, l: false, xl: false },
+  l: { xs: false, s: false, m: false, l: true, xl: false },
+  xl: { xs: false, s: false, m: false, l: false, xl: true }
 };
 
 export class Device {
@@ -135,8 +139,8 @@ export class Device {
     this.touch = false;
     this.width = 0;
     this.height = 0;
-    this.breakpoint = 's';
-    this.size = SIZE_FLAGS.s;
+    this.breakpoint = 'xs';
+    this.size = SIZE_FLAGS.xs;
     this._html = null;
     this._onResize = this._onResize.bind(this);
     this._debouncedResize = lib.debounce(this._onResize, 200);
@@ -147,7 +151,7 @@ export class Device {
     this.width = window.innerWidth;
     this.height = window.innerHeight;
     this.breakpoint = this._getBreakpointName(this.width);
-    this.size = SIZE_FLAGS[this.breakpoint] || SIZE_FLAGS.s;
+    this.size = SIZE_FLAGS[this.breakpoint] || SIZE_FLAGS.xs;
     this._html = document.documentElement;
   }
 
@@ -168,7 +172,7 @@ export class Device {
   }
 
   /**
-   * Removes listeners and CSS classes. Use when unmounting (e.g. Next.js).
+   * Removes listeners and CSS classes. Use when unmounting (page change / removing DOM).
    */
   destroy() {
     if (typeof window === 'undefined') return;
@@ -188,30 +192,32 @@ export class Device {
   /**
    * Returns a breakpoint name based on current width.
    * Breakpoint map:
-   *   - s: < 600px
-   *   - m: ≥600px and <1000px
-   *   - l: ≥1000px and <1400px
-   *   - xl: ≥1400px
+   *   - xs: ≥0px and <640px
+   *   - s: ≥640px and <768px
+   *   - m: ≥768px and <1024px
+   *   - l: ≥1024px and <1280px
+   *   - xl: ≥1280px
    *
    * @param {number} width - Current viewport width
-   * @return {'s'|'m'|'l'|'xl'}
+   * @return {'xs'|'s'|'m'|'l'|'xl'}
    * @private
    */
   _getBreakpointName(width) {
-    if (width >= 1400) return 'xl';
-    if (width >= 1000) return 'l';
-    if (width >= 600) return 'm';
-    return 's';
+    if (width >= 1280) return 'xl';
+    if (width >= 1024) return 'l';
+    if (width >= 768) return 'm';
+    if (width >= 640) return 's';
+    return 'xs';
   }
 
   /**
    * Converts breakpoint string into boolean flags for convenience.
-   * @param {'s'|'m'|'l'|'xl'} bp - Breakpoint name
-   * @return {{s:boolean,m:boolean,l:boolean,xl:boolean}}
+   * @param {'xs'|'s'|'m'|'l'|'xl'} bp - Breakpoint name
+   * @return {{xs:boolean,s:boolean,m:boolean,l:boolean,xl:boolean}}
    * @private
    */
   _getSizeFlags(bp) {
-    return SIZE_FLAGS[bp] || SIZE_FLAGS.s;
+    return SIZE_FLAGS[bp] || SIZE_FLAGS.xs;
   }
 
   /**
@@ -229,7 +235,7 @@ export class Device {
     this.width = w;
     this.height = h;
     this.breakpoint = next;
-    this.size = SIZE_FLAGS[next] || SIZE_FLAGS.s;
+    this.size = SIZE_FLAGS[next] || SIZE_FLAGS.xs;
 
     if (prev !== next) {
       window.dispatchEvent(new CustomEvent('breakpointchange', {

package/src/components/x/dropdown.css

@@ -21,7 +21,6 @@ All right reserved.
   --dropdown-divider-color: var(--color-grey);
 }
 
-
 [x-dropdown] {
   display: none;
   list-style: none;
@@ -47,8 +46,8 @@ All right reserved.
   pointer-events: none;
   overscroll-behavior: contain;
   
-  @media (--medium) {
-    --dropdown-max-width: 32rem;
+  @media (min-width: 768px) {
+    max-width: calc(var(--dropdown-max-width) * 1.2);
   }
   
   & > li {

package/src/components/x/dropdown.js

@@ -10,9 +10,7 @@
  *
  * - `dropdown.init()`            – Initializes all dropdown menus in the DOM.
  * - `dropdown.closeAllDropdowns()` – Closes all open dropdown menus.
- * - `dropdown.destroy()`         – Full teardown (listeners + global). Use on SPA unmount / Next.js.
- *
- * Next.js: call init() in useEffect() on client; call destroy() in cleanup (e.g. on unmount or route change).
+ * - `dropdown.destroy()`         – Full teardown (listeners + global). Use on SPA unmount / page change.
  * SSR-safe: init/destroy no-op when document is undefined.
  *
  * Usage:
@@ -97,11 +95,20 @@
  * - Screen reader friendly
  *
  * @example
- * // Next.js — layout or _app
- * useEffect(() => {
- *   dropdown.init();
- *   return () => dropdown.destroy();
- * }, []);
+ * // Vanilla JS — plain HTML
+ * // index.html:
+ * // <div class="dropdown">
+ * //   <button x-dropdown-open>Menu</button>
+ * //   <ul x-dropdown>
+ * //     <li><a href="#" role="menuitem">Item 1</a></li>
+ * //     <li><a href="#" role="menuitem">Item 2</a></li>
+ * //   </ul>
+ * // </div>
+ * //
+ * // <script type="module">
+ * //   import { dropdown } from './src/components/x/dropdown.js';
+ * //   window.addEventListener('DOMContentLoaded', () => dropdown.init());
+ * // </script>
  *
  * @author Andrey Shpigunov
  * @version 0.2
@@ -553,7 +560,7 @@ class Dropdown {
   }
 
   /**
-   * Full teardown: cleanup and remove global listener. Use on SPA unmount or Next.js.
+   * Full teardown: cleanup and remove global listener. Use on SPA unmount / page change.
    * SSR-safe: no-op when document is undefined.
    */
   destroy() {

package/src/components/x/flex.css

@@ -6,54 +6,36 @@ Created by Andrey Shpigunov at 20.03.2025
 All right reserved.
 ----------------------------------------*/
 
-
 /*
-  .flex
-  
-  .flex.fr  (m,l,xl)  - flex row
-  .flex.fc  (m,l,xl)  - flex column
-  .flex.fw  (m,l,xl)  - flex wrap
-  .flex.fnw (m,l,xl)  - flex nowrap
-  
-  .flex.ais  (m,l,xl)  - stretch
-  .flex.aifs (m,l,xl)  - flex start
-  .flex.aic  (m,l,xl)  - center
-  .flex.aife (m,l,xl)  - flex end
-  
-  .flex.jcfs (m,l,xl)  - flex start
-  .flex.jcc  (m,l,xl)  - center
-  .flex.jcfe (m,l,xl)  - flex end
-  .flex.jcsb (m,l,xl)  - space between
-  .flex.jcsa (m,l,xl)  - space around
-  .flex.jcse (m,l,xl)  - space evenly
-  
-  .flex > .c[1-12]/[1-12] (m,l,xl) - column width "column/columns"
-*/
-
-
-.flex {
-  display: flex;
-  
-  &.fr  { flex-direction: row }
-  &.fc  { flex-direction: column }
-  &.fw  { flex-wrap: wrap }
-  &.fnw { flex-wrap: nowrap }
+  .flex     (s,m,l,xl)
   
-  &.ais  { align-items: stretch }
-  &.aifs { align-items: flex-start }
-  &.aic  { align-items: center }
-  &.aife { align-items: flex-end }
+  .flex.fr  (s,m,l,xl)  - flex row
+  .flex.fc  (s,m,l,xl)  - flex column
+  .flex.fw  (s,m,l,xl)  - flex wrap
+  .flex.fnw (s,m,l,xl)  - flex nowrap
   
-  &.jcfs { justify-content: flex-start }
-  &.jcc  { justify-content: center }
-  &.jcfe { justify-content: flex-end }
-  &.jcsb { justify-content: space-between }
-  &.jcsa { justify-content: space-around }
-  &.jcse { justify-content: space-evenly }
+  .flex.ais  (s,m,l,xl)  - stretch
+  .flex.aifs (s,m,l,xl)  - flex start
+  .flex.aic  (s,m,l,xl)  - center
+  .flex.aife (s,m,l,xl)  - flex end
   
-  & > .noshrink { flex-shrink: 0 }
-  & > .nogrow { flex-grow: 0 }
+  .flex.jcfs (s,m,l,xl)  - flex start
+  .flex.jcc  (s,m,l,xl)  - center
+  .flex.jcfe (s,m,l,xl)  - flex end
+  .flex.jcsb (s,m,l,xl)  - space between
+  .flex.jcsa (s,m,l,xl)  - space around
+  .flex.jcse (s,m,l,xl)  - space evenly
   
+  .flex > .c[1-12]/[1-12] (s,m,l,xl) - column width "column/columns"
+*/
+
+.flex { display: flex }
+@media (min-width: 640px)  { .s\:flex { display: flex } }
+@media (min-width: 768px)  { .m\:flex { display: flex } }
+@media (min-width: 1024px) { .l\:flex { display: flex } }
+@media (min-width: 1280px) { .xl\:flex { display: flex } }
+
+[class*=flex] {
   /* Columns */
   @for $cols from 1 to 12 {
     @for $col from 1 to $cols {
@@ -64,28 +46,18 @@ All right reserved.
     }
   }
   
-  @media (--medium) {
-    
-    &.m\:fr  { flex-direction: row }
-    &.m\:fc  { flex-direction: column }
-    &.m\:fw  { flex-wrap: wrap }
-    &.m\:fnw { flex-wrap: nowrap }
-    
-    &.m\:ais  { align-items: stretch }
-    &.m\:aifs { align-items: flex-start }
-    &.m\:aic  { align-items: center }
-    &.m\:aife { align-items: flex-end }
-    
-    &.m\:jcfs { justify-content: flex-start }
-    &.m\:jcc  { justify-content: center }
-    &.m\:jcfe { justify-content: flex-end }
-    &.m\:jcsb { justify-content: space-between }
-    &.m\:jcsa { justify-content: space-around }
-    &.m\:jcse { justify-content: space-evenly }
-    
-    & > .m\:noshrink { flex-shrink: 0 }
-    & > .m\:nogrow { flex-grow: 0 }
-    
+  @media (min-width: 640px) {
+    @for $cols from 1 to 12 {
+      @for $col from 1 to $cols {
+        & > .s\:c$(col)\/$(cols) {
+          flex-basis: calc($(col) / $(cols) * 100%);
+          max-width: calc($(col) / $(cols) * 100%);
+        }
+      }
+    }
+  }
+  
+  @media (min-width: 768px) {
     @for $cols from 1 to 12 {
       @for $col from 1 to $cols {
         & > .m\:c$(col)\/$(cols) {
@@ -96,28 +68,7 @@ All right reserved.
     }
   }
   
-  @media (--large) {
-    
-    &.l\:fr  { flex-direction: row }
-    &.l\:fc  { flex-direction: column }
-    &.l\:fw  { flex-wrap: wrap }
-    &.l\:fnw { flex-wrap: nowrap }
-    
-    &.l\:ais  { align-items: stretch }
-    &.l\:aifs { align-items: flex-start }
-    &.l\:aic  { align-items: center }
-    &.l\:aife { align-items: flex-end }
-    
-    &.l\:jcfs { justify-content: flex-start }
-    &.l\:jcc  { justify-content: center }
-    &.l\:jcfe { justify-content: flex-end }
-    &.l\:jcsb { justify-content: space-between }
-    &.l\:jcsa { justify-content: space-around }
-    &.l\:jcse { justify-content: space-evenly }
-    
-    & > .l\:noshrink { flex-shrink: 0 }
-    & > .l\:nogrow { flex-grow: 0 }
-    
+  @media (min-width: 1024px) {
     @for $cols from 1 to 12 {
       @for $col from 1 to $cols {
         & > .l\:c$(col)\/$(cols) {
@@ -128,28 +79,7 @@ All right reserved.
     }
   }
   
-  @media (--xlarge) {
-    
-    &.xl\:fr  { flex-direction: row }
-    &.xl\:fc  { flex-direction: column }
-    &.xl\:fw  { flex-wrap: wrap }
-    &.xl\:fnw { flex-wrap: nowrap }
-    
-    &.xl\:ais  { align-items: stretch }
-    &.xl\:aifs { align-items: flex-start }
-    &.xl\:aic  { align-items: center }
-    &.xl\:aife { align-items: flex-end }
-    
-    &.xl\:jcfs { justify-content: flex-start }
-    &.xl\:jcc  { justify-content: center }
-    &.xl\:jcfe { justify-content: flex-end }
-    &.xl\:jcsb { justify-content: space-between }
-    &.xl\:jcsa { justify-content: space-around }
-    &.xl\:jcse { justify-content: space-evenly }
-    
-    & > .xl\:noshrink { flex-shrink: 0 }
-    & > .xl\:nogrow { flex-grow: 0 }
-    
+  @media (min-width: 1280px) {
     @for $cols from 1 to 12 {
       @for $col from 1 to $cols {
         & > .xl\:c$(col)\/$(cols) {
@@ -159,5 +89,112 @@ All right reserved.
       }
     }
   }
+}
+
+.fr  { flex-direction: row }
+.fc  { flex-direction: column }
+.fw  { flex-wrap: wrap }
+.fnw { flex-wrap: nowrap }
+
+.ais  { align-items: stretch }
+.aifs { align-items: flex-start }
+.aic  { align-items: center }
+.aife { align-items: flex-end }
+
+.jcfs { justify-content: flex-start }
+.jcc  { justify-content: center }
+.jcfe { justify-content: flex-end }
+.jcsb { justify-content: space-between }
+.jcsa { justify-content: space-around }
+.jcse { justify-content: space-evenly }
+
+.no-shrink { flex-shrink: 0 }
+.no-grow { flex-grow: 0 }
+
+@media (min-width: 640px) {
+  .s\:fr  { flex-direction: row }
+  .s\:fc  { flex-direction: column }
+  .s\:fw  { flex-wrap: wrap }
+  .s\:fnw { flex-wrap: nowrap }
+  
+  .s\:ais  { align-items: stretch }
+  .s\:aifs { align-items: flex-start }
+  .s\:aic  { align-items: center }
+  .s\:aife { align-items: flex-end }
+  
+  .s\:jcfs { justify-content: flex-start }
+  .s\:jcc  { justify-content: center }
+  .s\:jcfe { justify-content: flex-end }
+  .s\:jcsb { justify-content: space-between }
+  .s\:jcsa { justify-content: space-around }
+  .s\:jcse { justify-content: space-evenly }
+  
+  .s\:no-shrink { flex-shrink: 0 }
+  .s\:no-grow { flex-grow: 0 }
+}
+
+@media (min-width: 768px) {
+  .m\:fr  { flex-direction: row }
+  .m\:fc  { flex-direction: column }
+  .m\:fw  { flex-wrap: wrap }
+  .m\:fnw { flex-wrap: nowrap }
+  
+  .m\:ais  { align-items: stretch }
+  .m\:aifs { align-items: flex-start }
+  .m\:aic  { align-items: center }
+  .m\:aife { align-items: flex-end }
+  
+  .m\:jcfs { justify-content: flex-start }
+  .m\:jcc  { justify-content: center }
+  .m\:jcfe { justify-content: flex-end }
+  .m\:jcsb { justify-content: space-between }
+  .m\:jcsa { justify-content: space-around }
+  .m\:jcse { justify-content: space-evenly }
+  
+  .m\:no-shrink { flex-shrink: 0 }
+  .m\:no-grow { flex-grow: 0 }
+}
+
+@media (min-width: 1024px) {
+  .l\:fr  { flex-direction: row }
+  .l\:fc  { flex-direction: column }
+  .l\:fw  { flex-wrap: wrap }
+  .l\:fnw { flex-wrap: nowrap }
+  
+  .l\:ais  { align-items: stretch }
+  .l\:aifs { align-items: flex-start }
+  .l\:aic  { align-items: center }
+  .l\:aife { align-items: flex-end }
+  
+  .l\:jcfs { justify-content: flex-start }
+  .l\:jcc  { justify-content: center }
+  .l\:jcfe { justify-content: flex-end }
+  .l\:jcsb { justify-content: space-between }
+  .l\:jcsa { justify-content: space-around }
+  .l\:jcse { justify-content: space-evenly }
+  
+  .l\:no-shrink { flex-shrink: 0 }
+  .l\:no-grow { flex-grow: 0 }
+}
+
+@media (min-width: 1280px) {
+  .xl\:fr  { flex-direction: row }
+  .xl\:fc  { flex-direction: column }
+  .xl\:fw  { flex-wrap: wrap }
+  .xl\:fnw { flex-wrap: nowrap }
+  
+  .xl\:ais  { align-items: stretch }
+  .xl\:aifs { align-items: flex-start }
+  .xl\:aic  { align-items: center }
+  .xl\:aife { align-items: flex-end }
+  
+  .xl\:jcfs { justify-content: flex-start }
+  .xl\:jcc  { justify-content: center }
+  .xl\:jcfe { justify-content: flex-end }
+  .xl\:jcsb { justify-content: space-between }
+  .xl\:jcsa { justify-content: space-around }
+  .xl\:jcse { justify-content: space-evenly }
   
+  .xl\:no-shrink { flex-shrink: 0 }
+  .xl\:no-grow { flex-grow: 0 }
 }

package/src/components/x/flow.css

@@ -6,13 +6,11 @@ Created by Andrey Shpigunov at 20.03.2025
 All right reserved.
 ----------------------------------------*/
 
-
 /*
   .flow
-  .flow.s[0-10] (m,l,xl)   - vertical space
+  .flow.s[0-10] (s,m,l,xl)   - vertical space
 */
 
-
 .flow {
   
   & > * { margin: 0 }
@@ -23,7 +21,15 @@ All right reserved.
     }
   }
   
-  @media(--medium){
+  @media (min-width: 640px) {
+    @for $i from 0 to 10 {
+      &.s\:s$(i) > * {
+        margin-bottom: var(--space-$(i));
+      }
+    }
+  }
+  
+  @media (min-width: 768px) {
     @for $i from 0 to 10 {
       &.m\:s$(i) > * {
         margin-bottom: var(--space-$(i));
@@ -31,7 +37,7 @@ All right reserved.
     }
   }
   
-  @media(--large){
+  @media (min-width: 1024px) {
     @for $i from 0 to 10 {
       &.l\:s$(i) > * {
         margin-bottom: var(--space-$(i));
@@ -39,7 +45,7 @@ All right reserved.
     }
   }
   
-  @media(--xlarge){
+  @media (min-width: 1280px) {
     @for $i from 0 to 10 {
       &.xl\:s$(i) > * {
         margin-bottom: var(--space-$(i));

package/src/components/x/form.css

@@ -80,7 +80,7 @@ select {
     color: var(--form-font-color-disabled);
     border-color: var(--form-border-color-disabled);
     background-color: var(--form-background-color-disabled);
-    cursor: not-allowed !important;
+    cursor: not-allowed;
     box-shadow: none;
   }
 
@@ -99,9 +99,9 @@ select {
 
 select {
   padding-right: calc(var(--form-side-padding) * 2.6);
-  background-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#888" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-chevrons-up-down-icon lucide-chevrons-up-down"%3E%3Cpath d="m7 15 5 5 5-5"/%3E%3Cpath d="m7 9 5-5 5 5"/%3E%3C/svg%3E');
-  background-repeat: no-repeat;
+  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' stroke='%23888' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' class='lucide lucide-chevrons-up-down-icon lucide-chevrons-up-down'%3E%3Cpath d='m7 15 5 5 5-5M7 9l5-5 5 5'/%3E%3C/svg%3E");
   background-position: right calc(var(--form-side-padding) - 4px) top 52%, 0 0;
+  background-repeat: no-repeat;
   background-size: 1.6rem;
 }
 

package/src/components/x/form.js

@@ -85,7 +85,7 @@
  *   @example
  *     form.offUpdate('input[name="email"]');
  *
- * @method destroy() - Removes all update listeners and clears internal state. Use on SPA unmount / Next.js.
+ * @method destroy() - Removes all update listeners and clears internal state. Use on SPA unmount / page change.
  *
  * @method update(selector) - Manually dispatches input/change events.
  *   @param {string} selector - CSS selector for elements.
@@ -114,14 +114,17 @@
  * - Input elements and contenteditable: 'input' event
  * - Select elements: 'change' event
  *
- * Next.js: call destroy() in useEffect cleanup (e.g. on unmount). All DOM methods no-op when document is undefined.
- *
  * @example
- * // Next.js — cleanup on unmount
- * useEffect(() => {
- *   form.onUpdate('input[name="email"]', (el) => setEmail(el.value));
- *   return () => form.destroy();
- * }, []);
+ * // Vanilla JS — plain HTML
+ * // index.html:
+ * // <input name="email" type="email" />
+ * // <script type="module">
+ * //   import { form } from './src/components/x/form.js';
+ * //   window.addEventListener('DOMContentLoaded', () => {
+ * //     form.onUpdate('input[name="email"]', (el) => console.log('Email:', el.value));
+ * //   });
+ * //   window.addEventListener('pagehide', () => form.destroy());
+ * // </script>
  *
  * @author Andrey Shpigunov
  * @version 0.3
@@ -310,7 +313,7 @@ class Form {
   }
 
   /**
-   * Removes all update listeners and clears internal state. Use on SPA unmount or in Next.js cleanup.
+   * Removes all update listeners and clears internal state. Use on SPA unmount / page change.
    * SSR-safe: no-op when document is undefined.
    */
   destroy() {