@ngstarter-ui/components 1.0.21

package/fesm2022/ngstarter-ui-components-image-designer.mjs

@@ -0,0 +1,4016 @@
+import { moveItemInArray, CdkDropList, CdkDrag, CdkDragPlaceholder } from '@angular/cdk/drag-drop';
+import * as i0 from '@angular/core';
+import { signal, inject, PLATFORM_ID, Injectable, InjectionToken, computed, ChangeDetectionStrategy, Component, DestroyRef, viewChild, input, booleanAttribute, output, numberAttribute, effect, untracked, forwardRef } from '@angular/core';
+import * as i1 from '@angular/common';
+import { isPlatformBrowser, CommonModule, DecimalPipe } from '@angular/common';
+import { HttpClient } from '@angular/common/http';
+import { Subject, map, isObservable } from 'rxjs';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { Panel, PanelHeader, PanelContent, PanelSidebar } from '@ngstarter-ui/components/panel';
+import { Toolbar, ToolbarItem, ToolbarSpacer, ToolbarTitle } from '@ngstarter-ui/components/toolbar';
+import { Button } from '@ngstarter-ui/components/button';
+import { Divider } from '@ngstarter-ui/components/divider';
+import { Icon } from '@ngstarter-ui/components/icon';
+import { TabPanel, TabPanelAside, TabPanelAsideContentDirective, TabPanelContent, TabPanelItem, TabPanelItemIconDirective, TabPanelItemText, TabPanelNav } from '@ngstarter-ui/components/tab-panel';
+import { UploadTriggerDirective } from '@ngstarter-ui/components/upload';
+import { List, ListItem, ListItemLine } from '@ngstarter-ui/components/list';
+import { ProgressSpinner } from '@ngstarter-ui/components/spinner';
+import Konva from 'konva';
+import * as i1$1 from '@angular/forms';
+import { FormsModule } from '@angular/forms';
+import { TabGroup, Tab } from '@ngstarter-ui/components/tabs';
+import { ColorSwitcher } from '@ngstarter-ui/components/color-switcher';
+import { Accordion, ExpansionPanel, ExpansionPanelHeader, ExpansionPanelTitle } from '@ngstarter-ui/components/expansion';
+import { FormField, Label } from '@ngstarter-ui/components/form-field';
+import { Input } from '@ngstarter-ui/components/input';
+import { Select, Option } from '@ngstarter-ui/components/select';
+import { ScrollbarArea } from '@ngstarter-ui/components/scrollbar-area';
+import { ComponentPortal, CdkPortalOutlet } from '@angular/cdk/portal';
+import { Slider, SliderThumb } from '@ngstarter-ui/components/slider';
+import { Popover, PopoverContent, PopoverTriggerForDirective } from '@ngstarter-ui/components/popover';
+import { Menu, MenuItem, MenuTrigger } from '@ngstarter-ui/components/menu';
+import { ButtonToggle, ButtonToggleGroup } from '@ngstarter-ui/components/button-toggle';
+import { Ripple } from '@ngstarter-ui/components/core';
+import { SlideToggle } from '@ngstarter-ui/components/slide-toggle';
+import { ColorPicker, ColorPickerThumbnail, ColorPickerTriggerForDirective } from '@ngstarter-ui/components/color-picker';
+
+/**
+ * A custom Konva filter for color tinting.
+ * It modifies existing pixel colors by a factor without completely replacing them.
+ * Factors are between -1 and 1.
+ */
+const TintFilter = function (imageData) {
+    const data = imageData.data;
+    const n = data.length;
+    const tintR = this.getAttr('tintR') || 0;
+    const tintG = this.getAttr('tintG') || 0;
+    const tintB = this.getAttr('tintB') || 0;
+    if (tintR === 0 && tintG === 0 && tintB === 0)
+        return;
+    for (let i = 0; i < n; i += 4) {
+        if (tintR > 0)
+            data[i] += (255 - data[i]) * tintR;
+        else if (tintR < 0)
+            data[i] += data[i] * tintR;
+        if (tintG > 0)
+            data[i + 1] += (255 - data[i + 1]) * tintG;
+        else if (tintG < 0)
+            data[i + 1] += data[i + 1] * tintG;
+        if (tintB > 0)
+            data[i + 2] += (255 - data[i + 2]) * tintB;
+        else if (tintB < 0)
+            data[i + 2] += data[i + 2] * tintB;
+    }
+};
+class ImageDesignerService {
+    stage;
+    workspaceLayer;
+    uiLayer;
+    canvasRect;
+    maskOverlay;
+    resizeObserver;
+    minScale = 0.1;
+    maxScale = 5;
+    scale = signal(1, ...(ngDevMode ? [{ debugName: "scale" }] : /* istanbul ignore next */ []));
+    isInitialized = signal(false, ...(ngDevMode ? [{ debugName: "isInitialized" }] : /* istanbul ignore next */ []));
+    isBrowser = isPlatformBrowser(inject(PLATFORM_ID));
+    loadedFonts = new Set();
+    fonts = signal([
+        'Inter',
+        'Roboto',
+        'Open Sans',
+        'Lato',
+        'Montserrat',
+        'Oswald',
+        'Source Sans Pro',
+        'Slabo 27px',
+        'Raleway',
+        'PT Sans',
+        'Merriweather',
+        'Nunito',
+        'Playfair Display',
+        'Poppins',
+        'Ubuntu',
+        'Lora',
+        'Muli',
+        'Arvo',
+        'Rubik',
+        'Courier Prime',
+        'Pacifico',
+        'Dancing Script',
+        'Bangers',
+        'Special Elite',
+        'Press Start 2P',
+        'Monoton',
+        'Creepster',
+        'Lobster',
+        'Orbitron',
+        'Righteous',
+        'Satisfy',
+        'Shadows Into Light',
+        'Permanent Marker',
+        'Fredoka One',
+        'Amatic SC',
+        'Cinzel',
+        'Great Vibes',
+        'Kaushan Script'
+    ], ...(ngDevMode ? [{ debugName: "fonts" }] : /* istanbul ignore next */ []));
+    _layers = signal([], ...(ngDevMode ? [{ debugName: "_layers" }] : /* istanbul ignore next */ []));
+    layers = this._layers.asReadonly();
+    selectedLayerId = signal(null, ...(ngDevMode ? [{ debugName: "selectedLayerId" }] : /* istanbul ignore next */ []));
+    _change$ = new Subject();
+    change$ = this._change$.asObservable();
+    undoStack = [];
+    redoStack = [];
+    canUndo = signal(false, ...(ngDevMode ? [{ debugName: "canUndo" }] : /* istanbul ignore next */ []));
+    canRedo = signal(false, ...(ngDevMode ? [{ debugName: "canRedo" }] : /* istanbul ignore next */ []));
+    historyLimit = 50;
+    transformer;
+    selectionRect;
+    hoverRect;
+    hoveredShape;
+    selectionBordersGroup;
+    selectionStartPos;
+    isSelecting = false;
+    isDragging = false;
+    wasSelectedBeforeClick = false;
+    snapLines = [];
+    snapSettings = {
+        showGuidelines: true,
+        snapToShapes: true,
+        snapToStageCenter: true,
+        snapToStageBorders: true,
+        guidelineColor: 'blue',
+        snapRange: 5
+    };
+    defaultFont = 'Inter';
+    ngOnDestroy() {
+        this.destroy();
+    }
+    async init(container, imageSize, defaultFont = 'Inter', scale = 1, minScale = 0.1, maxScale = 5) {
+        if (!this.isBrowser) {
+            console.log('ImageDesignerService.init skipped (not a browser)');
+            return;
+        }
+        console.log('ImageDesignerService.init starting', { container, imageSize, defaultFont, scale, minScale, maxScale });
+        console.log('Container dimensions:', container.offsetWidth, 'x', container.offsetHeight);
+        this.defaultFont = defaultFont;
+        this.minScale = minScale;
+        this.maxScale = maxScale;
+        this.setScale(scale);
+        try {
+            this.stage = new Konva.Stage({
+                container: container,
+                width: container.offsetWidth || imageSize.width + 100,
+                height: container.offsetHeight || imageSize.height + 100,
+            });
+            console.log('Konva.Stage created');
+        }
+        catch (e) {
+            console.error('Failed to create Konva.Stage:', e);
+            return;
+        }
+        this.workspaceLayer = new Konva.Layer();
+        this.stage.add(this.workspaceLayer);
+        this.uiLayer = new Konva.Layer();
+        this.stage.add(this.uiLayer);
+        this.canvasRect = new Konva.Rect({
+            x: (this.stage.width() || imageSize.width) / 2,
+            y: (this.stage.height() || imageSize.height) / 2,
+            width: imageSize.width,
+            height: imageSize.height,
+            fill: 'white',
+            stroke: '#d9dcdf',
+            strokeWidth: 1,
+            name: 'canvasRect'
+        });
+        this.canvasRect.offsetX(imageSize.width / 2);
+        this.canvasRect.offsetY(imageSize.height / 2);
+        this.canvasRect.scaleX(this.scale());
+        this.canvasRect.scaleY(this.scale());
+        this.workspaceLayer.add(this.canvasRect);
+        this.transformer = new Konva.Transformer({
+            rotateEnabled: true,
+            enabledAnchors: ['top-left', 'top-right', 'bottom-left', 'bottom-right', 'top-center', 'bottom-center', 'middle-left', 'middle-right'],
+            name: 'transformer',
+            // Ensure transformer is always above the mask
+            boundBoxFunc: (oldBox, newBox) => {
+                // Limit minimum size
+                if (Math.abs(newBox.width) < 5 || Math.abs(newBox.height) < 5) {
+                    return oldBox;
+                }
+                return newBox;
+            },
+        });
+        this.uiLayer.add(this.transformer);
+        this.transformer.on('transform', () => {
+            this.updateSelectionBorders();
+            const nodes = this.transformer?.nodes() || [];
+            nodes.forEach((node) => {
+                if (node instanceof Konva.Text) {
+                    // If we resized vertically (scaleY changed), scale fontSize
+                    const scaleY = node.scaleY();
+                    if (Math.abs(scaleY - this.scale()) > 0.001) {
+                        node.fontSize(node.fontSize() * (scaleY / this.scale()));
+                    }
+                    // Scale width according to scaleX
+                    const scaleX = node.scaleX();
+                    node.width(node.width() * (scaleX / this.scale()));
+                    // Reset scale to current canvas scale
+                    node.scaleX(this.scale());
+                    node.scaleY(this.scale());
+                    // Update offset because width/fontSize changed
+                    node.offsetX(node.width() / 2);
+                    node.offsetY(node.height() / 2);
+                }
+            });
+            if (nodes.length > 0) {
+                const guides = this.getSnappingGuides(nodes);
+                this.drawSnappingLines(guides);
+                this.updateShapesOriginalPositions(nodes);
+            }
+            this.notifyChange();
+        });
+        this.transformer.on('dragmove', (e) => {
+            const target = e.target;
+            if (this.transformer && target === this.transformer) {
+                const nodes = this.transformer.nodes();
+                if (nodes.length > 0) {
+                    const targetBox = this.getNodesClientRect(nodes);
+                    const guides = this.getSnappingGuides(nodes);
+                    let dx = 0;
+                    let dy = 0;
+                    const vGuide = guides.vertical[0];
+                    const hGuide = guides.horizontal[0];
+                    if (vGuide) {
+                        dx = vGuide.guide - vGuide.offset - targetBox.x;
+                    }
+                    if (hGuide) {
+                        dy = hGuide.guide - hGuide.offset - targetBox.y;
+                    }
+                    if (dx !== 0 || dy !== 0) {
+                        nodes.forEach((node) => {
+                            const p = node.getAbsolutePosition();
+                            node.setAbsolutePosition({
+                                x: p.x + dx,
+                                y: p.y + dy
+                            });
+                        });
+                    }
+                    const finalGuides = this.getSnappingGuides(nodes);
+                    this.drawSnappingLines(finalGuides);
+                    this.updateSelectionBorders();
+                }
+            }
+        });
+        this.transformer.on('dragend', () => {
+            this.clearSnapLines();
+            const nodes = this.transformer?.nodes() || [];
+            if (nodes.length > 0) {
+                this.updateShapesOriginalPositions(nodes);
+            }
+            this.notifyChange();
+        });
+        this.transformer.on('transformend', () => {
+            this.clearSnapLines();
+            const nodes = this.transformer?.nodes() || [];
+            if (nodes.length > 0) {
+                nodes.forEach(node => {
+                    if (!(node instanceof Konva.Text)) {
+                        const scaleX = node.scaleX();
+                        const scaleY = node.scaleY();
+                        node.width(node.width() * (scaleX / this.scale()));
+                        node.height(node.height() * (scaleY / this.scale()));
+                        node.scaleX(this.scale());
+                        node.scaleY(this.scale());
+                    }
+                    // If the node has effects, we MUST re-cache it with the new size
+                    const id = node.id();
+                    const config = this._layers().find(l => l.id === id);
+                    if (config) {
+                        // Re-apply effects and re-cache
+                        this.applyEffectsToShape(node, config);
+                    }
+                });
+                // We update the signal AFTER applying effects to ensure consistency
+                this.updateShapesOriginalPositions(nodes);
+            }
+            this.notifyChange();
+        });
+        this.selectionRect = new Konva.Rect({
+            fill: 'rgba(0,0,255,0.1)',
+            stroke: '#3b82f6',
+            strokeWidth: 1,
+            visible: false,
+            name: 'selectionRect',
+            zIndex: 1001
+        });
+        this.uiLayer.add(this.selectionRect);
+        this.hoverRect = new Konva.Rect({
+            stroke: '#3b82f6',
+            strokeWidth: 1,
+            listening: false,
+            visible: false,
+            name: 'hoverRect'
+        });
+        this.uiLayer.add(this.hoverRect);
+        this.selectionBordersGroup = new Konva.Group({
+            listening: false,
+            name: 'selectionBordersGroup'
+        });
+        this.uiLayer.add(this.selectionBordersGroup);
+        this.maskOverlay = new Konva.Shape({
+            fill: 'rgba(255, 255, 255, 0.8)',
+            listening: false,
+            name: 'maskOverlay',
+            zIndex: 1000,
+            fillRule: 'evenodd',
+            sceneFunc: (context, shape) => {
+                const stage = shape.getStage();
+                if (!stage || !this.canvasRect)
+                    return;
+                const stageWidth = stage.width();
+                const stageHeight = stage.height();
+                const canvasX = this.canvasRect.x();
+                const canvasY = this.canvasRect.y();
+                const canvasWidth = this.canvasRect.width() * this.canvasRect.scaleX();
+                const canvasHeight = this.canvasRect.height() * this.canvasRect.scaleY();
+                context.beginPath();
+                // Наружный прямоугольник (весь Stage)
+                context.rect(0, 0, stageWidth, stageHeight);
+                // Внутренний прямоугольник (canvasRect)
+                // Since canvasRect has offset at its center, its top-left corner is at (x - width*scale/2, y - height*scale/2)
+                // We draw it in counter-clockwise direction to create a hole
+                context.rect(canvasX + canvasWidth / 2, canvasY - canvasHeight / 2, -canvasWidth, canvasHeight);
+                context.closePath();
+                context.fillShape(shape);
+            }
+        });
+        this.uiLayer.add(this.maskOverlay);
+        await this.loadAllFonts();
+        this.updateSize(container, imageSize);
+        // Add a small delay to ensure everything is settled and then center again
+        setTimeout(() => {
+            this.updateSize(container, imageSize);
+            this.workspaceLayer?.batchDraw();
+            this.uiLayer?.batchDraw();
+        }, 50);
+        // Final draw to ensure everything is rendered
+        this.workspaceLayer?.batchDraw();
+        this.uiLayer?.batchDraw();
+        console.log('Konva Canvas Rect and layers added and drawn');
+        this.setupResizeObserver(container, imageSize);
+        this.setupSelectionListeners();
+        this.isInitialized.set(true);
+        this.undoStack = [this.getSnapshot()];
+        this.updateHistorySignals();
+    }
+    handleGlobalMouseUp = (e) => {
+        if (!this.isSelecting) {
+            return;
+        }
+        this.isSelecting = false;
+        if (!this.selectionRect || !this.workspaceLayer || !this.transformer)
+            return;
+        if (!this.selectionRect.visible()) {
+            // If no selection rect was drawn, but we were selecting,
+            // it means it was a simple click that didn't move much.
+            const pos = this.stage?.getPointerPosition();
+            const shape = pos ? this.stage?.getIntersection(pos) : null;
+            if (shape && shape.id()) {
+                this.selectLayer(shape.id());
+            }
+            else {
+                this.selectLayer(null);
+            }
+            return;
+        }
+        this.selectionRect.visible(false);
+        const box = this.selectionRect.getClientRect();
+        const shapes = this.workspaceLayer.find('.rect, .text, .image, .pattern').filter((shape) => {
+            if (shape === this.canvasRect || shape === this.selectionRect || shape === this.transformer) {
+                return false;
+            }
+            if (!shape.visible() || !shape.listening()) {
+                return false;
+            }
+            const layer = this._layers().find(l => l.id === shape.id());
+            if (layer?.locked) {
+                return false;
+            }
+            return Konva.Util.haveIntersection(box, shape.getClientRect());
+        });
+        this.transformer.nodes(shapes);
+        if (shapes.length === 1) {
+            const shape = shapes[0];
+            const layer = this._layers().find(l => l.id === shape.id());
+            this.updateTransformer(shape, !!layer?.locked);
+            this.selectedLayerId.set(shape.id());
+        }
+        else if (shapes.length > 1) {
+            // Multiple selection: show default anchors for all
+            this.transformer.setAttrs({
+                rotateEnabled: true,
+                enabledAnchors: ['top-left', 'top-right', 'bottom-left', 'bottom-right', 'top-center', 'bottom-center', 'middle-left', 'middle-right'],
+            });
+            this.selectedLayerId.set(null); // Or some multi-select id
+        }
+        this.transformer.forceUpdate();
+        this.updateSelectionBorders();
+        this.workspaceLayer.batchDraw();
+    };
+    handleGlobalMouseMove = (e) => {
+        if (!this.isSelecting || !this.selectionRect || !this.selectionStartPos || !this.stage) {
+            return;
+        }
+        const container = this.stage.container();
+        const rect = container.getBoundingClientRect();
+        let clientX, clientY;
+        if ('touches' in e) {
+            clientX = e.touches[0].clientX;
+            clientY = e.touches[0].clientY;
+        }
+        else {
+            clientX = e.clientX;
+            clientY = e.clientY;
+        }
+        const pos = {
+            x: clientX - rect.left,
+            y: clientY - rect.top
+        };
+        const rectX = Math.min(pos.x, this.selectionStartPos.x);
+        const rectY = Math.min(pos.y, this.selectionStartPos.y);
+        const rectWidth = Math.abs(pos.x - this.selectionStartPos.x);
+        const rectHeight = Math.abs(pos.y - this.selectionStartPos.y);
+        if (!isNaN(rectX) && !isNaN(rectY) && !isNaN(rectWidth) && !isNaN(rectHeight)) {
+            if (rectWidth > 5 || rectHeight > 5) {
+                this.selectionRect.visible(true);
+            }
+            this.selectionRect.setAttrs({
+                x: rectX,
+                y: rectY,
+                width: rectWidth,
+                height: rectHeight,
+                strokeWidth: 1,
+            });
+            this.selectionRect.moveToTop();
+        }
+        this.uiLayer?.moveToTop();
+        this.workspaceLayer?.batchDraw();
+        this.uiLayer?.batchDraw();
+    };
+    makeTextEditable(textNode) {
+        if (!this.stage)
+            return;
+        // Save original text and settings to restore if cancelled
+        textNode.setAttr('originalText', textNode.text());
+        textNode.setAttr('originalWidth', textNode.width());
+        // Fix width to current width during editing to enable wrapping
+        const initialWidth = textNode.width();
+        textNode.width(initialWidth);
+        // Hide text node but keep transformer visible
+        textNode.opacity(0);
+        this.transformer?.forceUpdate();
+        this.updateSelectionBorders();
+        const stage = this.stage;
+        const textPosition = textNode.getAbsolutePosition();
+        const stageBox = stage.container().getBoundingClientRect();
+        const areaPosition = {
+            x: stageBox.left + textPosition.x,
+            y: stageBox.top + textPosition.y,
+        };
+        // Create textarea
+        const textarea = document.createElement('textarea');
+        document.body.appendChild(textarea);
+        // Set styles
+        textarea.value = textNode.text();
+        textarea.style.position = 'absolute';
+        textarea.style.top = areaPosition.y + 'px';
+        textarea.style.left = areaPosition.x + 'px';
+        textarea.style.width = (textNode.width() * textNode.getAbsoluteScale().x) + 'px';
+        textarea.style.height = (textNode.height() * textNode.getAbsoluteScale().y + 10) + 'px';
+        textarea.style.fontSize = (textNode.fontSize() * textNode.getAbsoluteScale().y) + 'px';
+        textarea.style.border = 'none';
+        textarea.style.padding = (textNode.padding() * textNode.getAbsoluteScale().x) + 'px';
+        textarea.style.margin = '0px';
+        textarea.style.overflow = 'hidden';
+        textarea.style.background = 'none';
+        textarea.style.outline = 'none';
+        textarea.style.resize = 'none';
+        textarea.style.lineHeight = textNode.lineHeight().toString();
+        textarea.style.fontFamily = textNode.fontFamily();
+        textarea.style.fontWeight = (textNode.getAttr('fontWeight') || textNode.fontStyle() || 'normal').toString();
+        textarea.style.fontStyle = textNode.fontStyle()?.includes('italic') ? 'italic' : 'normal';
+        textarea.style.transformOrigin = 'left top';
+        textarea.style.textAlign = textNode.align();
+        textarea.style.color = textNode.fill();
+        textarea.style.boxSizing = 'border-box';
+        textarea.style.zIndex = '1000';
+        const rotation = textNode.getAbsoluteRotation();
+        let transform = '';
+        if (rotation) {
+            transform += 'rotateZ(' + rotation + 'deg)';
+        }
+        // Offset based on Konva's offset (textNode is centered by default in addLayer)
+        const px = 0;
+        // apply configuration
+        // we need to skip transform for now as it's tricky with absolute positioning and offsets
+        // But since we use absolutePosition which already accounts for many things, let's see.
+        // If textNode has offset (centered), we need to adjust textarea position
+        const offsetX = textNode.offsetX() * textNode.getAbsoluteScale().x;
+        const offsetY = textNode.offsetY() * textNode.getAbsoluteScale().y;
+        textarea.style.left = (areaPosition.x - offsetX) + 'px';
+        textarea.style.top = (areaPosition.y - offsetY) + 'px';
+        textarea.style.transform = transform;
+        textarea.focus();
+        let isFinished = false;
+        const removeTextarea = () => {
+            if (isFinished)
+                return;
+            isFinished = true;
+            const originalText = textNode.getAttr('originalText');
+            const originalWidth = textNode.getAttr('originalWidth');
+            if (originalText !== undefined) {
+                textNode.text(originalText);
+            }
+            if (originalWidth !== undefined) {
+                textNode.width(originalWidth);
+            }
+            if (textarea.parentNode) {
+                textarea.parentNode.removeChild(textarea);
+            }
+            window.removeEventListener('click', handleOutsideClick);
+            textarea.removeEventListener('blur', handleBlur);
+            textNode.opacity(1);
+            this.transformer?.forceUpdate();
+            this.updateSelectionBorders();
+            this.workspaceLayer?.batchDraw();
+        };
+        const updateText = () => {
+            const newText = textarea.value;
+            const originalText = textNode.getAttr('originalText');
+            if (newText !== originalText) {
+                const id = textNode.id();
+                if (id) {
+                    // Keep the fixed width when updating the layer
+                    this.updateLayer(id, { text: newText, width: textNode.width() });
+                }
+                else {
+                    textNode.text(newText);
+                    textNode.offsetX(textNode.width() / 2);
+                    textNode.offsetY(textNode.height() / 2);
+                    this.workspaceLayer?.batchDraw();
+                }
+                // Restore transformer nodes after update if it was selected
+                if (this.selectedLayerId() === textNode.id()) {
+                    this.transformer?.nodes([textNode]);
+                }
+            }
+            // Clear originalText and originalWidth after update so removeTextarea doesn't restore it
+            textNode.setAttr('originalText', undefined);
+            textNode.setAttr('originalWidth', undefined);
+        };
+        const handleBlur = () => {
+            updateText();
+            removeTextarea();
+        };
+        textarea.addEventListener('blur', handleBlur);
+        textarea.addEventListener('keydown', (e) => {
+            // hide on enter
+            // but don't hide on shift + enter
+            if (e.keyCode === 13 && !e.shiftKey) {
+                e.preventDefault();
+                textarea.blur();
+            }
+            // on escape do not update
+            if (e.keyCode === 27) {
+                removeTextarea();
+            }
+        });
+        textarea.addEventListener('input', () => {
+            // update node text to update transformer
+            textNode.text(textarea.value);
+            this.transformer?.forceUpdate();
+            this.updateSelectionBorders();
+            // re-calculate size
+            // Width is fixed, only height should change
+            textarea.style.height = 'auto';
+            textarea.style.height = textarea.scrollHeight + 'px';
+        });
+        const handleOutsideClick = (e) => {
+            if (e.target !== textarea) {
+                // blur will handle the rest
+                textarea.blur();
+            }
+        };
+        // Use timeout to avoid immediate trigger from the same click that opened it
+        setTimeout(() => {
+            window.addEventListener('click', handleOutsideClick);
+        });
+    }
+    setupSelectionListeners() {
+        if (!this.stage)
+            return;
+        if (this.isBrowser) {
+            window.addEventListener('mouseup', this.handleGlobalMouseUp);
+            window.addEventListener('touchend', this.handleGlobalMouseUp);
+            window.addEventListener('mousemove', this.handleGlobalMouseMove);
+            window.addEventListener('touchmove', this.handleGlobalMouseMove);
+        }
+        this.stage.on('mousedown touchstart', (e) => {
+            // If right click - do nothing
+            if (e.evt instanceof MouseEvent && e.evt.button === 2) {
+                return;
+            }
+            // If click on transformer - do nothing
+            const isTransformer = e.target.getParent()?.className === 'Transformer';
+            if (isTransformer) {
+                return;
+            }
+            // If click on empty area, canvasRect or a locked layer - start selection
+            const shapeAtPointer = e.target;
+            const layerConfig = this._layers().find(l => l.id === shapeAtPointer.id());
+            const isLocked = !!layerConfig?.locked;
+            if (e.target === this.stage || e.target === this.canvasRect || isLocked) {
+                this.isSelecting = true;
+                this.uiLayer?.moveToTop();
+                const pos = this.stage?.getPointerPosition();
+                if (pos) {
+                    this.selectionStartPos = { x: pos.x, y: pos.y };
+                    this.selectionRect?.visible(false);
+                    this.selectionRect?.width(0);
+                    this.selectionRect?.height(0);
+                    this.selectionRect?.moveToTop();
+                }
+                return;
+            }
+            // Find the clicked shape
+            const shape = e.target;
+            const id = shape.id();
+            if (id) {
+                const isShiftPressed = e.evt.shiftKey;
+                const currentNodes = this.transformer?.nodes() || [];
+                this.wasSelectedBeforeClick = currentNodes.includes(shape);
+                if (isShiftPressed) {
+                    // Toggle selection
+                    if (currentNodes.includes(shape)) {
+                        const newNodes = currentNodes.filter(n => n !== shape);
+                        this.transformer?.nodes(newNodes);
+                        this.updateSelectionBorders();
+                        if (newNodes.length === 1 && newNodes[0].id()) {
+                            this.selectedLayerId.set(newNodes[0].id());
+                        }
+                        else if (newNodes.length === 0) {
+                            this.selectedLayerId.set(null);
+                        }
+                        else {
+                            this.selectedLayerId.set(null); // Multi-selection or none
+                        }
+                    }
+                    else {
+                        const newNodes = [...currentNodes, shape];
+                        this.transformer?.nodes(newNodes);
+                        this.updateSelectionBorders();
+                        if (newNodes.length === 1) {
+                            this.selectedLayerId.set(shape.id());
+                        }
+                        else {
+                            this.selectedLayerId.set(null); // Multi-selection
+                        }
+                    }
+                }
+                else {
+                    // Normal click
+                    // Only change selection on mousedown if the object is NOT already selected.
+                    // This allows moving the whole selection group.
+                    if (!currentNodes.includes(shape)) {
+                        this.selectLayer(id);
+                    }
+                }
+            }
+            else {
+                // Click on something without ID (like the canvas but not the canvasRect handler above)
+                this.selectLayer(null);
+            }
+        });
+        this.stage.on('click tap', (e) => {
+            // If right click - do nothing
+            if (e.evt instanceof MouseEvent && e.evt.button === 2) {
+                return;
+            }
+            // If click on transformer - do nothing
+            const isTransformer = e.target.getParent()?.className === 'Transformer';
+            if (isTransformer) {
+                return;
+            }
+            const shape = e.target;
+            const currentNodesOnStage = this.transformer?.nodes() || [];
+            if (this.wasSelectedBeforeClick && currentNodesOnStage.length === 1 && currentNodesOnStage[0] === shape && shape instanceof Konva.Text) {
+                this.makeTextEditable(shape);
+                return;
+            }
+            // If click on empty area or canvasRect - do nothing
+            if (e.target === this.stage || e.target === this.canvasRect) {
+                return;
+            }
+            const id = shape.id();
+            if (!id)
+                return;
+            const isShiftPressed = e.evt.shiftKey;
+            if (isShiftPressed)
+                return; // Handled in mousedown
+            const currentNodesOnClick = this.transformer?.nodes() || [];
+            // If we clicked on an object that is part of a multi-selection,
+            // and it was a simple click (not a drag), then select only this object.
+            if (currentNodesOnClick.length > 1 && currentNodesOnClick.includes(shape)) {
+                this.selectLayer(id);
+            }
+        });
+        this.stage.on('mousemove touchmove', (e) => {
+            // Logic moved to handleGlobalMouseMove
+        });
+    }
+    selectLayer(id) {
+        this.selectedLayerId.set(id);
+        this.hideHover();
+        if (!this.transformer || !this.workspaceLayer)
+            return;
+        if (!id) {
+            this.transformer.nodes([]);
+        }
+        else {
+            const shape = this.workspaceLayer.findOne('#' + id);
+            if (shape && shape.visible()) {
+                const layer = this._layers().find(l => l.id === id);
+                this.transformer.nodes([shape]);
+                this.updateTransformer(shape, !!layer?.locked);
+            }
+            else {
+                this.transformer.nodes([]);
+            }
+        }
+        this.updateSelectionBorders();
+        this.transformer.moveToTop();
+        this.uiLayer?.moveToTop();
+        this.workspaceLayer.batchDraw();
+        this.uiLayer?.batchDraw();
+    }
+    updateTransformer(shape, isLocked) {
+        if (!this.transformer)
+            return;
+        if (isLocked) {
+            this.transformer.setAttrs({
+                rotateEnabled: false,
+                enabledAnchors: [],
+            });
+        }
+        else {
+            if (shape instanceof Konva.Text) {
+                this.transformer.setAttrs({
+                    rotateEnabled: true,
+                    enabledAnchors: ['top-left', 'top-right', 'bottom-left', 'bottom-right', 'middle-left', 'middle-right'],
+                });
+            }
+            else {
+                this.transformer.setAttrs({
+                    rotateEnabled: true,
+                    enabledAnchors: ['top-left', 'top-right', 'bottom-left', 'bottom-right', 'top-center', 'bottom-center', 'middle-left', 'middle-right'],
+                });
+            }
+        }
+        this.transformer.forceUpdate();
+    }
+    toggleLayerVisibility(id) {
+        const layer = this._layers().find(l => l.id === id);
+        if (!layer || !this.workspaceLayer)
+            return;
+        const newVisible = layer.visible === false;
+        this._layers.update(layers => layers.map(l => l.id === id ? { ...l, visible: newVisible } : l));
+        const shape = this.workspaceLayer.findOne('#' + id);
+        if (shape) {
+            shape.visible(newVisible);
+            if (!newVisible && this.selectedLayerId() === id) {
+                this.selectLayer(null);
+            }
+            this.workspaceLayer.batchDraw();
+        }
+    }
+    toggleLayerLock(id) {
+        const layer = this._layers().find(l => l.id === id);
+        if (!layer || !this.workspaceLayer)
+            return;
+        const newLocked = !layer.locked;
+        this._layers.update(layers => layers.map(l => l.id === id ? { ...l, locked: newLocked } : l));
+        const shape = this.workspaceLayer.findOne('#' + id);
+        if (shape) {
+            shape.listening(true);
+            shape.draggable(!newLocked);
+            // Update transformer if the locked shape is currently selected
+            if (this.selectedLayerId() === id) {
+                this.updateTransformer(shape, newLocked);
+            }
+            this.workspaceLayer.batchDraw();
+        }
+    }
+    async flipHorizontal(id) {
+        const layer = this._layers().find(l => l.id === id);
+        if (!layer)
+            return;
+        const currentScaleX = layer['scaleX'] ?? 1;
+        await this.updateLayer(id, { scaleX: currentScaleX * -1 });
+    }
+    async flipVertical(id) {
+        const layer = this._layers().find(l => l.id === id);
+        if (!layer)
+            return;
+        const currentScaleY = layer['scaleY'] ?? 1;
+        await this.updateLayer(id, { scaleY: currentScaleY * -1 });
+    }
+    async fitToPage(id) {
+        const layer = this._layers().find(l => l.id === id);
+        if (!layer || !this.canvasRect)
+            return;
+        const canvasWidth = this.canvasRect.width();
+        const canvasHeight = this.canvasRect.height();
+        const canvasCenterX = this.canvasRect.x();
+        const canvasCenterY = this.canvasRect.y();
+        const shape = this.workspaceLayer?.findOne('#' + id);
+        if (!shape)
+            return;
+        // Use actual shape dimensions if available, otherwise fallback to layer config
+        const layerWidth = (shape instanceof Konva.Text) ? shape.width() : (layer.width || shape.width());
+        const layerHeight = (shape instanceof Konva.Text) ? shape.height() : (layer.height || shape.height());
+        if (layerWidth === 0 || layerHeight === 0)
+            return;
+        const scale = Math.min(canvasWidth / layerWidth, canvasHeight / layerHeight) * this.scale();
+        await this.updateLayer(id, {
+            x: canvasCenterX,
+            y: canvasCenterY,
+            width: layerWidth,
+            height: layerHeight,
+            scaleX: scale,
+            scaleY: scale,
+            rotation: 0
+        });
+    }
+    async fillPage(id) {
+        const layer = this._layers().find(l => l.id === id);
+        if (!layer || !this.canvasRect)
+            return;
+        const canvasWidth = this.canvasRect.width();
+        const canvasHeight = this.canvasRect.height();
+        const canvasCenterX = this.canvasRect.x();
+        const canvasCenterY = this.canvasRect.y();
+        const shape = this.workspaceLayer?.findOne('#' + id);
+        if (!shape)
+            return;
+        // Use actual shape dimensions if available, otherwise fallback to layer config
+        const layerWidth = (shape instanceof Konva.Text) ? shape.width() : (layer.width || shape.width());
+        const layerHeight = (shape instanceof Konva.Text) ? shape.height() : (layer.height || shape.height());
+        if (layerWidth === 0 || layerHeight === 0)
+            return;
+        const scale = Math.max(canvasWidth / layerWidth, canvasHeight / layerHeight) * this.scale();
+        await this.updateLayer(id, {
+            x: canvasCenterX,
+            y: canvasCenterY,
+            width: layerWidth,
+            height: layerHeight,
+            scaleX: scale,
+            scaleY: scale,
+            rotation: 0
+        });
+    }
+    deleteLayer(id) {
+        const layer = this._layers().find(l => l.id === id);
+        if (!layer || !this.workspaceLayer || layer.locked)
+            return;
+        this.hideHover();
+        // Remove from signal
+        this._layers.update(layers => layers.filter(l => l.id !== id));
+        this.notifyChange();
+        // Remove from Konva
+        const shape = this.workspaceLayer.findOne('#' + id);
+        if (shape) {
+            if (this.transformer) {
+                const nodes = this.transformer.nodes();
+                if (nodes.includes(shape)) {
+                    this.transformer.nodes(nodes.filter(n => n !== shape));
+                }
+            }
+            shape.destroy();
+            if (this.selectedLayerId() === id) {
+                this.selectLayer(null);
+            }
+            else {
+                this.updateSelectionBorders();
+            }
+            this.workspaceLayer.batchDraw();
+        }
+    }
+    deleteSelectedLayers() {
+        if (!this.transformer || !this.workspaceLayer)
+            return;
+        const nodes = this.transformer.nodes();
+        if (nodes.length === 0)
+            return;
+        this.hideHover();
+        const idsToDelete = nodes.map(node => node.id()).filter((id) => {
+            const layer = this._layers().find(l => l.id === id);
+            return !!id && !!layer && !layer.locked;
+        });
+        if (idsToDelete.length === 0)
+            return;
+        // Remove from signal
+        this._layers.update(layers => layers.filter(l => !l.id || !idsToDelete.includes(l.id)));
+        this.notifyChange();
+        // Remove from Konva
+        idsToDelete.forEach(id => {
+            const shape = this.workspaceLayer?.findOne('#' + id);
+            if (shape) {
+                shape.destroy();
+            }
+        });
+        this.transformer.nodes([]);
+        this.selectLayer(null);
+        this.workspaceLayer.batchDraw();
+    }
+    moveSelectedLayers(dx, dy) {
+        if (!this.transformer || !this.workspaceLayer)
+            return;
+        const nodes = this.transformer.nodes();
+        if (nodes.length === 0)
+            return;
+        let moved = false;
+        nodes.forEach(node => {
+            const id = node.id();
+            const layer = this._layers().find(l => l.id === id);
+            if (layer && !layer.locked) {
+                node.x(node.x() + dx);
+                node.y(node.y() + dy);
+                moved = true;
+            }
+        });
+        if (moved) {
+            this.updateSelectionBorders();
+            this.workspaceLayer.batchDraw();
+            this.updateShapesOriginalPositions(nodes);
+            this.notifyChange();
+        }
+    }
+    showHover(shape) {
+        if (!this.hoverRect || !this.workspaceLayer)
+            return;
+        this.hoveredShape = shape;
+        const box = shape.getClientRect({ relativeTo: this.workspaceLayer });
+        this.hoverRect.setAttrs({
+            x: box.x,
+            y: box.y,
+            width: box.width,
+            height: box.height,
+            strokeWidth: 1,
+            visible: true
+        });
+        this.hoverRect.moveToTop();
+        this.workspaceLayer.batchDraw();
+    }
+    hideHover() {
+        this.hoveredShape = undefined;
+        if (!this.hoverRect)
+            return;
+        this.hoverRect.visible(false);
+        this.workspaceLayer?.batchDraw();
+    }
+    updateSelectionBorders() {
+        if (!this.selectionBordersGroup || !this.transformer || !this.workspaceLayer)
+            return;
+        this.selectionBordersGroup.destroyChildren();
+        const nodes = this.transformer.nodes();
+        if (nodes.length > 1) {
+            nodes.forEach(node => {
+                const box = node.getClientRect({ relativeTo: this.workspaceLayer });
+                const rect = new Konva.Rect({
+                    x: box.x,
+                    y: box.y,
+                    width: box.width,
+                    height: box.height,
+                    stroke: '#3b82f6',
+                    strokeWidth: 1,
+                    listening: false,
+                    name: 'selectionBorder'
+                });
+                this.selectionBordersGroup?.add(rect);
+            });
+            this.selectionBordersGroup.visible(true);
+        }
+        else {
+            this.selectionBordersGroup.visible(false);
+        }
+        this.selectionBordersGroup.moveToTop();
+        this.uiLayer?.batchDraw();
+    }
+    async addLayer(config, updateList = true) {
+        if (!this.workspaceLayer || !this.canvasRect)
+            return undefined;
+        if (config.type === 'text' && config['fontFamily']) {
+            await this.loadFont(config['fontFamily']);
+        }
+        else if (config.type === 'text' && !config['fontFamily']) {
+            await this.loadFont(this.defaultFont);
+        }
+        if (updateList) {
+            const newConfig = { ...config, id: config.id || Math.random().toString(36).substr(2, 9) };
+            // New layer should be at the top of the UI list (index 0)
+            this._layers.update(layers => [newConfig, ...layers]);
+            config = newConfig;
+            if (!this.isSnapshotLoading) {
+                this.notifyChange();
+            }
+        }
+        let shape;
+        const canvasWidth = this.canvasRect?.width() || 0;
+        const canvasHeight = this.canvasRect?.height() || 0;
+        const canvasX = this.canvasRect?.x() || 0;
+        const canvasY = this.canvasRect?.y() || 0;
+        // x and y are relative to canvas center
+        const x = (config.x ?? 0) * this.scale() + canvasX;
+        const y = (config.y ?? 0) * this.scale() + canvasY;
+        if (isNaN(x) || isNaN(y)) {
+            console.warn('ImageDesignerService.addLayer: Calculated layer position is NaN', { x, y, config, canvasWidth, canvasHeight, canvasX, canvasY, scale: this.scale() });
+            return undefined;
+        }
+        if (config.type === 'text') {
+            const fontSize = config['fontSize'] || 18;
+            const padding = 10;
+            shape = new Konva.Text({
+                id: config.id,
+                name: 'text',
+                x,
+                y,
+                text: config['text'] || 'New Text',
+                fontSize,
+                fontFamily: config['fontFamily'] || this.defaultFont,
+                fontStyle: config['fontWeight'] ? `${config['fontWeight']}` : 'normal',
+                fill: config['fill'] || '#000000',
+                opacity: config['opacity'] ?? 1,
+                align: config['align'] || 'left',
+                scaleX: this.scale(),
+                scaleY: this.scale(),
+                draggable: !config.locked,
+                listening: true,
+                visible: config.visible !== false,
+                padding: padding,
+                wrap: 'word',
+                width: config.width || undefined,
+            });
+            if (config['fontWeight']) {
+                shape.setAttr('fontWeight', config['fontWeight']);
+            }
+            // If width is not provided, let's set a default width for headings to enable wrapping/resizing properly
+            if (!config.width) {
+                // Measure text width and add extra horizontal padding
+                const textWidth = shape.width() + 55;
+                shape.width(textWidth);
+            }
+            shape.offsetX(shape.width() / 2);
+            shape.offsetY(shape.height() / 2);
+            this.applyEffectsToShape(shape, config);
+        }
+        else if (config.type === 'image') {
+            const imageObj = new Image();
+            imageObj.crossOrigin = 'anonymous';
+            imageObj.onload = () => {
+                if (shape) {
+                    shape.image(imageObj);
+                    if (!config.width || !config.height) {
+                        shape.width(imageObj.width);
+                        shape.height(imageObj.height);
+                    }
+                    shape.offsetX(shape.width() / 2);
+                    shape.offsetY(shape.height() / 2);
+                    if (this.transformer?.nodes().includes(shape)) {
+                        this.transformer.forceUpdate();
+                    }
+                    this.applyEffectsToShape(shape, config);
+                    this.workspaceLayer?.batchDraw();
+                }
+            };
+            imageObj.src = config['src'] || '';
+            shape = new Konva.Image({
+                id: config.id,
+                name: 'image',
+                x,
+                y,
+                width: config.width || 0,
+                height: config.height || 0,
+                image: undefined,
+                opacity: config['opacity'] ?? 1,
+                scaleX: this.scale(),
+                scaleY: this.scale(),
+                draggable: !config.locked,
+                listening: true,
+                visible: config.visible !== false,
+            });
+            shape.offsetX(shape.width() / 2);
+            shape.offsetY(shape.height() / 2);
+        }
+        else if (config.type === 'shape') {
+            const imageObj = new Image();
+            imageObj.onload = () => {
+                if (shape) {
+                    shape.image(imageObj);
+                    shape.offsetX(shape.width() / 2);
+                    shape.offsetY(shape.height() / 2);
+                    if (this.transformer?.nodes().includes(shape)) {
+                        this.transformer.forceUpdate();
+                    }
+                    this.applyEffectsToShape(shape, config);
+                    this.workspaceLayer?.batchDraw();
+                }
+            };
+            imageObj.src = config['data'] || '';
+            shape = new Konva.Image({
+                id: config.id,
+                name: 'rect',
+                x,
+                y,
+                width: config.width || 100,
+                height: config.height || 100,
+                image: undefined,
+                opacity: config['opacity'] ?? 1,
+                scaleX: this.scale(),
+                scaleY: this.scale(),
+                draggable: !config.locked,
+                listening: true,
+                visible: config.visible !== false,
+            });
+            shape.offsetX(shape.width() / 2);
+            shape.offsetY(shape.height() / 2);
+        }
+        else if (config.type === 'pattern') {
+            const patternImageObj = new Image();
+            patternImageObj.onload = () => {
+                if (shape) {
+                    const rect = shape;
+                    rect.fillPatternImage(patternImageObj);
+                    // If original pattern is too big, scale it down.
+                    // Or just provide a default scale for better look.
+                    const patternScale = 0.5; // Fixed pattern scale for better look or based on config
+                    rect.fillPatternScale({ x: patternScale, y: patternScale });
+                    this.workspaceLayer?.batchDraw();
+                }
+            };
+            patternImageObj.src = typeof config.patternImage === 'string' ? config.patternImage : (config.patternImage?.src || '');
+            shape = new Konva.Rect({
+                id: config.id,
+                name: 'pattern',
+                x,
+                y,
+                width: config.width || canvasWidth,
+                height: config.height || canvasHeight,
+                opacity: config['opacity'] ?? 1,
+                scaleX: this.scale(),
+                scaleY: this.scale(),
+                draggable: !config.locked,
+                listening: true,
+                visible: config.visible !== false,
+                fillPatternRepeat: 'repeat',
+            });
+            shape.offsetX(shape.width() / 2);
+            shape.offsetY(shape.height() / 2);
+            // Ensure pattern stays centered even if shape size changes
+            // Konva's fillPatternOffset is in local coordinates of the shape (after scale/offset?)
+            // Actually it's simpler: if we want it centered, we just need to keep it consistent.
+        }
+        if (shape) {
+            if (config.id) {
+                shape.id(config.id);
+            }
+            this.workspaceLayer.add(shape);
+            // Select the new layer automatically
+            if (updateList && config.id) {
+                this.selectLayer(config.id);
+            }
+            // Update Konva Z-index based on the array order
+            if (updateList) {
+                this.reorderLayers(0, 0); // This will refresh all Z-indices based on the current _layers()
+            }
+            this.workspaceLayer.batchDraw();
+            shape.on('mouseenter', () => {
+                if (this.isDragging || this.isSelecting || !this.hoverRect)
+                    return;
+                // Don't show hover for already selected shapes
+                const selectedNodes = this.transformer?.nodes() || [];
+                if (selectedNodes.includes(shape))
+                    return;
+                this.showHover(shape);
+            });
+            shape.on('mouseleave', () => {
+                this.hideHover();
+            });
+            shape.dragBoundFunc((pos) => {
+                const nodes = this.transformer?.nodes() || [];
+                if (nodes.length > 1 && nodes.includes(shape)) {
+                    return pos;
+                }
+                const guides = this.getSnappingGuides(shape, pos);
+                let x = pos.x;
+                let y = pos.y;
+                if (guides.vertical.length > 0) {
+                    const vGuide = guides.vertical[0];
+                    x = vGuide.guide - vGuide.offset + shape.offsetX() * shape.scaleX();
+                }
+                if (guides.horizontal.length > 0) {
+                    const hGuide = guides.horizontal[0];
+                    y = hGuide.guide - hGuide.offset + shape.offsetY() * shape.scaleY();
+                }
+                return { x, y };
+            });
+            shape.on('dragstart', () => {
+                this.isDragging = true;
+                this.hideHover();
+            });
+            shape.on('dragmove', (e) => {
+                const nodes = this.transformer?.nodes() || [];
+                if (nodes.length > 1 && nodes.includes(shape)) {
+                    // If part of group, let transformer.on('dragmove') handle it
+                    return;
+                }
+                if (nodes.includes(shape) && nodes.length > 1) {
+                    nodes.forEach(node => {
+                        this.updateShapeOriginalPosition(node, false);
+                    });
+                }
+                else {
+                    this.updateShapeOriginalPosition(shape, false);
+                }
+                const absPos = shape.getAbsolutePosition();
+                const guides = this.getSnappingGuides(shape, absPos);
+                this.drawSnappingLines(guides);
+            });
+            shape.on('dragend', () => {
+                this.isDragging = false;
+                this.clearSnapLines();
+                const nodes = this.transformer?.nodes() || [];
+                if (nodes.includes(shape) && nodes.length > 1) {
+                    // Batch update signal for all nodes in the group
+                    this.updateShapesOriginalPositions(nodes);
+                }
+                else {
+                    // Single shape drag - update signal
+                    this.updateShapeOriginalPosition(shape);
+                }
+                this.notifyChange();
+            });
+            shape.on('transform', () => {
+                if (shape.name() === 'pattern') {
+                    const rect = shape;
+                    const scaleX = rect.scaleX();
+                    const scaleY = rect.scaleY();
+                    rect.width(rect.width() * (scaleX / this.scale()));
+                    rect.height(rect.height() * (scaleY / this.scale()));
+                    rect.scaleX(this.scale());
+                    rect.scaleY(this.scale());
+                    rect.offsetX(rect.width() / 2);
+                    rect.offsetY(rect.height() / 2);
+                }
+                const absPos = shape.getAbsolutePosition();
+                const guides = this.getSnappingGuides(shape, absPos);
+                this.drawSnappingLines(guides);
+                this.updateShapeOriginalPosition(shape);
+            });
+            shape.on('transformend', () => {
+                this.clearSnapLines();
+                if (!(shape instanceof Konva.Text)) {
+                    const scaleX = shape.scaleX();
+                    const scaleY = shape.scaleY();
+                    shape.width(shape.width() * (scaleX / this.scale()));
+                    shape.height(shape.height() * (scaleY / this.scale()));
+                    shape.scaleX(this.scale());
+                    shape.scaleY(this.scale());
+                    shape.offsetX(shape.width() / 2);
+                    shape.offsetY(shape.height() / 2);
+                }
+                this.updateShapeOriginalPosition(shape);
+                this.notifyChange();
+            });
+            shape.setAttr('originalX', config.x ?? 0);
+            shape.setAttr('originalY', config.y ?? 0);
+            // Ensure UI layer and its elements are on top
+            this.uiLayer?.moveToTop();
+            this.maskOverlay?.moveToTop();
+            this.transformer?.moveToTop();
+            this.hoverRect?.moveToTop();
+        }
+        return config.id;
+    }
+    updateShapeOriginalPosition(shape, updateSignal = true) {
+        if (!this.canvasRect)
+            return;
+        const scale = this.scale();
+        const originalX = (shape.x() - this.canvasRect.x()) / scale;
+        const originalY = (shape.y() - this.canvasRect.y()) / scale;
+        const originalScaleX = shape.scaleX() / scale;
+        const originalScaleY = shape.scaleY() / scale;
+        shape.setAttr('originalX', originalX);
+        shape.setAttr('originalY', originalY);
+        shape.setAttr('originalScaleX', originalScaleX);
+        shape.setAttr('originalScaleY', originalScaleY);
+        if (updateSignal) {
+            // Update the signal
+            const id = shape.id();
+            this._layers.update(layers => layers.map(l => l.id === id ? {
+                ...l,
+                x: originalX,
+                y: originalY,
+                width: shape.width(),
+                height: shape.height(),
+                scaleX: originalScaleX,
+                scaleY: originalScaleY,
+                rotation: shape.rotation()
+            } : l));
+        }
+    }
+    updateShapesOriginalPositions(shapes) {
+        if (!this.canvasRect)
+            return;
+        const scale = this.scale();
+        const updates = new Map();
+        shapes.forEach(shape => {
+            const originalX = (shape.x() - this.canvasRect.x()) / scale;
+            const originalY = (shape.y() - this.canvasRect.y()) / scale;
+            const originalScaleX = shape.scaleX() / scale;
+            const originalScaleY = shape.scaleY() / scale;
+            shape.setAttr('originalX', originalX);
+            shape.setAttr('originalY', originalY);
+            shape.setAttr('originalScaleX', originalScaleX);
+            shape.setAttr('originalScaleY', originalScaleY);
+            updates.set(shape.id(), {
+                x: originalX,
+                y: originalY,
+                width: shape.width(),
+                height: shape.height(),
+                scaleX: originalScaleX,
+                scaleY: originalScaleY,
+                rotation: shape.rotation()
+            });
+        });
+        // Update the signal once for all shapes
+        this._layers.update(layers => layers.map(l => {
+            const update = updates.get(l.id);
+            return update ? { ...l, ...update } : l;
+        }));
+    }
+    getNodesClientRect(nodes) {
+        if (nodes.length === 0)
+            return { x: 0, y: 0, width: 0, height: 0 };
+        let minX = Infinity;
+        let minY = Infinity;
+        let maxX = -Infinity;
+        let maxY = -Infinity;
+        nodes.forEach(node => {
+            const box = node.getClientRect();
+            minX = Math.min(minX, box.x);
+            minY = Math.min(minY, box.y);
+            maxX = Math.max(maxX, box.x + box.width);
+            maxY = Math.max(maxY, box.y + box.height);
+        });
+        return {
+            x: minX,
+            y: minY,
+            width: maxX - minX,
+            height: maxY - minY
+        };
+    }
+    getSnappingGuides(targetNode, pos) {
+        if (!this.canvasRect || !this.workspaceLayer)
+            return { vertical: [], horizontal: [] };
+        const nodes = Array.isArray(targetNode) ? targetNode : [targetNode];
+        const isGroup = nodes.length > 1;
+        const snapRange = this.snapSettings.snapRange;
+        const resultV = [];
+        const resultH = [];
+        // Bases for snapping
+        const basesV = [];
+        const basesH = [];
+        // 1. Stage centers and borders
+        if (this.snapSettings.snapToStageCenter || this.snapSettings.snapToStageBorders) {
+            const cw = this.canvasRect.width() * this.scale();
+            const ch = this.canvasRect.height() * this.scale();
+            const cx = this.canvasRect.x();
+            const cy = this.canvasRect.y();
+            if (this.snapSettings.snapToStageBorders) {
+                basesV.push(cx); // Left
+                basesV.push(cx + cw); // Right
+                basesH.push(cy); // Top
+                basesH.push(cy + ch); // Bottom
+            }
+            if (this.snapSettings.snapToStageCenter) {
+                basesV.push(cx + cw / 2); // Center V
+                basesH.push(cy + ch / 2); // Center H
+            }
+        }
+        // 2. Other shapes
+        if (this.snapSettings.snapToShapes) {
+            const selectedNodes = this.transformer?.nodes() || [];
+            this.workspaceLayer.getChildren().forEach((child) => {
+                if (nodes.includes(child) || child === this.canvasRect || child.name() === 'selection-rect' || (selectedNodes.length > 0 && selectedNodes.includes(child)))
+                    return;
+                const box = child.getClientRect();
+                basesV.push(box.x);
+                basesV.push(box.x + box.width / 2);
+                basesV.push(box.x + box.width);
+                basesH.push(box.y);
+                basesH.push(box.y + box.height / 2);
+                basesH.push(box.y + box.height);
+            });
+        }
+        const targetBox = isGroup ? this.getNodesClientRect(nodes) : nodes[0].getClientRect();
+        // If pos is provided (from dragBoundFunc for single node), we use it.
+        // For group drag via transformer, we don't use pos here because we apply delta later.
+        let targetX = targetBox.x;
+        let targetY = targetBox.y;
+        if (!isGroup && pos) {
+            targetX = pos.x - nodes[0].offsetX() * nodes[0].scaleX();
+            targetY = pos.y - nodes[0].offsetY() * nodes[0].scaleY();
+        }
+        const targetWidth = targetBox.width;
+        const targetHeight = targetBox.height;
+        basesV.forEach((base) => {
+            const vSnaps = [
+                { guide: base, offset: 0, diff: Math.abs(base - targetX) },
+                { guide: base, offset: targetWidth / 2, diff: Math.abs(base - (targetX + targetWidth / 2)) },
+                { guide: base, offset: targetWidth, diff: Math.abs(base - (targetX + targetWidth)) }
+            ];
+            vSnaps.forEach(s => {
+                if (s.diff < snapRange) {
+                    resultV.push(s);
+                }
+            });
+        });
+        basesH.forEach((base) => {
+            const hSnaps = [
+                { guide: base, offset: 0, diff: Math.abs(base - targetY) },
+                { guide: base, offset: targetHeight / 2, diff: Math.abs(base - (targetY + targetHeight / 2)) },
+                { guide: base, offset: targetHeight, diff: Math.abs(base - (targetY + targetHeight)) }
+            ];
+            hSnaps.forEach(s => {
+                if (s.diff < snapRange) {
+                    resultH.push(s);
+                }
+            });
+        });
+        return {
+            vertical: resultV.sort((a, b) => a.diff - b.diff),
+            horizontal: resultH.sort((a, b) => a.diff - b.diff)
+        };
+    }
+    drawSnappingLines(guides) {
+        this.clearSnapLines();
+        if (!this.uiLayer || !this.snapSettings.showGuidelines)
+            return;
+        const vGuide = guides.vertical[0];
+        const hGuide = guides.horizontal[0];
+        if (vGuide) {
+            const line = new Konva.Line({
+                points: [vGuide.guide, 0, vGuide.guide, this.stage.height()],
+                stroke: this.snapSettings.guidelineColor,
+                strokeWidth: 1,
+                dash: [4, 6],
+                name: 'snap-line'
+            });
+            this.uiLayer.add(line);
+            this.snapLines.push(line);
+        }
+        if (hGuide) {
+            const line = new Konva.Line({
+                points: [0, hGuide.guide, this.stage.width(), hGuide.guide],
+                stroke: this.snapSettings.guidelineColor,
+                strokeWidth: 1,
+                dash: [4, 6],
+                name: 'snap-line'
+            });
+            this.uiLayer.add(line);
+            this.snapLines.push(line);
+        }
+        this.uiLayer.batchDraw();
+    }
+    clearSnapLines() {
+        this.snapLines.forEach(l => l.destroy());
+        this.snapLines = [];
+        this.uiLayer?.batchDraw();
+    }
+    consecutiveUpdatesCount = 0;
+    lastUpdateSizeTime = 0;
+    lastUpdateSizeDimensions = { width: 0, height: 0 };
+    isSnapshotLoading = false;
+    setupResizeObserver(container, imageSize) {
+        this.resizeObserver = new ResizeObserver(() => {
+            // Use requestAnimationFrame to avoid "ResizeObserver loop completed with undelivered notifications" error
+            // This ensures that the size update happens in the next frame after the layout has settled.
+            requestAnimationFrame(() => {
+                if (this.stage) {
+                    this.updateSize(container, imageSize);
+                }
+            });
+        });
+        this.resizeObserver.observe(container);
+    }
+    updateSize(container, imageSize, fitToContainer = false, notify = false) {
+        if (!this.stage || !this.canvasRect || !this.workspaceLayer || !this.uiLayer) {
+            return;
+        }
+        const now = Date.now();
+        if (this.lastUpdateSizeTime && now - this.lastUpdateSizeTime < 50) {
+            this.consecutiveUpdatesCount++;
+            if (this.consecutiveUpdatesCount > 100) {
+                console.warn('ImageDesignerService.updateSize: Potential infinite loop detected, aborting');
+                return;
+            }
+        }
+        else {
+            this.consecutiveUpdatesCount = 0;
+        }
+        this.lastUpdateSizeTime = now;
+        this.lastUpdateSizeDimensions = { width: imageSize.width, height: imageSize.height };
+        const width = Math.round(container.offsetWidth || imageSize.width || 800);
+        const height = Math.round(container.offsetHeight || imageSize.height || 600);
+        console.log('ImageDesignerService.updateSize dimensions:', width, 'x', height);
+        // Skip if size is effectively 0 to avoid incorrect centering
+        if (width === 0 || height === 0) {
+            console.warn('ImageDesignerService.updateSize: dimensions are 0, skipping');
+            return;
+        }
+        if (fitToContainer) {
+            const padding = 40;
+            const availableWidth = width - padding * 2;
+            const availableHeight = height - padding * 2;
+            const scaleX = availableWidth / (imageSize.width || 1);
+            const scaleY = availableHeight / (imageSize.height || 1);
+            const newScale = Math.min(scaleX, scaleY);
+            const clampedScale = Math.min(Math.max(newScale, this.minScale), this.maxScale);
+            this.scale.set(clampedScale);
+        }
+        // Skip if size hasn't changed to avoid unnecessary re-draws and potential loops (unless scale is being updated)
+        // Use a small epsilon to avoid loops due to sub-pixel changes
+        const sizeChanged = Math.abs(this.stage.width() - width) > 0.5 || Math.abs(this.stage.height() - height) > 0.5;
+        const canvasSizeChanged = Math.abs(this.canvasRect.width() - imageSize.width) > 0.5 || Math.abs(this.canvasRect.height() - imageSize.height) > 0.5;
+        const scaleChanged = Math.abs(this.canvasRect.scaleX() - this.scale()) > 0.001;
+        if (!sizeChanged && !scaleChanged && !canvasSizeChanged) {
+            return;
+        }
+        if (isNaN(width) || isNaN(height)) {
+            console.warn('ImageDesignerService.updateSize: width or height is NaN', { width, height, container, imageSize });
+            return;
+        }
+        console.log('Updating stage size to:', width, 'x', height);
+        this.stage.width(width);
+        this.stage.height(height);
+        const canvasWidth = imageSize.width || 0;
+        const canvasHeight = imageSize.height || 0;
+        console.log('Setting canvasRect size to:', canvasWidth, 'x', canvasHeight);
+        this.canvasRect.width(canvasWidth);
+        this.canvasRect.height(canvasHeight);
+        this.canvasRect.offsetX(canvasWidth / 2);
+        this.canvasRect.offsetY(canvasHeight / 2);
+        const canvasX = width / 2;
+        const canvasY = height / 2;
+        if (!isNaN(canvasX) && !isNaN(canvasY)) {
+            console.log('Centering canvasRect at:', canvasX, canvasY);
+            this.canvasRect.x(canvasX);
+            this.canvasRect.y(canvasY);
+            this.canvasRect.scaleX(this.scale());
+            this.canvasRect.scaleY(this.scale());
+            // Update positions of all elements in workspaceLayer relative to new canvas position
+            this.workspaceLayer.getChildren().forEach(child => {
+                if (child !== this.canvasRect && child.name() !== 'transformer') {
+                    const originalX = child.attrs['originalX'] ?? 0;
+                    const originalY = child.attrs['originalY'] ?? 0;
+                    child.x(originalX * this.scale() + canvasX);
+                    child.y(originalY * this.scale() + canvasY);
+                    // Use the original scale for layers that have one (like flipped ones)
+                    const originalScaleX = child.attrs['originalScaleX'] ?? 1;
+                    const originalScaleY = child.attrs['originalScaleY'] ?? 1;
+                    child.scaleX(this.scale() * originalScaleX);
+                    child.scaleY(this.scale() * originalScaleY);
+                }
+            });
+            this.selectionRect?.visible(false); // Hide selection rect on resize as its coordinates are now invalid
+            this.uiLayer.moveToTop(); // Ensure UI layer is always on top of workspace layer
+            this.maskOverlay?.moveToTop(); // Mask on top of everything for clipping effect
+            this.transformer?.moveToTop();
+            this.hoverRect?.moveToTop();
+            this.transformer?.forceUpdate();
+            this.updateSelectionBorders();
+            if (this.hoveredShape && this.hoverRect?.visible()) {
+                this.showHover(this.hoveredShape);
+            }
+        }
+        else {
+            console.warn('ImageDesignerService.updateSize: Calculated canvas positions are NaN', { canvasX, canvasY, width, height, canvasWidth, scale: this.scale() });
+        }
+        this.uiLayer?.batchDraw();
+        this.workspaceLayer?.batchDraw();
+        if (notify) {
+            this.notifyChange();
+        }
+    }
+    setScale(scale) {
+        const clampedScale = Math.min(Math.max(scale, this.minScale), this.maxScale);
+        if (!this.isBrowser) {
+            this.scale.set(clampedScale);
+            return;
+        }
+        this.scale.set(clampedScale);
+        if (this.stage && this.canvasRect && this.workspaceLayer && this.uiLayer) {
+            const container = this.stage.container();
+            const imageSize = {
+                width: this.canvasRect.width(),
+                height: this.canvasRect.height()
+            };
+            // Update canvas positions and scales based on new scale
+            this.updateSize(container, imageSize);
+            this.transformer?.forceUpdate();
+            this.uiLayer.batchDraw();
+            this.workspaceLayer.batchDraw();
+        }
+    }
+    zoomIn() {
+        this.setScale(this.scale() + 0.1);
+    }
+    zoomOut() {
+        this.setScale(this.scale() - 0.1);
+    }
+    setMinMaxScale(minScale, maxScale) {
+        this.minScale = minScale;
+        this.maxScale = maxScale;
+        this.setScale(this.scale());
+    }
+    updateSnapSettings(settings) {
+        this.snapSettings = { ...this.snapSettings, ...settings };
+    }
+    setCanvasBackground(config, notify = true) {
+        if (!this.canvasRect)
+            return;
+        if (typeof config === 'string') {
+            this.canvasRect.fill(config);
+            this.canvasRect.fillLinearGradientStartPoint(null);
+            this.canvasRect.fillLinearGradientEndPoint(null);
+            this.canvasRect.fillLinearGradientColorStops([]);
+        }
+        else {
+            this.canvasRect.fill(null);
+            this.canvasRect.fillLinearGradientStartPoint({ x: config.x0 || 0, y: config.y0 || 0 });
+            this.canvasRect.fillLinearGradientEndPoint({ x: config.x1 || 0, y: config.y1 || 0 });
+            this.canvasRect.fillLinearGradientColorStops(config.colorStops);
+        }
+        this.workspaceLayer?.batchDraw();
+        if (notify) {
+            this.notifyChange();
+        }
+    }
+    reorderLayers(previousIndex, currentIndex) {
+        if (!this.workspaceLayer || previousIndex === currentIndex)
+            return;
+        let updatedLayers = [];
+        this._layers.update(layers => {
+            const newLayers = [...layers];
+            moveItemInArray(newLayers, previousIndex, currentIndex);
+            // Update Konva nodes Z-index based on the new array order.
+            // Array: [Top, ..., Bottom]
+            // Konva: [Bottom, ..., Top]
+            // So we need to reverse the array when applying to Konva Z-indices.
+            const reversedLayers = [...newLayers].reverse();
+            reversedLayers.forEach((layer, index) => {
+                const shape = this.workspaceLayer?.findOne('#' + layer.id);
+                if (shape) {
+                    // Layers start from zIndex 1 because canvasRect is at 0
+                    shape.zIndex(index + 1);
+                }
+            });
+            // Ensure canvasRect is at the bottom
+            this.canvasRect?.zIndex(0);
+            // Ensure transformer, selectionRect and hoverRect are always on top
+            this.uiLayer?.moveToTop();
+            this.maskOverlay?.moveToTop();
+            this.transformer?.moveToTop();
+            this.selectionRect?.moveToTop();
+            this.hoverRect?.moveToTop();
+            this.workspaceLayer?.batchDraw();
+            this.uiLayer?.batchDraw();
+            updatedLayers = newLayers;
+            return newLayers;
+        });
+        if (updatedLayers.length > 0) {
+            this.notifyChange();
+        }
+    }
+    currentSnapshotVersion = 0;
+    getSnapshot() {
+        return {
+            version: this.currentSnapshotVersion,
+            imageSize: {
+                width: this.canvasRect?.width() || 0,
+                height: this.canvasRect?.height() || 0
+            },
+            layers: this._layers().map(layer => {
+                // Ensure that any temporary 'selected' property is not included in the snapshot
+                const { selected, ...rest } = layer;
+                return rest;
+            }),
+            background: this.canvasRect?.fill() || 'white',
+            backgroundConfig: this.canvasRect?.fillLinearGradientColorStops()?.length ? {
+                x0: this.canvasRect.fillLinearGradientStartPoint().x,
+                y0: this.canvasRect.fillLinearGradientStartPoint().y,
+                x1: this.canvasRect.fillLinearGradientEndPoint().x,
+                y1: this.canvasRect.fillLinearGradientEndPoint().y,
+                colorStops: this.canvasRect.fillLinearGradientColorStops()
+            } : undefined
+        };
+    }
+    async loadSnapshot(snapshot, resetHistory = false) {
+        if (!this.stage || !this.workspaceLayer || !this.canvasRect) {
+            console.warn('loadSnapshot called but service is not fully initialized');
+            return;
+        }
+        if (this.isSnapshotLoading) {
+            console.log('loadSnapshot ignored - already loading');
+            return;
+        }
+        this.isSnapshotLoading = true;
+        try {
+            console.log('loadSnapshot starting', snapshot);
+            this.currentSnapshotVersion = snapshot.version ?? 0;
+            // Clear current state
+            this.selectedLayerId.set(null);
+            this.transformer?.nodes([]);
+            // Remove all shapes from workspace except canvasRect
+            // Critical: iterate over a copy of the children array, as destroy() modifies it
+            const children = [...this.workspaceLayer.getChildren()];
+            children.forEach((child) => {
+                if (child !== this.canvasRect) {
+                    child.destroy();
+                }
+            });
+            const { imageSize, layers, background, backgroundConfig } = snapshot;
+            // Update size BEFORE adding layers so that addLayer uses correct canvas position and scale
+            this.updateSize(this.stage.container(), imageSize);
+            // Restore background
+            if (backgroundConfig) {
+                this.setCanvasBackground(backgroundConfig, false);
+            }
+            else if (background) {
+                this.setCanvasBackground(background, false);
+            }
+            // Restore layers
+            const reversedLayers = [...layers].reverse();
+            const newLayers = [];
+            for (const layerConfig of reversedLayers) {
+                const id = layerConfig.id || Math.random().toString(36).substr(2, 9);
+                const configWithId = { ...layerConfig, id };
+                // We add layers to Konva but don't update the signal inside addLayer
+                await this.addLayer(configWithId, false);
+                // We collect them in the same order as in addLayer(..., true) which is [newConfig, ...layers]
+                newLayers.unshift(configWithId);
+            }
+            this._layers.set(newLayers);
+            this.workspaceLayer.batchDraw();
+            this.uiLayer?.batchDraw();
+        }
+        finally {
+            this.isSnapshotLoading = false;
+            if (resetHistory) {
+                this.resetHistory();
+            }
+            else {
+                this.notifyChange(false);
+                this.updateHistorySignals();
+            }
+        }
+    }
+    async loadAllFonts() {
+        const fontPromises = [];
+        // Always load default font
+        fontPromises.push(this.loadFont(this.defaultFont));
+        this._layers().forEach(layer => {
+            if (layer.type === 'text' && layer['fontFamily']) {
+                fontPromises.push(this.loadFont(layer['fontFamily']));
+            }
+            else if (layer.type === 'text') {
+                fontPromises.push(this.loadFont(this.defaultFont));
+            }
+        });
+        await Promise.all(fontPromises);
+    }
+    loadFont(fontFamily) {
+        if (!this.isBrowser || this.loadedFonts.has(fontFamily)) {
+            return Promise.resolve();
+        }
+        return new Promise((resolve) => {
+            const link = document.createElement('link');
+            link.rel = 'stylesheet';
+            link.href = `https://fonts.googleapis.com/css2?family=${fontFamily.replace(/ /g, '+')}:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap`;
+            link.onload = () => {
+                this.loadedFonts.add(fontFamily);
+                // Wait for font to be ready for rendering
+                if ('fonts' in document) {
+                    document.fonts.load(`1em "${fontFamily}"`).then(() => {
+                        resolve();
+                    }).catch(() => {
+                        resolve();
+                    });
+                }
+                else {
+                    // Fallback: small timeout
+                    setTimeout(() => resolve(), 100);
+                }
+            };
+            link.onerror = () => {
+                console.error(`Failed to load font: ${fontFamily}`);
+                resolve();
+            };
+            document.head.appendChild(link);
+        });
+    }
+    getLayerThumbnail(id, effectId) {
+        if (!this.workspaceLayer)
+            return null;
+        const shape = this.workspaceLayer.findOne('#' + id);
+        if (!shape)
+            return null;
+        try {
+            if (effectId) {
+                // Clone the shape to apply the effect without affecting the original
+                const clone = shape.clone();
+                const layer = this._layers().find(l => l.id === id);
+                if (layer) {
+                    const tempConfig = { ...layer, effect: effectId };
+                    this.applyEffectsToShape(clone, tempConfig);
+                }
+                const dataUrl = clone.toDataURL({
+                    pixelRatio: 0.5,
+                    quality: 0.5
+                });
+                clone.destroy();
+                return dataUrl;
+            }
+            // Create a small thumbnail of the shape
+            return shape.toDataURL({
+                pixelRatio: 0.5,
+                quality: 0.5
+            });
+        }
+        catch (e) {
+            console.warn('Failed to generate thumbnail for layer', id, e);
+            return null;
+        }
+    }
+    async updateLayer(id, config) {
+        const layer = this._layers().find(l => l.id === id);
+        if (!layer)
+            return;
+        const shape = this.workspaceLayer?.findOne('#' + id);
+        if (config['scaleX'] !== undefined && shape) {
+            shape.scaleX(config['scaleX']);
+        }
+        if (config['scaleY'] !== undefined && shape) {
+            shape.scaleY(config['scaleY']);
+        }
+        if (config['x'] !== undefined && shape) {
+            shape.x(config['x']);
+        }
+        if (config['y'] !== undefined && shape) {
+            shape.y(config['y']);
+        }
+        if (config['rotation'] !== undefined && shape) {
+            shape.rotation(config['rotation']);
+        }
+        if (config['width'] !== undefined && shape && !(shape instanceof Konva.Text)) {
+            shape.width(config['width']);
+            shape.offsetX(shape.width() / 2);
+        }
+        if (config['height'] !== undefined && shape && !(shape instanceof Konva.Text)) {
+            shape.height(config['height']);
+            shape.offsetY(shape.height() / 2);
+        }
+        if (config['width'] !== undefined && shape instanceof Konva.Text) {
+            shape.width(config['width']);
+            shape.offsetX(shape.width() / 2);
+        }
+        if (shape) {
+            this.updateShapeOriginalPosition(shape, true);
+        }
+        this._layers.update(layers => layers.map(l => l.id === id ? { ...l, ...config } : l));
+        const updatedLayer = this._layers().find(l => l.id === id);
+        if (shape && updatedLayer) {
+            this.applyEffectsToShape(shape, updatedLayer);
+        }
+        // If font-related properties changed, ensure the font variant is loaded and applied
+        if (this.isBrowser && shape instanceof Konva.Text && (config['fontFamily'] !== undefined ||
+            config['fontWeight'] !== undefined ||
+            config['fontStyle'] !== undefined)) {
+            const family = config['fontFamily'] || shape.fontFamily();
+            const weight = config['fontWeight'] || shape.getAttr('fontWeight') || 400;
+            const isItalic = (config['fontStyle'] === 'italic') || (shape.fontStyle() || '').includes('italic');
+            const fontStr = `${isItalic ? 'italic ' : ''}${weight} 12px "${family}"`;
+            if (config['fontFamily']) {
+                await this.loadFont(config['fontFamily']);
+                this.workspaceLayer?.batchDraw();
+            }
+            try {
+                await document.fonts.load(fontStr);
+                this.workspaceLayer?.batchDraw();
+            }
+            catch (e) {
+                console.warn('Failed to load font variant:', fontStr);
+            }
+        }
+        if (shape) {
+            if (config.fill !== undefined) {
+                const type = config.type || layer.type;
+                if (type === 'shape' || type === 'pattern') {
+                    // For SVG shapes and patterns, we can replace the color in the SVG data.
+                    const currentLayer = this._layers().find(l => l.id === id);
+                    const dataKey = type === 'shape' ? 'data' : 'patternImage';
+                    const dataUrl = currentLayer?.[dataKey];
+                    if (typeof dataUrl === 'string' && dataUrl.startsWith('data:image/svg+xml') &&
+                        config.fill && !config.fill.startsWith('data:image') && !config.fill.startsWith('http')) {
+                        const commaIndex = dataUrl.indexOf(',');
+                        if (commaIndex !== -1) {
+                            const header = dataUrl.substring(0, commaIndex);
+                            const isBase64 = header.includes('base64');
+                            const svgText = isBase64
+                                ? atob(dataUrl.substring(commaIndex + 1))
+                                : decodeURIComponent(dataUrl.substring(commaIndex + 1));
+                            const newFill = config.fill;
+                            // Replace both fill and stroke colors
+                            const newSvgText = svgText
+                                .replace(/fill="[#][0-9a-fA-F]{3,6}"/g, `fill="${newFill}"`)
+                                .replace(/fill='%23[0-9a-fA-F]{3,6}'/g, `fill='${newFill}'`)
+                                .replace(/stroke="[#][0-9a-fA-F]{3,6}"/g, `stroke="${newFill}"`)
+                                .replace(/stroke='%23[0-9a-fA-F]{3,6}'/g, `stroke='${newFill}'`);
+                            const newDataUrl = isBase64
+                                ? `${header},${btoa(newSvgText)}`
+                                : `${header},${encodeURIComponent(newSvgText)}`;
+                            const img = new Image();
+                            img.crossOrigin = 'anonymous';
+                            img.onload = () => {
+                                if (type === 'shape') {
+                                    shape.image(img);
+                                }
+                                else {
+                                    shape.setAttr('fillPatternImage', img);
+                                }
+                                this.workspaceLayer?.batchDraw();
+                            };
+                            img.src = newDataUrl;
+                            // Update the data in the signal too
+                            this._layers.update(layers => layers.map(l => l.id === id ? { ...l, [dataKey]: newDataUrl } : l));
+                        }
+                    }
+                    else if (config.fill && (config.fill.startsWith('data:image') || config.fill.startsWith('http'))) {
+                        const img = new Image();
+                        img.crossOrigin = 'anonymous';
+                        img.onload = () => {
+                            shape.setAttr('fillPatternImage', img);
+                            this.workspaceLayer?.batchDraw();
+                        };
+                        img.src = config.fill;
+                        if (type === 'pattern') {
+                            this._layers.update(layers => layers.map(l => l.id === id ? { ...l, patternImage: config.fill } : l));
+                        }
+                    }
+                    else {
+                        shape.setAttr('fill', config.fill);
+                        if (type !== 'pattern') {
+                            shape.setAttr('fillPatternImage', null);
+                        }
+                    }
+                }
+                else if (config.fill && (config.fill.startsWith('data:image') || config.fill.startsWith('http'))) {
+                    // It's a pattern for other types
+                    const img = new Image();
+                    img.crossOrigin = 'anonymous';
+                    img.onload = () => {
+                        shape.setAttr('fillPatternImage', img);
+                        this.workspaceLayer?.batchDraw();
+                    };
+                    img.src = config.fill;
+                }
+                else {
+                    shape.setAttr('fill', config.fill);
+                    shape.setAttr('fillPatternImage', null);
+                }
+            }
+            if (config['opacity'] !== undefined) {
+                shape.opacity(config['opacity']);
+            }
+            if (config['text'] !== undefined && shape instanceof Konva.Text) {
+                shape.text(config['text']);
+                // Update offset because content changed
+                shape.offsetX(shape.width() / 2);
+                shape.offsetY(shape.height() / 2);
+            }
+            if (config['fontSize'] !== undefined && shape instanceof Konva.Text) {
+                shape.fontSize(config['fontSize']);
+                // Update offset because size changed
+                shape.offsetX(shape.width() / 2);
+                shape.offsetY(shape.height() / 2);
+            }
+            if (config['width'] !== undefined && shape instanceof Konva.Text) {
+                shape.width(config['width'] * this.scale());
+                // Update offset because width changed
+                shape.offsetX(shape.width() / 2);
+                shape.offsetY(shape.height() / 2);
+            }
+            if (config['fontFamily'] !== undefined && shape instanceof Konva.Text) {
+                shape.fontFamily(config['fontFamily']);
+            }
+            if (config['fontWeight'] !== undefined && shape instanceof Konva.Text) {
+                shape.setAttr('fontWeight', config['fontWeight']);
+                // Konva's fontStyle property is used for weight and style.
+                // If we have numeric fontWeight, we can try to use it directly in fontStyle as well.
+                const currentStyle = (shape.fontStyle() || '').includes('italic') ? 'italic' : '';
+                shape.fontStyle(`${config['fontWeight']} ${currentStyle}`.trim());
+                // Update offset because size changed
+                shape.offsetX(shape.width() / 2);
+                shape.offsetY(shape.height() / 2);
+                // Force text refresh to update layout before transformer update
+                this.workspaceLayer?.batchDraw();
+            }
+            if (config['fontStyle'] !== undefined && shape instanceof Konva.Text) {
+                // If fontStyle is provided, it might override fontWeight if we are not careful.
+                // But usually fontStyle in this app means 'italic' or 'normal'.
+                const currentWeight = shape.getAttr('fontWeight') || 400;
+                if (config['fontStyle'] === 'italic') {
+                    shape.fontStyle(currentWeight + ' italic');
+                }
+                else {
+                    shape.fontStyle(currentWeight.toString());
+                }
+                // Update offset because size changed
+                shape.offsetX(shape.width() / 2);
+                shape.offsetY(shape.height() / 2);
+                // Force text refresh to update layout before transformer update
+                this.workspaceLayer?.batchDraw();
+            }
+            if (config['textDecoration'] !== undefined && shape instanceof Konva.Text) {
+                shape.textDecoration(config['textDecoration']);
+            }
+            if (config['align'] !== undefined && shape instanceof Konva.Text) {
+                shape.align(config['align']);
+            }
+            if (config['lineHeight'] !== undefined && shape instanceof Konva.Text) {
+                shape.lineHeight(config['lineHeight']);
+            }
+            if (config['letterSpacing'] !== undefined && shape instanceof Konva.Text) {
+                shape.letterSpacing(config['letterSpacing']);
+            }
+            if (config['textCase'] !== undefined && shape instanceof Konva.Text) {
+                const text = layer.text || '';
+                if (config['textCase'] === 'upper') {
+                    shape.text(text.toUpperCase());
+                }
+                else {
+                    shape.text(text);
+                }
+            }
+            this.workspaceLayer?.batchDraw();
+            this.uiLayer?.batchDraw();
+            this.transformer?.forceUpdate();
+            this.updateSelectionBorders();
+            this.notifyChange();
+            // If text properties changed, update again after a short delay
+            // to handle cases where text layout hasn't updated yet.
+            if (shape instanceof Konva.Text && (config['fontFamily'] !== undefined ||
+                config['fontSize'] !== undefined ||
+                config['text'] !== undefined ||
+                config['fontWeight'] !== undefined ||
+                config['fontStyle'] !== undefined)) {
+                setTimeout(() => {
+                    if (shape instanceof Konva.Text) {
+                        // Re-calculate offsets one more time as dimensions might have changed
+                        // after the browser fully applied the font metrics.
+                        shape.offsetX(shape.width() / 2);
+                        shape.offsetY(shape.height() / 2);
+                    }
+                    if (this.transformer) {
+                        // Re-assigning nodes is the most reliable way to force Transformer
+                        // to re-calculate its boundaries and adapt to the new text size.
+                        const currentNodes = this.transformer.nodes();
+                        this.transformer.nodes([]);
+                        this.transformer.nodes(currentNodes);
+                    }
+                    this.workspaceLayer?.batchDraw();
+                    this.uiLayer?.batchDraw();
+                    this.transformer?.forceUpdate();
+                    this.updateSelectionBorders();
+                }, 100);
+            }
+        }
+    }
+    getBase64Image() {
+        if (!this.stage || !this.canvasRect) {
+            return undefined;
+        }
+        // Capture original state
+        const wasUiLayerVisible = this.uiLayer?.visible() || false;
+        const originalStroke = this.canvasRect.stroke();
+        const originalStrokeWidth = this.canvasRect.strokeWidth();
+        // Hide UI layer to exclude transformers, snap lines, etc. from export
+        this.uiLayer?.visible(false);
+        // Temporarily hide canvas border
+        this.canvasRect.stroke(null);
+        this.canvasRect.strokeWidth(0);
+        // Get the client rect of the canvas area relative to the stage
+        const rect = this.canvasRect.getClientRect({ relativeTo: this.stage });
+        // Ensure we are in a browser
+        if (!this.isBrowser) {
+            return undefined;
+        }
+        try {
+            const dataUrl = this.stage.toDataURL({
+                x: rect.x,
+                y: rect.y,
+                width: rect.width,
+                height: rect.height,
+                pixelRatio: 2 // High quality
+            });
+            return dataUrl;
+        }
+        catch (e) {
+            console.error('Failed to get base64 image:', e);
+            return undefined;
+        }
+        finally {
+            // Restore UI layer visibility
+            if (wasUiLayerVisible) {
+                this.uiLayer?.visible(true);
+            }
+            // Restore canvas border
+            this.canvasRect.stroke(originalStroke);
+            this.canvasRect.strokeWidth(originalStrokeWidth);
+        }
+    }
+    downloadImage() {
+        if (!this.stage || !this.canvasRect) {
+            return;
+        }
+        // Capture original state
+        const wasUiLayerVisible = this.uiLayer?.visible() || false;
+        const originalStroke = this.canvasRect.stroke();
+        const originalStrokeWidth = this.canvasRect.strokeWidth();
+        // Hide UI layer to exclude transformers, snap lines, etc. from export
+        this.uiLayer?.visible(false);
+        // Temporarily hide canvas border
+        this.canvasRect.stroke(null);
+        this.canvasRect.strokeWidth(0);
+        // Get the client rect of the canvas area relative to the stage
+        const rect = this.canvasRect.getClientRect({ relativeTo: this.stage });
+        // Ensure we are in a browser
+        if (!this.isBrowser) {
+            return;
+        }
+        try {
+            const dataUrl = this.stage.toDataURL({
+                x: rect.x,
+                y: rect.y,
+                width: rect.width,
+                height: rect.height,
+                pixelRatio: 2 // High quality
+            });
+            const timestamp = new Date().getTime();
+            const filename = `${timestamp}.png`;
+            const downloadLink = document.createElement('a');
+            downloadLink.href = dataUrl;
+            downloadLink.download = filename;
+            document.body.appendChild(downloadLink);
+            downloadLink.click();
+            document.body.removeChild(downloadLink);
+        }
+        catch (e) {
+            console.error('Failed to export image:', e);
+        }
+        finally {
+            // Restore UI layer visibility
+            if (wasUiLayerVisible) {
+                this.uiLayer?.visible(true);
+            }
+            // Restore canvas border
+            this.canvasRect.stroke(originalStroke);
+            this.canvasRect.strokeWidth(originalStrokeWidth);
+        }
+    }
+    notifyChange(incrementVersion = true) {
+        if (this.isSnapshotLoading)
+            return;
+        if (incrementVersion) {
+            this.currentSnapshotVersion++;
+            this.saveHistory();
+        }
+        this._change$.next();
+    }
+    saveHistory() {
+        const snapshot = this.getSnapshot();
+        // Don't save if it's the same as the last one
+        if (this.undoStack.length > 0) {
+            const last = this.undoStack[this.undoStack.length - 1];
+            if (JSON.stringify(last.layers) === JSON.stringify(snapshot.layers) &&
+                JSON.stringify(last.imageSize) === JSON.stringify(snapshot.imageSize) &&
+                last.background === snapshot.background &&
+                JSON.stringify(last.backgroundConfig) === JSON.stringify(snapshot.backgroundConfig)) {
+                return;
+            }
+        }
+        this.undoStack.push(snapshot);
+        if (this.undoStack.length > this.historyLimit) {
+            this.undoStack.shift();
+        }
+        this.redoStack = [];
+        this.updateHistorySignals();
+    }
+    undo() {
+        if (this.undoStack.length <= 1)
+            return;
+        const current = this.undoStack.pop();
+        this.redoStack.push(current);
+        const previous = this.undoStack[this.undoStack.length - 1];
+        this.loadSnapshot(previous, false);
+    }
+    redo() {
+        if (this.redoStack.length === 0)
+            return;
+        const next = this.redoStack.pop();
+        this.undoStack.push(next);
+        this.loadSnapshot(next, false);
+    }
+    updateHistorySignals() {
+        this.canUndo.set(this.undoStack.length > 1);
+        this.canRedo.set(this.redoStack.length > 0);
+    }
+    resetHistory() {
+        this.undoStack = [this.getSnapshot()];
+        this.redoStack = [];
+        this.updateHistorySignals();
+    }
+    applyEffectsToShape(shape, config) {
+        const filters = [];
+        let tintR = 0;
+        let tintG = 0;
+        let tintB = 0;
+        if (config['effect'] === 'grayscale') {
+            filters.push(Konva.Filters.Grayscale);
+        }
+        else if (config['effect'] === 'sepia') {
+            filters.push(Konva.Filters.Sepia);
+        }
+        else if (config['effect'] === 'invert') {
+            filters.push(Konva.Filters.Invert);
+        }
+        else if (config['effect'] === 'cold') {
+            tintR = -0.15;
+            tintG = 0.05;
+            tintB = 0.25;
+            filters.push(TintFilter);
+        }
+        else if (config['effect'] === 'warm') {
+            tintR = 0.25;
+            tintG = 0.1;
+            tintB = -0.15;
+            filters.push(TintFilter);
+        }
+        if (config['temperatureEnabled']) {
+            const temp = (config['temperature'] ?? 0) / 100; // -1 to 1
+            if (!filters.includes(TintFilter))
+                filters.push(TintFilter);
+            if (temp > 0) {
+                tintR += (1 - tintR) * temp * 0.2;
+                tintG += (1 - tintG) * temp * 0.1;
+                tintB -= (1 + tintB) * temp * 0.2;
+            }
+            else {
+                const absTemp = Math.abs(temp);
+                tintR -= (1 + tintR) * absTemp * 0.2;
+                tintG += (1 - tintG) * absTemp * 0.1;
+                tintB += (1 - tintB) * absTemp * 0.2;
+            }
+        }
+        shape.setAttr('tintR', tintR);
+        shape.setAttr('tintG', tintG);
+        shape.setAttr('tintB', tintB);
+        if (config['blurEnabled']) {
+            filters.push(Konva.Filters.Blur);
+            shape.setAttr('blurRadius', config['blur'] ?? 0);
+        }
+        if (config['brightnessEnabled']) {
+            filters.push(Konva.Filters.Brighten);
+            shape.setAttr('brightness', config['brightness'] ?? 0);
+        }
+        if (config['contrastEnabled']) {
+            filters.push(Konva.Filters.Contrast);
+            shape.setAttr('contrast', config['contrast'] ?? 0);
+        }
+        if (config['saturationEnabled']) {
+            filters.push(Konva.Filters.HSL);
+            shape.setAttr('saturation', config['saturation'] ?? 0);
+        }
+        if (config['vibranceEnabled']) {
+            // Konva doesn't have Vibrance by default, using HSL saturation as fallback
+            if (!filters.includes(Konva.Filters.HSL)) {
+                filters.push(Konva.Filters.HSL);
+            }
+            shape.setAttr('saturation', (config['saturation'] ?? 0) + (config['vibrance'] ?? 0) / 2);
+        }
+        if (config['borderEnabled']) {
+            shape.setAttr('stroke', config['borderColor'] || config['fill'] || '#000000');
+            shape.setAttr('strokeWidth', config['border'] ?? 0);
+        }
+        else {
+            shape.setAttr('strokeWidth', 0);
+        }
+        if (config['cornerRadiusEnabled']) {
+            const radius = config['cornerRadius'] ?? 0;
+            if (shape instanceof Konva.Rect || shape instanceof Konva.Image) {
+                shape.cornerRadius(radius);
+            }
+        }
+        else {
+            if (shape instanceof Konva.Rect || shape instanceof Konva.Image) {
+                shape.cornerRadius(0);
+            }
+        }
+        if (config['shadowEnabled']) {
+            shape.setAttr('shadowColor', config['shadowColor'] || '#000000');
+            shape.setAttr('shadowBlur', config['shadowBlur'] ?? 15);
+            shape.setAttr('shadowOpacity', (config['shadowOpacity'] ?? 100) / 100);
+            shape.setAttr('shadowOffset', {
+                x: config['shadowOffsetX'] ?? 0,
+                y: config['shadowOffsetY'] ?? 0
+            });
+        }
+        else {
+            shape.setAttr('shadowOpacity', 0);
+        }
+        shape.filters(filters);
+        if (filters.length > 0 || (config['cornerRadiusEnabled'] && config['cornerRadius'] > 0)) {
+            // In Konva, caching is required for filters to work, and for cornerRadius to clip Image
+            shape.clearCache();
+            shape.cache();
+        }
+        else {
+            shape.clearCache();
+        }
+        this.workspaceLayer?.batchDraw();
+    }
+    destroy() {
+        this.isInitialized.set(false);
+        if (this.isBrowser) {
+            window.removeEventListener('mouseup', this.handleGlobalMouseUp);
+            window.removeEventListener('touchend', this.handleGlobalMouseUp);
+            window.removeEventListener('mousemove', this.handleGlobalMouseMove);
+            window.removeEventListener('touchmove', this.handleGlobalMouseMove);
+        }
+        this.resizeObserver?.disconnect();
+        this.stage?.off('mousedown touchstart');
+        this.stage?.off('mousemove touchmove');
+        this.stage?.off('mouseup touchend');
+        this.hideHover();
+        this.stage?.destroy();
+        this.stage = undefined;
+        this.uiLayer = undefined;
+        this.workspaceLayer = undefined;
+        this.canvasRect = undefined;
+        this.maskOverlay = undefined;
+        this.transformer = undefined;
+        this.selectionRect = undefined;
+        this.hoverRect = undefined;
+        this.selectionBordersGroup = undefined;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: ImageDesignerService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: ImageDesignerService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: ImageDesignerService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }] });
+
+function createDefaultPhotosDataSource(http) {
+    return {
+        getItems: (params) => {
+            const url = `https://picsum.photos/v2/list?page=${params.page}&limit=${params.pageSize}`;
+            http.get(url).pipe(map(images => images.map(img => ({
+                id: img.id,
+                name: img.author,
+                width: img.width,
+                height: img.height,
+                url: img.download_url,
+                thumbUrl: `https://picsum.photos/id/${img.id}/${img.width > img.height ? 400 : Math.round(400 * (img.width / img.height))}/${img.height > img.width ? 400 : Math.round(400 * (img.height / img.width))}`
+            })))).subscribe({
+                next: (data) => params.successCallback(data),
+                error: () => params.failCallback()
+            });
+        }
+    };
+}
+
+const SVG_PATTERNS = [
+    `<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40"><circle cx="10" cy="10" r="2" fill="#64748b"/></svg>`,
+    `<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40"><circle cx="20" cy="20" r="3" fill="#64748b"/></svg>`,
+    `<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40"><rect width="4" height="4" x="10" y="10" fill="#64748b"/></svg>`,
+    `<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40"><rect width="6" height="6" x="20" y="20" fill="#64748b"/></svg>`,
+    `<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40"><line x1="0" y1="0" x2="40" y2="40" stroke="#64748b"/></svg>`,
+    `<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40"><line x1="40" y1="0" x2="0" y2="40" stroke="#64748b"/></svg>`,
+    `<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40"><circle cx="20" cy="20" r="10" stroke="#64748b" fill="none"/></svg>`,
+    `<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40"><rect width="20" height="20" x="10" y="10" stroke="#64748b" fill="none"/></svg>`,
+    `<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40"><path d="M0 20 H40" stroke="#64748b"/></svg>`,
+    `<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40"><path d="M20 0 V40" stroke="#64748b"/></svg>`,
+    `<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40"><circle cx="5" cy="5" r="2" fill="#64748b"/><circle cx="25" cy="25" r="2" fill="#64748b"/></svg>`,
+    `<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40"><rect x="0" y="0" width="8" height="8" fill="#64748b"/></svg>`,
+    `<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40"><rect x="32" y="32" width="8" height="8" fill="#64748b"/></svg>`,
+    `<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40"><circle cx="10" cy="30" r="3" fill="#64748b"/></svg>`,
+    `<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40"><circle cx="30" cy="10" r="3" fill="#64748b"/></svg>`,
+    `<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40"><path d="M0 10 H40" stroke="#64748b"/><path d="M0 30 H40" stroke="#64748b"/></svg>`,
+    `<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40"><circle cx="20" cy="10" r="2" fill="#64748b"/><circle cx="20" cy="30" r="2" fill="#64748b"/></svg>`,
+    `<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40"><rect x="10" y="10" width="5" height="5" fill="#64748b"/><rect x="25" y="25" width="5" height="5" fill="#64748b"/></svg>`,
+    `<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40"><circle cx="20" cy="20" r="5" fill="#64748b"/></svg>`,
+    `<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40"><polygon points="20,5 25,15 15,15" fill="#64748b"/></svg>`,
+    `<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40"><polygon points="20,35 25,25 15,25" fill="#64748b"/></svg>`,
+    `<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40"><polygon points="5,20 15,15 15,25" fill="#64748b"/></svg>`,
+    `<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40"><polygon points="35,20 25,15 25,25" fill="#64748b"/></svg>`,
+    `<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40"><circle cx="5" cy="20" r="2" fill="#64748b"/><circle cx="35" cy="20" r="2" fill="#64748b"/></svg>`,
+    `<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40"><line x1="0" y1="20" x2="40" y2="20" stroke="#64748b"/></svg>`,
+    `<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40"><line x1="20" y1="0" x2="20" y2="40" stroke="#64748b"/></svg>`,
+    `<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40"><line x1="0" y1="0" x2="20" y2="20" stroke="#64748b"/></svg>`,
+    `<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40"><line x1="40" y1="0" x2="20" y2="20" stroke="#64748b"/></svg>`,
+    `<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40"><line x1="0" y1="40" x2="20" y2="20" stroke="#64748b"/></svg>`,
+    `<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40"><circle cx="10" cy="20" r="2" fill="#64748b"/><circle cx="30" cy="20" r="2" fill="#64748b"/></svg>`,
+    `<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40"><circle cx="20" cy="10" r="2" fill="#64748b"/><circle cx="20" cy="30" r="2" fill="#64748b"/></svg>`,
+    `<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40"><rect x="15" y="15" width="10" height="10" fill="#64748b"/></svg>`,
+    `<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40"><circle cx="5" cy="5" r="1" fill="#64748b"/><circle cx="35" cy="35" r="1" fill="#64748b"/></svg>`,
+    `<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40"><circle cx="35" cy="5" r="1" fill="#64748b"/><circle cx="5" cy="35" r="1" fill="#64748b"/></svg>`,
+    `<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40"><path d="M5 5 L35 35" stroke="#64748b"/></svg>`,
+    `<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40"><path d="M35 5 L5 35" stroke="#64748b"/></svg>`,
+    `<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40"><circle cx="20" cy="20" r="1" fill="#64748b"/></svg>`,
+    `<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40"><rect x="18" y="18" width="4" height="4" fill="#64748b"/></svg>`,
+    `<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40"><polygon points="20,10 30,30 10,30" fill="none" stroke="#64748b"/></svg>`,
+    `<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40"><circle cx="10" cy="10" r="1" fill="#64748b"/><circle cx="30" cy="30" r="1" fill="#64748b"/></svg>`,
+    `<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40"><circle cx="30" cy="10" r="1" fill="#64748b"/><circle cx="10" cy="30" r="1" fill="#64748b"/></svg>`,
+    `<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40"><path d="M10 10 H30 V30 H10 Z" fill="none" stroke="#64748b"/></svg>`,
+    `<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40"><circle cx="20" cy="5" r="2" fill="#64748b"/><circle cx="20" cy="35" r="2" fill="#64748b"/></svg>`,
+    `<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40"><circle cx="5" cy="20" r="2" fill="#64748b"/><circle cx="35" cy="20" r="2" fill="#64748b"/></svg>`,
+    `<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40"><rect x="0" y="18" width="40" height="4" fill="#64748b"/></svg>`,
+    `<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40"><rect x="18" y="0" width="4" height="40" fill="#64748b"/></svg>`,
+    `<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40"><circle cx="10" cy="20" r="4" fill="none" stroke="#64748b"/></svg>`,
+    `<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40"><circle cx="30" cy="20" r="4" fill="none" stroke="#64748b"/></svg>`,
+    `<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40"><circle cx="20" cy="20" r="8" fill="none" stroke="#64748b"/></svg>`,
+    `<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40"><path d="M0 20 L20 0 L40 20 L20 40 Z" fill="none" stroke="#64748b"/></svg>`,
+    `<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40"><path d="M0 10 L10 0 L20 10 L30 0 L40 10" stroke="#64748b" fill="none"/></svg>`,
+    `<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40"><path d="M0 30 L10 40 L20 30 L30 40 L40 30" stroke="#64748b" fill="none"/></svg>`,
+    `<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40"><circle cx="20" cy="20" r="2" fill="#64748b"/><circle cx="10" cy="10" r="2" fill="#64748b"/><circle cx="30" cy="30" r="2" fill="#64748b"/></svg>`,
+    `<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40"><rect x="0" y="0" width="20" height="20" fill="none" stroke="#64748b"/><rect x="20" y="20" width="20" height="20" fill="none" stroke="#64748b"/></svg>`,
+    `<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40"><rect x="20" y="0" width="20" height="20" fill="none" stroke="#64748b"/><rect x="0" y="20" width="20" height="20" fill="none" stroke="#64748b"/></svg>`,
+    `<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40"><path d="M0 0 L40 20 L0 40 Z" fill="none" stroke="#64748b"/></svg>`,
+    `<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40"><path d="M40 0 L0 20 L40 40 Z" fill="none" stroke="#64748b"/></svg>`,
+    `<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40"><polygon points="10,0 30,0 40,20 30,40 10,40 0,20" fill="none" stroke="#64748b"/></svg>`,
+    `<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40"><path d="M0 0 L20 20 L40 0" stroke="#64748b" fill="none"/></svg>`,
+    `<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40"><path d="M0 40 L20 20 L40 40" stroke="#64748b" fill="none"/></svg>`,
+    `<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40"><circle cx="0" cy="0" r="5" fill="#64748b"/><circle cx="40" cy="40" r="5" fill="#64748b"/></svg>`,
+    `<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40"><circle cx="40" cy="0" r="5" fill="#64748b"/><circle cx="0" cy="40" r="5" fill="#64748b"/></svg>`,
+    `<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40"><polygon points="20,5 35,35 5,35" fill="none" stroke="#64748b"/></svg>`,
+    `<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40"><polygon points="5,5 35,5 20,35" fill="none" stroke="#64748b"/></svg>`,
+    `<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40"><rect x="5" y="5" width="30" height="30" rx="5" fill="none" stroke="#64748b"/></svg>`,
+    `<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40"><rect x="10" y="10" width="20" height="20" rx="10" fill="none" stroke="#64748b"/></svg>`,
+    `<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40"><circle cx="20" cy="20" r="12" stroke="#64748b" fill="none"/></svg>`,
+    `<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40"><circle cx="10" cy="20" r="4" fill="#64748b"/><circle cx="30" cy="20" r="4" fill="#64748b"/></svg>`,
+    `<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40"><circle cx="20" cy="10" r="4" fill="#64748b"/><circle cx="20" cy="30" r="4" fill="#64748b"/></svg>`,
+    `<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40"><path d="M0 20 Q10 0 20 20 T40 20" stroke="#64748b" fill="none"/></svg>`,
+    `<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40"><path d="M0 20 Q10 40 20 20 T40 20" stroke="#64748b" fill="none"/></svg>`,
+    `<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40"><rect x="15" y="0" width="10" height="40" fill="#64748b"/></svg>`,
+    `<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40"><rect x="0" y="15" width="40" height="10" fill="#64748b"/></svg>`,
+    `<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40"><polygon points="0,20 10,10 20,20 10,30" fill="none" stroke="#64748b"/></svg>`,
+    `<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40"><polygon points="20,0 30,10 20,20 10,10" fill="none" stroke="#64748b"/></svg>`,
+    `<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40"><circle cx="5" cy="20" r="2" fill="#64748b"/><circle cx="20" cy="5" r="2" fill="#64748b"/><circle cx="35" cy="20" r="2" fill="#64748b"/><circle cx="20" cy="35" r="2" fill="#64748b"/></svg>`,
+    `<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40"><path d="M10 0 L20 10 L30 0 L40 10" stroke="#64748b" fill="none"/></svg>`,
+    `<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40"><path d="M0 30 L10 20 L20 30 L30 20 L40 30" stroke="#64748b" fill="none"/></svg>`,
+    `<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40"><polygon points="0,0 40,0 20,20" fill="none" stroke="#64748b"/></svg>`,
+    `<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40"><polygon points="0,40 40,40 20,20" fill="none" stroke="#64748b"/></svg>`,
+    `<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40"><circle cx="10" cy="10" r="3" fill="#64748b"/><circle cx="30" cy="10" r="3" fill="#64748b"/><circle cx="20" cy="30" r="3" fill="#64748b"/></svg>`,
+    `<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40"><circle cx="20" cy="10" r="2" fill="#64748b"/><circle cx="10" cy="30" r="2" fill="#64748b"/><circle cx="30" cy="30" r="2" fill="#64748b"/></svg>`,
+    `<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40"><rect x="5" y="5" width="10" height="10" fill="#64748b"/><rect x="25" y="25" width="10" height="10" fill="#64748b"/></svg>`,
+    `<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40"><rect x="25" y="5" width="10" height="10" fill="#64748b"/><rect x="5" y="25" width="10" height="10" fill="#64748b"/></svg>`,
+    `<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40"><circle cx="20" cy="20" r="3" fill="#64748b"/><circle cx="20" cy="5" r="3" fill="#64748b"/><circle cx="5" cy="20" r="3" fill="#64748b"/><circle cx="35" cy="20" r="3" fill="#64748b"/></svg>`,
+    `<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40"><polygon points="10,20 20,10 30,20 20,30" fill="none" stroke="#64748b"/></svg>`,
+    `<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40"><circle cx="20" cy="20" r="6" fill="none" stroke="#64748b"/><circle cx="20" cy="20" r="2" fill="#64748b"/></svg>`,
+    `<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40"><polygon points="5,20 20,5 35,20 20,35" fill="none" stroke="#64748b"/></svg>`,
+    `<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40"><circle cx="20" cy="20" r="14" fill="none" stroke="#64748b"/></svg>`,
+    `<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40"><polygon points="0,10 40,10 20,30" fill="none" stroke="#64748b"/></svg>`
+];
+
+const SVG_ELEMENTS = [
+    {
+        name: 'square-filled',
+        data: 'data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><rect x="15" y="15" width="70" height="70" fill="%2364748b"/></svg>'
+    },
+    {
+        name: 'square-outline',
+        data: 'data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><rect x="15" y="15" width="70" height="70" fill="none" stroke="%2364748b" stroke-width="8"/></svg>'
+    },
+    {
+        name: 'rectangle-filled',
+        data: 'data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><rect x="10" y="25" width="80" height="50" fill="%2364748b"/></svg>'
+    },
+    {
+        name: 'rectangle-outline',
+        data: 'data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><rect x="10" y="25" width="80" height="50" fill="none" stroke="%2364748b" stroke-width="8"/></svg>'
+    },
+    {
+        name: 'arrow-right-1',
+        data: 'data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><path fill="%2364748b" d="M10 45H65L50 30L90 50L50 70L65 55H10Z"/></svg>'
+    },
+    {
+        name: 'arrow-right-2',
+        data: 'data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><polygon fill="%2364748b" points="10,40 60,40 60,25 90,50 60,75 60,60 10,60"/></svg>'
+    },
+    {
+        name: 'arrow-right-3',
+        data: 'data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><polygon fill="%2364748b" points="10,45 55,45 55,30 90,50 55,70 55,55 10,55"/></svg>'
+    },
+    {
+        name: 'arrow-right-4',
+        data: 'data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><polygon fill="%2364748b" points="15,40 65,40 65,25 90,50 65,75 65,60 15,60"/></svg>'
+    },
+    {
+        name: 'arrow-right-5',
+        data: 'data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><polygon fill="%2364748b" points="10,42 58,42 58,28 90,50 58,72 58,58 10,58"/></svg>'
+    },
+    {
+        name: 'arrow-right-fat',
+        data: 'data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><polygon fill="%2364748b" points="10,35 55,35 55,20 90,50 55,80 55,65 10,65"/></svg>'
+    },
+    {
+        name: 'arrow-right-wide',
+        data: 'data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><polygon fill="%2364748b" points="10,38 60,38 60,22 90,50 60,78 60,62 10,62"/></svg>'
+    },
+    {
+        name: 'arrow-right-long',
+        data: 'data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><polygon fill="%2364748b" points="5,45 70,45 70,30 95,50 70,70 70,55 5,55"/></svg>'
+    },
+    {
+        name: 'arrow-right-compact',
+        data: 'data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><polygon fill="%2364748b" points="20,45 60,45 60,35 85,50 60,65 60,55 20,55"/></svg>'
+    },
+    {
+        name: 'arrow-right-block',
+        data: 'data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><polygon fill="%2364748b" points="10,40 55,40 55,25 85,50 55,75 55,60 10,60"/></svg>'
+    },
+    {
+        name: 'arrow-right',
+        data: 'data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><path fill="%2364748b" d="M20 45H65L50 30L80 50L50 70L65 55H20Z"/></svg>'
+    },
+    {
+        name: 'arrow-left',
+        data: 'data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><path fill="%2364748b" d="M80 45H35L50 30L20 50L50 70L35 55H80Z"/></svg>'
+    },
+    {
+        name: 'arrow-up',
+        data: 'data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><path fill="%2364748b" d="M45 80V35L30 50L50 20L70 50L55 35V80Z"/></svg>'
+    },
+    {
+        name: 'triangle',
+        data: 'data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><polygon fill="%2364748b" points="50,10 90,90 10,90"/></svg>'
+    },
+    {
+        name: 'diamond',
+        data: 'data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><polygon fill="%2364748b" points="50,10 90,50 50,90 10,50"/></svg>'
+    },
+    {
+        name: 'pentagon',
+        data: 'data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><polygon fill="%2364748b" points="50,10 90,40 70,90 30,90 10,40"/></svg>'
+    },
+    {
+        name: 'parallelogram',
+        data: 'data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><polygon fill="%2364748b" points="20,20 90,20 70,80 0,80"/></svg>'
+    },
+    {
+        name: 'star',
+        data: 'data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><polygon fill="%2364748b" points="50,10 61,40 95,40 67,60 78,90 50,70 22,90 33,60 5,40 39,40"/></svg>'
+    },
+    {
+        name: 'hexagon',
+        data: 'data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><polygon fill="%2364748b" points="30,10 70,10 90,50 70,90 30,90 10,50"/></svg>'
+    },
+    {
+        name: 'chevron',
+        data: 'data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><polygon fill="%2364748b" points="20,30 50,60 80,30 80,50 50,80 20,50"/></svg>'
+    },
+    {
+        name: 'arrow',
+        data: 'data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><polygon fill="%2364748b" points="10,50 60,10 60,35 90,35 90,65 60,65 60,90"/></svg>'
+    },
+    {
+        name: 'cross',
+        data: 'data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><polygon fill="%2364748b" points="40,10 60,10 60,40 90,40 90,60 60,60 60,90 40,90 40,60 10,60 10,40 40,40"/></svg>'
+    },
+    {
+        name: 'trapezoid',
+        data: 'data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><polygon fill="%2364748b" points="20,30 80,30 65,80 35,80"/></svg>'
+    },
+    {
+        name: 'kite',
+        data: 'data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><polygon fill="%2364748b" points="50,10 80,50 50,90 20,50"/></svg>'
+    },
+    {
+        name: 'zigzag',
+        data: 'data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><polygon fill="%2364748b" points="10,30 40,30 25,55 60,55 45,80 90,80 90,90 10,90"/></svg>'
+    },
+    {
+        name: 'notched-rect',
+        data: 'data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><polygon fill="%2364748b" points="10,20 70,20 90,40 90,80 10,80"/></svg>'
+    },
+    {
+        name: 'double-triangle',
+        data: 'data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><polygon fill="%2364748b" points="20,80 40,20 60,80"/><polygon fill="%2364748b" points="50,80 70,20 90,80"/></svg>'
+    },
+    {
+        name: 'shield',
+        data: 'data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><path fill="%2364748b" d="M50 10 L85 25 L80 70 L50 90 L20 70 L15 25 Z"/></svg>'
+    },
+    {
+        name: 'octagon',
+        data: 'data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><polygon fill="%2364748b" points="30,10 70,10 90,30 90,70 70,90 30,90 10,70 10,30"/></svg>'
+    },
+    {
+        name: 'right-triangle',
+        data: 'data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><polygon fill="%2364748b" points="10,90 10,10 90,90"/></svg>'
+    },
+    {
+        name: 'corner-cut',
+        data: 'data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><polygon fill="%2364748b" points="20,10 80,10 90,20 90,80 80,90 20,90 10,80 10,20"/></svg>'
+    },
+    {
+        name: 'arrow-wide',
+        data: 'data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><polygon fill="%2364748b" points="10,50 50,10 50,30 90,30 90,70 50,70 50,90"/></svg>'
+    },
+    {
+        name: 'triangle-down',
+        data: 'data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><polygon fill="%2364748b" points="10,20 90,20 50,90"/></svg>'
+    },
+    {
+        name: 'triangle-left',
+        data: 'data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><polygon fill="%2364748b" points="80,10 20,50 80,90"/></svg>'
+    },
+    {
+        name: 'triangle-right',
+        data: 'data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><polygon fill="%2364748b" points="20,10 80,50 20,90"/></svg>'
+    },
+    {
+        name: 'wide-trapezoid',
+        data: 'data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><polygon fill="%2364748b" points="10,30 90,30 70,80 30,80"/></svg>'
+    },
+    {
+        name: 'cut-diamond',
+        data: 'data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><polygon fill="%2364748b" points="50,5 90,50 50,95 10,50 30,50"/></svg>'
+    },
+    {
+        name: 'house',
+        data: 'data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><polygon fill="%2364748b" points="10,50 50,10 90,50 90,90 10,90"/></svg>'
+    },
+    {
+        name: 'tag',
+        data: 'data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><polygon fill="%2364748b" points="10,40 50,10 90,40 70,90 30,90"/></svg>'
+    },
+    {
+        name: 'double-chevron',
+        data: 'data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><polygon fill="%2364748b" points="10,30 40,50 10,70 25,70 55,50 25,30"/><polygon fill="%2364748b" points="45,30 75,50 45,70 60,70 90,50 60,30"/></svg>'
+    },
+    {
+        name: 'diamond-wide',
+        data: 'data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><polygon fill="%2364748b" points="50,10 95,50 50,90 5,50"/></svg>'
+    },
+    {
+        name: 'notch-top',
+        data: 'data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><polygon fill="%2364748b" points="10,20 40,20 50,10 60,20 90,20 90,90 10,90"/></svg>'
+    },
+    {
+        name: 'notch-bottom',
+        data: 'data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><polygon fill="%2364748b" points="10,10 90,10 90,80 60,80 50,90 40,80 10,80"/></svg>'
+    },
+    {
+        name: 'step-shape',
+        data: 'data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><polygon fill="%2364748b" points="10,80 10,40 40,40 40,20 90,20 90,80"/></svg>'
+    },
+    {
+        name: 'skew-arrow',
+        data: 'data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><polygon fill="%2364748b" points="10,60 60,20 60,40 90,40 90,80 60,80 60,90"/></svg>'
+    },
+    {
+        name: 'barbed',
+        data: 'data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><polygon fill="%2364748b" points="10,50 30,30 50,50 70,30 90,50 70,70 50,50 30,70"/></svg>'
+    },
+    {
+        name: 'circle',
+        data: 'data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><circle fill="%2364748b" cx="50" cy="50" r="40"/></svg>'
+    },
+    {
+        name: 'circle-ring',
+        data: 'data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><circle fill="%2364748b" cx="50" cy="50" r="40"/><circle fill="white" cx="50" cy="50" r="20"/></svg>'
+    },
+    {
+        name: 'circle-cut-top',
+        data: 'data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><circle fill="%2364748b" cx="50" cy="60" r="35"/></svg>'
+    },
+    {
+        name: 'circle-half',
+        data: 'data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><path fill="%2364748b" d="M10 50 A40 40 0 0 1 90 50 L90 90 L10 90 Z"/></svg>'
+    },
+    {
+        name: 'circle-quarter',
+        data: 'data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><path fill="%2364748b" d="M50 50 L90 50 A40 40 0 0 0 50 10 Z"/></svg>'
+    },
+    {
+        name: 'circle-pacman',
+        data: 'data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><path fill="%2364748b" d="M50 10 A40 40 0 1 1 50 90 L70 50 Z"/></svg>'
+    },
+    {
+        name: 'circle-segment',
+        data: 'data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><path fill="%2364748b" d="M50 50 L50 10 A40 40 0 0 1 90 50 Z"/></svg>'
+    },
+    {
+        name: 'circle-dot',
+        data: 'data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><circle fill="%2364748b" cx="50" cy="50" r="35"/><circle fill="white" cx="50" cy="50" r="10"/></svg>'
+    },
+    {
+        name: 'circle-double',
+        data: 'data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><circle fill="%2364748b" cx="40" cy="50" r="25"/><circle fill="%2364748b" cx="65" cy="50" r="25"/></svg>'
+    },
+    {
+        name: 'circle-arc',
+        data: 'data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><path fill="%2364748b" d="M10 50 A40 40 0 0 1 90 50 L70 50 A20 20 0 0 0 30 50 Z"/></svg>'
+    },
+    {
+        name: 'blob-1',
+        data: 'data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><path fill="%2364748b" d="M32 15C50 5 78 18 85 40C92 65 70 90 45 85C20 80 10 55 15 35C20 25 25 18 32 15Z"/></svg>'
+    },
+    {
+        name: 'blob-2',
+        data: 'data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><path fill="%2364748b" d="M40 10C65 5 90 25 85 50C80 80 55 95 35 85C15 75 10 50 20 30C25 20 30 15 40 10Z"/></svg>'
+    },
+    {
+        name: 'blob-3',
+        data: 'data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><path fill="%2364748b" d="M28 20C45 5 75 10 85 35C95 60 75 90 50 88C25 85 10 60 15 40C18 30 22 25 28 20Z"/></svg>'
+    },
+    {
+        name: 'blob-4',
+        data: 'data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><path fill="%2364748b" d="M35 12C55 2 85 18 88 42C92 70 70 92 45 88C20 85 8 60 15 38C18 28 25 18 35 12Z"/></svg>'
+    },
+    {
+        name: 'blob-5',
+        data: 'data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><path fill="%2364748b" d="M30 18C52 4 80 15 88 38C95 62 75 90 50 90C25 90 10 65 15 42C18 30 22 25 30 18Z"/></svg>'
+    },
+    {
+        name: 'blob-6',
+        data: 'data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><path fill="%2364748b" d="M38 14C60 5 85 20 90 45C95 70 70 92 45 88C20 85 5 60 12 38C18 25 25 18 38 14Z"/></svg>'
+    },
+    {
+        name: 'blob-7',
+        data: 'data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><path fill="%2364748b" d="M25 22C45 8 78 12 88 35C98 60 78 92 50 90C22 88 8 60 12 40C15 32 18 26 25 22Z"/></svg>'
+    },
+    {
+        name: 'blob-8',
+        data: 'data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><path fill="%2364748b" d="M35 18C58 6 85 18 92 40C98 65 78 90 52 88C25 85 10 60 15 38C18 30 25 22 35 18Z"/></svg>'
+    },
+    {
+        name: 'blob-9',
+        data: 'data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><path fill="%2364748b" d="M30 12C52 4 82 15 90 38C98 65 75 92 48 90C22 88 8 62 15 38C20 25 22 20 30 12Z"/></svg>'
+    },
+    {
+        name: 'blob-10',
+        data: 'data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><path fill="%2364748b" d="M34 16C55 5 80 15 88 36C95 60 78 90 50 92C22 95 8 65 15 42C20 30 25 22 34 16Z"/></svg>'
+    }
+];
+
+const PRESET_CATEGORIES = [
+    {
+        name: 'Instagram',
+        icon: 'fluent:camera-24-regular',
+        presets: [
+            { name: 'Post', width: 1080, height: 1080, icon: 'fluent:image-24-regular' },
+            { name: 'Story', width: 1080, height: 1920, icon: 'fluent:video-clip-24-regular' },
+            { name: 'Ad', width: 1080, height: 1080, icon: 'fluent:megaphone-24-regular' },
+        ]
+    },
+    {
+        name: 'Facebook',
+        icon: 'fluent:people-24-regular',
+        presets: [
+            { name: 'Post (Landscape)', width: 1200, height: 630, icon: 'fluent:image-24-regular' },
+            { name: 'Post (Square)', width: 1080, height: 1080, icon: 'fluent:image-24-regular' },
+            { name: 'Cover', width: 851, height: 315, icon: 'fluent:image-24-regular' },
+        ]
+    },
+    {
+        name: 'Youtube',
+        icon: 'fluent:video-24-regular',
+        presets: [
+            { name: 'Thumbnail', width: 1280, height: 720, icon: 'fluent:image-24-regular' },
+            { name: 'Channel', width: 2560, height: 1440, icon: 'fluent:image-24-regular' },
+            { name: 'Short', width: 1080, height: 1920, icon: 'fluent:video-clip-24-regular' },
+        ]
+    },
+    {
+        name: 'LinkedIn',
+        icon: 'fluent:briefcase-24-regular',
+        presets: [
+            { name: 'Post', width: 1200, height: 627, icon: 'fluent:image-24-regular' },
+            { name: 'Banner', width: 1584, height: 396, icon: 'fluent:image-24-regular' },
+            { name: 'Square', width: 1080, height: 1080, icon: 'fluent:image-24-regular' },
+        ]
+    },
+    {
+        name: 'Twitter',
+        icon: 'fluent:news-24-regular',
+        presets: [
+            { name: 'Post', width: 1600, height: 900, icon: 'fluent:image-24-regular' },
+            { name: 'Header', width: 1500, height: 500, icon: 'fluent:image-24-regular' },
+            { name: 'Square', width: 1080, height: 1080, icon: 'fluent:image-24-regular' },
+        ]
+    },
+    {
+        name: 'Video',
+        icon: 'fluent:video-24-regular',
+        presets: [
+            { name: 'Full HD', width: 1920, height: 1080, icon: 'fluent:video-24-regular' },
+            { name: '4K UHD', width: 3840, height: 2160, icon: 'fluent:video-24-regular' },
+            { name: 'Vertical HD', width: 1080, height: 1920, icon: 'fluent:video-24-regular' },
+            { name: 'Square HD', width: 1080, height: 1080, icon: 'fluent:video-24-regular' },
+        ]
+    }
+];
+
+const IMAGE_DESIGNER = new InjectionToken('IMAGE_DESIGNER');
+
+class Settings {
+    imageDesigner = inject(IMAGE_DESIGNER, { optional: true });
+    designerService = inject(ImageDesignerService);
+    selectedLayerId = this.designerService.selectedLayerId;
+    layers = this.designerService.layers;
+    fonts = this.designerService.fonts;
+    selectedLayer = computed(() => {
+        const id = this.selectedLayerId();
+        if (!id)
+            return null;
+        return this.layers().find(l => l.id === id);
+    }, ...(ngDevMode ? [{ debugName: "selectedLayer" }] : /* istanbul ignore next */ []));
+    showColorPicker = computed(() => {
+        const layer = this.selectedLayer();
+        if (!layer)
+            return false;
+        return ['text', 'shape', 'pattern'].includes(layer.type);
+    }, ...(ngDevMode ? [{ debugName: "showColorPicker" }] : /* istanbul ignore next */ []));
+    presetColors = signal([
+        '#000000', '#7a7a7a', '#ffffff',
+        '#f44336', '#e91e63', '#9c27b0',
+        '#673ab7', '#3f51b5', '#2196f3',
+        '#03a9f4', '#00bcd4', '#009688',
+        '#4caf50', '#8bc34a', '#cddc39',
+        '#ffeb3b', '#ffc107', '#ff9800',
+        '#ff5722', '#795548', '#607d8b'
+    ], ...(ngDevMode ? [{ debugName: "presetColors" }] : /* istanbul ignore next */ []));
+    fontWeightNames = {
+        100: 'Thin',
+        200: 'Extra Light',
+        300: 'Light',
+        400: 'Regular',
+        500: 'Medium',
+        600: 'Semi Bold',
+        700: 'Bold',
+        800: 'Extra Bold',
+        900: 'Black'
+    };
+    getFontWeightName(value) {
+        const numericValue = value === 'bold' ? 700 : (value === 'normal' ? 400 : (parseInt(value, 10) || 400));
+        return this.fontWeightNames[numericValue] || numericValue.toString();
+    }
+    async updateOpacity(value) {
+        const id = this.selectedLayerId();
+        if (id) {
+            await this.designerService.updateLayer(id, { opacity: value });
+        }
+    }
+    async updateColor(color) {
+        const id = this.selectedLayerId();
+        const layer = this.selectedLayer();
+        if (id && layer) {
+            await this.designerService.updateLayer(id, { fill: color, type: layer.type });
+        }
+    }
+    async updateFont(font) {
+        const id = this.selectedLayerId();
+        if (id) {
+            await this.designerService.loadFont(font);
+            await this.designerService.updateLayer(id, { fontFamily: font });
+        }
+    }
+    async updateFontWeight(value) {
+        const id = this.selectedLayerId();
+        if (id) {
+            await this.designerService.updateLayer(id, { fontWeight: value });
+        }
+    }
+    async updateTextStyle(style) {
+        const id = this.selectedLayerId();
+        if (!id)
+            return;
+        const decorations = [];
+        if (style.includes('underline'))
+            decorations.push('underline');
+        if (style.includes('line-through'))
+            decorations.push('line-through');
+        const config = {
+            fontStyle: style.includes('italic') ? 'italic' : 'normal',
+            textDecoration: decorations.join(' ') || 'none'
+        };
+        await this.designerService.updateLayer(id, config);
+    }
+    async toggleUppercase() {
+        const id = this.selectedLayerId();
+        const layer = this.selectedLayer();
+        if (id && layer) {
+            const currentCase = layer['textCase'];
+            const newCase = currentCase === 'upper' ? 'normal' : 'upper';
+            await this.designerService.updateLayer(id, { textCase: newCase });
+        }
+    }
+    async updateTextAlign(align) {
+        const id = this.selectedLayerId();
+        if (id) {
+            await this.designerService.updateLayer(id, { align });
+        }
+    }
+    async updateLineHeight(value) {
+        const id = this.selectedLayerId();
+        if (id) {
+            await this.designerService.updateLayer(id, { lineHeight: value });
+        }
+    }
+    async updateLetterSpacing(value) {
+        const id = this.selectedLayerId();
+        if (id) {
+            await this.designerService.updateLayer(id, { letterSpacing: value });
+        }
+    }
+    getTextStyle = computed(() => {
+        const layer = this.selectedLayer();
+        if (!layer)
+            return [];
+        const styles = [];
+        if (layer['fontStyle'] === 'italic')
+            styles.push('italic');
+        const decoration = layer['textDecoration'] || '';
+        if (decoration.includes('underline'))
+            styles.push('underline');
+        if (decoration.includes('line-through'))
+            styles.push('line-through');
+        return styles;
+    }, { ...(ngDevMode ? { debugName: "getTextStyle" } : /* istanbul ignore next */ {}), equal: (a, b) => {
+            if (a.length !== b.length)
+                return false;
+            return a.every((v, i) => v === b[i]);
+        } });
+    toggleLock() {
+        const id = this.selectedLayerId();
+        if (id) {
+            this.designerService.toggleLayerLock(id);
+        }
+    }
+    async flipHorizontal() {
+        const id = this.selectedLayerId();
+        if (id) {
+            await this.designerService.flipHorizontal(id);
+        }
+    }
+    async flipVertical() {
+        const id = this.selectedLayerId();
+        if (id) {
+            await this.designerService.flipVertical(id);
+        }
+    }
+    async fitToPage() {
+        const id = this.selectedLayerId();
+        if (id) {
+            await this.designerService.fitToPage(id);
+        }
+    }
+    async fillPage() {
+        const id = this.selectedLayerId();
+        if (id) {
+            await this.designerService.fillPage(id);
+        }
+    }
+    saveSnapshot() {
+        const snapshot = this.designerService.getSnapshot();
+        const dataStr = "data:text/json;charset=utf-8," + encodeURIComponent(JSON.stringify(snapshot));
+        const downloadAnchorNode = document.createElement('a');
+        downloadAnchorNode.setAttribute("href", dataStr);
+        downloadAnchorNode.setAttribute("download", "design-snapshot.json");
+        document.body.appendChild(downloadAnchorNode);
+        downloadAnchorNode.click();
+        downloadAnchorNode.remove();
+    }
+    loadSnapshot(event) {
+        const input = event.target;
+        if (input.files && input.files[0]) {
+            const reader = new FileReader();
+            reader.onload = async (e) => {
+                try {
+                    const snapshot = JSON.parse(e.target?.result);
+                    await this.designerService.loadSnapshot(snapshot);
+                }
+                catch (error) {
+                    console.error('Failed to load snapshot:', error);
+                }
+            };
+            reader.readAsText(input.files[0]);
+        }
+    }
+    openEffects() {
+        this.imageDesigner?.openEffects();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: Settings, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", type: Settings, isStandalone: true, selector: "ngs-settings", ngImport: i0, template: "@let layer = selectedLayer();\n\n@if (layer) {\n  <ngs-toolbar\n    class=\"h-14 z-10 bg-surface-container-lowest border-b border-border px-5 absolute top-0 left-0 right-0\">\n    <!-- Color -->\n    @if (showColorPicker()) {\n      <ngs-toolbar-item>\n        <button [ngsPopoverTriggerFor]=\"colorPopover\"\n                position=\"below-center\"\n                class=\"size-7 cursor-pointer hover:ring-2 hover:ring-primary rounded-full border border-border\"\n                ngsRipple\n                [style.backgroundColor]=\"layer['fill'] || '#000000'\">\n        </button>\n        <ngs-popover #colorPopover>\n          <ng-template ngsPopoverContent>\n            <div class=\"p-4 w-72\">\n              <div class=\"text-xs font-medium uppercase text-muted-foreground mb-4\">\n                {{ layer.type === 'text' ? 'Text Color' : 'Fill Color' }}\n              </div>\n              <ngs-color-switcher [colors]=\"presetColors()\"\n                                  [selectedColor]=\"layer['fill'] || '#000000'\"\n                                  (colorChange)=\"updateColor($event)\"/>\n            </div>\n          </ng-template>\n        </ngs-popover>\n      </ngs-toolbar-item>\n      <ngs-divider vertical/>\n    }\n\n    <!-- Opacity -->\n    <ngs-toolbar-item>\n      <button ngsIconButton\n              [ngsPopoverTriggerFor]=\"opacityPopover\"\n              position=\"below-center\">\n        <ngs-icon name=\"fluent:blur-24-regular\"/>\n      </button>\n      <ngs-popover #opacityPopover>\n        <ng-template ngsPopoverContent>\n          <div class=\"p-4 w-60 space-y-3\">\n            <div class=\"flex justify-between items-center\">\n              <label class=\"text-xs font-medium uppercase text-muted-foreground\">Opacity</label>\n              <span class=\"text-xs text-muted-foreground\">{{ (layer['opacity'] ?? 1) * 100 | number:'1.0-0' }}%</span>\n            </div>\n            <ngs-slider [min]=\"0\" [max]=\"1\" [step]=\"0.01\">\n              <input ngsSliderThumb\n                     [value]=\"layer['opacity'] ?? 1\"\n                     (valueChange)=\"updateOpacity($event)\"/>\n            </ngs-slider>\n          </div>\n        </ng-template>\n      </ngs-popover>\n    </ngs-toolbar-item>\n\n    <!-- Font Selection for text layers -->\n    @if (layer.type === 'text') {\n      <ngs-toolbar-item>\n        <button ngsButton reverse [ngsMenuTriggerFor]=\"fontMenu\">\n          <span class=\"truncate max-w-[100px]\">{{ layer['fontFamily'] }}</span>\n          <ngs-icon name=\"fluent:chevron-down-20-regular\" class=\"size-5\"/>\n        </button>\n\n        <ngs-menu #fontMenu=\"ngsMenu\">\n          <div class=\"min-w-[200px]\">\n            @for (font of fonts(); track font) {\n              <button ngs-menu-item\n                      [selected]=\"layer['fontFamily'] === font\"\n                      (click)=\"updateFont(font)\">\n                {{ font }}\n              </button>\n            }\n          </div>\n        </ngs-menu>\n      </ngs-toolbar-item>\n\n      <!-- Text Styles -->\n      <ngs-toolbar-item>\n        <button ngsIconButton\n                [ngsPopoverTriggerFor]=\"boldPopover\"\n                position=\"below-center\"\n                [class.text-primary]=\"layer['fontWeight'] && layer['fontWeight'] !== 'normal' && layer['fontWeight'] !== 400\"\n                title=\"Bold\">\n          <ngs-icon name=\"fluent:text-bold-24-regular\"/>\n        </button>\n        <ngs-popover #boldPopover>\n          <ng-template ngsPopoverContent>\n            <div class=\"p-4 w-60 space-y-3\">\n              <div class=\"flex justify-between items-center\">\n                <label class=\"text-xs font-medium uppercase text-muted-foreground\">Font Weight</label>\n                <span class=\"text-xs text-muted-foreground\">{{ getFontWeightName(layer['fontWeight']) }}</span>\n              </div>\n              <ngs-slider [min]=\"300\" [max]=\"900\" [step]=\"100\">\n                <input ngsSliderThumb\n                       [value]=\"layer['fontWeight'] === 'bold' ? 700 : (layer['fontWeight'] === 'normal' ? 400 : (layer['fontWeight'] || 400))\"\n                       (valueChange)=\"updateFontWeight($event)\"/>\n              </ngs-slider>\n            </div>\n          </ng-template>\n        </ngs-popover>\n      </ngs-toolbar-item>\n\n      <!-- Uppercase -->\n      <ngs-toolbar-item>\n        <button ngsIconButton\n                (click)=\"toggleUppercase()\"\n                [class.text-primary]=\"layer['textCase'] === 'upper'\"\n                title=\"Uppercase\">\n          <ngs-icon name=\"fluent:text-case-uppercase-24-regular\"/>\n        </button>\n      </ngs-toolbar-item>\n\n      <ngs-toolbar-item>\n        <ngs-button-toggle-group multiple\n                                 hideSelectionIndicator\n                                 [value]=\"getTextStyle()\"\n                                 (valueChange)=\"updateTextStyle($event)\">\n          <ngs-button-toggle value=\"italic\" title=\"Italic\">\n            <ngs-icon name=\"fluent:text-italic-24-regular\"/>\n          </ngs-button-toggle>\n          <ngs-button-toggle value=\"underline\" title=\"Underline\">\n            <ngs-icon name=\"fluent:text-underline-24-regular\"/>\n          </ngs-button-toggle>\n          <ngs-button-toggle value=\"line-through\" title=\"Strikethrough\">\n            <ngs-icon name=\"fluent:text-strikethrough-24-regular\"/>\n          </ngs-button-toggle>\n        </ngs-button-toggle-group>\n      </ngs-toolbar-item>\n\n      <!-- Text Alignment -->\n      <ngs-toolbar-item>\n        <button ngsIconButton\n                [ngsPopoverTriggerFor]=\"alignPopover\"\n                position=\"below-center\"\n                title=\"Alignment\">\n          <ngs-icon [name]=\"'fluent:text-align-' + (layer['align'] || 'left') + '-24-regular'\"/>\n        </button>\n        <ngs-popover #alignPopover>\n          <ng-template ngsPopoverContent>\n            <div class=\"p-2 flex gap-1\">\n              <button ngsIconButton (click)=\"updateTextAlign('left')\" [class.text-primary]=\"layer['align'] === 'left'\">\n                <ngs-icon name=\"fluent:text-align-left-24-regular\"/>\n              </button>\n              <button ngsIconButton (click)=\"updateTextAlign('center')\" [class.text-primary]=\"layer['align'] === 'center'\">\n                <ngs-icon name=\"fluent:text-align-center-24-regular\"/>\n              </button>\n              <button ngsIconButton (click)=\"updateTextAlign('right')\" [class.text-primary]=\"layer['align'] === 'right'\">\n                <ngs-icon name=\"fluent:text-align-right-24-regular\"/>\n              </button>\n              <button ngsIconButton (click)=\"updateTextAlign('justify')\" [class.text-primary]=\"layer['align'] === 'justify'\">\n                <ngs-icon name=\"fluent:text-align-justify-24-regular\"/>\n              </button>\n            </div>\n          </ng-template>\n        </ngs-popover>\n      </ngs-toolbar-item>\n\n      <!-- Spacing (Line Height & Letter Spacing) -->\n      <ngs-toolbar-item>\n        <button ngsIconButton\n                [ngsPopoverTriggerFor]=\"spacingPopover\"\n                position=\"below-center\"\n                title=\"Spacing\">\n          <ngs-icon name=\"fluent:text-line-spacing-24-regular\"/>\n        </button>\n        <ngs-popover #spacingPopover>\n          <ng-template ngsPopoverContent>\n            <div class=\"p-4 w-60 space-y-6\">\n              <div class=\"space-y-3\">\n                <div class=\"flex justify-between items-center\">\n                  <label class=\"text-xs font-medium uppercase text-muted-foreground\">Line Height</label>\n                  <span class=\"text-xs text-muted-foreground\">{{ layer['lineHeight'] || 1.2 | number:'1.1-1' }}</span>\n                </div>\n                <ngs-slider [min]=\"0.5\" [max]=\"3\" [step]=\"0.1\">\n                  <input ngsSliderThumb\n                         [value]=\"layer['lineHeight'] || 1.2\"\n                         (valueChange)=\"updateLineHeight($event)\"/>\n                </ngs-slider>\n              </div>\n              <div class=\"space-y-3\">\n                <div class=\"flex justify-between items-center\">\n                  <label class=\"text-xs font-medium uppercase text-muted-foreground\">Letter Spacing</label>\n                  <span class=\"text-xs text-muted-foreground\">{{ layer['letterSpacing'] || 0 }}</span>\n                </div>\n                <ngs-slider [min]=\"-5\" [max]=\"50\" [step]=\"1\">\n                  <input ngsSliderThumb\n                         [value]=\"layer['letterSpacing'] || 0\"\n                         (valueChange)=\"updateLetterSpacing($event)\"/>\n                </ngs-slider>\n              </div>\n            </div>\n          </ng-template>\n        </ngs-popover>\n      </ngs-toolbar-item>\n    }\n\n    @if (layer.type === 'image') {\n      <ngs-toolbar-item>\n        <button ngsButton reverse [ngsMenuTriggerFor]=\"flipMenu\">\n          <span>Flip</span>\n          <ngs-icon name=\"fluent:chevron-down-20-regular\" class=\"size-5\"/>\n        </button>\n\n        <ngs-menu #flipMenu=\"ngsMenu\">\n          <div class=\"min-w-[150px]\">\n            <button ngs-menu-item (click)=\"flipHorizontal()\">\n              <ngs-icon name=\"fluent:flip-horizontal-24-regular\" class=\"mr-2\"/>\n              <span>Flip horizontally</span>\n            </button>\n            <button ngs-menu-item (click)=\"flipVertical()\">\n              <ngs-icon name=\"fluent:flip-vertical-24-regular\" class=\"mr-2\"/>\n              <span>Flip vertically</span>\n            </button>\n          </div>\n        </ngs-menu>\n      </ngs-toolbar-item>\n\n      <ngs-toolbar-item>\n        <button ngsButton reverse [ngsMenuTriggerFor]=\"fitMenu\">\n          <span>Fit to</span>\n          <ngs-icon name=\"fluent:chevron-down-20-regular\" class=\"size-5\"/>\n        </button>\n\n        <ngs-menu #fitMenu=\"ngsMenu\">\n          <div class=\"min-w-[150px]\">\n            <button ngs-menu-item (click)=\"fitToPage()\">\n              <span>Fit to page</span>\n            </button>\n            <button ngs-menu-item (click)=\"fillPage()\">\n              <span>Fill page</span>\n            </button>\n          </div>\n        </ngs-menu>\n      </ngs-toolbar-item>\n    }\n\n    <ngs-toolbar-item>\n      <button ngsButton reverse (click)=\"openEffects()\">\n        <span>Effects</span>\n      </button>\n    </ngs-toolbar-item>\n\n    <ngs-toolbar-spacer/>\n\n    <!--  <ngs-divider vertical/>-->\n\n    <ngs-toolbar-item>\n      <button ngsIconButton (click)=\"toggleLock()\">\n        <ngs-icon [name]=\"layer['locked'] ? 'fluent:lock-closed-24-regular' : 'fluent:lock-open-24-regular'\"/>\n      </button>\n    </ngs-toolbar-item>\n\n  </ngs-toolbar>\n}\n", styles: [":host{display:contents}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: ColorSwitcher, selector: "ngs-color-switcher", inputs: ["colors", "selectedColor", "disabled"], outputs: ["colorChange"], exportAs: ["ngsColorSwitcher"] }, { kind: "component", type: Slider, selector: "ngs-slider", inputs: ["disabled", "discrete", "showTickMarks", "min", "max", "step", "displayWith"], exportAs: ["ngsSlider"] }, { kind: "directive", type: SliderThumb, selector: "input[ngsSliderThumb]", inputs: ["value"], outputs: ["valueChange"], exportAs: ["ngsSliderThumb"] }, { kind: "component", type: Toolbar, selector: "ngs-toolbar", exportAs: ["ngsToolbar"] }, { kind: "component", type: ToolbarItem, selector: "ngs-toolbar-item", inputs: ["hidden"], outputs: ["hiddenChange"] }, { kind: "component", type: Popover, selector: "ngs-popover", exportAs: ["ngsPopover"] }, { kind: "directive", type: PopoverContent, selector: "[ngsPopoverContent]" }, { kind: "directive", type: PopoverTriggerForDirective, selector: "[ngsPopoverTriggerFor]", inputs: ["ngsPopoverTriggerFor", "ngsPopoverContext", "trigger", "position", "delay", "origin", "closeOnOriginClick", "closeOnOriginMouseLeave", "hasBackdrop"], outputs: ["opened", "closed"], exportAs: ["ngsPopoverTriggerFor"] }, { kind: "component", type: Button, selector: "    button[ngsButton], button[ngsIconButton],    a[ngsButton], a[ngsIconButton]  ", inputs: ["ngsButton", "ngsIconButton", "loading", "disabled", "disabledInteractive", "disableRipple", "reverse", "fullWidth", "hideTextOnMobile"], exportAs: ["ngsButton"] }, { kind: "component", type: Icon, selector: "ngs-icon", inputs: ["name"], exportAs: ["ngsIcon"] }, { kind: "component", type: Divider, selector: "ngs-divider", inputs: ["vertical", "inset", "fixedHeight"], exportAs: ["ngsDivider"] }, { kind: "component", type: Menu, selector: "ngs-menu", inputs: ["role", "classList", "xPosition", "yPosition"], outputs: ["closed"], exportAs: ["ngsMenu"] }, { kind: "component", type: MenuItem, selector: "ngs-menu-item, [ngs-menu-item]", inputs: ["disabled", "role", "selected"], outputs: ["_triggered"], exportAs: ["ngsMenuItem"] }, { kind: "directive", type: MenuTrigger, selector: "[ngsMenuTriggerFor]", inputs: ["ngsMenuTriggerFor", "ngsMenuTriggerData", "ngsMenuDisabled", "xPosition", "yPosition", "ngsMenuTriggerRestoreFocus"], outputs: ["menuOpened", "menuClosed"], exportAs: ["ngsMenuTrigger"] }, { kind: "directive", type: Ripple, selector: "[ngsRipple]", inputs: ["ngsRippleColor", "ngsRippleUnbounded", "ngsRippleCentered", "ngsRippleRadius", "ngsRippleAnimation", "ngsRippleDisabled", "ngsRippleTrigger"], outputs: ["ngsRippleCenteredChange", "ngsRippleDisabledChange", "ngsRippleTriggerChange"], exportAs: ["ngsRipple"] }, { kind: "component", type: ToolbarSpacer, selector: "ngs-toolbar-spacer" }, { kind: "component", type: ButtonToggle, selector: "ngs-button-toggle", inputs: ["id", "value", "name", "checked", "disabled"], outputs: ["change"] }, { kind: "component", type: ButtonToggleGroup, selector: "ngs-button-toggle-group", inputs: ["appearance", "disabled", "multiple", "hideSelectionIndicator", "vertical", "value"], outputs: ["valueChange", "change"], exportAs: ["ngsButtonToggleGroup"] }, { kind: "ngmodule", type: FormsModule }, { kind: "pipe", type: i1.DecimalPipe, name: "number" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: Settings, decorators: [{
+            type: Component,
+            args: [{ selector: 'ngs-settings', imports: [
+                        CommonModule,
+                        ColorSwitcher,
+                        Slider,
+                        SliderThumb,
+                        Toolbar,
+                        ToolbarItem,
+                        Popover,
+                        PopoverContent,
+                        PopoverTriggerForDirective,
+                        Button,
+                        Icon,
+                        Divider,
+                        DecimalPipe,
+                        Menu,
+                        MenuItem,
+                        MenuTrigger,
+                        Ripple,
+                        ToolbarSpacer,
+                        ButtonToggle,
+                        ButtonToggleGroup,
+                        FormsModule
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "@let layer = selectedLayer();\n\n@if (layer) {\n  <ngs-toolbar\n    class=\"h-14 z-10 bg-surface-container-lowest border-b border-border px-5 absolute top-0 left-0 right-0\">\n    <!-- Color -->\n    @if (showColorPicker()) {\n      <ngs-toolbar-item>\n        <button [ngsPopoverTriggerFor]=\"colorPopover\"\n                position=\"below-center\"\n                class=\"size-7 cursor-pointer hover:ring-2 hover:ring-primary rounded-full border border-border\"\n                ngsRipple\n                [style.backgroundColor]=\"layer['fill'] || '#000000'\">\n        </button>\n        <ngs-popover #colorPopover>\n          <ng-template ngsPopoverContent>\n            <div class=\"p-4 w-72\">\n              <div class=\"text-xs font-medium uppercase text-muted-foreground mb-4\">\n                {{ layer.type === 'text' ? 'Text Color' : 'Fill Color' }}\n              </div>\n              <ngs-color-switcher [colors]=\"presetColors()\"\n                                  [selectedColor]=\"layer['fill'] || '#000000'\"\n                                  (colorChange)=\"updateColor($event)\"/>\n            </div>\n          </ng-template>\n        </ngs-popover>\n      </ngs-toolbar-item>\n      <ngs-divider vertical/>\n    }\n\n    <!-- Opacity -->\n    <ngs-toolbar-item>\n      <button ngsIconButton\n              [ngsPopoverTriggerFor]=\"opacityPopover\"\n              position=\"below-center\">\n        <ngs-icon name=\"fluent:blur-24-regular\"/>\n      </button>\n      <ngs-popover #opacityPopover>\n        <ng-template ngsPopoverContent>\n          <div class=\"p-4 w-60 space-y-3\">\n            <div class=\"flex justify-between items-center\">\n              <label class=\"text-xs font-medium uppercase text-muted-foreground\">Opacity</label>\n              <span class=\"text-xs text-muted-foreground\">{{ (layer['opacity'] ?? 1) * 100 | number:'1.0-0' }}%</span>\n            </div>\n            <ngs-slider [min]=\"0\" [max]=\"1\" [step]=\"0.01\">\n              <input ngsSliderThumb\n                     [value]=\"layer['opacity'] ?? 1\"\n                     (valueChange)=\"updateOpacity($event)\"/>\n            </ngs-slider>\n          </div>\n        </ng-template>\n      </ngs-popover>\n    </ngs-toolbar-item>\n\n    <!-- Font Selection for text layers -->\n    @if (layer.type === 'text') {\n      <ngs-toolbar-item>\n        <button ngsButton reverse [ngsMenuTriggerFor]=\"fontMenu\">\n          <span class=\"truncate max-w-[100px]\">{{ layer['fontFamily'] }}</span>\n          <ngs-icon name=\"fluent:chevron-down-20-regular\" class=\"size-5\"/>\n        </button>\n\n        <ngs-menu #fontMenu=\"ngsMenu\">\n          <div class=\"min-w-[200px]\">\n            @for (font of fonts(); track font) {\n              <button ngs-menu-item\n                      [selected]=\"layer['fontFamily'] === font\"\n                      (click)=\"updateFont(font)\">\n                {{ font }}\n              </button>\n            }\n          </div>\n        </ngs-menu>\n      </ngs-toolbar-item>\n\n      <!-- Text Styles -->\n      <ngs-toolbar-item>\n        <button ngsIconButton\n                [ngsPopoverTriggerFor]=\"boldPopover\"\n                position=\"below-center\"\n                [class.text-primary]=\"layer['fontWeight'] && layer['fontWeight'] !== 'normal' && layer['fontWeight'] !== 400\"\n                title=\"Bold\">\n          <ngs-icon name=\"fluent:text-bold-24-regular\"/>\n        </button>\n        <ngs-popover #boldPopover>\n          <ng-template ngsPopoverContent>\n            <div class=\"p-4 w-60 space-y-3\">\n              <div class=\"flex justify-between items-center\">\n                <label class=\"text-xs font-medium uppercase text-muted-foreground\">Font Weight</label>\n                <span class=\"text-xs text-muted-foreground\">{{ getFontWeightName(layer['fontWeight']) }}</span>\n              </div>\n              <ngs-slider [min]=\"300\" [max]=\"900\" [step]=\"100\">\n                <input ngsSliderThumb\n                       [value]=\"layer['fontWeight'] === 'bold' ? 700 : (layer['fontWeight'] === 'normal' ? 400 : (layer['fontWeight'] || 400))\"\n                       (valueChange)=\"updateFontWeight($event)\"/>\n              </ngs-slider>\n            </div>\n          </ng-template>\n        </ngs-popover>\n      </ngs-toolbar-item>\n\n      <!-- Uppercase -->\n      <ngs-toolbar-item>\n        <button ngsIconButton\n                (click)=\"toggleUppercase()\"\n                [class.text-primary]=\"layer['textCase'] === 'upper'\"\n                title=\"Uppercase\">\n          <ngs-icon name=\"fluent:text-case-uppercase-24-regular\"/>\n        </button>\n      </ngs-toolbar-item>\n\n      <ngs-toolbar-item>\n        <ngs-button-toggle-group multiple\n                                 hideSelectionIndicator\n                                 [value]=\"getTextStyle()\"\n                                 (valueChange)=\"updateTextStyle($event)\">\n          <ngs-button-toggle value=\"italic\" title=\"Italic\">\n            <ngs-icon name=\"fluent:text-italic-24-regular\"/>\n          </ngs-button-toggle>\n          <ngs-button-toggle value=\"underline\" title=\"Underline\">\n            <ngs-icon name=\"fluent:text-underline-24-regular\"/>\n          </ngs-button-toggle>\n          <ngs-button-toggle value=\"line-through\" title=\"Strikethrough\">\n            <ngs-icon name=\"fluent:text-strikethrough-24-regular\"/>\n          </ngs-button-toggle>\n        </ngs-button-toggle-group>\n      </ngs-toolbar-item>\n\n      <!-- Text Alignment -->\n      <ngs-toolbar-item>\n        <button ngsIconButton\n                [ngsPopoverTriggerFor]=\"alignPopover\"\n                position=\"below-center\"\n                title=\"Alignment\">\n          <ngs-icon [name]=\"'fluent:text-align-' + (layer['align'] || 'left') + '-24-regular'\"/>\n        </button>\n        <ngs-popover #alignPopover>\n          <ng-template ngsPopoverContent>\n            <div class=\"p-2 flex gap-1\">\n              <button ngsIconButton (click)=\"updateTextAlign('left')\" [class.text-primary]=\"layer['align'] === 'left'\">\n                <ngs-icon name=\"fluent:text-align-left-24-regular\"/>\n              </button>\n              <button ngsIconButton (click)=\"updateTextAlign('center')\" [class.text-primary]=\"layer['align'] === 'center'\">\n                <ngs-icon name=\"fluent:text-align-center-24-regular\"/>\n              </button>\n              <button ngsIconButton (click)=\"updateTextAlign('right')\" [class.text-primary]=\"layer['align'] === 'right'\">\n                <ngs-icon name=\"fluent:text-align-right-24-regular\"/>\n              </button>\n              <button ngsIconButton (click)=\"updateTextAlign('justify')\" [class.text-primary]=\"layer['align'] === 'justify'\">\n                <ngs-icon name=\"fluent:text-align-justify-24-regular\"/>\n              </button>\n            </div>\n          </ng-template>\n        </ngs-popover>\n      </ngs-toolbar-item>\n\n      <!-- Spacing (Line Height & Letter Spacing) -->\n      <ngs-toolbar-item>\n        <button ngsIconButton\n                [ngsPopoverTriggerFor]=\"spacingPopover\"\n                position=\"below-center\"\n                title=\"Spacing\">\n          <ngs-icon name=\"fluent:text-line-spacing-24-regular\"/>\n        </button>\n        <ngs-popover #spacingPopover>\n          <ng-template ngsPopoverContent>\n            <div class=\"p-4 w-60 space-y-6\">\n              <div class=\"space-y-3\">\n                <div class=\"flex justify-between items-center\">\n                  <label class=\"text-xs font-medium uppercase text-muted-foreground\">Line Height</label>\n                  <span class=\"text-xs text-muted-foreground\">{{ layer['lineHeight'] || 1.2 | number:'1.1-1' }}</span>\n                </div>\n                <ngs-slider [min]=\"0.5\" [max]=\"3\" [step]=\"0.1\">\n                  <input ngsSliderThumb\n                         [value]=\"layer['lineHeight'] || 1.2\"\n                         (valueChange)=\"updateLineHeight($event)\"/>\n                </ngs-slider>\n              </div>\n              <div class=\"space-y-3\">\n                <div class=\"flex justify-between items-center\">\n                  <label class=\"text-xs font-medium uppercase text-muted-foreground\">Letter Spacing</label>\n                  <span class=\"text-xs text-muted-foreground\">{{ layer['letterSpacing'] || 0 }}</span>\n                </div>\n                <ngs-slider [min]=\"-5\" [max]=\"50\" [step]=\"1\">\n                  <input ngsSliderThumb\n                         [value]=\"layer['letterSpacing'] || 0\"\n                         (valueChange)=\"updateLetterSpacing($event)\"/>\n                </ngs-slider>\n              </div>\n            </div>\n          </ng-template>\n        </ngs-popover>\n      </ngs-toolbar-item>\n    }\n\n    @if (layer.type === 'image') {\n      <ngs-toolbar-item>\n        <button ngsButton reverse [ngsMenuTriggerFor]=\"flipMenu\">\n          <span>Flip</span>\n          <ngs-icon name=\"fluent:chevron-down-20-regular\" class=\"size-5\"/>\n        </button>\n\n        <ngs-menu #flipMenu=\"ngsMenu\">\n          <div class=\"min-w-[150px]\">\n            <button ngs-menu-item (click)=\"flipHorizontal()\">\n              <ngs-icon name=\"fluent:flip-horizontal-24-regular\" class=\"mr-2\"/>\n              <span>Flip horizontally</span>\n            </button>\n            <button ngs-menu-item (click)=\"flipVertical()\">\n              <ngs-icon name=\"fluent:flip-vertical-24-regular\" class=\"mr-2\"/>\n              <span>Flip vertically</span>\n            </button>\n          </div>\n        </ngs-menu>\n      </ngs-toolbar-item>\n\n      <ngs-toolbar-item>\n        <button ngsButton reverse [ngsMenuTriggerFor]=\"fitMenu\">\n          <span>Fit to</span>\n          <ngs-icon name=\"fluent:chevron-down-20-regular\" class=\"size-5\"/>\n        </button>\n\n        <ngs-menu #fitMenu=\"ngsMenu\">\n          <div class=\"min-w-[150px]\">\n            <button ngs-menu-item (click)=\"fitToPage()\">\n              <span>Fit to page</span>\n            </button>\n            <button ngs-menu-item (click)=\"fillPage()\">\n              <span>Fill page</span>\n            </button>\n          </div>\n        </ngs-menu>\n      </ngs-toolbar-item>\n    }\n\n    <ngs-toolbar-item>\n      <button ngsButton reverse (click)=\"openEffects()\">\n        <span>Effects</span>\n      </button>\n    </ngs-toolbar-item>\n\n    <ngs-toolbar-spacer/>\n\n    <!--  <ngs-divider vertical/>-->\n\n    <ngs-toolbar-item>\n      <button ngsIconButton (click)=\"toggleLock()\">\n        <ngs-icon [name]=\"layer['locked'] ? 'fluent:lock-closed-24-regular' : 'fluent:lock-open-24-regular'\"/>\n      </button>\n    </ngs-toolbar-item>\n\n  </ngs-toolbar>\n}\n", styles: [":host{display:contents}\n"] }]
+        }] });
+
+class Effects {
+    designerService = inject(ImageDesignerService);
+    imageDesigner = inject(IMAGE_DESIGNER);
+    selectedLayerId = this.designerService.selectedLayerId;
+    layers = this.designerService.layers;
+    selectedLayer = computed(() => {
+        const id = this.selectedLayerId();
+        if (!id)
+            return null;
+        return this.layers().find(l => l.id === id);
+    }, ...(ngDevMode ? [{ debugName: "selectedLayer" }] : /* istanbul ignore next */ []));
+    defaultThumb = 'https://picsum.photos/id/11/200/200';
+    selectedLayerThumb = computed(() => {
+        const id = this.selectedLayerId();
+        if (!id)
+            return this.defaultThumb;
+        return this.designerService.getLayerThumbnail(id) || this.defaultThumb;
+    }, ...(ngDevMode ? [{ debugName: "selectedLayerThumb" }] : /* istanbul ignore next */ []));
+    effects = computed(() => {
+        const id = this.selectedLayerId();
+        const thumb = this.selectedLayerThumb();
+        if (!id) {
+            return [
+                { id: 'none', name: 'Original', thumb },
+                { id: 'grayscale', name: 'Grayscale', thumb },
+                { id: 'sepia', name: 'Sepia', thumb },
+                { id: 'cold', name: 'Cold', thumb },
+                { id: 'warm', name: 'Warm', thumb },
+            ];
+        }
+        return [
+            { id: 'none', name: 'Original', thumb: this.designerService.getLayerThumbnail(id, 'none') || thumb },
+            { id: 'grayscale', name: 'Grayscale', thumb: this.designerService.getLayerThumbnail(id, 'grayscale') || thumb },
+            { id: 'sepia', name: 'Sepia', thumb: this.designerService.getLayerThumbnail(id, 'sepia') || thumb },
+            { id: 'cold', name: 'Cold', thumb: this.designerService.getLayerThumbnail(id, 'cold') || thumb },
+            { id: 'warm', name: 'Warm', thumb: this.designerService.getLayerThumbnail(id, 'warm') || thumb },
+        ];
+    }, ...(ngDevMode ? [{ debugName: "effects" }] : /* istanbul ignore next */ []));
+    adjustments = signal([
+        { id: 'blur', name: 'Blur', min: 0, max: 20, step: 1, default: 0 },
+        // { id: 'brightness', name: 'Brightness', min: -1, max: 1, step: 0.1, default: 0 },
+        // { id: 'temperature', name: 'Temperature', min: -100, max: 100, step: 1, default: 0 },
+        // { id: 'contrast', name: 'Contrast', min: -100, max: 100, step: 1, default: 0 },
+        // { id: 'white', name: 'White', min: -100, max: 100, step: 1, default: 0 },
+        // { id: 'black', name: 'Black', min: -100, max: 100, step: 1, default: 0 },
+        // { id: 'vibrance', name: 'Vibrance', min: -100, max: 100, step: 1, default: 0 },
+        // { id: 'saturation', name: 'Saturation', min: -100, max: 100, step: 1, default: 0 },
+        { id: 'border', name: 'Border', min: 0, max: 50, step: 1, default: 0 },
+        { id: 'cornerRadius', name: 'Corner Radius', min: 0, max: 100, step: 1, default: 0 },
+        { id: 'shadow', name: 'Shadow', isGroup: true, controls: [
+                { id: 'shadowBlur', name: 'Blur', min: 0, max: 100, step: 1, default: 15 },
+                { id: 'shadowOffsetX', name: 'Offset X', min: -100, max: 100, step: 1, default: 0 },
+                { id: 'shadowOffsetY', name: 'Offset Y', min: -100, max: 100, step: 1, default: 0 },
+                { id: 'shadowOpacity', name: 'Opacity', min: 0, max: 100, step: 1, default: 100 },
+                { id: 'shadowColor', name: 'Color', type: 'color', default: '#000000' }
+            ] }
+    ], ...(ngDevMode ? [{ debugName: "adjustments" }] : /* istanbul ignore next */ []));
+    async applyEffect(effectId) {
+        const id = this.selectedLayerId();
+        if (id) {
+            await this.designerService.updateLayer(id, { effect: effectId });
+        }
+    }
+    async resetAll() {
+        const id = this.selectedLayerId();
+        if (id) {
+            const config = { effect: 'none' };
+            this.adjustments().forEach(adj => {
+                config[`${adj.id}Enabled`] = false;
+                if (adj.isGroup) {
+                    adj.controls.forEach(ctrl => {
+                        config[ctrl.id] = ctrl.default;
+                    });
+                }
+                else {
+                    config[adj.id] = adj.default;
+                }
+            });
+            await this.designerService.updateLayer(id, config);
+        }
+    }
+    async updateAdjustment(id, value) {
+        const layerId = this.selectedLayerId();
+        if (layerId) {
+            await this.designerService.updateLayer(layerId, { [id]: value });
+        }
+    }
+    async toggleAdjustment(id, enabled) {
+        const layerId = this.selectedLayerId();
+        if (layerId) {
+            const config = { [`${id}Enabled`]: enabled };
+            if (!enabled) {
+                const adj = this.adjustments().find(a => a.id === id);
+                if (adj) {
+                    if (adj.isGroup) {
+                        adj.controls.forEach(control => {
+                            config[control.id] = control.default;
+                        });
+                    }
+                    else {
+                        config[id] = adj.default;
+                    }
+                }
+            }
+            await this.designerService.updateLayer(layerId, config);
+        }
+    }
+    close() {
+        this.imageDesigner.effectsPortal.set(null);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: Effects, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", type: Effects, isStandalone: true, selector: "ngs-effects", ngImport: i0, template: "<ngs-panel class=\"h-full\">\n  <ngs-panel-header class=\"border-b border-border flex items-center ps-4 pe-2\">\n    <ngs-toolbar class=\"h-full\">\n      <span class=\"font-medium\">Effects</span>\n      <ngs-toolbar-spacer/>\n      <button ngsButton=\"tonal\" (click)=\"resetAll()\" class=\"me-2 h-8 text-xs px-3\">\n        Reset\n      </button>\n      <button ngsIconButton (click)=\"close()\">\n        <ngs-icon name=\"fluent:dismiss-24-regular\"/>\n      </button>\n    </ngs-toolbar>\n  </ngs-panel-header>\n  <ngs-panel-content class=\"p-0 overflow-y-auto\">\n    <div class=\"p-4\">\n      <!-- Preset Effects -->\n      <div class=\"flex gap-4 pb-6 scrollbar-hide flex-wrap\">\n        @for (effect of effects() || []; track effect.id) {\n          <button (click)=\"applyEffect(effect.id)\"\n                  class=\"flex flex-col items-center gap-2 group min-w-[80px]\">\n            <div class=\"w-20 h-20 rounded-xl overflow-hidden border-2 transition-all group-hover:border-primary\"\n                 [class.border-primary]=\"(selectedLayer()?.['effect'] || 'none') === effect.id\"\n                 [class.border-transparent]=\"(selectedLayer()?.['effect'] || 'none') !== effect.id\">\n              <img [src]=\"effect.thumb\" class=\"w-full h-full object-cover\" [alt]=\"effect.name\">\n            </div>\n            <span class=\"text-xs font-medium text-muted-foreground group-hover:text-foreground transition-colors\">\n              {{ effect.name }}\n            </span>\n          </button>\n        }\n      </div>\n\n      <!-- Adjustments -->\n      <div class=\"flex flex-col gap-6\">\n        @for (adj of adjustments() || []; track adj.id) {\n          <div class=\"flex flex-col gap-3\">\n            <div class=\"flex items-center justify-between\">\n              <span class=\"text-sm font-medium\">{{ adj.name }}</span>\n              <ngs-slide-toggle [checked]=\"selectedLayer()?.[adj.id + 'Enabled']\"\n                                (change)=\"toggleAdjustment(adj.id, $event.checked)\"/>\n            </div>\n\n            @if (selectedLayer()?.[adj.id + 'Enabled']) {\n              <div class=\"flex flex-col gap-4\">\n                @if (adj.isGroup) {\n                  @for (control of adj.controls || []; track control.id) {\n                    <div class=\"flex flex-col gap-2\">\n                      <div class=\"flex items-center justify-between\">\n                        <span class=\"text-xs text-muted-foreground\">{{ control.name }}</span>\n                        @if (control.type === 'color') {\n                          <button ngs-color-picker-thumbnail\n                                  [color]=\"selectedLayer()?.[control.id] || control.default\"\n                                  [ngsColorPickerTriggerFor]=\"colorPicker\"\n                                  class=\"cursor-pointer border border-border rounded\"></button>\n                          <ng-template #colorPicker>\n                            <ngs-color-picker [ngModel]=\"selectedLayer()?.[control.id] || control.default\"\n                                              (ngModelChange)=\"updateAdjustment(control.id, $event)\"/>\n                          </ng-template>\n                        } @else {\n                          <input ngsInput\n                                 type=\"number\"\n                                 class=\"w-16 h-8 text-center text-sm border border-border rounded-md bg-surface-container\"\n                                 [ngModel]=\"selectedLayer()?.[control.id] ?? control.default\"\n                                 (ngModelChange)=\"updateAdjustment(control.id, $event)\">\n                        }\n                      </div>\n                      @if (control.type !== 'color') {\n                        <ngs-slider [min]=\"control.min\"\n                                    [max]=\"control.max\"\n                                    [step]=\"control.step\">\n                          <input ngsSliderThumb\n                                 [value]=\"selectedLayer()?.[control.id] ?? control.default\"\n                                 (valueChange)=\"updateAdjustment(control.id, $event)\">\n                        </ngs-slider>\n                      }\n                    </div>\n                  }\n                } @else {\n                  <div class=\"flex items-center gap-4\">\n                    @if (adj.id === 'border') {\n                      <button ngs-color-picker-thumbnail\n                              [color]=\"selectedLayer()?.['borderColor'] || selectedLayer()?.['fill'] || '#000000'\"\n                              [ngsColorPickerTriggerFor]=\"borderPicker\"\n                              class=\"cursor-pointer border border-border rounded\"></button>\n                      <ng-template #borderPicker>\n                        <ngs-color-picker [ngModel]=\"selectedLayer()?.['borderColor'] || selectedLayer()?.['fill'] || '#000000'\"\n                                          (ngModelChange)=\"updateAdjustment('borderColor', $event)\"/>\n                      </ng-template>\n                    }\n                    <ngs-slider class=\"flex-1\"\n                                [min]=\"adj.min\"\n                                [max]=\"adj.max\"\n                                [step]=\"adj.step\">\n                      <input ngsSliderThumb\n                             [value]=\"selectedLayer()?.[adj.id] ?? adj.default\"\n                             (valueChange)=\"updateAdjustment(adj.id, $event)\">\n                    </ngs-slider>\n                    <input ngsInput\n                           type=\"number\"\n                           class=\"w-16 h-8 text-center text-sm border border-border rounded-md bg-surface-container\"\n                           [ngModel]=\"selectedLayer()?.[adj.id] ?? adj.default\"\n                           (ngModelChange)=\"updateAdjustment(adj.id, $event)\">\n                  </div>\n                }\n              </div>\n            }\n          </div>\n        }\n      </div>\n    </div>\n  </ngs-panel-content>\n</ngs-panel>\n", styles: [":host{display:block;height:100%}:host .scrollbar-hide{-ms-overflow-style:none;scrollbar-width:none}:host .scrollbar-hide::-webkit-scrollbar{display:none}:host ngs-slider{--ngs-slider-track-height: 4px;--ngs-slider-thumb-size: 16px}:host input[type=number]::-webkit-inner-spin-button,:host input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.ngs-color-picker-thumbnail{width:32px;height:32px;min-width:32px;background:var(--ngs-color-picker-thumbnail-bg, #000)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: Panel, selector: "ngs-panel", inputs: ["absolute"], exportAs: ["ngsPanel"] }, { kind: "component", type: PanelHeader, selector: "ngs-panel-header", inputs: ["autoHeight"], exportAs: ["ngsPanelHeader"] }, { kind: "component", type: PanelContent, selector: "ngs-panel-content", exportAs: ["ngsPanelContent"] }, { kind: "component", type: Button, selector: "    button[ngsButton], button[ngsIconButton],    a[ngsButton], a[ngsIconButton]  ", inputs: ["ngsButton", "ngsIconButton", "loading", "disabled", "disabledInteractive", "disableRipple", "reverse", "fullWidth", "hideTextOnMobile"], exportAs: ["ngsButton"] }, { kind: "component", type: Icon, selector: "ngs-icon", inputs: ["name"], exportAs: ["ngsIcon"] }, { kind: "component", type: SlideToggle, selector: "ngs-slide-toggle", inputs: ["id", "name", "labelPosition", "aria-label", "aria-labelledby", "aria-describedby", "required", "disabled", "disableRipple", "tabIndex", "hideIcon", "color", "checked"], outputs: ["disabledChange", "checkedChange", "change", "toggleChange"], exportAs: ["ngsSlideToggle"] }, { kind: "component", type: Slider, selector: "ngs-slider", inputs: ["disabled", "discrete", "showTickMarks", "min", "max", "step", "displayWith"], exportAs: ["ngsSlider"] }, { kind: "directive", type: SliderThumb, selector: "input[ngsSliderThumb]", inputs: ["value"], outputs: ["valueChange"], exportAs: ["ngsSliderThumb"] }, { kind: "directive", type: Input, selector: "input[ngsInput], textarea[ngsInput]", inputs: ["id", "placeholder", "required", "disabled", "readonly", "errorStateMatcher"], exportAs: ["ngsInput"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.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$1.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: Toolbar, selector: "ngs-toolbar", exportAs: ["ngsToolbar"] }, { kind: "component", type: ToolbarSpacer, selector: "ngs-toolbar-spacer" }, { kind: "component", type: ColorPicker, selector: "ngs-color-picker", inputs: ["color", "disabled", "asDropdown", "showOpacity", "resultFormat"], outputs: ["colorChange", "rawColorChange"], exportAs: ["ngsColorPicker"] }, { kind: "component", type: ColorPickerThumbnail, selector: "ngs-color-picker-thumbnail,[ngs-color-picker-thumbnail]", inputs: ["color"], exportAs: ["ngsColorPickerThumbnail"] }, { kind: "directive", type: ColorPickerTriggerForDirective, selector: "[ngsColorPickerTriggerFor]", inputs: ["ngsColorPickerTriggerFor", "position"], outputs: ["opened", "closed"], exportAs: ["ngsColorPickerTriggerFor"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: Effects, decorators: [{
+            type: Component,
+            args: [{ selector: 'ngs-effects', imports: [
+                        CommonModule,
+                        Panel,
+                        PanelHeader,
+                        PanelContent,
+                        Button,
+                        Icon,
+                        SlideToggle,
+                        Slider,
+                        SliderThumb,
+                        Input,
+                        FormsModule,
+                        Toolbar,
+                        ToolbarSpacer,
+                        ColorPicker,
+                        ColorPickerThumbnail,
+                        ColorPickerTriggerForDirective
+                    ], template: "<ngs-panel class=\"h-full\">\n  <ngs-panel-header class=\"border-b border-border flex items-center ps-4 pe-2\">\n    <ngs-toolbar class=\"h-full\">\n      <span class=\"font-medium\">Effects</span>\n      <ngs-toolbar-spacer/>\n      <button ngsButton=\"tonal\" (click)=\"resetAll()\" class=\"me-2 h-8 text-xs px-3\">\n        Reset\n      </button>\n      <button ngsIconButton (click)=\"close()\">\n        <ngs-icon name=\"fluent:dismiss-24-regular\"/>\n      </button>\n    </ngs-toolbar>\n  </ngs-panel-header>\n  <ngs-panel-content class=\"p-0 overflow-y-auto\">\n    <div class=\"p-4\">\n      <!-- Preset Effects -->\n      <div class=\"flex gap-4 pb-6 scrollbar-hide flex-wrap\">\n        @for (effect of effects() || []; track effect.id) {\n          <button (click)=\"applyEffect(effect.id)\"\n                  class=\"flex flex-col items-center gap-2 group min-w-[80px]\">\n            <div class=\"w-20 h-20 rounded-xl overflow-hidden border-2 transition-all group-hover:border-primary\"\n                 [class.border-primary]=\"(selectedLayer()?.['effect'] || 'none') === effect.id\"\n                 [class.border-transparent]=\"(selectedLayer()?.['effect'] || 'none') !== effect.id\">\n              <img [src]=\"effect.thumb\" class=\"w-full h-full object-cover\" [alt]=\"effect.name\">\n            </div>\n            <span class=\"text-xs font-medium text-muted-foreground group-hover:text-foreground transition-colors\">\n              {{ effect.name }}\n            </span>\n          </button>\n        }\n      </div>\n\n      <!-- Adjustments -->\n      <div class=\"flex flex-col gap-6\">\n        @for (adj of adjustments() || []; track adj.id) {\n          <div class=\"flex flex-col gap-3\">\n            <div class=\"flex items-center justify-between\">\n              <span class=\"text-sm font-medium\">{{ adj.name }}</span>\n              <ngs-slide-toggle [checked]=\"selectedLayer()?.[adj.id + 'Enabled']\"\n                                (change)=\"toggleAdjustment(adj.id, $event.checked)\"/>\n            </div>\n\n            @if (selectedLayer()?.[adj.id + 'Enabled']) {\n              <div class=\"flex flex-col gap-4\">\n                @if (adj.isGroup) {\n                  @for (control of adj.controls || []; track control.id) {\n                    <div class=\"flex flex-col gap-2\">\n                      <div class=\"flex items-center justify-between\">\n                        <span class=\"text-xs text-muted-foreground\">{{ control.name }}</span>\n                        @if (control.type === 'color') {\n                          <button ngs-color-picker-thumbnail\n                                  [color]=\"selectedLayer()?.[control.id] || control.default\"\n                                  [ngsColorPickerTriggerFor]=\"colorPicker\"\n                                  class=\"cursor-pointer border border-border rounded\"></button>\n                          <ng-template #colorPicker>\n                            <ngs-color-picker [ngModel]=\"selectedLayer()?.[control.id] || control.default\"\n                                              (ngModelChange)=\"updateAdjustment(control.id, $event)\"/>\n                          </ng-template>\n                        } @else {\n                          <input ngsInput\n                                 type=\"number\"\n                                 class=\"w-16 h-8 text-center text-sm border border-border rounded-md bg-surface-container\"\n                                 [ngModel]=\"selectedLayer()?.[control.id] ?? control.default\"\n                                 (ngModelChange)=\"updateAdjustment(control.id, $event)\">\n                        }\n                      </div>\n                      @if (control.type !== 'color') {\n                        <ngs-slider [min]=\"control.min\"\n                                    [max]=\"control.max\"\n                                    [step]=\"control.step\">\n                          <input ngsSliderThumb\n                                 [value]=\"selectedLayer()?.[control.id] ?? control.default\"\n                                 (valueChange)=\"updateAdjustment(control.id, $event)\">\n                        </ngs-slider>\n                      }\n                    </div>\n                  }\n                } @else {\n                  <div class=\"flex items-center gap-4\">\n                    @if (adj.id === 'border') {\n                      <button ngs-color-picker-thumbnail\n                              [color]=\"selectedLayer()?.['borderColor'] || selectedLayer()?.['fill'] || '#000000'\"\n                              [ngsColorPickerTriggerFor]=\"borderPicker\"\n                              class=\"cursor-pointer border border-border rounded\"></button>\n                      <ng-template #borderPicker>\n                        <ngs-color-picker [ngModel]=\"selectedLayer()?.['borderColor'] || selectedLayer()?.['fill'] || '#000000'\"\n                                          (ngModelChange)=\"updateAdjustment('borderColor', $event)\"/>\n                      </ng-template>\n                    }\n                    <ngs-slider class=\"flex-1\"\n                                [min]=\"adj.min\"\n                                [max]=\"adj.max\"\n                                [step]=\"adj.step\">\n                      <input ngsSliderThumb\n                             [value]=\"selectedLayer()?.[adj.id] ?? adj.default\"\n                             (valueChange)=\"updateAdjustment(adj.id, $event)\">\n                    </ngs-slider>\n                    <input ngsInput\n                           type=\"number\"\n                           class=\"w-16 h-8 text-center text-sm border border-border rounded-md bg-surface-container\"\n                           [ngModel]=\"selectedLayer()?.[adj.id] ?? adj.default\"\n                           (ngModelChange)=\"updateAdjustment(adj.id, $event)\">\n                  </div>\n                }\n              </div>\n            }\n          </div>\n        }\n      </div>\n    </div>\n  </ngs-panel-content>\n</ngs-panel>\n", styles: [":host{display:block;height:100%}:host .scrollbar-hide{-ms-overflow-style:none;scrollbar-width:none}:host .scrollbar-hide::-webkit-scrollbar{display:none}:host ngs-slider{--ngs-slider-track-height: 4px;--ngs-slider-thumb-size: 16px}:host input[type=number]::-webkit-inner-spin-button,:host input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.ngs-color-picker-thumbnail{width:32px;height:32px;min-width:32px;background:var(--ngs-color-picker-thumbnail-bg, #000)}\n"] }]
+        }] });
+
+class ImageDesigner {
+    http = inject(HttpClient);
+    destroyRef = inject(DestroyRef);
+    designerService = inject(ImageDesignerService);
+    isBrowser = isPlatformBrowser(inject(PLATFORM_ID));
+    canvasContainer = viewChild('canvasContainer', ...(ngDevMode ? [{ debugName: "canvasContainer" }] : /* istanbul ignore next */ []));
+    title = input('', ...(ngDevMode ? [{ debugName: "title" }] : /* istanbul ignore next */ []));
+    imageSize = input({
+        width: 700,
+        height: 400
+    }, ...(ngDevMode ? [{ debugName: "imageSize" }] : /* istanbul ignore next */ []));
+    defaultFont = input('Inter', ...(ngDevMode ? [{ debugName: "defaultFont" }] : /* istanbul ignore next */ []));
+    scale = input(1, ...(ngDevMode ? [{ debugName: "scale" }] : /* istanbul ignore next */ []));
+    minScale = input(0.1, ...(ngDevMode ? [{ debugName: "minScale" }] : /* istanbul ignore next */ []));
+    maxScale = input(3, ...(ngDevMode ? [{ debugName: "maxScale" }] : /* istanbul ignore next */ []));
+    showGuidelines = input(true, ...(ngDevMode ? [{ debugName: "showGuidelines" }] : /* istanbul ignore next */ []));
+    snapToShapes = input(true, ...(ngDevMode ? [{ debugName: "snapToShapes" }] : /* istanbul ignore next */ []));
+    snapToStageCenter = input(true, ...(ngDevMode ? [{ debugName: "snapToStageCenter" }] : /* istanbul ignore next */ []));
+    snapToStageBorders = input(true, ...(ngDevMode ? [{ debugName: "snapToStageBorders" }] : /* istanbul ignore next */ []));
+    guidelineColor = input('blue', ...(ngDevMode ? [{ debugName: "guidelineColor" }] : /* istanbul ignore next */ []));
+    snapRange = input(5, ...(ngDevMode ? [{ debugName: "snapRange" }] : /* istanbul ignore next */ []));
+    showDownloadButton = input(true, { ...(ngDevMode ? { debugName: "showDownloadButton" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    uploadFn = input(...(ngDevMode ? [undefined, { debugName: "uploadFn" }] : /* istanbul ignore next */ []));
+    snapshot = input(...(ngDevMode ? [undefined, { debugName: "snapshot" }] : /* istanbul ignore next */ []));
+    snapshotChanged = output();
+    photosDataSource = input(...(ngDevMode ? [undefined, { debugName: "photosDataSource" }] : /* istanbul ignore next */ []));
+    assetsDataSource = input(...(ngDevMode ? [undefined, { debugName: "assetsDataSource" }] : /* istanbul ignore next */ []));
+    historyLimit = input(50, { ...(ngDevMode ? { debugName: "historyLimit" } : /* istanbul ignore next */ {}), transform: numberAttribute });
+    activeItemId = signal('text', ...(ngDevMode ? [{ debugName: "activeItemId" }] : /* istanbul ignore next */ []));
+    elements = signal(SVG_ELEMENTS, ...(ngDevMode ? [{ debugName: "elements" }] : /* istanbul ignore next */ []));
+    photos = signal([], ...(ngDevMode ? [{ debugName: "photos" }] : /* istanbul ignore next */ []));
+    assets = signal([], ...(ngDevMode ? [{ debugName: "assets" }] : /* istanbul ignore next */ []));
+    photosFilter = signal('', ...(ngDevMode ? [{ debugName: "photosFilter" }] : /* istanbul ignore next */ []));
+    assetsFilter = signal('', ...(ngDevMode ? [{ debugName: "assetsFilter" }] : /* istanbul ignore next */ []));
+    uploadedImages = signal([], ...(ngDevMode ? [{ debugName: "uploadedImages" }] : /* istanbul ignore next */ []));
+    isUploading = signal(false, ...(ngDevMode ? [{ debugName: "isUploading" }] : /* istanbul ignore next */ []));
+    uploadPreview = signal(null, ...(ngDevMode ? [{ debugName: "uploadPreview" }] : /* istanbul ignore next */ []));
+    photosPage = signal(1, ...(ngDevMode ? [{ debugName: "photosPage" }] : /* istanbul ignore next */ []));
+    assetsPage = signal(1, ...(ngDevMode ? [{ debugName: "assetsPage" }] : /* istanbul ignore next */ []));
+    isLoadingPhotos = signal(false, ...(ngDevMode ? [{ debugName: "isLoadingPhotos" }] : /* istanbul ignore next */ []));
+    isLoadingAssets = signal(false, ...(ngDevMode ? [{ debugName: "isLoadingAssets" }] : /* istanbul ignore next */ []));
+    hasMoreAssets = signal(true, ...(ngDevMode ? [{ debugName: "hasMoreAssets" }] : /* istanbul ignore next */ []));
+    hasMorePhotos = signal(true, ...(ngDevMode ? [{ debugName: "hasMorePhotos" }] : /* istanbul ignore next */ []));
+    resizeWidth = signal(0, ...(ngDevMode ? [{ debugName: "resizeWidth" }] : /* istanbul ignore next */ []));
+    resizeHeight = signal(0, ...(ngDevMode ? [{ debugName: "resizeHeight" }] : /* istanbul ignore next */ []));
+    resizeUnit = signal('px', ...(ngDevMode ? [{ debugName: "resizeUnit" }] : /* istanbul ignore next */ []));
+    presetCategories = signal(PRESET_CATEGORIES, ...(ngDevMode ? [{ debugName: "presetCategories" }] : /* istanbul ignore next */ []));
+    presetColors = signal([
+        // Basic & Neutral
+        '#000000', '#7a7a7a', '#ffffff',
+        // Reds & Pinks
+        '#f44336', '#d32f2f', '#ff5252',
+        '#e91e63', '#c2185b', '#ff4081',
+        // Purples & Deep Purples
+        '#9c27b0', '#7b1fa2', '#e040fb',
+        '#673ab7', '#512da8', '#7c4dff',
+        // Blues
+        '#3f51b5', '#303f9f', '#536dfe',
+        '#2196f3', '#1976d2', '#448aff',
+        '#03a9f4', '#0288d1', '#40c4ff',
+        // Teals & Cyans
+        '#00bcd4', '#0097a7', '#18ffff',
+        '#009688', '#00796b', '#64ffda',
+        // Greens
+        '#4caf50', '#388e3c', '#00c853',
+        '#8bc34a', '#689f38', '#b2ff59',
+        '#cddc39', '#afb42b', '#eeff41',
+        // Yellows & Oranges
+        '#ffeb3b', '#fbc02d', '#ffff00',
+        '#ffc107', '#ffa000', '#ffc400',
+        '#ff9800', '#f57c00', '#ff9100',
+        '#ff5722', '#e64a19', '#ff3d00',
+        // Browns
+        '#795548', '#5d4037', '#8d6e63',
+        // Blue Grays & Grays
+        '#607d8b', '#455a64', '#78909c',
+    ], ...(ngDevMode ? [{ debugName: "presetColors" }] : /* istanbul ignore next */ []));
+    background = signal([], ...(ngDevMode ? [{ debugName: "background" }] : /* istanbul ignore next */ []));
+    resize = signal([], ...(ngDevMode ? [{ debugName: "resize" }] : /* istanbul ignore next */ []));
+    displayScale = this.designerService.scale;
+    zoomPercentage = computed(() => (this.displayScale() * 100).toFixed(0), ...(ngDevMode ? [{ debugName: "zoomPercentage" }] : /* istanbul ignore next */ []));
+    layersFromService = this.designerService.layers;
+    selectedLayerId = this.designerService.selectedLayerId;
+    presetPatterns = signal([
+        ...SVG_PATTERNS.map(svg => `data:image/svg+xml;base64,${btoa(svg)}`),
+    ], ...(ngDevMode ? [{ debugName: "presetPatterns" }] : /* istanbul ignore next */ []));
+    presetGradients = computed(() => {
+        const width = this.resizeWidth();
+        const height = this.resizeHeight();
+        const isLandscape = width >= height;
+        const baseColors = [
+            // --- VIBRANT & ENERGETIC ---
+            ['#ff9a9e', '#fecfef'], ['#f093fb', '#f5576c'], ['#4facfe', '#00f2fe'],
+            ['#43e97b', '#38f8d4'], ['#fa709a', '#fee140'], ['#30cfd0', '#330867'],
+            ['#ff0844', '#ffb199'], ['#ff8177', '#ff867a'], ['#f83600', '#f9d423'],
+            ['#b721ff', '#21d4fd'], ['#00dbde', '#fc00ff'], ['#8ec5fc', '#e0c3fc'],
+            ['#6a11cb', '#2575fc'], ['#09203f', '#537895'], ['#00c6fb', '#005bea'],
+            ['#ffecd2', '#fcb69f'], ['#ff758c', '#ff7eb3'], ['#868f96', '#596164'],
+            ['#0ba360', '#3cba92'], ['#13547a', '#80d0c7'], ['#6a85b6', '#bac8e0'],
+            ['#434343', '#000000'], ['#92fe9d', '#00c9ff'], ['#f40076', '#df98fa'],
+            ['#f067b4', '#81ffef'], ['#ff4b1f', '#ff9068'], ['#16a085', '#f4d03f'],
+            ['#00d2ff', '#3a7bd5'], ['#f7971e', '#ffd200'], ['#f12711', '#f5af19'],
+            ['#12c2e9', '#c471ed'], ['#f64f59', '#12c2e9'], ['#74ebd5', '#acb6e5'],
+            ['#ff9966', '#ff5e62'], ['#00b09b', '#96c93d'], ['#654ea3', '#eaafc8'],
+            ['#4e54c8', '#8f94fb'], ['#ff0099', '#493240'], ['#8e2de2', '#4a00e0'],
+            ['#3a1c71', '#d76d77'], ['#1f4037', '#99f2c8'], ['#56ab2f', '#a8e063'],
+            ['#f11712', '#0099f7'], ['#11998e', '#38ef7d'], ['#fc466b', '#3f5efb'],
+            ['#c94b4b', '#4b134f'], ['#00b4db', '#0083b0'], ['#7b4397', '#dc2430'],
+            ['#1e3c72', '#2a5298'], ['#2c3e50', '#fd746c'], ['#f00000', '#dc281e'],
+            ['#ff512f', '#dd2476'], ['#ff5f6d', '#ffc371'], ['#114357', '#f29492'],
+            ['#40e0d0', '#ff8c00'], ['#ff0080', '#ff8c00'], ['#000046', '#1cb5e0'],
+            ['#642b73', '#c6426e'], ['#cb2d3e', '#ef473a'], ['#5614b0', '#dbd65d'],
+            ['#00c3ff', '#ffff1c'], ['#1d2b64', '#f8cdda'], ['#1a2a6c', '#b21f1f'],
+            ['#cc2b5e', '#753a88'], ['#2193b0', '#6dd5ed'], ['#ee9ca7', '#ffdde1'],
+            ['#e65100', '#fdb813'], ['#360033', '#0b8793'], ['#141e30', '#243b55'],
+            ['#2c3e50', '#4ca1af'], ['#ff512f', '#f06292'], ['#70e1f5', '#ffd194'],
+            ['#1c92d2', '#f2fcfe'], ['#3ca55c', '#b5ac49'], ['#4b6cb7', '#182848'],
+            ['#00bf8f', '#001510'], ['#517fa4', '#243949'], ['#1e130c', '#9a8478'],
+            ['#000000', '#533440'], ['#304352', '#d7d2cc'], ['#83a4d4', '#b6fbff'],
+            ['#4568dc', '#b06ab3'], ['#ef3b36', '#ffffff'], ['#000000', '#434343'],
+            ['#0f2027', '#203a43'], ['#373b44', '#4286f4'], ['#8e9eab', '#eef2f3']
+        ];
+        return baseColors.map(([c1, c2]) => ({
+            x0: 0,
+            y0: 0,
+            x1: isLandscape ? width : 0,
+            y1: isLandscape ? 0 : height,
+            colorStops: [0, c1, 1, c2],
+            css: `linear-gradient(${isLandscape ? '90deg' : '180deg'}, ${c1}, ${c2})`
+        }));
+    }, ...(ngDevMode ? [{ debugName: "presetGradients" }] : /* istanbul ignore next */ []));
+    settingsPortal = signal(null, ...(ngDevMode ? [{ debugName: "settingsPortal" }] : /* istanbul ignore next */ []));
+    effectsPortal = signal(null, ...(ngDevMode ? [{ debugName: "effectsPortal" }] : /* istanbul ignore next */ []));
+    openEffects() {
+        this.effectsPortal.set(new ComponentPortal(Effects));
+    }
+    constructor() {
+        this.resizeWidth.set(this.imageSize().width);
+        this.resizeHeight.set(this.imageSize().height);
+        effect(() => {
+            const size = this.imageSize();
+            untracked(() => {
+                this.resizeWidth.set(size.width);
+                this.resizeHeight.set(size.height);
+            });
+        });
+        this.designerService.change$.pipe(takeUntilDestroyed(this.destroyRef)).subscribe(() => {
+            this.snapshotChanged.emit(this.designerService.getSnapshot());
+        });
+        effect(() => {
+            this.designerService.setScale(this.scale());
+        });
+        effect(() => {
+            this.designerService.setMinMaxScale(this.minScale(), this.maxScale());
+        });
+        effect(() => {
+            this.designerService.updateSnapSettings({
+                showGuidelines: this.showGuidelines(),
+                snapToShapes: this.snapToShapes(),
+                snapToStageCenter: this.snapToStageCenter(),
+                snapToStageBorders: this.snapToStageBorders(),
+                guidelineColor: this.guidelineColor(),
+                snapRange: this.snapRange()
+            });
+        });
+        effect(() => {
+            const selectedId = this.selectedLayerId();
+            if (selectedId) {
+                this.settingsPortal.set(new ComponentPortal(Settings));
+            }
+            else {
+                this.settingsPortal.set(null);
+                this.effectsPortal.set(null);
+            }
+        });
+        effect(() => {
+            if (this.activeItemId() === 'photos' && this.photos().length === 0 && !this.isLoadingPhotos() && this.hasMorePhotos()) {
+                this.loadPhotos();
+            }
+        });
+        effect(() => {
+            if ((this.activeItemId() === 'assets' || this.activeItemId() === 'upload') && this.assets().length === 0 && !this.isLoadingAssets() && this.hasMoreAssets()) {
+                this.loadAssets();
+            }
+        });
+        effect(() => {
+            this.photosFilter();
+            untracked(() => {
+                if (this.activeItemId() === 'photos') {
+                    this.photos.set([]);
+                    this.photosPage.set(1);
+                    this.hasMorePhotos.set(true);
+                    this.loadPhotos();
+                }
+            });
+        });
+        effect(() => {
+            this.assetsFilter();
+            untracked(() => {
+                if (this.activeItemId() === 'assets' || this.activeItemId() === 'upload') {
+                    this.assets.set([]);
+                    this.assetsPage.set(1);
+                    this.hasMoreAssets.set(true);
+                    this.loadAssets();
+                }
+            });
+        });
+        effect(() => {
+            const snapshot = this.snapshot();
+            if (snapshot && this.designerService.isInitialized()) {
+                const nextVersion = snapshot.version ?? 0;
+                const currentVersion = this.designerService.currentSnapshotVersion;
+                if (nextVersion !== currentVersion) {
+                    console.log(`Snapshot version: ${nextVersion}, Designer version: ${currentVersion}`);
+                    console.log(`Snapshot version changed, loading new snapshot`);
+                    this.designerService.loadSnapshot(snapshot, true);
+                }
+            }
+        });
+    }
+    ngOnInit() {
+        this.designerService.historyLimit = this.historyLimit();
+        if (this.assets().length > 0) {
+            this.uploadedImages.set([...this.assets()]);
+        }
+    }
+    onFileSelected(event) {
+        if (event.files.length > 0) {
+            const file = event.files[0];
+            const uploadFn = this.uploadFn();
+            if (uploadFn) {
+                const result = uploadFn(file);
+                this.isUploading.set(true);
+                const handleSuccess = async (result) => {
+                    let photo;
+                    if (typeof result === 'string') {
+                        const dimensions = await this.getImageDimensions(result);
+                        photo = {
+                            id: Math.random().toString(36).substring(7),
+                            url: result,
+                            width: dimensions.width,
+                            height: dimensions.height
+                        };
+                    }
+                    else {
+                        photo = result;
+                    }
+                    this.uploadedImages.update(images => [photo, ...images]);
+                    this.isUploading.set(false);
+                };
+                const handleError = () => {
+                    this.isUploading.set(false);
+                };
+                if (isObservable(result)) {
+                    result.pipe(takeUntilDestroyed(this.destroyRef)).subscribe({
+                        next: handleSuccess,
+                        error: handleError
+                    });
+                }
+                else if (result instanceof Promise) {
+                    result.then(handleSuccess).catch(handleError);
+                }
+                else {
+                    handleSuccess(result);
+                }
+            }
+            else {
+                this.fakeUpload(file);
+            }
+        }
+    }
+    fakeUpload(file) {
+        const reader = new FileReader();
+        reader.onload = async (e) => {
+            const url = e.target.result;
+            const dimensions = await this.getImageDimensions(url);
+            const photo = {
+                id: Math.random().toString(36).substring(7),
+                name: file.name,
+                url: url,
+                width: dimensions.width,
+                height: dimensions.height
+            };
+            this.uploadedImages.update(images => [photo, ...images]);
+        };
+        reader.readAsDataURL(file);
+    }
+    getImageDimensions(url) {
+        return new Promise(resolve => {
+            const img = new Image();
+            img.crossOrigin = 'anonymous';
+            img.onload = () => {
+                resolve({ width: img.width, height: img.height });
+            };
+            img.onerror = () => {
+                resolve({ width: 0, height: 0 });
+            };
+            img.src = url;
+        });
+    }
+    async addUploadedImage(photo, x = 0, y = 0) {
+        const canvasWidth = this.resizeWidth();
+        const canvasHeight = this.resizeHeight();
+        const url = photo.url;
+        let width = canvasWidth;
+        let height = canvasWidth * (photo.height / photo.width);
+        if (height > canvasHeight) {
+            height = canvasHeight;
+            width = height * (photo.width / photo.height);
+        }
+        const id = await this.designerService.addLayer({
+            type: 'image',
+            src: url,
+            name: 'Uploaded Image',
+            width,
+            height,
+            x,
+            y
+        });
+        if (id) {
+            this.selectLayer(id);
+        }
+    }
+    loadAssets() {
+        const dataSource = this.assetsDataSource();
+        if (!dataSource || this.isLoadingAssets() || !this.hasMoreAssets()) {
+            return;
+        }
+        this.isLoadingAssets.set(true);
+        const pageSize = 30;
+        const page = this.assetsPage();
+        const startRow = (page - 1) * pageSize;
+        const endRow = page * pageSize;
+        dataSource.getItems({
+            startRow,
+            endRow,
+            page,
+            pageSize,
+            filterModel: this.assetsFilter(),
+            successCallback: (data, lastRow) => {
+                this.assets.update(assets => [...assets, ...data]);
+                if (data.length === 0) {
+                    this.hasMoreAssets.set(false);
+                }
+                this.isLoadingAssets.set(false);
+            },
+            failCallback: () => {
+                this.isLoadingAssets.set(false);
+            }
+        });
+    }
+    onAssetsScroll(event) {
+        const element = event.target;
+        if (element.scrollHeight - element.scrollTop <= element.clientHeight + 50) {
+            if (!this.isLoadingAssets() && this.hasMoreAssets()) {
+                this.assetsPage.update(p => p + 1);
+                this.loadAssets();
+            }
+        }
+    }
+    loadPhotos() {
+        if (this.isLoadingPhotos() || !this.hasMorePhotos())
+            return;
+        this.isLoadingPhotos.set(true);
+        const ds = this.photosDataSource() || this.defaultPhotosDataSource;
+        const page = this.photosPage();
+        const pageSize = 30;
+        ds.getItems({
+            startRow: (page - 1) * pageSize,
+            endRow: page * pageSize,
+            page: page,
+            pageSize: pageSize,
+            filterModel: this.photosFilter(),
+            successCallback: (data, lastRow) => {
+                this.photos.update(photos => [...photos, ...data]);
+                if (data.length === 0) {
+                    this.hasMorePhotos.set(false);
+                }
+                this.isLoadingPhotos.set(false);
+            },
+            failCallback: () => {
+                this.isLoadingPhotos.set(false);
+            }
+        });
+    }
+    defaultPhotosDataSource = createDefaultPhotosDataSource(this.http);
+    onPhotosScroll(event) {
+        const target = event.target;
+        if (target && target.scrollHeight - target.scrollTop <= target.clientHeight + 100) {
+            if (!this.isLoadingPhotos() && this.hasMorePhotos()) {
+                this.photosPage.update(p => p + 1);
+                this.loadPhotos();
+            }
+        }
+    }
+    async addImage(photo, x = 0, y = 0) {
+        const canvasWidth = this.resizeWidth();
+        const canvasHeight = this.resizeHeight();
+        let width = canvasWidth;
+        let height = canvasWidth * (photo.height / photo.width);
+        if (height > canvasHeight) {
+            height = canvasHeight;
+            width = height * (photo.width / photo.height);
+        }
+        const id = await this.designerService.addLayer({
+            type: 'image',
+            src: photo.url,
+            name: photo.name,
+            width,
+            height,
+            x,
+            y
+        });
+        if (id) {
+            this.selectLayer(id);
+        }
+    }
+    ngAfterViewInit() {
+        if (!this.isBrowser) {
+            return;
+        }
+        const container = this.canvasContainer()?.nativeElement;
+        if (container) {
+            console.log('Initializing ImageDesignerService in requestAnimationFrame');
+            requestAnimationFrame(() => {
+                if (!this.canvasContainer()) {
+                    console.warn('Canvas container disappeared before initialization');
+                    return;
+                }
+                const currentContainer = this.canvasContainer().nativeElement;
+                // Final check before init, if dimensions are 0, wait a bit more
+                if (currentContainer.offsetWidth === 0 || currentContainer.offsetHeight === 0) {
+                    console.warn('Container dimensions are still 0, retrying init');
+                    setTimeout(() => this.ngAfterViewInit(), 250);
+                    return;
+                }
+                console.log('Initializing ImageDesignerService with container:', currentContainer);
+                console.log('Container dimensions in rAF:', currentContainer.offsetWidth, 'x', currentContainer.offsetHeight);
+                this.designerService.init(currentContainer, this.imageSize(), this.defaultFont(), this.scale(), this.minScale(), this.maxScale()).then(() => {
+                    console.log('ImageDesignerService initialization completed');
+                });
+            });
+        }
+        else {
+            console.warn('Canvas container not found during ngAfterViewInit');
+        }
+    }
+    ngOnDestroy() {
+        this.designerService.destroy();
+    }
+    toggleAside() {
+        this.activeItemId.set(this.activeItemId() ? null : 'text');
+    }
+    zoomIn() {
+        this.designerService.zoomIn();
+    }
+    zoomOut() {
+        this.designerService.zoomOut();
+    }
+    undo() {
+        this.designerService.undo();
+    }
+    redo() {
+        this.designerService.redo();
+    }
+    resetZoom() {
+        this.designerService.setScale(1);
+    }
+    onWheel(event) {
+        if (event.metaKey || event.ctrlKey) {
+            // preventDefault is not allowed during event replay (e.g. during hydration).
+            // EventPhase.REPLAY is 101 in Angular.
+            if (event.eventPhase !== 101) {
+                event.preventDefault();
+            }
+            if (event.deltaY < 0) {
+                this.zoomIn();
+            }
+            else {
+                this.zoomOut();
+            }
+        }
+    }
+    onKeyDown(event) {
+        const activeElement = document.activeElement;
+        const isInput = activeElement instanceof HTMLInputElement ||
+            activeElement instanceof HTMLTextAreaElement ||
+            (activeElement instanceof HTMLElement && activeElement.isContentEditable);
+        if (isInput) {
+            return;
+        }
+        if (event.key === 'ArrowLeft' || event.key === 'ArrowRight' || event.key === 'ArrowUp' || event.key === 'ArrowDown') {
+            event.preventDefault();
+            const step = event.shiftKey ? 10 : 1;
+            if (event.key === 'ArrowLeft') {
+                this.designerService.moveSelectedLayers(-step, 0);
+            }
+            else if (event.key === 'ArrowRight') {
+                this.designerService.moveSelectedLayers(step, 0);
+            }
+            else if (event.key === 'ArrowUp') {
+                this.designerService.moveSelectedLayers(0, -step);
+            }
+            else if (event.key === 'ArrowDown') {
+                this.designerService.moveSelectedLayers(0, step);
+            }
+        }
+        if (event.key === 'Delete' || event.key === 'Backspace') {
+            this.designerService.deleteSelectedLayers();
+        }
+        if ((event.ctrlKey || event.metaKey) && event.key.toLowerCase() === 'z') {
+            event.preventDefault();
+            if (event.shiftKey) {
+                this.redo();
+            }
+            else {
+                this.undo();
+            }
+        }
+        if ((event.ctrlKey || event.metaKey) && event.key.toLowerCase() === 'y') {
+            event.preventDefault();
+            this.redo();
+        }
+    }
+    selectLayer(id) {
+        this.designerService.selectLayer(id);
+    }
+    toggleLayerVisibility(id, event) {
+        event.stopPropagation();
+        this.designerService.toggleLayerVisibility(id);
+    }
+    toggleLayerLock(id, event) {
+        event.stopPropagation();
+        this.designerService.toggleLayerLock(id);
+    }
+    deleteLayer(id, event) {
+        event.stopPropagation();
+        this.designerService.deleteLayer(id);
+    }
+    onDragOver(event) {
+        if (event.dataTransfer?.types.includes('application/x-ngs-text-type') ||
+            event.dataTransfer?.types.includes('application/x-ngs-image-data')) {
+            event.preventDefault();
+            event.dataTransfer.dropEffect = 'copy';
+        }
+    }
+    onTextDragStart(event, type) {
+        event.dataTransfer?.setData('application/x-ngs-text-type', type);
+        if (event.target instanceof HTMLElement) {
+            const el = event.target;
+            el.classList.add('is-dragging');
+            setTimeout(() => el.classList.remove('is-dragging'), 0);
+        }
+    }
+    onImageDragStart(event, photo) {
+        const data = 'url' in photo
+            ? { url: photo.url, name: photo.name, width: photo.width, height: photo.height, type: 'image' }
+            : { url: photo.data, name: photo.name, width: 100, height: 100, type: 'shape' };
+        event.dataTransfer?.setData('application/x-ngs-image-data', JSON.stringify(data));
+        if (event.target instanceof HTMLElement) {
+            const el = event.target;
+            el.classList.add('is-dragging');
+            setTimeout(() => el.classList.remove('is-dragging'), 0);
+        }
+    }
+    onDrop(event) {
+        const textType = event.dataTransfer?.getData('application/x-ngs-text-type');
+        const imageDataStr = event.dataTransfer?.getData('application/x-ngs-image-data');
+        if (!textType && !imageDataStr)
+            return;
+        event.preventDefault();
+        const container = this.canvasContainer()?.nativeElement;
+        if (!container)
+            return;
+        const rect = container.getBoundingClientRect();
+        const scale = this.designerService.scale();
+        // Calculate position relative to the stage center
+        const canvasRect = this.designerService['canvasRect'];
+        if (!canvasRect)
+            return;
+        const centerX = canvasRect.x();
+        const centerY = canvasRect.y();
+        const x = (event.clientX - rect.left - centerX) / scale;
+        const y = (event.clientY - rect.top - centerY) / scale;
+        if (textType) {
+            switch (textType) {
+                case 'header':
+                    this.addHeader(x, y);
+                    break;
+                case 'subheader':
+                    this.addSubheader(x, y);
+                    break;
+                case 'body':
+                    this.addBodyText(x, y);
+                    break;
+            }
+        }
+        else if (imageDataStr) {
+            try {
+                const data = JSON.parse(imageDataStr);
+                if (data.type === 'image') {
+                    this.addImage({
+                        url: data.url,
+                        name: data.name,
+                        width: data.width,
+                        height: data.height,
+                        id: ''
+                    }, x, y);
+                }
+                else if (data.type === 'shape') {
+                    this.addShape({
+                        name: data.name,
+                        data: data.url
+                    }, x, y);
+                }
+            }
+            catch (e) {
+                console.error('Failed to parse image data', e);
+            }
+        }
+    }
+    drop(event) {
+        if (event.previousIndex !== event.currentIndex) {
+            this.designerService.reorderLayers(event.previousIndex, event.currentIndex);
+        }
+    }
+    download() {
+        this.designerService.downloadImage();
+    }
+    getBase64Image() {
+        return this.designerService.getBase64Image();
+    }
+    getLayerIcon(type) {
+        const iconMap = {
+            'text': 'fluent:text-field-24-regular',
+            'image': 'fluent:image-24-regular',
+            'pattern': 'fluent:grid-dots-24-regular',
+        };
+        return iconMap[type || ''] || 'fluent:shape-subtract-24-regular';
+    }
+    selectedFontSize = signal(24, ...(ngDevMode ? [{ debugName: "selectedFontSize" }] : /* istanbul ignore next */ []));
+    selectedFontWeight = signal(400, ...(ngDevMode ? [{ debugName: "selectedFontWeight" }] : /* istanbul ignore next */ []));
+    async addHeader(x = 0, y = 0) {
+        const id = await this.designerService.addLayer({
+            type: 'text',
+            text: 'Add a heading',
+            fontSize: 40,
+            fontWeight: 'bold',
+            fontFamily: 'Inter',
+            name: 'Heading',
+            align: 'center',
+            x,
+            y
+        });
+        if (id) {
+            this.selectLayer(id);
+        }
+    }
+    async addSubheader(x = 0, y = 0) {
+        const id = await this.designerService.addLayer({
+            type: 'text',
+            text: 'Add a subheading',
+            fontSize: 24,
+            fontWeight: '600',
+            fontFamily: 'Inter',
+            name: 'Subheading',
+            align: 'center',
+            x,
+            y
+        });
+        if (id) {
+            this.selectLayer(id);
+        }
+    }
+    async addBodyText(x = 0, y = 0) {
+        const id = await this.designerService.addLayer({
+            type: 'text',
+            text: 'Add body text',
+            fontSize: 16,
+            fontFamily: 'Inter',
+            name: 'Body text',
+            align: 'center',
+            x,
+            y
+        });
+        if (id) {
+            this.selectLayer(id);
+        }
+    }
+    async addShape(shape, x = 0, y = 0) {
+        const id = await this.designerService.addLayer({
+            type: 'shape',
+            name: shape.name,
+            data: shape.data,
+            width: 100,
+            height: 100,
+            fill: '#64748b',
+            x,
+            y
+        });
+        if (id) {
+            this.selectLayer(id);
+        }
+    }
+    setGradient(gradient) {
+        this.designerService.setCanvasBackground({
+            x0: gradient.x0,
+            y0: gradient.y0,
+            x1: gradient.x1,
+            y1: gradient.y1,
+            colorStops: gradient.colorStops
+        });
+    }
+    setColor(color) {
+        this.designerService.setCanvasBackground(color);
+    }
+    async addPattern(url) {
+        const id = await this.designerService.addLayer({
+            type: 'pattern',
+            name: 'Pattern',
+            patternImage: url,
+            width: this.resizeWidth(),
+            height: this.resizeHeight(),
+            x: 0,
+            y: 0
+        });
+        if (id) {
+            this.selectLayer(id);
+        }
+    }
+    applyResize() {
+        this.designerService.updateSize(this.canvasContainer().nativeElement, {
+            width: this.resizeWidth(),
+            height: this.resizeHeight()
+        }, true, true);
+    }
+    selectPreset(preset) {
+        this.resizeWidth.set(preset.width);
+        this.resizeHeight.set(preset.height);
+        this.applyResize();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: ImageDesigner, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", type: ImageDesigner, isStandalone: true, selector: "ngs-image-designer", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, imageSize: { classPropertyName: "imageSize", publicName: "imageSize", isSignal: true, isRequired: false, transformFunction: null }, defaultFont: { classPropertyName: "defaultFont", publicName: "defaultFont", isSignal: true, isRequired: false, transformFunction: null }, scale: { classPropertyName: "scale", publicName: "scale", isSignal: true, isRequired: false, transformFunction: null }, minScale: { classPropertyName: "minScale", publicName: "minScale", isSignal: true, isRequired: false, transformFunction: null }, maxScale: { classPropertyName: "maxScale", publicName: "maxScale", isSignal: true, isRequired: false, transformFunction: null }, showGuidelines: { classPropertyName: "showGuidelines", publicName: "showGuidelines", isSignal: true, isRequired: false, transformFunction: null }, snapToShapes: { classPropertyName: "snapToShapes", publicName: "snapToShapes", isSignal: true, isRequired: false, transformFunction: null }, snapToStageCenter: { classPropertyName: "snapToStageCenter", publicName: "snapToStageCenter", isSignal: true, isRequired: false, transformFunction: null }, snapToStageBorders: { classPropertyName: "snapToStageBorders", publicName: "snapToStageBorders", isSignal: true, isRequired: false, transformFunction: null }, guidelineColor: { classPropertyName: "guidelineColor", publicName: "guidelineColor", isSignal: true, isRequired: false, transformFunction: null }, snapRange: { classPropertyName: "snapRange", publicName: "snapRange", isSignal: true, isRequired: false, transformFunction: null }, showDownloadButton: { classPropertyName: "showDownloadButton", publicName: "showDownloadButton", isSignal: true, isRequired: false, transformFunction: null }, uploadFn: { classPropertyName: "uploadFn", publicName: "uploadFn", isSignal: true, isRequired: false, transformFunction: null }, snapshot: { classPropertyName: "snapshot", publicName: "snapshot", isSignal: true, isRequired: false, transformFunction: null }, photosDataSource: { classPropertyName: "photosDataSource", publicName: "photosDataSource", isSignal: true, isRequired: false, transformFunction: null }, assetsDataSource: { classPropertyName: "assetsDataSource", publicName: "assetsDataSource", isSignal: true, isRequired: false, transformFunction: null }, historyLimit: { classPropertyName: "historyLimit", publicName: "historyLimit", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { snapshotChanged: "snapshotChanged" }, host: { listeners: { "keydown": "onKeyDown($event)" }, classAttribute: "ngs-image-designer" }, providers: [
+            ImageDesignerService,
+            {
+                provide: IMAGE_DESIGNER,
+                useExisting: forwardRef(() => ImageDesigner)
+            }
+        ], viewQueries: [{ propertyName: "canvasContainer", first: true, predicate: ["canvasContainer"], descendants: true, isSignal: true }], exportAs: ["ngsImageDesigner"], ngImport: i0, template: "<ngs-panel class=\"h-full\">\n  <ngs-panel-sidebar class=\"border-r border-border h-full\">\n    <ngs-tab-panel hideContentIfTabNotSelected [activeItemId]=\"activeItemId()\" class=\"h-full\">\n      <ngs-tab-panel-content>\n        <ngs-tab-panel-nav>\n          <ngs-tab-panel-item for=\"text\" (click)=\"activeItemId.set('text')\">\n            <ngs-icon name=\"fluent:text-field-24-regular\" ngsTabPanelItemIcon/>\n            <ngs-tab-panel-item-text>Text</ngs-tab-panel-item-text>\n          </ngs-tab-panel-item>\n          <ngs-tab-panel-item for=\"photos\" (click)=\"activeItemId.set('photos')\">\n            <ngs-icon name=\"fluent:image-copy-24-regular\" ngsTabPanelItemIcon/>\n            <ngs-tab-panel-item-text>Photos</ngs-tab-panel-item-text>\n          </ngs-tab-panel-item>\n          <ngs-tab-panel-item for=\"elements\" (click)=\"activeItemId.set('elements')\">\n            <ngs-icon name=\"fluent:shape-subtract-24-regular\" ngsTabPanelItemIcon/>\n            <ngs-tab-panel-item-text>Elements</ngs-tab-panel-item-text>\n          </ngs-tab-panel-item>\n          <ngs-tab-panel-item for=\"upload\" (click)=\"activeItemId.set('upload')\">\n            <ngs-icon name=\"fluent:arrow-upload-24-regular\" ngsTabPanelItemIcon/>\n            <ngs-tab-panel-item-text>Upload</ngs-tab-panel-item-text>\n          </ngs-tab-panel-item>\n          <ngs-tab-panel-item for=\"background\" (click)=\"activeItemId.set('background')\">\n            <ngs-icon name=\"fluent:grid-dots-24-regular\" ngsTabPanelItemIcon/>\n            <ngs-tab-panel-item-text>Background</ngs-tab-panel-item-text>\n          </ngs-tab-panel-item>\n          <ngs-tab-panel-item for=\"layers\" (click)=\"activeItemId.set('layers')\">\n            <ngs-icon name=\"fluent:layer-24-regular\" ngsTabPanelItemIcon/>\n            <ngs-tab-panel-item-text>Layers</ngs-tab-panel-item-text>\n          </ngs-tab-panel-item>\n          <ngs-tab-panel-item for=\"resize\" (click)=\"activeItemId.set('resize')\">\n            <ngs-icon name=\"fluent:resize-24-regular\" ngsTabPanelItemIcon/>\n            <ngs-tab-panel-item-text>Resize</ngs-tab-panel-item-text>\n          </ngs-tab-panel-item>\n        </ngs-tab-panel-nav>\n      </ngs-tab-panel-content>\n      <ngs-tab-panel-aside class=\"border-s border-border\">\n        <ng-template ngsTabPanelAsideContent=\"text\">\n          <ngs-panel>\n            <ngs-panel-header class=\"border-b border-b-border flex items-center px-4\">Text</ngs-panel-header>\n            <ngs-panel-content class=\"p-4 flex flex-col gap-4\">\n              <div class=\"grid grid-cols-1 gap-4 mt-2\">\n                <button (click)=\"addHeader()\"\n                        draggable=\"true\"\n                        (dragstart)=\"onTextDragStart($event, 'header')\"\n                        class=\"w-full text-left p-4 border border-border rounded-lg hover:bg-surface-container transition-colors\">\n                  <div class=\"text-3xl font-bold pointer-events-none\">Add a heading</div>\n                </button>\n                <button (click)=\"addSubheader()\"\n                        draggable=\"true\"\n                        (dragstart)=\"onTextDragStart($event, 'subheader')\"\n                        class=\"w-full text-left p-3 border border-border rounded-lg hover:bg-surface-container transition-colors\">\n                  <div class=\"text-xl font-semibold pointer-events-none\">Add a subheading</div>\n                </button>\n                <button (click)=\"addBodyText()\"\n                        draggable=\"true\"\n                        (dragstart)=\"onTextDragStart($event, 'body')\"\n                        class=\"w-full text-left p-2 border border-border rounded-lg hover:bg-surface-container transition-colors\">\n                  <div class=\"text-base pointer-events-none\">Add body text</div>\n                </button>\n              </div>\n            </ngs-panel-content>\n          </ngs-panel>\n        </ng-template>\n        <ng-template ngsTabPanelAsideContent=\"photos\">\n          <ngs-panel class=\"h-full flex flex-col\">\n            <ngs-panel-header class=\"border-b border-b-border flex items-center px-4\">\n<!--              <ngs-form-field class=\"w-full\" subscriptHiddenIfEmpty>-->\n<!--                <ngs-icon name=\"fluent:search-24-regular\" ngsIconPrefix/>-->\n<!--                <input type=\"text\"-->\n<!--                       ngsInput-->\n<!--                       placeholder=\"Search photos\"-->\n<!--                       [ngModel]=\"photosFilter()\"-->\n<!--                       (ngModelChange)=\"photosFilter.set($event)\"/>-->\n<!--              </ngs-form-field>-->\n              Photos\n            </ngs-panel-header>\n            <ngs-panel-content class=\"relative flex-1 p-0 overflow-hidden\">\n              <ngs-scrollbar-area (scrolled)=\"onPhotosScroll($event)\" class=\"h-full\">\n                <div class=\"p-4\">\n                    <div class=\"masonry-grid\">\n                      @for (photo of photos(); track photo.id) {\n                        <button (click)=\"addImage(photo)\"\n                                draggable=\"true\"\n                                (dragstart)=\"onImageDragStart($event, photo)\"\n                                [style.aspect-ratio]=\"photo.width + '/' + photo.height\"\n                                class=\"border border-border rounded-lg overflow-hidden hover:ring-2 hover:ring-primary transition-all bg-surface-container\">\n                          <img [src]=\"photo.thumbUrl || photo.url\"\n                               [alt]=\"photo.name\"\n                               class=\"w-full h-auto block pointer-events-none\"/>\n                        </button>\n                      }\n                    </div>\n                  @if (isLoadingPhotos()) {\n                    <div class=\"flex justify-center p-4\">\n                      <ngs-progress-spinner diameter=\"32\"/>\n                    </div>\n                  }\n                  @if (photos().length === 0 && !isLoadingPhotos()) {\n                    <div class=\"text-center p-4 text-sm text-neutral-500\">\n                      No photos found\n                    </div>\n                  }\n                </div>\n              </ngs-scrollbar-area>\n            </ngs-panel-content>\n          </ngs-panel>\n        </ng-template>\n        <ng-template ngsTabPanelAsideContent=\"elements\">\n          <ngs-panel>\n            <ngs-panel-header class=\"border-b border-b-border flex items-center px-4\">Elements</ngs-panel-header>\n            <ngs-panel-content class=\"p-4 overflow-y-auto\">\n              <div class=\"grid grid-cols-3 gap-3\">\n                @for (element of elements(); track element.name) {\n                  <button (click)=\"addShape(element)\"\n                          draggable=\"true\"\n                          (dragstart)=\"onImageDragStart($event, element)\"\n                          class=\"aspect-square p-2 border border-border rounded-lg hover:bg-surface-container\n                                 transition-colors flex items-center justify-center\">\n                    <img [src]=\"element.data\" [alt]=\"element.name\"\n                         class=\"max-w-full max-h-full object-contain pointer-events-none\"/>\n                  </button>\n                }\n              </div>\n            </ngs-panel-content>\n          </ngs-panel>\n        </ng-template>\n        <ng-template ngsTabPanelAsideContent=\"upload\">\n          <ngs-panel class=\"h-full flex flex-col\">\n            <ngs-panel-header class=\"border-b border-b-border flex items-center px-4\">\n              <ngs-toolbar>\n                <div>Upload</div>\n                <ngs-toolbar-spacer/>\n                <button ngsButton=\"filled\"\n                        ngsUploadTrigger\n                        [accept]=\"'image/*'\"\n                        (fileSelected)=\"onFileSelected($event)\"\n                        [loading]=\"isUploading()\">\n                  <ngs-icon name=\"fluent:arrow-upload-24-regular\"/>\n                  Add Image\n                </button>\n              </ngs-toolbar>\n            </ngs-panel-header>\n            <ngs-panel-content>\n              @if (uploadedImages().length > 0 || assets().length > 0) {\n                <ngs-scrollbar-area (scrolled)=\"onAssetsScroll($event)\">\n                  <div class=\"p-4 flex flex-col gap-4 min-h-full\">\n                    @if (isUploading() || uploadPreview()) {\n                      <div class=\"relative aspect-video border border-border rounded-lg overflow-hidden bg-surface-container\">\n                        @if (uploadPreview()) {\n                          <img [src]=\"uploadPreview()\" class=\"w-full h-full object-contain\" alt=\"Preview\"/>\n                        }\n                        @if (isUploading()) {\n                          <div class=\"absolute inset-0 bg-black/20 flex items-center justify-center backdrop-blur-[2px]\">\n                            <div class=\"flex flex-col items-center gap-2\">\n                              <ngs-progress-spinner diameter=\"32\" color=\"white\"/>\n                              <span class=\"text-xs font-medium text-white\">Uploading...</span>\n                            </div>\n                          </div>\n                        }\n                      </div>\n                    }\n\n                    @if (uploadedImages().length > 0) {\n                      <div class=\"flex flex-col gap-2\">\n                        <div class=\"text-sm font-semibold\">Your Uploads</div>\n                        <div class=\"masonry-grid\">\n                          @for (photo of uploadedImages(); track $index) {\n                            <button (click)=\"addUploadedImage(photo)\"\n                                    draggable=\"true\"\n                                    (dragstart)=\"onImageDragStart($event, photo)\"\n                                    [style.aspect-ratio]=\"photo.width + '/' + photo.height\"\n                                    class=\"border border-border rounded-lg overflow-hidden hover:ring-2\n                                hover:ring-primary transition-all bg-surface-container\">\n                              <img [src]=\"photo.url\" class=\"w-full h-auto block pointer-events-none\" alt=\"Uploaded image\"/>\n                            </button>\n                          }\n                        </div>\n                      </div>\n                    }\n\n                    @if (assets().length > 0) {\n                      <div class=\"flex flex-col gap-2\">\n                        <div class=\"text-sm font-semibold\">Assets</div>\n                        <div class=\"masonry-grid\">\n                          @for (asset of assets(); track asset.id) {\n                            <button (click)=\"addImage(asset)\"\n                                    draggable=\"true\"\n                                    (dragstart)=\"onImageDragStart($event, asset)\"\n                                    [style.aspect-ratio]=\"asset.width + '/' + asset.height\"\n                                    class=\"border border-border rounded-lg overflow-hidden hover:ring-2\n                                hover:ring-primary transition-all bg-surface-container\">\n                              <img [src]=\"asset.thumbUrl || asset.url\"\n                                   [alt]=\"asset.name\"\n                                   class=\"w-full h-auto block pointer-events-none\"/>\n                            </button>\n                          }\n                        </div>\n                        @if (isLoadingAssets()) {\n                          <div class=\"flex justify-center p-4\">\n                            <ngs-progress-spinner diameter=\"32\"/>\n                          </div>\n                        }\n                      </div>\n                    }\n                  </div>\n                </ngs-scrollbar-area>\n              }\n\n              @if (uploadedImages().length === 0 && assets().length === 0 && !isLoadingAssets()) {\n                <div class=\"h-full flex items-center justify-center\">\n                  <div class=\"text-sm text-neutral-500\">No images uploaded yet.</div>\n                </div>\n              }\n            </ngs-panel-content>\n          </ngs-panel>\n        </ng-template>\n        <ng-template ngsTabPanelAsideContent=\"background\">\n          <ngs-panel>\n            <ngs-panel-header class=\"border-b border-b-border flex items-center px-4\">Background</ngs-panel-header>\n            <ngs-panel-content>\n              <ngs-tab-group animationDuration=\"0\" class=\"h-full\">\n                <ngs-tab label=\"Color\">\n                  <div class=\"absolute inset-0\">\n                    <ngs-scrollbar-area>\n                      <div class=\"p-4\">\n                        <ngs-accordion [multi]=\"false\">\n                          <ngs-expansion-panel [expanded]=\"true\">\n                            <ngs-expansion-panel-header>\n                              <ngs-expansion-panel-title>Colors</ngs-expansion-panel-title>\n                            </ngs-expansion-panel-header>\n                            <div class=\"py-2\">\n                              <ngs-color-switcher [colors]=\"presetColors()\" (colorChange)=\"setColor($event)\"/>\n                            </div>\n                          </ngs-expansion-panel>\n                          <ngs-expansion-panel>\n                            <ngs-expansion-panel-header>\n                              <ngs-expansion-panel-title>Gradients</ngs-expansion-panel-title>\n                            </ngs-expansion-panel-header>\n                            <div class=\"grid grid-cols-3 gap-3 py-2\">\n                              @for (gradient of presetGradients(); track $index) {\n                                <button (click)=\"setGradient(gradient)\"\n                                        [style.background]=\"gradient.css\"\n                                        class=\"aspect-[16/6.75] w-full rounded-lg border border-border hover:ring-2 hover:ring-primary transition-all\">\n                                </button>\n                              }\n                            </div>\n                          </ngs-expansion-panel>\n                        </ngs-accordion>\n                      </div>\n                    </ngs-scrollbar-area>\n                  </div>\n                </ngs-tab>\n                <ngs-tab label=\"Patterns\">\n                  <div class=\"absolute inset-0\">\n                    <ngs-scrollbar-area>\n                      <div class=\"p-4\">\n                        <div class=\"grid grid-cols-3 gap-3\">\n                          @for (pattern of presetPatterns(); track $index) {\n                            <button (click)=\"addPattern(pattern)\"\n                                    class=\"aspect-square w-full rounded-lg border border-border hover:ring-2 hover:ring-primary transition-all overflow-hidden\">\n                              <img [src]=\"pattern\" class=\"w-full h-full object-cover\" alt=\"pattern\">\n                            </button>\n                          }\n                        </div>\n                      </div>\n                    </ngs-scrollbar-area>\n                  </div>\n                </ngs-tab>\n              </ngs-tab-group>\n            </ngs-panel-content>\n          </ngs-panel>\n        </ng-template>\n        <ng-template ngsTabPanelAsideContent=\"layers\">\n          <ngs-panel>\n            <ngs-panel-header class=\"border-b border-b-border flex items-center px-4\">Layers</ngs-panel-header>\n            <ngs-panel-content>\n              @if (layersFromService().length > 0) {\n                <ngs-list cdkDropList (cdkDropListDropped)=\"drop($event)\">\n                  @for (layer of layersFromService(); track layer.id) {\n                    <ngs-list-item cdkDrag\n                                   cdkDragLockAxis=\"y\"\n                                   [cdkDragStartDelay]=\"100\"\n                                   (click)=\"selectLayer(layer.id!)\"\n                                   [class.is-active]=\"selectedLayerId() === layer.id\"\n                                   class=\"relative group bg-surface\">\n                      <ngs-icon [name]=\"getLayerIcon(layer.type)\" ngsListItemIcon/>\n                      <div ngsListItemLine>\n                        {{ layer.name || layer.type }}\n                        <!--                      {{ layer.text || '' }}-->\n                      </div>\n                      <div class=\"absolute right-2 top-1/2 -translate-y-1/2 flex items-center\">\n                        <button ngsIconButton (click)=\"toggleLayerVisibility(layer.id!, $event)\">\n                          <ngs-icon\n                            [name]=\"layer.visible === false ? 'fluent:eye-off-24-regular' : 'fluent:eye-24-regular'\"/>\n                        </button>\n                        <button ngsIconButton (click)=\"toggleLayerLock(layer.id!, $event)\">\n                          <ngs-icon\n                            [name]=\"layer.locked ? 'fluent:lock-closed-24-regular' : 'fluent:lock-open-24-regular'\"\n                            class=\"size-5\"/>\n                        </button>\n                        <button ngsIconButton (click)=\"deleteLayer(layer.id!, $event)\" [disabled]=\"layer.locked\">\n                          <ngs-icon name=\"fluent:delete-24-regular\" class=\"size-5\"/>\n                        </button>\n                      </div>\n\n                      <div *cdkDragPlaceholder\n                           class=\"min-h-[var(--ngs-list-item-min-height)] bg-surface-container\"></div>\n                    </ngs-list-item>\n                  }\n                </ngs-list>\n              } @else {\n                <div class=\"text-sm p-4 h-full flex items-center justify-center\">No layers available</div>\n              }\n            </ngs-panel-content>\n          </ngs-panel>\n        </ng-template>\n        <ng-template ngsTabPanelAsideContent=\"resize\">\n          <ngs-panel>\n            <ngs-panel-header class=\"border-b border-b-border flex items-center px-4\">Resize</ngs-panel-header>\n            <ngs-panel-content>\n              <ngs-scrollbar-area>\n                <div class=\"p-4 flex flex-col gap-4\">\n                  <div class=\"flex flex-col gap-4\">\n                    <ngs-form-field subscriptHiddenIfEmpty>\n                      <ngs-label>Width (px)</ngs-label>\n                      <input ngsInput type=\"number\" [(ngModel)]=\"resizeWidth\">\n                    </ngs-form-field>\n\n                    <ngs-form-field subscriptHiddenIfEmpty>\n                      <ngs-label>Height (px)</ngs-label>\n                      <input ngsInput type=\"number\" [(ngModel)]=\"resizeHeight\">\n                    </ngs-form-field>\n\n                    <ngs-form-field subscriptHiddenIfEmpty>\n                      <ngs-label>Units</ngs-label>\n                      <ngs-select [(ngModel)]=\"resizeUnit\">\n                        <ngs-option value=\"px\">px</ngs-option>\n                      </ngs-select>\n                    </ngs-form-field>\n\n                    <button ngsButton=\"filled\" fullWidth (click)=\"applyResize()\">Resize</button>\n                  </div>\n\n                  <div class=\"flex flex-col gap-6 mt-2\">\n                    @for (category of presetCategories(); track category.name) {\n                      <div class=\"flex flex-col gap-3\">\n                        <div class=\"flex items-center gap-2 font-semibold text-sm\">\n                          <ngs-icon [name]=\"category.icon\" class=\"size-5\"/>\n                          {{ category.name }}\n                        </div>\n\n                        <div class=\"grid grid-cols-3 gap-3\">\n                          @for (preset of category.presets; track preset.name) {\n                            <button (click)=\"selectPreset(preset)\"\n                                    class=\"flex flex-col items-center gap-1 p-2 rounded-lg border border-border hover:bg-surface-container transition-colors text-center\">\n                              <ngs-icon [name]=\"preset.icon\" class=\"size-6 mb-1\"/>\n                              <span class=\"text-xs font-medium truncate w-full\">{{ preset.name }}</span>\n                              <span class=\"text-[10px] text-muted-foreground whitespace-nowrap\">{{ preset.width }}\u00D7{{ preset.height }} px</span>\n                            </button>\n                          }\n                        </div>\n                      </div>\n                    }\n                  </div>\n                </div>\n              </ngs-scrollbar-area>\n            </ngs-panel-content>\n          </ngs-panel>\n        </ng-template>\n\n        @if (effectsPortal()) {\n          <div class=\"absolute inset-0 z-20 bg-surface-container-lowest\">\n            <ng-container [cdkPortalOutlet]=\"effectsPortal()\"/>\n          </div>\n        }\n      </ngs-tab-panel-aside>\n    </ngs-tab-panel>\n  </ngs-panel-sidebar>\n  <ngs-panel-content class=\"h-full\">\n    <ngs-panel class=\"h-full\">\n      <ngs-panel-header>\n        <ngs-toolbar class=\"h-full px-3 border-b border-border\">\n          <button ngsIconButton (click)=\"toggleAside()\">\n            <ngs-icon name=\"fluent:navigation-24-regular\"/>\n          </button>\n          <ngs-toolbar-title>{{ title() }}</ngs-toolbar-title>\n          <ngs-toolbar-spacer/>\n          <div class=\"flex items-center gap-2\">\n            <button ngsIconButton (click)=\"zoomOut()\">\n              <ngs-icon name=\"fluent:zoom-out-24-regular\"/>\n            </button>\n            <span class=\"text-sm font-medium w-12 text-center\">{{ zoomPercentage() }}%</span>\n            <button ngsIconButton (click)=\"zoomIn()\">\n              <ngs-icon name=\"fluent:zoom-in-24-regular\"/>\n            </button>\n          </div>\n          <ngs-toolbar-spacer/>\n          <div class=\"flex\">\n            <button ngsIconButton (click)=\"undo()\" [disabled]=\"!designerService.canUndo()\">\n              <ngs-icon name=\"fluent:arrow-hook-up-left-24-regular\"/>\n            </button>\n            <button ngsIconButton (click)=\"redo()\" [disabled]=\"!designerService.canRedo()\">\n              <ngs-icon name=\"fluent:arrow-hook-up-right-24-regular\"/>\n            </button>\n          </div>\n          @if (showDownloadButton()) {\n            <ngs-divider vertical/>\n            <button ngsButton=\"filled\" (click)=\"download()\" class=\"mr-2\">Download</button>\n          }\n        </ngs-toolbar>\n      </ngs-panel-header>\n      <ngs-panel-content class=\"bg-surface-container overflow-hidden h-full relative\" (wheel)=\"onWheel($event)\"\n                      (mousedown)=\"canvasContainer.focus()\"\n                      (dragover)=\"onDragOver($event)\"\n                      (drop)=\"onDrop($event)\">\n        @if (settingsPortal()) {\n          <ng-container [cdkPortalOutlet]=\"settingsPortal()\"/>\n        }\n        <div #canvasContainer class=\"w-full h-full outline-none\" tabindex=\"0\" (contextmenu)=\"$event.preventDefault()\"></div>\n      </ngs-panel-content>\n    </ngs-panel>\n  </ngs-panel-content>\n</ngs-panel>\n", styles: [":host{display:block;width:100%;height:100%}:host ngs-tab-panel{--ngs-tab-panel-aside-width: calc(var(--spacing, .25rem) * 90);--ngs-tab-panel-nav-padding: calc(var(--spacing, .25rem) * 3) 0}:host ngs-list{--ngs-list-padding: 0;--ngs-list-item-radius: 0}:host ngs-tab-group{--ngs-tab-label-padding: 16px 16px}:host .masonry-grid{column-count:2;column-gap:12px}:host .masonry-grid>*{break-inside:avoid;margin-bottom:12px;display:block;width:100%}:host button.is-dragging{background:transparent!important;border-color:transparent!important;box-shadow:none!important;transition:none!important;outline:none!important}:host button.is-dragging:hover{background:transparent!important;border-color:transparent!important;box-shadow:none!important}:host button.is-dragging *{color:currentColor!important}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "component", type: Panel, selector: "ngs-panel", inputs: ["absolute"], exportAs: ["ngsPanel"] }, { kind: "component", type: PanelSidebar, selector: "ngs-panel-sidebar" }, { kind: "component", type: PanelContent, selector: "ngs-panel-content", exportAs: ["ngsPanelContent"] }, { kind: "component", type: PanelHeader, selector: "ngs-panel-header", inputs: ["autoHeight"], exportAs: ["ngsPanelHeader"] }, { kind: "component", type: Toolbar, selector: "ngs-toolbar", exportAs: ["ngsToolbar"] }, { kind: "component", type: Button, selector: "    button[ngsButton], button[ngsIconButton],    a[ngsButton], a[ngsIconButton]  ", inputs: ["ngsButton", "ngsIconButton", "loading", "disabled", "disabledInteractive", "disableRipple", "reverse", "fullWidth", "hideTextOnMobile"], exportAs: ["ngsButton"] }, { kind: "component", type: ToolbarSpacer, selector: "ngs-toolbar-spacer" }, { kind: "component", type: Divider, selector: "ngs-divider", inputs: ["vertical", "inset", "fixedHeight"], exportAs: ["ngsDivider"] }, { kind: "component", type: Icon, selector: "ngs-icon", inputs: ["name"], exportAs: ["ngsIcon"] }, { kind: "component", type: ToolbarTitle, selector: "ngs-toolbar-title" }, { kind: "component", type: TabPanel, selector: "ngs-tab-panel", inputs: ["hideContentIfTabNotSelected", "activeItemId", "compact"], outputs: ["itemIdChanged"], exportAs: ["ngsTabPanel"] }, { kind: "component", type: TabPanelAside, selector: "ngs-tab-panel-aside", exportAs: ["ngsTabPanelAside"] }, { kind: "directive", type: TabPanelAsideContentDirective, selector: "[ngsTabPanelAsideContent]", inputs: ["ngsTabPanelAsideContent"], exportAs: ["ngsTabPanelAsideContent"] }, { kind: "component", type: TabPanelContent, selector: "ngs-tab-panel-content", exportAs: ["ngsTabPanelContent"] }, { kind: "component", type: TabPanelItem, selector: "ngs-tab-panel-item", inputs: ["for"], exportAs: ["ngsTabPanelItem"] }, { kind: "directive", type: TabPanelItemIconDirective, selector: "[ngsTabPanelItemIcon]", exportAs: ["ngsTabPanelItemIcon"] }, { kind: "component", type: TabPanelItemText, selector: "ngs-tab-panel-item-text", exportAs: ["ngsTabPanelItemText"] }, { kind: "component", type: TabPanelNav, selector: "ngs-tab-panel-nav", exportAs: ["ngsTabPanelNav"] }, { kind: "component", type: List, selector: "ngs-list", inputs: ["disabled", "disableRipple"], exportAs: ["ngsList"] }, { kind: "component", type: ListItem, selector: "ngs-list-item, a[ngs-list-item], button[ngs-list-item]", inputs: ["disabled", "lines"], exportAs: ["ngsListItem"] }, { kind: "directive", type: ListItemLine, selector: "[ngsListItemLine], [ngsLine]" }, { kind: "directive", type: CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer", "cdkDropListHasAnchor"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: CdkDragPlaceholder, selector: "ng-template[cdkDragPlaceholder]", inputs: ["data"] }, { kind: "component", type: TabGroup, selector: "ngs-tab-group", inputs: ["selectedIndex", "headerPosition", "preserveContent", "ngs-stretch-tabs", "ngs-align-tabs", "disableRipple", "animationDuration", "animate.enter", "animate.leave"], outputs: ["selectedIndexChange", "selectedTabChange", "focusChange"] }, { kind: "component", type: Tab, selector: "ngs-tab", inputs: ["label", "aria-label", "aria-labelledby", "disabled"], exportAs: ["ngsTab"] }, { kind: "component", type: Accordion, selector: "ngs-accordion", inputs: ["multi", "hideToggle"], exportAs: ["ngsAccordion"] }, { kind: "component", type: ExpansionPanel, selector: "ngs-expansion-panel", inputs: ["disabled", "expanded", "hideToggle"], outputs: ["expandedChange", "opened", "closed"], exportAs: ["ngsExpansionPanel"] }, { kind: "component", type: ExpansionPanelHeader, selector: "ngs-expansion-panel-header", inputs: ["hideToggle"] }, { kind: "component", type: ExpansionPanelTitle, selector: "ngs-expansion-panel-title", exportAs: ["ngsExpansionPanelTitle"] }, { kind: "component", type: FormField, selector: "ngs-form-field", inputs: ["subscriptHiddenIfEmpty"], exportAs: ["ngsFormField"] }, { kind: "component", type: Label, selector: "ngs-label" }, { kind: "directive", type: Input, selector: "input[ngsInput], textarea[ngsInput]", inputs: ["id", "placeholder", "required", "disabled", "readonly", "errorStateMatcher"], exportAs: ["ngsInput"] }, { kind: "component", type: Select, selector: "ngs-select", inputs: ["id", "placeholder", "disabled", "required", "multiple", "hideCheckIcon", "ariaLabel", "tabIndex", "aria-describedby", "value"], outputs: ["selectionChange", "opened", "closed", "valueChange"], exportAs: ["ngsSelect"] }, { kind: "component", type: Option, selector: "ngs-option", inputs: ["value", "disabled", "selected"], outputs: ["onSelectionChange"], exportAs: ["ngsOption"] }, { kind: "component", type: ColorSwitcher, selector: "ngs-color-switcher", inputs: ["colors", "selectedColor", "disabled"], outputs: ["colorChange"], exportAs: ["ngsColorSwitcher"] }, { kind: "component", type: ScrollbarArea, selector: "ngs-scrollbar-area", inputs: ["scrollbarWidth", "autoHide", "absolute"], outputs: ["scrolled"], exportAs: ["ngsScrollbarArea"] }, { kind: "directive", type: CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }, { kind: "directive", type: UploadTriggerDirective, selector: "[ngsUploadTrigger]", inputs: ["accept", "multiple"], outputs: ["fileSelected"], exportAs: ["ngsUploadTrigger"] }, { kind: "component", type: ProgressSpinner, selector: "ngs-progress-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["ngsProgressSpinner"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.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$1.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: ImageDesigner, decorators: [{
+            type: Component,
+            args: [{ selector: 'ngs-image-designer', exportAs: 'ngsImageDesigner', imports: [
+                        Panel,
+                        PanelSidebar,
+                        PanelContent,
+                        PanelHeader,
+                        Toolbar,
+                        Button,
+                        ToolbarSpacer,
+                        Divider,
+                        Icon,
+                        ToolbarTitle,
+                        TabPanel,
+                        TabPanelAside,
+                        TabPanelAsideContentDirective,
+                        TabPanelContent,
+                        TabPanelItem,
+                        TabPanelItemIconDirective,
+                        TabPanelItemText,
+                        TabPanelNav,
+                        List,
+                        ListItem,
+                        ListItemLine,
+                        CdkDropList,
+                        CdkDrag,
+                        CdkDragPlaceholder,
+                        TabGroup,
+                        Tab,
+                        Accordion,
+                        ExpansionPanel,
+                        ExpansionPanelHeader,
+                        ExpansionPanelTitle,
+                        FormField,
+                        Label,
+                        Input,
+                        Select,
+                        Option,
+                        ColorSwitcher,
+                        ScrollbarArea,
+                        CdkPortalOutlet,
+                        UploadTriggerDirective,
+                        ProgressSpinner,
+                        FormsModule,
+                    ], providers: [
+                        ImageDesignerService,
+                        {
+                            provide: IMAGE_DESIGNER,
+                            useExisting: forwardRef(() => ImageDesigner)
+                        }
+                    ], host: {
+                        'class': 'ngs-image-designer',
+                        '(keydown)': 'onKeyDown($event)'
+                    }, template: "<ngs-panel class=\"h-full\">\n  <ngs-panel-sidebar class=\"border-r border-border h-full\">\n    <ngs-tab-panel hideContentIfTabNotSelected [activeItemId]=\"activeItemId()\" class=\"h-full\">\n      <ngs-tab-panel-content>\n        <ngs-tab-panel-nav>\n          <ngs-tab-panel-item for=\"text\" (click)=\"activeItemId.set('text')\">\n            <ngs-icon name=\"fluent:text-field-24-regular\" ngsTabPanelItemIcon/>\n            <ngs-tab-panel-item-text>Text</ngs-tab-panel-item-text>\n          </ngs-tab-panel-item>\n          <ngs-tab-panel-item for=\"photos\" (click)=\"activeItemId.set('photos')\">\n            <ngs-icon name=\"fluent:image-copy-24-regular\" ngsTabPanelItemIcon/>\n            <ngs-tab-panel-item-text>Photos</ngs-tab-panel-item-text>\n          </ngs-tab-panel-item>\n          <ngs-tab-panel-item for=\"elements\" (click)=\"activeItemId.set('elements')\">\n            <ngs-icon name=\"fluent:shape-subtract-24-regular\" ngsTabPanelItemIcon/>\n            <ngs-tab-panel-item-text>Elements</ngs-tab-panel-item-text>\n          </ngs-tab-panel-item>\n          <ngs-tab-panel-item for=\"upload\" (click)=\"activeItemId.set('upload')\">\n            <ngs-icon name=\"fluent:arrow-upload-24-regular\" ngsTabPanelItemIcon/>\n            <ngs-tab-panel-item-text>Upload</ngs-tab-panel-item-text>\n          </ngs-tab-panel-item>\n          <ngs-tab-panel-item for=\"background\" (click)=\"activeItemId.set('background')\">\n            <ngs-icon name=\"fluent:grid-dots-24-regular\" ngsTabPanelItemIcon/>\n            <ngs-tab-panel-item-text>Background</ngs-tab-panel-item-text>\n          </ngs-tab-panel-item>\n          <ngs-tab-panel-item for=\"layers\" (click)=\"activeItemId.set('layers')\">\n            <ngs-icon name=\"fluent:layer-24-regular\" ngsTabPanelItemIcon/>\n            <ngs-tab-panel-item-text>Layers</ngs-tab-panel-item-text>\n          </ngs-tab-panel-item>\n          <ngs-tab-panel-item for=\"resize\" (click)=\"activeItemId.set('resize')\">\n            <ngs-icon name=\"fluent:resize-24-regular\" ngsTabPanelItemIcon/>\n            <ngs-tab-panel-item-text>Resize</ngs-tab-panel-item-text>\n          </ngs-tab-panel-item>\n        </ngs-tab-panel-nav>\n      </ngs-tab-panel-content>\n      <ngs-tab-panel-aside class=\"border-s border-border\">\n        <ng-template ngsTabPanelAsideContent=\"text\">\n          <ngs-panel>\n            <ngs-panel-header class=\"border-b border-b-border flex items-center px-4\">Text</ngs-panel-header>\n            <ngs-panel-content class=\"p-4 flex flex-col gap-4\">\n              <div class=\"grid grid-cols-1 gap-4 mt-2\">\n                <button (click)=\"addHeader()\"\n                        draggable=\"true\"\n                        (dragstart)=\"onTextDragStart($event, 'header')\"\n                        class=\"w-full text-left p-4 border border-border rounded-lg hover:bg-surface-container transition-colors\">\n                  <div class=\"text-3xl font-bold pointer-events-none\">Add a heading</div>\n                </button>\n                <button (click)=\"addSubheader()\"\n                        draggable=\"true\"\n                        (dragstart)=\"onTextDragStart($event, 'subheader')\"\n                        class=\"w-full text-left p-3 border border-border rounded-lg hover:bg-surface-container transition-colors\">\n                  <div class=\"text-xl font-semibold pointer-events-none\">Add a subheading</div>\n                </button>\n                <button (click)=\"addBodyText()\"\n                        draggable=\"true\"\n                        (dragstart)=\"onTextDragStart($event, 'body')\"\n                        class=\"w-full text-left p-2 border border-border rounded-lg hover:bg-surface-container transition-colors\">\n                  <div class=\"text-base pointer-events-none\">Add body text</div>\n                </button>\n              </div>\n            </ngs-panel-content>\n          </ngs-panel>\n        </ng-template>\n        <ng-template ngsTabPanelAsideContent=\"photos\">\n          <ngs-panel class=\"h-full flex flex-col\">\n            <ngs-panel-header class=\"border-b border-b-border flex items-center px-4\">\n<!--              <ngs-form-field class=\"w-full\" subscriptHiddenIfEmpty>-->\n<!--                <ngs-icon name=\"fluent:search-24-regular\" ngsIconPrefix/>-->\n<!--                <input type=\"text\"-->\n<!--                       ngsInput-->\n<!--                       placeholder=\"Search photos\"-->\n<!--                       [ngModel]=\"photosFilter()\"-->\n<!--                       (ngModelChange)=\"photosFilter.set($event)\"/>-->\n<!--              </ngs-form-field>-->\n              Photos\n            </ngs-panel-header>\n            <ngs-panel-content class=\"relative flex-1 p-0 overflow-hidden\">\n              <ngs-scrollbar-area (scrolled)=\"onPhotosScroll($event)\" class=\"h-full\">\n                <div class=\"p-4\">\n                    <div class=\"masonry-grid\">\n                      @for (photo of photos(); track photo.id) {\n                        <button (click)=\"addImage(photo)\"\n                                draggable=\"true\"\n                                (dragstart)=\"onImageDragStart($event, photo)\"\n                                [style.aspect-ratio]=\"photo.width + '/' + photo.height\"\n                                class=\"border border-border rounded-lg overflow-hidden hover:ring-2 hover:ring-primary transition-all bg-surface-container\">\n                          <img [src]=\"photo.thumbUrl || photo.url\"\n                               [alt]=\"photo.name\"\n                               class=\"w-full h-auto block pointer-events-none\"/>\n                        </button>\n                      }\n                    </div>\n                  @if (isLoadingPhotos()) {\n                    <div class=\"flex justify-center p-4\">\n                      <ngs-progress-spinner diameter=\"32\"/>\n                    </div>\n                  }\n                  @if (photos().length === 0 && !isLoadingPhotos()) {\n                    <div class=\"text-center p-4 text-sm text-neutral-500\">\n                      No photos found\n                    </div>\n                  }\n                </div>\n              </ngs-scrollbar-area>\n            </ngs-panel-content>\n          </ngs-panel>\n        </ng-template>\n        <ng-template ngsTabPanelAsideContent=\"elements\">\n          <ngs-panel>\n            <ngs-panel-header class=\"border-b border-b-border flex items-center px-4\">Elements</ngs-panel-header>\n            <ngs-panel-content class=\"p-4 overflow-y-auto\">\n              <div class=\"grid grid-cols-3 gap-3\">\n                @for (element of elements(); track element.name) {\n                  <button (click)=\"addShape(element)\"\n                          draggable=\"true\"\n                          (dragstart)=\"onImageDragStart($event, element)\"\n                          class=\"aspect-square p-2 border border-border rounded-lg hover:bg-surface-container\n                                 transition-colors flex items-center justify-center\">\n                    <img [src]=\"element.data\" [alt]=\"element.name\"\n                         class=\"max-w-full max-h-full object-contain pointer-events-none\"/>\n                  </button>\n                }\n              </div>\n            </ngs-panel-content>\n          </ngs-panel>\n        </ng-template>\n        <ng-template ngsTabPanelAsideContent=\"upload\">\n          <ngs-panel class=\"h-full flex flex-col\">\n            <ngs-panel-header class=\"border-b border-b-border flex items-center px-4\">\n              <ngs-toolbar>\n                <div>Upload</div>\n                <ngs-toolbar-spacer/>\n                <button ngsButton=\"filled\"\n                        ngsUploadTrigger\n                        [accept]=\"'image/*'\"\n                        (fileSelected)=\"onFileSelected($event)\"\n                        [loading]=\"isUploading()\">\n                  <ngs-icon name=\"fluent:arrow-upload-24-regular\"/>\n                  Add Image\n                </button>\n              </ngs-toolbar>\n            </ngs-panel-header>\n            <ngs-panel-content>\n              @if (uploadedImages().length > 0 || assets().length > 0) {\n                <ngs-scrollbar-area (scrolled)=\"onAssetsScroll($event)\">\n                  <div class=\"p-4 flex flex-col gap-4 min-h-full\">\n                    @if (isUploading() || uploadPreview()) {\n                      <div class=\"relative aspect-video border border-border rounded-lg overflow-hidden bg-surface-container\">\n                        @if (uploadPreview()) {\n                          <img [src]=\"uploadPreview()\" class=\"w-full h-full object-contain\" alt=\"Preview\"/>\n                        }\n                        @if (isUploading()) {\n                          <div class=\"absolute inset-0 bg-black/20 flex items-center justify-center backdrop-blur-[2px]\">\n                            <div class=\"flex flex-col items-center gap-2\">\n                              <ngs-progress-spinner diameter=\"32\" color=\"white\"/>\n                              <span class=\"text-xs font-medium text-white\">Uploading...</span>\n                            </div>\n                          </div>\n                        }\n                      </div>\n                    }\n\n                    @if (uploadedImages().length > 0) {\n                      <div class=\"flex flex-col gap-2\">\n                        <div class=\"text-sm font-semibold\">Your Uploads</div>\n                        <div class=\"masonry-grid\">\n                          @for (photo of uploadedImages(); track $index) {\n                            <button (click)=\"addUploadedImage(photo)\"\n                                    draggable=\"true\"\n                                    (dragstart)=\"onImageDragStart($event, photo)\"\n                                    [style.aspect-ratio]=\"photo.width + '/' + photo.height\"\n                                    class=\"border border-border rounded-lg overflow-hidden hover:ring-2\n                                hover:ring-primary transition-all bg-surface-container\">\n                              <img [src]=\"photo.url\" class=\"w-full h-auto block pointer-events-none\" alt=\"Uploaded image\"/>\n                            </button>\n                          }\n                        </div>\n                      </div>\n                    }\n\n                    @if (assets().length > 0) {\n                      <div class=\"flex flex-col gap-2\">\n                        <div class=\"text-sm font-semibold\">Assets</div>\n                        <div class=\"masonry-grid\">\n                          @for (asset of assets(); track asset.id) {\n                            <button (click)=\"addImage(asset)\"\n                                    draggable=\"true\"\n                                    (dragstart)=\"onImageDragStart($event, asset)\"\n                                    [style.aspect-ratio]=\"asset.width + '/' + asset.height\"\n                                    class=\"border border-border rounded-lg overflow-hidden hover:ring-2\n                                hover:ring-primary transition-all bg-surface-container\">\n                              <img [src]=\"asset.thumbUrl || asset.url\"\n                                   [alt]=\"asset.name\"\n                                   class=\"w-full h-auto block pointer-events-none\"/>\n                            </button>\n                          }\n                        </div>\n                        @if (isLoadingAssets()) {\n                          <div class=\"flex justify-center p-4\">\n                            <ngs-progress-spinner diameter=\"32\"/>\n                          </div>\n                        }\n                      </div>\n                    }\n                  </div>\n                </ngs-scrollbar-area>\n              }\n\n              @if (uploadedImages().length === 0 && assets().length === 0 && !isLoadingAssets()) {\n                <div class=\"h-full flex items-center justify-center\">\n                  <div class=\"text-sm text-neutral-500\">No images uploaded yet.</div>\n                </div>\n              }\n            </ngs-panel-content>\n          </ngs-panel>\n        </ng-template>\n        <ng-template ngsTabPanelAsideContent=\"background\">\n          <ngs-panel>\n            <ngs-panel-header class=\"border-b border-b-border flex items-center px-4\">Background</ngs-panel-header>\n            <ngs-panel-content>\n              <ngs-tab-group animationDuration=\"0\" class=\"h-full\">\n                <ngs-tab label=\"Color\">\n                  <div class=\"absolute inset-0\">\n                    <ngs-scrollbar-area>\n                      <div class=\"p-4\">\n                        <ngs-accordion [multi]=\"false\">\n                          <ngs-expansion-panel [expanded]=\"true\">\n                            <ngs-expansion-panel-header>\n                              <ngs-expansion-panel-title>Colors</ngs-expansion-panel-title>\n                            </ngs-expansion-panel-header>\n                            <div class=\"py-2\">\n                              <ngs-color-switcher [colors]=\"presetColors()\" (colorChange)=\"setColor($event)\"/>\n                            </div>\n                          </ngs-expansion-panel>\n                          <ngs-expansion-panel>\n                            <ngs-expansion-panel-header>\n                              <ngs-expansion-panel-title>Gradients</ngs-expansion-panel-title>\n                            </ngs-expansion-panel-header>\n                            <div class=\"grid grid-cols-3 gap-3 py-2\">\n                              @for (gradient of presetGradients(); track $index) {\n                                <button (click)=\"setGradient(gradient)\"\n                                        [style.background]=\"gradient.css\"\n                                        class=\"aspect-[16/6.75] w-full rounded-lg border border-border hover:ring-2 hover:ring-primary transition-all\">\n                                </button>\n                              }\n                            </div>\n                          </ngs-expansion-panel>\n                        </ngs-accordion>\n                      </div>\n                    </ngs-scrollbar-area>\n                  </div>\n                </ngs-tab>\n                <ngs-tab label=\"Patterns\">\n                  <div class=\"absolute inset-0\">\n                    <ngs-scrollbar-area>\n                      <div class=\"p-4\">\n                        <div class=\"grid grid-cols-3 gap-3\">\n                          @for (pattern of presetPatterns(); track $index) {\n                            <button (click)=\"addPattern(pattern)\"\n                                    class=\"aspect-square w-full rounded-lg border border-border hover:ring-2 hover:ring-primary transition-all overflow-hidden\">\n                              <img [src]=\"pattern\" class=\"w-full h-full object-cover\" alt=\"pattern\">\n                            </button>\n                          }\n                        </div>\n                      </div>\n                    </ngs-scrollbar-area>\n                  </div>\n                </ngs-tab>\n              </ngs-tab-group>\n            </ngs-panel-content>\n          </ngs-panel>\n        </ng-template>\n        <ng-template ngsTabPanelAsideContent=\"layers\">\n          <ngs-panel>\n            <ngs-panel-header class=\"border-b border-b-border flex items-center px-4\">Layers</ngs-panel-header>\n            <ngs-panel-content>\n              @if (layersFromService().length > 0) {\n                <ngs-list cdkDropList (cdkDropListDropped)=\"drop($event)\">\n                  @for (layer of layersFromService(); track layer.id) {\n                    <ngs-list-item cdkDrag\n                                   cdkDragLockAxis=\"y\"\n                                   [cdkDragStartDelay]=\"100\"\n                                   (click)=\"selectLayer(layer.id!)\"\n                                   [class.is-active]=\"selectedLayerId() === layer.id\"\n                                   class=\"relative group bg-surface\">\n                      <ngs-icon [name]=\"getLayerIcon(layer.type)\" ngsListItemIcon/>\n                      <div ngsListItemLine>\n                        {{ layer.name || layer.type }}\n                        <!--                      {{ layer.text || '' }}-->\n                      </div>\n                      <div class=\"absolute right-2 top-1/2 -translate-y-1/2 flex items-center\">\n                        <button ngsIconButton (click)=\"toggleLayerVisibility(layer.id!, $event)\">\n                          <ngs-icon\n                            [name]=\"layer.visible === false ? 'fluent:eye-off-24-regular' : 'fluent:eye-24-regular'\"/>\n                        </button>\n                        <button ngsIconButton (click)=\"toggleLayerLock(layer.id!, $event)\">\n                          <ngs-icon\n                            [name]=\"layer.locked ? 'fluent:lock-closed-24-regular' : 'fluent:lock-open-24-regular'\"\n                            class=\"size-5\"/>\n                        </button>\n                        <button ngsIconButton (click)=\"deleteLayer(layer.id!, $event)\" [disabled]=\"layer.locked\">\n                          <ngs-icon name=\"fluent:delete-24-regular\" class=\"size-5\"/>\n                        </button>\n                      </div>\n\n                      <div *cdkDragPlaceholder\n                           class=\"min-h-[var(--ngs-list-item-min-height)] bg-surface-container\"></div>\n                    </ngs-list-item>\n                  }\n                </ngs-list>\n              } @else {\n                <div class=\"text-sm p-4 h-full flex items-center justify-center\">No layers available</div>\n              }\n            </ngs-panel-content>\n          </ngs-panel>\n        </ng-template>\n        <ng-template ngsTabPanelAsideContent=\"resize\">\n          <ngs-panel>\n            <ngs-panel-header class=\"border-b border-b-border flex items-center px-4\">Resize</ngs-panel-header>\n            <ngs-panel-content>\n              <ngs-scrollbar-area>\n                <div class=\"p-4 flex flex-col gap-4\">\n                  <div class=\"flex flex-col gap-4\">\n                    <ngs-form-field subscriptHiddenIfEmpty>\n                      <ngs-label>Width (px)</ngs-label>\n                      <input ngsInput type=\"number\" [(ngModel)]=\"resizeWidth\">\n                    </ngs-form-field>\n\n                    <ngs-form-field subscriptHiddenIfEmpty>\n                      <ngs-label>Height (px)</ngs-label>\n                      <input ngsInput type=\"number\" [(ngModel)]=\"resizeHeight\">\n                    </ngs-form-field>\n\n                    <ngs-form-field subscriptHiddenIfEmpty>\n                      <ngs-label>Units</ngs-label>\n                      <ngs-select [(ngModel)]=\"resizeUnit\">\n                        <ngs-option value=\"px\">px</ngs-option>\n                      </ngs-select>\n                    </ngs-form-field>\n\n                    <button ngsButton=\"filled\" fullWidth (click)=\"applyResize()\">Resize</button>\n                  </div>\n\n                  <div class=\"flex flex-col gap-6 mt-2\">\n                    @for (category of presetCategories(); track category.name) {\n                      <div class=\"flex flex-col gap-3\">\n                        <div class=\"flex items-center gap-2 font-semibold text-sm\">\n                          <ngs-icon [name]=\"category.icon\" class=\"size-5\"/>\n                          {{ category.name }}\n                        </div>\n\n                        <div class=\"grid grid-cols-3 gap-3\">\n                          @for (preset of category.presets; track preset.name) {\n                            <button (click)=\"selectPreset(preset)\"\n                                    class=\"flex flex-col items-center gap-1 p-2 rounded-lg border border-border hover:bg-surface-container transition-colors text-center\">\n                              <ngs-icon [name]=\"preset.icon\" class=\"size-6 mb-1\"/>\n                              <span class=\"text-xs font-medium truncate w-full\">{{ preset.name }}</span>\n                              <span class=\"text-[10px] text-muted-foreground whitespace-nowrap\">{{ preset.width }}\u00D7{{ preset.height }} px</span>\n                            </button>\n                          }\n                        </div>\n                      </div>\n                    }\n                  </div>\n                </div>\n              </ngs-scrollbar-area>\n            </ngs-panel-content>\n          </ngs-panel>\n        </ng-template>\n\n        @if (effectsPortal()) {\n          <div class=\"absolute inset-0 z-20 bg-surface-container-lowest\">\n            <ng-container [cdkPortalOutlet]=\"effectsPortal()\"/>\n          </div>\n        }\n      </ngs-tab-panel-aside>\n    </ngs-tab-panel>\n  </ngs-panel-sidebar>\n  <ngs-panel-content class=\"h-full\">\n    <ngs-panel class=\"h-full\">\n      <ngs-panel-header>\n        <ngs-toolbar class=\"h-full px-3 border-b border-border\">\n          <button ngsIconButton (click)=\"toggleAside()\">\n            <ngs-icon name=\"fluent:navigation-24-regular\"/>\n          </button>\n          <ngs-toolbar-title>{{ title() }}</ngs-toolbar-title>\n          <ngs-toolbar-spacer/>\n          <div class=\"flex items-center gap-2\">\n            <button ngsIconButton (click)=\"zoomOut()\">\n              <ngs-icon name=\"fluent:zoom-out-24-regular\"/>\n            </button>\n            <span class=\"text-sm font-medium w-12 text-center\">{{ zoomPercentage() }}%</span>\n            <button ngsIconButton (click)=\"zoomIn()\">\n              <ngs-icon name=\"fluent:zoom-in-24-regular\"/>\n            </button>\n          </div>\n          <ngs-toolbar-spacer/>\n          <div class=\"flex\">\n            <button ngsIconButton (click)=\"undo()\" [disabled]=\"!designerService.canUndo()\">\n              <ngs-icon name=\"fluent:arrow-hook-up-left-24-regular\"/>\n            </button>\n            <button ngsIconButton (click)=\"redo()\" [disabled]=\"!designerService.canRedo()\">\n              <ngs-icon name=\"fluent:arrow-hook-up-right-24-regular\"/>\n            </button>\n          </div>\n          @if (showDownloadButton()) {\n            <ngs-divider vertical/>\n            <button ngsButton=\"filled\" (click)=\"download()\" class=\"mr-2\">Download</button>\n          }\n        </ngs-toolbar>\n      </ngs-panel-header>\n      <ngs-panel-content class=\"bg-surface-container overflow-hidden h-full relative\" (wheel)=\"onWheel($event)\"\n                      (mousedown)=\"canvasContainer.focus()\"\n                      (dragover)=\"onDragOver($event)\"\n                      (drop)=\"onDrop($event)\">\n        @if (settingsPortal()) {\n          <ng-container [cdkPortalOutlet]=\"settingsPortal()\"/>\n        }\n        <div #canvasContainer class=\"w-full h-full outline-none\" tabindex=\"0\" (contextmenu)=\"$event.preventDefault()\"></div>\n      </ngs-panel-content>\n    </ngs-panel>\n  </ngs-panel-content>\n</ngs-panel>\n", styles: [":host{display:block;width:100%;height:100%}:host ngs-tab-panel{--ngs-tab-panel-aside-width: calc(var(--spacing, .25rem) * 90);--ngs-tab-panel-nav-padding: calc(var(--spacing, .25rem) * 3) 0}:host ngs-list{--ngs-list-padding: 0;--ngs-list-item-radius: 0}:host ngs-tab-group{--ngs-tab-label-padding: 16px 16px}:host .masonry-grid{column-count:2;column-gap:12px}:host .masonry-grid>*{break-inside:avoid;margin-bottom:12px;display:block;width:100%}:host button.is-dragging{background:transparent!important;border-color:transparent!important;box-shadow:none!important;transition:none!important;outline:none!important}:host button.is-dragging:hover{background:transparent!important;border-color:transparent!important;box-shadow:none!important}:host button.is-dragging *{color:currentColor!important}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"] }]
+        }], ctorParameters: () => [], propDecorators: { canvasContainer: [{ type: i0.ViewChild, args: ['canvasContainer', { isSignal: true }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], imageSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "imageSize", required: false }] }], defaultFont: [{ type: i0.Input, args: [{ isSignal: true, alias: "defaultFont", required: false }] }], scale: [{ type: i0.Input, args: [{ isSignal: true, alias: "scale", required: false }] }], minScale: [{ type: i0.Input, args: [{ isSignal: true, alias: "minScale", required: false }] }], maxScale: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxScale", required: false }] }], showGuidelines: [{ type: i0.Input, args: [{ isSignal: true, alias: "showGuidelines", required: false }] }], snapToShapes: [{ type: i0.Input, args: [{ isSignal: true, alias: "snapToShapes", required: false }] }], snapToStageCenter: [{ type: i0.Input, args: [{ isSignal: true, alias: "snapToStageCenter", required: false }] }], snapToStageBorders: [{ type: i0.Input, args: [{ isSignal: true, alias: "snapToStageBorders", required: false }] }], guidelineColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "guidelineColor", required: false }] }], snapRange: [{ type: i0.Input, args: [{ isSignal: true, alias: "snapRange", required: false }] }], showDownloadButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "showDownloadButton", required: false }] }], uploadFn: [{ type: i0.Input, args: [{ isSignal: true, alias: "uploadFn", required: false }] }], snapshot: [{ type: i0.Input, args: [{ isSignal: true, alias: "snapshot", required: false }] }], snapshotChanged: [{ type: i0.Output, args: ["snapshotChanged"] }], photosDataSource: [{ type: i0.Input, args: [{ isSignal: true, alias: "photosDataSource", required: false }] }], assetsDataSource: [{ type: i0.Input, args: [{ isSignal: true, alias: "assetsDataSource", required: false }] }], historyLimit: [{ type: i0.Input, args: [{ isSignal: true, alias: "historyLimit", required: false }] }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { IMAGE_DESIGNER, ImageDesigner, ImageDesignerService, SVG_ELEMENTS, SVG_PATTERNS, Settings, createDefaultPhotosDataSource };
+//# sourceMappingURL=ngstarter-ui-components-image-designer.mjs.map