@nice2dev/ui-graphics 1.3.15 → 1.3.17

package/dist/esm/photo/PhotoEditorLeftPanel.js

@@ -1,226 +1,1090 @@
-import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
-import { NiceIcon, clickOnActivationKey } from '@nice2dev/ui-core';
-import React from 'react';
-import { RangeInput, Button, TextArea } from '../core/LocalUI.js';
-import FilterThumb from './FilterThumb.js';
-import cs from './PhotoEditor.module.css.js';
-import { TAB_DEFS, ADJUSTMENT_SLIDERS, ASPECT_RATIOS } from './photoEditorTypes.js';
-import { DEFAULT_ADJUSTMENTS } from './photoFilters.js';
-import { EMOJI_CATALOG, SHAPE_CATALOG, FRAME_CATALOG } from './photoOverlays.js';
-
-// ── Overlay Toolbar (extracted from the original inline function) ──
+import { jsxs, jsx, Fragment } from "react/jsx-runtime";
+import { NiceIcon, clickOnActivationKey } from "@nice2dev/ui-core";
+import React from "react";
+import { RangeInput, Button, TextArea } from "../core/LocalUI.js";
+import FilterThumb from "./FilterThumb.js";
+import cs from "./PhotoEditor.module.css.js";
+import { TAB_DEFS, ADJUSTMENT_SLIDERS, ASPECT_RATIOS } from "./photoEditorTypes.js";
+import { DEFAULT_ADJUSTMENTS } from "./photoFilters.js";
+import { EMOJI_CATALOG, SHAPE_CATALOG, FRAME_CATALOG } from "./photoOverlays.js";
 const OverlayToolbar = ({ api }) => {
-    var _a, _b, _c, _d, _e;
-    const { selectedOverlay, accent, t, updateOverlay, pushHistory, moveOverlayBack, moveOverlayForward, deleteOverlay, } = api;
-    if (!selectedOverlay) {
-        return null;
-    }
-    return (jsxs("div", { className: cs.overlayToolbar, children: [jsxs("span", { className: cs.overlayToolbarLabel, children: [jsx(NiceIcon, { name: "box", size: 14, style: { marginRight: 4 } }), t('photoEditor.layer', 'Layer')] }), jsx(RangeInput, { min: 0, max: 100, value: ((_a = selectedOverlay.opacity) !== null && _a !== void 0 ? _a : 1) * 100, onChange: (e) => updateOverlay(selectedOverlay.id, { opacity: Number(e.target.value) / 100 }), onMouseUp: pushHistory, accentColor: accent, style: { maxWidth: 70 }, title: t('photoEditor.opacity', 'Opacity') }), jsxs("span", { className: cs.sliderValueSm, style: { color: accent }, children: [Math.round(((_b = selectedOverlay.opacity) !== null && _b !== void 0 ? _b : 1) * 100), "%"] }), selectedOverlay.type !== 'drawing' && selectedOverlay.type !== 'frame' && (jsxs(Fragment, { children: [jsx(RangeInput, { min: 20, max: 500, value: ((_c = selectedOverlay.scaleX) !== null && _c !== void 0 ? _c : 1) * 100, onChange: (e) => {
-                            const s = Number(e.target.value) / 100;
-                            updateOverlay(selectedOverlay.id, { scaleX: s, scaleY: s });
-                        }, onMouseUp: pushHistory, accentColor: accent, style: { maxWidth: 60 }, title: t('photoEditor.scale', 'Scale') }), jsxs("span", { className: cs.sliderValueSm, style: { color: 'var(--nice-text-muted, #aaa)' }, children: [Math.round(((_d = selectedOverlay.scaleX) !== null && _d !== void 0 ? _d : 1) * 100), "%"] })] })), selectedOverlay.type !== 'drawing' && selectedOverlay.type !== 'frame' && (jsx(RangeInput, { min: -180, max: 180, value: (_e = selectedOverlay.rotation) !== null && _e !== void 0 ? _e : 0, onChange: (e) => updateOverlay(selectedOverlay.id, { rotation: Number(e.target.value) }), onMouseUp: pushHistory, accentColor: accent, style: { maxWidth: 60 }, title: t('photoEditor.rotation', 'Rotation') })), jsx(Button, { variant: "dark", size: "sm", onClick: () => moveOverlayBack(selectedOverlay.id), title: t('photoEditor.moveBack', 'Move back'), className: cs.overlayToolbarBtn, children: jsx(NiceIcon, { name: "arrow-down", size: 14 }) }), jsx(Button, { variant: "dark", size: "sm", onClick: () => moveOverlayForward(selectedOverlay.id), title: t('photoEditor.moveForward', 'Move forward'), className: cs.overlayToolbarBtn, children: jsx(NiceIcon, { name: "arrow-up", size: 14 }) }), jsx(Button, { variant: "outline-danger", size: "sm", onClick: () => deleteOverlay(selectedOverlay.id), className: cs.overlayToolbarBtn, title: t('photoEditor.deleteLayer', 'Delete layer'), children: jsx(NiceIcon, { name: "trash", size: 14 }) })] }));
+  const {
+    selectedOverlay,
+    accent,
+    t,
+    updateOverlay,
+    pushHistory,
+    moveOverlayBack,
+    moveOverlayForward,
+    deleteOverlay
+  } = api;
+  if (!selectedOverlay) {
+    return null;
+  }
+  return /* @__PURE__ */ jsxs("div", { className: cs.overlayToolbar, children: [
+    /* @__PURE__ */ jsxs("span", { className: cs.overlayToolbarLabel, children: [
+      /* @__PURE__ */ jsx(NiceIcon, { name: "box", size: 14, style: { marginRight: 4 } }),
+      t("photoEditor.layer", "Layer")
+    ] }),
+    /* @__PURE__ */ jsx(
+      RangeInput,
+      {
+        min: 0,
+        max: 100,
+        value: (selectedOverlay.opacity ?? 1) * 100,
+        onChange: (e) => updateOverlay(selectedOverlay.id, { opacity: Number(e.target.value) / 100 }),
+        onMouseUp: pushHistory,
+        accentColor: accent,
+        style: { maxWidth: 70 },
+        title: t("photoEditor.opacity", "Opacity")
+      }
+    ),
+    /* @__PURE__ */ jsxs("span", { className: cs.sliderValueSm, style: { color: accent }, children: [
+      Math.round((selectedOverlay.opacity ?? 1) * 100),
+      "%"
+    ] }),
+    selectedOverlay.type !== "drawing" && selectedOverlay.type !== "frame" && /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(
+        RangeInput,
+        {
+          min: 20,
+          max: 500,
+          value: (selectedOverlay.scaleX ?? 1) * 100,
+          onChange: (e) => {
+            const s = Number(e.target.value) / 100;
+            updateOverlay(selectedOverlay.id, { scaleX: s, scaleY: s });
+          },
+          onMouseUp: pushHistory,
+          accentColor: accent,
+          style: { maxWidth: 60 },
+          title: t("photoEditor.scale", "Scale")
+        }
+      ),
+      /* @__PURE__ */ jsxs("span", { className: cs.sliderValueSm, style: { color: "var(--nice-text-muted, #aaa)" }, children: [
+        Math.round((selectedOverlay.scaleX ?? 1) * 100),
+        "%"
+      ] })
+    ] }),
+    selectedOverlay.type !== "drawing" && selectedOverlay.type !== "frame" && /* @__PURE__ */ jsx(
+      RangeInput,
+      {
+        min: -180,
+        max: 180,
+        value: selectedOverlay.rotation ?? 0,
+        onChange: (e) => updateOverlay(selectedOverlay.id, { rotation: Number(e.target.value) }),
+        onMouseUp: pushHistory,
+        accentColor: accent,
+        style: { maxWidth: 60 },
+        title: t("photoEditor.rotation", "Rotation")
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      Button,
+      {
+        variant: "dark",
+        size: "sm",
+        onClick: () => moveOverlayBack(selectedOverlay.id),
+        title: t("photoEditor.moveBack", "Move back"),
+        className: cs.overlayToolbarBtn,
+        children: /* @__PURE__ */ jsx(NiceIcon, { name: "arrow-down", size: 14 })
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      Button,
+      {
+        variant: "dark",
+        size: "sm",
+        onClick: () => moveOverlayForward(selectedOverlay.id),
+        title: t("photoEditor.moveForward", "Move forward"),
+        className: cs.overlayToolbarBtn,
+        children: /* @__PURE__ */ jsx(NiceIcon, { name: "arrow-up", size: 14 })
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      Button,
+      {
+        variant: "outline-danger",
+        size: "sm",
+        onClick: () => deleteOverlay(selectedOverlay.id),
+        className: cs.overlayToolbarBtn,
+        title: t("photoEditor.deleteLayer", "Delete layer"),
+        children: /* @__PURE__ */ jsx(NiceIcon, { name: "trash", size: 14 })
+      }
+    )
+  ] });
 };
-// ── Left Panel ──
 const PhotoEditorLeftPanel = /* @__PURE__ */ Object.assign(
-/* @__PURE__ */ React.memo(({ api }) => {
-    var _a;
-    const { t, accent, accentDim, activeTab, setActiveTab, setCropMode, 
-    // Filters
-    selectedFilter, setSelectedFilter, filterIntensity, setFilterIntensity, filterCategory, setFilterCategory, filteredList, generateThumbnail, pushHistory, 
-    // Adjustments
-    adjustments, handleAdjChange, handleAdjChangeEnd, 
-    // Crop
-    image, cropRect, setCropRect, cropAspect, setCropAspect, 
-    // Transform
-    rotation, setRotation, flipH, setFlipH, flipV, setFlipV, zoom, setZoom, 
-    // Overlays
-    overlays, setOverlays, selectedOverlayId, setSelectedOverlayId, addOverlay, deleteOverlay, mainCanvasRef, 
-    // Stickers / Emoji
-    emojiCat, setEmojiCat, 
-    // Text
-    textDraft, setTextDraft, textColor, setTextColor, textBold, setTextBold, textItalic, setTextItalic, textOutline, setTextOutline, textFontSize, setTextFontSize, textBg, setTextBg, selectedOverlay, updateOverlay, 
-    // Shapes
-    shapeStroke, setShapeStroke, shapeFill, setShapeFill, shapeStrokeW, setShapeStrokeW, 
-    // Frame
-    frameColor, setFrameColor, frameThick, setFrameThick, 
-    // Drawing
-    drawColor, setDrawColor, drawWidth, setDrawWidth, drawingOverlayRef, 
-    // Creators
-    createEmojiOverlay, createTextOverlay, createShapeOverlay, createFrameOverlay, } = api;
-    return (jsxs("div", { className: cs.leftPanel, children: [jsx("div", { className: cs.tabBar, children: TAB_DEFS.map((tab) => (jsxs("button", { onClick: () => {
-                        setActiveTab(tab.key);
-                        if (tab.key === 'crop') {
-                            setCropMode(true);
+  /* @__PURE__ */ React.memo(({ api }) => {
+    const {
+      t,
+      accent,
+      accentDim,
+      activeTab,
+      setActiveTab,
+      setCropMode,
+      // Filters
+      selectedFilter,
+      setSelectedFilter,
+      filterIntensity,
+      setFilterIntensity,
+      filterCategory,
+      setFilterCategory,
+      filteredList,
+      generateThumbnail,
+      pushHistory,
+      // Adjustments
+      adjustments,
+      handleAdjChange,
+      handleAdjChangeEnd,
+      // Crop
+      image,
+      cropRect,
+      setCropRect,
+      cropAspect,
+      setCropAspect,
+      // Transform
+      rotation,
+      setRotation,
+      flipH,
+      setFlipH,
+      flipV,
+      setFlipV,
+      zoom,
+      setZoom,
+      // Overlays
+      overlays,
+      setOverlays,
+      selectedOverlayId,
+      setSelectedOverlayId,
+      addOverlay,
+      deleteOverlay,
+      mainCanvasRef,
+      // Stickers / Emoji
+      emojiCat,
+      setEmojiCat,
+      // Text
+      textDraft,
+      setTextDraft,
+      textColor,
+      setTextColor,
+      textBold,
+      setTextBold,
+      textItalic,
+      setTextItalic,
+      textOutline,
+      setTextOutline,
+      textFontSize,
+      setTextFontSize,
+      textBg,
+      setTextBg,
+      selectedOverlay,
+      updateOverlay,
+      // Shapes
+      shapeStroke,
+      setShapeStroke,
+      shapeFill,
+      setShapeFill,
+      shapeStrokeW,
+      setShapeStrokeW,
+      // Frame
+      frameColor,
+      setFrameColor,
+      frameThick,
+      setFrameThick,
+      // Drawing
+      drawColor,
+      setDrawColor,
+      drawWidth,
+      setDrawWidth,
+      drawingOverlayRef,
+      // Creators
+      createEmojiOverlay,
+      createTextOverlay,
+      createShapeOverlay,
+      createFrameOverlay
+    } = api;
+    return /* @__PURE__ */ jsxs("div", { className: cs.leftPanel, children: [
+      /* @__PURE__ */ jsx("div", { className: cs.tabBar, children: TAB_DEFS.map((tab) => /* @__PURE__ */ jsxs(
+        "button",
+        {
+          onClick: () => {
+            setActiveTab(tab.key);
+            if (tab.key === "crop") {
+              setCropMode(true);
+            } else {
+              setCropMode(false);
+            }
+          },
+          title: tab.label,
+          className: activeTab === tab.key ? cs.tabButtonActive : cs.tabButton,
+          style: {
+            color: activeTab === tab.key ? accent : void 0,
+            borderBottomColor: activeTab === tab.key ? accent : void 0
+          },
+          children: [
+            /* @__PURE__ */ jsx(NiceIcon, { name: tab.icon, size: 14 }),
+            tab.label
+          ]
+        },
+        tab.key
+      )) }),
+      /* @__PURE__ */ jsxs("div", { className: cs.panelContent, children: [
+        activeTab === "filters" && /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx("div", { className: cs.pillRow, children: [
+            { key: "all", label: t("photoEditor.all", "All") },
+            { key: "color", label: t("photoEditor.color", "Color") },
+            { key: "light", label: t("photoEditor.light", "Light") },
+            { key: "vintage", label: t("photoEditor.vintage", "Vintage") },
+            { key: "artistic", label: t("photoEditor.artistic", "Artistic") },
+            { key: "fun", label: t("photoEditor.fun", "Fun") }
+          ].map((cat) => /* @__PURE__ */ jsx(
+            "button",
+            {
+              onClick: () => setFilterCategory(cat.key),
+              className: filterCategory === cat.key ? cs.pillActive : cs.pill,
+              style: {
+                borderColor: filterCategory === cat.key ? accent : void 0,
+                background: filterCategory === cat.key ? accentDim : void 0
+              },
+              children: cat.label
+            },
+            cat.key
+          )) }),
+          /* @__PURE__ */ jsx("div", { className: cs.filterGrid, children: filteredList.map((filter) => /* @__PURE__ */ jsx(
+            FilterThumb,
+            {
+              filter,
+              selected: selectedFilter === filter.id,
+              accent,
+              onSelect: () => {
+                setSelectedFilter(filter.id);
+                pushHistory();
+              },
+              generateThumbnail
+            },
+            filter.id
+          )) }),
+          selectedFilter !== "none" && /* @__PURE__ */ jsxs("div", { className: cs.intensitySection, children: [
+            /* @__PURE__ */ jsxs("div", { className: cs.intensityHeader, children: [
+              /* @__PURE__ */ jsxs("span", { className: cs.sliderLabel, children: [
+                /* @__PURE__ */ jsx(NiceIcon, { name: "bar-chart", size: 14, style: { marginRight: 4 } }),
+                t("photoEditor.intensity", "Intensity")
+              ] }),
+              /* @__PURE__ */ jsxs("span", { className: cs.sliderValue, style: { color: accent }, children: [
+                Math.round(filterIntensity * 100),
+                "%"
+              ] })
+            ] }),
+            /* @__PURE__ */ jsx(
+              RangeInput,
+              {
+                min: 0,
+                max: 100,
+                value: filterIntensity * 100,
+                onChange: (e) => setFilterIntensity(Number(e.target.value) / 100),
+                onMouseUp: () => pushHistory(),
+                accentColor: accent
+              }
+            )
+          ] })
+        ] }),
+        activeTab === "adjust" && /* @__PURE__ */ jsxs("div", { className: cs.adjustColumn, children: [
+          ADJUSTMENT_SLIDERS.map((sl) => /* @__PURE__ */ jsxs("div", { children: [
+            /* @__PURE__ */ jsxs("div", { className: cs.adjustHeader, children: [
+              /* @__PURE__ */ jsxs("span", { className: cs.sliderLabel, children: [
+                /* @__PURE__ */ jsx(NiceIcon, { name: sl.icon, size: 14, style: { marginRight: 4 } }),
+                sl.label
+              ] }),
+              /* @__PURE__ */ jsx(
+                "span",
+                {
+                  role: "button",
+                  tabIndex: 0,
+                  "aria-label": t("photoEditor.reset", "Reset"),
+                  onKeyDown: clickOnActivationKey,
+                  className: cs.adjustValue,
+                  style: {
+                    color: adjustments[sl.key] !== 0 ? accent : "var(--nice-text-secondary, #666)"
+                  },
+                  onClick: () => handleAdjChange(sl.key, sl.key === "blur" ? 0 : 0),
+                  title: t("photoEditor.reset", "Reset"),
+                  children: adjustments[sl.key]
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsx(
+              RangeInput,
+              {
+                min: sl.min,
+                max: sl.max,
+                value: adjustments[sl.key],
+                onChange: (e) => handleAdjChange(sl.key, Number(e.target.value)),
+                onMouseUp: handleAdjChangeEnd,
+                accentColor: accent
+              }
+            )
+          ] }, sl.key)),
+          /* @__PURE__ */ jsxs(
+            Button,
+            {
+              variant: "outline-secondary",
+              size: "sm",
+              className: "mt-2",
+              onClick: () => {
+                handleAdjChange("brightness", 0);
+                const defaults = { ...DEFAULT_ADJUSTMENTS };
+                for (const key of Object.keys(defaults)) {
+                  handleAdjChange(key, defaults[key]);
+                }
+                pushHistory();
+              },
+              children: [
+                /* @__PURE__ */ jsx(NiceIcon, { name: "refresh", size: 14, style: { marginRight: 4 } }),
+                t("photoEditor.resetAdjustments", "Reset adjustments")
+              ]
+            }
+          )
+        ] }),
+        activeTab === "crop" && /* @__PURE__ */ jsxs("div", { children: [
+          /* @__PURE__ */ jsxs("div", { className: cs.cropInfo, children: [
+            /* @__PURE__ */ jsx(NiceIcon, { name: "info", size: 14, style: { marginRight: 4 } }),
+            t("photoEditor.dragCornersOrEdgesTo", "Drag corners or edges to crop the photo.")
+          ] }),
+          /* @__PURE__ */ jsx("div", { className: cs.cropAspectLabel, children: t("photoEditor.aspectRatio", "Aspect ratio") }),
+          /* @__PURE__ */ jsx("div", { className: cs.cropAspectRow, children: ASPECT_RATIOS.map((ar) => /* @__PURE__ */ jsx(
+            "button",
+            {
+              onClick: () => {
+                setCropAspect(ar.value);
+                if (ar.value && cropRect && image) {
+                  let newW = cropRect.w;
+                  let newH = cropRect.w / ar.value;
+                  if (newH > image.naturalHeight) {
+                    newH = image.naturalHeight;
+                    newW = newH * ar.value;
+                  }
+                  setCropRect({
+                    x: Math.max(0, cropRect.x),
+                    y: Math.max(0, cropRect.y),
+                    w: Math.min(newW, image.naturalWidth),
+                    h: Math.min(newH, image.naturalHeight)
+                  });
+                }
+              },
+              className: cropAspect === ar.value ? cs.pillCropActive : cs.pillCrop,
+              style: {
+                borderColor: cropAspect === ar.value ? accent : void 0,
+                background: cropAspect === ar.value ? accentDim : void 0
+              },
+              children: ar.label
+            },
+            ar.label
+          )) }),
+          /* @__PURE__ */ jsxs(
+            Button,
+            {
+              variant: "outline-secondary",
+              size: "sm",
+              className: "mt-3",
+              onClick: () => {
+                if (image) {
+                  setCropRect({ x: 0, y: 0, w: image.naturalWidth, h: image.naturalHeight });
+                  setCropAspect(null);
+                  pushHistory();
+                }
+              },
+              children: [
+                /* @__PURE__ */ jsx(NiceIcon, { name: "expand", size: 14, style: { marginRight: 4 } }),
+                t("photoEditor.resetCrop", "Reset crop")
+              ]
+            }
+          )
+        ] }),
+        activeTab === "transform" && /* @__PURE__ */ jsxs("div", { children: [
+          /* @__PURE__ */ jsx("div", { className: cs.sectionTitleMb8, children: t("photoEditor.rotation", "Rotation") }),
+          /* @__PURE__ */ jsxs("div", { className: cs.transformRow, children: [
+            /* @__PURE__ */ jsxs(
+              Button,
+              {
+                variant: "dark",
+                size: "sm",
+                onClick: () => {
+                  setRotation((rotation - 90 + 360) % 360);
+                  pushHistory();
+                },
+                children: [
+                  /* @__PURE__ */ jsx(NiceIcon, { name: "reply", size: 14, style: { marginRight: 4 } }),
+                  " -90°"
+                ]
+              }
+            ),
+            /* @__PURE__ */ jsxs(
+              Button,
+              {
+                variant: "dark",
+                size: "sm",
+                onClick: () => {
+                  setRotation((rotation + 90) % 360);
+                  pushHistory();
+                },
+                children: [
+                  /* @__PURE__ */ jsx(NiceIcon, { name: "forward", size: 14, style: { marginRight: 4 } }),
+                  " +90°"
+                ]
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              Button,
+              {
+                variant: "dark",
+                size: "sm",
+                onClick: () => {
+                  setRotation(0);
+                  pushHistory();
+                },
+                children: "0°"
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsx("div", { className: cs.sectionTitleMb8, children: t("photoEditor.flip", "Flip") }),
+          /* @__PURE__ */ jsxs("div", { className: cs.transformRow, children: [
+            /* @__PURE__ */ jsxs(
+              Button,
+              {
+                variant: flipH ? "outline-info" : "dark",
+                size: "sm",
+                onClick: () => {
+                  setFlipH(!flipH);
+                  pushHistory();
+                },
+                children: [
+                  /* @__PURE__ */ jsx(NiceIcon, { name: "move", size: 14, style: { marginRight: 4 } }),
+                  " ",
+                  t("photoEditor.horizontal", "Horizontal")
+                ]
+              }
+            ),
+            /* @__PURE__ */ jsxs(
+              Button,
+              {
+                variant: flipV ? "outline-info" : "dark",
+                size: "sm",
+                onClick: () => {
+                  setFlipV(!flipV);
+                  pushHistory();
+                },
+                children: [
+                  /* @__PURE__ */ jsx(NiceIcon, { name: "move", size: 14, style: { marginRight: 4 } }),
+                  " ",
+                  t("photoEditor.vertical", "Vertical")
+                ]
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsx("div", { className: cs.sectionTitleMb8, children: t("photoEditor.previewZoom", "Preview zoom") }),
+          /* @__PURE__ */ jsxs("div", { className: cs.transformZoomRow, children: [
+            /* @__PURE__ */ jsx(
+              RangeInput,
+              {
+                min: 50,
+                max: 300,
+                value: zoom * 100,
+                onChange: (e) => setZoom(Number(e.target.value) / 100),
+                accentColor: accent
+              }
+            ),
+            /* @__PURE__ */ jsxs("span", { className: cs.transformZoomValue, style: { color: accent }, children: [
+              Math.round(zoom * 100),
+              "%"
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: cs.transformInfo, children: [
+            /* @__PURE__ */ jsxs("div", { children: [
+              /* @__PURE__ */ jsx("strong", { children: t("photoEditor.rotation2", "Rotation:") }),
+              " ",
+              rotation,
+              "°"
+            ] }),
+            /* @__PURE__ */ jsxs("div", { children: [
+              /* @__PURE__ */ jsx("strong", { children: t("photoEditor.flipH", "Flip H:") }),
+              " ",
+              flipH ? t("photoEditor.yes", "Yes") : t("photoEditor.no", "No")
+            ] }),
+            /* @__PURE__ */ jsxs("div", { children: [
+              /* @__PURE__ */ jsx("strong", { children: t("photoEditor.flipV", "Flip V:") }),
+              " ",
+              flipV ? t("photoEditor.yes", "Yes") : t("photoEditor.no", "No")
+            ] }),
+            cropRect && /* @__PURE__ */ jsxs("div", { children: [
+              /* @__PURE__ */ jsx("strong", { children: t("photoEditor.crop", "Crop:") }),
+              " ",
+              Math.round(cropRect.w),
+              " ×",
+              " ",
+              Math.round(cropRect.h),
+              " (",
+              "x:",
+              Math.round(cropRect.x),
+              ", y:",
+              Math.round(cropRect.y),
+              ")"
+            ] })
+          ] })
+        ] }),
+        activeTab === "stickers" && /* @__PURE__ */ jsxs("div", { children: [
+          /* @__PURE__ */ jsx(OverlayToolbar, { api }),
+          /* @__PURE__ */ jsxs("div", { className: cs.sectionTitle, children: [
+            /* @__PURE__ */ jsx(NiceIcon, { name: "circle", size: 14, style: { marginRight: 4 } }),
+            " ",
+            t("photoEditor.stickersEmoji", "Stickers / Emoji")
+          ] }),
+          /* @__PURE__ */ jsx("div", { className: cs.pillRowGap3, children: EMOJI_CATALOG.map((cat) => /* @__PURE__ */ jsxs(
+            "button",
+            {
+              onClick: () => setEmojiCat(cat.id),
+              className: emojiCat === cat.id ? cs.pillEmojiActive : cs.pillEmoji,
+              style: {
+                borderColor: emojiCat === cat.id ? accent : void 0,
+                background: emojiCat === cat.id ? accentDim : void 0
+              },
+              children: [
+                cat.icon,
+                " ",
+                cat.label
+              ]
+            },
+            cat.id
+          )) }),
+          /* @__PURE__ */ jsx("div", { className: cs.emojiGrid, children: EMOJI_CATALOG.find((c) => c.id === emojiCat)?.emojis.map((em, idx) => /* @__PURE__ */ jsx(
+            "button",
+            {
+              onClick: () => {
+                const cw = mainCanvasRef.current?.width ?? 400;
+                const ch = mainCanvasRef.current?.height ?? 400;
+                addOverlay(createEmojiOverlay(em, cw, ch));
+              },
+              className: cs.emojiBtn,
+              title: em,
+              children: em
+            },
+            idx
+          )) }),
+          overlays.length > 0 && /* @__PURE__ */ jsxs("div", { className: cs.overlaySection, children: [
+            /* @__PURE__ */ jsx("div", { className: cs.overlaySectionTitle, children: t("photoEditor.layers", "Layers ({overlays})").replace(
+              "{overlays}",
+              String(overlays.length)
+            ) }),
+            overlays.map((ov) => /* @__PURE__ */ jsxs(
+              "div",
+              {
+                role: "button",
+                tabIndex: 0,
+                onKeyDown: clickOnActivationKey,
+                onClick: () => setSelectedOverlayId(ov.id),
+                className: cs.overlayItem,
+                style: { background: selectedOverlayId === ov.id ? accentDim : void 0 },
+                children: [
+                  /* @__PURE__ */ jsx("span", { className: cs.overlayIcon, children: ov.type === "emoji" ? ov.emoji : ov.type === "text" ? "T" : ov.type === "shape" ? /* @__PURE__ */ jsx(NiceIcon, { name: "star", size: 14 }) : ov.type === "drawing" ? /* @__PURE__ */ jsx(NiceIcon, { name: "pen", size: 14 }) : /* @__PURE__ */ jsx(NiceIcon, { name: "square", size: 14 }) }),
+                  /* @__PURE__ */ jsx("span", { className: cs.overlayName, children: ov.type === "text" ? ov.text.slice(0, 20) : ov.type === "emoji" ? t("photoEditor.emoji", "Emoji") : ov.type === "shape" ? ov.shapeKind : ov.type === "drawing" ? t("photoEditor.drawing", "Drawing ({strokes})").replace(
+                    "{strokes}",
+                    String(ov.strokes.length)
+                  ) : ov.type === "frame" ? ov.frameStyle : "" }),
+                  /* @__PURE__ */ jsx(
+                    "button",
+                    {
+                      onClick: (e) => {
+                        e.stopPropagation();
+                        deleteOverlay(ov.id);
+                      },
+                      className: cs.overlayDeleteBtn,
+                      "aria-label": t("photoEditor.deleteLayer", "Delete layer"),
+                      children: /* @__PURE__ */ jsx(NiceIcon, { name: "close", size: 14 })
+                    }
+                  )
+                ]
+              },
+              ov.id
+            ))
+          ] })
+        ] }),
+        activeTab === "text" && /* @__PURE__ */ jsxs("div", { children: [
+          /* @__PURE__ */ jsx(OverlayToolbar, { api }),
+          /* @__PURE__ */ jsxs("div", { className: cs.sectionTitleMb8, children: [
+            /* @__PURE__ */ jsx(NiceIcon, { name: "type", size: 14, style: { marginRight: 4 } }),
+            " ",
+            t("photoEditor.addCaption", "Add caption")
+          ] }),
+          /* @__PURE__ */ jsx(
+            TextArea,
+            {
+              rows: 2,
+              value: textDraft,
+              onChange: (e) => setTextDraft(e.target.value),
+              placeholder: t("photoEditor.textPlaceholder", "Enter text…"),
+              className: cs.textArea
+            }
+          ),
+          /* @__PURE__ */ jsxs("div", { className: cs.textBtnRow, children: [
+            /* @__PURE__ */ jsx(
+              Button,
+              {
+                variant: textBold ? "light" : "dark",
+                size: "sm",
+                onClick: () => setTextBold(!textBold),
+                title: t("photoEditor.bold", "Bold"),
+                className: cs.textFormatBtn,
+                style: { fontWeight: 700 },
+                children: "B"
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              Button,
+              {
+                variant: textItalic ? "light" : "dark",
+                size: "sm",
+                onClick: () => setTextItalic(!textItalic),
+                title: t("photoEditor.italic", "Italic"),
+                className: cs.textFormatBtn,
+                style: { fontStyle: "italic" },
+                children: "I"
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              Button,
+              {
+                variant: textOutline ? "light" : "dark",
+                size: "sm",
+                onClick: () => setTextOutline(!textOutline),
+                title: t("photoEditor.outline", "Outline"),
+                className: cs.textFormatBtn,
+                children: "O"
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              Button,
+              {
+                variant: textBg ? "light" : "dark",
+                size: "sm",
+                onClick: () => setTextBg(!textBg),
+                title: t("photoEditor.background", "Background"),
+                className: cs.textFormatBtn,
+                children: /* @__PURE__ */ jsx(NiceIcon, { name: "square", size: 14 })
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "input",
+              {
+                type: "color",
+                value: textColor,
+                onChange: (e) => setTextColor(e.target.value),
+                className: cs.colorInputLg,
+                title: t("photoEditor.textColour", "Text colour")
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: cs.sliderRow, children: [
+            /* @__PURE__ */ jsxs("span", { className: cs.sliderLabel, children: [
+              t("photoEditor.size", "Size"),
+              ":"
+            ] }),
+            /* @__PURE__ */ jsx(
+              RangeInput,
+              {
+                min: 12,
+                max: 120,
+                value: textFontSize,
+                onChange: (e) => setTextFontSize(Number(e.target.value)),
+                accentColor: accent,
+                style: { flex: 1 }
+              }
+            ),
+            /* @__PURE__ */ jsxs("span", { className: cs.sliderValue, style: { color: accent }, children: [
+              textFontSize,
+              "px"
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxs(
+            Button,
+            {
+              size: "sm",
+              className: cs.accentBtn,
+              style: { background: accent, borderColor: accent },
+              disabled: !textDraft.trim(),
+              onClick: () => {
+                const ov = createTextOverlay(textDraft);
+                ov.color = textColor;
+                ov.bold = textBold;
+                ov.italic = textItalic;
+                ov.fontSize = textFontSize;
+                ov.outlineColor = textOutline ? "#000000" : null;
+                ov.outlineWidth = textOutline ? 2 : 0;
+                ov.background = textBg ? "rgba(0, 0, 0, 0.5)" : null;
+                addOverlay(ov);
+              },
+              children: [
+                /* @__PURE__ */ jsx(NiceIcon, { name: "plus", size: 14, style: { marginRight: 4 } }),
+                " ",
+                t("photoEditor.addText", "Add text")
+              ]
+            }
+          ),
+          selectedOverlay?.type === "text" && /* @__PURE__ */ jsxs("div", { className: cs.editSelectedSection, children: [
+            /* @__PURE__ */ jsx("div", { className: cs.editSelectedLabel, children: t("photoEditor.editSelectedText", "Edit selected text:") }),
+            /* @__PURE__ */ jsx(
+              TextArea,
+              {
+                rows: 2,
+                value: selectedOverlay.text,
+                onChange: (e) => updateOverlay(selectedOverlay.id, { text: e.target.value }),
+                onBlur: pushHistory,
+                className: cs.textAreaSm
+              }
+            ),
+            /* @__PURE__ */ jsxs("div", { className: cs.textGapRow, children: [
+              /* @__PURE__ */ jsx(
+                "input",
+                {
+                  type: "color",
+                  value: selectedOverlay.color,
+                  onChange: (e) => {
+                    updateOverlay(selectedOverlay.id, { color: e.target.value });
+                  },
+                  onBlur: pushHistory,
+                  className: cs.colorInput,
+                  "aria-label": t("photoEditor.textColor", "Text overlay color")
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                Button,
+                {
+                  variant: selectedOverlay.bold ? "light" : "dark",
+                  size: "sm",
+                  onClick: () => {
+                    updateOverlay(selectedOverlay.id, {
+                      bold: !selectedOverlay.bold
+                    });
+                    pushHistory();
+                  },
+                  className: cs.textFormatBtnSm,
+                  style: { fontWeight: 700 },
+                  children: "B"
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                Button,
+                {
+                  variant: selectedOverlay.italic ? "light" : "dark",
+                  size: "sm",
+                  onClick: () => {
+                    updateOverlay(selectedOverlay.id, {
+                      italic: !selectedOverlay.italic
+                    });
+                    pushHistory();
+                  },
+                  className: cs.textFormatBtnSm,
+                  style: { fontStyle: "italic" },
+                  children: "I"
+                }
+              )
+            ] })
+          ] })
+        ] }),
+        activeTab === "shapes" && /* @__PURE__ */ jsxs("div", { children: [
+          /* @__PURE__ */ jsx(OverlayToolbar, { api }),
+          /* @__PURE__ */ jsxs("div", { className: cs.sectionTitle, children: [
+            /* @__PURE__ */ jsx(NiceIcon, { name: "star", size: 14, style: { marginRight: 4 } }),
+            " ",
+            t("photoEditor.shapes", "Shapes")
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: cs.shapeColorRow, children: [
+            /* @__PURE__ */ jsx("span", { className: cs.shapeColorLabel, children: t("photoEditor.stroke", "Stroke:") }),
+            /* @__PURE__ */ jsx(
+              "input",
+              {
+                type: "color",
+                value: shapeStroke,
+                onChange: (e) => setShapeStroke(e.target.value),
+                className: cs.colorInput,
+                title: t("photoEditor.strokeColor", "Stroke color")
+              }
+            ),
+            /* @__PURE__ */ jsx("span", { className: cs.shapeColorLabelMl, children: t("photoEditor.fill", "Fill:") }),
+            /* @__PURE__ */ jsx(
+              "input",
+              {
+                type: "color",
+                value: shapeFill || "#ffffff",
+                onChange: (e) => setShapeFill(e.target.value),
+                className: cs.colorInput,
+                title: t("photoEditor.fillColor", "Fill color")
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              Button,
+              {
+                variant: shapeFill ? "light" : "dark",
+                size: "sm",
+                onClick: () => setShapeFill(shapeFill ? "" : "#ffffff"),
+                className: cs.shapeFillToggle,
+                children: shapeFill ? t("photoEditor.off", "Off") : t("photoEditor.on", "On")
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: cs.sliderRow, children: [
+            /* @__PURE__ */ jsx("span", { className: cs.sliderLabel, children: t("photoEditor.width", "Width:") }),
+            /* @__PURE__ */ jsx(
+              RangeInput,
+              {
+                min: 1,
+                max: 20,
+                value: shapeStrokeW,
+                onChange: (e) => setShapeStrokeW(Number(e.target.value)),
+                accentColor: accent,
+                style: { flex: 1 }
+              }
+            ),
+            /* @__PURE__ */ jsxs("span", { className: cs.sliderValue, style: { color: accent }, children: [
+              shapeStrokeW,
+              "px"
+            ] })
+          ] }),
+          /* @__PURE__ */ jsx("div", { className: cs.shapeGrid, children: SHAPE_CATALOG.map((sh) => /* @__PURE__ */ jsx(
+            "button",
+            {
+              title: sh.label,
+              onClick: () => {
+                const ov = createShapeOverlay(sh.id);
+                ov.strokeColor = shapeStroke;
+                ov.fillColor = shapeFill || null;
+                ov.strokeWidth = shapeStrokeW;
+                addOverlay(ov);
+              },
+              className: cs.shapeBtn,
+              children: /* @__PURE__ */ jsx(NiceIcon, { name: sh.icon, size: 18 })
+            },
+            sh.id
+          )) }),
+          /* @__PURE__ */ jsxs("div", { className: cs.sectionTitle, children: [
+            /* @__PURE__ */ jsx(NiceIcon, { name: "image", size: 14, style: { marginRight: 4 } }),
+            " ",
+            t("photoEditor.frames", "Frames")
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: cs.frameColorRow, children: [
+            /* @__PURE__ */ jsx(
+              "input",
+              {
+                type: "color",
+                value: frameColor,
+                onChange: (e) => setFrameColor(e.target.value),
+                className: cs.colorInput,
+                "aria-label": t("photoEditor.frameColor", "Frame color")
+              }
+            ),
+            /* @__PURE__ */ jsxs("div", { className: cs.frameThicknessWrap, children: [
+              /* @__PURE__ */ jsx("span", { className: cs.sliderLabel, children: t("photoEditor.thickness", "Thickness:") }),
+              /* @__PURE__ */ jsx(
+                RangeInput,
+                {
+                  min: 1,
+                  max: 10,
+                  value: frameThick,
+                  onChange: (e) => setFrameThick(Number(e.target.value)),
+                  accentColor: accent,
+                  style: { flex: 1 }
+                }
+              ),
+              /* @__PURE__ */ jsx("span", { className: cs.frameThicknessValue, style: { color: accent }, children: frameThick })
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: cs.frameGrid, children: [
+            FRAME_CATALOG.map((fr) => /* @__PURE__ */ jsx(
+              "button",
+              {
+                title: fr.label,
+                onClick: () => {
+                  setOverlays((prev) => prev.filter((o) => o.type !== "frame"));
+                  const ov = createFrameOverlay(fr.id, frameColor);
+                  ov.thickness = frameThick / 100;
+                  addOverlay(ov);
+                },
+                className: cs.frameBtn,
+                children: /* @__PURE__ */ jsx(NiceIcon, { name: fr.icon, size: 18 })
+              },
+              fr.id
+            )),
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                title: t("photoEditor.removeFrame", "Remove frame"),
+                "aria-label": t("photoEditor.removeFrame", "Remove frame"),
+                onClick: () => {
+                  setOverlays((prev) => prev.filter((o) => o.type !== "frame"));
+                  pushHistory();
+                },
+                className: cs.removeFrameBtn,
+                children: /* @__PURE__ */ jsx(NiceIcon, { name: "close", size: 14 })
+              }
+            )
+          ] })
+        ] }),
+        activeTab === "draw" && /* @__PURE__ */ jsxs("div", { children: [
+          /* @__PURE__ */ jsx(OverlayToolbar, { api }),
+          /* @__PURE__ */ jsxs("div", { className: cs.sectionTitleMb8, children: [
+            /* @__PURE__ */ jsx(NiceIcon, { name: "brush", size: 14, style: { marginRight: 4 } }),
+            " ",
+            t("photoEditor.freehandDrawing", "Freehand drawing")
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: cs.sectionInfoMb, children: [
+            /* @__PURE__ */ jsx(NiceIcon, { name: "info", size: 14, style: { marginRight: 4 } }),
+            t(
+              "photoEditor.drawDirectlyOnThePhoto",
+              "Draw directly on the photo by holding the left mouse button."
+            )
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: cs.quickColorRow, children: [
+            /* @__PURE__ */ jsx("span", { className: cs.sliderLabel, children: t("photoEditor.color2", "Color:") }),
+            /* @__PURE__ */ jsx(
+              "input",
+              {
+                type: "color",
+                value: drawColor,
+                onChange: (e) => setDrawColor(e.target.value),
+                className: cs.colorInputDraw,
+                "aria-label": t("photoEditor.drawColor", "Drawing color")
+              }
+            ),
+            [
+              "#ff0000",
+              "#ff8800",
+              "#ffff00",
+              "#00cc00",
+              "#0088ff",
+              "#8800ff",
+              "#ff00ff",
+              "#ffffff",
+              "#000000"
+            ].map((c) => /* @__PURE__ */ jsx(
+              "div",
+              {
+                role: "button",
+                tabIndex: 0,
+                "aria-label": c,
+                "aria-pressed": drawColor === c,
+                onKeyDown: clickOnActivationKey,
+                onClick: () => setDrawColor(c),
+                className: cs.quickColorSwatch,
+                style: {
+                  background: c,
+                  border: drawColor === c ? `2px solid ${accent}` : void 0
+                }
+              },
+              c
+            ))
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: cs.sliderRow, style: { marginBottom: 12 }, children: [
+            /* @__PURE__ */ jsx("span", { className: cs.sliderLabel, children: t("photoEditor.width", "Width:") }),
+            /* @__PURE__ */ jsx(
+              RangeInput,
+              {
+                min: 1,
+                max: 30,
+                value: drawWidth,
+                onChange: (e) => setDrawWidth(Number(e.target.value)),
+                accentColor: accent,
+                style: { flex: 1 }
+              }
+            ),
+            /* @__PURE__ */ jsxs("span", { className: cs.sliderValue, style: { color: accent }, children: [
+              drawWidth,
+              "px"
+            ] })
+          ] }),
+          /* @__PURE__ */ jsx("div", { className: cs.drawPreview, children: /* @__PURE__ */ jsx(
+            "div",
+            {
+              style: {
+                width: Math.max(drawWidth, 4),
+                height: Math.max(drawWidth, 4),
+                borderRadius: "50%",
+                background: drawColor,
+                border: "1px solid var(--nice-border-color, #555)"
+              }
+            }
+          ) }),
+          /* @__PURE__ */ jsxs("div", { className: cs.drawActionRow, children: [
+            /* @__PURE__ */ jsxs(
+              Button,
+              {
+                variant: "outline-warning",
+                size: "sm",
+                onClick: () => {
+                  if (drawingOverlayRef.current) {
+                    const id = drawingOverlayRef.current.id;
+                    setOverlays(
+                      (prev) => prev.map((o) => {
+                        if (o.id === id && o.type === "drawing") {
+                          const d = o;
+                          if (d.strokes.length <= 1) {
+                            return o;
+                          }
+                          return { ...d, strokes: d.strokes.slice(0, -1) };
                         }
-                        else {
-                            setCropMode(false);
-                        }
-                    }, title: tab.label, className: activeTab === tab.key ? cs.tabButtonActive : cs.tabButton, style: {
-                        color: activeTab === tab.key ? accent : undefined,
-                        borderBottomColor: activeTab === tab.key ? accent : undefined,
-                    }, children: [jsx(NiceIcon, { name: tab.icon, size: 14 }), tab.label] }, tab.key))) }), jsxs("div", { className: cs.panelContent, children: [activeTab === 'filters' && (jsxs(Fragment, { children: [jsx("div", { className: cs.pillRow, children: [
-                                    { key: 'all', label: t('photoEditor.all', 'All') },
-                                    { key: 'color', label: t('photoEditor.color', 'Color') },
-                                    { key: 'light', label: t('photoEditor.light', 'Light') },
-                                    { key: 'vintage', label: t('photoEditor.vintage', 'Vintage') },
-                                    { key: 'artistic', label: t('photoEditor.artistic', 'Artistic') },
-                                    { key: 'fun', label: t('photoEditor.fun', 'Fun') },
-                                ].map((cat) => (jsx("button", { onClick: () => setFilterCategory(cat.key), className: filterCategory === cat.key ? cs.pillActive : cs.pill, style: {
-                                        borderColor: filterCategory === cat.key ? accent : undefined,
-                                        background: filterCategory === cat.key ? accentDim : undefined,
-                                    }, children: cat.label }, cat.key))) }), jsx("div", { className: cs.filterGrid, children: filteredList.map((filter) => (jsx(FilterThumb, { filter: filter, selected: selectedFilter === filter.id, accent: accent, onSelect: () => {
-                                        setSelectedFilter(filter.id);
-                                        pushHistory();
-                                    }, generateThumbnail: generateThumbnail }, filter.id))) }), selectedFilter !== 'none' && (jsxs("div", { className: cs.intensitySection, children: [jsxs("div", { className: cs.intensityHeader, children: [jsxs("span", { className: cs.sliderLabel, children: [jsx(NiceIcon, { name: "bar-chart", size: 14, style: { marginRight: 4 } }), t('photoEditor.intensity', 'Intensity')] }), jsxs("span", { className: cs.sliderValue, style: { color: accent }, children: [Math.round(filterIntensity * 100), "%"] })] }), jsx(RangeInput, { min: 0, max: 100, value: filterIntensity * 100, onChange: (e) => setFilterIntensity(Number(e.target.value) / 100), onMouseUp: () => pushHistory(), accentColor: accent })] }))] })), activeTab === 'adjust' && (jsxs("div", { className: cs.adjustColumn, children: [ADJUSTMENT_SLIDERS.map((sl) => (jsxs("div", { children: [jsxs("div", { className: cs.adjustHeader, children: [jsxs("span", { className: cs.sliderLabel, children: [jsx(NiceIcon, { name: sl.icon, size: 14, style: { marginRight: 4 } }), sl.label] }), jsx("span", { role: "button", tabIndex: 0, "aria-label": t('photoEditor.reset', 'Reset'), onKeyDown: clickOnActivationKey, className: cs.adjustValue, style: {
-                                                    color: adjustments[sl.key] !== 0 ? accent : 'var(--nice-text-secondary, #666)',
-                                                }, onClick: () => handleAdjChange(sl.key, sl.key === 'blur' ? 0 : 0), title: t('photoEditor.reset', 'Reset'), children: adjustments[sl.key] })] }), jsx(RangeInput, { min: sl.min, max: sl.max, value: adjustments[sl.key], onChange: (e) => handleAdjChange(sl.key, Number(e.target.value)), onMouseUp: handleAdjChangeEnd, accentColor: accent })] }, sl.key))), jsxs(Button, { variant: "outline-secondary", size: "sm", className: "mt-2", onClick: () => {
-                                    handleAdjChange('brightness', 0);
-                                    const defaults = { ...DEFAULT_ADJUSTMENTS };
-                                    for (const key of Object.keys(defaults)) {
-                                        handleAdjChange(key, defaults[key]);
-                                    }
-                                    pushHistory();
-                                }, children: [jsx(NiceIcon, { name: "refresh", size: 14, style: { marginRight: 4 } }), t('photoEditor.resetAdjustments', 'Reset adjustments')] })] })), activeTab === 'crop' && (jsxs("div", { children: [jsxs("div", { className: cs.cropInfo, children: [jsx(NiceIcon, { name: "info", size: 14, style: { marginRight: 4 } }), t('photoEditor.dragCornersOrEdgesTo', 'Drag corners or edges to crop the photo.')] }), jsx("div", { className: cs.cropAspectLabel, children: t('photoEditor.aspectRatio', 'Aspect ratio') }), jsx("div", { className: cs.cropAspectRow, children: ASPECT_RATIOS.map((ar) => (jsx("button", { onClick: () => {
-                                        setCropAspect(ar.value);
-                                        if (ar.value && cropRect && image) {
-                                            let newW = cropRect.w;
-                                            let newH = cropRect.w / ar.value;
-                                            if (newH > image.naturalHeight) {
-                                                newH = image.naturalHeight;
-                                                newW = newH * ar.value;
-                                            }
-                                            setCropRect({
-                                                x: Math.max(0, cropRect.x),
-                                                y: Math.max(0, cropRect.y),
-                                                w: Math.min(newW, image.naturalWidth),
-                                                h: Math.min(newH, image.naturalHeight),
-                                            });
-                                        }
-                                    }, className: cropAspect === ar.value ? cs.pillCropActive : cs.pillCrop, style: {
-                                        borderColor: cropAspect === ar.value ? accent : undefined,
-                                        background: cropAspect === ar.value ? accentDim : undefined,
-                                    }, children: ar.label }, ar.label))) }), jsxs(Button, { variant: "outline-secondary", size: "sm", className: "mt-3", onClick: () => {
-                                    if (image) {
-                                        setCropRect({ x: 0, y: 0, w: image.naturalWidth, h: image.naturalHeight });
-                                        setCropAspect(null);
-                                        pushHistory();
-                                    }
-                                }, children: [jsx(NiceIcon, { name: "expand", size: 14, style: { marginRight: 4 } }), t('photoEditor.resetCrop', 'Reset crop')] })] })), activeTab === 'transform' && (jsxs("div", { children: [jsx("div", { className: cs.sectionTitleMb8, children: t('photoEditor.rotation', 'Rotation') }), jsxs("div", { className: cs.transformRow, children: [jsxs(Button, { variant: "dark", size: "sm", onClick: () => {
-                                            setRotation((rotation - 90 + 360) % 360);
-                                            pushHistory();
-                                        }, children: [jsx(NiceIcon, { name: "reply", size: 14, style: { marginRight: 4 } }), " -90\u00B0"] }), jsxs(Button, { variant: "dark", size: "sm", onClick: () => {
-                                            setRotation((rotation + 90) % 360);
-                                            pushHistory();
-                                        }, children: [jsx(NiceIcon, { name: "forward", size: 14, style: { marginRight: 4 } }), " +90\u00B0"] }), jsx(Button, { variant: "dark", size: "sm", onClick: () => {
-                                            setRotation(0);
-                                            pushHistory();
-                                        }, children: "0\u00B0" })] }), jsx("div", { className: cs.sectionTitleMb8, children: t('photoEditor.flip', 'Flip') }), jsxs("div", { className: cs.transformRow, children: [jsxs(Button, { variant: flipH ? 'outline-info' : 'dark', size: "sm", onClick: () => {
-                                            setFlipH(!flipH);
-                                            pushHistory();
-                                        }, children: [jsx(NiceIcon, { name: "move", size: 14, style: { marginRight: 4 } }), ' ', t('photoEditor.horizontal', 'Horizontal')] }), jsxs(Button, { variant: flipV ? 'outline-info' : 'dark', size: "sm", onClick: () => {
-                                            setFlipV(!flipV);
-                                            pushHistory();
-                                        }, children: [jsx(NiceIcon, { name: "move", size: 14, style: { marginRight: 4 } }), ' ', t('photoEditor.vertical', 'Vertical')] })] }), jsx("div", { className: cs.sectionTitleMb8, children: t('photoEditor.previewZoom', 'Preview zoom') }), jsxs("div", { className: cs.transformZoomRow, children: [jsx(RangeInput, { min: 50, max: 300, value: zoom * 100, onChange: (e) => setZoom(Number(e.target.value) / 100), accentColor: accent }), jsxs("span", { className: cs.transformZoomValue, style: { color: accent }, children: [Math.round(zoom * 100), "%"] })] }), jsxs("div", { className: cs.transformInfo, children: [jsxs("div", { children: [jsx("strong", { children: t('photoEditor.rotation2', 'Rotation:') }), " ", rotation, "\u00B0"] }), jsxs("div", { children: [jsx("strong", { children: t('photoEditor.flipH', 'Flip H:') }), ' ', flipH ? t('photoEditor.yes', 'Yes') : t('photoEditor.no', 'No')] }), jsxs("div", { children: [jsx("strong", { children: t('photoEditor.flipV', 'Flip V:') }), ' ', flipV ? t('photoEditor.yes', 'Yes') : t('photoEditor.no', 'No')] }), cropRect && (jsxs("div", { children: [jsx("strong", { children: t('photoEditor.crop', 'Crop:') }), " ", Math.round(cropRect.w), " \u00D7", ' ', Math.round(cropRect.h), ' (', "x:", Math.round(cropRect.x), ", y:", Math.round(cropRect.y), ")"] }))] })] })), activeTab === 'stickers' && (jsxs("div", { children: [jsx(OverlayToolbar, { api: api }), jsxs("div", { className: cs.sectionTitle, children: [jsx(NiceIcon, { name: "circle", size: 14, style: { marginRight: 4 } }), ' ', t('photoEditor.stickersEmoji', 'Stickers / Emoji')] }), jsx("div", { className: cs.pillRowGap3, children: EMOJI_CATALOG.map((cat) => (jsxs("button", { onClick: () => setEmojiCat(cat.id), className: emojiCat === cat.id ? cs.pillEmojiActive : cs.pillEmoji, style: {
-                                        borderColor: emojiCat === cat.id ? accent : undefined,
-                                        background: emojiCat === cat.id ? accentDim : undefined,
-                                    }, children: [cat.icon, " ", cat.label] }, cat.id))) }), jsx("div", { className: cs.emojiGrid, children: (_a = EMOJI_CATALOG.find((c) => c.id === emojiCat)) === null || _a === void 0 ? void 0 : _a.emojis.map((em, idx) => (jsx("button", { onClick: () => {
-                                        var _a, _b, _c, _d;
-                                        const cw = (_b = (_a = mainCanvasRef.current) === null || _a === void 0 ? void 0 : _a.width) !== null && _b !== void 0 ? _b : 400;
-                                        const ch = (_d = (_c = mainCanvasRef.current) === null || _c === void 0 ? void 0 : _c.height) !== null && _d !== void 0 ? _d : 400;
-                                        addOverlay(createEmojiOverlay(em, cw, ch));
-                                    }, className: cs.emojiBtn, title: em, children: em }, idx))) }), overlays.length > 0 && (jsxs("div", { className: cs.overlaySection, children: [jsx("div", { className: cs.overlaySectionTitle, children: t('photoEditor.layers', 'Layers ({overlays})').replace('{overlays}', String(overlays.length)) }), overlays.map((ov) => (jsxs("div", { role: "button", tabIndex: 0, onKeyDown: clickOnActivationKey, onClick: () => setSelectedOverlayId(ov.id), className: cs.overlayItem, style: { background: selectedOverlayId === ov.id ? accentDim : undefined }, children: [jsx("span", { className: cs.overlayIcon, children: ov.type === 'emoji' ? (ov.emoji) : ov.type === 'text' ? ('T') : ov.type === 'shape' ? (jsx(NiceIcon, { name: "star", size: 14 })) : ov.type === 'drawing' ? (jsx(NiceIcon, { name: "pen", size: 14 })) : (jsx(NiceIcon, { name: "square", size: 14 })) }), jsx("span", { className: cs.overlayName, children: ov.type === 'text'
-                                                    ? ov.text.slice(0, 20)
-                                                    : ov.type === 'emoji'
-                                                        ? t('photoEditor.emoji', 'Emoji')
-                                                        : ov.type === 'shape'
-                                                            ? ov.shapeKind
-                                                            : ov.type === 'drawing'
-                                                                ? t('photoEditor.drawing', 'Drawing ({strokes})').replace('{strokes}', String(ov.strokes.length))
-                                                                : ov.type === 'frame'
-                                                                    ? ov.frameStyle
-                                                                    : '' }), jsx("button", { onClick: (e) => {
-                                                    e.stopPropagation();
-                                                    deleteOverlay(ov.id);
-                                                }, className: cs.overlayDeleteBtn, "aria-label": t('photoEditor.deleteLayer', 'Delete layer'), children: jsx(NiceIcon, { name: "close", size: 14 }) })] }, ov.id)))] }))] })), activeTab === 'text' && (jsxs("div", { children: [jsx(OverlayToolbar, { api: api }), jsxs("div", { className: cs.sectionTitleMb8, children: [jsx(NiceIcon, { name: "type", size: 14, style: { marginRight: 4 } }), ' ', t('photoEditor.addCaption', 'Add caption')] }), jsx(TextArea, { rows: 2, value: textDraft, onChange: (e) => setTextDraft(e.target.value), placeholder: t('photoEditor.textPlaceholder', 'Enter text…'), className: cs.textArea }), jsxs("div", { className: cs.textBtnRow, children: [jsx(Button, { variant: textBold ? 'light' : 'dark', size: "sm", onClick: () => setTextBold(!textBold), title: t('photoEditor.bold', 'Bold'), className: cs.textFormatBtn, style: { fontWeight: 700 }, children: "B" }), jsx(Button, { variant: textItalic ? 'light' : 'dark', size: "sm", onClick: () => setTextItalic(!textItalic), title: t('photoEditor.italic', 'Italic'), className: cs.textFormatBtn, style: { fontStyle: 'italic' }, children: "I" }), jsx(Button, { variant: textOutline ? 'light' : 'dark', size: "sm", onClick: () => setTextOutline(!textOutline), title: t('photoEditor.outline', 'Outline'), className: cs.textFormatBtn, children: "O" }), jsx(Button, { variant: textBg ? 'light' : 'dark', size: "sm", onClick: () => setTextBg(!textBg), title: t('photoEditor.background', 'Background'), className: cs.textFormatBtn, children: jsx(NiceIcon, { name: "square", size: 14 }) }), jsx("input", { type: "color", value: textColor, onChange: (e) => setTextColor(e.target.value), className: cs.colorInputLg, title: t('photoEditor.textColour', 'Text colour') })] }), jsxs("div", { className: cs.sliderRow, children: [jsxs("span", { className: cs.sliderLabel, children: [t('photoEditor.size', 'Size'), ":"] }), jsx(RangeInput, { min: 12, max: 120, value: textFontSize, onChange: (e) => setTextFontSize(Number(e.target.value)), accentColor: accent, style: { flex: 1 } }), jsxs("span", { className: cs.sliderValue, style: { color: accent }, children: [textFontSize, "px"] })] }), jsxs(Button, { size: "sm", className: cs.accentBtn, style: { background: accent, borderColor: accent }, disabled: !textDraft.trim(), onClick: () => {
-                                    const ov = createTextOverlay(textDraft);
-                                    ov.color = textColor;
-                                    ov.bold = textBold;
-                                    ov.italic = textItalic;
-                                    ov.fontSize = textFontSize;
-                                    // Drawn into the photo on canvas (which ignores var()).
-                                    ov.outlineColor = textOutline ? '#000000' : null;
-                                    ov.outlineWidth = textOutline ? 2 : 0;
-                                    // audit-allow: literal-color — caption box drawn into the photo
-                                    ov.background = textBg ? 'rgba(0, 0, 0, 0.5)' : null;
-                                    addOverlay(ov);
-                                }, children: [jsx(NiceIcon, { name: "plus", size: 14, style: { marginRight: 4 } }), ' ', t('photoEditor.addText', 'Add text')] }), (selectedOverlay === null || selectedOverlay === void 0 ? void 0 : selectedOverlay.type) === 'text' && (jsxs("div", { className: cs.editSelectedSection, children: [jsx("div", { className: cs.editSelectedLabel, children: t('photoEditor.editSelectedText', 'Edit selected text:') }), jsx(TextArea, { rows: 2, value: selectedOverlay.text, onChange: (e) => updateOverlay(selectedOverlay.id, { text: e.target.value }), onBlur: pushHistory, className: cs.textAreaSm }), jsxs("div", { className: cs.textGapRow, children: [jsx("input", { type: "color", value: selectedOverlay.color, onChange: (e) => {
-                                                    updateOverlay(selectedOverlay.id, { color: e.target.value });
-                                                }, onBlur: pushHistory, className: cs.colorInput, "aria-label": t('photoEditor.textColor', 'Text overlay color') }), jsx(Button, { variant: selectedOverlay.bold ? 'light' : 'dark', size: "sm", onClick: () => {
-                                                    updateOverlay(selectedOverlay.id, {
-                                                        bold: !selectedOverlay.bold,
-                                                    });
-                                                    pushHistory();
-                                                }, className: cs.textFormatBtnSm, style: { fontWeight: 700 }, children: "B" }), jsx(Button, { variant: selectedOverlay.italic ? 'light' : 'dark', size: "sm", onClick: () => {
-                                                    updateOverlay(selectedOverlay.id, {
-                                                        italic: !selectedOverlay.italic,
-                                                    });
-                                                    pushHistory();
-                                                }, className: cs.textFormatBtnSm, style: { fontStyle: 'italic' }, children: "I" })] })] }))] })), activeTab === 'shapes' && (jsxs("div", { children: [jsx(OverlayToolbar, { api: api }), jsxs("div", { className: cs.sectionTitle, children: [jsx(NiceIcon, { name: "star", size: 14, style: { marginRight: 4 } }), ' ', t('photoEditor.shapes', 'Shapes')] }), jsxs("div", { className: cs.shapeColorRow, children: [jsx("span", { className: cs.shapeColorLabel, children: t('photoEditor.stroke', 'Stroke:') }), jsx("input", { type: "color", value: shapeStroke, onChange: (e) => setShapeStroke(e.target.value), className: cs.colorInput, title: t('photoEditor.strokeColor', 'Stroke color') }), jsx("span", { className: cs.shapeColorLabelMl, children: t('photoEditor.fill', 'Fill:') }), jsx("input", { type: "color", value: shapeFill || '#ffffff', onChange: (e) => setShapeFill(e.target.value), className: cs.colorInput, title: t('photoEditor.fillColor', 'Fill color') }), jsx(Button, { variant: shapeFill ? 'light' : 'dark', size: "sm", onClick: () => setShapeFill(shapeFill ? '' : '#ffffff'), className: cs.shapeFillToggle, children: shapeFill ? t('photoEditor.off', 'Off') : t('photoEditor.on', 'On') })] }), jsxs("div", { className: cs.sliderRow, children: [jsx("span", { className: cs.sliderLabel, children: t('photoEditor.width', 'Width:') }), jsx(RangeInput, { min: 1, max: 20, value: shapeStrokeW, onChange: (e) => setShapeStrokeW(Number(e.target.value)), accentColor: accent, style: { flex: 1 } }), jsxs("span", { className: cs.sliderValue, style: { color: accent }, children: [shapeStrokeW, "px"] })] }), jsx("div", { className: cs.shapeGrid, children: SHAPE_CATALOG.map((sh) => (jsx("button", { title: sh.label, onClick: () => {
-                                        const ov = createShapeOverlay(sh.id);
-                                        ov.strokeColor = shapeStroke;
-                                        ov.fillColor = shapeFill || null;
-                                        ov.strokeWidth = shapeStrokeW;
-                                        addOverlay(ov);
-                                    }, className: cs.shapeBtn, children: jsx(NiceIcon, { name: sh.icon, size: 18 }) }, sh.id))) }), jsxs("div", { className: cs.sectionTitle, children: [jsx(NiceIcon, { name: "image", size: 14, style: { marginRight: 4 } }), ' ', t('photoEditor.frames', 'Frames')] }), jsxs("div", { className: cs.frameColorRow, children: [jsx("input", { type: "color", value: frameColor, onChange: (e) => setFrameColor(e.target.value), className: cs.colorInput, "aria-label": t('photoEditor.frameColor', 'Frame color') }), jsxs("div", { className: cs.frameThicknessWrap, children: [jsx("span", { className: cs.sliderLabel, children: t('photoEditor.thickness', 'Thickness:') }), jsx(RangeInput, { min: 1, max: 10, value: frameThick, onChange: (e) => setFrameThick(Number(e.target.value)), accentColor: accent, style: { flex: 1 } }), jsx("span", { className: cs.frameThicknessValue, style: { color: accent }, children: frameThick })] })] }), jsxs("div", { className: cs.frameGrid, children: [FRAME_CATALOG.map((fr) => (jsx("button", { title: fr.label, onClick: () => {
-                                            setOverlays((prev) => prev.filter((o) => o.type !== 'frame'));
-                                            const ov = createFrameOverlay(fr.id, frameColor);
-                                            ov.thickness = frameThick / 100;
-                                            addOverlay(ov);
-                                        }, className: cs.frameBtn, children: jsx(NiceIcon, { name: fr.icon, size: 18 }) }, fr.id))), jsx("button", { title: t('photoEditor.removeFrame', 'Remove frame'), "aria-label": t('photoEditor.removeFrame', 'Remove frame'), onClick: () => {
-                                            setOverlays((prev) => prev.filter((o) => o.type !== 'frame'));
-                                            pushHistory();
-                                        }, className: cs.removeFrameBtn, children: jsx(NiceIcon, { name: "close", size: 14 }) })] })] })), activeTab === 'draw' && (jsxs("div", { children: [jsx(OverlayToolbar, { api: api }), jsxs("div", { className: cs.sectionTitleMb8, children: [jsx(NiceIcon, { name: "brush", size: 14, style: { marginRight: 4 } }), ' ', t('photoEditor.freehandDrawing', 'Freehand drawing')] }), jsxs("div", { className: cs.sectionInfoMb, children: [jsx(NiceIcon, { name: "info", size: 14, style: { marginRight: 4 } }), t('photoEditor.drawDirectlyOnThePhoto', 'Draw directly on the photo by holding the left mouse button.')] }), jsxs("div", { className: cs.quickColorRow, children: [jsx("span", { className: cs.sliderLabel, children: t('photoEditor.color2', 'Color:') }), jsx("input", { type: "color", value: drawColor, onChange: (e) => setDrawColor(e.target.value), className: cs.colorInputDraw, "aria-label": t('photoEditor.drawColor', 'Drawing color') }), [
-                                        '#ff0000',
-                                        '#ff8800',
-                                        '#ffff00',
-                                        '#00cc00',
-                                        '#0088ff',
-                                        '#8800ff',
-                                        '#ff00ff',
-                                        '#ffffff',
-                                        '#000000',
-                                    ].map((c) => (jsx("div", { role: "button", tabIndex: 0, "aria-label": c, "aria-pressed": drawColor === c, onKeyDown: clickOnActivationKey, onClick: () => setDrawColor(c), className: cs.quickColorSwatch, style: {
-                                            background: c,
-                                            border: drawColor === c ? `2px solid ${accent}` : undefined,
-                                        } }, c)))] }), jsxs("div", { className: cs.sliderRow, style: { marginBottom: 12 }, children: [jsx("span", { className: cs.sliderLabel, children: t('photoEditor.width', 'Width:') }), jsx(RangeInput, { min: 1, max: 30, value: drawWidth, onChange: (e) => setDrawWidth(Number(e.target.value)), accentColor: accent, style: { flex: 1 } }), jsxs("span", { className: cs.sliderValue, style: { color: accent }, children: [drawWidth, "px"] })] }), jsx("div", { className: cs.drawPreview, children: jsx("div", { style: {
-                                        width: Math.max(drawWidth, 4),
-                                        height: Math.max(drawWidth, 4),
-                                        borderRadius: '50%',
-                                        background: drawColor,
-                                        border: '1px solid var(--nice-border-color, #555)',
-                                    } }) }), jsxs("div", { className: cs.drawActionRow, children: [jsxs(Button, { variant: "outline-warning", size: "sm", onClick: () => {
-                                            if (drawingOverlayRef.current) {
-                                                const id = drawingOverlayRef.current.id;
-                                                setOverlays((prev) => prev.map((o) => {
-                                                    if (o.id === id && o.type === 'drawing') {
-                                                        const d = o;
-                                                        if (d.strokes.length <= 1) {
-                                                            return o;
-                                                        }
-                                                        return { ...d, strokes: d.strokes.slice(0, -1) };
-                                                    }
-                                                    return o;
-                                                }));
-                                                pushHistory();
-                                            }
-                                        }, className: cs.drawActionBtn, children: [jsx(NiceIcon, { name: "reply", size: 14, style: { marginRight: 4 } }), ' ', t('photoEditor.undoStroke', 'Undo stroke')] }), jsxs(Button, { variant: "outline-danger", size: "sm", onClick: () => {
-                                            if (drawingOverlayRef.current) {
-                                                deleteOverlay(drawingOverlayRef.current.id);
-                                                drawingOverlayRef.current = null;
-                                            }
-                                        }, className: cs.drawActionBtn, children: [jsx(NiceIcon, { name: "trash", size: 14, style: { marginRight: 4 } }), ' ', t('photoEditor.clear', 'Clear')] })] }), jsxs(Button, { variant: "dark", size: "sm", className: "mt-2 w-100", onClick: () => {
-                                    drawingOverlayRef.current = null;
-                                }, children: [jsx(NiceIcon, { name: "plus", size: 14, style: { marginRight: 4 } }), ' ', t('photoEditor.newDrawingLayer', 'New drawing layer')] })] }))] })] }));
-}), { displayName: 'PhotoEditorLeftPanel' });
-
-export { PhotoEditorLeftPanel as default };
+                        return o;
+                      })
+                    );
+                    pushHistory();
+                  }
+                },
+                className: cs.drawActionBtn,
+                children: [
+                  /* @__PURE__ */ jsx(NiceIcon, { name: "reply", size: 14, style: { marginRight: 4 } }),
+                  " ",
+                  t("photoEditor.undoStroke", "Undo stroke")
+                ]
+              }
+            ),
+            /* @__PURE__ */ jsxs(
+              Button,
+              {
+                variant: "outline-danger",
+                size: "sm",
+                onClick: () => {
+                  if (drawingOverlayRef.current) {
+                    deleteOverlay(drawingOverlayRef.current.id);
+                    drawingOverlayRef.current = null;
+                  }
+                },
+                className: cs.drawActionBtn,
+                children: [
+                  /* @__PURE__ */ jsx(NiceIcon, { name: "trash", size: 14, style: { marginRight: 4 } }),
+                  " ",
+                  t("photoEditor.clear", "Clear")
+                ]
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxs(
+            Button,
+            {
+              variant: "dark",
+              size: "sm",
+              className: "mt-2 w-100",
+              onClick: () => {
+                drawingOverlayRef.current = null;
+              },
+              children: [
+                /* @__PURE__ */ jsx(NiceIcon, { name: "plus", size: 14, style: { marginRight: 4 } }),
+                " ",
+                t("photoEditor.newDrawingLayer", "New drawing layer")
+              ]
+            }
+          )
+        ] })
+      ] })
+    ] });
+  }),
+  { displayName: "PhotoEditorLeftPanel" }
+);
+export {
+  PhotoEditorLeftPanel as default
+};