juxscript 1.1.179 → 1.1.180

package/lib/styles/shadcn.css

@@ -1,11 +1,10 @@
 @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
 
 /* ═══════════════════════════════════════════════════════════════════
- * DESIGN TOKENS (Shadcn Variables)
+ * DESIGN TOKENS
  * ═══════════════════════════════════════════════════════════════════ */
 
 :root {
-  /* Base colors */
   --background: 0 0% 100%;
   --foreground: 0 0% 3.9%;
   --muted: 0 0% 96.1%;
@@ -13,27 +12,19 @@
   --border: 0 0% 89.8%;
   --input: 0 0% 89.8%;
   --ring: 0 0% 3.9%;
-  
-  /* Accent colors */
   --primary: 0 0% 9%;
   --primary-foreground: 0 0% 98%;
   --secondary: 0 0% 96.1%;
   --secondary-foreground: 0 0% 9%;
   --accent: 0 0% 96.1%;
   --accent-foreground: 0 0% 9%;
-  
-  /* Semantic colors */
   --destructive: 0 84.2% 60.2%;
   --destructive-foreground: 0 0% 98%;
   --success: 142 71% 45%;
   --success-foreground: 0 0% 98%;
   --warning: 48 96% 53%;
   --warning-foreground: 0 0% 9%;
-  
-  /* Sizes */
-  --radius: 0.375rem;
-  
-  /* Font */
+  --radius: 0.5rem;
   font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
 }
 
@@ -54,13 +45,12 @@
 }
 
 /* ═══════════════════════════════════════════════════════════════════
- * BASE INPUT STYLING (Shared across all inputs)
+ * BASE INPUTS
  * ═══════════════════════════════════════════════════════════════════ */
 
 .jux-input-element,
 .jux-table-filter,
 .jux-dataframe-filter-input {
-  display: flex;
   height: 2.5rem;
   width: 100%;
   border-radius: var(--radius);
@@ -70,8 +60,7 @@
   font-size: 0.875rem;
   color: hsl(var(--foreground));
   outline: none !important;
-  transition: all 0.15s ease;
-  box-sizing: border-box;
+  transition: border-color 0.2s, box-shadow 0.2s;
 }
 
 .jux-input-element::placeholder,
@@ -83,25 +72,18 @@
 .jux-input-element:focus,
 .jux-table-filter:focus,
 .jux-dataframe-filter-input:focus {
- 
-  box-shadow: 0 0 0 1px hsl(var(--input)) !important;
-}
-
-.jux-input-element:disabled {
-  cursor: not-allowed;
-  opacity: 0.5;
+  border-color: hsl(var(--ring));
+  box-shadow: 0 0 0 3px hsl(var(--ring) / 0.1);
 }
 
 /* ═══════════════════════════════════════════════════════════════════
- * BUTTON BASE (Single source of truth)
+ * BUTTONS
  * ═══════════════════════════════════════════════════════════════════ */
 
 .jux-button,
 .jux-modal-action,
 .jux-table-pagination button,
-.jux-fileupload-button,
-.jux-dropdown-trigger,
-.jux-dmenu-trigger {
+.jux-fileupload-button {
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -112,37 +94,24 @@
   height: 2.5rem;
   padding: 0 1rem;
   cursor: pointer;
-  transition: all 0.15s ease;
-  border: 1px solid transparent;
+  transition: all 0.2s;
+  border: none;
   background: hsl(var(--primary));
   color: hsl(var(--primary-foreground));
 }
 
 .jux-button:hover,
-.jux-modal-action:hover,
-.jux-table-pagination button:hover:not(:disabled),
-.jux-fileupload-button:hover,
-.jux-dropdown-trigger:hover,
-.jux-dmenu-trigger:hover {
+.jux-table-pagination button:hover:not(:disabled) {
   opacity: 0.9;
 }
 
-.jux-button:focus-visible,
-.jux-modal-action:focus-visible,
-.jux-fileupload-button:focus-visible {
-  outline: 2px solid hsl(var(--ring));
-  outline-offset: 2px;
-}
-
 .jux-button:disabled,
 .jux-table-pagination button:disabled {
   pointer-events: none;
   opacity: 0.5;
 }
 
-/* Button variants */
 .jux-button-outline,
-.jux-modal-action-secondary,
 .jux-fileupload-button {
   border: 1px solid hsl(var(--input));
   background: hsl(var(--background));
@@ -150,101 +119,75 @@
 }
 
 .jux-button-outline:hover,
-.jux-modal-action-secondary:hover,
 .jux-fileupload-button:hover {
   background: hsl(var(--accent));
 }
 
-.jux-button-ghost,
-.jux-modal-action-ghost {
+.jux-button-ghost {
   background: transparent;
   color: hsl(var(--foreground));
-  border: none;
 }
 
-.jux-button-ghost:hover,
-.jux-modal-action-ghost:hover {
+.jux-button-ghost:hover {
   background: hsl(var(--accent));
 }
 
-.jux-button-destructive,
-.jux-modal-action-destructive {
-  background: hsl(var(--destructive));
-  color: hsl(var(--destructive-foreground));
-}
-
-.jux-button-destructive:hover,
-.jux-modal-action-destructive:hover {
-  opacity: 0.9;
-}
-
-/* Button sizes */
-.jux-button-sm { height: 2.25rem; padding: 0 0.875rem; font-size: 0.8125rem; }
-.jux-button-lg { height: 2.75rem; padding: 0 1.25rem; font-size: 0.9375rem; }
-.jux-button-xl { height: 3rem; padding: 0 1.5rem; font-size: 1rem; font-weight: 600; }
-
 /* ═══════════════════════════════════════════════════════════════════
- * TYPOGRAPHY (DRY headings)
+ * TYPOGRAPHY
  * ═══════════════════════════════════════════════════════════════════ */
 
-h1, h2, h3, h4, h5, h6,
-.jux-heading-1, .jux-heading-2, .jux-heading-3, .jux-heading-4, .jux-heading-5, .jux-heading-6 {
-  scroll-margin: 5rem;
+h1, h2, h3, h4, h5, h6 {
   font-weight: 600;
   letter-spacing: -0.025em;
   color: hsl(var(--foreground));
 }
 
-h1, .jux-heading-1 { font-size: 2.25rem; font-weight: 800; }
-h2, .jux-heading-2 { font-size: 1.875rem; border-bottom: 1px solid hsl(var(--border)); padding-bottom: 0.5rem; }
-h3, .jux-heading-3 { font-size: 1.5rem; }
-h4, .jux-heading-4 { font-size: 1.25rem; }
-h5, .jux-heading-5 { font-size: 1.125rem; }
-h6, .jux-heading-6 { font-size: 1rem; }
+h1 { font-size: 2.25rem; font-weight: 800; }
+h2 { font-size: 1.875rem; padding-bottom: 0.5rem; border-bottom: 1px solid hsl(var(--border)); }
+h3 { font-size: 1.5rem; }
+h4 { font-size: 1.25rem; }
 
-p, .jux-paragraph { line-height: 1.75; }
-p:not(:first-child) { margin-top: 1.5rem; }
-
-.jux-muted { font-size: 0.875rem; color: hsl(var(--muted-foreground)); }
+p { line-height: 1.75; color: hsl(var(--foreground)); }
 
 /* ═══════════════════════════════════════════════════════════════════
- * DATAFRAME COMPONENT
+ * DATAFRAME
  * ═══════════════════════════════════════════════════════════════════ */
 
 .jux-dataframe {
   display: flex;
   flex-direction: column;
-  gap: 0.75rem;
+  gap: 1rem;
   width: 100%;
 }
 
 .jux-dataframe-status {
   display: flex;
   align-items: center;
-  padding: 0.5rem 0.75rem;
-  font-size: 0.8125rem;
+  gap: 0.5rem;
+  padding: 0.75rem 1rem;
+  font-size: 0.875rem;
   font-weight: 500;
   border-radius: var(--radius);
   border: 1px solid hsl(var(--border));
-  background: hsl(var(--muted));
+  background: hsl(var(--muted) / 0.5);
   color: hsl(var(--muted-foreground));
 }
 
 .jux-dataframe-status-success {
   background: hsl(var(--success) / 0.1);
-  border-color: hsl(var(--success) / 0.3);
+  border-color: hsl(var(--success) / 0.2);
   color: hsl(var(--success));
 }
 
 .jux-dataframe-status-loading {
   background: hsl(var(--warning) / 0.1);
-  border-color: hsl(var(--warning) / 0.3);
+  border-color: hsl(var(--warning) / 0.2);
   color: hsl(var(--warning));
 }
 
 .jux-dataframe-status-error {
   background: hsl(var(--destructive) / 0.1);
-  border-color: hsl(var(--destructive) / 0.3);
+  border-color: hsl(var(--destructive) / 0.2);
   color: hsl(var(--destructive));
 }
 
@@ -252,7 +195,6 @@ p:not(:first-child) { margin-top: 1.5rem; }
   position: relative;
   display: flex;
   align-items: center;
-  width: 100%;
   margin-bottom: 0.75rem;
 }
 
@@ -263,316 +205,220 @@ p:not(:first-child) { margin-top: 1.5rem; }
   transform: translateY(-50%);
   color: hsl(var(--muted-foreground));
   pointer-events: none;
-  display: flex;
-  align-items: center;
   z-index: 1;
 }
 
 .jux-dataframe-filter-input {
-  padding-left: 2.25rem !important;
+  padding-left: 2.5rem !important;
 }
 
 /* ═══════════════════════════════════════════════════════════════════
- * FILE UPLOAD
+ * TABS
  * ═══════════════════════════════════════════════════════════════════ */
 
-.jux-fileupload { gap: 0.5rem; }
+.jux-tabs {
+  width: 100%;
+}
 
-.jux-fileupload-item {
-  display: flex;
+.jux-tabs-list {
+  display: inline-flex;
+  height: 2.5rem;
   align-items: center;
-  gap: 0.5rem;
-  padding: 0.375rem 0.75rem;
-  background: hsl(var(--muted));
-  border: 1px solid hsl(var(--border));
+  justify-content: flex-start;
+  gap: 0.25rem;
   border-radius: var(--radius);
-  font-size: 0.8125rem;
-  color: hsl(var(--foreground));
+  background: hsl(var(--muted) / 0.3);
+  padding: 0.25rem;
+  border: 1px solid hsl(var(--border));
 }
 
-.jux-fileupload-filename {
-  flex: 1;
-  font-weight: 500;
-  overflow: hidden;
-  text-overflow: ellipsis;
+.jux-tabs-button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
   white-space: nowrap;
+  border-radius: calc(var(--radius) - 0.125rem);
+  padding: 0.5rem 1rem;
+  font-size: 0.875rem;
+  font-weight: 500;
+  color: hsl(var(--muted-foreground));
+  cursor: pointer;
+  border: none;
+  background: transparent;
+  transition: all 0.2s;
 }
 
-.jux-fileupload-filesize {
-  color: hsl(var(--muted-foreground));
-  font-size: 0.75rem;
+.jux-tabs-button:hover {
+  background: hsl(var(--muted) / 0.5);
+  color: hsl(var(--foreground));
 }
 
-.jux-fileupload-remove {
-  background: transparent;
+.jux-tabs-button-active {
+  background: hsl(var(--background));
+  color: hsl(var(--foreground));
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+  font-weight: 600;
+}
+
+.jux-tabs-panel {
+  margin-top: 1rem;
+  border-radius: var(--radius);
+  border: 1px solid hsl(var(--border));
+  background: hsl(var(--background));
+  padding: 0;
+  overflow: hidden;
+}
+
+/* ✅ Remove inner padding/border from tables inside tabs */
+.jux-tabs-panel .jux-table-wrapper {
   border: none;
-  color: hsl(var(--muted-foreground));
-  cursor: pointer;
-  padding: 0 0.25rem;
-  border-radius: 0.25rem;
-  transition: all 0.15s;
+  border-radius: 0;
 }
 
-.jux-fileupload-remove:hover {
-  color: hsl(var(--destructive));
-  background: hsl(var(--destructive) / 0.1);
+.jux-tabs-panel .jux-dataframe-filter {
+  padding: 1rem 1rem 0;
+  margin-bottom: 0.75rem;
 }
 
 /* ═══════════════════════════════════════════════════════════════════
  * TABLE
  * ═══════════════════════════════════════════════════════════════════ */
 
-.jux-table-wrapper { width: 100%; overflow-x: auto; }
+.jux-table-wrapper {
+  width: 100%;
+  overflow-x: auto;
+  border-radius: var(--radius);
+  border: 1px solid hsl(var(--border));
+  background: hsl(var(--background));
+}
 
 .jux-table {
   width: 100%;
   border-collapse: collapse;
 }
 
-.jux-table thead tr { border-top: 1px solid hsl(var(--border)); }
-.jux-table tbody tr { border-top: 1px solid hsl(var(--border)); }
-.jux-table-striped tbody tr:nth-child(even) { background: hsl(var(--muted)); }
+.jux-table thead tr {
+  border-bottom: 1px solid hsl(var(--border));
+  background: hsl(var(--muted) / 0.3);
+}
+
+.jux-table tbody tr {
+  border-bottom: 1px solid hsl(var(--border));
+  transition: background-color 0.15s;
+}
+
+.jux-table tbody tr:last-child {
+  border-bottom: none;
+}
 
 .jux-table th,
 .jux-table td {
-  border: 1px solid hsl(var(--border));
-  padding: 0.5rem 1rem;
+  padding: 0.75rem 1rem;
   text-align: left;
+  border: none;
+}
+
+.jux-table th {
+  font-weight: 600;
+  font-size: 0.875rem;
+  color: hsl(var(--foreground));
 }
 
-.jux-table th { font-weight: 700; }
+.jux-table td {
+  font-size: 0.875rem;
+  color: hsl(var(--foreground));
+}
 
-.jux-table-hoverable tbody tr {
-  transition: background-color 0.1s ease;
+.jux-table-striped tbody tr:nth-child(even) {
+  background: hsl(var(--muted) / 0.2);
 }
 
 .jux-table-hoverable tbody tr:hover {
-  background: hsl(var(--accent)) !important;
+  background: hsl(var(--muted) / 0.5);
 }
 
 .jux-table-pagination {
-  margin-top: 0.75rem;
+  margin-top: 1rem;
+  padding: 0.75rem 1rem;
   display: flex;
-  gap: 0.375rem;
+  gap: 0.5rem;
   justify-content: center;
   align-items: center;
-  padding: 0.5rem 0;
+  border-top: 1px solid hsl(var(--border));
+  background: hsl(var(--muted) / 0.2);
 }
 
 .jux-table-pagination span {
   font-size: 0.875rem;
-  color: hsl(var(--muted-foreground));
-  padding: 0 0.75rem;
+  color: hsl(var(--foreground));
+  font-weight: 500;
 }
 
 /* ═══════════════════════════════════════════════════════════════════
- * MODAL
+ * FILE UPLOAD
  * ═══════════════════════════════════════════════════════════════════ */
 
-.jux-modal-overlay {
-  position: fixed;
-  inset: 0;
-  z-index: 50;
-  background: rgba(0, 0, 0, 0.8);
-  backdrop-filter: blur(2px);
+.jux-fileupload-item {
   display: flex;
   align-items: center;
-  justify-content: center;
-}
-
-.jux-modal {
-  position: relative;
-  background: hsl(var(--background));
-  border: 1px solid hsl(var(--border));
-  border-radius: 0.5rem;
-  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
-  width: 100%;
-  max-width: 32rem;
-  z-index: 51;
-  display: flex;
-  flex-direction: column;
-  gap: 1rem;
-  padding: 1.5rem;
-}
-
-.jux-modal-header {
-  display: flex;
-  align-items: flex-start;
   gap: 0.75rem;
+  padding: 0.75rem 1rem;
+  background: hsl(var(--muted) / 0.3);
+  border: 1px solid hsl(var(--border));
+  border-radius: var(--radius);
+  font-size: 0.875rem;
 }
 
-.jux-modal-header-title {
+.jux-fileupload-filename {
   flex: 1;
-  font-size: 1.125rem;
-  font-weight: 600;
+  font-weight: 500;
   color: hsl(var(--foreground));
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
 
-.jux-modal-content {
-  font-size: 0.875rem;
+.jux-fileupload-filesize {
   color: hsl(var(--muted-foreground));
-  line-height: 1.5;
-}
-
-.jux-modal-footer {
-  display: flex;
-  justify-content: flex-end;
-  gap: 0.5rem;
+  font-size: 0.8125rem;
 }
 
-.jux-modal-close {
-  position: absolute;
-  top: 1rem;
-  right: 1rem;
+.jux-fileupload-remove {
   background: transparent;
   border: none;
-  cursor: pointer;
-  color: hsl(var(--muted-foreground));
-  padding: 0.25rem;
-}
-
-.jux-modal-close:hover {
-  color: hsl(var(--foreground));
-}
-
-/* ═══════════════════════════════════════════════════════════════════
- * TABS
- * ═══════════════════════════════════════════════════════════════════ */
-
-.jux-tabs-list {
-  display: inline-flex;
-  height: 40px;
-  align-items: center;
-  justify-content: center;
-  border-radius: var(--radius);
-  background: hsl(var(--muted));
-  padding: 0.25rem;
-}
-
-.jux-tabs-button {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  white-space: nowrap;
-  border-radius: calc(var(--radius) - 2px);
-  padding: 0.375rem 0.75rem;
-  font-size: 0.875rem;
-  font-weight: 500;
   color: hsl(var(--muted-foreground));
   cursor: pointer;
-  border: none;
-  background: transparent;
-  transition: all 0.15s;
-}
-
-.jux-tabs-button-active {
-  background: hsl(var(--background));
-  color: hsl(var(--foreground));
-  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
+  padding: 0.25rem;
+  border-radius: 0.25rem;
+  transition: all 0.2s;
 }
 
-.jux-tabs-panel {
-  margin-top: 0.5rem;
-  border-radius: var(--radius);
-  border: 1px solid hsl(var(--border));
-  padding: 1.5rem;
+.jux-fileupload-remove:hover {
+  color: hsl(var(--destructive));
+  background: hsl(var(--destructive) / 0.1);
 }
 
 /* ═══════════════════════════════════════════════════════════════════
- * CARD
+ * UTILITIES
  * ═══════════════════════════════════════════════════════════════════ */
 
-.jux-card {
-  border-radius: 0.5rem;
-  border: 1px solid hsl(var(--border));
-  background: hsl(var(--background));
-  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
-  overflow: hidden;
-}
-
-.jux-card-header {
-  display: flex;
-  align-items: center;
-  gap: 0.75rem;
-  padding: 1.5rem;
-  background: hsl(var(--muted) / 0.5);
-  border-bottom: 1px solid hsl(var(--border));
-}
-
-.jux-card-title {
-  flex: 1;
-  font-size: 1.125rem;
-  font-weight: 600;
-  color: hsl(var(--foreground));
-}
-
-.jux-card-body {
-  padding: 1.5rem;
+.jux-muted {
   font-size: 0.875rem;
   color: hsl(var(--muted-foreground));
 }
 
-/* ═══════════════════════════════════════════════════════════════════
- * DROPDOWN MENU
- * ═══════════════════════════════════════════════════════════════════ */
-
-.jux-dmenu-wrapper { position: relative; display: inline-block; }
-
-.jux-dmenu-menu {
-  position: absolute;
-  top: calc(100% + 4px);
-  left: 0;
-  min-width: 220px;
-  padding: 4px;
-  border-radius: 0.5rem;
-  border: 1px solid hsl(var(--border));
-  background: hsl(var(--background));
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
-  z-index: 100;
-  display: none;
-  flex-direction: column;
-}
-
-.jux-dmenu-item {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  width: 100%;
-  padding: 6px 8px;
-  font-size: 0.875rem;
-  border-radius: 4px;
-  border: none;
-  background: transparent;
-  color: hsl(var(--foreground));
-  cursor: pointer;
-  transition: background 0.1s;
-}
-
-.jux-dmenu-item:hover {
-  background: hsl(var(--accent));
-}
-
-.jux-dmenu-sep {
-  height: 1px;
-  margin: 4px -4px;
-  background: hsl(var(--border));
-}
-
-/* ═══════════════════════════════════════════════════════════════════
- * UTILITIES
- * ═══════════════════════════════════════════════════════════════════ */
-
-hr, .jux-hr {
+hr {
   margin: 1.5rem 0;
   border: none;
   border-top: 1px solid hsl(var(--border));
 }
 
-code, .jux-inline-code {
+code {
   border-radius: 0.25rem;
   background: hsl(var(--muted));
-  padding: 0.15rem 0.3rem;
+  padding: 0.2rem 0.4rem;
   font-family: ui-monospace, monospace;
   font-size: 0.875rem;
   font-weight: 600;
+  color: hsl(var(--foreground));
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "juxscript",
-  "version": "1.1.179",
+  "version": "1.1.180",
   "type": "module",
   "description": "A JavaScript UX authorship platform",
   "main": "index.js",