@lwrjs/everywhere 0.15.0-alpha.14 → 0.15.0-alpha.16

package/build/__generated_site_amd_modules__/1/module/amd/1/l/en-US/mi/lwc/v/{7_2_6/s/2c1a453f5aacf4954c53d3b64f4de7ee → 8_1_0/s/3b58f0c81f8eab543240d6ba477144fd}/lwc.js

@@ -1,4 +1,4 @@
-LWR.define('lwc/v/7_2_6', ['exports'], (function (exports) { 'use strict';
+LWR.define('lwc/v/8_1_0', ['exports'], (function (exports) { 'use strict';
 
   /**
    * Copyright (c) 2024 Salesforce, Inc.
@@ -82,6 +82,8 @@ LWR.define('lwc/v/7_2_6', ['exports'], (function (exports) { 'use strict';
     getOwnPropertyDescriptors,
     /** Detached {@linkcode Object.getOwnPropertyNames}; see {@link https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/getOwnPropertyNames MDN Reference}. */
     getOwnPropertyNames: getOwnPropertyNames$1,
+    /** Detached {@linkcode Object.getOwnPropertySymbols}; see {@link https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/getOwnPropertySymbols MDN Reference}. */
+    getOwnPropertySymbols: getOwnPropertySymbols$1,
     /** Detached {@linkcode Object.getPrototypeOf}; see {@link https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/getPrototypeOf MDN Reference}. */
     getPrototypeOf: getPrototypeOf$1,
     /** Detached {@linkcode Object.hasOwnProperty}; see {@link https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/hasOwnProperty MDN Reference}. */
@@ -295,7 +297,7 @@ LWR.define('lwc/v/7_2_6', ['exports'], (function (exports) { 'use strict';
   // These must be updated when the enum is updated.
   // It's a bit annoying to do have to do this manually, but this makes the file tree-shakeable,
   // passing the `verify-treeshakeable.js` test.
-  const allVersions = [58 /* APIVersion.V58_244_SUMMER_23 */, 59 /* APIVersion.V59_246_WINTER_24 */, 60 /* APIVersion.V60_248_SPRING_24 */, 61 /* APIVersion.V61_250_SUMMER_24 */, 62 /* APIVersion.V62_252_WINTER_25 */];
+  const allVersions = [58 /* APIVersion.V58_244_SUMMER_23 */, 59 /* APIVersion.V59_246_WINTER_24 */, 60 /* APIVersion.V60_248_SPRING_24 */, 61 /* APIVersion.V61_250_SUMMER_24 */, 62 /* APIVersion.V62_252_WINTER_25 */, 63 /* APIVersion.V63_254_SPRING_25 */];
   const LOWEST_API_VERSION = allVersions[0];
   /**
    *
@@ -319,6 +321,8 @@ LWR.define('lwc/v/7_2_6', ['exports'], (function (exports) { 'use strict';
       case 9 /* APIFeature.ENABLE_THIS_DOT_STYLE */:
       case 10 /* APIFeature.TEMPLATE_CLASS_NAME_OBJECT_BINDING */:
         return apiVersion >= 62 /* APIVersion.V62_252_WINTER_25 */;
+      case 11 /* APIFeature.ENABLE_COMPLEX_TEMPLATE_EXPRESSIONS */:
+        return apiVersion >= 63 /* APIVersion.V63_254_SPRING_25 */;
     }
   }
 
@@ -448,9 +452,9 @@ LWR.define('lwc/v/7_2_6', ['exports'], (function (exports) { 'use strict';
    * For full license text, see the LICENSE file in the repo root or https://opensource.org/licenses/MIT
    */
   // Increment whenever the LWC template compiler changes
-  const LWC_VERSION = "7.2.6";
+  const LWC_VERSION = "8.1.0";
   const LWC_VERSION_COMMENT_REGEX = /\/\*LWC compiler v([\d.]+)\*\/\s*}/;
-  /** version: 7.2.6 */
+  /** version: 8.1.0 */
 
   /**
    * Copyright (c) 2024 Salesforce, Inc.
@@ -537,7 +541,7 @@ LWR.define('lwc/v/7_2_6', ['exports'], (function (exports) { 'use strict';
       setFeatureFlag(name, value);
     }
   }
-  /** version: 7.2.6 */
+  /** version: 8.1.0 */
 
   /**
    * Copyright (c) 2024 Salesforce, Inc.
@@ -712,7 +716,220 @@ LWR.define('lwc/v/7_2_6', ['exports'], (function (exports) { 'use strict';
   }
 
   /*
-   * Copyright (c) 2019, salesforce.com, inc.
+   * Copyright (c) 2018, salesforce.com, inc.
+   * All rights reserved.
+   * SPDX-License-Identifier: MIT
+   * For full license text, see the LICENSE file in the repo root or https://opensource.org/licenses/MIT
+   */
+  let nextTickCallbackQueue = [];
+  const SPACE_CHAR = 32;
+  const EmptyObject = seal(create(null));
+  const EmptyArray = seal([]);
+  function flushCallbackQueue() {
+    if (process.env.NODE_ENV !== 'production') {
+      if (nextTickCallbackQueue.length === 0) {
+        throw new Error(`Internal Error: If callbackQueue is scheduled, it is because there must be at least one callback on this pending queue.`);
+      }
+    }
+    const callbacks = nextTickCallbackQueue;
+    nextTickCallbackQueue = []; // reset to a new queue
+    for (let i = 0, len = callbacks.length; i < len; i += 1) {
+      callbacks[i]();
+    }
+  }
+  function addCallbackToNextTick(callback) {
+    if (process.env.NODE_ENV !== 'production') {
+      if (!isFunction$1(callback)) {
+        throw new Error(`Internal Error: addCallbackToNextTick() can only accept a function callback`);
+      }
+    }
+    if (nextTickCallbackQueue.length === 0) {
+      // eslint-disable-next-line @typescript-eslint/no-floating-promises
+      Promise.resolve().then(flushCallbackQueue);
+    }
+    ArrayPush$1.call(nextTickCallbackQueue, callback);
+  }
+  function guid() {
+    function s4() {
+      return Math.floor((1 + Math.random()) * 0x10000).toString(16).substring(1);
+    }
+    return s4() + s4() + '-' + s4() + '-' + s4() + '-' + s4() + '-' + s4() + s4() + s4();
+  }
+  // Borrowed from Vue template compiler.
+  // https://github.com/vuejs/vue/blob/531371b818b0e31a989a06df43789728f23dc4e8/src/platforms/web/util/style.js#L5-L16
+  const DECLARATION_DELIMITER = /;(?![^(]*\))/g;
+  const PROPERTY_DELIMITER = /:(.+)/;
+  function parseStyleText(cssText) {
+    const styleMap = {};
+    const declarations = cssText.split(DECLARATION_DELIMITER);
+    for (const declaration of declarations) {
+      if (declaration) {
+        const [prop, value] = declaration.split(PROPERTY_DELIMITER);
+        if (prop !== undefined && value !== undefined) {
+          styleMap[prop.trim()] = value.trim();
+        }
+      }
+    }
+    return styleMap;
+  }
+  // Make a shallow copy of an object but omit the given key
+  function cloneAndOmitKey(object, keyToOmit) {
+    const result = {};
+    for (const key of keys(object)) {
+      if (key !== keyToOmit) {
+        result[key] = object[key];
+      }
+    }
+    return result;
+  }
+  function flattenStylesheets(stylesheets) {
+    const list = [];
+    for (const stylesheet of stylesheets) {
+      if (!isArray$1(stylesheet)) {
+        list.push(stylesheet);
+      } else {
+        list.push(...flattenStylesheets(stylesheet));
+      }
+    }
+    return list;
+  }
+  // Throw an error if we're running in prod mode. Ensures code is truly removed from prod mode.
+  function assertNotProd() {
+    /* istanbul ignore if */
+    if (process.env.NODE_ENV === 'production') {
+      // this method should never leak to prod
+      throw new ReferenceError();
+    }
+  }
+  function shouldBeFormAssociated(Ctor) {
+    const ctorFormAssociated = Boolean(Ctor.formAssociated);
+    const apiVersion = getComponentAPIVersion(Ctor);
+    const apiFeatureEnabled = isAPIFeatureEnabled(7 /* APIFeature.ENABLE_ELEMENT_INTERNALS_AND_FACE */, apiVersion);
+    if (process.env.NODE_ENV !== 'production' && ctorFormAssociated && !apiFeatureEnabled) {
+      const tagName = getComponentRegisteredName(Ctor);
+      logWarnOnce(`Component <${tagName}> set static formAssociated to true, but form ` + `association is not enabled because the API version is ${apiVersion}. To enable form association, ` + `update the LWC component API version to 61 or above. https://lwc.dev/guide/versioning`);
+    }
+    return ctorFormAssociated && apiFeatureEnabled;
+  }
+
+  /*
+   * Copyright (c) 2024, Salesforce, Inc.
+   * All rights reserved.
+   * SPDX-License-Identifier: MIT
+   * For full license text, see the LICENSE file in the repo root or https://opensource.org/licenses/MIT
+   */
+  //
+  // Do additional mutation tracking for DevTools performance profiling, in dev mode only.
+  //
+  const reactiveObserversToVMs = new WeakMap();
+  const targetsToPropertyKeys = new WeakMap();
+  let mutationLogs = [];
+  // Create a human-readable member access notation like `obj.foo` or `arr[1]`,
+  // handling edge cases like `obj[Symbol("bar")]` and `obj["spaces here"]`
+  function toPrettyMemberNotation(parent, child) {
+    if (isUndefined$1(parent)) {
+      // Bare prop, just stringify the child
+      return toString$1(child);
+    } else if (!isString(child)) {
+      // Symbol/number, e.g. `obj[Symbol("foo")]` or `obj[1234]`
+      return `${toString$1(parent)}[${toString$1(child)}]`;
+    } else if (/^\w+$/.test(child)) {
+      // Dot-notation-safe string, e.g. `obj.foo`
+      return `${toString$1(parent)}.${child}`;
+    } else {
+      // Bracket-notation-requiring string, e.g. `obj["prop with spaces"]`
+      return `${toString$1(parent)}[${JSON.stringify(child)}]`;
+    }
+  }
+  /**
+   * Flush all the logs we've written so far and return the current logs.
+   */
+  function getAndFlushMutationLogs() {
+    assertNotProd();
+    const result = mutationLogs;
+    mutationLogs = [];
+    return result;
+  }
+  /**
+   * Log a new mutation for this reactive observer.
+   * @param reactiveObserver - relevant ReactiveObserver
+   * @param target - target object that is being observed
+   * @param key - key (property) that was mutated
+   */
+  function logMutation(reactiveObserver, target, key) {
+    assertNotProd();
+    const parentKey = targetsToPropertyKeys.get(target);
+    const vm = reactiveObserversToVMs.get(reactiveObserver);
+    /* istanbul ignore if */
+    if (isUndefined$1(vm)) {
+      // VM should only be undefined in Vitest tests, where a reactive observer is not always associated with a VM
+      // because the unit tests just create Reactive Observers on-the-fly.
+      // Note we could explicitly target Vitest with `process.env.NODE_ENV === 'test'`, but then that would also
+      // affect our downstream consumers' Jest/Vitest tests, and we don't want to throw an error just for a logger.
+      if (process.env.NODE_ENV === 'test-karma-lwc') {
+        throw new Error('The VM should always be defined except possibly in unit tests');
+      }
+    } else {
+      const prop = toPrettyMemberNotation(parentKey, key);
+      ArrayPush$1.call(mutationLogs, {
+        vm,
+        prop
+      });
+    }
+  }
+  /**
+   * Flush logs associated with a given VM.
+   * @param vm - given VM
+   */
+  function flushMutationLogsForVM(vm) {
+    assertNotProd();
+    mutationLogs = ArrayFilter.call(mutationLogs, log => log.vm !== vm);
+  }
+  /**
+   * Mark this ReactiveObserver as related to this VM. This is only needed for mutation tracking in dev mode.
+   * @param reactiveObserver
+   * @param vm
+   */
+  function associateReactiveObserverWithVM(reactiveObserver, vm) {
+    assertNotProd();
+    reactiveObserversToVMs.set(reactiveObserver, vm);
+  }
+  /**
+   * Deeply track all objects in a target and associate with a given key.
+   * @param key - key associated with the object in the component
+   * @param target - tracked target object
+   */
+  function trackTargetForMutationLogging(key, target) {
+    assertNotProd();
+    if (targetsToPropertyKeys.has(target)) {
+      // Guard against recursive objects - don't traverse forever
+      return;
+    }
+    if (isObject(target) && !isNull(target)) {
+      // only track non-primitives; others are invalid as WeakMap keys
+      targetsToPropertyKeys.set(target, key);
+      // Deeply traverse arrays and objects to track every object within
+      if (isArray$1(target)) {
+        for (let i = 0; i < target.length; i++) {
+          trackTargetForMutationLogging(toPrettyMemberNotation(key, i), target[i]);
+        }
+      } else {
+        // Track only own property names and symbols (including non-enumerated)
+        // This is consistent with what observable-membrane does:
+        // https://github.com/salesforce/observable-membrane/blob/b85417f/src/base-handler.ts#L142-L143
+        // Note this code path is very hot, hence doing two separate for-loops rather than creating a new array.
+        for (const prop of getOwnPropertyNames$1(target)) {
+          trackTargetForMutationLogging(toPrettyMemberNotation(key, prop), target[prop]);
+        }
+        for (const prop of getOwnPropertySymbols$1(target)) {
+          trackTargetForMutationLogging(toPrettyMemberNotation(key, prop), target[prop]);
+        }
+      }
+    }
+  }
+
+  /*
+   * Copyright (c) 2024, Salesforce, Inc.
    * All rights reserved.
    * SPDX-License-Identifier: MIT
    * For full license text, see the LICENSE file in the repo root or https://opensource.org/licenses/MIT
@@ -735,6 +952,9 @@ LWR.define('lwc/v/7_2_6', ['exports'], (function (exports) { 'use strict';
       if (!isUndefined$1(reactiveObservers)) {
         for (let i = 0, len = reactiveObservers.length; i < len; i += 1) {
           const ro = reactiveObservers[i];
+          if (process.env.NODE_ENV !== 'production') {
+            logMutation(ro, target, key);
+          }
           ro.notify();
         }
       }
@@ -920,103 +1140,6 @@ LWR.define('lwc/v/7_2_6', ['exports'], (function (exports) { 'use strict';
     return new ReactiveObserver(callback);
   }
 
-  /*
-   * Copyright (c) 2018, salesforce.com, inc.
-   * All rights reserved.
-   * SPDX-License-Identifier: MIT
-   * For full license text, see the LICENSE file in the repo root or https://opensource.org/licenses/MIT
-   */
-  let nextTickCallbackQueue = [];
-  const SPACE_CHAR = 32;
-  const EmptyObject = seal(create(null));
-  const EmptyArray = seal([]);
-  function flushCallbackQueue() {
-    if (process.env.NODE_ENV !== 'production') {
-      if (nextTickCallbackQueue.length === 0) {
-        throw new Error(`Internal Error: If callbackQueue is scheduled, it is because there must be at least one callback on this pending queue.`);
-      }
-    }
-    const callbacks = nextTickCallbackQueue;
-    nextTickCallbackQueue = []; // reset to a new queue
-    for (let i = 0, len = callbacks.length; i < len; i += 1) {
-      callbacks[i]();
-    }
-  }
-  function addCallbackToNextTick(callback) {
-    if (process.env.NODE_ENV !== 'production') {
-      if (!isFunction$1(callback)) {
-        throw new Error(`Internal Error: addCallbackToNextTick() can only accept a function callback`);
-      }
-    }
-    if (nextTickCallbackQueue.length === 0) {
-      // eslint-disable-next-line @typescript-eslint/no-floating-promises
-      Promise.resolve().then(flushCallbackQueue);
-    }
-    ArrayPush$1.call(nextTickCallbackQueue, callback);
-  }
-  function guid() {
-    function s4() {
-      return Math.floor((1 + Math.random()) * 0x10000).toString(16).substring(1);
-    }
-    return s4() + s4() + '-' + s4() + '-' + s4() + '-' + s4() + '-' + s4() + s4() + s4();
-  }
-  // Borrowed from Vue template compiler.
-  // https://github.com/vuejs/vue/blob/531371b818b0e31a989a06df43789728f23dc4e8/src/platforms/web/util/style.js#L5-L16
-  const DECLARATION_DELIMITER = /;(?![^(]*\))/g;
-  const PROPERTY_DELIMITER = /:(.+)/;
-  function parseStyleText(cssText) {
-    const styleMap = {};
-    const declarations = cssText.split(DECLARATION_DELIMITER);
-    for (const declaration of declarations) {
-      if (declaration) {
-        const [prop, value] = declaration.split(PROPERTY_DELIMITER);
-        if (prop !== undefined && value !== undefined) {
-          styleMap[prop.trim()] = value.trim();
-        }
-      }
-    }
-    return styleMap;
-  }
-  // Make a shallow copy of an object but omit the given key
-  function cloneAndOmitKey(object, keyToOmit) {
-    const result = {};
-    for (const key of keys(object)) {
-      if (key !== keyToOmit) {
-        result[key] = object[key];
-      }
-    }
-    return result;
-  }
-  function flattenStylesheets(stylesheets) {
-    const list = [];
-    for (const stylesheet of stylesheets) {
-      if (!isArray$1(stylesheet)) {
-        list.push(stylesheet);
-      } else {
-        list.push(...flattenStylesheets(stylesheet));
-      }
-    }
-    return list;
-  }
-  // Throw an error if we're running in prod mode. Ensures code is truly removed from prod mode.
-  function assertNotProd() {
-    /* istanbul ignore if */
-    if (process.env.NODE_ENV === 'production') {
-      // this method should never leak to prod
-      throw new ReferenceError();
-    }
-  }
-  function shouldBeFormAssociated(Ctor) {
-    const ctorFormAssociated = Boolean(Ctor.formAssociated);
-    const apiVersion = getComponentAPIVersion(Ctor);
-    const apiFeatureEnabled = isAPIFeatureEnabled(7 /* APIFeature.ENABLE_ELEMENT_INTERNALS_AND_FACE */, apiVersion);
-    if (process.env.NODE_ENV !== 'production' && ctorFormAssociated && !apiFeatureEnabled) {
-      const tagName = getComponentRegisteredName(Ctor);
-      logWarnOnce(`Component <${tagName}> set static formAssociated to true, but form ` + `association is not enabled because the API version is ${apiVersion}. To enable form association, ` + `update the LWC component API version to 61 or above. https://lwc.dev/guide/versioning`);
-    }
-    return ctorFormAssociated && apiFeatureEnabled;
-  }
-
   /*
    * Copyright (c) 2020, salesforce.com, inc.
    * All rights reserved.
@@ -1721,7 +1844,7 @@ LWR.define('lwc/v/7_2_6', ['exports'], (function (exports) { 'use strict';
       valueMutated(originalTarget, key);
       return true;
     }
-    /*LWC compiler v7.2.6*/
+    /*LWC compiler v8.1.0*/
   }
   const getterMap = new WeakMap();
   const setterMap = new WeakMap();
@@ -1814,7 +1937,7 @@ LWR.define('lwc/v/7_2_6', ['exports'], (function (exports) { 'use strict';
       /* istanbul ignore next */
       return false;
     }
-    /*LWC compiler v7.2.6*/
+    /*LWC compiler v8.1.0*/
   }
   function extract(objectOrArray) {
     if (isArray(objectOrArray)) {
@@ -2813,6 +2936,9 @@ LWR.define('lwc/v/7_2_6', ['exports'], (function (exports) { 'use strict';
         });
       }
     });
+    if (process.env.NODE_ENV !== 'production') {
+      associateReactiveObserverWithVM(ro, getAssociatedVM(component));
+    }
     const computeConfigAndUpdate = () => {
       let config;
       ro.observe(() => config = configCallback(component));
@@ -3094,7 +3220,9 @@ LWR.define('lwc/v/7_2_6', ['exports'], (function (exports) { 'use strict';
    * SPDX-License-Identifier: MIT
    * For full license text, see the LICENSE file in the repo root or https://opensource.org/licenses/MIT
    */
-  function track(target) {
+  function track(target,
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  context) {
     if (arguments.length === 1) {
       return getReactiveProxy(target);
     }
@@ -3123,6 +3251,9 @@ LWR.define('lwc/v/7_2_6', ['exports'], (function (exports) { 'use strict';
           }
         }
         const reactiveOrAnyValue = getReactiveProxy(newValue);
+        if (process.env.NODE_ENV !== 'production') {
+          trackTargetForMutationLogging(key, newValue);
+        }
         updateComponentValue(vm, key, reactiveOrAnyValue);
       },
       enumerable: true,
@@ -3567,7 +3698,7 @@ LWR.define('lwc/v/7_2_6', ['exports'], (function (exports) { 'use strict';
   }
   function HTMLBridgeElementFactory(SuperClass, publicProperties, methods, observedFields, proto, hasCustomSuperClass) {
     const HTMLBridgeElement = class extends SuperClass {
-      /*LWC compiler v7.2.6*/
+      /*LWC compiler v8.1.0*/
     };
     // generating the hash table for attributes to avoid duplicate fields and facilitate validation
     // and false positives in case of inheritance.
@@ -6581,20 +6712,48 @@ LWR.define('lwc/v/7_2_6', ['exports'], (function (exports) { 'use strict';
   });
 
   /*
-   * Copyright (c) 2018, salesforce.com, inc.
+   * Copyright (c) 2024, Salesforce, Inc.
    * All rights reserved.
    * SPDX-License-Identifier: MIT
    * For full license text, see the LICENSE file in the repo root or https://opensource.org/licenses/MIT
    */
   const operationIdNameMapping = ['constructor', 'render', 'patch', 'connectedCallback', 'renderedCallback', 'disconnectedCallback', 'errorCallback', 'lwc-hydrate', 'lwc-rehydrate'];
+  const operationTooltipMapping = [
+  // constructor
+  'component constructor()',
+  // render
+  'component render() and virtual DOM rendered',
+  // patch
+  'component DOM rendered',
+  // connectedCallback
+  'component connectedCallback()',
+  // renderedCallback
+  'component renderedCallback()',
+  // disconnectedCallback
+  'component disconnectedCallback()',
+  // errorCallback
+  'component errorCallback()',
+  // lwc-hydrate
+  'component first rendered',
+  // lwc-rehydrate
+  'component re-rendered'];
   // Even if all the browser the engine supports implements the UserTiming API, we need to guard the measure APIs.
   // JSDom (used in Jest) for example doesn't implement the UserTiming APIs.
   const isUserTimingSupported = typeof performance !== 'undefined' && typeof performance.mark === 'function' && typeof performance.clearMarks === 'function' && typeof performance.measure === 'function' && typeof performance.clearMeasures === 'function';
   const start = !isUserTimingSupported ? noop : markName => {
     performance.mark(markName);
   };
-  const end = !isUserTimingSupported ? noop : (measureName, markName) => {
-    performance.measure(measureName, markName);
+  const end = !isUserTimingSupported ? noop : (measureName, markName, devtools) => {
+    performance.measure(measureName, {
+      start: markName,
+      detail: {
+        devtools: {
+          dataType: 'track-entry',
+          track: '⚡️ Lightning Web Components',
+          ...devtools
+        }
+      }
+    });
     // Clear the created marks and measure to avoid filling the performance entries buffer.
     // Note: Even if the entries get deleted, existing PerformanceObservers preserve a copy of those entries.
     performance.clearMarks(markName);
@@ -6611,6 +6770,85 @@ LWR.define('lwc/v/7_2_6', ['exports'], (function (exports) { 'use strict';
     // the right measures for components that are recursive.
     return `${getMeasureName(opId, vm)} - ${vm.idx}`;
   }
+  function getProperties(vm) {
+    return [['Tag Name', vm.tagName], ['Component ID', String(vm.idx)], ['Render Mode', vm.renderMode === 0 /* RenderMode.Light */ ? 'light DOM' : 'shadow DOM'], ['Shadow Mode', vm.shadowMode === 0 /* ShadowMode.Native */ ? 'native' : 'synthetic']];
+  }
+  function getColor(opId) {
+    // As of Sept 2024: primary (dark blue), secondary (light blue), tertiary (green)
+    switch (opId) {
+      // GlobalHydrate and Constructor tend to occur at the top level
+      case 7 /* OperationId.GlobalHydrate */:
+      case 0 /* OperationId.Constructor */:
+        return 'primary';
+      // GlobalRehydrate also occurs at the top level, but we want to use tertiary (green) because it's easier to
+      // distinguish from primary, and at a glance you should be able to easily tell re-renders from first renders.
+      case 8 /* OperationId.GlobalRehydrate */:
+        return 'tertiary';
+      // Everything else (patch/render/callbacks)
+      default:
+        return 'secondary';
+    }
+  }
+  // Create a list of tag names to the properties that were mutated, to help answer the question of
+  // "why did this component re-render?"
+  function getMutationProperties(mutationLogs) {
+    // `mutationLogs` should never have length 0, but bail out if it does for whatever reason
+    if (isUndefined$1(mutationLogs)) {
+      return EmptyArray;
+    }
+    if (!mutationLogs.length) {
+      // Currently this only occurs for experimental signals, because those mutations are not triggered by accessors
+      // TODO [#4546]: support signals in mutation logging
+      return EmptyArray;
+    }
+    // Keep track of unique IDs per tag name so we can just report a raw count at the end, e.g.
+    // `<x-foo> (x2)` to indicate that two instances of `<x-foo>` were rendered.
+    const tagNamesToIdsAndProps = new Map();
+    for (const {
+      vm: {
+        tagName,
+        idx
+      },
+      prop
+    } of mutationLogs) {
+      let idsAndProps = tagNamesToIdsAndProps.get(tagName);
+      if (isUndefined$1(idsAndProps)) {
+        idsAndProps = {
+          ids: new Set(),
+          keys: new Set()
+        };
+        tagNamesToIdsAndProps.set(tagName, idsAndProps);
+      }
+      idsAndProps.ids.add(idx);
+      idsAndProps.keys.add(prop);
+    }
+    // Sort by tag name
+    const entries = ArraySort.call([...tagNamesToIdsAndProps], (a, b) => a[0].localeCompare(b[0]));
+    const tagNames = ArrayMap.call(entries, item => item[0]);
+    // Show e.g. `<x-foo>` for one instance, or `<x-foo> (x2)` for two instances. (\u00D7 is multiplication symbol)
+    const tagNamesToDisplayTagNames = new Map();
+    for (const tagName of tagNames) {
+      const {
+        ids
+      } = tagNamesToIdsAndProps.get(tagName);
+      const displayTagName = `<${tagName}>${ids.size > 1 ? ` (\u00D7${ids.size})` : ''}`;
+      tagNamesToDisplayTagNames.set(tagName, displayTagName);
+    }
+    // Summary row
+    const usePlural = tagNames.length > 1 || tagNamesToIdsAndProps.get(tagNames[0]).ids.size > 1;
+    const result = [[`Component${usePlural ? 's' : ''}`, ArrayJoin.call(ArrayMap.call(tagNames, _ => tagNamesToDisplayTagNames.get(_)), ', ')]];
+    // Detail rows
+    for (const [prettyTagName, {
+      keys
+    }] of entries) {
+      const displayTagName = tagNamesToDisplayTagNames.get(prettyTagName);
+      ArrayPush$1.call(result, [displayTagName, ArrayJoin.call(ArraySort.call([...keys]), ', ')]);
+    }
+    return result;
+  }
+  function getTooltipText(measureName, opId) {
+    return `${measureName} - ${operationTooltipMapping[opId]}`;
+  }
   /** Indicates if operations should be logged via the User Timing API. */
   const isMeasureEnabled = process.env.NODE_ENV !== 'production';
   /** Indicates if operations should be logged by the profiler. */
@@ -6648,30 +6886,60 @@ LWR.define('lwc/v/7_2_6', ['exports'], (function (exports) { 'use strict';
     if (isMeasureEnabled) {
       const markName = getMarkName(opId, vm);
       const measureName = getMeasureName(opId, vm);
-      end(measureName, markName);
+      end(measureName, markName, {
+        color: getColor(opId),
+        tooltipText: getTooltipText(measureName, opId),
+        properties: getProperties(vm)
+      });
     }
     if (isProfilerEnabled) {
       currentDispatcher(opId, 1 /* Phase.Stop */, vm.tagName, vm.idx, vm.renderMode, vm.shadowMode);
     }
   }
-  function logGlobalOperationStart(opId, vm) {
+  function logGlobalOperationStart(opId) {
     if (isMeasureEnabled) {
-      const opName = getOperationName(opId);
-      const markName = isUndefined$1(vm) ? opName : getMarkName(opId, vm);
+      const markName = getOperationName(opId);
+      start(markName);
+    }
+    if (isProfilerEnabled) {
+      currentDispatcher(opId, 0 /* Phase.Start */);
+    }
+  }
+  function logGlobalOperationStartWithVM(opId, vm) {
+    if (isMeasureEnabled) {
+      const markName = getMarkName(opId, vm);
       start(markName);
     }
     if (isProfilerEnabled) {
-      currentDispatcher(opId, 0 /* Phase.Start */, vm?.tagName, vm?.idx, vm?.renderMode, vm?.shadowMode);
+      currentDispatcher(opId, 0 /* Phase.Start */, vm.tagName, vm.idx, vm.renderMode, vm.shadowMode);
+    }
+  }
+  function logGlobalOperationEnd(opId, mutationLogs) {
+    if (isMeasureEnabled) {
+      const opName = getOperationName(opId);
+      const markName = opName;
+      end(opName, markName, {
+        color: getColor(opId),
+        tooltipText: getTooltipText(opName, opId),
+        properties: getMutationProperties(mutationLogs)
+      });
+    }
+    if (isProfilerEnabled) {
+      currentDispatcher(opId, 1 /* Phase.Stop */);
     }
   }
-  function logGlobalOperationEnd(opId, vm) {
+  function logGlobalOperationEndWithVM(opId, vm) {
     if (isMeasureEnabled) {
       const opName = getOperationName(opId);
-      const markName = isUndefined$1(vm) ? opName : getMarkName(opId, vm);
-      end(opName, markName);
+      const markName = getMarkName(opId, vm);
+      end(opName, markName, {
+        color: getColor(opId),
+        tooltipText: getTooltipText(opName, opId),
+        properties: getProperties(vm)
+      });
     }
     if (isProfilerEnabled) {
-      currentDispatcher(opId, 1 /* Phase.Stop */, vm?.tagName, vm?.idx, vm?.renderMode, vm?.shadowMode);
+      currentDispatcher(opId, 1 /* Phase.Stop */, vm.tagName, vm.idx, vm.renderMode, vm.shadowMode);
     }
   }
 
@@ -7123,7 +7391,7 @@ LWR.define('lwc/v/7_2_6', ['exports'], (function (exports) { 'use strict';
     return apiVersion;
   }
   function getTemplateReactiveObserver(vm) {
-    return createReactiveObserver(() => {
+    const reactiveObserver = createReactiveObserver(() => {
       const {
         isDirty
       } = vm;
@@ -7132,6 +7400,10 @@ LWR.define('lwc/v/7_2_6', ['exports'], (function (exports) { 'use strict';
         scheduleRehydration(vm);
       }
     });
+    if (process.env.NODE_ENV !== 'production') {
+      associateReactiveObserverWithVM(reactiveObserver, vm);
+    }
+    return reactiveObserver;
   }
   function resetTemplateObserverAndUnsubscribe(vm) {
     const {
@@ -7209,7 +7481,12 @@ LWR.define('lwc/v/7_2_6', ['exports'], (function (exports) { 'use strict';
   }
   function connectRootElement(elm) {
     const vm = getAssociatedVM(elm);
-    logGlobalOperationStart(7 /* OperationId.GlobalHydrate */, vm);
+    if (process.env.NODE_ENV !== 'production') {
+      // Flush any logs for this VM so that the initial properties from the constructor don't "count"
+      // in subsequent re-renders (lwc-rehydrate). Right now we're at the first render (lwc-hydrate).
+      flushMutationLogsForVM(vm);
+    }
+    logGlobalOperationStartWithVM(7 /* OperationId.GlobalHydrate */, vm);
     // Usually means moving the element from one place to another, which is observable via
     // life-cycle hooks.
     if (vm.state === 1 /* VMState.connected */) {
@@ -7217,7 +7494,7 @@ LWR.define('lwc/v/7_2_6', ['exports'], (function (exports) { 'use strict';
     }
     runConnectedCallback(vm);
     rehydrate(vm);
-    logGlobalOperationEnd(7 /* OperationId.GlobalHydrate */, vm);
+    logGlobalOperationEndWithVM(7 /* OperationId.GlobalHydrate */, vm);
   }
   function disconnectRootElement(elm) {
     const vm = getAssociatedVM(elm);
@@ -7538,6 +7815,9 @@ LWR.define('lwc/v/7_2_6', ['exports'], (function (exports) { 'use strict';
   }
   let rehydrateQueue = [];
   function flushRehydrationQueue() {
+    // Gather the logs before rehydration starts so they can be reported at the end of rehydration.
+    // Note that we also clear all existing logs at this point so that subsequent re-renders start from a clean slate.
+    const mutationLogs = process.env.NODE_ENV === 'production' ? undefined : getAndFlushMutationLogs();
     logGlobalOperationStart(8 /* OperationId.GlobalRehydrate */);
     if (process.env.NODE_ENV !== 'production') {
       assert.invariant(rehydrateQueue.length, `If rehydrateQueue was scheduled, it is because there must be at least one VM on this pending queue instead of ${rehydrateQueue}.`);
@@ -7557,13 +7837,13 @@ LWR.define('lwc/v/7_2_6', ['exports'], (function (exports) { 'use strict';
           ArrayUnshift.apply(rehydrateQueue, ArraySlice.call(vms, i + 1));
         }
         // we need to end the measure before throwing.
-        logGlobalOperationEnd(8 /* OperationId.GlobalRehydrate */);
+        logGlobalOperationEnd(8 /* OperationId.GlobalRehydrate */, mutationLogs);
         // re-throwing the original error will break the current tick, but since the next tick is
         // already scheduled, it should continue patching the rest.
         throw error;
       }
     }
-    logGlobalOperationEnd(8 /* OperationId.GlobalRehydrate */);
+    logGlobalOperationEnd(8 /* OperationId.GlobalRehydrate */, mutationLogs);
   }
   function runConnectedCallback(vm) {
     const {
@@ -8989,7 +9269,7 @@ LWR.define('lwc/v/7_2_6', ['exports'], (function (exports) { 'use strict';
     }
     return getReadOnlyProxy(obj);
   }
-  /** version: 7.2.6 */
+  /** version: 8.1.0 */
 
   /*
    * Copyright (c) 2018, salesforce.com, inc.
@@ -9283,7 +9563,7 @@ LWR.define('lwc/v/7_2_6', ['exports'], (function (exports) { 'use strict';
       formStateRestoreCallback(state, reason) {
         runFormStateRestoreCallback(this, state, reason);
       }
-      /*LWC compiler v7.2.6*/
+      /*LWC compiler v8.1.0*/
     };
     BaseHTMLElement = HTMLElement; // cache to track if it changes
   }
@@ -9298,7 +9578,7 @@ LWR.define('lwc/v/7_2_6', ['exports'], (function (exports) { 'use strict';
     // Using a BaseUpgradableConstructor superclass here is a perf optimization to avoid
     // re-defining the same logic (connectedCallback, disconnectedCallback, etc.) over and over.
     class UpgradableConstructor extends BaseUpgradableConstructor {
-      /*LWC compiler v7.2.6*/
+      /*LWC compiler v8.1.0*/
     }
     if (isFormAssociated) {
       // Perf optimization - the vast majority of components have formAssociated=false,
@@ -9421,7 +9701,7 @@ LWR.define('lwc/v/7_2_6', ['exports'], (function (exports) { 'use strict';
       function isNull(obj) {
         return obj === null;
       }
-      /** version: 7.2.6 */
+      /** version: 8.1.0 */
 
       /*
        * Copyright (c) 2023, salesforce.com, inc.
@@ -9441,7 +9721,7 @@ LWR.define('lwc/v/7_2_6', ['exports'], (function (exports) { 'use strict';
           this.setNewContext = setNewContext;
           this.setDisconnectedCallback = setDisconnectedCallback;
         }
-        /*LWC compiler v7.2.6*/
+        /*LWC compiler v8.1.0*/
       }
       function registerContextConsumer(elm, adapterContextToken, subscriptionPayload) {
         dispatchEvent(elm, new WireContextSubscriptionEvent(adapterContextToken, subscriptionPayload));
@@ -9864,7 +10144,7 @@ LWR.define('lwc/v/7_2_6', ['exports'], (function (exports) { 'use strict';
       formStateRestoreCallback(state, reason) {
         runFormStateRestoreCallback(this, state, reason);
       }
-      /*LWC compiler v7.2.6*/
+      /*LWC compiler v8.1.0*/
     }, _a.observedAttributes = observedAttributes,
     // Note CustomElementConstructor is not upgraded by LWC and inherits directly from HTMLElement which means it calls the native
     // attachInternals API.
@@ -10110,7 +10390,7 @@ LWR.define('lwc/v/7_2_6', ['exports'], (function (exports) { 'use strict';
       });
     });
   }
-  /** version: 7.2.6 */
+  /** version: 8.1.0 */
 
   exports.LightningElement = LightningElement;
   exports.__unstable__ProfilerControl = profilerControl;