@5even7/dlc-ui 0.2.14 → 0.2.16

package/package.json

@@ -1,135 +1,135 @@
-{
-  "name": "@5even7/dlc-ui",
-  "version": "0.2.14",
-  "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"
-  ],
-  "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.16",
+  "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"
+  ],
+  "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"
+  }
+}

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,32 +1,33 @@
-.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 {
-  overflow: hidden;
-}
-
-.dlc-emo-root[data-paused='true'] {
-  --dlc-emo-play-state: paused;
-}
+.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;
+}
+
+.dlc-emo-root[data-paused='true'] {
+  --dlc-emo-play-state: paused;
+}

package/styles/progress.css

@@ -1,96 +1,96 @@
-/* ---------- Progress capsule ---------- */
-
-.hj-progress-root {
-  --hj-bg: #202126;
-  border: 1px solid rgba(0, 0, 0, 0.34);
-  color: #ffffff;
-  box-shadow: var(--hj-shadow);
-  cursor: ew-resize;
-  touch-action: none;
-  user-select: none;
-}
-
-.hj-progress-root[data-draggable="false"] {
-  cursor: default;
-}
-
-.hj-progress-root.is-disabled {
-  cursor: default;
-  opacity: 0.55;
-}
-
-.hj-progress-root.is-disabled:focus-visible {
-  outline: none;
-}
-
-.hj-progress-root.is-readonly {
-  cursor: default;
-}
-
-.hj-progress-root:focus-visible {
-  outline: 2px solid rgba(255, 255, 255, 0.8);
-  outline-offset: 4px;
-}
-
-.hj-progress-canvas {
-  transition: filter 180ms ease, opacity 160ms ease;
-}
-
-.hj-progress-overlay {
-  z-index: 2;
-}
-
-.hj-progress-root[data-direction="rtl"] > .hj-progress-canvas {
-  transform: scaleX(-1);
-}
-
-.hj-progress-root.has-webgl-progress > .hj-progress-canvas:not(.hj-progress-overlay) {
-  opacity: 0;
-}
-
-.hj-progress-root.is-dragging .hj-progress-canvas {
-  filter: saturate(1.15) brightness(1.08);
-}
-
-/* Text slot container: geometry only (same convention as capsule). */
-.hj-progress-text {
-  position: absolute;
-  top: 50%;
-  left: var(--hj-text-left, var(--hj-copy-left, 30px));
-  z-index: 4;
-  width: var(--hj-text-width, var(--hj-copy-max-width, 54%));
-  background: var(--hj-text-bg, transparent);
-  padding: var(--hj-text-pad, 0);
-  border-radius: var(--hj-text-radius, 0);
-  overflow: hidden;
-  transform: translateY(-50%);
-  pointer-events: none;
-}
-
-/* Color slot container: region right of the text area. */
-.hj-progress-visual {
-  position: absolute;
-  top: 0;
-  bottom: 0;
-  left: var(--hj-text-width, var(--hj-copy-max-width, 54%));
-  right: 0;
-  z-index: 3;
-  pointer-events: none;
-}
-
-.hj-progress-value {
-  position: absolute;
-  top: 50%;
-  right: var(--hj-value-right);
-  z-index: 5;
-  min-width: 24%;
-  color: #ffffff;
-  font-size: 44px;
-  font-weight: 480;
-  line-height: 1;
-  text-align: right;
-  letter-spacing: -0.045em;
-  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.24);
-  transform: translateY(-50%);
-  pointer-events: none;
-}
+/* ---------- Progress capsule ---------- */
+
+.hj-progress-root {
+  --hj-bg: #202126;
+  border: 1px solid rgba(0, 0, 0, 0.34);
+  color: #ffffff;
+  box-shadow: var(--hj-shadow);
+  cursor: ew-resize;
+  touch-action: none;
+  user-select: none;
+}
+
+.hj-progress-root[data-draggable="false"] {
+  cursor: default;
+}
+
+.hj-progress-root.is-disabled {
+  cursor: default;
+  opacity: 0.55;
+}
+
+.hj-progress-root.is-disabled:focus-visible {
+  outline: none;
+}
+
+.hj-progress-root.is-readonly {
+  cursor: default;
+}
+
+.hj-progress-root:focus-visible {
+  outline: 2px solid rgba(255, 255, 255, 0.8);
+  outline-offset: 4px;
+}
+
+.hj-progress-canvas {
+  transition: filter 180ms ease, opacity 160ms ease;
+}
+
+.hj-progress-overlay {
+  z-index: 2;
+}
+
+.hj-progress-root[data-direction="rtl"] > .hj-progress-canvas {
+  transform: scaleX(-1);
+}
+
+.hj-progress-root.has-webgl-progress > .hj-progress-canvas:not(.hj-progress-overlay) {
+  opacity: 0;
+}
+
+.hj-progress-root.is-dragging .hj-progress-canvas {
+  filter: saturate(1.15) brightness(1.08);
+}
+
+/* Text slot container: geometry only (same convention as capsule). */
+.hj-progress-text {
+  position: absolute;
+  top: 50%;
+  left: var(--hj-text-left, var(--hj-copy-left, 30px));
+  z-index: 4;
+  width: var(--hj-text-width, var(--hj-copy-max-width, 54%));
+  background: var(--hj-text-bg, transparent);
+  padding: var(--hj-text-pad, 0);
+  border-radius: var(--hj-text-radius, 0);
+  overflow: hidden;
+  transform: translateY(-50%);
+  pointer-events: none;
+}
+
+/* Color slot container: region right of the text area. */
+.hj-progress-visual {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: var(--hj-text-width, var(--hj-copy-max-width, 54%));
+  right: 0;
+  z-index: 3;
+  pointer-events: none;
+}
+
+.hj-progress-value {
+  position: absolute;
+  top: 50%;
+  right: var(--hj-value-right);
+  z-index: 5;
+  min-width: 24%;
+  color: #ffffff;
+  font-size: 44px;
+  font-weight: 480;
+  line-height: 1;
+  text-align: right;
+  letter-spacing: -0.045em;
+  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.24);
+  transform: translateY(-50%);
+  pointer-events: none;
+}

package/types/capsule.d.ts

@@ -1,15 +1,15 @@
-export {
-  CapsuleOptions,
-  CapsuleController,
-  CapsulePreset,
-  Quality,
-  PowerPreference,
-  createCapsule,
-  parseSize,
-  dprCapFor,
-  effectiveDprCap,
-  QUALITY_TIERS,
-  hexToRgb01,
-  hexToRgba,
-  validateColors
-} from './index.js';
+export {
+  CapsuleOptions,
+  CapsuleController,
+  CapsulePreset,
+  Quality,
+  PowerPreference,
+  createCapsule,
+  parseSize,
+  dprCapFor,
+  effectiveDprCap,
+  QUALITY_TIERS,
+  hexToRgb01,
+  hexToRgba,
+  validateColors
+} from './index.js';