@leftium/gg 0.0.37 → 0.0.39

package/README.md

@@ -159,6 +159,49 @@ gg(fg('rgb(255,99,71)')`Tomato text`);
 - Node.js terminal
 - All environments that support ANSI escape codes
 
+## Text Styling (ANSI)
+
+Add visual emphasis to logs with `bold()`, `italic()`, `underline()`, and `dim()`. These can be used standalone or chained with colors:
+
+```javascript
+import { gg, fg, bg, bold, italic, underline, dim } from '@leftium/gg';
+
+// Standalone text styles
+gg(bold()`Bold text`);
+gg(italic()`Italic text`);
+gg(underline()`Underlined text`);
+gg(dim()`Dimmed/faint text`);
+
+// Combined with colors
+gg(fg('red').bold()`Bold red error`);
+gg(fg('green').bold()`Bold green success`);
+gg(bg('yellow').italic()`Italic on yellow background`);
+gg(fg('blue').underline()`Blue underlined text`);
+
+// Multiple styles chained
+gg(bold().italic()`Bold and italic`);
+gg(fg('red').bold().underline()`Bold underlined red`);
+
+// Reusable style presets
+const finalStyle = fg('green').bold();
+const interimStyle = fg('gray');
+
+gg(finalStyle`final` + ' seg=0 "my name is John Kim Murphy" 96%');
+gg(interimStyle`interim` + ' seg=0 "my name is John Kim Murphy" 90%');
+
+// Mixed inline styling
+gg(bold()`Important:` + ' normal text ' + italic()`with emphasis`);
+```
+
+**Available styles:**
+
+- `bold()` - Bold/strong text (font-weight: bold)
+- `italic()` - Italic/emphasized text (font-style: italic)
+- `underline()` - Underlined text (text-decoration: underline)
+- `dim()` - Dimmed/faint text (opacity: 0.6)
+
+Text styles work in the same environments as colors (browser console, GgConsole, terminal).
+
 ## Other Frameworks
 
 `gg()` works in any JavaScript project. The Vite plugins work with any Vite-based framework (React, Vue, Solid, etc.).

package/dist/eruda/plugin.js

@@ -1663,6 +1663,7 @@ export function createGgPlugin(options, gg) {
      * Supports:
      * - Basic 3/4-bit colors: \x1b[31m (fg red), \x1b[41m (bg red), \x1b[91m (bright fg), etc.
      * - 24-bit RGB: \x1b[38;2;r;g;bm (foreground), \x1b[48;2;r;g;bm (background)
+     * - Text styles: \x1b[1m (bold), \x1b[2m (dim), \x1b[3m (italic), \x1b[4m (underline)
      * - Reset: \x1b[0m
      */
     function parseAnsiToHtml(text) {
@@ -1673,20 +1674,57 @@ export function createGgPlugin(options, gg) {
         let lastIndex = 0;
         let currentFg = null;
         let currentBg = null;
+        let currentBold = false;
+        let currentDim = false;
+        let currentItalic = false;
+        let currentUnderline = false;
         let match;
         while ((match = ansiRegex.exec(text)) !== null) {
             // Add text before this code (with current styling)
             const textBefore = text.slice(lastIndex, match.index);
             if (textBefore) {
-                html += wrapWithStyle(escapeHtml(textBefore), currentFg, currentBg);
+                html += wrapWithStyle(escapeHtml(textBefore), currentFg, currentBg, currentBold, currentDim, currentItalic, currentUnderline);
             }
             // Parse the ANSI code
             const code = match[1];
             const parts = code.split(';').map(Number);
             if (parts[0] === 0) {
-                // Reset
+                // Reset all
                 currentFg = null;
                 currentBg = null;
+                currentBold = false;
+                currentDim = false;
+                currentItalic = false;
+                currentUnderline = false;
+            }
+            else if (parts[0] === 1) {
+                // Bold
+                currentBold = true;
+            }
+            else if (parts[0] === 2) {
+                // Dim/Faint
+                currentDim = true;
+            }
+            else if (parts[0] === 3) {
+                // Italic
+                currentItalic = true;
+            }
+            else if (parts[0] === 4) {
+                // Underline
+                currentUnderline = true;
+            }
+            else if (parts[0] === 22) {
+                // Normal intensity (not bold, not dim)
+                currentBold = false;
+                currentDim = false;
+            }
+            else if (parts[0] === 23) {
+                // Not italic
+                currentItalic = false;
+            }
+            else if (parts[0] === 24) {
+                // Not underlined
+                currentUnderline = false;
             }
             else if (parts[0] === 38 && parts[1] === 2 && parts.length >= 5) {
                 // Foreground RGB: 38;2;r;g;b
@@ -1720,21 +1758,29 @@ export function createGgPlugin(options, gg) {
         // Add remaining text
         const remaining = text.slice(lastIndex);
         if (remaining) {
-            html += wrapWithStyle(escapeHtml(remaining), currentFg, currentBg);
+            html += wrapWithStyle(escapeHtml(remaining), currentFg, currentBg, currentBold, currentDim, currentItalic, currentUnderline);
         }
         return html || escapeHtml(text);
     }
     /**
-     * Wrap text with inline color styles
+     * Wrap text with inline color and text style CSS
      */
-    function wrapWithStyle(text, fg, bg) {
-        if (!fg && !bg)
+    function wrapWithStyle(text, fg, bg, bold, dim, italic, underline) {
+        if (!fg && !bg && !bold && !dim && !italic && !underline)
             return text;
         const styles = [];
         if (fg)
             styles.push(`color: ${fg}`);
         if (bg)
             styles.push(`background-color: ${bg}`);
+        if (bold)
+            styles.push('font-weight: bold');
+        if (dim)
+            styles.push('opacity: 0.6');
+        if (italic)
+            styles.push('font-style: italic');
+        if (underline)
+            styles.push('text-decoration: underline');
         return `<span style="${styles.join('; ')}">${text}</span>`;
     }
     return plugin;

package/dist/gg-call-sites-plugin.js

@@ -42,6 +42,9 @@ export default function ggCallSitesPlugin(options = {}) {
             // This prevents rewriting library code (including gg itself when published)
             if (id.includes('/node_modules/'))
                 return null;
+            // Don't transform the gg.ts file itself (contains gg function definitions)
+            if (id.includes('/gg.ts') || id.includes('/gg.js'))
+                return null;
             // Quick bail: no gg calls in this file
             if (!code.includes('gg(') &&
                 !code.includes('gg.ns(') &&

package/dist/gg.d.ts

@@ -70,6 +70,10 @@ type ColorTagFunction = (strings: TemplateStringsArray, ...values: unknown[]) =>
 interface ChainableColorFn extends ColorTagFunction {
     fg: (color: string) => ChainableColorFn;
     bg: (color: string) => ChainableColorFn;
+    bold: () => ChainableColorFn;
+    italic: () => ChainableColorFn;
+    underline: () => ChainableColorFn;
+    dim: () => ChainableColorFn;
 }
 /**
  * Foreground (text) color helper
@@ -91,6 +95,43 @@ export declare function fg(color: string): ChainableColorFn;
  * gg(bg('green').fg('white')`Success!`);
  */
 export declare function bg(color: string): ChainableColorFn;
+/**
+ * Bold text style
+ * Can be used directly or chained with colors
+ *
+ * @example
+ * gg(bold()`Important text`);
+ * gg(bold().fg('red')`Bold red error`);
+ * gg(fg('green').bold()`Bold green success`);
+ */
+export declare function bold(): ChainableColorFn;
+/**
+ * Italic text style
+ * Can be used directly or chained with colors
+ *
+ * @example
+ * gg(italic()`Emphasized text`);
+ * gg(italic().fg('blue')`Italic blue`);
+ */
+export declare function italic(): ChainableColorFn;
+/**
+ * Underline text style
+ * Can be used directly or chained with colors
+ *
+ * @example
+ * gg(underline()`Underlined text`);
+ * gg(underline().fg('cyan')`Underlined cyan`);
+ */
+export declare function underline(): ChainableColorFn;
+/**
+ * Dim text style (faint/dimmed appearance)
+ * Can be used directly or chained with colors
+ *
+ * @example
+ * gg(dim()`Less important text`);
+ * gg(dim().fg('white')`Dimmed white`);
+ */
+export declare function dim(): ChainableColorFn;
 export declare namespace gg {
     let _onLog: OnLogCallback | null;
     let ns: (nsLabel: string, ...args: unknown[]) => unknown;

package/dist/gg.js

@@ -806,24 +806,45 @@ function parseColor(color) {
     }
     return null;
 }
+/**
+ * ANSI style codes for text formatting
+ */
+const STYLE_CODES = {
+    bold: '\x1b[1m',
+    dim: '\x1b[2m',
+    italic: '\x1b[3m',
+    underline: '\x1b[4m'
+};
 /**
  * Internal helper to create chainable color function with method chaining
  */
-function createColorFunction(fgCode = '', bgCode = '') {
+function createColorFunction(fgCode = '', bgCode = '', styleCode = '') {
     const tagFn = function (strings, ...values) {
         const text = strings.reduce((acc, str, i) => acc + str + (values[i] !== undefined ? String(values[i]) : ''), '');
-        return fgCode + bgCode + text + '\x1b[0m';
+        return fgCode + bgCode + styleCode + text + '\x1b[0m';
     };
     // Add method chaining
     tagFn.fg = (color) => {
         const rgb = parseColor(color);
         const newFgCode = rgb ? `\x1b[38;2;${rgb.r};${rgb.g};${rgb.b}m` : '';
-        return createColorFunction(newFgCode, bgCode);
+        return createColorFunction(newFgCode, bgCode, styleCode);
     };
     tagFn.bg = (color) => {
         const rgb = parseColor(color);
         const newBgCode = rgb ? `\x1b[48;2;${rgb.r};${rgb.g};${rgb.b}m` : '';
-        return createColorFunction(fgCode, newBgCode);
+        return createColorFunction(fgCode, newBgCode, styleCode);
+    };
+    tagFn.bold = () => {
+        return createColorFunction(fgCode, bgCode, styleCode + STYLE_CODES.bold);
+    };
+    tagFn.italic = () => {
+        return createColorFunction(fgCode, bgCode, styleCode + STYLE_CODES.italic);
+    };
+    tagFn.underline = () => {
+        return createColorFunction(fgCode, bgCode, styleCode + STYLE_CODES.underline);
+    };
+    tagFn.dim = () => {
+        return createColorFunction(fgCode, bgCode, styleCode + STYLE_CODES.dim);
     };
     return tagFn;
 }
@@ -855,6 +876,51 @@ export function bg(color) {
     const bgCode = rgb ? `\x1b[48;2;${rgb.r};${rgb.g};${rgb.b}m` : '';
     return createColorFunction('', bgCode);
 }
+/**
+ * Bold text style
+ * Can be used directly or chained with colors
+ *
+ * @example
+ * gg(bold()`Important text`);
+ * gg(bold().fg('red')`Bold red error`);
+ * gg(fg('green').bold()`Bold green success`);
+ */
+export function bold() {
+    return createColorFunction('', '', STYLE_CODES.bold);
+}
+/**
+ * Italic text style
+ * Can be used directly or chained with colors
+ *
+ * @example
+ * gg(italic()`Emphasized text`);
+ * gg(italic().fg('blue')`Italic blue`);
+ */
+export function italic() {
+    return createColorFunction('', '', STYLE_CODES.italic);
+}
+/**
+ * Underline text style
+ * Can be used directly or chained with colors
+ *
+ * @example
+ * gg(underline()`Underlined text`);
+ * gg(underline().fg('cyan')`Underlined cyan`);
+ */
+export function underline() {
+    return createColorFunction('', '', STYLE_CODES.underline);
+}
+/**
+ * Dim text style (faint/dimmed appearance)
+ * Can be used directly or chained with colors
+ *
+ * @example
+ * gg(dim()`Less important text`);
+ * gg(dim().fg('white')`Dimmed white`);
+ */
+export function dim() {
+    return createColorFunction('', '', STYLE_CODES.dim);
+}
 /**
  * Hook for capturing gg() output (used by Eruda plugin)
  * Set this to a callback function to receive log entries

package/dist/index.d.ts

@@ -1,5 +1,5 @@
-import { gg, fg, bg } from './gg.js';
+import { gg, fg, bg, bold, italic, underline, dim } from './gg.js';
 import openInEditorPlugin from './open-in-editor.js';
 import ggCallSitesPlugin from './gg-call-sites-plugin.js';
 export { default as GgConsole } from './GgConsole.svelte';
-export { gg, fg, bg, openInEditorPlugin, ggCallSitesPlugin };
+export { gg, fg, bg, bold, italic, underline, dim, openInEditorPlugin, ggCallSitesPlugin };

package/dist/index.js

@@ -1,6 +1,6 @@
 // Reexport your entry components here
-import { gg, fg, bg } from './gg.js';
+import { gg, fg, bg, bold, italic, underline, dim } from './gg.js';
 import openInEditorPlugin from './open-in-editor.js';
 import ggCallSitesPlugin from './gg-call-sites-plugin.js';
 export { default as GgConsole } from './GgConsole.svelte';
-export { gg, fg, bg, openInEditorPlugin, ggCallSitesPlugin };
+export { gg, fg, bg, bold, italic, underline, dim, openInEditorPlugin, ggCallSitesPlugin };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@leftium/gg",
-  "version": "0.0.37",
+  "version": "0.0.39",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/Leftium/gg.git"
@@ -49,7 +49,6 @@
     "@sveltejs/vite-plugin-svelte": "^6.2.4",
     "@types/node": "^25.2.2",
     "add": "^2.0.6",
-    "eruda": "^3.4.3",
     "eslint": "^10.0.0",
     "eslint-config-prettier": "^10.1.8",
     "eslint-plugin-svelte": "^3.14.0",
@@ -74,6 +73,7 @@
     "@types/estree": "^1.0.8",
     "acorn": "^8.15.0",
     "dotenv": "^17.2.4",
+    "eruda": "^3.4.3",
     "esm-env": "^1.2.2",
     "launch-editor": "^2.12.0"
   },