@webmcpui/vue 0.3.0

package/README.md

@@ -0,0 +1,83 @@
+# @webmcpui/vue
+
+Idiomatic, typed **Vue** components for [webmcpui](https://webmcpui.com) —
+WebMCP-native, accessible, shadcn/Tailwind-aligned.
+
+Each component wraps the corresponding [`@webmcpui/core`](https://www.npmjs.com/package/@webmcpui/core)
+custom element, so the WebMCP tool exposure, form association, and accessibility
+live **once** (in core) and you get typed props, `v-model`, `@event` listeners,
+and slots — with **no `isCustomElement` config** (the `wmcp-*` tag only appears
+inside the component's render function, never your templates).
+
+## Install
+
+```bash
+pnpm add @webmcpui/vue @webmcpui/core vue
+# optional theme (shadcn-aligned):
+pnpm add @webmcpui/tokens
+```
+
+## Usage
+
+```vue
+<script setup lang="ts">
+import { ref } from 'vue';
+import { Button, Input, Dialog, Tabs } from '@webmcpui/vue';
+import '@webmcpui/tokens/css'; // omit for an unstyled baseline (see below)
+
+const email = ref('');
+const open = ref(false);
+</script>
+
+<template>
+  <Button variant="primary" @click="open = true">Book</Button>
+
+  <!-- form control with v-model — expose it and an agent can fill it -->
+  <Input v-model="email" label="Email" type="email" expose />
+
+  <!-- the agent opens it; the human confirms -->
+  <Dialog v-model:open="open" label="Confirm" expose>
+    <Button variant="primary" @click="open = false">Confirm</Button>
+  </Dialog>
+</template>
+```
+
+`v-model` binds `Input`'s value, `v-model:open` a `Dialog`, `v-model:active` a
+`Tabs`. Every component takes `expose` (+ optional `tool-name` /
+`tool-description`) to register its [WebMCP](https://webmcpui.com/docs/webmcp)
+tool that an agent can call. With no agent present it's a no-op.
+
+## Components
+
+`Button` · `Input` · `Dialog` · `Tabs` — more land each release as the core kit
+grows. Props mirror the [element attributes](https://webmcpui.com/docs):
+`variant`, `size`, `type`, `disabled`, `expose`, `tool-name`, … plus the
+`v-model` bindings above.
+
+## Styling
+
+Themed through the [design tokens](https://www.npmjs.com/package/@webmcpui/tokens)
+(CSS custom properties, shadcn-aligned, light + dark). Two modes:
+
+- **Themed** — `import '@webmcpui/tokens/css'` once at your app root.
+- **Unstyled** — don't import the tokens CSS. The elements render with neutral
+  inline fallbacks; style them yourself via the CSS custom properties or the
+  `::part()` selectors each element exposes.
+
+## Server rendering (Nuxt, …)
+
+These are **client-rendered custom elements** — importing them evaluates
+`class extends HTMLElement`, which has no meaning on the server. Register/use
+them client-side only:
+
+```ts
+// a Nuxt plugin: plugins/webmcpui.client.ts (the .client suffix = browser only)
+import { Button } from '@webmcpui/vue';
+```
+
+or wrap usage in `<ClientOnly>`. The elements upgrade and hydrate on the client
+normally.
+
+## Docs
+
+Full docs, live demos, and `llms.txt` at **[webmcpui.com](https://webmcpui.com)**.

package/dist/index.d.ts

@@ -0,0 +1,396 @@
+import * as vue from 'vue';
+import { PropType, VNode } from 'vue';
+import { WmcpButtonVariant, WmcpButtonSize, WmcpButtonType, WmcpInputType, StandardSchemaV1, WmcpBadgeVariant, WmcpPopoverPlacement, WmcpPopoverTrigger, WmcpAlertVariant } from '@webmcpui/core';
+export { WmcpAlertVariant, WmcpBadgeVariant, WmcpButtonSize, WmcpButtonType, WmcpButtonVariant, WmcpInputType } from '@webmcpui/core';
+
+/**
+ * `<Button>` — an idiomatic, typed Vue wrapper over `<wmcp-button>`.
+ *
+ * Behavior (form-associated submit/reset, WebMCP action exposure, a11y) lives
+ * in `@webmcpui/core`; this adds Vue ergonomics: typed props and a component
+ * you can use in templates without configuring `isCustomElement` (the
+ * `<wmcp-button>` tag only appears inside this render function). Attributes and
+ * listeners (`@click`, `class`, `style`, …) fall through to the element.
+ *
+ * ```vue
+ * <script setup>
+ * import { Button } from '@webmcpui/vue';
+ * import '@webmcpui/tokens/css';
+ * </script>
+ *
+ * <template>
+ *   <Button variant="primary" @click="save">Save</Button>
+ *   <Button expose tool-name="book_appointment">Book</Button>
+ * </template>
+ * ```
+ */
+declare const Button: vue.DefineComponent<vue.ExtractPropTypes<{
+    variant: PropType<WmcpButtonVariant>;
+    size: PropType<WmcpButtonSize>;
+    type: PropType<WmcpButtonType>;
+    disabled: {
+        type: BooleanConstructor;
+        default: undefined;
+    };
+    expose: {
+        type: BooleanConstructor;
+        default: undefined;
+    };
+    name: StringConstructor;
+    label: StringConstructor;
+    toolName: StringConstructor;
+    toolDescription: StringConstructor;
+}>, () => vue.VNode<vue.RendererNode, vue.RendererElement, {
+    [key: string]: any;
+}>, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<vue.ExtractPropTypes<{
+    variant: PropType<WmcpButtonVariant>;
+    size: PropType<WmcpButtonSize>;
+    type: PropType<WmcpButtonType>;
+    disabled: {
+        type: BooleanConstructor;
+        default: undefined;
+    };
+    expose: {
+        type: BooleanConstructor;
+        default: undefined;
+    };
+    name: StringConstructor;
+    label: StringConstructor;
+    toolName: StringConstructor;
+    toolDescription: StringConstructor;
+}>> & Readonly<{}>, {
+    disabled: boolean;
+    expose: boolean;
+}, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
+
+/**
+ * `<Input>` — a typed Vue wrapper over `<wmcp-input>` with `v-model` support.
+ * Form association, Standard Schema validation, and WebMCP `fill_*` exposure
+ * live in core; this maps `v-model` to the element's `value` and re-emits
+ * `input` / `change`.
+ *
+ * ```vue
+ * <Input v-model="email" type="email" label="Email" :schema="emailSchema" expose />
+ * ```
+ */
+declare const Input: vue.DefineComponent<vue.ExtractPropTypes<{
+    modelValue: StringConstructor;
+    type: PropType<WmcpInputType>;
+    label: StringConstructor;
+    name: StringConstructor;
+    placeholder: StringConstructor;
+    required: {
+        type: BooleanConstructor;
+        default: undefined;
+    };
+    disabled: {
+        type: BooleanConstructor;
+        default: undefined;
+    };
+    helperText: StringConstructor;
+    requiredMessage: StringConstructor;
+    expose: {
+        type: BooleanConstructor;
+        default: undefined;
+    };
+    toolName: StringConstructor;
+    toolDescription: StringConstructor;
+    schema: {
+        type: PropType<StandardSchemaV1<unknown, unknown>>;
+        default: undefined;
+    };
+}>, () => vue.VNode<vue.RendererNode, vue.RendererElement, {
+    [key: string]: any;
+}>, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, ("input" | "change" | "update:modelValue")[], "input" | "change" | "update:modelValue", vue.PublicProps, Readonly<vue.ExtractPropTypes<{
+    modelValue: StringConstructor;
+    type: PropType<WmcpInputType>;
+    label: StringConstructor;
+    name: StringConstructor;
+    placeholder: StringConstructor;
+    required: {
+        type: BooleanConstructor;
+        default: undefined;
+    };
+    disabled: {
+        type: BooleanConstructor;
+        default: undefined;
+    };
+    helperText: StringConstructor;
+    requiredMessage: StringConstructor;
+    expose: {
+        type: BooleanConstructor;
+        default: undefined;
+    };
+    toolName: StringConstructor;
+    toolDescription: StringConstructor;
+    schema: {
+        type: PropType<StandardSchemaV1<unknown, unknown>>;
+        default: undefined;
+    };
+}>> & Readonly<{
+    onInput?: ((...args: any[]) => any) | undefined;
+    onChange?: ((...args: any[]) => any) | undefined;
+    "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
+}>, {
+    disabled: boolean;
+    expose: boolean;
+    required: boolean;
+    schema: StandardSchemaV1<unknown, unknown>;
+}, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
+
+/**
+ * `<Dialog>` — a typed Vue wrapper over `<wmcp-dialog>` with `v-model:open`.
+ * The modal behavior (native `<dialog>`, focus trap, WebMCP `open_*` exposure)
+ * lives in core; this two-way-binds `open` and re-emits `open` / `close`.
+ *
+ * ```vue
+ * <Dialog v-model:open="open" label="Confirm" expose>…</Dialog>
+ * ```
+ */
+declare const Dialog: vue.DefineComponent<vue.ExtractPropTypes<{
+    open: {
+        type: BooleanConstructor;
+        default: undefined;
+    };
+    modal: {
+        type: BooleanConstructor;
+        default: undefined;
+    };
+    staticBackdrop: {
+        type: BooleanConstructor;
+        default: undefined;
+    };
+    label: StringConstructor;
+    name: StringConstructor;
+    expose: {
+        type: BooleanConstructor;
+        default: undefined;
+    };
+    toolName: StringConstructor;
+    toolDescription: StringConstructor;
+}>, () => vue.VNode<vue.RendererNode, vue.RendererElement, {
+    [key: string]: any;
+}>, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, ("close" | "update:open" | "open")[], "close" | "update:open" | "open", vue.PublicProps, Readonly<vue.ExtractPropTypes<{
+    open: {
+        type: BooleanConstructor;
+        default: undefined;
+    };
+    modal: {
+        type: BooleanConstructor;
+        default: undefined;
+    };
+    staticBackdrop: {
+        type: BooleanConstructor;
+        default: undefined;
+    };
+    label: StringConstructor;
+    name: StringConstructor;
+    expose: {
+        type: BooleanConstructor;
+        default: undefined;
+    };
+    toolName: StringConstructor;
+    toolDescription: StringConstructor;
+}>> & Readonly<{
+    onClose?: ((...args: any[]) => any) | undefined;
+    "onUpdate:open"?: ((...args: any[]) => any) | undefined;
+    onOpen?: ((...args: any[]) => any) | undefined;
+}>, {
+    expose: boolean;
+    open: boolean;
+    modal: boolean;
+    staticBackdrop: boolean;
+}, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
+
+/**
+ * `<Tabs>` — a typed Vue wrapper over `<wmcp-tabs>` with `v-model:active`.
+ * Holds the persistent active tab and exposes the WebMCP `switch_*` tool (in
+ * core). Pass the panels as slotted `<section tab="…" tab-label="…">` children.
+ *
+ * ```vue
+ * <Tabs v-model:active="active" label="Account" expose>
+ *   <section tab="overview" tab-label="Overview">…</section>
+ * </Tabs>
+ * ```
+ */
+declare const Tabs: vue.DefineComponent<vue.ExtractPropTypes<{
+    active: StringConstructor;
+    label: StringConstructor;
+    name: StringConstructor;
+    expose: {
+        type: BooleanConstructor;
+        default: undefined;
+    };
+    toolName: StringConstructor;
+    toolDescription: StringConstructor;
+}>, () => vue.VNode<vue.RendererNode, vue.RendererElement, {
+    [key: string]: any;
+}>, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, ("change" | "update:active")[], "change" | "update:active", vue.PublicProps, Readonly<vue.ExtractPropTypes<{
+    active: StringConstructor;
+    label: StringConstructor;
+    name: StringConstructor;
+    expose: {
+        type: BooleanConstructor;
+        default: undefined;
+    };
+    toolName: StringConstructor;
+    toolDescription: StringConstructor;
+}>> & Readonly<{
+    onChange?: ((...args: any[]) => any) | undefined;
+    "onUpdate:active"?: ((...args: any[]) => any) | undefined;
+}>, {
+    expose: boolean;
+}, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
+
+/** `<Switch>` — a typed Vue wrapper over `<wmcp-switch>` with `v-model` (boolean).
+ *  Form association + WebMCP `fill_*` exposure live in core. */
+declare const Switch: vue.DefineComponent<vue.ExtractPropTypes<{
+    modelValue: {
+        type: BooleanConstructor;
+        default: undefined;
+    };
+    label: StringConstructor;
+    name: StringConstructor;
+    required: {
+        type: BooleanConstructor;
+        default: undefined;
+    };
+    disabled: {
+        type: BooleanConstructor;
+        default: undefined;
+    };
+    expose: {
+        type: BooleanConstructor;
+        default: undefined;
+    };
+    toolName: StringConstructor;
+    toolDescription: StringConstructor;
+}>, () => vue.VNode<vue.RendererNode, vue.RendererElement, {
+    [key: string]: any;
+}>, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, ("change" | "update:modelValue")[], "change" | "update:modelValue", vue.PublicProps, Readonly<vue.ExtractPropTypes<{
+    modelValue: {
+        type: BooleanConstructor;
+        default: undefined;
+    };
+    label: StringConstructor;
+    name: StringConstructor;
+    required: {
+        type: BooleanConstructor;
+        default: undefined;
+    };
+    disabled: {
+        type: BooleanConstructor;
+        default: undefined;
+    };
+    expose: {
+        type: BooleanConstructor;
+        default: undefined;
+    };
+    toolName: StringConstructor;
+    toolDescription: StringConstructor;
+}>> & Readonly<{
+    onChange?: ((...args: any[]) => any) | undefined;
+    "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
+}>, {
+    disabled: boolean;
+    expose: boolean;
+    modelValue: boolean;
+    required: boolean;
+}, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
+
+/** `<Badge>` — a presentational status pill (`variant` + slot). No WebMCP tool. */
+declare const Badge: vue.DefineComponent<vue.ExtractPropTypes<{
+    variant: PropType<WmcpBadgeVariant>;
+}>, () => vue.VNode<vue.RendererNode, vue.RendererElement, {
+    [key: string]: any;
+}>, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<vue.ExtractPropTypes<{
+    variant: PropType<WmcpBadgeVariant>;
+}>> & Readonly<{}>, {}, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
+
+/** `<Separator>` — a presentational divider (`orientation`). No WebMCP tool. */
+declare const Separator: vue.DefineComponent<vue.ExtractPropTypes<{
+    orientation: PropType<"horizontal" | "vertical">;
+}>, () => vue.VNode<vue.RendererNode, vue.RendererElement, {
+    [key: string]: any;
+}>, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<vue.ExtractPropTypes<{
+    orientation: PropType<"horizontal" | "vertical">;
+}>> & Readonly<{}>, {}, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
+
+/**
+ * `<Tooltip>` — a typed Vue wrapper over `<wmcp-tooltip>`. Put the trigger in
+ * the `#trigger` slot (or use `label`) and the tip text in the default slot.
+ */
+declare const Tooltip: vue.DefineComponent<vue.ExtractPropTypes<{
+    label: StringConstructor;
+    placement: PropType<WmcpPopoverPlacement>;
+    trigger: PropType<WmcpPopoverTrigger>;
+    name: StringConstructor;
+    expose: {
+        type: BooleanConstructor;
+        default: undefined;
+    };
+    toolName: StringConstructor;
+    toolDescription: StringConstructor;
+}>, () => VNode<vue.RendererNode, vue.RendererElement, {
+    [key: string]: any;
+}>, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<vue.ExtractPropTypes<{
+    label: StringConstructor;
+    placement: PropType<WmcpPopoverPlacement>;
+    trigger: PropType<WmcpPopoverTrigger>;
+    name: StringConstructor;
+    expose: {
+        type: BooleanConstructor;
+        default: undefined;
+    };
+    toolName: StringConstructor;
+    toolDescription: StringConstructor;
+}>> & Readonly<{}>, {
+    expose: boolean;
+}, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
+
+/** `<Alert>` — a presentational inline callout (`variant`, `title`, slot). */
+declare const Alert: vue.DefineComponent<vue.ExtractPropTypes<{
+    variant: PropType<WmcpAlertVariant>;
+    title: StringConstructor;
+}>, () => vue.VNode<vue.RendererNode, vue.RendererElement, {
+    [key: string]: any;
+}>, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<vue.ExtractPropTypes<{
+    variant: PropType<WmcpAlertVariant>;
+    title: StringConstructor;
+}>> & Readonly<{}>, {}, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
+
+/** `<Progress>` — a presentational progress bar (`value`, `max`, `indeterminate`). */
+declare const Progress: vue.DefineComponent<vue.ExtractPropTypes<{
+    value: NumberConstructor;
+    max: NumberConstructor;
+    indeterminate: {
+        type: BooleanConstructor;
+        default: undefined;
+    };
+}>, () => vue.VNode<vue.RendererNode, vue.RendererElement, {
+    [key: string]: any;
+}>, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<vue.ExtractPropTypes<{
+    value: NumberConstructor;
+    max: NumberConstructor;
+    indeterminate: {
+        type: BooleanConstructor;
+        default: undefined;
+    };
+}>> & Readonly<{}>, {
+    indeterminate: boolean;
+}, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
+
+/** `<Avatar>` — a presentational avatar (`src`, `alt`, `fallback`). */
+declare const Avatar: vue.DefineComponent<vue.ExtractPropTypes<{
+    src: StringConstructor;
+    alt: StringConstructor;
+    fallback: StringConstructor;
+}>, () => vue.VNode<vue.RendererNode, vue.RendererElement, {
+    [key: string]: any;
+}>, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<vue.ExtractPropTypes<{
+    src: StringConstructor;
+    alt: StringConstructor;
+    fallback: StringConstructor;
+}>> & Readonly<{}>, {}, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
+
+export { Alert, Avatar, Badge, Button, Dialog, Input, Progress, Separator, Switch, Tabs, Tooltip };

package/dist/index.js

@@ -0,0 +1,318 @@
+// src/button.ts
+import { defineComponent, h } from "vue";
+import {
+  WmcpButton
+} from "@webmcpui/core";
+
+// src/define.ts
+function defineOnce(tagName, elementClass) {
+  if (typeof customElements === "undefined") return;
+  if (!customElements.get(tagName)) {
+    customElements.define(tagName, elementClass);
+  }
+}
+
+// src/button.ts
+defineOnce(WmcpButton.tagName, WmcpButton);
+var Button = defineComponent({
+  name: "WmcpButton",
+  props: {
+    variant: String,
+    size: String,
+    type: String,
+    disabled: { type: Boolean, default: void 0 },
+    expose: { type: Boolean, default: void 0 },
+    name: String,
+    label: String,
+    toolName: String,
+    toolDescription: String
+  },
+  setup(props, { slots }) {
+    return () => {
+      const bindings = {};
+      for (const [key, value] of Object.entries(props)) {
+        if (value !== void 0) bindings[key] = value;
+      }
+      return h(WmcpButton.tagName, bindings, slots.default?.());
+    };
+  }
+});
+
+// src/input.ts
+import { defineComponent as defineComponent2, h as h2 } from "vue";
+import {
+  WmcpInput
+} from "@webmcpui/core";
+defineOnce(WmcpInput.tagName, WmcpInput);
+var Input = defineComponent2({
+  name: "WmcpInput",
+  props: {
+    modelValue: String,
+    type: String,
+    label: String,
+    name: String,
+    placeholder: String,
+    required: { type: Boolean, default: void 0 },
+    disabled: { type: Boolean, default: void 0 },
+    helperText: String,
+    requiredMessage: String,
+    expose: { type: Boolean, default: void 0 },
+    toolName: String,
+    toolDescription: String,
+    schema: {
+      type: Object,
+      default: void 0
+    }
+  },
+  emits: ["update:modelValue", "input", "change"],
+  setup(props, { emit }) {
+    return () => {
+      const bindings = {
+        onInput: (e) => {
+          emit("update:modelValue", e.target.value);
+          emit("input", e);
+        },
+        onChange: (e) => emit("change", e)
+      };
+      for (const [key, value] of Object.entries(props)) {
+        if (value === void 0) continue;
+        if (key === "modelValue") bindings.value = value;
+        else bindings[key] = value;
+      }
+      return h2(WmcpInput.tagName, bindings);
+    };
+  }
+});
+
+// src/dialog.ts
+import { defineComponent as defineComponent3, h as h3 } from "vue";
+import { WmcpDialog } from "@webmcpui/core";
+defineOnce(WmcpDialog.tagName, WmcpDialog);
+var Dialog = defineComponent3({
+  name: "WmcpDialog",
+  props: {
+    open: { type: Boolean, default: void 0 },
+    modal: { type: Boolean, default: void 0 },
+    staticBackdrop: { type: Boolean, default: void 0 },
+    label: String,
+    name: String,
+    expose: { type: Boolean, default: void 0 },
+    toolName: String,
+    toolDescription: String
+  },
+  emits: ["update:open", "open", "close"],
+  setup(props, { slots, emit }) {
+    return () => {
+      const bindings = {
+        onOpen: () => {
+          emit("open");
+          emit("update:open", true);
+        },
+        onClose: () => {
+          emit("close");
+          emit("update:open", false);
+        }
+      };
+      for (const [key, value] of Object.entries(props)) {
+        if (value !== void 0) bindings[key] = value;
+      }
+      return h3(WmcpDialog.tagName, bindings, slots.default?.());
+    };
+  }
+});
+
+// src/tabs.ts
+import { defineComponent as defineComponent4, h as h4 } from "vue";
+import { WmcpTabs } from "@webmcpui/core";
+defineOnce(WmcpTabs.tagName, WmcpTabs);
+var Tabs = defineComponent4({
+  name: "WmcpTabs",
+  props: {
+    active: String,
+    label: String,
+    name: String,
+    expose: { type: Boolean, default: void 0 },
+    toolName: String,
+    toolDescription: String
+  },
+  emits: ["update:active", "change"],
+  setup(props, { slots, emit }) {
+    return () => {
+      const bindings = {
+        onChange: (e) => {
+          emit("change", e);
+          emit("update:active", e.detail?.value);
+        }
+      };
+      for (const [key, value] of Object.entries(props)) {
+        if (value !== void 0) bindings[key] = value;
+      }
+      return h4(WmcpTabs.tagName, bindings, slots.default?.());
+    };
+  }
+});
+
+// src/switch.ts
+import { defineComponent as defineComponent5, h as h5 } from "vue";
+import { WmcpSwitch } from "@webmcpui/core";
+defineOnce(WmcpSwitch.tagName, WmcpSwitch);
+var Switch = defineComponent5({
+  name: "WmcpSwitch",
+  props: {
+    modelValue: { type: Boolean, default: void 0 },
+    label: String,
+    name: String,
+    required: { type: Boolean, default: void 0 },
+    disabled: { type: Boolean, default: void 0 },
+    expose: { type: Boolean, default: void 0 },
+    toolName: String,
+    toolDescription: String
+  },
+  emits: ["update:modelValue", "change"],
+  setup(props, { emit }) {
+    return () => {
+      const bindings = {
+        onChange: (e) => {
+          emit("update:modelValue", e.target.checked);
+          emit("change", e);
+        }
+      };
+      for (const [key, value] of Object.entries(props)) {
+        if (value === void 0) continue;
+        if (key === "modelValue") bindings.checked = value;
+        else bindings[key] = value;
+      }
+      return h5(WmcpSwitch.tagName, bindings);
+    };
+  }
+});
+
+// src/badge.ts
+import { defineComponent as defineComponent6, h as h6 } from "vue";
+import { WmcpBadge } from "@webmcpui/core";
+defineOnce(WmcpBadge.tagName, WmcpBadge);
+var Badge = defineComponent6({
+  name: "WmcpBadge",
+  props: { variant: String },
+  setup(props, { slots }) {
+    return () => {
+      const bindings = {};
+      for (const [key, value] of Object.entries(props)) {
+        if (value !== void 0) bindings[key] = value;
+      }
+      return h6(WmcpBadge.tagName, bindings, slots.default?.());
+    };
+  }
+});
+
+// src/separator.ts
+import { defineComponent as defineComponent7, h as h7 } from "vue";
+import { WmcpSeparator } from "@webmcpui/core";
+defineOnce(WmcpSeparator.tagName, WmcpSeparator);
+var Separator = defineComponent7({
+  name: "WmcpSeparator",
+  props: { orientation: String },
+  setup(props) {
+    return () => {
+      const bindings = {};
+      for (const [key, value] of Object.entries(props)) {
+        if (value !== void 0) bindings[key] = value;
+      }
+      return h7(WmcpSeparator.tagName, bindings);
+    };
+  }
+});
+
+// src/tooltip.ts
+import { defineComponent as defineComponent8, h as h8 } from "vue";
+import {
+  WmcpTooltip
+} from "@webmcpui/core";
+defineOnce(WmcpTooltip.tagName, WmcpTooltip);
+var Tooltip = defineComponent8({
+  name: "WmcpTooltip",
+  props: {
+    label: String,
+    placement: String,
+    trigger: String,
+    name: String,
+    expose: { type: Boolean, default: void 0 },
+    toolName: String,
+    toolDescription: String
+  },
+  setup(props, { slots }) {
+    return () => {
+      const bindings = {};
+      for (const [k, v] of Object.entries(props)) if (v !== void 0) bindings[k] = v;
+      const children = [];
+      if (slots.trigger) children.push(h8("span", { slot: "trigger" }, slots.trigger()));
+      if (slots.default) children.push(...slots.default());
+      return h8(WmcpTooltip.tagName, bindings, children);
+    };
+  }
+});
+
+// src/alert.ts
+import { defineComponent as defineComponent9, h as h9 } from "vue";
+import { WmcpAlert } from "@webmcpui/core";
+defineOnce(WmcpAlert.tagName, WmcpAlert);
+var Alert = defineComponent9({
+  name: "WmcpAlert",
+  props: { variant: String, title: String },
+  setup(props, { slots }) {
+    return () => {
+      const bindings = {};
+      for (const [k, v] of Object.entries(props)) if (v !== void 0) bindings[k] = v;
+      return h9(WmcpAlert.tagName, bindings, slots.default?.());
+    };
+  }
+});
+
+// src/progress.ts
+import { defineComponent as defineComponent10, h as h10 } from "vue";
+import { WmcpProgress } from "@webmcpui/core";
+defineOnce(WmcpProgress.tagName, WmcpProgress);
+var Progress = defineComponent10({
+  name: "WmcpProgress",
+  props: {
+    value: Number,
+    max: Number,
+    indeterminate: { type: Boolean, default: void 0 }
+  },
+  setup(props) {
+    return () => {
+      const bindings = {};
+      for (const [k, v] of Object.entries(props)) if (v !== void 0) bindings[k] = v;
+      return h10(WmcpProgress.tagName, bindings);
+    };
+  }
+});
+
+// src/avatar.ts
+import { defineComponent as defineComponent11, h as h11 } from "vue";
+import { WmcpAvatar } from "@webmcpui/core";
+defineOnce(WmcpAvatar.tagName, WmcpAvatar);
+var Avatar = defineComponent11({
+  name: "WmcpAvatar",
+  props: { src: String, alt: String, fallback: String },
+  setup(props) {
+    return () => {
+      const bindings = {};
+      for (const [k, v] of Object.entries(props)) if (v !== void 0) bindings[k] = v;
+      return h11(WmcpAvatar.tagName, bindings);
+    };
+  }
+});
+export {
+  Alert,
+  Avatar,
+  Badge,
+  Button,
+  Dialog,
+  Input,
+  Progress,
+  Separator,
+  Switch,
+  Tabs,
+  Tooltip
+};

package/package.json

@@ -0,0 +1,52 @@
+{
+  "name": "@webmcpui/vue",
+  "version": "0.3.0",
+  "description": "Idiomatic, typed Vue components for webmcpui — WebMCP-native, accessible, shadcn/Tailwind-aligned. Wraps @webmcpui/core.",
+  "license": "MIT",
+  "author": "Gary Pfaff (Pfaff Digital)",
+  "homepage": "https://webmcpui.com",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/webmcpui/webmcpui.git",
+    "directory": "packages/vue"
+  },
+  "bugs": {
+    "url": "https://github.com/webmcpui/webmcpui/issues"
+  },
+  "keywords": [
+    "webmcp",
+    "vue",
+    "ai-agents",
+    "components",
+    "shadcn",
+    "web-components"
+  ],
+  "type": "module",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build": "tsup",
+    "typecheck": "tsc --noEmit",
+    "clean": "rm -rf dist"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "peerDependencies": {
+    "@webmcpui/core": ">=0.3.0",
+    "vue": ">=3.4"
+  },
+  "devDependencies": {
+    "@webmcpui/core": "workspace:*",
+    "tsup": "^8.3.5",
+    "typescript": "^5.7.2",
+    "vue": "^3.5.13"
+  }
+}