@geenius/ai 0.1.0 → 0.3.1

package/packages/solidjs-css/src/ai.css

@@ -1,857 +0,0 @@
-/* ============================================================================
-   GEENIUS AI - COMPREHENSIVE CSS
-   Component: Chat Interfaces, AI Response Cards, Model Selectors
-   Colors: OKLCH, Dark Mode Support, Animations, Streaming Effects
-   ============================================================================ */
-
-:root {
-  /* Base Colors - OKLCH */
-  --ai-bg: oklch(0.10 0.01 250);
-  --ai-surface: oklch(0.13 0.01 250);
-  --ai-surface-2: oklch(0.16 0.01 250);
-  --ai-surface-3: oklch(0.19 0.01 250);
-  --ai-border: oklch(0.22 0.01 250);
-  --ai-border-light: oklch(0.26 0.01 250);
-  --ai-border-focus: oklch(0.65 0.22 265);
-  --ai-text: oklch(0.95 0.01 250);
-  --ai-text-secondary: oklch(0.75 0.01 250);
-  --ai-text-muted: oklch(0.65 0.01 250);
-  --ai-text-disabled: oklch(0.45 0.01 250);
-
-  /* Semantic Colors - OKLCH */
-  --ai-accent: oklch(0.65 0.22 265);
-  --ai-accent-light: oklch(0.75 0.18 265);
-  --ai-accent-dark: oklch(0.55 0.24 265);
-  --ai-success: oklch(0.72 0.20 145);
-  --ai-success-light: oklch(0.82 0.15 145);
-  --ai-warning: oklch(0.78 0.18 75);
-  --ai-warning-light: oklch(0.88 0.13 75);
-  --ai-error: oklch(0.60 0.25 25);
-  --ai-error-light: oklch(0.70 0.20 25);
-  --ai-info: oklch(0.65 0.20 265);
-  --ai-streaming: oklch(0.65 0.22 265);
-  --ai-user-msg: oklch(0.65 0.22 265);
-  --ai-ai-msg: oklch(0.72 0.20 145);
-
-  /* Spacing & Layout */
-  --ai-radius: 0.75rem;
-  --ai-radius-sm: 0.375rem;
-  --ai-radius-lg: 1.25rem;
-  --ai-spacing-xs: 0.375rem;
-  --ai-spacing-sm: 0.5rem;
-  --ai-spacing-md: 0.75rem;
-  --ai-spacing-lg: 1rem;
-  --ai-spacing-xl: 1.5rem;
-  --ai-spacing-2xl: 2rem;
-
-  /* Effects */
-  --ai-shadow: 0 4px 24px oklch(0 0 0 / 0.4);
-  --ai-shadow-sm: 0 2px 8px oklch(0 0 0 / 0.2);
-  --ai-shadow-lg: 0 12px 48px oklch(0 0 0 / 0.5);
-  --ai-shadow-focus: 0 0 0 3px oklch(0.65 0.22 265 / 0.15);
-  --ai-transition: 200ms ease;
-  --ai-transition-slow: 300ms ease;
-  --ai-backdrop: oklch(0 0 0 / 0.7);
-}
-
-@media (prefers-color-scheme: light) {
-  :root {
-    --ai-bg: oklch(0.98 0.01 250);
-    --ai-surface: oklch(0.96 0.01 250);
-    --ai-surface-2: oklch(0.92 0.01 250);
-    --ai-text: oklch(0.15 0.01 250);
-    --ai-text-muted: oklch(0.50 0.01 250);
-  }
-}
-
-/* ============================================================================
-   CHAT CONTAINER & LAYOUT
-   ============================================================================ */
-
-.ai__container {
-  display: flex;
-  flex-direction: column;
-  height: 100vh;
-  background: var(--ai-bg);
-}
-
-.ai__chat-wrapper {
-  display: flex;
-  flex-direction: column;
-  height: 100%;
-  overflow: hidden;
-}
-
-.ai__header {
-  background: var(--ai-surface);
-  border-bottom: 1px solid var(--ai-border);
-  padding: var(--ai-spacing-lg) var(--ai-spacing-xl);
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  flex-wrap: wrap;
-  gap: var(--ai-spacing-md);
-  z-index: 20;
-}
-
-.ai__header-left {
-  display: flex;
-  align-items: center;
-  gap: var(--ai-spacing-md);
-}
-
-.ai__header-title {
-  font-size: 1rem;
-  font-weight: 600;
-  color: var(--ai-text);
-  margin: 0;
-}
-
-.ai__header-subtitle {
-  font-size: 0.75rem;
-  color: var(--ai-text-muted);
-  margin: 0;
-}
-
-.ai__header-actions {
-  display: flex;
-  gap: var(--ai-spacing-sm);
-}
-
-.ai__chat-area {
-  flex: 1;
-  overflow-y: auto;
-  padding: var(--ai-spacing-xl);
-  display: flex;
-  flex-direction: column;
-  gap: var(--ai-spacing-lg);
-}
-
-.ai__input-area {
-  padding: var(--ai-spacing-xl);
-  background: var(--ai-surface);
-  border-top: 1px solid var(--ai-border);
-  display: flex;
-  flex-direction: column;
-  gap: var(--ai-spacing-md);
-}
-
-/* ============================================================================
-   MESSAGE BUBBLES
-   ============================================================================ */
-
-.ai__message {
-  display: flex;
-  gap: var(--ai-spacing-md);
-  margin-bottom: var(--ai-spacing-lg);
-  animation: ai-fade-in var(--ai-transition);
-}
-
-.ai__message--user {
-  justify-content: flex-end;
-}
-
-.ai__message--assistant {
-  justify-content: flex-start;
-}
-
-.ai__message-avatar {
-  width: 2.5rem;
-  height: 2.5rem;
-  border-radius: 50%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-weight: 600;
-  font-size: 1rem;
-  flex-shrink: 0;
-}
-
-.ai__message--user .ai__message-avatar {
-  background: var(--ai-user-msg);
-  color: oklch(1 0 0);
-}
-
-.ai__message--assistant .ai__message-avatar {
-  background: var(--ai-ai-msg);
-  color: oklch(1 0 0);
-}
-
-.ai__message-content {
-  max-width: 70%;
-  display: flex;
-  flex-direction: column;
-  gap: var(--ai-spacing-sm);
-}
-
-.ai__message--user .ai__message-content {
-  align-items: flex-end;
-}
-
-.ai__message--assistant .ai__message-content {
-  align-items: flex-start;
-}
-
-.ai__message-bubble {
-  padding: var(--ai-spacing-md) var(--ai-spacing-lg);
-  border-radius: var(--ai-radius);
-  font-size: 0.875rem;
-  line-height: 1.5;
-  word-wrap: break-word;
-  animation: ai-bubble-pop var(--ai-transition);
-}
-
-.ai__message--user .ai__message-bubble {
-  background: var(--ai-user-msg);
-  color: oklch(1 0 0);
-  border: 1px solid var(--ai-user-msg);
-  border-radius: var(--ai-radius) 0 var(--ai-radius) var(--ai-radius);
-}
-
-.ai__message--assistant .ai__message-bubble {
-  background: var(--ai-surface);
-  color: var(--ai-text);
-  border: 1px solid var(--ai-border);
-  border-radius: 0 var(--ai-radius) var(--ai-radius) var(--ai-radius);
-}
-
-.ai__message-time {
-  font-size: 0.75rem;
-  color: var(--ai-text-muted);
-  margin-top: var(--ai-spacing-xs);
-}
-
-.ai__message-actions {
-  display: flex;
-  gap: var(--ai-spacing-xs);
-  margin-top: var(--ai-spacing-xs);
-  opacity: 0;
-  transition: opacity var(--ai-transition);
-}
-
-.ai__message:hover .ai__message-actions {
-  opacity: 1;
-}
-
-.ai__message-action-btn {
-  background: none;
-  border: none;
-  color: var(--ai-text-muted);
-  cursor: pointer;
-  padding: var(--ai-spacing-xs);
-  border-radius: var(--ai-radius-sm);
-  font-size: 0.875rem;
-  transition: all var(--ai-transition);
-}
-
-.ai__message-action-btn:hover {
-  color: var(--ai-text);
-  background: var(--ai-surface-2);
-}
-
-/* ============================================================================
-   STREAMING INDICATORS
-   ============================================================================ */
-
-.ai__typing-indicator {
-  display: flex;
-  gap: 0.25rem;
-  align-items: center;
-  padding: var(--ai-spacing-md) var(--ai-spacing-lg);
-  background: var(--ai-surface);
-  border: 1px solid var(--ai-border);
-  border-radius: var(--ai-radius);
-  width: fit-content;
-}
-
-.ai__typing-dot {
-  width: 0.5rem;
-  height: 0.5rem;
-  border-radius: 50%;
-  background: var(--ai-streaming);
-  animation: ai-typing 1.4s infinite;
-}
-
-.ai__typing-dot:nth-child(2) {
-  animation-delay: 0.2s;
-}
-
-.ai__typing-dot:nth-child(3) {
-  animation-delay: 0.4s;
-}
-
-.ai__streaming-indicator {
-  display: inline-flex;
-  align-items: center;
-  gap: 0.25rem;
-  padding: var(--ai-spacing-xs) var(--ai-spacing-md);
-  background: var(--ai-streaming);
-  background-opacity: 0.1;
-  border: 1px solid var(--ai-streaming);
-  border-opacity: 0.3;
-  border-radius: 9999px;
-  font-size: 0.75rem;
-  color: var(--ai-streaming);
-  font-weight: 500;
-}
-
-.ai__streaming-dot {
-  width: 0.375rem;
-  height: 0.375rem;
-  border-radius: 50%;
-  background: var(--ai-streaming);
-  animation: ai-pulse 1.5s ease-in-out infinite;
-}
-
-.ai__streaming-text {
-  opacity: 0.8;
-  animation: ai-fade-blink 1.5s ease-in-out infinite;
-}
-
-/* ============================================================================
-   INPUT FORM & CONTROLS
-   ============================================================================ */
-
-.ai__input-form {
-  display: flex;
-  gap: var(--ai-spacing-md);
-  align-items: flex-end;
-}
-
-.ai__input-wrapper {
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-  gap: var(--ai-spacing-xs);
-}
-
-.ai__input-label {
-  font-size: 0.75rem;
-  font-weight: 500;
-  color: var(--ai-text-muted);
-  text-transform: uppercase;
-  letter-spacing: 0.05em;
-}
-
-.ai__input-textarea {
-  background: var(--ai-surface-2);
-  border: 1px solid var(--ai-border);
-  border-radius: var(--ai-radius-sm);
-  padding: var(--ai-spacing-md) var(--ai-spacing-lg);
-  color: var(--ai-text);
-  font-size: 0.875rem;
-  font-family: inherit;
-  transition: all var(--ai-transition);
-  outline: none;
-  width: 100%;
-  min-height: 2.5rem;
-  max-height: 8rem;
-  resize: vertical;
-}
-
-.ai__input-textarea:focus {
-  border-color: var(--ai-border-focus);
-  box-shadow: var(--ai-shadow-focus);
-}
-
-.ai__input-textarea::placeholder {
-  color: var(--ai-text-disabled);
-}
-
-.ai__input-actions {
-  display: flex;
-  gap: var(--ai-spacing-sm);
-  flex-wrap: wrap;
-}
-
-.ai__input-btn {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  padding: var(--ai-spacing-sm) var(--ai-spacing-lg);
-  border-radius: var(--ai-radius-sm);
-  font-size: 0.875rem;
-  font-weight: 500;
-  cursor: pointer;
-  border: none;
-  transition: all var(--ai-transition);
-  white-space: nowrap;
-}
-
-.ai__input-btn--primary {
-  background: var(--ai-accent);
-  color: oklch(1 0 0);
-}
-
-.ai__input-btn--primary:hover:not(:disabled) {
-  background: var(--ai-accent-light);
-  transform: translateY(-1px);
-}
-
-.ai__input-btn--secondary {
-  background: var(--ai-surface);
-  color: var(--ai-text);
-  border: 1px solid var(--ai-border);
-}
-
-.ai__input-btn--secondary:hover:not(:disabled) {
-  border-color: var(--ai-accent);
-  color: var(--ai-accent);
-}
-
-.ai__input-btn:disabled {
-  opacity: 0.5;
-  cursor: not-allowed;
-}
-
-/* ============================================================================
-   MODEL SELECTOR & TOKEN COUNTER
-   ============================================================================ */
-
-.ai__model-selector {
-  display: flex;
-  align-items: center;
-  gap: var(--ai-spacing-md);
-  padding: var(--ai-spacing-md) var(--ai-spacing-lg);
-  background: var(--ai-surface-2);
-  border: 1px solid var(--ai-border);
-  border-radius: var(--ai-radius-sm);
-  margin-bottom: var(--ai-spacing-md);
-}
-
-.ai__model-label {
-  font-size: 0.8125rem;
-  color: var(--ai-text-muted);
-  text-transform: uppercase;
-  letter-spacing: 0.05em;
-  font-weight: 500;
-}
-
-.ai__model-select {
-  background: none;
-  border: none;
-  color: var(--ai-text);
-  font-size: 0.875rem;
-  font-weight: 500;
-  cursor: pointer;
-  padding: 0;
-  flex: 1;
-  font-family: inherit;
-}
-
-.ai__model-select:focus {
-  outline: 1px solid var(--ai-accent);
-  outline-offset: 2px;
-}
-
-.ai__token-counter {
-  display: flex;
-  align-items: center;
-  gap: var(--ai-spacing-sm);
-  padding: var(--ai-spacing-xs) var(--ai-spacing-md);
-  background: var(--ai-surface);
-  border: 1px solid var(--ai-border);
-  border-radius: 9999px;
-  font-size: 0.75rem;
-  color: var(--ai-text-muted);
-  font-family: 'JetBrains Mono', monospace;
-}
-
-.ai__token-value {
-  font-weight: 600;
-  color: var(--ai-accent);
-}
-
-.ai__token-max {
-  opacity: 0.6;
-}
-
-/* ============================================================================
-   RESPONSE CARDS & FEATURES
-   ============================================================================ */
-
-.ai__response-card {
-  background: var(--ai-surface);
-  border: 1px solid var(--ai-border);
-  border-radius: var(--ai-radius);
-  padding: var(--ai-spacing-lg);
-  margin-bottom: var(--ai-spacing-lg);
-}
-
-.ai__response-header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  margin-bottom: var(--ai-spacing-md);
-}
-
-.ai__response-title {
-  font-size: 0.875rem;
-  font-weight: 600;
-  color: var(--ai-text);
-  margin: 0;
-}
-
-.ai__response-meta {
-  display: flex;
-  gap: var(--ai-spacing-sm);
-  font-size: 0.75rem;
-  color: var(--ai-text-muted);
-}
-
-.ai__response-content {
-  font-size: 0.875rem;
-  line-height: 1.6;
-  color: var(--ai-text);
-  margin-bottom: var(--ai-spacing-md);
-}
-
-.ai__response-footer {
-  display: flex;
-  gap: var(--ai-spacing-sm);
-  flex-wrap: wrap;
-  padding-top: var(--ai-spacing-md);
-  border-top: 1px solid var(--ai-border);
-}
-
-/* ============================================================================
-   PROMPT TEMPLATES
-   ============================================================================ */
-
-.ai__templates {
-  background: var(--ai-surface);
-  border: 1px solid var(--ai-border);
-  border-radius: var(--ai-radius);
-  padding: var(--ai-spacing-lg);
-  margin-bottom: var(--ai-spacing-lg);
-}
-
-.ai__templates-title {
-  font-size: 0.875rem;
-  font-weight: 600;
-  color: var(--ai-text);
-  margin: 0 0 var(--ai-spacing-md);
-}
-
-.ai__templates-grid {
-  display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
-  gap: var(--ai-spacing-sm);
-}
-
-.ai__template-btn {
-  padding: var(--ai-spacing-sm) var(--ai-spacing-md);
-  background: var(--ai-surface-2);
-  border: 1px solid var(--ai-border);
-  border-radius: var(--ai-radius-sm);
-  color: var(--ai-text);
-  font-size: 0.8125rem;
-  font-weight: 500;
-  cursor: pointer;
-  transition: all var(--ai-transition);
-  text-align: left;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
-.ai__template-btn:hover {
-  background: var(--ai-surface-3);
-  border-color: var(--ai-accent);
-  color: var(--ai-accent);
-}
-
-/* ============================================================================
-   FEATURE TOGGLES & SETTINGS
-   ============================================================================ */
-
-.ai__feature-toggle {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: var(--ai-spacing-md);
-  background: var(--ai-surface-2);
-  border: 1px solid var(--ai-border);
-  border-radius: var(--ai-radius-sm);
-  margin-bottom: var(--ai-spacing-sm);
-}
-
-.ai__feature-label {
-  font-size: 0.875rem;
-  font-weight: 500;
-  color: var(--ai-text);
-}
-
-.ai__feature-description {
-  font-size: 0.75rem;
-  color: var(--ai-text-muted);
-  margin-top: var(--ai-spacing-xs);
-}
-
-.ai__toggle-switch {
-  position: relative;
-  width: 2.5rem;
-  height: 1.5rem;
-  background: var(--ai-inactive);
-  border-radius: 9999px;
-  cursor: pointer;
-  transition: background-color var(--ai-transition);
-}
-
-.ai__toggle-switch--active {
-  background: var(--ai-accent);
-}
-
-.ai__toggle-switch-thumb {
-  position: absolute;
-  top: 0.1875rem;
-  left: 0.1875rem;
-  width: 1.125rem;
-  height: 1.125rem;
-  background: oklch(1 0 0);
-  border-radius: 50%;
-  transition: transform var(--ai-transition);
-}
-
-.ai__toggle-switch--active .ai__toggle-switch-thumb {
-  transform: translateX(1rem);
-}
-
-/* ============================================================================
-   CODE BLOCKS & SYNTAX
-   ============================================================================ */
-
-.ai__code-block {
-  background: oklch(0.08 0.01 250);
-  border: 1px solid var(--ai-border);
-  border-radius: var(--ai-radius-sm);
-  padding: var(--ai-spacing-lg);
-  margin: var(--ai-spacing-md) 0;
-  overflow-x: auto;
-}
-
-.ai__code-header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  margin-bottom: var(--ai-spacing-md);
-  padding-bottom: var(--ai-spacing-md);
-  border-bottom: 1px solid var(--ai-border);
-}
-
-.ai__code-lang {
-  font-size: 0.75rem;
-  color: var(--ai-text-muted);
-  font-weight: 500;
-  text-transform: uppercase;
-  letter-spacing: 0.05em;
-}
-
-.ai__code-copy {
-  background: none;
-  border: none;
-  color: var(--ai-text-muted);
-  cursor: pointer;
-  font-size: 0.75rem;
-  font-weight: 500;
-  transition: color var(--ai-transition);
-}
-
-.ai__code-copy:hover {
-  color: var(--ai-accent);
-}
-
-.ai__code-text {
-  font-family: 'JetBrains Mono', monospace;
-  font-size: 0.8125rem;
-  color: var(--ai-text);
-  line-height: 1.5;
-  word-wrap: break-word;
-  white-space: pre-wrap;
-}
-
-/* ============================================================================
-   SIDEBAR & HISTORY
-   ============================================================================ */
-
-.ai__sidebar {
-  width: 16rem;
-  background: var(--ai-surface);
-  border-right: 1px solid var(--ai-border);
-  display: flex;
-  flex-direction: column;
-  overflow-y: auto;
-}
-
-.ai__sidebar-header {
-  padding: var(--ai-spacing-lg);
-  border-bottom: 1px solid var(--ai-border);
-}
-
-.ai__sidebar-title {
-  font-size: 0.875rem;
-  font-weight: 600;
-  color: var(--ai-text);
-  margin: 0;
-}
-
-.ai__chat-history {
-  flex: 1;
-  padding: var(--ai-spacing-lg) 0;
-  overflow-y: auto;
-}
-
-.ai__history-item {
-  padding: var(--ai-spacing-md) var(--ai-spacing-lg);
-  border-bottom: 1px solid var(--ai-border);
-  font-size: 0.875rem;
-  color: var(--ai-text-muted);
-  cursor: pointer;
-  transition: all var(--ai-transition);
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.ai__history-item:hover {
-  background: var(--ai-surface-2);
-  color: var(--ai-text);
-}
-
-.ai__history-item--active {
-  background: var(--ai-accent);
-  color: oklch(1 0 0);
-}
-
-/* ============================================================================
-   ANIMATIONS
-   ============================================================================ */
-
-@keyframes ai-fade-in {
-  from {
-    opacity: 0;
-  }
-  to {
-    opacity: 1;
-  }
-}
-
-@keyframes ai-bubble-pop {
-  from {
-    opacity: 0;
-    transform: scale(0.95);
-  }
-  to {
-    opacity: 1;
-    transform: scale(1);
-  }
-}
-
-@keyframes ai-typing {
-  0%, 60%, 100% {
-    transform: translateY(0);
-    opacity: 0.7;
-  }
-  30% {
-    transform: translateY(-0.5rem);
-    opacity: 1;
-  }
-}
-
-@keyframes ai-pulse {
-  0%, 100% {
-    opacity: 1;
-  }
-  50% {
-    opacity: 0.5;
-  }
-}
-
-@keyframes ai-fade-blink {
-  0%, 100% {
-    opacity: 0.8;
-  }
-  50% {
-    opacity: 0.3;
-  }
-}
-
-/* ============================================================================
-   RESPONSIVE DESIGN
-   ============================================================================ */
-
-@media (max-width: 1024px) {
-  .ai__message-content {
-    max-width: 80%;
-  }
-}
-
-@media (max-width: 768px) {
-  .ai__container {
-    flex-direction: column-reverse;
-  }
-
-  .ai__sidebar {
-    width: 100%;
-    height: auto;
-    max-height: 25vh;
-    border-right: none;
-    border-top: 1px solid var(--ai-border);
-  }
-
-  .ai__message-content {
-    max-width: 90%;
-  }
-
-  .ai__chat-area {
-    padding: var(--ai-spacing-lg);
-  }
-
-  .ai__input-area {
-    padding: var(--ai-spacing-lg);
-  }
-
-  .ai__templates-grid {
-    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
-  }
-
-  .ai__modal {
-    min-width: unset;
-    width: calc(100vw - 2rem);
-    max-height: calc(100vh - 2rem);
-  }
-}
-
-@media (max-width: 480px) {
-  .ai__header {
-    flex-direction: column;
-    align-items: flex-start;
-  }
-
-  .ai__message-content {
-    max-width: 100%;
-  }
-
-  .ai__input-form {
-    flex-direction: column;
-    align-items: stretch;
-  }
-
-  .ai__input-btn {
-    width: 100%;
-  }
-
-  .ai__model-selector {
-    flex-wrap: wrap;
-  }
-
-  .ai__code-block {
-    padding: var(--ai-spacing-md);
-  }
-
-  .ai__response-card {
-    padding: var(--ai-spacing-md);
-  }
-}
-
-/* End of ai.css */