@5even7/dlc-ui 0.2.0 → 0.2.2

package/package.json

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

package/styles/base.css

@@ -7,24 +7,18 @@
   --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%;
+  --hj-bg: #faf8f2;
+  --hj-ink: #20231f;
+  --hj-muted: #77786f;
+  /* Deprecated aliases, kept for cssVars compatibility. The canonical text
+     region width is --hj-text-width (set by the textRatio prop). */
+  --hj-copy-width: 39%;
+  --hj-copy-min-width: 164px;
+  --hj-copy-pad-x: 24px;
+  --hj-shadow: 0 16px 42px rgba(32, 35, 31, 0.08), 0 3px 10px rgba(32, 35, 31, 0.04);
+  --hj-copy-left: 30px;
+  --hj-value-right: 30px;
+  --hj-copy-max-width: 54%;
 
   position: relative;
   display: block;

package/styles/capsule.css

@@ -1,81 +1,34 @@
-/* ---------- 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;
-}
+/* ---------- Cosmic capsule slot layers ---------- */
+
+/* Text slot container: geometry only. No typography, padding or background
+   is imposed on slot content. .hj-capsule-copy is kept as a legacy alias for
+   user CSS; the old built-in text styles were removed with the copy API. */
+.hj-capsule-text {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  z-index: 4;
+  width: var(--hj-text-width, var(--hj-copy-width, 39%));
+  min-width: var(--hj-text-min-width, var(--hj-copy-min-width, 164px));
+  border-radius: var(--hj-text-radius, 0);
+  overflow: hidden;
+  pointer-events: none;
+}
+
+/* Color slot container: the region right of the text area, above the canvas. */
+.hj-capsule-visual {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: var(--hj-text-width, var(--hj-copy-width, 39%));
+  right: 0;
+  z-index: 3;
+  pointer-events: none;
+}
+
+.hj-capsule-root[data-theme="dark"] {
+  border: 0;
+  background: #202126;
+  box-shadow: none;
+}

package/styles/progress.css

@@ -10,11 +10,20 @@
   user-select: none;
 }
 
-.hj-progress-root[data-draggable="false"] {
-  cursor: default;
-}
-
-.hj-progress-root:focus-visible {
+.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:focus-visible {
   outline: 2px solid rgba(255, 255, 255, 0.8);
   outline-offset: 4px;
 }
@@ -35,39 +44,29 @@
   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;
-}
+/* 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%));
+  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;
@@ -86,22 +85,3 @@
   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/types/index.d.ts

@@ -25,37 +25,31 @@ export interface ProgressPreset {
   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 Copy {
+  brandName: string;
+  valueSuffix: string;
+  progressAria: string;
+  capsuleAria: string;
+}
+
 export interface CapsuleOptions {
   preset?: string;
-  width?: number | string;
+  width?: number | string;
   height?: number | string;
   colors?: string[];
   seed?: number;
   speed?: number;
+  textRatio?: number;
+  text?: string | Node | Node[];
+  colorContent?: string | Node | Node[];
+  label?: string;
   mouseColor?: boolean;
   renderer?: 'auto' | 'webgl2' | 'canvas2d';
-  showCopy?: boolean;
-  quality?: Quality;
-  respectReducedMotion?: boolean;
-  copy?: Partial<Copy>;
-  cssVars?: Record<string, string>;
-  [key: string]: unknown;
-}
+  quality?: Quality;
+  respectReducedMotion?: boolean;
+  cssVars?: Record<string, string>;
+  [key: string]: unknown;
+}
 
 export interface ProgressOptions {
   preset?: string;
@@ -64,18 +58,23 @@ export interface ProgressOptions {
   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;
-}
+  draggable?: boolean;
+  keyboard?: boolean;
+  disabled?: boolean;
+  valueSuffix?: string;
+  edgeStyle?: 'flow' | 'tide';
+  colors?: string[];
+  textRatio?: number;
+  text?: string | Node | Node[];
+  colorContent?: string | Node | Node[];
+  label?: string;
+  showValue?: boolean;
+  renderer?: 'auto' | 'webgl2' | 'canvas2d';
+  quality?: Quality;
+  respectReducedMotion?: boolean;
+  cssVars?: Record<string, string>;
+  [key: string]: unknown;
+}
 
 export interface ColorBackgroundOptions {
   preset?: string;
@@ -104,7 +103,12 @@ export interface CapsuleController extends Emitter {
   setColors(colors: string[]): this;
   setSeed(seed: number): this;
   setSpeed(speed: number): this;
-  setSize(width?: number | string, height?: number | string): this;
+  setText(content: string | Node | Node[]): this;
+  setColorContent(content: string | Node | Node[]): this;
+  setTextRatio(ratio: number): this;
+  setCssVars(vars: Record<string, string>): this;
+  setLabel(label: string): this;
+  setSize(width?: number | string, height?: number | string): this;
   randomize(): this;
   pause(): this;
   resume(): this;
@@ -122,6 +126,12 @@ export interface ProgressController extends Emitter {
   setPreset(ref: string): this;
   setColors(colors: string[]): this;
   setEdgeStyle(style: 'flow' | 'tide'): this;
+  setText(content: string | Node | Node[]): this;
+  setColorContent(content: string | Node | Node[]): this;
+  setTextRatio(ratio: number): this;
+  setCssVars(vars: Record<string, string>): this;
+  setLabel(label: string): this;
+  setValueSuffix(suffix: string): this;
   setSize(width?: number | string, height?: number | string): this;
   randomize(): this;
   pause(): this;
@@ -136,8 +146,12 @@ export interface ColorBackgroundController extends Emitter {
   canvas: HTMLCanvasElement;
   preset: CapsulePreset;
   setPreset(ref: string): this;
-  setColors(colors: string[]): this;
-  setQuality(quality: Quality): this;
+  setColors(colors: string[]): this;
+  setSeed(seed: number): this;
+  setSpeed(speed: number): this;
+  setFallbackColor(value: boolean | string): this;
+  setMouseColor(value: boolean): this;
+  setQuality(quality: Quality): this;
   setOpacity(value: number): this;
   randomize(): this;
   pause(): this;
@@ -165,9 +179,9 @@ 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' | 'showCopy'>>;
-  progress: Required<Pick<ProgressOptions, 'width' | 'height' | 'min' | 'max' | 'draggable' | 'keyboard' | 'edgeStyle' | 'quality' | 'respectReducedMotion' | 'renderer' | 'showCopy'>>;
-};
+  capsule: Required<Pick<CapsuleOptions, 'width' | 'height' | 'quality' | 'respectReducedMotion' | 'mouseColor' | 'renderer' | 'textRatio'>>;
+  progress: Required<Pick<ProgressOptions, 'width' | 'height' | 'min' | 'max' | 'draggable' | 'keyboard' | 'disabled' | 'valueSuffix' | 'edgeStyle' | 'quality' | 'respectReducedMotion' | 'renderer' | 'textRatio' | 'showValue'>>;
+};
 
 export declare const COPY: Copy;
 export declare function parseSize(value: number | string): string;
@@ -175,9 +189,10 @@ export declare const QUALITY_TIERS: Record<'low' | 'medium' | 'high', { dpr: num
 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 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 });

package/types/vue3.d.ts

@@ -11,10 +11,15 @@ export interface CosmicCapsuleComponent {
     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;
+    setPreset(preset: CapsuleOptions['preset']): any;
+    setSize(width?: number | string, height?: number | string): any;
+    setColors(colors: string[]): any;
+    setText(content: string | Node | Node[]): any;
+    setColorContent(content: string | Node | Node[]): any;
+    setTextRatio(ratio: number): any;
+    setCssVars(vars: Record<string, string>): any;
+    setLabel(label: string): any;
+    setQuality(quality: CapsuleOptions['quality']): any;
     getController(): any;
   };
 }
@@ -26,22 +31,56 @@ export interface ProgressCapsuleComponent {
   mounted: () => void;
   beforeUnmount: () => void;
   render: (h: Function) => any;
-  methods: {
-    setValue(value: number): any;
-    getValue(): number | undefined;
-    setRange(min: number, max: number): 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;
+    setPreset(preset: ProgressOptions['preset']): any;
+    setSize(width?: number | string, height?: number | string): any;
+    setColors(colors: string[]): any;
+    setText(content: string | Node | Node[]): any;
+    setColorContent(content: string | Node | Node[]): any;
+    setTextRatio(ratio: number): any;
+    setCssVars(vars: Record<string, string>): any;
+    setLabel(label: string): any;
+    setValueSuffix(suffix: string): any;
+    setQuality(quality: ProgressOptions['quality']): any;
+    getController(): any;
+  };
+}
+
+export interface ColorBackgroundComponent {
+  name: 'ColorBackground';
+  props: (keyof import('./index').ColorBackgroundOptions)[];
+  emits: string[];
+  mounted: () => void;
+  beforeUnmount: () => void;
+  render: (h: Function) => any;
+  methods: {
+    setPreset(preset: string): any;
+    setColors(colors: string[]): any;
+    setSeed(seed: number): any;
+    setSpeed(speed: number): any;
+    setQuality(quality: string): any;
+    setOpacity(value: number): any;
+    setFallbackColor(value: boolean | string): any;
+    setMouseColor(value: boolean): any;
+    randomize(): any;
+    pause(): any;
+    resume(): any;
+    getController(): any;
+  };
+}
+
+export declare const CosmicCapsule: CosmicCapsuleComponent;
+export declare const ProgressCapsule: ProgressCapsuleComponent;
+export declare const ColorBackground: ColorBackgroundComponent;
+declare const _default: {
+  CosmicCapsule: CosmicCapsuleComponent;
+  ProgressCapsule: ProgressCapsuleComponent;
+  ColorBackground: ColorBackgroundComponent;
+};
+export default _default;