@djangocfg/devtools 2.1.542 → 2.1.543

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@djangocfg/devtools",
-  "version": "2.1.542",
+  "version": "2.1.543",
   "description": "Frontend devtools for django-cfg apps: error/console capture with backend ingest, plus a floating debug panel. One package, one event stream.",
   "keywords": [
     "django",
@@ -49,16 +49,16 @@
     "lint": "eslint ."
   },
   "peerDependencies": {
-    "@djangocfg/ui-core": "^2.1.542",
+    "@djangocfg/ui-core": "^2.1.543",
     "lucide-react": ">=0.400.0",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
     "zustand": "^5.0.0"
   },
   "devDependencies": {
-    "@djangocfg/eslint-config": "^2.1.542",
-    "@djangocfg/typescript-config": "^2.1.542",
-    "@djangocfg/ui-core": "^2.1.542",
+    "@djangocfg/eslint-config": "^2.1.543",
+    "@djangocfg/typescript-config": "^2.1.543",
+    "@djangocfg/ui-core": "^2.1.543",
     "@storybook/react-vite": "^10.5.0",
     "@types/node": "^25.9.5",
     "@types/react": "19.2.15",

package/src/panel/DevtoolsButton.tsx

@@ -104,6 +104,13 @@ export function DevtoolsButton({ className, panel = {}, enabled }: DevtoolsButto
                   'shadow-[0_0_0_1px_#171717,inset_0_0_0_1px_hsla(0,0%,100%,0.14),0px_16px_32px_-8px_rgba(0,0,0,0.24)]',
                   'transition-all duration-150 hover:scale-105',
                   'focus:outline-none focus-visible:ring-2 focus-visible:ring-white/50',
+                  // This button deliberately sits OUTSIDE the app's theme: it
+                  // mimics the Next.js dev indicator it sits beside (hence
+                  // `bg-black/80` and the hardcoded `#171717` ring above), and
+                  // must look the same in light and dark. `bg-destructive`
+                  // would follow the host's palette and stop matching its
+                  // neighbour.
+                  // eslint-disable-next-line no-restricted-syntax
                   errorCount > 0 && 'bg-red-600/90',
                   className,
                 )}
@@ -111,7 +118,15 @@ export function DevtoolsButton({ className, panel = {}, enabled }: DevtoolsButto
               >
                 <Bug className={cn('h-4 w-4', errorCount > 0 ? 'text-white' : 'text-white/80')} />
                 {errorCount > 0 && (
-                  <span className="absolute -right-1 -top-1 flex h-4 min-w-4 items-center justify-center rounded-full bg-white text-[10px] font-semibold text-red-600 shadow-sm">
+                  // Same reason as the button fill: this badge is part of the
+                  // off-theme dev-indicator styling, and its red must match the
+                  // fill above.
+                  <span
+                    className={
+                      // eslint-disable-next-line no-restricted-syntax
+                      'absolute -right-1 -top-1 flex h-4 min-w-4 items-center justify-center rounded-full bg-white text-[10px] font-semibold text-red-600 shadow-sm'
+                    }
+                  >
                     {errorCount}
                   </span>
                 )}

package/src/panel/LogsTab.tsx

@@ -12,12 +12,14 @@ import type { LogEntry, LogLevel } from '../types'
 
 const LEVELS: LogLevel[] = ['debug', 'info', 'success', 'warn', 'error']
 
+// Log levels ARE the status vocabulary, so they read from status tokens: a
+// preset that retunes "warning" retunes the warn line with it.
 const LEVEL_COLORS: Record<LogLevel, string> = {
   debug: 'text-muted-foreground',
-  info: 'text-blue-500',
-  success: 'text-emerald-500',
-  warn: 'text-amber-500',
-  error: 'text-red-500',
+  info: 'text-info',
+  success: 'text-success',
+  warn: 'text-warning',
+  error: 'text-destructive',
 }
 
 function formatTime(d: Date): string {
@@ -54,7 +56,7 @@ function Row({ entry }: { entry: LogEntry }) {
             </pre>
           )}
           {entry.stack && (
-            <pre className="overflow-x-auto rounded bg-muted/60 p-2 text-[11px] text-red-400/90">
+            <pre className="overflow-x-auto rounded bg-muted/60 p-2 text-[11px] text-destructive/90">
               {entry.stack}
             </pre>
           )}