@object-ui/components 3.1.5 → 3.3.1

package/src/debug/DebugPanel.tsx

@@ -1,313 +0,0 @@
-/**
- * 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

@@ -1,134 +0,0 @@
-/**
- * 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');
-  });
-});

package/src/debug/index.ts

@@ -1,10 +0,0 @@
-/**
- * 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.
- */
-
-export { DebugPanel } from './DebugPanel';
-export type { DebugPanelProps, DebugPanelTab } from './DebugPanel';

package/src/hooks/use-config-draft.ts

@@ -1,127 +0,0 @@
-/**
- * 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 { useState, useEffect, useCallback, useRef } from 'react';
-
-export interface UseConfigDraftOptions {
-  /** Panel mode: 'create' starts dirty; 'edit' starts clean */
-  mode?: 'create' | 'edit';
-  /** Optional callback invoked on every field change */
-  onUpdate?: (field: string, value: any) => void;
-  /** Maximum undo history size (default: 50) */
-  maxHistory?: number;
-}
-
-export interface UseConfigDraftReturn<T extends Record<string, any>> {
-  /** The mutable draft copy */
-  draft: T;
-  /** Whether the draft differs from the source */
-  isDirty: boolean;
-  /** Update a single field in the draft */
-  updateField: (field: string, value: any) => void;
-  /** Revert draft back to source */
-  discard: () => void;
-  /** Low-level setter (use updateField for individual changes) */
-  setDraft: React.Dispatch<React.SetStateAction<T>>;
-  /** Undo the last change */
-  undo: () => void;
-  /** Redo a previously undone change */
-  redo: () => void;
-  /** Whether undo is available */
-  canUndo: boolean;
-  /** Whether redo is available */
-  canRedo: boolean;
-}
-
-/**
- * Generic draft-state management for configuration panels.
- *
- * Mirrors the proven draft → save / discard pattern from ViewConfigPanel
- * while being reusable across Dashboard, Form, Page, Report, and any
- * future config panel. Includes undo/redo history support.
- *
- * @param source - The "committed" configuration object.
- * @param options - Optional mode and change callback.
- */
-export function useConfigDraft<T extends Record<string, any>>(
-  source: T,
-  options?: UseConfigDraftOptions,
-): UseConfigDraftReturn<T> {
-  const maxHistory = options?.maxHistory ?? 50;
-  const [draft, setDraft] = useState<T>({ ...source });
-  const [isDirty, setIsDirty] = useState(options?.mode === 'create');
-  const pastRef = useRef<T[]>([]);
-  const futureRef = useRef<T[]>([]);
-  const [, forceRender] = useState(0);
-
-  // Reset draft when source identity changes
-  useEffect(() => {
-    setDraft({ ...source });
-    setIsDirty(options?.mode === 'create');
-    pastRef.current = [];
-    futureRef.current = [];
-  }, [source]); // eslint-disable-line react-hooks/exhaustive-deps
-
-  const updateField = useCallback(
-    (field: string, value: any) => {
-      setDraft((prev) => {
-        pastRef.current = [...pastRef.current.slice(-(maxHistory - 1)), prev];
-        futureRef.current = [];
-        return { ...prev, [field]: value };
-      });
-      setIsDirty(true);
-      forceRender((n) => n + 1);
-      options?.onUpdate?.(field, value);
-    },
-    [options?.onUpdate, maxHistory], // eslint-disable-line react-hooks/exhaustive-deps
-  );
-
-  const undo = useCallback(() => {
-    if (pastRef.current.length === 0) return;
-    setDraft((prev) => {
-      const past = [...pastRef.current];
-      const previous = past.pop()!;
-      pastRef.current = past;
-      futureRef.current = [prev, ...futureRef.current];
-      return previous;
-    });
-    forceRender((n) => n + 1);
-  }, []);
-
-  const redo = useCallback(() => {
-    if (futureRef.current.length === 0) return;
-    setDraft((prev) => {
-      const future = [...futureRef.current];
-      const next = future.shift()!;
-      futureRef.current = future;
-      pastRef.current = [...pastRef.current, prev];
-      return next;
-    });
-    forceRender((n) => n + 1);
-  }, []);
-
-  const discard = useCallback(() => {
-    setDraft({ ...source });
-    setIsDirty(false);
-    pastRef.current = [];
-    futureRef.current = [];
-    forceRender((n) => n + 1);
-  }, [source]);
-
-  return {
-    draft,
-    isDirty,
-    updateField,
-    discard,
-    setDraft,
-    undo,
-    redo,
-    canUndo: pastRef.current.length > 0,
-    canRedo: futureRef.current.length > 0,
-  };
-}

package/src/hooks/use-mobile.tsx

@@ -1,27 +0,0 @@
-/**
- * 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 * as React from "react"
-
-const MOBILE_BREAKPOINT = 768
-
-export function useIsMobile() {
-  const [isMobile, setIsMobile] = React.useState<boolean | undefined>(undefined)
-
-  React.useEffect(() => {
-    const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`)
-    const onChange = () => {
-      setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)
-    }
-    mql.addEventListener("change", onChange)
-    setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)
-    return () => mql.removeEventListener("change", onChange)
-  }, [])
-
-  return !!isMobile
-}