juxscript 1.1.4 → 1.1.6

package/lib/components/icon.ts

@@ -0,0 +1,178 @@
+import { BaseComponent } from './base/BaseComponent.js';
+import { renderIcon, renderEmoji } from './icons.js';
+
+// Event definitions
+const TRIGGER_EVENTS = [] as const;
+const CALLBACK_EVENTS = [] as const;
+
+export interface IconOptions {
+    value?: string;
+    size?: string;
+    color?: string;
+    useEmoji?: boolean;
+    iconCollection?: string;
+    style?: string;
+    class?: string;
+}
+
+type IconState = {
+    value: string;
+    size: string;
+    color: string;
+    useEmoji: boolean;
+    iconCollection: string;
+    style: string;
+    class: string;
+};
+
+export class Icon extends BaseComponent<IconState> {
+    constructor(id: string, options: IconOptions = {}) {
+        super(id, {
+            value: options.value ?? '',
+            size: options.size ?? '24px',
+            color: options.color ?? '',
+            useEmoji: options.useEmoji ?? false,
+            iconCollection: options.iconCollection ?? '',
+            style: options.style ?? '',
+            class: options.class ?? ''
+        });
+    }
+
+    protected getTriggerEvents(): readonly string[] {
+        return TRIGGER_EVENTS;
+    }
+
+    protected getCallbackEvents(): readonly string[] {
+        return CALLBACK_EVENTS;
+    }
+
+    /* ═════════════════════════════════════════════════════════════════
+     * FLUENT API
+     * ═════════════════════════════════════════════════════════════════ */
+
+    // ✅ Inherited from BaseComponent
+
+    value(value: string): this {
+        this.state.value = value;
+        return this;
+    }
+
+    size(value: string): this {
+        this.state.size = value;
+        return this;
+    }
+
+    color(value: string): this {
+        this.state.color = value;
+        return this;
+    }
+
+    useEmoji(value: boolean): this {
+        this.state.useEmoji = value;
+        return this;
+    }
+
+    iconCollection(value: string): this {
+        this.state.iconCollection = value;
+        return this;
+    }
+
+    style(value: string): this {
+        this.state.style = value;
+        return this;
+    }
+
+    class(value: string): this {
+        this.state.class = value;
+        return this;
+    }
+
+    /* ═════════════════════════════════════════════════════════════════
+     * RENDER
+     * ═════════════════════════════════════════════════════════════════ */
+
+    render(targetId?: string): this {
+        const container = this._setupContainer(targetId);
+
+        const { value, size, color, useEmoji, iconCollection, style, class: className } = this.state;
+
+        const wrapper = document.createElement('span');
+        wrapper.className = 'jux-icon';
+        wrapper.id = this._id;
+        if (className) wrapper.className += ` ${className}`;
+        if (style) wrapper.setAttribute('style', style);
+
+        const iconElement = useEmoji ? renderEmoji(value) : renderIcon(value, iconCollection);
+        iconElement.style.width = size;
+        iconElement.style.height = size;
+        if (color) iconElement.style.color = color;
+
+        wrapper.appendChild(iconElement);
+
+        this._wireStandardEvents(wrapper);
+
+        // Wire sync bindings
+        this._syncBindings.forEach(({ property, stateObj, toState, toComponent }) => {
+            if (property === 'value') {
+                const transform = toComponent || ((v: any) => String(v));
+
+                stateObj.subscribe((val: any) => {
+                    const transformed = transform(val);
+                    this.state.value = transformed;
+
+                    wrapper.innerHTML = '';
+                    const newIcon = this.state.useEmoji ? renderEmoji(transformed) : renderIcon(transformed, this.state.iconCollection);
+                    newIcon.style.width = this.state.size;
+                    newIcon.style.height = this.state.size;
+                    if (this.state.color) newIcon.style.color = this.state.color;
+                    wrapper.appendChild(newIcon);
+
+                    requestAnimationFrame(() => {
+                        if ((window as any).Iconify) {
+                            (window as any).Iconify.scan();
+                        }
+                    });
+                });
+            }
+            else if (property === 'size') {
+                const transform = toComponent || ((v: any) => String(v));
+
+                stateObj.subscribe((val: any) => {
+                    const transformed = transform(val);
+                    const icon = wrapper.querySelector('img, svg, span');
+                    if (icon instanceof HTMLElement) {
+                        icon.style.width = transformed;
+                        icon.style.height = transformed;
+                    }
+                    this.state.size = transformed;
+                });
+            }
+            else if (property === 'color') {
+                const transform = toComponent || ((v: any) => String(v));
+
+                stateObj.subscribe((val: any) => {
+                    const transformed = transform(val);
+                    const icon = wrapper.querySelector('img, svg, span');
+                    if (icon instanceof HTMLElement) {
+                        icon.style.color = transformed;
+                    }
+                    this.state.color = transformed;
+                });
+            }
+        });
+
+        container.appendChild(wrapper);
+
+        requestAnimationFrame(() => {
+            if ((window as any).lucide) {
+                (window as any).lucide.createIcons();
+            }
+        });
+
+        return this;
+    }
+}
+
+export function icon(id: string, options: IconOptions): Icon {
+    return new Icon(id, options);
+}

package/lib/components/icons.d.ts

@@ -0,0 +1,25 @@
+/**
+ * Icon utilities for components
+ * All icons are rendered through Iconify with configurable collections (lucide, heroicons, streamline, etc.)
+ */
+/**
+ * Render an icon from emoji, icon name, or image path
+ * @param value - Emoji (🚀), icon name (rocket), or image path (/icon.png)
+ * @param collection - Optional icon collection override (lucide, mdi, tabler, etc.)
+ * @returns HTMLElement containing the icon
+ *
+ * Usage:
+ *   const icon = renderIcon('🚀');                 // Default collection icon
+ *   const icon = renderIcon('📎', 'mdi');          // MDI collection
+ *   const icon = renderIcon('lucide:rocket');      // Explicit lucide collection
+ *   const icon = renderIcon('mdi:home');           // Explicit mdi collection
+ *   const icon = renderIcon('/icon.png');          // Image element
+ */
+export declare function renderIcon(value: string, collection?: string): HTMLElement;
+/**
+ * Render raw emoji without conversion
+ * @param emoji - The emoji character
+ * @returns HTMLElement containing just the emoji
+ */
+export declare function renderEmoji(emoji: string): HTMLElement;
+//# sourceMappingURL=icons.d.ts.map

package/lib/components/icons.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"icons.d.ts","sourceRoot":"","sources":["icons.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAqSH;;;;;;;;;;;;GAYG;AACH,wBAAgB,UAAU,CAAC,KAAK,EAAE,MAAM,EAAE,UAAU,CAAC,EAAE,MAAM,GAAG,WAAW,CAoC1E;AAED;;;;GAIG;AACH,wBAAgB,WAAW,CAAC,KAAK,EAAE,MAAM,GAAG,WAAW,CAEtD"}

package/lib/components/icons.js

@@ -0,0 +1,440 @@
+/**
+ * Icon utilities for components
+ * All icons are rendered through Iconify with configurable collections (lucide, heroicons, streamline, etc.)
+ */
+// Lucide emoji mappings
+const EMOJI_TO_LUCIDE = {
+    "✔️": "check-circle",
+    "✓": "check",
+    "❌": "x-circle",
+    "✗": "x",
+    "🔥": "flame",
+    "🚀": "rocket",
+    "⚙️": "settings",
+    "🏠": "home",
+    "👤": "user",
+    "💡": "lightbulb",
+    "🌈": "rainbow",
+    "🧪": "flask-conical",
+    "✉️": "mail",
+    "📞": "phone",
+    "🔍": "search",
+    "❤️": "heart",
+    "⭐": "star",
+    "⚠️": "alert-triangle",
+    "ℹ️": "info",
+    "❓": "help-circle",
+    "👁️": "eye",
+    "👁️‍🗨️": "eye-off",
+    "☰": "menu",
+    "🕐": "clock",
+    "📅": "calendar",
+    "⬇️": "chevron-down",
+    "⬆️": "chevron-up",
+    "⬅️": "chevron-left",
+    "➡️": "chevron-right",
+    "📈": "chart-column-increasing",
+    "📉": "chart-column-decreasing",
+    "⬇": "download",
+    "📤": "upload",
+    "📄": "file-text",
+    "🗑️": "trash-2",
+    "✏️": "edit",
+    "📋": "clipboard",
+    "🔗": "link",
+    "↗️": "external-link",
+    "☀️": "sun",
+    "🌙": "moon",
+    "📊": "bar-chart-3",
+    "🖥️": "layout-dashboard",
+    "📁": "folder",
+    "💰": "coins",
+    "📧": "mail",
+    "✅": "square-check",
+    "🗓️": "calendar-days",
+    "💬": "message-circle",
+    "🌐": "globe",
+    "🔬": "microscope",
+    "💊": "pill",
+    "🔒": "lock",
+    "⚖️": "scale",
+    "🔌": "plug",
+    "🔐": "lock-keyhole",
+    "🏥": "cross",
+    "👥": "users",
+    "💚": "heart",
+    "💸": "banknote",
+    "🧾": "receipt",
+    "➕": "plus",
+    "➖": "minus",
+    "💾": "save",
+    "🩺": "stethoscope",
+    "📦": "package",
+    "👋": "log-out",
+    "📎": "paperclip",
+};
+// Heroicons emoji mappings
+const EMOJI_TO_HEROICONS = {
+    "✔️": "check-circle",
+    "✓": "check",
+    "❌": "x-circle",
+    "✗": "x-mark",
+    "🔥": "fire",
+    "🚀": "rocket-launch",
+    "⚙️": "cog-6-tooth",
+    "🏠": "home",
+    "👤": "user",
+    "💡": "light-bulb",
+    "🌈": "sparkles",
+    "🧪": "beaker",
+    "✉️": "envelope",
+    "📞": "phone",
+    "🔍": "magnifying-glass",
+    "❤️": "heart",
+    "⭐": "star",
+    "⚠️": "exclamation-triangle",
+    "ℹ️": "information-circle",
+    "❓": "question-mark-circle",
+    "👁️": "eye",
+    "👁️‍🗨️": "eye-slash",
+    "☰": "bars-3",
+    "🕐": "clock",
+    "📅": "calendar",
+    "⬇️": "chevron-down",
+    "⬆️": "chevron-up",
+    "⬅️": "chevron-left",
+    "➡️": "chevron-right",
+    "📈": "chart-bar",
+    "📉": "chart-bar",
+    "⬇": "arrow-down-tray",
+    "📤": "arrow-up-tray",
+    "📄": "document-text",
+    "🗑️": "trash",
+    "✏️": "pencil",
+    "📋": "clipboard",
+    "🔗": "link",
+    "↗️": "arrow-top-right-on-square",
+    "☀️": "sun",
+    "🌙": "moon",
+    "📊": "chart-bar",
+    "🖥️": "computer-desktop",
+    "📁": "folder",
+    "💰": "currency-dollar",
+    "📧": "envelope",
+    "✅": "check-badge",
+    "🗓️": "calendar-days",
+    "💬": "chat-bubble-left",
+    "🌐": "globe-alt",
+    "🔬": "beaker",
+    "💊": "beaker",
+    "🔒": "lock-closed",
+    "⚖️": "scale",
+    "🔌": "bolt",
+    "🔐": "lock-closed",
+    "🏥": "plus",
+    "👥": "user-group",
+    "💚": "heart",
+    "💸": "banknote",
+    "🧾": "document-text",
+    "➕": "plus",
+    "➖": "minus",
+    "💾": "archive-box",
+    "🩺": "heart",
+    "📦": "archive-box",
+    "👋": "arrow-right-on-rectangle",
+    "📎": "paper-clip",
+};
+// Material Symbols emoji mappings
+const EMOJI_TO_MATERIAL_SYMBOLS = {
+    "✔️": "check-circle",
+    "✓": "check",
+    "❌": "cancel",
+    "✗": "close",
+    "🔥": "local-fire-department",
+    "🚀": "rocket-launch",
+    "⚙️": "settings",
+    "🏠": "home",
+    "👤": "person",
+    "💡": "lightbulb",
+    "🌈": "looks",
+    "🧪": "science",
+    "✉️": "mail",
+    "📞": "call",
+    "🔍": "search",
+    "❤️": "favorite",
+    "⭐": "star",
+    "⚠️": "warning",
+    "ℹ️": "info",
+    "❓": "help",
+    "👁️": "visibility",
+    "👁️‍🗨️": "visibility-off",
+    "☰": "menu",
+    "🕐": "schedule",
+    "📅": "calendar-today",
+    "⬇️": "arrow-downward",
+    "⬆️": "arrow-upward",
+    "⬅️": "arrow-back",
+    "➡️": "arrow-forward",
+    "📈": "trending-up",
+    "📉": "trending-down",
+    "⬇": "download",
+    "📤": "upload",
+    "📄": "description",
+    "🗑️": "delete",
+    "✏️": "edit",
+    "📋": "content-paste",
+    "🔗": "link",
+    "↗️": "open-in-new",
+    "☀️": "sunny",
+    "🌙": "dark-mode",
+    "📊": "bar-chart",
+    "🖥️": "dashboard",
+    "📁": "folder",
+    "💰": "savings",
+    "📧": "mail",
+    "✅": "check-box",
+    "🗓️": "calendar-month",
+    "💬": "chat",
+    "🌐": "public",
+    "🔬": "biotech",
+    "💊": "pill",
+    "🔒": "lock",
+    "⚖️": "balance",
+    "🔌": "power",
+    "🔐": "lock-open",
+    "🏥": "medical-services",
+    "👥": "group",
+    "💚": "favorite",
+    "💸": "payments",
+    "🧾": "receipt",
+    "➕": "add",
+    "➖": "remove",
+    "💾": "save",
+    "🩺": "medical-information",
+    "📦": "package",
+    "👋": "logout",
+    "📎": "attach-file",
+};
+// IconPark (icon-park)
+const EMOJI_TO_ICONPARK = {
+    "✔️": "check-one",
+    "✓": "check",
+    "❌": "close-one",
+    "✗": "close",
+    "🔥": "fire",
+    "🚀": "rocket-one",
+    "⚙️": "setting-config",
+    "🏠": "home",
+    "👤": "user",
+    "💡": "stack-light",
+    "🌈": "color-filter",
+    "🧪": "test-tube",
+    "✉️": "mail",
+    "📞": "phone-call",
+    "🔍": "search",
+    "❤️": "heart-ballon",
+    "⭐": "star",
+    "⚠️": "caution",
+    "ℹ️": "info",
+    "❓": "help",
+    "👁️": "eyes",
+    "👁️‍🗨️": "visibility-off",
+    "☰": "application-menu",
+    "🕐": "schedule",
+    "📅": "calendar",
+    "⬇️": "arrow-circle-down",
+    "⬆️": "arrow-circle-up",
+    "⬅️": "arrow-circle-left",
+    "➡️": "arrow-circle-right",
+    "📈": "trending-up",
+    "📉": "trending-down",
+    "⬇": "download-one",
+    "📤": "upload-one",
+    "📄": "doc-detail",
+    "🗑️": "delete-five",
+    "✏️": "edit-two",
+    "📋": "clipboard",
+    "🔗": "link-one",
+    "↗️": "circle-right-up",
+    "☀️": "sunrise",
+    "🌙": "death-star",
+    "📊": "chart-line-area",
+    "🖥️": "carousel",
+    "📁": "folder-open",
+    "💰": "dollar",
+    "📧": "mail",
+    "✅": "check-correct",
+    "🗓️": "calendar-dot",
+    "💬": "message",
+    "🌐": "world",
+    "🔬": "microscope",
+    "💊": "pills",
+    "🔒": "lock",
+    "⚖️": "balance-two",
+    "🔌": "power",
+    "🔐": "unlock",
+    "🏥": "hospital",
+    "👥": "every-user",
+    "💚": "favorite",
+    "💸": "payments",
+    "🧾": "receipt",
+    "➕": "add-one",
+    "➖": "reduce-one",
+    "💾": "save-one",
+    "🩺": "stethoscope",
+    "📦": "box",
+    "👋": "logout",
+    "📎": "link",
+};
+const ICONIFY_CDN_URL = "https://code.iconify.design/3/3.1.1/iconify.min.js";
+const DEFAULT_ICON_COLLECTION = 'lucide';
+/**
+ * Render an icon from emoji, icon name, or image path
+ * @param value - Emoji (🚀), icon name (rocket), or image path (/icon.png)
+ * @param collection - Optional icon collection override (lucide, mdi, tabler, etc.)
+ * @returns HTMLElement containing the icon
+ *
+ * Usage:
+ *   const icon = renderIcon('🚀');                 // Default collection icon
+ *   const icon = renderIcon('📎', 'mdi');          // MDI collection
+ *   const icon = renderIcon('lucide:rocket');      // Explicit lucide collection
+ *   const icon = renderIcon('mdi:home');           // Explicit mdi collection
+ *   const icon = renderIcon('/icon.png');          // Image element
+ */
+export function renderIcon(value, collection) {
+    // Check if it's an image path (contains / or . or starts with http)
+    if (value.includes('/') || value.includes('.') || value.startsWith('http')) {
+        return createImageIcon(value);
+    }
+    // Check for explicit collection prefix (e.g., lucide:rocket, mdi:home)
+    if (value.includes(':')) {
+        const [prefix, ...rest] = value.split(':');
+        const iconName = rest.join(':');
+        // Use the prefix as the collection
+        const element = createIconifyIcon(`${prefix}:${iconName}`);
+        ensureIconifyLoaded();
+        return element;
+    }
+    const resolvedCollection = normalizeCollection(collection);
+    // Check if it's an emoji that maps to an icon key
+    const iconKey = getIconKeyForEmoji(value, resolvedCollection);
+    if (iconKey) {
+        const element = createIconifyIcon(`${resolvedCollection}:${iconKey}`);
+        ensureIconifyLoaded();
+        return element;
+    }
+    // Check if it's a direct icon name (lowercase with hyphens)
+    if (/^[a-z][a-z0-9-]*$/.test(value)) {
+        const element = createIconifyIcon(`${resolvedCollection}:${value}`);
+        ensureIconifyLoaded();
+        return element;
+    }
+    // Fallback: render as emoji
+    return createEmojiFallback(value);
+}
+/**
+ * Render raw emoji without conversion
+ * @param emoji - The emoji character
+ * @returns HTMLElement containing just the emoji
+ */
+export function renderEmoji(emoji) {
+    return createEmojiFallback(emoji);
+}
+/**
+ * Render a library-backed icon by name
+ */
+function renderLibraryIcon(iconName, collection) {
+    const element = createIconifyIcon(`${collection}:${iconName}`);
+    ensureIconifyLoaded();
+    return element;
+}
+/**
+ * Resolve global/default icon collection
+ */
+function normalizeCollection(collection) {
+    if (collection && typeof collection === 'string' && collection.trim()) {
+        return collection.trim().toLowerCase();
+    }
+    const globalCollection = globalThis.JUX_ICON_LIBRARY;
+    if (typeof globalCollection === 'string' && globalCollection.trim()) {
+        return globalCollection.trim().toLowerCase();
+    }
+    return DEFAULT_ICON_COLLECTION;
+}
+/**
+ * Get the icon key for an emoji based on the collection
+ */
+function getIconKeyForEmoji(emoji, collection) {
+    // Normalize collection name for the switch statement
+    const baseCollection = collection.toLowerCase();
+    // Look up in the appropriate mapping
+    switch (baseCollection) {
+        case 'lucide':
+            return EMOJI_TO_LUCIDE[emoji] || null;
+        case 'heroicons':
+            return EMOJI_TO_HEROICONS[emoji] || null;
+        case 'material':
+        case 'material-symbols':
+            return EMOJI_TO_MATERIAL_SYMBOLS[emoji] || null;
+        case 'icon-park':
+            return EMOJI_TO_ICONPARK[emoji] || null;
+        default:
+            // Default to lucide for unknown collections
+            return EMOJI_TO_LUCIDE[emoji] || null;
+    }
+}
+/**
+ * Ensures Iconify is loaded and icons are rendered
+ */
+function ensureIconifyLoaded() {
+    if (window.Iconify) {
+        // Already loaded, render immediately
+        window.Iconify.scan();
+        return;
+    }
+    if (!document.querySelector(`script[src="${ICONIFY_CDN_URL}"]`)) {
+        const script = document.createElement('script');
+        script.src = ICONIFY_CDN_URL;
+        script.onload = () => {
+            if (window.Iconify) {
+                window.Iconify.scan();
+            }
+        };
+        document.head.appendChild(script);
+    }
+}
+/**
+ * Create image icon element
+ */
+function createImageIcon(src) {
+    const img = document.createElement('img');
+    img.src = src;
+    img.style.width = '24px';
+    img.style.height = '24px';
+    img.style.display = 'inline-block';
+    img.style.objectFit = 'contain';
+    return img;
+}
+/**
+ * Create Iconify icon element
+ */
+function createIconifyIcon(icon) {
+    const iconEl = document.createElement('span');
+    iconEl.className = 'iconify';
+    iconEl.setAttribute('data-icon', icon);
+    iconEl.setAttribute('data-mode', 'svg');
+    iconEl.setAttribute('data-inline', 'false');
+    iconEl.style.width = '24px';
+    iconEl.style.height = '24px';
+    iconEl.style.display = 'inline-block';
+    return iconEl;
+}
+/**
+ * Render native emoji or text
+ */
+function createEmojiFallback(emoji) {
+    const span = document.createElement('span');
+    span.textContent = emoji;
+    span.style.display = 'inline-block';
+    return span;
+}