@pegasusheavy/ngx-tailwindcss 0.3.6 → 0.4.0

package/fesm2022/pegasusheavy-ngx-tailwindcss.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { InjectionToken, makeEnvironmentProviders, inject, PLATFORM_ID, DestroyRef, signal, Injectable, APP_INITIALIZER, computed, LOCALE_ID, effect, ElementRef, Renderer2, booleanAttribute, HostListener, Input, Directive, numberAttribute, NgZone, EventEmitter, Output, ChangeDetectionStrategy, Component, HostBinding, forwardRef, ViewChild, input, output, ContentChildren, ContentChild, viewChild, model, contentChildren } from '@angular/core';
+import { InjectionToken, makeEnvironmentProviders, inject, PLATFORM_ID, DestroyRef, signal, Injectable, APP_INITIALIZER, computed, LOCALE_ID, effect, ElementRef, Renderer2, booleanAttribute, HostListener, Input, Directive, numberAttribute, NgZone, EventEmitter, Output, ChangeDetectionStrategy, Component, HostBinding, forwardRef, ViewChild, input, output, ContentChildren, ContentChild, viewChild, contentChildren } from '@angular/core';
 import * as i1 from '@angular/common';
 import { DOCUMENT, isPlatformBrowser, CommonModule, NgStyle } from '@angular/common';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
@@ -3848,8 +3848,8 @@ const BUTTON_VARIANTS = {
     warning: 'bg-amber-500 hover:bg-amber-600 active:bg-amber-700 text-white shadow-sm hover:shadow focus-visible:ring-amber-500',
     danger: 'bg-rose-600 hover:bg-rose-700 active:bg-rose-800 text-white shadow-sm hover:shadow focus-visible:ring-rose-500',
     info: 'bg-cyan-600 hover:bg-cyan-700 active:bg-cyan-800 text-white shadow-sm hover:shadow focus-visible:ring-cyan-500',
-    ghost: 'bg-transparent hover:bg-slate-100 dark:hover:bg-zinc-800 active:bg-slate-200 dark:active:bg-zinc-700 text-slate-700 dark:text-zinc-300 focus-visible:ring-slate-500',
-    outline: 'bg-white dark:bg-zinc-800 border-2 border-slate-500 dark:border-zinc-500 hover:border-slate-600 dark:hover:border-zinc-400 hover:bg-slate-100 dark:hover:bg-zinc-700 active:bg-slate-200 dark:active:bg-zinc-600 text-slate-800 dark:text-zinc-200 shadow-sm focus-visible:ring-slate-500',
+    ghost: 'bg-transparent hover:bg-slate-100 active:bg-slate-200 text-slate-700 focus-visible:ring-slate-500',
+    outline: 'bg-white border-2 border-slate-500 hover:border-slate-600 hover:bg-slate-100 active:bg-slate-200 text-slate-800 shadow-sm focus-visible:ring-slate-500',
     link: 'bg-transparent text-blue-600 hover:text-blue-700 hover:underline active:text-blue-800 focus-visible:ring-blue-500 p-0 shadow-none',
 };
 const BUTTON_SIZES = {
@@ -4307,7 +4307,7 @@ class TwInputComponent {
                 useExisting: forwardRef(() => TwInputComponent),
                 multi: true,
             },
-        ], viewQueries: [{ propertyName: "inputElement", first: true, predicate: ["inputElement"], descendants: true }], ngImport: i0, template: "@if (label) {\n  <label [for]=\"inputId\" class=\"block text-sm font-medium text-slate-700 mb-1.5\">\n    {{ label }}\n    @if (required) {\n      <span class=\"text-rose-500 ml-0.5\">*</span>\n    }\n  </label>\n}\n\n<div [class]=\"wrapperClasses()\">\n  <!-- Prefix -->\n  <ng-content select=\"[twInputPrefix]\"></ng-content>\n\n  <!-- Input element -->\n  <input\n    #inputElement\n    [id]=\"inputId\"\n    [type]=\"type\"\n    [class]=\"computedClasses()\"\n    [placeholder]=\"placeholder\"\n    [disabled]=\"disabled\"\n    [readonly]=\"readonly\"\n    [required]=\"required\"\n    [attr.aria-invalid]=\"hasError\"\n    [attr.aria-describedby]=\"describedBy\"\n    [attr.autocomplete]=\"autocomplete\"\n    [attr.inputmode]=\"inputmode\"\n    [attr.pattern]=\"pattern\"\n    [attr.min]=\"min\"\n    [attr.max]=\"max\"\n    [attr.minlength]=\"minlength\"\n    [attr.maxlength]=\"maxlength\"\n    [attr.step]=\"step\"\n    [value]=\"value\"\n    (input)=\"onInput($event)\"\n    (blur)=\"onBlur()\"\n    (focus)=\"onFocus.emit($event)\"\n  />\n\n  <!-- Suffix -->\n  <ng-content select=\"[twInputSuffix]\"></ng-content>\n\n  <!-- Clear button -->\n  @if (clearable && value && !disabled && !readonly) {\n    <button\n      type=\"button\"\n      class=\"flex items-center justify-center w-5 h-5 text-slate-400 hover:text-slate-600 transition-colors\"\n      (click)=\"clear()\"\n      aria-label=\"Clear input\"\n    >\n      <svg class=\"w-4 h-4\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\">\n        <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M6 18L18 6M6 6l12 12\" />\n      </svg>\n    </button>\n  }\n</div>\n\n@if (hint && !error) {\n  <span class=\"block text-xs text-slate-500 mt-1.5\">{{ hint }}</span>\n}\n\n@if (error) {\n  <span class=\"block text-xs text-rose-600 mt-1.5\" role=\"alert\">{{ error }}</span>\n}\n\n<ng-content select=\"tw-hint, [twHint], tw-error, [twError]\"></ng-content>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+        ], viewQueries: [{ propertyName: "inputElement", first: true, predicate: ["inputElement"], descendants: true }], ngImport: i0, template: "@if (label) {\n  <label [for]=\"inputId\" class=\"block text-sm font-medium text-slate-700 dark:text-slate-300 mb-1.5\">\n    {{ label }}\n    @if (required) {\n      <span class=\"text-rose-500 ml-0.5\">*</span>\n    }\n  </label>\n}\n\n<div [class]=\"wrapperClasses()\">\n  <!-- Prefix -->\n  <ng-content select=\"[twInputPrefix]\"></ng-content>\n\n  <!-- Input element -->\n  <input\n    #inputElement\n    [id]=\"inputId\"\n    [type]=\"type\"\n    [class]=\"computedClasses()\"\n    [placeholder]=\"placeholder\"\n    [disabled]=\"disabled\"\n    [readonly]=\"readonly\"\n    [required]=\"required\"\n    [attr.aria-invalid]=\"hasError\"\n    [attr.aria-describedby]=\"describedBy\"\n    [attr.autocomplete]=\"autocomplete\"\n    [attr.inputmode]=\"inputmode\"\n    [attr.pattern]=\"pattern\"\n    [attr.min]=\"min\"\n    [attr.max]=\"max\"\n    [attr.minlength]=\"minlength\"\n    [attr.maxlength]=\"maxlength\"\n    [attr.step]=\"step\"\n    [value]=\"value\"\n    (input)=\"onInput($event)\"\n    (blur)=\"onBlur()\"\n    (focus)=\"onFocus.emit($event)\"\n  />\n\n  <!-- Suffix -->\n  <ng-content select=\"[twInputSuffix]\"></ng-content>\n\n  <!-- Clear button -->\n  @if (clearable && value && !disabled && !readonly) {\n    <button\n      type=\"button\"\n      class=\"flex items-center justify-center w-5 h-5 text-slate-400 hover:text-slate-600 dark:text-slate-500 dark:hover:text-slate-300 transition-colors\"\n      (click)=\"clear()\"\n      aria-label=\"Clear input\"\n    >\n      <svg class=\"w-4 h-4\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\">\n        <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M6 18L18 6M6 6l12 12\" />\n      </svg>\n    </button>\n  }\n</div>\n\n@if (hint && !error) {\n  <span class=\"block text-xs text-slate-500 dark:text-slate-400 mt-1.5\">{{ hint }}</span>\n}\n\n@if (error) {\n  <span class=\"block text-xs text-rose-600 mt-1.5\" role=\"alert\">{{ error }}</span>\n}\n\n<ng-content select=\"tw-hint, [twHint], tw-error, [twError]\"></ng-content>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: TwInputComponent, decorators: [{
             type: Component,
@@ -4319,7 +4319,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
                         },
                     ], host: {
                         class: 'block',
-                    }, template: "@if (label) {\n  <label [for]=\"inputId\" class=\"block text-sm font-medium text-slate-700 mb-1.5\">\n    {{ label }}\n    @if (required) {\n      <span class=\"text-rose-500 ml-0.5\">*</span>\n    }\n  </label>\n}\n\n<div [class]=\"wrapperClasses()\">\n  <!-- Prefix -->\n  <ng-content select=\"[twInputPrefix]\"></ng-content>\n\n  <!-- Input element -->\n  <input\n    #inputElement\n    [id]=\"inputId\"\n    [type]=\"type\"\n    [class]=\"computedClasses()\"\n    [placeholder]=\"placeholder\"\n    [disabled]=\"disabled\"\n    [readonly]=\"readonly\"\n    [required]=\"required\"\n    [attr.aria-invalid]=\"hasError\"\n    [attr.aria-describedby]=\"describedBy\"\n    [attr.autocomplete]=\"autocomplete\"\n    [attr.inputmode]=\"inputmode\"\n    [attr.pattern]=\"pattern\"\n    [attr.min]=\"min\"\n    [attr.max]=\"max\"\n    [attr.minlength]=\"minlength\"\n    [attr.maxlength]=\"maxlength\"\n    [attr.step]=\"step\"\n    [value]=\"value\"\n    (input)=\"onInput($event)\"\n    (blur)=\"onBlur()\"\n    (focus)=\"onFocus.emit($event)\"\n  />\n\n  <!-- Suffix -->\n  <ng-content select=\"[twInputSuffix]\"></ng-content>\n\n  <!-- Clear button -->\n  @if (clearable && value && !disabled && !readonly) {\n    <button\n      type=\"button\"\n      class=\"flex items-center justify-center w-5 h-5 text-slate-400 hover:text-slate-600 transition-colors\"\n      (click)=\"clear()\"\n      aria-label=\"Clear input\"\n    >\n      <svg class=\"w-4 h-4\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\">\n        <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M6 18L18 6M6 6l12 12\" />\n      </svg>\n    </button>\n  }\n</div>\n\n@if (hint && !error) {\n  <span class=\"block text-xs text-slate-500 mt-1.5\">{{ hint }}</span>\n}\n\n@if (error) {\n  <span class=\"block text-xs text-rose-600 mt-1.5\" role=\"alert\">{{ error }}</span>\n}\n\n<ng-content select=\"tw-hint, [twHint], tw-error, [twError]\"></ng-content>\n" }]
+                    }, template: "@if (label) {\n  <label [for]=\"inputId\" class=\"block text-sm font-medium text-slate-700 dark:text-slate-300 mb-1.5\">\n    {{ label }}\n    @if (required) {\n      <span class=\"text-rose-500 ml-0.5\">*</span>\n    }\n  </label>\n}\n\n<div [class]=\"wrapperClasses()\">\n  <!-- Prefix -->\n  <ng-content select=\"[twInputPrefix]\"></ng-content>\n\n  <!-- Input element -->\n  <input\n    #inputElement\n    [id]=\"inputId\"\n    [type]=\"type\"\n    [class]=\"computedClasses()\"\n    [placeholder]=\"placeholder\"\n    [disabled]=\"disabled\"\n    [readonly]=\"readonly\"\n    [required]=\"required\"\n    [attr.aria-invalid]=\"hasError\"\n    [attr.aria-describedby]=\"describedBy\"\n    [attr.autocomplete]=\"autocomplete\"\n    [attr.inputmode]=\"inputmode\"\n    [attr.pattern]=\"pattern\"\n    [attr.min]=\"min\"\n    [attr.max]=\"max\"\n    [attr.minlength]=\"minlength\"\n    [attr.maxlength]=\"maxlength\"\n    [attr.step]=\"step\"\n    [value]=\"value\"\n    (input)=\"onInput($event)\"\n    (blur)=\"onBlur()\"\n    (focus)=\"onFocus.emit($event)\"\n  />\n\n  <!-- Suffix -->\n  <ng-content select=\"[twInputSuffix]\"></ng-content>\n\n  <!-- Clear button -->\n  @if (clearable && value && !disabled && !readonly) {\n    <button\n      type=\"button\"\n      class=\"flex items-center justify-center w-5 h-5 text-slate-400 hover:text-slate-600 dark:text-slate-500 dark:hover:text-slate-300 transition-colors\"\n      (click)=\"clear()\"\n      aria-label=\"Clear input\"\n    >\n      <svg class=\"w-4 h-4\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\">\n        <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M6 18L18 6M6 6l12 12\" />\n      </svg>\n    </button>\n  }\n</div>\n\n@if (hint && !error) {\n  <span class=\"block text-xs text-slate-500 dark:text-slate-400 mt-1.5\">{{ hint }}</span>\n}\n\n@if (error) {\n  <span class=\"block text-xs text-rose-600 mt-1.5\" role=\"alert\">{{ error }}</span>\n}\n\n<ng-content select=\"tw-hint, [twHint], tw-error, [twError]\"></ng-content>\n" }]
         }], propDecorators: { inputElement: [{
                 type: ViewChild,
                 args: ['inputElement']
@@ -4452,7 +4452,7 @@ class TwTextareaComponent {
                 useExisting: forwardRef(() => TwTextareaComponent),
                 multi: true,
             },
-        ], viewQueries: [{ propertyName: "textareaElement", first: true, predicate: ["textareaElement"], descendants: true }], ngImport: i0, template: "@if (label) {\n  <label [for]=\"inputId\" class=\"block text-sm font-medium text-slate-700 mb-1.5\">\n    {{ label }}\n    @if (required) {\n      <span class=\"text-rose-500 ml-0.5\">*</span>\n    }\n  </label>\n}\n\n<textarea\n  #textareaElement\n  [id]=\"inputId\"\n  [class]=\"computedClasses()\"\n  [placeholder]=\"placeholder\"\n  [disabled]=\"disabled\"\n  [readonly]=\"readonly\"\n  [required]=\"required\"\n  [rows]=\"rows\"\n  [attr.aria-invalid]=\"hasError\"\n  [attr.minlength]=\"minlength\"\n  [attr.maxlength]=\"maxlength\"\n  [value]=\"value\"\n  (input)=\"onInput($event)\"\n  (blur)=\"onBlur()\"\n></textarea>\n\n@if (hint && !error) {\n  <span class=\"block text-xs text-slate-500 mt-1.5\">{{ hint }}</span>\n}\n\n@if (error) {\n  <span class=\"block text-xs text-rose-600 mt-1.5\" role=\"alert\">{{ error }}</span>\n}\n\n@if (maxlength && showCount) {\n  <span class=\"block text-xs text-slate-400 mt-1 text-right\">\n    {{ value.length }} / {{ maxlength }}\n  </span>\n}\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+        ], viewQueries: [{ propertyName: "textareaElement", first: true, predicate: ["textareaElement"], descendants: true }], ngImport: i0, template: "@if (label) {\n  <label [for]=\"inputId\" class=\"block text-sm font-medium text-slate-700 dark:text-slate-300 mb-1.5\">\n    {{ label }}\n    @if (required) {\n      <span class=\"text-rose-500 ml-0.5\">*</span>\n    }\n  </label>\n}\n\n<textarea\n  #textareaElement\n  [id]=\"inputId\"\n  [class]=\"computedClasses()\"\n  [placeholder]=\"placeholder\"\n  [disabled]=\"disabled\"\n  [readonly]=\"readonly\"\n  [required]=\"required\"\n  [rows]=\"rows\"\n  [attr.aria-invalid]=\"hasError\"\n  [attr.minlength]=\"minlength\"\n  [attr.maxlength]=\"maxlength\"\n  [value]=\"value\"\n  (input)=\"onInput($event)\"\n  (blur)=\"onBlur()\"\n></textarea>\n\n@if (hint && !error) {\n  <span class=\"block text-xs text-slate-500 dark:text-slate-400 mt-1.5\">{{ hint }}</span>\n}\n\n@if (error) {\n  <span class=\"block text-xs text-rose-600 mt-1.5\" role=\"alert\">{{ error }}</span>\n}\n\n@if (maxlength && showCount) {\n  <span class=\"block text-xs text-slate-400 mt-1 text-right\">\n    {{ value.length }} / {{ maxlength }}\n  </span>\n}\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: TwTextareaComponent, decorators: [{
             type: Component,
@@ -4464,7 +4464,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
                         },
                     ], host: {
                         class: 'block',
-                    }, template: "@if (label) {\n  <label [for]=\"inputId\" class=\"block text-sm font-medium text-slate-700 mb-1.5\">\n    {{ label }}\n    @if (required) {\n      <span class=\"text-rose-500 ml-0.5\">*</span>\n    }\n  </label>\n}\n\n<textarea\n  #textareaElement\n  [id]=\"inputId\"\n  [class]=\"computedClasses()\"\n  [placeholder]=\"placeholder\"\n  [disabled]=\"disabled\"\n  [readonly]=\"readonly\"\n  [required]=\"required\"\n  [rows]=\"rows\"\n  [attr.aria-invalid]=\"hasError\"\n  [attr.minlength]=\"minlength\"\n  [attr.maxlength]=\"maxlength\"\n  [value]=\"value\"\n  (input)=\"onInput($event)\"\n  (blur)=\"onBlur()\"\n></textarea>\n\n@if (hint && !error) {\n  <span class=\"block text-xs text-slate-500 mt-1.5\">{{ hint }}</span>\n}\n\n@if (error) {\n  <span class=\"block text-xs text-rose-600 mt-1.5\" role=\"alert\">{{ error }}</span>\n}\n\n@if (maxlength && showCount) {\n  <span class=\"block text-xs text-slate-400 mt-1 text-right\">\n    {{ value.length }} / {{ maxlength }}\n  </span>\n}\n" }]
+                    }, template: "@if (label) {\n  <label [for]=\"inputId\" class=\"block text-sm font-medium text-slate-700 dark:text-slate-300 mb-1.5\">\n    {{ label }}\n    @if (required) {\n      <span class=\"text-rose-500 ml-0.5\">*</span>\n    }\n  </label>\n}\n\n<textarea\n  #textareaElement\n  [id]=\"inputId\"\n  [class]=\"computedClasses()\"\n  [placeholder]=\"placeholder\"\n  [disabled]=\"disabled\"\n  [readonly]=\"readonly\"\n  [required]=\"required\"\n  [rows]=\"rows\"\n  [attr.aria-invalid]=\"hasError\"\n  [attr.minlength]=\"minlength\"\n  [attr.maxlength]=\"maxlength\"\n  [value]=\"value\"\n  (input)=\"onInput($event)\"\n  (blur)=\"onBlur()\"\n></textarea>\n\n@if (hint && !error) {\n  <span class=\"block text-xs text-slate-500 dark:text-slate-400 mt-1.5\">{{ hint }}</span>\n}\n\n@if (error) {\n  <span class=\"block text-xs text-rose-600 mt-1.5\" role=\"alert\">{{ error }}</span>\n}\n\n@if (maxlength && showCount) {\n  <span class=\"block text-xs text-slate-400 mt-1 text-right\">\n    {{ value.length }} / {{ maxlength }}\n  </span>\n}\n" }]
         }], propDecorators: { textareaElement: [{
                 type: ViewChild,
                 args: ['textareaElement']
@@ -9799,19 +9799,16 @@ class TwPaginationComponent {
         const rightSiblingIndex = Math.min(current + siblings, total);
         const showLeftEllipsis = leftSiblingIndex > 2;
         const showRightEllipsis = rightSiblingIndex < total - 1;
-        // Use unique ellipsis identifiers to avoid duplicate keys in @for tracking
-        const LEFT_ELLIPSIS = '...left';
-        const RIGHT_ELLIPSIS = '...right';
         if (!showLeftEllipsis && showRightEllipsis) {
             const leftRange = range(1, 3 + siblings * 2);
-            return [...leftRange.map(String), RIGHT_ELLIPSIS, String(total)];
+            return [...leftRange.map(String), '...', String(total)];
         }
         if (showLeftEllipsis && !showRightEllipsis) {
             const rightRange = range(total - (3 + siblings * 2) + 1, total);
-            return ['1', LEFT_ELLIPSIS, ...rightRange.map(String)];
+            return ['1', '...', ...rightRange.map(String)];
         }
         const middleRange = range(leftSiblingIndex, rightSiblingIndex);
-        return ['1', LEFT_ELLIPSIS, ...middleRange.map(String), RIGHT_ELLIPSIS, String(total)];
+        return ['1', '...', ...middleRange.map(String), '...', String(total)];
     }, ...(ngDevMode ? [{ debugName: "visiblePages" }] : []));
     goToPage(page) {
         if (page >= 1 && page <= this.totalPagesValue() && page !== this._currentPage()) {
@@ -9886,11 +9883,11 @@ class TwPaginationComponent {
         return baseClasses.join(' ');
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: TwPaginationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: TwPaginationComponent, isStandalone: true, selector: "tw-pagination", inputs: { currentPage: "currentPage", totalPages: "totalPages", totalItems: "totalItems", itemsPerPage: "itemsPerPage", siblingCount: "siblingCount", size: "size", variant: "variant", showFirstLast: "showFirstLast" }, outputs: { pageChange: "pageChange" }, ngImport: i0, template: "@switch (variantValue()) {\n  @case ('simple') {\n    <div class=\"flex items-center justify-between\">\n      <button\n        type=\"button\"\n        [disabled]=\"currentPageValue() <= 1\"\n        [class]=\"simpleButtonClasses(currentPageValue() <= 1)\"\n        (click)=\"goToPage(currentPageValue() - 1)\"\n      >\n        <svg\n          class=\"w-5 h-5 mr-1\"\n          fill=\"none\"\n          viewBox=\"0 0 24 24\"\n          stroke=\"currentColor\"\n          stroke-width=\"2\"\n        >\n          <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M15 19l-7-7 7-7\" />\n        </svg>\n        Previous\n      </button>\n      <span class=\"text-sm text-slate-600\">\n        Page {{ currentPageValue() }} of {{ totalPagesValue() }}\n      </span>\n      <button\n        type=\"button\"\n        [disabled]=\"currentPageValue() >= totalPagesValue()\"\n        [class]=\"simpleButtonClasses(currentPageValue() >= totalPagesValue())\"\n        (click)=\"goToPage(currentPageValue() + 1)\"\n      >\n        Next\n        <svg\n          class=\"w-5 h-5 ml-1\"\n          fill=\"none\"\n          viewBox=\"0 0 24 24\"\n          stroke=\"currentColor\"\n          stroke-width=\"2\"\n        >\n          <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5l7 7-7 7\" />\n        </svg>\n      </button>\n    </div>\n  }\n  @default {\n    <nav class=\"flex items-center gap-1\" aria-label=\"Pagination\">\n      <!-- Previous -->\n      <button\n        type=\"button\"\n        [disabled]=\"currentPageValue() <= 1\"\n        [class]=\"navButtonClasses(currentPageValue() <= 1)\"\n        (click)=\"goToPage(currentPageValue() - 1)\"\n        aria-label=\"Previous page\"\n      >\n        <svg class=\"w-5 h-5\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\">\n          <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M15 19l-7-7 7-7\" />\n        </svg>\n      </button>\n\n      <!-- Page numbers -->\n      @for (page of visiblePages(); track page) {\n        @if (page.startsWith('...')) {\n          <span [class]=\"ellipsisClasses()\">...</span>\n        } @else {\n          <button\n            type=\"button\"\n            [class]=\"pageButtonClasses(+page === currentPageValue())\"\n            [attr.aria-current]=\"+page === currentPageValue() ? 'page' : null\"\n            (click)=\"goToPage(+page)\"\n          >\n            {{ page }}\n          </button>\n        }\n      }\n\n      <!-- Next -->\n      <button\n        type=\"button\"\n        [disabled]=\"currentPageValue() >= totalPagesValue()\"\n        [class]=\"navButtonClasses(currentPageValue() >= totalPagesValue())\"\n        (click)=\"goToPage(currentPageValue() + 1)\"\n        aria-label=\"Next page\"\n      >\n        <svg class=\"w-5 h-5\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\">\n          <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5l7 7-7 7\" />\n        </svg>\n      </button>\n    </nav>\n  }\n}\n", dependencies: [{ kind: "ngmodule", type: CommonModule }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: TwPaginationComponent, isStandalone: true, selector: "tw-pagination", inputs: { currentPage: "currentPage", totalPages: "totalPages", totalItems: "totalItems", itemsPerPage: "itemsPerPage", siblingCount: "siblingCount", size: "size", variant: "variant", showFirstLast: "showFirstLast" }, outputs: { pageChange: "pageChange" }, ngImport: i0, template: "@switch (variantValue()) {\n  @case ('simple') {\n    <div class=\"flex items-center justify-between\">\n      <button\n        type=\"button\"\n        [disabled]=\"currentPageValue() <= 1\"\n        [class]=\"simpleButtonClasses(currentPageValue() <= 1)\"\n        (click)=\"goToPage(currentPageValue() - 1)\"\n      >\n        <svg\n          class=\"w-5 h-5 mr-1\"\n          fill=\"none\"\n          viewBox=\"0 0 24 24\"\n          stroke=\"currentColor\"\n          stroke-width=\"2\"\n        >\n          <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M15 19l-7-7 7-7\" />\n        </svg>\n        Previous\n      </button>\n      <span class=\"text-sm text-slate-600\">\n        Page {{ currentPageValue() }} of {{ totalPagesValue() }}\n      </span>\n      <button\n        type=\"button\"\n        [disabled]=\"currentPageValue() >= totalPagesValue()\"\n        [class]=\"simpleButtonClasses(currentPageValue() >= totalPagesValue())\"\n        (click)=\"goToPage(currentPageValue() + 1)\"\n      >\n        Next\n        <svg\n          class=\"w-5 h-5 ml-1\"\n          fill=\"none\"\n          viewBox=\"0 0 24 24\"\n          stroke=\"currentColor\"\n          stroke-width=\"2\"\n        >\n          <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5l7 7-7 7\" />\n        </svg>\n      </button>\n    </div>\n  }\n  @default {\n    <nav class=\"flex items-center gap-1\" aria-label=\"Pagination\">\n      <!-- Previous -->\n      <button\n        type=\"button\"\n        [disabled]=\"currentPageValue() <= 1\"\n        [class]=\"navButtonClasses(currentPageValue() <= 1)\"\n        (click)=\"goToPage(currentPageValue() - 1)\"\n        aria-label=\"Previous page\"\n      >\n        <svg class=\"w-5 h-5\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\">\n          <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M15 19l-7-7 7-7\" />\n        </svg>\n      </button>\n\n      <!-- Page numbers -->\n      @for (page of visiblePages(); track page) {\n        @if (page === '...') {\n          <span [class]=\"ellipsisClasses()\">...</span>\n        } @else {\n          <button\n            type=\"button\"\n            [class]=\"pageButtonClasses(+page === currentPageValue())\"\n            [attr.aria-current]=\"+page === currentPageValue() ? 'page' : null\"\n            (click)=\"goToPage(+page)\"\n          >\n            {{ page }}\n          </button>\n        }\n      }\n\n      <!-- Next -->\n      <button\n        type=\"button\"\n        [disabled]=\"currentPageValue() >= totalPagesValue()\"\n        [class]=\"navButtonClasses(currentPageValue() >= totalPagesValue())\"\n        (click)=\"goToPage(currentPageValue() + 1)\"\n        aria-label=\"Next page\"\n      >\n        <svg class=\"w-5 h-5\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\">\n          <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5l7 7-7 7\" />\n        </svg>\n      </button>\n    </nav>\n  }\n}\n", dependencies: [{ kind: "ngmodule", type: CommonModule }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: TwPaginationComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'tw-pagination', standalone: true, imports: [CommonModule], template: "@switch (variantValue()) {\n  @case ('simple') {\n    <div class=\"flex items-center justify-between\">\n      <button\n        type=\"button\"\n        [disabled]=\"currentPageValue() <= 1\"\n        [class]=\"simpleButtonClasses(currentPageValue() <= 1)\"\n        (click)=\"goToPage(currentPageValue() - 1)\"\n      >\n        <svg\n          class=\"w-5 h-5 mr-1\"\n          fill=\"none\"\n          viewBox=\"0 0 24 24\"\n          stroke=\"currentColor\"\n          stroke-width=\"2\"\n        >\n          <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M15 19l-7-7 7-7\" />\n        </svg>\n        Previous\n      </button>\n      <span class=\"text-sm text-slate-600\">\n        Page {{ currentPageValue() }} of {{ totalPagesValue() }}\n      </span>\n      <button\n        type=\"button\"\n        [disabled]=\"currentPageValue() >= totalPagesValue()\"\n        [class]=\"simpleButtonClasses(currentPageValue() >= totalPagesValue())\"\n        (click)=\"goToPage(currentPageValue() + 1)\"\n      >\n        Next\n        <svg\n          class=\"w-5 h-5 ml-1\"\n          fill=\"none\"\n          viewBox=\"0 0 24 24\"\n          stroke=\"currentColor\"\n          stroke-width=\"2\"\n        >\n          <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5l7 7-7 7\" />\n        </svg>\n      </button>\n    </div>\n  }\n  @default {\n    <nav class=\"flex items-center gap-1\" aria-label=\"Pagination\">\n      <!-- Previous -->\n      <button\n        type=\"button\"\n        [disabled]=\"currentPageValue() <= 1\"\n        [class]=\"navButtonClasses(currentPageValue() <= 1)\"\n        (click)=\"goToPage(currentPageValue() - 1)\"\n        aria-label=\"Previous page\"\n      >\n        <svg class=\"w-5 h-5\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\">\n          <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M15 19l-7-7 7-7\" />\n        </svg>\n      </button>\n\n      <!-- Page numbers -->\n      @for (page of visiblePages(); track page) {\n        @if (page.startsWith('...')) {\n          <span [class]=\"ellipsisClasses()\">...</span>\n        } @else {\n          <button\n            type=\"button\"\n            [class]=\"pageButtonClasses(+page === currentPageValue())\"\n            [attr.aria-current]=\"+page === currentPageValue() ? 'page' : null\"\n            (click)=\"goToPage(+page)\"\n          >\n            {{ page }}\n          </button>\n        }\n      }\n\n      <!-- Next -->\n      <button\n        type=\"button\"\n        [disabled]=\"currentPageValue() >= totalPagesValue()\"\n        [class]=\"navButtonClasses(currentPageValue() >= totalPagesValue())\"\n        (click)=\"goToPage(currentPageValue() + 1)\"\n        aria-label=\"Next page\"\n      >\n        <svg class=\"w-5 h-5\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\">\n          <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5l7 7-7 7\" />\n        </svg>\n      </button>\n    </nav>\n  }\n}\n" }]
+            args: [{ selector: 'tw-pagination', standalone: true, imports: [CommonModule], template: "@switch (variantValue()) {\n  @case ('simple') {\n    <div class=\"flex items-center justify-between\">\n      <button\n        type=\"button\"\n        [disabled]=\"currentPageValue() <= 1\"\n        [class]=\"simpleButtonClasses(currentPageValue() <= 1)\"\n        (click)=\"goToPage(currentPageValue() - 1)\"\n      >\n        <svg\n          class=\"w-5 h-5 mr-1\"\n          fill=\"none\"\n          viewBox=\"0 0 24 24\"\n          stroke=\"currentColor\"\n          stroke-width=\"2\"\n        >\n          <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M15 19l-7-7 7-7\" />\n        </svg>\n        Previous\n      </button>\n      <span class=\"text-sm text-slate-600\">\n        Page {{ currentPageValue() }} of {{ totalPagesValue() }}\n      </span>\n      <button\n        type=\"button\"\n        [disabled]=\"currentPageValue() >= totalPagesValue()\"\n        [class]=\"simpleButtonClasses(currentPageValue() >= totalPagesValue())\"\n        (click)=\"goToPage(currentPageValue() + 1)\"\n      >\n        Next\n        <svg\n          class=\"w-5 h-5 ml-1\"\n          fill=\"none\"\n          viewBox=\"0 0 24 24\"\n          stroke=\"currentColor\"\n          stroke-width=\"2\"\n        >\n          <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5l7 7-7 7\" />\n        </svg>\n      </button>\n    </div>\n  }\n  @default {\n    <nav class=\"flex items-center gap-1\" aria-label=\"Pagination\">\n      <!-- Previous -->\n      <button\n        type=\"button\"\n        [disabled]=\"currentPageValue() <= 1\"\n        [class]=\"navButtonClasses(currentPageValue() <= 1)\"\n        (click)=\"goToPage(currentPageValue() - 1)\"\n        aria-label=\"Previous page\"\n      >\n        <svg class=\"w-5 h-5\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\">\n          <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M15 19l-7-7 7-7\" />\n        </svg>\n      </button>\n\n      <!-- Page numbers -->\n      @for (page of visiblePages(); track page) {\n        @if (page === '...') {\n          <span [class]=\"ellipsisClasses()\">...</span>\n        } @else {\n          <button\n            type=\"button\"\n            [class]=\"pageButtonClasses(+page === currentPageValue())\"\n            [attr.aria-current]=\"+page === currentPageValue() ? 'page' : null\"\n            (click)=\"goToPage(+page)\"\n          >\n            {{ page }}\n          </button>\n        }\n      }\n\n      <!-- Next -->\n      <button\n        type=\"button\"\n        [disabled]=\"currentPageValue() >= totalPagesValue()\"\n        [class]=\"navButtonClasses(currentPageValue() >= totalPagesValue())\"\n        (click)=\"goToPage(currentPageValue() + 1)\"\n        aria-label=\"Next page\"\n      >\n        <svg class=\"w-5 h-5\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\">\n          <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5l7 7-7 7\" />\n        </svg>\n      </button>\n    </nav>\n  }\n}\n" }]
         }], propDecorators: { currentPage: [{
                 type: Input
             }], totalPages: [{
@@ -13210,8 +13207,6 @@ class TwVolumeDialComponent {
     a11y = inject(MusicAccessibilityService);
     dialSvg = viewChild('dialSvg', ...(ngDevMode ? [{ debugName: "dialSvg" }] : []));
     // Inputs
-    /** Initial/bound value - supports two-way binding with [(value)] */
-    value = model(0, ...(ngDevMode ? [{ debugName: "value" }] : []));
     min = input(0, ...(ngDevMode ? [{ debugName: "min" }] : []));
     max = input(100, ...(ngDevMode ? [{ debugName: "max" }] : []));
     step = input(1, ...(ngDevMode ? [{ debugName: "step" }] : []));
@@ -13238,8 +13233,10 @@ class TwVolumeDialComponent {
     announceChanges = input(true, ...(ngDevMode ? [{ debugName: "announceChanges" }] : [])); // Announce value changes to screen readers
     reducedMotion = input('auto', ...(ngDevMode ? [{ debugName: "reducedMotion" }] : [])); // Respect reduced motion preference
     // Outputs
-    // Note: valueChange is automatically created by the model() signal
+    valueChange = output();
     hapticTrigger = output(); // Haptic feedback trigger points
+    // Internal state
+    value = signal(0, ...(ngDevMode ? [{ debugName: "value" }] : []));
     isDragging = false;
     startAngle = 0;
     startValue = 0;
@@ -13490,6 +13487,7 @@ class TwVolumeDialComponent {
         if (newValue !== this.value()) {
             this.value.set(newValue);
             this.onChangeFn(newValue);
+            this.valueChange.emit(newValue);
             // Announce to screen readers (debounced)
             if (this.announceChanges()) {
                 this.a11y.announceValueChange(this.label() || 'Volume', this.displayValue(), this.unit());
@@ -13510,7 +13508,7 @@ class TwVolumeDialComponent {
         // Disabled state is handled via input
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: TwVolumeDialComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: TwVolumeDialComponent, isStandalone: true, selector: "tw-volume-dial", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, step: { classPropertyName: "step", publicName: "step", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, showValue: { classPropertyName: "showValue", publicName: "showValue", isSignal: true, isRequired: false, transformFunction: null }, showTicks: { classPropertyName: "showTicks", publicName: "showTicks", isSignal: true, isRequired: false, transformFunction: null }, showLabel: { classPropertyName: "showLabel", publicName: "showLabel", isSignal: true, isRequired: false, transformFunction: null }, showLedRing: { classPropertyName: "showLedRing", publicName: "showLedRing", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, unit: { classPropertyName: "unit", publicName: "unit", isSignal: true, isRequired: false, transformFunction: null }, centerDetent: { classPropertyName: "centerDetent", publicName: "centerDetent", isSignal: true, isRequired: false, transformFunction: null }, detentValue: { classPropertyName: "detentValue", publicName: "detentValue", isSignal: true, isRequired: false, transformFunction: null }, classOverride: { classPropertyName: "classOverride", publicName: "classOverride", isSignal: true, isRequired: false, transformFunction: null }, customSize: { classPropertyName: "customSize", publicName: "customSize", isSignal: true, isRequired: false, transformFunction: null }, customStrokeWidth: { classPropertyName: "customStrokeWidth", publicName: "customStrokeWidth", isSignal: true, isRequired: false, transformFunction: null }, hapticFeedback: { classPropertyName: "hapticFeedback", publicName: "hapticFeedback", isSignal: true, isRequired: false, transformFunction: null }, touchGuard: { classPropertyName: "touchGuard", publicName: "touchGuard", isSignal: true, isRequired: false, transformFunction: null }, minTouchDuration: { classPropertyName: "minTouchDuration", publicName: "minTouchDuration", isSignal: true, isRequired: false, transformFunction: null }, announceChanges: { classPropertyName: "announceChanges", publicName: "announceChanges", isSignal: true, isRequired: false, transformFunction: null }, reducedMotion: { classPropertyName: "reducedMotion", publicName: "reducedMotion", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", hapticTrigger: "hapticTrigger" }, host: { classAttribute: "inline-block" }, providers: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: TwVolumeDialComponent, isStandalone: true, selector: "tw-volume-dial", inputs: { min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, step: { classPropertyName: "step", publicName: "step", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, showValue: { classPropertyName: "showValue", publicName: "showValue", isSignal: true, isRequired: false, transformFunction: null }, showTicks: { classPropertyName: "showTicks", publicName: "showTicks", isSignal: true, isRequired: false, transformFunction: null }, showLabel: { classPropertyName: "showLabel", publicName: "showLabel", isSignal: true, isRequired: false, transformFunction: null }, showLedRing: { classPropertyName: "showLedRing", publicName: "showLedRing", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, unit: { classPropertyName: "unit", publicName: "unit", isSignal: true, isRequired: false, transformFunction: null }, centerDetent: { classPropertyName: "centerDetent", publicName: "centerDetent", isSignal: true, isRequired: false, transformFunction: null }, detentValue: { classPropertyName: "detentValue", publicName: "detentValue", isSignal: true, isRequired: false, transformFunction: null }, classOverride: { classPropertyName: "classOverride", publicName: "classOverride", isSignal: true, isRequired: false, transformFunction: null }, customSize: { classPropertyName: "customSize", publicName: "customSize", isSignal: true, isRequired: false, transformFunction: null }, customStrokeWidth: { classPropertyName: "customStrokeWidth", publicName: "customStrokeWidth", isSignal: true, isRequired: false, transformFunction: null }, hapticFeedback: { classPropertyName: "hapticFeedback", publicName: "hapticFeedback", isSignal: true, isRequired: false, transformFunction: null }, touchGuard: { classPropertyName: "touchGuard", publicName: "touchGuard", isSignal: true, isRequired: false, transformFunction: null }, minTouchDuration: { classPropertyName: "minTouchDuration", publicName: "minTouchDuration", isSignal: true, isRequired: false, transformFunction: null }, announceChanges: { classPropertyName: "announceChanges", publicName: "announceChanges", isSignal: true, isRequired: false, transformFunction: null }, reducedMotion: { classPropertyName: "reducedMotion", publicName: "reducedMotion", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChange: "valueChange", hapticTrigger: "hapticTrigger" }, host: { classAttribute: "inline-block" }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => TwVolumeDialComponent),
@@ -13529,7 +13527,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
                     ], host: {
                         class: 'inline-block',
                     }, template: "<div\n  [class]=\"containerClasses()\"\n  [style.width.px]=\"sizeConfig().size\"\n  [style.height.px]=\"sizeConfig().size + (showValue() ? 24 : 0)\"\n>\n  <!-- SVG Dial -->\n  <svg\n    #dialSvg\n    [attr.width]=\"sizeConfig().size\"\n    [attr.height]=\"sizeConfig().size\"\n    [attr.viewBox]=\"'0 0 ' + sizeConfig().size + ' ' + sizeConfig().size\"\n    class=\"cursor-pointer select-none\"\n    [class.opacity-50]=\"disabled()\"\n    [class.cursor-not-allowed]=\"disabled()\"\n    (mousedown)=\"onMouseDown($event)\"\n    (touchstart)=\"onTouchStart($event)\"\n    (keydown)=\"onKeyDown($event)\"\n    [attr.tabindex]=\"disabled() ? -1 : 0\"\n    role=\"slider\"\n    [attr.aria-valuenow]=\"value()\"\n    [attr.aria-valuemin]=\"min()\"\n    [attr.aria-valuemax]=\"max()\"\n    [attr.aria-label]=\"label() || 'Volume dial'\"\n    [attr.aria-disabled]=\"disabled()\"\n  >\n    <!-- Track (background arc) -->\n    <path\n      [attr.d]=\"trackPath()\"\n      fill=\"none\"\n      [attr.stroke-width]=\"sizeConfig().strokeWidth\"\n      [class]=\"variantConfig().track\"\n      stroke-linecap=\"round\"\n    />\n\n    <!-- Fill (value arc) -->\n    <path\n      [attr.d]=\"fillPath()\"\n      fill=\"none\"\n      [attr.stroke-width]=\"sizeConfig().strokeWidth\"\n      [class]=\"variantConfig().fill\"\n      stroke-linecap=\"round\"\n    />\n\n    <!-- Tick marks -->\n    @if (showTicks()) {\n      @for (tick of tickMarks(); track tick.angle) {\n        <line\n          [attr.x1]=\"tick.x1\"\n          [attr.y1]=\"tick.y1\"\n          [attr.x2]=\"tick.x2\"\n          [attr.y2]=\"tick.y2\"\n          [class]=\"\n            tick.isMajor\n              ? 'stroke-slate-400 dark:stroke-slate-500'\n              : 'stroke-slate-300 dark:stroke-slate-600'\n          \"\n          [attr.stroke-width]=\"tick.isMajor ? 2 : 1\"\n        />\n      }\n    }\n\n    <!-- Knob center -->\n    <circle\n      [attr.cx]=\"center()\"\n      [attr.cy]=\"center()\"\n      [attr.r]=\"knobRadius()\"\n      [class]=\"variantConfig().knob\"\n      stroke-width=\"2\"\n    />\n\n    <!-- Indicator line -->\n    <line\n      [attr.x1]=\"center()\"\n      [attr.y1]=\"center()\"\n      [attr.x2]=\"indicatorEnd().x\"\n      [attr.y2]=\"indicatorEnd().y\"\n      [class]=\"variantConfig().indicator\"\n      [attr.stroke-width]=\"sizeConfig().strokeWidth - 1\"\n      stroke-linecap=\"round\"\n    />\n\n    <!-- LED ring (for led variant) -->\n    @if (variant() === 'led' && showLedRing()) {\n      @for (led of ledSegments(); track led.index) {\n        <circle\n          [attr.cx]=\"led.x\"\n          [attr.cy]=\"led.y\"\n          [attr.r]=\"3\"\n          [class]=\"led.active ? 'fill-emerald-400' : 'fill-slate-700'\"\n        />\n      }\n    }\n  </svg>\n\n  <!-- Value display -->\n  @if (showValue()) {\n    <div [class]=\"valueClasses()\">{{ displayValue() }}{{ unit() }}</div>\n  }\n\n  <!-- Label -->\n  @if (label() && showLabel()) {\n    <div\n      class=\"absolute -bottom-6 left-1/2 -translate-x-1/2 text-xs text-slate-500 dark:text-slate-400 whitespace-nowrap\"\n    >\n      {{ label() }}\n    </div>\n  }\n</div>\n" }]
-        }], propDecorators: { dialSvg: [{ type: i0.ViewChild, args: ['dialSvg', { isSignal: true }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], step: [{ type: i0.Input, args: [{ isSignal: true, alias: "step", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], showValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "showValue", required: false }] }], showTicks: [{ type: i0.Input, args: [{ isSignal: true, alias: "showTicks", required: false }] }], showLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "showLabel", required: false }] }], showLedRing: [{ type: i0.Input, args: [{ isSignal: true, alias: "showLedRing", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], unit: [{ type: i0.Input, args: [{ isSignal: true, alias: "unit", required: false }] }], centerDetent: [{ type: i0.Input, args: [{ isSignal: true, alias: "centerDetent", required: false }] }], detentValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "detentValue", required: false }] }], classOverride: [{ type: i0.Input, args: [{ isSignal: true, alias: "classOverride", required: false }] }], customSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "customSize", required: false }] }], customStrokeWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "customStrokeWidth", required: false }] }], hapticFeedback: [{ type: i0.Input, args: [{ isSignal: true, alias: "hapticFeedback", required: false }] }], touchGuard: [{ type: i0.Input, args: [{ isSignal: true, alias: "touchGuard", required: false }] }], minTouchDuration: [{ type: i0.Input, args: [{ isSignal: true, alias: "minTouchDuration", required: false }] }], announceChanges: [{ type: i0.Input, args: [{ isSignal: true, alias: "announceChanges", required: false }] }], reducedMotion: [{ type: i0.Input, args: [{ isSignal: true, alias: "reducedMotion", required: false }] }], hapticTrigger: [{ type: i0.Output, args: ["hapticTrigger"] }] } });
+        }], propDecorators: { dialSvg: [{ type: i0.ViewChild, args: ['dialSvg', { isSignal: true }] }], min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], step: [{ type: i0.Input, args: [{ isSignal: true, alias: "step", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], showValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "showValue", required: false }] }], showTicks: [{ type: i0.Input, args: [{ isSignal: true, alias: "showTicks", required: false }] }], showLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "showLabel", required: false }] }], showLedRing: [{ type: i0.Input, args: [{ isSignal: true, alias: "showLedRing", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], unit: [{ type: i0.Input, args: [{ isSignal: true, alias: "unit", required: false }] }], centerDetent: [{ type: i0.Input, args: [{ isSignal: true, alias: "centerDetent", required: false }] }], detentValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "detentValue", required: false }] }], classOverride: [{ type: i0.Input, args: [{ isSignal: true, alias: "classOverride", required: false }] }], customSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "customSize", required: false }] }], customStrokeWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "customStrokeWidth", required: false }] }], hapticFeedback: [{ type: i0.Input, args: [{ isSignal: true, alias: "hapticFeedback", required: false }] }], touchGuard: [{ type: i0.Input, args: [{ isSignal: true, alias: "touchGuard", required: false }] }], minTouchDuration: [{ type: i0.Input, args: [{ isSignal: true, alias: "minTouchDuration", required: false }] }], announceChanges: [{ type: i0.Input, args: [{ isSignal: true, alias: "announceChanges", required: false }] }], reducedMotion: [{ type: i0.Input, args: [{ isSignal: true, alias: "reducedMotion", required: false }] }], valueChange: [{ type: i0.Output, args: ["valueChange"] }], hapticTrigger: [{ type: i0.Output, args: ["hapticTrigger"] }] } });
 
 // RMS calculation window size (samples)
 const RMS_WINDOW_SIZE = 1024;
@@ -19135,7 +19133,7 @@ class TwChannelStripComponent {
                 useExisting: forwardRef(() => TwChannelStripComponent),
                 multi: true,
             },
-        ], ngImport: i0, template: "<div [class]=\"containerClasses()\">\n  <!-- Channel Label with Signal Indicator -->\n  @if (showLabel()) {\n    <div [class]=\"labelClasses()\" class=\"relative flex items-center justify-center gap-1\">\n      <!-- Signal Present Indicator -->\n      @if (showSignalIndicator()) {\n        <div\n          class=\"w-2 h-2 rounded-full transition-all duration-150\"\n          [class.bg-green-500]=\"signalPresent()\"\n          [class.shadow-[0_0_6px_rgba(34,197,94,0.8)]]=\"signalPresent()\"\n          [class.bg-slate-600]=\"!signalPresent()\"\n          title=\"Signal Present\"\n        ></div>\n      }\n      <span class=\"text-slate-400\">{{ channelNumber() }}</span>\n      <span class=\"text-white\">{{ label() }}</span>\n    </div>\n  }\n\n  <!-- Input Gain Control -->\n  @if (showInputGain()) {\n    <div class=\"flex flex-col items-center gap-1\">\n      <tw-volume-dial\n        [ngModel]=\"inputGain()\"\n        (ngModelChange)=\"onInputGainChange($event)\"\n        [min]=\"-20\"\n        [max]=\"20\"\n        [step]=\"1\"\n        [size]=\"size() === 'lg' ? 'sm' : 'xs'\"\n        [variant]=\"variant() === 'vintage' ? 'vintage' : 'minimal'\"\n        [disabled]=\"disabled()\"\n        [centerDetent]=\"true\"\n        [detentValue]=\"0\"\n        label=\"\"\n        [showValue]=\"false\"\n      ></tw-volume-dial>\n      <span class=\"text-[9px] text-slate-500 font-mono\">{{ formatGain(inputGain()) }}dB</span>\n      <span class=\"text-[8px] text-slate-600\">GAIN</span>\n    </div>\n  }\n\n  <!-- Record Button -->\n  @if (showRecord()) {\n    <button\n      type=\"button\"\n      [class]=\"buttonSize()\"\n      class=\"rounded-full flex items-center justify-center font-bold transition-all\"\n      [class.bg-red-600]=\"record()\"\n      [class.text-white]=\"record()\"\n      [class.bg-slate-700]=\"!record()\"\n      [class.text-slate-400]=\"!record()\"\n      [class.hover:bg-red-500]=\"!record()\"\n      [class.animate-pulse]=\"record()\"\n      [disabled]=\"disabled()\"\n      (click)=\"toggleRecord()\"\n      title=\"Record Arm\"\n    >\n      R\n    </button>\n  }\n\n  <!-- Aux Send Knobs -->\n  @if (showAuxSends()) {\n    <div class=\"flex flex-col gap-1 w-full border-t border-slate-700/50 pt-2\">\n      <span class=\"text-[8px] text-slate-500 text-center\">SENDS</span>\n      <div\n        class=\"grid gap-1\"\n        [class.grid-cols-2]=\"auxSendCount() > 2\"\n        [class.grid-cols-1]=\"auxSendCount() <= 2\"\n      >\n        @for (aux of auxSendArray(); track aux.index) {\n          <div class=\"flex flex-col items-center\">\n            <tw-volume-dial\n              [ngModel]=\"aux.value\"\n              (ngModelChange)=\"onAuxSendChange(aux.index, $event)\"\n              [min]=\"0\"\n              [max]=\"100\"\n              [step]=\"1\"\n              size=\"xs\"\n              [variant]=\"variant() === 'vintage' ? 'vintage' : 'minimal'\"\n              [disabled]=\"disabled() || mute()\"\n              label=\"\"\n              [showValue]=\"false\"\n            ></tw-volume-dial>\n            <span class=\"text-[8px] text-slate-500 truncate max-w-full\">{{ aux.label }}</span>\n          </div>\n        }\n      </div>\n    </div>\n  }\n\n  <!-- VU Meter -->\n  @if (showMeter()) {\n    <div class=\"flex-1 flex items-center justify-center py-1\">\n      @if (stereo()) {\n        <tw-vu-meter\n          [leftValue]=\"meterLevel()\"\n          [rightValue]=\"meterLevelRight()\"\n          [stereo]=\"true\"\n          [segmentCount]=\"size() === 'sm' ? 8 : 12\"\n          [height]=\"size() === 'sm' ? 60 : size() === 'lg' ? 100 : 80\"\n          variant=\"led\"\n        ></tw-vu-meter>\n      } @else {\n        <tw-vu-meter\n          [value]=\"meterLevel()\"\n          [segmentCount]=\"size() === 'sm' ? 8 : 12\"\n          [height]=\"size() === 'sm' ? 60 : size() === 'lg' ? 100 : 80\"\n          variant=\"led\"\n        ></tw-vu-meter>\n      }\n    </div>\n  }\n\n  <!-- Volume Fader / Dial -->\n  <tw-volume-dial\n    [ngModel]=\"volume()\"\n    (ngModelChange)=\"onVolumeChange($event)\"\n    [min]=\"0\"\n    [max]=\"100\"\n    [step]=\"1\"\n    [size]=\"dialSize()\"\n    [variant]=\"variant() === 'vintage' ? 'vintage' : 'modern'\"\n    [disabled]=\"disabled() || mute()\"\n    label=\"\"\n    [showValue]=\"size() !== 'sm'\"\n  ></tw-volume-dial>\n\n  <!-- Pan Control -->\n  @if (showPan()) {\n    <tw-volume-dial\n      [ngModel]=\"pan()\"\n      (ngModelChange)=\"onPanChange($event)\"\n      [min]=\"-100\"\n      [max]=\"100\"\n      [step]=\"1\"\n      [size]=\"size() === 'lg' ? 'md' : 'sm'\"\n      [variant]=\"variant() === 'vintage' ? 'vintage' : 'minimal'\"\n      [disabled]=\"disabled()\"\n      [centerDetent]=\"true\"\n      [detentValue]=\"0\"\n      label=\"\"\n      [showValue]=\"false\"\n    ></tw-volume-dial>\n    <span class=\"text-[10px] text-slate-500\">PAN</span>\n  }\n\n  <!-- Mute / Solo Buttons -->\n  @if (showMuteSolo()) {\n    <div class=\"flex gap-1\">\n      <button\n        type=\"button\"\n        [class]=\"buttonSize()\"\n        class=\"rounded flex items-center justify-center font-bold transition-all\"\n        [class.bg-amber-500]=\"mute()\"\n        [class.text-black]=\"mute()\"\n        [class.bg-slate-700]=\"!mute()\"\n        [class.text-slate-400]=\"!mute()\"\n        [class.hover:bg-amber-400]=\"!mute()\"\n        [disabled]=\"disabled()\"\n        (click)=\"toggleMute()\"\n        title=\"Mute\"\n      >\n        M\n      </button>\n      <button\n        type=\"button\"\n        [class]=\"buttonSize()\"\n        class=\"rounded flex items-center justify-center font-bold transition-all\"\n        [class.bg-green-500]=\"solo()\"\n        [class.text-black]=\"solo()\"\n        [class.bg-slate-700]=\"!solo()\"\n        [class.text-slate-400]=\"!solo()\"\n        [class.hover:bg-green-400]=\"!solo()\"\n        [disabled]=\"disabled()\"\n        (click)=\"toggleSolo()\"\n        title=\"Solo\"\n      >\n        S\n      </button>\n    </div>\n  }\n</div>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: TwVolumeDialComponent, selector: "tw-volume-dial", inputs: ["value", "min", "max", "step", "variant", "size", "disabled", "showValue", "showTicks", "showLabel", "showLedRing", "label", "unit", "centerDetent", "detentValue", "classOverride", "customSize", "customStrokeWidth", "hapticFeedback", "touchGuard", "minTouchDuration", "announceChanges", "reducedMotion"], outputs: ["valueChange", "hapticTrigger"] }, { kind: "component", type: TwVuMeterComponent, selector: "tw-vu-meter", inputs: ["value", "leftValue", "rightValue", "min", "max", "stereo", "variant", "orientation", "meterMode", "segmentCount", "height", "width", "barWidth", "gapSize", "rmsDecayRate", "customHeight", "customWidth", "customBarWidth", "customGapSize", "showPeak", "peakHoldTime", "peakDecayRate", "showClip", "clipThreshold", "showScale", "showChannelLabels", "label", "labelPosition", "yellowThreshold", "redThreshold", "classOverride"], outputs: ["clipDetected"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+        ], ngImport: i0, template: "<div [class]=\"containerClasses()\">\n  <!-- Channel Label with Signal Indicator -->\n  @if (showLabel()) {\n    <div [class]=\"labelClasses()\" class=\"relative flex items-center justify-center gap-1\">\n      <!-- Signal Present Indicator -->\n      @if (showSignalIndicator()) {\n        <div\n          class=\"w-2 h-2 rounded-full transition-all duration-150\"\n          [class.bg-green-500]=\"signalPresent()\"\n          [class.shadow-[0_0_6px_rgba(34,197,94,0.8)]]=\"signalPresent()\"\n          [class.bg-slate-600]=\"!signalPresent()\"\n          title=\"Signal Present\"\n        ></div>\n      }\n      <span class=\"text-slate-400\">{{ channelNumber() }}</span>\n      <span class=\"text-white\">{{ label() }}</span>\n    </div>\n  }\n\n  <!-- Input Gain Control -->\n  @if (showInputGain()) {\n    <div class=\"flex flex-col items-center gap-1\">\n      <tw-volume-dial\n        [ngModel]=\"inputGain()\"\n        (ngModelChange)=\"onInputGainChange($event)\"\n        [min]=\"-20\"\n        [max]=\"20\"\n        [step]=\"1\"\n        [size]=\"size() === 'lg' ? 'sm' : 'xs'\"\n        [variant]=\"variant() === 'vintage' ? 'vintage' : 'minimal'\"\n        [disabled]=\"disabled()\"\n        [centerDetent]=\"true\"\n        [detentValue]=\"0\"\n        label=\"\"\n        [showValue]=\"false\"\n      ></tw-volume-dial>\n      <span class=\"text-[9px] text-slate-500 font-mono\">{{ formatGain(inputGain()) }}dB</span>\n      <span class=\"text-[8px] text-slate-600\">GAIN</span>\n    </div>\n  }\n\n  <!-- Record Button -->\n  @if (showRecord()) {\n    <button\n      type=\"button\"\n      [class]=\"buttonSize()\"\n      class=\"rounded-full flex items-center justify-center font-bold transition-all\"\n      [class.bg-red-600]=\"record()\"\n      [class.text-white]=\"record()\"\n      [class.bg-slate-700]=\"!record()\"\n      [class.text-slate-400]=\"!record()\"\n      [class.hover:bg-red-500]=\"!record()\"\n      [class.animate-pulse]=\"record()\"\n      [disabled]=\"disabled()\"\n      (click)=\"toggleRecord()\"\n      title=\"Record Arm\"\n    >\n      R\n    </button>\n  }\n\n  <!-- Aux Send Knobs -->\n  @if (showAuxSends()) {\n    <div class=\"flex flex-col gap-1 w-full border-t border-slate-700/50 pt-2\">\n      <span class=\"text-[8px] text-slate-500 text-center\">SENDS</span>\n      <div\n        class=\"grid gap-1\"\n        [class.grid-cols-2]=\"auxSendCount() > 2\"\n        [class.grid-cols-1]=\"auxSendCount() <= 2\"\n      >\n        @for (aux of auxSendArray(); track aux.index) {\n          <div class=\"flex flex-col items-center\">\n            <tw-volume-dial\n              [ngModel]=\"aux.value\"\n              (ngModelChange)=\"onAuxSendChange(aux.index, $event)\"\n              [min]=\"0\"\n              [max]=\"100\"\n              [step]=\"1\"\n              size=\"xs\"\n              [variant]=\"variant() === 'vintage' ? 'vintage' : 'minimal'\"\n              [disabled]=\"disabled() || mute()\"\n              label=\"\"\n              [showValue]=\"false\"\n            ></tw-volume-dial>\n            <span class=\"text-[8px] text-slate-500 truncate max-w-full\">{{ aux.label }}</span>\n          </div>\n        }\n      </div>\n    </div>\n  }\n\n  <!-- VU Meter -->\n  @if (showMeter()) {\n    <div class=\"flex-1 flex items-center justify-center py-1\">\n      @if (stereo()) {\n        <tw-vu-meter\n          [leftValue]=\"meterLevel()\"\n          [rightValue]=\"meterLevelRight()\"\n          [stereo]=\"true\"\n          [segmentCount]=\"size() === 'sm' ? 8 : 12\"\n          [height]=\"size() === 'sm' ? 60 : size() === 'lg' ? 100 : 80\"\n          variant=\"led\"\n        ></tw-vu-meter>\n      } @else {\n        <tw-vu-meter\n          [value]=\"meterLevel()\"\n          [segmentCount]=\"size() === 'sm' ? 8 : 12\"\n          [height]=\"size() === 'sm' ? 60 : size() === 'lg' ? 100 : 80\"\n          variant=\"led\"\n        ></tw-vu-meter>\n      }\n    </div>\n  }\n\n  <!-- Volume Fader / Dial -->\n  <tw-volume-dial\n    [ngModel]=\"volume()\"\n    (ngModelChange)=\"onVolumeChange($event)\"\n    [min]=\"0\"\n    [max]=\"100\"\n    [step]=\"1\"\n    [size]=\"dialSize()\"\n    [variant]=\"variant() === 'vintage' ? 'vintage' : 'modern'\"\n    [disabled]=\"disabled() || mute()\"\n    label=\"\"\n    [showValue]=\"size() !== 'sm'\"\n  ></tw-volume-dial>\n\n  <!-- Pan Control -->\n  @if (showPan()) {\n    <tw-volume-dial\n      [ngModel]=\"pan()\"\n      (ngModelChange)=\"onPanChange($event)\"\n      [min]=\"-100\"\n      [max]=\"100\"\n      [step]=\"1\"\n      [size]=\"size() === 'lg' ? 'md' : 'sm'\"\n      [variant]=\"variant() === 'vintage' ? 'vintage' : 'minimal'\"\n      [disabled]=\"disabled()\"\n      [centerDetent]=\"true\"\n      [detentValue]=\"0\"\n      label=\"\"\n      [showValue]=\"false\"\n    ></tw-volume-dial>\n    <span class=\"text-[10px] text-slate-500\">PAN</span>\n  }\n\n  <!-- Mute / Solo Buttons -->\n  @if (showMuteSolo()) {\n    <div class=\"flex gap-1\">\n      <button\n        type=\"button\"\n        [class]=\"buttonSize()\"\n        class=\"rounded flex items-center justify-center font-bold transition-all\"\n        [class.bg-amber-500]=\"mute()\"\n        [class.text-black]=\"mute()\"\n        [class.bg-slate-700]=\"!mute()\"\n        [class.text-slate-400]=\"!mute()\"\n        [class.hover:bg-amber-400]=\"!mute()\"\n        [disabled]=\"disabled()\"\n        (click)=\"toggleMute()\"\n        title=\"Mute\"\n      >\n        M\n      </button>\n      <button\n        type=\"button\"\n        [class]=\"buttonSize()\"\n        class=\"rounded flex items-center justify-center font-bold transition-all\"\n        [class.bg-green-500]=\"solo()\"\n        [class.text-black]=\"solo()\"\n        [class.bg-slate-700]=\"!solo()\"\n        [class.text-slate-400]=\"!solo()\"\n        [class.hover:bg-green-400]=\"!solo()\"\n        [disabled]=\"disabled()\"\n        (click)=\"toggleSolo()\"\n        title=\"Solo\"\n      >\n        S\n      </button>\n    </div>\n  }\n</div>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: TwVolumeDialComponent, selector: "tw-volume-dial", inputs: ["min", "max", "step", "variant", "size", "disabled", "showValue", "showTicks", "showLabel", "showLedRing", "label", "unit", "centerDetent", "detentValue", "classOverride", "customSize", "customStrokeWidth", "hapticFeedback", "touchGuard", "minTouchDuration", "announceChanges", "reducedMotion"], outputs: ["valueChange", "hapticTrigger"] }, { kind: "component", type: TwVuMeterComponent, selector: "tw-vu-meter", inputs: ["value", "leftValue", "rightValue", "min", "max", "stereo", "variant", "orientation", "meterMode", "segmentCount", "height", "width", "barWidth", "gapSize", "rmsDecayRate", "customHeight", "customWidth", "customBarWidth", "customGapSize", "showPeak", "peakHoldTime", "peakDecayRate", "showClip", "clipThreshold", "showScale", "showChannelLabels", "label", "labelPosition", "yellowThreshold", "redThreshold", "classOverride"], outputs: ["clipDetected"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: TwChannelStripComponent, decorators: [{
             type: Component,
@@ -32083,6 +32081,17 @@ const TW_MUSIC_COMPONENTS = [
 // Convenience array for directives only
 const TW_MUSIC_DIRECTIVES = [TwTouchGuardDirective, TwMidiLearnDirective];
 
+/**
+ * Utility for truly dynamic imports that bundlers cannot statically analyze.
+ * This prevents build errors when optional peer dependencies (Tauri/Electron) are not installed.
+ */
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+function dynamicImport(modulePath) {
+    // Use Function constructor to hide the import from static analysis
+    // This prevents bundlers from trying to resolve these modules at build time
+    return new Function('modulePath', 'return import(modulePath)')(modulePath);
+}
+
 /**
  * Service for detecting and interacting with the native platform
  * Supports Tauri, Electron, and web browsers
@@ -32131,7 +32140,7 @@ class NativeAppPlatformService {
         return 'web';
     }
     checkTauri() {
-        return typeof window !== 'undefined' && '__TAURI__' in window;
+        return false; // Tauri support disabled
     }
     checkElectron() {
         return (typeof window !== 'undefined' &&
@@ -32170,18 +32179,12 @@ class NativeAppPlatformService {
     // Window control methods
     async minimize() {
         if (this._isTauri()) {
-            try {
-                const tauriWindow = await import('@tauri-apps/api/window');
-                const win = tauriWindow.getCurrentWindow();
-                await win.minimize();
-            }
-            catch (e) {
-                console.warn('Tauri minimize failed:', e);
-            }
+            // Tauri support disabled
+            return;
         }
         else if (this._isElectron()) {
             try {
-                const electron = await import('electron');
+                const electron = await dynamicImport('electron');
                 electron.ipcRenderer.send('window-minimize');
             }
             catch (e) {
@@ -32193,7 +32196,7 @@ class NativeAppPlatformService {
     async maximize() {
         if (this._isTauri()) {
             try {
-                const tauriWindow = await import('@tauri-apps/api/window');
+                const tauriWindow = await dynamicImport('@tauri-apps/api/window');
                 const win = tauriWindow.getCurrentWindow();
                 if (await win.isMaximized()) {
                     await win.unmaximize();
@@ -32210,7 +32213,7 @@ class NativeAppPlatformService {
         }
         else if (this._isElectron()) {
             try {
-                const electron = await import('electron');
+                const electron = await dynamicImport('electron');
                 electron.ipcRenderer.send('window-maximize');
             }
             catch (e) {
@@ -32221,7 +32224,7 @@ class NativeAppPlatformService {
     async close() {
         if (this._isTauri()) {
             try {
-                const tauriWindow = await import('@tauri-apps/api/window');
+                const tauriWindow = await dynamicImport('@tauri-apps/api/window');
                 const win = tauriWindow.getCurrentWindow();
                 await win.close();
             }
@@ -32231,7 +32234,7 @@ class NativeAppPlatformService {
         }
         else if (this._isElectron()) {
             try {
-                const electron = await import('electron');
+                const electron = await dynamicImport('electron');
                 electron.ipcRenderer.send('window-close');
             }
             catch (e) {
@@ -32245,7 +32248,7 @@ class NativeAppPlatformService {
     async toggleFullscreen() {
         if (this._isTauri()) {
             try {
-                const tauriWindow = await import('@tauri-apps/api/window');
+                const tauriWindow = await dynamicImport('@tauri-apps/api/window');
                 const win = tauriWindow.getCurrentWindow();
                 if (await win.isFullscreen()) {
                     await win.setFullscreen(false);
@@ -32260,7 +32263,7 @@ class NativeAppPlatformService {
         }
         else if (this._isElectron()) {
             try {
-                const electron = await import('electron');
+                const electron = await dynamicImport('electron');
                 electron.ipcRenderer.send('window-fullscreen');
             }
             catch (e) {
@@ -32279,7 +32282,7 @@ class NativeAppPlatformService {
     async setTitle(title) {
         if (this._isTauri()) {
             try {
-                const tauriWindow = await import('@tauri-apps/api/window');
+                const tauriWindow = await dynamicImport('@tauri-apps/api/window');
                 const win = tauriWindow.getCurrentWindow();
                 await win.setTitle(title);
             }
@@ -32289,7 +32292,7 @@ class NativeAppPlatformService {
         }
         else if (this._isElectron()) {
             try {
-                const electron = await import('electron');
+                const electron = await dynamicImport('electron');
                 electron.ipcRenderer.send('window-set-title', title);
             }
             catch (e) {
@@ -40180,7 +40183,7 @@ class TwTerminalComponent {
     // Computed classes
     containerClasses = computed(() => {
         const variant = this.variant();
-        const base = 'flex flex-col h-full overflow-hidden';
+        const base = 'flex flex-col h-full overflow-hidden rounded-lg';
         const variantClasses = {
             default: 'bg-gray-900 text-gray-100',
             dark: 'bg-black text-gray-200',
@@ -40339,7 +40342,7 @@ class TwTerminalComponent {
       <!-- Input area -->
       @if (showInput()) {
         <div
-          class="flex items-center gap-2 px-4 py-2 border-t border-gray-700 bg-gray-800"
+          class="flex items-center gap-2 px-4 py-2 border-t border-gray-700 bg-gray-800 rounded-b-lg"
         >
           <span class="text-green-400 font-mono">{{ prompt() }}</span>
           <input
@@ -40437,7 +40440,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
       <!-- Input area -->
       @if (showInput()) {
         <div
-          class="flex items-center gap-2 px-4 py-2 border-t border-gray-700 bg-gray-800"
+          class="flex items-center gap-2 px-4 py-2 border-t border-gray-700 bg-gray-800 rounded-b-lg"
         >
           <span class="text-green-400 font-mono">{{ prompt() }}</span>
           <input
@@ -40567,7 +40570,7 @@ class TwLogViewerComponent {
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: TwLogViewerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: TwLogViewerComponent, isStandalone: true, selector: "tw-log-viewer", inputs: { entries: { classPropertyName: "entries", publicName: "entries", isSignal: true, isRequired: false, transformFunction: null }, showSource: { classPropertyName: "showSource", publicName: "showSource", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { entrySelect: "entrySelect", clearLogs: "clearLogs", exportClick: "exportClick" }, host: { classAttribute: "tw-log-viewer block" }, ngImport: i0, template: `
-    <div class="flex flex-col h-full bg-white dark:bg-gray-900 overflow-hidden">
+    <div class="flex flex-col h-full bg-white dark:bg-gray-900 rounded-lg overflow-hidden">
       <!-- Toolbar -->
       <div
         class="flex items-center gap-2 px-3 py-2 border-b border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-800"
@@ -40717,7 +40720,7 @@ class TwLogViewerComponent {
 
       <!-- Status bar -->
       <div
-        class="flex items-center justify-between px-3 py-1.5 text-xs text-gray-500 dark:text-gray-400 border-t border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-800"
+        class="flex items-center justify-between px-3 py-1.5 text-xs text-gray-500 dark:text-gray-400 border-t border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-800 rounded-b-lg"
       >
         <span>{{ filteredEntries().length }} / {{ entries().length }} entries</span>
         <span>
@@ -40738,7 +40741,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
                     standalone: true,
                     imports: [CommonModule, FormsModule],
                     template: `
-    <div class="flex flex-col h-full bg-white dark:bg-gray-900 overflow-hidden">
+    <div class="flex flex-col h-full bg-white dark:bg-gray-900 rounded-lg overflow-hidden">
       <!-- Toolbar -->
       <div
         class="flex items-center gap-2 px-3 py-2 border-b border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-800"
@@ -40888,7 +40891,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
 
       <!-- Status bar -->
       <div
-        class="flex items-center justify-between px-3 py-1.5 text-xs text-gray-500 dark:text-gray-400 border-t border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-800"
+        class="flex items-center justify-between px-3 py-1.5 text-xs text-gray-500 dark:text-gray-400 border-t border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-800 rounded-b-lg"
       >
         <span>{{ filteredEntries().length }} / {{ entries().length }} entries</span>
         <span>
@@ -43054,7 +43057,7 @@ class NativeStorageService {
         }
         if (this.platformService.isElectron()) {
             try {
-                const electron = await import('electron');
+                const electron = await dynamicImport('electron');
                 return electron.ipcRenderer.invoke('secure-storage-get', key);
             }
             catch (err) {
@@ -43081,7 +43084,7 @@ class NativeStorageService {
         }
         if (this.platformService.isElectron()) {
             try {
-                const electron = await import('electron');
+                const electron = await dynamicImport('electron');
                 await electron.ipcRenderer.invoke('secure-storage-set', key, value);
             }
             catch (err) {
@@ -43108,7 +43111,7 @@ class NativeStorageService {
         }
         if (this.platformService.isElectron()) {
             try {
-                const electron = await import('electron');
+                const electron = await dynamicImport('electron');
                 await electron.ipcRenderer.invoke('secure-storage-remove', key);
             }
             catch (err) {
@@ -43247,7 +43250,7 @@ class NativeIpcService {
     async invoke(command, payload) {
         if (this.platformService.isTauri()) {
             try {
-                const tauriCore = (await import('@tauri-apps/api/core'));
+                const tauriCore = (await dynamicImport('@tauri-apps/api/core'));
                 const data = await tauriCore.invoke(command, payload);
                 return { success: true, data };
             }
@@ -43257,7 +43260,7 @@ class NativeIpcService {
         }
         if (this.platformService.isElectron()) {
             try {
-                const electron = await import('electron');
+                const electron = await dynamicImport('electron');
                 const data = await electron.ipcRenderer.invoke(command, payload);
                 return { success: true, data };
             }
@@ -43273,7 +43276,7 @@ class NativeIpcService {
     async send(channel, payload) {
         if (this.platformService.isTauri()) {
             try {
-                const tauriEvent = (await import('@tauri-apps/api/event'));
+                const tauriEvent = (await dynamicImport('@tauri-apps/api/event'));
                 await tauriEvent.emit(channel, payload);
             }
             catch (e) {
@@ -43283,7 +43286,7 @@ class NativeIpcService {
         }
         if (this.platformService.isElectron()) {
             try {
-                const electron = await import('electron');
+                const electron = await dynamicImport('electron');
                 electron.ipcRenderer.send(channel, payload);
             }
             catch (e) {
@@ -43305,7 +43308,7 @@ class NativeIpcService {
         // Platform-specific setup
         if (this.platformService.isTauri()) {
             try {
-                const tauriEvent = (await import('@tauri-apps/api/event'));
+                const tauriEvent = (await dynamicImport('@tauri-apps/api/event'));
                 const unlisten = await tauriEvent.listen(channel, (event) => {
                     this.ngZone.run(() => {
                         callback(event.payload);
@@ -43320,7 +43323,7 @@ class NativeIpcService {
         }
         if (this.platformService.isElectron()) {
             try {
-                const electron = await import('electron');
+                const electron = await dynamicImport('electron');
                 const handler = (_event, data) => {
                     this.ngZone.run(() => {
                         callback(data);
@@ -43352,7 +43355,7 @@ class NativeIpcService {
     async once(channel, callback) {
         if (this.platformService.isTauri()) {
             try {
-                const tauriEvent = (await import('@tauri-apps/api/event'));
+                const tauriEvent = (await dynamicImport('@tauri-apps/api/event'));
                 await tauriEvent.once(channel, (event) => {
                     this.ngZone.run(() => {
                         callback(event.payload);
@@ -43366,7 +43369,7 @@ class NativeIpcService {
         }
         if (this.platformService.isElectron()) {
             try {
-                const electron = await import('electron');
+                const electron = await dynamicImport('electron');
                 electron.ipcRenderer.once(channel, (_event, data) => {
                     this.ngZone.run(() => {
                         callback(data);
@@ -43424,149 +43427,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
             args: [{ providedIn: 'root' }]
         }], ctorParameters: () => [] });
 
-/**
- * Dynamic import utilities that prevent bundlers from analyzing/resolving the imports at build time.
- *
- * The trick is to use a variable for the module specifier, which makes it impossible for bundlers
- * to statically analyze the import. This is intentional for optional dependencies like Electron and Tauri.
- */
-/* eslint-disable @typescript-eslint/no-explicit-any */
-/**
- * Creates a dynamic import function that bundlers cannot statically analyze.
- * This prevents build errors for optional dependencies that may not be installed.
- */
-function createDynamicImport() {
-    // Use Function constructor to create import at runtime, preventing static analysis
-    return new Function('modulePath', 'return import(modulePath)');
-}
-const dynamicImport = createDynamicImport();
-/**
- * Dynamically import the Electron module.
- * This will only work at runtime when running in an Electron context.
- * Returns null if Electron is not available.
- */
-async function importElectron() {
-    try {
-        const electron = await dynamicImport('electron');
-        return electron;
-    }
-    catch {
-        return null;
-    }
-}
-/**
- * Dynamically import Tauri dialog plugin.
- * This will only work at runtime when running in a Tauri context.
- * Returns null if Tauri dialog is not available.
- */
-async function importTauriDialog() {
-    try {
-        const dialog = await dynamicImport('@tauri-apps/plugin-dialog');
-        return dialog;
-    }
-    catch {
-        return null;
-    }
-}
-/**
- * Dynamically import Tauri notification plugin.
- * This will only work at runtime when running in a Tauri context.
- * Returns null if Tauri notification is not available.
- */
-async function importTauriNotification() {
-    try {
-        const notification = await dynamicImport('@tauri-apps/plugin-notification');
-        return notification;
-    }
-    catch {
-        return null;
-    }
-}
-/**
- * Dynamically import Tauri process plugin.
- * This will only work at runtime when running in a Tauri context.
- * Returns null if Tauri process is not available.
- */
-async function importTauriProcess() {
-    try {
-        const process = await dynamicImport('@tauri-apps/plugin-process');
-        return process;
-    }
-    catch {
-        return null;
-    }
-}
-/**
- * Dynamically import Tauri updater plugin.
- * This will only work at runtime when running in a Tauri context.
- * Returns null if Tauri updater is not available.
- */
-async function importTauriUpdater() {
-    try {
-        const updater = await dynamicImport('@tauri-apps/plugin-updater');
-        return updater;
-    }
-    catch {
-        return null;
-    }
-}
-/**
- * Dynamically import Tauri app API.
- * This will only work at runtime when running in a Tauri context.
- * Returns null if Tauri app is not available.
- */
-async function importTauriApp() {
-    try {
-        const app = await dynamicImport('@tauri-apps/api/app');
-        return app;
-    }
-    catch {
-        return null;
-    }
-}
-/**
- * Dynamically import Tauri menu API.
- * This will only work at runtime when running in a Tauri context.
- * Returns null if Tauri menu is not available.
- */
-async function importTauriMenu() {
-    try {
-        const menu = await dynamicImport('@tauri-apps/api/menu');
-        return menu;
-    }
-    catch {
-        return null;
-    }
-}
-/**
- * Dynamically import Tauri tray API.
- * This will only work at runtime when running in a Tauri context.
- * Returns null if Tauri tray is not available.
- */
-async function importTauriTray() {
-    try {
-        const tray = await dynamicImport('@tauri-apps/api/tray');
-        return tray;
-    }
-    catch {
-        return null;
-    }
-}
-/**
- * Dynamically import Tauri window API.
- * This will only work at runtime when running in a Tauri context.
- * Returns null if Tauri window is not available.
- */
-async function importTauriWindow() {
-    try {
-        const window = await dynamicImport('@tauri-apps/api/window');
-        return window;
-    }
-    catch {
-        return null;
-    }
-}
-
 const PLATFORM_TAURI$4 = 'tauri';
 const PLATFORM_ELECTRON$4 = 'electron';
 class FilePickerService {
@@ -43609,14 +43469,12 @@ class FilePickerService {
     }
     async openFileTauri(options) {
         try {
-            const dialog = await importTauriDialog();
-            if (!dialog)
-                return null;
+            const { open } = await dynamicImport('@tauri-apps/plugin-dialog');
             const filters = options.filters?.map(f => ({
                 name: f.name,
                 extensions: f.extensions,
             }));
-            const result = await dialog.open({
+            const result = await open({
                 title: options.title,
                 defaultPath: options.defaultPath,
                 filters,
@@ -43640,10 +43498,8 @@ class FilePickerService {
     }
     async openFileElectron(options) {
         try {
-            const electron = await importElectron();
-            if (!electron?.ipcRenderer)
-                return null;
-            const result = await electron.ipcRenderer.invoke('show-open-dialog', {
+            const { ipcRenderer } = await dynamicImport('electron');
+            const result = await ipcRenderer.invoke('show-open-dialog', {
                 title: options.title,
                 defaultPath: options.defaultPath,
                 properties: [
@@ -43703,14 +43559,12 @@ class FilePickerService {
     }
     async saveFileTauri(options) {
         try {
-            const dialog = await importTauriDialog();
-            if (!dialog)
-                return null;
+            const { save } = await dynamicImport('@tauri-apps/plugin-dialog');
             const filters = options.filters?.map(f => ({
                 name: f.name,
                 extensions: f.extensions,
             }));
-            const result = await dialog.save({
+            const result = await save({
                 title: options.title,
                 defaultPath: options.defaultPath,
                 filters,
@@ -43724,10 +43578,8 @@ class FilePickerService {
     }
     async saveFileElectron(options) {
         try {
-            const electron = await importElectron();
-            if (!electron?.ipcRenderer)
-                return null;
-            const result = await electron.ipcRenderer.invoke('show-save-dialog', {
+            const { ipcRenderer } = await dynamicImport('electron');
+            const result = await ipcRenderer.invoke('show-save-dialog', {
                 title: options.title,
                 defaultPath: options.defaultPath,
                 filters: options.filters?.map(f => ({
@@ -43751,10 +43603,8 @@ class FilePickerService {
     }
     async selectDirectoryTauri(options) {
         try {
-            const dialog = await importTauriDialog();
-            if (!dialog)
-                return null;
-            const result = await dialog.open({
+            const { open } = await dynamicImport('@tauri-apps/plugin-dialog');
+            const result = await open({
                 title: options.title,
                 defaultPath: options.defaultPath,
                 directory: true,
@@ -43770,10 +43620,8 @@ class FilePickerService {
     }
     async selectDirectoryElectron(options) {
         try {
-            const electron = await importElectron();
-            if (!electron?.ipcRenderer)
-                return null;
-            const result = await electron.ipcRenderer.invoke('show-open-dialog', {
+            const { ipcRenderer } = await dynamicImport('electron');
+            const result = await ipcRenderer.invoke('show-open-dialog', {
                 title: options.title,
                 defaultPath: options.defaultPath,
                 properties: ['openDirectory'],
@@ -43861,8 +43709,8 @@ class SystemTrayService {
             await tray.setIcon(icon);
         }
         else if (platform === PLATFORM_ELECTRON$3) {
-            const electron = await importElectron();
-            electron?.ipcRenderer?.send('tray-set-icon', icon);
+            const { ipcRenderer } = await dynamicImport('electron');
+            ipcRenderer.send('tray-set-icon', icon);
         }
     }
     async setTooltip(tooltip) {
@@ -43872,8 +43720,8 @@ class SystemTrayService {
             await tray.setTooltip(tooltip);
         }
         else if (platform === PLATFORM_ELECTRON$3) {
-            const electron = await importElectron();
-            electron?.ipcRenderer?.send('tray-set-tooltip', tooltip);
+            const { ipcRenderer } = await dynamicImport('electron');
+            ipcRenderer.send('tray-set-tooltip', tooltip);
         }
     }
     async setMenu(menu) {
@@ -43882,8 +43730,8 @@ class SystemTrayService {
             await this.setTauriMenu(menu);
         }
         else if (platform === PLATFORM_ELECTRON$3) {
-            const electron = await importElectron();
-            electron?.ipcRenderer?.send('tray-set-menu', this.convertMenuForElectron(menu));
+            const { ipcRenderer } = await dynamicImport('electron');
+            ipcRenderer.send('tray-set-menu', this.convertMenuForElectron(menu));
         }
     }
     async destroy() {
@@ -43892,16 +43740,14 @@ class SystemTrayService {
             this.trayInstance = null;
         }
         else if (platform === PLATFORM_ELECTRON$3) {
-            const electron = await importElectron();
-            electron?.ipcRenderer?.send('tray-destroy');
+            const { ipcRenderer } = await dynamicImport('electron');
+            ipcRenderer.send('tray-destroy');
         }
         this.isVisible.set(false);
     }
     async createTauriTray(config) {
         try {
-            const tauriTray = await importTauriTray();
-            if (!tauriTray)
-                return false;
+            const tauriTray = await dynamicImport('@tauri-apps/api/tray');
             this.trayInstance = await tauriTray.TrayIcon.new({
                 icon: config.icon,
                 tooltip: config.tooltip,
@@ -43920,10 +43766,8 @@ class SystemTrayService {
     }
     async createElectronTray(config) {
         try {
-            const electron = await importElectron();
-            if (!electron?.ipcRenderer)
-                return false;
-            await electron.ipcRenderer.invoke('tray-create', {
+            const { ipcRenderer } = await dynamicImport('electron');
+            await ipcRenderer.invoke('tray-create', {
                 icon: config.icon,
                 tooltip: config.tooltip,
                 menu: config.menu ? this.convertMenuForElectron(config.menu) : undefined,
@@ -43938,9 +43782,7 @@ class SystemTrayService {
     }
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     async buildTauriMenu(items) {
-        const tauriMenu = await importTauriMenu();
-        if (!tauriMenu)
-            return null;
+        const tauriMenu = await dynamicImport('@tauri-apps/api/menu');
         const { Menu, MenuItem, Submenu } = tauriMenu;
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
         const menuItems = [];
@@ -44027,9 +43869,7 @@ class NativeNotificationsService {
         const platform = this.platformService.platform();
         if (platform === PLATFORM_TAURI$2) {
             try {
-                const notification = await importTauriNotification();
-                if (!notification)
-                    return false;
+                const notification = await dynamicImport('@tauri-apps/plugin-notification');
                 let granted = await notification.isPermissionGranted();
                 if (!granted) {
                     const result = await notification.requestPermission();
@@ -44080,8 +43920,8 @@ class NativeNotificationsService {
         }
         else if (platform === PLATFORM_ELECTRON$2) {
             try {
-                const electron = await importElectron();
-                electron?.ipcRenderer?.send('set-badge-count', count);
+                const { ipcRenderer } = await dynamicImport('electron');
+                ipcRenderer.send('set-badge-count', count);
             }
             catch (error) {
                 console.error('Failed to set Electron badge count:', error);
@@ -44101,9 +43941,7 @@ class NativeNotificationsService {
     }
     async showTauriNotification(options) {
         try {
-            const notification = await importTauriNotification();
-            if (!notification)
-                return null;
+            const notification = await dynamicImport('@tauri-apps/plugin-notification');
             const id = `notification-${Date.now()}`;
             await notification.sendNotification({
                 title: options.title,
@@ -44119,11 +43957,9 @@ class NativeNotificationsService {
     }
     async showElectronNotification(options) {
         try {
-            const electron = await importElectron();
-            if (!electron?.ipcRenderer)
-                return null;
+            const { ipcRenderer } = await dynamicImport('electron');
             const id = `notification-${Date.now()}`;
-            await electron.ipcRenderer.invoke('show-notification', {
+            await ipcRenderer.invoke('show-notification', {
                 title: options.title,
                 body: options.body,
                 icon: options.icon,
@@ -44185,16 +44021,11 @@ class DockService {
         const platform = this.platformService.platform();
         if (platform === PLATFORM_TAURI$1) {
             try {
-                const tauriWindow = await importTauriWindow();
-                if (!tauriWindow)
-                    return;
-                const appWindow = tauriWindow.getCurrentWindow();
-                // Tauri doesn't have direct dock badge API, so we append badge to window title
-                const currentTitle = await appWindow.title();
-                // Remove any existing badge from title (e.g., "App (3)" -> "App")
-                const baseTitle = currentTitle.replace(/\s*\(\d+\)\s*$/, '');
-                const newTitle = text ? `${baseTitle} (${text})` : baseTitle;
-                await appWindow.setTitle(newTitle);
+                const { getCurrentWindow } = await dynamicImport('@tauri-apps/api/window');
+                // Tauri doesn't have direct dock badge API, use window title instead
+                const appWindow = getCurrentWindow();
+                // Badge functionality varies by platform in Tauri
+                console.warn('Dock badge not directly supported in Tauri, consider using notifications');
             }
             catch (error) {
                 console.error('Failed to set Tauri dock badge:', error);
@@ -44202,8 +44033,8 @@ class DockService {
         }
         else if (platform === PLATFORM_ELECTRON$1) {
             try {
-                const electron = await importElectron();
-                electron?.ipcRenderer?.send('set-dock-badge', text);
+                const { ipcRenderer } = await dynamicImport('electron');
+                ipcRenderer.send('set-dock-badge', text);
             }
             catch (error) {
                 console.error('Failed to set Electron dock badge:', error);
@@ -44223,10 +44054,10 @@ class DockService {
         const platform = this.platformService.platform();
         if (platform === PLATFORM_ELECTRON$1) {
             try {
-                const electron = await importElectron();
+                const { ipcRenderer } = await dynamicImport('electron');
                 // Progress should be between 0 and 1, or -1 to clear
                 const normalizedProgress = progress < 0 ? -1 : Math.min(1, Math.max(0, progress / 100));
-                electron?.ipcRenderer?.send('set-progress', normalizedProgress);
+                ipcRenderer.send('set-progress', normalizedProgress);
             }
             catch (error) {
                 console.error('Failed to set Electron progress:', error);
@@ -44247,10 +44078,8 @@ class DockService {
         const platform = this.platformService.platform();
         if (platform === PLATFORM_ELECTRON$1) {
             try {
-                const electron = await importElectron();
-                if (!electron?.ipcRenderer)
-                    return -1;
-                return await electron.ipcRenderer.invoke('dock-bounce', type);
+                const { ipcRenderer } = await dynamicImport('electron');
+                return await ipcRenderer.invoke('dock-bounce', type);
             }
             catch (error) {
                 console.error('Failed to bounce Electron dock:', error);
@@ -44266,8 +44095,8 @@ class DockService {
         const platform = this.platformService.platform();
         if (platform === PLATFORM_ELECTRON$1) {
             try {
-                const electron = await importElectron();
-                electron?.ipcRenderer?.send('cancel-dock-bounce', id);
+                const { ipcRenderer } = await dynamicImport('electron');
+                ipcRenderer.send('cancel-dock-bounce', id);
             }
             catch (error) {
                 console.error('Failed to cancel Electron dock bounce:', error);
@@ -44281,8 +44110,8 @@ class DockService {
         const platform = this.platformService.platform();
         if (platform === PLATFORM_ELECTRON$1) {
             try {
-                const electron = await importElectron();
-                electron?.ipcRenderer?.send('set-dock-menu', this.convertMenuForElectron(items));
+                const { ipcRenderer } = await dynamicImport('electron');
+                ipcRenderer.send('set-dock-menu', this.convertMenuForElectron(items));
             }
             catch (error) {
                 console.error('Failed to set Electron dock menu:', error);
@@ -44296,8 +44125,8 @@ class DockService {
         const platform = this.platformService.platform();
         if (platform === PLATFORM_ELECTRON$1) {
             try {
-                const electron = await importElectron();
-                electron?.ipcRenderer?.send('show-dock');
+                const { ipcRenderer } = await dynamicImport('electron');
+                ipcRenderer.send('show-dock');
             }
             catch (error) {
                 console.error('Failed to show Electron dock:', error);
@@ -44311,8 +44140,8 @@ class DockService {
         const platform = this.platformService.platform();
         if (platform === PLATFORM_ELECTRON$1) {
             try {
-                const electron = await importElectron();
-                electron?.ipcRenderer?.send('hide-dock');
+                const { ipcRenderer } = await dynamicImport('electron');
+                ipcRenderer.send('hide-dock');
             }
             catch (error) {
                 console.error('Failed to hide Electron dock:', error);
@@ -44326,10 +44155,8 @@ class DockService {
         const platform = this.platformService.platform();
         if (platform === PLATFORM_TAURI$1) {
             try {
-                const tauriWindow = await importTauriWindow();
-                if (!tauriWindow)
-                    return;
-                const appWindow = tauriWindow.getCurrentWindow();
+                const { getCurrentWindow } = await dynamicImport('@tauri-apps/api/window');
+                const appWindow = getCurrentWindow();
                 await appWindow.requestUserAttention(flash ? 2 : null); // 2 = Informational
             }
             catch (error) {
@@ -44338,8 +44165,8 @@ class DockService {
         }
         else if (platform === PLATFORM_ELECTRON$1) {
             try {
-                const electron = await importElectron();
-                electron?.ipcRenderer?.send('flash-frame', flash);
+                const { ipcRenderer } = await dynamicImport('electron');
+                ipcRenderer.send('flash-frame', flash);
             }
             catch (error) {
                 console.error('Failed to flash Electron frame:', error);
@@ -44474,26 +44301,24 @@ class UpdateService {
     }
     async setupElectronListeners() {
         try {
-            const electron = await importElectron();
-            if (!electron?.ipcRenderer)
-                return;
-            electron.ipcRenderer.on('update-available', (_event, info) => {
+            const { ipcRenderer } = await dynamicImport('electron');
+            ipcRenderer.on('update-available', (_event, info) => {
                 this.status.set('available');
                 this.updateInfo.set(info);
                 this.updateAvailable$.next(info);
             });
-            electron.ipcRenderer.on('update-not-available', () => {
+            ipcRenderer.on('update-not-available', () => {
                 this.status.set('not-available');
             });
-            electron.ipcRenderer.on('download-progress', (_event, progress) => {
+            ipcRenderer.on('download-progress', (_event, progress) => {
                 this.progress.set(progress);
                 this.downloadProgress$.next(progress);
             });
-            electron.ipcRenderer.on('update-downloaded', () => {
+            ipcRenderer.on('update-downloaded', () => {
                 this.status.set('downloaded');
                 this.updateDownloaded$.next();
             });
-            electron.ipcRenderer.on('update-error', (_event, error) => {
+            ipcRenderer.on('update-error', (_event, error) => {
                 this.status.set('error');
                 this.error.set(error);
                 this.updateError$.next(error);
@@ -44504,10 +44329,8 @@ class UpdateService {
         }
     }
     async checkTauriUpdates() {
-        const updater = await importTauriUpdater();
-        const app = await importTauriApp();
-        if (!updater || !app)
-            return null;
+        const updater = await dynamicImport('@tauri-apps/plugin-updater');
+        const app = await dynamicImport('@tauri-apps/api/app');
         const currentVersion = await app.getVersion();
         const update = await updater.check();
         if (update?.available) {
@@ -44526,10 +44349,8 @@ class UpdateService {
         return null;
     }
     async checkElectronUpdates() {
-        const electron = await importElectron();
-        if (!electron?.ipcRenderer)
-            return null;
-        const result = (await electron.ipcRenderer.invoke('check-for-updates'));
+        const { ipcRenderer } = await dynamicImport('electron');
+        const result = (await ipcRenderer.invoke('check-for-updates'));
         if (result?.updateAvailable) {
             const info = {
                 currentVersion: result.currentVersion || '',
@@ -44546,12 +44367,10 @@ class UpdateService {
         return null;
     }
     async downloadTauriUpdate() {
-        const updater = await importTauriUpdater();
-        if (!updater)
-            return;
+        const updater = await dynamicImport('@tauri-apps/plugin-updater');
         const update = await updater.check();
         if (update?.available) {
-            await update.downloadAndInstall(event => {
+            await update.downloadAndInstall((event) => {
                 if (event.event === 'Started') {
                     const total = event.data?.contentLength || 0;
                     this.progress.set({ percent: 0, bytesDownloaded: 0, bytesTotal: total });
@@ -44578,16 +44397,16 @@ class UpdateService {
         }
     }
     async downloadElectronUpdate() {
-        const electron = await importElectron();
-        electron?.ipcRenderer?.send('download-update');
+        const { ipcRenderer } = await dynamicImport('electron');
+        ipcRenderer.send('download-update');
     }
     async installTauriUpdate() {
-        const process = await importTauriProcess();
-        await process?.relaunch();
+        const process = await dynamicImport('@tauri-apps/plugin-process');
+        await process.relaunch();
     }
     async installElectronUpdate() {
-        const electron = await importElectron();
-        electron?.ipcRenderer?.send('quit-and-install');
+        const { ipcRenderer } = await dynamicImport('electron');
+        ipcRenderer.send('quit-and-install');
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: UpdateService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
     static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: UpdateService, providedIn: 'root' });