@mcp-elements/angular 0.1.0

package/src/mcp/mcp-tool-form.component.ts

@@ -0,0 +1,127 @@
+import { Component, input, output, signal, computed, OnInit } from '@angular/core'
+import { CommonModule } from '@angular/common'
+import { cn, schemaToFields } from '@mcp-elements/core'
+import type { JsonSchema, FieldDescriptor } from '@mcp-elements/core'
+
+@Component({
+  selector: 'mcpe-mcp-tool-form',
+  standalone: true,
+  imports: [CommonModule],
+  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…</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…' : submitLabel() }}
+        </button>
+      </div>
+    </form>
+  `,
+})
+export class McpeMcpToolFormComponent implements OnInit {
+  schema = input.required<JsonSchema>()
+  loading = input(false)
+  submitLabel = input('Run')
+  class = input('')
+  onSubmit = output<Record<string, unknown>>()
+
+  fields = computed(() => schemaToFields(this.schema()))
+  values = signal<Record<string, unknown>>({})
+
+  ngOnInit() {
+    const defaults: Record<string, unknown> = {}
+    for (const f of this.fields()) {
+      if (f.defaultValue !== undefined) defaults[f.key] = f.defaultValue
+    }
+    this.values.set(defaults)
+  }
+
+  classes = computed(() => cn('mcpe-mcp-tool-form', this.class()))
+
+  setValue(key: string, value: unknown) {
+    this.values.update((v: Record<string, unknown>) => ({ ...v, [key]: value }))
+  }
+
+  onInputChange(key: string, event: Event) {
+    this.setValue(key, (event.target as HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement).value)
+  }
+
+  onNumberChange(key: string, event: Event) {
+    this.setValue(key, (event.target as HTMLInputElement).valueAsNumber)
+  }
+
+  onCheckChange(key: string, event: Event) {
+    this.setValue(key, (event.target as HTMLInputElement).checked)
+  }
+
+  getStr(key: string): string {
+    const v = this.values()[key]
+    return v == null ? '' : String(v)
+  }
+
+  getBool(key: string): boolean {
+    return Boolean(this.values()[key])
+  }
+
+  labelClass(field: FieldDescriptor): string {
+    return cn('mcpe-mcp-tool-form-label', field.required ? 'mcpe-mcp-tool-form-label-required' : '')
+  }
+
+  inputType(field: FieldDescriptor): string {
+    switch (field.kind) {
+      case 'email': return 'email'
+      case 'url': return 'url'
+      case 'date': return 'date'
+      default: return 'text'
+    }
+  }
+
+  handleSubmit() {
+    this.onSubmit.emit(this.values())
+  }
+}

package/src/password-input.component.ts

@@ -0,0 +1,35 @@
+import { Component, input, signal, computed } from '@angular/core'
+
+@Component({
+  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>
+  `,
+})
+export class SnxPasswordInputComponent {
+  placeholder = input('')
+  disabled = input(false)
+  showPassword = signal(false)
+}

package/src/popover.component.ts

@@ -0,0 +1,40 @@
+import { Component, input, signal, ElementRef, viewChild } from '@angular/core'
+
+@Component({
+  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)',
+  },
+})
+export class SnxPopoverComponent {
+  isOpen = signal(false)
+  container = viewChild<ElementRef>('container')
+
+  toggle() { this.isOpen.update(v => !v) }
+  close() { this.isOpen.set(false) }
+  show() { this.isOpen.set(true) }
+
+  onDocumentClick(event: MouseEvent) {
+    const el = this.container()?.nativeElement
+    if (el && !el.contains(event.target as Node)) {
+      this.isOpen.set(false)
+    }
+  }
+}

package/src/progress.component.ts

@@ -0,0 +1,20 @@
+import { Component, input, computed } from '@angular/core'
+
+@Component({
+  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>
+  `,
+})
+export class SnxProgressComponent {
+  value = input(0)
+  max = input(100)
+  transform = computed(() => {
+    const pct = Math.min(Math.max((this.value() / this.max()) * 100, 0), 100)
+    return `translateX(-${100 - pct}%)`
+  })
+}

package/src/prompt-input.component.ts

@@ -0,0 +1,70 @@
+import { Component, input, output, computed } from '@angular/core'
+
+@Component({
+  selector: 'mcpe-prompt-input',
+  standalone: true,
+  template: `<div [class]="classes()"><ng-content /></div>`,
+})
+export class SnxPromptInputComponent {
+  class = input('')
+  classes = computed(() => ['mcpe-prompt-input', this.class()].filter(Boolean).join(' '))
+}
+
+@Component({
+  selector: 'mcpe-prompt-input-textarea',
+  standalone: true,
+  template: `<textarea class="mcpe-prompt-input-textarea" [placeholder]="placeholder()" [rows]="rows()"></textarea>`,
+})
+export class SnxPromptInputTextareaComponent {
+  placeholder = input('')
+  rows = input(3)
+}
+
+@Component({
+  selector: 'mcpe-prompt-input-footer',
+  standalone: true,
+  template: `<div class="mcpe-prompt-input-footer"><ng-content /></div>`,
+})
+export class SnxPromptInputFooterComponent {}
+
+@Component({
+  selector: 'mcpe-prompt-input-actions',
+  standalone: true,
+  template: `<div class="mcpe-prompt-input-actions"><ng-content /></div>`,
+})
+export class SnxPromptInputActionsComponent {}
+
+@Component({
+  selector: 'mcpe-prompt-input-char-count',
+  standalone: true,
+  template: `<span class="mcpe-prompt-input-char-count">{{ count() }}@if (max()) { / {{ max() }} }</span>`,
+})
+export class SnxPromptInputCharCountComponent {
+  count = input(0)
+  max = input<number | undefined>(undefined)
+}
+
+@Component({
+  selector: 'mcpe-prompt-input-attachments',
+  standalone: true,
+  template: `<div class="mcpe-prompt-input-attachments"><ng-content /></div>`,
+})
+export class SnxPromptInputAttachmentsComponent {}
+
+@Component({
+  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>
+  `,
+})
+export class SnxPromptInputAttachmentComponent {
+  remove = output()
+}

package/src/select.component.ts

@@ -0,0 +1,106 @@
+import { Component, input, output, signal, computed, ElementRef, viewChild, HostListener } from '@angular/core'
+import { createSelect, type SelectOption } from '@mcp-elements/core'
+
+@Component({
+  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)',
+  },
+})
+export class SnxSelectComponent {
+  options = input<SelectOption[]>([])
+  placeholder = input('Select...')
+  valueChange = output<string>()
+
+  isOpen = signal(false)
+  selectedValue = signal<string | null>(null)
+  highlightedIndex = signal(0)
+
+  container = viewChild<ElementRef>('container')
+
+  selectedLabel = computed(() => {
+    const val = this.selectedValue()
+    return this.options().find(o => o.value === val)?.label ?? ''
+  })
+
+  toggle() { this.isOpen.update(v => !v) }
+
+  selectOption(option: SelectOption) {
+    if (option.disabled) return
+    this.selectedValue.set(option.value)
+    this.valueChange.emit(option.value)
+    this.isOpen.set(false)
+  }
+
+  getItemClasses(option: SelectOption, index: number): string {
+    return [
+      'mcpe-select-item',
+      index === this.highlightedIndex() ? 'mcpe-select-item-active' : '',
+      option.value === this.selectedValue() ? 'mcpe-select-item-selected' : '',
+    ].filter(Boolean).join(' ')
+  }
+
+  onKeyDown(event: KeyboardEvent) {
+    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: MouseEvent) {
+    const el = this.container()?.nativeElement
+    if (el && !el.contains(event.target as Node)) {
+      this.isOpen.set(false)
+    }
+  }
+}

package/src/separator.component.ts

@@ -0,0 +1,15 @@
+import { Component, input, computed } from '@angular/core'
+
+@Component({
+  selector: 'mcpe-separator',
+  standalone: true,
+  template: `<div [class]="classes()" role="separator" [attr.aria-orientation]="orientation()"></div>`,
+})
+export class SnxSeparatorComponent {
+  orientation = input<'horizontal' | 'vertical'>('horizontal')
+  class = input('')
+
+  classes = computed(() =>
+    ['mcpe-separator', `mcpe-separator-${this.orientation()}`, this.class()].filter(Boolean).join(' ')
+  )
+}

package/src/skeleton.component.ts

@@ -0,0 +1,11 @@
+import { Component, input, computed } from '@angular/core'
+
+@Component({
+  selector: 'mcpe-skeleton',
+  standalone: true,
+  template: `<div [class]="classes()"></div>`,
+})
+export class SnxSkeletonComponent {
+  class = input('')
+  classes = computed(() => ['mcpe-skeleton', this.class()].filter(Boolean).join(' '))
+}

package/src/source-card.component.ts

@@ -0,0 +1,34 @@
+import { Component, input } from '@angular/core'
+
+@Component({
+  selector: 'mcpe-source-cards',
+  standalone: true,
+  template: `<div class="mcpe-source-cards"><ng-content /></div>`,
+})
+export class SnxSourceCardsComponent {}
+
+@Component({
+  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>
+  `,
+})
+export class SnxSourceCardComponent {
+  href = input.required<string>()
+  favicon = input('')
+  title = input('')
+  domain = input('')
+  index = input<number | undefined>(undefined)
+}

package/src/streaming-text.component.ts

@@ -0,0 +1,43 @@
+import { Component } from '@angular/core'
+
+@Component({
+  selector: 'mcpe-streaming-text',
+  standalone: true,
+  template: `<div class="mcpe-streaming-text-cursor"><ng-content /></div>`,
+})
+export class SnxStreamingTextComponent {}
+
+@Component({
+  selector: 'mcpe-streaming-text-fade-in',
+  standalone: true,
+  template: `<span class="mcpe-streaming-text-fade-in"><ng-content /></span>`,
+})
+export class SnxStreamingTextFadeInComponent {}
+
+@Component({
+  selector: 'mcpe-streaming-text-word',
+  standalone: true,
+  template: `<span class="mcpe-streaming-text-word"><ng-content /></span>`,
+})
+export class SnxStreamingTextWordComponent {}
+
+@Component({
+  selector: 'mcpe-streaming-text-line',
+  standalone: true,
+  template: `<div class="mcpe-streaming-text-line"><ng-content /></div>`,
+})
+export class SnxStreamingTextLineComponent {}
+
+@Component({
+  selector: 'mcpe-streaming-text-skeleton',
+  standalone: true,
+  template: `<div class="mcpe-streaming-text-skeleton"><ng-content /></div>`,
+})
+export class SnxStreamingTextSkeletonComponent {}
+
+@Component({
+  selector: 'mcpe-streaming-text-skeleton-line',
+  standalone: true,
+  template: `<div class="mcpe-streaming-text-skeleton-line"></div>`,
+})
+export class SnxStreamingTextSkeletonLineComponent {}

package/src/suggestion-chips.component.ts

@@ -0,0 +1,23 @@
+import { Component, input, computed } from '@angular/core'
+
+type SuggestionChipVariant = 'default' | 'primary' | 'outline'
+
+@Component({
+  selector: 'mcpe-suggestion-chips',
+  standalone: true,
+  template: `<div class="mcpe-suggestion-chips"><ng-content /></div>`,
+})
+export class SnxSuggestionChipsComponent {}
+
+@Component({
+  selector: 'mcpe-suggestion-chip',
+  standalone: true,
+  template: `<button [class]="classes()" type="button"><ng-content /></button>`,
+})
+export class SnxSuggestionChipComponent {
+  variant = input<SuggestionChipVariant>('default')
+  class = input('')
+  classes = computed(() =>
+    ['mcpe-suggestion-chip', `mcpe-suggestion-chip-${this.variant()}`, this.class()].filter(Boolean).join(' ')
+  )
+}

package/src/switch.component.ts

@@ -0,0 +1,32 @@
+import { Component, input, output, signal, computed } from '@angular/core'
+
+@Component({
+  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>
+  `,
+})
+export class SnxSwitchComponent {
+  checked = signal(false)
+  disabled = input(false)
+  checkedChange = output<boolean>()
+
+  toggle() {
+    if (this.disabled()) return
+    this.checked.update(v => !v)
+    this.checkedChange.emit(this.checked())
+  }
+}

package/src/tabs.component.ts

@@ -0,0 +1,95 @@
+import { Component, input, output, signal, computed, effect, contentChildren, ElementRef } from '@angular/core'
+import { createTabs, type TabItem } from '@mcp-elements/core'
+
+@Component({
+  selector: 'mcpe-tabs',
+  standalone: true,
+  template: `<div><ng-content /></div>`,
+})
+export class SnxTabsComponent {
+  items = input<TabItem[]>([])
+  defaultValue = input<string>('')
+  activeValue = signal('')
+
+  private api = computed(() =>
+    createTabs(this.items(), {
+      defaultValue: this.defaultValue(),
+      onValueChange: (v) => this.activeValue.set(v),
+    })
+  )
+
+  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: string) {
+    return this.api().getTriggerProps(value, this.activeValue())
+  }
+
+  getPanelProps(value: string) {
+    return this.api().getPanelProps(value, this.activeValue())
+  }
+
+  isActive(value: string): boolean {
+    return this.activeValue() === value
+  }
+
+  select(value: string) {
+    this.activeValue.set(value)
+  }
+}
+
+@Component({
+  selector: 'mcpe-tabs-list',
+  standalone: true,
+  template: `<div role="tablist" class="mcpe-tabs-list"><ng-content /></div>`,
+})
+export class SnxTabsListComponent {}
+
+@Component({
+  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>
+  `,
+})
+export class SnxTabsTriggerComponent {
+  isActive = input(false)
+  onClick = output<void>()
+  class = input('')
+
+  classes = computed(() =>
+    ['mcpe-tabs-trigger', this.isActive() ? 'mcpe-tabs-trigger-active' : '', this.class()]
+      .filter(Boolean)
+      .join(' ')
+  )
+}
+
+@Component({
+  selector: 'mcpe-tabs-content',
+  standalone: true,
+  template: `
+    @if (isActive()) {
+      <div role="tabpanel" class="mcpe-tabs-content"><ng-content /></div>
+    }
+  `,
+})
+export class SnxTabsContentComponent {
+  isActive = input(false)
+}

package/src/textarea.component.ts

@@ -0,0 +1,22 @@
+import { Component, input, computed } from '@angular/core'
+
+@Component({
+  selector: 'mcpe-textarea',
+  standalone: true,
+  template: `
+    <textarea
+      [class]="classes()"
+      [placeholder]="placeholder()"
+      [disabled]="disabled()"
+      [rows]="rows()"
+    ><ng-content /></textarea>
+  `,
+})
+export class SnxTextareaComponent {
+  placeholder = input('')
+  disabled = input(false)
+  rows = input(3)
+  class = input('')
+
+  classes = computed(() => ['mcpe-textarea', this.class()].filter(Boolean).join(' '))
+}