@radix-ng/primitives 1.0.0-beta.2 → 1.0.0-beta.3

package/types/radix-ng-primitives-navigation-menu.d.ts

@@ -1,26 +1,37 @@
 import * as _angular_core from '@angular/core';
 import { TemplateRef, Signal, ElementRef } from '@angular/core';
-import * as i1 from '@radix-ng/primitives/presence';
+import * as i1 from '@radix-ng/primitives/portal';
 import * as _radix_ng_primitives_core from '@radix-ng/primitives/core';
 import { RdxTransitionStatus, BooleanInput, NumberInput } from '@radix-ng/primitives/core';
 import * as i1$1 from '@radix-ng/primitives/popper';
 import { RdxPopperContentWrapper, RdxPopperAnchorElement } from '@radix-ng/primitives/popper';
 import * as _radix_ng_primitives_navigation_menu from '@radix-ng/primitives/navigation-menu';
 import * as i1$2 from '@radix-ng/primitives/roving-focus';
-import * as i1$3 from '@radix-ng/primitives/portal';
-import { RdxPortalContainer } from '@radix-ng/primitives/portal';
 import * as i2 from '@radix-ng/primitives/dismissable-layer';
 
 /**
- * Mounts the popup while the menu is open and waits for CSS exit keyframes before unmounting.
+ * Structural directive that teleports the navigation menu popup into a container (default
+ * `document.body`) while the menu is open, and keeps it mounted until any CSS exit `@keyframes`
+ * finishes.
  *
- * ```html
- * <ng-template rdxNavigationMenuPortalPresence>…</ng-template>
- * ```
+ * Apply it with the `*` microsyntax on the positioner —
+ * `<div *rdxNavigationMenuPortal rdxNavigationMenuPositioner>` — or as an explicit
+ * `<ng-template rdxNavigationMenuPortal>`. For a custom container use the explicit form with
+ * `[container]`.
  */
-declare class RdxNavigationMenuPortalPresence {
-    static ɵfac: _angular_core.ɵɵFactoryDeclaration<RdxNavigationMenuPortalPresence, never>;
-    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<RdxNavigationMenuPortalPresence, "ng-template[rdxNavigationMenuPortalPresence]", never, {}, {}, never, never, true, [{ directive: typeof i1.RdxPresenceDirective; inputs: {}; outputs: {}; }]>;
+declare class RdxNavigationMenuPortal {
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<RdxNavigationMenuPortal, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<RdxNavigationMenuPortal, "ng-template[rdxNavigationMenuPortal]", ["rdxNavigationMenuPortal"], {}, {}, never, never, true, [{ directive: typeof i1.RdxPortalPresence; inputs: { "container": "container"; }; outputs: {}; }]>;
+}
+/**
+ * Dev-mode guard: `rdxNavigationMenuPortal` used to be an attribute directive on a `<div>`. It is now
+ * structural, so the old `<div rdxNavigationMenuPortal>` markup would silently stop portaling — fail
+ * loudly instead.
+ */
+declare class RdxNavigationMenuPortalMisuseGuard {
+    constructor();
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<RdxNavigationMenuPortalMisuseGuard, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<RdxNavigationMenuPortalMisuseGuard, "[rdxNavigationMenuPortal]:not(ng-template)", never, {}, {}, never, never, true, never>;
 }
 
 type NavigationMenuOrientation = 'horizontal' | 'vertical';
@@ -300,19 +311,6 @@ declare class RdxNavigationMenuLink {
     static ɵdir: _angular_core.ɵɵDirectiveDeclaration<RdxNavigationMenuLink, "[rdxNavigationMenuLink]", never, { "active": { "alias": "active"; "required": false; "isSignal": true; }; "closeOnClick": { "alias": "closeOnClick"; "required": false; "isSignal": true; }; }, { "onSelect": "onSelect"; }, never, never, true, never>;
 }
 
-/**
- * Moves the navigation menu popup to a different part of the DOM (by default `document.body`).
- */
-declare class RdxNavigationMenuPortal {
-    protected readonly rootContext: _radix_ng_primitives_navigation_menu.RdxNavigationMenuRootContext;
-    /**
-     * Optional container to portal the popup into. Defaults to `document.body`.
-     */
-    readonly container: _angular_core.InputSignal<RdxPortalContainer | undefined>;
-    static ɵfac: _angular_core.ɵɵFactoryDeclaration<RdxNavigationMenuPortal, never>;
-    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<RdxNavigationMenuPortal, "[rdxNavigationMenuPortal]", never, { "container": { "alias": "container"; "required": false; "isSignal": true; }; }, {}, never, never, true, [{ directive: typeof i1$3.RdxPortal; inputs: { "container": "container"; }; outputs: {}; }]>;
-}
-
 /**
  * An optional backdrop rendered behind the popup.
  */
@@ -477,12 +475,12 @@ declare class RdxNavigationMenuViewport {
     static ɵdir: _angular_core.ɵɵDirectiveDeclaration<RdxNavigationMenuViewport, "[rdxNavigationMenuViewport]", never, { "forceMount": { "alias": "forceMount"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }
 
-declare const navigationMenuImports: (typeof RdxNavigationMenuPortalPresence)[];
+declare const navigationMenuImports: (typeof RdxNavigationMenuPortal)[];
 declare class RdxNavigationMenuModule {
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<RdxNavigationMenuModule, never>;
-    static ɵmod: _angular_core.ɵɵNgModuleDeclaration<RdxNavigationMenuModule, never, [typeof RdxNavigationMenuRoot, typeof RdxNavigationMenuList, typeof RdxNavigationMenuItem, typeof RdxNavigationMenuTrigger, typeof RdxNavigationMenuIcon, typeof RdxNavigationMenuContent, typeof RdxNavigationMenuLink, typeof RdxNavigationMenuPortal, typeof RdxNavigationMenuPortalPresence, typeof RdxNavigationMenuBackdrop, typeof RdxNavigationMenuPositioner, typeof RdxNavigationMenuPopup, typeof RdxNavigationMenuArrow, typeof RdxNavigationMenuViewport], [typeof RdxNavigationMenuRoot, typeof RdxNavigationMenuList, typeof RdxNavigationMenuItem, typeof RdxNavigationMenuTrigger, typeof RdxNavigationMenuIcon, typeof RdxNavigationMenuContent, typeof RdxNavigationMenuLink, typeof RdxNavigationMenuPortal, typeof RdxNavigationMenuPortalPresence, typeof RdxNavigationMenuBackdrop, typeof RdxNavigationMenuPositioner, typeof RdxNavigationMenuPopup, typeof RdxNavigationMenuArrow, typeof RdxNavigationMenuViewport]>;
+    static ɵmod: _angular_core.ɵɵNgModuleDeclaration<RdxNavigationMenuModule, never, [typeof RdxNavigationMenuRoot, typeof RdxNavigationMenuList, typeof RdxNavigationMenuItem, typeof RdxNavigationMenuTrigger, typeof RdxNavigationMenuIcon, typeof RdxNavigationMenuContent, typeof RdxNavigationMenuLink, typeof RdxNavigationMenuPortal, typeof RdxNavigationMenuPortalMisuseGuard, typeof RdxNavigationMenuBackdrop, typeof RdxNavigationMenuPositioner, typeof RdxNavigationMenuPopup, typeof RdxNavigationMenuArrow, typeof RdxNavigationMenuViewport], [typeof RdxNavigationMenuRoot, typeof RdxNavigationMenuList, typeof RdxNavigationMenuItem, typeof RdxNavigationMenuTrigger, typeof RdxNavigationMenuIcon, typeof RdxNavigationMenuContent, typeof RdxNavigationMenuLink, typeof RdxNavigationMenuPortal, typeof RdxNavigationMenuPortalMisuseGuard, typeof RdxNavigationMenuBackdrop, typeof RdxNavigationMenuPositioner, typeof RdxNavigationMenuPopup, typeof RdxNavigationMenuArrow, typeof RdxNavigationMenuViewport]>;
     static ɵinj: _angular_core.ɵɵInjectorDeclaration<RdxNavigationMenuModule>;
 }
 
-export { RdxNavigationMenuArrow, RdxNavigationMenuBackdrop, RdxNavigationMenuContent, RdxNavigationMenuIcon, RdxNavigationMenuItem, RdxNavigationMenuLink, RdxNavigationMenuList, RdxNavigationMenuModule, RdxNavigationMenuPopup, RdxNavigationMenuPortal, RdxNavigationMenuPortalPresence, RdxNavigationMenuPositioner, RdxNavigationMenuRoot, RdxNavigationMenuTrigger, RdxNavigationMenuViewport, injectNavigationMenuRootContext, navigationMenuImports, provideNavigationMenuRootContext };
+export { RdxNavigationMenuArrow, RdxNavigationMenuBackdrop, RdxNavigationMenuContent, RdxNavigationMenuIcon, RdxNavigationMenuItem, RdxNavigationMenuLink, RdxNavigationMenuList, RdxNavigationMenuModule, RdxNavigationMenuPopup, RdxNavigationMenuPortal, RdxNavigationMenuPortalMisuseGuard, RdxNavigationMenuPositioner, RdxNavigationMenuRoot, RdxNavigationMenuTrigger, RdxNavigationMenuViewport, injectNavigationMenuRootContext, navigationMenuImports, provideNavigationMenuRootContext };
 export type { NavigationMenuDirection, NavigationMenuOrientation, RdxNavigationMenuContentEntry, RdxNavigationMenuOpenChange, RdxNavigationMenuOpenChangeReason, RdxNavigationMenuRootContext };

package/types/radix-ng-primitives-popover.d.ts

@@ -1,22 +1,35 @@
 import * as _angular_core from '@angular/core';
 import { Signal, ElementRef } from '@angular/core';
-import * as i1 from '@radix-ng/primitives/presence';
+import * as i1 from '@radix-ng/primitives/portal';
 import * as _radix_ng_primitives_core from '@radix-ng/primitives/core';
 import { RdxTransitionStatus, BooleanInput, NumberInput } from '@radix-ng/primitives/core';
 import * as i1$1 from '@radix-ng/primitives/popper';
 import { RdxPopperContentWrapper, RdxPopperAnchorElement } from '@radix-ng/primitives/popper';
 import * as _radix_ng_primitives_popover from '@radix-ng/primitives/popover';
-import * as i1$2 from '@radix-ng/primitives/portal';
-import { RdxPortalContainer } from '@radix-ng/primitives/portal';
 import * as i2 from '@radix-ng/primitives/dismissable-layer';
 import * as i3 from '@radix-ng/primitives/focus-scope';
 
 /**
- * Mounts the portal while the popover is open and waits for CSS exit keyframes before unmounting.
+ * Structural directive that teleports the popover content into a container (default `document.body`)
+ * while the popover is open, and keeps it mounted until any CSS exit `@keyframes` finishes.
+ *
+ * Apply it with the `*` microsyntax on the positioner — `<div *rdxPopoverPortal rdxPopoverPositioner>`
+ * — or as an explicit `<ng-template rdxPopoverPortal>`. For a custom container use the explicit form
+ * with `[container]`.
+ */
+declare class RdxPopoverPortal {
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<RdxPopoverPortal, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<RdxPopoverPortal, "ng-template[rdxPopoverPortal]", ["rdxPopoverPortal"], {}, {}, never, never, true, [{ directive: typeof i1.RdxPortalPresence; inputs: { "container": "container"; }; outputs: {}; }]>;
+}
+/**
+ * Dev-mode guard: `rdxPopoverPortal` used to be an attribute directive on a `<div>`. It is now
+ * structural, so the old `<div rdxPopoverPortal>` markup would silently stop portaling — fail loudly
+ * instead.
  */
-declare class RdxPopoverPortalPresence {
-    static ɵfac: _angular_core.ɵɵFactoryDeclaration<RdxPopoverPortalPresence, never>;
-    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<RdxPopoverPortalPresence, "ng-template[rdxPopoverPortalPresence]", never, {}, {}, never, never, true, [{ directive: typeof i1.RdxPresenceDirective; inputs: {}; outputs: {}; }]>;
+declare class RdxPopoverPortalMisuseGuard {
+    constructor();
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<RdxPopoverPortalMisuseGuard, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<RdxPopoverPortalMisuseGuard, "[rdxPopoverPortal]:not(ng-template)", never, {}, {}, never, never, true, never>;
 }
 
 declare class RdxPopoverHandle<Payload = unknown> {
@@ -202,19 +215,6 @@ declare class RdxPopoverTrigger {
     static ɵdir: _angular_core.ɵɵDirectiveDeclaration<RdxPopoverTrigger, "button[rdxPopoverTrigger]", never, { "handle": { "alias": "handle"; "required": false; "isSignal": true; }; "payload": { "alias": "payload"; "required": false; "isSignal": true; }; "id": { "alias": "id"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "openOnHover": { "alias": "openOnHover"; "required": false; "isSignal": true; }; "delay": { "alias": "delay"; "required": false; "isSignal": true; }; "closeDelay": { "alias": "closeDelay"; "required": false; "isSignal": true; }; }, {}, never, never, true, [{ directive: typeof i1$1.RdxPopperAnchor; inputs: {}; outputs: {}; }]>;
 }
 
-/**
- * Moves the popover to a different part of the DOM.
- */
-declare class RdxPopoverPortal {
-    protected readonly rootContext: _radix_ng_primitives_popover.RdxPopoverRootContext;
-    /**
-     * Optional container to portal the content into. Defaults to `document.body`.
-     */
-    readonly container: _angular_core.InputSignal<RdxPortalContainer | undefined>;
-    static ɵfac: _angular_core.ɵɵFactoryDeclaration<RdxPopoverPortal, never>;
-    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<RdxPopoverPortal, "[rdxPopoverPortal]", never, { "container": { "alias": "container"; "required": false; "isSignal": true; }; }, {}, never, never, true, [{ directive: typeof i1$2.RdxPortal; inputs: { "container": "container"; }; outputs: {}; }]>;
-}
-
 /**
  * An optional backdrop rendered behind the popup.
  */
@@ -406,12 +406,12 @@ declare class RdxPopoverViewport {
     static ɵdir: _angular_core.ɵɵDirectiveDeclaration<RdxPopoverViewport, "[rdxPopoverViewport]", never, {}, {}, never, never, true, never>;
 }
 
-declare const popoverImports: (typeof RdxPopoverPortalPresence)[];
+declare const popoverImports: (typeof RdxPopoverPortal)[];
 declare class RdxPopoverModule {
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<RdxPopoverModule, never>;
-    static ɵmod: _angular_core.ɵɵNgModuleDeclaration<RdxPopoverModule, never, [typeof RdxPopoverRoot, typeof RdxPopoverTrigger, typeof RdxPopoverPortalPresence, typeof RdxPopoverPortal, typeof RdxPopoverBackdrop, typeof RdxPopoverPositioner, typeof RdxPopoverPopup, typeof RdxPopoverArrow, typeof RdxPopoverTitle, typeof RdxPopoverDescription, typeof RdxPopoverClose, typeof RdxPopoverViewport], [typeof RdxPopoverRoot, typeof RdxPopoverTrigger, typeof RdxPopoverPortalPresence, typeof RdxPopoverPortal, typeof RdxPopoverBackdrop, typeof RdxPopoverPositioner, typeof RdxPopoverPopup, typeof RdxPopoverArrow, typeof RdxPopoverTitle, typeof RdxPopoverDescription, typeof RdxPopoverClose, typeof RdxPopoverViewport]>;
+    static ɵmod: _angular_core.ɵɵNgModuleDeclaration<RdxPopoverModule, never, [typeof RdxPopoverRoot, typeof RdxPopoverTrigger, typeof RdxPopoverPortal, typeof RdxPopoverPortalMisuseGuard, typeof RdxPopoverBackdrop, typeof RdxPopoverPositioner, typeof RdxPopoverPopup, typeof RdxPopoverArrow, typeof RdxPopoverTitle, typeof RdxPopoverDescription, typeof RdxPopoverClose, typeof RdxPopoverViewport], [typeof RdxPopoverRoot, typeof RdxPopoverTrigger, typeof RdxPopoverPortal, typeof RdxPopoverPortalMisuseGuard, typeof RdxPopoverBackdrop, typeof RdxPopoverPositioner, typeof RdxPopoverPopup, typeof RdxPopoverArrow, typeof RdxPopoverTitle, typeof RdxPopoverDescription, typeof RdxPopoverClose, typeof RdxPopoverViewport]>;
     static ɵinj: _angular_core.ɵɵInjectorDeclaration<RdxPopoverModule>;
 }
 
-export { RdxPopoverArrow, RdxPopoverBackdrop, RdxPopoverClose, RdxPopoverDescription, RdxPopoverHandle, RdxPopoverModule, RdxPopoverPopup, RdxPopoverPortal, RdxPopoverPortalPresence, RdxPopoverPositioner, RdxPopoverRoot, RdxPopoverTitle, RdxPopoverTrigger, RdxPopoverViewport, createRdxPopoverHandle, injectRdxPopoverRootContext, popoverImports, provideRdxPopoverRootContext };
+export { RdxPopoverArrow, RdxPopoverBackdrop, RdxPopoverClose, RdxPopoverDescription, RdxPopoverHandle, RdxPopoverModule, RdxPopoverPopup, RdxPopoverPortal, RdxPopoverPortalMisuseGuard, RdxPopoverPositioner, RdxPopoverRoot, RdxPopoverTitle, RdxPopoverTrigger, RdxPopoverViewport, createRdxPopoverHandle, injectRdxPopoverRootContext, popoverImports, provideRdxPopoverRootContext };
 export type { RdxPopoverModal, RdxPopoverOpenChange, RdxPopoverOpenChangeReason, RdxPopoverRootContext, RdxPopoverTransitionStatus };

package/types/radix-ng-primitives-popper.d.ts

@@ -18,6 +18,12 @@ declare class RdxPopper {
 }
 
 declare class RdxPopperContent {
+    /**
+     * Optional so the directive can be composed onto a content part that is also used outside Popper
+     * positioning (e.g. select's `item-aligned` mode, where there is no `RdxPopperContentWrapper`
+     * ancestor). With no wrapper the `data-side` / `data-align` bindings and the animation guard
+     * simply no-op.
+     */
     protected readonly popperContentWrapper: {
         placedSide: _angular_core.Signal<"top" | "right" | "bottom" | "left" | undefined>;
         placedAlign: _angular_core.Signal<"start" | "center" | "end" | undefined>;
@@ -26,7 +32,7 @@ declare class RdxPopperContent {
         shouldHideArrow: _angular_core.Signal<boolean>;
         isPositioned: _angular_core.Signal<boolean>;
         anchorHidden: _angular_core.Signal<boolean>;
-    };
+    } | null;
     /**
      * if the PopperContent hasn't been placed yet (not all measurements done)
      * we prevent animations so that users's animation don't kick in too early referring wrong sides

package/types/radix-ng-primitives-portal.d.ts

@@ -1,11 +1,18 @@
-import * as _angular_core from '@angular/core';
+import * as i0 from '@angular/core';
 import { ElementRef } from '@angular/core';
 
 /**
- * A target container for the portal. Accepts an `ElementRef`, a native element, or a CSS selector
+ * A target container for a portal. Accepts an `ElementRef`, a native element, or a CSS selector
  * resolved against the document.
  */
 type RdxPortalContainer = ElementRef<HTMLElement> | HTMLElement | string;
+/**
+ * Resolve a {@link RdxPortalContainer} to a concrete element. Returns `null` when nothing usable is
+ * provided (a missing container, a selector matching nothing, or a non-element value), so callers can
+ * fall back to `document.body`. Shared by `RdxPortal` and `RdxPortalPresence`.
+ */
+declare function resolvePortalContainer(container: RdxPortalContainer | undefined, document: Document | null): HTMLElement | null;
+
 declare class RdxPortal {
     private readonly elementRef;
     private readonly platformId;
@@ -15,16 +22,54 @@ declare class RdxPortal {
      * Specify a container to portal the content into. Can be an `ElementRef`, a native element, or a
      * CSS selector. Defaults to `document.body` when not set (or when a selector matches nothing).
      */
-    readonly container: _angular_core.InputSignal<RdxPortalContainer | undefined>;
+    readonly container: i0.InputSignal<RdxPortalContainer | undefined>;
+    private readonly _computedContainer;
+    readonly computedContainer: i0.Signal<RdxPortalContainer | undefined>;
+    private readonly elementContainer;
+    constructor();
+    setContainer(container: RdxPortalContainer): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<RdxPortal, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<RdxPortal, "[rdxPortal]", ["rdxPortal"], { "container": { "alias": "container"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+/**
+ * Structural directive merging what `RdxPortal` + `RdxPresenceDirective` did as a pair: it mounts its
+ * template while `present()` (from {@link RDX_PRESENCE_CONTEXT}) is `true`, **relocates every root
+ * node into a portal container** (default `document.body`), and on close runs the presence exit state
+ * machine — keeping the content mounted until every running CSS exit `@keyframes` on any root node
+ * finishes.
+ *
+ * Unlike `RdxPortal`, it adds **no wrapper element**: the template's root nodes become direct children
+ * of the container. Use the `*` microsyntax for the common single-root case
+ * (`<div *rdxXxxPortal rdxXxxPositioner>`) or the explicit `<ng-template rdxXxxPortal>` form for a
+ * custom container or multiple root nodes (e.g. a dialog backdrop + popup).
+ *
+ * SSR: on the server the view renders in place and is never relocated; after hydration the relocation
+ * effect moves the nodes into the container (same browser-guarded split `RdxPortal` uses).
+ */
+declare class RdxPortalPresence {
+    private readonly viewContainerRef;
+    private readonly templateRef;
+    private readonly document;
+    private readonly isBrowser;
+    /**
+     * Container to portal the content into. Can be an `ElementRef`, a native element, or a CSS
+     * selector. Defaults to `document.body` (or when a selector matches nothing).
+     */
+    readonly container: i0.InputSignal<RdxPortalContainer | undefined>;
     private readonly _computedContainer;
-    readonly computedContainer: _angular_core.Signal<RdxPortalContainer | undefined>;
     private readonly elementContainer;
+    /** The live view's root nodes, exposed as a signal so the relocation effect re-runs on (re)mount. */
+    private readonly mountedNodes;
+    private viewRef;
     constructor();
+    /** Imperatively override the portal container (parity with `RdxPortal.setContainer`). */
     setContainer(container: RdxPortalContainer): void;
-    private resolveContainer;
-    static ɵfac: _angular_core.ɵɵFactoryDeclaration<RdxPortal, never>;
-    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<RdxPortal, "[rdxPortal]", ["rdxPortal"], { "container": { "alias": "container"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+    private mountView;
+    private destroyView;
+    static ɵfac: i0.ɵɵFactoryDeclaration<RdxPortalPresence, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<RdxPortalPresence, never, never, { "container": { "alias": "container"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }
 
-export { RdxPortal };
+export { RdxPortal, RdxPortalPresence, resolvePortalContainer };
 export type { RdxPortalContainer };

package/types/radix-ng-primitives-presence.d.ts

@@ -1,5 +1,96 @@
 import * as i0 from '@angular/core';
-import { InjectionToken, Signal, Provider } from '@angular/core';
+import { Signal, Injector, InjectionToken, Provider } from '@angular/core';
+
+/**
+ * Operations the host directive supplies to {@link PresenceMachine}. The machine owns *when* the
+ * view is mounted/unmounted (the state transitions and exit-animation suspension); the host owns
+ * *how* — `RdxPresenceDirective` simply creates the embedded view in place, while `RdxPortalPresence`
+ * additionally relocates its root nodes into a portal container.
+ */
+interface PresenceMachineHost {
+    /** Reactive `present` flag driving the machine. */
+    readonly present: Signal<boolean>;
+    /** Whether we are running in a browser (animation/computed-style logic is skipped on the server). */
+    readonly isBrowser: boolean;
+    /** Injection context for the internal `effect` / `afterNextRender`. */
+    readonly injector: Injector;
+    /**
+     * Create (and, for the portal, relocate) the view. Returns the root `HTMLElement` nodes whose
+     * exit animations should suspend the unmount. For a single-root template this is one element —
+     * identical to the previous single-node behavior; dialog-shaped templates return backdrop + popup.
+     */
+    mountView(): HTMLElement[];
+    /** Destroy the view (Angular removes the nodes from wherever they currently live). */
+    destroyView(): void;
+}
+/**
+ * Reusable presence state machine extracted from `RdxPresenceDirective`. It keeps content mounted
+ * while a CSS exit animation runs anywhere inside the template — a `@keyframes` **or** a
+ * `transition` (`data-ending-style`), on a watched root **or any of its descendants** — and unmounts
+ * only once every exit animation started by the close has finished. With no exit animation it
+ * unmounts immediately. For a single watched node and a root-level keyframe this reduces exactly to
+ * the original `RdxPresenceDirective` behavior.
+ *
+ * Detection (ADR 0011) uses the Web Animations API: when `present()` flips `false` we snapshot a
+ * close timestamp, and after the next render collect `node.getAnimations({ subtree: true })`, keeping
+ * only animations that are running/pending and were *started by* the close (`startTime` null or
+ * `>= closeTimestamp`). The view stays mounted until all of their `finished` promises settle, bounded
+ * by a duration-based safety net. The legacy root-level computed-`animationName` check and the
+ * `animationstart`/`animationend` listeners are kept as an additional acceptor — they drive the
+ * zoneless jsdom suites (where `getAnimations` is absent) and cost nothing in a real browser.
+ */
+declare class PresenceMachine {
+    private readonly host;
+    private state;
+    private prevPresent;
+    /** Root nodes currently watched for exit animations (set on mount). */
+    private nodes;
+    /** Last-seen computed `animationName` per node, used to detect a *fresh* root exit animation. */
+    private readonly prevAnimationNames;
+    /** Root nodes whose exit animation the event path is still waiting on (jsdom / root-keyframe). */
+    private readonly pendingExits;
+    private removeListeners;
+    /**
+     * Timeline time captured the moment `present` flipped `false`, on the same clock as
+     * `Animation.startTime`. Animations started at or after it are the exit animations.
+     */
+    private closeTimestamp;
+    /**
+     * Monotonic counter bumped on every mount/unmount transition. A suspended exit captures it and
+     * its `finished`/safety-net resolution is ignored if it changed in the meantime (re-open or a
+     * second close), so a stale promise can never tear down a freshly-reopened view.
+     */
+    private exitVersion;
+    /** True while a WAAPI `finished`-promise wait owns completion; gates the event path off. */
+    private waapiPending;
+    private safetyTimer;
+    constructor(host: PresenceMachineHost);
+    /** Tear the machine down — destroys the view. Call from the host's `DestroyRef`. */
+    dispose(): void;
+    /** Decides whether to suspend the unmount for an exit animation (port of Radix' logic). */
+    private evaluateExit;
+    /**
+     * Running/pending animations across the watched subtrees that were *started by* the close.
+     * Pre-existing animations (an infinite spinner, a settled enter) have an earlier `startTime`
+     * and must not delay the unmount.
+     */
+    private collectExitAnimations;
+    /**
+     * Force-completes the exit shortly after the longest declared duration, in case a `finished`
+     * promise never settles. Measures the animated targets (falling back to the roots).
+     */
+    private armSafetyNet;
+    /** Settle a WAAPI/safety-net exit wait, ignoring it if a newer mount/unmount superseded it. */
+    private finishExit;
+    private clearSafetyNet;
+    private send;
+    private mount;
+    private unmount;
+    private addAnimationListeners;
+    private getAnimationName;
+    /** Current timeline time on the same clock as `Animation.startTime` (ms), or 0 if unavailable. */
+    private now;
+}
 
 /**
  * Context interface for RdxPresence directive
@@ -25,31 +116,21 @@ declare function provideRdxPresenceContext(contextFactory: () => RdxPresenceCont
  * Unlike a plain `*ngIf`, it keeps the content mounted while a CSS exit animation
  * (`@keyframes` applied for the closed state) is running, and unmounts it only once that
  * animation finishes. If the content has no exit animation, it unmounts immediately.
+ *
+ * The mount/unmount-with-exit logic lives in the shared {@link PresenceMachine}; this directive just
+ * creates the embedded view in place (`RdxPortalPresence` reuses the same machine and additionally
+ * relocates the view into a portal container).
  */
 declare class RdxPresenceDirective {
-    private readonly context;
     private readonly viewContainerRef;
     private readonly templateRef;
-    private readonly injector;
-    private readonly isBrowser;
     private viewRef;
-    private node;
-    private removeListeners;
-    private state;
-    private prevPresent;
-    private prevAnimationName;
     constructor();
-    /** Decides whether to suspend the unmount for an exit animation (port of Radix' logic). */
-    private evaluateExit;
-    private send;
     private mountView;
     private destroyView;
-    private addAnimationListeners;
-    private getComputedStyles;
-    private getAnimationName;
     static ɵfac: i0.ɵɵFactoryDeclaration<RdxPresenceDirective, never>;
     static ɵdir: i0.ɵɵDirectiveDeclaration<RdxPresenceDirective, never, never, {}, {}, never, never, true, never>;
 }
 
-export { RDX_PRESENCE_CONTEXT, RdxPresenceDirective, provideRdxPresenceContext };
-export type { RdxPresenceContext };
+export { PresenceMachine, RDX_PRESENCE_CONTEXT, RdxPresenceDirective, provideRdxPresenceContext };
+export type { PresenceMachineHost, RdxPresenceContext };

package/types/radix-ng-primitives-preview-card.d.ts

@@ -1,21 +1,35 @@
 import * as _angular_core from '@angular/core';
 import { Signal, ElementRef } from '@angular/core';
-import * as i1 from '@radix-ng/primitives/presence';
+import * as i1 from '@radix-ng/primitives/portal';
 import * as _radix_ng_primitives_core from '@radix-ng/primitives/core';
 import { BooleanInput, NumberInput } from '@radix-ng/primitives/core';
 import * as i1$1 from '@radix-ng/primitives/popper';
 import { RdxPopperContentWrapper, RdxPopperAnchorElement } from '@radix-ng/primitives/popper';
 import * as _radix_ng_primitives_preview_card from '@radix-ng/primitives/preview-card';
-import * as i1$2 from '@radix-ng/primitives/portal';
-import { RdxPortalContainer } from '@radix-ng/primitives/portal';
 import * as i2 from '@radix-ng/primitives/dismissable-layer';
 
 /**
- * Mounts the portal while the preview-card is open and waits for CSS exit keyframes before unmounting.
+ * Structural directive that teleports the preview-card content into a container (default
+ * `document.body`) while the card is open, and keeps it mounted until any CSS exit `@keyframes`
+ * finishes.
+ *
+ * Apply it with the `*` microsyntax on the positioner —
+ * `<div *rdxPreviewCardPortal rdxPreviewCardPositioner>` — or as an explicit
+ * `<ng-template rdxPreviewCardPortal>`. For a custom container use the explicit form with `[container]`.
+ */
+declare class RdxPreviewCardPortal {
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<RdxPreviewCardPortal, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<RdxPreviewCardPortal, "ng-template[rdxPreviewCardPortal]", ["rdxPreviewCardPortal"], {}, {}, never, never, true, [{ directive: typeof i1.RdxPortalPresence; inputs: { "container": "container"; }; outputs: {}; }]>;
+}
+/**
+ * Dev-mode guard: `rdxPreviewCardPortal` used to be an attribute directive on a `<div>`. It is now
+ * structural, so the old `<div rdxPreviewCardPortal>` markup would silently stop portaling — fail
+ * loudly instead.
  */
-declare class RdxPreviewCardPortalPresence {
-    static ɵfac: _angular_core.ɵɵFactoryDeclaration<RdxPreviewCardPortalPresence, never>;
-    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<RdxPreviewCardPortalPresence, "ng-template[rdxPreviewCardPortalPresence]", never, {}, {}, never, never, true, [{ directive: typeof i1.RdxPresenceDirective; inputs: {}; outputs: {}; }]>;
+declare class RdxPreviewCardPortalMisuseGuard {
+    constructor();
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<RdxPreviewCardPortalMisuseGuard, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<RdxPreviewCardPortalMisuseGuard, "[rdxPreviewCardPortal]:not(ng-template)", never, {}, {}, never, never, true, never>;
 }
 
 declare class RdxPreviewCardHandle<Payload = unknown> {
@@ -185,19 +199,6 @@ declare class RdxPreviewCardTrigger {
     static ɵdir: _angular_core.ɵɵDirectiveDeclaration<RdxPreviewCardTrigger, "[rdxPreviewCardTrigger]", never, { "handle": { "alias": "handle"; "required": false; "isSignal": true; }; "payload": { "alias": "payload"; "required": false; "isSignal": true; }; "id": { "alias": "id"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "delay": { "alias": "delay"; "required": false; "isSignal": true; }; "closeDelay": { "alias": "closeDelay"; "required": false; "isSignal": true; }; }, {}, never, never, true, [{ directive: typeof i1$1.RdxPopperAnchor; inputs: {}; outputs: {}; }]>;
 }
 
-/**
- * Moves the preview-card to a different part of the DOM.
- */
-declare class RdxPreviewCardPortal {
-    protected readonly rootContext: _radix_ng_primitives_preview_card.RdxPreviewCardRootContext;
-    /**
-     * Optional container to portal the content into. Defaults to `document.body`.
-     */
-    readonly container: _angular_core.InputSignal<RdxPortalContainer | undefined>;
-    static ɵfac: _angular_core.ɵɵFactoryDeclaration<RdxPreviewCardPortal, never>;
-    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<RdxPreviewCardPortal, "[rdxPreviewCardPortal]", never, { "container": { "alias": "container"; "required": false; "isSignal": true; }; }, {}, never, never, true, [{ directive: typeof i1$2.RdxPortal; inputs: { "container": "container"; }; outputs: {}; }]>;
-}
-
 /**
  * An optional backdrop rendered behind the popup.
  */
@@ -348,12 +349,12 @@ declare class RdxPreviewCardViewport {
     static ɵdir: _angular_core.ɵɵDirectiveDeclaration<RdxPreviewCardViewport, "[rdxPreviewCardViewport]", never, {}, {}, never, never, true, never>;
 }
 
-declare const previewCardImports: (typeof RdxPreviewCardPortalPresence)[];
+declare const previewCardImports: (typeof RdxPreviewCardPortal)[];
 declare class RdxPreviewCardModule {
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<RdxPreviewCardModule, never>;
-    static ɵmod: _angular_core.ɵɵNgModuleDeclaration<RdxPreviewCardModule, never, [typeof RdxPreviewCardRoot, typeof RdxPreviewCardTrigger, typeof RdxPreviewCardPortalPresence, typeof RdxPreviewCardPortal, typeof RdxPreviewCardBackdrop, typeof RdxPreviewCardPositioner, typeof RdxPreviewCardPopup, typeof RdxPreviewCardArrow, typeof RdxPreviewCardViewport], [typeof RdxPreviewCardRoot, typeof RdxPreviewCardTrigger, typeof RdxPreviewCardPortalPresence, typeof RdxPreviewCardPortal, typeof RdxPreviewCardBackdrop, typeof RdxPreviewCardPositioner, typeof RdxPreviewCardPopup, typeof RdxPreviewCardArrow, typeof RdxPreviewCardViewport]>;
+    static ɵmod: _angular_core.ɵɵNgModuleDeclaration<RdxPreviewCardModule, never, [typeof RdxPreviewCardRoot, typeof RdxPreviewCardTrigger, typeof RdxPreviewCardPortal, typeof RdxPreviewCardPortalMisuseGuard, typeof RdxPreviewCardBackdrop, typeof RdxPreviewCardPositioner, typeof RdxPreviewCardPopup, typeof RdxPreviewCardArrow, typeof RdxPreviewCardViewport], [typeof RdxPreviewCardRoot, typeof RdxPreviewCardTrigger, typeof RdxPreviewCardPortal, typeof RdxPreviewCardPortalMisuseGuard, typeof RdxPreviewCardBackdrop, typeof RdxPreviewCardPositioner, typeof RdxPreviewCardPopup, typeof RdxPreviewCardArrow, typeof RdxPreviewCardViewport]>;
     static ɵinj: _angular_core.ɵɵInjectorDeclaration<RdxPreviewCardModule>;
 }
 
-export { RdxPreviewCardArrow, RdxPreviewCardBackdrop, RdxPreviewCardHandle, RdxPreviewCardModule, RdxPreviewCardPopup, RdxPreviewCardPortal, RdxPreviewCardPortalPresence, RdxPreviewCardPositioner, RdxPreviewCardRoot, RdxPreviewCardTrigger, RdxPreviewCardViewport, createRdxPreviewCardHandle, injectRdxPreviewCardRootContext, previewCardImports, provideRdxPreviewCardRootContext };
+export { RdxPreviewCardArrow, RdxPreviewCardBackdrop, RdxPreviewCardHandle, RdxPreviewCardModule, RdxPreviewCardPopup, RdxPreviewCardPortal, RdxPreviewCardPortalMisuseGuard, RdxPreviewCardPositioner, RdxPreviewCardRoot, RdxPreviewCardTrigger, RdxPreviewCardViewport, createRdxPreviewCardHandle, injectRdxPreviewCardRootContext, previewCardImports, provideRdxPreviewCardRootContext };
 export type { RdxPreviewCardOpenChange, RdxPreviewCardOpenChangeReason, RdxPreviewCardRootContext, RdxPreviewCardTransitionStatus };