@mcp-elements/vue 0.1.0 → 0.1.2

package/dist/index.js

@@ -325,10 +325,18 @@ var McpeDialog = defineComponent8({
     const close = () => emit("update:modelValue", false);
     let unlockScroll = null;
     const lockScroll = () => {
-      const prev = document.body.style.overflow;
-      document.body.style.overflow = "hidden";
+      const body = document.body;
+      const scrollbarWidth = window.innerWidth - document.documentElement.clientWidth;
+      const prevOverflow = body.style.overflow;
+      const prevPaddingRight = body.style.paddingRight;
+      body.style.overflow = "hidden";
+      if (scrollbarWidth > 0) {
+        const currentPad = parseFloat(getComputedStyle(body).paddingRight) || 0;
+        body.style.paddingRight = `${currentPad + scrollbarWidth}px`;
+      }
       return () => {
-        document.body.style.overflow = prev;
+        body.style.overflow = prevOverflow;
+        body.style.paddingRight = prevPaddingRight;
       };
     };
     watch(
@@ -362,48 +370,53 @@ var McpeDialog = defineComponent8({
     return () => {
       if (!props.modelValue) return h8("span", { style: "display:none" });
       return h8(Teleport, { to: "body" }, [
-        h8("div", {
-          class: "mcpe-dialog-overlay",
-          onClick: close
-        }),
         h8(
           "div",
           {
-            class: cn8("mcpe-dialog-content", props.class),
-            role: "dialog",
-            "aria-modal": props.modal,
-            onClick: (e) => e.stopPropagation()
+            class: "mcpe-dialog-overlay",
+            onClick: close
           },
           [
-            slots.default?.(),
             h8(
-              "button",
+              "div",
               {
-                class: "mcpe-dialog-close",
-                "aria-label": "Close",
-                type: "button",
-                onClick: close
+                class: cn8("mcpe-dialog-content", props.class),
+                role: "dialog",
+                "aria-modal": props.modal,
+                onClick: (e) => e.stopPropagation()
               },
               [
+                slots.default?.(),
                 h8(
-                  "svg",
+                  "button",
                   {
-                    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"
+                    class: "mcpe-dialog-close",
+                    "aria-label": "Close",
+                    type: "button",
+                    onClick: close
                   },
                   [
-                    h8("path", { d: "M18 6 6 18" }),
-                    h8("path", { d: "m6 6 12 12" })
+                    h8(
+                      "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"
+                      },
+                      [
+                        h8("path", { d: "M18 6 6 18" }),
+                        h8("path", { d: "m6 6 12 12" })
+                      ]
+                    )
                   ]
-                ),
-                h8("span", { class: "sr-only" }, "Close")
+                )
               ]
             )
           ]
@@ -497,6 +510,783 @@ var McpeTabs = defineComponent10({
     };
   }
 });
+
+// src/mcp/mcp-server-status.ts
+import { defineComponent as defineComponent11, h as h11, computed as computed9 } from "vue";
+import { cn as cn11 } from "@mcp-elements/core";
+var STATUS_LABELS = {
+  connected: "Connected",
+  connecting: "Connecting",
+  disconnected: "Disconnected",
+  error: "Error"
+};
+var McpeMcpServerStatus = defineComponent11({
+  name: "McpeMcpServerStatus",
+  props: {
+    status: { type: String, required: true },
+    serverName: { type: String, default: "" },
+    class: { type: String, default: "" }
+  },
+  setup(props) {
+    const label = computed9(
+      () => (props.serverName ? `${props.serverName} \xB7 ` : "") + STATUS_LABELS[props.status]
+    );
+    const ariaLabel = computed9(
+      () => (props.serverName ? `${props.serverName}: ` : "") + STATUS_LABELS[props.status]
+    );
+    return () => h11(
+      "span",
+      {
+        class: cn11(
+          "mcpe-mcp-server-status",
+          `mcpe-mcp-server-status-${props.status}`,
+          props.class
+        ),
+        role: "status",
+        "aria-live": "polite",
+        "aria-label": ariaLabel.value
+      },
+      [h11("span", { class: "mcpe-mcp-server-status-dot", "aria-hidden": "true" }), label.value]
+    );
+  }
+});
+
+// src/mcp/mcp-tool-call.ts
+import { defineComponent as defineComponent12, h as h12, ref, computed as computed10, watch as watch2, onUnmounted as onUnmounted2 } from "vue";
+import { cn as cn12 } from "@mcp-elements/core";
+var STATUS_LABELS2 = {
+  idle: "idle",
+  pending: "pending",
+  running: "running",
+  done: "done",
+  error: "error",
+  cancelled: "cancelled"
+};
+var McpeMcpToolCall = defineComponent12({
+  name: "McpeMcpToolCall",
+  props: {
+    state: { type: Object, required: true },
+    toolName: { type: String, default: "" },
+    args: { type: Object, default: void 0 },
+    class: { type: String, default: "" }
+  },
+  emits: ["retry"],
+  setup(props, { emit }) {
+    const snap = ref({ status: "idle" });
+    let unsub;
+    watch2(
+      () => props.state,
+      (state) => {
+        unsub?.();
+        snap.value = {
+          status: state.status,
+          tool: state.tool,
+          args: state.args,
+          result: state.result,
+          error: state.error,
+          startedAt: state.startedAt,
+          endedAt: state.endedAt
+        };
+        unsub = state.subscribe((s) => {
+          snap.value = { ...s };
+        });
+      },
+      { immediate: true }
+    );
+    onUnmounted2(() => unsub?.());
+    const displayName = computed10(() => snap.value.tool ?? props.toolName ?? "unknown");
+    const displayArgs = computed10(() => snap.value.args ?? props.args);
+    const textBlocks = computed10(
+      () => (snap.value.result?.content ?? []).filter((c) => c.type === "text")
+    );
+    return () => {
+      const status = snap.value.status;
+      const children = [];
+      children.push(
+        h12("div", { class: "mcpe-mcp-tool-call-header" }, [
+          h12("div", { class: "mcpe-mcp-tool-call-name" }, [
+            h12("span", { class: "mcpe-mcp-tool-call-icon", "aria-hidden": "true" }, "fn"),
+            h12("span", { class: "mcpe-mcp-tool-call-title" }, displayName.value)
+          ]),
+          h12(
+            "span",
+            { class: cn12("mcpe-mcp-tool-call-badge", `mcpe-mcp-tool-call-badge-${status}`) },
+            [
+              status === "running" ? h12(
+                "svg",
+                {
+                  class: "animate-spin h-3 w-3",
+                  fill: "none",
+                  viewBox: "0 0 24 24",
+                  "aria-hidden": "true"
+                },
+                [
+                  h12("circle", {
+                    class: "opacity-25",
+                    cx: "12",
+                    cy: "12",
+                    r: "10",
+                    stroke: "currentColor",
+                    "stroke-width": "4"
+                  }),
+                  h12("path", {
+                    class: "opacity-75",
+                    fill: "currentColor",
+                    d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"
+                  })
+                ]
+              ) : null,
+              STATUS_LABELS2[status]
+            ]
+          )
+        ])
+      );
+      if (displayArgs.value) {
+        children.push(
+          h12("pre", { class: "mcpe-mcp-tool-call-args" }, JSON.stringify(displayArgs.value, null, 2))
+        );
+      }
+      if (status === "running") {
+        children.push(
+          h12(
+            "div",
+            {
+              class: "mcpe-mcp-tool-call-progress",
+              role: "progressbar",
+              "aria-label": "Tool running"
+            },
+            [h12("div", { class: "mcpe-mcp-tool-call-progress-bar", style: "width: 60%" })]
+          )
+        );
+      }
+      if (status === "done" && snap.value.result) {
+        children.push(
+          h12(
+            "div",
+            { class: "mcpe-mcp-tool-call-result mcpe-mcp-tool-call-result-done" },
+            textBlocks.value.map((b) => h12("p", { class: "whitespace-pre-wrap text-sm" }, b.text))
+          )
+        );
+      }
+      if (status === "error" && snap.value.error) {
+        children.push(
+          h12("div", { class: "mcpe-mcp-tool-call-result mcpe-mcp-tool-call-result-error" }, [
+            h12("p", { class: "text-sm" }, snap.value.error.message),
+            h12(
+              "button",
+              {
+                class: "text-xs underline underline-offset-2",
+                type: "button",
+                onClick: () => emit("retry")
+              },
+              "Retry"
+            )
+          ])
+        );
+      }
+      return h12("div", { class: cn12("mcpe-mcp-tool-call", props.class) }, children);
+    };
+  }
+});
+
+// src/mcp/mcp-tool-form.ts
+import { defineComponent as defineComponent13, h as h13, reactive, computed as computed11, watch as watch3 } from "vue";
+import { cn as cn13, schemaToFields } from "@mcp-elements/core";
+var McpeMcpToolForm = defineComponent13({
+  name: "McpeMcpToolForm",
+  props: {
+    schema: { type: Object, required: true },
+    loading: { type: Boolean, default: false },
+    submitLabel: { type: String, default: "Run" },
+    class: { type: String, default: "" }
+  },
+  emits: ["submit"],
+  setup(props, { emit }) {
+    const fields = computed11(() => schemaToFields(props.schema));
+    const values = reactive({});
+    watch3(
+      fields,
+      (fs) => {
+        for (const k of Object.keys(values)) delete values[k];
+        for (const f of fs) {
+          if (f.defaultValue !== void 0) values[f.key] = f.defaultValue;
+        }
+      },
+      { immediate: true }
+    );
+    const getStr = (key) => {
+      const v = values[key];
+      return v == null ? "" : String(v);
+    };
+    const getBool = (key) => Boolean(values[key]);
+    const inputType = (f) => f.kind === "email" ? "email" : f.kind === "url" ? "url" : f.kind === "date" ? "date" : "text";
+    const handleSubmit = (e) => {
+      e.preventDefault();
+      emit("submit", { ...values });
+    };
+    const submitButton = () => h13("div", { class: "mcpe-mcp-tool-form-submit" }, [
+      h13(
+        "button",
+        {
+          type: "submit",
+          class: "mcpe-btn mcpe-btn-primary mcpe-btn-sm",
+          disabled: props.loading
+        },
+        props.loading ? "Running\u2026" : props.submitLabel
+      )
+    ]);
+    const fieldInput = (field) => {
+      switch (field.kind) {
+        case "switch":
+          return h13("input", {
+            type: "checkbox",
+            id: field.key,
+            class: "mcpe-switch",
+            checked: getBool(field.key),
+            onChange: (e) => {
+              values[field.key] = e.target.checked;
+            }
+          });
+        case "select":
+          return h13(
+            "select",
+            {
+              id: field.key,
+              class: "mcpe-select",
+              value: getStr(field.key),
+              onChange: (e) => {
+                values[field.key] = e.target.value;
+              }
+            },
+            [
+              h13("option", { value: "" }, "Select\u2026"),
+              ...(field.options ?? []).map(
+                (opt) => h13("option", { value: opt.value }, opt.label)
+              )
+            ]
+          );
+        case "textarea":
+          return h13("textarea", {
+            id: field.key,
+            class: "mcpe-textarea",
+            rows: 4,
+            value: getStr(field.key),
+            onInput: (e) => {
+              values[field.key] = e.target.value;
+            }
+          });
+        case "number":
+          return h13("input", {
+            type: "number",
+            id: field.key,
+            class: "mcpe-input",
+            value: getStr(field.key),
+            onInput: (e) => {
+              const raw = e.target.value;
+              values[field.key] = raw === "" ? void 0 : Number(raw);
+            }
+          });
+        default:
+          return h13("input", {
+            type: inputType(field),
+            id: field.key,
+            class: "mcpe-input",
+            value: getStr(field.key),
+            onInput: (e) => {
+              values[field.key] = e.target.value;
+            }
+          });
+      }
+    };
+    return () => {
+      if (fields.value.length === 0) {
+        return h13("form", { class: cn13("mcpe-mcp-tool-form", props.class), onSubmit: handleSubmit }, [
+          h13("p", { class: "text-sm text-muted-foreground" }, "This tool takes no inputs."),
+          submitButton()
+        ]);
+      }
+      const fieldNodes = fields.value.map((field) => {
+        const children = [
+          h13(
+            "label",
+            {
+              for: field.key,
+              class: cn13(
+                "mcpe-mcp-tool-form-label",
+                field.required ? "mcpe-mcp-tool-form-label-required" : ""
+              )
+            },
+            field.label
+          ),
+          fieldInput(field)
+        ];
+        if (field.help) {
+          children.push(h13("p", { class: "mcpe-mcp-tool-form-help" }, field.help));
+        }
+        return h13("div", { class: "mcpe-mcp-tool-form-field" }, children);
+      });
+      return h13("form", { class: cn13("mcpe-mcp-tool-form", props.class), onSubmit: handleSubmit }, [
+        ...fieldNodes,
+        submitButton()
+      ]);
+    };
+  }
+});
+
+// src/mcp/mcp-consent-dialog.ts
+import {
+  defineComponent as defineComponent14,
+  h as h14,
+  computed as computed12,
+  watch as watch4,
+  onMounted as onMounted2,
+  onUnmounted as onUnmounted3,
+  Teleport as Teleport2
+} from "vue";
+import { parseScopes } from "@mcp-elements/core";
+var McpeMcpConsentDialog = defineComponent14({
+  name: "McpeMcpConsentDialog",
+  props: {
+    open: { type: Boolean, required: true },
+    serverName: { type: String, required: true },
+    serverIcon: { type: String, default: void 0 },
+    scopes: { type: Array, default: () => [] }
+  },
+  emits: ["approve", "deny"],
+  setup(props, { emit }) {
+    const parsedScopes = computed12(() => parseScopes(props.scopes.join(" ")));
+    const approve = () => emit("approve");
+    const deny = () => emit("deny");
+    let unlockScroll = null;
+    const lockScroll = () => {
+      const body = document.body;
+      const scrollbarWidth = window.innerWidth - document.documentElement.clientWidth;
+      const prevOverflow = body.style.overflow;
+      const prevPaddingRight = body.style.paddingRight;
+      body.style.overflow = "hidden";
+      if (scrollbarWidth > 0) {
+        const currentPad = parseFloat(getComputedStyle(body).paddingRight) || 0;
+        body.style.paddingRight = `${currentPad + scrollbarWidth}px`;
+      }
+      return () => {
+        body.style.overflow = prevOverflow;
+        body.style.paddingRight = prevPaddingRight;
+      };
+    };
+    watch4(
+      () => props.open,
+      (isOpen) => {
+        if (isOpen) {
+          unlockScroll = lockScroll();
+        } else if (unlockScroll) {
+          unlockScroll();
+          unlockScroll = null;
+        }
+      },
+      { immediate: true }
+    );
+    const handleKeydown = (e) => {
+      if (e.key === "Escape" && props.open) deny();
+    };
+    onMounted2(() => document.addEventListener("keydown", handleKeydown));
+    onUnmounted3(() => {
+      document.removeEventListener("keydown", handleKeydown);
+      if (unlockScroll) unlockScroll();
+    });
+    return () => {
+      if (!props.open) return h14("span", { style: "display:none" });
+      const iconChild = props.serverIcon ? h14("img", { src: props.serverIcon, alt: "" }) : props.serverName[0]?.toUpperCase() ?? "?";
+      return h14(Teleport2, { to: "body" }, [
+        h14(
+          "div",
+          { class: "mcpe-dialog-overlay", onClick: deny },
+          [
+            h14(
+              "div",
+              {
+                class: "mcpe-dialog-content",
+                role: "dialog",
+                "aria-modal": "true",
+                "aria-label": `Allow ${props.serverName}?`,
+                onClick: (e) => e.stopPropagation()
+              },
+              [
+                h14("div", { class: "mcpe-mcp-consent-dialog" }, [
+                  h14("div", { class: "mcpe-dialog-header" }, [
+                    h14("h2", { class: "mcpe-dialog-title" }, "Permission Request"),
+                    h14(
+                      "p",
+                      { class: "mcpe-dialog-description" },
+                      "Review and approve the permissions this server is requesting."
+                    )
+                  ]),
+                  h14("div", { class: "mcpe-mcp-consent-dialog-server" }, [
+                    h14("div", { class: "mcpe-mcp-consent-dialog-icon", "aria-hidden": "true" }, [iconChild]),
+                    h14("div", { class: "mcpe-mcp-consent-dialog-server-text" }, [
+                      h14("p", { class: "mcpe-mcp-consent-dialog-server-name" }, props.serverName),
+                      h14("p", { class: "mcpe-mcp-consent-dialog-server-meta" }, "is requesting access to")
+                    ])
+                  ]),
+                  h14(
+                    "div",
+                    {
+                      class: "mcpe-mcp-consent-dialog-scopes",
+                      role: "list",
+                      "aria-label": "Requested permissions"
+                    },
+                    parsedScopes.value.map(
+                      (s) => h14("div", { class: "mcpe-mcp-consent-dialog-scope-item", role: "listitem" }, [
+                        h14("span", { class: "mcpe-mcp-consent-dialog-scope-resource" }, s.resource),
+                        h14(
+                          "div",
+                          { class: "mcpe-mcp-consent-dialog-scope-perms" },
+                          s.permissions.map(
+                            (p) => h14(
+                              "span",
+                              {
+                                class: "mcpe-mcp-consent-dialog-scope-perm",
+                                "data-perm": p.toLowerCase()
+                              },
+                              p
+                            )
+                          )
+                        )
+                      ])
+                    )
+                  ),
+                  h14("div", { class: "mcpe-mcp-consent-dialog-actions" }, [
+                    h14(
+                      "button",
+                      { type: "button", class: "mcpe-btn mcpe-btn-outline", onClick: deny },
+                      "Deny"
+                    ),
+                    h14(
+                      "button",
+                      { type: "button", class: "mcpe-btn mcpe-btn-primary", onClick: approve },
+                      "Allow"
+                    )
+                  ])
+                ])
+              ]
+            )
+          ]
+        )
+      ]);
+    };
+  }
+});
+
+// src/mcp/mcp-scope-inspector.ts
+import { defineComponent as defineComponent15, h as h15, ref as ref2, computed as computed13 } from "vue";
+import { cn as cn14, parseScopes as parseScopes2 } from "@mcp-elements/core";
+var McpeMcpScopeInspector = defineComponent15({
+  name: "McpeMcpScopeInspector",
+  props: {
+    scopes: {
+      type: [String, Array],
+      default: ""
+    },
+    descriptions: {
+      type: Object,
+      default: () => ({})
+    },
+    class: { type: String, default: "" }
+  },
+  setup(props) {
+    const parsed = computed13(
+      () => typeof props.scopes === "string" ? parseScopes2(props.scopes) : props.scopes
+    );
+    const openKeys = ref2(/* @__PURE__ */ new Set());
+    const isOpen = (key) => openKeys.value.has(key);
+    const toggle = (key) => {
+      const next = new Set(openKeys.value);
+      if (next.has(key)) next.delete(key);
+      else next.add(key);
+      openKeys.value = next;
+    };
+    const getDescription = (s) => props.descriptions[s.raw] ?? props.descriptions[s.resource] ?? s.description;
+    return () => h15(
+      "div",
+      { class: cn14("mcpe-mcp-scope-inspector", props.class), role: "list" },
+      parsed.value.map((s) => {
+        const open = isOpen(s.raw);
+        const desc = getDescription(s);
+        const itemChildren = [
+          h15(
+            "button",
+            {
+              type: "button",
+              class: "mcpe-mcp-scope-inspector-trigger",
+              "aria-expanded": open,
+              onClick: () => toggle(s.raw)
+            },
+            [
+              h15("div", { class: "flex items-center gap-3" }, [
+                h15("span", { class: "mcpe-mcp-scope-inspector-resource" }, s.resource),
+                h15(
+                  "div",
+                  { class: "mcpe-mcp-scope-inspector-perms" },
+                  s.permissions.map(
+                    (p) => h15("span", { class: "mcpe-mcp-scope-inspector-perm", "data-perm": p.toLowerCase() }, p)
+                  )
+                )
+              ]),
+              h15(
+                "svg",
+                {
+                  class: cn14(
+                    "mcpe-mcp-scope-inspector-chevron",
+                    open ? "mcpe-mcp-scope-inspector-chevron-open" : ""
+                  ),
+                  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"
+                },
+                [h15("path", { d: "m6 9 6 6 6-6" })]
+              )
+            ]
+          )
+        ];
+        if (open && desc) {
+          itemChildren.push(
+            h15("div", { role: "region", class: "mcpe-mcp-scope-inspector-body" }, desc)
+          );
+        }
+        return h15(
+          "div",
+          { class: "mcpe-mcp-scope-inspector-item", role: "listitem" },
+          itemChildren
+        );
+      })
+    );
+  }
+});
+
+// src/mcp/mcp-resource-browser.ts
+import { defineComponent as defineComponent16, h as h16 } from "vue";
+import { cn as cn15 } from "@mcp-elements/core";
+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";
+}
+var McpeMcpResourceBrowser = defineComponent16({
+  name: "McpeMcpResourceBrowser",
+  props: {
+    resources: { type: Array, default: () => [] },
+    selectedUri: { type: String, default: void 0 },
+    loading: { type: Boolean, default: false },
+    class: { type: String, default: "" }
+  },
+  emits: ["select"],
+  setup(props, { emit }) {
+    return () => {
+      if (props.loading) {
+        return h16(
+          "div",
+          { class: cn15("mcpe-mcp-resource-browser", props.class) },
+          [1, 2, 3, 4].map(
+            () => h16("div", { class: "flex items-center gap-3 px-3 py-2.5" }, [
+              h16("div", { class: "h-8 w-8 rounded-md animate-pulse bg-muted" }),
+              h16("div", { class: "h-4 flex-1 rounded animate-pulse bg-muted" })
+            ])
+          )
+        );
+      }
+      if (props.resources.length === 0) {
+        return h16("div", { class: cn15("mcpe-mcp-resource-browser", props.class) }, [
+          h16("p", { class: "mcpe-mcp-resource-browser-empty" }, "No resources available")
+        ]);
+      }
+      return h16(
+        "div",
+        { class: cn15("mcpe-mcp-resource-browser", props.class), role: "list" },
+        props.resources.map((r) => {
+          const selected = props.selectedUri === r.uri;
+          const children = [
+            h16(
+              "span",
+              { class: "mcpe-mcp-resource-browser-icon", "aria-hidden": "true" },
+              mimeTypeLabel(r.mimeType)
+            ),
+            h16("span", { class: "mcpe-mcp-resource-browser-name" }, r.name)
+          ];
+          if (r.mimeType) {
+            children.push(
+              h16("span", { class: "mcpe-mcp-resource-browser-type" }, r.mimeType.split("/")[0])
+            );
+          }
+          return h16(
+            "button",
+            {
+              type: "button",
+              role: "listitem",
+              class: cn15(
+                "mcpe-mcp-resource-browser-item w-full text-left",
+                selected ? "mcpe-mcp-resource-browser-item-selected" : ""
+              ),
+              "aria-selected": selected,
+              "aria-label": r.name,
+              onClick: () => emit("select", r)
+            },
+            children
+          );
+        })
+      );
+    };
+  }
+});
+
+// src/mcp/mcp-app-frame.ts
+import { defineComponent as defineComponent17, h as h17, ref as ref3, watch as watch5, onUnmounted as onUnmounted4 } from "vue";
+import { cn as cn16, createAppBridge } from "@mcp-elements/core";
+var McpeMcpAppFrame = defineComponent17({
+  name: "McpeMcpAppFrame",
+  props: {
+    src: { type: String, required: true },
+    height: { type: Number, default: 480 },
+    sandbox: { type: String, default: "allow-scripts allow-same-origin" },
+    class: { type: String, default: "" }
+  },
+  emits: ["message"],
+  setup(props, { emit }) {
+    const frameRef = ref3(null);
+    let bridge = null;
+    let unsub = null;
+    let messageHandler = null;
+    const cleanup = () => {
+      if (unsub) unsub();
+      if (messageHandler) window.removeEventListener("message", messageHandler);
+      unsub = null;
+      messageHandler = null;
+      bridge = null;
+    };
+    const setup = () => {
+      cleanup();
+      bridge = createAppBridge({
+        postMessage: (env) => frameRef.value?.contentWindow?.postMessage(env, "*")
+      });
+      unsub = bridge.onMessage((env) => emit("message", env));
+      messageHandler = (e) => bridge?.receive(e.data);
+      window.addEventListener("message", messageHandler);
+    };
+    watch5([frameRef, () => props.src], () => {
+      if (frameRef.value) setup();
+    });
+    onUnmounted4(cleanup);
+    return () => h17("div", { class: cn16("mcpe-mcp-app-frame", props.class) }, [
+      h17("iframe", {
+        ref: frameRef,
+        src: props.src,
+        sandbox: props.sandbox,
+        height: `${props.height}px`,
+        title: "MCP App",
+        "aria-label": "MCP App frame",
+        style: "display:block;width:100%;border:none"
+      })
+    ]);
+  }
+});
+
+// src/composables/use-mcp-tool-state.ts
+import { ref as ref4, onUnmounted as onUnmounted5 } from "vue";
+import { createToolState } from "@mcp-elements/core";
+function useMcpToolState() {
+  const api = createToolState();
+  const snapshot = ref4({
+    status: api.status,
+    tool: api.tool,
+    args: api.args,
+    result: api.result,
+    error: api.error,
+    startedAt: api.startedAt,
+    endedAt: api.endedAt
+  });
+  const unsub = api.subscribe((s) => {
+    snapshot.value = { ...s };
+  });
+  onUnmounted5(unsub);
+  return { api, snapshot };
+}
+
+// src/composables/use-mcp-oauth.ts
+import { ref as ref5, onUnmounted as onUnmounted6 } from "vue";
+import { createOAuthFlow } from "@mcp-elements/core";
+function useMcpOAuth() {
+  const api = createOAuthFlow();
+  const snapshot = ref5({
+    status: api.status,
+    verifier: api.verifier,
+    state: api.state,
+    tokens: api.tokens,
+    error: api.error
+  });
+  const unsub = api.subscribe((s) => {
+    snapshot.value = { ...s };
+  });
+  onUnmounted6(unsub);
+  return { api, snapshot };
+}
+
+// src/composables/use-mcp-app-bridge.ts
+import { ref as ref6, watch as watch6, onUnmounted as onUnmounted7 } from "vue";
+import { createAppBridge as createAppBridge2 } from "@mcp-elements/core";
+function useMcpAppBridge(options = {}) {
+  const frameRef = ref6(null);
+  let bridge = null;
+  let unsub = null;
+  let messageHandler = null;
+  const cleanup = () => {
+    if (unsub) unsub();
+    if (messageHandler) window.removeEventListener("message", messageHandler);
+    unsub = null;
+    messageHandler = null;
+    bridge = null;
+  };
+  const establish = () => {
+    cleanup();
+    bridge = createAppBridge2({
+      postMessage: (env) => frameRef.value?.contentWindow?.postMessage(env, "*")
+    });
+    if (options.onMessage) unsub = bridge.onMessage(options.onMessage);
+    messageHandler = (e) => bridge?.receive(e.data);
+    window.addEventListener("message", messageHandler);
+  };
+  watch6(frameRef, (el) => {
+    if (el) establish();
+  });
+  onUnmounted7(cleanup);
+  const send = (env) => bridge?.send(env);
+  return { frameRef, send };
+}
+
+// src/composables/use-mcp-schema-form.ts
+import { reactive as reactive2, computed as computed14, watch as watch7 } from "vue";
+import { schemaToFields as schemaToFields2 } from "@mcp-elements/core";
+function useMcpSchemaForm(schema) {
+  const getSchema = typeof schema === "function" ? schema : () => schema;
+  const fields = computed14(() => schemaToFields2(getSchema()));
+  const values = reactive2({});
+  const reset = () => {
+    for (const k of Object.keys(values)) delete values[k];
+    for (const f of fields.value) {
+      if (f.defaultValue !== void 0) values[f.key] = f.defaultValue;
+    }
+  };
+  watch7(fields, reset, { immediate: true });
+  const setValue = (key, value) => {
+    values[key] = value;
+  };
+  return { fields, values, setValue, reset };
+}
 export {
   McpeAlert,
   McpeBadge,
@@ -509,9 +1299,20 @@ export {
   McpeCardTitle,
   McpeDialog,
   McpeInput,
+  McpeMcpAppFrame,
+  McpeMcpConsentDialog,
+  McpeMcpResourceBrowser,
+  McpeMcpScopeInspector,
+  McpeMcpServerStatus,
+  McpeMcpToolCall,
+  McpeMcpToolForm,
   McpeSelect,
   McpeSwitch,
   McpeTabs,
-  McpeTextarea
+  McpeTextarea,
+  useMcpAppBridge,
+  useMcpOAuth,
+  useMcpSchemaForm,
+  useMcpToolState
 };
 //# sourceMappingURL=index.js.map