@frontmcp/ui 0.5.1 → 0.6.0

package/src/web-components/core/base-element.js

@@ -1,289 +0,0 @@
-"use strict";
-/**
- * @file base-element.ts
- * @description Base class for all FrontMCP Web Components.
- *
- * Provides a foundation for creating Custom Elements with:
- * - Zod schema validation
- * - Attribute-to-option mapping
- * - Property setters for React/Vue compatibility
- * - Batched rendering via queueMicrotask
- * - Light DOM (no Shadow DOM) for Tailwind compatibility
- *
- * @example Creating a custom element
- * ```typescript
- * import { FmcpElement } from '@frontmcp/ui/web-components';
- * import { ButtonOptionsSchema, type ButtonOptions } from '@frontmcp/ui/components';
- * import { button } from '@frontmcp/ui/components';
- *
- * class FmcpButton extends FmcpElement<ButtonOptions> {
- *   protected readonly config = {
- *     name: 'button',
- *     schema: ButtonOptionsSchema,
- *     defaults: { variant: 'primary', size: 'md' },
- *   };
- *
- *   static get observedAttributes() {
- *     return getObservedAttributesFromSchema(ButtonOptionsSchema);
- *   }
- *
- *   protected renderHtml(options: ButtonOptions, content: string): string {
- *     return button(content, options);
- *   }
- * }
- *
- * customElements.define('fmcp-button', FmcpButton);
- * ```
- *
- * @module @frontmcp/ui/web-components/core/base-element
- */
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.FmcpElement = void 0;
-const error_box_1 = require("../../validation/error-box");
-const attribute_parser_1 = require("./attribute-parser");
-// Server-side stub for HTMLElement (Node.js doesn't have DOM)
-// This allows the module to be imported without errors, but the actual
-// web components can only be used in browser environments.
-const HTMLElementBase = typeof HTMLElement !== 'undefined'
-    ? HTMLElement
-    : class {
-        innerHTML = '';
-        dispatchEvent() {
-            return true;
-        }
-        getAttribute() {
-            return null;
-        }
-    };
-/**
- * Base class for all FrontMCP Web Components.
- *
- * Key features:
- * - **Light DOM**: Renders directly to innerHTML (no Shadow DOM)
- * - **Attribute Parsing**: Converts HTML attributes to typed options
- * - **Property Setters**: React/Vue can set properties directly
- * - **Zod Validation**: Invalid options render error box
- * - **Batched Rendering**: Multiple changes batch via queueMicrotask
- * - **HTMX Support**: hx-* attributes pass through to inner elements
- *
- * @typeParam TOptions - The component's options type (from Zod schema)
- *
- * @example Usage in HTML
- * ```html
- * <fmcp-button variant="primary" disabled>
- *   Click Me
- * </fmcp-button>
- * ```
- *
- * @example Usage in React
- * ```tsx
- * <fmcp-button
- *   variant="primary"
- *   onClick={handleClick}
- * >
- *   Click Me
- * </fmcp-button>
- * ```
- */
-class FmcpElement 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;
-        // Check for SSR hydration marker
-        const isHydrating = this.hasAttribute('data-ssr');
-        if (isHydrating) {
-            // Content already rendered by server, adopt it
-            this._content = this.innerHTML;
-            this._initialRenderComplete = true;
-            this.removeAttribute('data-ssr');
-            // Parse attributes for property access (but don't re-render)
-            this._parseAttributes();
-            return;
-        }
-        // Normal client-side rendering path
-        // Capture initial content before first render
-        // (so we can use it as the component's text/children)
-        if (!this._initialRenderComplete) {
-            this._content = this.innerHTML;
-        }
-        // Parse all current attributes into options
-        this._parseAttributes();
-        // Initial render
-        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) {
-        // Skip if value unchanged
-        if (oldValue === newValue)
-            return;
-        // Update the corresponding option
-        this._updateOptionFromAttribute(name, newValue);
-        // Schedule re-render (batched)
-        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 = (0, attribute_parser_1.parseAttributeValue)(attrName, value);
-        this._options = (0, attribute_parser_1.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() {
-        // Merge defaults with current options
-        const mergedOptions = {
-            ...this.config.defaults,
-            ...this._options,
-        };
-        // Validate with Zod schema
-        const result = this.config.schema.safeParse(mergedOptions);
-        if (!result.success) {
-            // Render validation error box
-            const firstError = result.error.issues[0];
-            const invalidParam = firstError?.path.join('.') || 'options';
-            this.innerHTML = (0, error_box_1.validationErrorBox)({
-                componentName: this.config.name,
-                invalidParam,
-            });
-            this._initialRenderComplete = true;
-            return;
-        }
-        // Generate HTML using subclass implementation
-        const html = this.renderHtml(result.data, this._content);
-        // Update Light DOM
-        this.innerHTML = html;
-        this._initialRenderComplete = true;
-        // Dispatch render event for debugging/testing
-        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();
-    }
-}
-exports.FmcpElement = FmcpElement;
-//# sourceMappingURL=base-element.js.map

package/src/web-components/core/base-element.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"base-element.js","sourceRoot":"","sources":["../../../../src/web-components/core/base-element.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @file base-element.ts\n * @description Base class for all FrontMCP Web Components.\n *\n * Provides a foundation for creating Custom Elements with:\n * - Zod schema validation\n * - Attribute-to-option mapping\n * - Property setters for React/Vue compatibility\n * - Batched rendering via queueMicrotask\n * - Light DOM (no Shadow DOM) for Tailwind compatibility\n *\n * @example Creating a custom element\n * ```typescript\n * import { FmcpElement } from '@frontmcp/ui/web-components';\n * import { ButtonOptionsSchema, type ButtonOptions } from '@frontmcp/ui/components';\n * import { button } from '@frontmcp/ui/components';\n *\n * class FmcpButton extends FmcpElement<ButtonOptions> {\n *   protected readonly config = {\n *     name: 'button',\n *     schema: ButtonOptionsSchema,\n *     defaults: { variant: 'primary', size: 'md' },\n *   };\n *\n *   static get observedAttributes() {\n *     return getObservedAttributesFromSchema(ButtonOptionsSchema);\n *   }\n *\n *   protected renderHtml(options: ButtonOptions, content: string): string {\n *     return button(content, options);\n *   }\n * }\n *\n * customElements.define('fmcp-button', FmcpButton);\n * ```\n *\n * @module @frontmcp/ui/web-components/core/base-element\n */\n\nimport type { ZodSchema } from 'zod';\nimport { validationErrorBox } from '../../validation/error-box';\nimport { parseAttributeValue, mergeAttributeIntoOptions } from './attribute-parser';\n\n// Server-side stub for HTMLElement (Node.js doesn't have DOM)\n// This allows the module to be imported without errors, but the actual\n// web components can only be used in browser environments.\nconst HTMLElementBase =\n  typeof HTMLElement !== 'undefined'\n    ? HTMLElement\n    : (class {\n        innerHTML = '';\n        dispatchEvent() {\n          return true;\n        }\n        getAttribute() {\n          return null;\n        }\n      } as unknown as typeof HTMLElement);\n\n/**\n * Configuration for FmcpElement subclasses\n */\nexport interface FmcpElementConfig<TOptions> {\n  /** Component name (used in error messages) */\n  name: string;\n  /** Zod schema for validation */\n  schema: ZodSchema<TOptions>;\n  /** Default option values */\n  defaults?: Partial<TOptions>;\n}\n\n/**\n * Custom event detail for fmcp:render event\n */\nexport interface FmcpRenderEventDetail<TOptions = unknown> {\n  options: TOptions;\n}\n\n/**\n * Base class for all FrontMCP Web Components.\n *\n * Key features:\n * - **Light DOM**: Renders directly to innerHTML (no Shadow DOM)\n * - **Attribute Parsing**: Converts HTML attributes to typed options\n * - **Property Setters**: React/Vue can set properties directly\n * - **Zod Validation**: Invalid options render error box\n * - **Batched Rendering**: Multiple changes batch via queueMicrotask\n * - **HTMX Support**: hx-* attributes pass through to inner elements\n *\n * @typeParam TOptions - The component's options type (from Zod schema)\n *\n * @example Usage in HTML\n * ```html\n * <fmcp-button variant=\"primary\" disabled>\n *   Click Me\n * </fmcp-button>\n * ```\n *\n * @example Usage in React\n * ```tsx\n * <fmcp-button\n *   variant=\"primary\"\n *   onClick={handleClick}\n * >\n *   Click Me\n * </fmcp-button>\n * ```\n */\nexport abstract class FmcpElement<TOptions> extends HTMLElementBase {\n  /**\n   * Configuration provided by subclass.\n   * Must include component name, Zod schema, and optional defaults.\n   */\n  protected abstract readonly config: FmcpElementConfig<TOptions>;\n\n  /** Internal options state */\n  protected _options: Partial<TOptions> = {};\n\n  /** Content passed as children (captured on connect) */\n  protected _content: string = '';\n\n  /** Whether component has been connected to DOM */\n  private _connected = false;\n\n  /** Whether a render is pending (for batching) */\n  private _pendingRender = false;\n\n  /** Whether initial render has completed */\n  private _initialRenderComplete = false;\n\n  // ============================================\n  // Lifecycle Callbacks\n  // ============================================\n\n  /**\n   * Called when element is added to DOM.\n   * Captures content, parses attributes, and renders.\n   *\n   * Supports SSR hydration via `data-ssr` attribute:\n   * - If `data-ssr` is present, content was pre-rendered by server\n   * - Web component adopts existing content without re-rendering\n   * - This enables progressive enhancement for LLM platforms\n   */\n  connectedCallback(): void {\n    this._connected = true;\n\n    // Check for SSR hydration marker\n    const isHydrating = this.hasAttribute('data-ssr');\n\n    if (isHydrating) {\n      // Content already rendered by server, adopt it\n      this._content = this.innerHTML;\n      this._initialRenderComplete = true;\n      this.removeAttribute('data-ssr');\n      // Parse attributes for property access (but don't re-render)\n      this._parseAttributes();\n      return;\n    }\n\n    // Normal client-side rendering path\n    // Capture initial content before first render\n    // (so we can use it as the component's text/children)\n    if (!this._initialRenderComplete) {\n      this._content = this.innerHTML;\n    }\n\n    // Parse all current attributes into options\n    this._parseAttributes();\n\n    // Initial render\n    this._render();\n  }\n\n  /**\n   * Called when element is removed from DOM.\n   */\n  disconnectedCallback(): void {\n    this._connected = false;\n  }\n\n  /**\n   * Called when an observed attribute changes.\n   * Updates options and schedules re-render.\n   */\n  attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void {\n    // Skip if value unchanged\n    if (oldValue === newValue) return;\n\n    // Update the corresponding option\n    this._updateOptionFromAttribute(name, newValue);\n\n    // Schedule re-render (batched)\n    this._scheduleRender();\n  }\n\n  // ============================================\n  // Property Accessors (React/Vue Compatibility)\n  // ============================================\n\n  /**\n   * Set all options at once (React pattern).\n   *\n   * @example\n   * ```typescript\n   * const el = document.querySelector('fmcp-button');\n   * el.options = { variant: 'danger', size: 'lg' };\n   * ```\n   */\n  set options(value: Partial<TOptions>) {\n    this._options = { ...this._options, ...value };\n    this._scheduleRender();\n  }\n\n  /**\n   * Get current options.\n   */\n  get options(): Partial<TOptions> {\n    return { ...this._options };\n  }\n\n  // ============================================\n  // Attribute Parsing\n  // ============================================\n\n  /**\n   * Parse all current attributes into options.\n   */\n  private _parseAttributes(): void {\n    for (const attr of Array.from(this.attributes)) {\n      this._updateOptionFromAttribute(attr.name, attr.value);\n    }\n  }\n\n  /**\n   * Update a single option from an attribute change.\n   */\n  private _updateOptionFromAttribute(attrName: string, value: string | null): void {\n    const parsed = parseAttributeValue(attrName, value);\n    this._options = mergeAttributeIntoOptions(this._options, parsed);\n  }\n\n  // ============================================\n  // Rendering\n  // ============================================\n\n  /**\n   * Schedule a render on next microtask.\n   * Batches multiple attribute/property changes.\n   */\n  protected _scheduleRender(): void {\n    if (!this._connected || this._pendingRender) return;\n\n    this._pendingRender = true;\n    queueMicrotask(() => {\n      this._pendingRender = false;\n      if (this._connected) {\n        this._render();\n      }\n    });\n  }\n\n  /**\n   * Perform the actual render.\n   * Validates options and updates innerHTML.\n   */\n  private _render(): void {\n    // Merge defaults with current options\n    const mergedOptions = {\n      ...this.config.defaults,\n      ...this._options,\n    } as TOptions;\n\n    // Validate with Zod schema\n    const result = this.config.schema.safeParse(mergedOptions);\n\n    if (!result.success) {\n      // Render validation error box\n      const firstError = result.error.issues[0];\n      const invalidParam = firstError?.path.join('.') || 'options';\n\n      this.innerHTML = validationErrorBox({\n        componentName: this.config.name,\n        invalidParam,\n      });\n\n      this._initialRenderComplete = true;\n      return;\n    }\n\n    // Generate HTML using subclass implementation\n    const html = this.renderHtml(result.data, this._content);\n\n    // Update Light DOM\n    this.innerHTML = html;\n\n    this._initialRenderComplete = true;\n\n    // Dispatch render event for debugging/testing\n    this.dispatchEvent(\n      new CustomEvent<FmcpRenderEventDetail<TOptions>>('fmcp:render', {\n        bubbles: true,\n        detail: { options: result.data },\n      }),\n    );\n  }\n\n  /**\n   * Generate HTML for the component.\n   * Subclasses must implement this to render their specific HTML.\n   *\n   * @param options - Validated options\n   * @param content - Original innerHTML content\n   * @returns HTML string to render\n   */\n  protected abstract renderHtml(options: TOptions, content: string): string;\n\n  // ============================================\n  // Public API\n  // ============================================\n\n  /**\n   * Force an immediate re-render.\n   *\n   * @example\n   * ```typescript\n   * el.options = { loading: true };\n   * el.refresh(); // Force immediate render\n   * ```\n   */\n  public refresh(): void {\n    if (this._connected) {\n      this._render();\n    }\n  }\n\n  /**\n   * Get the first child element (the actual rendered component).\n   *\n   * @typeParam T - Expected element type\n   * @returns The first child element or null\n   *\n   * @example\n   * ```typescript\n   * const button = el.getInnerElement<HTMLButtonElement>();\n   * button?.focus();\n   * ```\n   */\n  public getInnerElement<T extends Element = Element>(): T | null {\n    return this.firstElementChild as T | null;\n  }\n\n  /**\n   * Update content and re-render.\n   *\n   * @param content - New content string\n   */\n  public setContent(content: string): void {\n    this._content = content;\n    this._scheduleRender();\n  }\n}\n"]}

package/src/web-components/core/index.d.ts

@@ -1,8 +0,0 @@
-/**
- * @file core/index.ts
- * @description Core utilities for FrontMCP Web Components.
- *
- * @module @frontmcp/ui/web-components/core
- */
-export { FmcpElement, type FmcpElementConfig, type FmcpRenderEventDetail } from './base-element';
-export { parseAttributeValue, kebabToCamel, camelToKebab, getObservedAttributesFromSchema, mergeAttributeIntoOptions, type ParsedAttribute, } from './attribute-parser';

package/src/web-components/core/index.js

@@ -1,18 +0,0 @@
-"use strict";
-/**
- * @file core/index.ts
- * @description Core utilities for FrontMCP Web Components.
- *
- * @module @frontmcp/ui/web-components/core
- */
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.mergeAttributeIntoOptions = exports.getObservedAttributesFromSchema = exports.camelToKebab = exports.kebabToCamel = exports.parseAttributeValue = exports.FmcpElement = void 0;
-var base_element_1 = require("./base-element");
-Object.defineProperty(exports, "FmcpElement", { enumerable: true, get: function () { return base_element_1.FmcpElement; } });
-var attribute_parser_1 = require("./attribute-parser");
-Object.defineProperty(exports, "parseAttributeValue", { enumerable: true, get: function () { return attribute_parser_1.parseAttributeValue; } });
-Object.defineProperty(exports, "kebabToCamel", { enumerable: true, get: function () { return attribute_parser_1.kebabToCamel; } });
-Object.defineProperty(exports, "camelToKebab", { enumerable: true, get: function () { return attribute_parser_1.camelToKebab; } });
-Object.defineProperty(exports, "getObservedAttributesFromSchema", { enumerable: true, get: function () { return attribute_parser_1.getObservedAttributesFromSchema; } });
-Object.defineProperty(exports, "mergeAttributeIntoOptions", { enumerable: true, get: function () { return attribute_parser_1.mergeAttributeIntoOptions; } });
-//# sourceMappingURL=index.js.map

package/src/web-components/core/index.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/web-components/core/index.ts"],"names":[],"mappings":";AAAA;;;;;GAKG;;;AAEH,+CAAiG;AAAxF,2GAAA,WAAW,OAAA;AAEpB,uDAO4B;AAN1B,uHAAA,mBAAmB,OAAA;AACnB,gHAAA,YAAY,OAAA;AACZ,gHAAA,YAAY,OAAA;AACZ,mIAAA,+BAA+B,OAAA;AAC/B,6HAAA,yBAAyB,OAAA","sourcesContent":["/**\n * @file core/index.ts\n * @description Core utilities for FrontMCP Web Components.\n *\n * @module @frontmcp/ui/web-components/core\n */\n\nexport { FmcpElement, type FmcpElementConfig, type FmcpRenderEventDetail } from './base-element';\n\nexport {\n  parseAttributeValue,\n  kebabToCamel,\n  camelToKebab,\n  getObservedAttributesFromSchema,\n  mergeAttributeIntoOptions,\n  type ParsedAttribute,\n} from './attribute-parser';\n"]}

package/src/web-components/elements/fmcp-alert.d.ts

@@ -1,45 +0,0 @@
-/**
- * @file fmcp-alert.ts
- * @description FrontMCP Alert Web Component.
- *
- * A custom element wrapper around the alert() HTML function.
- *
- * @example Basic usage
- * ```html
- * <fmcp-alert variant="success">Operation completed!</fmcp-alert>
- * <fmcp-alert variant="danger" title="Error">Something went wrong</fmcp-alert>
- * ```
- *
- * @example Dismissible alert
- * ```html
- * <fmcp-alert variant="info" dismissible>
- *   Click X to dismiss
- * </fmcp-alert>
- * ```
- *
- * @module @frontmcp/ui/web-components/elements/fmcp-alert
- */
-import { FmcpElement, type FmcpElementConfig } from '../core';
-import { type AlertOptions } from '../../components/alert';
-/**
- * FmcpAlert Web Component
- */
-export declare class FmcpAlert extends FmcpElement<AlertOptions> {
-    protected readonly config: FmcpElementConfig<AlertOptions>;
-    static get observedAttributes(): string[];
-    protected renderHtml(options: AlertOptions, content: string): string;
-    set variant(value: AlertOptions['variant']);
-    get variant(): AlertOptions['variant'];
-    set alertTitle(value: string | undefined);
-    get alertTitle(): string | undefined;
-    set showIcon(value: boolean);
-    get showIcon(): boolean;
-    set dismissible(value: boolean);
-    get dismissible(): boolean;
-    set actions(value: string | undefined);
-    get actions(): string | undefined;
-}
-/**
- * Register the fmcp-alert custom element.
- */
-export declare function registerFmcpAlert(): void;

package/src/web-components/elements/fmcp-alert.js

@@ -1,93 +0,0 @@
-"use strict";
-/**
- * @file fmcp-alert.ts
- * @description FrontMCP Alert Web Component.
- *
- * A custom element wrapper around the alert() HTML function.
- *
- * @example Basic usage
- * ```html
- * <fmcp-alert variant="success">Operation completed!</fmcp-alert>
- * <fmcp-alert variant="danger" title="Error">Something went wrong</fmcp-alert>
- * ```
- *
- * @example Dismissible alert
- * ```html
- * <fmcp-alert variant="info" dismissible>
- *   Click X to dismiss
- * </fmcp-alert>
- * ```
- *
- * @module @frontmcp/ui/web-components/elements/fmcp-alert
- */
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.FmcpAlert = void 0;
-exports.registerFmcpAlert = registerFmcpAlert;
-const core_1 = require("../core");
-const alert_1 = require("../../components/alert");
-const alert_schema_1 = require("../../components/alert.schema");
-/**
- * FmcpAlert Web Component
- */
-class FmcpAlert extends core_1.FmcpElement {
-    config = {
-        name: 'alert',
-        schema: alert_schema_1.AlertOptionsSchema,
-        defaults: {
-            variant: 'info',
-            showIcon: true,
-        },
-    };
-    static get observedAttributes() {
-        return (0, core_1.getObservedAttributesFromSchema)(alert_schema_1.AlertOptionsSchema);
-    }
-    renderHtml(options, content) {
-        return (0, alert_1.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;
-    }
-}
-exports.FmcpAlert = FmcpAlert;
-/**
- * Register the fmcp-alert custom element.
- */
-function registerFmcpAlert() {
-    if (typeof customElements !== 'undefined' && !customElements.get('fmcp-alert')) {
-        customElements.define('fmcp-alert', FmcpAlert);
-    }
-}
-//# sourceMappingURL=fmcp-alert.js.map

package/src/web-components/elements/fmcp-alert.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"fmcp-alert.js","sourceRoot":"","sources":["../../../../src/web-components/elements/fmcp-alert.ts"],"names":[],"mappings":";AAAA;;;;;;;;;;;;;;;;;;;;GAoBG;;;AAwEH,8CAIC;AA1ED,kCAA+F;AAC/F,kDAAkE;AAClE,gEAAmE;AAEnE;;GAEG;AACH,MAAa,SAAU,SAAQ,kBAAyB;IACnC,MAAM,GAAoC;QAC3D,IAAI,EAAE,OAAO;QACb,MAAM,EAAE,iCAAkB;QAC1B,QAAQ,EAAE;YACR,OAAO,EAAE,MAAM;YACf,QAAQ,EAAE,IAAI;SACf;KACF,CAAC;IAEF,MAAM,KAAK,kBAAkB;QAC3B,OAAO,IAAA,sCAA+B,EAAC,iCAAkB,CAAC,CAAC;IAC7D,CAAC;IAES,UAAU,CAAC,OAAqB,EAAE,OAAe;QACzD,OAAO,IAAA,aAAK,EAAC,OAAO,EAAE,OAAO,CAAC,CAAC;IACjC,CAAC;IAED,mBAAmB;IACnB,IAAI,OAAO,CAAC,KAA8B;QACxC,IAAI,CAAC,QAAQ,CAAC,OAAO,GAAG,KAAK,CAAC;QAC9B,IAAI,CAAC,eAAe,EAAE,CAAC;IACzB,CAAC;IACD,IAAI,OAAO;QACT,OAAO,IAAI,CAAC,QAAQ,CAAC,OAAO,CAAC;IAC/B,CAAC;IAED,IAAI,UAAU,CAAC,KAAyB;QACtC,IAAI,CAAC,QAAQ,CAAC,KAAK,GAAG,KAAK,CAAC;QAC5B,IAAI,CAAC,eAAe,EAAE,CAAC;IACzB,CAAC;IACD,IAAI,UAAU;QACZ,OAAO,IAAI,CAAC,QAAQ,CAAC,KAAK,CAAC;IAC7B,CAAC;IAED,IAAI,QAAQ,CAAC,KAAc;QACzB,IAAI,CAAC,QAAQ,CAAC,QAAQ,GAAG,KAAK,CAAC;QAC/B,IAAI,CAAC,eAAe,EAAE,CAAC;IACzB,CAAC;IACD,IAAI,QAAQ;QACV,OAAO,IAAI,CAAC,QAAQ,CAAC,QAAQ,IAAI,IAAI,CAAC;IACxC,CAAC;IAED,IAAI,WAAW,CAAC,KAAc;QAC5B,IAAI,CAAC,QAAQ,CAAC,WAAW,GAAG,KAAK,CAAC;QAClC,IAAI,CAAC,eAAe,EAAE,CAAC;IACzB,CAAC;IACD,IAAI,WAAW;QACb,OAAO,IAAI,CAAC,QAAQ,CAAC,WAAW,IAAI,KAAK,CAAC;IAC5C,CAAC;IAED,IAAI,OAAO,CAAC,KAAyB;QACnC,IAAI,CAAC,QAAQ,CAAC,OAAO,GAAG,KAAK,CAAC;QAC9B,IAAI,CAAC,eAAe,EAAE,CAAC;IACzB,CAAC;IACD,IAAI,OAAO;QACT,OAAO,IAAI,CAAC,QAAQ,CAAC,OAAO,CAAC;IAC/B,CAAC;CACF;AA1DD,8BA0DC;AAED;;GAEG;AACH,SAAgB,iBAAiB;IAC/B,IAAI,OAAO,cAAc,KAAK,WAAW,IAAI,CAAC,cAAc,CAAC,GAAG,CAAC,YAAY,CAAC,EAAE,CAAC;QAC/E,cAAc,CAAC,MAAM,CAAC,YAAY,EAAE,SAAS,CAAC,CAAC;IACjD,CAAC;AACH,CAAC","sourcesContent":["/**\n * @file fmcp-alert.ts\n * @description FrontMCP Alert Web Component.\n *\n * A custom element wrapper around the alert() HTML function.\n *\n * @example Basic usage\n * ```html\n * <fmcp-alert variant=\"success\">Operation completed!</fmcp-alert>\n * <fmcp-alert variant=\"danger\" title=\"Error\">Something went wrong</fmcp-alert>\n * ```\n *\n * @example Dismissible alert\n * ```html\n * <fmcp-alert variant=\"info\" dismissible>\n *   Click X to dismiss\n * </fmcp-alert>\n * ```\n *\n * @module @frontmcp/ui/web-components/elements/fmcp-alert\n */\n\nimport { FmcpElement, type FmcpElementConfig, getObservedAttributesFromSchema } from '../core';\nimport { alert, type AlertOptions } from '../../components/alert';\nimport { AlertOptionsSchema } from '../../components/alert.schema';\n\n/**\n * FmcpAlert Web Component\n */\nexport class FmcpAlert extends FmcpElement<AlertOptions> {\n  protected readonly config: FmcpElementConfig<AlertOptions> = {\n    name: 'alert',\n    schema: AlertOptionsSchema,\n    defaults: {\n      variant: 'info',\n      showIcon: true,\n    },\n  };\n\n  static get observedAttributes(): string[] {\n    return getObservedAttributesFromSchema(AlertOptionsSchema);\n  }\n\n  protected renderHtml(options: AlertOptions, content: string): string {\n    return alert(content, options);\n  }\n\n  // Property setters\n  set variant(value: AlertOptions['variant']) {\n    this._options.variant = value;\n    this._scheduleRender();\n  }\n  get variant(): AlertOptions['variant'] {\n    return this._options.variant;\n  }\n\n  set alertTitle(value: string | undefined) {\n    this._options.title = value;\n    this._scheduleRender();\n  }\n  get alertTitle(): string | undefined {\n    return this._options.title;\n  }\n\n  set showIcon(value: boolean) {\n    this._options.showIcon = value;\n    this._scheduleRender();\n  }\n  get showIcon(): boolean {\n    return this._options.showIcon ?? true;\n  }\n\n  set dismissible(value: boolean) {\n    this._options.dismissible = value;\n    this._scheduleRender();\n  }\n  get dismissible(): boolean {\n    return this._options.dismissible ?? false;\n  }\n\n  set actions(value: string | undefined) {\n    this._options.actions = value;\n    this._scheduleRender();\n  }\n  get actions(): string | undefined {\n    return this._options.actions;\n  }\n}\n\n/**\n * Register the fmcp-alert custom element.\n */\nexport function registerFmcpAlert(): void {\n  if (typeof customElements !== 'undefined' && !customElements.get('fmcp-alert')) {\n    customElements.define('fmcp-alert', FmcpAlert);\n  }\n}\n"]}

package/src/web-components/elements/fmcp-badge.d.ts

@@ -1,46 +0,0 @@
-/**
- * @file fmcp-badge.ts
- * @description FrontMCP Badge Web Component.
- *
- * A custom element wrapper around the badge() HTML function.
- *
- * @example Basic usage
- * ```html
- * <fmcp-badge>Default</fmcp-badge>
- * <fmcp-badge variant="success">Active</fmcp-badge>
- * <fmcp-badge variant="danger" pill>Error</fmcp-badge>
- * ```
- *
- * @example Removable badge
- * ```html
- * <fmcp-badge removable>Tag</fmcp-badge>
- * ```
- *
- * @module @frontmcp/ui/web-components/elements/fmcp-badge
- */
-import { FmcpElement, type FmcpElementConfig } from '../core';
-import { type BadgeOptions } from '../../components/badge';
-/**
- * FmcpBadge Web Component
- */
-export declare class FmcpBadge extends FmcpElement<BadgeOptions> {
-    protected readonly config: FmcpElementConfig<BadgeOptions>;
-    static get observedAttributes(): string[];
-    protected renderHtml(options: BadgeOptions, content: string): string;
-    set variant(value: BadgeOptions['variant']);
-    get variant(): BadgeOptions['variant'];
-    set size(value: BadgeOptions['size']);
-    get size(): BadgeOptions['size'];
-    set pill(value: boolean);
-    get pill(): boolean;
-    set dot(value: boolean);
-    get dot(): boolean;
-    set removable(value: boolean);
-    get removable(): boolean;
-    set icon(value: string | undefined);
-    get icon(): string | undefined;
-}
-/**
- * Register the fmcp-badge custom element.
- */
-export declare function registerFmcpBadge(): void;

package/src/web-components/elements/fmcp-badge.js

@@ -1,99 +0,0 @@
-"use strict";
-/**
- * @file fmcp-badge.ts
- * @description FrontMCP Badge Web Component.
- *
- * A custom element wrapper around the badge() HTML function.
- *
- * @example Basic usage
- * ```html
- * <fmcp-badge>Default</fmcp-badge>
- * <fmcp-badge variant="success">Active</fmcp-badge>
- * <fmcp-badge variant="danger" pill>Error</fmcp-badge>
- * ```
- *
- * @example Removable badge
- * ```html
- * <fmcp-badge removable>Tag</fmcp-badge>
- * ```
- *
- * @module @frontmcp/ui/web-components/elements/fmcp-badge
- */
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.FmcpBadge = void 0;
-exports.registerFmcpBadge = registerFmcpBadge;
-const core_1 = require("../core");
-const badge_1 = require("../../components/badge");
-const badge_schema_1 = require("../../components/badge.schema");
-/**
- * FmcpBadge Web Component
- */
-class FmcpBadge extends core_1.FmcpElement {
-    config = {
-        name: 'badge',
-        schema: badge_schema_1.BadgeOptionsSchema,
-        defaults: {
-            variant: 'default',
-            size: 'md',
-        },
-    };
-    static get observedAttributes() {
-        return (0, core_1.getObservedAttributesFromSchema)(badge_schema_1.BadgeOptionsSchema);
-    }
-    renderHtml(options, content) {
-        return (0, badge_1.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;
-    }
-}
-exports.FmcpBadge = FmcpBadge;
-/**
- * Register the fmcp-badge custom element.
- */
-function registerFmcpBadge() {
-    if (typeof customElements !== 'undefined' && !customElements.get('fmcp-badge')) {
-        customElements.define('fmcp-badge', FmcpBadge);
-    }
-}
-//# sourceMappingURL=fmcp-badge.js.map

package/src/web-components/elements/fmcp-badge.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"fmcp-badge.js","sourceRoot":"","sources":["../../../../src/web-components/elements/fmcp-badge.ts"],"names":[],"mappings":";AAAA;;;;;;;;;;;;;;;;;;;GAmBG;;;AAgFH,8CAIC;AAlFD,kCAA+F;AAC/F,kDAAkE;AAClE,gEAAmE;AAEnE;;GAEG;AACH,MAAa,SAAU,SAAQ,kBAAyB;IACnC,MAAM,GAAoC;QAC3D,IAAI,EAAE,OAAO;QACb,MAAM,EAAE,iCAAkB;QAC1B,QAAQ,EAAE;YACR,OAAO,EAAE,SAAS;YAClB,IAAI,EAAE,IAAI;SACX;KACF,CAAC;IAEF,MAAM,KAAK,kBAAkB;QAC3B,OAAO,IAAA,sCAA+B,EAAC,iCAAkB,CAAC,CAAC;IAC7D,CAAC;IAES,UAAU,CAAC,OAAqB,EAAE,OAAe;QACzD,OAAO,IAAA,aAAK,EAAC,OAAO,EAAE,OAAO,CAAC,CAAC;IACjC,CAAC;IAED,mBAAmB;IACnB,IAAI,OAAO,CAAC,KAA8B;QACxC,IAAI,CAAC,QAAQ,CAAC,OAAO,GAAG,KAAK,CAAC;QAC9B,IAAI,CAAC,eAAe,EAAE,CAAC;IACzB,CAAC;IACD,IAAI,OAAO;QACT,OAAO,IAAI,CAAC,QAAQ,CAAC,OAAO,CAAC;IAC/B,CAAC;IAED,IAAI,IAAI,CAAC,KAA2B;QAClC,IAAI,CAAC,QAAQ,CAAC,IAAI,GAAG,KAAK,CAAC;QAC3B,IAAI,CAAC,eAAe,EAAE,CAAC;IACzB,CAAC;IACD,IAAI,IAAI;QACN,OAAO,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC;IAC5B,CAAC;IAED,IAAI,IAAI,CAAC,KAAc;QACrB,IAAI,CAAC,QAAQ,CAAC,IAAI,GAAG,KAAK,CAAC;QAC3B,IAAI,CAAC,eAAe,EAAE,CAAC;IACzB,CAAC;IACD,IAAI,IAAI;QACN,OAAO,IAAI,CAAC,QAAQ,CAAC,IAAI,IAAI,KAAK,CAAC;IACrC,CAAC;IAED,IAAI,GAAG,CAAC,KAAc;QACpB,IAAI,CAAC,QAAQ,CAAC,GAAG,GAAG,KAAK,CAAC;QAC1B,IAAI,CAAC,eAAe,EAAE,CAAC;IACzB,CAAC;IACD,IAAI,GAAG;QACL,OAAO,IAAI,CAAC,QAAQ,CAAC,GAAG,IAAI,KAAK,CAAC;IACpC,CAAC;IAED,IAAI,SAAS,CAAC,KAAc;QAC1B,IAAI,CAAC,QAAQ,CAAC,SAAS,GAAG,KAAK,CAAC;QAChC,IAAI,CAAC,eAAe,EAAE,CAAC;IACzB,CAAC;IACD,IAAI,SAAS;QACX,OAAO,IAAI,CAAC,QAAQ,CAAC,SAAS,IAAI,KAAK,CAAC;IAC1C,CAAC;IAED,IAAI,IAAI,CAAC,KAAyB;QAChC,IAAI,CAAC,QAAQ,CAAC,IAAI,GAAG,KAAK,CAAC;QAC3B,IAAI,CAAC,eAAe,EAAE,CAAC;IACzB,CAAC;IACD,IAAI,IAAI;QACN,OAAO,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC;IAC5B,CAAC;CACF;AAlED,8BAkEC;AAED;;GAEG;AACH,SAAgB,iBAAiB;IAC/B,IAAI,OAAO,cAAc,KAAK,WAAW,IAAI,CAAC,cAAc,CAAC,GAAG,CAAC,YAAY,CAAC,EAAE,CAAC;QAC/E,cAAc,CAAC,MAAM,CAAC,YAAY,EAAE,SAAS,CAAC,CAAC;IACjD,CAAC;AACH,CAAC","sourcesContent":["/**\n * @file fmcp-badge.ts\n * @description FrontMCP Badge Web Component.\n *\n * A custom element wrapper around the badge() HTML function.\n *\n * @example Basic usage\n * ```html\n * <fmcp-badge>Default</fmcp-badge>\n * <fmcp-badge variant=\"success\">Active</fmcp-badge>\n * <fmcp-badge variant=\"danger\" pill>Error</fmcp-badge>\n * ```\n *\n * @example Removable badge\n * ```html\n * <fmcp-badge removable>Tag</fmcp-badge>\n * ```\n *\n * @module @frontmcp/ui/web-components/elements/fmcp-badge\n */\n\nimport { FmcpElement, type FmcpElementConfig, getObservedAttributesFromSchema } from '../core';\nimport { badge, type BadgeOptions } from '../../components/badge';\nimport { BadgeOptionsSchema } from '../../components/badge.schema';\n\n/**\n * FmcpBadge Web Component\n */\nexport class FmcpBadge extends FmcpElement<BadgeOptions> {\n  protected readonly config: FmcpElementConfig<BadgeOptions> = {\n    name: 'badge',\n    schema: BadgeOptionsSchema,\n    defaults: {\n      variant: 'default',\n      size: 'md',\n    },\n  };\n\n  static get observedAttributes(): string[] {\n    return getObservedAttributesFromSchema(BadgeOptionsSchema);\n  }\n\n  protected renderHtml(options: BadgeOptions, content: string): string {\n    return badge(content, options);\n  }\n\n  // Property setters\n  set variant(value: BadgeOptions['variant']) {\n    this._options.variant = value;\n    this._scheduleRender();\n  }\n  get variant(): BadgeOptions['variant'] {\n    return this._options.variant;\n  }\n\n  set size(value: BadgeOptions['size']) {\n    this._options.size = value;\n    this._scheduleRender();\n  }\n  get size(): BadgeOptions['size'] {\n    return this._options.size;\n  }\n\n  set pill(value: boolean) {\n    this._options.pill = value;\n    this._scheduleRender();\n  }\n  get pill(): boolean {\n    return this._options.pill ?? false;\n  }\n\n  set dot(value: boolean) {\n    this._options.dot = value;\n    this._scheduleRender();\n  }\n  get dot(): boolean {\n    return this._options.dot ?? false;\n  }\n\n  set removable(value: boolean) {\n    this._options.removable = value;\n    this._scheduleRender();\n  }\n  get removable(): boolean {\n    return this._options.removable ?? false;\n  }\n\n  set icon(value: string | undefined) {\n    this._options.icon = value;\n    this._scheduleRender();\n  }\n  get icon(): string | undefined {\n    return this._options.icon;\n  }\n}\n\n/**\n * Register the fmcp-badge custom element.\n */\nexport function registerFmcpBadge(): void {\n  if (typeof customElements !== 'undefined' && !customElements.get('fmcp-badge')) {\n    customElements.define('fmcp-badge', FmcpBadge);\n  }\n}\n"]}