@5even7/dlc-ui 0.1.0

package/package.json

@@ -0,0 +1,121 @@
+{
+  "name": "@5even7/dlc-ui",
+  "version": "0.1.0",
+  "publishConfig": {
+    "access": "public"
+  },
+  "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 tests/",
+    "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

@@ -0,0 +1,54 @@
+/*
+ * @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;
+  --hj-copy-width: 39%;
+  --hj-copy-min-width: 164px;
+  --hj-copy-pad-x: 24px;
+  --hj-copy-gradient: linear-gradient(
+    90deg,
+    #faf8f2 0%,
+    #faf8f2 74%,
+    rgba(250, 248, 242, 0.97) 84%,
+    rgba(250, 248, 242, 0) 100%
+  );
+  --hj-shadow: 0 16px 42px rgba(32, 35, 31, 0.08), 0 3px 10px rgba(32, 35, 31, 0.04);
+  --hj-name-size: 20px;
+  --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;
+}
+
+.hj-capsule-canvas,
+.hj-progress-canvas {
+  position: absolute;
+  inset: 0;
+  z-index: 1;
+  display: block;
+  width: 100%;
+  height: 100%;
+  border-radius: inherit;
+  pointer-events: none;
+}

package/styles/capsule.css

@@ -0,0 +1,81 @@
+/* ---------- Cosmic capsule copy layer ---------- */
+
+.hj-capsule-copy {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  z-index: 4;
+  display: flex;
+  width: var(--hj-copy-width);
+  min-width: var(--hj-copy-min-width);
+  flex-direction: column;
+  justify-content: center;
+  padding: 16px 12px 16px var(--hj-copy-pad-x);
+  color: var(--hj-copy-color, var(--hj-ink));
+  background: var(--hj-copy-bg, var(--hj-copy-gradient));
+  pointer-events: none;
+}
+
+.hj-capsule-code {
+  margin-bottom: 8px;
+  color: var(--hj-muted);
+  font-family: var(--hj-mono);
+  font-size: 9px;
+  letter-spacing: 0.16em;
+  text-transform: uppercase;
+}
+
+.hj-capsule-name {
+  display: block;
+  font-size: var(--hj-name-size);
+  font-weight: 650;
+  line-height: 1;
+  letter-spacing: 0.04em;
+  white-space: nowrap;
+}
+
+.hj-capsule-brand {
+  display: block;
+  margin-top: 10px;
+  font-size: 12px;
+  font-weight: 520;
+}
+
+.hj-capsule-state {
+  display: block;
+  margin-top: 5px;
+  color: #9d7a35;
+  font-family: var(--hj-mono);
+  font-size: 7px;
+  letter-spacing: 0.14em;
+  line-height: 1.4;
+  text-transform: uppercase;
+}
+
+.hj-capsule-root[data-theme="dark"] {
+  border: 0;
+  background: #202126;
+  box-shadow: none;
+}
+
+.hj-capsule-root[data-theme="dark"] .hj-capsule-copy {
+  color: #ffffff;
+  --hj-copy-gradient: linear-gradient(
+    90deg,
+    #202126 0%,
+    #202126 72%,
+    rgba(32, 33, 38, 0.98) 84%,
+    rgba(32, 33, 38, 0) 100%
+  );
+  background: var(--hj-copy-gradient);
+}
+
+.hj-capsule-root[data-theme="dark"] .hj-capsule-code,
+.hj-capsule-root[data-theme="dark"] .hj-capsule-brand {
+  color: rgba(255, 255, 255, 0.72);
+}
+
+.hj-capsule-root[data-theme="dark"] .hj-capsule-state {
+  color: #6be7dc;
+}

package/styles/color.css

@@ -0,0 +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%;
+}

package/styles/progress.css

@@ -0,0 +1,107 @@
+/* ---------- 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: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);
+}
+
+.hj-progress-copy {
+  position: absolute;
+  top: 50%;
+  left: var(--hj-copy-left);
+  z-index: 4;
+  display: flex;
+  max-width: var(--hj-copy-max-width);
+  flex-direction: column;
+  gap: 5px;
+  padding: var(--hj-progress-copy-pad, 0);
+  border-radius: 8px;
+  background: var(--hj-progress-copy-bg, transparent);
+  color: var(--hj-progress-copy-color, #ffffff);
+  transform: translateY(-50%);
+  pointer-events: none;
+}
+
+.hj-progress-name {
+  font-family: var(--hj-font);
+  font-size: 20px;
+  font-weight: 650;
+  line-height: 1;
+  letter-spacing: 0.10em;
+  white-space: nowrap;
+}
+
+.hj-progress-subtitle {
+  color: rgba(255, 255, 255, 0.42);
+  font-size: 8px;
+  font-weight: 600;
+  letter-spacing: 0.08em;
+  white-space: nowrap;
+}
+
+.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-drag-label {
+  position: absolute;
+  right: 32px;
+  bottom: 11px;
+  z-index: 5;
+  color: rgba(255, 255, 255, 0.28);
+  font-family: var(--hj-mono);
+  font-size: 7px;
+  letter-spacing: 0.18em;
+  opacity: 0;
+  transition: opacity 160ms ease;
+  pointer-events: none;
+}
+
+.hj-progress-root:hover .hj-progress-drag-label,
+.hj-progress-root:focus-visible .hj-progress-drag-label,
+.hj-progress-root.is-dragging .hj-progress-drag-label {
+  opacity: 1;
+}

package/styles/theme.css

@@ -0,0 +1,4 @@
+@import './base.css';
+@import './capsule.css';
+@import './progress.css';
+@import './color.css';

package/types/capsule.d.ts

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

package/types/color.d.ts

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

package/types/index.d.ts

@@ -0,0 +1,204 @@
+export type Quality = 'auto' | 'low' | 'medium' | 'high';
+export type ColorTuple = [string, string, string, string];
+
+export interface CapsulePreset {
+  id: string;
+  code: string;
+  name: string;
+  group: 'warm' | 'cold';
+  theme?: 'light' | 'dark';
+  subtitle?: string;
+  seed: number;
+  speed: number;
+  colors: ColorTuple;
+}
+
+export interface ProgressPreset {
+  id: string;
+  code: string;
+  name: string;
+  group: 'progress';
+  subtitle?: string;
+  initialProgress: number;
+  loadRate: number;
+  edgeStyle: 'flow' | 'tide';
+  colors: ColorTuple;
+}
+
+export interface Copy {
+  brandName: string;
+  dragLabel: string;
+  valueSuffix: string;
+  progressAria: string;
+  capsuleAria: string;
+  enabled?: boolean;
+  code?: string;
+  name?: string;
+  subtitle?: string;
+  state?: string;
+  background?: string;
+  color?: string;
+}
+
+export interface CapsuleOptions {
+  preset?: string | CapsulePreset;
+  width?: number | string;
+  height?: number | string;
+  colors?: string[];
+  seed?: number;
+  speed?: number;
+  interactive?: boolean;
+  renderer?: 'auto' | 'webgl2' | 'canvas2d';
+  showCopy?: boolean;
+  quality?: Quality;
+  respectReducedMotion?: boolean;
+  copy?: Partial<Copy>;
+  cssVars?: Record<string, string>;
+  [key: string]: unknown;
+}
+
+export interface ProgressOptions {
+  preset?: string | ProgressPreset;
+  width?: number | string;
+  height?: number | string;
+  value?: number;
+  min?: number;
+  max?: number;
+  draggable?: boolean;
+  keyboard?: boolean;
+  edgeStyle?: 'flow' | 'tide';
+  colors?: string[];
+  renderer?: 'auto' | 'webgl2' | 'canvas2d';
+  showCopy?: boolean;
+  quality?: Quality;
+  respectReducedMotion?: boolean;
+  copy?: Partial<Copy>;
+  cssVars?: Record<string, string>;
+  [key: string]: unknown;
+}
+
+export interface ColorBackgroundOptions {
+  preset?: string | CapsulePreset;
+  colors?: string[];
+  seed?: number;
+  speed?: number;
+  renderer?: 'auto' | 'webgl2' | 'canvas2d';
+  quality?: Quality;
+  mouseColor?: boolean;
+  respectReducedMotion?: boolean;
+  opacity?: number;
+  fallbackColor?: boolean | string;
+  [key: string]: unknown;
+}
+
+export interface Emitter {
+  on(event: string, handler: (...args: any[]) => void): () => void;
+  off(event: string, handler: (...args: any[]) => void): boolean;
+}
+
+export interface CapsuleController extends Emitter {
+  element: HTMLElement;
+  canvas: HTMLCanvasElement;
+  preset: CapsulePreset;
+  setPreset(ref: string | CapsulePreset): this;
+  setColors(colors: string[]): this;
+  setSize(width?: number | string, height?: number | string): this;
+  randomize(): this;
+  pause(): this;
+  resume(): this;
+  setQuality(quality: Quality): this;
+  dispose(): void;
+}
+
+export interface ProgressController extends Emitter {
+  element: HTMLElement;
+  canvas: HTMLCanvasElement;
+  preset: ProgressPreset;
+  setValue(value: number, source?: string): this;
+  getValue(): number;
+  setRange(min: number, max: number): this;
+  setPreset(ref: string | ProgressPreset): this;
+  setColors(colors: string[]): this;
+  setSize(width?: number | string, height?: number | string): this;
+  randomize(): this;
+  pause(): this;
+  resume(): this;
+  setQuality(quality: Quality): this;
+  dispose(): void;
+}
+
+export interface ColorBackgroundController extends Emitter {
+  element: HTMLElement;
+  layer: HTMLElement;
+  canvas: HTMLCanvasElement;
+  preset: CapsulePreset;
+  setPreset(ref: string | CapsulePreset): this;
+  setColors(colors: string[]): this;
+  setQuality(quality: Quality): this;
+  setOpacity(value: number): this;
+  randomize(): this;
+  pause(): this;
+  resume(): this;
+  dispose(): void;
+}
+
+export declare class ProgressCapsuleController {
+  value: number;
+  webglActive: boolean;
+  setProgress(nextValue: number, source?: string): void;
+  update(delta: number, paused: boolean, now: number): void;
+  draw(): void;
+  randomize(): void;
+  dispose(): void;
+}
+
+export declare function createCapsule(container: HTMLElement, options?: CapsuleOptions): CapsuleController;
+export declare function createProgressCapsule(container: HTMLElement, options?: ProgressOptions): ProgressController;
+export declare function createColorBackground(host: HTMLElement, options?: ColorBackgroundOptions): ColorBackgroundController;
+
+export declare const PRESETS: CapsulePreset[];
+export declare const PROGRESS_PRESETS: ProgressPreset[];
+export declare const ALL_PRESETS: Array<CapsulePreset | ProgressPreset>;
+export declare function validatePreset(preset: CapsulePreset): boolean;
+export declare function validateProgressPreset(preset: ProgressPreset): boolean;
+export declare function getPreset(kind: 'capsule' | 'progress', ref: string): CapsulePreset | ProgressPreset;
+
+export declare const DEFAULTS: {
+  capsule: Required<Pick<CapsuleOptions, 'width' | 'height' | 'quality' | 'respectReducedMotion' | 'interactive' | 'mouseColor' | 'renderer' | 'showCopy'>>;
+  progress: Required<Pick<ProgressOptions, 'width' | 'height' | 'min' | 'max' | 'draggable' | 'keyboard' | 'edgeStyle' | 'quality' | 'respectReducedMotion' | 'renderer' | 'showCopy'>>;
+};
+
+export declare const COPY: Copy;
+export declare function parseSize(value: number | string): string;
+export declare const QUALITY_TIERS: Record<'low' | 'medium' | 'high', { dpr: number }>;
+export declare function dprCapFor(quality: Quality): number;
+export declare function pauseAll(): void;
+export declare function resumeAll(): void;
+export declare function hexToRgb01(hex: string): [number, number, number];
+export declare function hexToRgba(hex: string, alpha?: number): string;
+export declare function validateColors(colors: unknown): boolean;
+
+export declare class CosmicRenderer {
+  constructor(canvas: HTMLCanvasElement, preset: CapsulePreset, options?: { dprCap?: number });
+  draw(elapsedSeconds: number, paused?: boolean): void;
+  setPreset(preset: CapsulePreset): void;
+  setDprCap(cap: number): void;
+  randomize(): void;
+  resize(): void;
+  dispose(): void;
+}
+
+export declare class FallbackRenderer {
+  constructor(canvas: HTMLCanvasElement, preset: CapsulePreset);
+  draw(elapsedSeconds: number): void;
+  setPreset(preset: CapsulePreset): void;
+  resize(): void;
+  dispose(): void;
+}
+
+export declare class ProgressFlowRenderer {
+  constructor(canvas: HTMLCanvasElement, preset: ProgressPreset);
+  draw(time: number, progress: number, effectImage?: HTMLImageElement | null): void;
+  resize(width: number, height: number, dpr: number): void;
+  dispose(): void;
+}

package/types/progress.d.ts

@@ -0,0 +1,14 @@
+export {
+  ProgressOptions,
+  ProgressController,
+  ProgressPreset,
+  ProgressCapsuleController,
+  Quality,
+  createProgressCapsule,
+  parseSize,
+  dprCapFor,
+  QUALITY_TIERS,
+  hexToRgb01,
+  hexToRgba,
+  validateColors
+} from './index.js';

package/types/vue2.d.ts

@@ -0,0 +1 @@
+export { CosmicCapsule, ProgressCapsule, default } from './vue3.js';

package/types/vue3.d.ts

@@ -0,0 +1,47 @@
+import { CapsuleOptions, ProgressOptions } from './index.js';
+
+export interface CosmicCapsuleComponent {
+  name: 'CosmicCapsule';
+  props: (keyof CapsuleOptions)[];
+  emits: string[];
+  mounted: () => void;
+  beforeUnmount: () => void;
+  render: (h: Function) => any;
+  methods: {
+    randomize(): any;
+    pause(): any;
+    resume(): any;
+    setPreset(preset: CapsuleOptions['preset']): any;
+    setSize(width?: number | string, height?: number | string): any;
+    setColors(colors: string[]): any;
+    setQuality(quality: CapsuleOptions['quality']): any;
+    getController(): any;
+  };
+}
+
+export interface ProgressCapsuleComponent {
+  name: 'ProgressCapsule';
+  props: (keyof ProgressOptions)[];
+  emits: string[];
+  mounted: () => void;
+  beforeUnmount: () => void;
+  render: (h: Function) => any;
+  methods: {
+    setValue(value: number): any;
+    getValue(): number | undefined;
+    setRange(min: number, max: number): any;
+    randomize(): any;
+    pause(): any;
+    resume(): any;
+    setPreset(preset: ProgressOptions['preset']): any;
+    setSize(width?: number | string, height?: number | string): any;
+    setColors(colors: string[]): any;
+    setQuality(quality: ProgressOptions['quality']): any;
+    getController(): any;
+  };
+}
+
+export declare const CosmicCapsule: CosmicCapsuleComponent;
+export declare const ProgressCapsule: ProgressCapsuleComponent;
+declare const _default: { CosmicCapsule: CosmicCapsuleComponent; ProgressCapsule: ProgressCapsuleComponent };
+export default _default;