@5even7/dlc-ui 0.2.18 → 0.2.19

package/dist/emo.mjs

@@ -1,82 +1,82 @@
-/**
- * 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
-  // dependencies beyond what IE11 provides.
-  const listeners = Object.create(null);
-
-  return {
-    on(event, fn) {
-      if (!listeners[event]) listeners[event] = [];
-      listeners[event].push(fn);
-      return () => {
-        const current = listeners[event];
-        if (current) {
-          const index = current.indexOf(fn);
-          if (index !== -1) current.splice(index, 1);
-        }
-      };
-    },
-    off(event, fn) {
-      const current = listeners[event];
-      if (!current) return false;
-      const index = current.indexOf(fn);
-      if (index === -1) return false;
-      current.splice(index, 1);
-      return true;
-    },
-    emit(event, ...args) {
-      const current = listeners[event];
-      if (!current) return;
-      for (const fn of current.slice()) fn(...args);
-    }
-  };
+/**
+ * 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
+  // dependencies beyond what IE11 provides.
+  const listeners = Object.create(null);
+
+  return {
+    on(event, fn) {
+      if (!listeners[event]) listeners[event] = [];
+      listeners[event].push(fn);
+      return () => {
+        const current = listeners[event];
+        if (current) {
+          const index = current.indexOf(fn);
+          if (index !== -1) current.splice(index, 1);
+        }
+      };
+    },
+    off(event, fn) {
+      const current = listeners[event];
+      if (!current) return false;
+      const index = current.indexOf(fn);
+      if (index === -1) return false;
+      current.splice(index, 1);
+      return true;
+    },
+    emit(event, ...args) {
+      const current = listeners[event];
+      if (!current) return;
+      for (const fn of current.slice()) fn(...args);
+    }
+  };
 }
 
-const UNIT_PATTERN = /^[\d.]+(?:px|%|vw|vh|vmin|vmax|em|rem)$/;
-
-/**
- * Normalize a size option to a CSS length string.
- * Accepts numbers (treated as px) or strings with px/%, vw/vh/vmin/vmax, em/rem.
- */
-function parseSize(value) {
-  if (typeof value === 'number') {
-    if (!Number.isFinite(value) || value < 0) throw new Error(`Invalid size: ${value}`);
-    return `${value}px`;
-  }
-  if (typeof value !== 'string') throw new Error(`Invalid size: ${String(value)}`);
-  const trimmed = value.trim();
-  if (!trimmed) throw new Error('Invalid size: empty string');
-  if (/^\d+(?:\.\d+)?$/.test(trimmed)) return `${trimmed}px`;
-  if (!UNIT_PATTERN.test(trimmed)) {
-    throw new Error(`Invalid size or unsupported unit: "${value}" (use px, %, vw, vh, vmin, vmax, em, rem)`);
-  }
-  return trimmed;
+const UNIT_PATTERN = /^[\d.]+(?:px|%|vw|vh|vmin|vmax|em|rem)$/;
+
+/**
+ * Normalize a size option to a CSS length string.
+ * Accepts numbers (treated as px) or strings with px/%, vw/vh/vmin/vmax, em/rem.
+ */
+function parseSize(value) {
+  if (typeof value === 'number') {
+    if (!Number.isFinite(value) || value < 0) throw new Error(`Invalid size: ${value}`);
+    return `${value}px`;
+  }
+  if (typeof value !== 'string') throw new Error(`Invalid size: ${String(value)}`);
+  const trimmed = value.trim();
+  if (!trimmed) throw new Error('Invalid size: empty string');
+  if (/^\d+(?:\.\d+)?$/.test(trimmed)) return `${trimmed}px`;
+  if (!UNIT_PATTERN.test(trimmed)) {
+    throw new Error(`Invalid size or unsupported unit: "${value}" (use px, %, vw, vh, vmin, vmax, em, rem)`);
+  }
+  return trimmed;
 }
 
-function createReducedMotionPreference(enabled, onChange) {
-  const query = enabled && typeof matchMedia !== 'undefined'
-    ? matchMedia('(prefers-reduced-motion: reduce)')
-    : null;
-  const notify = () => {
-    if (typeof onChange === 'function') onChange(Boolean(query && query.matches));
-  };
-  if (query) {
-    if (typeof query.addEventListener === 'function') query.addEventListener('change', notify);
-    else if (typeof query.addListener === 'function') query.addListener(notify);
-  }
-  return {
-    matches() {
-      return Boolean(query && query.matches);
-    },
-    dispose() {
-      if (!query) return;
-      if (typeof query.removeEventListener === 'function') query.removeEventListener('change', notify);
-      else if (typeof query.removeListener === 'function') query.removeListener(notify);
-    }
-  };
+function createReducedMotionPreference(enabled, onChange) {
+  const query = enabled && typeof matchMedia !== 'undefined'
+    ? matchMedia('(prefers-reduced-motion: reduce)')
+    : null;
+  const notify = () => {
+    if (typeof onChange === 'function') onChange(Boolean(query && query.matches));
+  };
+  if (query) {
+    if (typeof query.addEventListener === 'function') query.addEventListener('change', notify);
+    else if (typeof query.addListener === 'function') query.addListener(notify);
+  }
+  return {
+    matches() {
+      return Boolean(query && query.matches);
+    },
+    dispose() {
+      if (!query) return;
+      if (typeof query.removeEventListener === 'function') query.removeEventListener('change', notify);
+      else if (typeof query.removeListener === 'function') query.removeListener(notify);
+    }
+  };
 }
 
 // Generated by scripts/generate-emo-assets.mjs. Do not edit by hand.
@@ -343,10 +343,16 @@ function getEmoAnimation(type = 'miao', name = 'smile') {
 
 /**
  * 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.
  */
 
 const NAMED_COLORS = {
@@ -504,46 +510,145 @@ function clampChannel(value) {
   return Math.min(255, Math.max(0, Math.round(value)));
 }
 
-function normalizeRgbArgs(args) {
-  const parts = args.split(/[,\s/]+/).filter(Boolean);
+function clampUnit(value) {
+  return Math.min(1, Math.max(0, value));
+}
+
+function hexPair(value) {
+  const text = clampChannel(value).toString(16);
+  return text.length === 1 ? `0${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) {
+  const parts = args
+    .split(/[,\s]+/)
+    .map((part) => part.trim())
+    .filter((part) => part !== '' && part !== '/');
   if (parts.length < 3) return null;
-  const to255 = (value) => {
-    if (typeof value !== 'string' || !value) return null;
-    if (value.charAt(value.length - 1) === '%') 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;
-  const hex = (n) => {
-    const text = n.toString(16);
-    return text.length === 1 ? `0${text}` : text;
-  };
-  return `#${hex(red)}${hex(green)}${hex(blue)}`;
+  let alpha = 1;
+  if (parts.length >= 4) {
+    const alphaText = parts.pop().trim();
+    if (alphaText.endsWith('%')) {
+      const percent = parseFloat(alphaText);
+      if (!Number.isFinite(percent)) return null;
+      alpha = clampUnit(percent / 100);
+    } else {
+      const number = Number(alphaText);
+      if (!Number.isFinite(number)) return null;
+      alpha = clampUnit(number);
+    }
+  }
+  return { parts, alpha };
+}
+
+function parseChannel(value) {
+  if (typeof value !== 'string' || value === '') return null;
+  const text = value.trim();
+  if (text.endsWith('%')) return clampChannel((parseFloat(text) / 100) * 255);
+  const number = Number(text);
+  return Number.isFinite(number) ? clampChannel(number) : null;
+}
+
+function parsePercent(value) {
+  if (typeof value !== 'string' || value === '') return null;
+  const text = value.trim();
+  if (!text.endsWith('%')) return null;
+  const 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;
+  const 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) {
+  const hue = ((h % 360) + 360) % 360 / 360;
+  const saturation = s / 100;
+  const lightness = l / 100;
+  const chroma = (1 - Math.abs(2 * lightness - 1)) * saturation;
+  const section = hue * 6;
+  const x = chroma * (1 - Math.abs((section % 2) - 1));
+  let red = 0;
+  let green = 0;
+  let 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; }
+  const 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;
   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}`;
+  // #rgb / #rgba / #rrggbb / #rrggbbaa，以及无 # 前缀的 6/8 位 hex（dicebear 习惯）
+  const hexMatch = input.match(/^#?([0-9a-f]{3,8})$/i);
+  if (hexMatch) {
+    let hex = hexMatch[1].toLowerCase();
+    if (hex.length === 3 || hex.length === 4) {
+      hex = hex.split('').map((c) => c + c).join('');
+    }
+    return `#${hex.slice(0, 6)}`;
   }
-  const match = input.match(/^rgba?\((.*)\)$/i);
-  if (match) return normalizeRgbArgs(match[1]);
-  return null;
+  const funcMatch = input.match(/^(rgba?|hsla?)\(([^)]*)\)$/i);
+  if (!funcMatch) return null;
+  const kind = funcMatch[1].toLowerCase();
+  const parsed = parseFunctionArgs(funcMatch[2]);
+  if (!parsed) return null;
+  const { parts, alpha } = parsed;
+  let red;
+  let green;
+  let 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;
+    const hue = parseHue(parts[0]);
+    const saturation = parsePercent(parts[1]);
+    const lightness = parsePercent(parts[2]);
+    if (hue === null || saturation === null || lightness === null) return null;
+    [red, green, blue] = hslToRgb(hue, saturation, lightness);
+  }
+  const hex = `#${hexPair(red)}${hexPair(green)}${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) {
@@ -754,119 +859,119 @@ function createMiaoRenderer({ stage, s, emitter }) {
   };
 }
 
-/**
- * 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.
- */
-const subscribers = [];
-let running = false;
-let rafId = 0;
-let last = 0;
-
-function tick(now) {
-  if (!running) return;
-  const activeItems = [];
-  {
-    for (const item of subscribers.slice()) {
-      try {
-        if (!item.isPaused()) activeItems.push(item);
-      } catch {}
-    }
-  }
-  if (activeItems.length === 0) {
-    running = false;
-    rafId = 0;
-    last = 0;
-    return;
-  }
-  const delta = last ? Math.min((now - last) / 1000, 0.05) : 0;
-  last = now;
-  // Schedule the next frame BEFORE running callbacks so one throwing
-  // subscriber can never kill the whole animation loop.
-  rafId = requestAnimationFrame(tick);
-  for (const item of activeItems) {
-    try {
-      item.onFrame(delta, now);
-    } catch (error) {
-      console.warn('[dlc-ui] frame error:', error);
-    }
-  }
-  if (subscribers.length === 0) {
-    cancelAnimationFrame(rafId);
-    running = false;
-    rafId = 0;
-  }
-}
-
-function start() {
-  if (running) return;
-  running = true;
-  last = 0;
-  rafId = requestAnimationFrame(tick);
-}
-
-function wakeScheduler() {
-  start();
-}
-
-function subscribeScheduler(onFrame, isPaused) {
-  const item = { onFrame, isPaused };
-  subscribers.push(item);
-  start();
-  return () => {
-    const index = subscribers.indexOf(item);
-    if (index !== -1) subscribers.splice(index, 1);
-    if (subscribers.length === 0 && rafId) {
-      cancelAnimationFrame(rafId);
-      running = false;
-      rafId = 0;
-    }
-  };
+/**
+ * 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.
+ */
+const subscribers = [];
+let running = false;
+let rafId = 0;
+let last = 0;
+
+function tick(now) {
+  if (!running) return;
+  const activeItems = [];
+  {
+    for (const item of subscribers.slice()) {
+      try {
+        if (!item.isPaused()) activeItems.push(item);
+      } catch {}
+    }
+  }
+  if (activeItems.length === 0) {
+    running = false;
+    rafId = 0;
+    last = 0;
+    return;
+  }
+  const delta = last ? Math.min((now - last) / 1000, 0.05) : 0;
+  last = now;
+  // Schedule the next frame BEFORE running callbacks so one throwing
+  // subscriber can never kill the whole animation loop.
+  rafId = requestAnimationFrame(tick);
+  for (const item of activeItems) {
+    try {
+      item.onFrame(delta, now);
+    } catch (error) {
+      console.warn('[dlc-ui] frame error:', error);
+    }
+  }
+  if (subscribers.length === 0) {
+    cancelAnimationFrame(rafId);
+    running = false;
+    rafId = 0;
+  }
+}
+
+function start() {
+  if (running) return;
+  running = true;
+  last = 0;
+  rafId = requestAnimationFrame(tick);
+}
+
+function wakeScheduler() {
+  start();
 }
 
-/**
- * Gates drawing on "element intersects viewport AND the page tab is visible".
- * Falls back to always-visible when IntersectionObserver is unavailable.
- */
-function createVisibilityGuard(element, onChange = null) {
-  let intersecting = true;
-  let pageVisible = typeof document === 'undefined' || !document.hidden;
-  let disposed = false;
-  let observer = null;
-
-  if (typeof IntersectionObserver !== 'undefined') {
-    observer = new IntersectionObserver(
-      (entries) => {
-        intersecting = entries.some((entry) => entry.isIntersecting);
-        if (typeof onChange === 'function') onChange();
-      },
-      { rootMargin: '180px' }
-    );
-    observer.observe(element);
-  }
-
-  const onVisibilityChange = () => {
-    pageVisible = typeof document !== 'undefined' && !document.hidden;
-    if (typeof onChange === 'function') onChange();
-  };
-  if (typeof document !== 'undefined') {
-    document.addEventListener('visibilitychange', onVisibilityChange);
-  }
-
-  return {
-    isVisible() {
-      return intersecting && pageVisible;
-    },
-    dispose() {
-      if (disposed) return;
-      disposed = true;
-      if (observer) observer.disconnect();
-      if (typeof document !== 'undefined') {
-        document.removeEventListener('visibilitychange', onVisibilityChange);
-      }
-    }
-  };
+function subscribeScheduler(onFrame, isPaused) {
+  const item = { onFrame, isPaused };
+  subscribers.push(item);
+  start();
+  return () => {
+    const index = subscribers.indexOf(item);
+    if (index !== -1) subscribers.splice(index, 1);
+    if (subscribers.length === 0 && rafId) {
+      cancelAnimationFrame(rafId);
+      running = false;
+      rafId = 0;
+    }
+  };
+}
+
+/**
+ * Gates drawing on "element intersects viewport AND the page tab is visible".
+ * Falls back to always-visible when IntersectionObserver is unavailable.
+ */
+function createVisibilityGuard(element, onChange = null) {
+  let intersecting = true;
+  let pageVisible = typeof document === 'undefined' || !document.hidden;
+  let disposed = false;
+  let observer = null;
+
+  if (typeof IntersectionObserver !== 'undefined') {
+    observer = new IntersectionObserver(
+      (entries) => {
+        intersecting = entries.some((entry) => entry.isIntersecting);
+        if (typeof onChange === 'function') onChange();
+      },
+      { rootMargin: '180px' }
+    );
+    observer.observe(element);
+  }
+
+  const onVisibilityChange = () => {
+    pageVisible = typeof document !== 'undefined' && !document.hidden;
+    if (typeof onChange === 'function') onChange();
+  };
+  if (typeof document !== 'undefined') {
+    document.addEventListener('visibilitychange', onVisibilityChange);
+  }
+
+  return {
+    isVisible() {
+      return intersecting && pageVisible;
+    },
+    dispose() {
+      if (disposed) return;
+      disposed = true;
+      if (observer) observer.disconnect();
+      if (typeof document !== 'undefined') {
+        document.removeEventListener('visibilitychange', onVisibilityChange);
+      }
+    }
+  };
 }
 
 /**