@unopsitg/ux 21.0.2 → 21.0.5

package/assets/_main.scss

@@ -24,7 +24,7 @@ body {
     }
 
     .app-dark body {
-        background: linear-gradient(355deg, var(--p-primary-800) 5%, var(--p-surface-900) 60%, var(--p-surface-950) 86%);
+        background: linear-gradient(355deg, var(--p-primary-900) 5%, var(--p-surface-900) 60%, var(--p-surface-950) 86%);
     }
 }
 

package/assets/tailwind.css

@@ -499,7 +499,7 @@
 }
 
 @utility body-large {
-  @apply text-xl text-center text-surface-700 dark:text-surface-200;
+  @apply text-xl text-center text-surface-700 dark:text-surface-100;
   font-family: "Noto Sans", sans-serif;
   font-feature-settings:
     "cv09" on,
@@ -513,7 +513,7 @@
 }
 
 @utility body-medium {
-  @apply text-lg text-center text-surface-700 dark:text-surface-200;
+  @apply text-lg text-center text-surface-700 dark:text-surface-100;
   font-family: "Noto Sans", sans-serif;
   font-feature-settings:
     "cv09" on,
@@ -527,7 +527,7 @@
 }
 
 @utility body-small {
-  @apply text-base text-center text-surface-700 dark:text-surface-200;
+  @apply text-base text-center text-surface-700 dark:text-surface-100;
   font-family: "Noto Sans", sans-serif;
   font-feature-settings:
     "cv09" on,
@@ -541,7 +541,7 @@
 }
 
 @utility body-xsmall {
-  @apply text-sm text-center text-surface-700 dark:text-surface-200;
+  @apply text-sm text-center text-surface-700 dark:text-surface-100;
   font-family: "Noto Sans", sans-serif;
   font-feature-settings:
     "cv09" on,
@@ -585,7 +585,7 @@
 }
 
 @utility label-small {
-  @apply text-surface-700 dark:text-surface-200 font-medium text-sm text-center;
+  @apply text-surface-700 dark:text-surface-100 font-medium text-sm text-center;
   font-family: "Noto Sans", sans-serif;
   font-feature-settings:
     "cv11" on,
@@ -600,7 +600,7 @@
 }
 
 @utility label-xsmall {
-  @apply text-surface-700 dark:text-surface-200 font-medium text-xs text-center;
+  @apply text-surface-700 dark:text-surface-100 font-medium text-xs text-center;
   font-family: "Noto Sans", sans-serif;
   font-feature-settings:
     "cv01" on,
@@ -644,7 +644,7 @@
 }
 
 @utility social-button {
-  @apply w-full py-2 flex items-center justify-center gap-2 rounded-lg border border-surface-200 dark:border-surface-800 hover:bg-surface-100 dark:hover:bg-surface-800 transition-all text-center text-surface-700 dark:text-surface-200 font-medium leading-normal;
+  @apply w-full py-2 flex items-center justify-center gap-2 rounded-lg border border-surface-200 dark:border-surface-800 hover:bg-surface-100 dark:hover:bg-surface-800 transition-all text-center text-surface-700 dark:text-surface-100 font-medium leading-normal;
   font-family: "Noto Sans", sans-serif;
   font-feature-settings:
     "cv08" on,

package/fesm2022/unopsitg-ux.mjs

@@ -3,11 +3,11 @@ import SoftBase from '@primeuix/themes/aura';
 import CrispBase from '@primeuix/themes/lara';
 import ContrastBase from '@primeuix/themes/nora';
 import * as i0 from '@angular/core';
-import { InjectionToken, signal, inject, computed, effect, Injectable, Component, PLATFORM_ID, model, booleanAttribute, Input, input, HostListener, ViewChild, ElementRef, ChangeDetectionStrategy } from '@angular/core';
+import { InjectionToken, signal, inject, computed, effect, Injectable, Component, PLATFORM_ID, model, booleanAttribute, Input, input, HostListener, ViewChild, ElementRef, ChangeDetectionStrategy, output, DestroyRef, Directive, ContentChildren } from '@angular/core';
 import * as i1 from '@angular/router';
 import { Router, NavigationEnd, RouterModule } from '@angular/router';
 import * as i1$1 from '@angular/common';
-import { CommonModule, isPlatformBrowser } from '@angular/common';
+import { CommonModule, isPlatformBrowser, NgClass } from '@angular/common';
 import { BehaviorSubject, filter, Subject, takeUntil } from 'rxjs';
 import * as i5 from '@angular/forms';
 import { FormsModule } from '@angular/forms';
@@ -47,6 +47,10 @@ import * as i9 from 'primeng/overlaybadge';
 import { OverlayBadgeModule } from 'primeng/overlaybadge';
 import * as i3$4 from 'primeng/styleclass';
 import { StyleClassModule } from 'primeng/styleclass';
+import * as i2$1 from 'primeng/paginator';
+import { PaginatorModule } from 'primeng/paginator';
+import * as i2$2 from 'primeng/tabs';
+import { TabsModule } from 'primeng/tabs';
 
 /**
  * Brand theme presets built on top of PrimeUIX base presets.
@@ -130,12 +134,12 @@ const brandOverrides = {
                     50: '{darkblue.50}',
                     100: '{darkblue.100}',
                     200: '{darkblue.200}',
-                    300: '{darkblue.200}',
-                    400: '{darkblue.300}',
-                    500: '{darkblue.400}',
-                    600: '{darkblue.500}',
-                    700: '{darkblue.600}',
-                    800: '{darkblue.700}',
+                    300: '{darkblue.300}',
+                    400: '{darkblue.400}',
+                    500: '{darkblue.500}',
+                    600: '{darkblue.600}',
+                    700: '{darkblue.700}',
+                    800: '{darkblue.800}',
                     900: '{darkblue.900}',
                     950: '{darkblue.950}'
                 }
@@ -171,11 +175,46 @@ const brandOverrides = {
                 }
             }
         },
+        tabs: {
+            tablist: {
+                background: 'transparent'
+            },
+            tab: {
+                background: 'transparent',
+                hoverBackground: '{primary.50}',
+                hoverColor: '{primary.700}',
+                activeBackground: '{primary.100}',
+                activeColor: '{primary.900}',
+                borderColor: 'transparent',
+                activeBorderColor: '{primary.200}',
+                padding: '0.5rem 1rem'
+            },
+            tabpanel: {
+                background: 'transparent',
+                padding: '0'
+            },
+            colorScheme: {
+                dark: {
+                    tab: {
+                        hoverBackground: '{primary.900}',
+                        hoverColor: '{primary.200}',
+                        activeBackground: '{surface.800}',
+                        activeColor: '{primary.200}',
+                        activeBorderColor: '{primary.400}'
+                    }
+                }
+            }
+        },
         paginator: {
             root: {
                 background: 'transparent'
             }
         },
+        fileupload: {
+            root: {
+                background: 'transparent'
+            }
+        },
         tag: {
             root: {
                 padding: '0.25rem 0.5rem',
@@ -2584,6 +2623,385 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImpor
     `, styles: [":host{--ux-ai-bg-from: #cce5ff;--ux-ai-bg-to:rgb(255, 236, 254);--ux-ai-fg-from:rgb(188, 214, 255);--ux-ai-fg-to:rgb(246, 216, 255);position:relative;overflow:hidden;isolation:isolate;contain:paint;animation:ux-ai-bg-move 5s ease-in-out infinite;will-change:background-color}:host-context([class*=\"app-dark\"]){--ux-ai-bg-from:rgb(0, 32, 69);--ux-ai-bg-to:rgb(47, 18, 116);--ux-ai-fg-from:rgb(0, 20, 47);--ux-ai-fg-to:rgb(76, 1, 71)}:host>:not(svg){position:relative;z-index:1}:host svg.ux-ai-card-bg__svg{position:absolute;inset:0;z-index:0;height:100%;width:100%;max-height:100%;overflow:hidden;pointer-events:none}.ux-ai-fg{will-change:fill;animation:ux-ai-fg-move 6s ease-in-out infinite}.ux-ai-fg--1{animation-delay:0s}.ux-ai-fg--2{animation-delay:2s}.ux-ai-fg--3{animation-delay:4s}@keyframes ux-ai-bg-move{0%,to{background-color:var(--ux-ai-bg-from)}50%{background-color:var(--ux-ai-bg-to)}}@keyframes ux-ai-fg-move{0%,to{fill:var(--ux-ai-fg-from)}50%{fill:var(--ux-ai-fg-to)}}@media(prefers-reduced-motion:reduce){:host{animation:none;background-color:var(--ux-ai-bg-from)}.ux-ai-fg{animation:none;fill:var(--ux-ai-fg-from)}}\n"] }]
         }] });
 
+class AiInsightsCardComponent {
+    title = input.required(...(ngDevMode ? [{ debugName: "title" }] : []));
+    insights = input.required(...(ngDevMode ? [{ debugName: "insights" }] : []));
+    searchPlaceholder = input('Search AI insights...', ...(ngDevMode ? [{ debugName: "searchPlaceholder" }] : []));
+    actionClick = output();
+    expanded = signal(false, ...(ngDevMode ? [{ debugName: "expanded" }] : []));
+    searchQuery = signal('', ...(ngDevMode ? [{ debugName: "searchQuery" }] : []));
+    filteredInsights = computed(() => {
+        const query = this.searchQuery().trim().toLowerCase();
+        if (!query)
+            return this.insights();
+        return this.insights().filter(i => i.title.toLowerCase().includes(query) ||
+            i.description.toLowerCase().includes(query));
+    }, ...(ngDevMode ? [{ debugName: "filteredInsights" }] : []));
+    perPage = signal(this.calcPerPage(), ...(ngDevMode ? [{ debugName: "perPage" }] : []));
+    page = signal(0, ...(ngDevMode ? [{ debugName: "page" }] : []));
+    first = computed(() => this.page() * this.perPage(), ...(ngDevMode ? [{ debugName: "first" }] : []));
+    paginatedInsights = computed(() => {
+        const all = this.filteredInsights();
+        return all.slice(this.first(), this.first() + this.perPage());
+    }, ...(ngDevMode ? [{ debugName: "paginatedInsights" }] : []));
+    destroyRef = inject(DestroyRef);
+    ngOnInit() {
+        const onResize = () => this.perPage.set(this.calcPerPage());
+        window.addEventListener('resize', onResize);
+        this.destroyRef.onDestroy(() => window.removeEventListener('resize', onResize));
+    }
+    calcPerPage() {
+        const shellOffset = 12 * 16;
+        const cardChrome = 160 + 72;
+        const insightCardHeight = 150;
+        const available = (typeof window !== 'undefined' ? window.innerHeight : 900) - shellOffset - cardChrome;
+        return Math.max(1, Math.floor(available / insightCardHeight));
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: AiInsightsCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", type: AiInsightsCardComponent, isStandalone: true, selector: "ux-ai-insights-card", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: true, transformFunction: null }, insights: { classPropertyName: "insights", publicName: "insights", isSignal: true, isRequired: true, transformFunction: null }, searchPlaceholder: { classPropertyName: "searchPlaceholder", publicName: "searchPlaceholder", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { actionClick: "actionClick" }, host: { properties: { "class.h-[calc(100dvh-12rem)": "expanded()" }, classAttribute: "ux-ai-insights-card block border border-[#e0e7ff] dark:border-[#2d3a5c] rounded-2xl shadow-sm overflow-hidden transition-all duration-300 flex flex-col max-h-[calc(100dvh-12rem)]" }, ngImport: i0, template: `
+        <ux-ai-card-bg class="flex flex-col flex-1 min-h-0 p-4">
+            <div class="motion-safe:animate-enter-liquid [animation-delay:80ms] flex flex-col flex-1 min-h-0">
+                <div class="flex items-center justify-between cursor-pointer shrink-0" (click)="expanded.set(!expanded())">
+                    <div class="flex items-center gap-3">
+                        <div class="w-[34px] h-[34px] rounded-[10px] flex items-center justify-center shrink-0">
+                            <i class="pi pi-sparkles text-blue-800 dark:text-blue-300"></i>
+                        </div>
+                        <div class="flex flex-col">
+                            <h4 class="title-h4 text-left text-deepsea-500 dark:text-surface-0">{{ title() }}</h4>
+                            <span class="text-midnight-700 dark:text-surface-100 text-sm font-medium leading-tight">{{ insights().length }} insights available for your review</span>
+                        </div>
+                    </div>
+                    <button class="w-[30px] h-[30px] rounded-full bg-white/85 dark:bg-transparent border border-white dark:border-surface-300 shadow-sm flex items-center justify-center cursor-pointer hover:bg-white dark:hover:bg-white/10 transition-colors">
+                        <i class="pi text-xs text-darkblue-500 dark:text-surface-0" [ngClass]="expanded() ? 'pi-chevron-up' : 'pi-chevron-down'"></i>
+                    </button>
+                </div>
+
+                <div class="expand-body" [class.expand-body--open]="expanded()">
+                    <div class="expand-body__inner">
+                        <div class="flex flex-col gap-4 mt-4 flex-1 min-h-0">
+                            <div class="bg-white/60 dark:bg-surface-800/60 border border-white dark:border-surface-700 rounded-[14px] shadow-sm flex items-center gap-4 px-4 py-2.5 shrink-0">
+                                <i class="pi pi-search text-surface-500 dark:text-surface-300 text-sm"></i>
+                                <input
+                                    type="text"
+                                    [ngModel]="searchQuery()"
+                                    (ngModelChange)="searchQuery.set($event); page.set(0)"
+                                    [placeholder]="searchPlaceholder()"
+                                    class="bg-transparent border-none outline-none flex-1 text-sm font-medium text-deepsea-500 dark:text-surface-0 placeholder:text-surface-700 dark:placeholder:text-surface-300"
+                                />
+                            </div>
+
+                            <div class="flex flex-col gap-3 flex-1 min-h-0 overflow-y-auto overscroll-y-contain pr-0.5">
+                                @for (insight of paginatedInsights(); track insight.id) {
+                                    <div class="bg-white/70 dark:bg-surface-800/70 border border-white/50 dark:border-surface-700/50 rounded-[14px] shadow-sm p-4 flex gap-3 items-start shrink-0">
+                                        <i class="pi mt-0.5" [ngClass]="[insight.icon, insight.iconColor]"></i>
+                                        <div class="flex flex-col gap-2 flex-1 min-w-0">
+                                            <div class="flex flex-col gap-1">
+                                                <span class="text-midnight-500 dark:text-surface-0 text-sm font-bold leading-[21px]">{{ insight.title }}</span>
+                                                <p class="text-[#2b638b] dark:text-surface-300 text-sm leading-normal">{{ insight.description }}</p>
+                                            </div>
+                                            <button
+                                                class="flex items-center gap-1.5 text-darkblue-500 dark:text-primary-400 text-sm font-semibold cursor-pointer hover:underline bg-transparent border-none p-0 w-fit"
+                                                (click)="actionClick.emit(insight)"
+                                            >
+                                                {{ insight.actionLabel }}
+                                                <i class="pi pi-arrow-right text-xs"></i>
+                                            </button>
+                                        </div>
+                                    </div>
+                                }
+                            </div>
+
+                            <div class="shrink-0 w-full border-t border-white/50 dark:border-surface-700/50 pt-2 mt-1 relative z-[1] bg-transparent">
+                                <p-paginator
+                                    [rows]="perPage()"
+                                    [totalRecords]="filteredInsights().length"
+                                    [first]="first()"
+                                    (onPageChange)="page.set($event.page ?? 0)"
+                                    [pageLinkSize]="3"
+                                    styleClass="w-full border-none! bg-transparent!"
+                                    [pt]="{ root: { class: 'bg-transparent! relative! w-full! justify-center!' } }"
+                                />
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </ux-ai-card-bg>
+    `, isInline: true, styles: [":host{display:flex}\n"], dependencies: [{ kind: "component", type: AiCardBgComponent, selector: "ux-ai-card-bg" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i5.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: PaginatorModule }, { kind: "component", type: i2$1.Paginator, selector: "p-paginator", inputs: ["pageLinkSize", "styleClass", "alwaysShow", "dropdownAppendTo", "templateLeft", "templateRight", "dropdownScrollHeight", "currentPageReportTemplate", "showCurrentPageReport", "showFirstLastIcon", "totalRecords", "rows", "rowsPerPageOptions", "showJumpToPageDropdown", "showJumpToPageInput", "jumpToPageItemTemplate", "showPageLinks", "locale", "dropdownItemTemplate", "first", "appendTo"], outputs: ["onPageChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: AiInsightsCardComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ux-ai-insights-card', changeDetection: ChangeDetectionStrategy.OnPush, imports: [AiCardBgComponent, FormsModule, NgClass, PaginatorModule], host: {
+                        class: 'ux-ai-insights-card block border border-[#e0e7ff] dark:border-[#2d3a5c] rounded-2xl shadow-sm overflow-hidden transition-all duration-300 flex flex-col max-h-[calc(100dvh-12rem)]',
+                        '[class.h-[calc(100dvh-12rem)]]': 'expanded()'
+                    }, template: `
+        <ux-ai-card-bg class="flex flex-col flex-1 min-h-0 p-4">
+            <div class="motion-safe:animate-enter-liquid [animation-delay:80ms] flex flex-col flex-1 min-h-0">
+                <div class="flex items-center justify-between cursor-pointer shrink-0" (click)="expanded.set(!expanded())">
+                    <div class="flex items-center gap-3">
+                        <div class="w-[34px] h-[34px] rounded-[10px] flex items-center justify-center shrink-0">
+                            <i class="pi pi-sparkles text-blue-800 dark:text-blue-300"></i>
+                        </div>
+                        <div class="flex flex-col">
+                            <h4 class="title-h4 text-left text-deepsea-500 dark:text-surface-0">{{ title() }}</h4>
+                            <span class="text-midnight-700 dark:text-surface-100 text-sm font-medium leading-tight">{{ insights().length }} insights available for your review</span>
+                        </div>
+                    </div>
+                    <button class="w-[30px] h-[30px] rounded-full bg-white/85 dark:bg-transparent border border-white dark:border-surface-300 shadow-sm flex items-center justify-center cursor-pointer hover:bg-white dark:hover:bg-white/10 transition-colors">
+                        <i class="pi text-xs text-darkblue-500 dark:text-surface-0" [ngClass]="expanded() ? 'pi-chevron-up' : 'pi-chevron-down'"></i>
+                    </button>
+                </div>
+
+                <div class="expand-body" [class.expand-body--open]="expanded()">
+                    <div class="expand-body__inner">
+                        <div class="flex flex-col gap-4 mt-4 flex-1 min-h-0">
+                            <div class="bg-white/60 dark:bg-surface-800/60 border border-white dark:border-surface-700 rounded-[14px] shadow-sm flex items-center gap-4 px-4 py-2.5 shrink-0">
+                                <i class="pi pi-search text-surface-500 dark:text-surface-300 text-sm"></i>
+                                <input
+                                    type="text"
+                                    [ngModel]="searchQuery()"
+                                    (ngModelChange)="searchQuery.set($event); page.set(0)"
+                                    [placeholder]="searchPlaceholder()"
+                                    class="bg-transparent border-none outline-none flex-1 text-sm font-medium text-deepsea-500 dark:text-surface-0 placeholder:text-surface-700 dark:placeholder:text-surface-300"
+                                />
+                            </div>
+
+                            <div class="flex flex-col gap-3 flex-1 min-h-0 overflow-y-auto overscroll-y-contain pr-0.5">
+                                @for (insight of paginatedInsights(); track insight.id) {
+                                    <div class="bg-white/70 dark:bg-surface-800/70 border border-white/50 dark:border-surface-700/50 rounded-[14px] shadow-sm p-4 flex gap-3 items-start shrink-0">
+                                        <i class="pi mt-0.5" [ngClass]="[insight.icon, insight.iconColor]"></i>
+                                        <div class="flex flex-col gap-2 flex-1 min-w-0">
+                                            <div class="flex flex-col gap-1">
+                                                <span class="text-midnight-500 dark:text-surface-0 text-sm font-bold leading-[21px]">{{ insight.title }}</span>
+                                                <p class="text-[#2b638b] dark:text-surface-300 text-sm leading-normal">{{ insight.description }}</p>
+                                            </div>
+                                            <button
+                                                class="flex items-center gap-1.5 text-darkblue-500 dark:text-primary-400 text-sm font-semibold cursor-pointer hover:underline bg-transparent border-none p-0 w-fit"
+                                                (click)="actionClick.emit(insight)"
+                                            >
+                                                {{ insight.actionLabel }}
+                                                <i class="pi pi-arrow-right text-xs"></i>
+                                            </button>
+                                        </div>
+                                    </div>
+                                }
+                            </div>
+
+                            <div class="shrink-0 w-full border-t border-white/50 dark:border-surface-700/50 pt-2 mt-1 relative z-[1] bg-transparent">
+                                <p-paginator
+                                    [rows]="perPage()"
+                                    [totalRecords]="filteredInsights().length"
+                                    [first]="first()"
+                                    (onPageChange)="page.set($event.page ?? 0)"
+                                    [pageLinkSize]="3"
+                                    styleClass="w-full border-none! bg-transparent!"
+                                    [pt]="{ root: { class: 'bg-transparent! relative! w-full! justify-center!' } }"
+                                />
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </ux-ai-card-bg>
+    `, styles: [":host{display:flex}\n"] }]
+        }], propDecorators: { title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: true }] }], insights: [{ type: i0.Input, args: [{ isSignal: true, alias: "insights", required: true }] }], searchPlaceholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchPlaceholder", required: false }] }], actionClick: [{ type: i0.Output, args: ["actionClick"] }] } });
+
+/**
+ * Structural directive that marks a template as content for a specific tab
+ * inside `<ux-detail-layout>`.
+ *
+ * Usage: `<ng-template uxDetailTab="overview">...content...</ng-template>`
+ */
+class DetailTabDirective {
+    templateRef;
+    uxDetailTab = input.required(...(ngDevMode ? [{ debugName: "uxDetailTab" }] : []));
+    constructor(templateRef) {
+        this.templateRef = templateRef;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: DetailTabDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.0.8", type: DetailTabDirective, isStandalone: true, selector: "[uxDetailTab]", inputs: { uxDetailTab: { classPropertyName: "uxDetailTab", publicName: "uxDetailTab", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: DetailTabDirective, decorators: [{
+            type: Directive,
+            args: [{ selector: '[uxDetailTab]' }]
+        }], ctorParameters: () => [{ type: i0.TemplateRef }], propDecorators: { uxDetailTab: [{ type: i0.Input, args: [{ isSignal: true, alias: "uxDetailTab", required: true }] }] } });
+/**
+ * Reusable detail-page layout shell: sticky header, tabbed main column,
+ * and a persistent right sidebar (typically for AI insights).
+ *
+ * All styling derives from the active PrimeNG brand preset (BrandSoft / BrandCrisp /
+ * BrandContrast) via `--p-*` CSS variables and Tailwind `surface-*` / `primary-*`
+ * utilities (resolved by `tailwindcss-primeui`). No hardcoded colors.
+ *
+ * ```html
+ * <ux-detail-layout [tabs]="myTabs" [(activeTab)]="currentTab">
+ *   <ng-container ux-detail-header>
+ *     ...sticky header content...
+ *   </ng-container>
+ *
+ *   <ng-template uxDetailTab="overview">...tab 1...</ng-template>
+ *   <ng-template uxDetailTab="scope">...tab 2...</ng-template>
+ *
+ *   <ng-container ux-detail-sidebar>
+ *     ...right sidebar (AI card, documents, etc.)...
+ *   </ng-container>
+ *
+ *   <ng-container ux-detail-footer>
+ *     ...audit metadata row...
+ *   </ng-container>
+ * </ux-detail-layout>
+ * ```
+ */
+class DetailLayoutComponent {
+    /** Tab definitions for the main content area. */
+    tabs = input.required(...(ngDevMode ? [{ debugName: "tabs" }] : []));
+    /** Currently active tab value (two-way bindable). */
+    activeTab = model('', ...(ngDevMode ? [{ debugName: "activeTab" }] : []));
+    /** True once the scrollable body has been scrolled past the threshold. */
+    scrolled = signal(false, ...(ngDevMode ? [{ debugName: "scrolled" }] : []));
+    /** Tab content templates provided by the consumer. */
+    tabTemplates;
+    getTabTemplate(value) {
+        const match = this.tabTemplates?.find(t => t.uxDetailTab() === value);
+        return match?.templateRef ?? null;
+    }
+    onScroll(event) {
+        const el = event.target;
+        this.scrolled.set(el.scrollTop > 10);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: DetailLayoutComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", type: DetailLayoutComponent, isStandalone: true, selector: "ux-detail-layout", inputs: { tabs: { classPropertyName: "tabs", publicName: "tabs", isSignal: true, isRequired: true, transformFunction: null }, activeTab: { classPropertyName: "activeTab", publicName: "activeTab", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { activeTab: "activeTabChange" }, host: { classAttribute: "ux-detail-layout block" }, queries: [{ propertyName: "tabTemplates", predicate: DetailTabDirective }], ngImport: i0, template: `
+        <div class="flex flex-col overflow-hidden" [style.height]="'calc(100vh - 64px)'">
+
+            <!-- Sticky header (projected) -->
+            <div class="ux-dl__header flex-shrink-0 z-10">
+                <div>
+                    <ng-content select="[ux-detail-header]" />
+                </div>
+                <div class="ux-dl__header-meta" [class.ux-dl__header-meta--hidden]="scrolled()">
+                    <ng-content select="[ux-detail-header-meta]" />
+                </div>
+            </div>
+
+            <!-- Scrollable body -->
+            <div class="flex flex-col flex-1 min-h-0 overflow-y-auto overflow-x-hidden ux-dl__scroll"
+                 (scroll)="onScroll($event)">
+
+                <!-- Full-width tab bar -->
+                <p-tabs [value]="activeTab()" (valueChange)="activeTab.set($event + '')">
+                    <p-tablist>
+                        @for (tab of tabs(); track tab.value) {
+                            <p-tab [value]="tab.value">
+                                @if (tab.icon) {
+                                    <i [class]="tab.icon" class="mr-2 text-sm"></i>
+                                }
+                                {{ tab.label }}
+                            </p-tab>
+                        }
+                    </p-tablist>
+
+                    <!-- Content + Sidebar row below tab bar -->
+                    <div class="flex flex-col lg:flex-row items-start gap-6 w-full py-4 sm:py-6">
+
+                        <!-- Main column: tab panels -->
+                        <div class="flex-1 min-w-0 flex flex-col gap-6">
+                            <p-tabpanels>
+                                @for (tab of tabs(); track tab.value) {
+                                    <p-tabpanel [value]="tab.value">
+                                        <div class="flex flex-col gap-6">
+                                            @if (getTabTemplate(tab.value); as tmpl) {
+                                                <ng-container [ngTemplateOutlet]="tmpl" />
+                                            }
+                                        </div>
+                                    </p-tabpanel>
+                                }
+                            </p-tabpanels>
+
+                            <!-- Footer below tab content -->
+                            <ng-content select="[ux-detail-footer]" />
+                        </div>
+
+                        <!-- Sidebar -->
+                        <aside class="w-full lg:w-[380px] shrink-0 flex flex-col lg:sticky lg:top-4 lg:self-start pb-8">
+                            <div class="ux-dl__sidebar-inner w-full">
+                                <ng-content select="[ux-detail-sidebar]" />
+                            </div>
+                        </aside>
+                    </div>
+                </p-tabs>
+            </div>
+        </div>
+    `, isInline: true, styles: [":host{display:block;min-height:calc(100vh - 4rem);font-family:var(--p-font-family, \"Noto Sans\", sans-serif);background:transparent;color:var(--p-text-color)}.ux-dl__header{background:transparent;border-bottom:1px solid var(--p-content-border-color)}.ux-dl__scroll{scrollbar-width:thin;scrollbar-color:color-mix(in srgb,var(--p-primary-color) 25%,transparent) color-mix(in srgb,var(--p-surface-500) 8%,transparent)}.ux-dl__scroll::-webkit-scrollbar{width:10px;height:10px}.ux-dl__scroll::-webkit-scrollbar-track{background:color-mix(in srgb,var(--p-surface-500) 8%,transparent);border-radius:var(--p-content-border-radius, .375rem)}.ux-dl__scroll::-webkit-scrollbar-thumb{background:color-mix(in srgb,var(--p-primary-color) 25%,transparent);border-radius:var(--p-content-border-radius, .375rem)}.ux-dl__scroll::-webkit-scrollbar-thumb:hover{background:color-mix(in srgb,var(--p-primary-color) 45%,transparent)}.ux-dl__sidebar-inner,.ux-dl__sidebar-inner>*{display:flex;flex-direction:column;gap:1.5rem}.ux-dl__header-meta{overflow:hidden;max-height:80px;opacity:1;transition:max-height .25s ease-out,opacity .2s ease-out}.ux-dl__header-meta--hidden{max-height:0;opacity:0}:host :deep p-tablist{position:sticky;top:0;z-index:5;background:var(--p-content-background, var(--p-primary-400))}:host :deep p-tablist .p-tablist-content{width:100%}:host :deep p-tablist .p-tablist-tab-list{width:100%}:host :deep p-tab{flex:1;justify-content:center}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: TabsModule }, { kind: "component", type: i2$2.Tabs, selector: "p-tabs", inputs: ["value", "scrollable", "lazy", "selectOnFocus", "showNavigators", "tabindex"], outputs: ["valueChange"] }, { kind: "component", type: i2$2.TabPanels, selector: "p-tabpanels" }, { kind: "component", type: i2$2.TabPanel, selector: "p-tabpanel", inputs: ["lazy", "value"], outputs: ["valueChange"] }, { kind: "component", type: i2$2.TabList, selector: "p-tablist" }, { kind: "component", type: i2$2.Tab, selector: "p-tab", inputs: ["value", "disabled"], outputs: ["valueChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: DetailLayoutComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ux-detail-layout', changeDetection: ChangeDetectionStrategy.OnPush, imports: [CommonModule, TabsModule], host: { class: 'ux-detail-layout block' }, template: `
+        <div class="flex flex-col overflow-hidden" [style.height]="'calc(100vh - 64px)'">
+
+            <!-- Sticky header (projected) -->
+            <div class="ux-dl__header flex-shrink-0 z-10">
+                <div>
+                    <ng-content select="[ux-detail-header]" />
+                </div>
+                <div class="ux-dl__header-meta" [class.ux-dl__header-meta--hidden]="scrolled()">
+                    <ng-content select="[ux-detail-header-meta]" />
+                </div>
+            </div>
+
+            <!-- Scrollable body -->
+            <div class="flex flex-col flex-1 min-h-0 overflow-y-auto overflow-x-hidden ux-dl__scroll"
+                 (scroll)="onScroll($event)">
+
+                <!-- Full-width tab bar -->
+                <p-tabs [value]="activeTab()" (valueChange)="activeTab.set($event + '')">
+                    <p-tablist>
+                        @for (tab of tabs(); track tab.value) {
+                            <p-tab [value]="tab.value">
+                                @if (tab.icon) {
+                                    <i [class]="tab.icon" class="mr-2 text-sm"></i>
+                                }
+                                {{ tab.label }}
+                            </p-tab>
+                        }
+                    </p-tablist>
+
+                    <!-- Content + Sidebar row below tab bar -->
+                    <div class="flex flex-col lg:flex-row items-start gap-6 w-full py-4 sm:py-6">
+
+                        <!-- Main column: tab panels -->
+                        <div class="flex-1 min-w-0 flex flex-col gap-6">
+                            <p-tabpanels>
+                                @for (tab of tabs(); track tab.value) {
+                                    <p-tabpanel [value]="tab.value">
+                                        <div class="flex flex-col gap-6">
+                                            @if (getTabTemplate(tab.value); as tmpl) {
+                                                <ng-container [ngTemplateOutlet]="tmpl" />
+                                            }
+                                        </div>
+                                    </p-tabpanel>
+                                }
+                            </p-tabpanels>
+
+                            <!-- Footer below tab content -->
+                            <ng-content select="[ux-detail-footer]" />
+                        </div>
+
+                        <!-- Sidebar -->
+                        <aside class="w-full lg:w-[380px] shrink-0 flex flex-col lg:sticky lg:top-4 lg:self-start pb-8">
+                            <div class="ux-dl__sidebar-inner w-full">
+                                <ng-content select="[ux-detail-sidebar]" />
+                            </div>
+                        </aside>
+                    </div>
+                </p-tabs>
+            </div>
+        </div>
+    `, styles: [":host{display:block;min-height:calc(100vh - 4rem);font-family:var(--p-font-family, \"Noto Sans\", sans-serif);background:transparent;color:var(--p-text-color)}.ux-dl__header{background:transparent;border-bottom:1px solid var(--p-content-border-color)}.ux-dl__scroll{scrollbar-width:thin;scrollbar-color:color-mix(in srgb,var(--p-primary-color) 25%,transparent) color-mix(in srgb,var(--p-surface-500) 8%,transparent)}.ux-dl__scroll::-webkit-scrollbar{width:10px;height:10px}.ux-dl__scroll::-webkit-scrollbar-track{background:color-mix(in srgb,var(--p-surface-500) 8%,transparent);border-radius:var(--p-content-border-radius, .375rem)}.ux-dl__scroll::-webkit-scrollbar-thumb{background:color-mix(in srgb,var(--p-primary-color) 25%,transparent);border-radius:var(--p-content-border-radius, .375rem)}.ux-dl__scroll::-webkit-scrollbar-thumb:hover{background:color-mix(in srgb,var(--p-primary-color) 45%,transparent)}.ux-dl__sidebar-inner,.ux-dl__sidebar-inner>*{display:flex;flex-direction:column;gap:1.5rem}.ux-dl__header-meta{overflow:hidden;max-height:80px;opacity:1;transition:max-height .25s ease-out,opacity .2s ease-out}.ux-dl__header-meta--hidden{max-height:0;opacity:0}:host :deep p-tablist{position:sticky;top:0;z-index:5;background:var(--p-content-background, var(--p-primary-400))}:host :deep p-tablist .p-tablist-content{width:100%}:host :deep p-tablist .p-tablist-tab-list{width:100%}:host :deep p-tab{flex:1;justify-content:center}\n"] }]
+        }], propDecorators: { tabs: [{ type: i0.Input, args: [{ isSignal: true, alias: "tabs", required: true }] }], activeTab: [{ type: i0.Input, args: [{ isSignal: true, alias: "activeTab", required: false }] }, { type: i0.Output, args: ["activeTabChange"] }], tabTemplates: [{
+                type: ContentChildren,
+                args: [DetailTabDirective]
+            }] } });
+
 /*
  * Public API Surface of @unopsitg/ux
  */
@@ -2592,5 +3010,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { AiCardBgComponent, AppBreadcrumb, AppConfigurator, AppFooter, AppLayout, AppMenu, AppMenuitem, AppRightMenu, AppSearch, AppSidebar, AppTopbar, AuthLayout, BrandContrast, BrandCrisp, BrandSoft, LayoutService, MENU_MODEL, SIDEBAR_LOGO, TOPBAR_MOBILE_LOGO, brandPresets, brandPrimitives };
+export { AiCardBgComponent, AiInsightsCardComponent, AppBreadcrumb, AppConfigurator, AppFooter, AppLayout, AppMenu, AppMenuitem, AppRightMenu, AppSearch, AppSidebar, AppTopbar, AuthLayout, BrandContrast, BrandCrisp, BrandSoft, DetailLayoutComponent, DetailTabDirective, LayoutService, MENU_MODEL, SIDEBAR_LOGO, TOPBAR_MOBILE_LOGO, brandPresets, brandPrimitives };
 //# sourceMappingURL=unopsitg-ux.mjs.map