directix 1.3.0 → 1.4.0

package/dist/index.d.ts

@@ -1,6 +1,7 @@
 import { ComponentPublicInstance } from 'vue';
 import { Directive } from 'vue';
 import { Plugin as Plugin_2 } from 'vue';
+import { Ref } from 'vue';
 import { VNode } from 'vue';
 
 /**
@@ -14,45 +15,940 @@ export declare function addCleanupVue2(el: Element, fn: () => void): void;
 export declare function addCleanupVue3(el: Element, fn: () => void): void;
 
 /**
- * Directive binding value type
+ * Calculate remaining time
  */
-export declare type CapitalcaseBinding = boolean | CapitalcaseOptions;
+export declare function calculateTime(remaining: number): CountdownTime;
 
 /**
- * Capitalcase directive options
+ * Capitalize text based on options
  */
-export declare interface CapitalcaseOptions {
+export declare function capitalizeText(text: string, options?: {
+    every?: boolean;
+    keepLower?: string[];
+}): string;
+
+/**
+ * Capitalize a single word
+ */
+export declare function capitalizeWord(word: string): string;
+
+/**
+ * Click delay handler
+ */
+export declare type ClickDelayHandler = (event: MouseEvent | TouchEvent) => void;
+
+/**
+ * Click outside handler
+ */
+export declare type ClickOutsideHandler = (event: MouseEvent | TouchEvent) => void;
+
+/**
+ * Debounced function type for composables
+ */
+export declare interface ComposableDebouncedFunction<T extends (...args: any[]) => any> {
+    /**
+     * Call the debounced function
+     */
+    (...args: Parameters<T>): void;
+    /**
+     * Cancel any pending execution
+     */
+    cancel: () => void;
+    /**
+     * Immediately invoke if pending
+     */
+    flush: () => void;
+    /**
+     * Check if there is a pending execution
+     */
+    pending: () => boolean;
+}
+
+/**
+ * Throttled function type for composables
+ */
+export declare interface ComposableThrottledFunction<T extends (...args: any[]) => any> {
+    /**
+     * Call the throttled function
+     */
+    (...args: Parameters<T>): void;
+    /**
+     * Cancel any pending execution
+     */
+    cancel: () => void;
+}
+
+/**
+ * Countdown complete callback
+ */
+export declare type CountdownCompleteCallback = () => void;
+
+/**
+ * Countdown format function
+ */
+export declare type CountdownFormatFunction = (time: CountdownTime) => string;
+
+/**
+ * Countdown tick callback
+ */
+export declare type CountdownTickCallback = (time: CountdownTime) => void;
+
+/**
+ * Countdown time object
+ */
+export declare interface CountdownTime {
+    days: number;
+    hours: number;
+    minutes: number;
+    seconds: number;
+    milliseconds: number;
+    total: number;
+}
+
+/**
+ * Create a capitalizing function with preset options
+ *
+ * @param options - Capitalization options
+ * @returns Capitalization function
+ *
+ * @example
+ * ```ts
+ * import { createCapitalizer } from 'directix'
+ *
+ * const titleCase = createCapitalizer({ every: true })
+ * const sentenceCase = createCapitalizer({ every: false })
+ *
+ * titleCase('the quick brown fox') // 'The Quick Brown Fox'
+ * sentenceCase('the quick brown fox') // 'The quick brown fox'
+ * ```
+ */
+export declare function createCapitalizer(options?: {
+    every?: boolean;
+    keepLower?: string[];
+}): (text: string) => string;
+
+/**
+ * Create a debounced click handler
+ *
+ * @param handler - Click handler
+ * @param delay - Delay in milliseconds
+ * @returns Debounced click handler
+ *
+ * @example
+ * ```ts
+ * import { createDelayedClick } from 'directix'
+ *
+ * const delayedSubmit = createDelayedClick(submitForm, 1000)
+ *
+ * // Use in event handler
+ * button.onclick = delayedSubmit
+ * ```
+ */
+export declare function createDelayedClick(handler: ClickDelayHandler, delay?: number): (event: MouseEvent | TouchEvent) => void;
+
+/**
+ * Create a lowercase transformation function
+ *
+ * @param first - Whether to transform only the first character
+ * @returns Lowercase transformation function
+ *
+ * @example
+ * ```ts
+ * import { createLowercaser } from 'directix'
+ *
+ * const toLower = createLowercaser()
+ * toLower('HELLO') // 'hello'
+ *
+ * const firstToLower = createLowercaser(true)
+ * firstToLower('HELLO') // 'hELLO'
+ * ```
+ */
+export declare function createLowercaser(first?: boolean): (text: string) => string;
+
+/**
+ * Create a money formatter with preset options
+ *
+ * @param options - Format options
+ * @returns Money formatter function
+ *
+ * @example
+ * ```ts
+ * import { createMoneyFormatter } from 'directix'
+ *
+ * const formatEuro = createMoneyFormatter({ symbol: '€', symbolPosition: 'after' })
+ * formatEuro(1234.56) // '1,234.56€'
+ * ```
+ */
+export declare function createMoneyFormatter(options?: {
+    symbol?: string;
+    symbolPosition?: 'before' | 'after';
+    precision?: number;
+    separator?: string;
+    decimal?: string;
+}): (value: number) => string;
+
+/**
+ * Create a number formatter with preset options
+ *
+ * @param options - Format options
+ * @returns Number formatter function
+ *
+ * @example
+ * ```ts
+ * import { createNumberFormatter } from 'directix'
+ *
+ * const formatPercent = createNumberFormatter({ suffix: '%', precision: 1 })
+ * formatPercent(85.5) // '85.5%'
+ * ```
+ */
+export declare function createNumberFormatter(options?: {
+    precision?: number;
+    separator?: string;
+    decimal?: string;
+    prefix?: string;
+    suffix?: string;
+}): (value: number) => string;
+
+/**
+ * Create a permission checker with shared configuration
+ *
+ * @param config - Shared configuration
+ * @returns Permission checker function
+ *
+ * @example
+ * ```ts
+ * import { createPermissionChecker } from 'directix'
+ *
+ * const checkPermission = createPermissionChecker({
+ *   getPermissions: () => store.getters.permissions,
+ *   getRoles: () => store.getters.roles,
+ *   roleMap: { admin: ['*'], editor: ['read', 'write'] }
+ * })
+ *
+ * // Usage
+ * const isAdmin = checkPermission('admin')
+ * const canEdit = checkPermission(['read', 'write'], 'every')
+ * ```
+ */
+export declare function createPermissionChecker(config: {
+    getPermissions: () => string[];
+    getRoles?: () => string[];
+    roleMap?: Record<string, string[]>;
+}): (value: string | string[], mode?: PermissionMode) => boolean;
+
+/**
+ * Create a trim function with preset options
+ *
+ * @param position - Trim position
+ * @param chars - Custom characters to trim
+ * @returns Trim function
+ *
+ * @example
+ * ```ts
+ * import { createTrimmer } from 'directix'
+ *
+ * const trimStart = createTrimmer('start')
+ * trimStart('  hello  ') // 'hello  '
+ *
+ * const trimAsterisks = createTrimmer('both', '*')
+ * trimAsterisks('**hello**') // 'hello'
+ * ```
+ */
+export declare function createTrimmer(position?: TrimPosition, chars?: string): (text: string) => string;
+
+/**
+ * Create an uppercase transformation function
+ *
+ * @param first - Whether to transform only the first character
+ * @returns Uppercase transformation function
+ *
+ * @example
+ * ```ts
+ * import { createUppercaser } from 'directix'
+ *
+ * const toUpper = createUppercaser()
+ * toUpper('hello') // 'HELLO'
+ *
+ * const firstToUpper = createUppercaser(true)
+ * firstToUpper('hello') // 'Hello'
+ * ```
+ */
+export declare function createUppercaser(first?: boolean): (text: string) => string;
+
+/**
+ * Vue 2 directive adapter
+ * @returns Vue 2 directive object with bind/inserted/update/unbind hooks
+ */
+export declare function createVue2Directive<T, B extends Element>(hooks: DirectiveHooks<T, B>): Record<string, any>;
+
+/**
+ * Vue 3 directive adapter
+ * @returns Vue 3 directive object with created/mounted/updated/unmounted hooks
+ */
+export declare function createVue3Directive<T, B extends Element>(hooks: DirectiveHooks<T, B>): Record<string, any>;
+
+/**
+ * Create a simple watermark data URL
+ *
+ * @param content - Watermark text
+ * @param options - Additional options
+ * @returns Data URL string
+ *
+ * @example
+ * ```ts
+ * import { createWatermarkUrl } from 'directix'
+ *
+ * const url = createWatermarkUrl('Confidential', { fontSize: 20 })
+ * // Use as background-image: url(dataUrl)
+ * ```
+ */
+export declare function createWatermarkUrl(content: string | string[], options?: {
+    width?: number;
+    height?: number;
+    fontSize?: number;
+    color?: string;
+    rotate?: number;
+}): string;
+
+/**
+ * Cross-version directive type (compatible with Vue 2/3)
+ */
+export declare type CrossVersionDirective = Directive | Vue2DirectiveHooks | Vue3DirectiveHooks;
+
+/**
+ * Simple debounce function wrapper
+ *
+ * @param fn - Function to debounce
+ * @param wait - Delay in milliseconds
+ * @returns Debounced function with cancel method
+ *
+ * @example
+ * ```ts
+ * import { debounceFn } from 'directix'
+ *
+ * const debouncedSave = debounceFn(saveData, 1000)
+ *
+ * // Call multiple times, only executes once after 1s
+ * debouncedSave(data)
+ * debouncedSave(newData)
+ *
+ * // Cancel pending execution
+ * debouncedSave.cancel()
+ * ```
+ */
+export declare function debounceFn<T extends (...args: any[]) => any>(fn: T, wait?: number, options?: {
+    leading?: boolean;
+    trailing?: boolean;
+}): ComposableDebouncedFunction<T>;
+
+/**
+ * Deep clone an object
+ */
+export declare function deepClone<T>(obj: T): T;
+
+/**
+ * Deep merge objects
+ */
+export declare function deepMerge<T extends Record<string, any>>(target: T, ...sources: Partial<T>[]): T;
+
+/**
+ * Define a cross-version compatible directive
+ * @param definition The directive definition
+ * @returns Vue directive object
+ */
+export declare function defineDirective<T = any, B extends Element = Element>(definition: DirectiveDefinition<T, B>): Directive;
+
+/**
+ * Define a directive group
+ */
+export declare function defineDirectiveGroup(name: string, directives: Record<string, any>): {
+    name: string;
+    directives: Record<string, any>;
+    install: (app: any) => void;
+};
+
+/**
+ * Unified directive binding object
+ */
+export declare interface DirectiveBinding<T = any> {
+    /** The value passed to the directive */
+    value: T;
+    /** The previous value */
+    oldValue: T | null;
+    /** The directive argument (v-xxx:arg) */
+    arg?: string;
+    /** The modifiers object (v-xxx.modifier) */
+    modifiers: Record<string, boolean>;
+    /** The component instance */
+    instance: ComponentPublicInstance | null;
+}
+
+/**
+ * Directive definition interface
+ */
+export declare interface DirectiveDefinition<T = any, B extends Element = Element> extends DirectiveHooks<T, B> {
+    /** The directive name */
+    name: string;
+    /** The Vue version compatibility */
+    version?: '2' | '3' | 'both';
+    /** Whether SSR compatible */
+    ssr?: boolean;
+    /** Default values */
+    defaults?: Partial<T>;
+}
+
+/**
+ * Unified directive hooks
+ */
+export declare interface DirectiveHooks<T = any, B extends Element = Element> {
+    /**
+     * Called when the directive is bound to an element
+     * @param el The bound DOM element
+     * @param binding The binding object
+     * @param vnode The Vue virtual node
+     */
+    mounted?: (el: B, binding: DirectiveBinding<T>, vnode: VNode) => void;
+    /**
+     * Called when the element is updated
+     * @param el The bound DOM element
+     * @param binding The new binding object
+     * @param vnode The new virtual node
+     * @param prevBinding The previous binding object
+     * @param prevVnode The previous virtual node
+     */
+    updated?: (el: B, binding: DirectiveBinding<T>, vnode: VNode, prevBinding: DirectiveBinding<T>, prevVnode: VNode) => void;
+    /**
+     * Called when the directive is unbound
+     * @param el The bound DOM element
+     * @param binding The binding object
+     * @param vnode The virtual node
+     */
+    unmounted?: (el: B, binding: DirectiveBinding<T>, vnode: VNode) => void;
+}
+
+/**
+ * Directive installation options
+ */
+export declare interface DirectiveInstallOptions {
+    /** List of directive names to register, registers all if not provided */
+    directives?: string[];
+    /** Whether to register all directives */
+    all?: boolean;
+    /** Global configuration */
+    config?: Record<string, any>;
+}
+
+/**
+ * Directix plugin
+ */
+export declare const Directix: Plugin_2;
+
+/**
+ * Draggable axis
+ */
+export declare type DraggableAxis = 'x' | 'y' | 'both';
+
+/**
+ * Format number to money string
+ */
+export declare function formatMoney(value: number, options?: {
+    precision?: number;
+    separator?: string;
+    decimal?: string;
+    symbol?: string;
+    symbolPosition?: 'before' | 'after';
+}): string;
+
+/**
+ * Format number with options
+ */
+export declare function formatNumber(value: number, options?: {
+    precision?: number;
+    separator?: string;
+    decimal?: string;
+    prefix?: string;
+    suffix?: string;
+}): string;
+
+/**
+ * Format time to string
+ */
+export declare function formatTime(time: CountdownTime, format: string | CountdownFormatFunction): string;
+
+/**
+ * Generate unique ID
+ */
+export declare function generateId(prefix?: string): string;
+
+/**
+ * Get nested property value by path
+ */
+export declare function get<T = any>(obj: Record<string, any>, path: string, defaultValue?: T): T;
+
+/**
+ * Get current Vue version
+ */
+export declare function getVueVersion(): VueVersion;
+
+/**
+ * Hotkey definition
+ */
+export declare interface HotkeyDefinition {
+    /**
+     * Key combination (e.g., 'ctrl+s', 'alt+shift+a')
+     */
+    key: string;
+    /**
+     * Handler function
+     */
+    handler: (event: KeyboardEvent) => void;
+    /**
+     * Whether to prevent default behavior
+     * @default true
+     */
+    prevent?: boolean;
+    /**
+     * Whether to stop propagation
+     * @default false
+     */
+    stop?: boolean;
+    /**
+     * Whether to trigger on keyup instead of keydown
+     * @default false
+     */
+    keyup?: boolean;
+    /**
+     * Whether the hotkey is disabled
+     * @default false
+     */
+    disabled?: boolean | Ref<boolean>;
+}
+
+/**
+ * Intersect event handler
+ */
+export declare type IntersectHandler = (entry: IntersectionObserverEntry, observer: IntersectionObserver) => void;
+
+/**
+ * Check if value is an array
+ */
+export declare function isArray(value: unknown): value is any[];
+
+/**
+ * Check if value is a boolean
+ */
+export declare function isBoolean(value: unknown): value is boolean;
+
+/**
+ * Check if browser environment
+ */
+export declare const isBrowser: () => boolean;
+
+/**
+ * Check if value is empty
+ */
+export declare function isEmpty(value: unknown): boolean;
+
+/**
+ * Check if value is a function
+ */
+export declare function isFunction(value: unknown): value is (...args: any[]) => any;
+
+/**
+ * Check if value is a number
+ */
+export declare function isNumber(value: unknown): value is number;
+
+/**
+ * Check if value is an object
+ */
+export declare function isObject(value: unknown): value is Record<string, any>;
+
+/**
+ * Check if value is a Promise
+ */
+export declare function isPromise<T = any>(value: unknown): value is Promise<T>;
+
+/**
+ * Check if server-side rendering
+ */
+export declare const isSSR: () => boolean;
+
+/**
+ * Check if value is a string
+ */
+export declare function isString(value: unknown): value is string;
+
+/**
+ * Check if Vue 2 (includes 2.7)
+ */
+export declare function isVue2(): boolean;
+
+/**
+ * Check if Vue 2.7 (has built-in Composition API support)
+ */
+export declare function isVue27(): boolean;
+
+/**
+ * Check if Vue 3
+ */
+export declare function isVue3(): boolean;
+
+/**
+ * Virtual list item size function
+ */
+export declare type ItemSizeFunction = (index: number) => number;
+
+/**
+ * Transform text to lowercase
+ */
+export declare function lowercaseText(text: string, firstOnly?: boolean): string;
+
+/**
+ * Parse formatted money string to number
+ */
+export declare function parseMoney(formatted: string, options?: {
+    decimal?: string;
+    symbol?: string;
+}): number;
+
+/**
+ * Parse formatted number string to number
+ */
+export declare function parseNumber(formatted: string, options?: {
+    decimal?: string;
+    prefix?: string;
+    suffix?: string;
+}): number;
+
+/**
+ * Parse target time to timestamp
+ */
+export declare function parseTargetTime(target: Date | number | string): number;
+
+/**
+ * Parse time argument
+ * Supports formats: "300" | "300ms" | "1s"
+ */
+export declare function parseTime(arg?: string): number | null;
+
+/**
+ * Permission check mode
+ */
+export declare type PermissionMode = 'some' | 'every';
+
+/**
+ * Position type
+ */
+export declare interface Position {
+    x: number;
+    y: number;
+}
+
+/**
+ * Print before callback
+ */
+export declare type PrintBeforeCallback = () => boolean | void;
+
+/**
+ * Print complete callback
+ */
+export declare type PrintCompleteCallback = () => void;
+
+/**
+ * Pull refresh handler
+ */
+export declare type PullRefreshHandler = () => Promise<void> | void;
+
+/**
+ * Pull refresh state
+ */
+export declare type PullRefreshState = 'idle' | 'pulling' | 'ready' | 'loading' | 'success' | 'error';
+
+/**
+ * Quick print function
+ *
+ * @param target - Element or selector to print
+ * @param options - Print options
+ *
+ * @example
+ * ```ts
+ * import { quickPrint } from 'directix'
+ *
+ * // Print element by selector
+ * quickPrint('#content', { title: 'My Document' })
+ *
+ * // Print element directly
+ * const el = document.getElementById('content')
+ * quickPrint(el)
+ * ```
+ */
+export declare function quickPrint(target: string | HTMLElement, options?: UsePrintOptions): Promise<void>;
+
+/**
+ * Reset Vue version (useful for testing)
+ */
+export declare function resetVueVersion(): void;
+
+/**
+ * Resize information
+ */
+export declare interface ResizeInfo {
+    /** New width */
+    width: number;
+    /** New height */
+    height: number;
+    /** Content rect */
+    contentRect: DOMRectReadOnly;
+}
+
+/**
+ * Scroll direction
+ */
+export declare type ScrollDirection = -1 | 0 | 1;
+
+/**
+ * Scroll information
+ */
+export declare interface ScrollInfo {
+    /** Current scroll left position */
+    scrollLeft: number;
+    /** Current scroll top position */
+    scrollTop: number;
+    /** Maximum scroll left */
+    scrollLeftMax: number;
+    /** Maximum scroll top */
+    scrollTopMax: number;
+    /** Horizontal scroll progress (0-1) */
+    progressX: number;
+    /** Vertical scroll progress (0-1) */
+    progressY: number;
+    /** Direction of horizontal scroll (-1: left, 1: right, 0: none) */
+    directionX: ScrollDirection;
+    /** Direction of vertical scroll (-1: up, 1: down, 0: none) */
+    directionY: ScrollDirection;
+}
+
+/**
+ * Set nested property value by path
+ */
+export declare function set(obj: Record<string, any>, path: string, value: any): void;
+
+/**
+ * Set Vue version explicitly (for cases where auto-detection fails)
+ */
+export declare function setVueVersion(version: VueVersion): void;
+
+/**
+ * Check if Clipboard API is supported
+ */
+export declare const supportsClipboard: () => boolean;
+
+/**
+ * Check if IntersectionObserver is supported
+ */
+export declare const supportsIntersectionObserver: () => boolean;
+
+/**
+ * Check if MutationObserver is supported
+ */
+export declare const supportsMutationObserver: () => boolean;
+
+/**
+ * Check if passive event listening is supported
+ */
+export declare const supportsPassive: () => boolean;
+
+/**
+ * Check if ResizeObserver is supported
+ */
+export declare const supportsResizeObserver: () => boolean;
+
+/**
+ * Swipe direction
+ */
+export declare type SwipeDirection = 'left' | 'right' | 'up' | 'down';
+
+/**
+ * Swipe handler type
+ */
+export declare type SwipeHandler = (direction: SwipeDirection, event: Event) => void;
+
+/**
+ * Simple throttle function wrapper
+ *
+ * @param fn - Function to throttle
+ * @param wait - Delay in milliseconds
+ * @returns Throttled function with cancel method
+ *
+ * @example
+ * ```ts
+ * import { throttleFn } from 'directix'
+ *
+ * const throttledUpdate = throttleFn(updateData, 1000)
+ *
+ * // Call multiple times, only executes once per second
+ * throttledUpdate(data)
+ * throttledUpdate(newData)
+ *
+ * // Cancel pending execution
+ * throttledUpdate.cancel()
+ * ```
+ */
+export declare function throttleFn<T extends (...args: any[]) => any>(fn: T, wait?: number, options?: {
+    leading?: boolean;
+    trailing?: boolean;
+}): ComposableThrottledFunction<T>;
+
+/**
+ * Touch gesture type
+ */
+export declare type TouchGesture = 'swipe' | 'pinch' | 'rotate' | 'tap' | 'longPress';
+
+/**
+ * Touch gesture event
+ */
+export declare interface TouchGestureEvent {
+    type: TouchGesture;
+    direction?: 'left' | 'right' | 'up' | 'down';
+    distance?: number;
+    angle?: number;
+    scale?: number;
+    rotation?: number;
+    center?: {
+        x: number;
+        y: number;
+    };
+    event: TouchEvent;
+}
+
+/**
+ * Trim position
+ */
+export declare type TrimPosition = 'start' | 'end' | 'both';
+
+/**
+ * Trim text based on options
+ */
+export declare function trimText(text: string, position?: TrimPosition, chars?: string): string;
+
+/**
+ * Utility function to truncate text to a specified length
+ *
+ * @param text - Text to truncate
+ * @param maxLength - Maximum length
+ * @param ellipsis - Ellipsis string
+ * @returns Truncated text
+ *
+ * @example
+ * ```ts
+ * import { truncateText } from 'directix'
+ *
+ * const short = truncateText('Very long text here', 10)
+ * // 'Very l...'
+ * ```
+ */
+export declare function truncateText(text: string, maxLength: number, ellipsis?: string): string;
+
+/**
+ * Transform text to uppercase
+ */
+export declare function uppercaseText(text: string, firstOnly?: boolean): string;
+
+/**
+ * Composable for capitalizing text
+ *
+ * @param options - Configuration options
+ * @returns Capitalized text utilities
+ *
+ * @example
+ * ```vue
+ * <script setup>
+ * import { ref } from 'vue'
+ * import { useCapitalcase } from 'directix'
+ *
+ * const title = ref('the quick brown fox')
+ *
+ * const { capitalized } = useCapitalcase({
+ *   text: title,
+ *   every: true
+ * })
+ * // capitalized.value = 'The Quick Brown Fox'
+ * </script>
+ *
+ * <template>
+ *   <h1>{{ capitalized }}</h1>
+ * </template>
+ * ```
+ */
+export declare function useCapitalcase(options: UseCapitalcaseOptions): UseCapitalcaseReturn;
+
+/**
+ * Options for useCapitalcase composable
+ */
+export declare interface UseCapitalcaseOptions {
+    /**
+     * The text to capitalize
+     */
+    text: string | Ref<string>;
     /**
      * Whether to capitalize each word or just the first word
      * @default true
      */
-    every?: boolean;
+    every?: boolean | Ref<boolean>;
     /**
      * Words to keep lowercase (articles, prepositions, etc.)
      * @default ['a', 'an', 'the', 'and', 'but', 'or', 'for', 'nor', 'on', 'at', 'to', 'from', 'by']
      */
-    keepLower?: string[];
-    /**
-     * Whether to transform on input (for input elements)
-     * @default true
-     */
-    onInput?: boolean;
+    keepLower?: string[] | Ref<string[]>;
 }
 
 /**
- * Directive binding value type
+ * Return type for useCapitalcase composable
  */
-export declare type ClickDelayBinding = ClickDelayHandler | ClickDelayOptions;
+export declare interface UseCapitalcaseReturn {
+    /**
+     * The capitalized text
+     */
+    capitalized: Ref<string>;
+    /**
+     * Original text
+     */
+    original: Ref<string>;
+}
 
 /**
- * Click delay handler
+ * Composable for preventing repeated clicks within a delay period
+ *
+ * @param options - Configuration options
+ * @returns Click delay utilities
+ *
+ * @example
+ * ```vue
+ * <script setup>
+ * import { useClickDelay } from 'directix'
+ *
+ * const { click, isPending } = useClickDelay({
+ *   handler: async (event) => {
+ *     await submitForm()
+ *   },
+ *   delay: 500
+ * })
+ * </script>
+ *
+ * <template>
+ *   <button @click="click" :disabled="isPending">
+ *     {{ isPending ? 'Processing...' : 'Submit' }}
+ *   </button>
+ * </template>
+ * ```
  */
-export declare type ClickDelayHandler = (event: MouseEvent | TouchEvent) => void;
+export declare function useClickDelay(options: UseClickDelayOptions): UseClickDelayReturn;
 
 /**
- * Click delay directive options
+ * Options for useClickDelay composable
  */
-export declare interface ClickDelayOptions {
+export declare interface UseClickDelayOptions {
     /**
      * Click handler
      * @required
@@ -62,47 +958,74 @@ export declare interface ClickDelayOptions {
      * Delay time in milliseconds
      * @default 300
      */
-    delay?: number;
+    delay?: number | Ref<number>;
     /**
      * Whether to disable
      * @default false
      */
-    disabled?: boolean;
+    disabled?: boolean | Ref<boolean>;
+}
+
+/**
+ * Return type for useClickDelay composable
+ */
+export declare interface UseClickDelayReturn {
     /**
-     * CSS class to add during delay
-     * @default 'v-click-delay--pending'
+     * Whether a click is pending
      */
-    pendingClass?: string;
+    isPending: Ref<boolean>;
     /**
-     * Whether to show visual feedback
-     * @default true
+     * Trigger the click handler with delay protection
      */
-    feedback?: boolean;
+    click: (event: MouseEvent | TouchEvent) => void;
+    /**
+     * Manually reset the pending state
+     */
+    reset: () => void;
+    /**
+     * Cancel any pending timeout
+     */
+    cancel: () => void;
 }
 
 /**
- * Directive binding value type
- */
-export declare type ClickOutsideBinding = ClickOutsideHandler | ClickOutsideOptions;
-
-/**
- * Click outside handler
+ * Composable for detecting clicks outside an element
+ *
+ * @param options - Configuration options
+ * @returns Click outside utilities
+ *
+ * @example
+ * ```vue
+ * <script setup>
+ * import { ref } from 'vue'
+ * import { useClickOutside } from 'directix'
+ *
+ * const dropdown = ref(null)
+ * const show = ref(false)
+ *
+ * const { bind } = useClickOutside({
+ *   handler: () => show.value = false,
+ *   exclude: [() => triggerRef.value]
+ * })
+ *
+ * onMounted(() => bind(dropdown.value))
+ * </script>
+ * ```
  */
-export declare type ClickOutsideHandler = (event: MouseEvent | TouchEvent) => void;
+export declare function useClickOutside(options: UseClickOutsideOptions): UseClickOutsideReturn;
 
 /**
- * Click outside directive options
+ * Options for useClickOutside composable
  */
-export declare interface ClickOutsideOptions {
+export declare interface UseClickOutsideOptions {
     /**
      * Callback when clicking outside
-     * @required
      */
     handler: ClickOutsideHandler;
     /**
      * Excluded element selectors or element references
      */
-    exclude?: (string | HTMLElement | (() => HTMLElement | null))[];
+    exclude?: (string | HTMLElement | (() => HTMLElement | null) | Ref<HTMLElement | null>)[];
     /**
      * Whether to use capture mode
      * @default true
@@ -113,11 +1036,6 @@ export declare interface ClickOutsideOptions {
      * @default ['click']
      */
     events?: ('click' | 'mousedown' | 'mouseup' | 'touchstart' | 'touchend')[];
-    /**
-     * Whether to disable
-     * @default false
-     */
-    disabled?: boolean;
     /**
      * Stop propagation
      * @default false
@@ -131,77 +1049,132 @@ export declare interface ClickOutsideOptions {
 }
 
 /**
- * Configure permission directive
- */
-export declare function configurePermission(config: PermissionConfig): void;
-
-/**
- * Directive binding value type
+ * Return type for useClickOutside composable
  */
-export declare type CopyBinding = string | CopyOptions;
+export declare interface UseClickOutsideReturn {
+    /**
+     * Bind click outside detection to an element
+     */
+    bind: (element: HTMLElement) => () => void;
+}
 
 /**
- * Copy error callback
+ * Composable for copying text to clipboard
+ *
+ * @param options - Configuration options
+ * @returns Copy utilities
+ *
+ * @example
+ * ```vue
+ * <script setup>
+ * import { useCopy } from 'directix'
+ *
+ * const text = ref('Hello World')
+ * const { copy, copied, isSupported } = useCopy({ source: text })
+ *
+ * // Or use with inline text
+ * const { copy } = useCopy()
+ *
+ * async function handleCopy() {
+ *   await copy('Custom text')
+ * }
+ * </script>
+ *
+ * <template>
+ *   <button @click="copy()" :disabled="!isSupported">
+ *     {{ copied ? 'Copied!' : 'Copy' }}
+ *   </button>
+ * </template>
+ * ```
  */
-export declare type CopyErrorCallback = (error: Error) => void;
+export declare function useCopy(options?: UseCopyOptions): UseCopyReturn;
 
 /**
- * Copy directive options
+ * Options for useCopy composable
  */
-export declare interface CopyOptions {
+export declare interface UseCopyOptions {
     /**
-     * Text to copy
-     * @required
+     * Source text to copy (can be reactive)
      */
-    value: string;
+    source?: string | Ref<string>;
     /**
      * Callback on copy success
      */
-    onSuccess?: CopySuccessCallback;
+    onSuccess?: (text: string) => void;
     /**
      * Callback on copy error
      */
-    onError?: CopyErrorCallback;
-    /**
-     * Tooltip text for the copy button
-     */
-    title?: string;
+    onError?: (error: Error) => void;
     /**
-     * Whether to disable
-     * @default false
+     * Time in ms to reset copied state
+     * @default 1500
      */
-    disabled?: boolean;
+    copiedTimeout?: number;
 }
 
 /**
- * Copy success callback
- */
-export declare type CopySuccessCallback = (text: string) => void;
-
-/**
- * Directive binding value type
+ * Return type for useCopy composable
  */
-export declare type CountdownBinding = CountdownOptions | Date | number | string;
-
-/**
- * Countdown complete callback
- */
-export declare type CountdownCompleteCallback = () => void;
+export declare interface UseCopyReturn {
+    /**
+     * Copy function
+     * @param text - Optional text to copy (overrides source)
+     */
+    copy: (text?: string) => Promise<boolean>;
+    /**
+     * Whether the last copy was successful
+     */
+    copied: Readonly<Ref<boolean>>;
+    /**
+     * Error from the last copy attempt
+     */
+    error: Readonly<Ref<Error | null>>;
+    /**
+     * Whether clipboard API is supported
+     */
+    isSupported: boolean;
+}
 
 /**
- * Countdown format function
+ * Composable for countdown timer functionality
+ *
+ * @param options - Configuration options
+ * @returns Countdown utilities and state
+ *
+ * @example
+ * ```vue
+ * <script setup>
+ * import { useCountdown } from 'directix'
+ *
+ * const targetDate = new Date(Date.now() + 60 * 60 * 1000) // 1 hour from now
+ *
+ * const { formatted, running, completed, pause, resume } = useCountdown({
+ *   target: targetDate,
+ *   format: 'hh:mm:ss',
+ *   onComplete: () => console.log('Done!')
+ * })
+ * </script>
+ *
+ * <template>
+ *   <div>
+ *     <p>{{ formatted }}</p>
+ *     <button @click="pause" v-if="running">Pause</button>
+ *     <button @click="resume" v-if="!running && !completed">Resume</button>
+ *   </div>
+ * </template>
+ * ```
  */
-export declare type CountdownFormatFunction = (time: CountdownTime) => string;
+export declare function useCountdown(options: UseCountdownOptions): UseCountdownReturn;
 
 /**
- * Countdown directive options
+ * Options for useCountdown composable
  */
-export declare interface CountdownOptions {
+export declare interface UseCountdownOptions {
     /**
      * Target time (Date object, timestamp, or ISO string)
      * @required
      */
-    target: Date | number | string;
+    target: Date | number | string | Ref<Date | number | string>;
     /**
      * Format string or custom format function
      * - 'dd:hh:mm:ss' - Days:Hours:Minutes:Seconds
@@ -210,7 +1183,7 @@ export declare interface CountdownOptions {
      * - 'ss' - Seconds only
      * @default 'hh:mm:ss'
      */
-    format?: string | CountdownFormatFunction;
+    format?: string | CountdownFormatFunction | Ref<string | CountdownFormatFunction>;
     /**
      * Callback when countdown completes
      */
@@ -223,17 +1196,17 @@ export declare interface CountdownOptions {
      * Update interval in milliseconds
      * @default 1000
      */
-    interval?: number;
+    interval?: number | Ref<number>;
     /**
      * Whether to show milliseconds
      * @default false
      */
-    showMilliseconds?: boolean;
+    showMilliseconds?: boolean | Ref<boolean>;
     /**
      * Whether to auto-start
      * @default true
      */
-    autoStart?: boolean;
+    autoStart?: boolean | Ref<boolean>;
     /**
      * Custom labels for i18n
      */
@@ -247,215 +1220,168 @@ export declare interface CountdownOptions {
 }
 
 /**
- * Countdown tick callback
- */
-export declare type CountdownTickCallback = (time: CountdownTime) => void;
-
-/**
- * Countdown time object
- */
-export declare interface CountdownTime {
-    days: number;
-    hours: number;
-    minutes: number;
-    seconds: number;
-    milliseconds: number;
-    total: number;
-}
-
-/**
- * Vue 2 directive adapter
- * @returns Vue 2 directive object with bind/inserted/update/unbind hooks
- */
-export declare function createVue2Directive<T, B extends Element>(hooks: DirectiveHooks<T, B>): Record<string, any>;
-
-/**
- * Vue 3 directive adapter
- * @returns Vue 3 directive object with created/mounted/updated/unmounted hooks
- */
-export declare function createVue3Directive<T, B extends Element>(hooks: DirectiveHooks<T, B>): Record<string, any>;
-
-/**
- * Cross-version directive type (compatible with Vue 2/3)
- */
-export declare type CrossVersionDirective = Directive | Vue2DirectiveHooks | Vue3DirectiveHooks;
-
-/**
- * Directive binding value type
- */
-export declare type DebounceBinding<T extends (...args: any[]) => any = any> = T | DebounceOptions<T>;
-
-/**
- * Debounced function type
- */
-export declare interface DebouncedFunction<T extends (...args: any[]) => any> {
-    (...args: Parameters<T>): void;
-    cancel: () => void;
-    flush: () => void;
-}
-
-/**
- * Debounce function
- */
-export declare function debounceFn<T extends (...args: any[]) => any>(func: T, wait?: number, options?: {
-    leading?: boolean;
-    trailing?: boolean;
-}): ((...args: Parameters<T>) => void) & {
-    cancel: () => void;
-    flush: () => void;
-};
-
-/**
- * Debounce directive options
+ * Return type for useCountdown composable
  */
-export declare interface DebounceOptions<T extends (...args: any[]) => any = any> {
+export declare interface UseCountdownReturn {
     /**
-     * Function to debounce
+     * Current countdown time
      */
-    handler: T;
+    time: Ref<CountdownTime>;
     /**
-     * Delay time in milliseconds
-     * @default 300
+     * Formatted time string
      */
-    wait?: number;
+    formatted: Ref<string>;
     /**
-     * Whether to invoke immediately before delay starts
-     * @default false
+     * Whether countdown is running
      */
-    leading?: boolean;
+    running: Ref<boolean>;
     /**
-     * Whether to invoke after delay ends
-     * @default true
+     * Whether countdown is paused
      */
-    trailing?: boolean;
-}
-
-/**
- * Deep clone an object
- */
-export declare function deepClone<T>(obj: T): T;
-
-/**
- * Deep merge objects
- */
-export declare function deepMerge<T extends Record<string, any>>(target: T, ...sources: Partial<T>[]): T;
-
-/**
- * Define a cross-version compatible directive
- * @param definition The directive definition
- * @returns Vue directive object
- */
-export declare function defineDirective<T = any, B extends Element = Element>(definition: DirectiveDefinition<T, B>): Directive;
-
-/**
- * Define a directive group
- */
-export declare function defineDirectiveGroup(name: string, directives: Record<string, any>): {
-    name: string;
-    directives: Record<string, any>;
-    install: (app: any) => void;
-};
-
-/**
- * Unified directive binding object
- */
-export declare interface DirectiveBinding<T = any> {
-    /** The value passed to the directive */
-    value: T;
-    /** The previous value */
-    oldValue: T | null;
-    /** The directive argument (v-xxx:arg) */
-    arg?: string;
-    /** The modifiers object (v-xxx.modifier) */
-    modifiers: Record<string, boolean>;
-    /** The component instance */
-    instance: ComponentPublicInstance | null;
+    paused: Ref<boolean>;
+    /**
+     * Whether countdown has completed
+     */
+    completed: Ref<boolean>;
+    /**
+     * Start the countdown
+     */
+    start: () => void;
+    /**
+     * Pause the countdown
+     */
+    pause: () => void;
+    /**
+     * Resume the countdown
+     */
+    resume: () => void;
+    /**
+     * Reset the countdown
+     */
+    reset: () => void;
 }
 
 /**
- * Directive definition interface
- */
-export declare interface DirectiveDefinition<T = any, B extends Element = Element> extends DirectiveHooks<T, B> {
-    /** The directive name */
-    name: string;
-    /** The Vue version compatibility */
-    version?: '2' | '3' | 'both';
-    /** Whether SSR compatible */
-    ssr?: boolean;
-    /** Default values */
-    defaults?: Partial<T>;
-}
+ * Composable for debouncing function calls
+ *
+ * @param options - Configuration options
+ * @returns Debounced function utilities
+ *
+ * @example
+ * ```vue
+ * <script setup>
+ * import { ref } from 'vue'
+ * import { useDebounce } from 'directix'
+ *
+ * const searchQuery = ref('')
+ *
+ * const { run: debouncedSearch } = useDebounce({
+ *   handler: (query: string) => {
+ *     console.log('Searching:', query)
+ *   },
+ *   wait: 500
+ * })
+ *
+ * // Watch and debounce
+ * watch(searchQuery, (query) => {
+ *   debouncedSearch(query)
+ * })
+ * </script>
+ * ```
+ */
+export declare function useDebounce<T extends (...args: any[]) => any>(options: UseDebounceOptions<T>): UseDebounceReturn<T>;
 
 /**
- * Unified directive hooks
+ * Options for useDebounce composable
  */
-export declare interface DirectiveHooks<T = any, B extends Element = Element> {
+export declare interface UseDebounceOptions<T extends (...args: any[]) => any> {
     /**
-     * Called when the directive is bound to an element
-     * @param el The bound DOM element
-     * @param binding The binding object
-     * @param vnode The Vue virtual node
+     * Function to debounce
      */
-    mounted?: (el: B, binding: DirectiveBinding<T>, vnode: VNode) => void;
+    handler: T;
     /**
-     * Called when the element is updated
-     * @param el The bound DOM element
-     * @param binding The new binding object
-     * @param vnode The new virtual node
-     * @param prevBinding The previous binding object
-     * @param prevVnode The previous virtual node
+     * Delay time in milliseconds
+     * @default 300
      */
-    updated?: (el: B, binding: DirectiveBinding<T>, vnode: VNode, prevBinding: DirectiveBinding<T>, prevVnode: VNode) => void;
+    wait?: number | Ref<number>;
     /**
-     * Called when the directive is unbound
-     * @param el The bound DOM element
-     * @param binding The binding object
-     * @param vnode The virtual node
+     * Whether to invoke immediately before delay starts
+     * @default false
      */
-    unmounted?: (el: B, binding: DirectiveBinding<T>, vnode: VNode) => void;
+    leading?: boolean | Ref<boolean>;
+    /**
+     * Whether to invoke after delay ends
+     * @default true
+     */
+    trailing?: boolean | Ref<boolean>;
 }
 
 /**
- * Directive installation options
+ * Return type for useDebounce composable
  */
-export declare interface DirectiveInstallOptions {
-    /** List of directive names to register, registers all if not provided */
-    directives?: string[];
-    /** Whether to register all directives */
-    all?: boolean;
-    /** Global configuration */
-    config?: Record<string, any>;
+export declare interface UseDebounceReturn<T extends (...args: any[]) => any> {
+    /**
+     * Debounced function
+     */
+    run: (...args: Parameters<T>) => void;
+    /**
+     * Cancel any pending execution
+     */
+    cancel: () => void;
+    /**
+     * Immediately invoke if pending
+     */
+    flush: () => void;
+    /**
+     * Check if there is a pending execution
+     */
+    pending: () => boolean;
 }
 
 /**
- * Directix plugin
- */
-export declare const Directix: Plugin_2;
-
-/**
- * Draggable axis
- */
-export declare type DraggableAxis = 'x' | 'y' | 'both';
-
-/**
- * Directive binding value type
+ * Composable for making elements draggable
+ *
+ * @param options - Configuration options
+ * @returns Draggable utilities
+ *
+ * @example
+ * ```vue
+ * <script setup>
+ * import { ref } from 'vue'
+ * import { useDraggable } from 'directix'
+ *
+ * const target = ref(null)
+ * const { position, isDragging, bind } = useDraggable({
+ *   constrain: true,
+ *   onEnd: (pos) => console.log('Dropped at:', pos)
+ * })
+ *
+ * onMounted(() => bind(target.value))
+ * </script>
+ *
+ * <template>
+ *   <div ref="target" :class="{ dragging: isDragging }">
+ *     Drag me!
+ *   </div>
+ * </template>
+ * ```
  */
-export declare type DraggableBinding = boolean | DraggableOptions;
+export declare function useDraggable(options?: UseDraggableOptions): UseDraggableReturn;
 
 /**
- * Draggable directive options
+ * Options for useDraggable composable
  */
-export declare interface DraggableOptions {
+export declare interface UseDraggableOptions {
     /**
      * Drag axis
      * @default 'both'
      */
-    axis?: DraggableAxis;
+    axis?: DraggableAxis | Ref<DraggableAxis>;
     /**
      * Constrain to parent element
      * @default false
      */
-    constrain?: boolean;
+    constrain?: boolean | Ref<boolean>;
     /**
      * Boundary element selector or element
      */
@@ -465,1392 +1391,1940 @@ export declare interface DraggableOptions {
      */
     handle?: string;
     /**
-     * Whether dragging is disabled
-     * @default false
+     * Grid snapping [x, y]
      */
-    disabled?: boolean;
+    grid?: [number, number] | Ref<[number, number]>;
     /**
-     * Grid snapping [x, y]
+     * Whether dragging is disabled
+     * @default false
      */
-    grid?: [number, number];
+    disabled?: boolean | Ref<boolean>;
     /**
      * Start drag callback
      */
-    onStart?: (position: {
-        x: number;
-        y: number;
-    }, event: MouseEvent | TouchEvent) => void;
+    onStart?: (position: Position, event: MouseEvent | TouchEvent) => void;
     /**
      * Drag callback
      */
-    onDrag?: (position: {
-        x: number;
-        y: number;
-    }, event: MouseEvent | TouchEvent) => void;
+    onDrag?: (position: Position, event: MouseEvent | TouchEvent) => void;
     /**
      * End drag callback
      */
-    onEnd?: (position: {
-        x: number;
-        y: number;
-    }, event: MouseEvent | TouchEvent) => void;
+    onEnd?: (position: Position, event: MouseEvent | TouchEvent) => void;
+}
+
+/**
+ * Return type for useDraggable composable
+ */
+export declare interface UseDraggableReturn {
+    /** Current position */
+    position: Readonly<Ref<Position>>;
+    /** Whether the element is being dragged */
+    isDragging: Readonly<Ref<boolean>>;
+    /** Reset position to origin */
+    reset: () => void;
+    /** Bind draggable behavior to an element */
+    bind: (element: HTMLElement) => () => void;
 }
 
 /**
- * Directive binding value type
+ * Composable for text truncation with ellipsis
+ *
+ * @param options - Configuration options
+ * @returns Truncated text utilities
+ *
+ * @example
+ * ```vue
+ * <script setup>
+ * import { ref } from 'vue'
+ * import { useEllipsis } from 'directix'
+ *
+ * const longText = ref('This is a very long text that needs to be truncated')
+ *
+ * const { truncated, isTruncated } = useEllipsis({
+ *   text: longText,
+ *   maxWidth: 200,
+ *   lines: 1
+ * })
+ * </script>
+ *
+ * <template>
+ *   <span :title="isTruncated ? longText : ''">
+ *     {{ truncated }}
+ *   </span>
+ * </template>
+ * ```
  */
-export declare type EllipsisBinding = number | EllipsisOptions;
+export declare function useEllipsis(options: UseEllipsisOptions): UseEllipsisReturn;
 
 /**
- * Ellipsis directive options
+ * Options for useEllipsis composable
  */
-export declare interface EllipsisOptions {
+export declare interface UseEllipsisOptions {
+    /**
+     * The text to potentially truncate
+     */
+    text: string | Ref<string>;
     /**
      * Number of lines to show before truncating
      * @default 1
      */
-    lines?: number;
+    lines?: number | Ref<number>;
     /**
      * Custom ellipsis string
      * @default '...'
      */
-    ellipsis?: string;
+    ellipsis?: string | Ref<string>;
     /**
-     * Whether to expand on click
-     * @default false
+     * Maximum width in pixels (0 = no limit)
+     * @default 0
+     */
+    maxWidth?: number | Ref<number>;
+}
+
+/**
+ * Return type for useEllipsis composable
+ */
+export declare interface UseEllipsisReturn {
+    /**
+     * The truncated text
+     */
+    truncated: Ref<string>;
+    /**
+     * Whether the text is truncated
+     */
+    isTruncated: Ref<boolean>;
+    /**
+     * Original text
+     */
+    original: Ref<string>;
+    /**
+     * Calculate truncation for a given width
+     */
+    calculateForWidth: (width: number) => string;
+    /**
+     * Check if text would be truncated at given width
+     */
+    wouldTruncate: (width: number) => boolean;
+}
+
+/**
+ * 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
      */
-    expandable?: boolean;
+    onFocus?: (event: FocusEvent) => void;
     /**
-     * Title attribute behavior
-     * - 'auto': Show full text as title only when truncated
-     * - 'always': Always show full text as title
-     * - 'none': Don't show title
-     * @default 'auto'
+     * Callback when element loses focus
      */
-    titleBehavior?: 'auto' | 'always' | 'none';
+    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;
 }
 
 /**
- * Directive binding value type
+ * 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 type FocusBinding = boolean | FocusOptions_2;
+export declare function useHotkey(options?: UseHotkeyOptions): UseHotkeyReturn;
 
 /**
- * Focus directive options
+ * Options for useHotkey composable
  */
-declare interface FocusOptions_2 {
+export declare interface UseHotkeyOptions {
     /**
-     * Whether to auto focus
-     * @default true
+     * Single hotkey definition
      */
-    focus?: boolean;
+    hotkey?: HotkeyDefinition;
     /**
-     * Whether to refocus when binding value changes
-     * @default false
+     * Multiple hotkey definitions
      */
-    refocus?: boolean;
+    hotkeys?: HotkeyDefinition[];
     /**
-     * Callback when focused
+     * Target element to bind events (defaults to document)
      */
-    onFocus?: (el: HTMLElement) => void;
+    target?: HTMLElement | Ref<HTMLElement | null>;
     /**
-     * Callback when blurred
+     * Whether to enable the hotkey(s)
+     * @default true
      */
-    onBlur?: (el: HTMLElement) => void;
+    enabled?: boolean | Ref<boolean>;
 }
-export { FocusOptions_2 as FocusOptions }
 
 /**
- * Generate unique ID
+ * Return type for useHotkey composable
  */
-export declare function generateId(prefix?: string): string;
+export declare interface UseHotkeyReturn {
+    /**
+     * Whether the hotkey is currently enabled
+     */
+    enabled: Ref<boolean>;
+    /**
+     * Enable the hotkey
+     */
+    enable: () => void;
+    /**
+     * Disable the hotkey
+     */
+    disable: () => void;
+    /**
+     * Toggle the hotkey
+     */
+    toggle: () => void;
+    /**
+     * Add a hotkey
+     */
+    add: (hotkey: HotkeyDefinition) => void;
+    /**
+     * Remove a hotkey by key
+     */
+    remove: (key: string) => void;
+    /**
+     * Remove all hotkeys
+     */
+    clear: () => void;
+}
 
 /**
- * Get nested property value by path
+ * Composable for tracking hover state
+ *
+ * @param options - Configuration options
+ * @returns Hover utilities
+ *
+ * @example
+ * ```vue
+ * <script setup>
+ * import { ref } from 'vue'
+ * import { useHover } from 'directix'
+ *
+ * const buttonRef = ref()
+ * const { isHovering, bind } = useHover({
+ *   onEnter: () => console.log('Mouse entered'),
+ *   onLeave: () => console.log('Mouse left'),
+ *   enterDelay: 100
+ * })
+ *
+ * onMounted(() => {
+ *   const unbind = bind(buttonRef.value)
+ *   onUnmounted(unbind)
+ * })
+ * </script>
+ *
+ * <template>
+ *   <button ref="buttonRef" :class="{ 'is-hovering': isHovering }">
+ *     Hover Me
+ *   </button>
+ * </template>
+ * ```
  */
-export declare function get<T = any>(obj: Record<string, any>, path: string, defaultValue?: T): T;
+export declare function useHover(options?: UseHoverOptions): UseHoverReturn;
 
 /**
- * Get current configuration
+ * Options for useHover composable
  */
-export declare function getPermissionConfig(): PermissionConfig | null;
+export declare interface UseHoverOptions {
+    /**
+     * Callback when mouse enters
+     */
+    onEnter?: (event: MouseEvent) => void;
+    /**
+     * Callback when mouse leaves
+     */
+    onLeave?: (event: MouseEvent) => void;
+    /**
+     * CSS class to add when hovering
+     */
+    class?: string;
+    /**
+     * Delay in milliseconds before triggering enter
+     * @default 0
+     */
+    enterDelay?: number | Ref<number>;
+    /**
+     * Delay in milliseconds before triggering leave
+     * @default 0
+     */
+    leaveDelay?: number | Ref<number>;
+}
 
 /**
- * Get current Vue version
+ * Return type for useHover composable
  */
-export declare function getVueVersion(): VueVersion;
+export declare interface UseHoverReturn {
+    /**
+     * Whether the element is currently being hovered
+     */
+    isHovering: Readonly<Ref<boolean>>;
+    /**
+     * Bind events to an element
+     */
+    bind: (element: HTMLElement) => () => void;
+}
 
-export declare type HotkeyBinding = HotkeyHandler | HotkeyDefinition | HotkeyDefinition[] | Record<string, HotkeyHandler | HotkeyDefinition>;
+/**
+ * Composable for image preview functionality
+ *
+ * @param options - Configuration options
+ * @returns Image preview utilities
+ *
+ * @example
+ * ```vue
+ * <script setup>
+ * import { ref } from 'vue'
+ * import { useImagePreview } from 'directix'
+ *
+ * const imageRef = ref(null)
+ * const { isOpen, bind, open, close } = useImagePreview()
+ *
+ * onMounted(() => bind(imageRef.value))
+ *
+ * function openCustomImage() {
+ *   open('https://example.com/high-res.jpg')
+ * }
+ * </script>
+ *
+ * <template>
+ *   <img ref="imageRef" src="thumbnail.jpg" />
+ * </template>
+ * ```
+ */
+export declare function useImagePreview(options?: UseImagePreviewOptions): UseImagePreviewReturn;
 
-export declare interface HotkeyDefinition {
-    key: string;
-    modifiers?: ModifierKey[];
-    handler: HotkeyHandler;
-    prevent?: boolean;
-    stop?: boolean;
-    disabled?: boolean;
-    global?: boolean;
+/**
+ * Options for useImagePreview composable
+ */
+export declare interface UseImagePreviewOptions {
+    /**
+     * Initial image URL to preview
+     */
+    src?: string | Ref<string>;
+    /**
+     * Close on click outside
+     * @default true
+     */
+    closeOnClickOutside?: boolean;
+    /**
+     * Close on escape key
+     * @default true
+     */
+    closeOnEsc?: boolean;
+    /**
+     * Show close button
+     * @default true
+     */
+    showCloseButton?: boolean;
+    /**
+     * Callback when preview opens
+     */
+    onOpen?: () => void;
+    /**
+     * Callback when preview closes
+     */
+    onClose?: () => void;
 }
 
-export declare type HotkeyHandler = (event: KeyboardEvent) => void;
-
 /**
- * Directive binding value type
+ * Return type for useImagePreview composable
  */
-export declare type HoverBinding = HoverHandler | HoverOptions;
+export declare interface UseImagePreviewReturn {
+    /** Whether the preview is open */
+    isOpen: Readonly<Ref<boolean>>;
+    /** Current image URL */
+    currentSrc: Readonly<Ref<string>>;
+    /** Open preview with an image */
+    open: (src?: string) => void;
+    /** Close preview */
+    close: () => void;
+    /** Bind click-to-preview to an image element */
+    bind: (element: HTMLImageElement) => () => void;
+}
 
 /**
- * Hover state change handler
+ * Composable for detecting element intersection with viewport
+ *
+ * @param options - Configuration options
+ * @returns Intersection utilities
+ *
+ * @example
+ * ```vue
+ * <script setup>
+ * import { ref } from 'vue'
+ * import { useIntersect } from 'directix'
+ *
+ * const target = ref(null)
+ * const { isIntersecting, bind } = useIntersect({
+ *   threshold: 0.5,
+ *   onEnter: () => console.log('Entered'),
+ *   onLeave: () => console.log('Left')
+ * })
+ *
+ * onMounted(() => bind(target.value))
+ * </script>
+ *
+ * <template>
+ *   <div ref="target" :class="{ visible: isIntersecting }">
+ *     I'm visible!
+ *   </div>
+ * </template>
+ * ```
  */
-export declare type HoverHandler = (isHovering: boolean, event: MouseEvent) => void;
+export declare function useIntersect(options?: UseIntersectOptions): UseIntersectReturn;
 
 /**
- * Hover directive options
+ * Options for useIntersect composable
  */
-export declare interface HoverOptions {
+export declare interface UseIntersectOptions {
     /**
-     * Callback when hover state changes
+     * Callback when element intersects
      */
-    handler?: HoverHandler;
+    handler?: IntersectHandler;
     /**
-     * Callback when mouse enters
+     * Callback when element enters viewport
      */
-    onEnter?: (event: MouseEvent) => void;
+    onEnter?: (entry: IntersectionObserverEntry, observer: IntersectionObserver) => void;
     /**
-     * Callback when mouse leaves
+     * Callback when element leaves viewport
      */
-    onLeave?: (event: MouseEvent) => void;
+    onLeave?: (entry: IntersectionObserverEntry, observer: IntersectionObserver) => void;
     /**
-     * CSS class to add when hovering
-     * @default 'v-hover'
+     * Callback when element changes intersection
      */
-    class?: string;
+    onChange?: (isIntersecting: boolean, entry: IntersectionObserverEntry) => void;
     /**
-     * Whether to disable
-     * @default false
+     * Root element for intersection
+     * @default null (viewport)
      */
-    disabled?: boolean;
+    root?: Element | null | Ref<Element | null>;
     /**
-     * Delay in milliseconds before triggering enter
-     * @default 0
+     * Margin around the root
+     * @default '0px'
      */
-    enterDelay?: number;
+    rootMargin?: string;
     /**
-     * Delay in milliseconds before triggering leave
+     * Threshold(s) at which to trigger callback
      * @default 0
      */
-    leaveDelay?: number;
+    threshold?: number | number[];
+    /**
+     * Whether to trigger only once
+     * @default false
+     */
+    once?: boolean;
 }
 
-export declare type ImagePreviewBinding = string | ImagePreviewOptions;
-
 /**
- * Image preview options
+ * Return type for useIntersect composable
  */
-export declare interface ImagePreviewOptions {
-    /** Image source URL */
-    src?: string;
-    /** Preview image source URL (higher resolution) */
-    previewSrc?: string;
-    /** Alt text for accessibility */
-    alt?: string;
-    /** Whether preview is disabled @default false */
-    disabled?: boolean;
-    /** Close on click outside @default true */
-    closeOnClickOutside?: boolean;
-    /** Close on escape key @default true */
-    closeOnEsc?: boolean;
-    /** Show close button @default true */
-    showCloseButton?: boolean;
-    /** Z-index of the preview overlay @default 9999 */
-    zIndex?: number;
-    /** Custom class for the preview overlay */
-    class?: string;
-    /** Enable pinch zoom on mobile @default true */
-    enablePinchZoom?: boolean;
-    /** Enable double tap to zoom @default true */
-    enableDoubleTap?: boolean;
-    /** Enable swipe up to close @default true */
-    enableSwipeClose?: boolean;
-    /** Show zoom indicator @default true */
-    showZoomIndicator?: boolean;
-    /** Minimum zoom scale @default 0.5 */
-    minScale?: number;
-    /** Maximum zoom scale @default 5 */
-    maxScale?: number;
-    /** Callback when preview opens */
-    onOpen?: () => void;
-    /** Callback when preview closes */
-    onClose?: () => void;
+export declare interface UseIntersectReturn {
+    /**
+     * Whether the element is currently intersecting
+     */
+    isIntersecting: Readonly<Ref<boolean>>;
+    /**
+     * Current intersection ratio
+     */
+    ratio: Readonly<Ref<number>>;
+    /**
+     * Bind intersection observer to an element
+     */
+    bind: (element: HTMLElement) => () => void;
+    /**
+     * Stop observing
+     */
+    stop: () => void;
 }
 
 /**
- * Directive binding value type
- */
-export declare type InfiniteScrollBinding = InfiniteScrollHandler | InfiniteScrollOptions;
-
-/**
- * Infinite scroll handler
+ * Composable for detecting long press gestures
+ *
+ * @param options - Configuration options
+ * @returns Long press utilities
+ *
+ * @example
+ * ```vue
+ * <script setup>
+ * import { useLongPress } from 'directix'
+ *
+ * const { bind, isPressing } = useLongPress({
+ *   onTrigger: (event) => {
+ *     console.log('Long press triggered!')
+ *   },
+ *   duration: 800
+ * })
+ *
+ * // Bind to element
+ * const buttonRef = ref()
+ * onMounted(() => {
+ *   const unbind = bind(buttonRef.value)
+ *   onUnmounted(unbind)
+ * })
+ * </script>
+ *
+ * <template>
+ *   <button ref="buttonRef">Long Press Me</button>
+ * </template>
+ * ```
  */
-export declare type InfiniteScrollHandler = () => void | Promise<void>;
+export declare function useLongPress(options?: UseLongPressOptions): UseLongPressReturn;
 
 /**
- * Infinite scroll directive options
+ * Options for useLongPress composable
  */
-export declare interface InfiniteScrollOptions {
+export declare interface UseLongPressOptions {
     /**
-     * Handler to call when scrolling to bottom
-     * @required
+     * Duration in milliseconds to trigger long press
+     * @default 500
      */
-    handler: InfiniteScrollHandler;
+    duration?: number | Ref<number>;
     /**
-     * Distance from bottom to trigger load (in pixels)
-     * @default 0
+     * Maximum movement distance before canceling
+     * @default 10
      */
-    distance?: number;
+    distance?: number | Ref<number>;
     /**
-     * Whether to disable
-     * @default false
+     * Callback when long press starts (on mousedown/touchstart)
      */
-    disabled?: boolean;
+    onStart?: (event: MouseEvent | TouchEvent) => void;
     /**
-     * Whether currently loading
-     * @default false
+     * Callback when long press is triggered
      */
-    loading?: boolean;
+    onTrigger?: (event: MouseEvent | TouchEvent) => void;
     /**
-     * Whether to use IntersectionObserver (more efficient)
-     * @default true
+     * Callback when long press is canceled
      */
-    useIntersection?: boolean;
+    onCancel?: (event: MouseEvent | TouchEvent) => void;
     /**
-     * Throttle time in milliseconds
-     * @default 200
+     * Callback on each tick during long press
+     */
+    onTick?: (remaining: number) => void;
+    /**
+     * Interval for onTick callback in milliseconds
+     * @default 100
+     */
+    tickInterval?: number;
+    /**
+     * Whether to prevent default behavior
+     * @default true
      */
-    throttle?: number;
+    prevent?: boolean;
+}
+
+/**
+ * Return type for useLongPress composable
+ */
+export declare interface UseLongPressReturn {
     /**
-     * Custom scroll container
+     * Whether a long press is currently in progress
      */
-    container?: string | Element | null;
+    isPressing: Readonly<Ref<boolean>>;
     /**
-     * Callback when load starts
+     * Start long press detection
      */
-    onLoadStart?: () => void;
+    start: (event: MouseEvent | TouchEvent) => void;
     /**
-     * Callback when load completes
+     * Stop long press detection
      */
-    onLoadEnd?: () => void;
+    stop: (event: MouseEvent | TouchEvent) => void;
     /**
-     * Callback on error
+     * Bind events to an element
      */
-    onError?: (error: Error) => void;
+    bind: (element: HTMLElement) => () => void;
 }
 
 /**
- * Directive binding value type
- */
-export declare type IntersectBinding = IntersectHandler | IntersectOptions;
-
-/**
- * Intersect event handler
+ * Composable for transforming text to lowercase
+ *
+ * @param options - Configuration options
+ * @returns Lowercase text utilities
+ *
+ * @example
+ * ```vue
+ * <script setup>
+ * import { ref } from 'vue'
+ * import { useLowercase } from 'directix'
+ *
+ * const text = ref('HELLO WORLD')
+ *
+ * const { transformed } = useLowercase({ text })
+ * // transformed.value = 'hello world'
+ * </script>
+ *
+ * <template>
+ *   <p>{{ transformed }}</p>
+ * </template>
+ * ```
  */
-export declare type IntersectHandler = (entry: IntersectionObserverEntry, observer: IntersectionObserver) => void;
+export declare function useLowercase(options: UseLowercaseOptions): UseLowercaseReturn;
 
 /**
- * Intersect directive options
+ * Options for useLowercase composable
  */
-export declare interface IntersectOptions {
-    /** Callback when element intersects */
-    handler?: IntersectHandler;
-    /** Callback when element enters viewport */
-    onEnter?: (entry: IntersectionObserverEntry, observer: IntersectionObserver) => void;
-    /** Callback when element leaves viewport */
-    onLeave?: (entry: IntersectionObserverEntry, observer: IntersectionObserver) => void;
-    /** Callback when element changes intersection */
-    onChange?: (isIntersecting: boolean, entry: IntersectionObserverEntry) => void;
-    /** Root element for intersection @default null (viewport) */
-    root?: Element | null;
-    /** Margin around the root @default '0px' */
-    rootMargin?: string;
-    /** Threshold(s) at which to trigger callback @default 0 */
-    threshold?: number | number[];
-    /** Whether to disable @default false */
-    disabled?: boolean;
-    /** Whether to trigger only once @default false */
-    once?: boolean;
+export declare interface UseLowercaseOptions {
+    /**
+     * The text to transform
+     */
+    text: string | Ref<string>;
+    /**
+     * Transform only the first character
+     * @default false
+     */
+    first?: boolean | Ref<boolean>;
 }
 
 /**
- * Check if value is an array
- */
-export declare function isArray(value: unknown): value is any[];
-
-/**
- * Check if value is a boolean
- */
-export declare function isBoolean(value: unknown): value is boolean;
-
-/**
- * Check if browser environment
- */
-export declare const isBrowser: () => boolean;
-
-/**
- * Check if value is empty
- */
-export declare function isEmpty(value: unknown): boolean;
-
-/**
- * Check if value is a function
- */
-export declare function isFunction(value: unknown): value is (...args: any[]) => any;
-
-/**
- * Check if value is a number
- */
-export declare function isNumber(value: unknown): value is number;
-
-/**
- * Check if value is an object
- */
-export declare function isObject(value: unknown): value is Record<string, any>;
-
-/**
- * Check if value is a Promise
+ * Return type for useLowercase composable
  */
-export declare function isPromise<T = any>(value: unknown): value is Promise<T>;
-
-/**
- * Check if server-side rendering
- */
-export declare const isSSR: () => boolean;
-
-/**
- * Check if value is a string
- */
-export declare function isString(value: unknown): value is string;
-
-/**
- * Check if Vue 2 (includes 2.7)
- */
-export declare function isVue2(): boolean;
+export declare interface UseLowercaseReturn {
+    /**
+     * The transformed text
+     */
+    transformed: Ref<string>;
+    /**
+     * Original text
+     */
+    original: Ref<string>;
+}
 
 /**
- * Check if Vue 2.7 (has built-in Composition API support)
+ * Composable for formatting numbers as money
+ *
+ * @param options - Configuration options
+ * @returns Money formatting utilities
+ *
+ * @example
+ * ```vue
+ * <script setup>
+ * import { ref } from 'vue'
+ * import { useMoney } from 'directix'
+ *
+ * const price = ref(1234.56)
+ *
+ * const { formatted } = useMoney({
+ *   value: price,
+ *   symbol: '€',
+ *   symbolPosition: 'after'
+ * })
+ * // formatted.value = '1,234.56€'
+ * </script>
+ *
+ * <template>
+ *   <span>{{ formatted }}</span>
+ * </template>
+ * ```
  */
-export declare function isVue27(): boolean;
+export declare function useMoney(options: UseMoneyOptions): UseMoneyReturn;
 
 /**
- * Check if Vue 3
+ * Options for useMoney composable
  */
-export declare function isVue3(): boolean;
+export declare interface UseMoneyOptions {
+    /**
+     * The numeric value
+     */
+    value: number | Ref<number>;
+    /**
+     * Currency symbol
+     * @default '$'
+     */
+    symbol?: string | Ref<string>;
+    /**
+     * Symbol position
+     * @default 'before'
+     */
+    symbolPosition?: 'before' | 'after' | Ref<'before' | 'after'>;
+    /**
+     * Number of decimal places
+     * @default 2
+     */
+    precision?: number | Ref<number>;
+    /**
+     * Thousands separator
+     * @default ','
+     */
+    separator?: string | Ref<string>;
+    /**
+     * Decimal separator
+     * @default '.'
+     */
+    decimal?: string | Ref<string>;
+}
 
 /**
- * Virtual list item size function
+ * Return type for useMoney composable
  */
-export declare type ItemSizeFunction = (index: number) => number;
+export declare interface UseMoneyReturn {
+    /**
+     * The formatted money string
+     */
+    formatted: Ref<string>;
+    /**
+     * The numeric value
+     */
+    value: Ref<number>;
+    /**
+     * Parse a formatted string back to number
+     */
+    parse: (formatted: string) => number;
+}
 
 /**
- * Directive binding value type
+ * Composable for formatting numbers
+ *
+ * @param options - Configuration options
+ * @returns Number formatting utilities
+ *
+ * @example
+ * ```vue
+ * <script setup>
+ * import { ref } from 'vue'
+ * import { useNumber } from 'directix'
+ *
+ * const count = ref(1234567)
+ *
+ * const { formatted } = useNumber({
+ *   value: count,
+ *   precision: 2,
+ *   suffix: ' items'
+ * })
+ * // formatted.value = '1,234,567.00 items'
+ * </script>
+ *
+ * <template>
+ *   <span>{{ formatted }}</span>
+ * </template>
+ * ```
  */
-export declare type LazyBinding = string | LazyOptions;
+export declare function useNumber(options: UseNumberOptions): UseNumberReturn;
 
 /**
- * Lazy directive options
+ * Options for useNumber composable
  */
-export declare interface LazyOptions {
-    /**
-     * Image source URL
-     */
-    src?: string;
+export declare interface UseNumberOptions {
     /**
-     * Placeholder image URL
+     * The numeric value
      */
-    placeholder?: string;
+    value: number | Ref<number>;
     /**
-     * Error image URL (shown when loading fails)
+     * Number of decimal places
+     * @default 0
      */
-    error?: string;
+    precision?: number | Ref<number>;
     /**
-     * Preload distance in pixels
-     * @default 0
+     * Thousands separator
+     * @default ','
      */
-    preload?: number;
+    separator?: string | Ref<string>;
     /**
-     * Callback when image loads successfully
+     * Decimal separator
+     * @default '.'
      */
-    onLoad?: (el: HTMLElement) => void;
+    decimal?: string | Ref<string>;
     /**
-     * Callback when image fails to load
+     * Prefix string (e.g., '$')
      */
-    onError?: (el: HTMLElement, error: Error) => void;
+    prefix?: string | Ref<string>;
     /**
-     * Number of retry attempts
-     * @default 1
+     * Suffix string (e.g., '%')
      */
-    attempt?: number;
+    suffix?: string | Ref<string>;
+}
+
+/**
+ * Return type for useNumber composable
+ */
+export declare interface UseNumberReturn {
     /**
-     * Filter function, return false to skip loading
+     * The formatted number string
      */
-    filter?: (src: string) => boolean;
+    formatted: Ref<string>;
     /**
-     * Custom IntersectionObserver
+     * The numeric value
      */
-    observer?: IntersectionObserver;
+    value: Ref<number>;
     /**
-     * Whether to disable lazy loading
-     * @default false
+     * Parse a formatted string back to number
      */
-    disabled?: boolean;
+    parse: (formatted: string) => number;
 }
 
 /**
- * Lazy loading state
- */
-export declare type LazyState = 'pending' | 'loading' | 'loaded' | 'error';
-
-/**
- * Directive binding value type
+ * Composable for checking user permissions
+ *
+ * @param options - Configuration options
+ * @returns Permission utilities
+ *
+ * @example
+ * ```vue
+ * <script setup>
+ * import { usePermission } from 'directix'
+ *
+ * const { granted } = usePermission({
+ *   value: 'admin',
+ *   getPermissions: () => store.getters.permissions,
+ *   getRoles: () => store.getters.roles,
+ *   roleMap: { admin: ['*'], editor: ['read', 'write'] }
+ * })
+ * </script>
+ *
+ * <template>
+ *   <button v-if="granted">Admin Only Action</button>
+ * </template>
+ * ```
  */
-export declare type LoadingBinding = boolean | LoadingOptions;
+export declare function usePermission(options: UsePermissionOptions): UsePermissionReturn;
 
 /**
- * Loading directive options
+ * Options for usePermission composable
  */
-export declare interface LoadingOptions {
-    /**
-     * Loading state
-     * @default true
-     */
-    value?: boolean;
-    /**
-     * Loading text to display
-     */
-    text?: string;
-    /**
-     * CSS class for loading overlay
-     * @default 'v-loading'
-     */
-    loadingClass?: string;
+export declare interface UsePermissionOptions {
     /**
-     * CSS class for loading spinner
-     * @default 'v-loading__spinner'
+     * Permission value(s) to check
      */
-    spinnerClass?: string;
+    value: string | string[] | Ref<string | string[]>;
     /**
-     * CSS class for loading text
-     * @default 'v-loading__text'
+     * Logic for multiple permissions: 'some' (OR) or 'every' (AND)
+     * @default 'some'
      */
-    textClass?: string;
+    mode?: PermissionMode | Ref<PermissionMode>;
     /**
-     * Custom spinner HTML
+     * Custom permission check function
      */
-    spinner?: string;
+    check?: (permission: string | string[], mode: PermissionMode) => boolean;
     /**
-     * Background color
-     * @default 'rgba(255, 255, 255, 0.9)'
+     * Get current user's permissions
      */
-    background?: string;
+    getPermissions?: () => string[];
     /**
-     * Whether to lock scroll while loading
-     * @default false
+     * Get current user's roles
      */
-    lock?: boolean;
+    getRoles?: () => string[];
     /**
-     * Whether to disable
-     * @default false
+     * Role to permission mapping
      */
-    disabled?: boolean;
+    roleMap?: Record<string, string[]>;
 }
 
 /**
- * Directive binding value type
+ * Return type for usePermission composable
  */
-export declare type LongPressBinding = LongPressHandler | LongPressOptions;
+export declare interface UsePermissionReturn {
+    /** Whether the permission is granted */
+    granted: Readonly<Ref<boolean>>;
+    /** Re-check permission */
+    recheck: () => void;
+}
 
 /**
- * Long press handler
+ * Composable for printing functionality
+ *
+ * @param options - Configuration options
+ * @returns Print utilities
+ *
+ * @example
+ * ```vue
+ * <script setup>
+ * import { usePrint } from 'directix'
+ *
+ * const { isPrinting, print } = usePrint({
+ *   title: 'My Document',
+ *   onBeforePrint: () => {
+ *     console.log('About to print...')
+ *     return true
+ *   },
+ *   onAfterPrint: () => {
+ *     console.log('Print complete!')
+ *   }
+ * })
+ *
+ * async function handlePrint() {
+ *   await print('#content')
+ * }
+ * </script>
+ *
+ * <template>
+ *   <div>
+ *     <button @click="handlePrint" :disabled="isPrinting">
+ *       {{ isPrinting ? 'Printing...' : 'Print' }}
+ *     </button>
+ *     <div id="content">Content to print</div>
+ *   </div>
+ * </template>
+ * ```
  */
-export declare type LongPressHandler = (event: MouseEvent | TouchEvent) => void;
+export declare function usePrint(options?: UsePrintOptions): UsePrintReturn;
 
 /**
- * Long press directive options
+ * Options for usePrint composable
  */
-export declare interface LongPressOptions {
+export declare interface UsePrintOptions {
     /**
-     * Callback when long press is triggered
-     * @required
+     * Title for the printed document
      */
-    handler: LongPressHandler;
+    title?: string | Ref<string>;
     /**
-     * Duration in milliseconds to trigger long press
-     * @default 500
+     * Additional CSS styles to inject
      */
-    duration?: number;
+    styles?: string | string[] | Ref<string | string[]>;
     /**
-     * Whether to disable
-     * @default false
+     * Additional CSS URLs to include
      */
-    disabled?: boolean;
+    cssUrls?: string[] | Ref<string[]>;
     /**
-     * Maximum movement distance before canceling
-     * @default 10
+     * Callback before printing
+     * Return false to cancel printing
      */
-    distance?: number;
+    onBeforePrint?: PrintBeforeCallback;
     /**
-     * Callback when long press starts (on mousedown/touchstart)
+     * Callback after printing
      */
-    onStart?: (event: MouseEvent | TouchEvent) => void;
+    onAfterPrint?: PrintCompleteCallback;
     /**
-     * Callback when long press is canceled
+     * Whether to print in a new window
+     * @default false
      */
-    onCancel?: (event: MouseEvent | TouchEvent) => void;
+    newWindow?: boolean | Ref<boolean>;
     /**
-     * Callback on each tick during long press
+     * Custom class for print container
      */
-    onTick?: (remaining: number) => void;
+    printClass?: string | Ref<string>;
+}
+
+/**
+ * Return type for usePrint composable
+ */
+export declare interface UsePrintReturn {
     /**
-     * Interval for onTick callback in milliseconds
-     * @default 100
+     * Whether printing is in progress
      */
-    tickInterval?: number;
+    isPrinting: Ref<boolean>;
     /**
-     * Whether to prevent default behavior
-     * @default true
+     * Print the specified element or selector
      */
-    prevent?: boolean;
+    print: (target?: string | HTMLElement) => Promise<void>;
     /**
-     * Whether to stop propagation
-     * @default false
+     * Print the current page
      */
-    stop?: boolean;
+    printPage: () => Promise<void>;
 }
 
 /**
- * Directive binding value type
+ * Composable for pull to refresh functionality
+ *
+ * @param options - Configuration options
+ * @returns Pull refresh utilities and state
+ *
+ * @example
+ * ```vue
+ * <script setup>
+ * import { usePullRefresh } from 'directix'
+ *
+ * const { state, distance, events, containerRef } = usePullRefresh({
+ *   handler: async () => {
+ *     await fetchData()
+ *   },
+ *   distance: 80
+ * })
+ * </script>
+ *
+ * <template>
+ *   <div
+ *     ref="containerRef"
+ *     @touchstart="events.touchstart"
+ *     @touchmove="events.touchmove"
+ *     @touchend="events.touchend"
+ *   >
+ *     <div class="indicator" :style="{ transform: `translateY(${distance}px)` }">
+ *       {{ state }}
+ *     </div>
+ *     <slot></slot>
+ *   </div>
+ * </template>
+ * ```
  */
-export declare type LowercaseBinding = boolean | LowercaseOptions;
+export declare function usePullRefresh(options: UsePullRefreshOptions): UsePullRefreshReturn;
 
 /**
- * Lowercase directive options
+ * Options for usePullRefresh composable
  */
-export declare interface LowercaseOptions {
+export declare interface UsePullRefreshOptions {
     /**
-     * Transform only the first character
-     * @default false
+     * Refresh handler
+     * @required
      */
-    first?: boolean;
+    handler: PullRefreshHandler;
     /**
-     * Transform on input event (for input elements)
-     * @default true
+     * Distance threshold to trigger refresh
+     * @default 60
      */
-    onInput?: boolean;
-}
-
-export declare type MaskBinding = string | MaskOptions;
-
-/**
- * Mask directive options
- */
-export declare interface MaskOptions {
-    /** Mask pattern: # digit, A letter, N alphanumeric, X any, others as literals */
-    mask: 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;
-    /** Callback when value changes */
-    onChange?: (value: string, rawValue: string) => void;
-    /** Callback when mask is complete */
-    onComplete?: (value: string) => void;
-}
-
-export declare type ModifierKey = 'ctrl' | 'alt' | 'shift' | 'meta';
-
-export declare type MoneyBinding = string | MoneyOptions;
-
-/**
- * Money directive options
- */
-export declare interface MoneyOptions extends NumberFormatOptions {
-    /** Currency symbol @default '$' */
-    symbol?: string;
-    /** Symbol position @default 'before' */
-    symbolPosition?: 'before' | 'after';
-}
-
-/**
- * Directive binding value type
- */
-export declare type MutationBinding = MutationHandler | MutationOptions;
-
-/**
- * Mutation change handler
- */
-export declare type MutationHandler = (mutations: MutationRecord[], observer: MutationObserver) => void;
-
-/**
- * Mutation directive options
- */
-export declare interface MutationOptions {
+    distance?: number | Ref<number>;
     /**
-     * Callback when mutations occur
-     * @required
+     * Maximum pull distance
+     * @default 100
      */
-    handler: MutationHandler;
+    maxDistance?: number | Ref<number>;
     /**
-     * Whether to observe attribute changes
+     * Whether to disable pull to refresh
      * @default false
      */
-    attributes?: boolean;
+    disabled?: boolean | Ref<boolean>;
     /**
-     * Specific attributes to observe
+     * Duration to show success indicator
+     * @default 500
      */
-    attributeFilter?: string[];
+    successDuration?: number | Ref<number>;
     /**
-     * Whether to observe child node additions/removals
-     * @default true
+     * Duration to show error indicator
+     * @default 1000
      */
-    childList?: boolean;
+    errorDuration?: number | Ref<number>;
+}
+
+/**
+ * Return type for usePullRefresh composable
+ */
+export declare interface UsePullRefreshReturn {
     /**
-     * Whether to observe all descendants, not just direct children
-     * @default false
+     * Current pull refresh state
      */
-    subtree?: boolean;
+    state: Ref<PullRefreshState>;
     /**
-     * Whether to observe character data changes
-     * @default false
+     * Current pull distance
      */
-    characterData?: boolean;
+    distance: Ref<number>;
     /**
-     * Whether to record old attribute values
-     * @default false
+     * Whether pull to refresh is currently active
      */
-    attributeOldValue?: boolean;
+    isPulling: Ref<boolean>;
     /**
-     * Whether to record old character data
-     * @default false
+     * Event handlers to bind to the container element
+     */
+    events: {
+        touchstart: (e: TouchEvent) => void;
+        touchmove: (e: TouchEvent) => void;
+        touchend: () => void;
+    };
+    /**
+     * Container ref to bind to the scroll container
      */
-    characterDataOldValue?: boolean;
+    containerRef: Ref<HTMLElement | null>;
     /**
-     * Whether to disable
-     * @default false
+     * Manually trigger refresh
      */
-    disabled?: boolean;
+    refresh: () => Promise<void>;
 }
 
-export declare type NumberBinding = number | NumberOptions;
-
-/**
- * Shared utilities for number and money formatting directives
- */
 /**
- * Base options shared by number and money formatting
+ * 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>
+ * ```
  */
-declare interface NumberFormatOptions {
-    /** Number of decimal places */
-    precision?: number;
-    /** Thousands separator */
-    separator?: string;
-    /** Decimal separator */
-    decimal?: string;
-    /** Whether to allow negative numbers @default true */
-    allowNegative?: boolean;
-    /** Minimum value */
-    min?: number;
-    /** Maximum value */
-    max?: number;
-}
+export declare function useResize(options?: UseResizeOptions): UseResizeReturn;
 
 /**
- * Number directive options
+ * Options for useResize composable
  */
-export declare interface NumberOptions extends NumberFormatOptions {
-    /** Prefix string (e.g., '$') */
-    prefix?: string;
-    /** Suffix string (e.g., '%') */
-    suffix?: string;
+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;
 }
 
 /**
- * Parse time argument
- * Supports formats: "300" | "300ms" | "1s"
- */
-export declare function parseTime(arg?: string): number | null;
-
-/**
- * Permission action mode
- */
-export declare type PermissionAction = 'remove' | 'disable' | 'hide';
-
-/**
- * Directive binding value type
- */
-export declare type PermissionBinding = string | string[] | PermissionOptions;
-
-/**
- * Permission configuration
+ * Return type for useResize composable
  */
-export 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[]>;
+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;
 }
 
 /**
- * Permission check mode
+ * Composable for tracking scroll position
+ *
+ * @param options - Configuration options
+ * @returns Scroll utilities
+ *
+ * @example
+ * ```vue
+ * <script setup>
+ * import { ref } from 'vue'
+ * import { useScroll } from 'directix'
+ *
+ * const container = ref(null)
+ * const { scrollTop, progressY, directionY, bind } = useScroll()
+ *
+ * onMounted(() => bind(container.value))
+ * </script>
+ *
+ * <template>
+ *   <div ref="container" class="scroll-container">
+ *     <div class="progress" :style="{ width: `${progressY * 100}%` }" />
+ *   </div>
+ * </template>
+ * ```
  */
-declare type PermissionMode = 'some' | 'every';
+export declare function useScroll(options?: UseScrollOptions): UseScrollReturn;
 
 /**
- * Permission directive options
+ * Options for useScroll composable
  */
-export declare interface PermissionOptions {
-    /** Permission value(s) to check */
-    value: string | string[];
-    /** Logic for multiple permissions: 'some' (OR) or 'every' (AND). Default: 'some' */
-    mode?: PermissionMode;
-    /** Action when permission denied. Default: 'remove' */
-    action?: PermissionAction;
-    /** Custom permission check function */
-    check?: (permission: string | string[], mode: PermissionMode) => boolean;
-    /** Callback when permission state changes */
-    onChange?: (hasPermission: boolean) => void;
+export declare interface UseScrollOptions {
+    /**
+     * Throttle time in milliseconds
+     * @default 0 (no throttle)
+     */
+    throttle?: number | Ref<number>;
+    /**
+     * Whether to use passive event listener
+     * @default true
+     */
+    passive?: boolean;
 }
 
 /**
- * Print before callback
- */
-export declare type PrintBeforeCallback = () => boolean | void;
-
-/**
- * Directive binding value type
+ * Return type for useScroll composable
  */
-export declare type PrintBinding = PrintOptions | boolean;
+export declare interface UseScrollReturn {
+    /** Current scroll left position */
+    scrollLeft: Readonly<Ref<number>>;
+    /** Current scroll top position */
+    scrollTop: Readonly<Ref<number>>;
+    /** Horizontal scroll progress (0-1) */
+    progressX: Readonly<Ref<number>>;
+    /** Vertical scroll progress (0-1) */
+    progressY: Readonly<Ref<number>>;
+    /** Direction of horizontal scroll */
+    directionX: Readonly<Ref<ScrollDirection>>;
+    /** Direction of vertical scroll */
+    directionY: Readonly<Ref<ScrollDirection>>;
+    /** Whether the user is scrolling */
+    isScrolling: Readonly<Ref<boolean>>;
+    /** Scroll info object (reactive) */
+    info: Readonly<Ref<ScrollInfo>>;
+    /** Bind scroll listener to an element */
+    bind: (element?: HTMLElement | Window) => () => void;
+    /** Stop listening */
+    stop: () => void;
+    /** Scroll to a position */
+    scrollTo: (options: {
+        top?: number;
+        left?: number;
+        behavior?: 'auto' | 'smooth';
+    }) => void;
+}
 
 /**
- * Print complete callback
+ * Composable for detecting swipe gestures
+ *
+ * @param options - Configuration options
+ * @returns Swipe utilities
+ *
+ * @example
+ * ```vue
+ * <script setup>
+ * import { ref } from 'vue'
+ * import { useSwipe } from 'directix'
+ *
+ * const container = ref(null)
+ * const { direction, bind } = useSwipe({
+ *   onLeft: () => nextSlide(),
+ *   onRight: () => prevSlide()
+ * })
+ *
+ * onMounted(() => bind(container.value))
+ * </script>
+ *
+ * <template>
+ *   <div ref="container">
+ *     Swipe me!
+ *   </div>
+ * </template>
+ * ```
  */
-export declare type PrintCompleteCallback = () => void;
+export declare function useSwipe(options?: UseSwipeOptions): UseSwipeReturn;
 
 /**
- * Print directive options
+ * Options for useSwipe composable
  */
-export declare interface PrintOptions {
+export declare interface UseSwipeOptions {
     /**
-     * Title for the printed document
+     * Swipe handler
+     */
+    handler?: SwipeHandler;
+    /**
+     * Minimum distance to trigger swipe
+     * @default 30
      */
-    title?: string;
+    threshold?: number | Ref<number>;
     /**
-     * Additional CSS styles to inject
+     * Maximum time for swipe
+     * @default 500
      */
-    styles?: string | string[];
+    maxTime?: number | Ref<number>;
     /**
-     * Additional CSS URLs to include
+     * Allowed directions
+     * @default ['left', 'right', 'up', 'down']
      */
-    cssUrls?: string[];
+    directions?: SwipeDirection[];
     /**
-     * Callback before printing
-     * Return false to cancel printing
+     * Whether to prevent scroll on swipe
+     * @default true
      */
-    onBeforePrint?: PrintBeforeCallback;
+    preventScrollOnSwipe?: boolean;
     /**
-     * Callback after printing
+     * Whether to enable mouse events
+     * @default true
      */
-    onAfterPrint?: PrintCompleteCallback;
+    mouse?: boolean;
     /**
-     * Whether to print immediately on mount
-     * @default false
+     * Callback for left swipe
      */
-    immediate?: boolean;
+    onLeft?: () => void;
     /**
-     * Print target selector
-     * If not specified, prints the element itself
+     * Callback for right swipe
      */
-    target?: string;
+    onRight?: () => void;
     /**
-     * Whether to print in a new window
-     * @default false
+     * Callback for up swipe
      */
-    newWindow?: boolean;
+    onUp?: () => void;
     /**
-     * Custom class for print container
+     * Callback for down swipe
      */
-    printClass?: string;
-}
-
-export declare type PullRefreshBinding = PullRefreshHandler | PullRefreshOptions;
-
-export declare type PullRefreshHandler = () => Promise<void> | void;
-
-export declare interface PullRefreshOptions {
-    handler: PullRefreshHandler;
-    distance?: number;
-    maxDistance?: number;
-    disabled?: boolean;
-    indicator?: {
-        idle?: string;
-        pulling?: string;
-        ready?: string;
-        loading?: string;
-        success?: string;
-        error?: string;
-    };
-    successDuration?: number;
-    errorDuration?: number;
-    onStateChange?: (state: PullRefreshState) => void;
+    onDown?: () => void;
 }
 
-export declare type PullRefreshState = 'idle' | 'pulling' | 'ready' | 'loading' | 'success' | 'error';
-
-/**
- * Reset Vue version (useful for testing)
- */
-export declare function resetVueVersion(): void;
-
-/**
- * Directive binding value type
- */
-export declare type ResizeBinding = ResizeHandler | ResizeOptions;
-
 /**
- * Resize event handler
+ * Return type for useSwipe composable
  */
-export declare type ResizeHandler = (entry: ResizeObserverEntry) => void;
+export declare interface UseSwipeReturn {
+    /** Current swipe direction */
+    direction: Readonly<Ref<SwipeDirection | null>>;
+    /** Length of the swipe */
+    lengthX: Readonly<Ref<number>>;
+    /** Length of the swipe */
+    lengthY: Readonly<Ref<number>>;
+    /** Whether a swipe is being performed */
+    isSwiping: Readonly<Ref<boolean>>;
+    /** Bind swipe detection to an element */
+    bind: (element: HTMLElement) => () => void;
+}
 
 /**
- * Resize information
+ * Composable for throttling function calls
+ *
+ * @param options - Configuration options
+ * @returns Throttled function utilities
+ *
+ * @example
+ * ```vue
+ * <script setup>
+ * import { ref } from 'vue'
+ * import { useThrottle } from 'directix'
+ *
+ * const { run: throttledScroll } = useThrottle({
+ *   handler: (event) => {
+ *     console.log('Scroll position:', event.target.scrollTop)
+ *   },
+ *   wait: 100
+ * })
+ *
+ * // Use in template
+ * // <div @scroll="throttledScroll($event)">...</div>
+ * </script>
+ * ```
  */
-export declare interface ResizeInfo {
-    /** New width */
-    width: number;
-    /** New height */
-    height: number;
-    /** Content rect */
-    contentRect: DOMRectReadOnly;
-    /** Border box size */
-    borderBoxSize: ReadonlyArray<ResizeObserverSize>;
-    /** Content box size */
-    contentBoxSize: ReadonlyArray<ResizeObserverSize>;
-    /** Device pixel content box size */
-    devicePixelContentBoxSize: ReadonlyArray<ResizeObserverSize>;
-}
+export declare function useThrottle<T extends (...args: any[]) => any>(options: UseThrottleOptions<T>): UseThrottleReturn<T>;
 
 /**
- * Resize directive options
+ * Options for useThrottle composable
  */
-export declare interface ResizeOptions {
+export declare interface UseThrottleOptions<T extends (...args: any[]) => any> {
     /**
-     * Resize event handler
-     * @required
+     * Function to throttle
      */
-    handler: ResizeHandler;
+    handler: T;
     /**
-     * Whether to disable
-     * @default false
+     * Delay time in milliseconds
+     * @default 300
      */
-    disabled?: boolean;
+    wait?: number | Ref<number>;
     /**
-     * Whether to use box model
-     * - 'content-box': size of content area
-     * - 'border-box': size of border box
-     * - 'device-pixel-content-box': size in device pixels
-     * @default 'content-box'
+     * Whether to invoke immediately before delay starts
+     * @default true
      */
-    box?: 'content-box' | 'border-box' | 'device-pixel-content-box';
+    leading?: boolean | Ref<boolean>;
     /**
-     * Debounce time in milliseconds
-     * @default 0 (no debounce)
+     * Whether to invoke after delay ends
+     * @default true
+     */
+    trailing?: boolean | Ref<boolean>;
+}
+
+/**
+ * Return type for useThrottle composable
+ */
+export declare interface UseThrottleReturn<T extends (...args: any[]) => any> {
+    /**
+     * Throttled function
      */
-    debounce?: number;
+    run: (...args: Parameters<T>) => void;
     /**
-     * Callback for browsers without ResizeObserver (uses object fallback)
+     * Cancel any pending execution
      */
-    onFallback?: (info: ResizeInfo) => void;
+    cancel: () => void;
 }
 
 /**
- * Directive binding value type
+ * Composable for touch gesture detection
+ *
+ * @param options - Configuration options
+ * @returns Touch gesture utilities
+ *
+ * @example
+ * ```vue
+ * <script setup>
+ * import { ref } from 'vue'
+ * import { useTouch } from 'directix'
+ *
+ * const containerRef = ref(null)
+ * const { gesture, bind } = useTouch({
+ *   onSwipeLeft: () => nextSlide(),
+ *   onSwipeRight: () => prevSlide()
+ * })
+ *
+ * onMounted(() => bind(containerRef.value))
+ * </script>
+ *
+ * <template>
+ *   <div ref="containerRef">
+ *     Swipe me!
+ *   </div>
+ * </template>
+ * ```
  */
-export declare type RippleBinding = boolean | string | RippleOptions;
+export declare function useTouch(options?: UseTouchOptions): UseTouchReturn;
 
 /**
- * Ripple directive options
+ * Options for useTouch composable
  */
-export declare interface RippleOptions {
+export declare interface UseTouchOptions {
     /**
-     * Ripple color
-     * @default 'currentColor'
+     * Callback for swipe gesture
      */
-    color?: string;
+    onSwipe?: (event: TouchGestureEvent) => void;
     /**
-     * Ripple duration in milliseconds
-     * @default 600
+     * Callback for swipe left
      */
-    duration?: number;
+    onSwipeLeft?: (event: TouchGestureEvent) => void;
     /**
-     * Whether to disable ripple
-     * @default false
+     * Callback for swipe right
      */
-    disabled?: boolean;
+    onSwipeRight?: (event: TouchGestureEvent) => void;
     /**
-     * Initial scale of ripple
-     * @default 0
+     * Callback for swipe up
      */
-    initialScale?: number;
+    onSwipeUp?: (event: TouchGestureEvent) => void;
     /**
-     * Final scale of ripple
-     * @default 2
+     * Callback for swipe down
      */
-    finalScale?: number;
-}
-
-/**
- * Directive binding value type
- */
-export declare type SanitizeBinding = boolean | SanitizeOptions;
-
-/**
- * Sanitize handler
- */
-export declare type SanitizeHandler = (value: string) => string;
-
-/**
- * Sanitize directive options
- */
-export declare interface SanitizeOptions {
+    onSwipeDown?: (event: TouchGestureEvent) => void;
     /**
-     * Tags to allow (whitelist)
-     * @default []
+     * Callback for pinch gesture
      */
-    allowedTags?: string[];
+    onPinch?: (event: TouchGestureEvent) => void;
     /**
-     * Attributes to allow (whitelist)
-     * @default []
+     * Callback for rotate gesture
      */
-    allowedAttributes?: string[];
+    onRotate?: (event: TouchGestureEvent) => void;
     /**
-     * Whether to allow data URLs
-     * @default false
+     * Callback for tap gesture
      */
-    allowDataUrls?: boolean;
+    onTap?: (event: TouchGestureEvent) => void;
     /**
-     * Whether to allow inline styles
-     * @default false
+     * Callback for long press gesture
      */
-    allowStyles?: boolean;
+    onLongPress?: (event: TouchGestureEvent) => void;
     /**
-     * Whether to allow class attribute
-     * @default false
+     * Swipe threshold distance in pixels
+     * @default 30
      */
-    allowClass?: boolean;
+    swipeThreshold?: number;
     /**
-     * Whether to allow id attribute
-     * @default false
+     * Long press duration in milliseconds
+     * @default 500
      */
-    allowId?: boolean;
+    longPressDuration?: number;
     /**
-     * Custom sanitize function
+     * Tap max duration in milliseconds
+     * @default 250
      */
-    handler?: SanitizeHandler;
+    tapDuration?: number;
     /**
      * Whether to disable
      * @default false
      */
-    disabled?: boolean;
-    /**
-     * Whether to sanitize on update
-     * @default true
-     */
-    sanitizeOnUpdate?: boolean;
+    disabled?: boolean | Ref<boolean>;
 }
 
 /**
- * Directive binding value type
- */
-export declare type ScrollBinding = ScrollHandler | ScrollOptions_2;
-
-/**
- * Scroll event handler
+ * Return type for useTouch composable
  */
-export declare type ScrollHandler = (event: Event, info: ScrollInfo) => void;
+export declare interface UseTouchReturn {
+    /** Current gesture being performed */
+    gesture: Readonly<Ref<TouchGesture | null>>;
+    /** Bind touch events to an element */
+    bind: (element: HTMLElement) => () => void;
+}
 
 /**
- * Scroll information
+ * Composable for trimming text
+ *
+ * @param options - Configuration options
+ * @returns Trimmed text utilities
+ *
+ * @example
+ * ```vue
+ * <script setup>
+ * import { ref } from 'vue'
+ * import { useTrim } from 'directix'
+ *
+ * const text = ref('  hello world  ')
+ *
+ * const { trimmed, wasTrimmed } = useTrim({ text })
+ * // trimmed.value = 'hello world'
+ * // wasTrimmed.value = true
+ * </script>
+ *
+ * <template>
+ *   <p>{{ trimmed }}</p>
+ * </template>
+ * ```
  */
-export declare interface ScrollInfo {
-    /** Current scroll left position */
-    scrollLeft: number;
-    /** Current scroll top position */
-    scrollTop: number;
-    /** Maximum scroll left */
-    scrollLeftMax: number;
-    /** Maximum scroll top */
-    scrollTopMax: number;
-    /** Horizontal scroll progress (0-1) */
-    progressX: number;
-    /** Vertical scroll progress (0-1) */
-    progressY: number;
-    /** Direction of horizontal scroll (-1: left, 1: right, 0: none) */
-    directionX: -1 | 0 | 1;
-    /** Direction of vertical scroll (-1: up, 1: down, 0: none) */
-    directionY: -1 | 0 | 1;
-    /** Scroll container element or window */
-    container: Element | Window;
-}
+export declare function useTrim(options: UseTrimOptions): UseTrimReturn;
 
 /**
- * Scroll directive options
+ * Options for useTrim composable
  */
-declare interface ScrollOptions_2 {
+export declare interface UseTrimOptions {
     /**
-     * Scroll event handler
-     * @required
-     */
-    handler: ScrollHandler;
-    /**
-     * Whether to disable
-     * @default false
-     */
-    disabled?: boolean;
-    /**
-     * Whether to use passive event listener
-     * @default true
+     * The text to trim
      */
-    passive?: boolean;
+    text: string | Ref<string>;
     /**
-     * Throttle time in milliseconds
-     * @default 0 (no throttle)
+     * Trim position
+     * @default 'both'
      */
-    throttle?: number;
+    position?: TrimPosition | Ref<TrimPosition>;
     /**
-     * Custom scroll container selector or element
+     * Custom characters to trim (in addition to whitespace)
      */
-    container?: string | Element | Window | null;
+    chars?: string | Ref<string>;
 }
-export { ScrollOptions_2 as ScrollOptions }
-
-/**
- * Set nested property value by path
- */
-export declare function set(obj: Record<string, any>, path: string, value: any): void;
-
-/**
- * Set Vue version explicitly (for cases where auto-detection fails)
- */
-export declare function setVueVersion(version: VueVersion): void;
-
-export declare type StickyBinding = boolean | number | StickyOptions;
 
 /**
- * Sticky directive options
+ * Return type for useTrim composable
  */
-export declare interface StickyOptions {
-    /** Top offset when sticky @default 0 */
-    top?: number | string;
-    /** Bottom offset when sticky */
-    bottom?: number | string;
-    /** Z-index when sticky @default 100 */
-    zIndex?: number;
-    /** CSS class to add when sticky @default 'v-sticky--fixed' */
-    stickyClass?: string;
-    /** Whether to disable @default false */
-    disabled?: boolean;
-    /** Callback when sticky state changes */
-    onChange?: (isSticky: boolean) => void;
-    /** Custom scroll container */
-    container?: string | Element | null;
+export declare interface UseTrimReturn {
+    /**
+     * The trimmed text
+     */
+    trimmed: Ref<string>;
+    /**
+     * Original text
+     */
+    original: Ref<string>;
+    /**
+     * Whether the text was trimmed
+     */
+    wasTrimmed: Ref<boolean>;
 }
 
 /**
- * Check if Clipboard API is supported
- */
-export declare const supportsClipboard: () => boolean;
-
-/**
- * Check if IntersectionObserver is supported
- */
-export declare const supportsIntersectionObserver: () => boolean;
-
-/**
- * Check if MutationObserver is supported
- */
-export declare const supportsMutationObserver: () => boolean;
-
-/**
- * Check if passive event listening is supported
- */
-export declare const supportsPassive: () => boolean;
-
-/**
- * Check if ResizeObserver is supported
+ * Composable for transforming text to uppercase
+ *
+ * @param options - Configuration options
+ * @returns Uppercase text utilities
+ *
+ * @example
+ * ```vue
+ * <script setup>
+ * import { ref } from 'vue'
+ * import { useUppercase } from 'directix'
+ *
+ * const text = ref('hello world')
+ *
+ * const { transformed } = useUppercase({ text })
+ * // transformed.value = 'HELLO WORLD'
+ * </script>
+ *
+ * <template>
+ *   <p>{{ transformed }}</p>
+ * </template>
+ * ```
  */
-export declare const supportsResizeObserver: () => boolean;
-
-export declare type SwipeBinding = SwipeHandler | SwipeOptions;
-
-export declare type SwipeDirection = 'left' | 'right' | 'up' | 'down';
+export declare function useUppercase(options: UseUppercaseOptions): UseUppercaseReturn;
 
 /**
- * Swipe direction
+ * Options for useUppercase composable
  */
-declare type SwipeDirection_2 = 'left' | 'right' | 'up' | 'down';
-
-export declare type SwipeHandler = (direction: SwipeDirection, event: Event) => void;
-
-export declare interface SwipeOptions {
-    handler?: SwipeHandler;
-    threshold?: number;
-    maxTime?: number;
-    directions?: SwipeDirection[];
-    preventScrollOnSwipe?: boolean;
-    disabled?: boolean;
-    mouse?: boolean;
-    onLeft?: () => void;
-    onRight?: () => void;
-    onUp?: () => void;
-    onDown?: () => void;
+export declare interface UseUppercaseOptions {
+    /**
+     * The text to transform
+     */
+    text: string | Ref<string>;
+    /**
+     * Transform only the first character
+     * @default false
+     */
+    first?: boolean | Ref<boolean>;
 }
 
 /**
- * Directive binding value type
- */
-export declare type ThrottleBinding<T extends (...args: any[]) => any = any> = T | ThrottleOptions<T>;
-
-/**
- * Throttled function type
+ * Return type for useUppercase composable
  */
-export declare interface ThrottledFunction<T extends (...args: any[]) => any> {
-    (...args: Parameters<T>): void;
-    cancel: () => void;
+export declare interface UseUppercaseReturn {
+    /**
+     * The transformed text
+     */
+    transformed: Ref<string>;
+    /**
+     * Original text
+     */
+    original: Ref<string>;
 }
 
 /**
- * Throttle function
- */
-export declare function throttleFn<T extends (...args: any[]) => any>(func: T, wait?: number, options?: {
-    leading?: boolean;
-    trailing?: boolean;
-}): ((...args: Parameters<T>) => void) & {
-    cancel: () => void;
-};
+ * Composable for virtual list rendering
+ *
+ * @param options - Configuration options
+ * @returns Virtual list utilities and state
+ *
+ * @example
+ * ```vue
+ * <script setup>
+ * import { ref } from 'vue'
+ * import { useVirtualList } from 'directix'
+ *
+ * const items = ref(Array.from({ length: 10000 }, (_, i) => ({ id: i, name: `Item ${i}` })))
+ *
+ * const {
+ *   visibleItems,
+ *   totalHeight,
+ *   containerRef,
+ *   listStyle,
+ *   scrollToIndex
+ * } = useVirtualList({
+ *   items,
+ *   itemSize: 50,
+ *   height: 600
+ * })
+ * </script>
+ *
+ * <template>
+ *   <div ref="containerRef" :style="listStyle">
+ *     <div :style="{ height: totalHeight + 'px', position: 'relative' }">
+ *       <div
+ *         v-for="{ item, index, style } in visibleItems"
+ *         :key="item.id"
+ *         :style="style"
+ *       >
+ *         {{ item.name }}
+ *       </div>
+ *     </div>
+ *   </div>
+ * </template>
+ * ```
+ */
+export declare function useVirtualList<T = any>(options: UseVirtualListOptions<T>): UseVirtualListReturn<T>;
 
 /**
- * Throttle directive options
+ * Options for useVirtualList composable
  */
-export declare interface ThrottleOptions<T extends (...args: any[]) => any = any> {
+export declare interface UseVirtualListOptions<T = any> {
     /**
-     * Function to throttle
+     * Array of items to render
+     * @required
      */
-    handler: T;
+    items: Ref<T[]> | T[];
     /**
-     * Delay time in milliseconds
-     * @default 300
+     * Height of each item (in pixels)
+     * Can be a fixed number or a function
+     * @default 50
      */
-    wait?: number;
+    itemSize?: number | ItemSizeFunction | Ref<number | ItemSizeFunction>;
     /**
-     * Whether to invoke immediately before delay starts
-     * @default true
+     * Height of the container (in pixels)
+     * @default 400
      */
-    leading?: boolean;
+    height?: number | Ref<number>;
     /**
-     * Whether to invoke after delay ends
-     * @default true
+     * Number of extra items to render above/below visible area
+     * @default 3
      */
-    trailing?: boolean;
+    overscan?: number | Ref<number>;
+    /**
+     * Key field name for items
+     * @default 'id'
+     */
+    keyField?: string;
 }
 
-export declare type TooltipBinding = string | TooltipOptions;
-
 /**
- * Tooltip directive options
+ * Return type for useVirtualList composable
  */
-export declare interface TooltipOptions {
-    /** Tooltip content */
-    content: 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;
-    /** Offset from the element in pixels @default 8 */
-    offset?: number;
-    /** Custom class for the tooltip */
-    class?: string;
-    /** Whether to show arrow @default true */
-    arrow?: boolean;
-    /** Whether the tooltip is disabled @default false */
-    disabled?: boolean;
-    /** Maximum width of the tooltip */
-    maxWidth?: number | string;
-    /** Z-index of the tooltip @default 9999 */
-    zIndex?: number;
-    /** Callback when tooltip is shown */
-    onShow?: () => void;
-    /** Callback when tooltip is hidden */
-    onHide?: () => void;
+export declare interface UseVirtualListReturn<T = any> {
+    /**
+     * Currently visible items
+     */
+    visibleItems: Ref<VirtualListItem<T>[]>;
+    /**
+     * Total height of the list
+     */
+    totalHeight: Ref<number>;
+    /**
+     * Current scroll position
+     */
+    scrollTop: Ref<number>;
+    /**
+     * Start index of visible items
+     */
+    startIndex: Ref<number>;
+    /**
+     * End index of visible items
+     */
+    endIndex: Ref<number>;
+    /**
+     * Scroll to a specific index
+     */
+    scrollToIndex: (index: number) => void;
+    /**
+     * Scroll to a specific position
+     */
+    scrollTo: (scrollTop: number) => void;
+    /**
+     * Container ref to bind to the scroll container
+     */
+    containerRef: Ref<HTMLElement | null>;
+    /**
+     * List style for the wrapper element
+     */
+    listStyle: Ref<{
+        height: string;
+        overflow: string;
+        position: string;
+    }>;
 }
 
 /**
- * Tooltip placement
- */
-export declare type TooltipPlacement = 'top' | 'bottom' | 'left' | 'right';
-
-/**
- * Tooltip trigger
+ * Composable for controlling element visibility
+ *
+ * @param options - Configuration options
+ * @returns Visibility utilities
+ *
+ * @example
+ * ```vue
+ * <script setup>
+ * import { ref } from 'vue'
+ * import { useVisible } from 'directix'
+ *
+ * const modal = ref(null)
+ * const { visible, show, hide, toggle, bind } = useVisible({
+ *   initial: false,
+ *   onChange: (v) => console.log('Visible:', v)
+ * })
+ *
+ * onMounted(() => bind(modal.value))
+ * </script>
+ *
+ * <template>
+ *   <button @click="toggle">Toggle Modal</button>
+ *   <div ref="modal" v-show="visible">Modal Content</div>
+ * </template>
+ * ```
  */
-export declare type TooltipTrigger = 'hover' | 'click' | 'focus' | 'manual';
+export declare function useVisible(options?: UseVisibleOptions): UseVisibleReturn;
 
 /**
- * Touch gesture options
+ * Options for useVisible composable
  */
-export declare interface TouchOptions {
-    /** Minimum swipe distance in pixels @default 30 */
-    swipeThreshold?: number;
-    /** Maximum time for a swipe in milliseconds @default 500 */
-    swipeTimeout?: number;
-    /** Minimum pinch scale change @default 0.1 */
-    pinchThreshold?: number;
-    /** Enable swipe detection @default true */
-    enableSwipe?: boolean;
-    /** Enable pinch detection @default true */
-    enablePinch?: boolean;
-    /** Enable rotate detection @default true */
-    enableRotate?: boolean;
-    /** Enable tap detection @default true */
-    enableTap?: boolean;
-    /** Maximum time for a tap in milliseconds @default 250 */
-    tapTimeout?: number;
-    /** Maximum movement for a tap in pixels @default 10 */
-    tapThreshold?: number;
-    /** Enable long press detection @default true */
-    enableLongPress?: boolean;
-    /** Long press timeout in milliseconds @default 500 */
-    longPressTimeout?: number;
-    /** Enable mouse event simulation for desktop @default true */
-    enableMouse?: boolean;
-    onSwipe?: (direction: SwipeDirection_2, event: TouchEvent | MouseEvent) => void;
-    onSwipeLeft?: (event: TouchEvent | MouseEvent) => void;
-    onSwipeRight?: (event: TouchEvent | MouseEvent) => void;
-    onSwipeUp?: (event: TouchEvent | MouseEvent) => void;
-    onSwipeDown?: (event: TouchEvent | MouseEvent) => void;
-    onPinch?: (scale: number, event: TouchEvent) => void;
-    onRotate?: (angle: number, event: TouchEvent) => void;
-    onTap?: (event: TouchEvent | MouseEvent) => void;
-    onLongPress?: (event: TouchEvent | MouseEvent) => void;
-    onTouchStart?: (event: TouchEvent | MouseEvent) => void;
-    onTouchMove?: (event: TouchEvent | MouseEvent) => void;
-    onTouchEnd?: (event: TouchEvent | MouseEvent) => void;
-}
-
-/**
- * Directive binding value type
- */
-export declare type TrimBinding = boolean | TrimPosition | TrimOptions;
-
-/**
- * Trim directive options
- */
-export declare interface TrimOptions {
-    /**
-     * Trim position
-     * @default 'both'
-     */
-    position?: TrimPosition;
+export declare interface UseVisibleOptions {
     /**
-     * Whether to trim on input (for input elements)
+     * Initial visibility
      * @default true
      */
-    onInput?: boolean;
+    initial?: boolean | Ref<boolean>;
     /**
-     * Whether to trim on blur
-     * @default true
+     * Whether to use visibility: hidden instead of display: none
+     * @default false
      */
-    onBlur?: boolean;
+    useHidden?: boolean;
     /**
-     * Custom characters to trim (in addition to whitespace)
+     * Callback when visibility changes
      */
-    chars?: string;
+    onChange?: (isVisible: boolean) => void;
 }
 
 /**
- * Trim position
+ * Return type for useVisible composable
  */
-export declare type TrimPosition = 'start' | 'end' | 'both';
+export declare interface UseVisibleReturn {
+    /** Current visibility state */
+    visible: Ref<boolean>;
+    /** Show the element */
+    show: () => void;
+    /** Hide the element */
+    hide: () => void;
+    /** Toggle visibility */
+    toggle: () => void;
+    /** Bind visibility control to an element */
+    bind: (element: HTMLElement) => () => void;
+}
 
 /**
- * Directive binding value type
+ * Composable for creating watermark overlays
+ *
+ * @param options - Configuration options
+ * @returns Watermark utilities and state
+ *
+ * @example
+ * ```vue
+ * <script setup>
+ * import { useWatermark } from 'directix'
+ *
+ * const { dataUrl, style, disable, enable } = useWatermark({
+ *   content: 'Confidential',
+ *   fontSize: 20,
+ *   color: 'rgba(255, 0, 0, 0.2)'
+ * })
+ * </script>
+ *
+ * <template>
+ *   <div class="container">
+ *     <div :style="style"></div>
+ *     <slot></slot>
+ *   </div>
+ * </template>
+ * ```
  */
-export declare type TruncateBinding = number | TruncateOptions;
+export declare function useWatermark(options: UseWatermarkOptions): UseWatermarkReturn;
 
 /**
- * Truncate directive options
+ * Options for useWatermark composable
  */
-export declare interface TruncateOptions {
+export declare interface UseWatermarkOptions {
     /**
-     * Maximum length of text
-     * @default 100
+     * Watermark text content
+     * @required
      */
-    length?: number;
+    content: string | string[] | Ref<string | string[]>;
     /**
-     * Truncation position
-     * @default 'end'
+     * Width of watermark canvas
+     * @default 300
      */
-    position?: TruncatePosition;
+    width?: number | Ref<number>;
     /**
-     * Ellipsis string
-     * @default '...'
+     * Height of watermark canvas
+     * @default 200
+     */
+    height?: number | Ref<number>;
+    /**
+     * Rotation angle in degrees
+     * @default -22
+     */
+    rotate?: number | Ref<number>;
+    /**
+     * Font size in pixels
+     * @default 16
+     */
+    fontSize?: number | Ref<number>;
+    /**
+     * Font family
+     * @default 'sans-serif'
+     */
+    fontFamily?: string | Ref<string>;
+    /**
+     * Font weight
+     * @default 'normal'
+     */
+    fontWeight?: string | number | Ref<string | number>;
+    /**
+     * Font color
+     * @default 'rgba(128, 128, 128, 0.15)'
+     */
+    color?: string | Ref<string>;
+    /**
+     * Gap between watermarks in pixels
+     * @default [100, 100]
+     */
+    gap?: [number, number] | number | Ref<[number, number] | number>;
+    /**
+     * Z-index of watermark layer
+     * @default 9999
      */
-    ellipsis?: string;
+    zIndex?: number | Ref<number>;
     /**
-     * Whether to use CSS truncation (use text-overflow: ellipsis)
-     * When true, length and position options are ignored
+     * Whether to disable watermark
      * @default false
      */
-    useCss?: boolean;
+    disabled?: boolean | Ref<boolean>;
     /**
-     * Show full text on hover (as title attribute)
+     * Whether to prevent removal attempts
      * @default true
      */
-    showTitle?: boolean;
+    protect?: boolean | Ref<boolean>;
 }
 
 /**
- * Truncate position
- */
-export declare type TruncatePosition = 'start' | 'middle' | 'end';
-
-/**
- * Directive binding value type
- */
-export declare type UppercaseBinding = boolean | UppercaseOptions;
-
-/**
- * Uppercase directive options
+ * Return type for useWatermark composable
  */
-export declare interface UppercaseOptions {
+export declare interface UseWatermarkReturn {
     /**
-     * Transform only the first character
-     * @default false
+     * Watermark canvas element
      */
-    first?: boolean;
+    canvas: Ref<HTMLCanvasElement | null>;
     /**
-     * Transform on input event (for input elements)
-     * @default true
+     * Watermark data URL
+     */
+    dataUrl: Ref<string>;
+    /**
+     * Watermark CSS style object
+     */
+    style: Ref<{
+        position: string;
+        top: string;
+        left: string;
+        width: string;
+        height: string;
+        pointerEvents: string;
+        zIndex: number;
+        backgroundImage: string;
+        backgroundRepeat: string;
+        backgroundPosition: string;
+        backgroundSize: string;
+        display?: string;
+    }>;
+    /**
+     * Whether watermark is disabled
+     */
+    disabled: Ref<boolean>;
+    /**
+     * Update watermark options
+     */
+    update: (options: Partial<UseWatermarkOptions>) => void;
+    /**
+     * Enable watermark
+     */
+    enable: () => void;
+    /**
+     * Disable watermark
      */
-    onInput?: boolean;
+    disable: () => void;
 }
 
 /**
@@ -1870,9 +3344,7 @@ export declare interface UppercaseOptions {
  * </template>
  * ```
  */
-declare const vCapitalcase: Directive;
-export { vCapitalcase as capitalcase }
-export { vCapitalcase }
+export declare const vCapitalcase: Directive;
 
 /**
  * v-click-delay directive
@@ -1895,9 +3367,7 @@ export { vCapitalcase }
  * </template>
  * ```
  */
-declare const vClickDelay: Directive;
-export { vClickDelay as clickDelay }
-export { vClickDelay }
+export declare const vClickDelay: Directive;
 
 /**
  * v-click-outside directive
@@ -1911,9 +3381,7 @@ export { vClickDelay }
  * </template>
  * ```
  */
-declare const vClickOutside: Directive;
-export { vClickOutside as clickOutside }
-export { vClickOutside }
+export declare const vClickOutside: Directive;
 
 /**
  * v-copy directive
@@ -1925,9 +3393,7 @@ export { vClickOutside }
  * </template>
  * ```
  */
-declare const vCopy: Directive;
-export { vCopy as copy }
-export { vCopy }
+export declare const vCopy: Directive;
 
 /**
  * v-countdown directive
@@ -1958,9 +3424,7 @@ export { vCopy }
  * </template>
  * ```
  */
-declare const vCountdown: Directive;
-export { vCountdown as countdown }
-export { vCountdown }
+export declare const vCountdown: Directive;
 
 /**
  * v-debounce directive
@@ -1976,9 +3440,7 @@ export { vCountdown }
  * </template>
  * ```
  */
-declare const vDebounce: Directive;
-export { vDebounce as debounce }
-export { vDebounce }
+export declare const vDebounce: Directive;
 
 /**
  * v-draggable directive
@@ -2003,9 +3465,7 @@ export { vDebounce }
  * </template>
  * ```
  */
-declare const vDraggable: Directive;
-export { vDraggable as draggable }
-export { vDraggable }
+export declare const vDraggable: Directive;
 
 /**
  * v-ellipsis directive
@@ -2028,9 +3488,7 @@ export { vDraggable }
  * </template>
  * ```
  */
-declare const vEllipsis: Directive;
-export { vEllipsis as ellipsis }
-export { vEllipsis }
+export declare const vEllipsis: Directive;
 
 /**
  * v-focus directive
@@ -2043,13 +3501,9 @@ export { vEllipsis }
  * </template>
  * ```
  */
-declare const vFocus: Directive;
-export { vFocus as focus }
-export { vFocus }
+export declare const vFocus: Directive;
 
-declare const vHotkey: Directive;
-export { vHotkey as hotkey }
-export { vHotkey }
+export declare const vHotkey: Directive;
 
 /**
  * v-hover directive
@@ -2062,9 +3516,7 @@ export { vHotkey }
  * </template>
  * ```
  */
-declare const vHover: Directive;
-export { vHover as hover }
-export { vHover }
+export declare const vHover: Directive;
 
 /**
  * v-image-preview directive
@@ -2083,9 +3535,7 @@ export { vHover }
  * </template>
  * ```
  */
-declare const vImagePreview: Directive;
-export { vImagePreview as imagePreview }
-export { vImagePreview }
+export declare const vImagePreview: Directive;
 
 /**
  * v-infinite-scroll directive
@@ -2103,9 +3553,7 @@ export { vImagePreview }
  * </template>
  * ```
  */
-declare const vInfiniteScroll: Directive;
-export { vInfiniteScroll as infiniteScroll }
-export { vInfiniteScroll }
+export declare const vInfiniteScroll: Directive;
 
 /**
  * v-intersect directive
@@ -2117,97 +3565,29 @@ export { vInfiniteScroll }
  * <div v-intersect="{ threshold: 0.5, once: true }">Trigger once at 50%</div>
  * ```
  */
-declare const vIntersect: Directive;
-export { vIntersect as intersect }
-export { vIntersect }
-
-/**
- * Directive binding value type
- */
-export declare type VirtualListBinding<T = any> = VirtualListOptions<T> | T[];
-
-/**
- * Virtual list directive options
- */
-export declare interface VirtualListOptions<T = any> {
-    /**
-     * Array of items to render
-     * @required
-     */
-    items: T[];
-    /**
-     * Height of each item (in pixels)
-     * Can be a fixed number or a function
-     * @default 50
-     */
-    itemSize?: number | ItemSizeFunction;
-    /**
-     * Height of the container (in pixels)
-     * @default 400
-     */
-    height?: number | string;
-    /**
-     * Number of extra items to render above/below visible area
-     * @default 3
-     */
-    overscan?: number;
-    /**
-     * Custom render function
-     */
-    render?: VirtualListRenderFunction;
-    /**
-     * Key field name for items
-     * @default 'id'
-     */
-    keyField?: string;
-    /**
-     * Callback when scroll position changes
-     */
-    onScroll?: (scrollTop: number) => void;
-    /**
-     * Callback when visible range changes
-     */
-    onVisibleChange?: (startIndex: number, endIndex: number) => void;
-}
-
-/**
- * Virtual list render function
- */
-export declare type VirtualListRenderFunction = (item: any, index: number) => string;
-
-/**
- * Directive binding value type
- */
-export declare type VisibleBinding = boolean | VisibleOptions;
-
-/**
- * Visible change handler
- */
-export declare type VisibleHandler = (isVisible: boolean) => void;
+export declare const vIntersect: Directive;
 
 /**
- * Visible directive options
+ * Virtual list item info
  */
-export declare interface VisibleOptions {
-    /**
-     * Callback when visibility changes
-     */
-    handler?: VisibleHandler;
+export declare interface VirtualListItem<T = any> {
     /**
-     * Whether to disable
-     * @default false
+     * The item data
      */
-    disabled?: boolean;
+    item: T;
     /**
-     * Whether to set visibility: hidden instead of display: none
-     * @default false
+     * Index in the original list
      */
-    useHidden?: boolean;
+    index: number;
     /**
-     * Initial visibility
-     * @default true
+     * Computed style for positioning
      */
-    initial?: boolean;
+    style: {
+        position: string;
+        top: string;
+        height: string;
+        width: string;
+    };
 }
 
 /**
@@ -2222,9 +3602,7 @@ export declare interface VisibleOptions {
  * </template>
  * ```
  */
-declare const vLazy: Directive;
-export { vLazy as lazy }
-export { vLazy }
+export declare const vLazy: Directive;
 
 /**
  * v-loading directive
@@ -2238,9 +3616,7 @@ export { vLazy }
  * </template>
  * ```
  */
-declare const vLoading: Directive;
-export { vLoading as loading }
-export { vLoading }
+export declare const vLoading: Directive;
 
 /**
  * v-long-press directive
@@ -2253,9 +3629,7 @@ export { vLoading }
  * </template>
  * ```
  */
-declare const vLongPress: Directive;
-export { vLongPress as longPress }
-export { vLongPress }
+export declare const vLongPress: Directive;
 
 /**
  * v-lowercase directive
@@ -2271,9 +3645,7 @@ export { vLongPress }
  * </template>
  * ```
  */
-declare const vLowercase: Directive;
-export { vLowercase as lowercase }
-export { vLowercase }
+export declare const vLowercase: Directive;
 
 /**
  * v-mask directive
@@ -2285,13 +3657,9 @@ export { vLowercase }
  * <input v-mask="{ mask: '##/##/####' }" placeholder="Date" />
  * ```
  */
-declare const vMask: Directive;
-export { vMask as mask }
-export { vMask }
+export declare const vMask: Directive;
 
-declare const vMoney: Directive;
-export { vMoney as money }
-export { vMoney }
+export declare const vMoney: Directive;
 
 /**
  * v-mutation directive
@@ -2315,13 +3683,9 @@ export { vMoney }
  * </script>
  * ```
  */
-declare const vMutation: Directive;
-export { vMutation as mutation }
-export { vMutation }
+export declare const vMutation: Directive;
 
-declare const vNumber: Directive;
-export { vNumber as number }
-export { vNumber }
+export declare const vNumber: Directive;
 
 /**
  * v-permission directive
@@ -2349,9 +3713,7 @@ export { vNumber }
  * </script>
  * ```
  */
-declare const vPermission: Directive;
-export { vPermission as permission }
-export { vPermission }
+export declare const vPermission: Directive;
 
 /**
  * v-print directive
@@ -2377,13 +3739,9 @@ export { vPermission }
  * </template>
  * ```
  */
-declare const vPrint: Directive;
-export { vPrint as print }
-export { vPrint }
+export declare const vPrint: Directive;
 
-declare const vPullRefresh: Directive;
-export { vPullRefresh as pullRefresh }
-export { vPullRefresh }
+export declare const vPullRefresh: Directive;
 
 /**
  * v-resize directive
@@ -2396,9 +3754,7 @@ export { vPullRefresh }
  * </template>
  * ```
  */
-declare const vResize: Directive;
-export { vResize as resize }
-export { vResize }
+export declare const vResize: Directive;
 
 /**
  * v-ripple directive
@@ -2412,9 +3768,7 @@ export { vResize }
  * </template>
  * ```
  */
-declare const vRipple: Directive;
-export { vRipple as ripple }
-export { vRipple }
+export declare const vRipple: Directive;
 
 /**
  * v-sanitize directive
@@ -2428,9 +3782,7 @@ export { vRipple }
  * </template>
  * ```
  */
-declare const vSanitize: Directive;
-export { vSanitize as sanitize }
-export { vSanitize }
+export declare const vSanitize: Directive;
 
 /**
  * v-scroll directive
@@ -2443,9 +3795,7 @@ export { vSanitize }
  * </template>
  * ```
  */
-declare const vScroll: Directive;
-export { vScroll as scroll }
-export { vScroll }
+export declare const vScroll: Directive;
 
 /**
  * v-sticky directive
@@ -2457,13 +3807,9 @@ export { vScroll }
  * <div v-sticky="{ top: 60, zIndex: 1000 }">Custom sticky</div>
  * ```
  */
-declare const vSticky: Directive;
-export { vSticky as sticky }
-export { vSticky }
+export declare const vSticky: Directive;
 
-declare const vSwipe: Directive;
-export { vSwipe as swipe }
-export { vSwipe }
+export declare const vSwipe: Directive;
 
 /**
  * v-throttle directive
@@ -2478,17 +3824,11 @@ export { vSwipe }
  * </template>
  * ```
  */
-declare const vThrottle: Directive;
-export { vThrottle as throttle }
-export { vThrottle }
+export declare const vThrottle: Directive;
 
-declare const vTooltip: Directive;
-export { vTooltip as tooltip }
-export { vTooltip }
+export declare const vTooltip: Directive;
 
-declare const vTouch: Directive;
-export { vTouch as touch }
-export { vTouch }
+export declare const vTouch: Directive;
 
 /**
  * v-trim directive
@@ -2513,9 +3853,7 @@ export { vTouch }
  * </template>
  * ```
  */
-declare const vTrim: Directive;
-export { vTrim as trim }
-export { vTrim }
+export declare const vTrim: Directive;
 
 /**
  * v-truncate directive
@@ -2534,9 +3872,7 @@ export { vTrim }
  * </template>
  * ```
  */
-declare const vTruncate: Directive;
-export { vTruncate as truncate }
-export { vTruncate }
+export declare const vTruncate: Directive;
 
 /**
  * Vue 2 directive hooks
@@ -2584,9 +3920,7 @@ export declare type VueVersion = 2 | 2.7 | 3;
  * </template>
  * ```
  */
-declare const vUppercase: Directive;
-export { vUppercase as uppercase }
-export { vUppercase }
+export declare const vUppercase: Directive;
 
 /**
  * v-virtual-list directive
@@ -2608,9 +3942,7 @@ export { vUppercase }
  * </template>
  * ```
  */
-declare const vVirtualList: Directive;
-export { vVirtualList }
-export { vVirtualList as virtualList }
+export declare const vVirtualList: Directive;
 
 /**
  * v-visible directive
@@ -2624,9 +3956,7 @@ export { vVirtualList as virtualList }
  * </template>
  * ```
  */
-declare const vVisible: Directive;
-export { vVisible }
-export { vVisible as visible }
+export declare const vVisible: Directive;
 
 /**
  * v-watermark directive
@@ -2657,79 +3987,16 @@ export { vVisible as visible }
  * </template>
  * ```
  */
-declare const vWatermark: Directive;
-export { vWatermark }
-export { vWatermark as watermark }
-
-/**
- * Directive binding value type
- */
-export declare type WatermarkBinding = string | WatermarkOptions;
+export declare const vWatermark: Directive;
 
 /**
- * Watermark options
+ * Utility function to check if text would be truncated in a container
+ *
+ * @param text - Text to check
+ * @param containerWidth - Container width in pixels
+ * @param fontSize - Font size in pixels
+ * @returns Whether text would be truncated
  */
-export declare interface WatermarkOptions {
-    /**
-     * Watermark text content
-     * @required
-     */
-    content: string | string[];
-    /**
-     * Width of watermark canvas
-     * @default 300
-     */
-    width?: number;
-    /**
-     * Height of watermark canvas
-     * @default 200
-     */
-    height?: number;
-    /**
-     * Rotation angle in degrees
-     * @default -22
-     */
-    rotate?: number;
-    /**
-     * Font size in pixels
-     * @default 16
-     */
-    fontSize?: number;
-    /**
-     * Font family
-     * @default 'sans-serif'
-     */
-    fontFamily?: string;
-    /**
-     * Font weight
-     * @default 'normal'
-     */
-    fontWeight?: string | number;
-    /**
-     * Font color
-     * @default 'rgba(128, 128, 128, 0.15)'
-     */
-    color?: string;
-    /**
-     * Gap between watermarks in pixels
-     * @default [100, 100]
-     */
-    gap?: [number, number] | number;
-    /**
-     * Z-index of watermark layer
-     * @default 9999
-     */
-    zIndex?: number;
-    /**
-     * Whether to disable watermark (for dynamic control)
-     * @default false
-     */
-    disabled?: boolean;
-    /**
-     * Whether to prevent removal attempts
-     * @default true
-     */
-    protect?: boolean;
-}
+export declare function wouldTextTruncate(text: string, containerWidth: number, fontSize?: number): boolean;
 
 export { }