@frontmcp/ui 0.5.1 → 0.6.0

package/src/components/list.schema.js

@@ -1,168 +0,0 @@
-"use strict";
-/**
- * @file list.schema.ts
- * @description Zod schemas for List component options validation.
- *
- * Provides strict validation schemas for permission lists, feature lists,
- * description lists, and action lists with HTMX support.
- *
- * @example
- * ```typescript
- * import { PermissionItemSchema, PermissionListOptionsSchema } from '@frontmcp/ui';
- *
- * const itemResult = PermissionItemSchema.safeParse({
- *   scope: 'read:profile',
- *   name: 'Read Profile',
- * });
- * ```
- *
- * @module @frontmcp/ui/components/list.schema
- */
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.ActionListOptionsSchema = exports.ActionItemSchema = exports.DescriptionListOptionsSchema = exports.DescriptionItemSchema = exports.FeatureListOptionsSchema = exports.FeatureItemSchema = exports.PermissionListOptionsSchema = exports.PermissionItemSchema = void 0;
-const zod_1 = require("zod");
-// ============================================
-// Permission Item Schema
-// ============================================
-/**
- * Permission/Scope item schema for OAuth consent
- */
-exports.PermissionItemSchema = zod_1.z
-    .object({
-    /** Scope identifier */
-    scope: zod_1.z.string(),
-    /** Display name */
-    name: zod_1.z.string(),
-    /** Description */
-    description: zod_1.z.string().optional(),
-    /** Icon HTML */
-    icon: zod_1.z.string().optional(),
-    /** Required permission (cannot be unchecked) */
-    required: zod_1.z.boolean().optional(),
-    /** Checked by default */
-    checked: zod_1.z.boolean().optional(),
-    /** Sensitive/dangerous permission */
-    sensitive: zod_1.z.boolean().optional(),
-})
-    .strict();
-/**
- * Permission list options schema
- */
-exports.PermissionListOptionsSchema = zod_1.z
-    .object({
-    /** List ID */
-    id: zod_1.z.string().optional(),
-    /** Checkable permissions */
-    checkable: zod_1.z.boolean().optional(),
-    /** Input name for checkable */
-    inputName: zod_1.z.string().optional(),
-    /** Group title */
-    title: zod_1.z.string().optional(),
-    /** Additional CSS classes */
-    className: zod_1.z.string().optional(),
-})
-    .strict();
-// ============================================
-// Feature Item Schema
-// ============================================
-/**
- * Feature list item schema
- */
-exports.FeatureItemSchema = zod_1.z
-    .object({
-    /** Feature name */
-    name: zod_1.z.string(),
-    /** Feature description */
-    description: zod_1.z.string().optional(),
-    /** Icon HTML */
-    icon: zod_1.z.string().optional(),
-    /** Included in plan */
-    included: zod_1.z.boolean().optional(),
-})
-    .strict();
-/**
- * Feature list options schema
- */
-exports.FeatureListOptionsSchema = zod_1.z
-    .object({
-    /** Group title */
-    title: zod_1.z.string().optional(),
-    /** Show included/excluded styling */
-    showStatus: zod_1.z.boolean().optional(),
-    /** Additional CSS classes */
-    className: zod_1.z.string().optional(),
-})
-    .strict();
-// ============================================
-// Description Item Schema
-// ============================================
-/**
- * Description list item schema
- */
-exports.DescriptionItemSchema = zod_1.z
-    .object({
-    /** Term/label */
-    term: zod_1.z.string(),
-    /** Description/value */
-    description: zod_1.z.string(),
-    /** Copy button */
-    copyable: zod_1.z.boolean().optional(),
-})
-    .strict();
-/**
- * Description list options schema
- */
-exports.DescriptionListOptionsSchema = zod_1.z
-    .object({
-    /** Layout direction */
-    direction: zod_1.z.enum(['horizontal', 'vertical']).optional(),
-    /** Striped rows */
-    striped: zod_1.z.boolean().optional(),
-    /** Additional CSS classes */
-    className: zod_1.z.string().optional(),
-})
-    .strict();
-// ============================================
-// Action Item Schema
-// ============================================
-/**
- * Action list item schema
- */
-exports.ActionItemSchema = zod_1.z
-    .object({
-    /** Action label */
-    label: zod_1.z.string(),
-    /** Action description */
-    description: zod_1.z.string().optional(),
-    /** Icon HTML */
-    icon: zod_1.z.string().optional(),
-    /** Click URL */
-    href: zod_1.z.string().optional(),
-    /** HTMX attributes */
-    htmx: zod_1.z
-        .object({
-        get: zod_1.z.string().optional(),
-        post: zod_1.z.string().optional(),
-        target: zod_1.z.string().optional(),
-        swap: zod_1.z.string().optional(),
-    })
-        .strict()
-        .optional(),
-    /** Destructive action styling */
-    destructive: zod_1.z.boolean().optional(),
-    /** Disabled state */
-    disabled: zod_1.z.boolean().optional(),
-})
-    .strict();
-/**
- * Action list options schema
- */
-exports.ActionListOptionsSchema = zod_1.z
-    .object({
-    /** Divided items */
-    divided: zod_1.z.boolean().optional(),
-    /** Additional CSS classes */
-    className: zod_1.z.string().optional(),
-})
-    .strict();
-//# sourceMappingURL=list.schema.js.map

package/src/components/list.schema.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"list.schema.js","sourceRoot":"","sources":["../../../src/components/list.schema.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @file list.schema.ts\n * @description Zod schemas for List component options validation.\n *\n * Provides strict validation schemas for permission lists, feature lists,\n * description lists, and action lists with HTMX support.\n *\n * @example\n * ```typescript\n * import { PermissionItemSchema, PermissionListOptionsSchema } from '@frontmcp/ui';\n *\n * const itemResult = PermissionItemSchema.safeParse({\n *   scope: 'read:profile',\n *   name: 'Read Profile',\n * });\n * ```\n *\n * @module @frontmcp/ui/components/list.schema\n */\n\nimport { z } from 'zod';\n\n// ============================================\n// Permission Item Schema\n// ============================================\n\n/**\n * Permission/Scope item schema for OAuth consent\n */\nexport const PermissionItemSchema = z\n  .object({\n    /** Scope identifier */\n    scope: z.string(),\n    /** Display name */\n    name: z.string(),\n    /** Description */\n    description: z.string().optional(),\n    /** Icon HTML */\n    icon: z.string().optional(),\n    /** Required permission (cannot be unchecked) */\n    required: z.boolean().optional(),\n    /** Checked by default */\n    checked: z.boolean().optional(),\n    /** Sensitive/dangerous permission */\n    sensitive: z.boolean().optional(),\n  })\n  .strict();\n\n/**\n * Permission item type\n */\nexport type PermissionItem = z.infer<typeof PermissionItemSchema>;\n\n/**\n * Permission list options schema\n */\nexport const PermissionListOptionsSchema = z\n  .object({\n    /** List ID */\n    id: z.string().optional(),\n    /** Checkable permissions */\n    checkable: z.boolean().optional(),\n    /** Input name for checkable */\n    inputName: z.string().optional(),\n    /** Group title */\n    title: z.string().optional(),\n    /** Additional CSS classes */\n    className: z.string().optional(),\n  })\n  .strict();\n\n/**\n * Permission list options type\n */\nexport type PermissionListOptions = z.infer<typeof PermissionListOptionsSchema>;\n\n// ============================================\n// Feature Item Schema\n// ============================================\n\n/**\n * Feature list item schema\n */\nexport const FeatureItemSchema = z\n  .object({\n    /** Feature name */\n    name: z.string(),\n    /** Feature description */\n    description: z.string().optional(),\n    /** Icon HTML */\n    icon: z.string().optional(),\n    /** Included in plan */\n    included: z.boolean().optional(),\n  })\n  .strict();\n\n/**\n * Feature item type\n */\nexport type FeatureItem = z.infer<typeof FeatureItemSchema>;\n\n/**\n * Feature list options schema\n */\nexport const FeatureListOptionsSchema = z\n  .object({\n    /** Group title */\n    title: z.string().optional(),\n    /** Show included/excluded styling */\n    showStatus: z.boolean().optional(),\n    /** Additional CSS classes */\n    className: z.string().optional(),\n  })\n  .strict();\n\n/**\n * Feature list options type\n */\nexport type FeatureListOptions = z.infer<typeof FeatureListOptionsSchema>;\n\n// ============================================\n// Description Item Schema\n// ============================================\n\n/**\n * Description list item schema\n */\nexport const DescriptionItemSchema = z\n  .object({\n    /** Term/label */\n    term: z.string(),\n    /** Description/value */\n    description: z.string(),\n    /** Copy button */\n    copyable: z.boolean().optional(),\n  })\n  .strict();\n\n/**\n * Description item type\n */\nexport type DescriptionItem = z.infer<typeof DescriptionItemSchema>;\n\n/**\n * Description list options schema\n */\nexport const DescriptionListOptionsSchema = z\n  .object({\n    /** Layout direction */\n    direction: z.enum(['horizontal', 'vertical']).optional(),\n    /** Striped rows */\n    striped: z.boolean().optional(),\n    /** Additional CSS classes */\n    className: z.string().optional(),\n  })\n  .strict();\n\n/**\n * Description list options type\n */\nexport type DescriptionListOptions = z.infer<typeof DescriptionListOptionsSchema>;\n\n// ============================================\n// Action Item Schema\n// ============================================\n\n/**\n * Action list item schema\n */\nexport const ActionItemSchema = z\n  .object({\n    /** Action label */\n    label: z.string(),\n    /** Action description */\n    description: z.string().optional(),\n    /** Icon HTML */\n    icon: z.string().optional(),\n    /** Click URL */\n    href: z.string().optional(),\n    /** HTMX attributes */\n    htmx: z\n      .object({\n        get: z.string().optional(),\n        post: z.string().optional(),\n        target: z.string().optional(),\n        swap: z.string().optional(),\n      })\n      .strict()\n      .optional(),\n    /** Destructive action styling */\n    destructive: z.boolean().optional(),\n    /** Disabled state */\n    disabled: z.boolean().optional(),\n  })\n  .strict();\n\n/**\n * Action item type\n */\nexport type ActionItem = z.infer<typeof ActionItemSchema>;\n\n/**\n * Action list options schema\n */\nexport const ActionListOptionsSchema = z\n  .object({\n    /** Divided items */\n    divided: z.boolean().optional(),\n    /** Additional CSS classes */\n    className: z.string().optional(),\n  })\n  .strict();\n\n/**\n * Action list options type\n */\nexport type ActionListOptions = z.infer<typeof ActionListOptionsSchema>;\n"]}

package/src/components/modal.d.ts

@@ -1,111 +0,0 @@
-/**
- * Modal Component
- *
- * Dialog and modal components.
- */
-/**
- * Modal size options
- */
-export type ModalSize = 'sm' | 'md' | 'lg' | 'xl' | 'full';
-/**
- * Modal component options
- */
-export interface ModalOptions {
-    /** Modal ID */
-    id: string;
-    /** Modal title */
-    title?: string;
-    /** Modal size */
-    size?: ModalSize;
-    /** Show close button */
-    showClose?: boolean;
-    /** Close on backdrop click */
-    closeOnBackdrop?: boolean;
-    /** Close on escape key */
-    closeOnEscape?: boolean;
-    /** Footer content */
-    footer?: string;
-    /** Additional CSS classes for modal */
-    className?: string;
-    /** Initially visible */
-    open?: boolean;
-    /** HTMX for closing */
-    onClose?: {
-        delete?: string;
-        target?: string;
-        swap?: string;
-    };
-}
-/**
- * Build a modal component
- */
-export declare function modal(content: string, options: ModalOptions): string;
-/**
- * Build a modal trigger button/element
- */
-export declare function modalTrigger(triggerContent: string, modalId: string, options?: {
-    className?: string;
-    tag?: 'button' | 'a' | 'span';
-}): string;
-/**
- * Confirmation modal options
- */
-export interface ConfirmModalOptions {
-    /** Modal ID */
-    id: string;
-    /** Dialog title */
-    title?: string;
-    /** Confirmation message */
-    message: string;
-    /** Confirm button text */
-    confirmText?: string;
-    /** Cancel button text */
-    cancelText?: string;
-    /** Confirm button variant */
-    variant?: 'primary' | 'danger' | 'warning';
-    /** Icon */
-    icon?: string;
-    /** HTMX for confirm action */
-    onConfirm?: {
-        post?: string;
-        delete?: string;
-        put?: string;
-        target?: string;
-        swap?: string;
-    };
-}
-/**
- * Build a confirmation modal
- */
-export declare function confirmModal(options: ConfirmModalOptions): string;
-/**
- * Drawer position options
- */
-export type DrawerPosition = 'left' | 'right' | 'top' | 'bottom';
-/**
- * Drawer options
- */
-export interface DrawerOptions {
-    /** Drawer ID */
-    id: string;
-    /** Drawer title */
-    title?: string;
-    /** Drawer position */
-    position?: DrawerPosition;
-    /** Drawer size (width for left/right, height for top/bottom) */
-    size?: 'sm' | 'md' | 'lg' | 'xl';
-    /** Show close button */
-    showClose?: boolean;
-    /** Close on backdrop click */
-    closeOnBackdrop?: boolean;
-    /** Footer content */
-    footer?: string;
-    /** Additional CSS classes */
-    className?: string;
-    /** Initially visible */
-    open?: boolean;
-}
-/**
- * Build a drawer component
- */
-export declare function drawer(content: string, options: DrawerOptions): string;

package/src/components/modal.js

@@ -1,260 +0,0 @@
-"use strict";
-/**
- * Modal Component
- *
- * Dialog and modal components.
- */
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.modal = modal;
-exports.modalTrigger = modalTrigger;
-exports.confirmModal = confirmModal;
-exports.drawer = drawer;
-const base_1 = require("../layouts/base");
-// ============================================
-// Modal Builder
-// ============================================
-/**
- * Get size CSS classes
- */
-function getSizeClasses(size) {
-    const sizes = {
-        sm: 'max-w-sm',
-        md: 'max-w-md',
-        lg: 'max-w-lg',
-        xl: 'max-w-2xl',
-        full: 'max-w-full mx-4',
-    };
-    return sizes[size];
-}
-/**
- * Build a modal component
- */
-function modal(content, options) {
-    const { id, title, size = 'md', showClose = true, closeOnBackdrop = true, closeOnEscape = true, footer, className = '', open = false, onClose, } = options;
-    const sizeClasses = getSizeClasses(size);
-    const visibilityClasses = open ? '' : 'hidden';
-    const headerHtml = title || showClose
-        ? `<div class="flex items-center justify-between p-4 border-b border-divider">
-        ${title ? `<h3 class="text-lg font-semibold text-text-primary">${(0, base_1.escapeHtml)(title)}</h3>` : '<div></div>'}
-        ${showClose
-            ? `
-          <button
-            type="button"
-            class="p-1 rounded-lg text-text-secondary hover:text-text-primary hover:bg-gray-100 transition-colors"
-            onclick="document.getElementById('${(0, base_1.escapeHtml)(id)}').classList.add('hidden')"
-            ${onClose?.delete ? `hx-delete="${(0, base_1.escapeHtml)(onClose.delete)}"` : ''}
-            ${onClose?.target ? `hx-target="${(0, base_1.escapeHtml)(onClose.target)}"` : ''}
-            ${onClose?.swap ? `hx-swap="${(0, base_1.escapeHtml)(onClose.swap)}"` : ''}
-            aria-label="Close"
-          >
-            <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="M6 18L18 6M6 6l12 12"/>
-            </svg>
-          </button>
-        `
-            : ''}
-      </div>`
-        : '';
-    const footerHtml = footer
-        ? `<div class="flex items-center justify-end gap-3 p-4 border-t border-divider">
-        ${footer}
-      </div>`
-        : '';
-    const backdropClickHandler = closeOnBackdrop
-        ? `onclick="if (event.target === this) this.classList.add('hidden')"`
-        : '';
-    const escapeHandler = closeOnEscape
-        ? `<script>
-        document.addEventListener('keydown', function(e) {
-          if (e.key === 'Escape') {
-            document.getElementById('${(0, base_1.escapeHtml)(id)}')?.classList.add('hidden');
-          }
-        });
-      </script>`
-        : '';
-    return `
-    <div
-      id="${(0, base_1.escapeHtml)(id)}"
-      class="fixed inset-0 z-50 overflow-y-auto ${visibilityClasses}"
-      ${backdropClickHandler}
-      role="dialog"
-      aria-modal="true"
-      aria-labelledby="${(0, base_1.escapeHtml)(id)}-title"
-    >
-      <!-- Backdrop -->
-      <div class="fixed inset-0 bg-black/50 transition-opacity"></div>
-
-      <!-- Modal container -->
-      <div class="flex min-h-full items-center justify-center p-4">
-        <div class="relative w-full ${sizeClasses} bg-white rounded-xl shadow-xl ${className}">
-          ${headerHtml}
-          <div class="p-4">
-            ${content}
-          </div>
-          ${footerHtml}
-        </div>
-      </div>
-    </div>
-    ${escapeHandler}
-  `;
-}
-// ============================================
-// Modal Trigger
-// ============================================
-/**
- * Build a modal trigger button/element
- */
-function modalTrigger(triggerContent, modalId, options = {}) {
-    const { className = '', tag = 'button' } = options;
-    const attrs = `
-    class="${className}"
-    onclick="document.getElementById('${(0, base_1.escapeHtml)(modalId)}').classList.remove('hidden')"
-  `;
-    if (tag === 'button') {
-        return `<button type="button" ${attrs}>${triggerContent}</button>`;
-    }
-    return `<${tag} ${attrs}>${triggerContent}</${tag}>`;
-}
-/**
- * Build a confirmation modal
- */
-function confirmModal(options) {
-    const { id, title = 'Confirm Action', message, confirmText = 'Confirm', cancelText = 'Cancel', variant = 'primary', icon, onConfirm, } = options;
-    const variantClasses = {
-        primary: 'bg-primary hover:bg-primary/90 text-white',
-        danger: 'bg-danger hover:bg-danger/90 text-white',
-        warning: 'bg-warning hover:bg-warning/90 text-white',
-    };
-    const iconColors = {
-        primary: 'text-primary bg-primary/10',
-        danger: 'text-danger bg-danger/10',
-        warning: 'text-warning bg-warning/10',
-    };
-    const defaultIcons = {
-        primary: `<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8.228 9c.549-1.165 2.03-2 3.772-2 2.21 0 4 1.343 4 3 0 1.4-1.278 2.575-3.006 2.907-.542.104-.994.54-.994 1.093m0 3h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
-    </svg>`,
-        danger: `<svg class="w-6 h-6" 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>`,
-        warning: `<svg class="w-6 h-6" 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>`,
-    };
-    const displayIcon = icon || defaultIcons[variant];
-    const htmxAttrs = [];
-    if (onConfirm) {
-        if (onConfirm.post)
-            htmxAttrs.push(`hx-post="${(0, base_1.escapeHtml)(onConfirm.post)}"`);
-        if (onConfirm.delete)
-            htmxAttrs.push(`hx-delete="${(0, base_1.escapeHtml)(onConfirm.delete)}"`);
-        if (onConfirm.put)
-            htmxAttrs.push(`hx-put="${(0, base_1.escapeHtml)(onConfirm.put)}"`);
-        if (onConfirm.target)
-            htmxAttrs.push(`hx-target="${(0, base_1.escapeHtml)(onConfirm.target)}"`);
-        if (onConfirm.swap)
-            htmxAttrs.push(`hx-swap="${(0, base_1.escapeHtml)(onConfirm.swap)}"`);
-    }
-    const content = `
-    <div class="text-center">
-      <div class="mx-auto w-12 h-12 rounded-full ${iconColors[variant]} flex items-center justify-center mb-4">
-        ${displayIcon}
-      </div>
-      <h3 class="text-lg font-semibold text-text-primary mb-2">${(0, base_1.escapeHtml)(title)}</h3>
-      <p class="text-text-secondary">${(0, base_1.escapeHtml)(message)}</p>
-    </div>
-  `;
-    const footer = `
-    <button
-      type="button"
-      class="px-4 py-2 rounded-lg border border-border text-text-primary hover:bg-gray-50 transition-colors"
-      onclick="document.getElementById('${(0, base_1.escapeHtml)(id)}').classList.add('hidden')"
-    >
-      ${(0, base_1.escapeHtml)(cancelText)}
-    </button>
-    <button
-      type="button"
-      class="px-4 py-2 rounded-lg ${variantClasses[variant]} transition-colors"
-      ${htmxAttrs.join(' ')}
-      onclick="document.getElementById('${(0, base_1.escapeHtml)(id)}').classList.add('hidden')"
-    >
-      ${(0, base_1.escapeHtml)(confirmText)}
-    </button>
-  `;
-    return modal(content, {
-        id,
-        size: 'sm',
-        showClose: false,
-        footer,
-    });
-}
-/**
- * Build a drawer component
- */
-function drawer(content, options) {
-    const { id, title, position = 'right', size = 'md', showClose = true, closeOnBackdrop = true, footer, className = '', open = false, } = options;
-    const sizeClasses = {
-        left: { sm: 'w-64', md: 'w-80', lg: 'w-96', xl: 'w-[32rem]' },
-        right: { sm: 'w-64', md: 'w-80', lg: 'w-96', xl: 'w-[32rem]' },
-        top: { sm: 'h-32', md: 'h-48', lg: 'h-64', xl: 'h-96' },
-        bottom: { sm: 'h-32', md: 'h-48', lg: 'h-64', xl: 'h-96' },
-    };
-    const positionClasses = {
-        left: 'inset-y-0 left-0',
-        right: 'inset-y-0 right-0',
-        top: 'inset-x-0 top-0',
-        bottom: 'inset-x-0 bottom-0',
-    };
-    const fullSizeClasses = {
-        left: 'h-full',
-        right: 'h-full',
-        top: 'w-full',
-        bottom: 'w-full',
-    };
-    const visibilityClasses = open ? '' : 'hidden';
-    const headerHtml = title || showClose
-        ? `<div class="flex items-center justify-between p-4 border-b border-divider">
-        ${title ? `<h3 class="text-lg font-semibold text-text-primary">${(0, base_1.escapeHtml)(title)}</h3>` : '<div></div>'}
-        ${showClose
-            ? `
-          <button
-            type="button"
-            class="p-1 rounded-lg text-text-secondary hover:text-text-primary hover:bg-gray-100 transition-colors"
-            onclick="document.getElementById('${(0, base_1.escapeHtml)(id)}').classList.add('hidden')"
-            aria-label="Close"
-          >
-            <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="M6 18L18 6M6 6l12 12"/>
-            </svg>
-          </button>
-        `
-            : ''}
-      </div>`
-        : '';
-    const footerHtml = footer ? `<div class="p-4 border-t border-divider">${footer}</div>` : '';
-    const backdropClickHandler = closeOnBackdrop
-        ? `onclick="if (event.target === this) this.classList.add('hidden')"`
-        : '';
-    return `
-    <div
-      id="${(0, base_1.escapeHtml)(id)}"
-      class="fixed inset-0 z-50 ${visibilityClasses}"
-      ${backdropClickHandler}
-      role="dialog"
-      aria-modal="true"
-    >
-      <!-- Backdrop -->
-      <div class="fixed inset-0 bg-black/50 transition-opacity"></div>
-
-      <!-- Drawer -->
-      <div class="fixed ${positionClasses[position]} ${sizeClasses[position][size]} ${fullSizeClasses[position]} bg-white shadow-xl flex flex-col ${className}">
-        ${headerHtml}
-        <div class="flex-1 overflow-y-auto p-4">
-          ${content}
-        </div>
-        ${footerHtml}
-      </div>
-    </div>
-  `;
-}
-//# sourceMappingURL=modal.js.map

package/src/components/modal.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"modal.js","sourceRoot":"","sources":["../../../src/components/modal.ts"],"names":[],"mappings":";AAAA;;;;GAIG;;AAgEH,sBAwFC;AASD,oCAiBC;AAqCD,oCAiFC;AAsCD,wBAwFC;AApaD,0CAA6C;AAyC7C,+CAA+C;AAC/C,gBAAgB;AAChB,+CAA+C;AAE/C;;GAEG;AACH,SAAS,cAAc,CAAC,IAAe;IACrC,MAAM,KAAK,GAA8B;QACvC,EAAE,EAAE,UAAU;QACd,EAAE,EAAE,UAAU;QACd,EAAE,EAAE,UAAU;QACd,EAAE,EAAE,WAAW;QACf,IAAI,EAAE,iBAAiB;KACxB,CAAC;IACF,OAAO,KAAK,CAAC,IAAI,CAAC,CAAC;AACrB,CAAC;AAED;;GAEG;AACH,SAAgB,KAAK,CAAC,OAAe,EAAE,OAAqB;IAC1D,MAAM,EACJ,EAAE,EACF,KAAK,EACL,IAAI,GAAG,IAAI,EACX,SAAS,GAAG,IAAI,EAChB,eAAe,GAAG,IAAI,EACtB,aAAa,GAAG,IAAI,EACpB,MAAM,EACN,SAAS,GAAG,EAAE,EACd,IAAI,GAAG,KAAK,EACZ,OAAO,GACR,GAAG,OAAO,CAAC;IAEZ,MAAM,WAAW,GAAG,cAAc,CAAC,IAAI,CAAC,CAAC;IACzC,MAAM,iBAAiB,GAAG,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,QAAQ,CAAC;IAE/C,MAAM,UAAU,GACd,KAAK,IAAI,SAAS;QAChB,CAAC,CAAC;UACE,KAAK,CAAC,CAAC,CAAC,uDAAuD,IAAA,iBAAU,EAAC,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,aAAa;UAEvG,SAAS;YACP,CAAC,CAAC;;;;gDAIkC,IAAA,iBAAU,EAAC,EAAE,CAAC;cAChD,OAAO,EAAE,MAAM,CAAC,CAAC,CAAC,cAAc,IAAA,iBAAU,EAAC,OAAO,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE;cAClE,OAAO,EAAE,MAAM,CAAC,CAAC,CAAC,cAAc,IAAA,iBAAU,EAAC,OAAO,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE;cAClE,OAAO,EAAE,IAAI,CAAC,CAAC,CAAC,YAAY,IAAA,iBAAU,EAAC,OAAO,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE;;;;;;;SAOjE;YACG,CAAC,CAAC,EACN;aACK;QACP,CAAC,CAAC,EAAE,CAAC;IAET,MAAM,UAAU,GAAG,MAAM;QACvB,CAAC,CAAC;UACI,MAAM;aACH;QACT,CAAC,CAAC,EAAE,CAAC;IAEP,MAAM,oBAAoB,GAAG,eAAe;QAC1C,CAAC,CAAC,mEAAmE;QACrE,CAAC,CAAC,EAAE,CAAC;IAEP,MAAM,aAAa,GAAG,aAAa;QACjC,CAAC,CAAC;;;uCAGiC,IAAA,iBAAU,EAAC,EAAE,CAAC;;;gBAGrC;QACZ,CAAC,CAAC,EAAE,CAAC;IAEP,OAAO;;YAEG,IAAA,iBAAU,EAAC,EAAE,CAAC;kDACwB,iBAAiB;QAC3D,oBAAoB;;;yBAGH,IAAA,iBAAU,EAAC,EAAE,CAAC;;;;;;;sCAOD,WAAW,kCAAkC,SAAS;YAChF,UAAU;;cAER,OAAO;;YAET,UAAU;;;;MAIhB,aAAa;GAChB,CAAC;AACJ,CAAC;AAED,+CAA+C;AAC/C,gBAAgB;AAChB,+CAA+C;AAE/C;;GAEG;AACH,SAAgB,YAAY,CAC1B,cAAsB,EACtB,OAAe,EACf,UAAiE,EAAE;IAEnE,MAAM,EAAE,SAAS,GAAG,EAAE,EAAE,GAAG,GAAG,QAAQ,EAAE,GAAG,OAAO,CAAC;IAEnD,MAAM,KAAK,GAAG;aACH,SAAS;wCACkB,IAAA,iBAAU,EAAC,OAAO,CAAC;GACxD,CAAC;IAEF,IAAI,GAAG,KAAK,QAAQ,EAAE,CAAC;QACrB,OAAO,yBAAyB,KAAK,IAAI,cAAc,WAAW,CAAC;IACrE,CAAC;IAED,OAAO,IAAI,GAAG,IAAI,KAAK,IAAI,cAAc,KAAK,GAAG,GAAG,CAAC;AACvD,CAAC;AAkCD;;GAEG;AACH,SAAgB,YAAY,CAAC,OAA4B;IACvD,MAAM,EACJ,EAAE,EACF,KAAK,GAAG,gBAAgB,EACxB,OAAO,EACP,WAAW,GAAG,SAAS,EACvB,UAAU,GAAG,QAAQ,EACrB,OAAO,GAAG,SAAS,EACnB,IAAI,EACJ,SAAS,GACV,GAAG,OAAO,CAAC;IAEZ,MAAM,cAAc,GAA2B;QAC7C,OAAO,EAAE,2CAA2C;QACpD,MAAM,EAAE,yCAAyC;QACjD,OAAO,EAAE,2CAA2C;KACrD,CAAC;IAEF,MAAM,UAAU,GAA2B;QACzC,OAAO,EAAE,4BAA4B;QACrC,MAAM,EAAE,0BAA0B;QAClC,OAAO,EAAE,4BAA4B;KACtC,CAAC;IAEF,MAAM,YAAY,GAA2B;QAC3C,OAAO,EAAE;;WAEF;QACP,MAAM,EAAE;;WAED;QACP,OAAO,EAAE;;WAEF;KACR,CAAC;IAEF,MAAM,WAAW,GAAG,IAAI,IAAI,YAAY,CAAC,OAAO,CAAC,CAAC;IAElD,MAAM,SAAS,GAAa,EAAE,CAAC;IAC/B,IAAI,SAAS,EAAE,CAAC;QACd,IAAI,SAAS,CAAC,IAAI;YAAE,SAAS,CAAC,IAAI,CAAC,YAAY,IAAA,iBAAU,EAAC,SAAS,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;QAC9E,IAAI,SAAS,CAAC,MAAM;YAAE,SAAS,CAAC,IAAI,CAAC,cAAc,IAAA,iBAAU,EAAC,SAAS,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC;QACpF,IAAI,SAAS,CAAC,GAAG;YAAE,SAAS,CAAC,IAAI,CAAC,WAAW,IAAA,iBAAU,EAAC,SAAS,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;QAC3E,IAAI,SAAS,CAAC,MAAM;YAAE,SAAS,CAAC,IAAI,CAAC,cAAc,IAAA,iBAAU,EAAC,SAAS,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC;QACpF,IAAI,SAAS,CAAC,IAAI;YAAE,SAAS,CAAC,IAAI,CAAC,YAAY,IAAA,iBAAU,EAAC,SAAS,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;IAChF,CAAC;IAED,MAAM,OAAO,GAAG;;mDAEiC,UAAU,CAAC,OAAO,CAAC;UAC5D,WAAW;;iEAE4C,IAAA,iBAAU,EAAC,KAAK,CAAC;uCAC3C,IAAA,iBAAU,EAAC,OAAO,CAAC;;GAEvD,CAAC;IAEF,MAAM,MAAM,GAAG;;;;0CAIyB,IAAA,iBAAU,EAAC,EAAE,CAAC;;QAEhD,IAAA,iBAAU,EAAC,UAAU,CAAC;;;;oCAIM,cAAc,CAAC,OAAO,CAAC;QACnD,SAAS,CAAC,IAAI,CAAC,GAAG,CAAC;0CACe,IAAA,iBAAU,EAAC,EAAE,CAAC;;QAEhD,IAAA,iBAAU,EAAC,WAAW,CAAC;;GAE5B,CAAC;IAEF,OAAO,KAAK,CAAC,OAAO,EAAE;QACpB,EAAE;QACF,IAAI,EAAE,IAAI;QACV,SAAS,EAAE,KAAK;QAChB,MAAM;KACP,CAAC,CAAC;AACL,CAAC;AAmCD;;GAEG;AACH,SAAgB,MAAM,CAAC,OAAe,EAAE,OAAsB;IAC5D,MAAM,EACJ,EAAE,EACF,KAAK,EACL,QAAQ,GAAG,OAAO,EAClB,IAAI,GAAG,IAAI,EACX,SAAS,GAAG,IAAI,EAChB,eAAe,GAAG,IAAI,EACtB,MAAM,EACN,SAAS,GAAG,EAAE,EACd,IAAI,GAAG,KAAK,GACb,GAAG,OAAO,CAAC;IAEZ,MAAM,WAAW,GAA2C;QAC1D,IAAI,EAAE,EAAE,EAAE,EAAE,MAAM,EAAE,EAAE,EAAE,MAAM,EAAE,EAAE,EAAE,MAAM,EAAE,EAAE,EAAE,WAAW,EAAE;QAC7D,KAAK,EAAE,EAAE,EAAE,EAAE,MAAM,EAAE,EAAE,EAAE,MAAM,EAAE,EAAE,EAAE,MAAM,EAAE,EAAE,EAAE,WAAW,EAAE;QAC9D,GAAG,EAAE,EAAE,EAAE,EAAE,MAAM,EAAE,EAAE,EAAE,MAAM,EAAE,EAAE,EAAE,MAAM,EAAE,EAAE,EAAE,MAAM,EAAE;QACvD,MAAM,EAAE,EAAE,EAAE,EAAE,MAAM,EAAE,EAAE,EAAE,MAAM,EAAE,EAAE,EAAE,MAAM,EAAE,EAAE,EAAE,MAAM,EAAE;KAC3D,CAAC;IAEF,MAAM,eAAe,GAAmC;QACtD,IAAI,EAAE,kBAAkB;QACxB,KAAK,EAAE,mBAAmB;QAC1B,GAAG,EAAE,iBAAiB;QACtB,MAAM,EAAE,oBAAoB;KAC7B,CAAC;IAEF,MAAM,eAAe,GAAmC;QACtD,IAAI,EAAE,QAAQ;QACd,KAAK,EAAE,QAAQ;QACf,GAAG,EAAE,QAAQ;QACb,MAAM,EAAE,QAAQ;KACjB,CAAC;IAEF,MAAM,iBAAiB,GAAG,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,QAAQ,CAAC;IAE/C,MAAM,UAAU,GACd,KAAK,IAAI,SAAS;QAChB,CAAC,CAAC;UACE,KAAK,CAAC,CAAC,CAAC,uDAAuD,IAAA,iBAAU,EAAC,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,aAAa;UAEvG,SAAS;YACP,CAAC,CAAC;;;;gDAIkC,IAAA,iBAAU,EAAC,EAAE,CAAC;;;;;;;SAOrD;YACG,CAAC,CAAC,EACN;aACK;QACP,CAAC,CAAC,EAAE,CAAC;IAET,MAAM,UAAU,GAAG,MAAM,CAAC,CAAC,CAAC,4CAA4C,MAAM,QAAQ,CAAC,CAAC,CAAC,EAAE,CAAC;IAE5F,MAAM,oBAAoB,GAAG,eAAe;QAC1C,CAAC,CAAC,mEAAmE;QACrE,CAAC,CAAC,EAAE,CAAC;IAEP,OAAO;;YAEG,IAAA,iBAAU,EAAC,EAAE,CAAC;kCACQ,iBAAiB;QAC3C,oBAAoB;;;;;;;;0BAQF,eAAe,CAAC,QAAQ,CAAC,IAAI,WAAW,CAAC,QAAQ,CAAC,CAAC,IAAI,CAAC,IAC9E,eAAe,CAAC,QAAQ,CAC1B,qCAAqC,SAAS;UACtC,UAAU;;YAER,OAAO;;UAET,UAAU;;;GAGjB,CAAC;AACJ,CAAC","sourcesContent":["/**\n * Modal Component\n *\n * Dialog and modal components.\n */\n\nimport { escapeHtml } from '../layouts/base';\n\n// ============================================\n// Modal Types\n// ============================================\n\n/**\n * Modal size options\n */\nexport type ModalSize = 'sm' | 'md' | 'lg' | 'xl' | 'full';\n\n/**\n * Modal component options\n */\nexport interface ModalOptions {\n  /** Modal ID */\n  id: string;\n  /** Modal title */\n  title?: string;\n  /** Modal size */\n  size?: ModalSize;\n  /** Show close button */\n  showClose?: boolean;\n  /** Close on backdrop click */\n  closeOnBackdrop?: boolean;\n  /** Close on escape key */\n  closeOnEscape?: boolean;\n  /** Footer content */\n  footer?: string;\n  /** Additional CSS classes for modal */\n  className?: string;\n  /** Initially visible */\n  open?: boolean;\n  /** HTMX for closing */\n  onClose?: {\n    delete?: string;\n    target?: string;\n    swap?: string;\n  };\n}\n\n// ============================================\n// Modal Builder\n// ============================================\n\n/**\n * Get size CSS classes\n */\nfunction getSizeClasses(size: ModalSize): string {\n  const sizes: Record<ModalSize, string> = {\n    sm: 'max-w-sm',\n    md: 'max-w-md',\n    lg: 'max-w-lg',\n    xl: 'max-w-2xl',\n    full: 'max-w-full mx-4',\n  };\n  return sizes[size];\n}\n\n/**\n * Build a modal component\n */\nexport function modal(content: string, options: ModalOptions): string {\n  const {\n    id,\n    title,\n    size = 'md',\n    showClose = true,\n    closeOnBackdrop = true,\n    closeOnEscape = true,\n    footer,\n    className = '',\n    open = false,\n    onClose,\n  } = options;\n\n  const sizeClasses = getSizeClasses(size);\n  const visibilityClasses = open ? '' : 'hidden';\n\n  const headerHtml =\n    title || showClose\n      ? `<div class=\"flex items-center justify-between p-4 border-b border-divider\">\n        ${title ? `<h3 class=\"text-lg font-semibold text-text-primary\">${escapeHtml(title)}</h3>` : '<div></div>'}\n        ${\n          showClose\n            ? `\n          <button\n            type=\"button\"\n            class=\"p-1 rounded-lg text-text-secondary hover:text-text-primary hover:bg-gray-100 transition-colors\"\n            onclick=\"document.getElementById('${escapeHtml(id)}').classList.add('hidden')\"\n            ${onClose?.delete ? `hx-delete=\"${escapeHtml(onClose.delete)}\"` : ''}\n            ${onClose?.target ? `hx-target=\"${escapeHtml(onClose.target)}\"` : ''}\n            ${onClose?.swap ? `hx-swap=\"${escapeHtml(onClose.swap)}\"` : ''}\n            aria-label=\"Close\"\n          >\n            <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=\"M6 18L18 6M6 6l12 12\"/>\n            </svg>\n          </button>\n        `\n            : ''\n        }\n      </div>`\n      : '';\n\n  const footerHtml = footer\n    ? `<div class=\"flex items-center justify-end gap-3 p-4 border-t border-divider\">\n        ${footer}\n      </div>`\n    : '';\n\n  const backdropClickHandler = closeOnBackdrop\n    ? `onclick=\"if (event.target === this) this.classList.add('hidden')\"`\n    : '';\n\n  const escapeHandler = closeOnEscape\n    ? `<script>\n        document.addEventListener('keydown', function(e) {\n          if (e.key === 'Escape') {\n            document.getElementById('${escapeHtml(id)}')?.classList.add('hidden');\n          }\n        });\n      </script>`\n    : '';\n\n  return `\n    <div\n      id=\"${escapeHtml(id)}\"\n      class=\"fixed inset-0 z-50 overflow-y-auto ${visibilityClasses}\"\n      ${backdropClickHandler}\n      role=\"dialog\"\n      aria-modal=\"true\"\n      aria-labelledby=\"${escapeHtml(id)}-title\"\n    >\n      <!-- Backdrop -->\n      <div class=\"fixed inset-0 bg-black/50 transition-opacity\"></div>\n\n      <!-- Modal container -->\n      <div class=\"flex min-h-full items-center justify-center p-4\">\n        <div class=\"relative w-full ${sizeClasses} bg-white rounded-xl shadow-xl ${className}\">\n          ${headerHtml}\n          <div class=\"p-4\">\n            ${content}\n          </div>\n          ${footerHtml}\n        </div>\n      </div>\n    </div>\n    ${escapeHandler}\n  `;\n}\n\n// ============================================\n// Modal Trigger\n// ============================================\n\n/**\n * Build a modal trigger button/element\n */\nexport function modalTrigger(\n  triggerContent: string,\n  modalId: string,\n  options: { className?: string; tag?: 'button' | 'a' | 'span' } = {},\n): string {\n  const { className = '', tag = 'button' } = options;\n\n  const attrs = `\n    class=\"${className}\"\n    onclick=\"document.getElementById('${escapeHtml(modalId)}').classList.remove('hidden')\"\n  `;\n\n  if (tag === 'button') {\n    return `<button type=\"button\" ${attrs}>${triggerContent}</button>`;\n  }\n\n  return `<${tag} ${attrs}>${triggerContent}</${tag}>`;\n}\n\n// ============================================\n// Confirmation Modal\n// ============================================\n\n/**\n * Confirmation modal options\n */\nexport interface ConfirmModalOptions {\n  /** Modal ID */\n  id: string;\n  /** Dialog title */\n  title?: string;\n  /** Confirmation message */\n  message: string;\n  /** Confirm button text */\n  confirmText?: string;\n  /** Cancel button text */\n  cancelText?: string;\n  /** Confirm button variant */\n  variant?: 'primary' | 'danger' | 'warning';\n  /** Icon */\n  icon?: string;\n  /** HTMX for confirm action */\n  onConfirm?: {\n    post?: string;\n    delete?: string;\n    put?: string;\n    target?: string;\n    swap?: string;\n  };\n}\n\n/**\n * Build a confirmation modal\n */\nexport function confirmModal(options: ConfirmModalOptions): string {\n  const {\n    id,\n    title = 'Confirm Action',\n    message,\n    confirmText = 'Confirm',\n    cancelText = 'Cancel',\n    variant = 'primary',\n    icon,\n    onConfirm,\n  } = options;\n\n  const variantClasses: Record<string, string> = {\n    primary: 'bg-primary hover:bg-primary/90 text-white',\n    danger: 'bg-danger hover:bg-danger/90 text-white',\n    warning: 'bg-warning hover:bg-warning/90 text-white',\n  };\n\n  const iconColors: Record<string, string> = {\n    primary: 'text-primary bg-primary/10',\n    danger: 'text-danger bg-danger/10',\n    warning: 'text-warning bg-warning/10',\n  };\n\n  const defaultIcons: Record<string, string> = {\n    primary: `<svg class=\"w-6 h-6\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n      <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M8.228 9c.549-1.165 2.03-2 3.772-2 2.21 0 4 1.343 4 3 0 1.4-1.278 2.575-3.006 2.907-.542.104-.994.54-.994 1.093m0 3h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z\"/>\n    </svg>`,\n    danger: `<svg class=\"w-6 h-6\" 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    warning: `<svg class=\"w-6 h-6\" 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  };\n\n  const displayIcon = icon || defaultIcons[variant];\n\n  const htmxAttrs: string[] = [];\n  if (onConfirm) {\n    if (onConfirm.post) htmxAttrs.push(`hx-post=\"${escapeHtml(onConfirm.post)}\"`);\n    if (onConfirm.delete) htmxAttrs.push(`hx-delete=\"${escapeHtml(onConfirm.delete)}\"`);\n    if (onConfirm.put) htmxAttrs.push(`hx-put=\"${escapeHtml(onConfirm.put)}\"`);\n    if (onConfirm.target) htmxAttrs.push(`hx-target=\"${escapeHtml(onConfirm.target)}\"`);\n    if (onConfirm.swap) htmxAttrs.push(`hx-swap=\"${escapeHtml(onConfirm.swap)}\"`);\n  }\n\n  const content = `\n    <div class=\"text-center\">\n      <div class=\"mx-auto w-12 h-12 rounded-full ${iconColors[variant]} flex items-center justify-center mb-4\">\n        ${displayIcon}\n      </div>\n      <h3 class=\"text-lg font-semibold text-text-primary mb-2\">${escapeHtml(title)}</h3>\n      <p class=\"text-text-secondary\">${escapeHtml(message)}</p>\n    </div>\n  `;\n\n  const footer = `\n    <button\n      type=\"button\"\n      class=\"px-4 py-2 rounded-lg border border-border text-text-primary hover:bg-gray-50 transition-colors\"\n      onclick=\"document.getElementById('${escapeHtml(id)}').classList.add('hidden')\"\n    >\n      ${escapeHtml(cancelText)}\n    </button>\n    <button\n      type=\"button\"\n      class=\"px-4 py-2 rounded-lg ${variantClasses[variant]} transition-colors\"\n      ${htmxAttrs.join(' ')}\n      onclick=\"document.getElementById('${escapeHtml(id)}').classList.add('hidden')\"\n    >\n      ${escapeHtml(confirmText)}\n    </button>\n  `;\n\n  return modal(content, {\n    id,\n    size: 'sm',\n    showClose: false,\n    footer,\n  });\n}\n\n// ============================================\n// Drawer Component\n// ============================================\n\n/**\n * Drawer position options\n */\nexport type DrawerPosition = 'left' | 'right' | 'top' | 'bottom';\n\n/**\n * Drawer options\n */\nexport interface DrawerOptions {\n  /** Drawer ID */\n  id: string;\n  /** Drawer title */\n  title?: string;\n  /** Drawer position */\n  position?: DrawerPosition;\n  /** Drawer size (width for left/right, height for top/bottom) */\n  size?: 'sm' | 'md' | 'lg' | 'xl';\n  /** Show close button */\n  showClose?: boolean;\n  /** Close on backdrop click */\n  closeOnBackdrop?: boolean;\n  /** Footer content */\n  footer?: string;\n  /** Additional CSS classes */\n  className?: string;\n  /** Initially visible */\n  open?: boolean;\n}\n\n/**\n * Build a drawer component\n */\nexport function drawer(content: string, options: DrawerOptions): string {\n  const {\n    id,\n    title,\n    position = 'right',\n    size = 'md',\n    showClose = true,\n    closeOnBackdrop = true,\n    footer,\n    className = '',\n    open = false,\n  } = options;\n\n  const sizeClasses: Record<string, Record<string, string>> = {\n    left: { sm: 'w-64', md: 'w-80', lg: 'w-96', xl: 'w-[32rem]' },\n    right: { sm: 'w-64', md: 'w-80', lg: 'w-96', xl: 'w-[32rem]' },\n    top: { sm: 'h-32', md: 'h-48', lg: 'h-64', xl: 'h-96' },\n    bottom: { sm: 'h-32', md: 'h-48', lg: 'h-64', xl: 'h-96' },\n  };\n\n  const positionClasses: Record<DrawerPosition, string> = {\n    left: 'inset-y-0 left-0',\n    right: 'inset-y-0 right-0',\n    top: 'inset-x-0 top-0',\n    bottom: 'inset-x-0 bottom-0',\n  };\n\n  const fullSizeClasses: Record<DrawerPosition, string> = {\n    left: 'h-full',\n    right: 'h-full',\n    top: 'w-full',\n    bottom: 'w-full',\n  };\n\n  const visibilityClasses = open ? '' : 'hidden';\n\n  const headerHtml =\n    title || showClose\n      ? `<div class=\"flex items-center justify-between p-4 border-b border-divider\">\n        ${title ? `<h3 class=\"text-lg font-semibold text-text-primary\">${escapeHtml(title)}</h3>` : '<div></div>'}\n        ${\n          showClose\n            ? `\n          <button\n            type=\"button\"\n            class=\"p-1 rounded-lg text-text-secondary hover:text-text-primary hover:bg-gray-100 transition-colors\"\n            onclick=\"document.getElementById('${escapeHtml(id)}').classList.add('hidden')\"\n            aria-label=\"Close\"\n          >\n            <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=\"M6 18L18 6M6 6l12 12\"/>\n            </svg>\n          </button>\n        `\n            : ''\n        }\n      </div>`\n      : '';\n\n  const footerHtml = footer ? `<div class=\"p-4 border-t border-divider\">${footer}</div>` : '';\n\n  const backdropClickHandler = closeOnBackdrop\n    ? `onclick=\"if (event.target === this) this.classList.add('hidden')\"`\n    : '';\n\n  return `\n    <div\n      id=\"${escapeHtml(id)}\"\n      class=\"fixed inset-0 z-50 ${visibilityClasses}\"\n      ${backdropClickHandler}\n      role=\"dialog\"\n      aria-modal=\"true\"\n    >\n      <!-- Backdrop -->\n      <div class=\"fixed inset-0 bg-black/50 transition-opacity\"></div>\n\n      <!-- Drawer -->\n      <div class=\"fixed ${positionClasses[position]} ${sizeClasses[position][size]} ${\n    fullSizeClasses[position]\n  } bg-white shadow-xl flex flex-col ${className}\">\n        ${headerHtml}\n        <div class=\"flex-1 overflow-y-auto p-4\">\n          ${content}\n        </div>\n        ${footerHtml}\n      </div>\n    </div>\n  `;\n}\n"]}