@frontmcp/ui 0.5.0

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

@@ -0,0 +1,34 @@
+"use strict";
+/**
+ * @file elements/index.ts
+ * @description Barrel exports for FrontMCP Web Component elements.
+ *
+ * @module @frontmcp/ui/web-components/elements
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.registerFmcpSelect = exports.FmcpSelect = exports.registerFmcpInput = exports.FmcpInput = exports.registerFmcpBadge = exports.FmcpBadge = exports.registerFmcpAlert = exports.FmcpAlert = exports.registerFmcpCard = exports.FmcpCard = exports.registerFmcpButton = exports.FmcpButton = void 0;
+// Button
+var fmcp_button_1 = require("./fmcp-button");
+Object.defineProperty(exports, "FmcpButton", { enumerable: true, get: function () { return fmcp_button_1.FmcpButton; } });
+Object.defineProperty(exports, "registerFmcpButton", { enumerable: true, get: function () { return fmcp_button_1.registerFmcpButton; } });
+// Card
+var fmcp_card_1 = require("./fmcp-card");
+Object.defineProperty(exports, "FmcpCard", { enumerable: true, get: function () { return fmcp_card_1.FmcpCard; } });
+Object.defineProperty(exports, "registerFmcpCard", { enumerable: true, get: function () { return fmcp_card_1.registerFmcpCard; } });
+// Alert
+var fmcp_alert_1 = require("./fmcp-alert");
+Object.defineProperty(exports, "FmcpAlert", { enumerable: true, get: function () { return fmcp_alert_1.FmcpAlert; } });
+Object.defineProperty(exports, "registerFmcpAlert", { enumerable: true, get: function () { return fmcp_alert_1.registerFmcpAlert; } });
+// Badge
+var fmcp_badge_1 = require("./fmcp-badge");
+Object.defineProperty(exports, "FmcpBadge", { enumerable: true, get: function () { return fmcp_badge_1.FmcpBadge; } });
+Object.defineProperty(exports, "registerFmcpBadge", { enumerable: true, get: function () { return fmcp_badge_1.registerFmcpBadge; } });
+// Input
+var fmcp_input_1 = require("./fmcp-input");
+Object.defineProperty(exports, "FmcpInput", { enumerable: true, get: function () { return fmcp_input_1.FmcpInput; } });
+Object.defineProperty(exports, "registerFmcpInput", { enumerable: true, get: function () { return fmcp_input_1.registerFmcpInput; } });
+// Select
+var fmcp_select_1 = require("./fmcp-select");
+Object.defineProperty(exports, "FmcpSelect", { enumerable: true, get: function () { return fmcp_select_1.FmcpSelect; } });
+Object.defineProperty(exports, "registerFmcpSelect", { enumerable: true, get: function () { return fmcp_select_1.registerFmcpSelect; } });
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/web-components/elements/index.ts"],"names":[],"mappings":";AAAA;;;;;GAKG;;;AAEH,SAAS;AACT,6CAA+D;AAAtD,yGAAA,UAAU,OAAA;AAAE,iHAAA,kBAAkB,OAAA;AAEvC,OAAO;AACP,yCAAyD;AAAhD,qGAAA,QAAQ,OAAA;AAAE,6GAAA,gBAAgB,OAAA;AAEnC,QAAQ;AACR,2CAA4D;AAAnD,uGAAA,SAAS,OAAA;AAAE,+GAAA,iBAAiB,OAAA;AAErC,QAAQ;AACR,2CAA4D;AAAnD,uGAAA,SAAS,OAAA;AAAE,+GAAA,iBAAiB,OAAA;AAErC,QAAQ;AACR,2CAA4D;AAAnD,uGAAA,SAAS,OAAA;AAAE,+GAAA,iBAAiB,OAAA;AAErC,SAAS;AACT,6CAA+D;AAAtD,yGAAA,UAAU,OAAA;AAAE,iHAAA,kBAAkB,OAAA","sourcesContent":["/**\n * @file elements/index.ts\n * @description Barrel exports for FrontMCP Web Component elements.\n *\n * @module @frontmcp/ui/web-components/elements\n */\n\n// Button\nexport { FmcpButton, registerFmcpButton } from './fmcp-button';\n\n// Card\nexport { FmcpCard, registerFmcpCard } from './fmcp-card';\n\n// Alert\nexport { FmcpAlert, registerFmcpAlert } from './fmcp-alert';\n\n// Badge\nexport { FmcpBadge, registerFmcpBadge } from './fmcp-badge';\n\n// Input\nexport { FmcpInput, registerFmcpInput } from './fmcp-input';\n\n// Select\nexport { FmcpSelect, registerFmcpSelect } from './fmcp-select';\n"]}

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

@@ -0,0 +1,49 @@
+/**
+ * @file index.ts
+ * @description FrontMCP Web Components - Custom Elements for React/Vue/HTML.
+ *
+ * This module provides Web Components (Custom Elements) that wrap the
+ * FrontMCP UI HTML functions, allowing native usage in any framework.
+ *
+ * @example Basic usage
+ * ```typescript
+ * import { registerAllComponents } from '@frontmcp/ui/web-components';
+ *
+ * // Register all components
+ * registerAllComponents();
+ *
+ * // Use in HTML
+ * // <fmcp-button variant="primary">Click Me</fmcp-button>
+ * ```
+ *
+ * @example React usage
+ * ```tsx
+ * import { registerFmcpButton } from '@frontmcp/ui/web-components';
+ *
+ * registerFmcpButton();
+ *
+ * function App() {
+ *   return (
+ *     <fmcp-button variant="primary" onClick={handleClick}>
+ *       Click Me
+ *     </fmcp-button>
+ *   );
+ * }
+ * ```
+ *
+ * @example Tree-shakeable imports
+ * ```typescript
+ * import { registerFmcpButton, registerFmcpCard } from '@frontmcp/ui/web-components';
+ *
+ * // Only register the components you need
+ * registerFmcpButton();
+ * registerFmcpCard();
+ * ```
+ *
+ * @module @frontmcp/ui/web-components
+ */
+export { FmcpElement, type FmcpElementConfig, type FmcpRenderEventDetail, parseAttributeValue, kebabToCamel, camelToKebab, getObservedAttributesFromSchema, mergeAttributeIntoOptions, type ParsedAttribute, } from './core';
+export { FmcpButton, FmcpCard, FmcpAlert, FmcpBadge, FmcpInput, FmcpSelect } from './elements';
+export { registerAllComponents, registerFmcpButton, registerFmcpCard, registerFmcpAlert, registerFmcpBadge, registerFmcpInput, registerFmcpSelect, } from './register';
+export type { FmcpButtonProps, FmcpCardProps, FmcpAlertProps, FmcpBadgeProps, FmcpInputProps, FmcpSelectProps, } from './types';
+import './types';

package/src/web-components/index.js

@@ -0,0 +1,75 @@
+"use strict";
+/**
+ * @file index.ts
+ * @description FrontMCP Web Components - Custom Elements for React/Vue/HTML.
+ *
+ * This module provides Web Components (Custom Elements) that wrap the
+ * FrontMCP UI HTML functions, allowing native usage in any framework.
+ *
+ * @example Basic usage
+ * ```typescript
+ * import { registerAllComponents } from '@frontmcp/ui/web-components';
+ *
+ * // Register all components
+ * registerAllComponents();
+ *
+ * // Use in HTML
+ * // <fmcp-button variant="primary">Click Me</fmcp-button>
+ * ```
+ *
+ * @example React usage
+ * ```tsx
+ * import { registerFmcpButton } from '@frontmcp/ui/web-components';
+ *
+ * registerFmcpButton();
+ *
+ * function App() {
+ *   return (
+ *     <fmcp-button variant="primary" onClick={handleClick}>
+ *       Click Me
+ *     </fmcp-button>
+ *   );
+ * }
+ * ```
+ *
+ * @example Tree-shakeable imports
+ * ```typescript
+ * import { registerFmcpButton, registerFmcpCard } from '@frontmcp/ui/web-components';
+ *
+ * // Only register the components you need
+ * registerFmcpButton();
+ * registerFmcpCard();
+ * ```
+ *
+ * @module @frontmcp/ui/web-components
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.registerFmcpSelect = exports.registerFmcpInput = exports.registerFmcpBadge = exports.registerFmcpAlert = exports.registerFmcpCard = exports.registerFmcpButton = exports.registerAllComponents = exports.FmcpSelect = exports.FmcpInput = exports.FmcpBadge = exports.FmcpAlert = exports.FmcpCard = exports.FmcpButton = exports.mergeAttributeIntoOptions = exports.getObservedAttributesFromSchema = exports.camelToKebab = exports.kebabToCamel = exports.parseAttributeValue = exports.FmcpElement = void 0;
+// Core utilities
+var core_1 = require("./core");
+Object.defineProperty(exports, "FmcpElement", { enumerable: true, get: function () { return core_1.FmcpElement; } });
+Object.defineProperty(exports, "parseAttributeValue", { enumerable: true, get: function () { return core_1.parseAttributeValue; } });
+Object.defineProperty(exports, "kebabToCamel", { enumerable: true, get: function () { return core_1.kebabToCamel; } });
+Object.defineProperty(exports, "camelToKebab", { enumerable: true, get: function () { return core_1.camelToKebab; } });
+Object.defineProperty(exports, "getObservedAttributesFromSchema", { enumerable: true, get: function () { return core_1.getObservedAttributesFromSchema; } });
+Object.defineProperty(exports, "mergeAttributeIntoOptions", { enumerable: true, get: function () { return core_1.mergeAttributeIntoOptions; } });
+// Element classes
+var elements_1 = require("./elements");
+Object.defineProperty(exports, "FmcpButton", { enumerable: true, get: function () { return elements_1.FmcpButton; } });
+Object.defineProperty(exports, "FmcpCard", { enumerable: true, get: function () { return elements_1.FmcpCard; } });
+Object.defineProperty(exports, "FmcpAlert", { enumerable: true, get: function () { return elements_1.FmcpAlert; } });
+Object.defineProperty(exports, "FmcpBadge", { enumerable: true, get: function () { return elements_1.FmcpBadge; } });
+Object.defineProperty(exports, "FmcpInput", { enumerable: true, get: function () { return elements_1.FmcpInput; } });
+Object.defineProperty(exports, "FmcpSelect", { enumerable: true, get: function () { return elements_1.FmcpSelect; } });
+// Registration functions
+var register_1 = require("./register");
+Object.defineProperty(exports, "registerAllComponents", { enumerable: true, get: function () { return register_1.registerAllComponents; } });
+Object.defineProperty(exports, "registerFmcpButton", { enumerable: true, get: function () { return register_1.registerFmcpButton; } });
+Object.defineProperty(exports, "registerFmcpCard", { enumerable: true, get: function () { return register_1.registerFmcpCard; } });
+Object.defineProperty(exports, "registerFmcpAlert", { enumerable: true, get: function () { return register_1.registerFmcpAlert; } });
+Object.defineProperty(exports, "registerFmcpBadge", { enumerable: true, get: function () { return register_1.registerFmcpBadge; } });
+Object.defineProperty(exports, "registerFmcpInput", { enumerable: true, get: function () { return register_1.registerFmcpInput; } });
+Object.defineProperty(exports, "registerFmcpSelect", { enumerable: true, get: function () { return register_1.registerFmcpSelect; } });
+// Import types for side-effect (JSX augmentation)
+require("./types");
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/web-components/index.ts"],"names":[],"mappings":";AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2CG;;;AAEH,iBAAiB;AACjB,+BAUgB;AATd,mGAAA,WAAW,OAAA;AAGX,2GAAA,mBAAmB,OAAA;AACnB,oGAAA,YAAY,OAAA;AACZ,oGAAA,YAAY,OAAA;AACZ,uHAAA,+BAA+B,OAAA;AAC/B,iHAAA,yBAAyB,OAAA;AAI3B,kBAAkB;AAClB,uCAA+F;AAAtF,sGAAA,UAAU,OAAA;AAAE,oGAAA,QAAQ,OAAA;AAAE,qGAAA,SAAS,OAAA;AAAE,qGAAA,SAAS,OAAA;AAAE,qGAAA,SAAS,OAAA;AAAE,sGAAA,UAAU,OAAA;AAE1E,yBAAyB;AACzB,uCAQoB;AAPlB,iHAAA,qBAAqB,OAAA;AACrB,8GAAA,kBAAkB,OAAA;AAClB,4GAAA,gBAAgB,OAAA;AAChB,6GAAA,iBAAiB,OAAA;AACjB,6GAAA,iBAAiB,OAAA;AACjB,6GAAA,iBAAiB,OAAA;AACjB,8GAAA,kBAAkB,OAAA;AAapB,kDAAkD;AAClD,mBAAiB","sourcesContent":["/**\n * @file index.ts\n * @description FrontMCP Web Components - Custom Elements for React/Vue/HTML.\n *\n * This module provides Web Components (Custom Elements) that wrap the\n * FrontMCP UI HTML functions, allowing native usage in any framework.\n *\n * @example Basic usage\n * ```typescript\n * import { registerAllComponents } from '@frontmcp/ui/web-components';\n *\n * // Register all components\n * registerAllComponents();\n *\n * // Use in HTML\n * // <fmcp-button variant=\"primary\">Click Me</fmcp-button>\n * ```\n *\n * @example React usage\n * ```tsx\n * import { registerFmcpButton } from '@frontmcp/ui/web-components';\n *\n * registerFmcpButton();\n *\n * function App() {\n *   return (\n *     <fmcp-button variant=\"primary\" onClick={handleClick}>\n *       Click Me\n *     </fmcp-button>\n *   );\n * }\n * ```\n *\n * @example Tree-shakeable imports\n * ```typescript\n * import { registerFmcpButton, registerFmcpCard } from '@frontmcp/ui/web-components';\n *\n * // Only register the components you need\n * registerFmcpButton();\n * registerFmcpCard();\n * ```\n *\n * @module @frontmcp/ui/web-components\n */\n\n// Core utilities\nexport {\n  FmcpElement,\n  type FmcpElementConfig,\n  type FmcpRenderEventDetail,\n  parseAttributeValue,\n  kebabToCamel,\n  camelToKebab,\n  getObservedAttributesFromSchema,\n  mergeAttributeIntoOptions,\n  type ParsedAttribute,\n} from './core';\n\n// Element classes\nexport { FmcpButton, FmcpCard, FmcpAlert, FmcpBadge, FmcpInput, FmcpSelect } from './elements';\n\n// Registration functions\nexport {\n  registerAllComponents,\n  registerFmcpButton,\n  registerFmcpCard,\n  registerFmcpAlert,\n  registerFmcpBadge,\n  registerFmcpInput,\n  registerFmcpSelect,\n} from './register';\n\n// Type declarations (side-effect import for JSX types)\nexport type {\n  FmcpButtonProps,\n  FmcpCardProps,\n  FmcpAlertProps,\n  FmcpBadgeProps,\n  FmcpInputProps,\n  FmcpSelectProps,\n} from './types';\n\n// Import types for side-effect (JSX augmentation)\nimport './types';\n"]}

package/src/web-components/register.d.ts

@@ -0,0 +1,56 @@
+/**
+ * @file register.ts
+ * @description Registration utilities for FrontMCP Web Components.
+ *
+ * Provides functions to register custom elements either all at once
+ * or individually for tree-shaking optimization.
+ *
+ * @example Register all components
+ * ```typescript
+ * import { registerAllComponents } from '@frontmcp/ui/web-components';
+ *
+ * // Register all FrontMCP components
+ * registerAllComponents();
+ *
+ * // Then use in HTML:
+ * // <fmcp-button variant="primary">Click</fmcp-button>
+ * ```
+ *
+ * @example Register individual components (tree-shakeable)
+ * ```typescript
+ * import { registerFmcpButton, registerFmcpCard } from '@frontmcp/ui/web-components';
+ *
+ * // Only register what you need
+ * registerFmcpButton();
+ * registerFmcpCard();
+ * ```
+ *
+ * @module @frontmcp/ui/web-components/register
+ */
+import { registerFmcpButton } from './elements/fmcp-button';
+import { registerFmcpCard } from './elements/fmcp-card';
+import { registerFmcpAlert } from './elements/fmcp-alert';
+import { registerFmcpBadge } from './elements/fmcp-badge';
+import { registerFmcpInput } from './elements/fmcp-input';
+import { registerFmcpSelect } from './elements/fmcp-select';
+/**
+ * Register all FrontMCP Web Components.
+ *
+ * This function registers all available custom elements:
+ * - `<fmcp-button>` - Button component
+ * - `<fmcp-card>` - Card component
+ * - `<fmcp-alert>` - Alert/notification component
+ * - `<fmcp-badge>` - Badge component
+ * - `<fmcp-input>` - Form input component
+ * - `<fmcp-select>` - Form select component
+ *
+ * @example
+ * ```typescript
+ * import { registerAllComponents } from '@frontmcp/ui/web-components';
+ *
+ * // Call once on app startup
+ * registerAllComponents();
+ * ```
+ */
+export declare function registerAllComponents(): void;
+export { registerFmcpButton, registerFmcpCard, registerFmcpAlert, registerFmcpBadge, registerFmcpInput, registerFmcpSelect, };

package/src/web-components/register.js

@@ -0,0 +1,80 @@
+"use strict";
+/**
+ * @file register.ts
+ * @description Registration utilities for FrontMCP Web Components.
+ *
+ * Provides functions to register custom elements either all at once
+ * or individually for tree-shaking optimization.
+ *
+ * @example Register all components
+ * ```typescript
+ * import { registerAllComponents } from '@frontmcp/ui/web-components';
+ *
+ * // Register all FrontMCP components
+ * registerAllComponents();
+ *
+ * // Then use in HTML:
+ * // <fmcp-button variant="primary">Click</fmcp-button>
+ * ```
+ *
+ * @example Register individual components (tree-shakeable)
+ * ```typescript
+ * import { registerFmcpButton, registerFmcpCard } from '@frontmcp/ui/web-components';
+ *
+ * // Only register what you need
+ * registerFmcpButton();
+ * registerFmcpCard();
+ * ```
+ *
+ * @module @frontmcp/ui/web-components/register
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.registerFmcpSelect = exports.registerFmcpInput = exports.registerFmcpBadge = exports.registerFmcpAlert = exports.registerFmcpCard = exports.registerFmcpButton = void 0;
+exports.registerAllComponents = registerAllComponents;
+const fmcp_button_1 = require("./elements/fmcp-button");
+Object.defineProperty(exports, "registerFmcpButton", { enumerable: true, get: function () { return fmcp_button_1.registerFmcpButton; } });
+const fmcp_card_1 = require("./elements/fmcp-card");
+Object.defineProperty(exports, "registerFmcpCard", { enumerable: true, get: function () { return fmcp_card_1.registerFmcpCard; } });
+const fmcp_alert_1 = require("./elements/fmcp-alert");
+Object.defineProperty(exports, "registerFmcpAlert", { enumerable: true, get: function () { return fmcp_alert_1.registerFmcpAlert; } });
+const fmcp_badge_1 = require("./elements/fmcp-badge");
+Object.defineProperty(exports, "registerFmcpBadge", { enumerable: true, get: function () { return fmcp_badge_1.registerFmcpBadge; } });
+const fmcp_input_1 = require("./elements/fmcp-input");
+Object.defineProperty(exports, "registerFmcpInput", { enumerable: true, get: function () { return fmcp_input_1.registerFmcpInput; } });
+const fmcp_select_1 = require("./elements/fmcp-select");
+Object.defineProperty(exports, "registerFmcpSelect", { enumerable: true, get: function () { return fmcp_select_1.registerFmcpSelect; } });
+/**
+ * Register all FrontMCP Web Components.
+ *
+ * This function registers all available custom elements:
+ * - `<fmcp-button>` - Button component
+ * - `<fmcp-card>` - Card component
+ * - `<fmcp-alert>` - Alert/notification component
+ * - `<fmcp-badge>` - Badge component
+ * - `<fmcp-input>` - Form input component
+ * - `<fmcp-select>` - Form select component
+ *
+ * @example
+ * ```typescript
+ * import { registerAllComponents } from '@frontmcp/ui/web-components';
+ *
+ * // Call once on app startup
+ * registerAllComponents();
+ * ```
+ */
+function registerAllComponents() {
+    (0, fmcp_button_1.registerFmcpButton)();
+    (0, fmcp_card_1.registerFmcpCard)();
+    (0, fmcp_alert_1.registerFmcpAlert)();
+    (0, fmcp_badge_1.registerFmcpBadge)();
+    (0, fmcp_input_1.registerFmcpInput)();
+    (0, fmcp_select_1.registerFmcpSelect)();
+}
+// Auto-register if script tag has data-auto-register attribute
+if (typeof window !== 'undefined' && typeof document !== 'undefined') {
+    const script = document.currentScript;
+    if (script?.hasAttribute('data-auto-register')) {
+        registerAllComponents();
+    }
+}
+//# sourceMappingURL=register.js.map

package/src/web-components/register.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"register.js","sourceRoot":"","sources":["../../../src/web-components/register.ts"],"names":[],"mappings":";AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4BG;;;AA4BH,sDAOC;AAjCD,wDAA4D;AAqC1D,mGArCO,gCAAkB,OAqCP;AApCpB,oDAAwD;AAqCtD,iGArCO,4BAAgB,OAqCP;AApClB,sDAA0D;AAqCxD,kGArCO,8BAAiB,OAqCP;AApCnB,sDAA0D;AAqCxD,kGArCO,8BAAiB,OAqCP;AApCnB,sDAA0D;AAqCxD,kGArCO,8BAAiB,OAqCP;AApCnB,wDAA4D;AAqC1D,mGArCO,gCAAkB,OAqCP;AAnCpB;;;;;;;;;;;;;;;;;;GAkBG;AACH,SAAgB,qBAAqB;IACnC,IAAA,gCAAkB,GAAE,CAAC;IACrB,IAAA,4BAAgB,GAAE,CAAC;IACnB,IAAA,8BAAiB,GAAE,CAAC;IACpB,IAAA,8BAAiB,GAAE,CAAC;IACpB,IAAA,8BAAiB,GAAE,CAAC;IACpB,IAAA,gCAAkB,GAAE,CAAC;AACvB,CAAC;AAYD,+DAA+D;AAC/D,IAAI,OAAO,MAAM,KAAK,WAAW,IAAI,OAAO,QAAQ,KAAK,WAAW,EAAE,CAAC;IACrE,MAAM,MAAM,GAAG,QAAQ,CAAC,aAAa,CAAC;IACtC,IAAI,MAAM,EAAE,YAAY,CAAC,oBAAoB,CAAC,EAAE,CAAC;QAC/C,qBAAqB,EAAE,CAAC;IAC1B,CAAC;AACH,CAAC","sourcesContent":["/**\n * @file register.ts\n * @description Registration utilities for FrontMCP Web Components.\n *\n * Provides functions to register custom elements either all at once\n * or individually for tree-shaking optimization.\n *\n * @example Register all components\n * ```typescript\n * import { registerAllComponents } from '@frontmcp/ui/web-components';\n *\n * // Register all FrontMCP components\n * registerAllComponents();\n *\n * // Then use in HTML:\n * // <fmcp-button variant=\"primary\">Click</fmcp-button>\n * ```\n *\n * @example Register individual components (tree-shakeable)\n * ```typescript\n * import { registerFmcpButton, registerFmcpCard } from '@frontmcp/ui/web-components';\n *\n * // Only register what you need\n * registerFmcpButton();\n * registerFmcpCard();\n * ```\n *\n * @module @frontmcp/ui/web-components/register\n */\n\nimport { registerFmcpButton } from './elements/fmcp-button';\nimport { registerFmcpCard } from './elements/fmcp-card';\nimport { registerFmcpAlert } from './elements/fmcp-alert';\nimport { registerFmcpBadge } from './elements/fmcp-badge';\nimport { registerFmcpInput } from './elements/fmcp-input';\nimport { registerFmcpSelect } from './elements/fmcp-select';\n\n/**\n * Register all FrontMCP Web Components.\n *\n * This function registers all available custom elements:\n * - `<fmcp-button>` - Button component\n * - `<fmcp-card>` - Card component\n * - `<fmcp-alert>` - Alert/notification component\n * - `<fmcp-badge>` - Badge component\n * - `<fmcp-input>` - Form input component\n * - `<fmcp-select>` - Form select component\n *\n * @example\n * ```typescript\n * import { registerAllComponents } from '@frontmcp/ui/web-components';\n *\n * // Call once on app startup\n * registerAllComponents();\n * ```\n */\nexport function registerAllComponents(): void {\n  registerFmcpButton();\n  registerFmcpCard();\n  registerFmcpAlert();\n  registerFmcpBadge();\n  registerFmcpInput();\n  registerFmcpSelect();\n}\n\n// Re-export individual registration functions\nexport {\n  registerFmcpButton,\n  registerFmcpCard,\n  registerFmcpAlert,\n  registerFmcpBadge,\n  registerFmcpInput,\n  registerFmcpSelect,\n};\n\n// Auto-register if script tag has data-auto-register attribute\nif (typeof window !== 'undefined' && typeof document !== 'undefined') {\n  const script = document.currentScript;\n  if (script?.hasAttribute('data-auto-register')) {\n    registerAllComponents();\n  }\n}\n"]}

package/src/web-components/types.d.ts

@@ -0,0 +1,121 @@
+/**
+ * @file types.ts
+ * @description TypeScript type declarations for FrontMCP Web Components.
+ *
+ * Provides JSX.IntrinsicElements augmentation for React/Preact compatibility,
+ * and HTMLElementTagNameMap augmentation for TypeScript DOM APIs.
+ *
+ * @example React usage with types
+ * ```tsx
+ * import '@frontmcp/ui/web-components'; // Includes type augmentations
+ *
+ * function App() {
+ *   return (
+ *     <fmcp-button variant="primary" onClick={handleClick}>
+ *       Click Me
+ *     </fmcp-button>
+ *   );
+ * }
+ * ```
+ *
+ * @module @frontmcp/ui/web-components/types
+ */
+import type { ButtonOptions } from '../components/button';
+import type { CardOptions } from '../components/card';
+import type { AlertOptions } from '../components/alert';
+import type { BadgeOptions } from '../components/badge';
+import type { InputOptions, SelectOptions } from '../components/form';
+/**
+ * Props for fmcp-button element
+ */
+export interface FmcpButtonProps extends Partial<ButtonOptions> {
+    children?: string;
+    class?: string;
+    style?: string;
+    'onfmcp:click'?: (e: CustomEvent) => void;
+    'onfmcp:render'?: (e: CustomEvent) => void;
+}
+/**
+ * Props for fmcp-card element
+ */
+export interface FmcpCardProps extends Partial<Omit<CardOptions, 'title'>> {
+    /** Card title (renamed to avoid conflict with HTMLElement.title) */
+    'card-title'?: string;
+    children?: string;
+    class?: string;
+    style?: string;
+    'onfmcp:render'?: (e: CustomEvent) => void;
+}
+/**
+ * Props for fmcp-alert element
+ */
+export interface FmcpAlertProps extends Partial<Omit<AlertOptions, 'title'>> {
+    /** Alert title (renamed to avoid conflict with HTMLElement.title) */
+    'alert-title'?: string;
+    children?: string;
+    class?: string;
+    style?: string;
+    'onfmcp:render'?: (e: CustomEvent) => void;
+}
+/**
+ * Props for fmcp-badge element
+ */
+export interface FmcpBadgeProps extends Partial<BadgeOptions> {
+    children?: string;
+    class?: string;
+    style?: string;
+    'onfmcp:render'?: (e: CustomEvent) => void;
+}
+/**
+ * Props for fmcp-input element
+ */
+export interface FmcpInputProps extends Partial<InputOptions> {
+    class?: string;
+    style?: string;
+    'onfmcp:input'?: (e: CustomEvent<{
+        value: string;
+        name: string;
+    }>) => void;
+    'onfmcp:change'?: (e: CustomEvent<{
+        value: string;
+        name: string;
+    }>) => void;
+    'onfmcp:render'?: (e: CustomEvent) => void;
+}
+/**
+ * Props for fmcp-select element
+ */
+export interface FmcpSelectProps extends Partial<SelectOptions> {
+    class?: string;
+    style?: string;
+    'onfmcp:change'?: (e: CustomEvent<{
+        value: string;
+        name: string;
+        selectedOptions: string[];
+    }>) => void;
+    'onfmcp:render'?: (e: CustomEvent) => void;
+}
+declare global {
+    /**
+     * HTMLElementTagNameMap augmentation for DOM APIs
+     */
+    interface HTMLElementTagNameMap {
+        'fmcp-button': HTMLElement & FmcpButtonProps;
+        'fmcp-card': HTMLElement & FmcpCardProps;
+        'fmcp-alert': HTMLElement & FmcpAlertProps;
+        'fmcp-badge': HTMLElement & FmcpBadgeProps;
+        'fmcp-input': HTMLElement & FmcpInputProps;
+        'fmcp-select': HTMLElement & FmcpSelectProps;
+    }
+    namespace JSX {
+        interface IntrinsicElements {
+            'fmcp-button': React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement> & FmcpButtonProps, HTMLElement>;
+            'fmcp-card': React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement> & FmcpCardProps, HTMLElement>;
+            'fmcp-alert': React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement> & FmcpAlertProps, HTMLElement>;
+            'fmcp-badge': React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement> & FmcpBadgeProps, HTMLElement>;
+            'fmcp-input': React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement> & FmcpInputProps, HTMLElement>;
+            'fmcp-select': React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement> & FmcpSelectProps, HTMLElement>;
+        }
+    }
+}
+export {};

package/src/web-components/types.js

@@ -0,0 +1,25 @@
+"use strict";
+/**
+ * @file types.ts
+ * @description TypeScript type declarations for FrontMCP Web Components.
+ *
+ * Provides JSX.IntrinsicElements augmentation for React/Preact compatibility,
+ * and HTMLElementTagNameMap augmentation for TypeScript DOM APIs.
+ *
+ * @example React usage with types
+ * ```tsx
+ * import '@frontmcp/ui/web-components'; // Includes type augmentations
+ *
+ * function App() {
+ *   return (
+ *     <fmcp-button variant="primary" onClick={handleClick}>
+ *       Click Me
+ *     </fmcp-button>
+ *   );
+ * }
+ * ```
+ *
+ * @module @frontmcp/ui/web-components/types
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+//# sourceMappingURL=types.js.map

package/src/web-components/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../src/web-components/types.ts"],"names":[],"mappings":";AAAA;;;;;;;;;;;;;;;;;;;;;GAqBG","sourcesContent":["/**\n * @file types.ts\n * @description TypeScript type declarations for FrontMCP Web Components.\n *\n * Provides JSX.IntrinsicElements augmentation for React/Preact compatibility,\n * and HTMLElementTagNameMap augmentation for TypeScript DOM APIs.\n *\n * @example React usage with types\n * ```tsx\n * import '@frontmcp/ui/web-components'; // Includes type augmentations\n *\n * function App() {\n *   return (\n *     <fmcp-button variant=\"primary\" onClick={handleClick}>\n *       Click Me\n *     </fmcp-button>\n *   );\n * }\n * ```\n *\n * @module @frontmcp/ui/web-components/types\n */\n\nimport type { ButtonOptions } from '../components/button';\nimport type { CardOptions } from '../components/card';\nimport type { AlertOptions } from '../components/alert';\nimport type { BadgeOptions } from '../components/badge';\nimport type { InputOptions, SelectOptions } from '../components/form';\n\n// ============================================\n// Web Component Props Interfaces\n// ============================================\n\n/**\n * Props for fmcp-button element\n */\nexport interface FmcpButtonProps extends Partial<ButtonOptions> {\n  children?: string;\n  class?: string;\n  style?: string;\n  'onfmcp:click'?: (e: CustomEvent) => void;\n  'onfmcp:render'?: (e: CustomEvent) => void;\n}\n\n/**\n * Props for fmcp-card element\n */\nexport interface FmcpCardProps extends Partial<Omit<CardOptions, 'title'>> {\n  /** Card title (renamed to avoid conflict with HTMLElement.title) */\n  'card-title'?: string;\n  children?: string;\n  class?: string;\n  style?: string;\n  'onfmcp:render'?: (e: CustomEvent) => void;\n}\n\n/**\n * Props for fmcp-alert element\n */\nexport interface FmcpAlertProps extends Partial<Omit<AlertOptions, 'title'>> {\n  /** Alert title (renamed to avoid conflict with HTMLElement.title) */\n  'alert-title'?: string;\n  children?: string;\n  class?: string;\n  style?: string;\n  'onfmcp:render'?: (e: CustomEvent) => void;\n}\n\n/**\n * Props for fmcp-badge element\n */\nexport interface FmcpBadgeProps extends Partial<BadgeOptions> {\n  children?: string;\n  class?: string;\n  style?: string;\n  'onfmcp:render'?: (e: CustomEvent) => void;\n}\n\n/**\n * Props for fmcp-input element\n */\nexport interface FmcpInputProps extends Partial<InputOptions> {\n  class?: string;\n  style?: string;\n  'onfmcp:input'?: (e: CustomEvent<{ value: string; name: string }>) => void;\n  'onfmcp:change'?: (e: CustomEvent<{ value: string; name: string }>) => void;\n  'onfmcp:render'?: (e: CustomEvent) => void;\n}\n\n/**\n * Props for fmcp-select element\n */\nexport interface FmcpSelectProps extends Partial<SelectOptions> {\n  class?: string;\n  style?: string;\n  'onfmcp:change'?: (e: CustomEvent<{ value: string; name: string; selectedOptions: string[] }>) => void;\n  'onfmcp:render'?: (e: CustomEvent) => void;\n}\n\n// ============================================\n// Global Type Augmentations\n// ============================================\n\ndeclare global {\n  /**\n   * HTMLElementTagNameMap augmentation for DOM APIs\n   */\n  interface HTMLElementTagNameMap {\n    'fmcp-button': HTMLElement & FmcpButtonProps;\n    'fmcp-card': HTMLElement & FmcpCardProps;\n    'fmcp-alert': HTMLElement & FmcpAlertProps;\n    'fmcp-badge': HTMLElement & FmcpBadgeProps;\n    'fmcp-input': HTMLElement & FmcpInputProps;\n    'fmcp-select': HTMLElement & FmcpSelectProps;\n  }\n\n  // JSX namespace for React/Preact\n  namespace JSX {\n    interface IntrinsicElements {\n      'fmcp-button': React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement> & FmcpButtonProps, HTMLElement>;\n      'fmcp-card': React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement> & FmcpCardProps, HTMLElement>;\n      'fmcp-alert': React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement> & FmcpAlertProps, HTMLElement>;\n      'fmcp-badge': React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement> & FmcpBadgeProps, HTMLElement>;\n      'fmcp-input': React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement> & FmcpInputProps, HTMLElement>;\n      'fmcp-select': React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement> & FmcpSelectProps, HTMLElement>;\n    }\n  }\n}\n\n// This export is needed to make this a module\nexport {};\n"]}

package/src/widgets/index.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Widgets Module
+ *
+ * Specialized widgets for OpenAI App SDK and common UI patterns.
+ */
+export { type ResourceType, type ResourceMeta, type ResourceAction, type ResourceOptions, type ResourceListOptions, type CodePreviewOptions, type ImagePreviewOptions, resourceWidget, resourceList, resourceItem, codePreview, imagePreview, } from './resource';
+export { type ProgressBarOptions, type Step, type StepProgressOptions, type CircularProgressOptions, type StatusIndicatorOptions, type SkeletonOptions, progressBar, stepProgress, circularProgress, statusIndicator, skeleton, contentSkeleton, } from './progress';

package/src/widgets/index.js

@@ -0,0 +1,24 @@
+"use strict";
+/**
+ * Widgets Module
+ *
+ * Specialized widgets for OpenAI App SDK and common UI patterns.
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.contentSkeleton = exports.skeleton = exports.statusIndicator = exports.circularProgress = exports.stepProgress = exports.progressBar = exports.imagePreview = exports.codePreview = exports.resourceItem = exports.resourceList = exports.resourceWidget = void 0;
+// Resource widgets
+var resource_1 = require("./resource");
+Object.defineProperty(exports, "resourceWidget", { enumerable: true, get: function () { return resource_1.resourceWidget; } });
+Object.defineProperty(exports, "resourceList", { enumerable: true, get: function () { return resource_1.resourceList; } });
+Object.defineProperty(exports, "resourceItem", { enumerable: true, get: function () { return resource_1.resourceItem; } });
+Object.defineProperty(exports, "codePreview", { enumerable: true, get: function () { return resource_1.codePreview; } });
+Object.defineProperty(exports, "imagePreview", { enumerable: true, get: function () { return resource_1.imagePreview; } });
+// Progress widgets
+var progress_1 = require("./progress");
+Object.defineProperty(exports, "progressBar", { enumerable: true, get: function () { return progress_1.progressBar; } });
+Object.defineProperty(exports, "stepProgress", { enumerable: true, get: function () { return progress_1.stepProgress; } });
+Object.defineProperty(exports, "circularProgress", { enumerable: true, get: function () { return progress_1.circularProgress; } });
+Object.defineProperty(exports, "statusIndicator", { enumerable: true, get: function () { return progress_1.statusIndicator; } });
+Object.defineProperty(exports, "skeleton", { enumerable: true, get: function () { return progress_1.skeleton; } });
+Object.defineProperty(exports, "contentSkeleton", { enumerable: true, get: function () { return progress_1.contentSkeleton; } });
+//# sourceMappingURL=index.js.map

package/src/widgets/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/widgets/index.ts"],"names":[],"mappings":";AAAA;;;;GAIG;;;AAEH,mBAAmB;AACnB,uCAaoB;AALlB,0GAAA,cAAc,OAAA;AACd,wGAAA,YAAY,OAAA;AACZ,wGAAA,YAAY,OAAA;AACZ,uGAAA,WAAW,OAAA;AACX,wGAAA,YAAY,OAAA;AAGd,mBAAmB;AACnB,uCAaoB;AANlB,uGAAA,WAAW,OAAA;AACX,wGAAA,YAAY,OAAA;AACZ,4GAAA,gBAAgB,OAAA;AAChB,2GAAA,eAAe,OAAA;AACf,oGAAA,QAAQ,OAAA;AACR,2GAAA,eAAe,OAAA","sourcesContent":["/**\n * Widgets Module\n *\n * Specialized widgets for OpenAI App SDK and common UI patterns.\n */\n\n// Resource widgets\nexport {\n  type ResourceType,\n  type ResourceMeta,\n  type ResourceAction,\n  type ResourceOptions,\n  type ResourceListOptions,\n  type CodePreviewOptions,\n  type ImagePreviewOptions,\n  resourceWidget,\n  resourceList,\n  resourceItem,\n  codePreview,\n  imagePreview,\n} from './resource';\n\n// Progress widgets\nexport {\n  type ProgressBarOptions,\n  type Step,\n  type StepProgressOptions,\n  type CircularProgressOptions,\n  type StatusIndicatorOptions,\n  type SkeletonOptions,\n  progressBar,\n  stepProgress,\n  circularProgress,\n  statusIndicator,\n  skeleton,\n  contentSkeleton,\n} from './progress';\n"]}

package/src/widgets/progress.d.ts

@@ -0,0 +1,132 @@
+/**
+ * Progress and Status Widgets
+ *
+ * Components for displaying progress, loading states, and status information.
+ */
+/**
+ * Progress bar options
+ */
+export interface ProgressBarOptions {
+    /** Progress value (0-100) */
+    value: number;
+    /** Show percentage text */
+    showLabel?: boolean;
+    /** Label position */
+    labelPosition?: 'inside' | 'outside' | 'none';
+    /** Size */
+    size?: 'sm' | 'md' | 'lg';
+    /** Color variant */
+    variant?: 'primary' | 'success' | 'warning' | 'danger' | 'info';
+    /** Animated (striped) */
+    animated?: boolean;
+    /** Additional CSS classes */
+    className?: string;
+    /** Custom label */
+    label?: string;
+}
+/**
+ * Build a progress bar
+ */
+export declare function progressBar(options: ProgressBarOptions): string;
+/**
+ * Step definition
+ */
+export interface Step {
+    /** Step label */
+    label: string;
+    /** Step description */
+    description?: string;
+    /** Step status */
+    status: 'completed' | 'current' | 'upcoming';
+    /** Icon (optional) */
+    icon?: string;
+    /** URL for clickable steps */
+    href?: string;
+}
+/**
+ * Multi-step progress options
+ */
+export interface StepProgressOptions {
+    /** Steps */
+    steps: Step[];
+    /** Orientation */
+    orientation?: 'horizontal' | 'vertical';
+    /** Connector style */
+    connector?: 'line' | 'dashed' | 'none';
+    /** Additional CSS classes */
+    className?: string;
+}
+/**
+ * Build a multi-step progress indicator
+ */
+export declare function stepProgress(options: StepProgressOptions): string;
+/**
+ * Circular progress options
+ */
+export interface CircularProgressOptions {
+    /** Progress value (0-100) */
+    value: number;
+    /** Size in pixels */
+    size?: number;
+    /** Stroke width */
+    strokeWidth?: number;
+    /** Color variant */
+    variant?: 'primary' | 'success' | 'warning' | 'danger';
+    /** Show percentage */
+    showLabel?: boolean;
+    /** Custom label */
+    label?: string;
+    /** Additional CSS classes */
+    className?: string;
+}
+/**
+ * Build a circular progress indicator
+ */
+export declare function circularProgress(options: CircularProgressOptions): string;
+/**
+ * Status indicator options
+ */
+export interface StatusIndicatorOptions {
+    /** Status state */
+    status: 'online' | 'offline' | 'busy' | 'away' | 'loading' | 'error' | 'success';
+    /** Status label */
+    label?: string;
+    /** Size */
+    size?: 'sm' | 'md' | 'lg';
+    /** Show pulse animation */
+    pulse?: boolean;
+    /** Additional CSS classes */
+    className?: string;
+}
+/**
+ * Build a status indicator
+ */
+export declare function statusIndicator(options: StatusIndicatorOptions): string;
+/**
+ * Skeleton loader options
+ */
+export interface SkeletonOptions {
+    /** Skeleton type */
+    type?: 'text' | 'circle' | 'rect' | 'card';
+    /** Width (CSS value) */
+    width?: string;
+    /** Height (CSS value) */
+    height?: string;
+    /** Number of text lines */
+    lines?: number;
+    /** Animated */
+    animated?: boolean;
+    /** Additional CSS classes */
+    className?: string;
+}
+/**
+ * Build a skeleton loader
+ */
+export declare function skeleton(options?: SkeletonOptions): string;
+/**
+ * Build a content skeleton with avatar and text
+ */
+export declare function contentSkeleton(options?: {
+    animated?: boolean;
+    className?: string;
+}): string;