@widgetic/canvas 0.5.7 → 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',
@@ -156,6 +156,8 @@
     // 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;
@@ -282,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;
@@ -649,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
      */
@@ -2421,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;
+                        }
                     }
                 }
 
@@ -2861,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();
             });
@@ -3472,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',
@@ -4703,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).
@@ -5247,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;
                         }
 
@@ -5440,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.
@@ -6459,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;
@@ -6510,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,
@@ -7369,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().
@@ -7391,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;
@@ -7613,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;
             }
@@ -7714,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);
@@ -7750,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) => {
@@ -7780,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)
      */
@@ -7800,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;
@@ -8339,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',
@@ -9003,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)
@@ -9045,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;
                 }
             });
@@ -9209,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 });
@@ -11196,6 +11432,7 @@ function checkAndAddNewShapeToFrame(shape: any) {
         {onSelectShapeTool} 
         {onSelectFrameTool}
         {onSelectImageTool}
+        onSelectVideoTool={onSelectVideoTool}
         {onGroupSelection}
         {onUngroupSelection}
         onDuplicateSelection={() => _duplicateSelected()}
@@ -11222,6 +11459,7 @@ function checkAndAddNewShapeToFrame(shape: any) {
         {onInsertLibraryShape}
         {onSelectLibraryShapeTool}
         {advancedFeatures}
+        {mediaBtsOnBar}
     />    
     {/if}
 

package/dist/canvas/Canvas.svelte.d.ts

@@ -23,6 +23,7 @@ declare const __propDef: {
         panZoomPosition?: "TL" | "TC" | "TR" | "BL" | "BC" | "BR";
         wireframeMode?: boolean;
         advancedFeatures?: boolean;
+        /** When true and advanced is on, Frame/Image/Video stay on the toolbar. Default true. */ mediaBtsOnBar?: boolean;
         onReady?: (() => void) | null;
         isExternalDataLoading?: boolean;
         onBeforeUnmount?: ((json: string | null) => void) | null;
@@ -91,6 +92,7 @@ declare const __propDef: {
         setPrimaryWidgetShape?: (widgetId: string) => boolean;
         getPrimaryWidgetId?: () => string | null;
         onSelectImageTool?: () => void;
+        onSelectVideoTool?: () => void;
         onSelectPanTool?: () => void;
         zoomIn?: () => void;
         zoomOut?: () => void;
@@ -173,6 +175,7 @@ export default class Canvas extends SvelteComponentTyped<CanvasProps, CanvasEven
     get setPrimaryWidgetShape(): (widgetId: string) => boolean;
     get getPrimaryWidgetId(): () => string | null;
     get onSelectImageTool(): () => void;
+    get onSelectVideoTool(): () => void;
     get onSelectPanTool(): () => void;
     get zoomIn(): () => void;
     get zoomOut(): () => void;

package/dist/canvas/CanvasToolbar.svelte

@@ -7,7 +7,7 @@
      * COMPONENT PROPS
      */
     // Tool type definition
-    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';
     // Shape tool sub-type for the shapes dropdown (Arrow is a dedicated button, not in dropdown)
     type ShapeToolName = 'rect' | 'circle' | 'circle-true' | 'triangle';
 
@@ -31,6 +31,7 @@
     export let onSelectTextTool: () => void = () => {};
     export let onSelectPanTool: () => void = () => {};
     export let onSelectImageTool: () => void = () => {};
+    export let onSelectVideoTool: () => void = () => {};
     // Zoom callbacks — optional, used for Ctrl+/Ctrl- shortcuts
     export let onZoomIn: () => void = () => {};
     export let onZoomOut: () => void = () => {};
@@ -63,8 +64,16 @@
     /** Draw-to-place: activates library shape tool so user clicks-and-drags to size it. */
     export let onSelectLibraryShapeTool: (shapeKey: string, pathData: string) => void = () => {};
 
-    /** Extra tools (undo/redo/lock, frame, image, shape library). Code stays; UI is gated. */
+    /** Extra tools (undo/redo/lock). Code stays; UI is gated. */
     export let advancedFeatures: boolean = false;
+    /**
+     * When true (default) and advancedFeatures is on, Frame / Image / Video sit on the toolbar.
+     * When false, they leave the bar and appear under More Shapes → Media Shapes.
+     */
+    export let mediaBtsOnBar: boolean = true;
+
+    $: showMediaOnBar = advancedFeatures && mediaBtsOnBar;
+    $: showMediaInDropdown = !showMediaOnBar;
 
     // Pre-group shapes for the dropdown
     const libraryShapesByCategory = getShapesByCategory();
@@ -79,7 +88,7 @@
 
     // ─── Shapes + Image dropdown state ───
     // The last-selected tool within the dropdown (shapes, image, OR library shape).
-    type DropdownToolName = ShapeToolName | 'image' | 'library-shape';
+    type DropdownToolName = ShapeToolName | 'image' | 'video' | 'frame' | 'library-shape';
     let lastSelectedDropdownTool: DropdownToolName = 'rect';
     // When a library shape was last selected, store its info for the trigger button
     let lastSelectedLibraryShape: LibraryShape | null = null;
@@ -137,12 +146,29 @@
     };
     
     // The currently displayed tool in the dropdown button (active tool if it's a dropdown tool, else last selected)
-    const dropdownTools: DropdownToolName[] = ['rect', 'circle', 'circle-true', 'triangle', 'image', 'library-shape'];
-    const dropdownToolsWithoutImage = dropdownTools.filter(t => t !== 'image');
-    $: activeDropdownTool = dropdownToolsWithoutImage.includes(activeTool as DropdownToolName)
+    const mediaToolInfo: Record<'frame' | 'image' | 'video', { iconSvg: string; label: string; key: string }> = {
+        frame: {
+            iconSvg: `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="18" height="18" rx="2"/><path d="M3 9h18"/><path d="M9 3v6"/></svg>`,
+            label: 'Frame',
+            key: 'F',
+        },
+        image: {
+            iconSvg: imageDropdownInfo.iconSvg,
+            label: 'Image',
+            key: 'I',
+        },
+        video: {
+            iconSvg: `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><rect x="2" y="6" width="14" height="12" rx="2"/><path d="M16 10l6-3v10l-6-3z"/></svg>`,
+            label: 'Video',
+            key: '',
+        },
+    };
+
+    const dropdownTools: DropdownToolName[] = ['rect', 'circle', 'circle-true', 'triangle', 'image', 'video', 'frame', 'library-shape'];
+    $: activeDropdownTool = dropdownTools.includes(activeTool as DropdownToolName)
         ? (activeTool as DropdownToolName)
         : lastSelectedDropdownTool;
-    $: activeDropdownIsActive = dropdownToolsWithoutImage.includes(activeTool as DropdownToolName);
+    $: activeDropdownIsActive = dropdownTools.includes(activeTool as DropdownToolName);
 
     // Backwards-compat aliases used in template
     $: activeShapeInDropdown = activeDropdownTool as ShapeToolName;
@@ -155,10 +181,23 @@
     }
 
     function selectImageFromDropdown() {
+        lastSelectedDropdownTool = 'image';
         if (!KEEP_SHAPES_DROPDOWN_OPEN) shapesDropdownOpen = false;
         onSelectImageTool();
     }
 
+    function selectFrameFromDropdown() {
+        lastSelectedDropdownTool = 'frame';
+        if (!KEEP_SHAPES_DROPDOWN_OPEN) shapesDropdownOpen = false;
+        onSelectFrameTool();
+    }
+
+    function selectVideoFromDropdown() {
+        lastSelectedDropdownTool = 'video';
+        if (!KEEP_SHAPES_DROPDOWN_OPEN) shapesDropdownOpen = false;
+        onSelectVideoTool();
+    }
+
     function selectLibraryShape(shape: LibraryShape) {
         lastSelectedDropdownTool = 'library-shape';
         lastSelectedLibraryShape = shape;
@@ -170,14 +209,26 @@
     function activateDropdownTool() {
         if (activeDropdownTool === 'library-shape' && lastSelectedLibraryShape) {
             selectLibraryShape(lastSelectedLibraryShape);
+        } else if (activeDropdownTool === 'image') {
+            selectImageFromDropdown();
+        } else if (activeDropdownTool === 'video') {
+            selectVideoFromDropdown();
+        } else if (activeDropdownTool === 'frame') {
+            selectFrameFromDropdown();
         } else {
             selectShape(activeDropdownTool as ShapeToolName);
         }
     }
 
+    $: mediaTrigger = (activeDropdownTool === 'frame' || activeDropdownTool === 'image' || activeDropdownTool === 'video')
+        ? mediaToolInfo[activeDropdownTool]
+        : null;
+
     // Tooltip text for the main dropdown button
     $: dropdownButtonTooltip = activeDropdownTool === 'library-shape' && lastSelectedLibraryShape
             ? lastSelectedLibraryShape.label
+            : mediaTrigger
+                ? (mediaTrigger.key ? `${mediaTrigger.label}  (${mediaTrigger.key})` : mediaTrigger.label)
             : shapeInfo[activeDropdownTool as ShapeToolName]?.label
                 ? (shapeInfo[activeDropdownTool as ShapeToolName].key
                     ? `${shapeInfo[activeDropdownTool as ShapeToolName].label}  (${shapeInfo[activeDropdownTool as ShapeToolName].key})`
@@ -388,12 +439,12 @@
             case 'D': event.preventDefault(); onSelectDrawTool(); break;
             case 'H': event.preventDefault(); onSelectPanTool(); break;
             case 'A': event.preventDefault(); selectShape('arrow'); break;
-            case 'R': if (advancedFeatures) { event.preventDefault(); selectShape('rect'); } break;
-            case 'G': if (advancedFeatures) { event.preventDefault(); selectShape('triangle'); } break;
-            case 'O': if (advancedFeatures) { event.preventDefault(); selectShape('circle'); } break;
-            case 'F': if (advancedFeatures) { event.preventDefault(); onSelectFrameTool(); } break;
+            case 'R': event.preventDefault(); selectShape('rect'); break;
+            case 'G': event.preventDefault(); selectShape('triangle'); break;
+            case 'O': event.preventDefault(); selectShape('circle'); break;
+            case 'F': event.preventDefault(); onSelectFrameTool(); break;
             case 'T': event.preventDefault(); onSelectTextTool(); break;
-            case 'I': if (advancedFeatures) { event.preventDefault(); onSelectImageTool(); } break;
+            case 'I': event.preventDefault(); onSelectImageTool(); break;
         }
     }
 
@@ -628,7 +679,7 @@
                 </button>
             </Tooltip>
 
-            {#if advancedFeatures}
+            {#if showMediaOnBar}
             <div class="toolbar-divider"></div>
 
             <Tooltip text="Frame  (F)">
@@ -655,7 +706,19 @@
                 </button>
             </Tooltip>
 
-            <!-- Shapes: tldraw-style split — left activates tool, right opens dropdown -->
+            <Tooltip text="Video">
+                <button class="video-bt {buttonClass} {activeTool === 'video' ? activeClass : inactiveClass}"
+                    onclick={onSelectVideoTool}
+                    aria-label="Video">
+                    <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                        <rect x="2" y="6" width="14" height="12" rx="2"/>
+                        <path d="M16 10l6-3v10l-6-3z"/>
+                    </svg>
+                </button>
+            </Tooltip>
+            {/if}
+
+            <!-- Shapes: tldraw-style split — left activates tool, right opens dropdown. Always available. -->
             <div class="shapes-split-ct" bind:this={dropdownTriggerEl}>
                 <Tooltip text={dropdownButtonTooltip}>
                     <button
@@ -665,6 +728,8 @@
                     >
                         {#if activeDropdownTool === 'library-shape' && lastSelectedLibraryShape}
                             {@html lastSelectedLibraryShape.iconSvg}
+                        {:else if mediaTrigger}
+                            {@html mediaTrigger.iconSvg}
                         {:else if shapeInfo[activeDropdownTool as ShapeToolName]}
                             {@html shapeInfo[activeDropdownTool as ShapeToolName].iconSvg}
                         {:else}
@@ -684,7 +749,6 @@
                     </button>
                 </Tooltip>
             </div>
-            {/if}
         </div>
     </div>
 
@@ -715,7 +779,7 @@
      dropdownOpenAbove=true: appears above the trigger (toolbar at bottom).
      dropdownOpenAbove=false: appears below (toolbar at top).
      ═══════════════════════════════════════════════════════════════ -->
-{#if shapesDropdownOpen && advancedFeatures}
+{#if shapesDropdownOpen}
     <!-- position:absolute within .canvas-container (position:relative) so the dropdown
          is correctly positioned regardless of any CSS transform on ancestors. -->
     <!-- svelte-ignore a11y-click-events-have-key-events -->
@@ -729,6 +793,29 @@
         use:overlayScrollbar
         style={shapesDropdownNeedsScroll ? 'margin-right: -6px' : ''}
     >
+        <!-- Media Shapes — first so Frame / Image / Video are easy to reach when not on the bar -->
+        {#if showMediaInDropdown}
+        <div class="shapes-category-label">Media Shapes</div>
+        <div class="shapes-library-grid">
+            <Tooltip text="Frame  (F)" position="above">
+                <button class="shape-library-bt {activeTool === 'frame' ? 'active' : ''}" onclick={selectFrameFromDropdown} aria-label="Frame">
+                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="18" height="18" rx="2"/><path d="M3 9h18"/><path d="M9 3v6"/></svg>
+                </button>
+            </Tooltip>
+            <Tooltip text="Image  (I)" position="above">
+                <button class="shape-library-bt {activeTool === 'image' ? 'active' : ''}" onclick={selectImageFromDropdown} aria-label="Image">
+                    {@html imageDropdownInfo.iconSvg}
+                </button>
+            </Tooltip>
+            <Tooltip text="Video" position="above">
+                <button class="shape-library-bt {activeTool === 'video' ? 'active' : ''}" onclick={selectVideoFromDropdown} aria-label="Video">
+                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><rect x="2" y="6" width="14" height="12" rx="2"/><path d="M16 10l6-3v10l-6-3z"/></svg>
+                </button>
+            </Tooltip>
+        </div>
+        <div class="shapes-dropdown-divider"></div>
+        {/if}
+
         <!-- Geometric Shapes — 3×2 grid -->
         <div class="shapes-category-label">Geometric Shapes</div>
         <div class="shapes-library-grid">
@@ -768,21 +855,6 @@
             {/each}
         </div>
 
-        <!-- Media (hidden — Image tool moved to main toolbar) -->
-        {#if false}
-        <div class="shapes-dropdown-divider"></div>
-        <div class="shapes-category-label">Media</div>
-        <Tooltip text="Image  (I)" position="above">
-            <button
-                class="shape-option-bt {activeTool === 'image' ? 'active' : ''}"
-                onclick={selectImageFromDropdown}
-            >
-                {@html imageDropdownInfo.iconSvg}
-                {imageDropdownInfo.label}
-            </button>
-        </Tooltip>
-        {/if}
-
         <!-- Library shape categories (skip Geometric, already rendered above) -->
         {#each [...libraryShapesByCategory.entries()].filter(([cat]) => cat !== 'Geometric Shapes') as [category, shapes]}
             <div class="shapes-dropdown-divider"></div>
@@ -901,6 +973,13 @@
     background: transparent !important;
     box-shadow: none !important;
 }
+.canvas-toolbar-el :global(button:focus),
+.canvas-toolbar-el :global(button:focus-visible),
+.canvas-toolbar-el :global(a:focus),
+.canvas-toolbar-el :global(a:focus-visible) {
+    outline: none !important;
+    box-shadow: none !important;
+}
 
 /* ── "Sheath" — the white container holding all buttons ── */
 .tools-ct {
@@ -908,7 +987,7 @@
     border-radius: 1.25rem;
     box-shadow: 0 4px 24px rgba(0,0,0,0.08), 0 1px 4px rgba(0,0,0,0.04);
     height: 80px;
-    padding: 0 12px;
+    padding: 0 24px;
     gap: 4px;
     align-items: center;
     overflow: visible;
@@ -926,9 +1005,10 @@ button {
     background: transparent;
 }
 
-button:focus {
-    outline: none;
-    box-shadow: none;
+button:focus,
+button:focus-visible {
+    outline: none !important;
+    box-shadow: none !important;
 }
 
 button:disabled {

package/dist/canvas/CanvasToolbar.svelte.d.ts

@@ -3,7 +3,7 @@ declare const __propDef: {
     props: {
         class?: string;
         style?: string;
-        activeTool?: "select" | "rect" | "erase" | "draw" | "arrow" | "text" | "circle" | "circle-true" | "triangle" | "frame" | "pan" | "image" | "library-shape";
+        activeTool?: "select" | "video" | "rect" | "erase" | "draw" | "arrow" | "text" | "circle" | "circle-true" | "triangle" | "frame" | "pan" | "image" | "library-shape";
         activeClass?: string;
         inactiveClass?: string;
         buttonClass?: string;
@@ -15,6 +15,7 @@ declare const __propDef: {
         onSelectTextTool?: () => void;
         onSelectPanTool?: () => void;
         onSelectImageTool?: () => void;
+        onSelectVideoTool?: () => void;
         onZoomIn?: () => void;
         onZoomOut?: () => void;
         onZoomReset?: () => void;
@@ -32,7 +33,11 @@ declare const __propDef: {
         onToggleStickyTool?: () => void;
         /** Called when user clicks a library shape. Canvas inserts it as a Path. */ onInsertLibraryShape?: (shapeKey: string, pathData: string) => void;
         /** Draw-to-place: activates library shape tool so user clicks-and-drags to size it. */ onSelectLibraryShapeTool?: (shapeKey: string, pathData: string) => void;
-        /** Extra tools (undo/redo/lock, frame, image, shape library). Code stays; UI is gated. */ advancedFeatures?: boolean;
+        /** Extra tools (undo/redo/lock). Code stays; UI is gated. */ advancedFeatures?: boolean;
+        /**
+             * When true (default) and advancedFeatures is on, Frame / Image / Video sit on the toolbar.
+             * When false, they leave the bar and appear under More Shapes → Media Shapes.
+             */ mediaBtsOnBar?: boolean;
         addText?: () => void;
         addRect?: () => void;
         addTriangle?: () => void;

package/dist/canvas/PanZoomPanel.svelte

@@ -134,6 +134,19 @@
 
     <!-- Zoom Level Input -->
     <div class="zoom-level">
+        <Tooltip text="Reset zoom to 100%  [Ctrl/Cmd] + [0]" position="above">
+            <button
+                type="button"
+                class="zoom-reset-in-input"
+                onclick={onZoomReset}
+                aria-label="Reset zoom to 100%"
+            >
+                <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+                    <polyline points="1 4 1 10 7 10"/>
+                    <path d="M3.51 15a9 9 0 1 0 2.13-9.36L1 10"/>
+                </svg>
+            </button>
+        </Tooltip>
         <input
             type="text"
             class="zoom-input"
@@ -208,7 +221,7 @@
     </Tooltip>
     {/if}
 
-    {#if showSaveButton}
+        {#if showSaveButton && advancedFeatures}
         <div class="divider"></div>
         <Tooltip text={hasUnsavedChanges ? 'Unsaved changes — click to save  [Cmd+S]' : 'All changes saved  [Cmd+S]'} position="above">
             <button
@@ -229,18 +242,15 @@
     {/if}
 
     <div class="pan-zoom-minimize-anchor">
-        <Tooltip text="Minimize zoom" position="above">
+        <Tooltip text="Minimize Zoom Panel" position="above">
             <button
                 type="button"
-                class="panel-btn pan-zoom-minimize-btn"
+                class="pan-zoom-minimize-btn"
                 onclick={toggleMinimized}
-                aria-label="Minimize zoom controls"
+                aria-label="Minimize Zoom Panel"
             >
-                <svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round">
-                    <polyline points="4 14 10 14 10 20"/>
-                    <polyline points="20 10 14 10 14 4"/>
-                    <line x1="14" y1="10" x2="21" y2="3"/>
-                    <line x1="3" y1="21" x2="10" y2="14"/>
+                <svg width="8" height="8" viewBox="0 0 12 12" fill="none" aria-hidden="true">
+                    <rect x="2" y="5.25" width="8" height="1.5" rx="0.25" fill="currentColor"/>
                 </svg>
             </button>
         </Tooltip>
@@ -272,11 +282,25 @@
     }
 
     .pan-zoom-minimize-btn {
-        width: 18px;
-        height: 18px;
-        background: white;
-        border: 1px solid #e5e7eb;
-        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: 14px;
+        height: 14px;
+        padding: 0;
+        border-radius: 9999px;
+        background: #ffffff;
+        border: 1px solid #9ca3af;
+        color: #9ca3af;
+        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12);
+        cursor: pointer;
+        transition: color 0.15s ease, border-color 0.15s ease;
+    }
+
+    .pan-zoom-minimize-btn:hover:not(:disabled) {
+        background: #ffffff;
+        border-color: #111827;
+        color: #111827;
     }
 
     .pan-zoom-panel-minimized {
@@ -342,6 +366,14 @@
         cursor: not-allowed;
     }
 
+    .pan-zoom-panel button:focus,
+    .pan-zoom-panel button:focus-visible,
+    .pan-zoom-panel input:focus,
+    .pan-zoom-panel input:focus-visible {
+        outline: none;
+        box-shadow: none;
+    }
+
     /* Keyboard shortcuts button — slightly bigger to ensure the icon is clearly readable */
     .shortcuts-btn {
         width: 36px;
@@ -370,14 +402,34 @@
         background: #f9fafb;
     }
 
+    .zoom-reset-in-input {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: 18px;
+        height: 24px;
+        padding: 0;
+        margin: 0 0 0 2px;
+        border: none;
+        background: transparent;
+        color: #6b7280;
+        cursor: pointer;
+        flex-shrink: 0;
+    }
+
+    .zoom-reset-in-input:hover {
+        color: #111827;
+        background: #f3f4f6;
+    }
+
     .zoom-input {
-        width: 36px;
-        padding: 4px 6px;
+        width: 28px;
+        padding: 4px 0;
         border: none;
         background: transparent;
         font-size: 12px;
         font-weight: 500;
-        text-align: right;
+        text-align: center;
         outline: none;
     }
 
@@ -386,9 +438,13 @@
     }
 
     .zoom-unit {
-        padding: 4px 6px 4px 0;
+        width: 18px;
+        padding: 4px 0;
+        margin: 0 2px 0 0;
         font-size: 11px;
         color: #6b7280;
+        text-align: center;
+        flex-shrink: 0;
     }
 
     .save-btn--dirty {

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

@@ -122,9 +122,8 @@
     $: 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';
+    $: isImagePlaceholder = (customType === 'image' || customType === 'video') && !selectedObject?._hasImage;
+    $: isRect = objectType === 'rect' && !isFrame && customType !== 'image' && customType !== 'video';
     $: isTextbox = objectType === 'textbox';
     $: isPath = objectType === 'path' && !customType;
     $: isArrow = objectType === 'path' && customType === 'arrow';
@@ -141,7 +140,7 @@
     $: isMultiSelect = (isGroup && !isFrame) || isActiveSelection;
     $: isPlainGroup = isGroup && !isFrame;
     $: isLine = objectType === 'line';
-    $: isImage = objectType === 'image' || customType === 'image';
+    $: isImage = objectType === 'image' || customType === 'image' || customType === 'video';
     // Widget link: true when the selected object has already been converted to a widget
     $: hasWidgetId = !!selectedObject?._widgetId;
     $: widgetId = selectedObject?._widgetId ?? null;
@@ -195,6 +194,7 @@
         if (obj._customType === 'frame') return 'Frame';
         if (obj._customType === 'arrow') return 'Arrow';
         if (obj._customType === 'triangle') return 'Triangle';
+        if (obj._customType === 'video') return 'Video';
         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).
@@ -226,7 +226,13 @@
     // 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');
+    $: usesPathBackgroundFill = selectedObject?._cornerRadiusMode === 'strokeRound'
+        || ['cross', 'plus', 'minus', 'check'].includes(selectedObject?._shapeKey);
+    $: currentFill = isFrame
+        ? (selectedObject?._frameFill ?? '#FFFFFF')
+        : (usesPathBackgroundFill
+            ? (selectedObject?._iconFill || selectedObject?.backgroundColor || '#FFFFFF')
+            : (selectedObject?.fill ?? '#FFFFFF'));
     $: currentFillOpacity = Math.round((selectedObject?._fillOpacity ?? 1) * 100);
     $: currentStroke = isFrame ? (selectedObject?._frameStroke ?? '#000000') : (selectedObject?.stroke ?? '#000000');
     $: currentStrokeWidth = isFrame ? (selectedObject?._frameStrokeWidth ?? 1) : (selectedObject?.strokeWidth ?? 1);
@@ -1305,6 +1311,16 @@
         border-radius: 8px;
         box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
     }
+
+    .props-panel-el :global(button:focus),
+    .props-panel-el :global(button:focus-visible),
+    .props-panel-el :global(a:focus),
+    .props-panel-el :global(a:focus-visible),
+    .props-panel-el :global(input:focus),
+    .props-panel-el :global(input:focus-visible) {
+        outline: none !important;
+        box-shadow: none !important;
+    }
     
     /* Sticky header: stays at top, never scrolls */
     .props-panel-sticky-header {

package/dist/canvas/shapes/ImageShape.d.ts

@@ -24,8 +24,17 @@ export declare class ImageShape extends Rect {
     _cornerRoundness: number;
     _cornerRoundnessPixels: number;
     _objectId: string | null;
+    _videoElement: HTMLVideoElement | null;
+    _videoObjectUrl: string | null;
     _render(ctx: CanvasRenderingContext2D): void;
     private _renderImage;
+    getVideoPlayBadgeRadius(): number;
+    isVideoPlayBadgeHit(scenePoint: {
+        x: number;
+        y: number;
+    }): boolean;
+    toggleVideoPlayback(): Promise<boolean>;
+    private _renderVideoChrome;
     private _renderPlaceholderOverlay;
     toObject(propertiesToInclude?: any[]): any;
     static fromObject(object: Record<string, unknown>, options?: Record<string, unknown>): Promise<ImageShape>;

package/dist/canvas/shapes/ImageShape.js

@@ -36,9 +36,12 @@ export class ImageShape extends Rect {
     _cornerRoundness = 0;
     _cornerRoundnessPixels = 0;
     _objectId = null;
+    _videoElement = null;
+    _videoObjectUrl = null;
     // ── Placeholder rendering ─────────────────────────────────────────────────
     _render(ctx) {
-        const hasImage = this._hasImage && this._imageElement;
+        const hasVideoFrame = this._customType === 'video' && !!this._videoElement && this._videoElement.readyState >= 2;
+        const hasImage = (this._hasImage && this._imageElement) || hasVideoFrame;
         if (hasImage) {
             this._renderImage(ctx);
         }
@@ -78,9 +81,12 @@ export class ImageShape extends Rect {
         ctx.closePath();
         ctx.clip();
         const img = this._imageElement;
-        const imgReady = img.complete && img.naturalWidth > 0;
-        if (imgReady) {
-            if (this._isWidgetImage) {
+        const video = this._customType === 'video' ? this._videoElement : null;
+        const useVideo = !!(video && video.readyState >= 2);
+        const source = useVideo ? video : (img && img.complete && img.naturalWidth > 0 ? img : null);
+        const imgReady = !!source;
+        if (source) {
+            if (this._isWidgetImage && img && img.complete && img.naturalWidth > 0 && !useVideo) {
                 const imgW = img.naturalWidth;
                 const imgH = img.naturalHeight;
                 const scale = Math.min(w / imgW, h / imgH);
@@ -89,10 +95,13 @@ export class ImageShape extends Rect {
                 ctx.drawImage(img, -dw / 2, -dh / 2, dw, dh);
             }
             else {
-                ctx.drawImage(img, -w / 2, -h / 2, w, h);
+                ctx.drawImage(source, -w / 2, -h / 2, w, h);
             }
         }
         ctx.restore();
+        if (this._customType === 'video' && imgReady) {
+            this._renderVideoChrome(ctx, w, h);
+        }
         if (this.stroke && (this.strokeWidth ?? 0) > 0) {
             ctx.save();
             ctx.strokeStyle = this.stroke;
@@ -126,32 +135,114 @@ export class ImageShape extends Rect {
             ctx.restore();
         }
     }
+    getVideoPlayBadgeRadius() {
+        const w = this.width || 100;
+        const h = this.height || 100;
+        const size = Math.max(18, Math.min(w, h) * 0.22);
+        return (size / 2) * Math.max(this.scaleX || 1, this.scaleY || 1);
+    }
+    isVideoPlayBadgeHit(scenePoint) {
+        if (this._customType !== 'video' || !this._videoElement)
+            return false;
+        const center = this.getCenterPoint();
+        const radius = this.getVideoPlayBadgeRadius();
+        const dx = scenePoint.x - center.x;
+        const dy = scenePoint.y - center.y;
+        return dx * dx + dy * dy <= radius * radius;
+    }
+    async toggleVideoPlayback() {
+        const video = this._videoElement;
+        if (!video) {
+            canvasWarn('ImageShape: no video element to play');
+            return false;
+        }
+        try {
+            if (video.paused) {
+                await video.play();
+                canvasLog('ImageShape: video playing');
+            }
+            else {
+                video.pause();
+                canvasLog('ImageShape: video paused');
+            }
+            this.dirty = true;
+            return true;
+        }
+        catch (err) {
+            canvasWarn('ImageShape: video play/pause failed', err);
+            return false;
+        }
+    }
+    _renderVideoChrome(ctx, w, h) {
+        const video = this._videoElement;
+        const playing = !!(video && !video.paused && !video.ended);
+        const size = Math.max(18, Math.min(w, h) * 0.22);
+        ctx.save();
+        ctx.beginPath();
+        ctx.arc(0, 0, size / 2, 0, Math.PI * 2);
+        ctx.fillStyle = 'rgba(0, 0, 0, 0.45)';
+        ctx.fill();
+        ctx.fillStyle = '#ffffff';
+        if (playing) {
+            const barW = size * 0.08;
+            const barH = size * 0.28;
+            const gap = size * 0.08;
+            ctx.fillRect(-gap / 2 - barW, -barH / 2, barW, barH);
+            ctx.fillRect(gap / 2, -barH / 2, barW, barH);
+        }
+        else {
+            ctx.beginPath();
+            const tri = size * 0.18;
+            ctx.moveTo(-tri * 0.35, -tri);
+            ctx.lineTo(tri * 0.85, 0);
+            ctx.lineTo(-tri * 0.35, tri);
+            ctx.closePath();
+            ctx.fill();
+        }
+        if (video && Number.isFinite(video.duration) && video.duration > 0) {
+            const barH = Math.max(4, Math.min(8, h * 0.06));
+            const progress = Math.max(0, Math.min(1, video.currentTime / video.duration));
+            ctx.fillStyle = 'rgba(0, 0, 0, 0.45)';
+            ctx.fillRect(-w / 2, h / 2 - barH, w, barH);
+            ctx.fillStyle = '#ffffff';
+            ctx.fillRect(-w / 2, h / 2 - barH, w * progress, barH);
+        }
+        ctx.restore();
+    }
     // ── Placeholder icon + text overlay ──────────────────────────────────────
     _renderPlaceholderOverlay(ctx) {
-        const availableW = this.width || 100;
-        const availableH = this.height || 100;
-        const contentHeight = 76;
-        const contentScale = Math.min(1, availableH / contentHeight, availableW / 100);
+        const scaleX = Math.abs(this.scaleX || 1) || 1;
+        const scaleY = Math.abs(this.scaleY || 1) || 1;
+        ctx.save();
+        ctx.scale(1 / scaleX, 1 / scaleY);
+        const visualW = Math.abs((this.width || 100) * scaleX);
+        const visualH = Math.abs((this.height || 100) * scaleY);
+        const iconSize = 36;
+        const fontSize = 16;
+        const lineGap = fontSize + 6;
+        const contentWidth = 168;
+        const contentHeight = iconSize + 12 + lineGap * 2;
+        const contentScale = Math.max(0.7, Math.min((visualW * 0.88) / contentWidth, (visualH * 0.7) / contentHeight));
         ctx.fillStyle = '#94a3b8';
         ctx.textAlign = 'center';
         ctx.textBaseline = 'middle';
-        if (contentScale < 0.3) {
-            const tinyIconSize = Math.max(8, 24 * contentScale);
-            ctx.font = `${tinyIconSize}px Arial`;
-            ctx.fillText('🖼️', 0, 0);
+        ctx.save();
+        ctx.scale(contentScale, contentScale);
+        ctx.font = `${iconSize}px Arial`;
+        ctx.fillText(this._customType === 'video' ? '🎬' : '🖼️', 0, -28);
+        ctx.font = `${fontSize}px Arial`;
+        if (this._customType === 'video') {
+            ctx.fillText('Drop video', 0, 8);
+            ctx.fillText('or', 0, 8 + lineGap);
+            ctx.fillText('double click', 0, 8 + lineGap * 2);
         }
         else {
-            ctx.save();
-            ctx.scale(contentScale, contentScale);
-            ctx.font = '24px Arial';
-            ctx.fillText('🖼️', 0, -28);
-            const fontSize = 12;
-            ctx.font = `${fontSize}px Arial`;
-            ctx.fillText('Drop image', 0, 0);
-            ctx.fillText('or', 0, fontSize + 4);
-            ctx.fillText('double click', 0, (fontSize + 4) * 2);
-            ctx.restore();
+            ctx.fillText('Drop image', 0, 8);
+            ctx.fillText('or', 0, 8 + lineGap);
+            ctx.fillText('double click', 0, 8 + lineGap * 2);
         }
+        ctx.restore();
+        ctx.restore();
     }
     // ── Serialisation ─────────────────────────────────────────────────────────
     toObject(propertiesToInclude) {
@@ -225,7 +316,7 @@ classRegistry.setClass(ImageShape);
  * swapping the prototype chain. No object re-creation needed.
  */
 export function upgradeToImageShape(obj) {
-    if (!obj || obj._customType !== 'image')
+    if (!obj || (obj._customType !== 'image' && obj._customType !== 'video'))
         return null;
     if (obj instanceof ImageShape)
         return obj;

package/dist/components/Tooltip.svelte

@@ -25,6 +25,14 @@
 
     let triggerEl: HTMLElement | null = null;
 
+    $: if (text) refreshVisibleTooltip();
+
+    function refreshVisibleTooltip() {
+        if (tooltipBodyEl && tooltipBodyEl.style.display === 'block') {
+            show();
+        }
+    }
+
     // Lazily-created body-level elements
     let tooltipBodyEl: HTMLElement | null = null;
     let arrowBodyEl: HTMLElement | null = null;
@@ -48,8 +56,8 @@
             lineHeight: '1.4',
             padding: '5px 10px',
             borderRadius: '6px',
-            whiteSpace: 'normal',
-            maxWidth: '200px',
+            whiteSpace: 'nowrap',
+            maxWidth: 'none',
             textAlign: 'center',
             boxShadow: '0 2px 8px rgba(0,0,0,0.25)',
             userSelect: 'none',

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@widgetic/canvas",
-	"version": "0.5.7",
+	"version": "0.5.9",
 	"type": "module",
 	"svelte": "./dist/index.js",
 	"module": "./dist/index.js",