@nice2dev/ui-graphics 1.3.15 → 1.3.16

package/dist/esm/photo/PhotoEditorToolbar.js

@@ -1,18 +1,136 @@
-import { jsxs, jsx } from 'react/jsx-runtime';
-import { NiceIcon } from '@nice2dev/ui-core';
-import React from 'react';
-import { Button } from '../core/LocalUI.js';
-import cs from './PhotoEditor.module.css.js';
-
+import { jsxs, jsx } from "react/jsx-runtime";
+import { NiceIcon } from "@nice2dev/ui-core";
+import React from "react";
+import { Button } from "../core/LocalUI.js";
+import cs from "./PhotoEditor.module.css.js";
 const PhotoEditorToolbar = /* @__PURE__ */ Object.assign(
-/* @__PURE__ */ React.memo(({ api }) => {
-    const { t, accent, historyIdx, historyLength, undo, redo, handleReset, showCompare, setShowCompare, handleDownload, handleCopyToClipboard, handleShareNative, onCancel, handleSave, } = api;
-    return (jsxs("div", { className: cs.toolbar, children: [jsxs("div", { className: cs.toolbarGroup, children: [jsx(Button, { variant: "dark", size: "sm", onClick: undo, disabled: historyIdx <= 0, title: `${t('photoEditor.undo', 'Undo')} (Ctrl+Z)`, children: jsx(NiceIcon, { name: "reply", size: 14 }) }), jsx(Button, { variant: "dark", size: "sm", onClick: redo, disabled: historyIdx >= historyLength - 1, title: t('photoEditor.redo', 'Redo (Ctrl+Y)'), children: jsx(NiceIcon, { name: "forward", size: 14 }) }), jsx(Button, { variant: "dark", size: "sm", onClick: handleReset, title: t('photoEditor.reset', 'Reset'), children: jsx(NiceIcon, { name: "refresh", size: 14 }) }), jsx("div", { className: cs.toolbarDivider }), jsx(Button, { variant: showCompare ? 'outline-info' : 'dark', size: "sm", onClick: () => setShowCompare(!showCompare), title: t('photoEditor.compareOriginal', 'Compare with original'), children: jsx(NiceIcon, { name: "columns", size: 14 }) }), jsx("div", { className: cs.toolbarDivider }), jsx(Button, { variant: "dark", size: "sm", onClick: handleDownload, title: t('photoEditor.download', 'Download'), children: jsx(NiceIcon, { name: "download", size: 14 }) }), jsx(Button, { variant: "dark", size: "sm", onClick: handleCopyToClipboard, title: t('photoEditor.copyToClipboard', 'Copy to clipboard'), children: jsx(NiceIcon, { name: "clipboard", size: 14 }) }), jsx(Button, { variant: "dark", size: "sm", onClick: handleShareNative, title: t('common.share', 'Share'), children: jsx(NiceIcon, { name: "send", size: 14 }) })] }), jsxs("div", { className: cs.toolbarTitle, style: { color: accent }, children: [jsx(NiceIcon, { name: "wand", size: 14, style: { marginRight: 8 } }), t('photoEditor.title', 'Photo Editor')] }), jsxs("div", { className: cs.toolbarGroup, children: [jsxs(Button, { variant: "outline-secondary", size: "sm", onClick: onCancel, children: [jsx(NiceIcon, { name: "close", size: 14, style: { marginRight: 4 } }), ' ', t('common.cancel', 'Cancel')] }), jsxs(Button, { size: "sm", style: {
-                            background: accent,
-                            borderColor: accent,
-                            color: 'var(--nice-color-white, #fff)',
-                            fontWeight: 600,
-                        }, onClick: handleSave, children: [jsx(NiceIcon, { name: "check", size: 14, style: { marginRight: 4 } }), ' ', t('photoEditor.apply', 'Apply')] })] })] }));
-}), { displayName: 'PhotoEditorToolbar' });
-
-export { PhotoEditorToolbar as default };
+  /* @__PURE__ */ React.memo(({ api }) => {
+    const {
+      t,
+      accent,
+      historyIdx,
+      historyLength,
+      undo,
+      redo,
+      handleReset,
+      showCompare,
+      setShowCompare,
+      handleDownload,
+      handleCopyToClipboard,
+      handleShareNative,
+      onCancel,
+      handleSave
+    } = api;
+    return /* @__PURE__ */ jsxs("div", { className: cs.toolbar, children: [
+      /* @__PURE__ */ jsxs("div", { className: cs.toolbarGroup, children: [
+        /* @__PURE__ */ jsx(
+          Button,
+          {
+            variant: "dark",
+            size: "sm",
+            onClick: undo,
+            disabled: historyIdx <= 0,
+            title: `${t("photoEditor.undo", "Undo")} (Ctrl+Z)`,
+            children: /* @__PURE__ */ jsx(NiceIcon, { name: "reply", size: 14 })
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          Button,
+          {
+            variant: "dark",
+            size: "sm",
+            onClick: redo,
+            disabled: historyIdx >= historyLength - 1,
+            title: t("photoEditor.redo", "Redo (Ctrl+Y)"),
+            children: /* @__PURE__ */ jsx(NiceIcon, { name: "forward", size: 14 })
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          Button,
+          {
+            variant: "dark",
+            size: "sm",
+            onClick: handleReset,
+            title: t("photoEditor.reset", "Reset"),
+            children: /* @__PURE__ */ jsx(NiceIcon, { name: "refresh", size: 14 })
+          }
+        ),
+        /* @__PURE__ */ jsx("div", { className: cs.toolbarDivider }),
+        /* @__PURE__ */ jsx(
+          Button,
+          {
+            variant: showCompare ? "outline-info" : "dark",
+            size: "sm",
+            onClick: () => setShowCompare(!showCompare),
+            title: t("photoEditor.compareOriginal", "Compare with original"),
+            children: /* @__PURE__ */ jsx(NiceIcon, { name: "columns", size: 14 })
+          }
+        ),
+        /* @__PURE__ */ jsx("div", { className: cs.toolbarDivider }),
+        /* @__PURE__ */ jsx(
+          Button,
+          {
+            variant: "dark",
+            size: "sm",
+            onClick: handleDownload,
+            title: t("photoEditor.download", "Download"),
+            children: /* @__PURE__ */ jsx(NiceIcon, { name: "download", size: 14 })
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          Button,
+          {
+            variant: "dark",
+            size: "sm",
+            onClick: handleCopyToClipboard,
+            title: t("photoEditor.copyToClipboard", "Copy to clipboard"),
+            children: /* @__PURE__ */ jsx(NiceIcon, { name: "clipboard", size: 14 })
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          Button,
+          {
+            variant: "dark",
+            size: "sm",
+            onClick: handleShareNative,
+            title: t("common.share", "Share"),
+            children: /* @__PURE__ */ jsx(NiceIcon, { name: "send", size: 14 })
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: cs.toolbarTitle, style: { color: accent }, children: [
+        /* @__PURE__ */ jsx(NiceIcon, { name: "wand", size: 14, style: { marginRight: 8 } }),
+        t("photoEditor.title", "Photo Editor")
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: cs.toolbarGroup, children: [
+        /* @__PURE__ */ jsxs(Button, { variant: "outline-secondary", size: "sm", onClick: onCancel, children: [
+          /* @__PURE__ */ jsx(NiceIcon, { name: "close", size: 14, style: { marginRight: 4 } }),
+          " ",
+          t("common.cancel", "Cancel")
+        ] }),
+        /* @__PURE__ */ jsxs(
+          Button,
+          {
+            size: "sm",
+            style: {
+              background: accent,
+              borderColor: accent,
+              color: "var(--nice-color-white, #fff)",
+              fontWeight: 600
+            },
+            onClick: handleSave,
+            children: [
+              /* @__PURE__ */ jsx(NiceIcon, { name: "check", size: 14, style: { marginRight: 4 } }),
+              " ",
+              t("photoEditor.apply", "Apply")
+            ]
+          }
+        )
+      ] })
+    ] });
+  }),
+  { displayName: "PhotoEditorToolbar" }
+);
+export {
+  PhotoEditorToolbar as default
+};

package/dist/esm/photo/photoEditorActions.js

@@ -1,83 +1,105 @@
-import { renderToCanvas } from './photoFilters.js';
-import { renderAllOverlays } from './photoOverlays.js';
-
-/**
- * photoEditorActions.ts — Pure helper functions for photo export, download,
- * clipboard copy, and native share in PhotoEditor.
- */
-/**
- * Render the current editor state to a JPEG Blob for export.
- */
+import { renderToCanvas } from "./photoFilters.js";
+import { renderAllOverlays } from "./photoOverlays.js";
 async function getExportBlob(params) {
-    const { image, selectedFilter, filterParams, filterIntensity, adjustments, cropRect, rotation, flipH, flipV, overlays, } = params;
-    const exportCanvas = document.createElement('canvas');
-    renderToCanvas(exportCanvas, image, selectedFilter, { ...filterParams, intensity: filterIntensity }, adjustments, cropRect, rotation, flipH, flipV);
-    if (overlays.length > 0) {
-        const ctx = exportCanvas.getContext('2d');
-        if (ctx) {
-            renderAllOverlays(ctx, overlays, exportCanvas.width, exportCanvas.height);
-        }
+  const {
+    image,
+    selectedFilter,
+    filterParams,
+    filterIntensity,
+    adjustments,
+    cropRect,
+    rotation,
+    flipH,
+    flipV,
+    overlays
+  } = params;
+  const exportCanvas = document.createElement("canvas");
+  renderToCanvas(
+    exportCanvas,
+    image,
+    selectedFilter,
+    { ...filterParams, intensity: filterIntensity },
+    adjustments,
+    cropRect,
+    rotation,
+    flipH,
+    flipV
+  );
+  if (overlays.length > 0) {
+    const ctx = exportCanvas.getContext("2d");
+    if (ctx) {
+      renderAllOverlays(ctx, overlays, exportCanvas.width, exportCanvas.height);
     }
-    return new Promise((res) => exportCanvas.toBlob((b) => res(b), 'image/jpeg', 0.92));
+  }
+  return new Promise((res) => exportCanvas.toBlob((b) => res(b), "image/jpeg", 0.92));
 }
-/**
- * Trigger a browser download of the given Blob as "photo-edited.jpg".
- */
 function handleDownloadBlob(blob) {
-    const url = URL.createObjectURL(blob);
-    const a = document.createElement('a');
-    a.href = url;
-    a.download = 'photo-edited.jpg';
-    document.body.appendChild(a);
-    a.click();
-    setTimeout(() => {
-        document.body.removeChild(a);
-        URL.revokeObjectURL(url);
-    }, 200);
+  const url = URL.createObjectURL(blob);
+  const a = document.createElement("a");
+  a.href = url;
+  a.download = "photo-edited.jpg";
+  document.body.appendChild(a);
+  a.click();
+  setTimeout(() => {
+    document.body.removeChild(a);
+    URL.revokeObjectURL(url);
+  }, 200);
 }
-/**
- * Copy the current editor output to clipboard as PNG.
- */
 async function handleCopyImageToClipboard(params) {
-    const { image, selectedFilter, filterParams, filterIntensity, adjustments, cropRect, rotation, flipH, flipV, overlays, } = params;
-    try {
-        // Clipboard API requires image/png
-        const pngCanvas = document.createElement('canvas');
-        renderToCanvas(pngCanvas, image, selectedFilter, { ...filterParams, intensity: filterIntensity }, adjustments, cropRect, rotation, flipH, flipV);
-        if (overlays.length > 0) {
-            const ctx = pngCanvas.getContext('2d');
-            if (ctx) {
-                renderAllOverlays(ctx, overlays, pngCanvas.width, pngCanvas.height);
-            }
-        }
-        const pngBlob = await new Promise((res) => pngCanvas.toBlob((b) => res(b), 'image/png'));
-        if (pngBlob) {
-            await navigator.clipboard.write([new ClipboardItem({ 'image/png': pngBlob })]);
-        }
+  const {
+    image,
+    selectedFilter,
+    filterParams,
+    filterIntensity,
+    adjustments,
+    cropRect,
+    rotation,
+    flipH,
+    flipV,
+    overlays
+  } = params;
+  try {
+    const pngCanvas = document.createElement("canvas");
+    renderToCanvas(
+      pngCanvas,
+      image,
+      selectedFilter,
+      { ...filterParams, intensity: filterIntensity },
+      adjustments,
+      cropRect,
+      rotation,
+      flipH,
+      flipV
+    );
+    if (overlays.length > 0) {
+      const ctx = pngCanvas.getContext("2d");
+      if (ctx) {
+        renderAllOverlays(ctx, overlays, pngCanvas.width, pngCanvas.height);
+      }
     }
-    catch (_a) {
-        /* clipboard write not supported — silent fail */
+    const pngBlob = await new Promise(
+      (res) => pngCanvas.toBlob((b) => res(b), "image/png")
+    );
+    if (pngBlob) {
+      await navigator.clipboard.write([new ClipboardItem({ "image/png": pngBlob })]);
     }
+  } catch {
+  }
 }
-/**
- * Use the Web Share API to share the exported image.
- * Falls back to download if sharing is not supported.
- */
 async function handleNativeShare(blob) {
-    var _a;
-    const file = new File([blob], 'photo-edited.jpg', { type: 'image/jpeg' });
-    if (navigator.share && ((_a = navigator.canShare) === null || _a === void 0 ? void 0 : _a.call(navigator, { files: [file] }))) {
-        try {
-            await navigator.share({ files: [file], title: 'AudioVerse Photo', text: '' });
-        }
-        catch (_b) {
-            /* user cancelled or not supported */
-        }
-    }
-    else {
-        // Fallback — just download
-        handleDownloadBlob(blob);
+  const file = new File([blob], "photo-edited.jpg", { type: "image/jpeg" });
+  if (navigator.share && navigator.canShare?.({ files: [file] })) {
+    try {
+      await navigator.share({ files: [file], title: "AudioVerse Photo", text: "" });
+    } catch {
     }
+  } else {
+    handleDownloadBlob(blob);
+  }
 }
-
-export { getExportBlob, handleCopyImageToClipboard, handleDownloadBlob, handleNativeShare };
+export {
+  getExportBlob,
+  handleCopyImageToClipboard,
+  handleDownloadBlob,
+  handleNativeShare
+};

package/dist/esm/photo/photoEditorTypes.js

@@ -1,37 +1,38 @@
-// `icon` holds a @nice2dev/ui-core NiceIcon builtin name (rendered via <NiceIcon />).
 const TAB_DEFS = [
-    { key: 'filters', icon: 'settings', label: 'Filters' },
-    { key: 'adjust', icon: 'lightbulb', label: 'Adjust' },
-    { key: 'crop', icon: 'crop', label: 'Crop' },
-    { key: 'transform', icon: 'move', label: 'Transform' },
-    { key: 'stickers', icon: 'circle', label: 'Stickers' },
-    { key: 'text', icon: 'type', label: 'Text' },
-    { key: 'shapes', icon: 'star', label: 'Shapes' },
-    { key: 'draw', icon: 'brush', label: 'Draw' },
+  { key: "filters", icon: "settings", label: "Filters" },
+  { key: "adjust", icon: "lightbulb", label: "Adjust" },
+  { key: "crop", icon: "crop", label: "Crop" },
+  { key: "transform", icon: "move", label: "Transform" },
+  { key: "stickers", icon: "circle", label: "Stickers" },
+  { key: "text", icon: "type", label: "Text" },
+  { key: "shapes", icon: "star", label: "Shapes" },
+  { key: "draw", icon: "brush", label: "Draw" }
 ];
 const ASPECT_RATIOS = [
-    { label: 'Free', value: null },
-    { label: '1:1', value: 1 },
-    { label: '4:3', value: 4 / 3 },
-    { label: '3:4', value: 3 / 4 },
-    { label: '16:9', value: 16 / 9 },
-    { label: '9:16', value: 9 / 16 },
-    { label: '3:2', value: 3 / 2 },
+  { label: "Free", value: null },
+  { label: "1:1", value: 1 },
+  { label: "4:3", value: 4 / 3 },
+  { label: "3:4", value: 3 / 4 },
+  { label: "16:9", value: 16 / 9 },
+  { label: "9:16", value: 9 / 16 },
+  { label: "3:2", value: 3 / 2 }
 ];
-// `icon` holds a @nice2dev/ui-core NiceIcon builtin name (rendered via <NiceIcon />).
 const ADJUSTMENT_SLIDERS = [
-    { key: 'brightness', label: 'Brightness', min: -100, max: 100, icon: 'lightbulb' },
-    { key: 'contrast', label: 'Contrast', min: -100, max: 100, icon: 'droplet' },
-    { key: 'saturation', label: 'Saturation', min: -100, max: 100, icon: 'droplet' },
-    { key: 'exposure', label: 'Exposure', min: -100, max: 100, icon: 'circle' },
-    { key: 'temperature', label: 'Temperature', min: -100, max: 100, icon: 'droplet' },
-    { key: 'tint', label: 'Tint', min: -100, max: 100, icon: 'brush' },
-    { key: 'highlights', label: 'Highlights', min: -100, max: 100, icon: 'star' },
-    { key: 'shadows', label: 'Shadows', min: -100, max: 100, icon: 'circle' },
-    { key: 'sharpness', label: 'Sharpness', min: 0, max: 100, icon: 'zap' },
-    { key: 'vignette', label: 'Vignette', min: 0, max: 100, icon: 'circle' },
-    { key: 'grain', label: 'Grain', min: 0, max: 100, icon: 'grid' },
-    { key: 'blur', label: 'Blur', min: 0, max: 20, icon: 'eye-off' },
+  { key: "brightness", label: "Brightness", min: -100, max: 100, icon: "lightbulb" },
+  { key: "contrast", label: "Contrast", min: -100, max: 100, icon: "droplet" },
+  { key: "saturation", label: "Saturation", min: -100, max: 100, icon: "droplet" },
+  { key: "exposure", label: "Exposure", min: -100, max: 100, icon: "circle" },
+  { key: "temperature", label: "Temperature", min: -100, max: 100, icon: "droplet" },
+  { key: "tint", label: "Tint", min: -100, max: 100, icon: "brush" },
+  { key: "highlights", label: "Highlights", min: -100, max: 100, icon: "star" },
+  { key: "shadows", label: "Shadows", min: -100, max: 100, icon: "circle" },
+  { key: "sharpness", label: "Sharpness", min: 0, max: 100, icon: "zap" },
+  { key: "vignette", label: "Vignette", min: 0, max: 100, icon: "circle" },
+  { key: "grain", label: "Grain", min: 0, max: 100, icon: "grid" },
+  { key: "blur", label: "Blur", min: 0, max: 20, icon: "eye-off" }
 ];
-
-export { ADJUSTMENT_SLIDERS, ASPECT_RATIOS, TAB_DEFS };
+export {
+  ADJUSTMENT_SLIDERS,
+  ASPECT_RATIOS,
+  TAB_DEFS
+};