@rtsee/ngx 0.0.105 → 0.0.106

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

@@ -1,7 +1,7 @@
 import * as i0 from '@angular/core';
-import { Injectable, Input, Component, ViewChild, EventEmitter, Output, forwardRef, Directive, DOCUMENT, HostListener, Inject, output, CUSTOM_ELEMENTS_SCHEMA, NgModule } 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 * as i2$1 from '@angular/common';
-import { NgClass, NgIf, NgForOf, DatePipe, NgComponentOutlet, SlicePipe, JsonPipe, DOCUMENT as DOCUMENT$1, NgStyle, NgOptimizedImage, CommonModule } 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';
 import { FormsModule, FormGroup, FormControl, Validators, ReactiveFormsModule } from '@angular/forms';
 import { Select } from 'primeng/select';
@@ -9,7 +9,7 @@ import { FloatLabel } from 'primeng/floatlabel';
 import * as i4 from 'primeng/button';
 import { Button, ButtonModule } from 'primeng/button';
 import { interval, tap, map, filter } from 'rxjs';
-import { RTSeeTextLabelKeys, hasPermission, RTSeePeerPermissions } from '@rtsee/core';
+import { RTSeeTextLabelKeys, RTSeeCore, hasPermission, RTSeePeerPermissions } from '@rtsee/core';
 import * as i2$2 from 'primeng/message';
 import { Message, MessageModule } from 'primeng/message';
 import { AuthEndpointsKeys, LS_TOKEN_LABEL, LS_USER_LABEL, DEFAULT_ROUTE_NAMES } from '@rtsee/auth';
@@ -17,7 +17,7 @@ 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, RTSeeChatTypes, OzzyTaskStatus } from '@rtsee/common';
+import { RTSeeChatMemberRoles, RTSeeIllustratorEvents, RTSeeChatTypes, OzzyTaskStatus } from '@rtsee/common';
 import { ManageAgentForm, RTSeeForm, RTSeeFormFieldRadioGroup, RTSeeFormField, RTSeeFormFieldImageUploader, RTSeeRater } from '@rtsee/utilities-ui';
 import { InputText } from 'primeng/inputtext';
 import { InputGroup } from 'primeng/inputgroup';
@@ -45,6 +45,7 @@ import { MessageService } from 'primeng/api';
 import Swiper from 'swiper';
 import { EffectCards, Manipulation } from 'swiper/modules';
 import { OrderList } from 'primeng/orderlist';
+import { RTSeeIllustrator, RTSeeStoryEditorSection } from '@rtsee/presentation';
 import { Tabs, TabList, Tab, TabPanels, TabPanel } from 'primeng/tabs';
 import { ColorPicker } from 'primeng/colorpicker';
 import { Slider } from 'primeng/slider';
@@ -674,6 +675,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImpor
             }] } });
 
 class RTSeeImageUploaderComponent {
+    constructor(elementRef) {
+        this.elementRef = elementRef;
+        this.submittingFromPainting = false;
+    }
     ngOnInit() {
         this.attachEventHandlers();
     }
@@ -686,13 +691,91 @@ class RTSeeImageUploaderComponent {
     onImagesUploaded(response) {
         console.log(response);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: RTSeeImageUploaderComponent, deps: [], 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-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"] }] }); }
+    onPaintingIconClicked(event) {
+        event.stopPropagation();
+        event.preventDefault();
+        if (typeof window === 'undefined' || this.submittingFromPainting) {
+            return;
+        }
+        const requestId = RTSeeCore.uuidv4();
+        let handled = false;
+        const handleResponse = (response) => {
+            if (handled) {
+                return;
+            }
+            handled = true;
+            if (!response || !response.isLoaded) {
+                // 3. If RTSeeIllustrator is not loaded - do nothing
+                return;
+            }
+            if (response.reviewingGeneratedImage && response.imageUrl) {
+                // 1. If RTSeeIllustrator is in reviewingGeneratedImage mode, apply currently reviewed image to ImageUploader
+                this.submittingFromPainting = true;
+                this.imageUploader.applyImageUrl(response.imageUrl);
+                // and if Imageuploader is part of the form it should immediately submit the form
+                setTimeout(() => {
+                    this.submitParentForm();
+                    setTimeout(() => {
+                        this.submittingFromPainting = false;
+                    }, 1000);
+                }, 50);
+            }
+            // 2. If RTSeeIllustrator is not active, it expands and scrolls into view (handled by RTSeeIllustrator)
+        };
+        const responseListener = (e) => {
+            const customEvent = e;
+            if (!customEvent.detail || (customEvent.detail.requestId && customEvent.detail.requestId !== requestId)) {
+                return;
+            }
+            window.removeEventListener(RTSeeIllustratorEvents.CURRENT_IMAGE_RESPONSE, responseListener);
+            clearTimeout(timer);
+            handleResponse(customEvent.detail);
+        };
+        window.addEventListener(RTSeeIllustratorEvents.CURRENT_IMAGE_RESPONSE, responseListener);
+        const timer = setTimeout(() => {
+            window.removeEventListener(RTSeeIllustratorEvents.CURRENT_IMAGE_RESPONSE, responseListener);
+        }, 600);
+        window.dispatchEvent(new CustomEvent(RTSeeIllustratorEvents.GET_CURRENT_IMAGE, {
+            detail: {
+                requestId,
+                callback: (res) => {
+                    window.removeEventListener(RTSeeIllustratorEvents.CURRENT_IMAGE_RESPONSE, responseListener);
+                    clearTimeout(timer);
+                    handleResponse(res);
+                },
+            },
+        }));
+    }
+    submitParentForm() {
+        try {
+            // 1. Native HTML form submit so Angular (ngSubmit) / (formSubmit) fires
+            const formEl = this.elementRef.nativeElement.closest('form');
+            if (formEl) {
+                if (typeof formEl.requestSubmit === 'function') {
+                    formEl.requestSubmit();
+                    return;
+                }
+                else {
+                    formEl.dispatchEvent(new Event('submit', { bubbles: true, cancelable: true }));
+                    return;
+                }
+            }
+            // 2. Programmatic RTSeeForm submit
+            if (this.imageUploader.form && typeof this.imageUploader.form.submit === 'function') {
+                this.imageUploader.form.submit();
+            }
+        }
+        catch (e) {
+            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"] }] }); }
 }
 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-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" }]
-        }], propDecorators: { cropperComponent: [{
+            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: [{
                 type: ViewChild,
                 args: [RTSeeCropperComponent]
             }], imageUploader: [{
@@ -3042,10 +3125,14 @@ class ChatComponent {
             });
             this.chat.loadRemoteMessages('back');
         }
+        this.chat?.broadcastAgents();
     }
     ngOnDestroy() {
-        if (this.chat.isStandalone) {
-            this.messenger.removeStandaloneChat(this.chat.id);
+        if (this.chat) {
+            this.chat.unbindIllustratorEvents();
+            if (this.chat.isStandalone) {
+                this.messenger.removeStandaloneChat(this.chat.id);
+            }
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: ChatComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
@@ -3835,16 +3922,393 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImpor
                 type: Input
             }] } });
 
+/**
+ * Collapsible section rendering the thumbnails of one kind of story element
+ * (characters / artifacts / locations) and the expanded edit form.
+ * All the logic lives in RTSeeStoryElementsEditor.
+ */
+class StoryElementsSectionComponent {
+    constructor() {
+        this.icon = "pi pi-box";
+        this.collapsed = false;
+        this.canDetach = true;
+        this.toggled = new EventEmitter();
+    }
+    submit() {
+        this.editor.submit();
+    }
+    addToIllustrator(event, item) {
+        event.stopPropagation();
+        event.preventDefault();
+        if (typeof window !== 'undefined') {
+            window.dispatchEvent(new CustomEvent(RTSeeIllustratorEvents.ADD_IMAGE_TO_CONTEXT, {
+                detail: {
+                    id: item.id,
+                    title: item.name || this.editor.label,
+                    imageUrl: item.imageUrl || '',
+                    visualDescription: item.visualDescription || item.description || '',
+                    description: item.description || '',
+                    sourceType: this.editor.section,
+                },
+            }));
+        }
+    }
+    trackById(index, item) {
+        return item.id || `new-${index}`;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: StoryElementsSectionComponent, deps: [], 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" }, 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          </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"] }] }); }
+}
+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          </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" }]
+        }], propDecorators: { editor: [{
+                type: Input,
+                args: [{ required: true }]
+            }], title: [{
+                type: Input,
+                args: [{ required: true }]
+            }], icon: [{
+                type: Input
+            }], collapsed: [{
+                type: Input
+            }], canDetach: [{
+                type: Input
+            }], toggled: [{
+                type: Output
+            }] } });
+
+class IllustratorComponent {
+    constructor(cdr, elementRef) {
+        this.cdr = cdr;
+        this.elementRef = elementRef;
+        this.ownIllustrator = false;
+        this.aspectRatios = ['1:1', '4:3', '3:4', '16:9', '9:16', '3:2', '2:3'];
+        this.styles = [
+            'Classic Fairy Tale pixel-art Storybook',
+            'Whimsical Watercolor & Ink',
+            'Golden Age Storybook Illustration',
+            'Enchanted Fantasy Digital Art',
+            'Vibrant Children\'s Book Illustration',
+            'Ethereal Oil Painting',
+        ];
+        this.moods = [
+            'Dreamy & Magical',
+            'Warm, Cozy & Hearth-lit',
+            'Epic, Wonder-filled & Adventurous',
+            'Mysterious & Enchanted',
+            'Playful & Charming',
+            'Dark Fantasy & Gothic',
+        ];
+        this.lightings = [
+            'Soft Diffused Storybook Glow',
+            'Golden Hour Sunbeams & Dappled Rays',
+            'Twilight Starlight & Fireflies',
+            'Cozy Candlelight & Lantern Glow',
+            'Dramatic Volumetric Rays',
+            'Moonlit Midnight Glow',
+        ];
+        this.onIllustratorChanged = () => {
+            this.cdr.markForCheck();
+        };
+        this.onScrollIntoView = () => {
+            this.cdr.markForCheck();
+            setTimeout(() => {
+                this.elementRef.nativeElement.scrollIntoView({ behavior: 'smooth', block: 'center' });
+            }, 60);
+        };
+    }
+    ngOnInit() {
+        if (!this.illustrator) {
+            this.illustrator = new RTSeeIllustrator();
+            this.ownIllustrator = true;
+        }
+        this.illustrator.on('changed', this.onIllustratorChanged);
+        this.illustrator.on('scroll-into-view', this.onScrollIntoView);
+        this.illustrator.requestAgents();
+    }
+    ngOnDestroy() {
+        if (this.illustrator) {
+            this.illustrator.off('changed', this.onIllustratorChanged);
+            this.illustrator.off('scroll-into-view', this.onScrollIntoView);
+            if (this.ownIllustrator) {
+                this.illustrator.destroy();
+            }
+        }
+    }
+    toggleExpand() {
+        this.illustrator.toggleExpand();
+    }
+    toggleConfig() {
+        this.illustrator.toggleConfig();
+    }
+    onSelectAgent(event) {
+        const target = event.target;
+        if (target?.value) {
+            this.illustrator.selectAgent(target.value);
+        }
+    }
+    refreshAgents() {
+        this.illustrator.requestAgents();
+    }
+    removeImage(id) {
+        this.illustrator.removeContextImage(id);
+    }
+    toggleActive(image) {
+        this.illustrator.toggleImageActive(image.id);
+    }
+    discardGeneratedImage() {
+        this.illustrator.discardGeneratedImage();
+    }
+    acceptGeneratedImage() {
+        this.illustrator.acceptGeneratedImage();
+    }
+    submitIteration() {
+        this.illustrator.submitIteration();
+    }
+    submitPrompt() {
+        this.illustrator.submitPrompt();
+    }
+    trackByImageId(index, item) {
+        return item.id || `context-img-${index}`;
+    }
+    trackByAgentId(index, item) {
+        return item.id || `agent-${index}`;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: IllustratorComponent, 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: IllustratorComponent, isStandalone: true, selector: "rtsee-illustrator", inputs: { illustrator: "illustrator" }, ngImport: i0, template: "<div class=\"rtsee-illustrator-container\" [ngClass]=\"{ 'rtsee-illustrator--expanded': illustrator.expanded }\">\n  <!-- Collapsed Bottom Bar -->\n  @if (!illustrator.expanded) {\n    <div class=\"rtsee-illustrator-collapsed-bar\" (click)=\"toggleExpand()\">\n      <div class=\"rtsee-illustrator-collapsed-info\">\n        <div class=\"rtsee-illustrator-badge-icon\">\n          <i class=\"pi pi-palette\"></i>\n        </div>\n        <div class=\"rtsee-illustrator-collapsed-title\">\n          <span class=\"rtsee-illustrator-brand-text\">NanoBanana Illustrator</span>\n          @if (illustrator.activeAgent) {\n            <span class=\"rtsee-illustrator-agent-pill\">\n              <i class=\"pi pi-bolt\"></i>\n              {{ illustrator.activeAgent.name }}\n            </span>\n          } @else {\n            <span class=\"rtsee-illustrator-agent-pill rtsee-illustrator-agent-pill--waiting\">\n              <i class=\"pi pi-spin pi-spinner\"></i>\n              Waiting for Chat Agent...\n            </span>\n          }\n        </div>\n      </div>\n\n      <div class=\"rtsee-illustrator-collapsed-meta\">\n        @if (illustrator.reviewingGeneratedImage && illustrator.currentGeneratedImageUrl) {\n          <span class=\"rtsee-illustrator-collapsed-review-pill\">\n            <img [src]=\"illustrator.currentGeneratedImageUrl\" alt=\"Draft\" class=\"rtsee-illustrator-collapsed-thumb\" />\n            <span>\u2728 Reviewing Draft</span>\n          </span>\n        }\n        @if (illustrator.contextImages.length > 0) {\n          <span class=\"rtsee-illustrator-context-count\">\n            <i class=\"pi pi-images\"></i>\n            {{ illustrator.activeContextImages.length }} / {{ illustrator.contextImages.length }} context refs\n          </span>\n        }\n        @if (illustrator.prompt) {\n          <span class=\"rtsee-illustrator-prompt-preview\">\n            \"{{ illustrator.prompt.length > 50 ? (illustrator.prompt | slice:0:50) + '\u2026' : illustrator.prompt }}\"\n          </span>\n        }\n        <button type=\"button\" class=\"rtsee-illustrator-expand-btn\" aria-label=\"Expand Illustrator\">\n          <i class=\"pi pi-chevron-up\"></i>\n        </button>\n      </div>\n    </div>\n  }\n\n  <!-- Expanded Drawer -->\n  @if (illustrator.expanded) {\n    <div class=\"rtsee-illustrator-expanded-panel\">\n      <!-- Header -->\n      <header class=\"rtsee-illustrator-header\">\n        <div class=\"rtsee-illustrator-title-group\">\n          <div class=\"rtsee-illustrator-icon-circle\">\n            <i class=\"pi pi-palette\"></i>\n          </div>\n          <div>\n            <h3 class=\"rtsee-illustrator-heading\">NanoBanana Illustrator</h3>\n            <p class=\"rtsee-illustrator-subheading\">Generate enchanted fairy tale visuals with rich contextual styling</p>\n          </div>\n        </div>\n\n        <div class=\"rtsee-illustrator-header-controls\">\n          <!-- Agent Picker -->\n          <div class=\"rtsee-illustrator-agent-select-wrapper\">\n            <label class=\"rtsee-illustrator-agent-label\" for=\"rtsee-illustrator-agent-select\">\n              <i class=\"pi pi-sparkles\"></i> Agent:\n            </label>\n            @if (illustrator.agents.length > 0) {\n              <select\n                id=\"rtsee-illustrator-agent-select\"\n                class=\"rtsee-illustrator-select\"\n                [value]=\"illustrator.activeAgentId || ''\"\n                (change)=\"onSelectAgent($event)\"\n              >\n                @for (agent of illustrator.agents; track trackByAgentId($index, agent)) {\n                  <option [value]=\"agent.id\">\n                    {{ agent.name }} {{ agent.model ? '(' + agent.model + ')' : '' }}\n                  </option>\n                }\n              </select>\n            } @else {\n              <button\n                type=\"button\"\n                class=\"rtsee-illustrator-btn-mini\"\n                (click)=\"refreshAgents()\"\n                title=\"Query active agents from RTSeeChat\"\n              >\n                <i class=\"pi pi-refresh\"></i>\n                <span>Connect RTSeeChat</span>\n              </button>\n            }\n          </div>\n\n          <!-- Config Toggle Button -->\n          <button\n            type=\"button\"\n            class=\"rtsee-illustrator-header-btn\"\n            [ngClass]=\"{ 'rtsee-illustrator-header-btn--active': illustrator.configExpanded }\"\n            (click)=\"toggleConfig()\"\n            title=\"Toggle NanoBanana Configuration\"\n          >\n            <i class=\"pi pi-sliders-h\"></i>\n            <span>Config</span>\n            <i class=\"pi\" [ngClass]=\"illustrator.configExpanded ? 'pi-chevron-up' : 'pi-chevron-down'\"></i>\n          </button>\n\n          <!-- Collapse Drawer Button -->\n          <button\n            type=\"button\"\n            class=\"rtsee-illustrator-header-btn rtsee-illustrator-header-btn--close\"\n            (click)=\"toggleExpand()\"\n            aria-label=\"Collapse Illustrator\"\n          >\n            <i class=\"pi pi-times\"></i>\n          </button>\n        </div>\n      </header>\n\n      <!-- Collapsible Config Section -->\n      @if (illustrator.configExpanded) {\n        <div class=\"rtsee-illustrator-config-panel\">\n          <div class=\"rtsee-illustrator-config-grid\">\n            <!-- Aspect Ratio -->\n            <div class=\"rtsee-illustrator-config-item\">\n              <label class=\"rtsee-illustrator-field-label\" for=\"cfg-aspect-ratio\">\n                <i class=\"pi pi-stop\"></i> Aspect Ratio (Default 1:1)\n              </label>\n              <select\n                id=\"cfg-aspect-ratio\"\n                class=\"rtsee-illustrator-select\"\n                [(ngModel)]=\"illustrator.config.aspectRatio\"\n              >\n                @for (ratio of aspectRatios; track ratio) {\n                  <option [value]=\"ratio\">{{ ratio }}{{ ratio === '1:1' ? ' (Square - Fairy Tale Default)' : '' }}</option>\n                }\n              </select>\n            </div>\n\n            <!-- Style Preset -->\n            <div class=\"rtsee-illustrator-config-item\">\n              <label class=\"rtsee-illustrator-field-label\" for=\"cfg-style\">\n                <i class=\"pi pi-paint-brush\"></i> Illustration Style\n              </label>\n              <select\n                id=\"cfg-style\"\n                class=\"rtsee-illustrator-select\"\n                [(ngModel)]=\"illustrator.config.style\"\n              >\n                @for (s of styles; track s) {\n                  <option [value]=\"s\">{{ s }}</option>\n                }\n              </select>\n            </div>\n\n            <!-- Mood Preset -->\n            <div class=\"rtsee-illustrator-config-item\">\n              <label class=\"rtsee-illustrator-field-label\" for=\"cfg-mood\">\n                <i class=\"pi pi-heart\"></i> Mood & Atmosphere\n              </label>\n              <select\n                id=\"cfg-mood\"\n                class=\"rtsee-illustrator-select\"\n                [(ngModel)]=\"illustrator.config.mood\"\n              >\n                @for (m of moods; track m) {\n                  <option [value]=\"m\">{{ m }}</option>\n                }\n              </select>\n            </div>\n\n            <!-- Lighting Preset -->\n            <div class=\"rtsee-illustrator-config-item\">\n              <label class=\"rtsee-illustrator-field-label\" for=\"cfg-lighting\">\n                <i class=\"pi pi-sun\"></i> Lighting\n              </label>\n              <select\n                id=\"cfg-lighting\"\n                class=\"rtsee-illustrator-select\"\n                [(ngModel)]=\"illustrator.config.lighting\"\n              >\n                @for (l of lightings; track l) {\n                  <option [value]=\"l\">{{ l }}</option>\n                }\n              </select>\n            </div>\n          </div>\n\n          <!-- Negative Prompt -->\n          <div class=\"rtsee-illustrator-config-item rtsee-illustrator-config-item--full\">\n            <label class=\"rtsee-illustrator-field-label\" for=\"cfg-negative-prompt\">\n              <i class=\"pi pi-ban\"></i> Negative Prompt (What to exclude)\n            </label>\n            <input\n              id=\"cfg-negative-prompt\"\n              type=\"text\"\n              class=\"rtsee-illustrator-input\"\n              [(ngModel)]=\"illustrator.config.negativePrompt\"\n              placeholder=\"e.g. modern items, cars, text, watermark, blurry...\"\n            />\n          </div>\n        </div>\n      }\n\n      <!-- Context Images Section -->\n      @if (illustrator.contextImages.length > 0) {\n        <div class=\"rtsee-illustrator-context-section\">\n          <div class=\"rtsee-illustrator-section-header\">\n            <span class=\"rtsee-illustrator-section-title\">\n              <i class=\"pi pi-images\"></i> Story Context References ({{ illustrator.activeContextImages.length }} of {{ illustrator.contextImages.length }} active)\n            </span>\n            <button\n              type=\"button\"\n              class=\"rtsee-illustrator-btn-text\"\n              (click)=\"illustrator.clearContext()\"\n              title=\"Clear all context references\"\n            >\n              <i class=\"pi pi-trash\"></i> Clear All\n            </button>\n          </div>\n\n          <div class=\"rtsee-illustrator-context-cards\">\n            @for (img of illustrator.contextImages; track trackByImageId($index, img)) {\n              <div class=\"rtsee-illustrator-context-card\" [ngClass]=\"{ 'rtsee-illustrator-context-card--inactive': !img.active }\">\n                <!-- Thumbnail & Active Checkbox -->\n                <div class=\"rtsee-illustrator-card-thumb-col\">\n                  <div class=\"rtsee-illustrator-card-thumb-wrapper\">\n                    @if (img.imageUrl) {\n                      <img [src]=\"img.imageUrl\" [alt]=\"img.title\" class=\"rtsee-illustrator-card-img\" />\n                    } @else {\n                      <div class=\"rtsee-illustrator-card-no-img\">\n                        <i class=\"pi pi-image\"></i>\n                      </div>\n                    }\n                  </div>\n                  <label class=\"rtsee-illustrator-checkbox-label\">\n                    <input\n                      type=\"checkbox\"\n                      [checked]=\"img.active !== false\"\n                      (change)=\"toggleActive(img)\"\n                    />\n                    <span>Active</span>\n                  </label>\n                </div>\n\n                <!-- Editable Fields -->\n                <div class=\"rtsee-illustrator-card-fields\">\n                  <div class=\"rtsee-illustrator-card-header\">\n                    <span class=\"rtsee-illustrator-source-badge\">{{ img.sourceType || 'reference' }}</span>\n                    <input\n                      type=\"text\"\n                      class=\"rtsee-illustrator-card-title-input\"\n                      [(ngModel)]=\"img.title\"\n                      placeholder=\"Reference title...\"\n                    />\n                    <button\n                      type=\"button\"\n                      class=\"rtsee-illustrator-card-remove-btn\"\n                      (click)=\"removeImage(img.id)\"\n                      aria-label=\"Remove image from context\"\n                      title=\"Remove from context\"\n                    >\n                      <i class=\"pi pi-times\"></i>\n                    </button>\n                  </div>\n\n                  <div class=\"rtsee-illustrator-card-inputs-grid\">\n                    <div class=\"rtsee-illustrator-input-group\">\n                      <label class=\"rtsee-illustrator-input-sublabel\">Visual Description (Style / Appearance):</label>\n                      <textarea\n                        class=\"rtsee-illustrator-card-textarea\"\n                        rows=\"2\"\n                        [(ngModel)]=\"img.visualDescription\"\n                        placeholder=\"Key visual features, colors, clothing, texture, lighting...\"\n                      ></textarea>\n                    </div>\n                    <div class=\"rtsee-illustrator-input-group\">\n                      <label class=\"rtsee-illustrator-input-sublabel\">Context / Role Description:</label>\n                      <textarea\n                        class=\"rtsee-illustrator-card-textarea\"\n                        rows=\"2\"\n                        [(ngModel)]=\"img.description\"\n                        placeholder=\"Context or lore in this fairy tale scene...\"\n                      ></textarea>\n                    </div>\n                  </div>\n                </div>\n              </div>\n            }\n          </div>\n        </div>\n      }\n\n      <!-- Generation Error Banner -->\n      @if (illustrator.generationError) {\n        <div class=\"rtsee-illustrator-error-banner\">\n          <i class=\"pi pi-exclamation-triangle\"></i>\n          <span class=\"rtsee-illustrator-error-text\">{{ illustrator.generationError }}</span>\n          <button type=\"button\" class=\"rtsee-illustrator-error-close\" (click)=\"illustrator.generationError = null\" aria-label=\"Dismiss error\">\n            <i class=\"pi pi-times\"></i>\n          </button>\n        </div>\n      }\n\n      <!-- Reviewing Generated Image Mode -->\n      @if (illustrator.reviewingGeneratedImage && illustrator.currentGeneratedImageUrl) {\n        <div class=\"rtsee-illustrator-review-panel\">\n          <div class=\"rtsee-illustrator-review-header\">\n            <div class=\"rtsee-illustrator-review-title\">\n              <span class=\"rtsee-illustrator-review-badge\">\n                <i class=\"pi pi-sparkles\"></i> Reviewing Generated Image\n              </span>\n              <span class=\"rtsee-illustrator-review-sub\">Review the result, request iterative modifications, or discard.</span>\n            </div>\n            <div class=\"rtsee-illustrator-review-quick-actions\">\n              <p-button\n                label=\"Accept & Keep\"\n                icon=\"pi pi-check\"\n                severity=\"success\"\n                (click)=\"acceptGeneratedImage()\"\n              />\n              <p-button\n                label=\"Discard\"\n                icon=\"pi pi-trash\"\n                severity=\"danger\"\n                [text]=\"true\"\n                (click)=\"discardGeneratedImage()\"\n              />\n            </div>\n          </div>\n\n          <!-- Image Preview -->\n          <div class=\"rtsee-illustrator-preview-box\">\n            <img [src]=\"illustrator.currentGeneratedImageUrl\" alt=\"Generated fairy tale illustration\" class=\"rtsee-illustrator-preview-img\" />\n            <a [href]=\"illustrator.currentGeneratedImageUrl\" target=\"_blank\" rel=\"noopener\" class=\"rtsee-illustrator-preview-zoom-btn\" title=\"Open full image in new tab\">\n              <i class=\"pi pi-external-link\"></i> Full View\n            </a>\n          </div>\n\n          <!-- Iteration Modification Controls -->\n          <div class=\"rtsee-illustrator-iteration-box\">\n            <div class=\"rtsee-illustrator-iteration-info\">\n              <span class=\"rtsee-illustrator-iteration-tag\">\n                <i class=\"pi pi-refresh\"></i> Request Modifications & Iterate\n              </span>\n              <span class=\"rtsee-illustrator-iteration-context-hint\">\n                <i class=\"pi pi-info-circle\"></i>\n                All active context references ({{ illustrator.activeContextImages.length }}) are sent to NanoBanana alongside this base picture.\n              </span>\n            </div>\n\n            <textarea\n              class=\"rtsee-illustrator-prompt-textarea rtsee-illustrator-prompt-textarea--iteration\"\n              rows=\"3\"\n              [(ngModel)]=\"illustrator.iterationPrompt\"\n              placeholder=\"Describe modifications to apply to this picture (e.g. 'Make the wizard's cloak sapphire blue with silver runes, add glowing fireflies, soften the background trees')...\"\n              (keydown.meta.enter)=\"submitIteration()\"\n              (keydown.control.enter)=\"submitIteration()\"\n            ></textarea>\n\n            <div class=\"rtsee-illustrator-prompt-footer\">\n              <span class=\"rtsee-illustrator-tip\">\n                <i class=\"pi pi-info-circle\"></i>\n                Press <strong>\u2318+Enter</strong> to iterate on this picture.\n              </span>\n\n              <div class=\"rtsee-illustrator-actions\">\n                <p-button\n                  label=\"Discard\"\n                  icon=\"pi pi-trash\"\n                  severity=\"danger\"\n                  [text]=\"true\"\n                  (click)=\"discardGeneratedImage()\"\n                />\n                <p-button\n                  label=\"Iterate & Regenerate\"\n                  icon=\"pi pi-refresh\"\n                  [loading]=\"illustrator.submitting\"\n                  [disabled]=\"!illustrator.canSubmit\"\n                  (click)=\"submitIteration()\"\n                />\n              </div>\n            </div>\n          </div>\n        </div>\n      } @else {\n        <!-- Prompt Input & Submit Action (Standard Mode) -->\n        <div class=\"rtsee-illustrator-prompt-section\">\n          <div class=\"rtsee-illustrator-prompt-box\">\n            <textarea\n              class=\"rtsee-illustrator-prompt-textarea\"\n              rows=\"3\"\n              [(ngModel)]=\"illustrator.prompt\"\n              placeholder=\"Describe the fairy tale illustration to generate (e.g. 'A cozy cottage tucked deep inside the emerald moss woods, magical amber lanterns glowing warmly from the windows, soft fireflies in the air')...\"\n              (keydown.meta.enter)=\"submitPrompt()\"\n              (keydown.control.enter)=\"submitPrompt()\"\n            ></textarea>\n\n            <div class=\"rtsee-illustrator-prompt-footer\">\n              <span class=\"rtsee-illustrator-tip\">\n                <i class=\"pi pi-info-circle\"></i>\n                Press <strong>\u2318+Enter</strong> to submit. Context characters, artifacts, locations & slides are sent to NanoBanana.\n              </span>\n\n              <div class=\"rtsee-illustrator-actions\">\n                <p-button\n                  label=\"Generate Illustration\"\n                  icon=\"pi pi-sparkles\"\n                  [loading]=\"illustrator.submitting\"\n                  [disabled]=\"!illustrator.canSubmit\"\n                  (click)=\"submitPrompt()\"\n                />\n              </div>\n            </div>\n          </div>\n        </div>\n      }\n    </div>\n  }\n</div>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: FormsModule }, { 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.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: "pipe", type: i2$1.SlicePipe, name: "slice" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: IllustratorComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'rtsee-illustrator', standalone: true, imports: [CommonModule, FormsModule, Button, Checkbox, Textarea], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"rtsee-illustrator-container\" [ngClass]=\"{ 'rtsee-illustrator--expanded': illustrator.expanded }\">\n  <!-- Collapsed Bottom Bar -->\n  @if (!illustrator.expanded) {\n    <div class=\"rtsee-illustrator-collapsed-bar\" (click)=\"toggleExpand()\">\n      <div class=\"rtsee-illustrator-collapsed-info\">\n        <div class=\"rtsee-illustrator-badge-icon\">\n          <i class=\"pi pi-palette\"></i>\n        </div>\n        <div class=\"rtsee-illustrator-collapsed-title\">\n          <span class=\"rtsee-illustrator-brand-text\">NanoBanana Illustrator</span>\n          @if (illustrator.activeAgent) {\n            <span class=\"rtsee-illustrator-agent-pill\">\n              <i class=\"pi pi-bolt\"></i>\n              {{ illustrator.activeAgent.name }}\n            </span>\n          } @else {\n            <span class=\"rtsee-illustrator-agent-pill rtsee-illustrator-agent-pill--waiting\">\n              <i class=\"pi pi-spin pi-spinner\"></i>\n              Waiting for Chat Agent...\n            </span>\n          }\n        </div>\n      </div>\n\n      <div class=\"rtsee-illustrator-collapsed-meta\">\n        @if (illustrator.reviewingGeneratedImage && illustrator.currentGeneratedImageUrl) {\n          <span class=\"rtsee-illustrator-collapsed-review-pill\">\n            <img [src]=\"illustrator.currentGeneratedImageUrl\" alt=\"Draft\" class=\"rtsee-illustrator-collapsed-thumb\" />\n            <span>\u2728 Reviewing Draft</span>\n          </span>\n        }\n        @if (illustrator.contextImages.length > 0) {\n          <span class=\"rtsee-illustrator-context-count\">\n            <i class=\"pi pi-images\"></i>\n            {{ illustrator.activeContextImages.length }} / {{ illustrator.contextImages.length }} context refs\n          </span>\n        }\n        @if (illustrator.prompt) {\n          <span class=\"rtsee-illustrator-prompt-preview\">\n            \"{{ illustrator.prompt.length > 50 ? (illustrator.prompt | slice:0:50) + '\u2026' : illustrator.prompt }}\"\n          </span>\n        }\n        <button type=\"button\" class=\"rtsee-illustrator-expand-btn\" aria-label=\"Expand Illustrator\">\n          <i class=\"pi pi-chevron-up\"></i>\n        </button>\n      </div>\n    </div>\n  }\n\n  <!-- Expanded Drawer -->\n  @if (illustrator.expanded) {\n    <div class=\"rtsee-illustrator-expanded-panel\">\n      <!-- Header -->\n      <header class=\"rtsee-illustrator-header\">\n        <div class=\"rtsee-illustrator-title-group\">\n          <div class=\"rtsee-illustrator-icon-circle\">\n            <i class=\"pi pi-palette\"></i>\n          </div>\n          <div>\n            <h3 class=\"rtsee-illustrator-heading\">NanoBanana Illustrator</h3>\n            <p class=\"rtsee-illustrator-subheading\">Generate enchanted fairy tale visuals with rich contextual styling</p>\n          </div>\n        </div>\n\n        <div class=\"rtsee-illustrator-header-controls\">\n          <!-- Agent Picker -->\n          <div class=\"rtsee-illustrator-agent-select-wrapper\">\n            <label class=\"rtsee-illustrator-agent-label\" for=\"rtsee-illustrator-agent-select\">\n              <i class=\"pi pi-sparkles\"></i> Agent:\n            </label>\n            @if (illustrator.agents.length > 0) {\n              <select\n                id=\"rtsee-illustrator-agent-select\"\n                class=\"rtsee-illustrator-select\"\n                [value]=\"illustrator.activeAgentId || ''\"\n                (change)=\"onSelectAgent($event)\"\n              >\n                @for (agent of illustrator.agents; track trackByAgentId($index, agent)) {\n                  <option [value]=\"agent.id\">\n                    {{ agent.name }} {{ agent.model ? '(' + agent.model + ')' : '' }}\n                  </option>\n                }\n              </select>\n            } @else {\n              <button\n                type=\"button\"\n                class=\"rtsee-illustrator-btn-mini\"\n                (click)=\"refreshAgents()\"\n                title=\"Query active agents from RTSeeChat\"\n              >\n                <i class=\"pi pi-refresh\"></i>\n                <span>Connect RTSeeChat</span>\n              </button>\n            }\n          </div>\n\n          <!-- Config Toggle Button -->\n          <button\n            type=\"button\"\n            class=\"rtsee-illustrator-header-btn\"\n            [ngClass]=\"{ 'rtsee-illustrator-header-btn--active': illustrator.configExpanded }\"\n            (click)=\"toggleConfig()\"\n            title=\"Toggle NanoBanana Configuration\"\n          >\n            <i class=\"pi pi-sliders-h\"></i>\n            <span>Config</span>\n            <i class=\"pi\" [ngClass]=\"illustrator.configExpanded ? 'pi-chevron-up' : 'pi-chevron-down'\"></i>\n          </button>\n\n          <!-- Collapse Drawer Button -->\n          <button\n            type=\"button\"\n            class=\"rtsee-illustrator-header-btn rtsee-illustrator-header-btn--close\"\n            (click)=\"toggleExpand()\"\n            aria-label=\"Collapse Illustrator\"\n          >\n            <i class=\"pi pi-times\"></i>\n          </button>\n        </div>\n      </header>\n\n      <!-- Collapsible Config Section -->\n      @if (illustrator.configExpanded) {\n        <div class=\"rtsee-illustrator-config-panel\">\n          <div class=\"rtsee-illustrator-config-grid\">\n            <!-- Aspect Ratio -->\n            <div class=\"rtsee-illustrator-config-item\">\n              <label class=\"rtsee-illustrator-field-label\" for=\"cfg-aspect-ratio\">\n                <i class=\"pi pi-stop\"></i> Aspect Ratio (Default 1:1)\n              </label>\n              <select\n                id=\"cfg-aspect-ratio\"\n                class=\"rtsee-illustrator-select\"\n                [(ngModel)]=\"illustrator.config.aspectRatio\"\n              >\n                @for (ratio of aspectRatios; track ratio) {\n                  <option [value]=\"ratio\">{{ ratio }}{{ ratio === '1:1' ? ' (Square - Fairy Tale Default)' : '' }}</option>\n                }\n              </select>\n            </div>\n\n            <!-- Style Preset -->\n            <div class=\"rtsee-illustrator-config-item\">\n              <label class=\"rtsee-illustrator-field-label\" for=\"cfg-style\">\n                <i class=\"pi pi-paint-brush\"></i> Illustration Style\n              </label>\n              <select\n                id=\"cfg-style\"\n                class=\"rtsee-illustrator-select\"\n                [(ngModel)]=\"illustrator.config.style\"\n              >\n                @for (s of styles; track s) {\n                  <option [value]=\"s\">{{ s }}</option>\n                }\n              </select>\n            </div>\n\n            <!-- Mood Preset -->\n            <div class=\"rtsee-illustrator-config-item\">\n              <label class=\"rtsee-illustrator-field-label\" for=\"cfg-mood\">\n                <i class=\"pi pi-heart\"></i> Mood & Atmosphere\n              </label>\n              <select\n                id=\"cfg-mood\"\n                class=\"rtsee-illustrator-select\"\n                [(ngModel)]=\"illustrator.config.mood\"\n              >\n                @for (m of moods; track m) {\n                  <option [value]=\"m\">{{ m }}</option>\n                }\n              </select>\n            </div>\n\n            <!-- Lighting Preset -->\n            <div class=\"rtsee-illustrator-config-item\">\n              <label class=\"rtsee-illustrator-field-label\" for=\"cfg-lighting\">\n                <i class=\"pi pi-sun\"></i> Lighting\n              </label>\n              <select\n                id=\"cfg-lighting\"\n                class=\"rtsee-illustrator-select\"\n                [(ngModel)]=\"illustrator.config.lighting\"\n              >\n                @for (l of lightings; track l) {\n                  <option [value]=\"l\">{{ l }}</option>\n                }\n              </select>\n            </div>\n          </div>\n\n          <!-- Negative Prompt -->\n          <div class=\"rtsee-illustrator-config-item rtsee-illustrator-config-item--full\">\n            <label class=\"rtsee-illustrator-field-label\" for=\"cfg-negative-prompt\">\n              <i class=\"pi pi-ban\"></i> Negative Prompt (What to exclude)\n            </label>\n            <input\n              id=\"cfg-negative-prompt\"\n              type=\"text\"\n              class=\"rtsee-illustrator-input\"\n              [(ngModel)]=\"illustrator.config.negativePrompt\"\n              placeholder=\"e.g. modern items, cars, text, watermark, blurry...\"\n            />\n          </div>\n        </div>\n      }\n\n      <!-- Context Images Section -->\n      @if (illustrator.contextImages.length > 0) {\n        <div class=\"rtsee-illustrator-context-section\">\n          <div class=\"rtsee-illustrator-section-header\">\n            <span class=\"rtsee-illustrator-section-title\">\n              <i class=\"pi pi-images\"></i> Story Context References ({{ illustrator.activeContextImages.length }} of {{ illustrator.contextImages.length }} active)\n            </span>\n            <button\n              type=\"button\"\n              class=\"rtsee-illustrator-btn-text\"\n              (click)=\"illustrator.clearContext()\"\n              title=\"Clear all context references\"\n            >\n              <i class=\"pi pi-trash\"></i> Clear All\n            </button>\n          </div>\n\n          <div class=\"rtsee-illustrator-context-cards\">\n            @for (img of illustrator.contextImages; track trackByImageId($index, img)) {\n              <div class=\"rtsee-illustrator-context-card\" [ngClass]=\"{ 'rtsee-illustrator-context-card--inactive': !img.active }\">\n                <!-- Thumbnail & Active Checkbox -->\n                <div class=\"rtsee-illustrator-card-thumb-col\">\n                  <div class=\"rtsee-illustrator-card-thumb-wrapper\">\n                    @if (img.imageUrl) {\n                      <img [src]=\"img.imageUrl\" [alt]=\"img.title\" class=\"rtsee-illustrator-card-img\" />\n                    } @else {\n                      <div class=\"rtsee-illustrator-card-no-img\">\n                        <i class=\"pi pi-image\"></i>\n                      </div>\n                    }\n                  </div>\n                  <label class=\"rtsee-illustrator-checkbox-label\">\n                    <input\n                      type=\"checkbox\"\n                      [checked]=\"img.active !== false\"\n                      (change)=\"toggleActive(img)\"\n                    />\n                    <span>Active</span>\n                  </label>\n                </div>\n\n                <!-- Editable Fields -->\n                <div class=\"rtsee-illustrator-card-fields\">\n                  <div class=\"rtsee-illustrator-card-header\">\n                    <span class=\"rtsee-illustrator-source-badge\">{{ img.sourceType || 'reference' }}</span>\n                    <input\n                      type=\"text\"\n                      class=\"rtsee-illustrator-card-title-input\"\n                      [(ngModel)]=\"img.title\"\n                      placeholder=\"Reference title...\"\n                    />\n                    <button\n                      type=\"button\"\n                      class=\"rtsee-illustrator-card-remove-btn\"\n                      (click)=\"removeImage(img.id)\"\n                      aria-label=\"Remove image from context\"\n                      title=\"Remove from context\"\n                    >\n                      <i class=\"pi pi-times\"></i>\n                    </button>\n                  </div>\n\n                  <div class=\"rtsee-illustrator-card-inputs-grid\">\n                    <div class=\"rtsee-illustrator-input-group\">\n                      <label class=\"rtsee-illustrator-input-sublabel\">Visual Description (Style / Appearance):</label>\n                      <textarea\n                        class=\"rtsee-illustrator-card-textarea\"\n                        rows=\"2\"\n                        [(ngModel)]=\"img.visualDescription\"\n                        placeholder=\"Key visual features, colors, clothing, texture, lighting...\"\n                      ></textarea>\n                    </div>\n                    <div class=\"rtsee-illustrator-input-group\">\n                      <label class=\"rtsee-illustrator-input-sublabel\">Context / Role Description:</label>\n                      <textarea\n                        class=\"rtsee-illustrator-card-textarea\"\n                        rows=\"2\"\n                        [(ngModel)]=\"img.description\"\n                        placeholder=\"Context or lore in this fairy tale scene...\"\n                      ></textarea>\n                    </div>\n                  </div>\n                </div>\n              </div>\n            }\n          </div>\n        </div>\n      }\n\n      <!-- Generation Error Banner -->\n      @if (illustrator.generationError) {\n        <div class=\"rtsee-illustrator-error-banner\">\n          <i class=\"pi pi-exclamation-triangle\"></i>\n          <span class=\"rtsee-illustrator-error-text\">{{ illustrator.generationError }}</span>\n          <button type=\"button\" class=\"rtsee-illustrator-error-close\" (click)=\"illustrator.generationError = null\" aria-label=\"Dismiss error\">\n            <i class=\"pi pi-times\"></i>\n          </button>\n        </div>\n      }\n\n      <!-- Reviewing Generated Image Mode -->\n      @if (illustrator.reviewingGeneratedImage && illustrator.currentGeneratedImageUrl) {\n        <div class=\"rtsee-illustrator-review-panel\">\n          <div class=\"rtsee-illustrator-review-header\">\n            <div class=\"rtsee-illustrator-review-title\">\n              <span class=\"rtsee-illustrator-review-badge\">\n                <i class=\"pi pi-sparkles\"></i> Reviewing Generated Image\n              </span>\n              <span class=\"rtsee-illustrator-review-sub\">Review the result, request iterative modifications, or discard.</span>\n            </div>\n            <div class=\"rtsee-illustrator-review-quick-actions\">\n              <p-button\n                label=\"Accept & Keep\"\n                icon=\"pi pi-check\"\n                severity=\"success\"\n                (click)=\"acceptGeneratedImage()\"\n              />\n              <p-button\n                label=\"Discard\"\n                icon=\"pi pi-trash\"\n                severity=\"danger\"\n                [text]=\"true\"\n                (click)=\"discardGeneratedImage()\"\n              />\n            </div>\n          </div>\n\n          <!-- Image Preview -->\n          <div class=\"rtsee-illustrator-preview-box\">\n            <img [src]=\"illustrator.currentGeneratedImageUrl\" alt=\"Generated fairy tale illustration\" class=\"rtsee-illustrator-preview-img\" />\n            <a [href]=\"illustrator.currentGeneratedImageUrl\" target=\"_blank\" rel=\"noopener\" class=\"rtsee-illustrator-preview-zoom-btn\" title=\"Open full image in new tab\">\n              <i class=\"pi pi-external-link\"></i> Full View\n            </a>\n          </div>\n\n          <!-- Iteration Modification Controls -->\n          <div class=\"rtsee-illustrator-iteration-box\">\n            <div class=\"rtsee-illustrator-iteration-info\">\n              <span class=\"rtsee-illustrator-iteration-tag\">\n                <i class=\"pi pi-refresh\"></i> Request Modifications & Iterate\n              </span>\n              <span class=\"rtsee-illustrator-iteration-context-hint\">\n                <i class=\"pi pi-info-circle\"></i>\n                All active context references ({{ illustrator.activeContextImages.length }}) are sent to NanoBanana alongside this base picture.\n              </span>\n            </div>\n\n            <textarea\n              class=\"rtsee-illustrator-prompt-textarea rtsee-illustrator-prompt-textarea--iteration\"\n              rows=\"3\"\n              [(ngModel)]=\"illustrator.iterationPrompt\"\n              placeholder=\"Describe modifications to apply to this picture (e.g. 'Make the wizard's cloak sapphire blue with silver runes, add glowing fireflies, soften the background trees')...\"\n              (keydown.meta.enter)=\"submitIteration()\"\n              (keydown.control.enter)=\"submitIteration()\"\n            ></textarea>\n\n            <div class=\"rtsee-illustrator-prompt-footer\">\n              <span class=\"rtsee-illustrator-tip\">\n                <i class=\"pi pi-info-circle\"></i>\n                Press <strong>\u2318+Enter</strong> to iterate on this picture.\n              </span>\n\n              <div class=\"rtsee-illustrator-actions\">\n                <p-button\n                  label=\"Discard\"\n                  icon=\"pi pi-trash\"\n                  severity=\"danger\"\n                  [text]=\"true\"\n                  (click)=\"discardGeneratedImage()\"\n                />\n                <p-button\n                  label=\"Iterate & Regenerate\"\n                  icon=\"pi pi-refresh\"\n                  [loading]=\"illustrator.submitting\"\n                  [disabled]=\"!illustrator.canSubmit\"\n                  (click)=\"submitIteration()\"\n                />\n              </div>\n            </div>\n          </div>\n        </div>\n      } @else {\n        <!-- Prompt Input & Submit Action (Standard Mode) -->\n        <div class=\"rtsee-illustrator-prompt-section\">\n          <div class=\"rtsee-illustrator-prompt-box\">\n            <textarea\n              class=\"rtsee-illustrator-prompt-textarea\"\n              rows=\"3\"\n              [(ngModel)]=\"illustrator.prompt\"\n              placeholder=\"Describe the fairy tale illustration to generate (e.g. 'A cozy cottage tucked deep inside the emerald moss woods, magical amber lanterns glowing warmly from the windows, soft fireflies in the air')...\"\n              (keydown.meta.enter)=\"submitPrompt()\"\n              (keydown.control.enter)=\"submitPrompt()\"\n            ></textarea>\n\n            <div class=\"rtsee-illustrator-prompt-footer\">\n              <span class=\"rtsee-illustrator-tip\">\n                <i class=\"pi pi-info-circle\"></i>\n                Press <strong>\u2318+Enter</strong> to submit. Context characters, artifacts, locations & slides are sent to NanoBanana.\n              </span>\n\n              <div class=\"rtsee-illustrator-actions\">\n                <p-button\n                  label=\"Generate Illustration\"\n                  icon=\"pi pi-sparkles\"\n                  [loading]=\"illustrator.submitting\"\n                  [disabled]=\"!illustrator.canSubmit\"\n                  (click)=\"submitPrompt()\"\n                />\n              </div>\n            </div>\n          </div>\n        </div>\n      }\n    </div>\n  }\n</div>\n" }]
+        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }], propDecorators: { illustrator: [{
+                type: Input
+            }] } });
+
+/**
+ * Interactive story editor: collapsible sections of thumbnails (details, characters,
+ * artifacts, locations, slides, author) that expand into the edit forms.
+ * Rendering only, the orchestration lives in RTSeeInteractiveStoryEditorVm.
+ */
+class InteractiveStoryEditorComponent {
+    constructor() {
+        /** set to false when the vm is initialized by the host */
+        this.autoInit = true;
+        this.sections = RTSeeStoryEditorSection;
+        this.illustrator = new RTSeeIllustrator();
+    }
+    ngOnInit() {
+        if (this.autoInit && !this.vm.story) {
+            void this.vm.init();
+        }
+    }
+    ngOnDestroy() {
+        this.vm.collapseSlide();
+        this.illustrator.destroy();
+    }
+    submitDetails() {
+        this.vm.detailsForm?.submit();
+    }
+    submitAuthor() {
+        this.vm.authorForm?.submit();
+    }
+    submitNewAuthor() {
+        this.vm.newAuthorForm?.submit();
+    }
+    addSlideToContext(event, slide) {
+        event.stopPropagation();
+        event.preventDefault();
+        if (typeof window !== 'undefined') {
+            const anySlide = slide;
+            window.dispatchEvent(new CustomEvent(RTSeeIllustratorEvents.ADD_IMAGE_TO_CONTEXT, {
+                detail: {
+                    id: slide.id,
+                    title: `Slide ${slide.slideNumber}: ${slide.name || 'Story Scene'}`,
+                    imageUrl: slide.imageUrl || '',
+                    visualDescription: anySlide.visualDescription || slide.text || '',
+                    description: anySlide.description || slide.text || '',
+                    sourceType: 'slide',
+                },
+            }));
+        }
+    }
+    addSlideEntitiesToContext(event, slide) {
+        event.stopPropagation();
+        event.preventDefault();
+        if (typeof window === 'undefined') {
+            return;
+        }
+        // 1. Characters: populate all related characters from story level
+        const slideCharacters = slide.characters || [];
+        const storyChars = this.vm.story?.characters ||
+            this.vm.charactersEditor?.items ||
+            [];
+        for (const charRef of slideCharacters) {
+            const fullChar = storyChars.find((c) => c.id === charRef.id || c.name?.toLowerCase() === charRef.name?.toLowerCase());
+            if (fullChar) {
+                window.dispatchEvent(new CustomEvent(RTSeeIllustratorEvents.ADD_IMAGE_TO_CONTEXT, {
+                    detail: {
+                        id: fullChar.id,
+                        title: fullChar.name || 'Character',
+                        imageUrl: fullChar.imageUrl || '',
+                        visualDescription: fullChar.visualDescription || fullChar.description || '',
+                        description: fullChar.description || '',
+                        sourceType: 'character',
+                    },
+                }));
+            }
+        }
+        if (slide.charactersIds) {
+            for (const charId of slide.charactersIds) {
+                if (!slideCharacters.some((c) => c.id === charId)) {
+                    const fullChar = storyChars.find((c) => c.id === charId);
+                    if (fullChar) {
+                        window.dispatchEvent(new CustomEvent(RTSeeIllustratorEvents.ADD_IMAGE_TO_CONTEXT, {
+                            detail: {
+                                id: fullChar.id,
+                                title: fullChar.name || 'Character',
+                                imageUrl: fullChar.imageUrl || '',
+                                visualDescription: fullChar.visualDescription || fullChar.description || '',
+                                description: fullChar.description || '',
+                                sourceType: 'character',
+                            },
+                        }));
+                    }
+                }
+            }
+        }
+        // 2. Locations: populate related location from story level
+        const slideLocations = slide.locations || [];
+        const storyLocs = this.vm.story?.locations ||
+            this.vm.locationsEditor?.items ||
+            [];
+        for (const locRef of slideLocations) {
+            const fullLoc = storyLocs.find((l) => l.id === locRef.id || l.name?.toLowerCase() === locRef.name?.toLowerCase());
+            if (fullLoc) {
+                window.dispatchEvent(new CustomEvent(RTSeeIllustratorEvents.ADD_IMAGE_TO_CONTEXT, {
+                    detail: {
+                        id: fullLoc.id,
+                        title: fullLoc.name || 'Location',
+                        imageUrl: fullLoc.imageUrl || '',
+                        visualDescription: fullLoc.visualDescription || fullLoc.description || '',
+                        description: fullLoc.description || '',
+                        sourceType: 'location',
+                    },
+                }));
+            }
+        }
+        if (slide.locationId && !slideLocations.some((l) => l.id === slide.locationId)) {
+            const fullLoc = storyLocs.find((l) => l.id === slide.locationId);
+            if (fullLoc) {
+                window.dispatchEvent(new CustomEvent(RTSeeIllustratorEvents.ADD_IMAGE_TO_CONTEXT, {
+                    detail: {
+                        id: fullLoc.id,
+                        title: fullLoc.name || 'Location',
+                        imageUrl: fullLoc.imageUrl || '',
+                        visualDescription: fullLoc.visualDescription || fullLoc.description || '',
+                        description: fullLoc.description || '',
+                        sourceType: 'location',
+                    },
+                }));
+            }
+        }
+        // 3. Artifacts: populate related artifacts from story level
+        const slideArtifacts = slide.artifacts || [];
+        const storyArts = this.vm.story?.artifacts ||
+            this.vm.artifactsEditor?.items ||
+            [];
+        for (const artRef of slideArtifacts) {
+            const fullArt = storyArts.find((a) => a.id === artRef.id || a.name?.toLowerCase() === artRef.name?.toLowerCase());
+            if (fullArt) {
+                window.dispatchEvent(new CustomEvent(RTSeeIllustratorEvents.ADD_IMAGE_TO_CONTEXT, {
+                    detail: {
+                        id: fullArt.id,
+                        title: fullArt.name || 'Artifact',
+                        imageUrl: fullArt.imageUrl || '',
+                        visualDescription: fullArt.visualDescription || fullArt.description || '',
+                        description: fullArt.description || '',
+                        sourceType: 'artifact',
+                    },
+                }));
+            }
+        }
+        if (slide.artifactsIds) {
+            for (const artId of slide.artifactsIds) {
+                if (!slideArtifacts.some((a) => a.id === artId)) {
+                    const fullArt = storyArts.find((a) => a.id === artId);
+                    if (fullArt) {
+                        window.dispatchEvent(new CustomEvent(RTSeeIllustratorEvents.ADD_IMAGE_TO_CONTEXT, {
+                            detail: {
+                                id: fullArt.id,
+                                title: fullArt.name || 'Artifact',
+                                imageUrl: fullArt.imageUrl || '',
+                                visualDescription: fullArt.visualDescription || fullArt.description || '',
+                                description: fullArt.description || '',
+                                sourceType: 'artifact',
+                            },
+                        }));
+                    }
+                }
+            }
+        }
+        // 4. Illustration prompt: populate prompt box with slide illustrationDescription
+        const illustrationDesc = slide.illustrationDescription ?? slide.illustrationDescription;
+        if (typeof illustrationDesc === 'string' && illustrationDesc.trim()) {
+            this.illustrator.setPrompt(illustrationDesc.trim());
+            window.dispatchEvent(new CustomEvent(RTSeeIllustratorEvents.SET_PROMPT, {
+                detail: { prompt: illustrationDesc.trim() },
+            }));
+        }
+    }
+    addAuthorToContext(event) {
+        event.stopPropagation();
+        event.preventDefault();
+        if (typeof window !== 'undefined' && this.vm.author) {
+            window.dispatchEvent(new CustomEvent(RTSeeIllustratorEvents.ADD_IMAGE_TO_CONTEXT, {
+                detail: {
+                    id: this.vm.author.id,
+                    title: `Author: ${this.vm.author.name || ''}`,
+                    imageUrl: this.vm.author.imageUrl || '',
+                    visualDescription: this.vm.author.description || '',
+                    description: this.vm.author.description || '',
+                    sourceType: 'author',
+                },
+            }));
+        }
+    }
+    trackSlide(index, slide) {
+        return slide.id || `slide-${index}`;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: InteractiveStoryEditorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: InteractiveStoryEditorComponent, isStandalone: true, selector: "rtsee-interactive-story-editor", inputs: { vm: "vm", autoInit: "autoInit" }, ngImport: i0, template: "<div class=\"rtsee-interactive-story-editor\" [style.padding-bottom]=\"illustrator.expanded ? '460px' : '72px'\">\n  @if (vm.initInProgress) {\n    <div class=\"rtsee-ise-loading\">\n      <i class=\"pi pi-spin pi-spinner\"></i>\n      <span>Loading story\u2026</span>\n    </div>\n  } @else if (vm.initError) {\n    <div class=\"rtsee-ise-error\">{{ vm.initError }}</div>\n  } @else if (vm.story) {\n    <header class=\"rtsee-ise-header\">\n      <span class=\"rtsee-ise-eyebrow\">{{ vm.isNewStory ? 'New story' : 'Story editor' }}</span>\n      <h2 class=\"rtsee-ise-heading\">{{ vm.story.name || 'Untitled story' }}</h2>\n    </header>\n\n    <!-- 1. Details -->\n    <section class=\"rtsee-ise-section\" [ngClass]=\"{ 'rtsee-ise-section--collapsed': vm.isCollapsed(sections.details) }\">\n      <header class=\"rtsee-ise-section-header\">\n        <button type=\"button\" class=\"rtsee-ise-section-toggle\" id=\"rtsee-ise-toggle-details\"\n                [attr.aria-expanded]=\"!vm.isCollapsed(sections.details)\"\n                (click)=\"vm.toggleSection(sections.details)\">\n          <i class=\"rtsee-ise-section-icon pi pi-book\"></i>\n          <h3 class=\"rtsee-ise-section-title\">Story details</h3>\n          <i class=\"pi pi-chevron-down rtsee-ise-chevron\"></i>\n        </button>\n      </header>\n\n      @if (!vm.isCollapsed(sections.details)) {\n        <div class=\"rtsee-ise-section-body\">\n          <button type=\"button\" class=\"rtsee-ise-details-card\" id=\"rtsee-ise-details-card\"\n                  [ngClass]=\"{ 'rtsee-ise-thumb--active': vm.detailsExpanded }\"\n                  (click)=\"vm.toggleDetails()\">\n            <div class=\"rtsee-ise-details-image\">\n              @if (vm.story.imageUrl) {\n                <img [src]=\"vm.story.imageUrl\" [alt]=\"vm.story.name\" />\n              } @else {\n                <i class=\"pi pi-image\"></i>\n              }\n            </div>\n            <div class=\"rtsee-ise-details-body\">\n              <span class=\"rtsee-ise-details-name\">{{ vm.story.name || 'Untitled story' }}</span>\n              <p class=\"rtsee-ise-details-description\">{{ vm.story.getTruncatedDescription(220) || 'No description yet' }}</p>\n              @if (vm.story.tags.length) {\n                <div class=\"rtsee-ise-chips\">\n                  @for (tag of vm.story.tags; track tag.id) {\n                    <span class=\"rtsee-ise-chip\">{{ tag.name }}</span>\n                  }\n                </div>\n              }\n            </div>\n            <i class=\"pi pi-pencil rtsee-ise-details-edit\"></i>\n          </button>\n\n          @if (vm.detailsExpanded && vm.detailsForm) {\n            <div class=\"rtsee-ise-expanded rtsee-form-container\">\n              @if (vm.detailsError) {\n                <div class=\"rtsee-ise-error\">{{ vm.detailsError }}</div>\n              }\n              <rtsee-form [form]=\"vm.detailsForm\" (formSubmit)=\"submitDetails()\">\n                <div class=\"rtsee-ise-actions\">\n                  <p-button type=\"submit\" [label]=\"vm.isNewStory ? 'Create story' : 'Save'\"\n                            [loading]=\"vm.detailsSaveInProgress\"\n                            [disabled]=\"vm.detailsSaveInProgress\" />\n                  <p-button label=\"Cancel\" severity=\"secondary\"\n                            (click)=\"vm.collapseDetails()\"\n                            [disabled]=\"vm.detailsSaveInProgress\" />\n                </div>\n              </rtsee-form>\n            </div>\n          }\n        </div>\n      }\n    </section>\n\n    <!-- 2-4. Characters, artifacts, locations -->\n    <rtsee-story-elements-section [editor]=\"vm.charactersEditor\"\n                                  title=\"Characters\"\n                                  icon=\"pi pi-user\"\n                                  [collapsed]=\"vm.isCollapsed(sections.characters)\"\n                                  (toggled)=\"vm.toggleSection(sections.characters)\" />\n\n    <rtsee-story-elements-section [editor]=\"vm.artifactsEditor\"\n                                  title=\"Artifacts\"\n                                  icon=\"pi pi-star\"\n                                  [collapsed]=\"vm.isCollapsed(sections.artifacts)\"\n                                  (toggled)=\"vm.toggleSection(sections.artifacts)\" />\n\n    <rtsee-story-elements-section [editor]=\"vm.locationsEditor\"\n                                  title=\"Locations\"\n                                  icon=\"pi pi-map-marker\"\n                                  [collapsed]=\"vm.isCollapsed(sections.locations)\"\n                                  (toggled)=\"vm.toggleSection(sections.locations)\" />\n\n    <!-- 5. Slides -->\n    <section class=\"rtsee-ise-section\" [ngClass]=\"{ 'rtsee-ise-section--collapsed': vm.isCollapsed(sections.slides) }\">\n      <header class=\"rtsee-ise-section-header\">\n        <button type=\"button\" class=\"rtsee-ise-section-toggle\" id=\"rtsee-ise-toggle-slides\"\n                [attr.aria-expanded]=\"!vm.isCollapsed(sections.slides)\"\n                (click)=\"vm.toggleSection(sections.slides)\">\n          <i class=\"rtsee-ise-section-icon pi pi-images\"></i>\n          <h3 class=\"rtsee-ise-section-title\">Slides</h3>\n          <span class=\"rtsee-ise-section-count\">{{ vm.slides.length }}</span>\n          <i class=\"pi pi-chevron-down rtsee-ise-chevron\"></i>\n        </button>\n      </header>\n\n      @if (!vm.isCollapsed(sections.slides)) {\n        <div class=\"rtsee-ise-section-body\">\n          @if (vm.isNewStory) {\n            <p class=\"rtsee-ise-hint\">Save the story details first to add slides.</p>\n          } @else {\n            <div class=\"rtsee-ise-slides-strip\">\n              @for (slide of vm.slides; track trackSlide($index, slide)) {\n                <div class=\"rtsee-ise-slide-thumb-wrapper\" style=\"position: relative; display: inline-flex;\">\n                  <button type=\"button\" class=\"rtsee-ise-slide-thumb\"\n                          [id]=\"'rtsee-ise-slide-' + slide.id\"\n                          [ngClass]=\"{ 'rtsee-ise-thumb--active': vm.isSlideExpanded(slide) }\"\n                          [attr.aria-label]=\"'Slide ' + slide.slideNumber\"\n                          (click)=\"vm.expandSlide(slide)\">\n                    @if (slide.imageUrl) {\n                      <img [src]=\"slide.imageUrl\" [alt]=\"slide.name\" loading=\"lazy\" />\n                    } @else {\n                      <i class=\"pi pi-image\"></i>\n                    }\n                    <span class=\"rtsee-ise-slide-number\">{{ slide.slideNumber }}</span>\n                  </button>\n                  <button type=\"button\"\n                          class=\"rtsee-ise-btn-add-illustrator rtsee-ise-btn-add-context\"\n                          style=\"position: absolute; top: 4px; left: 4px;\"\n                          title=\"Add Slide {{ slide.slideNumber }} context (characters, locations, artifacts) to Illustrator\"\n                          (click)=\"addSlideEntitiesToContext($event, slide)\">\n                    <i class=\"pi pi-plus\"></i>\n                  </button>\n                  <button type=\"button\"\n                          class=\"rtsee-ise-btn-add-illustrator\"\n                          style=\"position: absolute; top: 4px; right: 4px;\"\n                          title=\"Add Slide {{ slide.slideNumber }} to Illustrator context\"\n                          (click)=\"addSlideToContext($event, slide)\">\n                    <i class=\"pi pi-palette\"></i>\n                    <span>+\uD83C\uDFA8</span>\n                  </button>\n                </div>\n              }\n              <button type=\"button\" class=\"rtsee-ise-slide-thumb rtsee-ise-slide-thumb--add\"\n                      id=\"rtsee-ise-add-slide\"\n                      [disabled]=\"vm.slidesLoadInProgress\"\n                      (click)=\"vm.expandNewSlide()\">\n                <i class=\"pi pi-plus\"></i>\n              </button>\n            </div>\n\n            @if (vm.activeSlide) {\n              <div class=\"rtsee-ise-expanded\">\n                <rtsee-manage-slide [manageSlide]=\"vm.activeSlide\" />\n              </div>\n            }\n          }\n        </div>\n      }\n    </section>\n\n    <!-- 6. Author -->\n    <section class=\"rtsee-ise-section\" [ngClass]=\"{ 'rtsee-ise-section--collapsed': vm.isCollapsed(sections.author) }\">\n      <header class=\"rtsee-ise-section-header\">\n        <button type=\"button\" class=\"rtsee-ise-section-toggle\" id=\"rtsee-ise-toggle-author\"\n                [attr.aria-expanded]=\"!vm.isCollapsed(sections.author)\"\n                (click)=\"vm.toggleSection(sections.author)\">\n          <i class=\"rtsee-ise-section-icon pi pi-pen-to-square\"></i>\n          <h3 class=\"rtsee-ise-section-title\">Author</h3>\n          <i class=\"pi pi-chevron-down rtsee-ise-chevron\"></i>\n        </button>\n      </header>\n\n      @if (!vm.isCollapsed(sections.author)) {\n        <div class=\"rtsee-ise-section-body\">\n          <button type=\"button\" class=\"rtsee-ise-author-card\" id=\"rtsee-ise-author-card\"\n                  [ngClass]=\"{ 'rtsee-ise-thumb--active': vm.authorExpanded }\"\n                  (click)=\"vm.toggleAuthor()\">\n            <div class=\"rtsee-ise-avatar\">\n              @if (vm.author?.imageUrl) {\n                <img [src]=\"vm.author?.imageUrl\" [alt]=\"vm.author?.name\" />\n              } @else {\n                <i class=\"pi pi-user\"></i>\n              }\n            </div>\n            <div class=\"rtsee-ise-author-body\">\n              <span class=\"rtsee-ise-thumb-name\">{{ vm.author?.name || 'No author assigned' }}</span>\n              <span class=\"rtsee-ise-thumb-description\">{{ vm.author?.description || 'Click to pick or create an author' }}</span>\n            </div>\n            @if (vm.author) {\n              <button type=\"button\"\n                      class=\"rtsee-ise-btn-add-illustrator\"\n                      title=\"Add Author to Illustrator context\"\n                      (click)=\"addAuthorToContext($event)\">\n                <i class=\"pi pi-palette\"></i>\n                <span>+\uD83C\uDFA8</span>\n              </button>\n            }\n            <i class=\"pi pi-pencil rtsee-ise-details-edit\"></i>\n          </button>\n\n          @if (vm.authorExpanded) {\n            <div class=\"rtsee-ise-expanded rtsee-form-container\">\n              @if (vm.authorError) {\n                <div class=\"rtsee-ise-error\">{{ vm.authorError }}</div>\n              }\n\n              @if (vm.newAuthor && vm.newAuthorForm) {\n                <h4 class=\"rtsee-ise-subheading\">New author</h4>\n                <rtsee-form [form]=\"vm.newAuthorForm\" (formSubmit)=\"submitNewAuthor()\">\n                  <div class=\"rtsee-ise-actions\">\n                    <p-button type=\"submit\" label=\"Create & assign\"\n                              [loading]=\"vm.authorSaveInProgress\"\n                              [disabled]=\"vm.authorSaveInProgress\" />\n                    <p-button label=\"Back\" severity=\"secondary\"\n                              (click)=\"vm.cancelNewAuthor()\"\n                              [disabled]=\"vm.authorSaveInProgress\" />\n                  </div>\n                </rtsee-form>\n              } @else if (vm.authorForm) {\n                <rtsee-form [form]=\"vm.authorForm\" (formSubmit)=\"submitAuthor()\">\n                  <div class=\"rtsee-ise-actions\">\n                    <p-button type=\"submit\" label=\"Assign\"\n                              [loading]=\"vm.authorSaveInProgress\"\n                              [disabled]=\"vm.authorSaveInProgress\" />\n                    <p-button label=\"New author\" icon=\"pi pi-plus\" severity=\"secondary\"\n                              (click)=\"vm.startNewAuthor()\"\n                              [disabled]=\"vm.authorSaveInProgress\" />\n                    @if (vm.author) {\n                      <span class=\"rtsee-ise-actions-spacer\"></span>\n                      <p-button label=\"Clear\" icon=\"pi pi-times\" severity=\"danger\" [text]=\"true\"\n                                (click)=\"vm.assignAuthor(null)\"\n                                [disabled]=\"vm.authorSaveInProgress\" />\n                    }\n                  </div>\n                </rtsee-form>\n              }\n            </div>\n          }\n        </div>\n      }\n    </section>\n\n    <!-- 7. NanoBanana Illustrator Overlay -->\n    <rtsee-illustrator [illustrator]=\"illustrator\" />\n  }\n</div>\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"] }, { kind: "component", type: ManageSlideComponent, selector: "rtsee-manage-slide", inputs: ["manageSlide"] }, { kind: "component", type: StoryElementsSectionComponent, selector: "rtsee-story-elements-section", inputs: ["editor", "title", "icon", "collapsed", "canDetach"], outputs: ["toggled"] }, { kind: "component", type: IllustratorComponent, selector: "rtsee-illustrator", inputs: ["illustrator"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: InteractiveStoryEditorComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "rtsee-interactive-story-editor", standalone: true, imports: [
+                        NgClass,
+                        Button,
+                        FormComponent,
+                        ManageSlideComponent,
+                        StoryElementsSectionComponent,
+                        IllustratorComponent,
+                    ], template: "<div class=\"rtsee-interactive-story-editor\" [style.padding-bottom]=\"illustrator.expanded ? '460px' : '72px'\">\n  @if (vm.initInProgress) {\n    <div class=\"rtsee-ise-loading\">\n      <i class=\"pi pi-spin pi-spinner\"></i>\n      <span>Loading story\u2026</span>\n    </div>\n  } @else if (vm.initError) {\n    <div class=\"rtsee-ise-error\">{{ vm.initError }}</div>\n  } @else if (vm.story) {\n    <header class=\"rtsee-ise-header\">\n      <span class=\"rtsee-ise-eyebrow\">{{ vm.isNewStory ? 'New story' : 'Story editor' }}</span>\n      <h2 class=\"rtsee-ise-heading\">{{ vm.story.name || 'Untitled story' }}</h2>\n    </header>\n\n    <!-- 1. Details -->\n    <section class=\"rtsee-ise-section\" [ngClass]=\"{ 'rtsee-ise-section--collapsed': vm.isCollapsed(sections.details) }\">\n      <header class=\"rtsee-ise-section-header\">\n        <button type=\"button\" class=\"rtsee-ise-section-toggle\" id=\"rtsee-ise-toggle-details\"\n                [attr.aria-expanded]=\"!vm.isCollapsed(sections.details)\"\n                (click)=\"vm.toggleSection(sections.details)\">\n          <i class=\"rtsee-ise-section-icon pi pi-book\"></i>\n          <h3 class=\"rtsee-ise-section-title\">Story details</h3>\n          <i class=\"pi pi-chevron-down rtsee-ise-chevron\"></i>\n        </button>\n      </header>\n\n      @if (!vm.isCollapsed(sections.details)) {\n        <div class=\"rtsee-ise-section-body\">\n          <button type=\"button\" class=\"rtsee-ise-details-card\" id=\"rtsee-ise-details-card\"\n                  [ngClass]=\"{ 'rtsee-ise-thumb--active': vm.detailsExpanded }\"\n                  (click)=\"vm.toggleDetails()\">\n            <div class=\"rtsee-ise-details-image\">\n              @if (vm.story.imageUrl) {\n                <img [src]=\"vm.story.imageUrl\" [alt]=\"vm.story.name\" />\n              } @else {\n                <i class=\"pi pi-image\"></i>\n              }\n            </div>\n            <div class=\"rtsee-ise-details-body\">\n              <span class=\"rtsee-ise-details-name\">{{ vm.story.name || 'Untitled story' }}</span>\n              <p class=\"rtsee-ise-details-description\">{{ vm.story.getTruncatedDescription(220) || 'No description yet' }}</p>\n              @if (vm.story.tags.length) {\n                <div class=\"rtsee-ise-chips\">\n                  @for (tag of vm.story.tags; track tag.id) {\n                    <span class=\"rtsee-ise-chip\">{{ tag.name }}</span>\n                  }\n                </div>\n              }\n            </div>\n            <i class=\"pi pi-pencil rtsee-ise-details-edit\"></i>\n          </button>\n\n          @if (vm.detailsExpanded && vm.detailsForm) {\n            <div class=\"rtsee-ise-expanded rtsee-form-container\">\n              @if (vm.detailsError) {\n                <div class=\"rtsee-ise-error\">{{ vm.detailsError }}</div>\n              }\n              <rtsee-form [form]=\"vm.detailsForm\" (formSubmit)=\"submitDetails()\">\n                <div class=\"rtsee-ise-actions\">\n                  <p-button type=\"submit\" [label]=\"vm.isNewStory ? 'Create story' : 'Save'\"\n                            [loading]=\"vm.detailsSaveInProgress\"\n                            [disabled]=\"vm.detailsSaveInProgress\" />\n                  <p-button label=\"Cancel\" severity=\"secondary\"\n                            (click)=\"vm.collapseDetails()\"\n                            [disabled]=\"vm.detailsSaveInProgress\" />\n                </div>\n              </rtsee-form>\n            </div>\n          }\n        </div>\n      }\n    </section>\n\n    <!-- 2-4. Characters, artifacts, locations -->\n    <rtsee-story-elements-section [editor]=\"vm.charactersEditor\"\n                                  title=\"Characters\"\n                                  icon=\"pi pi-user\"\n                                  [collapsed]=\"vm.isCollapsed(sections.characters)\"\n                                  (toggled)=\"vm.toggleSection(sections.characters)\" />\n\n    <rtsee-story-elements-section [editor]=\"vm.artifactsEditor\"\n                                  title=\"Artifacts\"\n                                  icon=\"pi pi-star\"\n                                  [collapsed]=\"vm.isCollapsed(sections.artifacts)\"\n                                  (toggled)=\"vm.toggleSection(sections.artifacts)\" />\n\n    <rtsee-story-elements-section [editor]=\"vm.locationsEditor\"\n                                  title=\"Locations\"\n                                  icon=\"pi pi-map-marker\"\n                                  [collapsed]=\"vm.isCollapsed(sections.locations)\"\n                                  (toggled)=\"vm.toggleSection(sections.locations)\" />\n\n    <!-- 5. Slides -->\n    <section class=\"rtsee-ise-section\" [ngClass]=\"{ 'rtsee-ise-section--collapsed': vm.isCollapsed(sections.slides) }\">\n      <header class=\"rtsee-ise-section-header\">\n        <button type=\"button\" class=\"rtsee-ise-section-toggle\" id=\"rtsee-ise-toggle-slides\"\n                [attr.aria-expanded]=\"!vm.isCollapsed(sections.slides)\"\n                (click)=\"vm.toggleSection(sections.slides)\">\n          <i class=\"rtsee-ise-section-icon pi pi-images\"></i>\n          <h3 class=\"rtsee-ise-section-title\">Slides</h3>\n          <span class=\"rtsee-ise-section-count\">{{ vm.slides.length }}</span>\n          <i class=\"pi pi-chevron-down rtsee-ise-chevron\"></i>\n        </button>\n      </header>\n\n      @if (!vm.isCollapsed(sections.slides)) {\n        <div class=\"rtsee-ise-section-body\">\n          @if (vm.isNewStory) {\n            <p class=\"rtsee-ise-hint\">Save the story details first to add slides.</p>\n          } @else {\n            <div class=\"rtsee-ise-slides-strip\">\n              @for (slide of vm.slides; track trackSlide($index, slide)) {\n                <div class=\"rtsee-ise-slide-thumb-wrapper\" style=\"position: relative; display: inline-flex;\">\n                  <button type=\"button\" class=\"rtsee-ise-slide-thumb\"\n                          [id]=\"'rtsee-ise-slide-' + slide.id\"\n                          [ngClass]=\"{ 'rtsee-ise-thumb--active': vm.isSlideExpanded(slide) }\"\n                          [attr.aria-label]=\"'Slide ' + slide.slideNumber\"\n                          (click)=\"vm.expandSlide(slide)\">\n                    @if (slide.imageUrl) {\n                      <img [src]=\"slide.imageUrl\" [alt]=\"slide.name\" loading=\"lazy\" />\n                    } @else {\n                      <i class=\"pi pi-image\"></i>\n                    }\n                    <span class=\"rtsee-ise-slide-number\">{{ slide.slideNumber }}</span>\n                  </button>\n                  <button type=\"button\"\n                          class=\"rtsee-ise-btn-add-illustrator rtsee-ise-btn-add-context\"\n                          style=\"position: absolute; top: 4px; left: 4px;\"\n                          title=\"Add Slide {{ slide.slideNumber }} context (characters, locations, artifacts) to Illustrator\"\n                          (click)=\"addSlideEntitiesToContext($event, slide)\">\n                    <i class=\"pi pi-plus\"></i>\n                  </button>\n                  <button type=\"button\"\n                          class=\"rtsee-ise-btn-add-illustrator\"\n                          style=\"position: absolute; top: 4px; right: 4px;\"\n                          title=\"Add Slide {{ slide.slideNumber }} to Illustrator context\"\n                          (click)=\"addSlideToContext($event, slide)\">\n                    <i class=\"pi pi-palette\"></i>\n                    <span>+\uD83C\uDFA8</span>\n                  </button>\n                </div>\n              }\n              <button type=\"button\" class=\"rtsee-ise-slide-thumb rtsee-ise-slide-thumb--add\"\n                      id=\"rtsee-ise-add-slide\"\n                      [disabled]=\"vm.slidesLoadInProgress\"\n                      (click)=\"vm.expandNewSlide()\">\n                <i class=\"pi pi-plus\"></i>\n              </button>\n            </div>\n\n            @if (vm.activeSlide) {\n              <div class=\"rtsee-ise-expanded\">\n                <rtsee-manage-slide [manageSlide]=\"vm.activeSlide\" />\n              </div>\n            }\n          }\n        </div>\n      }\n    </section>\n\n    <!-- 6. Author -->\n    <section class=\"rtsee-ise-section\" [ngClass]=\"{ 'rtsee-ise-section--collapsed': vm.isCollapsed(sections.author) }\">\n      <header class=\"rtsee-ise-section-header\">\n        <button type=\"button\" class=\"rtsee-ise-section-toggle\" id=\"rtsee-ise-toggle-author\"\n                [attr.aria-expanded]=\"!vm.isCollapsed(sections.author)\"\n                (click)=\"vm.toggleSection(sections.author)\">\n          <i class=\"rtsee-ise-section-icon pi pi-pen-to-square\"></i>\n          <h3 class=\"rtsee-ise-section-title\">Author</h3>\n          <i class=\"pi pi-chevron-down rtsee-ise-chevron\"></i>\n        </button>\n      </header>\n\n      @if (!vm.isCollapsed(sections.author)) {\n        <div class=\"rtsee-ise-section-body\">\n          <button type=\"button\" class=\"rtsee-ise-author-card\" id=\"rtsee-ise-author-card\"\n                  [ngClass]=\"{ 'rtsee-ise-thumb--active': vm.authorExpanded }\"\n                  (click)=\"vm.toggleAuthor()\">\n            <div class=\"rtsee-ise-avatar\">\n              @if (vm.author?.imageUrl) {\n                <img [src]=\"vm.author?.imageUrl\" [alt]=\"vm.author?.name\" />\n              } @else {\n                <i class=\"pi pi-user\"></i>\n              }\n            </div>\n            <div class=\"rtsee-ise-author-body\">\n              <span class=\"rtsee-ise-thumb-name\">{{ vm.author?.name || 'No author assigned' }}</span>\n              <span class=\"rtsee-ise-thumb-description\">{{ vm.author?.description || 'Click to pick or create an author' }}</span>\n            </div>\n            @if (vm.author) {\n              <button type=\"button\"\n                      class=\"rtsee-ise-btn-add-illustrator\"\n                      title=\"Add Author to Illustrator context\"\n                      (click)=\"addAuthorToContext($event)\">\n                <i class=\"pi pi-palette\"></i>\n                <span>+\uD83C\uDFA8</span>\n              </button>\n            }\n            <i class=\"pi pi-pencil rtsee-ise-details-edit\"></i>\n          </button>\n\n          @if (vm.authorExpanded) {\n            <div class=\"rtsee-ise-expanded rtsee-form-container\">\n              @if (vm.authorError) {\n                <div class=\"rtsee-ise-error\">{{ vm.authorError }}</div>\n              }\n\n              @if (vm.newAuthor && vm.newAuthorForm) {\n                <h4 class=\"rtsee-ise-subheading\">New author</h4>\n                <rtsee-form [form]=\"vm.newAuthorForm\" (formSubmit)=\"submitNewAuthor()\">\n                  <div class=\"rtsee-ise-actions\">\n                    <p-button type=\"submit\" label=\"Create & assign\"\n                              [loading]=\"vm.authorSaveInProgress\"\n                              [disabled]=\"vm.authorSaveInProgress\" />\n                    <p-button label=\"Back\" severity=\"secondary\"\n                              (click)=\"vm.cancelNewAuthor()\"\n                              [disabled]=\"vm.authorSaveInProgress\" />\n                  </div>\n                </rtsee-form>\n              } @else if (vm.authorForm) {\n                <rtsee-form [form]=\"vm.authorForm\" (formSubmit)=\"submitAuthor()\">\n                  <div class=\"rtsee-ise-actions\">\n                    <p-button type=\"submit\" label=\"Assign\"\n                              [loading]=\"vm.authorSaveInProgress\"\n                              [disabled]=\"vm.authorSaveInProgress\" />\n                    <p-button label=\"New author\" icon=\"pi pi-plus\" severity=\"secondary\"\n                              (click)=\"vm.startNewAuthor()\"\n                              [disabled]=\"vm.authorSaveInProgress\" />\n                    @if (vm.author) {\n                      <span class=\"rtsee-ise-actions-spacer\"></span>\n                      <p-button label=\"Clear\" icon=\"pi pi-times\" severity=\"danger\" [text]=\"true\"\n                                (click)=\"vm.assignAuthor(null)\"\n                                [disabled]=\"vm.authorSaveInProgress\" />\n                    }\n                  </div>\n                </rtsee-form>\n              }\n            </div>\n          }\n        </div>\n      }\n    </section>\n\n    <!-- 7. NanoBanana Illustrator Overlay -->\n    <rtsee-illustrator [illustrator]=\"illustrator\" />\n  }\n</div>\n" }]
+        }], propDecorators: { vm: [{
+                type: Input,
+                args: [{ required: true }]
+            }], autoInit: [{
+                type: Input
+            }] } });
+
 class ManageStoriesComponent {
     ngOnInit() {
         this.manageStories.init();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: ManageStoriesComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: ManageStoriesComponent, isStandalone: true, selector: "rtsee-manage-stories", inputs: { manageStories: "manageStories" }, ngImport: i0, template: "<div class=\"rtsee-manage-stories\">\n  <div class=\"rtsee-manage-stories-header\">\n    @if (!manageStories.selectedStory) {\n      <p-button (click)=\"manageStories.selectNewStory()\"\n                label=\"Create A New Story\"\n      ></p-button>\n    }\n  </div>\n  @if (manageStories.selectedStory) {\n    <div class=\"rtsee-manage-story-container\">\n      <rtsee-manage-story [manageStory]=\"manageStories.selectedStory\"\n      ></rtsee-manage-story>\n    </div>\n  }\n  @if (!manageStories.selectedStory) {\n    <div class=\"rtsee-manage-stories-list rtsee-ordered-list\">\n      <p-orderList [value]=\"manageStories.stories\"\n                   dataKey=\"id\"\n                   [dragdrop]=\"true\"\n                   [responsive]=\"true\"\n                   [scrollHeight]=\"'40rem'\"\n                   class=\"rtsee-ordered-list-inner\"\n                   (onReorder)=\"manageStories.onReorder()\"\n      >\n        <ng-template let-option let-selected=\"selected\" #item>\n          <div class=\"rtsee-presentation-manage-stories-list-item rtsee-ordered-list-item\">\n            <img\n              [src]=\"option.imageUrl\"\n              [alt]=\"'slide_image'\"\n              [style.width]=\"'60px'\"\n              class=\"rtsee-presentation-manage-stories-list-item-image rtsee-ordered-list-item-image\"\n            />\n            <div class=\"rtsee-presentation-manage-stories-list-item-info rtsee-ordered-list-item-info\">\n            <span [ngClass]=\"{\n                        'text-sm': true,\n                        'text-surface-500': !selected,\n                        'dark:text-surface-400': !selected,\n                        'text-inherit': selected,\n                    }\"\n            >{{ option.name }}</span>\n              <div class=\"rtsee-ordered-list-item-info-buttons\">\n                <p-button label=\"Edit\"\n                          class=\"rtsee-ordered-list-item-info-button\"\n                          (click)=\"manageStories.selectStory(option.id)\"\n                ></p-button>\n                <p-button label=\"Delete\"\n                          [severity]=\"'warn'\"\n                          class=\"rtsee-ordered-list-item-info-button\"\n                          (click)=\"manageStories.selectStory(option.id)\"\n                ></p-button>\n                <p-button label=\"Clone\"\n                          [severity]=\"'secondary'\"\n                          class=\"rtsee-ordered-list-item-info-button\"\n                          (click)=\"manageStories.cloneStory(option.id)\"\n                ></p-button>\n              </div>\n            </div>\n          </div>\n        </ng-template>\n      </p-orderList>\n    </div>\n  }\n</div>\n", dependencies: [{ kind: "component", type: ManageStoryComponent, selector: "rtsee-manage-story", inputs: ["manageStory"] }, { 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: OrderList, selector: "p-orderList, p-orderlist, p-order-list", inputs: ["header", "styleClass", "tabindex", "ariaLabel", "ariaLabelledBy", "listStyle", "responsive", "filterBy", "filterPlaceholder", "filterLocale", "metaKeySelection", "dragdrop", "controlsPosition", "ariaFilterLabel", "filterMatchMode", "breakpoint", "stripedRows", "disabled", "trackBy", "scrollHeight", "autoOptionFocus", "dataKey", "selection", "value", "buttonProps", "moveUpButtonProps", "moveTopButtonProps", "moveDownButtonProps", "moveBottomButtonProps"], outputs: ["selectionChange", "onReorder", "onSelectionChange", "onFilterEvent", "onFocus", "onBlur"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: ManageStoriesComponent, isStandalone: true, selector: "rtsee-manage-stories", inputs: { manageStories: "manageStories" }, ngImport: i0, template: "<div class=\"rtsee-manage-stories\">\n  <div class=\"rtsee-manage-stories-header\">\n    @if (!manageStories.selectedStory && !manageStories.interactiveStoryEditor) {\n      <p-button (click)=\"manageStories.selectNewStory()\"\n                label=\"Create A New Story\"\n      ></p-button>\n    }\n  </div>\n  @if (manageStories.selectedStory) {\n    <div class=\"rtsee-manage-story-container\">\n      <rtsee-manage-story [manageStory]=\"manageStories.selectedStory\"\n      ></rtsee-manage-story>\n    </div>\n  }\n  @if (manageStories.interactiveStoryEditor) {\n    <div class=\"rtsee-manage-story-container\">\n      <div style=\"margin-bottom: 1rem;\">\n        <p-button icon=\"pi pi-arrow-left\" label=\"Back to Stories\" (click)=\"manageStories.interactiveStoryEditor = null\" [text]=\"true\"></p-button>\n      </div>\n      <rtsee-interactive-story-editor [vm]=\"manageStories.interactiveStoryEditor\"></rtsee-interactive-story-editor>\n    </div>\n  }\n  @if (!manageStories.selectedStory && !manageStories.interactiveStoryEditor) {\n    <div class=\"rtsee-manage-stories-list rtsee-ordered-list\">\n      <p-orderList [value]=\"manageStories.stories\"\n                   dataKey=\"id\"\n                   [dragdrop]=\"true\"\n                   [responsive]=\"true\"\n                   [scrollHeight]=\"'40rem'\"\n                   class=\"rtsee-ordered-list-inner\"\n                   (onReorder)=\"manageStories.onReorder()\"\n      >\n        <ng-template let-option let-selected=\"selected\" #item>\n          <div class=\"rtsee-presentation-manage-stories-list-item rtsee-ordered-list-item\">\n            <img\n              [src]=\"option.imageUrl\"\n              [alt]=\"'slide_image'\"\n              [style.width]=\"'60px'\"\n              class=\"rtsee-presentation-manage-stories-list-item-image rtsee-ordered-list-item-image\"\n            />\n            <div class=\"rtsee-presentation-manage-stories-list-item-info rtsee-ordered-list-item-info\">\n            <span [ngClass]=\"{\n                        'text-sm': true,\n                        'text-surface-500': !selected,\n                        'dark:text-surface-400': !selected,\n                        'text-inherit': selected,\n                    }\"\n            >{{ option.name }}</span>\n              <div class=\"rtsee-ordered-list-item-info-buttons\">\n                <p-button label=\"Edit\"\n                          class=\"rtsee-ordered-list-item-info-button\"\n                          (click)=\"manageStories.selectStory(option.id)\"\n                ></p-button>\n                <p-button label=\"iEdit\"\n                          [severity]=\"'info'\"\n                          class=\"rtsee-ordered-list-item-info-button\"\n                          (click)=\"manageStories.selectInteractiveStory(option.id)\"\n                ></p-button>\n                <p-button label=\"Delete\"\n                          [severity]=\"'warn'\"\n                          class=\"rtsee-ordered-list-item-info-button\"\n                          (click)=\"manageStories.selectStory(option.id)\"\n                ></p-button>\n                <p-button label=\"Clone\"\n                          [severity]=\"'secondary'\"\n                          class=\"rtsee-ordered-list-item-info-button\"\n                          (click)=\"manageStories.cloneStory(option.id)\"\n                ></p-button>\n              </div>\n            </div>\n          </div>\n        </ng-template>\n      </p-orderList>\n    </div>\n  }\n</div>\n", dependencies: [{ kind: "component", type: ManageStoryComponent, selector: "rtsee-manage-story", inputs: ["manageStory"] }, { kind: "component", type: InteractiveStoryEditorComponent, selector: "rtsee-interactive-story-editor", inputs: ["vm", "autoInit"] }, { 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: OrderList, selector: "p-orderList, p-orderlist, p-order-list", inputs: ["header", "styleClass", "tabindex", "ariaLabel", "ariaLabelledBy", "listStyle", "responsive", "filterBy", "filterPlaceholder", "filterLocale", "metaKeySelection", "dragdrop", "controlsPosition", "ariaFilterLabel", "filterMatchMode", "breakpoint", "stripedRows", "disabled", "trackBy", "scrollHeight", "autoOptionFocus", "dataKey", "selection", "value", "buttonProps", "moveUpButtonProps", "moveTopButtonProps", "moveDownButtonProps", "moveBottomButtonProps"], outputs: ["selectionChange", "onReorder", "onSelectionChange", "onFilterEvent", "onFocus", "onBlur"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: ManageStoriesComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'rtsee-manage-stories', imports: [ManageStoryComponent, Button, OrderList, NgClass], template: "<div class=\"rtsee-manage-stories\">\n  <div class=\"rtsee-manage-stories-header\">\n    @if (!manageStories.selectedStory) {\n      <p-button (click)=\"manageStories.selectNewStory()\"\n                label=\"Create A New Story\"\n      ></p-button>\n    }\n  </div>\n  @if (manageStories.selectedStory) {\n    <div class=\"rtsee-manage-story-container\">\n      <rtsee-manage-story [manageStory]=\"manageStories.selectedStory\"\n      ></rtsee-manage-story>\n    </div>\n  }\n  @if (!manageStories.selectedStory) {\n    <div class=\"rtsee-manage-stories-list rtsee-ordered-list\">\n      <p-orderList [value]=\"manageStories.stories\"\n                   dataKey=\"id\"\n                   [dragdrop]=\"true\"\n                   [responsive]=\"true\"\n                   [scrollHeight]=\"'40rem'\"\n                   class=\"rtsee-ordered-list-inner\"\n                   (onReorder)=\"manageStories.onReorder()\"\n      >\n        <ng-template let-option let-selected=\"selected\" #item>\n          <div class=\"rtsee-presentation-manage-stories-list-item rtsee-ordered-list-item\">\n            <img\n              [src]=\"option.imageUrl\"\n              [alt]=\"'slide_image'\"\n              [style.width]=\"'60px'\"\n              class=\"rtsee-presentation-manage-stories-list-item-image rtsee-ordered-list-item-image\"\n            />\n            <div class=\"rtsee-presentation-manage-stories-list-item-info rtsee-ordered-list-item-info\">\n            <span [ngClass]=\"{\n                        'text-sm': true,\n                        'text-surface-500': !selected,\n                        'dark:text-surface-400': !selected,\n                        'text-inherit': selected,\n                    }\"\n            >{{ option.name }}</span>\n              <div class=\"rtsee-ordered-list-item-info-buttons\">\n                <p-button label=\"Edit\"\n                          class=\"rtsee-ordered-list-item-info-button\"\n                          (click)=\"manageStories.selectStory(option.id)\"\n                ></p-button>\n                <p-button label=\"Delete\"\n                          [severity]=\"'warn'\"\n                          class=\"rtsee-ordered-list-item-info-button\"\n                          (click)=\"manageStories.selectStory(option.id)\"\n                ></p-button>\n                <p-button label=\"Clone\"\n                          [severity]=\"'secondary'\"\n                          class=\"rtsee-ordered-list-item-info-button\"\n                          (click)=\"manageStories.cloneStory(option.id)\"\n                ></p-button>\n              </div>\n            </div>\n          </div>\n        </ng-template>\n      </p-orderList>\n    </div>\n  }\n</div>\n" }]
+            args: [{ selector: 'rtsee-manage-stories', imports: [ManageStoryComponent, InteractiveStoryEditorComponent, Button, OrderList, NgClass], template: "<div class=\"rtsee-manage-stories\">\n  <div class=\"rtsee-manage-stories-header\">\n    @if (!manageStories.selectedStory && !manageStories.interactiveStoryEditor) {\n      <p-button (click)=\"manageStories.selectNewStory()\"\n                label=\"Create A New Story\"\n      ></p-button>\n    }\n  </div>\n  @if (manageStories.selectedStory) {\n    <div class=\"rtsee-manage-story-container\">\n      <rtsee-manage-story [manageStory]=\"manageStories.selectedStory\"\n      ></rtsee-manage-story>\n    </div>\n  }\n  @if (manageStories.interactiveStoryEditor) {\n    <div class=\"rtsee-manage-story-container\">\n      <div style=\"margin-bottom: 1rem;\">\n        <p-button icon=\"pi pi-arrow-left\" label=\"Back to Stories\" (click)=\"manageStories.interactiveStoryEditor = null\" [text]=\"true\"></p-button>\n      </div>\n      <rtsee-interactive-story-editor [vm]=\"manageStories.interactiveStoryEditor\"></rtsee-interactive-story-editor>\n    </div>\n  }\n  @if (!manageStories.selectedStory && !manageStories.interactiveStoryEditor) {\n    <div class=\"rtsee-manage-stories-list rtsee-ordered-list\">\n      <p-orderList [value]=\"manageStories.stories\"\n                   dataKey=\"id\"\n                   [dragdrop]=\"true\"\n                   [responsive]=\"true\"\n                   [scrollHeight]=\"'40rem'\"\n                   class=\"rtsee-ordered-list-inner\"\n                   (onReorder)=\"manageStories.onReorder()\"\n      >\n        <ng-template let-option let-selected=\"selected\" #item>\n          <div class=\"rtsee-presentation-manage-stories-list-item rtsee-ordered-list-item\">\n            <img\n              [src]=\"option.imageUrl\"\n              [alt]=\"'slide_image'\"\n              [style.width]=\"'60px'\"\n              class=\"rtsee-presentation-manage-stories-list-item-image rtsee-ordered-list-item-image\"\n            />\n            <div class=\"rtsee-presentation-manage-stories-list-item-info rtsee-ordered-list-item-info\">\n            <span [ngClass]=\"{\n                        'text-sm': true,\n                        'text-surface-500': !selected,\n                        'dark:text-surface-400': !selected,\n                        'text-inherit': selected,\n                    }\"\n            >{{ option.name }}</span>\n              <div class=\"rtsee-ordered-list-item-info-buttons\">\n                <p-button label=\"Edit\"\n                          class=\"rtsee-ordered-list-item-info-button\"\n                          (click)=\"manageStories.selectStory(option.id)\"\n                ></p-button>\n                <p-button label=\"iEdit\"\n                          [severity]=\"'info'\"\n                          class=\"rtsee-ordered-list-item-info-button\"\n                          (click)=\"manageStories.selectInteractiveStory(option.id)\"\n                ></p-button>\n                <p-button label=\"Delete\"\n                          [severity]=\"'warn'\"\n                          class=\"rtsee-ordered-list-item-info-button\"\n                          (click)=\"manageStories.selectStory(option.id)\"\n                ></p-button>\n                <p-button label=\"Clone\"\n                          [severity]=\"'secondary'\"\n                          class=\"rtsee-ordered-list-item-info-button\"\n                          (click)=\"manageStories.cloneStory(option.id)\"\n                ></p-button>\n              </div>\n            </div>\n          </div>\n        </ng-template>\n      </p-orderList>\n    </div>\n  }\n</div>\n" }]
         }], propDecorators: { manageStories: [{
                 type: Input
             }] } });
@@ -5845,5 +6309,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { EntitiesConfigurationsListComponent, EntitiesListComponent, FormComponent, GtagService, ManageEntityComponent, ManageEntityConfigurationComponent, MessengerComponent, NgxService, PaymentProductSnippetComponent, PresentationComponent, ProfileComponent, RTSeeAuthComponent, RTSeeConferenceComponent, RTSeeContainerComponent, RTSeeControlsComponent, RTSeeModule, RTSeeTaskComponent, RtseeEntityCommentsComponent, RtseeEntityPreviewComponent, RtseeEntityTagsComponent, RtseeEventsDashboardComponent, RtseePeerComponent, RtseeSettingsComponent, RtseeTagGroupManageComponent, RtseeTagGroupsManageComponent, RtseeTagManageComponent, RtseeTagsAccordionMenuComponent, WorkflowStepsService };
+export { EntitiesConfigurationsListComponent, EntitiesListComponent, FormComponent, GtagService, IllustratorComponent, InteractiveStoryEditorComponent, ManageEntityComponent, ManageEntityConfigurationComponent, MessengerComponent, NgxService, PaymentProductSnippetComponent, PresentationComponent, ProfileComponent, RTSeeAuthComponent, RTSeeConferenceComponent, RTSeeContainerComponent, RTSeeControlsComponent, RTSeeModule, RTSeeTaskComponent, RtseeEntityCommentsComponent, RtseeEntityPreviewComponent, RtseeEntityTagsComponent, RtseeEventsDashboardComponent, RtseePeerComponent, RtseeSettingsComponent, RtseeTagGroupManageComponent, RtseeTagGroupsManageComponent, RtseeTagManageComponent, RtseeTagsAccordionMenuComponent, StoryElementsSectionComponent, WorkflowStepsService };
 //# sourceMappingURL=rtsee-ngx.mjs.map