tokimeki-image-editor 0.4.1 → 0.4.2

package/dist/components/AdjustTool.svelte

@@ -1,9 +1,11 @@
 <script lang="ts">import { _ } from 'svelte-i18n';
-import { Sun, Contrast, Cloud, Moon, SunMedium, Palette, Thermometer, Aperture, Waves, Sparkles } from 'lucide-svelte';
+import { Sun, Contrast, Cloud, Moon, SunMedium, Palette, Thermometer, Aperture, Waves, Sparkles, Focus, AudioWaveform, Spline, Droplets } from 'lucide-svelte';
 import ToolPanel from './ToolPanel.svelte';
 import Slider from './Slider.svelte';
+import ToneCurveTool from './ToneCurveTool.svelte';
+import HSLTool from './HSLTool.svelte';
 import { haptic } from '../utils/haptics';
-let { adjustments, onChange, onClose } = $props();
+let { adjustments, onChange, onClose, onCurveChange, onHSLChange } = $props();
 let activeGroup = $state('light');
 function handleChange(key, value) {
     onChange({ [key]: value });
@@ -22,7 +24,9 @@ function resetAll() {
         sepia: 0,
         grayscale: 0,
         blur: 0,
-        grain: 0
+        grain: 0,
+        sharpen: 0,
+        denoise: 0
     });
 }
 // Prevent wheel events from propagating to canvas zoom handler
@@ -45,31 +49,83 @@ const effectControls = [
     { key: 'blur', icon: Waves, bipolar: false, min: 0, max: 100 },
     { key: 'grain', icon: Sparkles, bipolar: false, min: 0, max: 100 }
 ];
+const detailControls = [
+    { key: 'sharpen', icon: Focus, bipolar: false, min: 0, max: 100 },
+    { key: 'denoise', icon: AudioWaveform, bipolar: false, min: 0, max: 100 }
+];
 let currentControls = $derived(activeGroup === 'light'
     ? lightControls
     : activeGroup === 'color'
         ? colorControls
-        : effectControls);
-// Quick visual feedback: show how many adjustments are active
-let activeCount = $derived(Object.values(adjustments).filter((v) => v !== 0).length);
+        : activeGroup === 'detail'
+            ? detailControls
+            : effectControls);
+// Quick visual feedback: show how many scalar adjustments are active
+let activeCount = $derived(Object.entries(adjustments).filter(([_, v]) => typeof v === 'number' && v !== 0).length);
 function setGroup(g) {
     if (g === activeGroup)
         return;
     haptic('selection');
     activeGroup = g;
 }
+// Drag-to-scroll for group tabs
+let tabsEl = $state(null);
+let isDraggingTabs = false; // intentionally not reactive — no re-render needed
+let dragActive = false;
+let dragStartX = 0;
+let scrollStartX = 0;
+function handleTabsPointerDown(e) {
+    if (!tabsEl)
+        return;
+    dragActive = true;
+    isDraggingTabs = false;
+    dragStartX = e.clientX;
+    scrollStartX = tabsEl.scrollLeft;
+}
+function handleTabsPointerMove(e) {
+    if (!dragActive || !tabsEl)
+        return;
+    const dx = e.clientX - dragStartX;
+    if (!isDraggingTabs && Math.abs(dx) > 5) {
+        isDraggingTabs = true;
+    }
+    if (isDraggingTabs) {
+        tabsEl.scrollLeft = scrollStartX - dx;
+    }
+}
+function handleTabsPointerUp() {
+    if (isDraggingTabs) {
+        // Reset after a microtask so the click event on the button still sees isDraggingTabs=true
+        setTimeout(() => { isDraggingTabs = false; }, 0);
+    }
+    dragActive = false;
+}
+function guardClick(fn) {
+    return () => {
+        if (!isDraggingTabs)
+            fn();
+    };
+}
 </script>
 
 <div class="adjust-tool" onwheel={handleWheel}>
   <ToolPanel title={$_('editor.adjust')} {onClose}>
     {#snippet children()}
-      <div class="group-tabs" role="tablist">
+      <div
+        class="group-tabs"
+        role="tablist"
+        bind:this={tabsEl}
+        onpointerdown={handleTabsPointerDown}
+        onpointermove={handleTabsPointerMove}
+        onpointerup={handleTabsPointerUp}
+        onpointerleave={handleTabsPointerUp}
+      >
         <button
           role="tab"
           aria-selected={activeGroup === 'light'}
           class="group-tab"
           class:active={activeGroup === 'light'}
-          onclick={() => setGroup('light')}
+          onclick={guardClick(() => setGroup('light'))}
         >
           <Sun size={14} />
           <span>Light</span>
@@ -79,7 +135,7 @@ function setGroup(g) {
           aria-selected={activeGroup === 'color'}
           class="group-tab"
           class:active={activeGroup === 'color'}
-          onclick={() => setGroup('color')}
+          onclick={guardClick(() => setGroup('color'))}
         >
           <Palette size={14} />
           <span>Color</span>
@@ -89,32 +145,68 @@ function setGroup(g) {
           aria-selected={activeGroup === 'effects'}
           class="group-tab"
           class:active={activeGroup === 'effects'}
-          onclick={() => setGroup('effects')}
+          onclick={guardClick(() => setGroup('effects'))}
         >
           <Sparkles size={14} />
           <span>Effects</span>
         </button>
+        <button
+          role="tab"
+          aria-selected={activeGroup === 'detail'}
+          class="group-tab"
+          class:active={activeGroup === 'detail'}
+          onclick={guardClick(() => setGroup('detail'))}
+        >
+          <Focus size={14} />
+          <span>Detail</span>
+        </button>
+        <button
+          role="tab"
+          aria-selected={activeGroup === 'curve'}
+          class="group-tab"
+          class:active={activeGroup === 'curve'}
+          onclick={guardClick(() => setGroup('curve'))}
+        >
+          <Spline size={14} />
+          <span>Curve</span>
+        </button>
+        <button
+          role="tab"
+          aria-selected={activeGroup === 'hsl'}
+          class="group-tab"
+          class:active={activeGroup === 'hsl'}
+          onclick={guardClick(() => setGroup('hsl'))}
+        >
+          <Droplets size={14} />
+          <span>HSL</span>
+        </button>
       </div>
 
       <div class="control-list">
-        {#each currentControls as control (control.key)}
-          {@const Icon = control.icon}
-          <div class="control-row">
-            <div class="control-icon">
-              <Icon size={16} strokeWidth={1.8} />
+        {#if activeGroup === 'curve'}
+          <ToneCurveTool toneCurve={adjustments.toneCurve} onChange={onCurveChange} />
+        {:else if activeGroup === 'hsl'}
+          <HSLTool hsl={adjustments.hsl} onChange={onHSLChange} />
+        {:else}
+          {#each currentControls as control (control.key)}
+            {@const Icon = control.icon}
+            <div class="control-row">
+              <div class="control-icon">
+                <Icon size={16} strokeWidth={1.8} />
+              </div>
+              <div class="control-slider">
+                <Slider
+                  label={$_(`adjustments.${control.key}`)}
+                  value={adjustments[control.key as keyof AdjustmentsState]}
+                  min={control.min}
+                  max={control.max}
+                  bipolar={control.bipolar}
+                  onInput={(v) => handleChange(control.key as keyof AdjustmentsState, v)}
+                />
+              </div>
             </div>
-            <div class="control-slider">
-              <Slider
-                label={$_(`adjustments.${control.key}`)}
-                value={adjustments[control.key as keyof AdjustmentsState]}
-                min={control.min}
-                max={control.max}
-                bipolar={control.bipolar}
-                onInput={(v) => handleChange(control.key as keyof AdjustmentsState, v)}
-              />
-            </div>
-          </div>
-        {/each}
+          {/each}
+        {/if}
       </div>
     {/snippet}
 
@@ -146,6 +238,15 @@ function setGroup(g) {
     background: var(--tk-surface-1);
     border-radius: var(--tk-radius-lg);
     margin-bottom: var(--tk-space-3);
+    overflow-x: auto;
+    scrollbar-width: none;
+    -ms-overflow-style: none;
+  }
+  .group-tabs::-webkit-scrollbar {
+    display: none;
+  }
+  .group-tabs:active {
+    cursor: grabbing;
   }
 
   .group-tab {

package/dist/components/AdjustTool.svelte.d.ts

@@ -1,8 +1,10 @@
-import type { AdjustmentsState } from '../types';
+import type { AdjustmentsState, ToneCurve, HSLAdjustment } from '../types';
 interface Props {
     adjustments: AdjustmentsState;
     onChange: (adjustments: Partial<AdjustmentsState>) => void;
     onClose: () => void;
+    onCurveChange: (curve: ToneCurve) => void;
+    onHSLChange: (hsl: HSLAdjustment) => void;
 }
 declare const AdjustTool: import("svelte").Component<Props, {}, "">;
 type AdjustTool = ReturnType<typeof AdjustTool>;

package/dist/components/AnnotationTool.svelte

@@ -741,8 +741,8 @@ function handleTouchMove(event) {
         }
         else {
             const scale = distance / interactionState.initialPinchDistance;
-            const newZoom = Math.max(0.1, Math.min(5, interactionState.initialPinchZoom * scale));
-            const delta = newZoom - viewport.zoom;
+            const newZoom = Math.max(0.1, Math.min(10, interactionState.initialPinchZoom * scale));
+            const delta = Math.log(newZoom / viewport.zoom);
             const centerX = (touch1.clientX + touch2.clientX) / 2;
             const centerY = (touch1.clientY + touch2.clientY) / 2;
             const canvasRect = canvas.getBoundingClientRect();

package/dist/components/Canvas.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">import { onMount, onDestroy } from 'svelte';
 import { drawImage, preloadStampImage, applyStamps, applyAnnotations } from '../utils/canvas';
-import { initWebGPUCanvas, uploadImageToGPU, renderWithAdjustments, cleanupWebGPU, setCanvasClearColor } from '../utils/webgpu-render';
+import { initWebGPUCanvas, uploadImageToGPU, renderWithAdjustments, cleanupWebGPU, setCanvasClearColor, updateCurveLUT } from '../utils/webgpu-render';
+import { isToneCurveDefault } from '../utils/adjustments';
 import { createEditorInteractionState, handlePureMouseDown, handlePureMouseMove, handlePureMouseUp, handlePureTouchStart, handlePureTouchMove, handlePureTouchEnd, calculateZoomViewport } from '../utils/editor-interaction';
 import { haptic } from '../utils/haptics';
 let { canvas = $bindable(null), width, height, image, viewport, transform, adjustments, cropArea = null, blurAreas = [], stampAreas = [], annotations = [], skipAnnotations = false, theme = 'dark', onZoom, onViewportChange } = $props();
@@ -11,7 +12,16 @@ const CLEAR_COLORS = {
 };
 $effect(() => {
     setCanvasClearColor(CLEAR_COLORS[theme]);
-    requestRender();
+    // Guard: don't trigger 2D render while WebGPU init is in progress,
+    // as calling getContext('2d') poisons the canvas for WebGPU.
+    if (!isInitializing) {
+        if (useWebGPU) {
+            renderWebGPU();
+        }
+        else {
+            requestRender();
+        }
+    }
 });
 // State
 let canvasElement = $state(null);
@@ -142,10 +152,18 @@ $effect(() => {
         });
     }
 });
+// Track last-uploaded curve to avoid redundant LUT writes
+let lastCurveHash = '';
 function renderWebGPU() {
     if (!canvasElement || !webgpuReady || !currentImage)
         return;
     ensureCanvasSize(canvasElement, width, height);
+    // Update tone curve LUT if changed
+    const curveHash = JSON.stringify(adjustments.toneCurve);
+    if (curveHash !== lastCurveHash) {
+        lastCurveHash = curveHash;
+        updateCurveLUT(adjustments.toneCurve);
+    }
     renderWithAdjustments(adjustments, viewport, transform, width, height, currentImage.width, currentImage.height, cropArea, blurAreas);
     const shouldRenderAnnotations = !skipAnnotations && annotations.length > 0;
     if (overlayCanvasElement && (stampAreas.length > 0 || shouldRenderAnnotations)) {
@@ -225,7 +243,7 @@ function handleTouchStart(e) {
             distSq < DOUBLE_TAP_DISTANCE * DOUBLE_TAP_DISTANCE) {
             e.preventDefault();
             const targetZoom = viewport.zoom > 1.05 ? 1 : DOUBLE_TAP_ZOOM_TARGET;
-            const delta = targetZoom - viewport.zoom;
+            const delta = Math.log(targetZoom / viewport.zoom);
             if (onZoom)
                 onZoom(delta, t.clientX, t.clientY);
             haptic('medium');
@@ -244,7 +262,7 @@ function handleDoubleClick(e) {
         return;
     e.preventDefault();
     const targetZoom = viewport.zoom > 1.05 ? 1 : DOUBLE_TAP_ZOOM_TARGET;
-    const delta = targetZoom - viewport.zoom;
+    const delta = Math.log(targetZoom / viewport.zoom);
     onZoom(delta, e.clientX, e.clientY);
 }
 function handleTouchMove(e) {

package/dist/components/HSLTool.svelte

@@ -0,0 +1,135 @@
+<script lang="ts">import { _ } from 'svelte-i18n';
+import Slider from './Slider.svelte';
+import { haptic } from '../utils/haptics';
+let { hsl, onChange } = $props();
+let activeColor = $state('red');
+const COLOR_MAP = [
+    { name: 'red', hex: '#FF3B30' },
+    { name: 'orange', hex: '#FF9500' },
+    { name: 'yellow', hex: '#FFCC00' },
+    { name: 'green', hex: '#34C759' },
+    { name: 'aqua', hex: '#5AC8FA' },
+    { name: 'blue', hex: '#007AFF' },
+    { name: 'purple', hex: '#AF52DE' },
+    { name: 'magenta', hex: '#FF2D55' }
+];
+let activeRange = $derived(hsl[activeColor]);
+function selectColor(name) {
+    if (name === activeColor)
+        return;
+    haptic('selection');
+    activeColor = name;
+}
+function handleSliderChange(property, value) {
+    const updatedRange = {
+        ...hsl[activeColor],
+        [property]: value
+    };
+    const updatedHsl = {
+        ...hsl,
+        [activeColor]: updatedRange
+    };
+    onChange(updatedHsl);
+}
+</script>
+
+<div class="hsl-tool">
+  <div class="color-selector" role="radiogroup" aria-label={$_('adjustments.hsl.colors')}>
+    {#each COLOR_MAP as color (color.name)}
+      <button
+        role="radio"
+        aria-checked={activeColor === color.name}
+        aria-label={$_(`adjustments.hsl.${color.name}`)}
+        class="color-dot"
+        class:active={activeColor === color.name}
+        style:--dot-color={color.hex}
+        onclick={() => selectColor(color.name)}
+      >
+        <span class="dot-inner"></span>
+      </button>
+    {/each}
+  </div>
+
+  <div class="slider-list">
+    <Slider
+      label={$_('adjustments.hsl.hue')}
+      value={activeRange.hue}
+      min={-180}
+      max={180}
+      bipolar={true}
+      suffix="°"
+      onInput={(v) => handleSliderChange('hue', v)}
+    />
+    <Slider
+      label={$_('adjustments.hsl.saturation')}
+      value={activeRange.saturation}
+      min={-100}
+      max={100}
+      bipolar={true}
+      onInput={(v) => handleSliderChange('saturation', v)}
+    />
+    <Slider
+      label={$_('adjustments.hsl.luminance')}
+      value={activeRange.luminance}
+      min={-100}
+      max={100}
+      bipolar={true}
+      onInput={(v) => handleSliderChange('luminance', v)}
+    />
+  </div>
+</div>
+
+<style>
+  .hsl-tool {
+    display: flex;
+    flex-direction: column;
+    gap: var(--tk-space-4);
+  }
+
+  .color-selector {
+    display: flex;
+    justify-content: center;
+    gap: var(--tk-space-3);
+    padding: var(--tk-space-2) 0;
+  }
+
+  .color-dot {
+    position: relative;
+    width: 28px;
+    height: 28px;
+    border: none;
+    background: transparent;
+    border-radius: var(--tk-radius-full);
+    cursor: pointer;
+    display: grid;
+    place-items: center;
+    padding: 0;
+    -webkit-tap-highlight-color: transparent;
+    transition: transform var(--tk-dur-quick) var(--tk-ease-spring);
+  }
+
+  .color-dot:hover {
+    transform: scale(1.1);
+  }
+
+  .color-dot:active {
+    transform: scale(0.95);
+  }
+
+  .color-dot.active {
+    box-shadow: 0 0 0 2px var(--tk-bg-base), 0 0 0 4px var(--dot-color);
+  }
+
+  .dot-inner {
+    width: 18px;
+    height: 18px;
+    border-radius: var(--tk-radius-full);
+    background: var(--dot-color);
+    box-shadow: var(--tk-shadow-xs);
+  }
+
+  .slider-list {
+    display: flex;
+    flex-direction: column;
+    gap: var(--tk-space-3);
+  }</style>

package/dist/components/HSLTool.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { HSLAdjustment } from '../types';
+interface Props {
+    hsl: HSLAdjustment;
+    onChange: (hsl: HSLAdjustment) => void;
+}
+declare const HSLTool: import("svelte").Component<Props, {}, "">;
+type HSLTool = ReturnType<typeof HSLTool>;
+export default HSLTool;

package/dist/components/ImageEditor.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">import '../i18n';
 import '../styles/tokens.css';
 import { _ } from 'svelte-i18n';
-import { Redo2, Undo2, RotateCcw, ImagePlus, Check, Sparkles, Download } from 'lucide-svelte';
+import { Redo2, Undo2, RotateCcw, ImagePlus, Check, Sparkles, Download, LoaderCircle } from 'lucide-svelte';
 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, downloadExportedImage, getDroppedFile, getInputFile, handleDragOver } from '../utils/editor-core';
 import { calculateFitScale } from '../utils/canvas';
 import { haptic } from '../utils/haptics';
@@ -37,6 +37,7 @@ let lastInitialImage = $state(undefined);
 let stageWidth = $state(undefined);
 let stageHeight = $state(undefined);
 let isHovering = $state(false);
+let isApplying = $state(false);
 // Load initial image when provided
 $effect(() => {
     if (initialImage && initialImage !== lastInitialImage) {
@@ -153,6 +154,14 @@ function handleAdjustmentsChange(adjustments) {
         adjustmentThrottleTimer = null;
     }, 300);
 }
+function handleCurveChange(curve) {
+    state = applyAdjustmentsUpdate(state, { toneCurve: curve });
+    state = coreSaveToHistory(state);
+}
+function handleHSLChange(hsl) {
+    state = applyAdjustmentsUpdate(state, { hsl });
+    state = coreSaveToHistory(state);
+}
 function handleFilterApply(adjustments) {
     state = applyFilter(state, adjustments);
     state = coreSaveToHistory(state);
@@ -177,12 +186,18 @@ async function handleExport() {
         onExport(result.dataUrl);
 }
 async function handleComplete() {
-    if (!onComplete)
+    if (!onComplete || isApplying)
         return;
+    isApplying = true;
     haptic('success');
-    const result = await exportImage(state);
-    if (result)
-        onComplete(result.dataUrl, { blob: result.blob, width: result.width, height: result.height });
+    try {
+        const result = await exportImage(state);
+        if (result)
+            onComplete(result.dataUrl, { blob: result.blob, width: result.width, height: result.height });
+    }
+    finally {
+        isApplying = false;
+    }
 }
 function handleCancel() {
     haptic('light');
@@ -281,10 +296,14 @@ let hasImage = $derived(!!state.imageData.original);
     </div>
 
     <div class="topbar-right">
-      {#if hasImage}
+      {#if hasImage && state.mode !== 'crop'}
         {#if !isStandalone}
-          <button type="button" class="primary-link" onclick={handleComplete}>
-            <Check size={16} strokeWidth={2.6} />
+          <button type="button" class="primary-link" onclick={handleComplete} disabled={isApplying}>
+            {#if isApplying}
+              <LoaderCircle size={16} class="spin" />
+            {:else}
+              <Check size={16} strokeWidth={2.6} />
+            {/if}
             <span>{$_('editor.apply')}</span>
           </button>
         {:else}
@@ -347,7 +366,7 @@ let hasImage = $derived(!!state.imageData.original);
         class="canvas-stage"
         onwheel={(e) => {
           e.preventDefault();
-          handleZoom(-e.deltaY * 0.001, e.clientX, e.clientY);
+          handleZoom(-e.deltaY * 0.003, e.clientX, e.clientY);
         }}
       >
         <Canvas
@@ -426,6 +445,8 @@ let hasImage = $derived(!!state.imageData.original);
           <AdjustTool
             adjustments={state.adjustments}
             onChange={handleAdjustmentsChange}
+            onCurveChange={handleCurveChange}
+            onHSLChange={handleHSLChange}
             onClose={() => (state.mode = null)}
           />
         {:else if state.mode === 'filter'}
@@ -600,6 +621,17 @@ let hasImage = $derived(!!state.imageData.original);
   .primary-link:active {
     transform: translateY(0);
   }
+  .primary-link:disabled {
+    opacity: 0.6;
+    pointer-events: none;
+  }
+  .primary-link :global(.spin) {
+    animation: spin 1s linear infinite;
+  }
+  @keyframes spin {
+    from { transform: rotate(0deg); }
+    to { transform: rotate(360deg); }
+  }
 
   /* ──────────────────────────────────────────────
    *  Stage — fills everything under the topbar. The dock floats above it.