@frontmcp/ui 0.5.0

package/src/bundler/types.js

@@ -0,0 +1,132 @@
+"use strict";
+/**
+ * Bundler Types
+ *
+ * Type definitions for the in-memory bundler system.
+ *
+ * @packageDocumentation
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DEFAULT_BUNDLER_OPTIONS = exports.DEFAULT_BUNDLE_OPTIONS = exports.DEFAULT_SECURITY_POLICY = void 0;
+// ============================================
+// Default Values
+// ============================================
+/**
+ * Default security policy.
+ */
+exports.DEFAULT_SECURITY_POLICY = {
+    allowedImports: [/^react$/, /^react-dom$/, /^react\/jsx-runtime$/, /^react\/jsx-dev-runtime$/, /^@frontmcp\/ui/],
+    blockedImports: [
+        /^fs$/,
+        /^fs\//,
+        /^net$/,
+        /^child_process$/,
+        /^os$/,
+        /^path$/,
+        /^crypto$/,
+        /^http$/,
+        /^https$/,
+        /^dgram$/,
+        /^dns$/,
+        /^cluster$/,
+        /^readline$/,
+        /^repl$/,
+        /^tls$/,
+        /^vm$/,
+        /^worker_threads$/,
+    ],
+    maxBundleSize: 512000, // 500KB
+    maxTransformTime: 5000, // 5s
+    noEval: true,
+    noDynamicImports: true,
+    noRequire: true,
+    allowedGlobals: [
+        'console',
+        'Math',
+        'JSON',
+        'Date',
+        'Array',
+        'Object',
+        'String',
+        'Number',
+        'Boolean',
+        'Promise',
+        'Map',
+        'Set',
+        'WeakMap',
+        'WeakSet',
+        'Symbol',
+        'Reflect',
+        'Proxy',
+        'Error',
+        'TypeError',
+        'RangeError',
+        'SyntaxError',
+        'ReferenceError',
+        'parseInt',
+        'parseFloat',
+        'isNaN',
+        'isFinite',
+        'encodeURI',
+        'encodeURIComponent',
+        'decodeURI',
+        'decodeURIComponent',
+        'setTimeout',
+        'clearTimeout',
+        'setInterval',
+        'clearInterval',
+        'atob',
+        'btoa',
+        'Intl',
+        'TextEncoder',
+        'TextDecoder',
+        'URL',
+        'URLSearchParams',
+        'Uint8Array',
+        'Int8Array',
+        'Uint16Array',
+        'Int16Array',
+        'Uint32Array',
+        'Int32Array',
+        'Float32Array',
+        'Float64Array',
+        'BigInt',
+        'BigInt64Array',
+        'BigUint64Array',
+        'ArrayBuffer',
+        'SharedArrayBuffer',
+        'DataView',
+        'queueMicrotask',
+    ],
+};
+/**
+ * Default bundle options.
+ */
+exports.DEFAULT_BUNDLE_OPTIONS = {
+    sourceType: 'auto',
+    format: 'iife',
+    minify: false,
+    sourceMaps: false,
+    externals: ['react', 'react-dom'],
+    jsx: {
+        runtime: 'automatic',
+        importSource: 'react',
+    },
+    target: 'es2020',
+    globalName: 'Widget',
+    skipCache: false,
+};
+/**
+ * Default bundler options.
+ */
+exports.DEFAULT_BUNDLER_OPTIONS = {
+    defaultSecurity: exports.DEFAULT_SECURITY_POLICY,
+    cache: {
+        maxSize: 100,
+        ttl: 300000, // 5 minutes
+        disabled: false,
+    },
+    verbose: false,
+    esbuildOptions: {},
+};
+//# sourceMappingURL=types.js.map

package/src/bundler/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../src/bundler/types.ts"],"names":[],"mappings":";AAAA;;;;;;GAMG;;;AAibH,+CAA+C;AAC/C,iBAAiB;AACjB,+CAA+C;AAE/C;;GAEG;AACU,QAAA,uBAAuB,GAAmB;IACrD,cAAc,EAAE,CAAC,SAAS,EAAE,aAAa,EAAE,sBAAsB,EAAE,0BAA0B,EAAE,gBAAgB,CAAC;IAChH,cAAc,EAAE;QACd,MAAM;QACN,OAAO;QACP,OAAO;QACP,iBAAiB;QACjB,MAAM;QACN,QAAQ;QACR,UAAU;QACV,QAAQ;QACR,SAAS;QACT,SAAS;QACT,OAAO;QACP,WAAW;QACX,YAAY;QACZ,QAAQ;QACR,OAAO;QACP,MAAM;QACN,kBAAkB;KACnB;IACD,aAAa,EAAE,MAAM,EAAE,QAAQ;IAC/B,gBAAgB,EAAE,IAAI,EAAE,KAAK;IAC7B,MAAM,EAAE,IAAI;IACZ,gBAAgB,EAAE,IAAI;IACtB,SAAS,EAAE,IAAI;IACf,cAAc,EAAE;QACd,SAAS;QACT,MAAM;QACN,MAAM;QACN,MAAM;QACN,OAAO;QACP,QAAQ;QACR,QAAQ;QACR,QAAQ;QACR,SAAS;QACT,SAAS;QACT,KAAK;QACL,KAAK;QACL,SAAS;QACT,SAAS;QACT,QAAQ;QACR,SAAS;QACT,OAAO;QACP,OAAO;QACP,WAAW;QACX,YAAY;QACZ,aAAa;QACb,gBAAgB;QAChB,UAAU;QACV,YAAY;QACZ,OAAO;QACP,UAAU;QACV,WAAW;QACX,oBAAoB;QACpB,WAAW;QACX,oBAAoB;QACpB,YAAY;QACZ,cAAc;QACd,aAAa;QACb,eAAe;QACf,MAAM;QACN,MAAM;QACN,MAAM;QACN,aAAa;QACb,aAAa;QACb,KAAK;QACL,iBAAiB;QACjB,YAAY;QACZ,WAAW;QACX,aAAa;QACb,YAAY;QACZ,aAAa;QACb,YAAY;QACZ,cAAc;QACd,cAAc;QACd,QAAQ;QACR,eAAe;QACf,gBAAgB;QAChB,aAAa;QACb,mBAAmB;QACnB,UAAU;QACV,gBAAgB;KACjB;CACF,CAAC;AAEF;;GAEG;AACU,QAAA,sBAAsB,GAK/B;IACF,UAAU,EAAE,MAAM;IAClB,MAAM,EAAE,MAAM;IACd,MAAM,EAAE,KAAK;IACb,UAAU,EAAE,KAAK;IACjB,SAAS,EAAE,CAAC,OAAO,EAAE,WAAW,CAAC;IACjC,GAAG,EAAE;QACH,OAAO,EAAE,WAAW;QACpB,YAAY,EAAE,OAAO;KACtB;IACD,MAAM,EAAE,QAAQ;IAChB,UAAU,EAAE,QAAQ;IACpB,SAAS,EAAE,KAAK;CACjB,CAAC;AAEF;;GAEG;AACU,QAAA,uBAAuB,GAA6B;IAC/D,eAAe,EAAE,+BAAuB;IACxC,KAAK,EAAE;QACL,OAAO,EAAE,GAAG;QACZ,GAAG,EAAE,MAAM,EAAE,YAAY;QACzB,QAAQ,EAAE,KAAK;KAChB;IACD,OAAO,EAAE,KAAK;IACd,cAAc,EAAE,EAAE;CACnB,CAAC","sourcesContent":["/**\n * Bundler Types\n *\n * Type definitions for the in-memory bundler system.\n *\n * @packageDocumentation\n */\n\n// ============================================\n// Source Types\n// ============================================\n\n/**\n * Source type for bundler input.\n */\nexport type SourceType = 'jsx' | 'tsx' | 'mdx' | 'html' | 'auto';\n\n/**\n * Output format for bundles.\n */\nexport type OutputFormat = 'iife' | 'esm' | 'cjs';\n\n// ============================================\n// Bundle Options\n// ============================================\n\n/**\n * Options for bundling source code.\n */\nexport interface BundleOptions {\n  /**\n   * Source code to bundle.\n   */\n  source: string;\n\n  /**\n   * Source type (jsx, tsx, mdx, html, or auto).\n   * @default 'auto'\n   */\n  sourceType?: SourceType;\n\n  /**\n   * Output format.\n   * @default 'iife'\n   */\n  format?: OutputFormat;\n\n  /**\n   * Minify output code.\n   * @default false\n   */\n  minify?: boolean;\n\n  /**\n   * Generate source maps.\n   * @default false\n   */\n  sourceMaps?: boolean | 'inline';\n\n  /**\n   * External modules (not bundled).\n   * @default ['react', 'react-dom']\n   */\n  externals?: string[];\n\n  /**\n   * JSX configuration.\n   */\n  jsx?: {\n    /**\n     * JSX runtime mode.\n     * @default 'automatic'\n     */\n    runtime?: 'automatic' | 'classic';\n\n    /**\n     * Import source for automatic runtime.\n     * @default 'react'\n     */\n    importSource?: string;\n  };\n\n  /**\n   * Security policy for bundling.\n   */\n  security?: SecurityPolicy;\n\n  /**\n   * Target environment.\n   * @default 'es2020'\n   */\n  target?: string;\n\n  /**\n   * Global variable name for IIFE format.\n   * @default 'Widget'\n   */\n  globalName?: string;\n\n  /**\n   * Cache key override. If not provided, computed from source hash.\n   */\n  cacheKey?: string;\n\n  /**\n   * Skip cache lookup.\n   * @default false\n   */\n  skipCache?: boolean;\n}\n\n/**\n * Options specifically for SSR bundling.\n */\nexport interface SSRBundleOptions extends BundleOptions {\n  /**\n   * Context data to inject during SSR.\n   */\n  context?: Record<string, unknown>;\n\n  /**\n   * Component export name to render.\n   * @default 'default'\n   */\n  componentExport?: string;\n\n  /**\n   * Whether to include hydration script.\n   * @default false\n   */\n  includeHydration?: boolean;\n}\n\n// ============================================\n// Bundle Result\n// ============================================\n\n/**\n * Result of a bundle operation.\n */\nexport interface BundleResult {\n  /**\n   * Bundled/transformed code.\n   */\n  code: string;\n\n  /**\n   * Content hash of the bundle.\n   */\n  hash: string;\n\n  /**\n   * Whether result was served from cache.\n   */\n  cached: boolean;\n\n  /**\n   * Bundle size in bytes.\n   */\n  size: number;\n\n  /**\n   * Source map (if generated).\n   */\n  map?: string;\n\n  /**\n   * Performance metrics.\n   */\n  metrics: BundleMetrics;\n\n  /**\n   * Detected or specified source type.\n   */\n  sourceType: SourceType;\n\n  /**\n   * Output format used.\n   */\n  format: OutputFormat;\n}\n\n/**\n * Performance metrics for bundling.\n */\nexport interface BundleMetrics {\n  /**\n   * Time to transform source (ms).\n   */\n  transformTime: number;\n\n  /**\n   * Time to bundle (ms).\n   */\n  bundleTime: number;\n\n  /**\n   * Total processing time (ms).\n   */\n  totalTime: number;\n\n  /**\n   * Cache lookup time (ms).\n   */\n  cacheTime?: number;\n}\n\n// ============================================\n// SSR Result\n// ============================================\n\n/**\n * Result of SSR rendering.\n */\nexport interface SSRResult extends BundleResult {\n  /**\n   * Rendered HTML output.\n   */\n  html: string;\n\n  /**\n   * Hydration script (if included).\n   */\n  hydrationScript?: string;\n\n  /**\n   * SSR-specific metrics.\n   */\n  ssrMetrics: {\n    /**\n     * Time to render component (ms).\n     */\n    renderTime: number;\n  };\n}\n\n// ============================================\n// Security Policy\n// ============================================\n\n/**\n * Security policy for bundler execution.\n */\nexport interface SecurityPolicy {\n  /**\n   * Allowed import patterns (regex).\n   * @default [/^react/, /^@frontmcp\\/ui/]\n   */\n  allowedImports?: RegExp[];\n\n  /**\n   * Blocked import patterns (regex).\n   * @default [/^fs/, /^net/, /^child_process/, /^os/, /^path/]\n   */\n  blockedImports?: RegExp[];\n\n  /**\n   * Maximum bundle size in bytes.\n   * @default 512000 (500KB)\n   */\n  maxBundleSize?: number;\n\n  /**\n   * Maximum transform time in ms.\n   * @default 5000 (5s)\n   */\n  maxTransformTime?: number;\n\n  /**\n   * Block eval() and Function() usage.\n   * @default true\n   */\n  noEval?: boolean;\n\n  /**\n   * Block dynamic imports.\n   * @default true\n   */\n  noDynamicImports?: boolean;\n\n  /**\n   * Block require() usage.\n   * @default true\n   */\n  noRequire?: boolean;\n\n  /**\n   * Allowed global variables.\n   * @default ['console', 'Math', 'JSON', 'Date', 'Array', 'Object', 'String', 'Number', 'Boolean', 'Promise', 'Map', 'Set', 'WeakMap', 'WeakSet', 'Symbol', 'Reflect', 'Proxy', 'Error', 'TypeError', 'RangeError', 'parseInt', 'parseFloat', 'isNaN', 'isFinite', 'encodeURI', 'encodeURIComponent', 'decodeURI', 'decodeURIComponent', 'setTimeout', 'clearTimeout', 'setInterval', 'clearInterval']\n   */\n  allowedGlobals?: string[];\n}\n\n// ============================================\n// Security Violation\n// ============================================\n\n/**\n * Security violation details.\n */\nexport interface SecurityViolation {\n  /**\n   * Type of violation.\n   */\n  type:\n    | 'blocked-import'\n    | 'disallowed-import'\n    | 'eval-usage'\n    | 'dynamic-import'\n    | 'require-usage'\n    | 'size-exceeded'\n    | 'timeout'\n    | 'blocked-global';\n\n  /**\n   * Human-readable message.\n   */\n  message: string;\n\n  /**\n   * Location in source (if available).\n   */\n  location?: {\n    line: number;\n    column: number;\n  };\n\n  /**\n   * Offending pattern/value.\n   */\n  value?: string;\n}\n\n// ============================================\n// Bundler Options\n// ============================================\n\n/**\n * Configuration options for creating a bundler instance.\n */\nexport interface BundlerOptions {\n  /**\n   * Default security policy.\n   */\n  defaultSecurity?: SecurityPolicy;\n\n  /**\n   * Cache configuration.\n   */\n  cache?: {\n    /**\n     * Maximum number of cached entries.\n     * @default 100\n     */\n    maxSize?: number;\n\n    /**\n     * TTL for cache entries in ms.\n     * @default 300000 (5 minutes)\n     */\n    ttl?: number;\n\n    /**\n     * Disable caching entirely.\n     * @default false\n     */\n    disabled?: boolean;\n  };\n\n  /**\n   * Enable verbose logging.\n   * @default false\n   */\n  verbose?: boolean;\n\n  /**\n   * Custom esbuild options.\n   */\n  esbuildOptions?: Record<string, unknown>;\n}\n\n// ============================================\n// Cache Entry\n// ============================================\n\n/**\n * Cache entry for bundled results.\n */\nexport interface CacheEntry {\n  /**\n   * Bundle result.\n   */\n  result: BundleResult;\n\n  /**\n   * Creation timestamp.\n   */\n  createdAt: number;\n\n  /**\n   * Last access timestamp.\n   */\n  lastAccessedAt: number;\n\n  /**\n   * Access count.\n   */\n  accessCount: number;\n}\n\n// ============================================\n// Transform Context\n// ============================================\n\n/**\n * Context for transform operations.\n */\nexport interface TransformContext {\n  /**\n   * Source type being transformed.\n   */\n  sourceType: SourceType;\n\n  /**\n   * File path (for source maps).\n   */\n  filename?: string;\n\n  /**\n   * Source code.\n   */\n  source: string;\n\n  /**\n   * Active security policy.\n   */\n  security: SecurityPolicy;\n}\n\n// ============================================\n// Default Values\n// ============================================\n\n/**\n * Default security policy.\n */\nexport const DEFAULT_SECURITY_POLICY: SecurityPolicy = {\n  allowedImports: [/^react$/, /^react-dom$/, /^react\\/jsx-runtime$/, /^react\\/jsx-dev-runtime$/, /^@frontmcp\\/ui/],\n  blockedImports: [\n    /^fs$/,\n    /^fs\\//,\n    /^net$/,\n    /^child_process$/,\n    /^os$/,\n    /^path$/,\n    /^crypto$/,\n    /^http$/,\n    /^https$/,\n    /^dgram$/,\n    /^dns$/,\n    /^cluster$/,\n    /^readline$/,\n    /^repl$/,\n    /^tls$/,\n    /^vm$/,\n    /^worker_threads$/,\n  ],\n  maxBundleSize: 512000, // 500KB\n  maxTransformTime: 5000, // 5s\n  noEval: true,\n  noDynamicImports: true,\n  noRequire: true,\n  allowedGlobals: [\n    'console',\n    'Math',\n    'JSON',\n    'Date',\n    'Array',\n    'Object',\n    'String',\n    'Number',\n    'Boolean',\n    'Promise',\n    'Map',\n    'Set',\n    'WeakMap',\n    'WeakSet',\n    'Symbol',\n    'Reflect',\n    'Proxy',\n    'Error',\n    'TypeError',\n    'RangeError',\n    'SyntaxError',\n    'ReferenceError',\n    'parseInt',\n    'parseFloat',\n    'isNaN',\n    'isFinite',\n    'encodeURI',\n    'encodeURIComponent',\n    'decodeURI',\n    'decodeURIComponent',\n    'setTimeout',\n    'clearTimeout',\n    'setInterval',\n    'clearInterval',\n    'atob',\n    'btoa',\n    'Intl',\n    'TextEncoder',\n    'TextDecoder',\n    'URL',\n    'URLSearchParams',\n    'Uint8Array',\n    'Int8Array',\n    'Uint16Array',\n    'Int16Array',\n    'Uint32Array',\n    'Int32Array',\n    'Float32Array',\n    'Float64Array',\n    'BigInt',\n    'BigInt64Array',\n    'BigUint64Array',\n    'ArrayBuffer',\n    'SharedArrayBuffer',\n    'DataView',\n    'queueMicrotask',\n  ],\n};\n\n/**\n * Default bundle options.\n */\nexport const DEFAULT_BUNDLE_OPTIONS: Required<\n  Pick<\n    BundleOptions,\n    'sourceType' | 'format' | 'minify' | 'sourceMaps' | 'externals' | 'jsx' | 'target' | 'globalName' | 'skipCache'\n  >\n> = {\n  sourceType: 'auto',\n  format: 'iife',\n  minify: false,\n  sourceMaps: false,\n  externals: ['react', 'react-dom'],\n  jsx: {\n    runtime: 'automatic',\n    importSource: 'react',\n  },\n  target: 'es2020',\n  globalName: 'Widget',\n  skipCache: false,\n};\n\n/**\n * Default bundler options.\n */\nexport const DEFAULT_BUNDLER_OPTIONS: Required<BundlerOptions> = {\n  defaultSecurity: DEFAULT_SECURITY_POLICY,\n  cache: {\n    maxSize: 100,\n    ttl: 300000, // 5 minutes\n    disabled: false,\n  },\n  verbose: false,\n  esbuildOptions: {},\n};\n"]}

package/src/components/alert.d.ts

@@ -0,0 +1,71 @@
+/**
+ * Alert Component
+ *
+ * Notification and message display components.
+ */
+/**
+ * Alert variant styles
+ */
+export type AlertVariant = 'info' | 'success' | 'warning' | 'danger' | 'neutral';
+/**
+ * Alert component options
+ */
+export interface AlertOptions {
+    /** Alert variant */
+    variant?: AlertVariant;
+    /** Alert title */
+    title?: string;
+    /** Show icon */
+    showIcon?: boolean;
+    /** Custom icon (overrides default) */
+    icon?: string;
+    /** Dismissible alert */
+    dismissible?: boolean;
+    /** Additional CSS classes */
+    className?: string;
+    /** Alert ID */
+    id?: string;
+    /** Actions (buttons) */
+    actions?: string;
+    /** HTMX for dismiss */
+    onDismiss?: {
+        delete?: string;
+        target?: string;
+        swap?: string;
+    };
+}
+/**
+ * Build an alert component
+ */
+export declare function alert(message: string, options?: AlertOptions): string;
+/** Info alert shorthand */
+export declare const infoAlert: (message: string, opts?: Omit<AlertOptions, "variant">) => string;
+/** Success alert shorthand */
+export declare const successAlert: (message: string, opts?: Omit<AlertOptions, "variant">) => string;
+/** Warning alert shorthand */
+export declare const warningAlert: (message: string, opts?: Omit<AlertOptions, "variant">) => string;
+/** Danger/error alert shorthand */
+export declare const dangerAlert: (message: string, opts?: Omit<AlertOptions, "variant">) => string;
+/**
+ * Toast notification options
+ */
+export interface ToastOptions {
+    /** Toast variant */
+    variant?: AlertVariant;
+    /** Toast title */
+    title?: string;
+    /** Duration in ms (0 = no auto-dismiss) */
+    duration?: number;
+    /** Position */
+    position?: 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left' | 'top-center' | 'bottom-center';
+    /** Toast ID */
+    id?: string;
+}
+/**
+ * Build a toast notification
+ */
+export declare function toast(message: string, options?: ToastOptions): string;
+/**
+ * Build a toast container (for multiple toasts)
+ */
+export declare function toastContainer(position?: ToastOptions['position'], id?: string): string;

package/src/components/alert.js

@@ -0,0 +1,189 @@
+"use strict";
+/**
+ * Alert Component
+ *
+ * Notification and message display components.
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.dangerAlert = exports.warningAlert = exports.successAlert = exports.infoAlert = void 0;
+exports.alert = alert;
+exports.toast = toast;
+exports.toastContainer = toastContainer;
+const base_1 = require("../layouts/base");
+// ============================================
+// Alert Icons
+// ============================================
+const 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>`,
+};
+// ============================================
+// Alert Builder
+// ============================================
+/**
+ * Get variant CSS classes
+ */
+function getVariantClasses(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];
+}
+/**
+ * Build an alert component
+ */
+function alert(message, options = {}) {
+    const { variant = 'info', title, showIcon = true, icon, dismissible = false, className = '', id, actions, onDismiss, } = options;
+    const variantClasses = getVariantClasses(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">${(0, base_1.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"
+        ${onDismiss?.delete
+            ? `hx-delete="${(0, base_1.escapeHtml)(onDismiss.delete)}"`
+            : `onclick="this.closest('.alert').remove()"`}
+        ${onDismiss?.target ? `hx-target="${(0, base_1.escapeHtml)(onDismiss.target)}"` : ''}
+        ${onDismiss?.swap ? `hx-swap="${(0, base_1.escapeHtml)(onDismiss.swap)}"` : ''}
+        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="${(0, base_1.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' : ''}">${(0, base_1.escapeHtml)(message)}</div>
+        ${actionsHtml}
+      </div>
+      ${dismissHtml}
+    </div>
+  </div>`;
+}
+// ============================================
+// Alert Presets
+// ============================================
+/** Info alert shorthand */
+const infoAlert = (message, opts) => alert(message, { ...opts, variant: 'info' });
+exports.infoAlert = infoAlert;
+/** Success alert shorthand */
+const successAlert = (message, opts) => alert(message, { ...opts, variant: 'success' });
+exports.successAlert = successAlert;
+/** Warning alert shorthand */
+const warningAlert = (message, opts) => alert(message, { ...opts, variant: 'warning' });
+exports.warningAlert = warningAlert;
+/** Danger/error alert shorthand */
+const dangerAlert = (message, opts) => alert(message, { ...opts, variant: 'danger' });
+exports.dangerAlert = dangerAlert;
+/**
+ * Build a toast notification
+ */
+function toast(message, options = {}) {
+    const { variant = 'info', title, duration = 5000, position = 'top-right', id = `toast-${Date.now()}` } = options;
+    const variantClasses = getVariantClasses(variant);
+    const positionClasses = {
+        'top-right': 'top-4 right-4',
+        'top-left': 'top-4 left-4',
+        'bottom-right': 'bottom-4 right-4',
+        'bottom-left': 'bottom-4 left-4',
+        'top-center': 'top-4 left-1/2 -translate-x-1/2',
+        'bottom-center': 'bottom-4 left-1/2 -translate-x-1/2',
+    };
+    const titleHtml = title ? `<h4 class="font-semibold">${(0, base_1.escapeHtml)(title)}</h4>` : '';
+    const autoDismissScript = duration > 0
+        ? `<script>
+        setTimeout(() => {
+          const toast = document.getElementById('${id}');
+          if (toast) {
+            toast.classList.add('opacity-0', 'translate-x-2');
+            setTimeout(() => toast.remove(), 300);
+          }
+        }, ${duration});
+      </script>`
+        : '';
+    return `<div
+    id="${(0, base_1.escapeHtml)(id)}"
+    class="fixed ${positionClasses[position]} z-50 min-w-[300px] max-w-md rounded-lg border shadow-lg ${variantClasses.container} transition-all duration-300 transform"
+    role="alert"
+  >
+    <div class="flex gap-3 p-4">
+      <div class="flex-shrink-0 ${variantClasses.icon}">
+        ${alertIcons[variant]}
+      </div>
+      <div class="flex-1">
+        ${titleHtml}
+        <p class="${title ? 'mt-1 text-sm opacity-90' : ''}">${(0, base_1.escapeHtml)(message)}</p>
+      </div>
+      <button
+        type="button"
+        class="flex-shrink-0 p-1 rounded hover:bg-black/5 transition-colors"
+        onclick="this.closest('#${id}').remove()"
+        aria-label="Close"
+      >
+        <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>
+    </div>
+  </div>
+  ${autoDismissScript}`;
+}
+/**
+ * Build a toast container (for multiple toasts)
+ */
+function toastContainer(position = 'top-right', id = 'toast-container') {
+    const positionClasses = {
+        'top-right': 'top-4 right-4',
+        'top-left': 'top-4 left-4',
+        'bottom-right': 'bottom-4 right-4',
+        'bottom-left': 'bottom-4 left-4',
+        'top-center': 'top-4 left-1/2 -translate-x-1/2',
+        'bottom-center': 'bottom-4 left-1/2 -translate-x-1/2',
+    };
+    return `<div id="${(0, base_1.escapeHtml)(id)}" class="fixed ${positionClasses[position]} z-50 flex flex-col gap-2"></div>`;
+}
+//# sourceMappingURL=alert.js.map

package/src/components/alert.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"alert.js","sourceRoot":"","sources":["../../../src/components/alert.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * Alert Component\n *\n * Notification and message display components.\n */\n\nimport { escapeHtml } from '../layouts/base';\n\n// ============================================\n// Alert Types\n// ============================================\n\n/**\n * Alert variant styles\n */\nexport type AlertVariant = 'info' | 'success' | 'warning' | 'danger' | 'neutral';\n\n/**\n * Alert component options\n */\nexport interface AlertOptions {\n  /** Alert variant */\n  variant?: AlertVariant;\n  /** Alert title */\n  title?: string;\n  /** Show icon */\n  showIcon?: boolean;\n  /** Custom icon (overrides default) */\n  icon?: string;\n  /** Dismissible alert */\n  dismissible?: boolean;\n  /** Additional CSS classes */\n  className?: string;\n  /** Alert ID */\n  id?: string;\n  /** Actions (buttons) */\n  actions?: string;\n  /** HTMX for dismiss */\n  onDismiss?: {\n    delete?: string;\n    target?: string;\n    swap?: string;\n  };\n}\n\n// ============================================\n// Alert Icons\n// ============================================\n\nconst alertIcons: Record<AlertVariant, string> = {\n  info: `<svg class=\"w-5 h-5\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n    <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\"/>\n  </svg>`,\n  success: `<svg class=\"w-5 h-5\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n    <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\"/>\n  </svg>`,\n  warning: `<svg class=\"w-5 h-5\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n    <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\"/>\n  </svg>`,\n  danger: `<svg class=\"w-5 h-5\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n    <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\"/>\n  </svg>`,\n  neutral: `<svg class=\"w-5 h-5\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n    <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\"/>\n  </svg>`,\n};\n\n// ============================================\n// Alert Builder\n// ============================================\n\n/**\n * Get variant CSS classes\n */\nfunction getVariantClasses(variant: AlertVariant): { container: string; icon: string } {\n  const variants: Record<AlertVariant, { container: string; icon: string }> = {\n    info: {\n      container: 'bg-blue-50 border-blue-200 text-blue-800',\n      icon: 'text-blue-500',\n    },\n    success: {\n      container: 'bg-success/10 border-success/30 text-success',\n      icon: 'text-success',\n    },\n    warning: {\n      container: 'bg-warning/10 border-warning/30 text-warning',\n      icon: 'text-warning',\n    },\n    danger: {\n      container: 'bg-danger/10 border-danger/30 text-danger',\n      icon: 'text-danger',\n    },\n    neutral: {\n      container: 'bg-gray-50 border-gray-200 text-gray-800',\n      icon: 'text-gray-500',\n    },\n  };\n  return variants[variant];\n}\n\n/**\n * Build an alert component\n */\nexport function alert(message: string, options: AlertOptions = {}): string {\n  const {\n    variant = 'info',\n    title,\n    showIcon = true,\n    icon,\n    dismissible = false,\n    className = '',\n    id,\n    actions,\n    onDismiss,\n  } = options;\n\n  const variantClasses = getVariantClasses(variant);\n\n  const baseClasses = ['rounded-lg border p-4', variantClasses.container, className].filter(Boolean).join(' ');\n\n  const iconHtml = showIcon\n    ? `<div class=\"flex-shrink-0 ${variantClasses.icon}\">\n        ${icon || alertIcons[variant]}\n      </div>`\n    : '';\n\n  const titleHtml = title ? `<h3 class=\"font-semibold\">${escapeHtml(title)}</h3>` : '';\n\n  const dismissHtml = dismissible\n    ? `<button\n        type=\"button\"\n        class=\"flex-shrink-0 ml-auto -mr-1 -mt-1 p-1 rounded hover:bg-black/5 transition-colors\"\n        ${\n          onDismiss?.delete\n            ? `hx-delete=\"${escapeHtml(onDismiss.delete)}\"`\n            : `onclick=\"this.closest('.alert').remove()\"`\n        }\n        ${onDismiss?.target ? `hx-target=\"${escapeHtml(onDismiss.target)}\"` : ''}\n        ${onDismiss?.swap ? `hx-swap=\"${escapeHtml(onDismiss.swap)}\"` : ''}\n        aria-label=\"Dismiss\"\n      >\n        <svg class=\"w-4 h-4\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n          <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M6 18L18 6M6 6l12 12\"/>\n        </svg>\n      </button>`\n    : '';\n\n  const actionsHtml = actions ? `<div class=\"mt-3\">${actions}</div>` : '';\n\n  const idAttr = id ? `id=\"${escapeHtml(id)}\"` : '';\n\n  return `<div class=\"alert ${baseClasses}\" role=\"alert\" ${idAttr}>\n    <div class=\"flex gap-3\">\n      ${iconHtml}\n      <div class=\"flex-1\">\n        ${titleHtml}\n        <div class=\"${title ? 'mt-1' : ''}\">${escapeHtml(message)}</div>\n        ${actionsHtml}\n      </div>\n      ${dismissHtml}\n    </div>\n  </div>`;\n}\n\n// ============================================\n// Alert Presets\n// ============================================\n\n/** Info alert shorthand */\nexport const infoAlert = (message: string, opts?: Omit<AlertOptions, 'variant'>) =>\n  alert(message, { ...opts, variant: 'info' });\n\n/** Success alert shorthand */\nexport const successAlert = (message: string, opts?: Omit<AlertOptions, 'variant'>) =>\n  alert(message, { ...opts, variant: 'success' });\n\n/** Warning alert shorthand */\nexport const warningAlert = (message: string, opts?: Omit<AlertOptions, 'variant'>) =>\n  alert(message, { ...opts, variant: 'warning' });\n\n/** Danger/error alert shorthand */\nexport const dangerAlert = (message: string, opts?: Omit<AlertOptions, 'variant'>) =>\n  alert(message, { ...opts, variant: 'danger' });\n\n// ============================================\n// Toast Component\n// ============================================\n\n/**\n * Toast notification options\n */\nexport interface ToastOptions {\n  /** Toast variant */\n  variant?: AlertVariant;\n  /** Toast title */\n  title?: string;\n  /** Duration in ms (0 = no auto-dismiss) */\n  duration?: number;\n  /** Position */\n  position?: 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left' | 'top-center' | 'bottom-center';\n  /** Toast ID */\n  id?: string;\n}\n\n/**\n * Build a toast notification\n */\nexport function toast(message: string, options: ToastOptions = {}): string {\n  const { variant = 'info', title, duration = 5000, position = 'top-right', id = `toast-${Date.now()}` } = options;\n\n  const variantClasses = getVariantClasses(variant);\n\n  const positionClasses: Record<string, string> = {\n    'top-right': 'top-4 right-4',\n    'top-left': 'top-4 left-4',\n    'bottom-right': 'bottom-4 right-4',\n    'bottom-left': 'bottom-4 left-4',\n    'top-center': 'top-4 left-1/2 -translate-x-1/2',\n    'bottom-center': 'bottom-4 left-1/2 -translate-x-1/2',\n  };\n\n  const titleHtml = title ? `<h4 class=\"font-semibold\">${escapeHtml(title)}</h4>` : '';\n\n  const autoDismissScript =\n    duration > 0\n      ? `<script>\n        setTimeout(() => {\n          const toast = document.getElementById('${id}');\n          if (toast) {\n            toast.classList.add('opacity-0', 'translate-x-2');\n            setTimeout(() => toast.remove(), 300);\n          }\n        }, ${duration});\n      </script>`\n      : '';\n\n  return `<div\n    id=\"${escapeHtml(id)}\"\n    class=\"fixed ${positionClasses[position]} z-50 min-w-[300px] max-w-md rounded-lg border shadow-lg ${\n    variantClasses.container\n  } transition-all duration-300 transform\"\n    role=\"alert\"\n  >\n    <div class=\"flex gap-3 p-4\">\n      <div class=\"flex-shrink-0 ${variantClasses.icon}\">\n        ${alertIcons[variant]}\n      </div>\n      <div class=\"flex-1\">\n        ${titleHtml}\n        <p class=\"${title ? 'mt-1 text-sm opacity-90' : ''}\">${escapeHtml(message)}</p>\n      </div>\n      <button\n        type=\"button\"\n        class=\"flex-shrink-0 p-1 rounded hover:bg-black/5 transition-colors\"\n        onclick=\"this.closest('#${id}').remove()\"\n        aria-label=\"Close\"\n      >\n        <svg class=\"w-4 h-4\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n          <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M6 18L18 6M6 6l12 12\"/>\n        </svg>\n      </button>\n    </div>\n  </div>\n  ${autoDismissScript}`;\n}\n\n/**\n * Build a toast container (for multiple toasts)\n */\nexport function toastContainer(position: ToastOptions['position'] = 'top-right', id = 'toast-container'): string {\n  const positionClasses: Record<string, string> = {\n    'top-right': 'top-4 right-4',\n    'top-left': 'top-4 left-4',\n    'bottom-right': 'bottom-4 right-4',\n    'bottom-left': 'bottom-4 left-4',\n    'top-center': 'top-4 left-1/2 -translate-x-1/2',\n    'bottom-center': 'bottom-4 left-1/2 -translate-x-1/2',\n  };\n\n  return `<div id=\"${escapeHtml(id)}\" class=\"fixed ${positionClasses[position]} z-50 flex flex-col gap-2\"></div>`;\n}\n"]}

package/src/components/alert.schema.d.ts

@@ -0,0 +1,114 @@
+/**
+ * @file alert.schema.ts
+ * @description Zod schemas for Alert and Toast component options validation.
+ *
+ * Provides strict validation schemas for alert options including variants,
+ * dismissible alerts, and toast notifications with positioning.
+ *
+ * @example
+ * ```typescript
+ * import { AlertOptionsSchema, ToastOptionsSchema } from '@frontmcp/ui';
+ *
+ * const alertResult = AlertOptionsSchema.safeParse({ variant: 'success' });
+ * const toastResult = ToastOptionsSchema.safeParse({ position: 'top-right' });
+ * ```
+ *
+ * @module @frontmcp/ui/components/alert.schema
+ */
+import { z } from 'zod';
+/**
+ * Alert variant enum schema
+ */
+export declare const AlertVariantSchema: z.ZodEnum<{
+    neutral: "neutral";
+    success: "success";
+    warning: "warning";
+    danger: "danger";
+    info: "info";
+}>;
+/**
+ * Alert variant type
+ */
+export type AlertVariant = z.infer<typeof AlertVariantSchema>;
+/**
+ * Dismiss button HTMX options schema
+ */
+export declare const AlertOnDismissSchema: z.ZodOptional<z.ZodObject<{
+    delete: z.ZodOptional<z.ZodString>;
+    target: z.ZodOptional<z.ZodString>;
+    swap: z.ZodOptional<z.ZodString>;
+}, z.core.$strict>>;
+/**
+ * Alert onDismiss type
+ */
+export type AlertOnDismiss = z.infer<typeof AlertOnDismissSchema>;
+/**
+ * Complete alert options schema
+ */
+export declare const AlertOptionsSchema: z.ZodObject<{
+    variant: z.ZodOptional<z.ZodEnum<{
+        neutral: "neutral";
+        success: "success";
+        warning: "warning";
+        danger: "danger";
+        info: "info";
+    }>>;
+    title: z.ZodOptional<z.ZodString>;
+    showIcon: z.ZodOptional<z.ZodBoolean>;
+    icon: z.ZodOptional<z.ZodString>;
+    dismissible: z.ZodOptional<z.ZodBoolean>;
+    className: z.ZodOptional<z.ZodString>;
+    id: z.ZodOptional<z.ZodString>;
+    actions: z.ZodOptional<z.ZodString>;
+    onDismiss: z.ZodOptional<z.ZodObject<{
+        delete: z.ZodOptional<z.ZodString>;
+        target: z.ZodOptional<z.ZodString>;
+        swap: z.ZodOptional<z.ZodString>;
+    }, z.core.$strict>>;
+}, z.core.$strict>;
+/**
+ * Alert options type (derived from schema)
+ */
+export type AlertOptions = z.infer<typeof AlertOptionsSchema>;
+/**
+ * Toast position enum schema
+ */
+export declare const ToastPositionSchema: z.ZodEnum<{
+    "top-right": "top-right";
+    "top-left": "top-left";
+    "bottom-right": "bottom-right";
+    "bottom-left": "bottom-left";
+    "top-center": "top-center";
+    "bottom-center": "bottom-center";
+}>;
+/**
+ * Toast position type
+ */
+export type ToastPosition = z.infer<typeof ToastPositionSchema>;
+/**
+ * Complete toast options schema
+ */
+export declare const ToastOptionsSchema: z.ZodObject<{
+    variant: z.ZodOptional<z.ZodEnum<{
+        neutral: "neutral";
+        success: "success";
+        warning: "warning";
+        danger: "danger";
+        info: "info";
+    }>>;
+    title: z.ZodOptional<z.ZodString>;
+    duration: z.ZodOptional<z.ZodNumber>;
+    position: z.ZodOptional<z.ZodEnum<{
+        "top-right": "top-right";
+        "top-left": "top-left";
+        "bottom-right": "bottom-right";
+        "bottom-left": "bottom-left";
+        "top-center": "top-center";
+        "bottom-center": "bottom-center";
+    }>>;
+    id: z.ZodOptional<z.ZodString>;
+}, z.core.$strict>;
+/**
+ * Toast options type (derived from schema)
+ */
+export type ToastOptions = z.infer<typeof ToastOptionsSchema>;