@leftium/gg 0.0.28 → 0.0.30

package/dist/eruda/plugin.js

@@ -95,6 +95,20 @@ export function createGgPlugin(options, gg) {
             }
         });
     }
+    function soloNamespace(namespace) {
+        const ns = namespace.trim();
+        // Toggle: if already soloed on this namespace, restore all
+        if (filterPattern === ns) {
+            filterPattern = 'gg:*';
+            enabledNamespaces.clear();
+            getAllCapturedNamespaces().forEach((n) => enabledNamespaces.add(n));
+            return;
+        }
+        // Solo: show only this namespace
+        filterPattern = ns;
+        enabledNamespaces.clear();
+        enabledNamespaces.add(ns);
+    }
     function simplifyPattern(pattern) {
         if (!pattern)
             return '';
@@ -172,7 +186,11 @@ export function createGgPlugin(options, gg) {
     }
     function gridColumns() {
         const ns = nsColWidth !== null ? `${nsColWidth}px` : 'auto';
-        // diff | ns | handle | content (× is now inside ns)
+        // When filter expanded: icons | diff | ns | handle | content
+        // When collapsed:               diff | ns | handle | content
+        if (filterExpanded) {
+            return `auto auto ${ns} 4px 1fr`;
+        }
         return `auto ${ns} 4px 1fr`;
     }
     function buildHTML() {
@@ -191,6 +209,7 @@ export function createGgPlugin(options, gg) {
 			.gg-log-header {
 				display: contents;
 			}
+			.gg-log-icons,
 			.gg-log-diff,
 			.gg-log-ns,
 			.gg-log-handle,
@@ -199,6 +218,32 @@ export function createGgPlugin(options, gg) {
 				align-self: start !important;
 				border-top: 1px solid rgba(0,0,0,0.05);
 			}
+			.gg-log-icons {
+				display: flex;
+				gap: 2px;
+				padding: 0 4px 0 0;
+				white-space: nowrap;
+				align-self: stretch !important;
+			}
+			.gg-log-icons button {
+				all: unset;
+				cursor: pointer;
+				opacity: 0.35;
+				padding: 4px 10px;
+				line-height: 1;
+				display: flex;
+				align-items: center;
+			}
+			.gg-log-icons button:hover {
+				opacity: 1;
+				background: rgba(0,0,0,0.05);
+			}
+			.gg-solo-target {
+				cursor: pointer;
+			}
+			.gg-solo-target:hover {
+				background: rgba(0,0,0,0.05);
+			}
 			.gg-details {
 				grid-column: 1 / -1;
 				border-top: none;
@@ -242,15 +287,6 @@ export function createGgPlugin(options, gg) {
 					word-break: break-word;
 					padding: 4px 0;
 				}
-			/* Make header clickable for filtering when filters are expanded */
-			.gg-log-header.clickable {
-				cursor: pointer;
-			}
-			/* Desktop: highlight child elements since header has display: contents */
-			.gg-log-header.clickable:hover .gg-log-diff,
-			.gg-log-header.clickable:hover .gg-log-ns {
-				background: rgba(0,0,0,0.05);
-			}
 				.gg-filter-panel {
 					background: #f5f5f5;
 					padding: 10px;
@@ -333,6 +369,7 @@ export function createGgPlugin(options, gg) {
 					.gg-log-entry:not(:first-child) {
 						border-top: 1px solid rgba(0,0,0,0.05);
 					}
+				.gg-log-icons,
 				.gg-log-diff,
 				.gg-log-ns,
 				.gg-log-handle,
@@ -347,18 +384,6 @@ export function createGgPlugin(options, gg) {
 				margin-bottom: 4px;
 				min-width: 0;
 			}
-			/* Mobile: hover on container since it's not display: contents */
-			.gg-log-header.clickable {
-				padding: 2px 0;
-			}
-			.gg-log-header.clickable:hover {
-				background: rgba(0,0,0,0.05);
-			}
-				/* Override desktop child hover on mobile */
-				.gg-log-header.clickable:hover .gg-log-diff,
-				.gg-log-header.clickable:hover .gg-log-ns {
-					background: transparent;
-				}
 				.gg-log-diff {
 					padding: 0;
 					text-align: left;
@@ -612,17 +637,42 @@ export function createGgPlugin(options, gg) {
                 }
                 return;
             }
-            // Handle clickable header (when filters expanded)
-            // Skip if clicking on resize handle
-            if (!target?.classList?.contains('gg-log-handle') &&
-                target?.closest('.gg-log-header.clickable')) {
-                const header = target.closest('.gg-log-header.clickable');
-                const namespace = header.getAttribute('data-namespace');
+            // Handle filter icon clicks (hide / solo)
+            if (target?.classList?.contains('gg-icon-hide') ||
+                target?.classList?.contains('gg-icon-solo')) {
+                const iconsDiv = target.closest('.gg-log-icons');
+                const namespace = iconsDiv?.getAttribute('data-namespace');
+                if (!namespace)
+                    return;
+                if (target.classList.contains('gg-icon-hide')) {
+                    toggleNamespace(namespace, false);
+                }
+                else {
+                    soloNamespace(namespace);
+                }
+                localStorage.setItem('debug', filterPattern);
+                renderFilterUI();
+                renderLogs();
+                return;
+            }
+            // Handle clicking diff/ns cells to solo (same as 🎯)
+            if (target?.classList?.contains('gg-solo-target')) {
+                const namespace = target.getAttribute('data-namespace');
                 if (!namespace)
                     return;
-                // Toggle this namespace off
-                toggleNamespace(namespace, false);
-                // Save to localStorage and re-render
+                soloNamespace(namespace);
+                localStorage.setItem('debug', filterPattern);
+                renderFilterUI();
+                renderLogs();
+                return;
+            }
+            // Clicking background (container or grid, not a log element) restores all
+            if (filterExpanded &&
+                filterPattern !== 'gg:*' &&
+                (target === containerEl || target?.classList?.contains('gg-log-grid'))) {
+                filterPattern = 'gg:*';
+                enabledNamespaces.clear();
+                getAllCapturedNamespaces().forEach((ns) => enabledNamespaces.add(ns));
                 localStorage.setItem('debug', filterPattern);
                 renderFilterUI();
                 renderLogs();
@@ -727,20 +777,22 @@ export function createGgPlugin(options, gg) {
                 })
                     .join(' ');
             }
-            // Make header clickable when filters expanded
-            const headerClass = filterExpanded ? 'gg-log-header clickable' : 'gg-log-header';
-            const headerAttrs = filterExpanded
-                ? ` data-namespace="${ns}" title="Click to hide this namespace"`
-                : '';
-            // Add × at start of diff when filters expanded (bold, darker)
-            const filterIcon = filterExpanded
-                ? '<span style="font-weight: bold; color: #000; opacity: 0.6;">× </span>'
+            // Filter icons column (only when expanded)
+            const iconsCol = filterExpanded
+                ? `<div class="gg-log-icons" data-namespace="${ns}">` +
+                    `<button class="gg-icon-hide" title="Hide this namespace">🗑</button>` +
+                    `<button class="gg-icon-solo" title="Show only this namespace">🎯</button>` +
+                    `</div>`
                 : '';
+            // When filter expanded, diff+ns are clickable (solo) with data-namespace
+            const soloAttr = filterExpanded ? ` data-namespace="${ns}"` : '';
+            const soloClass = filterExpanded ? ' gg-solo-target' : '';
             // Desktop: grid layout, Mobile: stacked layout
             return (`<div class="gg-log-entry">` +
-                `<div class="${headerClass}"${headerAttrs}>` +
-                `<div class="gg-log-diff" style="color: ${color};">${filterIcon}${diff}</div>` +
-                `<div class="gg-log-ns" style="color: ${color};">${ns}</div>` +
+                `<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}>${ns}</div>` +
                 `<div class="gg-log-handle"></div>` +
                 `</div>` +
                 `<div class="gg-log-content">${argsHTML}</div>` +

package/dist/{gg-tag-plugin.d.ts → gg-call-sites-plugin.d.ts}

@@ -1,5 +1,5 @@
 import type { Plugin } from 'vite';
-export interface GgTagPluginOptions {
+export interface GgCallSitesPluginOptions {
     /**
      * Pattern to strip from file paths to produce short callpoints.
      * Should match up to and including the source root folder.
@@ -22,10 +22,10 @@ export interface GgTagPluginOptions {
  *
  * @example
  * // vite.config.ts
- * import { ggTagPlugin } from '@leftium/gg';
+ * import { ggCallSitesPlugin } from '@leftium/gg';
  *
  * export default defineConfig({
- *   plugins: [ggTagPlugin()]
+ *   plugins: [ggCallSitesPlugin()]
  * });
  */
-export default function ggTagPlugin(options?: GgTagPluginOptions): Plugin;
+export default function ggCallSitesPlugin(options?: GgCallSitesPluginOptions): Plugin;

package/dist/{gg-tag-plugin.js → gg-call-sites-plugin.js}

@@ -9,17 +9,27 @@
  *
  * @example
  * // vite.config.ts
- * import { ggTagPlugin } from '@leftium/gg';
+ * import { ggCallSitesPlugin } from '@leftium/gg';
  *
  * export default defineConfig({
- *   plugins: [ggTagPlugin()]
+ *   plugins: [ggCallSitesPlugin()]
  * });
  */
-export default function ggTagPlugin(options = {}) {
+export default function ggCallSitesPlugin(options = {}) {
     const srcRootPattern = options.srcRootPattern ?? '.*?(/(?:src|chunks)/)';
     const srcRootRegex = new RegExp(srcRootPattern, 'i');
     return {
-        name: 'gg-tag',
+        name: 'gg-call-sites',
+        config() {
+            // Set a compile-time flag so gg() can detect the plugin is installed.
+            // Vite replaces all occurrences of __GG_TAG_PLUGIN__ with true at build time,
+            // before any code executes — no ordering issues.
+            return {
+                define: {
+                    __GG_TAG_PLUGIN__: 'true'
+                }
+            };
+        },
         transform(code, id) {
             // Only process JS/TS/Svelte files
             if (!/\.(js|ts|svelte|jsx|tsx|mjs|mts)(\?.*)?$/.test(id))

package/dist/gg.js

@@ -1,6 +1,7 @@
 import debugFactory from './debug.js';
 import ErrorStackParser from 'error-stack-parser';
 import { BROWSER, DEV } from 'esm-env';
+const _ggCallSitesPlugin = typeof __GG_TAG_PLUGIN__ !== 'undefined' ? __GG_TAG_PLUGIN__ : false;
 /**
  * Creates a debug instance with custom formatArgs to add namespace padding
  * Padding is done at format time, not in the namespace itself, to keep colors stable
@@ -185,9 +186,12 @@ export function gg(...args) {
     let url = '';
     let stack = [];
     let namespace = 'gg:';
-    // In development: calculate detailed callpoint information
-    // In production: skip expensive stack parsing and use simple namespace
-    if (DEV) {
+    // When ggCallSitesPlugin is installed, all bare gg() calls are rewritten to gg.ns()
+    // at build time, so this code path only runs for un-transformed calls.
+    // Skip expensive stack parsing if the plugin is handling callpoints.
+    // In development without plugin: calculate detailed callpoint information
+    // In production without plugin: skip expensive stack parsing and use simple namespace
+    if (DEV && !_ggCallSitesPlugin) {
         // Ignore first stack frame, which is always the call to gg() itself.
         stack = ErrorStackParser.parse(new Error()).splice(1);
         // Example: http://localhost:5173/src/routes/+page.svelte
@@ -258,7 +262,7 @@ export function gg(...args) {
 /**
  * gg.ns() - Log with an explicit namespace (callpoint label).
  *
- * In production builds, the ggTagPlugin Vite plugin rewrites bare gg() calls
+ * In production builds, the ggCallSitesPlugin Vite plugin rewrites bare gg() calls
  * to gg.ns('callpoint', ...) so each call site gets a unique namespace even
  * after minification. Users can also call gg.ns() directly to set a meaningful
  * label that survives across builds.
@@ -514,10 +518,6 @@ export async function runGgDiagnostics() {
     if (BROWSER) {
         const hint = makeHint(!ggLogTest.enabled, " (Try `localStorage.debug = 'gg:*'`)");
         message(`${checkbox(ggLogTest.enabled)} localStorage.debug: ${localStorage?.debug}${hint}`);
-        if (DEV) {
-            const { status } = await fetch('/__open-in-editor?file=+');
-            message(makeHint(status === 222, `✅ (optional) open-in-editor vite plugin detected! (status code: ${status})`, `⚠️ (optional) open-in-editor vite plugin not detected. (status code: ${status}.) Add plugin in vite.config.ts`));
-        }
     }
     else {
         const hint = makeHint(!ggLogTest.enabled, ' (Try `DEBUG=gg:* npm dev`)');
@@ -526,6 +526,12 @@ export async function runGgDiagnostics() {
         }
         message(`${checkbox(ggLogTest.enabled)} DEBUG env variable: ${process?.env?.DEBUG}${hint}`);
     }
+    // Optional plugin diagnostics listed last
+    message(makeHint(_ggCallSitesPlugin, `✅ (optional) gg-call-sites vite plugin detected! Call-site namespaces baked in at build time.`, `⚠️ (optional) gg-call-sites vite plugin not detected. Add ggCallSitesPlugin() to vite.config.ts for build-time call-site namespaces (needed for useful namespaces in prod, faster/more reliable in dev)`));
+    if (BROWSER && DEV) {
+        const { status } = await fetch('/__open-in-editor?file=+');
+        message(makeHint(status === 222, `✅ (optional) open-in-editor vite plugin detected! (status code: ${status}) Clickable links open source files in editor.`, `⚠️ (optional) open-in-editor vite plugin not detected. (status code: ${status}) Add openInEditorPlugin() to vite.config.ts for clickable links that open source files in editor`));
+    }
     // Use plain console.log for diagnostics - appears in Eruda's Console tab
     console.log(ggMessage);
     // Reset namespace width after configuration check

package/dist/index.d.ts

@@ -1,4 +1,4 @@
 import { gg, fg, bg } from './gg.js';
 import openInEditorPlugin from './open-in-editor.js';
-import ggTagPlugin from './gg-tag-plugin.js';
-export { gg, fg, bg, openInEditorPlugin, ggTagPlugin };
+import ggCallSitesPlugin from './gg-call-sites-plugin.js';
+export { gg, fg, bg, openInEditorPlugin, ggCallSitesPlugin };

package/dist/index.js

@@ -1,5 +1,5 @@
 // Reexport your entry components here
 import { gg, fg, bg } from './gg.js';
 import openInEditorPlugin from './open-in-editor.js';
-import ggTagPlugin from './gg-tag-plugin.js';
-export { gg, fg, bg, openInEditorPlugin, ggTagPlugin };
+import ggCallSitesPlugin from './gg-call-sites-plugin.js';
+export { gg, fg, bg, openInEditorPlugin, ggCallSitesPlugin };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@leftium/gg",
-  "version": "0.0.28",
+  "version": "0.0.30",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/Leftium/gg.git"