juxscript 1.0.126 → 1.0.128

package/lib/componentsv2/grid/GridEngine.d.ts

@@ -4,6 +4,8 @@ export interface GridTrackConfig {
     size?: string;
     style?: string;
     class?: string;
+    width?: string;
+    height?: string;
 }
 export type GridInput = number | GridTrackConfig[];
 export interface GridState extends BaseState {

package/lib/componentsv2/grid/GridEngine.js

@@ -74,11 +74,17 @@ export class GridEngine extends BaseEngine {
             // Default to '1fr' for equal distribution
             return Array(input).fill({ size: '1fr' });
         }
-        return input.map(t => ({
-            size: t.size || '1fr',
-            style: t.style,
-            class: t.class
-        }));
+        return input.map(t => {
+            // Engine Responsibility: Normalize API aliases (width/height) into standard CSS 'size'
+            const size = t.size || t.width || t.height || '1fr';
+            return {
+                size,
+                style: t.style,
+                class: t.class,
+                width: t.width,
+                height: t.height
+            };
+        });
     }
     // --- State-Aligned Methods ---
     /**

package/lib/componentsv2/grid/GridSkin.js

@@ -28,10 +28,9 @@ export class GridSkin extends BaseSkin {
         this.root.style.height = state.height;
         this.root.style.gap = state.gap;
         // CSS Grid Definitions
-        // We accept 'size', but also semantically valid 'height' (rows) and 'width' (cols)
-        // This allows mixing units: 1fr, 200px, 20%, auto, etc.
-        const rowSizes = state.rows.map(r => r.size || r.height || 'auto').join(' ');
-        const colSizes = state.columns.map(c => c.size || c.width || 'auto').join(' ');
+        // Engine normalizes 'width'/'height' inputs into 'size', so we trust correct CSS values here.
+        const rowSizes = state.rows.map(r => r.size || 'auto').join(' ');
+        const colSizes = state.columns.map(c => c.size || 'auto').join(' ');
         this.root.style.gridTemplateRows = rowSizes;
         this.root.style.gridTemplateColumns = colSizes;
         // 2. Structural Reconciliation

package/lib/componentsv2/grid/structure.css

@@ -17,41 +17,10 @@
     flex-direction: column;
 }
 
-/* 
-   ✨ GRIDDER: The Blueprint Mode
-   Visualizes the Ordinal System 
-*/
 .jux-grid-ordinal-label {
     display: none; /* Hidden by default */
 }
 
-.jux-gridder-active {
-    background-color: var(--color-surface-base);
-    outline: 2px dashed var(--color-brand-subtle);
-    gap: 4px !important; /* Force visible gap for inspection */
-}
-
-.jux-gridder-active .jux-grid-cell {
-    border: 1px dashed var(--color-border);
-    background-color: rgba(255, 255, 255, 0.5);
-    align-items: center;
-    justify-content: center;
-}
-
-.jux-gridder-active .jux-grid-ordinal-label {
-    display: block;
-    position: absolute;
-    top: 0;
-    left: 0;
-    background: var(--color-brand);
-    color: #fff;
-    font-family: monospace;
-    font-size: 10px;
-    padding: 2px 4px;
-    opacity: 0.8;
-    z-index: 10;
-    border-bottom-right-radius: 4px;
-}
 
 .jux-grid:hover {
     background-color: var(--color-surface-hover);

package/package.json

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