@frontmcp/ui 0.5.0

package/src/widgets/progress.js

@@ -0,0 +1,303 @@
+"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

@@ -0,0 +1 @@
+{"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

@@ -0,0 +1,162 @@
+/**
+ * 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;