@5even7/dlc-ui 0.2.18 → 0.2.20

package/dist/color.cjs

@@ -182,9 +182,9 @@ function _unsupportedIterableToArray(r, a) {
   }
 }
 
-/**
- * Tiny event emitter. Accepts any event name so the API stays open for
- * future events (hover, click, custom) without breaking changes.
+/**
+ * Tiny event emitter. Accepts any event name so the API stays open for
+ * future events (hover, click, custom) without breaking changes.
  */
 function createEmitter() {
   // Plain object storage (no Map/Set) so the legacy build has no API
@@ -261,10 +261,10 @@ function effectiveDprCap(quality) {
   return Math.max(0.5, dprCapFor(quality) * normalizedScale);
 }
 
-/**
- * Merge defaults < preset < user. Unknown user keys are preserved so the
- * component API can grow (new props, cssVars, callbacks) without a breaking
- * change.
+/**
+ * Merge defaults < preset < user. Unknown user keys are preserved so the
+ * component API can grow (new props, cssVars, callbacks) without a breaking
+ * change.
  */
 function normalizeOptions(defaults, preset, user) {
   // undefined means "not provided" (e.g. Vue $props with unset props):
@@ -282,9 +282,9 @@ function normalizeOptions(defaults, preset, user) {
   return _objectSpread2(_objectSpread2(_objectSpread2({}, defaults), presetOptions), userOptions);
 }
 
-/**
- * 公共色板：NC-01~NC-06 的四色组（底色 / 主色 / 辅色 / 高光色）。
- * Capsule 预置与 dlc-color 等组件共用，新增色板只改这里。
+/**
+ * 公共色板：NC-01~NC-06 的四色组（底色 / 主色 / 辅色 / 高光色）。
+ * Capsule 预置与 dlc-color 等组件共用，新增色板只改这里。
  */
 var PALETTES = {
   original: ['#FFF3EA', '#F5B27A', '#F67BC6', '#A978E8'],
@@ -295,9 +295,9 @@ var PALETTES = {
   plus: ['#FFF0E6', '#F6C26B', '#F98A64', '#E86D74']
 };
 
-/**
- * Capsule 预置：仅星云材质 NC-01~NC-06（NC-07~09 aurora 已移除）。
- * 颜色引用公共色板，seed/speed 决定形态与流速。
+/**
+ * Capsule 预置：仅星云材质 NC-01~NC-06（NC-07~09 aurora 已移除）。
+ * 颜色引用公共色板，seed/speed 决定形态与流速。
  */
 var CAPSULE_PRESETS = [{
   id: 'original',
@@ -427,10 +427,16 @@ var DEFAULTS = {
 
 /**
  * Color helpers. `normalizeColor` converts any supported CSS color
- * (hex / named / rgb() / rgba()) into a 6-digit hex string, so renderers can
- * keep working with #rrggbb only. rgba() alpha is intentionally dropped:
- * the WebGL shader has no per-color alpha channel, and the component is
- * opaque by design — use component-level `opacity` for transparency.
+ * (hex / named / rgb() / rgba() / hsl() / hsla()) into a 6-digit hex string,
+ * so renderers can keep working with #rrggbb only. rgba()/hsla() alpha is
+ * intentionally dropped: the WebGL shader has no per-color alpha channel, and
+ * the component is opaque by design — use component-level `opacity` for
+ * transparency.
+ *
+ * `normalizeColorWithAlpha` keeps the alpha channel: it returns a 6-digit hex
+ * when alpha is 1, an 8-digit #rrggbbaa hex when alpha < 1, and the literal
+ * string 'transparent' for `transparent`. Use it for renderers (e.g. SVG)
+ * that can represent per-color transparency.
  */
 
 var NAMED_COLORS = {
@@ -586,48 +592,161 @@ var NAMED_COLORS = {
 function clampChannel(value) {
   return Math.min(255, Math.max(0, Math.round(value)));
 }
-function normalizeRgbArgs(args) {
-  var parts = args.split(/[,\s/]+/).filter(Boolean);
+function clampUnit(value) {
+  return Math.min(1, Math.max(0, value));
+}
+function hexPair(value) {
+  var text = clampChannel(value).toString(16);
+  return text.length === 1 ? "0".concat(text) : text;
+}
+
+/**
+ * Parse the argument list of rgb()/rgba()/hsl()/hsla() (comma syntax or
+ * modern space + slash syntax). Returns { parts, alpha } where alpha is 1 when
+ * omitted. Returns null when the argument list cannot be parsed.
+ */
+function parseFunctionArgs(args) {
+  var parts = args.split(/[,\s]+/).map(function (part) {
+    return part.trim();
+  }).filter(function (part) {
+    return part !== '' && part !== '/';
+  });
   if (parts.length < 3) return null;
-  var to255 = function to255(value) {
-    if (typeof value !== 'string' || !value) return null;
-    if (value.charAt(value.length - 1) === '%') return clampChannel(parseFloat(value) / 100 * 255);
-    var number = Number(value);
-    return Number.isFinite(number) ? clampChannel(number) : null;
-  };
-  var red = to255(parts[0]);
-  var green = to255(parts[1]);
-  var blue = to255(parts[2]);
-  if (red === null || green === null || blue === null) return null;
-  var hex = function hex(n) {
-    var text = n.toString(16);
-    return text.length === 1 ? "0".concat(text) : text;
+  var alpha = 1;
+  if (parts.length >= 4) {
+    var alphaText = parts.pop().trim();
+    if (alphaText.endsWith('%')) {
+      var percent = parseFloat(alphaText);
+      if (!Number.isFinite(percent)) return null;
+      alpha = clampUnit(percent / 100);
+    } else {
+      var number = Number(alphaText);
+      if (!Number.isFinite(number)) return null;
+      alpha = clampUnit(number);
+    }
+  }
+  return {
+    parts: parts,
+    alpha: alpha
   };
-  return "#".concat(hex(red)).concat(hex(green)).concat(hex(blue));
+}
+function parseChannel(value) {
+  if (typeof value !== 'string' || value === '') return null;
+  var text = value.trim();
+  if (text.endsWith('%')) return clampChannel(parseFloat(text) / 100 * 255);
+  var number = Number(text);
+  return Number.isFinite(number) ? clampChannel(number) : null;
+}
+function parsePercent(value) {
+  if (typeof value !== 'string' || value === '') return null;
+  var text = value.trim();
+  if (!text.endsWith('%')) return null;
+  var number = parseFloat(text);
+  return Number.isFinite(number) ? Math.min(100, Math.max(0, number)) : null;
+}
+function parseHue(value) {
+  if (typeof value !== 'string' || value === '') return null;
+  var number = parseFloat(value);
+  return Number.isFinite(number) ? number : null;
+}
+
+/** Standard HSL -> RGB. h in degrees, s/l in 0..100, returns r/g/b in 0..255. */
+function hslToRgb(h, s, l) {
+  var hue = (h % 360 + 360) % 360 / 360;
+  var saturation = s / 100;
+  var lightness = l / 100;
+  var chroma = (1 - Math.abs(2 * lightness - 1)) * saturation;
+  var section = hue * 6;
+  var x = chroma * (1 - Math.abs(section % 2 - 1));
+  var red = 0;
+  var green = 0;
+  var blue = 0;
+  if (section < 1) {
+    red = chroma;
+    green = x;
+  } else if (section < 2) {
+    red = x;
+    green = chroma;
+  } else if (section < 3) {
+    green = chroma;
+    blue = x;
+  } else if (section < 4) {
+    green = x;
+    blue = chroma;
+  } else if (section < 5) {
+    red = x;
+    blue = chroma;
+  } else {
+    red = chroma;
+    blue = x;
+  }
+  var match = lightness - chroma / 2;
+  return [Math.round((red + match) * 255), Math.round((green + match) * 255), Math.round((blue + match) * 255)];
 }
 
 /**
- * Convert any supported CSS color into `#rrggbb`. Returns null when the
- * value cannot be parsed. Supports: #rgb / #rrggbb (case-insensitive),
- * CSS named colors, rgb() / rgba() with comma or modern space syntax,
- * including percentages. Alpha in rgba() is ignored.
+ * Parse any supported CSS color. When keepAlpha is true the alpha channel is
+ * preserved (8-digit hex for alpha < 1); when false it is dropped. 'transparent'
+ * is only preserved when keepAlpha is true.
  */
-function normalizeColor(value) {
+function parseColor(value, keepAlpha) {
   if (typeof value !== 'string') return null;
   var input = value.trim();
   if (!input) return null;
   var lower = input.toLowerCase();
   if (NAMED_COLORS[lower]) return NAMED_COLORS[lower];
-  if (/^#([0-9a-f]{3}|[0-9a-f]{6})$/i.test(input)) {
-    var hex = input.slice(1).toLowerCase();
-    if (hex.length === 3) return "#".concat(hex.split('').map(function (c) {
-      return c + c;
-    }).join(''));
-    return "#".concat(hex);
+  // #rgb / #rgba / #rrggbb / #rrggbbaa，以及无 # 前缀的 6/8 位 hex（dicebear 习惯）
+  var hexMatch = input.match(/^#?([0-9a-f]{3,8})$/i);
+  if (hexMatch) {
+    var _hex = hexMatch[1].toLowerCase();
+    if (_hex.length === 3 || _hex.length === 4) {
+      _hex = _hex.split('').map(function (c) {
+        return c + c;
+      }).join('');
+    }
+    return "#".concat(_hex.slice(0, 6));
+  }
+  var funcMatch = input.match(/^(rgba?|hsla?)\(([^)]*)\)$/i);
+  if (!funcMatch) return null;
+  var kind = funcMatch[1].toLowerCase();
+  var parsed = parseFunctionArgs(funcMatch[2]);
+  if (!parsed) return null;
+  var parts = parsed.parts;
+    parsed.alpha;
+  var red;
+  var green;
+  var blue;
+  if (kind === 'rgb' || kind === 'rgba') {
+    if (parts.length !== 3) return null;
+    red = parseChannel(parts[0]);
+    green = parseChannel(parts[1]);
+    blue = parseChannel(parts[2]);
+    if (red === null || green === null || blue === null) return null;
+  } else {
+    if (parts.length !== 3) return null;
+    var hue = parseHue(parts[0]);
+    var saturation = parsePercent(parts[1]);
+    var lightness = parsePercent(parts[2]);
+    if (hue === null || saturation === null || lightness === null) return null;
+    var _hslToRgb = hslToRgb(hue, saturation, lightness);
+    var _hslToRgb2 = _slicedToArray(_hslToRgb, 3);
+    red = _hslToRgb2[0];
+    green = _hslToRgb2[1];
+    blue = _hslToRgb2[2];
   }
-  var match = input.match(/^rgba?\((.*)\)$/i);
-  if (match) return normalizeRgbArgs(match[1]);
-  return null;
+  var hex = "#".concat(hexPair(red)).concat(hexPair(green)).concat(hexPair(blue));
+  return hex;
+}
+
+/**
+ * Convert any supported CSS color into `#rrggbb`. Returns null when the
+ * value cannot be parsed. Supports: #rgb / #rgba / #rrggbb / #rrggbbaa
+ * (case-insensitive), bare 6/8-digit hex, CSS named colors, rgb() / rgba() /
+ * hsl() / hsla() with comma or modern space syntax, including percentages.
+ * Alpha is ignored.
+ */
+function normalizeColor(value) {
+  return parseColor(value);
 }
 function hexToRgb01(color) {
   var hex = normalizeColor(color);
@@ -960,10 +1079,10 @@ var FallbackRenderer = /*#__PURE__*/function () {
   }]);
 }();
 
-/**
- * Document-level shared rAF scheduler. Every component instance subscribes
- * its own frame callback; the whole page runs ONE animation loop (like the
- * original demo), which avoids jank from many competing rAF loops.
+/**
+ * Document-level shared rAF scheduler. Every component instance subscribes
+ * its own frame callback; the whole page runs ONE animation loop (like the
+ * original demo), which avoids jank from many competing rAF loops.
  */
 var subscribers = [];
 var running = false;
@@ -1040,9 +1159,9 @@ function subscribeScheduler(onFrame, isPaused) {
   };
 }
 
-/**
- * Gates drawing on "element intersects viewport AND the page tab is visible".
- * Falls back to always-visible when IntersectionObserver is unavailable.
+/**
+ * Gates drawing on "element intersects viewport AND the page tab is visible".
+ * Falls back to always-visible when IntersectionObserver is unavailable.
  */
 function createVisibilityGuard(element) {
   var onChange = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
@@ -1180,19 +1299,19 @@ function releaseHostStyles(host) {
   HOST_STYLES.delete(host);
 }
 
-/**
- * Mount the cosmic (nebula) material as a background layer inside `host`.
- *
- * The layer is absolutely positioned and defaults to `z-index: -1`, so it
- * paints behind the host's in-flow content: text/buttons/images inside the
- * host sit on top with zero extra CSS. Host gets `position: relative;
- * isolation: isolate` automatically so the layer can never escape its box
- * (or break stacking outside it).
- *
- * Options: preset (literary name), colors, seed, speed, quality,
- * renderer, renderScale, powerPreference, fps, paused/static, mouseColor,
- * respectReducedMotion, opacity (0-1), fallbackColor (true=preset base
- * color, a hex string, or false to disable).
+/**
+ * Mount the cosmic (nebula) material as a background layer inside `host`.
+ *
+ * The layer is absolutely positioned and defaults to `z-index: -1`, so it
+ * paints behind the host's in-flow content: text/buttons/images inside the
+ * host sit on top with zero extra CSS. Host gets `position: relative;
+ * isolation: isolate` automatically so the layer can never escape its box
+ * (or break stacking outside it).
+ *
+ * Options: preset (literary name), colors, seed, speed, quality,
+ * renderer, renderScale, powerPreference, fps, paused/static, mouseColor,
+ * respectReducedMotion, opacity (0-1), fallbackColor (true=preset base
+ * color, a hex string, or false to disable).
  */
 function createColorBackground(host) {
   var _options$preset;