ai-progress-controls 0.1.0

package/src/core/queue-progress/styles.ts

@@ -0,0 +1,469 @@
+export const styles = `
+  :host {
+    /* CSS variables inherit from document root with fallback defaults */
+    display: block;
+    font-family: var(--queue-font-family, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif);
+    font-size: var(--queue-font-size, 14px);
+    color: var(--queue-text, #e4e4e7);
+  }
+
+  :host([style*="cursor: wait"]) .queue-container {
+    cursor: wait;
+  }
+
+  :host([style*="cursor: not-allowed"]) .queue-container {
+    cursor: not-allowed;
+  }
+
+  :host([style*="cursor: default"]) .queue-container {
+    cursor: default;
+  }
+
+  .queue-container {
+    background: var(--queue-background, #1a1a2e);
+    border: 1px solid var(--queue-border, #27273a);
+    border-radius: var(--queue-border-radius, 12px);
+    padding: var(--queue-padding, 24px);
+    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+  }
+
+  .queue-header {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    margin-bottom: 20px;
+  }
+
+  .queue-icon {
+    font-size: 32px;
+    line-height: 1;
+    animation: pulse 2s ease-in-out infinite;
+  }
+
+  @keyframes pulse {
+    0%, 100% { opacity: 1; }
+    50% { opacity: 0.6; }
+  }
+
+  .queue-title {
+    flex: 1;
+  }
+
+  .queue-status {
+    font-size: 16px;
+    font-weight: 600;
+    color: var(--queue-text, #e4e4e7);
+    margin: 0 0 4px 0;
+  }
+
+  .queue-message {
+    font-size: 13px;
+    color: var(--queue-text-secondary, #a1a1aa);
+    margin: 0;
+  }
+
+  .queue-badge {
+    padding: 4px 12px;
+    border-radius: 12px;
+    font-size: 12px;
+    font-weight: 600;
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+  }
+
+  .queue-badge.waiting {
+    background: rgba(251, 191, 36, 0.1);
+    color: #fbbf24;
+  }
+
+  .queue-badge.processing {
+    background: rgba(102, 126, 234, 0.1);
+    color: #667eea;
+  }
+
+  .queue-badge.completed {
+    background: rgba(16, 185, 129, 0.1);
+    color: #10b981;
+  }
+
+  .queue-badge.error {
+    background: rgba(239, 68, 68, 0.1);
+    color: #ef4444;
+  }
+
+  .queue-position {
+    text-align: center;
+    margin: 24px 0;
+  }
+
+  .position-number {
+    font-size: 64px;
+    font-weight: 700;
+    color: var(--queue-primary, #667eea);
+    line-height: 1;
+    margin: 0 0 8px 0;
+    font-variant-numeric: tabular-nums;
+    transition: all var(--transition-speed) ease;
+  }
+
+  .position-label {
+    font-size: 14px;
+    color: var(--queue-text-secondary, #a1a1aa);
+    text-transform: uppercase;
+    letter-spacing: 1px;
+    font-weight: 500;
+  }
+
+  .queue-metrics {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
+    gap: 16px;
+    margin: 20px 0;
+  }
+
+  .metric {
+    background: var(--queue-metric-bg, #16162a);
+    border: 1px solid var(--queue-border, #27273a);
+    border-radius: 8px;
+    padding: 12px 16px;
+  }
+
+  .metric-value {
+    font-size: 24px;
+    font-weight: 700;
+    color: var(--queue-text, #e4e4e7);
+    margin: 0 0 4px 0;
+    font-variant-numeric: tabular-nums;
+  }
+
+  .metric-label {
+    font-size: 12px;
+    color: var(--queue-text-secondary, #a1a1aa);
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+    margin: 0;
+  }
+
+  .progress-container {
+    margin: 20px 0;
+  }
+
+  .progress-bar {
+    width: 100%;
+    height: 8px;
+    background: var(--queue-progress-bg, #27273a);
+    border-radius: 4px;
+    overflow: hidden;
+    position: relative;
+  }
+
+  .progress-fill {
+    height: 100%;
+    background: linear-gradient(90deg, #667eea 0%, #764ba2 100%);
+    border-radius: 4px;
+    transition: width var(--transition-speed) ease;
+    position: relative;
+    overflow: hidden;
+  }
+
+  .progress-fill::after {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: linear-gradient(
+      90deg,
+      transparent,
+      rgba(255, 255, 255, 0.3),
+      transparent
+    );
+    animation: shimmer 2s infinite;
+  }
+
+  @keyframes shimmer {
+    0% { transform: translateX(-100%); }
+    100% { transform: translateX(100%); }
+  }
+
+/* Override default animation when animation attribute is set */
+:host([animation]) .progress-fill::after {
+  animation: none !important;
+}
+
+  .info-icon {
+    font-size: 18px;
+  }
+
+  .info-text {
+    font-size: 13px;
+    color: var(--queue-text, #e4e4e7);
+    margin: 0;
+  }
+
+  .queue-actions {
+    display: flex;
+    gap: 12px;
+    margin-top: 20px;
+  }
+
+  .queue-button {
+    flex: 1;
+    padding: 10px 16px;
+    background: var(--queue-button-bg, #667eea);
+    color: var(--queue-button-text, #ffffff);
+    border: none;
+    border-radius: 8px;
+    font-size: 14px;
+    font-weight: 600;
+    cursor: pointer;
+    transition: all var(--transition-speed) ease;
+  }
+
+  .queue-button:hover:not(:disabled) {
+    background: var(--queue-button-hover, #5568d3);
+    transform: translateY(-1px);
+    box-shadow: 0 4px 8px rgba(102, 126, 234, 0.3);
+  }
+
+  .queue-button:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+
+  .queue-button.secondary {
+    background: var(--queue-button-secondary, #27273a);
+    color: var(--queue-text, #e4e4e7);
+  }
+
+  .queue-button.secondary:hover:not(:disabled) {
+    background: var(--queue-button-secondary-hover, #333348);
+  }
+
+  .error-message {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    padding: 12px;
+    background: rgba(239, 68, 68, 0.1);
+    border: 1px solid #ef4444;
+    border-radius: 8px;
+    color: #ef4444;
+    margin-top: 16px;
+  }
+
+  .error-icon {
+    font-size: 20px;
+  }
+
+  .error-text {
+    font-size: 13px;
+    margin: 0;
+  }
+
+  /* Animation for position change */
+  @keyframes positionChange {
+    0% { transform: scale(1); }
+    50% { transform: scale(1.1); color: var(--queue-success, #10b981); }
+    100% { transform: scale(1); }
+  }
+
+  .position-number.changing {
+    animation: positionChange 0.5s ease;
+  }
+
+  /* Visual Variants */
+
+  /* Minimal variant - clean, no shadows */
+  :host([variant="minimal"]) .queue-container {
+    box-shadow: none;
+    border: 1px solid var(--queue-border, #27273a);
+  }
+
+  :host([variant="minimal"]) .progress-bar {
+    background: transparent;
+    border: 1px solid var(--queue-border, #27273a);
+  }
+
+  /* Gradient variant - colorful gradients */
+  :host([variant="gradient"]) .progress-fill {
+    background: linear-gradient(
+      90deg,
+      #667eea,
+      #764ba2,
+      #667eea
+    );
+    background-size: 200% 100%;
+    animation: gradient-shift 3s ease-in-out infinite;
+  }
+
+  @keyframes gradient-shift {
+    0%, 100% { background-position: 0% 50%; }
+    50% { background-position: 100% 50%; }
+  }
+
+  /* Override default animation when animation attribute is set */
+  :host([animation][variant="gradient"]) .progress-fill {
+    animation: none !important;
+  }
+
+  /* Glassmorphic variant - frosted glass effect */
+  :host([variant="glassmorphic"]) .queue-container {
+    background: rgba(26, 26, 46, 0.6);
+    backdrop-filter: blur(10px);
+    -webkit-backdrop-filter: blur(10px);
+    border: 1px solid rgba(255, 255, 255, 0.1);
+    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
+  }
+
+  :host([variant="glassmorphic"]) .progress-bar {
+    background: rgba(0, 0, 0, 0.2);
+  }
+
+  :host([variant="glassmorphic"]) .progress-fill {
+    background: linear-gradient(
+      90deg,
+      rgba(102, 126, 234, 0.8),
+      rgba(118, 75, 162, 0.8)
+    );
+  }
+
+  /* Animation Effects */
+
+  /* Striped animation */
+  :host([animation="striped"]) .progress-fill {
+    background-image: 
+      linear-gradient(
+        45deg,
+        rgba(255, 255, 255, 0.2) 25%,
+        transparent 25%,
+        transparent 50%,
+        rgba(255, 255, 255, 0.2) 50%,
+        rgba(255, 255, 255, 0.2) 75%,
+        transparent 75%,
+        transparent
+      ),
+      linear-gradient(to right, #667eea, #667eea) !important;
+    background-size: 2rem 2rem, 100% 100% !important;
+    animation: progress-stripes 3s linear infinite !important;
+  }
+
+  @keyframes progress-stripes {
+    0% { background-position: 0 0, 0 0; }
+    100% { background-position: 2rem 0, 0 0; }
+  }
+
+  /* Pulse animation */
+  :host([animation="pulse"]) .progress-fill {
+    animation: progress-pulse 4s ease-in-out infinite !important;
+  }
+
+  @keyframes progress-pulse {
+    0%, 100% { opacity: 1; }
+    50% { opacity: 0.3; }
+  }
+
+  /* Glow animation */
+  :host([animation="glow"]) .progress-fill {
+    animation: progress-glow 4s ease-in-out infinite !important;
+  }
+
+  @keyframes progress-glow {
+    0%, 100% { 
+      box-shadow: 0 0 5px #667eea,
+                  0 0 10px #667eea;
+    }
+    50% { 
+      box-shadow: 0 0 20px #667eea, 
+                  0 0 35px #667eea,
+                  0 0 50px #667eea;
+    }
+  }
+
+  /* Size variants */
+  :host([size="compact"]) .queue-container {
+    padding: 8px;
+    font-size: 12px;
+  }
+
+  :host([size="compact"]) .progress-bar {
+    height: 6px;
+  }
+
+  :host([size="compact"]) .queue-status {
+    font-size: 14px;
+  }
+
+  :host([size="compact"]) .queue-message {
+    font-size: 11px;
+  }
+
+  :host([size="compact"]) .position-number {
+    font-size: 48px;
+  }
+
+  :host([size="compact"]) .metric-value {
+    font-size: 22px;
+  }
+
+  :host([size="large"]) .queue-container {
+    padding: 16px;
+    font-size: 16px;
+  }
+
+  :host([size="large"]) .progress-bar {
+    height: 10px;
+  }
+
+  :host([size="large"]) .queue-status {
+    font-size: 18px;
+  }
+
+  :host([size="large"]) .queue-message {
+    font-size: 15px;
+  }
+
+  :host([size="large"]) .position-number {
+    font-size: 72px;
+  }
+
+  :host([size="large"]) .metric-value {
+    font-size: 32px;
+  }
+
+  /* Responsive design */
+  @media (max-width: 480px) {
+    .queue-container {
+      padding: 16px;
+    }
+
+    .position-number {
+      font-size: 48px;
+    }
+
+    .queue-metrics {
+      grid-template-columns: 1fr;
+    }
+  }
+
+  /* Dark mode adjustments (default) */
+  :host {
+    color-scheme: dark;
+  }
+
+  /* Accessibility */
+  .queue-button:focus-visible {
+    outline: 2px solid var(--queue-primary, #667eea);
+    outline-offset: 2px;
+  }
+
+  /* Reduced motion */
+  @media (prefers-reduced-motion: reduce) {
+    * {
+      animation-duration: 0.01ms !important;
+      animation-iteration-count: 1 !important;
+      transition-duration: 0.01ms !important;
+    }
+  }
+`;

package/src/core/queue-progress/types.ts

@@ -0,0 +1,130 @@
+/**
+ * Queue status types
+ */
+export type QueueStatus = 'waiting' | 'processing' | 'completed' | 'cancelled' | 'error';
+
+/**
+ * Configuration for QueueProgress component
+ */
+export interface QueueProgressConfig {
+  /** Initial position in queue */
+  position?: number;
+
+  /** Total queue size */
+  queueSize?: number;
+
+  /** Estimated wait time in seconds */
+  estimatedWait?: number;
+
+  /** Processing rate (items per second) */
+  processingRate?: number;
+
+  /** Show position counter */
+  showPosition?: boolean;
+
+  /** Show estimated wait time */
+  showWaitTime?: boolean;
+
+  /** Show processing rate */
+  showRate?: boolean;
+
+  /** Show queue size */
+  showQueueSize?: boolean;
+
+  /** Show visual progress bar */
+  showProgressBar?: boolean;
+
+  /** Custom message */
+  message?: string;
+
+  /** Enable animations */
+  animate?: boolean;
+
+  /** Update throttle in milliseconds */
+  updateThrottle?: number;
+
+  /** Enable automatic cursor state changes based on component state */
+  cursorFeedback?: boolean;
+
+  /** Component size variant */
+  size?: 'compact' | 'default' | 'large';
+
+  /** Visual style variant */
+  variant?: 'default' | 'minimal' | 'gradient' | 'glassmorphic';
+
+  /** Animation style */
+  animation?: 'none' | 'striped' | 'pulse' | 'glow';
+
+  /** Debug mode */
+  debug?: boolean;
+
+  /** Custom CSS class */
+  className?: string;
+
+  /** Aria label */
+  ariaLabel?: string;
+}
+
+/**
+ * QueueProgress state
+ */
+export interface QueueProgressState {
+  status: QueueStatus;
+  position: number;
+  queueSize: number;
+  estimatedWait: number;
+  processingRate: number;
+  startTime: number;
+  message?: string;
+  elapsedTime: number;
+}
+
+/**
+ * Update data for queue position
+ */
+export interface QueueUpdate {
+  position?: number;
+  queueSize?: number;
+  estimatedWait?: number;
+  processingRate?: number;
+  message?: string;
+}
+
+/**
+ * Event data for position change
+ */
+export interface PositionChangeEvent {
+  previousPosition: number;
+  currentPosition: number;
+  queueSize: number;
+  estimatedWait: number;
+  timestamp: number;
+}
+
+/**
+ * Event data for queue start
+ */
+export interface QueueStartEvent {
+  position: number;
+  queueSize: number;
+  estimatedWait: number;
+  timestamp: number;
+}
+
+/**
+ * Event data for queue complete
+ */
+export interface QueueCompleteEvent {
+  totalWaitTime: number;
+  startPosition: number;
+  timestamp: number;
+}
+
+/**
+ * Event data for queue error
+ */
+export interface QueueErrorEvent {
+  message: string;
+  position: number;
+  timestamp: number;
+}