directix 1.4.0 → 1.5.0

package/dist/index.d.ts

@@ -78,6 +78,23 @@ export declare interface ComposableThrottledFunction<T extends (...args: any[])
     cancel: () => void;
 }
 
+/**
+ * Configure permission directive
+ */
+export declare function configurePermission(config: PermissionConfig): void;
+
+/**
+ * Context menu item
+ */
+export declare interface ContextMenuItem {
+    label: string;
+    handler?: () => void;
+    disabled?: boolean;
+    divider?: boolean;
+    icon?: string;
+    class?: string;
+}
+
 /**
  * Countdown complete callback
  */
@@ -105,6 +122,11 @@ export declare interface CountdownTime {
     total: number;
 }
 
+/**
+ * Easing type
+ */
+export declare type CounterEasing = 'linear' | 'easeOut' | 'easeInOut' | 'easeOutQuart' | 'easeOutExpo';
+
 /**
  * Create a capitalizing function with preset options
  *
@@ -448,6 +470,11 @@ export declare const Directix: Plugin_2;
  */
 export declare type DraggableAxis = 'x' | 'y' | 'both';
 
+/**
+ * Export format type
+ */
+export declare type ExportFormat = 'csv' | 'json' | 'txt' | 'html';
+
 /**
  * Format number to money string
  */
@@ -485,6 +512,11 @@ export declare function generateId(prefix?: string): string;
  */
 export declare function get<T = any>(obj: Record<string, any>, path: string, defaultValue?: T): T;
 
+/**
+ * Get current configuration
+ */
+export declare function getPermissionConfig(): PermissionConfig | null;
+
 /**
  * Get current Vue version
  */
@@ -599,11 +631,44 @@ export declare function isVue3(): boolean;
  */
 export declare type ItemSizeFunction = (index: number) => number;
 
+/**
+ * Lazy loading state
+ */
+export declare type LazyState = 'pending' | 'loading' | 'loaded' | 'error';
+
+/**
+ * Lottie animation state
+ */
+export declare type LottieAnimationState = 'playing' | 'paused' | 'stopped';
+
 /**
  * Transform text to lowercase
  */
 export declare function lowercaseText(text: string, firstOnly?: boolean): string;
 
+/**
+ * Mutation change handler
+ */
+export declare type MutationHandler = (mutations: MutationRecord[], observer: MutationObserver) => void;
+
+/**
+ * Pan gesture event data
+ */
+export declare interface PanEvent {
+    direction: 'left' | 'right' | 'up' | 'down';
+    deltaX: number;
+    deltaY: number;
+    distance: number;
+    x: number;
+    y: number;
+    startX: number;
+    startY: number;
+    isPanning: boolean;
+    isFirst: boolean;
+    isFinal: boolean;
+    velocity: number;
+}
+
 /**
  * Parse formatted money string to number
  */
@@ -632,11 +697,37 @@ export declare function parseTargetTime(target: Date | number | string): number;
  */
 export declare function parseTime(arg?: string): number | null;
 
+/**
+ * Permission configuration
+ */
+declare interface PermissionConfig {
+    /** Get current user's permissions */
+    getPermissions: () => string[];
+    /** Get current user's roles */
+    getRoles?: () => string[];
+    /** Role to permission mapping */
+    roleMap?: Record<string, string[]>;
+}
+
 /**
  * Permission check mode
  */
 export declare type PermissionMode = 'some' | 'every';
 
+/**
+ * Pinch gesture event data
+ */
+export declare interface PinchEvent {
+    scale: number;
+    distance: number;
+    initialDistance: number;
+    centerX: number;
+    centerY: number;
+    isPinching: boolean;
+    isFirst: boolean;
+    isFinal: boolean;
+}
+
 /**
  * Position type
  */
@@ -702,6 +793,20 @@ export declare interface ResizeInfo {
     contentRect: DOMRectReadOnly;
 }
 
+/**
+ * Rotate gesture event data
+ */
+export declare interface RotateGestureEvent {
+    angle: number;
+    radians: number;
+    rotation: number;
+    centerX: number;
+    centerY: number;
+    isRotating: boolean;
+    isFirst: boolean;
+    isFinal: boolean;
+}
+
 /**
  * Scroll direction
  */
@@ -739,6 +844,11 @@ export declare function set(obj: Record<string, any>, path: string, value: any):
  */
 export declare function setVueVersion(version: VueVersion): void;
 
+/**
+ * Skeleton animation type
+ */
+export declare type SkeletonAnimation = 'wave' | 'pulse' | 'none';
+
 /**
  * Check if Clipboard API is supported
  */
@@ -800,6 +910,16 @@ export declare function throttleFn<T extends (...args: any[]) => any>(fn: T, wai
     trailing?: boolean;
 }): ComposableThrottledFunction<T>;
 
+/**
+ * Tooltip placement
+ */
+export declare type TooltipPlacement = 'top' | 'bottom' | 'left' | 'right';
+
+/**
+ * Tooltip trigger
+ */
+export declare type TooltipTrigger = 'hover' | 'click' | 'focus' | 'manual';
+
 /**
  * Touch gesture type
  */
@@ -832,6 +952,11 @@ export declare type TrimPosition = 'start' | 'end' | 'both';
  */
 export declare function trimText(text: string, position?: TrimPosition, chars?: string): string;
 
+/**
+ * Truncate position
+ */
+export declare type TruncatePosition = 'start' | 'middle' | 'end';
+
 /**
  * Utility function to truncate text to a specified length
  *
@@ -855,6 +980,68 @@ export declare function truncateText(text: string, maxLength: number, ellipsis?:
  */
 export declare function uppercaseText(text: string, firstOnly?: boolean): string;
 
+/**
+ * Composable for blur overlay
+ *
+ * @param options - Configuration options
+ * @returns Blur utilities
+ *
+ * @example
+ * ```vue
+ * <script setup>
+ * import { ref } from 'vue'
+ * import { useBlur } from 'directix'
+ *
+ * const { isVisible, show, hide, toggle } = useBlur({ radius: 15 })
+ * </script>
+ *
+ * <template>
+ *   <button @click="toggle">Toggle Blur</button>
+ * </template>
+ * ```
+ */
+export declare function useBlur(options?: UseBlurOptions): UseBlurReturn;
+
+/**
+ * Options for useBlur composable
+ */
+export declare interface UseBlurOptions {
+    /** Blur radius in pixels */
+    radius?: number | Ref<number>;
+    /** Whether blur is visible */
+    visible?: boolean | Ref<boolean>;
+    /** Transition duration */
+    duration?: number;
+    /** Overlay color */
+    overlayColor?: string;
+    /** Z-index */
+    zIndex?: number;
+    /** Lock scroll */
+    lockScroll?: boolean;
+    /** Custom class */
+    class?: string;
+    /** Callback on show */
+    onShow?: () => void;
+    /** Callback on hide */
+    onHide?: () => void;
+}
+
+/**
+ * Return type for useBlur composable
+ */
+export declare interface UseBlurReturn {
+    /** Whether blur is visible */
+    isVisible: Ref<boolean>;
+    /** Show blur */
+    show: () => void;
+    /** Hide blur */
+    hide: () => void;
+    /** Toggle blur */
+    toggle: () => void;
+    /** Bind blur to an element */
+    bind: (element: HTMLElement) => () => void;
+}
+
 /**
  * Composable for capitalizing text
  *
@@ -1058,6 +1245,128 @@ export declare interface UseClickOutsideReturn {
     bind: (element: HTMLElement) => () => void;
 }
 
+/**
+ * Composable for creating click wave effects (simplified ripple)
+ *
+ * @param options - Configuration options
+ * @returns Wave utilities
+ *
+ * @example
+ * ```vue
+ * <script setup>
+ * import { ref } from 'vue'
+ * import { useClickWave } from 'directix'
+ *
+ * const buttonRef = ref(null)
+ * const { bind } = useClickWave({ color: 'rgba(255, 255, 255, 0.3)' })
+ *
+ * onMounted(() => bind(buttonRef.value))
+ * </script>
+ *
+ * <template>
+ *   <button ref="buttonRef">Click for wave</button>
+ * </template>
+ * ```
+ */
+export declare function useClickWave(options?: UseClickWaveOptions): UseClickWaveReturn;
+
+/**
+ * Options for useClickWave composable
+ */
+export declare interface UseClickWaveOptions {
+    /**
+     * Wave color
+     * @default 'currentColor'
+     */
+    color?: string | Ref<string>;
+    /**
+     * Wave duration in milliseconds
+     * @default 500
+     */
+    duration?: number | Ref<number>;
+    /**
+     * Whether to disable wave
+     * @default false
+     */
+    disabled?: boolean | Ref<boolean>;
+    /**
+     * Wave size ratio
+     * @default 1.5
+     */
+    sizeRatio?: number;
+}
+
+/**
+ * Return type for useClickWave composable
+ */
+export declare interface UseClickWaveReturn {
+    /** Bind wave effect to an element */
+    bind: (element: HTMLElement) => () => void;
+    /** Trigger wave effect manually */
+    trigger: (event?: {
+        x?: number;
+        y?: number;
+    }) => void;
+}
+
+/**
+ * Composable for creating context menus
+ *
+ * @param options - Configuration options
+ * @returns Context menu utilities
+ *
+ * @example
+ * ```vue
+ * <script setup>
+ * import { ref } from 'vue'
+ * import { useContextMenu } from 'directix'
+ *
+ * const containerRef = ref(null)
+ * const items = [
+ *   { label: 'Copy', handler: () => console.log('Copy') },
+ *   { label: 'Paste', handler: () => console.log('Paste') },
+ *   { divider: true, label: '' },
+ *   { label: 'Delete', handler: () => console.log('Delete') }
+ * ]
+ *
+ * const { bind } = useContextMenu({ items })
+ *
+ * onMounted(() => bind(containerRef.value))
+ * </script>
+ *
+ * <template>
+ *   <div ref="containerRef">Right click here</div>
+ * </template>
+ * ```
+ */
+export declare function useContextMenu(options: UseContextMenuOptions): UseContextMenuReturn;
+
+/**
+ * Options for useContextMenu composable
+ */
+export declare interface UseContextMenuOptions {
+    /** Menu items */
+    items: ContextMenuItem[] | Ref<ContextMenuItem[]>;
+    /** Custom class for menu container */
+    class?: string;
+    /** Menu width */
+    width?: number | string;
+    /** Whether to disable */
+    disabled?: boolean | Ref<boolean>;
+}
+
+/**
+ * Return type for useContextMenu composable
+ */
+export declare interface UseContextMenuReturn {
+    /** Bind context menu to an element */
+    bind: (element: HTMLElement) => () => void;
+    /** Show menu at position */
+    show: (x: number, y: number) => void;
+    /** Hide menu */
+    hide: () => void;
+}
+
 /**
  * Composable for copying text to clipboard
  *
@@ -1261,6 +1570,85 @@ export declare interface UseCountdownReturn {
     reset: () => void;
 }
 
+/**
+ * Composable for animated number counter
+ *
+ * @param options - Configuration options
+ * @returns Counter utilities
+ *
+ * @example
+ * ```vue
+ * <script setup>
+ * import { ref } from 'vue'
+ * import { useCounter } from 'directix'
+ *
+ * const containerRef = ref(null)
+ * const { currentValue, formattedValue, setValue, bind } = useCounter({
+ *   value: 1000,
+ *   duration: 2000,
+ *   useGrouping: true
+ * })
+ *
+ * onMounted(() => bind(containerRef.value))
+ * </script>
+ *
+ * <template>
+ *   <span ref="containerRef">0</span>
+ * </template>
+ * ```
+ */
+export declare function useCounter(options: UseCounterOptions): UseCounterReturn;
+
+/**
+ * Options for useCounter composable
+ */
+export declare interface UseCounterOptions {
+    /** Target value */
+    value: number | Ref<number>;
+    /** Starting value */
+    startValue?: number;
+    /** Animation duration */
+    duration?: number;
+    /** Decimal places */
+    decimals?: number;
+    /** Use grouping separator */
+    useGrouping?: boolean;
+    /** Locale */
+    locale?: string;
+    /** Custom formatter */
+    formatter?: (value: number) => string;
+    /** Easing function */
+    easing?: CounterEasing;
+    /** Custom easing function */
+    customEasing?: (t: number) => number;
+    /** Callback on update */
+    onUpdate?: (value: number, formattedValue: string) => void;
+    /** Callback on complete */
+    onComplete?: (value: number) => void;
+    /** Callback on start */
+    onStart?: () => void;
+}
+
+/**
+ * Return type for useCounter composable
+ */
+export declare interface UseCounterReturn {
+    /** Current value */
+    currentValue: Ref<number>;
+    /** Formatted value */
+    formattedValue: Ref<string>;
+    /** Whether animating */
+    isAnimating: Ref<boolean>;
+    /** Set target value */
+    setValue: (value: number) => void;
+    /** Start animation */
+    start: () => void;
+    /** Stop animation */
+    stop: () => void;
+    /** Bind counter to an element */
+    bind: (element: HTMLElement) => () => void;
+}
+
 /**
  * Composable for debouncing function calls
  *
@@ -1509,107 +1897,416 @@ export declare interface UseEllipsisReturn {
 }
 
 /**
- * Composable for managing element focus
+ * Composable for emoji filtering
  *
  * @param options - Configuration options
- * @returns Focus utilities
+ * @returns Emoji utilities
  *
  * @example
  * ```vue
  * <script setup>
  * import { ref } from 'vue'
- * import { useFocus } from 'directix'
+ * import { useEmoji } from 'directix'
  *
- * const input = ref(null)
- * const { isFocused, focus, bind } = useFocus({
- *   onBlur: () => validate()
- * })
+ * const inputRef = ref(null)
+ * const { bind, stripEmojis } = useEmoji({ strip: true })
  *
- * onMounted(() => bind(input.value))
- *
- * // Programmatically focus
- * function handleButtonClick() {
- *   focus()
- * }
+ * onMounted(() => bind(inputRef.value))
  * </script>
  *
  * <template>
- *   <input ref="input" />
- *   <button @click="focus">Focus Input</button>
+ *   <input ref="inputRef" type="text" />
  * </template>
  * ```
  */
-export declare function useFocus(options?: UseFocusOptions): UseFocusReturn;
+export declare function useEmoji(options?: UseEmojiOptions): UseEmojiReturn;
 
 /**
- * Options for useFocus composable
+ * Options for useEmoji composable
  */
-export declare interface UseFocusOptions {
-    /**
-     * Callback when element is focused
-     */
-    onFocus?: (event: FocusEvent) => void;
-    /**
-     * Callback when element loses focus
-     */
-    onBlur?: (event: FocusEvent) => void;
+export declare interface UseEmojiOptions {
+    /** Whether to strip emoji */
+    strip?: boolean | Ref<boolean>;
+    /** Allowed emojis */
+    allowList?: string[];
+    /** Blocked emojis */
+    blockList?: string[];
+    /** Replacement character */
+    replacement?: string;
+    /** Callback when emoji is detected */
+    onEmoji?: (emoji: string, position: number) => void;
 }
 
 /**
- * Return type for useFocus composable
+ * Return type for useEmoji composable
  */
-export declare interface UseFocusReturn {
-    /** Whether the element is currently focused */
-    isFocused: Readonly<Ref<boolean>>;
-    /** Focus the element */
-    focus: () => void;
-    /** Blur the element */
-    blur: () => void;
-    /** Bind focus tracking to an element */
-    bind: (element: HTMLElement) => () => void;
+export declare interface UseEmojiReturn {
+    /** Current input value */
+    value: Ref<string>;
+    /** Strip emojis from text */
+    stripEmojis: (text: string) => string;
+    /** Check if text contains emoji */
+    hasEmoji: (text: string) => boolean;
+    /** Bind emoji filter to an input element */
+    bind: (element: HTMLInputElement | HTMLTextAreaElement) => () => void;
 }
 
 /**
- * Composable for handling keyboard shortcuts
+ * Composable for exporting data
  *
  * @param options - Configuration options
- * @returns Hotkey utilities
+ * @returns Export utilities
  *
  * @example
  * ```vue
  * <script setup>
- * import { useHotkey } from 'directix'
+ * import { useExport } from 'directix'
  *
- * const { enable, disable, add, remove } = useHotkey({
- *   hotkeys: [
- *     { key: 'ctrl+s', handler: (e) => save() },
- *     { key: 'ctrl+z', handler: (e) => undo() },
- *   ]
- * })
+ * const data = [
+ *   { name: 'John', email: 'john@example.com' },
+ *   { name: 'Jane', email: 'jane@example.com' }
+ * ]
  *
- * // Add dynamic hotkey
- * add({ key: 'esc', handler: (e) => closeModal() })
+ * const { exportCSV, exportJSON } = useExport({ data, filename: 'users' })
  * </script>
+ *
+ * <template>
+ *   <button @click="exportCSV">Export CSV</button>
+ *   <button @click="exportJSON">Export JSON</button>
+ * </template>
  * ```
  */
-export declare function useHotkey(options?: UseHotkeyOptions): UseHotkeyReturn;
+export declare function useExport(options: UseExportOptions): UseExportReturn;
+
+/**
+ * Options for useExport composable
+ */
+export declare interface UseExportOptions {
+    /** Data to export */
+    data: any[] | object | string | Ref<any[] | object | string>;
+    /** Export format */
+    format?: ExportFormat | Ref<ExportFormat>;
+    /** Filename (without extension) */
+    filename?: string | Ref<string>;
+    /** Whether to include headers (for CSV) */
+    includeHeaders?: boolean;
+    /** Custom delimiter for CSV */
+    delimiter?: string;
+    /** Columns to export */
+    columns?: string[];
+    /** Custom headers mapping */
+    headers?: Record<string, string>;
+    /** Callback before export */
+    onBeforeExport?: () => boolean | void;
+    /** Callback after export */
+    onAfterExport?: () => void;
+    /** Callback on error */
+    onError?: (error: Error) => void;
+}
 
 /**
- * Options for useHotkey composable
+ * Return type for useExport composable
  */
-export declare interface UseHotkeyOptions {
-    /**
-     * Single hotkey definition
-     */
-    hotkey?: HotkeyDefinition;
-    /**
-     * Multiple hotkey definitions
-     */
-    hotkeys?: HotkeyDefinition[];
-    /**
-     * Target element to bind events (defaults to document)
-     */
-    target?: HTMLElement | Ref<HTMLElement | null>;
+export declare interface UseExportReturn {
+    /** Export data */
+    exportData: (format?: ExportFormat) => void;
+    /** Export as CSV */
+    exportCSV: () => void;
+    /** Export as JSON */
+    exportJSON: () => void;
+    /** Export as HTML */
+    exportHTML: () => void;
+    /** Export as text */
+    exportText: () => void;
+}
+
+/**
+ * Composable for fade transitions
+ *
+ * @param options - Configuration options
+ * @returns Fade utilities
+ *
+ * @example
+ * ```vue
+ * <script setup>
+ * import { ref } from 'vue'
+ * import { useFade } from 'directix'
+ *
+ * const containerRef = ref(null)
+ * const { isVisible, fadeIn, fadeOut, bind } = useFade({ duration: 500 })
+ *
+ * onMounted(() => bind(containerRef.value))
+ * </script>
+ *
+ * <template>
+ *   <div ref="containerRef">
+ *     <button @click="toggle">Toggle</button>
+ *   </div>
+ * </template>
+ * ```
+ */
+export declare function useFade(options?: UseFadeOptions): UseFadeReturn;
+
+/**
+ * Options for useFade composable
+ */
+export declare interface UseFadeOptions {
+    /** Whether element is visible */
+    visible?: boolean | Ref<boolean>;
+    /** Animation duration */
+    duration?: number;
+    /** Animation delay */
+    delay?: number;
+    /** Easing function */
+    easing?: string;
+    /** Minimum opacity */
+    minOpacity?: number;
+    /** Maximum opacity */
+    maxOpacity?: number;
+    /** Callback on start */
+    onStart?: (direction: 'in' | 'out') => void;
+    /** Callback on complete */
+    onComplete?: (direction: 'in' | 'out') => void;
+}
+
+/**
+ * Return type for useFade composable
+ */
+export declare interface UseFadeReturn {
+    /** Whether element is visible */
+    isVisible: Ref<boolean>;
+    /** Fade in */
+    fadeIn: () => void;
+    /** Fade out */
+    fadeOut: () => void;
+    /** Toggle fade */
+    toggle: () => void;
+    /** Bind fade to an element */
+    bind: (element: HTMLElement) => () => void;
+}
+
+/**
+ * Composable for managing element focus
+ *
+ * @param options - Configuration options
+ * @returns Focus utilities
+ *
+ * @example
+ * ```vue
+ * <script setup>
+ * import { ref } from 'vue'
+ * import { useFocus } from 'directix'
+ *
+ * const input = ref(null)
+ * const { isFocused, focus, bind } = useFocus({
+ *   onBlur: () => validate()
+ * })
+ *
+ * onMounted(() => bind(input.value))
+ *
+ * // Programmatically focus
+ * function handleButtonClick() {
+ *   focus()
+ * }
+ * </script>
+ *
+ * <template>
+ *   <input ref="input" />
+ *   <button @click="focus">Focus Input</button>
+ * </template>
+ * ```
+ */
+export declare function useFocus(options?: UseFocusOptions): UseFocusReturn;
+
+/**
+ * Options for useFocus composable
+ */
+export declare interface UseFocusOptions {
+    /**
+     * Callback when element is focused
+     */
+    onFocus?: (event: FocusEvent) => void;
+    /**
+     * Callback when element loses focus
+     */
+    onBlur?: (event: FocusEvent) => void;
+}
+
+/**
+ * Return type for useFocus composable
+ */
+export declare interface UseFocusReturn {
+    /** Whether the element is currently focused */
+    isFocused: Readonly<Ref<boolean>>;
+    /** Focus the element */
+    focus: () => void;
+    /** Blur the element */
+    blur: () => void;
+    /** Bind focus tracking to an element */
+    bind: (element: HTMLElement) => () => void;
+}
+
+/**
+ * Composable for fullscreen functionality
+ *
+ * @param options - Configuration options
+ * @returns Fullscreen utilities
+ *
+ * @example
+ * ```vue
+ * <script setup>
+ * import { ref } from 'vue'
+ * import { useFullscreen } from 'directix'
+ *
+ * const containerRef = ref(null)
+ * const { isFullscreen, toggle, bind } = useFullscreen({
+ *   onEnter: () => console.log('Entered fullscreen'),
+ *   onExit: () => console.log('Exited fullscreen')
+ * })
+ *
+ * onMounted(() => bind(containerRef.value))
+ * </script>
+ *
+ * <template>
+ *   <div ref="containerRef">
+ *     <button @click="toggle">
+ *       {{ isFullscreen ? 'Exit' : 'Enter' }} Fullscreen
+ *     </button>
+ *   </div>
+ * </template>
+ * ```
+ */
+export declare function useFullscreen(options?: UseFullscreenOptions): UseFullscreenReturn;
+
+/**
+ * Options for useFullscreen composable
+ */
+export declare interface UseFullscreenOptions {
+    /** Custom class when in fullscreen mode */
+    fullscreenClass?: string;
+    /** Callback when entering fullscreen */
+    onEnter?: () => void;
+    /** Callback when exiting fullscreen */
+    onExit?: () => void;
+    /** Callback when fullscreen state changes */
+    onChange?: (isFullscreen: boolean) => void;
+}
+
+/**
+ * Return type for useFullscreen composable
+ */
+export declare interface UseFullscreenReturn {
+    /** Whether currently in fullscreen mode */
+    isFullscreen: Ref<boolean>;
+    /** Enter fullscreen mode */
+    enter: () => Promise<void>;
+    /** Exit fullscreen mode */
+    exit: () => Promise<void>;
+    /** Toggle fullscreen mode */
+    toggle: () => Promise<void>;
+    /** Bind fullscreen to an element */
+    bind: (element: HTMLElement) => () => void;
+}
+
+/**
+ * Composable for highlighting keywords
+ *
+ * @param options - Configuration options
+ * @returns Highlight utilities
+ *
+ * @example
+ * ```vue
+ * <script setup>
+ * import { ref } from 'vue'
+ * import { useHighlight } from 'directix'
+ *
+ * const containerRef = ref(null)
+ * const { count, bind } = useHighlight({
+ *   keywords: ['Vue', 'React'],
+ *   className: 'my-highlight'
+ * })
+ *
+ * onMounted(() => bind(containerRef.value))
+ * </script>
+ *
+ * <template>
+ *   <p ref="containerRef">Vue and React are popular frameworks.</p>
+ * </template>
+ * ```
+ */
+export declare function useHighlight(options: UseHighlightOptions): UseHighlightReturn;
+
+/**
+ * Options for useHighlight composable
+ */
+export declare interface UseHighlightOptions {
+    /** Keywords to highlight */
+    keywords: string | string[] | Ref<string | string[]>;
+    /** Highlight class name */
+    className?: string;
+    /** Inline style */
+    style?: string;
+    /** Case sensitive */
+    caseSensitive?: boolean;
+    /** Whole word only */
+    wholeWord?: boolean;
+    /** Tag name for highlight */
+    tag?: string;
+}
+
+/**
+ * Return type for useHighlight composable
+ */
+export declare interface UseHighlightReturn {
+    /** Highlight count */
+    count: Ref<number>;
+    /** Update keywords */
+    updateKeywords: (keywords: string | string[]) => void;
+    /** Bind highlight to an element */
+    bind: (element: HTMLElement) => () => void;
+}
+
+/**
+ * Composable for handling keyboard shortcuts
+ *
+ * @param options - Configuration options
+ * @returns Hotkey utilities
+ *
+ * @example
+ * ```vue
+ * <script setup>
+ * import { useHotkey } from 'directix'
+ *
+ * const { enable, disable, add, remove } = useHotkey({
+ *   hotkeys: [
+ *     { key: 'ctrl+s', handler: (e) => save() },
+ *     { key: 'ctrl+z', handler: (e) => undo() },
+ *   ]
+ * })
+ *
+ * // Add dynamic hotkey
+ * add({ key: 'esc', handler: (e) => closeModal() })
+ * </script>
+ * ```
+ */
+export declare function useHotkey(options?: UseHotkeyOptions): UseHotkeyReturn;
+
+/**
+ * Options for useHotkey composable
+ */
+export declare interface UseHotkeyOptions {
+    /**
+     * Single hotkey definition
+     */
+    hotkey?: HotkeyDefinition;
+    /**
+     * Multiple hotkey definitions
+     */
+    hotkeys?: HotkeyDefinition[];
+    /**
+     * Target element to bind events (defaults to document)
+     */
+    target?: HTMLElement | Ref<HTMLElement | null>;
     /**
      * Whether to enable the hotkey(s)
      * @default true
@@ -1805,6 +2502,91 @@ export declare interface UseImagePreviewReturn {
     bind: (element: HTMLImageElement) => () => void;
 }
 
+/**
+ * Composable for infinite scrolling
+ *
+ * @param options - Configuration options
+ * @returns Infinite scroll utilities
+ *
+ * @example
+ * ```vue
+ * <script setup>
+ * import { ref } from 'vue'
+ * import { useInfiniteScroll } from 'directix'
+ *
+ * const items = ref([])
+ * const page = ref(1)
+ *
+ * const { bind, loading, finished } = useInfiniteScroll({
+ *   onLoad: async () => {
+ *     const newItems = await fetchItems(page.value++)
+ *     items.value.push(...newItems)
+ *     if (newItems.length === 0) finished.value = true
+ *   }
+ * })
+ *
+ * onMounted(() => bind(containerRef.value))
+ * </script>
+ *
+ * <template>
+ *   <div ref="containerRef" class="scroll-container">
+ *     <div v-for="item in items" :key="item.id">{{ item.name }}</div>
+ *     <div v-if="loading">Loading...</div>
+ *   </div>
+ * </template>
+ * ```
+ */
+export declare function useInfiniteScroll(options: UseInfiniteScrollOptions): UseInfiniteScrollReturn;
+
+/**
+ * Options for useInfiniteScroll composable
+ */
+export declare interface UseInfiniteScrollOptions {
+    /**
+     * Callback to load more items
+     */
+    onLoad: () => void | Promise<void>;
+    /**
+     * Whether loading is in progress
+     */
+    loading?: boolean | Ref<boolean>;
+    /**
+     * Whether all items are loaded
+     */
+    finished?: boolean | Ref<boolean>;
+    /**
+     * Distance from bottom to trigger load (in pixels)
+     * @default 0
+     */
+    distance?: number | Ref<number>;
+    /**
+     * Whether to check immediately on mount
+     * @default true
+     */
+    immediate?: boolean;
+    /**
+     * Whether to disable
+     * @default false
+     */
+    disabled?: boolean | Ref<boolean>;
+}
+
+/**
+ * Return type for useInfiniteScroll composable
+ */
+export declare interface UseInfiniteScrollReturn {
+    /** Whether loading is in progress */
+    loading: Readonly<Ref<boolean>>;
+    /** Whether all items are loaded */
+    finished: Readonly<Ref<boolean>>;
+    /** Manually trigger load */
+    load: () => Promise<void>;
+    /** Bind infinite scroll to an element */
+    bind: (element: HTMLElement) => () => void;
+    /** Stop observing */
+    stop: () => void;
+}
+
 /**
  * Composable for detecting element intersection with viewport
  *
@@ -1900,6 +2682,186 @@ export declare interface UseIntersectReturn {
     stop: () => void;
 }
 
+/**
+ * Composable for lazy loading images
+ *
+ * @param options - Configuration options
+ * @returns Lazy loading utilities
+ *
+ * @example
+ * ```vue
+ * <script setup>
+ * import { ref } from 'vue'
+ * import { useLazy } from 'directix'
+ *
+ * const imageRef = ref(null)
+ * const { state, isLoading, bind } = useLazy({
+ *   src: 'https://example.com/image.jpg',
+ *   placeholder: '/placeholder.jpg'
+ * })
+ *
+ * onMounted(() => bind(imageRef.value))
+ * </script>
+ *
+ * <template>
+ *   <img ref="imageRef" />
+ * </template>
+ * ```
+ */
+export declare function useLazy(options?: UseLazyOptions): UseLazyReturn;
+
+/**
+ * Options for useLazy composable
+ */
+export declare interface UseLazyOptions {
+    /**
+     * Image source URL
+     */
+    src?: string | Ref<string>;
+    /**
+     * Placeholder image URL
+     */
+    placeholder?: string;
+    /**
+     * Error image URL (shown when loading fails)
+     */
+    error?: string;
+    /**
+     * Preload distance in pixels
+     * @default 0
+     */
+    preload?: number;
+    /**
+     * Callback when image loads successfully
+     */
+    onLoad?: (el: HTMLElement) => void;
+    /**
+     * Callback when image fails to load
+     */
+    onError?: (el: HTMLElement, error: Error) => void;
+    /**
+     * Number of retry attempts
+     * @default 1
+     */
+    attempt?: number;
+}
+
+/**
+ * Return type for useLazy composable
+ */
+export declare interface UseLazyReturn {
+    /** Current loading state */
+    state: Readonly<Ref<LazyState>>;
+    /** Whether the image is currently loading */
+    isLoading: Readonly<Ref<boolean>>;
+    /** Whether the image has loaded successfully */
+    isLoaded: Readonly<Ref<boolean>>;
+    /** Whether the image failed to load */
+    hasError: Readonly<Ref<boolean>>;
+    /** Bind lazy loading to an element */
+    bind: (element: HTMLElement) => () => void;
+    /** Manually trigger load */
+    load: () => void;
+    /** Reset state */
+    reset: () => void;
+}
+
+/**
+ * Composable for managing loading state
+ *
+ * @param options - Configuration options
+ * @returns Loading utilities
+ *
+ * @example
+ * ```vue
+ * <script setup>
+ * import { ref } from 'vue'
+ * import { useLoading } from 'directix'
+ *
+ * const containerRef = ref(null)
+ * const { loading, start, stop, bind } = useLoading({
+ *   text: 'Loading...',
+ *   lock: true
+ * })
+ *
+ * onMounted(() => bind(containerRef.value))
+ *
+ * async function fetchData() {
+ *   start()
+ *   await api.getData()
+ *   stop()
+ * }
+ * </script>
+ *
+ * <template>
+ *   <div ref="containerRef">
+ *     <button @click="fetchData">Fetch Data</button>
+ *   </div>
+ * </template>
+ * ```
+ */
+export declare function useLoading(options?: UseLoadingOptions): UseLoadingReturn;
+
+/**
+ * Options for useLoading composable
+ */
+export declare interface UseLoadingOptions {
+    /**
+     * Initial loading state
+     * @default false
+     */
+    initial?: boolean | Ref<boolean>;
+    /**
+     * Loading text to display
+     */
+    text?: string | Ref<string>;
+    /**
+     * CSS class for loading overlay
+     * @default 'v-loading'
+     */
+    loadingClass?: string;
+    /**
+     * CSS class for loading spinner
+     * @default 'v-loading__spinner'
+     */
+    spinnerClass?: string;
+    /**
+     * CSS class for loading text
+     * @default 'v-loading__text'
+     */
+    textClass?: string;
+    /**
+     * Custom spinner HTML
+     */
+    spinner?: string;
+    /**
+     * Background color
+     * @default 'rgba(255, 255, 255, 0.9)'
+     */
+    background?: string;
+    /**
+     * Whether to lock scroll while loading
+     * @default false
+     */
+    lock?: boolean;
+}
+
+/**
+ * Return type for useLoading composable
+ */
+export declare interface UseLoadingReturn {
+    /** Current loading state */
+    loading: Ref<boolean>;
+    /** Start loading */
+    start: () => void;
+    /** Stop loading */
+    stop: () => void;
+    /** Toggle loading state */
+    toggle: () => void;
+    /** Bind loading to an element */
+    bind: (element: HTMLElement) => () => void;
+}
+
 /**
  * Composable for detecting long press gestures
  *
@@ -1997,6 +2959,88 @@ export declare interface UseLongPressReturn {
     bind: (element: HTMLElement) => () => void;
 }
 
+/**
+ * Composable for Lottie animations
+ *
+ * @param options - Configuration options
+ * @returns Lottie utilities
+ *
+ * @example
+ * ```vue
+ * <script setup>
+ * import { ref } from 'vue'
+ * import { useLottie } from 'directix'
+ * import animationData from './animation.json'
+ *
+ * const containerRef = ref(null)
+ * const { play, pause, bind } = useLottie({
+ *   animationData,
+ *   autoplay: true,
+ *   loop: true
+ * })
+ *
+ * onMounted(() => bind(containerRef.value))
+ * </script>
+ *
+ * <template>
+ *   <div ref="containerRef"></div>
+ *   <button @click="play">Play</button>
+ *   <button @click="pause">Pause</button>
+ * </template>
+ * ```
+ */
+export declare function useLottie(options: UseLottieOptions): UseLottieReturn;
+
+/**
+ * Options for useLottie composable
+ */
+export declare interface UseLottieOptions {
+    /** Animation data or URL */
+    animationData: object | string | Ref<object | string>;
+    /** Autoplay */
+    autoplay?: boolean;
+    /** Loop */
+    loop?: boolean;
+    /** Speed */
+    speed?: number | Ref<number>;
+    /** Direction */
+    direction?: 1 | -1;
+    /** Renderer */
+    renderer?: 'svg' | 'canvas' | 'html';
+    /** Callback on ready */
+    onReady?: (animation: any) => void;
+    /** Callback on complete */
+    onComplete?: () => void;
+    /** Callback on loop */
+    onLoopComplete?: () => void;
+}
+
+/**
+ * Return type for useLottie composable
+ */
+export declare interface UseLottieReturn {
+    /** Animation state */
+    state: Ref<LottieAnimationState>;
+    /** Animation instance */
+    animation: Ref<any>;
+    /** Play animation */
+    play: () => void;
+    /** Pause animation */
+    pause: () => void;
+    /** Stop animation */
+    stop: () => void;
+    /** Set speed */
+    setSpeed: (speed: number) => void;
+    /** Set direction */
+    setDirection: (direction: 1 | -1) => void;
+    /** Go to frame */
+    goToAndPlay: (frame: number, isFrame?: boolean) => void;
+    /** Go to frame and stop */
+    goToAndStop: (frame: number, isFrame?: boolean) => void;
+    /** Bind lottie to an element */
+    bind: (element: HTMLElement) => () => void;
+}
+
 /**
  * Composable for transforming text to lowercase
  *
@@ -2051,6 +3095,91 @@ export declare interface UseLowercaseReturn {
     original: Ref<string>;
 }
 
+/**
+ * Composable for input masking
+ *
+ * @param options - Configuration options
+ * @returns Mask utilities
+ *
+ * @example
+ * ```vue
+ * <script setup>
+ * import { ref } from 'vue'
+ * import { useMask } from 'directix'
+ *
+ * const inputRef = ref(null)
+ * const { bind, getRawValue } = useMask({
+ *   mask: '###-##-####',
+ *   placeholder: '_'
+ * })
+ *
+ * onMounted(() => bind(inputRef.value))
+ * </script>
+ *
+ * <template>
+ *   <input ref="inputRef" type="text" />
+ * </template>
+ * ```
+ */
+export declare function useMask(options: UseMaskOptions): UseMaskReturn;
+
+/**
+ * Options for useMask composable
+ */
+export declare interface UseMaskOptions {
+    /**
+     * Mask pattern: # digit, A letter, N alphanumeric, X any, others as literals
+     */
+    mask: string | Ref<string>;
+    /**
+     * Placeholder character
+     * @default '_'
+     */
+    placeholder?: string;
+    /**
+     * Show mask placeholder on focus
+     * @default true
+     */
+    showPlaceholder?: boolean;
+    /**
+     * Show mask on blur
+     * @default false
+     */
+    showMaskOnBlur?: boolean;
+    /**
+     * Clear incomplete on blur
+     * @default false
+     */
+    clearIncomplete?: boolean;
+    /**
+     * Disable
+     * @default false
+     */
+    disabled?: boolean | Ref<boolean>;
+    /**
+     * Callback when value changes
+     */
+    onChange?: (value: string, rawValue: string) => void;
+    /**
+     * Callback when mask is complete
+     */
+    onComplete?: (value: string) => void;
+}
+
+/**
+ * Return type for useMask composable
+ */
+export declare interface UseMaskReturn {
+    /** Get formatted value */
+    getFormattedValue: (value: string) => string;
+    /** Get raw value (without mask literals) */
+    getRawValue: (value: string) => string;
+    /** Check if mask is complete */
+    isComplete: (value: string) => boolean;
+    /** Bind mask to an input element */
+    bind: (element: HTMLInputElement | HTMLTextAreaElement) => () => void;
+}
+
 /**
  * Composable for formatting numbers as money
  *
@@ -2133,6 +3262,104 @@ export declare interface UseMoneyReturn {
     parse: (formatted: string) => number;
 }
 
+/**
+ * Composable for observing DOM mutations
+ *
+ * @param options - Configuration options
+ * @returns Mutation observer utilities
+ *
+ * @example
+ * ```vue
+ * <script setup>
+ * import { ref } from 'vue'
+ * import { useMutation } from 'directix'
+ *
+ * const containerRef = ref(null)
+ * const { bind } = useMutation({
+ *   handler: (mutations) => {
+ *     mutations.forEach(mutation => {
+ *       console.log('Type:', mutation.type)
+ *       console.log('Target:', mutation.target)
+ *     })
+ *   },
+ *   childList: true,
+ *   subtree: true
+ * })
+ *
+ * onMounted(() => bind(containerRef.value))
+ * </script>
+ *
+ * <template>
+ *   <div ref="containerRef">
+ *     Content to observe
+ *   </div>
+ * </template>
+ * ```
+ */
+export declare function useMutation(options: UseMutationOptions): UseMutationReturn;
+
+/**
+ * Options for useMutation composable
+ */
+export declare interface UseMutationOptions {
+    /**
+     * Callback when mutations occur
+     * @required
+     */
+    handler: MutationHandler;
+    /**
+     * Whether to observe attribute changes
+     * @default false
+     */
+    attributes?: boolean;
+    /**
+     * Specific attributes to observe
+     */
+    attributeFilter?: string[];
+    /**
+     * Whether to observe child node additions/removals
+     * @default true
+     */
+    childList?: boolean;
+    /**
+     * Whether to observe all descendants, not just direct children
+     * @default false
+     */
+    subtree?: boolean;
+    /**
+     * Whether to observe character data changes
+     * @default false
+     */
+    characterData?: boolean;
+    /**
+     * Whether to record old attribute values
+     * @default false
+     */
+    attributeOldValue?: boolean;
+    /**
+     * Whether to record old character data
+     * @default false
+     */
+    characterDataOldValue?: boolean;
+    /**
+     * Whether to disable
+     * @default false
+     */
+    disabled?: boolean | Ref<boolean>;
+}
+
+/**
+ * Return type for useMutation composable
+ */
+export declare interface UseMutationReturn {
+    /** Bind mutation observer to an element */
+    bind: (element: HTMLElement) => () => void;
+    /** Stop observing */
+    stop: () => void;
+    /** Start observing */
+    start: () => void;
+}
+
 /**
  * Composable for formatting numbers
  *
@@ -2213,6 +3440,122 @@ export declare interface UseNumberReturn {
     parse: (formatted: string) => number;
 }
 
+/**
+ * Composable for pan gesture
+ *
+ * @param options - Configuration options
+ * @returns Pan gesture utilities
+ *
+ * @example
+ * ```vue
+ * <script setup>
+ * import { ref } from 'vue'
+ * import { usePan } from 'directix'
+ *
+ * const containerRef = ref(null)
+ * const { isPanning, direction, bind } = usePan({
+ *   onPan: (e) => console.log('Pan:', e.direction, e.distance)
+ * })
+ *
+ * onMounted(() => bind(containerRef.value))
+ * </script>
+ *
+ * <template>
+ *   <div ref="containerRef">Swipe me</div>
+ * </template>
+ * ```
+ */
+export declare function usePan(options?: UsePanOptions): UsePanReturn;
+
+/**
+ * Options for usePan composable
+ */
+export declare interface UsePanOptions {
+    /** Callback when pan starts */
+    onStart?: (e: PanEvent) => void;
+    /** Callback during pan */
+    onPan?: (e: PanEvent) => void;
+    /** Callback when pan ends */
+    onEnd?: (e: PanEvent) => void;
+    /** Minimum distance to trigger */
+    threshold?: number;
+    /** Direction constraint */
+    direction?: 'horizontal' | 'vertical' | 'all';
+    /** Prevent default behavior */
+    preventDefault?: boolean;
+    /** Pointer types */
+    pointers?: ('touch' | 'mouse')[];
+}
+
+/**
+ * Return type for usePan composable
+ */
+export declare interface UsePanReturn {
+    /** Whether pan is in progress */
+    isPanning: Ref<boolean>;
+    /** Current pan direction */
+    direction: Ref<'left' | 'right' | 'up' | 'down' | null>;
+    /** Pan distance */
+    distance: Ref<number>;
+    /** Bind pan to an element */
+    bind: (element: HTMLElement) => () => void;
+}
+
+/**
+ * Composable for parallax scrolling
+ *
+ * @param options - Configuration options
+ * @returns Parallax utilities
+ *
+ * @example
+ * ```vue
+ * <script setup>
+ * import { ref } from 'vue'
+ * import { useParallax } from 'directix'
+ *
+ * const containerRef = ref(null)
+ * const { offset, bind } = useParallax({ speed: 0.5 })
+ *
+ * onMounted(() => bind(containerRef.value))
+ * </script>
+ *
+ * <template>
+ *   <div ref="containerRef">Parallax content</div>
+ * </template>
+ * ```
+ */
+export declare function useParallax(options?: UseParallaxOptions): UseParallaxReturn;
+
+/**
+ * Options for useParallax composable
+ */
+export declare interface UseParallaxOptions {
+    /** Parallax speed factor */
+    speed?: number | Ref<number>;
+    /** Whether enabled */
+    enabled?: boolean | Ref<boolean>;
+    /** Reverse direction */
+    reverse?: boolean;
+    /** Horizontal parallax */
+    horizontal?: boolean;
+    /** Custom transform function */
+    transform?: (offset: number, el: HTMLElement) => string;
+    /** Mobile breakpoint */
+    mobileBreakpoint?: number;
+}
+
+/**
+ * Return type for useParallax composable
+ */
+export declare interface UseParallaxReturn {
+    /** Current offset */
+    offset: Ref<number>;
+    /** Whether parallax is active */
+    isActive: Ref<boolean>;
+    /** Bind parallax to an element */
+    bind: (element: HTMLElement) => () => void;
+}
+
 /**
  * Composable for checking user permissions
  *
@@ -2280,6 +3623,63 @@ export declare interface UsePermissionReturn {
     recheck: () => void;
 }
 
+/**
+ * Composable for pinch gesture
+ *
+ * @param options - Configuration options
+ * @returns Pinch gesture utilities
+ *
+ * @example
+ * ```vue
+ * <script setup>
+ * import { ref } from 'vue'
+ * import { usePinch } from 'directix'
+ *
+ * const containerRef = ref(null)
+ * const { scale, bind } = usePinch({
+ *   onPinch: (e) => console.log('Scale:', e.scale)
+ * })
+ *
+ * onMounted(() => bind(containerRef.value))
+ * </script>
+ *
+ * <template>
+ *   <div ref="containerRef">Pinch to zoom</div>
+ * </template>
+ * ```
+ */
+export declare function usePinch(options?: UsePinchOptions): UsePinchReturn;
+
+/**
+ * Options for usePinch composable
+ */
+export declare interface UsePinchOptions {
+    /** Callback when pinch starts */
+    onStart?: (e: PinchEvent) => void;
+    /** Callback during pinch */
+    onPinch?: (e: PinchEvent) => void;
+    /** Callback when pinch ends */
+    onEnd?: (e: PinchEvent) => void;
+    /** Minimum scale */
+    minScale?: number;
+    /** Maximum scale */
+    maxScale?: number;
+    /** Enable transform */
+    enableTransform?: boolean;
+}
+
+/**
+ * Return type for usePinch composable
+ */
+export declare interface UsePinchReturn {
+    /** Whether pinch is in progress */
+    isPinching: Ref<boolean>;
+    /** Current scale */
+    scale: Ref<number>;
+    /** Bind pinch to an element */
+    bind: (element: HTMLElement) => () => void;
+}
+
 /**
  * Composable for printing functionality
  *
@@ -2373,6 +3773,85 @@ export declare interface UsePrintReturn {
     printPage: () => Promise<void>;
 }
 
+/**
+ * Composable for progress bar
+ *
+ * @param options - Configuration options
+ * @returns Progress utilities
+ *
+ * @example
+ * ```vue
+ * <script setup>
+ * import { ref } from 'vue'
+ * import { useProgress } from 'directix'
+ *
+ * const containerRef = ref(null)
+ * const { value, percent, setValue, bind } = useProgress({ value: 50 })
+ *
+ * onMounted(() => bind(containerRef.value))
+ * </script>
+ *
+ * <template>
+ *   <div ref="containerRef">
+ *     <button @click="increment(10)">+10%</button>
+ *   </div>
+ * </template>
+ * ```
+ */
+export declare function useProgress(options?: UseProgressOptions): UseProgressReturn;
+
+/**
+ * Options for useProgress composable
+ */
+export declare interface UseProgressOptions {
+    /** Current progress value */
+    value?: number | Ref<number>;
+    /** Maximum value */
+    max?: number;
+    /** Minimum value */
+    min?: number;
+    /** Progress bar height */
+    height?: number;
+    /** Progress bar color */
+    color?: string;
+    /** Background color */
+    backgroundColor?: string;
+    /** Transition duration */
+    duration?: number;
+    /** Show percentage text */
+    showText?: boolean;
+    /** Indeterminate mode */
+    indeterminate?: boolean | Ref<boolean>;
+    /** Striped pattern */
+    striped?: boolean;
+    /** Animate stripes */
+    animated?: boolean;
+    /** Callback on change */
+    onChange?: (value: number, percent: number) => void;
+    /** Callback on complete */
+    onComplete?: () => void;
+}
+
+/**
+ * Return type for useProgress composable
+ */
+export declare interface UseProgressReturn {
+    /** Current value */
+    value: Ref<number>;
+    /** Current percentage */
+    percent: Ref<number>;
+    /** Set progress value */
+    setValue: (value: number) => void;
+    /** Increment progress */
+    increment: (amount?: number) => void;
+    /** Decrement progress */
+    decrement: (amount?: number) => void;
+    /** Reset to minimum */
+    reset: () => void;
+    /** Bind progress to an element */
+    bind: (element: HTMLElement) => () => void;
+}
+
 /**
  * Composable for pull to refresh functionality
  *
@@ -2480,67 +3959,265 @@ export declare interface UsePullRefreshReturn {
 }
 
 /**
- * Composable for tracking element resize
+ * Composable for tracking element resize
+ *
+ * @param options - Configuration options
+ * @returns Resize utilities
+ *
+ * @example
+ * ```vue
+ * <script setup>
+ * import { ref } from 'vue'
+ * import { useResize } from 'directix'
+ *
+ * const target = ref(null)
+ * const { width, height, bind } = useResize({
+ *   debounce: 100,
+ *   onResize: (info) => console.log('Resized:', info.width, info.height)
+ * })
+ *
+ * onMounted(() => bind(target.value))
+ * </script>
+ *
+ * <template>
+ *   <div ref="target">
+ *     Size: {{ width }} x {{ height }}
+ *   </div>
+ * </template>
+ * ```
+ */
+export declare function useResize(options?: UseResizeOptions): UseResizeReturn;
+
+/**
+ * Options for useResize composable
+ */
+export declare interface UseResizeOptions {
+    /**
+     * Debounce time in milliseconds
+     * @default 0 (no debounce)
+     */
+    debounce?: number | Ref<number>;
+    /**
+     * Box model to observe
+     * @default 'content-box'
+     */
+    box?: 'content-box' | 'border-box' | 'device-pixel-content-box';
+    /**
+     * Callback when resize occurs
+     */
+    onResize?: (info: ResizeInfo) => void;
+}
+
+/**
+ * Return type for useResize composable
+ */
+export declare interface UseResizeReturn {
+    /** Current width */
+    width: Readonly<Ref<number>>;
+    /** Current height */
+    height: Readonly<Ref<number>>;
+    /** Bind resize observer to an element */
+    bind: (element: HTMLElement) => () => void;
+    /** Stop observing */
+    stop: () => void;
+}
+
+/**
+ * Composable for creating ripple effects
+ *
+ * @param options - Configuration options
+ * @returns Ripple utilities
+ *
+ * @example
+ * ```vue
+ * <script setup>
+ * import { ref } from 'vue'
+ * import { useRipple } from 'directix'
+ *
+ * const buttonRef = ref(null)
+ * const { bind, trigger } = useRipple({
+ *   color: 'rgba(255, 255, 255, 0.3)',
+ *   duration: 600
+ * })
+ *
+ * onMounted(() => bind(buttonRef.value))
+ * </script>
+ *
+ * <template>
+ *   <button ref="buttonRef">Click for ripple</button>
+ * </template>
+ * ```
+ */
+export declare function useRipple(options?: UseRippleOptions): UseRippleReturn;
+
+/**
+ * Options for useRipple composable
+ */
+export declare interface UseRippleOptions {
+    /**
+     * Ripple color
+     * @default 'currentColor'
+     */
+    color?: string | Ref<string>;
+    /**
+     * Ripple duration in milliseconds
+     * @default 600
+     */
+    duration?: number | Ref<number>;
+    /**
+     * Whether to disable ripple
+     * @default false
+     */
+    disabled?: boolean | Ref<boolean>;
+    /**
+     * Initial scale of ripple
+     * @default 0
+     */
+    initialScale?: number;
+    /**
+     * Final scale of ripple
+     * @default 2
+     */
+    finalScale?: number;
+}
+
+/**
+ * Return type for useRipple composable
+ */
+export declare interface UseRippleReturn {
+    /** Bind ripple effect to an element */
+    bind: (element: HTMLElement) => () => void;
+    /** Trigger ripple effect manually */
+    trigger: (event?: {
+        x?: number;
+        y?: number;
+    }) => void;
+}
+
+/**
+ * Composable for rotate gesture
+ *
+ * @param options - Configuration options
+ * @returns Rotate gesture utilities
+ *
+ * @example
+ * ```vue
+ * <script setup>
+ * import { ref } from 'vue'
+ * import { useRotateGesture } from 'directix'
+ *
+ * const containerRef = ref(null)
+ * const { angle, bind } = useRotateGesture({
+ *   onRotate: (e) => console.log('Rotation:', e.rotation)
+ * })
+ *
+ * onMounted(() => bind(containerRef.value))
+ * </script>
+ *
+ * <template>
+ *   <div ref="containerRef">Rotate with two fingers</div>
+ * </template>
+ * ```
+ */
+export declare function useRotateGesture(options?: UseRotateGestureOptions): UseRotateGestureReturn;
+
+/**
+ * Options for useRotateGesture composable
+ */
+export declare interface UseRotateGestureOptions {
+    /** Callback when rotation starts */
+    onStart?: (e: RotateGestureEvent) => void;
+    /** Callback during rotation */
+    onRotate?: (e: RotateGestureEvent) => void;
+    /** Callback when rotation ends */
+    onEnd?: (e: RotateGestureEvent) => void;
+    /** Enable transform */
+    enableTransform?: boolean;
+}
+
+/**
+ * Return type for useRotateGesture composable
+ */
+export declare interface UseRotateGestureReturn {
+    /** Whether rotation is in progress */
+    isRotating: Ref<boolean>;
+    /** Current rotation angle */
+    angle: Ref<number>;
+    /** Bind rotation to an element */
+    bind: (element: HTMLElement) => () => void;
+}
+
+/**
+ * Composable for HTML sanitization
  *
  * @param options - Configuration options
- * @returns Resize utilities
+ * @returns Sanitization utilities
  *
  * @example
  * ```vue
  * <script setup>
  * import { ref } from 'vue'
- * import { useResize } from 'directix'
+ * import { useSanitize } from 'directix'
  *
- * const target = ref(null)
- * const { width, height, bind } = useResize({
- *   debounce: 100,
- *   onResize: (info) => console.log('Resized:', info.width, info.height)
+ * const { sanitize } = useSanitize({
+ *   allowedTags: ['b', 'i', 'p'],
+ *   allowedAttributes: []
  * })
  *
- * onMounted(() => bind(target.value))
+ * const safeHtml = sanitize(userInput)
  * </script>
- *
- * <template>
- *   <div ref="target">
- *     Size: {{ width }} x {{ height }}
- *   </div>
- * </template>
  * ```
  */
-export declare function useResize(options?: UseResizeOptions): UseResizeReturn;
+export declare function useSanitize(options?: UseSanitizeOptions): UseSanitizeReturn;
 
 /**
- * Options for useResize composable
+ * Options for useSanitize composable
  */
-export declare interface UseResizeOptions {
+export declare interface UseSanitizeOptions {
     /**
-     * Debounce time in milliseconds
-     * @default 0 (no debounce)
+     * Tags to allow (whitelist)
+     * @default ['b', 'i', 'u', 'strong', 'em', 'br', 'p', 'span', 'div']
      */
-    debounce?: number | Ref<number>;
+    allowedTags?: string[];
     /**
-     * Box model to observe
-     * @default 'content-box'
+     * Attributes to allow (whitelist)
+     * @default ['title', 'alt', 'href', 'src']
      */
-    box?: 'content-box' | 'border-box' | 'device-pixel-content-box';
+    allowedAttributes?: string[];
     /**
-     * Callback when resize occurs
+     * Whether to allow data URLs
+     * @default false
      */
-    onResize?: (info: ResizeInfo) => void;
+    allowDataUrls?: boolean;
+    /**
+     * Whether to allow inline styles
+     * @default false
+     */
+    allowStyles?: boolean;
+    /**
+     * Whether to allow class attribute
+     * @default false
+     */
+    allowClass?: boolean;
+    /**
+     * Whether to allow id attribute
+     * @default false
+     */
+    allowId?: boolean;
+    /**
+     * Custom sanitize function
+     */
+    handler?: (html: string) => string;
 }
 
 /**
- * Return type for useResize composable
+ * Return type for useSanitize composable
  */
-export declare interface UseResizeReturn {
-    /** Current width */
-    width: Readonly<Ref<number>>;
-    /** Current height */
-    height: Readonly<Ref<number>>;
-    /** Bind resize observer to an element */
+export declare interface UseSanitizeReturn {
+    /** Sanitize HTML string */
+    sanitize: (html: string) => string;
+    /** Sanitize and set to element */
     bind: (element: HTMLElement) => () => void;
-    /** Stop observing */
-    stop: () => void;
 }
 
 /**
@@ -2618,6 +4295,136 @@ export declare interface UseScrollReturn {
     }) => void;
 }
 
+/**
+ * Composable for skeleton loading states
+ *
+ * @param options - Configuration options
+ * @returns Skeleton utilities
+ *
+ * @example
+ * ```vue
+ * <script setup>
+ * import { ref } from 'vue'
+ * import { useSkeleton } from 'directix'
+ *
+ * const containerRef = ref(null)
+ * const loading = ref(true)
+ * const { isLoading, bind } = useSkeleton({ loading, animation: 'wave' })
+ *
+ * onMounted(() => bind(containerRef.value))
+ *
+ * // Later: loading.value = false
+ * </script>
+ *
+ * <template>
+ *   <div ref="containerRef">
+ *     <p>Content here</p>
+ *   </div>
+ * </template>
+ * ```
+ */
+export declare function useSkeleton(options?: UseSkeletonOptions): UseSkeletonReturn;
+
+/**
+ * Options for useSkeleton composable
+ */
+export declare interface UseSkeletonOptions {
+    /** Whether to show skeleton loading state */
+    loading?: boolean | Ref<boolean>;
+    /** Animation type */
+    animation?: SkeletonAnimation;
+    /** Skeleton width */
+    width?: string | number;
+    /** Skeleton height */
+    height?: string | number;
+    /** Border radius */
+    radius?: string | number;
+    /** Skeleton color */
+    color?: string;
+    /** Animation color */
+    animationColor?: string;
+    /** Custom class */
+    class?: string;
+}
+
+/**
+ * Return type for useSkeleton composable
+ */
+export declare interface UseSkeletonReturn {
+    /** Whether skeleton is currently showing */
+    isLoading: Ref<boolean>;
+    /** Show skeleton */
+    show: () => void;
+    /** Hide skeleton */
+    hide: () => void;
+    /** Toggle skeleton */
+    toggle: () => void;
+    /** Bind skeleton to an element */
+    bind: (element: HTMLElement) => () => void;
+}
+
+/**
+ * Composable for sticky positioning
+ *
+ * @param options - Configuration options
+ * @returns Sticky utilities
+ *
+ * @example
+ * ```vue
+ * <script setup>
+ * import { ref } from 'vue'
+ * import { useSticky } from 'directix'
+ *
+ * const headerRef = ref(null)
+ * const { isSticky, bind } = useSticky({
+ *   offsetTop: 60,
+ *   onStick: (sticky) => console.log('Sticky:', sticky)
+ * })
+ *
+ * onMounted(() => bind(headerRef.value))
+ * </script>
+ *
+ * <template>
+ *   <header ref="headerRef" :class="{ sticky: isSticky }">
+ *     Navigation
+ *   </header>
+ * </template>
+ * ```
+ */
+export declare function useSticky(options?: UseStickyOptions): UseStickyReturn;
+
+/**
+ * Options for useSticky composable
+ */
+export declare interface UseStickyOptions {
+    /**
+     * Offset from top in pixels
+     * @default 0
+     */
+    offsetTop?: number | Ref<number>;
+    /**
+     * Callback when stick state changes
+     */
+    onStick?: (isSticky: boolean) => void;
+    /**
+     * Whether to disable
+     * @default false
+     */
+    disabled?: boolean | Ref<boolean>;
+}
+
+/**
+ * Return type for useSticky composable
+ */
+export declare interface UseStickyReturn {
+    /** Whether the element is sticky */
+    isSticky: Readonly<Ref<boolean>>;
+    /** Bind sticky behavior to an element */
+    bind: (element: HTMLElement) => () => void;
+    /** Stop observing */
+    stop: () => void;
+}
+
 /**
  * Composable for detecting swipe gestures
  *
@@ -2780,6 +4587,102 @@ export declare interface UseThrottleReturn<T extends (...args: any[]) => any> {
     cancel: () => void;
 }
 
+/**
+ * Composable for tooltip functionality
+ *
+ * @param options - Configuration options
+ * @returns Tooltip utilities
+ *
+ * @example
+ * ```vue
+ * <script setup>
+ * import { ref } from 'vue'
+ * import { useTooltip } from 'directix'
+ *
+ * const buttonRef = ref(null)
+ * const { isVisible, bind } = useTooltip({
+ *   content: 'Tooltip text',
+ *   placement: 'top'
+ * })
+ *
+ * onMounted(() => bind(buttonRef.value))
+ * </script>
+ *
+ * <template>
+ *   <button ref="buttonRef">Hover me</button>
+ * </template>
+ * ```
+ */
+export declare function useTooltip(options?: UseTooltipOptions): UseTooltipReturn;
+
+/**
+ * Options for useTooltip composable
+ */
+export declare interface UseTooltipOptions {
+    /**
+     * Tooltip content
+     */
+    content?: string | Ref<string>;
+    /**
+     * Tooltip placement
+     * @default 'top'
+     */
+    placement?: TooltipPlacement;
+    /**
+     * Trigger type
+     * @default 'hover'
+     */
+    trigger?: TooltipTrigger;
+    /**
+     * Show delay in milliseconds
+     * @default 0
+     */
+    delay?: number;
+    /**
+     * Hide delay in milliseconds
+     * @default 0
+     */
+    hideDelay?: number;
+    /**
+     * Whether to show arrow
+     * @default true
+     */
+    arrow?: boolean;
+    /**
+     * Custom class for tooltip
+     */
+    class?: string;
+    /**
+     * Callback when tooltip shows
+     */
+    onShow?: () => void;
+    /**
+     * Callback when tooltip hides
+     */
+    onHide?: () => void;
+    /**
+     * Whether to disable
+     * @default false
+     */
+    disabled?: boolean | Ref<boolean>;
+}
+
+/**
+ * Return type for useTooltip composable
+ */
+export declare interface UseTooltipReturn {
+    /** Whether the tooltip is visible */
+    isVisible: Readonly<Ref<boolean>>;
+    /** Show the tooltip */
+    show: () => void;
+    /** Hide the tooltip */
+    hide: () => void;
+    /** Toggle the tooltip */
+    toggle: () => void;
+    /** Bind tooltip to an element */
+    bind: (element: HTMLElement) => () => void;
+}
+
 /**
  * Composable for touch gesture detection
  *
@@ -2928,21 +4831,164 @@ export declare interface UseTrimOptions {
 }
 
 /**
- * Return type for useTrim composable
+ * Return type for useTrim composable
+ */
+export declare interface UseTrimReturn {
+    /**
+     * The trimmed text
+     */
+    trimmed: Ref<string>;
+    /**
+     * Original text
+     */
+    original: Ref<string>;
+    /**
+     * Whether the text was trimmed
+     */
+    wasTrimmed: Ref<boolean>;
+}
+
+/**
+ * Composable for text truncation
+ *
+ * @param options - Configuration options
+ * @returns Truncation utilities
+ *
+ * @example
+ * ```vue
+ * <script setup>
+ * import { ref } from 'vue'
+ * import { useTruncate } from 'directix'
+ *
+ * const longText = ref('This is a very long text that needs to be truncated')
+ * const { truncated, isTruncated } = useTruncate({
+ *   text: longText,
+ *   length: 20,
+ *   position: 'middle'
+ * })
+ * </script>
+ *
+ * <template>
+ *   <span>{{ truncated }}</span>
+ *   <span v-if="isTruncated" :title="longText">...</span>
+ * </template>
+ * ```
+ */
+export declare function useTruncate(options: UseTruncateOptions): UseTruncateReturn;
+
+/**
+ * Options for useTruncate composable
+ */
+export declare interface UseTruncateOptions {
+    /**
+     * Text to truncate
+     */
+    text: string | Ref<string>;
+    /**
+     * Maximum length
+     * @default 100
+     */
+    length?: number | Ref<number>;
+    /**
+     * Truncation position
+     * @default 'end'
+     */
+    position?: TruncatePosition | Ref<TruncatePosition>;
+    /**
+     * Omission string
+     * @default '...'
+     */
+    omission?: string;
+}
+
+/**
+ * Return type for useTruncate composable
+ */
+export declare interface UseTruncateReturn {
+    /** Truncated text */
+    truncated: Readonly<Ref<string>>;
+    /** Whether the text was truncated */
+    isTruncated: Readonly<Ref<boolean>>;
+    /** Original text length */
+    originalLength: Readonly<Ref<number>>;
+    /** Truncate a custom string */
+    truncate: (text: string, length?: number, position?: TruncatePosition) => string;
+}
+
+/**
+ * Composable for typewriter effect
+ *
+ * @param options - Configuration options
+ * @returns Typewriter utilities
+ *
+ * @example
+ * ```vue
+ * <script setup>
+ * import { ref } from 'vue'
+ * import { useTypewriter } from 'directix'
+ *
+ * const containerRef = ref(null)
+ * const { displayedText, isTyping, bind } = useTypewriter({
+ *   text: 'Hello, World!',
+ *   speed: 100
+ * })
+ *
+ * onMounted(() => bind(containerRef.value))
+ * </script>
+ *
+ * <template>
+ *   <span ref="containerRef"></span>
+ * </template>
+ * ```
+ */
+export declare function useTypewriter(options: UseTypewriterOptions): UseTypewriterReturn;
+
+/**
+ * Options for useTypewriter composable
+ */
+export declare interface UseTypewriterOptions {
+    /** Text to type */
+    text: string | Ref<string>;
+    /** Typing speed */
+    speed?: number;
+    /** Delay before start */
+    delay?: number;
+    /** Loop animation */
+    loop?: boolean;
+    /** Delay before deleting */
+    deleteDelay?: number;
+    /** Delete speed */
+    deleteSpeed?: number;
+    /** Cursor character */
+    cursor?: string | false;
+    /** Cursor blink */
+    cursorBlink?: boolean;
+    /** Callback on start */
+    onStart?: () => void;
+    /** Callback on complete */
+    onComplete?: () => void;
+    /** Callback on each character */
+    onType?: (char: string, index: number) => void;
+}
+
+/**
+ * Return type for useTypewriter composable
  */
-export declare interface UseTrimReturn {
-    /**
-     * The trimmed text
-     */
-    trimmed: Ref<string>;
-    /**
-     * Original text
-     */
-    original: Ref<string>;
-    /**
-     * Whether the text was trimmed
-     */
-    wasTrimmed: Ref<boolean>;
+export declare interface UseTypewriterReturn {
+    /** Current displayed text */
+    displayedText: Ref<string>;
+    /** Whether typing is in progress */
+    isTyping: Ref<boolean>;
+    /** Whether deleting is in progress */
+    isDeleting: Ref<boolean>;
+    /** Start typing */
+    start: () => void;
+    /** Stop typing */
+    stop: () => void;
+    /** Reset to empty */
+    reset: () => void;
+    /** Bind typewriter to an element */
+    bind: (element: HTMLElement) => () => void;
 }
 
 /**
@@ -3327,6 +5373,33 @@ export declare interface UseWatermarkReturn {
     disable: () => void;
 }
 
+/**
+ * v-blur directive
+ * Background blur overlay effect
+ *
+ * @example
+ * ```vue
+ * <template>
+ *   <!-- Simple blur -->
+ *   <div v-blur="isBlurred">Content behind blur</div>
+ *
+ *   <!-- With radius -->
+ *   <div v-blur="15">Blur with 15px radius</div>
+ *
+ *   <!-- With options -->
+ *   <div v-blur="{
+ *     visible: isBlurred,
+ *     radius: 20,
+ *     overlayColor: 'rgba(255, 255, 255, 0.3)',
+ *     lockScroll: true
+ *   }">
+ *     Content
+ *   </div>
+ * </template>
+ * ```
+ */
+export declare const vBlur: Directive;
+
 /**
  * v-capitalcase directive
  *
@@ -3383,6 +5456,43 @@ export declare const vClickDelay: Directive;
  */
 export declare const vClickOutside: Directive;
 
+/**
+ * v-click-wave directive
+ * A simplified click wave effect directive
+ *
+ * @example
+ * ```vue
+ * <template>
+ *   <button v-click-wave>Click me</button>
+ *   <button v-click-wave="'rgba(255, 255, 255, 0.3)'">Custom color</button>
+ *   <button v-click-wave="{ color: 'red', duration: 400 }">Custom options</button>
+ * </template>
+ * ```
+ */
+export declare const vClickWave: Directive;
+
+/**
+ * v-context-menu directive
+ *
+ * @example
+ * ```vue
+ * <template>
+ *   <div v-context-menu="menuItems">Right click here</div>
+ *   <div v-context-menu="{ items: menuItems, width: 200 }">Custom width</div>
+ * </template>
+ *
+ * <script setup>
+ * const menuItems = [
+ *   { label: 'Copy', handler: () => console.log('Copy') },
+ *   { label: 'Paste', handler: () => console.log('Paste') },
+ *   { divider: true, label: '' },
+ *   { label: 'Delete', handler: () => console.log('Delete') }
+ * ]
+ * </script>
+ * ```
+ */
+export declare const vContextMenu: Directive;
+
 /**
  * v-copy directive
  *
@@ -3426,6 +5536,31 @@ export declare const vCopy: Directive;
  */
 export declare const vCountdown: Directive;
 
+/**
+ * v-counter directive
+ * Animated number counter
+ *
+ * @example
+ * ```vue
+ * <template>
+ *   <span v-counter="1000">0</span>
+ *
+ *   <span v-counter="{
+ *     value: 10000,
+ *     duration: 3000,
+ *     decimals: 2,
+ *     useGrouping: true
+ *   }">0</span>
+ *
+ *   <span v-counter="{
+ *     value: targetValue,
+ *     formatter: (v) => '$' + v.toFixed(2)
+ *   }">0</span>
+ * </template>
+ * ```
+ */
+export declare const vCounter: Directive;
+
 /**
  * v-debounce directive
  *
@@ -3490,6 +5625,91 @@ export declare const vDraggable: Directive;
  */
 export declare const vEllipsis: Directive;
 
+/**
+ * v-emoji directive
+ * Restrict or filter emoji input
+ *
+ * @example
+ * ```vue
+ * <template>
+ *   <!-- Strip all emojis -->
+ *   <input v-emoji type="text" />
+ *
+ *   <!-- Strip emojis with replacement -->
+ *   <input v-emoji="{ strip: true, replacement: '*' }" type="text" />
+ *
+ *   <!-- Allow specific emojis -->
+ *   <input v-emoji="{ allowList: ['😊', '👍'] }" type="text" />
+ *
+ *   <!-- Block specific emojis -->
+ *   <input v-emoji="{ blockList: ['🚫', '❌'] }" type="text" />
+ * </template>
+ * ```
+ */
+export declare const vEmoji: Directive;
+
+/**
+ * v-export directive
+ *
+ * @example
+ * ```vue
+ * <template>
+ *   <button v-export="exportData">Export CSV</button>
+ *
+ *   <button v-export="{ data: tableData, format: 'json', filename: 'my-data' }">
+ *     Export JSON
+ *   </button>
+ *
+ *   <button v-export="{
+ *     data: tableData,
+ *     format: 'csv',
+ *     columns: ['name', 'email'],
+ *     headers: { name: 'Name', email: 'Email Address' }
+ *   }">
+ *     Export with custom columns
+ *   </button>
+ * </template>
+ *
+ * <script setup>
+ * const tableData = [
+ *   { name: 'John', email: 'john@example.com', age: 30 },
+ *   { name: 'Jane', email: 'jane@example.com', age: 25 }
+ * ]
+ * </script>
+ * ```
+ */
+export declare const vExport: Directive;
+
+/**
+ * v-fade directive
+ * Fade in/out transition effect
+ *
+ * @example
+ * ```vue
+ * <template>
+ *   <!-- Toggle visibility with fade -->
+ *   <div v-fade="isVisible">Fade content</div>
+ *
+ *   <!-- Fade in only -->
+ *   <div v-fade="'in'">Fade in</div>
+ *
+ *   <!-- Fade out only -->
+ *   <div v-fade="'out'">Fade out</div>
+ *
+ *   <!-- With options -->
+ *   <div v-fade="{
+ *     visible: isVisible,
+ *     duration: 500,
+ *     easing: 'ease-in-out',
+ *     onComplete: () => console.log('Fade complete')
+ *   }">
+ *     Content
+ *   </div>
+ * </template>
+ * ```
+ */
+export declare const vFade: Directive;
+
 /**
  * v-focus directive
  *
@@ -3503,6 +5723,48 @@ export declare const vEllipsis: Directive;
  */
 export declare const vFocus: Directive;
 
+/**
+ * v-fullscreen directive
+ *
+ * @example
+ * ```vue
+ * <template>
+ *   <div v-fullscreen>
+ *     Content to show in fullscreen
+ *     <button @click="toggleFullscreen">Toggle</button>
+ *   </div>
+ *
+ *   <div v-fullscreen="{ fullscreenClass: 'my-fullscreen' }">
+ *     Custom fullscreen class
+ *   </div>
+ * </template>
+ * ```
+ */
+export declare const vFullscreen: Directive;
+
+/**
+ * v-highlight directive
+ *
+ * @example
+ * ```vue
+ * <template>
+ *   <p v-highlight="'important'">This is an important message.</p>
+ *
+ *   <p v-highlight="['Vue', 'React']">Vue and React are popular frameworks.</p>
+ *
+ *   <p v-highlight="{
+ *     keywords: 'highlight',
+ *     className: 'my-highlight',
+ *     style: 'background: yellow; color: black;',
+ *     caseSensitive: true
+ *   }">
+ *     This will highlight the word.
+ *   </p>
+ * </template>
+ * ```
+ */
+export declare const vHighlight: Directive;
+
 export declare const vHotkey: Directive;
 
 /**
@@ -3631,6 +5893,36 @@ export declare const vLoading: Directive;
  */
 export declare const vLongPress: Directive;
 
+/**
+ * v-lottie directive
+ * Lottie animation player
+ *
+ * @example
+ * ```vue
+ * <template>
+ *   <!-- With URL -->
+ *   <div v-lottie="'https://assets.example.com/animation.json'"></div>
+ *
+ *   <!-- With animation data -->
+ *   <div v-lottie="animationData"></div>
+ *
+ *   <!-- With options -->
+ *   <div v-lottie="{
+ *     animationData: animationData,
+ *     autoplay: true,
+ *     loop: true,
+ *     speed: 1.5,
+ *     onComplete: () => console.log('Done')
+ *   }"></div>
+ * </template>
+ *
+ * <script setup>
+ * import animationData from './animation.json'
+ * </script>
+ * ```
+ */
+export declare const vLottie: Directive;
+
 /**
  * v-lowercase directive
  *
@@ -3687,6 +5979,59 @@ export declare const vMutation: Directive;
 
 export declare const vNumber: Directive;
 
+/**
+ * v-pan directive
+ *
+ * @example
+ * ```vue
+ * <template>
+ *   <div v-pan="handlePan">Swipe me</div>
+ *
+ *   <div v-pan="{
+ *     onPan: handlePan,
+ *     direction: 'horizontal',
+ *     threshold: 20
+ *   }">
+ *     Horizontal only
+ *   </div>
+ * </template>
+ *
+ * <script setup>
+ * function handlePan(e) {
+ *   console.log('Direction:', e.direction)
+ *   console.log('Distance:', e.distance)
+ * }
+ * </script>
+ * ```
+ */
+export declare const vPan: Directive;
+
+/**
+ * v-parallax directive
+ * Parallax scrolling effect
+ *
+ * @example
+ * ```vue
+ * <template>
+ *   <!-- Simple parallax -->
+ *   <div v-parallax>Parallax content</div>
+ *
+ *   <!-- With speed factor -->
+ *   <div v-parallax="0.3">Slower parallax</div>
+ *
+ *   <!-- With options -->
+ *   <div v-parallax="{
+ *     speed: 0.5,
+ *     reverse: true,
+ *     mobileBreakpoint: 768
+ *   }">
+ *     Reverse parallax, disabled on mobile
+ *   </div>
+ * </template>
+ * ```
+ */
+export declare const vParallax: Directive;
+
 /**
  * v-permission directive
  *
@@ -3715,6 +6060,34 @@ export declare const vNumber: Directive;
  */
 export declare const vPermission: Directive;
 
+/**
+ * v-pinch directive
+ *
+ * @example
+ * ```vue
+ * <template>
+ *   <div v-pinch="handlePinch">Pinch to zoom</div>
+ *
+ *   <div v-pinch="{
+ *     onPinch: handlePinch,
+ *     enableTransform: true,
+ *     minScale: 0.5,
+ *     maxScale: 3
+ *   }">
+ *     Pinch to scale
+ *   </div>
+ * </template>
+ *
+ * <script setup>
+ * function handlePinch(e) {
+ *   console.log('Scale:', e.scale)
+ *   console.log('Center:', e.centerX, e.centerY)
+ * }
+ * </script>
+ * ```
+ */
+export declare const vPinch: Directive;
+
 /**
  * v-print directive
  *
@@ -3741,6 +6114,32 @@ export declare const vPermission: Directive;
  */
 export declare const vPrint: Directive;
 
+/**
+ * v-progress directive
+ * Progress bar animation
+ *
+ * @example
+ * ```vue
+ * <template>
+ *   <div v-progress="50">Progress at 50%</div>
+ *
+ *   <div v-progress="{
+ *     value: progressValue,
+ *     color: '#42b883',
+ *     height: 8,
+ *     showText: true
+ *   }">
+ *     Content
+ *   </div>
+ *
+ *   <div v-progress="{ indeterminate: true }">
+ *     Loading...
+ *   </div>
+ * </template>
+ * ```
+ */
+export declare const vProgress: Directive;
+
 export declare const vPullRefresh: Directive;
 
 /**
@@ -3770,6 +6169,33 @@ export declare const vResize: Directive;
  */
 export declare const vRipple: Directive;
 
+/**
+ * v-rotate directive
+ * Two-finger rotation gesture
+ *
+ * @example
+ * ```vue
+ * <template>
+ *   <div v-rotate="handleRotate">Rotate with two fingers</div>
+ *
+ *   <div v-rotate="{
+ *     onRotate: handleRotate,
+ *     enableTransform: true
+ *   }">
+ *     Rotate with transform
+ *   </div>
+ * </template>
+ *
+ * <script setup>
+ * function handleRotate(e) {
+ *   console.log('Rotation:', e.rotation)
+ *   console.log('Angle:', e.angle)
+ * }
+ * </script>
+ * ```
+ */
+export declare const vRotateGesture: Directive;
+
 /**
  * v-sanitize directive
  *
@@ -3797,6 +6223,28 @@ export declare const vSanitize: Directive;
  */
 export declare const vScroll: Directive;
 
+/**
+ * v-skeleton directive
+ *
+ * @example
+ * ```vue
+ * <template>
+ *   <!-- Basic usage -->
+ *   <div v-skeleton="isLoading">Content here</div>
+ *
+ *   <!-- With options -->
+ *   <div v-skeleton="{ loading: isLoading, animation: 'pulse', width: 200, height: 20 }">
+ *     Content here
+ *   </div>
+ *
+ *   <!-- Multiple skeleton lines -->
+ *   <div v-skeleton="{ loading: isLoading, height: '1em' }">Line 1</div>
+ *   <div v-skeleton="{ loading: isLoading, height: '1em' }">Line 2</div>
+ * </template>
+ * ```
+ */
+export declare const vSkeleton: Directive;
+
 /**
  * v-sticky directive
  *
@@ -3874,6 +6322,35 @@ export declare const vTrim: Directive;
  */
 export declare const vTruncate: Directive;
 
+/**
+ * v-typewriter directive
+ * Typewriter animation effect
+ *
+ * @example
+ * ```vue
+ * <template>
+ *   <!-- Simple usage -->
+ *   <span v-typewriter="'Hello, World!'"></span>
+ *
+ *   <!-- With options -->
+ *   <span v-typewriter="{
+ *     text: 'Typing animation',
+ *     speed: 100,
+ *     cursor: '_',
+ *     onComplete: () => console.log('Done!')
+ *   }"></span>
+ *
+ *   <!-- Loop mode -->
+ *   <span v-typewriter="{
+ *     text: 'Loop animation',
+ *     loop: true,
+ *     deleteDelay: 1000
+ *   }"></span>
+ * </template>
+ * ```
+ */
+export declare const vTypewriter: Directive;
+
 /**
  * Vue 2 directive hooks
  */