@5even7/dlc-ui 0.2.17 → 0.2.19

package/styles/progress.css

@@ -1,96 +1,96 @@
-/* ---------- 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.is-disabled {
-  cursor: default;
-  opacity: 0.55;
-}
-
-.hj-progress-root.is-disabled:focus-visible {
-  outline: none;
-}
-
-.hj-progress-root.is-readonly {
-  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[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;
-  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%));
-  background: var(--hj-text-bg, transparent);
-  padding: var(--hj-text-pad, 0);
-  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;
-  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;
-}
+/* ---------- 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.is-disabled {
+  cursor: default;
+  opacity: 0.55;
+}
+
+.hj-progress-root.is-disabled:focus-visible {
+  outline: none;
+}
+
+.hj-progress-root.is-readonly {
+  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[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;
+  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%));
+  background: var(--hj-text-bg, transparent);
+  padding: var(--hj-text-pad, 0);
+  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;
+  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/styles/theme.css

@@ -3,3 +3,4 @@
 @import './progress.css';
 @import './color.css';
 @import './emo.css';
+@import './avatar-creator.css';

package/types/avatar-creator.d.ts

@@ -0,0 +1,124 @@
+/**
+ * dlc-avatar-creator types.
+ *
+ * Two option layers:
+ *   common    — provider / style / seed / size / background
+ *   native    — providerOptions, passed through to the upstream generator,
+ *               validated against the upstream schema (names, types, defaults
+ *               and array semantics unchanged). Use getStyleDefinitions()
+ *               to inspect each style's schema and generated controls.
+ */
+
+export type AvatarProviderId = 'dicebear' | 'humation';
+export type AvatarProviderStyleId = string;
+
+export interface AvatarControl {
+  id: string;
+  label: string;
+  kind: 'select' | 'color' | 'range' | 'switch' | 'tags';
+  options?: string[];
+  min?: number;
+  max?: number;
+  step?: number;
+  default?: unknown;
+}
+
+export interface AvatarStyleDefinition {
+  id: string;
+  label: string;
+  provider: AvatarProviderId;
+  title: string;
+  designer: string;
+  homepage: string;
+  source: string;
+  license: string;
+  licenseUrl: string;
+  schema: Record<string, unknown>;
+  controls: AvatarControl[];
+}
+
+export interface AvatarProviderDefinition {
+  id: AvatarProviderId;
+  label: string;
+  styles: AvatarStyleDefinition[];
+}
+
+export interface AvatarOptions {
+  provider?: AvatarProviderId | string;
+  style?: string;
+  seed?: string;
+  size?: number;
+  background?: string;
+  /** Native upstream parameters, validated against the upstream schema. */
+  providerOptions?: Record<string, unknown>;
+  /** Throw on unrecognized/invalid providerOptions instead of warning. */
+  strict?: boolean;
+}
+
+export interface AvatarRenderResult {
+  svg: string;
+  width: number;
+  height: number;
+  warnings: string[];
+  metadata: {
+    provider: string;
+    style: string;
+    seed: string;
+    size?: number;
+    background?: string;
+    license: string;
+    licenseUrl: string;
+    source: string;
+  };
+}
+
+export interface AvatarState {
+  provider?: string;
+  style?: string;
+  seed?: string;
+  size?: number;
+  background?: string;
+  providerOptions: Record<string, unknown>;
+  strict: boolean;
+}
+
+export interface AvatarController {
+  element: HTMLElement;
+  readonly state: AvatarState;
+  getSvg(): string;
+  getResult(): AvatarRenderResult;
+  toDataUri(): string;
+  setOptions(options: AvatarOptions): AvatarRenderResult;
+  setProvider(provider: string): AvatarRenderResult;
+  setStyle(style: string): AvatarRenderResult;
+  setSeed(seed: string): AvatarRenderResult;
+  setSize(size: number): AvatarRenderResult;
+  setBackground(background: string): AvatarRenderResult;
+  setProviderOptions(options: Record<string, unknown>): AvatarRenderResult;
+  randomize(): AvatarRenderResult;
+  on(event: string, handler: (...args: any[]) => void): () => void;
+  off(event: string, handler: (...args: any[]) => void): boolean;
+  destroy(): void;
+}
+
+export declare function createAvatarSvg(options?: AvatarOptions): AvatarRenderResult;
+export declare function createAvatarCreator(container: HTMLElement, options?: AvatarOptions): AvatarController;
+export declare function getStyleDefinitions(): AvatarStyleDefinition[];
+export declare function getProviders(): AvatarProviderDefinition[];
+export declare function getProvider(providerId: string): AvatarProviderDefinition | undefined;
+export declare function getStyleDefinition(providerId: string, styleId: string): AvatarStyleDefinition | undefined;
+
+export declare function hashSeed(seed: string): number;
+export declare function fnv1a(input: string): number;
+export declare function createPrng(seed?: string): any;
+export declare function escapeXml(content: string): string;
+export declare function applySize(svg: string, size: number | string): string;
+export declare function svgToDataUri(svg: string): string;
+export declare function sanitizeSvg(svg: string): string;
+export declare function cleanText(value: unknown, maxLength?: number): string;
+export declare function validateProviderOptions(
+  schema: Record<string, unknown>,
+  input: Record<string, unknown>,
+  options?: { strict?: boolean }
+): { normalized: Record<string, unknown>; warnings: string[] };
+export declare function buildControlsFromSchema(schema: Record<string, unknown>): AvatarControl[];

package/types/capsule.d.ts

@@ -1,15 +1,15 @@
-export {
-  CapsuleOptions,
-  CapsuleController,
-  CapsulePreset,
-  Quality,
-  PowerPreference,
-  createCapsule,
-  parseSize,
-  dprCapFor,
-  effectiveDprCap,
-  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,15 +1,15 @@
-export {
-  ColorBackgroundOptions,
-  ColorBackgroundController,
-  CapsulePreset,
-  Quality,
-  PowerPreference,
-  createColorBackground,
-  parseSize,
-  dprCapFor,
-  effectiveDprCap,
-  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';

package/types/emo.d.ts

@@ -1,14 +1,37 @@
-export {
-  EmoOptions,
-  EmoPreset,
-  EmoTypeDefinition,
-  EmoController,
-  MiaoPartColors,
-  MiaoPartColorKey,
-  EMO_TYPES,
-  EMO_PRESETS,
-  EMO_CATEGORIES,
-  getEmoPreset,
-  getEmoAnimation,
-  createEmo
-} from './index.js';
+export {
+  EmoOptions,
+  MiaoEmoOptions,
+  GrokEmoOptions,
+  EmoCommonOptions,
+  EmoPreset,
+  EmoTypeDefinition,
+  EmoController,
+  EmoType,
+  EmoEngine,
+  EmoPartColors,
+  MiaoPartColors,
+  MiaoPartColorKey,
+  MiaoName,
+  GrokPartColors,
+  GrokPartColorKey,
+  GrokShape,
+  GrokName,
+  GrokStateCategory,
+  GrokStateMeta,
+  GrokCategoryDef,
+  EmoPreviewCardOptions,
+  EmoPreviewCardController,
+  EMO_TYPES,
+  EMO_PRESETS,
+  EMO_CATEGORIES,
+  GROK_CATEGORIES,
+  GROK_NAMES,
+  GROK_STATE_META,
+  getGrokNamesFor,
+  getGrokStateMeta,
+  getEmoType,
+  getEmoPreset,
+  getEmoAnimation,
+  createEmo,
+  createEmoPreviewCard
+} from './index.js';