@5even7/dlc-ui 0.1.0 → 0.2.0

package/dist/vue3.mjs

@@ -114,50 +114,50 @@ const PALETTES$1 = {
  * Capsule 预置：仅星云材质 NC-01~NC-06（NC-07~09 aurora 已移除）。
  * 颜色引用公共色板，seed/speed 决定形态与流速。
  */
-const CAPSULE_PRESETS = [
-  { id: 'original', code: 'NC-01', name: 'ORIGINAL', group: 'warm', seed: 1.7, speed: 0.5, colors: [...PALETTES$1.original] },
-  { id: 'ocean', code: 'NC-02', name: 'OCEAN', group: 'cold', seed: 8.2, speed: 0.48, colors: [...PALETTES$1.ocean] },
-  { id: 'klein', code: 'NC-03', name: 'KLEIN', group: 'cold', seed: 14.1, speed: 0.49, colors: [...PALETTES$1.klein] },
-  { id: 'ultraviolet', code: 'NC-04', name: 'ULTRAVIOLET', group: 'cold', seed: 23.4, speed: 0.47, colors: [...PALETTES$1.ultraviolet] },
-  { id: 'chrome', code: 'NC-05', name: 'CHROME', group: 'cold', seed: 37.8, speed: 0.42, colors: [...PALETTES$1.chrome] },
-  { id: 'plus', code: 'NC-06', name: 'PLUS', group: 'warm', seed: 51.3, speed: 0.5, colors: [...PALETTES$1.plus] }
+const CAPSULE_PRESETS = [
+  { id: 'original', code: 'NC-01', name: '初光', group: 'warm', seed: 1.7, speed: 0.5, colors: [...PALETTES$1.original] },
+  { id: 'ocean', code: 'NC-02', name: '沧溟', group: 'cold', seed: 8.2, speed: 0.48, colors: [...PALETTES$1.ocean] },
+  { id: 'klein', code: 'NC-03', name: '玄夜', group: 'cold', seed: 14.1, speed: 0.49, colors: [...PALETTES$1.klein] },
+  { id: 'ultraviolet', code: 'NC-04', name: '紫霄', group: 'cold', seed: 23.4, speed: 0.47, colors: [...PALETTES$1.ultraviolet] },
+  { id: 'chrome', code: 'NC-05', name: '银汉', group: 'cold', seed: 37.8, speed: 0.42, colors: [...PALETTES$1.chrome] },
+  { id: 'plus', code: 'NC-06', name: '熔金', group: 'warm', seed: 51.3, speed: 0.5, colors: [...PALETTES$1.plus] }
 ];
 
 const PROGRESS_PRESETS = [
-  {
-    id: 'model-training',
-    code: 'NC-10',
-    name: 'MODEL TRAINING',
+  {
+    id: 'model-training',
+    code: 'NC-10',
+    name: '星火',
     subtitle: 'SHA 4.5 + 100 2026 TKN',
     group: 'progress',
     initialProgress: 43,
     edgeStyle: 'flow',
     colors: ['#2B1025', '#FF3F94', '#FF8A3D', '#FFF06A']
   },
-  {
-    id: 'agent-migration',
-    code: 'NC-11',
-    name: 'AGENT MIGRATION',
+  {
+    id: 'agent-migration',
+    code: 'NC-11',
+    name: '迁流',
     subtitle: 'TRANSFERRING PROTOCOL',
     group: 'progress',
     initialProgress: 33,
     edgeStyle: 'flow',
     colors: ['#101C37', '#245BFF', '#00CFFF', '#5DFFE6']
   },
-  {
-    id: 'visual-training',
-    code: 'NC-12',
-    name: 'VISUAL TRAINING',
+  {
+    id: 'visual-training',
+    code: 'NC-12',
+    name: '幻境',
     subtitle: 'GENERATING POWER ++',
     group: 'progress',
     initialProgress: 58,
     edgeStyle: 'flow',
     colors: ['#21142D', '#7042FF', '#42F58D', '#C4FF8A']
   },
-  {
-    id: 'tide',
-    code: 'NC-13',
-    name: 'TIDE',
+  {
+    id: 'tide',
+    code: 'NC-13',
+    name: '汐潮',
     subtitle: 'MOON PULL / COAST',
     group: 'progress',
     initialProgress: 30,
@@ -166,64 +166,33 @@ const PROGRESS_PRESETS = [
   }
 ];
 
-[...CAPSULE_PRESETS, ...PROGRESS_PRESETS];
-
-function validatePreset(preset) {
-  return Boolean(
-    preset &&
-    typeof preset.id === 'string' &&
-    typeof preset.code === 'string' &&
-    typeof preset.name === 'string' &&
-    Number.isFinite(preset.seed) &&
-    Number.isFinite(preset.speed) &&
-    Array.isArray(preset.colors) &&
-    preset.colors.length === 4
-  );
-}
-
-function validateProgressPreset(preset) {
-  return Boolean(
-    preset &&
-    typeof preset.id === 'string' &&
-    typeof preset.code === 'string' &&
-    typeof preset.name === 'string' &&
-    preset.group === 'progress' &&
-    Number.isFinite(preset.initialProgress) &&
-    ['flow', 'tide'].indexOf(preset.edgeStyle || 'flow') !== -1 &&
-    Array.isArray(preset.colors) &&
-    preset.colors.length === 4
-  );
-}
-
-function getPreset(kind, ref) {
-  const list = kind === 'capsule' ? CAPSULE_PRESETS : kind === 'progress' ? PROGRESS_PRESETS : null;
-  if (!list) throw new Error(`Unknown preset kind: ${kind} (use "capsule" or "progress")`);
-  if (ref && typeof ref === 'object') {
-    const valid = kind === 'capsule' ? validatePreset(ref) : validateProgressPreset(ref);
-    if (!valid) throw new Error(`Invalid ${kind} preset object`);
-    return ref;
-  }
-  const key = String(ref).trim().toLowerCase();
-  const found = list.find(
-    (preset) =>
-      preset.id.toLowerCase() === key ||
-      preset.code.toLowerCase() === key ||
-      preset.name.toLowerCase() === key
-  );
-  if (!found) throw new Error(`Unknown ${kind} preset: ${ref}`);
-  return found;
+[...CAPSULE_PRESETS, ...PROGRESS_PRESETS];
+
+/**
+ * Resolve a preset by its literary name (e.g. '沧溟').
+ * Matching is case-insensitive and ignores surrounding whitespace,
+ * so '沧溟' and ' 沧溟 ' both work.
+ */
+function getPreset(kind, ref) {
+  const list = kind === 'capsule' ? CAPSULE_PRESETS : kind === 'progress' ? PROGRESS_PRESETS : null;
+  if (!list) throw new Error(`Unknown preset kind: ${kind} (use "capsule" or "progress")`);
+  const key = String(ref).trim().toLowerCase();
+  const found = list.find(
+    (preset) => preset.name.toLowerCase() === key
+  );
+  if (!found) throw new Error(`Unknown ${kind} preset: ${ref}`);
+  return found;
 }
 
 const DEFAULTS = {
   capsule: {
     width: '100%',
     height: 160,
-    quality: 'auto',
-    renderer: 'auto',
-    respectReducedMotion: true,
-    interactive: true,
-    mouseColor: true,
-    showCopy: true
+    quality: 'auto',
+    renderer: 'auto',
+    respectReducedMotion: true,
+    mouseColor: true,
+    showCopy: true
   },
   progress: {
     width: 454,
@@ -725,15 +694,15 @@ function prefersReducedMotion$1() {
  * Mount a cosmic (nebula) capsule into `container`.
  *
  * Options: preset (id/code/name or object), width, height (number=px or
- * string with px/%/vw/vh/em/rem), colors, seed, speed, quality, interactive,
- * respectReducedMotion, copy, cssVars.
+ * string with px/%/vw/vh/em/rem), colors, seed, speed, quality,
+ * respectReducedMotion, copy, cssVars.
  */
 function createCapsule(container, options = {}) {
   if (!container || typeof container.appendChild !== 'function') {
     throw new Error('createCapsule: container element is required');
   }
 
-  const preset = { ...getPreset('capsule', options.preset ?? 'NC-01') };
+  const preset = { ...getPreset('capsule', options.preset ?? '初光') };
   const merged = normalizeOptions(DEFAULTS.capsule, preset, options);
   const copy = { ...COPY, ...(merged.copy || {}) };
 
@@ -820,10 +789,8 @@ function createCapsule(container, options = {}) {
 
   const visibility = createVisibilityGuard(root);
 
-  if (merged.interactive !== false) {
-    root.addEventListener('pointerenter', () => emitter.emit('pointerenter', { preset: { ...preset } }));
-    root.addEventListener('pointerleave', () => emitter.emit('pointerleave', { preset: { ...preset } }));
-  }
+  root.addEventListener('pointerenter', () => emitter.emit('pointerenter', { preset: { ...preset } }));
+  root.addEventListener('pointerleave', () => emitter.emit('pointerleave', { preset: { ...preset } }));
   root.addEventListener('click', (event) => {
     emitter.emit('click', { event, preset: { ...preset } });
   });
@@ -863,12 +830,26 @@ function createCapsule(container, options = {}) {
       emitter.emit('presetchange', { preset: { ...next } });
       return this;
     },
-    setColors(colors) {
-      if (!Array.isArray(colors) || colors.length !== 4) return this;
-      preset.colors = colors;
-      renderer.setPreset({ ...preset, colors });
-      return this;
-    },
+    setColors(colors) {
+      if (!Array.isArray(colors) || colors.length !== 4) return this;
+      preset.colors = colors;
+      renderer.setPreset({ ...preset, colors });
+      return this;
+    },
+    setSeed(seed) {
+      const value = Number(seed);
+      if (!Number.isFinite(value)) return this;
+      preset.seed = value;
+      renderer.setPreset({ ...preset });
+      return this;
+    },
+    setSpeed(speed) {
+      const value = Number(speed);
+      if (!Number.isFinite(value)) return this;
+      preset.speed = value;
+      renderer.setPreset({ ...preset });
+      return this;
+    },
     setSize(width, height) {
       if (width !== undefined) merged.width = width;
       if (height !== undefined) merged.height = height;
@@ -2053,7 +2034,7 @@ function createProgressCapsule(container, options = {}) {
     throw new Error('createProgressCapsule: container element is required');
   }
 
-  const preset = { ...getPreset('progress', options.preset ?? 'NC-10') };
+  const preset = { ...getPreset('progress', options.preset ?? '星火') };
   const merged = normalizeOptions(DEFAULTS.progress, preset, options);
   const copy = { ...COPY, ...(merged.copy || {}) };
 
@@ -2192,9 +2173,9 @@ function createProgressCapsule(container, options = {}) {
       controller.setRange(min, max);
       return this;
     },
-    setPreset(ref) {
-      const next = getPreset('progress', ref);
-      Object.assign(preset, next);
+    setPreset(ref) {
+      const next = getPreset('progress', ref);
+      Object.assign(preset, next);
       controller.preset = next;
       controller.profile = next.edgeStyle === 'tide'
         ? FLOW_PROFILES.tide
@@ -2208,10 +2189,25 @@ function createProgressCapsule(container, options = {}) {
       }
       controller.webglActive = Boolean(overlay);
       controller.resizeCanvas();
-      emitter.emit('presetchange', { preset: { ...next } });
-      return this;
-    },
-    setColors(colors) {
+      emitter.emit('presetchange', { preset: { ...next } });
+      return this;
+    },
+    setEdgeStyle(edgeStyle) {
+      const value = String(edgeStyle || '').toLowerCase();
+      if (value !== 'flow' && value !== 'tide') return this;
+      preset.edgeStyle = value;
+      controller.profile = value === 'tide'
+        ? FLOW_PROFILES.tide
+        : (FLOW_PROFILES[preset.id] || FLOW_PROFILES['visual-training']);
+      if (overlay) {
+        overlay.dispose();
+        overlay = attachProgressFlowOverlay({ root, canvas, preset, getProgress: () => controller.value });
+      }
+      controller.webglActive = Boolean(overlay);
+      controller.resizeCanvas();
+      return this;
+    },
+    setColors(colors) {
       if (!Array.isArray(colors) || colors.length !== 4) return this;
       controller.setColors(colors);
       if (overlay) overlay.setColors(colors);
@@ -2321,32 +2317,29 @@ function makeWrapper({ name, props, events, create, render, methods, watch }) {
 function makeCapsuleWrapper(createCapsule, render) {
   return makeWrapper({
     name: 'CosmicCapsule',
-    props: [
-      'preset', 'width', 'height', 'colors', 'seed', 'speed', 'interactive',
-      'mouseColor', 'renderer', 'quality', 'respectReducedMotion', 'copy', 'cssVars'
+    props: [
+      'preset', 'width', 'height', 'colors', 'seed', 'speed',
+      'mouseColor', 'renderer', 'quality', 'respectReducedMotion', 'copy', 'cssVars'
     ],
     events: CAPSULE_EVENTS,
     create: createCapsule,
     render,
     watch: {
-      seed(value) {
-        const seed = Number(value);
-        if (this.controller && Number.isFinite(seed)) {
-          this.controller.setPreset({ ...this.controller.preset, seed });
-        }
-      },
-      speed(value) {
-        const speed = Number(value);
-        if (this.controller && Number.isFinite(speed)) {
-          this.controller.setPreset({ ...this.controller.preset, speed });
-        }
-      },
-                  interactive() {
-        this.scheduleRecreate();
-      },
-      mouseColor() {
-        this.scheduleRecreate();
-      },
+      seed(value) {
+        const seed = Number(value);
+        if (this.controller && Number.isFinite(seed)) {
+          this.controller.setSeed(seed);
+        }
+      },
+      speed(value) {
+        const speed = Number(value);
+        if (this.controller && Number.isFinite(speed)) {
+          this.controller.setSpeed(speed);
+        }
+      },
+      mouseColor() {
+        this.scheduleRecreate();
+      },
       renderer() {
         this.scheduleRecreate();
       }
@@ -2385,9 +2378,9 @@ function makeProgressWrapper(createProgressCapsule, render) {
       max(value) {
         if (value !== undefined && this.controller) this.controller.setRange(this.controller.min, value);
       },
-      edgeStyle(value) {
-        if (value && this.controller) this.controller.setPreset({ ...this.controller.preset, edgeStyle: value });
-      },
+      edgeStyle(value) {
+        if (value && this.controller) this.controller.setEdgeStyle(value);
+      },
       draggable() {
         this.scheduleRecreate();
       },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@5even7/dlc-ui",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "publishConfig": {
     "access": "public"
   },

package/types/index.d.ts

@@ -40,15 +40,15 @@ export interface Copy {
   color?: string;
 }
 
-export interface CapsuleOptions {
-  preset?: string | CapsulePreset;
+export interface CapsuleOptions {
+  preset?: string;
   width?: number | string;
   height?: number | string;
-  colors?: string[];
-  seed?: number;
-  speed?: number;
-  interactive?: boolean;
-  renderer?: 'auto' | 'webgl2' | 'canvas2d';
+  colors?: string[];
+  seed?: number;
+  speed?: number;
+  mouseColor?: boolean;
+  renderer?: 'auto' | 'webgl2' | 'canvas2d';
   showCopy?: boolean;
   quality?: Quality;
   respectReducedMotion?: boolean;
@@ -57,8 +57,8 @@ export interface CapsuleOptions {
   [key: string]: unknown;
 }
 
-export interface ProgressOptions {
-  preset?: string | ProgressPreset;
+export interface ProgressOptions {
+  preset?: string;
   width?: number | string;
   height?: number | string;
   value?: number;
@@ -77,8 +77,8 @@ export interface ProgressOptions {
   [key: string]: unknown;
 }
 
-export interface ColorBackgroundOptions {
-  preset?: string | CapsulePreset;
+export interface ColorBackgroundOptions {
+  preset?: string;
   colors?: string[];
   seed?: number;
   speed?: number;
@@ -98,10 +98,12 @@ export interface Emitter {
 
 export interface CapsuleController extends Emitter {
   element: HTMLElement;
-  canvas: HTMLCanvasElement;
-  preset: CapsulePreset;
-  setPreset(ref: string | CapsulePreset): this;
-  setColors(colors: string[]): this;
+  canvas: HTMLCanvasElement;
+  preset: CapsulePreset;
+  setPreset(ref: string): this;
+  setColors(colors: string[]): this;
+  setSeed(seed: number): this;
+  setSpeed(speed: number): this;
   setSize(width?: number | string, height?: number | string): this;
   randomize(): this;
   pause(): this;
@@ -110,18 +112,19 @@ export interface CapsuleController extends Emitter {
   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;
+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): this;
+  setColors(colors: string[]): this;
+  setEdgeStyle(style: 'flow' | 'tide'): this;
+  setSize(width?: number | string, height?: number | string): this;
+  randomize(): this;
+  pause(): this;
   resume(): this;
   setQuality(quality: Quality): this;
   dispose(): void;
@@ -132,7 +135,7 @@ export interface ColorBackgroundController extends Emitter {
   layer: HTMLElement;
   canvas: HTMLCanvasElement;
   preset: CapsulePreset;
-  setPreset(ref: string | CapsulePreset): this;
+  setPreset(ref: string): this;
   setColors(colors: string[]): this;
   setQuality(quality: Quality): this;
   setOpacity(value: number): this;
@@ -156,15 +159,13 @@ export declare function createCapsule(container: HTMLElement, options?: CapsuleO
 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 PRESETS: CapsulePreset[];
+export declare const PROGRESS_PRESETS: ProgressPreset[];
+export declare const ALL_PRESETS: Array<CapsulePreset | ProgressPreset>;
+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'>>;
+export declare const DEFAULTS: {
+  capsule: Required<Pick<CapsuleOptions, 'width' | 'height' | 'quality' | 'respectReducedMotion' | 'mouseColor' | 'renderer' | 'showCopy'>>;
   progress: Required<Pick<ProgressOptions, 'width' | 'height' | 'min' | 'max' | 'draggable' | 'keyboard' | 'edgeStyle' | 'quality' | 'respectReducedMotion' | 'renderer' | 'showCopy'>>;
 };