prompt_engine 1.0.0

data/app/assets/stylesheets/prompt_engine/foundation.css

@@ -0,0 +1,182 @@
+/* CSS Variables - Color Palette */
+:root {
+  /* Neutral Grays */
+  --color-gray-50: #f9fafb;
+  --color-gray-100: #f3f4f6;
+  --color-gray-200: #e5e7eb;
+  --color-gray-300: #d1d5db;
+  --color-gray-400: #9ca3af;
+  --color-gray-500: #6b7280;
+  --color-gray-600: #4b5563;
+  --color-gray-700: #374151;
+  --color-gray-800: #1f2937;
+  --color-gray-900: #111827;
+
+  /* Primary Colors */
+  --color-primary-50: #eef2ff;
+  --color-primary-100: #e0e7ff;
+  --color-primary-200: #c7d2fe;
+  --color-primary-300: #a5b4fc;
+  --color-primary-400: #818cf8;
+  --color-primary-500: #6366f1;
+  --color-primary-600: #4f46e5;
+  --color-primary-700: #4338ca;
+  --color-primary-800: #3730a3;
+  --color-primary-900: #312e81;
+
+  /* Semantic Colors */
+  --color-danger: #ef4444;
+  --color-danger-hover: #dc2626;
+  --color-danger-50: #fef2f2;
+  --color-danger-900: #7f1d1d;
+  --color-success: #10b981;
+  --color-success-hover: #059669;
+  --color-success-50: #f0fdf4;
+  --color-success-900: #14532d;
+  --color-warning: #f59e0b;
+  --color-warning-hover: #d97706;
+  --color-warning-50: #fffbeb;
+  --color-warning-900: #78350f;
+
+  /* Typography */
+  --font-family-base:
+    -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+  --font-size-xs: 0.75rem; /* 12px */
+  --font-size-sm: 0.875rem; /* 14px */
+  --font-size-base: 1rem; /* 16px */
+  --font-size-lg: 1.125rem; /* 18px */
+  --font-size-xl: 1.25rem; /* 20px */
+  --font-size-2xl: 1.5rem; /* 24px */
+  --font-size-3xl: 1.875rem; /* 30px */
+
+  --line-height-tight: 1.25;
+  --line-height-normal: 1.5;
+  --line-height-relaxed: 1.75;
+
+  /* Spacing */
+  --spacing-xs: 0.25rem; /* 4px */
+  --spacing-sm: 0.5rem; /* 8px */
+  --spacing-md: 1rem; /* 16px */
+  --spacing-lg: 1.5rem; /* 24px */
+  --spacing-xl: 2rem; /* 32px */
+  --spacing-2xl: 3rem; /* 48px */
+  --spacing-3xl: 4rem; /* 64px */
+
+  /* Border Radius */
+  --radius-sm: 0.25rem; /* 4px */
+  --radius-md: 0.375rem; /* 6px */
+  --radius-lg: 0.5rem; /* 8px */
+  --radius-xl: 0.75rem; /* 12px */
+
+  /* Shadows */
+  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
+
+  /* Layout */
+  --sidebar-width: 240px;
+  --header-height: 64px;
+
+  /* Transitions */
+  --transition-fast: 150ms ease-in-out;
+  --transition-base: 200ms ease-in-out;
+  --transition-slow: 300ms ease-in-out;
+}
+
+/* CSS Reset / Normalize */
+.prompt-engine-admin * {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+
+.prompt-engine-admin {
+  font-family: var(--font-family-base);
+  font-size: var(--font-size-base);
+  line-height: var(--line-height-normal);
+  color: var(--color-gray-900);
+  background-color: var(--color-gray-50);
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+/* Typography Base Styles */
+.prompt-engine-admin h1,
+.prompt-engine-admin h2,
+.prompt-engine-admin h3,
+.prompt-engine-admin h4,
+.prompt-engine-admin h5,
+.prompt-engine-admin h6 {
+  font-weight: 600;
+  line-height: var(--line-height-tight);
+}
+
+.prompt-engine-admin h1 {
+  font-size: var(--font-size-3xl);
+  margin-bottom: var(--spacing-lg);
+}
+
+.prompt-engine-admin h2 {
+  font-size: var(--font-size-2xl);
+  margin-bottom: var(--spacing-md);
+}
+
+.prompt-engine-admin h3 {
+  font-size: var(--font-size-xl);
+  margin-bottom: var(--spacing-md);
+}
+
+.prompt-engine-admin p {
+  margin-bottom: var(--spacing-md);
+}
+
+.prompt-engine-admin a {
+  color: var(--color-primary-600);
+  text-decoration: none;
+  transition: color var(--transition-fast);
+}
+
+.prompt-engine-admin a:hover {
+  color: var(--color-primary-700);
+  text-decoration: underline;
+}
+
+/* Utility Classes */
+.prompt-engine-admin .text-sm {
+  font-size: var(--font-size-sm);
+}
+.prompt-engine-admin .text-xs {
+  font-size: var(--font-size-xs);
+}
+.prompt-engine-admin .text-lg {
+  font-size: var(--font-size-lg);
+}
+.prompt-engine-admin .text-muted {
+  color: var(--color-gray-600);
+}
+.prompt-engine-admin .text-danger {
+  color: var(--color-danger);
+}
+.prompt-engine-admin .text-success {
+  color: var(--color-success);
+}
+
+.prompt-engine-admin .mt-sm {
+  margin-top: var(--spacing-sm);
+}
+.prompt-engine-admin .mt-md {
+  margin-top: var(--spacing-md);
+}
+.prompt-engine-admin .mt-lg {
+  margin-top: var(--spacing-lg);
+}
+.prompt-engine-admin .mb-sm {
+  margin-bottom: var(--spacing-sm);
+}
+.prompt-engine-admin .mb-md {
+  margin-bottom: var(--spacing-md);
+}
+.prompt-engine-admin .mb-lg {
+  margin-bottom: var(--spacing-lg);
+}

data/app/assets/stylesheets/prompt_engine/layout.css

@@ -0,0 +1,75 @@
+/* Admin Layout Structure */
+.admin-layout {
+  display: flex;
+  min-height: 100vh;
+  background-color: var(--color-gray-50);
+}
+
+/* Sidebar Container */
+.admin-layout__sidebar {
+  width: var(--sidebar-width);
+  background-color: var(--color-gray-900);
+  color: var(--color-gray-100);
+  position: fixed;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  overflow-y: auto;
+  z-index: 10;
+}
+
+/* Main Content Area */
+.admin-layout__main {
+  flex: 1;
+  margin-left: var(--sidebar-width);
+  min-height: 100vh;
+  background-color: var(--color-gray-50);
+}
+
+.admin-main {
+  padding: var(--spacing-xl);
+  max-width: 1280px;
+  margin: 0 auto;
+}
+
+/* Page Header */
+.admin-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: var(--spacing-xl);
+}
+
+.admin-header h1 {
+  margin: 0;
+  font-size: var(--font-size-2xl);
+  font-weight: 600;
+  color: var(--color-gray-900);
+}
+
+.admin-header p {
+  margin: var(--spacing-xs) 0 0;
+  color: var(--color-gray-600);
+}
+
+/* Responsive Layout */
+@media (max-width: 768px) {
+  .admin-layout__sidebar {
+    transform: translateX(-100%);
+    transition: transform var(--transition-base);
+  }
+  
+  .admin-layout__sidebar--open {
+    transform: translateX(0);
+  }
+  
+  .admin-layout__main {
+    margin-left: 0;
+  }
+  
+  .admin-header {
+    flex-direction: column;
+    align-items: flex-start;
+    gap: var(--spacing-md);
+  }
+}

data/app/assets/stylesheets/prompt_engine/loading.css

@@ -0,0 +1,229 @@
+/* Loading States */
+
+/* Spinner */
+.spinner {
+  display: inline-block;
+  width: 1.5rem;
+  height: 1.5rem;
+  border: 0.2rem solid var(--color-gray-200);
+  border-top-color: var(--color-primary-600);
+  border-radius: 50%;
+  animation: spin 1s linear infinite;
+}
+
+.spinner--small {
+  width: 1rem;
+  height: 1rem;
+  border-width: 0.15rem;
+}
+
+.spinner--large {
+  width: 3rem;
+  height: 3rem;
+  border-width: 0.25rem;
+}
+
+.spinner--white {
+  border-color: rgba(255, 255, 255, 0.3);
+  border-top-color: white;
+}
+
+@keyframes spin {
+  to { transform: rotate(360deg); }
+}
+
+/* Loading Overlay */
+.loading-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: rgba(0, 0, 0, 0.5);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 9999;
+}
+
+.loading-overlay__content {
+  background: white;
+  padding: var(--spacing-xl);
+  border-radius: var(--radius-lg);
+  box-shadow: var(--shadow-xl);
+  text-align: center;
+  max-width: 400px;
+}
+
+.loading-overlay__spinner {
+  margin-bottom: var(--spacing-lg);
+}
+
+.loading-overlay__title {
+  font-size: var(--font-size-lg);
+  font-weight: 600;
+  color: var(--color-gray-900);
+  margin-bottom: var(--spacing-sm);
+}
+
+.loading-overlay__text {
+  color: var(--color-gray-600);
+  font-size: var(--font-size-sm);
+}
+
+/* Button Loading State */
+.btn--loading {
+  position: relative;
+  color: transparent !important;
+  pointer-events: none;
+}
+
+.btn--loading::after {
+  content: "";
+  position: absolute;
+  width: 1rem;
+  height: 1rem;
+  top: 50%;
+  left: 50%;
+  margin-left: -0.5rem;
+  margin-top: -0.5rem;
+  border: 0.15rem solid rgba(255, 255, 255, 0.3);
+  border-top-color: white;
+  border-radius: 50%;
+  animation: spin 1s linear infinite;
+}
+
+.btn--secondary.btn--loading::after,
+.btn--outline.btn--loading::after {
+  border-color: var(--color-gray-300);
+  border-top-color: var(--color-gray-600);
+}
+
+/* Form Loading State */
+.form--loading {
+  position: relative;
+  pointer-events: none;
+  opacity: 0.6;
+}
+
+.form--loading::after {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: rgba(255, 255, 255, 0.8);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+/* Card Loading State */
+.card--loading {
+  position: relative;
+  min-height: 200px;
+}
+
+.card--loading .card__body {
+  opacity: 0.5;
+}
+
+.card--loading::after {
+  content: "";
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: 2rem;
+  height: 2rem;
+  border: 0.2rem solid var(--color-gray-200);
+  border-top-color: var(--color-primary-600);
+  border-radius: 50%;
+  animation: spin 1s linear infinite;
+}
+
+/* Skeleton Loading */
+.skeleton {
+  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
+  background-size: 200% 100%;
+  animation: loading 1.5s infinite;
+}
+
+.skeleton-text {
+  height: 1rem;
+  margin-bottom: var(--spacing-sm);
+  border-radius: var(--radius-sm);
+}
+
+.skeleton-text--lg {
+  height: 1.5rem;
+}
+
+.skeleton-text--sm {
+  height: 0.75rem;
+}
+
+@keyframes loading {
+  0% {
+    background-position: 200% 0;
+  }
+  100% {
+    background-position: -200% 0;
+  }
+}
+
+/* Progress Bar */
+.progress {
+  height: 0.5rem;
+  background-color: var(--color-gray-200);
+  border-radius: var(--radius-full);
+  overflow: hidden;
+}
+
+.progress__bar {
+  height: 100%;
+  background-color: var(--color-primary-600);
+  transition: width 0.3s ease;
+}
+
+.progress--striped .progress__bar {
+  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;
+}
+
+.progress--animated .progress__bar {
+  animation: progress-bar-stripes 1s linear infinite;
+}
+
+@keyframes progress-bar-stripes {
+  from {
+    background-position: 1rem 0;
+  }
+  to {
+    background-position: 0 0;
+  }
+}
+
+/* Pulse Animation */
+.pulse {
+  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
+}
+
+@keyframes pulse {
+  0%, 100% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.5;
+  }
+}

data/app/assets/stylesheets/prompt_engine/notifications.css

@@ -0,0 +1,78 @@
+/* Notifications Container */
+.admin-notifications {
+  margin-bottom: var(--spacing-lg);
+}
+
+/* Notification Base */
+.admin-notification {
+  padding: var(--spacing-md) var(--spacing-lg);
+  margin-bottom: var(--spacing-md);
+  background-color: var(--color-gray-50);
+  border: 1px solid var(--color-gray-200);
+  border-radius: var(--radius-md);
+  font-size: var(--font-size-sm);
+}
+
+/* Notification Types */
+.admin-notification--notice {
+  border-left: 4px solid var(--color-primary-500);
+  background-color: var(--color-primary-50);
+  color: var(--color-primary-900);
+}
+
+.admin-notification--success {
+  border-left: 4px solid var(--color-success);
+  background-color: var(--color-success-50);
+  color: var(--color-success-900);
+}
+
+.admin-notification--alert,
+.admin-notification--error {
+  border-left: 4px solid var(--color-danger);
+  background-color: var(--color-danger-50);
+  color: var(--color-danger-900);
+}
+
+.admin-notification--warning {
+  border-left: 4px solid var(--color-warning);
+  background-color: var(--color-warning-50);
+  color: var(--color-warning-900);
+}
+
+/* Alert Component */
+.alert {
+  padding: var(--spacing-md) var(--spacing-lg);
+  margin-bottom: var(--spacing-md);
+  border-radius: var(--radius-md);
+  font-size: var(--font-size-sm);
+  border: 1px solid transparent;
+}
+
+.alert strong {
+  font-weight: 600;
+}
+
+.alert--success {
+  background-color: #dcfce7;
+  color: #166534;
+  border-color: #bbf7d0;
+}
+
+.alert--warning {
+  background-color: #fef3c7;
+  color: #92400e;
+  border-color: #fde68a;
+}
+
+.alert--danger {
+  background-color: #fee2e2;
+  color: #991b1b;
+  border-color: #fecaca;
+}
+
+.alert--info {
+  background-color: #dbeafe;
+  color: #1e40af;
+  border-color: #bfdbfe;
+}
+

data/app/assets/stylesheets/prompt_engine/overrides.css

@@ -0,0 +1,42 @@
+/* Specific overrides to ensure proper styling */
+
+/* Sidebar link overrides */
+.admin-sidebar a.admin-nav__link,
+.admin-sidebar a.admin-nav__link:link,
+.admin-sidebar a.admin-nav__link:visited {
+  color: var(--color-gray-300);
+  text-decoration: none;
+}
+
+.admin-sidebar a.admin-nav__link:hover {
+  color: white;
+  text-decoration: none;
+}
+
+.admin-sidebar a.admin-nav__link--active,
+.admin-sidebar a.admin-nav__link--active:link,
+.admin-sidebar a.admin-nav__link--active:visited {
+  color: white;
+}
+
+.admin-sidebar a.admin-nav__link--disabled,
+.admin-sidebar a.admin-nav__link--disabled:hover {
+  color: var(--color-gray-500);
+}
+
+/* Button text color overrides */
+a.btn--primary,
+button.btn--primary,
+input.btn--primary,
+a.btn--primary:link,
+a.btn--primary:visited {
+  color: white !important;
+}
+
+a.btn--danger,
+button.btn--danger,
+input.btn--danger,
+a.btn--danger:link,
+a.btn--danger:visited {
+  color: white !important;
+}