@codingfactory/mediables-vue 2.18.0 → 2.18.2

package/dist/vanilla-editor/styles/editor-v2.css

@@ -1364,3 +1364,154 @@
     transition: none;
   }
 }
+
+/* ==================== Toolbar: labeled Save button ==================== */
+/* The Save button carries an explicit "Save" label next to the icon so it
+   reads as the primary action at a glance, on both desktop and mobile. */
+.vanilla-image-editor-v2 .toolbar-save-labeled {
+  width: auto;
+  min-height: 36px;
+  padding: 0 14px;
+  gap: 6px;
+  font-size: 13px;
+  font-weight: 600;
+  letter-spacing: 0.02em;
+  background: var(--editor-primary);
+  color: #ffffff;
+  border-color: var(--editor-primary);
+  white-space: nowrap;
+}
+.vanilla-image-editor-v2 .toolbar-save-labeled:hover:not(:disabled) {
+  background: var(--editor-primary-hover);
+  border-color: var(--editor-primary-hover);
+}
+.vanilla-image-editor-v2 .toolbar-save-labeled .btn-icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+.vanilla-image-editor-v2 .toolbar-save-labeled .btn-icon svg {
+  width: 18px;
+  height: 18px;
+  color: #ffffff;
+}
+
+/* Let the toolbar wrap on very narrow widths so Save can never be pushed
+   off the right edge. */
+.vanilla-image-editor-v2 .editor-toolbar {
+  flex-wrap: wrap;
+  row-gap: var(--editor-spacing-sm);
+}
+
+/* ==================== Canvas zoom overlay ==================== */
+/* Floats over the canvas in the bottom-right corner. Subtle by default so it
+   doesn't obscure the image; lifts on hover/focus. */
+.vanilla-image-editor-v2 .canvas-zoom-overlay {
+  position: absolute;
+  right: 10px;
+  bottom: 10px;
+  display: inline-flex;
+  align-items: center;
+  gap: 2px;
+  padding: 4px;
+  border-radius: 999px;
+  background: color-mix(in oklab, var(--editor-surface) 82%, transparent);
+  border: 1px solid var(--editor-border-light);
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
+  backdrop-filter: saturate(1.2) blur(6px);
+  -webkit-backdrop-filter: saturate(1.2) blur(6px);
+  z-index: 25;
+  opacity: 0.85;
+  transition: opacity 0.15s ease;
+}
+.vanilla-image-editor-v2 .canvas-zoom-overlay:hover,
+.vanilla-image-editor-v2 .canvas-zoom-overlay:focus-within {
+  opacity: 1;
+}
+.vanilla-image-editor-v2 .canvas-zoom-btn {
+  width: 30px;
+  height: 30px;
+  border-radius: 999px;
+  background: transparent;
+  border: none;
+}
+.vanilla-image-editor-v2 .canvas-zoom-btn:hover:not(:disabled) {
+  background: var(--editor-surface-2);
+}
+.vanilla-image-editor-v2 .canvas-zoom-btn svg {
+  width: 16px;
+  height: 16px;
+}
+.vanilla-image-editor-v2 .canvas-zoom-label {
+  font-size: 11px;
+  font-weight: 600;
+  color: var(--editor-text-muted);
+  min-width: 38px;
+  padding: 0 4px;
+  text-align: center;
+  user-select: none;
+}
+
+/* The canvas section is the positioning context for the overlay. */
+.vanilla-image-editor-v2 .editor-v2-canvas {
+  position: relative;
+}
+
+/* ==================== Mobile sticky Save bar ==================== */
+/* Hidden on desktop — the toolbar's labeled Save is the primary affordance
+   there. On mobile, this wide blue bar sits below the filter drawer so Save
+   is always thumb-reachable regardless of which mode/category is open. */
+.vanilla-image-editor-v2 .editor-v2-mobile-save-bar {
+  display: none;
+}
+
+@media (max-width: 900px) {
+  .vanilla-image-editor-v2 .editor-v2-mobile-save-bar {
+    display: flex;
+    flex: 0 0 auto;
+    padding: 10px 12px calc(10px + env(safe-area-inset-bottom, 0px));
+    background: var(--editor-surface);
+    border-top: 1px solid var(--editor-border);
+    box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.06);
+    position: relative;
+    z-index: 5;
+  }
+
+  .vanilla-image-editor-v2 .editor-v2-mobile-save-bar .mobile-save-btn {
+    flex: 1 1 auto;
+    height: 48px;
+    border-radius: 12px;
+    border: none;
+    background: var(--editor-primary);
+    color: #ffffff;
+    font-size: 16px;
+    font-weight: 600;
+    letter-spacing: 0.02em;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: 8px;
+    cursor: pointer;
+    transition: background 0.15s ease, transform 0.05s ease;
+  }
+  .vanilla-image-editor-v2 .editor-v2-mobile-save-bar .mobile-save-btn:hover:not(:disabled) {
+    background: var(--editor-primary-hover);
+  }
+  .vanilla-image-editor-v2 .editor-v2-mobile-save-bar .mobile-save-btn:active:not(:disabled) {
+    transform: translateY(1px);
+  }
+  .vanilla-image-editor-v2 .editor-v2-mobile-save-bar .mobile-save-btn:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+  .vanilla-image-editor-v2 .editor-v2-mobile-save-bar .mobile-save-icon {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+  }
+  .vanilla-image-editor-v2 .editor-v2-mobile-save-bar .mobile-save-icon svg {
+    width: 20px;
+    height: 20px;
+    color: #ffffff;
+  }
+}

package/dist/vanilla-editor/ui/Toolbar.d.ts

@@ -13,7 +13,6 @@ export class Toolbar {
      * @returns {HTMLElement}
      */
     render(): HTMLElement;
-    _zoomLabel: HTMLElement | undefined;
     _themeBtn: HTMLElement | undefined;
     _cropBtn: HTMLElement | undefined;
     /**
@@ -23,11 +22,6 @@ export class Toolbar {
     _canRemoveBackground(): any;
     _updateRemoveBgButton(): void;
     _setRemoveBgStatus(message: any): void;
-    /**
-     * Update zoom display
-     * @param {number} zoom
-     */
-    updateZoom(zoom: number): void;
     /**
      * Clean up
      */

package/dist/vanilla-editor/ui-v2/SplitPanelLayout.d.ts

@@ -42,6 +42,7 @@ export class SplitPanelLayout {
         canvasContainer: HTMLElement;
         cropOverlay: HTMLElement;
     };
+    _zoomOverlay: HTMLElement | undefined;
     /**
      * Accept the externally-constructed crop controls element.
      * The layout re-parents it into the active shell's crop slot.
@@ -56,6 +57,7 @@ export class SplitPanelLayout {
     _mountCropControlsInActiveShell(): void;
     _handleDesktopCategoryChange(): void;
     _applyMode(mode: any): void;
+    _buildCanvasZoomOverlay(): HTMLElement;
     destroy(): void;
 }
 import { CategoryTabs } from './CategoryTabs.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@codingfactory/mediables-vue",
-  "version": "2.18.0",
+  "version": "2.18.2",
   "publishConfig": {
     "access": "restricted"
   },