@nice2dev/ui-graphics 1.3.15 → 1.3.16

package/dist/esm/core/colorBlindness.js

@@ -1,129 +1,121 @@
-/**
- * colorBlindness.ts — Color blindness simulation modes for editors.
- *
- * Simulates various types of color vision deficiency on canvas content
- * to help designers create accessible graphics.
- */
-// ── Info ─────────────────────────────────────────────────────────
 const COLOR_BLINDNESS_TYPES = [
-    { type: 'none', label: 'Normal Vision', description: 'Full color vision', prevalence: '~92%' },
-    {
-        type: 'deuteranomaly',
-        label: 'Deuteranomaly',
-        description: 'Reduced sensitivity to green (most common)',
-        prevalence: '~5%',
-    },
-    {
-        type: 'protanomaly',
-        label: 'Protanomaly',
-        description: 'Reduced sensitivity to red',
-        prevalence: '~1.3%',
-    },
-    {
-        type: 'deuteranopia',
-        label: 'Deuteranopia',
-        description: 'No green cone cells',
-        prevalence: '~1.2%',
-    },
-    { type: 'protanopia', label: 'Protanopia', description: 'No red cone cells', prevalence: '~1%' },
-    {
-        type: 'tritanomaly',
-        label: 'Tritanomaly',
-        description: 'Reduced sensitivity to blue',
-        prevalence: '~0.01%',
-    },
-    {
-        type: 'tritanopia',
-        label: 'Tritanopia',
-        description: 'No blue cone cells',
-        prevalence: '~0.003%',
-    },
-    {
-        type: 'achromatopsia',
-        label: 'Achromatopsia',
-        description: 'Monochromatic vision (no color)',
-        prevalence: '~0.003%',
-    },
-    {
-        type: 'achromatomaly',
-        label: 'Achromatomaly',
-        description: 'Almost no color vision',
-        prevalence: '~0.001%',
-    },
+  { type: "none", label: "Normal Vision", description: "Full color vision", prevalence: "~92%" },
+  {
+    type: "deuteranomaly",
+    label: "Deuteranomaly",
+    description: "Reduced sensitivity to green (most common)",
+    prevalence: "~5%"
+  },
+  {
+    type: "protanomaly",
+    label: "Protanomaly",
+    description: "Reduced sensitivity to red",
+    prevalence: "~1.3%"
+  },
+  {
+    type: "deuteranopia",
+    label: "Deuteranopia",
+    description: "No green cone cells",
+    prevalence: "~1.2%"
+  },
+  { type: "protanopia", label: "Protanopia", description: "No red cone cells", prevalence: "~1%" },
+  {
+    type: "tritanomaly",
+    label: "Tritanomaly",
+    description: "Reduced sensitivity to blue",
+    prevalence: "~0.01%"
+  },
+  {
+    type: "tritanopia",
+    label: "Tritanopia",
+    description: "No blue cone cells",
+    prevalence: "~0.003%"
+  },
+  {
+    type: "achromatopsia",
+    label: "Achromatopsia",
+    description: "Monochromatic vision (no color)",
+    prevalence: "~0.003%"
+  },
+  {
+    type: "achromatomaly",
+    label: "Achromatomaly",
+    description: "Almost no color vision",
+    prevalence: "~0.001%"
+  }
 ];
 const SIMULATION_MATRICES = {
-    none: [1, 0, 0, 0, 1, 0, 0, 0, 1],
-    protanopia: [0.567, 0.433, 0.0, 0.558, 0.442, 0.0, 0.0, 0.242, 0.758],
-    deuteranopia: [0.625, 0.375, 0.0, 0.7, 0.3, 0.0, 0.0, 0.3, 0.7],
-    tritanopia: [0.95, 0.05, 0.0, 0.0, 0.433, 0.567, 0.0, 0.475, 0.525],
-    protanomaly: [0.817, 0.183, 0.0, 0.333, 0.667, 0.0, 0.0, 0.125, 0.875],
-    deuteranomaly: [0.8, 0.2, 0.0, 0.258, 0.742, 0.0, 0.0, 0.142, 0.858],
-    tritanomaly: [0.967, 0.033, 0.0, 0.0, 0.733, 0.267, 0.0, 0.183, 0.817],
-    achromatopsia: [0.299, 0.587, 0.114, 0.299, 0.587, 0.114, 0.299, 0.587, 0.114],
-    achromatomaly: [0.618, 0.32, 0.062, 0.163, 0.775, 0.062, 0.163, 0.32, 0.516],
+  none: [1, 0, 0, 0, 1, 0, 0, 0, 1],
+  protanopia: [0.567, 0.433, 0, 0.558, 0.442, 0, 0, 0.242, 0.758],
+  deuteranopia: [0.625, 0.375, 0, 0.7, 0.3, 0, 0, 0.3, 0.7],
+  tritanopia: [0.95, 0.05, 0, 0, 0.433, 0.567, 0, 0.475, 0.525],
+  protanomaly: [0.817, 0.183, 0, 0.333, 0.667, 0, 0, 0.125, 0.875],
+  deuteranomaly: [0.8, 0.2, 0, 0.258, 0.742, 0, 0, 0.142, 0.858],
+  tritanomaly: [0.967, 0.033, 0, 0, 0.733, 0.267, 0, 0.183, 0.817],
+  achromatopsia: [0.299, 0.587, 0.114, 0.299, 0.587, 0.114, 0.299, 0.587, 0.114],
+  achromatomaly: [0.618, 0.32, 0.062, 0.163, 0.775, 0.062, 0.163, 0.32, 0.516]
 };
-// ── Simulation ──────────────────────────────────────────────────
-/** Apply color blindness simulation to ImageData in-place. */
 function simulateColorBlindness(imageData, type) {
-    if (type === 'none') {
-        return imageData;
-    }
-    const m = SIMULATION_MATRICES[type];
-    const data = imageData.data;
-    for (let i = 0; i < data.length; i += 4) {
-        const r = data[i];
-        const g = data[i + 1];
-        const b = data[i + 2];
-        data[i] = Math.min(255, Math.max(0, Math.round(m[0] * r + m[1] * g + m[2] * b)));
-        data[i + 1] = Math.min(255, Math.max(0, Math.round(m[3] * r + m[4] * g + m[5] * b)));
-        data[i + 2] = Math.min(255, Math.max(0, Math.round(m[6] * r + m[7] * g + m[8] * b)));
-        // Alpha unchanged
-    }
+  if (type === "none") {
     return imageData;
+  }
+  const m = SIMULATION_MATRICES[type];
+  const data = imageData.data;
+  for (let i = 0; i < data.length; i += 4) {
+    const r = data[i];
+    const g = data[i + 1];
+    const b = data[i + 2];
+    data[i] = Math.min(255, Math.max(0, Math.round(m[0] * r + m[1] * g + m[2] * b)));
+    data[i + 1] = Math.min(255, Math.max(0, Math.round(m[3] * r + m[4] * g + m[5] * b)));
+    data[i + 2] = Math.min(255, Math.max(0, Math.round(m[6] * r + m[7] * g + m[8] * b)));
+  }
+  return imageData;
 }
-/** Create a new ImageData with color blindness simulation (non-destructive). */
 function simulateColorBlindnessCopy(source, type) {
-    const copy = new ImageData(new Uint8ClampedArray(source.data), source.width, source.height);
-    return simulateColorBlindness(copy, type);
+  const copy = new ImageData(new Uint8ClampedArray(source.data), source.width, source.height);
+  return simulateColorBlindness(copy, type);
 }
-/** Apply color blindness filter to a canvas. */
 function applyColorBlindnessFilter(canvas, type) {
-    if (type === 'none') {
-        return;
-    }
-    const ctx = canvas.getContext('2d');
-    if (!ctx) {
-        return;
-    }
-    const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
-    simulateColorBlindness(imageData, type);
-    ctx.putImageData(imageData, 0, 0);
+  if (type === "none") {
+    return;
+  }
+  const ctx = canvas.getContext("2d");
+  if (!ctx) {
+    return;
+  }
+  const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
+  simulateColorBlindness(imageData, type);
+  ctx.putImageData(imageData, 0, 0);
 }
-/** Simulate color blindness on a single RGB color. */
 function simulateColor(r, g, b, type) {
-    if (type === 'none') {
-        return [r, g, b];
-    }
-    const m = SIMULATION_MATRICES[type];
-    return [
-        Math.min(255, Math.max(0, Math.round(m[0] * r + m[1] * g + m[2] * b))),
-        Math.min(255, Math.max(0, Math.round(m[3] * r + m[4] * g + m[5] * b))),
-        Math.min(255, Math.max(0, Math.round(m[6] * r + m[7] * g + m[8] * b))),
-    ];
+  if (type === "none") {
+    return [r, g, b];
+  }
+  const m = SIMULATION_MATRICES[type];
+  return [
+    Math.min(255, Math.max(0, Math.round(m[0] * r + m[1] * g + m[2] * b))),
+    Math.min(255, Math.max(0, Math.round(m[3] * r + m[4] * g + m[5] * b))),
+    Math.min(255, Math.max(0, Math.round(m[6] * r + m[7] * g + m[8] * b)))
+  ];
 }
-/** Generate an SVG filter for color blindness simulation. */
-function colorBlindnessSvgFilter(type, filterId = 'cb-filter') {
-    if (type === 'none') {
-        return '';
-    }
-    const m = SIMULATION_MATRICES[type];
-    return `<filter id="${filterId}">
-  <feColorMatrix type="matrix" values="
-    ${m[0]} ${m[1]} ${m[2]} 0 0
-    ${m[3]} ${m[4]} ${m[5]} 0 0
-    ${m[6]} ${m[7]} ${m[8]} 0 0
-    0 0 0 1 0" />
+function colorBlindnessSvgFilter(type, filterId = "cb-filter") {
+  if (type === "none") {
+    return "";
+  }
+  const m = SIMULATION_MATRICES[type];
+  return `<filter id="${filterId}">
+  <feColorMatrix type="matrix" values="
+    ${m[0]} ${m[1]} ${m[2]} 0 0
+    ${m[3]} ${m[4]} ${m[5]} 0 0
+    ${m[6]} ${m[7]} ${m[8]} 0 0
+    0 0 0 1 0" />
 </filter>`;
 }
-
-export { COLOR_BLINDNESS_TYPES, applyColorBlindnessFilter, colorBlindnessSvgFilter, simulateColor, simulateColorBlindness, simulateColorBlindnessCopy };
+export {
+  COLOR_BLINDNESS_TYPES,
+  applyColorBlindnessFilter,
+  colorBlindnessSvgFilter,
+  simulateColor,
+  simulateColorBlindness,
+  simulateColorBlindnessCopy
+};

package/dist/esm/core/dragDrop.js

@@ -1,172 +1,172 @@
-import React from 'react';
-
-/**
- * dragDrop.ts — External drag & drop support for editors.
- *
- * Handles file/image drops from the OS or other applications
- * into the editor canvas area.
- */
-// ── File Processing ─────────────────────────────────────────────
+import React from "react";
 async function fileToImageData(file) {
-    if (!file.type.startsWith('image/')) {
-        return null;
-    }
-    return new Promise((resolve) => {
-        const img = new Image();
-        const url = URL.createObjectURL(file);
-        img.onload = () => {
-            const canvas = document.createElement('canvas');
-            canvas.width = img.width;
-            canvas.height = img.height;
-            const ctx = canvas.getContext('2d');
-            if (!ctx) {
-                resolve(null);
-                return;
-            }
-            ctx.drawImage(img, 0, 0);
-            resolve(ctx.getImageData(0, 0, img.width, img.height));
-            URL.revokeObjectURL(url);
-        };
-        img.onerror = () => {
-            resolve(null);
-            URL.revokeObjectURL(url);
-        };
-        img.src = url;
-    });
+  if (!file.type.startsWith("image/")) {
+    return null;
+  }
+  return new Promise((resolve) => {
+    const img = new Image();
+    const url = URL.createObjectURL(file);
+    img.onload = () => {
+      const canvas = document.createElement("canvas");
+      canvas.width = img.width;
+      canvas.height = img.height;
+      const ctx = canvas.getContext("2d");
+      if (!ctx) {
+        resolve(null);
+        return;
+      }
+      ctx.drawImage(img, 0, 0);
+      resolve(ctx.getImageData(0, 0, img.width, img.height));
+      URL.revokeObjectURL(url);
+    };
+    img.onerror = () => {
+      resolve(null);
+      URL.revokeObjectURL(url);
+    };
+    img.src = url;
+  });
 }
 function validateFile(file, config) {
-    var _a;
-    const maxSize = (_a = config.maxSize) !== null && _a !== void 0 ? _a : 50 * 1024 * 1024;
-    if (file.size > maxSize) {
-        return `File "${file.name}" exceeds maximum size of ${Math.round(maxSize / 1024 / 1024)}MB`;
-    }
-    if (config.accept && config.accept.length > 0) {
-        const accepted = config.accept.some((mime) => {
-            if (mime.endsWith('/*')) {
-                return file.type.startsWith(mime.slice(0, -1));
-            }
-            return file.type === mime;
-        });
-        if (!accepted) {
-            return `File type "${file.type}" is not accepted`;
-        }
+  const maxSize = config.maxSize ?? 50 * 1024 * 1024;
+  if (file.size > maxSize) {
+    return `File "${file.name}" exceeds maximum size of ${Math.round(maxSize / 1024 / 1024)}MB`;
+  }
+  if (config.accept && config.accept.length > 0) {
+    const accepted = config.accept.some((mime) => {
+      if (mime.endsWith("/*")) {
+        return file.type.startsWith(mime.slice(0, -1));
+      }
+      return file.type === mime;
+    });
+    if (!accepted) {
+      return `File type "${file.type}" is not accepted`;
     }
-    return null;
+  }
+  return null;
 }
-/** React hook for handling external file/image drag & drop. */
 function useDragDrop(config) {
-    const [isDragging, setIsDragging] = React.useState(false);
-    const dragCounter = React.useRef(0);
-    const handleDragEnter = React.useCallback((e) => {
-        var _a;
-        e.preventDefault();
-        e.stopPropagation();
-        dragCounter.current++;
-        if (dragCounter.current === 1) {
-            setIsDragging(true);
-            (_a = config.onDragEnter) === null || _a === void 0 ? void 0 : _a.call(config);
-        }
-    }, [config]);
-    const handleDragOver = React.useCallback((e) => {
-        e.preventDefault();
-        e.stopPropagation();
-        e.dataTransfer.dropEffect = 'copy';
-    }, []);
-    const handleDragLeave = React.useCallback((e) => {
-        var _a;
-        e.preventDefault();
-        e.stopPropagation();
-        dragCounter.current--;
-        if (dragCounter.current === 0) {
-            setIsDragging(false);
-            (_a = config.onDragLeave) === null || _a === void 0 ? void 0 : _a.call(config);
-        }
-    }, [config]);
-    const handleDrop = React.useCallback(async (e) => {
-        var _a, _b, _c;
-        e.preventDefault();
-        e.stopPropagation();
-        dragCounter.current = 0;
+  const [isDragging, setIsDragging] = React.useState(false);
+  const dragCounter = React.useRef(0);
+  const handleDragEnter = React.useCallback(
+    (e) => {
+      e.preventDefault();
+      e.stopPropagation();
+      dragCounter.current++;
+      if (dragCounter.current === 1) {
+        setIsDragging(true);
+        config.onDragEnter?.();
+      }
+    },
+    [config]
+  );
+  const handleDragOver = React.useCallback((e) => {
+    e.preventDefault();
+    e.stopPropagation();
+    e.dataTransfer.dropEffect = "copy";
+  }, []);
+  const handleDragLeave = React.useCallback(
+    (e) => {
+      e.preventDefault();
+      e.stopPropagation();
+      dragCounter.current--;
+      if (dragCounter.current === 0) {
         setIsDragging(false);
-        const dt = e.dataTransfer;
-        const maxFiles = (_a = config.maxFiles) !== null && _a !== void 0 ? _a : 10;
-        const files = [];
-        const urls = [];
-        // Collect files
-        for (let i = 0; i < Math.min(dt.files.length, maxFiles); i++) {
-            const file = dt.files[i];
-            const error = validateFile(file, config);
-            if (error) {
-                (_b = config.onError) === null || _b === void 0 ? void 0 : _b.call(config, error);
-                return;
-            }
-            files.push(file);
+        config.onDragLeave?.();
+      }
+    },
+    [config]
+  );
+  const handleDrop = React.useCallback(
+    async (e) => {
+      e.preventDefault();
+      e.stopPropagation();
+      dragCounter.current = 0;
+      setIsDragging(false);
+      const dt = e.dataTransfer;
+      const maxFiles = config.maxFiles ?? 10;
+      const files = [];
+      const urls = [];
+      for (let i = 0; i < Math.min(dt.files.length, maxFiles); i++) {
+        const file = dt.files[i];
+        const error = validateFile(file, config);
+        if (error) {
+          config.onError?.(error);
+          return;
         }
-        // Collect URLs from text/uri-list
-        const uriList = dt.getData('text/uri-list');
-        if (uriList) {
-            for (const line of uriList.split('\n')) {
-                const trimmed = line.trim();
-                if (trimmed && !trimmed.startsWith('#')) {
-                    try {
-                        new URL(trimmed);
-                        urls.push(trimmed);
-                    }
-                    catch (_d) {
-                        /* not a valid URL */
-                    }
-                }
+        files.push(file);
+      }
+      const uriList = dt.getData("text/uri-list");
+      if (uriList) {
+        for (const line of uriList.split("\n")) {
+          const trimmed = line.trim();
+          if (trimmed && !trimmed.startsWith("#")) {
+            try {
+              new URL(trimmed);
+              urls.push(trimmed);
+            } catch {
             }
+          }
         }
-        const text = dt.getData('text/plain') || undefined;
-        // Convert image files to ImageData
-        const images = [];
-        for (const file of files) {
-            const imgData = await fileToImageData(file);
-            if (imgData) {
-                images.push(imgData);
-            }
+      }
+      const text = dt.getData("text/plain") || void 0;
+      const images = [];
+      for (const file of files) {
+        const imgData = await fileToImageData(file);
+        if (imgData) {
+          images.push(imgData);
         }
-        (_c = config.onDrop) === null || _c === void 0 ? void 0 : _c.call(config, { files, images, text, urls });
-    }, [config]);
-    return {
-        isDragging,
-        dragProps: {
-            onDragEnter: handleDragEnter,
-            onDragOver: handleDragOver,
-            onDragLeave: handleDragLeave,
-            onDrop: handleDrop,
-        },
-    };
+      }
+      config.onDrop?.({ files, images, text, urls });
+    },
+    [config]
+  );
+  return {
+    isDragging,
+    dragProps: {
+      onDragEnter: handleDragEnter,
+      onDragOver: handleDragOver,
+      onDragLeave: handleDragLeave,
+      onDrop: handleDrop
+    }
+  };
 }
-/** Visual overlay shown when dragging files over the editor. */
 const DropZoneOverlay = ({ isDragging, message }) => {
-    if (!isDragging) {
-        return null;
-    }
-    return React.createElement('div', {
-        style: {
-            position: 'absolute',
-            inset: 0,
-            display: 'flex',
-            alignItems: 'center',
-            justifyContent: 'center',
-            background: 'var(--nice-primary-tint-15, rgba(59, 130, 246, 0.15))',
-            border: '2px dashed var(--nice-primary-tint-60, rgba(59, 130, 246, 0.6))',
-            borderRadius: 8,
-            zIndex: 999,
-            pointerEvents: 'none',
-        },
-    }, React.createElement('div', {
+  if (!isDragging) {
+    return null;
+  }
+  return React.createElement(
+    "div",
+    {
+      style: {
+        position: "absolute",
+        inset: 0,
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        background: "var(--nice-primary-tint-15, rgba(59, 130, 246, 0.15))",
+        border: "2px dashed var(--nice-primary-tint-60, rgba(59, 130, 246, 0.6))",
+        borderRadius: 8,
+        zIndex: 999,
+        pointerEvents: "none"
+      }
+    },
+    React.createElement(
+      "div",
+      {
         style: {
-            padding: '16px 32px',
-            background: 'var(--nice-overlay-light-95, rgba(255, 255, 255, 0.95))',
-            borderRadius: 8,
-            fontSize: 14,
-            fontWeight: 600,
-            color: 'var(--nice-primary, #3b82f6)',
-        },
-    }, message !== null && message !== void 0 ? message : 'Drop files here'));
+          padding: "16px 32px",
+          background: "var(--nice-overlay-light-95, rgba(255, 255, 255, 0.95))",
+          borderRadius: 8,
+          fontSize: 14,
+          fontWeight: 600,
+          color: "var(--nice-primary, #3b82f6)"
+        }
+      },
+      message ?? "Drop files here"
+    )
+  );
+};
+export {
+  DropZoneOverlay,
+  useDragDrop
 };
-
-export { DropZoneOverlay, useDragDrop };