@genexus/mercury 0.33.0 → 1.0.0-beta.0

package/dist/cli/migrate-mercury-tokens.js

@@ -0,0 +1,368 @@
+#!/usr/bin/env node
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-nocheck
+/**
+ * Mercury Design System Token Migration Script
+ * Version: 1.0.0
+ *
+ * USAGE:
+ * Run from your project root: bunx mercury update
+ *
+ * The script will:
+ * - Find all CSS, SCSS, JS, TS, JSX, TSX files
+ * - Replace old Mercury tokens with new V1 tokens
+ * - Create backups in ./mercury-migration-backup/ folder
+ * - Show you a report of what was changed
+ */
+import fs from "fs";
+import path from "path";
+import { createInterface } from "readline";
+// ============================================================================
+// TOKEN MAPPINGS
+// ============================================================================
+const TOKEN_MIGRATIONS = {
+    // Accent tokens
+    "--mer-accent__primary": "--color-accent-primary-default",
+    "--mer-accent__primary--hover": "--color-accent-primary-hover",
+    "--mer-accent__primary--active": "--color-accent-primary-pressed",
+    "--mer-accent__primary--disabled": "--color-accent-neutral-disabled",
+    "--mer-accent__primary--destructive": "--color-accent-error-default",
+    "--mer-accent__primary--destructive-hover": "--color-accent-error-hover",
+    "--mer-accent__primary--destructive-active": "--color-accent-error-pressed",
+    "--accent-success-lighter": "--color-accent-success-lighter",
+    "--accent-success-light": "--color-accent-success-light",
+    "--accent-success-enabled": "--color-accent-success-default",
+    "--accent-success-hover": "--color-accent-success-hover",
+    "--accent-success-active": "--color-accent-success-pressed",
+    // Border tokens
+    "--mer-border-color__primary": "--color-border-primary-default",
+    "--mer-border-color__primary--hover": "--color-border-primary-hover",
+    "--mer-border-color__primary--active": "--color-border-primary-pressed",
+    "--mer-border-color__primary--disabled": "--color-border-neutral-default",
+    "--mer-border-color__primary--focused": "--color-border-primary-focused",
+    "--mer-border-color__dim": "--color-border-neutral-default",
+    "--mer-border-color__neutral": "--color-border-neutral-light",
+    "--mer-border-color__neutral--hover": "--color-border-neutral-hover",
+    "--mer-border-color__neutral--active": "--color-border-neutral-pressed",
+    "--mer-border-color__error": "--color-border-error-default",
+    "--mer-border-color__error--hover": "--color-border-error-hover",
+    "--mer-border-color__error--active": "--color-border-error-pressed",
+    "--mer-border-color__warning": "--color-border-warning-default",
+    "--mer-border-color__success": "--color-border-success-default",
+    "--mer-border-color__on-surface": "--color-border-surface-on-elevation-01",
+    "--mer-border-color__on-elevation--01": "--color-border-surface-on-elevation-01",
+    "--mer-border-color__on-elevation--02": "--color-border-surface-on-elevation-02",
+    "--mer-border-color__on-elevation--03": "--color-border-surface-on-elevation-03",
+    // Icon tokens
+    "--mer-icon__on-surface": "--color-icon-neutral-default",
+    "--mer-icon__on-primary": "--color-icon-neutral-on-icon",
+    "--mer-icon__on-primary--hover": "--color-icon-primary-hover",
+    "--mer-icon__on-primary--active": "--color-icon-neutral-pressed",
+    "--mer-icon__on-disabled": "--color-icon-neutral-on-disabled",
+    "--mer-icon__on-message": "--color-icon-neutral-on-icon",
+    "--mer-icon__on-elevation": "--color-icon-neutral-default",
+    "--mer-icon__primary": "--color-icon-primary-default",
+    "--mer-icon__primary--hover": "--color-icon-primary-hover",
+    "--mer-icon__primary--active": "--color-icon-primary-pressed",
+    "--mer-icon__primary--disabled": "--color-icon-neutral-disabled",
+    "--mer-icon__error": "--color-icon-status-error",
+    "--mer-icon__warning": "--color-icon-status-warning",
+    "--mer-icon__success": "--color-icon-status-success",
+    "--mer-icon__neutral": "--color-icon-neutral-hover",
+    "--mer-icon__highlighted": "--color-icon-neutral-white",
+    "--mer-icon__bright": "--color-icon-neutral-hover",
+    // Surface tokens
+    "--mer-surface": "--color-accent-surface-surface",
+    "--mer-color__surface": "--color-text-neutral-default",
+    "--mer-surface__elevation--01": "--color-accent-surface-elevation-01",
+    "--mer-surface__elevation--02": "--color-accent-surface-elevation-02",
+    "--mer-surface__elevation--03": "--color-accent-surface-elevation-03",
+    "--mer-box-shadow--01": "--color-accent-shadow-shadow",
+    // Text tokens
+    "--mer-text__on-surface": "--color-text-neutral-default",
+    "--mer-text__on-primary": "--color-text-neutral-on-text",
+    "--mer-text__on-primary--active": "--color-text-neutral-on-pressed",
+    "--mer-text__on-disabled": "--color-text-neutral-on-disabled",
+    "--mer-text__on-message": "--color-text-neutral-default",
+    "--mer-text__on-elevation": "--color-text-neutral-default",
+    "--mer-text__primary": "--color-text-primary-default",
+    "--mer-text__primary--hover": "--color-text-primary-hover",
+    "--mer-text__primary--active": "--color-text-primary-pressed",
+    "--mer-text__primary--disabled": "--color-text-neutral-disabled",
+    "--mer-text__neutral": "--color-text-neutral-light",
+    "--mer-text__highlighted": "--color-text-neutral-white",
+    "--mer-text__complementary": "--color-text-neutral-disabled",
+    "--mer-text__bright": "--color-text-neutral-white",
+    "--mer-text__success": "--color-text-status-success",
+    "--mer-text__error": "--color-text-status-error",
+    "--mer-text__warning": "--color-text-status-warning"
+};
+// ============================================================================
+// CONFIGURATION
+// ============================================================================
+const FILE_EXTENSIONS = [
+    ".css",
+    ".scss",
+    ".sass",
+    ".less",
+    ".js",
+    ".jsx",
+    ".ts",
+    ".tsx",
+    ".vue",
+    ".svelte"
+];
+const EXCLUDE_DIRS = [
+    "node_modules",
+    ".git",
+    "dist",
+    "build",
+    "coverage",
+    ".next",
+    "out",
+    ".nuxt",
+    ".output",
+    ".vercel",
+    ".netlify",
+    "public",
+    "static",
+    "vendor",
+    "mercury-migration-backup"
+];
+const stats = {
+    filesProcessed: 0,
+    filesModified: 0,
+    tokensReplaced: 0,
+    replacements: {}
+};
+const BACKUP_DIR = path.join(process.cwd(), "mercury-migration-backup");
+// ============================================================================
+// HELPER FUNCTIONS
+// ============================================================================
+function shouldExcludeDir(dirPath) {
+    const pathParts = dirPath.split(path.sep);
+    return EXCLUDE_DIRS.some(excludeDir => pathParts.includes(excludeDir));
+}
+function getAllFiles(dirPath, arrayOfFiles = []) {
+    const files = fs.readdirSync(dirPath);
+    files.forEach(file => {
+        const filePath = path.join(dirPath, file);
+        if (fs.statSync(filePath).isDirectory()) {
+            if (!shouldExcludeDir(filePath)) {
+                arrayOfFiles = getAllFiles(filePath, arrayOfFiles);
+            }
+        }
+        else {
+            const ext = path.extname(file);
+            if (FILE_EXTENSIONS.includes(ext)) {
+                arrayOfFiles.push(filePath);
+            }
+        }
+    });
+    return arrayOfFiles;
+}
+function escapeRegex(string) {
+    return string.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+}
+function replaceTokensInContent(content, filePath) {
+    let modifiedContent = content;
+    let fileModified = false;
+    // Sort tokens by length (longest first) to avoid partial replacements
+    const sortedTokens = Object.keys(TOKEN_MIGRATIONS).sort((a, b) => b.length - a.length);
+    sortedTokens.forEach(oldToken => {
+        const newToken = TOKEN_MIGRATIONS[oldToken];
+        // Pattern for var(--token) or var(--token, fallback)
+        const varPattern = new RegExp(`var\\(${escapeRegex(oldToken)}([,)])`, "g");
+        const matches = modifiedContent.match(varPattern);
+        if (matches) {
+            fileModified = true;
+            const count = matches.length;
+            stats.tokensReplaced += count;
+            if (!stats.replacements[oldToken]) {
+                stats.replacements[oldToken] = { count: 0, files: [] };
+            }
+            stats.replacements[oldToken].count += count;
+            if (!stats.replacements[oldToken].files.includes(filePath)) {
+                stats.replacements[oldToken].files.push(filePath);
+            }
+            modifiedContent = modifiedContent.replace(varPattern, `var(${newToken}$1`);
+        }
+    });
+    return { modifiedContent, fileModified };
+}
+function createBackup(filePath) {
+    // Calculate relative path from cwd
+    const relativePath = path.relative(process.cwd(), filePath);
+    const backupPath = path.join(BACKUP_DIR, relativePath);
+    // Create parent directories if they don't exist
+    const backupDir = path.dirname(backupPath);
+    if (!fs.existsSync(backupDir)) {
+        fs.mkdirSync(backupDir, { recursive: true });
+    }
+    // Copy file to backup location
+    fs.copyFileSync(filePath, backupPath);
+}
+function processFile(filePath) {
+    try {
+        const content = fs.readFileSync(filePath, "utf8");
+        const { modifiedContent, fileModified } = replaceTokensInContent(content, filePath);
+        stats.filesProcessed++;
+        if (fileModified) {
+            // Create backup in centralized folder
+            createBackup(filePath);
+            // Write modified content
+            fs.writeFileSync(filePath, modifiedContent, "utf8");
+            stats.filesModified++;
+            console.log(`✓ ${path.relative(process.cwd(), filePath)}`);
+        }
+    }
+    catch (error) {
+        console.error(`✗ Error: ${path.relative(process.cwd(), filePath)} - ${error.message}`);
+    }
+}
+function generateReport() {
+    console.log("\n" + "═".repeat(80));
+    console.log("📊 MIGRATION REPORT");
+    console.log("═".repeat(80));
+    console.log(`Files processed: ${stats.filesProcessed}`);
+    console.log(`Files modified: ${stats.filesModified}`);
+    console.log(`Total tokens replaced: ${stats.tokensReplaced}`);
+    if (Object.keys(stats.replacements).length > 0) {
+        console.log("\n" + "─".repeat(80));
+        console.log("TOP TOKEN REPLACEMENTS:");
+        console.log("─".repeat(80));
+        Object.keys(stats.replacements)
+            .sort((a, b) => stats.replacements[b].count - stats.replacements[a].count)
+            .slice(0, 10)
+            .forEach(oldToken => {
+            const data = stats.replacements[oldToken];
+            console.log(`\n${oldToken}`);
+            console.log(`  → ${TOKEN_MIGRATIONS[oldToken]}`);
+            console.log(`  ✓ ${data.count} replacement(s) in ${data.files.length} file(s)`);
+        });
+    }
+    console.log("\n" + "═".repeat(80));
+    // Save detailed report inside backup folder
+    const reportPath = path.join(BACKUP_DIR, "_migration-report.txt");
+    const reportContent = `Mercury Design System Token Migration Report
+Generated: ${new Date().toISOString()}
+
+Summary:
+--------
+Files processed: ${stats.filesProcessed}
+Files modified: ${stats.filesModified}
+Total tokens replaced: ${stats.tokensReplaced}
+
+Detailed Replacements:
+---------------------
+${Object.keys(stats.replacements)
+        .sort((a, b) => stats.replacements[b].count - stats.replacements[a].count)
+        .map(oldToken => {
+        const data = stats.replacements[oldToken];
+        return `\n${oldToken} → ${TOKEN_MIGRATIONS[oldToken]}\n  Replaced ${data.count} time(s) in ${data.files.length} file(s)\n  Files:\n${data.files.map(f => `    - ${path.relative(process.cwd(), f)}`).join("\n")}`;
+    })
+        .join("\n")}
+`;
+    fs.writeFileSync(reportPath, reportContent, "utf8");
+    console.log(`\n📄 Detailed report saved: ${path.relative(process.cwd(), reportPath)}`);
+}
+// ============================================================================
+// MAIN FUNCTION
+// ============================================================================
+function printHeader() {
+    // Blue gradient colors (from light to dark blue)
+    const colors = [
+        "\x1b[38;2;91;167;255m", // Lightest blue (#5ba7ff)
+        "\x1b[38;2;84;152;232m", // Light blue (#5498e8)
+        "\x1b[38;2;67;125;192m", // Mercury blue (#437dc0)
+        "\x1b[38;2;51;88;132m" // Dark blue (#335884)
+    ];
+    const reset = "\x1b[0m";
+    const asciiLines = [
+        "    __  ___                                _    ____ ",
+        "   /  |/  /__  ____________  _________  __| |  / /_ |",
+        "  / /|_/ / _ \\/ ___/ ___/ / / / ___/ / / / | / / / /",
+        " / /  / /  __/ /  / /__/ /_/ / /  / /_/ /| |/ / / / ",
+        "/_/  /_/\\___/_/   \\___/\\__,_/_/   \\__, / |___/_/_/  ",
+        "                                  /____/             ",
+        "   Token Migration Tool"
+    ];
+    console.log("");
+    asciiLines.forEach((line, index) => {
+        const colorIndex = Math.min(Math.floor(index / 2), colors.length - 1);
+        console.log(colors[colorIndex] + line + reset);
+    });
+    console.log("");
+}
+export function migrateMercuryTokens() {
+    printHeader();
+    console.log("═".repeat(80));
+    // Handle command parsing
+    const args = process.argv.slice(2);
+    const command = args[0];
+    // If first arg is "update", use current directory
+    // Otherwise treat first arg as the target directory
+    let targetDir;
+    if (command === "update") {
+        targetDir = args[1] || process.cwd();
+    }
+    else {
+        targetDir = command || process.cwd();
+    }
+    if (!fs.existsSync(targetDir)) {
+        console.error(`\n❌ Error: Directory "${targetDir}" does not exist`);
+        process.exit(1);
+    }
+    console.log(`\n📁 Target: ${targetDir}`);
+    console.log(`📝 File types: ${FILE_EXTENSIONS.join(", ")}`);
+    console.log(`🚫 Excluding: ${EXCLUDE_DIRS.join(", ")}`);
+    console.log("\n⏳ Scanning files...");
+    const files = getAllFiles(targetDir);
+    console.log(`\n✓ Found ${files.length} file(s) to process`);
+    if (files.length === 0) {
+        console.log("\n⚠️  No files found to migrate. Exiting.");
+        process.exit(0);
+    }
+    // Confirmation prompt
+    const readline = createInterface({
+        input: process.stdin,
+        output: process.stdout
+    });
+    readline.question("\n⚠️  Continue? Backups will be saved to ./mercury-migration-backup/ [y/N]: ", answer => {
+        if (answer.toLowerCase() === "y" || answer.toLowerCase() === "yes") {
+            console.log("\n🔄 Processing...\n");
+            // Create backup directory
+            if (!fs.existsSync(BACKUP_DIR)) {
+                fs.mkdirSync(BACKUP_DIR, { recursive: true });
+            }
+            files.forEach(file => processFile(file));
+            generateReport();
+            if (stats.filesModified > 0) {
+                console.log("\n✅ Migration complete!");
+                const reportPath = path.join(BACKUP_DIR, "_migration-report.txt");
+                const reportRelPath = path.relative(process.cwd(), reportPath);
+                const reportAbsPath = path.resolve(reportPath);
+                // ANSI color code for #437DC0 (RGB: 67, 125, 192)
+                const blueColor = "\x1b[38;2;67;125;192m";
+                const resetColor = "\x1b[0m";
+                // VS Code URL scheme for opening file directly in editor (degrades gracefully)
+                const reportLink = `${blueColor}\x1b]8;;vscode://file/${reportAbsPath}\x1b\\${reportRelPath}\x1b]8;;\x1b\\${resetColor}`;
+                console.log("\n💡 Next steps:");
+                console.log("   1. 📊 Open the migration report to see all changes:");
+                console.log(`      → ${reportLink}`);
+                console.log("      (Contains detailed list of every token replaced in every file)");
+                console.log("   2. Test your application thoroughly");
+                console.log(`   3. Original files backed up in: ${path.relative(process.cwd(), BACKUP_DIR)}/`);
+                console.log("   4. When everything works, delete the backup:");
+                console.log("      rm -rf mercury-migration-backup");
+            }
+            else {
+                console.log("\n✓ No changes needed - all tokens are up to date!");
+            }
+        }
+        else {
+            console.log("\n❌ Migration cancelled.");
+        }
+        readline.close();
+    });
+}

package/dist/components/chat/file.lit.js

@@ -36,7 +36,7 @@ const fileFooter = (file, fileFormat) => {
         [`file-footer format-${fileFormat} ${file.mimeType} ${file.uploadState ?? DEFAULT_FILE_UPLOAD_STATE}`]: true,
         [file.extension]: !!file.extension,
         [file.parts]: !!file.parts
-    })}"><span class="body-regular-xs" part="file-caption">${file.caption}${file.extension && "." + file.extension.toLowerCase()} </span>${file.uploadState === "in-progress"
+    })}"><span part="file-caption">${file.caption}${file.extension && "." + file.extension.toLowerCase()} </span>${file.uploadState === "in-progress"
         ? html `<mer-spinner></mer-spinner>`
         : nothing}</div>`;
 };

package/dist/components/chat/mer-animated-dots.js

@@ -18,26 +18,27 @@ export class MerAnimatedDots extends LitElement {
       border-radius: calc(var(--dot-size) / 2);
       opacity: var(--dot-initial-opacity);
       transform: scale(var(--dot-initial-scale));
-      animation: animateDot var(--animation-duration) ease-in-out infinite alternate;
+      animation: animateDot var(--animation-duration) ease-in-out infinite
+        alternate;
     }
     .dot:first-child {
       background-color: var(
         --chat-avatar-waiting-dot-1-color,
-        var(--mer-color__chat-awaiting-dot-1)
+        var(--color-accent-gradient-start)
       );
     }
     .dot:nth-child(2) {
       animation-delay: calc(var(--animation-duration) / 3);
       background-color: var(
         --chat-avatar-waiting-dot-2-color,
-        var(--mer-color__chat-awaiting-dot-2)
+        var(--color-accent-gradient-middle)
       );
     }
     .dot:nth-child(3) {
       animation-delay: calc(var(--animation-duration) / 1.5);
       background-color: var(
         --chat-avatar-waiting-dot-3-color,
-        var(--mer-color__chat-awaiting-dot-3)
+        var(--color-accent-gradient-end)
       );
     }
 

package/dist/components/chat/mer-spinner.lit.js

@@ -1,6 +1,6 @@
 import { LitElement, css, html } from "lit";
 export class MerSpinner extends LitElement {
-    static styles = css `:host{--spinner-size:var(--mer-spacing--md);--spinner-color:var(--mer-color__primary--300);--track-color:var(--mer-color__tinted-primary--50);--border-thinness:7;inline-size:var(--spinner-size);block-size:var(--spinner-size);border:calc(var(--spinner-size)/ var(--border-thinness)) solid var(--track-color);border-block-start:calc(var(--spinner-size)/ var(--border-thinness)) solid var(--spinner-color);border-radius:50%;animation:spin var(--mer-timing--regular,1s) linear infinite}@keyframes spin{100%{transform:rotate(360deg)}}`;
+    static styles = css `:host{--spinner-size:var(--size-16);--spinner-color:var(--color-neutral-1450);--track-color:var(--color-primary-600);--border-thinness:7;inline-size:var(--spinner-size);block-size:var(--spinner-size);border:calc(var(--spinner-size)/ var(--border-thinness)) solid var(--track-color);border-block-start:calc(var(--spinner-size)/ var(--border-thinness)) solid var(--spinner-color);border-radius:50%;animation:spin var(--timing-regular,1s) linear infinite}@keyframes spin{100%{transform:rotate(360deg)}}`;
     render() {
         return html ``;
     }

package/dist/index.d.ts

@@ -1,6 +1,7 @@
 export * from "./assets-manager.js";
 export * from "./bundles.js";
 export * from "./register-mercury.js";
+export * from "./cli/internal/config-file/types.js";
 export * from "./types.js";
 export * from "./components/chat/render.lit.js";
 export type * from "./components/chat/types";

package/dist/index.js

@@ -1 +1 @@
-"use strict";export*from"./assets-manager.js";export*from"./bundles.js";export*from"./register-mercury.js";export*from"./types.js";export*from"./components/chat/render.lit.js";
+"use strict";export*from"./assets-manager.js";export*from"./bundles.js";export*from"./register-mercury.js";export*from"./cli/internal/config-file/types.js";export*from"./types.js";export*from"./components/chat/render.lit.js";