@5even7/dlc-ui 0.2.0 → 0.2.2

package/dist/color.mjs

@@ -116,20 +116,222 @@ function getPreset(kind, ref) {
   return found;
 }
 
-const DEFAULTS = {
-  capsule: {
+const DEFAULTS = {
+  capsule: {
     quality: 'auto',
     renderer: 'auto',
     respectReducedMotion: true}};
 
-function hexToRgb01(hex) {
-  const normalized = hex.replace('#', '');
-  const value = Number.parseInt(normalized, 16);
-  return [
-    ((value >> 16) & 255) / 255,
-    ((value >> 8) & 255) / 255,
-    (value & 255) / 255
-  ];
+/**
+ * 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.
+ */
+
+const NAMED_COLORS = {
+  aliceblue: '#f0f8ff',
+  antiquewhite: '#faebd7',
+  aqua: '#00ffff',
+  aquamarine: '#7fffd4',
+  azure: '#f0ffff',
+  beige: '#f5f5dc',
+  bisque: '#ffe4c4',
+  black: '#000000',
+  blanchedalmond: '#ffebcd',
+  blue: '#0000ff',
+  blueviolet: '#8a2be2',
+  brown: '#a52a2a',
+  burlywood: '#deb887',
+  cadetblue: '#5f9ea0',
+  chartreuse: '#7fff00',
+  chocolate: '#d2691e',
+  coral: '#ff7f50',
+  cornflowerblue: '#6495ed',
+  cornsilk: '#fff8dc',
+  crimson: '#dc143c',
+  cyan: '#00ffff',
+  darkblue: '#00008b',
+  darkcyan: '#008b8b',
+  darkgoldenrod: '#b8860b',
+  darkgray: '#a9a9a9',
+  darkgreen: '#006400',
+  darkgrey: '#a9a9a9',
+  darkkhaki: '#bdb76b',
+  darkmagenta: '#8b008b',
+  darkolivegreen: '#556b2f',
+  darkorange: '#ff8c00',
+  darkorchid: '#9932cc',
+  darkred: '#8b0000',
+  darksalmon: '#e9967a',
+  darkseagreen: '#8fbc8f',
+  darkslateblue: '#483d8b',
+  darkslategray: '#2f4f4f',
+  darkslategrey: '#2f4f4f',
+  darkturquoise: '#00ced1',
+  darkviolet: '#9400d3',
+  deeppink: '#ff1493',
+  deepskyblue: '#00bfff',
+  dimgray: '#696969',
+  dimgrey: '#696969',
+  dodgerblue: '#1e90ff',
+  firebrick: '#b22222',
+  floralwhite: '#fffaf0',
+  forestgreen: '#228b22',
+  fuchsia: '#ff00ff',
+  gainsboro: '#dcdcdc',
+  ghostwhite: '#f8f8ff',
+  gold: '#ffd700',
+  goldenrod: '#daa520',
+  gray: '#808080',
+  green: '#008000',
+  greenyellow: '#adff2f',
+  grey: '#808080',
+  honeydew: '#f0fff0',
+  hotpink: '#ff69b4',
+  indianred: '#cd5c5c',
+  indigo: '#4b0082',
+  ivory: '#fffff0',
+  khaki: '#f0e68c',
+  lavender: '#e6e6fa',
+  lavenderblush: '#fff0f5',
+  lawngreen: '#7cfc00',
+  lemonchiffon: '#fffacd',
+  lightblue: '#add8e6',
+  lightcoral: '#f08080',
+  lightcyan: '#e0ffff',
+  lightgoldenrodyellow: '#fafad2',
+  lightgray: '#d3d3d3',
+  lightgreen: '#90ee90',
+  lightgrey: '#d3d3d3',
+  lightpink: '#ffb6c1',
+  lightsalmon: '#ffa07a',
+  lightseagreen: '#20b2aa',
+  lightskyblue: '#87cefa',
+  lightslategray: '#778899',
+  lightslategrey: '#778899',
+  lightsteelblue: '#b0c4de',
+  lightyellow: '#ffffe0',
+  lime: '#00ff00',
+  limegreen: '#32cd32',
+  linen: '#faf0e6',
+  magenta: '#ff00ff',
+  maroon: '#800000',
+  mediumaquamarine: '#66cdaa',
+  mediumblue: '#0000cd',
+  mediumorchid: '#ba55d3',
+  mediumpurple: '#9370db',
+  mediumseagreen: '#3cb371',
+  mediumslateblue: '#7b68ee',
+  mediumspringgreen: '#00fa9a',
+  mediumturquoise: '#48d1cc',
+  mediumvioletred: '#c71585',
+  midnightblue: '#191970',
+  mintcream: '#f5fffa',
+  mistyrose: '#ffe4e1',
+  moccasin: '#ffe4b5',
+  navajowhite: '#ffdead',
+  navy: '#000080',
+  oldlace: '#fdf5e6',
+  olive: '#808000',
+  olivedrab: '#6b8e23',
+  orange: '#ffa500',
+  orangered: '#ff4500',
+  orchid: '#da70d6',
+  palegoldenrod: '#eee8aa',
+  palegreen: '#98fb98',
+  paleturquoise: '#afeeee',
+  palevioletred: '#db7093',
+  papayawhip: '#ffefd5',
+  peachpuff: '#ffdab9',
+  peru: '#cd853f',
+  pink: '#ffc0cb',
+  plum: '#dda0dd',
+  powderblue: '#b0e0e6',
+  purple: '#800080',
+  rebeccapurple: '#663399',
+  red: '#ff0000',
+  rosybrown: '#bc8f8f',
+  royalblue: '#4169e1',
+  saddlebrown: '#8b4513',
+  salmon: '#fa8072',
+  sandybrown: '#f4a460',
+  seagreen: '#2e8b57',
+  seashell: '#fff5ee',
+  sienna: '#a0522d',
+  silver: '#c0c0c0',
+  skyblue: '#87ceeb',
+  slateblue: '#6a5acd',
+  slategray: '#708090',
+  slategrey: '#708090',
+  snow: '#fffafa',
+  springgreen: '#00ff7f',
+  steelblue: '#4682b4',
+  tan: '#d2b48c',
+  teal: '#008080',
+  thistle: '#d8bfd8',
+  tomato: '#ff6347',
+  turquoise: '#40e0d0',
+  violet: '#ee82ee',
+  wheat: '#f5deb3',
+  white: '#ffffff',
+  whitesmoke: '#f5f5f5',
+  yellow: '#ffff00',
+  yellowgreen: '#9acd32'
+};
+
+function clampChannel(value) {
+  return Math.min(255, Math.max(0, Math.round(value)));
+}
+
+function normalizeRgbArgs(args) {
+  const parts = args.split(/[,\s/]+/).filter(Boolean);
+  if (parts.length < 3) return null;
+  const to255 = (value) => {
+    if (typeof value !== 'string' || !value) return null;
+    if (value.endsWith('%')) return clampChannel((parseFloat(value) / 100) * 255);
+    const number = Number(value);
+    return Number.isFinite(number) ? clampChannel(number) : null;
+  };
+  const red = to255(parts[0]);
+  const green = to255(parts[1]);
+  const blue = to255(parts[2]);
+  if (red === null || green === null || blue === null) return null;
+  return `#${[red, green, blue].map((n) => n.toString(16).padStart(2, '0')).join('')}`;
+}
+
+/**
+ * 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.
+ */
+function normalizeColor(value) {
+  if (typeof value !== 'string') return null;
+  const input = value.trim();
+  if (!input) return null;
+  const lower = input.toLowerCase();
+  if (NAMED_COLORS[lower]) return NAMED_COLORS[lower];
+  if (/^#([0-9a-f]{3}|[0-9a-f]{6})$/i.test(input)) {
+    const hex = input.slice(1).toLowerCase();
+    if (hex.length === 3) return `#${hex.split('').map((c) => c + c).join('')}`;
+    return `#${hex}`;
+  }
+  const match = input.match(/^rgba?\((.*)\)$/i);
+  if (match) return normalizeRgbArgs(match[1]);
+  return null;
+}
+
+function hexToRgb01(color) {
+  const hex = normalizeColor(color);
+  if (!hex) return [0, 0, 0];
+  const value = Number.parseInt(hex.slice(1), 16);
+  return [
+    ((value >> 16) & 255) / 255,
+    ((value >> 8) & 255) / 255,
+    (value & 255) / 255
+  ];
 }
 
 const VERTEX_SHADER = `#version 300 es
@@ -357,12 +559,31 @@ class CosmicRenderer {
     this.timeOffset = preset.seed * 0.73;
   }
 
-  setDprCap(cap) {
-    this.options.dprCap = cap;
-    this.resize();
-  }
-
-  randomize() {
+  setDprCap(cap) {
+    this.options.dprCap = cap;
+    this.resize();
+  }
+
+  setMouseColor(enabled) {
+    this.options.mouseColor = enabled !== false;
+    if (this.options.mouseColor) {
+      if (this.onPointerMove) return this;
+      this.#bindEvents();
+      return this;
+    }
+    if (this.onPointerMove) {
+      const target = this.eventTarget;
+      target.removeEventListener('pointermove', this.onPointerMove);
+      target.removeEventListener('pointerdown', this.onPointerMove);
+      target.removeEventListener('pointerleave', this.onPointerLeave);
+      this.onPointerMove = null;
+      this.onPointerLeave = null;
+    }
+    this.motionTarget = 0;
+    return this;
+  }
+
+  randomize() {
     this.preset.seed = Math.random() * 100;
     this.timeOffset = Math.random() * 40;
   }
@@ -442,10 +663,12 @@ class FallbackRenderer {
     }
   }
 
-  drawNebula(time) {
-    const ctx = this.context;
-    const { width, height } = this.canvas;
-    const gradient = ctx.createLinearGradient(0, 0, width, height);
+  drawNebula(time) {
+    const ctx = this.context;
+    const { width, height } = this.canvas;
+    const t = time * (this.preset.speed || 1);
+    const phase = (this.preset.seed || 0) * 0.7;
+    const gradient = ctx.createLinearGradient(0, 0, width, height);
     gradient.addColorStop(0, this.preset.colors[0]);
     gradient.addColorStop(0.38, this.preset.colors[1]);
     gradient.addColorStop(0.72, this.preset.colors[2]);
@@ -453,10 +676,10 @@ class FallbackRenderer {
     ctx.fillStyle = gradient;
     ctx.fillRect(0, 0, width, height);
 
-    ctx.globalCompositeOperation = 'screen';
-    for (let index = 0; index < 6; index += 1) {
-      const x = (0.5 + 0.45 * Math.sin(time * 0.32 + index * 1.7)) * width;
-      const y = (0.5 + 0.4 * Math.cos(time * 0.25 + index)) * height;
+    ctx.globalCompositeOperation = 'screen';
+    for (let index = 0; index < 6; index += 1) {
+      const x = (0.5 + 0.45 * Math.sin(t * 0.32 + index * 1.7 + phase)) * width;
+      const y = (0.5 + 0.4 * Math.cos(t * 0.25 + index + phase)) * height;
       const radius = Math.max(width, height) * (0.08 + (index % 3) * 0.04);
       const glow = ctx.createRadialGradient(x, y, 0, x, y, radius);
       glow.addColorStop(0, rgb(this.preset.colors[(index + 1) % 4], 0.24));
@@ -477,8 +700,11 @@ class FallbackRenderer {
     this.preset = preset;
   }
 
-  randomize() {}
-  dispose() {}
+  randomize() {
+    if (this.preset) this.preset.seed = Math.random() * 100;
+  }
+  setMouseColor() {}
+  dispose() {}
 }
 
 /**
@@ -578,6 +804,22 @@ function createVisibilityGuard(element) {
   };
 }
 
+/**
+ * Run a callback asynchronously, right after the current task and before the
+ * next paint. Used for mount-time events (ready / error) so listeners that
+ * are attached after create() still receive them. Falls back for legacy
+ * browsers that lack queueMicrotask / Promise.
+ */
+function nextTick(fn) {
+  if (typeof queueMicrotask === 'function') {
+    queueMicrotask(fn);
+  } else if (typeof Promise !== 'undefined' && typeof Promise.resolve === 'function') {
+    Promise.resolve().then(fn);
+  } else {
+    setTimeout(fn, 0);
+  }
+}
+
 function prefersReducedMotion() {
   return typeof matchMedia !== 'undefined' && matchMedia('(prefers-reduced-motion: reduce)').matches;
 }
@@ -601,7 +843,7 @@ function createColorBackground(host, options = {}) {
   }
 
   const preset = { ...getPreset('capsule', options.preset ?? '初光') };
-  const merged = normalizeOptions(
+  const merged = normalizeOptions(
     {
       quality: DEFAULTS.capsule.quality,
       renderer: DEFAULTS.capsule.renderer,
@@ -611,8 +853,12 @@ function createColorBackground(host, options = {}) {
       fallbackColor: true
     },
     preset,
-    options
-  );
+    options
+  );
+  const normalizedColors = merged.colors.map(normalizeColor);
+  if (normalizedColors.every(Boolean)) preset.colors = normalizedColors;
+  preset.seed = merged.seed;
+  preset.speed = merged.speed;
 
   const computed = getComputedStyle(host);
   if (computed.position === 'static' || computed.position === '') {
@@ -641,8 +887,18 @@ function createColorBackground(host, options = {}) {
   layer.appendChild(canvas);
   host.appendChild(layer);
 
-  const emitter = createEmitter();
-  let paused = merged.respectReducedMotion && prefersReducedMotion();
+  const emitter = createEmitter();
+  let paused = merged.respectReducedMotion && prefersReducedMotion();
+  let disposed = false;
+  const dirty = {
+    preset: false,
+    seed: false,
+    speed: false,
+    colors: false,
+    opacity: false,
+    fallbackColor: false,
+    mouseColor: false
+  };
 
   let renderer;
   const useWebgl = merged.renderer !== 'canvas2d';
@@ -655,9 +911,12 @@ function createColorBackground(host, options = {}) {
       });
     } catch (error) {
       renderer = new FallbackRenderer(canvas, merged);
-      emitter.emit('error', {
-        message: String(error && error.message ? error.message : error)
-      });
+      nextTick(() => {
+        if (disposed) return;
+        emitter.emit('error', {
+          message: String(error && error.message ? error.message : error)
+        });
+      });
     }
   } else {
     renderer = new FallbackRenderer(canvas, merged);
@@ -681,7 +940,10 @@ function createColorBackground(host, options = {}) {
     () => paused
   );
 
-  emitter.emit('ready', { preset: { ...preset } });
+  nextTick(() => {
+    if (disposed) return;
+    emitter.emit('ready', { preset: { ...preset } });
+  });
 
   return {
     element: host,
@@ -690,38 +952,72 @@ function createColorBackground(host, options = {}) {
     preset,
     on: emitter.on,
     off: emitter.off,
-    setPreset(ref) {
-      const next = getPreset('capsule', ref);
-      Object.assign(preset, next);
-      renderer.setPreset(next);
-      renderer.resize();
-      syncLayerVars();
-      emitter.emit('presetchange', { preset: { ...next } });
-      return this;
-    },
-    setColors(colors) {
-      if (!Array.isArray(colors) || colors.length !== 4) return this;
-      preset.colors = colors;
-      renderer.setPreset({ ...preset, colors });
-      syncLayerVars();
-      return this;
-    },
+    setPreset(ref) {
+      const next = getPreset('capsule', ref);
+      dirty.preset = true;
+      Object.assign(preset, next);
+      const nextColors = preset.colors.map(normalizeColor);
+      if (nextColors.every(Boolean)) preset.colors = nextColors;
+      renderer.setPreset({ ...preset });
+      renderer.resize();
+      syncLayerVars();
+      emitter.emit('presetchange', { preset: { ...preset } });
+      return this;
+    },
+    setColors(colors) {
+      const next = Array.isArray(colors) ? colors.map(normalizeColor) : [];
+      if (next.length !== 4 || next.some((color) => !color)) return this;
+      dirty.colors = true;
+      preset.colors = next;
+      renderer.setPreset({ ...preset, colors: next });
+      syncLayerVars();
+      return this;
+    },
+    setSeed(seed) {
+      const value = Number(seed);
+      if (!Number.isFinite(value)) return this;
+      dirty.seed = true;
+      preset.seed = value;
+      renderer.setPreset({ ...preset });
+      return this;
+    },
+    setSpeed(speed) {
+      const value = Number(speed);
+      if (!Number.isFinite(value)) return this;
+      dirty.speed = true;
+      preset.speed = value;
+      renderer.setPreset({ ...preset });
+      return this;
+    },
+    setFallbackColor(value) {
+      dirty.fallbackColor = true;
+      merged.fallbackColor = value;
+      syncLayerVars();
+      return this;
+    },
+    setMouseColor(value) {
+      dirty.mouseColor = true;
+      merged.mouseColor = value !== false;
+      if (typeof renderer.setMouseColor === 'function') renderer.setMouseColor(merged.mouseColor);
+      return this;
+    },
     setQuality(quality) {
       merged.quality = quality;
       if (typeof renderer.setDprCap === 'function') renderer.setDprCap(dprCapFor(quality));
       return this;
     },
-    setOpacity(value) {
-      const opacity = Number(value);
-      if (!Number.isFinite(opacity)) return this;
-      merged.opacity = Math.min(1, Math.max(0, opacity));
+    setOpacity(value) {
+      const opacity = Number(value);
+      if (!Number.isFinite(opacity)) return this;
+      dirty.opacity = true;
+      merged.opacity = Math.min(1, Math.max(0, opacity));
       layer.style.setProperty('--dlc-color-opacity', String(merged.opacity));
       return this;
     },
-    randomize() {
-      renderer.randomize();
-      return this;
-    },
+    randomize() {
+      this.setSeed(Math.random() * 100);
+      return this;
+    },
     pause() {
       paused = true;
       return this;
@@ -730,15 +1026,20 @@ function createColorBackground(host, options = {}) {
       paused = false;
       return this;
     },
-    dispose() {
-      unsubscribe();
+    dispose() {
+      disposed = true;
+      unsubscribe();
       visibility.dispose();
       if (resizeObserver) resizeObserver.disconnect();
       else window.removeEventListener('resize', renderer.resize);
-      renderer.dispose();
-      layer.remove();
-    }
-  };
+      renderer.dispose();
+      layer.remove();
+    },
+    opacity: merged.opacity,
+    fallbackColor: merged.fallbackColor,
+    mouseColor: merged.mouseColor,
+    dirty
+  };
 }
 
 export { createColorBackground };