@adaas/are-html 0.0.21 → 0.0.23

package/examples/for-perf/src/concept.ts

@@ -0,0 +1,94 @@
+import { A_Concept, A_Context } from "@adaas/a-concept"
+import { A_Config, ConfigReader } from "@adaas/a-utils/a-config";
+import { A_Logger, A_LOGGER_ENV_KEYS } from "@adaas/a-utils/a-logger";
+import { A_SignalBus, A_SignalState } from "@adaas/a-utils/a-signal";
+import { A_Polyfill } from "@adaas/a-utils/a-polyfill";
+import { AreRoot } from "src/lib/AreRoot/AreRoot.component";
+import { AreHTMLEngine } from "src/engine/AreHTML.engine";
+import { AreContainer, AreInit } from "@adaas/are";
+import { AreRoute } from "@adaas/are";
+import { AreHTMLEngineContext } from "src/engine/AreHTML.context";
+import { AreDirectiveIf } from "src/directives/AreDirectiveIf.directive";
+import { AreDirectiveFor } from "src/directives/AreDirectiveFor.directive";
+
+import { PerfApp } from "./components/PerfApp.component";
+import { PerfHeader } from "./components/PerfHeader.component";
+import { PerfControls } from "./components/PerfControls.component";
+import { PerfStats } from "./components/PerfStats.component";
+import { PerfGrid } from "./components/PerfGrid.component";
+
+
+(async () => {
+    try {
+
+        const container = new AreContainer({
+            name: 'ARE For-Perf',
+            components: [
+                // ----------------------------------
+                // UI Components 
+                // ----------------------------------
+                PerfApp,
+                PerfHeader,
+                PerfControls,
+                PerfStats,
+                PerfGrid,
+                // ----------------------------------
+                // Directives 
+                // ----------------------------------
+                AreDirectiveIf,
+                AreDirectiveFor,
+                // ----------------------------------
+                // Engine Components 
+                // ----------------------------------
+                A_SignalBus,
+                // ----------------------------------
+                // Addons 
+                // ----------------------------------
+                AreRoot,
+                ConfigReader,
+                AreHTMLEngine,
+                A_Logger,
+            ],
+            entities: [
+                AreInit,
+                AreRoute
+            ],
+            fragments: [
+                new A_SignalState([AreRoute]),
+                new AreHTMLEngineContext({
+                    container: document
+                }),
+
+                new A_Config({
+                    defaults: {
+                        [A_LOGGER_ENV_KEYS.LOG_LEVEL]: 'error',
+                    }
+                }),
+            ]
+        });
+
+        const concept = new A_Concept({
+            name: 'adaas-are-example-for-perf',
+            fragments: [new A_Config({
+                variables: ['CONFIG_VERBOSE', 'DEV_MODE'] as const,
+                defaults: {
+                    CONFIG_VERBOSE: true,
+                    DEV_MODE: true
+                }
+            })],
+            components: [A_Logger, ConfigReader, A_Polyfill],
+            containers: [container]
+        })
+
+        console.log('Building Concept...');
+        await concept.load();
+        console.log('✓ Concept loaded successfully.');
+        await concept.start();
+
+
+    } catch (error) {
+        const logger = A_Context.root.resolve<A_Logger>(A_Logger)!;
+        logger.error(error);
+    }
+
+})();

package/examples/jumpstart/dist/index.html

@@ -98,7 +98,7 @@
     <list-component></list-component>
   </are-root>
 
-  <script type="module" src="./mq7hqrxy-4kus50.js"></script>
+  <script type="module" src="./mq7mgf58-vbf07e.js"></script>
 </body>
 
 </html>

package/examples/jumpstart/dist/{mq7hqrxy-4kus50.js → mq7mgf58-vbf07e.js}

@@ -9665,7 +9665,26 @@ AreEvent = __decorateClass3([
 ], AreEvent);
 var _a131;
 var AreSignalsMeta = (_a131 = class extends z {
-  registerCondition(component, vector) {
+  /**
+   * Registers a condition vector for a component.
+   *
+   * @param component The component constructor to render when the condition matches.
+   * @param vector    The signal vector that activates the component.
+   * @param root      Optional root id. When provided, the condition only
+   *                  applies to the outlet with that id (per-root targeting).
+   *                  When omitted, the condition applies to ALL roots — this
+   *                  is the original, root-agnostic behavior.
+   */
+  registerCondition(component, vector, root) {
+    if (root) {
+      const rootScopedConditions = this.get("rootScopedConditions") || /* @__PURE__ */ new Map();
+      if (!rootScopedConditions.has(root)) {
+        rootScopedConditions.set(root, /* @__PURE__ */ new Map());
+      }
+      rootScopedConditions.get(root).set(vector, component);
+      this.set("rootScopedConditions", rootScopedConditions);
+      return;
+    }
     const vectorToComponent = this.get("vectorToComponent") || /* @__PURE__ */ new Map();
     const componentToVector = this.get("componentToVector") || /* @__PURE__ */ new Map();
     vectorToComponent.set(vector, component);
@@ -9690,33 +9709,55 @@ var AreSignalsMeta = (_a131 = class extends z {
    * @param vector   The incoming signal vector.
    * @param allowed  Optional set/array of component constructors to consider.
    *                 When omitted, every registered component is eligible.
+   * @param root     Optional root id. When provided, conditions registered
+   *                 specifically for that root (via `@Are.Condition(vector,
+   *                 { root })`) are considered FIRST and take priority over
+   *                 global, root-agnostic conditions. Conditions scoped to a
+   *                 DIFFERENT root are never returned here.
    */
-  findComponentByVector(vector, allowed) {
+  findComponentByVector(vector, allowed, root) {
     if (!vector) return void 0;
     const allowedSet = allowed ? allowed instanceof Set ? allowed : new Set(allowed) : void 0;
     const isAllowed = /* @__PURE__ */ __name((component) => !allowedSet || allowedSet.has(component), "isAllowed");
+    if (root) {
+      const rootScoped = this.get("rootScopedConditions")?.get(root);
+      if (rootScoped) {
+        const match = this.matchInMap(rootScoped, vector, isAllowed);
+        if (match) return match;
+      }
+    }
     const vectorToComponent = this.get("vectorToComponent");
     if (vectorToComponent) {
-      const component = vectorToComponent.get(vector);
-      if (component && isAllowed(component)) {
+      return this.matchInMap(vectorToComponent, vector, isAllowed);
+    }
+    return void 0;
+  }
+  /**
+   * Resolves the best component from a vector→component map using the
+   * three-tier priority shared by all condition matching:
+   *   1. Simple identity lookup (same vector instance).
+   *   2. Full equivalence (`vector.equals`).
+   *   3. Logical match (`vector.match`, order-independent).
+   *   4. Inclusion (`vector.includes`, provided vector is a subset).
+   */
+  matchInMap(map, vector, isAllowed) {
+    const direct = map.get(vector);
+    if (direct && isAllowed(direct)) {
+      return direct;
+    }
+    for (const [registeredVector, component] of map.entries()) {
+      if (isAllowed(component) && vector.equals(registeredVector)) {
         return component;
       }
     }
-    if (vectorToComponent) {
-      for (const [registeredVector, component] of vectorToComponent.entries()) {
-        if (isAllowed(component) && vector.equals(registeredVector)) {
-          return component;
-        }
-      }
-      for (const [registeredVector, component] of vectorToComponent.entries()) {
-        if (isAllowed(component) && vector.match(registeredVector)) {
-          return component;
-        }
+    for (const [registeredVector, component] of map.entries()) {
+      if (isAllowed(component) && vector.match(registeredVector)) {
+        return component;
       }
-      for (const [registeredVector, component] of vectorToComponent.entries()) {
-        if (isAllowed(component) && vector.includes(registeredVector)) {
-          return component;
-        }
+    }
+    for (const [registeredVector, component] of map.entries()) {
+      if (isAllowed(component) && vector.includes(registeredVector)) {
+        return component;
       }
     }
     return void 0;
@@ -9875,7 +9916,8 @@ var AreSignals = (_a133 = class extends O {
         logger?.debug("Emitting signal for root node:", vector);
         await root.emit(callScope);
         callScope.destroy();
-        for (const signal of vector) {
+        const dispatchedSignals = scope.resolveFlatAll(A_Signal);
+        for (const signal of dispatchedSignals) {
           if (!signal) continue;
           const ctor = signal.constructor;
           const typedFeatureName = AreSignalFeatureKey(ctor);
@@ -9999,7 +10041,7 @@ var Are = (_a135 = class extends O {
     super(...arguments);
     this.props = {};
   }
-  static Condition(signals) {
+  static Condition(signals, options) {
     return function(target) {
       const componentMeta = c.meta(target);
       const signalsMeta = c.meta(AreSignals);
@@ -10016,7 +10058,7 @@ var Are = (_a135 = class extends O {
       }
       if (vector) {
         componentMeta.vector = vector;
-        signalsMeta.registerCondition(target, vector);
+        signalsMeta.registerCondition(target, vector, options?.root);
       }
       return target;
     };
@@ -10639,7 +10681,10 @@ var AreStore = (_a140 = class extends A_ExecutionContext {
   constructor(aseid) {
     super(aseid.toString());
     this.dependencies = /* @__PURE__ */ new Map();
+    this.watcherPaths = /* @__PURE__ */ new Map();
     this._keys = /* @__PURE__ */ new Set();
+    this._batchDepth = 0;
+    this._pendingNotify = /* @__PURE__ */ new Set();
   }
   /**
    * Allows to define a pure function that will be executed in the context of the store, so it can access the store's data and methods, but it won't have access to the component's scope or other features. This can be useful for example for defining a function that will update the store's data based on some logic, without having access to the component's scope or other features, so we can keep the store's logic separate from the component's logic.
@@ -10669,7 +10714,10 @@ var AreStore = (_a140 = class extends A_ExecutionContext {
   get keys() {
     return this._keys;
   }
-  watch(instruction) {
+  watch(instruction, reevaluate = false) {
+    if (reevaluate) {
+      this.pruneWatcher(instruction);
+    }
     const watchers = this.context.get("watchers") || /* @__PURE__ */ new Set();
     watchers.add(instruction);
     this.context.set("watchers", watchers);
@@ -10698,13 +10746,7 @@ var AreStore = (_a140 = class extends A_ExecutionContext {
         super.set(firstPart, result ? result[firstPart] : primaryObject);
       }
     }
-    const normChanged = this.normalizePath(String(key));
-    const prefix = normChanged + ".";
-    for (const [normRegistered, instructions] of this.dependencies) {
-      if (normRegistered === normChanged || normRegistered.startsWith(prefix) || normChanged.startsWith(normRegistered + ".")) {
-        this.notify(instructions);
-      }
-    }
+    this.dispatch(this.collectAffected(String(key)));
   }
   set(param1, param2) {
     if (typeof param1 === "string" && param2 !== void 0) {
@@ -10728,7 +10770,15 @@ var AreStore = (_a140 = class extends A_ExecutionContext {
         if (!this.dependencies.has(normAncestor)) {
           this.dependencies.set(normAncestor, /* @__PURE__ */ new Set());
         }
-        this.watchers.forEach((watcher) => this.dependencies.get(normAncestor).add(watcher));
+        this.watchers.forEach((watcher) => {
+          this.dependencies.get(normAncestor).add(watcher);
+          let paths = this.watcherPaths.get(watcher);
+          if (!paths) {
+            paths = /* @__PURE__ */ new Set();
+            this.watcherPaths.set(watcher, paths);
+          }
+          paths.add(normAncestor);
+        });
       }
     }
     const primaryObject = super.get(firstPart);
@@ -10737,19 +10787,15 @@ var AreStore = (_a140 = class extends A_ExecutionContext {
   }
   setAsObject(values) {
     const entires = Object.entries(values);
+    const affected = /* @__PURE__ */ new Set();
     for (const [key, value] of entires) {
       this._keys.add(key);
       super.set(key, value);
-      const normChanged = this.normalizePath(String(key));
-      const prefix = normChanged + ".";
-      for (const [normRegistered, instructions] of this.dependencies) {
-        if (normRegistered === normChanged || // exact
-        normRegistered.startsWith(prefix) || // descendant
-        normChanged.startsWith(normRegistered + ".")) {
-          this.notify(instructions);
-        }
+      for (const watcher of this.collectAffected(String(key))) {
+        affected.add(watcher);
       }
     }
+    this.dispatch(affected);
     return this;
   }
   setAsKeyValue(key, value) {
@@ -10758,15 +10804,7 @@ var AreStore = (_a140 = class extends A_ExecutionContext {
     const primaryObject = super.get(firstPart);
     const result = A_UtilsHelper.setBypath(primaryObject, pathPart.join("."), value);
     super.set(firstPart, result ? result[firstPart] : value);
-    const normChanged = this.normalizePath(String(key));
-    const prefix = normChanged + ".";
-    for (const [normRegistered, instructions] of this.dependencies) {
-      if (normRegistered === normChanged || // exact
-      normRegistered.startsWith(prefix) || // descendant
-      normChanged.startsWith(normRegistered + ".")) {
-        this.notify(instructions);
-      }
-    }
+    this.dispatch(this.collectAffected(String(key)));
     return this;
   }
   /**
@@ -10781,19 +10819,92 @@ var AreStore = (_a140 = class extends A_ExecutionContext {
    */
   forceUpdate(key) {
     if (key === void 0) {
+      const all = /* @__PURE__ */ new Set();
       for (const instructions of this.dependencies.values()) {
-        this.notify(instructions);
+        for (const watcher of instructions) all.add(watcher);
       }
+      this.dispatch(all);
       return this;
     }
-    const normChanged = this.normalizePath(String(key));
+    this.dispatch(this.collectAffected(String(key)));
+    return this;
+  }
+  /**
+   * Runs `fn` with notifications deferred: every watcher affected by writes
+   * performed inside `fn` is collected and notified exactly once when the
+   * outermost batch completes. Nested `batch()` calls are coalesced into the
+   * outermost flush. Use this to wrap a burst of `set()`/`drop()` calls that
+   * logically belong together so each dependent renders only once (#4).
+   */
+  batch(fn) {
+    this._batchDepth++;
+    try {
+      fn();
+    } finally {
+      this._batchDepth--;
+      if (this._batchDepth === 0 && this._pendingNotify.size > 0) {
+        const pending = this._pendingNotify;
+        this._pendingNotify = /* @__PURE__ */ new Set();
+        this.notify(pending);
+      }
+    }
+    return this;
+  }
+  /**
+   * Builds the deduplicated set of watchers affected by a change to
+   * `changedKey`, using the same exact/descendant/ancestor path matching as
+   * `set()`. Returning a single union Set guarantees each watcher appears at
+   * most once regardless of how many of its registered paths matched (#3).
+   */
+  collectAffected(changedKey) {
+    const normChanged = this.normalizePath(String(changedKey));
     const prefix = normChanged + ".";
+    const affected = /* @__PURE__ */ new Set();
     for (const [normRegistered, instructions] of this.dependencies) {
-      if (normRegistered === normChanged || normRegistered.startsWith(prefix) || normChanged.startsWith(normRegistered + ".")) {
-        this.notify(instructions);
+      if (normRegistered === normChanged || // exact
+      normRegistered.startsWith(prefix) || // descendant
+      normChanged.startsWith(normRegistered + ".")) {
+        for (const instruction of instructions) affected.add(instruction);
       }
     }
-    return this;
+    return affected;
+  }
+  /**
+   * Notifies the given watchers now, or defers them to the batch flush when a
+   * `batch()` is active. The incoming set is already deduplicated by
+   * {@link collectAffected}.
+   */
+  dispatch(affected) {
+    if (affected.size === 0) return;
+    if (this._batchDepth > 0) {
+      for (const watcher of affected) this._pendingNotify.add(watcher);
+      return;
+    }
+    this.notify(affected);
+  }
+  /**
+   * Removes a watcher from every dependency set it holds on THIS store (and,
+   * best-effort, on ancestor stores reached via parent delegation in
+   * `get()`), clearing the matching reverse-index entries. Called at the
+   * start of each tracking window so a re-evaluating watcher does not keep
+   * stale subscriptions (#5).
+   */
+  pruneWatcher(instruction) {
+    const paths = this.watcherPaths.get(instruction);
+    if (paths) {
+      for (const path of paths) {
+        const set = this.dependencies.get(path);
+        if (set) {
+          set.delete(instruction);
+          if (set.size === 0) this.dependencies.delete(path);
+        }
+      }
+      this.watcherPaths.delete(instruction);
+    }
+    try {
+      this.parent?.pruneWatcher(instruction);
+    } catch {
+    }
   }
   /**
    * Notifies instructions — immediately or deferred if inside a batch.
@@ -10807,13 +10918,18 @@ var AreStore = (_a140 = class extends A_ExecutionContext {
     }
   }
   /**
-   * Removes an instruction from all dependency sets.
-   * Called when an instruction is reverted/destroyed.
+   * Removes an instruction from all dependency sets on this store, clearing
+   * its reverse-index entry and any pending batched notification. Called when
+   * an instruction is reverted/destroyed so a torn-down node's watcher can
+   * never be re-notified by a later `set()` (#1).
    */
   unregister(instruction) {
-    for (const instructions of this.dependencies.values()) {
+    for (const [path, instructions] of this.dependencies) {
       instructions.delete(instruction);
+      if (instructions.size === 0) this.dependencies.delete(path);
     }
+    this.watcherPaths.delete(instruction);
+    this._pendingNotify.delete(instruction);
   }
   /**
    * Normalizes a path once — reused in both get and set.
@@ -10941,7 +11057,7 @@ var AreInterpreter = (_a141 = class extends O {
   }
   updateInstruction(instruction, interpreter, store, scope, feature, ...args) {
     try {
-      store.watch(instruction);
+      store.watch(instruction, true);
       feature.chain(interpreter, instruction.name + AreInstructionFeatures.Update, scope);
       store.unwatch(instruction);
     } catch (error) {
@@ -10952,7 +11068,9 @@ var AreInterpreter = (_a141 = class extends O {
   revertInstruction(instruction, interpreter, store, scope, feature, ...args) {
     try {
       feature.chain(interpreter, instruction.name + AreInstructionFeatures.Revert, scope);
+      store.unregister(instruction);
     } catch (error) {
+      store.unregister(instruction);
       throw error;
     }
   }
@@ -12107,7 +12225,7 @@ AreRootCache = __decorateClass([
 
 // src/lib/AreRoot/AreRoot.component.ts
 var AreRoot = class extends Are {
-  async template(root, logger, signalsContext) {
+  async template(root, logger, signalsContext, signalState) {
     const rootId = root.id;
     if (signalsContext && !signalsContext.hasRoot(rootId)) {
       if (!root.content?.trim()) {
@@ -12119,26 +12237,9 @@ var AreRoot = class extends Are {
       }
       return;
     }
-    const currentRoute = AreRoute2.default();
-    let componentName;
-    if (currentRoute) {
-      const initialVector = new A_SignalVector([currentRoute]);
-      let renderTarget = signalsContext?.findComponentByVector(rootId, initialVector);
-      if (!renderTarget) {
-        const signalsMeta = c.meta(AreSignals);
-        const pool = signalsContext?.getComponentById(rootId);
-        const metaTarget = signalsMeta?.findComponentByVector(
-          initialVector,
-          pool?.length ? pool : void 0
-        );
-        if (metaTarget && (!pool?.length || pool.includes(metaTarget))) {
-          renderTarget = metaTarget;
-        }
-      }
-      if (renderTarget?.name) {
-        componentName = P.toKebabCase(renderTarget.name);
-      }
-    }
+    const initialVector = this.buildInitialVector(signalState);
+    const renderTarget = this.matchComponent(rootId, initialVector, signalsContext);
+    let componentName = renderTarget?.name ? P.toKebabCase(renderTarget.name) : void 0;
     if (!componentName) {
       if (root.content?.trim()) {
         return;
@@ -12165,18 +12266,7 @@ var AreRoot = class extends Are {
     if (signalsContext && !signalsContext.hasRoot(rootId)) {
       return;
     }
-    let renderTarget = signalsContext?.findComponentByVector(rootId, vector);
-    if (!renderTarget) {
-      const signalsMeta = c.meta(AreSignals);
-      const pool = signalsContext?.getComponentById(rootId);
-      const metaTarget = signalsMeta?.findComponentByVector(
-        vector,
-        pool?.length ? pool : void 0
-      );
-      if (metaTarget && (!pool?.length || pool.includes(metaTarget))) {
-        renderTarget = metaTarget;
-      }
-    }
+    const renderTarget = this.matchComponent(rootId, vector, signalsContext);
     const def = signalsContext?.getDefault(rootId);
     const componentName = renderTarget?.name ? P.toKebabCase(renderTarget.name) : def?.name ? P.toKebabCase(def.name) : void 0;
     if (!componentName) {
@@ -12212,6 +12302,63 @@ var AreRoot = class extends Are {
       child.mount();
     }
   }
+  /**
+   * Resolves the component a vector should render for the given root, mirroring
+   * the priority used everywhere in the routing system:
+   *   1. Root-specific conditions registered on AreSignalsContext.
+   *   2. The global AreSignalsMeta map, restricted to this outlet's pool.
+   *
+   * Passing the pool *into* the meta lookup is critical: without it, the first
+   * globally matching component wins and may belong to a different outlet
+   * (e.g. AisRequirementsPanel for the meta-outlet matching
+   * AisEditorCursorScope) — the pool check would then reject it and the outlet
+   * would fall back to its default, hiding a valid in-pool match (e.g.
+   * AisDiagramTab matching AisSetPrimaryDisplay).
+   *
+   * Returns `undefined` when nothing matches — callers decide whether to use a
+   * configured default, body content, or clear the outlet.
+   */
+  matchComponent(rootId, vector, signalsContext) {
+    if (!vector) return void 0;
+    let renderTarget = signalsContext?.findComponentByVector(rootId, vector);
+    if (!renderTarget) {
+      const signalsMeta = c.meta(AreSignals);
+      const pool = signalsContext?.getComponentById(rootId);
+      const metaTarget = signalsMeta?.findComponentByVector(
+        vector,
+        pool?.length ? pool : void 0,
+        rootId
+      );
+      if (metaTarget && (!pool?.length || pool.includes(metaTarget))) {
+        renderTarget = metaTarget;
+      }
+    }
+    return renderTarget;
+  }
+  /**
+   * Builds the vector used for the INITIAL render. It is seeded from the
+   * accumulated signal state (every signal dispatched on the bus so far) so a
+   * freshly-mounted outlet reflects the live application state immediately,
+   * not just on the next signal tick. The current URL route is appended when
+   * no AreRoute is already present in the state, so route-driven outlets still
+   * resolve on the very first paint (before AreRouteWatcher has dispatched).
+   */
+  buildInitialVector(signalState) {
+    const signals = [];
+    if (signalState) {
+      for (const signal of signalState.toVector()) {
+        if (signal) signals.push(signal);
+      }
+    }
+    if (!signals.some((signal) => signal instanceof AreRoute2)) {
+      try {
+        const currentRoute = AreRoute2.default();
+        if (currentRoute) signals.push(currentRoute);
+      } catch {
+      }
+    }
+    return new A_SignalVector(signals);
+  }
   /**
    * Detach a displayed child subtree from the outlet and stash it in the cache
    * for fast re-injection later. The subtree is unmounted (its scene plan is
@@ -12278,7 +12425,8 @@ __decorateClass([
   Are.Template,
   __decorateParam(0, It(te)),
   __decorateParam(1, It(A_Logger)),
-  __decorateParam(2, It(AreSignalsContext))
+  __decorateParam(2, It(AreSignalsContext)),
+  __decorateParam(3, It(A_SignalState))
 ], AreRoot.prototype, "template", 1);
 __decorateClass([
   Are.Signal,
@@ -12303,7 +12451,8 @@ var AreHTMLInstructions = {
   AddStyle: "_AreHTML_AddStyle",
   AddListener: "_AreHTML_AddListener",
   AddInterpolation: "_AreHTML_AddInterpolation",
-  AddComment: "_AreHTML_AddComment"
+  AddComment: "_AreHTML_AddComment",
+  HideElement: "_AreHTML_HideElement"
 };
 
 // src/lib/AreDirective/AreDirective.context.ts
@@ -12788,6 +12937,19 @@ var AreHTMLInterpreter = class extends AreInterpreter {
       console.log("Error removing attribute:", error);
     }
   }
+  hideElement(mutation, context) {
+    const element = context.getElementByInstruction(mutation.parent);
+    if (!element || element.nodeType !== Node.ELEMENT_NODE) return;
+    const el = element;
+    mutation.cache = el.style.display;
+    el.style.display = "none";
+  }
+  showElement(mutation, context) {
+    const element = context.getElementByInstruction(mutation.parent);
+    if (!element || element.nodeType !== Node.ELEMENT_NODE) return;
+    const el = element;
+    el.style.display = mutation.payload?.display ?? mutation.cache ?? "";
+  }
   addEventListener(mutation, context, store, syntax, directiveContext, logger) {
     const element = context.getElementByInstruction(mutation.parent);
     if (!element) {
@@ -13041,6 +13203,22 @@ __decorateClass([
   __decorateParam(0, It(te)),
   __decorateParam(1, It(AreHTMLEngineContext))
 ], AreHTMLInterpreter.prototype, "removeAttribute", 1);
+__decorateClass([
+  R4.Define({
+    description: "Hide an element by setting inline display:none, caching its previous inline display value for restoration on revert."
+  }),
+  AreInterpreter.Apply(AreHTMLInstructions.HideElement),
+  __decorateParam(0, It(te)),
+  __decorateParam(1, It(AreHTMLEngineContext))
+], AreHTMLInterpreter.prototype, "hideElement", 1);
+__decorateClass([
+  R4.Define({
+    description: "Restore an element hidden by a HideElement instruction back to its previous inline display value."
+  }),
+  AreInterpreter.Revert(AreHTMLInstructions.HideElement),
+  __decorateParam(0, It(te)),
+  __decorateParam(1, It(AreHTMLEngineContext))
+], AreHTMLInterpreter.prototype, "showElement", 1);
 __decorateClass([
   R4.Define({
     description: "Add an event listener to an HTML element based on the provided mutation instruction."

package/examples/signal-routing/dist/index.html

@@ -13,6 +13,6 @@
 <body>
   <are-root id="app"><app-shell></app-shell></are-root>
 
-  <script type="module" src="./mq7k53th-qiwy4x.js"></script>
+  <script type="module" src="./mqiwo23h-bhcolu.js"></script>
 </body>
 </html>