feat: pick out button and icon-button components

src/components/ImageCropper.svelte

@@ -4,6 +4,7 @@
   import type { ImageCropResult } from "../lib/types/panel";
   import { ImageService } from "../lib/services/imageService";
   import { uiStore, setLoading } from "../stores/uiStore";
+  import { Button } from "../lib/components/ui";
 
   let {
     imageSrc,
@@ -107,10 +108,10 @@
   {/if}
 
   <div class="cropper-actions">
-    <button class="btn btn-secondary" onclick={handleCancel} disabled={isProcessing}> Отмена </button>
+    <Button variant="secondary" onclick={handleCancel} disabled={isProcessing}>Отмена</Button>
-    <button class="btn btn-primary" onclick={handleCrop} disabled={isProcessing}>
+    <Button variant="primary" onclick={handleCrop} disabled={isProcessing} loading={isProcessing}>
-      {isProcessing ? "Обработка..." : "Применить"}
+      Применить
-    </button>
+    </Button>
   </div>
 
   <div class="cropper-info">
@@ -167,39 +168,6 @@
     border: 1px solid #ffcdd2;
   }
 
-  .btn {
-    padding: 0.75rem 1.5rem;
-    border: none;
-    border-radius: 4px;
-    font-size: 1rem;
-    cursor: pointer;
-    transition: all 0.3s ease;
-    font-weight: 500;
-  }
-
-  .btn:disabled {
-    opacity: 0.5;
-    cursor: not-allowed;
-  }
-
-  .btn-primary {
-    background: #007bff;
-    color: white;
-  }
-
-  .btn-primary:hover:not(:disabled) {
-    background: #0056b3;
-  }
-
-  .btn-secondary {
-    background: #6c757d;
-    color: white;
-  }
-
-  .btn-secondary:hover:not(:disabled) {
-    background: #545b62;
-  }
-
   :global(.cropper-view-box),
   :global(.cropper-face) {
     border-radius: 0;

src/components/ImageUpload.svelte

@@ -5,6 +5,7 @@
   import { ImageService } from "../lib/services/imageService";
   import { handleError } from "../lib/utils/errorHandler";
   import type { ImageUploadResult } from "../lib/types/panel";
+  import { Button } from "../lib/components/ui";
 
   let imageService = new ImageService();
 
@@ -155,7 +156,7 @@
     <div class="uploaded-image-preview">
       <img src={uploadedImage} alt="Uploaded preview" />
       <div class="preview-actions">
-        <button class="btn btn-secondary" onclick={resetUpload}> Загрузить другое </button>
+        <Button variant="secondary" onclick={resetUpload}>Загрузить другое</Button>
       </div>
     </div>
   {:else}
@@ -183,11 +184,11 @@
         <p>Перетащите файл сюда, нажмите для выбора, или вставьте через Ctrl+V</p>
 
         <div class="upload-methods">
-          <button class="btn btn-primary" onclick={(e) => { e.stopPropagation(); triggerFileInput(); }}> Выбрать файл </button>
+          <Button variant="primary" onclick={(e) => { e.stopPropagation(); triggerFileInput(); }}>Выбрать файл</Button>
 
-          <button class="btn btn-secondary" onclick={() => (showUrlInput = !showUrlInput)}>
+          <Button variant="secondary" onclick={() => (showUrlInput = !showUrlInput)}>
             {showUrlInput ? "Скрыть" : "По URL"}
-          </button>
+          </Button>
         </div>
 
         {#if showUrlInput}
@@ -199,7 +200,7 @@
               required
               class="url-input"
             />
-            <button type="submit" class="btn btn-primary" disabled={$uiStore.isLoading}> Загрузить </button>
+            <Button type="submit" variant="primary" disabled={$uiStore.isLoading} loading={$uiStore.isLoading}>Загрузить</Button>
           </form>
         {/if}
 
@@ -389,36 +390,4 @@
       transform: rotate(360deg);
     }
   }
-
-  .btn {
-    padding: 0.5rem 1rem;
-    border: none;
-    border-radius: 4px;
-    cursor: pointer;
-    font-size: 0.9rem;
-    transition: all 0.3s ease;
-  }
-
-  .btn-primary {
-    background: #007bff;
-    color: white;
-  }
-
-  .btn-primary:hover:not(:disabled) {
-    background: #0056b3;
-  }
-
-  .btn-secondary {
-    background: #6c757d;
-    color: white;
-  }
-
-  .btn-secondary:hover:not(:disabled) {
-    background: #545b62;
-  }
-
-  .btn:disabled {
-    opacity: 0.6;
-    cursor: not-allowed;
-  }
 </style>

src/components/PanelList.svelte

@@ -4,6 +4,7 @@
   import { panelStore } from "../stores/panelStore";
   import { panelStorage } from "../lib/utils/panelStorage";
   import type { Panel } from "../lib/types/panel";
+  import { IconButton } from "../lib/components/ui";
 
   let { onPanelSelect, onPanelDelete }: {
     onPanelSelect: (panel: Panel) => void;
@@ -75,9 +76,9 @@
 <div class="panel-list">
   <div class="panel-list-header">
     <h2>Сохраненные панели</h2>
-    <button class="btn btn-refresh" onclick={loadPanels} aria-label="Обновить список">
+    <IconButton variant="secondary" onclick={loadPanels} ariaLabel="Обновить список">
       ↻
-    </button>
+    </IconButton>
   </div>
 
   {#if errorMessage}
@@ -118,13 +119,13 @@
             </div>
 
             <div class="panel-actions">
-              <button
+              <IconButton
-                class="btn-icon btn-delete"
+                variant="danger"
                 onclick={(e) => { e.stopPropagation(); handlePanelDelete(panel.id); }}
-                aria-label="Удалить панель"
+                ariaLabel="Удалить панель"
               >
                 🗑️
-              </button>
+              </IconButton>
             </div>
           </div>
         </div>
@@ -158,21 +159,6 @@
     font-size: 1.5rem;
   }
 
-  .btn-refresh {
-    background: none;
-    border: none;
-    font-size: 1.5rem;
-    cursor: pointer;
-    padding: 0.5rem;
-    color: #666;
-    transition: all 0.2s ease;
-  }
-
-  .btn-refresh:hover {
-    color: #007bff;
-    transform: rotate(180deg);
-  }
-
   .error-message {
     background: #ffebee;
     color: #c62828;
@@ -271,17 +257,4 @@
     justify-content: flex-end;
     gap: 0.5rem;
   }
-
-  .btn-icon {
-    background: none;
-    border: none;
-    cursor: pointer;
-    padding: 0.25rem 0.5rem;
-    font-size: 1.2rem;
-    transition: all 0.2s ease;
-  }
-
-  .btn-delete:hover {
-    transform: scale(1.1);
-  }
 </style>

src/components/PanelPreview.svelte

@@ -2,6 +2,7 @@
   import { panelStore } from "../stores/panelStore";
   import type { TextItem } from "../lib/types/panel";
   import { Stage, Layer, Image, Text } from "svelte-konva";
+  import { Button } from "../lib/components/ui";
 
   let {
     onDownload,
@@ -56,7 +57,7 @@
   <div class="preview-header">
     <h2>Предпросмотр панели</h2>
     {#if $panelStore}
-      <button class="btn btn-primary" onclick={handleDownload}> Скачать </button>
+      <Button variant="primary" onclick={handleDownload}>Скачать</Button>
     {/if}
   </div>
 
@@ -171,23 +172,4 @@
     margin: 0;
     font-size: 0.95rem;
   }
-
-  .btn {
-    padding: 0.6rem 1.25rem;
-    border: none;
-    border-radius: 6px;
-    font-size: 0.95rem;
-    cursor: pointer;
-    transition: all 0.2s ease;
-    font-weight: 500;
-  }
-
-  .btn-primary {
-    background: #007bff;
-    color: white;
-  }
-
-  .btn-primary:hover {
-    background: #0056b3;
-  }
 </style>

src/components/TextManager.svelte

@@ -3,6 +3,7 @@
   import { panelStore, addTextToPanel, updateTextInPanel, removeTextFromPanel } from "../stores/panelStore";
   import type { TextItem } from "../lib/types/panel";
   import { v4 as uuidv4 } from "uuid";
+  import { Button, IconButton } from "../lib/components/ui";
 
   let { onTextUpdate }: {
     onTextUpdate: (texts: TextItem[]) => void;
@@ -172,33 +173,36 @@
         <label>
           Выравнивание:
           <div class="alignment-buttons">
-            <button
+            <IconButton
-              class="btn-align {commonTextSettings.textAlign === 'left' ? 'active' : ''}"
+              variant={commonTextSettings.textAlign === 'left' ? 'primary' : 'secondary'}
               onclick={() => {
                 commonTextSettings.textAlign = 'left';
                 applyCommonSettingsToAll();
               }}
+              ariaLabel="Выровнять по левому краю"
             >
               ←
-            </button>
+            </IconButton>
-            <button
+            <IconButton
-              class="btn-align {commonTextSettings.textAlign === 'center' ? 'active' : ''}"
+              variant={commonTextSettings.textAlign === 'center' ? 'primary' : 'secondary'}
               onclick={() => {
                 commonTextSettings.textAlign = 'center';
                 applyCommonSettingsToAll();
               }}
+              ariaLabel="Выровнять по центру"
             >
               ↔
-            </button>
+            </IconButton>
-            <button
+            <IconButton
-              class="btn-align {commonTextSettings.textAlign === 'right' ? 'active' : ''}"
+              variant={commonTextSettings.textAlign === 'right' ? 'primary' : 'secondary'}
               onclick={() => {
                 commonTextSettings.textAlign = 'right';
                 applyCommonSettingsToAll();
               }}
+              ariaLabel="Выровнять по правому краю"
             >
               →
-            </button>
+            </IconButton>
           </div>
         </label>
       </div>
@@ -250,9 +254,7 @@
         class="text-input"
         maxlength="100"
       />
-      <button class="btn btn-primary" onclick={handleAddText}>
+      <Button variant="primary" onclick={handleAddText}>Добавить</Button>
-        Добавить
-      </button>
     </div>
     {#if errorMessage}
       <div class="error-message">
@@ -266,13 +268,13 @@
       {#each currentPanel.texts as textItem (textItem.id)}
         <div class="text-item">
           <span class="text-content">{textItem.text}</span>
-          <button
+          <IconButton
-            class="btn-icon btn-delete"
+            variant="danger"
             onclick={() => handleRemoveText(textItem.id)}
-            aria-label="Удалить текст"
+            ariaLabel="Удалить текст"
           >
             ×
-          </button>
+          </IconButton>
         </div>
       {/each}
     </div>
@@ -323,28 +325,6 @@
     gap: 0.5rem;
   }
 
-  .btn-align {
-    flex: 1;
-    padding: 0.5rem;
-    border: 2px solid #ddd;
-    border-radius: 4px;
-    background: white;
-    cursor: pointer;
-    font-size: 1.2rem;
-    transition: all 0.2s ease;
-  }
-
-  .btn-align:hover {
-    border-color: #007bff;
-    background: #f0f8ff;
-  }
-
-  .btn-align.active {
-    background: #007bff;
-    color: white;
-    border-color: #007bff;
-  }
-
   .add-text-section {
     display: flex;
     flex-direction: column;
@@ -369,25 +349,6 @@
     border-color: #007bff;
   }
 
-  .btn {
-    padding: 0.6rem 1.25rem;
-    border: none;
-    border-radius: 6px;
-    font-size: 0.95rem;
-    cursor: pointer;
-    transition: all 0.2s ease;
-    font-weight: 500;
-  }
-
-  .btn-primary {
-    background: #007bff;
-    color: white;
-  }
-
-  .btn-primary:hover {
-    background: #0056b3;
-  }
-
   .error-message {
     background: #ffebee;
     color: #c62828;
@@ -425,21 +386,6 @@
     flex: 1;
   }
 
-  .btn-icon {
-    background: none;
-    border: none;
-    cursor: pointer;
-    padding: 0.25rem 0.5rem;
-    font-size: 1.25rem;
-    color: #dc3545;
-    transition: all 0.2s ease;
-    line-height: 1;
-  }
-
-  .btn-icon:hover {
-    color: #a71d2a;
-  }
-
   .text-controls {
     padding: 1rem;
     display: flex;

src/lib/components/ui/Button.svelte

@@ -0,0 +1,139 @@
+<script lang="ts">
+  type ButtonVariant = "primary" | "secondary" | "danger";
+  type ButtonSize = "sm" | "md" | "lg";
+  type ButtonType = "button" | "submit" | "reset";
+
+  let {
+    variant = "primary",
+    size = "md",
+    disabled = false,
+    type = "button",
+    fullWidth = false,
+    loading = false,
+    class: className = "",
+    children,
+    ...restProps
+  }: {
+    variant?: ButtonVariant;
+    size?: ButtonSize;
+    disabled?: boolean;
+    type?: ButtonType;
+    fullWidth?: boolean;
+    loading?: boolean;
+    class?: string;
+    children?: any;
+    [key: string]: any;
+  } = $props();
+</script>
+
+<button
+  {type}
+  {disabled}
+  class:btn-primary={variant === "primary"}
+  class:btn-secondary={variant === "secondary"}
+  class:btn-danger={variant === "danger"}
+  class:btn-sm={size === "sm"}
+  class:btn-md={size === "md"}
+  class:btn-lg={size === "lg"}
+  class:btn-full={fullWidth}
+  class:btn-loading={loading}
+  class={className}
+  {...restProps}
+>
+  {#if loading}
+    <span class="btn-spinner"></span>
+  {/if}
+  {@render children?.()}
+</button>
+
+<style>
+  .btn {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: 0.5rem;
+    padding: 0.75rem 1.5rem;
+    border: none;
+    border-radius: 4px;
+    font-size: 1rem;
+    font-weight: 500;
+    cursor: pointer;
+    transition: all 0.3s ease;
+    white-space: nowrap;
+  }
+
+  .btn:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+
+  /* Sizes */
+  .btn-sm {
+    padding: 0.5rem 1rem;
+    font-size: 0.875rem;
+  }
+
+  .btn-md {
+    padding: 0.75rem 1.5rem;
+    font-size: 1rem;
+  }
+
+  .btn-lg {
+    padding: 1rem 2rem;
+    font-size: 1.125rem;
+  }
+
+  .btn-full {
+    width: 100%;
+  }
+
+  /* Variants */
+  .btn-primary {
+    background: #007bff;
+    color: white;
+  }
+
+  .btn-primary:hover:not(:disabled) {
+    background: #0056b3;
+  }
+
+  .btn-secondary {
+    background: #6c757d;
+    color: white;
+  }
+
+  .btn-secondary:hover:not(:disabled) {
+    background: #545b62;
+  }
+
+  .btn-danger {
+    background: #dc3545;
+    color: white;
+  }
+
+  .btn-danger:hover:not(:disabled) {
+    background: #c82333;
+  }
+
+  /* Loading state */
+  .btn-loading {
+    position: relative;
+    pointer-events: none;
+  }
+
+  .btn-spinner {
+    display: inline-block;
+    width: 1rem;
+    height: 1rem;
+    border: 2px solid currentColor;
+    border-right-color: transparent;
+    border-radius: 50%;
+    animation: spin 0.6s linear infinite;
+  }
+
+  @keyframes spin {
+    to {
+      transform: rotate(360deg);
+    }
+  }
+</style>

src/lib/components/ui/IconButton.svelte

@@ -0,0 +1,100 @@
+<script lang="ts">
+  type IconButtonVariant = "primary" | "secondary" | "danger";
+  type IconButtonSize = "sm" | "md" | "lg";
+
+  let {
+    variant = "secondary",
+    size = "md",
+    disabled = false,
+    ariaLabel = "",
+    class: className = "",
+    children,
+    ...restProps
+  }: {
+    variant?: IconButtonVariant;
+    size?: IconButtonSize;
+    disabled?: boolean;
+    ariaLabel?: string;
+    class?: string;
+    children?: any;
+    [key: string]: any;
+  } = $props();
+</script>
+
+<button
+  {disabled}
+  aria-label={ariaLabel}
+  class:icon-btn-primary={variant === "primary"}
+  class:icon-btn-secondary={variant === "secondary"}
+  class:icon-btn-danger={variant === "danger"}
+  class:icon-btn-sm={size === "sm"}
+  class:icon-btn-md={size === "md"}
+  class:icon-btn-lg={size === "lg"}
+  class={className}
+  {...restProps}
+>
+  {@render children?.()}
+</button>
+
+<style>
+  .icon-btn {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    border: none;
+    cursor: pointer;
+    transition: all 0.2s ease;
+    background: none;
+    padding: 0.25rem 0.5rem;
+    font-size: 1.2rem;
+  }
+
+  .icon-btn:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+
+  /* Sizes */
+  .icon-btn-sm {
+    padding: 0.125rem 0.25rem;
+    font-size: 1rem;
+  }
+
+  .icon-btn-md {
+    padding: 0.25rem 0.5rem;
+    font-size: 1.2rem;
+  }
+
+  .icon-btn-lg {
+    padding: 0.375rem 0.75rem;
+    font-size: 1.5rem;
+  }
+
+  /* Variants */
+  .icon-btn-primary {
+    color: #007bff;
+  }
+
+  .icon-btn-primary:hover:not(:disabled) {
+    color: #0056b3;
+    transform: scale(1.1);
+  }
+
+  .icon-btn-secondary {
+    color: #666;
+  }
+
+  .icon-btn-secondary:hover:not(:disabled) {
+    color: #007bff;
+    transform: scale(1.1);
+  }
+
+  .icon-btn-danger {
+    color: #dc3545;
+  }
+
+  .icon-btn-danger:hover:not(:disabled) {
+    color: #c82333;
+    transform: scale(1.1);
+  }
+</style>

src/lib/components/ui/index.ts

@@ -0,0 +1,2 @@
+export { default as Button } from "./Button.svelte";
+export { default as IconButton } from "./IconButton.svelte";