@object-ui/components 3.0.2 → 3.1.0

package/src/custom/mobile-dialog-content.tsx

@@ -0,0 +1,67 @@
+/**
+ * ObjectUI
+ * Copyright (c) 2024-present ObjectStack Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+/**
+ * MobileDialogContent
+ *
+ * A mobile-optimized wrapper around the upstream Shadcn DialogContent.
+ * On mobile (< sm breakpoint), the dialog is full-screen with a larger
+ * close-button touch target (≥ 44×44px per WCAG 2.5.5).
+ * On tablet+ (≥ sm), it falls back to the standard centered dialog.
+ *
+ * This lives in `custom/` to avoid modifying the Shadcn-synced `ui/dialog.tsx`.
+ */
+
+import * as React from 'react';
+import * as DialogPrimitive from '@radix-ui/react-dialog';
+import { X } from 'lucide-react';
+import { cn } from '../lib/utils';
+import { DialogOverlay, DialogPortal } from '../ui/dialog';
+
+export const MobileDialogContent = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>
+>(({ className, children, ...props }, ref) => (
+  <DialogPortal>
+    <DialogOverlay />
+    <DialogPrimitive.Content
+      ref={ref}
+      className={cn(
+        // Mobile-first: full-screen
+        'fixed inset-0 z-50 w-full bg-background p-4 shadow-lg duration-200',
+        'h-[100dvh]',
+        // Desktop (sm+): centered dialog with border + rounded corners
+        'sm:inset-auto sm:left-[50%] sm:top-[50%] sm:translate-x-[-50%] sm:translate-y-[-50%]',
+        'sm:max-w-lg sm:h-auto sm:max-h-[90vh] sm:rounded-lg sm:border sm:p-6',
+        // Animations
+        'data-[state=open]:animate-in data-[state=closed]:animate-out',
+        'data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0',
+        'data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95',
+        'data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%]',
+        'data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%]',
+        className,
+      )}
+      {...props}
+    >
+      {children}
+      <DialogPrimitive.Close
+        className={cn(
+          'absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity',
+          'hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2',
+          'disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground',
+          // Mobile touch target ≥ 44×44px (WCAG 2.5.5)
+          'min-h-[44px] min-w-[44px] sm:min-h-0 sm:min-w-0 flex items-center justify-center',
+        )}
+      >
+        <X className="h-5 w-5 sm:h-4 sm:w-4" />
+        <span className="sr-only">Close</span>
+      </DialogPrimitive.Close>
+    </DialogPrimitive.Content>
+  </DialogPortal>
+));
+MobileDialogContent.displayName = 'MobileDialogContent';

package/src/custom/navigation-overlay.tsx

@@ -89,6 +89,8 @@ export interface NavigationOverlayProps {
   width?: string | number;
   /** Whether navigation is an overlay mode */
   isOverlay: boolean;
+  /** Target view/form name from NavigationConfig */
+  view?: string;
   /** Title for the overlay header */
   title?: string;
   /** Description for the overlay header */
@@ -100,6 +102,12 @@ export interface NavigationOverlayProps {
    * Receives the selected record.
    */
   children: (record: Record<string, unknown>) => React.ReactNode;
+  /**
+   * Optional render function for a specific view/form based on `view` prop.
+   * When provided, this takes priority over `children` for rendering overlay content.
+   * Receives the selected record and the view name.
+   */
+  renderView?: (record: Record<string, unknown>, viewName: string) => React.ReactNode;
   /**
    * The main content to wrap (for split mode only).
    * In split mode, the main content is rendered in the left panel.
@@ -146,10 +154,12 @@ export const NavigationOverlay: React.FC<NavigationOverlayProps> = ({
   close,
   setIsOpen,
   width,
+  view,
   title,
   description,
   className,
   children,
+  renderView,
   mainContent,
   popoverTrigger,
 }) => {
@@ -165,6 +175,14 @@ export const NavigationOverlay: React.FC<NavigationOverlayProps> = ({
   const widthStyle = getWidthStyle(width);
   const resolvedTitle = title || 'Record Detail';
 
+  // Use renderView when both renderView and view are provided; otherwise fallback to children
+  const renderContent = (record: Record<string, unknown>) => {
+    if (renderView && view) {
+      return renderView(record, view);
+    }
+    return children(record);
+  };
+
   // --- Drawer Mode (Sheet) ---
   if (mode === 'drawer') {
     return (
@@ -179,7 +197,7 @@ export const NavigationOverlay: React.FC<NavigationOverlayProps> = ({
             {description && <SheetDescription>{description}</SheetDescription>}
           </SheetHeader>
           <div className="mt-4">
-            {children(selectedRecord)}
+            {renderContent(selectedRecord)}
           </div>
         </SheetContent>
       </Sheet>
@@ -199,7 +217,7 @@ export const NavigationOverlay: React.FC<NavigationOverlayProps> = ({
             {description && <DialogDescription>{description}</DialogDescription>}
           </DialogHeader>
           <div className="mt-4">
-            {children(selectedRecord)}
+            {renderContent(selectedRecord)}
           </div>
         </DialogContent>
       </Dialog>
@@ -258,7 +276,7 @@ export const NavigationOverlay: React.FC<NavigationOverlayProps> = ({
             {description && (
               <p className="text-sm text-muted-foreground mb-4">{description}</p>
             )}
-            {children(selectedRecord)}
+            {renderContent(selectedRecord)}
           </div>
         </ResizablePanel>
       </PanelGroup>
@@ -267,6 +285,26 @@ export const NavigationOverlay: React.FC<NavigationOverlayProps> = ({
 
   // --- Popover Mode ---
   if (mode === 'popover') {
+    if (!popoverTrigger) {
+      // Fallback: render as a compact floating card when no trigger element is provided
+      if (!isOpen) return null;
+      return (
+        <Dialog open={isOpen} onOpenChange={setIsOpen}>
+          <DialogContent
+            className={cn('w-96 max-h-[80vh] overflow-y-auto p-4', className)}
+            style={widthStyle}
+          >
+            <DialogHeader>
+              <DialogTitle className="text-sm">{resolvedTitle}</DialogTitle>
+              {description && <DialogDescription className="text-xs">{description}</DialogDescription>}
+            </DialogHeader>
+            <div className="mt-2">
+              {renderContent(selectedRecord)}
+            </div>
+          </DialogContent>
+        </Dialog>
+      );
+    }
     return (
       <Popover open={isOpen} onOpenChange={setIsOpen}>
         {popoverTrigger && (
@@ -283,7 +321,7 @@ export const NavigationOverlay: React.FC<NavigationOverlayProps> = ({
             {description && (
               <p className="text-xs text-muted-foreground">{description}</p>
             )}
-            {children(selectedRecord)}
+            {renderContent(selectedRecord)}
           </div>
         </PopoverContent>
       </Popover>

package/src/custom/section-header.tsx

@@ -0,0 +1,68 @@
+/**
+ * ObjectUI
+ * Copyright (c) 2024-present ObjectStack Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import { ChevronDown, ChevronRight } from "lucide-react"
+
+import { cn } from "../lib/utils"
+
+export interface SectionHeaderProps {
+  /** Section heading text */
+  title: string
+  /** Icon rendered before the title */
+  icon?: React.ReactNode
+  /** Enable collapse/expand toggle */
+  collapsible?: boolean
+  /** Current collapsed state */
+  collapsed?: boolean
+  /** Callback when toggling collapse/expand */
+  onToggle?: () => void
+  /** Data-testid attribute */
+  testId?: string
+  /** Additional CSS class name */
+  className?: string
+}
+
+/**
+ * Section heading with optional collapse/expand support.
+ *
+ * Renders as a `<button>` when collapsible, with a chevron icon
+ * indicating the expand/collapse state. Uses `aria-expanded` for accessibility.
+ */
+function SectionHeader({ title, icon, collapsible, collapsed, onToggle, testId, className }: SectionHeaderProps) {
+  const titleContent = (
+    <h3 className="text-xs font-semibold text-foreground uppercase tracking-wider flex items-center gap-1.5">
+      {icon && <span className="text-muted-foreground shrink-0" aria-hidden="true">{icon}</span>}
+      {title}
+    </h3>
+  )
+  if (collapsible) {
+    return (
+      <button
+        data-testid={testId}
+        className={cn("flex items-center justify-between pt-4 pb-1.5 first:pt-0 w-full text-left", className)}
+        onClick={onToggle}
+        type="button"
+        aria-expanded={!collapsed}
+      >
+        {titleContent}
+        {collapsed ? (
+          <ChevronRight className="h-3 w-3 text-muted-foreground" />
+        ) : (
+          <ChevronDown className="h-3 w-3 text-muted-foreground" />
+        )}
+      </button>
+    )
+  }
+  return (
+    <div className={cn("pt-4 pb-1.5 first:pt-0", className)} data-testid={testId}>
+      {titleContent}
+    </div>
+  )
+}
+
+export { SectionHeader }

package/src/debug/DebugPanel.tsx

@@ -0,0 +1,313 @@
+/**
+ * ObjectUI
+ * Copyright (c) 2024-present ObjectStack Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import React, { useState, useCallback, useMemo } from 'react';
+import type { DebugFlags } from '@object-ui/core';
+import { ComponentRegistry, DebugCollector } from '@object-ui/core';
+import type { PerfEntry, ExprEntry, EventEntry, DebugEntry } from '@object-ui/core';
+import { cn } from '../lib/utils';
+
+/* ------------------------------------------------------------------ */
+/*  Types                                                             */
+/* ------------------------------------------------------------------ */
+
+export interface DebugPanelTab {
+  id: string;
+  label: string;
+  icon?: React.ReactNode;
+  render: () => React.ReactNode;
+}
+
+export interface DebugPanelProps {
+  /** Whether the panel is open */
+  open: boolean;
+  /** Toggle callback */
+  onClose: () => void;
+  /** Debug flags from the URL / hook */
+  flags?: DebugFlags;
+  /** Current schema being rendered (for the Schema tab) */
+  schema?: unknown;
+  /** Current data context (for the Data tab) */
+  dataContext?: unknown;
+  /** Extra tabs provided by plugins */
+  extraTabs?: DebugPanelTab[];
+  /** CSS class override */
+  className?: string;
+}
+
+/* ------------------------------------------------------------------ */
+/*  Built-in tab renderers                                            */
+/* ------------------------------------------------------------------ */
+
+function SchemaTab({ schema }: { schema?: unknown }) {
+  if (!schema) {
+    return <p className="text-xs text-muted-foreground italic">No schema available</p>;
+  }
+  return (
+    <pre className="text-[11px] leading-relaxed font-mono overflow-auto max-h-[60vh] whitespace-pre-wrap break-all">
+      {JSON.stringify(schema, null, 2)}
+    </pre>
+  );
+}
+
+function DataTab({ dataContext }: { dataContext?: unknown }) {
+  if (!dataContext) {
+    return <p className="text-xs text-muted-foreground italic">No data context available</p>;
+  }
+  return (
+    <pre className="text-[11px] leading-relaxed font-mono overflow-auto max-h-[60vh] whitespace-pre-wrap break-all">
+      {JSON.stringify(dataContext, null, 2)}
+    </pre>
+  );
+}
+
+function RegistryTab() {
+  const entries = useMemo(() => {
+    try {
+      return ComponentRegistry.getAllTypes();
+    } catch {
+      return [];
+    }
+  }, []);
+
+  if (entries.length === 0) {
+    return <p className="text-xs text-muted-foreground italic">No registered components</p>;
+  }
+  return (
+    <div className="space-y-1 max-h-[60vh] overflow-auto">
+      {entries.map((name: string) => (
+        <div
+          key={name}
+          className="flex items-center gap-2 px-2 py-1 rounded text-xs font-mono bg-muted/30"
+        >
+          <span className="inline-block w-2 h-2 rounded-full bg-green-500 shrink-0" />
+          {name}
+        </div>
+      ))}
+      <p className="text-[10px] text-muted-foreground mt-2">
+        {entries.length} component{entries.length !== 1 ? 's' : ''} registered
+      </p>
+    </div>
+  );
+}
+
+function FlagsTab({ flags }: { flags?: DebugFlags }) {
+  if (!flags) {
+    return <p className="text-xs text-muted-foreground italic">No debug flags</p>;
+  }
+  return (
+    <pre className="text-[11px] leading-relaxed font-mono overflow-auto max-h-[60vh] whitespace-pre-wrap break-all">
+      {JSON.stringify(flags, null, 2)}
+    </pre>
+  );
+}
+
+/* ------------------------------------------------------------------ */
+/*  Collector-backed tabs (Perf / Expr / Events)                      */
+/* ------------------------------------------------------------------ */
+
+function useCollectorEntries(kind?: DebugEntry['kind']): DebugEntry[] {
+  const collector = DebugCollector.getInstance();
+  const [entries, setEntries] = useState<DebugEntry[]>(() => collector.getEntries(kind));
+
+  React.useEffect(() => {
+    // Sync on mount in case entries were added before subscribe
+    setEntries(collector.getEntries(kind));
+    const unsub = collector.subscribe(() => {
+      setEntries(collector.getEntries(kind));
+    });
+    return unsub;
+  }, [collector, kind]);
+
+  return entries;
+}
+
+function PerfTab() {
+  const entries = useCollectorEntries('perf');
+  const perfItems = entries.map((e) => e.data as PerfEntry);
+
+  if (perfItems.length === 0) {
+    return <p className="text-xs text-muted-foreground italic">No performance data collected yet</p>;
+  }
+  return (
+    <div className="space-y-1 max-h-[60vh] overflow-auto">
+      {perfItems.map((p, i) => (
+        <div
+          key={i}
+          className={cn(
+            'flex items-center justify-between px-2 py-1 rounded text-xs font-mono',
+            p.durationMs > 16 ? 'bg-red-50 text-red-700' : 'bg-muted/30',
+          )}
+        >
+          <span className="truncate mr-2">{p.type}{p.id ? `:${p.id}` : ''}</span>
+          <span className="shrink-0 tabular-nums">{p.durationMs.toFixed(2)}ms</span>
+        </div>
+      ))}
+      <p className="text-[10px] text-muted-foreground mt-2">
+        {perfItems.length} render{perfItems.length !== 1 ? 's' : ''} tracked
+      </p>
+    </div>
+  );
+}
+
+function ExprTab() {
+  const entries = useCollectorEntries('expr');
+  const exprItems = entries.map((e) => e.data as ExprEntry);
+
+  if (exprItems.length === 0) {
+    return <p className="text-xs text-muted-foreground italic">No expression evaluations tracked yet</p>;
+  }
+  return (
+    <div className="space-y-1.5 max-h-[60vh] overflow-auto">
+      {exprItems.map((ex, i) => (
+        <div key={i} className="px-2 py-1.5 rounded bg-muted/30 text-xs font-mono">
+          <div className="text-muted-foreground truncate">{ex.expression}</div>
+          <div className="mt-0.5">→ {JSON.stringify(ex.result)}</div>
+        </div>
+      ))}
+      <p className="text-[10px] text-muted-foreground mt-2">
+        {exprItems.length} evaluation{exprItems.length !== 1 ? 's' : ''} tracked
+      </p>
+    </div>
+  );
+}
+
+function EventsTab() {
+  const entries = useCollectorEntries('event');
+  const eventItems = entries.map((e) => e.data as EventEntry);
+
+  if (eventItems.length === 0) {
+    return <p className="text-xs text-muted-foreground italic">No events captured yet</p>;
+  }
+  return (
+    <div className="space-y-1.5 max-h-[60vh] overflow-auto">
+      {eventItems.map((ev, i) => (
+        <div key={i} className="px-2 py-1.5 rounded bg-muted/30 text-xs font-mono">
+          <div className="flex items-center justify-between">
+            <span className="font-semibold">{ev.action}</span>
+            <span className="text-[10px] text-muted-foreground tabular-nums">
+              {new Date(ev.timestamp).toLocaleTimeString()}
+            </span>
+          </div>
+          {ev.payload !== undefined && (
+            <pre className="mt-0.5 text-[10px] text-muted-foreground truncate">
+              {JSON.stringify(ev.payload)}
+            </pre>
+          )}
+        </div>
+      ))}
+      <p className="text-[10px] text-muted-foreground mt-2">
+        {eventItems.length} event{eventItems.length !== 1 ? 's' : ''} captured
+      </p>
+    </div>
+  );
+}
+
+/* ------------------------------------------------------------------ */
+/*  DebugPanel                                                        */
+/* ------------------------------------------------------------------ */
+
+/**
+ * A floating developer debug panel activated via URL parameters or manual toggle.
+ *
+ * Built-in tabs:
+ * - **Schema** — current rendered JSON schema
+ * - **Data** — active data context
+ * - **Perf** — component render timing (highlights slow renders >16ms)
+ * - **Expr** — expression evaluation trace
+ * - **Events** — action/event timeline
+ * - **Registry** — all registered component types
+ * - **Flags** — current debug flags
+ *
+ * Plugins can inject additional tabs via the `extraTabs` prop.
+ */
+export function DebugPanel({
+  open,
+  onClose,
+  flags,
+  schema,
+  dataContext,
+  extraTabs = [],
+  className,
+}: DebugPanelProps) {
+  const builtInTabs: DebugPanelTab[] = useMemo(() => [
+    { id: 'schema', label: 'Schema', render: () => <SchemaTab schema={schema} /> },
+    { id: 'data', label: 'Data', render: () => <DataTab dataContext={dataContext} /> },
+    { id: 'perf', label: 'Perf', render: () => <PerfTab /> },
+    { id: 'expr', label: 'Expr', render: () => <ExprTab /> },
+    { id: 'events', label: 'Events', render: () => <EventsTab /> },
+    { id: 'registry', label: 'Registry', render: () => <RegistryTab /> },
+    { id: 'flags', label: 'Flags', render: () => <FlagsTab flags={flags} /> },
+  ], [schema, dataContext, flags]);
+
+  const allTabs = useMemo(() => [...builtInTabs, ...extraTabs], [builtInTabs, extraTabs]);
+  const [activeTabId, setActiveTabId] = useState(allTabs[0]?.id ?? 'schema');
+
+  const activeTab = allTabs.find((t) => t.id === activeTabId) ?? allTabs[0];
+
+  const handleTabChange = useCallback((id: string) => {
+    setActiveTabId(id);
+  }, []);
+
+  if (!open) return null;
+
+  return (
+    <div
+      className={cn(
+        'fixed bottom-4 right-4 z-[9999] w-[420px] max-w-[95vw] rounded-lg border bg-background shadow-2xl',
+        'flex flex-col overflow-hidden',
+        className,
+      )}
+      data-testid="debug-panel"
+      role="dialog"
+      aria-label="Developer Debug Panel"
+    >
+      {/* Header */}
+      <div className="flex items-center justify-between px-3 py-2 border-b bg-muted/30">
+        <span className="text-xs font-semibold uppercase tracking-wider text-muted-foreground">
+          🛠 Debug Panel
+        </span>
+        <button
+          onClick={onClose}
+          className="text-muted-foreground hover:text-foreground text-sm leading-none px-1"
+          aria-label="Close debug panel"
+          data-testid="debug-panel-close"
+        >
+          ✕
+        </button>
+      </div>
+
+      {/* Tabs */}
+      <div className="flex border-b overflow-x-auto" role="tablist">
+        {allTabs.map((tab) => (
+          <button
+            key={tab.id}
+            role="tab"
+            aria-selected={tab.id === activeTab?.id}
+            onClick={() => handleTabChange(tab.id)}
+            className={cn(
+              'px-3 py-1.5 text-xs font-medium whitespace-nowrap transition-colors',
+              tab.id === activeTab?.id
+                ? 'border-b-2 border-primary text-foreground'
+                : 'text-muted-foreground hover:text-foreground',
+            )}
+            data-testid={`debug-tab-${tab.id}`}
+          >
+            {tab.icon && <span className="mr-1">{tab.icon}</span>}
+            {tab.label}
+          </button>
+        ))}
+      </div>
+
+      {/* Content */}
+      <div className="p-3 overflow-auto max-h-[50vh]" data-testid="debug-panel-content">
+        {activeTab?.render()}
+      </div>
+    </div>
+  );
+}

package/src/debug/__tests__/DebugPanel.test.tsx

@@ -0,0 +1,134 @@
+/**
+ * ObjectUI
+ * Copyright (c) 2024-present ObjectStack Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import { describe, it, expect, vi } from 'vitest';
+import { render, screen, fireEvent } from '@testing-library/react';
+import { DebugPanel } from '../DebugPanel';
+
+describe('DebugPanel', () => {
+  it('should render nothing when open is false', () => {
+    const { container } = render(
+      <DebugPanel open={false} onClose={vi.fn()} />,
+    );
+    expect(container.innerHTML).toBe('');
+  });
+
+  it('should render the panel when open is true', () => {
+    render(<DebugPanel open={true} onClose={vi.fn()} />);
+    expect(screen.getByTestId('debug-panel')).toBeInTheDocument();
+    expect(screen.getByText('🛠 Debug Panel')).toBeInTheDocument();
+  });
+
+  it('should render built-in tabs', () => {
+    render(<DebugPanel open={true} onClose={vi.fn()} />);
+    expect(screen.getByTestId('debug-tab-schema')).toBeInTheDocument();
+    expect(screen.getByTestId('debug-tab-data')).toBeInTheDocument();
+    expect(screen.getByTestId('debug-tab-perf')).toBeInTheDocument();
+    expect(screen.getByTestId('debug-tab-expr')).toBeInTheDocument();
+    expect(screen.getByTestId('debug-tab-events')).toBeInTheDocument();
+    expect(screen.getByTestId('debug-tab-registry')).toBeInTheDocument();
+    expect(screen.getByTestId('debug-tab-flags')).toBeInTheDocument();
+  });
+
+  it('should call onClose when close button is clicked', () => {
+    const onClose = vi.fn();
+    render(<DebugPanel open={true} onClose={onClose} />);
+    fireEvent.click(screen.getByTestId('debug-panel-close'));
+    expect(onClose).toHaveBeenCalledTimes(1);
+  });
+
+  it('should switch tabs on click', () => {
+    render(
+      <DebugPanel
+        open={true}
+        onClose={vi.fn()}
+        schema={{ type: 'text', content: 'Hello' }}
+        dataContext={{ name: 'Test' }}
+      />,
+    );
+    // Default tab is Schema
+    expect(screen.getByTestId('debug-tab-schema')).toHaveAttribute('aria-selected', 'true');
+
+    // Click Data tab
+    fireEvent.click(screen.getByTestId('debug-tab-data'));
+    expect(screen.getByTestId('debug-tab-data')).toHaveAttribute('aria-selected', 'true');
+    expect(screen.getByTestId('debug-tab-schema')).toHaveAttribute('aria-selected', 'false');
+  });
+
+  it('should display schema JSON in Schema tab', () => {
+    const testSchema = { type: 'button', content: 'Click' };
+    render(<DebugPanel open={true} onClose={vi.fn()} schema={testSchema} />);
+    const content = screen.getByTestId('debug-panel-content');
+    expect(content.textContent).toContain('"type": "button"');
+  });
+
+  it('should display data JSON in Data tab', () => {
+    render(
+      <DebugPanel
+        open={true}
+        onClose={vi.fn()}
+        dataContext={{ user: 'Alice' }}
+      />,
+    );
+    fireEvent.click(screen.getByTestId('debug-tab-data'));
+    const content = screen.getByTestId('debug-panel-content');
+    expect(content.textContent).toContain('"user": "Alice"');
+  });
+
+  it('should display debug flags in Flags tab', () => {
+    render(
+      <DebugPanel
+        open={true}
+        onClose={vi.fn()}
+        flags={{ enabled: true, schema: true }}
+      />,
+    );
+    fireEvent.click(screen.getByTestId('debug-tab-flags'));
+    const content = screen.getByTestId('debug-panel-content');
+    expect(content.textContent).toContain('"enabled": true');
+    expect(content.textContent).toContain('"schema": true');
+  });
+
+  it('should render extra tabs from plugins', () => {
+    const extraTab = {
+      id: 'custom',
+      label: 'Custom',
+      render: () => <div data-testid="custom-content">Custom Content</div>,
+    };
+    render(<DebugPanel open={true} onClose={vi.fn()} extraTabs={[extraTab]} />);
+    expect(screen.getByTestId('debug-tab-custom')).toBeInTheDocument();
+
+    fireEvent.click(screen.getByTestId('debug-tab-custom'));
+    expect(screen.getByTestId('custom-content')).toBeInTheDocument();
+  });
+
+  it('should have proper accessibility attributes', () => {
+    render(<DebugPanel open={true} onClose={vi.fn()} />);
+    const panel = screen.getByTestId('debug-panel');
+    expect(panel).toHaveAttribute('role', 'dialog');
+    expect(panel).toHaveAttribute('aria-label', 'Developer Debug Panel');
+  });
+
+  it('should show empty state for Perf tab', () => {
+    render(<DebugPanel open={true} onClose={vi.fn()} />);
+    fireEvent.click(screen.getByTestId('debug-tab-perf'));
+    expect(screen.getByTestId('debug-panel-content').textContent).toContain('No performance data');
+  });
+
+  it('should show empty state for Expr tab', () => {
+    render(<DebugPanel open={true} onClose={vi.fn()} />);
+    fireEvent.click(screen.getByTestId('debug-tab-expr'));
+    expect(screen.getByTestId('debug-panel-content').textContent).toContain('No expression evaluations');
+  });
+
+  it('should show empty state for Events tab', () => {
+    render(<DebugPanel open={true} onClose={vi.fn()} />);
+    fireEvent.click(screen.getByTestId('debug-tab-events'));
+    expect(screen.getByTestId('debug-panel-content').textContent).toContain('No events captured');
+  });
+});