sveltekit-ui 1.1.89 → 1.1.90

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # Changelog
 
+## 1.1.90 - 2026-10-21
+
+### Image editor
+
+- Add clockwise and counterclockwise 90-degree rotation controls to Crop, with full-resolution export and the existing undo/redo history.
+- Export owned image bytes locally without fetching data/object URLs; preserve the source and display export failures.
+- Expose the async `rotate(degrees)` manager method, guard concurrent/disabled edits and show transformation failures without replacing the source.
+
 ## 1.1.89 - 2026-10-16
 
 ### Component fixes

package/dist/Components/ImageEditor/Panels/Crop/index.svelte

@@ -7,6 +7,10 @@
 </script>
 
 <div class="container">
+  <div class="rotation_controls" aria-label="Image rotation">
+    <Button manager={manager?.rotate_left_button_manager} />
+    <Button manager={manager?.rotate_right_button_manager} />
+  </div>
   <div class="current_container">
     <p class="cur_spacer">Width: {manager?.current_image_width ?? "-"}px</p>
     <p class="cur_spacer">Height: {manager?.current_image_height ?? "-"}px</p>
@@ -48,6 +52,7 @@
 </div>
 
 <style>
+  .rotation_controls { display: flex; flex-wrap: wrap; gap: 1rem; margin-bottom: 1rem; }
   .container {
     padding: 0 1rem;
     max-width: 100%;

package/dist/Components/ImageEditor/index.svelte

@@ -56,6 +56,7 @@
         <p>Tab not found</p>
       {/if}
     </div>
+    {#if manager?.error_message}<p role="alert">{manager.error_message}</p>{/if}
     <Image {manager} />
   </div>
 {/snippet}

package/dist/Components/ImageEditor/index.svelte.js

@@ -23,6 +23,7 @@ export function create_image_editor_manager(config) {
   let image_sources = $state([])
   let image_source_index = $state(null)
   let file_picker_file = $state(null)
+  let original_file_source = null
   let file_name = $state(null)
   let mime_type = $state(null)
   let mime_type_input = $state(null)
@@ -51,8 +52,10 @@ export function create_image_editor_manager(config) {
   let start_y = $state(null)
   let last_known_x = $state(null)
   let last_known_y = $state(null)
+  let is_rotating = $state(false)
+  let is_finishing = $state(false)
   let is_read_only = $derived(set_closurable(config?.is_read_only, false))
-  let is_disabled = $derived(set_closurable(config?.is_disabled, false) || is_read_only)
+  let is_disabled = $derived(set_closurable(config?.is_disabled, false) || is_read_only || is_rotating || is_finishing)
   let is_interaction_disabled = $derived(is_disabled)
   let ai_error_message = $state(null)
   let error_message = $state(null)
@@ -89,6 +92,8 @@ export function create_image_editor_manager(config) {
   let filters_set_default_button_manager = $state(null)
   let filters_apply_filters_button_manager = $state(null)
 
+  let rotate_left_button_manager = $state(null)
+  let rotate_right_button_manager = $state(null)
   let crop_free_button_manager = $state(null)
   let crop_one_to_one_button_manager = $state(null)
   let crop_four_to_three_button_manager = $state(null)
@@ -390,6 +395,52 @@ export function create_image_editor_manager(config) {
     }
   }
 
+  // Rotation commits a new source just like crop/resize, so exports and the
+  // existing undo/redo stack always refer to the same edited pixels.
+  async function rotate(degrees = 90) {
+    if (is_disabled || is_destroyed || !selected_image_source || typeof document === "undefined" || typeof Image === "undefined") return false
+    if (!Number.isFinite(degrees) || degrees % 90 !== 0) {
+      error_message = "Use a rotation in 90-degree steps."
+      return false
+    }
+    const angle = ((degrees % 360) + 360) % 360
+    if (!angle) return false
+    const source = selected_image_source
+    is_rotating = true
+    error_message = null
+    try {
+      const image = new Image()
+      image.crossOrigin = "Anonymous"
+      await new Promise((resolve, reject) => {
+        image.onload = resolve
+        image.onerror = () => reject(new Error("The image could not be rotated. Try again."))
+        image.src = source
+      })
+      if (is_destroyed || source !== selected_image_source || is_read_only || set_closurable(config?.is_disabled, false)) return false
+      const width = image.naturalWidth, height = image.naturalHeight
+      if (!width || !height) throw new Error("The image could not be rotated. Try again.")
+      const canvas = document.createElement("canvas")
+      const swap = angle === 90 || angle === 270
+      canvas.width = swap ? height : width
+      canvas.height = swap ? width : height
+      const context = canvas.getContext("2d")
+      if (!context) throw new Error("The image could not be rotated. Try again.")
+      context.translate(canvas.width / 2, canvas.height / 2)
+      context.rotate(angle * Math.PI / 180)
+      context.drawImage(image, -width / 2, -height / 2)
+      const next = canvas.toDataURL(mime_type ?? "image/png", (file_quality_slider_manager?.val ?? 100) / 100)
+      image_sources = [next, ...image_sources.slice(image_source_index)]
+      image_source_index = 0
+      set_base_image(next)
+      return true
+    } catch (error) {
+      if (!is_destroyed && source === selected_image_source) error_message = error?.message ?? "The image could not be rotated. Try again."
+      return false
+    } finally {
+      if (!is_destroyed) is_rotating = false
+    }
+  }
+
   function undo() {
     if (is_disabled || is_destroyed) return
     if (Array.isArray(image_sources) && image_sources.length > 1 && image_source_index < image_sources.length - 1) {
@@ -411,6 +462,7 @@ export function create_image_editor_manager(config) {
     image_sources = []
     image_source_index = 0
     file_picker_file = null
+    original_file_source = null
     file_name_text_input_manager.set_val(null)
     file_size_data = null
     file_size_kb = null
@@ -418,17 +470,34 @@ export function create_image_editor_manager(config) {
   }
 
   async function finish() {
-    if (is_disabled || is_destroyed) return
+    if (is_disabled || is_destroyed) return false
     const image_source = selected_image_source
-    let file_to_return = null
-    if (image_source) {
-      file_to_return = await url_to_file(image_source, file_name_derived)
-    }
-    if (is_destroyed || image_source !== selected_image_source) return
-    if (typeof config?.on_finish == "function") {
-      config?.on_finish(file_to_return)
+    if (!image_source) return false
+    is_finishing = true
+    error_message = null
+    try {
+      let file_to_return
+      const data = /^data:(image\/(?:png|jpeg|webp));base64,([A-Za-z0-9+/]*={0,2})$/u.exec(image_source)
+      if (data) {
+        // Canvas exports already contain the bytes. Decoding locally avoids a
+        // network/CSP fetch for an in-memory image and keeps export offline.
+        const bytes = Uint8Array.from(atob(data[2]), character => character.charCodeAt(0))
+        file_to_return = new File([bytes], file_name_derived, { type: data[1] })
+      } else if (image_source === original_file_source && file_picker_file) {
+        file_to_return = new File([file_picker_file], file_name_derived, { type: file_picker_file.type })
+      } else {
+        file_to_return = await url_to_file(image_source, file_name_derived)
+      }
+      if (is_destroyed || image_source !== selected_image_source || is_read_only || set_closurable(config?.is_disabled, false)) return false
+      if (typeof config?.on_finish === "function" && await config.on_finish(file_to_return) === false) return false
+      popover_manager?.close()
+      return true
+    } catch (error) {
+      if (!is_destroyed && image_source === selected_image_source) error_message = error?.message ?? "The edited image could not be exported. Try again."
+      return false
+    } finally {
+      if (!is_destroyed) is_finishing = false
     }
-    popover_manager?.close()
   }
 
   function drop_handler(e) {
@@ -1186,6 +1255,7 @@ export function create_image_editor_manager(config) {
       image_sources = []
       image_source_index = null
       file_picker_file = null
+      original_file_source = null
       file_name = null
       file_name_text_input_manager.set_val(null)
       mime_type = null
@@ -1197,6 +1267,7 @@ export function create_image_editor_manager(config) {
     image_sources = [src_url]
     image_source_index = 0
     file_picker_file = file
+    original_file_source = src_url
     let clean_file_name = String(file_input?.file_name ?? file?.name ?? "").replace(/\..+$/, "")
     file_name = clean_file_name
     file_name_text_input_manager.set_val(clean_file_name)
@@ -1282,6 +1353,18 @@ export function create_image_editor_manager(config) {
       selected_type: () => (screen_tab == "file" ? "selected" : null),
       on_click: () => set_screen_tab("file"),
     })
+    rotate_left_button_manager = create_button_manager({
+      text: "Rotate left 90°", type: "outlined", is_compressed: true,
+      support_icon: "undo_arrow", html_type: "button",
+      is_disabled: () => is_disabled || !selected_image_source,
+      on_click: () => rotate(-90),
+    })
+    rotate_right_button_manager = create_button_manager({
+      text: "Rotate right 90°", type: "outlined", is_compressed: true,
+      support_icon: "redo_arrow", html_type: "button",
+      is_disabled: () => is_disabled || !selected_image_source,
+      on_click: () => rotate(90),
+    })
     undo_button_manager = create_button_manager({
       type: "soft",
       is_no_wrap: true,
@@ -1893,6 +1976,9 @@ export function create_image_editor_manager(config) {
     get screen_tab_file_button_manager() {
       return screen_tab_file_button_manager
     },
+    get rotate_left_button_manager() { return rotate_left_button_manager },
+    get rotate_right_button_manager() { return rotate_right_button_manager },
+    get is_rotating() { return is_rotating },
     get undo_button_manager() {
       return undo_button_manager
     },
@@ -2062,6 +2148,7 @@ export function create_image_editor_manager(config) {
     init_file,
     on_destroy,
     set_screen_tab,
+    rotate,
     undo,
     redo,
     clear,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sveltekit-ui",
-  "version": "1.1.89",
+  "version": "1.1.90",
   "description": "A SvelteKit UI component library for building modern web applications",
   "license": "MIT",
   "repository": {
@@ -62,7 +62,7 @@
     "svelte": "^5.57.2",
     "svelte-check": "^4.7.7",
     "typescript": "^6.0.3",
-    "vite": "^8.3.4",
+    "vite": "^8.3.5",
     "vitest": "^5.0.5"
   },
   "homepage": "https://www.sveltekit-ui.com",