@limetech/lime-elements 39.42.0 → 39.42.2

package/CHANGELOG.md

@@ -1,3 +1,17 @@
+## [39.42.2](https://github.com/Lundalogik/lime-elements/compare/v39.42.1...v39.42.2) (2026-07-10)
+
+### Bug Fixes
+
+
+* **text-editor:** size inline images given bare-pixel dimensions ([713ae95](https://github.com/Lundalogik/lime-elements/commit/713ae9565897961ed3572ebe912b3f6012f616df))
+
+## [39.42.1](https://github.com/Lundalogik/lime-elements/compare/v39.42.0...v39.42.1) (2026-07-09)
+
+### Bug Fixes
+
+
+* **file:** remove baked-in defaults from the image-resize util ([7a5d29d](https://github.com/Lundalogik/lime-elements/commit/7a5d29d21a9a1ff4cf8e0946993cc7e2a4f22258))
+
 ## [39.42.0](https://github.com/Lundalogik/lime-elements/compare/v39.41.0...v39.42.0) (2026-07-08)
 
 ### Features

package/dist/cjs/{image-resize-BWRGvgkM.js → image-resize-CG2fitJT.js}

@@ -14,15 +14,17 @@
  *
  * Why resize client-side?
  * - Faster perceived uploads and lower bandwidth usage
- * - Consistent avatar sizes and formats (e.g., JPEG 400x400)
+ * - Consistent output sizes and formats (e.g., a 400x400 thumbnail)
  * - No server-side transformation required for common cases
  *
  * Fit strategies
- * - `cover` (default): The image is scaled to cover the target rectangle, and
- *   the excess parts are center-cropped. Good for avatars.
+ * - `cover`: The image is scaled to cover the target rectangle, and the excess
+ *   parts are center-cropped. Good for avatars.
  * - `contain`: The image is scaled to fit entirely within the target rectangle
  *   without cropping, letterboxing if needed. Good when you must preserve the
  *   entire image.
+ * - omitted: scales the whole image to fit without cropping (no pixels are
+ *   discarded).
  *
  * Decoding & EXIF orientation
  * EXIF orientation is a piece of metadata stored inside image files
@@ -48,9 +50,11 @@
  *   library or WASM module; this utility intentionally avoids extra dependencies.
  *
  * Output type & quality
- * - Default output is `image/jpeg` with `quality=0.85`, which is typically
- *   appropriate for avatars. You can switch to `image/png` to preserve
- *   transparency.
+ * - When `type` is omitted the source format is kept if the canvas can encode
+ *   it: a PNG stays a PNG (preserving transparency) and everything else is
+ *   encoded as `image/jpeg`. Set `type` explicitly to force a format.
+ * - JPEG `quality` is optional; when omitted the browser's native encoding
+ *   quality is used rather than an imposed value.
  * - The output filename extension is adjusted to match the chosen MIME type by
  *   default (e.g., `.jpg` or `.png`). You can override naming via the `rename`
  *   option.
@@ -75,9 +79,9 @@
  * const processed = await resizeImage(file, {
  *   width: 400,
  *   height: 400,
- *   fit: 'cover',         // default; center-crops
- *   type: 'image/jpeg',   // default
- *   quality: 0.85,        // default
+ *   fit: 'cover',         // center-crops; omit to fit without cropping
+ *   type: 'image/jpeg',   // omit to keep the source format
+ *   quality: 0.85,        // omit to use the browser's native quality
  * });
  * // Upload `processed` instead of the original file
  * ```
@@ -106,6 +110,17 @@
  * ```
  */
 // (Removed exported ResizeFit to avoid forcing a public symbol.)
+/**
+ * The image formats the canvas can reliably encode, mapped to their filename
+ * extension. Single source of truth for what this util can output: both the
+ * output-type resolution and the output filename extension derive from it. The
+ * `ResizeOptions.type` union below mirrors these keys — keep the two in sync
+ * when adding a format.
+ */
+const ENCODABLE_TYPES = {
+    'image/jpeg': 'jpg',
+    'image/png': 'png',
+};
 /**
  * Resize an image file on the client using Canvas/OffscreenCanvas.
  * Returns a new File with the requested format and dimensions.
@@ -120,7 +135,17 @@
  * @param options - Configuration for the resize operation.
  */
 async function resizeImage(file, options) {
-    const { fit = 'cover', type = 'image/jpeg', quality = 0.85, rename = (name) => renameWithType(name, type), } = options;
+    var _a;
+    // This shared utility carries no opinionated defaults: an omitted option
+    // preserves the source file's own property rather than imposing a value.
+    // Consumers that want a specific default (e.g. limel-profile-picture) apply
+    // it themselves. See the `ResizeOptions` doc for the per-option behavior.
+    const { fit, quality } = options;
+    // When no output type is requested, keep the source file's format if the
+    // canvas can encode it (PNG stays PNG, preserving transparency); anything
+    // else falls back to JPEG.
+    const type = resolveOutputType(file.type, options.type);
+    const rename = (_a = options.rename) !== null && _a !== void 0 ? _a : ((name) => renameWithType(name, type));
     const source = await loadSource(file);
     const sourceWidth = source.width;
     const sourceHeight = source.height;
@@ -209,7 +234,7 @@ function get2dContext(canvas) {
  * Convert the canvas content to a Blob, supporting both canvas types.
  * @param canvas - The source canvas
  * @param type - Output MIME type
- * @param quality - JPEG quality (0..1)
+ * @param quality - JPEG quality (0..1); omit to use the browser default
  */
 function canvasToBlob(canvas, type, quality) {
     if ('convertToBlob' in canvas) {
@@ -295,7 +320,8 @@ async function loadImageElement(file) {
  * @param sh - Source height
  * @param tw - Target width
  * @param th - Target height
- * @param fit - Fit mode (cover/contain)
+ * @param fit - Fit mode; `cover` center-crops, anything else (including
+ * omitted) scales the whole image to fit without cropping
  */
 function computeRects(sw, sh, tw, th, fit) {
     const sRatio = sw / sh;
@@ -333,13 +359,30 @@ function computeRects(sw, sh, tw, th, fit) {
     const dy = (th - drawH) / 2;
     return { sx: 0, sy: 0, sw, sh, dx, dy, dw: drawW, dh: drawH };
 }
+/**
+ * Resolve the output MIME type. An explicit request wins; otherwise the source
+ * file's format is kept when the canvas can encode it (see `ENCODABLE_TYPES`),
+ * so a PNG stays a PNG (preserving transparency) while every other input
+ * (WebP, HEIC, …) falls back to JPEG.
+ *
+ * @param sourceType - MIME type of the input file
+ * @param requested - Explicitly requested output type, if any
+ */
+function resolveOutputType(sourceType, requested) {
+    if (requested) {
+        return requested;
+    }
+    // Keep the source format when the canvas can encode it; otherwise JPEG.
+    const canEncodeSource = Object.prototype.hasOwnProperty.call(ENCODABLE_TYPES, sourceType);
+    return canEncodeSource ? sourceType : 'image/jpeg';
+}
 /**
  * Update filename extension to match the desired MIME type.
  * @param name - Original filename
  * @param type - Output MIME type
  */
 function renameWithType(name, type) {
-    const ext = type === 'image/png' ? 'png' : 'jpg';
+    const ext = ENCODABLE_TYPES[type];
     const idx = name.lastIndexOf('.');
     const base = idx > 0 ? name.slice(0, idx) : name;
     return `${base}.${ext}`;

package/dist/cjs/index.cjs.js

@@ -3,7 +3,7 @@
 var config = require('./config-dit--4m5.js');
 var layout = require('./layout-CL_D-afg.js');
 var types = require('./types-C7gNcwzE.js');
-var imageResize = require('./image-resize-BWRGvgkM.js');
+var imageResize = require('./image-resize-CG2fitJT.js');
 var dispatchResizeEvent = require('./dispatch-resize-event-DH5CaB3p.js');
 
 /**

package/dist/cjs/limel-file.cjs.entry.js

@@ -4,7 +4,7 @@ var index = require('./index-DYg_7kkT.js');
 var translations = require('./translations-Bnw00bkf.js');
 var fileMetadata = require('./file-metadata-BrhOssGG.js');
 var formatBytes = require('./format-bytes-CpUKKU86.js');
-var imageResize = require('./image-resize-BWRGvgkM.js');
+var imageResize = require('./image-resize-CG2fitJT.js');
 require('./icons-isR5V1X0.js');
 require('./get-icon-props-CwpDdQDI.js');
 

package/dist/cjs/limel-profile-picture.cjs.entry.js

@@ -5,13 +5,20 @@ var files = require('./files-Bt11HLi4.js');
 var getIconProps = require('./get-icon-props-CwpDdQDI.js');
 var translations = require('./translations-Bnw00bkf.js');
 var randomString = require('./random-string-BTzDB2ee.js');
-var imageResize = require('./image-resize-BWRGvgkM.js');
+var imageResize = require('./image-resize-CG2fitJT.js');
 var image_template = require('./image.template-DZC6_5a4.js');
 require('./file-metadata-BrhOssGG.js');
 require('./icons-isR5V1X0.js');
 
 const profilePictureCss = () => `@charset "UTF-8";:host(limel-profile-picture){position:relative;display:inline-flex;min-width:1.5rem;min-height:1.5rem;border-radius:var(--profile-picture-border-radius, 100vw);background-color:rgb(var(--contrast-400))}*{box-sizing:border-box}limel-file-dropzone,limel-file-input,button.avatar{display:flex;align-items:center;justify-content:center;width:100%;height:100%}button{appearance:none;background:none;border:none;padding:0;margin:0;font:inherit;color:inherit;text-align:inherit;display:block}button:focus{outline:none}button:focus-visible{outline:none;box-shadow:var(--shadow-depth-8-focused)}button.avatar{overflow:hidden;border-radius:var(--profile-picture-border-radius, 100vw)}:host(:not([disabled]):not([disabled=true])) button.avatar{transition:color var(--limel-clickable-transition-speed, 0.4s) ease, background-color var(--limel-clickable-transition-speed, 0.4s) ease, box-shadow var(--limel-clickable-transform-speed, 0.4s) ease, transform var(--limel-clickable-transform-speed, 0.4s) var(--limel-clickable-transform-timing-function, ease);cursor:pointer;color:var(--limel-theme-on-surface-color);background-color:transparent}:host(:not([disabled]):not([disabled=true])) button.avatar:hover,:host(:not([disabled]):not([disabled=true])) button.avatar:focus,:host(:not([disabled]):not([disabled=true])) button.avatar:focus-visible{will-change:color, background-color, box-shadow, transform}:host(:not([disabled]):not([disabled=true])) button.avatar:hover,:host(:not([disabled]):not([disabled=true])) button.avatar:focus-visible{transform:translate3d(0, 0.01rem, 0);color:var(--limel-theme-on-surface-color);background-color:var(--lime-elevated-surface-background-color)}:host(:not([disabled]):not([disabled=true])) button.avatar:hover{box-shadow:var(--button-shadow-hovered)}:host(:not([disabled]):not([disabled=true])) button.avatar:active{--limel-clickable-transform-timing-function:cubic-bezier(       0.83,       -0.15,       0.49,       1.16   );transform:translate3d(0, 0.05rem, 0);box-shadow:var(--button-shadow-pressed)}:host(:not([disabled]):not([disabled=true])) button.avatar:hover,:host(:not([disabled]):not([disabled=true])) button.avatar:active{--limel-clickable-transition-speed:0.2s;--limel-clickable-transform-speed:0.16s}:host([invalid]:not([invalid=false])) button.avatar{box-shadow:var(--shadow-error-state)}button.remove{transition:color var(--limel-clickable-transition-speed, 0.4s) ease, background-color var(--limel-clickable-transition-speed, 0.4s) ease, box-shadow var(--limel-clickable-transform-speed, 0.4s) ease, transform var(--limel-clickable-transform-speed, 0.4s) var(--limel-clickable-transform-timing-function, ease);cursor:pointer;color:var(--limel-theme-on-surface-color);background-color:rgb(var(--contrast-900))}button.remove:hover,button.remove:focus,button.remove:focus-visible{will-change:color, background-color, box-shadow, transform}button.remove:hover,button.remove:focus-visible{transform:translate3d(0, 0.01rem, 0);color:rgb(var(--color-white));background-color:rgb(var(--color-red-default))}button.remove:hover{box-shadow:var(--button-shadow-hovered)}button.remove:active{--limel-clickable-transform-timing-function:cubic-bezier(       0.83,       -0.15,       0.49,       1.16   );transform:translate3d(0, 0.05rem, 0);box-shadow:var(--button-shadow-pressed)}button.remove:hover,button.remove:active{--limel-clickable-transition-speed:0.2s;--limel-clickable-transform-speed:0.16s}button.remove{cursor:pointer;height:1.25rem;width:1.25rem;border-radius:50%;background-repeat:no-repeat;background-position:center;background-size:0.75rem;background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2032%2032'%3E%3Cdefs/%3E%3Cpath%20fill='rgb(255,255,255)'%20d='M7.219%205.781L5.78%207.22%2014.563%2016%205.78%2024.781%207.22%2026.22%2016%2017.437l8.781%208.782%201.438-1.438L17.437%2016l8.782-8.781L24.78%205.78%2016%2014.563z'/%3E%3C/svg%3E");position:absolute;top:0;left:0;opacity:0}:host(:hover) button.remove,:host(:focus) button.remove,:host(:focus-visible) button.remove,:host(:focus-within) button.remove,:host(:active) button.remove{animation:show 0.4s ease-in-out forwards}@keyframes show{0%{transform:scale(0.9);opacity:0}100%{transform:scale(1);opacity:1}}button.avatar,img,limel-icon{border-radius:var(--profile-picture-border-radius, 100vw)}limel-icon{width:calc(100% - 1rem);min-width:1rem;max-width:4rem;color:var(--limel-theme-text-secondary-on-background-color);margin:auto}img{object-fit:var(--limel-profile-picture-object-fit);width:100%;height:100%}:host(.has-image-error) img{border:1px dashed rgb(var(--contrast-600));background:url("data:image/svg+xml;charset=utf-8, <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8' style='fill-rule:evenodd;'><path fill='rgba(186,186,192,0.16)' d='M0 0h4v4H0zM4 4h4v4H4z'/></svg>");background-size:0.5rem}limel-spinner{position:absolute;inset:0;margin:auto}limel-popover{position:absolute;inset:auto 0 0 auto;display:block;width:2.25rem;height:2.25rem}`;
 
+/**
+ * Avatar output defaults. These live in the component rather than in the shared
+ * `resizeImage` util (which is deliberately unopinionated): avatars are stored
+ * as a compact JPEG at a fixed quality. Callers can override them via `resize`.
+ */
+const AVATAR_OUTPUT_TYPE = 'image/jpeg';
+const AVATAR_JPEG_QUALITY = 0.85;
 const ProfilePicture = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
@@ -70,7 +77,7 @@ const ProfilePicture = class {
             return (index.h("limel-tooltip", { elementId: this.browseButtonId, label: this.helperText }));
         };
         this.handleNewFiles = async (event) => {
-            var _a, _b;
+            var _a, _b, _c, _d;
             event.stopPropagation();
             if (this.disabled) {
                 return;
@@ -89,10 +96,10 @@ const ProfilePicture = class {
             // Optional client-side resize
             if (this.resize && file.fileContent instanceof File) {
                 try {
-                    const processed = await imageResize.resizeImage(file.fileContent, Object.assign(Object.assign({}, this.resize), { fit: (_b = this.resize.fit) !== null && _b !== void 0 ? _b : this.imageFit }));
+                    const processed = await imageResize.resizeImage(file.fileContent, Object.assign(Object.assign({}, this.resize), { fit: (_b = this.resize.fit) !== null && _b !== void 0 ? _b : this.imageFit, type: (_c = this.resize.type) !== null && _c !== void 0 ? _c : AVATAR_OUTPUT_TYPE, quality: (_d = this.resize.quality) !== null && _d !== void 0 ? _d : AVATAR_JPEG_QUALITY }));
                     out = Object.assign(Object.assign({}, file), { filename: processed.name, size: processed.size, contentType: processed.type, fileContent: processed });
                 }
-                catch (_c) {
+                catch (_e) {
                     // Fall back to original file if resize fails
                     out = file;
                 }

package/dist/cjs/limel-prosemirror-adapter.cjs.entry.js

@@ -15869,12 +15869,15 @@ function getImageNodeMarkdownSerializer(language, inlineImages) {
  * @param node
  */
 function applyImageStyles(img, node) {
-    img.style.height = node.attrs.height;
-    img.style.width = node.attrs.width;
+    img.style.height = toCssLength(node.attrs.height);
+    img.style.width = toCssLength(node.attrs.width);
     img.style.minHeight = node.attrs.minHeight;
     img.style.minWidth = node.attrs.minWidth;
     img.style.maxWidth = node.attrs.maxWidth;
 }
+function toCssLength(value) {
+    return /^\d+$/.test(value) ? `${value}px` : value;
+}
 /**
  * Recursively checks if a ProseMirror node or any of its descendants is an
  * image node.
@@ -15920,11 +15923,6 @@ function escapeAttributeValue(value) {
         .replaceAll('<', '&lt;')
         .replaceAll('>', '&gt;');
 }
-// Dimensions are emitted as CSS-unit strings (e.g. `width="300px"`), matching
-// what `applyImageStyles` reads back when the tag is re-parsed inside the
-// editor. The external renderer of this microformat (the `limebb-inline-image`
-// building block) must therefore treat `width`/`height` as CSS lengths, not as
-// bare HTML pixel counts.
 function getInlineImageHTML(attrs, tag) {
     var _a;
     const attributes = [

package/dist/collection/components/profile-picture/profile-picture.js

@@ -5,6 +5,13 @@ import translate from "../../global/translations";
 import { createRandomString } from "../../util/random-string";
 import { resizeImage } from "../../util/image-resize";
 import { ImageTemplate } from "../../util/image.template";
+/**
+ * Avatar output defaults. These live in the component rather than in the shared
+ * `resizeImage` util (which is deliberately unopinionated): avatars are stored
+ * as a compact JPEG at a fixed quality. Callers can override them via `resize`.
+ */
+const AVATAR_OUTPUT_TYPE = 'image/jpeg';
+const AVATAR_JPEG_QUALITY = 0.85;
 /**
  * This component displays a profile picture, while allowing the user
  * to change it via a file input or drag-and-drop.
@@ -80,7 +87,7 @@ export class ProfilePicture {
             return (h("limel-tooltip", { elementId: this.browseButtonId, label: this.helperText }));
         };
         this.handleNewFiles = async (event) => {
-            var _a, _b;
+            var _a, _b, _c, _d;
             event.stopPropagation();
             if (this.disabled) {
                 return;
@@ -99,10 +106,10 @@ export class ProfilePicture {
             // Optional client-side resize
             if (this.resize && file.fileContent instanceof File) {
                 try {
-                    const processed = await resizeImage(file.fileContent, Object.assign(Object.assign({}, this.resize), { fit: (_b = this.resize.fit) !== null && _b !== void 0 ? _b : this.imageFit }));
+                    const processed = await resizeImage(file.fileContent, Object.assign(Object.assign({}, this.resize), { fit: (_b = this.resize.fit) !== null && _b !== void 0 ? _b : this.imageFit, type: (_c = this.resize.type) !== null && _c !== void 0 ? _c : AVATAR_OUTPUT_TYPE, quality: (_d = this.resize.quality) !== null && _d !== void 0 ? _d : AVATAR_JPEG_QUALITY }));
                     out = Object.assign(Object.assign({}, file), { filename: processed.name, size: processed.size, contentType: processed.type, fileContent: processed });
                 }
-                catch (_c) {
+                catch (_e) {
                     // Fall back to original file if resize fails
                     out = file;
                 }
@@ -556,7 +563,7 @@ export class ProfilePicture {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "Optional client-side resize before emitting the file.\nIf provided, the selected image will be resized on the client device.\n:::note\nHEIC may not decode in all browsers; when decoding fails, the original\nfile will be emitted. See the examples for more info.\n:::"
+                    "text": "Optional client-side resize before emitting the file.\nIf provided, the selected image will be resized on the client device.\nOmitted options fall back to avatar defaults: `image/jpeg`, `quality`\n`0.85`, and the component's `imageFit`.\n:::note\nHEIC may not decode in all browsers; when decoding fails, the original\nfile will be emitted. See the examples for more info.\n:::"
                 },
                 "getter": false,
                 "setter": false

package/dist/collection/components/text-editor/prosemirror-adapter/plugins/image/node.js

@@ -38,12 +38,15 @@ export function getImageNodeMarkdownSerializer(language, inlineImages) {
  * @param node
  */
 export function applyImageStyles(img, node) {
-    img.style.height = node.attrs.height;
-    img.style.width = node.attrs.width;
+    img.style.height = toCssLength(node.attrs.height);
+    img.style.width = toCssLength(node.attrs.width);
     img.style.minHeight = node.attrs.minHeight;
     img.style.minWidth = node.attrs.minWidth;
     img.style.maxWidth = node.attrs.maxWidth;
 }
+function toCssLength(value) {
+    return /^\d+$/.test(value) ? `${value}px` : value;
+}
 /**
  * Recursively checks if a ProseMirror node or any of its descendants is an
  * image node.
@@ -89,11 +92,6 @@ function escapeAttributeValue(value) {
         .replaceAll('<', '&lt;')
         .replaceAll('>', '&gt;');
 }
-// Dimensions are emitted as CSS-unit strings (e.g. `width="300px"`), matching
-// what `applyImageStyles` reads back when the tag is re-parsed inside the
-// editor. The external renderer of this microformat (the `limebb-inline-image`
-// building block) must therefore treat `width`/`height` as CSS lengths, not as
-// bare HTML pixel counts.
 function getInlineImageHTML(attrs, tag) {
     var _a;
     const attributes = [

package/dist/collection/util/image-resize.js

@@ -12,15 +12,17 @@
  *
  * Why resize client-side?
  * - Faster perceived uploads and lower bandwidth usage
- * - Consistent avatar sizes and formats (e.g., JPEG 400x400)
+ * - Consistent output sizes and formats (e.g., a 400x400 thumbnail)
  * - No server-side transformation required for common cases
  *
  * Fit strategies
- * - `cover` (default): The image is scaled to cover the target rectangle, and
- *   the excess parts are center-cropped. Good for avatars.
+ * - `cover`: The image is scaled to cover the target rectangle, and the excess
+ *   parts are center-cropped. Good for avatars.
  * - `contain`: The image is scaled to fit entirely within the target rectangle
  *   without cropping, letterboxing if needed. Good when you must preserve the
  *   entire image.
+ * - omitted: scales the whole image to fit without cropping (no pixels are
+ *   discarded).
  *
  * Decoding & EXIF orientation
  * EXIF orientation is a piece of metadata stored inside image files
@@ -46,9 +48,11 @@
  *   library or WASM module; this utility intentionally avoids extra dependencies.
  *
  * Output type & quality
- * - Default output is `image/jpeg` with `quality=0.85`, which is typically
- *   appropriate for avatars. You can switch to `image/png` to preserve
- *   transparency.
+ * - When `type` is omitted the source format is kept if the canvas can encode
+ *   it: a PNG stays a PNG (preserving transparency) and everything else is
+ *   encoded as `image/jpeg`. Set `type` explicitly to force a format.
+ * - JPEG `quality` is optional; when omitted the browser's native encoding
+ *   quality is used rather than an imposed value.
  * - The output filename extension is adjusted to match the chosen MIME type by
  *   default (e.g., `.jpg` or `.png`). You can override naming via the `rename`
  *   option.
@@ -73,9 +77,9 @@
  * const processed = await resizeImage(file, {
  *   width: 400,
  *   height: 400,
- *   fit: 'cover',         // default; center-crops
- *   type: 'image/jpeg',   // default
- *   quality: 0.85,        // default
+ *   fit: 'cover',         // center-crops; omit to fit without cropping
+ *   type: 'image/jpeg',   // omit to keep the source format
+ *   quality: 0.85,        // omit to use the browser's native quality
  * });
  * // Upload `processed` instead of the original file
  * ```
@@ -104,6 +108,17 @@
  * ```
  */
 // (Removed exported ResizeFit to avoid forcing a public symbol.)
+/**
+ * The image formats the canvas can reliably encode, mapped to their filename
+ * extension. Single source of truth for what this util can output: both the
+ * output-type resolution and the output filename extension derive from it. The
+ * `ResizeOptions.type` union below mirrors these keys — keep the two in sync
+ * when adding a format.
+ */
+const ENCODABLE_TYPES = {
+    'image/jpeg': 'jpg',
+    'image/png': 'png',
+};
 /**
  * Resize an image file on the client using Canvas/OffscreenCanvas.
  * Returns a new File with the requested format and dimensions.
@@ -118,7 +133,17 @@
  * @param options - Configuration for the resize operation.
  */
 export async function resizeImage(file, options) {
-    const { fit = 'cover', type = 'image/jpeg', quality = 0.85, rename = (name) => renameWithType(name, type), } = options;
+    var _a;
+    // This shared utility carries no opinionated defaults: an omitted option
+    // preserves the source file's own property rather than imposing a value.
+    // Consumers that want a specific default (e.g. limel-profile-picture) apply
+    // it themselves. See the `ResizeOptions` doc for the per-option behavior.
+    const { fit, quality } = options;
+    // When no output type is requested, keep the source file's format if the
+    // canvas can encode it (PNG stays PNG, preserving transparency); anything
+    // else falls back to JPEG.
+    const type = resolveOutputType(file.type, options.type);
+    const rename = (_a = options.rename) !== null && _a !== void 0 ? _a : ((name) => renameWithType(name, type));
     const source = await loadSource(file);
     const sourceWidth = source.width;
     const sourceHeight = source.height;
@@ -207,7 +232,7 @@ function get2dContext(canvas) {
  * Convert the canvas content to a Blob, supporting both canvas types.
  * @param canvas - The source canvas
  * @param type - Output MIME type
- * @param quality - JPEG quality (0..1)
+ * @param quality - JPEG quality (0..1); omit to use the browser default
  */
 function canvasToBlob(canvas, type, quality) {
     if ('convertToBlob' in canvas) {
@@ -293,7 +318,8 @@ async function loadImageElement(file) {
  * @param sh - Source height
  * @param tw - Target width
  * @param th - Target height
- * @param fit - Fit mode (cover/contain)
+ * @param fit - Fit mode; `cover` center-crops, anything else (including
+ * omitted) scales the whole image to fit without cropping
  */
 function computeRects(sw, sh, tw, th, fit) {
     const sRatio = sw / sh;
@@ -331,13 +357,30 @@ function computeRects(sw, sh, tw, th, fit) {
     const dy = (th - drawH) / 2;
     return { sx: 0, sy: 0, sw, sh, dx, dy, dw: drawW, dh: drawH };
 }
+/**
+ * Resolve the output MIME type. An explicit request wins; otherwise the source
+ * file's format is kept when the canvas can encode it (see `ENCODABLE_TYPES`),
+ * so a PNG stays a PNG (preserving transparency) while every other input
+ * (WebP, HEIC, …) falls back to JPEG.
+ *
+ * @param sourceType - MIME type of the input file
+ * @param requested - Explicitly requested output type, if any
+ */
+function resolveOutputType(sourceType, requested) {
+    if (requested) {
+        return requested;
+    }
+    // Keep the source format when the canvas can encode it; otherwise JPEG.
+    const canEncodeSource = Object.prototype.hasOwnProperty.call(ENCODABLE_TYPES, sourceType);
+    return canEncodeSource ? sourceType : 'image/jpeg';
+}
 /**
  * Update filename extension to match the desired MIME type.
  * @param name - Original filename
  * @param type - Output MIME type
  */
 function renameWithType(name, type) {
-    const ext = type === 'image/png' ? 'png' : 'jpg';
+    const ext = ENCODABLE_TYPES[type];
     const idx = name.lastIndexOf('.');
     const base = idx > 0 ? name.slice(0, idx) : name;
     return `${base}.${ext}`;

package/dist/esm/{image-resize-65ma7B85.js → image-resize-BTSG--2-.js}

@@ -12,15 +12,17 @@
  *
  * Why resize client-side?
  * - Faster perceived uploads and lower bandwidth usage
- * - Consistent avatar sizes and formats (e.g., JPEG 400x400)
+ * - Consistent output sizes and formats (e.g., a 400x400 thumbnail)
  * - No server-side transformation required for common cases
  *
  * Fit strategies
- * - `cover` (default): The image is scaled to cover the target rectangle, and
- *   the excess parts are center-cropped. Good for avatars.
+ * - `cover`: The image is scaled to cover the target rectangle, and the excess
+ *   parts are center-cropped. Good for avatars.
  * - `contain`: The image is scaled to fit entirely within the target rectangle
  *   without cropping, letterboxing if needed. Good when you must preserve the
  *   entire image.
+ * - omitted: scales the whole image to fit without cropping (no pixels are
+ *   discarded).
  *
  * Decoding & EXIF orientation
  * EXIF orientation is a piece of metadata stored inside image files
@@ -46,9 +48,11 @@
  *   library or WASM module; this utility intentionally avoids extra dependencies.
  *
  * Output type & quality
- * - Default output is `image/jpeg` with `quality=0.85`, which is typically
- *   appropriate for avatars. You can switch to `image/png` to preserve
- *   transparency.
+ * - When `type` is omitted the source format is kept if the canvas can encode
+ *   it: a PNG stays a PNG (preserving transparency) and everything else is
+ *   encoded as `image/jpeg`. Set `type` explicitly to force a format.
+ * - JPEG `quality` is optional; when omitted the browser's native encoding
+ *   quality is used rather than an imposed value.
  * - The output filename extension is adjusted to match the chosen MIME type by
  *   default (e.g., `.jpg` or `.png`). You can override naming via the `rename`
  *   option.
@@ -73,9 +77,9 @@
  * const processed = await resizeImage(file, {
  *   width: 400,
  *   height: 400,
- *   fit: 'cover',         // default; center-crops
- *   type: 'image/jpeg',   // default
- *   quality: 0.85,        // default
+ *   fit: 'cover',         // center-crops; omit to fit without cropping
+ *   type: 'image/jpeg',   // omit to keep the source format
+ *   quality: 0.85,        // omit to use the browser's native quality
  * });
  * // Upload `processed` instead of the original file
  * ```
@@ -104,6 +108,17 @@
  * ```
  */
 // (Removed exported ResizeFit to avoid forcing a public symbol.)
+/**
+ * The image formats the canvas can reliably encode, mapped to their filename
+ * extension. Single source of truth for what this util can output: both the
+ * output-type resolution and the output filename extension derive from it. The
+ * `ResizeOptions.type` union below mirrors these keys — keep the two in sync
+ * when adding a format.
+ */
+const ENCODABLE_TYPES = {
+    'image/jpeg': 'jpg',
+    'image/png': 'png',
+};
 /**
  * Resize an image file on the client using Canvas/OffscreenCanvas.
  * Returns a new File with the requested format and dimensions.
@@ -118,7 +133,17 @@
  * @param options - Configuration for the resize operation.
  */
 async function resizeImage(file, options) {
-    const { fit = 'cover', type = 'image/jpeg', quality = 0.85, rename = (name) => renameWithType(name, type), } = options;
+    var _a;
+    // This shared utility carries no opinionated defaults: an omitted option
+    // preserves the source file's own property rather than imposing a value.
+    // Consumers that want a specific default (e.g. limel-profile-picture) apply
+    // it themselves. See the `ResizeOptions` doc for the per-option behavior.
+    const { fit, quality } = options;
+    // When no output type is requested, keep the source file's format if the
+    // canvas can encode it (PNG stays PNG, preserving transparency); anything
+    // else falls back to JPEG.
+    const type = resolveOutputType(file.type, options.type);
+    const rename = (_a = options.rename) !== null && _a !== void 0 ? _a : ((name) => renameWithType(name, type));
     const source = await loadSource(file);
     const sourceWidth = source.width;
     const sourceHeight = source.height;
@@ -207,7 +232,7 @@ function get2dContext(canvas) {
  * Convert the canvas content to a Blob, supporting both canvas types.
  * @param canvas - The source canvas
  * @param type - Output MIME type
- * @param quality - JPEG quality (0..1)
+ * @param quality - JPEG quality (0..1); omit to use the browser default
  */
 function canvasToBlob(canvas, type, quality) {
     if ('convertToBlob' in canvas) {
@@ -293,7 +318,8 @@ async function loadImageElement(file) {
  * @param sh - Source height
  * @param tw - Target width
  * @param th - Target height
- * @param fit - Fit mode (cover/contain)
+ * @param fit - Fit mode; `cover` center-crops, anything else (including
+ * omitted) scales the whole image to fit without cropping
  */
 function computeRects(sw, sh, tw, th, fit) {
     const sRatio = sw / sh;
@@ -331,13 +357,30 @@ function computeRects(sw, sh, tw, th, fit) {
     const dy = (th - drawH) / 2;
     return { sx: 0, sy: 0, sw, sh, dx, dy, dw: drawW, dh: drawH };
 }
+/**
+ * Resolve the output MIME type. An explicit request wins; otherwise the source
+ * file's format is kept when the canvas can encode it (see `ENCODABLE_TYPES`),
+ * so a PNG stays a PNG (preserving transparency) while every other input
+ * (WebP, HEIC, …) falls back to JPEG.
+ *
+ * @param sourceType - MIME type of the input file
+ * @param requested - Explicitly requested output type, if any
+ */
+function resolveOutputType(sourceType, requested) {
+    if (requested) {
+        return requested;
+    }
+    // Keep the source format when the canvas can encode it; otherwise JPEG.
+    const canEncodeSource = Object.prototype.hasOwnProperty.call(ENCODABLE_TYPES, sourceType);
+    return canEncodeSource ? sourceType : 'image/jpeg';
+}
 /**
  * Update filename extension to match the desired MIME type.
  * @param name - Original filename
  * @param type - Output MIME type
  */
 function renameWithType(name, type) {
-    const ext = type === 'image/png' ? 'png' : 'jpg';
+    const ext = ENCODABLE_TYPES[type];
     const idx = name.lastIndexOf('.');
     const base = idx > 0 ? name.slice(0, idx) : name;
     return `${base}.${ext}`;

package/dist/esm/index.js

@@ -1,7 +1,7 @@
 export { g as globalConfig } from './config-Dnt5w_Bp.js';
 export { _ as _mapLayout } from './layout-C4zsCPOF.js';
 export { E as EditorMenuTypes, L as LevelMapping, M as MouseButtons, e as editorMenuTypesArray, i as isInlineImageTag } from './types-C_Yu8dOg.js';
-export { r as resizeImage } from './image-resize-65ma7B85.js';
+export { r as resizeImage } from './image-resize-BTSG--2-.js';
 export { r as redrawComponents } from './dispatch-resize-event-z_E3sq3p.js';
 
 /**

package/dist/esm/limel-file.entry.js

@@ -2,7 +2,7 @@ import { r as registerInstance, c as createEvent, h, H as Host } from './index-B
 import { t as translate } from './translations-Cb9R_zmF.js';
 import { g as getFileBackgroundColor, a as getFileColor, b as getFileExtensionTitle, c as getFileIcon } from './file-metadata-BHzkIH4g.js';
 import { f as formatBytes } from './format-bytes-u_sd2HMb.js';
-import { r as resizeImage } from './image-resize-65ma7B85.js';
+import { r as resizeImage } from './image-resize-BTSG--2-.js';
 import './icons-Bu_YRgCL.js';
 import './get-icon-props-CgNJbSP4.js';