@5even7/dlc-ui 0.2.11 → 0.2.13

package/types/index.d.ts

@@ -1,18 +1,19 @@
-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 type Quality = 'auto' | 'low' | 'medium' | 'high';
+export type PowerPreference = 'default' | 'high-performance' | 'low-power';
+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;
@@ -23,7 +24,7 @@ export interface ProgressPreset {
   edgeStyle: 'flow' | 'tide';
   colors: ColorTuple;
 }
-
+
 export interface Copy {
   brandName: string;
   valueSuffix: string;
@@ -34,7 +35,7 @@ export interface Copy {
 export interface CapsuleOptions {
   preset?: string;
   width?: number | string;
-  height?: number | string;
+  height?: number | string;
   colors?: string[];
   seed?: number;
   speed?: number;
@@ -45,22 +46,33 @@ export interface CapsuleOptions {
   mouseColor?: boolean;
   renderer?: 'auto' | 'webgl2' | 'canvas2d';
   quality?: Quality;
+  renderScale?: number;
+  powerPreference?: PowerPreference;
+  fps?: number;
+  paused?: boolean;
+  static?: boolean;
   respectReducedMotion?: boolean;
   cssVars?: Record<string, string>;
   [key: string]: unknown;
 }
-
+
 export interface ProgressOptions {
   preset?: string;
-  width?: number | string;
-  height?: number | string;
-  value?: number;
-  min?: number;
-  max?: number;
+  width?: number | string;
+  height?: number | string;
+  value?: number;
+  modelValue?: number;
+  min?: number;
+  max?: number;
+  step?: number | 'any';
   draggable?: boolean;
+  keyboard?: boolean;
   disabled?: boolean;
   readonly?: boolean;
   valueSuffix?: string;
+  precision?: number;
+  formatValue?: (value: number, context: { min: number; max: number; suffix: string }) => string;
+  direction?: 'ltr' | 'rtl';
   edgeStyle?: 'flow' | 'tide';
   colors?: string[];
   textRatio?: number;
@@ -70,32 +82,42 @@ export interface ProgressOptions {
   showValue?: boolean;
   renderer?: 'auto' | 'webgl2' | 'canvas2d';
   quality?: Quality;
+  renderScale?: number;
+  powerPreference?: PowerPreference;
+  fps?: number;
+  paused?: boolean;
+  static?: boolean;
   respectReducedMotion?: boolean;
   cssVars?: Record<string, string>;
   [key: string]: unknown;
 }
-
+
 export interface ColorBackgroundOptions {
   preset?: string;
-  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;
+  colors?: string[];
+  seed?: number;
+  speed?: number;
+  renderer?: 'auto' | 'webgl2' | 'canvas2d';
+  quality?: Quality;
+  renderScale?: number;
+  powerPreference?: PowerPreference;
+  fps?: number;
+  paused?: boolean;
+  static?: boolean;
+  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): this;
@@ -109,13 +131,23 @@ export interface CapsuleController extends Emitter {
   setCssVars(vars: Record<string, string>): this;
   setLabel(label: string): this;
   setSize(width?: number | string, height?: number | string): this;
-  randomize(): this;
-  pause(): this;
-  resume(): this;
-  setQuality(quality: Quality): this;
-  dispose(): void;
-}
-
+  randomize(): this;
+  pause(): this;
+  resume(): this;
+  setQuality(quality: Quality): this;
+  setRenderScale(value: number): this;
+  setPaused(value: boolean): this;
+  setStatic(value: boolean): this;
+  setFps(value: number): this;
+  readonly paused: boolean;
+  readonly static: boolean;
+  readonly fps: number;
+  readonly quality: Quality;
+  readonly renderScale: number;
+  readonly mouseColor: boolean;
+  dispose(): void;
+}
+
 export interface ProgressController extends Emitter {
   element: HTMLElement;
   canvas: HTMLCanvasElement;
@@ -123,6 +155,7 @@ export interface ProgressController extends Emitter {
   setValue(value: number, source?: string): this;
   getValue(): number;
   setRange(min: number, max: number): this;
+  setStep(step: number | 'any'): this;
   setPreset(ref: string): this;
   setColors(colors: string[]): this;
   setEdgeStyle(style: 'flow' | 'tide'): this;
@@ -132,20 +165,40 @@ export interface ProgressController extends Emitter {
   setCssVars(vars: Record<string, string>): this;
   setLabel(label: string): this;
   setValueSuffix(suffix: string): this;
+  setPrecision(precision: number): this;
+  setFormatValue(formatter: ProgressOptions['formatValue'] | null): this;
+  setDirection(direction: 'ltr' | 'rtl'): this;
   setShowValue(show: boolean): 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;
+  resume(): this;
+  setQuality(quality: Quality): this;
+  setRenderScale(value: number): this;
+  setPaused(value: boolean): this;
+  setStatic(value: boolean): this;
+  setFps(value: number): this;
+  readonly min: number;
+  readonly max: number;
+  readonly step: number | 'any';
+  readonly precision: number;
+  readonly formatValue: ProgressOptions['formatValue'] | null;
+  readonly direction: 'ltr' | 'rtl';
+  readonly showValue: boolean;
+  readonly valueSuffix: string;
+  readonly paused: boolean;
+  readonly static: boolean;
+  readonly fps: number;
+  readonly quality: Quality;
+  readonly renderScale: number;
+  dispose(): void;
+}
+
+export interface ColorBackgroundController extends Emitter {
+  element: HTMLElement;
+  layer: HTMLElement;
+  canvas: HTMLCanvasElement;
+  preset: CapsulePreset;
   setPreset(ref: string): this;
   setColors(colors: string[]): this;
   setSeed(seed: number): this;
@@ -153,69 +206,104 @@ export interface ColorBackgroundController extends Emitter {
   setFallbackColor(value: boolean | string): this;
   setMouseColor(value: boolean): 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;
-
+  setRenderScale(value: number): this;
+  setPaused(value: boolean): this;
+  setStatic(value: boolean): this;
+  setFps(value: number): this;
+  setOpacity(value: number): this;
+  randomize(): this;
+  pause(): this;
+  resume(): this;
+  dispose(): void;
+  readonly paused: boolean;
+  readonly static: boolean;
+  readonly fps: number;
+  readonly quality: Quality;
+  readonly renderScale: number;
+  readonly opacity: number;
+  readonly fallbackColor: boolean | string;
+  readonly mouseColor: boolean;
+}
+
+export declare class ProgressCapsuleController {
+  value: number;
+  min: number;
+  max: number;
+  step: number | 'any';
+  webglActive: boolean;
+  setProgress(nextValue: number, source?: string): boolean;
+  setRange(min: number, max: number): this;
+  setStep(step: number | 'any'): this;
+  setPrecision(precision: number): this;
+  setFormatValue(formatter: ProgressOptions['formatValue'] | null): this;
+  setDirection(direction: 'ltr' | 'rtl'): this;
+  setValueSuffix(suffix: string): this;
+  setShowValue(show: boolean): this;
+  update(delta: number, paused: boolean, now: number): void;
+  draw(): void;
+  randomize(): number;
+  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 getPreset(kind: 'capsule' | 'progress', ref: string): CapsulePreset | ProgressPreset;
-
+
 export declare const DEFAULTS: {
-  capsule: Required<Pick<CapsuleOptions, 'width' | 'height' | 'quality' | 'respectReducedMotion' | 'mouseColor' | 'renderer' | 'textRatio'>>;
-  progress: Required<Pick<ProgressOptions, 'width' | 'height' | 'min' | 'max' | 'draggable' | 'disabled' | 'readonly' | 'valueSuffix' | 'edgeStyle' | 'quality' | 'respectReducedMotion' | 'renderer' | 'textRatio' | 'showValue'>>;
+  capsule: Required<Pick<CapsuleOptions, 'width' | 'height' | 'quality' | 'respectReducedMotion' | 'mouseColor' | 'renderer' | 'textRatio' | 'renderScale' | 'powerPreference' | 'fps' | 'paused' | 'static'>>;
+  progress: Required<Pick<ProgressOptions, 'width' | 'height' | 'min' | 'max' | 'step' | 'draggable' | 'keyboard' | 'disabled' | 'readonly' | 'direction' | 'precision' | 'valueSuffix' | 'edgeStyle' | 'quality' | 'respectReducedMotion' | 'renderer' | 'textRatio' | 'showValue' | 'renderScale' | 'powerPreference' | 'fps' | 'paused' | 'static'>>;
 };
-
-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 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 effectiveDprCap(quality: Quality, renderScale?: number): 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 normalizeColor(color: string): string | null;
 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;
-}
+
+export declare class CosmicRenderer {
+  constructor(canvas: HTMLCanvasElement, preset: CapsulePreset, options?: {
+    dprCap?: number;
+    mouseColor?: boolean;
+    eventTarget?: HTMLElement;
+    powerPreference?: PowerPreference;
+    onContextLost?: (event: Event) => void;
+    onContextRestored?: () => void;
+  });
+  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, options?: { dprCap?: number });
+  draw(elapsedSeconds: number): void;
+  setPreset(preset: CapsulePreset): void;
+  setDprCap(cap: number): void;
+  resize(): void;
+  dispose(): void;
+}
+
+export declare class ProgressFlowRenderer {
+  constructor(canvas: HTMLCanvasElement, preset: ProgressPreset, options?: {
+    powerPreference?: PowerPreference;
+    onContextLost?: (event: Event) => void;
+    onContextRestored?: () => void;
+  });
+  draw(time: number, progress: number, effectImage?: CanvasImageSource | null): void;
+  resize(width: number, height: number, dpr: number): void;
+  dispose(): void;
+}

package/types/progress.d.ts

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

package/types/vue3.d.ts

@@ -1,16 +1,16 @@
-import { CapsuleOptions, ProgressOptions } from './index.js';
-
+import { CapsuleOptions, ProgressOptions } from './index.js';
+
 export interface CosmicCapsuleComponent {
   name: 'dlc-capsule';
-  props: (keyof CapsuleOptions)[];
-  emits: string[];
-  mounted: () => void;
-  beforeUnmount: () => void;
-  render: (h: Function) => any;
-  methods: {
-    randomize(): any;
-    pause(): any;
-    resume(): any;
+  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;
@@ -21,24 +21,29 @@ export interface CosmicCapsuleComponent {
     setLabel(label: string): any;
     setMouseColor(value: boolean): any;
     setQuality(quality: CapsuleOptions['quality']): any;
+    setRenderScale(value: number): any;
+    setPaused(value: boolean): any;
+    setStatic(value: boolean): any;
+    setFps(value: number): any;
     getController(): any;
-  };
-}
-
+  };
+}
+
 export interface ProgressCapsuleComponent {
   name: 'dlc-progress';
-  props: (keyof ProgressOptions)[];
-  emits: string[];
-  mounted: () => void;
-  beforeUnmount: () => void;
-  render: (h: Function) => any;
+  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;
+    setStep(step: ProgressOptions['step']): any;
+    randomize(): any;
+    pause(): any;
+    resume(): any;
     setPreset(preset: ProgressOptions['preset']): any;
     setSize(width?: number | string, height?: number | string): any;
     setColors(colors: string[]): any;
@@ -49,7 +54,14 @@ export interface ProgressCapsuleComponent {
     setLabel(label: string): any;
     setValueSuffix(suffix: string): any;
     setShowValue(show: boolean): any;
+    setDirection(direction: ProgressOptions['direction']): any;
+    setPrecision(precision: number): any;
+    setFormatValue(formatter: ProgressOptions['formatValue'] | null): any;
     setQuality(quality: ProgressOptions['quality']): any;
+    setRenderScale(value: number): any;
+    setPaused(value: boolean): any;
+    setStatic(value: boolean): any;
+    setFps(value: number): any;
     getController(): any;
   };
 }
@@ -67,12 +79,16 @@ export interface ColorBackgroundComponent {
     setSeed(seed: number): any;
     setSpeed(speed: number): any;
     setQuality(quality: string): any;
+    setRenderScale(value: number): any;
     setOpacity(value: number): any;
     setFallbackColor(value: boolean | string): any;
     setMouseColor(value: boolean): any;
     randomize(): any;
     pause(): any;
     resume(): any;
+    setPaused(value: boolean): any;
+    setStatic(value: boolean): any;
+    setFps(value: number): any;
     getController(): any;
   };
 }