@frontmcp/ui 0.5.0 → 0.6.0

package/src/components/list.d.ts

@@ -1,127 +0,0 @@
-/**
- * List Components
- *
- * Various list presentations including permission lists, feature lists, and data lists.
- */
-/**
- * Permission/Scope item for OAuth consent
- */
-export interface PermissionItem {
-    /** Scope identifier */
-    scope: string;
-    /** Display name */
-    name: string;
-    /** Description */
-    description?: string;
-    /** Icon HTML */
-    icon?: string;
-    /** Required permission (cannot be unchecked) */
-    required?: boolean;
-    /** Checked by default */
-    checked?: boolean;
-    /** Sensitive/dangerous permission */
-    sensitive?: boolean;
-}
-/**
- * Feature list item
- */
-export interface FeatureItem {
-    /** Feature name */
-    name: string;
-    /** Feature description */
-    description?: string;
-    /** Icon HTML */
-    icon?: string;
-    /** Included in plan */
-    included?: boolean;
-}
-/**
- * Description list item
- */
-export interface DescriptionItem {
-    /** Term/label */
-    term: string;
-    /** Description/value */
-    description: string;
-    /** Copy button */
-    copyable?: boolean;
-}
-/**
- * Permission list options
- */
-export interface PermissionListOptions {
-    /** List ID */
-    id?: string;
-    /** Checkable permissions */
-    checkable?: boolean;
-    /** Input name for checkable */
-    inputName?: string;
-    /** Group title */
-    title?: string;
-    /** Additional CSS classes */
-    className?: string;
-}
-/**
- * Build a permission list for OAuth consent
- */
-export declare function permissionList(permissions: PermissionItem[], options?: PermissionListOptions): string;
-/**
- * Feature list options
- */
-export interface FeatureListOptions {
-    /** List style */
-    style?: 'check' | 'bullet' | 'number';
-    /** Icon for included items */
-    includedIcon?: string;
-    /** Icon for excluded items */
-    excludedIcon?: string;
-    /** Additional CSS classes */
-    className?: string;
-}
-/**
- * Build a feature list
- */
-export declare function featureList(features: FeatureItem[], options?: FeatureListOptions): string;
-/**
- * Description list options
- */
-export interface DescriptionListOptions {
-    /** Layout style */
-    layout?: 'stacked' | 'horizontal' | 'grid';
-    /** Dividers between items */
-    dividers?: boolean;
-    /** Additional CSS classes */
-    className?: string;
-}
-/**
- * Build a description list
- */
-export declare function descriptionList(items: DescriptionItem[], options?: DescriptionListOptions): string;
-/**
- * Action list item
- */
-export interface ActionItem {
-    /** Item label */
-    label: string;
-    /** Item description */
-    description?: string;
-    /** Icon HTML */
-    icon?: string;
-    /** Click URL */
-    href?: string;
-    /** HTMX attributes */
-    htmx?: {
-        get?: string;
-        post?: string;
-        target?: string;
-        swap?: string;
-    };
-    /** Destructive action */
-    destructive?: boolean;
-    /** Disabled state */
-    disabled?: boolean;
-}
-/**
- * Build an action list (menu-like)
- */
-export declare function actionList(items: ActionItem[], className?: string): string;

package/src/components/list.js

@@ -1,279 +0,0 @@
-"use strict";
-/**
- * List Components
- *
- * Various list presentations including permission lists, feature lists, and data lists.
- */
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.permissionList = permissionList;
-exports.featureList = featureList;
-exports.descriptionList = descriptionList;
-exports.actionList = actionList;
-const base_1 = require("../layouts/base");
-/**
- * Default permission icons
- */
-const permissionIcons = {
-    read: `<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="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/>
-    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"/>
-  </svg>`,
-    write: `<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="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"/>
-  </svg>`,
-    delete: `<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="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"/>
-  </svg>`,
-    profile: `<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="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"/>
-  </svg>`,
-    email: `<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="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"/>
-  </svg>`,
-    settings: `<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.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"/>
-    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/>
-  </svg>`,
-    default: `<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-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"/>
-  </svg>`,
-};
-/**
- * Get icon for permission type
- */
-function getPermissionIcon(scope, customIcon) {
-    if (customIcon)
-        return customIcon;
-    const scopeLower = scope.toLowerCase();
-    if (scopeLower.includes('read'))
-        return permissionIcons['read'];
-    if (scopeLower.includes('write') || scopeLower.includes('create') || scopeLower.includes('update'))
-        return permissionIcons['write'];
-    if (scopeLower.includes('delete'))
-        return permissionIcons['delete'];
-    if (scopeLower.includes('profile'))
-        return permissionIcons['profile'];
-    if (scopeLower.includes('email'))
-        return permissionIcons['email'];
-    if (scopeLower.includes('settings') || scopeLower.includes('config'))
-        return permissionIcons['settings'];
-    return permissionIcons['default'];
-}
-/**
- * Build a permission list for OAuth consent
- */
-function permissionList(permissions, options = {}) {
-    const { id, checkable = false, inputName = 'scopes', title, className = '' } = options;
-    const titleHtml = title ? `<h4 class="font-medium text-text-primary mb-3">${(0, base_1.escapeHtml)(title)}</h4>` : '';
-    const itemsHtml = permissions
-        .map((perm, index) => {
-        const icon = getPermissionIcon(perm.scope, perm.icon);
-        const sensitiveClasses = perm.sensitive ? 'border-warning/30 bg-warning/5' : 'border-border';
-        const sensitiveLabel = perm.sensitive
-            ? '<span class="text-xs text-warning font-medium ml-2">Sensitive</span>'
-            : '';
-        const checkboxHtml = checkable
-            ? `<input
-          type="checkbox"
-          name="${(0, base_1.escapeHtml)(inputName)}[]"
-          value="${(0, base_1.escapeHtml)(perm.scope)}"
-          class="w-4 h-4 rounded border-border text-primary focus:ring-primary/20"
-          ${perm.checked || perm.required ? 'checked' : ''}
-          ${perm.required ? 'disabled' : ''}
-          id="${id ? (0, base_1.escapeHtml)(id) : 'perm'}-${index}"
-        >`
-            : `<div class="w-5 h-5 rounded-full bg-success/10 text-success flex items-center justify-center">
-          <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M5 13l4 4L19 7"/>
-          </svg>
-        </div>`;
-        return `<div class="flex items-start gap-3 p-3 border ${sensitiveClasses} rounded-lg">
-      <div class="flex-shrink-0 mt-0.5 text-text-secondary">
-        ${icon}
-      </div>
-      <div class="flex-1 min-w-0">
-        <div class="flex items-center">
-          <span class="font-medium text-text-primary">${(0, base_1.escapeHtml)(perm.name)}</span>
-          ${perm.required ? '<span class="text-xs text-text-secondary ml-2">(Required)</span>' : ''}
-          ${sensitiveLabel}
-        </div>
-        ${perm.description ? `<p class="text-sm text-text-secondary mt-0.5">${(0, base_1.escapeHtml)(perm.description)}</p>` : ''}
-      </div>
-      <div class="flex-shrink-0">
-        ${checkboxHtml}
-      </div>
-    </div>`;
-    })
-        .join('\n');
-    const idAttr = id ? `id="${(0, base_1.escapeHtml)(id)}"` : '';
-    return `<div class="permission-list ${className}" ${idAttr}>
-    ${titleHtml}
-    <div class="space-y-2">
-      ${itemsHtml}
-    </div>
-  </div>`;
-}
-/**
- * Build a feature list
- */
-function featureList(features, options = {}) {
-    const { style = 'check', includedIcon, excludedIcon, className = '' } = options;
-    const defaultIncludedIcon = `<svg class="w-5 h-5 text-success" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/>
-  </svg>`;
-    const defaultExcludedIcon = `<svg class="w-5 h-5 text-gray-300" 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>`;
-    const itemsHtml = features
-        .map((feature, index) => {
-        const included = feature.included !== false;
-        let iconHtml;
-        if (style === 'check') {
-            iconHtml = included ? includedIcon || defaultIncludedIcon : excludedIcon || defaultExcludedIcon;
-        }
-        else if (style === 'bullet') {
-            iconHtml = `<span class="w-2 h-2 rounded-full ${included ? 'bg-primary' : 'bg-gray-300'}"></span>`;
-        }
-        else {
-            iconHtml = `<span class="text-sm font-medium ${included ? 'text-primary' : 'text-gray-400'}">${index + 1}.</span>`;
-        }
-        const textClasses = included ? 'text-text-primary' : 'text-text-secondary line-through';
-        return `<li class="flex items-start gap-3">
-      <div class="flex-shrink-0 mt-0.5">${iconHtml}</div>
-      <div class="flex-1">
-        <span class="${textClasses}">${(0, base_1.escapeHtml)(feature.name)}</span>
-        ${feature.description ? `<p class="text-sm text-text-secondary">${(0, base_1.escapeHtml)(feature.description)}</p>` : ''}
-      </div>
-    </li>`;
-    })
-        .join('\n');
-    return `<ul class="space-y-3 ${className}">${itemsHtml}</ul>`;
-}
-/**
- * Build a description list
- */
-function descriptionList(items, options = {}) {
-    const { layout = 'stacked', dividers = false, className = '' } = options;
-    const copyScript = `
-    <script>
-      function copyToClipboard(text, btn) {
-        navigator.clipboard.writeText(text).then(() => {
-          const originalText = btn.innerHTML;
-          btn.innerHTML = '<svg class="w-4 h-4 text-success" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg>';
-          setTimeout(() => btn.innerHTML = originalText, 2000);
-        });
-      }
-    </script>
-  `;
-    const hasCopyable = items.some((item) => item.copyable);
-    if (layout === 'horizontal') {
-        const itemsHtml = items
-            .map((item) => {
-            const copyBtn = item.copyable
-                ? `<button type="button" onclick="copyToClipboard('${(0, base_1.escapeHtml)(item.description)}', this)" class="ml-2 p-1 rounded hover:bg-gray-100 transition-colors">
-            <svg class="w-4 h-4 text-text-secondary" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z"/>
-            </svg>
-          </button>`
-                : '';
-            return `<div class="py-3 sm:grid sm:grid-cols-3 sm:gap-4 ${dividers ? 'border-b border-divider' : ''}">
-        <dt class="text-sm font-medium text-text-secondary">${(0, base_1.escapeHtml)(item.term)}</dt>
-        <dd class="mt-1 sm:mt-0 sm:col-span-2 text-sm text-text-primary flex items-center">
-          ${(0, base_1.escapeHtml)(item.description)}
-          ${copyBtn}
-        </dd>
-      </div>`;
-        })
-            .join('\n');
-        return `<dl class="${className}">${itemsHtml}</dl>${hasCopyable ? copyScript : ''}`;
-    }
-    if (layout === 'grid') {
-        const itemsHtml = items
-            .map((item) => {
-            const copyBtn = item.copyable
-                ? `<button type="button" onclick="copyToClipboard('${(0, base_1.escapeHtml)(item.description)}', this)" class="absolute top-2 right-2 p-1 rounded hover:bg-gray-100 transition-colors">
-            <svg class="w-4 h-4 text-text-secondary" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z"/>
-            </svg>
-          </button>`
-                : '';
-            return `<div class="relative p-4 bg-gray-50 rounded-lg">
-        <dt class="text-sm font-medium text-text-secondary">${(0, base_1.escapeHtml)(item.term)}</dt>
-        <dd class="mt-1 text-sm text-text-primary font-medium">${(0, base_1.escapeHtml)(item.description)}</dd>
-        ${copyBtn}
-      </div>`;
-        })
-            .join('\n');
-        return `<dl class="grid grid-cols-2 gap-4 ${className}">${itemsHtml}</dl>${hasCopyable ? copyScript : ''}`;
-    }
-    // Stacked layout (default)
-    const itemsHtml = items
-        .map((item) => {
-        const copyBtn = item.copyable
-            ? `<button type="button" onclick="copyToClipboard('${(0, base_1.escapeHtml)(item.description)}', this)" class="ml-2 p-1 rounded hover:bg-gray-100 transition-colors">
-          <svg class="w-4 h-4 text-text-secondary" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z"/>
-          </svg>
-        </button>`
-            : '';
-        return `<div class="${dividers ? 'py-3 border-b border-divider last:border-0' : 'py-2'}">
-      <dt class="text-sm text-text-secondary">${(0, base_1.escapeHtml)(item.term)}</dt>
-      <dd class="mt-1 text-sm text-text-primary font-medium flex items-center">
-        ${(0, base_1.escapeHtml)(item.description)}
-        ${copyBtn}
-      </dd>
-    </div>`;
-    })
-        .join('\n');
-    return `<dl class="${className}">${itemsHtml}</dl>${hasCopyable ? copyScript : ''}`;
-}
-/**
- * Build an action list (menu-like)
- */
-function actionList(items, className = '') {
-    const itemsHtml = items
-        .map((item) => {
-        const baseClasses = [
-            'flex items-center gap-3 px-4 py-3 transition-colors',
-            item.disabled
-                ? 'opacity-50 cursor-not-allowed'
-                : item.destructive
-                    ? 'hover:bg-danger/5 text-danger cursor-pointer'
-                    : 'hover:bg-gray-50 cursor-pointer',
-        ].join(' ');
-        const iconHtml = item.icon
-            ? `<span class="flex-shrink-0 ${item.destructive ? 'text-danger' : 'text-text-secondary'}">${item.icon}</span>`
-            : '';
-        const contentHtml = `
-      ${iconHtml}
-      <div class="flex-1 min-w-0">
-        <div class="font-medium ${item.destructive ? 'text-danger' : 'text-text-primary'}">${(0, base_1.escapeHtml)(item.label)}</div>
-        ${item.description ? `<p class="text-sm text-text-secondary">${(0, base_1.escapeHtml)(item.description)}</p>` : ''}
-      </div>
-      <svg class="w-5 h-5 text-text-secondary" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/>
-      </svg>
-    `;
-        if (item.disabled) {
-            return `<div class="${baseClasses}">${contentHtml}</div>`;
-        }
-        const htmxAttrs = [];
-        if (item.htmx) {
-            if (item.htmx.get)
-                htmxAttrs.push(`hx-get="${(0, base_1.escapeHtml)(item.htmx.get)}"`);
-            if (item.htmx.post)
-                htmxAttrs.push(`hx-post="${(0, base_1.escapeHtml)(item.htmx.post)}"`);
-            if (item.htmx.target)
-                htmxAttrs.push(`hx-target="${(0, base_1.escapeHtml)(item.htmx.target)}"`);
-            if (item.htmx.swap)
-                htmxAttrs.push(`hx-swap="${(0, base_1.escapeHtml)(item.htmx.swap)}"`);
-        }
-        if (item.href) {
-            return `<a href="${(0, base_1.escapeHtml)(item.href)}" class="${baseClasses}" ${htmxAttrs.join(' ')}>${contentHtml}</a>`;
-        }
-        return `<div class="${baseClasses}" ${htmxAttrs.join(' ')}>${contentHtml}</div>`;
-    })
-        .join('\n');
-    return `<div class="divide-y divide-divider ${className}">${itemsHtml}</div>`;
-}
-//# sourceMappingURL=list.js.map

package/src/components/list.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"list.js","sourceRoot":"","sources":["../../../src/components/list.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * List Components\n *\n * Various list presentations including permission lists, feature lists, and data lists.\n */\n\nimport { escapeHtml } from '../layouts/base';\n\n// ============================================\n// List Item Types\n// ============================================\n\n/**\n * Permission/Scope item for OAuth consent\n */\nexport interface PermissionItem {\n  /** Scope identifier */\n  scope: string;\n  /** Display name */\n  name: string;\n  /** Description */\n  description?: string;\n  /** Icon HTML */\n  icon?: string;\n  /** Required permission (cannot be unchecked) */\n  required?: boolean;\n  /** Checked by default */\n  checked?: boolean;\n  /** Sensitive/dangerous permission */\n  sensitive?: boolean;\n}\n\n/**\n * Feature list item\n */\nexport interface FeatureItem {\n  /** Feature name */\n  name: string;\n  /** Feature description */\n  description?: string;\n  /** Icon HTML */\n  icon?: string;\n  /** Included in plan */\n  included?: boolean;\n}\n\n/**\n * Description list item\n */\nexport interface DescriptionItem {\n  /** Term/label */\n  term: string;\n  /** Description/value */\n  description: string;\n  /** Copy button */\n  copyable?: boolean;\n}\n\n// ============================================\n// Permission List (for OAuth consent)\n// ============================================\n\n/**\n * Permission list options\n */\nexport interface PermissionListOptions {\n  /** List ID */\n  id?: string;\n  /** Checkable permissions */\n  checkable?: boolean;\n  /** Input name for checkable */\n  inputName?: string;\n  /** Group title */\n  title?: string;\n  /** Additional CSS classes */\n  className?: string;\n}\n\n/**\n * Default permission icons\n */\nconst permissionIcons: Record<string, string> = {\n  read: `<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=\"M15 12a3 3 0 11-6 0 3 3 0 016 0z\"/>\n    <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z\"/>\n  </svg>`,\n  write: `<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=\"M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z\"/>\n  </svg>`,\n  delete: `<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=\"M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16\"/>\n  </svg>`,\n  profile: `<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=\"M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z\"/>\n  </svg>`,\n  email: `<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=\"M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z\"/>\n  </svg>`,\n  settings: `<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.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z\"/>\n    <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M15 12a3 3 0 11-6 0 3 3 0 016 0z\"/>\n  </svg>`,\n  default: `<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-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z\"/>\n  </svg>`,\n};\n\n/**\n * Get icon for permission type\n */\nfunction getPermissionIcon(scope: string, customIcon?: string): string {\n  if (customIcon) return customIcon;\n\n  const scopeLower = scope.toLowerCase();\n  if (scopeLower.includes('read')) return permissionIcons['read'];\n  if (scopeLower.includes('write') || scopeLower.includes('create') || scopeLower.includes('update'))\n    return permissionIcons['write'];\n  if (scopeLower.includes('delete')) return permissionIcons['delete'];\n  if (scopeLower.includes('profile')) return permissionIcons['profile'];\n  if (scopeLower.includes('email')) return permissionIcons['email'];\n  if (scopeLower.includes('settings') || scopeLower.includes('config')) return permissionIcons['settings'];\n\n  return permissionIcons['default'];\n}\n\n/**\n * Build a permission list for OAuth consent\n */\nexport function permissionList(permissions: PermissionItem[], options: PermissionListOptions = {}): string {\n  const { id, checkable = false, inputName = 'scopes', title, className = '' } = options;\n\n  const titleHtml = title ? `<h4 class=\"font-medium text-text-primary mb-3\">${escapeHtml(title)}</h4>` : '';\n\n  const itemsHtml = permissions\n    .map((perm, index) => {\n      const icon = getPermissionIcon(perm.scope, perm.icon);\n      const sensitiveClasses = perm.sensitive ? 'border-warning/30 bg-warning/5' : 'border-border';\n      const sensitiveLabel = perm.sensitive\n        ? '<span class=\"text-xs text-warning font-medium ml-2\">Sensitive</span>'\n        : '';\n\n      const checkboxHtml = checkable\n        ? `<input\n          type=\"checkbox\"\n          name=\"${escapeHtml(inputName)}[]\"\n          value=\"${escapeHtml(perm.scope)}\"\n          class=\"w-4 h-4 rounded border-border text-primary focus:ring-primary/20\"\n          ${perm.checked || perm.required ? 'checked' : ''}\n          ${perm.required ? 'disabled' : ''}\n          id=\"${id ? escapeHtml(id) : 'perm'}-${index}\"\n        >`\n        : `<div class=\"w-5 h-5 rounded-full bg-success/10 text-success flex items-center justify-center\">\n          <svg class=\"w-3 h-3\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n            <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"3\" d=\"M5 13l4 4L19 7\"/>\n          </svg>\n        </div>`;\n\n      return `<div class=\"flex items-start gap-3 p-3 border ${sensitiveClasses} rounded-lg\">\n      <div class=\"flex-shrink-0 mt-0.5 text-text-secondary\">\n        ${icon}\n      </div>\n      <div class=\"flex-1 min-w-0\">\n        <div class=\"flex items-center\">\n          <span class=\"font-medium text-text-primary\">${escapeHtml(perm.name)}</span>\n          ${perm.required ? '<span class=\"text-xs text-text-secondary ml-2\">(Required)</span>' : ''}\n          ${sensitiveLabel}\n        </div>\n        ${perm.description ? `<p class=\"text-sm text-text-secondary mt-0.5\">${escapeHtml(perm.description)}</p>` : ''}\n      </div>\n      <div class=\"flex-shrink-0\">\n        ${checkboxHtml}\n      </div>\n    </div>`;\n    })\n    .join('\\n');\n\n  const idAttr = id ? `id=\"${escapeHtml(id)}\"` : '';\n\n  return `<div class=\"permission-list ${className}\" ${idAttr}>\n    ${titleHtml}\n    <div class=\"space-y-2\">\n      ${itemsHtml}\n    </div>\n  </div>`;\n}\n\n// ============================================\n// Feature List\n// ============================================\n\n/**\n * Feature list options\n */\nexport interface FeatureListOptions {\n  /** List style */\n  style?: 'check' | 'bullet' | 'number';\n  /** Icon for included items */\n  includedIcon?: string;\n  /** Icon for excluded items */\n  excludedIcon?: string;\n  /** Additional CSS classes */\n  className?: string;\n}\n\n/**\n * Build a feature list\n */\nexport function featureList(features: FeatureItem[], options: FeatureListOptions = {}): string {\n  const { style = 'check', includedIcon, excludedIcon, className = '' } = options;\n\n  const defaultIncludedIcon = `<svg class=\"w-5 h-5 text-success\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n    <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M5 13l4 4L19 7\"/>\n  </svg>`;\n\n  const defaultExcludedIcon = `<svg class=\"w-5 h-5 text-gray-300\" 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\n  const itemsHtml = features\n    .map((feature, index) => {\n      const included = feature.included !== false;\n\n      let iconHtml: string;\n      if (style === 'check') {\n        iconHtml = included ? includedIcon || defaultIncludedIcon : excludedIcon || defaultExcludedIcon;\n      } else if (style === 'bullet') {\n        iconHtml = `<span class=\"w-2 h-2 rounded-full ${included ? 'bg-primary' : 'bg-gray-300'}\"></span>`;\n      } else {\n        iconHtml = `<span class=\"text-sm font-medium ${included ? 'text-primary' : 'text-gray-400'}\">${\n          index + 1\n        }.</span>`;\n      }\n\n      const textClasses = included ? 'text-text-primary' : 'text-text-secondary line-through';\n\n      return `<li class=\"flex items-start gap-3\">\n      <div class=\"flex-shrink-0 mt-0.5\">${iconHtml}</div>\n      <div class=\"flex-1\">\n        <span class=\"${textClasses}\">${escapeHtml(feature.name)}</span>\n        ${feature.description ? `<p class=\"text-sm text-text-secondary\">${escapeHtml(feature.description)}</p>` : ''}\n      </div>\n    </li>`;\n    })\n    .join('\\n');\n\n  return `<ul class=\"space-y-3 ${className}\">${itemsHtml}</ul>`;\n}\n\n// ============================================\n// Description List\n// ============================================\n\n/**\n * Description list options\n */\nexport interface DescriptionListOptions {\n  /** Layout style */\n  layout?: 'stacked' | 'horizontal' | 'grid';\n  /** Dividers between items */\n  dividers?: boolean;\n  /** Additional CSS classes */\n  className?: string;\n}\n\n/**\n * Build a description list\n */\nexport function descriptionList(items: DescriptionItem[], options: DescriptionListOptions = {}): string {\n  const { layout = 'stacked', dividers = false, className = '' } = options;\n\n  const copyScript = `\n    <script>\n      function copyToClipboard(text, btn) {\n        navigator.clipboard.writeText(text).then(() => {\n          const originalText = btn.innerHTML;\n          btn.innerHTML = '<svg class=\"w-4 h-4 text-success\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M5 13l4 4L19 7\"/></svg>';\n          setTimeout(() => btn.innerHTML = originalText, 2000);\n        });\n      }\n    </script>\n  `;\n\n  const hasCopyable = items.some((item) => item.copyable);\n\n  if (layout === 'horizontal') {\n    const itemsHtml = items\n      .map((item) => {\n        const copyBtn = item.copyable\n          ? `<button type=\"button\" onclick=\"copyToClipboard('${escapeHtml(\n              item.description,\n            )}', this)\" class=\"ml-2 p-1 rounded hover:bg-gray-100 transition-colors\">\n            <svg class=\"w-4 h-4 text-text-secondary\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n              <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z\"/>\n            </svg>\n          </button>`\n          : '';\n\n        return `<div class=\"py-3 sm:grid sm:grid-cols-3 sm:gap-4 ${dividers ? 'border-b border-divider' : ''}\">\n        <dt class=\"text-sm font-medium text-text-secondary\">${escapeHtml(item.term)}</dt>\n        <dd class=\"mt-1 sm:mt-0 sm:col-span-2 text-sm text-text-primary flex items-center\">\n          ${escapeHtml(item.description)}\n          ${copyBtn}\n        </dd>\n      </div>`;\n      })\n      .join('\\n');\n\n    return `<dl class=\"${className}\">${itemsHtml}</dl>${hasCopyable ? copyScript : ''}`;\n  }\n\n  if (layout === 'grid') {\n    const itemsHtml = items\n      .map((item) => {\n        const copyBtn = item.copyable\n          ? `<button type=\"button\" onclick=\"copyToClipboard('${escapeHtml(\n              item.description,\n            )}', this)\" class=\"absolute top-2 right-2 p-1 rounded hover:bg-gray-100 transition-colors\">\n            <svg class=\"w-4 h-4 text-text-secondary\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n              <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z\"/>\n            </svg>\n          </button>`\n          : '';\n\n        return `<div class=\"relative p-4 bg-gray-50 rounded-lg\">\n        <dt class=\"text-sm font-medium text-text-secondary\">${escapeHtml(item.term)}</dt>\n        <dd class=\"mt-1 text-sm text-text-primary font-medium\">${escapeHtml(item.description)}</dd>\n        ${copyBtn}\n      </div>`;\n      })\n      .join('\\n');\n\n    return `<dl class=\"grid grid-cols-2 gap-4 ${className}\">${itemsHtml}</dl>${hasCopyable ? copyScript : ''}`;\n  }\n\n  // Stacked layout (default)\n  const itemsHtml = items\n    .map((item) => {\n      const copyBtn = item.copyable\n        ? `<button type=\"button\" onclick=\"copyToClipboard('${escapeHtml(\n            item.description,\n          )}', this)\" class=\"ml-2 p-1 rounded hover:bg-gray-100 transition-colors\">\n          <svg class=\"w-4 h-4 text-text-secondary\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n            <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z\"/>\n          </svg>\n        </button>`\n        : '';\n\n      return `<div class=\"${dividers ? 'py-3 border-b border-divider last:border-0' : 'py-2'}\">\n      <dt class=\"text-sm text-text-secondary\">${escapeHtml(item.term)}</dt>\n      <dd class=\"mt-1 text-sm text-text-primary font-medium flex items-center\">\n        ${escapeHtml(item.description)}\n        ${copyBtn}\n      </dd>\n    </div>`;\n    })\n    .join('\\n');\n\n  return `<dl class=\"${className}\">${itemsHtml}</dl>${hasCopyable ? copyScript : ''}`;\n}\n\n// ============================================\n// Action List\n// ============================================\n\n/**\n * Action list item\n */\nexport interface ActionItem {\n  /** Item label */\n  label: string;\n  /** Item description */\n  description?: string;\n  /** Icon HTML */\n  icon?: string;\n  /** Click URL */\n  href?: string;\n  /** HTMX attributes */\n  htmx?: {\n    get?: string;\n    post?: string;\n    target?: string;\n    swap?: string;\n  };\n  /** Destructive action */\n  destructive?: boolean;\n  /** Disabled state */\n  disabled?: boolean;\n}\n\n/**\n * Build an action list (menu-like)\n */\nexport function actionList(items: ActionItem[], className = ''): string {\n  const itemsHtml = items\n    .map((item) => {\n      const baseClasses = [\n        'flex items-center gap-3 px-4 py-3 transition-colors',\n        item.disabled\n          ? 'opacity-50 cursor-not-allowed'\n          : item.destructive\n          ? 'hover:bg-danger/5 text-danger cursor-pointer'\n          : 'hover:bg-gray-50 cursor-pointer',\n      ].join(' ');\n\n      const iconHtml = item.icon\n        ? `<span class=\"flex-shrink-0 ${item.destructive ? 'text-danger' : 'text-text-secondary'}\">${item.icon}</span>`\n        : '';\n\n      const contentHtml = `\n      ${iconHtml}\n      <div class=\"flex-1 min-w-0\">\n        <div class=\"font-medium ${item.destructive ? 'text-danger' : 'text-text-primary'}\">${escapeHtml(\n        item.label,\n      )}</div>\n        ${item.description ? `<p class=\"text-sm text-text-secondary\">${escapeHtml(item.description)}</p>` : ''}\n      </div>\n      <svg class=\"w-5 h-5 text-text-secondary\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n        <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M9 5l7 7-7 7\"/>\n      </svg>\n    `;\n\n      if (item.disabled) {\n        return `<div class=\"${baseClasses}\">${contentHtml}</div>`;\n      }\n\n      const htmxAttrs: string[] = [];\n      if (item.htmx) {\n        if (item.htmx.get) htmxAttrs.push(`hx-get=\"${escapeHtml(item.htmx.get)}\"`);\n        if (item.htmx.post) htmxAttrs.push(`hx-post=\"${escapeHtml(item.htmx.post)}\"`);\n        if (item.htmx.target) htmxAttrs.push(`hx-target=\"${escapeHtml(item.htmx.target)}\"`);\n        if (item.htmx.swap) htmxAttrs.push(`hx-swap=\"${escapeHtml(item.htmx.swap)}\"`);\n      }\n\n      if (item.href) {\n        return `<a href=\"${escapeHtml(item.href)}\" class=\"${baseClasses}\" ${htmxAttrs.join(' ')}>${contentHtml}</a>`;\n      }\n\n      return `<div class=\"${baseClasses}\" ${htmxAttrs.join(' ')}>${contentHtml}</div>`;\n    })\n    .join('\\n');\n\n  return `<div class=\"divide-y divide-divider ${className}\">${itemsHtml}</div>`;\n}\n"]}

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

@@ -1,134 +0,0 @@
-/**
- * @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
- */
-import { z } from 'zod';
-/**
- * Permission/Scope item schema for OAuth consent
- */
-export declare const PermissionItemSchema: z.ZodObject<{
-    scope: z.ZodString;
-    name: z.ZodString;
-    description: z.ZodOptional<z.ZodString>;
-    icon: z.ZodOptional<z.ZodString>;
-    required: z.ZodOptional<z.ZodBoolean>;
-    checked: z.ZodOptional<z.ZodBoolean>;
-    sensitive: z.ZodOptional<z.ZodBoolean>;
-}, z.core.$strict>;
-/**
- * Permission item type
- */
-export type PermissionItem = z.infer<typeof PermissionItemSchema>;
-/**
- * Permission list options schema
- */
-export declare const PermissionListOptionsSchema: z.ZodObject<{
-    id: z.ZodOptional<z.ZodString>;
-    checkable: z.ZodOptional<z.ZodBoolean>;
-    inputName: z.ZodOptional<z.ZodString>;
-    title: z.ZodOptional<z.ZodString>;
-    className: z.ZodOptional<z.ZodString>;
-}, z.core.$strict>;
-/**
- * Permission list options type
- */
-export type PermissionListOptions = z.infer<typeof PermissionListOptionsSchema>;
-/**
- * Feature list item schema
- */
-export declare const FeatureItemSchema: z.ZodObject<{
-    name: z.ZodString;
-    description: z.ZodOptional<z.ZodString>;
-    icon: z.ZodOptional<z.ZodString>;
-    included: z.ZodOptional<z.ZodBoolean>;
-}, z.core.$strict>;
-/**
- * Feature item type
- */
-export type FeatureItem = z.infer<typeof FeatureItemSchema>;
-/**
- * Feature list options schema
- */
-export declare const FeatureListOptionsSchema: z.ZodObject<{
-    title: z.ZodOptional<z.ZodString>;
-    showStatus: z.ZodOptional<z.ZodBoolean>;
-    className: z.ZodOptional<z.ZodString>;
-}, z.core.$strict>;
-/**
- * Feature list options type
- */
-export type FeatureListOptions = z.infer<typeof FeatureListOptionsSchema>;
-/**
- * Description list item schema
- */
-export declare const DescriptionItemSchema: z.ZodObject<{
-    term: z.ZodString;
-    description: z.ZodString;
-    copyable: z.ZodOptional<z.ZodBoolean>;
-}, z.core.$strict>;
-/**
- * Description item type
- */
-export type DescriptionItem = z.infer<typeof DescriptionItemSchema>;
-/**
- * Description list options schema
- */
-export declare const DescriptionListOptionsSchema: z.ZodObject<{
-    direction: z.ZodOptional<z.ZodEnum<{
-        horizontal: "horizontal";
-        vertical: "vertical";
-    }>>;
-    striped: z.ZodOptional<z.ZodBoolean>;
-    className: z.ZodOptional<z.ZodString>;
-}, z.core.$strict>;
-/**
- * Description list options type
- */
-export type DescriptionListOptions = z.infer<typeof DescriptionListOptionsSchema>;
-/**
- * Action list item schema
- */
-export declare const ActionItemSchema: z.ZodObject<{
-    label: z.ZodString;
-    description: z.ZodOptional<z.ZodString>;
-    icon: z.ZodOptional<z.ZodString>;
-    href: z.ZodOptional<z.ZodString>;
-    htmx: z.ZodOptional<z.ZodObject<{
-        get: z.ZodOptional<z.ZodString>;
-        post: z.ZodOptional<z.ZodString>;
-        target: z.ZodOptional<z.ZodString>;
-        swap: z.ZodOptional<z.ZodString>;
-    }, z.core.$strict>>;
-    destructive: z.ZodOptional<z.ZodBoolean>;
-    disabled: z.ZodOptional<z.ZodBoolean>;
-}, z.core.$strict>;
-/**
- * Action item type
- */
-export type ActionItem = z.infer<typeof ActionItemSchema>;
-/**
- * Action list options schema
- */
-export declare const ActionListOptionsSchema: z.ZodObject<{
-    divided: z.ZodOptional<z.ZodBoolean>;
-    className: z.ZodOptional<z.ZodString>;
-}, z.core.$strict>;
-/**
- * Action list options type
- */
-export type ActionListOptions = z.infer<typeof ActionListOptionsSchema>;