@5even7/dlc-ui 0.2.18 → 0.2.20

package/package.json

@@ -1,136 +1,161 @@
-{
-  "name": "@5even7/dlc-ui",
-  "version": "0.2.18",
-  "publishConfig": {
-    "access": "public",
-    "registry": "https://registry.npmjs.org"
-  },
-  "description": "DLC 星云胶囊、流体进度、动态背景与 Lottie 表情组件库，支持 H5 / Vue2 / Vue3。",
-  "type": "module",
-  "repository": {
-    "type": "git",
-    "url": "https://gitee.com/K_a1/cosmic-capsules.git"
-  },
-  "main": "./dist/index.cjs",
-  "module": "./dist/index.mjs",
-  "types": "./types/index.d.ts",
-  "unpkg": "./dist/index.umd.min.js",
-  "jsdelivr": "./dist/index.umd.min.js",
-  "exports": {
-    ".": {
-      "types": "./types/index.d.ts",
-      "import": "./dist/index.mjs",
-      "require": "./dist/index.cjs",
-      "default": "./dist/index.mjs"
-    },
-    "./capsule": {
-      "types": "./types/capsule.d.ts",
-      "import": "./dist/capsule.mjs",
-      "require": "./dist/capsule.cjs",
-      "default": "./dist/capsule.mjs"
-    },
-    "./progress": {
-      "types": "./types/progress.d.ts",
-      "import": "./dist/progress.mjs",
-      "require": "./dist/progress.cjs",
-      "default": "./dist/progress.mjs"
-    },
-    "./color": {
-      "types": "./types/color.d.ts",
-      "import": "./dist/color.mjs",
-      "require": "./dist/color.cjs",
-      "default": "./dist/color.mjs"
-    },
-    "./emo": {
-      "types": "./types/emo.d.ts",
-      "import": "./dist/emo.mjs",
-      "require": "./dist/emo.cjs",
-      "default": "./dist/emo.mjs"
-    },
-    "./vue3": {
-      "types": "./types/vue3.d.ts",
-      "import": "./dist/vue3.mjs",
-      "require": "./dist/vue3.cjs",
-      "default": "./dist/vue3.mjs"
-    },
-    "./vue2": {
-      "types": "./types/vue2.d.ts",
-      "import": "./dist/vue2.mjs",
-      "require": "./dist/vue2.cjs",
-      "default": "./dist/vue2.mjs"
-    },
-    "./style.css": "./styles/theme.css",
-    "./capsule/style.css": "./styles/capsule.css",
-    "./progress/style.css": "./styles/progress.css",
-    "./color/style.css": "./styles/color.css",
-    "./emo/style.css": "./styles/emo.css",
-    "./package.json": "./package.json"
-  },
-  "files": [
-    "dist",
-    "styles",
-    "types",
-    "README.md",
-    "LICENSE",
-    "CHANGELOG.md",
-    "THIRD_PARTY_NOTICES.md"
-  ],
-  "peerDependencies": {
-    "vue": ">=2.7.0"
-  },
-  "peerDependenciesMeta": {
-    "vue": {
-      "optional": true
-    }
-  },
-  "sideEffects": [
-    "./styles/*.css"
-  ],
-  "scripts": {
-    "build": "node scripts/generate-emo-assets.mjs && rollup -c && node scripts/copy-css.mjs",
-    "test": "node --test",
-    "serve": "node scripts/serve.mjs",
-    "demo:h5": "node scripts/serve.mjs",
-    "demo:vue3": "npm --prefix examples/vue3 run dev",
-    "demo:vue2": "npm --prefix examples/vue2 run dev",
-    "prepublishOnly": "npm run build && npm test"
-  },
-  "keywords": [
-    "capsule",
-    "progress",
-    "webgl",
-    "canvas",
-    "nebula",
-    "background",
-    "color",
-    "vue",
-    "vue2",
-    "vue3",
-    "h5",
-    "component",
-    "lottie",
-    "emotion",
-    "emoji"
-  ],
-  "license": "MIT",
-  "engines": {
-    "node": ">=18"
-  },
-  "devDependencies": {
-    "@babel/core": "^7.26.0",
-    "@babel/preset-env": "^7.26.0",
-    "@rollup/plugin-babel": "^6.0.4",
-    "@rollup/plugin-commonjs": "^28.0.1",
-    "@rollup/plugin-node-resolve": "^15.3.0",
-    "@rollup/plugin-terser": "^0.4.4",
-    "intersection-observer": "^0.12.2",
-    "jsdom": "^24.1.0",
-    "pepjs": "^0.5.3",
-    "resize-observer-polyfill": "^1.5.1",
-    "rollup": "^4.24.0",
-    "vue": "^3.4.0"
-  },
-  "dependencies": {
-    "lottie-web": "^5.13.0"
-  }
-}
+{
+  "name": "@5even7/dlc-ui",
+  "version": "0.2.20",
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org"
+  },
+  "description": "DLC 星云胶囊、流体进度、动态背景、Lottie 表情与本地头像创建器组件库，支持 H5 / Vue2 / Vue3。",
+  "type": "module",
+  "repository": {
+    "type": "git",
+    "url": "https://gitee.com/K_a1/cosmic-capsules.git"
+  },
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.mjs",
+  "types": "./types/index.d.ts",
+  "unpkg": "./dist/index.umd.min.js",
+  "jsdelivr": "./dist/index.umd.min.js",
+  "exports": {
+    ".": {
+      "types": "./types/index.d.ts",
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.cjs",
+      "default": "./dist/index.mjs"
+    },
+    "./capsule": {
+      "types": "./types/capsule.d.ts",
+      "import": "./dist/capsule.mjs",
+      "require": "./dist/capsule.cjs",
+      "default": "./dist/capsule.mjs"
+    },
+    "./progress": {
+      "types": "./types/progress.d.ts",
+      "import": "./dist/progress.mjs",
+      "require": "./dist/progress.cjs",
+      "default": "./dist/progress.mjs"
+    },
+    "./color": {
+      "types": "./types/color.d.ts",
+      "import": "./dist/color.mjs",
+      "require": "./dist/color.cjs",
+      "default": "./dist/color.mjs"
+    },
+    "./emo": {
+      "types": "./types/emo.d.ts",
+      "import": "./dist/emo.mjs",
+      "require": "./dist/emo.cjs",
+      "default": "./dist/emo.mjs"
+    },
+    "./avatar-creator": {
+      "types": "./types/avatar-creator.d.ts",
+      "import": "./dist/avatar-creator.mjs",
+      "require": "./dist/avatar-creator.cjs",
+      "default": "./dist/avatar-creator.mjs"
+    },
+    "./avatar-creator/styles": {
+      "types": "./types/avatar-creator-styles.d.ts",
+      "import": "./dist/avatar-creator/styles.mjs",
+      "default": "./dist/avatar-creator/styles.mjs"
+    },
+    "./avatar-creator/styles/humation": {
+      "import": "./dist/avatar-creator/styles/humation.mjs",
+      "default": "./dist/avatar-creator/styles/humation.mjs"
+    },
+    "./emo/miao/*": {
+      "types": "./types/emo-miao.d.ts",
+      "import": "./dist/emo/miao/*.mjs",
+      "default": "./dist/emo/miao/*.mjs"
+    },
+    "./vue3": {
+      "types": "./types/vue3.d.ts",
+      "import": "./dist/vue3.mjs",
+      "require": "./dist/vue3.cjs",
+      "default": "./dist/vue3.mjs"
+    },
+    "./vue2": {
+      "types": "./types/vue2.d.ts",
+      "import": "./dist/vue2.mjs",
+      "require": "./dist/vue2.cjs",
+      "default": "./dist/vue2.mjs"
+    },
+    "./style.css": "./styles/theme.css",
+    "./capsule/style.css": "./styles/capsule.css",
+    "./progress/style.css": "./styles/progress.css",
+    "./color/style.css": "./styles/color.css",
+    "./emo/style.css": "./styles/emo.css",
+    "./avatar-creator/style.css": "./styles/avatar-creator.css",
+    "./package.json": "./package.json"
+  },
+  "files": [
+    "dist",
+    "styles",
+    "types",
+    "README.md",
+    "EXTENDING.md",
+    "LICENSE",
+    "CHANGELOG.md",
+    "THIRD_PARTY_NOTICES.md"
+  ],
+  "peerDependencies": {
+    "vue": ">=2.7.0"
+  },
+  "peerDependenciesMeta": {
+    "vue": {
+      "optional": true
+    }
+  },
+  "sideEffects": [
+    "./styles/*.css"
+  ],
+  "scripts": {
+    "build": "node scripts/clean-dist.mjs && node scripts/generate-emo-assets.mjs && rollup -c && node scripts/copy-css.mjs",
+    "test": "node --test",
+    "serve": "node scripts/serve.mjs",
+    "demo:h5": "node scripts/serve.mjs",
+    "demo:vue3": "npm --prefix examples/vue3 run dev",
+    "demo:vue2": "npm --prefix examples/vue2 run dev",
+    "prepublishOnly": "npm run build && npm test"
+  },
+  "keywords": [
+    "capsule",
+    "progress",
+    "webgl",
+    "canvas",
+    "nebula",
+    "background",
+    "color",
+    "vue",
+    "vue2",
+    "vue3",
+    "h5",
+    "component",
+    "lottie",
+    "emotion",
+    "emoji",
+    "avatar",
+    "dicebear",
+    "humation"
+  ],
+  "license": "MIT",
+  "engines": {
+    "node": ">=18"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.26.0",
+    "@babel/preset-env": "^7.26.0",
+    "@rollup/plugin-babel": "^6.0.4",
+    "@rollup/plugin-commonjs": "^28.0.1",
+    "@rollup/plugin-node-resolve": "^15.3.0",
+    "@rollup/plugin-terser": "^0.4.4",
+    "intersection-observer": "^0.12.2",
+    "jsdom": "^24.1.0",
+    "pepjs": "^0.5.3",
+    "resize-observer-polyfill": "^1.5.1",
+    "rollup": "^4.24.0",
+    "vue": "^3.4.0"
+  },
+  "dependencies": {
+    "lottie-web": "^5.13.0"
+  }
+}

package/styles/avatar-creator.css

@@ -0,0 +1,38 @@
+.dlc-avatar-creator {
+  display: inline-block;
+  line-height: 0;
+  vertical-align: middle;
+}
+
+.dlc-avatar-creator svg {
+  display: block;
+  width: 100%;
+  height: 100%;
+  max-width: 100%;
+  max-height: 100%;
+}
+
+/* 画风模块按需加载期间的占位：不白屏，加载完成后被 SVG 替换 */
+.dlc-avatar-creator .dlc-avatar-poster {
+  display: block;
+  width: 100%;
+  height: 100%;
+  min-width: 48px;
+  min-height: 48px;
+  aspect-ratio: 1 / 1;
+  border-radius: 18%;
+  background: rgba(128, 128, 128, 0.16);
+  animation: dlc-avatar-poster-pulse 1.1s ease-in-out infinite;
+}
+
+@keyframes dlc-avatar-poster-pulse {
+  0%, 100% { opacity: 0.45; }
+  50% { opacity: 0.9; }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .dlc-avatar-creator .dlc-avatar-poster {
+    animation: none;
+    opacity: 0.55;
+  }
+}

package/styles/base.css

@@ -1,12 +1,12 @@
-/*
- * @5even7/dlc-ui — shared base styles.
- */
-
-.hj-capsule-root {
-  --hj-radius: 999px;
-  --hj-font: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI",
-    "PingFang SC", "Microsoft YaHei", sans-serif;
-  --hj-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
+/*
+ * @5even7/dlc-ui — shared base styles.
+ */
+
+.hj-capsule-root {
+  --hj-radius: 999px;
+  --hj-font: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI",
+    "PingFang SC", "Microsoft YaHei", sans-serif;
+  --hj-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
   --hj-bg: #faf8f2;
   --hj-ink: #20231f;
   --hj-muted: #77786f;
@@ -19,31 +19,31 @@
   --hj-copy-left: 30px;
   --hj-value-right: 30px;
   --hj-copy-max-width: 54%;
-
-  position: relative;
-  display: block;
-  overflow: hidden;
-  box-sizing: border-box;
-  border-radius: var(--hj-radius);
-  background: var(--hj-bg);
-  isolation: isolate;
-}
-
-.hj-capsule-root *,
-.hj-capsule-root *::before,
-.hj-capsule-root *::after {
-  box-sizing: border-box;
-}
-
+
+  position: relative;
+  display: block;
+  overflow: hidden;
+  box-sizing: border-box;
+  border-radius: var(--hj-radius);
+  background: var(--hj-bg);
+  isolation: isolate;
+}
+
+.hj-capsule-root *,
+.hj-capsule-root *::before,
+.hj-capsule-root *::after {
+  box-sizing: border-box;
+}
+
 .hj-capsule-canvas,
 .hj-progress-canvas {
-  position: absolute;
-  inset: 0;
-  z-index: 1;
-  display: block;
-  width: 100%;
-  height: 100%;
-  border-radius: inherit;
+  position: absolute;
+  inset: 0;
+  z-index: 1;
+  display: block;
+  width: 100%;
+  height: 100%;
+  border-radius: inherit;
   pointer-events: none;
 }
 

package/styles/color.css

@@ -1,18 +1,18 @@
-/* dlc-color: nebula background layer (same renderer as CosmicCapsule). */
-
-.dlc-color-layer {
-  position: absolute;
-  inset: 0;
-  z-index: var(--dlc-color-layer-z, -1);
-  overflow: hidden;
-  border-radius: inherit;
-  pointer-events: none;
-  background: var(--dlc-color-bg, transparent);
-  opacity: var(--dlc-color-opacity, 1);
-}
-
-.dlc-color-canvas {
-  display: block;
-  width: 100%;
-  height: 100%;
-}
+/* dlc-color: nebula background layer (same renderer as CosmicCapsule). */
+
+.dlc-color-layer {
+  position: absolute;
+  inset: 0;
+  z-index: var(--dlc-color-layer-z, -1);
+  overflow: hidden;
+  border-radius: inherit;
+  pointer-events: none;
+  background: var(--dlc-color-bg, transparent);
+  opacity: var(--dlc-color-opacity, 1);
+}
+
+.dlc-color-canvas {
+  display: block;
+  width: 100%;
+  height: 100%;
+}

package/styles/emo.css

@@ -1,89 +1,110 @@
-.dlc-emo-root {
-  position: relative;
-  display: inline-grid;
-  place-items: center;
-  box-sizing: border-box;
-  overflow: hidden;
-  flex: 0 0 auto;
-  vertical-align: middle;
-  background: var(--dlc-emo-background, transparent);
-  opacity: var(--dlc-emo-opacity, 1);
-}
-
-.dlc-emo-stage,
-.dlc-emo-stage > svg,
-.dlc-emo-stage > canvas {
-  display: block;
-  width: 100% !important;
-  height: 100% !important;
-}
-
-.dlc-emo-stage {
-  position: absolute;
-  inset: 0;
-}
-
-.dlc-emo-root[data-fit='cover'] .dlc-emo-stage,
-.dlc-emo-root[data-fit='fill'] .dlc-emo-stage {
-  overflow: hidden;
-}
-
-
-/* Grok SVG renderer */
-
-.dlc-grok {
-  display: block;
-  width: 100% !important;
-  height: 100% !important;
-  will-change: transform;
-}
-
-.dlc-grok__body {
-  fill: #2f86ed;
-}
-
-.dlc-grok__eye {
-  fill: #fffdf7;
-}
-
-.dlc-grok.act-bounce { animation: dlc-grok-bounce 0.85s ease; }
-.dlc-grok.act-tilt { animation: dlc-grok-tilt 0.8s ease; }
-.dlc-grok.act-scan .dlc-grok__eyes { animation: dlc-grok-scan 0.8s ease; }
-.dlc-grok.act-turn { animation: dlc-grok-turn 0.9s ease; }
-.dlc-grok.act-pulse { animation: dlc-grok-pulse 0.9s ease; }
-.dlc-grok.act-glitch { animation: dlc-grok-glitch 0.55s steps(2); }
-
-@keyframes dlc-grok-bounce {
-  0%, 100% { transform: translateY(0); }
-  40% { transform: translateY(-34px) scale(0.96, 1.04); }
-  65% { transform: translateY(4px) scale(1.05, 0.94); }
-}
-
-@keyframes dlc-grok-tilt {
-  35% { transform: rotate(-19deg) translate(-8px, 5px); }
-  70% { transform: rotate(8deg); }
-}
-
-@keyframes dlc-grok-scan {
-  0%, 100% { transform: translate(0); }
-  30% { transform: translate(-24px, 2px); }
-  70% { transform: translate(24px, -2px); }
-}
-
-@keyframes dlc-grok-turn {
-  0%, 100% { transform: rotateY(0); }
-  48% { transform: rotateY(180deg) scale(0.82); }
-}
-
-@keyframes dlc-grok-pulse {
-  0%, 100% { transform: scale(1); }
-  35% { transform: scale(1.08, 0.92); }
-  65% { transform: scale(0.94, 1.08); }
-}
-
-@keyframes dlc-grok-glitch {
-  0%, 100% { transform: translate(0); }
-  25% { transform: translate(-9px, 3px); filter: drop-shadow(8px 0 #ff9500); }
-  50% { transform: translate(10px, -3px); filter: drop-shadow(-8px 0 #79e2d0); }
-  75% { transform: translate(-4px, 1px); }
-}
+.dlc-emo-root {
+  position: relative;
+  display: inline-grid;
+  place-items: center;
+  box-sizing: border-box;
+  overflow: hidden;
+  flex: 0 0 auto;
+  vertical-align: middle;
+  background: var(--dlc-emo-background, transparent);
+  opacity: var(--dlc-emo-opacity, 1);
+}
+
+.dlc-emo-stage,
+.dlc-emo-stage > svg,
+.dlc-emo-stage > canvas {
+  display: block;
+  width: 100% !important;
+  height: 100% !important;
+}
+
+.dlc-emo-stage {
+  position: absolute;
+  inset: 0;
+}
+
+.dlc-emo-root[data-fit='cover'] .dlc-emo-stage,
+.dlc-emo-root[data-fit='fill'] .dlc-emo-stage {
+  overflow: hidden;
+}
+
+/* Miao 按需加载占位：动画数据 / 播放器 chunk 到达前先显示，避免白屏 */
+.dlc-emo-poster {
+  width: 100%;
+  height: 100%;
+  border-radius: 18%;
+  background: rgba(255, 255, 255, 0.07);
+  animation: dlc-emo-poster-pulse 1.1s ease-in-out infinite;
+}
+
+@keyframes dlc-emo-poster-pulse {
+  0%, 100% { opacity: 0.35; }
+  50% { opacity: 0.8; }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .dlc-emo-poster {
+    animation: none;
+    opacity: 0.4;
+  }
+}
+
+
+/* Grok SVG renderer */
+
+.dlc-grok {
+  display: block;
+  width: 100% !important;
+  height: 100% !important;
+  will-change: transform;
+}
+
+.dlc-grok__body {
+  fill: #2f86ed;
+}
+
+.dlc-grok__eye {
+  fill: #fffdf7;
+}
+
+.dlc-grok.act-bounce { animation: dlc-grok-bounce 0.85s ease; }
+.dlc-grok.act-tilt { animation: dlc-grok-tilt 0.8s ease; }
+.dlc-grok.act-scan .dlc-grok__eyes { animation: dlc-grok-scan 0.8s ease; }
+.dlc-grok.act-turn { animation: dlc-grok-turn 0.9s ease; }
+.dlc-grok.act-pulse { animation: dlc-grok-pulse 0.9s ease; }
+.dlc-grok.act-glitch { animation: dlc-grok-glitch 0.55s steps(2); }
+
+@keyframes dlc-grok-bounce {
+  0%, 100% { transform: translateY(0); }
+  40% { transform: translateY(-34px) scale(0.96, 1.04); }
+  65% { transform: translateY(4px) scale(1.05, 0.94); }
+}
+
+@keyframes dlc-grok-tilt {
+  35% { transform: rotate(-19deg) translate(-8px, 5px); }
+  70% { transform: rotate(8deg); }
+}
+
+@keyframes dlc-grok-scan {
+  0%, 100% { transform: translate(0); }
+  30% { transform: translate(-24px, 2px); }
+  70% { transform: translate(24px, -2px); }
+}
+
+@keyframes dlc-grok-turn {
+  0%, 100% { transform: rotateY(0); }
+  48% { transform: rotateY(180deg) scale(0.82); }
+}
+
+@keyframes dlc-grok-pulse {
+  0%, 100% { transform: scale(1); }
+  35% { transform: scale(1.08, 0.92); }
+  65% { transform: scale(0.94, 1.08); }
+}
+
+@keyframes dlc-grok-glitch {
+  0%, 100% { transform: translate(0); }
+  25% { transform: translate(-9px, 3px); filter: drop-shadow(8px 0 #ff9500); }
+  50% { transform: translate(10px, -3px); filter: drop-shadow(-8px 0 #79e2d0); }
+  75% { transform: translate(-4px, 1px); }
+}