@djangocfg/devtools 2.1.459

package/src/panel/DevtoolsButton.tsx

@@ -0,0 +1,129 @@
+'use client'
+
+import React, { useCallback, useEffect, useRef } from 'react'
+import { useStore } from 'zustand'
+
+import { Tooltip, TooltipContent, TooltipTrigger } from '@djangocfg/ui-core/components'
+import { useHotkey } from '@djangocfg/ui-core/hooks'
+import { cn } from '@djangocfg/ui-core/lib'
+import { Bug } from 'lucide-react'
+
+import { isDevelopment } from '../internal'
+import { devtoolsStore } from '../store'
+import { useDebugMode } from '../useDebugMode'
+import { DevtoolsPanel } from './DevtoolsPanel'
+import type { DevtoolsPanelProps } from './DevtoolsPanel'
+
+export interface DevtoolsButtonProps {
+  className?: string
+  /** Props forwarded to the panel */
+  panel?: DevtoolsPanelProps
+  /**
+   * Explicitly disable. Default: undefined (auto — visible in dev, hidden in
+   * prod, `?debug=1` always unlocks).
+   */
+  enabled?: boolean
+}
+
+/**
+ * Floating debug button.
+ *
+ * Visibility:
+ * 1. `enabled === false` and no `?debug=1` → renders nothing
+ * 2. dev or `?debug=1` → visible button + ⌘D shortcut
+ * 3. prod without `?debug=1` → invisible click trap (5 clicks in 2s unlock)
+ */
+export function DevtoolsButton({ className, panel = {}, enabled }: DevtoolsButtonProps) {
+  const isOpen = useStore(devtoolsStore, (s) => s.isOpen)
+  const togglePanel = useStore(devtoolsStore, (s) => s.togglePanel)
+  const errorCount = useStore(devtoolsStore, (s) =>
+    s.entries.reduce((n, e) => (e.level === 'error' ? n + 1 : n), 0),
+  )
+  const isDebugMode = useDebugMode()
+  const unlocked = isDevelopment || isDebugMode
+
+  useHotkey(
+    'meta+d',
+    (e) => {
+      e.preventDefault()
+      if (unlocked) togglePanel()
+    },
+    { preventDefault: true },
+  )
+
+  // Hide the Next.js dev indicator while the panel is open — it overlaps.
+  useEffect(() => {
+    if (typeof document === 'undefined') return
+    const apply = () => {
+      document.querySelectorAll<HTMLElement>('nextjs-portal').forEach((el) => {
+        el.style.display = isOpen ? 'none' : ''
+      })
+    }
+    apply()
+    const observer = new MutationObserver(apply)
+    observer.observe(document.body, { childList: true })
+    return () => observer.disconnect()
+  }, [isOpen])
+
+  // Easter egg: 5 clicks in 2s on the invisible trap opens the panel.
+  const clicks = useRef<number[]>([])
+  const handleTrapClick = useCallback(() => {
+    const now = Date.now()
+    clicks.current = [...clicks.current.filter((t) => now - t < 2000), now]
+    if (clicks.current.length >= 5) {
+      clicks.current = []
+      devtoolsStore.getState().openPanel()
+    }
+  }, [])
+
+  if (enabled === false && !isDebugMode) return null
+
+  if (!unlocked) {
+    return (
+      <div
+        className="fixed bottom-5 left-5 z-[99999] h-9 w-9 cursor-default opacity-0"
+        onClick={handleTrapClick}
+      />
+    )
+  }
+
+  return (
+    <>
+      {!isOpen && (
+        // Inline position, not Tailwind: this package's utility classes aren't
+        // always in the consumer app's content scan. `left: 64px` in dev
+        // clears the Next.js dev indicator.
+        <div className="fixed z-[99999]" style={{ bottom: 20, left: isDevelopment ? 64 : 20 }}>
+          <Tooltip>
+            <TooltipTrigger asChild>
+              <button
+                type="button"
+                className={cn(
+                  'relative flex h-9 w-9 items-center justify-center rounded-full',
+                  'bg-black/80 backdrop-blur-xl',
+                  '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',
+                  errorCount > 0 && 'bg-red-600/90',
+                  className,
+                )}
+                onClick={togglePanel}
+              >
+                <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">
+                    {errorCount}
+                  </span>
+                )}
+              </button>
+            </TooltipTrigger>
+            <TooltipContent side="right">
+              Devtools <kbd className="ml-1 text-[10px] opacity-60">⌘D</kbd>
+            </TooltipContent>
+          </Tooltip>
+        </div>
+      )}
+      <DevtoolsPanel {...panel} />
+    </>
+  )
+}

package/src/panel/DevtoolsPanel.tsx

@@ -0,0 +1,142 @@
+'use client'
+
+import React, { useMemo, useState } from 'react'
+import { useStore } from 'zustand'
+
+import { Badge, Button, Tooltip, TooltipContent, TooltipTrigger } from '@djangocfg/ui-core/components'
+import { cn } from '@djangocfg/ui-core/lib'
+import { Bug, Maximize2, Minimize2, ScrollText, X } from 'lucide-react'
+
+import { devtoolsStore } from '../store'
+import type { CustomDebugTab } from '../types'
+import { LogsTab } from './LogsTab'
+
+export interface DevtoolsPanelProps {
+  /** Additional app-specific tabs */
+  tabs?: CustomDebugTab[]
+  position?: 'bottom-right' | 'bottom-left' | 'top-right' | 'top-left'
+  defaultHeight?: number
+  defaultWidth?: number
+}
+
+const POSITION_STYLES: Record<NonNullable<DevtoolsPanelProps['position']>, React.CSSProperties> = {
+  'bottom-right': { bottom: 16, right: 16 },
+  'bottom-left': { bottom: 16, left: 16 },
+  'top-right': { top: 16, right: 16 },
+  'top-left': { top: 16, left: 16 },
+}
+
+export function DevtoolsPanel({
+  tabs: customTabs = [],
+  position = 'bottom-left',
+  defaultHeight = 480,
+  defaultWidth = 560,
+}: DevtoolsPanelProps) {
+  const isOpen = useStore(devtoolsStore, (s) => s.isOpen)
+  const activeTab = useStore(devtoolsStore, (s) => s.tab)
+  const setTab = useStore(devtoolsStore, (s) => s.setTab)
+  const closePanel = useStore(devtoolsStore, (s) => s.closePanel)
+  const errorCount = useStore(devtoolsStore, (s) =>
+    s.entries.reduce((n, e) => (e.level === 'error' ? n + 1 : n), 0),
+  )
+
+  const [isMinimized, setIsMinimized] = useState(false)
+
+  const allTabs = useMemo(
+    () => [
+      { id: 'logs', label: 'Logs', icon: ScrollText as React.ElementType },
+      ...customTabs.map((t) => ({ id: t.id, label: t.label, icon: t.icon })),
+    ],
+    [customTabs],
+  )
+
+  if (!isOpen) return null
+
+  return (
+    <div
+      className="fixed z-[99999] flex flex-col overflow-hidden rounded-lg border border-border bg-background shadow-xl"
+      style={{
+        ...POSITION_STYLES[position],
+        width: defaultWidth,
+        maxWidth: 'calc(100vw - 32px)',
+        height: isMinimized ? 40 : defaultHeight,
+        maxHeight: 'calc(100vh - 32px)',
+      }}
+    >
+      {/* Header */}
+      <div className="flex shrink-0 items-center gap-2 border-b border-border bg-muted/50 px-3 py-1.5">
+        <Bug className="h-4 w-4 text-primary" />
+        <span className="text-sm font-medium">Devtools</span>
+        {errorCount > 0 && (
+          <Badge variant="destructive" className="text-[10px]">
+            {errorCount} {errorCount === 1 ? 'error' : 'errors'}
+          </Badge>
+        )}
+
+        {!isMinimized && (
+          <div className="ml-3 flex items-center gap-0.5">
+            {allTabs.map((tab) => {
+              const Icon = tab.icon
+              const isActive = activeTab === tab.id
+              return (
+                <button
+                  key={tab.id}
+                  type="button"
+                  onClick={() => setTab(tab.id)}
+                  className={cn(
+                    'flex items-center gap-1.5 rounded px-2 py-0.5 text-xs transition-colors',
+                    isActive
+                      ? 'bg-background text-foreground shadow-sm'
+                      : 'text-muted-foreground hover:bg-muted hover:text-foreground',
+                  )}
+                >
+                  <Icon className="h-3 w-3" />
+                  {tab.label}
+                </button>
+              )
+            })}
+          </div>
+        )}
+
+        <div className="ml-auto flex items-center gap-1">
+          <Tooltip>
+            <TooltipTrigger asChild>
+              <Button
+                variant="ghost"
+                size="icon"
+                className="h-6 w-6"
+                onClick={() => setIsMinimized((v) => !v)}
+              >
+                {isMinimized ? <Maximize2 className="h-3.5 w-3.5" /> : <Minimize2 className="h-3.5 w-3.5" />}
+              </Button>
+            </TooltipTrigger>
+            <TooltipContent>{isMinimized ? 'Expand' : 'Minimize'}</TooltipContent>
+          </Tooltip>
+          <Tooltip>
+            <TooltipTrigger asChild>
+              <Button variant="ghost" size="icon" className="h-6 w-6" onClick={closePanel}>
+                <X className="h-3.5 w-3.5" />
+              </Button>
+            </TooltipTrigger>
+            <TooltipContent>Close</TooltipContent>
+          </Tooltip>
+        </div>
+      </div>
+
+      {/* Content */}
+      {!isMinimized && (
+        <div className="min-h-0 flex-1">
+          {activeTab === 'logs' && <LogsTab isActive />}
+          {customTabs.map((tab) => {
+            const Panel = tab.panel
+            return (
+              <div key={tab.id} className={cn('h-full', activeTab !== tab.id && 'hidden')}>
+                <Panel isActive={activeTab === tab.id} />
+              </div>
+            )
+          })}
+        </div>
+      )}
+    </div>
+  )
+}

package/src/panel/LogsTab.tsx

@@ -0,0 +1,165 @@
+'use client'
+
+import React, { useEffect, useMemo, useRef, useState } from 'react'
+import { useStore } from 'zustand'
+
+import { Badge, Button, Input } from '@djangocfg/ui-core/components'
+import { cn } from '@djangocfg/ui-core/lib'
+import { Copy, Trash2 } from 'lucide-react'
+
+import { devtoolsStore } from '../store'
+import type { LogEntry, LogLevel } from '../types'
+
+const LEVELS: LogLevel[] = ['debug', 'info', 'success', 'warn', 'error']
+
+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',
+}
+
+function formatTime(d: Date): string {
+  return d.toTimeString().slice(0, 8) + '.' + String(d.getMilliseconds()).padStart(3, '0')
+}
+
+function Row({ entry }: { entry: LogEntry }) {
+  const [expanded, setExpanded] = useState(false)
+  const hasDetails = Boolean(entry.stack || (entry.data && Object.keys(entry.data).length > 0))
+
+  return (
+    <div
+      className={cn(
+        'border-b border-border/50 px-3 py-1.5 font-mono text-xs leading-relaxed',
+        hasDetails && 'cursor-pointer hover:bg-muted/50',
+      )}
+      onClick={hasDetails ? () => setExpanded((v) => !v) : undefined}
+    >
+      <div className="flex items-baseline gap-2">
+        <span className="shrink-0 tabular-nums text-muted-foreground/70">
+          {formatTime(entry.timestamp)}
+        </span>
+        <span className={cn('shrink-0 font-semibold uppercase', LEVEL_COLORS[entry.level])}>
+          {entry.level}
+        </span>
+        <span className="shrink-0 text-muted-foreground">{entry.source}</span>
+        <span className="min-w-0 break-words">{entry.message}</span>
+      </div>
+      {expanded && (
+        <div className="mt-1 space-y-1 pl-2">
+          {entry.data && Object.keys(entry.data).length > 0 && (
+            <pre className="overflow-x-auto rounded bg-muted/60 p-2 text-[11px]">
+              {JSON.stringify(entry.data, null, 2)}
+            </pre>
+          )}
+          {entry.stack && (
+            <pre className="overflow-x-auto rounded bg-muted/60 p-2 text-[11px] text-red-400/90">
+              {entry.stack}
+            </pre>
+          )}
+        </div>
+      )}
+    </div>
+  )
+}
+
+export function LogsTab({ isActive }: { isActive: boolean }) {
+  const entries = useStore(devtoolsStore, (s) => s.entries)
+  const clearEntries = useStore(devtoolsStore, (s) => s.clearEntries)
+
+  const [levels, setLevels] = useState<Set<LogLevel>>(new Set(LEVELS))
+  const [search, setSearch] = useState('')
+  const scrollRef = useRef<HTMLDivElement>(null)
+
+  const filtered = useMemo(() => {
+    const q = search.trim().toLowerCase()
+    return entries.filter((e) => {
+      if (!levels.has(e.level)) return false
+      if (!q) return true
+      return (
+        e.message.toLowerCase().includes(q) ||
+        e.source.toLowerCase().includes(q) ||
+        (e.data ? JSON.stringify(e.data).toLowerCase().includes(q) : false)
+      )
+    })
+  }, [entries, levels, search])
+
+  // Follow the tail while the tab is visible
+  useEffect(() => {
+    if (!isActive) return
+    const el = scrollRef.current
+    if (el) el.scrollTop = el.scrollHeight
+  }, [filtered.length, isActive])
+
+  const toggleLevel = (level: LogLevel) =>
+    setLevels((prev) => {
+      const next = new Set(prev)
+      if (next.has(level)) next.delete(level)
+      else next.add(level)
+      return next
+    })
+
+  return (
+    <div className="flex h-full flex-col">
+      {/* Toolbar */}
+      <div className="flex shrink-0 items-center gap-2 border-b border-border px-3 py-1.5">
+        <div className="flex items-center gap-1">
+          {LEVELS.map((level) => (
+            <button
+              key={level}
+              type="button"
+              onClick={() => toggleLevel(level)}
+              className={cn(
+                'rounded px-1.5 py-0.5 text-[10px] font-semibold uppercase transition-colors',
+                levels.has(level)
+                  ? cn('bg-muted', LEVEL_COLORS[level])
+                  : 'text-muted-foreground/40 hover:text-muted-foreground',
+              )}
+            >
+              {level}
+            </button>
+          ))}
+        </div>
+        <Input
+          value={search}
+          onChange={(e) => setSearch(e.target.value)}
+          placeholder="Filter…"
+          className="h-6 flex-1 text-xs"
+        />
+        <Badge variant="secondary" className="text-[10px] tabular-nums">
+          {filtered.length}
+        </Badge>
+        <Button
+          variant="ghost"
+          size="icon"
+          className="h-6 w-6"
+          title="Copy visible entries as JSON"
+          onClick={() => navigator.clipboard?.writeText(JSON.stringify(filtered, null, 2))}
+        >
+          <Copy className="h-3 w-3" />
+        </Button>
+        <Button
+          variant="ghost"
+          size="icon"
+          className="h-6 w-6"
+          title="Clear"
+          onClick={clearEntries}
+        >
+          <Trash2 className="h-3 w-3" />
+        </Button>
+      </div>
+
+      {/* Entries */}
+      <div ref={scrollRef} className="flex-1 overflow-y-auto">
+        {filtered.length === 0 ? (
+          <div className="flex h-full items-center justify-center text-xs text-muted-foreground">
+            No log entries
+          </div>
+        ) : (
+          filtered.map((entry) => <Row key={entry.id} entry={entry} />)
+        )}
+      </div>
+    </div>
+  )
+}

package/src/server.ts

@@ -0,0 +1,86 @@
+/**
+ * @djangocfg/devtools/server
+ *
+ * Server-side error reporting for Next.js route handlers, Server Components,
+ * and middleware. No browser APIs — safe in Node.js / Edge Runtime.
+ *
+ * @example
+ * import { serverDevtools } from '@djangocfg/devtools/server'
+ * serverDevtools.configure({ project: 'my-app', baseUrl: 'https://api.myapp.com' })
+ *
+ * export async function POST(req: Request) {
+ *   try { ... } catch (err) {
+ *     await serverDevtools.captureError(err, { url: req.url })
+ *     return new Response('Internal Server Error', { status: 500 })
+ *   }
+ * }
+ */
+
+import { sendBatch } from './ingest'
+import { EventLevel, EventType } from './types'
+import type { DevtoolsEvent, ServerDevtoolsConfig } from './types'
+
+export { EventLevel, EventType } from './types'
+export type { DevtoolsEvent, ServerDevtoolsConfig } from './types'
+
+let _config: ServerDevtoolsConfig = {}
+
+async function send(events: DevtoolsEvent[]): Promise<void> {
+  try {
+    await sendBatch(_config.baseUrl ?? '', events.map((e) => ({
+      project_name: _config.project,
+      environment: _config.environment,
+      ...e,
+    })))
+  } catch {
+    // Never throw from error reporting
+  }
+}
+
+export const serverDevtools = {
+  configure(config: ServerDevtoolsConfig): void {
+    _config = config
+  },
+
+  async captureError(
+    err: unknown,
+    ctx?: { url?: string; extra?: Record<string, unknown> },
+  ): Promise<void> {
+    await send([
+      {
+        event_type: EventType.JS_ERROR,
+        level: EventLevel.ERROR,
+        message: err instanceof Error ? err.message : String(err),
+        stack_trace: err instanceof Error ? (err.stack ?? '') : '',
+        url: ctx?.url ?? '',
+        extra: ctx?.extra,
+      },
+    ])
+  },
+
+  async captureNetworkError(
+    status: number,
+    method: string,
+    apiUrl: string,
+    ctx?: { pageUrl?: string; extra?: Record<string, unknown> },
+  ): Promise<void> {
+    await send([
+      {
+        event_type: EventType.NETWORK_ERROR,
+        level: status >= 500 ? EventLevel.ERROR : EventLevel.WARNING,
+        message: `HTTP ${status} — ${method} ${apiUrl}`,
+        url: ctx?.pageUrl ?? '',
+        http_status: status,
+        http_method: method,
+        http_url: apiUrl,
+        extra: ctx?.extra,
+      },
+    ])
+  },
+
+  async capture(event: DevtoolsEvent): Promise<void> {
+    await send([event])
+  },
+}
+
+export type ServerDevtools = typeof serverDevtools

package/src/store.ts

@@ -0,0 +1,170 @@
+/**
+ * The ONE devtools store.
+ *
+ * Everything flows through here: captured events land in `entries` (what the
+ * panel renders) and — when ingest-worthy — in `outbox` (what gets POSTed to
+ * the backend). The old monitor/debuger split kept two stores synced through
+ * a bridge; a single store makes that whole layer unnecessary.
+ *
+ * Vanilla store so it works outside React (capture hooks, console API);
+ * React components subscribe via `useStore` from zustand.
+ */
+
+import { createStore } from 'zustand/vanilla'
+
+import { sendBatch } from './ingest'
+import {
+  DEFAULT_DEDUPE_TTL,
+  DEFAULT_MAX_BUFFER,
+  computeFingerprint,
+  makeDeduper,
+  truncate,
+} from './internal'
+import type { DevtoolsConfig, DevtoolsEvent, LogEntry, LogLevel } from './types'
+
+const MAX_ENTRIES = 1000
+const MAX_BATCH = 25
+
+// Circuit breaker: pause ingest after N consecutive transport failures
+const BREAKER_THRESHOLD = 3
+const BREAKER_COOLDOWN_MS = 60_000
+
+const isRecent = makeDeduper()
+
+let _counter = 0
+const nextId = () => `dt-${Date.now()}-${++_counter}`
+
+const eventToLogLevel: Record<string, LogLevel> = {
+  error: 'error',
+  warning: 'warn',
+  info: 'info',
+  debug: 'debug',
+}
+
+export interface DevtoolsState {
+  config: DevtoolsConfig
+  /** Panel feed — every captured event and local log line (ring buffer). */
+  entries: LogEntry[]
+  /** Events waiting to be POSTed to the ingest endpoint. */
+  outbox: DevtoolsEvent[]
+  // Panel UI
+  isOpen: boolean
+  tab: string
+  // Circuit breaker
+  _failures: number
+  _pausedUntil: number
+
+  setConfig: (config: DevtoolsConfig) => void
+  /** Add a local panel entry (loggers, custom instrumentation). Never ingested. */
+  addEntry: (entry: Omit<LogEntry, 'id' | 'timestamp'>) => void
+  /** Capture an event: panel entry + (if enabled) ingest outbox. */
+  capture: (event: DevtoolsEvent) => void
+  flush: (useBeacon?: boolean) => void
+  clearEntries: () => void
+  // Panel UI
+  openPanel: () => void
+  closePanel: () => void
+  togglePanel: () => void
+  setTab: (tab: string) => void
+}
+
+export const devtoolsStore = createStore<DevtoolsState>((set, get) => ({
+  config: {},
+  entries: [],
+  outbox: [],
+  isOpen: false,
+  tab: 'logs',
+  _failures: 0,
+  _pausedUntil: 0,
+
+  setConfig(config) {
+    set({ config })
+  },
+
+  addEntry(entry) {
+    const next = [...get().entries, { ...entry, id: nextId(), timestamp: new Date() }]
+    set({ entries: next.length > MAX_ENTRIES ? next.slice(-MAX_ENTRIES) : next })
+  },
+
+  capture(event) {
+    const { config } = get()
+
+    const message = truncate(event.message ?? '', 4997)
+    const stack = event.stack_trace ? truncate(event.stack_trace, 9997) : event.stack_trace
+    const fingerprint =
+      event.fingerprint ?? computeFingerprint(message, stack ?? '', event.http_url ?? event.url ?? '')
+
+    // One dedupe for everything: same fingerprint within TTL → drop entirely.
+    if (isRecent(fingerprint, config.dedupeTtl ?? DEFAULT_DEDUPE_TTL)) return
+
+    get().addEntry({
+      level: eventToLogLevel[event.level ?? 'error'] ?? 'error',
+      source: `capture:${event.event_type.toLowerCase()}`,
+      message,
+      data: {
+        ...(event.http_status != null && {
+          http_status: event.http_status,
+          http_method: event.http_method,
+          http_url: event.http_url,
+        }),
+        ...(event.extra ? { extra: event.extra } : {}),
+      },
+      stack: stack || undefined,
+    })
+
+    if (config.ingest === false) return
+
+    const sanitized: DevtoolsEvent = {
+      ...event,
+      message,
+      stack_trace: stack,
+      fingerprint,
+      build_id: event.build_id ?? config.buildId ?? '',
+      project_name: event.project_name ?? config.project,
+      environment: event.environment ?? config.environment,
+      // Drop oversized extras instead of failing serializer-side.
+      extra: (() => {
+        if (!event.extra) return event.extra
+        try {
+          return JSON.stringify(event.extra).length > 32_768 ? {} : event.extra
+        } catch {
+          return {}
+        }
+      })(),
+    }
+
+    const outbox = [...get().outbox, sanitized]
+    set({ outbox })
+
+    if (outbox.length >= (config.maxBufferSize ?? DEFAULT_MAX_BUFFER) || event.level === 'error') {
+      get().flush()
+    }
+  },
+
+  flush(useBeacon = false) {
+    const { outbox, config, _pausedUntil } = get()
+    if (outbox.length === 0 || Date.now() < _pausedUntil) return
+
+    const batch = outbox.slice(0, MAX_BATCH)
+    set({ outbox: outbox.slice(MAX_BATCH) })
+
+    sendBatch(config.baseUrl ?? '', batch, useBeacon).then(
+      () => set({ _failures: 0, _pausedUntil: 0 }),
+      () => {
+        const failures = get()._failures + 1
+        set({
+          _failures: failures,
+          _pausedUntil:
+            failures >= BREAKER_THRESHOLD ? Date.now() + BREAKER_COOLDOWN_MS : get()._pausedUntil,
+        })
+      },
+    )
+  },
+
+  clearEntries: () => set({ entries: [] }),
+
+  openPanel: () => set({ isOpen: true }),
+  closePanel: () => set({ isOpen: false }),
+  togglePanel: () => set((s) => ({ isOpen: !s.isOpen })),
+  setTab: (tab) => set({ tab }),
+}))

package/src/styles.css

@@ -0,0 +1,6 @@
+/**
+ * Tailwind v4 source detection for @djangocfg/devtools.
+ * Add `@import "@djangocfg/devtools/styles";` to your app's globals.css
+ * (after ui-core styles) so the panel's utility classes get compiled.
+ */
+@source "../**/*.{ts,tsx}";