@object-ui/mobile 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024 ObjectQL
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/dist/MobileProvider.d.ts

@@ -0,0 +1,33 @@
+/**
+ * ObjectUI
+ * Copyright (c) 2024-present ObjectStack Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import React from 'react';
+import type { PWAConfig, OfflineConfig } from '@object-ui/types';
+import { type BreakpointState } from './useBreakpoint';
+export interface MobileContextValue extends BreakpointState {
+    /** PWA configuration */
+    pwa?: PWAConfig;
+    /** Offline configuration */
+    offline?: OfflineConfig;
+}
+export interface MobileProviderProps {
+    /** PWA configuration */
+    pwa?: PWAConfig;
+    /** Offline configuration */
+    offline?: OfflineConfig;
+    /** Children */
+    children: React.ReactNode;
+}
+/**
+ * Provider that combines breakpoint detection with mobile configuration.
+ */
+export declare function MobileProvider({ pwa, offline, children }: MobileProviderProps): import("react/jsx-runtime").JSX.Element;
+/**
+ * Hook to access the mobile context.
+ */
+export declare function useMobileContext(): MobileContextValue | null;
+//# sourceMappingURL=MobileProvider.d.ts.map

package/dist/MobileProvider.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MobileProvider.d.ts","sourceRoot":"","sources":["../src/MobileProvider.tsx"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAEH,OAAO,KAA6C,MAAM,OAAO,CAAC;AAClE,OAAO,KAAK,EAAE,SAAS,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AACjE,OAAO,EAAiB,KAAK,eAAe,EAAE,MAAM,iBAAiB,CAAC;AAEtE,MAAM,WAAW,kBAAmB,SAAQ,eAAe;IACzD,wBAAwB;IACxB,GAAG,CAAC,EAAE,SAAS,CAAC;IAChB,4BAA4B;IAC5B,OAAO,CAAC,EAAE,aAAa,CAAC;CACzB;AAKD,MAAM,WAAW,mBAAmB;IAClC,wBAAwB;IACxB,GAAG,CAAC,EAAE,SAAS,CAAC;IAChB,4BAA4B;IAC5B,OAAO,CAAC,EAAE,aAAa,CAAC;IACxB,eAAe;IACf,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAED;;GAEG;AACH,wBAAgB,cAAc,CAAC,EAAE,GAAG,EAAE,OAAO,EAAE,QAAQ,EAAE,EAAE,mBAAmB,2CAa7E;AAED;;GAEG;AACH,wBAAgB,gBAAgB,IAAI,kBAAkB,GAAG,IAAI,CAE5D"}

package/dist/MobileProvider.js

@@ -0,0 +1,30 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * ObjectUI
+ * Copyright (c) 2024-present ObjectStack Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import { createContext, useContext, useMemo } from 'react';
+import { useBreakpoint } from './useBreakpoint';
+const MobileCtx = createContext(null);
+MobileCtx.displayName = 'MobileContext';
+/**
+ * Provider that combines breakpoint detection with mobile configuration.
+ */
+export function MobileProvider({ pwa, offline, children }) {
+    const breakpoint = useBreakpoint();
+    const value = useMemo(() => ({
+        ...breakpoint,
+        pwa,
+        offline,
+    }), [breakpoint, pwa, offline]);
+    return _jsx(MobileCtx.Provider, { value: value, children: children });
+}
+/**
+ * Hook to access the mobile context.
+ */
+export function useMobileContext() {
+    return useContext(MobileCtx);
+}

package/dist/ResponsiveContainer.d.ts

@@ -0,0 +1,28 @@
+/**
+ * ObjectUI
+ * Copyright (c) 2024-present ObjectStack Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import React from 'react';
+import type { BreakpointName } from '@object-ui/types';
+export interface ResponsiveContainerProps {
+    /** Minimum breakpoint to show content */
+    minBreakpoint?: BreakpointName;
+    /** Maximum breakpoint to show content */
+    maxBreakpoint?: BreakpointName;
+    /** Show only on specific breakpoints */
+    showOn?: BreakpointName[];
+    /** Hide on specific breakpoints */
+    hideOn?: BreakpointName[];
+    /** Fallback content when hidden */
+    fallback?: React.ReactNode;
+    /** Children */
+    children: React.ReactNode;
+}
+/**
+ * Container that conditionally renders children based on the current breakpoint.
+ */
+export declare function ResponsiveContainer({ minBreakpoint, maxBreakpoint, showOn, hideOn, fallback, children, }: ResponsiveContainerProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=ResponsiveContainer.d.ts.map

package/dist/ResponsiveContainer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ResponsiveContainer.d.ts","sourceRoot":"","sources":["../src/ResponsiveContainer.tsx"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAEH,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAGvD,MAAM,WAAW,wBAAwB;IACvC,yCAAyC;IACzC,aAAa,CAAC,EAAE,cAAc,CAAC;IAC/B,yCAAyC;IACzC,aAAa,CAAC,EAAE,cAAc,CAAC;IAC/B,wCAAwC;IACxC,MAAM,CAAC,EAAE,cAAc,EAAE,CAAC;IAC1B,mCAAmC;IACnC,MAAM,CAAC,EAAE,cAAc,EAAE,CAAC;IAC1B,mCAAmC;IACnC,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,eAAe;IACf,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAED;;GAEG;AACH,wBAAgB,mBAAmB,CAAC,EAClC,aAAa,EACb,aAAa,EACb,MAAM,EACN,MAAM,EACN,QAAe,EACf,QAAQ,GACT,EAAE,wBAAwB,2CAoB1B"}

package/dist/ResponsiveContainer.js

@@ -0,0 +1,23 @@
+import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
+import { useBreakpoint } from './useBreakpoint';
+/**
+ * Container that conditionally renders children based on the current breakpoint.
+ */
+export function ResponsiveContainer({ minBreakpoint, maxBreakpoint, showOn, hideOn, fallback = null, children, }) {
+    const { breakpoint, isAbove, isBelow } = useBreakpoint();
+    // Check showOn/hideOn lists
+    if (showOn && !showOn.includes(breakpoint)) {
+        return _jsx(_Fragment, { children: fallback });
+    }
+    if (hideOn && hideOn.includes(breakpoint)) {
+        return _jsx(_Fragment, { children: fallback });
+    }
+    // Check min/max breakpoints
+    if (minBreakpoint && !isAbove(minBreakpoint)) {
+        return _jsx(_Fragment, { children: fallback });
+    }
+    if (maxBreakpoint && !isBelow(maxBreakpoint)) {
+        return _jsx(_Fragment, { children: fallback });
+    }
+    return _jsx(_Fragment, { children: children });
+}

package/dist/breakpoints.d.ts

@@ -0,0 +1,22 @@
+/**
+ * ObjectUI
+ * Copyright (c) 2024-present ObjectStack Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import type { BreakpointName, ResponsiveValue } from '@object-ui/types';
+/** Default breakpoint widths (Tailwind CSS compatible) */
+export declare const BREAKPOINTS: Record<BreakpointName, number>;
+/** Ordered breakpoint names from smallest to largest */
+export declare const BREAKPOINT_ORDER: BreakpointName[];
+/**
+ * Resolves a responsive value to the appropriate value for the current breakpoint.
+ * Falls back to the next smaller breakpoint value if the current one is not defined.
+ */
+export declare function resolveResponsiveValue<T>(value: ResponsiveValue<T>, currentBreakpoint: BreakpointName): T | undefined;
+/**
+ * Gets the current breakpoint name based on window width.
+ */
+export declare function getCurrentBreakpoint(width: number): BreakpointName;
+//# sourceMappingURL=breakpoints.d.ts.map

package/dist/breakpoints.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"breakpoints.d.ts","sourceRoot":"","sources":["../src/breakpoints.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAEH,OAAO,KAAK,EAAE,cAAc,EAAE,eAAe,EAAE,MAAM,kBAAkB,CAAC;AAExE,0DAA0D;AAC1D,eAAO,MAAM,WAAW,EAAE,MAAM,CAAC,cAAc,EAAE,MAAM,CAOtD,CAAC;AAEF,wDAAwD;AACxD,eAAO,MAAM,gBAAgB,EAAE,cAAc,EAA0C,CAAC;AAExF;;;GAGG;AACH,wBAAgB,sBAAsB,CAAC,CAAC,EACtC,KAAK,EAAE,eAAe,CAAC,CAAC,CAAC,EACzB,iBAAiB,EAAE,cAAc,GAChC,CAAC,GAAG,SAAS,CAkBf;AAED;;GAEG;AACH,wBAAgB,oBAAoB,CAAC,KAAK,EAAE,MAAM,GAAG,cAAc,CAQlE"}

package/dist/breakpoints.js

@@ -0,0 +1,50 @@
+/**
+ * ObjectUI
+ * Copyright (c) 2024-present ObjectStack Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+/** Default breakpoint widths (Tailwind CSS compatible) */
+export const BREAKPOINTS = {
+    xs: 0,
+    sm: 640,
+    md: 768,
+    lg: 1024,
+    xl: 1280,
+    '2xl': 1536,
+};
+/** Ordered breakpoint names from smallest to largest */
+export const BREAKPOINT_ORDER = ['xs', 'sm', 'md', 'lg', 'xl', '2xl'];
+/**
+ * Resolves a responsive value to the appropriate value for the current breakpoint.
+ * Falls back to the next smaller breakpoint value if the current one is not defined.
+ */
+export function resolveResponsiveValue(value, currentBreakpoint) {
+    // If it's not an object, it's a direct value
+    if (typeof value !== 'object' || value === null) {
+        return value;
+    }
+    const responsive = value;
+    const currentIndex = BREAKPOINT_ORDER.indexOf(currentBreakpoint);
+    // Walk backwards from current breakpoint to find a defined value
+    for (let i = currentIndex; i >= 0; i--) {
+        const bp = BREAKPOINT_ORDER[i];
+        if (bp in responsive) {
+            return responsive[bp];
+        }
+    }
+    return undefined;
+}
+/**
+ * Gets the current breakpoint name based on window width.
+ */
+export function getCurrentBreakpoint(width) {
+    for (let i = BREAKPOINT_ORDER.length - 1; i >= 0; i--) {
+        const bp = BREAKPOINT_ORDER[i];
+        if (width >= BREAKPOINTS[bp]) {
+            return bp;
+        }
+    }
+    return 'xs';
+}

package/dist/index.d.ts

@@ -0,0 +1,30 @@
+/**
+ * ObjectUI
+ * Copyright (c) 2024-present ObjectStack Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+/**
+ * @object-ui/mobile
+ *
+ * Mobile optimization for Object UI providing:
+ * - useBreakpoint / useResponsive hooks for responsive behavior
+ * - useGesture hook for touch gesture detection
+ * - PWA utilities (manifest generation, service worker registration)
+ * - Mobile-aware component wrappers
+ * - Pull-to-refresh and infinite scroll support
+ *
+ * @packageDocumentation
+ */
+export { useBreakpoint, type BreakpointState } from './useBreakpoint';
+export { useResponsive } from './useResponsive';
+export { useGesture, type UseGestureOptions } from './useGesture';
+export { usePullToRefresh, type PullToRefreshOptions } from './usePullToRefresh';
+export { MobileProvider, type MobileProviderProps } from './MobileProvider';
+export { ResponsiveContainer, type ResponsiveContainerProps } from './ResponsiveContainer';
+export { generatePWAManifest } from './pwa';
+export { registerServiceWorker, type ServiceWorkerConfig } from './serviceWorker';
+export { BREAKPOINTS, resolveResponsiveValue } from './breakpoints';
+export type { BreakpointName, ResponsiveValue, ResponsiveConfig, MobileOverrides, PWAConfig, PWAIcon, CacheStrategy, OfflineConfig, OfflineRoute, GestureType, GestureConfig, GestureContext, MobileComponentConfig, } from '@object-ui/types';
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAEH;;;;;;;;;;;GAWG;AAEH,OAAO,EAAE,aAAa,EAAE,KAAK,eAAe,EAAE,MAAM,iBAAiB,CAAC;AACtE,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAChD,OAAO,EAAE,UAAU,EAAE,KAAK,iBAAiB,EAAE,MAAM,cAAc,CAAC;AAClE,OAAO,EAAE,gBAAgB,EAAE,KAAK,oBAAoB,EAAE,MAAM,oBAAoB,CAAC;AACjF,OAAO,EAAE,cAAc,EAAE,KAAK,mBAAmB,EAAE,MAAM,kBAAkB,CAAC;AAC5E,OAAO,EAAE,mBAAmB,EAAE,KAAK,wBAAwB,EAAE,MAAM,uBAAuB,CAAC;AAC3F,OAAO,EAAE,mBAAmB,EAAE,MAAM,OAAO,CAAC;AAC5C,OAAO,EAAE,qBAAqB,EAAE,KAAK,mBAAmB,EAAE,MAAM,iBAAiB,CAAC;AAClF,OAAO,EAAE,WAAW,EAAE,sBAAsB,EAAE,MAAM,eAAe,CAAC;AAGpE,YAAY,EACV,cAAc,EACd,eAAe,EACf,gBAAgB,EAChB,eAAe,EACf,SAAS,EACT,OAAO,EACP,aAAa,EACb,aAAa,EACb,YAAY,EACZ,WAAW,EACX,aAAa,EACb,cAAc,EACd,qBAAqB,GACtB,MAAM,kBAAkB,CAAC"}

package/dist/index.js

@@ -0,0 +1,28 @@
+/**
+ * ObjectUI
+ * Copyright (c) 2024-present ObjectStack Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+/**
+ * @object-ui/mobile
+ *
+ * Mobile optimization for Object UI providing:
+ * - useBreakpoint / useResponsive hooks for responsive behavior
+ * - useGesture hook for touch gesture detection
+ * - PWA utilities (manifest generation, service worker registration)
+ * - Mobile-aware component wrappers
+ * - Pull-to-refresh and infinite scroll support
+ *
+ * @packageDocumentation
+ */
+export { useBreakpoint } from './useBreakpoint';
+export { useResponsive } from './useResponsive';
+export { useGesture } from './useGesture';
+export { usePullToRefresh } from './usePullToRefresh';
+export { MobileProvider } from './MobileProvider';
+export { ResponsiveContainer } from './ResponsiveContainer';
+export { generatePWAManifest } from './pwa';
+export { registerServiceWorker } from './serviceWorker';
+export { BREAKPOINTS, resolveResponsiveValue } from './breakpoints';

package/dist/pwa.d.ts

@@ -0,0 +1,14 @@
+/**
+ * ObjectUI
+ * Copyright (c) 2024-present ObjectStack Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import type { PWAConfig } from '@object-ui/types';
+/**
+ * Generates a Web App Manifest object from PWAConfig.
+ * Can be serialized to JSON and served at /manifest.json.
+ */
+export declare function generatePWAManifest(config: PWAConfig): Record<string, unknown>;
+//# sourceMappingURL=pwa.d.ts.map

package/dist/pwa.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"pwa.d.ts","sourceRoot":"","sources":["../src/pwa.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAEH,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAC;AAElD;;;GAGG;AACH,wBAAgB,mBAAmB,CAAC,MAAM,EAAE,SAAS,GAAG,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAkB9E"}

package/dist/pwa.js

@@ -0,0 +1,30 @@
+/**
+ * ObjectUI
+ * Copyright (c) 2024-present ObjectStack Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+/**
+ * Generates a Web App Manifest object from PWAConfig.
+ * Can be serialized to JSON and served at /manifest.json.
+ */
+export function generatePWAManifest(config) {
+    return {
+        name: config.name,
+        short_name: config.shortName,
+        description: config.description,
+        theme_color: config.themeColor ?? '#3b82f6',
+        background_color: config.backgroundColor ?? '#ffffff',
+        display: config.display ?? 'standalone',
+        start_url: config.startUrl ?? '/',
+        scope: config.scope ?? '/',
+        orientation: config.orientation ?? 'any',
+        icons: config.icons?.map((icon) => ({
+            src: icon.src,
+            sizes: icon.sizes,
+            type: icon.type ?? 'image/png',
+            purpose: icon.purpose ?? 'any',
+        })) ?? [],
+    };
+}

package/dist/serviceWorker.d.ts

@@ -0,0 +1,25 @@
+/**
+ * ObjectUI
+ * Copyright (c) 2024-present ObjectStack Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+export interface ServiceWorkerConfig {
+    /** URL of the service worker script */
+    url?: string;
+    /** Registration scope */
+    scope?: string;
+    /** Callback on successful registration */
+    onSuccess?: (registration: ServiceWorkerRegistration) => void;
+    /** Callback on update available */
+    onUpdate?: (registration: ServiceWorkerRegistration) => void;
+    /** Callback on error */
+    onError?: (error: Error) => void;
+}
+/**
+ * Registers a service worker for PWA support.
+ * Safe to call in non-browser environments (no-op).
+ */
+export declare function registerServiceWorker(config?: ServiceWorkerConfig): Promise<ServiceWorkerRegistration | null>;
+//# sourceMappingURL=serviceWorker.d.ts.map

package/dist/serviceWorker.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"serviceWorker.d.ts","sourceRoot":"","sources":["../src/serviceWorker.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAEH,MAAM,WAAW,mBAAmB;IAClC,uCAAuC;IACvC,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,yBAAyB;IACzB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,0CAA0C;IAC1C,SAAS,CAAC,EAAE,CAAC,YAAY,EAAE,yBAAyB,KAAK,IAAI,CAAC;IAC9D,mCAAmC;IACnC,QAAQ,CAAC,EAAE,CAAC,YAAY,EAAE,yBAAyB,KAAK,IAAI,CAAC;IAC7D,wBAAwB;IACxB,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,CAAC;CAClC;AAED;;;GAGG;AACH,wBAAsB,qBAAqB,CACzC,MAAM,GAAE,mBAAwB,GAC/B,OAAO,CAAC,yBAAyB,GAAG,IAAI,CAAC,CAmC3C"}

package/dist/serviceWorker.js

@@ -0,0 +1,45 @@
+/**
+ * ObjectUI
+ * Copyright (c) 2024-present ObjectStack Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+/**
+ * Registers a service worker for PWA support.
+ * Safe to call in non-browser environments (no-op).
+ */
+export async function registerServiceWorker(config = {}) {
+    if (typeof navigator === 'undefined' || !('serviceWorker' in navigator)) {
+        return null;
+    }
+    const swUrl = config.url ?? '/service-worker.js';
+    try {
+        const registration = await navigator.serviceWorker.register(swUrl, {
+            scope: config.scope ?? '/',
+        });
+        registration.onupdatefound = () => {
+            const installingWorker = registration.installing;
+            if (!installingWorker)
+                return;
+            installingWorker.onstatechange = () => {
+                if (installingWorker.state === 'installed') {
+                    if (navigator.serviceWorker.controller) {
+                        // Update available
+                        config.onUpdate?.(registration);
+                    }
+                    else {
+                        // First install
+                        config.onSuccess?.(registration);
+                    }
+                }
+            };
+        };
+        return registration;
+    }
+    catch (error) {
+        const err = error instanceof Error ? error : new Error(String(error));
+        config.onError?.(err);
+        return null;
+    }
+}

package/dist/useBreakpoint.d.ts

@@ -0,0 +1,30 @@
+/**
+ * ObjectUI
+ * Copyright (c) 2024-present ObjectStack Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import type { BreakpointName } from '@object-ui/types';
+export interface BreakpointState {
+    /** Current breakpoint name */
+    breakpoint: BreakpointName;
+    /** Current window width */
+    width: number;
+    /** Whether the screen is mobile sized (< md) */
+    isMobile: boolean;
+    /** Whether the screen is tablet sized (md-lg) */
+    isTablet: boolean;
+    /** Whether the screen is desktop sized (>= lg) */
+    isDesktop: boolean;
+    /** Check if current breakpoint is at or above the given breakpoint */
+    isAbove: (bp: BreakpointName) => boolean;
+    /** Check if current breakpoint is at or below the given breakpoint */
+    isBelow: (bp: BreakpointName) => boolean;
+}
+/**
+ * Hook that tracks the current responsive breakpoint.
+ * Updates on window resize with debouncing.
+ */
+export declare function useBreakpoint(): BreakpointState;
+//# sourceMappingURL=useBreakpoint.d.ts.map

package/dist/useBreakpoint.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useBreakpoint.d.ts","sourceRoot":"","sources":["../src/useBreakpoint.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAGH,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAGvD,MAAM,WAAW,eAAe;IAC9B,8BAA8B;IAC9B,UAAU,EAAE,cAAc,CAAC;IAC3B,2BAA2B;IAC3B,KAAK,EAAE,MAAM,CAAC;IACd,gDAAgD;IAChD,QAAQ,EAAE,OAAO,CAAC;IAClB,iDAAiD;IACjD,QAAQ,EAAE,OAAO,CAAC;IAClB,kDAAkD;IAClD,SAAS,EAAE,OAAO,CAAC;IACnB,sEAAsE;IACtE,OAAO,EAAE,CAAC,EAAE,EAAE,cAAc,KAAK,OAAO,CAAC;IACzC,sEAAsE;IACtE,OAAO,EAAE,CAAC,EAAE,EAAE,cAAc,KAAK,OAAO,CAAC;CAC1C;AAED;;;GAGG;AACH,wBAAgB,aAAa,IAAI,eAAe,CAmC/C"}

package/dist/useBreakpoint.js

@@ -0,0 +1,43 @@
+/**
+ * ObjectUI
+ * Copyright (c) 2024-present ObjectStack Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import { useState, useEffect } from 'react';
+import { BREAKPOINTS, BREAKPOINT_ORDER, getCurrentBreakpoint } from './breakpoints';
+/**
+ * Hook that tracks the current responsive breakpoint.
+ * Updates on window resize with debouncing.
+ */
+export function useBreakpoint() {
+    const [width, setWidth] = useState(() => typeof window !== 'undefined' ? window.innerWidth : 1024);
+    useEffect(() => {
+        if (typeof window === 'undefined')
+            return;
+        let timeoutId;
+        const handleResize = () => {
+            clearTimeout(timeoutId);
+            timeoutId = setTimeout(() => {
+                setWidth(window.innerWidth);
+            }, 100);
+        };
+        window.addEventListener('resize', handleResize);
+        return () => {
+            clearTimeout(timeoutId);
+            window.removeEventListener('resize', handleResize);
+        };
+    }, []);
+    const breakpoint = getCurrentBreakpoint(width);
+    const bpIndex = BREAKPOINT_ORDER.indexOf(breakpoint);
+    return {
+        breakpoint,
+        width,
+        isMobile: bpIndex < BREAKPOINT_ORDER.indexOf('md'),
+        isTablet: bpIndex >= BREAKPOINT_ORDER.indexOf('md') && bpIndex < BREAKPOINT_ORDER.indexOf('lg'),
+        isDesktop: bpIndex >= BREAKPOINT_ORDER.indexOf('lg'),
+        isAbove: (bp) => width >= BREAKPOINTS[bp],
+        isBelow: (bp) => width < BREAKPOINTS[bp],
+    };
+}

package/dist/useGesture.d.ts

@@ -0,0 +1,35 @@
+/**
+ * ObjectUI
+ * Copyright (c) 2024-present ObjectStack Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import type { GestureType, GestureContext } from '@object-ui/types';
+export interface UseGestureOptions {
+    /** Gesture type to detect */
+    type: GestureType;
+    /** Callback when gesture is detected */
+    onGesture: (context: GestureContext) => void;
+    /** Minimum distance for swipe detection (pixels) */
+    threshold?: number;
+    /** Duration for long-press detection (milliseconds) */
+    longPressDuration?: number;
+    /** Whether gesture detection is enabled */
+    enabled?: boolean;
+}
+/**
+ * Hook for detecting touch gestures on an element.
+ * Returns a ref to attach to the target element.
+ *
+ * @example
+ * ```tsx
+ * const gestureRef = useGesture({
+ *   type: 'swipe-left',
+ *   onGesture: (ctx) => console.log('Swiped left!', ctx),
+ * });
+ * return <div ref={gestureRef}>Swipe me</div>;
+ * ```
+ */
+export declare function useGesture<T extends HTMLElement = HTMLElement>(options: UseGestureOptions): import("react").RefObject<T | null>;
+//# sourceMappingURL=useGesture.d.ts.map

package/dist/useGesture.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useGesture.d.ts","sourceRoot":"","sources":["../src/useGesture.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAGH,OAAO,KAAK,EAAE,WAAW,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAEpE,MAAM,WAAW,iBAAiB;IAChC,6BAA6B;IAC7B,IAAI,EAAE,WAAW,CAAC;IAClB,wCAAwC;IACxC,SAAS,EAAE,CAAC,OAAO,EAAE,cAAc,KAAK,IAAI,CAAC;IAC7C,oDAAoD;IACpD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,uDAAuD;IACvD,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,2CAA2C;IAC3C,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAED;;;;;;;;;;;;GAYG;AACH,wBAAgB,UAAU,CAAC,CAAC,SAAS,WAAW,GAAG,WAAW,EAC5D,OAAO,EAAE,iBAAiB,uCAkH3B"}

package/dist/useGesture.js

@@ -0,0 +1,117 @@
+/**
+ * ObjectUI
+ * Copyright (c) 2024-present ObjectStack Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import { useEffect, useRef, useCallback } from 'react';
+/**
+ * Hook for detecting touch gestures on an element.
+ * Returns a ref to attach to the target element.
+ *
+ * @example
+ * ```tsx
+ * const gestureRef = useGesture({
+ *   type: 'swipe-left',
+ *   onGesture: (ctx) => console.log('Swiped left!', ctx),
+ * });
+ * return <div ref={gestureRef}>Swipe me</div>;
+ * ```
+ */
+export function useGesture(options) {
+    const ref = useRef(null);
+    const startRef = useRef(null);
+    const longPressTimerRef = useRef(undefined);
+    const { type, onGesture, threshold = 50, longPressDuration = 500, enabled = true } = options;
+    const handleTouchStart = useCallback((e) => {
+        if (!enabled)
+            return;
+        const touch = e.touches[0];
+        startRef.current = { x: touch.clientX, y: touch.clientY, time: Date.now() };
+        if (type === 'long-press') {
+            longPressTimerRef.current = setTimeout(() => {
+                if (startRef.current) {
+                    onGesture({
+                        type: 'long-press',
+                        startPosition: { x: startRef.current.x, y: startRef.current.y },
+                        endPosition: { x: startRef.current.x, y: startRef.current.y },
+                        distance: 0,
+                        duration: longPressDuration,
+                        velocity: 0,
+                    });
+                }
+            }, longPressDuration);
+        }
+    }, [type, onGesture, longPressDuration, enabled]);
+    const handleTouchEnd = useCallback((e) => {
+        if (!enabled || !startRef.current)
+            return;
+        clearTimeout(longPressTimerRef.current);
+        const touch = e.changedTouches[0];
+        const dx = touch.clientX - startRef.current.x;
+        const dy = touch.clientY - startRef.current.y;
+        const distance = Math.sqrt(dx * dx + dy * dy);
+        const duration = Date.now() - startRef.current.time;
+        const velocity = distance / Math.max(duration, 1);
+        const context = {
+            type,
+            startPosition: { x: startRef.current.x, y: startRef.current.y },
+            endPosition: { x: touch.clientX, y: touch.clientY },
+            distance,
+            duration,
+            velocity,
+        };
+        // Detect gesture type
+        if (type === 'tap' && distance < 10 && duration < 300) {
+            onGesture(context);
+        }
+        else if (type === 'double-tap') {
+            // Double-tap handled separately (simplified)
+            if (distance < 10 && duration < 300) {
+                onGesture(context);
+            }
+        }
+        else if (distance >= threshold) {
+            const absX = Math.abs(dx);
+            const absY = Math.abs(dy);
+            let direction;
+            if (absX > absY) {
+                direction = dx > 0 ? 'right' : 'left';
+            }
+            else {
+                direction = dy > 0 ? 'down' : 'up';
+            }
+            context.direction = direction;
+            if ((type === 'swipe-left' && direction === 'left') ||
+                (type === 'swipe-right' && direction === 'right') ||
+                (type === 'swipe-up' && direction === 'up') ||
+                (type === 'swipe-down' && direction === 'down') ||
+                type === 'pan') {
+                onGesture(context);
+            }
+        }
+        startRef.current = null;
+    }, [type, onGesture, threshold, enabled]);
+    const handleTouchMove = useCallback(() => {
+        // Cancel long-press if finger moves
+        if (type === 'long-press') {
+            clearTimeout(longPressTimerRef.current);
+        }
+    }, [type]);
+    useEffect(() => {
+        const el = ref.current;
+        if (!el || !enabled)
+            return;
+        el.addEventListener('touchstart', handleTouchStart, { passive: true });
+        el.addEventListener('touchend', handleTouchEnd, { passive: true });
+        el.addEventListener('touchmove', handleTouchMove, { passive: true });
+        return () => {
+            el.removeEventListener('touchstart', handleTouchStart);
+            el.removeEventListener('touchend', handleTouchEnd);
+            el.removeEventListener('touchmove', handleTouchMove);
+            clearTimeout(longPressTimerRef.current);
+        };
+    }, [handleTouchStart, handleTouchEnd, handleTouchMove, enabled]);
+    return ref;
+}

package/dist/usePullToRefresh.d.ts

@@ -0,0 +1,25 @@
+/**
+ * ObjectUI
+ * Copyright (c) 2024-present ObjectStack Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+export interface PullToRefreshOptions {
+    /** Callback when pull-to-refresh is triggered */
+    onRefresh: () => Promise<void>;
+    /** Minimum pull distance to trigger refresh (pixels) */
+    threshold?: number;
+    /** Whether pull-to-refresh is enabled */
+    enabled?: boolean;
+}
+/**
+ * Hook for implementing pull-to-refresh behavior.
+ * Returns a ref to attach to the scrollable container.
+ */
+export declare function usePullToRefresh<T extends HTMLElement = HTMLElement>(options: PullToRefreshOptions): {
+    ref: import("react").RefObject<T | null>;
+    isRefreshing: boolean;
+    pullDistance: number;
+};
+//# sourceMappingURL=usePullToRefresh.d.ts.map

package/dist/usePullToRefresh.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"usePullToRefresh.d.ts","sourceRoot":"","sources":["../src/usePullToRefresh.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAIH,MAAM,WAAW,oBAAoB;IACnC,iDAAiD;IACjD,SAAS,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,CAAC;IAC/B,wDAAwD;IACxD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,yCAAyC;IACzC,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAED;;;GAGG;AACH,wBAAgB,gBAAgB,CAAC,CAAC,SAAS,WAAW,GAAG,WAAW,EAClE,OAAO,EAAE,oBAAoB;;;;EA6D9B"}

package/dist/usePullToRefresh.js

@@ -0,0 +1,65 @@
+/**
+ * ObjectUI
+ * Copyright (c) 2024-present ObjectStack Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import { useState, useEffect, useRef, useCallback } from 'react';
+/**
+ * Hook for implementing pull-to-refresh behavior.
+ * Returns a ref to attach to the scrollable container.
+ */
+export function usePullToRefresh(options) {
+    const { onRefresh, threshold = 80, enabled = true } = options;
+    const ref = useRef(null);
+    const [isRefreshing, setIsRefreshing] = useState(false);
+    const [pullDistance, setPullDistance] = useState(0);
+    const startYRef = useRef(0);
+    const handleTouchStart = useCallback((e) => {
+        if (!enabled || isRefreshing)
+            return;
+        const el = ref.current;
+        if (el && el.scrollTop === 0) {
+            startYRef.current = e.touches[0].clientY;
+        }
+    }, [enabled, isRefreshing]);
+    const handleTouchMove = useCallback((e) => {
+        if (!enabled || isRefreshing || !startYRef.current)
+            return;
+        const currentY = e.touches[0].clientY;
+        const diff = currentY - startYRef.current;
+        if (diff > 0) {
+            setPullDistance(Math.min(diff, threshold * 1.5));
+        }
+    }, [enabled, isRefreshing, threshold]);
+    const handleTouchEnd = useCallback(async () => {
+        if (!enabled || isRefreshing)
+            return;
+        if (pullDistance >= threshold) {
+            setIsRefreshing(true);
+            try {
+                await onRefresh();
+            }
+            finally {
+                setIsRefreshing(false);
+            }
+        }
+        setPullDistance(0);
+        startYRef.current = 0;
+    }, [enabled, isRefreshing, pullDistance, threshold, onRefresh]);
+    useEffect(() => {
+        const el = ref.current;
+        if (!el || !enabled)
+            return;
+        el.addEventListener('touchstart', handleTouchStart, { passive: true });
+        el.addEventListener('touchmove', handleTouchMove, { passive: true });
+        el.addEventListener('touchend', handleTouchEnd, { passive: true });
+        return () => {
+            el.removeEventListener('touchstart', handleTouchStart);
+            el.removeEventListener('touchmove', handleTouchMove);
+            el.removeEventListener('touchend', handleTouchEnd);
+        };
+    }, [handleTouchStart, handleTouchMove, handleTouchEnd, enabled]);
+    return { ref, isRefreshing, pullDistance };
+}

package/dist/useResponsive.d.ts

@@ -0,0 +1,19 @@
+/**
+ * ObjectUI
+ * Copyright (c) 2024-present ObjectStack Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import type { ResponsiveValue } from '@object-ui/types';
+/**
+ * Hook that resolves a responsive value based on the current breakpoint.
+ *
+ * @example
+ * ```tsx
+ * const columns = useResponsive({ xs: 1, sm: 2, lg: 3 });
+ * // columns = 1 on mobile, 2 on sm/md, 3 on lg+
+ * ```
+ */
+export declare function useResponsive<T>(value: ResponsiveValue<T>): T | undefined;
+//# sourceMappingURL=useResponsive.d.ts.map

package/dist/useResponsive.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useResponsive.d.ts","sourceRoot":"","sources":["../src/useResponsive.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAGH,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,kBAAkB,CAAC;AAIxD;;;;;;;;GAQG;AACH,wBAAgB,aAAa,CAAC,CAAC,EAAE,KAAK,EAAE,eAAe,CAAC,CAAC,CAAC,GAAG,CAAC,GAAG,SAAS,CAOzE"}

package/dist/useResponsive.js

@@ -0,0 +1,23 @@
+/**
+ * ObjectUI
+ * Copyright (c) 2024-present ObjectStack Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import { useMemo } from 'react';
+import { useBreakpoint } from './useBreakpoint';
+import { resolveResponsiveValue } from './breakpoints';
+/**
+ * Hook that resolves a responsive value based on the current breakpoint.
+ *
+ * @example
+ * ```tsx
+ * const columns = useResponsive({ xs: 1, sm: 2, lg: 3 });
+ * // columns = 1 on mobile, 2 on sm/md, 3 on lg+
+ * ```
+ */
+export function useResponsive(value) {
+    const { breakpoint } = useBreakpoint();
+    return useMemo(() => resolveResponsiveValue(value, breakpoint), [value, breakpoint]);
+}

package/package.json

@@ -0,0 +1,44 @@
+{
+  "name": "@object-ui/mobile",
+  "version": "0.1.0",
+  "type": "module",
+  "license": "MIT",
+  "description": "Mobile optimization for Object UI with responsive components, PWA support, and touch gesture handling.",
+  "homepage": "https://www.objectui.org",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/objectstack-ai/objectui.git",
+    "directory": "packages/mobile"
+  },
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "peerDependencies": {
+    "react": "^18.0.0 || ^19.0.0"
+  },
+  "dependencies": {
+    "@object-ui/types": "0.5.0"
+  },
+  "devDependencies": {
+    "@types/react": "^19.2.13",
+    "react": "^19.1.0",
+    "typescript": "^5.9.3",
+    "vitest": "^4.0.18"
+  },
+  "scripts": {
+    "build": "tsc",
+    "clean": "rm -rf dist",
+    "test": "vitest run",
+    "type-check": "tsc --noEmit",
+    "lint": "eslint ."
+  }
+}