@widgetic/canvas 0.5.4

package/dist/canvas/props-panel/PropsPanel.svelte

@@ -0,0 +1,1902 @@
+<script lang="ts">
+    import ColorIC from '../../components/input-controls/ColorIC.svelte';
+    import SliderUnitIC from '../../components/input-controls/SliderUnitIC.svelte';
+    import TextPropsICSection from './TextPropsICSection.svelte';
+    import TextAlignIC from '../../components/input-controls/TextAlignIC.svelte';
+    import FontSelectorIC from '../../components/input-controls/FontSelectorIC.svelte';
+    import TextStyleIC from '../../components/input-controls/TextStyleIC.svelte';
+    import Tooltip from '../../components/Tooltip.svelte';
+    
+    let className = '';
+    export { className as class };
+    export let style = '';
+
+    // Selected object from Canvas
+    export let selectedObject: any = null;
+
+    // Wireframe mode: when true, hides color pickers so the panel focuses on
+    // structural properties (size, position, font, stroke width, etc.).
+    // Opacity is always shown — useful for hiding objects without deleting them.
+    export let wireframeMode: boolean = false;
+
+    // Callback functions for property changes - General
+    export let onFillChange: (color: string) => void = () => {};
+    export let onStrokeChange: (color: string) => void = () => {};
+    export let onStrokeWidthChange: (width: number) => void = () => {};
+    export let onRoundnessChange: (roundness: number) => void = () => {};
+    export let onStrokeTypeChange: (type: 'solid' | 'dashed' | 'dotted') => void = () => {};
+    export let onOpacityChange: (opacity: number) => void = () => {};
+    export let onFillOpacityChange: (opacity: number) => void = () => {};
+    export let onBackgroundColorChange: (color: string) => void = () => {};
+    export let onBackgroundOpacityChange: (opacity: number) => void = () => {};
+    
+    // Callback functions for text properties
+    export let onFontSizeChange: (size: number) => void = () => {};
+    export let onFontFamilyChange: (family: string) => void = () => {};
+    export let onFontWeightChange: (weight: 'normal' | 'bold') => void = () => {};
+    export let onFontStyleChange: (style: 'normal' | 'italic') => void = () => {};
+    export let onUnderlineChange: (underline: boolean) => void = () => {};
+    export let onTextAlignChange: (align: 'left' | 'center' | 'right') => void = () => {};
+    export let onTextPaddingChange: (padding: number) => void = () => {};
+    export let onTextColorChange: (color: string) => void = () => {};
+    
+    // Callback functions for frame properties
+    export let onFrameLabelChange: (label: string) => void = () => {};
+    
+    // Callback functions for frame label text properties
+    export let onFrameLabelFontSizeChange: (size: number) => void = () => {};
+    export let onFrameLabelFontFamilyChange: (family: string) => void = () => {};
+    export let onFrameLabelTextAlignChange: (align: 'left' | 'center' | 'right') => void = () => {};
+    export let onFrameLabelTextColorChange: (color: string) => void = () => {};
+    export let onFrameLabelFontWeightChange: (weight: 'normal' | 'bold') => void = () => {};
+    export let onFrameLabelFontStyleChange: (style: 'normal' | 'italic') => void = () => {};
+    export let onFrameLabelUnderlineChange: (underline: boolean) => void = () => {};
+    export let onFrameLabelBackgroundColorChange: (color: string) => void = () => {};
+    
+    // Callback functions for textbox box properties
+    export let onTextboxBoxFillChange: (color: string) => void = () => {};
+    export let onTextboxBoxStrokeChange: (color: string) => void = () => {};
+    export let onTextboxBoxStrokeWidthChange: (width: number) => void = () => {};
+    export let onTextboxBoxStrokeTypeChange: (type: 'solid' | 'dashed' | 'dotted') => void = () => {};
+    
+    // Callback functions for text stroke properties (stroke on the text itself)
+    export let onTextStrokeColorChange: (color: string) => void = () => {};
+    export let onTextStrokeWidthChange: (width: number) => void = () => {};
+    
+    // Callback functions for image properties
+    export let onImageUrlLoad: (url: string) => void = () => {};
+    export let onImageSourceChange: () => void = () => {};
+    
+    // Callback for capture action (captures screenshot and fires onObjectClick)
+    export let onCapture: (() => void) | null = null;
+
+    // Callback for "Convert to Widget" action (serializes frame + children, emits to host)
+    export let onConvertToWidget: (() => void) | null = null;
+
+    // Callback: fires when the user clicks the linked widget badge to open widget details
+    export let onWidgetClick: ((widgetId: string) => void) | null = null;
+
+    // Callback: fires when the user renames a widget from the Props Panel
+    export let onWidgetRename: ((widgetId: string, newName: string) => void) | null = null;
+
+    // Callback: fires when the user requests a screenshot refresh for the linked widget
+    export let onRefreshScreenshot: ((widgetId: string) => void) | null = null;
+
+    // Widget name resolver: given a widgetId, returns the widget name (or null)
+    export let getWidgetName: ((widgetId: string) => string | null) | null = null;
+    /** Returns false when the linked widget was deleted or moved off this canvas. */
+    export let isWidgetKnown: ((widgetId: string) => boolean) | null = null;
+    /** Remove the selected orphaned widget shape from the canvas. */
+    export let onRemoveOrphanedShape: (() => void) | null = null;
+    
+    // Callback functions for layer ordering
+    export let onBringToFront: () => void = () => {};
+    export let onBringForward: () => void = () => {};
+    export let onSendBackward: () => void = () => {};
+    export let onSendToBack: () => void = () => {};
+
+    // Callback functions for alignment
+    // Single object → aligns to canvas edges; multiple objects → aligns to each other
+    export let onAlignLeft: () => void = () => {};
+    export let onAlignCenterH: () => void = () => {};
+    export let onAlignRight: () => void = () => {};
+    export let onAlignTop: () => void = () => {};
+    export let onAlignMiddleV: () => void = () => {};
+    export let onAlignBottom: () => void = () => {};
+
+    // Callback functions for dimensions
+    export let onWidthChange: (width: number) => void = () => {};
+    export let onHeightChange: (height: number) => void = () => {};
+
+    const wireframeColorValues = ['#000000', '#555555', '#999999', '#CCCCCC', '#FFFFFF'];
+
+    // Derived properties from selected object
+    $: objectType = selectedObject?.type ?? 'None';
+    $: customType = selectedObject?._customType ?? null;
+    $: isFrame = customType === 'frame' || objectType === 'frame';
+    // WidgetShape is a Rect subclass with _customType === 'image'
+    // isImagePlaceholder: when no image loaded yet (_hasImage is false)
+    $: isImagePlaceholder = customType === 'image' && !selectedObject?._hasImage;
+    // isRect excludes WidgetShape (which has _customType === 'image')
+    $: isRect = objectType === 'rect' && !isFrame && customType !== 'image';
+    $: isTextbox = objectType === 'textbox';
+    $: isPath = objectType === 'path' && !customType;
+    $: isArrow = objectType === 'path' && customType === 'arrow';
+    $: isTriangle = objectType === 'path' && customType === 'triangle';
+    // Library shapes whose cornerRadiusMode is 'none' (circle, heart) should NOT show the slider
+    $: libraryCornerRadiusMode = (selectedObject as any)?._cornerRadiusMode ?? null;
+    $: isLibraryShape = objectType === 'path' && customType === 'libraryShape' && libraryCornerRadiusMode !== 'none';
+    $: isCircle = objectType === 'circle';
+    $: isEllipse = objectType === 'ellipse';
+    $: isGroup = objectType === 'group';
+    $: isActiveSelection = objectType === 'activeSelection' || objectType === 'activeselection';
+    // FrameShape objects have type === 'FrameShape', not 'group', so isGroup is always false for them.
+    // isMultiSelect is only true for plain Groups and ActiveSelections (not Frames).
+    $: isMultiSelect = (isGroup && !isFrame) || isActiveSelection;
+    $: isLine = objectType === 'line';
+    $: isImage = objectType === 'image' || customType === 'image';
+    // Widget link: true when the selected object has already been converted to a widget
+    $: hasWidgetId = !!selectedObject?._widgetId;
+    $: widgetId = selectedObject?._widgetId ?? null;
+    $: isWidgetImage = !!selectedObject?._isWidgetImage;
+    $: isPendingWidgetLink = !!selectedObject?._pendingWidgetLink;
+    $: isDuplicating = !!selectedObject?._isDuplicating;
+    $: isConverting = !!selectedObject?._isConverting;
+    $: showWidgetLoader = isPendingWidgetLink || isDuplicating || isConverting;
+    $: resolvedWidgetName = (widgetId && getWidgetName) ? getWidgetName(widgetId) : null;
+    $: isOrphanedWidgetShape = !!(
+        widgetId
+        && hasWidgetId
+        && isWidgetKnown
+        && !isWidgetKnown(widgetId)
+    );
+
+    let widgetRenameValue = '';
+
+    // Children count for containers (frames exclude the background rect, groups/selections count all)
+    $: childrenCount = getChildrenCount(selectedObject);
+    function getChildrenCount(obj: any): number | null {
+        if (!obj) return null;
+        if (obj._customType === 'frame' && obj.getObjects) {
+            return obj.getObjects().filter((child: any) => !child._isFrameBackground).length;
+        }
+        if ((obj.type === 'group' || obj.type === 'activeSelection' || obj.type === 'activeselection') && obj.getObjects) {
+            return obj.getObjects().length;
+        }
+        return null;
+    }
+    
+    // Check if selection/group contains textboxes or frames (for showing Text Properties section).
+    // Explicitly exclude Frames: Frame children should not drive the Text Properties section.
+    $: hasTextboxInSelection = isMultiSelect && !isFrame && selectedObject?.getObjects?.()?.some((obj: any) => 
+        obj.type === 'textbox' || obj._customType === 'frame'
+    );
+    
+    // Has certain properties
+    // For Frames: hasFill/hasStroke is always true (background rect has fill/stroke)
+    $: hasStroke = selectedObject && ('stroke' in selectedObject || isFrame);
+    // Plain Drawing paths (isPath) are now included so users can set fill color on freehand shapes.
+    // Arrows and lines remain excluded (they are stroke-only by nature).
+    $: hasFill = selectedObject && ('fill' in selectedObject || isFrame) && !isLine && !isArrow;
+    
+    // Get display name for object type
+    $: displayType = getDisplayType(selectedObject);
+    
+    function getDisplayType(obj: any): string {
+        if (!obj) return 'None';
+        if (obj._isWidgetImage) return 'Widget';
+        if (obj._customType === 'frame') return 'Frame';
+        if (obj._customType === 'arrow') return 'Arrow';
+        if (obj._customType === 'triangle') return 'Triangle';
+        if (obj._customType === 'image' || obj.type === 'image') return 'Image';
+        // Library shapes: derive a readable name from _shapeKey (e.g. 'arrow-right' → 'Arrow Right')
+        // Fall back to 'Custom Shape (Drawing)' if _shapeKey is missing (old saves).
+        if (obj._customType === 'libraryShape') {
+            if (obj._shapeKey) {
+                const name = (obj._shapeKey as string)
+                    .split('-')
+                    .map((w: string) => w.charAt(0).toUpperCase() + w.slice(1))
+                    .join(' ');
+                return `${name} (Drawing)`;
+            }
+            return 'Custom Shape (Drawing)';
+        }
+        const typeMap: Record<string, string> = {
+            'rect': 'Rectangle',
+            'circle': 'Circle',
+            'ellipse': 'Ellipse',
+            'triangle': 'Triangle',
+            'textbox': 'Text',
+            'path': 'Drawing',
+            'line': 'Line',
+            'group': 'Group',
+            'activeSelection': 'Selection',
+            'activeselection': 'Selection'
+        };
+        return typeMap[obj.type] || obj.type;
+    }
+    
+    // Get current values from selected object
+    // For Frames (Group-based), read fill/stroke from custom properties (_frameFill, _frameStroke)
+    // because the actual fill/stroke is on the background Rect child, not the Group itself
+    $: currentFill = isFrame ? (selectedObject?._frameFill ?? '#FFFFFF') : (selectedObject?.fill ?? '#FFFFFF');
+    // Fill opacity is stored as custom property _fillOpacity (0-1), display as percentage
+    $: currentFillOpacity = Math.round((selectedObject?._fillOpacity ?? 1) * 100);
+    $: currentStroke = isFrame ? (selectedObject?._frameStroke ?? '#000000') : (selectedObject?.stroke ?? '#000000');
+    $: currentStrokeWidth = isFrame ? (selectedObject?._frameStrokeWidth ?? 1) : (selectedObject?.strokeWidth ?? 1);
+    // Corner roundness is stored as percentage (0-100%) in _cornerRoundness for all objects
+    // 100% = perfect circle (for square shapes)
+    $: currentRoundness = selectedObject?._cornerRoundness ?? 0;
+    $: currentTriangleRoundness = selectedObject?._cornerRoundness ?? 0;
+    $: currentOpacity = Math.round((selectedObject?.opacity ?? 1) * 100);
+    $: currentBackgroundColor = selectedObject?.backgroundColor || 'transparent';
+    $: currentBackgroundOpacity = Math.round((selectedObject?._backgroundOpacity ?? 1) * 100);
+    // For Frames, stroke dash is stored on _frameStrokeDashArray (the background Rect's
+    // strokeDashArray is on a child, not the Group itself, so reading it directly is unreliable).
+    $: currentStrokeType = getStrokeType(
+        isFrame
+            ? (selectedObject as any)?._frameStrokeDashArray
+            : selectedObject?.strokeDashArray
+    );
+    
+    // Text properties - for groups, get from first textbox
+    $: firstTextboxInGroup = (selectedObject?.type === 'group' || selectedObject?.type === 'activeSelection' || selectedObject?.type === 'activeselection') 
+        ? selectedObject?.getObjects?.()?.find((obj: any) => obj.type === 'textbox') 
+        : null;
+    $: currentFontSize = firstTextboxInGroup?.fontSize ?? selectedObject?.fontSize ?? 28;
+    $: currentFontFamily = firstTextboxInGroup?.fontFamily ?? selectedObject?.fontFamily ?? 'Arial';
+    $: currentFontWeight = firstTextboxInGroup?.fontWeight ?? selectedObject?.fontWeight ?? 'normal';
+    $: currentFontStyle = firstTextboxInGroup?.fontStyle ?? selectedObject?.fontStyle ?? 'normal';
+    $: currentUnderline = firstTextboxInGroup?.underline ?? selectedObject?.underline ?? false;
+    $: currentTextAlign = firstTextboxInGroup?.textAlign ?? selectedObject?.textAlign ?? 'left';
+    $: currentTextPadding = firstTextboxInGroup?._textPadding ?? selectedObject?._textPadding ?? 0;
+    
+    // Frame label properties (using new custom properties)
+    $: currentFrameLabel = selectedObject?._labelText ?? 'Frame';
+    $: frameLabelFontSize = selectedObject?._labelFontSize ?? 16;
+    $: frameLabelFontFamily = selectedObject?._labelFontFamily ?? 'Arial';
+    $: frameLabelTextAlign = selectedObject?._labelTextAlign ?? 'left';
+    $: frameLabelTextColor = selectedObject?._labelColor ?? '#000000';
+    $: frameLabelFontWeight = selectedObject?._labelFontWeight ?? 'normal';
+    $: frameLabelFontStyle = selectedObject?._labelFontStyle ?? 'normal';
+    $: frameLabelUnderline = selectedObject?._labelUnderline ?? false;
+    $: frameLabelBackgroundColor = selectedObject?._labelBackgroundColor ?? '#ffffff';
+    
+    // Text stroke properties (stroke on the text itself - Fabric's native stroke)
+    $: textStrokeColor = selectedObject?.stroke ?? '#000000';
+    // Show 0px when stroke is null/undefined (no visible stroke)
+    $: textStrokeWidth = selectedObject?.stroke ? (selectedObject?.strokeWidth ?? 1) : 0;
+    
+    // Textbox box properties
+    $: textboxBoxFill = selectedObject?.backgroundColor ?? 'transparent';
+    // Box fill opacity: show 0% when backgroundColor is effectively invisible
+    // (transparent, unset, or rgba with alpha=0 like 'rgba(255,255,255,0)')
+    $: textboxBoxFillIsInvisible = !textboxBoxFill
+        || textboxBoxFill === 'transparent'
+        || /rgba\(\s*\d+\s*,\s*\d+\s*,\s*\d+\s*,\s*0\s*\)/.test(textboxBoxFill);
+    $: textboxBoxFillOpacity = textboxBoxFillIsInvisible ? 0 : currentFillOpacity;
+    // Box stroke uses custom properties (_boxStroke, _boxStrokeWidth, _boxStrokeDashArray)
+    $: textboxBoxStroke = selectedObject?._boxStroke ?? '#000000';
+    $: textboxBoxStrokeWidth = selectedObject?._boxStrokeWidth ?? 0;
+    $: textboxBoxStrokeType = getStrokeType(selectedObject?._boxStrokeDashArray);
+    
+    // Image properties (WidgetShape is a Rect subclass)
+    $: imageFilename = selectedObject?._originalFilename ?? '';
+    $: imageUrl = selectedObject?._imageUrl ?? '';
+    // hasLoadedImage: when _hasImage is true (image data loaded into WidgetShape)
+    $: hasLoadedImage = isImage && selectedObject?._hasImage;
+    
+    // URL input state
+    let imageUrlInput = '';
+    
+    function getStrokeType(dashArray: number[] | null | undefined): 'solid' | 'dashed' | 'dotted' {
+        if (!dashArray || dashArray.length === 0) return 'solid';
+        if (dashArray[0] >= 8) return 'dashed';
+        return 'dotted';
+    }
+    
+    function handleFrameLabelInput(e: Event) {
+        const input = e.target as HTMLInputElement;
+        onFrameLabelChange(input.value);
+    }
+
+    // ── Dimensions (real size at 100% zoom) ──
+    // Fabric stores width/height as the "natural" dimensions; scaleX/scaleY multiply them.
+    // For Ellipse: Fabric uses rx/ry (radii), so displayed diameter = 2 * rx * scaleX.
+    $: objScaleX = selectedObject?.scaleX ?? 1;
+    $: objScaleY = selectedObject?.scaleY ?? 1;
+    $: rawWidth = selectedObject?.type === 'ellipse'
+        ? (selectedObject?.rx ?? 0) * 2
+        : (selectedObject?.width ?? 0);
+    $: rawHeight = selectedObject?.type === 'ellipse'
+        ? (selectedObject?.ry ?? 0) * 2
+        : (selectedObject?.height ?? 0);
+    $: displayWidth = Math.round(rawWidth * objScaleX);
+    $: displayHeight = Math.round(rawHeight * objScaleY);
+    // Forced lock: shapes created with _lockAspectRatio (hexagon, circle, etc.) cannot be unlocked
+    $: forcedLock = !!(selectedObject as any)?._forceLockAspectRatio;
+    // Current lock state from the object (may have been toggled by user)
+    $: dimensionLocked = !!(selectedObject as any)?._lockAspectRatio;
+
+    // User toggle state (reset when selected object changes)
+    let userDimensionLock = false;
+    let prevSelectedId: any = null;
+    $: {
+        const curId = selectedObject;
+        if (curId !== prevSelectedId) {
+            prevSelectedId = curId;
+            userDimensionLock = dimensionLocked;
+        }
+    }
+    $: effectiveDimensionLock = forcedLock || userDimensionLock;
+
+    function handleWidthInput(e: Event) {
+        const input = e.target as HTMLInputElement;
+        const newWidth = Math.max(1, parseInt(input.value, 10) || 1);
+        if (effectiveDimensionLock && displayWidth > 0) {
+            const ratio = newWidth / displayWidth;
+            const newHeight = Math.round(displayHeight * ratio);
+            onWidthChange(newWidth);
+            onHeightChange(newHeight);
+        } else {
+            onWidthChange(newWidth);
+        }
+    }
+
+    function handleHeightInput(e: Event) {
+        const input = e.target as HTMLInputElement;
+        const newHeight = Math.max(1, parseInt(input.value, 10) || 1);
+        if (effectiveDimensionLock && displayHeight > 0) {
+            const ratio = newHeight / displayHeight;
+            const newWidth = Math.round(displayWidth * ratio);
+            onHeightChange(newHeight);
+            onWidthChange(newWidth);
+        } else {
+            onHeightChange(newHeight);
+        }
+    }
+
+    function toggleDimensionLock() {
+        if (forcedLock) return;
+        userDimensionLock = !userDimensionLock;
+        if (selectedObject) {
+            (selectedObject as any)._lockAspectRatio = userDimensionLock;
+            if (userDimensionLock) {
+                selectedObject.setControlsVisibility?.({ ml: false, mr: false, mt: false, mb: false });
+            } else {
+                selectedObject.setControlsVisibility?.({ ml: true, mr: true, mt: true, mb: true });
+            }
+            selectedObject.canvas?.requestRenderAll?.();
+        }
+    }
+
+    // Panel minimize/maximize state: minimized shows only essential props
+    let isMinimized = true;
+
+    // Overlay-scrollbar: negative right margin = parent's horizontal padding so the
+    // scrollbar sits on top of content rather than pushing it inward.
+    // Only applied when the container actually overflows (needs scrolling).
+    let needsScroll = false;
+    let scrollableEl: HTMLElement | undefined;
+    const panelPaddingX = 12; // must match px-3 (12px) on .props-panel-el
+
+    function checkOverflow() {
+        if (!scrollableEl) return;
+        needsScroll = scrollableEl.scrollHeight > scrollableEl.clientHeight;
+    }
+
+    /** Svelte action: watches the scrollable container for overflow changes. */
+    function overlayScrollbar(node: HTMLElement) {
+        scrollableEl = node;
+        const ro = new ResizeObserver(checkOverflow);
+        ro.observe(node);
+        checkOverflow();
+        return { destroy() { ro.disconnect(); } };
+    }
+
+    // Re-check when selected object or minimized state changes (DOM may reflow)
+    $: selectedObject, isMinimized, setTimeout(checkOverflow, 50);
+</script>
+
+<div class="{className ? className + ' ' : ''}props-panel-el px-3 py-3" style={style}>
+    
+    <!-- Sticky Header: Selected Object Type + Children count + minimize toggle -->
+    <div class="props-panel-sticky-header">
+        <div class="header">
+            <span class="header-label">SHAPE:</span>
+            <span class="header-type" title={displayType}>{displayType}</span>
+            <Tooltip text={isMinimized ? 'Show all properties' : 'Show fewer properties'}>
+                <button
+                    class="minimize-toggle-bt"
+                    onclick={() => isMinimized = !isMinimized}
+                >
+                    {#if isMinimized}
+                        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                            <polyline points="6 9 12 15 18 9"/>
+                        </svg>
+                    {:else}
+                        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                            <polyline points="18 15 12 9 6 15"/>
+                        </svg>
+                    {/if}
+                </button>
+            </Tooltip>
+        </div>
+        
+        <!-- Children count: shown for frames, groups, and multi-selections -->
+        {#if childrenCount !== null}
+            <div class="children-count-row">
+                <svg class="children-icon" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                    <rect x="2" y="7" width="8" height="8" rx="1"/>
+                    <rect x="14" y="3" width="8" height="8" rx="1"/>
+                    <rect x="14" y="13" width="8" height="8" rx="1"/>
+                    <line x1="10" y1="11" x2="14" y2="7"/>
+                    <line x1="10" y1="11" x2="14" y2="17"/>
+                </svg>
+                <span class="prop-label">Children: {childrenCount}</span>
+            </div>
+        {/if}
+    </div>
+
+    <!-- Scrollable content: all property sections -->
+    <div class="props-panel-scrollable" use:overlayScrollbar style={needsScroll ? `margin-right: -${panelPaddingX}px` : ''}>
+    <div class="props-panel-scrollable-content flex flex-col gap-4">
+    <!-- Actions section: Capture, Convert to Widget, Layer Order (first section, no top border) -->
+    {#if onCapture || onConvertToWidget || selectedObject}
+        <div class="section-divider no-top-border">
+            <span class="section-title">Actions</span>
+        </div>
+        {#if onCapture && !(onConvertToWidget && selectedObject)}
+            <div class="prop-section">
+                <span class="prop-label">Create Preview</span>
+                <div class="capture-section">
+                    <button class="capture-btn" onclick={onCapture}>
+                        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                            <rect x="3" y="3" width="18" height="18" rx="2" ry="2"/>
+                            <circle cx="8.5" cy="8.5" r="1.5"/>
+                            <polyline points="21 15 16 10 5 21"/>
+                        </svg>
+                        Capture
+                    </button>
+                </div>
+            </div>
+        {/if}
+        {#if onConvertToWidget && selectedObject}
+            <div class="prop-section">
+                {#if showWidgetLoader}
+                    <!-- Loading state: duplicate/convert in progress -->
+                    <span class="prop-label">Widget Linked</span>
+                    <div class="widget-linking-loader">
+                        <div class="widget-linking-spinner"></div>
+                        <span class="widget-linking-text">{isConverting ? 'Converting...' : isDuplicating ? 'Duplicating...' : 'Linking widget...'}</span>
+                    </div>
+                {:else if hasWidgetId}
+                    {#if isOrphanedWidgetShape}
+                        <span class="prop-label">Unlinked Widget Shape</span>
+                        <p class="widget-orphan-notice">
+                            This shape points to a widget that was deleted or moved to another canvas.
+                            Remove it from the canvas to avoid confusion.
+                        </p>
+                        <span class="widget-id-label" title={widgetId}>{widgetId}</span>
+                        {#if onRemoveOrphanedShape}
+                            <button
+                                class="remove-orphan-btn"
+                                type="button"
+                                onclick={() => onRemoveOrphanedShape?.()}
+                            >
+                                Remove from canvas
+                            </button>
+                        {/if}
+                    {:else}
+                    <span class="prop-label">Widget Linked</span>
+                    <div class="widget-linked-section">
+                        <input
+                            class="widget-rename-input"
+                            type="text"
+                            value={resolvedWidgetName || ''}
+                            placeholder="Widget name"
+                            onfocus={(e) => { widgetRenameValue = e.currentTarget.value; }}
+                            onblur={(e) => {
+                                const val = e.currentTarget.value.trim();
+                                if (val && val !== resolvedWidgetName && onWidgetRename && widgetId) {
+                                    onWidgetRename(widgetId, val);
+                                }
+                            }}
+                            onkeydown={(e) => {
+                                if (e.key === 'Enter') { e.currentTarget.blur(); }
+                                if (e.key === 'Escape') { e.currentTarget.value = resolvedWidgetName || ''; e.currentTarget.blur(); }
+                            }}
+                        />
+                    </div>
+                    <!-- svelte-ignore a11y_click_events_have_key_events -->
+                    <!-- svelte-ignore a11y_no_static_element_interactions -->
+                    <span
+                        class="widget-id-label"
+                        class:widget-id-clickable={!!onWidgetClick}
+                        onclick={() => onWidgetClick && widgetId && onWidgetClick(widgetId)}
+                        title={onWidgetClick ? 'Click to open Widget Details' : widgetId}
+                    >
+                        {#if onWidgetClick}
+                            <svg class="widget-id-link-icon" width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
+                                <path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"/>
+                                <path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"/>
+                            </svg>
+                        {/if}
+                        {widgetId}
+                    </span>
+                    {#if onRefreshScreenshot && widgetId}
+                        <button
+                            class="refresh-screenshot-btn"
+                            title="Refresh widget preview"
+                            onclick={() => onRefreshScreenshot && widgetId && onRefreshScreenshot(widgetId)}
+                        >
+                            <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
+                                <polyline points="23 4 23 10 17 10"/>
+                                <polyline points="1 20 1 14 7 14"/>
+                                <path d="M3.51 9a9 9 0 0 1 14.85-3.36L23 10M1 14l4.64 4.36A9 9 0 0 0 20.49 15"/>
+                            </svg>
+                            Refresh Widget Preview
+                        </button>
+                    {/if}
+                    {/if}
+                {:else}
+                    <span class="prop-label">Convert to Widget</span>
+                    <div class="capture-section">
+                        <button class="convert-widget-btn" onclick={onConvertToWidget}>
+                            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                                <rect x="2" y="2" width="20" height="20" rx="2.18" ry="2.18"/>
+                                <line x1="7" y1="2" x2="7" y2="22"/>
+                                <line x1="17" y1="2" x2="17" y2="22"/>
+                                <line x1="2" y1="12" x2="22" y2="12"/>
+                            </svg>
+                            CONVERT TO WIDGET
+                        </button>
+                    </div>
+                {/if}
+            </div>
+        {/if}
+        {#if selectedObject && !isMinimized}
+            <div class="prop-section layer-order-section">
+                <span class="prop-label">Layer Order</span>
+                <div class="layer-order-buttons">
+                    <!-- svelte-ignore a11y-click-events-have-key-events -->
+                    <!-- svelte-ignore a11y-no-static-element-interactions -->
+                    <button class="layer-btn" onclick={onBringToFront} title="Bring to Front">
+                        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
+                            <polyline points="17 11 12 6 7 11"/>
+                            <polyline points="17 18 12 13 7 18"/>
+                        </svg>
+                        <span class="layer-btn-label">Front</span>
+                    </button>
+                    <button class="layer-btn" onclick={onBringForward} title="Bring Forward">
+                        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
+                            <polyline points="18 15 12 9 6 15"/>
+                        </svg>
+                        <span class="layer-btn-label">Up</span>
+                    </button>
+                    <button class="layer-btn" onclick={onSendBackward} title="Send Backward">
+                        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
+                            <polyline points="6 9 12 15 18 9"/>
+                        </svg>
+                        <span class="layer-btn-label">Down</span>
+                    </button>
+                    <button class="layer-btn" onclick={onSendToBack} title="Send to Back">
+                        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
+                            <polyline points="7 13 12 18 17 13"/>
+                            <polyline points="7 6 12 11 17 6"/>
+                        </svg>
+                        <span class="layer-btn-label">Back</span>
+                    </button>
+                </div>
+            </div>
+        {/if}
+
+        <!-- Alignment: visible in both minimized and expanded modes -->
+        {#if selectedObject}
+            <div class="prop-section align-section">
+                <span class="prop-label">Align</span>
+                <div class="align-buttons">
+                    <button class="align-btn" onclick={onAlignLeft} title="Align Left">
+                        <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
+                            <rect x="3" y="4" width="2" height="16" rx="1"/>
+                            <rect x="7" y="7" width="10" height="4" rx="1"/>
+                            <rect x="7" y="13" width="14" height="4" rx="1"/>
+                        </svg>
+                    </button>
+                    <button class="align-btn" onclick={onAlignCenterH} title="Align Center (horizontal)">
+                        <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
+                            <rect x="11" y="3" width="2" height="18" rx="1"/>
+                            <rect x="5" y="7" width="14" height="4" rx="1"/>
+                            <rect x="8" y="13" width="8" height="4" rx="1"/>
+                        </svg>
+                    </button>
+                    <button class="align-btn" onclick={onAlignRight} title="Align Right">
+                        <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
+                            <rect x="19" y="4" width="2" height="16" rx="1"/>
+                            <rect x="7" y="7" width="10" height="4" rx="1"/>
+                            <rect x="3" y="13" width="14" height="4" rx="1"/>
+                        </svg>
+                    </button>
+                    <button class="align-btn" onclick={onAlignTop} title="Align Top">
+                        <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
+                            <rect x="4" y="3" width="16" height="2" rx="1"/>
+                            <rect x="7" y="7" width="4" height="10" rx="1"/>
+                            <rect x="13" y="7" width="4" height="14" rx="1"/>
+                        </svg>
+                    </button>
+                    <button class="align-btn" onclick={onAlignMiddleV} title="Align Middle (vertical)">
+                        <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
+                            <rect x="3" y="11" width="18" height="2" rx="1"/>
+                            <rect x="7" y="5" width="4" height="14" rx="1"/>
+                            <rect x="13" y="8" width="4" height="8" rx="1"/>
+                        </svg>
+                    </button>
+                    <button class="align-btn" onclick={onAlignBottom} title="Align Bottom">
+                        <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
+                            <rect x="4" y="19" width="16" height="2" rx="1"/>
+                            <rect x="7" y="7" width="4" height="10" rx="1"/>
+                            <rect x="13" y="3" width="4" height="14" rx="1"/>
+                        </svg>
+                    </button>
+                </div>
+            </div>
+        {/if}
+    {/if}
+
+    <!-- ==================== IMAGE SOURCE (always visible for image shapes, even in reduced mode) ==================== -->
+    {#if !isWidgetImage && (isImagePlaceholder || hasLoadedImage)}
+        <div class="prop-section image-source-section">
+            <span class="section-title-inline">IMAGE SOURCE</span>
+            <!-- File source option -->
+            <div class="source-row">
+                <span class="source-label">File:</span>
+                {#if hasLoadedImage && imageFilename && !imageUrl}
+                    <span class="source-value" title={imageFilename}>{imageFilename}</span>
+                {:else if isImagePlaceholder}
+                    <span class="source-placeholder">No file selected</span>
+                {:else}
+                    <span class="source-placeholder">-</span>
+                {/if}
+            </div>
+            <button class="source-btn" onclick={onImageSourceChange}>
+                {hasLoadedImage ? 'Change File' : 'Choose File'}
+            </button>
+            
+            <!-- URL source option -->
+            <div class="source-row url-row">
+                <span class="source-label">URL:</span>
+                {#if hasLoadedImage && imageUrl}
+                    <span class="source-value url" title={imageUrl}>{imageUrl}</span>
+                {:else}
+                    <div class="url-input-row">
+                        <input 
+                            type="text" 
+                            class="url-input"
+                            placeholder="Paste URL..."
+                            bind:value={imageUrlInput}
+                            onkeydown={(e) => {
+                                if (e.key === 'Enter' && imageUrlInput.trim()) {
+                                    onImageUrlLoad(imageUrlInput.trim());
+                                    imageUrlInput = '';
+                                }
+                            }}
+                        />
+                        <button 
+                            class="url-load-btn"
+                            onclick={() => {
+                                if (imageUrlInput.trim()) {
+                                    onImageUrlLoad(imageUrlInput.trim());
+                                    imageUrlInput = '';
+                                }
+                            }}
+                        >
+                            Load
+                        </button>
+                    </div>
+                {/if}
+            </div>
+            {#if hasLoadedImage && imageUrl}
+                <div class="url-input-row">
+                    <input 
+                        type="text" 
+                        class="url-input"
+                        placeholder="New URL..."
+                        bind:value={imageUrlInput}
+                        onkeydown={(e) => {
+                            if (e.key === 'Enter' && imageUrlInput.trim()) {
+                                onImageUrlLoad(imageUrlInput.trim());
+                                imageUrlInput = '';
+                            }
+                        }}
+                    />
+                    <button 
+                        class="url-load-btn"
+                        onclick={() => {
+                            if (imageUrlInput.trim()) {
+                                onImageUrlLoad(imageUrlInput.trim());
+                                imageUrlInput = '';
+                            }
+                        }}
+                    >
+                        Load
+                    </button>
+                </div>
+            {/if}
+        </div>
+    {/if}
+
+    <!-- ==================== GENERAL PROPERTIES (all objects) ==================== -->
+    <div class="section-divider">
+        <span class="section-title">General Properties</span>
+    </div>
+
+    <!-- Dimensions: width × height in real canvas pixels -->
+    <div class="prop-section dimensions-section">
+        <span class="prop-label dimensions-label">Dimensions</span>
+        <div class="dimensions-row">
+            <input
+                class="dimension-input"
+                type="number"
+                min="1"
+                value={displayWidth}
+                oninput={handleWidthInput}
+                aria-label="Width"
+            />
+            <!-- Lock / unlock button between inputs -->
+            <Tooltip text={forcedLock ? 'Proportions locked (shape constraint)' : effectiveDimensionLock ? 'Unlock proportions' : 'Lock proportions'}>
+            <!-- svelte-ignore a11y-click-events-have-key-events -->
+            <!-- svelte-ignore a11y-no-static-element-interactions -->
+            <span
+                class="dimension-lock-bt {effectiveDimensionLock ? 'locked' : 'unlocked'} {forcedLock ? 'force-locked' : ''}"
+                onclick={toggleDimensionLock}
+            >
+                {#if effectiveDimensionLock}
+                    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                        <rect x="3" y="11" width="18" height="11" rx="2" ry="2"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/>
+                    </svg>
+                {:else}
+                    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                        <rect x="3" y="11" width="18" height="11" rx="2" ry="2"/><path d="M7 11V7a5 5 0 0 1 9.9-1"/>
+                    </svg>
+                {/if}
+            </span>
+            </Tooltip>
+            <input
+                class="dimension-input"
+                type="number"
+                min="1"
+                value={displayHeight}
+                oninput={handleHeightInput}
+                aria-label="Height"
+            />
+            <span class="dimension-unit">px</span>
+        </div>
+    </div>
+
+    <!-- Opacity: always visible, including wireframe mode.
+         Useful for hiding/showing objects without deleting them. -->
+    <div class="prop-section">
+        <SliderUnitIC
+            label="Opacity"
+            value={currentOpacity}
+            min={0}
+            max={100}
+            step={1}
+            unit="%"
+            onChange={onOpacityChange}
+        />
+    </div>
+
+    <!-- Corner Roundness: in General Properties, visible even when minimized -->
+    {#if !isWidgetImage && (isRect || isTriangle || isPath || isImagePlaceholder || hasLoadedImage || isTextbox || isFrame || isMultiSelect || isLibraryShape)}
+        <SliderUnitIC
+            label="Corner Roundness"
+            value={isTriangle ? currentTriangleRoundness : currentRoundness}
+            min={0}
+            max={100}
+            step={1}
+            unit="%"
+            onChange={onRoundnessChange}
+        />
+    {/if}
+
+    <!-- ==================== WIDGET BACKGROUND COLOR (visible behind transparent widget areas) ==================== -->
+    {#if isWidgetImage}
+        {#if wireframeMode || !isMinimized}
+        <div class="prop-section widget-bg-section">
+            <ColorIC
+                label="Background Color"
+                value={currentBackgroundColor === 'transparent' ? '#FFFFFF' : currentBackgroundColor}
+                onChange={onBackgroundColorChange}
+                showPicker={!wireframeMode}
+                presets={wireframeMode ? wireframeColorValues : null}
+            />
+        </div>
+        {/if}
+        <SliderUnitIC
+            label="Background Opacity"
+            value={currentBackgroundOpacity}
+            min={0}
+            max={100}
+            step={1}
+            unit="%"
+            onChange={onBackgroundOpacityChange}
+        />
+    {/if}
+
+    <!-- ==================== TEXTBOX BOX PROPERTIES (in General Properties) ==================== -->
+    {#if isTextbox}
+        {#if !wireframeMode}
+        <ColorIC
+            label="Fill Color"
+            value={textboxBoxFill === 'transparent' ? '#FFFFFF' : textboxBoxFill}
+            onChange={onTextboxBoxFillChange}
+        />
+        {/if}
+
+        <SliderUnitIC
+            label="Fill Opacity"
+            value={textboxBoxFillOpacity}
+            min={0}
+            max={100}
+            step={1}
+            unit="%"
+            onChange={onFillOpacityChange}
+        />
+
+        {#if !wireframeMode}
+        <ColorIC
+            label="Stroke Color"
+            value={textboxBoxStroke || '#000000'}
+            onChange={onTextboxBoxStrokeChange}
+        />
+        {/if}
+
+        <SliderUnitIC
+            label="Stroke Width"
+            value={textboxBoxStrokeWidth}
+            min={0}
+            max={5}
+            step={0.5}
+            unit="px"
+            onChange={onTextboxBoxStrokeWidthChange}
+        />
+
+        {#if !isMinimized}
+        <div class="prop-section">
+            <span class="prop-label">Stroke Type</span>
+            <div class="stroke-type-buttons">
+                <button 
+                    class="stroke-type-btn {textboxBoxStrokeType === 'solid' ? 'active' : ''}"
+                    onclick={() => onTextboxBoxStrokeTypeChange('solid')}
+                >
+                    <span class="stroke-preview solid"></span>
+                    Solid
+                </button>
+                <button 
+                    class="stroke-type-btn {textboxBoxStrokeType === 'dashed' ? 'active' : ''}"
+                    onclick={() => onTextboxBoxStrokeTypeChange('dashed')}
+                >
+                    <span class="stroke-preview dashed"></span>
+                    Dashed
+                </button>
+                <button 
+                    class="stroke-type-btn {textboxBoxStrokeType === 'dotted' ? 'active' : ''}"
+                    onclick={() => onTextboxBoxStrokeTypeChange('dotted')}
+                >
+                    <span class="stroke-preview dotted"></span>
+                    Dotted
+                </button>
+            </div>
+        </div>
+        {/if}
+    {/if}
+
+    <!-- ==================== TEXT PROPERTIES ==================== -->
+    {#if isTextbox}
+        <div class="section-divider">
+            <span class="section-title">Text Properties</span>
+        </div>
+        
+        <SliderUnitIC
+            label="Font Size"
+            value={currentFontSize}
+            min={8}
+            max={200}
+            step={1}
+            unit="px"
+            onChange={onFontSizeChange}
+        />
+        
+        <SliderUnitIC
+            label="Text Padding"
+            value={currentTextPadding}
+            min={0}
+            max={50}
+            step={1}
+            unit="px"
+            onChange={onTextPaddingChange}
+        />
+        
+        {#if !wireframeMode}
+        <ColorIC
+            label="Text Color"
+            value={currentFill || '#000000'}
+            onChange={onTextColorChange}
+        />
+        
+        <!-- Text Stroke Properties -->
+        <ColorIC
+            label="Text Stroke Color"
+            value={textStrokeColor || '#000000'}
+            onChange={onTextStrokeColorChange}
+        />
+        {/if}
+        
+        <SliderUnitIC
+            label="Text Stroke Width"
+            value={textStrokeWidth}
+            min={0}
+            max={5}
+            step={0.5}
+            unit="px"
+            onChange={onTextStrokeWidthChange}
+        />
+
+        {#if !isMinimized}
+        <FontSelectorIC
+            value={currentFontFamily}
+            onChange={onFontFamilyChange}
+        />
+        
+        <TextStyleIC
+            fontWeight={currentFontWeight}
+            fontStyle={currentFontStyle}
+            underline={currentUnderline}
+            onFontWeightChange={onFontWeightChange}
+            onFontStyleChange={onFontStyleChange}
+            onUnderlineChange={onUnderlineChange}
+        />
+        
+        <TextAlignIC
+            value={currentTextAlign}
+            onChange={onTextAlignChange}
+        />
+        {/if}
+    {/if}
+
+    <!-- ==================== FRAME: Text / Description (always visible for frames) ==================== -->
+    {#if isFrame}
+        <div class="section-divider">
+            <span class="section-title">Label Properties</span>
+        </div>
+        
+        <div class="prop-section">
+            <span class="prop-label">Text/Description</span>
+            <input 
+                type="text" 
+                value={currentFrameLabel}
+                oninput={handleFrameLabelInput}
+                class="text-input"
+                placeholder="Describe this frame (used as widget description & prompt context)"
+            />
+        </div>
+    {/if}
+
+    <!-- ==================== FRAME: Label styling (expanded only) ==================== -->
+    {#if !isMinimized && isFrame}
+        <SliderUnitIC
+            label="Font Size"
+            value={frameLabelFontSize}
+            min={8}
+            max={72}
+            step={1}
+            unit="px"
+            onChange={onFrameLabelFontSizeChange}
+        />
+        
+        <FontSelectorIC
+            value={frameLabelFontFamily}
+            onChange={onFrameLabelFontFamilyChange}
+        />
+        
+        <TextStyleIC
+            fontWeight={frameLabelFontWeight}
+            fontStyle={frameLabelFontStyle}
+            underline={frameLabelUnderline}
+            onFontWeightChange={onFrameLabelFontWeightChange}
+            onFontStyleChange={onFrameLabelFontStyleChange}
+            onUnderlineChange={onFrameLabelUnderlineChange}
+        />
+        
+        <TextAlignIC
+            value={frameLabelTextAlign}
+            onChange={onFrameLabelTextAlignChange}
+        />
+        
+        {#if !wireframeMode}
+        <ColorIC
+            label="Text Color"
+            value={frameLabelTextColor}
+            onChange={onFrameLabelTextColorChange}
+        />
+        
+        <ColorIC
+            label="Text Background"
+            value={frameLabelBackgroundColor}
+            onChange={onFrameLabelBackgroundColorChange}
+        />
+        {/if}
+
+        <div class="section-divider">
+            <span class="section-title">Box Properties</span>
+        </div>
+        
+    {/if}
+
+    <!-- ==================== FILL COLOR (shapes only, not path/text/arrow/image, or multi-select) ==================== -->
+    {#if !isWidgetImage && ((hasFill && !isTextbox && !isImage) || isMultiSelect)}
+        {#if wireframeMode || !isMinimized}
+        <div class="prop-section">
+            <ColorIC
+                label="Fill Color"
+                value={currentFill || '#FFFFFF'}
+                onChange={onFillChange}
+                showPicker={!wireframeMode}
+                presets={wireframeMode ? wireframeColorValues : null}
+            />
+        </div>
+        {/if}
+        
+        <!-- Fill Opacity stays visible even when minimized -->
+        <SliderUnitIC
+            label="Fill Opacity"
+            value={currentFillOpacity}
+            min={0}
+            max={100}
+            step={1}
+            unit="%"
+            onChange={onFillOpacityChange}
+        />
+    {/if}
+
+    <!-- ==================== STROKE PROPERTIES ==================== -->
+    {#if !isWidgetImage && ((hasStroke && !isTextbox) || isMultiSelect)}
+        {#if wireframeMode || !isMinimized}
+        <div class="prop-section">
+            <ColorIC
+                label="Stroke Color"
+                value={currentStroke || '#000000'}
+                onChange={onStrokeChange}
+                showPicker={!wireframeMode}
+                presets={wireframeMode ? wireframeColorValues : null}
+            />
+        </div>
+        {/if}
+
+        <!-- Stroke Width stays visible even when minimized -->
+        <SliderUnitIC
+            label="Stroke Width"
+            value={currentStrokeWidth}
+            min={0}
+            max={20}
+            step={1}
+            unit="px"
+            onChange={onStrokeWidthChange}
+        />
+
+        {#if !isMinimized}
+        <div class="prop-section">
+            <span class="prop-label">Stroke Type</span>
+            <div class="stroke-type-buttons">
+                <button 
+                    class="stroke-type-btn {currentStrokeType === 'solid' ? 'active' : ''}"
+                    onclick={() => onStrokeTypeChange('solid')}
+                >
+                    <span class="stroke-preview solid"></span>
+                    Solid
+                </button>
+                <button 
+                    class="stroke-type-btn {currentStrokeType === 'dashed' ? 'active' : ''}"
+                    onclick={() => onStrokeTypeChange('dashed')}
+                >
+                    <span class="stroke-preview dashed"></span>
+                    Dashed
+                </button>
+                <button 
+                    class="stroke-type-btn {currentStrokeType === 'dotted' ? 'active' : ''}"
+                    onclick={() => onStrokeTypeChange('dotted')}
+                >
+                    <span class="stroke-preview dotted"></span>
+                    Dotted
+                </button>
+            </div>
+        </div>
+        {/if}
+    {/if}
+
+    <!-- ==================== TEXT PROPERTIES (for selection/group containing textboxes or frames) ==================== -->
+    {#if !isMinimized && hasTextboxInSelection}
+        <div class="section-divider">
+            <span class="section-title">Text Properties</span>
+        </div>
+        
+        <SliderUnitIC
+            label="Font Size"
+            value={currentFontSize}
+            min={8}
+            max={200}
+            step={1}
+            unit="px"
+            onChange={onFontSizeChange}
+        />
+
+        <FontSelectorIC
+            value={currentFontFamily}
+            onChange={onFontFamilyChange}
+        />
+        
+        <TextStyleIC
+            fontWeight={currentFontWeight}
+            fontStyle={currentFontStyle}
+            underline={currentUnderline}
+            onFontWeightChange={onFontWeightChange}
+            onFontStyleChange={onFontStyleChange}
+            onUnderlineChange={onUnderlineChange}
+        />
+        
+        <TextAlignIC
+            value={currentTextAlign}
+            onChange={onTextAlignChange}
+        />
+        
+        <SliderUnitIC
+            label="Text Padding"
+            value={currentTextPadding}
+            min={0}
+            max={50}
+            step={1}
+            unit="px"
+            onChange={onTextPaddingChange}
+        />
+        
+        <ColorIC
+            label="Text Color"
+            value={currentFill || '#000000'}
+            onChange={onTextColorChange}
+        />
+        
+        <!-- Text Stroke Properties for Selection/Group -->
+        <ColorIC
+            label="Text Stroke Color"
+            value={textStrokeColor || '#000000'}
+            onChange={onTextStrokeColorChange}
+        />
+        
+        <SliderUnitIC
+            label="Text Stroke Width"
+            value={textStrokeWidth}
+            min={0}
+            max={5}
+            step={0.5}
+            unit="px"
+            onChange={onTextStrokeWidthChange}
+        />
+    {/if}
+    </div><!-- end props-panel-scrollable-content -->
+    </div><!-- end props-panel-scrollable -->
+</div>
+
+<style>
+    .props-panel-el {
+        --accent: #314F2F;
+        --accent-hover: #1f3520;
+        --accent-light: rgba(49, 79, 47, 0.08);
+        width: 248px;
+        max-height: calc(100% - 80px);
+        overflow: hidden;
+        display: flex;
+        flex-direction: column;
+        border: 2px solid #e5e7eb;
+        position: absolute;
+        top: 8px;
+        right: 8px;
+        background: white;
+        border-radius: 8px;
+        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+    }
+    
+    /* Sticky header: stays at top, never scrolls */
+    .props-panel-sticky-header {
+        flex-shrink: 0;
+        display: flex;
+        flex-direction: column;
+        gap: 0;
+        padding-bottom: 0;
+        border-bottom: 2px solid #e5e7eb;
+    }
+    
+    /* Scrollable content area for all property sections.
+       margin-right is set dynamically via style= when content overflows,
+       pulling the scrollbar over the parent's right padding zone. */
+    .props-panel-scrollable {
+        flex: 1;
+        overflow-y: auto;
+        overflow-x: hidden;
+        display: flex;
+        flex-direction: column;
+        gap: 12px;
+        padding: 0;
+        scrollbar-width: thin;
+        scrollbar-color: rgba(0,0,0,0.15) transparent;
+    }
+    .props-panel-scrollable::-webkit-scrollbar {
+        width: 4px;
+    }
+    .props-panel-scrollable::-webkit-scrollbar-track {
+        background: transparent;
+    }
+    .props-panel-scrollable::-webkit-scrollbar-thumb {
+        background: rgba(0,0,0,0.15);
+        border-radius: 4px;
+    }
+    .props-panel-scrollable::-webkit-scrollbar-thumb:hover {
+        background: rgba(0,0,0,0.25);
+    }
+    
+    .header {
+        display: flex;
+        gap: 4px;
+        padding-bottom: 8px;
+        align-items: baseline;
+    }
+
+    .minimize-toggle-bt {
+        margin-left: auto;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: 22px;
+        height: 22px;
+        background: transparent;
+        border: 1px solid transparent;
+        border-radius: 4px;
+        cursor: pointer;
+        color: #6b7280;
+        padding: 0;
+        flex-shrink: 0;
+        transition: all 0.15s ease;
+        align-self: center;
+    }
+    .minimize-toggle-bt:hover {
+        background: #f3f4f6;
+        border-color: #d1d5db;
+        color: #374151;
+    }
+    
+    .header-label {
+        font-size: 12px;
+        font-weight: 700;
+        color: #6b7280;
+        letter-spacing: 0.5px;
+    }
+    
+    .header-type {
+        font-size: 13px;
+        font-weight: 600;
+        color: #111827;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+    }
+    
+    .children-count-row {
+        display: flex;
+        align-items: center;
+        gap: 6px;
+        padding: 6px 0 8px 0;
+        border-top: 1px solid #e5e7eb;
+    }
+
+    .children-icon {
+        color: #6b7280;
+        flex-shrink: 0;
+    }
+
+    .capture-section {
+        display: flex;
+        justify-content: center;
+    }
+
+    .layer-order-section {
+        padding: 4px 8px;
+    }
+
+    .layer-order-buttons {
+        display: flex;
+        gap: 4px;
+        justify-content: center;
+    }
+
+    .layer-btn {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        gap: 2px;
+        padding: 6px 10px;
+        background: #f3f4f6;
+        border: 1px solid #d1d5db;
+        border-radius: 6px;
+        cursor: pointer;
+        color: #374151;
+        font-size: 10px;
+        line-height: 1;
+        transition: all 0.15s ease;
+        flex: 1;
+    }
+
+    .layer-btn:hover {
+        background: #e5e7eb;
+        border-color: #9ca3af;
+        color: #111827;
+    }
+
+    .layer-btn:active {
+        background: #d1d5db;
+        transform: scale(0.95);
+    }
+
+    .layer-btn-label {
+        font-size: 9px;
+        font-weight: 500;
+        text-transform: uppercase;
+        letter-spacing: 0.3px;
+    }
+
+    /* Alignment buttons */
+    .align-section {
+        padding: 4px 8px;
+    }
+
+    .align-buttons {
+        display: flex;
+        gap: 3px;
+        justify-content: center;
+    }
+
+    .align-btn {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: 30px;
+        height: 30px;
+        background: #f3f4f6;
+        border: 1px solid #d1d5db;
+        border-radius: 6px;
+        cursor: pointer;
+        color: #374151;
+        transition: all 0.15s ease;
+        flex: 1;
+        padding: 0;
+    }
+
+    .align-btn:hover {
+        background: #e5e7eb;
+        border-color: #9ca3af;
+        color: #111827;
+    }
+
+    .align-btn:active {
+        background: #d1d5db;
+        transform: scale(0.95);
+    }
+    
+    .capture-btn {
+        display: flex;
+        align-items: center;
+        gap: 6px;
+        padding: 8px 16px;
+        background: var(--accent);
+        color: white;
+        border: none;
+        border-radius: 6px;
+        font-size: 13px;
+        font-weight: 600;
+        cursor: pointer;
+        transition: all 0.2s ease;
+        box-shadow: 0 2px 4px rgba(59, 130, 246, 0.3);
+    }
+    
+    .capture-btn:hover {
+        background: var(--accent-hover);
+        box-shadow: 0 4px 8px rgba(49, 79, 47, 0.4);
+        transform: translateY(-1px);
+    }
+    
+    .capture-btn:active {
+        transform: translateY(0);
+        box-shadow: 0 2px 4px rgba(59, 130, 246, 0.3);
+    }
+    
+    .capture-btn svg {
+        width: 16px;
+        height: 16px;
+    }
+
+    .convert-widget-btn {
+        display: flex;
+        align-items: center;
+        gap: 6px;
+        padding: 8px 16px;
+        background: var(--accent);
+        color: white;
+        border: none;
+        border-radius: 6px;
+        font-size: 13px;
+        font-weight: 600;
+        cursor: pointer;
+        transition: all 0.2s ease;
+        box-shadow: 0 2px 4px rgba(49, 79, 47, 0.3);
+    }
+
+    .convert-widget-btn:hover {
+        background: var(--accent-hover);
+        box-shadow: 0 4px 8px rgba(49, 79, 47, 0.4);
+        transform: translateY(-1px);
+    }
+
+    .convert-widget-btn:active {
+        transform: translateY(0);
+        box-shadow: 0 2px 4px rgba(49, 79, 47, 0.3);
+    }
+
+    .convert-widget-btn svg {
+        width: 16px;
+        height: 16px;
+    }
+
+    .widget-linked-section {
+        display: flex;
+        align-items: center;
+        gap: 4px;
+    }
+    .widget-linking-loader {
+        display: flex;
+        align-items: center;
+        gap: 8px;
+        padding: 6px 8px;
+        border-radius: 6px;
+        background: #f0fdf4;
+        border: 1px solid #bbf7d0;
+    }
+    .widget-linking-spinner {
+        width: 14px;
+        height: 14px;
+        border: 2px solid #bbf7d0;
+        border-top-color: #166534;
+        border-radius: 50%;
+        animation: widget-spin 0.6s linear infinite;
+        flex-shrink: 0;
+    }
+    @keyframes widget-spin {
+        to { transform: rotate(360deg); }
+    }
+    .widget-linking-text {
+        font-size: 11px;
+        color: #166534;
+        font-weight: 500;
+    }
+
+    .widget-linked-badge {
+        display: flex;
+        align-items: center;
+        gap: 6px;
+        padding: 6px 12px;
+        background: #f0fdf4;
+        border: 1px solid #86efac;
+        border-radius: 6px;
+        font-size: 12px;
+        font-weight: 500;
+        color: #166534;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        max-width: 100%;
+    }
+
+    .widget-linked-badge svg {
+        flex-shrink: 0;
+        width: 14px;
+        height: 14px;
+        stroke: #166534;
+    }
+
+    .widget-rename-input {
+        width: 100%;
+        padding: 5px 8px;
+        border: 1px solid #d1d5db;
+        border-radius: 6px;
+        font-size: 12px;
+        font-weight: 500;
+        color: #166534;
+        background: #f9fafb;
+        outline: none;
+        min-width: 0;
+    }
+    .widget-rename-input:focus {
+        border-color: #86efac;
+        background: #f0fdf4;
+        box-shadow: 0 0 0 2px rgba(74, 222, 128, 0.2);
+    }
+
+    .widget-id-label {
+        display: flex;
+        align-items: center;
+        gap: 4px;
+        font-size: 11px;
+        color: #9ca3af;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        margin-top: 2px;
+        padding: 1px 2px;
+        border-radius: 3px;
+        transition: background-color 0.15s, color 0.15s;
+    }
+    .widget-id-clickable {
+        cursor: pointer;
+        color: #166534;
+    }
+    .widget-id-clickable:hover {
+        color: #15803d;
+        background-color: #dcfce7;
+    }
+    :global(.widget-id-link-icon) {
+        flex-shrink: 0;
+    }
+
+    .refresh-screenshot-btn {
+        display: flex;
+        align-items: center;
+        gap: 5px;
+        margin-top: 4px;
+        padding: 3px 8px;
+        font-size: 11px;
+        font-weight: 500;
+        color: #6b7280;
+        background: #f3f4f6;
+        border: 1px solid #e5e7eb;
+        border-radius: 4px;
+        cursor: pointer;
+        transition: all 0.15s;
+        width: fit-content;
+    }
+    .refresh-screenshot-btn:hover {
+        color: #166534;
+        background: #dcfce7;
+        border-color: #86efac;
+    }
+    .refresh-screenshot-btn:active {
+        transform: scale(0.97);
+    }
+    .refresh-screenshot-btn svg {
+        flex-shrink: 0;
+    }
+
+    .widget-orphan-notice {
+        font-size: 11px;
+        line-height: 1.45;
+        color: #b45309;
+        background: #fffbeb;
+        border: 1px solid #fcd34d;
+        border-radius: 6px;
+        padding: 8px;
+        margin: 4px 0 8px;
+    }
+
+    .remove-orphan-btn {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: 100%;
+        margin-top: 8px;
+        padding: 8px 10px;
+        font-size: 11px;
+        font-weight: 600;
+        color: #991b1b;
+        background: #fef2f2;
+        border: 1px solid #fecaca;
+        border-radius: 6px;
+        cursor: pointer;
+    }
+
+    .remove-orphan-btn:hover {
+        background: #fee2e2;
+    }
+    
+    .section-divider {
+        padding-top: 8px;
+        border-top: 2px solid #d1d5db;
+        margin-top: 4px;
+    }
+
+    /* First section in scrollable area: no top border/padding */
+    .section-divider.no-top-border {
+        border-top: none;
+        margin-top: 0;
+        padding-top: 0;
+    }
+    
+    .section-title {
+        font-size: 11px;
+        font-weight: 700;
+        color: #374151;
+        text-transform: uppercase;
+        letter-spacing: 0.5px;
+        text-decoration: underline;
+    }
+    
+    .section-title-inline {
+        font-size: 11px;
+        font-weight: 700;
+        color: #6b7280;
+        text-transform: uppercase;
+        letter-spacing: 0.5px;
+        margin-bottom: 4px;
+    }
+    
+    .prop-section {
+        display: flex;
+        flex-direction: column;
+        gap: 6px;
+    }
+
+    /* ── Dimensions row (width × lock × height px) ── */
+    .dimensions-section {
+        gap: 4px;
+    }
+    .dimensions-label {
+        margin-bottom: 0;
+    }
+    .dimensions-row {
+        display: flex;
+        align-items: center;
+        gap: 4px;
+    }
+    .dimension-input {
+        width: 60px;
+        padding: 4px 6px;
+        border: 1px solid #d1d5db;
+        border-radius: 6px;
+        font-size: 12px;
+        text-align: center;
+        color: #374151;
+        background: white;
+        outline: none;
+        -moz-appearance: textfield;
+    }
+    .dimension-input::-webkit-outer-spin-button,
+    .dimension-input::-webkit-inner-spin-button {
+        -webkit-appearance: none;
+        margin: 0;
+    }
+    .dimension-input:focus {
+        border-color: var(--accent);
+    }
+    .dimension-lock-bt {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: 24px;
+        height: 24px;
+        border-radius: 4px;
+        cursor: pointer;
+        color: #9ca3af;
+        flex-shrink: 0;
+        transition: color 0.15s, background 0.15s;
+    }
+    .dimension-lock-bt:hover {
+        background: #f3f4f6;
+        color: #374151;
+    }
+    .dimension-lock-bt.locked {
+        color: var(--accent);
+    }
+    .dimension-lock-bt.locked:hover {
+        color: var(--accent-hover);
+        background: var(--accent-light);
+    }
+    .dimension-lock-bt.force-locked {
+        opacity: 0.6;
+        cursor: default;
+    }
+    .dimension-lock-bt.force-locked:hover {
+        background: transparent;
+    }
+    .dimension-unit {
+        font-size: 11px;
+        color: #9ca3af;
+        flex-shrink: 0;
+    }
+    
+    .prop-label {
+        font-size: 11px;
+        font-weight: 600;
+        color: #6b7280;
+        text-transform: uppercase;
+        letter-spacing: 0.5px;
+    }
+    
+    .stroke-type-buttons {
+        display: flex;
+        flex-direction: column;
+        gap: 4px;
+    }
+    
+    .stroke-type-btn {
+        display: flex;
+        align-items: center;
+        gap: 8px;
+        padding: 6px 8px;
+        border: 1px solid #d1d5db;
+        border-radius: 4px;
+        background: white;
+        font-size: 11px;
+        cursor: pointer;
+        transition: all 0.15s ease;
+    }
+    
+    .stroke-type-btn:hover {
+        background: #f3f4f6;
+    }
+    
+    .stroke-type-btn.active {
+        background: var(--accent, #314F2F);
+        color: white;
+        border-color: var(--accent, #314F2F);
+        box-shadow: none;
+        outline: none;
+    }
+    .stroke-type-btn:focus-visible {
+        outline: none;
+        box-shadow: 0 0 0 2px var(--accent, #314F2F);
+    }
+    
+    .stroke-preview {
+        width: 24px;
+        height: 2px;
+        background: currentColor;
+    }
+    
+    .stroke-preview.dashed {
+        background: repeating-linear-gradient(
+            90deg,
+            currentColor 0px,
+            currentColor 6px,
+            transparent 6px,
+            transparent 10px
+        );
+    }
+    
+    .stroke-preview.dotted {
+        background: repeating-linear-gradient(
+            90deg,
+            currentColor 0px,
+            currentColor 2px,
+            transparent 2px,
+            transparent 5px
+        );
+    }
+    
+    /* Text input */
+    .text-input {
+        width: 100%;
+        padding: 6px 8px;
+        border: 1px solid #d1d5db;
+        border-radius: 4px;
+        font-size: 12px;
+    }
+    
+    .text-input:focus {
+        outline: none;
+        border-color: #3b82f6;
+    }
+    
+    /* Image Source Section */
+    .image-source-section {
+        gap: 8px;
+    }
+    
+    .source-row {
+        display: flex;
+        gap: 6px;
+        align-items: center;
+    }
+    
+    .source-row.url-row {
+        flex-wrap: wrap;
+    }
+    
+    .source-label {
+        font-size: 11px;
+        font-weight: 600;
+        color: #6b7280;
+        white-space: nowrap;
+        min-width: 32px;
+    }
+    
+    .source-value {
+        font-size: 11px;
+        color: #111827;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        max-width: 130px;
+    }
+    
+    .source-value.url {
+        color: #3b82f6;
+    }
+    
+    .source-placeholder {
+        font-size: 11px;
+        color: #9ca3af;
+        font-style: italic;
+    }
+    
+    .source-btn {
+        width: 100%;
+        padding: 6px 12px;
+        background: #f3f4f6;
+        color: #374151;
+        border: 1px solid #d1d5db;
+        border-radius: 4px;
+        font-size: 11px;
+        font-weight: 500;
+        cursor: pointer;
+        transition: all 0.15s ease;
+    }
+    
+    .source-btn:hover {
+        background: #e5e7eb;
+    }
+    
+    /* URL input */
+    .url-input-row {
+        display: flex;
+        gap: 6px;
+        width: 100%;
+    }
+    
+    .url-input {
+        flex: 1;
+        padding: 6px 8px;
+        border: 1px solid #d1d5db;
+        border-radius: 4px;
+        font-size: 11px;
+        min-width: 0;
+    }
+    
+    .url-input:focus {
+        outline: none;
+        border-color: var(--accent);
+    }
+    
+    .url-load-btn {
+        padding: 6px 12px;
+        background: var(--accent);
+        color: white;
+        border: none;
+        border-radius: 4px;
+        font-size: 11px;
+        font-weight: 500;
+        cursor: pointer;
+        transition: background 0.15s ease;
+        white-space: nowrap;
+    }
+    
+    .url-load-btn:hover {
+        background: var(--accent-hover);
+    }
+
+</style>