@eightshift/ui-components 5.5.0 → 5.6.0

package/dist/utilities/index.js

@@ -2,19 +2,24 @@ import { arrayMoveMultiple, fixIds } from "./array-helpers.js";
 import { camelCase, has, isEmpty, isEqual, isObject, isPlainObject, isString, kebabCase, lowerFirst, pascalCase, snakeCase, upperFirst } from "./es-dash.js";
 import { truncate, truncateEnd, truncateMiddle, unescapeHTML } from "./text-helpers.js";
 import { debounce, throttle } from "./debounce-throttle.js";
-import { analyzeImage, checkTransparency, getFileExtension, isColorDark } from "./general.js";
-import { c } from "../lite-DVmmD_-j.js";
+import { a, b, d, c, g, i } from "../general-6STKQIrk.js";
+import { c as c2 } from "../lite-DVmmD_-j.js";
+import { s as sha256Exports } from "../sha256-C56UDWfQ.js";
+const sha224 = sha256Exports.sha224;
+const sha256 = sha256Exports.sha256;
 export {
-  analyzeImage,
+  a as analyzeImage,
+  b as analyzeImageAsync,
+  d as analyzeImageData,
   arrayMoveMultiple,
   camelCase,
-  checkTransparency,
-  c as clsx,
+  c as checkTransparency,
+  c2 as clsx,
   debounce,
   fixIds,
-  getFileExtension,
+  g as getFileExtension,
   has,
-  isColorDark,
+  i as isColorDark,
   isEmpty,
   isEqual,
   isObject,
@@ -23,6 +28,8 @@ export {
   kebabCase,
   lowerFirst,
   pascalCase,
+  sha224,
+  sha256,
   snakeCase,
   throttle,
   truncate,

package/dist/utilities/web-workers.js

@@ -0,0 +1,50 @@
+function useImageAnalysisWorker(workerRef, workerInline) {
+  const getOrCreateWorker = () => {
+    if (!workerRef.current) {
+      workerRef.current = createImageAnalysisWorker(workerInline);
+      workerRef.current.addEventListener("error", (e) => {
+        console.error("Worker error event:", e);
+      });
+    }
+    return workerRef.current;
+  };
+  const analyzeWithWorkerCb = async (imageBitmap, settings) => {
+    const worker = getOrCreateWorker();
+    return analyzeWithWorker(worker, imageBitmap, settings);
+  };
+  return { getOrCreateWorker, analyzeWithWorkerCb };
+}
+function createImageAnalysisWorker(workerInline) {
+  if (!workerInline || typeof workerInline !== "string" || workerInline.length < 100) {
+    throw new Error("Worker could not be created: inline worker code not available. Make sure the worker is properly bundled.");
+  }
+  const blob = new Blob([workerInline], { type: "application/javascript" });
+  return new Worker(URL.createObjectURL(blob), { type: "module" });
+}
+function analyzeWithWorker(worker, imageBitmap, settings) {
+  return new Promise((resolve, reject) => {
+    const handleMessage = (event) => {
+      const { success, data, error } = event.data;
+      if (success) {
+        resolve(data);
+      } else {
+        reject(new Error(error));
+      }
+      worker.removeEventListener("message", handleMessage);
+      worker.removeEventListener("error", handleError);
+    };
+    const handleError = (error) => {
+      reject(error);
+      worker.removeEventListener("message", handleMessage);
+      worker.removeEventListener("error", handleError);
+    };
+    worker.addEventListener("message", handleMessage);
+    worker.addEventListener("error", handleError);
+    worker.postMessage({ imageBitmap, settings }, [imageBitmap]);
+  });
+}
+export {
+  analyzeWithWorker,
+  createImageAnalysisWorker,
+  useImageAnalysisWorker
+};

package/dist/workers/image-analysis.worker.js

@@ -0,0 +1,52 @@
+import { f as floatBufferFromCanvas, d as analyzeImageData, F as FLOAT_RGBA } from "../general-6STKQIrk.js";
+self.onmessage = async (event) => {
+  const { imageBitmap, settings } = event.data;
+  try {
+    const result = await analyzeImageInWorker(imageBitmap, settings);
+    self.postMessage({ success: true, data: result });
+  } catch (error) {
+    self.postMessage({ success: false, error: error.message, stack: error.stack });
+  }
+};
+async function analyzeImageInWorker(imageBitmap, rawSettings) {
+  const defaults = {
+    numColors: 3,
+    lightnessThreshold: 0.5,
+    yFrom: 0,
+    yTo: 1,
+    maxSize: 320,
+    alphaThreshold: 30
+  };
+  const settings = { ...defaults, ...rawSettings };
+  const { yFrom, yTo, maxSize } = settings;
+  const imageWidth = imageBitmap.width;
+  const imageHeight = imageBitmap.height;
+  if (!imageWidth || !imageHeight) return false;
+  let imageScale = 1;
+  if (imageWidth > maxSize || imageHeight > maxSize) {
+    imageScale = Math.min(maxSize / imageWidth, maxSize / imageHeight);
+  }
+  const imageWidthScaled = Math.floor(imageWidth * imageScale);
+  const imageHeightScaled = Math.floor(imageHeight * imageScale);
+  const srcX = 0;
+  const srcY = Math.floor(yFrom * imageHeight);
+  const srcW = Math.max(1, imageWidth);
+  const srcH = Math.max(1, Math.ceil((yTo - yFrom) * imageHeight));
+  const destW = Math.max(1, imageWidthScaled);
+  const destH = Math.max(1, Math.ceil((yTo - yFrom) * imageHeightScaled));
+  const colorCanvas = new OffscreenCanvas(destW, destH);
+  const colorContext = colorCanvas.getContext("2d");
+  colorContext.drawImage(imageBitmap, srcX, srcY, srcW, srcH, 0, 0, destW, destH);
+  const buffer = floatBufferFromCanvas(colorCanvas, FLOAT_RGBA);
+  const transparencyCanvas = new OffscreenCanvas(imageWidthScaled, imageHeightScaled);
+  const transparencyContext = transparencyCanvas.getContext("2d");
+  transparencyContext.drawImage(imageBitmap, 0, 0, imageWidth, imageHeight, 0, 0, imageWidthScaled, imageHeightScaled);
+  const imageData = transparencyContext.getImageData(0, 0, imageWidthScaled, imageHeightScaled).data;
+  return analyzeImageData({
+    buffer,
+    imageData,
+    width: imageWidthScaled,
+    height: imageHeightScaled,
+    settings
+  });
+}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@eightshift/ui-components",
-	"version": "5.5.0",
+	"version": "5.6.0",
 	"type": "module",
 	"main": "./dist/index.js",
 	"module": "./dist/index.js",
@@ -34,7 +34,8 @@
 	"scripts": {
 		"dev": "vite",
 		"start": "vite",
-		"build": "vite build",
+		"build": "bun run update-scripts && vite build",
+		"update-scripts": "vite build --config vite.worker.config.js && node scripts/inline-worker.js",
 		"lint": "bun x eslint",
 		"preview": "vite preview"
 	},
@@ -55,18 +56,18 @@
 		"@eslint/compat": "^1.4.0",
 		"@react-stately/collections": "^3.12.8",
 		"@stylistic/eslint-plugin-js": "^4.4.1",
-		"@tailwindcss/vite": "^4.1.14",
+		"@tailwindcss/vite": "^4.1.15",
 		"@types/react": "^18.3.26",
 		"@types/react-dom": "^18.3.7",
 		"@vitejs/plugin-react-swc": "^4.1.0",
-		"@wordpress/i18n": "^6.5.0",
+		"@wordpress/i18n": "^6.6.0",
 		"autoprefixer": "^10.4.21",
 		"class-variance-authority": "^0.7.1",
 		"clsx": "^2.1.1",
 		"css-gradient-parser": "^0.0.18",
-		"eslint": "^9.37.0",
+		"eslint": "^9.38.0",
 		"eslint-config-prettier": "^10.1.8",
-		"eslint-plugin-jsdoc": "^61.1.0",
+		"eslint-plugin-jsdoc": "^61.1.5",
 		"eslint-plugin-prettier": "^5.5.4",
 		"glob": "^11.0.3",
 		"globals": "^16.4.0",
@@ -79,7 +80,7 @@
 		"lightningcss": "^1.30.2",
 		"postcss": "^8.5.6",
 		"prettier": "^3.6.2",
-		"prettier-plugin-tailwindcss": "^0.6.14",
+		"prettier-plugin-tailwindcss": "^0.7.1",
 		"react": "^18.3.1",
 		"react-aria": "^3.44.0",
 		"react-aria-components": "^1.13.0",
@@ -89,18 +90,20 @@
 		"react-select": "^5.10.2",
 		"react-stately": "^3.42.0",
 		"svg-to-jsx-string": "^0.1.1",
-		"tailwindcss": "^4.1.14",
+		"tailwindcss": "^4.1.15",
 		"tailwindcss-motion": "^1.1.1",
 		"tailwindcss-react-aria-components": "^2.0.1",
-		"vite": "^7.1.9",
+		"vite": "^7.1.11",
 		"vite-plugin-lib-inject-css": "^2.2.2"
 	},
 	"dependencies": {
+		"@atom-universe/use-web-worker": "^2.2.1",
 		"@fontsource-variable/geist": "^5.2.8",
 		"@fontsource-variable/geist-mono": "^5.2.7",
 		"@thi.ng/color": "^5.7.62",
 		"@thi.ng/pixel": "^7.5.10",
 		"@thi.ng/pixel-analysis": "^2.0.9",
-		"@thi.ng/pixel-dominant-colors": "^2.0.14"
+		"@thi.ng/pixel-dominant-colors": "^2.0.14",
+		"js-sha256": "^0.11.1"
 	}
 }