juxscript 1.1.212 → 1.1.214

package/lib/styles/shadcn.css

@@ -158,6 +158,20 @@ p { line-height: 1.75; color: hsl(var(--foreground)); }
   flex-direction: column;
   gap: 1rem;
   width: 100%;
+  min-width: 0; /* ✅ Allow flex item to shrink below content size */
+  max-width: 100%; /* ✅ Prevent overflow of parent */
+  overflow: hidden; /* ✅ Contain overflow */
+}
+
+/* ✅ Ensure table respects dataframe container */
+.jux-dataframe .jux-table-wrapper {
+  min-width: 0;
+  max-width: 100%;
+  overflow-x: auto;
+}
+
+.jux-dataframe .jux-table {
+  min-width: 0;
 }
 
 /* ✅ NEW: Enhanced upload area */
@@ -701,4 +715,137 @@ code {
   display: inline-flex;
   align-items: center;
   flex-shrink: 0;
+}
+
+/* ══════════════════════════════════════════════════════════════════
+   JUX STACKS - Layout System
+   Uses foundation tokens for spacing, auto-adapts to themes
+   ══════════════════════════════════════════════════════════════════ */
+
+/* ═════════════════════════════════════════════════════════════════
+ * BASE STACK STYLES
+ * ═════════════════════════════════════════════════════════════════ */
+
+.jux-vstack,
+.jux-hstack,
+.jux-zstack {
+  display: flex;
+  
+  /* ✅ Use CSS variables from foundation/theme */
+  gap: var(--jux-gap, 1rem);
+  padding: var(--jux-pad, 0);
+  
+  /* Default alignment */
+  align-items: var(--jux-align, flex-start);
+}
+
+/* ═════════════════════════════════════════════════════════════════
+ * VERTICAL STACK (Column)
+ * ═════════════════════════════════════════════════════════════════ */
+
+.jux-vstack {
+  flex-direction: column;
+}
+
+/* ═════════════════════════════════════════════════════════════════
+ * HORIZONTAL STACK (Row)
+ * ═════════════════════════════════════════════════════════════════ */
+
+.jux-hstack {
+  flex-direction: row;
+  flex-wrap: wrap; /* Allow wrapping on mobile */
+}
+
+/* ═════════════════════════════════════════════════════════════════
+ * Z-STACK (Layered)
+ * ═════════════════════════════════════════════════════════════════ */
+
+.jux-zstack {
+  position: relative;
+  flex-direction: column;
+}
+
+.jux-zstack > * {
+  position: absolute;
+  top: 0;
+  left: 0;
+}
+
+/* ═════════════════════════════════════════════════════════════════
+ * ALIGNMENT UTILITIES (Via CSS Variables)
+ * Applied via .align-* descriptor classes
+ * ═════════════════════════════════════════════════════════════════ */
+
+.align-start    { --jux-align: flex-start; }
+.align-center   { --jux-align: center; }
+.align-end      { --jux-align: flex-end; }
+.align-stretch  { --jux-align: stretch; }
+.align-baseline { --jux-align: baseline; }
+
+/* ═════════════════════════════════════════════════════════════════
+ * JUSTIFY CONTENT (For HStack distribution)
+ * ═════════════════════════════════════════════════════════════════ */
+
+.justify-start   { justify-content: flex-start; }
+.justify-center  { justify-content: center; }
+.justify-end     { justify-content: flex-end; }
+.justify-between { justify-content: space-between; }
+.justify-around  { justify-content: space-around; }
+.justify-evenly  { justify-content: space-evenly; }
+
+/* ═════════════════════════════════════════════════════════════════
+ * RESPONSIVE BEHAVIOR
+ * HStack becomes VStack on mobile for better UX
+ * ═════════════════════════════════════════════════════════════════ */
+
+@media (max-width: 768px) {
+  .jux-hstack {
+    flex-direction: column;
+    /* Gap remains consistent via CSS variables */
+  }
+  
+  /* Optional: Force HStack to stay horizontal on mobile */
+  .jux-hstack.stay-horizontal {
+    flex-direction: row;
+  }
+}
+
+/* ═════════════════════════════════════════════════════════════════
+ * FULL WIDTH/HEIGHT UTILITIES
+ * ═════════════════════════════════════════════════════════════════ */
+
+.full-width {
+  width: 100%;
+}
+
+.full-height {
+  height: 100%;
+  min-height: 100vh;
+}
+
+/* ═════════════════════════════════════════════════════════════════
+ * CENTERED CONTENT (Common Layout Pattern)
+ * ═════════════════════════════════════════════════════════════════ */
+
+.center-content {
+  justify-content: center;
+  align-items: center;
+}
+
+/* ═════════════════════════════════════════════════════════════════
+ * SCROLL BEHAVIOR
+ * ═════════════════════════════════════════════════════════════════ */
+
+.scroll-x {
+  overflow-x: auto;
+  overflow-y: hidden;
+}
+
+.scroll-y {
+  overflow-y: auto;
+  overflow-x: hidden;
+}
+
+.scroll-both {
+  overflow: auto;
 }

package/package.json

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