# Responsive layout

AsukaDesigner includes a responsive runtime layer for small containers and mobile screens. The feature is enabled by default and measures the designer shell, not the full browser window. This makes it work inside embedded product pages, side panels, and custom admin layouts.

## Basic configuration

```ts
createAsukaDesigner('#app', {
  responsive: {
    enabled: true,
    mobileMaxWidth: 640,
    tabletMaxWidth: 960,
    maxVisibleMobileItems: 5,
  },
});
```

Available breakpoints are:

- `mobile`
- `tablet`
- `desktop`

## Mobile behavior

On mobile, left and right layout zones are moved into a bottom navigation bar by default. Items with lower `priority` values stay visible first. Extra items are grouped under `More`.

```ts
createAsukaDesigner('#app', {
  layout: {
    left: {
      items: [
        { kind: 'views', label: 'Views', icon: 'views', priority: 1 },
        { kind: 'image', label: 'Images', icon: 'images', priority: 2 },
        { kind: 'text', label: 'Text', icon: 'text', priority: 3 },
        { kind: 'layers', label: 'Layers', icon: 'layers', priority: 4 },
        { kind: 'download', label: 'Download', icon: 'download', priority: 5 },
        { kind: 'license', label: 'License', icon: 'license', priority: 20 },
      ],
    },
  },
  responsive: {
    maxVisibleMobileItems: 5,
  },
});
```

By default, mobile overlays keep their declared mode and are constrained to the responsive shell. Set `mobileOverlayMode: 'fullscreen'` or `fullscreenOverlaysOnMobile: true` to make them full-screen. The mobile `More` menu closes automatically after selection, on outside click, on `Escape`, and duplicated module kinds are deduplicated in the bottom navigation.

## Tablet behavior

On tablet, panel overlays are converted to drawers by default. This keeps the central canvas readable while still allowing side tools to open in a compact way. Drawer width is clamped to the shell/viewport to avoid awkward overflow in embedded layouts.



## Pass 2 mobile polish

The second responsive pass adds a few stability details for production mobile usage:

- body-portaled overlays receive the same mobile fullscreen styles as contained overlays;
- fullscreen overlay content can scroll instead of being clipped;
- overlay headers stay accessible at the top of long mobile modules;
- the bottom navigation deduplicates identical module kinds across left/right zones;
- default mobile priorities are applied when an item has no explicit `priority`;
- the `More` menu closes after selecting an item, clicking outside, pressing `Escape`, or changing breakpoint/module.

## Runtime API

```ts
designer.util.responsive.getBreakpoint();
designer.util.responsive.isMobile();
designer.util.responsive.isTablet();
designer.util.responsive.isDesktop();
designer.util.responsive.getWidth();
designer.util.responsive.getConfig();
designer.util.responsive.setConfig({ mobileMaxWidth: 720 });
```

`setConfig()` merges the provided patch with the current normalized configuration.

## Useful options

```ts
responsive: {
  enabled: true,
  preset: 'auto',
  mobileMaxWidth: 640,
  tabletMaxWidth: 960,
  maxVisibleMobileItems: 5,
  moveSideZonesToBottomNav: true,
  bottomNavZones: ['left', 'right'],
  fullscreenOverlaysOnMobile: false,
  mobileOverlayMode: 'preserve', // 'fullscreen' | 'modal' | 'drawer' | 'preserve'
  drawerPanelsOnTablet: true,
  tabletPanelMode: 'drawer', // 'drawer' | 'modal' | 'preserve'
  safeArea: true,
}
```

Use `preset: 'off'` or `enabled: false` to disable responsive transformations.

By default, mobile overlays keep their declared mode and are only constrained so they cannot overflow the responsive shell. Set `mobileOverlayMode: 'fullscreen'` or `fullscreenOverlaysOnMobile: true` when you explicitly want mobile overlays to become full-screen.

## View pagination bar

The view pagination bar below the canvas is configurable independently from the responsive layout. By default, AsukaDesigner keeps the previous automatic behavior: it shows thumbnails when view thumbnails are available, otherwise compact dots.

```ts
createAsukaDesigner('#app', {
  ui: {
    viewsPagination: {
      enabled: true,
      mode: 'auto', // 'auto' | 'thumbnails' | 'dots' | 'numbers'
    },
  },
});
```

To hide the bottom view pagination completely while keeping multiple views available through the Views module:

```ts
createAsukaDesigner('#app', {
  ui: {
    viewsPagination: false,
  },
});
```

You can also force one visual mode:

```ts
createAsukaDesigner('#app', {
  ui: {
    viewsPagination: {
      mode: 'numbers',
    },
  },
});
```

At runtime, the same configuration can be changed through:

```ts
designer.util.uiConfig.setViewsPagination({ mode: 'dots' });
designer.util.uiConfig.setViewsPaginationEnabled(false);
```