fix(f-canvas): scope layer ordering to its own containers

The first cut of `[fLayers]` made every layer container `position: absolute`
with a `[style.z-index]` binding, which changed the containing block for the
absolutely-positioned `.f-node` / `.f-group` descendants and broke positioning
across many examples and consumer apps.

Switch the strategy: keep the original SCSS shape (only `.f-connections-container`
stays `position: absolute`, as it has been since before v18.6) and add
`isolation: isolate` to each of the three containers so the per-element
z-indices defined in `f-flow.component.scss` (`.f-node` 4, `.f-connection-content` 3,
`.f-group` 1) stay scoped to their own layer instead of competing across layers.
The visible stacking order between the three layers is now driven by the order
the containers appear in the DOM — the template iterates `resolvedLayers()` via
`@for` / `@switch` — not by per-container z-index. The `groupsZIndex` /
`connectionsZIndex` / `nodesZIndex` computeds and the `[style.z-index]` bindings
are removed.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

Author: siarheihuzarevich

libs/f-flow/src/f-canvas/f-canvas.component.html

@@ -1,14 +1,23 @@
 <ng-container>
-  <div #fGroupsContainer class="f-groups-container" [style.z-index]="groupsZIndex()">
-    <ng-content select="[fGroup], [fGroups]" />
-  </div>
-  <div #fConnectionsContainer class="f-connections-container" [style.z-index]="connectionsZIndex()">
-    <ng-content select="f-snap-connection" />
-    <ng-content select="f-connection, [fConnections]" />
-    <ng-content select="f-connection-for-create" />
-  </div>
-
-  <div #fNodesContainer class="f-nodes-container" [style.z-index]="nodesZIndex()">
-    <ng-content select="[fNode], [fNodes]" />
-  </div>
+  @for (layer of resolvedLayers(); track layer) {
+    @switch (layer) {
+      @case ('groups') {
+        <div #fGroupsContainer class="f-groups-container">
+          <ng-content select="[fGroup], [fGroups]" />
+        </div>
+      }
+      @case ('connections') {
+        <div #fConnectionsContainer class="f-connections-container">
+          <ng-content select="f-snap-connection" />
+          <ng-content select="f-connection, [fConnections]" />
+          <ng-content select="f-connection-for-create" />
+        </div>
+      }
+      @case ('nodes') {
+        <div #fNodesContainer class="f-nodes-container">
+          <ng-content select="[fNode], [fNodes]" />
+        </div>
+      }
+    }
+  }
 </ng-container>

libs/f-flow/src/f-canvas/f-canvas.component.scss

@@ -14,11 +14,21 @@
   }
 }
 
-// Each layer container is absolutely positioned so its [style.z-index]
-// (set by FCanvasComponent based on `fLayers` / `withFCanvas({ layers })`)
-// participates in stacking and creates a context for its descendants.
+// Each layer container is its own stacking context (`isolation: isolate`)
+// so the per-element z-indices set in `f-flow.component.scss` on `.f-node`,
+// `.f-group`, and `.f-connection-content` stay scoped to their layer
+// instead of competing across layers. The actual stacking order between
+// the three layers is controlled by their DOM order in the template
+// (driven by `[fLayers]` / `withFCanvas({ layers })`), not by z-index.
 .f-groups-container,
 .f-connections-container,
 .f-nodes-container {
+  isolation: isolate;
+}
+
+// Connections-container stays absolutely positioned to preserve the
+// containing block its descendant SVGs rely on (matches every release
+// before v18.6).
+.f-connections-container {
   position: absolute;
 }

libs/f-flow/src/f-canvas/f-canvas.component.ts

@@ -93,6 +93,12 @@ export class FCanvasComponent extends FCanvasBase implements OnInit, OnDestroy {
    */
   public readonly fLayers = input<EFCanvasLayer[] | undefined>(undefined);
 
+  /**
+   * Final layer order rendered in the template. The three sibling
+   * containers are emitted in this order, which (combined with
+   * `isolation: isolate` on each of them) is what visually stacks
+   * groups, connections, and nodes — no per-container z-index involved.
+   */
   protected readonly resolvedLayers = computed<EFCanvasLayer[]>(() => {
     const fromInput = this.fLayers();
     if (fromInput && fromInput.length > 0) {
@@ -105,16 +111,6 @@ export class FCanvasComponent extends FCanvasBase implements OnInit, OnDestroy {
     return [...F_DEFAULT_LAYER_ORDER];
   });
 
-  protected readonly groupsZIndex = computed(() => this._zIndexFor(EFCanvasLayer.GROUPS));
-  protected readonly connectionsZIndex = computed(() => this._zIndexFor(EFCanvasLayer.CONNECTIONS));
-  protected readonly nodesZIndex = computed(() => this._zIndexFor(EFCanvasLayer.NODES));
-
-  private _zIndexFor(layer: EFCanvasLayer): number {
-    // +1 so every layer has a non-zero z-index and creates a real
-    // stacking context for its descendants.
-    return this.resolvedLayers().indexOf(layer) + 1;
-  }
-
   public override fGroupsContainer =
     viewChild.required<ElementRef<HTMLElement>>('fGroupsContainer');
   public override fNodesContainer = viewChild.required<ElementRef<HTMLElement>>('fNodesContainer');