juxscript 1.0.57 → 1.0.60

package/presets/default/layout.css

@@ -1,6 +1,6 @@
 /**
  * Default Preset - Grid Layout System
- * Minimal, clean layout with proper spacing
+ * Comprehensive component styling
  */
 
 /* ============================================
@@ -29,18 +29,24 @@
   --color-surface-base: #f7f7f7;
   --color-surface-elevated: #ffffff;
   --color-surface-hover: #f1f1f1;
+  --color-surface-active: #e8e8e8;
   
   --color-border: #e8e8e8;
   --color-border-hover: #d1d1d1;
   
+  --color-brand: #0ea5e9;
+  --color-brand-hover: #0284c7;
+  
   /* Borders & Radius */
   --border-width: 1px;
   --radius-sm: 3px;
   --radius-md: 6px;
   --radius-lg: 8px;
+  --radius-full: 9999px;
   
   /* Transitions */
   --transition-base: 150ms ease;
+  --transition-fast: 100ms ease;
 }
 
 /* ============================================
@@ -57,6 +63,8 @@ body {
   color: var(--color-text-primary);
   background: var(--color-background);
   -webkit-font-smoothing: antialiased;
+  font-size: 14px;
+  line-height: 1.5;
 }
 
 /* ============================================
@@ -105,9 +113,8 @@ body {
   cursor: pointer;
 }
 
-/* ✅ Fix h1 inside logo - reset default heading styles */
 #appheader-logo h1 {
-  font-size: 1.25rem;
+  font-size: 1.125rem;
   font-weight: 700;
   margin: 0;
   line-height: 1;
@@ -136,6 +143,7 @@ body {
   background: var(--color-surface-base);
   border-right: var(--border-width) solid var(--color-border);
   overflow-y: auto;
+  padding: var(--space-lg);
 }
 
 /* ============================================
@@ -149,7 +157,7 @@ body {
 }
 
 #appmain-content {
-  max-width: 800px;
+  max-width: 900px;
   margin: 0 auto;
   padding: var(--space-3xl) var(--space-2xl);
 }
@@ -162,7 +170,7 @@ body {
   background: var(--color-surface-elevated);
   border-top: var(--border-width) solid var(--color-border);
   padding: var(--space-md) var(--space-2xl);
-  font-size: 0.875rem;
+  font-size: 0.8125rem;
   color: var(--color-text-tertiary);
   min-height: 40px;
   display: flex;
@@ -176,141 +184,268 @@ body {
 }
 
 /* ============================================
-   RIGHT SIDEBAR (Optional)
+   TYPOGRAPHY
    ============================================ */
-#appsidebar {
-  grid-area: aside;
-  width: 280px;
-  background: var(--color-surface-base);
-  border-left: var(--border-width) solid var(--color-border);
-  display: none;
+h1, h2, h3, h4, h5, h6 {
+  font-weight: 600;
+  line-height: 1.3;
+  color: var(--color-text-primary);
+  margin: 0;
 }
 
-#appsidebar.show {
-  display: block;
+h1 { font-size: 2rem; }
+h2 { font-size: 1.5rem; }
+h3 { font-size: 1.125rem; margin-bottom: var(--space-md); }
+h4 { font-size: 1rem; }
+h5 { font-size: 0.875rem; }
+h6 { font-size: 0.75rem; }
+
+p {
+  line-height: 1.6;
+  color: var(--color-text-secondary);
+  margin: 0;
 }
 
-#appsidebar-header {
-  padding: var(--space-lg);
-  border-bottom: var(--border-width) solid var(--color-border);
-  font-size: 0.75rem;
+/* ============================================
+   HEADINGS
+   ============================================ */
+.jux-heading {
   font-weight: 600;
-  color: var(--color-text-tertiary);
-  text-transform: uppercase;
+  line-height: 1.3;
+  color: var(--color-text-primary);
+  margin: 0 0 var(--space-md) 0;
 }
 
-#appsidebar-content {
-  padding: var(--space-lg);
-  overflow-y: auto;
+.jux-heading-1 { font-size: 2rem; }
+.jux-heading-2 { font-size: 1.5rem; }
+.jux-heading-3 { font-size: 1.125rem; font-weight: 700; }
+.jux-heading-4 { font-size: 1rem; }
+.jux-heading-5 { font-size: 0.875rem; }
+.jux-heading-6 { font-size: 0.75rem; }
+
+/* ============================================
+   HERO COMPONENT
+   ============================================ */
+.jux-hero {
+  padding: var(--space-3xl) 0;
+  margin-bottom: var(--space-2xl);
 }
 
-#appsidebar-footer {
-  padding: var(--space-lg);
-  border-top: var(--border-width) solid var(--color-border);
-  font-size: 0.75rem;
-  color: var(--color-text-tertiary);
+.jux-hero-centered {
+  text-align: center;
 }
 
-/* ============================================
-   SCROLLBARS
-   ============================================ */
-#appmain::-webkit-scrollbar,
-#appaside::-webkit-scrollbar,
-#appsidebar-content::-webkit-scrollbar {
-  width: 6px;
+.jux-hero-content {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-lg);
 }
 
-#appmain::-webkit-scrollbar-track,
-#appaside::-webkit-scrollbar-track,
-#appsidebar-content::-webkit-scrollbar-track {
-  background: transparent;
+.jux-hero-centered .jux-hero-content {
+  align-items: center;
 }
 
-#appmain::-webkit-scrollbar-thumb,
-#appaside::-webkit-scrollbar-thumb,
-#appsidebar-content::-webkit-scrollbar-thumb {
-  background: var(--color-border);
-  border-radius: 3px;
+.jux-hero-title {
+  font-size: 2.5rem;
+  font-weight: 700;
+  line-height: 1.2;
+  margin: 0;
+  letter-spacing: -0.02em;
+  color: var(--color-text-primary);
 }
 
-#appmain::-webkit-scrollbar-thumb:hover,
-#appaside::-webkit-scrollbar-thumb:hover,
-#appsidebar-content::-webkit-scrollbar-thumb:hover {
-  background: var(--color-border-hover);
+.jux-hero-subtitle {
+  font-size: 1.25rem;
+  line-height: 1.6;
+  color: var(--color-text-secondary);
+  margin: 0;
+}
+
+.jux-hero-body {
+  font-size: 1rem;
+  line-height: 1.6;
+  color: var(--color-text-secondary);
+  max-width: 600px;
+}
+
+.jux-hero-cta {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: var(--space-md) var(--space-2xl);
+  font-size: 1rem;
+  font-weight: 600;
+  color: white;
+  background: var(--color-brand);
+  border-radius: var(--radius-md);
+  text-decoration: none;
+  transition: background-color var(--transition-base);
+}
+
+.jux-hero-cta:hover {
+  background: var(--color-brand-hover);
 }
 
 /* ============================================
-   RESPONSIVE
+   ALERT COMPONENT
    ============================================ */
-@media (max-width: 768px) {
-  #app {
-    grid-template-columns: 1fr;
-    grid-template-areas:
-      "header"
-      "main"
-      "footer";
-  }
-  
-  #appaside {
-    display: none;
-  }
-  
-  #appheader {
-    padding: 0 var(--space-lg);
-  }
-  
-  #appmain-content {
-    padding: var(--space-2xl) var(--space-lg);
+.jux-alert {
+  display: flex;
+  align-items: flex-start;
+  gap: var(--space-md);
+  padding: var(--space-lg);
+  border-radius: var(--radius-lg);
+  margin-bottom: var(--space-lg);
+  position: relative;
+  animation: slideIn 0.3s ease-out;
+}
+
+@keyframes slideIn {
+  from {
+    opacity: 0;
+    transform: translateY(-10px);
   }
-  
-  #appfooter {
-    padding: var(--space-md) var(--space-lg);
+  to {
+    opacity: 1;
+    transform: translateY(0);
   }
 }
 
+.jux-alert-info {
+  background: #dbeafe;
+  border-left: 4px solid #3b82f6;
+  color: #1e40af;
+}
+
+.jux-alert-success {
+  background: #d1fae5;
+  border-left: 4px solid #10b981;
+  color: #065f46;
+}
+
+.jux-alert-warning {
+  background: #fef3c7;
+  border-left: 4px solid #f59e0b;
+  color: #92400e;
+}
+
+.jux-alert-error {
+  background: #fee2e2;
+  border-left: 4px solid #ef4444;
+  color: #991b1b;
+}
+
+.jux-alert-content {
+  flex: 1;
+  font-size: 0.875rem;
+  line-height: 1.5;
+}
+
+.jux-alert-close {
+  flex-shrink: 0;
+  background: transparent;
+  border: none;
+  font-size: 1.25rem;
+  cursor: pointer;
+  opacity: 0.5;
+  transition: opacity var(--transition-base);
+  padding: 0;
+  width: 20px;
+  height: 20px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: inherit;
+}
+
+.jux-alert-close:hover {
+  opacity: 1;
+}
+
 /* ============================================
-   COMPONENT STYLES
+   BADGE COMPONENT
    ============================================ */
+.jux-badge {
+  display: inline-flex;
+  align-items: center;
+  padding: var(--space-xs) var(--space-md);
+  font-size: 0.75rem;
+  font-weight: 600;
+  line-height: 1;
+  text-align: center;
+  white-space: nowrap;
+  border-radius: var(--radius-sm);
+  transition: all var(--transition-base);
+}
+
+.jux-badge-default {
+  color: #374151;
+  background-color: #e5e7eb;
+}
+
+.jux-badge-success {
+  color: #065f46;
+  background-color: #d1fae5;
+}
+
+.jux-badge-warning {
+  color: #92400e;
+  background-color: #fef3c7;
+}
+
+.jux-badge-error {
+  color: #991b1b;
+  background-color: #fee2e2;
+}
 
-/* Buttons */
+.jux-badge-info {
+  color: #1e40af;
+  background-color: #dbeafe;
+}
+
+/* ============================================
+   BUTTON COMPONENT
+   ============================================ */
 .jux-button {
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  padding: 0 var(--space-lg);
+  padding: 0 var(--space-xl);
   height: 36px;
   font-size: 0.875rem;
   font-weight: 500;
   font-family: var(--font-family-base);
-  color: #ffffff;
-  background: #0ea5e9;
+  color: white;
+  background: var(--color-brand);
   border: none;
   border-radius: var(--radius-md);
   cursor: pointer;
-  transition: background-color var(--transition-base), transform 100ms ease;
+  transition: background-color var(--transition-base), transform var(--transition-fast);
   user-select: none;
   white-space: nowrap;
 }
 
 .jux-button:hover {
-  background: #0284c7;
+  background: var(--color-brand-hover);
 }
 
 .jux-button:active {
   transform: scale(0.98);
 }
 
-.jux-button:focus {
-  outline: 2px solid #0ea5e9;
-  outline-offset: 2px;
-}
-
 .jux-button:disabled {
   opacity: 0.5;
   cursor: not-allowed;
 }
 
-/* Button variants */
+.jux-button-primary {
+  background: var(--color-brand);
+}
+
+.jux-button-primary:hover {
+  background: var(--color-brand-hover);
+}
+
 .jux-button-secondary {
   background: var(--color-surface-hover);
   color: var(--color-text-primary);
@@ -319,1114 +454,1159 @@ body {
 
 .jux-button-secondary:hover {
   background: var(--color-surface-active);
-  border-color: var(--color-border-hover);
-}
-
-.jux-button-ghost {
-  background: transparent;
-  color: var(--color-text-secondary);
-}
-
-.jux-button-ghost:hover {
-  background: var(--color-surface-hover);
 }
 
-/* Button sizes */
 .jux-button-small {
   height: 28px;
   padding: 0 var(--space-md);
   font-size: 0.8125rem;
 }
 
+.jux-button-medium {
+  height: 36px;
+}
+
 .jux-button-large {
   height: 44px;
   padding: 0 var(--space-2xl);
   font-size: 1rem;
 }
 
-/* Code blocks */
-.jux-code {
-  background: var(--color-surface-base);
+/* ============================================
+   CARD COMPONENT
+   ============================================ */
+.jux-card {
+  background: var(--color-surface-elevated);
   border: var(--border-width) solid var(--color-border);
   border-radius: var(--radius-lg);
-  padding: var(--space-lg);
-  font-family: var(--font-family-mono);
-  font-size: 0.8125rem;
-  line-height: 1.6;
-  overflow-x: auto;
-  margin: var(--space-xl) 0;
+  overflow: hidden;
+  margin-bottom: var(--space-lg);
 }
 
-/* Hero */
-.jux-hero {
-  margin-bottom: var(--space-3xl);
+.jux-card-default {
+  /* Base card styles */
 }
 
-.jux-hero h1 {
-  font-size: 2.5rem;
-  font-weight: 700;
-  line-height: 1.2;
-  margin-bottom: var(--space-md);
-  letter-spacing: -0.02em;
+.jux-card-header {
+  padding: var(--space-lg) var(--space-xl);
+  border-bottom: var(--border-width) solid var(--color-border);
+  background: var(--color-surface-base);
 }
 
-.jux-hero p {
+.jux-card-title {
   font-size: 1.125rem;
-  color: var(--color-text-secondary);
-  line-height: 1.6;
-}
-
-/* Dividers */
-.jux-divider {
-  height: 1px;
-  background: var(--color-border);
-  border: none;
-  margin: var(--space-2xl) 0;
-}
-
-/* Headings */
-h1, h2, h3, h4, h5, h6 {
   font-weight: 600;
-  line-height: 1.3;
   color: var(--color-text-primary);
+  margin: 0;
 }
 
-h1 { font-size: 2rem; margin: var(--space-2xl) 0 var(--space-lg) 0; }
-h2 { font-size: 1.5rem; margin: var(--space-2xl) 0 var(--space-md) 0; }
-h3 { font-size: 1.25rem; margin: var(--space-xl) 0 var(--space-md) 0; }
-
-/* Paragraphs */
-p {
-  line-height: 1.6;
+.jux-card-body {
+  padding: var(--space-xl);
   color: var(--color-text-secondary);
-  margin-bottom: var(--space-lg);
-}
-
-/* Lists */
-ul, ol {
-  padding-left: var(--space-2xl);
-  margin-bottom: var(--space-xl);
+  line-height: 1.6;
 }
 
-li {
-  line-height: 1.6;
-  color: var(--color-text-secondary);
-  margin-bottom: var(--space-sm);
+.jux-card-footer {
+  padding: var(--space-lg) var(--space-xl);
+  border-top: var(--border-width) solid var(--color-border);
+  background: var(--color-surface-base);
+  font-size: 0.875rem;
+  color: var(--color-text-tertiary);
 }
 
 /* ============================================
-   COMPONENT STYLES (Extracted from TypeScript)
+   CHECKBOX COMPONENT
    ============================================ */
-
-/* Alert Component */
-.jux-alert {
-    display: flex;
-    align-items: center;
-    gap: var(--space-md);
-    padding: var(--space-lg);
-    border-radius: var(--radius-lg);
-    margin-bottom: var(--space-md);
-    position: relative;
-    animation: slideIn 0.3s ease-out;
+.jux-checkbox {
+  margin-bottom: var(--space-md);
 }
 
-@keyframes slideIn {
-    from {
-        opacity: 0;
-        transform: translateX(-20px);
-    }
-    to {
-        opacity: 1;
-        transform: translateX(0);
-    }
+.jux-checkbox-container {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--space-md);
+  cursor: pointer;
+  user-select: none;
 }
 
-.jux-alert-info {
-    background: #dbeafe;
-    border-left: 4px solid #3b82f6;
-    color: #1e40af;
+.jux-checkbox-input {
+  position: absolute;
+  opacity: 0;
+  width: 0;
+  height: 0;
 }
 
-.jux-alert-success {
-    background: #d1fae5;
-    border-left: 4px solid #10b981;
-    color: #065f46;
+.jux-checkbox-checkmark {
+  width: 20px;
+  height: 20px;
+  border: 2px solid var(--color-border);
+  border-radius: var(--radius-sm);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: all var(--transition-base);
+  background: var(--color-surface-elevated);
 }
 
-.jux-alert-warning {
-    background: #fef3c7;
-    border-left: 4px solid #f59e0b;
-    color: #92400e;
+.jux-checkbox-input:checked + .jux-checkbox-checkmark {
+  background: var(--color-brand);
+  border-color: var(--color-brand);
 }
 
-.jux-alert-error {
-    background: #fee2e2;
-    border-left: 4px solid #ef4444;
-    color: #991b1b;
+.jux-checkbox-checkmark svg {
+  width: 14px;
+  height: 14px;
+  fill: none;
+  stroke: white;
+  stroke-width: 2;
+  opacity: 0;
+  transition: opacity var(--transition-base);
 }
 
-.jux-alert-icon {
-    flex-shrink: 0;
+.jux-checkbox-input:checked + .jux-checkbox-checkmark svg {
+  opacity: 1;
 }
 
-.jux-alert-content {
-    flex: 1;
-    font-size: 14px;
-}
-
-.jux-alert-close {
-    flex-shrink: 0;
-    background: transparent;
-    border: none;
-    font-size: 24px;
-    cursor: pointer;
-    opacity: 0.6;
-    transition: opacity 0.2s;
-    padding: 0;
-    width: 24px;
-    height: 24px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-}
-
-.jux-alert-close:hover {
-    opacity: 1;
-}
-
-/* Badge Component */
-.jux-badge {
-    display: inline-block;
-    padding: var(--space-xs) var(--space-md);
-    font-size: 0.75rem;
-    font-weight: 600;
-    line-height: 1;
-    text-align: center;
-    white-space: nowrap;
-    vertical-align: baseline;
-    border-radius: var(--radius-sm);
-    transition: all var(--transition-base);
-}
-
-.jux-badge-pill {
-    border-radius: 10rem;
-}
-
-.jux-badge-default {
-    color: #374151;
-    background-color: #e5e7eb;
-}
-
-.jux-badge-success {
-    color: #065f46;
-    background-color: #d1fae5;
-}
-
-.jux-badge-warning {
-    color: #92400e;
-    background-color: #fef3c7;
+.jux-checkbox-label-text {
+  font-size: 0.875rem;
+  color: var(--color-text-primary);
 }
 
-.jux-badge-error {
-    color: #991b1b;
-    background-color: #fee2e2;
+.jux-input-error {
+  color: #ef4444;
+  font-size: 0.75rem;
+  margin-top: var(--space-xs);
 }
 
-.jux-badge-info {
-    color: #1e40af;
-    background-color: #dbeafe;
+/* ============================================
+   CODE COMPONENT
+   ============================================ */
+.jux-code {
+  background: #1e1e1e;
+  border: var(--border-width) solid #2d2d2d;
+  border-radius: var(--radius-lg);
+  padding: var(--space-lg);
+  margin: var(--space-xl) 0;
+  overflow-x: auto;
 }
 
-/* Button Component - Add missing variants */
-.jux-button-danger {
-    background: #ef4444;
-    color: white;
+.jux-code pre {
+  margin: 0;
+  font-family: var(--font-family-mono);
+  font-size: 0.8125rem;
+  line-height: 1.6;
 }
 
-.jux-button-danger:hover {
-    background: #dc2626;
+.jux-code code {
+  color: #d4d4d4;
+  font-family: inherit;
 }
 
-.jux-button-link {
-    background: transparent;
-    color: #3b82f6;
-    text-decoration: underline;
+/* ============================================
+   CONTAINER COMPONENT
+   ============================================ */
+.jux-container {
+  display: block;
 }
 
-.jux-button-link:hover {
-    color: #2563eb;
+/* ============================================
+   DATEPICKER COMPONENT
+   ============================================ */
+.jux-datepicker {
+  position: relative;
 }
 
-.jux-button-reset,
-.jux-button-submit {
-    /* Use default button styles */
+.jux-datepicker-container {
+  position: relative;
 }
 
-/* Card Component - Add missing classes */
-.jux-card-icon {
-    flex-shrink: 0;
-    margin-right: var(--space-md);
+.jux-datepicker-input {
+  padding-left: var(--space-3xl);
 }
 
-.jux-card-hoverable {
-    transition: box-shadow var(--transition-base), transform var(--transition-base);
+/* ============================================
+   DIVIDER COMPONENT
+   ============================================ */
+.jux-divider {
+  border: none;
+  margin: var(--space-2xl) 0;
 }
 
-.jux-card-hoverable:hover {
-    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
-    transform: translateY(-2px);
+.jux-divider-default {
+  border-top: var(--border-width) solid var(--color-border);
 }
 
-/* Checkbox Component - Add container class */
-.jux-checkbox-container {
-    display: flex;
-    flex-direction: column;
-    gap: var(--space-sm);
+/* ============================================
+   DROPDOWN COMPONENT
+   ============================================ */
+.jux-dropdown {
+  position: relative;
+  display: inline-block;
 }
 
-.jux-checkbox-checkmark {
-    /* Alias for jux-checkbox-mark */
+.jux-dropdown-trigger {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--space-sm);
+  padding: var(--space-sm) var(--space-lg);
+  background: var(--color-surface-elevated);
+  border: var(--border-width) solid var(--color-border);
+  border-radius: var(--radius-md);
+  cursor: pointer;
+  font-size: 0.875rem;
+  color: var(--color-text-primary);
+  transition: background-color var(--transition-base);
 }
 
-/* Datepicker Component - Add missing classes */
-.jux-datepicker-calendar {
-    position: absolute;
-    top: 100%;
-    left: 0;
-    margin-top: var(--space-xs);
-    background: var(--color-surface-elevated);
-    border: var(--border-width) solid var(--color-border);
-    border-radius: var(--radius-lg);
-    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
-    padding: var(--space-lg);
-    z-index: 1000;
+.jux-dropdown-trigger:hover {
+  background: var(--color-surface-hover);
 }
 
-.jux-datepicker-header {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    margin-bottom: var(--space-md);
+.jux-dropdown-menu {
+  position: absolute;
+  top: 100%;
+  margin-top: var(--space-xs);
+  background: var(--color-surface-elevated);
+  border: var(--border-width) solid var(--color-border);
+  border-radius: var(--radius-md);
+  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
+  min-width: 200px;
+  z-index: 1000;
+  display: none;
 }
 
-.jux-datepicker-nav {
-    background: transparent;
-    border: none;
-    cursor: pointer;
-    font-size: 1.125rem;
-    padding: var(--space-xs) var(--space-sm);
-    color: var(--color-text-secondary);
-    transition: color var(--transition-base);
+.jux-dropdown-menu.show {
+  display: block;
 }
 
-.jux-datepicker-nav:hover {
-    color: var(--color-text-primary);
+.jux-dropdown-bottom-left {
+  left: 0;
 }
 
-.jux-datepicker-month {
-    font-weight: 600;
-    font-size: 0.875rem;
-    color: var(--color-text-primary);
+.jux-dropdown-item {
+  width: 100%;
+  padding: var(--space-md) var(--space-lg);
+  background: transparent;
+  border: none;
+  text-align: left;
+  cursor: pointer;
+  font-size: 0.875rem;
+  color: var(--color-text-primary);
+  transition: background-color var(--transition-base);
+  display: flex;
+  align-items: center;
+  gap: var(--space-md);
 }
 
-.jux-datepicker-grid {
-    display: grid;
-    grid-template-columns: repeat(7, 1fr);
-    gap: var(--space-xs);
+.jux-dropdown-item:hover {
+  background: var(--color-surface-hover);
 }
 
-.jux-datepicker-day {
-    padding: var(--space-sm);
-    text-align: center;
-    cursor: pointer;
-    border-radius: var(--radius-sm);
-    font-size: 0.875rem;
-    transition: background-color var(--transition-base);
+/* ============================================
+   INPUT COMPONENT
+   ============================================ */
+.jux-input {
+  margin-bottom: var(--space-lg);
 }
 
-.jux-datepicker-day:hover {
-    background-color: var(--color-surface-hover);
+.jux-input-label {
+  display: block;
+  font-size: 0.875rem;
+  font-weight: 500;
+  color: var(--color-text-primary);
+  margin-bottom: var(--space-sm);
 }
 
-.jux-datepicker-day-selected {
-    background-color: #3b82f6;
-    color: white;
+.jux-input-container {
+  position: relative;
+  display: flex;
+  align-items: center;
 }
 
-.jux-datepicker-day-disabled {
-    color: var(--color-text-tertiary);
-    cursor: not-allowed;
-    opacity: 0.5;
+.jux-input-icon {
+  position: absolute;
+  left: var(--space-md);
+  color: var(--color-text-tertiary);
+  display: flex;
+  align-items: center;
+  pointer-events: none;
 }
 
-/* Dialog Component - Add missing variant classes */
-.jux-dialog-default {
-    /* Uses base dialog styles */
+.jux-input-icon svg {
+  width: 18px;
+  height: 18px;
 }
 
-.jux-dialog-warning {
-    border-top: 4px solid #f59e0b;
+.jux-input-element {
+  width: 100%;
+  padding: var(--space-md);
+  font-size: 0.875rem;
+  color: var(--color-text-primary);
+  background: var(--color-surface-elevated);
+  border: var(--border-width) solid var(--color-border);
+  border-radius: var(--radius-md);
+  transition: border-color var(--transition-base), box-shadow var(--transition-base);
+  font-family: var(--font-family-base);
 }
 
-.jux-dialog-danger {
-    border-top: 4px solid #ef4444;
+.jux-input-element:focus {
+  outline: none;
+  border-color: var(--color-brand);
+  box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.1);
 }
 
-.jux-dialog-button-cancel {
-    background: var(--color-surface-hover);
-    color: var(--color-text-primary);
-    border: var(--border-width) solid var(--color-border);
+/* ============================================
+   FILE UPLOAD COMPONENT
+   ============================================ */
+.jux-fileupload {
+  margin-bottom: var(--space-lg);
 }
 
-/* Divider Component - Add variants */
-.jux-divider-default {
-    border-top: var(--border-width) solid var(--color-border);
+.jux-fileupload-input {
+  display: none;
 }
 
-.jux-divider-dashed {
-    border-top: var(--border-width) dashed var(--color-border);
+.jux-fileupload-button-container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: var(--space-md);
+  padding: var(--space-3xl);
+  border: 2px dashed var(--color-border);
+  border-radius: var(--radius-lg);
+  cursor: pointer;
+  transition: border-color var(--transition-base), background-color var(--transition-base);
 }
 
-.jux-divider-dotted {
-    border-top: var(--border-width) dotted var(--color-border);
+.jux-fileupload-button-container:hover {
+  border-color: var(--color-brand);
+  background: var(--color-surface-base);
 }
 
-.jux-divider-text {
-    display: flex;
-    align-items: center;
-    text-align: center;
-    margin: var(--space-2xl) 0;
-    color: var(--color-text-secondary);
-    font-size: 0.875rem;
+.jux-fileupload-icon svg {
+  width: 48px;
+  height: 48px;
+  color: var(--color-text-tertiary);
 }
 
-.jux-divider-text::before,
-.jux-divider-text::after {
-    content: '';
-    flex: 1;
-    border-top: var(--border-width) solid var(--color-border);
+.jux-fileupload-button {
+  padding: var(--space-sm) var(--space-xl);
+  background: var(--color-brand);
+  color: white;
+  border: none;
+  border-radius: var(--radius-md);
+  cursor: pointer;
+  font-size: 0.875rem;
+  font-weight: 500;
+  transition: background-color var(--transition-base);
 }
 
-.jux-divider-text::before {
-    margin-right: var(--space-md);
+.jux-fileupload-button:hover {
+  background: var(--color-brand-hover);
 }
 
-.jux-divider-text::after {
-    margin-left: var(--space-md);
+.jux-fileupload-list {
+  margin-top: var(--space-lg);
 }
 
-/* Dropdown Component - Add divider */
-.jux-dropdown-divider {
-    height: var(--border-width);
-    background: var(--color-border);
-    margin: var(--space-xs) 0;
+/* ============================================
+   KPI CARD COMPONENT
+   ============================================ */
+.jux-kpicard {
+  background: var(--color-surface-elevated);
+  border: var(--border-width) solid var(--color-border);
+  border-radius: var(--radius-lg);
+  padding: var(--space-xl);
+  margin-bottom: var(--space-lg);
 }
 
-/* Element Component - Semantic HTML elements */
-.jux-header,
-.jux-footer,
-.jux-main,
-.jux-aside,
-.jux-section,
-.jux-article {
-    display: block;
+.jux-kpicard-content {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-sm);
 }
 
-/* Error Handler Component */
-.jux-error-container {
-    position: fixed;
-    top: var(--space-lg);
-    right: var(--space-lg);
-    max-width: 500px;
-    background: var(--color-surface-elevated);
-    border: var(--border-width) solid #ef4444;
-    border-radius: var(--radius-lg);
-    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.2);
-    z-index: 9999;
-    animation: slideIn 0.3s ease-out;
+.jux-kpicard-title {
+  font-size: 0.875rem;
+  color: var(--color-text-secondary);
+  font-weight: 500;
 }
 
-.jux-error-header {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    padding: var(--space-lg);
-    border-bottom: var(--border-width) solid var(--color-border);
-    background: #fee2e2;
+.jux-kpicard-value {
+  font-size: 2rem;
+  font-weight: 700;
+  color: var(--color-text-primary);
+  line-height: 1;
 }
 
-.jux-error-title {
-    font-size: 1rem;
-    font-weight: 600;
-    color: #991b1b;
+.jux-kpicard-delta {
+  display: flex;
+  align-items: center;
+  gap: var(--space-xs);
+  font-size: 0.875rem;
+  font-weight: 500;
+  color: #10b981;
 }
 
-.jux-error-close {
-    background: transparent;
-    border: none;
-    font-size: 1.5rem;
-    cursor: pointer;
-    color: #991b1b;
-    padding: 0;
-    width: 24px;
-    height: 24px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
+.jux-kpicard-delta svg {
+  width: 16px;
+  height: 16px;
 }
 
-.jux-error-message {
-    padding: var(--space-lg);
-    color: var(--color-text-primary);
-    font-size: 0.875rem;
-    font-family: var(--font-family-mono);
+/* ============================================
+   LIST COMPONENT
+   ============================================ */
+.jux-list-wrapper {
+  border: var(--border-width) solid var(--color-border);
+  border-radius: var(--radius-lg);
+  overflow: hidden;
+  margin-bottom: var(--space-lg);
 }
 
-.jux-error-stack,
-.jux-error-context,
-.jux-error-location,
-.jux-error-time {
-    padding: var(--space-md) var(--space-lg);
-    border-top: var(--border-width) solid var(--color-border);
-    font-size: 0.75rem;
-    color: var(--color-text-secondary);
-    font-family: var(--font-family-mono);
+.jux-list {
+  list-style: none;
+  margin: 0;
+  padding: 0;
 }
 
-/* File Upload Component */
-.jux-fileupload-button-container {
-    display: flex;
-    justify-content: center;
-    margin-top: var(--space-md);
+.jux-list-unordered {
+  /* Base list styles */
 }
 
-.jux-fileupload-button {
-    padding: var(--space-sm) var(--space-lg);
-    background: #3b82f6;
-    color: white;
-    border: none;
-    border-radius: var(--radius-md);
-    cursor: pointer;
-    font-size: 0.875rem;
-    transition: background-color var(--transition-base);
+.jux-list-item {
+  padding: var(--space-lg);
+  border-bottom: var(--border-width) solid var(--color-border);
+  display: flex;
+  align-items: center;
+  gap: var(--space-md);
 }
 
-.jux-fileupload-button:hover {
-    background: #2563eb;
+.jux-list-item:last-child {
+  border-bottom: none;
 }
 
-.jux-fileupload-icon {
-    display: flex;
-    justify-content: center;
-    margin-bottom: var(--space-md);
-    color: var(--color-text-secondary);
+.jux-list-item-hoverable {
+  transition: background-color var(--transition-base);
+  cursor: pointer;
 }
 
-.jux-fileupload-item {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    padding: var(--space-md);
-    background: var(--color-surface-hover);
-    border-radius: var(--radius-md);
-    margin-bottom: var(--space-sm);
+.jux-list-item-hoverable:hover {
+  background: var(--color-surface-hover);
 }
 
-.jux-fileupload-list {
-    margin-top: var(--space-lg);
+.jux-list-item-content {
+  flex: 1;
 }
 
-/* Heading Component - Add level variants */
-.jux-heading-1 { font-size: 2rem; }
-.jux-heading-2 { font-size: 1.5rem; }
-.jux-heading-3 { font-size: 1.25rem; }
-.jux-heading-4 { font-size: 1.125rem; }
-.jux-heading-5 { font-size: 1rem; }
-.jux-heading-6 { font-size: 0.875rem; }
-
-/* Hero Component - Add all variants */
-.jux-hero-centered {
-    text-align: center;
+.jux-list-item-text {
+  color: var(--color-text-secondary);
+  font-size: 0.875rem;
+  line-height: 1.5;
 }
 
-.jux-hero-centered .jux-hero-content {
-    align-items: center;
+.jux-list-item-title {
+  font-weight: 600;
+  color: var(--color-text-primary);
+  margin-bottom: var(--space-xs);
 }
 
-/* KPI Card Component */
-.jux-kpicard {
-    background: var(--color-surface-elevated);
-    border: var(--border-width) solid var(--color-border);
-    border-radius: var(--radius-lg);
-    padding: var(--space-xl);
+/* ============================================
+   LOADING COMPONENT
+   ============================================ */
+.jux-loading {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: var(--space-xl);
 }
 
-.jux-kpicard-title {
-    font-size: 0.875rem;
-    color: var(--color-text-secondary);
-    margin-bottom: var(--space-sm);
+.jux-loading-spinner {
+  width: 40px;
+  height: 40px;
+  border: 3px solid var(--color-border);
+  border-top-color: var(--color-brand);
+  border-radius: 50%;
+  animation: spin 0.8s linear infinite;
 }
 
-.jux-kpicard-value {
-    font-size: 2rem;
-    font-weight: 700;
-    color: var(--color-text-primary);
-    margin-bottom: var(--space-xs);
+.jux-loading-lg .jux-loading-spinner {
+  width: 48px;
+  height: 48px;
+  border-width: 4px;
 }
 
-.jux-kpicard-delta {
-    font-size: 0.875rem;
-    font-weight: 500;
+@keyframes spin {
+  to { transform: rotate(360deg); }
 }
 
-.jux-kpicard-content {
-    display: flex;
-    flex-direction: column;
+/* ============================================
+   MENU COMPONENT
+   ============================================ */
+.jux-menu {
+  display: flex;
+  gap: var(--space-xs);
 }
 
-/* List Component - Add all variant classes */
-.jux-list-wrapper {
-    border: var(--border-width) solid var(--color-border);
-    border-radius: var(--radius-lg);
-    overflow: hidden;
+.jux-menu-vertical {
+  flex-direction: column;
 }
 
-.jux-list-header {
-    padding: var(--space-lg);
-    background: var(--color-surface-base);
-    border-bottom: var(--border-width) solid var(--color-border);
-    font-weight: 600;
-    color: var(--color-text-primary);
+.jux-menu-item {
+  /* Menu item wrapper */
 }
 
-.jux-list-item {
-    padding: var(--space-lg);
-    border-bottom: var(--border-width) solid var(--color-border);
-    transition: background-color var(--transition-base);
+.jux-menu-button {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  gap: var(--space-md);
+  padding: var(--space-md) var(--space-lg);
+  background: transparent;
+  border: none;
+  text-align: left;
+  cursor: pointer;
+  font-size: 0.875rem;
+  color: var(--color-text-primary);
+  border-radius: var(--radius-md);
+  transition: background-color var(--transition-base);
 }
 
-.jux-list-item:last-child {
-    border-bottom: none;
+.jux-menu-button:hover {
+  background: var(--color-surface-hover);
 }
 
-.jux-list-item-bordered {
-    border: var(--border-width) solid var(--color-border);
-    border-radius: var(--radius-md);
-    margin-bottom: var(--space-sm);
+.jux-menu-label {
+  flex: 1;
 }
 
-.jux-list-item-hoverable:hover {
-    background-color: var(--color-surface-hover);
-    cursor: pointer;
+/* ============================================
+   NAV COMPONENT
+   ============================================ */
+.jux-nav {
+  display: flex;
+  gap: var(--space-sm);
 }
 
-.jux-list-item-selected {
-    background-color: #eff6ff;
-    border-left: 4px solid #3b82f6;
+.jux-nav-default {
+  /* Base nav styles */
 }
 
-.jux-list-item-disabled {
-    opacity: 0.5;
-    cursor: not-allowed;
+.jux-nav-items {
+  display: flex;
+  gap: var(--space-sm);
+  align-items: center;
 }
 
-.jux-list-item-striped:nth-child(even) {
-    background-color: var(--color-surface-base);
+.jux-nav-item-wrapper {
+  /* Nav item wrapper */
 }
 
-.jux-list-item-icon {
-    margin-right: var(--space-md);
-    color: var(--color-text-secondary);
+.jux-nav-link {
+  padding: var(--space-sm) var(--space-lg);
+  color: var(--color-text-primary);
+  text-decoration: none;
+  font-size: 0.875rem;
+  border-radius: var(--radius-md);
+  transition: background-color var(--transition-base), color var(--transition-base);
 }
 
-.jux-list-item-title {
-    font-weight: 600;
-    color: var(--color-text-primary);
-    margin-bottom: var(--space-xs);
+.jux-nav-link:hover {
+  background: var(--color-surface-hover);
+  color: var(--color-brand);
 }
 
-.jux-list-item-text,
-.jux-list-item-body {
-    color: var(--color-text-secondary);
-    font-size: 0.875rem;
+/* ============================================
+   PARAGRAPH COMPONENT
+   ============================================ */
+.jux-paragraph {
+  line-height: 1.6;
+  color: var(--color-text-secondary);
+  margin-bottom: var(--space-lg);
+  font-size: 0.875rem;
 }
 
-.jux-list-item-content {
-    flex: 1;
+/* ============================================
+   PROGRESS COMPONENT
+   ============================================ */
+.jux-progress {
+  margin-bottom: var(--space-lg);
 }
 
-.jux-list-item-metadata {
-    font-size: 0.75rem;
-    color: var(--color-text-tertiary);
-    margin-top: var(--space-xs);
+.jux-progress-track {
+  width: 100%;
+  height: 8px;
+  background: var(--color-surface-base);
+  border-radius: var(--radius-full);
+  overflow: hidden;
 }
 
-/* List item type variants */
-.jux-list-item-default { /* default styles */ }
-.jux-list-item-info { background-color: #eff6ff; }
-.jux-list-item-success { background-color: #f0fdf4; }
-.jux-list-item-warning { background-color: #fffbeb; }
-.jux-list-item-error { background-color: #fef2f2; }
-
-/* Loading Component - Add variants */
-.jux-loading-dots {
-    display: flex;
-    gap: var(--space-sm);
+.jux-progress-bar {
+  height: 100%;
+  background: var(--color-brand);
+  transition: width 0.3s ease;
+  border-radius: var(--radius-full);
 }
 
-.jux-loading-dot {
-    width: 8px;
-    height: 8px;
-    background: #3b82f6;
-    border-radius: 50%;
-    animation: bounce 1.4s infinite ease-in-out both;
+.jux-progress-bar-success {
+  background: #10b981;
 }
 
-.jux-loading-dot:nth-child(1) { animation-delay: -0.32s; }
-.jux-loading-dot:nth-child(2) { animation-delay: -0.16s; }
-
-@keyframes bounce {
-    0%, 80%, 100% { transform: scale(0); }
-    40% { transform: scale(1); }
+.jux-progress-bar-warning {
+  background: #f59e0b;
 }
 
-.jux-loading-pulse {
-    width: 40px;
-    height: 40px;
-    background: #3b82f6;
-    border-radius: 50%;
-    animation: pulse 1.5s infinite;
+.jux-progress-bar-error {
+  background: #ef4444;
 }
 
-@keyframes pulse {
-    0%, 100% { opacity: 1; }
-    50% { opacity: 0.5; }
+/* ============================================
+   RADIO COMPONENT
+   ============================================ */
+.jux-radio {
+  margin-bottom: var(--space-lg);
 }
 
-/* Menu Component */
-.jux-menu-button {
-    background: transparent;
-    border: none;
-    padding: var(--space-md);
-    cursor: pointer;
-    color: var(--color-text-primary);
+.jux-radio-options {
+  display: flex;
+  gap: var(--space-lg);
 }
 
-.jux-menu-icon {
-    margin-right: var(--space-sm);
+.jux-radio-vertical {
+  flex-direction: column;
+  gap: var(--space-md);
 }
 
-.jux-menu-label {
-    font-size: 0.75rem;
-    font-weight: 600;
-    color: var(--color-text-tertiary);
-    text-transform: uppercase;
-    padding: var(--space-md);
+.jux-radio-option {
+  display: flex;
+  align-items: center;
+  gap: var(--space-md);
+  cursor: pointer;
+  user-select: none;
 }
 
-.jux-menu-link {
-    display: flex;
-    align-items: center;
-    padding: var(--space-md);
-    color: var(--color-text-primary);
-    text-decoration: none;
-    transition: background-color var(--transition-base);
+.jux-radio-input {
+  position: absolute;
+  opacity: 0;
+  width: 0;
+  height: 0;
 }
 
-.jux-menu-link:hover {
-    background-color: var(--color-surface-hover);
+.jux-radio-mark {
+  width: 20px;
+  height: 20px;
+  border: 2px solid var(--color-border);
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: all var(--transition-base);
+  background: var(--color-surface-elevated);
 }
 
-.jux-menu-link-active {
-    background-color: #eff6ff;
-    color: #3b82f6;
-    font-weight: 600;
+.jux-radio-input:checked + .jux-radio-mark {
+  border-color: var(--color-brand);
 }
 
-.jux-menu-submenu {
-    padding-left: var(--space-2xl);
+.jux-radio-mark::after {
+  content: '';
+  width: 10px;
+  height: 10px;
+  border-radius: 50%;
+  background: var(--color-brand);
+  opacity: 0;
+  transform: scale(0);
+  transition: all var(--transition-base);
 }
 
-/* Modal Component - Add variants */
-.jux-modal-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: 1000;
+.jux-radio-input:checked + .jux-radio-mark::after {
+  opacity: 1;
+  transform: scale(1);
 }
 
-.jux-modal {
-    background: var(--color-surface-elevated);
-    border-radius: var(--radius-lg);
-    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.2);
-    max-width: 600px;
-    width: 90%;
-    max-height: 90vh;
-    overflow-y: auto;
+.jux-radio-label-text {
+  font-size: 0.875rem;
+  color: var(--color-text-primary);
 }
 
-.jux-modal-header {
-    padding: var(--space-xl);
-    border-bottom: var(--border-width) solid var(--color-border);
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
+/* ============================================
+   SELECT COMPONENT
+   ============================================ */
+.jux-select {
+  margin-bottom: var(--space-lg);
 }
 
-.jux-modal-body {
-    padding: var(--space-xl);
+.jux-select-container {
+  position: relative;
 }
 
-.jux-modal-close {
-    background: transparent;
-    border: none;
-    font-size: 1.5rem;
-    cursor: pointer;
-    color: var(--color-text-secondary);
+.jux-select-element {
+  width: 100%;
+  padding: var(--space-md);
+  font-size: 0.875rem;
+  color: var(--color-text-primary);
+  background: var(--color-surface-elevated);
+  border: var(--border-width) solid var(--color-border);
+  border-radius: var(--radius-md);
+  cursor: pointer;
+  appearance: none;
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23666'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'%3E%3C/path%3E%3C/svg%3E");
+  background-repeat: no-repeat;
+  background-position: right var(--space-md) center;
+  background-size: 20px;
+  padding-right: var(--space-3xl);
 }
 
-/* Nav Component - Add all variants */
-.jux-nav-brand {
-    font-weight: 700;
-    font-size: 1.25rem;
-    color: var(--color-text-primary);
+.jux-select-element:focus {
+  outline: none;
+  border-color: var(--color-brand);
+  box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.1);
 }
 
-.jux-nav-items {
-    display: flex;
-    gap: var(--space-md);
-    align-items: center;
+/* ============================================
+   SIDEBAR COMPONENT
+   ============================================ */
+.jux-sidebar {
+  position: relative;
+  background: var(--color-surface-base);
+  border: var(--border-width) solid var(--color-border);
+  border-radius: var(--radius-lg);
+  padding: var(--space-lg);
+  margin-bottom: var(--space-lg);
 }
 
-.jux-nav-item-wrapper {
-    position: relative;
+.jux-sidebar-left {
+  /* Left-aligned sidebar */
 }
 
-.jux-nav-item-active {
-    font-weight: 600;
+.jux-sidebar-toggle {
+  position: absolute;
+  top: var(--space-md);
+  right: var(--space-md);
+  background: transparent;
+  border: none;
+  cursor: pointer;
+  padding: var(--space-xs);
+  color: var(--color-text-secondary);
+  display: flex;
+  align-items: center;
+  justify-content: center;
 }
 
-.jux-nav-link {
-    padding: var(--space-md) var(--space-lg);
-    text-decoration: none;
-    color: var(--color-text-primary);
-    transition: color var(--transition-base);
+/* ============================================
+   SWITCH COMPONENT
+   ============================================ */
+.jux-switch {
+  margin-bottom: var(--space-lg);
 }
 
-.jux-nav-link:hover {
-    color: #3b82f6;
+.jux-switch-container {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--space-md);
+  cursor: pointer;
+  user-select: none;
 }
 
-.jux-nav-link-active {
-    color: #3b82f6;
-    font-weight: 600;
+.jux-switch-input {
+  position: absolute;
+  opacity: 0;
+  width: 0;
+  height: 0;
 }
 
-.jux-nav-tabs {
-    border-bottom: var(--border-width) solid var(--color-border);
+.jux-switch-slider {
+  width: 44px;
+  height: 24px;
+  background: var(--color-border);
+  border-radius: var(--radius-full);
+  position: relative;
+  transition: background-color var(--transition-base);
 }
 
-.jux-nav-tabs .jux-nav-link {
-    border-bottom: 2px solid transparent;
+.jux-switch-slider::before {
+  content: '';
+  position: absolute;
+  width: 18px;
+  height: 18px;
+  left: 3px;
+  top: 3px;
+  background: white;
+  border-radius: 50%;
+  transition: transform var(--transition-base);
 }
 
-.jux-nav-tabs .jux-nav-link-active {
-    border-bottom-color: #3b82f6;
+.jux-switch-input:checked + .jux-switch-slider {
+  background: var(--color-brand);
 }
 
-.jux-nav-pills .jux-nav-link {
-    border-radius: var(--radius-md);
+.jux-switch-input:checked + .jux-switch-slider::before {
+  transform: translateX(20px);
 }
 
-.jux-nav-pills .jux-nav-link-active {
-    background-color: #3b82f6;
-    color: white;
+.jux-switch-label-text {
+  font-size: 0.875rem;
+  color: var(--color-text-primary);
 }
 
-.jux-nav-sticky {
-    position: sticky;
-    top: 0;
-    z-index: 100;
+/* ============================================
+   TABLE COMPONENT
+   ============================================ */
+.jux-table-wrapper {
+  border: var(--border-width) solid var(--color-border);
+  border-radius: var(--radius-lg);
+  overflow: hidden;
+  margin-bottom: var(--space-lg);
 }
 
-/* Page Helper */
-.jux-page {
-    min-height: 100vh;
-    display: flex;
-    flex-direction: column;
+.jux-table-filter {
+  width: 100%;
+  padding: var(--space-md) var(--space-lg);
+  font-size: 0.875rem;
+  border: none;
+  border-bottom: var(--border-width) solid var(--color-border);
+  background: var(--color-surface-base);
+  color: var(--color-text-primary);
 }
 
-/* Progress Component - Fix class name */
-.jux-progress-track {
-    /* Alias for jux-progress-bar */
-    width: 100%;
-    height: 8px;
-    background-color: var(--color-surface-base);
-    border-radius: var(--radius-lg);
-    overflow: hidden;
+.jux-table-filter:focus {
+  outline: none;
+  background: var(--color-surface-elevated);
 }
 
-/* Radio Component - Add orientation classes */
-.jux-radio-horizontal {
-    flex-direction: row;
-    flex-wrap: wrap;
+.jux-table {
+  width: 100%;
+  border-collapse: collapse;
 }
 
-.jux-radio-vertical {
-    flex-direction: column;
+.jux-table-bordered {
+  /* Bordered table variant */
 }
 
-/* Script/Style placeholders */
-.jux-script-,
-.jux-style- {
-    /* These are injected dynamically */
+.jux-table thead {
+  background: var(--color-surface-base);
+  border-bottom: var(--border-width) solid var(--color-border);
 }
 
-/* Sidebar Component - Add toggle */
-.jux-sidebar-toggle {
-    position: absolute;
-    top: var(--space-lg);
-    right: calc(var(--space-lg) * -1);
-    background: var(--color-surface-elevated);
-    border: var(--border-width) solid var(--color-border);
-    border-radius: 0 var(--radius-md) var(--radius-md) 0;
-    padding: var(--space-sm);
-    cursor: pointer;
+.jux-table th {
+  padding: var(--space-md) var(--space-lg);
+  text-align: left;
+  font-size: 0.75rem;
+  font-weight: 600;
+  color: var(--color-text-secondary);
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
 }
 
-/* Table Component - Add missing classes */
-.jux-table-wrapper {
-    overflow-x: auto;
-    border: var(--border-width) solid var(--color-border);
-    border-radius: var(--radius-lg);
+.jux-table td {
+  padding: var(--space-md) var(--space-lg);
+  font-size: 0.875rem;
+  color: var(--color-text-primary);
+  border-top: var(--border-width) solid var(--color-border);
 }
 
-.jux-table {
-    width: 100%;
-    border-collapse: collapse;
+.jux-table tbody tr:hover {
+  background: var(--color-surface-hover);
 }
 
-.jux-table-striped tbody tr:nth-child(even) {
-    background-color: var(--color-surface-base);
+.jux-table-pagination {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--space-md);
+  padding: var(--space-md) var(--space-lg);
+  border-top: var(--border-width) solid var(--color-border);
+  background: var(--color-surface-base);
 }
 
-.jux-table-hoverable tbody tr:hover {
-    background-color: var(--color-surface-hover);
+.jux-table-pagination button {
+  padding: var(--space-xs) var(--space-md);
+  background: var(--color-surface-elevated);
+  border: var(--border-width) solid var(--color-border);
+  border-radius: var(--radius-md);
+  cursor: pointer;
+  font-size: 0.875rem;
+  color: var(--color-text-primary);
+  transition: background-color var(--transition-base);
 }
 
-.jux-table-bordered th,
-.jux-table-bordered td {
-    border: var(--border-width) solid var(--color-border);
+.jux-table-pagination button:hover:not(:disabled) {
+  background: var(--color-surface-hover);
 }
 
-.jux-table-row-selected {
-    background-color: #eff6ff !important;
+.jux-table-pagination button:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
 }
 
-.jux-bulk-checkbox {
-    margin: 0;
+.jux-table-pagination span {
+  font-size: 0.875rem;
+  color: var(--color-text-secondary);
 }
 
-.jux-table-filter {
-    padding: var(--space-lg);
-    border-bottom: var(--border-width) solid var(--color-border);
+/* ============================================
+   TABS COMPONENT
+   ============================================ */
+.jux-tabs {
+  margin-bottom: var(--space-lg);
 }
 
-.jux-table-pagination {
-    padding: var(--space-lg);
-    border-top: var(--border-width) solid var(--color-border);
-    display: flex;
-    justify-content: center;
-    gap: var(--space-sm);
+.jux-tabs-default {
+  /* Base tabs styles */
 }
 
-/* Tabs Component */
 .jux-tabs-list {
-    display: flex;
-    gap: var(--space-sm);
-    border-bottom: var(--border-width) solid var(--color-border);
-    margin-bottom: var(--space-lg);
+  display: flex;
+  gap: var(--space-xs);
+  border-bottom: var(--border-width) solid var(--color-border);
+  margin-bottom: var(--space-lg);
 }
 
 .jux-tabs-button {
-    padding: var(--space-md) var(--space-lg);
-    background: transparent;
-    border: none;
-    border-bottom: 2px solid transparent;
-    cursor: pointer;
-    color: var(--color-text-secondary);
-    font-weight: 500;
-    transition: all var(--transition-base);
+  padding: var(--space-md) var(--space-xl);
+  background: transparent;
+  border: none;
+  border-bottom: 2px solid transparent;
+  cursor: pointer;
+  font-size: 0.875rem;
+  font-weight: 500;
+  color: var(--color-text-secondary);
+  transition: color var(--transition-base), border-color var(--transition-base);
+  position: relative;
+  bottom: -1px;
 }
 
 .jux-tabs-button:hover {
-    color: var(--color-text-primary);
+  color: var(--color-text-primary);
 }
 
 .jux-tabs-button-active {
-    color: #3b82f6;
-    border-bottom-color: #3b82f6;
+  color: var(--color-brand);
+  border-bottom-color: var(--color-brand);
 }
 
 .jux-tabs-panels {
-    position: relative;
+  /* Tabs panels container */
 }
 
 .jux-tabs-panel {
-    display: none;
+  display: none;
+  animation: fadeIn 0.2s ease-in;
 }
 
 .jux-tabs-panel-active {
-    display: block;
-}
-
-/* Theme Toggle Component */
-.jux-theme {
-    /* Theme wrapper class */
-}
-
-.jux-theme-toggle {
-    cursor: pointer;
-}
-
-.jux-theme-toggle-button {
-    background: var(--color-surface-hover);
-    border: var(--border-width) solid var(--color-border);
-    padding: var(--space-sm) var(--space-md);
-    border-radius: var(--radius-md);
-    cursor: pointer;
+  display: block;
 }
 
-.jux-theme-toggle-dropdown {
-    position: absolute;
-    top: 100%;
-    right: 0;
-    margin-top: var(--space-xs);
-    background: var(--color-surface-elevated);
-    border: var(--border-width) solid var(--color-border);
-    border-radius: var(--radius-md);
-    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
-    min-width: 150px;
-    z-index: 1000;
+@keyframes fadeIn {
+  from { opacity: 0; }
+  to { opacity: 1; }
 }
 
-.jux-theme-toggle-select {
-    /* Native select styling */
+/* ============================================
+   VIEW COMPONENT
+   ============================================ */
+.jux-view {
+  background: var(--color-surface-elevated);
+  border: var(--border-width) solid var(--color-border);
+  border-radius: var(--radius-lg);
+  overflow: hidden;
+  margin-bottom: var(--space-lg);
 }
 
-.jux-theme-toggle-cycle {
-    /* Button that cycles through themes */
+.jux-view-header {
+  padding: var(--space-xl);
+  border-bottom: var(--border-width) solid var(--color-border);
+  background: var(--color-surface-base);
 }
 
-/* Token Calculator Component */
-.jux-token-calculator {
-    background: var(--color-surface-elevated);
-    border: var(--border-width) solid var(--color-border);
-    border-radius: var(--radius-lg);
-    padding: var(--space-xl);
+.jux-view-title {
+  font-size: 1.5rem;
+  font-weight: 600;
+  color: var(--color-text-primary);
+  margin: 0;
 }
 
-.jux-token-calculator-header {
-    margin-bottom: var(--space-xl);
-    padding-bottom: var(--space-lg);
-    border-bottom: var(--border-width) solid var(--color-border);
+.jux-view-content {
+  padding: var(--space-xl);
 }
 
-.jux-token-calculator-content {
-    display: flex;
-    flex-direction: column;
-    gap: var(--space-lg);
+/* ============================================
+   SCROLLBARS
+   ============================================ */
+#appmain::-webkit-scrollbar,
+#appaside::-webkit-scrollbar {
+  width: 6px;
 }
 
-.jux-token-table {
-    width: 100%;
-    border-collapse: collapse;
+#appmain::-webkit-scrollbar-track,
+#appaside::-webkit-scrollbar-track {
+  background: transparent;
 }
 
-.jux-token-details {
-    font-size: 0.875rem;
-    color: var(--color-text-secondary);
+#appmain::-webkit-scrollbar-thumb,
+#appaside::-webkit-scrollbar-thumb {
+  background: var(--color-border);
+  border-radius: 3px;
 }
 
-.jux-token-row-highlight {
-    background-color: #fffbeb;
+#appmain::-webkit-scrollbar-thumb:hover,
+#appaside::-webkit-scrollbar-thumb:hover {
+  background: var(--color-border-hover);
 }
 
-.jux-token-bar-container {
-    display: flex;
+/* ============================================
+   RESPONSIVE
+   ============================================ */
+@media (max-width: 768px) {
+  #app {
+    grid-template-columns: 1fr;
+    grid-template-areas:
+      "header"
+      "main"
+      "footer";
+  }
+  
+  #appaside {
+    display: none;
+  }
+  
+  #appheader {
+    padding: 0 var(--space-lg);
+  }
+  
+  #appmain-content {
+    padding: var(--space-2xl) var(--space-lg);
+  }
+  
+  #appfooter {
+    padding: var(--space-md) var(--space-lg);
+  }
+  
+  .jux-hero-title {
+    font-size: 2rem;
+  }
+  
+  .jux-radio-options {
     flex-direction: column;
-    gap: var(--space-sm);
-}
-
-.jux-token-bar-row {
-    display: flex;
-    gap: var(--space-xs);
-    align-items: center;
-}
-
-.jux-token-bar-label {
-    min-width: 100px;
-    font-size: 0.875rem;
-    color: var(--color-text-secondary);
-}
-
-.jux-token-bar-jux {
-    height: 24px;
-    background: #3b82f6;
-    border-radius: var(--radius-sm);
-}
-
-.jux-token-bar-other {
-    height: 24px;
-    background: #e5e7eb;
-    border-radius: var(--radius-sm);
-}
-
-.jux-token-bar-value {
-    min-width: 60px;
-    text-align: right;
-    font-size: 0.875rem;
-    font-weight: 600;
+  }
 }
 
-/* View Component */
-.jux-view {
-    display: flex;
-    flex-direction: column;
+/* ============================================
+   GRID COMPONENT
+   ============================================ */
+.jux-grid {
+  display: grid;
+  position: relative;
 }
 
-.jux-view-header {
-    padding: var(--space-xl);
-    border-bottom: var(--border-width) solid var(--color-border);
+.jux-grid-cell {
+  position: relative;
+  overflow: auto;
+  min-width: 0;  /* Prevent grid blowout */
+  min-height: 0;
 }
 
-.jux-view-title {
-    font-size: 1.5rem;
-    font-weight: 700;
-    color: var(--color-text-primary);
-    margin-bottom: var(--space-xs);
+/* ============================================
+   GRID GRIDDER MODE (Blueprint Visualization)
+   ============================================ */
+.jux-grid-gridder {
+  /* Blueprint-style background */
+  background-color: #0a1929;
+  background-image: 
+    linear-gradient(rgba(59, 130, 246, 0.1) 1px, transparent 1px),
+    linear-gradient(90deg, rgba(59, 130, 246, 0.1) 1px, transparent 1px);
+  background-size: 20px 20px;
+  padding: 2px;
+  border: 2px solid #3b82f6;
+  box-shadow: 
+    0 0 0 1px rgba(59, 130, 246, 0.2),
+    inset 0 0 20px rgba(59, 130, 246, 0.1);
+}
+
+.jux-grid-gridder .jux-grid-cell {
+  /* Cell styling in gridder mode */
+  background: rgba(15, 23, 42, 0.8);
+  border: 1px solid rgba(59, 130, 246, 0.4);
+  box-shadow: inset 0 0 10px rgba(59, 130, 246, 0.05);
+  min-height: 80px;  /* Ensure cells are visible */
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+  transition: all 0.2s ease;
+}
+
+.jux-grid-gridder .jux-grid-cell:hover {
+  background: rgba(30, 41, 59, 0.9);
+  border-color: rgba(59, 130, 246, 0.8);
+  box-shadow: 
+    inset 0 0 15px rgba(59, 130, 246, 0.15),
+    0 0 10px rgba(59, 130, 246, 0.3);
+}
+
+/* Coordinate label (top-left corner) */
+.jux-grid-gridder .jux-grid-cell::before {
+  content: attr(data-row) ',' attr(data-col);
+  position: absolute;
+  top: 4px;
+  left: 4px;
+  font-size: 10px;
+  font-family: 'SF Mono', Monaco, 'Courier New', monospace;
+  font-weight: 600;
+  color: rgba(59, 130, 246, 0.8);
+  background: rgba(15, 23, 42, 0.95);
+  padding: 2px 6px;
+  border-radius: 3px;
+  border: 1px solid rgba(59, 130, 246, 0.3);
+  letter-spacing: 0.5px;
+  z-index: 10;
+}
+
+/* ID label (bottom-right corner) */
+.jux-grid-gridder .jux-grid-cell::after {
+  content: '#' attr(id);
+  position: absolute;
+  bottom: 4px;
+  right: 4px;
+  font-size: 9px;
+  font-family: 'SF Mono', Monaco, 'Courier New', monospace;
+  color: rgba(148, 163, 184, 0.6);
+  background: rgba(15, 23, 42, 0.8);
+  padding: 2px 5px;
+  border-radius: 2px;
+  border: 1px solid rgba(71, 85, 105, 0.3);
+  max-width: calc(100% - 12px);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
 
-.jux-view-description {
-    font-size: 0.875rem;
-    color: var(--color-text-secondary);
+/* Grid lines (column separators) */
+.jux-grid-gridder .jux-grid-cell:not(:nth-child(1))::before {
+  box-shadow: 0 0 5px rgba(59, 130, 246, 0.4);
 }
 
-.jux-view-content {
-    padding: var(--space-xl);
+/* Remove default debug styles when gridder is active */
+.jux-grid-gridder.jux-grid-debug .jux-grid-cell {
+  /* Gridder overrides debug mode */
+  border-color: rgba(59, 130, 246, 0.4);
+  background: rgba(15, 23, 42, 0.8);
 }
 
-.jux-view-item {
-    padding: var(--space-lg);
-    border-bottom: var(--border-width) solid var(--color-border);
+/* ============================================
+   GRID DEBUG MODE (Legacy - simpler version)
+   ============================================ */
+.jux-grid-debug .jux-grid-cell {
+  border: 1px dashed var(--color-border);
+  background: var(--color-surface-base);
 }
 
-.jux-view-item:last-child {
-    border-bottom: none;
+.jux-grid-debug .jux-grid-cell::before {
+  content: attr(data-row) '-' attr(data-col);
+  position: absolute;
+  top: 2px;
+  left: 2px;
+  font-size: 10px;
+  color: var(--color-text-tertiary);
+  opacity: 0.5;
 }