open-index/open-npm huggingface dataset:
npm package: @object-ui/mobile
Description: Mobile optimization for Object UI with responsive components, PWA support, and touch gesture handling.
Latest version: 3.1.5

# @object-ui/mobile

Mobile optimization for Object UI — responsive hooks, gesture support, touch targets, and PWA utilities.

## Features

- 📱 **Responsive Hooks** - `useBreakpoint` and `useResponsive` for adaptive layouts
- 👆 **Gesture Support** - `useGesture` and `useSpecGesture` for swipe, pinch, and long-press detection
- 🔄 **Pull to Refresh** - Native pull-to-refresh behavior with `usePullToRefresh`
- 🎯 **Touch Targets** - `useTouchTarget` for accessible minimum-size touch areas
- 📐 **Responsive Containers** - `ResponsiveContainer` for breakpoint-aware rendering
- 🏗️ **MobileProvider** - Context provider for mobile-aware applications
- 📲 **PWA Support** - Manifest generation and service worker registration
- ⚙️ **Configurable Breakpoints** - Customizable breakpoint definitions

## Installation

```bash
npm install @object-ui/mobile
```

**Peer Dependencies:**
- `react` ^18.0.0 || ^19.0.0
- `react-dom` ^18.0.0 || ^19.0.0

## Quick Start

```tsx
import { MobileProvider, useBreakpoint, useGesture } from '@object-ui/mobile';

function App() {
  return (
    <MobileProvider>
      <ResponsiveApp />
    </MobileProvider>
  );
}

function ResponsiveApp() {
  const { isMobile, isTablet, isDesktop } = useBreakpoint();

  return (
    <div>
      {isMobile && <MobileNav />}
      {isDesktop && <DesktopSidebar />}
      <MainContent />
    </div>
  );
}
```

## API

### MobileProvider

Wraps your application with mobile context:

```tsx
<MobileProvider>
  <App />
</MobileProvider>
```

### useBreakpoint

Hook for detecting the current breakpoint:

```tsx
const { isMobile, isTablet, isDesktop, current } = useBreakpoint();
```

### useResponsive

Hook for responsive values based on screen size:

```tsx
const columns = useResponsive({ mobile: 1, tablet: 2, desktop: 4 });
```

### useGesture / useSpecGesture

Hooks for gesture detection on touch devices:

```tsx
const gestureRef = useGesture({
  onSwipeLeft: () => navigateNext(),
  onSwipeRight: () => navigateBack(),
  onPinch: (scale) => handleZoom(scale),
});

return <div ref={gestureRef}>Swipeable content</div>;
```

### usePullToRefresh

Hook for pull-to-refresh behavior:

```tsx
const { isRefreshing } = usePullToRefresh({
  onRefresh: async () => await fetchData(),
});
```

### useTouchTarget

Hook for ensuring minimum touch target sizes:

```tsx
const { targetProps } = useTouchTarget({ minSize: 44 });
return <button {...targetProps}>Tap me</button>;
```

### ResponsiveContainer

Renders children based on breakpoint:

```tsx
<ResponsiveContainer mobile={<MobileView />} desktop={<DesktopView />} />
```

### PWA Utilities

```tsx
import { generatePWAManifest, registerServiceWorker } from '@object-ui/mobile';

const manifest = generatePWAManifest({ name: 'My App', themeColor: '#000' });
registerServiceWorker({ cacheStrategy: 'network-first' });
```

## License

MIT
npm package: @object-ui/permissions
Description: RBAC permission system for Object UI with object/field/row-level access control, permission guards, and hooks.
Latest version: 3.1.5

# @object-ui/permissions

Role-Based Access Control (RBAC) for Object UI — permission guards, field-level access, and policy evaluation.

## Features

- 🔐 **PermissionProvider** - Context provider for permission-aware applications
- 🛡️ **PermissionGuard** - Conditionally render components based on user permissions
- 🎣 **usePermissions** - Hook for checking access to actions and resources
- 📝 **Field-Level Permissions** - Control visibility and editability per field with `useFieldPermissions`
- 🔍 **Row-Level Security** - Filter data based on permission conditions
- ⚡ **Permission Evaluator** - Programmatic permission checking engine
- 🎯 **Type-Safe** - Full TypeScript support with exported types

## Installation

```bash
npm install @object-ui/permissions
```

**Peer Dependencies:**
- `react` ^18.0.0 || ^19.0.0
- `react-dom` ^18.0.0 || ^19.0.0

## Quick Start

```tsx
import { PermissionProvider, usePermissions, PermissionGuard } from '@object-ui/permissions';

function App() {
  return (
    <PermissionProvider
      roles={['admin', 'editor']}
      permissions={{
        orders: { read: true, create: true, update: true, delete: false },
      }}
    >
      <Dashboard />
    </PermissionProvider>
  );
}

function Dashboard() {
  const { can } = usePermissions();

  return (
    <div>
      <h1>Orders</h1>
      <PermissionGuard action="create" resource="orders" fallback={<p>No access</p>}>
        <button>Create Order</button>
      </PermissionGuard>
      {can('delete', 'orders') && <button>Delete</button>}
    </div>
  );
}
```

## API

### PermissionProvider

Wraps your application with permission context:

```tsx
<PermissionProvider roles={['editor']} permissions={permissionMap}>
  <App />
</PermissionProvider>
```

### usePermissions

Hook for checking permissions programmatically:

```tsx
const { can, cannot, roles } = usePermissions();

if (can('update', 'orders')) {
  // allow editing
}
```

### useFieldPermissions

Hook for field-level permission checks:

```tsx
const { isVisible, isEditable } = useFieldPermissions('orders', 'discount');
```

### PermissionGuard

Conditionally renders children based on permissions:

```tsx
<PermissionGuard action="delete" resource="orders" fallback={<span>Read only</span>}>
  <DeleteButton />
</PermissionGuard>
```

### evaluatePermission

Programmatic permission evaluation:

```tsx
import { evaluatePermission } from '@object-ui/permissions';

const result = evaluatePermission({
  action: 'update',
  resource: 'orders',
  roles: ['editor'],
  permissions: permissionConfig,
});
```

### createPermissionStore

Creates a permission store for advanced use cases:

```tsx
const store = createPermissionStore(permissionConfig);
store.check('read', 'orders'); // true | false
```

## License

MIT