@colijnit/inphoto 300.1.3 → 300.1.4

package/icons/arrow_down_solid_full.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640"><!--!Font Awesome Free 7.3.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2026 Fonticons, Inc.--><path d="M297.4 566.6C309.9 579.1 330.2 579.1 342.7 566.6L502.7 406.6C515.2 394.1 515.2 373.8 502.7 361.3C490.2 348.8 469.9 348.8 457.4 361.3L352 466.7L352 96C352 78.3 337.7 64 320 64C302.3 64 288 78.3 288 96L288 466.7L182.6 361.3C170.1 348.8 149.8 348.8 137.3 361.3C124.8 373.8 124.8 394.1 137.3 406.6L297.3 566.6z"/></svg>

package/icons/minus_solid_full.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640"><!--!Font Awesome Free 7.3.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2026 Fonticons, Inc.--><path d="M96 320C96 302.3 110.3 288 128 288L512 288C529.7 288 544 302.3 544 320C544 337.7 529.7 352 512 352L128 352C110.3 352 96 337.7 96 320z"/></svg>

package/icons/plus_solid_full.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640"><!--!Font Awesome Free 7.3.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2026 Fonticons, Inc.--><path d="M352 128C352 110.3 337.7 96 320 96C302.3 96 288 110.3 288 128L288 288L128 288C110.3 288 96 302.3 96 320C96 337.7 110.3 352 128 352L288 352L288 512C288 529.7 302.3 544 320 544C337.7 544 352 529.7 352 512L352 352L512 352C529.7 352 544 337.7 544 320C544 302.3 529.7 288 512 288L352 288L352 128z"/></svg>

package/index.d.ts

@@ -31,6 +31,7 @@ import * as i5 from '@colijnit/utilities';
 declare enum Icon {
     AngleDownSolidFull = "angle_down_solid_full",
     AngleUpSolidFull = "angle_up_solid_full",
+    ArrowDownSolidFull = "arrow_down_solid_full",
     ArrowLeftSolidFull = "arrow_left_solid_full",
     ArrowRightSolidFull = "arrow_right_solid_full",
     ArrowRotateLeftSolidFull = "arrow_rotate_left_solid_full",
@@ -61,8 +62,10 @@ declare enum Icon {
     InfoSolidFull = "info_solid_full",
     LightbulbRegularFull = "lightbulb_regular_full",
     LockSolidFull = "lock_solid_full",
+    MinusSolidFull = "minus_solid_full",
     PaintbrushRegular = "paintbrush_regular",
     PenToSquareSolidFull = "pen_to_square_solid_full",
+    PlusSolidFull = "plus_solid_full",
     RotateLeftSharpSolidFull = "rotate_left_sharp_solid_full",
     RotateSolidFull = "rotate_solid_full",
     SaveSkinny = "save_skinny",
@@ -700,6 +703,7 @@ declare class InphotoDataService {
     removeMask(color: ColorPalette): void;
     hasAnyMask(): boolean;
     clearAllMasks(): void;
+    cleanUp(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<InphotoDataService, never>;
     static ɵprov: i0.ɵɵInjectableDeclaration<InphotoDataService>;
 }
@@ -716,10 +720,17 @@ declare class EditCanvasComponent implements AfterViewInit {
     set segmentationInPainting(value: SegmentationResponse);
     set inpaintMode(value: boolean);
     set eraserMode(value: boolean);
+    set dragMode(value: boolean);
+    get dragMode(): boolean;
     onSegmentationPointClick: EventEmitter<SegmentationPoint>;
     imageState: EventEmitter<string>;
     set maskColor(color: ColorPalette);
     get maskColor(): ColorPalette;
+    get zoomPercent(): number;
+    get minZoomPercent(): number;
+    get maxZoomPercent(): number;
+    get canZoomIn(): boolean;
+    get canZoomOut(): boolean;
     ctx: CanvasRenderingContext2D;
     drawing: boolean;
     brushSize: number;
@@ -729,18 +740,34 @@ declare class EditCanvasComponent implements AfterViewInit {
     private _currentStroke;
     private _segCanvas;
     private _segCtx;
+    private _exportCanvas;
+    private _exportCtx;
     private _image;
     private _inpaintMode;
     private _eraserMode;
     private _maskColor;
     private _subs;
     private _canvasLoaded;
+    private _zoom;
+    private _offsetX;
+    private _offsetY;
+    private _minZoom;
+    private _maxZoom;
+    private _zoomStep;
+    private _dragMode;
+    private _panning;
+    private _panStart;
     constructor(iconService: InphotoIconCacheService, dataService: InphotoDataService, _appEventService: InphotoEventService);
     ngAfterViewInit(): void;
     changeCanvasCursor(icon: Icon): void;
     startDrawing(event: MouseEvent): void;
     draw(event: MouseEvent): void;
     stopDrawing(): void;
+    onWheel(event: WheelEvent): void;
+    zoomIn(): void;
+    zoomOut(): void;
+    onZoomInput(event: Event): void;
+    resetView(): void;
     undoLastStroke(color?: ColorPalette): void;
     clearColor(color: ColorPalette): void;
     clearCanvas(): void;
@@ -749,20 +776,26 @@ declare class EditCanvasComponent implements AfterViewInit {
     private _syncLayersFromData;
     private _getLayer;
     private _resizeAndReplayLayers;
+    private _composite;
     private _render;
+    private _setZoom;
+    private _setZoomCentered;
+    private _clampOffsets;
     private _replayColor;
+    private _getBufferCoords;
     private _getCanvasCoords;
     private _drawSegmentation;
     private _ensureSegCanvas;
     private _saveCanvas;
+    private _setPlainCursor;
     private _colorToString;
     static ɵfac: i0.ɵɵFactoryDeclaration<EditCanvasComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<EditCanvasComponent, "co-edit-canvas", never, { "image": { "alias": "image"; "required": false; }; "segmentationInPainting": { "alias": "segmentationInPainting"; "required": false; }; "inpaintMode": { "alias": "inpaintMode"; "required": false; }; "eraserMode": { "alias": "eraserMode"; "required": false; }; }, { "onSegmentationPointClick": "onSegmentationPointClick"; "imageState": "imageState"; }, never, never, false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<EditCanvasComponent, "co-edit-canvas", never, { "image": { "alias": "image"; "required": false; }; "segmentationInPainting": { "alias": "segmentationInPainting"; "required": false; }; "inpaintMode": { "alias": "inpaintMode"; "required": false; }; "eraserMode": { "alias": "eraserMode"; "required": false; }; "dragMode": { "alias": "dragMode"; "required": false; }; }, { "onSegmentationPointClick": "onSegmentationPointClick"; "imageState": "imageState"; }, never, never, false, never>;
 }
 
 declare class EditCanvasModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<EditCanvasModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<EditCanvasModule, [typeof EditCanvasComponent], [typeof i2$1.FormsModule, typeof i2.IconModule, typeof i2.ButtonModule], [typeof EditCanvasComponent]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<EditCanvasModule, [typeof EditCanvasComponent], [typeof i2$1.FormsModule, typeof i2.IconModule, typeof i2.ButtonModule, typeof i2.InputTextModule], [typeof EditCanvasComponent]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<EditCanvasModule>;
 }
 
@@ -822,7 +855,8 @@ declare class ImageEnhancer {
 declare enum FileTypes {
     JPG = "JPG",
     JPEG = "JPEG",
-    PNG = "PNG"
+    PNG = "PNG",
+    WEBP = "WEBP"
 }
 
 declare class ImageUpload implements OnDestroy {
@@ -1102,6 +1136,7 @@ declare class PhotoEditorComponent implements OnInit {
     showLoader: boolean;
     loadingTexts: string[];
     canvasErase: boolean;
+    dragMode: boolean;
     maskingList: MaskImageColorInterface[];
     canvasMaskColor: ColorPalette;
     private _image;
@@ -1109,6 +1144,7 @@ declare class PhotoEditorComponent implements OnInit {
     constructor(iconService: InphotoIconCacheService, dataService: InphotoDataService, _connectorService: InPhotoConnectorService, _changeDetection: ChangeDetectorRef, _eventService: InphotoEventService);
     ngOnInit(): void;
     toggleEraseMode(state: boolean): void;
+    toggleDragMode(value: boolean): void;
     handleCreatePromptWithImages(event: PromptWithImages): void;
     handleStyleSelection(event: EnhanceStyle): void;
     handleSetImageFromHistory(event: string): void;
@@ -1164,23 +1200,21 @@ declare class CanvasToolBarComponent {
     get canvasInpaintMode(): boolean;
     set canvasEraseMode(value: boolean);
     get canvasEraseMode(): boolean;
-    showActionButtons: boolean;
-    showInfoIcon: boolean;
+    set canvasDragMode(value: boolean);
+    get canvasDragMode(): boolean;
     title: string;
     dragBoundary: string;
     changeEraseMode: EventEmitter<boolean>;
-    cancelClick: EventEmitter<void>;
-    processSegmentation: EventEmitter<void>;
-    openInfoContainer: EventEmitter<any>;
+    changeDragMode: EventEmitter<boolean>;
     private _canvasInpaintMode;
     private _canvasEraseMode;
+    private _canvasDragMode;
     constructor(iconService: InphotoIconCacheService);
-    toggleEraseMode(mode: boolean): void;
-    openInfoDialog(): void;
-    handleCancelClick(): void;
-    processInpainted(): void;
+    selectBrush(): void;
+    selectEraser(): void;
+    toggleDragMode(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<CanvasToolBarComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<CanvasToolBarComponent, "co-canvas-tool-bar", never, { "canvasInpaintMode": { "alias": "canvasInpaintMode"; "required": false; }; "canvasEraseMode": { "alias": "canvasEraseMode"; "required": false; }; "showActionButtons": { "alias": "showActionButtons"; "required": false; }; "showInfoIcon": { "alias": "showInfoIcon"; "required": false; }; "title": { "alias": "title"; "required": false; }; "dragBoundary": { "alias": "dragBoundary"; "required": false; }; }, { "changeEraseMode": "changeEraseMode"; "cancelClick": "cancelClick"; "processSegmentation": "processSegmentation"; "openInfoContainer": "openInfoContainer"; }, never, never, false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<CanvasToolBarComponent, "co-canvas-tool-bar", never, { "canvasInpaintMode": { "alias": "canvasInpaintMode"; "required": false; }; "canvasEraseMode": { "alias": "canvasEraseMode"; "required": false; }; "canvasDragMode": { "alias": "canvasDragMode"; "required": false; }; "title": { "alias": "title"; "required": false; }; "dragBoundary": { "alias": "dragBoundary"; "required": false; }; }, { "changeEraseMode": "changeEraseMode"; "changeDragMode": "changeDragMode"; }, never, never, false, never>;
 }
 
 declare class CanvasToolBarModule {
@@ -1195,6 +1229,11 @@ declare class PhotoEditorModule {
     static ɵinj: i0.ɵɵInjectorDeclaration<PhotoEditorModule>;
 }
 
+interface SegmentationJob {
+    image: string;
+    segmentJobId: string;
+}
+
 declare class PrepareStartingImageComponent {
     iconService: InphotoIconCacheService;
     private _connectorService;
@@ -1204,7 +1243,7 @@ declare class PrepareStartingImageComponent {
     image: string;
     cancelClick: EventEmitter<void>;
     processedRoom: EventEmitter<SceneBuildObject>;
-    segmentationJobId: EventEmitter<string>;
+    segmentationJobId: EventEmitter<SegmentationJob>;
     imageReady: EventEmitter<string>;
     continueToAI: EventEmitter<string>;
     disableSelectObjectsButton: boolean;
@@ -1220,9 +1259,54 @@ declare class PrepareStartingImageComponent {
     static ɵcmp: i0.ɵɵComponentDeclaration<PrepareStartingImageComponent, "co-prepare-starting-image", never, { "image": { "alias": "image"; "required": false; }; }, { "cancelClick": "cancelClick"; "processedRoom": "processedRoom"; "segmentationJobId": "segmentationJobId"; "imageReady": "imageReady"; "continueToAI": "continueToAI"; }, never, never, false, never>;
 }
 
+declare class StepTileComponent {
+    iconService: InphotoIconCacheService;
+    readonly icons: typeof Icon;
+    showClass(): boolean;
+    tileIcon: Icon;
+    tileImage: string;
+    title: string;
+    description: string;
+    showNewBanner: boolean;
+    numberedStep: string;
+    buttonText: string;
+    buttonIcon: Icon;
+    onClick: EventEmitter<void>;
+    onButtonClick: EventEmitter<void>;
+    constructor(iconService: InphotoIconCacheService);
+    handleClick(): void;
+    handleButtonClick(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<StepTileComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<StepTileComponent, "co-step-tile", never, { "tileIcon": { "alias": "tileIcon"; "required": false; }; "tileImage": { "alias": "tileImage"; "required": false; }; "title": { "alias": "title"; "required": false; }; "description": { "alias": "description"; "required": false; }; "showNewBanner": { "alias": "showNewBanner"; "required": false; }; "numberedStep": { "alias": "numberedStep"; "required": false; }; "buttonText": { "alias": "buttonText"; "required": false; }; "buttonIcon": { "alias": "buttonIcon"; "required": false; }; }, { "onClick": "onClick"; "onButtonClick": "onButtonClick"; }, never, never, false, never>;
+}
+
+declare class StepTileModule {
+    static ɵfac: i0.ɵɵFactoryDeclaration<StepTileModule, never>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<StepTileModule, [typeof StepTileComponent], [typeof i2.IconModule, typeof PipeModule, typeof i2.ButtonModule], [typeof StepTileComponent]>;
+    static ɵinj: i0.ɵɵInjectorDeclaration<StepTileModule>;
+}
+
+declare class HeaderComponent {
+    iconService: InphotoIconCacheService;
+    readonly icons: typeof Icon;
+    showClass(): boolean;
+    headerIcon: Icon;
+    header: string;
+    description: string;
+    constructor(iconService: InphotoIconCacheService);
+    static ɵfac: i0.ɵɵFactoryDeclaration<HeaderComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<HeaderComponent, "co-header", never, { "headerIcon": { "alias": "headerIcon"; "required": false; }; "header": { "alias": "header"; "required": false; }; "description": { "alias": "description"; "required": false; }; }, {}, never, never, false, never>;
+}
+
+declare class HeaderModule {
+    static ɵfac: i0.ɵɵFactoryDeclaration<HeaderModule, never>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<HeaderModule, [typeof HeaderComponent], [typeof i2.IconModule, typeof PipeModule], [typeof HeaderComponent]>;
+    static ɵinj: i0.ɵɵInjectorDeclaration<HeaderModule>;
+}
+
 declare class PrepareStartingImageModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<PrepareStartingImageModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<PrepareStartingImageModule, [typeof PrepareStartingImageComponent], [typeof EditCanvasModule, typeof i2.ButtonModule, typeof PipeModule, typeof BackNextButtonsModule, typeof i2.IconModule, typeof ProcessLoaderModule], [typeof PrepareStartingImageComponent]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<PrepareStartingImageModule, [typeof PrepareStartingImageComponent], [typeof EditCanvasModule, typeof i2.ButtonModule, typeof PipeModule, typeof BackNextButtonsModule, typeof i2.IconModule, typeof ProcessLoaderModule, typeof StepTileModule, typeof HeaderModule], [typeof PrepareStartingImageComponent]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<PrepareStartingImageModule>;
 }
 
@@ -1423,6 +1507,7 @@ declare class InPhotoComponent {
     appInitializerService: AppInitializerService;
     appEventService: InphotoEventService;
     private _cdk;
+    private _dataService;
     showClass(): boolean;
     set settings(input: any);
     showImageUpload: boolean;
@@ -1436,14 +1521,14 @@ declare class InPhotoComponent {
     preparedImage: string;
     aiDecorationImage: string;
     roomData: SceneBuildObject;
-    segmentJobId: string;
-    constructor(appInitializerService: AppInitializerService, appEventService: InphotoEventService, _cdk: ChangeDetectorRef);
+    segmentJob: SegmentationJob;
+    constructor(appInitializerService: AppInitializerService, appEventService: InphotoEventService, _cdk: ChangeDetectorRef, _dataService: InphotoDataService);
     handleCancelClick(): void;
     startPoint(): void;
     handleImageUpload(image: string): void;
     handleProcessedRoom(roomData: SceneBuildObject): void;
     handleStart3D(data: SceneBuildObject): void;
-    handleSegmentationJobId(segmentJobId: string): void;
+    handleSegmentationJob(segmentJob: SegmentationJob): void;
     handleSegmentOutput(image: string): void;
     handleCancelSegmentClick(): void;
     handleMenuChange(event: any): void;
@@ -1461,47 +1546,38 @@ declare class SegmentInpaintComponent {
     private _loaderService;
     readonly icons: typeof Icon;
     showClass(): boolean;
-    set image(value: string);
-    get image(): string;
-    set segmentJobId(value: string);
-    get segmentJobId(): string;
+    set segmentJob(value: SegmentationJob);
+    get segmentJob(): SegmentationJob;
     cancelClick: EventEmitter<void>;
     preparedImage: EventEmitter<string>;
     segmentationInPaintingData: any;
     showInfoDialog: boolean;
     canvasInPaint: boolean;
     canvasErase: boolean;
+    dragMode: boolean;
     showLoader: boolean;
     loadingTexts: string[];
-    private _image;
-    private _segmentJobiId;
+    image: string;
+    segmentJobId: string;
+    private _segmentJob;
     private _inpaintImageState;
     constructor(iconService: InphotoIconCacheService, _connectorService: InPhotoConnectorService, _loaderService: LoaderService);
+    handleSetValues(): void;
     handleCancelClick(): void;
     openInfoDialog(): void;
-    handleCloseInfoDialogClick(): void;
     toggleEraseMode(erase: boolean): void;
+    toggleDragMode(value: boolean): void;
     handleSegmentationPointClick(event: SegmentationPoint): void;
     processInpainted(): void;
     handleImageStateChange(image: string): void;
     private _handleLoader;
     static ɵfac: i0.ɵɵFactoryDeclaration<SegmentInpaintComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<SegmentInpaintComponent, "co-segment-inpaint", never, { "image": { "alias": "image"; "required": false; }; "segmentJobId": { "alias": "segmentJobId"; "required": false; }; }, { "cancelClick": "cancelClick"; "preparedImage": "preparedImage"; }, never, never, false, never>;
-}
-
-declare class InpaintInfoCardComponent {
-    showClass(): boolean;
-    icon: SafeHtml;
-    title: string;
-    description: string;
-    number: number;
-    static ɵfac: i0.ɵɵFactoryDeclaration<InpaintInfoCardComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<InpaintInfoCardComponent, "co-inpaint-info-card", never, { "icon": { "alias": "icon"; "required": false; }; "title": { "alias": "title"; "required": false; }; "description": { "alias": "description"; "required": false; }; "number": { "alias": "number"; "required": false; }; }, {}, never, never, false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<SegmentInpaintComponent, "co-segment-inpaint", never, { "segmentJob": { "alias": "segmentJob"; "required": false; }; }, { "cancelClick": "cancelClick"; "preparedImage": "preparedImage"; }, never, never, false, never>;
 }
 
 declare class SegmentInpaintModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<SegmentInpaintModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<SegmentInpaintModule, [typeof SegmentInpaintComponent, typeof InpaintInfoCardComponent], [typeof EditCanvasModule, typeof i2.IconModule, typeof PipeModule, typeof i2.ButtonModule, typeof ProcessLoaderModule, typeof CanvasToolBarModule], [typeof SegmentInpaintComponent, typeof InpaintInfoCardComponent]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<SegmentInpaintModule, [typeof SegmentInpaintComponent], [typeof EditCanvasModule, typeof i2.IconModule, typeof PipeModule, typeof i2.ButtonModule, typeof ProcessLoaderModule, typeof CanvasToolBarModule, typeof StepTileModule, typeof HeaderModule], [typeof SegmentInpaintComponent]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<SegmentInpaintModule>;
 }
 
@@ -1515,6 +1591,7 @@ declare class ImageProcessCompleteComponent {
     get image(): string;
     handleStart3D: EventEmitter<SceneBuildObject>;
     handleAiDecorationClicked: EventEmitter<string>;
+    handleContinueSegmentation: EventEmitter<SegmentationJob>;
     cancelClick: EventEmitter<void>;
     showLoader: boolean;
     loadingTexts: string[];
@@ -1523,29 +1600,16 @@ declare class ImageProcessCompleteComponent {
     constructor(iconService: InphotoIconCacheService, _connectorService: InPhotoConnectorService, _appEventService: InphotoEventService);
     handle3DClick(): void;
     handleAiClick(): void;
+    handleContinueSegmentationClick(): void;
     cancel(): void;
     private _handleRoomReceived;
     static ɵfac: i0.ɵɵFactoryDeclaration<ImageProcessCompleteComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<ImageProcessCompleteComponent, "co-image-process-complete", never, { "image": { "alias": "image"; "required": false; }; }, { "handleStart3D": "handleStart3D"; "handleAiDecorationClicked": "handleAiDecorationClicked"; "cancelClick": "cancelClick"; }, never, never, false, never>;
-}
-
-declare class ImageProcessCompleteNextComponent {
-    iconService: InphotoIconCacheService;
-    readonly icons: typeof Icon;
-    showClass(): boolean;
-    icon: Icon;
-    header: string;
-    body: string;
-    onClick: EventEmitter<void>;
-    constructor(iconService: InphotoIconCacheService);
-    handleClick(): void;
-    static ɵfac: i0.ɵɵFactoryDeclaration<ImageProcessCompleteNextComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<ImageProcessCompleteNextComponent, "co-image-process-complete-next", never, { "icon": { "alias": "icon"; "required": false; }; "header": { "alias": "header"; "required": false; }; "body": { "alias": "body"; "required": false; }; }, { "onClick": "onClick"; }, never, never, false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<ImageProcessCompleteComponent, "co-image-process-complete", never, { "image": { "alias": "image"; "required": false; }; }, { "handleStart3D": "handleStart3D"; "handleAiDecorationClicked": "handleAiDecorationClicked"; "handleContinueSegmentation": "handleContinueSegmentation"; "cancelClick": "cancelClick"; }, never, never, false, never>;
 }
 
 declare class ImageProcessCompleteModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<ImageProcessCompleteModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<ImageProcessCompleteModule, [typeof ImageProcessCompleteComponent, typeof ImageProcessCompleteNextComponent], [typeof i2.IconModule, typeof PipeModule, typeof i2.ButtonModule, typeof ProcessLoaderModule], [typeof ImageProcessCompleteComponent, typeof ImageProcessCompleteNextComponent]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<ImageProcessCompleteModule, [typeof ImageProcessCompleteComponent], [typeof i2.IconModule, typeof PipeModule, typeof i2.ButtonModule, typeof ProcessLoaderModule, typeof StepTileModule, typeof HeaderModule], [typeof ImageProcessCompleteComponent]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<ImageProcessCompleteModule>;
 }
 

package/lib/component/ai-prompt/style/_layout.scss

@@ -3,11 +3,8 @@
 @include cfg.export-module('co-ai-prompt-layout') {
   .co-ai-prompt {
     .custom-prompt-container {
-      margin: 20px auto;
-      background: var(--co-inphoto-background-white);
-      border-radius: var(--co-inphoto-border-radius);
+
       box-sizing: border-box;
-      padding: 15px;
 
       .custom-height {
         height: 100px;
@@ -27,31 +24,11 @@
         }
       }
 
-      .prompt-head {
-        @include cfg.sub-header-text();
-      }
-
-      .prompt-text {
-        @include cfg.text();
-        margin-bottom: 10px;
-      }
-
       .prompt-mode {
         margin: 10px auto;
         display: flex;
         align-items: center;
 
-        .prompt-mode-text {
-          font-size: var(--co-inphoto-font-size-label);
-          .active {
-            font-weight: bold;
-          }
-
-          .spacer {
-            margin: 0 4px;
-            color: #CCC;
-          }
-        }
 
         .prompt-mode-switch {
           margin-right: 15px;
@@ -68,7 +45,6 @@
               height: 0;
 
               &:checked + .slider {
-                background-color: var(--co-inphoto-accent-color);
 
                 &:before {
                   -webkit-transform: translateX(20px);
@@ -76,10 +52,6 @@
                   transform: translateX(20px);
                 }
               }
-
-              &:focus + .slider {
-                box-shadow: 0 0 1px var(--co-inphoto-accent-color);
-              }
             }
           }
 
@@ -90,7 +62,6 @@
             left: 0;
             right: 0;
             bottom: 0;
-            background-color: #ccc;
             transition: 0.4s;
 
             &:before {
@@ -100,7 +71,6 @@
               width: 16px;
               left: 4px;
               bottom: 4px;
-              background-color: white;
               transition: 0.4s;
             }
 
@@ -114,12 +84,6 @@
           }
         }
       }
-
-
-      .required-input-empty {
-        border: 1px solid #dc3545;
-        background-color: rgba(220, 53, 69, 0.25);
-      }
     }
   }
 }

package/lib/component/ai-prompt/style/_material-definition.scss

@@ -1,3 +1,5 @@
 :root {
-
+  --co-inphoto-prompt-spacer-color: #D9D9DF;
+  --co-inphoto-input-required-error-color: #dc3545;
+  --co-inphoto-input-required-error-background: rgba(220, 53, 69, 0.25);
 }

package/lib/component/ai-prompt/style/_theme.scss

@@ -2,8 +2,67 @@
 
 @include cfg.export-module('co-ai-prompt-theme') {
   .co-ai-prompt {
+    .custom-prompt-container {
+      margin: 20px auto;
+      background: var(--co-inphoto-background-white);
+      border-radius: var(--co-inphoto-border-radius);
+      padding: 15px;
+
+
+      .prompt-head {
+        @include cfg.sub-header-text();
+      }
+
+      .prompt-text {
+        @include cfg.text();
+        margin-bottom: 10px;
+      }
+
+      .prompt-mode {
+        .prompt-mode-text {
+          font-size: var(--co-inphoto-font-size-label);
+
+          .active {
+            font-weight: bold;
+          }
+
+          .spacer {
+            margin: 0 4px;
+            color: var(--co-inphoto-prompt-spacer-color);
+          }
+        }
+
+        .prompt-mode-switch {
+
+          .switch {
+
+            input {
+              &:checked + .slider {
+                background-color: var(--co-inphoto-accent-color);
+              }
+
+              &:focus + .slider {
+                box-shadow: 0 0 1px var(--co-inphoto-accent-color);
+              }
+            }
+          }
+
+          .slider {
+            background-color: var(--co-inphoto-prompt-spacer-color);
+
+            &:before {
+              background-color: var(--co-inphoto-background-white);
+            }
+          }
+        }
+      }
+
+      .required-input-empty {
+        border: 1px solid var(--co-inphoto-input-required-error-color);
+        background-color: var(--co-inphoto-input-required-error-background);
+      }
+    }
   }
 }
 
 
-

package/lib/component/canvas-tool-bar/style/_layout.scss

@@ -5,44 +5,40 @@
     .canvas-toolbar {
       display: flex;
       align-items: center;
-      background: var(--co-inphoto-dialog-background-color);
+      background: var(--co-inphoto-background-white);
       position: absolute;
       top: 50px;
-      left: calc(50% - 400px);
-      z-index: 100;
+      left: 25%;
+      z-index: 25;
       border-radius: var(--co-inphoto-border-radius);
       box-sizing: border-box;
-      padding: 15px 15px 15px 0;
+      padding: 10px;
       justify-content: space-around;
 
       .drag-indicator-icon {
         cursor: grab;
+        box-sizing: border-box;
+        padding: 8px;
+        background: var(--co-inphoto-dialog-background-color);
+        border-radius: var(--co-inphoto-border-radius);
 
         &:active {
           cursor: grabbing;
         }
 
-        @include cfg.default-icon(var(--co-inphoto-icon-size-large), var(--co-inphoto-icon-size-large), var(--co-inphoto-accent-text));
+        @include cfg.default-icon(var(--co-inphoto-button-small-icon-size), var(--co-inphoto-button-small-icon-size), var(--co-inphoto-accent-text));
       }
 
       .modus-indicator, .tool-selection, .actions {
         display: flex;
         align-items: center;
-        margin: 0 10px;
+        margin: 0 5px;
       }
 
 
       .modus-indicator {
         .modus-indicator-text {
           @include cfg.sub-header-text();
-          margin-right: 10px;
-        }
-
-        .modus-indicator-info-icon {
-          .info-button {
-            @include cfg.default-icon(var(--co-inphoto-toolbar-info-icon-size), var(--co-inphoto-toolbar-info-icon-size), var(--co-inphoto-icon-color));
-            cursor: pointer;
-          }
         }
       }
 
@@ -50,23 +46,25 @@
         color: var(--co-inphoto-toolbar-spacer-color);
         font-size: 30px;
         font-weight: lighter;
-        margin: 0 10px;
+        margin: 0 5px;
       }
 
       .tool-selection {
-        .brush-button, .eraser-button {
+        .brush-button, .eraser-button, .drag-button {
           background-color: var(--co-inphoto-button-background);
           color: var(--co-inphoto-button-color);
           font-size: var(--co-inphoto-button-font-size);
           border: var(--co-inphoto-button-border);
           cursor: pointer;
-          padding: var(--co-inphoto-button-padding);
+          padding: 0;
           border-radius: var(--co-inphoto-button-radius);
           margin: 0 4px;
+          height: 35px;
+          width: 35px;
 
           .co-icon {
-            height: var(--co-inphoto-button-icon-size);
-            width: var(--co-inphoto-button-icon-size);
+            height: var(--co-inphoto-button-small-icon-size);
+            width: var(--co-inphoto-button-small-icon-size);
 
             svg, path {
               fill: var(--co-inphoto-button-icon-color);
@@ -91,6 +89,7 @@
         gap: 20px;
 
         .cancel-button, .action-button {
+          height: 35px;
           display: flex;
           align-content: center;
           align-items: center;
@@ -104,7 +103,7 @@
           font-size: var(--co-inphoto-button-font-size);
           padding: var(--co-inphoto-button-padding);
           font-weight: 500;
-          @include cfg.default-icon(var(--co-inphoto-button-icon-size), var(--co-inphoto-button-icon-size), var(--co-inphoto-button-icon-color));
+          @include cfg.default-icon(var(--co-inphoto-button-small-icon-size), var(--co-inphoto-button-small-icon-size), var(--co-inphoto-button-icon-color));
 
           .label {
             margin-right: 10px;
@@ -119,7 +118,7 @@
                   var(--co-inphoto-action-button-background),
                   var(--co-inphoto-action-button-color),
                   var(--co-inphoto-action-button-font-size),
-                  var(--co-inphoto-action-button-icon-size),
+                  var(--co-inphoto-button-small-icon-size),
                   var(--co-inphoto-action-button-icon-color),
                   var(--co-inphoto-action-button-border),
                   var(--co-inphoto-action-button-radius),

package/lib/component/catalog/style/_layout.scss

@@ -3,7 +3,7 @@
 @include cfg.export-module('cco-catalog-layout') {
   .co-catalog {
     .catalog-dialog {
-      z-index: 1;
+      z-index: 100;
       top: 0;
       left: 85px;
       right: 0;