@rtsee/ngx 0.0.108 → 0.0.110

package/dist/ngx/fesm2022/rtsee-ngx.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { Injectable, Input, Component, ViewChild, EventEmitter, Output, forwardRef, Directive, DOCUMENT, HostListener, Inject, ChangeDetectionStrategy, output, CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
+import { Injectable, Input, Component, ViewChild, EventEmitter, Output, forwardRef, Directive, HostListener, reflectComponentType, DOCUMENT, Inject, ChangeDetectionStrategy, output, CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
 import * as i2$1 from '@angular/common';
 import { NgClass, NgIf, NgForOf, DatePipe, NgComponentOutlet, SlicePipe, JsonPipe, DOCUMENT as DOCUMENT$1, NgStyle, CommonModule, NgOptimizedImage } from '@angular/common';
 import * as i1 from '@angular/forms';
@@ -17,8 +17,8 @@ import * as i2 from '@angular/router';
 import { RouterLink, RouterLinkActive, NavigationEnd } from '@angular/router';
 import { Divider } from 'primeng/divider';
 import * as i1$1 from '@angular/common/http';
-import { RTSeeChatMemberRoles, RTSeeIllustratorEvents, RTSeeChatTypes, OzzyTaskStatus } from '@rtsee/common';
-import { sanitizeImageUrl, ManageAgentForm, RTSeeForm, RTSeeFormFieldRadioGroup, RTSeeFormField, RTSeeFormFieldImageUploader, RTSeeRater } from '@rtsee/utilities-ui';
+import { RTSeeChatMemberRoles, RTSeeIllustratorEvents, RTSeeChatTypes, OzzyTaskStatus, getStoryTranslatorLanguage, STORY_TRANSLATOR_LANGUAGES } from '@rtsee/common';
+import { sanitizeImageUrl, ManageAgentForm, RTSeeForm, RTSeeFormFieldRadioGroup, RTSeeFormField, RTSeeFormFieldImageUploader, fetchImageBlob, RTSeeRater } from '@rtsee/utilities-ui';
 import { InputText } from 'primeng/inputtext';
 import { InputGroup } from 'primeng/inputgroup';
 import { Textarea } from 'primeng/textarea';
@@ -28,6 +28,7 @@ import { InputNumber } from 'primeng/inputnumber';
 import * as i1$2 from 'primeng/autocomplete';
 import { AutoCompleteModule } from 'primeng/autocomplete';
 import { ImageCropperComponent } from 'ngx-image-cropper';
+import { Tooltip } from 'primeng/tooltip';
 import { Fieldset } from 'primeng/fieldset';
 import { DatePicker } from 'primeng/datepicker';
 import { RTSeeManageChatInfo, RTSeeChatEvents, OzzyClientTaskEvents, OzzyWorkflowClientEvents, RTSeeMentionAutocomplete, RTSeeWorkflowAutocomplete } from '@rtsee/messenger';
@@ -54,7 +55,6 @@ import { Listbox } from 'primeng/listbox';
 import { RTSeeRoutesList } from '@rtsee/factory';
 import { Avatar } from 'primeng/avatar';
 import { Image } from 'primeng/image';
-import { Tooltip } from 'primeng/tooltip';
 import { PanelMenu } from 'primeng/panelmenu';
 import { Menu } from 'primeng/menu';
 import { Password } from 'primeng/password';
@@ -675,15 +675,40 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImpor
             }] } });
 
 class RTSeeImageUploaderComponent {
-    constructor(elementRef) {
+    constructor(elementRef, cdr) {
         this.elementRef = elementRef;
+        this.cdr = cdr;
+        this.onUploaderChanged = () => this.cdr.markForCheck();
         this.submittingFromPainting = false;
     }
     ngOnInit() {
         this.attachEventHandlers();
     }
+    ngOnDestroy() {
+        this.imageUploader?.off('changed', this.onUploaderChanged);
+    }
     attachEventHandlers() {
         this.imageUploader.on('completed', this.onImagesUploaded.bind(this));
+        this.imageUploader.on('changed', this.onUploaderChanged);
+    }
+    get optimizeTooltip() {
+        if (this.imageUploader.optimizing) {
+            return 'Optimizing…';
+        }
+        const base = `Optimize (curr size: ${this.imageUploader.currentImageSizeMb}mb)`;
+        return this.imageUploader.optimizationError
+            ? `${base} - last attempt failed: ${this.imageUploader.optimizationError}`
+            : base;
+    }
+    async onOptimizeClicked(event) {
+        // The preview container opens the uploader on click
+        event.stopPropagation();
+        event.preventDefault();
+        const optimizedUrl = await this.imageUploader.optimizeCurrentImage();
+        if (optimizedUrl) {
+            // The optimized url is already propagated to the form field (`completed`) - persist it
+            setTimeout(() => this.submitParentForm(), 50);
+        }
     }
     onNextButtonClicked() {
         this.imageUploader.onNextClicked();
@@ -712,6 +737,10 @@ class RTSeeImageUploaderComponent {
                 // 1. If RTSeeIllustrator is in reviewingGeneratedImage mode, apply currently reviewed image to ImageUploader
                 this.submittingFromPainting = true;
                 this.imageUploader.applyImageUrl(sanitizeImageUrl(response.imageUrl));
+                // Reset illustrator state and UI
+                if (typeof window !== 'undefined') {
+                    window.dispatchEvent(new CustomEvent(RTSeeIllustratorEvents.RESET_STATE));
+                }
                 // and if Imageuploader is part of the form it should immediately submit the form
                 setTimeout(() => {
                     this.submitParentForm();
@@ -760,8 +789,11 @@ class RTSeeImageUploaderComponent {
                     return;
                 }
             }
-            // 2. Programmatic RTSeeForm submit
-            if (this.imageUploader.form && typeof this.imageUploader.form.submit === 'function') {
+            // 2. Custom submit hook, then programmatic RTSeeForm submit
+            if (this.imageUploader.onSubmitForm) {
+                this.imageUploader.onSubmitForm();
+            }
+            else if (this.imageUploader.form && typeof this.imageUploader.form.submit === 'function') {
                 this.imageUploader.form.submit();
             }
         }
@@ -769,13 +801,13 @@ class RTSeeImageUploaderComponent {
             console.warn('[RTSeeImageUploaderComponent] submitParentForm error:', e);
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: RTSeeImageUploaderComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: RTSeeImageUploaderComponent, isStandalone: true, selector: "rtsee-image-uploader", inputs: { imageUploader: "imageUploader" }, viewQueries: [{ propertyName: "cropperComponent", first: true, predicate: RTSeeCropperComponent, descendants: true }], ngImport: i0, template: "<div class=\"rtsee-image-uploader\">\n  @if (!imageUploader.awaitsUploadOrCrop) {\n    <div class=\"rtsee-image-uploader-image\"\n         (click)=\"imageUploader.init()\"\n    >\n      @if (imageUploader.uploadedPhotoPreview) {\n        <img [src]=\"imageUploader.uploadedPhotoPreview\"\n             class=\"rtsee-image-uploader-preview-image\"\n             alt=\"uploaded_photo\"\n        >\n      }\n      @if (!imageUploader.uploadedPhotoPreview) {\n        <div class=\"rtsee-preloader-image-placeholder\">\n          <span class=\"material-icons-outlined rtsee-upload-icon\">cloud_upload</span>\n          <span class=\"rtsee-upload-text\">Tap to upload image</span>\n        </div>\n      }\n      <div class=\"rtsee-image-uploader-illustrator-btn\"\n           (click)=\"onPaintingIconClicked($event)\"\n           title=\"Apply illustration from NanoBanana Illustrator\"\n      >\n        <p-button icon=\"pi pi-palette\" severity=\"help\" [rounded]=\"true\"></p-button>\n      </div>\n      <div class=\"rtsee-image-uploader-image-change-btn\">\n        <p-button icon=\"pi pi-pencil\" severity=\"info\"></p-button>\n      </div>\n    </div>\n  }\n\n  @if (imageUploader.awaitsUploadOrCrop) {\n    <rtsee-uploader [uploader]=\"imageUploader.uploader\"\n                    [hidden]=\"imageUploader.cropper?.activeImage\"\n    ></rtsee-uploader>\n\n    @if (imageUploader.cropper?.activeImage) {\n      <rtsee-cropper [cropper]=\"imageUploader.cropper\"\n                     (nextClicked)=\"onNextButtonClicked()\"\n      ></rtsee-cropper>\n    }\n  }\n</div>\n", dependencies: [{ kind: "component", type: RTSeeUploaderComponent, selector: "rtsee-uploader", inputs: ["uploader"] }, { kind: "component", type: RTSeeCropperComponent, selector: "rtsee-cropper", inputs: ["cropper"], outputs: ["nextClicked"] }, { kind: "component", type: Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "buttonProps", "autofocus", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: RTSeeImageUploaderComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: RTSeeImageUploaderComponent, isStandalone: true, selector: "rtsee-image-uploader", inputs: { imageUploader: "imageUploader" }, viewQueries: [{ propertyName: "cropperComponent", first: true, predicate: RTSeeCropperComponent, descendants: true }], ngImport: i0, template: "<div class=\"rtsee-image-uploader\">\n  @if (!imageUploader.awaitsUploadOrCrop) {\n    <div class=\"rtsee-image-uploader-image\"\n         (click)=\"imageUploader.init()\"\n    >\n      @if (imageUploader.uploadedPhotoPreview) {\n        <img [src]=\"imageUploader.uploadedPhotoPreview\"\n             class=\"rtsee-image-uploader-preview-image\"\n             alt=\"uploaded_photo\"\n        >\n      }\n      @if (!imageUploader.uploadedPhotoPreview) {\n        <div class=\"rtsee-preloader-image-placeholder\">\n          <span class=\"material-icons-outlined rtsee-upload-icon\">cloud_upload</span>\n          <span class=\"rtsee-upload-text\">Tap to upload image</span>\n        </div>\n      }\n      <div class=\"rtsee-image-uploader-illustrator-btn\"\n           (click)=\"onPaintingIconClicked($event)\"\n           title=\"Apply illustration from NanoBanana Illustrator\"\n      >\n        <p-button icon=\"pi pi-palette\" severity=\"help\" [rounded]=\"true\"></p-button>\n      </div>\n      <div class=\"rtsee-image-uploader-image-change-btn\"\n           [class.rtsee-shifted]=\"imageUploader.needsOptimization\"\n      >\n        <p-button icon=\"pi pi-pencil\" severity=\"info\"></p-button>\n      </div>\n      @if (imageUploader.needsOptimization) {\n        <div class=\"rtsee-image-uploader-optimize-btn\"\n             id=\"rtsee-image-uploader-optimize-btn\"\n             [class.rtsee-optimizing]=\"imageUploader.optimizing\"\n             [pTooltip]=\"optimizeTooltip\"\n             tooltipPosition=\"top\"\n             (click)=\"onOptimizeClicked($event)\"\n        >\n          <p-button [icon]=\"imageUploader.optimizing ? 'pi pi-spin pi-spinner' : 'pi pi-exclamation-triangle'\"\n                    severity=\"warn\"\n                    [rounded]=\"true\"\n                    [disabled]=\"imageUploader.optimizing\"\n                    [attr.aria-label]=\"optimizeTooltip\"\n          ></p-button>\n        </div>\n      }\n    </div>\n  }\n\n  @if (imageUploader.awaitsUploadOrCrop) {\n    <rtsee-uploader [uploader]=\"imageUploader.uploader\"\n                    [hidden]=\"imageUploader.cropper?.activeImage\"\n    ></rtsee-uploader>\n\n    @if (imageUploader.cropper?.activeImage) {\n      <rtsee-cropper [cropper]=\"imageUploader.cropper\"\n                     (nextClicked)=\"onNextButtonClicked()\"\n      ></rtsee-cropper>\n    }\n  }\n</div>\n", dependencies: [{ kind: "component", type: RTSeeUploaderComponent, selector: "rtsee-uploader", inputs: ["uploader"] }, { kind: "component", type: RTSeeCropperComponent, selector: "rtsee-cropper", inputs: ["cropper"], outputs: ["nextClicked"] }, { kind: "component", type: Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "buttonProps", "autofocus", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "directive", type: Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions", "appendTo"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: RTSeeImageUploaderComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'rtsee-image-uploader', imports: [RTSeeUploaderComponent, RTSeeCropperComponent, Button], template: "<div class=\"rtsee-image-uploader\">\n  @if (!imageUploader.awaitsUploadOrCrop) {\n    <div class=\"rtsee-image-uploader-image\"\n         (click)=\"imageUploader.init()\"\n    >\n      @if (imageUploader.uploadedPhotoPreview) {\n        <img [src]=\"imageUploader.uploadedPhotoPreview\"\n             class=\"rtsee-image-uploader-preview-image\"\n             alt=\"uploaded_photo\"\n        >\n      }\n      @if (!imageUploader.uploadedPhotoPreview) {\n        <div class=\"rtsee-preloader-image-placeholder\">\n          <span class=\"material-icons-outlined rtsee-upload-icon\">cloud_upload</span>\n          <span class=\"rtsee-upload-text\">Tap to upload image</span>\n        </div>\n      }\n      <div class=\"rtsee-image-uploader-illustrator-btn\"\n           (click)=\"onPaintingIconClicked($event)\"\n           title=\"Apply illustration from NanoBanana Illustrator\"\n      >\n        <p-button icon=\"pi pi-palette\" severity=\"help\" [rounded]=\"true\"></p-button>\n      </div>\n      <div class=\"rtsee-image-uploader-image-change-btn\">\n        <p-button icon=\"pi pi-pencil\" severity=\"info\"></p-button>\n      </div>\n    </div>\n  }\n\n  @if (imageUploader.awaitsUploadOrCrop) {\n    <rtsee-uploader [uploader]=\"imageUploader.uploader\"\n                    [hidden]=\"imageUploader.cropper?.activeImage\"\n    ></rtsee-uploader>\n\n    @if (imageUploader.cropper?.activeImage) {\n      <rtsee-cropper [cropper]=\"imageUploader.cropper\"\n                     (nextClicked)=\"onNextButtonClicked()\"\n      ></rtsee-cropper>\n    }\n  }\n</div>\n" }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { cropperComponent: [{
+            args: [{ selector: 'rtsee-image-uploader', imports: [RTSeeUploaderComponent, RTSeeCropperComponent, Button, Tooltip], template: "<div class=\"rtsee-image-uploader\">\n  @if (!imageUploader.awaitsUploadOrCrop) {\n    <div class=\"rtsee-image-uploader-image\"\n         (click)=\"imageUploader.init()\"\n    >\n      @if (imageUploader.uploadedPhotoPreview) {\n        <img [src]=\"imageUploader.uploadedPhotoPreview\"\n             class=\"rtsee-image-uploader-preview-image\"\n             alt=\"uploaded_photo\"\n        >\n      }\n      @if (!imageUploader.uploadedPhotoPreview) {\n        <div class=\"rtsee-preloader-image-placeholder\">\n          <span class=\"material-icons-outlined rtsee-upload-icon\">cloud_upload</span>\n          <span class=\"rtsee-upload-text\">Tap to upload image</span>\n        </div>\n      }\n      <div class=\"rtsee-image-uploader-illustrator-btn\"\n           (click)=\"onPaintingIconClicked($event)\"\n           title=\"Apply illustration from NanoBanana Illustrator\"\n      >\n        <p-button icon=\"pi pi-palette\" severity=\"help\" [rounded]=\"true\"></p-button>\n      </div>\n      <div class=\"rtsee-image-uploader-image-change-btn\"\n           [class.rtsee-shifted]=\"imageUploader.needsOptimization\"\n      >\n        <p-button icon=\"pi pi-pencil\" severity=\"info\"></p-button>\n      </div>\n      @if (imageUploader.needsOptimization) {\n        <div class=\"rtsee-image-uploader-optimize-btn\"\n             id=\"rtsee-image-uploader-optimize-btn\"\n             [class.rtsee-optimizing]=\"imageUploader.optimizing\"\n             [pTooltip]=\"optimizeTooltip\"\n             tooltipPosition=\"top\"\n             (click)=\"onOptimizeClicked($event)\"\n        >\n          <p-button [icon]=\"imageUploader.optimizing ? 'pi pi-spin pi-spinner' : 'pi pi-exclamation-triangle'\"\n                    severity=\"warn\"\n                    [rounded]=\"true\"\n                    [disabled]=\"imageUploader.optimizing\"\n                    [attr.aria-label]=\"optimizeTooltip\"\n          ></p-button>\n        </div>\n      }\n    </div>\n  }\n\n  @if (imageUploader.awaitsUploadOrCrop) {\n    <rtsee-uploader [uploader]=\"imageUploader.uploader\"\n                    [hidden]=\"imageUploader.cropper?.activeImage\"\n    ></rtsee-uploader>\n\n    @if (imageUploader.cropper?.activeImage) {\n      <rtsee-cropper [cropper]=\"imageUploader.cropper\"\n                     (nextClicked)=\"onNextButtonClicked()\"\n      ></rtsee-cropper>\n    }\n  }\n</div>\n" }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }], propDecorators: { cropperComponent: [{
                 type: ViewChild,
                 args: [RTSeeCropperComponent]
             }], imageUploader: [{
@@ -1857,10 +1889,54 @@ class MediaWidgetComponent {
         this.visibleImages = [];
         this.hiddenCount = 0;
         this.showAll = false;
+        this.downloadingUrl = null;
         this.MAX_GRID = 4;
     }
     ngOnInit() {
         this.updateVisibleImages();
+        this.notifyRequestedGeneration();
+    }
+    ngOnChanges(changes) {
+        // e.g. downsized versions got attached to the message images
+        if (changes['message'] && !changes['message'].firstChange) {
+            this.updateVisibleImages();
+        }
+    }
+    /** Downsized version for rendering, the original otherwise */
+    previewUrl(img) {
+        return img.smallVersionUrl || img.url;
+    }
+    async downloadOriginal(event, img) {
+        event.stopPropagation();
+        event.preventDefault();
+        if (typeof window === 'undefined' || !img?.url || this.downloadingUrl) {
+            return;
+        }
+        this.downloadingUrl = img.url;
+        try {
+            const blob = await fetchImageBlob(img.url);
+            const objectUrl = URL.createObjectURL(blob);
+            const link = document.createElement('a');
+            link.href = objectUrl;
+            link.download = this.getDownloadFileName(img, blob);
+            document.body.appendChild(link);
+            link.click();
+            link.remove();
+            setTimeout(() => URL.revokeObjectURL(objectUrl), 1000);
+        }
+        catch (e) {
+            // CORS / network failure - let the browser open the original instead
+            console.warn('[MediaWidget] Blob download failed, opening original image:', e);
+            window.open(img.url, '_blank', 'noopener');
+        }
+        finally {
+            this.downloadingUrl = null;
+        }
+    }
+    getDownloadFileName(img, blob) {
+        const extension = blob.type?.split('/')[1]?.split('+')[0] || 'png';
+        const base = (img.name || img.id || 'image').replace(/[^\w.-]+/g, '-');
+        return base.includes('.') ? base : `${base}.${extension}`;
     }
     get hasVideo() {
         return !!this.message.video;
@@ -1884,16 +1960,33 @@ class MediaWidgetComponent {
         event.stopPropagation();
         event.preventDefault();
         if (typeof window !== 'undefined' && img?.url) {
-            const cleanUrl = sanitizeImageUrl(img.url);
+            // Retain AWS presigned URL so Illustrator can render the image preview!
             window.dispatchEvent(new CustomEvent(RTSeeIllustratorEvents.SET_IMAGE_FOR_REVIEW, {
                 detail: {
-                    imageUrl: cleanUrl,
+                    imageUrl: img.url,
                     prompt: img.name || (typeof this.message.text === 'string' ? this.message.text : '') || '',
                     source: 'messenger',
                 },
             }));
         }
     }
+    addToContext(event, img) {
+        event.stopPropagation();
+        event.preventDefault();
+        if (typeof window !== 'undefined' && img?.url) {
+            window.dispatchEvent(new CustomEvent(RTSeeIllustratorEvents.ADD_IMAGE_TO_CONTEXT, {
+                detail: {
+                    id: 'chat-img-' + Math.random().toString(36).substring(2, 9),
+                    imageUrl: img.url,
+                    title: img.name || 'Chat image',
+                    description: (typeof this.message.text === 'string' ? this.message.text : '') || '',
+                    visualDescription: '',
+                    sourceType: 'custom',
+                    active: true,
+                },
+            }));
+        }
+    }
     updateVisibleImages() {
         const all = this.message.images || [];
         if (this.showAll || all.length <= this.MAX_GRID) {
@@ -1905,12 +1998,25 @@ class MediaWidgetComponent {
             this.hiddenCount = all.length - this.MAX_GRID;
         }
     }
+    notifyRequestedGeneration() {
+        const reqId = this.message?.data?.requestId;
+        if (reqId && this.visibleImages.length > 0 && typeof window !== 'undefined') {
+            window.dispatchEvent(new CustomEvent(RTSeeIllustratorEvents.REQUESTED_GENERATION_SUCCEED, {
+                detail: {
+                    requestId: reqId,
+                    imageUrl: this.visibleImages[0].url,
+                    messageId: this.message.id,
+                    chatId: this.chat?.id,
+                },
+            }));
+        }
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: MediaWidgetComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: MediaWidgetComponent, isStandalone: true, selector: "rtsee-media-widget", inputs: { message: "message", messenger: "messenger", chat: "chat", showCost: "showCost" }, ngImport: i0, template: "<div class=\"rts-media-widget\">\n  <!-- Video player -->\n  @if (message.video) {\n    <div class=\"rts-media-video\">\n      <video\n        controls\n        playsinline\n        preload=\"metadata\"\n        [src]=\"message.video.url\"\n        class=\"rts-video-player\"\n      >\n        Your browser does not support video playback.\n      </video>\n    </div>\n  }\n\n  <!-- Image grid -->\n  @if (hasImages) {\n    <div class=\"rts-media-images\" [ngClass]=\"gridClass\">\n      @for (img of visibleImages; track img.url) {\n        <div class=\"rts-media-image-wrapper\">\n          <img [src]=\"img.url\" [alt]=\"img.name\" class=\"rts-media-image\" loading=\"lazy\" />\n          <button\n            type=\"button\"\n            class=\"rts-media-btn-paint\"\n            title=\"Send image to Illustrator\"\n            (click)=\"sendToIllustrator($event, img)\"\n          >\n            <i class=\"pi pi-palette\"></i>\n            <span>+ paint</span>\n          </button>\n        </div>\n      }\n    </div>\n  }\n\n  <!-- Show more / less toggle -->\n  @if (hiddenCount > 0 || showAll) {\n    <button class=\"rts-media-toggle\" (click)=\"toggleShowAll()\">\n      {{ showAll ? 'Show less' : 'Show ' + hiddenCount + ' more' }}\n    </button>\n  }\n\n  <!-- Cost display (optional, disabled when nested inside agentic widget) -->\n  @if (showCost && message.cost) {\n    <div class=\"rts-media-cost\">\n      <rtsee-cost-display [cost]=\"message.cost\"></rtsee-cost-display>\n    </div>\n  }\n</div>\n", styles: [".rts-media-widget{max-width:100%}.rts-media-video{border-radius:8px;overflow:hidden;margin-bottom:6px}.rts-video-player{width:100%;max-height:360px;border-radius:8px;background:#000;display:block}.rts-media-images{display:grid;gap:4px;border-radius:8px;overflow:hidden;margin-bottom:4px}.rts-media-grid-1{grid-template-columns:1fr}.rts-media-grid-2{grid-template-columns:1fr 1fr}.rts-media-grid-4{grid-template-columns:1fr 1fr;grid-template-rows:auto auto}.rts-media-image-wrapper{position:relative;overflow:hidden;border-radius:6px;background:var(--rts-bg-secondary, #1e1e2e)}.rts-media-btn-paint{position:absolute;top:8px;right:8px;z-index:5;display:inline-flex;align-items:center;gap:4px;padding:4px 8px;background:#12121cd9;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);color:#e9d5ff;border:1px solid rgba(168,85,247,.45);border-radius:6px;font-size:11px;font-weight:600;cursor:pointer;transition:all .2s cubic-bezier(.34,1.56,.64,1);box-shadow:0 2px 8px #00000080}.rts-media-btn-paint i{font-size:11px;color:#c084fc}.rts-media-btn-paint span{line-height:1}.rts-media-btn-paint:hover{background:#9333eae6;color:#fff;border-color:#a855f7;transform:translateY(-1px) scale(1.04);box-shadow:0 4px 12px #a855f773}.rts-media-btn-paint:hover i{color:#fff}.rts-media-btn-paint:active{transform:translateY(0) scale(.98)}.rts-media-image{width:100%;height:auto;max-height:280px;object-fit:cover;display:block;transition:transform .2s ease;cursor:pointer}.rts-media-image:hover{transform:scale(1.02)}.rts-media-grid-1 .rts-media-image{max-height:400px;object-fit:contain}.rts-media-toggle{display:block;width:100%;padding:6px 0;border:none;background:none;color:var(--rts-agent-accent, #8b5cf6);font-size:12px;font-weight:500;cursor:pointer;text-align:center;transition:opacity .15s ease}.rts-media-toggle:hover{opacity:.8}.rts-media-cost{display:flex;justify-content:flex-end;padding-top:4px}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: CostDisplayComponent, selector: "rtsee-cost-display", inputs: ["cost"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: MediaWidgetComponent, isStandalone: true, selector: "rtsee-media-widget", inputs: { message: "message", messenger: "messenger", chat: "chat", showCost: "showCost" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"rts-media-widget\">\n  <!-- Video player -->\n  @if (message.video) {\n    <div class=\"rts-media-video\">\n      <video\n        controls\n        playsinline\n        preload=\"metadata\"\n        [src]=\"message.video.url\"\n        class=\"rts-video-player\"\n      >\n        Your browser does not support video playback.\n      </video>\n    </div>\n  }\n\n  <!-- Image grid -->\n  @if (hasImages) {\n    <div class=\"rts-media-images\" [ngClass]=\"gridClass\">\n      @for (img of visibleImages; track img.id || img.url) {\n        <div class=\"rts-media-image-wrapper\">\n          <img [src]=\"previewUrl(img)\" [alt]=\"img.name\" class=\"rts-media-image\" loading=\"lazy\" />\n          <button\n            type=\"button\"\n            class=\"rts-media-btn-download\"\n            [class.rts-downloading]=\"downloadingUrl === img.url\"\n            title=\"Download original image\"\n            aria-label=\"Download original image\"\n            (click)=\"downloadOriginal($event, img)\"\n          >\n            <i class=\"pi\" [ngClass]=\"downloadingUrl === img.url ? 'pi-spin pi-spinner' : 'pi-download'\"></i>\n          </button>\n          <div class=\"rts-media-image-actions\">\n            <button\n              type=\"button\"\n              class=\"rts-media-btn-paint\"\n              title=\"Send image to Illustrator (Review & Iterate)\"\n              (click)=\"sendToIllustrator($event, img)\"\n            >\n              <i class=\"pi pi-palette\"></i>\n              <span>+ paint</span>\n            </button>\n            <button\n              type=\"button\"\n              class=\"rts-media-btn-context\"\n              title=\"Add image to Illustrator context references\"\n              (click)=\"addToContext($event, img)\"\n            >\n              <i class=\"pi pi-plus\"></i>\n              <span>+ context</span>\n            </button>\n          </div>\n        </div>\n      }\n    </div>\n  }\n\n  <!-- Show more / less toggle -->\n  @if (hiddenCount > 0 || showAll) {\n    <button class=\"rts-media-toggle\" (click)=\"toggleShowAll()\">\n      {{ showAll ? 'Show less' : 'Show ' + hiddenCount + ' more' }}\n    </button>\n  }\n\n  <!-- Cost display (optional, disabled when nested inside agentic widget) -->\n  @if (showCost && message.cost) {\n    <div class=\"rts-media-cost\">\n      <rtsee-cost-display [cost]=\"message.cost\"></rtsee-cost-display>\n    </div>\n  }\n</div>\n", styles: [".rts-media-widget{max-width:100%}.rts-media-video{border-radius:8px;overflow:hidden;margin-bottom:6px}.rts-video-player{width:100%;max-height:360px;border-radius:8px;background:#000;display:block}.rts-media-images{display:grid;gap:4px;border-radius:8px;overflow:hidden;margin-bottom:4px}.rts-media-grid-1{grid-template-columns:1fr}.rts-media-grid-2{grid-template-columns:1fr 1fr}.rts-media-grid-4{grid-template-columns:1fr 1fr;grid-template-rows:auto auto}.rts-media-image-wrapper{position:relative;overflow:hidden;border-radius:6px;background:var(--rts-bg-secondary, #1e1e2e)}.rts-media-image-actions{position:absolute;top:8px;right:8px;z-index:5;display:inline-flex;align-items:center;gap:6px}.rts-media-btn-paint{display:inline-flex;align-items:center;gap:4px;padding:4px 8px;background:#12121cd9;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);color:#e9d5ff;border:1px solid rgba(168,85,247,.45);border-radius:6px;font-size:11px;font-weight:600;cursor:pointer;transition:all .2s cubic-bezier(.34,1.56,.64,1);box-shadow:0 2px 8px #00000080}.rts-media-btn-paint i{font-size:11px;color:#c084fc}.rts-media-btn-paint span{line-height:1}.rts-media-btn-paint:hover{background:#9333eae6;color:#fff;border-color:#a855f7;transform:translateY(-1px) scale(1.04);box-shadow:0 4px 12px #a855f773}.rts-media-btn-paint:hover i{color:#fff}.rts-media-btn-paint:active{transform:translateY(0) scale(.98)}.rts-media-btn-context{display:inline-flex;align-items:center;gap:4px;padding:4px 8px;background:#12121cd9;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);color:#bae6fd;border:1px solid rgba(56,189,248,.45);border-radius:6px;font-size:11px;font-weight:600;cursor:pointer;transition:all .2s cubic-bezier(.34,1.56,.64,1);box-shadow:0 2px 8px #00000080}.rts-media-btn-context i{font-size:11px;color:#38bdf8}.rts-media-btn-context span{line-height:1}.rts-media-btn-context:hover{background:#0ea5e9e6;color:#fff;border-color:#38bdf8;transform:translateY(-1px) scale(1.04);box-shadow:0 4px 12px #38bdf873}.rts-media-btn-context:hover i{color:#fff}.rts-media-btn-context:active{transform:translateY(0) scale(.98)}.rts-media-btn-download{position:absolute;left:8px;bottom:8px;z-index:5;width:30px;height:30px;display:inline-flex;align-items:center;justify-content:center;padding:0;background:#12121cd9;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);color:#d1fae5;border:1px solid rgba(52,211,153,.45);border-radius:50%;cursor:pointer;opacity:.85;transition:all .2s cubic-bezier(.34,1.56,.64,1);box-shadow:0 2px 8px #00000080}.rts-media-btn-download i{font-size:12px;color:#34d399}.rts-media-btn-download:hover{opacity:1;background:#10b981e6;border-color:#34d399;transform:translateY(-1px) scale(1.08);box-shadow:0 4px 12px #34d39973}.rts-media-btn-download:hover i{color:#fff}.rts-media-btn-download:active{transform:translateY(0) scale(.96)}.rts-media-btn-download.rts-downloading{cursor:progress;opacity:1}.rts-media-image{width:100%;height:auto;max-height:280px;object-fit:cover;display:block;transition:transform .2s ease;cursor:pointer}.rts-media-image:hover{transform:scale(1.02)}.rts-media-grid-1 .rts-media-image{max-height:400px;object-fit:contain}.rts-media-toggle{display:block;width:100%;padding:6px 0;border:none;background:none;color:var(--rts-agent-accent, #8b5cf6);font-size:12px;font-weight:500;cursor:pointer;text-align:center;transition:opacity .15s ease}.rts-media-toggle:hover{opacity:.8}.rts-media-cost{display:flex;justify-content:flex-end;padding-top:4px}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: CostDisplayComponent, selector: "rtsee-cost-display", inputs: ["cost"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: MediaWidgetComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'rtsee-media-widget', standalone: true, imports: [NgClass, CostDisplayComponent], template: "<div class=\"rts-media-widget\">\n  <!-- Video player -->\n  @if (message.video) {\n    <div class=\"rts-media-video\">\n      <video\n        controls\n        playsinline\n        preload=\"metadata\"\n        [src]=\"message.video.url\"\n        class=\"rts-video-player\"\n      >\n        Your browser does not support video playback.\n      </video>\n    </div>\n  }\n\n  <!-- Image grid -->\n  @if (hasImages) {\n    <div class=\"rts-media-images\" [ngClass]=\"gridClass\">\n      @for (img of visibleImages; track img.url) {\n        <div class=\"rts-media-image-wrapper\">\n          <img [src]=\"img.url\" [alt]=\"img.name\" class=\"rts-media-image\" loading=\"lazy\" />\n          <button\n            type=\"button\"\n            class=\"rts-media-btn-paint\"\n            title=\"Send image to Illustrator\"\n            (click)=\"sendToIllustrator($event, img)\"\n          >\n            <i class=\"pi pi-palette\"></i>\n            <span>+ paint</span>\n          </button>\n        </div>\n      }\n    </div>\n  }\n\n  <!-- Show more / less toggle -->\n  @if (hiddenCount > 0 || showAll) {\n    <button class=\"rts-media-toggle\" (click)=\"toggleShowAll()\">\n      {{ showAll ? 'Show less' : 'Show ' + hiddenCount + ' more' }}\n    </button>\n  }\n\n  <!-- Cost display (optional, disabled when nested inside agentic widget) -->\n  @if (showCost && message.cost) {\n    <div class=\"rts-media-cost\">\n      <rtsee-cost-display [cost]=\"message.cost\"></rtsee-cost-display>\n    </div>\n  }\n</div>\n", styles: [".rts-media-widget{max-width:100%}.rts-media-video{border-radius:8px;overflow:hidden;margin-bottom:6px}.rts-video-player{width:100%;max-height:360px;border-radius:8px;background:#000;display:block}.rts-media-images{display:grid;gap:4px;border-radius:8px;overflow:hidden;margin-bottom:4px}.rts-media-grid-1{grid-template-columns:1fr}.rts-media-grid-2{grid-template-columns:1fr 1fr}.rts-media-grid-4{grid-template-columns:1fr 1fr;grid-template-rows:auto auto}.rts-media-image-wrapper{position:relative;overflow:hidden;border-radius:6px;background:var(--rts-bg-secondary, #1e1e2e)}.rts-media-btn-paint{position:absolute;top:8px;right:8px;z-index:5;display:inline-flex;align-items:center;gap:4px;padding:4px 8px;background:#12121cd9;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);color:#e9d5ff;border:1px solid rgba(168,85,247,.45);border-radius:6px;font-size:11px;font-weight:600;cursor:pointer;transition:all .2s cubic-bezier(.34,1.56,.64,1);box-shadow:0 2px 8px #00000080}.rts-media-btn-paint i{font-size:11px;color:#c084fc}.rts-media-btn-paint span{line-height:1}.rts-media-btn-paint:hover{background:#9333eae6;color:#fff;border-color:#a855f7;transform:translateY(-1px) scale(1.04);box-shadow:0 4px 12px #a855f773}.rts-media-btn-paint:hover i{color:#fff}.rts-media-btn-paint:active{transform:translateY(0) scale(.98)}.rts-media-image{width:100%;height:auto;max-height:280px;object-fit:cover;display:block;transition:transform .2s ease;cursor:pointer}.rts-media-image:hover{transform:scale(1.02)}.rts-media-grid-1 .rts-media-image{max-height:400px;object-fit:contain}.rts-media-toggle{display:block;width:100%;padding:6px 0;border:none;background:none;color:var(--rts-agent-accent, #8b5cf6);font-size:12px;font-weight:500;cursor:pointer;text-align:center;transition:opacity .15s ease}.rts-media-toggle:hover{opacity:.8}.rts-media-cost{display:flex;justify-content:flex-end;padding-top:4px}\n"] }]
+            args: [{ selector: 'rtsee-media-widget', standalone: true, imports: [NgClass, CostDisplayComponent], template: "<div class=\"rts-media-widget\">\n  <!-- Video player -->\n  @if (message.video) {\n    <div class=\"rts-media-video\">\n      <video\n        controls\n        playsinline\n        preload=\"metadata\"\n        [src]=\"message.video.url\"\n        class=\"rts-video-player\"\n      >\n        Your browser does not support video playback.\n      </video>\n    </div>\n  }\n\n  <!-- Image grid -->\n  @if (hasImages) {\n    <div class=\"rts-media-images\" [ngClass]=\"gridClass\">\n      @for (img of visibleImages; track img.id || img.url) {\n        <div class=\"rts-media-image-wrapper\">\n          <img [src]=\"previewUrl(img)\" [alt]=\"img.name\" class=\"rts-media-image\" loading=\"lazy\" />\n          <button\n            type=\"button\"\n            class=\"rts-media-btn-download\"\n            [class.rts-downloading]=\"downloadingUrl === img.url\"\n            title=\"Download original image\"\n            aria-label=\"Download original image\"\n            (click)=\"downloadOriginal($event, img)\"\n          >\n            <i class=\"pi\" [ngClass]=\"downloadingUrl === img.url ? 'pi-spin pi-spinner' : 'pi-download'\"></i>\n          </button>\n          <div class=\"rts-media-image-actions\">\n            <button\n              type=\"button\"\n              class=\"rts-media-btn-paint\"\n              title=\"Send image to Illustrator (Review & Iterate)\"\n              (click)=\"sendToIllustrator($event, img)\"\n            >\n              <i class=\"pi pi-palette\"></i>\n              <span>+ paint</span>\n            </button>\n            <button\n              type=\"button\"\n              class=\"rts-media-btn-context\"\n              title=\"Add image to Illustrator context references\"\n              (click)=\"addToContext($event, img)\"\n            >\n              <i class=\"pi pi-plus\"></i>\n              <span>+ context</span>\n            </button>\n          </div>\n        </div>\n      }\n    </div>\n  }\n\n  <!-- Show more / less toggle -->\n  @if (hiddenCount > 0 || showAll) {\n    <button class=\"rts-media-toggle\" (click)=\"toggleShowAll()\">\n      {{ showAll ? 'Show less' : 'Show ' + hiddenCount + ' more' }}\n    </button>\n  }\n\n  <!-- Cost display (optional, disabled when nested inside agentic widget) -->\n  @if (showCost && message.cost) {\n    <div class=\"rts-media-cost\">\n      <rtsee-cost-display [cost]=\"message.cost\"></rtsee-cost-display>\n    </div>\n  }\n</div>\n", styles: [".rts-media-widget{max-width:100%}.rts-media-video{border-radius:8px;overflow:hidden;margin-bottom:6px}.rts-video-player{width:100%;max-height:360px;border-radius:8px;background:#000;display:block}.rts-media-images{display:grid;gap:4px;border-radius:8px;overflow:hidden;margin-bottom:4px}.rts-media-grid-1{grid-template-columns:1fr}.rts-media-grid-2{grid-template-columns:1fr 1fr}.rts-media-grid-4{grid-template-columns:1fr 1fr;grid-template-rows:auto auto}.rts-media-image-wrapper{position:relative;overflow:hidden;border-radius:6px;background:var(--rts-bg-secondary, #1e1e2e)}.rts-media-image-actions{position:absolute;top:8px;right:8px;z-index:5;display:inline-flex;align-items:center;gap:6px}.rts-media-btn-paint{display:inline-flex;align-items:center;gap:4px;padding:4px 8px;background:#12121cd9;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);color:#e9d5ff;border:1px solid rgba(168,85,247,.45);border-radius:6px;font-size:11px;font-weight:600;cursor:pointer;transition:all .2s cubic-bezier(.34,1.56,.64,1);box-shadow:0 2px 8px #00000080}.rts-media-btn-paint i{font-size:11px;color:#c084fc}.rts-media-btn-paint span{line-height:1}.rts-media-btn-paint:hover{background:#9333eae6;color:#fff;border-color:#a855f7;transform:translateY(-1px) scale(1.04);box-shadow:0 4px 12px #a855f773}.rts-media-btn-paint:hover i{color:#fff}.rts-media-btn-paint:active{transform:translateY(0) scale(.98)}.rts-media-btn-context{display:inline-flex;align-items:center;gap:4px;padding:4px 8px;background:#12121cd9;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);color:#bae6fd;border:1px solid rgba(56,189,248,.45);border-radius:6px;font-size:11px;font-weight:600;cursor:pointer;transition:all .2s cubic-bezier(.34,1.56,.64,1);box-shadow:0 2px 8px #00000080}.rts-media-btn-context i{font-size:11px;color:#38bdf8}.rts-media-btn-context span{line-height:1}.rts-media-btn-context:hover{background:#0ea5e9e6;color:#fff;border-color:#38bdf8;transform:translateY(-1px) scale(1.04);box-shadow:0 4px 12px #38bdf873}.rts-media-btn-context:hover i{color:#fff}.rts-media-btn-context:active{transform:translateY(0) scale(.98)}.rts-media-btn-download{position:absolute;left:8px;bottom:8px;z-index:5;width:30px;height:30px;display:inline-flex;align-items:center;justify-content:center;padding:0;background:#12121cd9;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);color:#d1fae5;border:1px solid rgba(52,211,153,.45);border-radius:50%;cursor:pointer;opacity:.85;transition:all .2s cubic-bezier(.34,1.56,.64,1);box-shadow:0 2px 8px #00000080}.rts-media-btn-download i{font-size:12px;color:#34d399}.rts-media-btn-download:hover{opacity:1;background:#10b981e6;border-color:#34d399;transform:translateY(-1px) scale(1.08);box-shadow:0 4px 12px #34d39973}.rts-media-btn-download:hover i{color:#fff}.rts-media-btn-download:active{transform:translateY(0) scale(.96)}.rts-media-btn-download.rts-downloading{cursor:progress;opacity:1}.rts-media-image{width:100%;height:auto;max-height:280px;object-fit:cover;display:block;transition:transform .2s ease;cursor:pointer}.rts-media-image:hover{transform:scale(1.02)}.rts-media-grid-1 .rts-media-image{max-height:400px;object-fit:contain}.rts-media-toggle{display:block;width:100%;padding:6px 0;border:none;background:none;color:var(--rts-agent-accent, #8b5cf6);font-size:12px;font-weight:500;cursor:pointer;text-align:center;transition:opacity .15s ease}.rts-media-toggle:hover{opacity:.8}.rts-media-cost{display:flex;justify-content:flex-end;padding-top:4px}\n"] }]
         }], propDecorators: { message: [{
                 type: Input
             }], messenger: [{
@@ -2276,12 +2382,16 @@ class StorytellerStoryLinkStepComponent {
     get storyUrl() {
         return this.story.storyId ? `/story/${this.story.storyId}` : '';
     }
+    get kicker() {
+        const language = this.story.language ? getStoryTranslatorLanguage(this.story.language) : undefined;
+        return language ? `Translated to ${language.nativeName}` : 'Your story is ready';
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: StorytellerStoryLinkStepComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: StorytellerStoryLinkStepComponent, isStandalone: true, selector: "rtsee-storyteller-story-link-step", inputs: { step: "step", workflow: "workflow", chat: "chat", messenger: "messenger" }, ngImport: i0, template: "@if (storyUrl) {\n  <a class=\"rts-story-link-card\" [href]=\"storyUrl\" target=\"_blank\" rel=\"noopener\">\n    <div class=\"rts-story-link-icon\">\uD83D\uDCD6</div>\n    <div class=\"rts-story-link-body\">\n      <span class=\"rts-story-link-kicker\">Your story is ready</span>\n      <span class=\"rts-story-link-title\">{{ story.name || 'Open story' }}</span>\n      @if (story.description) {\n        <span class=\"rts-story-link-description\">{{ story.description }}</span>\n      }\n      @if (story.slidesCount) {\n        <span class=\"rts-story-link-meta\">{{ story.slidesCount }} slides</span>\n      }\n    </div>\n    <span class=\"rts-story-link-arrow pi pi-arrow-right\"></span>\n  </a>\n} @else {\n  <div class=\"rts-storyteller-hint\">The story link will appear here once the story is created.</div>\n}\n", styles: [":host{display:block;--rts-st-accent: #8b5cf6;--rts-st-accent-2: #6366f1}.rts-storyteller-form{display:flex;flex-direction:column;gap:12px}.rts-storyteller-field{display:flex;flex-direction:column;gap:5px}.rts-storyteller-label{display:flex;justify-content:space-between;align-items:baseline;font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--rts-text-secondary, #8a8fa3)}.rts-storyteller-counter{font-weight:500;letter-spacing:0;text-transform:none}.rts-storyteller-input{width:100%;box-sizing:border-box;padding:9px 12px;border-radius:9px;border:1px solid var(--rts-border-dim, rgba(120, 120, 160, .25));background:var(--rts-bg-primary, rgba(127, 127, 160, .06));color:var(--rts-text-primary);font:inherit;font-size:13px;outline:none;transition:border-color .15s ease,box-shadow .15s ease,background .15s ease}.rts-storyteller-input:focus{border-color:var(--rts-st-accent);box-shadow:0 0 0 3px #8b5cf62e}.rts-storyteller-input:disabled{opacity:.75;cursor:default}.rts-storyteller-input.rts-storyteller-invalid{border-color:#f43f5e;box-shadow:0 0 0 3px #f43f5e1f}.rts-storyteller-textarea{min-height:80px;resize:vertical;line-height:1.5}.rts-storyteller-textarea-lg{min-height:160px;max-height:480px}.rts-storyteller-select-wrap{position:relative}.rts-storyteller-select{appearance:none;padding-right:32px;cursor:pointer}.rts-storyteller-select-caret{position:absolute;right:12px;top:50%;transform:translateY(-50%);font-size:10px;pointer-events:none;color:var(--rts-text-secondary, #8a8fa3)}.rts-storyteller-hint{font-size:12px;font-style:italic;color:var(--rts-text-secondary, #8a8fa3)}.rts-storyteller-error{padding:6px 10px;border-radius:6px;font-size:12px;color:#f43f5e;background:#f43f5e14;border:1px solid rgba(244,63,94,.25)}.rts-storyteller-actions{display:flex;justify-content:flex-end}.rts-storyteller-submit{display:inline-flex;align-items:center;gap:6px;padding:8px 18px;border:none;border-radius:9px;color:#fff;font-weight:600;font-size:13px;cursor:pointer;background:linear-gradient(135deg,var(--rts-st-accent-2),var(--rts-st-accent) 60%,#a78bfa);background-size:160% 160%;box-shadow:0 4px 14px -4px #6366f199;transition:transform .15s ease,box-shadow .15s ease,background-position .4s ease}.rts-storyteller-submit:hover:not(:disabled){transform:translateY(-1px);background-position:100% 0;box-shadow:0 6px 18px -4px #6366f1bf}.rts-storyteller-submit:disabled{opacity:.6;cursor:default;box-shadow:none}.rts-storyteller-spinner{width:11px;height:11px;border-radius:50%;border:2px solid rgba(255,255,255,.35);border-top-color:#fff;animation:rts-st-spin .8s linear infinite}.rts-story-link-card{display:flex;align-items:center;gap:12px;padding:14px;border-radius:12px;text-decoration:none;color:inherit;background:linear-gradient(135deg,#6366f11a,#8b5cf60f);border:1px solid rgba(139,92,246,.3);transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease;animation:rts-st-pop .4s cubic-bezier(.2,.9,.3,1.3)}.rts-story-link-card:hover{transform:translateY(-2px);border-color:var(--rts-st-accent);box-shadow:0 10px 28px -12px #8b5cf699}.rts-story-link-card:hover .rts-story-link-arrow{transform:translate(3px)}.rts-story-link-icon{display:flex;align-items:center;justify-content:center;flex-shrink:0;width:42px;height:42px;border-radius:12px;font-size:20px;background:linear-gradient(135deg,var(--rts-st-accent-2),var(--rts-st-accent))}.rts-story-link-body{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1}.rts-story-link-kicker{font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--rts-st-accent)}.rts-story-link-title{font-size:15px;font-weight:600;color:var(--rts-text-primary)}.rts-story-link-description{font-size:12px;color:var(--rts-text-secondary, #8a8fa3);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.rts-story-link-meta{font-size:11px;color:var(--rts-text-secondary, #8a8fa3)}.rts-story-link-arrow{color:var(--rts-st-accent);transition:transform .2s ease}@keyframes rts-st-spin{to{transform:rotate(360deg)}}@keyframes rts-st-pop{0%{opacity:0;transform:scale(.96)}to{opacity:1;transform:none}}\n"] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: StorytellerStoryLinkStepComponent, isStandalone: true, selector: "rtsee-storyteller-story-link-step", inputs: { step: "step", workflow: "workflow", chat: "chat", messenger: "messenger" }, ngImport: i0, template: "@if (storyUrl) {\n  <a class=\"rts-story-link-card\" [href]=\"storyUrl\" target=\"_blank\" rel=\"noopener\">\n    <div class=\"rts-story-link-icon\">\uD83D\uDCD6</div>\n    <div class=\"rts-story-link-body\">\n      <span class=\"rts-story-link-kicker\">{{ kicker }}</span>\n      <span class=\"rts-story-link-title\">{{ story.name || 'Open story' }}</span>\n      @if (story.description) {\n        <span class=\"rts-story-link-description\">{{ story.description }}</span>\n      }\n      @if (story.slidesCount) {\n        <span class=\"rts-story-link-meta\">{{ story.slidesCount }} slides</span>\n      }\n    </div>\n    <span class=\"rts-story-link-arrow pi pi-arrow-right\"></span>\n  </a>\n} @else {\n  <div class=\"rts-storyteller-hint\">The story link will appear here once the story is created.</div>\n}\n", styles: [":host{display:block;--rts-st-accent: #8b5cf6;--rts-st-accent-2: #6366f1}.rts-storyteller-form{display:flex;flex-direction:column;gap:12px}.rts-storyteller-field{display:flex;flex-direction:column;gap:5px}.rts-storyteller-label{display:flex;justify-content:space-between;align-items:baseline;font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--rts-text-secondary, #8a8fa3)}.rts-storyteller-counter{font-weight:500;letter-spacing:0;text-transform:none}.rts-storyteller-input{width:100%;box-sizing:border-box;padding:9px 12px;border-radius:9px;border:1px solid var(--rts-border-dim, rgba(120, 120, 160, .25));background:var(--rts-bg-primary, rgba(127, 127, 160, .06));color:var(--rts-text-primary);font:inherit;font-size:13px;outline:none;transition:border-color .15s ease,box-shadow .15s ease,background .15s ease}.rts-storyteller-input:focus{border-color:var(--rts-st-accent);box-shadow:0 0 0 3px #8b5cf62e}.rts-storyteller-input:disabled{opacity:.75;cursor:default}.rts-storyteller-input.rts-storyteller-invalid{border-color:#f43f5e;box-shadow:0 0 0 3px #f43f5e1f}.rts-storyteller-textarea{min-height:80px;resize:vertical;line-height:1.5}.rts-storyteller-textarea-lg{min-height:160px;max-height:480px}.rts-storyteller-select-wrap{position:relative}.rts-storyteller-select{appearance:none;padding-right:32px;cursor:pointer}.rts-storyteller-select-caret{position:absolute;right:12px;top:50%;transform:translateY(-50%);font-size:10px;pointer-events:none;color:var(--rts-text-secondary, #8a8fa3)}.rts-storyteller-hint{font-size:12px;font-style:italic;color:var(--rts-text-secondary, #8a8fa3)}.rts-storyteller-error{padding:6px 10px;border-radius:6px;font-size:12px;color:#f43f5e;background:#f43f5e14;border:1px solid rgba(244,63,94,.25)}.rts-storyteller-actions{display:flex;justify-content:flex-end}.rts-storyteller-submit{display:inline-flex;align-items:center;gap:6px;padding:8px 18px;border:none;border-radius:9px;color:#fff;font-weight:600;font-size:13px;cursor:pointer;background:linear-gradient(135deg,var(--rts-st-accent-2),var(--rts-st-accent) 60%,#a78bfa);background-size:160% 160%;box-shadow:0 4px 14px -4px #6366f199;transition:transform .15s ease,box-shadow .15s ease,background-position .4s ease}.rts-storyteller-submit:hover:not(:disabled){transform:translateY(-1px);background-position:100% 0;box-shadow:0 6px 18px -4px #6366f1bf}.rts-storyteller-submit:disabled{opacity:.6;cursor:default;box-shadow:none}.rts-storyteller-spinner{width:11px;height:11px;border-radius:50%;border:2px solid rgba(255,255,255,.35);border-top-color:#fff;animation:rts-st-spin .8s linear infinite}.rts-story-link-card{display:flex;align-items:center;gap:12px;padding:14px;border-radius:12px;text-decoration:none;color:inherit;background:linear-gradient(135deg,#6366f11a,#8b5cf60f);border:1px solid rgba(139,92,246,.3);transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease;animation:rts-st-pop .4s cubic-bezier(.2,.9,.3,1.3)}.rts-story-link-card:hover{transform:translateY(-2px);border-color:var(--rts-st-accent);box-shadow:0 10px 28px -12px #8b5cf699}.rts-story-link-card:hover .rts-story-link-arrow{transform:translate(3px)}.rts-story-link-icon{display:flex;align-items:center;justify-content:center;flex-shrink:0;width:42px;height:42px;border-radius:12px;font-size:20px;background:linear-gradient(135deg,var(--rts-st-accent-2),var(--rts-st-accent))}.rts-story-link-body{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1}.rts-story-link-kicker{font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--rts-st-accent)}.rts-story-link-title{font-size:15px;font-weight:600;color:var(--rts-text-primary)}.rts-story-link-description{font-size:12px;color:var(--rts-text-secondary, #8a8fa3);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.rts-story-link-meta{font-size:11px;color:var(--rts-text-secondary, #8a8fa3)}.rts-story-link-arrow{color:var(--rts-st-accent);transition:transform .2s ease}@keyframes rts-st-spin{to{transform:rotate(360deg)}}@keyframes rts-st-pop{0%{opacity:0;transform:scale(.96)}to{opacity:1;transform:none}}\n"] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: StorytellerStoryLinkStepComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'rtsee-storyteller-story-link-step', standalone: true, template: "@if (storyUrl) {\n  <a class=\"rts-story-link-card\" [href]=\"storyUrl\" target=\"_blank\" rel=\"noopener\">\n    <div class=\"rts-story-link-icon\">\uD83D\uDCD6</div>\n    <div class=\"rts-story-link-body\">\n      <span class=\"rts-story-link-kicker\">Your story is ready</span>\n      <span class=\"rts-story-link-title\">{{ story.name || 'Open story' }}</span>\n      @if (story.description) {\n        <span class=\"rts-story-link-description\">{{ story.description }}</span>\n      }\n      @if (story.slidesCount) {\n        <span class=\"rts-story-link-meta\">{{ story.slidesCount }} slides</span>\n      }\n    </div>\n    <span class=\"rts-story-link-arrow pi pi-arrow-right\"></span>\n  </a>\n} @else {\n  <div class=\"rts-storyteller-hint\">The story link will appear here once the story is created.</div>\n}\n", styles: [":host{display:block;--rts-st-accent: #8b5cf6;--rts-st-accent-2: #6366f1}.rts-storyteller-form{display:flex;flex-direction:column;gap:12px}.rts-storyteller-field{display:flex;flex-direction:column;gap:5px}.rts-storyteller-label{display:flex;justify-content:space-between;align-items:baseline;font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--rts-text-secondary, #8a8fa3)}.rts-storyteller-counter{font-weight:500;letter-spacing:0;text-transform:none}.rts-storyteller-input{width:100%;box-sizing:border-box;padding:9px 12px;border-radius:9px;border:1px solid var(--rts-border-dim, rgba(120, 120, 160, .25));background:var(--rts-bg-primary, rgba(127, 127, 160, .06));color:var(--rts-text-primary);font:inherit;font-size:13px;outline:none;transition:border-color .15s ease,box-shadow .15s ease,background .15s ease}.rts-storyteller-input:focus{border-color:var(--rts-st-accent);box-shadow:0 0 0 3px #8b5cf62e}.rts-storyteller-input:disabled{opacity:.75;cursor:default}.rts-storyteller-input.rts-storyteller-invalid{border-color:#f43f5e;box-shadow:0 0 0 3px #f43f5e1f}.rts-storyteller-textarea{min-height:80px;resize:vertical;line-height:1.5}.rts-storyteller-textarea-lg{min-height:160px;max-height:480px}.rts-storyteller-select-wrap{position:relative}.rts-storyteller-select{appearance:none;padding-right:32px;cursor:pointer}.rts-storyteller-select-caret{position:absolute;right:12px;top:50%;transform:translateY(-50%);font-size:10px;pointer-events:none;color:var(--rts-text-secondary, #8a8fa3)}.rts-storyteller-hint{font-size:12px;font-style:italic;color:var(--rts-text-secondary, #8a8fa3)}.rts-storyteller-error{padding:6px 10px;border-radius:6px;font-size:12px;color:#f43f5e;background:#f43f5e14;border:1px solid rgba(244,63,94,.25)}.rts-storyteller-actions{display:flex;justify-content:flex-end}.rts-storyteller-submit{display:inline-flex;align-items:center;gap:6px;padding:8px 18px;border:none;border-radius:9px;color:#fff;font-weight:600;font-size:13px;cursor:pointer;background:linear-gradient(135deg,var(--rts-st-accent-2),var(--rts-st-accent) 60%,#a78bfa);background-size:160% 160%;box-shadow:0 4px 14px -4px #6366f199;transition:transform .15s ease,box-shadow .15s ease,background-position .4s ease}.rts-storyteller-submit:hover:not(:disabled){transform:translateY(-1px);background-position:100% 0;box-shadow:0 6px 18px -4px #6366f1bf}.rts-storyteller-submit:disabled{opacity:.6;cursor:default;box-shadow:none}.rts-storyteller-spinner{width:11px;height:11px;border-radius:50%;border:2px solid rgba(255,255,255,.35);border-top-color:#fff;animation:rts-st-spin .8s linear infinite}.rts-story-link-card{display:flex;align-items:center;gap:12px;padding:14px;border-radius:12px;text-decoration:none;color:inherit;background:linear-gradient(135deg,#6366f11a,#8b5cf60f);border:1px solid rgba(139,92,246,.3);transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease;animation:rts-st-pop .4s cubic-bezier(.2,.9,.3,1.3)}.rts-story-link-card:hover{transform:translateY(-2px);border-color:var(--rts-st-accent);box-shadow:0 10px 28px -12px #8b5cf699}.rts-story-link-card:hover .rts-story-link-arrow{transform:translate(3px)}.rts-story-link-icon{display:flex;align-items:center;justify-content:center;flex-shrink:0;width:42px;height:42px;border-radius:12px;font-size:20px;background:linear-gradient(135deg,var(--rts-st-accent-2),var(--rts-st-accent))}.rts-story-link-body{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1}.rts-story-link-kicker{font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--rts-st-accent)}.rts-story-link-title{font-size:15px;font-weight:600;color:var(--rts-text-primary)}.rts-story-link-description{font-size:12px;color:var(--rts-text-secondary, #8a8fa3);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.rts-story-link-meta{font-size:11px;color:var(--rts-text-secondary, #8a8fa3)}.rts-story-link-arrow{color:var(--rts-st-accent);transition:transform .2s ease}@keyframes rts-st-spin{to{transform:rotate(360deg)}}@keyframes rts-st-pop{0%{opacity:0;transform:scale(.96)}to{opacity:1;transform:none}}\n"] }]
+            args: [{ selector: 'rtsee-storyteller-story-link-step', standalone: true, template: "@if (storyUrl) {\n  <a class=\"rts-story-link-card\" [href]=\"storyUrl\" target=\"_blank\" rel=\"noopener\">\n    <div class=\"rts-story-link-icon\">\uD83D\uDCD6</div>\n    <div class=\"rts-story-link-body\">\n      <span class=\"rts-story-link-kicker\">{{ kicker }}</span>\n      <span class=\"rts-story-link-title\">{{ story.name || 'Open story' }}</span>\n      @if (story.description) {\n        <span class=\"rts-story-link-description\">{{ story.description }}</span>\n      }\n      @if (story.slidesCount) {\n        <span class=\"rts-story-link-meta\">{{ story.slidesCount }} slides</span>\n      }\n    </div>\n    <span class=\"rts-story-link-arrow pi pi-arrow-right\"></span>\n  </a>\n} @else {\n  <div class=\"rts-storyteller-hint\">The story link will appear here once the story is created.</div>\n}\n", styles: [":host{display:block;--rts-st-accent: #8b5cf6;--rts-st-accent-2: #6366f1}.rts-storyteller-form{display:flex;flex-direction:column;gap:12px}.rts-storyteller-field{display:flex;flex-direction:column;gap:5px}.rts-storyteller-label{display:flex;justify-content:space-between;align-items:baseline;font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--rts-text-secondary, #8a8fa3)}.rts-storyteller-counter{font-weight:500;letter-spacing:0;text-transform:none}.rts-storyteller-input{width:100%;box-sizing:border-box;padding:9px 12px;border-radius:9px;border:1px solid var(--rts-border-dim, rgba(120, 120, 160, .25));background:var(--rts-bg-primary, rgba(127, 127, 160, .06));color:var(--rts-text-primary);font:inherit;font-size:13px;outline:none;transition:border-color .15s ease,box-shadow .15s ease,background .15s ease}.rts-storyteller-input:focus{border-color:var(--rts-st-accent);box-shadow:0 0 0 3px #8b5cf62e}.rts-storyteller-input:disabled{opacity:.75;cursor:default}.rts-storyteller-input.rts-storyteller-invalid{border-color:#f43f5e;box-shadow:0 0 0 3px #f43f5e1f}.rts-storyteller-textarea{min-height:80px;resize:vertical;line-height:1.5}.rts-storyteller-textarea-lg{min-height:160px;max-height:480px}.rts-storyteller-select-wrap{position:relative}.rts-storyteller-select{appearance:none;padding-right:32px;cursor:pointer}.rts-storyteller-select-caret{position:absolute;right:12px;top:50%;transform:translateY(-50%);font-size:10px;pointer-events:none;color:var(--rts-text-secondary, #8a8fa3)}.rts-storyteller-hint{font-size:12px;font-style:italic;color:var(--rts-text-secondary, #8a8fa3)}.rts-storyteller-error{padding:6px 10px;border-radius:6px;font-size:12px;color:#f43f5e;background:#f43f5e14;border:1px solid rgba(244,63,94,.25)}.rts-storyteller-actions{display:flex;justify-content:flex-end}.rts-storyteller-submit{display:inline-flex;align-items:center;gap:6px;padding:8px 18px;border:none;border-radius:9px;color:#fff;font-weight:600;font-size:13px;cursor:pointer;background:linear-gradient(135deg,var(--rts-st-accent-2),var(--rts-st-accent) 60%,#a78bfa);background-size:160% 160%;box-shadow:0 4px 14px -4px #6366f199;transition:transform .15s ease,box-shadow .15s ease,background-position .4s ease}.rts-storyteller-submit:hover:not(:disabled){transform:translateY(-1px);background-position:100% 0;box-shadow:0 6px 18px -4px #6366f1bf}.rts-storyteller-submit:disabled{opacity:.6;cursor:default;box-shadow:none}.rts-storyteller-spinner{width:11px;height:11px;border-radius:50%;border:2px solid rgba(255,255,255,.35);border-top-color:#fff;animation:rts-st-spin .8s linear infinite}.rts-story-link-card{display:flex;align-items:center;gap:12px;padding:14px;border-radius:12px;text-decoration:none;color:inherit;background:linear-gradient(135deg,#6366f11a,#8b5cf60f);border:1px solid rgba(139,92,246,.3);transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease;animation:rts-st-pop .4s cubic-bezier(.2,.9,.3,1.3)}.rts-story-link-card:hover{transform:translateY(-2px);border-color:var(--rts-st-accent);box-shadow:0 10px 28px -12px #8b5cf699}.rts-story-link-card:hover .rts-story-link-arrow{transform:translate(3px)}.rts-story-link-icon{display:flex;align-items:center;justify-content:center;flex-shrink:0;width:42px;height:42px;border-radius:12px;font-size:20px;background:linear-gradient(135deg,var(--rts-st-accent-2),var(--rts-st-accent))}.rts-story-link-body{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1}.rts-story-link-kicker{font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--rts-st-accent)}.rts-story-link-title{font-size:15px;font-weight:600;color:var(--rts-text-primary)}.rts-story-link-description{font-size:12px;color:var(--rts-text-secondary, #8a8fa3);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.rts-story-link-meta{font-size:11px;color:var(--rts-text-secondary, #8a8fa3)}.rts-story-link-arrow{color:var(--rts-st-accent);transition:transform .2s ease}@keyframes rts-st-spin{to{transform:rotate(360deg)}}@keyframes rts-st-pop{0%{opacity:0;transform:scale(.96)}to{opacity:1;transform:none}}\n"] }]
         }], propDecorators: { step: [{
                 type: Input
             }], workflow: [{
@@ -2292,6 +2402,232 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImpor
                 type: Input
             }] } });
 
+const SEARCH_DEBOUNCE_MS = 250;
+/**
+ * Story Translator step 1: pick a story (autocomplete by name) and the target language.
+ */
+class StoryTranslatorFormStepComponent {
+    constructor(cdr, host) {
+        this.cdr = cdr;
+        this.host = host;
+        this.languages = STORY_TRANSLATOR_LANGUAGES;
+        this.form = new FormGroup({
+            /* eslint-disable */
+            storyQuery: new FormControl(''),
+            storyId: new FormControl('', Validators.required),
+            language: new FormControl('', Validators.required),
+            agentId: new FormControl('', Validators.required),
+            /* eslint-enable */
+        });
+        this.selectedStory = null;
+        this.suggestions = [];
+        this.suggestionsOpened = false;
+        this.highlightedIndex = 0;
+        this.searchInProgress = false;
+        this.searchError = null;
+        this.searchTimer = null;
+        this.searchRequestId = 0;
+        this.onChangedBound = () => this.onWorkflowChanged();
+    }
+    get agents() {
+        return (this.chat?.members || []).filter((m) => m.isAgent);
+    }
+    get readonly() {
+        return !this.step?.isActive || !!this.workflow?.submitInProgress;
+    }
+    get canCancel() {
+        return !!this.workflow?.isDraft && !this.workflow?.submitInProgress && !!this.messenger;
+    }
+    get selectedLanguage() {
+        return this.languages.find((l) => l.code === this.form.get('language')?.value);
+    }
+    ngOnInit() {
+        this.workflow?.on(OzzyWorkflowClientEvents.CHANGED, this.onChangedBound);
+        const agents = this.agents;
+        if (agents.length === 1) {
+            this.form.get('agentId')?.setValue(agents[0].id);
+        }
+        this.syncWithStep();
+    }
+    ngOnDestroy() {
+        this.workflow?.off(OzzyWorkflowClientEvents.CHANGED, this.onChangedBound);
+        this.clearSearchTimer();
+    }
+    onStoryFocus() {
+        if (this.readonly) {
+            return;
+        }
+        this.suggestionsOpened = true;
+        if (!this.suggestions.length) {
+            this.scheduleSearch(0);
+        }
+    }
+    onStoryInput() {
+        // typing invalidates the previous selection
+        if (this.selectedStory) {
+            this.selectedStory = null;
+            this.form.get('storyId')?.setValue('');
+        }
+        this.suggestionsOpened = true;
+        this.scheduleSearch(SEARCH_DEBOUNCE_MS);
+    }
+    onStoryKeydown(event) {
+        if (!this.suggestionsOpened || !this.suggestions.length) {
+            if (event.key === 'ArrowDown') {
+                this.suggestionsOpened = true;
+                this.scheduleSearch(0);
+            }
+            return;
+        }
+        switch (event.key) {
+            case 'ArrowDown':
+                event.preventDefault();
+                this.highlightedIndex = (this.highlightedIndex + 1) % this.suggestions.length;
+                break;
+            case 'ArrowUp':
+                event.preventDefault();
+                this.highlightedIndex = (this.highlightedIndex - 1 + this.suggestions.length) % this.suggestions.length;
+                break;
+            case 'Enter':
+                event.preventDefault();
+                this.selectStory(this.suggestions[this.highlightedIndex]);
+                break;
+            case 'Escape':
+                event.preventDefault();
+                this.suggestionsOpened = false;
+                break;
+        }
+    }
+    selectStory(story) {
+        if (!story || this.readonly) {
+            return;
+        }
+        this.selectedStory = story;
+        this.form.patchValue({ storyId: story.id, storyQuery: story.name }, { emitEvent: false });
+        this.form.get('storyId')?.markAsTouched();
+        this.suggestionsOpened = false;
+    }
+    clearStory() {
+        if (this.readonly) {
+            return;
+        }
+        this.selectedStory = null;
+        this.form.patchValue({ storyId: '', storyQuery: '' }, { emitEvent: false });
+        this.suggestionsOpened = true;
+        this.scheduleSearch(0);
+        setTimeout(() => this.storyInput?.nativeElement.focus());
+    }
+    onDocumentMouseDown(event) {
+        if (this.suggestionsOpened && !this.host.nativeElement.contains(event.target)) {
+            this.suggestionsOpened = false;
+        }
+    }
+    submit() {
+        if (this.readonly) {
+            return;
+        }
+        if (this.form.invalid || !this.selectedStory) {
+            this.form.markAllAsTouched();
+            return;
+        }
+        void this.workflow.submitStep({
+            storyId: this.selectedStory.id,
+            storyName: this.selectedStory.name,
+            language: this.form.get('language')?.value,
+            agentId: this.form.get('agentId')?.value,
+        });
+    }
+    cancel() {
+        if (!this.canCancel) {
+            return;
+        }
+        this.messenger?.discardDraftWorkflow(this.workflow);
+    }
+    isInvalid(name) {
+        const control = this.form.get(name);
+        return !!control && control.invalid && control.touched;
+    }
+    scheduleSearch(delay) {
+        this.clearSearchTimer();
+        this.searchTimer = setTimeout(() => void this.search(), delay);
+    }
+    clearSearchTimer() {
+        if (this.searchTimer) {
+            clearTimeout(this.searchTimer);
+            this.searchTimer = null;
+        }
+    }
+    async search() {
+        if (!this.messenger) {
+            return;
+        }
+        const requestId = ++this.searchRequestId;
+        const query = this.form.get('storyQuery')?.value || '';
+        this.searchInProgress = true;
+        this.searchError = null;
+        this.cdr.markForCheck();
+        try {
+            const stories = await this.messenger.ozzy.searchStories(query);
+            if (requestId !== this.searchRequestId) {
+                return;
+            }
+            this.suggestions = stories;
+            this.highlightedIndex = 0;
+        }
+        catch (e) {
+            if (requestId !== this.searchRequestId) {
+                return;
+            }
+            this.suggestions = [];
+            this.searchError = e?.friendlyMessage || e?.message || 'Failed to load stories.';
+        }
+        finally {
+            if (requestId === this.searchRequestId) {
+                this.searchInProgress = false;
+                this.cdr.detectChanges();
+            }
+        }
+    }
+    onWorkflowChanged() {
+        this.syncWithStep();
+        this.cdr.detectChanges();
+    }
+    syncWithStep() {
+        const output = this.step?.output;
+        if (output?.storyId) {
+            this.selectedStory = { id: output.storyId, name: output.storyName || output.storyId };
+            this.form.patchValue({ storyId: output.storyId, storyQuery: output.storyName || '', language: output.language, agentId: output.agentId }, { emitEvent: false });
+        }
+        if (this.readonly) {
+            this.suggestionsOpened = false;
+            this.form.disable({ emitEvent: false });
+        }
+        else {
+            this.form.enable({ emitEvent: false });
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: StoryTranslatorFormStepComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: StoryTranslatorFormStepComponent, isStandalone: true, selector: "rtsee-story-translator-form-step", inputs: { step: "step", workflow: "workflow", chat: "chat", messenger: "messenger" }, host: { listeners: { "document:mousedown": "onDocumentMouseDown($event)" } }, viewQueries: [{ propertyName: "storyInput", first: true, predicate: ["storyInput"], descendants: true }], ngImport: i0, template: "<form class=\"rts-storyteller-form\" [formGroup]=\"form\" (ngSubmit)=\"submit()\" autocomplete=\"off\">\n  <div class=\"rts-storyteller-field\">\n    <label class=\"rts-storyteller-label\" for=\"story-translator-story-{{ step.id }}\">Story</label>\n    <div class=\"rts-st-autocomplete\">\n      <span class=\"rts-st-autocomplete-icon pi\" [class.pi-search]=\"!searchInProgress\" [class.pi-spin]=\"searchInProgress\" [class.pi-spinner]=\"searchInProgress\"></span>\n      <input #storyInput\n             class=\"rts-storyteller-input rts-st-autocomplete-input\"\n             [class.rts-storyteller-invalid]=\"isInvalid('storyId')\"\n             [class.rts-st-autocomplete-selected]=\"!!selectedStory\"\n             formControlName=\"storyQuery\"\n             type=\"text\"\n             role=\"combobox\"\n             aria-autocomplete=\"list\"\n             [attr.aria-expanded]=\"suggestionsOpened\"\n             placeholder=\"Search stories by name\u2026\"\n             id=\"story-translator-story-{{ step.id }}\"\n             (focus)=\"onStoryFocus()\"\n             (input)=\"onStoryInput()\"\n             (keydown)=\"onStoryKeydown($event)\"\n      />\n      @if (selectedStory && !readonly) {\n        <button type=\"button\"\n                class=\"rts-st-autocomplete-clear pi pi-times\"\n                aria-label=\"Clear story\"\n                id=\"story-translator-clear-{{ step.id }}\"\n                (click)=\"clearStory()\"\n        ></button>\n      }\n\n      @if (suggestionsOpened && !readonly) {\n        <ul class=\"rts-st-autocomplete-panel\" role=\"listbox\">\n          @if (searchError) {\n            <li class=\"rts-st-autocomplete-empty rts-st-autocomplete-error\">{{ searchError }}</li>\n          } @else if (!suggestions.length && !searchInProgress) {\n            <li class=\"rts-st-autocomplete-empty\">No stories found</li>\n          }\n          @for (story of suggestions; track story.id; let i = $index) {\n            <li class=\"rts-st-autocomplete-option\"\n                role=\"option\"\n                [class.rts-st-autocomplete-option-active]=\"i === highlightedIndex\"\n                [attr.aria-selected]=\"story.id === selectedStory?.id\"\n                (mouseenter)=\"highlightedIndex = i\"\n                (mousedown)=\"$event.preventDefault(); selectStory(story)\"\n            >\n              @if (story.imageUrl) {\n                <img class=\"rts-st-autocomplete-thumb\" [src]=\"story.imageUrl\" [alt]=\"story.name\" loading=\"lazy\" />\n              } @else {\n                <span class=\"rts-st-autocomplete-thumb rts-st-autocomplete-thumb-empty\">\uD83D\uDCD6</span>\n              }\n              <span class=\"rts-st-autocomplete-option-body\">\n                <span class=\"rts-st-autocomplete-option-name\">{{ story.name }}</span>\n                @if (story.totalSlides) {\n                  <span class=\"rts-st-autocomplete-option-meta\">{{ story.totalSlides }} slides</span>\n                }\n              </span>\n            </li>\n          }\n        </ul>\n      }\n    </div>\n  </div>\n\n  <label class=\"rts-storyteller-field\">\n    <span class=\"rts-storyteller-label\">Translate to</span>\n    <div class=\"rts-storyteller-select-wrap\">\n      <select class=\"rts-storyteller-input rts-storyteller-select\"\n              [class.rts-storyteller-invalid]=\"isInvalid('language')\"\n              formControlName=\"language\"\n              id=\"story-translator-language-{{ step.id }}\"\n      >\n        <option value=\"\" disabled>Select a language</option>\n        @for (language of languages; track language.code) {\n          <option [value]=\"language.code\">{{ language.nativeName }}</option>\n        }\n      </select>\n      <span class=\"rts-storyteller-select-caret pi pi-chevron-down\"></span>\n    </div>\n  </label>\n\n  <label class=\"rts-storyteller-field\">\n    <span class=\"rts-storyteller-label\">Agent</span>\n    @if (agents.length) {\n      <div class=\"rts-storyteller-select-wrap\">\n        <select class=\"rts-storyteller-input rts-storyteller-select\"\n                [class.rts-storyteller-invalid]=\"isInvalid('agentId')\"\n                formControlName=\"agentId\"\n                id=\"story-translator-agent-{{ step.id }}\"\n        >\n          <option value=\"\" disabled>Select an agent</option>\n          @for (agent of agents; track agent.id) {\n            <option [value]=\"agent.id\">\n              {{ agent.name }}{{ agent.agentConfiguration?.model?.model ? ' \u00B7 ' + agent.agentConfiguration?.model?.model : '' }}\n            </option>\n          }\n        </select>\n        <span class=\"rts-storyteller-select-caret pi pi-chevron-down\"></span>\n      </div>\n    } @else {\n      <div class=\"rts-storyteller-hint\">There are no agentic members in this chat. Add an agent to continue.</div>\n    }\n  </label>\n\n  @if (workflow.submitError) {\n    <div class=\"rts-storyteller-error\">{{ workflow.submitError }}</div>\n  }\n\n  @if (step.isActive) {\n    <div class=\"rts-storyteller-actions rts-st-translator-actions\">\n      @if (canCancel) {\n        <button class=\"rts-st-cancel\"\n                type=\"button\"\n                id=\"story-translator-cancel-{{ step.id }}\"\n                (click)=\"cancel()\"\n        >Cancel</button>\n      }\n      <button class=\"rts-storyteller-submit\"\n              type=\"submit\"\n              [disabled]=\"workflow.submitInProgress || !agents.length\"\n              id=\"story-translator-submit-{{ step.id }}\"\n      >\n        @if (workflow.submitInProgress) {\n          <span class=\"rts-storyteller-spinner\"></span> Translating\u2026\n        } @else {\n          \uD83C\uDF10 Translate{{ selectedLanguage ? ' to ' + selectedLanguage.nativeName : '' }}\n        }\n      </button>\n    </div>\n  }\n</form>\n", styles: [":host{display:block;--rts-st-accent: #8b5cf6;--rts-st-accent-2: #6366f1}.rts-storyteller-form{display:flex;flex-direction:column;gap:12px}.rts-storyteller-field{display:flex;flex-direction:column;gap:5px}.rts-storyteller-label{display:flex;justify-content:space-between;align-items:baseline;font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--rts-text-secondary, #8a8fa3)}.rts-storyteller-counter{font-weight:500;letter-spacing:0;text-transform:none}.rts-storyteller-input{width:100%;box-sizing:border-box;padding:9px 12px;border-radius:9px;border:1px solid var(--rts-border-dim, rgba(120, 120, 160, .25));background:var(--rts-bg-primary, rgba(127, 127, 160, .06));color:var(--rts-text-primary);font:inherit;font-size:13px;outline:none;transition:border-color .15s ease,box-shadow .15s ease,background .15s ease}.rts-storyteller-input:focus{border-color:var(--rts-st-accent);box-shadow:0 0 0 3px #8b5cf62e}.rts-storyteller-input:disabled{opacity:.75;cursor:default}.rts-storyteller-input.rts-storyteller-invalid{border-color:#f43f5e;box-shadow:0 0 0 3px #f43f5e1f}.rts-storyteller-textarea{min-height:80px;resize:vertical;line-height:1.5}.rts-storyteller-textarea-lg{min-height:160px;max-height:480px}.rts-storyteller-select-wrap{position:relative}.rts-storyteller-select{appearance:none;padding-right:32px;cursor:pointer}.rts-storyteller-select-caret{position:absolute;right:12px;top:50%;transform:translateY(-50%);font-size:10px;pointer-events:none;color:var(--rts-text-secondary, #8a8fa3)}.rts-storyteller-hint{font-size:12px;font-style:italic;color:var(--rts-text-secondary, #8a8fa3)}.rts-storyteller-error{padding:6px 10px;border-radius:6px;font-size:12px;color:#f43f5e;background:#f43f5e14;border:1px solid rgba(244,63,94,.25)}.rts-storyteller-actions{display:flex;justify-content:flex-end}.rts-storyteller-submit{display:inline-flex;align-items:center;gap:6px;padding:8px 18px;border:none;border-radius:9px;color:#fff;font-weight:600;font-size:13px;cursor:pointer;background:linear-gradient(135deg,var(--rts-st-accent-2),var(--rts-st-accent) 60%,#a78bfa);background-size:160% 160%;box-shadow:0 4px 14px -4px #6366f199;transition:transform .15s ease,box-shadow .15s ease,background-position .4s ease}.rts-storyteller-submit:hover:not(:disabled){transform:translateY(-1px);background-position:100% 0;box-shadow:0 6px 18px -4px #6366f1bf}.rts-storyteller-submit:disabled{opacity:.6;cursor:default;box-shadow:none}.rts-storyteller-spinner{width:11px;height:11px;border-radius:50%;border:2px solid rgba(255,255,255,.35);border-top-color:#fff;animation:rts-st-spin .8s linear infinite}.rts-story-link-card{display:flex;align-items:center;gap:12px;padding:14px;border-radius:12px;text-decoration:none;color:inherit;background:linear-gradient(135deg,#6366f11a,#8b5cf60f);border:1px solid rgba(139,92,246,.3);transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease;animation:rts-st-pop .4s cubic-bezier(.2,.9,.3,1.3)}.rts-story-link-card:hover{transform:translateY(-2px);border-color:var(--rts-st-accent);box-shadow:0 10px 28px -12px #8b5cf699}.rts-story-link-card:hover .rts-story-link-arrow{transform:translate(3px)}.rts-story-link-icon{display:flex;align-items:center;justify-content:center;flex-shrink:0;width:42px;height:42px;border-radius:12px;font-size:20px;background:linear-gradient(135deg,var(--rts-st-accent-2),var(--rts-st-accent))}.rts-story-link-body{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1}.rts-story-link-kicker{font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--rts-st-accent)}.rts-story-link-title{font-size:15px;font-weight:600;color:var(--rts-text-primary)}.rts-story-link-description{font-size:12px;color:var(--rts-text-secondary, #8a8fa3);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.rts-story-link-meta{font-size:11px;color:var(--rts-text-secondary, #8a8fa3)}.rts-story-link-arrow{color:var(--rts-st-accent);transition:transform .2s ease}@keyframes rts-st-spin{to{transform:rotate(360deg)}}@keyframes rts-st-pop{0%{opacity:0;transform:scale(.96)}to{opacity:1;transform:none}}\n", ".rts-st-autocomplete{position:relative}.rts-st-autocomplete-icon{position:absolute;left:12px;top:50%;transform:translateY(-50%);font-size:12px;pointer-events:none;color:var(--rts-text-secondary, #8a8fa3)}.rts-st-autocomplete-input{padding-left:32px;padding-right:32px}.rts-st-autocomplete-input.rts-st-autocomplete-selected{font-weight:600}.rts-st-autocomplete-clear{position:absolute;right:8px;top:50%;transform:translateY(-50%);width:22px;height:22px;padding:0;border:none;border-radius:50%;font-size:10px;cursor:pointer;color:var(--rts-text-secondary, #8a8fa3);background:transparent;transition:background .15s ease,color .15s ease}.rts-st-autocomplete-clear:hover{color:var(--rts-text-primary);background:#8b5cf626}.rts-st-autocomplete-panel{position:absolute;z-index:20;left:0;right:0;top:calc(100% + 4px);max-height:240px;margin:0;padding:4px;overflow-y:auto;list-style:none;border-radius:10px;border:1px solid var(--rts-border-dim, rgba(120, 120, 160, .25));background:var(--rts-bg-secondary, var(--rts-bg-primary, #1d1f2b));-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);box-shadow:0 14px 32px -12px #00000073;animation:rts-st-panel-in .14s ease-out}.rts-st-autocomplete-option{display:flex;align-items:center;gap:10px;padding:6px 8px;border-radius:7px;cursor:pointer;transition:background .12s ease}.rts-st-autocomplete-option.rts-st-autocomplete-option-active{background:linear-gradient(135deg,#6366f129,#8b5cf61a)}.rts-st-autocomplete-option[aria-selected=true] .rts-st-autocomplete-option-name{color:var(--rts-st-accent)}.rts-st-autocomplete-thumb{flex-shrink:0;width:30px;height:30px;border-radius:7px;object-fit:cover}.rts-st-autocomplete-thumb-empty{display:flex;align-items:center;justify-content:center;font-size:15px;background:#8b5cf624}.rts-st-autocomplete-option-body{display:flex;flex-direction:column;min-width:0}.rts-st-autocomplete-option-name{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-size:13px;font-weight:500;color:var(--rts-text-primary)}.rts-st-autocomplete-option-meta{font-size:11px;color:var(--rts-text-secondary, #8a8fa3)}.rts-st-autocomplete-empty{padding:8px;font-size:12px;font-style:italic;color:var(--rts-text-secondary, #8a8fa3)}.rts-st-autocomplete-error{font-style:normal;color:#f43f5e}.rts-st-translator-actions{gap:8px}.rts-st-cancel{padding:8px 16px;border-radius:9px;border:1px solid var(--rts-border-dim, rgba(120, 120, 160, .25));background:transparent;color:var(--rts-text-secondary, #8a8fa3);font:inherit;font-size:13px;font-weight:600;cursor:pointer;transition:color .15s ease,border-color .15s ease,background .15s ease}.rts-st-cancel:hover{color:var(--rts-text-primary);border-color:#f43f5e73;background:#f43f5e0f}@keyframes rts-st-panel-in{0%{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: StoryTranslatorFormStepComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'rtsee-story-translator-form-step', standalone: true, imports: [ReactiveFormsModule], template: "<form class=\"rts-storyteller-form\" [formGroup]=\"form\" (ngSubmit)=\"submit()\" autocomplete=\"off\">\n  <div class=\"rts-storyteller-field\">\n    <label class=\"rts-storyteller-label\" for=\"story-translator-story-{{ step.id }}\">Story</label>\n    <div class=\"rts-st-autocomplete\">\n      <span class=\"rts-st-autocomplete-icon pi\" [class.pi-search]=\"!searchInProgress\" [class.pi-spin]=\"searchInProgress\" [class.pi-spinner]=\"searchInProgress\"></span>\n      <input #storyInput\n             class=\"rts-storyteller-input rts-st-autocomplete-input\"\n             [class.rts-storyteller-invalid]=\"isInvalid('storyId')\"\n             [class.rts-st-autocomplete-selected]=\"!!selectedStory\"\n             formControlName=\"storyQuery\"\n             type=\"text\"\n             role=\"combobox\"\n             aria-autocomplete=\"list\"\n             [attr.aria-expanded]=\"suggestionsOpened\"\n             placeholder=\"Search stories by name\u2026\"\n             id=\"story-translator-story-{{ step.id }}\"\n             (focus)=\"onStoryFocus()\"\n             (input)=\"onStoryInput()\"\n             (keydown)=\"onStoryKeydown($event)\"\n      />\n      @if (selectedStory && !readonly) {\n        <button type=\"button\"\n                class=\"rts-st-autocomplete-clear pi pi-times\"\n                aria-label=\"Clear story\"\n                id=\"story-translator-clear-{{ step.id }}\"\n                (click)=\"clearStory()\"\n        ></button>\n      }\n\n      @if (suggestionsOpened && !readonly) {\n        <ul class=\"rts-st-autocomplete-panel\" role=\"listbox\">\n          @if (searchError) {\n            <li class=\"rts-st-autocomplete-empty rts-st-autocomplete-error\">{{ searchError }}</li>\n          } @else if (!suggestions.length && !searchInProgress) {\n            <li class=\"rts-st-autocomplete-empty\">No stories found</li>\n          }\n          @for (story of suggestions; track story.id; let i = $index) {\n            <li class=\"rts-st-autocomplete-option\"\n                role=\"option\"\n                [class.rts-st-autocomplete-option-active]=\"i === highlightedIndex\"\n                [attr.aria-selected]=\"story.id === selectedStory?.id\"\n                (mouseenter)=\"highlightedIndex = i\"\n                (mousedown)=\"$event.preventDefault(); selectStory(story)\"\n            >\n              @if (story.imageUrl) {\n                <img class=\"rts-st-autocomplete-thumb\" [src]=\"story.imageUrl\" [alt]=\"story.name\" loading=\"lazy\" />\n              } @else {\n                <span class=\"rts-st-autocomplete-thumb rts-st-autocomplete-thumb-empty\">\uD83D\uDCD6</span>\n              }\n              <span class=\"rts-st-autocomplete-option-body\">\n                <span class=\"rts-st-autocomplete-option-name\">{{ story.name }}</span>\n                @if (story.totalSlides) {\n                  <span class=\"rts-st-autocomplete-option-meta\">{{ story.totalSlides }} slides</span>\n                }\n              </span>\n            </li>\n          }\n        </ul>\n      }\n    </div>\n  </div>\n\n  <label class=\"rts-storyteller-field\">\n    <span class=\"rts-storyteller-label\">Translate to</span>\n    <div class=\"rts-storyteller-select-wrap\">\n      <select class=\"rts-storyteller-input rts-storyteller-select\"\n              [class.rts-storyteller-invalid]=\"isInvalid('language')\"\n              formControlName=\"language\"\n              id=\"story-translator-language-{{ step.id }}\"\n      >\n        <option value=\"\" disabled>Select a language</option>\n        @for (language of languages; track language.code) {\n          <option [value]=\"language.code\">{{ language.nativeName }}</option>\n        }\n      </select>\n      <span class=\"rts-storyteller-select-caret pi pi-chevron-down\"></span>\n    </div>\n  </label>\n\n  <label class=\"rts-storyteller-field\">\n    <span class=\"rts-storyteller-label\">Agent</span>\n    @if (agents.length) {\n      <div class=\"rts-storyteller-select-wrap\">\n        <select class=\"rts-storyteller-input rts-storyteller-select\"\n                [class.rts-storyteller-invalid]=\"isInvalid('agentId')\"\n                formControlName=\"agentId\"\n                id=\"story-translator-agent-{{ step.id }}\"\n        >\n          <option value=\"\" disabled>Select an agent</option>\n          @for (agent of agents; track agent.id) {\n            <option [value]=\"agent.id\">\n              {{ agent.name }}{{ agent.agentConfiguration?.model?.model ? ' \u00B7 ' + agent.agentConfiguration?.model?.model : '' }}\n            </option>\n          }\n        </select>\n        <span class=\"rts-storyteller-select-caret pi pi-chevron-down\"></span>\n      </div>\n    } @else {\n      <div class=\"rts-storyteller-hint\">There are no agentic members in this chat. Add an agent to continue.</div>\n    }\n  </label>\n\n  @if (workflow.submitError) {\n    <div class=\"rts-storyteller-error\">{{ workflow.submitError }}</div>\n  }\n\n  @if (step.isActive) {\n    <div class=\"rts-storyteller-actions rts-st-translator-actions\">\n      @if (canCancel) {\n        <button class=\"rts-st-cancel\"\n                type=\"button\"\n                id=\"story-translator-cancel-{{ step.id }}\"\n                (click)=\"cancel()\"\n        >Cancel</button>\n      }\n      <button class=\"rts-storyteller-submit\"\n              type=\"submit\"\n              [disabled]=\"workflow.submitInProgress || !agents.length\"\n              id=\"story-translator-submit-{{ step.id }}\"\n      >\n        @if (workflow.submitInProgress) {\n          <span class=\"rts-storyteller-spinner\"></span> Translating\u2026\n        } @else {\n          \uD83C\uDF10 Translate{{ selectedLanguage ? ' to ' + selectedLanguage.nativeName : '' }}\n        }\n      </button>\n    </div>\n  }\n</form>\n", styles: [":host{display:block;--rts-st-accent: #8b5cf6;--rts-st-accent-2: #6366f1}.rts-storyteller-form{display:flex;flex-direction:column;gap:12px}.rts-storyteller-field{display:flex;flex-direction:column;gap:5px}.rts-storyteller-label{display:flex;justify-content:space-between;align-items:baseline;font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--rts-text-secondary, #8a8fa3)}.rts-storyteller-counter{font-weight:500;letter-spacing:0;text-transform:none}.rts-storyteller-input{width:100%;box-sizing:border-box;padding:9px 12px;border-radius:9px;border:1px solid var(--rts-border-dim, rgba(120, 120, 160, .25));background:var(--rts-bg-primary, rgba(127, 127, 160, .06));color:var(--rts-text-primary);font:inherit;font-size:13px;outline:none;transition:border-color .15s ease,box-shadow .15s ease,background .15s ease}.rts-storyteller-input:focus{border-color:var(--rts-st-accent);box-shadow:0 0 0 3px #8b5cf62e}.rts-storyteller-input:disabled{opacity:.75;cursor:default}.rts-storyteller-input.rts-storyteller-invalid{border-color:#f43f5e;box-shadow:0 0 0 3px #f43f5e1f}.rts-storyteller-textarea{min-height:80px;resize:vertical;line-height:1.5}.rts-storyteller-textarea-lg{min-height:160px;max-height:480px}.rts-storyteller-select-wrap{position:relative}.rts-storyteller-select{appearance:none;padding-right:32px;cursor:pointer}.rts-storyteller-select-caret{position:absolute;right:12px;top:50%;transform:translateY(-50%);font-size:10px;pointer-events:none;color:var(--rts-text-secondary, #8a8fa3)}.rts-storyteller-hint{font-size:12px;font-style:italic;color:var(--rts-text-secondary, #8a8fa3)}.rts-storyteller-error{padding:6px 10px;border-radius:6px;font-size:12px;color:#f43f5e;background:#f43f5e14;border:1px solid rgba(244,63,94,.25)}.rts-storyteller-actions{display:flex;justify-content:flex-end}.rts-storyteller-submit{display:inline-flex;align-items:center;gap:6px;padding:8px 18px;border:none;border-radius:9px;color:#fff;font-weight:600;font-size:13px;cursor:pointer;background:linear-gradient(135deg,var(--rts-st-accent-2),var(--rts-st-accent) 60%,#a78bfa);background-size:160% 160%;box-shadow:0 4px 14px -4px #6366f199;transition:transform .15s ease,box-shadow .15s ease,background-position .4s ease}.rts-storyteller-submit:hover:not(:disabled){transform:translateY(-1px);background-position:100% 0;box-shadow:0 6px 18px -4px #6366f1bf}.rts-storyteller-submit:disabled{opacity:.6;cursor:default;box-shadow:none}.rts-storyteller-spinner{width:11px;height:11px;border-radius:50%;border:2px solid rgba(255,255,255,.35);border-top-color:#fff;animation:rts-st-spin .8s linear infinite}.rts-story-link-card{display:flex;align-items:center;gap:12px;padding:14px;border-radius:12px;text-decoration:none;color:inherit;background:linear-gradient(135deg,#6366f11a,#8b5cf60f);border:1px solid rgba(139,92,246,.3);transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease;animation:rts-st-pop .4s cubic-bezier(.2,.9,.3,1.3)}.rts-story-link-card:hover{transform:translateY(-2px);border-color:var(--rts-st-accent);box-shadow:0 10px 28px -12px #8b5cf699}.rts-story-link-card:hover .rts-story-link-arrow{transform:translate(3px)}.rts-story-link-icon{display:flex;align-items:center;justify-content:center;flex-shrink:0;width:42px;height:42px;border-radius:12px;font-size:20px;background:linear-gradient(135deg,var(--rts-st-accent-2),var(--rts-st-accent))}.rts-story-link-body{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1}.rts-story-link-kicker{font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--rts-st-accent)}.rts-story-link-title{font-size:15px;font-weight:600;color:var(--rts-text-primary)}.rts-story-link-description{font-size:12px;color:var(--rts-text-secondary, #8a8fa3);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.rts-story-link-meta{font-size:11px;color:var(--rts-text-secondary, #8a8fa3)}.rts-story-link-arrow{color:var(--rts-st-accent);transition:transform .2s ease}@keyframes rts-st-spin{to{transform:rotate(360deg)}}@keyframes rts-st-pop{0%{opacity:0;transform:scale(.96)}to{opacity:1;transform:none}}\n", ".rts-st-autocomplete{position:relative}.rts-st-autocomplete-icon{position:absolute;left:12px;top:50%;transform:translateY(-50%);font-size:12px;pointer-events:none;color:var(--rts-text-secondary, #8a8fa3)}.rts-st-autocomplete-input{padding-left:32px;padding-right:32px}.rts-st-autocomplete-input.rts-st-autocomplete-selected{font-weight:600}.rts-st-autocomplete-clear{position:absolute;right:8px;top:50%;transform:translateY(-50%);width:22px;height:22px;padding:0;border:none;border-radius:50%;font-size:10px;cursor:pointer;color:var(--rts-text-secondary, #8a8fa3);background:transparent;transition:background .15s ease,color .15s ease}.rts-st-autocomplete-clear:hover{color:var(--rts-text-primary);background:#8b5cf626}.rts-st-autocomplete-panel{position:absolute;z-index:20;left:0;right:0;top:calc(100% + 4px);max-height:240px;margin:0;padding:4px;overflow-y:auto;list-style:none;border-radius:10px;border:1px solid var(--rts-border-dim, rgba(120, 120, 160, .25));background:var(--rts-bg-secondary, var(--rts-bg-primary, #1d1f2b));-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);box-shadow:0 14px 32px -12px #00000073;animation:rts-st-panel-in .14s ease-out}.rts-st-autocomplete-option{display:flex;align-items:center;gap:10px;padding:6px 8px;border-radius:7px;cursor:pointer;transition:background .12s ease}.rts-st-autocomplete-option.rts-st-autocomplete-option-active{background:linear-gradient(135deg,#6366f129,#8b5cf61a)}.rts-st-autocomplete-option[aria-selected=true] .rts-st-autocomplete-option-name{color:var(--rts-st-accent)}.rts-st-autocomplete-thumb{flex-shrink:0;width:30px;height:30px;border-radius:7px;object-fit:cover}.rts-st-autocomplete-thumb-empty{display:flex;align-items:center;justify-content:center;font-size:15px;background:#8b5cf624}.rts-st-autocomplete-option-body{display:flex;flex-direction:column;min-width:0}.rts-st-autocomplete-option-name{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-size:13px;font-weight:500;color:var(--rts-text-primary)}.rts-st-autocomplete-option-meta{font-size:11px;color:var(--rts-text-secondary, #8a8fa3)}.rts-st-autocomplete-empty{padding:8px;font-size:12px;font-style:italic;color:var(--rts-text-secondary, #8a8fa3)}.rts-st-autocomplete-error{font-style:normal;color:#f43f5e}.rts-st-translator-actions{gap:8px}.rts-st-cancel{padding:8px 16px;border-radius:9px;border:1px solid var(--rts-border-dim, rgba(120, 120, 160, .25));background:transparent;color:var(--rts-text-secondary, #8a8fa3);font:inherit;font-size:13px;font-weight:600;cursor:pointer;transition:color .15s ease,border-color .15s ease,background .15s ease}.rts-st-cancel:hover{color:var(--rts-text-primary);border-color:#f43f5e73;background:#f43f5e0f}@keyframes rts-st-panel-in{0%{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}\n"] }]
+        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }], propDecorators: { step: [{
+                type: Input
+            }], workflow: [{
+                type: Input
+            }], chat: [{
+                type: Input
+            }], messenger: [{
+                type: Input
+            }], storyInput: [{
+                type: ViewChild,
+                args: ['storyInput']
+            }], onDocumentMouseDown: [{
+                type: HostListener,
+                args: ['document:mousedown', ['$event']]
+            }] } });
+
 /**
  * Registry of the components which render workflow steps inside the rts-workflow widget.
  */
@@ -2301,6 +2637,7 @@ class WorkflowStepsService {
             { name: 'workflow-task-step', component: WorkflowTaskStepComponent },
             { name: 'storyteller-form-step', component: StorytellerFormStepComponent },
             { name: 'storyteller-story-link-step', component: StorytellerStoryLinkStepComponent },
+            { name: 'story-translator-form-step', component: StoryTranslatorFormStepComponent },
         ];
     }
     register(widget) {
@@ -2476,8 +2813,22 @@ class MessageComponent {
         this.widgetsService = widgetsService;
         this.componentFactoryResolver = componentFactoryResolver;
         this.timeFormatService = timeFormatService;
+        this.widgetRef = null;
+        this.widgetHasMessageInput = false;
     }
     ngOnInit() { }
+    ngOnChanges(changes) {
+        // The message instance can be replaced (e.g. images got downsized versions) - forward it to the widget
+        if (changes['message'] && !changes['message'].firstChange && this.widgetRef) {
+            if (this.widgetHasMessageInput) {
+                this.widgetRef.setInput('message', this.message);
+            }
+            else {
+                this.widgetRef.instance.message = this.message;
+                this.widgetRef.changeDetectorRef.markForCheck();
+            }
+        }
+    }
     ngAfterViewInit() {
         /* eslint-disable */
         if (this.message.widget) {
@@ -2493,11 +2844,13 @@ class MessageComponent {
             componentRef.instance.messenger = this.messenger;
             componentRef.instance.chat = this.chat;
             componentRef.changeDetectorRef.detectChanges();
+            this.widgetRef = componentRef;
+            this.widgetHasMessageInput = !!reflectComponentType(widget)?.inputs.some((input) => input.propName === 'message');
         }
         /* eslint-enable */
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: MessageComponent, deps: [{ token: MessageWidgetsService }, { token: i0.ComponentFactoryResolver }, { token: TimeFormatHelperService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: MessageComponent, isStandalone: true, selector: "rtsee-message", inputs: { chat: "chat", message: "message", member: "member", messenger: "messenger" }, viewQueries: [{ propertyName: "widgetHost", first: true, predicate: WidgetDirective, descendants: true }], ngImport: i0, template: "<div class=\"rts-message-container\" #rtsMessageContainer\n     [ngClass]=\"{'rts-message-from-me': message.from.id === messenger.clientId}\"\n>\n  <div class=\"rts-messenger-message\">\n    @if (message.widget) {\n      <ng-template widgetHost></ng-template>\n    }\n    @if (!message.widget) {\n      <p class=\"rts-messenger-message-text\"\n      >{{ message.text }}</p>\n    }\n    <div class=\"rts-messenger-message-info\" #rtsMessageInfo>\n     <rtsee-message-time-and-status [message]=\"message\"\n                                    [inChat]=\"true\"\n                                    [hideStatus]=\"message.from.id !== messenger.clientId\"\n     ></rtsee-message-time-and-status>\n    </div>\n  </div>\n</div>\n", dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: MessageTimeAndStatusComponent, selector: "rtsee-message-time-and-status", inputs: ["message", "hideStatus", "inChat"] }, { kind: "directive", type: WidgetDirective, selector: "[widgetHost]" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: MessageComponent, isStandalone: true, selector: "rtsee-message", inputs: { chat: "chat", message: "message", member: "member", messenger: "messenger" }, viewQueries: [{ propertyName: "widgetHost", first: true, predicate: WidgetDirective, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"rts-message-container\" #rtsMessageContainer\n     [ngClass]=\"{'rts-message-from-me': message.from.id === messenger.clientId}\"\n>\n  <div class=\"rts-messenger-message\">\n    @if (message.widget) {\n      <ng-template widgetHost></ng-template>\n    }\n    @if (!message.widget) {\n      <p class=\"rts-messenger-message-text\"\n      >{{ message.text }}</p>\n    }\n    <div class=\"rts-messenger-message-info\" #rtsMessageInfo>\n     <rtsee-message-time-and-status [message]=\"message\"\n                                    [inChat]=\"true\"\n                                    [hideStatus]=\"message.from.id !== messenger.clientId\"\n     ></rtsee-message-time-and-status>\n    </div>\n  </div>\n</div>\n", dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: MessageTimeAndStatusComponent, selector: "rtsee-message-time-and-status", inputs: ["message", "hideStatus", "inChat"] }, { kind: "directive", type: WidgetDirective, selector: "[widgetHost]" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: MessageComponent, decorators: [{
             type: Component,
@@ -3859,11 +4212,11 @@ class StoryPlayerComponent {
         this.story.initSwiper(swiper);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: StoryPlayerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: StoryPlayerComponent, isStandalone: true, selector: "rtsee-story-player", inputs: { story: "story", settings: "settings", presentation: "presentation" }, viewQueries: [{ propertyName: "swiperEl", first: true, predicate: ["swiperContainer"], descendants: true }], ngImport: i0, template: "<div class=\"rtsee-story-player\">\n  <div class=\"rtsee-story-player-slider swiper\" #swiperContainer>\n    <div class=\"rtsee-story-player-slider-inner swiper-wrapper\">\n      @for (slide of story.slides; track slide.id) {\n        <div class=\"story-player-slide-container swiper-slide\"\n             [ngClass]=\"{'story-player-slide-active': slide.isActive}\"\n        >\n          <rtsee-slide [slide]=\"slide\"\n                       [story]=\"story\"\n                       [presentation]=\"presentation\"\n                       [settings]=\"settings\"\n          ></rtsee-slide>\n        </div>\n      }\n    </div>\n  </div>\n</div>\n", dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: SlideComponent, selector: "rtsee-slide", inputs: ["presentation", "story", "slide", "settings"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: StoryPlayerComponent, isStandalone: true, selector: "rtsee-story-player", inputs: { story: "story", settings: "settings", presentation: "presentation" }, viewQueries: [{ propertyName: "swiperEl", first: true, predicate: ["swiperContainer"], descendants: true }], ngImport: i0, template: "<div class=\"rtsee-story-player\">\n  <div class=\"rtsee-story-player-slider swiper\" #swiperContainer>\n    <div class=\"rtsee-story-player-slider-inner swiper-wrapper\">\n      @for (slide of story.slides; track (slide.id || slide.slideNumber)) {\n        <div class=\"story-player-slide-container swiper-slide\"\n             [ngClass]=\"{'story-player-slide-active': slide.isActive}\"\n        >\n          <rtsee-slide [slide]=\"slide\"\n                       [story]=\"story\"\n                       [presentation]=\"presentation\"\n                       [settings]=\"settings\"\n          ></rtsee-slide>\n        </div>\n      }\n    </div>\n  </div>\n</div>\n", dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: SlideComponent, selector: "rtsee-slide", inputs: ["presentation", "story", "slide", "settings"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: StoryPlayerComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'rtsee-story-player', imports: [NgClass, SlideComponent], standalone: true, template: "<div class=\"rtsee-story-player\">\n  <div class=\"rtsee-story-player-slider swiper\" #swiperContainer>\n    <div class=\"rtsee-story-player-slider-inner swiper-wrapper\">\n      @for (slide of story.slides; track slide.id) {\n        <div class=\"story-player-slide-container swiper-slide\"\n             [ngClass]=\"{'story-player-slide-active': slide.isActive}\"\n        >\n          <rtsee-slide [slide]=\"slide\"\n                       [story]=\"story\"\n                       [presentation]=\"presentation\"\n                       [settings]=\"settings\"\n          ></rtsee-slide>\n        </div>\n      }\n    </div>\n  </div>\n</div>\n" }]
+            args: [{ selector: 'rtsee-story-player', imports: [NgClass, SlideComponent], standalone: true, template: "<div class=\"rtsee-story-player\">\n  <div class=\"rtsee-story-player-slider swiper\" #swiperContainer>\n    <div class=\"rtsee-story-player-slider-inner swiper-wrapper\">\n      @for (slide of story.slides; track (slide.id || slide.slideNumber)) {\n        <div class=\"story-player-slide-container swiper-slide\"\n             [ngClass]=\"{'story-player-slide-active': slide.isActive}\"\n        >\n          <rtsee-slide [slide]=\"slide\"\n                       [story]=\"story\"\n                       [presentation]=\"presentation\"\n                       [settings]=\"settings\"\n          ></rtsee-slide>\n        </div>\n      }\n    </div>\n  </div>\n</div>\n" }]
         }], ctorParameters: () => [], propDecorators: { story: [{
                 type: Input
             }], settings: [{
@@ -3961,6 +4314,11 @@ class StoryElementsSectionComponent {
         this.collapsed = false;
         this.canDetach = true;
         this.toggled = new EventEmitter();
+        this.batchMode = false;
+        this.selectedItemIds = new Set();
+        this.batchAdditionalPrompt = '';
+        this.generatingItemIds = new Set();
+        this.activeGenerationListeners = new Map();
         this.onIllustratorChanged = () => {
             this.cdr.markForCheck();
         };
@@ -3969,6 +4327,124 @@ class StoryElementsSectionComponent {
         if (this._illustrator) {
             this._illustrator.off('changed', this.onIllustratorChanged);
         }
+        for (const [requestId, listener] of this.activeGenerationListeners.entries()) {
+            window.removeEventListener(RTSeeIllustrator.REQUESTED_GENERATION_SUCCEED, listener);
+        }
+        this.activeGenerationListeners.clear();
+    }
+    startBatchSelection(event) {
+        event.stopPropagation();
+        event.preventDefault();
+        if (this.collapsed) {
+            this.toggled.emit();
+        }
+        this.batchMode = true;
+        this.selectedItemIds.clear();
+        for (const item of this.editor.items) {
+            const url = (item.imageUrl || '').toLowerCase();
+            if (!url || url.includes('default')) {
+                this.selectedItemIds.add(item.id);
+            }
+        }
+        this.cdr.markForCheck();
+    }
+    cancelBatchSelection() {
+        this.batchMode = false;
+        this.selectedItemIds.clear();
+        this.batchAdditionalPrompt = '';
+        this.cdr.markForCheck();
+    }
+    toggleItemSelection(id) {
+        if (this.selectedItemIds.has(id)) {
+            this.selectedItemIds.delete(id);
+        }
+        else {
+            this.selectedItemIds.add(id);
+        }
+        this.cdr.markForCheck();
+    }
+    isItemSelected(id) {
+        return this.selectedItemIds.has(id);
+    }
+    isItemGenerating(id) {
+        return this.generatingItemIds.has(id);
+    }
+    async submitBatchGeneration() {
+        if (this.selectedItemIds.size === 0)
+            return;
+        const selectedItems = this.editor.items.filter((item) => this.selectedItemIds.has(item.id));
+        const additionalPrompt = this.batchAdditionalPrompt.trim();
+        this.batchMode = false;
+        this.selectedItemIds.clear();
+        this.batchAdditionalPrompt = '';
+        this.cdr.markForCheck();
+        for (const item of selectedItems) {
+            const requestId = RTSeeCore.uuidv4();
+            this.generatingItemIds.add(item.id);
+            const listener = async (e) => {
+                const customEvent = e;
+                if (customEvent.detail?.requestId === requestId && customEvent.detail?.imageUrl) {
+                    window.removeEventListener(RTSeeIllustrator.REQUESTED_GENERATION_SUCCEED, listener);
+                    this.activeGenerationListeners.delete(requestId);
+                    this.generatingItemIds.delete(item.id);
+                    const cleanUrl = sanitizeImageUrl(customEvent.detail.imageUrl);
+                    try {
+                        item.imageUrl = cleanUrl;
+                        await item.save({ imageUrl: cleanUrl });
+                        if (this.editor.expanded && this.editor.expanded.id === item.id && this.editor.form) {
+                            const imageField = this.editor.form.fields.find((f) => f.name === 'imageUrl' || f.type === 'image-uploader');
+                            if (imageField) {
+                                imageField.value = cleanUrl;
+                                if (imageField.imageUploader) {
+                                    imageField.imageUploader.uploadedPhotoPreview = cleanUrl;
+                                    imageField.imageUploader.value = cleanUrl;
+                                }
+                            }
+                        }
+                    }
+                    catch (err) {
+                        console.error(`Failed to apply generated image to ${this.editor.label}:`, err);
+                    }
+                    finally {
+                        this.cdr.markForCheck();
+                    }
+                }
+            };
+            window.addEventListener(RTSeeIllustrator.REQUESTED_GENERATION_SUCCEED, listener);
+            this.activeGenerationListeners.set(requestId, listener);
+            const promptParts = [];
+            promptParts.push(`${this.editor.label}: ${item.name || ''}`);
+            if (item.visualDescription) {
+                promptParts.push(`Visual appearance: ${item.visualDescription}`);
+            }
+            if (item.description && item.description !== item.visualDescription) {
+                promptParts.push(`Description/Role: ${item.description}`);
+            }
+            if (additionalPrompt) {
+                promptParts.push(`Additional prompt: ${additionalPrompt}`);
+            }
+            const entityPrompt = promptParts.join('\n');
+            const config = this.illustrator?.config || {
+                aspectRatio: '1:1',
+                style: 'Classic Fairy Tale pixel-art Storybook',
+                mood: 'Dreamy & Magical',
+                lighting: 'Soft Diffused Storybook Glow',
+                negativePrompt: 'modern elements, cars, text, watermark, signature, blurry, low quality',
+                numberOfImages: 1,
+            };
+            const payload = {
+                chatId: this.illustrator?.activeChatId || undefined,
+                agentId: this.illustrator?.activeAgentId || '',
+                prompt: entityPrompt,
+                config: { ...config },
+                contextImages: [],
+                requestId,
+            };
+            window.dispatchEvent(new CustomEvent(RTSeeIllustratorEvents.SUBMIT_PROMPT, {
+                detail: payload,
+            }));
+        }
+        this.cdr.markForCheck();
     }
     async applyReviewedImageToItem(event, item) {
         event.stopPropagation();
@@ -3988,6 +4464,11 @@ class StoryElementsSectionComponent {
                     }
                 }
             }
+            // Reset illustrator state and UI
+            this._illustrator?.resetState();
+            if (typeof window !== 'undefined') {
+                window.dispatchEvent(new CustomEvent(RTSeeIllustratorEvents.RESET_STATE));
+            }
         }
         catch (e) {
             console.error(`Failed to apply image to ${this.editor.label}:`, e);
@@ -4019,11 +4500,11 @@ class StoryElementsSectionComponent {
         return item.id || `new-${index}`;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: StoryElementsSectionComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: StoryElementsSectionComponent, isStandalone: true, selector: "rtsee-story-elements-section", inputs: { editor: "editor", title: "title", icon: "icon", collapsed: "collapsed", canDetach: "canDetach", illustrator: "illustrator" }, outputs: { toggled: "toggled" }, ngImport: i0, template: "<section class=\"rtsee-ise-section\" [ngClass]=\"{ 'rtsee-ise-section--collapsed': collapsed }\">\n  <header class=\"rtsee-ise-section-header\">\n    <button type=\"button\"\n            class=\"rtsee-ise-section-toggle\"\n            [attr.aria-expanded]=\"!collapsed\"\n            [id]=\"'rtsee-ise-toggle-' + editor.section\"\n            (click)=\"toggled.emit()\">\n      <i class=\"rtsee-ise-section-icon\" [ngClass]=\"icon\"></i>\n      <h3 class=\"rtsee-ise-section-title\">{{ title }}</h3>\n      <span class=\"rtsee-ise-section-count\">{{ editor.items.length }}</span>\n      <i class=\"pi pi-chevron-down rtsee-ise-chevron\"></i>\n    </button>\n  </header>\n\n  @if (!collapsed) {\n    <div class=\"rtsee-ise-section-body\">\n      <div class=\"rtsee-ise-thumbs-grid\">\n        @for (item of editor.items; track trackById($index, item)) {\n          <div class=\"rtsee-ise-thumb-card-container\" style=\"position: relative; display: flex; flex-direction: column;\">\n            <button type=\"button\"\n                    class=\"rtsee-ise-thumb\"\n                    [ngClass]=\"{ 'rtsee-ise-thumb--active': editor.isExpanded(item) }\"\n                    [id]=\"'rtsee-ise-' + editor.section + '-' + item.id\"\n                    (click)=\"editor.expand(item)\">\n              <div class=\"rtsee-ise-thumb-image\">\n                @if (item.imageUrl) {\n                  <img [src]=\"item.imageUrl\" [alt]=\"item.name\" loading=\"lazy\" />\n                } @else {\n                  <i [ngClass]=\"icon\"></i>\n                }\n              </div>\n              <div class=\"rtsee-ise-thumb-body\">\n                <span class=\"rtsee-ise-thumb-name\">{{ item.name }}</span>\n                <span class=\"rtsee-ise-thumb-description\">{{ item.getTruncatedDescription(90) }}</span>\n              </div>\n            </button>\n            <button type=\"button\"\n                    class=\"rtsee-ise-btn-add-illustrator\"\n                    style=\"position: absolute; top: 8px; right: 8px;\"\n                    title=\"Add {{ item.name }} to Illustrator context\"\n                    (click)=\"addToIllustrator($event, item)\">\n              <i class=\"pi pi-palette\"></i>\n              <span>+\uD83C\uDFA8</span>\n            </button>\n            @if (illustrator?.reviewingGeneratedImage && illustrator?.currentGeneratedImageUrl) {\n              <button type=\"button\"\n                      class=\"rtsee-ise-btn-quick-apply\"\n                      style=\"position: absolute; bottom: 8px; right: 8px;\"\n                      [disabled]=\"item.saveInProgress\"\n                      [title]=\"'Apply reviewed image to ' + item.name\"\n                      (click)=\"applyReviewedImageToItem($event, item)\">\n                @if (item.saveInProgress) {\n                  <i class=\"pi pi-spin pi-spinner\"></i>\n                } @else {\n                  <i class=\"pi pi-plus\"></i>\n                }\n              </button>\n            }\n          </div>\n        }\n\n        <button type=\"button\"\n                class=\"rtsee-ise-thumb rtsee-ise-thumb--add\"\n                [ngClass]=\"{ 'rtsee-ise-thumb--active': editor.isCreating }\"\n                [id]=\"'rtsee-ise-add-' + editor.section\"\n                (click)=\"editor.expandNew()\">\n          <i class=\"pi pi-plus\"></i>\n          <span>New {{ editor.label }}</span>\n        </button>\n      </div>\n\n      @if (editor.expanded && editor.form) {\n        <div class=\"rtsee-ise-expanded rtsee-form-container\">\n          <div class=\"rtsee-ise-expanded-header\">\n            <h4>{{ editor.expanded.isNew ? 'New ' + editor.label : editor.expanded.name }}</h4>\n            <div style=\"display: flex; align-items: center; gap: 8px;\">\n              @if (!editor.expanded.isNew) {\n                <button type=\"button\"\n                        class=\"rtsee-ise-btn-add-illustrator\"\n                        title=\"Add to Illustrator context\"\n                        (click)=\"addToIllustrator($event, editor.expanded)\">\n                  <i class=\"pi pi-palette\"></i>\n                  <span>+\uD83C\uDFA8 Illustrator</span>\n                </button>\n              }\n              <button type=\"button\" class=\"rtsee-ise-icon-button\" (click)=\"editor.collapse()\" aria-label=\"Close\">\n                <i class=\"pi pi-times\"></i>\n              </button>\n            </div>\n          </div>\n\n          @if (editor.error) {\n            <div class=\"rtsee-ise-error\">{{ editor.error }}</div>\n          }\n\n          <rtsee-form [form]=\"editor.form\" (formSubmit)=\"submit()\">\n            <div class=\"rtsee-ise-actions\">\n              <p-button type=\"submit\"\n                        [label]=\"editor.expanded.isNew ? 'Create' : 'Save'\"\n                        [loading]=\"editor.saveInProgress\"\n                        [disabled]=\"editor.busy\" />\n              <p-button label=\"Cancel\"\n                        severity=\"secondary\"\n                        (click)=\"editor.collapse()\"\n                        [disabled]=\"editor.busy\" />\n              @if (!editor.expanded.isNew) {\n                <span class=\"rtsee-ise-actions-spacer\"></span>\n                @if (canDetach) {\n                  <p-button label=\"Remove from story\"\n                            icon=\"pi pi-minus-circle\"\n                            severity=\"secondary\"\n                            [text]=\"true\"\n                            (click)=\"editor.detach(editor.expanded)\"\n                            [disabled]=\"editor.busy\" />\n                }\n                <p-button label=\"Delete\"\n                          icon=\"pi pi-trash\"\n                          severity=\"danger\"\n                          [text]=\"true\"\n                          [loading]=\"editor.removeInProgress\"\n                          (click)=\"editor.delete(editor.expanded)\"\n                          [disabled]=\"editor.busy\" />\n              }\n            </div>\n          </rtsee-form>\n        </div>\n      }\n    </div>\n  }\n</section>\n", dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "buttonProps", "autofocus", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: FormComponent, selector: "rtsee-form", inputs: ["form"], outputs: ["formSubmit"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: StoryElementsSectionComponent, isStandalone: true, selector: "rtsee-story-elements-section", inputs: { editor: "editor", title: "title", icon: "icon", collapsed: "collapsed", canDetach: "canDetach", illustrator: "illustrator" }, outputs: { toggled: "toggled" }, ngImport: i0, template: "<section class=\"rtsee-ise-section\" [ngClass]=\"{ 'rtsee-ise-section--collapsed': collapsed }\">\n  <header class=\"rtsee-ise-section-header\">\n    <button type=\"button\"\n            class=\"rtsee-ise-section-toggle\"\n            [attr.aria-expanded]=\"!collapsed\"\n            [id]=\"'rtsee-ise-toggle-' + editor.section\"\n            (click)=\"toggled.emit()\">\n      <i class=\"rtsee-ise-section-icon\" [ngClass]=\"icon\"></i>\n      <h3 class=\"rtsee-ise-section-title\">{{ title }}</h3>\n      <span class=\"rtsee-ise-section-count\">{{ editor.items.length }}</span>\n      <i class=\"pi pi-chevron-down rtsee-ise-chevron\"></i>\n    </button>\n    @if (editor.items.length > 0 && !batchMode) {\n      <button type=\"button\"\n              class=\"rtsee-ise-btn-batch-generate\"\n              (click)=\"startBatchSelection($event)\"\n              [title]=\"'Batch generate images for ' + title\">\n        <i class=\"pi pi-sparkles\"></i>\n        <span>Generate Images</span>\n      </button>\n    }\n  </header>\n\n  @if (batchMode) {\n    <div class=\"rtsee-ise-batch-panel\">\n      <div class=\"rtsee-ise-batch-header\">\n        <span class=\"rtsee-ise-batch-title\">\n          <i class=\"pi pi-sparkles\"></i>\n          Batch Generate for {{ title }} ({{ selectedItemIds.size }} of {{ editor.items.length }} selected)\n        </span>\n        <span class=\"rtsee-ise-batch-hint\">\n          Click items to select/deselect. Entities with default images are auto-selected.\n        </span>\n      </div>\n\n      <textarea\n        class=\"rtsee-ise-batch-prompt-input\"\n        rows=\"2\"\n        [(ngModel)]=\"batchAdditionalPrompt\"\n        placeholder=\"Additional prompt instructions for all selected {{ title }} (optional)...\"\n      ></textarea>\n\n      <div class=\"rtsee-ise-batch-actions\">\n        <button\n          type=\"button\"\n          class=\"rtsee-ise-btn-batch-cancel\"\n          (click)=\"cancelBatchSelection()\"\n        >\n          Cancel\n        </button>\n        <button\n          type=\"button\"\n          class=\"rtsee-ise-btn-batch-submit\"\n          [disabled]=\"selectedItemIds.size === 0\"\n          (click)=\"submitBatchGeneration()\"\n        >\n          <i class=\"pi pi-sparkles\"></i>\n          <span>Generate {{ selectedItemIds.size }} image{{ selectedItemIds.size === 1 ? '' : 's' }}</span>\n        </button>\n      </div>\n    </div>\n  }\n\n  @if (!collapsed) {\n    <div class=\"rtsee-ise-section-body\">\n      <div class=\"rtsee-ise-thumbs-grid\">\n        @for (item of editor.items; track trackById($index, item)) {\n          <div class=\"rtsee-ise-thumb-card-container\" style=\"position: relative; display: flex; flex-direction: column;\">\n            <button type=\"button\"\n                    class=\"rtsee-ise-thumb\"\n                    [ngClass]=\"{\n                      'rtsee-ise-thumb--active': editor.isExpanded(item),\n                      'rtsee-ise-thumb-card--selected': batchMode && isItemSelected(item.id)\n                    }\"\n                    [id]=\"'rtsee-ise-' + editor.section + '-' + item.id\"\n                    (click)=\"batchMode ? toggleItemSelection(item.id) : editor.expand(item)\">\n              <div class=\"rtsee-ise-thumb-image\">\n                @if (item.imageUrl) {\n                  <img [src]=\"item.imageUrl\" [alt]=\"item.name\" loading=\"lazy\" />\n                } @else {\n                  <i [ngClass]=\"icon\"></i>\n                }\n                @if (isItemGenerating(item.id)) {\n                  <div class=\"rtsee-ise-thumb-generating-overlay\">\n                    <i class=\"pi pi-spin pi-spinner\"></i>\n                    <span>Generating\u2026</span>\n                  </div>\n                }\n              </div>\n              <div class=\"rtsee-ise-thumb-body\">\n                <span class=\"rtsee-ise-thumb-name\">{{ item.name }}</span>\n                <span class=\"rtsee-ise-thumb-description\">{{ item.getTruncatedDescription(90) }}</span>\n              </div>\n            </button>\n            @if (batchMode) {\n              <div class=\"rtsee-ise-thumb-batch-checkbox\" (click)=\"toggleItemSelection(item.id); $event.stopPropagation()\">\n                <input type=\"checkbox\" [checked]=\"isItemSelected(item.id)\" />\n              </div>\n            }\n            <button type=\"button\"\n                    class=\"rtsee-ise-btn-add-illustrator\"\n                    style=\"position: absolute; top: 8px; right: 8px;\"\n                    title=\"Add {{ item.name }} to Illustrator context\"\n                    (click)=\"addToIllustrator($event, item)\">\n              <i class=\"pi pi-palette\"></i>\n              <span>+\uD83C\uDFA8</span>\n            </button>\n            @if (illustrator?.reviewingGeneratedImage && illustrator?.currentGeneratedImageUrl) {\n              <button type=\"button\"\n                      class=\"rtsee-ise-btn-quick-apply\"\n                      style=\"position: absolute; bottom: 8px; right: 8px;\"\n                      [disabled]=\"item.saveInProgress\"\n                      [title]=\"'Apply reviewed image to ' + item.name\"\n                      (click)=\"applyReviewedImageToItem($event, item)\">\n                @if (item.saveInProgress) {\n                  <i class=\"pi pi-spin pi-spinner\"></i>\n                } @else {\n                  <i class=\"pi pi-plus\"></i>\n                }\n              </button>\n            }\n          </div>\n        }\n\n        <button type=\"button\"\n                class=\"rtsee-ise-thumb rtsee-ise-thumb--add\"\n                [ngClass]=\"{ 'rtsee-ise-thumb--active': editor.isCreating }\"\n                [id]=\"'rtsee-ise-add-' + editor.section\"\n                (click)=\"editor.expandNew()\">\n          <i class=\"pi pi-plus\"></i>\n          <span>New {{ editor.label }}</span>\n        </button>\n      </div>\n\n      @if (editor.expanded && editor.form) {\n        <div class=\"rtsee-ise-expanded rtsee-form-container\">\n          <div class=\"rtsee-ise-expanded-header\">\n            <h4>{{ editor.expanded.isNew ? 'New ' + editor.label : editor.expanded.name }}</h4>\n            <div style=\"display: flex; align-items: center; gap: 8px;\">\n              @if (!editor.expanded.isNew) {\n                <button type=\"button\"\n                        class=\"rtsee-ise-btn-add-illustrator\"\n                        title=\"Add to Illustrator context\"\n                        (click)=\"addToIllustrator($event, editor.expanded)\">\n                  <i class=\"pi pi-palette\"></i>\n                  <span>+\uD83C\uDFA8 Illustrator</span>\n                </button>\n              }\n              <button type=\"button\" class=\"rtsee-ise-icon-button\" (click)=\"editor.collapse()\" aria-label=\"Close\">\n                <i class=\"pi pi-times\"></i>\n              </button>\n            </div>\n          </div>\n\n          @if (editor.error) {\n            <div class=\"rtsee-ise-error\">{{ editor.error }}</div>\n          }\n\n          <rtsee-form [form]=\"editor.form\" (formSubmit)=\"submit()\">\n            <div class=\"rtsee-ise-actions\">\n              <p-button type=\"submit\"\n                        [label]=\"editor.expanded.isNew ? 'Create' : 'Save'\"\n                        [loading]=\"editor.saveInProgress\"\n                        [disabled]=\"editor.busy\" />\n              <p-button label=\"Cancel\"\n                        severity=\"secondary\"\n                        (click)=\"editor.collapse()\"\n                        [disabled]=\"editor.busy\" />\n              @if (!editor.expanded.isNew) {\n                <span class=\"rtsee-ise-actions-spacer\"></span>\n                @if (canDetach) {\n                  <p-button label=\"Remove from story\"\n                            icon=\"pi pi-minus-circle\"\n                            severity=\"secondary\"\n                            [text]=\"true\"\n                            (click)=\"editor.detach(editor.expanded)\"\n                            [disabled]=\"editor.busy\" />\n                }\n                <p-button label=\"Delete\"\n                          icon=\"pi pi-trash\"\n                          severity=\"danger\"\n                          [text]=\"true\"\n                          [loading]=\"editor.removeInProgress\"\n                          (click)=\"editor.delete(editor.expanded)\"\n                          [disabled]=\"editor.busy\" />\n              }\n            </div>\n          </rtsee-form>\n        </div>\n      }\n    </div>\n  }\n</section>\n", dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "buttonProps", "autofocus", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: FormComponent, selector: "rtsee-form", inputs: ["form"], outputs: ["formSubmit"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: StoryElementsSectionComponent, decorators: [{
             type: Component,
-            args: [{ selector: "rtsee-story-elements-section", standalone: true, imports: [NgClass, Button, FormComponent], template: "<section class=\"rtsee-ise-section\" [ngClass]=\"{ 'rtsee-ise-section--collapsed': collapsed }\">\n  <header class=\"rtsee-ise-section-header\">\n    <button type=\"button\"\n            class=\"rtsee-ise-section-toggle\"\n            [attr.aria-expanded]=\"!collapsed\"\n            [id]=\"'rtsee-ise-toggle-' + editor.section\"\n            (click)=\"toggled.emit()\">\n      <i class=\"rtsee-ise-section-icon\" [ngClass]=\"icon\"></i>\n      <h3 class=\"rtsee-ise-section-title\">{{ title }}</h3>\n      <span class=\"rtsee-ise-section-count\">{{ editor.items.length }}</span>\n      <i class=\"pi pi-chevron-down rtsee-ise-chevron\"></i>\n    </button>\n  </header>\n\n  @if (!collapsed) {\n    <div class=\"rtsee-ise-section-body\">\n      <div class=\"rtsee-ise-thumbs-grid\">\n        @for (item of editor.items; track trackById($index, item)) {\n          <div class=\"rtsee-ise-thumb-card-container\" style=\"position: relative; display: flex; flex-direction: column;\">\n            <button type=\"button\"\n                    class=\"rtsee-ise-thumb\"\n                    [ngClass]=\"{ 'rtsee-ise-thumb--active': editor.isExpanded(item) }\"\n                    [id]=\"'rtsee-ise-' + editor.section + '-' + item.id\"\n                    (click)=\"editor.expand(item)\">\n              <div class=\"rtsee-ise-thumb-image\">\n                @if (item.imageUrl) {\n                  <img [src]=\"item.imageUrl\" [alt]=\"item.name\" loading=\"lazy\" />\n                } @else {\n                  <i [ngClass]=\"icon\"></i>\n                }\n              </div>\n              <div class=\"rtsee-ise-thumb-body\">\n                <span class=\"rtsee-ise-thumb-name\">{{ item.name }}</span>\n                <span class=\"rtsee-ise-thumb-description\">{{ item.getTruncatedDescription(90) }}</span>\n              </div>\n            </button>\n            <button type=\"button\"\n                    class=\"rtsee-ise-btn-add-illustrator\"\n                    style=\"position: absolute; top: 8px; right: 8px;\"\n                    title=\"Add {{ item.name }} to Illustrator context\"\n                    (click)=\"addToIllustrator($event, item)\">\n              <i class=\"pi pi-palette\"></i>\n              <span>+\uD83C\uDFA8</span>\n            </button>\n            @if (illustrator?.reviewingGeneratedImage && illustrator?.currentGeneratedImageUrl) {\n              <button type=\"button\"\n                      class=\"rtsee-ise-btn-quick-apply\"\n                      style=\"position: absolute; bottom: 8px; right: 8px;\"\n                      [disabled]=\"item.saveInProgress\"\n                      [title]=\"'Apply reviewed image to ' + item.name\"\n                      (click)=\"applyReviewedImageToItem($event, item)\">\n                @if (item.saveInProgress) {\n                  <i class=\"pi pi-spin pi-spinner\"></i>\n                } @else {\n                  <i class=\"pi pi-plus\"></i>\n                }\n              </button>\n            }\n          </div>\n        }\n\n        <button type=\"button\"\n                class=\"rtsee-ise-thumb rtsee-ise-thumb--add\"\n                [ngClass]=\"{ 'rtsee-ise-thumb--active': editor.isCreating }\"\n                [id]=\"'rtsee-ise-add-' + editor.section\"\n                (click)=\"editor.expandNew()\">\n          <i class=\"pi pi-plus\"></i>\n          <span>New {{ editor.label }}</span>\n        </button>\n      </div>\n\n      @if (editor.expanded && editor.form) {\n        <div class=\"rtsee-ise-expanded rtsee-form-container\">\n          <div class=\"rtsee-ise-expanded-header\">\n            <h4>{{ editor.expanded.isNew ? 'New ' + editor.label : editor.expanded.name }}</h4>\n            <div style=\"display: flex; align-items: center; gap: 8px;\">\n              @if (!editor.expanded.isNew) {\n                <button type=\"button\"\n                        class=\"rtsee-ise-btn-add-illustrator\"\n                        title=\"Add to Illustrator context\"\n                        (click)=\"addToIllustrator($event, editor.expanded)\">\n                  <i class=\"pi pi-palette\"></i>\n                  <span>+\uD83C\uDFA8 Illustrator</span>\n                </button>\n              }\n              <button type=\"button\" class=\"rtsee-ise-icon-button\" (click)=\"editor.collapse()\" aria-label=\"Close\">\n                <i class=\"pi pi-times\"></i>\n              </button>\n            </div>\n          </div>\n\n          @if (editor.error) {\n            <div class=\"rtsee-ise-error\">{{ editor.error }}</div>\n          }\n\n          <rtsee-form [form]=\"editor.form\" (formSubmit)=\"submit()\">\n            <div class=\"rtsee-ise-actions\">\n              <p-button type=\"submit\"\n                        [label]=\"editor.expanded.isNew ? 'Create' : 'Save'\"\n                        [loading]=\"editor.saveInProgress\"\n                        [disabled]=\"editor.busy\" />\n              <p-button label=\"Cancel\"\n                        severity=\"secondary\"\n                        (click)=\"editor.collapse()\"\n                        [disabled]=\"editor.busy\" />\n              @if (!editor.expanded.isNew) {\n                <span class=\"rtsee-ise-actions-spacer\"></span>\n                @if (canDetach) {\n                  <p-button label=\"Remove from story\"\n                            icon=\"pi pi-minus-circle\"\n                            severity=\"secondary\"\n                            [text]=\"true\"\n                            (click)=\"editor.detach(editor.expanded)\"\n                            [disabled]=\"editor.busy\" />\n                }\n                <p-button label=\"Delete\"\n                          icon=\"pi pi-trash\"\n                          severity=\"danger\"\n                          [text]=\"true\"\n                          [loading]=\"editor.removeInProgress\"\n                          (click)=\"editor.delete(editor.expanded)\"\n                          [disabled]=\"editor.busy\" />\n              }\n            </div>\n          </rtsee-form>\n        </div>\n      }\n    </div>\n  }\n</section>\n" }]
+            args: [{ selector: "rtsee-story-elements-section", standalone: true, imports: [NgClass, FormsModule, Button, FormComponent], template: "<section class=\"rtsee-ise-section\" [ngClass]=\"{ 'rtsee-ise-section--collapsed': collapsed }\">\n  <header class=\"rtsee-ise-section-header\">\n    <button type=\"button\"\n            class=\"rtsee-ise-section-toggle\"\n            [attr.aria-expanded]=\"!collapsed\"\n            [id]=\"'rtsee-ise-toggle-' + editor.section\"\n            (click)=\"toggled.emit()\">\n      <i class=\"rtsee-ise-section-icon\" [ngClass]=\"icon\"></i>\n      <h3 class=\"rtsee-ise-section-title\">{{ title }}</h3>\n      <span class=\"rtsee-ise-section-count\">{{ editor.items.length }}</span>\n      <i class=\"pi pi-chevron-down rtsee-ise-chevron\"></i>\n    </button>\n    @if (editor.items.length > 0 && !batchMode) {\n      <button type=\"button\"\n              class=\"rtsee-ise-btn-batch-generate\"\n              (click)=\"startBatchSelection($event)\"\n              [title]=\"'Batch generate images for ' + title\">\n        <i class=\"pi pi-sparkles\"></i>\n        <span>Generate Images</span>\n      </button>\n    }\n  </header>\n\n  @if (batchMode) {\n    <div class=\"rtsee-ise-batch-panel\">\n      <div class=\"rtsee-ise-batch-header\">\n        <span class=\"rtsee-ise-batch-title\">\n          <i class=\"pi pi-sparkles\"></i>\n          Batch Generate for {{ title }} ({{ selectedItemIds.size }} of {{ editor.items.length }} selected)\n        </span>\n        <span class=\"rtsee-ise-batch-hint\">\n          Click items to select/deselect. Entities with default images are auto-selected.\n        </span>\n      </div>\n\n      <textarea\n        class=\"rtsee-ise-batch-prompt-input\"\n        rows=\"2\"\n        [(ngModel)]=\"batchAdditionalPrompt\"\n        placeholder=\"Additional prompt instructions for all selected {{ title }} (optional)...\"\n      ></textarea>\n\n      <div class=\"rtsee-ise-batch-actions\">\n        <button\n          type=\"button\"\n          class=\"rtsee-ise-btn-batch-cancel\"\n          (click)=\"cancelBatchSelection()\"\n        >\n          Cancel\n        </button>\n        <button\n          type=\"button\"\n          class=\"rtsee-ise-btn-batch-submit\"\n          [disabled]=\"selectedItemIds.size === 0\"\n          (click)=\"submitBatchGeneration()\"\n        >\n          <i class=\"pi pi-sparkles\"></i>\n          <span>Generate {{ selectedItemIds.size }} image{{ selectedItemIds.size === 1 ? '' : 's' }}</span>\n        </button>\n      </div>\n    </div>\n  }\n\n  @if (!collapsed) {\n    <div class=\"rtsee-ise-section-body\">\n      <div class=\"rtsee-ise-thumbs-grid\">\n        @for (item of editor.items; track trackById($index, item)) {\n          <div class=\"rtsee-ise-thumb-card-container\" style=\"position: relative; display: flex; flex-direction: column;\">\n            <button type=\"button\"\n                    class=\"rtsee-ise-thumb\"\n                    [ngClass]=\"{\n                      'rtsee-ise-thumb--active': editor.isExpanded(item),\n                      'rtsee-ise-thumb-card--selected': batchMode && isItemSelected(item.id)\n                    }\"\n                    [id]=\"'rtsee-ise-' + editor.section + '-' + item.id\"\n                    (click)=\"batchMode ? toggleItemSelection(item.id) : editor.expand(item)\">\n              <div class=\"rtsee-ise-thumb-image\">\n                @if (item.imageUrl) {\n                  <img [src]=\"item.imageUrl\" [alt]=\"item.name\" loading=\"lazy\" />\n                } @else {\n                  <i [ngClass]=\"icon\"></i>\n                }\n                @if (isItemGenerating(item.id)) {\n                  <div class=\"rtsee-ise-thumb-generating-overlay\">\n                    <i class=\"pi pi-spin pi-spinner\"></i>\n                    <span>Generating\u2026</span>\n                  </div>\n                }\n              </div>\n              <div class=\"rtsee-ise-thumb-body\">\n                <span class=\"rtsee-ise-thumb-name\">{{ item.name }}</span>\n                <span class=\"rtsee-ise-thumb-description\">{{ item.getTruncatedDescription(90) }}</span>\n              </div>\n            </button>\n            @if (batchMode) {\n              <div class=\"rtsee-ise-thumb-batch-checkbox\" (click)=\"toggleItemSelection(item.id); $event.stopPropagation()\">\n                <input type=\"checkbox\" [checked]=\"isItemSelected(item.id)\" />\n              </div>\n            }\n            <button type=\"button\"\n                    class=\"rtsee-ise-btn-add-illustrator\"\n                    style=\"position: absolute; top: 8px; right: 8px;\"\n                    title=\"Add {{ item.name }} to Illustrator context\"\n                    (click)=\"addToIllustrator($event, item)\">\n              <i class=\"pi pi-palette\"></i>\n              <span>+\uD83C\uDFA8</span>\n            </button>\n            @if (illustrator?.reviewingGeneratedImage && illustrator?.currentGeneratedImageUrl) {\n              <button type=\"button\"\n                      class=\"rtsee-ise-btn-quick-apply\"\n                      style=\"position: absolute; bottom: 8px; right: 8px;\"\n                      [disabled]=\"item.saveInProgress\"\n                      [title]=\"'Apply reviewed image to ' + item.name\"\n                      (click)=\"applyReviewedImageToItem($event, item)\">\n                @if (item.saveInProgress) {\n                  <i class=\"pi pi-spin pi-spinner\"></i>\n                } @else {\n                  <i class=\"pi pi-plus\"></i>\n                }\n              </button>\n            }\n          </div>\n        }\n\n        <button type=\"button\"\n                class=\"rtsee-ise-thumb rtsee-ise-thumb--add\"\n                [ngClass]=\"{ 'rtsee-ise-thumb--active': editor.isCreating }\"\n                [id]=\"'rtsee-ise-add-' + editor.section\"\n                (click)=\"editor.expandNew()\">\n          <i class=\"pi pi-plus\"></i>\n          <span>New {{ editor.label }}</span>\n        </button>\n      </div>\n\n      @if (editor.expanded && editor.form) {\n        <div class=\"rtsee-ise-expanded rtsee-form-container\">\n          <div class=\"rtsee-ise-expanded-header\">\n            <h4>{{ editor.expanded.isNew ? 'New ' + editor.label : editor.expanded.name }}</h4>\n            <div style=\"display: flex; align-items: center; gap: 8px;\">\n              @if (!editor.expanded.isNew) {\n                <button type=\"button\"\n                        class=\"rtsee-ise-btn-add-illustrator\"\n                        title=\"Add to Illustrator context\"\n                        (click)=\"addToIllustrator($event, editor.expanded)\">\n                  <i class=\"pi pi-palette\"></i>\n                  <span>+\uD83C\uDFA8 Illustrator</span>\n                </button>\n              }\n              <button type=\"button\" class=\"rtsee-ise-icon-button\" (click)=\"editor.collapse()\" aria-label=\"Close\">\n                <i class=\"pi pi-times\"></i>\n              </button>\n            </div>\n          </div>\n\n          @if (editor.error) {\n            <div class=\"rtsee-ise-error\">{{ editor.error }}</div>\n          }\n\n          <rtsee-form [form]=\"editor.form\" (formSubmit)=\"submit()\">\n            <div class=\"rtsee-ise-actions\">\n              <p-button type=\"submit\"\n                        [label]=\"editor.expanded.isNew ? 'Create' : 'Save'\"\n                        [loading]=\"editor.saveInProgress\"\n                        [disabled]=\"editor.busy\" />\n              <p-button label=\"Cancel\"\n                        severity=\"secondary\"\n                        (click)=\"editor.collapse()\"\n                        [disabled]=\"editor.busy\" />\n              @if (!editor.expanded.isNew) {\n                <span class=\"rtsee-ise-actions-spacer\"></span>\n                @if (canDetach) {\n                  <p-button label=\"Remove from story\"\n                            icon=\"pi pi-minus-circle\"\n                            severity=\"secondary\"\n                            [text]=\"true\"\n                            (click)=\"editor.detach(editor.expanded)\"\n                            [disabled]=\"editor.busy\" />\n                }\n                <p-button label=\"Delete\"\n                          icon=\"pi pi-trash\"\n                          severity=\"danger\"\n                          [text]=\"true\"\n                          [loading]=\"editor.removeInProgress\"\n                          (click)=\"editor.delete(editor.expanded)\"\n                          [disabled]=\"editor.busy\" />\n              }\n            </div>\n          </rtsee-form>\n        </div>\n      }\n    </div>\n  }\n</section>\n" }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { editor: [{
                 type: Input,
                 args: [{ required: true }]
@@ -4190,6 +4671,11 @@ class InteractiveStoryEditorComponent {
         this.cdr.markForCheck();
         try {
             await this.vm.updateSlideImage(slide, imageUrl);
+            // Reset illustrator state and UI
+            this.illustrator.resetState();
+            if (typeof window !== 'undefined') {
+                window.dispatchEvent(new CustomEvent(RTSeeIllustratorEvents.RESET_STATE));
+            }
         }
         catch (e) {
             console.error('Failed to apply image to slide:', e);