@leftium/gg 0.0.38 → 0.0.40

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

@@ -205,6 +205,41 @@ export function createGgPlugin(options, gg) {
             }
         });
     }
+    function toggleNamespaces(namespaces, enable) {
+        const currentPattern = filterPattern || 'gg:*';
+        let parts = currentPattern
+            .split(',')
+            .map((p) => p.trim())
+            .filter(Boolean);
+        namespaces.forEach((namespace) => {
+            const ns = namespace.trim();
+            if (enable) {
+                // Remove any exclusion for this namespace
+                parts = parts.filter((p) => p !== `-${ns}`);
+            }
+            else {
+                // Add exclusion if not already present
+                const exclusion = `-${ns}`;
+                if (!parts.includes(exclusion)) {
+                    parts.push(exclusion);
+                }
+            }
+        });
+        filterPattern = parts.join(',');
+        // Simplify pattern
+        filterPattern = simplifyPattern(filterPattern);
+        // Sync enabledNamespaces from the NEW pattern
+        const allNamespaces = getAllCapturedNamespaces();
+        enabledNamespaces.clear();
+        const effectivePattern = filterPattern || 'gg:*';
+        allNamespaces.forEach((ns) => {
+            if (namespaceMatchesPattern(ns, effectivePattern)) {
+                enabledNamespaces.add(ns);
+            }
+        });
+        // Persist the new pattern
+        localStorage.setItem(FILTER_KEY, filterPattern);
+    }
     function soloNamespace(namespace) {
         const ns = namespace.trim();
         // Toggle: if already soloed on this namespace, restore all
@@ -377,6 +412,20 @@ export function createGgPlugin(options, gg) {
 			.gg-log-ns[data-file]:hover::after {
 				opacity: 1;
 			}
+		/* Clickable namespace segments */
+		.gg-ns-segment {
+			cursor: pointer;
+			padding: 1px 2px;
+			border-radius: 2px;
+			transition: background 0.1s;
+		}
+		/* Only show segment hover styling when in filter mode */
+		.gg-log-grid.filter-mode .gg-ns-segment:hover {
+			background: rgba(0,0,0,0.1);
+			text-decoration: underline;
+			text-decoration-style: solid;
+			text-underline-offset: 2px;
+		}
 			.gg-details {
 				grid-column: 1 / -1;
 				border-top: none;
@@ -870,6 +919,19 @@ export function createGgPlugin(options, gg) {
                 renderLogs();
                 return;
             }
+            // Handle "other" checkbox
+            if (target.classList.contains('gg-other-checkbox')) {
+                const otherNamespacesJson = target.getAttribute('data-other-namespaces');
+                if (!otherNamespacesJson)
+                    return;
+                const otherNamespaces = JSON.parse(otherNamespacesJson);
+                // Toggle all "other" namespaces at once
+                toggleNamespaces(otherNamespaces, target.checked);
+                // localStorage already saved in toggleNamespaces()
+                renderFilterUI();
+                renderLogs();
+                return;
+            }
             // Handle individual namespace checkboxes
             if (target.classList.contains('gg-ns-checkbox')) {
                 const namespace = target.getAttribute('data-namespace');
@@ -908,24 +970,50 @@ export function createGgPlugin(options, gg) {
             let checkboxesHTML = '';
             if (simple && allNamespaces.length > 0) {
                 const allChecked = enabledCount === totalCount;
+                // Count frequency of each namespace in the buffer
+                const allEntries = buffer.getEntries();
+                const nsCounts = new Map();
+                allEntries.forEach((entry) => {
+                    nsCounts.set(entry.namespace, (nsCounts.get(entry.namespace) || 0) + 1);
+                });
+                // Sort ALL namespaces by frequency (most common first)
+                const sortedAllNamespaces = [...allNamespaces].sort((a, b) => (nsCounts.get(b) || 0) - (nsCounts.get(a) || 0));
+                // Take top 5 most common (regardless of enabled state)
+                const displayedNamespaces = sortedAllNamespaces.slice(0, 5);
+                // Calculate "other" namespaces (not in top 5)
+                const displayedSet = new Set(displayedNamespaces);
+                const otherNamespaces = allNamespaces.filter((ns) => !displayedSet.has(ns));
+                const otherEnabledCount = otherNamespaces.filter((ns) => enabledNamespaces.has(ns)).length;
+                const otherTotalCount = otherNamespaces.length;
+                const otherChecked = otherEnabledCount > 0;
+                const otherCount = otherNamespaces.reduce((sum, ns) => sum + (nsCounts.get(ns) || 0), 0);
                 checkboxesHTML = `
 				<div class="gg-filter-checkboxes">
 					<label class="gg-filter-checkbox" style="font-weight: bold;">
 						<input type="checkbox" class="gg-all-checkbox" ${allChecked ? 'checked' : ''}>
 						<span>ALL</span>
 					</label>
-					${allNamespaces
+					${displayedNamespaces
                     .map((ns) => {
                     // Check if namespace matches the current pattern
                     const checked = namespaceMatchesPattern(ns, effectivePattern);
+                    const count = nsCounts.get(ns) || 0;
                     return `
 							<label class="gg-filter-checkbox">
 								<input type="checkbox" class="gg-ns-checkbox" data-namespace="${escapeHtml(ns)}" ${checked ? 'checked' : ''}>
-								<span>${escapeHtml(ns)}</span>
+								<span>${escapeHtml(ns)} (${count})</span>
 							</label>
 						`;
                 })
                     .join('')}
+					${otherTotalCount > 0
+                    ? `
+					<label class="gg-filter-checkbox" style="opacity: 0.7;">
+						<input type="checkbox" class="gg-other-checkbox" ${otherChecked ? 'checked' : ''} data-other-namespaces='${JSON.stringify(otherNamespaces)}'>
+						<span>other (${otherCount})</span>
+					</label>
+					`
+                    : ''}
 				</div>
 			`;
             }
@@ -1282,6 +1370,38 @@ export function createGgPlugin(options, gg) {
                 }
                 return;
             }
+            // Handle clicking namespace segments
+            if (target?.classList?.contains('gg-ns-segment')) {
+                // When filter is collapsed, open in editor instead of filtering
+                if (!filterExpanded) {
+                    const nsContainer = target.closest('.gg-log-ns');
+                    if (nsContainer?.hasAttribute('data-file')) {
+                        handleNamespaceClick(nsContainer);
+                    }
+                    return;
+                }
+                // When filter is expanded, apply hierarchical filtering
+                const filter = target.getAttribute('data-filter');
+                if (!filter)
+                    return;
+                // Toggle behavior: if already at this filter, restore all
+                if (filterPattern === filter) {
+                    filterPattern = 'gg:*';
+                    enabledNamespaces.clear();
+                    getAllCapturedNamespaces().forEach((ns) => enabledNamespaces.add(ns));
+                }
+                else {
+                    filterPattern = filter;
+                    enabledNamespaces.clear();
+                    getAllCapturedNamespaces()
+                        .filter((ns) => namespaceMatchesPattern(ns, filter))
+                        .forEach((ns) => enabledNamespaces.add(ns));
+                }
+                localStorage.setItem(FILTER_KEY, filterPattern);
+                renderFilterUI();
+                renderLogs();
+                return;
+            }
             // Handle clicking namespace to open in editor (when filter collapsed)
             if (target?.classList?.contains('gg-log-ns') &&
                 target.hasAttribute('data-file') &&
@@ -1462,11 +1582,45 @@ export function createGgPlugin(options, gg) {
             logContainer.html('<div style="padding: 20px; text-align: center; opacity: 0.5;">No logs captured yet. Call gg() to see output here.</div>');
             return;
         }
-        const logsHTML = `<div class="gg-log-grid" style="grid-template-columns: ${gridColumns()};">${entries
+        const logsHTML = `<div class="gg-log-grid${filterExpanded ? ' filter-mode' : ''}" style="grid-template-columns: ${gridColumns()};">${entries
             .map((entry, index) => {
             const color = entry.color || '#0066cc';
             const diff = `+${humanize(entry.diff)}`;
             const ns = escapeHtml(entry.namespace);
+            // Split namespace into clickable segments on multiple delimiters: : @ / - _
+            const parts = entry.namespace.split(/([:\/@\-_])/);
+            const nsSegments = [];
+            const delimiters = [];
+            for (let i = 0; i < parts.length; i++) {
+                if (i % 2 === 0) {
+                    // Even indices are segments
+                    if (parts[i])
+                        nsSegments.push(parts[i]);
+                }
+                else {
+                    // Odd indices are delimiters
+                    delimiters.push(parts[i]);
+                }
+            }
+            let nsHTML = '';
+            for (let i = 0; i < nsSegments.length; i++) {
+                const segment = escapeHtml(nsSegments[i]);
+                // Build filter pattern: reconstruct namespace up to this point
+                let filterPattern = '';
+                for (let j = 0; j <= i; j++) {
+                    filterPattern += nsSegments[j];
+                    if (j < i) {
+                        filterPattern += delimiters[j];
+                    }
+                    else if (j < nsSegments.length - 1) {
+                        filterPattern += delimiters[j] + '*';
+                    }
+                }
+                nsHTML += `<span class="gg-ns-segment" data-filter="${escapeHtml(filterPattern)}">${segment}</span>`;
+                if (i < nsSegments.length - 1) {
+                    nsHTML += escapeHtml(delimiters[i]);
+                }
+            }
             // Format each arg individually - objects are expandable
             let argsHTML = '';
             let detailsHTML = '';
@@ -1569,7 +1723,7 @@ export function createGgPlugin(options, gg) {
                 `<div class="gg-log-header">` +
                 iconsCol +
                 `<div class="gg-log-diff${soloClass}" style="color: ${color};"${soloAttr}>${diff}</div>` +
-                `<div class="gg-log-ns${soloClass}" style="color: ${color};"${soloAttr}${fileAttr}${lineAttr}${colAttr}${fileTitle}>${ns}</div>` +
+                `<div class="gg-log-ns${soloClass}" style="color: ${color};" data-namespace="${escapeHtml(entry.namespace)}"${fileAttr}${lineAttr}${colAttr}${fileTitle}>${nsHTML}</div>` +
                 `<div class="gg-log-handle"></div>` +
                 `</div>` +
                 `<div class="gg-log-content"${!entry.level && entry.src?.trim() && !/^['"`]/.test(entry.src) ? ` data-src="${escapeHtml(entry.src)}"` : ''}>${argsHTML}${stackHTML}</div>` +
@@ -1663,6 +1817,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 +1828,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 +1912,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.38",
+  "version": "0.0.40",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/Leftium/gg.git"