@tolle_/tolle-ui 18.2.30 → 18.3.0

package/fesm2022/tolle-ui.mjs

@@ -6310,12 +6310,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                 args: [AccordionItemComponent]
             }] } });
 
+/**
+ * Safety net if the exit animation's `animationend` never fires — reduced
+ * motion, no matching keyframe, or a panel that never rendered — so a modal
+ * can never get stuck open forever.
+ */
+const CLOSE_FALLBACK_MS$1 = 300;
 class ModalRef {
     overlay;
     modal;
     stack;
     _afterClosed$ = new Subject();
     afterClosed$ = this._afterClosed$.asObservable();
+    _closingSubject = new BehaviorSubject(false);
+    /** True once `close()` has been called — drives the panel's exit animation. */
+    closing$ = this._closingSubject.asObservable();
     constructor(overlay, modal, stack) {
         this.overlay = overlay;
         this.modal = modal;
@@ -6329,22 +6338,46 @@ class ModalRef {
         });
     }
     /**
-     * Closes the modal instantly.
+     * Closes the modal. Signals the panel and backdrop to play their exit
+     * animation, then tears down the overlay once it finishes (or after
+     * `CLOSE_FALLBACK_MS`, whichever comes first).
      * @param result Data to pass back to the caller
      */
     close(result) {
-        this._afterClosed$.next(result);
-        this._afterClosed$.complete();
-        this.overlay.dispose(); // Instant disposal (No animation timer)
-        this.stack.unregister(this);
+        if (this._closingSubject.value)
+            return;
+        this._closingSubject.next(true);
+        this.overlay.backdropElement?.setAttribute('data-state', 'closed');
+        let finished = false;
+        const finish = () => {
+            if (finished)
+                return;
+            finished = true;
+            this._afterClosed$.next(result);
+            this._afterClosed$.complete();
+            this.overlay.dispose();
+            this.stack.unregister(this);
+        };
+        const panel = this.overlay.overlayElement.querySelector('[data-state]');
+        if (panel) {
+            panel.addEventListener('animationend', finish, { once: true });
+            setTimeout(finish, CLOSE_FALLBACK_MS$1);
+        }
+        else {
+            finish();
+        }
     }
 }
 
 class ModalComponent {
     ref;
+    cdr = inject(ChangeDetectorRef);
+    subscription = new Subscription();
     contentType = 'string';
     content;
     modalClasses = '';
+    /** True while the exit animation plays, just before the overlay is torn down. */
+    closing = false;
     /** Stable, per-instance ids used to wire dialog ARIA relationships. */
     _uid = Math.random().toString(36).substr(2, 9);
     titleId = `tolle-modal-title-${this._uid}`;
@@ -6356,16 +6389,21 @@ class ModalComponent {
         this.content = this.ref.modal.content;
         this.modalClasses = this.getModalSizeCss();
         this.determineContentType();
+        this.subscription.add(this.ref.closing$.subscribe((closing) => {
+            this.closing = closing;
+            this.cdr.markForCheck();
+        }));
     }
-    /** Whether the auto-rendered header (title and/or close button) is shown. */
-    get hasHeader() {
-        return !!(this.ref.modal.showCloseButton || this.ref.modal.title);
+    ngOnDestroy() {
+        this.subscription.unsubscribe();
     }
     getModalSizeCss() {
         const { size } = this.ref.modal;
         return cn(
         // Surface: overlay card that never exceeds the viewport (header stays, body scrolls).
-        'bg-background text-foreground border border-border shadow-lg relative flex flex-col w-full mx-auto', size === 'fullscreen' ? 'h-screen w-screen rounded-none' : 'rounded-lg max-h-[85vh]', 
+        'relative flex w-full mx-auto flex-col gap-4 rounded-lg border border-border bg-background p-6 text-foreground shadow-lg duration-200', 
+        // Enter/exit animation, driven by `data-state` (see `closing` above).
+        'data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95', 'data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95', size === 'fullscreen' ? 'h-screen w-screen rounded-none' : 'max-h-[85vh]', 
         // Sizing scale with explicit max-widths
         size === 'xs' && 'max-w-[320px]', size === 'sm' && 'max-w-[425px]', size === 'default' && 'max-w-[512px]', size === 'lg' && 'max-w-[1024px]', size === 'xl' && 'max-w-[1280px]');
     }
@@ -6383,6 +6421,7 @@ class ModalComponent {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ModalComponent, deps: [{ token: ModalRef }], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: ModalComponent, isStandalone: true, selector: "tolle-modal", ngImport: i0, template: `
     <div [class]="modalClasses" class="pointer-events-auto"
+      [attr.data-state]="closing ? 'closed' : 'open'"
       role="dialog"
       aria-modal="true"
       [attr.aria-labelledby]="ref.modal.title ? titleId : null"
@@ -6390,25 +6429,26 @@ class ModalComponent {
       cdkTrapFocus cdkTrapFocusAutoCapture
       (mousedown)="$event.stopPropagation()">
 
+      <button
+        *ngIf="ref.modal.showCloseButton"
+        type="button"
+        (click)="ref.close()"
+        aria-label="Close"
+        class="absolute right-4 top-4 grid h-6 w-6 place-items-center rounded-sm text-muted-foreground opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2">
+        <i class="ri-close-line text-base" aria-hidden="true"></i>
+      </button>
+
       <!-- Header -->
-      <div *ngIf="hasHeader" class="flex shrink-0 items-start justify-between gap-4 px-6 pt-6 pb-4">
-        <h2 *ngIf="ref.modal.title" [id]="titleId" class="text-lg font-semibold leading-none tracking-tight text-foreground">
+      <div *ngIf="ref.modal.title" class="flex shrink-0 flex-col gap-1.5 pr-8 text-center sm:text-left">
+        <h2 [id]="titleId" class="text-lg font-semibold leading-none tracking-tight text-foreground">
           {{ ref.modal.title }}
         </h2>
-        <button
-          *ngIf="ref.modal.showCloseButton"
-          type="button"
-          (click)="ref.close()"
-          aria-label="Close"
-          class="-mr-2 -mt-2 ml-auto grid h-8 w-8 shrink-0 place-items-center rounded-md text-muted-foreground transition-colors hover:bg-accent hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring">
-          <i class="ri-close-line text-xl"></i>
-        </button>
       </div>
 
       <!-- Body -->
       <div class="min-h-0 flex-1 overflow-y-auto">
         <ng-container [ngSwitch]="contentType">
-          <p *ngSwitchCase="'string'" [id]="descId" [class]="hasHeader ? 'px-6 pb-6 text-sm leading-relaxed text-muted-foreground' : 'p-6 text-sm leading-relaxed text-muted-foreground'">{{ content }}</p>
+          <p *ngSwitchCase="'string'" [id]="descId" class="text-sm leading-relaxed text-muted-foreground">{{ content }}</p>
 
           <ng-container *ngSwitchCase="'template'">
             <ng-container *ngTemplateOutlet="asTemplate; context: ref.modal.context"></ng-container>
@@ -6426,6 +6466,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
             type: Component,
             args: [{ selector: 'tolle-modal', standalone: true, imports: [CommonModule, A11yModule], template: `
     <div [class]="modalClasses" class="pointer-events-auto"
+      [attr.data-state]="closing ? 'closed' : 'open'"
       role="dialog"
       aria-modal="true"
       [attr.aria-labelledby]="ref.modal.title ? titleId : null"
@@ -6433,25 +6474,26 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
       cdkTrapFocus cdkTrapFocusAutoCapture
       (mousedown)="$event.stopPropagation()">
 
+      <button
+        *ngIf="ref.modal.showCloseButton"
+        type="button"
+        (click)="ref.close()"
+        aria-label="Close"
+        class="absolute right-4 top-4 grid h-6 w-6 place-items-center rounded-sm text-muted-foreground opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2">
+        <i class="ri-close-line text-base" aria-hidden="true"></i>
+      </button>
+
       <!-- Header -->
-      <div *ngIf="hasHeader" class="flex shrink-0 items-start justify-between gap-4 px-6 pt-6 pb-4">
-        <h2 *ngIf="ref.modal.title" [id]="titleId" class="text-lg font-semibold leading-none tracking-tight text-foreground">
+      <div *ngIf="ref.modal.title" class="flex shrink-0 flex-col gap-1.5 pr-8 text-center sm:text-left">
+        <h2 [id]="titleId" class="text-lg font-semibold leading-none tracking-tight text-foreground">
           {{ ref.modal.title }}
         </h2>
-        <button
-          *ngIf="ref.modal.showCloseButton"
-          type="button"
-          (click)="ref.close()"
-          aria-label="Close"
-          class="-mr-2 -mt-2 ml-auto grid h-8 w-8 shrink-0 place-items-center rounded-md text-muted-foreground transition-colors hover:bg-accent hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring">
-          <i class="ri-close-line text-xl"></i>
-        </button>
       </div>
 
       <!-- Body -->
       <div class="min-h-0 flex-1 overflow-y-auto">
         <ng-container [ngSwitch]="contentType">
-          <p *ngSwitchCase="'string'" [id]="descId" [class]="hasHeader ? 'px-6 pb-6 text-sm leading-relaxed text-muted-foreground' : 'p-6 text-sm leading-relaxed text-muted-foreground'">{{ content }}</p>
+          <p *ngSwitchCase="'string'" [id]="descId" class="text-sm leading-relaxed text-muted-foreground">{{ content }}</p>
 
           <ng-container *ngSwitchCase="'template'">
             <ng-container *ngTemplateOutlet="asTemplate; context: ref.modal.context"></ng-container>
@@ -6490,6 +6532,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
             args: [{ providedIn: 'root' }]
         }] });
 
+/**
+ * `open()` always receives a plain object literal, never a `new Modal()`
+ * instance, so a class field initializer would never actually apply — these
+ * are the real defaults, merged in explicitly below.
+ */
+const MODAL_DEFAULTS = {
+    size: 'default',
+    backdropClose: true,
+    showCloseButton: true,
+};
 class ModalService {
     overlay;
     injector;
@@ -6500,12 +6552,13 @@ class ModalService {
         this.stack = stack;
     }
     open(config) {
+        const resolved = { ...MODAL_DEFAULTS, ...config };
         // 0. Remember what was focused so we can restore it after the modal closes.
         const previouslyFocused = document.activeElement;
         // 1. Create the Overlay (DOM placeholder)
         const overlayRef = this.createOverlay();
         // 2. Create the Controller (Ref)
-        const modalRef = new ModalRef(overlayRef, config, this.stack);
+        const modalRef = new ModalRef(overlayRef, resolved, this.stack);
         // 3. Create Injector to allow the Component to access the Ref
         const injector = Injector.create({
             parent: this.injector,
@@ -6514,7 +6567,7 @@ class ModalService {
         // Escape-to-close: mirror the backdrop close path, but only for
         // non-blocking modals (backdropClose !== false).
         overlayRef.keydownEvents().subscribe((event) => {
-            if (event.key === 'Escape' && config.backdropClose !== false) {
+            if (event.key === 'Escape' && resolved.backdropClose) {
                 event.preventDefault();
                 modalRef.close();
             }
@@ -6524,6 +6577,9 @@ class ModalService {
         // 4. Attach the UI Component to the Overlay
         const portal = new ComponentPortal(ModalComponent, null, injector);
         overlayRef.attach(portal);
+        // The backdrop element only exists once attached — setting this any
+        // earlier (e.g. in ModalRef's constructor) would silently no-op.
+        overlayRef.backdropElement?.setAttribute('data-state', 'open');
         return modalRef;
     }
     /** Global helper to close everything */
@@ -6534,7 +6590,15 @@ class ModalService {
     createOverlay() {
         const config = new OverlayConfig({
             hasBackdrop: true,
-            backdropClass: ['cdk-overlay-backdrop', 'bg-black/80', 'backdrop-blur-sm'],
+            backdropClass: [
+                'cdk-overlay-backdrop',
+                'bg-black/80',
+                'backdrop-blur-sm',
+                'data-[state=open]:animate-in',
+                'data-[state=open]:fade-in-0',
+                'data-[state=closed]:animate-out',
+                'data-[state=closed]:fade-out-0',
+            ],
             panelClass: [
                 'w-full',
                 'h-full',
@@ -6559,35 +6623,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
             args: [{ providedIn: 'root' }]
         }], ctorParameters: () => [{ type: i1$2.Overlay }, { type: i0.Injector }, { type: ModalStackService }] });
 
-class Modal {
-    /** The content to display (String, Component, or Template) */
-    content;
-    /** Optional title for the standard header */
-    title;
-    /** * Predefined size scale.
-     * - xs: 320px (Mobile alerts)
-     * - sm: 425px (Standard dialogs)
-     * - default: 544px (Forms)
-     * - lg: 90% / 1024px (Data tables)
-     * - xl: 1280px (Large forms, dashboards)
-     * - fullscreen: 100vw/100vh (Complex workflows)
-     */
-    size = 'default';
-    /** * If true (default), clicking the backdrop closes the modal.
-     * Set to false for "blocking" modals (e.g., Terms of Service).
-     */
-    backdropClose = true;
-    /** * Data to pass to a Component content.
-     * Accessed via @Input() in the child component.
-     */
-    data;
-    /** * Context to pass to a TemplateRef content.
-     * Accessed via `let-val` in the HTML.
-     */
-    context;
-    showCloseButton = true;
-}
-
 class ButtonGroupComponent {
     class = '';
     cn = cn;
@@ -9071,7 +9106,7 @@ class SegmentComponent {
       (keydown)="onKeydown($event)"
     >
       <div
-        class="absolute top-1 bottom-1 bg-primary shadow-sm rounded-md transition-all duration-300 ease-[cubic-bezier(0.2,0.0,0.2,1)]"
+        class="absolute top-1 bottom-1 bg-primary shadow-sm rounded-md transition-all duration-300 ease-tolle"
         [style.left.px]="gliderLeft"
         [style.width.px]="gliderWidth"
         [class.opacity-0]="!hasValue"
@@ -9128,7 +9163,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
       (keydown)="onKeydown($event)"
     >
       <div
-        class="absolute top-1 bottom-1 bg-primary shadow-sm rounded-md transition-all duration-300 ease-[cubic-bezier(0.2,0.0,0.2,1)]"
+        class="absolute top-1 bottom-1 bg-primary shadow-sm rounded-md transition-all duration-300 ease-tolle"
         [style.left.px]="gliderLeft"
         [style.width.px]="gliderWidth"
         [class.opacity-0]="!hasValue"
@@ -11177,6 +11212,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                 type: Input
             }] } });
 
+/**
+ * Safety net if the exit animation's `animationend` never fires — reduced
+ * motion, no matching keyframe, or a panel that never rendered — so an
+ * alert dialog can never get stuck open forever. Also used by
+ * `alert-dialog.service.ts` and `alert-dialog-dynamic.component.ts`, which
+ * animate the same content component through a different overlay wiring.
+ */
+const CLOSE_FALLBACK_MS = 300;
 class AlertDialogInternalService {
     openSubject = new BehaviorSubject(false);
     open$ = this.openSubject.asObservable();
@@ -11271,14 +11314,39 @@ class AlertDialogPortalComponent {
         });
         const portal = new TemplatePortal(this.portalContent, this.viewContainerRef);
         this.overlayRef.attach(portal);
+        // The backdrop element only exists once attached — setting this any
+        // earlier would silently no-op.
+        this.overlayRef.backdropElement?.setAttribute('data-state', 'open');
     }
+    /**
+     * Tears the overlay down once its exit animation finishes (or after
+     * `CLOSE_FALLBACK_MS`, whichever comes first) instead of instantly, so
+     * `data-[state=closed]:animate-out` actually gets a chance to play.
+     */
     hide() {
-        if (this.overlayRef) {
-            this.overlayRef.detach();
-            this.overlayRef.dispose();
-            this.overlayRef = undefined;
+        const ref = this.overlayRef;
+        if (!ref)
+            return;
+        ref.backdropElement?.setAttribute('data-state', 'closed');
+        let finished = false;
+        const finish = () => {
+            if (finished)
+                return;
+            finished = true;
+            ref.detach();
+            ref.dispose();
+            if (this.overlayRef === ref)
+                this.overlayRef = undefined;
             // Restore focus to the trigger.
             this.previouslyFocused?.focus?.();
+        };
+        const panel = ref.overlayElement.querySelector('[data-state]');
+        if (panel) {
+            panel.addEventListener('animationend', finish, { once: true });
+            setTimeout(finish, CLOSE_FALLBACK_MS);
+        }
+        else {
+            finish();
         }
     }
     ngOnDestroy() {
@@ -11316,7 +11384,7 @@ class AlertDialogContentComponent {
         });
     }
     get computedClass() {
-        return cn("fixed left-[50%] top-[50%] translate-x-[-50%] translate-y-[-50%] z-50 grid w-full gap-4 border border-input bg-background p-6 shadow-lg data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] rounded-lg", {
+        return cn("fixed left-[50%] top-[50%] translate-x-[-50%] translate-y-[-50%] z-50 grid w-full gap-4 border border-input bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95 data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] rounded-lg", {
             'max-w-xs': this.size === 'xs',
             'max-w-sm': this.size === 'sm',
             'max-w-md': this.size === 'md',
@@ -11479,6 +11547,11 @@ class AlertDialogRef {
 class AlertDialogDynamicComponent {
     config;
     dialogRef;
+    /**
+     * Set by `AlertDialogService` once the dialog's result is ready, so the
+     * content panel plays its exit animation before the overlay is torn down.
+     */
+    closing = false;
     onOpenChange(open) {
         if (!open) {
             this.close(false);
@@ -11489,7 +11562,7 @@ class AlertDialogDynamicComponent {
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: AlertDialogDynamicComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: AlertDialogDynamicComponent, isStandalone: true, selector: "tolle-alert-dialog-dynamic", ngImport: i0, template: `
-    <tolle-alert-dialog [open]="true" (openChange)="onOpenChange($event)">
+    <tolle-alert-dialog [open]="!closing" (openChange)="onOpenChange($event)">
         <tolle-alert-dialog-content [size]="config.size || 'lg'">
           <tolle-alert-dialog-header>
             <tolle-alert-dialog-title>{{ config.title }}</tolle-alert-dialog-title>
@@ -11525,7 +11598,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                         AlertDialogActionComponent,
                         ButtonComponent
                     ], template: `
-    <tolle-alert-dialog [open]="true" (openChange)="onOpenChange($event)">
+    <tolle-alert-dialog [open]="!closing" (openChange)="onOpenChange($event)">
         <tolle-alert-dialog-content [size]="config.size || 'lg'">
           <tolle-alert-dialog-header>
             <tolle-alert-dialog-title>{{ config.title }}</tolle-alert-dialog-title>
@@ -11556,7 +11629,15 @@ class AlertDialogService {
         const previouslyFocused = document.activeElement;
         const overlayConfig = new OverlayConfig({
             hasBackdrop: true,
-            backdropClass: ['cdk-overlay-backdrop', 'bg-black/80', 'backdrop-blur-sm'],
+            backdropClass: [
+                'cdk-overlay-backdrop',
+                'bg-black/80',
+                'backdrop-blur-sm',
+                'data-[state=open]:animate-in',
+                'data-[state=open]:fade-in-0',
+                'data-[state=closed]:animate-out',
+                'data-[state=closed]:fade-out-0',
+            ],
             positionStrategy: this.overlay.position().global().centerHorizontally().centerVertically(),
             scrollStrategy: this.overlay.scrollStrategies.block()
         });
@@ -11564,13 +11645,36 @@ class AlertDialogService {
         const dialogRef = new AlertDialogRef();
         const portal = new ComponentPortal(AlertDialogDynamicComponent, null, this.injector);
         const componentRef = overlayRef.attach(portal);
+        // The backdrop element only exists once attached — setting this any
+        // earlier would silently no-op.
+        overlayRef.backdropElement?.setAttribute('data-state', 'open');
         componentRef.instance.config = config;
         componentRef.instance.dialogRef = dialogRef;
+        // The result (`afterClosed$`) is ready immediately, but disposing the
+        // overlay waits for the content panel's exit animation to finish (or
+        // a fallback timeout), so `data-[state=closed]:animate-out` gets a
+        // chance to play instead of being torn down mid-frame.
         dialogRef.afterClosed$.subscribe(() => {
-            overlayRef.detach();
-            overlayRef.dispose();
-            // Restore focus to the trigger.
-            previouslyFocused?.focus?.();
+            overlayRef.backdropElement?.setAttribute('data-state', 'closed');
+            componentRef.instance.closing = true;
+            let finished = false;
+            const finish = () => {
+                if (finished)
+                    return;
+                finished = true;
+                overlayRef.detach();
+                overlayRef.dispose();
+                // Restore focus to the trigger.
+                previouslyFocused?.focus?.();
+            };
+            const panel = overlayRef.overlayElement.querySelector('[data-state]');
+            if (panel) {
+                panel.addEventListener('animationend', finish, { once: true });
+                setTimeout(finish, CLOSE_FALLBACK_MS);
+            }
+            else {
+                finish();
+            }
         });
         // Alert-dialog semantics: backdrop clicks must NOT dismiss.
         // Escape still closes the dialog.
@@ -16497,21 +16601,21 @@ class ResizablePanelComponent {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ResizablePanelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: ResizablePanelComponent, isStandalone: true, selector: "tolle-resizable-panel", inputs: { direction: "direction", class: "class" }, queries: [{ propertyName: "panels", predicate: i0.forwardRef(() => ResizablePanelItemComponent) }], ngImport: i0, template: `
     <div [class]="computedContainerClass">
-      <div class="flex" [class.flex-col]="direction === 'vertical'" [class.flex-row]="direction === 'horizontal'">
+      <div class="flex h-full w-full" [class.flex-col]="direction === 'vertical'" [class.flex-row]="direction === 'horizontal'">
         <ng-content></ng-content>
       </div>
     </div>
-  `, isInline: true, styles: [":host{display:block}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }] });
+  `, isInline: true, styles: [":host{display:block;width:100%;height:100%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ResizablePanelComponent, decorators: [{
             type: Component,
             args: [{ selector: 'tolle-resizable-panel', standalone: true, imports: [CommonModule], template: `
     <div [class]="computedContainerClass">
-      <div class="flex" [class.flex-col]="direction === 'vertical'" [class.flex-row]="direction === 'horizontal'">
+      <div class="flex h-full w-full" [class.flex-col]="direction === 'vertical'" [class.flex-row]="direction === 'horizontal'">
         <ng-content></ng-content>
       </div>
     </div>
-  `, styles: [":host{display:block}\n"] }]
+  `, styles: [":host{display:block;width:100%;height:100%}\n"] }]
         }], propDecorators: { direction: [{
                 type: Input
             }], class: [{
@@ -16915,11 +17019,16 @@ class ContextMenuService {
                 })
             ]
         });
+        // Position via left/top, not transform: the menu's own
+        // data-[state=open]:zoom-in-95/slide-in-from-top-2 enter animation also
+        // drives `transform`, and a CSS animation overrides whatever an inline
+        // transform says for as long as it's running — so a translate() here
+        // would get clobbered by the animation and only "snap" into place once
+        // it finishes, which is exactly the top-left-then-jump flash this avoids.
         Object.assign(menuElement.style, {
             position: 'fixed',
-            left: '0',
-            top: '0',
-            transform: `translate(${Math.round(x)}px, ${Math.round(y)}px)`
+            left: `${Math.round(x)}px`,
+            top: `${Math.round(y)}px`,
         });
     }
     async positionSubmenu(triggerElement, submenuElement) {
@@ -16948,9 +17057,8 @@ class ContextMenuService {
         });
         Object.assign(submenuElement.style, {
             position: 'fixed',
-            left: '0',
-            top: '0',
-            transform: `translate(${Math.round(x)}px, ${Math.round(y)}px)`
+            left: `${Math.round(x)}px`,
+            top: `${Math.round(y)}px`,
         });
     }
     performAction(actionId) {
@@ -31665,5 +31773,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { AccordionComponent, AccordionItemComponent, AlertComponent, AlertDialogActionComponent, AlertDialogCancelComponent, AlertDialogComponent, AlertDialogContentComponent, AlertDialogDescriptionComponent, AlertDialogDynamicComponent, AlertDialogFooterComponent, AlertDialogHeaderComponent, AlertDialogPortalComponent, AlertDialogRef, AlertDialogService, AlertDialogTitleComponent, AlertDialogTriggerComponent, AspectRatioComponent, AttachmentActionsComponent, AttachmentComponent, AttachmentGroupComponent, AvatarComponent, AvatarFallbackComponent, BASE_PALETTES, BadgeComponent, BreadcrumbComponent, BreadcrumbItemComponent, BreadcrumbLinkComponent, BreadcrumbSeparatorComponent, BubbleActionsComponent, BubbleComponent, BubbleReactionsComponent, ButtonComponent, ButtonGroupComponent, CHART_COLOR_LIMIT, CHART_OVERFLOW_COLOR, CalendarComponent, CardComponent, CardContentComponent, CardDescriptionComponent, CardFooterComponent, CardHeaderComponent, CardTitleComponent, CarouselComponent, CarouselContainerDirective, CarouselContentDirective, CarouselContext, CarouselItemDirective, CarouselNextDirective, CarouselPreviousDirective, ChainOfThoughtComponent, ChainOfThoughtContentComponent, ChainOfThoughtHeaderComponent, ChainOfThoughtSearchResultComponent, ChainOfThoughtSearchResultsComponent, ChainOfThoughtService, ChainOfThoughtStepComponent, ChartAreaComponent, ChartBarComponent, ChartChild, ChartColorScale, ChartComponent, ChartGridComponent, ChartLegendComponent, ChartLineComponent, ChartPieComponent, ChartService, ChartTableComponent, ChartTooltipComponent, ChartXAxisComponent, ChartYAxisComponent, CheckboxComponent, CheckpointComponent, CollapsibleComponent, CollapsibleContentComponent, CollapsibleTriggerComponent, ComboboxComponent, CommandComponent, CommandDialogComponent, CommandEmptyComponent, CommandGroupComponent, CommandInputComponent, CommandItemComponent, CommandListComponent, CommandSeparatorComponent, CommandService, CommandShortcutComponent, ConfirmationComponent, ContextComponent, ContextContentComponent, ContextMenuComponent, ContextMenuService, ContextMenuTriggerDirective, ContextService, ContextTriggerComponent, ConversationComponent, ConversationContentComponent, ConversationEmptyStateComponent, ConversationScrollButtonComponent, ConversationService, CountryCodesService, CountrySelectorComponent, DataTableComponent, DatePickerComponent, DateRangePickerComponent, DateTimePickerComponent, DirectionDirective, DirectionService, DropdownItemComponent, DropdownLabelComponent, DropdownMenuComponent, DropdownSeparatorComponent, DropdownTriggerDirective, EmptyStateComponent, FieldComponent, FieldContentComponent, FieldDescriptionComponent, FieldErrorComponent, FieldGroupComponent, FieldLabelComponent, FieldLegendComponent, FieldSeparatorComponent, FieldSetComponent, FieldTitleComponent, HoverCardComponent, HoverCardContentComponent, HoverCardTriggerComponent, InlineCitationCardComponent, InlineCitationComponent, InlineCitationQuoteComponent, InputComponent, InputGroupAddonComponent, InputGroupButtonComponent, InputGroupComponent, InputGroupInputComponent, InputGroupTextComponent, InputGroupTextareaComponent, ItemActionsComponent, ItemComponent, ItemContentComponent, ItemDescriptionComponent, ItemFooterComponent, ItemGroupComponent, ItemHeaderComponent, ItemMediaComponent, ItemTitleComponent, KbdComponent, KbdGroupComponent, LabelComponent, MarkerComponent, MarkerGroupComponent, MaskedInputComponent, MenubarComponent, MenubarContentComponent, MenubarItemComponent, MenubarLabelComponent, MenubarMenuComponent, MenubarSeparatorComponent, MenubarService, MenubarTriggerComponent, MessageAlignService, MessageAvatarComponent, MessageComponent, MessageContentComponent, MessageFooterComponent, MessageGroupComponent, MessageHeaderComponent, MessageScrollerButtonComponent, MessageScrollerComponent, MessageScrollerContentComponent, MessageScrollerItemDirective, MessageScrollerService, MessageScrollerViewportComponent, Modal, ModalComponent, ModalRef, ModalService, ModalStackService, ModelSelectorComponent, MultiSelectComponent, NativeSelectComponent, NavigationMenuComponent, NavigationMenuContentComponent, NavigationMenuItemComponent, NavigationMenuLinkComponent, NavigationMenuListComponent, NavigationMenuService, NavigationMenuTriggerComponent, OtpComponent, OtpGroupComponent, OtpSlotComponent, PaginationComponent, PhoneNumberInputComponent, PhoneNumberService, PlanComponent, PlanService, PlanStepComponent, PopoverComponent, PopoverContentComponent, ProgressComponent, PromptInputComponent, PromptInputService, PromptInputSubmitComponent, PromptInputToolbarComponent, PromptInputToolsComponent, QueueComponent, QueueItemComponent, QueueService, RadioGroupComponent, RadioItemComponent, RadioService, RangeCalendarComponent, ReasoningComponent, ReasoningContentComponent, ReasoningService, ReasoningTriggerComponent, ResizableComponent, ResizablePanelComponent, ResizablePanelItemComponent, ScrollAreaComponent, SegmentComponent, SegmentComponent as SegmentedComponent, SelectComponent, SelectGroupComponent, SelectItemComponent, SelectSeparatorComponent, SelectService, SeparatorComponent, SheetComponent, SheetContentComponent, SheetDescriptionComponent, SheetFooterComponent, SheetHeaderComponent, SheetRef, SheetService, SheetTitleComponent, SheetTriggerComponent, SheetWrapperComponent, ShimmerComponent, SidebarComponent, SkeletonComponent, SliderComponent, SourceComponent, SourcesComponent, SourcesContentComponent, SourcesService, SourcesTriggerComponent, SpinnerComponent, SuggestionComponent, SuggestionsComponent, SuggestionsService, SwitchComponent, TOLLE_CONFIG, TableBodyDirective, TableCaptionDirective, TableCellDirective, TableComponent, TableFooterDirective, TableHeadDirective, TableHeaderDirective, TableRowDirective, TabsComponent, TabsContentComponent, TabsListComponent, TabsTriggerComponent, TagInputComponent, TaskComponent, TaskContentComponent, TaskItemComponent, TaskItemFileComponent, TaskService, TaskTriggerComponent, TextareaComponent, ThemeService, TimeColumnsComponent, TimePickerComponent, ToastContainerComponent, ToastService, ToggleComponent, ToggleGroupComponent, ToggleGroupItemComponent, TolleCellDirective, ToolComponent, ToolHeaderComponent, ToolInputComponent, ToolOutputComponent, ToolPayloadBase, ToolService, TooltipDirective, TypographyComponent, arcPath, barPath, buildPath, cn, contrastTriplet, darkenColor, decimalsFor, formatTimeString, formatTokens, from12Hour, generateBaseCss, generateChartCss, generateChartRamp, generateThemeCss, getContrastColor, hexToHsl, hexToRgb, hslToHex, lightenColor, monotoneTangents, niceScale, niceStep, parseTimeString, polarPoint, provideTolleConfig, radiusScale, rgbTriplet, timePartsToSeconds, to12Hour };
+export { AccordionComponent, AccordionItemComponent, AlertComponent, AlertDialogActionComponent, AlertDialogCancelComponent, AlertDialogComponent, AlertDialogContentComponent, AlertDialogDescriptionComponent, AlertDialogDynamicComponent, AlertDialogFooterComponent, AlertDialogHeaderComponent, AlertDialogPortalComponent, AlertDialogRef, AlertDialogService, AlertDialogTitleComponent, AlertDialogTriggerComponent, AspectRatioComponent, AttachmentActionsComponent, AttachmentComponent, AttachmentGroupComponent, AvatarComponent, AvatarFallbackComponent, BASE_PALETTES, BadgeComponent, BreadcrumbComponent, BreadcrumbItemComponent, BreadcrumbLinkComponent, BreadcrumbSeparatorComponent, BubbleActionsComponent, BubbleComponent, BubbleReactionsComponent, ButtonComponent, ButtonGroupComponent, CHART_COLOR_LIMIT, CHART_OVERFLOW_COLOR, CLOSE_FALLBACK_MS, CalendarComponent, CardComponent, CardContentComponent, CardDescriptionComponent, CardFooterComponent, CardHeaderComponent, CardTitleComponent, CarouselComponent, CarouselContainerDirective, CarouselContentDirective, CarouselContext, CarouselItemDirective, CarouselNextDirective, CarouselPreviousDirective, ChainOfThoughtComponent, ChainOfThoughtContentComponent, ChainOfThoughtHeaderComponent, ChainOfThoughtSearchResultComponent, ChainOfThoughtSearchResultsComponent, ChainOfThoughtService, ChainOfThoughtStepComponent, ChartAreaComponent, ChartBarComponent, ChartChild, ChartColorScale, ChartComponent, ChartGridComponent, ChartLegendComponent, ChartLineComponent, ChartPieComponent, ChartService, ChartTableComponent, ChartTooltipComponent, ChartXAxisComponent, ChartYAxisComponent, CheckboxComponent, CheckpointComponent, CollapsibleComponent, CollapsibleContentComponent, CollapsibleTriggerComponent, ComboboxComponent, CommandComponent, CommandDialogComponent, CommandEmptyComponent, CommandGroupComponent, CommandInputComponent, CommandItemComponent, CommandListComponent, CommandSeparatorComponent, CommandService, CommandShortcutComponent, ConfirmationComponent, ContextComponent, ContextContentComponent, ContextMenuComponent, ContextMenuService, ContextMenuTriggerDirective, ContextService, ContextTriggerComponent, ConversationComponent, ConversationContentComponent, ConversationEmptyStateComponent, ConversationScrollButtonComponent, ConversationService, CountryCodesService, CountrySelectorComponent, DataTableComponent, DatePickerComponent, DateRangePickerComponent, DateTimePickerComponent, DirectionDirective, DirectionService, DropdownItemComponent, DropdownLabelComponent, DropdownMenuComponent, DropdownSeparatorComponent, DropdownTriggerDirective, EmptyStateComponent, FieldComponent, FieldContentComponent, FieldDescriptionComponent, FieldErrorComponent, FieldGroupComponent, FieldLabelComponent, FieldLegendComponent, FieldSeparatorComponent, FieldSetComponent, FieldTitleComponent, HoverCardComponent, HoverCardContentComponent, HoverCardTriggerComponent, InlineCitationCardComponent, InlineCitationComponent, InlineCitationQuoteComponent, InputComponent, InputGroupAddonComponent, InputGroupButtonComponent, InputGroupComponent, InputGroupInputComponent, InputGroupTextComponent, InputGroupTextareaComponent, ItemActionsComponent, ItemComponent, ItemContentComponent, ItemDescriptionComponent, ItemFooterComponent, ItemGroupComponent, ItemHeaderComponent, ItemMediaComponent, ItemTitleComponent, KbdComponent, KbdGroupComponent, LabelComponent, MarkerComponent, MarkerGroupComponent, MaskedInputComponent, MenubarComponent, MenubarContentComponent, MenubarItemComponent, MenubarLabelComponent, MenubarMenuComponent, MenubarSeparatorComponent, MenubarService, MenubarTriggerComponent, MessageAlignService, MessageAvatarComponent, MessageComponent, MessageContentComponent, MessageFooterComponent, MessageGroupComponent, MessageHeaderComponent, MessageScrollerButtonComponent, MessageScrollerComponent, MessageScrollerContentComponent, MessageScrollerItemDirective, MessageScrollerService, MessageScrollerViewportComponent, ModalComponent, ModalRef, ModalService, ModalStackService, ModelSelectorComponent, MultiSelectComponent, NativeSelectComponent, NavigationMenuComponent, NavigationMenuContentComponent, NavigationMenuItemComponent, NavigationMenuLinkComponent, NavigationMenuListComponent, NavigationMenuService, NavigationMenuTriggerComponent, OtpComponent, OtpGroupComponent, OtpSlotComponent, PaginationComponent, PhoneNumberInputComponent, PhoneNumberService, PlanComponent, PlanService, PlanStepComponent, PopoverComponent, PopoverContentComponent, ProgressComponent, PromptInputComponent, PromptInputService, PromptInputSubmitComponent, PromptInputToolbarComponent, PromptInputToolsComponent, QueueComponent, QueueItemComponent, QueueService, RadioGroupComponent, RadioItemComponent, RadioService, RangeCalendarComponent, ReasoningComponent, ReasoningContentComponent, ReasoningService, ReasoningTriggerComponent, ResizableComponent, ResizablePanelComponent, ResizablePanelItemComponent, ScrollAreaComponent, SegmentComponent, SegmentComponent as SegmentedComponent, SelectComponent, SelectGroupComponent, SelectItemComponent, SelectSeparatorComponent, SelectService, SeparatorComponent, SheetComponent, SheetContentComponent, SheetDescriptionComponent, SheetFooterComponent, SheetHeaderComponent, SheetRef, SheetService, SheetTitleComponent, SheetTriggerComponent, SheetWrapperComponent, ShimmerComponent, SidebarComponent, SkeletonComponent, SliderComponent, SourceComponent, SourcesComponent, SourcesContentComponent, SourcesService, SourcesTriggerComponent, SpinnerComponent, SuggestionComponent, SuggestionsComponent, SuggestionsService, SwitchComponent, TOLLE_CONFIG, TableBodyDirective, TableCaptionDirective, TableCellDirective, TableComponent, TableFooterDirective, TableHeadDirective, TableHeaderDirective, TableRowDirective, TabsComponent, TabsContentComponent, TabsListComponent, TabsTriggerComponent, TagInputComponent, TaskComponent, TaskContentComponent, TaskItemComponent, TaskItemFileComponent, TaskService, TaskTriggerComponent, TextareaComponent, ThemeService, TimeColumnsComponent, TimePickerComponent, ToastContainerComponent, ToastService, ToggleComponent, ToggleGroupComponent, ToggleGroupItemComponent, TolleCellDirective, ToolComponent, ToolHeaderComponent, ToolInputComponent, ToolOutputComponent, ToolPayloadBase, ToolService, TooltipDirective, TypographyComponent, arcPath, barPath, buildPath, cn, contrastTriplet, darkenColor, decimalsFor, formatTimeString, formatTokens, from12Hour, generateBaseCss, generateChartCss, generateChartRamp, generateThemeCss, getContrastColor, hexToHsl, hexToRgb, hslToHex, lightenColor, monotoneTangents, niceScale, niceStep, parseTimeString, polarPoint, provideTolleConfig, radiusScale, rgbTriplet, timePartsToSeconds, to12Hour };
 //# sourceMappingURL=tolle-ui.mjs.map