voyage-lib 0.0.1

package/fesm2022/voyage-lib.mjs

@@ -0,0 +1,1290 @@
+import * as i0 from '@angular/core';
+import { signal, Injectable, inject, ViewEncapsulation, Component, input, computed, output, Renderer2, effect, HostListener, ElementRef, PLATFORM_ID, Directive, Pipe, InjectionToken } from '@angular/core';
+import { TitleCasePipe, isPlatformBrowser } from '@angular/common';
+import { HttpClient } from '@angular/common/http';
+import { map } from 'rxjs/operators';
+
+class SnackbarService {
+    items = signal([], ...(ngDevMode ? [{ debugName: "items" }] : /* istanbul ignore next */ []));
+    show(config) {
+        const id = crypto.randomUUID();
+        const item = {
+            id,
+            message: config.message,
+            type: config.type ?? 'info',
+            title: config.title ?? '',
+            duration: config.duration ?? 4000,
+            dismissible: config.dismissible ?? true,
+            action: config.action,
+            exiting: false,
+        };
+        this.items.update(prev => [...prev, item]);
+        if (item.duration > 0) {
+            setTimeout(() => this.dismiss(id), item.duration);
+        }
+        return id;
+    }
+    dismiss(id) {
+        this.items.update(prev => prev.map(i => (i.id === id ? { ...i, exiting: true } : i)));
+        setTimeout(() => {
+            this.items.update(prev => prev.filter(i => i.id !== id));
+        }, 380);
+    }
+    success(message, config) {
+        return this.show({ ...config, message, type: 'success' });
+    }
+    error(message, config) {
+        return this.show({ ...config, message, type: 'error' });
+    }
+    warning(message, config) {
+        return this.show({ ...config, message, type: 'warning' });
+    }
+    info(message, config) {
+        return this.show({ ...config, message, type: 'info' });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: SnackbarService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: SnackbarService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: SnackbarService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
+
+class SnackbarComponent {
+    svc = inject(SnackbarService);
+    handleAction(item) {
+        item.action?.handler();
+        this.svc.dismiss(item.id);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: SnackbarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.5", type: SnackbarComponent, isStandalone: true, selector: "vl-snackbar", ngImport: i0, template: "<div class=\"vl-snackbar-host\" aria-live=\"polite\" aria-atomic=\"false\">\n  @for (item of svc.items(); track item.id) {\n    <div\n      class=\"vl-snackbar-item\"\n      [class]=\"'vl-snackbar-item vl-snackbar-' + item.type\"\n      [class.vl-snackbar-exiting]=\"item.exiting\"\n      role=\"alert\">\n\n      <span class=\"vl-snackbar-accent\" aria-hidden=\"true\"></span>\n\n      <span class=\"vl-snackbar-icon\" aria-hidden=\"true\">\n        @switch (item.type) {\n          @case ('success') {\n            <svg viewBox=\"0 0 20 20\" fill=\"currentColor\">\n              <path fill-rule=\"evenodd\" d=\"M10 18a8 8 0 1 0 0-16 8 8 0 0 0 0 16zm3.857-9.809a.75.75 0 0 0-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 1 0-1.06 1.061l2.5 2.5a.75.75 0 0 0 1.137-.089l4-5.5z\" clip-rule=\"evenodd\" />\n            </svg>\n          }\n          @case ('error') {\n            <svg viewBox=\"0 0 20 20\" fill=\"currentColor\">\n              <path fill-rule=\"evenodd\" d=\"M10 18a8 8 0 1 0 0-16 8 8 0 0 0 0 16zM8.28 7.22a.75.75 0 0 0-1.06 1.06L8.94 10l-1.72 1.72a.75.75 0 1 0 1.06 1.06L10 11.06l1.72 1.72a.75.75 0 1 0 1.06-1.06L11.06 10l1.72-1.72a.75.75 0 0 0-1.06-1.06L10 8.94 8.28 7.22z\" clip-rule=\"evenodd\" />\n            </svg>\n          }\n          @case ('warning') {\n            <svg viewBox=\"0 0 20 20\" fill=\"currentColor\">\n              <path fill-rule=\"evenodd\" d=\"M8.485 2.495c.673-1.167 2.357-1.167 3.03 0l6.28 10.875c.673 1.167-.17 2.625-1.516 2.625H3.72c-1.347 0-2.189-1.458-1.515-2.625L8.485 2.495zM10 5a.75.75 0 0 1 .75.75v3.5a.75.75 0 0 1-1.5 0v-3.5A.75.75 0 0 1 10 5zm0 9a1 1 0 1 0 0-2 1 1 0 0 0 0 2z\" clip-rule=\"evenodd\" />\n            </svg>\n          }\n          @default {\n            <svg viewBox=\"0 0 20 20\" fill=\"currentColor\">\n              <path fill-rule=\"evenodd\" d=\"M18 10a8 8 0 1 1-16 0 8 8 0 0 1 16 0zm-7-4a1 1 0 1 1-2 0 1 1 0 0 1 2 0zM9 9a.75.75 0 0 0 0 1.5h.253a.25.25 0 0 1 .244.304l-.459 2.066A1.75 1.75 0 0 0 10.747 15H11a.75.75 0 0 0 0-1.5h-.253a.25.25 0 0 1-.244-.304l.459-2.066A1.75 1.75 0 0 0 9.253 9H9z\" clip-rule=\"evenodd\" />\n            </svg>\n          }\n        }\n      </span>\n\n      <div class=\"vl-snackbar-body\">\n        @if (item.title) {\n          <p class=\"vl-snackbar-title\">{{ item.title }}</p>\n        }\n        <p class=\"vl-snackbar-message\">{{ item.message }}</p>\n        @if (item.action) {\n          <button class=\"vl-snackbar-action-btn\" (click)=\"handleAction(item)\">\n            {{ item.action.label }}\n          </button>\n        }\n      </div>\n\n      @if (item.dismissible) {\n        <button class=\"vl-snackbar-close\" aria-label=\"Dismiss\" (click)=\"svc.dismiss(item.id)\">\n          <svg viewBox=\"0 0 16 16\" fill=\"currentColor\">\n            <path d=\"M3.72 3.72a.75.75 0 0 1 1.06 0L8 6.94l3.22-3.22a.75.75 0 1 1 1.06 1.06L9.06 8l3.22 3.22a.75.75 0 1 1-1.06 1.06L8 9.06l-3.22 3.22a.75.75 0 0 1-1.06-1.06L6.94 8 3.72 4.78a.75.75 0 0 1 0-1.06z\"/>\n          </svg>\n        </button>\n      }\n\n      @if (item.duration > 0) {\n        <span\n          class=\"vl-snackbar-progress\"\n          [style.animation-duration.ms]=\"item.duration\"\n          aria-hidden=\"true\">\n        </span>\n      }\n    </div>\n  }\n</div>\n", styles: [".vl-snackbar-host{position:fixed;bottom:1.25rem;right:1.25rem;z-index:9999;display:flex;flex-direction:column;gap:.5rem;width:21rem;max-width:calc(100vw - 2rem);pointer-events:none}.vl-snackbar-item{position:relative;display:flex;align-items:flex-start;gap:.625rem;padding:.875rem .875rem 1.125rem 1rem;border-radius:.75rem;overflow:hidden;pointer-events:all;background-color:var(--color-card, #ffffff);border:1px solid var(--color-border, hsl(210 15% 85%));box-shadow:0 1px 3px #0000000f,0 6px 20px #00000017;font-family:var(--font-family-sans, \"Inter\", sans-serif);animation:vl-snackbar-enter .34s cubic-bezier(.34,1.3,.64,1) forwards}.vl-snackbar-success{--vl-sb-color: var(--color-accent, hsl(150 60% 35%));--vl-sb-color-bg: color-mix(in srgb, var(--color-accent, hsl(150 60% 35%)) 8%, transparent)}.vl-snackbar-error{--vl-sb-color: var(--color-destructive, hsl(0 70% 50%));--vl-sb-color-bg: color-mix(in srgb, var(--color-destructive, hsl(0 70% 50%)) 8%, transparent)}.vl-snackbar-warning{--vl-sb-color: var(--color-secondary, hsl(15 90% 55%));--vl-sb-color-bg: color-mix(in srgb, var(--color-secondary, hsl(15 90% 55%)) 8%, transparent)}.vl-snackbar-info{--vl-sb-color: var(--color-primary, hsl(215 80% 25%));--vl-sb-color-bg: color-mix(in srgb, var(--color-primary, hsl(215 80% 25%)) 8%, transparent)}.vl-snackbar-item:before{content:\"\";position:absolute;inset:0;background:var(--vl-sb-color-bg);pointer-events:none}.vl-snackbar-accent{position:absolute;left:0;top:.625rem;bottom:.625rem;width:3px;border-radius:0 2px 2px 0;background-color:var(--vl-sb-color)}.vl-snackbar-icon{flex-shrink:0;width:1.125rem;height:1.125rem;margin-top:.125rem;color:var(--vl-sb-color);position:relative}.vl-snackbar-icon svg{width:100%;height:100%;display:block}.vl-snackbar-body{flex:1;min-width:0;position:relative}.vl-snackbar-title{margin:0 0 .1875rem;font-size:.8125rem;font-weight:600;line-height:1.4;letter-spacing:-.01em;color:var(--color-card-foreground, hsl(210 15% 20%))}.vl-snackbar-message{margin:0;font-size:.8125rem;line-height:1.5;color:var(--color-muted-foreground, hsl(210 10% 50%))}.vl-snackbar-action-btn{display:inline-flex;align-items:center;margin-top:.5rem;padding:.25rem .625rem;font-size:.75rem;font-weight:500;border-radius:calc(var(--radius, .5rem));color:var(--vl-sb-color);background:color-mix(in srgb,var(--vl-sb-color) 10%,transparent);border:none;cursor:pointer;transition:background .15s ease}.vl-snackbar-action-btn:hover{background:color-mix(in srgb,var(--vl-sb-color) 18%,transparent)}.vl-snackbar-close{flex-shrink:0;width:1.5rem;height:1.5rem;display:flex;align-items:center;justify-content:center;border-radius:calc(var(--radius, .5rem));border:none;background:transparent;color:var(--color-muted-foreground, hsl(210 10% 50%));cursor:pointer;position:relative;transition:background .15s ease,color .15s ease;margin-top:-.0625rem}.vl-snackbar-close svg{width:.8125rem;height:.8125rem;display:block}.vl-snackbar-close:hover{background:var(--color-muted, hsl(210 10% 95%));color:var(--color-card-foreground, hsl(210 15% 20%))}.vl-snackbar-progress{position:absolute;bottom:0;left:0;height:2px;width:100%;background-color:color-mix(in srgb,var(--vl-sb-color) 45%,transparent);transform-origin:left center;animation:vl-snackbar-progress linear forwards}@keyframes vl-snackbar-enter{0%{opacity:0;transform:translate(calc(100% + 1.25rem))}to{opacity:1;transform:translate(0)}}@keyframes vl-snackbar-progress{0%{transform:scaleX(1)}to{transform:scaleX(0)}}.vl-snackbar-exiting{animation:vl-snackbar-exit .3s ease-in forwards!important}@keyframes vl-snackbar-exit{0%{opacity:1;transform:translate(0);max-height:10rem;margin-bottom:0}to{opacity:0;transform:translate(calc(100% + 1.25rem));max-height:0;margin-bottom:-.5rem}}@media(max-width:480px){.vl-snackbar-host{bottom:.75rem;right:.75rem;left:.75rem;width:auto}}\n"], encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: SnackbarComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'vl-snackbar', standalone: true, encapsulation: ViewEncapsulation.None, template: "<div class=\"vl-snackbar-host\" aria-live=\"polite\" aria-atomic=\"false\">\n  @for (item of svc.items(); track item.id) {\n    <div\n      class=\"vl-snackbar-item\"\n      [class]=\"'vl-snackbar-item vl-snackbar-' + item.type\"\n      [class.vl-snackbar-exiting]=\"item.exiting\"\n      role=\"alert\">\n\n      <span class=\"vl-snackbar-accent\" aria-hidden=\"true\"></span>\n\n      <span class=\"vl-snackbar-icon\" aria-hidden=\"true\">\n        @switch (item.type) {\n          @case ('success') {\n            <svg viewBox=\"0 0 20 20\" fill=\"currentColor\">\n              <path fill-rule=\"evenodd\" d=\"M10 18a8 8 0 1 0 0-16 8 8 0 0 0 0 16zm3.857-9.809a.75.75 0 0 0-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 1 0-1.06 1.061l2.5 2.5a.75.75 0 0 0 1.137-.089l4-5.5z\" clip-rule=\"evenodd\" />\n            </svg>\n          }\n          @case ('error') {\n            <svg viewBox=\"0 0 20 20\" fill=\"currentColor\">\n              <path fill-rule=\"evenodd\" d=\"M10 18a8 8 0 1 0 0-16 8 8 0 0 0 0 16zM8.28 7.22a.75.75 0 0 0-1.06 1.06L8.94 10l-1.72 1.72a.75.75 0 1 0 1.06 1.06L10 11.06l1.72 1.72a.75.75 0 1 0 1.06-1.06L11.06 10l1.72-1.72a.75.75 0 0 0-1.06-1.06L10 8.94 8.28 7.22z\" clip-rule=\"evenodd\" />\n            </svg>\n          }\n          @case ('warning') {\n            <svg viewBox=\"0 0 20 20\" fill=\"currentColor\">\n              <path fill-rule=\"evenodd\" d=\"M8.485 2.495c.673-1.167 2.357-1.167 3.03 0l6.28 10.875c.673 1.167-.17 2.625-1.516 2.625H3.72c-1.347 0-2.189-1.458-1.515-2.625L8.485 2.495zM10 5a.75.75 0 0 1 .75.75v3.5a.75.75 0 0 1-1.5 0v-3.5A.75.75 0 0 1 10 5zm0 9a1 1 0 1 0 0-2 1 1 0 0 0 0 2z\" clip-rule=\"evenodd\" />\n            </svg>\n          }\n          @default {\n            <svg viewBox=\"0 0 20 20\" fill=\"currentColor\">\n              <path fill-rule=\"evenodd\" d=\"M18 10a8 8 0 1 1-16 0 8 8 0 0 1 16 0zm-7-4a1 1 0 1 1-2 0 1 1 0 0 1 2 0zM9 9a.75.75 0 0 0 0 1.5h.253a.25.25 0 0 1 .244.304l-.459 2.066A1.75 1.75 0 0 0 10.747 15H11a.75.75 0 0 0 0-1.5h-.253a.25.25 0 0 1-.244-.304l.459-2.066A1.75 1.75 0 0 0 9.253 9H9z\" clip-rule=\"evenodd\" />\n            </svg>\n          }\n        }\n      </span>\n\n      <div class=\"vl-snackbar-body\">\n        @if (item.title) {\n          <p class=\"vl-snackbar-title\">{{ item.title }}</p>\n        }\n        <p class=\"vl-snackbar-message\">{{ item.message }}</p>\n        @if (item.action) {\n          <button class=\"vl-snackbar-action-btn\" (click)=\"handleAction(item)\">\n            {{ item.action.label }}\n          </button>\n        }\n      </div>\n\n      @if (item.dismissible) {\n        <button class=\"vl-snackbar-close\" aria-label=\"Dismiss\" (click)=\"svc.dismiss(item.id)\">\n          <svg viewBox=\"0 0 16 16\" fill=\"currentColor\">\n            <path d=\"M3.72 3.72a.75.75 0 0 1 1.06 0L8 6.94l3.22-3.22a.75.75 0 1 1 1.06 1.06L9.06 8l3.22 3.22a.75.75 0 1 1-1.06 1.06L8 9.06l-3.22 3.22a.75.75 0 0 1-1.06-1.06L6.94 8 3.72 4.78a.75.75 0 0 1 0-1.06z\"/>\n          </svg>\n        </button>\n      }\n\n      @if (item.duration > 0) {\n        <span\n          class=\"vl-snackbar-progress\"\n          [style.animation-duration.ms]=\"item.duration\"\n          aria-hidden=\"true\">\n        </span>\n      }\n    </div>\n  }\n</div>\n", styles: [".vl-snackbar-host{position:fixed;bottom:1.25rem;right:1.25rem;z-index:9999;display:flex;flex-direction:column;gap:.5rem;width:21rem;max-width:calc(100vw - 2rem);pointer-events:none}.vl-snackbar-item{position:relative;display:flex;align-items:flex-start;gap:.625rem;padding:.875rem .875rem 1.125rem 1rem;border-radius:.75rem;overflow:hidden;pointer-events:all;background-color:var(--color-card, #ffffff);border:1px solid var(--color-border, hsl(210 15% 85%));box-shadow:0 1px 3px #0000000f,0 6px 20px #00000017;font-family:var(--font-family-sans, \"Inter\", sans-serif);animation:vl-snackbar-enter .34s cubic-bezier(.34,1.3,.64,1) forwards}.vl-snackbar-success{--vl-sb-color: var(--color-accent, hsl(150 60% 35%));--vl-sb-color-bg: color-mix(in srgb, var(--color-accent, hsl(150 60% 35%)) 8%, transparent)}.vl-snackbar-error{--vl-sb-color: var(--color-destructive, hsl(0 70% 50%));--vl-sb-color-bg: color-mix(in srgb, var(--color-destructive, hsl(0 70% 50%)) 8%, transparent)}.vl-snackbar-warning{--vl-sb-color: var(--color-secondary, hsl(15 90% 55%));--vl-sb-color-bg: color-mix(in srgb, var(--color-secondary, hsl(15 90% 55%)) 8%, transparent)}.vl-snackbar-info{--vl-sb-color: var(--color-primary, hsl(215 80% 25%));--vl-sb-color-bg: color-mix(in srgb, var(--color-primary, hsl(215 80% 25%)) 8%, transparent)}.vl-snackbar-item:before{content:\"\";position:absolute;inset:0;background:var(--vl-sb-color-bg);pointer-events:none}.vl-snackbar-accent{position:absolute;left:0;top:.625rem;bottom:.625rem;width:3px;border-radius:0 2px 2px 0;background-color:var(--vl-sb-color)}.vl-snackbar-icon{flex-shrink:0;width:1.125rem;height:1.125rem;margin-top:.125rem;color:var(--vl-sb-color);position:relative}.vl-snackbar-icon svg{width:100%;height:100%;display:block}.vl-snackbar-body{flex:1;min-width:0;position:relative}.vl-snackbar-title{margin:0 0 .1875rem;font-size:.8125rem;font-weight:600;line-height:1.4;letter-spacing:-.01em;color:var(--color-card-foreground, hsl(210 15% 20%))}.vl-snackbar-message{margin:0;font-size:.8125rem;line-height:1.5;color:var(--color-muted-foreground, hsl(210 10% 50%))}.vl-snackbar-action-btn{display:inline-flex;align-items:center;margin-top:.5rem;padding:.25rem .625rem;font-size:.75rem;font-weight:500;border-radius:calc(var(--radius, .5rem));color:var(--vl-sb-color);background:color-mix(in srgb,var(--vl-sb-color) 10%,transparent);border:none;cursor:pointer;transition:background .15s ease}.vl-snackbar-action-btn:hover{background:color-mix(in srgb,var(--vl-sb-color) 18%,transparent)}.vl-snackbar-close{flex-shrink:0;width:1.5rem;height:1.5rem;display:flex;align-items:center;justify-content:center;border-radius:calc(var(--radius, .5rem));border:none;background:transparent;color:var(--color-muted-foreground, hsl(210 10% 50%));cursor:pointer;position:relative;transition:background .15s ease,color .15s ease;margin-top:-.0625rem}.vl-snackbar-close svg{width:.8125rem;height:.8125rem;display:block}.vl-snackbar-close:hover{background:var(--color-muted, hsl(210 10% 95%));color:var(--color-card-foreground, hsl(210 15% 20%))}.vl-snackbar-progress{position:absolute;bottom:0;left:0;height:2px;width:100%;background-color:color-mix(in srgb,var(--vl-sb-color) 45%,transparent);transform-origin:left center;animation:vl-snackbar-progress linear forwards}@keyframes vl-snackbar-enter{0%{opacity:0;transform:translate(calc(100% + 1.25rem))}to{opacity:1;transform:translate(0)}}@keyframes vl-snackbar-progress{0%{transform:scaleX(1)}to{transform:scaleX(0)}}.vl-snackbar-exiting{animation:vl-snackbar-exit .3s ease-in forwards!important}@keyframes vl-snackbar-exit{0%{opacity:1;transform:translate(0);max-height:10rem;margin-bottom:0}to{opacity:0;transform:translate(calc(100% + 1.25rem));max-height:0;margin-bottom:-.5rem}}@media(max-width:480px){.vl-snackbar-host{bottom:.75rem;right:.75rem;left:.75rem;width:auto}}\n"] }]
+        }] });
+
+/**
+ * User avatar — shows image when available, falls back to initials.
+ *
+ * Usage:
+ *   <vl-avatar name="Pranesh T" />
+ *   <vl-avatar name="Pranesh T" [src]="user.photoUrl" size="lg" />
+ */
+class AvatarComponent {
+    name = input('', ...(ngDevMode ? [{ debugName: "name" }] : /* istanbul ignore next */ []));
+    src = input(null, ...(ngDevMode ? [{ debugName: "src" }] : /* istanbul ignore next */ []));
+    size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+    imgError = false;
+    initials = computed(() => {
+        const parts = this.name().trim().split(/\s+/).filter(Boolean);
+        if (!parts.length)
+            return '?';
+        if (parts.length === 1)
+            return parts[0].slice(0, 2).toUpperCase();
+        return (parts[0][0] + parts[parts.length - 1][0]).toUpperCase();
+    }, ...(ngDevMode ? [{ debugName: "initials" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: AvatarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.5", type: AvatarComponent, isStandalone: true, selector: "vl-avatar", inputs: { name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, src: { classPropertyName: "src", publicName: "src", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
+    <div class="vl-avatar" [class]="'vl-avatar-' + size()">
+      @if (src() && !imgError) {
+        <img [src]="src()" [alt]="name()" (error)="imgError = true" />
+      } @else {
+        <span class="vl-avatar-initials">{{ initials() }}</span>
+      }
+    </div>
+  `, isInline: true, styles: [".vl-avatar{display:inline-flex;align-items:center;justify-content:center;border-radius:9999px;overflow:hidden;background-color:color-mix(in srgb,var(--color-primary, hsl(215 80% 25%)) 15%,var(--color-muted, hsl(210 10% 95%)));border:1px solid color-mix(in srgb,var(--color-primary, hsl(215 80% 25%)) 20%,transparent);flex-shrink:0}.vl-avatar img{width:100%;height:100%;object-fit:cover}.vl-avatar-initials{font-weight:600;color:var(--color-primary, hsl(215 80% 25%));font-family:var(--font-family-sans, inherit);line-height:1;-webkit-user-select:none;user-select:none}.vl-avatar-xs{width:1.5rem;height:1.5rem}.vl-avatar-xs .vl-avatar-initials{font-size:.5625rem}.vl-avatar-sm{width:2rem;height:2rem}.vl-avatar-sm .vl-avatar-initials{font-size:.6875rem}.vl-avatar-md{width:2.5rem;height:2.5rem}.vl-avatar-md .vl-avatar-initials{font-size:.875rem}.vl-avatar-lg{width:3rem;height:3rem}.vl-avatar-lg .vl-avatar-initials{font-size:1rem}.vl-avatar-xl{width:4rem;height:4rem}.vl-avatar-xl .vl-avatar-initials{font-size:1.25rem}\n"], encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: AvatarComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'vl-avatar', standalone: true, template: `
+    <div class="vl-avatar" [class]="'vl-avatar-' + size()">
+      @if (src() && !imgError) {
+        <img [src]="src()" [alt]="name()" (error)="imgError = true" />
+      } @else {
+        <span class="vl-avatar-initials">{{ initials() }}</span>
+      }
+    </div>
+  `, encapsulation: ViewEncapsulation.None, styles: [".vl-avatar{display:inline-flex;align-items:center;justify-content:center;border-radius:9999px;overflow:hidden;background-color:color-mix(in srgb,var(--color-primary, hsl(215 80% 25%)) 15%,var(--color-muted, hsl(210 10% 95%)));border:1px solid color-mix(in srgb,var(--color-primary, hsl(215 80% 25%)) 20%,transparent);flex-shrink:0}.vl-avatar img{width:100%;height:100%;object-fit:cover}.vl-avatar-initials{font-weight:600;color:var(--color-primary, hsl(215 80% 25%));font-family:var(--font-family-sans, inherit);line-height:1;-webkit-user-select:none;user-select:none}.vl-avatar-xs{width:1.5rem;height:1.5rem}.vl-avatar-xs .vl-avatar-initials{font-size:.5625rem}.vl-avatar-sm{width:2rem;height:2rem}.vl-avatar-sm .vl-avatar-initials{font-size:.6875rem}.vl-avatar-md{width:2.5rem;height:2.5rem}.vl-avatar-md .vl-avatar-initials{font-size:.875rem}.vl-avatar-lg{width:3rem;height:3rem}.vl-avatar-lg .vl-avatar-initials{font-size:1rem}.vl-avatar-xl{width:4rem;height:4rem}.vl-avatar-xl .vl-avatar-initials{font-size:1.25rem}\n"] }]
+        }], propDecorators: { name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], src: [{ type: i0.Input, args: [{ isSignal: true, alias: "src", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }] } });
+
+/**
+ * Colored pill badge with optional leading dot.
+ *
+ * Usage:
+ *   <vl-badge variant="ongoing">Ongoing</vl-badge>
+ *   <vl-badge [dot]="true" variant="planning">Planning</vl-badge>
+ *   <vl-badge [color]="categoryColor" [bgColor]="categoryBg">Food</vl-badge>
+ */
+class BadgeComponent {
+    variant = input('neutral', ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
+    dot = input(false, ...(ngDevMode ? [{ debugName: "dot" }] : /* istanbul ignore next */ []));
+    /** Override color (text + dot). Takes precedence over variant. */
+    color = input('', ...(ngDevMode ? [{ debugName: "color" }] : /* istanbul ignore next */ []));
+    /** Override background color. Takes precedence over variant. */
+    bgColor = input('', ...(ngDevMode ? [{ debugName: "bgColor" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: BadgeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.5", type: BadgeComponent, isStandalone: true, selector: "vl-badge", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, dot: { classPropertyName: "dot", publicName: "dot", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, bgColor: { classPropertyName: "bgColor", publicName: "bgColor", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
+    <span class="vl-badge" [class]="'vl-badge-' + variant()"
+      [style.color]="color() || null"
+      [style.background-color]="bgColor() || null"
+      [style.border-color]="color() ? color() + '33' : null">
+      @if (dot()) {
+        <span class="vl-badge-dot"
+          [style.background-color]="color() || null"></span>
+      }
+      <ng-content />
+    </span>
+  `, isInline: true, styles: [".vl-badge{display:inline-flex;align-items:center;gap:.375rem;padding:.25rem .625rem;border-radius:9999px;font-size:.75rem;font-weight:600;line-height:1;white-space:nowrap;border:1px solid transparent;font-family:var(--font-family-sans, inherit)}.vl-badge-dot{width:.375rem;height:.375rem;border-radius:9999px;flex-shrink:0}.vl-badge-planning{color:#1458b8;background-color:#1458b81a;border-color:#1458b833}.vl-badge-ongoing{color:#22774d;background-color:#22774d1a;border-color:#22774d33}.vl-badge-completed{color:#5c6670;background-color:#5c66701a;border-color:#5c667033}.vl-badge-success{color:var(--color-accent, hsl(150 60% 35%));background-color:color-mix(in srgb,var(--color-accent, hsl(150 60% 35%)) 10%,transparent);border-color:color-mix(in srgb,var(--color-accent, hsl(150 60% 35%)) 20%,transparent)}.vl-badge-warning{color:var(--color-secondary, hsl(15 90% 50%));background-color:color-mix(in srgb,var(--color-secondary, hsl(15 90% 50%)) 10%,transparent);border-color:color-mix(in srgb,var(--color-secondary, hsl(15 90% 50%)) 20%,transparent)}.vl-badge-danger{color:var(--color-destructive, hsl(0 70% 50%));background-color:color-mix(in srgb,var(--color-destructive, hsl(0 70% 50%)) 10%,transparent);border-color:color-mix(in srgb,var(--color-destructive, hsl(0 70% 50%)) 20%,transparent)}.vl-badge-info{color:var(--color-primary, hsl(215 80% 35%));background-color:color-mix(in srgb,var(--color-primary, hsl(215 80% 35%)) 10%,transparent);border-color:color-mix(in srgb,var(--color-primary, hsl(215 80% 35%)) 20%,transparent)}.vl-badge-neutral{color:var(--color-muted-foreground, hsl(210 10% 50%));background-color:var(--color-muted, hsl(210 10% 95%));border-color:var(--color-border, hsl(210 15% 85%))}\n"], encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: BadgeComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'vl-badge', standalone: true, template: `
+    <span class="vl-badge" [class]="'vl-badge-' + variant()"
+      [style.color]="color() || null"
+      [style.background-color]="bgColor() || null"
+      [style.border-color]="color() ? color() + '33' : null">
+      @if (dot()) {
+        <span class="vl-badge-dot"
+          [style.background-color]="color() || null"></span>
+      }
+      <ng-content />
+    </span>
+  `, encapsulation: ViewEncapsulation.None, styles: [".vl-badge{display:inline-flex;align-items:center;gap:.375rem;padding:.25rem .625rem;border-radius:9999px;font-size:.75rem;font-weight:600;line-height:1;white-space:nowrap;border:1px solid transparent;font-family:var(--font-family-sans, inherit)}.vl-badge-dot{width:.375rem;height:.375rem;border-radius:9999px;flex-shrink:0}.vl-badge-planning{color:#1458b8;background-color:#1458b81a;border-color:#1458b833}.vl-badge-ongoing{color:#22774d;background-color:#22774d1a;border-color:#22774d33}.vl-badge-completed{color:#5c6670;background-color:#5c66701a;border-color:#5c667033}.vl-badge-success{color:var(--color-accent, hsl(150 60% 35%));background-color:color-mix(in srgb,var(--color-accent, hsl(150 60% 35%)) 10%,transparent);border-color:color-mix(in srgb,var(--color-accent, hsl(150 60% 35%)) 20%,transparent)}.vl-badge-warning{color:var(--color-secondary, hsl(15 90% 50%));background-color:color-mix(in srgb,var(--color-secondary, hsl(15 90% 50%)) 10%,transparent);border-color:color-mix(in srgb,var(--color-secondary, hsl(15 90% 50%)) 20%,transparent)}.vl-badge-danger{color:var(--color-destructive, hsl(0 70% 50%));background-color:color-mix(in srgb,var(--color-destructive, hsl(0 70% 50%)) 10%,transparent);border-color:color-mix(in srgb,var(--color-destructive, hsl(0 70% 50%)) 20%,transparent)}.vl-badge-info{color:var(--color-primary, hsl(215 80% 35%));background-color:color-mix(in srgb,var(--color-primary, hsl(215 80% 35%)) 10%,transparent);border-color:color-mix(in srgb,var(--color-primary, hsl(215 80% 35%)) 20%,transparent)}.vl-badge-neutral{color:var(--color-muted-foreground, hsl(210 10% 50%));background-color:var(--color-muted, hsl(210 10% 95%));border-color:var(--color-border, hsl(210 15% 85%))}\n"] }]
+        }], propDecorators: { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], dot: [{ type: i0.Input, args: [{ isSignal: true, alias: "dot", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], bgColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "bgColor", required: false }] }] } });
+
+class ButtonComponent {
+    variant = input('primary', ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
+    size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+    loading = input(false, ...(ngDevMode ? [{ debugName: "loading" }] : /* istanbul ignore next */ []));
+    disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
+    variantClass() {
+        return `vl-btn-${this.variant()}`;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: ButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.5", type: ButtonComponent, isStandalone: true, selector: "vl-button", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
+    <button
+      class="vl-btn"
+      [class]="variantClass()"
+      [class.vl-btn-sm]="size() === 'sm'"
+      [class.vl-btn-md]="size() === 'md'"
+      [class.vl-btn-lg]="size() === 'lg'"
+      [class.vl-btn-loading]="loading()"
+      [disabled]="disabled() || loading()">
+
+      @if (loading()) {
+        <span class="vl-btn-spinner" aria-hidden="true">
+          <svg viewBox="0 0 24 24" fill="none">
+            <circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="2.5" opacity="0.25"/>
+            <path d="M12 2a10 10 0 0 1 10 10" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"/>
+          </svg>
+        </span>
+      }
+
+      <ng-content />
+    </button>
+  `, isInline: true, styles: [".vl-btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;font-weight:500;border-radius:var(--radius, .5rem);border:1px solid transparent;cursor:pointer;transition:background-color .15s,color .15s,border-color .15s,opacity .15s,box-shadow .15s;white-space:nowrap;font-family:var(--font-family-sans, inherit);line-height:1}.vl-btn-sm{padding:.375rem .75rem;font-size:.8125rem}.vl-btn-md{padding:.5rem 1rem;font-size:.875rem}.vl-btn-lg{padding:.625rem 1.25rem;font-size:1rem}.vl-btn-primary{background-color:var(--color-primary, hsl(215 80% 25%));color:#fff}.vl-btn-primary:hover:not(:disabled){background-color:color-mix(in srgb,var(--color-primary, hsl(215 80% 25%)) 85%,#000)}.vl-btn-secondary{background-color:var(--color-secondary, hsl(15 90% 55%));color:#fff}.vl-btn-secondary:hover:not(:disabled){background-color:color-mix(in srgb,var(--color-secondary, hsl(15 90% 55%)) 85%,#000)}.vl-btn-danger{background-color:var(--color-destructive, hsl(0 70% 50%));color:#fff}.vl-btn-danger:hover:not(:disabled){background-color:color-mix(in srgb,var(--color-destructive, hsl(0 70% 50%)) 85%,#000)}.vl-btn-ghost{background-color:transparent;color:var(--color-foreground, #1f2937)}.vl-btn-ghost:hover:not(:disabled){background-color:var(--color-muted, hsl(210 10% 95%))}.vl-btn-outline{background-color:transparent;color:var(--color-primary, hsl(215 80% 25%));border-color:var(--color-primary, hsl(215 80% 25%))}.vl-btn-outline:hover:not(:disabled){background-color:color-mix(in srgb,var(--color-primary, hsl(215 80% 25%)) 8%,transparent)}.vl-btn:disabled{opacity:.5;cursor:not-allowed}.vl-btn-loading{cursor:wait}.vl-btn-spinner{display:inline-flex;width:1em;height:1em;animation:vl-btn-spin .8s linear infinite}.vl-btn-spinner svg{width:100%;height:100%}@keyframes vl-btn-spin{to{transform:rotate(360deg)}}\n"], encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: ButtonComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'vl-button', standalone: true, template: `
+    <button
+      class="vl-btn"
+      [class]="variantClass()"
+      [class.vl-btn-sm]="size() === 'sm'"
+      [class.vl-btn-md]="size() === 'md'"
+      [class.vl-btn-lg]="size() === 'lg'"
+      [class.vl-btn-loading]="loading()"
+      [disabled]="disabled() || loading()">
+
+      @if (loading()) {
+        <span class="vl-btn-spinner" aria-hidden="true">
+          <svg viewBox="0 0 24 24" fill="none">
+            <circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="2.5" opacity="0.25"/>
+            <path d="M12 2a10 10 0 0 1 10 10" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"/>
+          </svg>
+        </span>
+      }
+
+      <ng-content />
+    </button>
+  `, encapsulation: ViewEncapsulation.None, styles: [".vl-btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;font-weight:500;border-radius:var(--radius, .5rem);border:1px solid transparent;cursor:pointer;transition:background-color .15s,color .15s,border-color .15s,opacity .15s,box-shadow .15s;white-space:nowrap;font-family:var(--font-family-sans, inherit);line-height:1}.vl-btn-sm{padding:.375rem .75rem;font-size:.8125rem}.vl-btn-md{padding:.5rem 1rem;font-size:.875rem}.vl-btn-lg{padding:.625rem 1.25rem;font-size:1rem}.vl-btn-primary{background-color:var(--color-primary, hsl(215 80% 25%));color:#fff}.vl-btn-primary:hover:not(:disabled){background-color:color-mix(in srgb,var(--color-primary, hsl(215 80% 25%)) 85%,#000)}.vl-btn-secondary{background-color:var(--color-secondary, hsl(15 90% 55%));color:#fff}.vl-btn-secondary:hover:not(:disabled){background-color:color-mix(in srgb,var(--color-secondary, hsl(15 90% 55%)) 85%,#000)}.vl-btn-danger{background-color:var(--color-destructive, hsl(0 70% 50%));color:#fff}.vl-btn-danger:hover:not(:disabled){background-color:color-mix(in srgb,var(--color-destructive, hsl(0 70% 50%)) 85%,#000)}.vl-btn-ghost{background-color:transparent;color:var(--color-foreground, #1f2937)}.vl-btn-ghost:hover:not(:disabled){background-color:var(--color-muted, hsl(210 10% 95%))}.vl-btn-outline{background-color:transparent;color:var(--color-primary, hsl(215 80% 25%));border-color:var(--color-primary, hsl(215 80% 25%))}.vl-btn-outline:hover:not(:disabled){background-color:color-mix(in srgb,var(--color-primary, hsl(215 80% 25%)) 8%,transparent)}.vl-btn:disabled{opacity:.5;cursor:not-allowed}.vl-btn-loading{cursor:wait}.vl-btn-spinner{display:inline-flex;width:1em;height:1em;animation:vl-btn-spin .8s linear infinite}.vl-btn-spinner svg{width:100%;height:100%}@keyframes vl-btn-spin{to{transform:rotate(360deg)}}\n"] }]
+        }], propDecorators: { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }] } });
+
+/**
+ * Standard card wrapper. Optionally includes a section header.
+ *
+ * Usage:
+ *   <vl-card>content</vl-card>
+ *   <vl-card sectionTitle="Basic Info">content</vl-card>
+ *   <vl-card [hover]="true" padding="none">content</vl-card>
+ */
+class CardComponent {
+    padding = input('md', ...(ngDevMode ? [{ debugName: "padding" }] : /* istanbul ignore next */ []));
+    hover = input(false, ...(ngDevMode ? [{ debugName: "hover" }] : /* istanbul ignore next */ []));
+    sectionTitle = input('', ...(ngDevMode ? [{ debugName: "sectionTitle" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: CardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.5", type: CardComponent, isStandalone: true, selector: "vl-card", inputs: { padding: { classPropertyName: "padding", publicName: "padding", isSignal: true, isRequired: false, transformFunction: null }, hover: { classPropertyName: "hover", publicName: "hover", isSignal: true, isRequired: false, transformFunction: null }, sectionTitle: { classPropertyName: "sectionTitle", publicName: "sectionTitle", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
+    <div class="vl-card"
+      [class.vl-card-hover]="hover()"
+      [class.vl-card-p-none]="padding() === 'none'"
+      [class.vl-card-p-sm]="padding() === 'sm'"
+      [class.vl-card-p-md]="padding() === 'md'"
+      [class.vl-card-p-lg]="padding() === 'lg'">
+
+      @if (sectionTitle()) {
+        <div class="vl-card-section-header">
+          <span>{{ sectionTitle() }}</span>
+        </div>
+      }
+
+      <ng-content />
+    </div>
+  `, isInline: true, styles: [".vl-card{background-color:var(--color-card, #fff);border:1px solid var(--color-border, hsl(210 15% 85%));border-radius:var(--radius-xl, .75rem);overflow:hidden;font-family:var(--font-family-sans, inherit)}.vl-card-hover{transition:box-shadow .2s,border-color .2s}.vl-card-hover:hover{box-shadow:0 1px 4px #0000000f,0 4px 16px #00000012;border-color:color-mix(in srgb,var(--color-primary, hsl(215 80% 25%)) 30%,var(--color-border, hsl(210 15% 85%)))}.vl-card-p-none{padding:0}.vl-card-p-sm{padding:.75rem}.vl-card-p-md{padding:1.25rem}.vl-card-p-lg{padding:1.5rem}.vl-card-section-header{padding:.75rem 1.5rem;border-bottom:1px solid var(--color-border, hsl(210 15% 85%));background-color:color-mix(in srgb,var(--color-muted, hsl(210 10% 95%)) 30%,transparent)}.vl-card-section-header span{font-size:.6875rem;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--color-muted-foreground, hsl(210 10% 50%))}\n"], encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: CardComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'vl-card', standalone: true, template: `
+    <div class="vl-card"
+      [class.vl-card-hover]="hover()"
+      [class.vl-card-p-none]="padding() === 'none'"
+      [class.vl-card-p-sm]="padding() === 'sm'"
+      [class.vl-card-p-md]="padding() === 'md'"
+      [class.vl-card-p-lg]="padding() === 'lg'">
+
+      @if (sectionTitle()) {
+        <div class="vl-card-section-header">
+          <span>{{ sectionTitle() }}</span>
+        </div>
+      }
+
+      <ng-content />
+    </div>
+  `, encapsulation: ViewEncapsulation.None, styles: [".vl-card{background-color:var(--color-card, #fff);border:1px solid var(--color-border, hsl(210 15% 85%));border-radius:var(--radius-xl, .75rem);overflow:hidden;font-family:var(--font-family-sans, inherit)}.vl-card-hover{transition:box-shadow .2s,border-color .2s}.vl-card-hover:hover{box-shadow:0 1px 4px #0000000f,0 4px 16px #00000012;border-color:color-mix(in srgb,var(--color-primary, hsl(215 80% 25%)) 30%,var(--color-border, hsl(210 15% 85%)))}.vl-card-p-none{padding:0}.vl-card-p-sm{padding:.75rem}.vl-card-p-md{padding:1.25rem}.vl-card-p-lg{padding:1.5rem}.vl-card-section-header{padding:.75rem 1.5rem;border-bottom:1px solid var(--color-border, hsl(210 15% 85%));background-color:color-mix(in srgb,var(--color-muted, hsl(210 10% 95%)) 30%,transparent)}.vl-card-section-header span{font-size:.6875rem;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--color-muted-foreground, hsl(210 10% 50%))}\n"] }]
+        }], propDecorators: { padding: [{ type: i0.Input, args: [{ isSignal: true, alias: "padding", required: false }] }], hover: [{ type: i0.Input, args: [{ isSignal: true, alias: "hover", required: false }] }], sectionTitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "sectionTitle", required: false }] }] } });
+
+class DialogComponent {
+    isOpen = input(false, ...(ngDevMode ? [{ debugName: "isOpen" }] : /* istanbul ignore next */ []));
+    title = input('', ...(ngDevMode ? [{ debugName: "title" }] : /* istanbul ignore next */ []));
+    subtitle = input(null, ...(ngDevMode ? [{ debugName: "subtitle" }] : /* istanbul ignore next */ []));
+    size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+    hasFooter = input(false, ...(ngDevMode ? [{ debugName: "hasFooter" }] : /* istanbul ignore next */ []));
+    closed = output();
+    renderer = inject(Renderer2);
+    constructor() {
+        effect(() => {
+            if (this.isOpen()) {
+                this.renderer.addClass(document.body, 'overflow-hidden');
+            }
+            else {
+                this.renderer.removeClass(document.body, 'overflow-hidden');
+            }
+        });
+    }
+    onEscape() {
+        if (this.isOpen())
+            this.closed.emit();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: DialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.5", type: DialogComponent, isStandalone: true, selector: "vl-dialog", inputs: { isOpen: { classPropertyName: "isOpen", publicName: "isOpen", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, subtitle: { classPropertyName: "subtitle", publicName: "subtitle", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, hasFooter: { classPropertyName: "hasFooter", publicName: "hasFooter", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { closed: "closed" }, host: { listeners: { "document:keydown.escape": "onEscape()" } }, ngImport: i0, template: "@if (isOpen()) {\n  <div class=\"vl-dialog-overlay\" role=\"dialog\" aria-modal=\"true\">\n\n    <div class=\"vl-dialog-backdrop\" (click)=\"closed.emit()\"></div>\n\n    <div class=\"vl-dialog-panel\"\n      [class.vl-dialog-panel-sm]=\"size() === 'sm'\"\n      [class.vl-dialog-panel-md]=\"size() === 'md'\"\n      [class.vl-dialog-panel-lg]=\"size() === 'lg'\">\n\n      <div class=\"vl-dialog-header\">\n        <div>\n          <h2>{{ title() }}</h2>\n          @if (subtitle()) {\n            <p>{{ subtitle() }}</p>\n          }\n        </div>\n        <button (click)=\"closed.emit()\" class=\"vl-dialog-close\" aria-label=\"Close\">\n          <svg class=\"w-4 h-4\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\"\n            stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n            <path d=\"M18 6L6 18M6 6l12 12\"/>\n          </svg>\n        </button>\n      </div>\n\n      <div class=\"vl-dialog-body\">\n        <ng-content />\n      </div>\n\n      @if (hasFooter()) {\n        <div class=\"vl-dialog-footer\">\n          <ng-content select=\"[dialog-footer]\" />\n        </div>\n      }\n\n    </div>\n  </div>\n}\n", styles: [".vl-dialog-overlay{position:fixed;inset:0;z-index:50;display:flex;align-items:flex-end;justify-content:center;padding:0}.vl-dialog-backdrop{position:absolute;inset:0;background-color:#0006;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}.vl-dialog-panel{position:relative;z-index:10;width:100%;max-height:92dvh;display:flex;flex-direction:column;background-color:var(--color-background, #fff);border-radius:1rem 1rem 0 0;box-shadow:0 25px 50px -12px #00000040;border:1px solid var(--color-border, #d1d5db);overflow:hidden}.vl-dialog-panel-sm{max-width:32rem}.vl-dialog-panel-md{max-width:42rem}.vl-dialog-panel-lg{max-width:48rem}.vl-dialog-header{display:flex;align-items:center;justify-content:space-between;padding:1rem 1.5rem;border-bottom:1px solid var(--color-border, #d1d5db);flex-shrink:0}.vl-dialog-header h2{font-size:1rem;font-weight:600;color:var(--color-foreground, #1f2937)}.vl-dialog-header p{font-size:.75rem;color:var(--color-muted-foreground, #6b7280);margin-top:.125rem}.vl-dialog-close{width:2rem;height:2rem;display:flex;align-items:center;justify-content:center;border-radius:.5rem;color:var(--color-muted-foreground, #6b7280);background:transparent;border:none;cursor:pointer;transition:background-color .15s,color .15s}.vl-dialog-close:hover{background-color:var(--color-muted, #f3f4f6);color:var(--color-foreground, #1f2937)}.vl-dialog-body{flex:1;overflow-y:auto}.vl-dialog-footer{flex-shrink:0;border-top:1px solid var(--color-border, #d1d5db);background-color:color-mix(in srgb,var(--color-muted, #f3f4f6) 20%,transparent)}@media(min-width:640px){.vl-dialog-overlay{align-items:center;padding:1rem}.vl-dialog-panel{border-radius:1rem;max-height:88vh}}\n"], encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: DialogComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'vl-dialog', standalone: true, encapsulation: ViewEncapsulation.None, template: "@if (isOpen()) {\n  <div class=\"vl-dialog-overlay\" role=\"dialog\" aria-modal=\"true\">\n\n    <div class=\"vl-dialog-backdrop\" (click)=\"closed.emit()\"></div>\n\n    <div class=\"vl-dialog-panel\"\n      [class.vl-dialog-panel-sm]=\"size() === 'sm'\"\n      [class.vl-dialog-panel-md]=\"size() === 'md'\"\n      [class.vl-dialog-panel-lg]=\"size() === 'lg'\">\n\n      <div class=\"vl-dialog-header\">\n        <div>\n          <h2>{{ title() }}</h2>\n          @if (subtitle()) {\n            <p>{{ subtitle() }}</p>\n          }\n        </div>\n        <button (click)=\"closed.emit()\" class=\"vl-dialog-close\" aria-label=\"Close\">\n          <svg class=\"w-4 h-4\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\"\n            stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n            <path d=\"M18 6L6 18M6 6l12 12\"/>\n          </svg>\n        </button>\n      </div>\n\n      <div class=\"vl-dialog-body\">\n        <ng-content />\n      </div>\n\n      @if (hasFooter()) {\n        <div class=\"vl-dialog-footer\">\n          <ng-content select=\"[dialog-footer]\" />\n        </div>\n      }\n\n    </div>\n  </div>\n}\n", styles: [".vl-dialog-overlay{position:fixed;inset:0;z-index:50;display:flex;align-items:flex-end;justify-content:center;padding:0}.vl-dialog-backdrop{position:absolute;inset:0;background-color:#0006;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}.vl-dialog-panel{position:relative;z-index:10;width:100%;max-height:92dvh;display:flex;flex-direction:column;background-color:var(--color-background, #fff);border-radius:1rem 1rem 0 0;box-shadow:0 25px 50px -12px #00000040;border:1px solid var(--color-border, #d1d5db);overflow:hidden}.vl-dialog-panel-sm{max-width:32rem}.vl-dialog-panel-md{max-width:42rem}.vl-dialog-panel-lg{max-width:48rem}.vl-dialog-header{display:flex;align-items:center;justify-content:space-between;padding:1rem 1.5rem;border-bottom:1px solid var(--color-border, #d1d5db);flex-shrink:0}.vl-dialog-header h2{font-size:1rem;font-weight:600;color:var(--color-foreground, #1f2937)}.vl-dialog-header p{font-size:.75rem;color:var(--color-muted-foreground, #6b7280);margin-top:.125rem}.vl-dialog-close{width:2rem;height:2rem;display:flex;align-items:center;justify-content:center;border-radius:.5rem;color:var(--color-muted-foreground, #6b7280);background:transparent;border:none;cursor:pointer;transition:background-color .15s,color .15s}.vl-dialog-close:hover{background-color:var(--color-muted, #f3f4f6);color:var(--color-foreground, #1f2937)}.vl-dialog-body{flex:1;overflow-y:auto}.vl-dialog-footer{flex-shrink:0;border-top:1px solid var(--color-border, #d1d5db);background-color:color-mix(in srgb,var(--color-muted, #f3f4f6) 20%,transparent)}@media(min-width:640px){.vl-dialog-overlay{align-items:center;padding:1rem}.vl-dialog-panel{border-radius:1rem;max-height:88vh}}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { isOpen: [{ type: i0.Input, args: [{ isSignal: true, alias: "isOpen", required: false }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], subtitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "subtitle", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], hasFooter: [{ type: i0.Input, args: [{ isSignal: true, alias: "hasFooter", required: false }] }], closed: [{ type: i0.Output, args: ["closed"] }], onEscape: [{
+                type: HostListener,
+                args: ['document:keydown.escape']
+            }] } });
+
+/**
+ * Pre-built confirmation dialog (wraps vl-dialog).
+ *
+ * Usage:
+ *   <vl-confirm-dialog
+ *     [isOpen]="showDelete()"
+ *     title="Delete Expense"
+ *     message="This action cannot be undone."
+ *     confirmLabel="Delete"
+ *     confirmVariant="danger"
+ *     [loading]="isDeleting()"
+ *     (confirmed)="onDelete()"
+ *     (cancelled)="showDelete.set(false)" />
+ */
+class ConfirmDialogComponent {
+    isOpen = input(false, ...(ngDevMode ? [{ debugName: "isOpen" }] : /* istanbul ignore next */ []));
+    title = input('Are you sure?', ...(ngDevMode ? [{ debugName: "title" }] : /* istanbul ignore next */ []));
+    subtitle = input(null, ...(ngDevMode ? [{ debugName: "subtitle" }] : /* istanbul ignore next */ []));
+    message = input('', ...(ngDevMode ? [{ debugName: "message" }] : /* istanbul ignore next */ []));
+    confirmLabel = input('Confirm', ...(ngDevMode ? [{ debugName: "confirmLabel" }] : /* istanbul ignore next */ []));
+    cancelLabel = input('Cancel', ...(ngDevMode ? [{ debugName: "cancelLabel" }] : /* istanbul ignore next */ []));
+    confirmVariant = input('danger', ...(ngDevMode ? [{ debugName: "confirmVariant" }] : /* istanbul ignore next */ []));
+    loading = input(false, ...(ngDevMode ? [{ debugName: "loading" }] : /* istanbul ignore next */ []));
+    confirmed = output();
+    cancelled = output();
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: ConfirmDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.5", type: ConfirmDialogComponent, isStandalone: true, selector: "vl-confirm-dialog", inputs: { isOpen: { classPropertyName: "isOpen", publicName: "isOpen", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, subtitle: { classPropertyName: "subtitle", publicName: "subtitle", isSignal: true, isRequired: false, transformFunction: null }, message: { classPropertyName: "message", publicName: "message", isSignal: true, isRequired: false, transformFunction: null }, confirmLabel: { classPropertyName: "confirmLabel", publicName: "confirmLabel", isSignal: true, isRequired: false, transformFunction: null }, cancelLabel: { classPropertyName: "cancelLabel", publicName: "cancelLabel", isSignal: true, isRequired: false, transformFunction: null }, confirmVariant: { classPropertyName: "confirmVariant", publicName: "confirmVariant", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { confirmed: "confirmed", cancelled: "cancelled" }, ngImport: i0, template: `
+    <vl-dialog
+      [isOpen]="isOpen()"
+      [title]="title()"
+      [subtitle]="subtitle()"
+      size="sm"
+      [hasFooter]="true"
+      (closed)="cancelled.emit()">
+
+      <div class="vl-confirm-body">
+        <p class="vl-confirm-message">{{ message() }}</p>
+        <ng-content />
+      </div>
+
+      <div dialog-footer class="vl-confirm-footer">
+        <vl-button variant="ghost" [disabled]="loading()" (click)="cancelled.emit()">
+          {{ cancelLabel() }}
+        </vl-button>
+        <vl-button [variant]="confirmVariant()" [loading]="loading()" (click)="confirmed.emit()">
+          {{ confirmLabel() }}
+        </vl-button>
+      </div>
+    </vl-dialog>
+  `, isInline: true, styles: [".vl-confirm-body{padding:1.5rem}.vl-confirm-message{font-size:.875rem;color:var(--color-muted-foreground, hsl(210 10% 50%));line-height:1.6;margin:0;font-family:var(--font-family-sans, inherit)}.vl-confirm-footer{display:flex;align-items:center;justify-content:flex-end;gap:.75rem;padding:1rem 1.5rem}\n"], dependencies: [{ kind: "component", type: DialogComponent, selector: "vl-dialog", inputs: ["isOpen", "title", "subtitle", "size", "hasFooter"], outputs: ["closed"] }, { kind: "component", type: ButtonComponent, selector: "vl-button", inputs: ["variant", "size", "loading", "disabled"] }], encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: ConfirmDialogComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'vl-confirm-dialog', standalone: true, imports: [DialogComponent, ButtonComponent], template: `
+    <vl-dialog
+      [isOpen]="isOpen()"
+      [title]="title()"
+      [subtitle]="subtitle()"
+      size="sm"
+      [hasFooter]="true"
+      (closed)="cancelled.emit()">
+
+      <div class="vl-confirm-body">
+        <p class="vl-confirm-message">{{ message() }}</p>
+        <ng-content />
+      </div>
+
+      <div dialog-footer class="vl-confirm-footer">
+        <vl-button variant="ghost" [disabled]="loading()" (click)="cancelled.emit()">
+          {{ cancelLabel() }}
+        </vl-button>
+        <vl-button [variant]="confirmVariant()" [loading]="loading()" (click)="confirmed.emit()">
+          {{ confirmLabel() }}
+        </vl-button>
+      </div>
+    </vl-dialog>
+  `, encapsulation: ViewEncapsulation.None, styles: [".vl-confirm-body{padding:1.5rem}.vl-confirm-message{font-size:.875rem;color:var(--color-muted-foreground, hsl(210 10% 50%));line-height:1.6;margin:0;font-family:var(--font-family-sans, inherit)}.vl-confirm-footer{display:flex;align-items:center;justify-content:flex-end;gap:.75rem;padding:1rem 1.5rem}\n"] }]
+        }], propDecorators: { isOpen: [{ type: i0.Input, args: [{ isSignal: true, alias: "isOpen", required: false }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], subtitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "subtitle", required: false }] }], message: [{ type: i0.Input, args: [{ isSignal: true, alias: "message", required: false }] }], confirmLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "confirmLabel", required: false }] }], cancelLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "cancelLabel", required: false }] }], confirmVariant: [{ type: i0.Input, args: [{ isSignal: true, alias: "confirmVariant", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], confirmed: [{ type: i0.Output, args: ["confirmed"] }], cancelled: [{ type: i0.Output, args: ["cancelled"] }] } });
+
+/**
+ * Dashed-border empty state card. Project an action button into the default slot.
+ *
+ * Usage:
+ *   <vl-empty-state
+ *     icon="M15 10.5a3 3 0 11-6 0..."
+ *     title="No trips yet"
+ *     description="Create your first trip to get started.">
+ *     <button (click)="create()">Create Trip</button>
+ *   </vl-empty-state>
+ */
+class EmptyStateComponent {
+    /** SVG path `d` attribute for the icon. Or project via <svg empty-icon>. */
+    icon = input('', ...(ngDevMode ? [{ debugName: "icon" }] : /* istanbul ignore next */ []));
+    title = input('Nothing here yet', ...(ngDevMode ? [{ debugName: "title" }] : /* istanbul ignore next */ []));
+    description = input('', ...(ngDevMode ? [{ debugName: "description" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: EmptyStateComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.5", type: EmptyStateComponent, isStandalone: true, selector: "vl-empty-state", inputs: { icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
+    <div class="vl-empty-state">
+      <div class="vl-empty-state-icon">
+        @if (icon()) {
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor"
+            stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
+            <path [attr.d]="icon()" />
+          </svg>
+        } @else {
+          <ng-content select="[empty-icon]" />
+        }
+      </div>
+      <h3 class="vl-empty-state-title">{{ title() }}</h3>
+      @if (description()) {
+        <p class="vl-empty-state-description">{{ description() }}</p>
+      }
+      <div class="vl-empty-state-action">
+        <ng-content />
+      </div>
+    </div>
+  `, isInline: true, styles: [".vl-empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:4rem 1.5rem;background-color:var(--color-card, #fff);border:1px dashed var(--color-border, hsl(210 15% 85%));border-radius:var(--radius-xl, .75rem);text-align:center;font-family:var(--font-family-sans, inherit)}.vl-empty-state-icon{width:3rem;height:3rem;border-radius:9999px;background-color:var(--color-muted, hsl(210 10% 95%));display:flex;align-items:center;justify-content:center;margin-bottom:1rem}.vl-empty-state-icon svg{width:1.5rem;height:1.5rem;color:var(--color-muted-foreground, hsl(210 10% 50%))}.vl-empty-state-title{font-size:.9375rem;font-weight:600;color:var(--color-foreground, #1f2937);margin:0 0 .375rem}.vl-empty-state-description{font-size:.875rem;color:var(--color-muted-foreground, hsl(210 10% 50%));margin:0;max-width:20rem;line-height:1.5}.vl-empty-state-action{margin-top:1.5rem;display:flex;gap:.75rem;flex-wrap:wrap;justify-content:center}.vl-empty-state-action:empty{display:none}\n"], encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: EmptyStateComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'vl-empty-state', standalone: true, template: `
+    <div class="vl-empty-state">
+      <div class="vl-empty-state-icon">
+        @if (icon()) {
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor"
+            stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
+            <path [attr.d]="icon()" />
+          </svg>
+        } @else {
+          <ng-content select="[empty-icon]" />
+        }
+      </div>
+      <h3 class="vl-empty-state-title">{{ title() }}</h3>
+      @if (description()) {
+        <p class="vl-empty-state-description">{{ description() }}</p>
+      }
+      <div class="vl-empty-state-action">
+        <ng-content />
+      </div>
+    </div>
+  `, encapsulation: ViewEncapsulation.None, styles: [".vl-empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:4rem 1.5rem;background-color:var(--color-card, #fff);border:1px dashed var(--color-border, hsl(210 15% 85%));border-radius:var(--radius-xl, .75rem);text-align:center;font-family:var(--font-family-sans, inherit)}.vl-empty-state-icon{width:3rem;height:3rem;border-radius:9999px;background-color:var(--color-muted, hsl(210 10% 95%));display:flex;align-items:center;justify-content:center;margin-bottom:1rem}.vl-empty-state-icon svg{width:1.5rem;height:1.5rem;color:var(--color-muted-foreground, hsl(210 10% 50%))}.vl-empty-state-title{font-size:.9375rem;font-weight:600;color:var(--color-foreground, #1f2937);margin:0 0 .375rem}.vl-empty-state-description{font-size:.875rem;color:var(--color-muted-foreground, hsl(210 10% 50%));margin:0;max-width:20rem;line-height:1.5}.vl-empty-state-action{margin-top:1.5rem;display:flex;gap:.75rem;flex-wrap:wrap;justify-content:center}.vl-empty-state-action:empty{display:none}\n"] }]
+        }], propDecorators: { icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], description: [{ type: i0.Input, args: [{ isSignal: true, alias: "description", required: false }] }] } });
+
+/**
+ * Label + error wrapper for native inputs. Use content projection for the
+ * actual <input> so reactive forms work without ControlValueAccessor.
+ *
+ * Usage:
+ *   <vl-input label="Trip Name" [error]="nameControl.errors && nameControl.touched ? 'Required' : null">
+ *     <input type="text" formControlName="name" placeholder="Paris Weekend" />
+ *   </vl-input>
+ */
+class InputComponent {
+    label = input('', ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
+    error = input(null, ...(ngDevMode ? [{ debugName: "error" }] : /* istanbul ignore next */ []));
+    hint = input('', ...(ngDevMode ? [{ debugName: "hint" }] : /* istanbul ignore next */ []));
+    prefix = input('', ...(ngDevMode ? [{ debugName: "prefix" }] : /* istanbul ignore next */ []));
+    required = input(false, ...(ngDevMode ? [{ debugName: "required" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: InputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.5", type: InputComponent, isStandalone: true, selector: "vl-input", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, prefix: { classPropertyName: "prefix", publicName: "prefix", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
+    <div class="vl-input-root">
+      @if (label()) {
+        <label class="vl-input-label" [class.vl-input-label-required]="required()">
+          {{ label() }}
+        </label>
+      }
+      <div class="vl-input-field" [class.vl-input-field-error]="!!error()">
+        @if (prefix()) {
+          <span class="vl-input-prefix">{{ prefix() }}</span>
+        }
+        <ng-content />
+      </div>
+      @if (error()) {
+        <p class="vl-input-error">{{ error() }}</p>
+      } @else if (hint()) {
+        <p class="vl-input-hint">{{ hint() }}</p>
+      }
+    </div>
+  `, isInline: true, styles: [".vl-input-root{display:flex;flex-direction:column;gap:.375rem;font-family:var(--font-family-sans, inherit)}.vl-input-label{display:block;font-size:.875rem;font-weight:500;color:var(--color-foreground, #1f2937)}.vl-input-label-required:after{content:\" *\";color:var(--color-destructive, hsl(0 70% 50%))}.vl-input-field{display:flex;align-items:center;border:1px solid var(--color-border, hsl(210 15% 85%));border-radius:var(--radius, .5rem);background-color:var(--color-background, #fff);transition:border-color .15s,box-shadow .15s}.vl-input-field:focus-within{border-color:var(--color-primary, hsl(215 80% 25%));box-shadow:0 0 0 3px color-mix(in srgb,var(--color-primary, hsl(215 80% 25%)) 15%,transparent)}.vl-input-field-error{border-color:var(--color-destructive, hsl(0 70% 50%))}.vl-input-field-error:focus-within{border-color:var(--color-destructive, hsl(0 70% 50%));box-shadow:0 0 0 3px color-mix(in srgb,var(--color-destructive, hsl(0 70% 50%)) 15%,transparent)}.vl-input-prefix{padding-left:.875rem;font-size:.875rem;font-weight:600;color:var(--color-muted-foreground, hsl(210 10% 50%));-webkit-user-select:none;user-select:none;flex-shrink:0}.vl-input-field ::slotted(input),.vl-input-field input{width:100%;padding:.625rem .875rem;font-size:.875rem;color:var(--color-foreground, #1f2937);background:transparent;border:none;outline:none;font-family:inherit;min-width:0}.vl-input-field input::placeholder{color:color-mix(in srgb,var(--color-muted-foreground, hsl(210 10% 50%)) 60%,transparent)}.vl-input-error{font-size:.75rem;color:var(--color-destructive, hsl(0 70% 50%));margin:0}.vl-input-hint{font-size:.75rem;color:var(--color-muted-foreground, hsl(210 10% 50%));margin:0}\n"], encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: InputComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'vl-input', standalone: true, template: `
+    <div class="vl-input-root">
+      @if (label()) {
+        <label class="vl-input-label" [class.vl-input-label-required]="required()">
+          {{ label() }}
+        </label>
+      }
+      <div class="vl-input-field" [class.vl-input-field-error]="!!error()">
+        @if (prefix()) {
+          <span class="vl-input-prefix">{{ prefix() }}</span>
+        }
+        <ng-content />
+      </div>
+      @if (error()) {
+        <p class="vl-input-error">{{ error() }}</p>
+      } @else if (hint()) {
+        <p class="vl-input-hint">{{ hint() }}</p>
+      }
+    </div>
+  `, encapsulation: ViewEncapsulation.None, styles: [".vl-input-root{display:flex;flex-direction:column;gap:.375rem;font-family:var(--font-family-sans, inherit)}.vl-input-label{display:block;font-size:.875rem;font-weight:500;color:var(--color-foreground, #1f2937)}.vl-input-label-required:after{content:\" *\";color:var(--color-destructive, hsl(0 70% 50%))}.vl-input-field{display:flex;align-items:center;border:1px solid var(--color-border, hsl(210 15% 85%));border-radius:var(--radius, .5rem);background-color:var(--color-background, #fff);transition:border-color .15s,box-shadow .15s}.vl-input-field:focus-within{border-color:var(--color-primary, hsl(215 80% 25%));box-shadow:0 0 0 3px color-mix(in srgb,var(--color-primary, hsl(215 80% 25%)) 15%,transparent)}.vl-input-field-error{border-color:var(--color-destructive, hsl(0 70% 50%))}.vl-input-field-error:focus-within{border-color:var(--color-destructive, hsl(0 70% 50%));box-shadow:0 0 0 3px color-mix(in srgb,var(--color-destructive, hsl(0 70% 50%)) 15%,transparent)}.vl-input-prefix{padding-left:.875rem;font-size:.875rem;font-weight:600;color:var(--color-muted-foreground, hsl(210 10% 50%));-webkit-user-select:none;user-select:none;flex-shrink:0}.vl-input-field ::slotted(input),.vl-input-field input{width:100%;padding:.625rem .875rem;font-size:.875rem;color:var(--color-foreground, #1f2937);background:transparent;border:none;outline:none;font-family:inherit;min-width:0}.vl-input-field input::placeholder{color:color-mix(in srgb,var(--color-muted-foreground, hsl(210 10% 50%)) 60%,transparent)}.vl-input-error{font-size:.75rem;color:var(--color-destructive, hsl(0 70% 50%));margin:0}.vl-input-hint{font-size:.75rem;color:var(--color-muted-foreground, hsl(210 10% 50%));margin:0}\n"] }]
+        }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], error: [{ type: i0.Input, args: [{ isSignal: true, alias: "error", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], prefix: [{ type: i0.Input, args: [{ isSignal: true, alias: "prefix", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }] } });
+
+class LoaderComponent {
+    message = input('', ...(ngDevMode ? [{ debugName: "message" }] : /* istanbul ignore next */ []));
+    fullPage = input(false, ...(ngDevMode ? [{ debugName: "fullPage" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: LoaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.5", type: LoaderComponent, isStandalone: true, selector: "vl-loader", inputs: { message: { classPropertyName: "message", publicName: "message", isSignal: true, isRequired: false, transformFunction: null }, fullPage: { classPropertyName: "fullPage", publicName: "fullPage", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
+    <div class="vl-loader" [class.vl-loader-fullpage]="fullPage()">
+      <div class="vl-loader-spinner">
+        <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+          <circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="2.5" opacity="0.2" />
+          <path d="M12 2a10 10 0 0 1 10 10" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" />
+        </svg>
+      </div>
+      @if (message()) {
+        <p class="vl-loader-message">{{ message() }}</p>
+      }
+    </div>
+  `, isInline: true, styles: [".vl-loader{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.75rem;padding:3rem 1.5rem}.vl-loader-fullpage{min-height:16rem}.vl-loader-spinner{width:2rem;height:2rem;color:var(--color-primary, #6366f1);animation:vl-spin .8s linear infinite}.vl-loader-spinner svg{width:100%;height:100%}.vl-loader-message{font-size:.875rem;color:var(--color-muted-foreground, #6b7280);margin:0}@keyframes vl-spin{to{transform:rotate(360deg)}}\n"], encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: LoaderComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'vl-loader', standalone: true, template: `
+    <div class="vl-loader" [class.vl-loader-fullpage]="fullPage()">
+      <div class="vl-loader-spinner">
+        <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+          <circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="2.5" opacity="0.2" />
+          <path d="M12 2a10 10 0 0 1 10 10" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" />
+        </svg>
+      </div>
+      @if (message()) {
+        <p class="vl-loader-message">{{ message() }}</p>
+      }
+    </div>
+  `, encapsulation: ViewEncapsulation.None, styles: [".vl-loader{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.75rem;padding:3rem 1.5rem}.vl-loader-fullpage{min-height:16rem}.vl-loader-spinner{width:2rem;height:2rem;color:var(--color-primary, #6366f1);animation:vl-spin .8s linear infinite}.vl-loader-spinner svg{width:100%;height:100%}.vl-loader-message{font-size:.875rem;color:var(--color-muted-foreground, #6b7280);margin:0}@keyframes vl-spin{to{transform:rotate(360deg)}}\n"] }]
+        }], propDecorators: { message: [{ type: i0.Input, args: [{ isSignal: true, alias: "message", required: false }] }], fullPage: [{ type: i0.Input, args: [{ isSignal: true, alias: "fullPage", required: false }] }] } });
+
+/**
+ * Three-segment password strength indicator.
+ *
+ * Usage:
+ *   <vl-password-strength [strength]="passwordStrength()" />
+ */
+class PasswordStrengthComponent {
+    strength = input(null, ...(ngDevMode ? [{ debugName: "strength" }] : /* istanbul ignore next */ []));
+    showLabel = input(true, ...(ngDevMode ? [{ debugName: "showLabel" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: PasswordStrengthComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.5", type: PasswordStrengthComponent, isStandalone: true, selector: "vl-password-strength", inputs: { strength: { classPropertyName: "strength", publicName: "strength", isSignal: true, isRequired: false, transformFunction: null }, showLabel: { classPropertyName: "showLabel", publicName: "showLabel", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
+    <div class="vl-pw-root">
+      <div class="vl-pw-bars">
+        <div class="vl-pw-bar"
+          [class.vl-pw-bar-weak]="strength() === 'weak'"
+          [class.vl-pw-bar-inactive]="!strength()"></div>
+        <div class="vl-pw-bar"
+          [class.vl-pw-bar-medium]="strength() === 'medium'"
+          [class.vl-pw-bar-strong]="strength() === 'strong'"
+          [class.vl-pw-bar-inactive]="strength() !== 'medium' && strength() !== 'strong'"></div>
+        <div class="vl-pw-bar"
+          [class.vl-pw-bar-strong]="strength() === 'strong'"
+          [class.vl-pw-bar-inactive]="strength() !== 'strong'"></div>
+      </div>
+      @if (showLabel() && strength()) {
+        <span class="vl-pw-label" [class]="'vl-pw-label-' + strength()">
+          {{ strength() | titlecase }}
+        </span>
+      }
+    </div>
+  `, isInline: true, styles: [".vl-pw-root{display:flex;align-items:center;gap:.625rem;font-family:var(--font-family-sans, inherit)}.vl-pw-bars{display:flex;flex:1;gap:.25rem;height:.375rem}.vl-pw-bar{flex:1;border-radius:9999px;transition:background-color .3s ease;background-color:var(--color-border, hsl(210 15% 85%))}.vl-pw-bar-inactive{background-color:var(--color-border, hsl(210 15% 85%))}.vl-pw-bar-weak{background-color:var(--color-destructive, hsl(0 70% 50%))}.vl-pw-bar-medium{background-color:#f2b90d}.vl-pw-bar-strong{background-color:var(--color-accent, hsl(150 60% 35%))}.vl-pw-label{font-size:.6875rem;font-weight:600;white-space:nowrap}.vl-pw-label-weak{color:var(--color-destructive, hsl(0 70% 50%))}.vl-pw-label-medium{color:#c2940a}.vl-pw-label-strong{color:var(--color-accent, hsl(150 60% 35%))}\n"], dependencies: [{ kind: "pipe", type: TitleCasePipe, name: "titlecase" }], encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: PasswordStrengthComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'vl-password-strength', standalone: true, imports: [TitleCasePipe], template: `
+    <div class="vl-pw-root">
+      <div class="vl-pw-bars">
+        <div class="vl-pw-bar"
+          [class.vl-pw-bar-weak]="strength() === 'weak'"
+          [class.vl-pw-bar-inactive]="!strength()"></div>
+        <div class="vl-pw-bar"
+          [class.vl-pw-bar-medium]="strength() === 'medium'"
+          [class.vl-pw-bar-strong]="strength() === 'strong'"
+          [class.vl-pw-bar-inactive]="strength() !== 'medium' && strength() !== 'strong'"></div>
+        <div class="vl-pw-bar"
+          [class.vl-pw-bar-strong]="strength() === 'strong'"
+          [class.vl-pw-bar-inactive]="strength() !== 'strong'"></div>
+      </div>
+      @if (showLabel() && strength()) {
+        <span class="vl-pw-label" [class]="'vl-pw-label-' + strength()">
+          {{ strength() | titlecase }}
+        </span>
+      }
+    </div>
+  `, encapsulation: ViewEncapsulation.None, styles: [".vl-pw-root{display:flex;align-items:center;gap:.625rem;font-family:var(--font-family-sans, inherit)}.vl-pw-bars{display:flex;flex:1;gap:.25rem;height:.375rem}.vl-pw-bar{flex:1;border-radius:9999px;transition:background-color .3s ease;background-color:var(--color-border, hsl(210 15% 85%))}.vl-pw-bar-inactive{background-color:var(--color-border, hsl(210 15% 85%))}.vl-pw-bar-weak{background-color:var(--color-destructive, hsl(0 70% 50%))}.vl-pw-bar-medium{background-color:#f2b90d}.vl-pw-bar-strong{background-color:var(--color-accent, hsl(150 60% 35%))}.vl-pw-label{font-size:.6875rem;font-weight:600;white-space:nowrap}.vl-pw-label-weak{color:var(--color-destructive, hsl(0 70% 50%))}.vl-pw-label-medium{color:#c2940a}.vl-pw-label-strong{color:var(--color-accent, hsl(150 60% 35%))}\n"] }]
+        }], propDecorators: { strength: [{ type: i0.Input, args: [{ isSignal: true, alias: "strength", required: false }] }], showLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "showLabel", required: false }] }] } });
+
+/**
+ * Horizontal progress bar with optional label and percentage text.
+ *
+ * Usage:
+ *   <vl-progress-bar [value]="75" />
+ *   <vl-progress-bar [value]="budgetUsed" variant="auto" [showLabel]="true" />
+ */
+class ProgressBarComponent {
+    value = input(0, ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    variant = input('auto', ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
+    showLabel = input(false, ...(ngDevMode ? [{ debugName: "showLabel" }] : /* istanbul ignore next */ []));
+    label = input('', ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
+    clampedValue = computed(() => Math.min(100, Math.max(0, this.value())), ...(ngDevMode ? [{ debugName: "clampedValue" }] : /* istanbul ignore next */ []));
+    resolvedVariant = computed(() => {
+        if (this.variant() !== 'auto')
+            return this.variant();
+        const v = this.clampedValue();
+        if (v >= 90)
+            return 'danger';
+        if (v >= 75)
+            return 'warning';
+        return 'primary';
+    }, ...(ngDevMode ? [{ debugName: "resolvedVariant" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: ProgressBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.5", type: ProgressBarComponent, isStandalone: true, selector: "vl-progress-bar", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, showLabel: { classPropertyName: "showLabel", publicName: "showLabel", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
+    <div class="vl-progress-root">
+      @if (label()) {
+        <div class="vl-progress-header">
+          <span class="vl-progress-label">{{ label() }}</span>
+          @if (showLabel()) {
+            <span class="vl-progress-pct">{{ clampedValue() }}%</span>
+          }
+        </div>
+      } @else if (showLabel()) {
+        <div class="vl-progress-header vl-progress-header-end">
+          <span class="vl-progress-pct">{{ clampedValue() }}%</span>
+        </div>
+      }
+      <div class="vl-progress-track">
+        <div class="vl-progress-fill"
+          [class]="'vl-progress-fill-' + resolvedVariant()"
+          [style.width.%]="clampedValue()">
+        </div>
+      </div>
+    </div>
+  `, isInline: true, styles: [".vl-progress-root{display:flex;flex-direction:column;gap:.375rem}.vl-progress-header{display:flex;align-items:center;justify-content:space-between}.vl-progress-header-end{justify-content:flex-end}.vl-progress-label{font-size:.75rem;font-weight:500;color:var(--color-muted-foreground, hsl(210 10% 50%));font-family:var(--font-family-sans, inherit)}.vl-progress-pct{font-size:.6875rem;font-weight:500;color:var(--color-muted-foreground, hsl(210 10% 50%));font-family:var(--font-family-sans, inherit)}.vl-progress-track{height:.375rem;background-color:var(--color-border, hsl(210 15% 85%));border-radius:9999px;overflow:hidden}.vl-progress-fill{height:100%;border-radius:9999px;transition:width .5s ease,background-color .3s ease}.vl-progress-fill-primary{background-color:var(--color-primary, hsl(215 80% 25%))}.vl-progress-fill-warning{background-color:var(--color-secondary, hsl(15 90% 55%))}.vl-progress-fill-danger{background-color:var(--color-destructive, hsl(0 70% 50%))}\n"], encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: ProgressBarComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'vl-progress-bar', standalone: true, template: `
+    <div class="vl-progress-root">
+      @if (label()) {
+        <div class="vl-progress-header">
+          <span class="vl-progress-label">{{ label() }}</span>
+          @if (showLabel()) {
+            <span class="vl-progress-pct">{{ clampedValue() }}%</span>
+          }
+        </div>
+      } @else if (showLabel()) {
+        <div class="vl-progress-header vl-progress-header-end">
+          <span class="vl-progress-pct">{{ clampedValue() }}%</span>
+        </div>
+      }
+      <div class="vl-progress-track">
+        <div class="vl-progress-fill"
+          [class]="'vl-progress-fill-' + resolvedVariant()"
+          [style.width.%]="clampedValue()">
+        </div>
+      </div>
+    </div>
+  `, encapsulation: ViewEncapsulation.None, styles: [".vl-progress-root{display:flex;flex-direction:column;gap:.375rem}.vl-progress-header{display:flex;align-items:center;justify-content:space-between}.vl-progress-header-end{justify-content:flex-end}.vl-progress-label{font-size:.75rem;font-weight:500;color:var(--color-muted-foreground, hsl(210 10% 50%));font-family:var(--font-family-sans, inherit)}.vl-progress-pct{font-size:.6875rem;font-weight:500;color:var(--color-muted-foreground, hsl(210 10% 50%));font-family:var(--font-family-sans, inherit)}.vl-progress-track{height:.375rem;background-color:var(--color-border, hsl(210 15% 85%));border-radius:9999px;overflow:hidden}.vl-progress-fill{height:100%;border-radius:9999px;transition:width .5s ease,background-color .3s ease}.vl-progress-fill-primary{background-color:var(--color-primary, hsl(215 80% 25%))}.vl-progress-fill-warning{background-color:var(--color-secondary, hsl(15 90% 55%))}.vl-progress-fill-danger{background-color:var(--color-destructive, hsl(0 70% 50%))}\n"] }]
+        }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], showLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "showLabel", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }] } });
+
+/**
+ * Label + error wrapper for native <select> elements.
+ *
+ * Usage:
+ *   <vl-select label="Currency" [error]="currencyControl.invalid && currencyControl.touched ? 'Required' : null">
+ *     <select formControlName="currency">
+ *       <option value="USD">USD</option>
+ *     </select>
+ *   </vl-select>
+ */
+class SelectComponent {
+    label = input('', ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
+    error = input(null, ...(ngDevMode ? [{ debugName: "error" }] : /* istanbul ignore next */ []));
+    hint = input('', ...(ngDevMode ? [{ debugName: "hint" }] : /* istanbul ignore next */ []));
+    required = input(false, ...(ngDevMode ? [{ debugName: "required" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: SelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.5", type: SelectComponent, isStandalone: true, selector: "vl-select", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
+    <div class="vl-select-root">
+      @if (label()) {
+        <label class="vl-select-label" [class.vl-select-label-required]="required()">
+          {{ label() }}
+        </label>
+      }
+      <div class="vl-select-field" [class.vl-select-field-error]="!!error()">
+        <ng-content />
+        <span class="vl-select-caret" aria-hidden="true">
+          <svg viewBox="0 0 16 16" fill="currentColor">
+            <path fill-rule="evenodd" d="M4.22 6.22a.75.75 0 0 1 1.06 0L8 8.94l2.72-2.72a.75.75 0 1 1 1.06 1.06l-3.25 3.25a.75.75 0 0 1-1.06 0L4.22 7.28a.75.75 0 0 1 0-1.06z"/>
+          </svg>
+        </span>
+      </div>
+      @if (error()) {
+        <p class="vl-select-error">{{ error() }}</p>
+      } @else if (hint()) {
+        <p class="vl-select-hint">{{ hint() }}</p>
+      }
+    </div>
+  `, isInline: true, styles: [".vl-select-root{display:flex;flex-direction:column;gap:.375rem;font-family:var(--font-family-sans, inherit)}.vl-select-label{display:block;font-size:.875rem;font-weight:500;color:var(--color-foreground, #1f2937)}.vl-select-label-required:after{content:\" *\";color:var(--color-destructive, hsl(0 70% 50%))}.vl-select-field{position:relative;display:flex;align-items:center;border:1px solid var(--color-border, hsl(210 15% 85%));border-radius:var(--radius, .5rem);background-color:var(--color-background, #fff);transition:border-color .15s,box-shadow .15s}.vl-select-field:focus-within{border-color:var(--color-primary, hsl(215 80% 25%));box-shadow:0 0 0 3px color-mix(in srgb,var(--color-primary, hsl(215 80% 25%)) 15%,transparent)}.vl-select-field-error{border-color:var(--color-destructive, hsl(0 70% 50%))}.vl-select-field-error:focus-within{border-color:var(--color-destructive, hsl(0 70% 50%));box-shadow:0 0 0 3px color-mix(in srgb,var(--color-destructive, hsl(0 70% 50%)) 15%,transparent)}.vl-select-field select{width:100%;padding:.625rem 2.25rem .625rem .875rem;font-size:.875rem;color:var(--color-foreground, #1f2937);background:transparent;border:none;outline:none;appearance:none;-webkit-appearance:none;cursor:pointer;font-family:inherit}.vl-select-caret{position:absolute;right:.75rem;pointer-events:none;color:var(--color-muted-foreground, hsl(210 10% 50%));display:flex;align-items:center}.vl-select-caret svg{width:1rem;height:1rem}.vl-select-error{font-size:.75rem;color:var(--color-destructive, hsl(0 70% 50%));margin:0}.vl-select-hint{font-size:.75rem;color:var(--color-muted-foreground, hsl(210 10% 50%));margin:0}\n"], encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: SelectComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'vl-select', standalone: true, template: `
+    <div class="vl-select-root">
+      @if (label()) {
+        <label class="vl-select-label" [class.vl-select-label-required]="required()">
+          {{ label() }}
+        </label>
+      }
+      <div class="vl-select-field" [class.vl-select-field-error]="!!error()">
+        <ng-content />
+        <span class="vl-select-caret" aria-hidden="true">
+          <svg viewBox="0 0 16 16" fill="currentColor">
+            <path fill-rule="evenodd" d="M4.22 6.22a.75.75 0 0 1 1.06 0L8 8.94l2.72-2.72a.75.75 0 1 1 1.06 1.06l-3.25 3.25a.75.75 0 0 1-1.06 0L4.22 7.28a.75.75 0 0 1 0-1.06z"/>
+          </svg>
+        </span>
+      </div>
+      @if (error()) {
+        <p class="vl-select-error">{{ error() }}</p>
+      } @else if (hint()) {
+        <p class="vl-select-hint">{{ hint() }}</p>
+      }
+    </div>
+  `, encapsulation: ViewEncapsulation.None, styles: [".vl-select-root{display:flex;flex-direction:column;gap:.375rem;font-family:var(--font-family-sans, inherit)}.vl-select-label{display:block;font-size:.875rem;font-weight:500;color:var(--color-foreground, #1f2937)}.vl-select-label-required:after{content:\" *\";color:var(--color-destructive, hsl(0 70% 50%))}.vl-select-field{position:relative;display:flex;align-items:center;border:1px solid var(--color-border, hsl(210 15% 85%));border-radius:var(--radius, .5rem);background-color:var(--color-background, #fff);transition:border-color .15s,box-shadow .15s}.vl-select-field:focus-within{border-color:var(--color-primary, hsl(215 80% 25%));box-shadow:0 0 0 3px color-mix(in srgb,var(--color-primary, hsl(215 80% 25%)) 15%,transparent)}.vl-select-field-error{border-color:var(--color-destructive, hsl(0 70% 50%))}.vl-select-field-error:focus-within{border-color:var(--color-destructive, hsl(0 70% 50%));box-shadow:0 0 0 3px color-mix(in srgb,var(--color-destructive, hsl(0 70% 50%)) 15%,transparent)}.vl-select-field select{width:100%;padding:.625rem 2.25rem .625rem .875rem;font-size:.875rem;color:var(--color-foreground, #1f2937);background:transparent;border:none;outline:none;appearance:none;-webkit-appearance:none;cursor:pointer;font-family:inherit}.vl-select-caret{position:absolute;right:.75rem;pointer-events:none;color:var(--color-muted-foreground, hsl(210 10% 50%));display:flex;align-items:center}.vl-select-caret svg{width:1rem;height:1rem}.vl-select-error{font-size:.75rem;color:var(--color-destructive, hsl(0 70% 50%));margin:0}.vl-select-hint{font-size:.75rem;color:var(--color-muted-foreground, hsl(210 10% 50%));margin:0}\n"] }]
+        }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], error: [{ type: i0.Input, args: [{ isSignal: true, alias: "error", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }] } });
+
+/**
+ * Shimmer placeholder for loading states.
+ *
+ * Usage:
+ *   <vl-skeleton />                         — single line, full width
+ *   <vl-skeleton width="60%" height="1rem" />
+ *   <vl-skeleton shape="circle" width="3rem" height="3rem" />
+ *   <vl-skeleton [lines]="3" />             — stacked paragraph lines
+ */
+class SkeletonComponent {
+    width = input('100%', ...(ngDevMode ? [{ debugName: "width" }] : /* istanbul ignore next */ []));
+    height = input('1rem', ...(ngDevMode ? [{ debugName: "height" }] : /* istanbul ignore next */ []));
+    shape = input('rect', ...(ngDevMode ? [{ debugName: "shape" }] : /* istanbul ignore next */ []));
+    lines = input(1, ...(ngDevMode ? [{ debugName: "lines" }] : /* istanbul ignore next */ []));
+    lineArr() {
+        return Array.from({ length: this.lines() }, (_, i) => i);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: SkeletonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.5", type: SkeletonComponent, isStandalone: true, selector: "vl-skeleton", inputs: { width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, shape: { classPropertyName: "shape", publicName: "shape", isSignal: true, isRequired: false, transformFunction: null }, lines: { classPropertyName: "lines", publicName: "lines", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
+    @if (lines() > 1) {
+      <div class="vl-skeleton-group">
+        @for (i of lineArr(); track i; let last = $last) {
+          <div class="vl-skeleton"
+            [class.vl-skeleton-circle]="shape() === 'circle'"
+            [style.width]="last ? '60%' : '100%'"
+            [style.height]="height()">
+          </div>
+        }
+      </div>
+    } @else {
+      <div class="vl-skeleton"
+        [class.vl-skeleton-circle]="shape() === 'circle'"
+        [style.width]="width()"
+        [style.height]="height()">
+      </div>
+    }
+  `, isInline: true, styles: [".vl-skeleton{display:block;background:linear-gradient(90deg,var(--color-muted, hsl(210 10% 93%)) 25%,color-mix(in srgb,var(--color-muted, hsl(210 10% 93%)) 60%,white) 50%,var(--color-muted, hsl(210 10% 93%)) 75%);background-size:200% 100%;border-radius:calc(var(--radius, .5rem) * .5);animation:vl-shimmer 1.5s infinite linear}.vl-skeleton-circle{border-radius:9999px}.vl-skeleton-group{display:flex;flex-direction:column;gap:.5rem}@keyframes vl-shimmer{0%{background-position:200% 0}to{background-position:-200% 0}}\n"], encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: SkeletonComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'vl-skeleton', standalone: true, template: `
+    @if (lines() > 1) {
+      <div class="vl-skeleton-group">
+        @for (i of lineArr(); track i; let last = $last) {
+          <div class="vl-skeleton"
+            [class.vl-skeleton-circle]="shape() === 'circle'"
+            [style.width]="last ? '60%' : '100%'"
+            [style.height]="height()">
+          </div>
+        }
+      </div>
+    } @else {
+      <div class="vl-skeleton"
+        [class.vl-skeleton-circle]="shape() === 'circle'"
+        [style.width]="width()"
+        [style.height]="height()">
+      </div>
+    }
+  `, encapsulation: ViewEncapsulation.None, styles: [".vl-skeleton{display:block;background:linear-gradient(90deg,var(--color-muted, hsl(210 10% 93%)) 25%,color-mix(in srgb,var(--color-muted, hsl(210 10% 93%)) 60%,white) 50%,var(--color-muted, hsl(210 10% 93%)) 75%);background-size:200% 100%;border-radius:calc(var(--radius, .5rem) * .5);animation:vl-shimmer 1.5s infinite linear}.vl-skeleton-circle{border-radius:9999px}.vl-skeleton-group{display:flex;flex-direction:column;gap:.5rem}@keyframes vl-shimmer{0%{background-position:200% 0}to{background-position:-200% 0}}\n"] }]
+        }], propDecorators: { width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }], height: [{ type: i0.Input, args: [{ isSignal: true, alias: "height", required: false }] }], shape: [{ type: i0.Input, args: [{ isSignal: true, alias: "shape", required: false }] }], lines: [{ type: i0.Input, args: [{ isSignal: true, alias: "lines", required: false }] }] } });
+
+/**
+ * Compact labeled metric card.
+ *
+ * Usage:
+ *   <vl-stat-card label="Budget" value="$2,400" />
+ *   <vl-stat-card label="Spent" value="$1,200" valueVariant="secondary" />
+ */
+class StatCardComponent {
+    label = input('', ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
+    value = input('', ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    subtext = input('', ...(ngDevMode ? [{ debugName: "subtext" }] : /* istanbul ignore next */ []));
+    valueVariant = input('default', ...(ngDevMode ? [{ debugName: "valueVariant" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: StatCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.5", type: StatCardComponent, isStandalone: true, selector: "vl-stat-card", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, subtext: { classPropertyName: "subtext", publicName: "subtext", isSignal: true, isRequired: false, transformFunction: null }, valueVariant: { classPropertyName: "valueVariant", publicName: "valueVariant", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
+    <div class="vl-stat-card">
+      <p class="vl-stat-label">{{ label() }}</p>
+      <p class="vl-stat-value" [class]="'vl-stat-value-' + valueVariant()">{{ value() }}</p>
+      @if (subtext()) {
+        <p class="vl-stat-subtext">{{ subtext() }}</p>
+      }
+    </div>
+  `, isInline: true, styles: [".vl-stat-card{background-color:var(--color-card, #fff);border:1px solid var(--color-border, hsl(210 15% 85%));border-radius:var(--radius-xl, .75rem);padding:1.25rem;text-align:center;font-family:var(--font-family-sans, inherit)}.vl-stat-label{font-size:.6875rem;font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:var(--color-muted-foreground, hsl(210 10% 50%));margin:0 0 .5rem}.vl-stat-value{font-size:1.5rem;font-weight:700;margin:0;line-height:1.2}.vl-stat-value-default{color:var(--color-foreground, #1f2937)}.vl-stat-value-primary{color:var(--color-primary, hsl(215 80% 25%))}.vl-stat-value-secondary{color:var(--color-secondary, hsl(15 90% 55%))}.vl-stat-value-accent{color:var(--color-accent, hsl(150 60% 35%))}.vl-stat-value-destructive{color:var(--color-destructive, hsl(0 70% 50%))}.vl-stat-subtext{font-size:.75rem;color:var(--color-muted-foreground, hsl(210 10% 50%));margin:.375rem 0 0}\n"], encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: StatCardComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'vl-stat-card', standalone: true, template: `
+    <div class="vl-stat-card">
+      <p class="vl-stat-label">{{ label() }}</p>
+      <p class="vl-stat-value" [class]="'vl-stat-value-' + valueVariant()">{{ value() }}</p>
+      @if (subtext()) {
+        <p class="vl-stat-subtext">{{ subtext() }}</p>
+      }
+    </div>
+  `, encapsulation: ViewEncapsulation.None, styles: [".vl-stat-card{background-color:var(--color-card, #fff);border:1px solid var(--color-border, hsl(210 15% 85%));border-radius:var(--radius-xl, .75rem);padding:1.25rem;text-align:center;font-family:var(--font-family-sans, inherit)}.vl-stat-label{font-size:.6875rem;font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:var(--color-muted-foreground, hsl(210 10% 50%));margin:0 0 .5rem}.vl-stat-value{font-size:1.5rem;font-weight:700;margin:0;line-height:1.2}.vl-stat-value-default{color:var(--color-foreground, #1f2937)}.vl-stat-value-primary{color:var(--color-primary, hsl(215 80% 25%))}.vl-stat-value-secondary{color:var(--color-secondary, hsl(15 90% 55%))}.vl-stat-value-accent{color:var(--color-accent, hsl(150 60% 35%))}.vl-stat-value-destructive{color:var(--color-destructive, hsl(0 70% 50%))}.vl-stat-subtext{font-size:.75rem;color:var(--color-muted-foreground, hsl(210 10% 50%));margin:.375rem 0 0}\n"] }]
+        }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], subtext: [{ type: i0.Input, args: [{ isSignal: true, alias: "subtext", required: false }] }], valueVariant: [{ type: i0.Input, args: [{ isSignal: true, alias: "valueVariant", required: false }] }] } });
+
+/**
+ * Attribute directive that renders an accessible tooltip near the host element.
+ *
+ * Usage:
+ *   <button vlTooltip="Save changes">Save</button>
+ *   <span [vlTooltip]="label" vlTooltipPosition="bottom">...</span>
+ */
+class TooltipDirective {
+    vlTooltip = input('', ...(ngDevMode ? [{ debugName: "vlTooltip" }] : /* istanbul ignore next */ []));
+    vlTooltipPosition = input('top', ...(ngDevMode ? [{ debugName: "vlTooltipPosition" }] : /* istanbul ignore next */ []));
+    vlTooltipDelay = input(200, ...(ngDevMode ? [{ debugName: "vlTooltipDelay" }] : /* istanbul ignore next */ []));
+    tooltipId = `vl-tooltip-${Math.random().toString(36).slice(2, 8)}`;
+    el = inject((ElementRef));
+    platformId = inject(PLATFORM_ID);
+    tooltipEl = null;
+    showTimer = null;
+    show() {
+        if (!isPlatformBrowser(this.platformId) || !this.vlTooltip())
+            return;
+        this.showTimer = setTimeout(() => this.create(), this.vlTooltipDelay());
+    }
+    hide() {
+        if (this.showTimer) {
+            clearTimeout(this.showTimer);
+            this.showTimer = null;
+        }
+        this.destroy();
+    }
+    ngOnDestroy() {
+        this.hide();
+    }
+    create() {
+        if (this.tooltipEl)
+            return;
+        const tip = document.createElement('div');
+        tip.id = this.tooltipId;
+        tip.role = 'tooltip';
+        tip.className = 'vl-tooltip';
+        tip.textContent = this.vlTooltip();
+        tip.setAttribute('data-position', this.vlTooltipPosition());
+        document.body.appendChild(tip);
+        this.tooltipEl = tip;
+        this.injectStyles();
+        this.position(tip);
+        // Trigger enter animation on next frame so the transition fires
+        requestAnimationFrame(() => tip.classList.add('vl-tooltip-visible'));
+    }
+    destroy() {
+        if (!this.tooltipEl)
+            return;
+        const tip = this.tooltipEl;
+        tip.classList.remove('vl-tooltip-visible');
+        // Wait for the fade-out transition before removing from DOM
+        tip.addEventListener('transitionend', () => tip.remove(), { once: true });
+        this.tooltipEl = null;
+    }
+    position(tip) {
+        const hostRect = this.el.nativeElement.getBoundingClientRect();
+        const pos = this.vlTooltipPosition();
+        const GAP = 8;
+        // Temporarily make visible to measure size
+        tip.style.visibility = 'hidden';
+        tip.style.display = 'block';
+        const tipRect = tip.getBoundingClientRect();
+        tip.style.visibility = '';
+        tip.style.display = '';
+        let top;
+        let left;
+        switch (pos) {
+            case 'bottom':
+                top = hostRect.bottom + window.scrollY + GAP;
+                left = hostRect.left + window.scrollX + hostRect.width / 2 - tipRect.width / 2;
+                break;
+            case 'left':
+                top = hostRect.top + window.scrollY + hostRect.height / 2 - tipRect.height / 2;
+                left = hostRect.left + window.scrollX - tipRect.width - GAP;
+                break;
+            case 'right':
+                top = hostRect.top + window.scrollY + hostRect.height / 2 - tipRect.height / 2;
+                left = hostRect.right + window.scrollX + GAP;
+                break;
+            default: // top
+                top = hostRect.top + window.scrollY - tipRect.height - GAP;
+                left = hostRect.left + window.scrollX + hostRect.width / 2 - tipRect.width / 2;
+                break;
+        }
+        // Keep within horizontal viewport bounds
+        left = Math.max(8, Math.min(left, window.innerWidth - tipRect.width - 8));
+        tip.style.top = `${top}px`;
+        tip.style.left = `${left}px`;
+    }
+    injectStyles() {
+        const STYLE_ID = 'vl-tooltip-styles';
+        if (document.getElementById(STYLE_ID))
+            return;
+        const style = document.createElement('style');
+        style.id = STYLE_ID;
+        style.textContent = `
+      .vl-tooltip {
+        position: absolute;
+        z-index: 10000;
+        padding: 0.3125rem 0.625rem;
+        background-color: var(--color-foreground, #1f2937);
+        color: var(--color-background, #fff);
+        font-size: 0.75rem;
+        font-family: var(--font-family-sans, inherit);
+        line-height: 1.4;
+        border-radius: calc(var(--radius, 0.5rem) * 0.75);
+        white-space: nowrap;
+        pointer-events: none;
+        max-width: 16rem;
+        white-space: normal;
+        text-align: center;
+        opacity: 0;
+        transform: scale(0.95);
+        transition: opacity 0.15s ease, transform 0.15s ease;
+        box-shadow: 0 4px 12px rgba(0,0,0,0.15);
+      }
+      .vl-tooltip-visible {
+        opacity: 1;
+        transform: scale(1);
+      }
+    `;
+        document.head.appendChild(style);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: TooltipDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.5", type: TooltipDirective, isStandalone: true, selector: "[vlTooltip]", inputs: { vlTooltip: { classPropertyName: "vlTooltip", publicName: "vlTooltip", isSignal: true, isRequired: false, transformFunction: null }, vlTooltipPosition: { classPropertyName: "vlTooltipPosition", publicName: "vlTooltipPosition", isSignal: true, isRequired: false, transformFunction: null }, vlTooltipDelay: { classPropertyName: "vlTooltipDelay", publicName: "vlTooltipDelay", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "mouseenter": "show()", "focusin": "show()", "mouseleave": "hide()", "focusout": "hide()" }, properties: { "attr.aria-describedby": "tooltipId" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: TooltipDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[vlTooltip]',
+                    standalone: true,
+                    host: {
+                        '[attr.aria-describedby]': 'tooltipId',
+                    },
+                }]
+        }], propDecorators: { vlTooltip: [{ type: i0.Input, args: [{ isSignal: true, alias: "vlTooltip", required: false }] }], vlTooltipPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "vlTooltipPosition", required: false }] }], vlTooltipDelay: [{ type: i0.Input, args: [{ isSignal: true, alias: "vlTooltipDelay", required: false }] }], show: [{
+                type: HostListener,
+                args: ['mouseenter']
+            }, {
+                type: HostListener,
+                args: ['focusin']
+            }], hide: [{
+                type: HostListener,
+                args: ['mouseleave']
+            }, {
+                type: HostListener,
+                args: ['focusout']
+            }] } });
+
+/**
+ * Formats a number as a currency string using Intl.NumberFormat.
+ *
+ * Usage:
+ *   {{ trip.budget | vlCurrency }}              → "$2,400"
+ *   {{ expense.amount | vlCurrency:'EUR' }}     → "€1,200"
+ *   {{ amount | vlCurrency:'INR':'symbol-narrow':'1.2-2' }}
+ */
+class CurrencyFormatPipe {
+    transform(value, currencyCode = 'USD', display = 'symbol', locale = 'en-US') {
+        if (value == null)
+            return '';
+        try {
+            return new Intl.NumberFormat(locale, {
+                style: 'currency',
+                currency: currencyCode,
+                currencyDisplay: display === 'symbol-narrow' ? 'narrowSymbol' : display,
+                maximumFractionDigits: Number.isInteger(value) ? 0 : 2,
+            }).format(value);
+        }
+        catch {
+            return `${currencyCode} ${value}`;
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: CurrencyFormatPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.2.5", ngImport: i0, type: CurrencyFormatPipe, isStandalone: true, name: "vlCurrency" });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: CurrencyFormatPipe, decorators: [{
+            type: Pipe,
+            args: [{ name: 'vlCurrency', standalone: true, pure: true }]
+        }] });
+
+/**
+ * Formats a Date, ISO string, or timestamp using Intl.DateTimeFormat.
+ *
+ * Presets:
+ *   short    → "Jun 28"          (no year if current year)
+ *   medium   → "Jun 28, 2026"
+ *   long     → "June 28, 2026"
+ *   full     → "Sunday, June 28, 2026"
+ *   time     → "2:30 PM"
+ *   datetime → "Jun 28, 2026, 2:30 PM"
+ *   relative → "2 days ago" / "in 3 hours"  (uses Intl.RelativeTimeFormat)
+ *
+ * Usage:
+ *   {{ trip.startDate | vlDateFormat }}
+ *   {{ trip.startDate | vlDateFormat:'long' }}
+ *   {{ trip.startDate | vlDateFormat:'relative' }}
+ */
+class DateFormatPipe {
+    transform(value, preset = 'medium', locale = 'en-US') {
+        if (value == null || value === '')
+            return '';
+        const date = value instanceof Date ? value : new Date(value);
+        if (isNaN(date.getTime()))
+            return String(value);
+        if (preset === 'relative')
+            return this.toRelative(date, locale);
+        return new Intl.DateTimeFormat(locale, this.options(preset, date)).format(date);
+    }
+    options(preset, date) {
+        const isCurrentYear = date.getFullYear() === new Date().getFullYear();
+        switch (preset) {
+            case 'short':
+                return isCurrentYear
+                    ? { month: 'short', day: 'numeric' }
+                    : { month: 'short', day: 'numeric', year: 'numeric' };
+            case 'medium':
+                return { month: 'short', day: 'numeric', year: 'numeric' };
+            case 'long':
+                return { month: 'long', day: 'numeric', year: 'numeric' };
+            case 'full':
+                return { weekday: 'long', month: 'long', day: 'numeric', year: 'numeric' };
+            case 'time':
+                return { hour: 'numeric', minute: '2-digit', hour12: true };
+            case 'datetime':
+                return { month: 'short', day: 'numeric', year: 'numeric', hour: 'numeric', minute: '2-digit', hour12: true };
+            default:
+                return { month: 'short', day: 'numeric', year: 'numeric' };
+        }
+    }
+    toRelative(date, locale) {
+        const rtf = new Intl.RelativeTimeFormat(locale, { numeric: 'auto' });
+        const diffMs = date.getTime() - Date.now();
+        const diffS = Math.round(diffMs / 1000);
+        const diffM = Math.round(diffS / 60);
+        const diffH = Math.round(diffM / 60);
+        const diffD = Math.round(diffH / 24);
+        const diffW = Math.round(diffD / 7);
+        const diffMo = Math.round(diffD / 30);
+        const diffY = Math.round(diffD / 365);
+        if (Math.abs(diffS) < 60)
+            return rtf.format(diffS, 'second');
+        if (Math.abs(diffM) < 60)
+            return rtf.format(diffM, 'minute');
+        if (Math.abs(diffH) < 24)
+            return rtf.format(diffH, 'hour');
+        if (Math.abs(diffD) < 7)
+            return rtf.format(diffD, 'day');
+        if (Math.abs(diffW) < 5)
+            return rtf.format(diffW, 'week');
+        if (Math.abs(diffMo) < 12)
+            return rtf.format(diffMo, 'month');
+        return rtf.format(diffY, 'year');
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: DateFormatPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.2.5", ngImport: i0, type: DateFormatPipe, isStandalone: true, name: "vlDateFormat" });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: DateFormatPipe, decorators: [{
+            type: Pipe,
+            args: [{ name: 'vlDateFormat', standalone: true, pure: true }]
+        }] });
+
+/**
+ * Returns a human-readable trip duration string.
+ *
+ * Usage:
+ *   {{ trip.startDate | vlTripDuration:trip.endDate }}  →  "6 days"
+ */
+class TripDurationPipe {
+    transform(startDate, endDate) {
+        if (!startDate || !endDate)
+            return '';
+        const start = startDate instanceof Date ? startDate : new Date(startDate);
+        const end = endDate instanceof Date ? endDate : new Date(endDate);
+        const days = Math.ceil(Math.abs(end.getTime() - start.getTime()) / (1000 * 60 * 60 * 24));
+        return `${days} day${days !== 1 ? 's' : ''}`;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: TripDurationPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.2.5", ngImport: i0, type: TripDurationPipe, isStandalone: true, name: "vlTripDuration" });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: TripDurationPipe, decorators: [{
+            type: Pipe,
+            args: [{ name: 'vlTripDuration', standalone: true, pure: true }]
+        }] });
+
+const CATEGORY_ICONS = {
+    food: '🍔',
+    accommodation: '🏨',
+    transport: '🚗',
+    activities: '🎭',
+    souvenirs: '🎁',
+    other: '💰'
+};
+const CATEGORY_COLORS = {
+    food: '#FF6B6B',
+    accommodation: '#4ECDC4',
+    transport: '#FFE66D',
+    activities: '#95E1D3',
+    souvenirs: '#C7CEEA',
+    other: '#B4B4B4'
+};
+
+/**
+ * Shared HTTP service for micro-frontends.
+ *
+ * Services call with relative paths: `sdk.get('/trips')`.
+ * The host application's HTTP interceptor resolves the full API URL.
+ */
+class SharedHttpService {
+    http = inject(HttpClient);
+    get(path, options) {
+        return this.http.get(path, { ...options, responseType: 'json' });
+    }
+    post(path, body, options) {
+        return this.http.post(path, body, { ...options, responseType: 'json' });
+    }
+    put(path, body, options) {
+        return this.http.put(path, body, { ...options, responseType: 'json' });
+    }
+    delete(path, options) {
+        return this.http.delete(path, { ...options, body: options?.body, responseType: 'json' });
+    }
+    patch(path, body, options) {
+        return this.http.patch(path, body, { ...options, responseType: 'json' });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: SharedHttpService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: SharedHttpService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: SharedHttpService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }] });
+
+class TripService {
+    httpService = inject(SharedHttpService);
+    getAllTrips() {
+        return this.httpService.get('/trips').pipe(map(res => (res?.data?.trips ?? []).map(dto => this.dtoToTrip(dto))));
+    }
+    getTripById(id) {
+        return this.httpService.get(`/trips/${id}`).pipe(map(res => res?.data ? this.dtoToTrip(res.data) : undefined));
+    }
+    dtoToTrip(dto) {
+        return {
+            ...dto,
+            startDate: new Date(dto.startDate),
+            endDate: new Date(dto.endDate)
+        };
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: TripService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: TripService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: TripService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }] });
+
+class ExpenseService {
+    httpService = inject(SharedHttpService);
+    getExpensesByTripId(tripId) {
+        return this.httpService.get(`/trips/${tripId}/expenses`).pipe(map(res => (res?.data ?? []).map(dto => this.dtoToExpense(dto))));
+    }
+    addExpense(expense) {
+        const dto = this.expenseToDTO(expense);
+        return this.httpService.post('/expenses', dto).pipe(map(res => this.dtoToExpense(res.data)));
+    }
+    getExpensesByCategory(tripId) {
+        return this.getExpensesByTripId(tripId).pipe(map(expenses => this.calculateCategorySpending(expenses)));
+    }
+    getDailyExpenses(tripId) {
+        return this.getExpensesByTripId(tripId).pipe(map(expenses => this.groupExpensesByDay(expenses)));
+    }
+    calculateCategorySpending(expenses) {
+        const total = expenses.reduce((sum, exp) => sum + exp.amount, 0);
+        const categoryMap = new Map();
+        expenses.forEach(exp => {
+            const current = categoryMap.get(exp.category) || 0;
+            categoryMap.set(exp.category, current + exp.amount);
+        });
+        return Array.from(categoryMap.entries()).map(([category, amount]) => ({
+            category,
+            amount,
+            percentage: total > 0 ? Math.round((amount / total) * 100) : 0,
+            icon: CATEGORY_ICONS[category]
+        })).sort((a, b) => b.amount - a.amount);
+    }
+    groupExpensesByDay(expenses) {
+        const dayMap = new Map();
+        expenses.forEach(exp => {
+            const dateKey = exp.date.toISOString().split('T')[0];
+            const dayExpenses = dayMap.get(dateKey) || [];
+            dayExpenses.push(exp);
+            dayMap.set(dateKey, dayExpenses);
+        });
+        return Array.from(dayMap.entries())
+            .map(([dateKey, dayExpenses]) => ({
+            date: new Date(dateKey),
+            expenses: dayExpenses.sort((a, b) => a.date.getTime() - b.date.getTime()),
+            total: dayExpenses.reduce((sum, exp) => sum + exp.amount, 0)
+        }))
+            .sort((a, b) => a.date.getTime() - b.date.getTime());
+    }
+    dtoToExpense(dto) {
+        return {
+            ...dto,
+            date: new Date(dto.date)
+        };
+    }
+    expenseToDTO(expense) {
+        return {
+            ...expense,
+            date: expense.date.toISOString()
+        };
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: ExpenseService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: ExpenseService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: ExpenseService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }] });
+
+const EnvironmentToken = new InjectionToken('environment');
+
+const CURRENCIES = [
+    { code: 'USD', symbol: '$', name: 'US Dollar' },
+    { code: 'EUR', symbol: '€', name: 'Euro' },
+    { code: 'GBP', symbol: '£', name: 'British Pound' },
+    { code: 'INR', symbol: '₹', name: 'Indian Rupee' },
+    { code: 'JPY', symbol: '¥', name: 'Japanese Yen' },
+    { code: 'AUD', symbol: 'A$', name: 'Australian Dollar' },
+    { code: 'CAD', symbol: 'C$', name: 'Canadian Dollar' },
+];
+function getCurrency(code) {
+    return CURRENCIES.find(c => c.code === code);
+}
+function formatCurrency(amount, currencyCode = 'USD') {
+    const currency = getCurrency(currencyCode);
+    const symbol = currency?.symbol || '$';
+    return `${symbol}${amount.toLocaleString()}`;
+}
+
+// Components
+
+/*
+ * Public API Surface of voyage-lib
+ */
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { AvatarComponent, BadgeComponent, ButtonComponent, CATEGORY_COLORS, CATEGORY_ICONS, CURRENCIES, CardComponent, ConfirmDialogComponent, CurrencyFormatPipe, DateFormatPipe, DialogComponent, EmptyStateComponent, EnvironmentToken, ExpenseService, InputComponent, LoaderComponent, PasswordStrengthComponent, ProgressBarComponent, SelectComponent, SharedHttpService, SkeletonComponent, SnackbarComponent, SnackbarService, StatCardComponent, TooltipDirective, TripDurationPipe, TripService, formatCurrency, getCurrency };
+//# sourceMappingURL=voyage-lib.mjs.map