@leavepulse/ui 0.37.7 → 0.37.8

package/dist/assets/{LpImageEditor-BsSwej47.css → LpImageEditor-D-s8tNGO.css}

@@ -2,22 +2,22 @@
 /* The picture settles into the frame instead of appearing in it. Scale rather
    than a slide: the frame is the fixed thing here and the image lives inside
    it, so anything that moved would read as a crop that had shifted. */
-.lp-editor__image[data-v-3587f639] {
-  animation: lp-editor-in-3587f639 var(--duration-slow) var(--ease-settle) both;
+.lp-editor__image[data-v-667d4388] {
+  animation: lp-editor-in-667d4388 var(--duration-slow) var(--ease-settle) both;
 }
-.lp-editor__image--waiting[data-v-3587f639] {
+.lp-editor__image--waiting[data-v-667d4388] {
   opacity: 0;
   animation: none;
 }
-@keyframes lp-editor-in-3587f639 {
+@keyframes lp-editor-in-667d4388 {
 from {
     opacity: 0;
     scale: 1.04;
 }
 }
 @media (prefers-reduced-motion: reduce) {
-.lp-editor__image[data-v-3587f639],
-  .lp-editor__image--waiting[data-v-3587f639] {
+.lp-editor__image[data-v-667d4388],
+  .lp-editor__image--waiting[data-v-667d4388] {
     opacity: 1;
     scale: 1;
     animation: none;

package/dist/components/LpImageEditor.vue.d.ts

@@ -15,7 +15,19 @@ declare const __VLS_export: import('vue').DefineComponent<{
     aspect?: "free" | "square" | "4:3" | "3:4" | "16:9" | number;
     /** Longest edge of the exported image. Larger sources are scaled down. */
     maxEdge?: number;
-    /** JPEG quality of the export. */
+    /**
+     * Encoding of the export; read the result's `blob.type` for the one used.
+     *
+     * JPEG, the default, is the smallest for photographs, the case this was
+     * built for. It has no alpha channel, though: a transparent PNG comes back
+     * with its background filled black, and a logo or an icon is ruined by the
+     * crop. "source" keeps the picture's own format where a canvas can write it
+     * (PNG, JPEG, WebP) and falls back to PNG for the ones it cannot (GIF, BMP,
+     * SVG), so transparency survives either way. An animated GIF still comes
+     * back as its first frame: a canvas holds one picture.
+     */
+    type?: "image/jpeg" | "image/png" | "image/webp" | "source";
+    /** Quality of a lossy export (JPEG, WebP); PNG ignores it. */
     quality?: number;
     /**
      * Labels for the toolbar. Defaulted in English rather than left blank: an
@@ -61,7 +73,19 @@ declare const __VLS_export: import('vue').DefineComponent<{
     aspect?: "free" | "square" | "4:3" | "3:4" | "16:9" | number;
     /** Longest edge of the exported image. Larger sources are scaled down. */
     maxEdge?: number;
-    /** JPEG quality of the export. */
+    /**
+     * Encoding of the export; read the result's `blob.type` for the one used.
+     *
+     * JPEG, the default, is the smallest for photographs, the case this was
+     * built for. It has no alpha channel, though: a transparent PNG comes back
+     * with its background filled black, and a logo or an icon is ruined by the
+     * crop. "source" keeps the picture's own format where a canvas can write it
+     * (PNG, JPEG, WebP) and falls back to PNG for the ones it cannot (GIF, BMP,
+     * SVG), so transparency survives either way. An animated GIF still comes
+     * back as its first frame: a canvas holds one picture.
+     */
+    type?: "image/jpeg" | "image/png" | "image/webp" | "source";
+    /** Quality of a lossy export (JPEG, WebP); PNG ignores it. */
     quality?: number;
     /**
      * Labels for the toolbar. Defaulted in English rather than left blank: an
@@ -73,6 +97,7 @@ declare const __VLS_export: import('vue').DefineComponent<{
     /** Fade the picture in when the editor first comes into view. */
     animate?: boolean;
 }> & Readonly<{}>, {
+    type: "image/jpeg" | "image/png" | "image/webp" | "source";
     animate: boolean;
     labels: Partial<Record<"rotateLeft" | "rotateRight" | "zoomIn" | "zoomOut" | "reset" | "canvas", string>>;
     aspect: "free" | "square" | "4:3" | "3:4" | "16:9" | number;

package/dist/components/LpImageEditor.vue.js

@@ -7,7 +7,7 @@ import "reka-ui";
 import { _ as _sfc_main$2 } from "../chunks/LpIcon-CCnX5_2j.js";
 import { useMergedAttrs } from "../composables/useMergedClass.js";
 import { _ as _export_sfc } from "../chunks/_plugin-vue_export-helper-1tPrXgE0.js";
-import '../assets/LpImageEditor-BsSwej47.css';const _hoisted_1 = ["aria-label"];
+import '../assets/LpImageEditor-D-s8tNGO.css';const _hoisted_1 = ["aria-label"];
 const _hoisted_2 = ["src"];
 const _hoisted_3 = {
   key: 0,
@@ -25,6 +25,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     file: {},
     aspect: { default: "free" },
     maxEdge: { default: 2400 },
+    type: { default: "image/jpeg" },
     quality: { default: 0.9 },
     labels: { default: () => ({}) },
     animate: { type: Boolean, default: true }
@@ -164,9 +165,14 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       const readY = (turned ? centreX : centreY) - readH / 2;
       ctx.drawImage(picture, readX, readY, readW, readH, -readW / 2, -readH / 2, readW, readH);
       return await new Promise(
-        (resolve) => canvas.toBlob(resolve, "image/jpeg", props.quality)
+        (resolve) => canvas.toBlob(resolve, outputType.value, props.quality)
       );
     }
+    const ENCODABLE = /* @__PURE__ */ new Set(["image/png", "image/jpeg", "image/webp"]);
+    const outputType = computed(() => {
+      if (props.type !== "source") return props.type;
+      return ENCODABLE.has(props.file.type) ? props.file.type : "image/png";
+    });
     function clamp(value, low, high) {
       return Math.min(Math.max(value, low), Math.max(low, high));
     }
@@ -357,7 +363,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const LpImageEditor = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-3587f639"]]);
+const LpImageEditor = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-667d4388"]]);
 export {
   LpImageEditor as default
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@leavepulse/ui",
-  "version": "0.37.7",
+  "version": "0.37.8",
   "type": "module",
   "description": "LeavePulse token-driven Vue component kit.",
   "repository": {

package/src/components/LpImageEditor.vue

@@ -48,7 +48,19 @@ const props = withDefaults(
     aspect?: "free" | "square" | "4:3" | "3:4" | "16:9" | number
     /** Longest edge of the exported image. Larger sources are scaled down. */
     maxEdge?: number
-    /** JPEG quality of the export. */
+    /**
+     * Encoding of the export; read the result's `blob.type` for the one used.
+     *
+     * JPEG, the default, is the smallest for photographs, the case this was
+     * built for. It has no alpha channel, though: a transparent PNG comes back
+     * with its background filled black, and a logo or an icon is ruined by the
+     * crop. "source" keeps the picture's own format where a canvas can write it
+     * (PNG, JPEG, WebP) and falls back to PNG for the ones it cannot (GIF, BMP,
+     * SVG), so transparency survives either way. An animated GIF still comes
+     * back as its first frame: a canvas holds one picture.
+     */
+    type?: "image/jpeg" | "image/png" | "image/webp" | "source"
+    /** Quality of a lossy export (JPEG, WebP); PNG ignores it. */
     quality?: number
     /**
      * Labels for the toolbar. Defaulted in English rather than left blank: an
@@ -62,7 +74,7 @@ const props = withDefaults(
     /** Fade the picture in when the editor first comes into view. */
     animate?: boolean
   }>(),
-  { aspect: "free", maxEdge: 2400, quality: 0.9, labels: () => ({}), animate: true },
+  { aspect: "free", maxEdge: 2400, type: "image/jpeg", quality: 0.9, labels: () => ({}), animate: true },
 )
 
 // Same rule as the rest of the kit: the entrance belongs to arrival, not to
@@ -289,10 +301,17 @@ async function exportImage(): Promise<Blob | null> {
   ctx.drawImage(picture, readX, readY, readW, readH, -readW / 2, -readH / 2, readW, readH)
 
   return await new Promise<Blob | null>((resolve) =>
-    canvas.toBlob(resolve, "image/jpeg", props.quality),
+    canvas.toBlob(resolve, outputType.value, props.quality),
   )
 }
 
+const ENCODABLE = new Set(["image/png", "image/jpeg", "image/webp"])
+
+const outputType = computed(() => {
+  if (props.type !== "source") return props.type
+  return ENCODABLE.has(props.file.type) ? props.file.type : "image/png"
+})
+
 function clamp(value: number, low: number, high: number) {
   return Math.min(Math.max(value, low), Math.max(low, high))
 }