@widgetic/canvas 0.5.6 → 0.5.9

package/dist/canvas/Canvas.svelte

@@ -95,7 +95,7 @@
         const propsToRegister = [
             '_objectId', '_customType',
             '_cornerRoundness', '_cornerRoundnessPixels', '_fillOpacity',
-            '_shapeKey', '_cornerRadiusMode',
+            '_shapeKey', '_cornerRadiusMode', '_iconFill',
             '_boxStroke', '_boxStrokeWidth', '_boxStrokeDashArray',
             '_boxCornerRadius', '_boxFill',
             '_textPadding', '_textStrokeColor', '_textStrokeWidth',
@@ -153,6 +153,12 @@
     // (white fill, dark stroke) on all newly created objects
     export let wireframeMode: boolean = true;
 
+    // Extra canvas chrome (undo/redo/lock, frame, image, shape library).
+    // Default off for the sketch MVP. Same pattern as wireframeMode: keep the code, hide the UI.
+    export let advancedFeatures: boolean = false;
+    /** When true and advanced is on, Frame/Image/Video stay on the toolbar. Default true. */
+    export let mediaBtsOnBar: boolean = true;
+
     // Callback fired once when Fabric canvas is fully initialized and ready
     export let onReady: (() => void) | null = null;
 
@@ -278,7 +284,7 @@
     const GRID_COLOR = 'rgba(0, 0, 0, 0.1)'; // Light gray dots
 
     // Tools state
-    type ToolName = 'select' | 'erase' | 'draw' | 'arrow' | 'text' | 'rect' | 'circle' | 'circle-true' | 'triangle' | 'frame' | 'pan' | 'image' | 'library-shape';
+    type ToolName = 'select' | 'erase' | 'draw' | 'arrow' | 'text' | 'rect' | 'circle' | 'circle-true' | 'triangle' | 'frame' | 'pan' | 'image' | 'video' | 'library-shape';
     
     // Minimum size for image placeholder to fit UI text
     const MIN_IMAGE_PLACEHOLDER_WIDTH = 120;
@@ -645,6 +651,30 @@
         { children: any[]; bounds: { left: number; top: number; width: number; height: number } }
     >();
 
+    const STROKE_PAINT_SHAPE_KEYS = new Set(['cross', 'plus', 'minus', 'check']);
+    function paintsFillOnStroke(obj: any): boolean {
+        return !!obj && (obj._cornerRadiusMode === 'strokeRound' || STROKE_PAINT_SHAPE_KEYS.has(obj._shapeKey));
+    }
+
+    let videoRenderRaf = 0;
+    let videoPointerDown: { x: number; y: number; target: ImageShape; scene: { x: number; y: number } } | null = null;
+
+    function startVideoRenderLoop() {
+        if (videoRenderRaf) return;
+        const tick = () => {
+            videoRenderRaf = 0;
+            if (!canvas) return;
+            const playing = canvas.getObjects().some((obj: any) => {
+                const video = obj?._videoElement as HTMLVideoElement | undefined;
+                return obj?._customType === 'video' && video && !video.paused && !video.ended;
+            });
+            if (!playing) return;
+            canvas.requestRenderAll();
+            videoRenderRaf = requestAnimationFrame(tick);
+        };
+        videoRenderRaf = requestAnimationFrame(tick);
+    }
+
     /**
      * HELPER FUNCTIONS
      */
@@ -1149,6 +1179,37 @@
         };
     }
 
+    /** Screen-space box for any canvas object id (convert drafts use the grouped sketch). */
+    export function getObjectScreenRect(objectId: string): {
+        left: number;
+        top: number;
+        width: number;
+        height: number;
+        viewportLeft: number;
+        viewportTop: number;
+        viewportWidth: number;
+        viewportHeight: number;
+    } | null {
+        if (!canvas || !canvasEl || !objectId) return null;
+        const obj = canvas.getObjects().find((o: any) => o._objectId === objectId);
+        if (!obj) {
+            canvasLog('Canvas: getObjectScreenRect — no object for', objectId);
+            return null;
+        }
+        const bbox = obj.getBoundingRect();
+        const canvasRect = canvasEl.getBoundingClientRect();
+        return {
+            left: canvasRect.left + bbox.left,
+            top: canvasRect.top + bbox.top,
+            width: bbox.width,
+            height: bbox.height,
+            viewportLeft: canvasRect.left,
+            viewportTop: canvasRect.top,
+            viewportWidth: canvasRect.width,
+            viewportHeight: canvasRect.height,
+        };
+    }
+
     /**
      * Get the current image data URL of a widget shape on the canvas.
      * Returns the base64 data URL or null if the shape is not found or has no image.
@@ -1406,12 +1467,12 @@
     function getPanZoomPositionClass(position: string): string {
         canvasLog('getPanZoomPositionClass: ', position);
         const positions: Record<string, string> = {
-            'TL': 'top-4 left-4',
-            'TC': 'top-4 left-1/2 -translate-x-1/2',
-            'TR': 'top-4 right-4',
-            'BL': 'bottom-20 left-4',
-            'BC': 'bottom-20 left-1/2 -translate-x-1/2',
-            'BR': 'bottom-20 right-4'
+            'TL': 'absolute z-10 top-4 left-4',
+            'TC': 'absolute z-10 top-4 left-1/2 -translate-x-1/2',
+            'TR': 'absolute z-10 top-4 right-4',
+            'BL': 'absolute z-10 bottom-20 left-4',
+            'BC': 'absolute z-10 bottom-20 left-1/2 -translate-x-1/2',
+            'BR': 'absolute z-10 bottom-20 right-4'
         };
         return positions[position] || positions['TL'];
     }
@@ -1447,6 +1508,10 @@
             // Let Fabric handle Shift+corner = proportional resize natively.
             // For _lockAspectRatio shapes, before:transform sets uniformScaling=true.
             (canvas as any).uniScaleKey = 'shiftKey';
+            // Free corner resize (not from center). Keep Alt off Fabric's centeredKey —
+            // Option is used for frame children, and a stuck altKey used to explode scales.
+            canvas.centeredScaling = false;
+            (canvas as any).centeredKey = null;
             
             // Set 'move' cursor as default hover cursor on ALL objects.
             // Set on both canvas level and prototype level for full coverage.
@@ -2056,8 +2121,10 @@
             let altKeyCurrentlyHeld = false;
             const trackAltKeyDown = (e: KeyboardEvent) => { if (e.altKey) altKeyCurrentlyHeld = true; };
             const trackAltKeyUp = (e: KeyboardEvent) => { if (!e.altKey) altKeyCurrentlyHeld = false; };
+            const trackAltKeyBlur = () => { altKeyCurrentlyHeld = false; };
             window.addEventListener('keydown', trackAltKeyDown);
             window.addEventListener('keyup', trackAltKeyUp);
+            window.addEventListener('blur', trackAltKeyBlur);
 
             // ── Custom right-click context menu ───────────────────────────────────
             // Prevent the browser default context menu on the canvas and show ours.
@@ -2081,12 +2148,17 @@
                 const transform = opt.transform;
                 if (!transform) return;
                 
-                // Disable Alt/Option-triggered centered scaling for Frame objects.
-                // Alt is used for "preserve children" resize on frames, not center-scale.
-                // The centeredKey check happens BEFORE before:transform, so we can't prevent it.
-                // Instead, override the transform origin from 'center' back to the correct corner.
-                if (isFrameShape(transform.target) && transform.originX === 'center' && transform.originY === 'center') {
-                    // Map corner handle to the correct opposite origin
+                // Only remap when Fabric forced origin=center on an object that is NOT
+                // natively center-origin (library icons / groups already use origin center).
+                // Remapping those made corner resize look like Alt-deflate.
+                const targetObj = transform.target as any;
+                const nativeCenterOrigin =
+                    targetObj?.originX === 'center' && targetObj?.originY === 'center';
+                if (
+                    !nativeCenterOrigin &&
+                    transform.originX === 'center' &&
+                    transform.originY === 'center'
+                ) {
                     const cornerOriginMap: Record<string, { x: string; y: string }> = {
                         tl: { x: 'right', y: 'bottom' },
                         tr: { x: 'left', y: 'bottom' },
@@ -2102,7 +2174,7 @@
                     if (origin) {
                         transform.originX = origin.x;
                         transform.originY = origin.y;
-                        canvasLog('Frame: overrode centered scaling origin for corner', corner, '→', origin);
+                        canvasLog('Canvas: overrode accidental centered origin for corner', corner, '→', origin);
                     }
                 }
                 
@@ -2131,13 +2203,19 @@
                         // Store the original corners BEFORE any transformation
                         // This ensures we have accurate positions to work with
                         const target = scalingTarget as any;
-                        const w = target.width * target.scaleX;
-                        const h = target.height * target.scaleY;
+                        const w = (target.width ?? 0) * (target.scaleX ?? 1);
+                        const h = (target.height ?? 0) * (target.scaleY ?? 1);
+                        const originX = target.originX ?? 'left';
+                        const originY = target.originY ?? 'top';
+                        const left = target.left ?? 0;
+                        const top = target.top ?? 0;
+                        const tlX = originX === 'center' ? left - w / 2 : originX === 'right' ? left - w : left;
+                        const tlY = originY === 'center' ? top - h / 2 : originY === 'bottom' ? top - h : top;
                         target._originalCorners = {
-                            tl: { x: target.left, y: target.top },
-                            tr: { x: target.left + w, y: target.top },
-                            bl: { x: target.left, y: target.top + h },
-                            br: { x: target.left + w, y: target.top + h }
+                            tl: { x: tlX, y: tlY },
+                            tr: { x: tlX + w, y: tlY },
+                            bl: { x: tlX, y: tlY + h },
+                            br: { x: tlX + w, y: tlY + h }
                         };
                         
                         // For frames: store original children metrics for Alt/Option key resize.
@@ -2369,6 +2447,20 @@
                             (obj as any)._lockAspectRatio = true;
                             (obj as any)._forceLockAspectRatio = true;
                         }
+                        if (shapeDef.cornerRadiusMode === 'strokeRound') {
+                            const bg = (obj as any).backgroundColor;
+                            if (!bg || bg === 'transparent') {
+                                const fromFill = typeof obj.fill === 'string' && obj.fill && obj.fill !== 'transparent' ? obj.fill : '#ffffff';
+                                obj.set({ fill: '', backgroundColor: fromFill });
+                                (obj as any)._iconFill = fromFill;
+                            } else if (obj.fill && obj.fill !== '') {
+                                obj.set({ fill: '' });
+                            }
+                            if (!obj.stroke) {
+                                obj.set({ stroke: '#374151', strokeWidth: obj.strokeWidth || 3, strokeUniform: true });
+                            }
+                            obj.dirty = true;
+                        }
                     }
                 }
 
@@ -2809,7 +2901,12 @@
                 // Override PencilBrush round-cap defaults so the Corner Roundness slider
                 // has a visible effect. At 0% the drawing appears sharp (square caps, miter
                 // joins); moving the slider progressively rounds caps and joins.
-                path.set({ strokeLineCap: 'square', strokeLineJoin: 'miter' });
+                path.set({
+                    strokeLineCap: 'square',
+                    strokeLineJoin: 'miter',
+                    fill: 'transparent',
+                    _fillOpacity: 0,
+                });
                 checkAndAddNewShapeToFrame(path);
                 takeHistorySnapshot();
             });
@@ -3073,6 +3170,10 @@
                     isAltHeld = false;
                 }
             };
+            const handleGlobalAltBlur = () => {
+                isAltHeld = false;
+            };
+            window.addEventListener('blur', handleGlobalAltBlur);
             
             // Shared helper: delete whatever is currently active on the canvas.
             // Used by both the Delete key handler and the Cut (Ctrl+X) handler.
@@ -3416,7 +3517,7 @@
                 // Fill opacity (percentage stored separately from the baked rgba fill value)
                 '_fillOpacity',
                 // Library shape metadata
-                '_shapeKey', '_cornerRadiusMode',
+                '_shapeKey', '_cornerRadiusMode', '_iconFill',
                 // Textbox box stroke and corner properties
                 '_boxStroke', '_boxStrokeWidth', '_boxStrokeDashArray', 
                 '_boxCornerRadius', '_boxFill',
@@ -4369,6 +4470,8 @@
             (canvas as any)._globalShiftKeyupHandler = handleGlobalShiftKeyup;
             (canvas as any)._globalAltKeydownHandler = handleGlobalAltKeydown;
             (canvas as any)._globalAltKeyupHandler = handleGlobalAltKeyup;
+            (canvas as any)._globalAltBlurHandler = handleGlobalAltBlur;
+            (canvas as any)._altTrackBlur = trackAltKeyBlur;
             (canvas as any)._deleteKeyHandler = handleDeleteKeydown;
             (canvas as any)._arrowKeyHandler = handleArrowKeydown;
             (canvas as any)._selectAllHandler = handleSelectAllKeydown;
@@ -4583,9 +4686,8 @@
                     exitGroupEdit(false);
                 }
                 canvasLog('Canvas: Selection cleared');
-                if (onNonWidgetSelected) {
-                    onNonWidgetSelected();
-                }
+                // Do not close Widget Details here — Fabric also clears selection when
+                // switching from widget A to widget B, which reopened the previous panel.
             };
             
             canvas.on('selection:created', handleSelectionCreated);
@@ -4646,9 +4748,47 @@
                     openFilePickerForPlaceholder(target);
                     return;
                 }
+                if ((target as any)._customType === 'video') {
+                    if ((target as ImageShape)._videoElement) {
+                        void (target as ImageShape).toggleVideoPlayback().then((ok) => {
+                            if (ok) startVideoRenderLoop();
+                        });
+                    } else {
+                        openFilePickerForPlaceholder(target);
+                    }
+                    return;
+                }
             };
             
             canvas.on('mouse:dblclick', handleDoubleClick);
+
+            canvas.on('mouse:down', (opt: any) => {
+                const target = opt?.target as ImageShape | undefined;
+                if (target?._customType === 'video' && target._videoElement && canvas) {
+                    videoPointerDown = {
+                        x: opt.e?.clientX ?? 0,
+                        y: opt.e?.clientY ?? 0,
+                        target,
+                        scene: canvas.getPointer(opt.e),
+                    };
+                } else {
+                    videoPointerDown = null;
+                }
+            });
+            canvas.on('mouse:up', (opt: any) => {
+                if (!videoPointerDown || !opt?.e) {
+                    videoPointerDown = null;
+                    return;
+                }
+                const dx = Math.abs((opt.e.clientX ?? 0) - videoPointerDown.x);
+                const dy = Math.abs((opt.e.clientY ?? 0) - videoPointerDown.y);
+                if (dx < 5 && dy < 5 && videoPointerDown.target.isVideoPlayBadgeHit(videoPointerDown.scene)) {
+                    void videoPointerDown.target.toggleVideoPlayback().then((ok) => {
+                        if (ok) startVideoRenderLoop();
+                    });
+                }
+                videoPointerDown = null;
+            });
             
             // ─── Frame label drag & cursor handlers ───
             // Handles hover cursor and click-drag on frame labels (including nested frames).
@@ -5190,8 +5330,43 @@
 
                     // Process each dropped file
                     Array.from(files).forEach((file) => {
-                        if (!file.type.startsWith('image/')) {
-                            canvasLog('Skipped non-image file:', file.name);
+                        const isVideo = file.type.startsWith('video/');
+                        if (!file.type.startsWith('image/') && !isVideo) {
+                            canvasLog('Skipped non-media file:', file.name);
+                            return;
+                        }
+
+                        if (isVideo) {
+                            const { video, objectUrl } = createVideoElementFromFile(file);
+                            capturePosterFromVideo(video).then((posterUrl) => {
+                                const maxWidth = canvas.width * 0.6;
+                                const maxHeight = canvas.height * 0.6;
+                                const tempImg = new Image();
+                                tempImg.onload = () => {
+                                    let width = tempImg.width;
+                                    let height = tempImg.height;
+                                    if (width > maxWidth || height > maxHeight) {
+                                        const scale = Math.min(maxWidth / width, maxHeight / height);
+                                        width *= scale;
+                                        height *= scale;
+                                    }
+                                    const videoShape = createImagePlaceholder({
+                                        left: dropX - width / 2,
+                                        top: dropY - height / 2,
+                                        width,
+                                        height,
+                                        mediaKind: 'video'
+                                    });
+                                    canvas.add(videoShape);
+                                    canvas.setActiveObject(videoShape);
+                                    attachVideoElementToShape(videoShape, video, objectUrl);
+                                    loadImageIntoShape(videoShape, posterUrl, file.name);
+                                    canvasLog('Video dropped on canvas:', file.name);
+                                };
+                                tempImg.src = posterUrl;
+                            }).catch((err) => {
+                                console.error('Failed to load dropped video:', err);
+                            });
                             return;
                         }
 
@@ -5383,6 +5558,10 @@
     });
 
     onDestroy(() => {
+        if (videoRenderRaf) {
+            cancelAnimationFrame(videoRenderRaf);
+            videoRenderRaf = 0;
+        }
         // CRITICAL: Notify the host to save canvas data BEFORE any cleanup.
         // This fires when Vite HMR rebuilds this component or the page navigates away.
         // At this point canvas is still valid — canvas.dispose() hasn't run yet.
@@ -5461,6 +5640,12 @@
         if (canvas && (canvas as any)._altTrackUp) {
             window.removeEventListener('keyup', (canvas as any)._altTrackUp);
         }
+        if (canvas && (canvas as any)._altTrackBlur) {
+            window.removeEventListener('blur', (canvas as any)._altTrackBlur);
+        }
+        if (canvas && (canvas as any)._globalAltBlurHandler) {
+            window.removeEventListener('blur', (canvas as any)._globalAltBlurHandler);
+        }
         if (canvas && (canvas as any)._contextMenuHandler && (canvas as any)._contextMenuTarget) {
             (canvas as any)._contextMenuTarget.removeEventListener('contextmenu', (canvas as any)._contextMenuHandler);
         }
@@ -6396,6 +6581,14 @@ function checkAndAddNewShapeToFrame(shape: any) {
         (shape as any)._shapeKey = shapeKey;
         (shape as any)._cornerRadiusMode = cornerRadiusMode;
         (shape as any)._cornerRoundness = 0;
+        if (cornerRadiusMode === 'strokeRound') {
+            const existingBg = (shape as any).backgroundColor;
+            shape.set({
+                fill: '',
+                backgroundColor: existingBg || '#ffffff',
+            });
+            (shape as any)._iconFill = '#ffffff';
+        }
         if (lockAspectRatio) {
             (shape as any)._lockAspectRatio = true;
             (shape as any)._forceLockAspectRatio = true;
@@ -6447,7 +6640,8 @@ function checkAndAddNewShapeToFrame(shape: any) {
                             top: pointer.y,
                             originX: 'left',
                             originY: 'top',
-                            fill: '#ffffff',
+                            fill: getLibraryShapeMeta(pendingLibraryShapeKey).cornerRadiusMode === 'strokeRound' ? '' : '#ffffff',
+                            backgroundColor: getLibraryShapeMeta(pendingLibraryShapeKey).cornerRadiusMode === 'strokeRound' ? '#ffffff' : undefined,
                             _fillOpacity: 1,
                             stroke: '#374151',
                             strokeWidth: 3,
@@ -7306,6 +7500,7 @@ function checkAndAddNewShapeToFrame(shape: any) {
         top: number;
         width: number;
         height: number;
+        mediaKind?: 'image' | 'video';
     }) {
         // Use ImageShape class for image placeholders. When converted to a widget,
         // the prototype is swapped to WidgetShape via upgradeToWidgetShape().
@@ -7328,7 +7523,7 @@ function checkAndAddNewShapeToFrame(shape: any) {
             minScaleLimit: 0.01
         }) as any;
 
-        imageShape._customType = 'image';
+        imageShape._customType = options.mediaKind === 'video' ? 'video' : 'image';
         imageShape._hasImage = false;
         imageShape._imageElement = null;
         imageShape._originalFilename = null;
@@ -7550,7 +7745,16 @@ function checkAndAddNewShapeToFrame(shape: any) {
      * Image Tool - Draw ImagePlaceholder on canvas
      */
     export function onSelectImageTool() {
-        setActiveTool('image', () => {
+        startMediaPlaceholderTool('image');
+    }
+
+    /** Video tool — same draw-to-place flow as Image, with a video placeholder and upload filter. */
+    export function onSelectVideoTool() {
+        startMediaPlaceholderTool('video');
+    }
+
+    function startMediaPlaceholderTool(kind: 'image' | 'video') {
+        setActiveTool(kind, () => {
             if (!canvas) {
                 return;
             }
@@ -7651,7 +7855,8 @@ function checkAndAddNewShapeToFrame(shape: any) {
                             left: finalBounds.left,
                             top: finalBounds.top,
                             width: finalBounds.width,
-                            height: finalBounds.height
+                            height: finalBounds.height,
+                            mediaKind: kind
                         });
 
                         canvas.add(placeholder);
@@ -7687,20 +7892,40 @@ function checkAndAddNewShapeToFrame(shape: any) {
      */
     function openFilePickerForPlaceholder(placeholder: any) {
         if (!canvas) return;
+        const isVideo = placeholder._customType === 'video';
         
         const fileInput = document.createElement('input');
         fileInput.type = 'file';
-        fileInput.accept = 'image/*';
+        fileInput.accept = isVideo ? 'video/*' : 'image/*';
         fileInput.style.display = 'none';
         
         fileInput.onchange = (event: Event) => {
             const target = event.target as HTMLInputElement;
             const file = target.files?.[0];
             
-            if (!file || !file.type.startsWith('image/')) {
+            if (!file) {
                 document.body.removeChild(fileInput);
                 return;
             }
+            if (isVideo && !file.type.startsWith('video/')) {
+                document.body.removeChild(fileInput);
+                return;
+            }
+            if (!isVideo && !file.type.startsWith('image/')) {
+                document.body.removeChild(fileInput);
+                return;
+            }
+
+            if (isVideo) {
+                bindVideoFileToShape(placeholder, file).then((posterUrl) => {
+                    replacePlaceholderWithImage(placeholder, posterUrl, file.name);
+                }).catch((err) => {
+                    console.error('Video poster capture failed', err);
+                }).finally(() => {
+                    if (fileInput.parentNode) document.body.removeChild(fileInput);
+                });
+                return;
+            }
             
             const reader = new FileReader();
             reader.onload = (e) => {
@@ -7717,6 +7942,59 @@ function checkAndAddNewShapeToFrame(shape: any) {
         fileInput.click();
     }
 
+    function createVideoElementFromFile(file: File): { video: HTMLVideoElement; objectUrl: string } {
+        const objectUrl = URL.createObjectURL(file);
+        const video = document.createElement('video');
+        video.muted = true;
+        video.loop = true;
+        video.playsInline = true;
+        video.preload = 'auto';
+        video.src = objectUrl;
+        return { video, objectUrl };
+    }
+
+    function capturePosterFromVideo(video: HTMLVideoElement): Promise<string> {
+        return new Promise((resolve, reject) => {
+            const onSeeked = () => {
+                try {
+                    const poster = document.createElement('canvas');
+                    poster.width = Math.max(1, video.videoWidth || 640);
+                    poster.height = Math.max(1, video.videoHeight || 360);
+                    poster.getContext('2d')?.drawImage(video, 0, 0, poster.width, poster.height);
+                    resolve(poster.toDataURL('image/jpeg', 0.85));
+                } catch (err) {
+                    reject(err);
+                }
+            };
+            video.onloadeddata = () => {
+                try {
+                    video.currentTime = Math.min(0.15, Number.isFinite(video.duration) ? video.duration * 0.1 : 0.15);
+                } catch (err) {
+                    reject(err);
+                }
+            };
+            video.onseeked = onSeeked;
+            video.onerror = () => reject(new Error('Could not load video'));
+        });
+    }
+
+    function attachVideoElementToShape(shape: any, video: HTMLVideoElement, objectUrl: string) {
+        if (shape._videoObjectUrl && shape._videoObjectUrl !== objectUrl) {
+            URL.revokeObjectURL(shape._videoObjectUrl);
+        }
+        shape._videoElement = video;
+        shape._videoObjectUrl = objectUrl;
+        video.addEventListener('play', () => startVideoRenderLoop());
+        video.addEventListener('pause', () => canvas?.requestRenderAll());
+        video.addEventListener('ended', () => canvas?.requestRenderAll());
+    }
+
+    function bindVideoFileToShape(shape: any, file: File): Promise<string> {
+        const { video, objectUrl } = createVideoElementFromFile(file);
+        attachVideoElementToShape(shape, video, objectUrl);
+        return capturePosterFromVideo(video);
+    }
+
     /**
      * Load image from URL into selected ImagePlaceholder (from PropsPanel)
      */
@@ -7737,20 +8015,32 @@ function checkAndAddNewShapeToFrame(shape: any) {
         // Works for both ImagePlaceholder and loaded Image
         const currentObject = selectedObject;
         
+        const isVideo = (currentObject as any)._customType === 'video';
         const fileInput = document.createElement('input');
         fileInput.type = 'file';
-        fileInput.accept = 'image/*';
+        fileInput.accept = isVideo ? 'video/*' : 'image/*';
         fileInput.style.display = 'none';
         
         fileInput.onchange = (event: Event) => {
             const target = event.target as HTMLInputElement;
             const file = target.files?.[0];
             
-            if (!file || !file.type.startsWith('image/')) {
+            if (!file || (isVideo ? !file.type.startsWith('video/') : !file.type.startsWith('image/'))) {
                 document.body.removeChild(fileInput);
                 return;
             }
-            
+
+            if (isVideo) {
+                bindVideoFileToShape(currentObject, file).then((posterUrl) => {
+                    replaceImageWithNewSource(currentObject, posterUrl, file.name);
+                }).catch((err) => {
+                    console.error('Video poster capture failed', err);
+                }).finally(() => {
+                    if (fileInput.parentNode) document.body.removeChild(fileInput);
+                });
+                return;
+            }
+
             const reader = new FileReader();
             reader.onload = (e) => {
                 const dataUrl = e.target?.result as string;
@@ -8276,7 +8566,7 @@ function checkAndAddNewShapeToFrame(shape: any) {
         // Fill opacity (percentage stored separately from the baked rgba fill value)
         '_fillOpacity',
         // Library shape metadata
-        '_shapeKey', '_cornerRadiusMode',
+        '_shapeKey', '_cornerRadiusMode', '_iconFill',
         '_boxStroke', '_boxStrokeWidth', '_boxStrokeDashArray',
         '_boxCornerRadius', '_boxFill',
         '_textPadding',
@@ -8940,13 +9230,13 @@ function checkAndAddNewShapeToFrame(shape: any) {
         // Helper to apply fill color while preserving fill opacity
         const applyFillColor = (obj: any, clr: string) => {
             const fillOpacity = obj._fillOpacity ?? 1;
-            // If we have fill opacity < 1, convert to rgba
-            if (fillOpacity < 1) {
-                const rgbaColor = colorToRgba(clr, fillOpacity);
-                obj.set({ fill: rgbaColor });
-            } else {
-                obj.set({ fill: clr });
+            const painted = fillOpacity < 1 ? colorToRgba(clr, fillOpacity) : clr;
+            if (paintsFillOnStroke(obj)) {
+                obj._iconFill = clr;
+                obj.set({ fill: '', backgroundColor: painted });
+                return;
             }
+            obj.set({ fill: painted });
         };
         
         // If it's a Frame, update the background rect specifically (preserving fill opacity)
@@ -8982,8 +9272,12 @@ function checkAndAddNewShapeToFrame(shape: any) {
                     // Skip ImagePlaceholder — its fill background is hidden once an image is
                     // loaded; only stroke properties are meaningful for this type.
                 } else if ('fill' in obj) {
-                    // For shapes: apply color at full opacity for uniformity
-                    obj.set({ fill: color });
+                    if (paintsFillOnStroke(obj)) {
+                        obj._iconFill = color;
+                        obj.set({ fill: '', backgroundColor: color });
+                    } else {
+                        obj.set({ fill: color });
+                    }
                     obj._fillOpacity = 1;
                 }
             });
@@ -9146,6 +9440,11 @@ function checkAndAddNewShapeToFrame(shape: any) {
         // Helper to apply fill opacity to a single shape object
         const applyFillOpacity = (obj: any) => {
             obj._fillOpacity = alpha;
+            if (paintsFillOnStroke(obj)) {
+                const base = obj._iconFill || obj.backgroundColor || '#FFFFFF';
+                obj.set({ fill: '', backgroundColor: colorToRgba(base, alpha) });
+                return;
+            }
             const currentFill = obj.fill || '#FFFFFF';
             const rgbaFill = colorToRgba(currentFill, alpha);
             obj.set({ fill: rgbaFill });
@@ -11080,11 +11379,12 @@ function checkAndAddNewShapeToFrame(shape: any) {
 
     <!-- Pan/Zoom Panel: Position configurable via panZoomPosition prop -->
     {#if !isCanvasLoading}
-    <PanZoomPanel 
-        class="absolute {getPanZoomPositionClass(panZoomPosition)} z-10"
+    <div class="canvas-pan-zoom-overlay {getPanZoomPositionClass(panZoomPosition)}">
+    <PanZoomPanel
         {zoomLevel}
         isPanActive={activeTool === 'pan'}
         {showGrid}
+        {advancedFeatures}
         onPanToggle={() => activeTool === 'pan' ? onSelectSelectTool() : onSelectPanTool()}
         onZoomIn={zoomIn}
         onZoomOut={zoomOut}
@@ -11098,6 +11398,7 @@ function checkAndAddNewShapeToFrame(shape: any) {
         hasUnsavedChanges={_hasUnsavedChanges}
         onSave={saveNow}
     />
+    </div>
     {/if}
 
     <!-- Canvas -->
@@ -11131,6 +11432,7 @@ function checkAndAddNewShapeToFrame(shape: any) {
         {onSelectShapeTool} 
         {onSelectFrameTool}
         {onSelectImageTool}
+        onSelectVideoTool={onSelectVideoTool}
         {onGroupSelection}
         {onUngroupSelection}
         onDuplicateSelection={() => _duplicateSelected()}
@@ -11156,6 +11458,8 @@ function checkAndAddNewShapeToFrame(shape: any) {
         onToggleStickyTool={() => { stickyToolEnabled = !stickyToolEnabled; }}
         {onInsertLibraryShape}
         {onSelectLibraryShapeTool}
+        {advancedFeatures}
+        {mediaBtsOnBar}
     />    
     {/if}
 
@@ -11294,5 +11598,5 @@ function checkAndAddNewShapeToFrame(shape: any) {
 -->
 
 <style>/*! tailwindcss v4.1.18 | MIT License | https://tailwindcss.com */
-button{cursor:pointer}.canvas-container{-webkit-user-select:none;user-select:none}.canvas-container input,.canvas-container textarea{-webkit-user-select:text;user-select:text}.canvas-loader-spinner{border:3px solid #e5e7eb;border-top-color:#374151;border-radius:50%;width:36px;height:36px;animation:.8s linear infinite canvas-spin}@keyframes canvas-spin{to{transform:rotate(360deg)}}
+button{cursor:pointer}.canvas-container{-webkit-user-select:none;user-select:none}.canvas-container input,.canvas-container textarea{-webkit-user-select:text;user-select:text}.canvas-loader-spinner{border:3px solid #e5e7eb;border-top-color:#374151;border-radius:50%;width:36px;height:36px;animation:.8s linear infinite canvas-spin}@keyframes canvas-spin{to{transform:rotate(360deg)}}.canvas-pan-zoom-overlay{width:max-content;max-width:calc(100% - 2rem);overflow:visible}
 </style>