orbiq-neural-ui-kit 1.1.28 → 1.1.29

package/fesm2022/orbiq-neural-ui-kit.mjs

@@ -8269,222 +8269,954 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImpor
                 args: ['popoverContent']
             }] } });
 
-class NeuralBottomSheetComponent {
+class NeuralDialogComponent {
     dialog;
-    title = input('', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "title" }] : /* istanbul ignore next */ []));
+    viewContainerRef;
+    openModel = model(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "openModel" }] : /* istanbul ignore next */ []));
+    title = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "title" }] : /* istanbul ignore next */ []));
+    message = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "message" }] : /* istanbul ignore next */ []));
+    icon = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "icon" }] : /* istanbul ignore next */ []));
+    size = input('lg', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+    position = input('center', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "position" }] : /* istanbul ignore next */ []));
+    paddingTop = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "paddingTop" }] : /* istanbul ignore next */ []));
+    actions = input([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "actions" }] : /* istanbul ignore next */ []));
     dismissible = input(true, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "dismissible" }] : /* istanbul ignore next */ []));
-    openChange = new EventEmitter();
-    sheetTemplate;
+    showCloseButton = input(true, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "showCloseButton" }] : /* istanbul ignore next */ []));
+    bare = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "bare" }] : /* istanbul ignore next */ []));
+    hasTitleSlot = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hasTitleSlot" }] : /* istanbul ignore next */ []));
+    hasActionsSlot = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hasActionsSlot" }] : /* istanbul ignore next */ []));
+    hasDefaultSlot = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hasDefaultSlot" }] : /* istanbul ignore next */ []));
+    dialogTemplate;
     dialogRef = null;
-    _isOpen = false;
-    constructor(dialog) {
+    internalActionsState = {}; // track loading states
+    constructor(dialog, viewContainerRef) {
         this.dialog = dialog;
+        this.viewContainerRef = viewContainerRef;
+        effect(() => {
+            const isOpen = this.openModel();
+            if (isOpen && !this.dialogRef && this.dialogTemplate) {
+                this.openDialog();
+            }
+            else if (!isOpen && this.dialogRef) {
+                this.dialogRef.close();
+                this.dialogRef = null;
+            }
+        });
     }
-    set open(value) {
-        if (value && !this._isOpen) {
-            this.openSheet();
-        }
-        else if (!value && this._isOpen) {
-            this.closeSheet();
-        }
-    }
-    get open() {
-        return this._isOpen;
-    }
-    openSheet() {
-        if (this._isOpen)
-            return;
-        this._isOpen = true;
-        this.openChange.emit(true);
-        this.dialogRef = this.dialog.open(this.sheetTemplate, {
-            panelClass: 'neural-bottom-sheet-panel',
-            backdropClass: ['fixed', 'inset-0', 'z-50', 'bg-black-overlay-200', 'dark:bg-black-overlay-700'],
-            hasBackdrop: true,
+    openDialog() {
+        this.dialogRef = this.dialog.open(this.dialogTemplate, {
             disableClose: !this.dismissible(),
+            backdropClass: 'bg-black-overlay-200', // To match Frappe UI 
+            panelClass: ['w-full', 'h-full', 'bg-transparent', 'shadow-none'],
+            hasBackdrop: true,
+            viewContainerRef: this.viewContainerRef,
         });
         this.dialogRef.closed.subscribe(() => {
-            this._isOpen = false;
-            this.openChange.emit(false);
             this.dialogRef = null;
+            if (this.openModel()) {
+                this.openModel.set(false);
+            }
         });
     }
-    closeSheet() {
+    close() {
         if (this.dialogRef) {
             this.dialogRef.close();
         }
     }
-    ngOnDestroy() {
-        this.closeSheet();
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: NeuralBottomSheetComponent, deps: [{ token: i1$3.Dialog }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.4", type: NeuralBottomSheetComponent, isStandalone: true, selector: "neural-bottom-sheet", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, dismissible: { classPropertyName: "dismissible", publicName: "dismissible", isSignal: true, isRequired: false, transformFunction: null }, open: { classPropertyName: "open", publicName: "open", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { openChange: "openChange" }, viewQueries: [{ propertyName: "sheetTemplate", first: true, predicate: ["sheetTemplate"], descendants: true }], ngImport: i0, template: `
-    <!-- We don't render the trigger directly here if we want to use it as a wrapper, 
-         but typically bottom sheets are opened programmatically or via a button -->
-    <ng-template #sheetTemplate>
-      <div
-        class="fixed inset-x-0 bottom-0 z-50 mx-auto flex max-h-[90dvh] w-full max-w-2xl flex-col rounded-t-[36px] bg-surface-base shadow-lg bottom-sheet-content focus:outline-none after:pointer-events-none after:absolute after:inset-x-0 after:top-full after:h-screen after:bg-surface-base"
-        role="dialog"
-        [attr.aria-label]="title() || 'Bottom sheet'"
-        data-state="open"
-      >
-        <div class="shrink-0 cursor-grab touch-none select-none active:cursor-grabbing">
-          <div class="flex justify-center pb-2 pt-3">
-            <div class="h-1.5 w-10 rounded-full bg-surface-gray-3"></div>
-          </div>
-          @if (title()) {
-            <div class="px-2 pb-3 pt-2 text-center text-3xl-semibold text-ink-gray-9">
-              {{ title() }}
-            </div>
-          }
-        </div>
-        <div class="min-h-0 touch-pan-y overflow-y-auto overscroll-contain">
-          <ng-content></ng-content>
-        </div>
-      </div>
-    </ng-template>
-  `, isInline: true, styles: ["@keyframes bottom-sheet-content-in{0%{transform:translateY(100%)}to{transform:translateY(0)}}@keyframes bottom-sheet-content-out{0%{transform:translateY(0)}to{transform:translateY(100%)}}.bottom-sheet-content[data-state=open]:not([data-dragged]){animation:bottom-sheet-content-in .3s cubic-bezier(.32,.72,0,1)}.bottom-sheet-content[data-state=closed]{animation:bottom-sheet-content-out .2s ease-in}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: DialogModule }] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: NeuralBottomSheetComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'neural-bottom-sheet', standalone: true, imports: [CommonModule, DialogModule], template: `
-    <!-- We don't render the trigger directly here if we want to use it as a wrapper, 
-         but typically bottom sheets are opened programmatically or via a button -->
-    <ng-template #sheetTemplate>
-      <div
-        class="fixed inset-x-0 bottom-0 z-50 mx-auto flex max-h-[90dvh] w-full max-w-2xl flex-col rounded-t-[36px] bg-surface-base shadow-lg bottom-sheet-content focus:outline-none after:pointer-events-none after:absolute after:inset-x-0 after:top-full after:h-screen after:bg-surface-base"
-        role="dialog"
-        [attr.aria-label]="title() || 'Bottom sheet'"
-        data-state="open"
-      >
-        <div class="shrink-0 cursor-grab touch-none select-none active:cursor-grabbing">
-          <div class="flex justify-center pb-2 pt-3">
-            <div class="h-1.5 w-10 rounded-full bg-surface-gray-3"></div>
-          </div>
-          @if (title()) {
-            <div class="px-2 pb-3 pt-2 text-center text-3xl-semibold text-ink-gray-9">
-              {{ title() }}
-            </div>
-          }
-        </div>
-        <div class="min-h-0 touch-pan-y overflow-y-auto overscroll-contain">
-          <ng-content></ng-content>
-        </div>
-      </div>
-    </ng-template>
-  `, styles: ["@keyframes bottom-sheet-content-in{0%{transform:translateY(100%)}to{transform:translateY(0)}}@keyframes bottom-sheet-content-out{0%{transform:translateY(0)}to{transform:translateY(100%)}}.bottom-sheet-content[data-state=open]:not([data-dragged]){animation:bottom-sheet-content-in .3s cubic-bezier(.32,.72,0,1)}.bottom-sheet-content[data-state=closed]{animation:bottom-sheet-content-out .2s ease-in}\n"] }]
-        }], ctorParameters: () => [{ type: i1$3.Dialog }], propDecorators: { title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], dismissible: [{ type: i0.Input, args: [{ isSignal: true, alias: "dismissible", required: false }] }], openChange: [{
-                type: Output
-            }], sheetTemplate: [{
-                type: ViewChild,
-                args: ['sheetTemplate']
-            }], open: [{
-                type: Input
-            }] } });
-
-const MONTH_NAMES = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];
-const DAY_NAMES = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
-function getCalendarDates(month, year) {
-    const firstDay = new Date(year, month, 1);
-    const lastDay = new Date(year, month + 1, 0);
-    const dates = [];
-    // Fill leading days from prev month
-    for (let i = firstDay.getDay(); i > 0; i--) {
-        dates.push(new Date(year, month, 1 - i));
-    }
-    // Current month days
-    for (let d = 1; d <= lastDay.getDate(); d++) {
-        dates.push(new Date(year, month, d));
-    }
-    // Fill trailing days
-    const remaining = 42 - dates.length;
-    for (let i = 1; i <= remaining; i++) {
-        dates.push(new Date(year, month + 1, i));
-    }
-    return dates;
-}
-function isSameDay(a, b) {
-    return a.getFullYear() === b.getFullYear() && a.getMonth() === b.getMonth() && a.getDate() === b.getDate();
-}
-function dateStr(d) {
-    return d.toISOString().slice(0, 10);
-}
-class NeuralCalendarComponent {
-    events = input([], /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "events" }] : /* istanbul ignore next */ []));
-    defaultView = input('Month', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "defaultView" }] : /* istanbul ignore next */ []));
-    disableViews = input([], /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "disableViews" }] : /* istanbul ignore next */ []));
-    eventClick = new EventEmitter();
-    dateClick = new EventEmitter();
-    create = new EventEmitter();
-    update = new EventEmitter();
-    delete = new EventEmitter();
-    activeView = signal('Month', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "activeView" }] : /* istanbul ignore next */ []));
-    today = new Date();
-    currentYear = signal(this.today.getFullYear(), /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "currentYear" }] : /* istanbul ignore next */ []));
-    currentMonth = signal(this.today.getMonth(), /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "currentMonth" }] : /* istanbul ignore next */ []));
-    selectedDay = signal(new Date(), /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "selectedDay" }] : /* istanbul ignore next */ []));
-    dayNames = DAY_NAMES;
-    MONTH_NAMES = MONTH_NAMES;
-    keyHandler = this.handleKey.bind(this);
-    enabledViews = computed(() => {
-        const all = ['Month', 'Week', 'Day'];
-        return all.filter(v => !this.disableViews().includes(v));
-    }, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "enabledViews" }] : /* istanbul ignore next */ []));
-    monthDates = computed(() => getCalendarDates(this.currentMonth(), this.currentYear()), /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "monthDates" }] : /* istanbul ignore next */ []));
-    currentWeekDates = computed(() => {
-        const d = this.selectedDay();
-        const dow = d.getDay();
-        const start = new Date(d);
-        start.setDate(d.getDate() - dow);
-        return Array.from({ length: 7 }, (_, i) => {
-            const day = new Date(start);
-            day.setDate(start.getDate() + i);
-            return day;
-        });
-    }, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "currentWeekDates" }] : /* istanbul ignore next */ []));
-    currentMonthYear = computed(() => {
-        const v = this.activeView();
-        if (v === 'Day') {
-            const d = this.selectedDay();
-            return `${DAY_NAMES[d.getDay()]}, ${d.getDate()} ${MONTH_NAMES[d.getMonth()]} ${d.getFullYear()}`;
-        }
-        if (v === 'Week') {
-            const dates = this.currentWeekDates();
-            const first = dates[0];
-            const last = dates[6];
-            if (first.getMonth() === last.getMonth()) {
-                return `${MONTH_NAMES[first.getMonth()]} ${first.getFullYear()}`;
+    onContainerClick(event) {
+        const target = event.target;
+        // Close if the click is on the scroll container or the flex wrapper (not inside the dialog card)
+        if (target.classList.contains('dialog-scroll-container') || target.classList.contains('min-h-screen')) {
+            if (this.dismissible()) {
+                this.close();
             }
-            return `${MONTH_NAMES[first.getMonth()].slice(0, 3)} – ${MONTH_NAMES[last.getMonth()].slice(0, 3)} ${last.getFullYear()}`;
         }
-        return `${MONTH_NAMES[this.currentMonth()]} ${this.currentYear()}`;
-    }, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "currentMonthYear" }] : /* istanbul ignore next */ []));
-    ngOnInit() {
-        this.activeView.set(this.defaultView());
-        window.addEventListener('keydown', this.keyHandler);
     }
     ngOnDestroy() {
-        window.removeEventListener('keydown', this.keyHandler);
+        if (this.dialogRef) {
+            this.dialogRef.close();
+        }
     }
-    handleKey(e) {
-        const target = e.target;
-        if (target?.tagName === 'INPUT' || target?.tagName === 'TEXTAREA' || target?.isContentEditable)
-            return;
-        if (e.key.toLowerCase() === 'm')
-            this.activeView.set('Month');
-        if (e.key.toLowerCase() === 'w')
+    sizeClass = computed(() => {
+        const map = {
+            xs: 'max-w-xs',
+            sm: 'max-w-sm',
+            md: 'max-w-md',
+            lg: 'max-w-lg',
+            xl: 'max-w-xl',
+            '2xl': 'max-w-2xl',
+            '3xl': 'max-w-3xl',
+            '4xl': 'max-w-4xl',
+            '5xl': 'max-w-5xl',
+            '6xl': 'max-w-6xl',
+            '7xl': 'max-w-7xl',
+        };
+        return map[this.size()] || 'max-w-lg';
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "sizeClass" }] : /* istanbul ignore next */ []));
+    iconName = computed(() => {
+        const raw = this.icon();
+        if (!raw)
+            return '';
+        return typeof raw === 'string' ? raw : raw.name;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "iconName" }] : /* istanbul ignore next */ []));
+    iconTheme = computed(() => {
+        const raw = this.icon();
+        if (typeof raw === 'object' && raw.theme)
+            return raw.theme;
+        return null;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "iconTheme" }] : /* istanbul ignore next */ []));
+    dialogIconBgClasses = computed(() => {
+        const theme = this.iconTheme();
+        if (!theme)
+            return 'bg-surface-gray-2';
+        const map = {
+            amber: 'bg-surface-amber-2',
+            blue: 'bg-surface-blue-2',
+            red: 'bg-surface-red-2',
+            green: 'bg-surface-green-2',
+        };
+        return map[theme] || 'bg-surface-gray-2';
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "dialogIconBgClasses" }] : /* istanbul ignore next */ []));
+    dialogIconClasses = computed(() => {
+        const theme = this.iconTheme();
+        if (!theme)
+            return 'text-ink-gray-5';
+        const map = {
+            amber: 'text-ink-amber-5',
+            blue: 'text-ink-blue-5',
+            red: 'text-ink-red-7',
+            green: 'text-ink-green-5',
+        };
+        return map[theme] || 'text-ink-gray-5';
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "dialogIconClasses" }] : /* istanbul ignore next */ []));
+    dialogPositionClasses = computed(() => {
+        if (this.paddingTop())
+            return '';
+        return this.position() === 'top' ? 'pt-[20vh]' : 'justify-center';
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "dialogPositionClasses" }] : /* istanbul ignore next */ []));
+    dialogPositionStyles = computed(() => {
+        const pt = this.paddingTop();
+        return pt ? { paddingTop: pt } : {};
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "dialogPositionStyles" }] : /* istanbul ignore next */ []));
+    showHeader = computed(() => {
+        if (this.bare())
+            return false;
+        if (this.hasTitleSlot())
+            return true;
+        if (this.title())
+            return true;
+        return false;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "showHeader" }] : /* istanbul ignore next */ []));
+    reactiveActions = computed(() => {
+        if (this.bare())
+            return [];
+        return this.actions().map(action => {
+            return {
+                ...action,
+                loading: this.internalActionsState[action.label] || false
+            };
+        });
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "reactiveActions" }] : /* istanbul ignore next */ []));
+    isSingleActionFullWidth = computed(() => {
+        const smallSizes = ['xs', 'sm', 'md'];
+        return this.actions().length === 1 && smallSizes.includes(this.size());
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isSingleActionFullWidth" }] : /* istanbul ignore next */ []));
+    async onActionClick(action) {
+        if (!action.onClick) {
+            this.close();
+            return;
+        }
+        this.internalActionsState[action.label] = true;
+        // trigger change detection by recreating the reference since it's a signal reading internalState
+        // Or we could just use a separate mechanism. Let's mutate and trust Angular template binding if we update state.
+        // In signal components, we might need a signal for internalActionsState
+        // For now, let's just await
+        try {
+            await action.onClick({ close: () => this.close() });
+        }
+        finally {
+            this.internalActionsState[action.label] = false;
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: NeuralDialogComponent, deps: [{ token: i1$3.Dialog }, { token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.4", type: NeuralDialogComponent, isStandalone: true, selector: "neural-dialog", inputs: { openModel: { classPropertyName: "openModel", publicName: "openModel", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, message: { classPropertyName: "message", publicName: "message", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, paddingTop: { classPropertyName: "paddingTop", publicName: "paddingTop", isSignal: true, isRequired: false, transformFunction: null }, actions: { classPropertyName: "actions", publicName: "actions", isSignal: true, isRequired: false, transformFunction: null }, dismissible: { classPropertyName: "dismissible", publicName: "dismissible", isSignal: true, isRequired: false, transformFunction: null }, showCloseButton: { classPropertyName: "showCloseButton", publicName: "showCloseButton", isSignal: true, isRequired: false, transformFunction: null }, bare: { classPropertyName: "bare", publicName: "bare", isSignal: true, isRequired: false, transformFunction: null }, hasTitleSlot: { classPropertyName: "hasTitleSlot", publicName: "hasTitleSlot", isSignal: true, isRequired: false, transformFunction: null }, hasActionsSlot: { classPropertyName: "hasActionsSlot", publicName: "hasActionsSlot", isSignal: true, isRequired: false, transformFunction: null }, hasDefaultSlot: { classPropertyName: "hasDefaultSlot", publicName: "hasDefaultSlot", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { openModel: "openModelChange" }, viewQueries: [{ propertyName: "dialogTemplate", first: true, predicate: ["dialogTemplate"], descendants: true }], ngImport: i0, template: `
+    <ng-template #dialogTemplate>
+      <div 
+        class="fixed inset-0 z-50 overflow-y-auto dialog-scroll-container"
+        (click)="onContainerClick($event)"
+      >
+        <div
+          class="flex min-h-screen flex-col items-center px-4 py-4 text-center"
+          [class]="dialogPositionClasses()"
+          [style]="dialogPositionStyles()"
+        >
+          <div
+            class="my-8 inline-block w-full transform overflow-hidden rounded-7 bg-surface-elevation-1 text-start align-middle shadow-xl dialog-content focus-visible:outline-none"
+            [class]="sizeClass()"
+          >
+            @if (bare()) {
+              <ng-content></ng-content>
+            } @else {
+              <div class="bg-surface-elevation-1 px-4 pb-6 pt-5 sm:px-6">
+                <div class="flex">
+                  <div class="w-full flex-1">
+                    @if (showHeader()) {
+                      <div class="mb-6 flex items-center justify-between">
+                        <div class="flex items-center space-x-2 flex-1">
+                          @if (icon()) {
+                            <div
+                              class="flex h-7 w-7 flex-shrink-0 items-center justify-center rounded-full"
+                              [class]="dialogIconBgClasses()"
+                            >
+                              <span [class]="iconName() + ' size-4 ' + dialogIconClasses()" aria-hidden="true"></span>
+                            </div>
+                          }
+                          <header class="flex-1">
+                            @if (hasTitleSlot()) {
+                              <ng-content select="[title]"></ng-content>
+                            } @else if (title()) {
+                              <h3 class="text-2xl-semibold leading-6 text-ink-gray-8">
+                                {{ title() }}
+                              </h3>
+                            }
+                          </header>
+                        </div>
+                        @if (showCloseButton()) {
+                          <neural-button variant="ghost" label="Close" (click)="close()">
+                            <span icon class="lucide-x size-4 text-ink-gray-9"></span>
+                          </neural-button>
+                        }
+                      </div>
+                    }
+
+                    @if (hasDefaultSlot()) {
+                      <ng-content></ng-content>
+                    } @else if (message()) {
+                      <p class="text-p-base text-ink-gray-7">
+                        {{ message() }}
+                      </p>
+                    }
+                  </div>
+                </div>
+              </div>
+
+              @if (reactiveActions().length || hasActionsSlot()) {
+                <div class="px-4 pb-7 pt-4 sm:px-6">
+                  @if (hasActionsSlot()) {
+                    <ng-content select="[actions]"></ng-content>
+                  } @else {
+                    <div [class]="isSingleActionFullWidth() ? '' : 'flex justify-end gap-2'">
+                      @for (action of reactiveActions(); track action.label) {
+                        <neural-button
+                          class="w-full sm:w-auto"
+                          [disabled]="action.disabled || false"
+                          [loading]="action.loading || false"
+                          [variant]="action.variant || 'solid'"
+                          [theme]="action.theme || 'gray'"
+                          (click)="onActionClick(action)"
+                        >
+                          {{ action.label }}
+                          @if (action.icon) {
+                            <span icon [class]="action.icon + ' size-4'"></span>
+                          }
+                        </neural-button>
+                      }
+                    </div>
+                  }
+                </div>
+              }
+            }
+            
+            @if (showCloseButton() && !showHeader() && !bare()) {
+              <neural-button
+                class="absolute right-4 top-4 z-10"
+                variant="ghost"
+                label="Close"
+                (click)="close()"
+              >
+                <span icon class="lucide-x size-4 text-ink-gray-9"></span>
+              </neural-button>
+            }
+          </div>
+        </div>
+      </div>
+    </ng-template>
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: DialogModule }, { kind: "component", type: NeuralButtonComponent, selector: "neural-button", inputs: ["variant", "theme", "size", "type", "disabled", "loading", "icon", "iconLeft", "iconRight", "iconOnly"], outputs: ["clicked"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: NeuralDialogComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'neural-dialog',
+                    standalone: true,
+                    imports: [CommonModule, DialogModule, NeuralButtonComponent],
+                    template: `
+    <ng-template #dialogTemplate>
+      <div 
+        class="fixed inset-0 z-50 overflow-y-auto dialog-scroll-container"
+        (click)="onContainerClick($event)"
+      >
+        <div
+          class="flex min-h-screen flex-col items-center px-4 py-4 text-center"
+          [class]="dialogPositionClasses()"
+          [style]="dialogPositionStyles()"
+        >
+          <div
+            class="my-8 inline-block w-full transform overflow-hidden rounded-7 bg-surface-elevation-1 text-start align-middle shadow-xl dialog-content focus-visible:outline-none"
+            [class]="sizeClass()"
+          >
+            @if (bare()) {
+              <ng-content></ng-content>
+            } @else {
+              <div class="bg-surface-elevation-1 px-4 pb-6 pt-5 sm:px-6">
+                <div class="flex">
+                  <div class="w-full flex-1">
+                    @if (showHeader()) {
+                      <div class="mb-6 flex items-center justify-between">
+                        <div class="flex items-center space-x-2 flex-1">
+                          @if (icon()) {
+                            <div
+                              class="flex h-7 w-7 flex-shrink-0 items-center justify-center rounded-full"
+                              [class]="dialogIconBgClasses()"
+                            >
+                              <span [class]="iconName() + ' size-4 ' + dialogIconClasses()" aria-hidden="true"></span>
+                            </div>
+                          }
+                          <header class="flex-1">
+                            @if (hasTitleSlot()) {
+                              <ng-content select="[title]"></ng-content>
+                            } @else if (title()) {
+                              <h3 class="text-2xl-semibold leading-6 text-ink-gray-8">
+                                {{ title() }}
+                              </h3>
+                            }
+                          </header>
+                        </div>
+                        @if (showCloseButton()) {
+                          <neural-button variant="ghost" label="Close" (click)="close()">
+                            <span icon class="lucide-x size-4 text-ink-gray-9"></span>
+                          </neural-button>
+                        }
+                      </div>
+                    }
+
+                    @if (hasDefaultSlot()) {
+                      <ng-content></ng-content>
+                    } @else if (message()) {
+                      <p class="text-p-base text-ink-gray-7">
+                        {{ message() }}
+                      </p>
+                    }
+                  </div>
+                </div>
+              </div>
+
+              @if (reactiveActions().length || hasActionsSlot()) {
+                <div class="px-4 pb-7 pt-4 sm:px-6">
+                  @if (hasActionsSlot()) {
+                    <ng-content select="[actions]"></ng-content>
+                  } @else {
+                    <div [class]="isSingleActionFullWidth() ? '' : 'flex justify-end gap-2'">
+                      @for (action of reactiveActions(); track action.label) {
+                        <neural-button
+                          class="w-full sm:w-auto"
+                          [disabled]="action.disabled || false"
+                          [loading]="action.loading || false"
+                          [variant]="action.variant || 'solid'"
+                          [theme]="action.theme || 'gray'"
+                          (click)="onActionClick(action)"
+                        >
+                          {{ action.label }}
+                          @if (action.icon) {
+                            <span icon [class]="action.icon + ' size-4'"></span>
+                          }
+                        </neural-button>
+                      }
+                    </div>
+                  }
+                </div>
+              }
+            }
+            
+            @if (showCloseButton() && !showHeader() && !bare()) {
+              <neural-button
+                class="absolute right-4 top-4 z-10"
+                variant="ghost"
+                label="Close"
+                (click)="close()"
+              >
+                <span icon class="lucide-x size-4 text-ink-gray-9"></span>
+              </neural-button>
+            }
+          </div>
+        </div>
+      </div>
+    </ng-template>
+  `
+                }]
+        }], ctorParameters: () => [{ type: i1$3.Dialog }, { type: i0.ViewContainerRef }], propDecorators: { openModel: [{ type: i0.Input, args: [{ isSignal: true, alias: "openModel", required: false }] }, { type: i0.Output, args: ["openModelChange"] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], message: [{ type: i0.Input, args: [{ isSignal: true, alias: "message", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], position: [{ type: i0.Input, args: [{ isSignal: true, alias: "position", required: false }] }], paddingTop: [{ type: i0.Input, args: [{ isSignal: true, alias: "paddingTop", required: false }] }], actions: [{ type: i0.Input, args: [{ isSignal: true, alias: "actions", required: false }] }], dismissible: [{ type: i0.Input, args: [{ isSignal: true, alias: "dismissible", required: false }] }], showCloseButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "showCloseButton", required: false }] }], bare: [{ type: i0.Input, args: [{ isSignal: true, alias: "bare", required: false }] }], hasTitleSlot: [{ type: i0.Input, args: [{ isSignal: true, alias: "hasTitleSlot", required: false }] }], hasActionsSlot: [{ type: i0.Input, args: [{ isSignal: true, alias: "hasActionsSlot", required: false }] }], hasDefaultSlot: [{ type: i0.Input, args: [{ isSignal: true, alias: "hasDefaultSlot", required: false }] }], dialogTemplate: [{
+                type: ViewChild,
+                args: ['dialogTemplate']
+            }] } });
+
+class NeuralAwesomeBarComponent {
+    searchInput;
+    // Two-way binding for dialog visibility
+    openModel = model(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "openModel" }] : /* istanbul ignore next */ []));
+    // Search query
+    query = model('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "query" }] : /* istanbul ignore next */ []));
+    // Filters
+    filters = input([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "filters" }] : /* istanbul ignore next */ []));
+    activeFilter = model('all', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "activeFilter" }] : /* istanbul ignore next */ []));
+    // Show empty state manually if the parent determines there are no results or it's pristine
+    isEmpty = input(true, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isEmpty" }] : /* istanbul ignore next */ []));
+    // Outputs
+    onSearch = output();
+    constructor() {
+        effect(() => {
+            // Auto focus input when dialog opens
+            if (this.openModel() && this.searchInput) {
+                setTimeout(() => {
+                    this.searchInput.nativeElement.focus();
+                }, 50); // slight delay to allow dialog animation
+            }
+        });
+    }
+    ngAfterViewInit() {
+        if (this.openModel() && this.searchInput) {
+            setTimeout(() => {
+                this.searchInput.nativeElement.focus();
+            }, 50);
+        }
+    }
+    // Computed properties for filters
+    pinnedFilters = computed(() => {
+        return this.filters().filter(f => f.pinned);
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "pinnedFilters" }] : /* istanbul ignore next */ []));
+    unpinnedFilters = computed(() => {
+        return this.filters().filter(f => !f.pinned);
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "unpinnedFilters" }] : /* istanbul ignore next */ []));
+    moreFiltersOptions = computed(() => {
+        return this.unpinnedFilters().map(filter => ({
+            label: filter.label,
+            onClick: () => this.selectFilter(filter.id)
+        }));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "moreFiltersOptions" }] : /* istanbul ignore next */ []));
+    isUnpinnedFilterActive = computed(() => {
+        const unpinned = this.unpinnedFilters();
+        return unpinned.some(f => f.id === this.activeFilter());
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isUnpinnedFilterActive" }] : /* istanbul ignore next */ []));
+    showEmptyState = computed(() => {
+        return this.isEmpty() || this.query().trim() === '';
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "showEmptyState" }] : /* istanbul ignore next */ []));
+    // Handlers
+    onQueryChange(value) {
+        this.query.set(value);
+        this.onSearch.emit(value);
+    }
+    clearQuery() {
+        this.query.set('');
+        this.onSearch.emit('');
+        this.searchInput.nativeElement.focus();
+    }
+    selectFilter(filterId) {
+        this.activeFilter.set(filterId);
+        this.searchInput.nativeElement.focus();
+    }
+    handleKeydown(event) {
+        if (event.key === 'Escape') {
+            this.openModel.set(false);
+        }
+        // Up, Down, Enter logic is expected to be handled externally since we project results,
+        // or we can emit events so the parent can handle it.
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: NeuralAwesomeBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.4", type: NeuralAwesomeBarComponent, isStandalone: true, selector: "neural-awesome-bar", inputs: { openModel: { classPropertyName: "openModel", publicName: "openModel", isSignal: true, isRequired: false, transformFunction: null }, query: { classPropertyName: "query", publicName: "query", isSignal: true, isRequired: false, transformFunction: null }, filters: { classPropertyName: "filters", publicName: "filters", isSignal: true, isRequired: false, transformFunction: null }, activeFilter: { classPropertyName: "activeFilter", publicName: "activeFilter", isSignal: true, isRequired: false, transformFunction: null }, isEmpty: { classPropertyName: "isEmpty", publicName: "isEmpty", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { openModel: "openModelChange", query: "queryChange", activeFilter: "activeFilterChange", onSearch: "onSearch" }, viewQueries: [{ propertyName: "searchInput", first: true, predicate: ["searchInput"], descendants: true }], ngImport: i0, template: `
+    <neural-dialog [(openModel)]="openModel" [bare]="true" size="2xl" position="top" paddingTop="10vh">
+      <div class="flex flex-col bg-surface-base rounded-xl shadow-2xl overflow-hidden ring-1 ring-outline-gray-2 w-full max-h-[85vh]">
+        
+        <!-- Search Input Header -->
+        <div class="flex items-center px-4 py-3 border-b border-outline-gray-2 bg-surface-base">
+          <i class="lucide-search size-5 text-ink-gray-5 mr-3"></i>
+          <input 
+            #searchInput
+            type="text"
+            class="flex-1 bg-transparent border-none outline-none text-lg text-ink-gray-9 placeholder:text-ink-gray-4 focus:ring-0 p-0"
+            placeholder="Buscar por cualquier cosa..."
+            [ngModel]="query()"
+            (ngModelChange)="onQueryChange($event)"
+            (keydown)="handleKeydown($event)"
+          />
+          @if (query()) {
+            <button 
+              class="flex items-center justify-center size-6 rounded-md hover:bg-surface-gray-2 transition-colors ml-2"
+              (click)="clearQuery()"
+            >
+              <i class="lucide-x size-4 text-ink-gray-5"></i>
+            </button>
+          }
+        </div>
+
+        <!-- Filters (Chips) -->
+        @if (filters().length > 0) {
+          <div class="flex items-center gap-2 px-4 py-2 border-b border-outline-gray-2 bg-surface-gray-1 overflow-x-auto no-scrollbar">
+            <!-- Pinned Filters -->
+            @for (filter of pinnedFilters(); track filter.id) {
+              <button 
+                class="px-3 py-1 rounded-full text-xs font-medium whitespace-nowrap transition-colors"
+                [class.bg-surface-gray-9]="activeFilter() === filter.id"
+                [class.text-white]="activeFilter() === filter.id"
+                [class.bg-surface-base]="activeFilter() !== filter.id"
+                [class.text-ink-gray-7]="activeFilter() !== filter.id"
+                [class.border]="activeFilter() !== filter.id"
+                [class.border-outline-gray-3]="activeFilter() !== filter.id"
+                [class.hover:bg-surface-gray-2]="activeFilter() !== filter.id"
+                (click)="selectFilter(filter.id)"
+              >
+                {{ filter.label }}
+              </button>
+            }
+
+            <!-- Unpinned Filters (Dropdown) -->
+            @if (unpinnedFilters().length > 0) {
+              <div class="ml-auto">
+                <neural-dropdown 
+                  [options]="moreFiltersOptions()" 
+                  [hasTriggerSlot]="true"
+                  align="end"
+                >
+                  <button 
+                    trigger 
+                    class="flex items-center gap-1.5 px-3 py-1 rounded-full text-xs font-medium whitespace-nowrap transition-colors border border-outline-gray-3 bg-surface-base text-ink-gray-7 hover:bg-surface-gray-2"
+                    [class.bg-surface-gray-9]="isUnpinnedFilterActive()"
+                    [class.text-white]="isUnpinnedFilterActive()"
+                  >
+                    <i class="lucide-menu size-3.5"></i>
+                    Más
+                  </button>
+                </neural-dropdown>
+              </div>
+            }
+          </div>
+        }
+
+        <!-- Content Area -->
+        <div class="flex-1 overflow-y-auto">
+          @if (showEmptyState()) {
+            <!-- Empty State -->
+            <div class="flex flex-col items-center justify-center py-16 px-4 text-center">
+              <div class="size-16 rounded-full bg-surface-gray-2 flex items-center justify-center mb-4">
+                <i class="lucide-search size-8 text-ink-gray-4"></i>
+              </div>
+              <h3 class="text-base font-semibold text-ink-gray-9 mb-1">Buscar por cualquier cosa</h3>
+              <p class="text-sm text-ink-gray-5 max-w-sm">
+                Escribe para buscar a través de módulos, clientes, productos y configuraciones.
+              </p>
+            </div>
+          } @else {
+            <!-- Results Projection -->
+            <div class="p-2">
+              <ng-content select="[results]"></ng-content>
+            </div>
+          }
+        </div>
+
+        <!-- Footer Shortcuts -->
+        <div class="flex items-center justify-between px-4 py-2 bg-surface-gray-1 border-t border-outline-gray-2 text-xs text-ink-gray-5">
+          <div class="flex items-center gap-4">
+            <span class="flex items-center gap-1.5">
+              <kbd class="px-1.5 py-0.5 rounded border border-outline-gray-3 bg-surface-base font-sans text-[10px] text-ink-gray-7 shadow-sm">↑</kbd>
+              <kbd class="px-1.5 py-0.5 rounded border border-outline-gray-3 bg-surface-base font-sans text-[10px] text-ink-gray-7 shadow-sm">↓</kbd>
+              Navegar
+            </span>
+            <span class="flex items-center gap-1.5">
+              <kbd class="px-1.5 py-0.5 rounded border border-outline-gray-3 bg-surface-base font-sans text-[10px] text-ink-gray-7 shadow-sm">↵</kbd>
+              Seleccionar
+            </span>
+          </div>
+          <div class="flex items-center gap-1.5 hidden sm:flex">
+            <kbd class="px-1.5 py-0.5 rounded border border-outline-gray-3 bg-surface-base font-sans text-[10px] text-ink-gray-7 shadow-sm">esc</kbd>
+            Cerrar
+          </div>
+        </div>
+
+      </div>
+    </neural-dialog>
+  `, isInline: true, styles: [".no-scrollbar::-webkit-scrollbar{display:none}.no-scrollbar{-ms-overflow-style:none;scrollbar-width:none}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: NeuralDialogComponent, selector: "neural-dialog", inputs: ["openModel", "title", "message", "icon", "size", "position", "paddingTop", "actions", "dismissible", "showCloseButton", "bare", "hasTitleSlot", "hasActionsSlot", "hasDefaultSlot"], outputs: ["openModelChange"] }, { kind: "component", type: NeuralDropdownComponent, selector: "neural-dropdown", inputs: ["options", "side", "align", "offset", "buttonLabel", "hasTriggerSlot"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: NeuralAwesomeBarComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'neural-awesome-bar', standalone: true, imports: [
+                        CommonModule,
+                        FormsModule,
+                        NeuralDialogComponent,
+                        NeuralDropdownComponent
+                    ], template: `
+    <neural-dialog [(openModel)]="openModel" [bare]="true" size="2xl" position="top" paddingTop="10vh">
+      <div class="flex flex-col bg-surface-base rounded-xl shadow-2xl overflow-hidden ring-1 ring-outline-gray-2 w-full max-h-[85vh]">
+        
+        <!-- Search Input Header -->
+        <div class="flex items-center px-4 py-3 border-b border-outline-gray-2 bg-surface-base">
+          <i class="lucide-search size-5 text-ink-gray-5 mr-3"></i>
+          <input 
+            #searchInput
+            type="text"
+            class="flex-1 bg-transparent border-none outline-none text-lg text-ink-gray-9 placeholder:text-ink-gray-4 focus:ring-0 p-0"
+            placeholder="Buscar por cualquier cosa..."
+            [ngModel]="query()"
+            (ngModelChange)="onQueryChange($event)"
+            (keydown)="handleKeydown($event)"
+          />
+          @if (query()) {
+            <button 
+              class="flex items-center justify-center size-6 rounded-md hover:bg-surface-gray-2 transition-colors ml-2"
+              (click)="clearQuery()"
+            >
+              <i class="lucide-x size-4 text-ink-gray-5"></i>
+            </button>
+          }
+        </div>
+
+        <!-- Filters (Chips) -->
+        @if (filters().length > 0) {
+          <div class="flex items-center gap-2 px-4 py-2 border-b border-outline-gray-2 bg-surface-gray-1 overflow-x-auto no-scrollbar">
+            <!-- Pinned Filters -->
+            @for (filter of pinnedFilters(); track filter.id) {
+              <button 
+                class="px-3 py-1 rounded-full text-xs font-medium whitespace-nowrap transition-colors"
+                [class.bg-surface-gray-9]="activeFilter() === filter.id"
+                [class.text-white]="activeFilter() === filter.id"
+                [class.bg-surface-base]="activeFilter() !== filter.id"
+                [class.text-ink-gray-7]="activeFilter() !== filter.id"
+                [class.border]="activeFilter() !== filter.id"
+                [class.border-outline-gray-3]="activeFilter() !== filter.id"
+                [class.hover:bg-surface-gray-2]="activeFilter() !== filter.id"
+                (click)="selectFilter(filter.id)"
+              >
+                {{ filter.label }}
+              </button>
+            }
+
+            <!-- Unpinned Filters (Dropdown) -->
+            @if (unpinnedFilters().length > 0) {
+              <div class="ml-auto">
+                <neural-dropdown 
+                  [options]="moreFiltersOptions()" 
+                  [hasTriggerSlot]="true"
+                  align="end"
+                >
+                  <button 
+                    trigger 
+                    class="flex items-center gap-1.5 px-3 py-1 rounded-full text-xs font-medium whitespace-nowrap transition-colors border border-outline-gray-3 bg-surface-base text-ink-gray-7 hover:bg-surface-gray-2"
+                    [class.bg-surface-gray-9]="isUnpinnedFilterActive()"
+                    [class.text-white]="isUnpinnedFilterActive()"
+                  >
+                    <i class="lucide-menu size-3.5"></i>
+                    Más
+                  </button>
+                </neural-dropdown>
+              </div>
+            }
+          </div>
+        }
+
+        <!-- Content Area -->
+        <div class="flex-1 overflow-y-auto">
+          @if (showEmptyState()) {
+            <!-- Empty State -->
+            <div class="flex flex-col items-center justify-center py-16 px-4 text-center">
+              <div class="size-16 rounded-full bg-surface-gray-2 flex items-center justify-center mb-4">
+                <i class="lucide-search size-8 text-ink-gray-4"></i>
+              </div>
+              <h3 class="text-base font-semibold text-ink-gray-9 mb-1">Buscar por cualquier cosa</h3>
+              <p class="text-sm text-ink-gray-5 max-w-sm">
+                Escribe para buscar a través de módulos, clientes, productos y configuraciones.
+              </p>
+            </div>
+          } @else {
+            <!-- Results Projection -->
+            <div class="p-2">
+              <ng-content select="[results]"></ng-content>
+            </div>
+          }
+        </div>
+
+        <!-- Footer Shortcuts -->
+        <div class="flex items-center justify-between px-4 py-2 bg-surface-gray-1 border-t border-outline-gray-2 text-xs text-ink-gray-5">
+          <div class="flex items-center gap-4">
+            <span class="flex items-center gap-1.5">
+              <kbd class="px-1.5 py-0.5 rounded border border-outline-gray-3 bg-surface-base font-sans text-[10px] text-ink-gray-7 shadow-sm">↑</kbd>
+              <kbd class="px-1.5 py-0.5 rounded border border-outline-gray-3 bg-surface-base font-sans text-[10px] text-ink-gray-7 shadow-sm">↓</kbd>
+              Navegar
+            </span>
+            <span class="flex items-center gap-1.5">
+              <kbd class="px-1.5 py-0.5 rounded border border-outline-gray-3 bg-surface-base font-sans text-[10px] text-ink-gray-7 shadow-sm">↵</kbd>
+              Seleccionar
+            </span>
+          </div>
+          <div class="flex items-center gap-1.5 hidden sm:flex">
+            <kbd class="px-1.5 py-0.5 rounded border border-outline-gray-3 bg-surface-base font-sans text-[10px] text-ink-gray-7 shadow-sm">esc</kbd>
+            Cerrar
+          </div>
+        </div>
+
+      </div>
+    </neural-dialog>
+  `, styles: [".no-scrollbar::-webkit-scrollbar{display:none}.no-scrollbar{-ms-overflow-style:none;scrollbar-width:none}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { searchInput: [{
+                type: ViewChild,
+                args: ['searchInput']
+            }], openModel: [{ type: i0.Input, args: [{ isSignal: true, alias: "openModel", required: false }] }, { type: i0.Output, args: ["openModelChange"] }], query: [{ type: i0.Input, args: [{ isSignal: true, alias: "query", required: false }] }, { type: i0.Output, args: ["queryChange"] }], filters: [{ type: i0.Input, args: [{ isSignal: true, alias: "filters", required: false }] }], activeFilter: [{ type: i0.Input, args: [{ isSignal: true, alias: "activeFilter", required: false }] }, { type: i0.Output, args: ["activeFilterChange"] }], isEmpty: [{ type: i0.Input, args: [{ isSignal: true, alias: "isEmpty", required: false }] }], onSearch: [{ type: i0.Output, args: ["onSearch"] }] } });
+
+class NeuralBottomSheetComponent {
+    dialog;
+    title = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "title" }] : /* istanbul ignore next */ []));
+    dismissible = input(true, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "dismissible" }] : /* istanbul ignore next */ []));
+    openChange = new EventEmitter();
+    sheetTemplate;
+    dialogRef = null;
+    _isOpen = false;
+    constructor(dialog) {
+        this.dialog = dialog;
+    }
+    set open(value) {
+        if (value && !this._isOpen) {
+            this.openSheet();
+        }
+        else if (!value && this._isOpen) {
+            this.closeSheet();
+        }
+    }
+    get open() {
+        return this._isOpen;
+    }
+    openSheet() {
+        if (this._isOpen)
+            return;
+        this._isOpen = true;
+        this.openChange.emit(true);
+        this.dialogRef = this.dialog.open(this.sheetTemplate, {
+            panelClass: 'neural-bottom-sheet-panel',
+            backdropClass: ['fixed', 'inset-0', 'z-50', 'bg-black-overlay-200', 'dark:bg-black-overlay-700'],
+            hasBackdrop: true,
+            disableClose: !this.dismissible(),
+        });
+        this.dialogRef.closed.subscribe(() => {
+            this._isOpen = false;
+            this.openChange.emit(false);
+            this.dialogRef = null;
+        });
+    }
+    closeSheet() {
+        if (this.dialogRef) {
+            this.dialogRef.close();
+        }
+    }
+    ngOnDestroy() {
+        this.closeSheet();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: NeuralBottomSheetComponent, deps: [{ token: i1$3.Dialog }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.4", type: NeuralBottomSheetComponent, isStandalone: true, selector: "neural-bottom-sheet", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, dismissible: { classPropertyName: "dismissible", publicName: "dismissible", isSignal: true, isRequired: false, transformFunction: null }, open: { classPropertyName: "open", publicName: "open", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { openChange: "openChange" }, viewQueries: [{ propertyName: "sheetTemplate", first: true, predicate: ["sheetTemplate"], descendants: true }], ngImport: i0, template: `
+    <!-- We don't render the trigger directly here if we want to use it as a wrapper, 
+         but typically bottom sheets are opened programmatically or via a button -->
+    <ng-template #sheetTemplate>
+      <div
+        class="fixed inset-x-0 bottom-0 z-50 mx-auto flex max-h-[90dvh] w-full max-w-2xl flex-col rounded-t-[36px] bg-surface-base shadow-lg bottom-sheet-content focus:outline-none after:pointer-events-none after:absolute after:inset-x-0 after:top-full after:h-screen after:bg-surface-base"
+        role="dialog"
+        [attr.aria-label]="title() || 'Bottom sheet'"
+        data-state="open"
+      >
+        <div class="shrink-0 cursor-grab touch-none select-none active:cursor-grabbing">
+          <div class="flex justify-center pb-2 pt-3">
+            <div class="h-1.5 w-10 rounded-full bg-surface-gray-3"></div>
+          </div>
+          @if (title()) {
+            <div class="px-2 pb-3 pt-2 text-center text-3xl-semibold text-ink-gray-9">
+              {{ title() }}
+            </div>
+          }
+        </div>
+        <div class="min-h-0 touch-pan-y overflow-y-auto overscroll-contain">
+          <ng-content></ng-content>
+        </div>
+      </div>
+    </ng-template>
+  `, isInline: true, styles: ["@keyframes bottom-sheet-content-in{0%{transform:translateY(100%)}to{transform:translateY(0)}}@keyframes bottom-sheet-content-out{0%{transform:translateY(0)}to{transform:translateY(100%)}}.bottom-sheet-content[data-state=open]:not([data-dragged]){animation:bottom-sheet-content-in .3s cubic-bezier(.32,.72,0,1)}.bottom-sheet-content[data-state=closed]{animation:bottom-sheet-content-out .2s ease-in}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: DialogModule }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: NeuralBottomSheetComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'neural-bottom-sheet', standalone: true, imports: [CommonModule, DialogModule], template: `
+    <!-- We don't render the trigger directly here if we want to use it as a wrapper, 
+         but typically bottom sheets are opened programmatically or via a button -->
+    <ng-template #sheetTemplate>
+      <div
+        class="fixed inset-x-0 bottom-0 z-50 mx-auto flex max-h-[90dvh] w-full max-w-2xl flex-col rounded-t-[36px] bg-surface-base shadow-lg bottom-sheet-content focus:outline-none after:pointer-events-none after:absolute after:inset-x-0 after:top-full after:h-screen after:bg-surface-base"
+        role="dialog"
+        [attr.aria-label]="title() || 'Bottom sheet'"
+        data-state="open"
+      >
+        <div class="shrink-0 cursor-grab touch-none select-none active:cursor-grabbing">
+          <div class="flex justify-center pb-2 pt-3">
+            <div class="h-1.5 w-10 rounded-full bg-surface-gray-3"></div>
+          </div>
+          @if (title()) {
+            <div class="px-2 pb-3 pt-2 text-center text-3xl-semibold text-ink-gray-9">
+              {{ title() }}
+            </div>
+          }
+        </div>
+        <div class="min-h-0 touch-pan-y overflow-y-auto overscroll-contain">
+          <ng-content></ng-content>
+        </div>
+      </div>
+    </ng-template>
+  `, styles: ["@keyframes bottom-sheet-content-in{0%{transform:translateY(100%)}to{transform:translateY(0)}}@keyframes bottom-sheet-content-out{0%{transform:translateY(0)}to{transform:translateY(100%)}}.bottom-sheet-content[data-state=open]:not([data-dragged]){animation:bottom-sheet-content-in .3s cubic-bezier(.32,.72,0,1)}.bottom-sheet-content[data-state=closed]{animation:bottom-sheet-content-out .2s ease-in}\n"] }]
+        }], ctorParameters: () => [{ type: i1$3.Dialog }], propDecorators: { title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], dismissible: [{ type: i0.Input, args: [{ isSignal: true, alias: "dismissible", required: false }] }], openChange: [{
+                type: Output
+            }], sheetTemplate: [{
+                type: ViewChild,
+                args: ['sheetTemplate']
+            }], open: [{
+                type: Input
+            }] } });
+
+const MONTH_NAMES = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];
+const DAY_NAMES = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
+function getCalendarDates(month, year) {
+    const firstDay = new Date(year, month, 1);
+    const lastDay = new Date(year, month + 1, 0);
+    const dates = [];
+    // Fill leading days from prev month
+    for (let i = firstDay.getDay(); i > 0; i--) {
+        dates.push(new Date(year, month, 1 - i));
+    }
+    // Current month days
+    for (let d = 1; d <= lastDay.getDate(); d++) {
+        dates.push(new Date(year, month, d));
+    }
+    // Fill trailing days
+    const remaining = 42 - dates.length;
+    for (let i = 1; i <= remaining; i++) {
+        dates.push(new Date(year, month + 1, i));
+    }
+    return dates;
+}
+function isSameDay(a, b) {
+    return a.getFullYear() === b.getFullYear() && a.getMonth() === b.getMonth() && a.getDate() === b.getDate();
+}
+function dateStr(d) {
+    return d.toISOString().slice(0, 10);
+}
+class NeuralCalendarComponent {
+    events = input([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "events" }] : /* istanbul ignore next */ []));
+    defaultView = input('Month', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "defaultView" }] : /* istanbul ignore next */ []));
+    disableViews = input([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "disableViews" }] : /* istanbul ignore next */ []));
+    eventClick = new EventEmitter();
+    dateClick = new EventEmitter();
+    create = new EventEmitter();
+    update = new EventEmitter();
+    delete = new EventEmitter();
+    activeView = signal('Month', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "activeView" }] : /* istanbul ignore next */ []));
+    today = new Date();
+    currentYear = signal(this.today.getFullYear(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "currentYear" }] : /* istanbul ignore next */ []));
+    currentMonth = signal(this.today.getMonth(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "currentMonth" }] : /* istanbul ignore next */ []));
+    selectedDay = signal(new Date(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "selectedDay" }] : /* istanbul ignore next */ []));
+    dayNames = DAY_NAMES;
+    MONTH_NAMES = MONTH_NAMES;
+    keyHandler = this.handleKey.bind(this);
+    enabledViews = computed(() => {
+        const all = ['Month', 'Week', 'Day'];
+        return all.filter(v => !this.disableViews().includes(v));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "enabledViews" }] : /* istanbul ignore next */ []));
+    monthDates = computed(() => getCalendarDates(this.currentMonth(), this.currentYear()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "monthDates" }] : /* istanbul ignore next */ []));
+    currentWeekDates = computed(() => {
+        const d = this.selectedDay();
+        const dow = d.getDay();
+        const start = new Date(d);
+        start.setDate(d.getDate() - dow);
+        return Array.from({ length: 7 }, (_, i) => {
+            const day = new Date(start);
+            day.setDate(start.getDate() + i);
+            return day;
+        });
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "currentWeekDates" }] : /* istanbul ignore next */ []));
+    currentMonthYear = computed(() => {
+        const v = this.activeView();
+        if (v === 'Day') {
+            const d = this.selectedDay();
+            return `${DAY_NAMES[d.getDay()]}, ${d.getDate()} ${MONTH_NAMES[d.getMonth()]} ${d.getFullYear()}`;
+        }
+        if (v === 'Week') {
+            const dates = this.currentWeekDates();
+            const first = dates[0];
+            const last = dates[6];
+            if (first.getMonth() === last.getMonth()) {
+                return `${MONTH_NAMES[first.getMonth()]} ${first.getFullYear()}`;
+            }
+            return `${MONTH_NAMES[first.getMonth()].slice(0, 3)} – ${MONTH_NAMES[last.getMonth()].slice(0, 3)} ${last.getFullYear()}`;
+        }
+        return `${MONTH_NAMES[this.currentMonth()]} ${this.currentYear()}`;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "currentMonthYear" }] : /* istanbul ignore next */ []));
+    ngOnInit() {
+        this.activeView.set(this.defaultView());
+        window.addEventListener('keydown', this.keyHandler);
+    }
+    ngOnDestroy() {
+        window.removeEventListener('keydown', this.keyHandler);
+    }
+    handleKey(e) {
+        const target = e.target;
+        if (target?.tagName === 'INPUT' || target?.tagName === 'TEXTAREA' || target?.isContentEditable)
+            return;
+        if (e.key.toLowerCase() === 'm')
+            this.activeView.set('Month');
+        if (e.key.toLowerCase() === 'w')
             this.activeView.set('Week');
         if (e.key.toLowerCase() === 'd')
             this.activeView.set('Day');
@@ -10360,607 +11092,194 @@ class NeuralCodeEditorComponent {
         this.languageCompartment = new Compartment();
         this.disabledCompartment = new Compartment();
         this.variantCompartment = new Compartment();
-        this.sizeCompartment = new Compartment();
-        this.placeholderCompartment = new Compartment();
-        const theme = buildBaseTheme(this.cmView);
-        const highlight = await buildSyntaxHighlight(this.cmState);
-        const updateListener = EditorView.updateListener.of((update) => {
-            if (update.docChanged && !this.syncingFromProp) {
-                this.modelValue.set(update.state.doc.toString());
-            }
-            if (update.docChanged || update.geometryChanged) {
-                this.measureOverflow();
-                this.syncGutterShadow();
-            }
-        });
-        const blurHandler = EditorView.domEventHandlers({
-            blur: () => {
-                if (this.view)
-                    this.change.emit(this.view.state.doc.toString());
-            },
-        });
-        const escapeHandler = EditorView.domEventHandlers({
-            keydown: (e, v) => {
-                if (e.key === 'Escape') {
-                    v.contentDOM.blur();
-                    return true;
-                }
-                return false;
-            },
-        });
-        if (!this.editorRoot?.nativeElement)
-            return;
-        this.view = new EditorView({
-            doc: this.modelValue() ?? '',
-            extensions: [
-                basicSetup,
-                this.cmView.keymap.of([indentWithTab]),
-                escapeHandler,
-                this.languageCompartment.of(await this.buildLanguageExtension(this.language())),
-                this.disabledCompartment.of(this.buildDisabled(!!this.disabled())),
-                updateListener,
-                blurHandler,
-                theme,
-                this.variantCompartment.of(this.buildVariant(this.variant(), this.disabled())),
-                this.sizeCompartment.of(this.buildSize(this.size())),
-                this.placeholderCompartment.of(this.buildPlaceholder(this.placeholder())),
-                highlight,
-            ],
-            parent: this.editorRoot.nativeElement,
-        });
-        this.measureOverflow();
-        this.view.scrollDOM.addEventListener('scroll', this.syncGutterShadow, { passive: true });
-        this.syncGutterShadow();
-        if (typeof ResizeObserver !== 'undefined') {
-            this.overflowObserver = new ResizeObserver(() => {
-                this.measureOverflow();
-                this.syncGutterShadow();
-            });
-            this.overflowObserver.observe(this.view.scrollDOM);
-        }
-    }
-    ngOnDestroy() {
-        this.overflowObserver?.disconnect();
-        if (this.view) {
-            this.view.scrollDOM.removeEventListener('scroll', this.syncGutterShadow);
-            this.view.destroy();
-            this.view = null;
-        }
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: NeuralCodeEditorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.4", type: NeuralCodeEditorComponent, isStandalone: true, selector: "neural-code-editor", inputs: { modelValue: { classPropertyName: "modelValue", publicName: "modelValue", isSignal: true, isRequired: false, transformFunction: null }, language: { classPropertyName: "language", publicName: "language", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", 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 }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { modelValue: "modelValueChange", overflow: "overflow", change: "change" }, viewQueries: [{ propertyName: "editorRoot", first: true, predicate: ["editorRoot"], descendants: true }], ngImport: i0, template: `
-    <neural-labeling-wrapper [enabled]="hasLabeling()">
-      @if (label()) {
-        <neural-input-label [id]="labelIdValue" [label]="label()" [required]="required()">
-          <ng-content select="[label]"></ng-content>
-        </neural-input-label>
-      }
-
-      <div
-        #editorRoot
-        class="code-editor"
-        data-slot="control"
-      ></div>
-
-      @if (description()) {
-        <neural-input-description [id]="descriptionIdValue" [description]="description()">
-          <ng-content select="[description]"></ng-content>
-        </neural-input-description>
-      }
-
-      @if (errorLines().length) {
-        <neural-input-error [id]="errorIdValue" [lines]="errorLines()"></neural-input-error>
-      }
-    </neural-labeling-wrapper>
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: NeuralInputLabelComponent, selector: "neural-input-label", inputs: ["id", "forId", "label", "required", "color", "disabled", "hasDefaultSlot"] }, { kind: "component", type: NeuralInputDescriptionComponent, selector: "neural-input-description", inputs: ["id", "description", "disabled", "hasDefaultSlot"] }, { kind: "component", type: NeuralInputErrorComponent, selector: "neural-input-error", inputs: ["id", "lines"] }, { kind: "component", type: NeuralLabelingWrapperComponent, selector: "neural-labeling-wrapper", inputs: ["enabled"] }] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: NeuralCodeEditorComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'neural-code-editor',
-                    standalone: true,
-                    imports: [
-                        CommonModule,
-                        NeuralInputLabelComponent,
-                        NeuralInputDescriptionComponent,
-                        NeuralInputErrorComponent,
-                        NeuralLabelingWrapperComponent
-                    ],
-                    template: `
-    <neural-labeling-wrapper [enabled]="hasLabeling()">
-      @if (label()) {
-        <neural-input-label [id]="labelIdValue" [label]="label()" [required]="required()">
-          <ng-content select="[label]"></ng-content>
-        </neural-input-label>
-      }
-
-      <div
-        #editorRoot
-        class="code-editor"
-        data-slot="control"
-      ></div>
-
-      @if (description()) {
-        <neural-input-description [id]="descriptionIdValue" [description]="description()">
-          <ng-content select="[description]"></ng-content>
-        </neural-input-description>
-      }
-
-      @if (errorLines().length) {
-        <neural-input-error [id]="errorIdValue" [lines]="errorLines()"></neural-input-error>
-      }
-    </neural-labeling-wrapper>
-  `
-                }]
-        }], ctorParameters: () => [], propDecorators: { modelValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "modelValue", required: false }] }, { type: i0.Output, args: ["modelValueChange"] }], language: [{ type: i0.Input, args: [{ isSignal: true, alias: "language", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], description: [{ type: i0.Input, args: [{ isSignal: true, alias: "description", required: false }] }], error: [{ type: i0.Input, args: [{ isSignal: true, alias: "error", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], overflow: [{
-                type: Output
-            }], change: [{
-                type: Output
-            }], editorRoot: [{
-                type: ViewChild,
-                args: ['editorRoot']
-            }] } });
-
-class NeuralCodePreviewComponent {
-    modelValue = input('', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "modelValue" }] : /* istanbul ignore next */ []));
-    language = input('plain', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "language" }] : /* istanbul ignore next */ []));
-    isPreviewLanguage = computed(() => this.language() === 'markdown' || this.language() === 'html', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "isPreviewLanguage" }] : /* istanbul ignore next */ []));
-    sanitized = computed(() => {
-        const src = this.modelValue() ?? '';
-        if (!src)
-            return '';
-        if (this.language() === 'markdown') {
-            return DOMPurify.sanitize(marked.parse(src));
-        }
-        if (this.language() === 'html') {
-            return DOMPurify.sanitize(src);
-        }
-        return '';
-    }, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "sanitized" }] : /* istanbul ignore next */ []));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: NeuralCodePreviewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.4", type: NeuralCodePreviewComponent, isStandalone: true, selector: "neural-code-preview", inputs: { modelValue: { classPropertyName: "modelValue", publicName: "modelValue", isSignal: true, isRequired: false, transformFunction: null }, language: { classPropertyName: "language", publicName: "language", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
-    @if (isPreviewLanguage()) {
-      <div
-        class="prose prose-sm max-w-none text-ink-gray-8"
-        [innerHTML]="sanitized()"
-      ></div>
-    }
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: NeuralCodePreviewComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'neural-code-preview',
-                    standalone: true,
-                    imports: [CommonModule],
-                    template: `
-    @if (isPreviewLanguage()) {
-      <div
-        class="prose prose-sm max-w-none text-ink-gray-8"
-        [innerHTML]="sanitized()"
-      ></div>
-    }
-  `
-                }]
-        }], propDecorators: { modelValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "modelValue", required: false }] }], language: [{ type: i0.Input, args: [{ isSignal: true, alias: "language", required: false }] }] } });
-
-class NeuralDialogComponent {
-    dialog;
-    viewContainerRef;
-    openModel = model(false, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "openModel" }] : /* istanbul ignore next */ []));
-    title = input(/* @ts-ignore */
-    ...(ngDevMode ? [undefined, { debugName: "title" }] : /* istanbul ignore next */ []));
-    message = input(/* @ts-ignore */
-    ...(ngDevMode ? [undefined, { debugName: "message" }] : /* istanbul ignore next */ []));
-    icon = input(/* @ts-ignore */
-    ...(ngDevMode ? [undefined, { debugName: "icon" }] : /* istanbul ignore next */ []));
-    size = input('lg', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
-    position = input('center', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "position" }] : /* istanbul ignore next */ []));
-    paddingTop = input(/* @ts-ignore */
-    ...(ngDevMode ? [undefined, { debugName: "paddingTop" }] : /* istanbul ignore next */ []));
-    actions = input([], /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "actions" }] : /* istanbul ignore next */ []));
-    dismissible = input(true, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "dismissible" }] : /* istanbul ignore next */ []));
-    showCloseButton = input(true, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "showCloseButton" }] : /* istanbul ignore next */ []));
-    bare = input(false, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "bare" }] : /* istanbul ignore next */ []));
-    hasTitleSlot = input(false, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "hasTitleSlot" }] : /* istanbul ignore next */ []));
-    hasActionsSlot = input(false, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "hasActionsSlot" }] : /* istanbul ignore next */ []));
-    hasDefaultSlot = input(false, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "hasDefaultSlot" }] : /* istanbul ignore next */ []));
-    dialogTemplate;
-    dialogRef = null;
-    internalActionsState = {}; // track loading states
-    constructor(dialog, viewContainerRef) {
-        this.dialog = dialog;
-        this.viewContainerRef = viewContainerRef;
-        effect(() => {
-            const isOpen = this.openModel();
-            if (isOpen && !this.dialogRef && this.dialogTemplate) {
-                this.openDialog();
+        this.sizeCompartment = new Compartment();
+        this.placeholderCompartment = new Compartment();
+        const theme = buildBaseTheme(this.cmView);
+        const highlight = await buildSyntaxHighlight(this.cmState);
+        const updateListener = EditorView.updateListener.of((update) => {
+            if (update.docChanged && !this.syncingFromProp) {
+                this.modelValue.set(update.state.doc.toString());
             }
-            else if (!isOpen && this.dialogRef) {
-                this.dialogRef.close();
-                this.dialogRef = null;
+            if (update.docChanged || update.geometryChanged) {
+                this.measureOverflow();
+                this.syncGutterShadow();
             }
         });
-    }
-    openDialog() {
-        this.dialogRef = this.dialog.open(this.dialogTemplate, {
-            disableClose: !this.dismissible(),
-            backdropClass: 'bg-black-overlay-200', // To match Frappe UI 
-            panelClass: ['w-full', 'h-full', 'bg-transparent', 'shadow-none'],
-            hasBackdrop: true,
-            viewContainerRef: this.viewContainerRef,
+        const blurHandler = EditorView.domEventHandlers({
+            blur: () => {
+                if (this.view)
+                    this.change.emit(this.view.state.doc.toString());
+            },
         });
-        this.dialogRef.closed.subscribe(() => {
-            this.dialogRef = null;
-            if (this.openModel()) {
-                this.openModel.set(false);
-            }
+        const escapeHandler = EditorView.domEventHandlers({
+            keydown: (e, v) => {
+                if (e.key === 'Escape') {
+                    v.contentDOM.blur();
+                    return true;
+                }
+                return false;
+            },
         });
-    }
-    close() {
-        if (this.dialogRef) {
-            this.dialogRef.close();
-        }
-    }
-    onContainerClick(event) {
-        const target = event.target;
-        // Close if the click is on the scroll container or the flex wrapper (not inside the dialog card)
-        if (target.classList.contains('dialog-scroll-container') || target.classList.contains('min-h-screen')) {
-            if (this.dismissible()) {
-                this.close();
-            }
+        if (!this.editorRoot?.nativeElement)
+            return;
+        this.view = new EditorView({
+            doc: this.modelValue() ?? '',
+            extensions: [
+                basicSetup,
+                this.cmView.keymap.of([indentWithTab]),
+                escapeHandler,
+                this.languageCompartment.of(await this.buildLanguageExtension(this.language())),
+                this.disabledCompartment.of(this.buildDisabled(!!this.disabled())),
+                updateListener,
+                blurHandler,
+                theme,
+                this.variantCompartment.of(this.buildVariant(this.variant(), this.disabled())),
+                this.sizeCompartment.of(this.buildSize(this.size())),
+                this.placeholderCompartment.of(this.buildPlaceholder(this.placeholder())),
+                highlight,
+            ],
+            parent: this.editorRoot.nativeElement,
+        });
+        this.measureOverflow();
+        this.view.scrollDOM.addEventListener('scroll', this.syncGutterShadow, { passive: true });
+        this.syncGutterShadow();
+        if (typeof ResizeObserver !== 'undefined') {
+            this.overflowObserver = new ResizeObserver(() => {
+                this.measureOverflow();
+                this.syncGutterShadow();
+            });
+            this.overflowObserver.observe(this.view.scrollDOM);
         }
     }
     ngOnDestroy() {
-        if (this.dialogRef) {
-            this.dialogRef.close();
-        }
-    }
-    sizeClass = computed(() => {
-        const map = {
-            xs: 'max-w-xs',
-            sm: 'max-w-sm',
-            md: 'max-w-md',
-            lg: 'max-w-lg',
-            xl: 'max-w-xl',
-            '2xl': 'max-w-2xl',
-            '3xl': 'max-w-3xl',
-            '4xl': 'max-w-4xl',
-            '5xl': 'max-w-5xl',
-            '6xl': 'max-w-6xl',
-            '7xl': 'max-w-7xl',
-        };
-        return map[this.size()] || 'max-w-lg';
-    }, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "sizeClass" }] : /* istanbul ignore next */ []));
-    iconName = computed(() => {
-        const raw = this.icon();
-        if (!raw)
-            return '';
-        return typeof raw === 'string' ? raw : raw.name;
-    }, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "iconName" }] : /* istanbul ignore next */ []));
-    iconTheme = computed(() => {
-        const raw = this.icon();
-        if (typeof raw === 'object' && raw.theme)
-            return raw.theme;
-        return null;
-    }, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "iconTheme" }] : /* istanbul ignore next */ []));
-    dialogIconBgClasses = computed(() => {
-        const theme = this.iconTheme();
-        if (!theme)
-            return 'bg-surface-gray-2';
-        const map = {
-            amber: 'bg-surface-amber-2',
-            blue: 'bg-surface-blue-2',
-            red: 'bg-surface-red-2',
-            green: 'bg-surface-green-2',
-        };
-        return map[theme] || 'bg-surface-gray-2';
-    }, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "dialogIconBgClasses" }] : /* istanbul ignore next */ []));
-    dialogIconClasses = computed(() => {
-        const theme = this.iconTheme();
-        if (!theme)
-            return 'text-ink-gray-5';
-        const map = {
-            amber: 'text-ink-amber-5',
-            blue: 'text-ink-blue-5',
-            red: 'text-ink-red-7',
-            green: 'text-ink-green-5',
-        };
-        return map[theme] || 'text-ink-gray-5';
-    }, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "dialogIconClasses" }] : /* istanbul ignore next */ []));
-    dialogPositionClasses = computed(() => {
-        if (this.paddingTop())
-            return '';
-        return this.position() === 'top' ? 'pt-[20vh]' : 'justify-center';
-    }, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "dialogPositionClasses" }] : /* istanbul ignore next */ []));
-    dialogPositionStyles = computed(() => {
-        const pt = this.paddingTop();
-        return pt ? { paddingTop: pt } : {};
-    }, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "dialogPositionStyles" }] : /* istanbul ignore next */ []));
-    showHeader = computed(() => {
-        if (this.bare())
-            return false;
-        if (this.hasTitleSlot())
-            return true;
-        if (this.title())
-            return true;
-        return false;
-    }, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "showHeader" }] : /* istanbul ignore next */ []));
-    reactiveActions = computed(() => {
-        if (this.bare())
-            return [];
-        return this.actions().map(action => {
-            return {
-                ...action,
-                loading: this.internalActionsState[action.label] || false
-            };
-        });
-    }, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "reactiveActions" }] : /* istanbul ignore next */ []));
-    isSingleActionFullWidth = computed(() => {
-        const smallSizes = ['xs', 'sm', 'md'];
-        return this.actions().length === 1 && smallSizes.includes(this.size());
-    }, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "isSingleActionFullWidth" }] : /* istanbul ignore next */ []));
-    async onActionClick(action) {
-        if (!action.onClick) {
-            this.close();
-            return;
-        }
-        this.internalActionsState[action.label] = true;
-        // trigger change detection by recreating the reference since it's a signal reading internalState
-        // Or we could just use a separate mechanism. Let's mutate and trust Angular template binding if we update state.
-        // In signal components, we might need a signal for internalActionsState
-        // For now, let's just await
-        try {
-            await action.onClick({ close: () => this.close() });
-        }
-        finally {
-            this.internalActionsState[action.label] = false;
+        this.overflowObserver?.disconnect();
+        if (this.view) {
+            this.view.scrollDOM.removeEventListener('scroll', this.syncGutterShadow);
+            this.view.destroy();
+            this.view = null;
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: NeuralDialogComponent, deps: [{ token: i1$3.Dialog }, { token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.4", type: NeuralDialogComponent, isStandalone: true, selector: "neural-dialog", inputs: { openModel: { classPropertyName: "openModel", publicName: "openModel", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, message: { classPropertyName: "message", publicName: "message", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, paddingTop: { classPropertyName: "paddingTop", publicName: "paddingTop", isSignal: true, isRequired: false, transformFunction: null }, actions: { classPropertyName: "actions", publicName: "actions", isSignal: true, isRequired: false, transformFunction: null }, dismissible: { classPropertyName: "dismissible", publicName: "dismissible", isSignal: true, isRequired: false, transformFunction: null }, showCloseButton: { classPropertyName: "showCloseButton", publicName: "showCloseButton", isSignal: true, isRequired: false, transformFunction: null }, bare: { classPropertyName: "bare", publicName: "bare", isSignal: true, isRequired: false, transformFunction: null }, hasTitleSlot: { classPropertyName: "hasTitleSlot", publicName: "hasTitleSlot", isSignal: true, isRequired: false, transformFunction: null }, hasActionsSlot: { classPropertyName: "hasActionsSlot", publicName: "hasActionsSlot", isSignal: true, isRequired: false, transformFunction: null }, hasDefaultSlot: { classPropertyName: "hasDefaultSlot", publicName: "hasDefaultSlot", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { openModel: "openModelChange" }, viewQueries: [{ propertyName: "dialogTemplate", first: true, predicate: ["dialogTemplate"], descendants: true }], ngImport: i0, template: `
-    <ng-template #dialogTemplate>
-      <div 
-        class="fixed inset-0 z-50 overflow-y-auto dialog-scroll-container"
-        (click)="onContainerClick($event)"
-      >
-        <div
-          class="flex min-h-screen flex-col items-center px-4 py-4 text-center"
-          [class]="dialogPositionClasses()"
-          [style]="dialogPositionStyles()"
-        >
-          <div
-            class="my-8 inline-block w-full transform overflow-hidden rounded-7 bg-surface-elevation-1 text-start align-middle shadow-xl dialog-content focus-visible:outline-none"
-            [class]="sizeClass()"
-          >
-            @if (bare()) {
-              <ng-content></ng-content>
-            } @else {
-              <div class="bg-surface-elevation-1 px-4 pb-6 pt-5 sm:px-6">
-                <div class="flex">
-                  <div class="w-full flex-1">
-                    @if (showHeader()) {
-                      <div class="mb-6 flex items-center justify-between">
-                        <div class="flex items-center space-x-2 flex-1">
-                          @if (icon()) {
-                            <div
-                              class="flex h-7 w-7 flex-shrink-0 items-center justify-center rounded-full"
-                              [class]="dialogIconBgClasses()"
-                            >
-                              <span [class]="iconName() + ' size-4 ' + dialogIconClasses()" aria-hidden="true"></span>
-                            </div>
-                          }
-                          <header class="flex-1">
-                            @if (hasTitleSlot()) {
-                              <ng-content select="[title]"></ng-content>
-                            } @else if (title()) {
-                              <h3 class="text-2xl-semibold leading-6 text-ink-gray-8">
-                                {{ title() }}
-                              </h3>
-                            }
-                          </header>
-                        </div>
-                        @if (showCloseButton()) {
-                          <neural-button variant="ghost" label="Close" (click)="close()">
-                            <span icon class="lucide-x size-4 text-ink-gray-9"></span>
-                          </neural-button>
-                        }
-                      </div>
-                    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: NeuralCodeEditorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.4", type: NeuralCodeEditorComponent, isStandalone: true, selector: "neural-code-editor", inputs: { modelValue: { classPropertyName: "modelValue", publicName: "modelValue", isSignal: true, isRequired: false, transformFunction: null }, language: { classPropertyName: "language", publicName: "language", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", 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 }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { modelValue: "modelValueChange", overflow: "overflow", change: "change" }, viewQueries: [{ propertyName: "editorRoot", first: true, predicate: ["editorRoot"], descendants: true }], ngImport: i0, template: `
+    <neural-labeling-wrapper [enabled]="hasLabeling()">
+      @if (label()) {
+        <neural-input-label [id]="labelIdValue" [label]="label()" [required]="required()">
+          <ng-content select="[label]"></ng-content>
+        </neural-input-label>
+      }
 
-                    @if (hasDefaultSlot()) {
-                      <ng-content></ng-content>
-                    } @else if (message()) {
-                      <p class="text-p-base text-ink-gray-7">
-                        {{ message() }}
-                      </p>
-                    }
-                  </div>
-                </div>
-              </div>
+      <div
+        #editorRoot
+        class="code-editor"
+        data-slot="control"
+      ></div>
 
-              @if (reactiveActions().length || hasActionsSlot()) {
-                <div class="px-4 pb-7 pt-4 sm:px-6">
-                  @if (hasActionsSlot()) {
-                    <ng-content select="[actions]"></ng-content>
-                  } @else {
-                    <div [class]="isSingleActionFullWidth() ? '' : 'flex justify-end gap-2'">
-                      @for (action of reactiveActions(); track action.label) {
-                        <neural-button
-                          class="w-full sm:w-auto"
-                          [disabled]="action.disabled || false"
-                          [loading]="action.loading || false"
-                          [variant]="action.variant || 'solid'"
-                          [theme]="action.theme || 'gray'"
-                          (click)="onActionClick(action)"
-                        >
-                          {{ action.label }}
-                          @if (action.icon) {
-                            <span icon [class]="action.icon + ' size-4'"></span>
-                          }
-                        </neural-button>
-                      }
-                    </div>
-                  }
-                </div>
-              }
-            }
-            
-            @if (showCloseButton() && !showHeader() && !bare()) {
-              <neural-button
-                class="absolute right-4 top-4 z-10"
-                variant="ghost"
-                label="Close"
-                (click)="close()"
-              >
-                <span icon class="lucide-x size-4 text-ink-gray-9"></span>
-              </neural-button>
-            }
-          </div>
-        </div>
-      </div>
-    </ng-template>
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: DialogModule }, { kind: "component", type: NeuralButtonComponent, selector: "neural-button", inputs: ["variant", "theme", "size", "type", "disabled", "loading", "icon", "iconLeft", "iconRight", "iconOnly"], outputs: ["clicked"] }] });
+      @if (description()) {
+        <neural-input-description [id]="descriptionIdValue" [description]="description()">
+          <ng-content select="[description]"></ng-content>
+        </neural-input-description>
+      }
+
+      @if (errorLines().length) {
+        <neural-input-error [id]="errorIdValue" [lines]="errorLines()"></neural-input-error>
+      }
+    </neural-labeling-wrapper>
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: NeuralInputLabelComponent, selector: "neural-input-label", inputs: ["id", "forId", "label", "required", "color", "disabled", "hasDefaultSlot"] }, { kind: "component", type: NeuralInputDescriptionComponent, selector: "neural-input-description", inputs: ["id", "description", "disabled", "hasDefaultSlot"] }, { kind: "component", type: NeuralInputErrorComponent, selector: "neural-input-error", inputs: ["id", "lines"] }, { kind: "component", type: NeuralLabelingWrapperComponent, selector: "neural-labeling-wrapper", inputs: ["enabled"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: NeuralDialogComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: NeuralCodeEditorComponent, decorators: [{
             type: Component,
             args: [{
-                    selector: 'neural-dialog',
+                    selector: 'neural-code-editor',
                     standalone: true,
-                    imports: [CommonModule, DialogModule, NeuralButtonComponent],
+                    imports: [
+                        CommonModule,
+                        NeuralInputLabelComponent,
+                        NeuralInputDescriptionComponent,
+                        NeuralInputErrorComponent,
+                        NeuralLabelingWrapperComponent
+                    ],
                     template: `
-    <ng-template #dialogTemplate>
-      <div 
-        class="fixed inset-0 z-50 overflow-y-auto dialog-scroll-container"
-        (click)="onContainerClick($event)"
-      >
-        <div
-          class="flex min-h-screen flex-col items-center px-4 py-4 text-center"
-          [class]="dialogPositionClasses()"
-          [style]="dialogPositionStyles()"
-        >
-          <div
-            class="my-8 inline-block w-full transform overflow-hidden rounded-7 bg-surface-elevation-1 text-start align-middle shadow-xl dialog-content focus-visible:outline-none"
-            [class]="sizeClass()"
-          >
-            @if (bare()) {
-              <ng-content></ng-content>
-            } @else {
-              <div class="bg-surface-elevation-1 px-4 pb-6 pt-5 sm:px-6">
-                <div class="flex">
-                  <div class="w-full flex-1">
-                    @if (showHeader()) {
-                      <div class="mb-6 flex items-center justify-between">
-                        <div class="flex items-center space-x-2 flex-1">
-                          @if (icon()) {
-                            <div
-                              class="flex h-7 w-7 flex-shrink-0 items-center justify-center rounded-full"
-                              [class]="dialogIconBgClasses()"
-                            >
-                              <span [class]="iconName() + ' size-4 ' + dialogIconClasses()" aria-hidden="true"></span>
-                            </div>
-                          }
-                          <header class="flex-1">
-                            @if (hasTitleSlot()) {
-                              <ng-content select="[title]"></ng-content>
-                            } @else if (title()) {
-                              <h3 class="text-2xl-semibold leading-6 text-ink-gray-8">
-                                {{ title() }}
-                              </h3>
-                            }
-                          </header>
-                        </div>
-                        @if (showCloseButton()) {
-                          <neural-button variant="ghost" label="Close" (click)="close()">
-                            <span icon class="lucide-x size-4 text-ink-gray-9"></span>
-                          </neural-button>
-                        }
-                      </div>
-                    }
+    <neural-labeling-wrapper [enabled]="hasLabeling()">
+      @if (label()) {
+        <neural-input-label [id]="labelIdValue" [label]="label()" [required]="required()">
+          <ng-content select="[label]"></ng-content>
+        </neural-input-label>
+      }
 
-                    @if (hasDefaultSlot()) {
-                      <ng-content></ng-content>
-                    } @else if (message()) {
-                      <p class="text-p-base text-ink-gray-7">
-                        {{ message() }}
-                      </p>
-                    }
-                  </div>
-                </div>
-              </div>
+      <div
+        #editorRoot
+        class="code-editor"
+        data-slot="control"
+      ></div>
 
-              @if (reactiveActions().length || hasActionsSlot()) {
-                <div class="px-4 pb-7 pt-4 sm:px-6">
-                  @if (hasActionsSlot()) {
-                    <ng-content select="[actions]"></ng-content>
-                  } @else {
-                    <div [class]="isSingleActionFullWidth() ? '' : 'flex justify-end gap-2'">
-                      @for (action of reactiveActions(); track action.label) {
-                        <neural-button
-                          class="w-full sm:w-auto"
-                          [disabled]="action.disabled || false"
-                          [loading]="action.loading || false"
-                          [variant]="action.variant || 'solid'"
-                          [theme]="action.theme || 'gray'"
-                          (click)="onActionClick(action)"
-                        >
-                          {{ action.label }}
-                          @if (action.icon) {
-                            <span icon [class]="action.icon + ' size-4'"></span>
-                          }
-                        </neural-button>
-                      }
-                    </div>
-                  }
-                </div>
-              }
-            }
-            
-            @if (showCloseButton() && !showHeader() && !bare()) {
-              <neural-button
-                class="absolute right-4 top-4 z-10"
-                variant="ghost"
-                label="Close"
-                (click)="close()"
-              >
-                <span icon class="lucide-x size-4 text-ink-gray-9"></span>
-              </neural-button>
-            }
-          </div>
-        </div>
-      </div>
-    </ng-template>
+      @if (description()) {
+        <neural-input-description [id]="descriptionIdValue" [description]="description()">
+          <ng-content select="[description]"></ng-content>
+        </neural-input-description>
+      }
+
+      @if (errorLines().length) {
+        <neural-input-error [id]="errorIdValue" [lines]="errorLines()"></neural-input-error>
+      }
+    </neural-labeling-wrapper>
   `
                 }]
-        }], ctorParameters: () => [{ type: i1$3.Dialog }, { type: i0.ViewContainerRef }], propDecorators: { openModel: [{ type: i0.Input, args: [{ isSignal: true, alias: "openModel", required: false }] }, { type: i0.Output, args: ["openModelChange"] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], message: [{ type: i0.Input, args: [{ isSignal: true, alias: "message", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], position: [{ type: i0.Input, args: [{ isSignal: true, alias: "position", required: false }] }], paddingTop: [{ type: i0.Input, args: [{ isSignal: true, alias: "paddingTop", required: false }] }], actions: [{ type: i0.Input, args: [{ isSignal: true, alias: "actions", required: false }] }], dismissible: [{ type: i0.Input, args: [{ isSignal: true, alias: "dismissible", required: false }] }], showCloseButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "showCloseButton", required: false }] }], bare: [{ type: i0.Input, args: [{ isSignal: true, alias: "bare", required: false }] }], hasTitleSlot: [{ type: i0.Input, args: [{ isSignal: true, alias: "hasTitleSlot", required: false }] }], hasActionsSlot: [{ type: i0.Input, args: [{ isSignal: true, alias: "hasActionsSlot", required: false }] }], hasDefaultSlot: [{ type: i0.Input, args: [{ isSignal: true, alias: "hasDefaultSlot", required: false }] }], dialogTemplate: [{
+        }], ctorParameters: () => [], propDecorators: { modelValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "modelValue", required: false }] }, { type: i0.Output, args: ["modelValueChange"] }], language: [{ type: i0.Input, args: [{ isSignal: true, alias: "language", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], description: [{ type: i0.Input, args: [{ isSignal: true, alias: "description", required: false }] }], error: [{ type: i0.Input, args: [{ isSignal: true, alias: "error", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], overflow: [{
+                type: Output
+            }], change: [{
+                type: Output
+            }], editorRoot: [{
                 type: ViewChild,
-                args: ['dialogTemplate']
+                args: ['editorRoot']
             }] } });
 
+class NeuralCodePreviewComponent {
+    modelValue = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "modelValue" }] : /* istanbul ignore next */ []));
+    language = input('plain', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "language" }] : /* istanbul ignore next */ []));
+    isPreviewLanguage = computed(() => this.language() === 'markdown' || this.language() === 'html', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isPreviewLanguage" }] : /* istanbul ignore next */ []));
+    sanitized = computed(() => {
+        const src = this.modelValue() ?? '';
+        if (!src)
+            return '';
+        if (this.language() === 'markdown') {
+            return DOMPurify.sanitize(marked.parse(src));
+        }
+        if (this.language() === 'html') {
+            return DOMPurify.sanitize(src);
+        }
+        return '';
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "sanitized" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: NeuralCodePreviewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.4", type: NeuralCodePreviewComponent, isStandalone: true, selector: "neural-code-preview", inputs: { modelValue: { classPropertyName: "modelValue", publicName: "modelValue", isSignal: true, isRequired: false, transformFunction: null }, language: { classPropertyName: "language", publicName: "language", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
+    @if (isPreviewLanguage()) {
+      <div
+        class="prose prose-sm max-w-none text-ink-gray-8"
+        [innerHTML]="sanitized()"
+      ></div>
+    }
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: NeuralCodePreviewComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'neural-code-preview',
+                    standalone: true,
+                    imports: [CommonModule],
+                    template: `
+    @if (isPreviewLanguage()) {
+      <div
+        class="prose prose-sm max-w-none text-ink-gray-8"
+        [innerHTML]="sanitized()"
+      ></div>
+    }
+  `
+                }]
+        }], propDecorators: { modelValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "modelValue", required: false }] }], language: [{ type: i0.Input, args: [{ isSignal: true, alias: "language", required: false }] }] } });
+
 class NeuralCommandPaletteComponent {
     open = model(false, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "open" }] : /* istanbul ignore next */ []));
@@ -15541,5 +15860,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { NeuralAccordionComponent, NeuralAlertComponent, NeuralAvatarComponent, NeuralAxisChartComponent, NeuralBadgeComponent, NeuralBottomSheetComponent, NeuralBreadcrumbsComponent, NeuralButtonComponent, NeuralCalendarComponent, NeuralCheckboxComponent, NeuralCodeEditorComponent, NeuralCodePreviewComponent, NeuralComboboxComponent, NeuralCommandPaletteComponent, NeuralContextMenuComponent, NeuralDataTableComponent, NeuralDatePickerComponent, NeuralDesktopShellComponent, NeuralDialogComponent, NeuralDividerComponent, NeuralDonutChartComponent, NeuralDrawerComponent, NeuralDropdownComponent, NeuralDurationComponent, NeuralEChartsComponent, NeuralEntityFormComponent, NeuralErrorMessageComponent, NeuralFileUploaderComponent, NeuralFilterBuilderComponent, NeuralFloatingWindowComponent, NeuralFooterComponent, NeuralFormControlComponent, NeuralFormLabelComponent, NeuralFunnelChartComponent, NeuralHoverCardComponent, NeuralIconComponent, NeuralInputDescriptionComponent, NeuralInputErrorComponent, NeuralInputLabelComponent, NeuralItemListRowComponent, NeuralKeyboardShortcutComponent, NeuralKeyboardShortcutsDialogComponent, NeuralLabelingWrapperComponent, NeuralListViewComponent, NeuralLoadingIndicatorComponent, NeuralLoadingTextComponent, NeuralMenuComponent, NeuralMobileNavComponent, NeuralMobileNavItemComponent, NeuralMobileShellComponent, NeuralMultiEmailInputComponent, NeuralMultiSelectComponent, NeuralNotificationCenterComponent, NeuralNumberChartComponent, NeuralPageHeaderComponent, NeuralPasswordComponent, NeuralPopoverComponent, NeuralPopoverContentDirective, NeuralPopoverPanelComponent, NeuralPopoverTriggerDirective, NeuralProgressComponent, NeuralRadioComponent, NeuralRadioGroupComponent, NeuralRailComponent, NeuralRailItemComponent, NeuralRatingComponent, NeuralRequiredIndicatorComponent, NeuralScrollAreaComponent, NeuralSearchTriggerComponent, NeuralSelectComponent, NeuralSettingsContentComponent, NeuralSettingsDialogComponent, NeuralSettingsNavItemComponent, NeuralSettingsPanelComponent, NeuralSettingsSidebarComponent, NeuralSidebarComponent, NeuralSidebarItemComponent, NeuralSkeletonComponent, NeuralSliderComponent, NeuralSpinnerComponent, NeuralSubGridComponent, NeuralSwitchComponent, NeuralTabComponent, NeuralTabPanelComponent, NeuralTabsComponent, NeuralTextEditorComponent, NeuralTextInputComponent, NeuralTextareaComponent, NeuralThemeSwitcherComponent, NeuralTimePickerComponent, NeuralToastComponent, NeuralTooltipComponent, NeuralTreeComponent, NeuralTreeItemComponent, RADIO_GROUP, TABS_ROOT, ToastService, formatDuration, parseDuration };
+export { NeuralAccordionComponent, NeuralAlertComponent, NeuralAvatarComponent, NeuralAwesomeBarComponent, NeuralAxisChartComponent, NeuralBadgeComponent, NeuralBottomSheetComponent, NeuralBreadcrumbsComponent, NeuralButtonComponent, NeuralCalendarComponent, NeuralCheckboxComponent, NeuralCodeEditorComponent, NeuralCodePreviewComponent, NeuralComboboxComponent, NeuralCommandPaletteComponent, NeuralContextMenuComponent, NeuralDataTableComponent, NeuralDatePickerComponent, NeuralDesktopShellComponent, NeuralDialogComponent, NeuralDividerComponent, NeuralDonutChartComponent, NeuralDrawerComponent, NeuralDropdownComponent, NeuralDurationComponent, NeuralEChartsComponent, NeuralEntityFormComponent, NeuralErrorMessageComponent, NeuralFileUploaderComponent, NeuralFilterBuilderComponent, NeuralFloatingWindowComponent, NeuralFooterComponent, NeuralFormControlComponent, NeuralFormLabelComponent, NeuralFunnelChartComponent, NeuralHoverCardComponent, NeuralIconComponent, NeuralInputDescriptionComponent, NeuralInputErrorComponent, NeuralInputLabelComponent, NeuralItemListRowComponent, NeuralKeyboardShortcutComponent, NeuralKeyboardShortcutsDialogComponent, NeuralLabelingWrapperComponent, NeuralListViewComponent, NeuralLoadingIndicatorComponent, NeuralLoadingTextComponent, NeuralMenuComponent, NeuralMobileNavComponent, NeuralMobileNavItemComponent, NeuralMobileShellComponent, NeuralMultiEmailInputComponent, NeuralMultiSelectComponent, NeuralNotificationCenterComponent, NeuralNumberChartComponent, NeuralPageHeaderComponent, NeuralPasswordComponent, NeuralPopoverComponent, NeuralPopoverContentDirective, NeuralPopoverPanelComponent, NeuralPopoverTriggerDirective, NeuralProgressComponent, NeuralRadioComponent, NeuralRadioGroupComponent, NeuralRailComponent, NeuralRailItemComponent, NeuralRatingComponent, NeuralRequiredIndicatorComponent, NeuralScrollAreaComponent, NeuralSearchTriggerComponent, NeuralSelectComponent, NeuralSettingsContentComponent, NeuralSettingsDialogComponent, NeuralSettingsNavItemComponent, NeuralSettingsPanelComponent, NeuralSettingsSidebarComponent, NeuralSidebarComponent, NeuralSidebarItemComponent, NeuralSkeletonComponent, NeuralSliderComponent, NeuralSpinnerComponent, NeuralSubGridComponent, NeuralSwitchComponent, NeuralTabComponent, NeuralTabPanelComponent, NeuralTabsComponent, NeuralTextEditorComponent, NeuralTextInputComponent, NeuralTextareaComponent, NeuralThemeSwitcherComponent, NeuralTimePickerComponent, NeuralToastComponent, NeuralTooltipComponent, NeuralTreeComponent, NeuralTreeItemComponent, RADIO_GROUP, TABS_ROOT, ToastService, formatDuration, parseDuration };
 //# sourceMappingURL=orbiq-neural-ui-kit.mjs.map