@webmcpui/core 0.1.2 → 0.2.1

package/dist/index.js

@@ -4,12 +4,11 @@ import {
 
 // src/elements/form-control.ts
 import {
-  LitElement,
   html,
   css,
   nothing
 } from "lit";
-import { property, state } from "lit/decorators.js";
+import { property as property2, state } from "lit/decorators.js";
 
 // src/standard-schema.ts
 async function validateStandard(schema, value) {
@@ -23,6 +22,10 @@ function isStandardSchema(value) {
   return typeof value === "object" && value !== null && "~standard" in value && typeof value["~standard"]?.validate === "function";
 }
 
+// src/elements/exposable.ts
+import { LitElement } from "lit";
+import { property } from "lit/decorators.js";
+
 // src/webmcp.ts
 function getModelContext() {
   const fromDocument = typeof document !== "undefined" ? document.modelContext : void 0;
@@ -73,6 +76,67 @@ function exposeTool(definition) {
   };
 }
 
+// src/elements/exposable.ts
+var WmcpExposable = class extends LitElement {
+  constructor() {
+    super(...arguments);
+    this.expose = false;
+    this.toolName = "";
+    this.toolDescription = "";
+    this.toolDisposer = () => {
+    };
+  }
+  /** JSON Schema for the tool's args. Defaults to a no-argument tool. */
+  toolInputSchema() {
+    return { type: "object", properties: {} };
+  }
+  /**
+   * Property changes that alter the tool's *identity* (name/description) and so
+   * require re-registration. State read live inside {@link executeTool} does
+   * not belong here. Subclasses extend this with their own naming inputs.
+   */
+  get toolReactiveProps() {
+    return ["expose", "toolName", "toolDescription"];
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    if (this.expose) this.registerTool();
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this.toolDisposer();
+    this.toolDisposer = () => {
+    };
+  }
+  updated(changed) {
+    if (this.expose && this.toolReactiveProps.some((p) => changed.has(p))) {
+      this.registerTool();
+    } else if (!this.expose && changed.has("expose")) {
+      this.toolDisposer();
+      this.toolDisposer = () => {
+      };
+    }
+  }
+  registerTool() {
+    this.toolDisposer();
+    this.toolDisposer = exposeTool({
+      name: this.resolvedToolName,
+      description: this.toolDescription || this.defaultToolDescription,
+      inputSchema: this.toolInputSchema(),
+      execute: (args) => this.executeTool(args)
+    });
+  }
+};
+__decorateClass([
+  property({ type: Boolean })
+], WmcpExposable.prototype, "expose", 2);
+__decorateClass([
+  property({ attribute: "tool-name" })
+], WmcpExposable.prototype, "toolName", 2);
+__decorateClass([
+  property({ attribute: "tool-description" })
+], WmcpExposable.prototype, "toolDescription", 2);
+
 // src/elements/form-control.ts
 var textFieldStyles = css`
   .control {
@@ -116,7 +180,7 @@ var textFieldStyles = css`
     );
   }
 `;
-var WmcpFormControl = class extends LitElement {
+var WmcpFormControl = class extends WmcpExposable {
   constructor() {
     super(...arguments);
     this.label = "";
@@ -127,13 +191,8 @@ var WmcpFormControl = class extends LitElement {
     this.disabled = false;
     this.helperText = "";
     this.requiredMessage = "";
-    this.expose = false;
-    this.toolName = "";
-    this.toolDescription = "";
     this.error = "";
     this.internals = this.attachInternals();
-    this.toolDisposer = () => {
-    };
     /** Reveal the validation message when the form reports validity (submit). */
     this.onInvalid = () => {
       this.error = this.internals.validationMessage;
@@ -198,7 +257,6 @@ var WmcpFormControl = class extends LitElement {
     this.syncFormValue();
     this.addEventListener("invalid", this.onInvalid);
     void this.validate(false);
-    if (this.expose) this.registerTool();
   }
   /**
    * The value contributed to the containing form. Defaults to the string
@@ -233,40 +291,32 @@ var WmcpFormControl = class extends LitElement {
   disconnectedCallback() {
     super.disconnectedCallback();
     this.removeEventListener("invalid", this.onInvalid);
-    this.toolDisposer();
-    this.toolDisposer = () => {
-    };
   }
   updated(changed) {
+    super.updated(changed);
     this.syncFormValue();
-    if (this.expose && (changed.has("expose") || changed.has("name") || changed.has("toolName") || changed.has("toolDescription"))) {
-      this.registerTool();
-    }
   }
-  /** The resolved WebMCP tool name. */
   get resolvedToolName() {
     return this.toolName || `fill_${this.name || this.controlNoun}`;
   }
-  registerTool() {
-    this.toolDisposer();
+  get defaultToolDescription() {
+    return `Set the value of the "${this.label || this.name || this.controlNoun}" field.`;
+  }
+  get toolReactiveProps() {
+    return [...super.toolReactiveProps, "name"];
+  }
+  async executeTool(args) {
     const noun = this.label || this.name || this.controlNoun;
-    this.toolDisposer = exposeTool({
-      name: this.resolvedToolName,
-      description: this.toolDescription || `Set the value of the "${noun}" field.`,
-      inputSchema: this.toolInputSchema(),
-      execute: async (args) => {
-        await this.applyAgentValue(args);
-        return {
-          content: [
-            {
-              type: "text",
-              text: this.error ? `Set "${noun}" but validation failed: ${this.error}` : `Set "${noun}" to "${this.stateDescription()}".`
-            }
-          ],
-          isError: Boolean(this.error)
-        };
-      }
-    });
+    await this.applyAgentValue(args);
+    return {
+      content: [
+        {
+          type: "text",
+          text: this.error ? `Set "${noun}" but validation failed: ${this.error}` : `Set "${noun}" to "${this.stateDescription()}".`
+        }
+      ],
+      isError: Boolean(this.error)
+    };
   }
   /**
    * Apply the agent's tool arguments to component state. Defaults to treating
@@ -370,40 +420,31 @@ var WmcpFormControl = class extends LitElement {
   }
 };
 __decorateClass([
-  property()
+  property2()
 ], WmcpFormControl.prototype, "label", 2);
 __decorateClass([
-  property()
+  property2()
 ], WmcpFormControl.prototype, "name", 2);
 __decorateClass([
-  property()
+  property2()
 ], WmcpFormControl.prototype, "value", 2);
 __decorateClass([
-  property()
+  property2()
 ], WmcpFormControl.prototype, "placeholder", 2);
 __decorateClass([
-  property({ type: Boolean, reflect: true })
+  property2({ type: Boolean, reflect: true })
 ], WmcpFormControl.prototype, "required", 2);
 __decorateClass([
-  property({ type: Boolean, reflect: true })
+  property2({ type: Boolean, reflect: true })
 ], WmcpFormControl.prototype, "disabled", 2);
 __decorateClass([
-  property({ attribute: "helper-text" })
+  property2({ attribute: "helper-text" })
 ], WmcpFormControl.prototype, "helperText", 2);
 __decorateClass([
-  property({ attribute: "required-message" })
+  property2({ attribute: "required-message" })
 ], WmcpFormControl.prototype, "requiredMessage", 2);
 __decorateClass([
-  property({ type: Boolean })
-], WmcpFormControl.prototype, "expose", 2);
-__decorateClass([
-  property({ attribute: "tool-name" })
-], WmcpFormControl.prototype, "toolName", 2);
-__decorateClass([
-  property({ attribute: "tool-description" })
-], WmcpFormControl.prototype, "toolDescription", 2);
-__decorateClass([
-  property({ attribute: false })
+  property2({ attribute: false })
 ], WmcpFormControl.prototype, "schema", 2);
 __decorateClass([
   state()
@@ -415,7 +456,7 @@ import {
   css as css2,
   nothing as nothing2
 } from "lit";
-import { property as property2 } from "lit/decorators.js";
+import { property as property3 } from "lit/decorators.js";
 var WmcpInput = class extends WmcpFormControl {
   constructor() {
     super(...arguments);
@@ -470,7 +511,7 @@ var WmcpInput = class extends WmcpFormControl {
   }
 };
 __decorateClass([
-  property2()
+  property3()
 ], WmcpInput.prototype, "type", 2);
 
 // src/elements/textarea.ts
@@ -479,7 +520,7 @@ import {
   css as css3,
   nothing as nothing3
 } from "lit";
-import { property as property3 } from "lit/decorators.js";
+import { property as property4 } from "lit/decorators.js";
 var WmcpTextarea = class extends WmcpFormControl {
   constructor() {
     super(...arguments);
@@ -522,7 +563,7 @@ var WmcpTextarea = class extends WmcpFormControl {
   }
 };
 __decorateClass([
-  property3({ type: Number })
+  property4({ type: Number })
 ], WmcpTextarea.prototype, "rows", 2);
 
 // src/elements/select.ts
@@ -531,7 +572,7 @@ import {
   css as css4,
   nothing as nothing4
 } from "lit";
-import { property as property4, state as state2 } from "lit/decorators.js";
+import { property as property5, state as state2 } from "lit/decorators.js";
 import { repeat } from "lit/directives/repeat.js";
 function isGroup(item) {
   return Array.isArray(item.options);
@@ -662,7 +703,7 @@ var WmcpSelect = class extends WmcpFormControl {
   }
 };
 __decorateClass([
-  property4({ attribute: false })
+  property5({ attribute: false })
 ], WmcpSelect.prototype, "options", 2);
 __decorateClass([
   state2()
@@ -674,7 +715,7 @@ import {
   css as css5,
   nothing as nothing5
 } from "lit";
-import { property as property5 } from "lit/decorators.js";
+import { property as property6 } from "lit/decorators.js";
 var WmcpCheckbox = class extends WmcpFormControl {
   constructor() {
     super();
@@ -801,7 +842,7 @@ var WmcpCheckbox = class extends WmcpFormControl {
   }
 };
 __decorateClass([
-  property5({ type: Boolean, reflect: true })
+  property6({ type: Boolean, reflect: true })
 ], WmcpCheckbox.prototype, "checked", 2);
 
 // src/elements/radio.ts
@@ -810,7 +851,7 @@ import {
   css as css6,
   nothing as nothing6
 } from "lit";
-import { property as property6, state as state3 } from "lit/decorators.js";
+import { property as property7, state as state3 } from "lit/decorators.js";
 import { repeat as repeat2 } from "lit/directives/repeat.js";
 var groupCounter = 0;
 var WmcpRadio = class extends HTMLElement {
@@ -982,20 +1023,1553 @@ var WmcpRadioGroup = class extends WmcpFormControl {
   }
 };
 __decorateClass([
-  property6({ attribute: false })
+  property7({ attribute: false })
 ], WmcpRadioGroup.prototype, "options", 2);
 __decorateClass([
   state3()
 ], WmcpRadioGroup.prototype, "resolvedOptions", 2);
 
-// src/register.ts
-var elements = [
-  WmcpInput,
-  WmcpTextarea,
-  WmcpSelect,
-  WmcpCheckbox,
-  WmcpRadio,
-  WmcpRadioGroup
+// src/elements/action.ts
+import { property as property8 } from "lit/decorators.js";
+var WmcpAction = class extends WmcpExposable {
+  constructor() {
+    super(...arguments);
+    this.name = "";
+    this.label = "";
+  }
+  /** Suffix for the default tool name when `name` is empty. */
+  get defaultNameSuffix() {
+    return "element";
+  }
+  /** Human-readable noun for the thing being acted on. */
+  get actionNoun() {
+    return this.label || this.name || this.defaultNameSuffix;
+  }
+  get resolvedToolName() {
+    return this.toolName || `${this.actionVerb}_${this.name || this.defaultNameSuffix}`;
+  }
+  get defaultToolDescription() {
+    return `Activate the "${this.actionNoun}".`;
+  }
+  get toolReactiveProps() {
+    return [...super.toolReactiveProps, "name", "label"];
+  }
+};
+__decorateClass([
+  property8()
+], WmcpAction.prototype, "name", 2);
+__decorateClass([
+  property8()
+], WmcpAction.prototype, "label", 2);
+
+// src/elements/button.ts
+import {
+  LitElement as LitElement2,
+  html as html7,
+  css as css7,
+  nothing as nothing7
+} from "lit";
+import { property as property9 } from "lit/decorators.js";
+var WmcpButton = class extends WmcpAction {
+  constructor() {
+    super(...arguments);
+    this.variant = "primary";
+    this.size = "md";
+    this.type = "button";
+    this.disabled = false;
+    this.internals = this.attachInternals();
+  }
+  static {
+    this.tagName = "wmcp-button";
+  }
+  static {
+    this.formAssociated = true;
+  }
+  static {
+    // Delegate focus to the inner native button so the host is keyboard- and
+    // agent-focusable and `:focus-visible` lands on the real control.
+    this.shadowRootOptions = {
+      ...LitElement2.shadowRootOptions,
+      delegatesFocus: true
+    };
+  }
+  static {
+    this.styles = css7`
+    :host {
+      display: inline-block;
+      font-family: var(
+        --button-font-family,
+        var(--input-font-family, ui-sans-serif, system-ui, sans-serif)
+      );
+    }
+    :host([hidden]) {
+      display: none;
+    }
+    .control {
+      box-sizing: border-box;
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      gap: var(--button-gap, 0.5rem);
+      width: 100%;
+      font-family: inherit;
+      font-size: var(--button-font-size, 0.875rem);
+      font-weight: var(--button-font-weight, 500);
+      line-height: 1;
+      white-space: nowrap;
+      cursor: pointer;
+      user-select: none;
+      border: var(--button-border-width, 1px) solid transparent;
+      border-radius: var(--button-radius, var(--radius, 0.625rem));
+      transition: background-color var(--button-transition-duration, 150ms)
+          var(--button-transition-easing, cubic-bezier(0.4, 0, 0.2, 1)),
+        color var(--button-transition-duration, 150ms)
+          var(--button-transition-easing, cubic-bezier(0.4, 0, 0.2, 1)),
+        border-color var(--button-transition-duration, 150ms)
+          var(--button-transition-easing, cubic-bezier(0.4, 0, 0.2, 1)),
+        box-shadow var(--button-transition-duration, 150ms)
+          var(--button-transition-easing, cubic-bezier(0.4, 0, 0.2, 1));
+    }
+    /* Sizes */
+    :host([size='sm']) .control {
+      height: var(--button-height-sm, 2rem);
+      padding-inline: var(--button-padding-x-sm, 0.75rem);
+    }
+    .control {
+      height: var(--button-height-md, 2.25rem);
+      padding-inline: var(--button-padding-x-md, 1rem);
+    }
+    :host([size='lg']) .control {
+      height: var(--button-height-lg, 2.5rem);
+      padding-inline: var(--button-padding-x-lg, 1.5rem);
+    }
+    /* Primary (default) */
+    .control {
+      color: var(--button-primary-text, var(--primary-foreground, oklch(0.985 0 0)));
+      background: var(--button-primary-bg, var(--primary, oklch(0.205 0 0)));
+    }
+    .control:hover:not(:disabled) {
+      background: var(
+        --button-primary-bg-hover,
+        color-mix(in oklch, var(--primary, oklch(0.205 0 0)) 90%, transparent)
+      );
+    }
+    /* Secondary */
+    :host([variant='secondary']) .control {
+      color: var(--button-secondary-text, var(--secondary-foreground, oklch(0.205 0 0)));
+      background: var(--button-secondary-bg, var(--secondary, oklch(0.97 0 0)));
+    }
+    :host([variant='secondary']) .control:hover:not(:disabled) {
+      background: var(
+        --button-secondary-bg-hover,
+        color-mix(in oklch, var(--secondary, oklch(0.97 0 0)) 80%, var(--foreground, oklch(0.145 0 0)))
+      );
+    }
+    /* Destructive */
+    :host([variant='destructive']) .control {
+      color: var(--button-destructive-text, var(--destructive-foreground, oklch(0.985 0 0)));
+      background: var(--button-destructive-bg, var(--destructive, oklch(0.577 0.245 27.325)));
+    }
+    :host([variant='destructive']) .control:hover:not(:disabled) {
+      background: var(
+        --button-destructive-bg-hover,
+        color-mix(in oklch, var(--destructive, oklch(0.577 0.245 27.325)) 90%, transparent)
+      );
+    }
+    /* Outline */
+    :host([variant='outline']) .control {
+      color: var(--button-outline-text, var(--foreground, oklch(0.145 0 0)));
+      background: var(--button-outline-bg, var(--background, oklch(1 0 0)));
+      border-color: var(--button-outline-border, var(--border, oklch(0.922 0 0)));
+    }
+    :host([variant='outline']) .control:hover:not(:disabled) {
+      background: var(--button-outline-bg-hover, var(--accent, oklch(0.97 0 0)));
+      color: var(--button-outline-text-hover, var(--accent-foreground, oklch(0.205 0 0)));
+    }
+    /* Ghost */
+    :host([variant='ghost']) .control {
+      color: var(--button-ghost-text, var(--foreground, oklch(0.145 0 0)));
+      background: transparent;
+    }
+    :host([variant='ghost']) .control:hover:not(:disabled) {
+      background: var(--button-ghost-bg-hover, var(--accent, oklch(0.97 0 0)));
+      color: var(--button-ghost-text-hover, var(--accent-foreground, oklch(0.205 0 0)));
+    }
+    /* Focus + disabled (shared across variants) */
+    .control:focus-visible {
+      outline: none;
+      box-shadow: 0 0 0 var(--ring-width, 3px)
+        color-mix(in oklch, var(--ring, oklch(0.708 0 0)) 40%, transparent);
+    }
+    .control:disabled {
+      opacity: var(--button-disabled-opacity, 0.5);
+      cursor: not-allowed;
+    }
+  `;
+  }
+  /** The inner native `<button>` that owns activation, focus, and a11y. */
+  get button() {
+    return this.renderRoot?.querySelector("button") ?? null;
+  }
+  // --- WmcpAction hooks ---------------------------------------------------
+  get actionVerb() {
+    return "click";
+  }
+  get defaultNameSuffix() {
+    return "button";
+  }
+  // A button's visible name is its slotted text, so fall back to that.
+  get actionNoun() {
+    return this.label || this.textContent?.trim() || this.name || "button";
+  }
+  get defaultToolDescription() {
+    return `Click the "${this.actionNoun}" button.`;
+  }
+  executeTool() {
+    const noun = this.actionNoun;
+    if (this.disabled) {
+      return {
+        content: [
+          {
+            type: "text",
+            text: `The "${noun}" button is disabled and can't be activated.`
+          }
+        ],
+        isError: true
+      };
+    }
+    this.activate();
+    const effect = this.type === "submit" ? " (submitted the form)" : this.type === "reset" ? " (reset the form)" : "";
+    return {
+      content: [
+        { type: "text", text: `Clicked the "${noun}" button${effect}.` }
+      ]
+    };
+  }
+  // --- Activation ---------------------------------------------------------
+  /**
+   * Activate the button as if a human clicked it: routes through the inner
+   * native button so light-DOM `click` handlers fire and `type`-driven form
+   * submission/reset happens. A no-op when disabled.
+   */
+  activate() {
+    this.button?.click();
+  }
+  /**
+   * Inner-button click handler. The native click already bubbles (composed) to
+   * the host, so light-DOM listeners fire without help; this only adds the
+   * cross-shadow form behavior a native submit/reset button can't do from here.
+   */
+  onInnerClick() {
+    if (this.disabled) return;
+    if (this.type === "submit") {
+      this.internals.form?.requestSubmit();
+    } else if (this.type === "reset") {
+      this.internals.form?.reset();
+    }
+  }
+  render() {
+    return html7`
+      <button
+        class="control"
+        part="control"
+        type="button"
+        ?disabled=${this.disabled}
+        aria-label=${this.label || nothing7}
+        @click=${this.onInnerClick}
+      >
+        <slot></slot>
+      </button>
+    `;
+  }
+};
+__decorateClass([
+  property9({ reflect: true })
+], WmcpButton.prototype, "variant", 2);
+__decorateClass([
+  property9({ reflect: true })
+], WmcpButton.prototype, "size", 2);
+__decorateClass([
+  property9()
+], WmcpButton.prototype, "type", 2);
+__decorateClass([
+  property9({ type: Boolean, reflect: true })
+], WmcpButton.prototype, "disabled", 2);
+
+// src/elements/dialog.ts
+import {
+  html as html8,
+  css as css8
+} from "lit";
+import { property as property10 } from "lit/decorators.js";
+var WmcpDialog = class extends WmcpAction {
+  constructor() {
+    super(...arguments);
+    this.open = false;
+    this.modal = true;
+    this.staticBackdrop = false;
+    /** Last `returnValue` the dialog closed with (mirrors native `<dialog>`). */
+    this.returnValue = "";
+  }
+  static {
+    this.tagName = "wmcp-dialog";
+  }
+  static {
+    this.styles = css8`
+    :host {
+      display: contents;
+    }
+    dialog {
+      box-sizing: border-box;
+      width: var(--dialog-width, min(92vw, 32rem));
+      max-width: var(--dialog-max-width, 32rem);
+      max-height: var(--dialog-max-height, 85dvh);
+      color: var(--dialog-text, var(--popover-foreground, oklch(0.145 0 0)));
+      background: var(--dialog-bg, var(--popover, oklch(1 0 0)));
+      border: var(--dialog-border-width, 1px) solid
+        var(--dialog-border, var(--border, oklch(0.922 0 0)));
+      border-radius: var(--dialog-radius, var(--radius, 0.625rem));
+      box-shadow: var(
+        --dialog-shadow,
+        0 10px 38px -10px color-mix(in oklch, oklch(0 0 0) 35%, transparent),
+        0 10px 20px -15px color-mix(in oklch, oklch(0 0 0) 20%, transparent)
+      );
+      font-family: var(
+        --dialog-font-family,
+        ui-sans-serif,
+        system-ui,
+        sans-serif
+      );
+      overflow: auto;
+    }
+    dialog::backdrop {
+      background: var(
+        --dialog-backdrop,
+        color-mix(in oklch, oklch(0 0 0) 50%, transparent)
+      );
+    }
+    /* Padding lives on the panel, not the dialog, so the dialog's box is the
+       panel's box — a click whose target is the <dialog> is unambiguously the
+       backdrop, never the dialog's own visible frame. */
+    .panel {
+      padding: var(--dialog-padding, 1.5rem);
+    }
+    /* Modern-CSS entrance: fade + lift, honoring reduced-motion. */
+    @media (prefers-reduced-motion: no-preference) {
+      dialog,
+      dialog::backdrop {
+        transition: opacity var(--dialog-transition-duration, 180ms)
+            var(--dialog-transition-easing, cubic-bezier(0.4, 0, 0.2, 1)),
+          translate var(--dialog-transition-duration, 180ms)
+            var(--dialog-transition-easing, cubic-bezier(0.4, 0, 0.2, 1)),
+          overlay var(--dialog-transition-duration, 180ms) allow-discrete,
+          display var(--dialog-transition-duration, 180ms) allow-discrete;
+      }
+      dialog:not([open]),
+      dialog:not([open])::backdrop {
+        opacity: 0;
+      }
+      dialog:not([open]) {
+        translate: 0 0.5rem;
+      }
+      @starting-style {
+        dialog[open],
+        dialog[open]::backdrop {
+          opacity: 0;
+        }
+        dialog[open] {
+          translate: 0 0.5rem;
+        }
+      }
+    }
+  `;
+  }
+  get dialogEl() {
+    return this.renderRoot?.querySelector("dialog") ?? null;
+  }
+  // --- WmcpAction hooks ---------------------------------------------------
+  get actionVerb() {
+    return "open";
+  }
+  get defaultNameSuffix() {
+    return "dialog";
+  }
+  get defaultToolDescription() {
+    return `Open the "${this.actionNoun}" dialog for the user to review.`;
+  }
+  executeTool() {
+    const noun = this.actionNoun;
+    if (this.open) {
+      return {
+        content: [
+          { type: "text", text: `The "${noun}" dialog is already open.` }
+        ]
+      };
+    }
+    this.show();
+    return {
+      content: [
+        {
+          type: "text",
+          text: `Opened the "${noun}" dialog for the user to review.`
+        }
+      ]
+    };
+  }
+  // --- Open / close -------------------------------------------------------
+  updated(changed) {
+    super.updated(changed);
+    if (changed.has("open")) this.syncNativeOpen();
+  }
+  /** Open the dialog (modal unless `modal` is false). */
+  show() {
+    this.open = true;
+  }
+  /** Close the dialog, optionally recording a `returnValue`. */
+  close(returnValue) {
+    if (returnValue !== void 0) this.returnValue = returnValue;
+    this.open = false;
+  }
+  /** Reconcile our `open` state with the native dialog's imperative API. */
+  syncNativeOpen() {
+    const d = this.dialogEl;
+    if (!d) return;
+    if (this.open && !d.open) {
+      if (this.modal) d.showModal();
+      else d.show();
+      this.dispatchEvent(new Event("open", { bubbles: true, composed: true }));
+    } else if (!this.open && d.open) {
+      d.close(this.returnValue);
+    }
+  }
+  /** Native `close` fires for Escape, backdrop, or our own `close()`. */
+  onNativeClose() {
+    this.returnValue = this.dialogEl?.returnValue ?? this.returnValue;
+    if (this.open) this.open = false;
+    this.dispatchEvent(new Event("close", { bubbles: true, composed: true }));
+  }
+  /**
+   * Close on a backdrop click. A click whose target is the `<dialog>` itself
+   * is the backdrop — content clicks retarget to `.panel` or its children — so
+   * this never fires on the dialog's own frame or a text drag-select.
+   */
+  onDialogClick(event) {
+    if (this.staticBackdrop) return;
+    if (event.target === this.dialogEl) this.close();
+  }
+  render() {
+    return html8`
+      <dialog
+        part="dialog"
+        aria-label=${this.label || this.actionNoun}
+        @close=${this.onNativeClose}
+        @click=${this.onDialogClick}
+      >
+        <div class="panel" part="panel">
+          <slot></slot>
+        </div>
+      </dialog>
+    `;
+  }
+};
+__decorateClass([
+  property10({ type: Boolean, reflect: true })
+], WmcpDialog.prototype, "open", 2);
+__decorateClass([
+  property10({ type: Boolean })
+], WmcpDialog.prototype, "modal", 2);
+__decorateClass([
+  property10({ type: Boolean, attribute: "static-backdrop" })
+], WmcpDialog.prototype, "staticBackdrop", 2);
+
+// src/elements/menu.ts
+import {
+  html as html9,
+  css as css9,
+  nothing as nothing8
+} from "lit";
+import { property as property11, state as state4 } from "lit/decorators.js";
+import { repeat as repeat3 } from "lit/directives/repeat.js";
+var WmcpMenu = class extends WmcpAction {
+  constructor() {
+    super(...arguments);
+    this.label = "";
+    this.items = [];
+    this.open = false;
+    this.resolvedItems = [];
+  }
+  static {
+    this.tagName = "wmcp-menu";
+  }
+  static {
+    this.styles = css9`
+    :host {
+      display: inline-block;
+      font-family: var(
+        --menu-font-family,
+        var(--input-font-family, ui-sans-serif, system-ui, sans-serif)
+      );
+    }
+    :host([hidden]) {
+      display: none;
+    }
+    .trigger {
+      box-sizing: border-box;
+      display: inline-flex;
+      align-items: center;
+      gap: var(--menu-trigger-gap, 0.375rem);
+      height: var(--menu-trigger-height, 2.25rem);
+      padding-inline: var(--menu-trigger-padding-x, 1rem);
+      font: inherit;
+      font-size: var(--menu-font-size, 0.875rem);
+      font-weight: var(--menu-trigger-font-weight, 500);
+      color: var(--menu-trigger-text, var(--foreground, oklch(0.145 0 0)));
+      background: var(--menu-trigger-bg, var(--background, oklch(1 0 0)));
+      border: 1px solid var(--menu-trigger-border, var(--border, oklch(0.922 0 0)));
+      border-radius: var(--menu-radius, var(--radius, 0.625rem));
+      cursor: pointer;
+      anchor-name: --wmcp-menu-anchor;
+    }
+    .trigger:hover {
+      background: var(--menu-trigger-bg-hover, var(--accent, oklch(0.97 0 0)));
+    }
+    .trigger:focus-visible {
+      outline: none;
+      box-shadow: 0 0 0 var(--ring-width, 3px)
+        color-mix(in oklch, var(--ring, oklch(0.708 0 0)) 40%, transparent);
+    }
+    .caret {
+      width: 0.75rem;
+      height: 0.75rem;
+      transition: rotate 150ms cubic-bezier(0.4, 0, 0.2, 1);
+    }
+    .trigger[aria-expanded='true'] .caret {
+      rotate: 180deg;
+    }
+    .menu {
+      box-sizing: border-box;
+      min-width: var(--menu-min-width, 11rem);
+      margin: 0;
+      padding: var(--menu-padding, 0.25rem);
+      color: var(--menu-text, var(--popover-foreground, oklch(0.145 0 0)));
+      background: var(--menu-bg, var(--popover, oklch(1 0 0)));
+      border: 1px solid var(--menu-border, var(--border, oklch(0.922 0 0)));
+      border-radius: var(--menu-radius, var(--radius, 0.625rem));
+      box-shadow: var(
+        --menu-shadow,
+        0 10px 38px -10px color-mix(in oklch, oklch(0 0 0) 35%, transparent)
+      );
+      /* Anchor the popover under the trigger; margin is the no-anchor fallback. */
+      position-anchor: --wmcp-menu-anchor;
+      inset: auto;
+      top: anchor(bottom);
+      left: anchor(left);
+      margin-top: var(--menu-offset, 0.25rem);
+    }
+    @media (prefers-reduced-motion: no-preference) {
+      .menu {
+        transition: opacity 130ms ease, translate 130ms ease,
+          overlay 130ms allow-discrete, display 130ms allow-discrete;
+      }
+      .menu:not(:popover-open) {
+        opacity: 0;
+        translate: 0 -0.25rem;
+      }
+      @starting-style {
+        .menu:popover-open {
+          opacity: 0;
+          translate: 0 -0.25rem;
+        }
+      }
+    }
+    .item {
+      display: flex;
+      width: 100%;
+      align-items: center;
+      gap: var(--menu-item-gap, 0.5rem);
+      padding: var(--menu-item-padding, 0.4rem 0.6rem);
+      font: inherit;
+      font-size: var(--menu-font-size, 0.875rem);
+      color: inherit;
+      text-align: start;
+      background: transparent;
+      border: 0;
+      border-radius: var(--menu-item-radius, 0.4rem);
+      cursor: pointer;
+    }
+    .item:hover:not(:disabled),
+    .item:focus-visible {
+      outline: none;
+      background: var(--menu-item-bg-hover, var(--accent, oklch(0.97 0 0)));
+      color: var(--menu-item-text-hover, var(--accent-foreground, oklch(0.205 0 0)));
+    }
+    .item:disabled {
+      opacity: var(--menu-item-disabled-opacity, 0.5);
+      cursor: not-allowed;
+    }
+  `;
+  }
+  get menuEl() {
+    return this.renderRoot?.querySelector(".menu") ?? null;
+  }
+  get itemButtons() {
+    return Array.from(
+      this.renderRoot?.querySelectorAll(".item") ?? []
+    );
+  }
+  // --- WmcpAction hooks ---------------------------------------------------
+  get actionVerb() {
+    return "select";
+  }
+  get defaultNameSuffix() {
+    return "menu";
+  }
+  get actionNoun() {
+    return this.label || this.name || "menu";
+  }
+  get defaultToolDescription() {
+    return `Select an item from the "${this.actionNoun}" menu.`;
+  }
+  // Re-register the tool when the item set changes so its enum stays in sync.
+  get toolReactiveProps() {
+    return [...super.toolReactiveProps, "resolvedItems"];
+  }
+  toolInputSchema() {
+    return {
+      type: "object",
+      properties: {
+        item: {
+          type: "string",
+          enum: this.resolvedItems.filter((i) => !i.disabled).map((i) => i.value),
+          description: `Which item to select from the "${this.actionNoun}" menu.`
+        }
+      },
+      required: ["item"]
+    };
+  }
+  executeTool(args) {
+    const value = args.item == null ? "" : String(args.item);
+    const item = this.resolvedItems.find((i) => i.value === value);
+    if (!item) {
+      return {
+        content: [
+          {
+            type: "text",
+            text: `No item "${value}" in the "${this.actionNoun}" menu.`
+          }
+        ],
+        isError: true
+      };
+    }
+    if (item.disabled) {
+      return {
+        content: [
+          { type: "text", text: `The "${item.label}" item is disabled.` }
+        ],
+        isError: true
+      };
+    }
+    this.selectItem(item);
+    return {
+      content: [
+        {
+          type: "text",
+          text: `Selected "${item.label}" from the "${this.actionNoun}" menu.`
+        }
+      ]
+    };
+  }
+  // --- Item model ---------------------------------------------------------
+  connectedCallback() {
+    this.syncItems();
+    super.connectedCallback();
+    this.itemObserver = new MutationObserver(() => this.syncItems());
+    this.itemObserver.observe(this, { childList: true });
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this.itemObserver?.disconnect();
+    this.itemObserver = void 0;
+  }
+  willUpdate(changed) {
+    if (changed.has("items")) this.syncItems();
+  }
+  syncItems() {
+    this.resolvedItems = this.items.length > 0 ? this.items : this.readDeclarativeItems();
+  }
+  readDeclarativeItems() {
+    return Array.from(this.querySelectorAll("option")).map((o) => ({
+      value: o.value,
+      label: o.textContent?.trim() || o.value,
+      disabled: o.disabled
+    }));
+  }
+  // --- Selection + keyboard ----------------------------------------------
+  /** Dispatch the selection and close the menu. */
+  selectItem(item) {
+    this.dispatchEvent(
+      new CustomEvent("select", {
+        detail: { value: item.value, label: item.label },
+        bubbles: true,
+        composed: true
+      })
+    );
+    this.menuEl?.hidePopover();
+  }
+  onItemClick(item) {
+    if (item.disabled) return;
+    this.selectItem(item);
+  }
+  /** Sync `open`/`aria-expanded` and move focus into the menu when it opens. */
+  onToggle(event) {
+    this.open = event.newState === "open";
+    if (this.open) {
+      this.itemButtons.find((b) => !b.disabled)?.focus();
+    }
+  }
+  /** Roving focus among items with the arrow / Home / End keys. */
+  onMenuKeydown(event) {
+    const buttons = this.itemButtons.filter((b) => !b.disabled);
+    if (buttons.length === 0) return;
+    const current = buttons.indexOf(
+      this.shadowRoot?.activeElement
+    );
+    let next = -1;
+    switch (event.key) {
+      case "ArrowDown":
+        next = current < 0 ? 0 : (current + 1) % buttons.length;
+        break;
+      case "ArrowUp":
+        next = current <= 0 ? buttons.length - 1 : current - 1;
+        break;
+      case "Home":
+        next = 0;
+        break;
+      case "End":
+        next = buttons.length - 1;
+        break;
+      default:
+        return;
+    }
+    event.preventDefault();
+    buttons[next]?.focus();
+  }
+  render() {
+    return html9`
+      <button
+        type="button"
+        class="trigger"
+        part="trigger"
+        popovertarget="menu-pop"
+        aria-haspopup="menu"
+        aria-expanded=${this.open ? "true" : "false"}
+      >
+        <span>${this.label || "Menu"}</span>
+        <svg class="caret" viewBox="0 0 16 16" aria-hidden="true">
+          <path
+            d="M4 6l4 4 4-4"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="1.5"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+          />
+        </svg>
+      </button>
+      <div
+        id="menu-pop"
+        class="menu"
+        part="menu"
+        popover="auto"
+        role="menu"
+        aria-label=${this.label || "Menu"}
+        @toggle=${this.onToggle}
+        @keydown=${this.onMenuKeydown}
+      >
+        ${this.resolvedItems.length === 0 ? nothing8 : repeat3(
+      this.resolvedItems,
+      (item) => item.value,
+      (item) => html9`
+                <button
+                  type="button"
+                  class="item"
+                  role="menuitem"
+                  part="item"
+                  ?disabled=${item.disabled ?? false}
+                  @click=${() => this.onItemClick(item)}
+                >
+                  ${item.label}
+                </button>
+              `
+    )}
+      </div>
+    `;
+  }
+};
+__decorateClass([
+  property11()
+], WmcpMenu.prototype, "label", 2);
+__decorateClass([
+  property11({ attribute: false })
+], WmcpMenu.prototype, "items", 2);
+__decorateClass([
+  property11({ type: Boolean, reflect: true })
+], WmcpMenu.prototype, "open", 2);
+__decorateClass([
+  state4()
+], WmcpMenu.prototype, "resolvedItems", 2);
+
+// src/elements/tabs.ts
+import {
+  html as html10,
+  css as css10,
+  nothing as nothing9
+} from "lit";
+import { property as property12, state as state5 } from "lit/decorators.js";
+import { repeat as repeat4 } from "lit/directives/repeat.js";
+var WmcpTabs = class extends WmcpAction {
+  constructor() {
+    super(...arguments);
+    this.active = "";
+    this.label = "";
+    this.tabs = [];
+  }
+  static {
+    this.tagName = "wmcp-tabs";
+  }
+  static {
+    this.styles = css10`
+    :host {
+      display: block;
+      font-family: var(
+        --tabs-font-family,
+        var(--input-font-family, ui-sans-serif, system-ui, sans-serif)
+      );
+    }
+    :host([hidden]) {
+      display: none;
+    }
+    [role='tablist'] {
+      display: flex;
+      gap: var(--tabs-gap, 0.25rem);
+      border-bottom: 1px solid var(--tabs-border, var(--border, oklch(0.922 0 0)));
+    }
+    .tab {
+      position: relative;
+      appearance: none;
+      border: 0;
+      background: transparent;
+      padding: var(--tabs-tab-padding, 0.5rem 0.875rem);
+      margin-bottom: -1px;
+      font: inherit;
+      font-size: var(--tabs-font-size, 0.875rem);
+      font-weight: var(--tabs-font-weight, 500);
+      color: var(--tabs-tab-text, var(--muted-foreground, oklch(0.556 0 0)));
+      cursor: pointer;
+      border-bottom: 2px solid transparent;
+      transition: color 150ms ease, border-color 150ms ease;
+    }
+    .tab:hover:not(:disabled) {
+      color: var(--tabs-tab-text-hover, var(--foreground, oklch(0.145 0 0)));
+    }
+    .tab[aria-selected='true'] {
+      color: var(--tabs-tab-text-active, var(--foreground, oklch(0.145 0 0)));
+      border-bottom-color: var(--tabs-indicator, var(--primary, oklch(0.205 0 0)));
+    }
+    .tab:focus-visible {
+      outline: none;
+      border-radius: 0.375rem;
+      box-shadow: 0 0 0 var(--ring-width, 3px)
+        color-mix(in oklch, var(--ring, oklch(0.708 0 0)) 40%, transparent);
+    }
+    .tab:disabled {
+      opacity: var(--tabs-tab-disabled-opacity, 0.5);
+      cursor: not-allowed;
+    }
+    .panels {
+      padding-top: var(--tabs-panel-padding-top, 1rem);
+    }
+  `;
+  }
+  // --- WmcpAction hooks ---------------------------------------------------
+  get actionVerb() {
+    return "switch";
+  }
+  get defaultNameSuffix() {
+    return "tabs";
+  }
+  get actionNoun() {
+    return this.label || this.name || "tabs";
+  }
+  get defaultToolDescription() {
+    return `Switch the active tab in the "${this.actionNoun}" tabs.`;
+  }
+  // The enum tracks the live tab set; the description need not track `active`.
+  get toolReactiveProps() {
+    return [...super.toolReactiveProps, "tabs"];
+  }
+  toolInputSchema() {
+    return {
+      type: "object",
+      properties: {
+        tab: {
+          type: "string",
+          enum: this.tabs.filter((t) => !t.disabled).map((t) => t.value),
+          description: `Which tab to switch to in the "${this.actionNoun}" tabs.`
+        }
+      },
+      required: ["tab"]
+    };
+  }
+  executeTool(args) {
+    const value = args.tab == null ? "" : String(args.tab);
+    const tab = this.tabs.find((t) => t.value === value);
+    if (!tab) {
+      return {
+        content: [
+          { type: "text", text: `No tab "${value}" in the "${this.actionNoun}" tabs.` }
+        ],
+        isError: true
+      };
+    }
+    if (tab.disabled) {
+      return {
+        content: [{ type: "text", text: `The "${tab.label}" tab is disabled.` }],
+        isError: true
+      };
+    }
+    this.switchTo(tab.value);
+    return {
+      content: [
+        {
+          type: "text",
+          text: `Switched to the "${tab.label}" tab in the "${this.actionNoun}" tabs.`
+        }
+      ]
+    };
+  }
+  // --- Tab model + state --------------------------------------------------
+  connectedCallback() {
+    this.syncTabs();
+    this.ensureActive();
+    super.connectedCallback();
+    this.panelObserver = new MutationObserver(() => {
+      this.syncTabs();
+      this.ensureActive();
+    });
+    this.panelObserver.observe(this, { childList: true });
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this.panelObserver?.disconnect();
+    this.panelObserver = void 0;
+  }
+  updated(changed) {
+    super.updated(changed);
+    if (changed.has("active") || changed.has("tabs")) this.applyPanels();
+  }
+  /** Light-DOM children that declare a tab via the `tab` attribute. */
+  get panelEls() {
+    return Array.from(this.querySelectorAll("[tab]"));
+  }
+  syncTabs() {
+    this.tabs = this.panelEls.map((el) => ({
+      value: el.getAttribute("tab") ?? "",
+      label: el.getAttribute("tab-label") || el.getAttribute("tab") || "",
+      disabled: el.hasAttribute("tab-disabled")
+    }));
+  }
+  /** Fall back to the first enabled tab when `active` is unset or invalid. */
+  ensureActive() {
+    const valid = this.tabs.some((t) => t.value === this.active && !t.disabled);
+    if (!valid) this.active = this.tabs.find((t) => !t.disabled)?.value ?? "";
+  }
+  /** Reflect the active tab onto the slotted panels (roles, labels, hidden). */
+  applyPanels() {
+    for (const el of this.panelEls) {
+      const value = el.getAttribute("tab") ?? "";
+      const tab = this.tabs.find((t) => t.value === value);
+      el.setAttribute("role", "tabpanel");
+      el.setAttribute("tabindex", "0");
+      if (tab?.label) el.setAttribute("aria-label", tab.label);
+      el.toggleAttribute("hidden", value !== this.active);
+    }
+  }
+  /** Switch the active tab, firing `change` when it actually moves. */
+  switchTo(value) {
+    if (value === this.active) return;
+    this.active = value;
+    this.dispatchEvent(
+      new CustomEvent("change", {
+        detail: { value },
+        bubbles: true,
+        composed: true
+      })
+    );
+  }
+  get tabButtons() {
+    return Array.from(this.renderRoot?.querySelectorAll(".tab") ?? []);
+  }
+  /** Arrow / Home / End roving with automatic activation (ARIA tabs pattern). */
+  onKeydown(event) {
+    const enabled = this.tabs.filter((t) => !t.disabled);
+    if (enabled.length === 0) return;
+    const order = enabled.map((t) => t.value);
+    const current = order.indexOf(this.active);
+    let next = -1;
+    switch (event.key) {
+      case "ArrowRight":
+      case "ArrowDown":
+        next = (current + 1) % order.length;
+        break;
+      case "ArrowLeft":
+      case "ArrowUp":
+        next = current <= 0 ? order.length - 1 : current - 1;
+        break;
+      case "Home":
+        next = 0;
+        break;
+      case "End":
+        next = order.length - 1;
+        break;
+      default:
+        return;
+    }
+    event.preventDefault();
+    const value = order[next];
+    this.switchTo(value);
+    void this.updateComplete.then(() => {
+      this.tabButtons.find((b) => b.dataset.value === value)?.focus();
+    });
+  }
+  render() {
+    return html10`
+      <div role="tablist" aria-label=${this.label || nothing9} @keydown=${this.onKeydown}>
+        ${repeat4(
+      this.tabs,
+      (tab) => tab.value,
+      (tab) => {
+        const selected = tab.value === this.active;
+        return html10`<button
+              type="button"
+              class="tab"
+              part="tab"
+              role="tab"
+              data-value=${tab.value}
+              aria-selected=${selected ? "true" : "false"}
+              tabindex=${selected ? "0" : "-1"}
+              ?disabled=${tab.disabled ?? false}
+              @click=${() => this.switchTo(tab.value)}
+            >
+              ${tab.label}
+            </button>`;
+      }
+    )}
+      </div>
+      <div class="panels" part="panels"><slot></slot></div>
+    `;
+  }
+};
+__decorateClass([
+  property12({ reflect: true })
+], WmcpTabs.prototype, "active", 2);
+__decorateClass([
+  property12()
+], WmcpTabs.prototype, "label", 2);
+__decorateClass([
+  state5()
+], WmcpTabs.prototype, "tabs", 2);
+
+// src/elements/popover.ts
+import {
+  html as html11,
+  css as css11,
+  nothing as nothing10
+} from "lit";
+import { property as property13 } from "lit/decorators.js";
+var WmcpPopover = class extends WmcpAction {
+  constructor() {
+    super(...arguments);
+    this.open = false;
+    this.label = "";
+    this.placement = "bottom";
+    this.trigger = "click";
+  }
+  static {
+    this.tagName = "wmcp-popover";
+  }
+  static {
+    this.styles = css11`
+    :host {
+      display: inline-block;
+      font-family: var(
+        --popover-font-family,
+        var(--input-font-family, ui-sans-serif, system-ui, sans-serif)
+      );
+    }
+    :host([hidden]) {
+      display: none;
+    }
+    .trigger {
+      appearance: none;
+      font: inherit;
+      cursor: pointer;
+      anchor-name: --wmcp-pop-anchor;
+      /* Unstyled by default so any trigger content (text, a button, an icon)
+         sits flush; consumers theme via ::part(trigger). */
+      border: 0;
+      background: none;
+      padding: 0;
+      color: inherit;
+    }
+    .panel {
+      box-sizing: border-box;
+      width: max-content;
+      max-width: var(--popover-max-width, 18rem);
+      margin: 0;
+      padding: var(--popover-padding, 0.75rem 0.875rem);
+      color: var(--popover-text, var(--popover-foreground, oklch(0.145 0 0)));
+      background: var(--popover-bg, var(--popover, oklch(1 0 0)));
+      border: 1px solid var(--popover-border, var(--border, oklch(0.922 0 0)));
+      border-radius: var(--popover-radius, var(--radius, 0.625rem));
+      box-shadow: var(
+        --popover-shadow,
+        0 10px 38px -10px color-mix(in oklch, oklch(0 0 0) 35%, transparent)
+      );
+      font-size: var(--popover-font-size, 0.875rem);
+      position-anchor: --wmcp-pop-anchor;
+      inset: auto;
+    }
+    :host([placement='bottom']) .panel {
+      top: anchor(bottom);
+      left: anchor(left);
+      margin-top: var(--popover-offset, 0.4rem);
+    }
+    :host([placement='top']) .panel {
+      bottom: anchor(top);
+      left: anchor(left);
+      margin-bottom: var(--popover-offset, 0.4rem);
+    }
+    :host([placement='right']) .panel {
+      left: anchor(right);
+      top: anchor(top);
+      margin-left: var(--popover-offset, 0.4rem);
+    }
+    :host([placement='left']) .panel {
+      right: anchor(left);
+      top: anchor(top);
+      margin-right: var(--popover-offset, 0.4rem);
+    }
+    @media (prefers-reduced-motion: no-preference) {
+      .panel {
+        transition: opacity 130ms ease, translate 130ms ease,
+          overlay 130ms allow-discrete, display 130ms allow-discrete;
+      }
+      .panel:not(:popover-open) {
+        opacity: 0;
+        translate: 0 -0.25rem;
+      }
+      @starting-style {
+        .panel:popover-open {
+          opacity: 0;
+          translate: 0 -0.25rem;
+        }
+      }
+    }
+  `;
+  }
+  get panelEl() {
+    return this.renderRoot?.querySelector(".panel") ?? null;
+  }
+  // --- WmcpAction hooks ---------------------------------------------------
+  get actionVerb() {
+    return "open";
+  }
+  get defaultNameSuffix() {
+    return "popover";
+  }
+  get defaultToolDescription() {
+    return `Open the "${this.actionNoun}" popover.`;
+  }
+  executeTool() {
+    const noun = this.actionNoun;
+    if (this.open) {
+      return { content: [{ type: "text", text: `The "${noun}" popover is already open.` }] };
+    }
+    this.show();
+    return { content: [{ type: "text", text: `Opened the "${noun}" popover.` }] };
+  }
+  // --- Open / close -------------------------------------------------------
+  updated(changed) {
+    super.updated(changed);
+    if (changed.has("open")) this.syncNativeOpen();
+  }
+  /** Open the popover. */
+  show() {
+    this.open = true;
+  }
+  /** Close the popover. */
+  close() {
+    this.open = false;
+  }
+  syncNativeOpen() {
+    const p = this.panelEl;
+    if (!p) return;
+    const isOpen = p.matches(":popover-open");
+    if (this.open && !isOpen) p.showPopover();
+    else if (!this.open && isOpen) p.hidePopover();
+  }
+  /** Native toggle fires for clicks, light-dismiss, Escape, and our own calls. */
+  onToggle(event) {
+    const opened = event.newState === "open";
+    this.open = opened;
+    this.dispatchEvent(
+      new Event(opened ? "open" : "close", { bubbles: true, composed: true })
+    );
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this.cancelScheduledClose();
+  }
+  /** Open on hover/focus of the trigger *or* the panel. */
+  openOnHover() {
+    if (this.trigger !== "hover") return;
+    this.cancelScheduledClose();
+    this.show();
+  }
+  /**
+   * Close on leave/blur — but on a short delay, so the pointer can cross the
+   * gap from the trigger to the panel (and reach interactive content inside it)
+   * without the popover vanishing. Re-entering either cancels the close.
+   */
+  scheduleHoverClose() {
+    if (this.trigger !== "hover") return;
+    this.cancelScheduledClose();
+    this.closeTimer = setTimeout(() => this.close(), 120);
+  }
+  cancelScheduledClose() {
+    if (this.closeTimer) {
+      clearTimeout(this.closeTimer);
+      this.closeTimer = void 0;
+    }
+  }
+  render() {
+    const isTooltip = this.trigger === "hover";
+    return html11`
+      <button
+        type="button"
+        class="trigger"
+        part="trigger"
+        popovertarget=${this.trigger === "click" ? "wmcp-pop" : nothing10}
+        aria-haspopup=${isTooltip ? nothing10 : "dialog"}
+        aria-expanded=${isTooltip ? nothing10 : this.open ? "true" : "false"}
+        aria-describedby=${isTooltip ? "wmcp-pop" : nothing10}
+        @pointerenter=${this.openOnHover}
+        @pointerleave=${this.scheduleHoverClose}
+        @focusin=${this.openOnHover}
+        @focusout=${this.scheduleHoverClose}
+      >
+        <slot name="trigger">${this.label}</slot>
+      </button>
+      <div
+        id="wmcp-pop"
+        class="panel"
+        part="panel"
+        popover=${isTooltip ? "manual" : "auto"}
+        role=${isTooltip ? "tooltip" : "dialog"}
+        aria-label=${this.label || this.actionNoun}
+        @toggle=${this.onToggle}
+        @pointerenter=${this.openOnHover}
+        @pointerleave=${this.scheduleHoverClose}
+        @focusin=${this.openOnHover}
+        @focusout=${this.scheduleHoverClose}
+      >
+        <slot></slot>
+      </div>
+    `;
+  }
+};
+__decorateClass([
+  property13({ type: Boolean, reflect: true })
+], WmcpPopover.prototype, "open", 2);
+__decorateClass([
+  property13()
+], WmcpPopover.prototype, "label", 2);
+__decorateClass([
+  property13({ reflect: true })
+], WmcpPopover.prototype, "placement", 2);
+__decorateClass([
+  property13()
+], WmcpPopover.prototype, "trigger", 2);
+
+// src/elements/toast.ts
+import {
+  html as html12,
+  css as css12,
+  nothing as nothing11
+} from "lit";
+import { property as property14, state as state6 } from "lit/decorators.js";
+import { repeat as repeat5 } from "lit/directives/repeat.js";
+var RECENT_WINDOW_MS = 3e4;
+var WmcpToast = class extends WmcpExposable {
+  constructor() {
+    super(...arguments);
+    this.name = "";
+    this.label = "";
+    this.placement = "bottom-right";
+    this.duration = 5e3;
+    this.toasts = [];
+    // A short history so an agent that reads *after* a toast auto-dismisses still
+    // learns what happened (async outcomes vanish before the agent polls).
+    this.recent = [];
+    this.nextId = 0;
+    this.timers = /* @__PURE__ */ new Map();
+  }
+  static {
+    this.tagName = "wmcp-toast";
+  }
+  static {
+    this.styles = css12`
+    :host {
+      position: fixed;
+      z-index: var(--toast-z, 1000);
+      display: flex;
+      flex-direction: column;
+      gap: var(--toast-gap, 0.5rem);
+      width: max-content;
+      max-width: var(--toast-max-width, min(92vw, 22rem));
+      pointer-events: none;
+      font-family: var(
+        --toast-font-family,
+        var(--input-font-family, ui-sans-serif, system-ui, sans-serif)
+      );
+    }
+    :host([placement='bottom-right']) {
+      right: var(--toast-inset, 1rem);
+      bottom: var(--toast-inset, 1rem);
+    }
+    :host([placement='bottom-left']) {
+      left: var(--toast-inset, 1rem);
+      bottom: var(--toast-inset, 1rem);
+    }
+    :host([placement='top-right']) {
+      right: var(--toast-inset, 1rem);
+      top: var(--toast-inset, 1rem);
+    }
+    :host([placement='top-left']) {
+      left: var(--toast-inset, 1rem);
+      top: var(--toast-inset, 1rem);
+    }
+    .toast {
+      pointer-events: auto;
+      display: flex;
+      align-items: start;
+      gap: var(--toast-item-gap, 0.625rem);
+      padding: var(--toast-padding, 0.75rem 0.875rem);
+      color: var(--toast-text, var(--popover-foreground, oklch(0.145 0 0)));
+      background: var(--toast-bg, var(--popover, oklch(1 0 0)));
+      border: 1px solid var(--toast-border, var(--border, oklch(0.922 0 0)));
+      border-left: 3px solid var(--toast-accent, var(--border, oklch(0.922 0 0)));
+      border-radius: var(--toast-radius, var(--radius, 0.625rem));
+      box-shadow: var(
+        --toast-shadow,
+        0 10px 38px -10px color-mix(in oklch, oklch(0 0 0) 35%, transparent)
+      );
+      font-size: var(--toast-font-size, 0.875rem);
+    }
+    .toast[data-variant='success'] {
+      --toast-accent: var(--toast-accent-success, oklch(0.627 0.13 160));
+    }
+    .toast[data-variant='warning'] {
+      --toast-accent: var(--toast-accent-warning, oklch(0.7 0.16 75));
+    }
+    .toast[data-variant='error'] {
+      --toast-accent: var(--toast-accent-error, var(--destructive, oklch(0.577 0.245 27.325)));
+    }
+    .toast[data-variant='info'] {
+      --toast-accent: var(--toast-accent-info, var(--primary, oklch(0.205 0 0)));
+    }
+    .body {
+      flex: 1;
+      min-width: 0;
+    }
+    .title {
+      font-weight: 600;
+    }
+    .message {
+      color: var(--toast-message, var(--muted-foreground, oklch(0.556 0 0)));
+    }
+    .title + .message {
+      margin-top: 0.125rem;
+    }
+    .close {
+      appearance: none;
+      flex-shrink: 0;
+      width: 1.25rem;
+      height: 1.25rem;
+      padding: 0;
+      border: 0;
+      border-radius: 0.25rem;
+      background: transparent;
+      color: var(--toast-message, var(--muted-foreground, oklch(0.556 0 0)));
+      cursor: pointer;
+      line-height: 1;
+    }
+    .close:hover {
+      color: var(--toast-text, var(--foreground, oklch(0.145 0 0)));
+    }
+    @media (prefers-reduced-motion: no-preference) {
+      .toast {
+        animation: toast-in 180ms cubic-bezier(0.34, 1.56, 0.64, 1);
+      }
+      @keyframes toast-in {
+        from {
+          opacity: 0;
+          translate: 0 0.5rem;
+        }
+      }
+    }
+  `;
+  }
+  // --- Imperative API (what page code calls) ------------------------------
+  /** Show a toast. Returns its id (pass to {@link dismiss}). */
+  show(options) {
+    const record = {
+      ...options,
+      id: this.nextId++,
+      variant: options.variant ?? "info",
+      shownAt: Date.now()
+    };
+    this.toasts = [...this.toasts, record];
+    this.recent = [record, ...this.recent].slice(0, 10);
+    const ms = options.duration ?? this.duration;
+    if (ms > 0) {
+      this.timers.set(
+        record.id,
+        setTimeout(() => this.dismiss(record.id), ms)
+      );
+    }
+    return record.id;
+  }
+  /** Dismiss a toast by id. */
+  dismiss(id) {
+    this.toasts = this.toasts.filter((t) => t.id !== id);
+    const timer = this.timers.get(id);
+    if (timer) {
+      clearTimeout(timer);
+      this.timers.delete(id);
+    }
+  }
+  /** Dismiss all visible toasts. */
+  clear() {
+    for (const t of [...this.toasts]) this.dismiss(t.id);
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    for (const timer of this.timers.values()) clearTimeout(timer);
+    this.timers.clear();
+  }
+  // --- WmcpExposable hooks (the agent's *read* surface) -------------------
+  get resolvedToolName() {
+    return this.toolName || `read_${this.name || "notifications"}`;
+  }
+  get defaultToolDescription() {
+    return "Read the notifications currently shown to the user (with any that appeared in the last few seconds), so you can tell what just happened on the page.";
+  }
+  get toolReactiveProps() {
+    return [...super.toolReactiveProps, "name"];
+  }
+  executeTool() {
+    const describe = (t) => `[${t.variant}] ${t.title ? `${t.title}: ` : ""}${t.message}`;
+    if (this.toasts.length > 0) {
+      return {
+        content: [
+          {
+            type: "text",
+            text: `${this.toasts.length} notification(s) showing:
+` + this.toasts.map(describe).join("\n")
+          }
+        ]
+      };
+    }
+    const cutoff = Date.now() - RECENT_WINDOW_MS;
+    const recent = this.recent.filter((t) => t.shownAt >= cutoff);
+    if (recent.length > 0) {
+      return {
+        content: [
+          {
+            type: "text",
+            text: "No notifications are showing now. Recently shown:\n" + recent.map(describe).join("\n")
+          }
+        ]
+      };
+    }
+    return { content: [{ type: "text", text: "No notifications." }] };
+  }
+  // --- Render -------------------------------------------------------------
+  render() {
+    return html12`
+      <div role="region" aria-label=${this.label || "Notifications"} aria-live="polite">
+        ${repeat5(
+      this.toasts,
+      (t) => t.id,
+      (t) => html12`
+            <div
+              class="toast"
+              part="toast"
+              data-variant=${t.variant}
+              role=${t.variant === "error" ? "alert" : "status"}
+            >
+              <div class="body">
+                ${t.title ? html12`<div class="title">${t.title}</div>` : nothing11}
+                <div class="message">${t.message}</div>
+              </div>
+              <button
+                class="close"
+                part="close"
+                type="button"
+                aria-label="Dismiss notification"
+                @click=${() => this.dismiss(t.id)}
+              >
+                ✕
+              </button>
+            </div>
+          `
+    )}
+      </div>
+    `;
+  }
+};
+__decorateClass([
+  property14()
+], WmcpToast.prototype, "name", 2);
+__decorateClass([
+  property14()
+], WmcpToast.prototype, "label", 2);
+__decorateClass([
+  property14({ reflect: true })
+], WmcpToast.prototype, "placement", 2);
+__decorateClass([
+  property14({ type: Number })
+], WmcpToast.prototype, "duration", 2);
+__decorateClass([
+  state6()
+], WmcpToast.prototype, "toasts", 2);
+
+// src/register.ts
+var elements = [
+  WmcpInput,
+  WmcpTextarea,
+  WmcpSelect,
+  WmcpCheckbox,
+  WmcpRadio,
+  WmcpRadioGroup,
+  WmcpButton,
+  WmcpDialog,
+  WmcpMenu,
+  WmcpTabs,
+  WmcpPopover,
+  WmcpToast
 ];
 function defineComponents() {
   if (typeof customElements === "undefined") return;
@@ -1006,13 +2580,21 @@ function defineComponents() {
   }
 }
 export {
+  WmcpAction,
+  WmcpButton,
   WmcpCheckbox,
+  WmcpDialog,
+  WmcpExposable,
   WmcpFormControl,
   WmcpInput,
+  WmcpMenu,
+  WmcpPopover,
   WmcpRadio,
   WmcpRadioGroup,
   WmcpSelect,
+  WmcpTabs,
   WmcpTextarea,
+  WmcpToast,
   defineComponents,
   exposeTool,
   isStandardSchema,