@leavepulse/ui 0.37.7 → 0.37.9

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/dist/components/LpScrollArea.vue.d.ts

@@ -15,8 +15,8 @@ declare const __VLS_base: import('vue').DefineComponent<__VLS_Props, {
 }, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{
     onScroll?: ((event: Event) => any) | undefined;
 }>, {
-    fade: boolean;
     instant: boolean;
+    fade: boolean;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;

package/dist/composables/useShift.js

@@ -14,15 +14,24 @@ function useShift(options = {}) {
   let lastWidth = 0;
   let inFlight = false;
   let tweenStart = 0;
-  const scrolled = /* @__PURE__ */ new Map();
+  const scrolled = /* @__PURE__ */ new Set();
   const rememberScroll = (event) => {
     const target = event.target;
-    if (target instanceof Element) scrolled.set(target, target.scrollTop);
+    if (target instanceof Element) scrolled.add(target);
   };
-  function restoreScroll() {
-    for (const [node, top] of scrolled) {
+  function readScroll() {
+    const tops = /* @__PURE__ */ new Map();
+    for (const node of scrolled) {
       if (!node.isConnected) scrolled.delete(node);
-      else if (node.scrollTop !== top) node.scrollTop = top;
+      else tops.set(node, node.scrollTop);
+    }
+    return tops;
+  }
+  function restoreScroll(tops) {
+    for (const [node, top] of tops) {
+      if (node.isConnected && node.scrollTop !== top) {
+        node.scrollTo({ top, behavior: "instant" });
+      }
     }
   }
   const axisOf = () => toValue(options.axis) ?? "height";
@@ -39,6 +48,7 @@ function useShift(options = {}) {
     }
     const fromHeight = lastHeight;
     const fromWidth = lastWidth;
+    const tops = readScroll();
     if (wantsHeight()) {
       node.style.height = "";
       node.style.maxHeight = "none";
@@ -51,7 +61,7 @@ function useShift(options = {}) {
     const toWidth = wantsWidth() ? node.offsetWidth : 0;
     if (wantsHeight()) node.style.maxHeight = "";
     if (wantsWidth()) node.style.maxWidth = "";
-    restoreScroll();
+    restoreScroll(tops);
     lastHeight = toHeight;
     lastWidth = toWidth;
     const movesHeight = wantsHeight() && fromHeight !== 0 && toHeight !== fromHeight;
@@ -62,7 +72,7 @@ function useShift(options = {}) {
     void node.offsetHeight;
     if (movesHeight) node.style.height = `${toHeight}px`;
     if (movesWidth) node.style.width = `${toWidth}px`;
-    restoreScroll();
+    restoreScroll(tops);
     inFlight = true;
     tweenStart = performance.now();
     resizing.value = true;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@leavepulse/ui",
-  "version": "0.37.7",
+  "version": "0.37.9",
   "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))
 }

package/src/composables/useShift.ts

@@ -92,22 +92,40 @@ export function useShift(
   /** When the in-flight tween started, to tell a duplicate from a follow-up. */
   let tweenStart = 0
   /**
-   * Scroll positions inside the box, kept from the scroll events themselves.
+   * Scrolling lists inside the box, found through their scroll events.
    * Measuring lifts the height cap, and for that one reflow a scrolling list
    * inside (a picker, a span tree) is as tall as its content: it no longer
    * overflows, the browser clamps its scrollTop to 0, and putting the cap back
    * does not bring the position back. Every click that changed the content —
    * ticking an item, picking a span — threw the list back to the top.
+   *
+   * The position to put back is read live just before measuring, and only a
+   * list the measurement actually moved is touched, with an instant write. An
+   * earlier version replayed the last scroll event's figure through
+   * `scrollTop` on every retune. Inside a `scroll-smooth` area that write is
+   * itself animated, its in-between frames were recorded as new positions,
+   * and any mutation while the user scrolled — a row re-rendering on hover —
+   * replayed a stale one: a long dialog crept back to the top and could not
+   * be scrolled at all.
    */
-  const scrolled = new Map<Element, number>()
+  const scrolled = new Set<Element>()
   const rememberScroll = (event: Event) => {
     const target = event.target
-    if (target instanceof Element) scrolled.set(target, target.scrollTop)
+    if (target instanceof Element) scrolled.add(target)
   }
-  function restoreScroll() {
-    for (const [node, top] of scrolled) {
+  function readScroll(): Map<Element, number> {
+    const tops = new Map<Element, number>()
+    for (const node of scrolled) {
       if (!node.isConnected) scrolled.delete(node)
-      else if (node.scrollTop !== top) node.scrollTop = top
+      else tops.set(node, node.scrollTop)
+    }
+    return tops
+  }
+  function restoreScroll(tops: Map<Element, number>) {
+    for (const [node, top] of tops) {
+      if (node.isConnected && node.scrollTop !== top) {
+        node.scrollTo({ top, behavior: "instant" })
+      }
     }
   }
 
@@ -153,6 +171,7 @@ export function useShift(
     // already reflowed, so the element can only report where it is going.
     const fromHeight = lastHeight
     const fromWidth = lastWidth
+    const tops = readScroll()
 
     // Measured with any cap lifted, then the clamp is left to CSS. A `max-*`
     // from a class makes the element report the clipped figure once the cap
@@ -170,7 +189,7 @@ export function useShift(
     const toWidth = wantsWidth() ? node.offsetWidth : 0
     if (wantsHeight()) node.style.maxHeight = ""
     if (wantsWidth()) node.style.maxWidth = ""
-    restoreScroll()
+    restoreScroll(tops)
     lastHeight = toHeight
     lastWidth = toWidth
 
@@ -193,7 +212,7 @@ export function useShift(
     void node.offsetHeight
     if (movesHeight) node.style.height = `${toHeight}px`
     if (movesWidth) node.style.width = `${toWidth}px`
-    restoreScroll()
+    restoreScroll(tops)
 
     inFlight = true
     tweenStart = performance.now()