# Permissions

AsukaDesigner supports fine-grained runtime permissions.

Use permissions to decide what the current user can do, what modules can open, and which canvas interactions remain available. This is especially useful when you need to differentiate between:

- an admin or configuration mode
- an editor mode
- a constrained customer-facing mode

## Where permissions can be set

Permissions can be provided at initialization time:

```ts
const designer = createAsukaDesigner('#app', {
  permissions: {
    canAddText: true,
    canAddImage: false,
    canUndo: false,
    canRedo: false,
  },
});
```

They can also be updated at runtime:

```ts
designer.util.permissions.set('canAddText', false);
designer.util.setPermissions({
  canAddImage: false,
  canUploadImage: false,
});
```

## Runtime helpers

Use these helpers to inspect and update the active permission set:

```ts
designer.util.permissions.getMode();
designer.util.permissions.setMode('prod');
designer.util.permissions.can('canAddText');
designer.util.permissions.set('canAddText', false);

designer.util.getPermissions();
designer.util.setPermissions({ canAddText: false });
```

## View-specific overrides

Permissions can also be overridden per view:

```ts
designer.util.viewsPermissions.setForView('front', {
  canAddText: true,
  canSwitchView: true,
  canDeleteObject: false,
});

designer.util.viewsPermissions.clearForView('front');
```


## Production-mode structural guards

When `mode: 'prod'` is used, AsukaDesigner now disables structural/admin actions by default. The UI hides or disables the related controls, and the store/API/designer runtime also reject the writes:

- view creation, editing, and deletion
- element creation, editing, variation editing, and deletion
- drawing-area creation, policy editing, and deletion
- pricing-rule creation, editing, duplication, reorder/toggle, import, and deletion

You can still override individual permissions explicitly when a specific production integration needs to expose one of those actions.

## Permission groups

### General UI and runtime

| Permission | Purpose |
|---|---|
| `canOpenModule` | Enables module opening in general. |
| `canMovePanels` | Allows moving/reordering layout panels, editing layout items, changing zone types, selection-menu layout, and panel/layout structure. |
| `canCollapsePanels` | Allows collapsing/expanding layout zones and collapsible panel blocks. When false, collapse buttons are hidden and collapse API calls are denied. |
| `canUseStateTools` | Allows state import/export and related tools. |
| `canUseMagnifier` | Allows magnifier tools or UI. |
| `canUseZoom` | Allows access to zoom-related controls. |
| `canZoomIn` | Allows zoom-in actions. |
| `canZoomOut` | Allows zoom-out actions. |
| `canFitViewport` | Allows fit-to-viewport actions. |
| `canResetViewport` | Allows viewport reset actions. |
| `canPanCanvas` | Allows panning interactions. |

### History

| Permission | Purpose |
|---|---|
| `canUndo` | Allows undo actions. |
| `canRedo` | Allows redo actions. |
| `canReset` | Allows reset actions. |

These permissions affect both the History module and the floating history controls rendered in the shell.

### Canvas creation and editing

| Permission | Purpose |
|---|---|
| `canAddRect` | Allows rectangle creation through the public API. |
| `canAddText` | Allows adding text objects. |
| `canAddImage` | Allows adding image-based objects. |
| `canAddShape` | Allows inserting shapes. |
| `canDrawShape` | Allows draw-mode shape creation. |
| `canClearCanvas` | Allows clearing the active canvas. |
| `canDuplicateObject` | Allows duplicating the active object. |
| `canDeleteObject` | Allows deleting the active object. |
| `canMoveObject` | Allows moving objects. |
| `canResizeObject` | Allows resizing objects. |
| `canRotateObject` | Allows rotating objects. |
| `canEditObjectColors` | Allows color-related editing on the selected object. |
| `canEditObjectStudio` | Allows studio/effects editing on the selected object. |
| `canEditObjectText` | Allows text-specific editing on the selected object. |

### Text editing

| Permission | Purpose |
|---|---|
| `canEditText` | Allows general text editing workflows. |
| `canEditFontFamily` | Allows font-family changes. |
| `canEditTextFormatting` | Allows advanced text formatting changes. |
| `canEditTextCurve` | Allows curved-text editing. |

### Images and external sources

| Permission | Purpose |
|---|---|
| `canOpenImages` | Allows access to the Images module. |
| `canUploadImage` | Allows local uploads. |
| `canUseRemoteImages` | Allows image insertion from remote URL workflows. |
| `canUseExternalImageLibraries` | Allows external image providers in general. |
| `canUseFacebookImages` | Allows the Facebook image source. |
| `canUsePixabayImages` | Allows the Pixabay source. |
| `canUsePexelsImages` | Allows the Pexels source. |

### Colors and studio

| Permission | Purpose |
|---|---|
| `canUseColors` | Allows opening or using color editing flows. |
| `canEditColors` | Allows changing colors when the color UI is available. |
| `canUseStudio` | Allows studio-related editing flows. |
| `canApplyStudioEffects` | Allows applying studio/effect actions. |

### Layers

| Permission | Purpose |
|---|---|
| `canViewLayers` | Allows viewing the Layers module. |
| `canReorderLayers` | Allows layer reorder actions. |
| `canLockLayers` | Allows locking layers. |
| `canHideLayers` | Allows hiding layers. |
| `canSelectLayers` | Allows selecting layers from the Layers UI. |

### Designs and elements

| Permission | Purpose |
|---|---|
| `canViewDesigns` | Allows viewing the Designs module. |
| `canAddDesigns` | Allows adding designs to the canvas. |
| `canViewElements` | Allows the Elements module or element views. |
| `canAddElements` | Allows creating new element definitions. |
| `canEditElements` | Allows editing element definitions. |
| `canEditElementVariations` | Allows editing element variations. |
| `canDeleteElements` | Allows deleting elements. |

### Views

| Permission | Purpose |
|---|---|
| `canViewViews` | Allows viewing the Views module. |
| `canSwitchView` | Allows switching between views. |
| `canCreateView` | Allows creating new views. |
| `canEditView` | Allows editing existing views. |
| `canDeleteView` | Allows removing views. |

### Pricing

| Permission | Purpose |
|---|---|
| `canViewPricing` | Allows viewing pricing data and pricing UI. |
| `canEditPricingBasePrice` | Allows editing the external/base price. |
| `canEditPricingRules` | Allows editing pricing rules. |
| `canAddPricingRule` | Allows adding pricing rules. |
| `canRemovePricingRule` | Allows deleting pricing rules. |

### Downloads, import, and export

| Permission | Purpose |
|---|---|
| `canDownload` | Allows download/export actions in general. |
| `canDownloadCurrentView` | Allows exporting the current view. |
| `canDownloadAllViews` | Allows exporting all views. |
| `canDownloadObjects` | Allows object-level exports. |
| `canDownloadDrawingZones` | Allows drawing-zone exports. |
| `canExportJson` | Allows exporting serialized JSON state. |
| `canImportJson` | Allows importing serialized JSON state. |

### Drawing areas and fixed slots

| Permission | Purpose |
|---|---|
| `canViewDrawingAreas` | Allows access to drawing-area tools. |
| `canCreateDrawingAreas` | Allows creating drawing areas. |
| `canEditDrawingAreas` | Allows editing drawing areas. |
| `canDeleteDrawingAreas` | Allows deleting drawing areas. |
| `canViewFixedSlots` | Allows access to fixed-slot tools. |
| `canCreateFixedSlots` | Allows creating fixed slots. |
| `canEditFixedSlots` | Allows editing fixed slots. |
| `canDeleteFixedSlots` | Allows deleting fixed slots. |

## Module-level gating

You can also block specific modules while still keeping `canOpenModule` enabled globally.

```ts
const designer = createAsukaDesigner('#app', {
  permissions: {
    canOpenModule: true,
    moduleOpen: {
      state: false,
      pricing: false,
      designs: true,
      layers: true,
    },
  },
});
```

This is useful when the current user should still be able to open some modules, but not all of them.

## Common examples

### Customer-facing product customizer

```ts
const designer = createAsukaDesigner('#app', {
  permissions: {
    canAddText: true,
    canAddImage: true,
    canUploadImage: true,
    canUseExternalImageLibraries: false,

    canUndo: true,
    canRedo: true,
    canReset: false,

    canCreateView: false,
    canEditView: false,
    canDeleteView: false,
    canMovePanels: false,
    canCollapsePanels: false,

    canAddElements: false,
    canEditElements: false,
    canEditElementVariations: false,
    canDeleteElements: false,

    canEditPricingRules: false,
    canAddPricingRule: false,
    canRemovePricingRule: false,

    canCreateDrawingAreas: false,
    canEditDrawingAreas: false,
    canDeleteDrawingAreas: false,
  },
});
```

### Restricted review mode

```ts
designer.util.setPermissions({
  canAddText: false,
  canAddImage: false,
  canDuplicateObject: false,
  canDeleteObject: false,
  canMoveObject: false,
  canResizeObject: false,
  canRotateObject: false,
  canUndo: false,
  canRedo: false,
  canReset: false,
  canDownload: true,
});
```

## Notes

- Permissions define what the current user is allowed to do.
- Some UI areas react by hiding controls entirely.
- Other UI areas keep the control visible but disable the action.
- For the strongest restrictions, combine action permissions with module visibility rules.

## See also

- [API overview](./api-overview.md)
- [Built-in modules](./modules-built-in.md)
- [State and persistence](./state-and-persistence.md)