cli-menu-kit 0.1.26 → 0.2.1

package/dist/config/user-config.js

@@ -0,0 +1,185 @@
+"use strict";
+/**
+ * User Configuration System for CLI Menu Kit
+ * Provides persistent user preferences
+ */
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.initConfig = initConfig;
+exports.getConfigManager = getConfigManager;
+exports.loadConfig = loadConfig;
+exports.saveConfig = saveConfig;
+exports.getConfig = getConfig;
+exports.setConfig = setConfig;
+exports.resetConfig = resetConfig;
+const fs = __importStar(require("fs"));
+const path = __importStar(require("path"));
+const os = __importStar(require("os"));
+class ConfigManager {
+    constructor(options) {
+        this.appName = options.appName;
+        this.configFileName = options.configFileName || 'config.json';
+        this.defaults = options.defaults || {};
+        // Set config directory
+        this.configDir = path.join(os.homedir(), `.${this.appName}`);
+        this.configPath = path.join(this.configDir, this.configFileName);
+        // Ensure config directory exists
+        this.ensureConfigDir();
+    }
+    /**
+     * Ensure config directory exists
+     */
+    ensureConfigDir() {
+        if (!fs.existsSync(this.configDir)) {
+            fs.mkdirSync(this.configDir, { recursive: true });
+        }
+    }
+    /**
+     * Load configuration
+     */
+    load() {
+        if (!fs.existsSync(this.configPath)) {
+            return { ...this.defaults };
+        }
+        try {
+            const content = fs.readFileSync(this.configPath, 'utf8');
+            const config = JSON.parse(content);
+            return { ...this.defaults, ...config };
+        }
+        catch (error) {
+            console.error('Failed to load config:', error);
+            return { ...this.defaults };
+        }
+    }
+    /**
+     * Save configuration
+     */
+    save(config) {
+        const currentConfig = this.load();
+        const newConfig = {
+            ...currentConfig,
+            ...config,
+            updated_at: new Date().toISOString()
+        };
+        try {
+            fs.writeFileSync(this.configPath, JSON.stringify(newConfig, null, 2), 'utf8');
+        }
+        catch (error) {
+            console.error('Failed to save config:', error);
+            throw error;
+        }
+    }
+    /**
+     * Get a specific config value
+     */
+    get(key) {
+        const config = this.load();
+        return config[key];
+    }
+    /**
+     * Set a specific config value
+     */
+    set(key, value) {
+        this.save({ [key]: value });
+    }
+    /**
+     * Reset configuration to defaults
+     */
+    reset() {
+        if (fs.existsSync(this.configPath)) {
+            fs.unlinkSync(this.configPath);
+        }
+    }
+    /**
+     * Get config file path
+     */
+    getConfigPath() {
+        return this.configPath;
+    }
+    /**
+     * Get config directory path
+     */
+    getConfigDir() {
+        return this.configDir;
+    }
+}
+// Global config manager instance
+let globalConfigManager = null;
+/**
+ * Initialize config manager
+ */
+function initConfig(options) {
+    globalConfigManager = new ConfigManager(options);
+    return globalConfigManager;
+}
+/**
+ * Get global config manager
+ */
+function getConfigManager() {
+    if (!globalConfigManager) {
+        throw new Error('Config manager not initialized. Call initConfig() first.');
+    }
+    return globalConfigManager;
+}
+/**
+ * Load configuration
+ */
+function loadConfig() {
+    return getConfigManager().load();
+}
+/**
+ * Save configuration
+ */
+function saveConfig(config) {
+    getConfigManager().save(config);
+}
+/**
+ * Get config value
+ */
+function getConfig(key) {
+    return getConfigManager().get(key);
+}
+/**
+ * Set config value
+ */
+function setConfig(key, value) {
+    getConfigManager().set(key, value);
+}
+/**
+ * Reset configuration
+ */
+function resetConfig() {
+    getConfigManager().reset();
+}

package/dist/core/colors.d.ts

@@ -44,19 +44,21 @@ export declare const colors: {
  * Defines consistent colors for different levels of information
  */
 export declare const defaultUIColors: {
-    readonly primary: "\u001B[36m";
-    readonly accent: "\u001B[34m";
+    readonly primary: "\u001B[0m";
+    readonly accent: "\u001B[0m";
     readonly textPrimary: "\u001B[0m";
     readonly textSecondary: "\u001B[2m";
     readonly textMuted: "\u001B[90m";
     readonly success: "\u001B[32m";
     readonly error: "\u001B[31m";
     readonly warning: "\u001B[33m";
-    readonly info: "\u001B[34m";
-    readonly cursor: "\u001B[36m";
-    readonly selected: "\u001B[32m";
+    readonly info: "\u001B[0m";
+    readonly cursor: "\u001B[0m";
+    readonly selected: "\u001B[0m";
+    readonly highlightBg: "";
+    readonly highlightText: "\u001B[0m";
     readonly disabled: "\u001B[2m";
-    readonly border: "\u001B[36m";
+    readonly border: "\u001B[90m";
     readonly separator: "\u001B[2m";
     readonly prefix: "\u001B[2m";
 };
@@ -64,19 +66,21 @@ export declare const defaultUIColors: {
  * Get current UI colors
  */
 export declare function getUIColors(): {
-    primary: "\u001B[36m";
-    accent: "\u001B[34m";
+    primary: "\u001B[0m";
+    accent: "\u001B[0m";
     textPrimary: "\u001B[0m";
     textSecondary: "\u001B[2m";
     textMuted: "\u001B[90m";
     success: "\u001B[32m";
     error: "\u001B[31m";
     warning: "\u001B[33m";
-    info: "\u001B[34m";
-    cursor: "\u001B[36m";
-    selected: "\u001B[32m";
+    info: "\u001B[0m";
+    cursor: "\u001B[0m";
+    selected: "\u001B[0m";
+    highlightBg: "";
+    highlightText: "\u001B[0m";
     disabled: "\u001B[2m";
-    border: "\u001B[36m";
+    border: "\u001B[90m";
     separator: "\u001B[2m";
     prefix: "\u001B[2m";
 };
@@ -93,19 +97,21 @@ export declare function resetUIColors(): void;
  * UI colors accessor (always returns current colors)
  */
 export declare const uiColors: {
-    readonly primary: "\u001B[36m";
-    readonly accent: "\u001B[34m";
+    readonly primary: "\u001B[0m";
+    readonly accent: "\u001B[0m";
     readonly textPrimary: "\u001B[0m";
     readonly textSecondary: "\u001B[2m";
     readonly textMuted: "\u001B[90m";
     readonly success: "\u001B[32m";
     readonly error: "\u001B[31m";
     readonly warning: "\u001B[33m";
-    readonly info: "\u001B[34m";
-    readonly cursor: "\u001B[36m";
-    readonly selected: "\u001B[32m";
+    readonly info: "\u001B[0m";
+    readonly cursor: "\u001B[0m";
+    readonly selected: "\u001B[0m";
+    readonly highlightBg: "";
+    readonly highlightText: "\u001B[0m";
     readonly disabled: "\u001B[2m";
-    readonly border: "\u001B[36m";
+    readonly border: "\u001B[90m";
     readonly separator: "\u001B[2m";
     readonly prefix: "\u001B[2m";
 };

package/dist/core/colors.js

@@ -59,8 +59,8 @@ exports.colors = {
  */
 exports.defaultUIColors = {
     // Primary elements
-    primary: exports.colors.cyan, // Main interactive elements, highlights
-    accent: exports.colors.blue, // Secondary highlights, links
+    primary: exports.colors.reset, // Main interactive elements, follows terminal foreground
+    accent: exports.colors.reset, // Secondary highlights, follows terminal foreground
     // Text hierarchy
     textPrimary: exports.colors.reset, // Main text (black/default)
     textSecondary: exports.colors.dim, // Descriptions, hints, less important text
@@ -69,13 +69,15 @@ exports.defaultUIColors = {
     success: exports.colors.green, // Success states, confirmations
     error: exports.colors.red, // Errors, warnings, exit
     warning: exports.colors.yellow, // Warnings, cautions
-    info: exports.colors.blue, // Informational messages
+    info: exports.colors.reset, // Informational messages
     // Interactive elements
-    cursor: exports.colors.cyan, // Cursor indicator
-    selected: exports.colors.green, // Selected items
+    cursor: exports.colors.reset, // Cursor indicator
+    selected: exports.colors.reset, // Selected items
+    highlightBg: '', // Optional background block for highlighted option
+    highlightText: exports.colors.reset, // Text color when highlightBg is used
     disabled: exports.colors.dim, // Disabled/inactive items
     // Structural elements
-    border: exports.colors.cyan, // Borders, frames
+    border: exports.colors.brightBlack, // Borders, frames
     separator: exports.colors.dim, // Separators, dividers
     prefix: exports.colors.dim // Number/letter prefixes
 };
@@ -118,6 +120,18 @@ exports.uiColors = new Proxy({}, {
  * Supports basic 8 colors and bright variants
  */
 function parseColorToRGB(colorCode) {
+    const trueColorMatch = /^\x1b\[38;2;(\d{1,3});(\d{1,3});(\d{1,3})m$/.exec(colorCode);
+    if (trueColorMatch) {
+        return {
+            r: Math.max(0, Math.min(255, Number.parseInt(trueColorMatch[1], 10))),
+            g: Math.max(0, Math.min(255, Number.parseInt(trueColorMatch[2], 10))),
+            b: Math.max(0, Math.min(255, Number.parseInt(trueColorMatch[3], 10)))
+        };
+    }
+    const ansi256Match = /^\x1b\[38;5;(\d{1,3})m$/.exec(colorCode);
+    if (ansi256Match) {
+        return ansi256ToRgb(Math.max(0, Math.min(255, Number.parseInt(ansi256Match[1], 10))));
+    }
     // Map of ANSI codes to approximate RGB values
     const colorMap = {
         '\x1b[30m': { r: 0, g: 0, b: 0 }, // black
@@ -139,6 +153,48 @@ function parseColorToRGB(colorCode) {
     };
     return colorMap[colorCode] || { r: 170, g: 170, b: 170 };
 }
+function detectColorMode(colorCode) {
+    if (/^\x1b\[38;2;\d{1,3};\d{1,3};\d{1,3}m$/.test(colorCode)) {
+        return 'truecolor';
+    }
+    if (/^\x1b\[38;5;\d{1,3}m$/.test(colorCode)) {
+        return 'ansi256';
+    }
+    return 'ansi16';
+}
+function ansi256ToRgb(code) {
+    if (code < 16) {
+        const ansi16Map = [
+            { r: 0, g: 0, b: 0 }, // 0 black
+            { r: 170, g: 0, b: 0 }, // 1 red
+            { r: 0, g: 170, b: 0 }, // 2 green
+            { r: 170, g: 85, b: 0 }, // 3 yellow
+            { r: 0, g: 0, b: 170 }, // 4 blue
+            { r: 170, g: 0, b: 170 }, // 5 magenta
+            { r: 0, g: 170, b: 170 }, // 6 cyan
+            { r: 170, g: 170, b: 170 }, // 7 white
+            { r: 85, g: 85, b: 85 }, // 8 bright black
+            { r: 255, g: 85, b: 85 }, // 9 bright red
+            { r: 85, g: 255, b: 85 }, // 10 bright green
+            { r: 255, g: 255, b: 85 }, // 11 bright yellow
+            { r: 85, g: 85, b: 255 }, // 12 bright blue
+            { r: 255, g: 85, b: 255 }, // 13 bright magenta
+            { r: 85, g: 255, b: 255 }, // 14 bright cyan
+            { r: 255, g: 255, b: 255 } // 15 bright white
+        ];
+        return ansi16Map[code];
+    }
+    if (code >= 16 && code <= 231) {
+        const n = code - 16;
+        const r = Math.floor(n / 36);
+        const g = Math.floor((n % 36) / 6);
+        const b = n % 6;
+        const steps = [0, 95, 135, 175, 215, 255];
+        return { r: steps[r], g: steps[g], b: steps[b] };
+    }
+    const gray = 8 + (code - 232) * 10;
+    return { r: gray, g: gray, b: gray };
+}
 /**
  * Convert RGB to ANSI 256-color code
  */
@@ -147,6 +203,12 @@ function rgbToAnsi256(r, g, b) {
     const code = 16 + 36 * Math.round(r / 255 * 5) + 6 * Math.round(g / 255 * 5) + Math.round(b / 255 * 5);
     return `\x1b[38;5;${code}m`;
 }
+function rgbToAnsiTrueColor(r, g, b) {
+    const rr = Math.max(0, Math.min(255, Math.round(r)));
+    const gg = Math.max(0, Math.min(255, Math.round(g)));
+    const bb = Math.max(0, Math.min(255, Math.round(b)));
+    return `\x1b[38;2;${rr};${gg};${bb}m`;
+}
 /**
  * Interpolate between two RGB colors
  */
@@ -171,11 +233,16 @@ function createGradient(startColor, endColor, steps) {
         return [startColor];
     const start = parseColorToRGB(startColor);
     const end = parseColorToRGB(endColor);
+    const startMode = detectColorMode(startColor);
+    const endMode = detectColorMode(endColor);
+    const outputMode = startMode === 'truecolor' && endMode === 'truecolor' ? 'truecolor' : 'ansi256';
     const gradient = [];
     for (let i = 0; i < steps; i++) {
         const factor = i / (steps - 1);
         const rgb = interpolateRGB(start, end, factor);
-        gradient.push(rgbToAnsi256(rgb.r, rgb.g, rgb.b));
+        gradient.push(outputMode === 'truecolor'
+            ? rgbToAnsiTrueColor(rgb.r, rgb.g, rgb.b)
+            : rgbToAnsi256(rgb.r, rgb.g, rgb.b));
     }
     return gradient;
 }

package/dist/core/hint-manager.d.ts

@@ -0,0 +1,29 @@
+/**
+ * Hint Manager - Manages hints from multiple components with priority
+ *
+ * Allows multiple components to set hints with different priorities.
+ * The highest priority hint is displayed.
+ */
+import { EventEmitter } from 'events';
+export declare class HintManager extends EventEmitter {
+    private entries;
+    /**
+     * Set a hint with a token and priority
+     * @param token - Unique identifier for this hint source
+     * @param text - Hint text to display
+     * @param priority - Higher priority hints are displayed first (default: 0)
+     */
+    set(token: string, text: string, priority?: number): void;
+    /**
+     * Clear a hint by token
+     */
+    clear(token: string): void;
+    /**
+     * Get the current highest priority hint
+     */
+    current(): string;
+    /**
+     * Clear all hints
+     */
+    clearAll(): void;
+}

package/dist/core/hint-manager.js

@@ -0,0 +1,65 @@
+"use strict";
+/**
+ * Hint Manager - Manages hints from multiple components with priority
+ *
+ * Allows multiple components to set hints with different priorities.
+ * The highest priority hint is displayed.
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.HintManager = void 0;
+const events_1 = require("events");
+class HintManager extends events_1.EventEmitter {
+    constructor() {
+        super(...arguments);
+        this.entries = new Map();
+    }
+    /**
+     * Set a hint with a token and priority
+     * @param token - Unique identifier for this hint source
+     * @param text - Hint text to display
+     * @param priority - Higher priority hints are displayed first (default: 0)
+     */
+    set(token, text, priority = 0) {
+        this.entries.set(token, {
+            text,
+            priority,
+            timestamp: Date.now()
+        });
+        this.emit('change', this.current());
+    }
+    /**
+     * Clear a hint by token
+     */
+    clear(token) {
+        if (this.entries.delete(token)) {
+            this.emit('change', this.current());
+        }
+    }
+    /**
+     * Get the current highest priority hint
+     */
+    current() {
+        const list = Array.from(this.entries.values());
+        if (list.length === 0) {
+            return '';
+        }
+        // Sort by priority (descending), then by timestamp (most recent first)
+        list.sort((a, b) => {
+            if (b.priority !== a.priority) {
+                return b.priority - a.priority;
+            }
+            return b.timestamp - a.timestamp;
+        });
+        return list[0].text;
+    }
+    /**
+     * Clear all hints
+     */
+    clearAll() {
+        if (this.entries.size > 0) {
+            this.entries.clear();
+            this.emit('change', '');
+        }
+    }
+}
+exports.HintManager = HintManager;

package/dist/core/renderer.d.ts

@@ -43,8 +43,9 @@ export declare function renderSeparator(char?: string, width?: number): void;
  * Render a section label (menu grouping)
  * @param label - Label text (optional)
  * @param width - Total width of the separator (default: 30)
+ * @param align - Alignment of the label (default: 'center')
  */
-export declare function renderSectionLabel(label?: string, width?: number): void;
+export declare function renderSectionLabel(label?: string, width?: number, align?: 'left' | 'center' | 'right'): void;
 /**
  * Render a message with icon
  * @param type - Message type (success, error, warning, info, question)

package/dist/core/renderer.js

@@ -69,14 +69,23 @@ function renderOption(text, isSelected, isHighlighted, prefix) {
     const parts = text.split(' - ');
     const mainText = parts[0];
     const description = parts.length > 1 ? parts.slice(1).join(' - ') : '';
+    const hasHighlightBlock = Boolean(colors_js_1.uiColors.highlightBg);
+    const blockLead = hasHighlightBlock ? ' ' : '';
     if (isHighlighted) {
-        line += `${colors_js_1.uiColors.primary}${colors_js_1.colors.bold}${mainText}${colors_js_1.colors.reset}`;
-        if (description) {
-            line += ` ${colors_js_1.uiColors.textSecondary}- ${description}${colors_js_1.colors.reset}`;
+        if (hasHighlightBlock) {
+            const highlightText = colors_js_1.uiColors.highlightText || colors_js_1.uiColors.textPrimary;
+            const mergedText = description ? `${mainText} - ${description}` : mainText;
+            line += `${colors_js_1.uiColors.highlightBg}${highlightText}${colors_js_1.colors.bold}${blockLead}${mergedText} ${colors_js_1.colors.reset}`;
+        }
+        else {
+            line += `${colors_js_1.uiColors.primary}${colors_js_1.colors.bold}${mainText}${colors_js_1.colors.reset}`;
+            if (description) {
+                line += ` ${colors_js_1.uiColors.textSecondary}- ${description}${colors_js_1.colors.reset}`;
+            }
         }
     }
     else {
-        line += `${colors_js_1.colors.bold}${mainText}${colors_js_1.colors.reset}`;
+        line += `${colors_js_1.uiColors.textPrimary}${colors_js_1.colors.bold}${blockLead}${mainText}${colors_js_1.colors.reset}`;
         if (description) {
             line += ` ${colors_js_1.uiColors.textSecondary}- ${description}${colors_js_1.colors.reset}`;
         }
@@ -90,12 +99,12 @@ function renderOption(text, isSelected, isHighlighted, prefix) {
  * @param showCursor - Whether to show cursor
  */
 function renderInputPrompt(prompt, value, showCursor = false) {
-    let line = `  ${prompt} `;
+    let line = `  ${colors_js_1.uiColors.textPrimary}${prompt}${colors_js_1.colors.reset} `;
     if (value) {
-        line += `${colors_js_1.colors.cyan}${value}${colors_js_1.colors.reset}`;
+        line += `${colors_js_1.uiColors.primary}${value}${colors_js_1.colors.reset}`;
     }
     if (showCursor) {
-        line += `${colors_js_1.colors.cyan}_${colors_js_1.colors.reset}`;
+        line += `${colors_js_1.uiColors.primary}_${colors_js_1.colors.reset}`;
     }
     (0, terminal_js_1.writeLine)(line);
 }
@@ -135,17 +144,32 @@ function renderSeparator(char = '─', width) {
  * Render a section label (menu grouping)
  * @param label - Label text (optional)
  * @param width - Total width of the separator (default: 30)
+ * @param align - Alignment of the label (default: 'center')
  */
-function renderSectionLabel(label, width = 30) {
+function renderSectionLabel(label, width = 30, align = 'center') {
     if (label) {
-        const totalWidth = width; // Use configured width
-        const padding = 2; // Spaces around label
+        const totalWidth = width;
         const labelWithPadding = ` ${label} `;
         const labelLength = labelWithPadding.length;
         const dashesTotal = totalWidth - labelLength;
-        const dashesLeft = Math.floor(dashesTotal / 2);
-        const dashesRight = dashesTotal - dashesLeft;
-        const line = `  ${colors_js_1.uiColors.separator}${'─'.repeat(dashesLeft)}${labelWithPadding}${'─'.repeat(dashesRight)}${colors_js_1.colors.reset}`;
+        let dashesLeft;
+        let dashesRight;
+        switch (align) {
+            case 'left':
+                dashesLeft = 0;
+                dashesRight = dashesTotal;
+                break;
+            case 'right':
+                dashesLeft = dashesTotal;
+                dashesRight = 0;
+                break;
+            case 'center':
+            default:
+                dashesLeft = Math.floor(dashesTotal / 2);
+                dashesRight = dashesTotal - dashesLeft;
+                break;
+        }
+        const line = `  ${colors_js_1.uiColors.primary}${colors_js_1.colors.bold}${'─'.repeat(dashesLeft)}${labelWithPadding}${'─'.repeat(dashesRight)}${colors_js_1.colors.reset}`;
         (0, terminal_js_1.writeLine)(line);
     }
     else {
@@ -163,23 +187,23 @@ function renderMessage(type, message) {
     switch (type) {
         case 'success':
             icon = '✓';
-            color = colors_js_1.colors.green;
+            color = colors_js_1.uiColors.success;
             break;
         case 'error':
             icon = '✗';
-            color = colors_js_1.colors.red;
+            color = colors_js_1.uiColors.error;
             break;
         case 'warning':
             icon = '⚠';
-            color = colors_js_1.colors.yellow;
+            color = colors_js_1.uiColors.warning;
             break;
         case 'info':
             icon = 'ℹ';
-            color = colors_js_1.colors.blue;
+            color = colors_js_1.uiColors.info;
             break;
         case 'question':
             icon = '?';
-            color = colors_js_1.colors.yellow;
+            color = colors_js_1.uiColors.warning;
             break;
     }
     (0, terminal_js_1.writeLine)(`${color}${icon}${colors_js_1.colors.reset} ${message}`);
@@ -193,16 +217,16 @@ function renderProgress(steps, currentStep) {
     const parts = [];
     steps.forEach((step, index) => {
         if (index === currentStep) {
-            parts.push(`${colors_js_1.colors.cyan}${step}${colors_js_1.colors.reset}`);
+            parts.push(`${colors_js_1.uiColors.primary}${step}${colors_js_1.colors.reset}`);
         }
         else if (index < currentStep) {
-            parts.push(step);
+            parts.push(`${colors_js_1.uiColors.textPrimary}${step}${colors_js_1.colors.reset}`);
         }
         else {
-            parts.push(`${colors_js_1.colors.dim}${step}${colors_js_1.colors.reset}`);
+            parts.push(`${colors_js_1.uiColors.textSecondary}${step}${colors_js_1.colors.reset}`);
         }
     });
-    (0, terminal_js_1.writeLine)(`  ${parts.join(` ${colors_js_1.colors.dim}→${colors_js_1.colors.reset} `)}`);
+    (0, terminal_js_1.writeLine)(`  ${parts.join(` ${colors_js_1.uiColors.textSecondary}→${colors_js_1.colors.reset} `)}`);
 }
 /**
  * Render a box with content