@frontmcp/ui 0.5.0 → 0.6.0

package/src/widgets/progress.js

@@ -1,303 +0,0 @@
-"use strict";
-/**
- * Progress and Status Widgets
- *
- * Components for displaying progress, loading states, and status information.
- */
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.progressBar = progressBar;
-exports.stepProgress = stepProgress;
-exports.circularProgress = circularProgress;
-exports.statusIndicator = statusIndicator;
-exports.skeleton = skeleton;
-exports.contentSkeleton = contentSkeleton;
-const base_1 = require("../layouts/base");
-/**
- * Build a progress bar
- */
-function progressBar(options) {
-    const { value, showLabel = true, labelPosition = 'outside', size = 'md', variant = 'primary', animated = false, className = '', label, } = options;
-    const clampedValue = Math.min(100, Math.max(0, value));
-    const sizeClasses = {
-        sm: 'h-1.5',
-        md: 'h-2.5',
-        lg: 'h-4',
-    };
-    const variantClasses = {
-        primary: 'bg-primary',
-        success: 'bg-success',
-        warning: 'bg-warning',
-        danger: 'bg-danger',
-        info: 'bg-blue-500',
-    };
-    const animatedClass = animated ? 'bg-stripes animate-stripes' : '';
-    const displayLabel = label || `${Math.round(clampedValue)}%`;
-    const insideLabel = labelPosition === 'inside' && size === 'lg' && clampedValue > 10
-        ? `<span class="absolute inset-0 flex items-center justify-center text-xs font-medium text-white">${(0, base_1.escapeHtml)(displayLabel)}</span>`
-        : '';
-    const outsideLabel = showLabel && labelPosition === 'outside'
-        ? `<div class="flex justify-between mb-1">
-        <span class="text-sm font-medium text-text-primary">${label ? (0, base_1.escapeHtml)(label) : 'Progress'}</span>
-        <span class="text-sm text-text-secondary">${Math.round(clampedValue)}%</span>
-      </div>`
-        : '';
-    return `<div class="progress-bar ${className}">
-    ${outsideLabel}
-    <div class="relative w-full ${sizeClasses[size]} bg-gray-200 rounded-full overflow-hidden">
-      <div
-        class="${variantClasses[variant]} ${sizeClasses[size]} ${animatedClass} rounded-full transition-all duration-300"
-        style="width: ${clampedValue}%"
-        role="progressbar"
-        aria-valuenow="${clampedValue}"
-        aria-valuemin="0"
-        aria-valuemax="100"
-      ></div>
-      ${insideLabel}
-    </div>
-  </div>
-  ${animated
-        ? `<style>
-    .bg-stripes {
-      background-image: linear-gradient(
-        45deg,
-        rgba(255,255,255,0.15) 25%,
-        transparent 25%,
-        transparent 50%,
-        rgba(255,255,255,0.15) 50%,
-        rgba(255,255,255,0.15) 75%,
-        transparent 75%,
-        transparent
-      );
-      background-size: 1rem 1rem;
-    }
-    @keyframes stripes {
-      from { background-position: 1rem 0; }
-      to { background-position: 0 0; }
-    }
-    .animate-stripes {
-      animation: stripes 1s linear infinite;
-    }
-  </style>`
-        : ''}`;
-}
-/**
- * Build a multi-step progress indicator
- */
-function stepProgress(options) {
-    const { steps, orientation = 'horizontal', connector = 'line', className = '' } = options;
-    const getStepIcon = (step, index) => {
-        if (step.icon)
-            return step.icon;
-        if (step.status === 'completed') {
-            return `<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="M5 13l4 4L19 7"/>
-      </svg>`;
-        }
-        return `<span class="font-medium">${index + 1}</span>`;
-    };
-    const getStepClasses = (status) => {
-        switch (status) {
-            case 'completed':
-                return {
-                    circle: 'bg-success text-white',
-                    text: 'text-text-primary',
-                };
-            case 'current':
-                return {
-                    circle: 'bg-primary text-white ring-4 ring-primary/20',
-                    text: 'text-primary font-medium',
-                };
-            case 'upcoming':
-            default:
-                return {
-                    circle: 'bg-gray-200 text-gray-500',
-                    text: 'text-text-secondary',
-                };
-        }
-    };
-    if (orientation === 'vertical') {
-        const stepsHtml = steps
-            .map((step, index) => {
-            const classes = getStepClasses(step.status);
-            const isLast = index === steps.length - 1;
-            const connectorHtml = !isLast && connector !== 'none'
-                ? `<div class="ml-5 w-0.5 h-8 ${connector === 'dashed' ? 'border-l-2 border-dashed border-gray-300' : 'bg-gray-200'} ${step.status === 'completed' ? 'bg-success' : ''}"></div>`
-                : '';
-            const stepContent = `
-        <div class="flex items-start gap-4">
-          <div class="w-10 h-10 rounded-full ${classes.circle} flex items-center justify-center flex-shrink-0">
-            ${getStepIcon(step, index)}
-          </div>
-          <div class="pt-2">
-            <div class="${classes.text}">${(0, base_1.escapeHtml)(step.label)}</div>
-            ${step.description
-                ? `<p class="text-sm text-text-secondary mt-0.5">${(0, base_1.escapeHtml)(step.description)}</p>`
-                : ''}
-          </div>
-        </div>
-        ${connectorHtml}
-      `;
-            return step.href && step.status === 'completed'
-                ? `<a href="${(0, base_1.escapeHtml)(step.href)}" class="block hover:opacity-80">${stepContent}</a>`
-                : `<div>${stepContent}</div>`;
-        })
-            .join('\n');
-        return `<div class="step-progress ${className}">${stepsHtml}</div>`;
-    }
-    // Horizontal orientation
-    const stepsHtml = steps
-        .map((step, index) => {
-        const classes = getStepClasses(step.status);
-        const isLast = index === steps.length - 1;
-        const connectorHtml = !isLast && connector !== 'none'
-            ? `<div class="flex-1 h-0.5 mx-2 ${connector === 'dashed' ? 'border-t-2 border-dashed border-gray-300' : 'bg-gray-200'} ${step.status === 'completed' ? 'bg-success' : ''}"></div>`
-            : '';
-        const stepHtml = `
-      <div class="flex flex-col items-center">
-        <div class="w-10 h-10 rounded-full ${classes.circle} flex items-center justify-center">
-          ${getStepIcon(step, index)}
-        </div>
-        <div class="mt-2 text-center">
-          <div class="${classes.text} text-sm">${(0, base_1.escapeHtml)(step.label)}</div>
-          ${step.description
-            ? `<p class="text-xs text-text-secondary mt-0.5 max-w-[120px]">${(0, base_1.escapeHtml)(step.description)}</p>`
-            : ''}
-        </div>
-      </div>
-    `;
-        const clickableStep = step.href && step.status === 'completed'
-            ? `<a href="${(0, base_1.escapeHtml)(step.href)}" class="hover:opacity-80">${stepHtml}</a>`
-            : stepHtml;
-        return `${clickableStep}${connectorHtml}`;
-    })
-        .join('\n');
-    return `<div class="step-progress flex items-start ${className}">${stepsHtml}</div>`;
-}
-/**
- * Build a circular progress indicator
- */
-function circularProgress(options) {
-    const { value, size = 80, strokeWidth = 8, variant = 'primary', showLabel = true, label, className = '' } = options;
-    const clampedValue = Math.min(100, Math.max(0, value));
-    const radius = (size - strokeWidth) / 2;
-    const circumference = radius * 2 * Math.PI;
-    const offset = circumference - (clampedValue / 100) * circumference;
-    const variantColors = {
-        primary: 'text-primary',
-        success: 'text-success',
-        warning: 'text-warning',
-        danger: 'text-danger',
-    };
-    const displayLabel = label || `${Math.round(clampedValue)}%`;
-    return `<div class="circular-progress inline-flex items-center justify-center ${className}" style="width: ${size}px; height: ${size}px;">
-    <svg class="transform -rotate-90" width="${size}" height="${size}">
-      <!-- Background circle -->
-      <circle
-        cx="${size / 2}"
-        cy="${size / 2}"
-        r="${radius}"
-        fill="none"
-        stroke="currentColor"
-        stroke-width="${strokeWidth}"
-        class="text-gray-200"
-      />
-      <!-- Progress circle -->
-      <circle
-        cx="${size / 2}"
-        cy="${size / 2}"
-        r="${radius}"
-        fill="none"
-        stroke="currentColor"
-        stroke-width="${strokeWidth}"
-        stroke-linecap="round"
-        class="${variantColors[variant]}"
-        style="stroke-dasharray: ${circumference}; stroke-dashoffset: ${offset}; transition: stroke-dashoffset 0.3s ease;"
-      />
-    </svg>
-    ${showLabel
-        ? `<span class="absolute text-sm font-semibold text-text-primary">${(0, base_1.escapeHtml)(displayLabel)}</span>`
-        : ''}
-  </div>`;
-}
-/**
- * Build a status indicator
- */
-function statusIndicator(options) {
-    const { status, label, size = 'md', pulse = false, className = '' } = options;
-    const sizeClasses = {
-        sm: { dot: 'w-2 h-2', text: 'text-xs' },
-        md: { dot: 'w-2.5 h-2.5', text: 'text-sm' },
-        lg: { dot: 'w-3 h-3', text: 'text-base' },
-    };
-    const statusClasses = {
-        online: { color: 'bg-success', label: 'Online' },
-        offline: { color: 'bg-gray-400', label: 'Offline' },
-        busy: { color: 'bg-danger', label: 'Busy' },
-        away: { color: 'bg-warning', label: 'Away' },
-        loading: { color: 'bg-blue-500', label: 'Loading' },
-        error: { color: 'bg-danger', label: 'Error' },
-        success: { color: 'bg-success', label: 'Success' },
-    };
-    const statusInfo = statusClasses[status];
-    const sizeInfo = sizeClasses[size];
-    const displayLabel = label || statusInfo.label;
-    const pulseHtml = pulse || status === 'loading'
-        ? `<span class="absolute ${sizeInfo.dot} ${statusInfo.color} rounded-full animate-ping opacity-75"></span>`
-        : '';
-    return `<div class="status-indicator inline-flex items-center gap-2 ${className}">
-    <span class="relative flex">
-      ${pulseHtml}
-      <span class="relative ${sizeInfo.dot} ${statusInfo.color} rounded-full"></span>
-    </span>
-    ${displayLabel ? `<span class="${sizeInfo.text} text-text-secondary">${(0, base_1.escapeHtml)(displayLabel)}</span>` : ''}
-  </div>`;
-}
-/**
- * Build a skeleton loader
- */
-function skeleton(options = {}) {
-    const { type = 'text', width, height, lines = 3, animated = true, className = '' } = options;
-    const animateClass = animated ? 'animate-pulse' : '';
-    const baseClass = `bg-gray-200 ${animateClass}`;
-    switch (type) {
-        case 'circle':
-            return `<div class="${baseClass} rounded-full ${className}" style="width: ${width || '40px'}; height: ${height || '40px'}"></div>`;
-        case 'rect':
-            return `<div class="${baseClass} rounded ${className}" style="width: ${width || '100%'}; height: ${height || '100px'}"></div>`;
-        case 'card':
-            return `<div class="${animateClass} space-y-4 ${className}">
-        <div class="bg-gray-200 rounded h-40"></div>
-        <div class="space-y-2">
-          <div class="bg-gray-200 h-4 rounded w-3/4"></div>
-          <div class="bg-gray-200 h-4 rounded w-1/2"></div>
-        </div>
-      </div>`;
-        case 'text':
-        default:
-            const linesHtml = Array(lines)
-                .fill(0)
-                .map((_, i) => {
-                const lineWidth = i === lines - 1 ? '60%' : i === 0 ? '90%' : '80%';
-                return `<div class="bg-gray-200 h-4 rounded" style="width: ${lineWidth}"></div>`;
-            })
-                .join('\n');
-            return `<div class="${animateClass} space-y-2 ${className}" style="width: ${width || '100%'}">
-        ${linesHtml}
-      </div>`;
-    }
-}
-/**
- * Build a content skeleton with avatar and text
- */
-function contentSkeleton(options = {}) {
-    const { animated = true, className = '' } = options;
-    const animateClass = animated ? 'animate-pulse' : '';
-    return `<div class="${animateClass} flex gap-4 ${className}">
-    <div class="bg-gray-200 rounded-full w-12 h-12 flex-shrink-0"></div>
-    <div class="flex-1 space-y-2 py-1">
-      <div class="bg-gray-200 h-4 rounded w-3/4"></div>
-      <div class="bg-gray-200 h-4 rounded w-1/2"></div>
-    </div>
-  </div>`;
-}
-//# sourceMappingURL=progress.js.map

package/src/widgets/progress.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"progress.js","sourceRoot":"","sources":["../../../src/widgets/progress.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * Progress and Status Widgets\n *\n * Components for displaying progress, loading states, and status information.\n */\n\nimport { escapeHtml } from '../layouts/base';\n\n// ============================================\n// Progress Bar\n// ============================================\n\n/**\n * Progress bar options\n */\nexport interface ProgressBarOptions {\n  /** Progress value (0-100) */\n  value: number;\n  /** Show percentage text */\n  showLabel?: boolean;\n  /** Label position */\n  labelPosition?: 'inside' | 'outside' | 'none';\n  /** Size */\n  size?: 'sm' | 'md' | 'lg';\n  /** Color variant */\n  variant?: 'primary' | 'success' | 'warning' | 'danger' | 'info';\n  /** Animated (striped) */\n  animated?: boolean;\n  /** Additional CSS classes */\n  className?: string;\n  /** Custom label */\n  label?: string;\n}\n\n/**\n * Build a progress bar\n */\nexport function progressBar(options: ProgressBarOptions): string {\n  const {\n    value,\n    showLabel = true,\n    labelPosition = 'outside',\n    size = 'md',\n    variant = 'primary',\n    animated = false,\n    className = '',\n    label,\n  } = options;\n\n  const clampedValue = Math.min(100, Math.max(0, value));\n\n  const sizeClasses: Record<string, string> = {\n    sm: 'h-1.5',\n    md: 'h-2.5',\n    lg: 'h-4',\n  };\n\n  const variantClasses: Record<string, string> = {\n    primary: 'bg-primary',\n    success: 'bg-success',\n    warning: 'bg-warning',\n    danger: 'bg-danger',\n    info: 'bg-blue-500',\n  };\n\n  const animatedClass = animated ? 'bg-stripes animate-stripes' : '';\n\n  const displayLabel = label || `${Math.round(clampedValue)}%`;\n\n  const insideLabel =\n    labelPosition === 'inside' && size === 'lg' && clampedValue > 10\n      ? `<span class=\"absolute inset-0 flex items-center justify-center text-xs font-medium text-white\">${escapeHtml(\n          displayLabel,\n        )}</span>`\n      : '';\n\n  const outsideLabel =\n    showLabel && labelPosition === 'outside'\n      ? `<div class=\"flex justify-between mb-1\">\n        <span class=\"text-sm font-medium text-text-primary\">${label ? escapeHtml(label) : 'Progress'}</span>\n        <span class=\"text-sm text-text-secondary\">${Math.round(clampedValue)}%</span>\n      </div>`\n      : '';\n\n  return `<div class=\"progress-bar ${className}\">\n    ${outsideLabel}\n    <div class=\"relative w-full ${sizeClasses[size]} bg-gray-200 rounded-full overflow-hidden\">\n      <div\n        class=\"${variantClasses[variant]} ${\n    sizeClasses[size]\n  } ${animatedClass} rounded-full transition-all duration-300\"\n        style=\"width: ${clampedValue}%\"\n        role=\"progressbar\"\n        aria-valuenow=\"${clampedValue}\"\n        aria-valuemin=\"0\"\n        aria-valuemax=\"100\"\n      ></div>\n      ${insideLabel}\n    </div>\n  </div>\n  ${\n    animated\n      ? `<style>\n    .bg-stripes {\n      background-image: linear-gradient(\n        45deg,\n        rgba(255,255,255,0.15) 25%,\n        transparent 25%,\n        transparent 50%,\n        rgba(255,255,255,0.15) 50%,\n        rgba(255,255,255,0.15) 75%,\n        transparent 75%,\n        transparent\n      );\n      background-size: 1rem 1rem;\n    }\n    @keyframes stripes {\n      from { background-position: 1rem 0; }\n      to { background-position: 0 0; }\n    }\n    .animate-stripes {\n      animation: stripes 1s linear infinite;\n    }\n  </style>`\n      : ''\n  }`;\n}\n\n// ============================================\n// Multi-Step Progress\n// ============================================\n\n/**\n * Step definition\n */\nexport interface Step {\n  /** Step label */\n  label: string;\n  /** Step description */\n  description?: string;\n  /** Step status */\n  status: 'completed' | 'current' | 'upcoming';\n  /** Icon (optional) */\n  icon?: string;\n  /** URL for clickable steps */\n  href?: string;\n}\n\n/**\n * Multi-step progress options\n */\nexport interface StepProgressOptions {\n  /** Steps */\n  steps: Step[];\n  /** Orientation */\n  orientation?: 'horizontal' | 'vertical';\n  /** Connector style */\n  connector?: 'line' | 'dashed' | 'none';\n  /** Additional CSS classes */\n  className?: string;\n}\n\n/**\n * Build a multi-step progress indicator\n */\nexport function stepProgress(options: StepProgressOptions): string {\n  const { steps, orientation = 'horizontal', connector = 'line', className = '' } = options;\n\n  const getStepIcon = (step: Step, index: number): string => {\n    if (step.icon) return step.icon;\n\n    if (step.status === 'completed') {\n      return `<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=\"M5 13l4 4L19 7\"/>\n      </svg>`;\n    }\n\n    return `<span class=\"font-medium\">${index + 1}</span>`;\n  };\n\n  const getStepClasses = (status: Step['status']): { circle: string; text: string } => {\n    switch (status) {\n      case 'completed':\n        return {\n          circle: 'bg-success text-white',\n          text: 'text-text-primary',\n        };\n      case 'current':\n        return {\n          circle: 'bg-primary text-white ring-4 ring-primary/20',\n          text: 'text-primary font-medium',\n        };\n      case 'upcoming':\n      default:\n        return {\n          circle: 'bg-gray-200 text-gray-500',\n          text: 'text-text-secondary',\n        };\n    }\n  };\n\n  if (orientation === 'vertical') {\n    const stepsHtml = steps\n      .map((step, index) => {\n        const classes = getStepClasses(step.status);\n        const isLast = index === steps.length - 1;\n\n        const connectorHtml =\n          !isLast && connector !== 'none'\n            ? `<div class=\"ml-5 w-0.5 h-8 ${\n                connector === 'dashed' ? 'border-l-2 border-dashed border-gray-300' : 'bg-gray-200'\n              } ${step.status === 'completed' ? 'bg-success' : ''}\"></div>`\n            : '';\n\n        const stepContent = `\n        <div class=\"flex items-start gap-4\">\n          <div class=\"w-10 h-10 rounded-full ${classes.circle} flex items-center justify-center flex-shrink-0\">\n            ${getStepIcon(step, index)}\n          </div>\n          <div class=\"pt-2\">\n            <div class=\"${classes.text}\">${escapeHtml(step.label)}</div>\n            ${\n              step.description\n                ? `<p class=\"text-sm text-text-secondary mt-0.5\">${escapeHtml(step.description)}</p>`\n                : ''\n            }\n          </div>\n        </div>\n        ${connectorHtml}\n      `;\n\n        return step.href && step.status === 'completed'\n          ? `<a href=\"${escapeHtml(step.href)}\" class=\"block hover:opacity-80\">${stepContent}</a>`\n          : `<div>${stepContent}</div>`;\n      })\n      .join('\\n');\n\n    return `<div class=\"step-progress ${className}\">${stepsHtml}</div>`;\n  }\n\n  // Horizontal orientation\n  const stepsHtml = steps\n    .map((step, index) => {\n      const classes = getStepClasses(step.status);\n      const isLast = index === steps.length - 1;\n\n      const connectorHtml =\n        !isLast && connector !== 'none'\n          ? `<div class=\"flex-1 h-0.5 mx-2 ${\n              connector === 'dashed' ? 'border-t-2 border-dashed border-gray-300' : 'bg-gray-200'\n            } ${step.status === 'completed' ? 'bg-success' : ''}\"></div>`\n          : '';\n\n      const stepHtml = `\n      <div class=\"flex flex-col items-center\">\n        <div class=\"w-10 h-10 rounded-full ${classes.circle} flex items-center justify-center\">\n          ${getStepIcon(step, index)}\n        </div>\n        <div class=\"mt-2 text-center\">\n          <div class=\"${classes.text} text-sm\">${escapeHtml(step.label)}</div>\n          ${\n            step.description\n              ? `<p class=\"text-xs text-text-secondary mt-0.5 max-w-[120px]\">${escapeHtml(step.description)}</p>`\n              : ''\n          }\n        </div>\n      </div>\n    `;\n\n      const clickableStep =\n        step.href && step.status === 'completed'\n          ? `<a href=\"${escapeHtml(step.href)}\" class=\"hover:opacity-80\">${stepHtml}</a>`\n          : stepHtml;\n\n      return `${clickableStep}${connectorHtml}`;\n    })\n    .join('\\n');\n\n  return `<div class=\"step-progress flex items-start ${className}\">${stepsHtml}</div>`;\n}\n\n// ============================================\n// Circular Progress\n// ============================================\n\n/**\n * Circular progress options\n */\nexport interface CircularProgressOptions {\n  /** Progress value (0-100) */\n  value: number;\n  /** Size in pixels */\n  size?: number;\n  /** Stroke width */\n  strokeWidth?: number;\n  /** Color variant */\n  variant?: 'primary' | 'success' | 'warning' | 'danger';\n  /** Show percentage */\n  showLabel?: boolean;\n  /** Custom label */\n  label?: string;\n  /** Additional CSS classes */\n  className?: string;\n}\n\n/**\n * Build a circular progress indicator\n */\nexport function circularProgress(options: CircularProgressOptions): string {\n  const { value, size = 80, strokeWidth = 8, variant = 'primary', showLabel = true, label, className = '' } = options;\n\n  const clampedValue = Math.min(100, Math.max(0, value));\n  const radius = (size - strokeWidth) / 2;\n  const circumference = radius * 2 * Math.PI;\n  const offset = circumference - (clampedValue / 100) * circumference;\n\n  const variantColors: Record<string, string> = {\n    primary: 'text-primary',\n    success: 'text-success',\n    warning: 'text-warning',\n    danger: 'text-danger',\n  };\n\n  const displayLabel = label || `${Math.round(clampedValue)}%`;\n\n  return `<div class=\"circular-progress inline-flex items-center justify-center ${className}\" style=\"width: ${size}px; height: ${size}px;\">\n    <svg class=\"transform -rotate-90\" width=\"${size}\" height=\"${size}\">\n      <!-- Background circle -->\n      <circle\n        cx=\"${size / 2}\"\n        cy=\"${size / 2}\"\n        r=\"${radius}\"\n        fill=\"none\"\n        stroke=\"currentColor\"\n        stroke-width=\"${strokeWidth}\"\n        class=\"text-gray-200\"\n      />\n      <!-- Progress circle -->\n      <circle\n        cx=\"${size / 2}\"\n        cy=\"${size / 2}\"\n        r=\"${radius}\"\n        fill=\"none\"\n        stroke=\"currentColor\"\n        stroke-width=\"${strokeWidth}\"\n        stroke-linecap=\"round\"\n        class=\"${variantColors[variant]}\"\n        style=\"stroke-dasharray: ${circumference}; stroke-dashoffset: ${offset}; transition: stroke-dashoffset 0.3s ease;\"\n      />\n    </svg>\n    ${\n      showLabel\n        ? `<span class=\"absolute text-sm font-semibold text-text-primary\">${escapeHtml(displayLabel)}</span>`\n        : ''\n    }\n  </div>`;\n}\n\n// ============================================\n// Status Indicator\n// ============================================\n\n/**\n * Status indicator options\n */\nexport interface StatusIndicatorOptions {\n  /** Status state */\n  status: 'online' | 'offline' | 'busy' | 'away' | 'loading' | 'error' | 'success';\n  /** Status label */\n  label?: string;\n  /** Size */\n  size?: 'sm' | 'md' | 'lg';\n  /** Show pulse animation */\n  pulse?: boolean;\n  /** Additional CSS classes */\n  className?: string;\n}\n\n/**\n * Build a status indicator\n */\nexport function statusIndicator(options: StatusIndicatorOptions): string {\n  const { status, label, size = 'md', pulse = false, className = '' } = options;\n\n  const sizeClasses: Record<string, { dot: string; text: string }> = {\n    sm: { dot: 'w-2 h-2', text: 'text-xs' },\n    md: { dot: 'w-2.5 h-2.5', text: 'text-sm' },\n    lg: { dot: 'w-3 h-3', text: 'text-base' },\n  };\n\n  const statusClasses: Record<string, { color: string; label: string }> = {\n    online: { color: 'bg-success', label: 'Online' },\n    offline: { color: 'bg-gray-400', label: 'Offline' },\n    busy: { color: 'bg-danger', label: 'Busy' },\n    away: { color: 'bg-warning', label: 'Away' },\n    loading: { color: 'bg-blue-500', label: 'Loading' },\n    error: { color: 'bg-danger', label: 'Error' },\n    success: { color: 'bg-success', label: 'Success' },\n  };\n\n  const statusInfo = statusClasses[status];\n  const sizeInfo = sizeClasses[size];\n  const displayLabel = label || statusInfo.label;\n\n  const pulseHtml =\n    pulse || status === 'loading'\n      ? `<span class=\"absolute ${sizeInfo.dot} ${statusInfo.color} rounded-full animate-ping opacity-75\"></span>`\n      : '';\n\n  return `<div class=\"status-indicator inline-flex items-center gap-2 ${className}\">\n    <span class=\"relative flex\">\n      ${pulseHtml}\n      <span class=\"relative ${sizeInfo.dot} ${statusInfo.color} rounded-full\"></span>\n    </span>\n    ${displayLabel ? `<span class=\"${sizeInfo.text} text-text-secondary\">${escapeHtml(displayLabel)}</span>` : ''}\n  </div>`;\n}\n\n// ============================================\n// Skeleton Loader\n// ============================================\n\n/**\n * Skeleton loader options\n */\nexport interface SkeletonOptions {\n  /** Skeleton type */\n  type?: 'text' | 'circle' | 'rect' | 'card';\n  /** Width (CSS value) */\n  width?: string;\n  /** Height (CSS value) */\n  height?: string;\n  /** Number of text lines */\n  lines?: number;\n  /** Animated */\n  animated?: boolean;\n  /** Additional CSS classes */\n  className?: string;\n}\n\n/**\n * Build a skeleton loader\n */\nexport function skeleton(options: SkeletonOptions = {}): string {\n  const { type = 'text', width, height, lines = 3, animated = true, className = '' } = options;\n\n  const animateClass = animated ? 'animate-pulse' : '';\n  const baseClass = `bg-gray-200 ${animateClass}`;\n\n  switch (type) {\n    case 'circle':\n      return `<div class=\"${baseClass} rounded-full ${className}\" style=\"width: ${width || '40px'}; height: ${\n        height || '40px'\n      }\"></div>`;\n\n    case 'rect':\n      return `<div class=\"${baseClass} rounded ${className}\" style=\"width: ${width || '100%'}; height: ${\n        height || '100px'\n      }\"></div>`;\n\n    case 'card':\n      return `<div class=\"${animateClass} space-y-4 ${className}\">\n        <div class=\"bg-gray-200 rounded h-40\"></div>\n        <div class=\"space-y-2\">\n          <div class=\"bg-gray-200 h-4 rounded w-3/4\"></div>\n          <div class=\"bg-gray-200 h-4 rounded w-1/2\"></div>\n        </div>\n      </div>`;\n\n    case 'text':\n    default:\n      const linesHtml = Array(lines)\n        .fill(0)\n        .map((_, i) => {\n          const lineWidth = i === lines - 1 ? '60%' : i === 0 ? '90%' : '80%';\n          return `<div class=\"bg-gray-200 h-4 rounded\" style=\"width: ${lineWidth}\"></div>`;\n        })\n        .join('\\n');\n\n      return `<div class=\"${animateClass} space-y-2 ${className}\" style=\"width: ${width || '100%'}\">\n        ${linesHtml}\n      </div>`;\n  }\n}\n\n/**\n * Build a content skeleton with avatar and text\n */\nexport function contentSkeleton(options: { animated?: boolean; className?: string } = {}): string {\n  const { animated = true, className = '' } = options;\n  const animateClass = animated ? 'animate-pulse' : '';\n\n  return `<div class=\"${animateClass} flex gap-4 ${className}\">\n    <div class=\"bg-gray-200 rounded-full w-12 h-12 flex-shrink-0\"></div>\n    <div class=\"flex-1 space-y-2 py-1\">\n      <div class=\"bg-gray-200 h-4 rounded w-3/4\"></div>\n      <div class=\"bg-gray-200 h-4 rounded w-1/2\"></div>\n    </div>\n  </div>`;\n}\n"]}

package/src/widgets/resource.d.ts

@@ -1,162 +0,0 @@
-/**
- * OpenAI App SDK Resource Widgets
- *
- * Components for displaying resources in OpenAI's App SDK format.
- * These widgets are designed to work with OpenAI Canvas and similar interfaces.
- */
-import { type CardOptions } from '../components/card';
-import { type BadgeVariant } from '../components/badge';
-/**
- * Resource type identifiers
- */
-export type ResourceType = 'document' | 'image' | 'code' | 'data' | 'file' | 'link' | 'user' | 'event' | 'message' | 'task' | 'custom';
-/**
- * Resource metadata
- */
-export interface ResourceMeta {
-    /** Creation timestamp */
-    createdAt?: string | Date;
-    /** Last modified timestamp */
-    updatedAt?: string | Date;
-    /** Author/creator */
-    author?: string;
-    /** File size (bytes) */
-    size?: number;
-    /** MIME type */
-    mimeType?: string;
-    /** Tags */
-    tags?: string[];
-    /** Custom metadata */
-    [key: string]: unknown;
-}
-/**
- * Resource action
- */
-export interface ResourceAction {
-    /** Action label */
-    label: string;
-    /** Action icon */
-    icon?: string;
-    /** Action URL */
-    href?: string;
-    /** HTMX attributes */
-    htmx?: {
-        get?: string;
-        post?: string;
-        delete?: string;
-        target?: string;
-        swap?: string;
-        confirm?: string;
-    };
-    /** Variant */
-    variant?: 'primary' | 'secondary' | 'danger' | 'ghost';
-    /** Disabled */
-    disabled?: boolean;
-}
-/**
- * Base resource options
- */
-export interface ResourceOptions {
-    /** Resource type */
-    type: ResourceType;
-    /** Resource title */
-    title: string;
-    /** Resource description */
-    description?: string;
-    /** Resource icon */
-    icon?: string;
-    /** Resource thumbnail URL */
-    thumbnail?: string;
-    /** Resource URL */
-    url?: string;
-    /** Resource metadata */
-    meta?: ResourceMeta;
-    /** Resource status */
-    status?: {
-        label: string;
-        variant: BadgeVariant;
-    };
-    /** Available actions */
-    actions?: ResourceAction[];
-    /** Additional CSS classes */
-    className?: string;
-    /** Card options */
-    cardOptions?: Partial<CardOptions>;
-}
-/**
- * Build a resource widget
- */
-export declare function resourceWidget(options: ResourceOptions): string;
-/**
- * Resource list options
- */
-export interface ResourceListOptions {
-    /** Resources to display */
-    resources: ResourceOptions[];
-    /** List title */
-    title?: string;
-    /** Empty state message */
-    emptyMessage?: string;
-    /** Grid or list layout */
-    layout?: 'list' | 'grid';
-    /** Grid columns */
-    columns?: 1 | 2 | 3 | 4;
-    /** Additional CSS classes */
-    className?: string;
-    /** Show load more button */
-    showLoadMore?: boolean;
-    /** Load more URL */
-    loadMoreUrl?: string;
-}
-/**
- * Build a resource list widget
- */
-export declare function resourceList(options: ResourceListOptions): string;
-/**
- * Build a compact resource item (for inline display)
- */
-export declare function resourceItem(options: Omit<ResourceOptions, 'cardOptions'>): string;
-/**
- * Code preview options
- */
-export interface CodePreviewOptions {
-    /** Code content */
-    code: string;
-    /** Language */
-    language?: string;
-    /** Filename */
-    filename?: string;
-    /** Show line numbers */
-    lineNumbers?: boolean;
-    /** Max height */
-    maxHeight?: string;
-    /** Copy button */
-    showCopy?: boolean;
-    /** Additional CSS classes */
-    className?: string;
-}
-/**
- * Build a code preview widget
- */
-export declare function codePreview(options: CodePreviewOptions): string;
-/**
- * Image preview options
- */
-export interface ImagePreviewOptions {
-    /** Image URL */
-    src: string;
-    /** Alt text */
-    alt: string;
-    /** Caption */
-    caption?: string;
-    /** Max height */
-    maxHeight?: string;
-    /** Clickable (opens in new tab) */
-    clickable?: boolean;
-    /** Additional CSS classes */
-    className?: string;
-}
-/**
- * Build an image preview widget
- */
-export declare function imagePreview(options: ImagePreviewOptions): string;