@mcp-elements/angular 0.1.0 → 0.1.2

package/dist/index.js

@@ -0,0 +1,2738 @@
+var __defProp = Object.defineProperty;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+
+// src/button.component.ts
+import { Component, computed, input } from "@angular/core";
+function _ts_decorate(decorators, target, key, desc) {
+  var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+  if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+  else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+  return c > 3 && r && Object.defineProperty(target, key, r), r;
+}
+__name(_ts_decorate, "_ts_decorate");
+var SnxButtonComponent = class {
+  static {
+    __name(this, "SnxButtonComponent");
+  }
+  variant = input("primary");
+  size = input("md");
+  disabled = input(false);
+  type = input("button");
+  class = input("");
+  classes = computed(() => [
+    "mcpe-btn",
+    `mcpe-btn-${this.variant()}`,
+    `mcpe-btn-${this.size()}`,
+    this.class()
+  ].filter(Boolean).join(" "));
+};
+SnxButtonComponent = _ts_decorate([
+  Component({
+    selector: "mcpe-button",
+    standalone: true,
+    template: `
+    <button [class]="classes()" [disabled]="disabled()" [type]="type()">
+      <ng-content />
+    </button>
+  `
+  })
+], SnxButtonComponent);
+
+// src/badge.component.ts
+import { Component as Component2, computed as computed2, input as input2 } from "@angular/core";
+function _ts_decorate2(decorators, target, key, desc) {
+  var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+  if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+  else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+  return c > 3 && r && Object.defineProperty(target, key, r), r;
+}
+__name(_ts_decorate2, "_ts_decorate");
+var SnxBadgeComponent = class {
+  static {
+    __name(this, "SnxBadgeComponent");
+  }
+  variant = input2("default");
+  class = input2("");
+  classes = computed2(() => [
+    "mcpe-badge",
+    `mcpe-badge-${this.variant()}`,
+    this.class()
+  ].filter(Boolean).join(" "));
+};
+SnxBadgeComponent = _ts_decorate2([
+  Component2({
+    selector: "mcpe-badge",
+    standalone: true,
+    template: `<span [class]="classes()"><ng-content /></span>`
+  })
+], SnxBadgeComponent);
+
+// src/card.component.ts
+import { Component as Component3, input as input3, computed as computed3 } from "@angular/core";
+function _ts_decorate3(decorators, target, key, desc) {
+  var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+  if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+  else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+  return c > 3 && r && Object.defineProperty(target, key, r), r;
+}
+__name(_ts_decorate3, "_ts_decorate");
+var SnxCardComponent = class {
+  static {
+    __name(this, "SnxCardComponent");
+  }
+  class = input3("");
+  classes = computed3(() => [
+    "mcpe-card",
+    this.class()
+  ].filter(Boolean).join(" "));
+};
+SnxCardComponent = _ts_decorate3([
+  Component3({
+    selector: "mcpe-card",
+    standalone: true,
+    template: `<div [class]="classes()"><ng-content /></div>`
+  })
+], SnxCardComponent);
+var SnxCardHeaderComponent = class {
+  static {
+    __name(this, "SnxCardHeaderComponent");
+  }
+};
+SnxCardHeaderComponent = _ts_decorate3([
+  Component3({
+    selector: "mcpe-card-header",
+    standalone: true,
+    template: `<div class="mcpe-card-header"><ng-content /></div>`
+  })
+], SnxCardHeaderComponent);
+var SnxCardTitleComponent = class {
+  static {
+    __name(this, "SnxCardTitleComponent");
+  }
+};
+SnxCardTitleComponent = _ts_decorate3([
+  Component3({
+    selector: "mcpe-card-title",
+    standalone: true,
+    template: `<h3 class="mcpe-card-title"><ng-content /></h3>`
+  })
+], SnxCardTitleComponent);
+var SnxCardDescriptionComponent = class {
+  static {
+    __name(this, "SnxCardDescriptionComponent");
+  }
+};
+SnxCardDescriptionComponent = _ts_decorate3([
+  Component3({
+    selector: "mcpe-card-description",
+    standalone: true,
+    template: `<p class="mcpe-card-description"><ng-content /></p>`
+  })
+], SnxCardDescriptionComponent);
+var SnxCardContentComponent = class {
+  static {
+    __name(this, "SnxCardContentComponent");
+  }
+};
+SnxCardContentComponent = _ts_decorate3([
+  Component3({
+    selector: "mcpe-card-content",
+    standalone: true,
+    template: `<div class="mcpe-card-content"><ng-content /></div>`
+  })
+], SnxCardContentComponent);
+var SnxCardFooterComponent = class {
+  static {
+    __name(this, "SnxCardFooterComponent");
+  }
+};
+SnxCardFooterComponent = _ts_decorate3([
+  Component3({
+    selector: "mcpe-card-footer",
+    standalone: true,
+    template: `<div class="mcpe-card-footer"><ng-content /></div>`
+  })
+], SnxCardFooterComponent);
+
+// src/input.component.ts
+import { Component as Component4, input as input4, computed as computed4, forwardRef } from "@angular/core";
+import { NG_VALUE_ACCESSOR } from "@angular/forms";
+function _ts_decorate4(decorators, target, key, desc) {
+  var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+  if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+  else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+  return c > 3 && r && Object.defineProperty(target, key, r), r;
+}
+__name(_ts_decorate4, "_ts_decorate");
+var SnxInputComponent = class {
+  static {
+    __name(this, "SnxInputComponent");
+  }
+  type = input4("text");
+  placeholder = input4("");
+  disabled = input4(false);
+  value = input4("");
+  class = input4("");
+  classes = computed4(() => [
+    "mcpe-input",
+    this.class()
+  ].filter(Boolean).join(" "));
+  onChange = /* @__PURE__ */ __name(() => {
+  }, "onChange");
+  onTouched = /* @__PURE__ */ __name(() => {
+  }, "onTouched");
+  onInput(event) {
+    const value = event.target.value;
+    this.onChange(value);
+  }
+  writeValue(value) {
+  }
+  registerOnChange(fn) {
+    this.onChange = fn;
+  }
+  registerOnTouched(fn) {
+    this.onTouched = fn;
+  }
+};
+SnxInputComponent = _ts_decorate4([
+  Component4({
+    selector: "mcpe-input",
+    standalone: true,
+    template: `
+    <input
+      [class]="classes()"
+      [type]="type()"
+      [placeholder]="placeholder()"
+      [disabled]="disabled()"
+      [value]="value()"
+      (input)="onInput($event)"
+      (blur)="onTouched()"
+    />
+  `,
+    providers: [
+      {
+        provide: NG_VALUE_ACCESSOR,
+        useExisting: forwardRef(() => SnxInputComponent),
+        multi: true
+      }
+    ]
+  })
+], SnxInputComponent);
+
+// src/textarea.component.ts
+import { Component as Component5, input as input5, computed as computed5 } from "@angular/core";
+function _ts_decorate5(decorators, target, key, desc) {
+  var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+  if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+  else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+  return c > 3 && r && Object.defineProperty(target, key, r), r;
+}
+__name(_ts_decorate5, "_ts_decorate");
+var SnxTextareaComponent = class {
+  static {
+    __name(this, "SnxTextareaComponent");
+  }
+  placeholder = input5("");
+  disabled = input5(false);
+  rows = input5(3);
+  class = input5("");
+  classes = computed5(() => [
+    "mcpe-textarea",
+    this.class()
+  ].filter(Boolean).join(" "));
+};
+SnxTextareaComponent = _ts_decorate5([
+  Component5({
+    selector: "mcpe-textarea",
+    standalone: true,
+    template: `
+    <textarea
+      [class]="classes()"
+      [placeholder]="placeholder()"
+      [disabled]="disabled()"
+      [rows]="rows()"
+    ><ng-content /></textarea>
+  `
+  })
+], SnxTextareaComponent);
+
+// src/avatar.component.ts
+import { Component as Component6, input as input6, computed as computed6, signal } from "@angular/core";
+function _ts_decorate6(decorators, target, key, desc) {
+  var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+  if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+  else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+  return c > 3 && r && Object.defineProperty(target, key, r), r;
+}
+__name(_ts_decorate6, "_ts_decorate");
+var SnxAvatarComponent = class {
+  static {
+    __name(this, "SnxAvatarComponent");
+  }
+  src = input6("");
+  alt = input6("");
+  fallback = input6("");
+  class = input6("");
+  hasError = signal(false);
+  classes = computed6(() => [
+    "mcpe-avatar",
+    this.class()
+  ].filter(Boolean).join(" "));
+};
+SnxAvatarComponent = _ts_decorate6([
+  Component6({
+    selector: "mcpe-avatar",
+    standalone: true,
+    template: `
+    <div [class]="classes()">
+      @if (src() && !hasError()) {
+        <img [src]="src()" [alt]="alt()" class="mcpe-avatar-image" (error)="hasError.set(true)" />
+      } @else {
+        <span class="mcpe-avatar-fallback">{{ fallback() }}</span>
+      }
+    </div>
+  `
+  })
+], SnxAvatarComponent);
+
+// src/separator.component.ts
+import { Component as Component7, input as input7, computed as computed7 } from "@angular/core";
+function _ts_decorate7(decorators, target, key, desc) {
+  var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+  if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+  else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+  return c > 3 && r && Object.defineProperty(target, key, r), r;
+}
+__name(_ts_decorate7, "_ts_decorate");
+var SnxSeparatorComponent = class {
+  static {
+    __name(this, "SnxSeparatorComponent");
+  }
+  orientation = input7("horizontal");
+  class = input7("");
+  classes = computed7(() => [
+    "mcpe-separator",
+    `mcpe-separator-${this.orientation()}`,
+    this.class()
+  ].filter(Boolean).join(" "));
+};
+SnxSeparatorComponent = _ts_decorate7([
+  Component7({
+    selector: "mcpe-separator",
+    standalone: true,
+    template: `<div [class]="classes()" role="separator" [attr.aria-orientation]="orientation()"></div>`
+  })
+], SnxSeparatorComponent);
+
+// src/skeleton.component.ts
+import { Component as Component8, input as input8, computed as computed8 } from "@angular/core";
+function _ts_decorate8(decorators, target, key, desc) {
+  var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+  if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+  else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+  return c > 3 && r && Object.defineProperty(target, key, r), r;
+}
+__name(_ts_decorate8, "_ts_decorate");
+var SnxSkeletonComponent = class {
+  static {
+    __name(this, "SnxSkeletonComponent");
+  }
+  class = input8("");
+  classes = computed8(() => [
+    "mcpe-skeleton",
+    this.class()
+  ].filter(Boolean).join(" "));
+};
+SnxSkeletonComponent = _ts_decorate8([
+  Component8({
+    selector: "mcpe-skeleton",
+    standalone: true,
+    template: `<div [class]="classes()"></div>`
+  })
+], SnxSkeletonComponent);
+
+// src/dialog.component.ts
+import { Component as Component9, input as input9, output, signal as signal2 } from "@angular/core";
+function _ts_decorate9(decorators, target, key, desc) {
+  var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+  if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+  else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+  return c > 3 && r && Object.defineProperty(target, key, r), r;
+}
+__name(_ts_decorate9, "_ts_decorate");
+var SnxDialogComponent = class {
+  static {
+    __name(this, "SnxDialogComponent");
+  }
+  modal = input9(true);
+  open = signal2(false);
+  openChange = output();
+  toggle() {
+    this.open.update((v) => !v);
+    this.openChange.emit(this.open());
+  }
+  close() {
+    this.open.set(false);
+    this.openChange.emit(false);
+  }
+  show() {
+    this.open.set(true);
+    this.openChange.emit(true);
+  }
+};
+SnxDialogComponent = _ts_decorate9([
+  Component9({
+    selector: "mcpe-dialog",
+    standalone: true,
+    template: `
+    @if (open()) {
+      <div class="mcpe-dialog-overlay" (click)="close()">
+        <div
+          #content
+          class="mcpe-dialog-content"
+          role="dialog"
+          [attr.aria-modal]="modal()"
+          (click)="$event.stopPropagation()"
+          (keydown.escape)="close()"
+        >
+          <ng-content />
+          <button class="mcpe-dialog-close" (click)="close()" type="button" aria-label="Close">
+            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+              <path d="M18 6 6 18" /><path d="m6 6 12 12" />
+            </svg>
+          </button>
+        </div>
+      </div>
+    }
+  `
+  })
+], SnxDialogComponent);
+
+// src/tabs.component.ts
+import { Component as Component10, input as input10, output as output2, signal as signal3, computed as computed9, effect } from "@angular/core";
+import { createTabs } from "@mcp-elements/core";
+function _ts_decorate10(decorators, target, key, desc) {
+  var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+  if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+  else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+  return c > 3 && r && Object.defineProperty(target, key, r), r;
+}
+__name(_ts_decorate10, "_ts_decorate");
+function _ts_metadata(k, v) {
+  if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
+}
+__name(_ts_metadata, "_ts_metadata");
+var SnxTabsComponent = class {
+  static {
+    __name(this, "SnxTabsComponent");
+  }
+  items = input10([]);
+  defaultValue = input10("");
+  activeValue = signal3("");
+  api = computed9(() => createTabs(this.items(), {
+    defaultValue: this.defaultValue(),
+    onValueChange: /* @__PURE__ */ __name((v) => this.activeValue.set(v), "onValueChange")
+  }));
+  constructor() {
+    effect(() => {
+      const def = this.defaultValue();
+      const items = this.items();
+      if (def) {
+        this.activeValue.set(def);
+      } else if (items.length > 0) {
+        this.activeValue.set(items[0].value);
+      }
+    });
+  }
+  getTabProps(value) {
+    return this.api().getTriggerProps(value, this.activeValue());
+  }
+  getPanelProps(value) {
+    return this.api().getPanelProps(value, this.activeValue());
+  }
+  isActive(value) {
+    return this.activeValue() === value;
+  }
+  select(value) {
+    this.activeValue.set(value);
+  }
+};
+SnxTabsComponent = _ts_decorate10([
+  Component10({
+    selector: "mcpe-tabs",
+    standalone: true,
+    template: `<div><ng-content /></div>`
+  }),
+  _ts_metadata("design:type", Function),
+  _ts_metadata("design:paramtypes", [])
+], SnxTabsComponent);
+var SnxTabsListComponent = class {
+  static {
+    __name(this, "SnxTabsListComponent");
+  }
+};
+SnxTabsListComponent = _ts_decorate10([
+  Component10({
+    selector: "mcpe-tabs-list",
+    standalone: true,
+    template: `<div role="tablist" class="mcpe-tabs-list"><ng-content /></div>`
+  })
+], SnxTabsListComponent);
+var SnxTabsTriggerComponent = class {
+  static {
+    __name(this, "SnxTabsTriggerComponent");
+  }
+  isActive = input10(false);
+  onClick = output2();
+  class = input10("");
+  classes = computed9(() => [
+    "mcpe-tabs-trigger",
+    this.isActive() ? "mcpe-tabs-trigger-active" : "",
+    this.class()
+  ].filter(Boolean).join(" "));
+};
+SnxTabsTriggerComponent = _ts_decorate10([
+  Component10({
+    selector: "mcpe-tabs-trigger",
+    standalone: true,
+    template: `
+    <button
+      role="tab"
+      [class]="classes()"
+      [attr.aria-selected]="isActive()"
+      [attr.tabindex]="isActive() ? 0 : -1"
+      (click)="onClick.emit()"
+    >
+      <ng-content />
+    </button>
+  `
+  })
+], SnxTabsTriggerComponent);
+var SnxTabsContentComponent = class {
+  static {
+    __name(this, "SnxTabsContentComponent");
+  }
+  isActive = input10(false);
+};
+SnxTabsContentComponent = _ts_decorate10([
+  Component10({
+    selector: "mcpe-tabs-content",
+    standalone: true,
+    template: `
+    @if (isActive()) {
+      <div role="tabpanel" class="mcpe-tabs-content"><ng-content /></div>
+    }
+  `
+  })
+], SnxTabsContentComponent);
+
+// src/accordion.component.ts
+import { Component as Component11, input as input11, output as output3, signal as signal4, computed as computed10 } from "@angular/core";
+import { createAccordion } from "@mcp-elements/core";
+function _ts_decorate11(decorators, target, key, desc) {
+  var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+  if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+  else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+  return c > 3 && r && Object.defineProperty(target, key, r), r;
+}
+__name(_ts_decorate11, "_ts_decorate");
+var SnxAccordionComponent = class {
+  static {
+    __name(this, "SnxAccordionComponent");
+  }
+  items = input11([]);
+  type = input11("single");
+  collapsible = input11(false);
+  expandedValues = signal4([]);
+  api = computed10(() => createAccordion(this.items(), {
+    type: this.type(),
+    collapsible: this.collapsible(),
+    onValueChange: /* @__PURE__ */ __name((v) => this.expandedValues.set(v), "onValueChange")
+  }));
+  isExpanded(value) {
+    return this.expandedValues().includes(value);
+  }
+  toggle(value) {
+    const props = this.api().getTriggerProps(value, this.expandedValues());
+    props.onClick();
+  }
+};
+SnxAccordionComponent = _ts_decorate11([
+  Component11({
+    selector: "mcpe-accordion",
+    standalone: true,
+    template: `<div><ng-content /></div>`
+  })
+], SnxAccordionComponent);
+var SnxAccordionItemComponent = class {
+  static {
+    __name(this, "SnxAccordionItemComponent");
+  }
+};
+SnxAccordionItemComponent = _ts_decorate11([
+  Component11({
+    selector: "mcpe-accordion-item",
+    standalone: true,
+    template: `<div class="mcpe-accordion-item"><ng-content /></div>`
+  })
+], SnxAccordionItemComponent);
+var SnxAccordionTriggerComponent = class {
+  static {
+    __name(this, "SnxAccordionTriggerComponent");
+  }
+  isExpanded = input11(false);
+  onClick = output3();
+};
+SnxAccordionTriggerComponent = _ts_decorate11([
+  Component11({
+    selector: "mcpe-accordion-trigger",
+    standalone: true,
+    template: `
+    <h3>
+      <button
+        [class]="'mcpe-accordion-trigger'"
+        [attr.aria-expanded]="isExpanded()"
+        (click)="onClick.emit()"
+      >
+        <ng-content />
+        <svg class="mcpe-accordion-chevron" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+          <path d="m6 9 6 6 6-6" />
+        </svg>
+      </button>
+    </h3>
+  `
+  })
+], SnxAccordionTriggerComponent);
+var SnxAccordionContentComponent = class {
+  static {
+    __name(this, "SnxAccordionContentComponent");
+  }
+  isExpanded = input11(false);
+};
+SnxAccordionContentComponent = _ts_decorate11([
+  Component11({
+    selector: "mcpe-accordion-content",
+    standalone: true,
+    template: `
+    @if (isExpanded()) {
+      <div role="region" class="mcpe-accordion-content"><ng-content /></div>
+    }
+  `
+  })
+], SnxAccordionContentComponent);
+
+// src/select.component.ts
+import { Component as Component12, input as input12, output as output4, signal as signal5, computed as computed11, viewChild } from "@angular/core";
+function _ts_decorate12(decorators, target, key, desc) {
+  var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+  if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+  else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+  return c > 3 && r && Object.defineProperty(target, key, r), r;
+}
+__name(_ts_decorate12, "_ts_decorate");
+var SnxSelectComponent = class {
+  static {
+    __name(this, "SnxSelectComponent");
+  }
+  options = input12([]);
+  placeholder = input12("Select...");
+  valueChange = output4();
+  isOpen = signal5(false);
+  selectedValue = signal5(null);
+  highlightedIndex = signal5(0);
+  container = viewChild("container");
+  selectedLabel = computed11(() => {
+    const val = this.selectedValue();
+    return this.options().find((o) => o.value === val)?.label ?? "";
+  });
+  toggle() {
+    this.isOpen.update((v) => !v);
+  }
+  selectOption(option) {
+    if (option.disabled) return;
+    this.selectedValue.set(option.value);
+    this.valueChange.emit(option.value);
+    this.isOpen.set(false);
+  }
+  getItemClasses(option, index) {
+    return [
+      "mcpe-select-item",
+      index === this.highlightedIndex() ? "mcpe-select-item-active" : "",
+      option.value === this.selectedValue() ? "mcpe-select-item-selected" : ""
+    ].filter(Boolean).join(" ");
+  }
+  onKeyDown(event) {
+    const opts = this.options().filter((o) => !o.disabled);
+    if (event.key === "ArrowDown") {
+      event.preventDefault();
+      if (!this.isOpen()) {
+        this.isOpen.set(true);
+        return;
+      }
+      this.highlightedIndex.update((i) => (i + 1) % opts.length);
+    } else if (event.key === "ArrowUp") {
+      event.preventDefault();
+      this.highlightedIndex.update((i) => (i - 1 + opts.length) % opts.length);
+    } else if (event.key === "Enter" || event.key === " ") {
+      event.preventDefault();
+      if (this.isOpen()) {
+        const opt = opts[this.highlightedIndex()];
+        if (opt) this.selectOption(opt);
+      } else {
+        this.isOpen.set(true);
+      }
+    } else if (event.key === "Escape") {
+      this.isOpen.set(false);
+    }
+  }
+  onDocumentClick(event) {
+    const el = this.container()?.nativeElement;
+    if (el && !el.contains(event.target)) {
+      this.isOpen.set(false);
+    }
+  }
+};
+SnxSelectComponent = _ts_decorate12([
+  Component12({
+    selector: "mcpe-select",
+    standalone: true,
+    template: `
+    <div class="relative" #container>
+      <button
+        class="mcpe-select-trigger"
+        [attr.aria-expanded]="isOpen()"
+        aria-haspopup="listbox"
+        (click)="toggle()"
+        (keydown)="onKeyDown($event)"
+      >
+        <span>{{ selectedLabel() || placeholder() }}</span>
+        <svg class="h-4 w-4 opacity-50" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+          <path d="m6 9 6 6 6-6" />
+        </svg>
+      </button>
+      @if (isOpen()) {
+        <div class="mcpe-select-content absolute top-full mt-1 w-full">
+          <div class="mcpe-select-viewport" role="listbox">
+            @for (option of options(); track option.value; let i = $index) {
+              <div
+                role="option"
+                [attr.aria-selected]="option.value === selectedValue()"
+                [attr.aria-disabled]="option.disabled"
+                [class]="getItemClasses(option, i)"
+                (click)="selectOption(option)"
+                (mouseenter)="highlightedIndex.set(i)"
+              >
+                {{ option.label }}
+              </div>
+            }
+          </div>
+        </div>
+      }
+    </div>
+  `,
+    host: {
+      "(document:click)": "onDocumentClick($event)"
+    }
+  })
+], SnxSelectComponent);
+
+// src/tooltip.directive.ts
+import { Directive, input as input13, HostListener, ElementRef, Renderer2 } from "@angular/core";
+function _ts_decorate13(decorators, target, key, desc) {
+  var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+  if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+  else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+  return c > 3 && r && Object.defineProperty(target, key, r), r;
+}
+__name(_ts_decorate13, "_ts_decorate");
+function _ts_metadata2(k, v) {
+  if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
+}
+__name(_ts_metadata2, "_ts_metadata");
+var SnxTooltipDirective = class {
+  static {
+    __name(this, "SnxTooltipDirective");
+  }
+  el;
+  renderer;
+  mcpeTooltip = input13("");
+  tooltipDelay = input13(700);
+  tooltipEl = null;
+  timeoutId = null;
+  constructor(el, renderer) {
+    this.el = el;
+    this.renderer = renderer;
+  }
+  onShow() {
+    this.clearDelay();
+    this.timeoutId = setTimeout(() => this.show(), this.tooltipDelay());
+  }
+  onHide() {
+    this.clearDelay();
+    this.hide();
+  }
+  show() {
+    if (this.tooltipEl) return;
+    this.tooltipEl = this.renderer.createElement("div");
+    this.renderer.addClass(this.tooltipEl, "mcpe-tooltip-content");
+    this.renderer.setStyle(this.tooltipEl, "position", "absolute");
+    this.renderer.setStyle(this.tooltipEl, "bottom", "100%");
+    this.renderer.setStyle(this.tooltipEl, "left", "50%");
+    this.renderer.setStyle(this.tooltipEl, "transform", "translateX(-50%)");
+    this.renderer.setStyle(this.tooltipEl, "margin-bottom", "0.5rem");
+    const text = this.renderer.createText(this.mcpeTooltip());
+    this.renderer.appendChild(this.tooltipEl, text);
+    this.renderer.setStyle(this.el.nativeElement, "position", "relative");
+    this.renderer.appendChild(this.el.nativeElement, this.tooltipEl);
+  }
+  hide() {
+    if (this.tooltipEl) {
+      this.renderer.removeChild(this.el.nativeElement, this.tooltipEl);
+      this.tooltipEl = null;
+    }
+  }
+  clearDelay() {
+    if (this.timeoutId !== null) {
+      clearTimeout(this.timeoutId);
+      this.timeoutId = null;
+    }
+  }
+  ngOnDestroy() {
+    this.clearDelay();
+    this.hide();
+  }
+};
+_ts_decorate13([
+  HostListener("mouseenter"),
+  HostListener("focus"),
+  _ts_metadata2("design:type", Function),
+  _ts_metadata2("design:paramtypes", []),
+  _ts_metadata2("design:returntype", void 0)
+], SnxTooltipDirective.prototype, "onShow", null);
+_ts_decorate13([
+  HostListener("mouseleave"),
+  HostListener("blur"),
+  _ts_metadata2("design:type", Function),
+  _ts_metadata2("design:paramtypes", []),
+  _ts_metadata2("design:returntype", void 0)
+], SnxTooltipDirective.prototype, "onHide", null);
+SnxTooltipDirective = _ts_decorate13([
+  Directive({
+    selector: "[mcpeTooltip]",
+    standalone: true
+  }),
+  _ts_metadata2("design:type", Function),
+  _ts_metadata2("design:paramtypes", [
+    typeof ElementRef === "undefined" ? Object : ElementRef,
+    typeof Renderer2 === "undefined" ? Object : Renderer2
+  ])
+], SnxTooltipDirective);
+
+// src/popover.component.ts
+import { Component as Component13, signal as signal6, viewChild as viewChild2 } from "@angular/core";
+function _ts_decorate14(decorators, target, key, desc) {
+  var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+  if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+  else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+  return c > 3 && r && Object.defineProperty(target, key, r), r;
+}
+__name(_ts_decorate14, "_ts_decorate");
+var SnxPopoverComponent = class {
+  static {
+    __name(this, "SnxPopoverComponent");
+  }
+  isOpen = signal6(false);
+  container = viewChild2("container");
+  toggle() {
+    this.isOpen.update((v) => !v);
+  }
+  close() {
+    this.isOpen.set(false);
+  }
+  show() {
+    this.isOpen.set(true);
+  }
+  onDocumentClick(event) {
+    const el = this.container()?.nativeElement;
+    if (el && !el.contains(event.target)) {
+      this.isOpen.set(false);
+    }
+  }
+};
+SnxPopoverComponent = _ts_decorate14([
+  Component13({
+    selector: "mcpe-popover",
+    standalone: true,
+    template: `
+    <div class="relative inline-block" #container>
+      <div (click)="toggle()">
+        <ng-content select="[trigger]" />
+      </div>
+      @if (isOpen()) {
+        <div
+          class="mcpe-popover-content absolute top-full mt-2"
+          role="dialog"
+          (keydown.escape)="close()"
+        >
+          <ng-content />
+        </div>
+      }
+    </div>
+  `,
+    host: {
+      "(document:click)": "onDocumentClick($event)"
+    }
+  })
+], SnxPopoverComponent);
+
+// src/toast.component.ts
+import { Component as Component14, Injectable, signal as signal7 } from "@angular/core";
+function _ts_decorate15(decorators, target, key, desc) {
+  var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+  if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+  else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+  return c > 3 && r && Object.defineProperty(target, key, r), r;
+}
+__name(_ts_decorate15, "_ts_decorate");
+function _ts_metadata3(k, v) {
+  if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
+}
+__name(_ts_metadata3, "_ts_metadata");
+var SnxToastService = class {
+  static {
+    __name(this, "SnxToastService");
+  }
+  toasts = signal7([]);
+  counter = 0;
+  show(toast, duration = 5e3) {
+    const id = `toast-${++this.counter}`;
+    this.toasts.update((t) => [
+      ...t,
+      {
+        id,
+        ...toast
+      }
+    ]);
+    if (duration > 0) {
+      setTimeout(() => this.dismiss(id), duration);
+    }
+    return id;
+  }
+  success(title, description) {
+    return this.show({
+      title,
+      description,
+      variant: "success"
+    });
+  }
+  error(title, description) {
+    return this.show({
+      title,
+      description,
+      variant: "destructive"
+    });
+  }
+  dismiss(id) {
+    this.toasts.update((t) => t.filter((x) => x.id !== id));
+  }
+};
+SnxToastService = _ts_decorate15([
+  Injectable({
+    providedIn: "root"
+  })
+], SnxToastService);
+var SnxToasterComponent = class {
+  static {
+    __name(this, "SnxToasterComponent");
+  }
+  toastService;
+  constructor(toastService) {
+    this.toastService = toastService;
+  }
+};
+SnxToasterComponent = _ts_decorate15([
+  Component14({
+    selector: "mcpe-toaster",
+    standalone: true,
+    template: `
+    <div class="mcpe-toaster mcpe-toaster-bottom-right">
+      @for (t of toastService.toasts(); track t.id) {
+        <div
+          [class]="'mcpe-toast group' + (t.variant === 'destructive' ? ' mcpe-toast-destructive' : '') + (t.variant === 'success' ? ' mcpe-toast-success' : '')"
+        >
+          <span class="mcpe-toast-icon" aria-hidden="true">
+            @switch (t.variant) {
+              @case ('success') {
+                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21.801 10A10 10 0 1 1 17 3.335" /><path d="m9 11 3 3L22 4" /></svg>
+              }
+              @case ('destructive') {
+                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10" /><line x1="12" x2="12" y1="8" y2="12" /><line x1="12" x2="12.01" y1="16" y2="16" /></svg>
+              }
+              @default {
+                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10" /><path d="M12 16v-4" /><path d="M12 8h.01" /></svg>
+              }
+            }
+          </span>
+          <div class="mcpe-toast-body">
+            @if (t.title) { <div class="mcpe-toast-title">{{ t.title }}</div> }
+            @if (t.description) { <div class="mcpe-toast-description">{{ t.description }}</div> }
+          </div>
+          <button class="mcpe-toast-close" (click)="toastService.dismiss(t.id)" type="button" aria-label="Close">
+            <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+              <path d="M18 6 6 18" /><path d="m6 6 12 12" />
+            </svg>
+          </button>
+        </div>
+      }
+    </div>
+  `
+  }),
+  _ts_metadata3("design:type", Function),
+  _ts_metadata3("design:paramtypes", [
+    typeof SnxToastService === "undefined" ? Object : SnxToastService
+  ])
+], SnxToasterComponent);
+
+// src/drawer.component.ts
+import { Component as Component15, input as input14, output as output5, signal as signal8 } from "@angular/core";
+function _ts_decorate16(decorators, target, key, desc) {
+  var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+  if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+  else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+  return c > 3 && r && Object.defineProperty(target, key, r), r;
+}
+__name(_ts_decorate16, "_ts_decorate");
+var SnxDrawerComponent = class {
+  static {
+    __name(this, "SnxDrawerComponent");
+  }
+  side = input14("right");
+  open = signal8(false);
+  openChange = output5();
+  show() {
+    this.open.set(true);
+    this.openChange.emit(true);
+  }
+  close() {
+    this.open.set(false);
+    this.openChange.emit(false);
+  }
+  toggle() {
+    this.open.update((v) => !v);
+    this.openChange.emit(this.open());
+  }
+};
+SnxDrawerComponent = _ts_decorate16([
+  Component15({
+    selector: "mcpe-drawer",
+    standalone: true,
+    template: `
+    @if (open()) {
+      <div class="mcpe-drawer-overlay" (click)="close()"></div>
+      <div
+        [class]="'mcpe-drawer-content mcpe-drawer-content-' + side()"
+        role="dialog"
+        aria-modal="true"
+        (keydown.escape)="close()"
+      >
+        <ng-content />
+        <button class="mcpe-drawer-close" (click)="close()" aria-label="Close">
+          <svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+            <path d="M18 6 6 18" /><path d="m6 6 12 12" />
+          </svg>
+        </button>
+      </div>
+    }
+  `
+  })
+], SnxDrawerComponent);
+var SnxDrawerHeaderComponent = class {
+  static {
+    __name(this, "SnxDrawerHeaderComponent");
+  }
+};
+SnxDrawerHeaderComponent = _ts_decorate16([
+  Component15({
+    selector: "mcpe-drawer-header",
+    standalone: true,
+    template: `<div class="mcpe-drawer-header"><ng-content /></div>`
+  })
+], SnxDrawerHeaderComponent);
+var SnxDrawerFooterComponent = class {
+  static {
+    __name(this, "SnxDrawerFooterComponent");
+  }
+};
+SnxDrawerFooterComponent = _ts_decorate16([
+  Component15({
+    selector: "mcpe-drawer-footer",
+    standalone: true,
+    template: `<div class="mcpe-drawer-footer"><ng-content /></div>`
+  })
+], SnxDrawerFooterComponent);
+var SnxDrawerTitleComponent = class {
+  static {
+    __name(this, "SnxDrawerTitleComponent");
+  }
+};
+SnxDrawerTitleComponent = _ts_decorate16([
+  Component15({
+    selector: "mcpe-drawer-title",
+    standalone: true,
+    template: `<h2 class="mcpe-drawer-title"><ng-content /></h2>`
+  })
+], SnxDrawerTitleComponent);
+var SnxDrawerDescriptionComponent = class {
+  static {
+    __name(this, "SnxDrawerDescriptionComponent");
+  }
+};
+SnxDrawerDescriptionComponent = _ts_decorate16([
+  Component15({
+    selector: "mcpe-drawer-description",
+    standalone: true,
+    template: `<p class="mcpe-drawer-description"><ng-content /></p>`
+  })
+], SnxDrawerDescriptionComponent);
+var SnxDrawerBodyComponent = class {
+  static {
+    __name(this, "SnxDrawerBodyComponent");
+  }
+};
+SnxDrawerBodyComponent = _ts_decorate16([
+  Component15({
+    selector: "mcpe-drawer-body",
+    standalone: true,
+    template: `<div class="mcpe-drawer-body"><ng-content /></div>`
+  })
+], SnxDrawerBodyComponent);
+
+// src/dropdown-menu.component.ts
+import { Component as Component16, input as input15, signal as signal9, viewChild as viewChild3 } from "@angular/core";
+function _ts_decorate17(decorators, target, key, desc) {
+  var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+  if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+  else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+  return c > 3 && r && Object.defineProperty(target, key, r), r;
+}
+__name(_ts_decorate17, "_ts_decorate");
+var SnxDropdownMenuComponent = class {
+  static {
+    __name(this, "SnxDropdownMenuComponent");
+  }
+  items = input15([]);
+  isOpen = signal9(false);
+  container = viewChild3("container");
+  toggle() {
+    this.isOpen.update((v) => !v);
+  }
+  close() {
+    this.isOpen.set(false);
+  }
+  selectItem(item) {
+    if (!item.disabled) this.isOpen.set(false);
+  }
+  onDocumentClick(event) {
+    const el = this.container()?.nativeElement;
+    if (el && !el.contains(event.target)) this.isOpen.set(false);
+  }
+};
+SnxDropdownMenuComponent = _ts_decorate17([
+  Component16({
+    selector: "mcpe-dropdown-menu",
+    standalone: true,
+    template: `
+    <div class="relative inline-block" #container>
+      <div (click)="toggle()">
+        <ng-content select="[trigger]" />
+      </div>
+      @if (isOpen()) {
+        <div class="mcpe-dropdown-menu-content absolute top-full mt-1 right-0" role="menu">
+          @for (item of items(); track item.id) {
+            @if (item.type === 'separator') {
+              <div class="mcpe-dropdown-menu-separator" role="separator"></div>
+            } @else if (item.type === 'label') {
+              <div class="mcpe-dropdown-menu-label">{{ item.label }}</div>
+            } @else {
+              <div
+                role="menuitem"
+                [class]="'mcpe-dropdown-menu-item' + (item.disabled ? ' opacity-50 pointer-events-none' : '')"
+                (click)="selectItem(item)"
+                [attr.aria-disabled]="item.disabled"
+              >
+                <span class="flex-1">{{ item.label }}</span>
+                @if (item.shortcut) {
+                  <span class="mcpe-dropdown-menu-shortcut">{{ item.shortcut }}</span>
+                }
+              </div>
+            }
+          }
+        </div>
+      }
+    </div>
+  `,
+    host: {
+      "(document:click)": "onDocumentClick($event)"
+    }
+  })
+], SnxDropdownMenuComponent);
+
+// src/switch.component.ts
+import { Component as Component17, input as input16, output as output6, signal as signal10 } from "@angular/core";
+function _ts_decorate18(decorators, target, key, desc) {
+  var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+  if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+  else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+  return c > 3 && r && Object.defineProperty(target, key, r), r;
+}
+__name(_ts_decorate18, "_ts_decorate");
+var SnxSwitchComponent = class {
+  static {
+    __name(this, "SnxSwitchComponent");
+  }
+  checked = signal10(false);
+  disabled = input16(false);
+  checkedChange = output6();
+  toggle() {
+    if (this.disabled()) return;
+    this.checked.update((v) => !v);
+    this.checkedChange.emit(this.checked());
+  }
+};
+SnxSwitchComponent = _ts_decorate18([
+  Component17({
+    selector: "mcpe-switch",
+    standalone: true,
+    template: `
+    <button
+      type="button"
+      role="switch"
+      [attr.aria-checked]="checked()"
+      [attr.aria-disabled]="disabled()"
+      [disabled]="disabled()"
+      [class]="'mcpe-switch'"
+      (click)="toggle()"
+      (keydown.space)="$event.preventDefault(); toggle()"
+      (keydown.enter)="$event.preventDefault(); toggle()"
+    >
+      <span class="mcpe-switch-thumb"></span>
+    </button>
+  `
+  })
+], SnxSwitchComponent);
+
+// src/progress.component.ts
+import { Component as Component18, input as input17, computed as computed12 } from "@angular/core";
+function _ts_decorate19(decorators, target, key, desc) {
+  var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+  if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+  else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+  return c > 3 && r && Object.defineProperty(target, key, r), r;
+}
+__name(_ts_decorate19, "_ts_decorate");
+var SnxProgressComponent = class {
+  static {
+    __name(this, "SnxProgressComponent");
+  }
+  value = input17(0);
+  max = input17(100);
+  transform = computed12(() => {
+    const pct = Math.min(Math.max(this.value() / this.max() * 100, 0), 100);
+    return `translateX(-${100 - pct}%)`;
+  });
+};
+SnxProgressComponent = _ts_decorate19([
+  Component18({
+    selector: "mcpe-progress",
+    standalone: true,
+    template: `
+    <div class="mcpe-progress" role="progressbar"
+         [attr.aria-valuenow]="value()" [attr.aria-valuemin]="0" [attr.aria-valuemax]="max()">
+      <div class="mcpe-progress-indicator" [style.transform]="transform()"></div>
+    </div>
+  `
+  })
+], SnxProgressComponent);
+
+// src/loader.component.ts
+import { Component as Component19, input as input18, computed as computed13 } from "@angular/core";
+function _ts_decorate20(decorators, target, key, desc) {
+  var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+  if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+  else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+  return c > 3 && r && Object.defineProperty(target, key, r), r;
+}
+__name(_ts_decorate20, "_ts_decorate");
+var SnxLoaderComponent = class {
+  static {
+    __name(this, "SnxLoaderComponent");
+  }
+  size = input18("md");
+  variant = input18("primary");
+  classes = computed13(() => `mcpe-loader mcpe-loader-${this.size()} mcpe-loader-${this.variant()}`);
+};
+SnxLoaderComponent = _ts_decorate20([
+  Component19({
+    selector: "mcpe-loader",
+    standalone: true,
+    template: `<div [class]="classes()" role="status" aria-label="Loading"><span class="sr-only">Loading...</span></div>`
+  })
+], SnxLoaderComponent);
+
+// src/chips.component.ts
+import { Component as Component20, input as input19, output as output7, computed as computed14 } from "@angular/core";
+function _ts_decorate21(decorators, target, key, desc) {
+  var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+  if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+  else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+  return c > 3 && r && Object.defineProperty(target, key, r), r;
+}
+__name(_ts_decorate21, "_ts_decorate");
+var SnxChipComponent = class {
+  static {
+    __name(this, "SnxChipComponent");
+  }
+  variant = input19("default");
+  removable = input19(false);
+  remove = output7();
+  classes = computed14(() => [
+    "mcpe-chip",
+    `mcpe-chip-${this.variant()}`,
+    this.removable() ? "mcpe-chip-removable" : ""
+  ].filter(Boolean).join(" "));
+};
+SnxChipComponent = _ts_decorate21([
+  Component20({
+    selector: "mcpe-chip",
+    standalone: true,
+    template: `
+    <span [class]="classes()">
+      <ng-content />
+      @if (removable()) {
+        <button type="button" class="mcpe-chip-remove" (click)="remove.emit()" aria-label="Remove">
+          <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+            <path d="M18 6 6 18" /><path d="m6 6 12 12" />
+          </svg>
+        </button>
+      }
+    </span>
+  `
+  })
+], SnxChipComponent);
+var SnxChipsComponent = class {
+  static {
+    __name(this, "SnxChipsComponent");
+  }
+};
+SnxChipsComponent = _ts_decorate21([
+  Component20({
+    selector: "mcpe-chips",
+    standalone: true,
+    template: `<div class="mcpe-chips"><ng-content /></div>`
+  })
+], SnxChipsComponent);
+
+// src/password-input.component.ts
+import { Component as Component21, input as input20, signal as signal11 } from "@angular/core";
+function _ts_decorate22(decorators, target, key, desc) {
+  var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+  if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+  else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+  return c > 3 && r && Object.defineProperty(target, key, r), r;
+}
+__name(_ts_decorate22, "_ts_decorate");
+var SnxPasswordInputComponent = class {
+  static {
+    __name(this, "SnxPasswordInputComponent");
+  }
+  placeholder = input20("");
+  disabled = input20(false);
+  showPassword = signal11(false);
+};
+SnxPasswordInputComponent = _ts_decorate22([
+  Component21({
+    selector: "mcpe-password-input",
+    standalone: true,
+    template: `
+    <div class="mcpe-password-input-wrapper">
+      <input
+        [type]="showPassword() ? 'text' : 'password'"
+        class="mcpe-password-input"
+        [placeholder]="placeholder()"
+        [disabled]="disabled()"
+      />
+      <button type="button" class="mcpe-password-toggle" (click)="showPassword.update(v => !v)"
+              [attr.aria-label]="showPassword() ? 'Hide password' : 'Show password'" tabindex="-1">
+        @if (showPassword()) {
+          <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+            <path d="M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19m-6.72-1.07a3 3 0 1 1-4.24-4.24" />
+            <line x1="1" y1="1" x2="23" y2="23" />
+          </svg>
+        } @else {
+          <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+            <path d="M2 12s3-7 10-7 10 7 10 7-3 7-10 7-10-7-10-7Z" />
+            <circle cx="12" cy="12" r="3" />
+          </svg>
+        }
+      </button>
+    </div>
+  `
+  })
+], SnxPasswordInputComponent);
+
+// src/counter.component.ts
+import { Component as Component22, input as input21, output as output8, signal as signal12 } from "@angular/core";
+function _ts_decorate23(decorators, target, key, desc) {
+  var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+  if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+  else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+  return c > 3 && r && Object.defineProperty(target, key, r), r;
+}
+__name(_ts_decorate23, "_ts_decorate");
+var SnxCounterComponent = class {
+  static {
+    __name(this, "SnxCounterComponent");
+  }
+  value = signal12(0);
+  min = input21(0);
+  max = input21(99);
+  step = input21(1);
+  disabled = input21(false);
+  valueChange = output8();
+  decrement() {
+    this.value.update((v) => Math.max(this.min(), v - this.step()));
+    this.valueChange.emit(this.value());
+  }
+  increment() {
+    this.value.update((v) => Math.min(this.max(), v + this.step()));
+    this.valueChange.emit(this.value());
+  }
+  onInput(event) {
+    const num = parseInt(event.target.value, 10);
+    if (!isNaN(num)) {
+      this.value.set(Math.max(this.min(), Math.min(this.max(), num)));
+      this.valueChange.emit(this.value());
+    }
+  }
+};
+SnxCounterComponent = _ts_decorate23([
+  Component22({
+    selector: "mcpe-counter",
+    standalone: true,
+    template: `
+    <div class="mcpe-counter">
+      <button type="button" class="mcpe-counter-button" (click)="decrement()"
+              [disabled]="disabled() || value() <= min()" aria-label="Decrease">
+        <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+          <path d="M5 12h14" />
+        </svg>
+      </button>
+      <input type="text" inputmode="numeric" class="mcpe-counter-input"
+             [value]="value()" (change)="onInput($event)" [disabled]="disabled()" aria-label="Count" />
+      <button type="button" class="mcpe-counter-button" (click)="increment()"
+              [disabled]="disabled() || value() >= max()" aria-label="Increase">
+        <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+          <path d="M5 12h14" /><path d="M12 5v14" />
+        </svg>
+      </button>
+    </div>
+  `
+  })
+], SnxCounterComponent);
+
+// src/alert.component.ts
+import { Component as Component23, input as input22, computed as computed15 } from "@angular/core";
+function _ts_decorate24(decorators, target, key, desc) {
+  var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+  if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+  else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+  return c > 3 && r && Object.defineProperty(target, key, r), r;
+}
+__name(_ts_decorate24, "_ts_decorate");
+var SnxAlertComponent = class {
+  static {
+    __name(this, "SnxAlertComponent");
+  }
+  variant = input22("default");
+  classes = computed15(() => `mcpe-alert mcpe-alert-${this.variant()}`);
+};
+SnxAlertComponent = _ts_decorate24([
+  Component23({
+    selector: "mcpe-alert",
+    standalone: true,
+    template: `<div [class]="classes()" role="alert"><ng-content /></div>`
+  })
+], SnxAlertComponent);
+var SnxAlertTitleComponent = class {
+  static {
+    __name(this, "SnxAlertTitleComponent");
+  }
+};
+SnxAlertTitleComponent = _ts_decorate24([
+  Component23({
+    selector: "mcpe-alert-title",
+    standalone: true,
+    template: `<h5 class="mcpe-alert-title"><ng-content /></h5>`
+  })
+], SnxAlertTitleComponent);
+var SnxAlertDescriptionComponent = class {
+  static {
+    __name(this, "SnxAlertDescriptionComponent");
+  }
+};
+SnxAlertDescriptionComponent = _ts_decorate24([
+  Component23({
+    selector: "mcpe-alert-description",
+    standalone: true,
+    template: `<div class="mcpe-alert-description"><ng-content /></div>`
+  })
+], SnxAlertDescriptionComponent);
+
+// src/prompt-input.component.ts
+import { Component as Component24, input as input23, output as output9, computed as computed16 } from "@angular/core";
+function _ts_decorate25(decorators, target, key, desc) {
+  var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+  if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+  else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+  return c > 3 && r && Object.defineProperty(target, key, r), r;
+}
+__name(_ts_decorate25, "_ts_decorate");
+var SnxPromptInputComponent = class {
+  static {
+    __name(this, "SnxPromptInputComponent");
+  }
+  class = input23("");
+  classes = computed16(() => [
+    "mcpe-prompt-input",
+    this.class()
+  ].filter(Boolean).join(" "));
+};
+SnxPromptInputComponent = _ts_decorate25([
+  Component24({
+    selector: "mcpe-prompt-input",
+    standalone: true,
+    template: `<div [class]="classes()"><ng-content /></div>`
+  })
+], SnxPromptInputComponent);
+var SnxPromptInputTextareaComponent = class {
+  static {
+    __name(this, "SnxPromptInputTextareaComponent");
+  }
+  placeholder = input23("");
+  rows = input23(3);
+};
+SnxPromptInputTextareaComponent = _ts_decorate25([
+  Component24({
+    selector: "mcpe-prompt-input-textarea",
+    standalone: true,
+    template: `<textarea class="mcpe-prompt-input-textarea" [placeholder]="placeholder()" [rows]="rows()"></textarea>`
+  })
+], SnxPromptInputTextareaComponent);
+var SnxPromptInputFooterComponent = class {
+  static {
+    __name(this, "SnxPromptInputFooterComponent");
+  }
+};
+SnxPromptInputFooterComponent = _ts_decorate25([
+  Component24({
+    selector: "mcpe-prompt-input-footer",
+    standalone: true,
+    template: `<div class="mcpe-prompt-input-footer"><ng-content /></div>`
+  })
+], SnxPromptInputFooterComponent);
+var SnxPromptInputActionsComponent = class {
+  static {
+    __name(this, "SnxPromptInputActionsComponent");
+  }
+};
+SnxPromptInputActionsComponent = _ts_decorate25([
+  Component24({
+    selector: "mcpe-prompt-input-actions",
+    standalone: true,
+    template: `<div class="mcpe-prompt-input-actions"><ng-content /></div>`
+  })
+], SnxPromptInputActionsComponent);
+var SnxPromptInputCharCountComponent = class {
+  static {
+    __name(this, "SnxPromptInputCharCountComponent");
+  }
+  count = input23(0);
+  max = input23(void 0);
+};
+SnxPromptInputCharCountComponent = _ts_decorate25([
+  Component24({
+    selector: "mcpe-prompt-input-char-count",
+    standalone: true,
+    template: `<span class="mcpe-prompt-input-char-count">{{ count() }}@if (max()) { / {{ max() }} }</span>`
+  })
+], SnxPromptInputCharCountComponent);
+var SnxPromptInputAttachmentsComponent = class {
+  static {
+    __name(this, "SnxPromptInputAttachmentsComponent");
+  }
+};
+SnxPromptInputAttachmentsComponent = _ts_decorate25([
+  Component24({
+    selector: "mcpe-prompt-input-attachments",
+    standalone: true,
+    template: `<div class="mcpe-prompt-input-attachments"><ng-content /></div>`
+  })
+], SnxPromptInputAttachmentsComponent);
+var SnxPromptInputAttachmentComponent = class {
+  static {
+    __name(this, "SnxPromptInputAttachmentComponent");
+  }
+  remove = output9();
+};
+SnxPromptInputAttachmentComponent = _ts_decorate25([
+  Component24({
+    selector: "mcpe-prompt-input-attachment",
+    standalone: true,
+    template: `
+    <span class="mcpe-prompt-input-attachment">
+      <ng-content />
+      <button type="button" class="mcpe-prompt-input-attachment-remove" (click)="remove.emit()" aria-label="Remove">
+        <svg xmlns="http://www.w3.org/2000/svg" width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+          <path d="M18 6 6 18" /><path d="m6 6 12 12" />
+        </svg>
+      </button>
+    </span>
+  `
+  })
+], SnxPromptInputAttachmentComponent);
+
+// src/chat-bubble.component.ts
+import { Component as Component25, input as input24, computed as computed17 } from "@angular/core";
+function _ts_decorate26(decorators, target, key, desc) {
+  var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+  if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+  else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+  return c > 3 && r && Object.defineProperty(target, key, r), r;
+}
+__name(_ts_decorate26, "_ts_decorate");
+var SnxChatBubbleComponent = class {
+  static {
+    __name(this, "SnxChatBubbleComponent");
+  }
+  variant = input24("ai");
+  class = input24("");
+  classes = computed17(() => [
+    "mcpe-chat-bubble",
+    `mcpe-chat-bubble-${this.variant()}`,
+    this.class()
+  ].filter(Boolean).join(" "));
+};
+SnxChatBubbleComponent = _ts_decorate26([
+  Component25({
+    selector: "mcpe-chat-bubble",
+    standalone: true,
+    template: `<div [class]="classes()"><ng-content /></div>`
+  })
+], SnxChatBubbleComponent);
+var SnxChatBubbleAvatarComponent = class {
+  static {
+    __name(this, "SnxChatBubbleAvatarComponent");
+  }
+  src = input24.required();
+  alt = input24("");
+};
+SnxChatBubbleAvatarComponent = _ts_decorate26([
+  Component25({
+    selector: "mcpe-chat-bubble-avatar",
+    standalone: true,
+    template: `<img class="mcpe-chat-bubble-avatar" [src]="src()" [alt]="alt()" />`
+  })
+], SnxChatBubbleAvatarComponent);
+var SnxChatBubbleContentComponent = class {
+  static {
+    __name(this, "SnxChatBubbleContentComponent");
+  }
+};
+SnxChatBubbleContentComponent = _ts_decorate26([
+  Component25({
+    selector: "mcpe-chat-bubble-content",
+    standalone: true,
+    template: `<div class="mcpe-chat-bubble-content"><ng-content /></div>`
+  })
+], SnxChatBubbleContentComponent);
+var SnxChatBubbleTimestampComponent = class {
+  static {
+    __name(this, "SnxChatBubbleTimestampComponent");
+  }
+};
+SnxChatBubbleTimestampComponent = _ts_decorate26([
+  Component25({
+    selector: "mcpe-chat-bubble-timestamp",
+    standalone: true,
+    template: `<span class="mcpe-chat-bubble-timestamp"><ng-content /></span>`
+  })
+], SnxChatBubbleTimestampComponent);
+var SnxChatBubbleTypingComponent = class {
+  static {
+    __name(this, "SnxChatBubbleTypingComponent");
+  }
+};
+SnxChatBubbleTypingComponent = _ts_decorate26([
+  Component25({
+    selector: "mcpe-chat-bubble-typing",
+    standalone: true,
+    template: `
+    <div class="mcpe-chat-bubble-typing">
+      <span class="mcpe-chat-bubble-typing-dot"></span>
+      <span class="mcpe-chat-bubble-typing-dot"></span>
+      <span class="mcpe-chat-bubble-typing-dot"></span>
+    </div>
+  `
+  })
+], SnxChatBubbleTypingComponent);
+
+// src/ai-badge.component.ts
+import { Component as Component26, input as input25, computed as computed18 } from "@angular/core";
+function _ts_decorate27(decorators, target, key, desc) {
+  var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+  if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+  else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+  return c > 3 && r && Object.defineProperty(target, key, r), r;
+}
+__name(_ts_decorate27, "_ts_decorate");
+var SnxAiBadgeComponent = class {
+  static {
+    __name(this, "SnxAiBadgeComponent");
+  }
+  variant = input25("default");
+  showIcon = input25(true);
+  class = input25("");
+  classes = computed18(() => [
+    "mcpe-ai-badge",
+    `mcpe-ai-badge-${this.variant()}`,
+    this.class()
+  ].filter(Boolean).join(" "));
+};
+SnxAiBadgeComponent = _ts_decorate27([
+  Component26({
+    selector: "mcpe-ai-badge",
+    standalone: true,
+    template: `
+    <span [class]="classes()">
+      @if (showIcon()) {
+        <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+          <path d="M12 3l1.912 5.813a2 2 0 0 0 1.275 1.275L21 12l-5.813 1.912a2 2 0 0 0-1.275 1.275L12 21l-1.912-5.813a2 2 0 0 1-1.275-1.275L3 12l5.813-1.912a2 2 0 0 1 1.275-1.275L12 3z" />
+        </svg>
+      }
+      <ng-content />
+    </span>
+  `
+  })
+], SnxAiBadgeComponent);
+
+// src/suggestion-chips.component.ts
+import { Component as Component27, input as input26, computed as computed19 } from "@angular/core";
+function _ts_decorate28(decorators, target, key, desc) {
+  var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+  if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+  else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+  return c > 3 && r && Object.defineProperty(target, key, r), r;
+}
+__name(_ts_decorate28, "_ts_decorate");
+var SnxSuggestionChipsComponent = class {
+  static {
+    __name(this, "SnxSuggestionChipsComponent");
+  }
+};
+SnxSuggestionChipsComponent = _ts_decorate28([
+  Component27({
+    selector: "mcpe-suggestion-chips",
+    standalone: true,
+    template: `<div class="mcpe-suggestion-chips"><ng-content /></div>`
+  })
+], SnxSuggestionChipsComponent);
+var SnxSuggestionChipComponent = class {
+  static {
+    __name(this, "SnxSuggestionChipComponent");
+  }
+  variant = input26("default");
+  class = input26("");
+  classes = computed19(() => [
+    "mcpe-suggestion-chip",
+    `mcpe-suggestion-chip-${this.variant()}`,
+    this.class()
+  ].filter(Boolean).join(" "));
+};
+SnxSuggestionChipComponent = _ts_decorate28([
+  Component27({
+    selector: "mcpe-suggestion-chip",
+    standalone: true,
+    template: `<button [class]="classes()" type="button"><ng-content /></button>`
+  })
+], SnxSuggestionChipComponent);
+
+// src/source-card.component.ts
+import { Component as Component28, input as input27 } from "@angular/core";
+function _ts_decorate29(decorators, target, key, desc) {
+  var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+  if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+  else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+  return c > 3 && r && Object.defineProperty(target, key, r), r;
+}
+__name(_ts_decorate29, "_ts_decorate");
+var SnxSourceCardsComponent = class {
+  static {
+    __name(this, "SnxSourceCardsComponent");
+  }
+};
+SnxSourceCardsComponent = _ts_decorate29([
+  Component28({
+    selector: "mcpe-source-cards",
+    standalone: true,
+    template: `<div class="mcpe-source-cards"><ng-content /></div>`
+  })
+], SnxSourceCardsComponent);
+var SnxSourceCardComponent = class {
+  static {
+    __name(this, "SnxSourceCardComponent");
+  }
+  href = input27.required();
+  favicon = input27("");
+  title = input27("");
+  domain = input27("");
+  index = input27(void 0);
+};
+SnxSourceCardComponent = _ts_decorate29([
+  Component28({
+    selector: "mcpe-source-card",
+    standalone: true,
+    template: `
+    <a [href]="href()" class="mcpe-source-card" target="_blank" rel="noopener noreferrer">
+      @if (favicon()) {
+        <img class="mcpe-source-card-favicon" [src]="favicon()" [alt]="domain()" />
+      }
+      <div class="mcpe-source-card-body">
+        <p class="mcpe-source-card-title">{{ title() }}</p>
+        <p class="mcpe-source-card-domain">{{ domain() }}</p>
+      </div>
+      @if (index()) {
+        <span class="mcpe-source-card-index">{{ index() }}</span>
+      }
+    </a>
+  `
+  })
+], SnxSourceCardComponent);
+
+// src/streaming-text.component.ts
+import { Component as Component29 } from "@angular/core";
+function _ts_decorate30(decorators, target, key, desc) {
+  var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+  if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+  else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+  return c > 3 && r && Object.defineProperty(target, key, r), r;
+}
+__name(_ts_decorate30, "_ts_decorate");
+var SnxStreamingTextComponent = class {
+  static {
+    __name(this, "SnxStreamingTextComponent");
+  }
+};
+SnxStreamingTextComponent = _ts_decorate30([
+  Component29({
+    selector: "mcpe-streaming-text",
+    standalone: true,
+    template: `<div class="mcpe-streaming-text-cursor"><ng-content /></div>`
+  })
+], SnxStreamingTextComponent);
+var SnxStreamingTextFadeInComponent = class {
+  static {
+    __name(this, "SnxStreamingTextFadeInComponent");
+  }
+};
+SnxStreamingTextFadeInComponent = _ts_decorate30([
+  Component29({
+    selector: "mcpe-streaming-text-fade-in",
+    standalone: true,
+    template: `<span class="mcpe-streaming-text-fade-in"><ng-content /></span>`
+  })
+], SnxStreamingTextFadeInComponent);
+var SnxStreamingTextWordComponent = class {
+  static {
+    __name(this, "SnxStreamingTextWordComponent");
+  }
+};
+SnxStreamingTextWordComponent = _ts_decorate30([
+  Component29({
+    selector: "mcpe-streaming-text-word",
+    standalone: true,
+    template: `<span class="mcpe-streaming-text-word"><ng-content /></span>`
+  })
+], SnxStreamingTextWordComponent);
+var SnxStreamingTextLineComponent = class {
+  static {
+    __name(this, "SnxStreamingTextLineComponent");
+  }
+};
+SnxStreamingTextLineComponent = _ts_decorate30([
+  Component29({
+    selector: "mcpe-streaming-text-line",
+    standalone: true,
+    template: `<div class="mcpe-streaming-text-line"><ng-content /></div>`
+  })
+], SnxStreamingTextLineComponent);
+var SnxStreamingTextSkeletonComponent = class {
+  static {
+    __name(this, "SnxStreamingTextSkeletonComponent");
+  }
+};
+SnxStreamingTextSkeletonComponent = _ts_decorate30([
+  Component29({
+    selector: "mcpe-streaming-text-skeleton",
+    standalone: true,
+    template: `<div class="mcpe-streaming-text-skeleton"><ng-content /></div>`
+  })
+], SnxStreamingTextSkeletonComponent);
+var SnxStreamingTextSkeletonLineComponent = class {
+  static {
+    __name(this, "SnxStreamingTextSkeletonLineComponent");
+  }
+};
+SnxStreamingTextSkeletonLineComponent = _ts_decorate30([
+  Component29({
+    selector: "mcpe-streaming-text-skeleton-line",
+    standalone: true,
+    template: `<div class="mcpe-streaming-text-skeleton-line"></div>`
+  })
+], SnxStreamingTextSkeletonLineComponent);
+
+// src/feedback.component.ts
+import { Component as Component30, input as input28, computed as computed20 } from "@angular/core";
+function _ts_decorate31(decorators, target, key, desc) {
+  var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+  if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+  else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+  return c > 3 && r && Object.defineProperty(target, key, r), r;
+}
+__name(_ts_decorate31, "_ts_decorate");
+var SnxFeedbackComponent = class {
+  static {
+    __name(this, "SnxFeedbackComponent");
+  }
+};
+SnxFeedbackComponent = _ts_decorate31([
+  Component30({
+    selector: "mcpe-feedback",
+    standalone: true,
+    template: `<div class="mcpe-feedback"><ng-content /></div>`
+  })
+], SnxFeedbackComponent);
+var SnxFeedbackButtonComponent = class {
+  static {
+    __name(this, "SnxFeedbackButtonComponent");
+  }
+  feedbackType = input28.required({
+    alias: "type"
+  });
+  selected = input28(false);
+  class = input28("");
+  classes = computed20(() => [
+    "mcpe-feedback-btn",
+    `mcpe-feedback-btn-${this.feedbackType()}`,
+    this.selected() ? "mcpe-feedback-btn-selected" : "",
+    this.class()
+  ].filter(Boolean).join(" "));
+};
+SnxFeedbackButtonComponent = _ts_decorate31([
+  Component30({
+    selector: "mcpe-feedback-btn",
+    standalone: true,
+    template: `
+    <button [class]="classes()" type="button">
+      @if (feedbackType() === 'up') {
+        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+          <path d="M7 10v12"/><path d="M15 5.88 14 10h5.83a2 2 0 0 1 1.92 2.56l-2.33 8A2 2 0 0 1 17.5 22H4a2 2 0 0 1-2-2v-8a2 2 0 0 1 2-2h2.76a2 2 0 0 0 1.79-1.11L12 2a3.13 3.13 0 0 1 3 3.88Z"/>
+        </svg>
+      } @else {
+        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+          <path d="M17 14V2"/><path d="M9 18.12 10 14H4.17a2 2 0 0 1-1.92-2.56l2.33-8A2 2 0 0 1 6.5 2H20a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2h-2.76a2 2 0 0 0-1.79 1.11L12 22a3.13 3.13 0 0 1-3-3.88Z"/>
+        </svg>
+      }
+    </button>
+  `
+  })
+], SnxFeedbackButtonComponent);
+var SnxFeedbackSeparatorComponent = class {
+  static {
+    __name(this, "SnxFeedbackSeparatorComponent");
+  }
+};
+SnxFeedbackSeparatorComponent = _ts_decorate31([
+  Component30({
+    selector: "mcpe-feedback-separator",
+    standalone: true,
+    template: `<span class="mcpe-feedback-separator"></span>`
+  })
+], SnxFeedbackSeparatorComponent);
+var SnxFeedbackFormComponent = class {
+  static {
+    __name(this, "SnxFeedbackFormComponent");
+  }
+};
+SnxFeedbackFormComponent = _ts_decorate31([
+  Component30({
+    selector: "mcpe-feedback-form",
+    standalone: true,
+    template: `<div class="mcpe-feedback-form"><ng-content /></div>`
+  })
+], SnxFeedbackFormComponent);
+var SnxFeedbackInputComponent = class {
+  static {
+    __name(this, "SnxFeedbackInputComponent");
+  }
+  placeholder = input28("Add a comment...");
+};
+SnxFeedbackInputComponent = _ts_decorate31([
+  Component30({
+    selector: "mcpe-feedback-input",
+    standalone: true,
+    template: `<input class="mcpe-feedback-input" [placeholder]="placeholder()" />`
+  })
+], SnxFeedbackInputComponent);
+var SnxFeedbackSubmitComponent = class {
+  static {
+    __name(this, "SnxFeedbackSubmitComponent");
+  }
+};
+SnxFeedbackSubmitComponent = _ts_decorate31([
+  Component30({
+    selector: "mcpe-feedback-submit",
+    standalone: true,
+    template: `<button class="mcpe-feedback-submit" type="button"><ng-content /></button>`
+  })
+], SnxFeedbackSubmitComponent);
+
+// src/mcp/mcp-server-status.component.ts
+import { Component as Component31, input as input29, computed as computed21 } from "@angular/core";
+import { cn } from "@mcp-elements/core";
+function _ts_decorate32(decorators, target, key, desc) {
+  var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+  if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+  else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+  return c > 3 && r && Object.defineProperty(target, key, r), r;
+}
+__name(_ts_decorate32, "_ts_decorate");
+var STATUS_LABELS = {
+  connected: "Connected",
+  connecting: "Connecting",
+  disconnected: "Disconnected",
+  error: "Error"
+};
+var McpeMcpServerStatusComponent = class {
+  static {
+    __name(this, "McpeMcpServerStatusComponent");
+  }
+  status = input29.required();
+  serverName = input29();
+  class = input29("");
+  classes = computed21(() => cn("mcpe-mcp-server-status", `mcpe-mcp-server-status-${this.status()}`, this.class()));
+  label = computed21(() => {
+    const s = this.serverName();
+    const statusLabel = STATUS_LABELS[this.status()];
+    return s ? `${s} \xB7 ${statusLabel}` : statusLabel;
+  });
+  ariaLabel = computed21(() => {
+    const s = this.serverName();
+    const statusLabel = STATUS_LABELS[this.status()];
+    return s ? `${s}: ${statusLabel}` : statusLabel;
+  });
+};
+McpeMcpServerStatusComponent = _ts_decorate32([
+  Component31({
+    selector: "mcpe-mcp-server-status",
+    standalone: true,
+    template: `
+    <span
+      [class]="classes()"
+      role="status"
+      aria-live="polite"
+      [attr.aria-label]="ariaLabel()"
+    >
+      <span class="mcpe-mcp-server-status-dot" aria-hidden="true"></span>
+      {{ label() }}
+    </span>
+  `
+  })
+], McpeMcpServerStatusComponent);
+
+// src/mcp/mcp-tool-call.component.ts
+import { Component as Component32, input as input30, output as output10, signal as signal13, effect as effect2, computed as computed22 } from "@angular/core";
+import { CommonModule } from "@angular/common";
+import { cn as cn2 } from "@mcp-elements/core";
+function _ts_decorate33(decorators, target, key, desc) {
+  var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+  if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+  else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+  return c > 3 && r && Object.defineProperty(target, key, r), r;
+}
+__name(_ts_decorate33, "_ts_decorate");
+function _ts_metadata4(k, v) {
+  if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
+}
+__name(_ts_metadata4, "_ts_metadata");
+var STATUS_LABELS2 = {
+  idle: "idle",
+  pending: "pending",
+  running: "running",
+  done: "done",
+  error: "error",
+  cancelled: "cancelled"
+};
+var McpeMcpToolCallComponent = class {
+  static {
+    __name(this, "McpeMcpToolCallComponent");
+  }
+  state = input30.required();
+  toolName = input30();
+  args = input30();
+  onRetry = output10();
+  class = input30("");
+  statusLabels = STATUS_LABELS2;
+  snap = signal13({
+    status: "idle"
+  });
+  _unsub;
+  constructor() {
+    effect2(() => {
+      this._unsub?.();
+      const s = this.state();
+      this.snap.set({
+        status: s.status,
+        tool: s.tool,
+        args: s.args,
+        result: s.result,
+        error: s.error,
+        startedAt: s.startedAt,
+        endedAt: s.endedAt
+      });
+      this._unsub = s.subscribe((snapshot) => this.snap.set({
+        ...snapshot
+      }));
+    });
+  }
+  ngOnDestroy() {
+    this._unsub?.();
+  }
+  classes = computed22(() => cn2("mcpe-mcp-tool-call", this.class()));
+  badgeClass = computed22(() => cn2("mcpe-mcp-tool-call-badge", `mcpe-mcp-tool-call-badge-${this.snap().status}`));
+  displayName = computed22(() => this.snap().tool ?? this.toolName() ?? "unknown");
+  displayArgs = computed22(() => this.snap().args ?? this.args());
+  textBlocks = computed22(() => this.snap().result?.content.filter((c) => c.type === "text").map((c) => c.text) ?? []);
+};
+McpeMcpToolCallComponent = _ts_decorate33([
+  Component32({
+    selector: "mcpe-mcp-tool-call",
+    standalone: true,
+    imports: [
+      CommonModule
+    ],
+    template: `
+    <div [class]="classes()">
+      <!-- Header -->
+      <div class="mcpe-mcp-tool-call-header">
+        <div class="mcpe-mcp-tool-call-name">
+          <span class="mcpe-mcp-tool-call-icon" aria-hidden="true">fn</span>
+          <span class="mcpe-mcp-tool-call-title">{{ displayName() }}</span>
+        </div>
+        <span [class]="badgeClass()">
+          @if (snap().status === 'running') {
+            <svg class="animate-spin h-3 w-3" fill="none" viewBox="0 0 24 24" aria-hidden="true">
+              <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"/>
+              <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"/>
+            </svg>
+          }
+          {{ statusLabels[snap().status] }}
+        </span>
+      </div>
+      <!-- Args -->
+      @if (displayArgs()) {
+        <pre class="mcpe-mcp-tool-call-args">{{ displayArgs() | json }}</pre>
+      }
+      <!-- Progress bar -->
+      @if (snap().status === 'running') {
+        <div class="mcpe-mcp-tool-call-progress" role="progressbar" aria-label="Tool running">
+          <div class="mcpe-mcp-tool-call-progress-bar" style="width: 60%"></div>
+        </div>
+      }
+      <!-- Result -->
+      @if (snap().status === 'done' && snap().result) {
+        <div class="mcpe-mcp-tool-call-result mcpe-mcp-tool-call-result-done">
+          @for (block of textBlocks(); track $index) {
+            <p class="whitespace-pre-wrap text-sm">{{ block }}</p>
+          }
+        </div>
+      }
+      <!-- Error -->
+      @if (snap().status === 'error' && snap().error) {
+        <div class="mcpe-mcp-tool-call-result mcpe-mcp-tool-call-result-error">
+          <p class="text-sm">{{ snap().error?.message }}</p>
+          <button (click)="onRetry.emit()" class="text-xs underline underline-offset-2">Retry</button>
+        </div>
+      }
+    </div>
+  `
+  }),
+  _ts_metadata4("design:type", Function),
+  _ts_metadata4("design:paramtypes", [])
+], McpeMcpToolCallComponent);
+
+// src/mcp/mcp-tool-form.component.ts
+import { Component as Component33, input as input31, output as output11, signal as signal14, computed as computed23 } from "@angular/core";
+import { CommonModule as CommonModule2 } from "@angular/common";
+import { cn as cn3, schemaToFields } from "@mcp-elements/core";
+function _ts_decorate34(decorators, target, key, desc) {
+  var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+  if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+  else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+  return c > 3 && r && Object.defineProperty(target, key, r), r;
+}
+__name(_ts_decorate34, "_ts_decorate");
+var McpeMcpToolFormComponent = class {
+  static {
+    __name(this, "McpeMcpToolFormComponent");
+  }
+  schema = input31.required();
+  loading = input31(false);
+  submitLabel = input31("Run");
+  class = input31("");
+  onSubmit = output11();
+  fields = computed23(() => schemaToFields(this.schema()));
+  values = signal14({});
+  ngOnInit() {
+    const defaults = {};
+    for (const f of this.fields()) {
+      if (f.defaultValue !== void 0) defaults[f.key] = f.defaultValue;
+    }
+    this.values.set(defaults);
+  }
+  classes = computed23(() => cn3("mcpe-mcp-tool-form", this.class()));
+  setValue(key, value) {
+    this.values.update((v) => ({
+      ...v,
+      [key]: value
+    }));
+  }
+  onInputChange(key, event) {
+    this.setValue(key, event.target.value);
+  }
+  onNumberChange(key, event) {
+    this.setValue(key, event.target.valueAsNumber);
+  }
+  onCheckChange(key, event) {
+    this.setValue(key, event.target.checked);
+  }
+  getStr(key) {
+    const v = this.values()[key];
+    return v == null ? "" : String(v);
+  }
+  getBool(key) {
+    return Boolean(this.values()[key]);
+  }
+  labelClass(field) {
+    return cn3("mcpe-mcp-tool-form-label", field.required ? "mcpe-mcp-tool-form-label-required" : "");
+  }
+  inputType(field) {
+    switch (field.kind) {
+      case "email":
+        return "email";
+      case "url":
+        return "url";
+      case "date":
+        return "date";
+      default:
+        return "text";
+    }
+  }
+  handleSubmit() {
+    this.onSubmit.emit(this.values());
+  }
+};
+McpeMcpToolFormComponent = _ts_decorate34([
+  Component33({
+    selector: "mcpe-mcp-tool-form",
+    standalone: true,
+    imports: [
+      CommonModule2
+    ],
+    template: `
+    <form [class]="classes()" (ngSubmit)="handleSubmit()">
+      @if (fields().length === 0) {
+        <p class="text-sm text-muted-foreground">This tool takes no inputs.</p>
+      }
+      @for (field of fields(); track field.key) {
+        <div class="mcpe-mcp-tool-form-field">
+          <label
+            [for]="field.key"
+            [class]="labelClass(field)"
+          >{{ field.label }}</label>
+          @switch (field.kind) {
+            @case ('switch') {
+              <input type="checkbox" [id]="field.key" class="mcpe-switch"
+                [checked]="getBool(field.key)"
+                (change)="onCheckChange(field.key, $event)" />
+            }
+            @case ('select') {
+              <select [id]="field.key" class="mcpe-select"
+                [value]="getStr(field.key)"
+                (change)="onInputChange(field.key, $event)">
+                <option value="">Select\u2026</option>
+                @for (opt of field.options ?? []; track opt.value) {
+                  <option [value]="opt.value">{{ opt.label }}</option>
+                }
+              </select>
+            }
+            @case ('textarea') {
+              <textarea [id]="field.key" class="mcpe-textarea" rows="4"
+                [value]="getStr(field.key)"
+                (input)="onInputChange(field.key, $event)"></textarea>
+            }
+            @case ('number') {
+              <input type="number" [id]="field.key" class="mcpe-input"
+                [value]="getStr(field.key)"
+                (input)="onNumberChange(field.key, $event)" />
+            }
+            @default {
+              <input [type]="inputType(field)" [id]="field.key" class="mcpe-input"
+                [value]="getStr(field.key)"
+                (input)="onInputChange(field.key, $event)" />
+            }
+          }
+          @if (field.help) {
+            <p class="mcpe-mcp-tool-form-help">{{ field.help }}</p>
+          }
+        </div>
+      }
+      <div class="mcpe-mcp-tool-form-submit">
+        <button type="submit" class="mcpe-btn mcpe-btn-primary mcpe-btn-sm" [disabled]="loading()">
+          {{ loading() ? 'Running\u2026' : submitLabel() }}
+        </button>
+      </div>
+    </form>
+  `
+  })
+], McpeMcpToolFormComponent);
+
+// src/mcp/mcp-consent-dialog.component.ts
+import { Component as Component34, input as input32, output as output12, computed as computed24 } from "@angular/core";
+import { CommonModule as CommonModule3 } from "@angular/common";
+import { parseScopes } from "@mcp-elements/core";
+function _ts_decorate35(decorators, target, key, desc) {
+  var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+  if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+  else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+  return c > 3 && r && Object.defineProperty(target, key, r), r;
+}
+__name(_ts_decorate35, "_ts_decorate");
+var McpeMcpConsentDialogComponent = class {
+  static {
+    __name(this, "McpeMcpConsentDialogComponent");
+  }
+  open = input32.required();
+  serverName = input32.required();
+  serverIcon = input32();
+  scopes = input32([]);
+  onApprove = output12();
+  onDeny = output12();
+  parsedScopes = computed24(() => parseScopes(this.scopes().join(" ")));
+  approve() {
+    this.onApprove.emit();
+  }
+  deny() {
+    this.onDeny.emit();
+  }
+};
+McpeMcpConsentDialogComponent = _ts_decorate35([
+  Component34({
+    selector: "mcpe-mcp-consent-dialog",
+    standalone: true,
+    imports: [
+      CommonModule3
+    ],
+    template: `
+    @if (open()) {
+      <div class="mcpe-dialog-overlay" (click)="deny()">
+        <div class="mcpe-dialog-content" role="dialog" aria-modal="true" [attr.aria-label]="'Allow ' + serverName() + '?'" (click)="$event.stopPropagation()">
+          <div class="mcpe-mcp-consent-dialog">
+            <div class="mcpe-dialog-header">
+              <h2 class="mcpe-dialog-title">Permission Request</h2>
+              <p class="mcpe-dialog-description">Review and approve the permissions this server is requesting.</p>
+            </div>
+            <!-- Server info -->
+            <div class="mcpe-mcp-consent-dialog-server">
+              <div class="mcpe-mcp-consent-dialog-icon" aria-hidden="true">
+                @if (serverIcon()) {
+                  <img [src]="serverIcon()" alt="" />
+                } @else {
+                  {{ serverName()[0]?.toUpperCase() ?? '?' }}
+                }
+              </div>
+              <div class="mcpe-mcp-consent-dialog-server-text">
+                <p class="mcpe-mcp-consent-dialog-server-name">{{ serverName() }}</p>
+                <p class="mcpe-mcp-consent-dialog-server-meta">is requesting access to</p>
+              </div>
+            </div>
+            <!-- Scopes -->
+            <div class="mcpe-mcp-consent-dialog-scopes" role="list" aria-label="Requested permissions">
+              @for (s of parsedScopes(); track s.raw) {
+                <div class="mcpe-mcp-consent-dialog-scope-item" role="listitem">
+                  <span class="mcpe-mcp-consent-dialog-scope-resource">{{ s.resource }}</span>
+                  <div class="mcpe-mcp-consent-dialog-scope-perms">
+                    @for (p of s.permissions; track p) {
+                      <span class="mcpe-mcp-consent-dialog-scope-perm" [attr.data-perm]="p.toLowerCase()">{{ p }}</span>
+                    }
+                  </div>
+                </div>
+              }
+            </div>
+            <!-- Actions -->
+            <div class="mcpe-mcp-consent-dialog-actions">
+              <button class="mcpe-btn mcpe-btn-outline" (click)="deny()">Deny</button>
+              <button class="mcpe-btn mcpe-btn-primary" (click)="approve()">Allow</button>
+            </div>
+          </div>
+        </div>
+      </div>
+    }
+  `
+  })
+], McpeMcpConsentDialogComponent);
+
+// src/mcp/mcp-scope-inspector.component.ts
+import { Component as Component35, input as input33, signal as signal15, computed as computed25 } from "@angular/core";
+import { CommonModule as CommonModule4 } from "@angular/common";
+import { cn as cn4, parseScopes as parseScopes2 } from "@mcp-elements/core";
+function _ts_decorate36(decorators, target, key, desc) {
+  var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+  if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+  else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+  return c > 3 && r && Object.defineProperty(target, key, r), r;
+}
+__name(_ts_decorate36, "_ts_decorate");
+var McpeMcpScopeInspectorComponent = class {
+  static {
+    __name(this, "McpeMcpScopeInspectorComponent");
+  }
+  scopes = input33("");
+  descriptions = input33({});
+  class = input33("");
+  openKeys = signal15(/* @__PURE__ */ new Set());
+  parsedScopes = computed25(() => {
+    const s = this.scopes();
+    return typeof s === "string" ? parseScopes2(s) : s;
+  });
+  classes = computed25(() => cn4("mcpe-mcp-scope-inspector", this.class()));
+  toggle(key) {
+    this.openKeys.update((prev) => {
+      const next = new Set(prev);
+      if (next.has(key)) next.delete(key);
+      else next.add(key);
+      return next;
+    });
+  }
+  isOpen(key) {
+    return this.openKeys().has(key);
+  }
+  chevronClass(key) {
+    return cn4("mcpe-mcp-scope-inspector-chevron", this.isOpen(key) ? "mcpe-mcp-scope-inspector-chevron-open" : "");
+  }
+  getDescription(s) {
+    const d = this.descriptions();
+    return d[s.raw] ?? d[s.resource] ?? s.description;
+  }
+};
+McpeMcpScopeInspectorComponent = _ts_decorate36([
+  Component35({
+    selector: "mcpe-mcp-scope-inspector",
+    standalone: true,
+    imports: [
+      CommonModule4
+    ],
+    template: `
+    <div [class]="classes()" role="list">
+      @for (s of parsedScopes(); track s.raw) {
+        <div class="mcpe-mcp-scope-inspector-item" role="listitem">
+          <button
+            type="button"
+            class="mcpe-mcp-scope-inspector-trigger"
+            [attr.aria-expanded]="isOpen(s.raw)"
+            (click)="toggle(s.raw)"
+          >
+            <div class="flex items-center gap-3">
+              <span class="mcpe-mcp-scope-inspector-resource">{{ s.resource }}</span>
+              <div class="mcpe-mcp-scope-inspector-perms">
+                @for (p of s.permissions; track p) {
+                  <span class="mcpe-mcp-scope-inspector-perm" [attr.data-perm]="p.toLowerCase()">{{ p }}</span>
+                }
+              </div>
+            </div>
+            <svg
+              [class]="chevronClass(s.raw)"
+              xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"
+              fill="none" stroke="currentColor" stroke-width="2"
+              stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+              <path d="m6 9 6 6 6-6"/>
+            </svg>
+          </button>
+          @if (isOpen(s.raw) && getDescription(s)) {
+            <div role="region" class="mcpe-mcp-scope-inspector-body">
+              {{ getDescription(s) }}
+            </div>
+          }
+        </div>
+      }
+    </div>
+  `
+  })
+], McpeMcpScopeInspectorComponent);
+
+// src/mcp/mcp-resource-browser.component.ts
+import { Component as Component36, input as input34, output as output13, computed as computed26 } from "@angular/core";
+import { CommonModule as CommonModule5 } from "@angular/common";
+import { cn as cn5 } from "@mcp-elements/core";
+function _ts_decorate37(decorators, target, key, desc) {
+  var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+  if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+  else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+  return c > 3 && r && Object.defineProperty(target, key, r), r;
+}
+__name(_ts_decorate37, "_ts_decorate");
+function mimeTypeLabel(mimeType) {
+  if (!mimeType) return "res";
+  if (mimeType.includes("json")) return "json";
+  if (mimeType.includes("text")) return "txt";
+  if (mimeType.includes("image")) return "img";
+  if (mimeType.includes("pdf")) return "pdf";
+  return mimeType.split("/")[1]?.slice(0, 4) ?? "res";
+}
+__name(mimeTypeLabel, "mimeTypeLabel");
+var McpeMcpResourceBrowserComponent = class {
+  static {
+    __name(this, "McpeMcpResourceBrowserComponent");
+  }
+  resources = input34([]);
+  selectedUri = input34();
+  loading = input34(false);
+  class = input34("");
+  onSelect = output13();
+  skeletonItems = [
+    1,
+    2,
+    3,
+    4
+  ];
+  classes = computed26(() => cn5("mcpe-mcp-resource-browser", this.class()));
+  itemClass(uri) {
+    return cn5("mcpe-mcp-resource-browser-item w-full text-left", this.selectedUri() === uri ? "mcpe-mcp-resource-browser-item-selected" : "");
+  }
+  mimeLabel(mimeType) {
+    return mimeTypeLabel(mimeType);
+  }
+  select(r) {
+    this.onSelect.emit(r);
+  }
+};
+McpeMcpResourceBrowserComponent = _ts_decorate37([
+  Component36({
+    selector: "mcpe-mcp-resource-browser",
+    standalone: true,
+    imports: [
+      CommonModule5
+    ],
+    template: `
+    @if (loading()) {
+      <div [class]="classes()">
+        @for (n of skeletonItems; track n) {
+          <div class="flex items-center gap-3 px-3 py-2.5">
+            <div class="h-8 w-8 rounded-md animate-pulse bg-muted"></div>
+            <div class="h-4 flex-1 rounded animate-pulse bg-muted"></div>
+          </div>
+        }
+      </div>
+    } @else if (resources().length === 0) {
+      <div [class]="classes()">
+        <p class="mcpe-mcp-resource-browser-empty">No resources available</p>
+      </div>
+    } @else {
+      <div [class]="classes()" role="list">
+        @for (r of resources(); track r.uri) {
+          <button
+            type="button"
+            role="listitem"
+            [class]="itemClass(r.uri)"
+            [attr.aria-selected]="selectedUri() === r.uri"
+            [attr.aria-label]="r.name"
+            (click)="select(r)"
+          >
+            <span class="mcpe-mcp-resource-browser-icon" aria-hidden="true">{{ mimeLabel(r.mimeType) }}</span>
+            <span class="mcpe-mcp-resource-browser-name">{{ r.name }}</span>
+            @if (r.mimeType) {
+              <span class="mcpe-mcp-resource-browser-type">{{ r.mimeType.split('/')[0] }}</span>
+            }
+          </button>
+        }
+      </div>
+    }
+  `
+  })
+], McpeMcpResourceBrowserComponent);
+
+// src/mcp/mcp-app-frame.component.ts
+import { Component as Component37, input as input35, output as output14, effect as effect3, computed as computed27, viewChild as viewChild4 } from "@angular/core";
+import { cn as cn6, createAppBridge } from "@mcp-elements/core";
+function _ts_decorate38(decorators, target, key, desc) {
+  var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+  if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+  else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+  return c > 3 && r && Object.defineProperty(target, key, r), r;
+}
+__name(_ts_decorate38, "_ts_decorate");
+function _ts_metadata5(k, v) {
+  if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
+}
+__name(_ts_metadata5, "_ts_metadata");
+var McpeMcpAppFrameComponent = class {
+  static {
+    __name(this, "McpeMcpAppFrameComponent");
+  }
+  src = input35.required();
+  height = input35(480);
+  sandbox = input35("allow-scripts allow-same-origin");
+  class = input35("");
+  onMessage = output14();
+  frame = viewChild4("frame");
+  _unsub;
+  _removeListener;
+  constructor() {
+    effect3(() => {
+      this._cleanup();
+      const bridge = createAppBridge({
+        postMessage: /* @__PURE__ */ __name((env) => {
+          this.frame()?.nativeElement?.contentWindow?.postMessage(env, "*");
+        }, "postMessage")
+      });
+      const unsub = bridge.onMessage((env) => this.onMessage.emit(env));
+      const handler = /* @__PURE__ */ __name((e) => bridge.receive(e.data), "handler");
+      window.addEventListener("message", handler);
+      this._unsub = unsub;
+      this._removeListener = () => window.removeEventListener("message", handler);
+    });
+  }
+  _cleanup() {
+    this._unsub?.();
+    this._removeListener?.();
+    this._unsub = void 0;
+    this._removeListener = void 0;
+  }
+  ngOnDestroy() {
+    this._cleanup();
+  }
+  classes = computed27(() => cn6("mcpe-mcp-app-frame", this.class()));
+};
+McpeMcpAppFrameComponent = _ts_decorate38([
+  Component37({
+    selector: "mcpe-mcp-app-frame",
+    standalone: true,
+    template: `
+    <div [class]="classes()">
+      <iframe
+        #frame
+        [src]="src()"
+        [sandbox]="sandbox()"
+        [style.height.px]="height()"
+        title="MCP App"
+        aria-label="MCP App frame"
+        style="display:block;width:100%;border:none"
+      ></iframe>
+    </div>
+  `
+  }),
+  _ts_metadata5("design:type", Function),
+  _ts_metadata5("design:paramtypes", [])
+], McpeMcpAppFrameComponent);
+export {
+  McpeMcpAppFrameComponent,
+  McpeMcpConsentDialogComponent,
+  McpeMcpResourceBrowserComponent,
+  McpeMcpScopeInspectorComponent,
+  McpeMcpServerStatusComponent,
+  McpeMcpToolCallComponent,
+  McpeMcpToolFormComponent,
+  SnxAccordionComponent,
+  SnxAccordionContentComponent,
+  SnxAccordionItemComponent,
+  SnxAccordionTriggerComponent,
+  SnxAiBadgeComponent,
+  SnxAlertComponent,
+  SnxAlertDescriptionComponent,
+  SnxAlertTitleComponent,
+  SnxAvatarComponent,
+  SnxBadgeComponent,
+  SnxButtonComponent,
+  SnxCardComponent,
+  SnxCardContentComponent,
+  SnxCardDescriptionComponent,
+  SnxCardFooterComponent,
+  SnxCardHeaderComponent,
+  SnxCardTitleComponent,
+  SnxChatBubbleAvatarComponent,
+  SnxChatBubbleComponent,
+  SnxChatBubbleContentComponent,
+  SnxChatBubbleTimestampComponent,
+  SnxChatBubbleTypingComponent,
+  SnxChipComponent,
+  SnxChipsComponent,
+  SnxCounterComponent,
+  SnxDialogComponent,
+  SnxDrawerBodyComponent,
+  SnxDrawerComponent,
+  SnxDrawerDescriptionComponent,
+  SnxDrawerFooterComponent,
+  SnxDrawerHeaderComponent,
+  SnxDrawerTitleComponent,
+  SnxDropdownMenuComponent,
+  SnxFeedbackButtonComponent,
+  SnxFeedbackComponent,
+  SnxFeedbackFormComponent,
+  SnxFeedbackInputComponent,
+  SnxFeedbackSeparatorComponent,
+  SnxFeedbackSubmitComponent,
+  SnxInputComponent,
+  SnxLoaderComponent,
+  SnxPasswordInputComponent,
+  SnxPopoverComponent,
+  SnxProgressComponent,
+  SnxPromptInputActionsComponent,
+  SnxPromptInputAttachmentComponent,
+  SnxPromptInputAttachmentsComponent,
+  SnxPromptInputCharCountComponent,
+  SnxPromptInputComponent,
+  SnxPromptInputFooterComponent,
+  SnxPromptInputTextareaComponent,
+  SnxSelectComponent,
+  SnxSeparatorComponent,
+  SnxSkeletonComponent,
+  SnxSourceCardComponent,
+  SnxSourceCardsComponent,
+  SnxStreamingTextComponent,
+  SnxStreamingTextFadeInComponent,
+  SnxStreamingTextLineComponent,
+  SnxStreamingTextSkeletonComponent,
+  SnxStreamingTextSkeletonLineComponent,
+  SnxStreamingTextWordComponent,
+  SnxSuggestionChipComponent,
+  SnxSuggestionChipsComponent,
+  SnxSwitchComponent,
+  SnxTabsComponent,
+  SnxTabsContentComponent,
+  SnxTabsListComponent,
+  SnxTabsTriggerComponent,
+  SnxTextareaComponent,
+  SnxToastService,
+  SnxToasterComponent,
+  SnxTooltipDirective
+};
+//# sourceMappingURL=index.js.map