@webmcpui/core 0.0.1

package/dist/index.js

@@ -0,0 +1,1002 @@
+import {
+  __decorateClass
+} from "./chunk-ADS4GRIL.js";
+
+// src/elements/form-control.ts
+import {
+  LitElement,
+  html,
+  css,
+  nothing
+} from "lit";
+import { property, state } from "lit/decorators.js";
+
+// src/standard-schema.ts
+async function validateStandard(schema, value) {
+  const result = await schema["~standard"].validate(value);
+  if (result.issues) {
+    return { valid: false, errors: result.issues.map((i) => i.message) };
+  }
+  return { valid: true, value: result.value, errors: [] };
+}
+function isStandardSchema(value) {
+  return typeof value === "object" && value !== null && "~standard" in value && typeof value["~standard"]?.validate === "function";
+}
+
+// src/webmcp.ts
+function getModelContext() {
+  const fromDocument = typeof document !== "undefined" ? document.modelContext : void 0;
+  const fromNavigator = typeof navigator !== "undefined" ? navigator.modelContext : void 0;
+  const mc = fromDocument ?? fromNavigator;
+  return mc && typeof mc.registerTool === "function" ? mc : void 0;
+}
+function isWebMCPAvailable() {
+  return getModelContext() !== void 0;
+}
+var isDevEnv = globalThis.process?.env?.NODE_ENV !== "production";
+var registeredToolNames = /* @__PURE__ */ new Set();
+function exposeTool(definition) {
+  const mc = getModelContext();
+  if (!mc?.registerTool) return () => {
+  };
+  const descriptor = {
+    name: definition.name,
+    description: definition.description,
+    inputSchema: definition.inputSchema ?? { type: "object", properties: {} },
+    execute: definition.execute
+  };
+  if (isDevEnv && registeredToolNames.has(descriptor.name)) {
+    console.warn(
+      `[webmcpui] A WebMCP tool named "${descriptor.name}" is already registered on this page. Tool names are page-global, so the host rejects the duplicate and this control won't be agent-callable. Give one control a unique \`name\`, or override it with \`tool-name\`.`
+    );
+  }
+  registeredToolNames.add(descriptor.name);
+  const controller = typeof AbortController === "function" ? new AbortController() : void 0;
+  const handle = mc.registerTool(
+    descriptor,
+    controller ? { signal: controller.signal } : void 0
+  );
+  let disposed = false;
+  return () => {
+    if (disposed) return;
+    disposed = true;
+    registeredToolNames.delete(descriptor.name);
+    try {
+      controller?.abort();
+      if (handle && typeof handle.unregister === "function") {
+        handle.unregister();
+      } else if (typeof mc.unregisterTool === "function") {
+        mc.unregisterTool(definition.name);
+      }
+    } catch {
+    }
+  };
+}
+
+// src/elements/form-control.ts
+var textFieldStyles = css`
+  .control {
+    box-sizing: border-box;
+    width: 100%;
+    padding: var(--input-padding-y, 0.5rem) var(--input-padding-x, 0.75rem);
+    font-family: inherit;
+    font-size: var(--input-font-size, 0.875rem);
+    line-height: var(--input-line-height, 1.25rem);
+    color: var(--input-text, var(--foreground, oklch(0.145 0 0)));
+    background: var(--input-bg, var(--background, oklch(1 0 0)));
+    border: var(--input-border-width, 1px) solid
+      var(--input-border, var(--input, oklch(0.922 0 0)));
+    border-radius: var(--input-radius, var(--radius, 0.625rem));
+    transition: border-color var(--input-transition-duration, 150ms)
+        var(--input-transition-easing, cubic-bezier(0.4, 0, 0.2, 1)),
+      box-shadow var(--input-transition-duration, 150ms)
+        var(--input-transition-easing, cubic-bezier(0.4, 0, 0.2, 1));
+  }
+  .control::placeholder {
+    color: var(--input-placeholder, var(--muted-foreground, oklch(0.556 0 0)));
+  }
+  .control:hover:not(:disabled) {
+    border-color: var(--input-border-hover, var(--border, oklch(0.922 0 0)));
+  }
+  .control:focus-visible {
+    outline: none;
+    border-color: var(--input-border-focus, var(--ring, oklch(0.708 0 0)));
+    box-shadow: 0 0 0 var(--ring-width, 3px)
+      color-mix(in oklch, var(--ring, oklch(0.708 0 0)) 40%, transparent);
+  }
+  .control:disabled {
+    color: var(--input-text-disabled, var(--muted-foreground, oklch(0.556 0 0)));
+    background: var(--input-bg-disabled, var(--muted, oklch(0.97 0 0)));
+    cursor: not-allowed;
+  }
+  :host([invalid]) .control {
+    border-color: var(
+      --input-border-error,
+      var(--destructive, oklch(0.577 0.245 27.325))
+    );
+  }
+`;
+var WmcpFormControl = class extends LitElement {
+  constructor() {
+    super(...arguments);
+    this.label = "";
+    this.name = "";
+    this.value = "";
+    this.placeholder = "";
+    this.required = false;
+    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;
+      this.toggleAttribute("invalid", true);
+    };
+  }
+  static {
+    this.formAssociated = true;
+  }
+  static {
+    // Shared by every control: host layout, label, and the message/error text.
+    // Text-field box styling lives in `textFieldStyles` (opted into by input /
+    // textarea / select) so non-text controls like checkbox don't inherit it.
+    this.styles = css`
+    :host {
+      display: inline-flex;
+      flex-direction: column;
+      gap: var(--input-gap-label, 0.375rem);
+      font-family: var(
+        --input-font-family,
+        ui-sans-serif,
+        system-ui,
+        sans-serif
+      );
+    }
+    :host([hidden]) {
+      display: none;
+    }
+    label {
+      font-size: var(--input-font-size-label, 0.875rem);
+      font-weight: var(--input-font-weight-label, 500);
+      color: var(--input-label, var(--foreground, oklch(0.145 0 0)));
+    }
+    .message {
+      font-size: var(--input-font-size-helper, 0.8125rem);
+    }
+    .helper {
+      color: var(--input-helper, var(--muted-foreground, oklch(0.556 0 0)));
+    }
+    .error {
+      color: var(
+        --input-error-text,
+        var(--destructive, oklch(0.577 0.245 27.325))
+      );
+    }
+  `;
+  }
+  /** Noun used in default tool names/descriptions when `name` is empty. */
+  get controlNoun() {
+    return "field";
+  }
+  /** The rendered control element (`<input>` / `<textarea>` / `<select>`). */
+  get control() {
+    return this.renderRoot?.querySelector("input, textarea, select") ?? null;
+  }
+  /** Id to point the control's `aria-describedby` at, if any. */
+  get describedBy() {
+    return this.error ? "wmcp-error" : this.helperText ? "wmcp-helper" : void 0;
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    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
+   * `value`; controls with a conditional contribution (e.g. an unchecked
+   * checkbox) override this and may return `null` to contribute nothing.
+   */
+  getFormValue() {
+    return this.value;
+  }
+  /** Push the current form value into ElementInternals. */
+  syncFormValue() {
+    this.internals.setFormValue(this.getFormValue());
+  }
+  /**
+   * The value passed to the schema validator. Defaults to the string `value`;
+   * boolean controls (checkbox) override to validate their checked state.
+   */
+  get validationValue() {
+    return this.value;
+  }
+  /**
+   * Whether the control counts as empty for the `required` constraint.
+   * Defaults to an empty string value; boolean controls (checkbox) override.
+   */
+  get isEmpty() {
+    return this.value === "";
+  }
+  /** Default message for the `required` constraint when none is provided. */
+  get requiredMessageDefault() {
+    return "This field is required.";
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this.removeEventListener("invalid", this.onInvalid);
+    this.toolDisposer();
+    this.toolDisposer = () => {
+    };
+  }
+  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();
+    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)
+        };
+      }
+    });
+  }
+  /**
+   * Apply the agent's tool arguments to component state. Defaults to treating
+   * `args.value` as the new string value; controls with a different shape
+   * (e.g. checkbox's `args.checked`) override this.
+   */
+  async applyAgentValue(args) {
+    const next = args.value;
+    await this.setValueFromAgent(next == null ? "" : String(next));
+  }
+  /** Human-readable current state, used in the tool's result message. */
+  stateDescription() {
+    return this.value;
+  }
+  /** JSON Schema for the WebMCP tool's args. Defaults to a single string. */
+  toolInputSchema() {
+    return {
+      type: "object",
+      properties: {
+        value: {
+          type: "string",
+          description: this.label || this.name || "The value to set."
+        }
+      },
+      required: ["value"]
+    };
+  }
+  /** Apply a value as if a user typed it: update, validate, announce. */
+  async setValueFromAgent(value) {
+    this.value = value;
+    await this.validate();
+    this.dispatchEvent(new Event("input", { bubbles: true, composed: true }));
+    this.dispatchEvent(new Event("change", { bubbles: true, composed: true }));
+  }
+  async onInput(event) {
+    this.value = event.target.value;
+    await this.validate();
+  }
+  /** Compute validity: the `required` constraint first, then the schema. */
+  async computeValidity() {
+    if (this.required && this.isEmpty) {
+      return {
+        valid: false,
+        message: this.requiredMessage || this.requiredMessageDefault,
+        flags: { valueMissing: true }
+      };
+    }
+    if (isStandardSchema(this.schema)) {
+      const outcome = await validateStandard(this.schema, this.validationValue);
+      if (!outcome.valid) {
+        return {
+          valid: false,
+          message: outcome.errors[0] ?? "Invalid value",
+          flags: { customError: true }
+        };
+      }
+    }
+    return { valid: true, message: "", flags: {} };
+  }
+  /**
+   * Validate and reflect the result to the form via ElementInternals.
+   *
+   * @param show When true (default, on interaction) the error is also made
+   *   visible. When false (on connect/reset) validity is set for
+   *   `form.checkValidity()` but the message stays hidden until the form is
+   *   actually reported (native-style — the `invalid` event reveals it).
+   */
+  async validate(show = true) {
+    const { valid, message, flags } = await this.computeValidity();
+    if (valid) {
+      this.internals.setValidity({});
+    } else {
+      this.internals.setValidity(flags, message, this.control ?? void 0);
+    }
+    if (show) {
+      this.error = valid ? "" : message;
+      this.toggleAttribute("invalid", !valid);
+    }
+    return valid;
+  }
+  /** Called by the form when it resets. */
+  formResetCallback() {
+    this.value = "";
+    this.error = "";
+    this.toggleAttribute("invalid", false);
+    void this.validate(false);
+  }
+  renderMessage() {
+    return this.error ? html`<span id="wmcp-error" class="message error" role="alert"
+          >${this.error}</span
+        >` : this.helperText ? html`<span id="wmcp-helper" class="message helper"
+            >${this.helperText}</span
+          >` : nothing;
+  }
+  render() {
+    return html`
+      ${this.label ? html`<label for="control">${this.label}</label>` : nothing}
+      ${this.renderControl()}
+      ${this.renderMessage()}
+    `;
+  }
+};
+__decorateClass([
+  property()
+], WmcpFormControl.prototype, "label", 2);
+__decorateClass([
+  property()
+], WmcpFormControl.prototype, "name", 2);
+__decorateClass([
+  property()
+], WmcpFormControl.prototype, "value", 2);
+__decorateClass([
+  property()
+], WmcpFormControl.prototype, "placeholder", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], WmcpFormControl.prototype, "required", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], WmcpFormControl.prototype, "disabled", 2);
+__decorateClass([
+  property({ attribute: "helper-text" })
+], WmcpFormControl.prototype, "helperText", 2);
+__decorateClass([
+  property({ 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 })
+], WmcpFormControl.prototype, "schema", 2);
+__decorateClass([
+  state()
+], WmcpFormControl.prototype, "error", 2);
+
+// src/elements/input.ts
+import { html as html2, css as css2, nothing as nothing2 } from "lit";
+import { property as property2 } from "lit/decorators.js";
+var WmcpInput = class extends WmcpFormControl {
+  constructor() {
+    super(...arguments);
+    this.type = "text";
+  }
+  static {
+    this.tagName = "wmcp-input";
+  }
+  static {
+    this.styles = [
+      WmcpFormControl.styles,
+      textFieldStyles,
+      css2`
+      .control {
+        height: var(--input-height-md, 2.25rem);
+      }
+    `
+    ];
+  }
+  get controlNoun() {
+    return "input";
+  }
+  toolInputSchema() {
+    const valueType = this.type === "number" ? "number" : "string";
+    return {
+      type: "object",
+      properties: {
+        value: {
+          type: valueType,
+          description: this.label || this.name || "The value to set."
+        }
+      },
+      required: ["value"]
+    };
+  }
+  renderControl() {
+    return html2`
+      <input
+        id="control"
+        class="control"
+        part="control"
+        .type=${this.type}
+        .value=${this.value}
+        placeholder=${this.placeholder || nothing2}
+        ?required=${this.required}
+        ?disabled=${this.disabled}
+        aria-invalid=${this.error ? "true" : "false"}
+        aria-describedby=${this.describedBy ?? nothing2}
+        @input=${this.onInput}
+      />
+    `;
+  }
+};
+__decorateClass([
+  property2()
+], WmcpInput.prototype, "type", 2);
+
+// src/elements/textarea.ts
+import { html as html3, css as css3, nothing as nothing3 } from "lit";
+import { property as property3 } from "lit/decorators.js";
+var WmcpTextarea = class extends WmcpFormControl {
+  constructor() {
+    super(...arguments);
+    this.rows = 3;
+  }
+  static {
+    this.tagName = "wmcp-textarea";
+  }
+  static {
+    this.styles = [
+      WmcpFormControl.styles,
+      textFieldStyles,
+      css3`
+      .control {
+        min-height: var(--textarea-min-height, 4.5rem);
+        resize: vertical;
+      }
+    `
+    ];
+  }
+  get controlNoun() {
+    return "textarea";
+  }
+  renderControl() {
+    return html3`
+      <textarea
+        id="control"
+        class="control"
+        part="control"
+        rows=${this.rows}
+        .value=${this.value}
+        placeholder=${this.placeholder || nothing3}
+        ?required=${this.required}
+        ?disabled=${this.disabled}
+        aria-invalid=${this.error ? "true" : "false"}
+        aria-describedby=${this.describedBy ?? nothing3}
+        @input=${this.onInput}
+      ></textarea>
+    `;
+  }
+};
+__decorateClass([
+  property3({ type: Number })
+], WmcpTextarea.prototype, "rows", 2);
+
+// src/elements/select.ts
+import { html as html4, css as css4, nothing as nothing4 } from "lit";
+import { property as property4, state as state2 } from "lit/decorators.js";
+import { repeat } from "lit/directives/repeat.js";
+function isGroup(item) {
+  return Array.isArray(item.options);
+}
+var WmcpSelect = class extends WmcpFormControl {
+  constructor() {
+    super(...arguments);
+    this.options = [];
+    this.resolvedOptions = [];
+  }
+  static {
+    this.tagName = "wmcp-select";
+  }
+  static {
+    this.styles = [
+      WmcpFormControl.styles,
+      textFieldStyles,
+      css4`
+      .control {
+        height: var(--input-height-md, 2.25rem);
+        cursor: pointer;
+      }
+      .control:disabled {
+        cursor: not-allowed;
+      }
+    `
+    ];
+  }
+  get controlNoun() {
+    return "select";
+  }
+  connectedCallback() {
+    this.syncOptions();
+    super.connectedCallback();
+    this.optionObserver = new MutationObserver(() => this.syncOptions());
+    this.optionObserver.observe(this, { childList: true, subtree: true });
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this.optionObserver?.disconnect();
+    this.optionObserver = void 0;
+  }
+  willUpdate(changed) {
+    if (changed.has("options")) this.syncOptions();
+  }
+  updated(changed) {
+    super.updated(changed);
+    if (this.expose && changed.has("resolvedOptions")) {
+      this.registerTool();
+    }
+  }
+  syncOptions() {
+    this.resolvedOptions = this.options.length > 0 ? this.options : this.readDeclarativeOptions();
+  }
+  readDeclarativeOptions() {
+    const toOption = (o) => ({
+      value: o.value,
+      label: o.textContent?.trim() || o.value,
+      disabled: o.disabled
+    });
+    const items = [];
+    for (const child of Array.from(this.children)) {
+      if (child instanceof HTMLOptGroupElement) {
+        items.push({
+          label: child.label,
+          options: Array.from(
+            child.querySelectorAll("option")
+          ).map(toOption)
+        });
+      } else if (child instanceof HTMLOptionElement) {
+        items.push(toOption(child));
+      }
+    }
+    return items;
+  }
+  /** All selectable options, flattened across groups. */
+  flatOptions() {
+    return this.resolvedOptions.flatMap(
+      (item) => isGroup(item) ? item.options : [item]
+    );
+  }
+  toolInputSchema() {
+    return {
+      type: "object",
+      properties: {
+        value: {
+          type: "string",
+          enum: this.flatOptions().map((o) => o.value),
+          description: this.label || this.name || "The option value to select."
+        }
+      },
+      required: ["value"]
+    };
+  }
+  renderOption(option) {
+    return html4`<option
+      value=${option.value}
+      ?disabled=${option.disabled ?? false}
+      ?selected=${option.value === this.value}
+    >
+      ${option.label}
+    </option>`;
+  }
+  renderControl() {
+    return html4`
+      <select
+        id="control"
+        class="control"
+        part="control"
+        ?required=${this.required}
+        ?disabled=${this.disabled}
+        aria-invalid=${this.error ? "true" : "false"}
+        aria-describedby=${this.describedBy ?? nothing4}
+        @change=${this.onInput}
+      >
+        ${this.placeholder ? html4`<option value="" disabled ?selected=${!this.value}>
+              ${this.placeholder}
+            </option>` : nothing4}
+        ${repeat(
+      this.resolvedOptions,
+      (item, i) => isGroup(item) ? `g:${item.label}:${i}` : `o:${item.value}`,
+      (item) => isGroup(item) ? html4`<optgroup label=${item.label}>
+                  ${item.options.map((o) => this.renderOption(o))}
+                </optgroup>` : this.renderOption(item)
+    )}
+      </select>
+    `;
+  }
+};
+__decorateClass([
+  property4({ attribute: false })
+], WmcpSelect.prototype, "options", 2);
+__decorateClass([
+  state2()
+], WmcpSelect.prototype, "resolvedOptions", 2);
+
+// src/elements/checkbox.ts
+import { html as html5, css as css5, nothing as nothing5 } from "lit";
+import { property as property5 } from "lit/decorators.js";
+var WmcpCheckbox = class extends WmcpFormControl {
+  constructor() {
+    super();
+    this.checked = false;
+    this.defaultChecked = false;
+    this.value = "on";
+  }
+  static {
+    this.tagName = "wmcp-checkbox";
+  }
+  static {
+    this.styles = [
+      WmcpFormControl.styles,
+      css5`
+      .row {
+        display: inline-flex;
+        align-items: center;
+        gap: var(--input-gap-icon, 0.5rem);
+        cursor: pointer;
+        font-weight: 400;
+      }
+      .row:has(.control:disabled) {
+        cursor: not-allowed;
+        color: var(
+          --input-text-disabled,
+          var(--muted-foreground, oklch(0.556 0 0))
+        );
+      }
+      .control {
+        box-sizing: border-box;
+        width: var(--checkbox-size, 1.05rem);
+        height: var(--checkbox-size, 1.05rem);
+        margin: 0;
+        accent-color: var(--checkbox-accent, var(--primary, oklch(0.205 0 0)));
+        cursor: inherit;
+      }
+      .control:focus-visible {
+        outline: none;
+        border-radius: 0.25rem;
+        box-shadow: 0 0 0 var(--ring-width, 3px)
+          color-mix(in oklch, var(--ring, oklch(0.708 0 0)) 40%, transparent);
+      }
+      .label-text {
+        font-size: var(--input-font-size, 0.875rem);
+        color: var(--input-text, var(--foreground, oklch(0.145 0 0)));
+      }
+    `
+    ];
+  }
+  get controlNoun() {
+    return "checkbox";
+  }
+  connectedCallback() {
+    this.defaultChecked = this.checked;
+    super.connectedCallback();
+  }
+  getFormValue() {
+    return this.checked ? this.value : null;
+  }
+  get validationValue() {
+    return this.checked;
+  }
+  get isEmpty() {
+    return !this.checked;
+  }
+  get requiredMessageDefault() {
+    return "Please check this box.";
+  }
+  toolInputSchema() {
+    return {
+      type: "object",
+      properties: {
+        checked: {
+          type: "boolean",
+          description: this.label || this.name || "Whether the box is checked."
+        }
+      },
+      required: ["checked"]
+    };
+  }
+  async applyAgentValue(args) {
+    this.checked = Boolean(args.checked);
+    await this.validate();
+    this.dispatchEvent(new Event("input", { bubbles: true, composed: true }));
+    this.dispatchEvent(new Event("change", { bubbles: true, composed: true }));
+  }
+  stateDescription() {
+    return this.checked ? "checked" : "unchecked";
+  }
+  formResetCallback() {
+    this.checked = this.defaultChecked;
+    this.error = "";
+    this.toggleAttribute("invalid", false);
+    void this.validate(false);
+  }
+  async onToggle(event) {
+    this.checked = event.target.checked;
+    await this.validate();
+  }
+  renderControl() {
+    return html5`
+      <input
+        id="control"
+        class="control"
+        part="control"
+        type="checkbox"
+        .checked=${this.checked}
+        ?required=${this.required}
+        ?disabled=${this.disabled}
+        aria-invalid=${this.error ? "true" : "false"}
+        aria-describedby=${this.describedBy ?? nothing5}
+        @change=${this.onToggle}
+      />
+    `;
+  }
+  render() {
+    return html5`
+      <label class="row">
+        ${this.renderControl()}
+        ${this.label ? html5`<span class="label-text">${this.label}</span>` : nothing5}
+      </label>
+      ${this.renderMessage()}
+    `;
+  }
+};
+__decorateClass([
+  property5({ type: Boolean, reflect: true })
+], WmcpCheckbox.prototype, "checked", 2);
+
+// src/elements/radio.ts
+import { html as html6, css as css6, nothing as nothing6 } from "lit";
+import { property as property6, state as state3 } from "lit/decorators.js";
+import { repeat as repeat2 } from "lit/directives/repeat.js";
+var groupCounter = 0;
+var WmcpRadio = class extends HTMLElement {
+  static {
+    this.tagName = "wmcp-radio";
+  }
+  get value() {
+    return this.getAttribute("value") ?? "";
+  }
+  get label() {
+    return this.getAttribute("label") ?? this.textContent?.trim() ?? "";
+  }
+  get disabled() {
+    return this.hasAttribute("disabled");
+  }
+  connectedCallback() {
+    this.style.display = "none";
+  }
+};
+var WmcpRadioGroup = class extends WmcpFormControl {
+  constructor() {
+    super(...arguments);
+    this.options = [];
+    this.resolvedOptions = [];
+    /** Internal name shared by the rendered inputs (groups them natively). */
+    this.groupName = `wmcp-radio-${++groupCounter}`;
+  }
+  static {
+    this.tagName = "wmcp-radio-group";
+  }
+  static {
+    this.styles = [
+      WmcpFormControl.styles,
+      css6`
+      .group-label {
+        font-size: var(--input-font-size-label, 0.875rem);
+        font-weight: var(--input-font-weight-label, 500);
+        color: var(--input-label, var(--foreground, oklch(0.145 0 0)));
+      }
+      .group {
+        display: flex;
+        flex-direction: column;
+        gap: var(--input-gap-label, 0.375rem);
+      }
+      .row {
+        display: inline-flex;
+        align-items: center;
+        gap: var(--input-gap-icon, 0.5rem);
+        cursor: pointer;
+        font-weight: 400;
+      }
+      .row:has(.control:disabled) {
+        cursor: not-allowed;
+        color: var(
+          --input-text-disabled,
+          var(--muted-foreground, oklch(0.556 0 0))
+        );
+      }
+      .control {
+        box-sizing: border-box;
+        width: var(--radio-size, 1.05rem);
+        height: var(--radio-size, 1.05rem);
+        margin: 0;
+        accent-color: var(--radio-accent, var(--primary, oklch(0.205 0 0)));
+        cursor: inherit;
+      }
+      .control:focus-visible {
+        outline: none;
+        border-radius: 50%;
+        box-shadow: 0 0 0 var(--ring-width, 3px)
+          color-mix(in oklch, var(--ring, oklch(0.708 0 0)) 40%, transparent);
+      }
+      .label-text {
+        font-size: var(--input-font-size, 0.875rem);
+        color: var(--input-text, var(--foreground, oklch(0.145 0 0)));
+      }
+    `
+    ];
+  }
+  get controlNoun() {
+    return "radio";
+  }
+  connectedCallback() {
+    this.syncOptions();
+    super.connectedCallback();
+    this.optionObserver = new MutationObserver(() => this.syncOptions());
+    this.optionObserver.observe(this, { childList: true, subtree: true });
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this.optionObserver?.disconnect();
+    this.optionObserver = void 0;
+  }
+  willUpdate(changed) {
+    if (changed.has("options")) this.syncOptions();
+  }
+  updated(changed) {
+    super.updated(changed);
+    if (this.expose && changed.has("resolvedOptions")) {
+      this.registerTool();
+    }
+  }
+  syncOptions() {
+    this.resolvedOptions = this.options.length > 0 ? this.options : this.readDeclarativeOptions();
+  }
+  readDeclarativeOptions() {
+    return Array.from(this.querySelectorAll(":scope > wmcp-radio")).map(
+      (el) => ({
+        value: el.getAttribute("value") ?? "",
+        label: el.getAttribute("label") ?? el.textContent?.trim() ?? "",
+        disabled: el.hasAttribute("disabled")
+      })
+    );
+  }
+  toolInputSchema() {
+    return {
+      type: "object",
+      properties: {
+        value: {
+          type: "string",
+          enum: this.resolvedOptions.map((o) => o.value),
+          description: this.label || this.name || "The option value to select."
+        }
+      },
+      required: ["value"]
+    };
+  }
+  async onSelect(event) {
+    this.value = event.target.value;
+    await this.validate();
+  }
+  renderControl() {
+    return html6`
+      <div
+        class="group"
+        role="radiogroup"
+        aria-labelledby=${this.label ? "group-label" : nothing6}
+        aria-describedby=${this.describedBy ?? nothing6}
+        aria-invalid=${this.error ? "true" : "false"}
+      >
+        ${repeat2(
+      this.resolvedOptions,
+      (o) => o.value,
+      (o) => html6`
+            <label class="row">
+              <input
+                type="radio"
+                class="control"
+                part="control"
+                name=${this.groupName}
+                value=${o.value}
+                ?disabled=${o.disabled ?? this.disabled}
+                .checked=${o.value === this.value}
+                @change=${this.onSelect}
+              />
+              <span class="label-text">${o.label}</span>
+            </label>
+          `
+    )}
+      </div>
+    `;
+  }
+  render() {
+    return html6`
+      ${this.label ? html6`<span id="group-label" class="group-label">${this.label}</span>` : nothing6}
+      ${this.renderControl()}
+      ${this.renderMessage()}
+    `;
+  }
+};
+__decorateClass([
+  property6({ attribute: false })
+], WmcpRadioGroup.prototype, "options", 2);
+__decorateClass([
+  state3()
+], WmcpRadioGroup.prototype, "resolvedOptions", 2);
+
+// src/register.ts
+var elements = [
+  WmcpInput,
+  WmcpTextarea,
+  WmcpSelect,
+  WmcpCheckbox,
+  WmcpRadio,
+  WmcpRadioGroup
+];
+function defineComponents() {
+  if (typeof customElements === "undefined") return;
+  for (const ctor of elements) {
+    if (!customElements.get(ctor.tagName)) {
+      customElements.define(ctor.tagName, ctor);
+    }
+  }
+}
+export {
+  WmcpCheckbox,
+  WmcpFormControl,
+  WmcpInput,
+  WmcpRadio,
+  WmcpRadioGroup,
+  WmcpSelect,
+  WmcpTextarea,
+  defineComponents,
+  exposeTool,
+  isStandardSchema,
+  isWebMCPAvailable,
+  textFieldStyles,
+  validateStandard
+};