juxscript 1.1.4 → 1.1.6

package/lib/components/icons.ts

@@ -0,0 +1,464 @@
+/**
+ * Icon utilities for components
+ * All icons are rendered through Iconify with configurable collections (lucide, heroicons, streamline, etc.)
+ */
+
+// Lucide emoji mappings
+const EMOJI_TO_LUCIDE: Record<string, string> = {
+    "✔️": "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: Record<string, string> = {
+    "✔️": "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: Record<string, string> = {
+    "✔️": "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: Record<string, string> = {
+    "✔️": "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: string, collection?: string): HTMLElement {
+    // 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: string): HTMLElement {
+    return createEmojiFallback(emoji);
+}
+
+/**
+ * Render a library-backed icon by name
+ */
+function renderLibraryIcon(iconName: string, collection: string): HTMLElement {
+    const element = createIconifyIcon(`${collection}:${iconName}`);
+    ensureIconifyLoaded();
+    return element;
+}
+
+/**
+ * Resolve global/default icon collection
+ */
+function normalizeCollection(collection?: string): string {
+    if (collection && typeof collection === 'string' && collection.trim()) {
+        return collection.trim().toLowerCase();
+    }
+
+    const globalCollection = (globalThis as any).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: string, collection: string): string | null {
+    // 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(): void {
+    if ((window as any).Iconify) {
+        // Already loaded, render immediately
+        (window as any).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 as any).Iconify) {
+                (window as any).Iconify.scan();
+            }
+        };
+        document.head.appendChild(script);
+    }
+}
+
+/**
+ * Create image icon element
+ */
+function createImageIcon(src: string): HTMLImageElement {
+    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: string): HTMLElement {
+    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: string): HTMLSpanElement {
+    const span = document.createElement('span');
+    span.textContent = emoji;
+    span.style.display = 'inline-block';
+    return span;
+}

package/lib/components/include.d.ts

@@ -0,0 +1,120 @@
+/**
+ * Include - Include external resources (CSS, JS, images, fonts, etc.)
+ * Auto-detects resource type from URL and provides simple, fluent API
+ */
+type IncludeLocation = 'head' | 'body-start' | 'body-end';
+interface IncludeOptions {
+    as?: string;
+    crossOrigin?: 'anonymous' | 'use-credentials';
+    integrity?: string;
+    async?: boolean;
+    defer?: boolean;
+    location?: IncludeLocation;
+}
+export declare class Include {
+    private url;
+    private type;
+    private options;
+    private element;
+    private explicitType;
+    constructor(urlOrFile: string);
+    private detectType;
+    /**
+     * Force treat as CSS stylesheet
+     * Use when URL doesn't have .css extension
+     */
+    withCss(): this;
+    /**
+     * Force treat as JavaScript
+     * Use when URL doesn't have .js extension (CDN scripts, etc.)
+     *
+     * @example
+     * jux.include('https://cdn.tailwindcss.com').withJs().render();
+     * jux.include('https://unpkg.com/alpine').withJs({ defer: true }).render();
+     */
+    withJs(options?: {
+        async?: boolean;
+        defer?: boolean;
+    }): this;
+    /**
+     * Force treat as ES module
+     * Use for module scripts
+     */
+    withModule(): this;
+    withImage(): this;
+    withFont(): this;
+    withPreload(as?: string): this;
+    withPrefetch(): this;
+    withJson(): this;
+    /**
+     * Shorthand for .withJs()
+     * @example jux.include(url).asScript()
+     */
+    asScript(options?: {
+        async?: boolean;
+        defer?: boolean;
+    }): this;
+    /**
+     * Shorthand for .withCss()
+     * @example jux.include(url).asStylesheet()
+     */
+    asStylesheet(): this;
+    /**
+     * Fetch and parse JSON file
+     * Returns a Promise that resolves to the parsed JSON data
+     *
+     * Usage:
+     *   const config = await jux.include('config.json').asJson();
+     *   const data = await jux.include('/api/data').asJson();
+     */
+    asJson<T = any>(): Promise<T>;
+    /**
+     * Fetch JSON and execute callback with data
+     *
+     * Usage:
+     *   jux.include('config.json').onJson(data => {
+     *     console.log('Config:', data);
+     *   });
+     */
+    onJson<T = any>(callback: (data: T) => void): this;
+    with(options: IncludeOptions): this;
+    inHead(): this;
+    inBody(): this;
+    async(): this;
+    defer(): this;
+    crossOrigin(value?: 'anonymous' | 'use-credentials'): this;
+    integrity(hash: string): this;
+    render(): this;
+    private createStylesheet;
+    private createScript;
+    private createLink;
+    private getContainer;
+    private handleError;
+    remove(): this;
+}
+/**
+ * Factory function - auto-detects type and renders immediately
+ *
+ * Usage:
+ *   // Auto-detect (works for most cases)
+ *   jux.include('styles.css');
+ *   jux.include('script.js').async();
+ *
+ *   // Explicit type (for extensionless URLs)
+ *   jux.include('https://cdn.tailwindcss.com').withJs();
+ *   jux.include('https://cdn.tailwindcss.com').asScript();
+ *   jux.include('https://unpkg.com/htmx.org').withJs({ defer: true });
+ *
+ *   // CDN with parameters
+ *   jux.include('https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4').withJs();
+ *
+ *   // Module
+ *   jux.include('app.mjs').withModule();
+ *
+ *   // For JSON:
+ *   const data = await jux.include('config.json').asJson();
+ *   jux.include('data.json').onJson(data => console.log(data));
+ */
+export declare function include(urlOrFile: string): Include;
+export {};
+//# sourceMappingURL=include.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"include.d.ts","sourceRoot":"","sources":["include.ts"],"names":[],"mappings":"AACA;;;GAGG;AAGH,KAAK,eAAe,GAAG,MAAM,GAAG,YAAY,GAAG,UAAU,CAAC;AAE1D,UAAU,cAAc;IACtB,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,WAAW,CAAC,EAAE,WAAW,GAAG,iBAAiB,CAAC;IAC9C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,QAAQ,CAAC,EAAE,eAAe,CAAC;CAC5B;AAED,qBAAa,OAAO;IAClB,OAAO,CAAC,GAAG,CAAS;IACpB,OAAO,CAAC,IAAI,CAAc;IAC1B,OAAO,CAAC,OAAO,CAAsB;IACrC,OAAO,CAAC,OAAO,CAA4B;IAC3C,OAAO,CAAC,YAAY,CAAkB;gBAE1B,SAAS,EAAE,MAAM;IAS7B,OAAO,CAAC,UAAU;IA2BlB;;;OAGG;IACH,OAAO,IAAI,IAAI;IAMf;;;;;;;OAOG;IACH,MAAM,CAAC,OAAO,CAAC,EAAE;QAAE,KAAK,CAAC,EAAE,OAAO,CAAC;QAAC,KAAK,CAAC,EAAE,OAAO,CAAA;KAAE,GAAG,IAAI;IAQ5D;;;OAGG;IACH,UAAU,IAAI,IAAI;IAMlB,SAAS,IAAI,IAAI;IAMjB,QAAQ,IAAI,IAAI;IAMhB,WAAW,CAAC,EAAE,CAAC,EAAE,MAAM,GAAG,IAAI;IAO9B,YAAY,IAAI,IAAI;IAMpB,QAAQ,IAAI,IAAI;IAUhB;;;OAGG;IACH,QAAQ,CAAC,OAAO,CAAC,EAAE;QAAE,KAAK,CAAC,EAAE,OAAO,CAAC;QAAC,KAAK,CAAC,EAAE,OAAO,CAAA;KAAE,GAAG,IAAI;IAI9D;;;OAGG;IACH,YAAY,IAAI,IAAI;IAQpB;;;;;;;OAOG;IACG,MAAM,CAAC,CAAC,GAAG,GAAG,KAAK,OAAO,CAAC,CAAC,CAAC;IAgBnC;;;;;;;OAOG;IACH,MAAM,CAAC,CAAC,GAAG,GAAG,EAAE,QAAQ,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,IAAI,GAAG,IAAI;IAWlD,IAAI,CAAC,OAAO,EAAE,cAAc,GAAG,IAAI;IAKnC,MAAM,IAAI,IAAI;IAKd,MAAM,IAAI,IAAI;IAKd,KAAK,IAAI,IAAI;IAKb,KAAK,IAAI,IAAI;IAKb,WAAW,CAAC,KAAK,GAAE,WAAW,GAAG,iBAA+B,GAAG,IAAI;IAKvE,SAAS,CAAC,IAAI,EAAE,MAAM,GAAG,IAAI;IAS7B,MAAM,IAAI,IAAI;IAyDd,OAAO,CAAC,gBAAgB;IAcxB,OAAO,CAAC,YAAY;IAgBpB,OAAO,CAAC,UAAU;IAoClB,OAAO,CAAC,YAAY;IAKpB,OAAO,CAAC,WAAW;IAMnB,MAAM,IAAI,IAAI;CAOf;AAED;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,wBAAgB,OAAO,CAAC,SAAS,EAAE,MAAM,GAAG,OAAO,CASlD"}