@object-ui/mobile 17.5.0 → 17.7.0

package/README.md

@@ -25,18 +25,22 @@ npm install @object-ui/mobile
 ## Quick Start
 
 ```tsx
-import { MobileProvider, useBreakpoint, useGesture } from '@object-ui/mobile';
+import { MobileProvider, useBreakpoint } from '@object-ui/mobile';
 
-function App() {
-  return (
-    <MobileProvider>
-      <ResponsiveApp />
-    </MobileProvider>
-  );
+function MobileNav() {
+  return <nav>Mobile navigation</nav>;
+}
+
+function DesktopSidebar() {
+  return <aside>Desktop sidebar</aside>;
+}
+
+function MainContent() {
+  return <main>Main content</main>;
 }
 
 function ResponsiveApp() {
-  const { isMobile, isTablet, isDesktop } = useBreakpoint();
+  const { isMobile, isDesktop } = useBreakpoint();
 
   return (
     <div>
@@ -46,84 +50,229 @@ function ResponsiveApp() {
     </div>
   );
 }
+
+export function App() {
+  return (
+    <MobileProvider>
+      <ResponsiveApp />
+    </MobileProvider>
+  );
+}
 ```
 
 ## API
 
 ### MobileProvider
 
-Wraps your application with mobile context:
+Wraps your application with mobile context. Both props are optional: `pwa` takes a
+`PWAConfig`, `offline` takes a `PWAOfflineConfig`.
 
 ```tsx
-<MobileProvider>
-  <App />
-</MobileProvider>
+import { MobileProvider } from '@object-ui/mobile';
+
+function App() {
+  return <p>Your application</p>;
+}
+
+export function Root() {
+  return (
+    <MobileProvider>
+      <App />
+    </MobileProvider>
+  );
+}
 ```
 
 ### useBreakpoint
 
-Hook for detecting the current breakpoint:
+Hook for detecting the current breakpoint. The current breakpoint name is
+`breakpoint` — one of `xs`, `sm`, `md`, `lg`, `xl`, `2xl`:
 
 ```tsx
-const { isMobile, isTablet, isDesktop, current } = useBreakpoint();
+import { useBreakpoint } from '@object-ui/mobile';
+
+export function BreakpointBadge() {
+  const { isMobile, isTablet, isDesktop, breakpoint, width } = useBreakpoint();
+
+  return (
+    <span>
+      {breakpoint} at {width}px — mobile {String(isMobile)}, tablet {String(isTablet)}, desktop{' '}
+      {String(isDesktop)}
+    </span>
+  );
+}
 ```
 
+`isAbove(bp)` and `isBelow(bp)` are also returned, for comparisons against a named
+breakpoint.
+
 ### useResponsive
 
-Hook for responsive values based on screen size:
+Hook for responsive values based on screen size. The keys are breakpoint names; a
+breakpoint with no entry falls back to the next smaller one that has one:
 
 ```tsx
-const columns = useResponsive({ mobile: 1, tablet: 2, desktop: 4 });
+import { useResponsive } from '@object-ui/mobile';
+
+export function ResponsiveGrid() {
+  const columns = useResponsive({ xs: 1, md: 2, lg: 4 });
+
+  return <div data-columns={columns}>{columns} column(s)</div>;
+}
 ```
 
 ### useGesture / useSpecGesture
 
-Hooks for gesture detection on touch devices:
+`useGesture` detects one gesture from Object UI's direction-fused vocabulary
+(`tap`, `double-tap`, `long-press`, `swipe-left`, `swipe-right`, `swipe-up`,
+`swipe-down`, `pinch`, `rotate`, `pan`) per call, and returns a ref to attach:
 
 ```tsx
-const gestureRef = useGesture({
-  onSwipeLeft: () => navigateNext(),
-  onSwipeRight: () => navigateBack(),
-  onPinch: (scale) => handleZoom(scale),
-});
+import { useGesture } from '@object-ui/mobile';
+
+function navigateNext() {}
+function navigateBack() {}
+
+export function SwipeArea() {
+  const nextRef = useGesture<HTMLDivElement>({
+    type: 'swipe-left',
+    onGesture: () => navigateNext(),
+  });
+  const backRef = useGesture<HTMLDivElement>({
+    type: 'swipe-right',
+    onGesture: () => navigateBack(),
+  });
+
+  return (
+    <div>
+      <div ref={nextRef}>Swipe left for the next record</div>
+      <div ref={backRef}>Swipe right to go back</div>
+    </div>
+  );
+}
+```
+
+`useSpecGesture` takes the declarative `SpecGestureConfig` tuning shape instead, and
+dispatches to per-gesture callbacks:
+
+```tsx
+import { useSpecGesture } from '@object-ui/mobile';
+
+function handleZoom(scale: number) {
+  return scale;
+}
 
-return <div ref={gestureRef}>Swipeable content</div>;
+export function PinchArea() {
+  const ref = useSpecGesture<HTMLDivElement>({
+    config: { type: 'pinch', enabled: true, pinch: { minScale: 0.5, maxScale: 3 } },
+    onPinch: (scale) => handleZoom(scale),
+  });
+
+  return <div ref={ref}>Pinchable content</div>;
+}
 ```
 
 ### usePullToRefresh
 
-Hook for pull-to-refresh behavior:
+Hook for pull-to-refresh behavior. Attach the returned `ref` to the scrollable
+container:
 
 ```tsx
-const { isRefreshing } = usePullToRefresh({
-  onRefresh: async () => await fetchData(),
-});
+import { usePullToRefresh } from '@object-ui/mobile';
+
+async function fetchData(): Promise<void> {}
+
+export function Feed() {
+  const { ref, isRefreshing, pullDistance } = usePullToRefresh<HTMLDivElement>({
+    onRefresh: async () => await fetchData(),
+  });
+
+  return (
+    <div ref={ref} data-pull-distance={pullDistance}>
+      {isRefreshing ? 'Refreshing…' : 'Pull to refresh'}
+    </div>
+  );
+}
 ```
 
+The element does not have to exist on the first render. A component that shows
+a loading screen first and attaches `ref` once its data arrives works, and so
+does one that later swaps in a new element. The hook binds its touch listeners
+to whatever element `ref` points at after each render.
+
+Pull hosts can nest, for example a list view that renders a grid view inside
+it. One pull belongs to the outermost armed host: an inner host lets the
+gesture go when an armed pull host sits above it in the DOM, so a single pull
+draws one indicator and runs one `onRefresh`.
+
 ### useTouchTarget
 
-Hook for ensuring minimum touch target sizes:
+Hook for ensuring minimum touch target sizes. It returns the `style` and `className`
+to spread onto the element; the defaults follow WCAG 2.5.5 (44×44 CSS pixels):
 
 ```tsx
-const { targetProps } = useTouchTarget({ minSize: 44 });
-return <button {...targetProps}>Tap me</button>;
+import { useTouchTarget } from '@object-ui/mobile';
+
+export function TapButton() {
+  const { style, className } = useTouchTarget({
+    config: { minWidth: 44, minHeight: 44 },
+  });
+
+  return (
+    <button style={style} className={className}>
+      Tap me
+    </button>
+  );
+}
 ```
 
 ### ResponsiveContainer
 
-Renders children based on breakpoint:
+Renders children based on breakpoint. Pick the range with `minBreakpoint` /
+`maxBreakpoint`, or name the breakpoints outright with `showOn` / `hideOn`:
 
 ```tsx
-<ResponsiveContainer mobile={<MobileView />} desktop={<DesktopView />} />
+import { ResponsiveContainer } from '@object-ui/mobile';
+
+function MobileView() {
+  return <p>Compact layout</p>;
+}
+
+function DesktopView() {
+  return <p>Full layout</p>;
+}
+
+export function BreakpointSwitch() {
+  return (
+    <div>
+      <ResponsiveContainer maxBreakpoint="md">
+        <MobileView />
+      </ResponsiveContainer>
+      <ResponsiveContainer minBreakpoint="lg">
+        <DesktopView />
+      </ResponsiveContainer>
+    </div>
+  );
+}
 ```
 
 ### PWA Utilities
 
+`PWAConfig` requires `enabled`, `name` and `shortName`. `registerServiceWorker` takes
+the script `url` and `scope` plus lifecycle callbacks — the caching strategies live in
+the generated worker (`getServiceWorkerSource`), not in this call:
+
 ```tsx
 import { generatePWAManifest, registerServiceWorker } from '@object-ui/mobile';
 
-const manifest = generatePWAManifest({ name: 'My App', themeColor: '#000' });
-registerServiceWorker({ cacheStrategy: 'network-first' });
+export const manifest = generatePWAManifest({
+  enabled: true,
+  name: 'My App',
+  shortName: 'My App',
+  themeColor: '#000',
+});
+
+void registerServiceWorker({ url: '/service-worker.js' });
 ```
 
 ## Links

package/dist/MobileProvider.d.ts

@@ -7,7 +7,7 @@
  */
 import React from 'react';
 import type { PWAConfig, PWAOfflineConfig } from '@object-ui/types';
-import { type BreakpointState } from './useBreakpoint';
+import { type BreakpointState } from './useBreakpoint.js';
 export interface MobileContextValue extends BreakpointState {
     /** PWA configuration */
     pwa?: PWAConfig;

package/dist/MobileProvider.d.ts.map

@@ -1 +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,gBAAgB,EAAE,MAAM,kBAAkB,CAAC;AACpE,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,gBAAgB,CAAC;CAC5B;AAKD,MAAM,WAAW,mBAAmB;IAClC,wBAAwB;IACxB,GAAG,CAAC,EAAE,SAAS,CAAC;IAChB,4BAA4B;IAC5B,OAAO,CAAC,EAAE,gBAAgB,CAAC;IAC3B,eAAe;IACf,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAED;;GAEG;AACH,wBAAgB,cAAc,CAAC,EAAE,GAAG,EAAE,OAAO,EAAE,QAAQ,EAAE,EAAE,mBAAmB,qBAa7E;AAED;;GAEG;AACH,wBAAgB,gBAAgB,IAAI,kBAAkB,GAAG,IAAI,CAE5D"}
+{"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,gBAAgB,EAAE,MAAM,kBAAkB,CAAC;AACpE,OAAO,EAAiB,KAAK,eAAe,EAAE,MAAM,oBAAoB,CAAC;AAEzE,MAAM,WAAW,kBAAmB,SAAQ,eAAe;IACzD,wBAAwB;IACxB,GAAG,CAAC,EAAE,SAAS,CAAC;IAChB,4BAA4B;IAC5B,OAAO,CAAC,EAAE,gBAAgB,CAAC;CAC5B;AAKD,MAAM,WAAW,mBAAmB;IAClC,wBAAwB;IACxB,GAAG,CAAC,EAAE,SAAS,CAAC;IAChB,4BAA4B;IAC5B,OAAO,CAAC,EAAE,gBAAgB,CAAC;IAC3B,eAAe;IACf,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAED;;GAEG;AACH,wBAAgB,cAAc,CAAC,EAAE,GAAG,EAAE,OAAO,EAAE,QAAQ,EAAE,EAAE,mBAAmB,qBAa7E;AAED;;GAEG;AACH,wBAAgB,gBAAgB,IAAI,kBAAkB,GAAG,IAAI,CAE5D"}

package/dist/MobileProvider.js

@@ -7,7 +7,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
  * LICENSE file in the root directory of this source tree.
  */
 import { createContext, useContext, useMemo } from 'react';
-import { useBreakpoint } from './useBreakpoint';
+import { useBreakpoint } from './useBreakpoint.js';
 const MobileCtx = createContext(null);
 MobileCtx.displayName = 'MobileContext';
 /**

package/dist/ResponsiveContainer.js

@@ -1,5 +1,5 @@
 import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
-import { useBreakpoint } from './useBreakpoint';
+import { useBreakpoint } from './useBreakpoint.js';
 /**
  * Container that conditionally renders children based on the current breakpoint.
  */

package/dist/createOfflineDataSource.d.ts

@@ -10,7 +10,7 @@
  * Reads (`find` / `findOne`) are pass-through; the optional `cache` hook
  * lets callers opt into local caching but is not built in here.
  */
-import { type OfflineQueueBackend, type OfflineOperation } from './offlineQueue';
+import { type OfflineQueueBackend, type OfflineOperation } from './offlineQueue.js';
 /** Minimal DataSource shape we care about. */
 export interface QueueableDataSource {
     find?: (object: string, query?: any) => Promise<any>;

package/dist/createOfflineDataSource.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"createOfflineDataSource.d.ts","sourceRoot":"","sources":["../src/createOfflineDataSource.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;GAWG;AAEH,OAAO,EAAE,KAAK,mBAAmB,EAAE,KAAK,gBAAgB,EAAgB,MAAM,gBAAgB,CAAC;AAE/F,8CAA8C;AAC9C,MAAM,WAAW,mBAAmB;IAClC,IAAI,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,KAAK,CAAC,EAAE,GAAG,KAAK,OAAO,CAAC,GAAG,CAAC,CAAC;IACrD,OAAO,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,EAAE,EAAE,MAAM,GAAG,MAAM,EAAE,KAAK,CAAC,EAAE,GAAG,KAAK,OAAO,CAAC,GAAG,CAAC,CAAC;IAC7E,MAAM,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,OAAO,EAAE,GAAG,KAAK,OAAO,CAAC,GAAG,CAAC,CAAC;IACxD,MAAM,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,EAAE,EAAE,MAAM,GAAG,MAAM,EAAE,OAAO,EAAE,GAAG,KAAK,OAAO,CAAC,GAAG,CAAC,CAAC;IAC7E,MAAM,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,EAAE,EAAE,MAAM,GAAG,MAAM,KAAK,OAAO,CAAC,GAAG,CAAC,CAAC;IAC/D,CAAC,CAAC,EAAE,MAAM,GAAG,GAAG,CAAC;CAClB;AAED,MAAM,WAAW,wBAAwB;IACvC,KAAK,EAAE,mBAAmB,CAAC;IAC3B,0FAA0F;IAC1F,cAAc,CAAC,EAAE,CAAC,GAAG,EAAE,OAAO,KAAK,OAAO,CAAC;IAC3C,iEAAiE;IACjE,QAAQ,CAAC,EAAE,MAAM,OAAO,CAAC;IACzB,uEAAuE;IACvE,QAAQ,CAAC,EAAE,CAAC,GAAG,EAAE,gBAAgB,EAAE,KAAK,IAAI,CAAC;IAC7C;;;OAGG;IACH,eAAe,CAAC,EAAE,CAAC,EAAE,EAAE,gBAAgB,EAAE,KAAK,EAAE,OAAO,KAAK,OAAO,CAAC,OAAO,GAAG,MAAM,GAAG;QAAE,OAAO,EAAE,GAAG,CAAA;KAAE,CAAC,CAAC;CAC1G;AAiBD,gEAAgE;AAChE,MAAM,WAAW,iBAAkB,SAAQ,mBAAmB;IAC5D,6FAA6F;IAC7F,YAAY,IAAI,OAAO,CAAC,MAAM,CAAC,CAAC;IAChC,uDAAuD;IACvD,MAAM,IAAI,OAAO,CAAC;QAAE,SAAS,EAAE,MAAM,CAAC;QAAC,MAAM,EAAE,MAAM,CAAC;QAAC,SAAS,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC;IAC5E,kDAAkD;IAClD,IAAI,CAAC,IAAI,EAAE,MAAM,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;IAClC,0DAA0D;IAC1D,KAAK,IAAI,OAAO,CAAC,IAAI,CAAC,CAAC;IACvB,8BAA8B;IAC9B,OAAO,IAAI,OAAO,CAAC,gBAAgB,EAAE,CAAC,CAAC;CACxC;AAED;;;;GAIG;AACH,wBAAgB,uBAAuB,CACrC,KAAK,EAAE,mBAAmB,EAC1B,OAAO,EAAE,wBAAwB,GAChC,iBAAiB,CA6GnB"}
+{"version":3,"file":"createOfflineDataSource.d.ts","sourceRoot":"","sources":["../src/createOfflineDataSource.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;GAWG;AAEH,OAAO,EAAE,KAAK,mBAAmB,EAAE,KAAK,gBAAgB,EAAgB,MAAM,mBAAmB,CAAC;AAElG,8CAA8C;AAC9C,MAAM,WAAW,mBAAmB;IAClC,IAAI,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,KAAK,CAAC,EAAE,GAAG,KAAK,OAAO,CAAC,GAAG,CAAC,CAAC;IACrD,OAAO,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,EAAE,EAAE,MAAM,GAAG,MAAM,EAAE,KAAK,CAAC,EAAE,GAAG,KAAK,OAAO,CAAC,GAAG,CAAC,CAAC;IAC7E,MAAM,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,OAAO,EAAE,GAAG,KAAK,OAAO,CAAC,GAAG,CAAC,CAAC;IACxD,MAAM,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,EAAE,EAAE,MAAM,GAAG,MAAM,EAAE,OAAO,EAAE,GAAG,KAAK,OAAO,CAAC,GAAG,CAAC,CAAC;IAC7E,MAAM,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,EAAE,EAAE,MAAM,GAAG,MAAM,KAAK,OAAO,CAAC,GAAG,CAAC,CAAC;IAC/D,CAAC,CAAC,EAAE,MAAM,GAAG,GAAG,CAAC;CAClB;AAED,MAAM,WAAW,wBAAwB;IACvC,KAAK,EAAE,mBAAmB,CAAC;IAC3B,0FAA0F;IAC1F,cAAc,CAAC,EAAE,CAAC,GAAG,EAAE,OAAO,KAAK,OAAO,CAAC;IAC3C,iEAAiE;IACjE,QAAQ,CAAC,EAAE,MAAM,OAAO,CAAC;IACzB,uEAAuE;IACvE,QAAQ,CAAC,EAAE,CAAC,GAAG,EAAE,gBAAgB,EAAE,KAAK,IAAI,CAAC;IAC7C;;;OAGG;IACH,eAAe,CAAC,EAAE,CAAC,EAAE,EAAE,gBAAgB,EAAE,KAAK,EAAE,OAAO,KAAK,OAAO,CAAC,OAAO,GAAG,MAAM,GAAG;QAAE,OAAO,EAAE,GAAG,CAAA;KAAE,CAAC,CAAC;CAC1G;AAiBD,gEAAgE;AAChE,MAAM,WAAW,iBAAkB,SAAQ,mBAAmB;IAC5D,6FAA6F;IAC7F,YAAY,IAAI,OAAO,CAAC,MAAM,CAAC,CAAC;IAChC,uDAAuD;IACvD,MAAM,IAAI,OAAO,CAAC;QAAE,SAAS,EAAE,MAAM,CAAC;QAAC,MAAM,EAAE,MAAM,CAAC;QAAC,SAAS,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC;IAC5E,kDAAkD;IAClD,IAAI,CAAC,IAAI,EAAE,MAAM,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;IAClC,0DAA0D;IAC1D,KAAK,IAAI,OAAO,CAAC,IAAI,CAAC,CAAC;IACvB,8BAA8B;IAC9B,OAAO,IAAI,OAAO,CAAC,gBAAgB,EAAE,CAAC,CAAC;CACxC;AAED;;;;GAIG;AACH,wBAAgB,uBAAuB,CACrC,KAAK,EAAE,mBAAmB,EAC1B,OAAO,EAAE,wBAAwB,GAChC,iBAAiB,CA6GnB"}

package/dist/createOfflineDataSource.js

@@ -10,7 +10,7 @@
  * Reads (`find` / `findOne`) are pass-through; the optional `cache` hook
  * lets callers opt into local caching but is not built in here.
  */
-import { generateOpId } from './offlineQueue';
+import { generateOpId } from './offlineQueue.js';
 const defaultIsNetworkError = (err) => {
     if (!err)
         return false;

package/dist/index.d.ts

@@ -17,21 +17,20 @@
  *
  * @packageDocumentation
  */
-export { useBreakpoint, type BreakpointState } from './useBreakpoint';
-export { useResponsive } from './useResponsive';
-export { useResponsiveConfig, type SpecResponsiveConfig, type ResolvedResponsiveState } from './useResponsiveConfig';
-export { useGesture, type UseGestureOptions } from './useGesture';
-export { useSpecGesture, type UseSpecGestureOptions } from './useSpecGesture';
-export { useTouchTarget, type UseTouchTargetOptions, type TouchTargetResult } from './useTouchTarget';
-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 { createOfflineQueue, IndexedDbOfflineQueue, MemoryOfflineQueue, generateOpId, type OfflineOperation, type OfflineQueueBackend, } from './offlineQueue';
-export { createOfflineDataSource, type OfflineDataSource, type OfflineDataSourceOptions, type QueueableDataSource, } from './createOfflineDataSource';
-export { useOfflineSync, type OfflineSyncState } from './useOfflineSync';
-export { getServiceWorkerSource, requestBackgroundSync, type ServiceWorkerSourceOptions, } from './serviceWorkerSource';
-export { BREAKPOINTS, resolveResponsiveValue } from './breakpoints';
-export type { BreakpointName, ResponsiveValue, MobileResponsiveConfig, MobileOverrides, PWAConfig, PWAIcon, FetchCacheStrategy, PWAOfflineConfig, OfflineRoute, GestureType, GestureConfig, GestureContext, MobileComponentConfig, SpecGestureConfig, SwipeGestureConfig, PinchGestureConfig, LongPressGestureConfig, TouchInteraction, TouchTargetConfig, } from '@object-ui/types';
+export { useBreakpoint, type BreakpointState } from './useBreakpoint.js';
+export { useResponsive } from './useResponsive.js';
+export { useGesture, type UseGestureOptions } from './useGesture.js';
+export { useSpecGesture, type UseSpecGestureOptions } from './useSpecGesture.js';
+export { useTouchTarget, type UseTouchTargetOptions, type TouchTargetResult } from './useTouchTarget.js';
+export { usePullToRefresh, type PullToRefreshOptions } from './usePullToRefresh.js';
+export { MobileProvider, type MobileProviderProps } from './MobileProvider.js';
+export { ResponsiveContainer, type ResponsiveContainerProps } from './ResponsiveContainer.js';
+export { generatePWAManifest } from './pwa.js';
+export { registerServiceWorker, type ServiceWorkerConfig } from './serviceWorker.js';
+export { createOfflineQueue, IndexedDbOfflineQueue, MemoryOfflineQueue, generateOpId, type OfflineOperation, type OfflineQueueBackend, } from './offlineQueue.js';
+export { createOfflineDataSource, type OfflineDataSource, type OfflineDataSourceOptions, type QueueableDataSource, } from './createOfflineDataSource.js';
+export { useOfflineSync, type OfflineSyncState } from './useOfflineSync.js';
+export { getServiceWorkerSource, requestBackgroundSync, type ServiceWorkerSourceOptions, } from './serviceWorkerSource.js';
+export { BREAKPOINTS, resolveResponsiveValue } from './breakpoints.js';
+export type { BreakpointName, ResponsiveValue, PWAConfig, PWAIcon, FetchCacheStrategy, PWAOfflineConfig, OfflineRoute, GestureType, GestureContext, SpecGestureConfig, SwipeGestureConfig, PinchGestureConfig, LongPressGestureConfig, TouchInteraction, TouchTargetConfig, } from '@object-ui/types';
 //# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -1 +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,mBAAmB,EAAE,KAAK,oBAAoB,EAAE,KAAK,uBAAuB,EAAE,MAAM,uBAAuB,CAAC;AACrH,OAAO,EAAE,UAAU,EAAE,KAAK,iBAAiB,EAAE,MAAM,cAAc,CAAC;AAClE,OAAO,EAAE,cAAc,EAAE,KAAK,qBAAqB,EAAE,MAAM,kBAAkB,CAAC;AAC9E,OAAO,EAAE,cAAc,EAAE,KAAK,qBAAqB,EAAE,KAAK,iBAAiB,EAAE,MAAM,kBAAkB,CAAC;AACtG,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,EACL,kBAAkB,EAClB,qBAAqB,EACrB,kBAAkB,EAClB,YAAY,EACZ,KAAK,gBAAgB,EACrB,KAAK,mBAAmB,GACzB,MAAM,gBAAgB,CAAC;AACxB,OAAO,EACL,uBAAuB,EACvB,KAAK,iBAAiB,EACtB,KAAK,wBAAwB,EAC7B,KAAK,mBAAmB,GACzB,MAAM,2BAA2B,CAAC;AACnC,OAAO,EAAE,cAAc,EAAE,KAAK,gBAAgB,EAAE,MAAM,kBAAkB,CAAC;AACzE,OAAO,EACL,sBAAsB,EACtB,qBAAqB,EACrB,KAAK,0BAA0B,GAChC,MAAM,uBAAuB,CAAC;AAC/B,OAAO,EAAE,WAAW,EAAE,sBAAsB,EAAE,MAAM,eAAe,CAAC;AAGpE,YAAY,EACV,cAAc,EACd,eAAe,EACf,sBAAsB,EACtB,eAAe,EACf,SAAS,EACT,OAAO,EACP,kBAAkB,EAClB,gBAAgB,EAChB,YAAY,EACZ,WAAW,EACX,aAAa,EACb,cAAc,EACd,qBAAqB,EACrB,iBAAiB,EACjB,kBAAkB,EAClB,kBAAkB,EAClB,sBAAsB,EACtB,gBAAgB,EAChB,iBAAiB,GAClB,MAAM,kBAAkB,CAAC"}
+{"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,oBAAoB,CAAC;AACzE,OAAO,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAC;AAQnD,OAAO,EAAE,UAAU,EAAE,KAAK,iBAAiB,EAAE,MAAM,iBAAiB,CAAC;AACrE,OAAO,EAAE,cAAc,EAAE,KAAK,qBAAqB,EAAE,MAAM,qBAAqB,CAAC;AACjF,OAAO,EAAE,cAAc,EAAE,KAAK,qBAAqB,EAAE,KAAK,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AACzG,OAAO,EAAE,gBAAgB,EAAE,KAAK,oBAAoB,EAAE,MAAM,uBAAuB,CAAC;AACpF,OAAO,EAAE,cAAc,EAAE,KAAK,mBAAmB,EAAE,MAAM,qBAAqB,CAAC;AAC/E,OAAO,EAAE,mBAAmB,EAAE,KAAK,wBAAwB,EAAE,MAAM,0BAA0B,CAAC;AAC9F,OAAO,EAAE,mBAAmB,EAAE,MAAM,UAAU,CAAC;AAC/C,OAAO,EAAE,qBAAqB,EAAE,KAAK,mBAAmB,EAAE,MAAM,oBAAoB,CAAC;AACrF,OAAO,EACL,kBAAkB,EAClB,qBAAqB,EACrB,kBAAkB,EAClB,YAAY,EACZ,KAAK,gBAAgB,EACrB,KAAK,mBAAmB,GACzB,MAAM,mBAAmB,CAAC;AAC3B,OAAO,EACL,uBAAuB,EACvB,KAAK,iBAAiB,EACtB,KAAK,wBAAwB,EAC7B,KAAK,mBAAmB,GACzB,MAAM,8BAA8B,CAAC;AACtC,OAAO,EAAE,cAAc,EAAE,KAAK,gBAAgB,EAAE,MAAM,qBAAqB,CAAC;AAC5E,OAAO,EACL,sBAAsB,EACtB,qBAAqB,EACrB,KAAK,0BAA0B,GAChC,MAAM,0BAA0B,CAAC;AAClC,OAAO,EAAE,WAAW,EAAE,sBAAsB,EAAE,MAAM,kBAAkB,CAAC;AAGvE,YAAY,EACV,cAAc,EACd,eAAe,EAMf,SAAS,EACT,OAAO,EACP,kBAAkB,EAClB,gBAAgB,EAChB,YAAY,EACZ,WAAW,EACX,cAAc,EACd,iBAAiB,EACjB,kBAAkB,EAClB,kBAAkB,EAClB,sBAAsB,EACtB,gBAAgB,EAChB,iBAAiB,GAClB,MAAM,kBAAkB,CAAC"}

package/dist/index.js

@@ -17,19 +17,25 @@
  *
  * @packageDocumentation
  */
-export { useBreakpoint } from './useBreakpoint';
-export { useResponsive } from './useResponsive';
-export { useResponsiveConfig } from './useResponsiveConfig';
-export { useGesture } from './useGesture';
-export { useSpecGesture } from './useSpecGesture';
-export { useTouchTarget } from './useTouchTarget';
-export { usePullToRefresh } from './usePullToRefresh';
-export { MobileProvider } from './MobileProvider';
-export { ResponsiveContainer } from './ResponsiveContainer';
-export { generatePWAManifest } from './pwa';
-export { registerServiceWorker } from './serviceWorker';
-export { createOfflineQueue, IndexedDbOfflineQueue, MemoryOfflineQueue, generateOpId, } from './offlineQueue';
-export { createOfflineDataSource, } from './createOfflineDataSource';
-export { useOfflineSync } from './useOfflineSync';
-export { getServiceWorkerSource, requestBackgroundSync, } from './serviceWorkerSource';
-export { BREAKPOINTS, resolveResponsiveValue } from './breakpoints';
+export { useBreakpoint } from './useBreakpoint.js';
+export { useResponsive } from './useResponsive.js';
+// `useResponsiveConfig` REMOVED (objectui#7580, maintainer ruling 2026-09-04).
+// It read `@objectstack/spec`'s `ResponsiveConfigSchema`, which objectstack#11027
+// retired; it was measured at zero callers on objectui#4773. Its exported
+// `SpecResponsiveConfig` / `ResolvedResponsiveState` went with it — both named
+// the retired schema's shape and neither had a reader. No behaviour is retired:
+// the live per-breakpoint readers are `useBreakpoint` and
+// `ResponsiveContainer` below, which are untouched.
+export { useGesture } from './useGesture.js';
+export { useSpecGesture } from './useSpecGesture.js';
+export { useTouchTarget } from './useTouchTarget.js';
+export { usePullToRefresh } from './usePullToRefresh.js';
+export { MobileProvider } from './MobileProvider.js';
+export { ResponsiveContainer } from './ResponsiveContainer.js';
+export { generatePWAManifest } from './pwa.js';
+export { registerServiceWorker } from './serviceWorker.js';
+export { createOfflineQueue, IndexedDbOfflineQueue, MemoryOfflineQueue, generateOpId, } from './offlineQueue.js';
+export { createOfflineDataSource, } from './createOfflineDataSource.js';
+export { useOfflineSync } from './useOfflineSync.js';
+export { getServiceWorkerSource, requestBackgroundSync, } from './serviceWorkerSource.js';
+export { BREAKPOINTS, resolveResponsiveValue } from './breakpoints.js';

package/dist/useBreakpoint.js

@@ -6,7 +6,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 import { useState, useEffect } from 'react';
-import { BREAKPOINTS, BREAKPOINT_ORDER, getCurrentBreakpoint } from './breakpoints';
+import { BREAKPOINTS, BREAKPOINT_ORDER, getCurrentBreakpoint } from './breakpoints.js';
 /**
  * Hook that tracks the current responsive breakpoint.
  * Updates on window resize with debouncing.

package/dist/useOfflineSync.d.ts

@@ -5,8 +5,8 @@
  * React hook that subscribes to an `OfflineDataSource`, exposing the current
  * online/offline status and the pending queue for status-bar / banner UIs.
  */
-import type { OfflineDataSource } from './createOfflineDataSource';
-import type { OfflineOperation } from './offlineQueue';
+import type { OfflineDataSource } from './createOfflineDataSource.js';
+import type { OfflineOperation } from './offlineQueue.js';
 export interface OfflineSyncState {
     /** True if the browser reports `navigator.onLine`. */
     isOnline: boolean;

package/dist/useOfflineSync.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useOfflineSync.d.ts","sourceRoot":"","sources":["../src/useOfflineSync.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAGH,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,2BAA2B,CAAC;AACnE,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAEvD,MAAM,WAAW,gBAAgB;IAC/B,sDAAsD;IACtD,QAAQ,EAAE,OAAO,CAAC;IAClB,iCAAiC;IACjC,OAAO,EAAE,gBAAgB,EAAE,CAAC;IAC5B,wCAAwC;IACxC,WAAW,EAAE,OAAO,CAAC;IACrB,iCAAiC;IACjC,MAAM,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,CAAC;IAC5B,6CAA6C;IAC7C,IAAI,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;IACtC,uBAAuB;IACvB,KAAK,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,CAAC;CAC5B;AAED;;;GAGG;AACH,wBAAgB,cAAc,CAAC,MAAM,EAAE,iBAAiB,GAAG,gBAAgB,CA+C1E"}
+{"version":3,"file":"useOfflineSync.d.ts","sourceRoot":"","sources":["../src/useOfflineSync.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAGH,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,8BAA8B,CAAC;AACtE,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,mBAAmB,CAAC;AAE1D,MAAM,WAAW,gBAAgB;IAC/B,sDAAsD;IACtD,QAAQ,EAAE,OAAO,CAAC;IAClB,iCAAiC;IACjC,OAAO,EAAE,gBAAgB,EAAE,CAAC;IAC5B,wCAAwC;IACxC,WAAW,EAAE,OAAO,CAAC;IACrB,iCAAiC;IACjC,MAAM,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,CAAC;IAC5B,6CAA6C;IAC7C,IAAI,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;IACtC,uBAAuB;IACvB,KAAK,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,CAAC;CAC5B;AAED;;;GAGG;AACH,wBAAgB,cAAc,CAAC,MAAM,EAAE,iBAAiB,GAAG,gBAAgB,CA+C1E"}

package/dist/usePullToRefresh.d.ts.map

@@ -1 +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;;;;EA+D9B"}
+{"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;;;;EAoG9B"}

package/dist/usePullToRefresh.js

@@ -50,18 +50,103 @@ export function usePullToRefresh(options) {
             }
         }
     }, [enabled, isRefreshing, pullDistance, threshold, onRefresh]);
+    /**
+     * The listeners follow the ELEMENT, not the mount (objectui#10105).
+     *
+     * `ref` is an object ref, so nothing tells this hook when a consumer
+     * attaches it. The binding used to live in an effect keyed on the handlers
+     * and `enabled`, which read `ref.current` once and then waited for one of
+     * those to change. A consumer whose first commit is a loading screen has
+     * `ref.current === null` at that moment. When the real host appears later,
+     * none of those keys has changed, so the effect never ran again and the
+     * gesture was dead. The consumers that do this, and the ones that do not,
+     * were measured on objectui#10105; the list is not repeated here because it
+     * would go stale. The same happened when a refresh put the loading screen
+     * back and the host came back as a NEW element: the listeners stayed on the
+     * old, detached one.
+     *
+     * So the binding effect below has no dependency list and runs after every
+     * commit. It re-binds only when the element it SHOULD be bound to
+     * (`ref.current`, or `null` while disabled) differs from the one it IS bound
+     * to. That is a DOM-identity comparison, never a comparison of memoised
+     * identities (AGENTS.md §5 #10). The native listeners stay the same for the
+     * life of a binding and call the latest handlers through `handlersRef`, so a
+     * state change such as each `pullDistance` step during a gesture no longer
+     * re-binds anything.
+     */
+    const handlersRef = useRef({ handleTouchStart, handleTouchMove, handleTouchEnd });
     useEffect(() => {
-        const el = ref.current;
-        if (!el || !enabled)
+        handlersRef.current = { handleTouchStart, handleTouchMove, handleTouchEnd };
+    });
+    const bindingRef = useRef(null);
+    useEffect(() => {
+        const target = enabled ? ref.current : null;
+        const bound = bindingRef.current;
+        if ((bound ? bound.el : null) === target)
             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]);
+        if (bound)
+            unbindPullListeners(bound);
+        bindingRef.current = target ? bindPullListeners(target, handlersRef) : null;
+    });
+    // Unmount. The per-commit effect above returns no cleanup on purpose, since
+    // a cleanup there would re-bind on every commit. This is where the last
+    // binding is released. It releases the exact listeners that were added,
+    // which are recorded on the binding, so nothing depends on an identity
+    // staying stable.
+    useEffect(() => () => {
+        const bound = bindingRef.current;
+        if (bound)
+            unbindPullListeners(bound);
+        bindingRef.current = null;
+    }, []);
     return { ref, isRefreshing, pullDistance };
 }
+/**
+ * One gesture, one owner: the OUTERMOST armed pull host (objectui#10105).
+ *
+ * Pull hosts nest. `ListView` has one, and so does the view it renders inside
+ * it. A touch on the inner host bubbles to the outer one, so without a rule
+ * both hooks drew an indicator and both ran their refresh for the same pull.
+ * The outer one is the owner: its single refetch reloads the rows the inner
+ * view was handed, and an inner view fed its rows by a parent has no refresh of
+ * its own to run.
+ *
+ * While bound, the hook marks its element with this attribute. It is a DOM
+ * attribute and not module state so that two copies of this package in one
+ * page still see each other. At `touchstart` an inner host looks for a marked
+ * ANCESTOR, and if one is armed it lets the gesture go: it never records a
+ * start point, so its move and end handlers do nothing for this gesture. The
+ * native listeners and the DOM ancestry are the same relation (the outer
+ * listener receives this event because it is an ancestor), which is why the
+ * check reads the DOM and not the React tree.
+ */
+const PULL_HOST_ATTRIBUTE = 'data-pull-to-refresh-host';
+function armedPullHostAbove(el) {
+    const parent = el.parentElement;
+    return parent !== null && parent.closest(`[${PULL_HOST_ATTRIBUTE}]`) !== null;
+}
+function bindPullListeners(el, handlers) {
+    const binding = {
+        el,
+        start: (e) => {
+            if (armedPullHostAbove(el))
+                return;
+            handlers.current.handleTouchStart(e);
+        },
+        move: (e) => handlers.current.handleTouchMove(e),
+        end: () => {
+            void handlers.current.handleTouchEnd();
+        },
+    };
+    el.setAttribute(PULL_HOST_ATTRIBUTE, '');
+    el.addEventListener('touchstart', binding.start, { passive: true });
+    el.addEventListener('touchmove', binding.move, { passive: true });
+    el.addEventListener('touchend', binding.end, { passive: true });
+    return binding;
+}
+function unbindPullListeners(binding) {
+    binding.el.removeAttribute(PULL_HOST_ATTRIBUTE);
+    binding.el.removeEventListener('touchstart', binding.start);
+    binding.el.removeEventListener('touchmove', binding.move);
+    binding.el.removeEventListener('touchend', binding.end);
+}

package/dist/useResponsive.js

@@ -6,8 +6,8 @@
  * LICENSE file in the root directory of this source tree.
  */
 import { useMemo } from 'react';
-import { useBreakpoint } from './useBreakpoint';
-import { resolveResponsiveValue } from './breakpoints';
+import { useBreakpoint } from './useBreakpoint.js';
+import { resolveResponsiveValue } from './breakpoints.js';
 /**
  * Hook that resolves a responsive value based on the current breakpoint.
  *