@papernote/ui 1.5.0 → 1.7.0

package/src/components/PageHeader.stories.tsx

@@ -0,0 +1,198 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { MemoryRouter } from 'react-router-dom';
+import PageHeader from './PageHeader';
+import { Plus, Download, Filter, Settings, Share2, Trash2, Edit } from 'lucide-react';
+
+const meta: Meta<typeof PageHeader> = {
+  title: 'Layout/PageHeader',
+  component: PageHeader,
+  decorators: [
+    (Story) => (
+      <MemoryRouter>
+        <Story />
+      </MemoryRouter>
+    ),
+  ],
+  parameters: {
+    layout: 'fullscreen',
+    docs: {
+      description: {
+        component: 'A standard page header component with title, breadcrumbs, and action buttons. Use this at the top of pages to provide consistent navigation and actions.',
+      },
+    },
+  },
+  argTypes: {
+    // Disable controls for ReactNode props that can't be edited via text
+    rightContent: { control: false },
+    belowTitle: { control: false },
+    actions: { control: false },
+    breadcrumbs: { control: false },
+    backButton: { control: false },
+  },
+  tags: ['autodocs'],
+};
+
+export default meta;
+type Story = StoryObj<typeof PageHeader>;
+
+export const Default: Story = {
+  args: {
+    title: 'Products',
+    subtitle: 'Manage your product catalog',
+  },
+};
+
+export const WithBreadcrumbs: Story = {
+  args: {
+    title: 'Products',
+    subtitle: 'Manage your product catalog',
+    breadcrumbs: [
+      { label: 'Inventory' },
+      { label: 'Products' },
+    ],
+  },
+};
+
+export const WithActions: Story = {
+  args: {
+    title: 'Products',
+    subtitle: 'Manage your product catalog',
+    breadcrumbs: [
+      { label: 'Inventory' },
+      { label: 'Products' },
+    ],
+    actions: [
+      { id: 'filter', label: 'Filter', icon: <Filter className="h-4 w-4" />, onClick: () => alert('Filter clicked'), variant: 'ghost' },
+      { id: 'export', label: 'Export', icon: <Download className="h-4 w-4" />, onClick: () => alert('Export clicked'), variant: 'secondary' },
+      { id: 'add', label: 'Add Product', icon: <Plus className="h-4 w-4" />, onClick: () => alert('Add clicked'), variant: 'primary' },
+    ],
+  },
+};
+
+export const WithBackButton: Story = {
+  args: {
+    title: 'Edit Product',
+    subtitle: 'Update product details',
+    backButton: {
+      label: 'Back to Products',
+      onClick: () => alert('Back clicked'),
+    },
+  },
+};
+
+export const DetailPage: Story = {
+  args: {
+    title: 'Wireless Bluetooth Headphones',
+    subtitle: 'SKU: WBH-2024-001 • In Stock',
+    breadcrumbs: [
+      { label: 'Inventory' },
+      { label: 'Products', href: '/products' },
+      { label: 'Wireless Bluetooth Headphones' },
+    ],
+    actions: [
+      { id: 'share', label: 'Share', icon: <Share2 className="h-4 w-4" />, onClick: () => alert('Share'), variant: 'ghost' },
+      { id: 'edit', label: 'Edit', icon: <Edit className="h-4 w-4" />, onClick: () => alert('Edit'), variant: 'secondary' },
+      { id: 'delete', label: 'Delete', icon: <Trash2 className="h-4 w-4" />, onClick: () => alert('Delete'), variant: 'danger' },
+    ],
+  },
+};
+
+export const Sticky: Story = {
+  args: {
+    title: 'Products',
+    subtitle: 'Scroll down to see the sticky behavior',
+    breadcrumbs: [
+      { label: 'Inventory' },
+      { label: 'Products' },
+    ],
+    actions: [
+      { id: 'add', label: 'Add Product', icon: <Plus className="h-4 w-4" />, onClick: () => {}, variant: 'primary' },
+    ],
+    sticky: true,
+  },
+  decorators: [
+    (Story) => (
+      <div style={{ height: '400px', overflow: 'auto', border: '1px solid #e5e5e5', borderRadius: '8px' }}>
+        <Story />
+        <div className="p-6">
+          <p className="text-ink-600 font-medium">↓ Scroll down to see the sticky header behavior</p>
+          <div className="mt-4 space-y-4">
+            {Array.from({ length: 20 }).map((_, i) => (
+              <div key={i} className="p-4 bg-paper-100 rounded-lg">
+                Content block {i + 1}
+              </div>
+            ))}
+          </div>
+        </div>
+      </div>
+    ),
+  ],
+};
+
+export const WithLoadingAction: Story = {
+  args: {
+    title: 'Products',
+    actions: [
+      { id: 'export', label: 'Exporting...', icon: <Download className="h-4 w-4" />, onClick: () => {}, variant: 'secondary', loading: true },
+      { id: 'add', label: 'Add Product', icon: <Plus className="h-4 w-4" />, onClick: () => {}, variant: 'primary' },
+    ],
+  },
+};
+
+export const WithDisabledAction: Story = {
+  args: {
+    title: 'Products',
+    actions: [
+      { id: 'export', label: 'Export', icon: <Download className="h-4 w-4" />, onClick: () => {}, variant: 'secondary', disabled: true },
+      { id: 'add', label: 'Add Product', icon: <Plus className="h-4 w-4" />, onClick: () => {}, variant: 'primary' },
+    ],
+  },
+};
+
+export const SettingsPage: Story = {
+  args: {
+    title: 'Settings',
+    subtitle: 'Manage your application preferences',
+    breadcrumbs: [
+      { label: 'Settings' },
+    ],
+    actions: [
+      { id: 'reset', label: 'Reset to Defaults', onClick: () => alert('Reset'), variant: 'ghost' },
+      { id: 'save', label: 'Save Changes', onClick: () => alert('Save'), variant: 'primary' },
+    ],
+  },
+};
+
+export const DashboardPage: Story = {
+  args: {
+    title: 'Dashboard',
+    subtitle: 'Welcome back, John! Here\'s what\'s happening today.',
+    actions: [
+      { id: 'settings', label: 'Settings', icon: <Settings className="h-4 w-4" />, onClick: () => {}, variant: 'ghost' },
+      { id: 'export', label: 'Export Report', icon: <Download className="h-4 w-4" />, onClick: () => {}, variant: 'secondary' },
+    ],
+  },
+};
+
+export const TitleOnly: Story = {
+  args: {
+    title: 'Simple Page',
+  },
+};
+
+export const LongTitle: Story = {
+  args: {
+    title: 'This Is a Very Long Page Title That Might Need to Truncate on Smaller Screens',
+    subtitle: 'With an equally verbose subtitle that provides additional context about this page',
+    breadcrumbs: [
+      { label: 'Category' },
+      { label: 'Subcategory' },
+      { label: 'This Is a Very Long Page Title' },
+    ],
+    actions: [
+      { id: 'action1', label: 'Action 1', onClick: () => {}, variant: 'ghost' },
+      { id: 'action2', label: 'Action 2', onClick: () => {}, variant: 'secondary' },
+      { id: 'action3', label: 'Primary Action', onClick: () => {}, variant: 'primary' },
+    ],
+  },
+};

package/src/components/PageHeader.tsx

@@ -0,0 +1,217 @@
+import { ReactNode } from 'react';
+import Breadcrumbs, { BreadcrumbItem } from './Breadcrumbs';
+
+export interface PageHeaderAction {
+  /** Unique identifier for the action */
+  id: string;
+  /** Button label text */
+  label: string;
+  /** Icon to display (from lucide-react) */
+  icon?: ReactNode;
+  /** Click handler */
+  onClick: () => void;
+  /** Button variant */
+  variant?: 'primary' | 'secondary' | 'ghost' | 'danger' | 'outline';
+  /** Disabled state */
+  disabled?: boolean;
+  /** Loading state */
+  loading?: boolean;
+  /** Hide on mobile */
+  hideOnMobile?: boolean;
+}
+
+export interface PageHeaderProps {
+  /** Page title */
+  title: string;
+  /** Optional subtitle/description */
+  subtitle?: string;
+  /** Breadcrumb navigation items */
+  breadcrumbs?: BreadcrumbItem[];
+  /** Show home icon in breadcrumbs (default: true) */
+  showHomeBreadcrumb?: boolean;
+  /** Action buttons to display on the right */
+  actions?: PageHeaderAction[];
+  /** Custom content to render on the right (instead of actions) */
+  rightContent?: ReactNode;
+  /** Custom content to render below title */
+  belowTitle?: ReactNode;
+  /** Additional CSS classes */
+  className?: string;
+  /** Make header sticky at top */
+  sticky?: boolean;
+  /** Back button configuration */
+  backButton?: {
+    label?: string;
+    onClick: () => void;
+  };
+}
+
+/**
+ * PageHeader - Standard page header with title, breadcrumbs, and actions
+ *
+ * A consistent header component for pages that provides:
+ * - Page title and optional subtitle
+ * - Breadcrumb navigation
+ * - Action buttons (Create, Export, etc.)
+ * - Optional back button
+ * - Sticky positioning option
+ *
+ * @example Basic usage
+ * ```tsx
+ * <PageHeader
+ *   title="Products"
+ *   subtitle="Manage your product catalog"
+ *   breadcrumbs={[{ label: 'Inventory' }, { label: 'Products' }]}
+ *   actions={[
+ *     { id: 'export', label: 'Export', icon: <Download />, onClick: handleExport, variant: 'ghost' },
+ *     { id: 'add', label: 'Add Product', icon: <Plus />, onClick: handleAdd, variant: 'primary' },
+ *   ]}
+ * />
+ * ```
+ *
+ * @example With back button
+ * ```tsx
+ * <PageHeader
+ *   title="Edit Product"
+ *   backButton={{ label: 'Back to Products', onClick: () => navigate('/products') }}
+ * />
+ * ```
+ *
+ * @example With custom right content
+ * ```tsx
+ * <PageHeader
+ *   title="Dashboard"
+ *   rightContent={<DateRangePicker value={range} onChange={setRange} />}
+ * />
+ * ```
+ */
+export default function PageHeader({
+  title,
+  subtitle,
+  breadcrumbs,
+  showHomeBreadcrumb = true,
+  actions,
+  rightContent,
+  belowTitle,
+  className = '',
+  sticky = false,
+  backButton,
+}: PageHeaderProps) {
+  const variantStyles: Record<string, string> = {
+    primary: 'bg-accent-500 text-white border-accent-500 hover:bg-accent-600 hover:shadow-sm',
+    secondary: 'bg-white text-ink-700 border-paper-300 hover:bg-paper-50 hover:border-paper-400 shadow-xs hover:shadow-sm',
+    ghost: 'bg-transparent text-ink-600 border-transparent hover:text-ink-800 hover:bg-paper-100',
+    danger: 'bg-error-500 text-white border-error-500 hover:bg-error-600 hover:shadow-sm',
+    outline: 'bg-transparent text-ink-700 border-paper-300 hover:bg-paper-50 hover:border-ink-400',
+  };
+
+  return (
+    <div
+      className={`
+        bg-white border-b border-paper-200
+        ${sticky ? 'sticky top-0 z-40' : ''}
+        ${className}
+      `}
+    >
+      <div className="px-6 py-4">
+        {/* Breadcrumbs */}
+        {breadcrumbs && breadcrumbs.length > 0 && (
+          <div className="mb-3">
+            <Breadcrumbs items={breadcrumbs} showHome={showHomeBreadcrumb} />
+          </div>
+        )}
+
+        {/* Back button */}
+        {backButton && (
+          <div className="mb-3">
+            <button
+              onClick={backButton.onClick}
+              className="inline-flex items-center gap-1.5 text-sm text-ink-500 hover:text-ink-700 transition-colors"
+            >
+              <svg
+                className="h-4 w-4"
+                fill="none"
+                stroke="currentColor"
+                viewBox="0 0 24 24"
+              >
+                <path
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  strokeWidth={2}
+                  d="M15 19l-7-7 7-7"
+                />
+              </svg>
+              <span>{backButton.label || 'Back'}</span>
+            </button>
+          </div>
+        )}
+
+        {/* Title row */}
+        <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
+          {/* Title and subtitle */}
+          <div className="min-w-0 flex-1">
+            <h1 className="text-2xl font-bold text-ink-900 truncate">{title}</h1>
+            {subtitle && (
+              <p className="mt-1 text-sm text-ink-500">{subtitle}</p>
+            )}
+          </div>
+
+          {/* Actions or custom right content */}
+          {(actions || rightContent) && (
+            <div className="flex items-center gap-2 flex-shrink-0">
+              {rightContent}
+              {actions && actions.map((action) => (
+                <button
+                  key={action.id}
+                  onClick={action.onClick}
+                  disabled={action.disabled || action.loading}
+                  className={`
+                    inline-flex items-center justify-center gap-2
+                    px-4 py-2 text-sm font-medium rounded-lg border
+                    transition-all duration-200
+                    focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-accent-400
+                    disabled:opacity-40 disabled:cursor-not-allowed
+                    ${variantStyles[action.variant || 'secondary']}
+                    ${action.hideOnMobile ? 'hidden sm:inline-flex' : ''}
+                  `}
+                >
+                  {action.loading ? (
+                    <svg
+                      className="h-4 w-4 animate-spin"
+                      fill="none"
+                      viewBox="0 0 24 24"
+                    >
+                      <circle
+                        className="opacity-25"
+                        cx="12"
+                        cy="12"
+                        r="10"
+                        stroke="currentColor"
+                        strokeWidth="4"
+                      />
+                      <path
+                        className="opacity-75"
+                        fill="currentColor"
+                        d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+                      />
+                    </svg>
+                  ) : action.icon ? (
+                    <span className="h-4 w-4">{action.icon}</span>
+                  ) : null}
+                  <span>{action.label}</span>
+                </button>
+              ))}
+            </div>
+          )}
+        </div>
+
+        {/* Below title content */}
+        {belowTitle && (
+          <div className="mt-4">
+            {belowTitle}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}

package/src/components/Select.tsx

@@ -83,6 +83,8 @@ export interface SelectProps {
   size?: 'sm' | 'md' | 'lg';
   /** Mobile display mode - 'auto' uses BottomSheet on mobile, 'dropdown' always uses dropdown, 'native' uses native select on mobile */
   mobileMode?: 'auto' | 'dropdown' | 'native';
+  /** Render dropdown via portal (default: true). Set to false when overflow clipping is not an issue */
+  usePortal?: boolean;
 }
 
 // Size classes for trigger button
@@ -191,13 +193,16 @@ const Select = forwardRef<SelectHandle, SelectProps>(
     virtualItemHeight = 42,
     size = 'md',
     mobileMode = 'auto',
+    usePortal = true,
   } = props;
   const [isOpen, setIsOpen] = useState(false);
   const [searchQuery, setSearchQuery] = useState('');
   const [scrollTop, setScrollTop] = useState(0);
   const [activeDescendant] = useState<string | undefined>(undefined);
+  const [dropdownPosition, setDropdownPosition] = useState<{ top: number; left: number; width: number; placement: 'bottom' | 'top' } | null>(null);
   const selectRef = useRef<HTMLDivElement>(null);
   const buttonRef = useRef<HTMLButtonElement>(null);
+  const dropdownRef = useRef<HTMLDivElement>(null);
   const searchInputRef = useRef<HTMLInputElement>(null);
   const mobileSearchInputRef = useRef<HTMLInputElement>(null);
   const listRef = useRef<HTMLDivElement>(null);
@@ -313,9 +318,14 @@ const Select = forwardRef<SelectHandle, SelectProps>(
   // Handle click outside (desktop dropdown only)
   useEffect(() => {
     if (useMobileSheet) return; // Mobile sheet handles its own closing
-    
+
     const handleClickOutside = (event: MouseEvent) => {
-      if (selectRef.current && !selectRef.current.contains(event.target as Node)) {
+      const target = event.target as Node;
+      // Check if click is outside both the select trigger and the dropdown portal
+      const isOutsideSelect = selectRef.current && !selectRef.current.contains(target);
+      const isOutsideDropdown = dropdownRef.current && !dropdownRef.current.contains(target);
+
+      if (isOutsideSelect && isOutsideDropdown) {
         setIsOpen(false);
         setSearchQuery('');
       }
@@ -342,6 +352,55 @@ const Select = forwardRef<SelectHandle, SelectProps>(
     }
   }, [isOpen, searchable, useMobileSheet]);
 
+  // Calculate dropdown position with collision detection and scroll/resize handling
+  useEffect(() => {
+    if (!isOpen || useMobileSheet || !usePortal) {
+      setDropdownPosition(null);
+      return;
+    }
+
+    const updatePosition = () => {
+      if (!buttonRef.current) return;
+
+      const rect = buttonRef.current.getBoundingClientRect();
+      const dropdownHeight = 240; // max-h-60 = 15rem = 240px
+      const gap = 2; // Small gap to visually connect to trigger
+      const viewportHeight = window.innerHeight;
+
+      // Check if there's enough space below
+      const spaceBelow = viewportHeight - rect.bottom;
+      const spaceAbove = rect.top;
+      const hasSpaceBelow = spaceBelow >= dropdownHeight + gap;
+      const hasSpaceAbove = spaceAbove >= dropdownHeight + gap;
+
+      // Prefer bottom placement, flip to top if not enough space below but enough above
+      const placement: 'bottom' | 'top' = hasSpaceBelow || !hasSpaceAbove ? 'bottom' : 'top';
+
+      const top = placement === 'bottom'
+        ? rect.bottom + gap
+        : rect.top - dropdownHeight - gap;
+
+      setDropdownPosition({
+        top,
+        left: rect.left,
+        width: rect.width,
+        placement,
+      });
+    };
+
+    // Initial position calculation
+    updatePosition();
+
+    // Listen for scroll events on all scrollable ancestors
+    window.addEventListener('scroll', updatePosition, true);
+    window.addEventListener('resize', updatePosition);
+
+    return () => {
+      window.removeEventListener('scroll', updatePosition, true);
+      window.removeEventListener('resize', updatePosition);
+    };
+  }, [isOpen, useMobileSheet, usePortal]);
+
   // Lock body scroll when mobile sheet is open
   useEffect(() => {
     if (useMobileSheet && isOpen) {
@@ -617,9 +676,64 @@ const Select = forwardRef<SelectHandle, SelectProps>(
           </div>
         </button>
 
-        {/* Desktop Dropdown */}
-        {isOpen && !useMobileSheet && (
-          <div className="absolute z-50 w-full mt-2 bg-white bg-subtle-grain rounded-lg shadow-lg border border-paper-200 max-h-60 overflow-hidden animate-fade-in">
+      </div>
+
+      {/* Desktop Dropdown - rendered via portal to avoid overflow clipping */}
+      {isOpen && !useMobileSheet && (usePortal ? dropdownPosition : true) && (
+        usePortal ? createPortal(
+          <div
+            ref={dropdownRef}
+            className={`fixed z-[9999] bg-white bg-subtle-grain rounded-lg shadow-lg border border-paper-200 max-h-60 overflow-hidden animate-fade-in ${
+              dropdownPosition?.placement === 'top' ? 'origin-bottom' : 'origin-top'
+            }`}
+            style={{
+              top: dropdownPosition!.top,
+              left: dropdownPosition!.left,
+              width: dropdownPosition!.width,
+            }}
+          >
+            {/* Search Input */}
+            {searchable && (
+              <div className="p-2 border-b border-paper-200">
+                <div className="relative">
+                  <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-ink-400" />
+                  <input
+                    ref={searchInputRef}
+                    type="text"
+                    value={searchQuery}
+                    onChange={(e) => setSearchQuery(e.target.value)}
+                    placeholder="Search..."
+                    className="w-full pl-9 pr-3 py-2 text-sm border border-paper-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-accent-400 focus:border-accent-400"
+                    role="searchbox"
+                    aria-label="Search options"
+                    aria-autocomplete="list"
+                    aria-controls={listboxId}
+                  />
+                </div>
+              </div>
+            )}
+
+            {/* Options List */}
+            <div
+              ref={listRef}
+              id={listboxId}
+              className="overflow-y-auto"
+              style={{ maxHeight: useVirtualScrolling ? virtualHeight : '12rem' }}
+              onScroll={(e) => useVirtualScrolling && setScrollTop(e.currentTarget.scrollTop)}
+              role="listbox"
+              aria-label="Available options"
+              aria-multiselectable="false"
+            >
+              {renderOptionsContent(false)}
+            </div>
+          </div>,
+          document.body
+        ) : (
+          // Non-portal dropdown (inline, relative positioning)
+          <div
+            ref={dropdownRef}
+            className="absolute z-50 mt-1 w-full bg-white bg-subtle-grain rounded-lg shadow-lg border border-paper-200 max-h-60 overflow-hidden animate-fade-in"
+          >
             {/* Search Input */}
             {searchable && (
               <div className="p-2 border-b border-paper-200">
@@ -655,8 +769,8 @@ const Select = forwardRef<SelectHandle, SelectProps>(
               {renderOptionsContent(false)}
             </div>
           </div>
-        )}
-      </div>
+        )
+      )}
 
       {/* Mobile Bottom Sheet */}
       {isOpen && useMobileSheet && createPortal(

package/src/components/Sidebar.tsx

@@ -57,9 +57,9 @@ function SidebarNavItem({
   // Auto-detect if this item or any child is active based on currentPath
   const isItemActive = currentPath && item.href ? currentPath === item.href : item.active;
   const isChildActive = hasChildren && currentPath
-    ? item.children?.some(child => currentPath === child.href || currentPath?.startsWith(child.href || ''))
+    ? item.children?.some(child => child.href && (currentPath === child.href || currentPath.startsWith(child.href)))
     : false;
-  const shouldExpandByDefault = isChildActive || (hasChildren && currentPath?.startsWith(item.href || ''));
+  const shouldExpandByDefault = isChildActive || (hasChildren && item.href && currentPath?.startsWith(item.href));
 
   const [isExpanded, setIsExpanded] = useState(shouldExpandByDefault);
 

package/src/components/index.ts

@@ -315,6 +315,17 @@ export type {
 export { default as DataTableCardView } from './DataTableCardView';
 export type { CardViewConfig, DataTableCardViewProps } from './DataTableCardView';
 
+// DataGrid (Excel-like grid with formulas)
+export { default as DataGrid } from './DataGrid';
+export type {
+  DataGridProps,
+  DataGridHandle,
+  DataGridColumn,
+  DataGridCell,
+  CellValue,
+  FrozenRowMode,
+} from './DataGrid';
+
 export { default as SwipeActions } from './SwipeActions';
 export type { SwipeActionsProps, SwipeAction } from './SwipeActions';
 
@@ -322,6 +333,10 @@ export type { SwipeActionsProps, SwipeAction } from './SwipeActions';
 export { Spreadsheet, SpreadsheetReport } from './Spreadsheet';
 export type { SpreadsheetProps, SpreadsheetCell, Matrix, CellBase } from './Spreadsheet';
 
+// ExcelTable has been moved to a separate package: @papernote/excel-table
+// This is due to Handsontable's commercial licensing requirements
+// See: https://github.com/kwhittenberger/papernote-ui/tree/main/packages/excel-table
+
 export { default as ExpandedRowEditForm } from './ExpandedRowEditForm';
 export type {
   ExpandedRowEditFormProps,
@@ -380,6 +395,12 @@ export type { AppLayoutProps } from './AppLayout';
 
 export { PageLayout } from './PageLayout';
 
+export { default as PageHeader } from './PageHeader';
+export type { PageHeaderProps, PageHeaderAction } from './PageHeader';
+
+export { default as ActionBar, ActionBarLeft, ActionBarCenter, ActionBarRight } from './ActionBar';
+export type { ActionBarProps, ActionBarAction } from './ActionBar';
+
 export { AdminModal } from './AdminModal';
 export type { AdminModalProps, AdminModalTab } from './AdminModal';
 
@@ -442,6 +463,21 @@ export type { ColumnResize, ColumnOrder } from '../utils/tableEnhancements';
 export { exportToExcel, exportDataTableToExcel, createMultiSheetExcel } from '../utils/excelExport';
 export type { ExcelColumn, ExportToExcelOptions, DataTableExportOptions, MultiSheetExcelOptions } from '../utils/excelExport';
 
+// Formula Definitions (for DataGrid intellisense)
+export {
+  FORMULA_DEFINITIONS,
+  FORMULA_NAMES,
+  FORMULA_CATEGORIES,
+  getFormulasByCategory,
+  searchFormulas,
+  getFormula,
+} from '../utils/formulaDefinitions';
+export type {
+  FormulaDefinition,
+  FormulaParameter,
+  FormulaCategory,
+} from '../utils/formulaDefinitions';
+
 // Hooks
 export { useColumnResize, useColumnReorder } from '../hooks/useTableEnhancements';
 export type { UseColumnResizeOptions, UseColumnReorderOptions } from '../hooks/useTableEnhancements';