@mcp-elements/angular 0.1.0 → 0.1.2

package/src/mcp/mcp-resource-browser.component.ts

@@ -1,86 +0,0 @@
-import { Component, input, output, computed } from '@angular/core'
-import { CommonModule } from '@angular/common'
-import { cn } from '@mcp-elements/core'
-
-export interface McpResource {
-  uri: string
-  name: string
-  mimeType?: string
-  description?: string
-}
-
-function mimeTypeLabel(mimeType?: string): string {
-  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'
-}
-
-@Component({
-  selector: 'mcpe-mcp-resource-browser',
-  standalone: true,
-  imports: [CommonModule],
-  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>
-    }
-  `,
-})
-export class McpeMcpResourceBrowserComponent {
-  resources = input<McpResource[]>([])
-  selectedUri = input<string>()
-  loading = input(false)
-  class = input('')
-  onSelect = output<McpResource>()
-
-  readonly skeletonItems = [1, 2, 3, 4]
-
-  classes = computed(() => cn('mcpe-mcp-resource-browser', this.class()))
-
-  itemClass(uri: string): string {
-    return cn(
-      'mcpe-mcp-resource-browser-item w-full text-left',
-      this.selectedUri() === uri ? 'mcpe-mcp-resource-browser-item-selected' : ''
-    )
-  }
-
-  mimeLabel(mimeType?: string): string {
-    return mimeTypeLabel(mimeType)
-  }
-
-  select(r: McpResource) {
-    this.onSelect.emit(r)
-  }
-}

package/src/mcp/mcp-scope-inspector.component.ts

@@ -1,81 +0,0 @@
-import { Component, input, signal, computed } from '@angular/core'
-import { CommonModule } from '@angular/common'
-import { cn, parseScopes } from '@mcp-elements/core'
-import type { ScopeDescriptor } from '@mcp-elements/core'
-
-@Component({
-  selector: 'mcpe-mcp-scope-inspector',
-  standalone: true,
-  imports: [CommonModule],
-  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">{{ 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>
-  `,
-})
-export class McpeMcpScopeInspectorComponent {
-  scopes = input<string | ScopeDescriptor[]>('')
-  descriptions = input<Record<string, string>>({})
-  class = input('')
-
-  openKeys = signal<Set<string>>(new Set())
-
-  parsedScopes = computed((): ScopeDescriptor[] => {
-    const s = this.scopes()
-    return typeof s === 'string' ? parseScopes(s) : s
-  })
-
-  classes = computed(() => cn('mcpe-mcp-scope-inspector', this.class()))
-
-  toggle(key: string) {
-    this.openKeys.update((prev: Set<string>) => {
-      const next = new Set(prev)
-      if (next.has(key)) next.delete(key)
-      else next.add(key)
-      return next
-    })
-  }
-
-  isOpen(key: string): boolean {
-    return this.openKeys().has(key)
-  }
-
-  chevronClass(key: string): string {
-    return cn('mcpe-mcp-scope-inspector-chevron', this.isOpen(key) ? 'mcpe-mcp-scope-inspector-chevron-open' : '')
-  }
-
-  getDescription(s: ScopeDescriptor): string | undefined {
-    const d = this.descriptions()
-    return d[s.raw] ?? d[s.resource] ?? s.description
-  }
-}

package/src/mcp/mcp-server-status.component.ts

@@ -1,44 +0,0 @@
-import { Component, input, computed } from '@angular/core'
-import { cn } from '@mcp-elements/core'
-
-export type McpConnectionStatus = 'connected' | 'connecting' | 'disconnected' | 'error'
-
-const STATUS_LABELS: Record<McpConnectionStatus, string> = {
-  connected: 'Connected',
-  connecting: 'Connecting',
-  disconnected: 'Disconnected',
-  error: 'Error',
-}
-
-@Component({
-  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>
-  `,
-})
-export class McpeMcpServerStatusComponent {
-  status = input.required<McpConnectionStatus>()
-  serverName = input<string>()
-  class = input('')
-
-  classes = computed(() => cn('mcpe-mcp-server-status', `mcpe-mcp-server-status-${this.status()}`, this.class()))
-  label = computed(() => {
-    const s = this.serverName()
-    const statusLabel = STATUS_LABELS[this.status() as McpConnectionStatus]
-    return s ? `${s} · ${statusLabel}` : statusLabel
-  })
-  ariaLabel = computed(() => {
-    const s = this.serverName()
-    const statusLabel = STATUS_LABELS[this.status() as McpConnectionStatus]
-    return s ? `${s}: ${statusLabel}` : statusLabel
-  })
-}

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

@@ -1,105 +0,0 @@
-import { Component, input, output, signal, effect, computed, OnDestroy } from '@angular/core'
-import { CommonModule } from '@angular/common'
-import { cn } from '@mcp-elements/core'
-import type { ToolStateApi, ToolStateSnapshot } from '@mcp-elements/core'
-
-const STATUS_LABELS: Record<string, string> = {
-  idle: 'idle',
-  pending: 'pending',
-  running: 'running',
-  done: 'done',
-  error: 'error',
-  cancelled: 'cancelled',
-}
-
-@Component({
-  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>
-  `,
-})
-export class McpeMcpToolCallComponent implements OnDestroy {
-  state = input.required<ToolStateApi>()
-  toolName = input<string>()
-  args = input<Record<string, unknown>>()
-  onRetry = output<void>()
-  class = input('')
-
-  readonly statusLabels = STATUS_LABELS
-
-  snap = signal<ToolStateSnapshot>({ status: 'idle' })
-  private _unsub: (() => void) | undefined
-
-  constructor() {
-    effect(() => {
-      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: ToolStateSnapshot) => this.snap.set({ ...snapshot }))
-    })
-  }
-
-  ngOnDestroy() { this._unsub?.() }
-
-  classes = computed(() => cn('mcpe-mcp-tool-call', this.class()))
-  badgeClass = computed(() => cn('mcpe-mcp-tool-call-badge', `mcpe-mcp-tool-call-badge-${this.snap().status}`))
-  displayName = computed(() => this.snap().tool ?? this.toolName() ?? 'unknown')
-  displayArgs = computed(() => this.snap().args ?? this.args())
-  textBlocks = computed(() =>
-    this.snap().result?.content
-      .filter((c: { type: string }) => c.type === 'text')
-      .map((c: { type: string; text?: string }) => (c as { type: 'text'; text: string }).text) ?? []
-  )
-}

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

@@ -1,127 +0,0 @@
-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

@@ -1,35 +0,0 @@
-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

@@ -1,40 +0,0 @@
-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

@@ -1,20 +0,0 @@
-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

@@ -1,70 +0,0 @@
-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()
-}