juxscript 1.1.313 → 1.1.314

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

@@ -0,0 +1,44 @@
+type GridDensity = 'dense' | 'normal' | 'inflated';
+interface GridOptions {
+    rows?: number;
+    cols?: number;
+    density?: GridDensity;
+    class?: string;
+    style?: string;
+    target?: string;
+    [key: string]: any;
+}
+declare class Grid {
+    id: string;
+    opts: GridOptions;
+    private _element;
+    constructor(id: string, options?: GridOptions);
+    getValue(): string;
+    getContent(): string;
+    setContent(val: string): this;
+    setClass(val: string): this;
+    setStyle(val: string): this;
+    setInnerHTML(val: string): this;
+    getElement(): HTMLElement;
+}
+/**
+ * Create a CSS grid layout container.
+ *
+ * @example
+ * // 3-column grid, normal spacing
+ * 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' });
+ *
+ * // Add children into it
+ * jux.div('cell-1', { content: 'A', target: 'cards' });
+ * jux.div('cell-2', { content: 'B', target: 'cards' });
+ */
+export declare function grid(id: string, options?: GridOptions): Grid;
+export { Grid, GridOptions, GridDensity };
+export default grid;
+//# sourceMappingURL=grid.d.ts.map

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

@@ -0,0 +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"}

package/dist/lib/components/grid.js

@@ -0,0 +1,91 @@
+import generateId from '../utils/idgen.js';
+import { pageState } from '../state/pageState.js';
+const DENSITY_MAP = {
+    dense: { gap: '4px', padding: '4px' },
+    normal: { gap: '12px', padding: '12px' },
+    inflated: { gap: '24px', padding: '24px' },
+};
+class Grid {
+    constructor(id, options = {}) {
+        this.id = id || generateId();
+        this.opts = {
+            cols: 2,
+            density: 'normal',
+            ...options
+        };
+        this._element = document.createElement('div');
+        this._element.id = this.id;
+        if (this.opts.class)
+            this._element.className = this.opts.class;
+        const d = DENSITY_MAP[this.opts.density] || DENSITY_MAP.normal;
+        const parts = [
+            'display:grid',
+            `grid-template-columns:repeat(${this.opts.cols}, 1fr)`,
+            `gap:${d.gap}`,
+            `padding:${d.padding}`,
+        ];
+        if (this.opts.rows) {
+            parts.push(`grid-template-rows:repeat(${this.opts.rows}, auto)`);
+        }
+        if (this.opts.style)
+            parts.push(this.opts.style);
+        this._element.setAttribute('style', parts.join(';'));
+        // Extra attributes
+        for (const [key, value] of Object.entries(this.opts)) {
+            if (['rows', 'cols', 'density', 'class', 'style', 'target'].includes(key))
+                continue;
+            this._element.setAttribute(`data-${key}`, String(value));
+        }
+        const resolvedTarget = this.opts.target;
+        const parent = resolvedTarget
+            ? document.getElementById(resolvedTarget) || document.querySelector(resolvedTarget)
+            : document.getElementById('app');
+        parent?.appendChild(this._element);
+    }
+    // ═══════════════════════════════════════════════════════════
+    // PAGESTATE INTEGRATION
+    // ═══════════════════════════════════════════════════════════
+    getValue() { return ''; }
+    getContent() { return this._element.textContent ?? ''; }
+    setContent(val) {
+        this._element.textContent = val;
+        return this;
+    }
+    setClass(val) {
+        this._element.className = val;
+        return this;
+    }
+    setStyle(val) {
+        this._element.setAttribute('style', val);
+        return this;
+    }
+    setInnerHTML(val) {
+        this._element.innerHTML = val;
+        return this;
+    }
+    getElement() { return this._element; }
+}
+/**
+ * Create a CSS grid layout container.
+ *
+ * @example
+ * // 3-column grid, normal spacing
+ * 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' });
+ *
+ * // Add children into it
+ * jux.div('cell-1', { content: 'A', target: 'cards' });
+ * jux.div('cell-2', { content: 'B', target: 'cards' });
+ */
+export function grid(id, options = {}) {
+    const g = new Grid(id, options);
+    pageState.__register(g);
+    return g;
+}
+export { Grid };
+export default grid;

package/dist/lib/index.d.ts

@@ -16,6 +16,7 @@ import { tabs } from "./components/tabs.js";
 import { button, btn } from "./components/button.js";
 import { link, a } from "./components/link.js";
 import { container } from "./components/container.js";
+import { grid } from "./components/grid.js";
 export declare const jux: {
     tag: typeof tag;
     div: typeof div;
@@ -61,6 +62,7 @@ export declare const jux: {
     link: typeof link;
     a: typeof a;
     container: typeof container;
+    grid: typeof grid;
 };
 export { pageState };
 //# sourceMappingURL=index.d.ts.map

package/dist/lib/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../lib/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,GAAG,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,CAAC,EAAE,IAAI,EAAE,GAAG,EAAE,IAAI,EAAE,MAAM,qBAAqB,CAAC;AAC3F,OAAO,EAAE,OAAO,EAAE,MAAM,yBAAyB,CAAC;AAClD,OAAO,EAAE,KAAK,EAAE,KAAK,EAAE,QAAQ,EAAE,MAAM,EAAE,GAAG,EAAE,GAAG,EAAE,MAAM,EAAE,IAAI,EAAE,IAAI,EAAE,QAAQ,EAAE,KAAK,EAAE,KAAK,EAAE,IAAI,EAAE,MAAM,EAAE,MAAM,uBAAuB,CAAC;AAC3I,OAAO,EAAE,MAAM,EAAE,MAAM,wBAAwB,CAAC;AAChD,OAAO,EAAE,KAAK,EAAE,MAAM,uBAAuB,CAAC;AAC9C,OAAO,EAAE,QAAQ,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAC;AACnE,OAAO,EAAE,SAAS,EAAE,MAAM,sBAAsB,CAAC;AACjD,OAAO,EAAE,IAAI,EAAE,MAAM,sBAAsB,CAAC;AAC5C,OAAO,EAAE,KAAK,EAAE,MAAM,uBAAuB,CAAC;AAC9C,OAAO,EAAE,QAAQ,EAAE,MAAM,wBAAwB,CAAC;AAClD,OAAO,EAAE,KAAK,EAAE,MAAM,uBAAuB,CAAC;AAC9C,OAAO,EAAE,GAAG,EAAE,MAAM,qBAAqB,CAAC;AAC1C,OAAO,EAAE,KAAK,EAAE,MAAM,uBAAuB,CAAC;AAC9C,OAAO,EAAE,IAAI,EAAE,MAAM,sBAAsB,CAAC;AAC5C,OAAO,EAAE,IAAI,EAAE,MAAM,sBAAsB,CAAC;AAC5C,OAAO,EAAE,MAAM,EAAE,GAAG,EAAE,MAAM,wBAAwB,CAAC;AACrD,OAAO,EAAE,IAAI,EAAE,CAAC,EAAE,MAAM,sBAAsB,CAAC;AAC/C,OAAO,EAAE,SAAS,EAAE,MAAM,2BAA2B,CAAC;AAEtD,eAAO,MAAM,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAwCf,CAAA;AAED,OAAO,EAAE,SAAS,EAAE,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../lib/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,GAAG,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,CAAC,EAAE,IAAI,EAAE,GAAG,EAAE,IAAI,EAAE,MAAM,qBAAqB,CAAC;AAC3F,OAAO,EAAE,OAAO,EAAE,MAAM,yBAAyB,CAAC;AAClD,OAAO,EAAE,KAAK,EAAE,KAAK,EAAE,QAAQ,EAAE,MAAM,EAAE,GAAG,EAAE,GAAG,EAAE,MAAM,EAAE,IAAI,EAAE,IAAI,EAAE,QAAQ,EAAE,KAAK,EAAE,KAAK,EAAE,IAAI,EAAE,MAAM,EAAE,MAAM,uBAAuB,CAAC;AAC3I,OAAO,EAAE,MAAM,EAAE,MAAM,wBAAwB,CAAC;AAChD,OAAO,EAAE,KAAK,EAAE,MAAM,uBAAuB,CAAC;AAC9C,OAAO,EAAE,QAAQ,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAC;AACnE,OAAO,EAAE,SAAS,EAAE,MAAM,sBAAsB,CAAC;AACjD,OAAO,EAAE,IAAI,EAAE,MAAM,sBAAsB,CAAC;AAC5C,OAAO,EAAE,KAAK,EAAE,MAAM,uBAAuB,CAAC;AAC9C,OAAO,EAAE,QAAQ,EAAE,MAAM,wBAAwB,CAAC;AAClD,OAAO,EAAE,KAAK,EAAE,MAAM,uBAAuB,CAAC;AAC9C,OAAO,EAAE,GAAG,EAAE,MAAM,qBAAqB,CAAC;AAC1C,OAAO,EAAE,KAAK,EAAE,MAAM,uBAAuB,CAAC;AAC9C,OAAO,EAAE,IAAI,EAAE,MAAM,sBAAsB,CAAC;AAC5C,OAAO,EAAE,IAAI,EAAE,MAAM,sBAAsB,CAAC;AAC5C,OAAO,EAAE,MAAM,EAAE,GAAG,EAAE,MAAM,wBAAwB,CAAC;AACrD,OAAO,EAAE,IAAI,EAAE,CAAC,EAAE,MAAM,sBAAsB,CAAC;AAC/C,OAAO,EAAE,SAAS,EAAE,MAAM,2BAA2B,CAAC;AACtD,OAAO,EAAE,IAAI,EAAE,MAAM,sBAAsB,CAAC;AAE5C,eAAO,MAAM,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAyCf,CAAA;AAED,OAAO,EAAE,SAAS,EAAE,CAAC"}

package/dist/lib/index.js

@@ -16,6 +16,7 @@ import { tabs } from "./components/tabs.js";
 import { button, btn } from "./components/button.js";
 import { link, a } from "./components/link.js";
 import { container } from "./components/container.js";
+import { grid } from "./components/grid.js";
 export const jux = {
     tag,
     div,
@@ -55,7 +56,8 @@ export const jux = {
     btn,
     link,
     a,
-    container
+    container,
+    grid
 };
 export { pageState };
 jux.watch = pageState.__watch;

package/package.json

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