@life-cockpit/angular-ui-kit 2.10.0 → 2.12.0

package/fesm2022/life-cockpit-angular-ui-kit.mjs

@@ -140,6 +140,7 @@ const SizeInteractiveLgPadding = "0.625rem 1.25rem";
 const SizeInteractiveLgFontSize = "1.125rem";
 const SizeMinTouchWidth = "2.75rem"; // 44px minimum
 const SizeMinTouchHeight = "2.75rem"; // 44px minimum
+const SizeContentMaxWidth = "1536px"; // Canonical page content cap — matches lc-container size="xxl" and Tailwind's 2xl breakpoint
 
 /**
  * Theme Types
@@ -4805,11 +4806,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImpo
  * Container component for responsive max-width content layout.
  *
  * Features:
- * - Max-width presets (sm, md, lg, xl, full)
+ * - Max-width presets (sm, md, lg, xl, xxl, full)
  * - Optional horizontal padding removal
  * - Optional vertical padding
  * - Centered content alignment
  *
+ * `xxl` caps at the `--lc-content-max-width` token (1536px) — the widest step
+ * before `full`, for data-dense pages that `xl` squeezes but `full` stretches
+ * across ultrawide displays.
+ *
  * @example
  * ```html
  * <lc-container size="lg">Content here</lc-container>
@@ -4826,15 +4831,18 @@ class ContainerComponent {
         const classes = ['mx-auto'];
         // Semantic size class
         classes.push(`container-${this.size()}`);
-        // Size/Max-width
-        if (this.size() !== 'full') {
-            const sizeMap = {
-                sm: 'max-w-screen-sm',
-                md: 'max-w-screen-md',
-                lg: 'max-w-screen-lg',
-                xl: 'max-w-screen-xl',
-            };
-            classes.push(sizeMap[this.size()]);
+        // Size/Max-width — sm…xl map onto Tailwind's screen scale. `xxl` is capped
+        // in SCSS from the --lc-content-max-width token so apps can retune both the
+        // container and their own shell from one place; `full` stays uncapped.
+        const sizeMap = {
+            sm: 'max-w-screen-sm',
+            md: 'max-w-screen-md',
+            lg: 'max-w-screen-lg',
+            xl: 'max-w-screen-xl',
+        };
+        const maxWidthClass = sizeMap[this.size()];
+        if (maxWidthClass) {
+            classes.push(maxWidthClass);
         }
         // Padding
         if (!this.noPadding()) {
@@ -4846,11 +4854,11 @@ class ContainerComponent {
         return classes.join(' ');
     }, ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: ContainerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.10", type: ContainerComponent, isStandalone: true, selector: "lc-container", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, noPadding: { classPropertyName: "noPadding", publicName: "noPadding", isSignal: true, isRequired: false, transformFunction: null }, paddingY: { classPropertyName: "paddingY", publicName: "paddingY", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "this.hostClasses" } }, ngImport: i0, template: "<ng-content></ng-content>\n", styles: [":host{display:block}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.10", type: ContainerComponent, isStandalone: true, selector: "lc-container", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, noPadding: { classPropertyName: "noPadding", publicName: "noPadding", isSignal: true, isRequired: false, transformFunction: null }, paddingY: { classPropertyName: "paddingY", publicName: "paddingY", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "this.hostClasses" } }, ngImport: i0, template: "<ng-content></ng-content>\n", styles: [":host{display:block}:host(.container-xxl){max-width:var(--lc-content-max-width, 1536px)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: ContainerComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lc-container', standalone: true, imports: [], changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-content></ng-content>\n", styles: [":host{display:block}\n"] }]
+            args: [{ selector: 'lc-container', standalone: true, imports: [], changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-content></ng-content>\n", styles: [":host{display:block}:host(.container-xxl){max-width:var(--lc-content-max-width, 1536px)}\n"] }]
         }], propDecorators: { size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], noPadding: [{ type: i0.Input, args: [{ isSignal: true, alias: "noPadding", required: false }] }], paddingY: [{ type: i0.Input, args: [{ isSignal: true, alias: "paddingY", required: false }] }], hostClasses: [{
                 type: HostBinding,
                 args: ['class']
@@ -4948,13 +4956,13 @@ class PageHeaderComponent {
         .filter(Boolean)
         .join(' '), ...(ngDevMode ? [{ debugName: "hostClasses" }] : /* istanbul ignore next */ []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: PageHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.10", type: PageHeaderComponent, isStandalone: true, selector: "lc-page-header", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, iconVariant: { classPropertyName: "iconVariant", publicName: "iconVariant", isSignal: true, isRequired: false, transformFunction: null }, iconSize: { classPropertyName: "iconSize", publicName: "iconSize", isSignal: true, isRequired: false, transformFunction: null }, subtitle: { classPropertyName: "subtitle", publicName: "subtitle", isSignal: true, isRequired: false, transformFunction: null }, level: { classPropertyName: "level", publicName: "level", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, showDivider: { classPropertyName: "showDivider", publicName: "showDivider", isSignal: true, isRequired: false, transformFunction: null }, badge: { classPropertyName: "badge", publicName: "badge", isSignal: true, isRequired: false, transformFunction: null }, noPaddingX: { classPropertyName: "noPaddingX", publicName: "noPaddingX", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "hostClasses()" } }, ngImport: i0, template: "@if (true) {\n  <div class=\"lc-page-header__breadcrumbs\">\n    <ng-content select=\"[slot='breadcrumbs']\" />\n  </div>\n\n  <div class=\"lc-page-header__row\">\n    @if (icon()) {\n      <div\n        class=\"lc-page-header__icon lc-page-header__icon--{{ iconVariant() }} lc-page-header__icon--size-{{ iconSize() }}\"\n        aria-hidden=\"true\"\n      >\n        <lc-icon [name]=\"icon()!\" [size]=\"iconSize() === 'sm' ? 'xs' : 'sm'\" [decorative]=\"true\" />\n      </div>\n    }\n    <div class=\"lc-page-header__titles\">\n      @if (title()) {\n        @switch (level()) {\n          @case (1) {\n            <h1 class=\"lc-page-header__title\">\n              {{ title() }}\n              @if (badge()) {\n                <span class=\"lc-page-header__badge\">{{ badge() }}</span>\n              }\n              <span class=\"lc-page-header__title-suffix\">\n                <ng-content select=\"[slot='title-suffix']\" />\n              </span>\n            </h1>\n          }\n          @case (2) {\n            <h2 class=\"lc-page-header__title\">\n              {{ title() }}\n              @if (badge()) {\n                <span class=\"lc-page-header__badge\">{{ badge() }}</span>\n              }\n              <span class=\"lc-page-header__title-suffix\">\n                <ng-content select=\"[slot='title-suffix']\" />\n              </span>\n            </h2>\n          }\n          @case (3) {\n            <h3 class=\"lc-page-header__title\">\n              {{ title() }}\n              @if (badge()) {\n                <span class=\"lc-page-header__badge\">{{ badge() }}</span>\n              }\n              <span class=\"lc-page-header__title-suffix\">\n                <ng-content select=\"[slot='title-suffix']\" />\n              </span>\n            </h3>\n          }\n        }\n      }\n      @if (subtitle()) {\n        <p class=\"lc-page-header__subtitle\">{{ subtitle() }}</p>\n      }\n    </div>\n\n    <div class=\"lc-page-header__actions\">\n      <ng-content select=\"[slot='actions']\" />\n    </div>\n  </div>\n\n  <div class=\"lc-page-header__meta\">\n    <ng-content select=\"[slot='meta']\" />\n  </div>\n\n  <div class=\"lc-page-header__body\">\n    <ng-content />\n  </div>\n}\n", styles: [".lc-page-header{display:flex;flex-direction:column;gap:var(--lc-density-gap-md, 1rem);padding-block:var(--lc-density-padding-md, 1.5rem);padding-inline:var(--lc-density-padding-md, 1rem);box-sizing:border-box;width:100%;min-width:0}@media(min-width:640px){.lc-page-header{padding-inline:var(--lc-density-padding-lg, 1.5rem)}}@media(min-width:1024px){.lc-page-header{padding-inline:var(--lc-density-padding-xl, 2rem)}}.lc-page-header--flush-x{padding-inline:0}.lc-page-header__breadcrumbs,.lc-page-header__body{display:flex;flex-direction:column;gap:var(--lc-density-gap-sm, .5rem);min-width:0}.lc-page-header__meta{display:flex;flex-direction:row;flex-wrap:wrap;align-items:center;gap:var(--lc-density-gap-sm, .5rem);min-width:0}.lc-page-header__breadcrumbs:empty,.lc-page-header__meta:empty,.lc-page-header__body:empty,.lc-page-header__actions:empty{display:none}.lc-page-header__row{display:flex;flex-direction:row;align-items:flex-start;justify-content:space-between;gap:var(--lc-density-gap-md, 1rem);flex-wrap:wrap;min-width:0}.lc-page-header__titles{display:flex;flex-direction:column;gap:var(--lc-density-gap-xs, .25rem);min-width:0;flex:1 1 auto}.lc-page-header__icon{flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;width:2.75rem;height:2.75rem;border-radius:var(--border-radius-md)}.lc-page-header__icon--size-sm{width:2rem;height:2rem;border-radius:var(--border-radius-sm)}.lc-page-header__icon--brand{background-image:var(--gradient-brand-tile);color:var(--color-on-primary, #fff);box-shadow:var(--shadow-brand-glow)}.lc-page-header__icon--subtle{background-color:#20849724;color:var(--color-primary-500);border:1px solid var(--color-border-strong)}.lc-page-header__title{margin:0;font-family:var(--font-family-sans, inherit);font-weight:var(--font-weight-bold, 700);color:var(--color-text-primary, var(--color-neutral-900, #111));line-height:var(--line-height-tight, 1.2);display:inline-flex;align-items:center;gap:var(--lc-density-gap-sm, .5rem);min-width:0;word-break:break-word}.lc-page-header__subtitle{margin:0;font-family:var(--font-family-sans, inherit);color:var(--color-text-secondary, var(--color-neutral-600, #666));line-height:var(--line-height-normal, 1.5)}.lc-page-header__title-suffix{display:inline-flex;flex-wrap:wrap;align-items:center;gap:var(--lc-density-gap-sm, .5rem)}.lc-page-header__title-suffix:empty{display:none}.lc-page-header__badge{display:inline-flex;align-items:center;padding:.125rem .5rem;border-radius:var(--border-radius-full, 999px);background:var(--color-primary-100, #e0f2fe);color:var(--color-primary-700, #0369a1);font-size:var(--font-size-xs, .75rem);font-weight:var(--font-weight-semibold, 600);line-height:1.4;text-transform:uppercase;letter-spacing:.04em}.lc-page-header__actions{display:flex;flex-direction:row;flex-wrap:wrap;align-items:center;gap:var(--lc-density-gap-sm, .5rem);flex:0 0 auto;justify-content:flex-end}.lc-page-header--size-compact{--lc-density-gap-md: .5rem;--lc-density-gap-sm: .375rem;--lc-density-padding-md: .75rem}.lc-page-header--size-compact .lc-page-header__title{font-size:var(--font-size-lg, 1.125rem)}.lc-page-header--size-compact .lc-page-header__subtitle{font-size:var(--font-size-sm, .875rem)}.lc-page-header--size-default .lc-page-header__title{font-size:var(--font-size-2xl, 1.5rem)}.lc-page-header--size-default .lc-page-header__subtitle{font-size:var(--font-size-base, 1rem)}.lc-page-header--size-comfortable{--lc-density-gap-md: 1.5rem;--lc-density-padding-md: 2.5rem}.lc-page-header--size-comfortable .lc-page-header__title{font-size:var(--font-size-3xl, 1.875rem)}.lc-page-header--size-comfortable .lc-page-header__subtitle{font-size:var(--font-size-lg, 1.125rem)}.lc-page-header--divided{border-bottom:1px solid var(--color-border, var(--color-neutral-200, #e5e5e5))}\n"], dependencies: [{ kind: "component", type: IconComponent, selector: "lc-icon", inputs: ["name", "variant", "size", "color", "ariaLabel", "decorative", "strict"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.10", type: PageHeaderComponent, isStandalone: true, selector: "lc-page-header", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, iconVariant: { classPropertyName: "iconVariant", publicName: "iconVariant", isSignal: true, isRequired: false, transformFunction: null }, iconSize: { classPropertyName: "iconSize", publicName: "iconSize", isSignal: true, isRequired: false, transformFunction: null }, subtitle: { classPropertyName: "subtitle", publicName: "subtitle", isSignal: true, isRequired: false, transformFunction: null }, level: { classPropertyName: "level", publicName: "level", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, showDivider: { classPropertyName: "showDivider", publicName: "showDivider", isSignal: true, isRequired: false, transformFunction: null }, badge: { classPropertyName: "badge", publicName: "badge", isSignal: true, isRequired: false, transformFunction: null }, noPaddingX: { classPropertyName: "noPaddingX", publicName: "noPaddingX", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "hostClasses()" } }, ngImport: i0, template: "@if (true) {\n  <div class=\"lc-page-header__breadcrumbs\">\n    <ng-content select=\"[slot='breadcrumbs']\" />\n  </div>\n\n  <div class=\"lc-page-header__row\">\n    @if (icon()) {\n      <div\n        class=\"lc-page-header__icon lc-page-header__icon--{{ iconVariant() }} lc-page-header__icon--size-{{ iconSize() }}\"\n        aria-hidden=\"true\"\n      >\n        <lc-icon [name]=\"icon()!\" [size]=\"iconSize() === 'sm' ? 'xs' : 'sm'\" [decorative]=\"true\" />\n      </div>\n    }\n    <div class=\"lc-page-header__titles\">\n      <div class=\"lc-page-header__title-row\">\n        @if (title()) {\n          @switch (level()) {\n            @case (1) {\n              <h1 class=\"lc-page-header__title\">\n                {{ title() }}\n                @if (badge()) {\n                  <span class=\"lc-page-header__badge\">{{ badge() }}</span>\n                }\n                <span class=\"lc-page-header__title-suffix\">\n                  <ng-content select=\"[slot='title-suffix']\" />\n                </span>\n              </h1>\n            }\n            @case (2) {\n              <h2 class=\"lc-page-header__title\">\n                {{ title() }}\n                @if (badge()) {\n                  <span class=\"lc-page-header__badge\">{{ badge() }}</span>\n                }\n                <span class=\"lc-page-header__title-suffix\">\n                  <ng-content select=\"[slot='title-suffix']\" />\n                </span>\n              </h2>\n            }\n            @case (3) {\n              <h3 class=\"lc-page-header__title\">\n                {{ title() }}\n                @if (badge()) {\n                  <span class=\"lc-page-header__badge\">{{ badge() }}</span>\n                }\n                <span class=\"lc-page-header__title-suffix\">\n                  <ng-content select=\"[slot='title-suffix']\" />\n                </span>\n              </h3>\n            }\n          }\n        }\n\n        <div class=\"lc-page-header__actions\">\n          <ng-content select=\"[slot='actions']\" />\n        </div>\n      </div>\n\n      @if (subtitle()) {\n        <p class=\"lc-page-header__subtitle\">{{ subtitle() }}</p>\n      }\n    </div>\n  </div>\n\n  <div class=\"lc-page-header__meta\">\n    <ng-content select=\"[slot='meta']\" />\n  </div>\n\n  <div class=\"lc-page-header__body\">\n    <ng-content />\n  </div>\n}\n", styles: [".lc-page-header{display:flex;flex-direction:column;gap:var(--lc-density-gap-md, 1rem);padding-block:var(--lc-density-padding-md, 1.5rem);padding-inline:var(--lc-density-padding-md, 1rem);box-sizing:border-box;width:100%;min-width:0}@media(min-width:640px){.lc-page-header{padding-inline:var(--lc-density-padding-lg, 1.5rem)}}@media(min-width:1024px){.lc-page-header{padding-inline:var(--lc-density-padding-xl, 2rem)}}.lc-page-header--flush-x{padding-inline:0}.lc-page-header__breadcrumbs,.lc-page-header__body{display:flex;flex-direction:column;gap:var(--lc-density-gap-sm, .5rem);min-width:0}.lc-page-header__meta{display:flex;flex-direction:row;flex-wrap:wrap;align-items:center;gap:var(--lc-density-gap-sm, .5rem);min-width:0}.lc-page-header__breadcrumbs:empty,.lc-page-header__meta:empty,.lc-page-header__body:empty,.lc-page-header__actions:empty{display:none}.lc-page-header__row{display:flex;flex-direction:row;align-items:flex-start;justify-content:space-between;gap:var(--lc-density-gap-md, 1rem);flex-wrap:wrap;min-width:0}.lc-page-header__titles{display:flex;flex-direction:column;gap:var(--lc-density-gap-xs, .25rem);min-width:0;flex:1 1 auto}.lc-page-header__title-row{display:flex;flex-direction:row;align-items:center;flex-wrap:wrap;gap:var(--lc-density-gap-md, 1rem);min-width:0}.lc-page-header__icon{flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;width:2.75rem;height:2.75rem;border-radius:var(--border-radius-md)}.lc-page-header__icon--size-sm{width:2rem;height:2rem;border-radius:var(--border-radius-sm)}.lc-page-header__icon--brand{background-image:var(--gradient-brand-tile);color:var(--color-on-primary, #fff);box-shadow:var(--shadow-brand-glow)}.lc-page-header__icon--subtle{background-color:#20849724;color:var(--color-primary-500);border:1px solid var(--color-border-strong)}.lc-page-header__title{margin:0;font-family:var(--font-family-sans, inherit);font-weight:var(--font-weight-bold, 700);color:var(--color-text-primary, var(--color-neutral-900, #111));line-height:var(--line-height-tight, 1.2);display:inline-flex;align-items:center;gap:var(--lc-density-gap-sm, .5rem);min-width:0;word-break:break-word}.lc-page-header__subtitle{margin:0;font-family:var(--font-family-sans, inherit);color:var(--color-text-secondary, var(--color-neutral-600, #666));line-height:var(--line-height-normal, 1.5)}.lc-page-header__title-suffix{display:inline-flex;flex-wrap:wrap;align-items:center;gap:var(--lc-density-gap-sm, .5rem)}.lc-page-header__title-suffix:empty{display:none}.lc-page-header__badge{display:inline-flex;align-items:center;padding:.125rem .5rem;border-radius:var(--border-radius-full, 999px);background:var(--color-primary-100, #e0f2fe);color:var(--color-primary-700, #0369a1);font-size:var(--font-size-xs, .75rem);font-weight:var(--font-weight-semibold, 600);line-height:1.4;text-transform:uppercase;letter-spacing:.04em}.lc-page-header__actions{display:flex;flex-direction:row;flex-wrap:wrap;align-items:center;gap:var(--lc-density-gap-sm, .5rem);flex:0 0 auto;justify-content:flex-end;margin-inline-start:auto}.lc-page-header--size-compact{--lc-density-gap-md: .5rem;--lc-density-gap-sm: .375rem;--lc-density-padding-md: .75rem}.lc-page-header--size-compact .lc-page-header__title{font-size:var(--font-size-lg, 1.125rem)}.lc-page-header--size-compact .lc-page-header__subtitle{font-size:var(--font-size-sm, .875rem)}.lc-page-header--size-default .lc-page-header__title{font-size:var(--font-size-2xl, 1.5rem)}.lc-page-header--size-default .lc-page-header__subtitle{font-size:var(--font-size-base, 1rem)}.lc-page-header--size-comfortable{--lc-density-gap-md: 1.5rem;--lc-density-padding-md: 2.5rem}.lc-page-header--size-comfortable .lc-page-header__title{font-size:var(--font-size-3xl, 1.875rem)}.lc-page-header--size-comfortable .lc-page-header__subtitle{font-size:var(--font-size-lg, 1.125rem)}.lc-page-header--divided{border-bottom:1px solid var(--color-border, var(--color-neutral-200, #e5e5e5))}\n"], dependencies: [{ kind: "component", type: IconComponent, selector: "lc-icon", inputs: ["name", "variant", "size", "color", "ariaLabel", "decorative", "strict"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: PageHeaderComponent, decorators: [{
             type: Component,
             args: [{ selector: 'lc-page-header', standalone: true, imports: [IconComponent], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
                         '[class]': 'hostClasses()',
-                    }, template: "@if (true) {\n  <div class=\"lc-page-header__breadcrumbs\">\n    <ng-content select=\"[slot='breadcrumbs']\" />\n  </div>\n\n  <div class=\"lc-page-header__row\">\n    @if (icon()) {\n      <div\n        class=\"lc-page-header__icon lc-page-header__icon--{{ iconVariant() }} lc-page-header__icon--size-{{ iconSize() }}\"\n        aria-hidden=\"true\"\n      >\n        <lc-icon [name]=\"icon()!\" [size]=\"iconSize() === 'sm' ? 'xs' : 'sm'\" [decorative]=\"true\" />\n      </div>\n    }\n    <div class=\"lc-page-header__titles\">\n      @if (title()) {\n        @switch (level()) {\n          @case (1) {\n            <h1 class=\"lc-page-header__title\">\n              {{ title() }}\n              @if (badge()) {\n                <span class=\"lc-page-header__badge\">{{ badge() }}</span>\n              }\n              <span class=\"lc-page-header__title-suffix\">\n                <ng-content select=\"[slot='title-suffix']\" />\n              </span>\n            </h1>\n          }\n          @case (2) {\n            <h2 class=\"lc-page-header__title\">\n              {{ title() }}\n              @if (badge()) {\n                <span class=\"lc-page-header__badge\">{{ badge() }}</span>\n              }\n              <span class=\"lc-page-header__title-suffix\">\n                <ng-content select=\"[slot='title-suffix']\" />\n              </span>\n            </h2>\n          }\n          @case (3) {\n            <h3 class=\"lc-page-header__title\">\n              {{ title() }}\n              @if (badge()) {\n                <span class=\"lc-page-header__badge\">{{ badge() }}</span>\n              }\n              <span class=\"lc-page-header__title-suffix\">\n                <ng-content select=\"[slot='title-suffix']\" />\n              </span>\n            </h3>\n          }\n        }\n      }\n      @if (subtitle()) {\n        <p class=\"lc-page-header__subtitle\">{{ subtitle() }}</p>\n      }\n    </div>\n\n    <div class=\"lc-page-header__actions\">\n      <ng-content select=\"[slot='actions']\" />\n    </div>\n  </div>\n\n  <div class=\"lc-page-header__meta\">\n    <ng-content select=\"[slot='meta']\" />\n  </div>\n\n  <div class=\"lc-page-header__body\">\n    <ng-content />\n  </div>\n}\n", styles: [".lc-page-header{display:flex;flex-direction:column;gap:var(--lc-density-gap-md, 1rem);padding-block:var(--lc-density-padding-md, 1.5rem);padding-inline:var(--lc-density-padding-md, 1rem);box-sizing:border-box;width:100%;min-width:0}@media(min-width:640px){.lc-page-header{padding-inline:var(--lc-density-padding-lg, 1.5rem)}}@media(min-width:1024px){.lc-page-header{padding-inline:var(--lc-density-padding-xl, 2rem)}}.lc-page-header--flush-x{padding-inline:0}.lc-page-header__breadcrumbs,.lc-page-header__body{display:flex;flex-direction:column;gap:var(--lc-density-gap-sm, .5rem);min-width:0}.lc-page-header__meta{display:flex;flex-direction:row;flex-wrap:wrap;align-items:center;gap:var(--lc-density-gap-sm, .5rem);min-width:0}.lc-page-header__breadcrumbs:empty,.lc-page-header__meta:empty,.lc-page-header__body:empty,.lc-page-header__actions:empty{display:none}.lc-page-header__row{display:flex;flex-direction:row;align-items:flex-start;justify-content:space-between;gap:var(--lc-density-gap-md, 1rem);flex-wrap:wrap;min-width:0}.lc-page-header__titles{display:flex;flex-direction:column;gap:var(--lc-density-gap-xs, .25rem);min-width:0;flex:1 1 auto}.lc-page-header__icon{flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;width:2.75rem;height:2.75rem;border-radius:var(--border-radius-md)}.lc-page-header__icon--size-sm{width:2rem;height:2rem;border-radius:var(--border-radius-sm)}.lc-page-header__icon--brand{background-image:var(--gradient-brand-tile);color:var(--color-on-primary, #fff);box-shadow:var(--shadow-brand-glow)}.lc-page-header__icon--subtle{background-color:#20849724;color:var(--color-primary-500);border:1px solid var(--color-border-strong)}.lc-page-header__title{margin:0;font-family:var(--font-family-sans, inherit);font-weight:var(--font-weight-bold, 700);color:var(--color-text-primary, var(--color-neutral-900, #111));line-height:var(--line-height-tight, 1.2);display:inline-flex;align-items:center;gap:var(--lc-density-gap-sm, .5rem);min-width:0;word-break:break-word}.lc-page-header__subtitle{margin:0;font-family:var(--font-family-sans, inherit);color:var(--color-text-secondary, var(--color-neutral-600, #666));line-height:var(--line-height-normal, 1.5)}.lc-page-header__title-suffix{display:inline-flex;flex-wrap:wrap;align-items:center;gap:var(--lc-density-gap-sm, .5rem)}.lc-page-header__title-suffix:empty{display:none}.lc-page-header__badge{display:inline-flex;align-items:center;padding:.125rem .5rem;border-radius:var(--border-radius-full, 999px);background:var(--color-primary-100, #e0f2fe);color:var(--color-primary-700, #0369a1);font-size:var(--font-size-xs, .75rem);font-weight:var(--font-weight-semibold, 600);line-height:1.4;text-transform:uppercase;letter-spacing:.04em}.lc-page-header__actions{display:flex;flex-direction:row;flex-wrap:wrap;align-items:center;gap:var(--lc-density-gap-sm, .5rem);flex:0 0 auto;justify-content:flex-end}.lc-page-header--size-compact{--lc-density-gap-md: .5rem;--lc-density-gap-sm: .375rem;--lc-density-padding-md: .75rem}.lc-page-header--size-compact .lc-page-header__title{font-size:var(--font-size-lg, 1.125rem)}.lc-page-header--size-compact .lc-page-header__subtitle{font-size:var(--font-size-sm, .875rem)}.lc-page-header--size-default .lc-page-header__title{font-size:var(--font-size-2xl, 1.5rem)}.lc-page-header--size-default .lc-page-header__subtitle{font-size:var(--font-size-base, 1rem)}.lc-page-header--size-comfortable{--lc-density-gap-md: 1.5rem;--lc-density-padding-md: 2.5rem}.lc-page-header--size-comfortable .lc-page-header__title{font-size:var(--font-size-3xl, 1.875rem)}.lc-page-header--size-comfortable .lc-page-header__subtitle{font-size:var(--font-size-lg, 1.125rem)}.lc-page-header--divided{border-bottom:1px solid var(--color-border, var(--color-neutral-200, #e5e5e5))}\n"] }]
+                    }, template: "@if (true) {\n  <div class=\"lc-page-header__breadcrumbs\">\n    <ng-content select=\"[slot='breadcrumbs']\" />\n  </div>\n\n  <div class=\"lc-page-header__row\">\n    @if (icon()) {\n      <div\n        class=\"lc-page-header__icon lc-page-header__icon--{{ iconVariant() }} lc-page-header__icon--size-{{ iconSize() }}\"\n        aria-hidden=\"true\"\n      >\n        <lc-icon [name]=\"icon()!\" [size]=\"iconSize() === 'sm' ? 'xs' : 'sm'\" [decorative]=\"true\" />\n      </div>\n    }\n    <div class=\"lc-page-header__titles\">\n      <div class=\"lc-page-header__title-row\">\n        @if (title()) {\n          @switch (level()) {\n            @case (1) {\n              <h1 class=\"lc-page-header__title\">\n                {{ title() }}\n                @if (badge()) {\n                  <span class=\"lc-page-header__badge\">{{ badge() }}</span>\n                }\n                <span class=\"lc-page-header__title-suffix\">\n                  <ng-content select=\"[slot='title-suffix']\" />\n                </span>\n              </h1>\n            }\n            @case (2) {\n              <h2 class=\"lc-page-header__title\">\n                {{ title() }}\n                @if (badge()) {\n                  <span class=\"lc-page-header__badge\">{{ badge() }}</span>\n                }\n                <span class=\"lc-page-header__title-suffix\">\n                  <ng-content select=\"[slot='title-suffix']\" />\n                </span>\n              </h2>\n            }\n            @case (3) {\n              <h3 class=\"lc-page-header__title\">\n                {{ title() }}\n                @if (badge()) {\n                  <span class=\"lc-page-header__badge\">{{ badge() }}</span>\n                }\n                <span class=\"lc-page-header__title-suffix\">\n                  <ng-content select=\"[slot='title-suffix']\" />\n                </span>\n              </h3>\n            }\n          }\n        }\n\n        <div class=\"lc-page-header__actions\">\n          <ng-content select=\"[slot='actions']\" />\n        </div>\n      </div>\n\n      @if (subtitle()) {\n        <p class=\"lc-page-header__subtitle\">{{ subtitle() }}</p>\n      }\n    </div>\n  </div>\n\n  <div class=\"lc-page-header__meta\">\n    <ng-content select=\"[slot='meta']\" />\n  </div>\n\n  <div class=\"lc-page-header__body\">\n    <ng-content />\n  </div>\n}\n", styles: [".lc-page-header{display:flex;flex-direction:column;gap:var(--lc-density-gap-md, 1rem);padding-block:var(--lc-density-padding-md, 1.5rem);padding-inline:var(--lc-density-padding-md, 1rem);box-sizing:border-box;width:100%;min-width:0}@media(min-width:640px){.lc-page-header{padding-inline:var(--lc-density-padding-lg, 1.5rem)}}@media(min-width:1024px){.lc-page-header{padding-inline:var(--lc-density-padding-xl, 2rem)}}.lc-page-header--flush-x{padding-inline:0}.lc-page-header__breadcrumbs,.lc-page-header__body{display:flex;flex-direction:column;gap:var(--lc-density-gap-sm, .5rem);min-width:0}.lc-page-header__meta{display:flex;flex-direction:row;flex-wrap:wrap;align-items:center;gap:var(--lc-density-gap-sm, .5rem);min-width:0}.lc-page-header__breadcrumbs:empty,.lc-page-header__meta:empty,.lc-page-header__body:empty,.lc-page-header__actions:empty{display:none}.lc-page-header__row{display:flex;flex-direction:row;align-items:flex-start;justify-content:space-between;gap:var(--lc-density-gap-md, 1rem);flex-wrap:wrap;min-width:0}.lc-page-header__titles{display:flex;flex-direction:column;gap:var(--lc-density-gap-xs, .25rem);min-width:0;flex:1 1 auto}.lc-page-header__title-row{display:flex;flex-direction:row;align-items:center;flex-wrap:wrap;gap:var(--lc-density-gap-md, 1rem);min-width:0}.lc-page-header__icon{flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;width:2.75rem;height:2.75rem;border-radius:var(--border-radius-md)}.lc-page-header__icon--size-sm{width:2rem;height:2rem;border-radius:var(--border-radius-sm)}.lc-page-header__icon--brand{background-image:var(--gradient-brand-tile);color:var(--color-on-primary, #fff);box-shadow:var(--shadow-brand-glow)}.lc-page-header__icon--subtle{background-color:#20849724;color:var(--color-primary-500);border:1px solid var(--color-border-strong)}.lc-page-header__title{margin:0;font-family:var(--font-family-sans, inherit);font-weight:var(--font-weight-bold, 700);color:var(--color-text-primary, var(--color-neutral-900, #111));line-height:var(--line-height-tight, 1.2);display:inline-flex;align-items:center;gap:var(--lc-density-gap-sm, .5rem);min-width:0;word-break:break-word}.lc-page-header__subtitle{margin:0;font-family:var(--font-family-sans, inherit);color:var(--color-text-secondary, var(--color-neutral-600, #666));line-height:var(--line-height-normal, 1.5)}.lc-page-header__title-suffix{display:inline-flex;flex-wrap:wrap;align-items:center;gap:var(--lc-density-gap-sm, .5rem)}.lc-page-header__title-suffix:empty{display:none}.lc-page-header__badge{display:inline-flex;align-items:center;padding:.125rem .5rem;border-radius:var(--border-radius-full, 999px);background:var(--color-primary-100, #e0f2fe);color:var(--color-primary-700, #0369a1);font-size:var(--font-size-xs, .75rem);font-weight:var(--font-weight-semibold, 600);line-height:1.4;text-transform:uppercase;letter-spacing:.04em}.lc-page-header__actions{display:flex;flex-direction:row;flex-wrap:wrap;align-items:center;gap:var(--lc-density-gap-sm, .5rem);flex:0 0 auto;justify-content:flex-end;margin-inline-start:auto}.lc-page-header--size-compact{--lc-density-gap-md: .5rem;--lc-density-gap-sm: .375rem;--lc-density-padding-md: .75rem}.lc-page-header--size-compact .lc-page-header__title{font-size:var(--font-size-lg, 1.125rem)}.lc-page-header--size-compact .lc-page-header__subtitle{font-size:var(--font-size-sm, .875rem)}.lc-page-header--size-default .lc-page-header__title{font-size:var(--font-size-2xl, 1.5rem)}.lc-page-header--size-default .lc-page-header__subtitle{font-size:var(--font-size-base, 1rem)}.lc-page-header--size-comfortable{--lc-density-gap-md: 1.5rem;--lc-density-padding-md: 2.5rem}.lc-page-header--size-comfortable .lc-page-header__title{font-size:var(--font-size-3xl, 1.875rem)}.lc-page-header--size-comfortable .lc-page-header__subtitle{font-size:var(--font-size-lg, 1.125rem)}.lc-page-header--divided{border-bottom:1px solid var(--color-border, var(--color-neutral-200, #e5e5e5))}\n"] }]
         }], propDecorators: { title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], iconVariant: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconVariant", required: false }] }], iconSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconSize", required: false }] }], subtitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "subtitle", required: false }] }], level: [{ type: i0.Input, args: [{ isSignal: true, alias: "level", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], showDivider: [{ type: i0.Input, args: [{ isSignal: true, alias: "showDivider", required: false }] }], badge: [{ type: i0.Input, args: [{ isSignal: true, alias: "badge", required: false }] }], noPaddingX: [{ type: i0.Input, args: [{ isSignal: true, alias: "noPaddingX", required: false }] }] } });
 
 /**
@@ -5014,6 +5022,19 @@ class PageLayoutComponent {
     scrollBody = input(true, ...(ngDevMode ? [{ debugName: "scrollBody" }] : /* istanbul ignore next */ []));
     /** Add density-aware padding to the body. Off by default so embedded components keep their own padding. */
     padded = input(false, ...(ngDevMode ? [{ debugName: "padded" }] : /* istanbul ignore next */ []));
+    /**
+     * How wide content may grow on very large monitors.
+     * - `'capped'` (default): header, body and footer are capped at
+     *   `--lc-content-max-width` and centred, so content doesn't stretch edge to
+     *   edge on wide/ultrawide displays. All three regions share the cap, so the
+     *   page title stays aligned with the body beneath it.
+     * - `'full'`: no cap — content spans the whole shell. Use for full-bleed
+     *   bodies (maps, boards, canvases) that should use every pixel.
+     *
+     * Override the width itself — globally or per subtree — via the
+     * `--lc-content-max-width` custom property.
+     */
+    contentWidth = input('capped', ...(ngDevMode ? [{ debugName: "contentWidth" }] : /* istanbul ignore next */ []));
     get hostClasses() {
         return this.classes();
     }
@@ -5024,15 +5045,17 @@ class PageLayoutComponent {
             classes.push('scroll-body');
         if (this.padded())
             classes.push('padded');
+        if (this.contentWidth() === 'capped')
+            classes.push('content-capped');
         return classes.join(' ');
     }, ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: PageLayoutComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.10", type: PageLayoutComponent, isStandalone: true, selector: "lc-page-layout", inputs: { fill: { classPropertyName: "fill", publicName: "fill", isSignal: true, isRequired: false, transformFunction: null }, scrollBody: { classPropertyName: "scrollBody", publicName: "scrollBody", isSignal: true, isRequired: false, transformFunction: null }, padded: { classPropertyName: "padded", publicName: "padded", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "this.hostClasses" } }, ngImport: i0, template: "<div class=\"lc-page-layout__header\">\n  <ng-content select=\"[layout-header]\"></ng-content>\n</div>\n\n<div class=\"lc-page-layout__body\">\n  <ng-content></ng-content>\n</div>\n\n<div class=\"lc-page-layout__footer\">\n  <ng-content select=\"[layout-footer]\"></ng-content>\n</div>\n", styles: [":host{display:flex;flex-direction:column;width:100%;min-height:0;overflow:hidden;box-sizing:border-box}:host(.fill-screen){height:100dvh}:host(.fill-parent){height:100%}.lc-page-layout__header,.lc-page-layout__footer{flex:0 0 auto;min-width:0}.lc-page-layout__body{flex:1 1 auto;min-height:0;min-width:0}:host(.scroll-body) .lc-page-layout__body{overflow:auto}:host(.padded) .lc-page-layout__body{padding:var(--lc-density-padding-md, 1rem)}@media(min-width:640px){:host(.padded) .lc-page-layout__body{padding:var(--lc-density-padding-lg, 1.5rem)}}@media(min-width:1024px){:host(.padded) .lc-page-layout__body{padding:var(--lc-density-padding-xl, 2rem)}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.10", type: PageLayoutComponent, isStandalone: true, selector: "lc-page-layout", inputs: { fill: { classPropertyName: "fill", publicName: "fill", isSignal: true, isRequired: false, transformFunction: null }, scrollBody: { classPropertyName: "scrollBody", publicName: "scrollBody", isSignal: true, isRequired: false, transformFunction: null }, padded: { classPropertyName: "padded", publicName: "padded", isSignal: true, isRequired: false, transformFunction: null }, contentWidth: { classPropertyName: "contentWidth", publicName: "contentWidth", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "this.hostClasses" } }, ngImport: i0, template: "<div class=\"lc-page-layout__header\">\n  <ng-content select=\"[layout-header]\"></ng-content>\n</div>\n\n<div class=\"lc-page-layout__body\">\n  <ng-content></ng-content>\n</div>\n\n<div class=\"lc-page-layout__footer\">\n  <ng-content select=\"[layout-footer]\"></ng-content>\n</div>\n", styles: [":host{display:flex;flex-direction:column;width:100%;min-height:0;overflow:hidden;box-sizing:border-box}:host(.fill-screen){height:100dvh}:host(.fill-parent){height:100%}.lc-page-layout__header,.lc-page-layout__footer{flex:0 0 auto;min-width:0}.lc-page-layout__body{flex:1 1 auto;min-height:0;min-width:0}:host(.scroll-body) .lc-page-layout__body{overflow:auto}:host(.content-capped) .lc-page-layout__header,:host(.content-capped) .lc-page-layout__body,:host(.content-capped) .lc-page-layout__footer{max-width:var(--lc-content-max-width, 1536px);margin-inline:auto;width:100%}:host(.padded) .lc-page-layout__body{padding:var(--lc-density-padding-md, 1rem)}@media(min-width:640px){:host(.padded) .lc-page-layout__body{padding:var(--lc-density-padding-lg, 1.5rem)}}@media(min-width:1024px){:host(.padded) .lc-page-layout__body{padding:var(--lc-density-padding-xl, 2rem)}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: PageLayoutComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lc-page-layout', standalone: true, imports: [], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"lc-page-layout__header\">\n  <ng-content select=\"[layout-header]\"></ng-content>\n</div>\n\n<div class=\"lc-page-layout__body\">\n  <ng-content></ng-content>\n</div>\n\n<div class=\"lc-page-layout__footer\">\n  <ng-content select=\"[layout-footer]\"></ng-content>\n</div>\n", styles: [":host{display:flex;flex-direction:column;width:100%;min-height:0;overflow:hidden;box-sizing:border-box}:host(.fill-screen){height:100dvh}:host(.fill-parent){height:100%}.lc-page-layout__header,.lc-page-layout__footer{flex:0 0 auto;min-width:0}.lc-page-layout__body{flex:1 1 auto;min-height:0;min-width:0}:host(.scroll-body) .lc-page-layout__body{overflow:auto}:host(.padded) .lc-page-layout__body{padding:var(--lc-density-padding-md, 1rem)}@media(min-width:640px){:host(.padded) .lc-page-layout__body{padding:var(--lc-density-padding-lg, 1.5rem)}}@media(min-width:1024px){:host(.padded) .lc-page-layout__body{padding:var(--lc-density-padding-xl, 2rem)}}\n"] }]
-        }], propDecorators: { fill: [{ type: i0.Input, args: [{ isSignal: true, alias: "fill", required: false }] }], scrollBody: [{ type: i0.Input, args: [{ isSignal: true, alias: "scrollBody", required: false }] }], padded: [{ type: i0.Input, args: [{ isSignal: true, alias: "padded", required: false }] }], hostClasses: [{
+            args: [{ selector: 'lc-page-layout', standalone: true, imports: [], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"lc-page-layout__header\">\n  <ng-content select=\"[layout-header]\"></ng-content>\n</div>\n\n<div class=\"lc-page-layout__body\">\n  <ng-content></ng-content>\n</div>\n\n<div class=\"lc-page-layout__footer\">\n  <ng-content select=\"[layout-footer]\"></ng-content>\n</div>\n", styles: [":host{display:flex;flex-direction:column;width:100%;min-height:0;overflow:hidden;box-sizing:border-box}:host(.fill-screen){height:100dvh}:host(.fill-parent){height:100%}.lc-page-layout__header,.lc-page-layout__footer{flex:0 0 auto;min-width:0}.lc-page-layout__body{flex:1 1 auto;min-height:0;min-width:0}:host(.scroll-body) .lc-page-layout__body{overflow:auto}:host(.content-capped) .lc-page-layout__header,:host(.content-capped) .lc-page-layout__body,:host(.content-capped) .lc-page-layout__footer{max-width:var(--lc-content-max-width, 1536px);margin-inline:auto;width:100%}:host(.padded) .lc-page-layout__body{padding:var(--lc-density-padding-md, 1rem)}@media(min-width:640px){:host(.padded) .lc-page-layout__body{padding:var(--lc-density-padding-lg, 1.5rem)}}@media(min-width:1024px){:host(.padded) .lc-page-layout__body{padding:var(--lc-density-padding-xl, 2rem)}}\n"] }]
+        }], propDecorators: { fill: [{ type: i0.Input, args: [{ isSignal: true, alias: "fill", required: false }] }], scrollBody: [{ type: i0.Input, args: [{ isSignal: true, alias: "scrollBody", required: false }] }], padded: [{ type: i0.Input, args: [{ isSignal: true, alias: "padded", required: false }] }], contentWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "contentWidth", required: false }] }], hostClasses: [{
                 type: HostBinding,
                 args: ['class']
             }] } });
@@ -12040,8 +12063,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImpo
 /**
  * Chat component for conversational user interfaces.
  *
+ * Compact, document-style layout: agent/system turns flow as full-width text on
+ * a left timeline rail, while user turns render as right-aligned, accent-tinted
+ * bubbles (no name label) with the timestamp on a muted line beneath. Spacing is
+ * a single space-efficient scale (tunable via the `--lc-chat-*` custom
+ * properties); there is no separate roomy variant.
+ *
  * Features:
  * - User, agent, and system message roles
+ * - Right-aligned user bubbles with an optional avatar: `msg.avatar` image, or a
+ *   monogram built from `msg.name` initials (gated by `showAvatars`)
+ * - Agent/system turns on a left rail with a status dot, avatar or semantic icon
  * - Streaming cursor indicator for AI responses
  * - Typing indicator with animated dots
  * - Auto-scroll to latest message
@@ -12264,6 +12296,31 @@ class ChatComponent {
             return '';
         return date.toLocaleTimeString('de-DE', { hour: '2-digit', minute: '2-digit' });
     }
+    /**
+     * Up to two uppercase initials from a name (first + last word), used for the
+     * user avatar monogram when no `avatar` image is provided. Returns `''` for an
+     * empty/whitespace name so the caller can skip rendering.
+     */
+    initials(name) {
+        if (!name)
+            return '';
+        const parts = name.trim().split(/\s+/).filter(Boolean);
+        if (parts.length === 0)
+            return '';
+        const first = parts[0][0] ?? '';
+        const last = parts.length > 1 ? parts[parts.length - 1][0] ?? '' : '';
+        return (first + last).toUpperCase();
+    }
+    /**
+     * Whether to show an avatar on a user turn: only when avatars are enabled and
+     * the message carries either an image or a name we can build a monogram from.
+     * Keeps the labelless bubble clean when there's nothing to show.
+     */
+    showUserAvatar(msg) {
+        return (msg.role === 'user' &&
+            this.showAvatars() &&
+            !!(msg.avatar || this.initials(msg.name)));
+    }
     shouldRenderMarkdown(role) {
         const mode = this.renderMarkdown();
         if (mode === false)
@@ -12336,11 +12393,11 @@ class ChatComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: ChatComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.10", type: ChatComponent, isStandalone: true, selector: "lc-chat", inputs: { messages: { classPropertyName: "messages", publicName: "messages", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, isStreaming: { classPropertyName: "isStreaming", publicName: "isStreaming", isSignal: true, isRequired: false, transformFunction: null }, showHeader: { classPropertyName: "showHeader", publicName: "showHeader", isSignal: true, isRequired: false, transformFunction: null }, bordered: { classPropertyName: "bordered", publicName: "bordered", isSignal: true, isRequired: false, transformFunction: null }, messageAnchor: { classPropertyName: "messageAnchor", publicName: "messageAnchor", isSignal: true, isRequired: false, transformFunction: null }, contentWidth: { classPropertyName: "contentWidth", publicName: "contentWidth", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, showAvatars: { classPropertyName: "showAvatars", publicName: "showAvatars", isSignal: true, isRequired: false, transformFunction: null }, showTimestamps: { classPropertyName: "showTimestamps", publicName: "showTimestamps", isSignal: true, isRequired: false, transformFunction: null }, renderMarkdown: { classPropertyName: "renderMarkdown", publicName: "renderMarkdown", isSignal: true, isRequired: false, transformFunction: null }, allowFileUpload: { classPropertyName: "allowFileUpload", publicName: "allowFileUpload", isSignal: true, isRequired: false, transformFunction: null }, accept: { classPropertyName: "accept", publicName: "accept", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, maxFileSize: { classPropertyName: "maxFileSize", publicName: "maxFileSize", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { messageSend: "messageSend", fileAttach: "fileAttach" }, queries: [{ propertyName: "messageTemplate", first: true, predicate: ["messageTemplate"], descendants: true }], viewQueries: [{ propertyName: "scrollContainer", first: true, predicate: ["scrollContainer"], descendants: true }, { propertyName: "fileInput", first: true, predicate: ["fileInput"], descendants: true }, { propertyName: "composerInput", first: true, predicate: ["composerInput"], descendants: true }], ngImport: i0, template: "<div\n  class=\"lc-chat\"\n  [class.lc-chat--borderless]=\"!bordered()\"\n  [class.lc-chat--width-narrow]=\"contentWidth() === 'narrow'\"\n  [class.lc-chat--width-full]=\"contentWidth() === 'full'\"\n>\n  @if (showHeader()) {\n    <div class=\"lc-chat__header\">\n      <span class=\"lc-chat__title\">{{ title() }}</span>\n      @if (isStreaming()) {\n        <span class=\"lc-chat__streaming-badge\">Streaming\u2026</span>\n      }\n    </div>\n  }\n\n  <div\n    class=\"lc-chat__messages\"\n    [class.lc-chat__messages--anchor-bottom]=\"messageAnchor() === 'bottom'\"\n    #scrollContainer\n  >\n    <div class=\"lc-chat__thread\">\n      @for (msg of formattedMessages(); track msg.id) {\n        <div\n          class=\"lc-chat__message\"\n          [class.lc-chat__message--user]=\"msg.role === 'user'\"\n          [class.lc-chat__message--agent]=\"msg.role === 'agent'\"\n          [class.lc-chat__message--system]=\"msg.role === 'system'\"\n          [class.lc-chat__message--streaming]=\"msg.streaming\"\n          [attr.role]=\"msg.status === 'error' ? 'alert' : null\"\n          [attr.aria-live]=\"statusAriaLive(msg.status)\"\n        >\n          @if (msg.role !== 'user' && (showAvatars() || isSemanticStatus(msg.status))) {\n            <div class=\"lc-chat__marker\">\n              @if (isSemanticStatus(msg.status)) {\n                <span class=\"lc-chat__status-icon\">\n                  <lc-icon [name]=\"statusIcon(msg.status)\" size=\"xs\" [color]=\"statusColor(msg.status)\" [decorative]=\"true\" />\n                </span>\n              } @else if (msg.avatar) {\n                <img [src]=\"msg.avatar\" [alt]=\"msg.name || msg.role\" class=\"lc-chat__avatar-img\" />\n              } @else {\n                <span\n                  class=\"lc-chat__dot\"\n                  [class.lc-chat__dot--agent]=\"msg.role === 'agent'\"\n                  [class.lc-chat__dot--system]=\"msg.role === 'system'\"\n                ></span>\n              }\n            </div>\n          }\n\n          <div class=\"lc-chat__bubble\" [class.lc-chat__bubble--streaming]=\"msg.streaming\">\n            @if (msg.role === 'user') {\n              <div class=\"lc-chat__meta\">\n                <span class=\"lc-chat__name\">{{ msg.name || 'Du' }}</span>\n                @if (showTimestamps() && msg.timestamp) {\n                  <span class=\"lc-chat__time\">{{ formatTime(msg.timestamp) }}</span>\n                }\n              </div>\n            } @else if (msg.name) {\n              <div class=\"lc-chat__name\">{{ msg.name }}</div>\n            }\n            <div class=\"lc-chat__content\">\n              @if (isSemanticStatus(msg.status)) {\n                <span class=\"lc-chat__sr-only\">{{ statusLabel(msg.status) }} </span>\n              }\n              @if (messageTemplate) {\n                <ng-container *ngTemplateOutlet=\"messageTemplate; context: { $implicit: msg }\" />\n              } @else if (shouldRenderMarkdown(msg.role)) {\n                <lc-markdown [content]=\"msg.content\" variant=\"chat\" />\n              } @else {\n                {{ msg.content }}\n              }\n              <span class=\"lc-chat__cursor\" [class.lc-chat__cursor--visible]=\"msg.streaming\"></span>\n            </div>\n            @if (msg.attachments?.length) {\n              <div class=\"lc-chat__attachments\">\n                @for (att of msg.attachments; track att.id) {\n                  @if (isImage(att) && att.url) {\n                    <a class=\"lc-chat__attachment lc-chat__attachment--image\" [href]=\"att.url\" target=\"_blank\" rel=\"noopener\">\n                      <img [src]=\"att.url\" [alt]=\"att.name\" />\n                    </a>\n                  } @else {\n                    <a\n                      class=\"lc-chat__attachment lc-chat__attachment--file\"\n                      [href]=\"att.url || null\"\n                      [attr.download]=\"att.url ? att.name : null\"\n                      target=\"_blank\"\n                      rel=\"noopener\"\n                    >\n                      <svg class=\"lc-chat__attachment-icon\" width=\"16\" height=\"16\" viewBox=\"0 0 20 20\" fill=\"none\" aria-hidden=\"true\">\n                        <path d=\"M6 2.5h6L16 6.5v10A1.5 1.5 0 0 1 14.5 18h-9A1.5 1.5 0 0 1 4 16.5v-12A1.5 1.5 0 0 1 5.5 3H6V2.5Z\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linejoin=\"round\"/>\n                        <path d=\"M12 2.5V6.5H16\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linejoin=\"round\"/>\n                      </svg>\n                      <span class=\"lc-chat__attachment-name\">{{ att.name }}</span>\n                      @if (att.size) {\n                        <span class=\"lc-chat__attachment-size\">{{ formatBytes(att.size) }}</span>\n                      }\n                    </a>\n                  }\n                }\n              </div>\n            }\n            @if (showTimestamps() && msg.timestamp && msg.role !== 'user') {\n              <div class=\"lc-chat__time\">{{ formatTime(msg.timestamp) }}</div>\n            }\n          </div>\n        </div>\n      }\n\n      @if (isStreaming() && !(formattedMessages().length && formattedMessages()[formattedMessages().length - 1].streaming)) {\n        <div class=\"lc-chat__message lc-chat__message--agent\">\n          @if (showAvatars()) {\n            <div class=\"lc-chat__marker\">\n              <span class=\"lc-chat__dot lc-chat__dot--agent\"></span>\n            </div>\n          }\n          <div class=\"lc-chat__bubble\">\n            <div class=\"lc-chat__typing\">\n              <span></span><span></span><span></span>\n            </div>\n          </div>\n        </div>\n      }\n    </div>\n  </div>\n\n  <div class=\"lc-chat__input-area\">\n    <div class=\"lc-chat__composer\">\n      @if (allowFileUpload() && pendingAttachments().length) {\n        <div class=\"lc-chat__pending-attachments\">\n          @for (att of pendingAttachments(); track att.id) {\n            <div class=\"lc-chat__pending-attachment\" [class.lc-chat__pending-attachment--image]=\"isImage(att)\">\n              @if (isImage(att) && att.url) {\n                <img class=\"lc-chat__pending-thumb\" [src]=\"att.url\" [alt]=\"att.name\" />\n              } @else {\n                <svg class=\"lc-chat__attachment-icon\" width=\"16\" height=\"16\" viewBox=\"0 0 20 20\" fill=\"none\" aria-hidden=\"true\">\n                  <path d=\"M6 2.5h6L16 6.5v10A1.5 1.5 0 0 1 14.5 18h-9A1.5 1.5 0 0 1 4 16.5v-12A1.5 1.5 0 0 1 5.5 3H6V2.5Z\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linejoin=\"round\"/>\n                  <path d=\"M12 2.5V6.5H16\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linejoin=\"round\"/>\n                </svg>\n              }\n              <span class=\"lc-chat__pending-name\">{{ att.name }}</span>\n              @if (att.size) {\n                <span class=\"lc-chat__pending-size\">{{ formatBytes(att.size) }}</span>\n              }\n              <button\n                type=\"button\"\n                class=\"lc-chat__pending-remove\"\n                (click)=\"removeAttachment(att.id)\"\n                [attr.aria-label]=\"'Entfernen: ' + att.name\"\n              >\n                <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" aria-hidden=\"true\">\n                  <path d=\"M3 3l6 6M9 3l-6 6\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\"/>\n                </svg>\n              </button>\n            </div>\n          }\n        </div>\n      }\n\n      <textarea\n        #composerInput\n        class=\"lc-chat__input\"\n        [placeholder]=\"placeholder()\"\n        [value]=\"inputValue()\"\n        [disabled]=\"disabled()\"\n        (input)=\"onInput($event)\"\n        (keydown)=\"onKeydown($event)\"\n        rows=\"1\"\n      ></textarea>\n\n      <div class=\"lc-chat__composer-actions\">\n        @if (allowFileUpload()) {\n          <input\n            #fileInput\n            type=\"file\"\n            class=\"lc-chat__file-input\"\n            [accept]=\"accept() || null\"\n            [multiple]=\"multiple()\"\n            (change)=\"onFilesSelected($event)\"\n          />\n          <button\n            type=\"button\"\n            class=\"lc-chat__attach-btn\"\n            [disabled]=\"disabled()\"\n            (click)=\"openFilePicker()\"\n            aria-label=\"Datei anh\u00E4ngen\"\n          >\n            <svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" aria-hidden=\"true\">\n              <path d=\"M14.5 9.5l-5 5a3 3 0 0 1-4.243-4.243l6.364-6.364a2 2 0 0 1 2.829 2.829l-6.364 6.364a1 1 0 1 1-1.415-1.415L11.5 6.5\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n            </svg>\n          </button>\n        }\n        <button\n          class=\"lc-chat__send-btn\"\n          [disabled]=\"(!inputValue().trim() && !pendingAttachments().length) || disabled()\"\n          (click)=\"send()\"\n          aria-label=\"Send\"\n        >\n          <svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\n            <path d=\"M3 10l7-7m0 0l7 7m-7-7v14\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" transform=\"rotate(90 10 10)\"/>\n          </svg>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n", styles: [".lc-chat{--lc-chat-content-width: 46rem;display:flex;flex-direction:column;height:100%;min-height:20rem;border:1px solid var(--color-border);border-radius:var(--border-radius-lg);overflow:hidden;background-color:var(--color-surface);color:var(--color-text-primary);font-family:var(--font-family-sans, sans-serif)}.lc-chat--borderless{border:none;border-radius:0}.lc-chat--width-full{--lc-chat-content-width: 100%}.lc-chat__header{display:flex;align-items:center;justify-content:space-between;padding:var(--spacing-3) var(--spacing-4);border-bottom:1px solid var(--color-divider);background:var(--color-surface)}.lc-chat__title{font-size:var(--font-size-sm, .875rem);font-weight:var(--font-weight-semibold, 600);color:var(--color-text-primary)}.lc-chat__streaming-badge{font-size:var(--font-size-xs, .6875rem);padding:.125rem .5rem;background:color-mix(in srgb,var(--color-primary-500) 15%,transparent);color:var(--color-primary-500);border-radius:var(--border-radius-full, 1rem);font-weight:var(--font-weight-medium, 500);animation:pulse-badge 1.5s infinite}@keyframes pulse-badge{0%,to{opacity:1}50%{opacity:.6}}.lc-chat__messages{flex:1;overflow-y:auto;display:flex;flex-direction:column;padding-block:var(--spacing-6, 1.5rem);padding-inline:var(--spacing-4, 1rem)}.lc-chat__thread{position:relative;width:100%;max-width:var(--lc-chat-content-width, 46rem);margin-inline:auto;flex:1 1 auto;min-height:0;display:flex;flex-direction:column;gap:var(--spacing-5, 1.25rem)}.lc-chat__messages--anchor-bottom .lc-chat__thread>.lc-chat__message:first-child{margin-top:auto}.lc-chat__message{position:relative;display:flex;align-items:stretch;gap:var(--spacing-3, .75rem);align-self:stretch;max-width:100%}.lc-chat__marker{position:relative;z-index:1;flex-shrink:0;width:.875rem;display:flex;flex-direction:column;align-items:center}.lc-chat__marker:before{content:\"\";position:absolute;left:50%;top:.55rem;bottom:calc(-1 * var(--spacing-5, 1.25rem));width:1.5px;transform:translate(-50%);background:var(--color-divider);z-index:-1}.lc-chat__message:last-child .lc-chat__marker:before{display:none}.lc-chat__dot{position:relative;z-index:1;width:.625rem;height:.625rem;margin-top:.25rem;border-radius:50%;background:var(--color-text-tertiary);box-shadow:0 0 0 3px var(--color-surface)}.lc-chat__dot--agent{background:var(--color-primary-500)}.lc-chat__dot--system{background:var(--color-text-tertiary);opacity:.6}.lc-chat__message--streaming .lc-chat__dot--agent{animation:dot-pulse 1.4s ease-out infinite}@keyframes dot-pulse{0%{box-shadow:0 0 0 3px var(--color-surface),0 0 0 3px color-mix(in srgb,var(--color-primary-500) 45%,transparent)}70%,to{box-shadow:0 0 0 3px var(--color-surface),0 0 0 9px color-mix(in srgb,var(--color-primary-500) 0%,transparent)}}.lc-chat__avatar-img{width:1.5rem;height:1.5rem;border-radius:50%;object-fit:cover;box-shadow:0 0 0 3px var(--color-surface)}.lc-chat__status-icon{position:relative;z-index:1;display:inline-flex;align-items:center;justify-content:center;width:1rem;height:1rem;margin-top:.0625rem;border-radius:50%;background:var(--color-surface);box-shadow:0 0 0 2px var(--color-surface)}.lc-chat__sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}.lc-chat__bubble{flex:1;min-width:0;font-size:var(--font-size-base, .9375rem);line-height:var(--line-height-relaxed, 1.6);word-break:break-word;color:var(--color-text-primary)}.lc-chat__message--user .lc-chat__bubble{position:relative;z-index:1;padding:var(--spacing-3, .75rem) var(--spacing-4, 1rem);border:1px solid var(--color-border);border-radius:var(--border-radius-lg);background:var(--color-surface-2)}.lc-chat__message--agent .lc-chat__bubble{padding:0;background:transparent}.lc-chat__message--system .lc-chat__bubble{padding:0;background:transparent;color:var(--color-text-tertiary);font-size:var(--font-size-sm, .8125rem)}.lc-chat__meta{display:flex;align-items:baseline;justify-content:space-between;gap:var(--spacing-2, .5rem);margin-bottom:var(--spacing-1, .25rem)}.lc-chat__meta .lc-chat__name{margin-bottom:0}.lc-chat__meta .lc-chat__time{margin-top:0}.lc-chat__name{font-size:var(--font-size-xs, .75rem);font-weight:var(--font-weight-semibold, 600);color:var(--color-text-secondary);margin-bottom:var(--spacing-1, .25rem)}.lc-chat__content{white-space:pre-wrap}.lc-chat__cursor{display:none}.lc-chat__cursor--visible{display:inline-block;width:2px;height:1em;background:currentColor;margin-left:1px;vertical-align:text-bottom;animation:blink-cursor .8s step-end infinite}@keyframes blink-cursor{0%,to{opacity:1}50%{opacity:0}}.lc-chat__time{font-size:var(--font-size-xs, .75rem);color:var(--color-text-tertiary);margin-top:var(--spacing-1, .25rem);flex-shrink:0}.lc-chat__typing{display:flex;gap:.25rem;padding:.25rem 0}.lc-chat__typing span{width:.375rem;height:.375rem;border-radius:50%;background:var(--color-text-tertiary);animation:typing-bounce 1.4s ease-in-out infinite}.lc-chat__typing span:nth-child(2){animation-delay:.2s}.lc-chat__typing span:nth-child(3){animation-delay:.4s}@keyframes typing-bounce{0%,60%,to{transform:translateY(0)}30%{transform:translateY(-.375rem)}}.lc-chat__input-area{padding:var(--spacing-4, .75rem);border-top:1px solid var(--color-divider);background:var(--color-surface)}.lc-chat__composer{width:100%;max-width:var(--lc-chat-content-width, 46rem);margin-inline:auto;display:flex;flex-direction:column;gap:var(--spacing-2, .5rem);padding:var(--spacing-3, .75rem);background:var(--color-surface-2);border:1px solid var(--color-border);border-radius:var(--border-radius-xl);transition:border-color .15s,box-shadow .15s}.lc-chat__composer:focus-within{border-color:var(--color-primary-500);box-shadow:var(--elevation-1)}.lc-chat__input{display:block;width:100%;box-sizing:border-box;resize:none;border:none;background:transparent;padding:var(--spacing-1, .25rem) var(--spacing-2, .5rem);font-size:var(--font-size-base, .875rem);font-family:inherit;line-height:var(--line-height-normal, 1.4);color:var(--color-text-primary);outline:none;height:auto;max-height:12rem;overflow-y:auto}.lc-chat__input:disabled{opacity:.5;cursor:not-allowed}.lc-chat__input::placeholder{color:var(--color-text-tertiary)}.lc-chat__composer-actions{display:flex;align-items:center;gap:var(--spacing-2, .5rem)}.lc-chat__send-btn{display:inline-flex;align-items:center;justify-content:center;width:2rem;height:2rem;margin-left:auto;border:none;border-radius:var(--border-radius-md);background:var(--color-primary-fill);color:var(--color-on-primary);cursor:pointer;flex-shrink:0;transition:background .15s,opacity .15s}.lc-chat__send-btn:hover:not(:disabled){background:var(--color-primary-fill-hover)}.lc-chat__send-btn:disabled{opacity:.4;cursor:not-allowed}.lc-chat__file-input{display:none}.lc-chat__attach-btn{display:inline-flex;align-items:center;justify-content:center;width:2rem;height:2rem;border:none;border-radius:var(--border-radius-md);background:transparent;color:var(--color-text-tertiary);cursor:pointer;flex-shrink:0;transition:background .15s,color .15s}.lc-chat__attach-btn:hover:not(:disabled){background:var(--color-surface-hover);color:var(--color-text-primary)}.lc-chat__attach-btn:disabled{opacity:.4;cursor:not-allowed}.lc-chat__pending-attachments{display:flex;flex-wrap:wrap;gap:.375rem}.lc-chat__pending-attachment{display:inline-flex;align-items:center;gap:.375rem;padding:.25rem .375rem .25rem .5rem;background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--border-radius-md, .5rem);font-size:var(--font-size-xs, .75rem);color:var(--color-text-primary);max-width:16rem}.lc-chat__pending-thumb{width:1.75rem;height:1.75rem;object-fit:cover;border-radius:.25rem;flex-shrink:0}.lc-chat__pending-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:9rem}.lc-chat__pending-size{color:var(--color-text-tertiary);font-variant-numeric:tabular-nums}.lc-chat__pending-remove{display:inline-flex;align-items:center;justify-content:center;width:1.25rem;height:1.25rem;border:none;border-radius:50%;background:transparent;color:var(--color-text-tertiary);cursor:pointer;flex-shrink:0}.lc-chat__pending-remove:hover{background:var(--color-surface-hover);color:var(--color-text-primary)}.lc-chat__attachments{display:flex;flex-wrap:wrap;gap:.375rem;margin-top:.5rem}.lc-chat__attachment{display:inline-flex;align-items:center;gap:.375rem;text-decoration:none;color:inherit;font-size:var(--font-size-xs, .75rem)}.lc-chat__attachment--file{padding:.25rem .5rem;background:color-mix(in srgb,currentColor 8%,transparent);border-radius:var(--border-radius-md, .375rem);max-width:16rem}.lc-chat__attachment--file:hover{background:color-mix(in srgb,currentColor 16%,transparent)}.lc-chat__attachment--image img{max-width:12rem;max-height:8rem;border-radius:var(--border-radius-md, .375rem);object-fit:cover;display:block}.lc-chat__attachment-icon{flex-shrink:0}.lc-chat__attachment-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.lc-chat__attachment-size{opacity:.7;font-variant-numeric:tabular-nums}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: MarkdownComponent, selector: "lc-markdown", inputs: ["src", "content", "variant", "linkTarget", "sanitize", "syntaxHighlight", "showHeadingAnchors", "baseUrl", "highlightChanges", "previousContent", "changeHighlightFadeMs", "scrollToFirstChange"], outputs: ["linkClick", "rendered", "changesHighlighted"] }, { kind: "component", type: IconComponent, selector: "lc-icon", inputs: ["name", "variant", "size", "color", "ariaLabel", "decorative", "strict"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.10", type: ChatComponent, isStandalone: true, selector: "lc-chat", inputs: { messages: { classPropertyName: "messages", publicName: "messages", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, isStreaming: { classPropertyName: "isStreaming", publicName: "isStreaming", isSignal: true, isRequired: false, transformFunction: null }, showHeader: { classPropertyName: "showHeader", publicName: "showHeader", isSignal: true, isRequired: false, transformFunction: null }, bordered: { classPropertyName: "bordered", publicName: "bordered", isSignal: true, isRequired: false, transformFunction: null }, messageAnchor: { classPropertyName: "messageAnchor", publicName: "messageAnchor", isSignal: true, isRequired: false, transformFunction: null }, contentWidth: { classPropertyName: "contentWidth", publicName: "contentWidth", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, showAvatars: { classPropertyName: "showAvatars", publicName: "showAvatars", isSignal: true, isRequired: false, transformFunction: null }, showTimestamps: { classPropertyName: "showTimestamps", publicName: "showTimestamps", isSignal: true, isRequired: false, transformFunction: null }, renderMarkdown: { classPropertyName: "renderMarkdown", publicName: "renderMarkdown", isSignal: true, isRequired: false, transformFunction: null }, allowFileUpload: { classPropertyName: "allowFileUpload", publicName: "allowFileUpload", isSignal: true, isRequired: false, transformFunction: null }, accept: { classPropertyName: "accept", publicName: "accept", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, maxFileSize: { classPropertyName: "maxFileSize", publicName: "maxFileSize", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { messageSend: "messageSend", fileAttach: "fileAttach" }, queries: [{ propertyName: "messageTemplate", first: true, predicate: ["messageTemplate"], descendants: true }], viewQueries: [{ propertyName: "scrollContainer", first: true, predicate: ["scrollContainer"], descendants: true }, { propertyName: "fileInput", first: true, predicate: ["fileInput"], descendants: true }, { propertyName: "composerInput", first: true, predicate: ["composerInput"], descendants: true }], ngImport: i0, template: "<div\n  class=\"lc-chat\"\n  [class.lc-chat--borderless]=\"!bordered()\"\n  [class.lc-chat--width-narrow]=\"contentWidth() === 'narrow'\"\n  [class.lc-chat--width-full]=\"contentWidth() === 'full'\"\n>\n  @if (showHeader()) {\n    <div class=\"lc-chat__header\">\n      <span class=\"lc-chat__title\">{{ title() }}</span>\n      @if (isStreaming()) {\n        <span class=\"lc-chat__streaming-badge\">Streaming\u2026</span>\n      }\n    </div>\n  }\n\n  <div\n    class=\"lc-chat__messages\"\n    [class.lc-chat__messages--anchor-bottom]=\"messageAnchor() === 'bottom'\"\n    #scrollContainer\n  >\n    <div class=\"lc-chat__thread\">\n      @for (msg of formattedMessages(); track msg.id) {\n        <div\n          class=\"lc-chat__message\"\n          [class.lc-chat__message--user]=\"msg.role === 'user'\"\n          [class.lc-chat__message--agent]=\"msg.role === 'agent'\"\n          [class.lc-chat__message--system]=\"msg.role === 'system'\"\n          [class.lc-chat__message--avatar]=\"showUserAvatar(msg)\"\n          [class.lc-chat__message--streaming]=\"msg.streaming\"\n          [attr.role]=\"msg.status === 'error' ? 'alert' : null\"\n          [attr.aria-live]=\"statusAriaLive(msg.status)\"\n        >\n          @if ((msg.role !== 'user' && (showAvatars() || isSemanticStatus(msg.status))) || showUserAvatar(msg)) {\n            <div class=\"lc-chat__marker\" [class.lc-chat__marker--user]=\"msg.role === 'user'\">\n              @if (isSemanticStatus(msg.status) && msg.role !== 'user') {\n                <span class=\"lc-chat__status-icon\">\n                  <lc-icon [name]=\"statusIcon(msg.status)\" size=\"xs\" [color]=\"statusColor(msg.status)\" [decorative]=\"true\" />\n                </span>\n              } @else if (msg.avatar) {\n                <img [src]=\"msg.avatar\" [alt]=\"msg.name || msg.role\" class=\"lc-chat__avatar-img\" />\n              } @else if (msg.role === 'user') {\n                <span class=\"lc-chat__monogram\" [attr.aria-label]=\"msg.name\">{{ initials(msg.name) }}</span>\n              } @else {\n                <span\n                  class=\"lc-chat__dot\"\n                  [class.lc-chat__dot--agent]=\"msg.role === 'agent'\"\n                  [class.lc-chat__dot--system]=\"msg.role === 'system'\"\n                ></span>\n              }\n            </div>\n          }\n\n          <div class=\"lc-chat__bubble\" [class.lc-chat__bubble--streaming]=\"msg.streaming\">\n            @if (msg.name && msg.role !== 'user') {\n              @if (showTimestamps() && msg.timestamp) {\n                <div class=\"lc-chat__meta lc-chat__meta--agent\">\n                  <span class=\"lc-chat__name\">{{ msg.name }}</span>\n                  <span class=\"lc-chat__time\">{{ formatTime(msg.timestamp) }}</span>\n                </div>\n              } @else {\n                <div class=\"lc-chat__name\">{{ msg.name }}</div>\n              }\n            }\n            <div class=\"lc-chat__content\">\n              @if (isSemanticStatus(msg.status)) {\n                <span class=\"lc-chat__sr-only\">{{ statusLabel(msg.status) }} </span>\n              }\n              @if (messageTemplate) {\n                <ng-container *ngTemplateOutlet=\"messageTemplate; context: { $implicit: msg }\" />\n              } @else if (shouldRenderMarkdown(msg.role)) {\n                <lc-markdown [content]=\"msg.content\" variant=\"chat\" />\n              } @else {\n                {{ msg.content }}\n              }\n              <span class=\"lc-chat__cursor\" [class.lc-chat__cursor--visible]=\"msg.streaming\"></span>\n            </div>\n            @if (msg.attachments?.length) {\n              <div class=\"lc-chat__attachments\">\n                @for (att of msg.attachments; track att.id) {\n                  @if (isImage(att) && att.url) {\n                    <a class=\"lc-chat__attachment lc-chat__attachment--image\" [href]=\"att.url\" target=\"_blank\" rel=\"noopener\">\n                      <img [src]=\"att.url\" [alt]=\"att.name\" />\n                    </a>\n                  } @else {\n                    <a\n                      class=\"lc-chat__attachment lc-chat__attachment--file\"\n                      [href]=\"att.url || null\"\n                      [attr.download]=\"att.url ? att.name : null\"\n                      target=\"_blank\"\n                      rel=\"noopener\"\n                    >\n                      <svg class=\"lc-chat__attachment-icon\" width=\"16\" height=\"16\" viewBox=\"0 0 20 20\" fill=\"none\" aria-hidden=\"true\">\n                        <path d=\"M6 2.5h6L16 6.5v10A1.5 1.5 0 0 1 14.5 18h-9A1.5 1.5 0 0 1 4 16.5v-12A1.5 1.5 0 0 1 5.5 3H6V2.5Z\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linejoin=\"round\"/>\n                        <path d=\"M12 2.5V6.5H16\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linejoin=\"round\"/>\n                      </svg>\n                      <span class=\"lc-chat__attachment-name\">{{ att.name }}</span>\n                      @if (att.size) {\n                        <span class=\"lc-chat__attachment-size\">{{ formatBytes(att.size) }}</span>\n                      }\n                    </a>\n                  }\n                }\n              </div>\n            }\n            @if (showTimestamps() && msg.timestamp && msg.role !== 'user' && !msg.name) {\n              <div class=\"lc-chat__time lc-chat__time--tight\">{{ formatTime(msg.timestamp) }}</div>\n            }\n          </div>\n          @if (showTimestamps() && msg.timestamp && msg.role === 'user') {\n            <div class=\"lc-chat__time lc-chat__time--user\">{{ formatTime(msg.timestamp) }}</div>\n          }\n        </div>\n      }\n\n      @if (isStreaming() && !(formattedMessages().length && formattedMessages()[formattedMessages().length - 1].streaming)) {\n        <div class=\"lc-chat__message lc-chat__message--agent\">\n          @if (showAvatars()) {\n            <div class=\"lc-chat__marker\">\n              <span class=\"lc-chat__dot lc-chat__dot--agent\"></span>\n            </div>\n          }\n          <div class=\"lc-chat__bubble\">\n            <div class=\"lc-chat__typing\">\n              <span></span><span></span><span></span>\n            </div>\n          </div>\n        </div>\n      }\n    </div>\n  </div>\n\n  <div class=\"lc-chat__input-area\">\n    <div class=\"lc-chat__composer\">\n      @if (allowFileUpload() && pendingAttachments().length) {\n        <div class=\"lc-chat__pending-attachments\">\n          @for (att of pendingAttachments(); track att.id) {\n            <div class=\"lc-chat__pending-attachment\" [class.lc-chat__pending-attachment--image]=\"isImage(att)\">\n              @if (isImage(att) && att.url) {\n                <img class=\"lc-chat__pending-thumb\" [src]=\"att.url\" [alt]=\"att.name\" />\n              } @else {\n                <svg class=\"lc-chat__attachment-icon\" width=\"16\" height=\"16\" viewBox=\"0 0 20 20\" fill=\"none\" aria-hidden=\"true\">\n                  <path d=\"M6 2.5h6L16 6.5v10A1.5 1.5 0 0 1 14.5 18h-9A1.5 1.5 0 0 1 4 16.5v-12A1.5 1.5 0 0 1 5.5 3H6V2.5Z\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linejoin=\"round\"/>\n                  <path d=\"M12 2.5V6.5H16\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linejoin=\"round\"/>\n                </svg>\n              }\n              <span class=\"lc-chat__pending-name\">{{ att.name }}</span>\n              @if (att.size) {\n                <span class=\"lc-chat__pending-size\">{{ formatBytes(att.size) }}</span>\n              }\n              <button\n                type=\"button\"\n                class=\"lc-chat__pending-remove\"\n                (click)=\"removeAttachment(att.id)\"\n                [attr.aria-label]=\"'Entfernen: ' + att.name\"\n              >\n                <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" aria-hidden=\"true\">\n                  <path d=\"M3 3l6 6M9 3l-6 6\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\"/>\n                </svg>\n              </button>\n            </div>\n          }\n        </div>\n      }\n\n      <textarea\n        #composerInput\n        class=\"lc-chat__input\"\n        [placeholder]=\"placeholder()\"\n        [value]=\"inputValue()\"\n        [disabled]=\"disabled()\"\n        (input)=\"onInput($event)\"\n        (keydown)=\"onKeydown($event)\"\n        rows=\"1\"\n      ></textarea>\n\n      <div class=\"lc-chat__composer-actions\">\n        @if (allowFileUpload()) {\n          <input\n            #fileInput\n            type=\"file\"\n            class=\"lc-chat__file-input\"\n            [accept]=\"accept() || null\"\n            [multiple]=\"multiple()\"\n            (change)=\"onFilesSelected($event)\"\n          />\n          <button\n            type=\"button\"\n            class=\"lc-chat__attach-btn\"\n            [disabled]=\"disabled()\"\n            (click)=\"openFilePicker()\"\n            aria-label=\"Datei anh\u00E4ngen\"\n          >\n            <svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" aria-hidden=\"true\">\n              <path d=\"M14.5 9.5l-5 5a3 3 0 0 1-4.243-4.243l6.364-6.364a2 2 0 0 1 2.829 2.829l-6.364 6.364a1 1 0 1 1-1.415-1.415L11.5 6.5\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n            </svg>\n          </button>\n        }\n        <button\n          class=\"lc-chat__send-btn\"\n          [disabled]=\"(!inputValue().trim() && !pendingAttachments().length) || disabled()\"\n          (click)=\"send()\"\n          aria-label=\"Send\"\n        >\n          <svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\n            <path d=\"M3 10l7-7m0 0l7 7m-7-7v14\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" transform=\"rotate(90 10 10)\"/>\n          </svg>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n", styles: [".lc-chat{--lc-chat-content-width: 46rem;--lc-chat-thread-gap: var(--spacing-3, .75rem);--lc-chat-messages-pad-block: var(--spacing-4, 1rem);--lc-chat-messages-pad-inline: var(--spacing-3, .75rem);--lc-chat-bubble-font: var(--font-size-sm, .875rem);--lc-chat-bubble-line: var(--line-height-normal, 1.5);--lc-chat-bubble-pad-block: var(--spacing-2, .5rem);--lc-chat-bubble-pad-inline: var(--spacing-3, .75rem);--lc-chat-header-pad-block: var(--spacing-2, .5rem);--lc-chat-input-area-pad: var(--spacing-3, .75rem);--lc-chat-composer-pad: var(--spacing-2, .5rem);display:flex;flex-direction:column;height:100%;min-height:20rem;border:1px solid var(--color-border);border-radius:var(--border-radius-lg);overflow:hidden;background-color:var(--color-surface);color:var(--color-text-primary);font-family:var(--font-family-sans, sans-serif)}.lc-chat--borderless{border:none;border-radius:0}.lc-chat--width-full{--lc-chat-content-width: 100%}.lc-chat__header{display:flex;align-items:center;justify-content:space-between;padding:var(--lc-chat-header-pad-block) var(--spacing-4);border-bottom:1px solid var(--color-divider);background:var(--color-surface)}.lc-chat__title{font-size:var(--font-size-sm, .875rem);font-weight:var(--font-weight-semibold, 600);color:var(--color-text-primary)}.lc-chat__streaming-badge{font-size:var(--font-size-xs, .6875rem);padding:.125rem .5rem;background:color-mix(in srgb,var(--color-primary-500) 15%,transparent);color:var(--color-primary-500);border-radius:var(--border-radius-full, 1rem);font-weight:var(--font-weight-medium, 500);animation:pulse-badge 1.5s infinite}@keyframes pulse-badge{0%,to{opacity:1}50%{opacity:.6}}.lc-chat__messages{flex:1;overflow-y:auto;display:flex;flex-direction:column;padding-block:var(--lc-chat-messages-pad-block);padding-inline:var(--lc-chat-messages-pad-inline)}.lc-chat__thread{position:relative;width:100%;max-width:var(--lc-chat-content-width, 46rem);margin-inline:auto;flex:1 1 auto;min-height:0;display:flex;flex-direction:column;gap:var(--lc-chat-thread-gap)}.lc-chat__messages--anchor-bottom .lc-chat__thread>.lc-chat__message:first-child{margin-top:auto}.lc-chat__message{position:relative;display:flex;align-items:stretch;gap:var(--spacing-3, .75rem);align-self:stretch;max-width:100%}.lc-chat__message--user{flex-direction:column;align-items:flex-end;gap:var(--spacing-1, .25rem)}.lc-chat__message--user.lc-chat__message--avatar{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:\"bubble avatar\" \"time   avatar\";column-gap:var(--spacing-2, .5rem);align-items:start}.lc-chat__message--user.lc-chat__message--avatar>.lc-chat__bubble{grid-area:bubble;justify-self:end}.lc-chat__message--user.lc-chat__message--avatar>.lc-chat__time--user{grid-area:time;justify-self:end}.lc-chat__message--user.lc-chat__message--avatar>.lc-chat__marker--user{grid-area:avatar}.lc-chat__marker{position:relative;z-index:1;flex-shrink:0;width:.875rem;display:flex;flex-direction:column;align-items:center}.lc-chat__marker:before{content:\"\";position:absolute;left:50%;top:.55rem;bottom:calc(-1 * var(--lc-chat-thread-gap));width:1.5px;transform:translate(-50%);background:var(--color-divider);z-index:-1}.lc-chat__message:last-child .lc-chat__marker:before{display:none}.lc-chat__dot{position:relative;z-index:1;width:.625rem;height:.625rem;margin-top:.25rem;border-radius:50%;background:var(--color-text-tertiary);box-shadow:0 0 0 3px var(--color-surface)}.lc-chat__dot--agent{background:var(--color-primary-500)}.lc-chat__dot--system{background:var(--color-text-tertiary);opacity:.6}.lc-chat__message--streaming .lc-chat__dot--agent{animation:dot-pulse 1.4s ease-out infinite}@keyframes dot-pulse{0%{box-shadow:0 0 0 3px var(--color-surface),0 0 0 3px color-mix(in srgb,var(--color-primary-500) 45%,transparent)}70%,to{box-shadow:0 0 0 3px var(--color-surface),0 0 0 9px color-mix(in srgb,var(--color-primary-500) 0%,transparent)}}.lc-chat__avatar-img{width:1.5rem;height:1.5rem;border-radius:50%;object-fit:cover;box-shadow:0 0 0 3px var(--color-surface)}.lc-chat__marker--user{width:auto}.lc-chat__marker--user:before{display:none}.lc-chat__monogram{display:inline-flex;align-items:center;justify-content:center;width:1.5rem;height:1.5rem;border-radius:50%;background:color-mix(in srgb,var(--color-primary-500) 18%,var(--color-surface-2));color:var(--color-primary-500);font-size:var(--font-size-xs, .75rem);font-weight:var(--font-weight-semibold, 600);line-height:1;box-shadow:0 0 0 3px var(--color-surface)}.lc-chat__status-icon{position:relative;z-index:1;display:inline-flex;align-items:center;justify-content:center;width:1rem;height:1rem;margin-top:.0625rem;border-radius:50%;background:var(--color-surface);box-shadow:0 0 0 2px var(--color-surface)}.lc-chat__sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}.lc-chat__bubble{flex:1;min-width:0;font-size:var(--lc-chat-bubble-font);line-height:var(--lc-chat-bubble-line);word-break:break-word;color:var(--color-text-primary)}.lc-chat__message--user .lc-chat__bubble{position:relative;z-index:1;flex:0 1 auto;max-width:min(85%,34rem);padding:var(--lc-chat-bubble-pad-block) var(--lc-chat-bubble-pad-inline);border:1px solid color-mix(in srgb,var(--color-primary-500) 22%,transparent);border-radius:var(--border-radius-lg);background:color-mix(in srgb,var(--color-primary-500) 10%,var(--color-surface-2))}.lc-chat__message--agent .lc-chat__bubble{padding:0;background:transparent}.lc-chat__message--system .lc-chat__bubble{padding:0;background:transparent;color:var(--color-text-tertiary);font-size:var(--font-size-sm, .8125rem)}.lc-chat__meta{display:flex;align-items:baseline;justify-content:space-between;gap:var(--spacing-2, .5rem);margin-bottom:var(--spacing-1, .25rem)}.lc-chat__meta .lc-chat__name{margin-bottom:0}.lc-chat__meta .lc-chat__time{margin-top:0}.lc-chat__name{font-size:var(--font-size-xs, .75rem);font-weight:var(--font-weight-semibold, 600);color:var(--color-text-secondary);margin-bottom:var(--spacing-1, .25rem)}.lc-chat__content{white-space:pre-wrap}.lc-chat__cursor{display:none}.lc-chat__cursor--visible{display:inline-block;width:2px;height:1em;background:currentColor;margin-left:1px;vertical-align:text-bottom;animation:blink-cursor .8s step-end infinite}@keyframes blink-cursor{0%,to{opacity:1}50%{opacity:0}}.lc-chat__time{font-size:var(--font-size-xs, .75rem);color:var(--color-text-tertiary);margin-top:var(--spacing-1, .25rem);flex-shrink:0}.lc-chat__time--tight{margin-top:0}.lc-chat__time--user{margin-top:0;padding-inline:var(--spacing-1, .25rem)}.lc-chat__typing{display:flex;gap:.25rem;padding:.25rem 0}.lc-chat__typing span{width:.375rem;height:.375rem;border-radius:50%;background:var(--color-text-tertiary);animation:typing-bounce 1.4s ease-in-out infinite}.lc-chat__typing span:nth-child(2){animation-delay:.2s}.lc-chat__typing span:nth-child(3){animation-delay:.4s}@keyframes typing-bounce{0%,60%,to{transform:translateY(0)}30%{transform:translateY(-.375rem)}}.lc-chat__input-area{padding:var(--lc-chat-input-area-pad);border-top:1px solid var(--color-divider);background:var(--color-surface)}.lc-chat__composer{width:100%;max-width:var(--lc-chat-content-width, 46rem);margin-inline:auto;display:flex;flex-direction:column;gap:var(--spacing-2, .5rem);padding:var(--lc-chat-composer-pad);background:var(--color-surface-2);border:1px solid var(--color-border);border-radius:var(--border-radius-xl);transition:border-color .15s,box-shadow .15s}.lc-chat__composer:focus-within{border-color:var(--color-primary-500);box-shadow:var(--elevation-1)}.lc-chat__input{display:block;width:100%;box-sizing:border-box;resize:none;border:none;background:transparent;padding:var(--spacing-1, .25rem) var(--spacing-2, .5rem);font-size:var(--font-size-base, .875rem);font-family:inherit;line-height:var(--line-height-normal, 1.4);color:var(--color-text-primary);outline:none;height:auto;max-height:12rem;overflow-y:auto}.lc-chat__input:disabled{opacity:.5;cursor:not-allowed}.lc-chat__input::placeholder{color:var(--color-text-tertiary)}.lc-chat__composer-actions{display:flex;align-items:center;gap:var(--spacing-2, .5rem)}.lc-chat__send-btn{display:inline-flex;align-items:center;justify-content:center;width:2rem;height:2rem;margin-left:auto;border:none;border-radius:var(--border-radius-md);background:var(--color-primary-fill);color:var(--color-on-primary);cursor:pointer;flex-shrink:0;transition:background .15s,opacity .15s}.lc-chat__send-btn:hover:not(:disabled){background:var(--color-primary-fill-hover)}.lc-chat__send-btn:disabled{opacity:.4;cursor:not-allowed}.lc-chat__file-input{display:none}.lc-chat__attach-btn{display:inline-flex;align-items:center;justify-content:center;width:2rem;height:2rem;border:none;border-radius:var(--border-radius-md);background:transparent;color:var(--color-text-tertiary);cursor:pointer;flex-shrink:0;transition:background .15s,color .15s}.lc-chat__attach-btn:hover:not(:disabled){background:var(--color-surface-hover);color:var(--color-text-primary)}.lc-chat__attach-btn:disabled{opacity:.4;cursor:not-allowed}.lc-chat__pending-attachments{display:flex;flex-wrap:wrap;gap:.375rem}.lc-chat__pending-attachment{display:inline-flex;align-items:center;gap:.375rem;padding:.25rem .375rem .25rem .5rem;background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--border-radius-md, .5rem);font-size:var(--font-size-xs, .75rem);color:var(--color-text-primary);max-width:16rem}.lc-chat__pending-thumb{width:1.75rem;height:1.75rem;object-fit:cover;border-radius:.25rem;flex-shrink:0}.lc-chat__pending-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:9rem}.lc-chat__pending-size{color:var(--color-text-tertiary);font-variant-numeric:tabular-nums}.lc-chat__pending-remove{display:inline-flex;align-items:center;justify-content:center;width:1.25rem;height:1.25rem;border:none;border-radius:50%;background:transparent;color:var(--color-text-tertiary);cursor:pointer;flex-shrink:0}.lc-chat__pending-remove:hover{background:var(--color-surface-hover);color:var(--color-text-primary)}.lc-chat__attachments{display:flex;flex-wrap:wrap;gap:.375rem;margin-top:.5rem}.lc-chat__attachment{display:inline-flex;align-items:center;gap:.375rem;text-decoration:none;color:inherit;font-size:var(--font-size-xs, .75rem)}.lc-chat__attachment--file{padding:.25rem .5rem;background:color-mix(in srgb,currentColor 8%,transparent);border-radius:var(--border-radius-md, .375rem);max-width:16rem}.lc-chat__attachment--file:hover{background:color-mix(in srgb,currentColor 16%,transparent)}.lc-chat__attachment--image img{max-width:12rem;max-height:8rem;border-radius:var(--border-radius-md, .375rem);object-fit:cover;display:block}.lc-chat__attachment-icon{flex-shrink:0}.lc-chat__attachment-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.lc-chat__attachment-size{opacity:.7;font-variant-numeric:tabular-nums}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: MarkdownComponent, selector: "lc-markdown", inputs: ["src", "content", "variant", "linkTarget", "sanitize", "syntaxHighlight", "showHeadingAnchors", "baseUrl", "highlightChanges", "previousContent", "changeHighlightFadeMs", "scrollToFirstChange"], outputs: ["linkClick", "rendered", "changesHighlighted"] }, { kind: "component", type: IconComponent, selector: "lc-icon", inputs: ["name", "variant", "size", "color", "ariaLabel", "decorative", "strict"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: ChatComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lc-chat', standalone: true, imports: [NgTemplateOutlet, MarkdownComponent, IconComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n  class=\"lc-chat\"\n  [class.lc-chat--borderless]=\"!bordered()\"\n  [class.lc-chat--width-narrow]=\"contentWidth() === 'narrow'\"\n  [class.lc-chat--width-full]=\"contentWidth() === 'full'\"\n>\n  @if (showHeader()) {\n    <div class=\"lc-chat__header\">\n      <span class=\"lc-chat__title\">{{ title() }}</span>\n      @if (isStreaming()) {\n        <span class=\"lc-chat__streaming-badge\">Streaming\u2026</span>\n      }\n    </div>\n  }\n\n  <div\n    class=\"lc-chat__messages\"\n    [class.lc-chat__messages--anchor-bottom]=\"messageAnchor() === 'bottom'\"\n    #scrollContainer\n  >\n    <div class=\"lc-chat__thread\">\n      @for (msg of formattedMessages(); track msg.id) {\n        <div\n          class=\"lc-chat__message\"\n          [class.lc-chat__message--user]=\"msg.role === 'user'\"\n          [class.lc-chat__message--agent]=\"msg.role === 'agent'\"\n          [class.lc-chat__message--system]=\"msg.role === 'system'\"\n          [class.lc-chat__message--streaming]=\"msg.streaming\"\n          [attr.role]=\"msg.status === 'error' ? 'alert' : null\"\n          [attr.aria-live]=\"statusAriaLive(msg.status)\"\n        >\n          @if (msg.role !== 'user' && (showAvatars() || isSemanticStatus(msg.status))) {\n            <div class=\"lc-chat__marker\">\n              @if (isSemanticStatus(msg.status)) {\n                <span class=\"lc-chat__status-icon\">\n                  <lc-icon [name]=\"statusIcon(msg.status)\" size=\"xs\" [color]=\"statusColor(msg.status)\" [decorative]=\"true\" />\n                </span>\n              } @else if (msg.avatar) {\n                <img [src]=\"msg.avatar\" [alt]=\"msg.name || msg.role\" class=\"lc-chat__avatar-img\" />\n              } @else {\n                <span\n                  class=\"lc-chat__dot\"\n                  [class.lc-chat__dot--agent]=\"msg.role === 'agent'\"\n                  [class.lc-chat__dot--system]=\"msg.role === 'system'\"\n                ></span>\n              }\n            </div>\n          }\n\n          <div class=\"lc-chat__bubble\" [class.lc-chat__bubble--streaming]=\"msg.streaming\">\n            @if (msg.role === 'user') {\n              <div class=\"lc-chat__meta\">\n                <span class=\"lc-chat__name\">{{ msg.name || 'Du' }}</span>\n                @if (showTimestamps() && msg.timestamp) {\n                  <span class=\"lc-chat__time\">{{ formatTime(msg.timestamp) }}</span>\n                }\n              </div>\n            } @else if (msg.name) {\n              <div class=\"lc-chat__name\">{{ msg.name }}</div>\n            }\n            <div class=\"lc-chat__content\">\n              @if (isSemanticStatus(msg.status)) {\n                <span class=\"lc-chat__sr-only\">{{ statusLabel(msg.status) }} </span>\n              }\n              @if (messageTemplate) {\n                <ng-container *ngTemplateOutlet=\"messageTemplate; context: { $implicit: msg }\" />\n              } @else if (shouldRenderMarkdown(msg.role)) {\n                <lc-markdown [content]=\"msg.content\" variant=\"chat\" />\n              } @else {\n                {{ msg.content }}\n              }\n              <span class=\"lc-chat__cursor\" [class.lc-chat__cursor--visible]=\"msg.streaming\"></span>\n            </div>\n            @if (msg.attachments?.length) {\n              <div class=\"lc-chat__attachments\">\n                @for (att of msg.attachments; track att.id) {\n                  @if (isImage(att) && att.url) {\n                    <a class=\"lc-chat__attachment lc-chat__attachment--image\" [href]=\"att.url\" target=\"_blank\" rel=\"noopener\">\n                      <img [src]=\"att.url\" [alt]=\"att.name\" />\n                    </a>\n                  } @else {\n                    <a\n                      class=\"lc-chat__attachment lc-chat__attachment--file\"\n                      [href]=\"att.url || null\"\n                      [attr.download]=\"att.url ? att.name : null\"\n                      target=\"_blank\"\n                      rel=\"noopener\"\n                    >\n                      <svg class=\"lc-chat__attachment-icon\" width=\"16\" height=\"16\" viewBox=\"0 0 20 20\" fill=\"none\" aria-hidden=\"true\">\n                        <path d=\"M6 2.5h6L16 6.5v10A1.5 1.5 0 0 1 14.5 18h-9A1.5 1.5 0 0 1 4 16.5v-12A1.5 1.5 0 0 1 5.5 3H6V2.5Z\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linejoin=\"round\"/>\n                        <path d=\"M12 2.5V6.5H16\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linejoin=\"round\"/>\n                      </svg>\n                      <span class=\"lc-chat__attachment-name\">{{ att.name }}</span>\n                      @if (att.size) {\n                        <span class=\"lc-chat__attachment-size\">{{ formatBytes(att.size) }}</span>\n                      }\n                    </a>\n                  }\n                }\n              </div>\n            }\n            @if (showTimestamps() && msg.timestamp && msg.role !== 'user') {\n              <div class=\"lc-chat__time\">{{ formatTime(msg.timestamp) }}</div>\n            }\n          </div>\n        </div>\n      }\n\n      @if (isStreaming() && !(formattedMessages().length && formattedMessages()[formattedMessages().length - 1].streaming)) {\n        <div class=\"lc-chat__message lc-chat__message--agent\">\n          @if (showAvatars()) {\n            <div class=\"lc-chat__marker\">\n              <span class=\"lc-chat__dot lc-chat__dot--agent\"></span>\n            </div>\n          }\n          <div class=\"lc-chat__bubble\">\n            <div class=\"lc-chat__typing\">\n              <span></span><span></span><span></span>\n            </div>\n          </div>\n        </div>\n      }\n    </div>\n  </div>\n\n  <div class=\"lc-chat__input-area\">\n    <div class=\"lc-chat__composer\">\n      @if (allowFileUpload() && pendingAttachments().length) {\n        <div class=\"lc-chat__pending-attachments\">\n          @for (att of pendingAttachments(); track att.id) {\n            <div class=\"lc-chat__pending-attachment\" [class.lc-chat__pending-attachment--image]=\"isImage(att)\">\n              @if (isImage(att) && att.url) {\n                <img class=\"lc-chat__pending-thumb\" [src]=\"att.url\" [alt]=\"att.name\" />\n              } @else {\n                <svg class=\"lc-chat__attachment-icon\" width=\"16\" height=\"16\" viewBox=\"0 0 20 20\" fill=\"none\" aria-hidden=\"true\">\n                  <path d=\"M6 2.5h6L16 6.5v10A1.5 1.5 0 0 1 14.5 18h-9A1.5 1.5 0 0 1 4 16.5v-12A1.5 1.5 0 0 1 5.5 3H6V2.5Z\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linejoin=\"round\"/>\n                  <path d=\"M12 2.5V6.5H16\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linejoin=\"round\"/>\n                </svg>\n              }\n              <span class=\"lc-chat__pending-name\">{{ att.name }}</span>\n              @if (att.size) {\n                <span class=\"lc-chat__pending-size\">{{ formatBytes(att.size) }}</span>\n              }\n              <button\n                type=\"button\"\n                class=\"lc-chat__pending-remove\"\n                (click)=\"removeAttachment(att.id)\"\n                [attr.aria-label]=\"'Entfernen: ' + att.name\"\n              >\n                <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" aria-hidden=\"true\">\n                  <path d=\"M3 3l6 6M9 3l-6 6\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\"/>\n                </svg>\n              </button>\n            </div>\n          }\n        </div>\n      }\n\n      <textarea\n        #composerInput\n        class=\"lc-chat__input\"\n        [placeholder]=\"placeholder()\"\n        [value]=\"inputValue()\"\n        [disabled]=\"disabled()\"\n        (input)=\"onInput($event)\"\n        (keydown)=\"onKeydown($event)\"\n        rows=\"1\"\n      ></textarea>\n\n      <div class=\"lc-chat__composer-actions\">\n        @if (allowFileUpload()) {\n          <input\n            #fileInput\n            type=\"file\"\n            class=\"lc-chat__file-input\"\n            [accept]=\"accept() || null\"\n            [multiple]=\"multiple()\"\n            (change)=\"onFilesSelected($event)\"\n          />\n          <button\n            type=\"button\"\n            class=\"lc-chat__attach-btn\"\n            [disabled]=\"disabled()\"\n            (click)=\"openFilePicker()\"\n            aria-label=\"Datei anh\u00E4ngen\"\n          >\n            <svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" aria-hidden=\"true\">\n              <path d=\"M14.5 9.5l-5 5a3 3 0 0 1-4.243-4.243l6.364-6.364a2 2 0 0 1 2.829 2.829l-6.364 6.364a1 1 0 1 1-1.415-1.415L11.5 6.5\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n            </svg>\n          </button>\n        }\n        <button\n          class=\"lc-chat__send-btn\"\n          [disabled]=\"(!inputValue().trim() && !pendingAttachments().length) || disabled()\"\n          (click)=\"send()\"\n          aria-label=\"Send\"\n        >\n          <svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\n            <path d=\"M3 10l7-7m0 0l7 7m-7-7v14\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" transform=\"rotate(90 10 10)\"/>\n          </svg>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n", styles: [".lc-chat{--lc-chat-content-width: 46rem;display:flex;flex-direction:column;height:100%;min-height:20rem;border:1px solid var(--color-border);border-radius:var(--border-radius-lg);overflow:hidden;background-color:var(--color-surface);color:var(--color-text-primary);font-family:var(--font-family-sans, sans-serif)}.lc-chat--borderless{border:none;border-radius:0}.lc-chat--width-full{--lc-chat-content-width: 100%}.lc-chat__header{display:flex;align-items:center;justify-content:space-between;padding:var(--spacing-3) var(--spacing-4);border-bottom:1px solid var(--color-divider);background:var(--color-surface)}.lc-chat__title{font-size:var(--font-size-sm, .875rem);font-weight:var(--font-weight-semibold, 600);color:var(--color-text-primary)}.lc-chat__streaming-badge{font-size:var(--font-size-xs, .6875rem);padding:.125rem .5rem;background:color-mix(in srgb,var(--color-primary-500) 15%,transparent);color:var(--color-primary-500);border-radius:var(--border-radius-full, 1rem);font-weight:var(--font-weight-medium, 500);animation:pulse-badge 1.5s infinite}@keyframes pulse-badge{0%,to{opacity:1}50%{opacity:.6}}.lc-chat__messages{flex:1;overflow-y:auto;display:flex;flex-direction:column;padding-block:var(--spacing-6, 1.5rem);padding-inline:var(--spacing-4, 1rem)}.lc-chat__thread{position:relative;width:100%;max-width:var(--lc-chat-content-width, 46rem);margin-inline:auto;flex:1 1 auto;min-height:0;display:flex;flex-direction:column;gap:var(--spacing-5, 1.25rem)}.lc-chat__messages--anchor-bottom .lc-chat__thread>.lc-chat__message:first-child{margin-top:auto}.lc-chat__message{position:relative;display:flex;align-items:stretch;gap:var(--spacing-3, .75rem);align-self:stretch;max-width:100%}.lc-chat__marker{position:relative;z-index:1;flex-shrink:0;width:.875rem;display:flex;flex-direction:column;align-items:center}.lc-chat__marker:before{content:\"\";position:absolute;left:50%;top:.55rem;bottom:calc(-1 * var(--spacing-5, 1.25rem));width:1.5px;transform:translate(-50%);background:var(--color-divider);z-index:-1}.lc-chat__message:last-child .lc-chat__marker:before{display:none}.lc-chat__dot{position:relative;z-index:1;width:.625rem;height:.625rem;margin-top:.25rem;border-radius:50%;background:var(--color-text-tertiary);box-shadow:0 0 0 3px var(--color-surface)}.lc-chat__dot--agent{background:var(--color-primary-500)}.lc-chat__dot--system{background:var(--color-text-tertiary);opacity:.6}.lc-chat__message--streaming .lc-chat__dot--agent{animation:dot-pulse 1.4s ease-out infinite}@keyframes dot-pulse{0%{box-shadow:0 0 0 3px var(--color-surface),0 0 0 3px color-mix(in srgb,var(--color-primary-500) 45%,transparent)}70%,to{box-shadow:0 0 0 3px var(--color-surface),0 0 0 9px color-mix(in srgb,var(--color-primary-500) 0%,transparent)}}.lc-chat__avatar-img{width:1.5rem;height:1.5rem;border-radius:50%;object-fit:cover;box-shadow:0 0 0 3px var(--color-surface)}.lc-chat__status-icon{position:relative;z-index:1;display:inline-flex;align-items:center;justify-content:center;width:1rem;height:1rem;margin-top:.0625rem;border-radius:50%;background:var(--color-surface);box-shadow:0 0 0 2px var(--color-surface)}.lc-chat__sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}.lc-chat__bubble{flex:1;min-width:0;font-size:var(--font-size-base, .9375rem);line-height:var(--line-height-relaxed, 1.6);word-break:break-word;color:var(--color-text-primary)}.lc-chat__message--user .lc-chat__bubble{position:relative;z-index:1;padding:var(--spacing-3, .75rem) var(--spacing-4, 1rem);border:1px solid var(--color-border);border-radius:var(--border-radius-lg);background:var(--color-surface-2)}.lc-chat__message--agent .lc-chat__bubble{padding:0;background:transparent}.lc-chat__message--system .lc-chat__bubble{padding:0;background:transparent;color:var(--color-text-tertiary);font-size:var(--font-size-sm, .8125rem)}.lc-chat__meta{display:flex;align-items:baseline;justify-content:space-between;gap:var(--spacing-2, .5rem);margin-bottom:var(--spacing-1, .25rem)}.lc-chat__meta .lc-chat__name{margin-bottom:0}.lc-chat__meta .lc-chat__time{margin-top:0}.lc-chat__name{font-size:var(--font-size-xs, .75rem);font-weight:var(--font-weight-semibold, 600);color:var(--color-text-secondary);margin-bottom:var(--spacing-1, .25rem)}.lc-chat__content{white-space:pre-wrap}.lc-chat__cursor{display:none}.lc-chat__cursor--visible{display:inline-block;width:2px;height:1em;background:currentColor;margin-left:1px;vertical-align:text-bottom;animation:blink-cursor .8s step-end infinite}@keyframes blink-cursor{0%,to{opacity:1}50%{opacity:0}}.lc-chat__time{font-size:var(--font-size-xs, .75rem);color:var(--color-text-tertiary);margin-top:var(--spacing-1, .25rem);flex-shrink:0}.lc-chat__typing{display:flex;gap:.25rem;padding:.25rem 0}.lc-chat__typing span{width:.375rem;height:.375rem;border-radius:50%;background:var(--color-text-tertiary);animation:typing-bounce 1.4s ease-in-out infinite}.lc-chat__typing span:nth-child(2){animation-delay:.2s}.lc-chat__typing span:nth-child(3){animation-delay:.4s}@keyframes typing-bounce{0%,60%,to{transform:translateY(0)}30%{transform:translateY(-.375rem)}}.lc-chat__input-area{padding:var(--spacing-4, .75rem);border-top:1px solid var(--color-divider);background:var(--color-surface)}.lc-chat__composer{width:100%;max-width:var(--lc-chat-content-width, 46rem);margin-inline:auto;display:flex;flex-direction:column;gap:var(--spacing-2, .5rem);padding:var(--spacing-3, .75rem);background:var(--color-surface-2);border:1px solid var(--color-border);border-radius:var(--border-radius-xl);transition:border-color .15s,box-shadow .15s}.lc-chat__composer:focus-within{border-color:var(--color-primary-500);box-shadow:var(--elevation-1)}.lc-chat__input{display:block;width:100%;box-sizing:border-box;resize:none;border:none;background:transparent;padding:var(--spacing-1, .25rem) var(--spacing-2, .5rem);font-size:var(--font-size-base, .875rem);font-family:inherit;line-height:var(--line-height-normal, 1.4);color:var(--color-text-primary);outline:none;height:auto;max-height:12rem;overflow-y:auto}.lc-chat__input:disabled{opacity:.5;cursor:not-allowed}.lc-chat__input::placeholder{color:var(--color-text-tertiary)}.lc-chat__composer-actions{display:flex;align-items:center;gap:var(--spacing-2, .5rem)}.lc-chat__send-btn{display:inline-flex;align-items:center;justify-content:center;width:2rem;height:2rem;margin-left:auto;border:none;border-radius:var(--border-radius-md);background:var(--color-primary-fill);color:var(--color-on-primary);cursor:pointer;flex-shrink:0;transition:background .15s,opacity .15s}.lc-chat__send-btn:hover:not(:disabled){background:var(--color-primary-fill-hover)}.lc-chat__send-btn:disabled{opacity:.4;cursor:not-allowed}.lc-chat__file-input{display:none}.lc-chat__attach-btn{display:inline-flex;align-items:center;justify-content:center;width:2rem;height:2rem;border:none;border-radius:var(--border-radius-md);background:transparent;color:var(--color-text-tertiary);cursor:pointer;flex-shrink:0;transition:background .15s,color .15s}.lc-chat__attach-btn:hover:not(:disabled){background:var(--color-surface-hover);color:var(--color-text-primary)}.lc-chat__attach-btn:disabled{opacity:.4;cursor:not-allowed}.lc-chat__pending-attachments{display:flex;flex-wrap:wrap;gap:.375rem}.lc-chat__pending-attachment{display:inline-flex;align-items:center;gap:.375rem;padding:.25rem .375rem .25rem .5rem;background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--border-radius-md, .5rem);font-size:var(--font-size-xs, .75rem);color:var(--color-text-primary);max-width:16rem}.lc-chat__pending-thumb{width:1.75rem;height:1.75rem;object-fit:cover;border-radius:.25rem;flex-shrink:0}.lc-chat__pending-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:9rem}.lc-chat__pending-size{color:var(--color-text-tertiary);font-variant-numeric:tabular-nums}.lc-chat__pending-remove{display:inline-flex;align-items:center;justify-content:center;width:1.25rem;height:1.25rem;border:none;border-radius:50%;background:transparent;color:var(--color-text-tertiary);cursor:pointer;flex-shrink:0}.lc-chat__pending-remove:hover{background:var(--color-surface-hover);color:var(--color-text-primary)}.lc-chat__attachments{display:flex;flex-wrap:wrap;gap:.375rem;margin-top:.5rem}.lc-chat__attachment{display:inline-flex;align-items:center;gap:.375rem;text-decoration:none;color:inherit;font-size:var(--font-size-xs, .75rem)}.lc-chat__attachment--file{padding:.25rem .5rem;background:color-mix(in srgb,currentColor 8%,transparent);border-radius:var(--border-radius-md, .375rem);max-width:16rem}.lc-chat__attachment--file:hover{background:color-mix(in srgb,currentColor 16%,transparent)}.lc-chat__attachment--image img{max-width:12rem;max-height:8rem;border-radius:var(--border-radius-md, .375rem);object-fit:cover;display:block}.lc-chat__attachment-icon{flex-shrink:0}.lc-chat__attachment-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.lc-chat__attachment-size{opacity:.7;font-variant-numeric:tabular-nums}\n"] }]
+            args: [{ selector: 'lc-chat', standalone: true, imports: [NgTemplateOutlet, MarkdownComponent, IconComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n  class=\"lc-chat\"\n  [class.lc-chat--borderless]=\"!bordered()\"\n  [class.lc-chat--width-narrow]=\"contentWidth() === 'narrow'\"\n  [class.lc-chat--width-full]=\"contentWidth() === 'full'\"\n>\n  @if (showHeader()) {\n    <div class=\"lc-chat__header\">\n      <span class=\"lc-chat__title\">{{ title() }}</span>\n      @if (isStreaming()) {\n        <span class=\"lc-chat__streaming-badge\">Streaming\u2026</span>\n      }\n    </div>\n  }\n\n  <div\n    class=\"lc-chat__messages\"\n    [class.lc-chat__messages--anchor-bottom]=\"messageAnchor() === 'bottom'\"\n    #scrollContainer\n  >\n    <div class=\"lc-chat__thread\">\n      @for (msg of formattedMessages(); track msg.id) {\n        <div\n          class=\"lc-chat__message\"\n          [class.lc-chat__message--user]=\"msg.role === 'user'\"\n          [class.lc-chat__message--agent]=\"msg.role === 'agent'\"\n          [class.lc-chat__message--system]=\"msg.role === 'system'\"\n          [class.lc-chat__message--avatar]=\"showUserAvatar(msg)\"\n          [class.lc-chat__message--streaming]=\"msg.streaming\"\n          [attr.role]=\"msg.status === 'error' ? 'alert' : null\"\n          [attr.aria-live]=\"statusAriaLive(msg.status)\"\n        >\n          @if ((msg.role !== 'user' && (showAvatars() || isSemanticStatus(msg.status))) || showUserAvatar(msg)) {\n            <div class=\"lc-chat__marker\" [class.lc-chat__marker--user]=\"msg.role === 'user'\">\n              @if (isSemanticStatus(msg.status) && msg.role !== 'user') {\n                <span class=\"lc-chat__status-icon\">\n                  <lc-icon [name]=\"statusIcon(msg.status)\" size=\"xs\" [color]=\"statusColor(msg.status)\" [decorative]=\"true\" />\n                </span>\n              } @else if (msg.avatar) {\n                <img [src]=\"msg.avatar\" [alt]=\"msg.name || msg.role\" class=\"lc-chat__avatar-img\" />\n              } @else if (msg.role === 'user') {\n                <span class=\"lc-chat__monogram\" [attr.aria-label]=\"msg.name\">{{ initials(msg.name) }}</span>\n              } @else {\n                <span\n                  class=\"lc-chat__dot\"\n                  [class.lc-chat__dot--agent]=\"msg.role === 'agent'\"\n                  [class.lc-chat__dot--system]=\"msg.role === 'system'\"\n                ></span>\n              }\n            </div>\n          }\n\n          <div class=\"lc-chat__bubble\" [class.lc-chat__bubble--streaming]=\"msg.streaming\">\n            @if (msg.name && msg.role !== 'user') {\n              @if (showTimestamps() && msg.timestamp) {\n                <div class=\"lc-chat__meta lc-chat__meta--agent\">\n                  <span class=\"lc-chat__name\">{{ msg.name }}</span>\n                  <span class=\"lc-chat__time\">{{ formatTime(msg.timestamp) }}</span>\n                </div>\n              } @else {\n                <div class=\"lc-chat__name\">{{ msg.name }}</div>\n              }\n            }\n            <div class=\"lc-chat__content\">\n              @if (isSemanticStatus(msg.status)) {\n                <span class=\"lc-chat__sr-only\">{{ statusLabel(msg.status) }} </span>\n              }\n              @if (messageTemplate) {\n                <ng-container *ngTemplateOutlet=\"messageTemplate; context: { $implicit: msg }\" />\n              } @else if (shouldRenderMarkdown(msg.role)) {\n                <lc-markdown [content]=\"msg.content\" variant=\"chat\" />\n              } @else {\n                {{ msg.content }}\n              }\n              <span class=\"lc-chat__cursor\" [class.lc-chat__cursor--visible]=\"msg.streaming\"></span>\n            </div>\n            @if (msg.attachments?.length) {\n              <div class=\"lc-chat__attachments\">\n                @for (att of msg.attachments; track att.id) {\n                  @if (isImage(att) && att.url) {\n                    <a class=\"lc-chat__attachment lc-chat__attachment--image\" [href]=\"att.url\" target=\"_blank\" rel=\"noopener\">\n                      <img [src]=\"att.url\" [alt]=\"att.name\" />\n                    </a>\n                  } @else {\n                    <a\n                      class=\"lc-chat__attachment lc-chat__attachment--file\"\n                      [href]=\"att.url || null\"\n                      [attr.download]=\"att.url ? att.name : null\"\n                      target=\"_blank\"\n                      rel=\"noopener\"\n                    >\n                      <svg class=\"lc-chat__attachment-icon\" width=\"16\" height=\"16\" viewBox=\"0 0 20 20\" fill=\"none\" aria-hidden=\"true\">\n                        <path d=\"M6 2.5h6L16 6.5v10A1.5 1.5 0 0 1 14.5 18h-9A1.5 1.5 0 0 1 4 16.5v-12A1.5 1.5 0 0 1 5.5 3H6V2.5Z\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linejoin=\"round\"/>\n                        <path d=\"M12 2.5V6.5H16\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linejoin=\"round\"/>\n                      </svg>\n                      <span class=\"lc-chat__attachment-name\">{{ att.name }}</span>\n                      @if (att.size) {\n                        <span class=\"lc-chat__attachment-size\">{{ formatBytes(att.size) }}</span>\n                      }\n                    </a>\n                  }\n                }\n              </div>\n            }\n            @if (showTimestamps() && msg.timestamp && msg.role !== 'user' && !msg.name) {\n              <div class=\"lc-chat__time lc-chat__time--tight\">{{ formatTime(msg.timestamp) }}</div>\n            }\n          </div>\n          @if (showTimestamps() && msg.timestamp && msg.role === 'user') {\n            <div class=\"lc-chat__time lc-chat__time--user\">{{ formatTime(msg.timestamp) }}</div>\n          }\n        </div>\n      }\n\n      @if (isStreaming() && !(formattedMessages().length && formattedMessages()[formattedMessages().length - 1].streaming)) {\n        <div class=\"lc-chat__message lc-chat__message--agent\">\n          @if (showAvatars()) {\n            <div class=\"lc-chat__marker\">\n              <span class=\"lc-chat__dot lc-chat__dot--agent\"></span>\n            </div>\n          }\n          <div class=\"lc-chat__bubble\">\n            <div class=\"lc-chat__typing\">\n              <span></span><span></span><span></span>\n            </div>\n          </div>\n        </div>\n      }\n    </div>\n  </div>\n\n  <div class=\"lc-chat__input-area\">\n    <div class=\"lc-chat__composer\">\n      @if (allowFileUpload() && pendingAttachments().length) {\n        <div class=\"lc-chat__pending-attachments\">\n          @for (att of pendingAttachments(); track att.id) {\n            <div class=\"lc-chat__pending-attachment\" [class.lc-chat__pending-attachment--image]=\"isImage(att)\">\n              @if (isImage(att) && att.url) {\n                <img class=\"lc-chat__pending-thumb\" [src]=\"att.url\" [alt]=\"att.name\" />\n              } @else {\n                <svg class=\"lc-chat__attachment-icon\" width=\"16\" height=\"16\" viewBox=\"0 0 20 20\" fill=\"none\" aria-hidden=\"true\">\n                  <path d=\"M6 2.5h6L16 6.5v10A1.5 1.5 0 0 1 14.5 18h-9A1.5 1.5 0 0 1 4 16.5v-12A1.5 1.5 0 0 1 5.5 3H6V2.5Z\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linejoin=\"round\"/>\n                  <path d=\"M12 2.5V6.5H16\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linejoin=\"round\"/>\n                </svg>\n              }\n              <span class=\"lc-chat__pending-name\">{{ att.name }}</span>\n              @if (att.size) {\n                <span class=\"lc-chat__pending-size\">{{ formatBytes(att.size) }}</span>\n              }\n              <button\n                type=\"button\"\n                class=\"lc-chat__pending-remove\"\n                (click)=\"removeAttachment(att.id)\"\n                [attr.aria-label]=\"'Entfernen: ' + att.name\"\n              >\n                <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" aria-hidden=\"true\">\n                  <path d=\"M3 3l6 6M9 3l-6 6\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\"/>\n                </svg>\n              </button>\n            </div>\n          }\n        </div>\n      }\n\n      <textarea\n        #composerInput\n        class=\"lc-chat__input\"\n        [placeholder]=\"placeholder()\"\n        [value]=\"inputValue()\"\n        [disabled]=\"disabled()\"\n        (input)=\"onInput($event)\"\n        (keydown)=\"onKeydown($event)\"\n        rows=\"1\"\n      ></textarea>\n\n      <div class=\"lc-chat__composer-actions\">\n        @if (allowFileUpload()) {\n          <input\n            #fileInput\n            type=\"file\"\n            class=\"lc-chat__file-input\"\n            [accept]=\"accept() || null\"\n            [multiple]=\"multiple()\"\n            (change)=\"onFilesSelected($event)\"\n          />\n          <button\n            type=\"button\"\n            class=\"lc-chat__attach-btn\"\n            [disabled]=\"disabled()\"\n            (click)=\"openFilePicker()\"\n            aria-label=\"Datei anh\u00E4ngen\"\n          >\n            <svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" aria-hidden=\"true\">\n              <path d=\"M14.5 9.5l-5 5a3 3 0 0 1-4.243-4.243l6.364-6.364a2 2 0 0 1 2.829 2.829l-6.364 6.364a1 1 0 1 1-1.415-1.415L11.5 6.5\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n            </svg>\n          </button>\n        }\n        <button\n          class=\"lc-chat__send-btn\"\n          [disabled]=\"(!inputValue().trim() && !pendingAttachments().length) || disabled()\"\n          (click)=\"send()\"\n          aria-label=\"Send\"\n        >\n          <svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\n            <path d=\"M3 10l7-7m0 0l7 7m-7-7v14\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" transform=\"rotate(90 10 10)\"/>\n          </svg>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n", styles: [".lc-chat{--lc-chat-content-width: 46rem;--lc-chat-thread-gap: var(--spacing-3, .75rem);--lc-chat-messages-pad-block: var(--spacing-4, 1rem);--lc-chat-messages-pad-inline: var(--spacing-3, .75rem);--lc-chat-bubble-font: var(--font-size-sm, .875rem);--lc-chat-bubble-line: var(--line-height-normal, 1.5);--lc-chat-bubble-pad-block: var(--spacing-2, .5rem);--lc-chat-bubble-pad-inline: var(--spacing-3, .75rem);--lc-chat-header-pad-block: var(--spacing-2, .5rem);--lc-chat-input-area-pad: var(--spacing-3, .75rem);--lc-chat-composer-pad: var(--spacing-2, .5rem);display:flex;flex-direction:column;height:100%;min-height:20rem;border:1px solid var(--color-border);border-radius:var(--border-radius-lg);overflow:hidden;background-color:var(--color-surface);color:var(--color-text-primary);font-family:var(--font-family-sans, sans-serif)}.lc-chat--borderless{border:none;border-radius:0}.lc-chat--width-full{--lc-chat-content-width: 100%}.lc-chat__header{display:flex;align-items:center;justify-content:space-between;padding:var(--lc-chat-header-pad-block) var(--spacing-4);border-bottom:1px solid var(--color-divider);background:var(--color-surface)}.lc-chat__title{font-size:var(--font-size-sm, .875rem);font-weight:var(--font-weight-semibold, 600);color:var(--color-text-primary)}.lc-chat__streaming-badge{font-size:var(--font-size-xs, .6875rem);padding:.125rem .5rem;background:color-mix(in srgb,var(--color-primary-500) 15%,transparent);color:var(--color-primary-500);border-radius:var(--border-radius-full, 1rem);font-weight:var(--font-weight-medium, 500);animation:pulse-badge 1.5s infinite}@keyframes pulse-badge{0%,to{opacity:1}50%{opacity:.6}}.lc-chat__messages{flex:1;overflow-y:auto;display:flex;flex-direction:column;padding-block:var(--lc-chat-messages-pad-block);padding-inline:var(--lc-chat-messages-pad-inline)}.lc-chat__thread{position:relative;width:100%;max-width:var(--lc-chat-content-width, 46rem);margin-inline:auto;flex:1 1 auto;min-height:0;display:flex;flex-direction:column;gap:var(--lc-chat-thread-gap)}.lc-chat__messages--anchor-bottom .lc-chat__thread>.lc-chat__message:first-child{margin-top:auto}.lc-chat__message{position:relative;display:flex;align-items:stretch;gap:var(--spacing-3, .75rem);align-self:stretch;max-width:100%}.lc-chat__message--user{flex-direction:column;align-items:flex-end;gap:var(--spacing-1, .25rem)}.lc-chat__message--user.lc-chat__message--avatar{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:\"bubble avatar\" \"time   avatar\";column-gap:var(--spacing-2, .5rem);align-items:start}.lc-chat__message--user.lc-chat__message--avatar>.lc-chat__bubble{grid-area:bubble;justify-self:end}.lc-chat__message--user.lc-chat__message--avatar>.lc-chat__time--user{grid-area:time;justify-self:end}.lc-chat__message--user.lc-chat__message--avatar>.lc-chat__marker--user{grid-area:avatar}.lc-chat__marker{position:relative;z-index:1;flex-shrink:0;width:.875rem;display:flex;flex-direction:column;align-items:center}.lc-chat__marker:before{content:\"\";position:absolute;left:50%;top:.55rem;bottom:calc(-1 * var(--lc-chat-thread-gap));width:1.5px;transform:translate(-50%);background:var(--color-divider);z-index:-1}.lc-chat__message:last-child .lc-chat__marker:before{display:none}.lc-chat__dot{position:relative;z-index:1;width:.625rem;height:.625rem;margin-top:.25rem;border-radius:50%;background:var(--color-text-tertiary);box-shadow:0 0 0 3px var(--color-surface)}.lc-chat__dot--agent{background:var(--color-primary-500)}.lc-chat__dot--system{background:var(--color-text-tertiary);opacity:.6}.lc-chat__message--streaming .lc-chat__dot--agent{animation:dot-pulse 1.4s ease-out infinite}@keyframes dot-pulse{0%{box-shadow:0 0 0 3px var(--color-surface),0 0 0 3px color-mix(in srgb,var(--color-primary-500) 45%,transparent)}70%,to{box-shadow:0 0 0 3px var(--color-surface),0 0 0 9px color-mix(in srgb,var(--color-primary-500) 0%,transparent)}}.lc-chat__avatar-img{width:1.5rem;height:1.5rem;border-radius:50%;object-fit:cover;box-shadow:0 0 0 3px var(--color-surface)}.lc-chat__marker--user{width:auto}.lc-chat__marker--user:before{display:none}.lc-chat__monogram{display:inline-flex;align-items:center;justify-content:center;width:1.5rem;height:1.5rem;border-radius:50%;background:color-mix(in srgb,var(--color-primary-500) 18%,var(--color-surface-2));color:var(--color-primary-500);font-size:var(--font-size-xs, .75rem);font-weight:var(--font-weight-semibold, 600);line-height:1;box-shadow:0 0 0 3px var(--color-surface)}.lc-chat__status-icon{position:relative;z-index:1;display:inline-flex;align-items:center;justify-content:center;width:1rem;height:1rem;margin-top:.0625rem;border-radius:50%;background:var(--color-surface);box-shadow:0 0 0 2px var(--color-surface)}.lc-chat__sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}.lc-chat__bubble{flex:1;min-width:0;font-size:var(--lc-chat-bubble-font);line-height:var(--lc-chat-bubble-line);word-break:break-word;color:var(--color-text-primary)}.lc-chat__message--user .lc-chat__bubble{position:relative;z-index:1;flex:0 1 auto;max-width:min(85%,34rem);padding:var(--lc-chat-bubble-pad-block) var(--lc-chat-bubble-pad-inline);border:1px solid color-mix(in srgb,var(--color-primary-500) 22%,transparent);border-radius:var(--border-radius-lg);background:color-mix(in srgb,var(--color-primary-500) 10%,var(--color-surface-2))}.lc-chat__message--agent .lc-chat__bubble{padding:0;background:transparent}.lc-chat__message--system .lc-chat__bubble{padding:0;background:transparent;color:var(--color-text-tertiary);font-size:var(--font-size-sm, .8125rem)}.lc-chat__meta{display:flex;align-items:baseline;justify-content:space-between;gap:var(--spacing-2, .5rem);margin-bottom:var(--spacing-1, .25rem)}.lc-chat__meta .lc-chat__name{margin-bottom:0}.lc-chat__meta .lc-chat__time{margin-top:0}.lc-chat__name{font-size:var(--font-size-xs, .75rem);font-weight:var(--font-weight-semibold, 600);color:var(--color-text-secondary);margin-bottom:var(--spacing-1, .25rem)}.lc-chat__content{white-space:pre-wrap}.lc-chat__cursor{display:none}.lc-chat__cursor--visible{display:inline-block;width:2px;height:1em;background:currentColor;margin-left:1px;vertical-align:text-bottom;animation:blink-cursor .8s step-end infinite}@keyframes blink-cursor{0%,to{opacity:1}50%{opacity:0}}.lc-chat__time{font-size:var(--font-size-xs, .75rem);color:var(--color-text-tertiary);margin-top:var(--spacing-1, .25rem);flex-shrink:0}.lc-chat__time--tight{margin-top:0}.lc-chat__time--user{margin-top:0;padding-inline:var(--spacing-1, .25rem)}.lc-chat__typing{display:flex;gap:.25rem;padding:.25rem 0}.lc-chat__typing span{width:.375rem;height:.375rem;border-radius:50%;background:var(--color-text-tertiary);animation:typing-bounce 1.4s ease-in-out infinite}.lc-chat__typing span:nth-child(2){animation-delay:.2s}.lc-chat__typing span:nth-child(3){animation-delay:.4s}@keyframes typing-bounce{0%,60%,to{transform:translateY(0)}30%{transform:translateY(-.375rem)}}.lc-chat__input-area{padding:var(--lc-chat-input-area-pad);border-top:1px solid var(--color-divider);background:var(--color-surface)}.lc-chat__composer{width:100%;max-width:var(--lc-chat-content-width, 46rem);margin-inline:auto;display:flex;flex-direction:column;gap:var(--spacing-2, .5rem);padding:var(--lc-chat-composer-pad);background:var(--color-surface-2);border:1px solid var(--color-border);border-radius:var(--border-radius-xl);transition:border-color .15s,box-shadow .15s}.lc-chat__composer:focus-within{border-color:var(--color-primary-500);box-shadow:var(--elevation-1)}.lc-chat__input{display:block;width:100%;box-sizing:border-box;resize:none;border:none;background:transparent;padding:var(--spacing-1, .25rem) var(--spacing-2, .5rem);font-size:var(--font-size-base, .875rem);font-family:inherit;line-height:var(--line-height-normal, 1.4);color:var(--color-text-primary);outline:none;height:auto;max-height:12rem;overflow-y:auto}.lc-chat__input:disabled{opacity:.5;cursor:not-allowed}.lc-chat__input::placeholder{color:var(--color-text-tertiary)}.lc-chat__composer-actions{display:flex;align-items:center;gap:var(--spacing-2, .5rem)}.lc-chat__send-btn{display:inline-flex;align-items:center;justify-content:center;width:2rem;height:2rem;margin-left:auto;border:none;border-radius:var(--border-radius-md);background:var(--color-primary-fill);color:var(--color-on-primary);cursor:pointer;flex-shrink:0;transition:background .15s,opacity .15s}.lc-chat__send-btn:hover:not(:disabled){background:var(--color-primary-fill-hover)}.lc-chat__send-btn:disabled{opacity:.4;cursor:not-allowed}.lc-chat__file-input{display:none}.lc-chat__attach-btn{display:inline-flex;align-items:center;justify-content:center;width:2rem;height:2rem;border:none;border-radius:var(--border-radius-md);background:transparent;color:var(--color-text-tertiary);cursor:pointer;flex-shrink:0;transition:background .15s,color .15s}.lc-chat__attach-btn:hover:not(:disabled){background:var(--color-surface-hover);color:var(--color-text-primary)}.lc-chat__attach-btn:disabled{opacity:.4;cursor:not-allowed}.lc-chat__pending-attachments{display:flex;flex-wrap:wrap;gap:.375rem}.lc-chat__pending-attachment{display:inline-flex;align-items:center;gap:.375rem;padding:.25rem .375rem .25rem .5rem;background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--border-radius-md, .5rem);font-size:var(--font-size-xs, .75rem);color:var(--color-text-primary);max-width:16rem}.lc-chat__pending-thumb{width:1.75rem;height:1.75rem;object-fit:cover;border-radius:.25rem;flex-shrink:0}.lc-chat__pending-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:9rem}.lc-chat__pending-size{color:var(--color-text-tertiary);font-variant-numeric:tabular-nums}.lc-chat__pending-remove{display:inline-flex;align-items:center;justify-content:center;width:1.25rem;height:1.25rem;border:none;border-radius:50%;background:transparent;color:var(--color-text-tertiary);cursor:pointer;flex-shrink:0}.lc-chat__pending-remove:hover{background:var(--color-surface-hover);color:var(--color-text-primary)}.lc-chat__attachments{display:flex;flex-wrap:wrap;gap:.375rem;margin-top:.5rem}.lc-chat__attachment{display:inline-flex;align-items:center;gap:.375rem;text-decoration:none;color:inherit;font-size:var(--font-size-xs, .75rem)}.lc-chat__attachment--file{padding:.25rem .5rem;background:color-mix(in srgb,currentColor 8%,transparent);border-radius:var(--border-radius-md, .375rem);max-width:16rem}.lc-chat__attachment--file:hover{background:color-mix(in srgb,currentColor 16%,transparent)}.lc-chat__attachment--image img{max-width:12rem;max-height:8rem;border-radius:var(--border-radius-md, .375rem);object-fit:cover;display:block}.lc-chat__attachment-icon{flex-shrink:0}.lc-chat__attachment-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.lc-chat__attachment-size{opacity:.7;font-variant-numeric:tabular-nums}\n"] }]
         }], propDecorators: { messages: [{ type: i0.Input, args: [{ isSignal: true, alias: "messages", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], isStreaming: [{ type: i0.Input, args: [{ isSignal: true, alias: "isStreaming", required: false }] }], showHeader: [{ type: i0.Input, args: [{ isSignal: true, alias: "showHeader", required: false }] }], bordered: [{ type: i0.Input, args: [{ isSignal: true, alias: "bordered", required: false }] }], messageAnchor: [{ type: i0.Input, args: [{ isSignal: true, alias: "messageAnchor", required: false }] }], contentWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "contentWidth", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], showAvatars: [{ type: i0.Input, args: [{ isSignal: true, alias: "showAvatars", required: false }] }], showTimestamps: [{ type: i0.Input, args: [{ isSignal: true, alias: "showTimestamps", required: false }] }], renderMarkdown: [{ type: i0.Input, args: [{ isSignal: true, alias: "renderMarkdown", required: false }] }], allowFileUpload: [{ type: i0.Input, args: [{ isSignal: true, alias: "allowFileUpload", required: false }] }], accept: [{ type: i0.Input, args: [{ isSignal: true, alias: "accept", required: false }] }], multiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiple", required: false }] }], maxFileSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxFileSize", required: false }] }], messageSend: [{ type: i0.Output, args: ["messageSend"] }], fileAttach: [{ type: i0.Output, args: ["fileAttach"] }], messageTemplate: [{
                 type: ContentChild,
                 args: ['messageTemplate']
@@ -13053,6 +13110,12 @@ const NODE_WIDTH = 160;
 const NODE_HEIGHT = 40;
 const H_GAP = 80;
 const V_GAP = 24;
+/** How far a bowed edge clears the row/column it loops across. */
+const BACK_EDGE_BOW = 36;
+/** Points sampled along a curve when testing it against the node boxes. */
+const ROUTE_SAMPLES = 24;
+/** Ignore grazing the very edge of a box — only a real incursion counts. */
+const ROUTE_INSET = 3;
 const RELATION_STYLES = {
     depends: { color: 'var(--color-neutral-400)', dashed: false, label: 'depends on' },
     blocks: { color: 'var(--color-error-default)', dashed: false, label: 'blocks' },
@@ -13062,8 +13125,26 @@ const RELATION_STYLES = {
     implements: { color: 'var(--color-success-default)', dashed: true, label: 'implements' },
     uses: { color: 'var(--color-neutral-300)', dashed: true, label: 'uses' },
 };
-function measureTree(node, depth, dir) {
-    const children = (node.children || []).map(c => measureTree(c, depth + 1, dir));
+/**
+ * Measures the tree, treating the input as a *graph*: `visited` guards against a
+ * node being laid out twice.
+ *
+ * Two cases route through it, and both are normal in a graph rather than a strict
+ * tree: a cycle (a → b → a), which would otherwise recurse until the stack blows,
+ * and a node reachable from two parents, which would otherwise be drawn twice at
+ * two positions. Either way the node already has a place in the layout, so the
+ * link is recorded as a back edge and later drawn as a cross-reference arrow.
+ */
+function measureTree(node, depth, dir, visited, backEdges) {
+    visited.add(node.id);
+    const children = [];
+    for (const child of node.children || []) {
+        if (visited.has(child.id)) {
+            backEdges.push({ from: node.id, to: child.id });
+            continue;
+        }
+        children.push(measureTree(child, depth + 1, dir, visited, backEdges));
+    }
     const nodePrimary = dir === 'horizontal' ? NODE_WIDTH : NODE_HEIGHT;
     const nodeSecondary = dir === 'horizontal' ? NODE_HEIGHT : NODE_WIDTH;
     if (children.length === 0) {
@@ -13080,17 +13161,20 @@ function measureTree(node, depth, dir) {
         depth,
     };
 }
-function layoutTreeH(measure, x, y, parentId, nodes, edges, allNodes) {
+function layoutTreeH(measure, x, y, parentId, nodes, edges, allNodes, nodeMap) {
     const nodeY = y + measure.secondary / 2 - NODE_HEIGHT / 2;
     const orig = allNodes.get(measure.node.id);
-    nodes.push({
+    const laid = {
         id: measure.node.id, label: measure.node.label, description: measure.node.description,
         icon: measure.node.icon, status: measure.node.status || 'default',
+        type: measure.node.type, moreCount: measure.node.moreCount,
         x, y: nodeY, width: NODE_WIDTH, height: NODE_HEIGHT, depth: measure.depth, parentId,
         incomingCount: orig?.dependsOn?.length ?? 0, outgoingCount: orig?.children?.length ?? 0,
-    });
+    };
+    nodes.push(laid);
+    nodeMap.set(laid.id, laid);
     if (parentId) {
-        const parent = nodes.find(n => n.id === parentId);
+        const parent = nodeMap.get(parentId);
         const sx = parent.x + parent.width;
         const sy = parent.y + parent.height / 2;
         const tx = x;
@@ -13101,25 +13185,29 @@ function layoutTreeH(measure, x, y, parentId, nodes, edges, allNodes) {
             path: `M ${sx} ${sy} C ${mx} ${sy}, ${mx} ${ty}, ${tx} ${ty}`,
             labelX: mx, labelY: (sy + ty) / 2,
             color: 'var(--color-neutral-300)', dashed: false, isCrossRef: false,
+            marker: 'depends',
         });
     }
     let childY = y;
     for (const child of measure.children) {
-        layoutTreeH(child, x + NODE_WIDTH + H_GAP, childY, measure.node.id, nodes, edges, allNodes);
+        layoutTreeH(child, x + NODE_WIDTH + H_GAP, childY, measure.node.id, nodes, edges, allNodes, nodeMap);
         childY += child.secondary + V_GAP;
     }
 }
-function layoutTreeV(measure, x, y, parentId, nodes, edges, allNodes) {
+function layoutTreeV(measure, x, y, parentId, nodes, edges, allNodes, nodeMap) {
     const nodeX = x + measure.secondary / 2 - NODE_WIDTH / 2;
     const orig = allNodes.get(measure.node.id);
-    nodes.push({
+    const laid = {
         id: measure.node.id, label: measure.node.label, description: measure.node.description,
         icon: measure.node.icon, status: measure.node.status || 'default',
+        type: measure.node.type, moreCount: measure.node.moreCount,
         x: nodeX, y, width: NODE_WIDTH, height: NODE_HEIGHT, depth: measure.depth, parentId,
         incomingCount: orig?.dependsOn?.length ?? 0, outgoingCount: orig?.children?.length ?? 0,
-    });
+    };
+    nodes.push(laid);
+    nodeMap.set(laid.id, laid);
     if (parentId) {
-        const parent = nodes.find(n => n.id === parentId);
+        const parent = nodeMap.get(parentId);
         const sx = parent.x + parent.width / 2;
         const sy = parent.y + parent.height;
         const tx = nodeX + NODE_WIDTH / 2;
@@ -13130,24 +13218,155 @@ function layoutTreeV(measure, x, y, parentId, nodes, edges, allNodes) {
             path: `M ${sx} ${sy} C ${sx} ${my}, ${tx} ${my}, ${tx} ${ty}`,
             labelX: (sx + tx) / 2, labelY: my,
             color: 'var(--color-neutral-300)', dashed: false, isCrossRef: false,
+            marker: 'depends',
         });
     }
     let childX = x;
     for (const child of measure.children) {
-        layoutTreeV(child, childX, y + NODE_HEIGHT + H_GAP, measure.node.id, nodes, edges, allNodes);
+        layoutTreeV(child, childX, y + NODE_HEIGHT + H_GAP, measure.node.id, nodes, edges, allNodes, nodeMap);
         childX += child.secondary + V_GAP;
     }
 }
+// The `map.has` check doubles as the cycle guard: revisiting a node means the
+// graph loops back (or converges from a second parent), and there is nothing
+// left to collect from it.
 function collectAllNodes(node, map) {
+    if (map.has(node.id))
+        return;
     map.set(node.id, node);
     for (const child of node.children || [])
         collectAllNodes(child, map);
 }
-function createCrossRefEdges(nodes, allOriginal, dir) {
+const cubicPath = (p) => `M ${p[0].x} ${p[0].y} C ${p[1].x} ${p[1].y}, ${p[2].x} ${p[2].y}, ${p[3].x} ${p[3].y}`;
+function cubicAt(p, t) {
+    const m = 1 - t;
+    return {
+        x: m * m * m * p[0].x + 3 * m * m * t * p[1].x + 3 * m * t * t * p[2].x + t * t * t * p[3].x,
+        y: m * m * m * p[0].y + 3 * m * m * t * p[1].y + 3 * m * t * t * p[2].y + t * t * t * p[3].y,
+    };
+}
+/**
+ * Nodes the curve passes through, ignoring its own endpoints — a path necessarily
+ * touches those, and counting them would make every edge look like a crossing.
+ */
+function crossedNodes(points, nodes, exclude) {
+    const hit = new Map();
+    for (let i = 0; i <= ROUTE_SAMPLES; i++) {
+        const p = cubicAt(points, i / ROUTE_SAMPLES);
+        for (const n of nodes) {
+            if (exclude.has(n.id) || hit.has(n.id))
+                continue;
+            if (p.x > n.x + ROUTE_INSET &&
+                p.x < n.x + n.width - ROUTE_INSET &&
+                p.y > n.y + ROUTE_INSET &&
+                p.y < n.y + n.height - ROUTE_INSET) {
+                hit.set(n.id, n);
+            }
+        }
+    }
+    return [...hit.values()];
+}
+/** The straight-ish curve between two nodes, following the layout flow. */
+function directGeometry(source, target, dir) {
+    if (dir === 'horizontal') {
+        const p0 = { x: source.x + source.width, y: source.y + source.height / 2 };
+        const p3 = { x: target.x, y: target.y + target.height / 2 };
+        const mx = (p0.x + p3.x) / 2;
+        const points = [p0, { x: mx, y: p0.y }, { x: mx, y: p3.y }, p3];
+        return { path: cubicPath(points), labelX: mx, labelY: (p0.y + p3.y) / 2 - 8, points };
+    }
+    const p0 = { x: source.x + source.width / 2, y: source.y + source.height };
+    const p3 = { x: target.x + target.width / 2, y: target.y };
+    const my = (p0.y + p3.y) / 2;
+    const points = [p0, { x: p0.x, y: my }, { x: p3.x, y: my }, p3];
+    return { path: cubicPath(points), labelX: (p0.x + p3.x) / 2, labelY: my - 8, points };
+}
+/**
+ * Leaves from one side of both boxes and bows clear of everything in `obstacles`,
+ * so the edge travels through empty space instead of disappearing behind the nodes
+ * between its endpoints.
+ *
+ * The side matters: bowing *below* clears an obstacle sitting beside the endpoints,
+ * but drives straight through one stacked underneath them. Callers try several.
+ */
+function bowedGeometry(source, target, obstacles, side) {
+    const all = [source, target, ...obstacles];
+    switch (side) {
+        case 'below': {
+            const dip = Math.max(...all.map(n => n.y + n.height)) + BACK_EDGE_BOW;
+            const p0 = { x: source.x + source.width / 2, y: source.y + source.height };
+            const p3 = { x: target.x + target.width / 2, y: target.y + target.height };
+            const points = [p0, { x: p0.x, y: dip }, { x: p3.x, y: dip }, p3];
+            return { path: cubicPath(points), labelX: (p0.x + p3.x) / 2, labelY: dip - 4, points };
+        }
+        case 'above': {
+            const rise = Math.min(...all.map(n => n.y)) - BACK_EDGE_BOW;
+            const p0 = { x: source.x + source.width / 2, y: source.y };
+            const p3 = { x: target.x + target.width / 2, y: target.y };
+            const points = [p0, { x: p0.x, y: rise }, { x: p3.x, y: rise }, p3];
+            return { path: cubicPath(points), labelX: (p0.x + p3.x) / 2, labelY: rise + 12, points };
+        }
+        case 'right': {
+            const bow = Math.max(...all.map(n => n.x + n.width)) + BACK_EDGE_BOW;
+            const p0 = { x: source.x + source.width, y: source.y + source.height / 2 };
+            const p3 = { x: target.x + target.width, y: target.y + target.height / 2 };
+            const points = [p0, { x: bow, y: p0.y }, { x: bow, y: p3.y }, p3];
+            return { path: cubicPath(points), labelX: bow - 4, labelY: (p0.y + p3.y) / 2, points };
+        }
+        case 'left': {
+            const bow = Math.min(...all.map(n => n.x)) - BACK_EDGE_BOW;
+            const p0 = { x: source.x, y: source.y + source.height / 2 };
+            const p3 = { x: target.x, y: target.y + target.height / 2 };
+            const points = [p0, { x: bow, y: p0.y }, { x: bow, y: p3.y }, p3];
+            return { path: cubicPath(points), labelX: bow + 4, labelY: (p0.y + p3.y) / 2, points };
+        }
+    }
+}
+// Try the side that suits the layout flow first: in a left-to-right tree the free
+// space is above and below the rows; in a top-to-bottom one it's left and right.
+const bowSides = (dir) => dir === 'horizontal' ? ['below', 'above', 'right', 'left'] : ['right', 'left', 'below', 'above'];
+/**
+ * Cross-references connect arbitrary pairs, so unlike parent→child edges (which
+ * always run down the gutter between two levels) they can cut straight across
+ * unrelated nodes. Pick the cleanest of a handful of candidate routes.
+ *
+ * This is a small fixed search, not obstacle-avoiding routing: it clears the common
+ * cases cheaply, but a dense enough graph can leave every candidate crossing
+ * something. Then the least-bad one wins, and `direct` wins ties — a pointless
+ * detour reads worse than a short hop behind one box.
+ */
+function routeCrossRef(source, target, dir, nodes, allowDirect = true) {
+    const exclude = new Set([source.id, target.id]);
+    const direct = directGeometry(source, target, dir);
+    const obstacles = crossedNodes(direct.points, nodes, exclude);
+    if (allowDirect && !obstacles.length)
+        return direct;
+    let best = allowDirect ? direct : null;
+    let bestCount = allowDirect ? obstacles.length : Infinity;
+    for (const side of bowSides(dir)) {
+        const candidate = bowedGeometry(source, target, obstacles, side);
+        const count = crossedNodes(candidate.points, nodes, exclude).length;
+        if (count < bestCount) {
+            best = candidate;
+            bestCount = count;
+            if (count === 0)
+                break;
+        }
+    }
+    return best ?? direct;
+}
+/**
+ * Falls back to `depends` for anything not in the style table. Callers may pass a
+ * relation that only carries a free-form `relationLabel`, and untyped callers can
+ * pass an unknown string — neither may end up with an undefined style or an
+ * arrow marker id that doesn't exist in the template's `<defs>`.
+ */
+function resolveRelation(relation) {
+    return relation && RELATION_STYLES[relation] ? relation : 'depends';
+}
+function createCrossRefEdges(nodeMap, allOriginal, dir, backEdges) {
     const edges = [];
-    const nodeMap = new Map();
-    for (const n of nodes)
-        nodeMap.set(n.id, n);
+    const nodes = [...nodeMap.values()];
     for (const [, orig] of allOriginal) {
         if (!orig.dependsOn?.length)
             continue;
@@ -13158,47 +13377,87 @@ function createCrossRefEdges(nodes, allOriginal, dir) {
             const source = nodeMap.get(dep.id);
             if (!source)
                 continue;
-            const relation = dep.relation || 'depends';
+            const relation = resolveRelation(dep.relation);
             const style = RELATION_STYLES[relation];
-            let path, labelX, labelY;
-            if (dir === 'horizontal') {
-                const sx = source.x + source.width;
-                const sy = source.y + source.height / 2;
-                const tx = target.x;
-                const ty = target.y + target.height / 2;
-                const mx = (sx + tx) / 2;
-                path = `M ${sx} ${sy} C ${mx} ${sy}, ${mx} ${ty}, ${tx} ${ty}`;
-                labelX = mx;
-                labelY = (sy + ty) / 2 - 8;
-            }
-            else {
-                const sx = source.x + source.width / 2;
-                const sy = source.y + source.height;
-                const tx = target.x + target.width / 2;
-                const ty = target.y;
-                const my = (sy + ty) / 2;
-                path = `M ${sx} ${sy} C ${sx} ${my}, ${tx} ${my}, ${tx} ${ty}`;
-                labelX = (sx + tx) / 2;
-                labelY = my - 8;
-            }
+            const geo = routeCrossRef(source, target, dir, nodes);
             edges.push({
                 id: `${dep.id}⇢${orig.id}`, sourceId: dep.id, targetId: orig.id,
-                path, relation, labelX, labelY,
-                color: style.color, dashed: style.dashed, isCrossRef: true,
+                path: geo.path, relation: dep.relation,
+                label: dep.relationLabel ?? style.label,
+                labelX: geo.labelX, labelY: geo.labelY,
+                color: style.color, dashed: style.dashed, isCrossRef: true, marker: relation,
             });
         }
     }
+    // Links the tree layout couldn't follow (cycle, or a node reached from a second
+    // parent). The relationship is real, so draw it as a cross-reference rather than
+    // dropping it silently. These always bow: they point against the layout flow by
+    // definition, so the direct route would double back across their own row.
+    for (const back of backEdges) {
+        const source = nodeMap.get(back.from);
+        const target = nodeMap.get(back.to);
+        if (!source || !target)
+            continue;
+        const style = RELATION_STYLES.depends;
+        const geo = routeCrossRef(source, target, dir, nodes, /* allowDirect */ false);
+        edges.push({
+            id: `${back.from}↺${back.to}`, sourceId: back.from, targetId: back.to,
+            path: geo.path, labelX: geo.labelX, labelY: geo.labelY,
+            color: style.color, dashed: true, isCrossRef: true, marker: 'depends',
+        });
+    }
     return edges;
 }
 // ── Status colors ────────────────────────────────────────────────────────────
+// Labels read from the theme's semantic ink, not from a `--color-<status>-700`.
+// Those resolve to dark ink in both themes (error-700 is #6b0909), which on the
+// dark theme's translucent tint over #14222e is dark-on-dark. The status is
+// carried by the border and tint; the label just has to be readable, and
+// --color-text-* is the one pair that flips with the theme.
 const STATUS_COLORS = {
-    default: { bg: 'var(--color-neutral-50)', border: 'var(--color-neutral-300)', text: 'var(--color-neutral-900)' },
-    active: { bg: 'var(--color-primary-50)', border: 'var(--color-primary-400)', text: 'var(--color-primary-700)' },
-    success: { bg: 'var(--color-success-50, #f0fdf4)', border: 'var(--color-success-default)', text: 'var(--color-success-700, #15803d)' },
-    warning: { bg: 'var(--color-warning-50, #fffbeb)', border: 'var(--color-warning-default)', text: 'var(--color-warning-700, #a16207)' },
-    error: { bg: 'var(--color-error-50, #fef2f2)', border: 'var(--color-error-default)', text: 'var(--color-error-700, #b91c1c)' },
-    muted: { bg: 'var(--color-neutral-100)', border: 'var(--color-neutral-200)', text: 'var(--color-neutral-400)' },
+    default: { bg: 'var(--color-neutral-50)', border: 'var(--color-neutral-300)', text: 'var(--color-text-primary)' },
+    active: { bg: 'var(--color-primary-50)', border: 'var(--color-primary-400)', text: 'var(--color-text-primary)' },
+    success: { bg: 'var(--color-success-50, #f0fdf4)', border: 'var(--color-success-default)', text: 'var(--color-text-primary)' },
+    warning: { bg: 'var(--color-warning-50, #fffbeb)', border: 'var(--color-warning-default)', text: 'var(--color-text-primary)' },
+    error: { bg: 'var(--color-error-50, #fef2f2)', border: 'var(--color-error-default)', text: 'var(--color-text-primary)' },
+    muted: { bg: 'var(--color-neutral-100)', border: 'var(--color-neutral-200)', text: 'var(--color-text-tertiary)' },
 };
+/** Parses `#rgb`, `#rrggbb`, `rgb()` and `rgba()`. Anything else → null. */
+function parseRgb(color) {
+    const hex = color.trim().match(/^#([0-9a-f]{3}|[0-9a-f]{6})$/i);
+    if (hex) {
+        const h = hex[1];
+        const full = h.length === 3 ? h.split('').map(c => c + c).join('') : h;
+        return [0, 2, 4].map(i => parseInt(full.slice(i, i + 2), 16));
+    }
+    const rgb = color.match(/^rgba?\(([^)]+)\)/i);
+    if (rgb) {
+        const p = rgb[1].split(',').map(s => parseFloat(s));
+        if (p.length >= 3 && p.every(n => !Number.isNaN(n)))
+            return [p[0], p[1], p[2]];
+    }
+    return null;
+}
+/**
+ * Ink that stays readable on an arbitrary caller-supplied `typeColors` value.
+ *
+ * No theme token can do this job: a type colour is chosen by the consumer, so it
+ * may be light while the theme is dark (or the reverse). `--color-neutral-900`
+ * looks like "dark ink" but the dark theme inverts the neutral scale and resolves
+ * it to #f9fafb — white label on a pale tile. Derive the ink from the colour's own
+ * luminance instead, and fall back to the theme when it can't be parsed.
+ */
+function readableInk(color) {
+    const rgb = parseRgb(color);
+    if (!rgb)
+        return 'var(--color-text-primary)';
+    const [r, g, b] = rgb.map(c => {
+        const s = c / 255;
+        return s <= 0.03928 ? s / 12.92 : Math.pow((s + 0.055) / 1.055, 2.4);
+    });
+    const luminance = 0.2126 * r + 0.7152 * g + 0.0722 * b;
+    return luminance > 0.4 ? '#111827' : '#f9fafb';
+}
 /**
  * Dependency viewer component for visualizing hierarchical and cross-cutting relationships.
  *
@@ -13217,10 +13476,34 @@ const STATUS_COLORS = {
  * - SVG arrowhead markers on cross-reference edges
  * - Dark/light theme support
  *
+ * ## Feeding it a graph
+ *
+ * `root` is a *tree*, but the input is treated as a graph: a link back to a node
+ * that already has a place in the layout — a cycle, or a node reached from a
+ * second parent — is drawn as a cross-reference arrow instead of being followed.
+ * Every node is laid out exactly once, and no input can make the layout recurse
+ * forever.
+ *
+ * For incremental exploration, hand in a wider `root` per step and let
+ * `nodeExpand` drive the loading. Pan, zoom, collapse state and selection all
+ * survive a `root` swap, and `anchorNodeId` (defaulting to the selected node)
+ * keeps the viewport pinned while the graph grows around it.
+ *
  * @example
  * ```html
  * <lc-dependency-viewer [root]="specTree" direction="horizontal" />
  * ```
+ *
+ * @example Incremental graph exploration
+ * ```html
+ * <lc-dependency-viewer
+ *   [root]="graph()"
+ *   [anchorNodeId]="anchor()"
+ *   [typeColors]="{ Alpha: '#c1e3e9' }"
+ *   (nodeSelect)="showDetails($event)"
+ *   (nodeExpand)="loadNeighbours($event)"
+ * />
+ * ```
  */
 class DependencyViewerComponent {
     root = input.required(...(ngDevMode ? [{ debugName: "root" }] : /* istanbul ignore next */ []));
@@ -13229,6 +13512,22 @@ class DependencyViewerComponent {
     showToolbar = input(true, ...(ngDevMode ? [{ debugName: "showToolbar" }] : /* istanbul ignore next */ []));
     showEdgeLabels = input(true, ...(ngDevMode ? [{ debugName: "showEdgeLabels" }] : /* istanbul ignore next */ []));
     edgeWidth = input(1.5, ...(ngDevMode ? [{ debugName: "edgeWidth" }] : /* istanbul ignore next */ []));
+    /**
+     * Node the viewport holds still across `root` updates. Defaults to the node the
+     * user last selected, which keeps click-to-expand steady without any wiring.
+     * Set it explicitly to anchor somewhere else (e.g. a deep-linked node).
+     */
+    anchorNodeId = input(null, ...(ngDevMode ? [{ debugName: "anchorNodeId" }] : /* istanbul ignore next */ []));
+    /** Fill colour per `DependencyNode.type`, e.g. `{ Class: '#8ea475' }`. */
+    typeColors = input({}, ...(ngDevMode ? [{ debugName: "typeColors" }] : /* istanbul ignore next */ []));
+    /** Relations to hide. Cross-reference edges of these types aren't rendered. */
+    hiddenRelations = input([], ...(ngDevMode ? [{ debugName: "hiddenRelations" }] : /* istanbul ignore next */ []));
+    /** Node types to hide, matched against `DependencyNode.type`. */
+    hiddenTypes = input([], ...(ngDevMode ? [{ debugName: "hiddenTypes" }] : /* istanbul ignore next */ []));
+    /** Fires when a node is selected (not on deselect), with the original node incl. `data`. */
+    nodeSelect = output();
+    /** Fires on double-click — the hook for "expand this node's neighbourhood". */
+    nodeExpand = output();
     zoom = signal(100, ...(ngDevMode ? [{ debugName: "zoom" }] : /* istanbul ignore next */ []));
     panX = signal(40, ...(ngDevMode ? [{ debugName: "panX" }] : /* istanbul ignore next */ []));
     panY = signal(40, ...(ngDevMode ? [{ debugName: "panY" }] : /* istanbul ignore next */ []));
@@ -13237,7 +13536,10 @@ class DependencyViewerComponent {
     isPanning = false;
     lastMouseX = 0;
     lastMouseY = 0;
-    effectiveRoot = computed(() => this.pruneCollapsed(this.root(), this.collapsedIds()), ...(ngDevMode ? [{ debugName: "effectiveRoot" }] : /* istanbul ignore next */ []));
+    hostEl = inject((ElementRef));
+    /** Last known layout position of the anchor, to compensate pan after a relayout. */
+    anchorPos = null;
+    effectiveRoot = computed(() => this.pruneCollapsed(this.root(), this.collapsedIds(), new Set()), ...(ngDevMode ? [{ debugName: "effectiveRoot" }] : /* istanbul ignore next */ []));
     allOriginalNodes = computed(() => {
         const map = new Map();
         collectAllNodes(this.root(), map);
@@ -13246,24 +13548,73 @@ class DependencyViewerComponent {
     layout = computed(() => {
         const root = this.effectiveRoot();
         const dir = this.direction();
-        const measured = measureTree(root, 0, dir);
+        const hiddenTypes = new Set(this.hiddenTypes());
+        const hiddenRelations = new Set(this.hiddenRelations());
+        const backEdges = [];
+        const measured = measureTree(root, 0, dir, new Set(), backEdges);
         const nodes = [];
+        const nodeMap = new Map();
         const treeEdges = [];
         const allNodes = this.allOriginalNodes();
         if (dir === 'horizontal') {
-            layoutTreeH(measured, 0, 0, null, nodes, treeEdges, allNodes);
+            layoutTreeH(measured, 0, 0, null, nodes, treeEdges, allNodes, nodeMap);
         }
         else {
-            layoutTreeV(measured, 0, 0, null, nodes, treeEdges, allNodes);
-        }
-        const crossEdges = createCrossRefEdges(nodes, allNodes, dir);
+            layoutTreeV(measured, 0, 0, null, nodes, treeEdges, allNodes, nodeMap);
+        }
+        const crossEdges = createCrossRefEdges(nodeMap, allNodes, dir, backEdges);
+        const edges = [...treeEdges, ...crossEdges].filter(e => !(e.relation && hiddenRelations.has(e.relation)));
+        // Type filtering hides nodes and anything still pointing at them. It runs
+        // after layout so the remaining nodes keep the positions they'd have anyway —
+        // toggling a filter must not reshuffle the whole graph.
+        const visibleNodes = hiddenTypes.size
+            ? nodes.filter(n => !(n.type && hiddenTypes.has(n.type)))
+            : nodes;
+        const visibleIds = new Set(visibleNodes.map(n => n.id));
+        const visibleEdges = hiddenTypes.size
+            ? edges.filter(e => visibleIds.has(e.sourceId) && visibleIds.has(e.targetId))
+            : edges;
         return {
-            nodes,
-            edges: [...treeEdges, ...crossEdges],
+            nodes: visibleNodes,
+            edges: visibleEdges,
+            nodeMap,
             width: dir === 'horizontal' ? measured.primary : measured.secondary,
             height: dir === 'horizontal' ? measured.secondary : measured.primary,
         };
     }, ...(ngDevMode ? [{ debugName: "layout" }] : /* istanbul ignore next */ []));
+    constructor() {
+        // Keep the anchor node pinned to its screen position across relayouts. A new
+        // `root` (an expand step) re-runs the tree layout from scratch, which recentres
+        // subtrees and shifts nodes that didn't change — the camera stays put while the
+        // graph slides underneath it. Compensating the pan by the anchor's own delta is
+        // what makes incremental expansion feel stable.
+        effect(() => {
+            const nodeMap = this.layout().nodeMap;
+            const anchorId = this.anchorNodeId() ?? this.selectedNodeId();
+            if (!anchorId) {
+                this.anchorPos = null;
+                return;
+            }
+            const node = nodeMap.get(anchorId);
+            if (!node) {
+                this.anchorPos = null;
+                return;
+            }
+            const prev = this.anchorPos;
+            if (prev && prev.id === anchorId && (prev.x !== node.x || prev.y !== node.y)) {
+                const dx = node.x - prev.x;
+                const dy = node.y - prev.y;
+                // `transform: translate(pan px) scale(z)` with `transform-origin: 0 0`, so
+                // screen = pan + z * layout — a layout delta moves the node by z * delta.
+                untracked(() => {
+                    const z = this.zoom() / 100;
+                    this.panX.set(this.panX() - dx * z);
+                    this.panY.set(this.panY() - dy * z);
+                });
+            }
+            this.anchorPos = { id: anchorId, x: node.x, y: node.y };
+        });
+    }
     svgWidth = computed(() => this.layout().width + 80, ...(ngDevMode ? [{ debugName: "svgWidth" }] : /* istanbul ignore next */ []));
     svgHeight = computed(() => this.layout().height + 80, ...(ngDevMode ? [{ debugName: "svgHeight" }] : /* istanbul ignore next */ []));
     viewBox = computed(() => `0 0 ${this.svgWidth()} ${this.svgHeight()}`, ...(ngDevMode ? [{ debugName: "viewBox" }] : /* istanbul ignore next */ []));
@@ -13283,19 +13634,33 @@ class DependencyViewerComponent {
             return [];
         return this.allOriginalNodes().get(id)?.dependsOn ?? [];
     }, ...(ngDevMode ? [{ debugName: "selectedDependsOn" }] : /* istanbul ignore next */ []));
+    // Grouped by label rather than relation, so free-form `relationLabel`s (CALLS,
+    // HAS_COLUMN, …) each get their own entry instead of collapsing into the handful
+    // of built-in relation types they borrow their colour from.
     legendItems = computed(() => {
-        const used = new Set();
+        const seen = new Map();
         for (const edge of this.layout().edges) {
-            if (edge.relation)
-                used.add(edge.relation);
+            if (!edge.isCrossRef || !edge.label || seen.has(edge.label))
+                continue;
+            seen.set(edge.label, { label: edge.label, color: edge.color, dashed: edge.dashed });
         }
-        return Array.from(used).map(r => ({
-            relation: r, label: RELATION_STYLES[r].label,
-            color: RELATION_STYLES[r].color, dashed: RELATION_STYLES[r].dashed,
-        }));
+        return Array.from(seen.values());
     }, ...(ngDevMode ? [{ debugName: "legendItems" }] : /* istanbul ignore next */ []));
+    typeLegendItems = computed(() => {
+        const colors = this.typeColors();
+        const seen = new Map();
+        for (const node of this.layout().nodes) {
+            if (!node.type || seen.has(node.type) || !colors[node.type])
+                continue;
+            seen.set(node.type, { type: node.type, color: colors[node.type] });
+        }
+        return Array.from(seen.values());
+    }, ...(ngDevMode ? [{ debugName: "typeLegendItems" }] : /* istanbul ignore next */ []));
+    // O(1) against the collected map. Deliberately keyed off the *original* tree, so
+    // a collapsed node keeps its "+" toggle even though it has no children in the
+    // pruned tree that gets laid out.
     hasChildren(nodeId) {
-        return !!(this.findOriginalNode(this.root(), nodeId)?.children?.length);
+        return !!this.allOriginalNodes().get(nodeId)?.children?.length;
     }
     isCollapsed(nodeId) {
         return this.collapsedIds().has(nodeId);
@@ -13303,24 +13668,37 @@ class DependencyViewerComponent {
     getRelationLabel(relation) {
         return RELATION_STYLES[relation]?.label ?? relation;
     }
-    pruneCollapsed(node, collapsed) {
-        if (collapsed.has(node.id) || !node.children?.length)
+    // `visited` keeps a cyclic graph from recursing forever here too — this runs
+    // before the layout's own guard sees the tree.
+    pruneCollapsed(node, collapsed, visited) {
+        if (visited.has(node.id) || collapsed.has(node.id) || !node.children?.length) {
             return { ...node, children: [] };
-        return { ...node, children: node.children.map(c => this.pruneCollapsed(c, collapsed)) };
-    }
-    findOriginalNode(node, id) {
-        if (node.id === id)
-            return node;
-        for (const child of node.children || []) {
-            const found = this.findOriginalNode(child, id);
-            if (found)
-                return found;
         }
-        return null;
+        visited.add(node.id);
+        return {
+            ...node,
+            children: node.children.map(c => this.pruneCollapsed(c, collapsed, visited)),
+        };
     }
     selectNode(id, event) {
         event.stopPropagation();
-        this.selectedNodeId.set(this.selectedNodeId() === id ? null : id);
+        const next = this.selectedNodeId() === id ? null : id;
+        this.selectedNodeId.set(next);
+        if (!next)
+            return;
+        const original = this.allOriginalNodes().get(id);
+        if (original)
+            this.nodeSelect.emit(original);
+    }
+    expandNode(id, event) {
+        event.stopPropagation();
+        // A double-click also delivers two clicks, which would toggle the selection
+        // straight back off. Re-assert it so the expanded node stays selected — and
+        // stays the anchor the viewport holds onto.
+        this.selectedNodeId.set(id);
+        const original = this.allOriginalNodes().get(id);
+        if (original)
+            this.nodeExpand.emit(original);
     }
     toggleCollapse(id, event) {
         event.stopPropagation();
@@ -13333,7 +13711,63 @@ class DependencyViewerComponent {
     deselectNode() { this.selectedNodeId.set(null); }
     zoomIn() { this.zoom.update(z => Math.min(z + 25, 300)); }
     zoomOut() { this.zoom.update(z => Math.max(z - 25, 25)); }
-    resetZoom() { this.zoom.set(100); this.panX.set(40); this.panY.set(40); }
+    resetZoom() { this.resetView(); }
+    // ── Imperative API ─────────────────────────────────────────────────────────
+    // For deep links (?anchor=<key> → centre on that node) and programmatic
+    // expand/collapse. Mirrors lc-tree-view's expandAll()/collapseAll() surface.
+    /** Centres the viewport on a node. No-op for an id that isn't laid out. */
+    focusNode(id) {
+        const node = this.layout().nodeMap.get(id);
+        if (!node)
+            return;
+        const z = this.zoom() / 100;
+        const el = this.hostEl.nativeElement.querySelector('.dep-viewer__canvas');
+        const viewW = el?.clientWidth ?? 0;
+        const viewH = el?.clientHeight ?? 0;
+        // Invert screen = pan + z * layout for the node's centre.
+        this.panX.set(viewW / 2 - (node.x + node.width / 2) * z);
+        this.panY.set(viewH / 2 - (node.y + node.height / 2) * z);
+        this.anchorPos = { id, x: node.x, y: node.y };
+    }
+    /** Restores the initial zoom and pan. */
+    resetView() {
+        this.zoom.set(100);
+        this.panX.set(40);
+        this.panY.set(40);
+    }
+    /** Expands a collapsed node. */
+    expand(id) {
+        this.collapsedIds.update(set => {
+            if (!set.has(id))
+                return set;
+            const next = new Set(set);
+            next.delete(id);
+            return next;
+        });
+    }
+    /** Collapses a node's sub-tree. */
+    collapse(id) {
+        this.collapsedIds.update(set => {
+            if (set.has(id))
+                return set;
+            const next = new Set(set);
+            next.add(id);
+            return next;
+        });
+    }
+    /** Expands every collapsed node. */
+    expandAll() {
+        this.collapsedIds.set(new Set());
+    }
+    /** Collapses every node that has children. */
+    collapseAll() {
+        const ids = new Set();
+        for (const [id, node] of this.allOriginalNodes()) {
+            if (node.children?.length)
+                ids.add(id);
+        }
+        this.collapsedIds.set(ids);
+    }
     onMouseDown(event) {
         if (event.button !== 0)
             return;
@@ -13354,16 +13788,29 @@ class DependencyViewerComponent {
         event.preventDefault();
         this.zoom.update(z => event.deltaY < 0 ? Math.min(z + 10, 300) : Math.max(z - 10, 25));
     }
-    getNodeBg(status) { return STATUS_COLORS[status].bg; }
-    getNodeBorder(status) { return STATUS_COLORS[status].border; }
-    getNodeText(status) { return STATUS_COLORS[status].text; }
+    // `type` is the category axis (Class/Table/Feature/…), `status` the semantic one
+    // (error/warning/…). A resolved type colour wins for the fill; everything else
+    // falls back to the status palette, so consumers that only use `status` are
+    // unaffected.
+    getNodeBg(node) {
+        const typeColor = node.type ? this.typeColors()[node.type] : undefined;
+        return typeColor ?? STATUS_COLORS[node.status].bg;
+    }
+    getNodeBorder(node) {
+        const typeColor = node.type ? this.typeColors()[node.type] : undefined;
+        return typeColor ?? STATUS_COLORS[node.status].border;
+    }
+    getNodeText(node) {
+        const typeColor = node.type ? this.typeColors()[node.type] : undefined;
+        return typeColor ? readableInk(typeColor) : STATUS_COLORS[node.status].text;
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: DependencyViewerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.10", type: DependencyViewerComponent, isStandalone: true, selector: "lc-dependency-viewer", inputs: { root: { classPropertyName: "root", publicName: "root", isSignal: true, isRequired: true, transformFunction: null }, direction: { classPropertyName: "direction", publicName: "direction", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, showToolbar: { classPropertyName: "showToolbar", publicName: "showToolbar", isSignal: true, isRequired: false, transformFunction: null }, showEdgeLabels: { classPropertyName: "showEdgeLabels", publicName: "showEdgeLabels", isSignal: true, isRequired: false, transformFunction: null }, edgeWidth: { classPropertyName: "edgeWidth", publicName: "edgeWidth", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "document:mousemove": "onMouseMove($event)", "document:mouseup": "onMouseUp()" }, properties: { "class": "\"dep-viewer\"", "style.height": "height()" } }, ngImport: i0, template: "<!-- Toolbar -->\n@if (showToolbar()) {\n  <div class=\"dep-viewer__toolbar\">\n    <button class=\"dep-viewer__btn\" (click)=\"zoomIn()\" title=\"Zoom in\">+</button>\n    <span class=\"dep-viewer__zoom\">{{ zoom() }}%</span>\n    <button class=\"dep-viewer__btn\" (click)=\"zoomOut()\" title=\"Zoom out\">\u2212</button>\n    <button class=\"dep-viewer__btn dep-viewer__btn--reset\" (click)=\"resetZoom()\" title=\"Reset\">\u27F2</button>\n    <span class=\"dep-viewer__direction-label\">{{ direction() === 'horizontal' ? '\u2192' : '\u2193' }}</span>\n  </div>\n}\n\n<!-- Canvas -->\n<div\n  class=\"dep-viewer__canvas\"\n  (mousedown)=\"onMouseDown($event)\"\n  (wheel)=\"onWheel($event)\"\n  (click)=\"deselectNode()\"\n>\n  <svg\n    [attr.width]=\"svgWidth()\"\n    [attr.height]=\"svgHeight()\"\n    [attr.viewBox]=\"viewBox()\"\n    [style.transform]=\"transform()\"\n    class=\"dep-viewer__svg\"\n  >\n    <!-- Arrow markers for cross-reference edges -->\n    <defs>\n      <marker id=\"arrow-default\"  markerWidth=\"8\" markerHeight=\"6\" refX=\"8\" refY=\"3\" orient=\"auto\"><path d=\"M0,0 L8,3 L0,6 Z\" fill=\"var(--color-neutral-400)\"/></marker>\n      <marker id=\"arrow-blocks\"   markerWidth=\"8\" markerHeight=\"6\" refX=\"8\" refY=\"3\" orient=\"auto\"><path d=\"M0,0 L8,3 L0,6 Z\" fill=\"var(--color-error-default)\"/></marker>\n      <marker id=\"arrow-references\" markerWidth=\"8\" markerHeight=\"6\" refX=\"8\" refY=\"3\" orient=\"auto\"><path d=\"M0,0 L8,3 L0,6 Z\" fill=\"var(--color-info-default, #3b82f6)\"/></marker>\n      <marker id=\"arrow-requires\" markerWidth=\"8\" markerHeight=\"6\" refX=\"8\" refY=\"3\" orient=\"auto\"><path d=\"M0,0 L8,3 L0,6 Z\" fill=\"var(--color-warning-default)\"/></marker>\n      <marker id=\"arrow-extends\"  markerWidth=\"8\" markerHeight=\"6\" refX=\"8\" refY=\"3\" orient=\"auto\"><path d=\"M0,0 L8,3 L0,6 Z\" fill=\"var(--color-primary-400)\"/></marker>\n      <marker id=\"arrow-implements\" markerWidth=\"8\" markerHeight=\"6\" refX=\"8\" refY=\"3\" orient=\"auto\"><path d=\"M0,0 L8,3 L0,6 Z\" fill=\"var(--color-success-default)\"/></marker>\n      <marker id=\"arrow-uses\"     markerWidth=\"8\" markerHeight=\"6\" refX=\"8\" refY=\"3\" orient=\"auto\"><path d=\"M0,0 L8,3 L0,6 Z\" fill=\"var(--color-neutral-300)\"/></marker>\n      <marker id=\"arrow-depends\"  markerWidth=\"8\" markerHeight=\"6\" refX=\"8\" refY=\"3\" orient=\"auto\"><path d=\"M0,0 L8,3 L0,6 Z\" fill=\"var(--color-neutral-400)\"/></marker>\n    </defs>\n\n    <!-- Edges -->\n    @for (edge of layout().edges; track edge.id) {\n      <path\n        [attr.d]=\"edge.path\"\n        [attr.stroke]=\"edge.color\"\n        [attr.stroke-width]=\"edgeWidth()\"\n        [attr.stroke-dasharray]=\"edge.dashed ? '6 3' : 'none'\"\n        [attr.marker-end]=\"edge.isCrossRef ? 'url(#arrow-' + (edge.relation || 'default') + ')' : ''\"\n        fill=\"none\"\n        class=\"dep-viewer__edge\"\n        [class.dep-viewer__edge--cross-ref]=\"edge.isCrossRef\"\n      />\n      @if (showEdgeLabels() && edge.isCrossRef && edge.relation) {\n        <text\n          [attr.x]=\"edge.labelX\"\n          [attr.y]=\"edge.labelY\"\n          class=\"dep-viewer__edge-label\"\n          [attr.fill]=\"edge.color\"\n          text-anchor=\"middle\"\n        >{{ getRelationLabel(edge.relation) }}</text>\n      }\n    }\n\n    <!-- Nodes -->\n    @for (node of layout().nodes; track node.id) {\n      <g\n        class=\"dep-viewer__node\"\n        [class.dep-viewer__node--selected]=\"selectedNodeId() === node.id\"\n        (click)=\"selectNode(node.id, $event)\"\n      >\n        <rect\n          [attr.x]=\"node.x\"\n          [attr.y]=\"node.y\"\n          [attr.width]=\"node.width\"\n          [attr.height]=\"node.height\"\n          rx=\"6\" ry=\"6\"\n          [attr.fill]=\"getNodeBg(node.status)\"\n          [attr.stroke]=\"selectedNodeId() === node.id ? 'var(--color-primary-500)' : getNodeBorder(node.status)\"\n          stroke-width=\"1.5\"\n        />\n        <text\n          [attr.x]=\"node.x + node.width / 2\"\n          [attr.y]=\"node.y + node.height / 2 + 4\"\n          text-anchor=\"middle\"\n          [attr.fill]=\"getNodeText(node.status)\"\n          class=\"dep-viewer__node-label\"\n        >{{ node.label }}</text>\n\n        <!-- Collapse/expand toggle -->\n        @if (hasChildren(node.id)) {\n          <g\n            class=\"dep-viewer__toggle\"\n            (click)=\"toggleCollapse(node.id, $event)\"\n          >\n            @if (direction() === 'horizontal') {\n              <circle\n                [attr.cx]=\"node.x + node.width + 10\"\n                [attr.cy]=\"node.y + node.height / 2\"\n                r=\"8\"\n                fill=\"var(--color-neutral-100)\" stroke=\"var(--color-neutral-300)\" stroke-width=\"1\"\n              />\n              <text\n                [attr.x]=\"node.x + node.width + 10\"\n                [attr.y]=\"node.y + node.height / 2 + 4\"\n                text-anchor=\"middle\"\n                class=\"dep-viewer__toggle-text\"\n              >{{ isCollapsed(node.id) ? '+' : '\u2212' }}</text>\n            } @else {\n              <circle\n                [attr.cx]=\"node.x + node.width / 2\"\n                [attr.cy]=\"node.y + node.height + 10\"\n                r=\"8\"\n                fill=\"var(--color-neutral-100)\" stroke=\"var(--color-neutral-300)\" stroke-width=\"1\"\n              />\n              <text\n                [attr.x]=\"node.x + node.width / 2\"\n                [attr.y]=\"node.y + node.height + 14\"\n                text-anchor=\"middle\"\n                class=\"dep-viewer__toggle-text\"\n              >{{ isCollapsed(node.id) ? '+' : '\u2212' }}</text>\n            }\n          </g>\n        }\n      </g>\n    }\n  </svg>\n</div>\n\n<!-- Legend -->\n@if (legendItems().length) {\n  <div class=\"dep-viewer__legend\">\n    @for (item of legendItems(); track item.relation) {\n      <span class=\"dep-viewer__legend-item\">\n        <svg width=\"24\" height=\"10\">\n          <line\n            x1=\"0\" y1=\"5\" x2=\"24\" y2=\"5\"\n            [attr.stroke]=\"item.color\"\n            stroke-width=\"2\"\n            [attr.stroke-dasharray]=\"item.dashed ? '4 2' : 'none'\"\n          />\n        </svg>\n        <span class=\"dep-viewer__legend-text\">{{ item.label }}</span>\n      </span>\n    }\n  </div>\n}\n\n<!-- Detail panel -->\n@if (selectedNode(); as node) {\n  <div class=\"dep-viewer__detail\">\n    <div class=\"dep-viewer__detail-header\">\n      <span class=\"dep-viewer__detail-status dep-viewer__detail-status--{{ node.status }}\">\u25CF</span>\n      <strong>{{ node.label }}</strong>\n    </div>\n    @if (node.description) {\n      <p class=\"dep-viewer__detail-desc\">{{ node.description }}</p>\n    }\n    <div class=\"dep-viewer__detail-meta\">\n      <span>Depth: {{ node.depth }}</span>\n      <span>Children: {{ node.outgoingCount }}</span>\n      <span>Depends on: {{ node.incomingCount }}</span>\n    </div>\n    @if (selectedDependsOn().length) {\n      <div class=\"dep-viewer__detail-deps\">\n        <strong>Dependencies:</strong>\n        <ul>\n          @for (dep of selectedDependsOn(); track dep.id) {\n            <li>\n              <span class=\"dep-viewer__dep-relation\">{{ getRelationLabel(dep.relation || 'depends') }}</span>\n              \u2192 {{ dep.id }}\n            </li>\n          }\n        </ul>\n      </div>\n    }\n  </div>\n}\n", styles: [":host{display:block;position:relative;overflow:hidden;border:1px solid var(--color-neutral-200);border-radius:8px;background:var(--color-surface)}.dep-viewer__toolbar{display:flex;align-items:center;gap:4px;padding:8px 12px;border-bottom:1px solid var(--color-neutral-200);background:var(--color-neutral-50);-webkit-user-select:none;user-select:none}.dep-viewer__btn{width:28px;height:28px;display:flex;align-items:center;justify-content:center;border:1px solid var(--color-neutral-300);border-radius:4px;background:var(--color-surface);cursor:pointer;font-size:14px;line-height:1}.dep-viewer__btn:hover{background:var(--color-neutral-100)}.dep-viewer__btn--reset{margin-left:4px}.dep-viewer__zoom{font-size:12px;min-width:40px;text-align:center;color:var(--color-text-secondary)}.dep-viewer__direction-label{margin-left:8px;font-size:14px;color:var(--color-text-tertiary)}.dep-viewer__canvas{cursor:grab;overflow:hidden;width:100%;height:100%}.dep-viewer__canvas:active{cursor:grabbing}.dep-viewer__svg{transform-origin:0 0;transition:transform .1s ease-out}.dep-viewer__edge{pointer-events:none;transition:opacity .15s}.dep-viewer__edge--cross-ref{opacity:.8}.dep-viewer__edge-label{font-size:9px;font-weight:500;pointer-events:none;-webkit-user-select:none;user-select:none}.dep-viewer__node{cursor:pointer;transition:filter .15s}.dep-viewer__node:hover{filter:brightness(.96)}.dep-viewer__node--selected rect{stroke-width:2.5}.dep-viewer__node-label{font-size:12px;font-weight:500;pointer-events:none;-webkit-user-select:none;user-select:none}.dep-viewer__toggle{cursor:pointer}.dep-viewer__toggle:hover circle{fill:var(--color-neutral-200)}.dep-viewer__toggle-text{font-size:11px;font-weight:600;fill:var(--color-neutral-600);pointer-events:none;-webkit-user-select:none;user-select:none}.dep-viewer__legend{display:flex;flex-wrap:wrap;gap:12px;padding:6px 12px;border-top:1px solid var(--color-neutral-200);background:var(--color-neutral-50)}.dep-viewer__legend-item{display:flex;align-items:center;gap:4px}.dep-viewer__legend-text{font-size:11px;color:var(--color-text-secondary)}.dep-viewer__detail{position:absolute;bottom:12px;right:12px;width:240px;padding:12px;background:var(--color-surface);border:1px solid var(--color-neutral-200);border-radius:8px;box-shadow:var(--elevation-1);font-size:12px;z-index:10}.dep-viewer__detail-header{display:flex;align-items:center;gap:6px;margin-bottom:4px;font-size:13px}.dep-viewer__detail-status{font-size:10px}.dep-viewer__detail-status--default{color:var(--color-text-tertiary)}.dep-viewer__detail-status--active{color:var(--color-primary-400)}.dep-viewer__detail-status--success{color:var(--color-success-default)}.dep-viewer__detail-status--warning{color:var(--color-warning-default)}.dep-viewer__detail-status--error{color:var(--color-error-default)}.dep-viewer__detail-status--muted{color:var(--color-neutral-300)}.dep-viewer__detail-desc{color:var(--color-text-secondary);margin:0 0 6px;line-height:1.4}.dep-viewer__detail-meta{display:flex;flex-wrap:wrap;gap:8px;color:var(--color-text-tertiary);font-size:11px}.dep-viewer__detail-deps{margin-top:8px;padding-top:8px;border-top:1px solid var(--color-neutral-100)}.dep-viewer__detail-deps ul{list-style:none;margin:4px 0 0;padding:0}.dep-viewer__detail-deps li{padding:2px 0;color:var(--color-text-secondary)}.dep-viewer__dep-relation{display:inline-block;padding:1px 4px;background:var(--color-neutral-100);border-radius:3px;font-size:10px;font-weight:500;color:var(--color-text-secondary)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.10", type: DependencyViewerComponent, isStandalone: true, selector: "lc-dependency-viewer", inputs: { root: { classPropertyName: "root", publicName: "root", isSignal: true, isRequired: true, transformFunction: null }, direction: { classPropertyName: "direction", publicName: "direction", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, showToolbar: { classPropertyName: "showToolbar", publicName: "showToolbar", isSignal: true, isRequired: false, transformFunction: null }, showEdgeLabels: { classPropertyName: "showEdgeLabels", publicName: "showEdgeLabels", isSignal: true, isRequired: false, transformFunction: null }, edgeWidth: { classPropertyName: "edgeWidth", publicName: "edgeWidth", isSignal: true, isRequired: false, transformFunction: null }, anchorNodeId: { classPropertyName: "anchorNodeId", publicName: "anchorNodeId", isSignal: true, isRequired: false, transformFunction: null }, typeColors: { classPropertyName: "typeColors", publicName: "typeColors", isSignal: true, isRequired: false, transformFunction: null }, hiddenRelations: { classPropertyName: "hiddenRelations", publicName: "hiddenRelations", isSignal: true, isRequired: false, transformFunction: null }, hiddenTypes: { classPropertyName: "hiddenTypes", publicName: "hiddenTypes", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { nodeSelect: "nodeSelect", nodeExpand: "nodeExpand" }, host: { listeners: { "document:mousemove": "onMouseMove($event)", "document:mouseup": "onMouseUp()" }, properties: { "class": "\"dep-viewer\"", "style.height": "height()" } }, ngImport: i0, template: "<!-- Toolbar -->\n@if (showToolbar()) {\n  <div class=\"dep-viewer__toolbar\">\n    <button class=\"dep-viewer__btn\" (click)=\"zoomIn()\" title=\"Zoom in\">+</button>\n    <span class=\"dep-viewer__zoom\">{{ zoom() }}%</span>\n    <button class=\"dep-viewer__btn\" (click)=\"zoomOut()\" title=\"Zoom out\">\u2212</button>\n    <button class=\"dep-viewer__btn dep-viewer__btn--reset\" (click)=\"resetZoom()\" title=\"Reset\">\u27F2</button>\n    <span class=\"dep-viewer__direction-label\">{{ direction() === 'horizontal' ? '\u2192' : '\u2193' }}</span>\n  </div>\n}\n\n<!-- Canvas -->\n<div\n  class=\"dep-viewer__canvas\"\n  (mousedown)=\"onMouseDown($event)\"\n  (wheel)=\"onWheel($event)\"\n  (click)=\"deselectNode()\"\n>\n  <svg\n    [attr.width]=\"svgWidth()\"\n    [attr.height]=\"svgHeight()\"\n    [attr.viewBox]=\"viewBox()\"\n    [style.transform]=\"transform()\"\n    class=\"dep-viewer__svg\"\n  >\n    <!-- Arrow markers for cross-reference edges -->\n    <defs>\n      <marker id=\"arrow-default\"  markerWidth=\"8\" markerHeight=\"6\" refX=\"8\" refY=\"3\" orient=\"auto\"><path d=\"M0,0 L8,3 L0,6 Z\" fill=\"var(--color-neutral-400)\"/></marker>\n      <marker id=\"arrow-blocks\"   markerWidth=\"8\" markerHeight=\"6\" refX=\"8\" refY=\"3\" orient=\"auto\"><path d=\"M0,0 L8,3 L0,6 Z\" fill=\"var(--color-error-default)\"/></marker>\n      <marker id=\"arrow-references\" markerWidth=\"8\" markerHeight=\"6\" refX=\"8\" refY=\"3\" orient=\"auto\"><path d=\"M0,0 L8,3 L0,6 Z\" fill=\"var(--color-info-default, #3b82f6)\"/></marker>\n      <marker id=\"arrow-requires\" markerWidth=\"8\" markerHeight=\"6\" refX=\"8\" refY=\"3\" orient=\"auto\"><path d=\"M0,0 L8,3 L0,6 Z\" fill=\"var(--color-warning-default)\"/></marker>\n      <marker id=\"arrow-extends\"  markerWidth=\"8\" markerHeight=\"6\" refX=\"8\" refY=\"3\" orient=\"auto\"><path d=\"M0,0 L8,3 L0,6 Z\" fill=\"var(--color-primary-400)\"/></marker>\n      <marker id=\"arrow-implements\" markerWidth=\"8\" markerHeight=\"6\" refX=\"8\" refY=\"3\" orient=\"auto\"><path d=\"M0,0 L8,3 L0,6 Z\" fill=\"var(--color-success-default)\"/></marker>\n      <marker id=\"arrow-uses\"     markerWidth=\"8\" markerHeight=\"6\" refX=\"8\" refY=\"3\" orient=\"auto\"><path d=\"M0,0 L8,3 L0,6 Z\" fill=\"var(--color-neutral-300)\"/></marker>\n      <marker id=\"arrow-depends\"  markerWidth=\"8\" markerHeight=\"6\" refX=\"8\" refY=\"3\" orient=\"auto\"><path d=\"M0,0 L8,3 L0,6 Z\" fill=\"var(--color-neutral-400)\"/></marker>\n    </defs>\n\n    <!-- Edges -->\n    @for (edge of layout().edges; track edge.id) {\n      <path\n        [attr.d]=\"edge.path\"\n        [attr.stroke]=\"edge.color\"\n        [attr.stroke-width]=\"edgeWidth()\"\n        [attr.stroke-dasharray]=\"edge.dashed ? '6 3' : 'none'\"\n        [attr.marker-end]=\"edge.isCrossRef ? 'url(#arrow-' + edge.marker + ')' : ''\"\n        fill=\"none\"\n        class=\"dep-viewer__edge\"\n        [class.dep-viewer__edge--cross-ref]=\"edge.isCrossRef\"\n      />\n      @if (showEdgeLabels() && edge.isCrossRef && edge.label) {\n        <text\n          [attr.x]=\"edge.labelX\"\n          [attr.y]=\"edge.labelY\"\n          class=\"dep-viewer__edge-label\"\n          [attr.fill]=\"edge.color\"\n          text-anchor=\"middle\"\n        >{{ edge.label }}</text>\n      }\n    }\n\n    <!-- Nodes -->\n    @for (node of layout().nodes; track node.id) {\n      <g\n        class=\"dep-viewer__node\"\n        [class.dep-viewer__node--selected]=\"selectedNodeId() === node.id\"\n        (click)=\"selectNode(node.id, $event)\"\n        (dblclick)=\"expandNode(node.id, $event)\"\n      >\n        <!-- Opaque backdrop. The status fills are translucent tints (in the dark\n             theme --color-success-50 & co. resolve to rgba(\u2026, 0.18)), so without\n             something solid beneath them the edges routed under a node show\n             straight through it. This keeps the tint compositing against the\n             viewer's own surface instead of against whatever passes behind. -->\n        <rect\n          [attr.x]=\"node.x\"\n          [attr.y]=\"node.y\"\n          [attr.width]=\"node.width\"\n          [attr.height]=\"node.height\"\n          rx=\"6\" ry=\"6\"\n          class=\"dep-viewer__node-backdrop\"\n        />\n        <rect\n          class=\"dep-viewer__node-fill\"\n          [attr.x]=\"node.x\"\n          [attr.y]=\"node.y\"\n          [attr.width]=\"node.width\"\n          [attr.height]=\"node.height\"\n          rx=\"6\" ry=\"6\"\n          [attr.fill]=\"getNodeBg(node)\"\n          [attr.stroke]=\"selectedNodeId() === node.id ? 'var(--color-primary-500)' : getNodeBorder(node)\"\n          stroke-width=\"1.5\"\n        />\n        <text\n          [attr.x]=\"node.x + node.width / 2\"\n          [attr.y]=\"node.y + node.height / 2 + 4\"\n          text-anchor=\"middle\"\n          [attr.fill]=\"getNodeText(node)\"\n          class=\"dep-viewer__node-label\"\n        >{{ node.label }}</text>\n\n        <!-- \"+N\" marker: this node has more neighbours than are shown -->\n        @if (node.moreCount) {\n          <g class=\"dep-viewer__more\">\n            <rect\n              [attr.x]=\"node.x + node.width - 26\"\n              [attr.y]=\"node.y - 8\"\n              width=\"32\" height=\"16\" rx=\"8\" ry=\"8\"\n            />\n            <text\n              [attr.x]=\"node.x + node.width - 10\"\n              [attr.y]=\"node.y + 3\"\n              text-anchor=\"middle\"\n            >+{{ node.moreCount }}</text>\n          </g>\n        }\n\n        <!-- Collapse/expand toggle -->\n        @if (hasChildren(node.id)) {\n          <g\n            class=\"dep-viewer__toggle\"\n            (click)=\"toggleCollapse(node.id, $event)\"\n          >\n            @if (direction() === 'horizontal') {\n              <circle\n                [attr.cx]=\"node.x + node.width + 10\"\n                [attr.cy]=\"node.y + node.height / 2\"\n                r=\"8\"\n                fill=\"var(--color-neutral-100)\" stroke=\"var(--color-neutral-300)\" stroke-width=\"1\"\n              />\n              <text\n                [attr.x]=\"node.x + node.width + 10\"\n                [attr.y]=\"node.y + node.height / 2 + 4\"\n                text-anchor=\"middle\"\n                class=\"dep-viewer__toggle-text\"\n              >{{ isCollapsed(node.id) ? '+' : '\u2212' }}</text>\n            } @else {\n              <circle\n                [attr.cx]=\"node.x + node.width / 2\"\n                [attr.cy]=\"node.y + node.height + 10\"\n                r=\"8\"\n                fill=\"var(--color-neutral-100)\" stroke=\"var(--color-neutral-300)\" stroke-width=\"1\"\n              />\n              <text\n                [attr.x]=\"node.x + node.width / 2\"\n                [attr.y]=\"node.y + node.height + 14\"\n                text-anchor=\"middle\"\n                class=\"dep-viewer__toggle-text\"\n              >{{ isCollapsed(node.id) ? '+' : '\u2212' }}</text>\n            }\n          </g>\n        }\n      </g>\n    }\n  </svg>\n</div>\n\n<!-- Legend -->\n@if (legendItems().length || typeLegendItems().length) {\n  <div class=\"dep-viewer__legend\">\n    @for (item of legendItems(); track item.label) {\n      <span class=\"dep-viewer__legend-item\">\n        <svg width=\"24\" height=\"10\">\n          <line\n            x1=\"0\" y1=\"5\" x2=\"24\" y2=\"5\"\n            [attr.stroke]=\"item.color\"\n            stroke-width=\"2\"\n            [attr.stroke-dasharray]=\"item.dashed ? '4 2' : 'none'\"\n          />\n        </svg>\n        <span class=\"dep-viewer__legend-text\">{{ item.label }}</span>\n      </span>\n    }\n    @for (item of typeLegendItems(); track item.type) {\n      <span class=\"dep-viewer__legend-item\">\n        <svg width=\"10\" height=\"10\">\n          <rect width=\"10\" height=\"10\" rx=\"2\" ry=\"2\" [attr.fill]=\"item.color\" />\n        </svg>\n        <span class=\"dep-viewer__legend-text\">{{ item.type }}</span>\n      </span>\n    }\n  </div>\n}\n\n<!-- Detail panel -->\n@if (selectedNode(); as node) {\n  <div class=\"dep-viewer__detail\">\n    <div class=\"dep-viewer__detail-header\">\n      <span class=\"dep-viewer__detail-status dep-viewer__detail-status--{{ node.status }}\">\u25CF</span>\n      <strong>{{ node.label }}</strong>\n      @if (node.type) {\n        <span class=\"dep-viewer__detail-type\">{{ node.type }}</span>\n      }\n    </div>\n    @if (node.description) {\n      <p class=\"dep-viewer__detail-desc\">{{ node.description }}</p>\n    }\n    <div class=\"dep-viewer__detail-meta\">\n      <span>Depth: {{ node.depth }}</span>\n      <span>Children: {{ node.outgoingCount }}</span>\n      <span>Depends on: {{ node.incomingCount }}</span>\n    </div>\n    @if (selectedDependsOn().length) {\n      <div class=\"dep-viewer__detail-deps\">\n        <strong>Dependencies:</strong>\n        <ul>\n          @for (dep of selectedDependsOn(); track dep.id) {\n            <li>\n              <span class=\"dep-viewer__dep-relation\">{{\n                dep.relationLabel || getRelationLabel(dep.relation || 'depends')\n              }}</span>\n              \u2192 {{ dep.id }}\n            </li>\n          }\n        </ul>\n      </div>\n    }\n  </div>\n}\n", styles: [":host{display:block;position:relative;overflow:hidden;border:1px solid var(--color-border);border-radius:8px;background:var(--color-surface)}.dep-viewer__toolbar{display:flex;align-items:center;gap:4px;padding:8px 12px;border-bottom:1px solid var(--color-border);background:var(--color-surface-2);-webkit-user-select:none;user-select:none}.dep-viewer__btn{width:28px;height:28px;display:flex;align-items:center;justify-content:center;border:1px solid var(--color-border);border-radius:4px;background:var(--color-surface);color:var(--color-text-secondary);cursor:pointer;font-size:14px;line-height:1}.dep-viewer__btn:hover{background:var(--color-surface-hover)}.dep-viewer__btn--reset{margin-left:4px}.dep-viewer__zoom{font-size:12px;min-width:40px;text-align:center;color:var(--color-text-secondary)}.dep-viewer__direction-label{margin-left:8px;font-size:14px;color:var(--color-text-tertiary)}.dep-viewer__canvas{cursor:grab;overflow:hidden;width:100%;height:100%}.dep-viewer__canvas:active{cursor:grabbing}.dep-viewer__svg{transform-origin:0 0;transition:transform .1s ease-out}.dep-viewer__edge{pointer-events:none;transition:opacity .15s}.dep-viewer__edge--cross-ref{opacity:.8}.dep-viewer__edge-label{font-size:9px;font-weight:500;pointer-events:none;-webkit-user-select:none;user-select:none}.dep-viewer__node{cursor:pointer;transition:filter .15s}.dep-viewer__node:hover{filter:brightness(.96)}.dep-viewer__node--selected rect{stroke-width:2.5}.dep-viewer__node-backdrop{fill:var(--color-surface)}.dep-viewer__node-label{font-size:12px;font-weight:500;pointer-events:none;-webkit-user-select:none;user-select:none}.dep-viewer__toggle{cursor:pointer}.dep-viewer__toggle:hover circle{fill:var(--color-surface-hover)}.dep-viewer__more{pointer-events:none}.dep-viewer__more rect{fill:var(--color-surface-2);stroke:var(--color-border-strong);stroke-width:1}.dep-viewer__more text{font-size:9px;font-weight:600;fill:var(--color-text-secondary);-webkit-user-select:none;user-select:none}.dep-viewer__toggle-text{font-size:11px;font-weight:600;fill:var(--color-text-secondary);pointer-events:none;-webkit-user-select:none;user-select:none}.dep-viewer__legend{display:flex;flex-wrap:wrap;gap:12px;padding:6px 12px;border-top:1px solid var(--color-border);background:var(--color-surface-2)}.dep-viewer__legend-item{display:flex;align-items:center;gap:4px}.dep-viewer__legend-text{font-size:11px;color:var(--color-text-secondary)}.dep-viewer__detail{position:absolute;bottom:12px;right:12px;width:240px;padding:12px;background:var(--color-surface-2);border:1px solid var(--color-border);border-radius:8px;box-shadow:var(--elevation-1);font-size:12px;z-index:10}.dep-viewer__detail-header{display:flex;align-items:center;gap:6px;margin-bottom:4px;font-size:13px}.dep-viewer__detail-type{margin-left:auto;padding:1px 6px;border-radius:3px;background:var(--color-surface-hover);color:var(--color-text-secondary);font-size:10px;font-weight:500}.dep-viewer__detail-status{font-size:10px}.dep-viewer__detail-status--default{color:var(--color-text-tertiary)}.dep-viewer__detail-status--active{color:var(--color-primary-400)}.dep-viewer__detail-status--success{color:var(--color-success-default)}.dep-viewer__detail-status--warning{color:var(--color-warning-default)}.dep-viewer__detail-status--error{color:var(--color-error-default)}.dep-viewer__detail-status--muted{color:var(--color-text-disabled)}.dep-viewer__detail-desc{color:var(--color-text-secondary);margin:0 0 6px;line-height:1.4}.dep-viewer__detail-meta{display:flex;flex-wrap:wrap;gap:8px;color:var(--color-text-tertiary);font-size:11px}.dep-viewer__detail-deps{margin-top:8px;padding-top:8px;border-top:1px solid var(--color-border)}.dep-viewer__detail-deps ul{list-style:none;margin:4px 0 0;padding:0}.dep-viewer__detail-deps li{padding:2px 0;color:var(--color-text-secondary)}.dep-viewer__dep-relation{display:inline-block;padding:1px 4px;background:var(--color-surface-hover);border-radius:3px;font-size:10px;font-weight:500;color:var(--color-text-secondary)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: DependencyViewerComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lc-dependency-viewer', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, host: { '[class]': '"dep-viewer"', '[style.height]': 'height()' }, template: "<!-- Toolbar -->\n@if (showToolbar()) {\n  <div class=\"dep-viewer__toolbar\">\n    <button class=\"dep-viewer__btn\" (click)=\"zoomIn()\" title=\"Zoom in\">+</button>\n    <span class=\"dep-viewer__zoom\">{{ zoom() }}%</span>\n    <button class=\"dep-viewer__btn\" (click)=\"zoomOut()\" title=\"Zoom out\">\u2212</button>\n    <button class=\"dep-viewer__btn dep-viewer__btn--reset\" (click)=\"resetZoom()\" title=\"Reset\">\u27F2</button>\n    <span class=\"dep-viewer__direction-label\">{{ direction() === 'horizontal' ? '\u2192' : '\u2193' }}</span>\n  </div>\n}\n\n<!-- Canvas -->\n<div\n  class=\"dep-viewer__canvas\"\n  (mousedown)=\"onMouseDown($event)\"\n  (wheel)=\"onWheel($event)\"\n  (click)=\"deselectNode()\"\n>\n  <svg\n    [attr.width]=\"svgWidth()\"\n    [attr.height]=\"svgHeight()\"\n    [attr.viewBox]=\"viewBox()\"\n    [style.transform]=\"transform()\"\n    class=\"dep-viewer__svg\"\n  >\n    <!-- Arrow markers for cross-reference edges -->\n    <defs>\n      <marker id=\"arrow-default\"  markerWidth=\"8\" markerHeight=\"6\" refX=\"8\" refY=\"3\" orient=\"auto\"><path d=\"M0,0 L8,3 L0,6 Z\" fill=\"var(--color-neutral-400)\"/></marker>\n      <marker id=\"arrow-blocks\"   markerWidth=\"8\" markerHeight=\"6\" refX=\"8\" refY=\"3\" orient=\"auto\"><path d=\"M0,0 L8,3 L0,6 Z\" fill=\"var(--color-error-default)\"/></marker>\n      <marker id=\"arrow-references\" markerWidth=\"8\" markerHeight=\"6\" refX=\"8\" refY=\"3\" orient=\"auto\"><path d=\"M0,0 L8,3 L0,6 Z\" fill=\"var(--color-info-default, #3b82f6)\"/></marker>\n      <marker id=\"arrow-requires\" markerWidth=\"8\" markerHeight=\"6\" refX=\"8\" refY=\"3\" orient=\"auto\"><path d=\"M0,0 L8,3 L0,6 Z\" fill=\"var(--color-warning-default)\"/></marker>\n      <marker id=\"arrow-extends\"  markerWidth=\"8\" markerHeight=\"6\" refX=\"8\" refY=\"3\" orient=\"auto\"><path d=\"M0,0 L8,3 L0,6 Z\" fill=\"var(--color-primary-400)\"/></marker>\n      <marker id=\"arrow-implements\" markerWidth=\"8\" markerHeight=\"6\" refX=\"8\" refY=\"3\" orient=\"auto\"><path d=\"M0,0 L8,3 L0,6 Z\" fill=\"var(--color-success-default)\"/></marker>\n      <marker id=\"arrow-uses\"     markerWidth=\"8\" markerHeight=\"6\" refX=\"8\" refY=\"3\" orient=\"auto\"><path d=\"M0,0 L8,3 L0,6 Z\" fill=\"var(--color-neutral-300)\"/></marker>\n      <marker id=\"arrow-depends\"  markerWidth=\"8\" markerHeight=\"6\" refX=\"8\" refY=\"3\" orient=\"auto\"><path d=\"M0,0 L8,3 L0,6 Z\" fill=\"var(--color-neutral-400)\"/></marker>\n    </defs>\n\n    <!-- Edges -->\n    @for (edge of layout().edges; track edge.id) {\n      <path\n        [attr.d]=\"edge.path\"\n        [attr.stroke]=\"edge.color\"\n        [attr.stroke-width]=\"edgeWidth()\"\n        [attr.stroke-dasharray]=\"edge.dashed ? '6 3' : 'none'\"\n        [attr.marker-end]=\"edge.isCrossRef ? 'url(#arrow-' + (edge.relation || 'default') + ')' : ''\"\n        fill=\"none\"\n        class=\"dep-viewer__edge\"\n        [class.dep-viewer__edge--cross-ref]=\"edge.isCrossRef\"\n      />\n      @if (showEdgeLabels() && edge.isCrossRef && edge.relation) {\n        <text\n          [attr.x]=\"edge.labelX\"\n          [attr.y]=\"edge.labelY\"\n          class=\"dep-viewer__edge-label\"\n          [attr.fill]=\"edge.color\"\n          text-anchor=\"middle\"\n        >{{ getRelationLabel(edge.relation) }}</text>\n      }\n    }\n\n    <!-- Nodes -->\n    @for (node of layout().nodes; track node.id) {\n      <g\n        class=\"dep-viewer__node\"\n        [class.dep-viewer__node--selected]=\"selectedNodeId() === node.id\"\n        (click)=\"selectNode(node.id, $event)\"\n      >\n        <rect\n          [attr.x]=\"node.x\"\n          [attr.y]=\"node.y\"\n          [attr.width]=\"node.width\"\n          [attr.height]=\"node.height\"\n          rx=\"6\" ry=\"6\"\n          [attr.fill]=\"getNodeBg(node.status)\"\n          [attr.stroke]=\"selectedNodeId() === node.id ? 'var(--color-primary-500)' : getNodeBorder(node.status)\"\n          stroke-width=\"1.5\"\n        />\n        <text\n          [attr.x]=\"node.x + node.width / 2\"\n          [attr.y]=\"node.y + node.height / 2 + 4\"\n          text-anchor=\"middle\"\n          [attr.fill]=\"getNodeText(node.status)\"\n          class=\"dep-viewer__node-label\"\n        >{{ node.label }}</text>\n\n        <!-- Collapse/expand toggle -->\n        @if (hasChildren(node.id)) {\n          <g\n            class=\"dep-viewer__toggle\"\n            (click)=\"toggleCollapse(node.id, $event)\"\n          >\n            @if (direction() === 'horizontal') {\n              <circle\n                [attr.cx]=\"node.x + node.width + 10\"\n                [attr.cy]=\"node.y + node.height / 2\"\n                r=\"8\"\n                fill=\"var(--color-neutral-100)\" stroke=\"var(--color-neutral-300)\" stroke-width=\"1\"\n              />\n              <text\n                [attr.x]=\"node.x + node.width + 10\"\n                [attr.y]=\"node.y + node.height / 2 + 4\"\n                text-anchor=\"middle\"\n                class=\"dep-viewer__toggle-text\"\n              >{{ isCollapsed(node.id) ? '+' : '\u2212' }}</text>\n            } @else {\n              <circle\n                [attr.cx]=\"node.x + node.width / 2\"\n                [attr.cy]=\"node.y + node.height + 10\"\n                r=\"8\"\n                fill=\"var(--color-neutral-100)\" stroke=\"var(--color-neutral-300)\" stroke-width=\"1\"\n              />\n              <text\n                [attr.x]=\"node.x + node.width / 2\"\n                [attr.y]=\"node.y + node.height + 14\"\n                text-anchor=\"middle\"\n                class=\"dep-viewer__toggle-text\"\n              >{{ isCollapsed(node.id) ? '+' : '\u2212' }}</text>\n            }\n          </g>\n        }\n      </g>\n    }\n  </svg>\n</div>\n\n<!-- Legend -->\n@if (legendItems().length) {\n  <div class=\"dep-viewer__legend\">\n    @for (item of legendItems(); track item.relation) {\n      <span class=\"dep-viewer__legend-item\">\n        <svg width=\"24\" height=\"10\">\n          <line\n            x1=\"0\" y1=\"5\" x2=\"24\" y2=\"5\"\n            [attr.stroke]=\"item.color\"\n            stroke-width=\"2\"\n            [attr.stroke-dasharray]=\"item.dashed ? '4 2' : 'none'\"\n          />\n        </svg>\n        <span class=\"dep-viewer__legend-text\">{{ item.label }}</span>\n      </span>\n    }\n  </div>\n}\n\n<!-- Detail panel -->\n@if (selectedNode(); as node) {\n  <div class=\"dep-viewer__detail\">\n    <div class=\"dep-viewer__detail-header\">\n      <span class=\"dep-viewer__detail-status dep-viewer__detail-status--{{ node.status }}\">\u25CF</span>\n      <strong>{{ node.label }}</strong>\n    </div>\n    @if (node.description) {\n      <p class=\"dep-viewer__detail-desc\">{{ node.description }}</p>\n    }\n    <div class=\"dep-viewer__detail-meta\">\n      <span>Depth: {{ node.depth }}</span>\n      <span>Children: {{ node.outgoingCount }}</span>\n      <span>Depends on: {{ node.incomingCount }}</span>\n    </div>\n    @if (selectedDependsOn().length) {\n      <div class=\"dep-viewer__detail-deps\">\n        <strong>Dependencies:</strong>\n        <ul>\n          @for (dep of selectedDependsOn(); track dep.id) {\n            <li>\n              <span class=\"dep-viewer__dep-relation\">{{ getRelationLabel(dep.relation || 'depends') }}</span>\n              \u2192 {{ dep.id }}\n            </li>\n          }\n        </ul>\n      </div>\n    }\n  </div>\n}\n", styles: [":host{display:block;position:relative;overflow:hidden;border:1px solid var(--color-neutral-200);border-radius:8px;background:var(--color-surface)}.dep-viewer__toolbar{display:flex;align-items:center;gap:4px;padding:8px 12px;border-bottom:1px solid var(--color-neutral-200);background:var(--color-neutral-50);-webkit-user-select:none;user-select:none}.dep-viewer__btn{width:28px;height:28px;display:flex;align-items:center;justify-content:center;border:1px solid var(--color-neutral-300);border-radius:4px;background:var(--color-surface);cursor:pointer;font-size:14px;line-height:1}.dep-viewer__btn:hover{background:var(--color-neutral-100)}.dep-viewer__btn--reset{margin-left:4px}.dep-viewer__zoom{font-size:12px;min-width:40px;text-align:center;color:var(--color-text-secondary)}.dep-viewer__direction-label{margin-left:8px;font-size:14px;color:var(--color-text-tertiary)}.dep-viewer__canvas{cursor:grab;overflow:hidden;width:100%;height:100%}.dep-viewer__canvas:active{cursor:grabbing}.dep-viewer__svg{transform-origin:0 0;transition:transform .1s ease-out}.dep-viewer__edge{pointer-events:none;transition:opacity .15s}.dep-viewer__edge--cross-ref{opacity:.8}.dep-viewer__edge-label{font-size:9px;font-weight:500;pointer-events:none;-webkit-user-select:none;user-select:none}.dep-viewer__node{cursor:pointer;transition:filter .15s}.dep-viewer__node:hover{filter:brightness(.96)}.dep-viewer__node--selected rect{stroke-width:2.5}.dep-viewer__node-label{font-size:12px;font-weight:500;pointer-events:none;-webkit-user-select:none;user-select:none}.dep-viewer__toggle{cursor:pointer}.dep-viewer__toggle:hover circle{fill:var(--color-neutral-200)}.dep-viewer__toggle-text{font-size:11px;font-weight:600;fill:var(--color-neutral-600);pointer-events:none;-webkit-user-select:none;user-select:none}.dep-viewer__legend{display:flex;flex-wrap:wrap;gap:12px;padding:6px 12px;border-top:1px solid var(--color-neutral-200);background:var(--color-neutral-50)}.dep-viewer__legend-item{display:flex;align-items:center;gap:4px}.dep-viewer__legend-text{font-size:11px;color:var(--color-text-secondary)}.dep-viewer__detail{position:absolute;bottom:12px;right:12px;width:240px;padding:12px;background:var(--color-surface);border:1px solid var(--color-neutral-200);border-radius:8px;box-shadow:var(--elevation-1);font-size:12px;z-index:10}.dep-viewer__detail-header{display:flex;align-items:center;gap:6px;margin-bottom:4px;font-size:13px}.dep-viewer__detail-status{font-size:10px}.dep-viewer__detail-status--default{color:var(--color-text-tertiary)}.dep-viewer__detail-status--active{color:var(--color-primary-400)}.dep-viewer__detail-status--success{color:var(--color-success-default)}.dep-viewer__detail-status--warning{color:var(--color-warning-default)}.dep-viewer__detail-status--error{color:var(--color-error-default)}.dep-viewer__detail-status--muted{color:var(--color-neutral-300)}.dep-viewer__detail-desc{color:var(--color-text-secondary);margin:0 0 6px;line-height:1.4}.dep-viewer__detail-meta{display:flex;flex-wrap:wrap;gap:8px;color:var(--color-text-tertiary);font-size:11px}.dep-viewer__detail-deps{margin-top:8px;padding-top:8px;border-top:1px solid var(--color-neutral-100)}.dep-viewer__detail-deps ul{list-style:none;margin:4px 0 0;padding:0}.dep-viewer__detail-deps li{padding:2px 0;color:var(--color-text-secondary)}.dep-viewer__dep-relation{display:inline-block;padding:1px 4px;background:var(--color-neutral-100);border-radius:3px;font-size:10px;font-weight:500;color:var(--color-text-secondary)}\n"] }]
-        }], propDecorators: { root: [{ type: i0.Input, args: [{ isSignal: true, alias: "root", required: true }] }], direction: [{ type: i0.Input, args: [{ isSignal: true, alias: "direction", required: false }] }], height: [{ type: i0.Input, args: [{ isSignal: true, alias: "height", required: false }] }], showToolbar: [{ type: i0.Input, args: [{ isSignal: true, alias: "showToolbar", required: false }] }], showEdgeLabels: [{ type: i0.Input, args: [{ isSignal: true, alias: "showEdgeLabels", required: false }] }], edgeWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "edgeWidth", required: false }] }], onMouseMove: [{
+            args: [{ selector: 'lc-dependency-viewer', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, host: { '[class]': '"dep-viewer"', '[style.height]': 'height()' }, template: "<!-- Toolbar -->\n@if (showToolbar()) {\n  <div class=\"dep-viewer__toolbar\">\n    <button class=\"dep-viewer__btn\" (click)=\"zoomIn()\" title=\"Zoom in\">+</button>\n    <span class=\"dep-viewer__zoom\">{{ zoom() }}%</span>\n    <button class=\"dep-viewer__btn\" (click)=\"zoomOut()\" title=\"Zoom out\">\u2212</button>\n    <button class=\"dep-viewer__btn dep-viewer__btn--reset\" (click)=\"resetZoom()\" title=\"Reset\">\u27F2</button>\n    <span class=\"dep-viewer__direction-label\">{{ direction() === 'horizontal' ? '\u2192' : '\u2193' }}</span>\n  </div>\n}\n\n<!-- Canvas -->\n<div\n  class=\"dep-viewer__canvas\"\n  (mousedown)=\"onMouseDown($event)\"\n  (wheel)=\"onWheel($event)\"\n  (click)=\"deselectNode()\"\n>\n  <svg\n    [attr.width]=\"svgWidth()\"\n    [attr.height]=\"svgHeight()\"\n    [attr.viewBox]=\"viewBox()\"\n    [style.transform]=\"transform()\"\n    class=\"dep-viewer__svg\"\n  >\n    <!-- Arrow markers for cross-reference edges -->\n    <defs>\n      <marker id=\"arrow-default\"  markerWidth=\"8\" markerHeight=\"6\" refX=\"8\" refY=\"3\" orient=\"auto\"><path d=\"M0,0 L8,3 L0,6 Z\" fill=\"var(--color-neutral-400)\"/></marker>\n      <marker id=\"arrow-blocks\"   markerWidth=\"8\" markerHeight=\"6\" refX=\"8\" refY=\"3\" orient=\"auto\"><path d=\"M0,0 L8,3 L0,6 Z\" fill=\"var(--color-error-default)\"/></marker>\n      <marker id=\"arrow-references\" markerWidth=\"8\" markerHeight=\"6\" refX=\"8\" refY=\"3\" orient=\"auto\"><path d=\"M0,0 L8,3 L0,6 Z\" fill=\"var(--color-info-default, #3b82f6)\"/></marker>\n      <marker id=\"arrow-requires\" markerWidth=\"8\" markerHeight=\"6\" refX=\"8\" refY=\"3\" orient=\"auto\"><path d=\"M0,0 L8,3 L0,6 Z\" fill=\"var(--color-warning-default)\"/></marker>\n      <marker id=\"arrow-extends\"  markerWidth=\"8\" markerHeight=\"6\" refX=\"8\" refY=\"3\" orient=\"auto\"><path d=\"M0,0 L8,3 L0,6 Z\" fill=\"var(--color-primary-400)\"/></marker>\n      <marker id=\"arrow-implements\" markerWidth=\"8\" markerHeight=\"6\" refX=\"8\" refY=\"3\" orient=\"auto\"><path d=\"M0,0 L8,3 L0,6 Z\" fill=\"var(--color-success-default)\"/></marker>\n      <marker id=\"arrow-uses\"     markerWidth=\"8\" markerHeight=\"6\" refX=\"8\" refY=\"3\" orient=\"auto\"><path d=\"M0,0 L8,3 L0,6 Z\" fill=\"var(--color-neutral-300)\"/></marker>\n      <marker id=\"arrow-depends\"  markerWidth=\"8\" markerHeight=\"6\" refX=\"8\" refY=\"3\" orient=\"auto\"><path d=\"M0,0 L8,3 L0,6 Z\" fill=\"var(--color-neutral-400)\"/></marker>\n    </defs>\n\n    <!-- Edges -->\n    @for (edge of layout().edges; track edge.id) {\n      <path\n        [attr.d]=\"edge.path\"\n        [attr.stroke]=\"edge.color\"\n        [attr.stroke-width]=\"edgeWidth()\"\n        [attr.stroke-dasharray]=\"edge.dashed ? '6 3' : 'none'\"\n        [attr.marker-end]=\"edge.isCrossRef ? 'url(#arrow-' + edge.marker + ')' : ''\"\n        fill=\"none\"\n        class=\"dep-viewer__edge\"\n        [class.dep-viewer__edge--cross-ref]=\"edge.isCrossRef\"\n      />\n      @if (showEdgeLabels() && edge.isCrossRef && edge.label) {\n        <text\n          [attr.x]=\"edge.labelX\"\n          [attr.y]=\"edge.labelY\"\n          class=\"dep-viewer__edge-label\"\n          [attr.fill]=\"edge.color\"\n          text-anchor=\"middle\"\n        >{{ edge.label }}</text>\n      }\n    }\n\n    <!-- Nodes -->\n    @for (node of layout().nodes; track node.id) {\n      <g\n        class=\"dep-viewer__node\"\n        [class.dep-viewer__node--selected]=\"selectedNodeId() === node.id\"\n        (click)=\"selectNode(node.id, $event)\"\n        (dblclick)=\"expandNode(node.id, $event)\"\n      >\n        <!-- Opaque backdrop. The status fills are translucent tints (in the dark\n             theme --color-success-50 & co. resolve to rgba(\u2026, 0.18)), so without\n             something solid beneath them the edges routed under a node show\n             straight through it. This keeps the tint compositing against the\n             viewer's own surface instead of against whatever passes behind. -->\n        <rect\n          [attr.x]=\"node.x\"\n          [attr.y]=\"node.y\"\n          [attr.width]=\"node.width\"\n          [attr.height]=\"node.height\"\n          rx=\"6\" ry=\"6\"\n          class=\"dep-viewer__node-backdrop\"\n        />\n        <rect\n          class=\"dep-viewer__node-fill\"\n          [attr.x]=\"node.x\"\n          [attr.y]=\"node.y\"\n          [attr.width]=\"node.width\"\n          [attr.height]=\"node.height\"\n          rx=\"6\" ry=\"6\"\n          [attr.fill]=\"getNodeBg(node)\"\n          [attr.stroke]=\"selectedNodeId() === node.id ? 'var(--color-primary-500)' : getNodeBorder(node)\"\n          stroke-width=\"1.5\"\n        />\n        <text\n          [attr.x]=\"node.x + node.width / 2\"\n          [attr.y]=\"node.y + node.height / 2 + 4\"\n          text-anchor=\"middle\"\n          [attr.fill]=\"getNodeText(node)\"\n          class=\"dep-viewer__node-label\"\n        >{{ node.label }}</text>\n\n        <!-- \"+N\" marker: this node has more neighbours than are shown -->\n        @if (node.moreCount) {\n          <g class=\"dep-viewer__more\">\n            <rect\n              [attr.x]=\"node.x + node.width - 26\"\n              [attr.y]=\"node.y - 8\"\n              width=\"32\" height=\"16\" rx=\"8\" ry=\"8\"\n            />\n            <text\n              [attr.x]=\"node.x + node.width - 10\"\n              [attr.y]=\"node.y + 3\"\n              text-anchor=\"middle\"\n            >+{{ node.moreCount }}</text>\n          </g>\n        }\n\n        <!-- Collapse/expand toggle -->\n        @if (hasChildren(node.id)) {\n          <g\n            class=\"dep-viewer__toggle\"\n            (click)=\"toggleCollapse(node.id, $event)\"\n          >\n            @if (direction() === 'horizontal') {\n              <circle\n                [attr.cx]=\"node.x + node.width + 10\"\n                [attr.cy]=\"node.y + node.height / 2\"\n                r=\"8\"\n                fill=\"var(--color-neutral-100)\" stroke=\"var(--color-neutral-300)\" stroke-width=\"1\"\n              />\n              <text\n                [attr.x]=\"node.x + node.width + 10\"\n                [attr.y]=\"node.y + node.height / 2 + 4\"\n                text-anchor=\"middle\"\n                class=\"dep-viewer__toggle-text\"\n              >{{ isCollapsed(node.id) ? '+' : '\u2212' }}</text>\n            } @else {\n              <circle\n                [attr.cx]=\"node.x + node.width / 2\"\n                [attr.cy]=\"node.y + node.height + 10\"\n                r=\"8\"\n                fill=\"var(--color-neutral-100)\" stroke=\"var(--color-neutral-300)\" stroke-width=\"1\"\n              />\n              <text\n                [attr.x]=\"node.x + node.width / 2\"\n                [attr.y]=\"node.y + node.height + 14\"\n                text-anchor=\"middle\"\n                class=\"dep-viewer__toggle-text\"\n              >{{ isCollapsed(node.id) ? '+' : '\u2212' }}</text>\n            }\n          </g>\n        }\n      </g>\n    }\n  </svg>\n</div>\n\n<!-- Legend -->\n@if (legendItems().length || typeLegendItems().length) {\n  <div class=\"dep-viewer__legend\">\n    @for (item of legendItems(); track item.label) {\n      <span class=\"dep-viewer__legend-item\">\n        <svg width=\"24\" height=\"10\">\n          <line\n            x1=\"0\" y1=\"5\" x2=\"24\" y2=\"5\"\n            [attr.stroke]=\"item.color\"\n            stroke-width=\"2\"\n            [attr.stroke-dasharray]=\"item.dashed ? '4 2' : 'none'\"\n          />\n        </svg>\n        <span class=\"dep-viewer__legend-text\">{{ item.label }}</span>\n      </span>\n    }\n    @for (item of typeLegendItems(); track item.type) {\n      <span class=\"dep-viewer__legend-item\">\n        <svg width=\"10\" height=\"10\">\n          <rect width=\"10\" height=\"10\" rx=\"2\" ry=\"2\" [attr.fill]=\"item.color\" />\n        </svg>\n        <span class=\"dep-viewer__legend-text\">{{ item.type }}</span>\n      </span>\n    }\n  </div>\n}\n\n<!-- Detail panel -->\n@if (selectedNode(); as node) {\n  <div class=\"dep-viewer__detail\">\n    <div class=\"dep-viewer__detail-header\">\n      <span class=\"dep-viewer__detail-status dep-viewer__detail-status--{{ node.status }}\">\u25CF</span>\n      <strong>{{ node.label }}</strong>\n      @if (node.type) {\n        <span class=\"dep-viewer__detail-type\">{{ node.type }}</span>\n      }\n    </div>\n    @if (node.description) {\n      <p class=\"dep-viewer__detail-desc\">{{ node.description }}</p>\n    }\n    <div class=\"dep-viewer__detail-meta\">\n      <span>Depth: {{ node.depth }}</span>\n      <span>Children: {{ node.outgoingCount }}</span>\n      <span>Depends on: {{ node.incomingCount }}</span>\n    </div>\n    @if (selectedDependsOn().length) {\n      <div class=\"dep-viewer__detail-deps\">\n        <strong>Dependencies:</strong>\n        <ul>\n          @for (dep of selectedDependsOn(); track dep.id) {\n            <li>\n              <span class=\"dep-viewer__dep-relation\">{{\n                dep.relationLabel || getRelationLabel(dep.relation || 'depends')\n              }}</span>\n              \u2192 {{ dep.id }}\n            </li>\n          }\n        </ul>\n      </div>\n    }\n  </div>\n}\n", styles: [":host{display:block;position:relative;overflow:hidden;border:1px solid var(--color-border);border-radius:8px;background:var(--color-surface)}.dep-viewer__toolbar{display:flex;align-items:center;gap:4px;padding:8px 12px;border-bottom:1px solid var(--color-border);background:var(--color-surface-2);-webkit-user-select:none;user-select:none}.dep-viewer__btn{width:28px;height:28px;display:flex;align-items:center;justify-content:center;border:1px solid var(--color-border);border-radius:4px;background:var(--color-surface);color:var(--color-text-secondary);cursor:pointer;font-size:14px;line-height:1}.dep-viewer__btn:hover{background:var(--color-surface-hover)}.dep-viewer__btn--reset{margin-left:4px}.dep-viewer__zoom{font-size:12px;min-width:40px;text-align:center;color:var(--color-text-secondary)}.dep-viewer__direction-label{margin-left:8px;font-size:14px;color:var(--color-text-tertiary)}.dep-viewer__canvas{cursor:grab;overflow:hidden;width:100%;height:100%}.dep-viewer__canvas:active{cursor:grabbing}.dep-viewer__svg{transform-origin:0 0;transition:transform .1s ease-out}.dep-viewer__edge{pointer-events:none;transition:opacity .15s}.dep-viewer__edge--cross-ref{opacity:.8}.dep-viewer__edge-label{font-size:9px;font-weight:500;pointer-events:none;-webkit-user-select:none;user-select:none}.dep-viewer__node{cursor:pointer;transition:filter .15s}.dep-viewer__node:hover{filter:brightness(.96)}.dep-viewer__node--selected rect{stroke-width:2.5}.dep-viewer__node-backdrop{fill:var(--color-surface)}.dep-viewer__node-label{font-size:12px;font-weight:500;pointer-events:none;-webkit-user-select:none;user-select:none}.dep-viewer__toggle{cursor:pointer}.dep-viewer__toggle:hover circle{fill:var(--color-surface-hover)}.dep-viewer__more{pointer-events:none}.dep-viewer__more rect{fill:var(--color-surface-2);stroke:var(--color-border-strong);stroke-width:1}.dep-viewer__more text{font-size:9px;font-weight:600;fill:var(--color-text-secondary);-webkit-user-select:none;user-select:none}.dep-viewer__toggle-text{font-size:11px;font-weight:600;fill:var(--color-text-secondary);pointer-events:none;-webkit-user-select:none;user-select:none}.dep-viewer__legend{display:flex;flex-wrap:wrap;gap:12px;padding:6px 12px;border-top:1px solid var(--color-border);background:var(--color-surface-2)}.dep-viewer__legend-item{display:flex;align-items:center;gap:4px}.dep-viewer__legend-text{font-size:11px;color:var(--color-text-secondary)}.dep-viewer__detail{position:absolute;bottom:12px;right:12px;width:240px;padding:12px;background:var(--color-surface-2);border:1px solid var(--color-border);border-radius:8px;box-shadow:var(--elevation-1);font-size:12px;z-index:10}.dep-viewer__detail-header{display:flex;align-items:center;gap:6px;margin-bottom:4px;font-size:13px}.dep-viewer__detail-type{margin-left:auto;padding:1px 6px;border-radius:3px;background:var(--color-surface-hover);color:var(--color-text-secondary);font-size:10px;font-weight:500}.dep-viewer__detail-status{font-size:10px}.dep-viewer__detail-status--default{color:var(--color-text-tertiary)}.dep-viewer__detail-status--active{color:var(--color-primary-400)}.dep-viewer__detail-status--success{color:var(--color-success-default)}.dep-viewer__detail-status--warning{color:var(--color-warning-default)}.dep-viewer__detail-status--error{color:var(--color-error-default)}.dep-viewer__detail-status--muted{color:var(--color-text-disabled)}.dep-viewer__detail-desc{color:var(--color-text-secondary);margin:0 0 6px;line-height:1.4}.dep-viewer__detail-meta{display:flex;flex-wrap:wrap;gap:8px;color:var(--color-text-tertiary);font-size:11px}.dep-viewer__detail-deps{margin-top:8px;padding-top:8px;border-top:1px solid var(--color-border)}.dep-viewer__detail-deps ul{list-style:none;margin:4px 0 0;padding:0}.dep-viewer__detail-deps li{padding:2px 0;color:var(--color-text-secondary)}.dep-viewer__dep-relation{display:inline-block;padding:1px 4px;background:var(--color-surface-hover);border-radius:3px;font-size:10px;font-weight:500;color:var(--color-text-secondary)}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { root: [{ type: i0.Input, args: [{ isSignal: true, alias: "root", required: true }] }], direction: [{ type: i0.Input, args: [{ isSignal: true, alias: "direction", required: false }] }], height: [{ type: i0.Input, args: [{ isSignal: true, alias: "height", required: false }] }], showToolbar: [{ type: i0.Input, args: [{ isSignal: true, alias: "showToolbar", required: false }] }], showEdgeLabels: [{ type: i0.Input, args: [{ isSignal: true, alias: "showEdgeLabels", required: false }] }], edgeWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "edgeWidth", required: false }] }], anchorNodeId: [{ type: i0.Input, args: [{ isSignal: true, alias: "anchorNodeId", required: false }] }], typeColors: [{ type: i0.Input, args: [{ isSignal: true, alias: "typeColors", required: false }] }], hiddenRelations: [{ type: i0.Input, args: [{ isSignal: true, alias: "hiddenRelations", required: false }] }], hiddenTypes: [{ type: i0.Input, args: [{ isSignal: true, alias: "hiddenTypes", required: false }] }], nodeSelect: [{ type: i0.Output, args: ["nodeSelect"] }], nodeExpand: [{ type: i0.Output, args: ["nodeExpand"] }], onMouseMove: [{
                 type: HostListener,
                 args: ['document:mousemove', ['$event']]
             }], onMouseUp: [{
@@ -15972,5 +16419,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { AccordionComponent, AccordionContentDirective, AccordionGroupComponent, AccordionHeaderDirective, AlertComponent, AnimationDurationFast, AnimationEasingEaseIn, AnimationEasingEaseInOut, AnimationEasingEaseOut, AreaChartComponent, AvatarComponent, AvatarGroupComponent, BadgeComponent, BarChartComponent, BorderRadius2xl, BorderRadiusFull, BorderRadiusLg, BorderRadiusMd, BorderRadiusNone, BorderRadiusSm, BorderRadiusXl, BreadcrumbsComponent, ButtonComponent, CalendarComponent, CalloutComponent, CardComponent, ChatComponent, CheckboxComponent, ChipComponent, CodeBlockComponent, ColorAccentOrange, ColorAccentPurple, ColorAccentRed, ColorAccentRust, ColorAccentViolet, ColorBackgroundDark, ColorErrorDark, ColorErrorDefault, ColorErrorLight, ColorInfoDark, ColorInfoDefault, ColorInfoLight, ColorNeutral100, ColorNeutral200, ColorNeutral300, ColorNeutral400, ColorNeutral50, ColorNeutral500, ColorNeutral600, ColorNeutral700, ColorNeutral800, ColorNeutral900, ColorPickerComponent, ColorPrimary100, ColorPrimary200, ColorPrimary300, ColorPrimary400, ColorPrimary50, ColorPrimary500, ColorPrimary600, ColorPrimary700, ColorPrimary800, ColorPrimary900, ColorSecondary100, ColorSecondary200, ColorSecondary300, ColorSecondary400, ColorSecondary50, ColorSecondary500, ColorSecondary600, ColorSecondary700, ColorSecondary800, ColorSecondary900, ColorSidebarDark, ColorSuccessDark, ColorSuccessDefault, ColorSuccessLight, ColorSurfaceDarkBase, ColorSurfaceDarkRaised, ColorSurfaceDarkSunken, ColorTextDarkPrimary, ColorTextDarkSecondary, ColorTextDarkTertiary, ColorWarningDark, ColorWarningDefault, ColorWarningLight, ComboboxComponent, ConfirmDialogComponent, ConfirmService, ContainerComponent, DateRangePickerComponent, DatepickerComponent, DependencyViewerComponent, DescriptionListComponent, DiffViewerComponent, DividerComponent, DocumentViewerComponent, DonutChartComponent, DrawerComponent, Elevation1, Elevation2, Elevation3, Elevation4, EmailInputComponent, EmptyStateComponent, ErrorDisplayComponent, FILE_FALLBACK_ICON, FOLDER_ICON, FOLDER_OPEN_ICON, FieldGroupComponent, FileUploadComponent, FilterBarComponent, FooterComponent, FunnelChartComponent, GalleryComponent, GanttChartComponent, GaugeComponent, HeaderComponent, HeatmapComponent, HeroComponent, ICON_ALIASES, ICON_NAMES, IconComponent, InputComponent, KanbanBoardComponent, LC_LOGO_BASE_PATH, LineChartComponent, ListComponent, ListItemTemplateDirective, LogViewerComponent, LogoComponent, MarkdownComponent, MenuComponent, ModalComponent, NotificationCenterComponent, NumberInputComponent, PageHeaderComponent, PageLayoutComponent, PaginationComponent, PasswordInputComponent, PieChartComponent, PipelineComponent, PopoverComponent, ProgressBarComponent, ProgressRingComponent, RadarChartComponent, RadioComponent, RatingComponent, RichTextEditorComponent, ScatterPlotComponent, SearchInputComponent, SectionComponent, SelectComponent, SidenavComponent, SizeInteractiveLgFontSize, SizeInteractiveLgHeight, SizeInteractiveLgPadding, SizeInteractiveMdFontSize, SizeInteractiveMdHeight, SizeInteractiveMdPadding, SizeInteractiveSmFontSize, SizeInteractiveSmHeight, SizeInteractiveSmPadding, SizeInteractiveXsFontSize, SizeInteractiveXsHeight, SizeInteractiveXsPadding, SizeMinTouchHeight, SizeMinTouchWidth, SkeletonComponent, SliderComponent, SpacerComponent, Spacing0, Spacing05, Spacing1, Spacing10, Spacing11, Spacing12, Spacing14, Spacing15, Spacing16, Spacing2, Spacing25, Spacing3, Spacing35, Spacing4, Spacing5, Spacing6, Spacing7, Spacing8, Spacing9, SparklineComponent, SpinnerComponent, StackComponent, StackedBarChartComponent, StageListComponent, StatTrendComponent, StepperComponent, SwitchComponent, TabComponent, TableCellDirective, TableComponent, TabsComponent, TagInputComponent, TextareaComponent, ThemeService, TimelineComponent, ToastComponent, ToastService, ToggleGroupComponent, ToolbarComponent, TooltipContentComponent, TooltipDirective, TreeViewComponent, TypographyComponent, TypographyFontFamilyBase, TypographyFontFamilyMono, TypographyFontSize2xl, TypographyFontSize3xl, TypographyFontSize4xl, TypographyFontSize5xl, TypographyFontSize6xl, TypographyFontSizeBase, TypographyFontSizeLg, TypographyFontSizeSm, TypographyFontSizeXl, TypographyFontSizeXs, TypographyFontWeightBold, TypographyFontWeightMedium, TypographyFontWeightNormal, TypographyFontWeightSemibold, TypographyLineHeightNormal, TypographyLineHeightRelaxed, TypographyLineHeightTight, VerificationCodeInputComponent, WaterfallChartComponent, isValidIconName, resolveFileIcon };
+export { AccordionComponent, AccordionContentDirective, AccordionGroupComponent, AccordionHeaderDirective, AlertComponent, AnimationDurationFast, AnimationEasingEaseIn, AnimationEasingEaseInOut, AnimationEasingEaseOut, AreaChartComponent, AvatarComponent, AvatarGroupComponent, BadgeComponent, BarChartComponent, BorderRadius2xl, BorderRadiusFull, BorderRadiusLg, BorderRadiusMd, BorderRadiusNone, BorderRadiusSm, BorderRadiusXl, BreadcrumbsComponent, ButtonComponent, CalendarComponent, CalloutComponent, CardComponent, ChatComponent, CheckboxComponent, ChipComponent, CodeBlockComponent, ColorAccentOrange, ColorAccentPurple, ColorAccentRed, ColorAccentRust, ColorAccentViolet, ColorBackgroundDark, ColorErrorDark, ColorErrorDefault, ColorErrorLight, ColorInfoDark, ColorInfoDefault, ColorInfoLight, ColorNeutral100, ColorNeutral200, ColorNeutral300, ColorNeutral400, ColorNeutral50, ColorNeutral500, ColorNeutral600, ColorNeutral700, ColorNeutral800, ColorNeutral900, ColorPickerComponent, ColorPrimary100, ColorPrimary200, ColorPrimary300, ColorPrimary400, ColorPrimary50, ColorPrimary500, ColorPrimary600, ColorPrimary700, ColorPrimary800, ColorPrimary900, ColorSecondary100, ColorSecondary200, ColorSecondary300, ColorSecondary400, ColorSecondary50, ColorSecondary500, ColorSecondary600, ColorSecondary700, ColorSecondary800, ColorSecondary900, ColorSidebarDark, ColorSuccessDark, ColorSuccessDefault, ColorSuccessLight, ColorSurfaceDarkBase, ColorSurfaceDarkRaised, ColorSurfaceDarkSunken, ColorTextDarkPrimary, ColorTextDarkSecondary, ColorTextDarkTertiary, ColorWarningDark, ColorWarningDefault, ColorWarningLight, ComboboxComponent, ConfirmDialogComponent, ConfirmService, ContainerComponent, DateRangePickerComponent, DatepickerComponent, DependencyViewerComponent, DescriptionListComponent, DiffViewerComponent, DividerComponent, DocumentViewerComponent, DonutChartComponent, DrawerComponent, Elevation1, Elevation2, Elevation3, Elevation4, EmailInputComponent, EmptyStateComponent, ErrorDisplayComponent, FILE_FALLBACK_ICON, FOLDER_ICON, FOLDER_OPEN_ICON, FieldGroupComponent, FileUploadComponent, FilterBarComponent, FooterComponent, FunnelChartComponent, GalleryComponent, GanttChartComponent, GaugeComponent, HeaderComponent, HeatmapComponent, HeroComponent, ICON_ALIASES, ICON_NAMES, IconComponent, InputComponent, KanbanBoardComponent, LC_LOGO_BASE_PATH, LineChartComponent, ListComponent, ListItemTemplateDirective, LogViewerComponent, LogoComponent, MarkdownComponent, MenuComponent, ModalComponent, NotificationCenterComponent, NumberInputComponent, PageHeaderComponent, PageLayoutComponent, PaginationComponent, PasswordInputComponent, PieChartComponent, PipelineComponent, PopoverComponent, ProgressBarComponent, ProgressRingComponent, RadarChartComponent, RadioComponent, RatingComponent, RichTextEditorComponent, ScatterPlotComponent, SearchInputComponent, SectionComponent, SelectComponent, SidenavComponent, SizeContentMaxWidth, SizeInteractiveLgFontSize, SizeInteractiveLgHeight, SizeInteractiveLgPadding, SizeInteractiveMdFontSize, SizeInteractiveMdHeight, SizeInteractiveMdPadding, SizeInteractiveSmFontSize, SizeInteractiveSmHeight, SizeInteractiveSmPadding, SizeInteractiveXsFontSize, SizeInteractiveXsHeight, SizeInteractiveXsPadding, SizeMinTouchHeight, SizeMinTouchWidth, SkeletonComponent, SliderComponent, SpacerComponent, Spacing0, Spacing05, Spacing1, Spacing10, Spacing11, Spacing12, Spacing14, Spacing15, Spacing16, Spacing2, Spacing25, Spacing3, Spacing35, Spacing4, Spacing5, Spacing6, Spacing7, Spacing8, Spacing9, SparklineComponent, SpinnerComponent, StackComponent, StackedBarChartComponent, StageListComponent, StatTrendComponent, StepperComponent, SwitchComponent, TabComponent, TableCellDirective, TableComponent, TabsComponent, TagInputComponent, TextareaComponent, ThemeService, TimelineComponent, ToastComponent, ToastService, ToggleGroupComponent, ToolbarComponent, TooltipContentComponent, TooltipDirective, TreeViewComponent, TypographyComponent, TypographyFontFamilyBase, TypographyFontFamilyMono, TypographyFontSize2xl, TypographyFontSize3xl, TypographyFontSize4xl, TypographyFontSize5xl, TypographyFontSize6xl, TypographyFontSizeBase, TypographyFontSizeLg, TypographyFontSizeSm, TypographyFontSizeXl, TypographyFontSizeXs, TypographyFontWeightBold, TypographyFontWeightMedium, TypographyFontWeightNormal, TypographyFontWeightSemibold, TypographyLineHeightNormal, TypographyLineHeightRelaxed, TypographyLineHeightTight, VerificationCodeInputComponent, WaterfallChartComponent, isValidIconName, resolveFileIcon };
 //# sourceMappingURL=life-cockpit-angular-ui-kit.mjs.map