juxscript 1.1.314 → 1.1.315

package/dist/lib/components/grid.d.ts

@@ -1,7 +1,11 @@
 type GridDensity = 'dense' | 'normal' | 'inflated';
+interface GridColumn {
+    name: string;
+    width?: string;
+}
 interface GridOptions {
     rows?: number;
-    cols?: number;
+    cols?: number | GridColumn[];
     density?: GridDensity;
     class?: string;
     style?: string;
@@ -12,6 +16,7 @@ declare class Grid {
     id: string;
     opts: GridOptions;
     private _element;
+    private _columns;
     constructor(id: string, options?: GridOptions);
     getValue(): string;
     getContent(): string;
@@ -20,25 +25,34 @@ declare class Grid {
     setStyle(val: string): this;
     setInnerHTML(val: string): this;
     getElement(): HTMLElement;
+    /** Get a named column cell element */
+    getColumn(name: string): HTMLElement | null;
+    getColumns(): GridColumn[];
 }
 /**
  * Create a CSS grid layout container.
  *
  * @example
- * // 3-column grid, normal spacing
+ * // Simple: 3 equal columns
  * jux.grid('cards', { cols: 3 });
  *
- * // 2x4 tight grid
- * jux.grid('dashboard', { cols: 4, rows: 2, density: 'dense' });
- *
- * // Spacious 2-col grid inside a target
- * jux.grid('content', { cols: 2, density: 'inflated', target: 'main' });
+ * // Named columns with custom widths
+ * jux.grid('layout', {
+ *     cols: [
+ *         { name: 'sidebar', width: '260px' },
+ *         { name: 'content', width: '3fr' },
+ *         { name: 'aside',   width: '1fr' },
+ *     ]
+ * });
+ * // Then target into them:
+ * jux.nav('main-nav', { target: 'sidebar' });
+ * jux.h1('title', { content: 'Hello', target: 'content' });
  *
- * // Add children into it
- * jux.div('cell-1', { content: 'A', target: 'cards' });
- * jux.div('cell-2', { content: 'B', target: 'cards' });
+ * // Density options
+ * jux.grid('tight', { cols: 4, density: 'dense' });
+ * jux.grid('spacious', { cols: 2, density: 'inflated' });
  */
 export declare function grid(id: string, options?: GridOptions): Grid;
-export { Grid, GridOptions, GridDensity };
+export { Grid, GridOptions, GridColumn, GridDensity };
 export default grid;
 //# sourceMappingURL=grid.d.ts.map

package/dist/lib/components/grid.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"grid.d.ts","sourceRoot":"","sources":["../../../lib/components/grid.ts"],"names":[],"mappings":"AAGA,KAAK,WAAW,GAAG,OAAO,GAAG,QAAQ,GAAG,UAAU,CAAC;AAEnD,UAAU,WAAW;IACjB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,WAAW,CAAC;IACtB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAC;CACtB;AAQD,cAAM,IAAI;IACN,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,WAAW,CAAC;IAClB,OAAO,CAAC,QAAQ,CAAc;gBAElB,EAAE,EAAE,MAAM,EAAE,OAAO,GAAE,WAAgB;IA0CjD,QAAQ,IAAI,MAAM;IAClB,UAAU,IAAI,MAAM;IAEpB,UAAU,CAAC,GAAG,EAAE,MAAM,GAAG,IAAI;IAK7B,QAAQ,CAAC,GAAG,EAAE,MAAM,GAAG,IAAI;IAK3B,QAAQ,CAAC,GAAG,EAAE,MAAM,GAAG,IAAI;IAK3B,YAAY,CAAC,GAAG,EAAE,MAAM,GAAG,IAAI;IAK/B,UAAU,IAAI,WAAW;CAC5B;AAED;;;;;;;;;;;;;;;;GAgBG;AACH,wBAAgB,IAAI,CAAC,EAAE,EAAE,MAAM,EAAE,OAAO,GAAE,WAAgB,GAAG,IAAI,CAIhE;AAED,OAAO,EAAE,IAAI,EAAE,WAAW,EAAE,WAAW,EAAE,CAAC;AAC1C,eAAe,IAAI,CAAC"}
+{"version":3,"file":"grid.d.ts","sourceRoot":"","sources":["../../../lib/components/grid.ts"],"names":[],"mappings":"AAGA,KAAK,WAAW,GAAG,OAAO,GAAG,QAAQ,GAAG,UAAU,CAAC;AAEnD,UAAU,UAAU;IAChB,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,CAAC,EAAE,MAAM,CAAC;CAClB;AAED,UAAU,WAAW;IACjB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,GAAG,UAAU,EAAE,CAAC;IAC7B,OAAO,CAAC,EAAE,WAAW,CAAC;IACtB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAC;CACtB;AAQD,cAAM,IAAI;IACN,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,WAAW,CAAC;IAClB,OAAO,CAAC,QAAQ,CAAc;IAC9B,OAAO,CAAC,QAAQ,CAAoB;gBAExB,EAAE,EAAE,MAAM,EAAE,OAAO,GAAE,WAAgB;IAoEjD,QAAQ,IAAI,MAAM;IAClB,UAAU,IAAI,MAAM;IAEpB,UAAU,CAAC,GAAG,EAAE,MAAM,GAAG,IAAI;IAK7B,QAAQ,CAAC,GAAG,EAAE,MAAM,GAAG,IAAI;IAK3B,QAAQ,CAAC,GAAG,EAAE,MAAM,GAAG,IAAI;IAK3B,YAAY,CAAC,GAAG,EAAE,MAAM,GAAG,IAAI;IAK/B,UAAU,IAAI,WAAW;IAEzB,sCAAsC;IACtC,SAAS,CAAC,IAAI,EAAE,MAAM,GAAG,WAAW,GAAG,IAAI;IAI3C,UAAU,IAAI,UAAU,EAAE;CAC7B;AAED;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,wBAAgB,IAAI,CAAC,EAAE,EAAE,MAAM,EAAE,OAAO,GAAE,WAAgB,GAAG,IAAI,CAIhE;AAED,OAAO,EAAE,IAAI,EAAE,WAAW,EAAE,UAAU,EAAE,WAAW,EAAE,CAAC;AACtD,eAAe,IAAI,CAAC"}

package/dist/lib/components/grid.js

@@ -7,6 +7,7 @@ const DENSITY_MAP = {
 };
 class Grid {
     constructor(id, options = {}) {
+        this._columns = [];
         this.id = id || generateId();
         this.opts = {
             cols: 2,
@@ -17,10 +18,24 @@ class Grid {
         this._element.id = this.id;
         if (this.opts.class)
             this._element.className = this.opts.class;
+        // Resolve columns
+        const cols = this.opts.cols;
+        let templateCols;
+        if (Array.isArray(cols)) {
+            this._columns = cols.map(c => ({
+                name: c.name,
+                width: c.width || '1fr'
+            }));
+            templateCols = this._columns.map(c => c.width).join(' ');
+        }
+        else {
+            const count = cols || 2;
+            templateCols = `repeat(${count}, 1fr)`;
+        }
         const d = DENSITY_MAP[this.opts.density] || DENSITY_MAP.normal;
         const parts = [
             'display:grid',
-            `grid-template-columns:repeat(${this.opts.cols}, 1fr)`,
+            `grid-template-columns:${templateCols}`,
             `gap:${d.gap}`,
             `padding:${d.padding}`,
         ];
@@ -36,11 +51,21 @@ class Grid {
                 continue;
             this._element.setAttribute(`data-${key}`, String(value));
         }
+        // Mount
         const resolvedTarget = this.opts.target;
         const parent = resolvedTarget
             ? document.getElementById(resolvedTarget) || document.querySelector(resolvedTarget)
             : document.getElementById('app');
         parent?.appendChild(this._element);
+        // Create named column cells if using array cols
+        if (this._columns.length > 0) {
+            for (const col of this._columns) {
+                const cell = document.createElement('div');
+                cell.id = col.name;
+                cell.setAttribute('data-grid-col', col.name);
+                this._element.appendChild(cell);
+            }
+        }
     }
     // ═══════════════════════════════════════════════════════════
     // PAGESTATE INTEGRATION
@@ -64,23 +89,34 @@ class Grid {
         return this;
     }
     getElement() { return this._element; }
+    /** Get a named column cell element */
+    getColumn(name) {
+        return this._element.querySelector(`[data-grid-col="${name}"]`);
+    }
+    getColumns() { return [...this._columns]; }
 }
 /**
  * Create a CSS grid layout container.
  *
  * @example
- * // 3-column grid, normal spacing
+ * // Simple: 3 equal columns
  * jux.grid('cards', { cols: 3 });
  *
- * // 2x4 tight grid
- * jux.grid('dashboard', { cols: 4, rows: 2, density: 'dense' });
- *
- * // Spacious 2-col grid inside a target
- * jux.grid('content', { cols: 2, density: 'inflated', target: 'main' });
+ * // Named columns with custom widths
+ * jux.grid('layout', {
+ *     cols: [
+ *         { name: 'sidebar', width: '260px' },
+ *         { name: 'content', width: '3fr' },
+ *         { name: 'aside',   width: '1fr' },
+ *     ]
+ * });
+ * // Then target into them:
+ * jux.nav('main-nav', { target: 'sidebar' });
+ * jux.h1('title', { content: 'Hello', target: 'content' });
  *
- * // Add children into it
- * jux.div('cell-1', { content: 'A', target: 'cards' });
- * jux.div('cell-2', { content: 'B', target: 'cards' });
+ * // Density options
+ * jux.grid('tight', { cols: 4, density: 'dense' });
+ * jux.grid('spacious', { cols: 2, density: 'inflated' });
  */
 export function grid(id, options = {}) {
     const g = new Grid(id, options);

package/package.json

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