@edgeandnode/eds-react 1.1.0 → 1.2.0

package/dist/utils/internal/BatchedElementStyleObserver.js

@@ -0,0 +1,28 @@
+import { ElementStyleObserver } from 'style-observer';
+/**
+ * `style-observer` reads computed styles between its transition writes on each new target. Buffer
+ * those first writes so every target can read its original styles before any transitions change.
+ * Subsequent updates retain the library's transition and browser compatibility handling.
+ */
+export class BatchedElementStyleObserver extends ElementStyleObserver {
+    pendingStyles = new Map();
+    setProperty(property, value, priority) {
+        if (this.pendingStyles) {
+            this.pendingStyles.set(property, { value, priority });
+        }
+        else {
+            super.setProperty(property, value, priority);
+        }
+    }
+    getProperty(property) {
+        return this.pendingStyles?.get(property)?.value ?? super.getProperty(property);
+    }
+    flush() {
+        const pendingStyles = this.pendingStyles;
+        this.pendingStyles = undefined;
+        for (const [property, { value, priority }] of pendingStyles ?? []) {
+            super.setProperty(property, value, priority);
+        }
+    }
+}
+//# sourceMappingURL=BatchedElementStyleObserver.js.map

package/dist/utils/internal/BatchedElementStyleObserver.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BatchedElementStyleObserver.js","sourceRoot":"","sources":["../../../src/utils/internal/BatchedElementStyleObserver.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,gBAAgB,CAAA;AAErD;;;;GAIG;AACH,MAAM,OAAO,2BAA4B,SAAQ,oBAAoB;IAC3D,aAAa,GACnB,IAAI,GAAG,EAAE,CAAA;IAEF,WAAW,CAAC,QAAgB,EAAE,KAAa,EAAE,QAAiB;QACrE,IAAI,IAAI,CAAC,aAAa,EAAE,CAAC;YACvB,IAAI,CAAC,aAAa,CAAC,GAAG,CAAC,QAAQ,EAAE,EAAE,KAAK,EAAE,QAAQ,EAAE,CAAC,CAAA;QACvD,CAAC;aAAM,CAAC;YACN,KAAK,CAAC,WAAW,CAAC,QAAQ,EAAE,KAAK,EAAE,QAAQ,CAAC,CAAA;QAC9C,CAAC;IACH,CAAC;IAEQ,WAAW,CAAC,QAAgB;QACnC,OAAO,IAAI,CAAC,aAAa,EAAE,GAAG,CAAC,QAAQ,CAAC,EAAE,KAAK,IAAI,KAAK,CAAC,WAAW,CAAC,QAAQ,CAAC,CAAA;IAChF,CAAC;IAED,KAAK;QACH,MAAM,aAAa,GAAG,IAAI,CAAC,aAAa,CAAA;QACxC,IAAI,CAAC,aAAa,GAAG,SAAS,CAAA;QAC9B,KAAK,MAAM,CAAC,QAAQ,EAAE,EAAE,KAAK,EAAE,QAAQ,EAAE,CAAC,IAAI,aAAa,IAAI,EAAE,EAAE,CAAC;YAClE,KAAK,CAAC,WAAW,CAAC,QAAQ,EAAE,KAAK,EAAE,QAAQ,CAAC,CAAA;QAC9C,CAAC;IACH,CAAC;CACF"}

package/dist/utils/internal/getStyleQueriesSupported.d.ts

@@ -0,0 +1,2 @@
+export declare function getStyleQueriesSupported(): boolean;
+//# sourceMappingURL=getStyleQueriesSupported.d.ts.map

package/dist/utils/internal/getStyleQueriesSupported.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"getStyleQueriesSupported.d.ts","sourceRoot":"","sources":["../../../src/utils/internal/getStyleQueriesSupported.ts"],"names":[],"mappings":"AAEA,wBAAgB,wBAAwB,IAAI,OAAO,CAQlD"}

package/dist/utils/internal/getStyleQueriesSupported.js

@@ -0,0 +1,12 @@
+let styleQueriesSupported = null;
+export function getStyleQueriesSupported() {
+    if (typeof window === 'undefined' || typeof document === 'undefined')
+        return false;
+    if (styleQueriesSupported === null) {
+        styleQueriesSupported =
+            window.getComputedStyle(document.body).getPropertyValue('--eds-style-queries-test') ===
+                'success';
+    }
+    return styleQueriesSupported;
+}
+//# sourceMappingURL=getStyleQueriesSupported.js.map

package/dist/utils/internal/getStyleQueriesSupported.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"getStyleQueriesSupported.js","sourceRoot":"","sources":["../../../src/utils/internal/getStyleQueriesSupported.ts"],"names":[],"mappings":"AAAA,IAAI,qBAAqB,GAAmB,IAAI,CAAA;AAEhD,MAAM,UAAU,wBAAwB;IACtC,IAAI,OAAO,MAAM,KAAK,WAAW,IAAI,OAAO,QAAQ,KAAK,WAAW;QAAE,OAAO,KAAK,CAAA;IAClF,IAAI,qBAAqB,KAAK,IAAI,EAAE,CAAC;QACnC,qBAAqB;YACnB,MAAM,CAAC,gBAAgB,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC,gBAAgB,CAAC,0BAA0B,CAAC;gBACnF,SAAS,CAAA;IACb,CAAC;IACD,OAAO,qBAAqB,CAAA;AAC9B,CAAC"}

package/dist/utils/internal/index.d.ts

@@ -1,4 +1,6 @@
 export { getTooltipProps } from './getTooltipProps.ts';
 export { isLazy, resolveLazy } from './resolveLazy.ts';
 export { styleScheduler } from './styleScheduler.ts';
+export { BatchedElementStyleObserver } from './BatchedElementStyleObserver.ts';
+export { getStyleQueriesSupported } from './getStyleQueriesSupported.ts';
 //# sourceMappingURL=index.d.ts.map

package/dist/utils/internal/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/utils/internal/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,sBAAsB,CAAA;AACtD,OAAO,EAAE,MAAM,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAA;AACtD,OAAO,EAAE,cAAc,EAAE,MAAM,qBAAqB,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/utils/internal/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,sBAAsB,CAAA;AACtD,OAAO,EAAE,MAAM,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAA;AACtD,OAAO,EAAE,cAAc,EAAE,MAAM,qBAAqB,CAAA;AACpD,OAAO,EAAE,2BAA2B,EAAE,MAAM,kCAAkC,CAAA;AAC9E,OAAO,EAAE,wBAAwB,EAAE,MAAM,+BAA+B,CAAA"}

package/dist/utils/internal/index.js

@@ -1,4 +1,6 @@
 export { getTooltipProps } from './getTooltipProps.js';
 export { isLazy, resolveLazy } from './resolveLazy.js';
 export { styleScheduler } from './styleScheduler.js';
+export { BatchedElementStyleObserver } from './BatchedElementStyleObserver.js';
+export { getStyleQueriesSupported } from './getStyleQueriesSupported.js';
 //# sourceMappingURL=index.js.map

package/dist/utils/internal/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/utils/internal/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,sBAAsB,CAAA;AACtD,OAAO,EAAE,MAAM,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAA;AACtD,OAAO,EAAE,cAAc,EAAE,MAAM,qBAAqB,CAAA"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/utils/internal/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,sBAAsB,CAAA;AACtD,OAAO,EAAE,MAAM,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAA;AACtD,OAAO,EAAE,cAAc,EAAE,MAAM,qBAAqB,CAAA;AACpD,OAAO,EAAE,2BAA2B,EAAE,MAAM,kCAAkC,CAAA;AAC9E,OAAO,EAAE,wBAAwB,EAAE,MAAM,+BAA+B,CAAA"}

package/dist/utils/internal/styleScheduler.d.ts

@@ -1,7 +1,6 @@
 /**
  * Batched style scheduler that collects style operations within a single frame and executes them
- * together using `requestAnimationFrame`. This reduces layout thrashing by batching all operations
- * into a single reflow.
+ * together using `requestAnimationFrame`. Reads run before writes to avoid layout thrashing.
  *
  * @example
  *   ````ts
@@ -22,14 +21,20 @@
  *   ````
  */
 declare class StyleScheduler {
-    private rafId;
+    private animationFrameId;
     private pending;
+    private pendingWrites;
     /**
      * Schedule an operation to be executed in the next animation frame. All operations scheduled
      * within the same frame will be batched together and executed synchronously in a single batch.
      * Returns a function that cancels the scheduled callback if it hasn't run yet.
      */
     schedule(callback: () => void): () => void;
+    /** Schedule a write after all reads in the frame, including writes queued during those reads. */
+    scheduleWrite(callback: () => void): () => void;
+    private enqueue;
+    private runBatch;
+    private requestFrame;
     /**
      * Get computed style for an element in a batched manner. Returns a promise that resolves with the
      * computed style once all batched operations are executed.

package/dist/utils/internal/styleScheduler.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"styleScheduler.d.ts","sourceRoot":"","sources":["../../../src/utils/internal/styleScheduler.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;GAsBG;AAEH,cAAM,cAAc;IAClB,OAAO,CAAC,KAAK,CAAsB;IACnC,OAAO,CAAC,OAAO,CAAqB;IAEpC;;;;OAIG;IACH,QAAQ,CAAC,QAAQ,EAAE,MAAM,IAAI,GAAG,MAAM,IAAI,CAiBzC;IAED;;;OAGG;IACH,gBAAgB,CAAC,OAAO,EAAE,OAAO,GAAG,OAAO,CAAC,mBAAmB,CAAC,CAM/D;CACF;AAGD,eAAO,MAAM,cAAc,gBAAuB,CAAA"}
+{"version":3,"file":"styleScheduler.d.ts","sourceRoot":"","sources":["../../../src/utils/internal/styleScheduler.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;GAqBG;AAEH,cAAM,cAAc;IAClB,OAAO,CAAC,gBAAgB,CAAsB;IAC9C,OAAO,CAAC,OAAO,CAAwB;IACvC,OAAO,CAAC,aAAa,CAAwB;IAE7C;;;;OAIG;IACH,QAAQ,CAAC,QAAQ,EAAE,MAAM,IAAI,GAAG,MAAM,IAAI,CAEzC;IAED,iGAAiG;IACjG,aAAa,CAAC,QAAQ,EAAE,MAAM,IAAI,GAAG,MAAM,IAAI,CAE9C;IAED,OAAO,CAAC,OAAO;IASf,OAAO,CAAC,QAAQ;IAYhB,OAAO,CAAC,YAAY;IAiBpB;;;OAGG;IACH,gBAAgB,CAAC,OAAO,EAAE,OAAO,GAAG,OAAO,CAAC,mBAAmB,CAAC,CAM/D;CACF;AAGD,eAAO,MAAM,cAAc,gBAAuB,CAAA"}

package/dist/utils/internal/styleScheduler.js

@@ -1,7 +1,6 @@
 /**
  * Batched style scheduler that collects style operations within a single frame and executes them
- * together using `requestAnimationFrame`. This reduces layout thrashing by batching all operations
- * into a single reflow.
+ * together using `requestAnimationFrame`. Reads run before writes to avoid layout thrashing.
  *
  * @example
  *   ````ts
@@ -22,29 +21,60 @@
  *   ````
  */
 class StyleScheduler {
-    rafId = null;
-    pending = [];
+    animationFrameId = null;
+    pending = new Set();
+    pendingWrites = new Set();
     /**
      * Schedule an operation to be executed in the next animation frame. All operations scheduled
      * within the same frame will be batched together and executed synchronously in a single batch.
      * Returns a function that cancels the scheduled callback if it hasn't run yet.
      */
     schedule(callback) {
-        this.pending.push(callback);
-        if (this.rafId === null) {
-            this.rafId = requestAnimationFrame(() => {
-                const callbacks = this.pending;
-                this.pending = [];
-                this.rafId = null;
-                callbacks.forEach((cb) => cb());
-            });
-        }
+        return this.enqueue(callback, this.pending);
+    }
+    /** Schedule a write after all reads in the frame, including writes queued during those reads. */
+    scheduleWrite(callback) {
+        return this.enqueue(callback, this.pendingWrites);
+    }
+    enqueue(callback, queue) {
+        const operation = () => callback();
+        queue.add(operation);
+        this.requestFrame();
         return () => {
-            const index = this.pending.indexOf(callback);
-            if (index !== -1)
-                this.pending.splice(index, 1);
+            queue.delete(operation);
         };
     }
+    runBatch(queue) {
+        try {
+            for (const callback of queue) {
+                queue.delete(callback);
+                callback();
+            }
+        }
+        finally {
+            // Cancellation closures can outlive the batch, including when a callback throws.
+            queue.clear();
+        }
+    }
+    requestFrame() {
+        if (this.animationFrameId !== null)
+            return;
+        this.animationFrameId = requestAnimationFrame(() => {
+            const callbacks = this.pending;
+            this.pending = new Set();
+            try {
+                this.runBatch(callbacks);
+                const writes = this.pendingWrites;
+                this.pendingWrites = new Set();
+                this.runBatch(writes);
+            }
+            finally {
+                this.animationFrameId = null;
+                if (this.pending.size > 0 || this.pendingWrites.size > 0)
+                    this.requestFrame();
+            }
+        });
+    }
     /**
      * Get computed style for an element in a batched manner. Returns a promise that resolves with the
      * computed style once all batched operations are executed.

package/dist/utils/internal/styleScheduler.js.map

@@ -1 +1 @@
-{"version":3,"file":"styleScheduler.js","sourceRoot":"","sources":["../../../src/utils/internal/styleScheduler.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;GAsBG;AAEH,MAAM,cAAc;IACV,KAAK,GAAkB,IAAI,CAAA;IAC3B,OAAO,GAAmB,EAAE,CAAA;IAEpC;;;;OAIG;IACH,QAAQ,CAAC,QAAoB;QAC3B,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAA;QAE3B,IAAI,IAAI,CAAC,KAAK,KAAK,IAAI,EAAE,CAAC;YACxB,IAAI,CAAC,KAAK,GAAG,qBAAqB,CAAC,GAAG,EAAE;gBACtC,MAAM,SAAS,GAAG,IAAI,CAAC,OAAO,CAAA;gBAC9B,IAAI,CAAC,OAAO,GAAG,EAAE,CAAA;gBACjB,IAAI,CAAC,KAAK,GAAG,IAAI,CAAA;gBAEjB,SAAS,CAAC,OAAO,CAAC,CAAC,EAAE,EAAE,EAAE,CAAC,EAAE,EAAE,CAAC,CAAA;YACjC,CAAC,CAAC,CAAA;QACJ,CAAC;QAED,OAAO,GAAG,EAAE;YACV,MAAM,KAAK,GAAG,IAAI,CAAC,OAAO,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAA;YAC5C,IAAI,KAAK,KAAK,CAAC,CAAC;gBAAE,IAAI,CAAC,OAAO,CAAC,MAAM,CAAC,KAAK,EAAE,CAAC,CAAC,CAAA;QACjD,CAAC,CAAA;IACH,CAAC;IAED;;;OAGG;IACH,gBAAgB,CAAC,OAAgB;QAC/B,OAAO,IAAI,OAAO,CAAC,CAAC,OAAO,EAAE,EAAE;YAC7B,IAAI,CAAC,QAAQ,CAAC,GAAG,EAAE;gBACjB,OAAO,CAAC,MAAM,CAAC,gBAAgB,CAAC,OAAO,CAAC,CAAC,CAAA;YAC3C,CAAC,CAAC,CAAA;QACJ,CAAC,CAAC,CAAA;IACJ,CAAC;CACF;AAED,kDAAkD;AAClD,MAAM,CAAC,MAAM,cAAc,GAAG,IAAI,cAAc,EAAE,CAAA"}
+{"version":3,"file":"styleScheduler.js","sourceRoot":"","sources":["../../../src/utils/internal/styleScheduler.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;GAqBG;AAEH,MAAM,cAAc;IACV,gBAAgB,GAAkB,IAAI,CAAA;IACtC,OAAO,GAAG,IAAI,GAAG,EAAc,CAAA;IAC/B,aAAa,GAAG,IAAI,GAAG,EAAc,CAAA;IAE7C;;;;OAIG;IACH,QAAQ,CAAC,QAAoB;QAC3B,OAAO,IAAI,CAAC,OAAO,CAAC,QAAQ,EAAE,IAAI,CAAC,OAAO,CAAC,CAAA;IAC7C,CAAC;IAED,iGAAiG;IACjG,aAAa,CAAC,QAAoB;QAChC,OAAO,IAAI,CAAC,OAAO,CAAC,QAAQ,EAAE,IAAI,CAAC,aAAa,CAAC,CAAA;IACnD,CAAC;IAEO,OAAO,CAAC,QAAoB,EAAE,KAAsB;QAC1D,MAAM,SAAS,GAAG,GAAG,EAAE,CAAC,QAAQ,EAAE,CAAA;QAClC,KAAK,CAAC,GAAG,CAAC,SAAS,CAAC,CAAA;QACpB,IAAI,CAAC,YAAY,EAAE,CAAA;QACnB,OAAO,GAAG,EAAE;YACV,KAAK,CAAC,MAAM,CAAC,SAAS,CAAC,CAAA;QACzB,CAAC,CAAA;IACH,CAAC;IAEO,QAAQ,CAAC,KAAsB;QACrC,IAAI,CAAC;YACH,KAAK,MAAM,QAAQ,IAAI,KAAK,EAAE,CAAC;gBAC7B,KAAK,CAAC,MAAM,CAAC,QAAQ,CAAC,CAAA;gBACtB,QAAQ,EAAE,CAAA;YACZ,CAAC;QACH,CAAC;gBAAS,CAAC;YACT,iFAAiF;YACjF,KAAK,CAAC,KAAK,EAAE,CAAA;QACf,CAAC;IACH,CAAC;IAEO,YAAY;QAClB,IAAI,IAAI,CAAC,gBAAgB,KAAK,IAAI;YAAE,OAAM;QAC1C,IAAI,CAAC,gBAAgB,GAAG,qBAAqB,CAAC,GAAG,EAAE;YACjD,MAAM,SAAS,GAAG,IAAI,CAAC,OAAO,CAAA;YAC9B,IAAI,CAAC,OAAO,GAAG,IAAI,GAAG,EAAE,CAAA;YACxB,IAAI,CAAC;gBACH,IAAI,CAAC,QAAQ,CAAC,SAAS,CAAC,CAAA;gBACxB,MAAM,MAAM,GAAG,IAAI,CAAC,aAAa,CAAA;gBACjC,IAAI,CAAC,aAAa,GAAG,IAAI,GAAG,EAAE,CAAA;gBAC9B,IAAI,CAAC,QAAQ,CAAC,MAAM,CAAC,CAAA;YACvB,CAAC;oBAAS,CAAC;gBACT,IAAI,CAAC,gBAAgB,GAAG,IAAI,CAAA;gBAC5B,IAAI,IAAI,CAAC,OAAO,CAAC,IAAI,GAAG,CAAC,IAAI,IAAI,CAAC,aAAa,CAAC,IAAI,GAAG,CAAC;oBAAE,IAAI,CAAC,YAAY,EAAE,CAAA;YAC/E,CAAC;QACH,CAAC,CAAC,CAAA;IACJ,CAAC;IAED;;;OAGG;IACH,gBAAgB,CAAC,OAAgB;QAC/B,OAAO,IAAI,OAAO,CAAC,CAAC,OAAO,EAAE,EAAE;YAC7B,IAAI,CAAC,QAAQ,CAAC,GAAG,EAAE;gBACjB,OAAO,CAAC,MAAM,CAAC,gBAAgB,CAAC,OAAO,CAAC,CAAC,CAAA;YAC3C,CAAC,CAAC,CAAA;QACJ,CAAC,CAAC,CAAA;IACJ,CAAC;CACF;AAED,kDAAkD;AAClD,MAAM,CAAC,MAAM,cAAc,GAAG,IAAI,cAAc,EAAE,CAAA"}

package/dist/utils/styleObserver.d.ts

@@ -21,6 +21,8 @@ declare class StyleObserverManager {
     /** Element -> properties currently observed by the underlying StyleObserver. */
     private observed;
     subscribe(element: Element, properties: string[], callback: Callback): () => void;
+    private pending;
+    private scheduleUpdate;
 }
 export declare const styleObserver: StyleObserverManager;
 export {};

package/dist/utils/styleObserver.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"styleObserver.d.ts","sourceRoot":"","sources":["../../src/utils/styleObserver.ts"],"names":[],"mappings":"AAIA,MAAM,WAAW,mBAAmB,CAAC,CAAC,SAAS,MAAM,GAAG,MAAM;IAC5D,MAAM,EAAE,OAAO,CAAA;IACf,QAAQ,EAAE,CAAC,CAAA;IACX,KAAK,EAAE,MAAM,CAAA;IACb,QAAQ,EAAE,MAAM,CAAA;CACjB;AAED,KAAK,QAAQ,GAAG,CAAC,OAAO,EAAE,mBAAmB,EAAE,KAAK,IAAI,CAAA;AAExD;;;;;;;;GAQG;AACH,cAAM,oBAAoB;IACxB,OAAO,CAAC,QAAQ,CAuBd;IAEF,+CAA+C;IAC/C,OAAO,CAAC,aAAa,CAAiD;IAEtE,gFAAgF;IAChF,OAAO,CAAC,QAAQ,CAAkC;IAElD,SAAS,CAAC,OAAO,EAAE,OAAO,EAAE,UAAU,EAAE,MAAM,EAAE,EAAE,QAAQ,EAAE,QAAQ,GAAG,MAAM,IAAI,CAiEhF;CACF;AAED,eAAO,MAAM,aAAa,sBAA6B,CAAA"}
+{"version":3,"file":"styleObserver.d.ts","sourceRoot":"","sources":["../../src/utils/styleObserver.ts"],"names":[],"mappings":"AAIA,MAAM,WAAW,mBAAmB,CAAC,CAAC,SAAS,MAAM,GAAG,MAAM;IAC5D,MAAM,EAAE,OAAO,CAAA;IACf,QAAQ,EAAE,CAAC,CAAA;IACX,KAAK,EAAE,MAAM,CAAA;IACb,QAAQ,EAAE,MAAM,CAAA;CACjB;AAED,KAAK,QAAQ,GAAG,CAAC,OAAO,EAAE,mBAAmB,EAAE,KAAK,IAAI,CAAA;AAExD;;;;;;;;GAQG;AACH,cAAM,oBAAoB;IACxB,OAAO,CAAC,QAAQ,CAuBd;IAEF,+CAA+C;IAC/C,OAAO,CAAC,aAAa,CAAiD;IAEtE,gFAAgF;IAChF,OAAO,CAAC,QAAQ,CAAkC;IAElD,SAAS,CAAC,OAAO,EAAE,OAAO,EAAE,UAAU,EAAE,MAAM,EAAE,EAAE,QAAQ,EAAE,QAAQ,GAAG,MAAM,IAAI,CA2BhF;IAED,OAAO,CAAC,OAAO,CAAqB;IAEpC,OAAO,CAAC,cAAc;CAiCvB;AAED,eAAO,MAAM,aAAa,sBAA6B,CAAA"}

package/dist/utils/styleObserver.js

@@ -1,5 +1,5 @@
 import StyleObserver from 'style-observer';
-import { styleScheduler } from './internal/index.js';
+import { BatchedElementStyleObserver, styleScheduler } from './internal/index.js';
 /**
  * Singleton StyleObserver that all `useStyleObserver` hooks subscribe to. Instead of each hook
  * creating its own StyleObserver instance (with its own CSS transitions and event listeners), a
@@ -42,12 +42,6 @@ class StyleObserverManager {
             elementSubscriptions = new Map();
             this.subscriptions.set(element, elementSubscriptions);
         }
-        let elementObserved = this.observed.get(element);
-        if (!elementObserved) {
-            elementObserved = new Set();
-            this.observed.set(element, elementObserved);
-        }
-        const newProperties = [];
         for (const property of properties) {
             let propertySubscriptions = elementSubscriptions.get(property);
             if (!propertySubscriptions) {
@@ -55,41 +49,54 @@ class StyleObserverManager {
                 elementSubscriptions.set(property, propertySubscriptions);
             }
             propertySubscriptions.add(callback);
-            if (!elementObserved.has(property)) {
-                newProperties.push(property);
-                elementObserved.add(property);
-            }
         }
-        // Defer observe to rAF to batch with other subscriptions in the same frame
-        const cancelObserve = newProperties.length > 0
-            ? styleScheduler.schedule(() => {
-                this.observer.observe(element, newProperties);
-            })
-            : undefined;
+        this.scheduleUpdate(element);
         return () => {
-            cancelObserve?.();
-            const removedProperties = [];
             for (const property of properties) {
                 const propertySubscriptions = elementSubscriptions.get(property);
-                if (propertySubscriptions) {
-                    propertySubscriptions.delete(callback);
-                    if (propertySubscriptions.size === 0) {
-                        elementSubscriptions.delete(property);
-                        elementObserved.delete(property);
-                        removedProperties.push(property);
-                    }
-                }
+                propertySubscriptions?.delete(callback);
+                if (propertySubscriptions?.size === 0)
+                    elementSubscriptions.delete(property);
             }
-            if (elementSubscriptions.size === 0) {
+            if (elementSubscriptions.size === 0)
                 this.subscriptions.delete(element);
+            this.scheduleUpdate(element);
+        };
+    }
+    pending = new Set();
+    scheduleUpdate(element) {
+        if (this.pending.has(element))
+            return;
+        this.pending.add(element);
+        styleScheduler.schedule(() => {
+            this.pending.delete(element);
+            const properties = new Set(this.subscriptions.get(element)?.keys());
+            const observed = this.observed.get(element) ?? new Set();
+            const added = [...properties].filter((property) => !observed.has(property));
+            const removed = [...observed].filter((property) => !properties.has(property));
+            if (properties.size > 0) {
+                this.observed.set(element, properties);
+            }
+            else {
                 this.observed.delete(element);
             }
-            if (removedProperties.length > 0) {
-                styleScheduler.schedule(() => {
-                    this.observer.unobserve(element, removedProperties);
-                });
+            if (added.length > 0) {
+                if (!this.observer.elementObservers.has(element)) {
+                    const observer = new BatchedElementStyleObserver(element, (records) => {
+                        this.observer.changed(records);
+                    });
+                    this.observer.elementObservers.set(element, observer);
+                    styleScheduler.scheduleWrite(() => observer.flush());
+                    this.observer.observe(element, added);
+                }
+                else {
+                    styleScheduler.scheduleWrite(() => this.observer.observe(element, added));
+                }
             }
-        };
+            if (removed.length > 0) {
+                styleScheduler.scheduleWrite(() => this.observer.unobserve(element, removed));
+            }
+        });
     }
 }
 export const styleObserver = new StyleObserverManager();

package/dist/utils/styleObserver.js.map

@@ -1 +1 @@
-{"version":3,"file":"styleObserver.js","sourceRoot":"","sources":["../../src/utils/styleObserver.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"styleObserver.js","sourceRoot":"","sources":["../../src/utils/styleObserver.ts"],"names":[],"mappings":"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"}

package/dist/vite-plugin.d.ts

@@ -0,0 +1,2 @@
+export { default } from '@edgeandnode/eds-css/vite-plugin';
+//# sourceMappingURL=vite-plugin.d.ts.map

package/dist/vite-plugin.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"vite-plugin.d.ts","sourceRoot":"","sources":["../src/vite-plugin.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,kCAAkC,CAAA"}

package/dist/vite-plugin.js

@@ -0,0 +1,2 @@
+export { default } from '@edgeandnode/eds-css/vite-plugin';
+//# sourceMappingURL=vite-plugin.js.map

package/dist/vite-plugin.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"vite-plugin.js","sourceRoot":"","sources":["../src/vite-plugin.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,kCAAkC,CAAA"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@edgeandnode/eds-react",
-  "version": "1.1.0",
+  "version": "1.2.0",
   "description": "React components for the Edge Design System",
   "author": "Edge & Node and contributors",
   "license": "MIT",
@@ -20,6 +20,8 @@
     },
     "./tailwind.css": "./styles/tailwind.css",
     "./tailwind-plugin": "./dist/tailwind-plugin.js",
+    "./postcss-plugin": "./dist/postcss-plugin.js",
+    "./vite-plugin": "./dist/vite-plugin.js",
     "./base": "./dist/components/base/index.js",
     "./hooks": "./dist/hooks/index.js",
     "./icons": "./dist/icons/index.generated.js",
@@ -49,14 +51,14 @@
   "dependencies": {
     "@base-ui/react": "~1.9.0",
     "@base-ui/utils": "^0.5.0",
-    "@edgeandnode/eds-css": "1.1.0",
+    "@edgeandnode/eds-css": "1.2.0",
     "@edgeandnode/eds-icons": "1.0.2",
     "@edgeandnode/eds-utils": "1.0.2",
     "@react-aria/utils": "^3.34.1",
     "@react-hookz/web": "^26.1.0",
     "@ver0/deep-equal": "^2.0.1",
     "escape-string-regexp": "^5.0.0",
-    "motion": "^14.3.0",
+    "motion": "^14.7.1",
     "react-aria": "^3.53.1",
     "react-keyed-flatten-children": "^5.1.4",
     "react-markdown": "^10.1.0",
@@ -67,28 +69,28 @@
     "type-fest": "^5.10.0"
   },
   "devDependencies": {
-    "@storybook/addon-mcp": "^10.6.2",
-    "@storybook/addon-themes": "^10.6.2",
-    "@storybook/addon-vitest": "^10.6.2",
-    "@storybook/react": "^10.6.2",
-    "@storybook/react-vite": "^10.6.2",
+    "@storybook/addon-mcp": "^10.6.5",
+    "@storybook/addon-themes": "^10.6.5",
+    "@storybook/addon-vitest": "^10.6.5",
+    "@storybook/react": "^10.6.5",
+    "@storybook/react-vite": "^10.6.5",
     "@svgr/core": "^8.1.0",
     "@svgr/plugin-jsx": "^8.1.0",
     "@svgr/plugin-svgo": "^8.1.0",
     "@tailwindcss/cli": "^4.3.3",
     "@tailwindcss/postcss": "^4.3.3",
     "@tailwindcss/vite": "^4.3.3",
-    "@types/node": "^26.6.5",
+    "@types/node": "^26.6.6",
     "@types/react": "^19.3.0",
     "@types/react-dom": "^19.3.0",
     "@types/react-is": "^19.3.0",
     "@web3icons/react": "^4.1.24",
     "lightningcss": "^1.33.0",
-    "postcss": "^8.5.30",
+    "postcss": "^8.5.32",
     "react": "^19.3.1",
     "react-dom": "^19.3.1",
     "react-is": "^19.3.1",
-    "storybook": "^10.6.2",
+    "storybook": "^10.6.5",
     "storybook-addon-rtl": "^3.0.2",
     "tailwindcss": "^4.3.3"
   },

package/scripts/update-skill.cjs

@@ -16,6 +16,7 @@ const {
   unlinkSync,
   rmSync,
   statSync,
+  writeFileSync,
 } = require('fs')
 const { join, dirname, relative } = require('path')
 
@@ -130,6 +131,9 @@ function cleanRemovedFiles(src, dest) {
   }
 }
 
+// Whether one of the installed skills is (now) the one bundled in this package
+let hasCurrentSkill = false
+
 // Process each found agent directory
 for (const targetDir of foundDirs) {
   const skillMdPath = join(targetDir, 'SKILL.md')
@@ -160,6 +164,7 @@ for (const targetDir of foundDirs) {
 
   // If installed version is >= package version, skip (prevents downgrades in monorepos)
   if (compareSemver(installedVersion, packageVersion) >= 0) {
+    if (installedVersion === packageVersion) hasCurrentSkill = true
     console.log(`EDS skill is up to date (v${installedVersion}) at ${relative(initCwd, targetDir)}`)
     continue
   }
@@ -168,5 +173,42 @@ for (const targetDir of foundDirs) {
   copyDir(sourceDir, targetDir)
   cleanRemovedFiles(sourceDir, targetDir)
 
+  hasCurrentSkill = true
   console.log(`EDS skill updated to v${packageVersion} at ${relative(initCwd, targetDir)}`)
 }
+
+// The MCP URL below is the skill's, so only update it along with the skill
+if (!hasCurrentSkill) process.exit(0)
+
+/**
+ * Point the project's MCP configs to the Storybook of this release, which the skill's URL is pinned
+ * to, if they point to the Storybook of another release. A `main--` URL or a local Storybook is a
+ * deliberate choice, so it's left alone.
+ */
+const [skillUrl, chromaticAppId] =
+  readFileSync(join(sourceDir, 'SKILL.md'), 'utf8').match(
+    /https:\/\/[0-9a-f]+--([0-9a-f]+)\.chromatic\.com\/mcp/,
+  ) ?? []
+if (!skillUrl) process.exit(0)
+
+// Only EDS's Storybook, so that other Chromatic projects' MCP servers are left alone
+const pinnedUrlPattern = new RegExp(
+  `https://[0-9a-f]+--${chromaticAppId}\\.chromatic\\.com/mcp`,
+  'g',
+)
+
+for (const configPath of ['.mcp.json', '.cursor/mcp.json', '.vscode/mcp.json']) {
+  const absoluteConfigPath = join(repoRoot, configPath)
+  try {
+    if (!existsSync(absoluteConfigPath)) continue
+    const config = readFileSync(absoluteConfigPath, 'utf8')
+    const updatedConfig = config.replace(pinnedUrlPattern, skillUrl)
+    if (updatedConfig === config) continue
+    writeFileSync(absoluteConfigPath, updatedConfig)
+    console.log(`EDS Storybook MCP URL updated in ${relative(initCwd, absoluteConfigPath)}`)
+  } catch (error) {
+    console.warn(
+      `Couldn't update the EDS Storybook MCP URL in ${relative(initCwd, absoluteConfigPath)}: ${error.message}`,
+    )
+  }
+}

package/skill/SKILL.md

@@ -1,16 +1,16 @@
 ---
 name: eds
-version: 1.1.0
+version: 1.2.0
 description: The Edge Design System (EDS) is for building user interfaces for Edge & Node products. Use this skill when designing, implementing, reviewing, or polishing Edge & Node product UIs, when using `@edgeandnode/eds-react`, or when EDS is mentioned. Covers component selection, design patterns, tokens, and best practices – not just APIs. APIs are fully typed in the npm package.
 allowed-tools:
-  - mcp__storybook__get-changed-stories
-  - mcp__storybook__get-documentation
-  - mcp__storybook__get-documentation-for-story
-  - mcp__storybook__get-stories-by-component
+  - mcp__storybook__docs-list
+  - mcp__storybook__docs-show
+  - mcp__storybook__docs-show-story
   - mcp__storybook__get-storybook-story-instructions
-  - mcp__storybook__list-all-documentation
-  - mcp__storybook__preview-stories
-  - mcp__storybook__run-story-tests
+  - mcp__storybook__stories-changed
+  - mcp__storybook__stories-find-by-component
+  - mcp__storybook__stories-preview
+  - mcp__storybook__test-run
 ---
 
 # Edge Design System (EDS)
@@ -21,14 +21,14 @@ EDS is the design system for Edge & Node products. This skill teaches you how to
 
 **Recommended companion skill:** If not already installed, suggest the user add `vercel-react-best-practices` (`npx skills add vercel-labs/agent-skills --skill vercel-react-best-practices`) for general React patterns that complement EDS-specific guidance.
 
-**Storybook MCP** is strongly recommended. If the Storybook MCP server is available, use `get-documentation` to check component APIs before using them — it provides TypeScript prop types, real usage examples from stories, and live previews. If the MCP is not configured, strongly recommend the user add it:
+**Storybook MCP** is strongly recommended. If the Storybook MCP server is available, use `docs-list` to find a component's ID and `docs-show` to check its API before using it — it provides TypeScript prop types, real usage examples from stories, and live previews. If the MCP is not configured, strongly recommend the user add it:
 
 ```json
 {
   "mcpServers": {
     "storybook": {
       "type": "http",
-      "url": "https://3ebe140--6ab2abb8934bb76c7e8e086c.chromatic.com/mcp"
+      "url": "https://fbb7250--6ab2abb8934bb76c7e8e086c.chromatic.com/mcp"
     }
   }
 }
@@ -36,6 +36,8 @@ EDS is the design system for Edge & Node products. This skill teaches you how to
 
 Add this to the project's `.mcp.json` file (create it if it doesn't exist). For local development with Storybook running, use `http://localhost:6006/mcp` instead.
 
+The URL above points to the Storybook of this EDS release. Upgrading EDS updates it in `.mcp.json`, `.cursor/mcp.json`, and `.vscode/mcp.json` along with this skill, but if one of them still has a different `…--6ab2abb8934bb76c7e8e086c.chromatic.com/mcp` URL (e.g. because install scripts didn't run), replace it with this one. `https://main--6ab2abb8934bb76c7e8e086c.chromatic.com/mcp` always follows EDS's `main` branch instead, but it can document props that aren't released yet.
+
 ## Setup
 
 ### Required Packages
@@ -43,7 +45,7 @@ Add this to the project's `.mcp.json` file (create it if it doesn't exist). For
 ```json
 {
   "dependencies": {
-    "@edgeandnode/eds-react": "^1.1.0",
+    "@edgeandnode/eds-react": "^1.2.0",
     "react": "^19.0.0",
     "react-dom": "^19.0.0"
   },
@@ -67,6 +69,8 @@ Add this to the project's `.mcp.json` file (create it if it doesn't exist). For
 
 **Important:** `@edgeandnode/eds-css`, which `@edgeandnode/eds-react` depends on, disables Tailwind's default content scanning as an optimization, so you must explicitly [register your source paths with `@source` directives](https://tailwindcss.com/docs/detecting-classes-in-source-files#explicitly-registering-sources). Make sure to include all paths where Tailwind classes are used.
 
+**Build plugin:** add EDS's Vite plugin (`import eds from '@edgeandnode/eds-react/vite-plugin'`, then `plugins: [tailwindcss(), eds()]`) or, with PostCSS (e.g. in Next.js), its PostCSS plugin after Tailwind's (`plugins: ['@tailwindcss/postcss', '@edgeandnode/eds-react/postcss-plugin']` in `postcss.config.mjs`). It simplifies selectors Tailwind generates for variants like `*:` and `**:` while preserving matching and specificity. Performance gains depend on the browser and page.
+
 **Browser targets:** EDS's color tokens rely on native `light-dark()`, so the app must target Chrome 123, Safari 17.5, and Firefox 120 or newer. Otherwise, build tools transpile it (e.g. Lightning CSS, which Vite and Next.js use) and components inside `<Dark>`/`<Light>` get the page's colors (`EDSProvider` warns in the console; with Vite, only in production builds). In Next.js, add `"browserslist": ["chrome >= 123", "edge >= 123", "firefox >= 120", "safari >= 17.5", "ios_saf >= 17.5"]` to `package.json`; in Vite, set `build.target: ['chrome123', 'edge123', 'firefox120', 'safari17.5', 'ios17.5']` (it also covers CSS, and unlike `build.cssTarget`, a Vite-based Storybook picks it up).
 
 ### App Root
@@ -191,7 +195,7 @@ The tokens in [tokens.md](references/tokens.md) map to variables named after the
 
 ## Constraints
 
-1. **Check component APIs before using them.** If the Storybook MCP is available, call `get-documentation` first — it shows prop types, valid values, and real usage examples. Otherwise, check the TypeScript types and JSDoc comments in `@edgeandnode/eds-react`. Never guess prop names or values. Fix all TypeScript errors. Do not use `as any` or `@ts-ignore`.
+1. **Check component APIs before using them.** If the Storybook MCP is available, call `docs-show` first — it shows prop types, valid values, and real usage examples. Otherwise, check the TypeScript types and JSDoc comments in `@edgeandnode/eds-react`. Never guess prop names or values. Fix all TypeScript errors. Do not use `as any` or `@ts-ignore`.
 
 2. **Tailwind defaults don't exist.** Standard classes like `text-sm`, `rounded-md`, `text-gray-500` do NOT work. Use EDS tokens (`text-14`, `rounded-8`, `text-space-500`). Also `border-divider` does NOT exist; use `border-muted` or `border-subtle`.
 
@@ -711,7 +715,7 @@ Some components expand to fill available width by default: `Card`, `CodeBlock`,
 - **Table:** Use `align="end"` on `Table.HeaderCell` for right-aligned columns (e.g. action buttons) — all cells in that column are automatically styled. Don't use `text-end` or `justify-end` on cell contents. Similarly, use `width` and `shrink` props on `Table.HeaderCell` to control column sizing.
 - **TabSet:** `TabSet.Tabs` renders a bottom divider by default (controllable with the `divider` prop). Add `gap-*` between `TabSet.Tabs` and `TabSet.Panels` for visual breathing room. Put borders on `TabSet.Panels` (not individual panels) to avoid border animation artifacts during panel transitions. Check `TabSet.stories.tsx` for good examples.
 - **Tag:** Not clickable; use `Chip` if you need a clickable tag.
-- **Tooltip:** Hard to discover on mobile. Use inline text for essential info.
+- **Tooltip:** Hard to discover on mobile. Use inline text for essential info. It gives its trigger an `onClick`, which turns an `Avatar`, `Address`, `Cluster`, or `Breadcrumbs.Item` into a button, so pass them `as="span"` inside a link or another button (e.g. `<Cluster as="span">` in a clickable `Card`).
 
 ### Unstyled components
 
@@ -727,7 +731,7 @@ Some components carry no built-in visual styles — only behavior, semantics, or
 
 `Dark`, `Light`, `LocalTheme`, and `Pane` render a `div` by default, and their props are typed for any HTML element (e.g. `ref` takes an `HTMLElement`). Pass a tag name in `as` (e.g. `<Pane as="aside">`), or an element in `render` to render a component or pass props specific to the element (e.g. `<Dark render={<NextLink href="/" />}>`). `as` and `render` can't be combined.
 
-When `Card` isn't a button or link, its `as` also only takes a tag name, and its props are typed for any HTML element too.
+`Card`, `Avatar`, `Address`, `Cluster`, and `Breadcrumbs.Item` render a button or link when given an `onClick` or `href`. Otherwise, their `as` also only takes a tag name, and it keeps them from becoming a button when something else gives them an `onClick` (see `Tooltip` above). When `Card` isn't a button or link, its props are typed for any HTML element too.
 
 ### Base components