tokimeki-image-editor 0.4.15 → 0.5.1

package/dist/components/AdjustTool.svelte

@@ -1,5 +1,18 @@
 <script lang="ts">import { _ } from 'svelte-i18n';
-import { Sun, Contrast, Cloud, Moon, SunMedium, Palette, Thermometer, Aperture, Waves, Sparkles, Focus, AudioWaveform, Spline, Droplets } from 'lucide-svelte';
+import Sun from '@lucide/svelte/icons/sun';
+import Contrast from '@lucide/svelte/icons/contrast';
+import Cloud from '@lucide/svelte/icons/cloud';
+import Moon from '@lucide/svelte/icons/moon';
+import SunMedium from '@lucide/svelte/icons/sun-medium';
+import Palette from '@lucide/svelte/icons/palette';
+import Thermometer from '@lucide/svelte/icons/thermometer';
+import Aperture from '@lucide/svelte/icons/aperture';
+import Waves from '@lucide/svelte/icons/waves';
+import Sparkles from '@lucide/svelte/icons/sparkles';
+import Focus from '@lucide/svelte/icons/focus';
+import AudioWaveform from '@lucide/svelte/icons/audio-waveform';
+import Spline from '@lucide/svelte/icons/spline';
+import Droplets from '@lucide/svelte/icons/droplets';
 import ToolPanel from './ToolPanel.svelte';
 import Slider from './Slider.svelte';
 import ToneCurveTool from './ToneCurveTool.svelte';

package/dist/components/AnnotationTool.svelte

@@ -7,7 +7,19 @@ import { initWasm } from '../wasm/stroke-processor';
 import { getEventCoords, createPenAnnotation, createBrushAnnotation, createFillAnnotation, createEraserStrokeAnnotation, addPointToPen, addPointToBrush, finalizeBrushStroke, performFloodFill, getCompositeImageData, getAnnotationOnlyImageData, generateSmoothPath, generateSmoothPathWithLOD, smoothPoints, interpolateBrushPoints, generateBrushPath, generateBrushPathWithLOD, MIN_POINT_DISTANCE } from '../utils/drawing';
 import { createEditorInteractionState, handleOverlayKeyDown, handleOverlayKeyUp, calculatePanOffset, calculateZoomViewport, shouldPan } from '../utils/editor-interaction';
 import { screenToImageCoords as sharedScreenToImageCoords, imageToCanvasCoords as sharedImageToCanvasCoords } from '../utils/coordinates';
-import { Pencil, Eraser, ArrowRight, Square, Brush, Type, PaintBucket, X, Trash2, Sparkles, Layers, ImageOff, EyeOff } from 'lucide-svelte';
+import Pencil from '@lucide/svelte/icons/pencil';
+import Eraser from '@lucide/svelte/icons/eraser';
+import ArrowRight from '@lucide/svelte/icons/arrow-right';
+import Square from '@lucide/svelte/icons/square';
+import Brush from '@lucide/svelte/icons/brush';
+import Type from '@lucide/svelte/icons/type';
+import PaintBucket from '@lucide/svelte/icons/paint-bucket';
+import X from '@lucide/svelte/icons/x';
+import Trash2 from '@lucide/svelte/icons/trash-2';
+import Sparkles from '@lucide/svelte/icons/sparkles';
+import Layers from '@lucide/svelte/icons/layers';
+import ImageOff from '@lucide/svelte/icons/image-off';
+import EyeOff from '@lucide/svelte/icons/eye-off';
 import FloatingRail from './FloatingRail.svelte';
 import RailButton from './RailButton.svelte';
 import Popover from './Popover.svelte';

package/dist/components/BlurTool.svelte

@@ -1,6 +1,9 @@
 <script lang="ts">import { onMount } from 'svelte';
 import { _ } from 'svelte-i18n';
-import { X, Trash2, Droplet, Info } from 'lucide-svelte';
+import X from '@lucide/svelte/icons/x';
+import Trash2 from '@lucide/svelte/icons/trash-2';
+import Droplet from '@lucide/svelte/icons/droplet';
+import Info from '@lucide/svelte/icons/info';
 import { screenToImageCoords, imageToCanvasCoords } from '../utils/canvas';
 import { calculateZoomViewport, calculatePanOffset } from '../utils/editor-interaction';
 import FloatingRail from './FloatingRail.svelte';

package/dist/components/BottomDock.svelte

@@ -1,5 +1,11 @@
 <script lang="ts">import { _ } from 'svelte-i18n';
-import { Crop, SlidersHorizontal, Sparkles, Droplet, Sticker, PenLine, Download } from 'lucide-svelte';
+import Crop from '@lucide/svelte/icons/crop';
+import SlidersHorizontal from '@lucide/svelte/icons/sliders-horizontal';
+import Sparkles from '@lucide/svelte/icons/sparkles';
+import Droplet from '@lucide/svelte/icons/droplet';
+import Sticker from '@lucide/svelte/icons/sticker';
+import PenLine from '@lucide/svelte/icons/pen-line';
+import Download from '@lucide/svelte/icons/download';
 import { haptic } from '../utils/haptics';
 let { mode, hasImage, isStandalone = false, onModeChange } = $props();
 const baseTools = [

package/dist/components/CropTool.svelte

@@ -1,6 +1,17 @@
 <script lang="ts">import { onMount } from 'svelte';
 import { _ } from 'svelte-i18n';
-import { RotateCw, RotateCcw, FlipHorizontal, FlipVertical, X, Check, Crop as CropIcon, Lock, Unlock, Repeat2, RotateCcwSquare, Maximize2 } from 'lucide-svelte';
+import RotateCw from '@lucide/svelte/icons/rotate-cw';
+import RotateCcw from '@lucide/svelte/icons/rotate-ccw';
+import FlipHorizontal from '@lucide/svelte/icons/flip-horizontal';
+import FlipVertical from '@lucide/svelte/icons/flip-vertical';
+import X from '@lucide/svelte/icons/x';
+import Check from '@lucide/svelte/icons/check';
+import CropIcon from '@lucide/svelte/icons/crop';
+import Lock from '@lucide/svelte/icons/lock';
+import Unlock from '@lucide/svelte/icons/unlock';
+import Repeat2 from '@lucide/svelte/icons/repeat-2';
+import RotateCcwSquare from '@lucide/svelte/icons/rotate-ccw-square';
+import Maximize2 from '@lucide/svelte/icons/maximize-2';
 import { screenToImageCoords, imageToCanvasCoords } from '../utils/canvas';
 import FloatingRail from './FloatingRail.svelte';
 import RailButton from './RailButton.svelte';
@@ -54,6 +65,7 @@ function swapOrientation() {
         lockedAspectRatio = 1 / lockedAspectRatio;
     }
     haptic('selection');
+    autoFit(300);
 }
 function resetCrop() {
     if (!image)
@@ -62,6 +74,7 @@ function resetCrop() {
     aspectLocked = false;
     lockedAspectRatio = null;
     haptic('warning');
+    autoFit(300);
 }
 // Display helpers
 let displayWidth = $derived(Math.round(cropArea.width));
@@ -99,17 +112,15 @@ let isResizing = $state(false);
 let dragStart = $state({ x: 0, y: 0 });
 let resizeHandle = $state(null);
 let initialCropArea = $state(null);
-// Viewport panning state.
-//   'frame'  — drag inside frame: image scrolls under stationary frame (iOS Photos)
-//   'canvas' — drag outside frame: viewport itself moves (image + frame together)
+// Viewport panning state — all drags move the image under a stationary frame (Lightroom style).
 let isPanning = $state(false);
-let panType = $state('frame');
 let lastPanPosition = $state({ x: 0, y: 0 });
-// Touch pinch zoom state — pinch now zooms the underlying image, not the crop area.
+// Touch pinch zoom state — pinch changes cropArea (not viewport.zoom) for crop-contextual zoom.
 let initialPinchDistance = $state(0);
-let initialPinchZoom = $state(1);
+let initialPinchCropArea = $state(null);
+let initialPinchFocusRel = $state({ x: 0.5, y: 0.5 });
 // True when any drag-like interaction is in progress (used to brighten the grid)
-let isInteracting = $derived(isResizing || isPanning);
+let isInteracting = $derived(isResizing || isPanning || initialPinchDistance > 0);
 // SVG render constants — placed up here, derived geometry placed after canvasCoords below
 const cornerLen = 22;
 const cornerThickness = 4;
@@ -154,6 +165,7 @@ onMount(() => {
         containerElement.addEventListener('touchend', handleContainerTouchEndUnified, { passive: false });
     }
     return () => {
+        cancelAnimation();
         if (containerElement) {
             containerElement.removeEventListener('touchstart', handleContainerTouchStartUnified);
             containerElement.removeEventListener('touchmove', handleContainerTouchMoveUnified);
@@ -183,11 +195,14 @@ $effect(() => {
                 height: image.height
             };
         }
+        // Auto-fit viewport to center and fill the crop frame (after state settles)
+        queueMicrotask(() => autoFit(400));
     }
 });
 function handleMouseDown(event, handle) {
     if (!canvas || !image)
         return;
+    cancelAnimation();
     event.preventDefault();
     event.stopPropagation();
     const coords = getEventCoords(event);
@@ -201,10 +216,9 @@ function handleMouseDown(event, handle) {
         haptic('selection');
     }
     else {
-        // Frame interior drag → pan the underlying image (iOS Photos / Lightroom style).
+        // Drag → pan the underlying image (Lightroom style).
         // The frame stays put on screen; the image moves beneath it.
         isPanning = true;
-        panType = 'frame';
         isDragging = false;
         lastPanPosition = { x: coords.clientX, y: coords.clientY };
     }
@@ -237,15 +251,15 @@ function isNearResizeHandle(mouseX, mouseY, handleRadius) {
     return false;
 }
 // Container mousedown — frame interior and handles stop propagation in their
-// own handlers, so this only fires when the user pressed *outside* the frame.
-// That case = canvas pan (viewport moves, image and frame both follow the finger).
+// Container mousedown — fires when user pressed outside the frame.
+// Same behavior as inside: image scrolls under stationary frame (Lightroom style).
 function handleContainerMouseDown(event) {
     if (event.button !== 0)
         return;
+    cancelAnimation();
     event.preventDefault();
     event.stopPropagation();
     isPanning = true;
-    panType = 'canvas';
     isResizing = false;
     resizeHandle = null;
     initialCropArea = null;
@@ -255,27 +269,11 @@ function handleMouseMove(event) {
     if (!canvas || !image)
         return;
     const coords = getEventCoords(event);
-    // ── Pan — two flavours depending on where the drag started ──
+    // ── Pan — image scrolls under stationary frame (Lightroom style) ──
     if (isPanning) {
         const deltaX = coords.clientX - lastPanPosition.x;
         const deltaY = coords.clientY - lastPanPosition.y;
         event.preventDefault();
-        if (panType === 'canvas') {
-            // Drag started outside the frame → move the viewport itself.
-            // Both image and frame translate together (cropArea is untouched).
-            if (onViewportChange) {
-                onViewportChange({
-                    offsetX: viewport.offsetX + deltaX,
-                    offsetY: viewport.offsetY + deltaY
-                });
-            }
-            lastPanPosition = { x: coords.clientX, y: coords.clientY };
-            return;
-        }
-        // panType === 'frame'
-        // Drag inside the frame → image scrolls under a stationary frame.
-        // cropArea moves in image space by the inverse of the finger motion, and
-        // viewport.offset is counter-adjusted so the frame's canvas position stays put.
         const scale = viewport.scale * viewport.zoom;
         const imageDeltaX = deltaX / scale;
         const imageDeltaY = deltaY / scale;
@@ -394,12 +392,73 @@ function handleMouseMove(event) {
         cropArea = next;
     }
 }
+// ── Auto-fit: calculate viewport that centers and fills the crop frame ──
+const AUTO_FIT_PADDING = 0.80; // crop frame fills 80% of canvas
+function calculateAutoFitViewport(crop, img, cvs, baseScale) {
+    const targetW = cvs.width * AUTO_FIT_PADDING;
+    const targetH = cvs.height * AUTO_FIT_PADDING;
+    const fitZoom = Math.min(targetW / (crop.width * baseScale), targetH / (crop.height * baseScale));
+    const totalScale = baseScale * fitZoom;
+    const cropCenterX = crop.x + crop.width / 2;
+    const cropCenterY = crop.y + crop.height / 2;
+    const offsetX = -(cropCenterX - img.width / 2) * totalScale;
+    const offsetY = -(cropCenterY - img.height / 2) * totalScale;
+    return { zoom: fitZoom, offsetX, offsetY };
+}
+// ── Smooth viewport animation (ease-out cubic) ──
+let animationFrameId = null;
+function cancelAnimation() {
+    if (animationFrameId !== null) {
+        cancelAnimationFrame(animationFrameId);
+        animationFrameId = null;
+    }
+}
+function animateViewportTo(target, duration = 300) {
+    cancelAnimation();
+    if (!onViewportChange)
+        return;
+    const start = { zoom: viewport.zoom, offsetX: viewport.offsetX, offsetY: viewport.offsetY };
+    const startTime = performance.now();
+    function tick(now) {
+        const elapsed = now - startTime;
+        const t = Math.min(1, elapsed / duration);
+        const eased = 1 - Math.pow(1 - t, 3); // ease-out cubic
+        onViewportChange({
+            zoom: start.zoom + (target.zoom - start.zoom) * eased,
+            offsetX: start.offsetX + (target.offsetX - start.offsetX) * eased,
+            offsetY: start.offsetY + (target.offsetY - start.offsetY) * eased
+        });
+        if (t < 1) {
+            animationFrameId = requestAnimationFrame(tick);
+        }
+        else {
+            animationFrameId = null;
+        }
+    }
+    animationFrameId = requestAnimationFrame(tick);
+}
+function autoFit(duration = 300) {
+    if (!canvas || !image)
+        return;
+    const target = calculateAutoFitViewport(cropArea, image, canvas, viewport.scale);
+    if (duration > 0) {
+        animateViewportTo(target, duration);
+    }
+    else if (onViewportChange) {
+        onViewportChange(target);
+    }
+}
 function handleMouseUp() {
+    const wasResizing = isResizing;
     isDragging = false;
     isResizing = false;
     isPanning = false;
     resizeHandle = null;
     initialCropArea = null;
+    // Snap-back: auto-fit after resize to re-center the new crop frame
+    if (wasResizing) {
+        autoFit(300);
+    }
 }
 // These will be defined below after pinch zoom handlers are renamed
 function apply() {
@@ -431,12 +490,14 @@ function setAspectRatio(ratio) {
         width: newWidth,
         height: newHeight
     };
+    autoFit(300);
 }
-// Wheel zoom — exponential (log-scale feel), cursor-focused.
-// Normalizes trackpad line-mode / pixel-mode. Shift = coarse step.
+// Wheel zoom — crop-contextual: changes cropArea size, not viewport.zoom.
+// Scroll up = zoom in = cropArea shrinks. Cursor-focused.
 function handleWheel(event) {
     if (!canvas || !image)
         return;
+    cancelAnimation();
     event.preventDefault();
     event.stopPropagation();
     let dy = event.deltaY;
@@ -446,11 +507,31 @@ function handleWheel(event) {
         dy *= 100; // page
     const coarseness = event.shiftKey ? 0.0048 : 0.002;
     const factor = Math.exp(-dy * coarseness);
-    const targetZoom = viewport.zoom * factor;
-    const rect = canvas.getBoundingClientRect();
-    const focusX = event.clientX - rect.left;
-    const focusY = event.clientY - rect.top;
-    applyCursorFocusedZoom(targetZoom, focusX, focusY);
+    // factor > 1 = scroll up = zoom in = crop shrinks
+    const inverseRatio = 1 / factor;
+    const minSize = 50;
+    let newWidth = cropArea.width * inverseRatio;
+    let newHeight = cropArea.height * inverseRatio;
+    newWidth = Math.max(minSize, Math.min(image.width, newWidth));
+    newHeight = Math.max(minSize, Math.min(image.height, newHeight));
+    if (lockedAspectRatio !== null) {
+        if (newWidth / newHeight > lockedAspectRatio) {
+            newWidth = newHeight * lockedAspectRatio;
+        }
+        else {
+            newHeight = newWidth / lockedAspectRatio;
+        }
+    }
+    // Re-center around cursor position in image coords
+    const imgCoords = screenToImageCoords(event.clientX, event.clientY, canvas, image, viewport, transform);
+    const relX = Math.max(0, Math.min(1, (imgCoords.x - cropArea.x) / cropArea.width));
+    const relY = Math.max(0, Math.min(1, (imgCoords.y - cropArea.y) / cropArea.height));
+    let newX = imgCoords.x - relX * newWidth;
+    let newY = imgCoords.y - relY * newHeight;
+    newX = Math.max(0, Math.min(image.width - newWidth, newX));
+    newY = Math.max(0, Math.min(image.height - newHeight, newY));
+    cropArea = { x: newX, y: newY, width: newWidth, height: newHeight };
+    autoFit(0); // instant re-center
 }
 // Keyboard shortcuts — Enter / Esc / Arrow keys (1px), Shift+Arrow (10px)
 function handleKeyDown(event) {
@@ -492,70 +573,72 @@ function handleKeyDown(event) {
         fitToScreen();
     }
 }
-// ── Cursor-focused canvas zoom ─────────────────────────────────────────
-// This is the *standard* zoom: both the image and the frame scale together
-// (the frame is drawn relative to cropArea in image space, so as viewport.zoom
-//  changes, the frame naturally follows the image on screen). cropArea is
-//  NOT modified — the "which part of the image is cropped" selection is
-//  preserved across zooms, only its visual size on canvas changes.
-//
-// Pan (frame-stationary) is still handled separately in handleMouseMove,
-// where both cropArea and viewport.offset update together.
-const MIN_ZOOM = 0.25;
-const MAX_ZOOM = 10;
-function applyCursorFocusedZoom(targetZoom, focusCanvasX, focusCanvasY) {
-    if (!canvas || !onViewportChange)
-        return false;
-    const oldZoom = viewport.zoom;
-    const clampedZoom = Math.max(MIN_ZOOM, Math.min(MAX_ZOOM, targetZoom));
-    if (Math.abs(clampedZoom - oldZoom) < 1e-4)
-        return false;
-    // Keep the image point under the focus stationary on screen.
-    const cxRel = focusCanvasX - canvas.width / 2;
-    const cyRel = focusCanvasY - canvas.height / 2;
-    const zoomRatio = clampedZoom / oldZoom;
-    const newOffsetX = cxRel - (cxRel - viewport.offsetX) * zoomRatio;
-    const newOffsetY = cyRel - (cyRel - viewport.offsetY) * zoomRatio;
-    onViewportChange({
-        zoom: clampedZoom,
-        offsetX: newOffsetX,
-        offsetY: newOffsetY
-    });
-    return true;
-}
 function fitToScreen() {
-    if (!onViewportChange)
-        return;
     haptic('light');
-    onViewportChange({ zoom: 1, offsetX: 0, offsetY: 0 });
+    autoFit(300);
 }
 function handlePinchZoomStart(event) {
-    if (event.touches.length !== 2)
+    if (event.touches.length !== 2 || !canvas || !image)
         return;
+    cancelAnimation();
     event.preventDefault();
     const t1 = event.touches[0];
     const t2 = event.touches[1];
     initialPinchDistance = Math.hypot(t2.clientX - t1.clientX, t2.clientY - t1.clientY);
-    initialPinchZoom = viewport.zoom;
+    initialPinchCropArea = { ...cropArea };
+    // Calculate pinch midpoint's relative position within the crop area
+    const midX = (t1.clientX + t2.clientX) / 2;
+    const midY = (t1.clientY + t2.clientY) / 2;
+    const imgCoords = screenToImageCoords(midX, midY, canvas, image, viewport, transform);
+    initialPinchFocusRel = {
+        x: Math.max(0, Math.min(1, (imgCoords.x - cropArea.x) / cropArea.width)),
+        y: Math.max(0, Math.min(1, (imgCoords.y - cropArea.y) / cropArea.height))
+    };
 }
 function handlePinchZoomMove(event) {
-    if (event.touches.length !== 2 || initialPinchDistance === 0)
+    if (event.touches.length !== 2 || initialPinchDistance === 0 || !initialPinchCropArea)
         return;
-    if (!canvas)
+    if (!canvas || !image)
         return;
     event.preventDefault();
     const t1 = event.touches[0];
     const t2 = event.touches[1];
     const distance = Math.hypot(t2.clientX - t1.clientX, t2.clientY - t1.clientY);
     const scaleRatio = distance / initialPinchDistance;
-    const targetZoom = initialPinchZoom * scaleRatio;
-    const rect = canvas.getBoundingClientRect();
-    const focusX = (t1.clientX + t2.clientX) / 2 - rect.left;
-    const focusY = (t1.clientY + t2.clientY) / 2 - rect.top;
-    applyCursorFocusedZoom(targetZoom, focusX, focusY);
+    // Pinch out (scaleRatio > 1) = zoom in = crop area shrinks
+    const inverseRatio = 1 / scaleRatio;
+    const minSize = 50;
+    let newWidth = initialPinchCropArea.width * inverseRatio;
+    let newHeight = initialPinchCropArea.height * inverseRatio;
+    // Enforce minimum size
+    newWidth = Math.max(minSize, Math.min(image.width, newWidth));
+    newHeight = Math.max(minSize, Math.min(image.height, newHeight));
+    // If aspect locked, enforce ratio
+    if (lockedAspectRatio !== null) {
+        if (newWidth / newHeight > lockedAspectRatio) {
+            newWidth = newHeight * lockedAspectRatio;
+        }
+        else {
+            newHeight = newWidth / lockedAspectRatio;
+        }
+    }
+    // Re-center around the pinch focus point
+    const focusImgX = initialPinchCropArea.x + initialPinchFocusRel.x * initialPinchCropArea.width;
+    const focusImgY = initialPinchCropArea.y + initialPinchFocusRel.y * initialPinchCropArea.height;
+    let newX = focusImgX - initialPinchFocusRel.x * newWidth;
+    let newY = focusImgY - initialPinchFocusRel.y * newHeight;
+    // Clamp to image bounds
+    newX = Math.max(0, Math.min(image.width - newWidth, newX));
+    newY = Math.max(0, Math.min(image.height - newHeight, newY));
+    cropArea = { x: newX, y: newY, width: newWidth, height: newHeight };
+    // Auto-fit viewport to keep frame centered (instant, no animation during pinch)
+    autoFit(0);
 }
 function handlePinchZoomEnd() {
     initialPinchDistance = 0;
+    initialPinchCropArea = null;
+    // Smooth snap-back after pinch ends
+    autoFit(300);
 }
 // Unified touch handlers — 1 finger pan (frame or canvas based on start position),
 // 2 fingers = pinch zoom.
@@ -570,13 +653,10 @@ function handleContainerTouchStartUnified(event) {
         return;
     }
     if (event.touches.length === 1) {
-        // Child elements (frame border / handles) stopPropagation in their own
-        // touchstart, so if we reach here the touch is *outside* the frame.
-        // That maps to canvas pan (move viewport, keep cropArea in place).
+        // Outside frame touch — same as inside: image scrolls under frame (Lightroom style).
         event.preventDefault();
         const touch = event.touches[0];
         isPanning = true;
-        panType = 'canvas';
         isResizing = false;
         lastPanPosition = { x: touch.clientX, y: touch.clientY };
     }

package/dist/components/ExportTool.svelte

@@ -1,5 +1,7 @@
 <script lang="ts">import { _ } from 'svelte-i18n';
-import { Download, FileImage, ImageDown } from 'lucide-svelte';
+import Download from '@lucide/svelte/icons/download';
+import FileImage from '@lucide/svelte/icons/file-image';
+import ImageDown from '@lucide/svelte/icons/image-down';
 import ToolPanel from './ToolPanel.svelte';
 import Slider from './Slider.svelte';
 import { haptic } from '../utils/haptics';

package/dist/components/ImageEditor.svelte

@@ -1,7 +1,14 @@
 <script lang="ts">import '../i18n';
 import '../styles/tokens.css';
 import { _ } from 'svelte-i18n';
-import { Redo2, Undo2, RotateCcw, ImagePlus, Check, Sparkles, Download, LoaderCircle } from 'lucide-svelte';
+import Redo2 from '@lucide/svelte/icons/redo-2';
+import Undo2 from '@lucide/svelte/icons/undo-2';
+import RotateCcw from '@lucide/svelte/icons/rotate-ccw';
+import ImagePlus from '@lucide/svelte/icons/image-plus';
+import Check from '@lucide/svelte/icons/check';
+import Sparkles from '@lucide/svelte/icons/sparkles';
+import Download from '@lucide/svelte/icons/download';
+import LoaderCircle from '@lucide/svelte/icons/loader-circle';
 import { createEditorState, loadImageFromFile, loadImageFromUrl, applyImageToState, setMode, applyCrop, applyTransformUpdate, applyAdjustmentsUpdate, applyFilter, setBlurAreas, setStampAreas, setAnnotations, setViewport, resetState, handleZoom as coreHandleZoom, saveToHistory as coreSaveToHistory, handleUndo as coreHandleUndo, handleRedo as coreHandleRedo, canUndo, canRedo, getKeyboardAction, applyKeyboardAction, exportImage, getDroppedFile, getInputFile, handleDragOver } from '../utils/editor-core';
 import { calculateFitScale, downloadImage } from '../utils/canvas';
 import { haptic } from '../utils/haptics';

package/dist/components/QuickDrawEditor.svelte

@@ -6,7 +6,9 @@ import { shouldPan } from '../utils/editor-interaction';
 import { loadImageFromFile, loadImageFromUrl, createBlankImage, createQuickDrawState, applyQuickDrawImage, handleQuickDrawKeyDown, handleQuickDrawKeyUp, handleQuickDrawMouseDown, handleQuickDrawMouseMove, handleQuickDrawMouseUp, handleQuickDrawTouchStart, handleQuickDrawTouchMove, handleQuickDrawTouchEnd, handleQuickDrawWheel, handleQuickDrawViewportChange, handleQuickDrawZoom, quickDrawUndo, exportQuickDraw } from '../utils/editor-core';
 import { DEFAULT_COLOR_PRESETS, DEFAULT_STROKE_WIDTH } from '../utils/colors';
 import Canvas from './Canvas.svelte';
-import { Pencil, Brush, PaintBucket } from 'lucide-svelte';
+import Pencil from '@lucide/svelte/icons/pencil';
+import Brush from '@lucide/svelte/icons/brush';
+import PaintBucket from '@lucide/svelte/icons/paint-bucket';
 import { initWasm } from '../wasm/stroke-processor';
 import { haptic } from '../utils/haptics';
 let { width = 400, initialImage, colorPresets = DEFAULT_COLOR_PRESETS, initialStrokeWidth, onComplete, onCancel } = $props();

package/dist/components/RotateTool.svelte

@@ -1,5 +1,8 @@
 <script lang="ts">import { _ } from 'svelte-i18n';
-import { RotateCw, RotateCcw, FlipHorizontal, FlipVertical } from 'lucide-svelte';
+import RotateCw from '@lucide/svelte/icons/rotate-cw';
+import RotateCcw from '@lucide/svelte/icons/rotate-ccw';
+import FlipHorizontal from '@lucide/svelte/icons/flip-horizontal';
+import FlipVertical from '@lucide/svelte/icons/flip-vertical';
 import ToolPanel from './ToolPanel.svelte';
 import { haptic } from '../utils/haptics';
 let { transform, onChange, onClose } = $props();

package/dist/components/Sheet.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">import { onMount } from 'svelte';
 import { _ } from 'svelte-i18n';
-import { X } from 'lucide-svelte';
+import X from '@lucide/svelte/icons/x';
 import IconButton from './IconButton.svelte';
 import { haptic } from '../utils/haptics';
 let { title, onClose, children, actions, collapsible = true, minimal = false } = $props();

package/dist/components/StampTool.svelte

@@ -2,7 +2,10 @@
 import { _ } from 'svelte-i18n';
 import { STAMP_ASSETS } from '../config/stamps';
 import { preloadStampImage } from '../utils/canvas';
-import { RotateCw, Trash2, X, Sticker } from 'lucide-svelte';
+import RotateCw from '@lucide/svelte/icons/rotate-cw';
+import Trash2 from '@lucide/svelte/icons/trash-2';
+import X from '@lucide/svelte/icons/x';
+import Sticker from '@lucide/svelte/icons/sticker';
 import FloatingRail from './FloatingRail.svelte';
 import RailButton from './RailButton.svelte';
 import Popover from './Popover.svelte';

package/dist/components/ToneCurveTool.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">import { _ } from 'svelte-i18n';
-import { RotateCcw } from 'lucide-svelte';
+import RotateCcw from '@lucide/svelte/icons/rotate-ccw';
 import { haptic } from '../utils/haptics';
 let { toneCurve, onChange } = $props();
 let activeChannel = $state('rgb');

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "tokimeki-image-editor",
-  "version": "0.4.15",
+  "version": "0.5.1",
   "description": "A image editor for svelte.",
   "type": "module",
   "license": "MIT",
@@ -24,8 +24,8 @@
     "svelte": "^5.55.2"
   },
   "dependencies": {
+    "@lucide/svelte": "^1.22.0",
     "@sveltejs/adapter-auto": "^7.0.1",
-    "lucide-svelte": "^0.548.0",
     "rbush": "^4.0.1",
     "runed": "^0.35.1",
     "svelte-i18n": "^4.0.1",