@5even7/dlc-ui 0.2.11 → 0.2.13

package/package.json

@@ -1,122 +1,122 @@
-{
-  "name": "@5even7/dlc-ui",
-  "version": "0.2.11",
+{
+  "name": "@5even7/dlc-ui",
+  "version": "0.2.13",
   "publishConfig": {
     "access": "public",
     "registry": "https://registry.npmjs.org"
   },
-  "description": "DLC 星云胶囊组件（WebGL2 实时渲染，Canvas2D 自动降级），供 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"
-    },
-    "./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",
-    "./package.json": "./package.json"
-  },
-  "files": [
-    "dist",
-    "styles",
-    "types",
-    "README.md",
-    "LICENSE",
-    "CHANGELOG.md"
-  ],
-  "peerDependencies": {
-    "vue": ">=2.7.0"
-  },
-  "peerDependenciesMeta": {
-    "vue": {
-      "optional": true
-    }
-  },
-  "sideEffects": [
-    "./styles/theme.css"
-  ],
-  "scripts": {
-    "build": "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"
-  ],
-  "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"
-  }
-}
+  "description": "DLC 星云胶囊组件（WebGL2 实时渲染，Canvas2D 自动降级），供 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"
+    },
+    "./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",
+    "./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": "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"
+  ],
+  "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"
+  }
+}

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/progress.css

@@ -1,15 +1,15 @@
-/* ---------- 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;
-}
-
+/* ---------- 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;
 }
@@ -28,26 +28,30 @@
 }
 
 .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.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);
-}
-
+  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;
@@ -73,21 +77,20 @@
   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;
-}
-
+
+.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,13 +1,15 @@
-export {
-  CapsuleOptions,
-  CapsuleController,
-  CapsulePreset,
-  Quality,
-  createCapsule,
-  parseSize,
-  dprCapFor,
-  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';

package/types/color.d.ts

@@ -1,13 +1,15 @@
-export {
-  ColorBackgroundOptions,
-  ColorBackgroundController,
-  CapsulePreset,
-  Quality,
-  createColorBackground,
-  parseSize,
-  dprCapFor,
-  QUALITY_TIERS,
-  hexToRgb01,
-  hexToRgba,
-  validateColors
-} from './index.js';
+export {
+  ColorBackgroundOptions,
+  ColorBackgroundController,
+  CapsulePreset,
+  Quality,
+  PowerPreference,
+  createColorBackground,
+  parseSize,
+  dprCapFor,
+  effectiveDprCap,
+  QUALITY_TIERS,
+  hexToRgb01,
+  hexToRgba,
+  validateColors
+} from './index.js';