juxscript 1.0.3 → 1.0.5

package/lib/reactivity/state.ts

@@ -0,0 +1,364 @@
+/**
+ * Reactive state container
+ * Notifies subscribers when value changes
+ */
+export class State<T> {
+    private _value: T;
+    private _subscribers: Set<(value: T) => void> = new Set();
+    private _effects: Set<Effect> = new Set();
+
+    constructor(initialValue: T) {
+        this._value = initialValue;
+    }
+
+    /**
+     * Get current value
+     */
+    get value(): T {
+        return this._value;
+    }
+
+    /**
+     * Set new value and notify subscribers
+     */
+    set(newValue: T): void {
+        if (this._value !== newValue) {
+            this._value = newValue;
+            this._notify();
+            this._runEffects();
+        }
+    }
+
+    /**
+     * Update value using a function
+     */
+    update(fn: (current: T) => T): void {
+        this.set(fn(this._value));
+    }
+
+    /**
+     * Subscribe to value changes
+     * Returns unsubscribe function
+     */
+    subscribe(callback: (value: T) => void): () => void {
+        this._subscribers.add(callback);
+        callback(this._value); // Call immediately with current value
+        return () => this._subscribers.delete(callback);
+    }
+
+    /**
+     * Notify all subscribers of value change
+     */
+    private _notify(): void {
+        this._subscribers.forEach(callback => callback(this._value));
+    }
+
+    /**
+     * Run all registered effects
+     */
+    private _runEffects(): void {
+        this._effects.forEach(effect => effect.run(this._value));
+    }
+
+    /* -------------------------
+     * Higher-Order Effects
+     * ------------------------- */
+
+    /**
+     * Bind visibility to element (v-show style)
+     * Toggles display: none on/off
+     * For animations, use bindClass() instead
+     */
+    bindVisibility(elementId: string): () => void {
+        if (typeof this._value !== 'boolean') {
+            console.warn(`State.bindVisibility: State value must be boolean, got ${typeof this._value}`);
+            return () => { };
+        }
+
+        const effect = new VisibilityEffect(elementId);
+        this._effects.add(effect);
+        effect.run(this._value); // Initial run
+
+        return () => this._effects.delete(effect);
+    }
+
+    /**
+     * Bind value property to element (for progress, input, range, etc.)
+     * @param elementId - DOM element ID
+     * @param transform - Optional transform function
+     */
+    bindValue(elementId: string, transform?: (val: T) => number | string): () => void {
+        const effect = new ValueEffect(elementId, transform);
+        this._effects.add(effect);
+        effect.run(this._value);
+
+        return () => this._effects.delete(effect);
+    }
+
+    /**
+     * Bind text content to element
+     * @param elementId - DOM element ID
+     * @param transform - Optional transform function
+     */
+    bindText(elementId: string, transform?: (val: T) => string): () => void {
+        const effect = new TextEffect(elementId, transform);
+        this._effects.add(effect);
+        effect.run(this._value);
+
+        return () => this._effects.delete(effect);
+    }
+
+    /**
+     * Bind attribute to element
+     * @param elementId - DOM element ID
+     * @param attrName - Attribute name
+     * @param transform - Optional transform function
+     */
+    bindAttr(elementId: string, attrName: string, transform?: (val: T) => string): () => void {
+        const effect = new AttrEffect(elementId, attrName, transform);
+        this._effects.add(effect);
+        effect.run(this._value);
+
+        return () => this._effects.delete(effect);
+    }
+
+    /**
+     * Bind CSS class to element
+     * @param elementId - DOM element ID
+     * @param className - Class to toggle
+     * @param condition - Optional condition function
+     */
+    bindClass(elementId: string, className: string, condition?: (val: T) => boolean): () => void {
+        const effect = new ClassEffect(elementId, className, condition);
+        this._effects.add(effect);
+        effect.run(this._value);
+
+        return () => this._effects.delete(effect);
+    }
+
+    /**
+     * Bind innerHTML to element
+     * @param elementId - DOM element ID
+     * @param transform - Optional transform function
+     */
+    bindHTML(elementId: string, transform?: (val: T) => string): () => void {
+        const effect = new HTMLEffect(elementId, transform);
+        this._effects.add(effect);
+        effect.run(this._value);
+
+        return () => this._effects.delete(effect);
+    }
+
+    /* -------------------------
+     * Number Helpers
+     * ------------------------- */
+
+    /**
+     * Increment (numbers only)
+     */
+    increment = (): void => {
+        if (typeof this._value === 'number') {
+            this.set((this._value + 1) as T);
+        }
+    }
+
+    /**
+     * Decrement (numbers only)
+     */
+    decrement = (): void => {
+        if (typeof this._value === 'number') {
+            this.set((this._value - 1) as T);
+        }
+    }
+
+    /**
+     * Add amount (returns function for event handlers)
+     */
+    add = (amount: number) => (): void => {
+        if (typeof this._value === 'number') {
+            this.set((this._value + amount) as T);
+        }
+    }
+
+    /**
+     * Subtract amount
+     */
+    subtract = (amount: number) => (): void => {
+        if (typeof this._value === 'number') {
+            this.set((this._value - amount) as T);
+        }
+    }
+
+    /**
+     * Multiply by factor
+     */
+    multiply = (factor: number) => (): void => {
+        if (typeof this._value === 'number') {
+            this.set((this._value * factor) as T);
+        }
+    }
+
+    /* -------------------------
+     * Boolean Helpers
+     * ------------------------- */
+
+    /**
+     * Toggle (booleans only)
+     */
+    toggle = (): void => {
+        if (typeof this._value === 'boolean') {
+            this.set((!this._value) as T);
+        }
+    }
+
+    /* -------------------------
+     * General Helpers
+     * ------------------------- */
+
+    /**
+     * Reset to initial value (returns function)
+     */
+    reset = (initialValue: T) => (): void => {
+        this.set(initialValue);
+    }
+}
+
+/* -------------------------
+ * Effect Classes
+ * ------------------------- */
+
+interface Effect {
+    run(value: any): void;
+}
+
+class VisibilityEffect implements Effect {
+    constructor(
+        private elementId: string
+    ) { }
+
+    run(visible: boolean): void {
+        const el = document.getElementById(this.elementId);
+        if (!el) return;
+
+        // Simple display toggle (Vue v-show style)
+        el.style.display = visible ? '' : 'none';
+    }
+}
+
+interface VisibilityOptions {
+    mode?: 'display' | 'visibility' | 'opacity' | 'class';
+    visibleClass?: string;
+    hiddenClass?: string;
+}
+
+class TextEffect implements Effect {
+    constructor(
+        private elementId: string,
+        private transform?: (val: any) => string
+    ) { }
+
+    run(value: any): void {
+        const el = document.getElementById(this.elementId);
+        if (!el) return;
+
+        const text = this.transform ? this.transform(value) : String(value);
+        el.textContent = text;
+    }
+}
+
+class HTMLEffect implements Effect {
+    constructor(
+        private elementId: string,
+        private transform?: (val: any) => string
+    ) { }
+
+    run(value: any): void {
+        const el = document.getElementById(this.elementId);
+        if (!el) return;
+
+        const html = this.transform ? this.transform(value) : String(value);
+        el.innerHTML = html;
+    }
+}
+
+class AttrEffect implements Effect {
+    constructor(
+        private elementId: string,
+        private attrName: string,
+        private transform?: (val: any) => string
+    ) { }
+
+    run(value: any): void {
+        const el = document.getElementById(this.elementId);
+        if (!el) return;
+
+        const attrValue = this.transform ? this.transform(value) : String(value);
+        el.setAttribute(this.attrName, attrValue);
+    }
+}
+
+class ClassEffect implements Effect {
+    constructor(
+        private elementId: string,
+        private className: string,
+        private condition?: (val: any) => boolean
+    ) { }
+
+    run(value: any): void {
+        const el = document.getElementById(this.elementId);
+        if (!el) return;
+
+        const shouldAdd = this.condition ? this.condition(value) : Boolean(value);
+        if (shouldAdd) {
+            el.classList.add(this.className);
+        } else {
+            el.classList.remove(this.className);
+        }
+    }
+}
+
+class ValueEffect implements Effect {
+    constructor(
+        private elementId: string,
+        private transform?: (val: any) => number | string
+    ) { }
+
+    run(value: any): void {
+        const el = document.getElementById(this.elementId);
+        if (!el) return;
+
+        const newValue = this.transform ? this.transform(value) : value;
+
+        // For progress/jux components, set data-value and trigger update
+        if (el.classList.contains('jux-progress')) {
+            el.setAttribute('data-value', String(newValue));
+
+            // Find the progress instance and call value() to trigger update
+            const progressBar = el.querySelector('.jux-progress-bar');
+            if (progressBar) {
+                const percentage = typeof newValue === 'number' ? newValue : parseFloat(String(newValue));
+                const max = parseFloat(progressBar.getAttribute('aria-valuemax') || '100');
+                const percentageValue = (percentage / max) * 100;
+                (progressBar as HTMLElement).style.width = `${percentageValue}%`;
+                progressBar.setAttribute('aria-valuenow', String(percentage));
+            }
+            return;
+        }
+
+        // For native HTML elements (input, progress, meter)
+        if ('value' in el) {
+            (el as any).value = String(newValue);
+        }
+
+        if (el instanceof HTMLProgressElement || el.tagName === 'METER') {
+            el.setAttribute('value', String(newValue));
+        }
+    }
+}
+
+/**
+ * Create reactive state
+ */
+export function state<T>(initialValue: T): State<T> {
+    return new State(initialValue);
+}

package/lib/themes/charts.js

@@ -0,0 +1,126 @@
+/**
+ * Chart themes for Jux
+ * Each theme defines colors and optional font customization
+ */
+
+export const googleTheme = {
+    name: 'Google',
+    colors: [
+        '#4285F4', // Google Blue
+        '#EA4335', // Google Red
+        '#FBBC04', // Google Yellow
+        '#34A853', // Google Green
+        '#FF6D01', // Orange
+        '#46BDC6', // Cyan
+    ],
+    variables: {
+        '--chart-font-family': "'Roboto', sans-serif",
+    },
+    font: 'https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap'
+};
+
+export const seriesaTheme = {
+    name: 'Series A',
+    colors: [
+        '#667eea', // Purple
+        '#764ba2', // Dark Purple
+        '#f093fb', // Pink
+        '#4facfe', // Blue
+        '#00f2fe', // Cyan
+        '#43e97b', // Green
+    ],
+    variables: {
+        '--chart-font-family': "'Inter', sans-serif",
+    },
+    font: 'https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap'
+};
+
+export const hrTheme = {
+    name: 'HR',
+    colors: [
+        '#FF6B6B', // Coral Red
+        '#4ECDC4', // Turquoise
+        '#45B7D1', // Sky Blue
+        '#FFA07A', // Light Salmon
+        '#98D8C8', // Mint
+        '#F7DC6F', // Pale Yellow
+    ],
+    variables: {
+        '--chart-font-family': "'Work Sans', sans-serif",
+    },
+    font: 'https://fonts.googleapis.com/css2?family=Work+Sans:wght@400;500;600&display=swap'
+};
+
+export const figmaTheme = {
+    name: 'Figma',
+    colors: [
+        '#0ACF83', // Figma Green
+        '#FF7262', // Figma Red/Orange
+        '#1ABCFE', // Figma Blue
+        '#A259FF', // Figma Purple
+        '#F24E1E', // Figma Orange
+        '#FFC700', // Figma Yellow
+    ],
+    variables: {
+        '--chart-font-family': "'Inter', sans-serif",
+    },
+    font: 'https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap'
+};
+
+export const notionTheme = {
+    name: 'Notion',
+    colors: [
+        '#2EAADC', // Notion Blue
+        '#9B59B6', // Purple
+        '#E67E22', // Orange
+        '#E74C3C', // Red
+        '#F39C12', // Yellow
+        '#16A085', // Teal
+    ],
+    variables: {
+        '--chart-font-family': "'Inter', sans-serif",
+    },
+    font: 'https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap'
+};
+
+export const chalkTheme = {
+    name: 'Chalk',
+    colors: [
+        '#96CEB4', // Soft Green
+        '#FFEAA7', // Soft Yellow
+        '#DFE6E9', // Light Gray
+        '#74B9FF', // Soft Blue
+        '#FD79A8', // Soft Pink
+        '#A29BFE', // Soft Purple
+    ],
+    variables: {
+        '--chart-font-family': "'Courier New', monospace",
+    }
+};
+
+export const mintTheme = {
+    name: 'Mint',
+    colors: [
+        '#26de81', // Mint Green
+        '#20bf6b', // Green
+        '#0fb9b1', // Teal
+        '#2bcbba', // Light Teal
+        '#45aaf2', // Blue
+        '#4b7bec', // Dark Blue
+    ],
+    variables: {
+        '--chart-font-family': "'Poppins', sans-serif",
+    },
+    font: 'https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap'
+};
+
+// Export all themes as a collection for easy iteration
+export const chartThemes = {
+    google: googleTheme,
+    seriesa: seriesaTheme,
+    hr: hrTheme,
+    figma: figmaTheme,
+    notion: notionTheme,
+    chalk: chalkTheme,
+    mint: mintTheme
+};