tokimeki-image-editor 0.2.1 → 0.2.2

package/dist/components/AdjustTool.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">import { _ } from 'svelte-i18n';
-import { X } from 'lucide-svelte';
+import ToolPanel from './ToolPanel.svelte';
 let { adjustments, onChange, onClose } = $props();
 function handleChange(key, value) {
     onChange({ [key]: value });
@@ -27,14 +27,9 @@ function handleWheel(e) {
 </script>
 
 <div class="adjust-tool" onwheel={handleWheel}>
-  <div class="tool-header">
-    <h3>{$_('editor.adjust')}</h3>
-    <button class="close-btn" onclick={onClose} title={$_('editor.close')}>
-      <X size={20} />
-    </button>
-  </div>
-
-  <div class="adjustments-grid">
+  <ToolPanel title={$_('editor.adjust')} {onClose}>
+    {#snippet children()}
+      <div class="adjustments-grid">
     <!-- Exposure -->
     <div class="adjustment-control">
       <label for="exposure">
@@ -194,60 +189,25 @@ function handleWheel(e) {
         oninput={(e) => handleChange('grain', Number(e.currentTarget.value))}
       />
     </div>
-  </div>
-
-  <div class="tool-actions">
-    <button class="btn btn-secondary" onclick={resetAll}>
-      {$_('editor.reset')}
-    </button>
-  </div>
+      </div>
+    {/snippet}
+
+    {#snippet actions()}
+      <button class="btn btn-secondary" onclick={resetAll}>
+        {$_('editor.reset')}
+      </button>
+    {/snippet}
+  </ToolPanel>
 </div>
 
 <style>
-  .adjust-tool {
-    display: flex;
-    flex-direction: column;
-    gap: 1rem;
-  }
-
-  .tool-header {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-  }
-
-  .tool-header h3 {
-    margin: 0;
-    font-size: 1.1rem;
-    color: #fff;
-  }
-
-  .close-btn {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    padding: 0.25rem;
-    background: transparent;
-    border: none;
-    color: #999;
-    cursor: pointer;
-    border-radius: 4px;
-    transition: all 0.2s;
-  }
-
-  .close-btn:hover {
-    background: #444;
-    color: #fff;
-  }
-
   .adjustments-grid {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
     gap: 1rem;
   }
 
-  @media (max-width: 767px) {
-
+    @media (max-width: 767px) {
   .adjustments-grid {
       grid-template-columns: 1fr;
       gap: 0.75rem;
@@ -330,12 +290,6 @@ function handleWheel(e) {
     transform: scale(1.1);
   }
 
-  .tool-actions {
-    display: flex;
-    justify-content: flex-end;
-    gap: 0.5rem;
-  }
-
   .btn {
     padding: 0.5rem 1rem;
     border: none;

package/dist/components/AnnotationTool.svelte

@@ -1,7 +1,8 @@
 <script lang="ts">import { onMount } from 'svelte';
 import { _ } from 'svelte-i18n';
 import { screenToImageCoords } from '../utils/canvas';
-import { X, Pencil, Eraser, ArrowRight, Square } from 'lucide-svelte';
+import { Pencil, Eraser, ArrowRight, Square } from 'lucide-svelte';
+import ToolPanel from './ToolPanel.svelte';
 let { canvas, image, viewport, transform, annotations, cropArea, onUpdate, onClose, onViewportChange } = $props();
 let containerElement = $state(null);
 // Tool settings
@@ -491,15 +492,8 @@ let currentAnnotationCanvas = $derived.by(() => {
 </div>
 
 <!-- Control panel -->
-<div class="annotation-tool-panel">
-  <div class="panel-header">
-    <h3>{$_('editor.annotate')}</h3>
-    <button class="close-btn" onclick={onClose} title={$_('editor.close')}>
-      <X size={20} />
-    </button>
-  </div>
-
-  <div class="panel-content">
+<ToolPanel title={$_('editor.annotate')} {onClose}>
+  {#snippet children()}
     <!-- Tool selection -->
     <div class="tool-group">
       <span class="group-label">{$_('annotate.tool')}</span>
@@ -593,15 +587,14 @@ let currentAnnotationCanvas = $derived.by(() => {
         </button>
       </label>
     </div>
+  {/snippet}
 
-    <!-- Actions -->
-    <div class="panel-actions">
-      <button class="btn btn-danger" onclick={handleClearAll} disabled={annotations.length === 0}>
-        {$_('annotate.clearAll')}
-      </button>
-    </div>
-  </div>
-</div>
+  {#snippet actions()}
+    <button class="btn btn-danger" onclick={handleClearAll} disabled={annotations.length === 0}>
+      {$_('annotate.clearAll')}
+    </button>
+  {/snippet}
+</ToolPanel>
 
 <style>
   .annotation-tool-overlay {
@@ -628,84 +621,37 @@ let currentAnnotationCanvas = $derived.by(() => {
     pointer-events: none;
   }
 
-  .annotation-tool-panel {
-    position: absolute;
-    top: 1rem;
-    right: 1rem;
-    background: rgba(30, 30, 30, 0.95);
-    border: 1px solid #444;
-    border-radius: 8px;
-    padding: 1rem;
-    min-width: 250px;
-    backdrop-filter: blur(10px);
-  }
-
-  @media (max-width: 767px) {
-
-  .annotation-tool-panel {
-      position: absolute;
-      left: 0;
-      right: 0;
-      top: auto;
-      bottom: 0;
-      width: auto;
-      min-width: auto;
-      max-height: 50vh;
-      border-radius: 16px 16px 0 0;
-      z-index: 1001;
-      overflow-y: auto
-  }
-    }
-
-  .panel-header {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    margin-bottom: 1rem;
-  }
-
-  .panel-header h3 {
-    margin: 0;
-    font-size: 1.1rem;
-    color: #fff;
-  }
-
-  .close-btn {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    padding: 0.25rem;
-    background: transparent;
-    border: none;
-    color: #999;
-    cursor: pointer;
-    border-radius: 4px;
-    transition: all 0.2s;
-  }
-
-  .close-btn:hover {
-    background: #444;
-    color: #fff;
-  }
-
-  .panel-content {
+  .tool-group,
+  .control-group {
     display: flex;
     flex-direction: column;
-    gap: 1rem;
+    gap: 0.5rem;
   }
 
+  @media (max-width: 767px) {
+
   .tool-group,
   .control-group {
-    display: flex;
-    flex-direction: column;
-    gap: 0.5rem;
+      flex-direction: row;
+      align-items: center;
+      gap: 0.75rem
   }
+    }
 
   .group-label {
     font-size: 0.9rem;
     color: #ccc;
   }
 
+  @media (max-width: 767px) {
+
+  .group-label {
+      font-size: 0.75rem;
+      white-space: nowrap;
+      min-width: 50px
+  }
+    }
+
   .tool-buttons {
     display: flex;
     gap: 0.5rem;
@@ -788,6 +734,14 @@ let currentAnnotationCanvas = $derived.by(() => {
     color: #ccc;
   }
 
+  @media (max-width: 767px) {
+
+  .control-group label {
+      font-size: 0.75rem;
+      gap: 0.5rem
+  }
+    }
+
   .control-group .value {
     font-weight: 600;
   }
@@ -801,6 +755,14 @@ let currentAnnotationCanvas = $derived.by(() => {
     cursor: pointer;
   }
 
+  @media (max-width: 767px) {
+
+  .control-group input[type='range'] {
+      width: 80px;
+      flex-shrink: 0
+  }
+    }
+
   .control-group input[type='range']::-webkit-slider-thumb {
     appearance: none;
     width: 16px;
@@ -825,13 +787,6 @@ let currentAnnotationCanvas = $derived.by(() => {
     transition: all 0.2s;
   }
 
-  .panel-actions {
-    display: flex;
-    justify-content: flex-end;
-    gap: 0.5rem;
-    margin-top: 0.5rem;
-  }
-
   .btn {
     padding: 0.5rem 1rem;
     border: none;
@@ -841,6 +796,14 @@ let currentAnnotationCanvas = $derived.by(() => {
     transition: all 0.2s;
   }
 
+  @media (max-width: 767px) {
+
+  .btn {
+      padding: 0.4rem 0.75rem;
+      font-size: 0.75rem
+  }
+    }
+
   .btn:disabled {
     opacity: 0.5;
     cursor: not-allowed;

package/dist/components/BlurTool.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">import { onMount } from 'svelte';
 import { _ } from 'svelte-i18n';
 import { screenToImageCoords, imageToCanvasCoords } from '../utils/canvas';
-import { X } from 'lucide-svelte';
+import ToolPanel from './ToolPanel.svelte';
 let { canvas, image, viewport, transform, blurAreas, cropArea, onUpdate, onClose, onViewportChange } = $props();
 let containerElement = $state(null);
 // Helper to get coordinates from mouse or touch event
@@ -402,16 +402,9 @@ function handleTouchEnd(event) {
 </div>
 
 <!-- Control panel -->
-<div class="blur-tool-panel">
-  <div class="panel-header">
-    <h3>{$_('editor.blur')}</h3>
-    <button class="close-btn" onclick={onClose} title={$_('editor.close')}>
-      <X size={20} />
-    </button>
-  </div>
-
-  {#if selectedArea}
-    <div class="panel-content">
+<ToolPanel title={$_('editor.blur')} {onClose}>
+  {#snippet children()}
+    {#if selectedArea}
       <div class="control-group">
         <label for="blur-strength">
           <span>{$_('blur.strength')}</span>
@@ -426,19 +419,21 @@ function handleTouchEnd(event) {
           oninput={(e) => handleBlurStrengthChange(Number(e.currentTarget.value))}
         />
       </div>
-
-      <div class="panel-actions">
-        <button class="btn btn-danger" onclick={handleDeleteArea}>
-          {$_('editor.delete')}
-        </button>
+    {:else}
+      <div class="panel-hint">
+        <p>{$_('blur.hint')}</p>
       </div>
-    </div>
-  {:else}
-    <div class="panel-hint">
-      <p>{$_('blur.hint')}</p>
-    </div>
-  {/if}
-</div>
+    {/if}
+  {/snippet}
+
+  {#snippet actions()}
+    {#if selectedArea}
+      <button class="btn btn-danger" onclick={handleDeleteArea}>
+        {$_('editor.delete')}
+      </button>
+    {/if}
+  {/snippet}
+</ToolPanel>
 
 <style>
   .blur-tool-overlay {
@@ -461,55 +456,6 @@ function handleTouchEnd(event) {
     pointer-events: all;
   }
 
-  .blur-tool-panel {
-    position: absolute;
-    top: 1rem;
-    right: 1rem;
-    background: rgba(30, 30, 30, 0.95);
-    border: 1px solid #444;
-    border-radius: 8px;
-    padding: 1rem;
-    min-width: 250px;
-    backdrop-filter: blur(10px);
-  }
-
-  .panel-header {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    margin-bottom: 1rem;
-  }
-
-  .panel-header h3 {
-    margin: 0;
-    font-size: 1.1rem;
-    color: #fff;
-  }
-
-  .close-btn {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    padding: 0.25rem;
-    background: transparent;
-    border: none;
-    color: #999;
-    cursor: pointer;
-    border-radius: 4px;
-    transition: all 0.2s;
-  }
-
-  .close-btn:hover {
-    background: #444;
-    color: #fff;
-  }
-
-  .panel-content {
-    display: flex;
-    flex-direction: column;
-    gap: 1rem;
-  }
-
   .control-group {
     display: flex;
     flex-direction: column;
@@ -568,12 +514,6 @@ function handleTouchEnd(event) {
     transform: scale(1.1);
   }
 
-  .panel-actions {
-    display: flex;
-    justify-content: flex-end;
-    gap: 0.5rem;
-  }
-
   .btn {
     padding: 0.5rem 1rem;
     border: none;

package/dist/components/ExportTool.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">import { _ } from 'svelte-i18n';
 import { Download } from 'lucide-svelte';
+import ToolPanel from './ToolPanel.svelte';
 let { options, onChange, onExport, onClose } = $props();
 function handleFormatChange(format) {
     onChange({ format });
@@ -15,54 +16,53 @@ function handleWheel(e) {
 </script>
 
 <div class="export-tool" onwheel={handleWheel}>
-  <div class="tool-header">
-    <h3>{$_('editor.export')}</h3>
-    <button class="close-btn" onclick={onClose}>✕</button>
-  </div>
-
-  <div class="tool-content">
-    <div class="tool-group">
-      <label>{$_('editor.format')}</label>
-      <div class="format-buttons">
-        <button
-          class="format-btn"
-          class:active={options.format === 'png'}
-          onclick={() => handleFormatChange('png')}
-        >
-          PNG
-        </button>
-        <button
-          class="format-btn"
-          class:active={options.format === 'jpeg'}
-          onclick={() => handleFormatChange('jpeg')}
-        >
-          JPEG
-        </button>
-      </div>
-    </div>
-
-    {#if options.format === 'jpeg'}
+  <ToolPanel title={$_('editor.export')} {onClose}>
+    {#snippet children()}
       <div class="tool-group">
-        <label>
-          {$_('editor.quality')}: {Math.round(options.quality * 100)}%
-        </label>
-        <input
-          type="range"
-          min="0.1"
-          max="1"
-          step="0.05"
-          value={options.quality}
-          oninput={handleQualityChange}
-          class="quality-slider"
-        />
+        <label>{$_('editor.format')}</label>
+        <div class="format-buttons">
+          <button
+            class="format-btn"
+            class:active={options.format === 'png'}
+            onclick={() => handleFormatChange('png')}
+          >
+            PNG
+          </button>
+          <button
+            class="format-btn"
+            class:active={options.format === 'jpeg'}
+            onclick={() => handleFormatChange('jpeg')}
+          >
+            JPEG
+          </button>
+        </div>
       </div>
-    {/if}
 
-    <button class="export-btn" onclick={onExport}>
-      <Download size={20} />
-      <span>{$_('editor.download')}</span>
-    </button>
-  </div>
+      {#if options.format === 'jpeg'}
+        <div class="tool-group">
+          <label>
+            {$_('editor.quality')}: {Math.round(options.quality * 100)}%
+          </label>
+          <input
+            type="range"
+            min="0.1"
+            max="1"
+            step="0.05"
+            value={options.quality}
+            oninput={handleQualityChange}
+            class="quality-slider"
+          />
+        </div>
+      {/if}
+    {/snippet}
+
+    {#snippet actions()}
+      <button class="export-btn" onclick={onExport}>
+        <Download size={20} />
+        <span>{$_('editor.download')}</span>
+      </button>
+    {/snippet}
+  </ToolPanel>
 </div>
 
 <style>
@@ -72,43 +72,6 @@ function handleWheel(e) {
     gap: 1rem;
   }
 
-  .tool-header {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-  }
-
-  .tool-header h3 {
-    margin: 0;
-    font-size: 1.1rem;
-  }
-
-  .close-btn {
-    background: none;
-    border: none;
-    color: #fff;
-    font-size: 1.5rem;
-    cursor: pointer;
-    padding: 0;
-    width: 30px;
-    height: 30px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    border-radius: 4px;
-    transition: background 0.2s;
-  }
-
-  .close-btn:hover {
-    background: #444;
-  }
-
-  .tool-content {
-    display: flex;
-    flex-direction: column;
-    gap: 1.5rem;
-  }
-
   .tool-group {
     display: flex;
     flex-direction: column;