juxscript 1.0.132 → 1.1.2

package/lib/componentsv2/base/Neighborhood.d.ts

@@ -1,22 +0,0 @@
-type GlobalListener = (data: any) => void;
-/**
- * THE NEIGHBORHOOD (Global Event Mediator)
- *
- * Acts as the certal nervous system where all components post updates.
- * Other components can tune in to specific frequencies (channels) here.
- */
-export declare class JuxGlobalBus {
-    private listeners;
-    on(channel: string, callback: GlobalListener): void;
-    off(channel: string, callback: GlobalListener): void;
-    emit(channel: string, data: any): void;
-    /**
-     * DEBUG: Read-only Snapshot of active channels and listener identities.
-     * usage: juxV2.events.registry
-     * Returns: { "channelName": ["functionName", "(anonymous)"] }
-     */
-    get registry(): Record<string, string[]>;
-}
-export declare const Neighborhood: JuxGlobalBus;
-export {};
-//# sourceMappingURL=Neighborhood.d.ts.map

package/lib/componentsv2/base/Neighborhood.js

@@ -1,56 +0,0 @@
-/**
- * THE NEIGHBORHOOD (Global Event Mediator)
- *
- * Acts as the certal nervous system where all components post updates.
- * Other components can tune in to specific frequencies (channels) here.
- */
-export class JuxGlobalBus {
-    constructor() {
-        this.listeners = new Map();
-    }
-    on(channel, callback) {
-        if (!this.listeners.has(channel)) {
-            this.listeners.set(channel, new Set());
-        }
-        this.listeners.get(channel).add(callback);
-    }
-    off(channel, callback) {
-        const set = this.listeners.get(channel);
-        if (set) {
-            set.delete(callback);
-            if (set.size === 0) {
-                this.listeners.delete(channel);
-            }
-        }
-    }
-    emit(channel, data) {
-        const set = this.listeners.get(channel);
-        if (set) {
-            set.forEach(callback => {
-                try {
-                    callback(data);
-                }
-                catch (e) {
-                    console.error(`Jux GlobalBus Error [${channel}]:`, e);
-                }
-            });
-        }
-        // Optional: We could have a wildcard '*' listener here for debuggers/loggers
-    }
-    /**
-     * DEBUG: Read-only Snapshot of active channels and listener identities.
-     * usage: juxV2.events.registry
-     * Returns: { "channelName": ["functionName", "(anonymous)"] }
-     */
-    get registry() {
-        const snapshot = {};
-        this.listeners.forEach((set, channel) => {
-            // Map the Set of functions to their names for easier debugging
-            snapshot[channel] = Array.from(set).map(fn => fn.name || '(anonymous)');
-        });
-        return snapshot;
-    }
-}
-// Singleton Instance
-export const Neighborhood = new JuxGlobalBus();
-//# sourceMappingURL=Neighborhood.js.map

package/lib/componentsv2/base/OptionsContract.d.ts

@@ -1,20 +0,0 @@
-export interface OptionDefinition {
-    type: 'string' | 'number' | 'boolean' | 'array' | 'object' | 'function';
-    required?: boolean;
-    default?: any;
-    description?: string;
-    aliases?: string[];
-}
-export type OptionsContractSchema = Record<string, OptionDefinition>;
-export interface ValidationResult {
-    valid: boolean;
-    warnings: string[];
-    errors: string[];
-    normalized: Record<string, any>;
-}
-/**
- * Validates user-provided options against a defined contract schema.
- * Emits warnings for unknown/misnamed options and errors for type mismatches.
- */
-export declare function validateOptions<T extends Record<string, any>>(componentName: string, userOptions: Record<string, any>, schema: OptionsContractSchema, debugMode?: boolean): ValidationResult;
-//# sourceMappingURL=OptionsContract.d.ts.map

package/lib/componentsv2/base/OptionsContract.js

@@ -1,107 +0,0 @@
-/**
- * Validates user-provided options against a defined contract schema.
- * Emits warnings for unknown/misnamed options and errors for type mismatches.
- */
-export function validateOptions(componentName, userOptions, schema, debugMode = false) {
-    const result = {
-        valid: true,
-        warnings: [],
-        errors: [],
-        normalized: {}
-    };
-    const validKeys = new Set(Object.keys(schema));
-    const aliasMap = new Map();
-    // Build alias lookup
-    for (const [key, def] of Object.entries(schema)) {
-        if (def.aliases) {
-            def.aliases.forEach(alias => aliasMap.set(alias.toLowerCase(), key));
-        }
-    }
-    // Check for unknown or aliased options
-    for (const [key, value] of Object.entries(userOptions)) {
-        const lowerKey = key.toLowerCase();
-        if (validKeys.has(key)) {
-            // Valid key - validate type
-            const def = schema[key];
-            if (!validateType(value, def.type)) {
-                result.errors.push(`[${componentName}] Option "${key}" expects type "${def.type}", got "${typeof value}".`);
-                result.valid = false;
-            }
-            else {
-                result.normalized[key] = value;
-            }
-        }
-        else if (aliasMap.has(lowerKey)) {
-            // Found an alias - warn and normalize
-            const correctKey = aliasMap.get(lowerKey);
-            result.warnings.push(`[${componentName}] Option "${key}" is not valid. Did you mean "${correctKey}"?`);
-            result.normalized[correctKey] = value;
-        }
-        else {
-            // Unknown option
-            const suggestion = findClosestMatch(key, Array.from(validKeys));
-            const hint = suggestion ? ` Did you mean "${suggestion}"?` : '';
-            result.warnings.push(`[${componentName}] Unknown option "${key}".${hint} Valid options: ${Array.from(validKeys).join(', ')}`);
-        }
-    }
-    // Apply defaults for missing required options
-    for (const [key, def] of Object.entries(schema)) {
-        if (!(key in result.normalized)) {
-            if (def.required && def.default === undefined) {
-                result.errors.push(`[${componentName}] Required option "${key}" is missing.`);
-                result.valid = false;
-            }
-            else if (def.default !== undefined) {
-                result.normalized[key] = def.default;
-            }
-        }
-    }
-    // Log warnings/errors in debug mode
-    if (debugMode || result.warnings.length || result.errors.length) {
-        result.warnings.forEach(w => console.warn(w));
-        result.errors.forEach(e => console.error(e));
-    }
-    return result;
-}
-function validateType(value, expectedType) {
-    if (value === undefined || value === null)
-        return true; // Allow optional
-    switch (expectedType) {
-        case 'string': return typeof value === 'string';
-        case 'number': return typeof value === 'number';
-        case 'boolean': return typeof value === 'boolean';
-        case 'array': return Array.isArray(value);
-        case 'object': return typeof value === 'object' && !Array.isArray(value);
-        case 'function': return typeof value === 'function';
-        default: return true;
-    }
-}
-function findClosestMatch(input, candidates) {
-    const lower = input.toLowerCase();
-    let best = null;
-    let bestScore = Infinity;
-    for (const candidate of candidates) {
-        const score = levenshtein(lower, candidate.toLowerCase());
-        if (score < bestScore && score <= 3) { // Max 3 edits
-            bestScore = score;
-            best = candidate;
-        }
-    }
-    return best;
-}
-function levenshtein(a, b) {
-    const matrix = [];
-    for (let i = 0; i <= b.length; i++)
-        matrix[i] = [i];
-    for (let j = 0; j <= a.length; j++)
-        matrix[0][j] = j;
-    for (let i = 1; i <= b.length; i++) {
-        for (let j = 1; j <= a.length; j++) {
-            matrix[i][j] = b[i - 1] === a[j - 1]
-                ? matrix[i - 1][j - 1]
-                : Math.min(matrix[i - 1][j - 1] + 1, matrix[i][j - 1] + 1, matrix[i - 1][j] + 1);
-        }
-    }
-    return matrix[b.length][a.length];
-}
-//# sourceMappingURL=OptionsContract.js.map

package/lib/componentsv2/base/State.d.ts

@@ -1,18 +0,0 @@
-/**
- * REGINALD'S LEDGER
- * A protected reactive container for atomic state management.
- */
-export declare class State<T> {
-    #private;
-    constructor(initialValue: T);
-    get value(): T;
-    /**
-     * Access the timeline of past states (The Ledger).
-     */
-    get history(): string[];
-    set(newValue: T): void;
-    rollback(): void;
-    rollforward(): void;
-    subscribe(callback: (value: T) => void): () => void;
-}
-//# sourceMappingURL=State.d.ts.map

package/lib/componentsv2/base/State.js

@@ -1,68 +0,0 @@
-var __classPrivateFieldSet = (this && this.__classPrivateFieldSet) || function (receiver, state, value, kind, f) {
-    if (kind === "m") throw new TypeError("Private method is not writable");
-    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a setter");
-    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot write private member to an object whose class did not declare it");
-    return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
-};
-var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (receiver, state, kind, f) {
-    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a getter");
-    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot read private member from an object whose class did not declare it");
-    return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
-};
-var _State_instances, _State_value, _State_subscribers, _State_history, _State_future, _State_notify;
-/**
- * REGINALD'S LEDGER
- * A protected reactive container for atomic state management.
- */
-export class State {
-    constructor(initialValue) {
-        _State_instances.add(this);
-        _State_value.set(this, void 0);
-        _State_subscribers.set(this, new Set());
-        _State_history.set(this, []);
-        _State_future.set(this, []);
-        __classPrivateFieldSet(this, _State_value, initialValue, "f");
-    }
-    get value() {
-        return JSON.parse(JSON.stringify(__classPrivateFieldGet(this, _State_value, "f")));
-    }
-    /**
-     * Access the timeline of past states (The Ledger).
-     */
-    get history() {
-        return [...__classPrivateFieldGet(this, _State_history, "f")];
-    }
-    set(newValue) {
-        // Snap state serially before change
-        __classPrivateFieldGet(this, _State_history, "f").push(JSON.stringify(__classPrivateFieldGet(this, _State_value, "f")));
-        __classPrivateFieldSet(this, _State_future, [], "f"); // Clear future timeline on new divergence
-        __classPrivateFieldSet(this, _State_value, newValue, "f");
-        __classPrivateFieldGet(this, _State_instances, "m", _State_notify).call(this);
-    }
-    rollback() {
-        const previous = __classPrivateFieldGet(this, _State_history, "f").pop();
-        if (previous !== undefined) {
-            __classPrivateFieldGet(this, _State_future, "f").push(JSON.stringify(__classPrivateFieldGet(this, _State_value, "f"))); // Save current for redo
-            __classPrivateFieldSet(this, _State_value, JSON.parse(previous), "f");
-            __classPrivateFieldGet(this, _State_instances, "m", _State_notify).call(this);
-        }
-    }
-    rollforward() {
-        const next = __classPrivateFieldGet(this, _State_future, "f").pop();
-        if (next !== undefined) {
-            __classPrivateFieldGet(this, _State_history, "f").push(JSON.stringify(__classPrivateFieldGet(this, _State_value, "f"))); // Save current for undo
-            __classPrivateFieldSet(this, _State_value, JSON.parse(next), "f");
-            __classPrivateFieldGet(this, _State_instances, "m", _State_notify).call(this);
-        }
-    }
-    subscribe(callback) {
-        __classPrivateFieldGet(this, _State_subscribers, "f").add(callback);
-        callback(this.value); // Immediate handshake
-        return () => __classPrivateFieldGet(this, _State_subscribers, "f").delete(callback);
-    }
-}
-_State_value = new WeakMap(), _State_subscribers = new WeakMap(), _State_history = new WeakMap(), _State_future = new WeakMap(), _State_instances = new WeakSet(), _State_notify = function _State_notify() {
-    const currentValue = this.value;
-    __classPrivateFieldGet(this, _State_subscribers, "f").forEach(callback => callback(currentValue));
-};
-//# sourceMappingURL=State.js.map

package/lib/componentsv2/element/Element.d.ts

@@ -1,30 +0,0 @@
-import { ElementEngine, ElementOptions } from './ElementEngine.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               |
- * | attributes   | object | {}      | attrs, props                     |
- *
- * 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 declare function Element(id: string, options?: ElementOptions): ElementComponent;
-//# sourceMappingURL=Element.d.ts.map

package/lib/componentsv2/element/Element.js

@@ -1,50 +0,0 @@
-import { ElementEngine } from './ElementEngine.js';
-import { ElementSkin } from './ElementSkin.js';
-/**
- * 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               |
- * | attributes   | object | {}      | attrs, props                     |
- *
- * 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, options = {}) {
-    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) => {
-        const target = typeof targetId === 'string' ? document.getElementById(targetId) : targetId;
-        if (target) {
-            skin.renderSkin(target);
-        }
-        else {
-            console.warn(`Element: Target not found for render - ${targetId}`);
-        }
-        return engine;
-    };
-    // @ts-ignore
-    engine.injectCSS = (id, css) => skin.injectCSS(id, css);
-    return engine;
-}
-//# sourceMappingURL=Element.js.map

package/lib/componentsv2/element/ElementEngine.d.ts

@@ -1,59 +0,0 @@
-import { BaseEngine, BaseState } from '../base/BaseEngine.js';
-import { OptionsContractSchema } from '../base/OptionsContract.js';
-export interface ElementState extends BaseState {
-    tag: string;
-    content: string | null;
-    contentType: 'text' | 'html';
-    inlineStyle: string;
-}
-export interface ElementOptions {
-    tag?: string;
-    content?: string;
-    contentType?: 'text' | 'html';
-    inlineStyle?: string;
-    attributes?: Record<string, string>;
-}
-export declare class ElementEngine extends BaseEngine<ElementState, ElementOptions> {
-    constructor(id: string, options?: ElementOptions);
-    /**
-     * OPTIONS CONTRACT
-     * Defines valid options with types, defaults, and aliases for common mistakes.
-     */
-    protected get optionsSchema(): OptionsContractSchema;
-    protected prepareState(id: string, options: ElementOptions): ElementState;
-    /**
-     * Set the HTML tag name (e.g., 'div', 'span', 'h1', 'section')
-     * Method name matches state property: tag
-     */
-    tag(value: string): this;
-    /**
-     * Set content with explicit type
-     * Method name matches state property: content
-     */
-    content(value: string, type?: 'text' | 'html'): this;
-    /**
-     * Set content type
-     * Method name matches state property: contentType
-     */
-    contentType(type: 'text' | 'html'): this;
-    /**
-     * Set inline styles (e.g., "color: red; margin: 10px;")
-     * Method name matches state property: inlineStyle
-     */
-    inlineStyle(cssText: string): this;
-    /** @alias for content(value, 'html') */
-    html(value: string): this;
-    /** @alias for inlineStyle() */
-    style(cssText: string): this;
-    /**
-     * Append raw HTML to existing content
-     */
-    appendHtml(value: string): this;
-    /** @alias for content(value, 'text') */
-    text(value: string): this;
-    /**
-     * Receives RAW DOM events from the Skin and emits them to listeners.
-     */
-    handleEvent(eventName: string, content: any): void;
-}
-//# sourceMappingURL=ElementEngine.d.ts.map

package/lib/componentsv2/element/ElementEngine.js

@@ -1,118 +0,0 @@
-import { BaseEngine } from '../base/BaseEngine.js';
-export class ElementEngine extends BaseEngine {
-    constructor(id, options = {}) {
-        super(id, options);
-    }
-    /**
-     * OPTIONS CONTRACT
-     * Defines valid options with types, defaults, and aliases for common mistakes.
-     */
-    get optionsSchema() {
-        return {
-            tag: {
-                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']
-            },
-            attributes: {
-                type: 'object',
-                default: {},
-                description: 'Arbitrary HTML attributes',
-                aliases: ['attrs', 'props']
-            }
-        };
-    }
-    prepareState(id, options) {
-        return {
-            id,
-            classes: ['jux-element'],
-            visible: true,
-            disabled: false,
-            loading: false,
-            attributes: options.attributes || {}, // ✅ Mapped from options
-            tag: options.tag || '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: tag
-     */
-    tag(value) {
-        this.updateState({ tag: value });
-        this.emit('config', { tag: value });
-        return this;
-    }
-    /**
-     * Set content with explicit type
-     * Method name matches state property: content
-     */
-    content(value, type = 'text') {
-        this.updateState({ content: value, contentType: type });
-        return this;
-    }
-    /**
-     * Set content type
-     * Method name matches state property: contentType
-     */
-    contentType(type) {
-        this.updateState({ contentType: type });
-        return this;
-    }
-    /**
-     * Set inline styles (e.g., "color: red; margin: 10px;")
-     * Method name matches state property: inlineStyle
-     */
-    inlineStyle(cssText) {
-        this.updateState({ inlineStyle: cssText });
-        return this;
-    }
-    /** @alias for content(value, 'html') */
-    html(value) {
-        return this.content(value, 'html');
-    }
-    /** @alias for inlineStyle() */
-    style(cssText) {
-        return this.inlineStyle(cssText);
-    }
-    /**
-     * Append raw HTML to existing content
-     */
-    appendHtml(value) {
-        const current = this.state.content || '';
-        this.updateState({ content: current + value, contentType: 'html' });
-        return this;
-    }
-    /** @alias for content(value, 'text') */
-    text(value) {
-        return this.content(value, 'text');
-    }
-    /**
-     * Receives RAW DOM events from the Skin and emits them to listeners.
-     */
-    handleEvent(eventName, content) {
-        this.emit(eventName, content);
-    }
-}
-//# sourceMappingURL=ElementEngine.js.map

package/lib/componentsv2/element/ElementSkin.d.ts

@@ -1,10 +0,0 @@
-import { BaseSkin } from '../base/BaseSkin.js';
-import { ElementEngine, ElementState } from './ElementEngine.js';
-export declare class ElementSkin extends BaseSkin<ElementState, ElementEngine> {
-    constructor(engine: ElementEngine);
-    protected get structureCss(): string;
-    protected createRoot(): HTMLElement;
-    protected bindEvents(root: HTMLElement): void;
-    protected updateSkin(state: ElementState): void;
-}
-//# sourceMappingURL=ElementSkin.d.ts.map

package/lib/componentsv2/element/ElementSkin.js

@@ -1,56 +0,0 @@
-import { BaseSkin } from '../base/BaseSkin.js';
-import structureCss from './structure.css';
-export class ElementSkin extends BaseSkin {
-    constructor(engine) {
-        super(engine);
-    }
-    get structureCss() {
-        return structureCss;
-    }
-    createRoot() {
-        // Use state.tag (consistent naming)
-        const tag = this.engine.state.tag || 'div';
-        return document.createElement(tag);
-    }
-    bindEvents(root) {
-        // ✅ 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);
-            });
-        });
-    }
-    updateSkin(state) {
-        // 1. Tag Replacement Logic (uses state.tag)
-        const currentTag = this.root ? this.root.tagName.toLowerCase() : '';
-        const desiredTag = (state.tag || 'div').toLowerCase();
-        if (this.root && currentTag !== desiredTag) {
-            const newRoot = document.createElement(desiredTag);
-            if (this.root.parentNode) {
-                this.root.parentNode.replaceChild(newRoot, this.root);
-            }
-            this.root = newRoot;
-            this.bindEvents(this.root);
-        }
-        if (!this.root)
-            return;
-        // 1. Ensure standard ID is set
-        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;
-        }
-    }
-}
-//# sourceMappingURL=ElementSkin.js.map