mljr-css 1.0.14 → 1.1.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mljr-css",
-  "version": "1.0.14",
+  "version": "1.1.0",
   "description": "A TailwindCSS-based CSS framework with orange/purple color scheme",
   "type": "module",
   "main": "./dist/plugin.cjs",

package/src/components/alert-dialog.css

@@ -0,0 +1,129 @@
+/* ============================================
+   Alert Dialog Component
+   Semantic confirm/cancel overlay for
+   destructive action confirmation
+   ============================================ */
+
+.mljr-alert-dialog-overlay {
+  position: fixed;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.5);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 1100;
+  padding: var(--mljr-space-4);
+  backdrop-filter: blur(2px);
+  animation: mljr-alert-dialog-overlay-in 0.15s ease;
+}
+
+@keyframes mljr-alert-dialog-overlay-in {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}
+
+.mljr-alert-dialog {
+  background: var(--mljr-bg);
+  border-radius: var(--mljr-radius-2xl);
+  box-shadow: var(--mljr-clay-shadow-lg);
+  padding: var(--mljr-space-8);
+  max-width: 28rem;
+  width: 100%;
+  position: relative;
+  animation: mljr-alert-dialog-in 0.2s ease;
+  outline: none;
+}
+
+@keyframes mljr-alert-dialog-in {
+  from {
+    opacity: 0;
+    transform: scale(0.95) translateY(-8px);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1) translateY(0);
+  }
+}
+
+.mljr-alert-dialog-icon {
+  width: 3rem;
+  height: 3rem;
+  border-radius: var(--mljr-radius-full);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-bottom: var(--mljr-space-4);
+}
+
+.mljr-alert-dialog-title {
+  font-size: var(--mljr-text-lg);
+  font-weight: 700;
+  color: var(--mljr-text);
+  margin: 0 0 var(--mljr-space-2);
+  line-height: 1.3;
+}
+
+.mljr-alert-dialog-description {
+  font-size: var(--mljr-text-sm);
+  color: var(--mljr-text-secondary);
+  margin: 0 0 var(--mljr-space-6);
+  line-height: 1.6;
+}
+
+.mljr-alert-dialog-body {
+  margin-bottom: var(--mljr-space-6);
+}
+
+.mljr-alert-dialog-actions {
+  display: flex;
+  gap: var(--mljr-space-3);
+  justify-content: flex-end;
+  flex-wrap: wrap;
+}
+
+/* Default variant */
+.mljr-alert-dialog[data-variant="default"] .mljr-alert-dialog-icon {
+  background: var(--mljr-primary-100);
+  color: var(--mljr-primary-600);
+}
+
+/* Danger variant */
+.mljr-alert-dialog[data-variant="danger"] .mljr-alert-dialog-icon {
+  background: var(--mljr-error-100);
+  color: var(--mljr-error-600);
+}
+
+.mljr-alert-dialog[data-variant="danger"] .mljr-alert-dialog-title {
+  color: var(--mljr-error-700);
+}
+
+/* Warning variant */
+.mljr-alert-dialog[data-variant="warning"] .mljr-alert-dialog-icon {
+  background: var(--mljr-warning-100);
+  color: var(--mljr-warning-600);
+}
+
+.mljr-alert-dialog[data-variant="warning"] .mljr-alert-dialog-title {
+  color: var(--mljr-warning-700);
+}
+
+/* Dark mode */
+.dark .mljr-alert-dialog-overlay,
+[data-theme="dark"] .mljr-alert-dialog-overlay {
+  background: rgba(0, 0, 0, 0.7);
+}
+
+.dark .mljr-alert-dialog[data-variant="default"] .mljr-alert-dialog-icon,
+[data-theme="dark"] .mljr-alert-dialog[data-variant="default"] .mljr-alert-dialog-icon {
+  background: color-mix(in srgb, var(--mljr-primary-600) 20%, transparent);
+}
+
+.dark .mljr-alert-dialog[data-variant="danger"] .mljr-alert-dialog-icon,
+[data-theme="dark"] .mljr-alert-dialog[data-variant="danger"] .mljr-alert-dialog-icon {
+  background: color-mix(in srgb, var(--mljr-error-600) 20%, transparent);
+}
+
+.dark .mljr-alert-dialog[data-variant="warning"] .mljr-alert-dialog-icon,
+[data-theme="dark"] .mljr-alert-dialog[data-variant="warning"] .mljr-alert-dialog-icon {
+  background: color-mix(in srgb, var(--mljr-warning-600) 20%, transparent);
+}

package/src/components/alert.css

@@ -33,6 +33,13 @@
   opacity: 0.9;
 }
 
+.mljr-alert-actions {
+  display: flex;
+  gap: var(--mljr-space-2);
+  margin-top: var(--mljr-space-3);
+  flex-wrap: wrap;
+}
+
 .mljr-alert-close {
   flex-shrink: 0;
   width: 1.5rem;
@@ -67,8 +74,9 @@
   border: 1px solid rgba(59, 130, 246, 0.2);
   color: var(--mljr-info-dark);
   box-shadow:
-    6px 6px 12px rgba(59, 130, 246, 0.12),
-    -4px -4px 10px rgba(255, 255, 255, 0.8);
+    6px 6px 12px rgba(59, 130, 246, 0.15),
+    inset -6px -6px 12px rgba(30, 60, 120, 0.06),
+    inset 6px 6px 12px rgba(255, 255, 255, 0.4);
 }
 
 .dark .mljr-alert-info,
@@ -78,7 +86,8 @@
   color: var(--mljr-info-light);
   box-shadow:
     6px 6px 12px rgba(0, 0, 0, 0.3),
-    -4px -4px 10px rgba(68, 64, 60, 0.1),
+    inset -6px -6px 12px rgba(0, 0, 0, 0.15),
+    inset 6px 6px 12px rgba(255, 200, 150, 0.06),
     0 0 12px rgba(59, 130, 246, 0.15);
 }
 
@@ -88,8 +97,9 @@
   border: 1px solid rgba(16, 185, 129, 0.25);
   color: var(--mljr-success-dark);
   box-shadow:
-    6px 6px 12px rgba(16, 185, 129, 0.12),
-    -4px -4px 10px rgba(255, 255, 255, 0.8);
+    6px 6px 12px rgba(16, 185, 129, 0.15),
+    inset -6px -6px 12px rgba(5, 80, 50, 0.06),
+    inset 6px 6px 12px rgba(255, 255, 255, 0.4);
 }
 
 .dark .mljr-alert-success,
@@ -99,7 +109,8 @@
   color: var(--mljr-success-light);
   box-shadow:
     6px 6px 12px rgba(0, 0, 0, 0.3),
-    -4px -4px 10px rgba(68, 64, 60, 0.1),
+    inset -6px -6px 12px rgba(0, 0, 0, 0.15),
+    inset 6px 6px 12px rgba(255, 200, 150, 0.06),
     0 0 12px rgba(16, 185, 129, 0.15);
 }
 
@@ -109,8 +120,9 @@
   border: 1px solid rgba(234, 179, 8, 0.2);
   color: var(--mljr-warning-dark);
   box-shadow:
-    6px 6px 12px rgba(234, 179, 8, 0.12),
-    -4px -4px 10px rgba(255, 255, 255, 0.8);
+    6px 6px 12px rgba(234, 179, 8, 0.15),
+    inset -6px -6px 12px rgba(120, 80, 5, 0.06),
+    inset 6px 6px 12px rgba(255, 255, 255, 0.4);
 }
 
 .dark .mljr-alert-warning,
@@ -120,7 +132,8 @@
   color: var(--mljr-warning-light);
   box-shadow:
     6px 6px 12px rgba(0, 0, 0, 0.3),
-    -4px -4px 10px rgba(68, 64, 60, 0.1),
+    inset -6px -6px 12px rgba(0, 0, 0, 0.15),
+    inset 6px 6px 12px rgba(255, 200, 150, 0.06),
     0 0 12px rgba(234, 179, 8, 0.15);
 }
 
@@ -130,8 +143,9 @@
   border: 1px solid rgba(239, 68, 68, 0.25);
   color: var(--mljr-error-dark);
   box-shadow:
-    6px 6px 12px rgba(239, 68, 68, 0.12),
-    -4px -4px 10px rgba(255, 255, 255, 0.8);
+    6px 6px 12px rgba(239, 68, 68, 0.15),
+    inset -6px -6px 12px rgba(120, 30, 30, 0.06),
+    inset 6px 6px 12px rgba(255, 255, 255, 0.4);
 }
 
 .dark .mljr-alert-error,
@@ -141,7 +155,8 @@
   color: var(--mljr-error-light);
   box-shadow:
     6px 6px 12px rgba(0, 0, 0, 0.3),
-    -4px -4px 10px rgba(68, 64, 60, 0.1),
+    inset -6px -6px 12px rgba(0, 0, 0, 0.15),
+    inset 6px 6px 12px rgba(255, 200, 150, 0.06),
     0 0 12px rgba(239, 68, 68, 0.15);
 }
 
@@ -151,8 +166,9 @@
   border: 1px solid var(--mljr-primary-200);
   color: var(--mljr-primary-700);
   box-shadow:
-    6px 6px 12px rgba(249, 115, 22, 0.15),
-    -4px -4px 10px rgba(255, 255, 255, 0.8);
+    6px 6px 12px rgba(249, 115, 22, 0.18),
+    inset -6px -6px 12px rgba(120, 50, 10, 0.06),
+    inset 6px 6px 12px rgba(255, 255, 255, 0.4);
 }
 
 .dark .mljr-alert-primary,
@@ -162,29 +178,32 @@
   color: var(--mljr-primary-300);
   box-shadow:
     6px 6px 12px rgba(0, 0, 0, 0.3),
-    -4px -4px 10px rgba(68, 64, 60, 0.1),
+    inset -6px -6px 12px rgba(0, 0, 0, 0.15),
+    inset 6px 6px 12px rgba(255, 200, 150, 0.06),
     0 0 12px rgba(249, 115, 22, 0.15);
 }
 
-/* Secondary Alert (Teal) */
+/* Secondary Alert (Purple) */
 .mljr-alert-secondary {
   background-color: var(--mljr-secondary-50);
   border: 1px solid var(--mljr-secondary-200);
   color: var(--mljr-secondary-700);
   box-shadow:
-    6px 6px 12px rgba(20, 184, 166, 0.15),
-    -4px -4px 10px rgba(255, 255, 255, 0.8);
+    6px 6px 12px rgba(168, 85, 247, 0.15),
+    inset -6px -6px 12px rgba(80, 30, 140, 0.06),
+    inset 6px 6px 12px rgba(255, 255, 255, 0.4);
 }
 
 .dark .mljr-alert-secondary,
 [data-theme="dark"] .mljr-alert-secondary {
-  background-color: rgba(20, 184, 166, 0.15);
-  border-color: rgba(20, 184, 166, 0.35);
+  background-color: rgba(168, 85, 247, 0.15);
+  border-color: rgba(168, 85, 247, 0.35);
   color: var(--mljr-secondary-300);
   box-shadow:
     6px 6px 12px rgba(0, 0, 0, 0.3),
-    -4px -4px 10px rgba(68, 64, 60, 0.1),
-    0 0 12px rgba(20, 184, 166, 0.15);
+    inset -6px -6px 12px rgba(0, 0, 0, 0.15),
+    inset 6px 6px 12px rgba(255, 200, 150, 0.06),
+    0 0 12px rgba(168, 85, 247, 0.15);
 }
 
 /* Solid Variants */

package/src/components/animated-headline.css

@@ -0,0 +1,118 @@
+/* =====================================================
+   AnimatedHeadline - Rotating/animated text component
+   ===================================================== */
+
+.mljr-animated-headline {
+  display: inline;
+}
+
+.mljr-animated-word-wrapper {
+  display: inline-block;
+  position: relative;
+  overflow: hidden;
+  vertical-align: bottom;
+  white-space: nowrap;
+}
+
+/* Typing cursor */
+.mljr-animated-cursor {
+  display: inline-block;
+  width: 2px;
+  height: 1em;
+  background: currentColor;
+  margin-left: 1px;
+  vertical-align: text-bottom;
+  animation: mljr-cursor-blink 0.75s step-end infinite;
+}
+
+/* Fade animation */
+.mljr-animated-word-fade {
+  display: inline-block;
+  animation: mljr-word-fade-in 0.5s ease forwards;
+}
+
+.mljr-animated-word-fade-out {
+  animation: mljr-word-fade-out 0.5s ease forwards;
+}
+
+/* Slide animation */
+.mljr-animated-word-slide {
+  display: inline-block;
+  animation: mljr-word-slide-in 0.4s cubic-bezier(0.22, 1, 0.36, 1) forwards;
+}
+
+.mljr-animated-word-slide-out {
+  animation: mljr-word-slide-out 0.3s cubic-bezier(0.64, 0, 0.78, 0) forwards;
+}
+
+/* Flip animation */
+.mljr-animated-word-flip {
+  display: inline-block;
+  transform-origin: bottom center;
+  animation: mljr-word-flip-in 0.5s ease forwards;
+}
+
+.mljr-animated-word-flip-out {
+  animation: mljr-word-flip-out 0.4s ease forwards;
+}
+
+/* Highlight variant */
+.mljr-animated-highlight {
+  position: relative;
+  display: inline-block;
+  color: white;
+  padding: 0 0.25em;
+  z-index: 0;
+}
+
+.mljr-animated-highlight::before {
+  content: '';
+  position: absolute;
+  inset: 0;
+  background: var(--mljr-gradient-primary);
+  border-radius: var(--mljr-radius-sm);
+  z-index: -1;
+  transform-origin: left center;
+  animation: mljr-highlight-expand 0.4s ease forwards;
+}
+
+/* Keyframes */
+@keyframes mljr-cursor-blink {
+  0%, 100% { opacity: 1; }
+  50% { opacity: 0; }
+}
+
+@keyframes mljr-word-fade-in {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}
+
+@keyframes mljr-word-fade-out {
+  from { opacity: 1; }
+  to { opacity: 0; }
+}
+
+@keyframes mljr-word-slide-in {
+  from { transform: translateY(100%); opacity: 0; }
+  to { transform: translateY(0); opacity: 1; }
+}
+
+@keyframes mljr-word-slide-out {
+  from { transform: translateY(0); opacity: 1; }
+  to { transform: translateY(-100%); opacity: 0; }
+}
+
+@keyframes mljr-word-flip-in {
+  from { transform: rotateX(-90deg); opacity: 0; }
+  to { transform: rotateX(0deg); opacity: 1; }
+}
+
+@keyframes mljr-word-flip-out {
+  from { transform: rotateX(0deg); opacity: 1; }
+  to { transform: rotateX(90deg); opacity: 0; }
+}
+
+@keyframes mljr-highlight-expand {
+  from { transform: scaleX(0); }
+  to { transform: scaleX(1); }
+}

package/src/components/audio-visualizer.css

@@ -0,0 +1,96 @@
+/* ============================================
+   AudioVisualizer - Web Audio API canvas viz
+   ============================================ */
+
+.mljr-audio-viz {
+  display: flex;
+  flex-direction: column;
+  gap: var(--mljr-space-3);
+}
+
+.mljr-audio-viz-canvas-wrap {
+  position: relative;
+  border-radius: var(--mljr-radius-md);
+  overflow: hidden;
+  background: var(--mljr-surface-2);
+  border: 1px solid var(--mljr-border);
+}
+
+.mljr-audio-viz canvas {
+  display: block;
+  width: 100%;
+}
+
+/* Idle/stopped overlay */
+.mljr-audio-viz-idle {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+  gap: 0.5rem;
+  color: var(--mljr-text-muted);
+  font-size: 0.875rem;
+  pointer-events: none;
+}
+
+.mljr-audio-viz-idle svg {
+  opacity: 0.35;
+}
+
+/* Controls row */
+.mljr-audio-viz-controls {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  flex-wrap: wrap;
+}
+
+/* Permission error */
+.mljr-audio-viz-error {
+  padding: 0.625rem 0.875rem;
+  background: rgba(220, 38, 38, 0.08);
+  border: 1px solid rgba(220, 38, 38, 0.25);
+  border-radius: var(--mljr-radius-sm);
+  color: #dc2626;
+  font-size: 0.8125rem;
+}
+
+.dark .mljr-audio-viz-error {
+  color: #f87171;
+  background: rgba(220, 38, 38, 0.12);
+}
+
+/* Type selector pills */
+.mljr-audio-viz-types {
+  display: flex;
+  gap: 0.25rem;
+  background: var(--mljr-surface-2);
+  border: 1px solid var(--mljr-border);
+  border-radius: var(--mljr-radius-full);
+  padding: 3px;
+}
+
+.mljr-audio-viz-type-btn {
+  padding: 0.2rem 0.75rem;
+  border-radius: var(--mljr-radius-full);
+  font-size: 0.8rem;
+  cursor: pointer;
+  border: none;
+  background: transparent;
+  color: var(--mljr-text-muted);
+  transition: background 150ms, color 150ms;
+  white-space: nowrap;
+}
+
+.mljr-audio-viz-type-btn:hover {
+  background: var(--mljr-surface-3, var(--mljr-surface));
+  color: var(--mljr-text);
+}
+
+.mljr-audio-viz-type-btn-active {
+  background: var(--mljr-primary-500);
+  color: #fff;
+  font-weight: 600;
+}

package/src/components/autocomplete.css

@@ -0,0 +1,143 @@
+/* =====================================================
+   AutoComplete - Searchable dropdown with suggestions
+   ===================================================== */
+
+.mljr-autocomplete {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+}
+
+.mljr-autocomplete-input-wrapper {
+  position: relative;
+  display: flex;
+  align-items: center;
+}
+
+.mljr-autocomplete-clear {
+  position: absolute;
+  right: 0.75rem;
+  top: 50%;
+  transform: translateY(-50%);
+  background: none;
+  border: none;
+  cursor: pointer;
+  color: var(--mljr-text-muted);
+  display: flex;
+  align-items: center;
+  padding: 0;
+  transition: color var(--mljr-transition-fast);
+}
+
+.mljr-autocomplete-clear:hover {
+  color: var(--mljr-text);
+}
+
+/* Dropdown */
+.mljr-autocomplete-dropdown {
+  position: absolute;
+  top: calc(100% + 0.375rem);
+  left: 0;
+  right: 0;
+  z-index: 50;
+  background: var(--mljr-bg);
+  border: 1px solid var(--mljr-border);
+  border-radius: var(--mljr-radius-md);
+  box-shadow: var(--mljr-clay-shadow);
+  overflow: hidden;
+  max-height: 260px;
+  overflow-y: auto;
+}
+
+.mljr-autocomplete-option {
+  display: flex;
+  align-items: center;
+  gap: 0.625rem;
+  padding: 0.625rem 0.875rem;
+  cursor: pointer;
+  font-size: var(--mljr-text-sm);
+  transition: background var(--mljr-transition-fast);
+  color: var(--mljr-text);
+  border: none;
+  background: none;
+  width: 100%;
+  text-align: left;
+}
+
+.mljr-autocomplete-option:hover,
+.mljr-autocomplete-option-highlighted {
+  background: var(--mljr-primary-50);
+  color: var(--mljr-primary-700);
+}
+
+.mljr-autocomplete-option-selected {
+  background: var(--mljr-primary-50);
+  color: var(--mljr-primary-600);
+  font-weight: 500;
+}
+
+.mljr-autocomplete-option-selected:hover,
+.mljr-autocomplete-option-selected.mljr-autocomplete-option-highlighted {
+  background: var(--mljr-primary-100);
+}
+
+.mljr-autocomplete-option-checkmark {
+  margin-left: auto;
+  color: var(--mljr-primary-500);
+  flex-shrink: 0;
+}
+
+.mljr-autocomplete-no-results {
+  padding: 1rem 0.875rem;
+  font-size: var(--mljr-text-sm);
+  color: var(--mljr-text-muted);
+  text-align: center;
+}
+
+.mljr-autocomplete-highlight {
+  background: var(--mljr-primary-100);
+  color: var(--mljr-primary-700);
+  border-radius: 2px;
+  font-weight: 600;
+}
+
+/* Selected chips (multiple mode) */
+.mljr-autocomplete-chips {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.375rem;
+  margin-bottom: 0.375rem;
+}
+
+/* Group header */
+.mljr-autocomplete-group-header {
+  padding: 0.375rem 0.875rem;
+  font-size: var(--mljr-text-xs);
+  font-weight: 600;
+  color: var(--mljr-text-muted);
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  background: var(--mljr-bg-secondary);
+}
+
+/* Dark mode */
+.dark .mljr-autocomplete-dropdown,
+[data-theme="dark"] .mljr-autocomplete-dropdown {
+  background: var(--mljr-bg);
+  border-color: var(--mljr-border);
+  box-shadow: var(--mljr-clay-shadow);
+}
+
+.dark .mljr-autocomplete-option:hover,
+.dark .mljr-autocomplete-option-highlighted,
+[data-theme="dark"] .mljr-autocomplete-option:hover,
+[data-theme="dark"] .mljr-autocomplete-option-highlighted {
+  background: color-mix(in srgb, var(--mljr-primary-500) 15%, transparent);
+}
+
+.dark .mljr-autocomplete-highlight,
+[data-theme="dark"] .mljr-autocomplete-highlight {
+  background: color-mix(in srgb, var(--mljr-primary-500) 20%, transparent);
+  color: var(--mljr-primary-300);
+}