juxscript 1.1.307 → 1.1.308

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

@@ -0,0 +1,58 @@
+interface ContainerOptions {
+    layout?: 'flex' | 'grid' | 'block';
+    direction?: 'row' | 'column' | 'row-reverse' | 'column-reverse';
+    wrap?: boolean;
+    gap?: string;
+    padding?: string;
+    align?: 'start' | 'center' | 'end' | 'stretch' | 'baseline';
+    justify?: 'start' | 'center' | 'end' | 'between' | 'around' | 'evenly';
+    columns?: number | string;
+    width?: string;
+    height?: string;
+    maxWidth?: string;
+    minHeight?: string;
+    class?: string;
+    style?: string;
+    target?: string;
+    tag?: string;
+    content?: string;
+    [key: string]: any;
+}
+declare class Container {
+    id: string;
+    opts: ContainerOptions;
+    private _element;
+    constructor(id: string, options?: ContainerOptions);
+    private _buildStyles;
+    getValue(): string;
+    getContent(): string;
+    setValue(val: string): this;
+    setContent(val: string): this;
+    setClass(val: string): this;
+    setStyle(val: string): this;
+    setInnerHTML(val: string): this;
+    getElement(): HTMLElement;
+}
+/**
+ * Create a layout container.
+ *
+ * @example
+ * // Flex column (default)
+ * jux.container('main', { gap: '16px', padding: '24px' });
+ *
+ * // Flex row
+ * jux.container('toolbar', { direction: 'row', gap: '8px', align: 'center' });
+ *
+ * // Grid
+ * jux.container('grid', { layout: 'grid', columns: 3, gap: '16px' });
+ *
+ * // Centered page wrapper
+ * jux.container('page', { maxWidth: '960px', padding: '24px 16px', align: 'center' });
+ *
+ * // Nested
+ * jux.container('card', { gap: '8px', padding: '16px', target: 'grid' });
+ */
+export declare function container(id: string, options?: ContainerOptions): Container;
+export { Container, ContainerOptions };
+export default container;
+//# sourceMappingURL=container.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"container.d.ts","sourceRoot":"","sources":["../../../lib/components/container.ts"],"names":[],"mappings":"AAGA,UAAU,gBAAgB;IACtB,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,OAAO,CAAC;IACnC,SAAS,CAAC,EAAE,KAAK,GAAG,QAAQ,GAAG,aAAa,GAAG,gBAAgB,CAAC;IAChE,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,KAAK,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,KAAK,GAAG,SAAS,GAAG,UAAU,CAAC;IAC5D,OAAO,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,KAAK,GAAG,SAAS,GAAG,QAAQ,GAAG,QAAQ,CAAC;IACvE,OAAO,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC1B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAC;CACtB;AAmBD,cAAM,SAAS;IACX,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,gBAAgB,CAAC;IACvB,OAAO,CAAC,QAAQ,CAAc;gBAElB,EAAE,EAAE,MAAM,EAAE,OAAO,GAAE,gBAAqB;IA6CtD,OAAO,CAAC,YAAY;IAoCpB,QAAQ,IAAI,MAAM;IAClB,UAAU,IAAI,MAAM;IAEpB,QAAQ,CAAC,GAAG,EAAE,MAAM,GAAG,IAAI;IAM3B,UAAU,CAAC,GAAG,EAAE,MAAM,GAAG,IAAI;IAE7B,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;;;;;;;;;;;;;;;;;;GAkBG;AACH,wBAAgB,SAAS,CAAC,EAAE,EAAE,MAAM,EAAE,OAAO,GAAE,gBAAqB,GAAG,SAAS,CAI/E;AAED,OAAO,EAAE,SAAS,EAAE,gBAAgB,EAAE,CAAC;AACvC,eAAe,SAAS,CAAC"}

package/dist/lib/components/container.js

@@ -0,0 +1,151 @@
+import generateId from '../utils/idgen.js';
+import { pageState } from '../state/pageState.js';
+const JUSTIFY_MAP = {
+    start: 'flex-start',
+    center: 'center',
+    end: 'flex-end',
+    between: 'space-between',
+    around: 'space-around',
+    evenly: 'space-evenly'
+};
+const ALIGN_MAP = {
+    start: 'flex-start',
+    center: 'center',
+    end: 'flex-end',
+    stretch: 'stretch',
+    baseline: 'baseline'
+};
+class Container {
+    constructor(id, options = {}) {
+        this.id = id || generateId();
+        this.opts = {
+            layout: 'flex',
+            direction: 'column',
+            tag: 'div',
+            ...options
+        };
+        this._element = document.createElement(this.opts.tag);
+        this._element.id = this.id;
+        // Classes
+        if (this.opts.class)
+            this._element.className = this.opts.class;
+        // Build computed style from layout options
+        const styles = this._buildStyles();
+        if (this.opts.style)
+            styles.push(this.opts.style);
+        if (styles.length)
+            this._element.setAttribute('style', styles.join(';'));
+        // Content (rare for containers, but supported)
+        if (this.opts.content)
+            this._element.textContent = this.opts.content;
+        // Extra attributes
+        for (const [key, value] of Object.entries(this.opts)) {
+            if ([
+                'layout', 'direction', 'wrap', 'gap', 'padding', 'align', 'justify',
+                'columns', 'width', 'height', 'maxWidth', 'minHeight',
+                'class', 'style', 'target', 'tag', 'content'
+            ].includes(key))
+                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);
+    }
+    // ═══════════════════════════════════════════════════════════
+    // LAYOUT HELPERS
+    // ═══════════════════════════════════════════════════════════
+    _buildStyles() {
+        const s = [];
+        const o = this.opts;
+        if (o.layout === 'grid') {
+            s.push('display:grid');
+            if (o.columns) {
+                const cols = typeof o.columns === 'number'
+                    ? `repeat(${o.columns}, 1fr)`
+                    : o.columns;
+                s.push(`grid-template-columns:${cols}`);
+            }
+        }
+        else if (o.layout === 'flex') {
+            s.push('display:flex');
+            if (o.direction)
+                s.push(`flex-direction:${o.direction}`);
+            if (o.wrap)
+                s.push('flex-wrap:wrap');
+        }
+        else {
+            s.push('display:block');
+        }
+        if (o.gap)
+            s.push(`gap:${o.gap}`);
+        if (o.padding)
+            s.push(`padding:${o.padding}`);
+        if (o.align)
+            s.push(`align-items:${ALIGN_MAP[o.align] || o.align}`);
+        if (o.justify)
+            s.push(`justify-content:${JUSTIFY_MAP[o.justify] || o.justify}`);
+        if (o.width)
+            s.push(`width:${o.width}`);
+        if (o.height)
+            s.push(`height:${o.height}`);
+        if (o.maxWidth)
+            s.push(`max-width:${o.maxWidth}`);
+        if (o.minHeight)
+            s.push(`min-height:${o.minHeight}`);
+        return s;
+    }
+    // ═══════════════════════════════════════════════════════════
+    // PAGESTATE INTEGRATION
+    // ═══════════════════════════════════════════════════════════
+    getValue() { return this._element.textContent ?? ''; }
+    getContent() { return this._element.textContent ?? this.opts.content ?? ''; }
+    setValue(val) {
+        this.opts.content = val;
+        this._element.textContent = val;
+        return this;
+    }
+    setContent(val) { return this.setValue(val); }
+    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 layout container.
+ *
+ * @example
+ * // Flex column (default)
+ * jux.container('main', { gap: '16px', padding: '24px' });
+ *
+ * // Flex row
+ * jux.container('toolbar', { direction: 'row', gap: '8px', align: 'center' });
+ *
+ * // Grid
+ * jux.container('grid', { layout: 'grid', columns: 3, gap: '16px' });
+ *
+ * // Centered page wrapper
+ * jux.container('page', { maxWidth: '960px', padding: '24px 16px', align: 'center' });
+ *
+ * // Nested
+ * jux.container('card', { gap: '8px', padding: '16px', target: 'grid' });
+ */
+export function container(id, options = {}) {
+    const c = new Container(id, options);
+    pageState.__register(c);
+    return c;
+}
+export { Container };
+export default container;

package/dist/lib/index.d.ts

@@ -15,6 +15,7 @@ import { list } from "./components/list.js";
 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";
 export declare const jux: {
     tag: typeof tag;
     div: typeof div;
@@ -46,6 +47,7 @@ export declare const jux: {
     btn: typeof btn;
     link: typeof link;
     a: typeof a;
+    container: typeof container;
 };
 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,MAAM,uBAAuB,CAAC;AAC9C,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;AAE/C,eAAO,MAAM,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA0Bf,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,MAAM,uBAAuB,CAAC;AAC9C,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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA2Bf,CAAA;AAED,OAAO,EAAE,SAAS,EAAE,CAAC"}

package/dist/lib/index.js

@@ -15,6 +15,7 @@ import { list } from "./components/list.js";
 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";
 export const jux = {
     tag,
     div,
@@ -40,7 +41,8 @@ export const jux = {
     button,
     btn,
     link,
-    a
+    a,
+    container
 };
 export { pageState };
 jux.watch = pageState.__watch;

package/package.json

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