@frontmcp/ui 0.5.1 → 0.6.0

package/web-components/index.js

@@ -0,0 +1,2093 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// libs/ui/src/web-components/index.ts
+var web_components_exports = {};
+__export(web_components_exports, {
+  FmcpAlert: () => FmcpAlert,
+  FmcpBadge: () => FmcpBadge,
+  FmcpButton: () => FmcpButton,
+  FmcpCard: () => FmcpCard,
+  FmcpElement: () => FmcpElement,
+  FmcpInput: () => FmcpInput,
+  FmcpSelect: () => FmcpSelect,
+  camelToKebab: () => camelToKebab,
+  getObservedAttributesFromSchema: () => getObservedAttributesFromSchema,
+  kebabToCamel: () => kebabToCamel,
+  mergeAttributeIntoOptions: () => mergeAttributeIntoOptions,
+  parseAttributeValue: () => parseAttributeValue,
+  registerAllComponents: () => registerAllComponents,
+  registerFmcpAlert: () => registerFmcpAlert,
+  registerFmcpBadge: () => registerFmcpBadge,
+  registerFmcpButton: () => registerFmcpButton,
+  registerFmcpCard: () => registerFmcpCard,
+  registerFmcpInput: () => registerFmcpInput,
+  registerFmcpSelect: () => registerFmcpSelect
+});
+module.exports = __toCommonJS(web_components_exports);
+
+// libs/ui/src/theme/platforms.ts
+var CLAUDE_PLATFORM = {
+  id: "claude",
+  name: "Claude (Artifacts)",
+  supportsWidgets: true,
+  supportsTailwind: true,
+  supportsHtmx: false,
+  // Network blocked, HTMX won't work for API calls
+  networkMode: "blocked",
+  scriptStrategy: "inline",
+  maxInlineSize: 100 * 1024,
+  // 100KB limit for artifacts
+  cspRestrictions: ["script-src 'unsafe-inline'", "connect-src 'none'"],
+  options: {
+    mode: "artifacts",
+    framework: "react"
+    // Claude artifacts prefer React
+  }
+};
+
+// libs/ui/src/utils/escape-html.ts
+function escapeHtml(str) {
+  if (str === null || str === void 0) {
+    return "";
+  }
+  const s = String(str);
+  return s.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#39;").replace(/\u2028/g, "\\u2028").replace(/\u2029/g, "\\u2029");
+}
+
+// libs/ui/src/validation/error-box.ts
+var errorIcon = `<svg class="w-5 h-5 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
+  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"/>
+</svg>`;
+function validationErrorBox(options) {
+  const { componentName, invalidParam } = options;
+  return `<div
+  class="validation-error flex items-start gap-3 p-4 bg-red-50 border border-red-200 text-red-800 rounded-lg"
+  role="alert"
+  data-testid="validation-error"
+  data-component="${escapeHtml(componentName)}"
+  data-param="${escapeHtml(invalidParam)}"
+>
+  ${errorIcon}
+  <div class="min-w-0">
+    <p class="font-semibold text-sm">${escapeHtml(componentName)}: Invalid Configuration</p>
+    <p class="text-sm opacity-90 mt-0.5">The "${escapeHtml(invalidParam)}" parameter is invalid.</p>
+  </div>
+</div>`;
+}
+
+// libs/ui/src/web-components/core/attribute-parser.ts
+function parseAttributeValue(attrName, value) {
+  if (attrName.startsWith("data-fmcp-")) {
+    return { key: null, value: void 0 };
+  }
+  if (attrName.startsWith("data-")) {
+    const dataKey = attrName.slice(5);
+    return {
+      key: dataKey,
+      value: value ?? "",
+      isData: true
+    };
+  }
+  const camelName = kebabToCamel(attrName);
+  if (value === null || value === "") {
+    return { key: camelName, value: true };
+  }
+  if (value === "true") {
+    return { key: camelName, value: true };
+  }
+  if (value === "false") {
+    return { key: camelName, value: false };
+  }
+  const numValue = Number(value);
+  if (!isNaN(numValue) && value.trim() !== "") {
+    return { key: camelName, value: numValue };
+  }
+  if (value.startsWith("{") || value.startsWith("[")) {
+    try {
+      return { key: camelName, value: JSON.parse(value) };
+    } catch {
+    }
+  }
+  return { key: camelName, value };
+}
+function kebabToCamel(str) {
+  return str.replace(/-([a-z])/g, (_, letter) => letter.toUpperCase());
+}
+function camelToKebab(str) {
+  return str.replace(/[A-Z]/g, (letter) => `-${letter.toLowerCase()}`);
+}
+function getObservedAttributesFromSchema(schema) {
+  const attributes = [];
+  const schemaAny = schema;
+  if (schemaAny.shape) {
+    for (const key of Object.keys(schemaAny.shape)) {
+      attributes.push(camelToKebab(key));
+    }
+  }
+  const commonAttrs = ["class", "id", "style"];
+  attributes.push(...commonAttrs);
+  return [...new Set(attributes)];
+}
+function mergeAttributeIntoOptions(options, parsed) {
+  if (parsed.key === null || parsed.value === void 0) {
+    return options;
+  }
+  const result = { ...options };
+  if (parsed.isData) {
+    const data = result["data"] ?? {};
+    data[parsed.key] = String(parsed.value);
+    result["data"] = data;
+  } else {
+    result[parsed.key] = parsed.value;
+  }
+  return result;
+}
+
+// libs/ui/src/web-components/core/base-element.ts
+var HTMLElementBase = typeof HTMLElement !== "undefined" ? HTMLElement : class {
+  innerHTML = "";
+  dispatchEvent() {
+    return true;
+  }
+  getAttribute() {
+    return null;
+  }
+};
+var FmcpElement = class extends HTMLElementBase {
+  /** Internal options state */
+  _options = {};
+  /** Content passed as children (captured on connect) */
+  _content = "";
+  /** Whether component has been connected to DOM */
+  _connected = false;
+  /** Whether a render is pending (for batching) */
+  _pendingRender = false;
+  /** Whether initial render has completed */
+  _initialRenderComplete = false;
+  // ============================================
+  // Lifecycle Callbacks
+  // ============================================
+  /**
+   * Called when element is added to DOM.
+   * Captures content, parses attributes, and renders.
+   *
+   * Supports SSR hydration via `data-ssr` attribute:
+   * - If `data-ssr` is present, content was pre-rendered by server
+   * - Web component adopts existing content without re-rendering
+   * - This enables progressive enhancement for LLM platforms
+   */
+  connectedCallback() {
+    this._connected = true;
+    const isHydrating = this.hasAttribute("data-ssr");
+    if (isHydrating) {
+      this._content = this.innerHTML;
+      this._initialRenderComplete = true;
+      this.removeAttribute("data-ssr");
+      this._parseAttributes();
+      return;
+    }
+    if (!this._initialRenderComplete) {
+      this._content = this.innerHTML;
+    }
+    this._parseAttributes();
+    this._render();
+  }
+  /**
+   * Called when element is removed from DOM.
+   */
+  disconnectedCallback() {
+    this._connected = false;
+  }
+  /**
+   * Called when an observed attribute changes.
+   * Updates options and schedules re-render.
+   */
+  attributeChangedCallback(name, oldValue, newValue) {
+    if (oldValue === newValue) return;
+    this._updateOptionFromAttribute(name, newValue);
+    this._scheduleRender();
+  }
+  // ============================================
+  // Property Accessors (React/Vue Compatibility)
+  // ============================================
+  /**
+   * Set all options at once (React pattern).
+   *
+   * @example
+   * ```typescript
+   * const el = document.querySelector('fmcp-button');
+   * el.options = { variant: 'danger', size: 'lg' };
+   * ```
+   */
+  set options(value) {
+    this._options = { ...this._options, ...value };
+    this._scheduleRender();
+  }
+  /**
+   * Get current options.
+   */
+  get options() {
+    return { ...this._options };
+  }
+  // ============================================
+  // Attribute Parsing
+  // ============================================
+  /**
+   * Parse all current attributes into options.
+   */
+  _parseAttributes() {
+    for (const attr of Array.from(this.attributes)) {
+      this._updateOptionFromAttribute(attr.name, attr.value);
+    }
+  }
+  /**
+   * Update a single option from an attribute change.
+   */
+  _updateOptionFromAttribute(attrName, value) {
+    const parsed = parseAttributeValue(attrName, value);
+    this._options = mergeAttributeIntoOptions(this._options, parsed);
+  }
+  // ============================================
+  // Rendering
+  // ============================================
+  /**
+   * Schedule a render on next microtask.
+   * Batches multiple attribute/property changes.
+   */
+  _scheduleRender() {
+    if (!this._connected || this._pendingRender) return;
+    this._pendingRender = true;
+    queueMicrotask(() => {
+      this._pendingRender = false;
+      if (this._connected) {
+        this._render();
+      }
+    });
+  }
+  /**
+   * Perform the actual render.
+   * Validates options and updates innerHTML.
+   */
+  _render() {
+    const mergedOptions = {
+      ...this.config.defaults,
+      ...this._options
+    };
+    const result = this.config.schema.safeParse(mergedOptions);
+    if (!result.success) {
+      const firstError = result.error.issues[0];
+      const invalidParam = firstError?.path.join(".") || "options";
+      this.innerHTML = validationErrorBox({
+        componentName: this.config.name,
+        invalidParam
+      });
+      this._initialRenderComplete = true;
+      return;
+    }
+    const html = this.renderHtml(result.data, this._content);
+    this.innerHTML = html;
+    this._initialRenderComplete = true;
+    this.dispatchEvent(
+      new CustomEvent("fmcp:render", {
+        bubbles: true,
+        detail: { options: result.data }
+      })
+    );
+  }
+  // ============================================
+  // Public API
+  // ============================================
+  /**
+   * Force an immediate re-render.
+   *
+   * @example
+   * ```typescript
+   * el.options = { loading: true };
+   * el.refresh(); // Force immediate render
+   * ```
+   */
+  refresh() {
+    if (this._connected) {
+      this._render();
+    }
+  }
+  /**
+   * Get the first child element (the actual rendered component).
+   *
+   * @typeParam T - Expected element type
+   * @returns The first child element or null
+   *
+   * @example
+   * ```typescript
+   * const button = el.getInnerElement<HTMLButtonElement>();
+   * button?.focus();
+   * ```
+   */
+  getInnerElement() {
+    return this.firstElementChild;
+  }
+  /**
+   * Update content and re-render.
+   *
+   * @param content - New content string
+   */
+  setContent(content) {
+    this._content = content;
+    this._scheduleRender();
+  }
+};
+
+// libs/ui/src/validation/wrapper.ts
+function getFirstInvalidPath(error) {
+  const firstError = error.issues[0];
+  if (!firstError || firstError.path.length === 0) {
+    return "options";
+  }
+  return firstError.path.map(String).join(".");
+}
+function validateOptions(options, config) {
+  const result = config.schema.safeParse(options);
+  if (result.success) {
+    return { success: true, data: result.data };
+  }
+  const invalidParam = getFirstInvalidPath(result.error);
+  return {
+    success: false,
+    error: validationErrorBox({
+      componentName: config.componentName,
+      invalidParam
+    })
+  };
+}
+
+// libs/ui/src/validation/schema-paths.ts
+var import_zod = require("zod");
+
+// libs/ui/src/components/button.schema.ts
+var import_zod2 = require("zod");
+var ButtonVariantSchema = import_zod2.z.enum(["primary", "secondary", "outline", "ghost", "danger", "success", "link"]);
+var ButtonSizeSchema = import_zod2.z.enum(["xs", "sm", "md", "lg", "xl"]);
+var ButtonOptionsSchema = import_zod2.z.object({
+  /** Button variant */
+  variant: ButtonVariantSchema.optional(),
+  /** Button size */
+  size: ButtonSizeSchema.optional(),
+  /** Button type attribute */
+  type: import_zod2.z.enum(["button", "submit", "reset"]).optional(),
+  /** Disabled state */
+  disabled: import_zod2.z.boolean().optional(),
+  /** Loading state */
+  loading: import_zod2.z.boolean().optional(),
+  /** Full width */
+  fullWidth: import_zod2.z.boolean().optional(),
+  /** Icon before text (HTML string) */
+  iconBefore: import_zod2.z.string().optional(),
+  /** Icon after text (HTML string) */
+  iconAfter: import_zod2.z.string().optional(),
+  /** Icon only (no text) */
+  iconOnly: import_zod2.z.boolean().optional(),
+  /** Additional CSS classes */
+  className: import_zod2.z.string().optional(),
+  /** Button ID */
+  id: import_zod2.z.string().optional(),
+  /** Name attribute */
+  name: import_zod2.z.string().optional(),
+  /** Value attribute */
+  value: import_zod2.z.string().optional(),
+  /** Click handler (URL for links) */
+  href: import_zod2.z.string().optional(),
+  /** Open in new tab */
+  target: import_zod2.z.enum(["_blank", "_self"]).optional(),
+  /** Data attributes */
+  data: import_zod2.z.record(import_zod2.z.string(), import_zod2.z.string()).optional(),
+  /** ARIA label */
+  ariaLabel: import_zod2.z.string().optional()
+}).strict();
+var ButtonGroupOptionsSchema = import_zod2.z.object({
+  /** Attach buttons visually */
+  attached: import_zod2.z.boolean().optional(),
+  /** Direction */
+  direction: import_zod2.z.enum(["horizontal", "vertical"]).optional(),
+  /** Gap between buttons */
+  gap: import_zod2.z.enum(["sm", "md", "lg"]).optional(),
+  /** Additional CSS classes */
+  className: import_zod2.z.string().optional()
+}).strict();
+
+// libs/ui/src/components/button.ts
+function getVariantClasses(variant) {
+  const variants = {
+    primary: "bg-primary hover:bg-primary/90 text-white shadow-sm",
+    secondary: "bg-secondary hover:bg-secondary/90 text-white shadow-sm",
+    outline: "border-2 border-primary text-primary hover:bg-primary/10",
+    ghost: "text-text-primary hover:bg-gray-100",
+    danger: "bg-danger hover:bg-danger/90 text-white shadow-sm",
+    success: "bg-success hover:bg-success/90 text-white shadow-sm",
+    link: "text-primary hover:text-primary/80 hover:underline"
+  };
+  return variants[variant];
+}
+function getSizeClasses(size, iconOnly) {
+  if (iconOnly) {
+    const iconSizes = {
+      xs: "p-1.5",
+      sm: "p-2",
+      md: "p-2.5",
+      lg: "p-3",
+      xl: "p-4"
+    };
+    return iconSizes[size];
+  }
+  const sizes = {
+    xs: "px-2.5 py-1.5 text-xs",
+    sm: "px-3 py-2 text-sm",
+    md: "px-4 py-2.5 text-sm",
+    lg: "px-5 py-3 text-base",
+    xl: "px-6 py-3.5 text-lg"
+  };
+  return sizes[size];
+}
+function sanitizeDataKey(key) {
+  const sanitized = key.toLowerCase().replace(/[^a-z0-9_-]/g, "-").replace(/-+/g, "-").replace(/^-|-$/g, "");
+  if (!sanitized) {
+    console.warn(`[frontmcp/ui] Dropping invalid data-* key: "${key}"`);
+    return null;
+  }
+  return sanitized;
+}
+var loadingSpinner = `<svg class="animate-spin -ml-1 mr-2 h-4 w-4" fill="none" viewBox="0 0 24 24">
+  <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
+  <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
+</svg>`;
+function isValidHrefProtocol(href) {
+  const trimmed = href.trim().toLowerCase();
+  return trimmed.startsWith("http://") || trimmed.startsWith("https://") || trimmed.startsWith("/") || trimmed.startsWith("#") || trimmed.startsWith("mailto:") || trimmed.startsWith("tel:");
+}
+function button(text, options = {}) {
+  const validation = validateOptions(options, {
+    schema: ButtonOptionsSchema,
+    componentName: "button"
+  });
+  if (!validation.success) {
+    return validation.error;
+  }
+  const validatedOptions = validation.data;
+  const {
+    variant = "primary",
+    size = "md",
+    type = "button",
+    disabled = false,
+    loading = false,
+    fullWidth = false,
+    iconBefore,
+    iconAfter,
+    iconOnly = false,
+    className = "",
+    id,
+    name,
+    value,
+    href,
+    target,
+    data,
+    ariaLabel
+  } = validatedOptions;
+  if (!iconOnly && !text.trim()) {
+    console.warn("[frontmcp/ui] Button has empty text. Consider providing text or using iconOnly with ariaLabel.");
+  }
+  if (iconOnly && !ariaLabel && !text.trim()) {
+    console.warn(
+      "[frontmcp/ui] iconOnly button requires non-empty text or ariaLabel for accessibility; control will have no label."
+    );
+  }
+  if (href && !isValidHrefProtocol(href)) {
+    console.warn(`[frontmcp/ui] Button href contains potentially dangerous protocol: "${href.slice(0, 20)}..."`);
+  }
+  const variantClasses = getVariantClasses(variant);
+  const sizeClasses = getSizeClasses(size, iconOnly);
+  const safeClassName = className ? escapeHtml(className) : "";
+  const baseClasses = [
+    "inline-flex items-center justify-center",
+    "font-medium",
+    "rounded-lg",
+    "transition-colors duration-200",
+    "focus:outline-none focus:ring-2 focus:ring-primary/50 focus:ring-offset-2",
+    disabled || loading ? "opacity-50 cursor-not-allowed" : "cursor-pointer",
+    fullWidth ? "w-full" : "",
+    variantClasses,
+    sizeClasses,
+    safeClassName
+  ].filter(Boolean).join(" ");
+  const dataAttrs = data ? Object.entries(data).map(([key, val]) => {
+    const safeKey = sanitizeDataKey(key);
+    return safeKey ? `data-${safeKey}="${escapeHtml(val)}"` : "";
+  }).filter(Boolean).join(" ") : "";
+  const idAttr = id ? `id="${escapeHtml(id)}"` : "";
+  const nameAttr = name ? `name="${escapeHtml(name)}"` : "";
+  const valueAttr = value ? `value="${escapeHtml(value)}"` : "";
+  const disabledAttr = disabled || loading ? "disabled" : "";
+  const targetAttr = target ? `target="${escapeHtml(target)}"` : "";
+  const relAttr = target === "_blank" ? 'rel="noopener noreferrer"' : "";
+  const trimmedText = text.trim();
+  const effectiveAriaLabel = ariaLabel ?? (iconOnly && trimmedText ? trimmedText : void 0);
+  const ariaLabelAttr = effectiveAriaLabel ? `aria-label="${escapeHtml(effectiveAriaLabel)}"` : "";
+  const iconBeforeHtml = iconBefore && !loading ? `<span class="${iconOnly ? "" : "mr-2"}">${iconBefore}</span>` : "";
+  const iconAfterHtml = iconAfter && !loading ? `<span class="${iconOnly ? "" : "ml-2"}">${iconAfter}</span>` : "";
+  const loadingHtml = loading ? loadingSpinner : "";
+  const textHtml = iconOnly ? "" : escapeHtml(text);
+  const contentHtml = `${loadingHtml}${iconBeforeHtml}${textHtml}${iconAfterHtml}`;
+  if (href && !disabled && !loading && isValidHrefProtocol(href)) {
+    return `<a href="${escapeHtml(
+      href
+    )}" class="${baseClasses}" ${idAttr} ${dataAttrs} ${ariaLabelAttr} ${targetAttr} ${relAttr}>
+      ${contentHtml}
+    </a>`;
+  }
+  return `<button type="${type}" class="${baseClasses}" ${idAttr} ${nameAttr} ${valueAttr} ${disabledAttr} ${dataAttrs} ${ariaLabelAttr}>
+    ${contentHtml}
+  </button>`;
+}
+
+// libs/ui/src/web-components/elements/fmcp-button.ts
+var FmcpButton = class extends FmcpElement {
+  config = {
+    name: "button",
+    schema: ButtonOptionsSchema,
+    defaults: {
+      variant: "primary",
+      size: "md",
+      type: "button"
+    }
+  };
+  /**
+   * Attributes to observe for changes.
+   */
+  static get observedAttributes() {
+    return getObservedAttributesFromSchema(ButtonOptionsSchema);
+  }
+  /**
+   * Render the button HTML using the button() function.
+   */
+  renderHtml(options, content) {
+    return button(content, options);
+  }
+  // ============================================
+  // Property Setters (Individual Props)
+  // ============================================
+  set variant(value) {
+    this._options.variant = value;
+    this._scheduleRender();
+  }
+  get variant() {
+    return this._options.variant;
+  }
+  set size(value) {
+    this._options.size = value;
+    this._scheduleRender();
+  }
+  get size() {
+    return this._options.size;
+  }
+  set type(value) {
+    this._options.type = value;
+    this._scheduleRender();
+  }
+  get type() {
+    return this._options.type;
+  }
+  set disabled(value) {
+    this._options.disabled = value;
+    this._scheduleRender();
+  }
+  get disabled() {
+    return this._options.disabled ?? false;
+  }
+  set loading(value) {
+    this._options.loading = value;
+    this._scheduleRender();
+  }
+  get loading() {
+    return this._options.loading ?? false;
+  }
+  set fullWidth(value) {
+    this._options.fullWidth = value;
+    this._scheduleRender();
+  }
+  get fullWidth() {
+    return this._options.fullWidth ?? false;
+  }
+  set iconOnly(value) {
+    this._options.iconOnly = value;
+    this._scheduleRender();
+  }
+  get iconOnly() {
+    return this._options.iconOnly ?? false;
+  }
+  set iconBefore(value) {
+    this._options.iconBefore = value;
+    this._scheduleRender();
+  }
+  get iconBefore() {
+    return this._options.iconBefore;
+  }
+  set iconAfter(value) {
+    this._options.iconAfter = value;
+    this._scheduleRender();
+  }
+  get iconAfter() {
+    return this._options.iconAfter;
+  }
+  set href(value) {
+    this._options.href = value;
+    this._scheduleRender();
+  }
+  get href() {
+    return this._options.href;
+  }
+  set buttonAriaLabel(value) {
+    this._options.ariaLabel = value;
+    this._scheduleRender();
+  }
+  get buttonAriaLabel() {
+    return this._options.ariaLabel;
+  }
+  // ============================================
+  // Event Forwarding
+  // ============================================
+  connectedCallback() {
+    super.connectedCallback();
+    this.addEventListener("click", this._handleClick.bind(this));
+  }
+  _handleClick(e) {
+    const innerButton = this.getInnerElement();
+    if (innerButton && (e.target === innerButton || innerButton.contains(e.target))) {
+      this.dispatchEvent(
+        new CustomEvent("fmcp:click", {
+          bubbles: true,
+          detail: { options: this.options }
+        })
+      );
+    }
+  }
+  // ============================================
+  // Public API
+  // ============================================
+  /**
+   * Focus the inner button element.
+   */
+  focus() {
+    const inner = this.getInnerElement();
+    inner?.focus();
+  }
+  /**
+   * Blur the inner button element.
+   */
+  blur() {
+    const inner = this.getInnerElement();
+    inner?.blur();
+  }
+  /**
+   * Click the inner button programmatically.
+   */
+  click() {
+    const inner = this.getInnerElement();
+    inner?.click();
+  }
+};
+function registerFmcpButton() {
+  if (typeof customElements !== "undefined" && !customElements.get("fmcp-button")) {
+    customElements.define("fmcp-button", FmcpButton);
+  }
+}
+
+// libs/ui/src/components/card.ts
+function getVariantClasses2(variant) {
+  const variants = {
+    default: "bg-white border border-border rounded-xl shadow-sm",
+    outlined: "bg-transparent border-2 border-border rounded-xl",
+    elevated: "bg-white rounded-xl shadow-lg",
+    filled: "bg-gray-50 rounded-xl",
+    ghost: "bg-transparent"
+  };
+  return variants[variant];
+}
+function getSizeClasses2(size) {
+  const sizes = {
+    sm: "p-4",
+    md: "p-6",
+    lg: "p-8"
+  };
+  return sizes[size];
+}
+function buildDataAttrs(data) {
+  if (!data) return "";
+  return Object.entries(data).map(([key, value]) => `data-${key}="${escapeHtml(value)}"`).join(" ");
+}
+function card(content, options = {}) {
+  const {
+    variant = "default",
+    size = "md",
+    title,
+    subtitle,
+    headerActions,
+    footer,
+    className = "",
+    id,
+    data,
+    clickable = false,
+    href
+  } = options;
+  const variantClasses = getVariantClasses2(variant);
+  const sizeClasses = getSizeClasses2(size);
+  const clickableClasses = clickable ? "cursor-pointer hover:shadow-md transition-shadow" : "";
+  const allClasses = [variantClasses, sizeClasses, clickableClasses, className].filter(Boolean).join(" ");
+  const dataAttrs = buildDataAttrs(data);
+  const idAttr = id ? `id="${escapeHtml(id)}"` : "";
+  const hasHeader = title || subtitle || headerActions;
+  const headerHtml = hasHeader ? `<div class="flex items-start justify-between mb-4">
+        <div>
+          ${title ? `<h3 class="text-lg font-semibold text-text-primary">${escapeHtml(title)}</h3>` : ""}
+          ${subtitle ? `<p class="text-sm text-text-secondary mt-1">${escapeHtml(subtitle)}</p>` : ""}
+        </div>
+        ${headerActions ? `<div class="flex items-center gap-2">${headerActions}</div>` : ""}
+      </div>` : "";
+  const footerHtml = footer ? `<div class="mt-4 pt-4 border-t border-divider">${footer}</div>` : "";
+  if (href) {
+    return `<a href="${escapeHtml(href)}" class="${allClasses}" ${idAttr} ${dataAttrs}>
+      ${headerHtml}
+      ${content}
+      ${footerHtml}
+    </a>`;
+  }
+  return `<div class="${allClasses}" ${idAttr} ${dataAttrs}>
+    ${headerHtml}
+    ${content}
+    ${footerHtml}
+  </div>`;
+}
+
+// libs/ui/src/components/card.schema.ts
+var import_zod3 = require("zod");
+var CardVariantSchema = import_zod3.z.enum(["default", "outlined", "elevated", "filled", "ghost"]);
+var CardSizeSchema = import_zod3.z.enum(["sm", "md", "lg"]);
+var CardOptionsSchema = import_zod3.z.object({
+  /** Card variant */
+  variant: CardVariantSchema.optional(),
+  /** Card size (padding) */
+  size: CardSizeSchema.optional(),
+  /** Card title */
+  title: import_zod3.z.string().optional(),
+  /** Card subtitle/description */
+  subtitle: import_zod3.z.string().optional(),
+  /** Header actions (HTML string) */
+  headerActions: import_zod3.z.string().optional(),
+  /** Footer content (HTML string) */
+  footer: import_zod3.z.string().optional(),
+  /** Additional CSS classes */
+  className: import_zod3.z.string().optional(),
+  /** Card ID */
+  id: import_zod3.z.string().optional(),
+  /** Data attributes */
+  data: import_zod3.z.record(import_zod3.z.string(), import_zod3.z.string()).optional(),
+  /** Clickable card (adds hover effects) */
+  clickable: import_zod3.z.boolean().optional(),
+  /** Click handler URL */
+  href: import_zod3.z.string().optional()
+}).strict();
+var CardGroupOptionsSchema = import_zod3.z.object({
+  /** Direction */
+  direction: import_zod3.z.enum(["horizontal", "vertical"]).optional(),
+  /** Gap between cards */
+  gap: import_zod3.z.enum(["sm", "md", "lg"]).optional(),
+  /** Additional CSS classes */
+  className: import_zod3.z.string().optional()
+}).strict();
+
+// libs/ui/src/web-components/elements/fmcp-card.ts
+var FmcpCard = class extends FmcpElement {
+  config = {
+    name: "card",
+    schema: CardOptionsSchema,
+    defaults: {
+      variant: "default",
+      size: "md"
+    }
+  };
+  static get observedAttributes() {
+    return getObservedAttributesFromSchema(CardOptionsSchema);
+  }
+  renderHtml(options, content) {
+    return card(content, options);
+  }
+  // Property setters
+  set variant(value) {
+    this._options.variant = value;
+    this._scheduleRender();
+  }
+  get variant() {
+    return this._options.variant;
+  }
+  set size(value) {
+    this._options.size = value;
+    this._scheduleRender();
+  }
+  get size() {
+    return this._options.size;
+  }
+  set cardTitle(value) {
+    this._options.title = value;
+    this._scheduleRender();
+  }
+  get cardTitle() {
+    return this._options.title;
+  }
+  set subtitle(value) {
+    this._options.subtitle = value;
+    this._scheduleRender();
+  }
+  get subtitle() {
+    return this._options.subtitle;
+  }
+  set clickable(value) {
+    this._options.clickable = value;
+    this._scheduleRender();
+  }
+  get clickable() {
+    return this._options.clickable ?? false;
+  }
+  set href(value) {
+    this._options.href = value;
+    this._scheduleRender();
+  }
+  get href() {
+    return this._options.href;
+  }
+  set footer(value) {
+    this._options.footer = value;
+    this._scheduleRender();
+  }
+  get footer() {
+    return this._options.footer;
+  }
+  set headerActions(value) {
+    this._options.headerActions = value;
+    this._scheduleRender();
+  }
+  get headerActions() {
+    return this._options.headerActions;
+  }
+};
+function registerFmcpCard() {
+  if (typeof customElements !== "undefined" && !customElements.get("fmcp-card")) {
+    customElements.define("fmcp-card", FmcpCard);
+  }
+}
+
+// libs/ui/src/components/alert.ts
+var alertIcons = {
+  info: `<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
+  </svg>`,
+  success: `<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/>
+  </svg>`,
+  warning: `<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"/>
+  </svg>`,
+  danger: `<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z"/>
+  </svg>`,
+  neutral: `<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
+  </svg>`
+};
+function getVariantClasses3(variant) {
+  const variants = {
+    info: {
+      container: "bg-blue-50 border-blue-200 text-blue-800",
+      icon: "text-blue-500"
+    },
+    success: {
+      container: "bg-success/10 border-success/30 text-success",
+      icon: "text-success"
+    },
+    warning: {
+      container: "bg-warning/10 border-warning/30 text-warning",
+      icon: "text-warning"
+    },
+    danger: {
+      container: "bg-danger/10 border-danger/30 text-danger",
+      icon: "text-danger"
+    },
+    neutral: {
+      container: "bg-gray-50 border-gray-200 text-gray-800",
+      icon: "text-gray-500"
+    }
+  };
+  return variants[variant];
+}
+function alert(message, options = {}) {
+  const { variant = "info", title, showIcon = true, icon, dismissible = false, className = "", id, actions } = options;
+  const variantClasses = getVariantClasses3(variant);
+  const baseClasses = ["rounded-lg border p-4", variantClasses.container, className].filter(Boolean).join(" ");
+  const iconHtml = showIcon ? `<div class="flex-shrink-0 ${variantClasses.icon}">
+        ${icon || alertIcons[variant]}
+      </div>` : "";
+  const titleHtml = title ? `<h3 class="font-semibold">${escapeHtml(title)}</h3>` : "";
+  const dismissHtml = dismissible ? `<button
+        type="button"
+        class="flex-shrink-0 ml-auto -mr-1 -mt-1 p-1 rounded hover:bg-black/5 transition-colors"
+        onclick="this.closest('.alert').remove()"
+        aria-label="Dismiss"
+      >
+        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
+        </svg>
+      </button>` : "";
+  const actionsHtml = actions ? `<div class="mt-3">${actions}</div>` : "";
+  const idAttr = id ? `id="${escapeHtml(id)}"` : "";
+  return `<div class="alert ${baseClasses}" role="alert" ${idAttr}>
+    <div class="flex gap-3">
+      ${iconHtml}
+      <div class="flex-1">
+        ${titleHtml}
+        <div class="${title ? "mt-1" : ""}">${escapeHtml(message)}</div>
+        ${actionsHtml}
+      </div>
+      ${dismissHtml}
+    </div>
+  </div>`;
+}
+
+// libs/ui/src/components/alert.schema.ts
+var import_zod4 = require("zod");
+var AlertVariantSchema = import_zod4.z.enum(["info", "success", "warning", "danger", "neutral"]);
+var AlertOptionsSchema = import_zod4.z.object({
+  /** Alert variant */
+  variant: AlertVariantSchema.optional(),
+  /** Alert title */
+  title: import_zod4.z.string().optional(),
+  /** Show icon */
+  showIcon: import_zod4.z.boolean().optional(),
+  /** Custom icon (HTML string, overrides default) */
+  icon: import_zod4.z.string().optional(),
+  /** Dismissible alert */
+  dismissible: import_zod4.z.boolean().optional(),
+  /** Additional CSS classes */
+  className: import_zod4.z.string().optional(),
+  /** Alert ID */
+  id: import_zod4.z.string().optional(),
+  /** Actions (HTML string for buttons) */
+  actions: import_zod4.z.string().optional()
+}).strict();
+var ToastPositionSchema = import_zod4.z.enum([
+  "top-right",
+  "top-left",
+  "bottom-right",
+  "bottom-left",
+  "top-center",
+  "bottom-center"
+]);
+var ToastOptionsSchema = import_zod4.z.object({
+  /** Toast variant */
+  variant: AlertVariantSchema.optional(),
+  /** Toast title */
+  title: import_zod4.z.string().optional(),
+  /** Duration in ms (0 = no auto-dismiss) */
+  duration: import_zod4.z.number().min(0).optional(),
+  /** Position */
+  position: ToastPositionSchema.optional(),
+  /** Toast ID */
+  id: import_zod4.z.string().optional()
+}).strict();
+
+// libs/ui/src/web-components/elements/fmcp-alert.ts
+var FmcpAlert = class extends FmcpElement {
+  config = {
+    name: "alert",
+    schema: AlertOptionsSchema,
+    defaults: {
+      variant: "info",
+      showIcon: true
+    }
+  };
+  static get observedAttributes() {
+    return getObservedAttributesFromSchema(AlertOptionsSchema);
+  }
+  renderHtml(options, content) {
+    return alert(content, options);
+  }
+  // Property setters
+  set variant(value) {
+    this._options.variant = value;
+    this._scheduleRender();
+  }
+  get variant() {
+    return this._options.variant;
+  }
+  set alertTitle(value) {
+    this._options.title = value;
+    this._scheduleRender();
+  }
+  get alertTitle() {
+    return this._options.title;
+  }
+  set showIcon(value) {
+    this._options.showIcon = value;
+    this._scheduleRender();
+  }
+  get showIcon() {
+    return this._options.showIcon ?? true;
+  }
+  set dismissible(value) {
+    this._options.dismissible = value;
+    this._scheduleRender();
+  }
+  get dismissible() {
+    return this._options.dismissible ?? false;
+  }
+  set actions(value) {
+    this._options.actions = value;
+    this._scheduleRender();
+  }
+  get actions() {
+    return this._options.actions;
+  }
+};
+function registerFmcpAlert() {
+  if (typeof customElements !== "undefined" && !customElements.get("fmcp-alert")) {
+    customElements.define("fmcp-alert", FmcpAlert);
+  }
+}
+
+// libs/ui/src/components/badge.ts
+function getVariantClasses4(variant) {
+  const variants = {
+    default: "bg-gray-100 text-gray-800",
+    primary: "bg-primary/10 text-primary",
+    secondary: "bg-secondary/10 text-secondary",
+    success: "bg-success/10 text-success",
+    warning: "bg-warning/10 text-warning",
+    danger: "bg-danger/10 text-danger",
+    info: "bg-blue-100 text-blue-800",
+    outline: "border border-border text-text-primary bg-transparent"
+  };
+  return variants[variant];
+}
+function getSizeClasses3(size, dot) {
+  if (dot) {
+    const dotSizes = {
+      sm: "w-2 h-2",
+      md: "w-2.5 h-2.5",
+      lg: "w-3 h-3"
+    };
+    return dotSizes[size];
+  }
+  const sizes = {
+    sm: "px-2 py-0.5 text-xs",
+    md: "px-2.5 py-1 text-xs",
+    lg: "px-3 py-1.5 text-sm"
+  };
+  return sizes[size];
+}
+function badge(text, options = {}) {
+  const {
+    variant = "default",
+    size = "md",
+    pill = false,
+    icon,
+    dot = false,
+    className = "",
+    removable = false
+  } = options;
+  if (dot) {
+    const dotVariants = {
+      default: "bg-gray-400",
+      primary: "bg-primary",
+      secondary: "bg-secondary",
+      success: "bg-success",
+      warning: "bg-warning",
+      danger: "bg-danger",
+      info: "bg-blue-500",
+      outline: "border border-current"
+    };
+    const dotClasses = ["inline-block rounded-full", getSizeClasses3(size, true), dotVariants[variant], className].filter(Boolean).join(" ");
+    return `<span class="${dotClasses}" aria-label="${escapeHtml(text)}" title="${escapeHtml(text)}"></span>`;
+  }
+  const variantClasses = getVariantClasses4(variant);
+  const sizeClasses = getSizeClasses3(size, false);
+  const baseClasses = [
+    "inline-flex items-center font-medium",
+    pill ? "rounded-full" : "rounded-md",
+    variantClasses,
+    sizeClasses,
+    className
+  ].filter(Boolean).join(" ");
+  const iconHtml = icon ? `<span class="mr-1">${icon}</span>` : "";
+  const removeHtml = removable ? `<button
+        type="button"
+        class="ml-1.5 -mr-1 hover:opacity-70 transition-opacity"
+        onclick="this.parentElement.remove()"
+        aria-label="Remove"
+      >
+        <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
+        </svg>
+      </button>` : "";
+  return `<span class="${baseClasses}">
+    ${iconHtml}${escapeHtml(text)}${removeHtml}
+  </span>`;
+}
+
+// libs/ui/src/components/badge.schema.ts
+var import_zod5 = require("zod");
+var BadgeVariantSchema = import_zod5.z.enum([
+  "default",
+  "primary",
+  "secondary",
+  "success",
+  "warning",
+  "danger",
+  "info",
+  "outline"
+]);
+var BadgeSizeSchema = import_zod5.z.enum(["sm", "md", "lg"]);
+var BadgeOptionsSchema = import_zod5.z.object({
+  /** Badge variant */
+  variant: BadgeVariantSchema.optional(),
+  /** Badge size */
+  size: BadgeSizeSchema.optional(),
+  /** Rounded pill style */
+  pill: import_zod5.z.boolean().optional(),
+  /** Icon before text (HTML string) */
+  icon: import_zod5.z.string().optional(),
+  /** Dot indicator (no text) */
+  dot: import_zod5.z.boolean().optional(),
+  /** Additional CSS classes */
+  className: import_zod5.z.string().optional(),
+  /** Removable badge */
+  removable: import_zod5.z.boolean().optional()
+}).strict();
+var BadgeGroupOptionsSchema = import_zod5.z.object({
+  /** Gap between badges */
+  gap: import_zod5.z.enum(["sm", "md", "lg"]).optional(),
+  /** Additional CSS classes */
+  className: import_zod5.z.string().optional()
+}).strict();
+
+// libs/ui/src/web-components/elements/fmcp-badge.ts
+var FmcpBadge = class extends FmcpElement {
+  config = {
+    name: "badge",
+    schema: BadgeOptionsSchema,
+    defaults: {
+      variant: "default",
+      size: "md"
+    }
+  };
+  static get observedAttributes() {
+    return getObservedAttributesFromSchema(BadgeOptionsSchema);
+  }
+  renderHtml(options, content) {
+    return badge(content, options);
+  }
+  // Property setters
+  set variant(value) {
+    this._options.variant = value;
+    this._scheduleRender();
+  }
+  get variant() {
+    return this._options.variant;
+  }
+  set size(value) {
+    this._options.size = value;
+    this._scheduleRender();
+  }
+  get size() {
+    return this._options.size;
+  }
+  set pill(value) {
+    this._options.pill = value;
+    this._scheduleRender();
+  }
+  get pill() {
+    return this._options.pill ?? false;
+  }
+  set dot(value) {
+    this._options.dot = value;
+    this._scheduleRender();
+  }
+  get dot() {
+    return this._options.dot ?? false;
+  }
+  set removable(value) {
+    this._options.removable = value;
+    this._scheduleRender();
+  }
+  get removable() {
+    return this._options.removable ?? false;
+  }
+  set icon(value) {
+    this._options.icon = value;
+    this._scheduleRender();
+  }
+  get icon() {
+    return this._options.icon;
+  }
+};
+function registerFmcpBadge() {
+  if (typeof customElements !== "undefined" && !customElements.get("fmcp-badge")) {
+    customElements.define("fmcp-badge", FmcpBadge);
+  }
+}
+
+// libs/ui/src/components/form.ts
+function getInputSizeClasses(size) {
+  const sizes = {
+    sm: "px-3 py-1.5 text-sm",
+    md: "px-4 py-2.5 text-sm",
+    lg: "px-5 py-3 text-base"
+  };
+  return sizes[size];
+}
+function getInputStateClasses(state) {
+  const states = {
+    default: "border-border focus:border-primary focus:ring-primary/20",
+    error: "border-danger focus:border-danger focus:ring-danger/20",
+    success: "border-success focus:border-success focus:ring-success/20",
+    warning: "border-warning focus:border-warning focus:ring-warning/20"
+  };
+  return states[state];
+}
+function buildDataAttrs2(data) {
+  if (!data) return "";
+  return Object.entries(data).map(([key, value]) => `data-${key}="${escapeHtml(value)}"`).join(" ");
+}
+function input(options) {
+  const {
+    type = "text",
+    name,
+    id = name,
+    value = "",
+    placeholder = "",
+    label,
+    helper,
+    error,
+    size = "md",
+    state = error ? "error" : "default",
+    required = false,
+    disabled = false,
+    readonly = false,
+    autocomplete,
+    pattern,
+    min,
+    max,
+    step,
+    className = "",
+    data,
+    iconBefore,
+    iconAfter
+  } = options;
+  const sizeClasses = getInputSizeClasses(size);
+  const stateClasses = getInputStateClasses(state);
+  const hasIcon = iconBefore || iconAfter;
+  const baseClasses = [
+    "w-full rounded-lg border bg-white",
+    "transition-colors duration-200",
+    "focus:outline-none focus:ring-2",
+    disabled ? "opacity-50 cursor-not-allowed bg-gray-50" : "",
+    sizeClasses,
+    stateClasses,
+    hasIcon ? (iconBefore ? "pl-10" : "") + (iconAfter ? " pr-10" : "") : "",
+    className
+  ].filter(Boolean).join(" ");
+  const dataAttrs = buildDataAttrs2(data);
+  const inputAttrs = [
+    `type="${type}"`,
+    `name="${escapeHtml(name)}"`,
+    `id="${escapeHtml(id)}"`,
+    value ? `value="${escapeHtml(value)}"` : "",
+    placeholder ? `placeholder="${escapeHtml(placeholder)}"` : "",
+    required ? "required" : "",
+    disabled ? "disabled" : "",
+    readonly ? "readonly" : "",
+    autocomplete ? `autocomplete="${escapeHtml(autocomplete)}"` : "",
+    pattern ? `pattern="${escapeHtml(pattern)}"` : "",
+    min !== void 0 ? `min="${escapeHtml(String(min))}"` : "",
+    max !== void 0 ? `max="${escapeHtml(String(max))}"` : "",
+    step !== void 0 ? `step="${escapeHtml(String(step))}"` : "",
+    `class="${baseClasses}"`,
+    dataAttrs
+  ].filter(Boolean).join(" ");
+  const labelHtml = label ? `<label for="${escapeHtml(id)}" class="block text-sm font-medium text-text-primary mb-1.5">
+        ${escapeHtml(label)}${required ? '<span class="text-danger ml-1">*</span>' : ""}
+      </label>` : "";
+  const helperHtml = helper && !error ? `<p class="mt-1.5 text-sm text-text-secondary">${escapeHtml(helper)}</p>` : "";
+  const errorHtml = error ? `<p class="mt-1.5 text-sm text-danger">${escapeHtml(error)}</p>` : "";
+  const iconBeforeHtml = iconBefore ? `<span class="absolute left-3 top-1/2 -translate-y-1/2 text-text-secondary">${iconBefore}</span>` : "";
+  const iconAfterHtml = iconAfter ? `<span class="absolute right-3 top-1/2 -translate-y-1/2 text-text-secondary">${iconAfter}</span>` : "";
+  const inputHtml = hasIcon ? `<div class="relative">
+        ${iconBeforeHtml}
+        <input ${inputAttrs}>
+        ${iconAfterHtml}
+      </div>` : `<input ${inputAttrs}>`;
+  return `<div class="form-field">
+    ${labelHtml}
+    ${inputHtml}
+    ${helperHtml}
+    ${errorHtml}
+  </div>`;
+}
+function select(options) {
+  const {
+    name,
+    id = name,
+    options: selectOptions,
+    value,
+    label,
+    helper,
+    error,
+    size = "md",
+    state = error ? "error" : "default",
+    required = false,
+    disabled = false,
+    multiple = false,
+    className = "",
+    data
+  } = options;
+  const sizeClasses = getInputSizeClasses(size);
+  const stateClasses = getInputStateClasses(state);
+  const baseClasses = [
+    "w-full rounded-lg border bg-white",
+    "transition-colors duration-200",
+    "focus:outline-none focus:ring-2",
+    disabled ? "opacity-50 cursor-not-allowed bg-gray-50" : "",
+    sizeClasses,
+    stateClasses,
+    className
+  ].filter(Boolean).join(" ");
+  const dataAttrs = buildDataAttrs2(data);
+  const optionsHtml = selectOptions.map((opt) => {
+    const selected = opt.selected || opt.value === value ? "selected" : "";
+    const optDisabled = opt.disabled ? "disabled" : "";
+    return `<option value="${escapeHtml(opt.value)}" ${selected} ${optDisabled}>${escapeHtml(opt.label)}</option>`;
+  }).join("\n");
+  const labelHtml = label ? `<label for="${escapeHtml(id)}" class="block text-sm font-medium text-text-primary mb-1.5">
+        ${escapeHtml(label)}${required ? '<span class="text-danger ml-1">*</span>' : ""}
+      </label>` : "";
+  const helperHtml = helper && !error ? `<p class="mt-1.5 text-sm text-text-secondary">${escapeHtml(helper)}</p>` : "";
+  const errorHtml = error ? `<p class="mt-1.5 text-sm text-danger">${escapeHtml(error)}</p>` : "";
+  return `<div class="form-field">
+    ${labelHtml}
+    <select
+      name="${escapeHtml(name)}"
+      id="${escapeHtml(id)}"
+      class="${baseClasses}"
+      ${required ? "required" : ""}
+      ${disabled ? "disabled" : ""}
+      ${multiple ? "multiple" : ""}
+      ${dataAttrs}
+    >
+      ${optionsHtml}
+    </select>
+    ${helperHtml}
+    ${errorHtml}
+  </div>`;
+}
+
+// libs/ui/src/components/form.schema.ts
+var import_zod6 = require("zod");
+var InputTypeSchema = import_zod6.z.enum([
+  "text",
+  "email",
+  "password",
+  "number",
+  "tel",
+  "url",
+  "search",
+  "date",
+  "time",
+  "datetime-local",
+  "hidden"
+]);
+var InputSizeSchema = import_zod6.z.enum(["sm", "md", "lg"]);
+var InputStateSchema = import_zod6.z.enum(["default", "error", "success", "warning"]);
+var InputOptionsSchema = import_zod6.z.object({
+  /** Input type */
+  type: InputTypeSchema.optional(),
+  /** Input name (required) */
+  name: import_zod6.z.string(),
+  /** Input ID (defaults to name) */
+  id: import_zod6.z.string().optional(),
+  /** Input value */
+  value: import_zod6.z.string().optional(),
+  /** Placeholder text */
+  placeholder: import_zod6.z.string().optional(),
+  /** Label text */
+  label: import_zod6.z.string().optional(),
+  /** Helper text */
+  helper: import_zod6.z.string().optional(),
+  /** Error message */
+  error: import_zod6.z.string().optional(),
+  /** Input size */
+  size: InputSizeSchema.optional(),
+  /** Input state */
+  state: InputStateSchema.optional(),
+  /** Required field */
+  required: import_zod6.z.boolean().optional(),
+  /** Disabled state */
+  disabled: import_zod6.z.boolean().optional(),
+  /** Readonly state */
+  readonly: import_zod6.z.boolean().optional(),
+  /** Autocomplete attribute */
+  autocomplete: import_zod6.z.string().optional(),
+  /** Pattern for validation */
+  pattern: import_zod6.z.string().optional(),
+  /** Min value (for number/date) */
+  min: import_zod6.z.union([import_zod6.z.string(), import_zod6.z.number()]).optional(),
+  /** Max value (for number/date) */
+  max: import_zod6.z.union([import_zod6.z.string(), import_zod6.z.number()]).optional(),
+  /** Step value (for number) */
+  step: import_zod6.z.union([import_zod6.z.string(), import_zod6.z.number()]).optional(),
+  /** Additional CSS classes */
+  className: import_zod6.z.string().optional(),
+  /** Data attributes */
+  data: import_zod6.z.record(import_zod6.z.string(), import_zod6.z.string()).optional(),
+  /** Icon before input (HTML string) */
+  iconBefore: import_zod6.z.string().optional(),
+  /** Icon after input (HTML string) */
+  iconAfter: import_zod6.z.string().optional()
+}).strict();
+var SelectOptionItemSchema = import_zod6.z.object({
+  value: import_zod6.z.string(),
+  label: import_zod6.z.string(),
+  disabled: import_zod6.z.boolean().optional(),
+  selected: import_zod6.z.boolean().optional()
+}).strict();
+var SelectOptionsSchema = import_zod6.z.object({
+  /** Input name (required) */
+  name: import_zod6.z.string(),
+  /** Input ID (defaults to name) */
+  id: import_zod6.z.string().optional(),
+  /** Input value */
+  value: import_zod6.z.string().optional(),
+  /** Placeholder text */
+  placeholder: import_zod6.z.string().optional(),
+  /** Label text */
+  label: import_zod6.z.string().optional(),
+  /** Helper text */
+  helper: import_zod6.z.string().optional(),
+  /** Error message */
+  error: import_zod6.z.string().optional(),
+  /** Input size */
+  size: InputSizeSchema.optional(),
+  /** Input state */
+  state: InputStateSchema.optional(),
+  /** Required field */
+  required: import_zod6.z.boolean().optional(),
+  /** Disabled state */
+  disabled: import_zod6.z.boolean().optional(),
+  /** Readonly state */
+  readonly: import_zod6.z.boolean().optional(),
+  /** Additional CSS classes */
+  className: import_zod6.z.string().optional(),
+  /** Data attributes */
+  data: import_zod6.z.record(import_zod6.z.string(), import_zod6.z.string()).optional(),
+  /** Icon before input (HTML string) */
+  iconBefore: import_zod6.z.string().optional(),
+  /** Icon after input (HTML string) */
+  iconAfter: import_zod6.z.string().optional(),
+  /** Select options (required) */
+  options: import_zod6.z.array(SelectOptionItemSchema),
+  /** Multiple selection */
+  multiple: import_zod6.z.boolean().optional()
+}).strict();
+var TextareaResizeSchema = import_zod6.z.enum(["none", "vertical", "horizontal", "both"]);
+var TextareaOptionsSchema = import_zod6.z.object({
+  /** Input name (required) */
+  name: import_zod6.z.string(),
+  /** Input ID (defaults to name) */
+  id: import_zod6.z.string().optional(),
+  /** Input value */
+  value: import_zod6.z.string().optional(),
+  /** Placeholder text */
+  placeholder: import_zod6.z.string().optional(),
+  /** Label text */
+  label: import_zod6.z.string().optional(),
+  /** Helper text */
+  helper: import_zod6.z.string().optional(),
+  /** Error message */
+  error: import_zod6.z.string().optional(),
+  /** Input size */
+  size: InputSizeSchema.optional(),
+  /** Input state */
+  state: InputStateSchema.optional(),
+  /** Required field */
+  required: import_zod6.z.boolean().optional(),
+  /** Disabled state */
+  disabled: import_zod6.z.boolean().optional(),
+  /** Readonly state */
+  readonly: import_zod6.z.boolean().optional(),
+  /** Autocomplete attribute */
+  autocomplete: import_zod6.z.string().optional(),
+  /** Additional CSS classes */
+  className: import_zod6.z.string().optional(),
+  /** Data attributes */
+  data: import_zod6.z.record(import_zod6.z.string(), import_zod6.z.string()).optional(),
+  /** Icon before input (HTML string) */
+  iconBefore: import_zod6.z.string().optional(),
+  /** Icon after input (HTML string) */
+  iconAfter: import_zod6.z.string().optional(),
+  /** Number of rows */
+  rows: import_zod6.z.number().min(1).optional(),
+  /** Resize behavior */
+  resize: TextareaResizeSchema.optional()
+}).strict();
+var CheckboxOptionsSchema = import_zod6.z.object({
+  /** Input name (required) */
+  name: import_zod6.z.string(),
+  /** Input ID */
+  id: import_zod6.z.string().optional(),
+  /** Input value */
+  value: import_zod6.z.string().optional(),
+  /** Label text (required) */
+  label: import_zod6.z.string(),
+  /** Checked state */
+  checked: import_zod6.z.boolean().optional(),
+  /** Disabled state */
+  disabled: import_zod6.z.boolean().optional(),
+  /** Helper text */
+  helper: import_zod6.z.string().optional(),
+  /** Error message */
+  error: import_zod6.z.string().optional(),
+  /** Additional CSS classes */
+  className: import_zod6.z.string().optional()
+}).strict();
+var RadioOptionItemSchema = import_zod6.z.object({
+  value: import_zod6.z.string(),
+  label: import_zod6.z.string(),
+  disabled: import_zod6.z.boolean().optional()
+}).strict();
+var RadioGroupOptionsSchema = import_zod6.z.object({
+  /** Group name (required) */
+  name: import_zod6.z.string(),
+  /** Radio options (required) */
+  options: import_zod6.z.array(RadioOptionItemSchema),
+  /** Selected value */
+  value: import_zod6.z.string().optional(),
+  /** Label for the group */
+  label: import_zod6.z.string().optional(),
+  /** Helper text */
+  helper: import_zod6.z.string().optional(),
+  /** Error message */
+  error: import_zod6.z.string().optional(),
+  /** Layout direction */
+  direction: import_zod6.z.enum(["horizontal", "vertical"]).optional(),
+  /** Additional CSS classes */
+  className: import_zod6.z.string().optional()
+}).strict();
+var FormMethodSchema = import_zod6.z.enum(["get", "post", "dialog"]);
+var FormEnctypeSchema = import_zod6.z.enum(["application/x-www-form-urlencoded", "multipart/form-data", "text/plain"]);
+var FormOptionsSchema = import_zod6.z.object({
+  /** Form action URL */
+  action: import_zod6.z.string().optional(),
+  /** Form method */
+  method: FormMethodSchema.optional(),
+  /** Form ID */
+  id: import_zod6.z.string().optional(),
+  /** Form enctype */
+  enctype: FormEnctypeSchema.optional(),
+  /** Disable browser validation */
+  novalidate: import_zod6.z.boolean().optional(),
+  /** Autocomplete behavior */
+  autocomplete: import_zod6.z.enum(["on", "off"]).optional(),
+  /** Additional CSS classes */
+  className: import_zod6.z.string().optional()
+}).strict();
+var FormRowOptionsSchema = import_zod6.z.object({
+  /** Number of columns */
+  cols: import_zod6.z.number().min(1).max(12).optional(),
+  /** Gap between columns */
+  gap: import_zod6.z.enum(["sm", "md", "lg"]).optional(),
+  /** Additional CSS classes */
+  className: import_zod6.z.string().optional()
+}).strict();
+var FormSectionOptionsSchema = import_zod6.z.object({
+  /** Section title */
+  title: import_zod6.z.string().optional(),
+  /** Section description */
+  description: import_zod6.z.string().optional(),
+  /** Additional CSS classes */
+  className: import_zod6.z.string().optional()
+}).strict();
+var FormActionsOptionsSchema = import_zod6.z.object({
+  /** Alignment */
+  align: import_zod6.z.enum(["left", "center", "right", "between"]).optional(),
+  /** Additional CSS classes */
+  className: import_zod6.z.string().optional()
+}).strict();
+
+// libs/ui/src/web-components/elements/fmcp-input.ts
+var FmcpInput = class extends FmcpElement {
+  config = {
+    name: "input",
+    schema: InputOptionsSchema,
+    defaults: {
+      type: "text",
+      size: "md",
+      state: "default"
+    }
+  };
+  static get observedAttributes() {
+    return [
+      "name",
+      "type",
+      "id",
+      "value",
+      "placeholder",
+      "label",
+      "helper",
+      "error",
+      "size",
+      "state",
+      "required",
+      "disabled",
+      "readonly",
+      "autocomplete",
+      "pattern",
+      "min",
+      "max",
+      "step",
+      "class",
+      "icon-before",
+      "icon-after"
+    ];
+  }
+  renderHtml(options, _content) {
+    return input(options);
+  }
+  // ============================================
+  // Property Setters
+  // ============================================
+  set name(value) {
+    this._options.name = value;
+    this._scheduleRender();
+  }
+  get name() {
+    return this._options.name ?? "";
+  }
+  set type(value) {
+    this._options.type = value;
+    this._scheduleRender();
+  }
+  get type() {
+    return this._options.type;
+  }
+  set label(value) {
+    this._options.label = value;
+    this._scheduleRender();
+  }
+  get label() {
+    return this._options.label;
+  }
+  set placeholder(value) {
+    this._options.placeholder = value;
+    this._scheduleRender();
+  }
+  get placeholder() {
+    return this._options.placeholder;
+  }
+  set helper(value) {
+    this._options.helper = value;
+    this._scheduleRender();
+  }
+  get helper() {
+    return this._options.helper;
+  }
+  set error(value) {
+    this._options.error = value;
+    this._scheduleRender();
+  }
+  get error() {
+    return this._options.error;
+  }
+  set size(value) {
+    this._options.size = value;
+    this._scheduleRender();
+  }
+  get size() {
+    return this._options.size;
+  }
+  set state(value) {
+    this._options.state = value;
+    this._scheduleRender();
+  }
+  get state() {
+    return this._options.state;
+  }
+  set required(value) {
+    this._options.required = value;
+    this._scheduleRender();
+  }
+  get required() {
+    return this._options.required ?? false;
+  }
+  set disabled(value) {
+    this._options.disabled = value;
+    this._scheduleRender();
+  }
+  get disabled() {
+    return this._options.disabled ?? false;
+  }
+  set readonly(value) {
+    this._options.readonly = value;
+    this._scheduleRender();
+  }
+  get readonly() {
+    return this._options.readonly ?? false;
+  }
+  // ============================================
+  // Form Integration
+  // ============================================
+  connectedCallback() {
+    super.connectedCallback();
+    this.addEventListener("input", this._handleInput.bind(this));
+    this.addEventListener("change", this._handleChange.bind(this));
+  }
+  _handleInput(e) {
+    const inputEl = this.querySelector("input");
+    if (inputEl && (e.target === inputEl || inputEl.contains(e.target))) {
+      this.dispatchEvent(
+        new CustomEvent("fmcp:input", {
+          bubbles: true,
+          detail: { value: inputEl.value, name: this._options.name }
+        })
+      );
+    }
+  }
+  _handleChange(e) {
+    const inputEl = this.querySelector("input");
+    if (inputEl && (e.target === inputEl || inputEl.contains(e.target))) {
+      this.dispatchEvent(
+        new CustomEvent("fmcp:change", {
+          bubbles: true,
+          detail: { value: inputEl.value, name: this._options.name }
+        })
+      );
+    }
+  }
+  /**
+   * Get current input value.
+   */
+  get value() {
+    const inputEl = this.querySelector("input");
+    return inputEl?.value ?? this._options.value ?? "";
+  }
+  /**
+   * Set input value.
+   */
+  set value(val) {
+    const inputEl = this.querySelector("input");
+    if (inputEl) {
+      inputEl.value = val;
+    }
+    this._options.value = val;
+  }
+  /**
+   * Get validity state.
+   */
+  get validity() {
+    return this.querySelector("input")?.validity;
+  }
+  /**
+   * Check validity.
+   */
+  checkValidity() {
+    return this.querySelector("input")?.checkValidity() ?? true;
+  }
+  /**
+   * Report validity.
+   */
+  reportValidity() {
+    return this.querySelector("input")?.reportValidity() ?? true;
+  }
+  /**
+   * Focus the input.
+   */
+  focus() {
+    this.querySelector("input")?.focus();
+  }
+  /**
+   * Blur the input.
+   */
+  blur() {
+    this.querySelector("input")?.blur();
+  }
+  /**
+   * Select all text.
+   */
+  select() {
+    this.querySelector("input")?.select();
+  }
+};
+function registerFmcpInput() {
+  if (typeof customElements !== "undefined" && !customElements.get("fmcp-input")) {
+    customElements.define("fmcp-input", FmcpInput);
+  }
+}
+
+// libs/ui/src/web-components/elements/fmcp-select.ts
+var FmcpSelect = class extends FmcpElement {
+  config = {
+    name: "select",
+    schema: SelectOptionsSchema,
+    defaults: {
+      size: "md",
+      state: "default"
+    }
+  };
+  /** Select options stored separately since they're complex objects */
+  _selectOptions = [];
+  static get observedAttributes() {
+    return [
+      "name",
+      "id",
+      "value",
+      "placeholder",
+      "label",
+      "helper",
+      "error",
+      "size",
+      "state",
+      "required",
+      "disabled",
+      "multiple",
+      "class"
+    ];
+  }
+  renderHtml(options, _content) {
+    const mergedOptions = {
+      ...options,
+      options: this._selectOptions.length > 0 ? this._selectOptions : options.options
+    };
+    return select(mergedOptions);
+  }
+  // ============================================
+  // Property Setters
+  // ============================================
+  set name(value) {
+    this._options.name = value;
+    this._scheduleRender();
+  }
+  get name() {
+    return this._options.name ?? "";
+  }
+  set label(value) {
+    this._options.label = value;
+    this._scheduleRender();
+  }
+  get label() {
+    return this._options.label;
+  }
+  set placeholder(value) {
+    this._options.placeholder = value;
+    this._scheduleRender();
+  }
+  get placeholder() {
+    return this._options.placeholder;
+  }
+  set helper(value) {
+    this._options.helper = value;
+    this._scheduleRender();
+  }
+  get helper() {
+    return this._options.helper;
+  }
+  set error(value) {
+    this._options.error = value;
+    this._scheduleRender();
+  }
+  get error() {
+    return this._options.error;
+  }
+  set size(value) {
+    this._options.size = value;
+    this._scheduleRender();
+  }
+  get size() {
+    return this._options.size;
+  }
+  set state(value) {
+    this._options.state = value;
+    this._scheduleRender();
+  }
+  get state() {
+    return this._options.state;
+  }
+  set required(value) {
+    this._options.required = value;
+    this._scheduleRender();
+  }
+  get required() {
+    return this._options.required ?? false;
+  }
+  set disabled(value) {
+    this._options.disabled = value;
+    this._scheduleRender();
+  }
+  get disabled() {
+    return this._options.disabled ?? false;
+  }
+  set multiple(value) {
+    this._options.multiple = value;
+    this._scheduleRender();
+  }
+  get multiple() {
+    return this._options.multiple ?? false;
+  }
+  /**
+   * Set select options (array of { value, label, disabled?, selected? })
+   */
+  set selectOptions(value) {
+    this._selectOptions = value;
+    this._scheduleRender();
+  }
+  get selectOptions() {
+    return this._selectOptions;
+  }
+  // ============================================
+  // Form Integration
+  // ============================================
+  connectedCallback() {
+    super.connectedCallback();
+    this.addEventListener("change", this._handleChange.bind(this));
+  }
+  _handleChange(e) {
+    const selectEl = this.querySelector("select");
+    if (selectEl && (e.target === selectEl || selectEl.contains(e.target))) {
+      this.dispatchEvent(
+        new CustomEvent("fmcp:change", {
+          bubbles: true,
+          detail: {
+            value: selectEl.value,
+            name: this._options.name,
+            selectedOptions: Array.from(selectEl.selectedOptions).map((opt) => opt.value)
+          }
+        })
+      );
+    }
+  }
+  /**
+   * Get current select value.
+   */
+  get value() {
+    const selectEl = this.querySelector("select");
+    return selectEl?.value ?? this._options.value ?? "";
+  }
+  /**
+   * Set select value.
+   */
+  set value(val) {
+    const selectEl = this.querySelector("select");
+    if (selectEl) {
+      selectEl.value = val;
+    }
+    this._options.value = val;
+  }
+  /**
+   * Get selected options (for multiple select).
+   */
+  get selectedOptions() {
+    const selectEl = this.querySelector("select");
+    return selectEl ? Array.from(selectEl.selectedOptions).map((opt) => opt.value) : [];
+  }
+  /**
+   * Get validity state.
+   */
+  get validity() {
+    return this.querySelector("select")?.validity;
+  }
+  /**
+   * Check validity.
+   */
+  checkValidity() {
+    return this.querySelector("select")?.checkValidity() ?? true;
+  }
+  /**
+   * Report validity.
+   */
+  reportValidity() {
+    return this.querySelector("select")?.reportValidity() ?? true;
+  }
+  /**
+   * Focus the select.
+   */
+  focus() {
+    this.querySelector("select")?.focus();
+  }
+  /**
+   * Blur the select.
+   */
+  blur() {
+    this.querySelector("select")?.blur();
+  }
+};
+function registerFmcpSelect() {
+  if (typeof customElements !== "undefined" && !customElements.get("fmcp-select")) {
+    customElements.define("fmcp-select", FmcpSelect);
+  }
+}
+
+// libs/ui/src/web-components/register.ts
+function registerAllComponents() {
+  registerFmcpButton();
+  registerFmcpCard();
+  registerFmcpAlert();
+  registerFmcpBadge();
+  registerFmcpInput();
+  registerFmcpSelect();
+}
+if (typeof window !== "undefined" && typeof document !== "undefined") {
+  const script = document.currentScript;
+  if (script?.hasAttribute("data-auto-register")) {
+    registerAllComponents();
+  }
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  FmcpAlert,
+  FmcpBadge,
+  FmcpButton,
+  FmcpCard,
+  FmcpElement,
+  FmcpInput,
+  FmcpSelect,
+  camelToKebab,
+  getObservedAttributesFromSchema,
+  kebabToCamel,
+  mergeAttributeIntoOptions,
+  parseAttributeValue,
+  registerAllComponents,
+  registerFmcpAlert,
+  registerFmcpBadge,
+  registerFmcpButton,
+  registerFmcpCard,
+  registerFmcpInput,
+  registerFmcpSelect
+});