@papernote/ui 1.3.1 → 1.6.0

package/dist/index.js

@@ -226,12 +226,19 @@ function ButtonGroup({ options, value, values = [], onChange, onChangeMultiple,
  * A feature-rich text input with support for validation states, character counting,
  * password visibility toggle, prefix/suffix text and icons, and clearable functionality.
  *
+ * Mobile optimizations:
+ * - inputMode prop for appropriate mobile keyboard
+ * - enterKeyHint prop for mobile keyboard action button
+ * - Size variants with touch-friendly targets (44px for 'lg')
+ *
  * @example Basic input with label
  * ```tsx
  * <Input
  *   label="Email"
  *   type="email"
  *   placeholder="Enter your email"
+ *   inputMode="email"
+ *   enterKeyHint="next"
  * />
  * ```
  *
@@ -257,18 +264,30 @@ function ButtonGroup({ options, value, values = [], onChange, onChangeMultiple,
  * />
  * ```
  *
+ * @example Mobile-optimized phone input
+ * ```tsx
+ * <Input
+ *   label="Phone Number"
+ *   type="tel"
+ *   inputMode="tel"
+ *   enterKeyHint="done"
+ *   size="lg"
+ * />
+ * ```
+ *
  * @example With prefix/suffix
  * ```tsx
  * <Input
  *   label="Amount"
  *   type="number"
+ *   inputMode="decimal"
  *   prefixIcon={<DollarSign />}
  *   suffix="USD"
  *   clearable
  * />
  * ```
  */
-const Input = React.forwardRef(({ label, helperText, validationState, validationMessage, icon, iconPosition = 'left', showCount = false, prefix, suffix, prefixIcon, suffixIcon, showPasswordToggle = false, clearable = false, onClear, loading = false, className = '', id, type = 'text', value, maxLength, ...props }, ref) => {
+const Input = React.forwardRef(({ label, helperText, validationState, validationMessage, icon, iconPosition = 'left', showCount = false, prefix, suffix, prefixIcon, suffixIcon, showPasswordToggle = false, clearable = false, onClear, loading = false, className = '', id, type = 'text', value, maxLength, inputMode, enterKeyHint, size = 'md', ...props }, ref) => {
     const inputId = id || `input-${Math.random().toString(36).substring(2, 9)}`;
     const [showPassword, setShowPassword] = React.useState(false);
     // Handle clear button click
@@ -292,6 +311,28 @@ const Input = React.forwardRef(({ label, helperText, validationState, validation
     // Calculate character count
     const currentLength = value ? String(value).length : 0;
     const showCounter = showCount && maxLength;
+    // Auto-detect inputMode based on type if not specified
+    const effectiveInputMode = inputMode || (() => {
+        switch (type) {
+            case 'email': return 'email';
+            case 'tel': return 'tel';
+            case 'url': return 'url';
+            case 'number': return 'decimal';
+            case 'search': return 'search';
+            default: return undefined;
+        }
+    })();
+    // Size classes
+    const sizeClasses = {
+        sm: 'h-8 text-sm',
+        md: 'h-10 text-base',
+        lg: 'h-12 text-base min-h-touch', // 44px touch target
+    };
+    const buttonSizeClasses = {
+        sm: 'p-1',
+        md: 'p-1.5',
+        lg: 'p-2 min-w-touch-sm min-h-touch-sm', // 36px touch target for buttons
+    };
     const getValidationIcon = () => {
         switch (validationState) {
             case 'error':
@@ -328,8 +369,9 @@ const Input = React.forwardRef(({ label, helperText, validationState, validation
                 return 'text-ink-600';
         }
     };
-    return (jsxRuntime.jsxs("div", { className: "w-full", children: [label && (jsxRuntime.jsxs("label", { htmlFor: inputId, className: "label", children: [label, props.required && jsxRuntime.jsx("span", { className: "text-error-500 ml-1", children: "*" })] })), jsxRuntime.jsxs("div", { className: "relative", children: [prefix && (jsxRuntime.jsx("div", { className: "absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none text-ink-500 text-sm", children: prefix })), prefixIcon && !prefix && (jsxRuntime.jsx("div", { className: "absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none text-ink-400", children: prefixIcon })), icon && iconPosition === 'left' && !prefix && !prefixIcon && (jsxRuntime.jsx("div", { className: "absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none text-ink-400", children: icon })), jsxRuntime.jsx("input", { ref: ref, id: inputId, type: actualType, value: value, maxLength: maxLength, className: `
+    return (jsxRuntime.jsxs("div", { className: "w-full", children: [label && (jsxRuntime.jsxs("label", { htmlFor: inputId, className: "label", children: [label, props.required && jsxRuntime.jsx("span", { className: "text-error-500 ml-1", children: "*" })] })), jsxRuntime.jsxs("div", { className: "relative", children: [prefix && (jsxRuntime.jsx("div", { className: "absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none text-ink-500 text-sm", children: prefix })), prefixIcon && !prefix && (jsxRuntime.jsx("div", { className: "absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none text-ink-400", children: prefixIcon })), icon && iconPosition === 'left' && !prefix && !prefixIcon && (jsxRuntime.jsx("div", { className: "absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none text-ink-400", children: icon })), jsxRuntime.jsx("input", { ref: ref, id: inputId, type: actualType, value: value, maxLength: maxLength, inputMode: effectiveInputMode, enterKeyHint: enterKeyHint, className: `
               input
+              ${sizeClasses[size]}
               ${getValidationClasses()}
               ${prefix ? 'pl-' + (prefix.length * 8 + 12) : ''}
               ${prefixIcon && !prefix ? 'pl-10' : ''}
@@ -340,15 +382,323 @@ const Input = React.forwardRef(({ label, helperText, validationState, validation
               ${validationState && !suffix && !suffixIcon && !showPasswordToggle ? 'pr-10' : ''}
               ${(showPasswordToggle && type === 'password') || validationState || suffix || suffixIcon ? 'pr-20' : ''}
               ${className}
-            `, ...props }), suffix && (jsxRuntime.jsx("div", { className: "absolute inset-y-0 right-0 pr-3 flex items-center pointer-events-none text-ink-500 text-sm", children: suffix })), jsxRuntime.jsxs("div", { className: "absolute inset-y-0 right-0 pr-3 flex items-center gap-2", children: [loading && (jsxRuntime.jsx("div", { className: "pointer-events-none text-ink-400", children: jsxRuntime.jsx(lucideReact.Loader2, { className: "h-5 w-5 animate-spin" }) })), suffixIcon && !suffix && !validationState && !showPasswordToggle && !showClearButton && !loading && (jsxRuntime.jsx("div", { className: "pointer-events-none text-ink-400", children: suffixIcon })), showClearButton && (jsxRuntime.jsx("button", { type: "button", onClick: handleClear, className: "text-ink-400 hover:text-ink-600 focus:outline-none cursor-pointer pointer-events-auto", "aria-label": "Clear input", children: jsxRuntime.jsx(lucideReact.X, { className: "h-4 w-4" }) })), type === 'password' && showPasswordToggle && (jsxRuntime.jsx("button", { type: "button", onClick: () => setShowPassword(!showPassword), className: "text-ink-400 hover:text-ink-600 focus:outline-none cursor-pointer pointer-events-auto", "aria-label": showPassword ? 'Hide password' : 'Show password', children: showPassword ? jsxRuntime.jsx(lucideReact.EyeOff, { className: "h-5 w-5" }) : jsxRuntime.jsx(lucideReact.Eye, { className: "h-5 w-5" }) })), validationState && (jsxRuntime.jsx("div", { className: "pointer-events-none", children: getValidationIcon() })), icon && iconPosition === 'right' && !suffix && !suffixIcon && !validationState && (jsxRuntime.jsx("div", { className: "pointer-events-none text-ink-400", children: icon }))] })] }), jsxRuntime.jsxs("div", { className: "flex justify-between items-center mt-2", children: [(helperText || validationMessage) && (jsxRuntime.jsx("p", { className: `text-xs ${validationMessage ? getValidationMessageColor() : 'text-ink-600'}`, children: validationMessage || helperText })), showCounter && (jsxRuntime.jsxs("p", { className: `text-xs ml-auto ${currentLength > maxLength ? 'text-error-600' : 'text-ink-500'}`, children: [currentLength, " / ", maxLength] }))] })] }));
+            `, ...props }), suffix && (jsxRuntime.jsx("div", { className: "absolute inset-y-0 right-0 pr-3 flex items-center pointer-events-none text-ink-500 text-sm", children: suffix })), jsxRuntime.jsxs("div", { className: "absolute inset-y-0 right-0 pr-3 flex items-center gap-1", children: [loading && (jsxRuntime.jsx("div", { className: "pointer-events-none text-ink-400", children: jsxRuntime.jsx(lucideReact.Loader2, { className: "h-5 w-5 animate-spin" }) })), suffixIcon && !suffix && !validationState && !showPasswordToggle && !showClearButton && !loading && (jsxRuntime.jsx("div", { className: "pointer-events-none text-ink-400", children: suffixIcon })), showClearButton && (jsxRuntime.jsx("button", { type: "button", onClick: handleClear, className: `text-ink-400 hover:text-ink-600 focus:outline-none cursor-pointer pointer-events-auto rounded-full hover:bg-paper-100 flex items-center justify-center ${buttonSizeClasses[size]}`, "aria-label": "Clear input", children: jsxRuntime.jsx(lucideReact.X, { className: "h-4 w-4" }) })), type === 'password' && showPasswordToggle && (jsxRuntime.jsx("button", { type: "button", onClick: () => setShowPassword(!showPassword), className: `text-ink-400 hover:text-ink-600 focus:outline-none cursor-pointer pointer-events-auto rounded-full hover:bg-paper-100 flex items-center justify-center ${buttonSizeClasses[size]}`, "aria-label": showPassword ? 'Hide password' : 'Show password', children: showPassword ? jsxRuntime.jsx(lucideReact.EyeOff, { className: "h-5 w-5" }) : jsxRuntime.jsx(lucideReact.Eye, { className: "h-5 w-5" }) })), validationState && (jsxRuntime.jsx("div", { className: "pointer-events-none", children: getValidationIcon() })), icon && iconPosition === 'right' && !suffix && !suffixIcon && !validationState && (jsxRuntime.jsx("div", { className: "pointer-events-none text-ink-400", children: icon }))] })] }), jsxRuntime.jsxs("div", { className: "flex justify-between items-center mt-2", children: [(helperText || validationMessage) && (jsxRuntime.jsx("p", { className: `text-xs ${validationMessage ? getValidationMessageColor() : 'text-ink-600'}`, children: validationMessage || helperText })), showCounter && (jsxRuntime.jsxs("p", { className: `text-xs ml-auto ${currentLength > maxLength ? 'text-error-600' : 'text-ink-500'}`, children: [currentLength, " / ", maxLength] }))] })] }));
 });
 Input.displayName = 'Input';
 
 /**
- * Select - Dropdown select component with search, groups, and virtual scrolling
+ * Tailwind breakpoint values in pixels
+ */
+const BREAKPOINTS = {
+    xs: 0,
+    sm: 640,
+    md: 768,
+    lg: 1024,
+    xl: 1280,
+    '2xl': 1536,
+};
+/**
+ * SSR-safe check for window availability
+ */
+const isBrowser = typeof window !== 'undefined';
+/**
+ * Get initial viewport size (SSR-safe)
+ */
+const getInitialViewportSize = () => {
+    if (!isBrowser) {
+        return { width: 1024, height: 768 }; // Default to desktop for SSR
+    }
+    return {
+        width: window.innerWidth,
+        height: window.innerHeight,
+    };
+};
+/**
+ * useViewportSize - Returns current viewport dimensions
+ *
+ * Updates on window resize with debouncing for performance.
+ * SSR-safe with sensible defaults.
+ *
+ * @example
+ * const { width, height } = useViewportSize();
+ * console.log(`Viewport: ${width}x${height}`);
+ */
+function useViewportSize() {
+    const [size, setSize] = React.useState(getInitialViewportSize);
+    React.useEffect(() => {
+        if (!isBrowser)
+            return;
+        let timeoutId;
+        const handleResize = () => {
+            clearTimeout(timeoutId);
+            timeoutId = setTimeout(() => {
+                setSize({
+                    width: window.innerWidth,
+                    height: window.innerHeight,
+                });
+            }, 100); // Debounce 100ms
+        };
+        window.addEventListener('resize', handleResize);
+        // Set initial size on mount (in case SSR default differs)
+        handleResize();
+        return () => {
+            clearTimeout(timeoutId);
+            window.removeEventListener('resize', handleResize);
+        };
+    }, []);
+    return size;
+}
+/**
+ * useBreakpoint - Returns the current Tailwind breakpoint
+ *
+ * Automatically updates when viewport crosses breakpoint thresholds.
+ *
+ * @example
+ * const breakpoint = useBreakpoint();
+ * // Returns: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl'
+ */
+function useBreakpoint() {
+    const { width } = useViewportSize();
+    if (width >= BREAKPOINTS['2xl'])
+        return '2xl';
+    if (width >= BREAKPOINTS.xl)
+        return 'xl';
+    if (width >= BREAKPOINTS.lg)
+        return 'lg';
+    if (width >= BREAKPOINTS.md)
+        return 'md';
+    if (width >= BREAKPOINTS.sm)
+        return 'sm';
+    return 'xs';
+}
+/**
+ * useMediaQuery - React hook for CSS media queries
+ *
+ * SSR-safe implementation that returns false during SSR and
+ * updates reactively when media query match state changes.
+ *
+ * @param query - CSS media query string (e.g., '(max-width: 768px)')
+ * @returns boolean indicating if the media query matches
+ *
+ * @example
+ * const isDarkMode = useMediaQuery('(prefers-color-scheme: dark)');
+ * const isReducedMotion = useMediaQuery('(prefers-reduced-motion: reduce)');
+ * const isPortrait = useMediaQuery('(orientation: portrait)');
+ */
+function useMediaQuery(query) {
+    const [matches, setMatches] = React.useState(() => {
+        if (!isBrowser)
+            return false;
+        return window.matchMedia(query).matches;
+    });
+    React.useEffect(() => {
+        if (!isBrowser)
+            return;
+        const media = window.matchMedia(query);
+        if (media.matches !== matches) {
+            setMatches(media.matches);
+        }
+        const listener = (event) => {
+            setMatches(event.matches);
+        };
+        media.addEventListener('change', listener);
+        return () => media.removeEventListener('change', listener);
+    }, [query, matches]);
+    return matches;
+}
+/**
+ * useIsMobile - Returns true when viewport is mobile-sized (< 768px)
+ *
+ * @example
+ * const isMobile = useIsMobile();
+ * return isMobile ? <MobileNav /> : <DesktopNav />;
+ */
+function useIsMobile() {
+    return useMediaQuery(`(max-width: ${BREAKPOINTS.md - 1}px)`);
+}
+/**
+ * useIsTablet - Returns true when viewport is tablet-sized (768px - 1023px)
+ *
+ * @example
+ * const isTablet = useIsTablet();
+ */
+function useIsTablet() {
+    return useMediaQuery(`(min-width: ${BREAKPOINTS.md}px) and (max-width: ${BREAKPOINTS.lg - 1}px)`);
+}
+/**
+ * useIsDesktop - Returns true when viewport is desktop-sized (>= 1024px)
+ *
+ * @example
+ * const isDesktop = useIsDesktop();
+ */
+function useIsDesktop() {
+    return useMediaQuery(`(min-width: ${BREAKPOINTS.lg}px)`);
+}
+/**
+ * useIsTouchDevice - Detects if the device supports touch input
+ *
+ * Uses multiple detection methods for reliability:
+ * - Touch event support
+ * - Pointer coarse media query
+ * - Max touch points
+ *
+ * @example
+ * const isTouchDevice = useIsTouchDevice();
+ * // Show swipe hints on touch devices
+ */
+function useIsTouchDevice() {
+    const [isTouch, setIsTouch] = React.useState(() => {
+        if (!isBrowser)
+            return false;
+        return ('ontouchstart' in window ||
+            navigator.maxTouchPoints > 0 ||
+            window.matchMedia('(pointer: coarse)').matches);
+    });
+    React.useEffect(() => {
+        if (!isBrowser)
+            return;
+        // Re-check on mount for accuracy
+        const touchSupported = 'ontouchstart' in window ||
+            navigator.maxTouchPoints > 0 ||
+            window.matchMedia('(pointer: coarse)').matches;
+        setIsTouch(touchSupported);
+    }, []);
+    return isTouch;
+}
+/**
+ * useOrientation - Returns current screen orientation
+ *
+ * @returns 'portrait' | 'landscape'
+ *
+ * @example
+ * const orientation = useOrientation();
+ * // Adjust layout based on orientation
+ */
+function useOrientation() {
+    const { width, height } = useViewportSize();
+    return height > width ? 'portrait' : 'landscape';
+}
+/**
+ * useBreakpointValue - Returns different values based on breakpoint
+ *
+ * Mobile-first: Returns the value for the current breakpoint or the
+ * closest smaller breakpoint that has a value defined.
+ *
+ * @param values - Object mapping breakpoints to values
+ * @param defaultValue - Fallback value if no breakpoint matches
+ *
+ * @example
+ * const columns = useBreakpointValue({ xs: 1, sm: 2, lg: 4 }, 1);
+ * // Returns 1 on xs, 2 on sm/md, 4 on lg/xl/2xl
+ *
+ * const padding = useBreakpointValue({ xs: 'p-2', md: 'p-4', xl: 'p-8' });
+ */
+function useBreakpointValue(values, defaultValue) {
+    const breakpoint = useBreakpoint();
+    // Breakpoints in order from largest to smallest
+    const breakpointOrder = ['2xl', 'xl', 'lg', 'md', 'sm', 'xs'];
+    // Find the current breakpoint index
+    const currentIndex = breakpointOrder.indexOf(breakpoint);
+    // Look for value at current breakpoint or smaller (mobile-first)
+    for (let i = currentIndex; i < breakpointOrder.length; i++) {
+        const bp = breakpointOrder[i];
+        if (bp in values && values[bp] !== undefined) {
+            return values[bp];
+        }
+    }
+    return defaultValue;
+}
+/**
+ * useResponsiveCallback - Returns a memoized callback that receives responsive info
+ *
+ * Useful for callbacks that need to behave differently based on viewport.
+ *
+ * @example
+ * const handleClick = useResponsiveCallback((isMobile) => {
+ *   if (isMobile) {
+ *     openBottomSheet();
+ *   } else {
+ *     openModal();
+ *   }
+ * });
+ */
+function useResponsiveCallback(callback) {
+    const isMobile = useIsMobile();
+    const isTablet = useIsTablet();
+    const isDesktop = useIsDesktop();
+    return React.useCallback((...args) => callback(isMobile, isTablet, isDesktop)(...args), [callback, isMobile, isTablet, isDesktop]);
+}
+/**
+ * useSafeAreaInsets - Returns safe area insets for notched devices
+ *
+ * Uses CSS environment variables (env(safe-area-inset-*)) to get
+ * safe area dimensions for devices with notches or home indicators.
+ *
+ * @example
+ * const { top, bottom } = useSafeAreaInsets();
+ * // Add padding-bottom for home indicator
+ */
+function useSafeAreaInsets() {
+    const [insets, setInsets] = React.useState({
+        top: 0,
+        right: 0,
+        bottom: 0,
+        left: 0,
+    });
+    React.useEffect(() => {
+        if (!isBrowser)
+            return;
+        // Create a temporary element to read CSS env() values
+        const el = document.createElement('div');
+        el.style.position = 'fixed';
+        el.style.top = 'env(safe-area-inset-top, 0px)';
+        el.style.right = 'env(safe-area-inset-right, 0px)';
+        el.style.bottom = 'env(safe-area-inset-bottom, 0px)';
+        el.style.left = 'env(safe-area-inset-left, 0px)';
+        el.style.visibility = 'hidden';
+        el.style.pointerEvents = 'none';
+        document.body.appendChild(el);
+        const computed = getComputedStyle(el);
+        setInsets({
+            top: parseInt(computed.top, 10) || 0,
+            right: parseInt(computed.right, 10) || 0,
+            bottom: parseInt(computed.bottom, 10) || 0,
+            left: parseInt(computed.left, 10) || 0,
+        });
+        document.body.removeChild(el);
+    }, []);
+    return insets;
+}
+/**
+ * usePrefersMobile - Checks if user prefers reduced data/animations (mobile-friendly)
+ *
+ * Combines multiple preferences that might indicate mobile/low-power usage.
+ */
+function usePrefersMobile() {
+    const prefersReducedMotion = useMediaQuery('(prefers-reduced-motion: reduce)');
+    const prefersReducedData = useMediaQuery('(prefers-reduced-data: reduce)');
+    const isTouchDevice = useIsTouchDevice();
+    const isMobile = useIsMobile();
+    return isMobile || isTouchDevice || prefersReducedMotion || prefersReducedData;
+}
+
+// Size classes for trigger button
+const sizeClasses$a = {
+    sm: 'h-8 text-sm py-1',
+    md: 'h-10 text-base py-2',
+    lg: 'h-12 text-base py-3 min-h-touch', // 44px touch target
+};
+// Size classes for options
+const optionSizeClasses = {
+    sm: 'py-2 text-sm',
+    md: 'py-2.5 text-sm',
+    lg: 'py-3.5 text-base min-h-touch', // 44px touch target for mobile
+};
+/**
+ * Select - Dropdown select component with search, groups, virtual scrolling, and mobile support
  *
  * A feature-rich select component supporting flat or grouped options, search/filter,
- * option creation, virtual scrolling for large lists, and clear functionality.
+ * option creation, virtual scrolling for large lists, and mobile-optimized BottomSheet display.
  *
  * @example Basic select
  * ```tsx
@@ -366,6 +716,16 @@ Input.displayName = 'Input';
  * />
  * ```
  *
+ * @example Mobile-optimized with large touch targets
+ * ```tsx
+ * <Select
+ *   options={options}
+ *   size="lg"
+ *   mobileMode="auto"
+ *   placeholder="Select..."
+ * />
+ * ```
+ *
  * @example Searchable with groups
  * ```tsx
  * const groups = [
@@ -405,7 +765,7 @@ Input.displayName = 'Input';
  * ```
  */
 const Select = React.forwardRef((props, ref) => {
-    const { options = [], groups = [], value, onChange, placeholder = 'Select an option', searchable = false, disabled = false, label, helperText, error, loading = false, clearable = false, creatable = false, onCreateOption, virtualized = false, virtualHeight = '300px', virtualItemHeight = 42, } = props;
+    const { options = [], groups = [], value, onChange, placeholder = 'Select an option', searchable = false, disabled = false, label, helperText, error, loading = false, clearable = false, creatable = false, onCreateOption, virtualized = false, virtualHeight = '300px', virtualItemHeight = 42, size = 'md', mobileMode = 'auto', } = props;
     const [isOpen, setIsOpen] = React.useState(false);
     const [searchQuery, setSearchQuery] = React.useState('');
     const [scrollTop, setScrollTop] = React.useState(0);
@@ -413,7 +773,15 @@ const Select = React.forwardRef((props, ref) => {
     const selectRef = React.useRef(null);
     const buttonRef = React.useRef(null);
     const searchInputRef = React.useRef(null);
+    const mobileSearchInputRef = React.useRef(null);
     const listRef = React.useRef(null);
+    const nativeSelectRef = React.useRef(null);
+    // Detect mobile viewport
+    const isMobile = useIsMobile();
+    const useMobileSheet = mobileMode === 'auto' && isMobile;
+    const useNativeSelect = mobileMode === 'native' && isMobile;
+    // Auto-size for mobile
+    const effectiveSize = isMobile && size === 'md' ? 'lg' : size;
     // Generate unique IDs for ARIA
     const labelId = React.useId();
     const listboxId = React.useId();
@@ -486,8 +854,10 @@ const Select = React.forwardRef((props, ref) => {
         setSearchQuery('');
         setIsOpen(false);
     };
-    // Handle click outside
+    // Handle click outside (desktop dropdown only)
     React.useEffect(() => {
+        if (useMobileSheet)
+            return; // Mobile sheet handles its own closing
         const handleClickOutside = (event) => {
             if (selectRef.current && !selectRef.current.contains(event.target)) {
                 setIsOpen(false);
@@ -500,50 +870,105 @@ const Select = React.forwardRef((props, ref) => {
         return () => {
             document.removeEventListener('mousedown', handleClickOutside);
         };
-    }, [isOpen]);
+    }, [isOpen, useMobileSheet]);
     // Focus search input when opened
     React.useEffect(() => {
-        if (isOpen && searchable && searchInputRef.current) {
-            searchInputRef.current.focus();
+        if (isOpen && searchable) {
+            if (useMobileSheet && mobileSearchInputRef.current) {
+                // Slight delay for mobile sheet animation
+                setTimeout(() => mobileSearchInputRef.current?.focus(), 100);
+            }
+            else if (searchInputRef.current) {
+                searchInputRef.current.focus();
+            }
         }
-    }, [isOpen, searchable]);
+    }, [isOpen, searchable, useMobileSheet]);
+    // Lock body scroll when mobile sheet is open
+    React.useEffect(() => {
+        if (useMobileSheet && isOpen) {
+            document.body.style.overflow = 'hidden';
+        }
+        else {
+            document.body.style.overflow = '';
+        }
+        return () => {
+            document.body.style.overflow = '';
+        };
+    }, [isOpen, useMobileSheet]);
+    // Handle escape key for mobile sheet
+    React.useEffect(() => {
+        if (!useMobileSheet || !isOpen)
+            return;
+        const handleEscape = (e) => {
+            if (e.key === 'Escape') {
+                setIsOpen(false);
+                setSearchQuery('');
+            }
+        };
+        document.addEventListener('keydown', handleEscape);
+        return () => document.removeEventListener('keydown', handleEscape);
+    }, [isOpen, useMobileSheet]);
     const handleSelect = (optionValue) => {
         onChange?.(optionValue);
         setIsOpen(false);
         setSearchQuery('');
     };
+    const handleClose = () => {
+        setIsOpen(false);
+        setSearchQuery('');
+    };
+    // Render option button (shared between desktop and mobile)
+    const renderOption = (option, isSelected, mobile = false) => (jsxRuntime.jsxs("button", { type: "button", onClick: () => !option.disabled && handleSelect(option.value), disabled: option.disabled, className: `
+        w-full flex items-center justify-between px-4 transition-colors
+        ${mobile ? optionSizeClasses.lg : optionSizeClasses[effectiveSize]}
+        ${isSelected ? 'bg-accent-50 text-accent-900' : 'text-ink-700'}
+        ${option.disabled ? 'opacity-40 cursor-not-allowed' : 'hover:bg-paper-50 active:bg-paper-100 cursor-pointer'}
+      `, role: "option", "aria-selected": isSelected, children: [jsxRuntime.jsxs("span", { className: "flex items-center gap-2", children: [option.icon && jsxRuntime.jsx("span", { children: option.icon }), option.label] }), isSelected && jsxRuntime.jsx(lucideReact.Check, { className: `${mobile ? 'h-5 w-5' : 'h-4 w-4'} text-accent-600` })] }, option.value));
+    // Render options list content (shared between desktop and mobile)
+    const renderOptionsContent = (mobile = false) => {
+        if (loading) {
+            return (jsxRuntime.jsxs("div", { className: "px-4 py-8 flex items-center justify-center", role: "status", "aria-live": "polite", children: [jsxRuntime.jsx(lucideReact.Loader2, { className: "h-5 w-5 animate-spin text-ink-500" }), jsxRuntime.jsx("span", { className: "ml-2 text-sm text-ink-500", children: "Loading..." })] }));
+        }
+        if (filteredOptions.length === 0 && filteredGroups.length === 0 && !showCreateOption) {
+            return (jsxRuntime.jsx("div", { className: "px-4 py-3 text-sm text-ink-500 text-center", role: "status", "aria-live": "polite", children: "No options found" }));
+        }
+        return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [showCreateOption && (jsxRuntime.jsx("button", { type: "button", onClick: handleCreateOption, className: `
+              w-full flex items-center px-4 text-accent-700 hover:bg-accent-50 transition-colors border-b border-paper-200
+              ${mobile ? 'py-3.5 text-base' : 'py-2.5 text-sm'}
+            `, children: jsxRuntime.jsxs("span", { className: "font-medium", children: ["Create \"", searchQuery, "\""] }) })), useVirtualScrolling ? (jsxRuntime.jsx("div", { style: { height: totalHeight, position: 'relative' }, children: jsxRuntime.jsx("div", { style: { transform: `translateY(${offsetY}px)` }, children: visibleItems.map((item) => {
+                            const option = item.option;
+                            const isSelected = option.value === value;
+                            const key = `${item.type}-${item.groupIndex}-${item.optionIndex}-${option.value}`;
+                            return (jsxRuntime.jsxs("button", { type: "button", onClick: () => !option.disabled && handleSelect(option.value), disabled: option.disabled, style: { height: mobile ? '56px' : `${virtualItemHeight}px` }, className: `
+                      w-full flex items-center justify-between px-4 transition-colors
+                      ${mobile ? 'text-base' : 'text-sm'}
+                      ${isSelected ? 'bg-accent-50 text-accent-900' : 'text-ink-700'}
+                      ${option.disabled ? 'opacity-40 cursor-not-allowed' : 'hover:bg-paper-50 cursor-pointer'}
+                    `, role: "option", "aria-selected": isSelected, children: [jsxRuntime.jsxs("span", { className: "flex items-center gap-2", children: [option.icon && jsxRuntime.jsx("span", { children: option.icon }), option.label] }), isSelected && jsxRuntime.jsx(lucideReact.Check, { className: `${mobile ? 'h-5 w-5' : 'h-4 w-4'} text-accent-600` })] }, key));
+                        }) }) })) : (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [filteredOptions.map((option) => renderOption(option, option.value === value, mobile)), filteredGroups.map((group) => (jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx("div", { className: `
+                  px-4 font-semibold text-ink-500 uppercase tracking-wider bg-paper-50 border-t border-b border-paper-200
+                  ${mobile ? 'py-2.5 text-xs' : 'py-2 text-xs'}
+                `, children: group.label }), group.options.map((option) => renderOption(option, option.value === value, mobile))] }, group.label)))] }))] }));
+    };
+    // Native select for mobile (optional)
+    if (useNativeSelect) {
+        return (jsxRuntime.jsxs("div", { className: "w-full", children: [label && (jsxRuntime.jsx("label", { id: labelId, className: "label", children: label })), jsxRuntime.jsxs("div", { className: "relative", children: [jsxRuntime.jsxs("select", { ref: nativeSelectRef, value: value || '', onChange: (e) => onChange?.(e.target.value), disabled: disabled, className: `
+              input w-full appearance-none pr-10
+              ${sizeClasses$a[effectiveSize]}
+              ${error ? 'border-error-400 focus:border-error-400 focus:ring-error-400' : ''}
+              ${disabled ? 'opacity-40 cursor-not-allowed' : 'cursor-pointer'}
+            `, "aria-labelledby": label ? labelId : undefined, "aria-invalid": error ? 'true' : undefined, "aria-describedby": error ? errorId : (helperText ? helperTextId : undefined), children: [jsxRuntime.jsx("option", { value: "", disabled: true, children: placeholder }), options.map((opt) => (jsxRuntime.jsx("option", { value: opt.value, disabled: opt.disabled, children: opt.label }, opt.value))), groups.map((group) => (jsxRuntime.jsx("optgroup", { label: group.label, children: group.options.map((opt) => (jsxRuntime.jsx("option", { value: opt.value, disabled: opt.disabled, children: opt.label }, opt.value))) }, group.label)))] }), jsxRuntime.jsx(lucideReact.ChevronDown, { className: "absolute right-3 top-1/2 -translate-y-1/2 h-5 w-5 text-ink-500 pointer-events-none" })] }), error && (jsxRuntime.jsx("p", { id: errorId, className: "mt-2 text-xs text-error-600", role: "alert", "aria-live": "assertive", children: error })), helperText && !error && (jsxRuntime.jsx("p", { id: helperTextId, className: "mt-2 text-xs text-ink-600", children: helperText }))] }));
+    }
     return (jsxRuntime.jsxs("div", { className: "w-full", children: [label && (jsxRuntime.jsx("label", { id: labelId, className: "label", children: label })), jsxRuntime.jsxs("div", { ref: selectRef, className: "relative", children: [jsxRuntime.jsxs("button", { ref: buttonRef, type: "button", onClick: () => !disabled && setIsOpen(!isOpen), disabled: disabled, className: `
-            input w-full flex items-center justify-between
+            input w-full flex items-center justify-between px-3
+            ${sizeClasses$a[effectiveSize]}
             ${error ? 'border-error-400 focus:border-error-400 focus:ring-error-400' : ''}
             ${disabled ? 'opacity-40 cursor-not-allowed' : 'cursor-pointer'}
           `, role: "combobox", "aria-haspopup": "listbox", "aria-expanded": isOpen, "aria-controls": listboxId, "aria-labelledby": label ? labelId : undefined, "aria-label": !label ? placeholder : undefined, "aria-activedescendant": activeDescendant, "aria-invalid": error ? 'true' : undefined, "aria-describedby": error ? errorId : (helperText ? helperTextId : undefined), "aria-disabled": disabled, children: [jsxRuntime.jsxs("span", { className: `flex items-center gap-2 ${selectedOption ? 'text-ink-800' : 'text-ink-400'}`, children: [loading && jsxRuntime.jsx(lucideReact.Loader2, { className: "h-4 w-4 animate-spin text-ink-500" }), !loading && selectedOption?.icon && jsxRuntime.jsx("span", { children: selectedOption.icon }), selectedOption ? selectedOption.label : placeholder] }), jsxRuntime.jsxs("div", { className: "flex items-center gap-1", children: [clearable && value && (jsxRuntime.jsx("button", { type: "button", onClick: (e) => {
                                             e.stopPropagation();
                                             onChange?.('');
                                             setIsOpen(false);
-                                        }, className: "text-ink-400 hover:text-ink-600 transition-colors p-0.5", "aria-label": "Clear selection", children: jsxRuntime.jsx(lucideReact.X, { className: "h-4 w-4" }) })), jsxRuntime.jsx(lucideReact.ChevronDown, { className: `h-4 w-4 text-ink-500 transition-transform ${isOpen ? 'rotate-180' : ''}` })] })] }), isOpen && (jsxRuntime.jsxs("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", children: [searchable && (jsxRuntime.jsx("div", { className: "p-2 border-b border-paper-200", children: jsxRuntime.jsxs("div", { className: "relative", children: [jsxRuntime.jsx(lucideReact.Search, { className: "absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-ink-400" }), jsxRuntime.jsx("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 })] }) })), jsxRuntime.jsx("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", children: loading ? (jsxRuntime.jsxs("div", { className: "px-4 py-8 flex items-center justify-center", role: "status", "aria-live": "polite", children: [jsxRuntime.jsx(lucideReact.Loader2, { className: "h-5 w-5 animate-spin text-ink-500" }), jsxRuntime.jsx("span", { className: "ml-2 text-sm text-ink-500", children: "Loading..." })] })) : filteredOptions.length === 0 && filteredGroups.length === 0 && !showCreateOption ? (jsxRuntime.jsx("div", { className: "px-4 py-3 text-sm text-ink-500 text-center", role: "status", "aria-live": "polite", children: "No options found" })) : (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [showCreateOption && (jsxRuntime.jsx("button", { type: "button", onClick: handleCreateOption, className: "w-full flex items-center px-4 py-2.5 text-sm text-accent-700 hover:bg-accent-50 transition-colors border-b border-paper-200", children: jsxRuntime.jsxs("span", { className: "font-medium", children: ["Create \"", searchQuery, "\""] }) })), useVirtualScrolling ? (jsxRuntime.jsx("div", { style: { height: totalHeight, position: 'relative' }, children: jsxRuntime.jsx("div", { style: { transform: `translateY(${offsetY}px)` }, children: visibleItems.map((item) => {
-                                                    const option = item.option;
-                                                    const isSelected = option.value === value;
-                                                    const key = `${item.type}-${item.groupIndex}-${item.optionIndex}-${option.value}`;
-                                                    return (jsxRuntime.jsxs("button", { type: "button", onClick: () => !option.disabled && handleSelect(option.value), disabled: option.disabled, style: { height: `${virtualItemHeight}px` }, className: `
-                                w-full flex items-center justify-between px-4 text-sm transition-colors
-                                ${isSelected ? 'bg-accent-50 text-accent-900' : 'text-ink-700'}
-                                ${option.disabled ? 'opacity-40 cursor-not-allowed' : 'hover:bg-paper-50 cursor-pointer'}
-                              `, role: "option", "aria-selected": isSelected, children: [jsxRuntime.jsxs("span", { className: "flex items-center gap-2", children: [option.icon && jsxRuntime.jsx("span", { children: option.icon }), option.label] }), isSelected && jsxRuntime.jsx(lucideReact.Check, { className: "h-4 w-4 text-accent-600" })] }, key));
-                                                }) }) })) : (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [filteredOptions.map((option) => {
-                                                    const isSelected = option.value === value;
-                                                    return (jsxRuntime.jsxs("button", { type: "button", onClick: () => !option.disabled && handleSelect(option.value), disabled: option.disabled, className: `
-                              w-full flex items-center justify-between px-4 py-2.5 text-sm transition-colors
-                              ${isSelected ? 'bg-accent-50 text-accent-900' : 'text-ink-700'}
-                              ${option.disabled ? 'opacity-40 cursor-not-allowed' : 'hover:bg-paper-50 cursor-pointer'}
-                            `, role: "option", "aria-selected": isSelected, children: [jsxRuntime.jsxs("span", { className: "flex items-center gap-2", children: [option.icon && jsxRuntime.jsx("span", { children: option.icon }), option.label] }), isSelected && jsxRuntime.jsx(lucideReact.Check, { className: "h-4 w-4 text-accent-600" })] }, option.value));
-                                                }), filteredGroups.map((group) => (jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx("div", { className: "px-4 py-2 text-xs font-semibold text-ink-500 uppercase tracking-wider bg-paper-50 border-t border-b border-paper-200", children: group.label }), group.options.map((option) => {
-                                                            const isSelected = option.value === value;
-                                                            return (jsxRuntime.jsxs("button", { type: "button", onClick: () => !option.disabled && handleSelect(option.value), disabled: option.disabled, className: `
-                                  w-full flex items-center justify-between px-4 py-2.5 text-sm transition-colors
-                                  ${isSelected ? 'bg-accent-50 text-accent-900' : 'text-ink-700'}
-                                  ${option.disabled ? 'opacity-40 cursor-not-allowed' : 'hover:bg-paper-50 cursor-pointer'}
-                                `, role: "option", "aria-selected": isSelected, children: [jsxRuntime.jsxs("span", { className: "flex items-center gap-2", children: [option.icon && jsxRuntime.jsx("span", { children: option.icon }), option.label] }), isSelected && jsxRuntime.jsx(lucideReact.Check, { className: "h-4 w-4 text-accent-600" })] }, option.value));
-                                                        })] }, group.label)))] }))] })) })] }))] }), error && (jsxRuntime.jsx("p", { id: errorId, className: "mt-2 text-xs text-error-600", role: "alert", "aria-live": "assertive", children: error })), helperText && !error && (jsxRuntime.jsx("p", { id: helperTextId, className: "mt-2 text-xs text-ink-600", children: helperText }))] }));
+                                        }, className: "text-ink-400 hover:text-ink-600 transition-colors p-0.5", "aria-label": "Clear selection", children: jsxRuntime.jsx(lucideReact.X, { className: `${effectiveSize === 'lg' ? 'h-5 w-5' : 'h-4 w-4'}` }) })), jsxRuntime.jsx(lucideReact.ChevronDown, { className: `${effectiveSize === 'lg' ? 'h-5 w-5' : 'h-4 w-4'} text-ink-500 transition-transform ${isOpen ? 'rotate-180' : ''}` })] })] }), isOpen && !useMobileSheet && (jsxRuntime.jsxs("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", children: [searchable && (jsxRuntime.jsx("div", { className: "p-2 border-b border-paper-200", children: jsxRuntime.jsxs("div", { className: "relative", children: [jsxRuntime.jsx(lucideReact.Search, { className: "absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-ink-400" }), jsxRuntime.jsx("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 })] }) })), jsxRuntime.jsx("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", children: renderOptionsContent(false) })] }))] }), isOpen && useMobileSheet && reactDom.createPortal(jsxRuntime.jsxs("div", { className: "fixed inset-0 z-50 flex items-end", onClick: (e) => e.target === e.currentTarget && handleClose(), role: "dialog", "aria-modal": "true", "aria-labelledby": label ? `mobile-${labelId}` : undefined, children: [jsxRuntime.jsx("div", { className: "absolute inset-0 bg-black/50 animate-fade-in" }), jsxRuntime.jsxs("div", { className: "relative w-full bg-white rounded-t-2xl shadow-2xl animate-slide-up max-h-[85vh] flex flex-col", style: { paddingBottom: 'env(safe-area-inset-bottom)' }, children: [jsxRuntime.jsx("div", { className: "py-3 cursor-grab", children: jsxRuntime.jsx("div", { className: "w-12 h-1.5 bg-ink-300 rounded-full mx-auto" }) }), jsxRuntime.jsxs("div", { className: "px-4 pb-3 border-b border-paper-200 flex items-center justify-between", children: [label && (jsxRuntime.jsx("h2", { id: `mobile-${labelId}`, className: "text-lg font-semibold text-ink-900", children: label })), !label && (jsxRuntime.jsx("h2", { className: "text-lg font-semibold text-ink-900", children: placeholder })), jsxRuntime.jsx("button", { onClick: handleClose, className: "text-ink-400 hover:text-ink-600 transition-colors p-2 -mr-2", "aria-label": "Close", children: jsxRuntime.jsx(lucideReact.X, { className: "h-5 w-5" }) })] }), searchable && (jsxRuntime.jsx("div", { className: "p-3 border-b border-paper-200", children: jsxRuntime.jsxs("div", { className: "relative", children: [jsxRuntime.jsx(lucideReact.Search, { className: "absolute left-4 top-1/2 -translate-y-1/2 h-5 w-5 text-ink-400" }), jsxRuntime.jsx("input", { ref: mobileSearchInputRef, type: "text", value: searchQuery, onChange: (e) => setSearchQuery(e.target.value), placeholder: "Search...", inputMode: "search", enterKeyHint: "search", className: "w-full pl-12 pr-4 py-3 text-base border border-paper-300 rounded-xl focus:outline-none focus:ring-2 focus:ring-accent-400 focus:border-accent-400", role: "searchbox", "aria-label": "Search options" })] }) })), jsxRuntime.jsx("div", { id: listboxId, className: "overflow-y-auto flex-1", role: "listbox", "aria-label": "Available options", "aria-multiselectable": "false", children: renderOptionsContent(true) })] })] }), document.body), error && (jsxRuntime.jsx("p", { id: errorId, className: "mt-2 text-xs text-error-600", role: "alert", "aria-live": "assertive", children: error })), helperText && !error && (jsxRuntime.jsx("p", { id: helperTextId, className: "mt-2 text-xs text-ink-600", children: helperText }))] }));
 });
 Select.displayName = 'Select';
 
@@ -629,6 +1054,9 @@ const Switch = React.forwardRef(({ checked, onChange, label, description, disabl
     const switchId = React.useId();
     const labelId = label ? `${switchId}-label` : undefined;
     const descId = description ? `${switchId}-desc` : undefined;
+    // Auto-size for mobile
+    const isMobile = useIsMobile();
+    const effectiveSize = isMobile && size === 'md' ? 'lg' : size;
     const sizeStyles = {
         sm: {
             switch: 'w-9 h-5',
@@ -649,14 +1077,16 @@ const Switch = React.forwardRef(({ checked, onChange, label, description, disabl
             spinner: 'h-5 w-5',
         },
     };
-    const styles = sizeStyles[size];
+    const styles = sizeStyles[effectiveSize];
     const isDisabled = disabled || loading;
     const handleChange = () => {
         if (!isDisabled) {
             onChange(!checked);
         }
     };
-    return (jsxRuntime.jsxs("label", { htmlFor: switchId, className: `flex items-center gap-3 ${isDisabled ? 'opacity-40 cursor-not-allowed' : 'cursor-pointer'}`, children: [jsxRuntime.jsxs("div", { className: "relative inline-block flex-shrink-0", children: [jsxRuntime.jsx("input", { ref: ref, id: switchId, type: "checkbox", role: "switch", checked: checked, onChange: handleChange, disabled: isDisabled, "aria-checked": checked, "aria-labelledby": labelId, "aria-describedby": descId, "aria-disabled": isDisabled, "aria-busy": loading, className: "sr-only" }), jsxRuntime.jsx("div", { className: `
+    // Touch target padding for mobile
+    const touchTargetClass = effectiveSize === 'lg' ? 'min-h-touch py-1' : '';
+    return (jsxRuntime.jsxs("label", { htmlFor: switchId, className: `flex items-center gap-3 ${touchTargetClass} ${isDisabled ? 'opacity-40 cursor-not-allowed' : 'cursor-pointer'}`, children: [jsxRuntime.jsxs("div", { className: "relative inline-block flex-shrink-0", children: [jsxRuntime.jsx("input", { ref: ref, id: switchId, type: "checkbox", role: "switch", checked: checked, onChange: handleChange, disabled: isDisabled, "aria-checked": checked, "aria-labelledby": labelId, "aria-describedby": descId, "aria-disabled": isDisabled, "aria-busy": loading, className: "sr-only" }), jsxRuntime.jsx("div", { className: `
             ${styles.switch}
             rounded-full transition-all duration-200
             ${checked ? 'bg-accent-500' : 'bg-paper-300'}
@@ -665,11 +1095,20 @@ const Switch = React.forwardRef(({ checked, onChange, label, description, disabl
               ${styles.slider}
               absolute left-0.5 top-0.5 bg-white rounded-full shadow-sm transition-transform duration-200 flex items-center justify-center
               ${checked ? styles.translate : ''}
-            `, children: loading && jsxRuntime.jsx(lucideReact.Loader2, { className: `${styles.spinner} animate-spin text-accent-600` }) }) })] }), (label || description) && (jsxRuntime.jsxs("div", { className: "flex-1", children: [label && jsxRuntime.jsx("p", { id: labelId, className: "text-sm font-medium text-ink-900", children: label }), description && jsxRuntime.jsx("p", { id: descId, className: "text-xs text-ink-600 mt-0.5", children: description })] }))] }));
+            `, children: loading && jsxRuntime.jsx(lucideReact.Loader2, { className: `${styles.spinner} animate-spin text-accent-600` }) }) })] }), (label || description) && (jsxRuntime.jsxs("div", { className: "flex-1", children: [label && jsxRuntime.jsx("p", { id: labelId, className: `${effectiveSize === 'lg' ? 'text-base' : 'text-sm'} font-medium text-ink-900`, children: label }), description && jsxRuntime.jsx("p", { id: descId, className: "text-xs text-ink-600 mt-0.5", children: description })] }))] }));
 });
 Switch.displayName = 'Switch';
 
-const Textarea = React.forwardRef(({ label, helperText, validationState, validationMessage, maxLength, showCharCount = false, autoExpand = false, minRows = 2, maxRows = 10, resize = 'vertical', loading = false, className = '', id, value, rows = 4, ...props }, ref) => {
+// Size classes for textarea
+const sizeClasses$9 = {
+    sm: 'px-3 py-2 text-sm',
+    md: 'px-4 py-3 text-sm',
+    lg: 'px-4 py-3.5 text-base', // Larger padding and text for mobile
+};
+const Textarea = React.forwardRef(({ label, helperText, validationState, validationMessage, maxLength, showCharCount = false, autoExpand = false, minRows = 2, maxRows = 10, resize = 'vertical', loading = false, size = 'md', enterKeyHint, className = '', id, value, rows = 4, ...props }, ref) => {
+    // Detect mobile and auto-size
+    const isMobile = useIsMobile();
+    const effectiveSize = isMobile && size === 'md' ? 'lg' : size;
     const textareaId = id || `textarea-${Math.random().toString(36).substring(2, 9)}`;
     const currentLength = typeof value === 'string' ? value.length : 0;
     const internalRef = React.useRef(null);
@@ -744,11 +1183,12 @@ const Textarea = React.forwardRef(({ label, helperText, validationState, validat
                 return 'text-ink-600';
         }
     };
-    return (jsxRuntime.jsxs("div", { className: "w-full", children: [label && (jsxRuntime.jsxs("label", { htmlFor: textareaId, className: "label", children: [label, props.required && jsxRuntime.jsx("span", { className: "text-error-500 ml-1", children: "*" })] })), jsxRuntime.jsxs("div", { className: "relative", children: [jsxRuntime.jsx("textarea", { ref: textareaRef, id: textareaId, value: value, maxLength: maxLength, rows: autoExpand ? minRows : rows, className: `
-              block w-full px-4 py-3 border rounded-lg text-sm text-ink-800 placeholder-ink-400
+    return (jsxRuntime.jsxs("div", { className: "w-full", children: [label && (jsxRuntime.jsxs("label", { htmlFor: textareaId, className: "label", children: [label, props.required && jsxRuntime.jsx("span", { className: "text-error-500 ml-1", children: "*" })] })), jsxRuntime.jsxs("div", { className: "relative", children: [jsxRuntime.jsx("textarea", { ref: textareaRef, id: textareaId, value: value, maxLength: maxLength, rows: autoExpand ? minRows : rows, enterKeyHint: enterKeyHint, className: `
+              block w-full border rounded-lg text-ink-800 placeholder-ink-400
               bg-white bg-subtle-grain transition-all duration-200
               focus:outline-none focus:ring-2 ${getResizeClass()}
               disabled:bg-paper-100 disabled:text-ink-400 disabled:cursor-not-allowed disabled:opacity-60
+              ${sizeClasses$9[effectiveSize]}
               ${getValidationClasses()}
               ${loading ? 'pr-10' : ''}
               ${className}
@@ -756,10 +1196,20 @@ const Textarea = React.forwardRef(({ label, helperText, validationState, validat
 });
 Textarea.displayName = 'Textarea';
 
-const Checkbox = React.forwardRef(({ checked, onChange, label, description, disabled = false, indeterminate = false, className = '', id, name, icon, }, ref) => {
+// Size classes for checkbox box and touch target
+const sizeConfig$4 = {
+    sm: { box: 'w-4 h-4', icon: 'h-3 w-3', text: 'text-sm', gap: 'gap-2' },
+    md: { box: 'w-4 h-4', icon: 'h-3 w-3', text: 'text-sm', gap: 'gap-3' },
+    lg: { box: 'w-5 h-5', icon: 'h-4 w-4', text: 'text-base', gap: 'gap-3', touchTarget: 'min-h-touch py-2' }, // 44px touch target
+};
+const Checkbox = React.forwardRef(({ checked, onChange, label, description, disabled = false, indeterminate = false, className = '', id, name, icon, size = 'md', }, ref) => {
     const generatedId = React.useId();
     const checkboxId = id || generatedId;
     const descId = description ? `${checkboxId}-desc` : undefined;
+    // Auto-size for mobile
+    const isMobile = useIsMobile();
+    const effectiveSize = isMobile && size === 'md' ? 'lg' : size;
+    const config = sizeConfig$4[effectiveSize];
     const handleChange = () => {
         if (!disabled) {
             onChange(!checked);
@@ -771,14 +1221,14 @@ const Checkbox = React.forwardRef(({ checked, onChange, label, description, disa
             onChange(!checked);
         }
     };
-    return (jsxRuntime.jsxs("label", { htmlFor: checkboxId, className: `flex items-start gap-3 ${disabled ? 'opacity-40 cursor-not-allowed' : 'cursor-pointer'} ${className}`, children: [jsxRuntime.jsxs("div", { className: "relative inline-block flex-shrink-0 mt-0.5", children: [jsxRuntime.jsx("input", { ref: ref, type: "checkbox", id: checkboxId, name: name, checked: checked, onChange: handleChange, onKeyDown: handleKeyDown, disabled: disabled, className: "sr-only", "aria-checked": indeterminate ? 'mixed' : checked, "aria-describedby": descId, "aria-disabled": disabled }), jsxRuntime.jsx("div", { className: `
-            w-4 h-4 rounded border transition-all duration-200
+    return (jsxRuntime.jsxs("label", { htmlFor: checkboxId, className: `flex items-start ${config.gap} ${disabled ? 'opacity-40 cursor-not-allowed' : 'cursor-pointer'} ${'touchTarget' in config ? config.touchTarget : ''} ${className}`, children: [jsxRuntime.jsxs("div", { className: "relative inline-block flex-shrink-0 mt-0.5", children: [jsxRuntime.jsx("input", { ref: ref, type: "checkbox", id: checkboxId, name: name, checked: checked, onChange: handleChange, onKeyDown: handleKeyDown, disabled: disabled, className: "sr-only", "aria-checked": indeterminate ? 'mixed' : checked, "aria-describedby": descId, "aria-disabled": disabled }), jsxRuntime.jsx("div", { className: `
+            ${config.box} rounded border transition-all duration-200
             flex items-center justify-center
             ${checked || indeterminate
                             ? 'bg-accent-600 border-accent-600'
                             : 'bg-white border-paper-300 hover:border-paper-400'}
             ${!disabled && 'focus-within:ring-2 focus-within:ring-accent-400 focus-within:ring-offset-2'}
-          `, children: indeterminate ? (jsxRuntime.jsx(lucideReact.Minus, { className: "h-3 w-3 text-white" })) : checked ? (jsxRuntime.jsx(lucideReact.Check, { className: "h-3 w-3 text-white" })) : null })] }), (label || description) && (jsxRuntime.jsxs("div", { className: "flex-1", children: [label && (jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [icon && jsxRuntime.jsx("span", { className: "text-ink-700", children: icon }), jsxRuntime.jsx("p", { className: "text-sm font-medium text-ink-900", children: label })] })), description && (jsxRuntime.jsx("p", { id: descId, className: "text-xs text-ink-600 mt-0.5", children: description }))] }))] }));
+          `, children: indeterminate ? (jsxRuntime.jsx(lucideReact.Minus, { className: `${config.icon} text-white` })) : checked ? (jsxRuntime.jsx(lucideReact.Check, { className: `${config.icon} text-white` })) : null })] }), (label || description) && (jsxRuntime.jsxs("div", { className: "flex-1", children: [label && (jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [icon && jsxRuntime.jsx("span", { className: "text-ink-700", children: icon }), jsxRuntime.jsx("p", { className: `${config.text} font-medium text-ink-900`, children: label })] })), description && (jsxRuntime.jsx("p", { id: descId, className: "text-xs text-ink-600 mt-0.5", children: description }))] }))] }));
 });
 Checkbox.displayName = 'Checkbox';
 
@@ -1958,7 +2408,7 @@ function Loading({ variant = 'spinner', size = 'md', text }) {
 function Skeleton({ className = '', ...props }) {
     return (jsxRuntime.jsx("div", { className: `animate-pulse bg-paper-200 rounded ${className}`, ...props }));
 }
-function SkeletonCard() {
+function SkeletonCard$1() {
     return (jsxRuntime.jsxs("div", { className: "card", children: [jsxRuntime.jsx(Skeleton, { className: "h-6 w-3/4 mb-4" }), jsxRuntime.jsx(Skeleton, { className: "h-4 w-full mb-2" }), jsxRuntime.jsx(Skeleton, { className: "h-4 w-5/6 mb-2" }), jsxRuntime.jsx(Skeleton, { className: "h-4 w-4/6" })] }));
 }
 function SkeletonTable({ rows = 5, columns = 4 }) {
@@ -2610,19 +3060,191 @@ function Alert({ variant = 'info', title, children, onClose, className = '', act
     return (jsxRuntime.jsx("div", { className: `rounded-lg border p-4 ${styles.container} ${className}`, role: "alert", children: jsxRuntime.jsxs("div", { className: "flex items-start gap-3", children: [jsxRuntime.jsx("div", { className: "flex-shrink-0 mt-0.5", children: styles.icon }), jsxRuntime.jsxs("div", { className: "flex-1 min-w-0", children: [title && jsxRuntime.jsx("h4", { className: "text-sm font-medium mb-1", children: title }), jsxRuntime.jsx("div", { className: "text-sm", children: children }), actions.length > 0 && (jsxRuntime.jsx("div", { className: "flex gap-2 mt-3", children: actions.map((action, index) => (jsxRuntime.jsx("button", { onClick: action.onClick, className: getButtonStyles(action.variant), children: action.label }, index))) }))] }), onClose && (jsxRuntime.jsx("button", { onClick: onClose, className: "flex-shrink-0 text-current opacity-70 hover:opacity-100 transition-opacity", "aria-label": "Close alert", children: jsxRuntime.jsx(lucideReact.X, { className: "h-4 w-4" }) }))] }) }));
 }
 
-const sizeClasses$4 = {
+const heightPresets = {
+    sm: '33vh',
+    md: '50vh',
+    lg: '75vh',
+    full: '90vh',
+};
+function BottomSheet({ isOpen, onClose, children, title, height = 'md', showHandle = true, showCloseButton = true, closeOnOverlayClick = true, closeOnEscape = true, className = '', }) {
+    const titleId = React.useId();
+    const [isDragging, setIsDragging] = React.useState(false);
+    const [dragOffset, setDragOffset] = React.useState(0);
+    const [currentHeight] = React.useState(typeof height === 'string' && height in heightPresets
+        ? heightPresets[height]
+        : height);
+    const sheetRef = React.useRef(null);
+    const startYRef = React.useRef(0);
+    // Close on Escape
+    React.useEffect(() => {
+        if (!isOpen || !closeOnEscape)
+            return;
+        const handleEscape = (e) => {
+            if (e.key === 'Escape') {
+                onClose();
+            }
+        };
+        document.addEventListener('keydown', handleEscape);
+        return () => document.removeEventListener('keydown', handleEscape);
+    }, [isOpen, closeOnEscape, onClose]);
+    // Prevent body scroll when open
+    React.useEffect(() => {
+        if (isOpen) {
+            document.body.style.overflow = 'hidden';
+        }
+        else {
+            document.body.style.overflow = '';
+        }
+        return () => {
+            document.body.style.overflow = '';
+        };
+    }, [isOpen]);
+    const handleOverlayClick = (e) => {
+        if (closeOnOverlayClick && e.target === e.currentTarget) {
+            onClose();
+        }
+    };
+    const handleDragStart = (e) => {
+        setIsDragging(true);
+        const clientY = 'touches' in e ? e.touches[0].clientY : e.clientY;
+        startYRef.current = clientY;
+    };
+    const handleDragMove = (e) => {
+        if (!isDragging)
+            return;
+        const clientY = 'touches' in e ? e.touches[0].clientY : e.clientY;
+        const offset = clientY - startYRef.current;
+        // Only allow dragging down
+        if (offset > 0) {
+            setDragOffset(offset);
+        }
+    };
+    const handleDragEnd = () => {
+        setIsDragging(false);
+        // Close if dragged down more than 150px
+        if (dragOffset > 150) {
+            onClose();
+        }
+        setDragOffset(0);
+    };
+    React.useEffect(() => {
+        if (!isDragging)
+            return;
+        const handleMove = (e) => handleDragMove(e);
+        const handleEnd = () => handleDragEnd();
+        document.addEventListener('touchmove', handleMove);
+        document.addEventListener('mousemove', handleMove);
+        document.addEventListener('touchend', handleEnd);
+        document.addEventListener('mouseup', handleEnd);
+        return () => {
+            document.removeEventListener('touchmove', handleMove);
+            document.removeEventListener('mousemove', handleMove);
+            document.removeEventListener('touchend', handleEnd);
+            document.removeEventListener('mouseup', handleEnd);
+        };
+    }, [isDragging, dragOffset]);
+    if (!isOpen)
+        return null;
+    return (jsxRuntime.jsxs("div", { className: "fixed inset-0 z-50 flex items-end", onClick: handleOverlayClick, children: [jsxRuntime.jsx("div", { className: `
+          absolute inset-0 bg-black/50 transition-opacity duration-300
+          ${isOpen ? 'opacity-100' : 'opacity-0'}
+        ` }), jsxRuntime.jsxs("div", { ref: sheetRef, className: `
+          relative w-full bg-white rounded-t-2xl shadow-2xl
+          transition-transform duration-300 ease-out
+          ${isOpen ? 'translate-y-0' : 'translate-y-full'}
+          ${className}
+        `, style: {
+                    height: currentHeight,
+                    transform: `translateY(${dragOffset}px)`,
+                }, role: "dialog", "aria-modal": "true", "aria-labelledby": title ? titleId : undefined, children: [showHandle && (jsxRuntime.jsx("div", { className: "py-3 cursor-grab active:cursor-grabbing", onTouchStart: handleDragStart, onMouseDown: handleDragStart, children: jsxRuntime.jsx("div", { className: "w-12 h-1.5 bg-ink-300 rounded-full mx-auto" }) })), (title || showCloseButton) && (jsxRuntime.jsxs("div", { className: "px-6 py-4 border-b border-ink-200 flex items-center justify-between", children: [title && (jsxRuntime.jsx("h2", { id: titleId, className: "text-lg font-semibold text-ink-900", children: title })), showCloseButton && (jsxRuntime.jsx("button", { onClick: onClose, className: "text-ink-400 hover:text-ink-600 transition-colors ml-auto", "aria-label": "Close", children: jsxRuntime.jsx(lucideReact.X, { className: "h-5 w-5" }) }))] })), jsxRuntime.jsx("div", { className: "overflow-y-auto flex-1 p-6", children: children })] })] }));
+}
+
+const sizeClasses$8 = {
     sm: 'max-w-md',
     md: 'max-w-lg',
     lg: 'max-w-2xl',
     xl: 'max-w-4xl',
     full: 'max-w-7xl',
 };
-function Modal({ isOpen, onClose, title, children, size = 'md', showCloseButton = true, animation = 'scale', }) {
+/**
+ * Modal - Adaptive dialog component
+ *
+ * On desktop, renders as a centered modal dialog.
+ * On mobile (when mobileMode='auto'), automatically renders as a BottomSheet
+ * for better touch interaction and visibility.
+ *
+ * @example Basic modal
+ * ```tsx
+ * <Modal isOpen={isOpen} onClose={handleClose} title="Edit User">
+ *   <form>...</form>
+ *   <ModalFooter>
+ *     <Button onClick={handleClose}>Cancel</Button>
+ *     <Button variant="primary" onClick={handleSave}>Save</Button>
+ *   </ModalFooter>
+ * </Modal>
+ * ```
+ *
+ * @example Scrollable modal for long content
+ * ```tsx
+ * <Modal
+ *   isOpen={isOpen}
+ *   onClose={handleClose}
+ *   title="Terms and Conditions"
+ *   scrollable
+ * >
+ *   {longContent}
+ * </Modal>
+ * ```
+ *
+ * @example Modal with custom max height
+ * ```tsx
+ * <Modal
+ *   isOpen={isOpen}
+ *   onClose={handleClose}
+ *   title="Document Preview"
+ *   maxHeight="70vh"
+ * >
+ *   {documentContent}
+ * </Modal>
+ * ```
+ *
+ * @example Force modal on mobile
+ * ```tsx
+ * <Modal
+ *   isOpen={isOpen}
+ *   onClose={handleClose}
+ *   title="Settings"
+ *   mobileMode="modal"
+ * >
+ *   ...
+ * </Modal>
+ * ```
+ *
+ * @example Always use BottomSheet
+ * ```tsx
+ * <Modal
+ *   isOpen={isOpen}
+ *   onClose={handleClose}
+ *   title="Select Option"
+ *   mobileMode="sheet"
+ *   mobileHeight="md"
+ * >
+ *   ...
+ * </Modal>
+ * ```
+ */
+function Modal({ isOpen, onClose, title, children, size = 'md', showCloseButton = true, animation = 'scale', scrollable = false, maxHeight, mobileMode = 'auto', mobileHeight = 'lg', mobileShowHandle = true, }) {
     const modalRef = React.useRef(null);
     const mouseDownOnBackdrop = React.useRef(false);
     const titleId = React.useId();
-    // Handle escape key
+    const isMobile = useIsMobile();
+    // Determine if we should use BottomSheet
+    const useBottomSheet = mobileMode === 'sheet' ||
+        (mobileMode === 'auto' && isMobile);
+    // Handle escape key (only for modal mode, BottomSheet handles its own)
     React.useEffect(() => {
+        if (useBottomSheet)
+            return; // BottomSheet handles escape
         const handleEscape = (e) => {
             if (e.key === 'Escape' && isOpen) {
                 onClose();
@@ -2636,7 +3258,7 @@ function Modal({ isOpen, onClose, title, children, size = 'md', showCloseButton
             document.removeEventListener('keydown', handleEscape);
             document.body.style.overflow = 'unset';
         };
-    }, [isOpen, onClose]);
+    }, [isOpen, onClose, useBottomSheet]);
     // Track if mousedown originated on the backdrop
     const handleBackdropMouseDown = (e) => {
         if (e.target === e.currentTarget) {
@@ -2672,13 +3294,20 @@ function Modal({ isOpen, onClose, title, children, size = 'md', showCloseButton
     };
     if (!isOpen)
         return null;
-    return (jsxRuntime.jsx("div", { className: "fixed inset-0 z-50 flex items-center justify-center p-4 bg-ink-900 bg-opacity-50 backdrop-blur-sm animate-fade-in", onMouseDown: handleBackdropMouseDown, onClick: handleBackdropClick, children: jsxRuntime.jsxs("div", { ref: modalRef, className: `${sizeClasses$4[size]} w-full bg-white bg-subtle-grain rounded-xl shadow-2xl border border-paper-200 ${getAnimationClass()}`, role: "dialog", "aria-modal": "true", "aria-labelledby": titleId, children: [jsxRuntime.jsxs("div", { className: "flex items-center justify-between px-6 py-4 border-b border-paper-200", children: [jsxRuntime.jsx("h3", { id: titleId, className: "text-lg font-medium text-ink-900", children: title }), showCloseButton && (jsxRuntime.jsx("button", { onClick: onClose, className: "text-ink-400 hover:text-ink-600 transition-colors", "aria-label": "Close modal", children: jsxRuntime.jsx(lucideReact.X, { className: "h-5 w-5" }) }))] }), jsxRuntime.jsx("div", { className: "px-6 py-4", children: children })] }) }));
+    // Render as BottomSheet on mobile
+    if (useBottomSheet) {
+        return (jsxRuntime.jsx(BottomSheet, { isOpen: isOpen, onClose: onClose, title: title, height: mobileHeight, showHandle: mobileShowHandle, showCloseButton: showCloseButton, children: children }));
+    }
+    // Render as standard modal on desktop
+    return (jsxRuntime.jsx("div", { className: "fixed inset-0 z-50 flex items-center justify-center p-4 bg-ink-900 bg-opacity-50 backdrop-blur-sm animate-fade-in", onMouseDown: handleBackdropMouseDown, onClick: handleBackdropClick, children: jsxRuntime.jsxs("div", { ref: modalRef, className: `${sizeClasses$8[size]} w-full bg-white bg-subtle-grain rounded-xl shadow-2xl border border-paper-200 ${getAnimationClass()}`, role: "dialog", "aria-modal": "true", "aria-labelledby": titleId, children: [jsxRuntime.jsxs("div", { className: "flex items-center justify-between px-6 py-4 border-b border-paper-200", children: [jsxRuntime.jsx("h3", { id: titleId, className: "text-lg font-medium text-ink-900", children: title }), showCloseButton && (jsxRuntime.jsx("button", { onClick: onClose, className: "text-ink-400 hover:text-ink-600 transition-colors", "aria-label": "Close modal", children: jsxRuntime.jsx(lucideReact.X, { className: "h-5 w-5" }) }))] }), jsxRuntime.jsx("div", { className: `px-6 py-4 ${scrollable || maxHeight ? 'overflow-y-auto' : ''}`, style: {
+                        maxHeight: maxHeight || (scrollable ? 'calc(100vh - 200px)' : undefined),
+                    }, children: children })] }) }));
 }
 function ModalFooter({ children }) {
-    return (jsxRuntime.jsx("div", { className: "flex items-center justify-end gap-3 px-6 py-4 border-t border-paper-200 bg-paper-50", children: children }));
+    return (jsxRuntime.jsx("div", { className: "flex items-center justify-end gap-3 px-6 py-4 border-t border-paper-200 bg-paper-50 -mx-6 -mb-4 mt-4 rounded-b-xl", children: children }));
 }
 
-const sizeClasses$3 = {
+const sizeClasses$7 = {
     left: {
         sm: 'w-64',
         md: 'w-96',
@@ -2757,7 +3386,7 @@ function Drawer({ isOpen, onClose, title, children, placement = 'right', size =
     const isHorizontal = placement === 'left' || placement === 'right';
     return (jsxRuntime.jsxs("div", { className: "fixed inset-0 z-50 flex", children: [showOverlay && (jsxRuntime.jsx("div", { className: "fixed inset-0 bg-ink-900 bg-opacity-50 backdrop-blur-sm animate-fade-in", onClick: handleOverlayClick, "aria-hidden": "true" })), jsxRuntime.jsxs("div", { className: `
           fixed ${placementClasses[placement]}
-          ${sizeClasses$3[placement][size]}
+          ${sizeClasses$7[placement][size]}
           bg-white border-paper-200 shadow-2xl
           ${isHorizontal ? 'border-r' : 'border-b'}
           ${animationClasses[placement].enter}
@@ -2789,14 +3418,49 @@ const variantStyles = {
         button: 'bg-accent-600 hover:bg-accent-700 focus:ring-accent-500',
     },
 };
-function ConfirmDialog({ isOpen, onClose, onConfirm, title, message, confirmLabel = 'Confirm', cancelLabel = 'Cancel', variant = 'danger', icon, isLoading = false, }) {
+/**
+ * ConfirmDialog - Confirmation dialog with mobile support
+ *
+ * @example Basic usage
+ * ```tsx
+ * <ConfirmDialog
+ *   isOpen={isOpen}
+ *   onClose={handleClose}
+ *   onConfirm={handleDelete}
+ *   title="Delete Item"
+ *   message="Are you sure you want to delete this item? This action cannot be undone."
+ *   variant="danger"
+ * />
+ * ```
+ *
+ * @example With useConfirmDialog hook
+ * ```tsx
+ * const confirmDialog = useConfirmDialog();
+ *
+ * const handleDelete = () => {
+ *   confirmDialog.show({
+ *     title: 'Delete Item',
+ *     message: 'Are you sure?',
+ *     onConfirm: async () => await deleteItem(),
+ *   });
+ * };
+ *
+ * return (
+ *   <>
+ *     <button onClick={handleDelete}>Delete</button>
+ *     <ConfirmDialog {...confirmDialog.props} />
+ *   </>
+ * );
+ * ```
+ */
+function ConfirmDialog({ isOpen, onClose, onConfirm, title, message, confirmLabel = 'Confirm', cancelLabel = 'Cancel', variant = 'danger', icon, isLoading = false, mobileMode = 'auto', mobileHeight = 'sm', }) {
     const variantStyle = variantStyles[variant];
     const IconComponent = icon || variantStyle.icon;
     const handleConfirm = async () => {
         await onConfirm();
         // Note: onClose is called by useConfirmDialog hook after onConfirm completes
     };
-    return (jsxRuntime.jsxs(Modal, { isOpen: isOpen, onClose: onClose, title: typeof title === 'string' ? title : String(title), size: "sm", showCloseButton: false, children: [jsxRuntime.jsxs("div", { className: "flex items-start gap-4", children: [jsxRuntime.jsx("div", { className: `flex-shrink-0 flex items-center justify-center w-12 h-12 rounded-full ${variantStyle.iconBg}`, children: typeof IconComponent === 'function' ? (jsxRuntime.jsx(IconComponent, { className: `h-6 w-6 ${variantStyle.iconColor}` })) : React.isValidElement(IconComponent) ? (IconComponent) : null }), jsxRuntime.jsx("div", { className: "flex-1 pt-1", children: jsxRuntime.jsx("p", { className: "text-sm text-ink-700 leading-relaxed whitespace-pre-line", children: typeof message === 'string' ? message : String(message) }) })] }), jsxRuntime.jsxs(ModalFooter, { children: [jsxRuntime.jsx("button", { onClick: onClose, disabled: isLoading, className: "px-4 py-2 text-sm font-medium text-ink-700 bg-white border border-paper-300 rounded-lg hover:bg-paper-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-accent-400 disabled:opacity-50 disabled:cursor-not-allowed transition-colors", children: typeof cancelLabel === 'string' ? cancelLabel : String(cancelLabel) }), jsxRuntime.jsx("button", { onClick: handleConfirm, disabled: isLoading, className: `px-4 py-2 text-sm font-medium text-white rounded-lg focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:opacity-50 disabled:cursor-not-allowed transition-colors ${variantStyle.button}`, children: isLoading ? (jsxRuntime.jsxs("span", { className: "flex items-center gap-2", children: [jsxRuntime.jsxs("svg", { className: "animate-spin h-4 w-4", xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 24 24", children: [jsxRuntime.jsx("circle", { className: "opacity-25", cx: "12", cy: "12", r: "10", stroke: "currentColor", strokeWidth: "4" }), jsxRuntime.jsx("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" })] }), "Processing..."] })) : (typeof confirmLabel === 'string' ? confirmLabel : String(confirmLabel)) })] })] }));
+    return (jsxRuntime.jsxs(Modal, { isOpen: isOpen, onClose: onClose, title: typeof title === 'string' ? title : String(title), size: "sm", showCloseButton: false, mobileMode: mobileMode, mobileHeight: mobileHeight, mobileShowHandle: false, children: [jsxRuntime.jsxs("div", { className: "flex items-start gap-4", children: [jsxRuntime.jsx("div", { className: `flex-shrink-0 flex items-center justify-center w-12 h-12 rounded-full ${variantStyle.iconBg}`, children: typeof IconComponent === 'function' ? (jsxRuntime.jsx(IconComponent, { className: `h-6 w-6 ${variantStyle.iconColor}` })) : React.isValidElement(IconComponent) ? (IconComponent) : null }), jsxRuntime.jsx("div", { className: "flex-1 pt-1", children: jsxRuntime.jsx("p", { className: "text-sm text-ink-700 leading-relaxed whitespace-pre-line", children: typeof message === 'string' ? message : String(message) }) })] }), jsxRuntime.jsxs(ModalFooter, { children: [jsxRuntime.jsx("button", { onClick: onClose, disabled: isLoading, className: "px-4 py-2 text-sm font-medium text-ink-700 bg-white border border-paper-300 rounded-lg hover:bg-paper-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-accent-400 disabled:opacity-50 disabled:cursor-not-allowed transition-colors min-h-touch-sm", children: typeof cancelLabel === 'string' ? cancelLabel : String(cancelLabel) }), jsxRuntime.jsx("button", { onClick: handleConfirm, disabled: isLoading, className: `px-4 py-2 text-sm font-medium text-white rounded-lg focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:opacity-50 disabled:cursor-not-allowed transition-colors min-h-touch-sm ${variantStyle.button}`, children: isLoading ? (jsxRuntime.jsxs("span", { className: "flex items-center gap-2", children: [jsxRuntime.jsxs("svg", { className: "animate-spin h-4 w-4", xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 24 24", children: [jsxRuntime.jsx("circle", { className: "opacity-25", cx: "12", cy: "12", r: "10", stroke: "currentColor", strokeWidth: "4" }), jsxRuntime.jsx("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" })] }), "Processing..."] })) : (typeof confirmLabel === 'string' ? confirmLabel : String(confirmLabel)) })] })] }));
 }
 /**
  * Hook for managing ConfirmDialog state
@@ -5127,39 +5791,45 @@ function MenuDivider() {
     return { divider: true, id: `divider-${Date.now()}`, label: '' };
 }
 
-const variantClasses = {
+const variantClasses$4 = {
     primary: {
         default: 'bg-primary-100 text-primary-700 border-primary-200',
         hover: 'hover:bg-primary-200',
         close: 'hover:bg-primary-300 text-primary-600',
+        selected: 'bg-primary-200 border-primary-400 ring-2 ring-primary-300',
     },
     secondary: {
         default: 'bg-ink-100 text-ink-700 border-ink-200',
         hover: 'hover:bg-ink-200',
         close: 'hover:bg-ink-300 text-ink-600',
+        selected: 'bg-ink-200 border-ink-400 ring-2 ring-ink-300',
     },
     success: {
         default: 'bg-success-100 text-success-700 border-success-200',
         hover: 'hover:bg-success-200',
         close: 'hover:bg-success-300 text-success-600',
+        selected: 'bg-success-200 border-success-400 ring-2 ring-success-300',
     },
     warning: {
         default: 'bg-warning-100 text-warning-700 border-warning-200',
         hover: 'hover:bg-warning-200',
         close: 'hover:bg-warning-300 text-warning-600',
+        selected: 'bg-warning-200 border-warning-400 ring-2 ring-warning-300',
     },
     error: {
         default: 'bg-error-100 text-error-700 border-error-200',
         hover: 'hover:bg-error-200',
         close: 'hover:bg-error-300 text-error-600',
+        selected: 'bg-error-200 border-error-400 ring-2 ring-error-300',
     },
     info: {
         default: 'bg-accent-100 text-accent-700 border-accent-200',
         hover: 'hover:bg-accent-200',
         close: 'hover:bg-accent-300 text-accent-600',
+        selected: 'bg-accent-200 border-accent-400 ring-2 ring-accent-300',
     },
 };
-const sizeClasses$2 = {
+const sizeClasses$6 = {
     sm: {
         container: 'h-6 px-2 text-xs gap-1',
         icon: 'h-3 w-3',
@@ -5176,20 +5846,52 @@ const sizeClasses$2 = {
         close: 'h-4 w-4 ml-2',
     },
 };
-function Chip({ children, variant = 'secondary', size = 'md', onClose, icon, disabled = false, className = '', onClick, }) {
-    const variantStyle = variantClasses[variant];
-    const sizeStyle = sizeClasses$2[size];
+const gapClasses = {
+    xs: 'gap-1',
+    sm: 'gap-1.5',
+    md: 'gap-2',
+    lg: 'gap-3',
+};
+/**
+ * Chip - Compact element for displaying values with optional remove functionality
+ *
+ * @example Basic chip
+ * ```tsx
+ * <Chip>Tag Name</Chip>
+ * ```
+ *
+ * @example Removable chip
+ * ```tsx
+ * <Chip onClose={() => removeTag(tag)}>
+ *   {tag.name}
+ * </Chip>
+ * ```
+ *
+ * @example With icon and selected state
+ * ```tsx
+ * <Chip
+ *   icon={<Star className="h-3 w-3" />}
+ *   selected={isSelected}
+ *   onClick={() => toggleSelection()}
+ * >
+ *   Favorite
+ * </Chip>
+ * ```
+ */
+function Chip({ children, variant = 'secondary', size = 'md', onClose, icon, disabled = false, className = '', onClick, selected = false, maxWidth, chipKey, }) {
+    const variantStyle = variantClasses$4[variant];
+    const sizeStyle = sizeClasses$6[size];
     const isClickable = !disabled && (onClick || onClose);
     return (jsxRuntime.jsxs("div", { className: `
         inline-flex items-center rounded-full border font-medium
         transition-colors
-        ${variantStyle.default}
-        ${isClickable && !disabled ? variantStyle.hover : ''}
+        ${selected ? variantStyle.selected : variantStyle.default}
+        ${isClickable && !disabled && !selected ? variantStyle.hover : ''}
         ${sizeStyle.container}
         ${disabled ? 'opacity-50 cursor-not-allowed' : ''}
         ${onClick && !disabled ? 'cursor-pointer' : ''}
         ${className}
-      `, onClick: onClick && !disabled ? onClick : undefined, role: onClick ? 'button' : undefined, "aria-disabled": disabled, children: [icon && (jsxRuntime.jsx("span", { className: `flex-shrink-0 ${sizeStyle.icon}`, children: icon })), jsxRuntime.jsx("span", { className: "truncate", children: children }), onClose && (jsxRuntime.jsx("button", { type: "button", onClick: (e) => {
+      `, onClick: onClick && !disabled ? onClick : undefined, role: onClick ? 'button' : undefined, "aria-disabled": disabled, "aria-pressed": onClick ? selected : undefined, "data-chip-key": chipKey, style: { maxWidth: maxWidth || undefined }, children: [icon && (jsxRuntime.jsx("span", { className: `flex-shrink-0 ${sizeStyle.icon}`, children: icon })), jsxRuntime.jsx("span", { className: "truncate", children: children }), onClose && (jsxRuntime.jsx("button", { type: "button", onClick: (e) => {
                     e.stopPropagation();
                     if (!disabled)
                         onClose();
@@ -5200,8 +5902,420 @@ function Chip({ children, variant = 'secondary', size = 'md', onClose, icon, dis
             ${sizeStyle.close}
           `, "aria-label": "Remove", children: jsxRuntime.jsx(lucideReact.X, { className: "w-full h-full" }) }))] }));
 }
+/**
+ * ChipGroup - Container for multiple chips with layout and selection support
+ *
+ * @example Basic group
+ * ```tsx
+ * <ChipGroup wrap gap="sm">
+ *   {tags.map(tag => (
+ *     <Chip key={tag.id} onClose={() => removeTag(tag)}>
+ *       {tag.name}
+ *     </Chip>
+ *   ))}
+ * </ChipGroup>
+ * ```
+ *
+ * @example Selectable group (single)
+ * ```tsx
+ * <ChipGroup
+ *   selectionMode="single"
+ *   selectedKeys={[selectedCategory]}
+ *   onSelectionChange={(keys) => setSelectedCategory(keys[0])}
+ * >
+ *   <Chip chipKey="all">All</Chip>
+ *   <Chip chipKey="active">Active</Chip>
+ *   <Chip chipKey="archived">Archived</Chip>
+ * </ChipGroup>
+ * ```
+ *
+ * @example Multi-select group
+ * ```tsx
+ * <ChipGroup
+ *   selectionMode="multiple"
+ *   selectedKeys={selectedTags}
+ *   onSelectionChange={setSelectedTags}
+ *   wrap
+ * >
+ *   {availableTags.map(tag => (
+ *     <Chip key={tag} chipKey={tag}>{tag}</Chip>
+ *   ))}
+ * </ChipGroup>
+ * ```
+ */
+function ChipGroup({ children, direction = 'horizontal', wrap = false, gap = 'sm', selectionMode = 'none', selectedKeys = [], onSelectionChange, className = '', }) {
+    const handleChipClick = (chipKey) => {
+        if (selectionMode === 'none' || !onSelectionChange)
+            return;
+        if (selectionMode === 'single') {
+            // Toggle single selection
+            if (selectedKeys.includes(chipKey)) {
+                onSelectionChange([]);
+            }
+            else {
+                onSelectionChange([chipKey]);
+            }
+        }
+        else if (selectionMode === 'multiple') {
+            // Toggle in array
+            if (selectedKeys.includes(chipKey)) {
+                onSelectionChange(selectedKeys.filter(k => k !== chipKey));
+            }
+            else {
+                onSelectionChange([...selectedKeys, chipKey]);
+            }
+        }
+    };
+    // Clone children to inject selection props
+    const enhancedChildren = React.Children.map(children, (child) => {
+        if (!React.isValidElement(child))
+            return child;
+        const chipKey = child.props.chipKey;
+        if (!chipKey || selectionMode === 'none')
+            return child;
+        const isSelected = selectedKeys.includes(chipKey);
+        return React.cloneElement(child, {
+            ...child.props,
+            selected: isSelected,
+            onClick: () => {
+                // Call original onClick if exists
+                if (child.props.onClick) {
+                    child.props.onClick();
+                }
+                handleChipClick(chipKey);
+            },
+        });
+    });
+    return (jsxRuntime.jsx("div", { className: `
+        flex
+        ${direction === 'vertical' ? 'flex-col' : 'flex-row'}
+        ${wrap ? 'flex-wrap' : ''}
+        ${gapClasses[gap]}
+        ${className}
+      `, role: selectionMode !== 'none' ? 'group' : undefined, "aria-label": selectionMode !== 'none' ? 'Chip selection group' : undefined, children: enhancedChildren }));
+}
 
-const sizeClasses$1 = {
+const sizeClasses$5 = {
+    sm: {
+        item: 'py-1.5 px-2',
+        text: 'text-sm',
+        description: 'text-xs',
+        groupHeader: 'py-1.5 px-2 text-xs',
+    },
+    md: {
+        item: 'py-2 px-3',
+        text: 'text-sm',
+        description: 'text-xs',
+        groupHeader: 'py-2 px-3 text-xs',
+    },
+    lg: {
+        item: 'py-3 px-4',
+        text: 'text-base',
+        description: 'text-sm',
+        groupHeader: 'py-2.5 px-4 text-sm',
+    },
+};
+const variantClasses$3 = {
+    default: 'bg-white',
+    bordered: 'bg-white border border-paper-300 rounded-lg',
+    card: 'bg-white border border-paper-300 rounded-lg shadow-sm',
+};
+/**
+ * CheckboxList - Multi-select list with checkboxes, grouping, and search
+ *
+ * @example Basic usage
+ * ```tsx
+ * <CheckboxList
+ *   items={[
+ *     { key: '1', label: 'Option 1' },
+ *     { key: '2', label: 'Option 2' },
+ *   ]}
+ *   selectedKeys={selected}
+ *   onSelectionChange={setSelected}
+ * />
+ * ```
+ *
+ * @example With grouping and search
+ * ```tsx
+ * <CheckboxList
+ *   items={fields}
+ *   selectedKeys={selectedFields}
+ *   onSelectionChange={setSelectedFields}
+ *   groupLabels={{ table1: 'Users', table2: 'Orders' }}
+ *   searchable
+ *   searchPlaceholder="Search fields..."
+ *   showSelectAll
+ *   maxHeight="300px"
+ * />
+ * ```
+ */
+function CheckboxList({ items, selectedKeys, onSelectionChange, groupLabels = {}, expandedGroups: controlledExpandedGroups, defaultExpandedGroups, onGroupToggle, searchable = false, searchPlaceholder = 'Search...', filterFn, debounceMs = 150, maxHeight, showSelectAll = false, selectAllLabel = 'Select All', showSelectedCount = false, emptyMessage = 'No items available', noResultsMessage = 'No items match your search', size = 'md', variant = 'default', className = '', }) {
+    const [searchTerm, setSearchTerm] = React.useState('');
+    const [debouncedSearchTerm, setDebouncedSearchTerm] = React.useState('');
+    const [internalExpandedGroups, setInternalExpandedGroups] = React.useState(new Set(defaultExpandedGroups || []));
+    // Debounce search
+    const handleSearchChange = React.useCallback((value) => {
+        setSearchTerm(value);
+        const timer = setTimeout(() => {
+            setDebouncedSearchTerm(value);
+        }, debounceMs);
+        return () => clearTimeout(timer);
+    }, [debounceMs]);
+    // Filter items based on search
+    const filteredItems = React.useMemo(() => {
+        if (!debouncedSearchTerm)
+            return items;
+        const term = debouncedSearchTerm.toLowerCase();
+        return items.filter(item => {
+            if (filterFn) {
+                return filterFn(item, debouncedSearchTerm);
+            }
+            return (item.label.toLowerCase().includes(term) ||
+                item.description?.toLowerCase().includes(term) ||
+                item.key.toLowerCase().includes(term));
+        });
+    }, [items, debouncedSearchTerm, filterFn]);
+    // Group items
+    const groupedItems = React.useMemo(() => {
+        const groups = new Map();
+        filteredItems.forEach(item => {
+            const groupKey = item.group || null;
+            if (!groups.has(groupKey)) {
+                groups.set(groupKey, []);
+            }
+            groups.get(groupKey).push(item);
+        });
+        return groups;
+    }, [filteredItems]);
+    // Determine expanded groups
+    const expandedGroups = controlledExpandedGroups
+        ? new Set(controlledExpandedGroups)
+        : internalExpandedGroups;
+    const handleGroupToggle = (groupKey) => {
+        const newExpanded = !expandedGroups.has(groupKey);
+        if (!controlledExpandedGroups) {
+            setInternalExpandedGroups(prev => {
+                const next = new Set(prev);
+                if (newExpanded) {
+                    next.add(groupKey);
+                }
+                else {
+                    next.delete(groupKey);
+                }
+                return next;
+            });
+        }
+        onGroupToggle?.(groupKey, newExpanded);
+    };
+    // Selection handlers
+    const handleItemToggle = (key) => {
+        const newSelected = selectedKeys.includes(key)
+            ? selectedKeys.filter(k => k !== key)
+            : [...selectedKeys, key];
+        onSelectionChange(newSelected);
+    };
+    const handleSelectAll = () => {
+        const enabledItems = filteredItems.filter(item => !item.disabled);
+        const allSelected = enabledItems.every(item => selectedKeys.includes(item.key));
+        if (allSelected) {
+            // Deselect all filtered items
+            const filteredKeys = new Set(enabledItems.map(item => item.key));
+            onSelectionChange(selectedKeys.filter(key => !filteredKeys.has(key)));
+        }
+        else {
+            // Select all filtered items
+            const newKeys = new Set([...selectedKeys, ...enabledItems.map(item => item.key)]);
+            onSelectionChange(Array.from(newKeys));
+        }
+    };
+    const sizeStyle = sizeClasses$5[size];
+    const enabledItems = filteredItems.filter(item => !item.disabled);
+    const allSelected = enabledItems.length > 0 && enabledItems.every(item => selectedKeys.includes(item.key));
+    const someSelected = enabledItems.some(item => selectedKeys.includes(item.key)) && !allSelected;
+    // Check if we have groups
+    const hasGroups = groupedItems.size > 1 || (groupedItems.size === 1 && !groupedItems.has(null));
+    return (jsxRuntime.jsxs("div", { className: `${variantClasses$3[variant]} ${className}`, children: [searchable && (jsxRuntime.jsx("div", { className: `${sizeStyle.item} border-b border-paper-200`, children: jsxRuntime.jsx(Input, { value: searchTerm, onChange: (e) => handleSearchChange(e.target.value), placeholder: searchPlaceholder, prefixIcon: jsxRuntime.jsx(lucideReact.Search, { className: "h-4 w-4" }), size: size === 'lg' ? 'md' : 'sm', clearable: true, onClear: () => {
+                        setSearchTerm('');
+                        setDebouncedSearchTerm('');
+                    } }) })), (showSelectAll || showSelectedCount) && filteredItems.length > 0 && (jsxRuntime.jsxs("div", { className: `${sizeStyle.item} border-b border-paper-200 flex items-center justify-between`, children: [showSelectAll && (jsxRuntime.jsx(Checkbox, { checked: allSelected, indeterminate: someSelected, onChange: handleSelectAll, label: selectAllLabel, size: size })), showSelectedCount && (jsxRuntime.jsxs("span", { className: `${sizeStyle.description} text-ink-500`, children: [selectedKeys.length, " selected"] }))] })), jsxRuntime.jsxs("div", { className: "overflow-y-auto", style: { maxHeight: maxHeight || undefined }, children: [items.length === 0 && (jsxRuntime.jsx("div", { className: `${sizeStyle.item} text-ink-500 ${sizeStyle.text} text-center`, children: emptyMessage })), items.length > 0 && filteredItems.length === 0 && (jsxRuntime.jsx("div", { className: `${sizeStyle.item} text-ink-500 ${sizeStyle.text} text-center`, children: noResultsMessage })), hasGroups ? (Array.from(groupedItems.entries()).map(([groupKey, groupItems]) => {
+                        if (groupKey === null) {
+                            // Ungrouped items
+                            return groupItems.map(item => (jsxRuntime.jsx(CheckboxListItemRow, { item: item, selected: selectedKeys.includes(item.key), onToggle: () => handleItemToggle(item.key), size: size, sizeStyle: sizeStyle }, item.key)));
+                        }
+                        const isExpanded = expandedGroups.has(groupKey);
+                        const groupLabel = groupLabels[groupKey] || groupKey;
+                        const groupSelectedCount = groupItems.filter(item => selectedKeys.includes(item.key)).length;
+                        return (jsxRuntime.jsxs("div", { children: [jsxRuntime.jsxs("button", { type: "button", onClick: () => handleGroupToggle(groupKey), className: `
+                    w-full flex items-center justify-between
+                    ${sizeStyle.groupHeader}
+                    font-medium text-ink-700 bg-paper-50
+                    hover:bg-paper-100 transition-colors
+                    border-b border-paper-200
+                  `, children: [jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [isExpanded ? (jsxRuntime.jsx(lucideReact.ChevronDown, { className: "h-4 w-4 text-ink-400" })) : (jsxRuntime.jsx(lucideReact.ChevronRight, { className: "h-4 w-4 text-ink-400" })), jsxRuntime.jsx("span", { children: groupLabel })] }), jsxRuntime.jsxs("span", { className: "text-ink-400 font-normal", children: [groupSelectedCount > 0 && `${groupSelectedCount}/`, groupItems.length] })] }), isExpanded && (jsxRuntime.jsx("div", { children: groupItems.map(item => (jsxRuntime.jsx(CheckboxListItemRow, { item: item, selected: selectedKeys.includes(item.key), onToggle: () => handleItemToggle(item.key), size: size, sizeStyle: sizeStyle, indented: true }, item.key))) }))] }, groupKey));
+                    })) : (
+                    // Flat list (no groups)
+                    filteredItems.map(item => (jsxRuntime.jsx(CheckboxListItemRow, { item: item, selected: selectedKeys.includes(item.key), onToggle: () => handleItemToggle(item.key), size: size, sizeStyle: sizeStyle }, item.key))))] })] }));
+}
+// Helper component for rendering individual items
+function CheckboxListItemRow({ item, selected, onToggle, size, sizeStyle, indented = false, }) {
+    return (jsxRuntime.jsx("div", { className: `
+        ${sizeStyle.item}
+        ${indented ? 'pl-8' : ''}
+        hover:bg-paper-50 transition-colors
+        border-b border-paper-100 last:border-b-0
+        ${item.disabled ? 'opacity-50' : ''}
+      `, children: jsxRuntime.jsxs("div", { className: "flex items-start gap-3", children: [jsxRuntime.jsx(Checkbox, { checked: selected, onChange: onToggle, disabled: item.disabled, size: size }), jsxRuntime.jsxs("div", { className: "flex flex-col flex-1 min-w-0", children: [jsxRuntime.jsx("span", { className: sizeStyle.text, children: item.label }), item.description && (jsxRuntime.jsx("span", { className: `${sizeStyle.description} text-ink-500`, children: item.description }))] })] }) }));
+}
+
+const sizeClasses$4 = {
+    sm: {
+        container: 'text-sm',
+        item: 'py-1.5 px-2',
+        searchPadding: 'p-2',
+        statusPadding: 'px-2 py-1.5',
+    },
+    md: {
+        container: 'text-sm',
+        item: 'py-2 px-3',
+        searchPadding: 'p-3',
+        statusPadding: 'px-3 py-2',
+    },
+    lg: {
+        container: 'text-base',
+        item: 'py-3 px-4',
+        searchPadding: 'p-4',
+        statusPadding: 'px-4 py-2.5',
+    },
+};
+const variantClasses$2 = {
+    default: 'bg-white',
+    bordered: 'bg-white border border-paper-300 rounded-lg',
+    card: 'bg-white border border-paper-300 rounded-lg shadow-sm',
+};
+/**
+ * SearchableList - List component with integrated search/filter functionality
+ *
+ * @example Basic usage
+ * ```tsx
+ * <SearchableList
+ *   items={users.map(u => ({ key: u.id, data: u }))}
+ *   renderItem={(item) => <div>{item.data.name}</div>}
+ *   onSelect={(item) => setSelectedUser(item.data)}
+ *   searchable
+ *   searchPlaceholder="Search users..."
+ * />
+ * ```
+ *
+ * @example With custom filter and loading
+ * ```tsx
+ * <SearchableList
+ *   items={products}
+ *   renderItem={(item, index, isSelected) => (
+ *     <div className={isSelected ? 'bg-accent-50' : ''}>
+ *       {item.data.name} - ${item.data.price}
+ *     </div>
+ *   )}
+ *   filterFn={(item, term) =>
+ *     item.data.name.toLowerCase().includes(term.toLowerCase())
+ *   }
+ *   loading={isLoading}
+ *   loadingMessage="Fetching products..."
+ *   maxHeight="400px"
+ * />
+ * ```
+ */
+function SearchableList({ items, searchPlaceholder = 'Search...', searchValue: controlledSearchValue, onSearchChange, filterFn, debounceMs = 150, renderItem, selectedKey, onSelect, maxHeight, showResultCount = false, formatResultCount, emptyMessage = 'No items available', noResultsMessage = 'No items match your search', loading = false, loadingMessage = 'Loading...', size = 'md', variant = 'default', className = '', enableKeyboardNavigation = true, autoFocus = false, }) {
+    const [internalSearchValue, setInternalSearchValue] = React.useState('');
+    const [debouncedSearchTerm, setDebouncedSearchTerm] = React.useState('');
+    const [highlightedIndex, setHighlightedIndex] = React.useState(-1);
+    const listRef = React.useRef(null);
+    const itemRefs = React.useRef(new Map());
+    const searchValue = controlledSearchValue !== undefined ? controlledSearchValue : internalSearchValue;
+    // Debounce search
+    React.useEffect(() => {
+        const timer = setTimeout(() => {
+            setDebouncedSearchTerm(searchValue);
+        }, debounceMs);
+        return () => clearTimeout(timer);
+    }, [searchValue, debounceMs]);
+    const handleSearchChange = React.useCallback((value) => {
+        if (controlledSearchValue === undefined) {
+            setInternalSearchValue(value);
+        }
+        onSearchChange?.(value);
+        setHighlightedIndex(-1);
+    }, [controlledSearchValue, onSearchChange]);
+    // Filter items based on search
+    const filteredItems = React.useMemo(() => {
+        if (!debouncedSearchTerm)
+            return items;
+        return items.filter(item => {
+            if (filterFn) {
+                return filterFn(item, debouncedSearchTerm);
+            }
+            // Default filter: check if key includes search term
+            return item.key.toLowerCase().includes(debouncedSearchTerm.toLowerCase());
+        });
+    }, [items, debouncedSearchTerm, filterFn]);
+    // Keyboard navigation
+    const handleKeyDown = React.useCallback((e) => {
+        if (!enableKeyboardNavigation || filteredItems.length === 0)
+            return;
+        switch (e.key) {
+            case 'ArrowDown':
+                e.preventDefault();
+                setHighlightedIndex(prev => prev < filteredItems.length - 1 ? prev + 1 : 0);
+                break;
+            case 'ArrowUp':
+                e.preventDefault();
+                setHighlightedIndex(prev => prev > 0 ? prev - 1 : filteredItems.length - 1);
+                break;
+            case 'Enter':
+                e.preventDefault();
+                if (highlightedIndex >= 0 && highlightedIndex < filteredItems.length) {
+                    onSelect?.(filteredItems[highlightedIndex]);
+                }
+                break;
+            case 'Escape':
+                setHighlightedIndex(-1);
+                break;
+        }
+    }, [enableKeyboardNavigation, filteredItems, highlightedIndex, onSelect]);
+    // Scroll highlighted item into view
+    React.useEffect(() => {
+        if (highlightedIndex >= 0) {
+            const itemEl = itemRefs.current.get(highlightedIndex);
+            if (itemEl) {
+                itemEl.scrollIntoView({ block: 'nearest', behavior: 'smooth' });
+            }
+        }
+    }, [highlightedIndex]);
+    const sizeStyle = sizeClasses$4[size];
+    const resultCountText = formatResultCount
+        ? formatResultCount(filteredItems.length, items.length)
+        : `${filteredItems.length} of ${items.length}`;
+    return (jsxRuntime.jsxs("div", { className: `${variantClasses$2[variant]} ${sizeStyle.container} ${className}`, onKeyDown: handleKeyDown, children: [jsxRuntime.jsx("div", { className: `${sizeStyle.searchPadding} border-b border-paper-200`, children: jsxRuntime.jsx(Input, { value: searchValue, onChange: (e) => handleSearchChange(e.target.value), placeholder: searchPlaceholder, prefixIcon: jsxRuntime.jsx(lucideReact.Search, { className: "h-4 w-4" }), size: size === 'lg' ? 'md' : 'sm', clearable: true, onClear: () => handleSearchChange(''), autoFocus: autoFocus }) }), showResultCount && items.length > 0 && !loading && (jsxRuntime.jsx("div", { className: `${sizeStyle.statusPadding} text-ink-500 text-xs border-b border-paper-100`, children: resultCountText })), jsxRuntime.jsxs("div", { ref: listRef, className: "overflow-y-auto", style: { maxHeight: maxHeight || undefined }, role: "listbox", "aria-activedescendant": highlightedIndex >= 0 ? `item-${highlightedIndex}` : undefined, children: [loading && (jsxRuntime.jsxs("div", { className: `${sizeStyle.item} flex items-center justify-center gap-2 text-ink-500`, children: [jsxRuntime.jsx(lucideReact.Loader2, { className: "h-4 w-4 animate-spin" }), jsxRuntime.jsx("span", { children: loadingMessage })] })), !loading && items.length === 0 && (jsxRuntime.jsx("div", { className: `${sizeStyle.item} text-ink-500 text-center`, children: emptyMessage })), !loading && items.length > 0 && filteredItems.length === 0 && (jsxRuntime.jsx("div", { className: `${sizeStyle.item} text-ink-500 text-center`, children: noResultsMessage })), !loading && filteredItems.map((item, index) => {
+                        const isSelected = selectedKey === item.key;
+                        const isHighlighted = highlightedIndex === index;
+                        return (jsxRuntime.jsx("div", { id: `item-${index}`, ref: (el) => {
+                                if (el) {
+                                    itemRefs.current.set(index, el);
+                                }
+                                else {
+                                    itemRefs.current.delete(index);
+                                }
+                            }, role: "option", "aria-selected": isSelected, onClick: () => onSelect?.(item), className: `
+                ${sizeStyle.item}
+                cursor-pointer transition-colors
+                ${isSelected ? 'bg-accent-50' : ''}
+                ${isHighlighted ? 'bg-paper-100' : ''}
+                ${!isSelected && !isHighlighted ? 'hover:bg-paper-50' : ''}
+                border-b border-paper-100 last:border-b-0
+              `, children: renderItem(item, index, isSelected, isHighlighted) }, item.key));
+                    })] })] }));
+}
+
+const sizeClasses$3 = {
     sm: {
         input: 'h-8 px-2 text-sm',
         button: 'h-8 w-8',
@@ -5225,7 +6339,7 @@ const NumberInput = React.forwardRef((props, ref) => {
     const { value = 0, onChange, min, max, step = 1, disabled = false, readOnly = false, label, helperText, error, required = false, size = 'md', className = '', placeholder, id, name, precision, formatValue, } = props;
     const [internalValue, setInternalValue] = React.useState(String(value));
     const [isFocused, setIsFocused] = React.useState(false);
-    const sizeStyle = sizeClasses$1[size];
+    const sizeStyle = sizeClasses$3[size];
     // Generate unique IDs for ARIA
     const uniqueId = React.useId();
     const inputId = id || uniqueId;
@@ -5655,105 +6769,6 @@ class ErrorBoundary extends React.Component {
     }
 }
 
-const heightPresets = {
-    sm: '33vh',
-    md: '50vh',
-    lg: '75vh',
-    full: '90vh',
-};
-function BottomSheet({ isOpen, onClose, children, title, height = 'md', showHandle = true, showCloseButton = true, closeOnOverlayClick = true, closeOnEscape = true, className = '', }) {
-    const titleId = React.useId();
-    const [isDragging, setIsDragging] = React.useState(false);
-    const [dragOffset, setDragOffset] = React.useState(0);
-    const [currentHeight] = React.useState(typeof height === 'string' && height in heightPresets
-        ? heightPresets[height]
-        : height);
-    const sheetRef = React.useRef(null);
-    const startYRef = React.useRef(0);
-    // Close on Escape
-    React.useEffect(() => {
-        if (!isOpen || !closeOnEscape)
-            return;
-        const handleEscape = (e) => {
-            if (e.key === 'Escape') {
-                onClose();
-            }
-        };
-        document.addEventListener('keydown', handleEscape);
-        return () => document.removeEventListener('keydown', handleEscape);
-    }, [isOpen, closeOnEscape, onClose]);
-    // Prevent body scroll when open
-    React.useEffect(() => {
-        if (isOpen) {
-            document.body.style.overflow = 'hidden';
-        }
-        else {
-            document.body.style.overflow = '';
-        }
-        return () => {
-            document.body.style.overflow = '';
-        };
-    }, [isOpen]);
-    const handleOverlayClick = (e) => {
-        if (closeOnOverlayClick && e.target === e.currentTarget) {
-            onClose();
-        }
-    };
-    const handleDragStart = (e) => {
-        setIsDragging(true);
-        const clientY = 'touches' in e ? e.touches[0].clientY : e.clientY;
-        startYRef.current = clientY;
-    };
-    const handleDragMove = (e) => {
-        if (!isDragging)
-            return;
-        const clientY = 'touches' in e ? e.touches[0].clientY : e.clientY;
-        const offset = clientY - startYRef.current;
-        // Only allow dragging down
-        if (offset > 0) {
-            setDragOffset(offset);
-        }
-    };
-    const handleDragEnd = () => {
-        setIsDragging(false);
-        // Close if dragged down more than 150px
-        if (dragOffset > 150) {
-            onClose();
-        }
-        setDragOffset(0);
-    };
-    React.useEffect(() => {
-        if (!isDragging)
-            return;
-        const handleMove = (e) => handleDragMove(e);
-        const handleEnd = () => handleDragEnd();
-        document.addEventListener('touchmove', handleMove);
-        document.addEventListener('mousemove', handleMove);
-        document.addEventListener('touchend', handleEnd);
-        document.addEventListener('mouseup', handleEnd);
-        return () => {
-            document.removeEventListener('touchmove', handleMove);
-            document.removeEventListener('mousemove', handleMove);
-            document.removeEventListener('touchend', handleEnd);
-            document.removeEventListener('mouseup', handleEnd);
-        };
-    }, [isDragging, dragOffset]);
-    if (!isOpen)
-        return null;
-    return (jsxRuntime.jsxs("div", { className: "fixed inset-0 z-50 flex items-end", onClick: handleOverlayClick, children: [jsxRuntime.jsx("div", { className: `
-          absolute inset-0 bg-black/50 transition-opacity duration-300
-          ${isOpen ? 'opacity-100' : 'opacity-0'}
-        ` }), jsxRuntime.jsxs("div", { ref: sheetRef, className: `
-          relative w-full bg-white rounded-t-2xl shadow-2xl
-          transition-transform duration-300 ease-out
-          ${isOpen ? 'translate-y-0' : 'translate-y-full'}
-          ${className}
-        `, style: {
-                    height: currentHeight,
-                    transform: `translateY(${dragOffset}px)`,
-                }, role: "dialog", "aria-modal": "true", "aria-labelledby": title ? titleId : undefined, children: [showHandle && (jsxRuntime.jsx("div", { className: "py-3 cursor-grab active:cursor-grabbing", onTouchStart: handleDragStart, onMouseDown: handleDragStart, children: jsxRuntime.jsx("div", { className: "w-12 h-1.5 bg-ink-300 rounded-full mx-auto" }) })), (title || showCloseButton) && (jsxRuntime.jsxs("div", { className: "px-6 py-4 border-b border-ink-200 flex items-center justify-between", children: [title && (jsxRuntime.jsx("h2", { id: titleId, className: "text-lg font-semibold text-ink-900", children: title })), showCloseButton && (jsxRuntime.jsx("button", { onClick: onClose, className: "text-ink-400 hover:text-ink-600 transition-colors ml-auto", "aria-label": "Close", children: jsxRuntime.jsx(lucideReact.X, { className: "h-5 w-5" }) }))] })), jsxRuntime.jsx("div", { className: "overflow-y-auto flex-1 p-6", children: children })] })] }));
-}
-
 function Collapsible({ trigger, children, defaultOpen = false, open: controlledOpen, onOpenChange, disabled = false, showIcon = true, className = '', triggerClassName = '', contentClassName = '', }) {
     const isControlled = controlledOpen !== undefined;
     const [internalOpen, setInternalOpen] = React.useState(defaultOpen);
@@ -5803,6 +6818,231 @@ function Collapsible({ trigger, children, defaultOpen = false, open: controlledO
             ` }))] }), jsxRuntime.jsx("div", { id: "collapsible-content", ref: contentRef, className: "overflow-hidden transition-all duration-300 ease-in-out", style: { height: `${height}px` }, "aria-hidden": !isOpen, children: jsxRuntime.jsx("div", { className: contentClassName, children: children }) })] }));
 }
 
+const sizeClasses$2 = {
+    sm: {
+        header: 'h-10 px-3',
+        text: 'text-sm',
+        icon: 'h-4 w-4',
+    },
+    md: {
+        header: 'h-12 px-4',
+        text: 'text-sm',
+        icon: 'h-5 w-5',
+    },
+    lg: {
+        header: 'h-14 px-5',
+        text: 'text-base',
+        icon: 'h-5 w-5',
+    },
+};
+const variantClasses$1 = {
+    default: {
+        container: 'bg-white border-ink-200',
+        header: 'bg-paper-50',
+    },
+    elevated: {
+        container: 'bg-white shadow-lg border-ink-200',
+        header: 'bg-white',
+    },
+    bordered: {
+        container: 'bg-white border-2 border-ink-300',
+        header: 'bg-paper-100',
+    },
+};
+/**
+ * ExpandablePanel - A panel that sticks to the bottom (or top) and can expand/collapse
+ *
+ * For bottom position: expands UPWARD (content appears above header)
+ * For top position: expands DOWNWARD (content appears below header)
+ *
+ * Two modes of operation:
+ * - `viewport`: Fixed to the viewport (for standalone pages, covers StatusBar)
+ * - `container`: Sticky within its parent container (for use inside Page/AppLayout, respects StatusBar)
+ *
+ * @example Basic usage (viewport mode - full page)
+ * ```tsx
+ * <ExpandablePanel
+ *   mode="viewport"
+ *   collapsedContent={<Text>3 items selected</Text>}
+ *   expandedHeight="300px"
+ * >
+ *   {content}
+ * </ExpandablePanel>
+ * ```
+ *
+ * @example Inside Page/AppLayout (container mode - respects StatusBar)
+ * ```tsx
+ * <Page>
+ *   <ExpandablePanelContainer>
+ *     <div className="flex-1 overflow-auto">
+ *       {pageContent}
+ *     </div>
+ *     <ExpandablePanel
+ *       mode="container"
+ *       collapsedContent={<Text>3 items selected</Text>}
+ *       expandedHeight="300px"
+ *     >
+ *       {selectedItemsContent}
+ *     </ExpandablePanel>
+ *   </ExpandablePanelContainer>
+ * </Page>
+ * ```
+ *
+ * @example With maxWidth to match page content
+ * ```tsx
+ * <ExpandablePanel
+ *   mode="container"
+ *   maxWidth="1400px"
+ *   collapsedContent={<Text>Generated SQL</Text>}
+ *   expandedHeight="300px"
+ * >
+ *   {sqlContent}
+ * </ExpandablePanel>
+ * ```
+ */
+function ExpandablePanel({ collapsedContent, children, position = 'bottom', mode = 'viewport', expanded: controlledExpanded, defaultExpanded = false, onExpandedChange, expandedHeight = '300px', maxWidth, showToggle = true, toggleContent, headerActions, closeOnEscape = true, variant = 'elevated', size = 'md', className = '', headerClassName = '', contentClassName = '', zIndex = 40, }) {
+    const [internalExpanded, setInternalExpanded] = React.useState(defaultExpanded);
+    // Determine if controlled or uncontrolled
+    const isControlled = controlledExpanded !== undefined;
+    const expanded = isControlled ? controlledExpanded : internalExpanded;
+    const setExpanded = (value) => {
+        if (!isControlled) {
+            setInternalExpanded(value);
+        }
+        onExpandedChange?.(value);
+    };
+    const toggleExpanded = () => {
+        setExpanded(!expanded);
+    };
+    // Close on Escape
+    React.useEffect(() => {
+        if (!closeOnEscape || !expanded)
+            return;
+        const handleEscape = (e) => {
+            if (e.key === 'Escape') {
+                setExpanded(false);
+            }
+        };
+        document.addEventListener('keydown', handleEscape);
+        return () => document.removeEventListener('keydown', handleEscape);
+    }, [closeOnEscape, expanded]);
+    const sizeStyle = sizeClasses$2[size];
+    const variantStyle = variantClasses$1[variant];
+    const heightValue = typeof expandedHeight === 'number' ? `${expandedHeight}px` : expandedHeight;
+    const maxWidthValue = maxWidth
+        ? (typeof maxWidth === 'number' ? `${maxWidth}px` : maxWidth)
+        : undefined;
+    // Position classes differ based on mode
+    const getPositionClasses = () => {
+        if (mode === 'viewport') {
+            // Fixed to viewport
+            return position === 'bottom'
+                ? 'fixed bottom-0 left-0 right-0'
+                : 'fixed top-0 left-0 right-0';
+        }
+        else {
+            // Absolute positioning within container - snaps to bottom
+            return position === 'bottom'
+                ? 'absolute bottom-0 left-0 right-0'
+                : 'absolute top-0 left-0 right-0';
+        }
+    };
+    // For bottom panel, we want chevron up to expand (reveal content above)
+    // For top panel, we want chevron down to expand (reveal content below)
+    const ChevronIcon = position === 'bottom'
+        ? (expanded ? lucideReact.ChevronDown : lucideReact.ChevronUp)
+        : (expanded ? lucideReact.ChevronUp : lucideReact.ChevronDown);
+    // Header component
+    const header = (jsxRuntime.jsxs("div", { className: `
+        flex items-center justify-between
+        ${sizeStyle.header}
+        ${variantStyle.header}
+        border-ink-200
+        flex-shrink-0
+        ${headerClassName}
+      `, children: [jsxRuntime.jsx("div", { className: `flex-1 flex items-center ${sizeStyle.text}`, children: collapsedContent }), jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [headerActions, showToggle && (jsxRuntime.jsx("button", { type: "button", onClick: toggleExpanded, className: `
+              flex items-center justify-center
+              p-1.5 rounded-md
+              text-ink-500 hover:text-ink-700
+              hover:bg-ink-100
+              transition-colors
+              focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-1
+            `, "aria-expanded": expanded, "aria-label": expanded ? 'Collapse panel' : 'Expand panel', children: toggleContent || jsxRuntime.jsx(ChevronIcon, { className: sizeStyle.icon }) }))] })] }));
+    // Content component
+    const content = (jsxRuntime.jsx("div", { className: `
+        overflow-hidden
+        transition-all duration-300 ease-in-out
+      `, style: {
+            maxHeight: expanded ? heightValue : '0px',
+            opacity: expanded ? 1 : 0,
+        }, children: jsxRuntime.jsx("div", { className: `
+          overflow-y-auto p-4
+          ${contentClassName}
+        `, style: { maxHeight: heightValue }, children: children }) }));
+    // Build container styles
+    const containerStyle = {
+        ...(mode === 'viewport' ? { zIndex } : {}),
+        ...(maxWidthValue ? {
+            maxWidth: maxWidthValue,
+            marginLeft: 'auto',
+            marginRight: 'auto'
+        } : {}),
+    };
+    return (jsxRuntime.jsx("div", { className: `
+        ${getPositionClasses()}
+        ${variantStyle.container}
+        border-t rounded-t-lg
+        transition-all duration-300 ease-in-out
+        flex flex-col
+        ${className}
+      `, style: containerStyle, children: position === 'bottom' ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [content, header] })) : (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [header, content] })) }));
+}
+/**
+ * ExpandablePanelSpacer - Adds spacing to prevent content from being hidden behind the panel
+ * Only needed in viewport mode. In container mode, the panel is part of the flex layout.
+ *
+ * @example
+ * ```tsx
+ * <div>
+ *   <MainContent />
+ *   <ExpandablePanelSpacer size="md" />
+ * </div>
+ * <ExpandablePanel mode="viewport" position="bottom" size="md" {...props} />
+ * ```
+ */
+function ExpandablePanelSpacer({ size = 'md' }) {
+    const heights = {
+        sm: 'h-10',
+        md: 'h-12',
+        lg: 'h-14',
+    };
+    return jsxRuntime.jsx("div", { className: heights[size] });
+}
+/**
+ * ExpandablePanelContainer - Wrapper that sets up proper layout for container mode
+ * Use this to wrap your page content when using ExpandablePanel with mode="container"
+ *
+ * This creates a relative container with full height so the panel can position absolutely
+ * at the bottom while the content scrolls above it.
+ *
+ * @example
+ * ```tsx
+ * <Page>
+ *   <ExpandablePanelContainer>
+ *     <div className="flex-1 overflow-auto p-4">
+ *       {pageContent}
+ *     </div>
+ *     <ExpandablePanel mode="container" {...props}>
+ *       {panelContent}
+ *     </ExpandablePanel>
+ *   </ExpandablePanelContainer>
+ * </Page>
+ * ```
+ */
+function ExpandablePanelContainer({ children, className = '', }) {
+    return (jsxRuntime.jsx("div", { className: `relative h-full overflow-hidden ${className}`, children: children }));
+}
+
 // Tailwind breakpoint mappings
 // sm: 640px, md: 768px, lg: 1024px, xl: 1280px, 2xl: 1536px
 /**
@@ -5971,26 +7211,6 @@ function Hide({ children, above, below, only, className = '' }) {
     }
     return (jsxRuntime.jsx("div", { className: `${visibilityClasses} ${className}`, children: children }));
 }
-/**
- * useMediaQuery hook - React hook for responsive logic in components
- *
- * @example
- * const isMobile = useMediaQuery('(max-width: 768px)');
- * const isDesktop = useMediaQuery('(min-width: 1024px)');
- */
-function useMediaQuery(query) {
-    const [matches, setMatches] = React.useState(false);
-    React.useEffect(() => {
-        const media = window.matchMedia(query);
-        if (media.matches !== matches) {
-            setMatches(media.matches);
-        }
-        const listener = () => setMatches(media.matches);
-        media.addEventListener('change', listener);
-        return () => media.removeEventListener('change', listener);
-    }, [matches, query]);
-    return matches;
-}
 
 function Breadcrumbs({ items, showHome = true }) {
     return (jsxRuntime.jsxs("nav", { "aria-label": "Breadcrumb", className: "flex items-center space-x-2 text-sm", children: [showHome && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(reactRouterDom.Link, { to: "/", className: "text-ink-500 hover:text-ink-900 transition-colors", "aria-label": "Home", children: jsxRuntime.jsx(lucideReact.Home, { className: "h-4 w-4" }) }), items.length > 0 && jsxRuntime.jsx(lucideReact.ChevronRight, { className: "h-4 w-4 text-ink-400" })] })), items.map((item, index) => {
@@ -6706,9 +7926,9 @@ function SidebarNavItem({ item, onNavigate, level = 0, currentPath }) {
     // 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] = React.useState(shouldExpandByDefault);
     const handleClick = () => {
         if (hasChildren) {
@@ -6748,15 +7968,692 @@ function SidebarGroup({ title, items, onNavigate, defaultExpanded = true, curren
     }
     return (jsxRuntime.jsxs("div", { children: [jsxRuntime.jsxs("button", { onClick: () => setIsExpanded(!isExpanded), className: "w-full flex items-center justify-between px-3 py-2 text-xs font-semibold text-ink-500 uppercase tracking-wider hover:text-ink-700 transition-colors", children: [jsxRuntime.jsx("span", { children: title }), isExpanded ? (jsxRuntime.jsx(lucideReact.ChevronDown, { className: "h-4 w-4" })) : (jsxRuntime.jsx(lucideReact.ChevronRight, { className: "h-4 w-4" }))] }), isExpanded && (jsxRuntime.jsx("div", { className: "mt-1 space-y-1", children: items.map((item) => (jsxRuntime.jsx(SidebarNavItem, { item: item, onNavigate: onNavigate, currentPath: currentPath }, item.id))) }))] }));
 }
-function Sidebar({ items, onNavigate, className = '', header, footer, currentPath }) {
-    return (jsxRuntime.jsxs("div", { className: `flex flex-col h-full bg-white border-r border-paper-300 notebook-binding ${className}`, children: [header && (jsxRuntime.jsx("div", { className: "px-6 pt-6 pb-4", children: header })), jsxRuntime.jsx("nav", { className: "flex-1 px-3 py-2 space-y-1 overflow-y-auto", children: items.map((item) => {
+/**
+ * Sidebar - Navigation sidebar with mobile drawer support
+ *
+ * On desktop: Renders as a fixed-width sidebar
+ * On mobile: Renders as a drawer overlay when mobileOpen is true
+ *
+ * @example Desktop usage (no mobile props)
+ * ```tsx
+ * <Sidebar
+ *   items={navItems}
+ *   header={<Logo />}
+ *   footer={<UserProfile />}
+ *   currentPath={location.pathname}
+ *   onNavigate={(href) => navigate(href)}
+ * />
+ * ```
+ *
+ * @example With mobile drawer support
+ * ```tsx
+ * const [mobileOpen, setMobileOpen] = useState(false);
+ *
+ * <Sidebar
+ *   items={navItems}
+ *   header={<Logo />}
+ *   mobileOpen={mobileOpen}
+ *   onMobileClose={() => setMobileOpen(false)}
+ *   onNavigate={(href) => {
+ *     navigate(href);
+ *     setMobileOpen(false); // Close drawer on navigation
+ *   }}
+ * />
+ * ```
+ */
+function Sidebar({ items, onNavigate, className = '', header, footer, currentPath, mobileOpen, onMobileClose, width = 'w-64', }) {
+    const sidebarRef = React.useRef(null);
+    const [isAnimating, setIsAnimating] = React.useState(false);
+    const [shouldRender, setShouldRender] = React.useState(mobileOpen);
+    // Handle animation states for mobile drawer
+    React.useEffect(() => {
+        if (mobileOpen) {
+            setShouldRender(true);
+            // Small delay to trigger animation
+            requestAnimationFrame(() => {
+                setIsAnimating(true);
+            });
+            return; // No cleanup needed when opening
+        }
+        else {
+            setIsAnimating(false);
+            // Wait for animation to complete before unmounting
+            const timer = setTimeout(() => {
+                setShouldRender(false);
+            }, 300);
+            return () => clearTimeout(timer);
+        }
+    }, [mobileOpen]);
+    // Handle escape key for mobile drawer
+    React.useEffect(() => {
+        if (!mobileOpen)
+            return;
+        const handleEscape = (e) => {
+            if (e.key === 'Escape') {
+                onMobileClose?.();
+            }
+        };
+        document.addEventListener('keydown', handleEscape);
+        return () => document.removeEventListener('keydown', handleEscape);
+    }, [mobileOpen, onMobileClose]);
+    // Lock body scroll when mobile drawer is open
+    React.useEffect(() => {
+        if (mobileOpen) {
+            document.body.style.overflow = 'hidden';
+        }
+        else {
+            document.body.style.overflow = '';
+        }
+        return () => {
+            document.body.style.overflow = '';
+        };
+    }, [mobileOpen]);
+    // Handle navigation with auto-close on mobile
+    const handleNavigate = (href, external) => {
+        onNavigate?.(href, external);
+        // Auto-close mobile drawer on navigation
+        if (mobileOpen) {
+            onMobileClose?.();
+        }
+    };
+    // Sidebar content (shared between desktop and mobile)
+    const sidebarContent = (jsxRuntime.jsxs("div", { ref: sidebarRef, className: `flex flex-col h-full bg-white border-r border-paper-300 notebook-binding ${width} ${className}`, children: [mobileOpen !== undefined && (jsxRuntime.jsxs("div", { className: "flex items-center justify-between px-4 pt-4 md:hidden", children: [jsxRuntime.jsx("div", { className: "flex-1", children: header }), jsxRuntime.jsx("button", { onClick: onMobileClose, className: "\n              flex items-center justify-center\n              w-10 h-10 -mr-2\n              text-ink-500 hover:text-ink-700\n              hover:bg-paper-100 rounded-full\n              transition-colors\n            ", "aria-label": "Close sidebar", children: jsxRuntime.jsx(lucideReact.X, { className: "w-5 h-5" }) })] })), header && mobileOpen === undefined && (jsxRuntime.jsx("div", { className: "px-6 pt-6 pb-4", children: header })), header && mobileOpen !== undefined && (jsxRuntime.jsx("div", { className: "px-6 pt-2 pb-4 hidden md:block", children: header })), jsxRuntime.jsx("nav", { className: "flex-1 px-3 py-2 space-y-1 overflow-y-auto", children: items.map((item) => {
                     // Render separator
                     if (item.separator) {
                         return jsxRuntime.jsx("div", { className: "my-4 border-t border-paper-300" }, item.id);
                     }
                     // Render nav item
-                    return (jsxRuntime.jsx(SidebarNavItem, { item: item, onNavigate: onNavigate, currentPath: currentPath }, item.id));
+                    return (jsxRuntime.jsx(SidebarNavItem, { item: item, onNavigate: handleNavigate, currentPath: currentPath }, item.id));
                 }) }), footer && (jsxRuntime.jsx("div", { className: "border-t border-paper-300 pl-2 pr-6 py-4 overflow-visible", children: footer }))] }));
+    // If mobileOpen is not defined, render as regular sidebar (desktop mode)
+    if (mobileOpen === undefined) {
+        return sidebarContent;
+    }
+    // Mobile drawer mode
+    if (!shouldRender) {
+        return null;
+    }
+    return reactDom.createPortal(jsxRuntime.jsxs("div", { className: "fixed inset-0 z-50 md:hidden", role: "dialog", "aria-modal": "true", "aria-label": "Navigation menu", children: [jsxRuntime.jsx("div", { className: `
+          absolute inset-0 bg-ink-900/50 backdrop-blur-sm
+          transition-opacity duration-300
+          ${isAnimating ? 'opacity-100' : 'opacity-0'}
+        `, onClick: onMobileClose, "aria-hidden": "true" }), jsxRuntime.jsx("div", { className: `
+          absolute inset-y-0 left-0 flex max-w-full
+          transition-transform duration-300 ease-out
+          ${isAnimating ? 'translate-x-0' : '-translate-x-full'}
+        `, children: sidebarContent })] }), document.body);
+}
+
+/**
+ * BottomNavigation - Mobile-style bottom tab bar
+ *
+ * iOS/Android-style fixed bottom navigation with icons, labels, and badges.
+ * Handles safe area insets for notched devices automatically.
+ *
+ * Best practices:
+ * - Use 3-5 items maximum
+ * - Keep labels short (1-2 words)
+ * - Use consistent icon style
+ *
+ * @example Basic usage
+ * ```tsx
+ * import { BottomNavigation } from 'notebook-ui';
+ * import { Home, Search, Bell, User } from 'lucide-react';
+ *
+ * const navItems = [
+ *   { id: 'home', label: 'Home', icon: <Home />, href: '/' },
+ *   { id: 'search', label: 'Search', icon: <Search />, href: '/search' },
+ *   { id: 'notifications', label: 'Alerts', icon: <Bell />, badge: 3 },
+ *   { id: 'profile', label: 'Profile', icon: <User />, href: '/profile' },
+ * ];
+ *
+ * <BottomNavigation
+ *   items={navItems}
+ *   activeId="home"
+ *   onNavigate={(id, href) => navigate(href)}
+ * />
+ * ```
+ *
+ * @example With onClick handlers
+ * ```tsx
+ * const navItems = [
+ *   { id: 'home', label: 'Home', icon: <Home />, onClick: () => setTab('home') },
+ *   { id: 'add', label: 'Add', icon: <Plus />, onClick: openAddModal },
+ * ];
+ *
+ * <BottomNavigation items={navItems} activeId={currentTab} />
+ * ```
+ */
+function BottomNavigation({ items, activeId, onNavigate, showLabels = true, className = '', safeArea = true, }) {
+    const handleItemClick = (item) => {
+        if (item.disabled)
+            return;
+        if (item.onClick) {
+            item.onClick();
+        }
+        if (onNavigate) {
+            onNavigate(item.id, item.href);
+        }
+    };
+    return (jsxRuntime.jsx("nav", { className: `
+        fixed bottom-0 left-0 right-0 z-40
+        bg-white border-t border-paper-200 shadow-lg
+        ${safeArea ? 'pb-[env(safe-area-inset-bottom)]' : ''}
+        ${className}
+      `, role: "navigation", "aria-label": "Bottom navigation", children: jsxRuntime.jsx("div", { className: "flex items-center justify-around h-14 max-w-lg mx-auto px-2", children: items.map((item) => {
+                const isActive = item.id === activeId;
+                return (jsxRuntime.jsxs("button", { onClick: () => handleItemClick(item), disabled: item.disabled, className: `
+                relative flex flex-col items-center justify-center
+                flex-1 h-full min-w-touch-sm
+                transition-colors duration-200
+                ${item.disabled
+                        ? 'opacity-40 cursor-not-allowed'
+                        : 'active:bg-paper-100'}
+                ${isActive
+                        ? 'text-accent-600'
+                        : 'text-ink-500 hover:text-ink-700'}
+              `, "aria-current": isActive ? 'page' : undefined, "aria-label": item.label, children: [jsxRuntime.jsxs("div", { className: "relative", children: [jsxRuntime.jsx("div", { className: `
+                    w-6 h-6 flex items-center justify-center
+                    transition-transform duration-200
+                    ${isActive ? 'scale-110' : 'scale-100'}
+                  `, children: React.isValidElement(item.icon)
+                                        ? React.cloneElement(item.icon, {
+                                            className: 'w-6 h-6',
+                                        })
+                                        : item.icon }), item.badge !== undefined && item.badge > 0 && (jsxRuntime.jsx("span", { className: `
+                      absolute -top-1 -right-2.5
+                      min-w-[18px] h-[18px] px-1
+                      flex items-center justify-center
+                      text-[10px] font-bold text-white
+                      bg-error-500 rounded-full
+                      ${item.badge > 99 ? 'text-[8px]' : ''}
+                    `, children: item.badge > 99 ? '99+' : item.badge }))] }), showLabels && (jsxRuntime.jsx("span", { className: `
+                    mt-1 text-[10px] font-medium leading-none
+                    transition-opacity duration-200
+                    truncate max-w-full px-1
+                    ${isActive ? 'opacity-100' : 'opacity-70'}
+                  `, children: item.label })), isActive && (jsxRuntime.jsx("div", { className: "\n                    absolute top-0 left-1/2 -translate-x-1/2\n                    w-8 h-0.5 bg-accent-500 rounded-full\n                  " }))] }, item.id));
+            }) }) }));
+}
+/**
+ * BottomNavigationSpacer - Spacer to prevent content from being hidden behind BottomNavigation
+ *
+ * Place this at the bottom of your scrollable content when using BottomNavigation.
+ *
+ * @example
+ * ```tsx
+ * <div className="flex flex-col h-screen">
+ *   <main className="flex-1 overflow-auto">
+ *     {/* Your content *\/}
+ *     <BottomNavigationSpacer />
+ *   </main>
+ *   <BottomNavigation items={navItems} />
+ * </div>
+ * ```
+ */
+function BottomNavigationSpacer({ safeArea = true }) {
+    return (jsxRuntime.jsx("div", { className: `h-14 ${safeArea ? 'pb-[env(safe-area-inset-bottom)]' : ''}`, "aria-hidden": "true" }));
+}
+
+/**
+ * MobileHeader - Mobile app header with navigation controls
+ *
+ * A flexible mobile header component with support for:
+ * - Hamburger menu button (default)
+ * - Back navigation arrow
+ * - Close button (X)
+ * - Custom left/right actions
+ * - Sticky positioning
+ * - Blur/transparent variants
+ *
+ * @example Basic with menu button
+ * ```tsx
+ * <MobileHeader
+ *   title="Dashboard"
+ *   onMenuClick={() => setDrawerOpen(true)}
+ * />
+ * ```
+ *
+ * @example With back button
+ * ```tsx
+ * <MobileHeader
+ *   title="User Details"
+ *   subtitle="Profile"
+ *   onBackClick={() => navigate(-1)}
+ * />
+ * ```
+ *
+ * @example With right action
+ * ```tsx
+ * <MobileHeader
+ *   title="Settings"
+ *   onMenuClick={openMenu}
+ *   rightAction={
+ *     <Button variant="ghost" iconOnly onClick={save}>
+ *       <Check className="w-5 h-5" />
+ *     </Button>
+ *   }
+ * />
+ * ```
+ *
+ * @example Transparent with blur
+ * ```tsx
+ * <MobileHeader
+ *   title="Photo Gallery"
+ *   variant="blur"
+ *   onBackClick={goBack}
+ * />
+ * ```
+ */
+function MobileHeader({ title, subtitle, onMenuClick, onBackClick, onCloseClick, rightAction, leftAction, sticky = true, bordered = true, variant = 'solid', className = '', safeArea = true, }) {
+    // Determine which left button to show
+    const renderLeftButton = () => {
+        // Custom left action takes priority
+        if (leftAction) {
+            return leftAction;
+        }
+        // Close button
+        if (onCloseClick) {
+            return (jsxRuntime.jsx("button", { onClick: onCloseClick, className: "\n            flex items-center justify-center\n            w-10 h-10 -ml-2\n            text-ink-600 hover:text-ink-900\n            hover:bg-paper-100 rounded-full\n            transition-colors duration-200\n            active:bg-paper-200\n          ", "aria-label": "Close", children: jsxRuntime.jsx(lucideReact.X, { className: "w-6 h-6" }) }));
+        }
+        // Back button
+        if (onBackClick) {
+            return (jsxRuntime.jsx("button", { onClick: onBackClick, className: "\n            flex items-center justify-center\n            w-10 h-10 -ml-2\n            text-ink-600 hover:text-ink-900\n            hover:bg-paper-100 rounded-full\n            transition-colors duration-200\n            active:bg-paper-200\n          ", "aria-label": "Go back", children: jsxRuntime.jsx(lucideReact.ChevronLeft, { className: "w-6 h-6" }) }));
+        }
+        // Menu button (default)
+        if (onMenuClick) {
+            return (jsxRuntime.jsx("button", { onClick: onMenuClick, className: "\n            flex items-center justify-center\n            w-10 h-10 -ml-2\n            text-ink-600 hover:text-ink-900\n            hover:bg-paper-100 rounded-full\n            transition-colors duration-200\n            active:bg-paper-200\n          ", "aria-label": "Open menu", children: jsxRuntime.jsx(lucideReact.Menu, { className: "w-6 h-6" }) }));
+        }
+        // No left button
+        return jsxRuntime.jsx("div", { className: "w-10 h-10" });
+    };
+    // Background variant styles
+    const variantStyles = {
+        solid: 'bg-white',
+        transparent: 'bg-transparent',
+        blur: 'bg-white/80 backdrop-blur-md',
+    };
+    return (jsxRuntime.jsx("header", { className: `
+        ${sticky ? 'sticky top-0 z-30' : ''}
+        ${safeArea ? 'pt-[env(safe-area-inset-top)]' : ''}
+        ${variantStyles[variant]}
+        ${bordered ? 'border-b border-paper-200' : ''}
+        ${className}
+      `, children: jsxRuntime.jsxs("div", { className: "flex items-center justify-between h-14 px-4", children: [jsxRuntime.jsxs("div", { className: "flex items-center gap-2 min-w-0 flex-1", children: [renderLeftButton(), jsxRuntime.jsxs("div", { className: "flex flex-col min-w-0 flex-1", children: [subtitle && (jsxRuntime.jsx("span", { className: "text-xs text-ink-500 truncate", children: subtitle })), jsxRuntime.jsx("h1", { className: "text-lg font-semibold text-ink-900 truncate leading-tight", children: title })] })] }), jsxRuntime.jsx("div", { className: "flex items-center gap-1 ml-2 flex-shrink-0", children: rightAction })] }) }));
+}
+/**
+ * MobileHeaderSpacer - Spacer to prevent content from being hidden behind sticky MobileHeader
+ *
+ * Place this at the top of your content when NOT using sticky header
+ * to maintain consistent spacing.
+ *
+ * @example
+ * ```tsx
+ * <MobileHeader title="Page" sticky={false} />
+ * <MobileHeaderSpacer />
+ * <main>Content here</main>
+ * ```
+ */
+function MobileHeaderSpacer({ safeArea = true }) {
+    return (jsxRuntime.jsx("div", { className: `h-14 ${safeArea ? 'pt-[env(safe-area-inset-top)]' : ''}`, "aria-hidden": "true" }));
+}
+
+const positionClasses = {
+    'bottom-right': 'right-4 bottom-4',
+    'bottom-left': 'left-4 bottom-4',
+    'bottom-center': 'left-1/2 -translate-x-1/2 bottom-4',
+};
+const variantClasses = {
+    primary: 'bg-accent-600 hover:bg-accent-700 text-white shadow-lg',
+    secondary: 'bg-white hover:bg-paper-50 text-ink-700 shadow-lg border border-paper-200',
+    accent: 'bg-accent-500 hover:bg-accent-600 text-white shadow-lg',
+};
+const sizeClasses$1 = {
+    md: 'w-14 h-14',
+    lg: 'w-16 h-16',
+};
+const iconSizeClasses = {
+    md: 'h-6 w-6',
+    lg: 'h-7 w-7',
+};
+/**
+ * FloatingActionButton - Material Design style FAB for mobile
+ *
+ * A prominent button for the primary action on a screen.
+ * Supports single action or expandable menu with multiple actions.
+ *
+ * @example Simple FAB
+ * ```tsx
+ * <FloatingActionButton
+ *   onClick={() => openCreateModal()}
+ *   label="Create new item"
+ * />
+ * ```
+ *
+ * @example FAB with action menu
+ * ```tsx
+ * <FloatingActionButton
+ *   actions={[
+ *     { id: 'photo', icon: <Camera />, label: 'Take Photo', onClick: takePhoto },
+ *     { id: 'upload', icon: <Upload />, label: 'Upload File', onClick: uploadFile },
+ *     { id: 'note', icon: <FileText />, label: 'Create Note', onClick: createNote },
+ *   ]}
+ * />
+ * ```
+ *
+ * @example Extended FAB
+ * ```tsx
+ * <FloatingActionButton
+ *   extended
+ *   extendedLabel="New Task"
+ *   icon={<Plus />}
+ *   onClick={createTask}
+ * />
+ * ```
+ */
+function FloatingActionButton({ onClick, icon, actions, position = 'bottom-right', variant = 'primary', size = 'md', label = 'Action button', extended = false, extendedLabel, hidden = false, offset, className = '', }) {
+    const [isMenuOpen, setIsMenuOpen] = React.useState(false);
+    const fabRef = React.useRef(null);
+    const hasMenu = actions && actions.length > 0;
+    // Close menu on escape
+    React.useEffect(() => {
+        if (!isMenuOpen)
+            return;
+        const handleEscape = (e) => {
+            if (e.key === 'Escape') {
+                setIsMenuOpen(false);
+            }
+        };
+        document.addEventListener('keydown', handleEscape);
+        return () => document.removeEventListener('keydown', handleEscape);
+    }, [isMenuOpen]);
+    // Close menu on click outside
+    React.useEffect(() => {
+        if (!isMenuOpen)
+            return;
+        const handleClickOutside = (e) => {
+            if (fabRef.current && !fabRef.current.contains(e.target)) {
+                setIsMenuOpen(false);
+            }
+        };
+        document.addEventListener('mousedown', handleClickOutside);
+        return () => document.removeEventListener('mousedown', handleClickOutside);
+    }, [isMenuOpen]);
+    const handleClick = () => {
+        if (hasMenu) {
+            setIsMenuOpen(!isMenuOpen);
+        }
+        else if (onClick) {
+            onClick();
+        }
+    };
+    const handleActionClick = (action) => {
+        if (!action.disabled) {
+            action.onClick();
+            setIsMenuOpen(false);
+        }
+    };
+    // Custom offset styles
+    const offsetStyle = offset ? {
+        ...(offset.x !== undefined && position.includes('right') ? { right: `${offset.x}px` } : {}),
+        ...(offset.x !== undefined && position.includes('left') ? { left: `${offset.x}px` } : {}),
+        ...(offset.y !== undefined ? { bottom: `${offset.y}px` } : {}),
+    } : {};
+    const fabContent = (jsxRuntime.jsxs("div", { className: `
+        fixed z-40 transition-all duration-300
+        ${positionClasses[position]}
+        ${hidden ? 'translate-y-20 opacity-0 pointer-events-none' : 'translate-y-0 opacity-100'}
+        ${className}
+      `, style: {
+            ...offsetStyle,
+            paddingBottom: 'env(safe-area-inset-bottom)',
+        }, children: [hasMenu && isMenuOpen && (jsxRuntime.jsx("div", { className: "absolute bottom-full mb-3 flex flex-col-reverse gap-3 items-center", children: actions.map((action, index) => (jsxRuntime.jsxs("div", { className: "flex items-center gap-3 animate-fade-in", style: { animationDelay: `${index * 50}ms` }, children: [jsxRuntime.jsx("span", { className: "bg-ink-900/80 text-white text-sm px-3 py-1.5 rounded-lg whitespace-nowrap", children: action.label }), jsxRuntime.jsx("button", { onClick: () => handleActionClick(action), disabled: action.disabled, className: `
+                  w-12 h-12 rounded-full flex items-center justify-center
+                  transition-all duration-200
+                  ${action.disabled
+                                ? 'bg-paper-200 text-ink-400 cursor-not-allowed'
+                                : 'bg-white text-ink-700 shadow-lg hover:bg-paper-50 active:scale-95'}
+                `, "aria-label": action.label, children: action.icon })] }, action.id))) })), hasMenu && isMenuOpen && (jsxRuntime.jsx("div", { className: "fixed inset-0 bg-black/20 -z-10 animate-fade-in", onClick: () => setIsMenuOpen(false) })), jsxRuntime.jsxs("button", { ref: fabRef, onClick: handleClick, className: `
+          ${extended ? 'px-6 rounded-full' : 'rounded-full'}
+          ${extended ? 'h-14' : sizeClasses$1[size]}
+          ${variantClasses[variant]}
+          flex items-center justify-center gap-2
+          transition-all duration-200
+          active:scale-95
+          focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-accent-400
+        `, "aria-label": label, "aria-expanded": hasMenu ? isMenuOpen : undefined, "aria-haspopup": hasMenu ? 'menu' : undefined, children: [hasMenu && isMenuOpen ? (jsxRuntime.jsx(lucideReact.X, { className: iconSizeClasses[size] })) : (icon || jsxRuntime.jsx(lucideReact.Plus, { className: iconSizeClasses[size] })), extended && extendedLabel && (jsxRuntime.jsx("span", { className: "font-medium", children: extendedLabel }))] })] }));
+    // Render via portal to ensure proper stacking
+    return reactDom.createPortal(fabContent, document.body);
+}
+/**
+ * Hook for scroll-based FAB visibility
+ *
+ * @example
+ * ```tsx
+ * const { hidden, scrollDirection } = useFABScroll();
+ * <FloatingActionButton hidden={hidden} />
+ * ```
+ */
+function useFABScroll(threshold = 10) {
+    const [hidden, setHidden] = React.useState(false);
+    const [scrollDirection, setScrollDirection] = React.useState(null);
+    const lastScrollY = React.useRef(0);
+    React.useEffect(() => {
+        const handleScroll = () => {
+            const currentScrollY = window.scrollY;
+            const diff = currentScrollY - lastScrollY.current;
+            if (Math.abs(diff) > threshold) {
+                if (diff > 0) {
+                    setHidden(true);
+                    setScrollDirection('down');
+                }
+                else {
+                    setHidden(false);
+                    setScrollDirection('up');
+                }
+                lastScrollY.current = currentScrollY;
+            }
+        };
+        window.addEventListener('scroll', handleScroll, { passive: true });
+        return () => window.removeEventListener('scroll', handleScroll);
+    }, [threshold]);
+    return { hidden, scrollDirection };
+}
+
+/**
+ * PullToRefresh - Mobile pull-to-refresh gesture handler
+ *
+ * Wraps content and provides native-feeling pull-to-refresh functionality.
+ * Only activates when scrolled to top of content.
+ *
+ * @example Basic usage
+ * ```tsx
+ * <PullToRefresh onRefresh={async () => {
+ *   await fetchLatestData();
+ * }}>
+ *   <div className="min-h-screen">
+ *     {content}
+ *   </div>
+ * </PullToRefresh>
+ * ```
+ *
+ * @example With custom threshold
+ * ```tsx
+ * <PullToRefresh
+ *   onRefresh={handleRefresh}
+ *   pullThreshold={100}
+ *   maxPull={150}
+ * >
+ *   {content}
+ * </PullToRefresh>
+ * ```
+ */
+function PullToRefresh({ children, onRefresh, disabled = false, pullThreshold = 80, maxPull = 120, loadingIndicator, pullIndicator, className = '', }) {
+    const [state, setState] = React.useState('idle');
+    const [pullDistance, setPullDistance] = React.useState(0);
+    const containerRef = React.useRef(null);
+    const startY = React.useRef(0);
+    const currentY = React.useRef(0);
+    // Check if at top of scroll container
+    const isAtTop = React.useCallback(() => {
+        const container = containerRef.current;
+        if (!container)
+            return false;
+        return container.scrollTop <= 0;
+    }, []);
+    // Handle touch start
+    const handleTouchStart = React.useCallback((e) => {
+        if (disabled || state === 'refreshing' || !isAtTop())
+            return;
+        startY.current = e.touches[0].clientY;
+        currentY.current = startY.current;
+    }, [disabled, state, isAtTop]);
+    // Handle touch move
+    const handleTouchMove = React.useCallback((e) => {
+        if (disabled || state === 'refreshing')
+            return;
+        if (startY.current === 0)
+            return;
+        currentY.current = e.touches[0].clientY;
+        const diff = currentY.current - startY.current;
+        // Only allow pulling down when at top
+        if (diff > 0 && isAtTop()) {
+            // Apply resistance - pull slows down as distance increases
+            const resistance = 0.5;
+            const adjustedPull = Math.min(diff * resistance, maxPull);
+            setPullDistance(adjustedPull);
+            setState(adjustedPull >= pullThreshold ? 'ready' : 'pulling');
+            // Prevent default scroll when pulling
+            if (adjustedPull > 0) {
+                e.preventDefault();
+            }
+        }
+    }, [disabled, state, isAtTop, maxPull, pullThreshold]);
+    // Handle touch end
+    const handleTouchEnd = React.useCallback(async () => {
+        if (disabled || state === 'refreshing')
+            return;
+        if (state === 'ready') {
+            setState('refreshing');
+            setPullDistance(pullThreshold); // Hold at threshold while refreshing
+            try {
+                await onRefresh();
+            }
+            catch (error) {
+                console.error('Refresh failed:', error);
+            }
+            setState('idle');
+        }
+        setPullDistance(0);
+        startY.current = 0;
+        currentY.current = 0;
+    }, [disabled, state, pullThreshold, onRefresh]);
+    // Attach touch listeners
+    React.useEffect(() => {
+        const container = containerRef.current;
+        if (!container)
+            return;
+        container.addEventListener('touchstart', handleTouchStart, { passive: true });
+        container.addEventListener('touchmove', handleTouchMove, { passive: false });
+        container.addEventListener('touchend', handleTouchEnd);
+        return () => {
+            container.removeEventListener('touchstart', handleTouchStart);
+            container.removeEventListener('touchmove', handleTouchMove);
+            container.removeEventListener('touchend', handleTouchEnd);
+        };
+    }, [handleTouchStart, handleTouchMove, handleTouchEnd]);
+    // Calculate indicator opacity and rotation
+    const progress = Math.min(pullDistance / pullThreshold, 1);
+    const rotation = progress * 180;
+    // Default loading indicator
+    const defaultLoadingIndicator = (jsxRuntime.jsx(lucideReact.Loader2, { className: "h-6 w-6 text-accent-600 animate-spin" }));
+    // Default pull indicator
+    const defaultPullIndicator = (jsxRuntime.jsx("div", { className: `
+        transition-transform duration-200
+        ${state === 'ready' ? 'text-accent-600' : 'text-ink-400'}
+      `, style: { transform: `rotate(${rotation}deg)` }, children: jsxRuntime.jsx(lucideReact.ArrowDown, { className: "h-6 w-6" }) }));
+    return (jsxRuntime.jsxs("div", { ref: containerRef, className: `relative overflow-auto ${className}`, style: { touchAction: pullDistance > 0 ? 'none' : 'auto' }, children: [jsxRuntime.jsx("div", { className: `
+          absolute left-0 right-0 flex items-center justify-center
+          transition-all duration-200 overflow-hidden
+          ${state === 'idle' && pullDistance === 0 ? 'opacity-0' : 'opacity-100'}
+        `, style: {
+                    height: `${pullDistance}px`,
+                    top: 0,
+                    zIndex: 10,
+                }, children: jsxRuntime.jsx("div", { className: `
+            w-10 h-10 rounded-full bg-white shadow-md
+            flex items-center justify-center
+            transition-transform duration-200
+            ${state === 'refreshing' ? 'scale-100' : progress < 0.3 ? 'scale-75' : 'scale-100'}
+          `, children: state === 'refreshing'
+                        ? (loadingIndicator || defaultLoadingIndicator)
+                        : (pullIndicator || defaultPullIndicator) }) }), jsxRuntime.jsx("div", { className: "transition-transform duration-200", style: {
+                    transform: `translateY(${pullDistance}px)`,
+                }, children: children })] }));
+}
+/**
+ * usePullToRefresh - Hook for custom pull-to-refresh implementations
+ *
+ * @example
+ * ```tsx
+ * const { pullDistance, isRefreshing, bind } = usePullToRefresh({
+ *   onRefresh: async () => {
+ *     await fetchData();
+ *   }
+ * });
+ *
+ * return (
+ *   <div {...bind}>
+ *     {isRefreshing && <Spinner />}
+ *     {content}
+ *   </div>
+ * );
+ * ```
+ */
+function usePullToRefresh({ onRefresh, pullThreshold = 80, maxPull = 120, disabled = false, }) {
+    const [pullDistance, setPullDistance] = React.useState(0);
+    const [isRefreshing, setIsRefreshing] = React.useState(false);
+    const startY = React.useRef(0);
+    const handleTouchStart = React.useCallback((e) => {
+        if (disabled || isRefreshing)
+            return;
+        startY.current = e.touches[0].clientY;
+    }, [disabled, isRefreshing]);
+    const handleTouchMove = React.useCallback((e) => {
+        if (disabled || isRefreshing || startY.current === 0)
+            return;
+        const diff = e.touches[0].clientY - startY.current;
+        if (diff > 0) {
+            const adjustedPull = Math.min(diff * 0.5, maxPull);
+            setPullDistance(adjustedPull);
+        }
+    }, [disabled, isRefreshing, maxPull]);
+    const handleTouchEnd = React.useCallback(async () => {
+        if (disabled || isRefreshing)
+            return;
+        if (pullDistance >= pullThreshold) {
+            setIsRefreshing(true);
+            try {
+                await onRefresh();
+            }
+            finally {
+                setIsRefreshing(false);
+            }
+        }
+        setPullDistance(0);
+        startY.current = 0;
+    }, [disabled, isRefreshing, pullDistance, pullThreshold, onRefresh]);
+    return {
+        pullDistance,
+        isRefreshing,
+        isReady: pullDistance >= pullThreshold,
+        progress: Math.min(pullDistance / pullThreshold, 1),
+        bind: {
+            onTouchStart: handleTouchStart,
+            onTouchMove: handleTouchMove,
+            onTouchEnd: handleTouchEnd,
+        },
+    };
 }
 
 function Logo({ size = 'md', showText = true, text = 'Commora', className = '', }) {
@@ -6872,6 +8769,125 @@ const Layout = ({ sidebar, children, statusBar, className = '', sections }) => {
     return (jsxRuntime.jsxs("div", { className: `h-screen flex flex-col bg-paper-100 ${className}`, children: [jsxRuntime.jsxs("div", { className: "flex flex-1 overflow-hidden relative", children: [sidebar, jsxRuntime.jsx("div", { className: "w-8 h-full bg-paper-100 flex-shrink-0 relative flex items-center justify-center", children: jsxRuntime.jsx(PageNavigation, { sections: sections }) }), jsxRuntime.jsx("div", { className: "flex-1 overflow-auto", children: children })] }), statusBar] }));
 };
 
+/**
+ * MobileLayout - Auto-responsive layout that switches between desktop and mobile patterns
+ *
+ * This component automatically detects the viewport size and renders the appropriate layout:
+ * - **Desktop** (≥1024px): Standard Layout with sidebar, gutter, and scrollable content
+ * - **Mobile/Tablet** (<1024px): Mobile header, drawer navigation, bottom tab bar
+ *
+ * The mobile layout features:
+ * - Sticky header with hamburger menu to open drawer
+ * - Sidebar rendered as a slide-in drawer
+ * - Bottom navigation bar for primary navigation
+ * - Safe area support for notched devices
+ *
+ * @example Basic usage
+ * ```tsx
+ * <MobileLayout
+ *   sidebarItems={[
+ *     { id: 'home', label: 'Home', icon: <Home />, href: '/' },
+ *     { id: 'tasks', label: 'Tasks', icon: <CheckSquare />, href: '/tasks' },
+ *     { id: 'settings', label: 'Settings', icon: <Settings />, href: '/settings' }
+ *   ]}
+ *   currentPath={location.pathname}
+ *   onNavigate={(href) => navigate(href)}
+ *   title="My App"
+ *   header={<Logo />}
+ *   userProfile={<UserProfileButton user={user} />}
+ * >
+ *   <Page>
+ *     <h1>Dashboard</h1>
+ *   </Page>
+ * </MobileLayout>
+ * ```
+ *
+ * @example With custom bottom nav items
+ * ```tsx
+ * <MobileLayout
+ *   sidebarItems={fullNavItems}
+ *   bottomNavItems={[
+ *     { id: 'home', label: 'Home', icon: <Home />, href: '/' },
+ *     { id: 'search', label: 'Search', icon: <Search />, href: '/search' },
+ *     { id: 'profile', label: 'Profile', icon: <User />, href: '/profile' }
+ *   ]}
+ *   currentPath={location.pathname}
+ *   title="My App"
+ * >
+ *   {children}
+ * </MobileLayout>
+ * ```
+ *
+ * @example Force mobile layout for testing
+ * ```tsx
+ * <MobileLayout
+ *   sidebarItems={items}
+ *   title="Mobile Preview"
+ *   forceMobile
+ * >
+ *   {children}
+ * </MobileLayout>
+ * ```
+ */
+const MobileLayout = ({ children, sidebarItems, currentPath, onNavigate, header, userProfile, sidebarFooter, title, subtitle, headerRightAction, headerLeftAction, headerVariant = 'solid', bottomNavItems, activeBottomNavId, showBottomNavLabels = true, statusBar, className = '', sections, forceMobile = false, forceDesktop = false, hideBottomNav = false, hideMobileHeader = false, safeArea = true, }) => {
+    const isMobileViewport = useIsMobile();
+    const isTabletViewport = useIsTablet();
+    const [drawerOpen, setDrawerOpen] = React.useState(false);
+    // Determine if we should use mobile layout
+    const useMobileLayout = forceDesktop
+        ? false
+        : forceMobile || isMobileViewport || isTabletViewport;
+    // Open/close drawer
+    const openDrawer = React.useCallback(() => setDrawerOpen(true), []);
+    const closeDrawer = React.useCallback(() => setDrawerOpen(false), []);
+    // Handle navigation from drawer - close drawer after navigation
+    const handleDrawerNavigate = React.useCallback((href) => {
+        closeDrawer();
+        onNavigate?.(href);
+    }, [closeDrawer, onNavigate]);
+    // Handle bottom nav navigation - matches BottomNavigation's onNavigate signature
+    const handleBottomNavNavigate = React.useCallback((id, href) => {
+        if (href) {
+            onNavigate?.(href);
+        }
+        // Also check if there's a custom onClick in the bottom nav items
+        const item = bottomNavItems?.find(i => i.id === id);
+        item?.onClick?.();
+    }, [onNavigate, bottomNavItems]);
+    // Convert sidebar items to bottom nav items if not provided
+    const effectiveBottomNavItems = bottomNavItems || sidebarItems
+        .filter(item => !item.children && item.href) // Only top-level items with href
+        .slice(0, 5) // Max 5 items for bottom nav
+        .map(item => ({
+        id: item.id,
+        label: item.label,
+        icon: item.icon,
+        href: item.href,
+        badge: typeof item.badge === 'number' ? item.badge : undefined,
+    }));
+    // Determine active bottom nav ID
+    const effectiveActiveBottomNavId = activeBottomNavId ||
+        effectiveBottomNavItems.find(item => item.href === currentPath)?.id;
+    // Close drawer on escape key
+    React.useEffect(() => {
+        if (!drawerOpen)
+            return;
+        const handleEscape = (e) => {
+            if (e.key === 'Escape') {
+                closeDrawer();
+            }
+        };
+        window.addEventListener('keydown', handleEscape);
+        return () => window.removeEventListener('keydown', handleEscape);
+    }, [drawerOpen, closeDrawer]);
+    // Desktop Layout
+    if (!useMobileLayout) {
+        return (jsxRuntime.jsxs("div", { className: `h-screen flex flex-col bg-paper-100 ${className}`, children: [jsxRuntime.jsxs("div", { className: "flex flex-1 overflow-hidden relative", children: [jsxRuntime.jsx(Sidebar, { items: sidebarItems, currentPath: currentPath, onNavigate: onNavigate, header: header, footer: jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [userProfile, sidebarFooter] }) }), jsxRuntime.jsx("div", { className: "w-8 h-full bg-paper-100 flex-shrink-0 relative flex items-center justify-center", children: jsxRuntime.jsx(PageNavigation, { sections: sections }) }), jsxRuntime.jsx("div", { className: "flex-1 overflow-auto", children: children })] }), statusBar] }));
+    }
+    // Mobile Layout
+    return (jsxRuntime.jsxs("div", { className: `min-h-screen flex flex-col bg-paper-100 ${className}`, children: [!hideMobileHeader && (jsxRuntime.jsx(MobileHeader, { title: title, subtitle: subtitle, onMenuClick: headerLeftAction ? undefined : openDrawer, leftAction: headerLeftAction, rightAction: headerRightAction, variant: headerVariant, sticky: true, bordered: true, safeArea: safeArea })), jsxRuntime.jsx(Sidebar, { items: sidebarItems, currentPath: currentPath, onNavigate: handleDrawerNavigate, header: header, footer: jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [userProfile, sidebarFooter] }), mobileOpen: drawerOpen, onMobileClose: closeDrawer }), jsxRuntime.jsx("div", { className: "flex-1 overflow-auto", children: children }), !hideBottomNav && effectiveBottomNavItems.length > 0 && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(BottomNavigationSpacer, {}), jsxRuntime.jsx(BottomNavigation, { items: effectiveBottomNavItems, activeId: effectiveActiveBottomNavId, onNavigate: handleBottomNavNavigate, showLabels: showBottomNavLabels, safeArea: safeArea })] }))] }));
+};
+
 /**
  * Two-column content layout component that provides:
  * - Sidebar column on the left (takes 1/3 of width)
@@ -7125,6 +9141,185 @@ function NotificationIndicator({ count = 0, onClick, className = '', maxCount =
     return (jsxRuntime.jsxs("button", { onClick: onClick, className: `relative bg-white p-2.5 rounded-lg text-ink-400 hover:text-ink-600 hover:bg-paper-100 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-accent-400 transition-all shadow-xs dark:bg-slate-800 dark:text-slate-400 dark:hover:text-slate-100 dark:hover:bg-slate-700 ${className}`, "aria-label": "View notifications", children: [jsxRuntime.jsx(lucideReact.Bell, { className: "h-5 w-5" }), showBadge && (jsxRuntime.jsx("span", { className: `absolute -top-1 -right-1 ${variantClasses[variant]} text-white text-xs font-semibold rounded-full h-5 min-w-5 px-1 flex items-center justify-center`, children: displayCount }))] }));
 }
 
+/**
+ * Get value from item by key path (supports nested keys like 'user.name')
+ */
+function getValueByKey(item, key) {
+    if (typeof key !== 'string') {
+        return item[key];
+    }
+    const keys = key.split('.');
+    let value = item;
+    for (const k of keys) {
+        if (value == null)
+            return undefined;
+        value = value[k];
+    }
+    return value;
+}
+/**
+ * Skeleton card for loading state
+ */
+function SkeletonCard({ className = '' }) {
+    return (jsxRuntime.jsx("div", { className: `bg-white rounded-lg border border-paper-200 p-4 animate-pulse ${className}`, children: jsxRuntime.jsxs("div", { className: "flex items-start gap-3", children: [jsxRuntime.jsx("div", { className: "w-10 h-10 rounded-full bg-paper-200 flex-shrink-0" }), jsxRuntime.jsxs("div", { className: "flex-1 min-w-0", children: [jsxRuntime.jsx("div", { className: "h-5 bg-paper-200 rounded w-3/4 mb-2" }), jsxRuntime.jsx("div", { className: "h-4 bg-paper-100 rounded w-1/2 mb-3" }), jsxRuntime.jsxs("div", { className: "space-y-2", children: [jsxRuntime.jsx("div", { className: "h-3 bg-paper-100 rounded w-2/3" }), jsxRuntime.jsx("div", { className: "h-3 bg-paper-100 rounded w-1/2" })] })] }), jsxRuntime.jsx("div", { className: "h-6 w-16 bg-paper-200 rounded-full" })] }) }));
+}
+/**
+ * DataTableCardView - Mobile-friendly card view for data tables
+ *
+ * Renders data as cards instead of table rows, optimized for touch interaction.
+ * Automatically uses column render functions for consistent data display.
+ *
+ * @example Basic usage
+ * ```tsx
+ * <DataTableCardView
+ *   data={users}
+ *   columns={columns}
+ *   cardConfig={{
+ *     titleKey: 'name',
+ *     subtitleKey: 'email',
+ *     metadataKeys: ['department', 'role'],
+ *     badgeKey: 'status',
+ *   }}
+ *   onCardClick={(user) => navigate(`/users/${user.id}`)}
+ * />
+ * ```
+ *
+ * @example With selection
+ * ```tsx
+ * <DataTableCardView
+ *   data={orders}
+ *   columns={columns}
+ *   cardConfig={{
+ *     titleKey: 'orderNumber',
+ *     subtitleKey: 'customer',
+ *     badgeKey: 'status',
+ *   }}
+ *   selectable
+ *   selectedRows={selectedOrders}
+ *   onSelectionChange={setSelectedOrders}
+ * />
+ * ```
+ */
+function DataTableCardView({ data, columns, cardConfig, loading = false, loadingRows = 5, emptyMessage = 'No items to display', onCardClick, onCardLongPress, selectable = false, selectedRows = new Set(), onSelectionChange, keyExtractor = (row) => String(row.id), actions, onEdit, onDelete, className = '', cardClassName = '', gap = 'md', }) {
+    const gapClasses = {
+        sm: 'gap-2',
+        md: 'gap-3',
+        lg: 'gap-4',
+    };
+    // Find column by key to use its render function
+    const getColumn = (key) => {
+        return columns.find(col => col.key === key);
+    };
+    // Render a value using column's render function if available
+    const renderValue = (item, key) => {
+        const column = getColumn(key);
+        const value = getValueByKey(item, key);
+        if (column?.render) {
+            return column.render(item, value);
+        }
+        if (value == null)
+            return '-';
+        if (typeof value === 'boolean')
+            return value ? 'Yes' : 'No';
+        if (value instanceof Date)
+            return value.toLocaleDateString();
+        return String(value);
+    };
+    // Handle card selection toggle
+    const handleSelectionToggle = (item, event) => {
+        event.stopPropagation();
+        const key = keyExtractor(item);
+        const newSelected = new Set(selectedRows);
+        if (newSelected.has(key)) {
+            newSelected.delete(key);
+        }
+        else {
+            newSelected.add(key);
+        }
+        onSelectionChange?.(Array.from(newSelected));
+    };
+    // Handle card click
+    const handleCardClick = (item) => {
+        if (selectable && selectedRows.size > 0) {
+            // If in selection mode, toggle selection instead
+            const key = keyExtractor(item);
+            const newSelected = new Set(selectedRows);
+            if (newSelected.has(key)) {
+                newSelected.delete(key);
+            }
+            else {
+                newSelected.add(key);
+            }
+            onSelectionChange?.(Array.from(newSelected));
+        }
+        else {
+            onCardClick?.(item);
+        }
+    };
+    // Handle long press for context actions
+    const handleLongPress = (item, event) => {
+        onCardLongPress?.(item, event);
+    };
+    // Loading state
+    if (loading) {
+        return (jsxRuntime.jsx("div", { className: `flex flex-col ${gapClasses[gap]} ${className}`, children: Array.from({ length: loadingRows }).map((_, i) => (jsxRuntime.jsx(SkeletonCard, { className: cardClassName }, i))) }));
+    }
+    // Empty state
+    if (data.length === 0) {
+        return (jsxRuntime.jsx("div", { className: `flex items-center justify-center py-12 px-4 ${className}`, children: jsxRuntime.jsx("p", { className: "text-ink-500 text-center", children: emptyMessage }) }));
+    }
+    // Determine default card config if not provided
+    const config = cardConfig || {
+        titleKey: columns[0]?.key || 'id',
+        subtitleKey: columns[1]?.key,
+        metadataKeys: columns.slice(2, 5).map(c => c.key),
+    };
+    return (jsxRuntime.jsx("div", { className: `flex flex-col ${gapClasses[gap]} ${className}`, children: data.map((item) => {
+            const key = keyExtractor(item);
+            const isSelected = selectedRows.has(key);
+            // Custom card render
+            if (config.renderCard) {
+                return (jsxRuntime.jsx("div", { onClick: () => handleCardClick(item), onContextMenu: (e) => {
+                        e.preventDefault();
+                        handleLongPress(item, e);
+                    }, className: `
+                cursor-pointer transition-all duration-200
+                ${isSelected ? 'ring-2 ring-accent-500' : ''}
+                ${cardClassName}
+              `, children: config.renderCard(item, columns) }, key));
+            }
+            // Default card layout
+            const titleColumn = getColumn(config.titleKey);
+            const titleValue = getValueByKey(item, config.titleKey);
+            return (jsxRuntime.jsx("div", { onClick: () => handleCardClick(item), onContextMenu: (e) => {
+                    e.preventDefault();
+                    handleLongPress(item, e);
+                }, className: `
+              bg-white rounded-lg border border-paper-200 p-4
+              transition-all duration-200 cursor-pointer
+              active:scale-[0.98] active:bg-paper-50
+              ${isSelected ? 'ring-2 ring-accent-500 bg-accent-50/30' : 'hover:shadow-md hover:border-paper-300'}
+              ${cardClassName}
+            `, children: jsxRuntime.jsxs("div", { className: "flex items-start gap-3", children: [selectable && (jsxRuntime.jsx("div", { className: "flex-shrink-0 pt-0.5", onClick: (e) => handleSelectionToggle(item, e), children: jsxRuntime.jsx(Checkbox, { checked: isSelected, onChange: () => { } }) })), config.avatarKey && (jsxRuntime.jsx("div", { className: "flex-shrink-0", children: (() => {
+                                const avatarValue = getValueByKey(item, config.avatarKey);
+                                if (typeof avatarValue === 'string' && avatarValue.startsWith('http')) {
+                                    return (jsxRuntime.jsx("img", { src: avatarValue, alt: "", className: "w-10 h-10 rounded-full object-cover" }));
+                                }
+                                // Render initials or placeholder
+                                const initials = String(titleValue || '').slice(0, 2).toUpperCase();
+                                return (jsxRuntime.jsx("div", { className: "w-10 h-10 rounded-full bg-accent-100 flex items-center justify-center text-accent-700 font-medium text-sm", children: initials }));
+                            })() })), jsxRuntime.jsxs("div", { className: "flex-1 min-w-0", children: [jsxRuntime.jsx("div", { className: "font-medium text-ink-900 truncate", children: titleColumn?.render
+                                        ? titleColumn.render(item, titleValue)
+                                        : String(titleValue || '-') }), config.subtitleKey && (jsxRuntime.jsx("div", { className: "text-sm text-ink-500 truncate mt-0.5", children: renderValue(item, config.subtitleKey) })), config.metadataKeys && config.metadataKeys.length > 0 && (jsxRuntime.jsx("div", { className: "mt-2 space-y-1", children: config.metadataKeys.map((metaKey) => {
+                                        const column = getColumn(metaKey);
+                                        return (jsxRuntime.jsxs("div", { className: "flex items-center text-xs", children: [jsxRuntime.jsxs("span", { className: "text-ink-400 w-20 flex-shrink-0 truncate", children: [column?.header || String(metaKey), ":"] }), jsxRuntime.jsx("span", { className: "text-ink-600 truncate", children: renderValue(item, metaKey) })] }, String(metaKey)));
+                                    }) }))] }), jsxRuntime.jsxs("div", { className: "flex flex-col items-end gap-2 flex-shrink-0", children: [config.badgeKey && (jsxRuntime.jsx("div", { children: renderValue(item, config.badgeKey) })), config.showChevron && onCardClick && (jsxRuntime.jsx(lucideReact.ChevronRight, { className: "h-5 w-5 text-ink-300" })), (actions || onEdit || onDelete) && (jsxRuntime.jsx("button", { onClick: (e) => {
+                                        e.stopPropagation();
+                                        handleLongPress(item, e);
+                                    }, className: "p-1 rounded hover:bg-paper-100 text-ink-400 hover:text-ink-600 -mr-1", children: jsxRuntime.jsx(lucideReact.MoreVertical, { className: "h-5 w-5" }) }))] })] }) }, key));
+        }) }));
+}
+
 /**
  * ActionMenu - Inline dropdown menu for row actions
  */
@@ -7283,7 +9478,11 @@ function DataTable({ data, columns, loading = false, error = null, emptyMessage
 // Visual customization props
 striped = false, stripedColor, density = 'normal', rowClassName, rowHighlight, highlightedRowId, bordered = false, borderColor = 'border-paper-200', disableHover = false, hiddenColumns = [], headerClassName = '', renderEmptyState: customRenderEmptyState, resizable = false, onColumnResize, reorderable = false, onColumnReorder, virtualized = false, virtualHeight = '600px', virtualRowHeight = 60, 
 // Pagination props
-paginated = false, currentPage = 1, pageSize = 10, totalItems, onPageChange, pageSizeOptions = [10, 25, 50, 100], onPageSizeChange, showPageSizeSelector = true, }) {
+paginated = false, currentPage = 1, pageSize = 10, totalItems, onPageChange, pageSizeOptions = [10, 25, 50, 100], onPageSizeChange, showPageSizeSelector = true, 
+// Mobile view props
+mobileView = 'auto', cardConfig, cardGap = 'md', cardClassName, }) {
+    // Mobile detection for auto mode
+    const isMobileViewport = useIsMobile();
     // Column resizing state
     const [columnWidths, setColumnWidths] = React.useState({});
     const [resizingColumn, setResizingColumn] = React.useState(null);
@@ -7902,8 +10101,274 @@ paginated = false, currentPage = 1, pageSize = 10, totalItems, onPageChange, pag
             return null;
         return (jsxRuntime.jsxs("div", { className: "flex items-center justify-between mb-4 px-1", children: [jsxRuntime.jsxs("div", { className: "flex items-center gap-4", children: [showPageSizeSelector && onPageSizeChange && (jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [jsxRuntime.jsx("span", { className: "text-sm text-ink-600", children: "Show:" }), jsxRuntime.jsx(Select, { options: pageSizeSelectOptions, value: String(pageSize), onChange: (value) => onPageSizeChange?.(Number(value)) })] })), jsxRuntime.jsx("span", { className: "text-sm text-ink-600", children: effectiveTotalItems > 0 ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: ["Showing ", ((currentPage - 1) * pageSize) + 1, " - ", Math.min(currentPage * pageSize, effectiveTotalItems), " of ", effectiveTotalItems] })) : ('No items') })] }), totalPages > 1 && onPageChange && (jsxRuntime.jsx(Pagination, { currentPage: currentPage, totalPages: totalPages, onPageChange: onPageChange }))] }));
     };
+    // Determine if we should show card view
+    const shouldShowCardView = mobileView === 'card' ||
+        (mobileView === 'auto' && isMobileViewport);
+    // Card view content
+    const cardViewContent = shouldShowCardView ? (jsxRuntime.jsx(DataTableCardView, { data: data, columns: visibleColumns, cardConfig: cardConfig, loading: loading, loadingRows: loadingRows, emptyMessage: emptyMessage, onCardClick: onRowClick, onCardLongPress: (item, event) => {
+            if (enableContextMenu && allActions.length > 0) {
+                event.preventDefault();
+                const clientX = 'touches' in event ? event.touches[0].clientX : event.clientX;
+                const clientY = 'touches' in event ? event.touches[0].clientY : event.clientY;
+                setContextMenuState({
+                    isOpen: true,
+                    position: { x: clientX, y: clientY },
+                    item,
+                });
+            }
+        }, selectable: selectable, selectedRows: selectedRowsSet, onSelectionChange: onRowSelect ? (rows) => onRowSelect(rows) : undefined, keyExtractor: getRowKey, actions: allActions, onEdit: onEdit, onDelete: onDelete, className: className, cardClassName: cardClassName, gap: cardGap })) : null;
     // Render with context menu
-    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [renderPaginationControls(), finalContent, contextMenuState.isOpen && contextMenuState.item && (jsxRuntime.jsx(Menu, { items: convertActionsToMenuItems(contextMenuState.item), position: contextMenuState.position, onClose: () => setContextMenuState({ isOpen: false, position: { x: 0, y: 0 }, item: null }) }))] }));
+    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [renderPaginationControls(), shouldShowCardView ? cardViewContent : finalContent, contextMenuState.isOpen && contextMenuState.item && (jsxRuntime.jsx(Menu, { items: convertActionsToMenuItems(contextMenuState.item), position: contextMenuState.position, onClose: () => setContextMenuState({ isOpen: false, position: { x: 0, y: 0 }, item: null }) }))] }));
+}
+
+// Color mapping for action buttons
+const colorClasses = {
+    primary: 'bg-accent-500 text-white',
+    success: 'bg-success-500 text-white',
+    warning: 'bg-warning-500 text-white',
+    error: 'bg-error-500 text-white',
+    default: 'bg-paper-500 text-white',
+};
+/**
+ * SwipeActions - Touch-based swipe actions for list items
+ *
+ * Wraps any content with swipe-to-reveal actions, commonly used in mobile
+ * list items for quick actions like delete, archive, edit, etc.
+ *
+ * Features:
+ * - Left and right swipe actions
+ * - Full swipe to trigger primary action
+ * - Spring-back animation
+ * - Touch and mouse support
+ * - Customizable thresholds
+ *
+ * @example Basic delete action
+ * ```tsx
+ * <SwipeActions
+ *   leftActions={[
+ *     {
+ *       id: 'delete',
+ *       label: 'Delete',
+ *       icon: <Trash className="h-5 w-5" />,
+ *       color: 'error',
+ *       onClick: () => handleDelete(item),
+ *       primary: true,
+ *     },
+ *   ]}
+ * >
+ *   <div className="p-4 bg-white">
+ *     List item content
+ *   </div>
+ * </SwipeActions>
+ * ```
+ *
+ * @example Multiple actions on both sides
+ * ```tsx
+ * <SwipeActions
+ *   leftActions={[
+ *     { id: 'delete', label: 'Delete', icon: <Trash />, color: 'error', onClick: handleDelete },
+ *     { id: 'archive', label: 'Archive', icon: <Archive />, color: 'warning', onClick: handleArchive },
+ *   ]}
+ *   rightActions={[
+ *     { id: 'edit', label: 'Edit', icon: <Edit />, color: 'primary', onClick: handleEdit },
+ *   ]}
+ *   fullSwipe
+ * >
+ *   <ListItem />
+ * </SwipeActions>
+ * ```
+ */
+function SwipeActions({ children, leftActions = [], rightActions = [], threshold = 80, fullSwipeThreshold = 0.5, fullSwipe = false, disabled = false, onSwipeChange, className = '', }) {
+    const containerRef = React.useRef(null);
+    const contentRef = React.useRef(null);
+    // Swipe state
+    const [translateX, setTranslateX] = React.useState(0);
+    const [isDragging, setIsDragging] = React.useState(false);
+    const [activeDirection, setActiveDirection] = React.useState(null);
+    // Touch/mouse tracking
+    const startX = React.useRef(0);
+    const currentX = React.useRef(0);
+    const startTime = React.useRef(0);
+    // Calculate action widths
+    const leftActionsWidth = leftActions.length * 72; // 72px per action
+    const rightActionsWidth = rightActions.length * 72;
+    // Reset position
+    const resetPosition = React.useCallback(() => {
+        setTranslateX(0);
+        setActiveDirection(null);
+        onSwipeChange?.(null);
+    }, [onSwipeChange]);
+    // Handle touch/mouse start
+    const handleStart = React.useCallback((clientX) => {
+        if (disabled)
+            return;
+        startX.current = clientX;
+        currentX.current = clientX;
+        startTime.current = Date.now();
+        setIsDragging(true);
+    }, [disabled]);
+    // Handle touch/mouse move
+    const handleMove = React.useCallback((clientX) => {
+        if (!isDragging || disabled)
+            return;
+        const deltaX = clientX - startX.current;
+        currentX.current = clientX;
+        // Determine direction and apply resistance at boundaries
+        let newTranslateX = deltaX;
+        // Swiping left (reveals left actions on right side)
+        if (deltaX < 0) {
+            if (leftActions.length === 0) {
+                newTranslateX = deltaX * 0.2; // Heavy resistance if no actions
+            }
+            else {
+                const maxSwipe = fullSwipe
+                    ? -(containerRef.current?.offsetWidth || 300)
+                    : -leftActionsWidth;
+                newTranslateX = Math.max(maxSwipe, deltaX);
+                // Apply resistance past the action buttons
+                if (newTranslateX < -leftActionsWidth) {
+                    const overSwipe = newTranslateX + leftActionsWidth;
+                    newTranslateX = -leftActionsWidth + overSwipe * 0.3;
+                }
+            }
+            setActiveDirection('left');
+            onSwipeChange?.('left');
+        }
+        // Swiping right (reveals right actions on left side)
+        else if (deltaX > 0) {
+            if (rightActions.length === 0) {
+                newTranslateX = deltaX * 0.2; // Heavy resistance if no actions
+            }
+            else {
+                const maxSwipe = fullSwipe
+                    ? (containerRef.current?.offsetWidth || 300)
+                    : rightActionsWidth;
+                newTranslateX = Math.min(maxSwipe, deltaX);
+                // Apply resistance past the action buttons
+                if (newTranslateX > rightActionsWidth) {
+                    const overSwipe = newTranslateX - rightActionsWidth;
+                    newTranslateX = rightActionsWidth + overSwipe * 0.3;
+                }
+            }
+            setActiveDirection('right');
+            onSwipeChange?.('right');
+        }
+        setTranslateX(newTranslateX);
+    }, [isDragging, disabled, leftActions.length, rightActions.length, leftActionsWidth, rightActionsWidth, fullSwipe, onSwipeChange]);
+    // Handle touch/mouse end
+    const handleEnd = React.useCallback(() => {
+        if (!isDragging)
+            return;
+        setIsDragging(false);
+        const deltaX = currentX.current - startX.current;
+        const velocity = Math.abs(deltaX) / (Date.now() - startTime.current);
+        const containerWidth = containerRef.current?.offsetWidth || 300;
+        // Check for full swipe trigger
+        if (fullSwipe) {
+            const swipePercentage = Math.abs(translateX) / containerWidth;
+            if (swipePercentage >= fullSwipeThreshold || velocity > 0.5) {
+                // Find primary action and trigger it
+                if (translateX < 0 && leftActions.length > 0) {
+                    const primaryAction = leftActions.find(a => a.primary) || leftActions[0];
+                    primaryAction.onClick();
+                    resetPosition();
+                    return;
+                }
+                else if (translateX > 0 && rightActions.length > 0) {
+                    const primaryAction = rightActions.find(a => a.primary) || rightActions[0];
+                    primaryAction.onClick();
+                    resetPosition();
+                    return;
+                }
+            }
+        }
+        // Snap to open or closed position
+        if (Math.abs(translateX) >= threshold || velocity > 0.3) {
+            // Snap open
+            if (translateX < 0 && leftActions.length > 0) {
+                setTranslateX(-leftActionsWidth);
+                setActiveDirection('left');
+                onSwipeChange?.('left');
+            }
+            else if (translateX > 0 && rightActions.length > 0) {
+                setTranslateX(rightActionsWidth);
+                setActiveDirection('right');
+                onSwipeChange?.('right');
+            }
+            else {
+                resetPosition();
+            }
+        }
+        else {
+            // Snap closed
+            resetPosition();
+        }
+    }, [isDragging, translateX, threshold, fullSwipe, fullSwipeThreshold, leftActions, rightActions, leftActionsWidth, rightActionsWidth, resetPosition, onSwipeChange]);
+    // Touch event handlers
+    const handleTouchStart = (e) => {
+        handleStart(e.touches[0].clientX);
+    };
+    const handleTouchMove = (e) => {
+        handleMove(e.touches[0].clientX);
+    };
+    const handleTouchEnd = () => {
+        handleEnd();
+    };
+    // Mouse event handlers (for testing/desktop)
+    const handleMouseDown = (e) => {
+        handleStart(e.clientX);
+    };
+    const handleMouseMove = (e) => {
+        handleMove(e.clientX);
+    };
+    const handleMouseUp = () => {
+        handleEnd();
+    };
+    // Close on outside click
+    React.useEffect(() => {
+        if (activeDirection === null)
+            return;
+        const handleClickOutside = (e) => {
+            if (containerRef.current && !containerRef.current.contains(e.target)) {
+                resetPosition();
+            }
+        };
+        document.addEventListener('mousedown', handleClickOutside);
+        return () => document.removeEventListener('mousedown', handleClickOutside);
+    }, [activeDirection, resetPosition]);
+    // Handle mouse leave during drag
+    React.useEffect(() => {
+        if (!isDragging)
+            return;
+        const handleMouseLeave = () => {
+            handleEnd();
+        };
+        document.addEventListener('mouseup', handleMouseLeave);
+        return () => document.removeEventListener('mouseup', handleMouseLeave);
+    }, [isDragging, handleEnd]);
+    // Render action button
+    const renderActionButton = (action) => {
+        const colorClass = colorClasses[action.color || 'default'];
+        return (jsxRuntime.jsxs("button", { onClick: (e) => {
+                e.stopPropagation();
+                action.onClick();
+                resetPosition();
+            }, className: `
+          flex flex-col items-center justify-center
+          w-18 h-full min-w-[72px]
+          ${colorClass}
+          transition-transform duration-150
+        `, style: {
+                transform: isDragging ? 'scale(1)' : 'scale(1)',
+            }, children: [action.icon && (jsxRuntime.jsx("div", { className: "mb-1", children: action.icon })), jsxRuntime.jsx("span", { className: "text-xs font-medium", children: action.label })] }, action.id));
+    };
+    return (jsxRuntime.jsxs("div", { ref: containerRef, className: `relative overflow-hidden ${className}`, onTouchStart: handleTouchStart, onTouchMove: handleTouchMove, onTouchEnd: handleTouchEnd, onMouseDown: handleMouseDown, onMouseMove: isDragging ? handleMouseMove : undefined, onMouseUp: handleMouseUp, onMouseLeave: isDragging ? handleEnd : undefined, children: [rightActions.length > 0 && (jsxRuntime.jsx("div", { className: "absolute left-0 top-0 bottom-0 flex", style: { width: rightActionsWidth }, children: rightActions.map((action) => renderActionButton(action)) })), leftActions.length > 0 && (jsxRuntime.jsx("div", { className: "absolute right-0 top-0 bottom-0 flex", style: { width: leftActionsWidth }, children: leftActions.map((action) => renderActionButton(action)) })), jsxRuntime.jsx("div", { ref: contentRef, className: `
+          relative bg-white
+          ${isDragging ? '' : 'transition-transform duration-200 ease-out'}
+        `, style: {
+                    transform: `translateX(${translateX}px)`,
+                    touchAction: 'pan-y', // Allow vertical scrolling
+                }, children: children })] }));
 }
 
 var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
@@ -51391,6 +53856,171 @@ function PageLayout({ title, description, children, className = '', headerConten
     return (jsxRuntime.jsxs(Page, { padding: "none", maxWidth: maxWidth, fixed: fixed, children: [headerContent, jsxRuntime.jsxs("div", { className: `${paddingClasses} ${maxWidthClasses[maxWidth]} mx-auto ${className}`, children: [jsxRuntime.jsxs("div", { className: "mb-8", children: [jsxRuntime.jsx("h1", { className: "text-3xl font-bold text-ink-900 mb-2", children: title }), description && (jsxRuntime.jsx("p", { className: "text-ink-600", children: description }))] }), children] })] }));
 }
 
+/**
+ * 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} />}
+ * />
+ * ```
+ */
+function PageHeader({ title, subtitle, breadcrumbs, showHomeBreadcrumb = true, actions, rightContent, belowTitle, className = '', sticky = false, backButton, }) {
+    const variantStyles = {
+        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 (jsxRuntime.jsx("div", { className: `
+        bg-white border-b border-paper-200
+        ${sticky ? 'sticky top-0 z-40' : ''}
+        ${className}
+      `, children: jsxRuntime.jsxs("div", { className: "px-6 py-4", children: [breadcrumbs && breadcrumbs.length > 0 && (jsxRuntime.jsx("div", { className: "mb-3", children: jsxRuntime.jsx(Breadcrumbs, { items: breadcrumbs, showHome: showHomeBreadcrumb }) })), backButton && (jsxRuntime.jsx("div", { className: "mb-3", children: jsxRuntime.jsxs("button", { onClick: backButton.onClick, className: "inline-flex items-center gap-1.5 text-sm text-ink-500 hover:text-ink-700 transition-colors", children: [jsxRuntime.jsx("svg", { className: "h-4 w-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: jsxRuntime.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M15 19l-7-7 7-7" }) }), jsxRuntime.jsx("span", { children: backButton.label || 'Back' })] }) })), jsxRuntime.jsxs("div", { className: "flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4", children: [jsxRuntime.jsxs("div", { className: "min-w-0 flex-1", children: [jsxRuntime.jsx("h1", { className: "text-2xl font-bold text-ink-900 truncate", children: title }), subtitle && (jsxRuntime.jsx("p", { className: "mt-1 text-sm text-ink-500", children: subtitle }))] }), (actions || rightContent) && (jsxRuntime.jsxs("div", { className: "flex items-center gap-2 flex-shrink-0", children: [rightContent, actions && actions.map((action) => (jsxRuntime.jsxs("button", { 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' : ''}
+                  `, children: [action.loading ? (jsxRuntime.jsxs("svg", { className: "h-4 w-4 animate-spin", fill: "none", viewBox: "0 0 24 24", children: [jsxRuntime.jsx("circle", { className: "opacity-25", cx: "12", cy: "12", r: "10", stroke: "currentColor", strokeWidth: "4" }), jsxRuntime.jsx("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" })] })) : action.icon ? (jsxRuntime.jsx("span", { className: "h-4 w-4", children: action.icon })) : null, jsxRuntime.jsx("span", { children: action.label })] }, action.id)))] }))] }), belowTitle && (jsxRuntime.jsx("div", { className: "mt-4", children: belowTitle }))] }) }));
+}
+
+/**
+ * ActionBar - Flexible toolbar for page-level and contextual actions
+ *
+ * A versatile action container that can be used for:
+ * - Bulk actions when rows are selected
+ * - Page-level actions and controls
+ * - Form action buttons (Save/Cancel)
+ * - Contextual toolbars
+ *
+ * @example Basic bulk actions bar
+ * ```tsx
+ * <ActionBar
+ *   visible={selectedIds.length > 0}
+ *   leftContent={<Text weight="medium">{selectedIds.length} selected</Text>}
+ *   actions={[
+ *     { id: 'export', label: 'Export', icon: <Download />, onClick: handleExport },
+ *     { id: 'delete', label: 'Delete', icon: <Trash />, onClick: handleDelete, variant: 'danger' },
+ *   ]}
+ *   onDismiss={() => setSelectedIds([])}
+ *   showDismiss
+ * />
+ * ```
+ *
+ * @example Sticky bottom form actions
+ * ```tsx
+ * <ActionBar
+ *   position="bottom"
+ *   sticky
+ *   rightContent={
+ *     <>
+ *       <Button variant="ghost" onClick={handleCancel}>Cancel</Button>
+ *       <Button variant="primary" onClick={handleSave} loading={isSaving}>Save Changes</Button>
+ *     </>
+ *   }
+ * />
+ * ```
+ *
+ * @example Info bar with center content
+ * ```tsx
+ * <ActionBar
+ *   variant="info"
+ *   centerContent={
+ *     <Text size="sm">Showing results for "search term" - 42 items found</Text>
+ *   }
+ *   onDismiss={clearSearch}
+ *   showDismiss
+ * />
+ * ```
+ */
+function ActionBar({ leftContent, centerContent, rightContent, actions, position = 'top', sticky = false, visible = true, onDismiss, showDismiss = false, className = '', variant = 'default', compact = false, }) {
+    if (!visible) {
+        return null;
+    }
+    const variantStyles = {
+        default: 'bg-white border-paper-200',
+        primary: 'bg-accent-50 border-accent-200',
+        warning: 'bg-warning-50 border-warning-200',
+        info: 'bg-blue-50 border-blue-200',
+    };
+    const buttonVariantStyles = {
+        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',
+    };
+    const positionStyles = {
+        top: sticky ? 'sticky top-0 z-40 border-b' : 'border-b',
+        bottom: sticky ? 'sticky bottom-0 z-40 border-t' : 'border-t',
+    };
+    return (jsxRuntime.jsx("div", { className: `
+        ${variantStyles[variant]}
+        ${positionStyles[position]}
+        ${compact ? 'px-4 py-2' : 'px-6 py-3'}
+        ${className}
+      `, role: "toolbar", "aria-label": "Action bar", children: jsxRuntime.jsxs("div", { className: "flex items-center justify-between gap-4", children: [jsxRuntime.jsxs("div", { className: "flex items-center gap-3 min-w-0 flex-shrink-0", children: [showDismiss && onDismiss && (jsxRuntime.jsx("button", { onClick: onDismiss, className: "\n                flex items-center justify-center\n                w-8 h-8 rounded-full\n                text-ink-400 hover:text-ink-600\n                hover:bg-paper-100\n                transition-colors\n              ", "aria-label": "Dismiss", children: jsxRuntime.jsx(lucideReact.X, { className: "h-4 w-4" }) })), leftContent] }), centerContent && (jsxRuntime.jsx("div", { className: "flex-1 flex items-center justify-center min-w-0", children: centerContent })), jsxRuntime.jsxs("div", { className: "flex items-center gap-2 flex-shrink-0", children: [rightContent, actions && actions.map((action) => (jsxRuntime.jsxs("button", { onClick: action.onClick, disabled: action.disabled || action.loading, className: `
+                inline-flex items-center justify-center gap-2
+                px-3 py-1.5 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
+                ${buttonVariantStyles[action.variant || 'secondary']}
+              `, children: [action.loading ? (jsxRuntime.jsxs("svg", { className: "h-4 w-4 animate-spin", fill: "none", viewBox: "0 0 24 24", children: [jsxRuntime.jsx("circle", { className: "opacity-25", cx: "12", cy: "12", r: "10", stroke: "currentColor", strokeWidth: "4" }), jsxRuntime.jsx("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" })] })) : action.icon ? (jsxRuntime.jsx("span", { className: "h-4 w-4", children: action.icon })) : null, jsxRuntime.jsx("span", { children: action.label })] }, action.id)))] })] }) }));
+}
+/**
+ * ActionBar.Left - Semantic wrapper for left content
+ */
+function ActionBarLeft({ children }) {
+    return jsxRuntime.jsx(jsxRuntime.Fragment, { children: children });
+}
+/**
+ * ActionBar.Center - Semantic wrapper for center content
+ */
+function ActionBarCenter({ children }) {
+    return jsxRuntime.jsx(jsxRuntime.Fragment, { children: children });
+}
+/**
+ * ActionBar.Right - Semantic wrapper for right content
+ */
+function ActionBarRight({ children }) {
+    return jsxRuntime.jsx(jsxRuntime.Fragment, { children: children });
+}
+
 const sizeClasses = {
     sm: 'max-w-sm',
     md: 'max-w-md',
@@ -51983,7 +54613,210 @@ function useColumnReorder(initialColumns, options = {}) {
     };
 }
 
+/**
+ * Default context value (SSR-safe defaults)
+ */
+const defaultContextValue = {
+    isMobile: false,
+    isTablet: false,
+    isDesktop: true,
+    isTouchDevice: false,
+    breakpoint: 'lg',
+    orientation: 'landscape',
+    viewport: { width: 1024, height: 768 },
+    safeAreaInsets: { top: 0, right: 0, bottom: 0, left: 0 },
+    useMobileUI: false,
+};
+/**
+ * Mobile context
+ */
+const MobileContext = React.createContext(defaultContextValue);
+/**
+ * MobileProvider - Provides responsive state to the entire application
+ *
+ * Wrap your application with MobileProvider to enable auto-responsive
+ * behavior in notebook-ui components.
+ *
+ * @example Basic usage
+ * ```tsx
+ * import { MobileProvider } from 'notebook-ui';
+ *
+ * function App() {
+ *   return (
+ *     <MobileProvider>
+ *       <YourApplication />
+ *     </MobileProvider>
+ *   );
+ * }
+ * ```
+ *
+ * @example Force mobile UI for testing
+ * ```tsx
+ * <MobileProvider forceMobileUI>
+ *   <YourApplication />
+ * </MobileProvider>
+ * ```
+ */
+function MobileProvider({ children, forceMobileUI = false, forceDesktopUI = false, }) {
+    const isMobile = useIsMobile();
+    const isTablet = useIsTablet();
+    const isDesktop = useIsDesktop();
+    const isTouchDevice = useIsTouchDevice();
+    const breakpoint = useBreakpoint();
+    const orientation = useOrientation();
+    const viewport = useViewportSize();
+    const safeAreaInsets = useSafeAreaInsets();
+    const value = React.useMemo(() => {
+        // Calculate effective mobile UI state
+        let useMobileUI = isMobile || isTouchDevice;
+        // Apply force overrides
+        if (forceMobileUI) {
+            useMobileUI = true;
+        }
+        else if (forceDesktopUI) {
+            useMobileUI = false;
+        }
+        return {
+            isMobile: forceMobileUI ? true : forceDesktopUI ? false : isMobile,
+            isTablet: forceMobileUI || forceDesktopUI ? false : isTablet,
+            isDesktop: forceDesktopUI ? true : forceMobileUI ? false : isDesktop,
+            isTouchDevice,
+            breakpoint: forceMobileUI ? 'xs' : forceDesktopUI ? 'lg' : breakpoint,
+            orientation,
+            viewport,
+            safeAreaInsets,
+            useMobileUI,
+        };
+    }, [
+        isMobile,
+        isTablet,
+        isDesktop,
+        isTouchDevice,
+        breakpoint,
+        orientation,
+        viewport,
+        safeAreaInsets,
+        forceMobileUI,
+        forceDesktopUI,
+    ]);
+    return (jsxRuntime.jsx(MobileContext.Provider, { value: value, children: children }));
+}
+/**
+ * useMobileContext - Hook to access mobile responsive state
+ *
+ * Must be used within a MobileProvider. Returns comprehensive
+ * responsive state for making UI decisions.
+ *
+ * @example
+ * ```tsx
+ * function MyComponent() {
+ *   const { isMobile, useMobileUI, breakpoint } = useMobileContext();
+ *
+ *   return useMobileUI ? <MobileView /> : <DesktopView />;
+ * }
+ * ```
+ */
+function useMobileContext() {
+    const context = React.useContext(MobileContext);
+    if (context === undefined) {
+        // Return default value if used outside provider (graceful degradation)
+        console.warn('useMobileContext was used outside of MobileProvider. ' +
+            'Wrap your app with <MobileProvider> for full mobile support.');
+        return defaultContextValue;
+    }
+    return context;
+}
+/**
+ * withMobileContext - HOC to inject mobile context as props
+ *
+ * For class components or when you prefer props over hooks.
+ *
+ * @example
+ * ```tsx
+ * interface Props {
+ *   mobile: MobileContextValue;
+ * }
+ *
+ * class MyComponent extends React.Component<Props> {
+ *   render() {
+ *     const { isMobile } = this.props.mobile;
+ *     return isMobile ? <Mobile /> : <Desktop />;
+ *   }
+ * }
+ *
+ * export default withMobileContext(MyComponent);
+ * ```
+ */
+function withMobileContext(Component) {
+    const displayName = Component.displayName || Component.name || 'Component';
+    const WrappedComponent = (props) => {
+        const mobile = useMobileContext();
+        return jsxRuntime.jsx(Component, { ...props, mobile: mobile });
+    };
+    WrappedComponent.displayName = `withMobileContext(${displayName})`;
+    return WrappedComponent;
+}
+/**
+ * MobileOnly - Renders children only on mobile devices
+ *
+ * @example
+ * ```tsx
+ * <MobileOnly>
+ *   <BottomNavigation items={navItems} />
+ * </MobileOnly>
+ * ```
+ */
+function MobileOnly({ children }) {
+    const { useMobileUI } = useMobileContext();
+    return useMobileUI ? jsxRuntime.jsx(jsxRuntime.Fragment, { children: children }) : null;
+}
+/**
+ * DesktopOnly - Renders children only on desktop devices
+ *
+ * @example
+ * ```tsx
+ * <DesktopOnly>
+ *   <Sidebar items={navItems} />
+ * </DesktopOnly>
+ * ```
+ */
+function DesktopOnly({ children }) {
+    const { useMobileUI } = useMobileContext();
+    return useMobileUI ? null : jsxRuntime.jsx(jsxRuntime.Fragment, { children: children });
+}
+/**
+ * Responsive - Renders different content based on device type
+ *
+ * @example
+ * ```tsx
+ * <Responsive
+ *   mobile={<MobileNavigation />}
+ *   tablet={<TabletNavigation />}
+ *   desktop={<DesktopNavigation />}
+ * />
+ * ```
+ */
+function Responsive({ mobile, tablet, desktop, }) {
+    const { isMobile, isTablet, isDesktop } = useMobileContext();
+    if (isMobile && mobile)
+        return jsxRuntime.jsx(jsxRuntime.Fragment, { children: mobile });
+    if (isTablet && tablet)
+        return jsxRuntime.jsx(jsxRuntime.Fragment, { children: tablet });
+    if (isDesktop && desktop)
+        return jsxRuntime.jsx(jsxRuntime.Fragment, { children: desktop });
+    // Fallback: desktop -> tablet -> mobile
+    if (isDesktop)
+        return jsxRuntime.jsx(jsxRuntime.Fragment, { children: desktop || tablet || mobile });
+    if (isTablet)
+        return jsxRuntime.jsx(jsxRuntime.Fragment, { children: tablet || mobile || desktop });
+    return jsxRuntime.jsx(jsxRuntime.Fragment, { children: mobile || tablet || desktop });
+}
+
 exports.Accordion = Accordion;
+exports.ActionBar = ActionBar;
+exports.ActionBarCenter = ActionBarCenter;
+exports.ActionBarLeft = ActionBarLeft;
+exports.ActionBarRight = ActionBarRight;
 exports.ActionButton = ActionButton;
 exports.AdminModal = AdminModal;
 exports.Alert = Alert;
@@ -51991,7 +54824,10 @@ exports.AlertDialog = AlertDialog;
 exports.AppLayout = AppLayout;
 exports.Autocomplete = Autocomplete;
 exports.Avatar = Avatar;
+exports.BREAKPOINTS = BREAKPOINTS;
 exports.Badge = Badge;
+exports.BottomNavigation = BottomNavigation;
+exports.BottomNavigationSpacer = BottomNavigationSpacer;
 exports.BottomSheet = BottomSheet;
 exports.Box = Box;
 exports.Breadcrumbs = Breadcrumbs;
@@ -52007,7 +54843,9 @@ exports.CardTitle = CardTitle;
 exports.CardView = CardView;
 exports.Carousel = Carousel;
 exports.Checkbox = Checkbox;
+exports.CheckboxList = CheckboxList;
 exports.Chip = Chip;
+exports.ChipGroup = ChipGroup;
 exports.Collapsible = Collapsible;
 exports.ColorPicker = ColorPicker;
 exports.Combobox = Combobox;
@@ -52022,10 +54860,12 @@ exports.Dashboard = Dashboard;
 exports.DashboardContent = DashboardContent;
 exports.DashboardHeader = DashboardHeader;
 exports.DataTable = DataTable;
+exports.DataTableCardView = DataTableCardView;
 exports.DateDisplay = DateDisplay;
 exports.DatePicker = DatePicker;
 exports.DateRangePicker = DateRangePicker;
 exports.DateTimePicker = DateTimePicker;
+exports.DesktopOnly = DesktopOnly;
 exports.Drawer = Drawer;
 exports.DrawerFooter = DrawerFooter;
 exports.DropZone = DropZone;
@@ -52033,6 +54873,9 @@ exports.Dropdown = Dropdown;
 exports.DropdownTrigger = DropdownTrigger;
 exports.EmptyState = EmptyState;
 exports.ErrorBoundary = ErrorBoundary;
+exports.ExpandablePanel = ExpandablePanel;
+exports.ExpandablePanelContainer = ExpandablePanelContainer;
+exports.ExpandablePanelSpacer = ExpandablePanelSpacer;
 exports.ExpandableRowButton = ExpandableRowButton;
 exports.ExpandableToolbar = ExpandableToolbar;
 exports.ExpandedRowEditForm = ExpandedRowEditForm;
@@ -52042,6 +54885,7 @@ exports.FileUpload = FileUpload;
 exports.FilterBar = FilterBar;
 exports.FilterControls = FilterControls;
 exports.FilterStatusBanner = FilterStatusBanner;
+exports.FloatingActionButton = FloatingActionButton;
 exports.Form = Form;
 exports.FormContext = FormContext;
 exports.FormControl = FormControl;
@@ -52061,6 +54905,11 @@ exports.MarkdownEditor = MarkdownEditor;
 exports.MaskedInput = MaskedInput;
 exports.Menu = Menu;
 exports.MenuDivider = MenuDivider;
+exports.MobileHeader = MobileHeader;
+exports.MobileHeaderSpacer = MobileHeaderSpacer;
+exports.MobileLayout = MobileLayout;
+exports.MobileOnly = MobileOnly;
+exports.MobileProvider = MobileProvider;
 exports.Modal = Modal;
 exports.ModalFooter = ModalFooter;
 exports.MultiSelect = MultiSelect;
@@ -52068,24 +54917,28 @@ exports.NotificationBar = NotificationBar;
 exports.NotificationIndicator = NotificationIndicator;
 exports.NumberInput = NumberInput;
 exports.Page = Page;
+exports.PageHeader = PageHeader;
 exports.PageLayout = PageLayout;
 exports.PageNavigation = PageNavigation;
 exports.Pagination = Pagination;
 exports.PasswordInput = PasswordInput;
 exports.Popover = Popover;
 exports.Progress = Progress;
+exports.PullToRefresh = PullToRefresh;
 exports.QueryTransparency = QueryTransparency;
 exports.RadioGroup = RadioGroup;
 exports.Rating = Rating;
+exports.Responsive = Responsive;
 exports.RichTextEditor = RichTextEditor;
 exports.SearchBar = SearchBar;
+exports.SearchableList = SearchableList;
 exports.Select = Select;
 exports.Separator = Separator;
 exports.Show = Show;
 exports.Sidebar = Sidebar;
 exports.SidebarGroup = SidebarGroup;
 exports.Skeleton = Skeleton;
-exports.SkeletonCard = SkeletonCard;
+exports.SkeletonCard = SkeletonCard$1;
 exports.SkeletonTable = SkeletonTable;
 exports.Slider = Slider;
 exports.Spreadsheet = Spreadsheet;
@@ -52099,6 +54952,7 @@ exports.StatusBadge = StatusBadge;
 exports.StatusBar = StatusBar;
 exports.StepIndicator = StepIndicator;
 exports.Stepper = Stepper;
+exports.SwipeActions = SwipeActions;
 exports.Switch = Switch;
 exports.Tabs = Tabs;
 exports.Text = Text;
@@ -52133,10 +54987,25 @@ exports.reorderArray = reorderArray;
 exports.saveColumnOrder = saveColumnOrder;
 exports.saveColumnWidths = saveColumnWidths;
 exports.statusManager = statusManager;
+exports.useBreakpoint = useBreakpoint;
+exports.useBreakpointValue = useBreakpointValue;
 exports.useColumnReorder = useColumnReorder;
 exports.useColumnResize = useColumnResize;
 exports.useCommandPalette = useCommandPalette;
 exports.useConfirmDialog = useConfirmDialog;
+exports.useFABScroll = useFABScroll;
 exports.useFormContext = useFormContext;
+exports.useIsDesktop = useIsDesktop;
+exports.useIsMobile = useIsMobile;
+exports.useIsTablet = useIsTablet;
+exports.useIsTouchDevice = useIsTouchDevice;
 exports.useMediaQuery = useMediaQuery;
+exports.useMobileContext = useMobileContext;
+exports.useOrientation = useOrientation;
+exports.usePrefersMobile = usePrefersMobile;
+exports.usePullToRefresh = usePullToRefresh;
+exports.useResponsiveCallback = useResponsiveCallback;
+exports.useSafeAreaInsets = useSafeAreaInsets;
+exports.useViewportSize = useViewportSize;
+exports.withMobileContext = withMobileContext;
 //# sourceMappingURL=index.js.map