juxscript 1.0.101 → 1.0.103

package/lib/componentsv2/base/State.ts

@@ -1,62 +0,0 @@
-/**
- * REGINALD'S LEDGER
- * A protected reactive container for atomic state management.
- */
-export class State<T> {
-    #value: T;
-    #subscribers: Set<(value: T) => void> = new Set();
-    #history: string[] = [];
-    #future: string[] = [];
-
-    constructor(initialValue: T) {
-        this.#value = initialValue;
-    }
-
-    get value(): T {
-        return JSON.parse(JSON.stringify(this.#value));
-    }
-
-    /**
-     * Access the timeline of past states (The Ledger).
-     */
-    get history(): string[] {
-        return [...this.#history];
-    }
-
-    set(newValue: T): void {
-        // Snap state serially before change
-        this.#history.push(JSON.stringify(this.#value));
-        this.#future = []; // Clear future timeline on new divergence
-        this.#value = newValue;
-        this.#notify();
-    }
-
-    rollback(): void {
-        const previous = this.#history.pop();
-        if (previous !== undefined) {
-            this.#future.push(JSON.stringify(this.#value)); // Save current for redo
-            this.#value = JSON.parse(previous);
-            this.#notify();
-        }
-    }
-
-    rollforward(): void {
-        const next = this.#future.pop();
-        if (next !== undefined) {
-            this.#history.push(JSON.stringify(this.#value)); // Save current for undo
-            this.#value = JSON.parse(next);
-            this.#notify();
-        }
-    }
-
-    subscribe(callback: (value: T) => void): () => void {
-        this.#subscribers.add(callback);
-        callback(this.value); // Immediate handshake
-        return () => this.#subscribers.delete(callback);
-    }
-
-    #notify(): void {
-        const currentValue = this.value;
-        this.#subscribers.forEach(callback => callback(currentValue));
-    }
-}

package/lib/componentsv2/element/component.ts

@@ -1,54 +0,0 @@
-import { ElementEngine, ElementOptions } from './engine.js';
-import { ElementSkin } from './skin.js';
-
-export type ElementComponent = ElementEngine & {
-    render: (targetId: string | HTMLElement) => ElementComponent;
-    injectCSS: (id: string, cssContent: string) => void;
-};
-
-/**
- * OPTIONS CONTRACT for Element:
- * 
- * | Option       | Type   | Default | Aliases                          |
- * |--------------|--------|---------|----------------------------------|
- * | tagName      | string | 'div'   | tag, element, type               |
- * | content      | string | ''      | text, html, innerHTML, value     |
- * | contentType  | string | 'text'  | type, mode                       |
- * | inlineStyle  | string | ''      | style, css, styles               |
- * 
- * METHODS (match state properties):
- * - .tagName(value)     - Set HTML tag
- * - .content(value, type) - Set content with type
- * - .contentType(type)  - Set content type
- * - .inlineStyle(css)   - Set inline styles
- * 
- * CONVENIENCE ALIASES:
- * - .tag(value)  → .tagName(value)
- * - .text(value) → .content(value, 'text')
- * - .html(value) → .content(value, 'html')
- * - .style(css)  → .inlineStyle(css)
- */
-export function Element(id: string, options: ElementOptions = {}): ElementComponent {
-    const engine = new ElementEngine(id, options);
-
-    if (typeof window !== 'undefined') {
-        // @ts-ignore
-        window.juxEngines = window.juxEngines || {};
-        // @ts-ignore
-        window.juxEngines[id] = engine;
-    }
-
-    const skin = new ElementSkin(engine);
-
-    // @ts-ignore
-    engine.render = (targetId: string | HTMLElement) => {
-        const target = typeof targetId === 'string' ? document.getElementById(targetId) : targetId;
-        if (target) skin.renderSkin(target);
-        return engine as ElementComponent;
-    };
-
-    // @ts-ignore
-    engine.injectCSS = (id: string, css: string) => skin.injectCSS(id, css);
-
-    return engine as ElementComponent;
-}

package/lib/componentsv2/element/engine.ts

@@ -1,145 +0,0 @@
-import { BaseEngine, BaseState } from '../base/BaseEngine.js';
-import { OptionsContractSchema } from '../base/OptionsContract.js';
-
-export interface ElementState extends BaseState {
-    tagName: string;
-    content: string | null;
-    contentType: 'text' | 'html';
-    inlineStyle: string;
-}
-
-export interface ElementOptions {
-    tagName?: string;
-    content?: string;
-    contentType?: 'text' | 'html';
-    inlineStyle?: string;
-}
-
-export class ElementEngine extends BaseEngine<ElementState, ElementOptions> {
-    constructor(id: string, options: ElementOptions = {}) {
-        super(id, options);
-    }
-
-    /**
-     * OPTIONS CONTRACT
-     * Defines valid options with types, defaults, and aliases for common mistakes.
-     */
-    protected get optionsSchema(): OptionsContractSchema {
-        return {
-            tagName: {
-                type: 'string',
-                default: 'div',
-                description: 'HTML tag name (e.g., "div", "span", "h1")',
-                aliases: ['tag', 'element', 'type']
-            },
-            content: {
-                type: 'string',
-                default: '',
-                description: 'Text or HTML content',
-                aliases: ['text', 'html', 'innerHTML', 'textContent', 'value']
-            },
-            contentType: {
-                type: 'string',
-                default: 'text',
-                description: 'Content type: "text" (escaped) or "html" (raw)',
-                aliases: ['type', 'mode']
-            },
-            inlineStyle: {
-                type: 'string',
-                default: '',
-                description: 'Inline CSS styles (e.g., "color: red;")',
-                aliases: ['style', 'css', 'styles']
-            }
-        };
-    }
-
-    protected prepareState(id: string, options: ElementOptions): ElementState {
-        return {
-            id,
-            classes: ['jux-element'],
-            visible: true,
-            disabled: false,
-            loading: false,
-            attributes: {},
-            tagName: options.tagName || 'div',
-            content: options.content || '',
-            contentType: options.contentType || 'text',
-            inlineStyle: options.inlineStyle || ''
-        };
-    }
-
-    /**
-     * Set the HTML tag name (e.g., 'div', 'span', 'h1', 'section')
-     * Method name matches state property: tagName
-     */
-    tagName(value: string): this {
-        this.updateState({ tagName: value });
-        this.emit('config', { tagName: value });
-        return this;
-    }
-
-    /**
-     * Set content with explicit type
-     * Method name matches state property: content
-     */
-    content(value: string, type: 'text' | 'html' = 'text'): this {
-        this.updateState({ content: value, contentType: type });
-        return this;
-    }
-
-    /**
-     * Set content type
-     * Method name matches state property: contentType
-     */
-    contentType(type: 'text' | 'html'): this {
-        this.updateState({ contentType: type });
-        return this;
-    }
-
-    /**
-     * Set inline styles (e.g., "color: red; margin: 10px;")
-     * Method name matches state property: inlineStyle
-     */
-    inlineStyle(cssText: string): this {
-        this.updateState({ inlineStyle: cssText });
-        return this;
-    }
-
-    // --- Convenience Aliases (documented as such) ---
-
-    /** @alias for tagName() */
-    tag(value: string): this {
-        return this.tagName(value);
-    }
-
-    /** @alias for content(value, 'text') */
-    text(value: string): this {
-        return this.content(value, 'text');
-    }
-
-    /** @alias for content(value, 'html') */
-    html(value: string): this {
-        return this.content(value, 'html');
-    }
-
-    /** @alias for inlineStyle() */
-    style(cssText: string): this {
-        return this.inlineStyle(cssText);
-    }
-
-    /**
-     * Append raw HTML to existing content
-     */
-    appendHtml(value: string): this {
-        const current = this.state.content || '';
-        this.updateState({ content: current + value, contentType: 'html' });
-        return this;
-    }
-
-    /**
-     * Receives RAW DOM events from the Skin and emits them to listeners.
-     */
-    handleEvent(eventName: string, content: any): void {
-        this.emit(eventName, content);
-    }
-}

package/lib/componentsv2/element/skin.ts

@@ -1,64 +0,0 @@
-import { BaseSkin } from '../base/BaseSkin.js';
-import { ElementEngine, ElementState } from './engine.js';
-import structureCss from './structure.css';
-
-export class ElementSkin extends BaseSkin<ElementState, ElementEngine> {
-    constructor(engine: ElementEngine) {
-        super(engine);
-    }
-
-    protected get structureCss(): string {
-        return structureCss;
-    }
-
-    protected createRoot(): HTMLElement {
-        // Use state.tagName (consistent naming)
-        const tagName = this.engine.state.tagName || 'div';
-        return document.createElement(tagName);
-    }
-
-    protected bindEvents(root: HTMLElement): void {
-        // ✅ Forward common events to the engine via public handler
-        // This allows engine.on('click', ...) to work without skin accessing protected 'emit'
-        const events = ['click', 'mouseenter', 'mouseleave', 'input', 'change', 'focus', 'blur'];
-
-        events.forEach(eventName => {
-            root.addEventListener(eventName, (e) => {
-                this.engine.handleEvent(eventName, e);
-            });
-        });
-    }
-
-    protected updateSkin(state: ElementState): void {
-        // 1. Tag Replacement Logic (uses state.tagName)
-        if (this.root && this.root.tagName.toLowerCase() !== state.tagName.toLowerCase()) {
-            const newRoot = document.createElement(state.tagName);
-
-            if (this.root.parentNode) {
-                this.root.parentNode.replaceChild(newRoot, this.root);
-            }
-
-            this.root = newRoot;
-            this.bindEvents(this.root);
-        }
-
-        if (!this.root) return;
-
-        this.root.id = state.id;
-
-        // 2. Base Attributes
-        this.applySkinAttributes(this.root, state);
-
-        // 3. Content (uses state.content and state.contentType)
-        if (state.contentType === 'html') {
-            this.root.innerHTML = state.content || '';
-        } else {
-            this.root.textContent = state.content || '';
-        }
-
-        // 4. Inline Styles (uses state.inlineStyle)
-        if (state.inlineStyle) {
-            this.root.style.cssText = state.inlineStyle;
-        }
-    }
-}

package/lib/componentsv2/grid/component.ts

@@ -1,57 +0,0 @@
-import { GridEngine, GridOptions, GridInput } from './engine.js';
-import { GridSkin } from './skin.js';
-
-export type GridComponent = GridEngine & {
-    render: (targetId: string | HTMLElement) => GridComponent;
-    injectCSS: (id: string, cssContent: string) => void;
-
-    // Structure
-    rows: (config: GridInput) => GridComponent;
-    columns: (config: GridInput) => GridComponent;
-    gap: (gap: string) => GridComponent;
-    boundaryWidth: (width: string) => GridComponent;
-    boundaryHeight: (height: string) => GridComponent;
-
-    // Tools
-    gridder: (active?: boolean) => GridComponent;
-
-    // Helpers
-    getCellId: (row: number, col: number) => string;
-};
-
-export function Grid(id: string, options: GridOptions = {}): GridComponent {
-    const engine = new GridEngine(id, options);
-
-    if (typeof window !== 'undefined') {
-        // @ts-ignore
-        window.juxEngines = window.juxEngines || {};
-        // @ts-ignore
-        window.juxEngines[id] = engine;
-    }
-
-    const skin = new GridSkin(engine);
-
-    // Dynamic Augmentation
-
-    // @ts-ignore
-    engine.render = (targetId: string | HTMLElement) => {
-        const target = typeof targetId === 'string' ? document.getElementById(targetId) : targetId;
-        if (target) skin.renderSkin(target);
-        return engine as GridComponent;
-    };
-
-    // @ts-ignore
-    engine.injectCSS = (id, css) => skin.injectCSS(id, css);
-
-    // --- Structural API ---
-
-    // --- Tools ---
-    // @ts-ignore
-    engine.gridder = (active?: boolean) => { engine.toggleGridder(active); return engine; };
-
-    // --- Helpers ---
-    // @ts-ignore
-    engine.getCellId = (row: number, col: number) => `${id}-${row}-${col}`;
-
-    return engine as GridComponent;
-}

package/lib/componentsv2/grid/engine.ts

@@ -1,187 +0,0 @@
-import { BaseEngine, BaseState } from '../base/BaseEngine.js';
-import { OptionsContractSchema } from '../base/OptionsContract.js';
-
-export interface GridTrackConfig {
-    size?: string;  // CSS size (e.g. "20%", "1fr", "100px")
-    style?: string; // Inline styles for cells in this track
-    class?: string; // Classes for cells in this track
-}
-
-// Input can be a simple number (count) or array of configs
-export type GridInput = number | GridTrackConfig[];
-
-export interface GridState extends BaseState {
-    rows: GridTrackConfig[];
-    columns: GridTrackConfig[];
-    gap: string;
-    boundaryWidth: string;
-    boundaryHeight: string;
-    gridder: boolean; // Debug/Blueprinting mode
-}
-
-export interface GridOptions {
-    rows?: GridInput;
-    columns?: GridInput;
-    gap?: string;
-    boundaryWidth?: string;
-    boundaryHeight?: string;
-    gridder?: boolean;
-}
-
-export class GridEngine extends BaseEngine<GridState, GridOptions> {
-    constructor(id: string, options: GridOptions = {}) {
-        super(id, options);
-    }
-
-    /**
-     * OPTIONS CONTRACT
-     * Defines valid options with types, defaults, and aliases for common mistakes.
-     */
-    protected get optionsSchema(): OptionsContractSchema {
-        return {
-            rows: {
-                type: 'array',
-                default: [{ size: '1fr' }],
-                description: 'Row definitions (number or array of GridTrackConfig)',
-                aliases: ['row', 'rowCount', 'numRows']
-            },
-            columns: {
-                type: 'array',
-                default: [{ size: '1fr' }],
-                description: 'Column definitions (number or array of GridTrackConfig)',
-                aliases: ['cols', 'column', 'colCount', 'numCols', 'numColumns']
-            },
-            gap: {
-                type: 'string',
-                default: '0',
-                description: 'Gap between grid cells (CSS value)',
-                aliases: ['gridGap', 'spacing', 'gutter']
-            },
-            boundaryWidth: {
-                type: 'string',
-                default: '100%',
-                description: 'Grid container width (CSS value)',
-                aliases: ['width', 'w']
-            },
-            boundaryHeight: {
-                type: 'string',
-                default: '100%',
-                description: 'Grid container height (CSS value)',
-                aliases: ['height', 'h']
-            },
-            gridder: {
-                type: 'boolean',
-                default: false,
-                description: 'Enable debug/blueprint mode',
-                aliases: ['debug', 'blueprint', 'showGrid']
-            }
-        };
-    }
-
-    protected prepareState(id: string, options: GridOptions): GridState {
-        return {
-            id,
-            classes: ['jux-grid'],
-            visible: true,
-            disabled: false,
-            loading: false,
-            attributes: {},
-            rows: this.normalizeTracks(options.rows || 1),
-            columns: this.normalizeTracks(options.columns || 1),
-            gap: options.gap || '0',
-            boundaryWidth: options.boundaryWidth || '100%',
-            boundaryHeight: options.boundaryHeight || '100%',
-            gridder: options.gridder || false
-        };
-    }
-
-    // --- Helpers ---
-
-    /**
-     * helper: Normalizes simple numbers into full config arrays.
-     * Changed from #normalizeTracks to private normalizeTracks to avoid initialization errors
-     * when called via BaseEngine constructor -> prepareState.
-     */
-    private normalizeTracks(input: GridInput): GridTrackConfig[] {
-        if (typeof input === 'number') {
-            // 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
-        }));
-    }
-
-    // --- State-Aligned Methods ---
-
-    /**
-     * Set rows configuration
-     * Method name matches state property: rows
-     */
-    rows(input: GridInput): this {
-        this.updateState({ rows: this.normalizeTracks(input) });
-        this.emit('layout:rows', { rows: this.state.rows });
-        return this;
-    }
-
-    /**
-     * Set columns configuration
-     * Method name matches state property: columns
-     */
-    columns(input: GridInput): this {
-        this.updateState({ columns: this.normalizeTracks(input) });
-        this.emit('layout:columns', { columns: this.state.columns });
-        return this;
-    }
-
-    /**
-     * Set gap between cells
-     * Method name matches state property: gap
-     */
-    gap(value: string): this {
-        this.updateState({ gap: value });
-        this.emit('layout:gap', { gap: value });
-        return this;
-    }
-
-    /**
-     * Set container width
-     * Method name matches state property: boundaryWidth
-     */
-    boundaryWidth(width: string): this {
-        this.updateState({ boundaryWidth: width });
-        this.emit('layout:resize', { width });
-        return this;
-    }
-
-    /**
-     * Set container height
-     * Method name matches state property: boundaryHeight
-     */
-    boundaryHeight(height: string): this {
-        this.updateState({ boundaryHeight: height });
-        this.emit('layout:resize', { height });
-        return this;
-    }
-
-    /**
-     * Set gridder (debug) mode
-     * Method name matches state property: gridder
-     */
-    gridder(active: boolean): this {
-        this.updateState({ gridder: active });
-        this.emit('debug:gridder', { active });
-        return this;
-    }
-
-    /**
-     * Toggle gridder mode
-     * @alias Convenience method that toggles gridder state
-     */
-    toggleGridder(active?: boolean): this {
-        const next = active !== undefined ? active : !this.state.gridder;
-        return this.gridder(next);
-    }
-}

package/lib/componentsv2/grid/skin.ts

@@ -1,106 +0,0 @@
-import { BaseSkin } from '../base/BaseSkin.js';
-import { GridEngine, GridState } from './engine.js';
-import structureCss from './structure.css';
-
-export class GridSkin extends BaseSkin<GridState, GridEngine> {
-
-    #cells = new Map<string, HTMLElement>();
-
-    constructor(engine: GridEngine) {
-        super(engine);
-    }
-
-
-    protected get structureCss(): string {
-        return structureCss;
-    }
-
-    protected bindEvents(root: HTMLElement): void {
-        root.addEventListener('click', (e) => {
-            if (this.engine.state.gridder) {
-                const cell = (e.target as HTMLElement).closest('.jux-grid-cell');
-                if (cell && cell.id) {
-                    console.log(`[Ordinal Grid] Targeted Cell: #${cell.id}`);
-                }
-            }
-        });
-    }
-
-    protected updateSkin(state: GridState): void {
-        if (!this.root) return;
-        this.applySkinAttributes(this.root, state);
-
-        this.root.className = state.classes.join(' ');
-
-        // 1. Container Styles
-        this.root.style.width = state.boundaryWidth;
-        this.root.style.height = state.boundaryHeight;
-        this.root.style.gap = state.gap;
-
-        // CSS Grid Definitions
-        const rowSizes = state.rows.map(r => r.size).join(' ');
-        const colSizes = state.columns.map(c => c.size).join(' ');
-
-        this.root.style.gridTemplateRows = rowSizes;
-        this.root.style.gridTemplateColumns = colSizes;
-
-        // Toggle Debug Class
-        if (state.gridder) {
-            this.root.classList.add('jux-gridder-active');
-        } else {
-            this.root.classList.remove('jux-gridder-active');
-        }
-
-        // 2. Structural Reconciliation
-        const validIds = new Set<string>();
-
-        state.rows.forEach((rowConfig, rIndex) => {
-            state.columns.forEach((colConfig, cIndex) => {
-                const cellId = `${state.id}-${rIndex}-${cIndex}`;
-                validIds.add(cellId);
-
-                let cell = this.#cells.get(cellId);
-
-                if (!cell) {
-                    cell = document.createElement('div');
-                    cell.id = cellId;
-                    cell.className = 'jux-grid-cell';
-                    cell.dataset.row = String(rIndex);
-                    cell.dataset.col = String(cIndex);
-
-                    const label = document.createElement('span');
-                    label.className = 'jux-grid-ordinal-label';
-                    label.textContent = `#${rIndex}-${cIndex}`;
-                    cell.appendChild(label);
-
-                    this.#cells.set(cellId, cell);
-
-                    if (!this.root!.contains(cell)) {
-                        this.root!.appendChild(cell);
-                    }
-                }
-
-                cell.style.cssText = '';
-                cell.className = 'jux-grid-cell';
-
-                if (rowConfig.style) cell.style.cssText += rowConfig.style;
-                if (colConfig.style) cell.style.cssText += colConfig.style;
-
-                if (rowConfig.class) cell.classList.add(rowConfig.class);
-                if (colConfig.class) cell.classList.add(colConfig.class);
-            });
-        });
-
-        // 3. Cleanup Orphans
-        this.#cells.forEach((cell, id) => {
-            if (!validIds.has(id)) {
-                cell.remove();
-                this.#cells.delete(id);
-            }
-        });
-    }
-
-    protected createRoot(): HTMLElement {
-        return document.createElement('div');
-    }
-}