@eightshift/ui-components 6.1.0 → 6.2.0

package/dist/components/select/single-select.js

@@ -1,21 +1,22 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { _ as __ } from "../../default-i18n-CnQeC5Pl.js";
 import { BaseControl } from "../base-control/base-control.js";
-import { $ as $d2f53cda644affe3$export$2f2b9559550c7bbc, a as $440f4836bcb56932$export$b94867ecbd698f21 } from "../../SearchField-CmRhtrQf.js";
-import { $ as $d2b4bc8c273e7be6$export$353f5b6fc5456de1 } from "../../Button-BTCA69Lt.js";
-import { $ as $3985021b0ad6602f$export$f5b8910cec6cf069 } from "../../Input-Wrnm2nxy.js";
+import { $ as $d2f53cda644affe3$export$2f2b9559550c7bbc, a as $440f4836bcb56932$export$b94867ecbd698f21 } from "../../SearchField-BME59dt-.js";
+import { $ as $d2b4bc8c273e7be6$export$353f5b6fc5456de1 } from "../../Button-CFnNdpNZ.js";
+import { f as $07b14b47974efb58$export$5b6b19405a83ff9d, i as $72a5793c14baf454$export$8b251419efc915eb } from "../../Dialog-DDfABlp4.js";
+import { $ as $3985021b0ad6602f$export$f5b8910cec6cf069 } from "../../Input-B4X6-x6r.js";
 import { $ as $01b77f81d0f07f68$export$b04be29aa201d4f5 } from "../../Label-BDlf9vIY.js";
-import { $ as $eed445e0843c11d0$export$41f133550aa26f48 } from "../../ListBox-yHUyUAAH.js";
-import { f as $07b14b47974efb58$export$5b6b19405a83ff9d } from "../../Dialog-BbNWvB5_.js";
-import { $ as $82d7e5349645de74$export$ef9b1a59e592288f, a as $82d7e5349645de74$export$e288731fd71264f0, S as SelectClearButton, O as OptionItemBase } from "../../shared-DSTKnPjF.js";
-import { useRef, cloneElement } from "react";
+import { $ as $eed445e0843c11d0$export$41f133550aa26f48, a as $eed445e0843c11d0$export$dca12b0bb56e4fc } from "../../ListBox-ByPsaVVK.js";
+import { g as getGroupedOptions, $ as $82d7e5349645de74$export$ef9b1a59e592288f, a as $82d7e5349645de74$export$e288731fd71264f0, S as SelectClearButton, O as OptionItemBase } from "../../shared-HdRrpnhs.js";
+import { $ as $e1995378a142960e$export$fb8073518f34e6ec } from "../../SelectionManager-iru59gc4.js";
+import { useRef, useState, useMemo, cloneElement } from "react";
 import { icons } from "../../icons/icons.js";
-import "../../react-jsx-parser.min-B_hvYYa1.js";
+import "../../react-jsx-parser.min-DAh4myol.js";
 import { c as clsx } from "../../clsx-DgYk2OaC.js";
 import { RichLabel } from "../rich-label/rich-label.js";
 import { c as cva } from "../../index-BHpUy2Ix.js";
 import { randomId } from "../../utilities/hash.js";
-import { $ as $bb77f239b46e8c72$export$3274cf84b703fff } from "../../useFilter-Cqw0-KoB.js";
+import { $ as $bb77f239b46e8c72$export$3274cf84b703fff } from "../../useFilter-NhAlifsK.js";
 /**
  * Select menu.
  *
@@ -31,6 +32,8 @@ import { $ as $bb77f239b46e8c72$export$3274cf84b703fff } from "../../useFilter-C
  * @param {string|{label: string, value: string, metadata: Object<string, any>?}} props.value - Current value of the select.
  * @param {Function} props.onChange - Function to call when the value changes.
  * @param {boolean} [props.simpleValue=false] - If `true`, instead of using a `{label: '', value: ''}` value type, a string is used (just the value).
+ * @param {string} [props.groupKey] - If provided, the options will be grouped by this key.
+ * @param {Object} [props.groupValueMapping] - If provided, the group headers will be mapped to these labels/icons.
  * @param {boolean} [props.clearable] - Whether the select is clearable.
  * @param {boolean} [props.disabled] - Whether the select is disabled.
  * @param {string} [props.placeholder] - Placeholder text to show when no value is selected.
@@ -78,6 +81,8 @@ const Select = (props) => {
     onChange,
     options,
     simpleValue = false,
+    groupKey,
+    groupValueMapping,
     disabled = false,
     clearable = false,
     placeholder = __("Select...", "eightshift-ui-components"),
@@ -93,8 +98,44 @@ const Select = (props) => {
     ...rest
   } = props;
   const ref = useRef();
-  const currentValue = simpleValue ? value ?? null : value?.value ?? null;
+  const [searchTerm, setSearchTerm] = useState("");
   const { contains } = $bb77f239b46e8c72$export$3274cf84b703fff({ sensitivity: "base" });
+  const filteredOptions = useMemo(() => {
+    if (!searchable || searchTerm.length === 0) {
+      return options;
+    }
+    return options?.filter((item) => {
+      return contains(item.label ?? "", searchTerm) || contains(item?.subtitle ?? "", searchTerm);
+    });
+  }, [options, searchable, searchTerm, contains]);
+  const groupedOptions = useMemo(() => getGroupedOptions(filteredOptions, groupKey, groupValueMapping), [filteredOptions, groupKey, groupValueMapping]);
+  const currentValue = simpleValue ? value ?? null : value?.value ?? null;
+  const renderItem = (item) => {
+    let icon2 = item?.icon ?? null;
+    if (typeof item?.icon === "string") {
+      icon2 = icons?.[item.icon] ?? null;
+    }
+    return /* @__PURE__ */ jsxs(
+      OptionItemBase,
+      {
+        id: item?.value ?? randomId(8),
+        className: item?.className,
+        selectIndicator: true,
+        children: [
+          customMenuOption && customMenuOption(item),
+          !customMenuOption && /* @__PURE__ */ jsx(
+            RichLabel,
+            {
+              icon: icon2,
+              label: item?.label,
+              subtitle: item?.subtitle,
+              noColor: true
+            }
+          )
+        ]
+      }
+    );
+  };
   if (hidden) {
     return null;
   }
@@ -173,6 +214,11 @@ const Select = (props) => {
     {
       isDisabled: disabled,
       value: currentValue,
+      onOpenChange: (isOpen) => {
+        if (!isOpen) {
+          setSearchTerm("");
+        }
+      },
       onChange: (selected) => {
         if (selected === null || selected === void 0) {
           onChange(null);
@@ -190,12 +236,7 @@ const Select = (props) => {
         if (item && "id" in item) {
           delete item.id;
         }
-        onChange({
-          label: item?.label,
-          value: item?.value,
-          subtitle: item?.subtitle,
-          meta: item?.meta
-        });
+        onChange(item);
       },
       placeholder,
       ...rest,
@@ -296,92 +337,96 @@ const Select = (props) => {
                 maxHeight: 240,
                 triggerRef: ref,
                 children: [
-                  searchable && /* @__PURE__ */ jsxs($d2f53cda644affe3$export$2f2b9559550c7bbc, { filter: contains, children: [
-                    /* @__PURE__ */ jsxs(
-                      $440f4836bcb56932$export$b94867ecbd698f21,
-                      {
-                        "aria-label": __("Search", "eightshift-ui-components"),
-                        className: "es:flex es:items-center es:relative",
-                        autoFocus: true,
-                        children: [
-                          /* @__PURE__ */ jsx(
-                            $3985021b0ad6602f$export$f5b8910cec6cf069,
-                            {
-                              placeholder: __("Search...", "eightshift-ui-components"),
-                              className: clsx(
-                                "es:peer es:size-full es:h-9.5 es:outline-hidden! es:pl-3.5 es:pr-9 es:shadow-none! es:text-13! es:placeholder:text-surface-500 es:[&::-webkit-search-cancel-button]:hidden",
-                                "es:bg-accent-900/8 es:m-1.5 es:rounded-3xl es:border-none!",
-                                "es:inset-ring! es:inset-ring-accent-950/7 es:focus:inset-ring-accent-950/20",
-                                "es:text-accent-950 es:placeholder:text-accent-700/50",
-                                "es:transition"
-                              )
-                            }
-                          ),
-                          /* @__PURE__ */ jsx(
-                            $d2b4bc8c273e7be6$export$353f5b6fc5456de1,
-                            {
-                              "aria-label": __("Clear", "eightshift-ui-components"),
-                              className: clsx(
-                                "es:absolute es:right-3 es:top-0 es:bottom-0 es:my-auto es:border-none es:bg-transparent",
-                                "es:flex es:size-7 es:items-center es:justify-center es:rounded-3xl es:text-sm es:text-surface-700 es:transition es:hover:bg-accent-50 es:hover:text-accent-800 es:any-focus:outline-hidden es:focus:ring-2 es:focus:ring-accent-500/50 es:disabled:text-secondary-300",
-                                "es:peer-placeholder-shown:opacity-0"
-                              ),
-                              children: icons.clearAlt
-                            }
-                          )
-                        ]
-                      }
-                    ),
-                    /* @__PURE__ */ jsx(
-                      $eed445e0843c11d0$export$41f133550aa26f48,
-                      {
-                        className: "es:space-y-0.75 es:p-1.5 es:pt-0 es:any-focus:outline-hidden es:h-full es:overflow-y-auto es:rounded-t-xl",
-                        items: options,
-                        renderEmptyState: () => /* @__PURE__ */ jsx(
-                          RichLabel,
+                  searchable && /* @__PURE__ */ jsxs(
+                    $d2f53cda644affe3$export$2f2b9559550c7bbc,
+                    {
+                      filter: () => true,
+                      inputValue: searchTerm,
+                      onInputChange: setSearchTerm,
+                      children: [
+                        /* @__PURE__ */ jsxs(
+                          $440f4836bcb56932$export$b94867ecbd698f21,
                           {
-                            icon: icons.searchEmpty,
-                            label: __("No results", "eightshift-ui-components"),
-                            subtitle: __("Try a different search term", "eightshift-ui-components"),
-                            className: "es:min-h-14 es:p-2 es:w-fit es:mx-auto es:motion-preset-slide-up es:motion-ease-spring-bouncy es:motion-duration-200 es:shrink-0",
-                            iconClassName: "es:text-accent-700 es:icon:size-7!",
-                            noColor: true
+                            "aria-label": __("Search", "eightshift-ui-components"),
+                            className: "es:flex es:items-center es:relative",
+                            autoFocus: true,
+                            children: [
+                              /* @__PURE__ */ jsx(
+                                $3985021b0ad6602f$export$f5b8910cec6cf069,
+                                {
+                                  placeholder: __("Search...", "eightshift-ui-components"),
+                                  className: clsx(
+                                    "es:peer es:size-full es:h-9.5 es:outline-hidden! es:pl-3.5 es:pr-9 es:shadow-none! es:text-13! es:placeholder:text-surface-500 es:[&::-webkit-search-cancel-button]:hidden",
+                                    "es:bg-accent-900/8 es:m-1.5 es:rounded-3xl! es:border-none!",
+                                    "es:inset-ring! es:inset-ring-accent-950/7 es:focus:inset-ring-accent-950/20",
+                                    "es:text-accent-950 es:placeholder:text-accent-700/50",
+                                    "es:transition"
+                                  )
+                                }
+                              ),
+                              /* @__PURE__ */ jsx(
+                                $d2b4bc8c273e7be6$export$353f5b6fc5456de1,
+                                {
+                                  slot: "clear",
+                                  "aria-label": __("Clear", "eightshift-ui-components"),
+                                  className: clsx(
+                                    "es:absolute es:right-3 es:top-0 es:bottom-0 es:my-auto es:border-none es:bg-transparent",
+                                    "es:flex es:size-7 es:items-center es:justify-center es:rounded-3xl es:text-sm es:text-surface-700 es:transition es:hover:bg-accent-50 es:hover:text-accent-800 es:any-focus:outline-hidden es:focus:ring-2 es:focus:ring-accent-500/50 es:disabled:text-secondary-300",
+                                    "es:peer-placeholder-shown:opacity-0"
+                                  ),
+                                  children: icons.clearAlt
+                                }
+                              )
+                            ]
                           }
                         ),
-                        children: (item) => {
-                          let icon2 = item?.icon ?? null;
-                          if (typeof item?.icon === "string") {
-                            icon2 = icons?.[item.icon] ?? null;
+                        /* @__PURE__ */ jsxs(
+                          $eed445e0843c11d0$export$41f133550aa26f48,
+                          {
+                            className: "es:space-y-0.75 es:p-1.5 es:pt-0 es:any-focus:outline-hidden es:h-full es:overflow-y-auto es:rounded-t-xl",
+                            renderEmptyState: () => /* @__PURE__ */ jsx(
+                              RichLabel,
+                              {
+                                icon: icons.searchEmpty,
+                                label: __("No results", "eightshift-ui-components"),
+                                subtitle: __("Try a different search term", "eightshift-ui-components"),
+                                className: "es:min-h-14 es:p-2 es:w-fit es:mx-auto es:motion-preset-slide-up es:motion-ease-spring-bouncy es:motion-duration-200 es:shrink-0",
+                                iconClassName: "es:text-accent-700 es:icon:size-7!",
+                                noColor: true
+                              }
+                            ),
+                            children: [
+                              groupedOptions && /* @__PURE__ */ jsx($e1995378a142960e$export$fb8073518f34e6ec, { items: groupedOptions, children: (item) => /* @__PURE__ */ jsxs(
+                                $eed445e0843c11d0$export$dca12b0bb56e4fc,
+                                {
+                                  id: item.key,
+                                  className: "es:flex es:flex-col es:gap-0.75",
+                                  children: [
+                                    /* @__PURE__ */ jsx($72a5793c14baf454$export$8b251419efc915eb, { className: "es:px-2.5 es:pb-1 es:pt-3 es:select-none", children: /* @__PURE__ */ jsx(
+                                      RichLabel,
+                                      {
+                                        icon: item?.icon,
+                                        label: item?.label,
+                                        subtitle: item?.subtitle,
+                                        endIcon: item?.endIcon,
+                                        fullWidth: true
+                                      }
+                                    ) }),
+                                    /* @__PURE__ */ jsx($e1995378a142960e$export$fb8073518f34e6ec, { items: item.options, children: (subItem) => renderItem(subItem) })
+                                  ]
+                                }
+                              ) }),
+                              !groupedOptions && /* @__PURE__ */ jsx($e1995378a142960e$export$fb8073518f34e6ec, { items: searchable ? filteredOptions : options, children: (item) => renderItem(item) })
+                            ]
                           }
-                          return /* @__PURE__ */ jsxs(
-                            OptionItemBase,
-                            {
-                              id: item?.value ?? randomId(8),
-                              className: item?.className,
-                              selectIndicator: true,
-                              children: [
-                                customMenuOption && customMenuOption(item),
-                                !customMenuOption && /* @__PURE__ */ jsx(
-                                  RichLabel,
-                                  {
-                                    icon: icon2,
-                                    label: item?.label,
-                                    subtitle: item?.subtitle,
-                                    noColor: true
-                                  }
-                                )
-                              ]
-                            }
-                          );
-                        }
-                      }
-                    )
-                  ] }),
-                  !searchable && /* @__PURE__ */ jsx(
+                        )
+                      ]
+                    }
+                  ),
+                  !searchable && /* @__PURE__ */ jsxs(
                     $eed445e0843c11d0$export$41f133550aa26f48,
                     {
                       className: "es:space-y-0.75 es:p-1.5 es:any-focus:outline-hidden es:h-full es:overflow-y-auto es:rounded-t-xl",
-                      items: options,
                       renderEmptyState: () => /* @__PURE__ */ jsx(
                         RichLabel,
                         {
@@ -393,32 +438,29 @@ const Select = (props) => {
                           noColor: true
                         }
                       ),
-                      children: (item) => {
-                        let icon2 = item?.icon ?? null;
-                        if (typeof item?.icon === "string") {
-                          icon2 = icons?.[item.icon] ?? null;
-                        }
-                        return /* @__PURE__ */ jsxs(
-                          OptionItemBase,
+                      children: [
+                        groupedOptions && /* @__PURE__ */ jsx($e1995378a142960e$export$fb8073518f34e6ec, { items: groupedOptions, children: (item) => /* @__PURE__ */ jsxs(
+                          $eed445e0843c11d0$export$dca12b0bb56e4fc,
                           {
-                            id: item.value,
-                            className: item?.className,
-                            selectIndicator: true,
+                            id: item.key,
+                            className: "es:flex es:flex-col es:gap-0.75",
                             children: [
-                              customMenuOption && customMenuOption(item),
-                              !customMenuOption && /* @__PURE__ */ jsx(
+                              /* @__PURE__ */ jsx($72a5793c14baf454$export$8b251419efc915eb, { className: "es:px-2.5 es:pb-1 es:pt-3 es:select-none", children: /* @__PURE__ */ jsx(
                                 RichLabel,
                                 {
-                                  icon: icon2,
+                                  icon: item?.icon,
                                   label: item?.label,
                                   subtitle: item?.subtitle,
-                                  noColor: true
+                                  endIcon: item?.endIcon,
+                                  fullWidth: true
                                 }
-                              )
+                              ) }),
+                              /* @__PURE__ */ jsx($e1995378a142960e$export$fb8073518f34e6ec, { items: item.options, children: (subItem) => renderItem(subItem) })
                             ]
                           }
-                        );
-                      }
+                        ) }),
+                        !groupedOptions && /* @__PURE__ */ jsx($e1995378a142960e$export$fb8073518f34e6ec, { items: options, children: (item) => renderItem(item) })
+                      ]
                     }
                   )
                 ]

package/dist/components/slider/column-config-slider.js

@@ -2,12 +2,12 @@ import { jsx, jsxs, Fragment } from "react/jsx-runtime";
 import { s as sprintf } from "../../sprintf-DmNrJSYG.js";
 import { _ as __ } from "../../default-i18n-CnQeC5Pl.js";
 import { $ as $01b77f81d0f07f68$export$b04be29aa201d4f5 } from "../../Label-BDlf9vIY.js";
-import { $ as $6f909507e6374d18$export$472062a354075cee, a as $6f909507e6374d18$export$105594979f116971, b as $6f909507e6374d18$export$2c1b491743890dec, c as $6f909507e6374d18$export$a590f758a961cb5b } from "../../Slider-Bl5G0ZHE.js";
+import { $ as $6f909507e6374d18$export$472062a354075cee, a as $6f909507e6374d18$export$105594979f116971, b as $6f909507e6374d18$export$2c1b491743890dec, c as $6f909507e6374d18$export$a590f758a961cb5b } from "../../Slider-BIbaMdUE.js";
 import { BaseControl } from "../base-control/base-control.js";
 import { icons } from "../../icons/icons.js";
 import { getColumnConfigOutputText } from "./utils.js";
 import { c as clsx } from "../../clsx-DgYk2OaC.js";
-import { A as AnimatePresence, m as motion } from "../../proxy-CgLBbUpw.js";
+import { A as AnimatePresence, m as motion } from "../../proxy-DFlYXk07.js";
 /**
  * A two-thumb slider for selecting a range of columns.
  *

package/dist/components/slider/slider.js

@@ -1,13 +1,13 @@
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
 import { useState } from "react";
 import { $ as $01b77f81d0f07f68$export$b04be29aa201d4f5 } from "../../Label-BDlf9vIY.js";
-import { $ as $6f909507e6374d18$export$472062a354075cee, a as $6f909507e6374d18$export$105594979f116971, b as $6f909507e6374d18$export$2c1b491743890dec, c as $6f909507e6374d18$export$a590f758a961cb5b } from "../../Slider-Bl5G0ZHE.js";
+import { $ as $6f909507e6374d18$export$472062a354075cee, a as $6f909507e6374d18$export$105594979f116971, b as $6f909507e6374d18$export$2c1b491743890dec, c as $6f909507e6374d18$export$a590f758a961cb5b } from "../../Slider-BIbaMdUE.js";
 import { BaseControl } from "../base-control/base-control.js";
 import { c as clsx } from "../../clsx-DgYk2OaC.js";
 import { NumberPicker } from "../number-picker/number-picker.js";
 import { generateMarkers, generateGridTemplate } from "./utils.js";
 import { HStack } from "../layout/hstack.js";
-import { A as AnimatePresence, m as motion } from "../../proxy-CgLBbUpw.js";
+import { A as AnimatePresence, m as motion } from "../../proxy-DFlYXk07.js";
 /**
  * A single/multi-thumb slider component.
  *

package/dist/components/smart-image/smart-image-next.js

@@ -3,7 +3,7 @@ import { _ as __ } from "../../default-i18n-CnQeC5Pl.js";
 import { c as clsx } from "../../clsx-DgYk2OaC.js";
 import { useState, useRef, useEffect, cloneElement } from "react";
 import { icons } from "../../icons/icons.js";
-import "../../react-jsx-parser.min-B_hvYYa1.js";
+import "../../react-jsx-parser.min-DAh4myol.js";
 import { DecorativeTooltip } from "../tooltip/tooltip.js";
 import { cyrb64Hash } from "../../utilities/hash.js";
 const WORKER_CODE = "const getSaturation = (r, g, b) => {\n	// Convert 0-255 to 0-1 range.\n	const red = r / 255;\n	const green = g / 255;\n	const blue = b / 255;\n\n	const max = Math.max(red, green, blue);\n	const min = Math.min(red, green, blue);\n	const delta = max - min;\n\n	// If the maximum brightness is less than ~5% (approx RGB 13),\n	// the human eye just sees \"black\", regardless of the color math.\n	if (max < 0.05) {\n		return 0;\n	}\n\n	// Standard HSV Calculation\n	let saturation = 0;\n\n	if (max !== 0) {\n		saturation = delta / max;\n	}\n\n	return parseFloat(saturation.toFixed(3));\n};\n\n// Helper to convert RGB to Hex\nconst rgbToHex = (r, g, b) => '#' + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1).toUpperCase();\n\nself.onmessage = (e) => {\n	const { buffer, width, height, config } = e.data;\n	const { maxColors = 5, threshold = 96, transparencyThreshold = 255 } = config;\n	const stride = 4;\n\n	// [1] Check transparency.\n	const isTransparent = (idx) => buffer[idx + 3] < transparencyThreshold;\n	const getIdx = (x, y) => (y * width + x) * stride;\n\n	const corners = {\n		topLeft: isTransparent(getIdx(0, 0)),\n		topRight: isTransparent(getIdx(width - 1, 0)),\n		bottomLeft: isTransparent(getIdx(0, height - 1)),\n		bottomRight: isTransparent(getIdx(width - 1, height - 1)),\n	};\n\n	const sides = { top: false, bottom: false, left: false, right: false };\n\n	// Scan top/bottom.\n	for (let x = 0; x < width; x += 5) {\n		if (!sides.top && isTransparent(getIdx(x, 0))) {\n			sides.top = true;\n		}\n\n		if (!sides.bottom && isTransparent(getIdx(x, height - 1))) {\n			sides.bottom = true;\n		}\n	}\n\n	// Scan left/right.\n	for (let y = 0; y < height; y += 5) {\n		if (!sides.left && isTransparent(getIdx(0, y))) {\n			sides.left = true;\n		}\n\n		if (!sides.right && isTransparent(getIdx(width - 1, y))) {\n			sides.right = true;\n		}\n	}\n\n	// Internal transparency check\n	let internalTransparent = false;\n	const borderIsSolid = !Object.values(sides).some((v) => v);\n\n	if (borderIsSolid) {\n		const len = buffer.length;\n		const step = Math.floor(len / 100);\n\n		for (let i = 0; i < len; i += step) {\n			const idx = i - (i % 4);\n\n			if (buffer[idx + 3] < 255) {\n				internalTransparent = true;\n				break;\n			}\n		}\n	} else {\n		internalTransparent = true;\n	}\n\n	// [2] Analyze colors (Dominant + average)\n	const colorCounts = {};\n	const samplingRate = 20;\n	let totalSampledPixels = 0;\n\n	// Accumulators for Average Color\n	let sumR = 0;\n	let sumG = 0;\n	let sumB = 0;\n\n	for (let i = 0; i < buffer.length; i += stride * samplingRate) {\n		const rRaw = buffer[i];\n		const gRaw = buffer[i + 1];\n		const bRaw = buffer[i + 2];\n		const a = buffer[i + 3];\n\n		// Strict alpha check (ignores anti-aliased SVG edges)\n		if (a < 250) continue;\n\n		totalSampledPixels++;\n\n		// 1. Add to Average Sums (Use raw values for accuracy)\n		sumR += rRaw;\n		sumG += gRaw;\n		sumB += bRaw;\n\n		// 2. Add to Dominant Color Buckets (Quantized)\n		const q = 5;\n		const r = Math.round(rRaw / q) * q;\n		const g = Math.round(gRaw / q) * q;\n		const b = Math.round(bRaw / q) * q;\n\n		const key = `${r},${g},${b}`;\n		colorCounts[key] = (colorCounts[key] || 0) + 1;\n	}\n\n	// [3] Calculate Average Color\n	let averageColor = null;\n\n	if (totalSampledPixels > 0) {\n		const avgR = Math.round(sumR / totalSampledPixels);\n		const avgG = Math.round(sumG / totalSampledPixels);\n		const avgB = Math.round(sumB / totalSampledPixels);\n		const avgLum = 0.2126 * avgR + 0.7152 * avgG + 0.0722 * avgB;\n\n		averageColor = {\n			color: rgbToHex(avgR, avgG, avgB),\n			isDark: avgLum <= 128,\n			saturation: getSaturation(avgR, avgG, avgB),\n		};\n	}\n\n	// [4] Process Dominant Colors\n	const sortedRawColors = Object.entries(colorCounts)\n		.map(([key, count]) => {\n			const [r, g, b] = key.split(',').map(Number);\n\n			return { r, g, b, count };\n		})\n		.sort((a, b) => b.count - a.count);\n\n	const distinctPalette = [];\n\n	for (const candidate of sortedRawColors) {\n		if (distinctPalette.length >= maxColors) break;\n\n		let isSimilar = false;\n\n		for (const existing of distinctPalette) {\n			const dist = Math.sqrt(Math.pow(candidate.r - existing.r, 2) + Math.pow(candidate.g - existing.g, 2) + Math.pow(candidate.b - existing.b, 2));\n\n			if (dist < threshold) {\n				existing.count += candidate.count;\n				isSimilar = true;\n				break;\n			}\n		}\n\n		if (!isSimilar) {\n			distinctPalette.push({ ...candidate });\n		}\n	}\n\n	const palette = distinctPalette.map((item) => {\n		const percentage = parseFloat((item.count / totalSampledPixels).toFixed(3));\n		const lum = 0.2126 * item.r + 0.7152 * item.g + 0.0722 * item.b;\n\n		return {\n			color: rgbToHex(item.r, item.g, item.b),\n			area: percentage,\n			isDark: lum <= 128,\n			saturation: getSaturation(item.r, item.g, item.b),\n		};\n	});\n\n	self.postMessage({\n		dominantColors: palette,\n		averageColor,\n		isDark: palette[0]?.isDark || false,\n		isTransparent: internalTransparent || Object.values(corners).some((v) => v) || Object.values(sides).some((v) => v),\n		transparencyInfo: {\n			any: internalTransparent,\n			left: sides.left,\n			right: sides.right,\n			top: sides.top,\n			bottom: sides.bottom,\n			topLeftCorner: corners.topLeft,\n			topRightCorner: corners.topRight,\n			bottomLeftCorner: corners.bottomLeft,\n			bottomRightCorner: corners.bottomRight,\n		},\n	});\n};\n";

package/dist/components/smart-image/smart-image.js

@@ -3,12 +3,12 @@ import { _ as __ } from "../../default-i18n-CnQeC5Pl.js";
 import { c as clsx } from "../../clsx-DgYk2OaC.js";
 import { useState, useRef, useEffect, cloneElement } from "react";
 import { icons } from "../../icons/icons.js";
-import "../../react-jsx-parser.min-B_hvYYa1.js";
+import "../../react-jsx-parser.min-DAh4myol.js";
 import { DecorativeTooltip } from "../tooltip/tooltip.js";
 import { useImageAnalysisWorker } from "../../utilities/web-workers.js";
 import workerInline from "./worker-inline.js";
 import { cyrb64Hash } from "../../utilities/hash.js";
-import { b as analyzeImage } from "../../general-C8Q0dvEx.js";
+import { b as analyzeImage } from "../../general-BfKmjm56.js";
 /**
  * @typedef {Object} CustomImageProps
  * @property {JSX.Element} [props.renderError] - Component to render if image analysis fails. `(error) => JSX:Element`.