@5even7/dlc-ui 0.2.16 → 0.2.18

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@5even7/dlc-ui",
-  "version": "0.2.16",
+  "version": "0.2.18",
   "publishConfig": {
     "access": "public",
     "registry": "https://registry.npmjs.org"
@@ -72,7 +72,8 @@
     "types",
     "README.md",
     "LICENSE",
-    "CHANGELOG.md"
+    "CHANGELOG.md",
+    "THIRD_PARTY_NOTICES.md"
   ],
   "peerDependencies": {
     "vue": ">=2.7.0"

package/styles/emo.css

@@ -28,6 +28,62 @@
   overflow: hidden;
 }
 
-.dlc-emo-root[data-paused='true'] {
-  --dlc-emo-play-state: paused;
+
+/* Grok SVG renderer */
+
+.dlc-grok {
+  display: block;
+  width: 100% !important;
+  height: 100% !important;
+  will-change: transform;
+}
+
+.dlc-grok__body {
+  fill: #2f86ed;
+}
+
+.dlc-grok__eye {
+  fill: #fffdf7;
+}
+
+.dlc-grok.act-bounce { animation: dlc-grok-bounce 0.85s ease; }
+.dlc-grok.act-tilt { animation: dlc-grok-tilt 0.8s ease; }
+.dlc-grok.act-scan .dlc-grok__eyes { animation: dlc-grok-scan 0.8s ease; }
+.dlc-grok.act-turn { animation: dlc-grok-turn 0.9s ease; }
+.dlc-grok.act-pulse { animation: dlc-grok-pulse 0.9s ease; }
+.dlc-grok.act-glitch { animation: dlc-grok-glitch 0.55s steps(2); }
+
+@keyframes dlc-grok-bounce {
+  0%, 100% { transform: translateY(0); }
+  40% { transform: translateY(-34px) scale(0.96, 1.04); }
+  65% { transform: translateY(4px) scale(1.05, 0.94); }
+}
+
+@keyframes dlc-grok-tilt {
+  35% { transform: rotate(-19deg) translate(-8px, 5px); }
+  70% { transform: rotate(8deg); }
+}
+
+@keyframes dlc-grok-scan {
+  0%, 100% { transform: translate(0); }
+  30% { transform: translate(-24px, 2px); }
+  70% { transform: translate(24px, -2px); }
+}
+
+@keyframes dlc-grok-turn {
+  0%, 100% { transform: rotateY(0); }
+  48% { transform: rotateY(180deg) scale(0.82); }
+}
+
+@keyframes dlc-grok-pulse {
+  0%, 100% { transform: scale(1); }
+  35% { transform: scale(1.08, 0.92); }
+  65% { transform: scale(0.94, 1.08); }
+}
+
+@keyframes dlc-grok-glitch {
+  0%, 100% { transform: translate(0); }
+  25% { transform: translate(-9px, 3px); filter: drop-shadow(8px 0 #ff9500); }
+  50% { transform: translate(10px, -3px); filter: drop-shadow(-8px 0 #79e2d0); }
+  75% { transform: translate(-4px, 1px); }
 }

package/types/emo.d.ts

@@ -1,11 +1,37 @@
 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,
-  createEmo
+  getEmoAnimation,
+  createEmo,
+  createEmoPreviewCard
 } from './index.js';

package/types/index.d.ts

@@ -2,6 +2,140 @@ export type Quality = 'auto' | 'low' | 'medium' | 'high';
 export type PowerPreference = 'default' | 'high-performance' | 'low-power';
 export type ColorTuple = [string, string, string, string];
 
+export type MiaoPartColorKey =
+  | 'leftEye'
+  | 'rightEye'
+  | 'mouth'
+  | 'mouthFill'
+  | 'sleepBreath'
+  | 'shuttlecock'
+  | 'meditationFigure'
+  | 'meditationBubble'
+  | 'musicNotes'
+  | 'leftEyeOverlay'
+  | 'questionMark'
+  | 'leftBlush'
+  | 'rightBlush'
+  | 'sighBreath'
+  | 'particles';
+
+/**
+ * Per-part color overrides for a Miao emoji. Values are any CSS color
+ * (#fff / #rrggbb / named / rgb() / rgba(), alpha ignored); null or missing
+ * keys keep the asset's original color, and keys the current animation does
+ * not support are ignored.
+ */
+export type MiaoPartColors = Partial<Record<MiaoPartColorKey, string | null>>;
+
+export type EmoType = 'miao' | 'grok';
+export type EmoEngine = 'lottie' | 'grok';
+
+export type GrokPartColorKey = 'body' | 'eyes';
+
+/**
+ * Per-part color overrides for a Grok emoji. Values are any CSS color;
+ * null or missing keys keep the original color.
+ */
+export type GrokPartColors = Partial<Record<GrokPartColorKey, string | null>>;
+
+export type EmoPartColors = MiaoPartColors | GrokPartColors;
+
+export type GrokShape =
+  | 'blob'
+  | 'pebble'
+  | 'squircle'
+  | 'capsule'
+  | 'triangle'
+  | 'hex'
+  | 'cloud'
+  | 'drop';
+
+export type MiaoName =
+  | 'angry'
+  | 'cry'
+  | 'sad'
+  | 'sigh'
+  | 'investigate'
+  | 'mute'
+  | 'ponder'
+  | 'question'
+  | 'static'
+  | 'asleep'
+  | 'yawn'
+  | 'badminton'
+  | 'confident'
+  | 'laugh'
+  | 'leisure'
+  | 'music'
+  | 'smile'
+  | 'yummy'
+  | 'mock'
+  | 'shy'
+  | 'snigger'
+  | 'panic'
+  | 'shocked';
+
+export type GrokName =
+  | 'sleeping'
+  | 'idle'
+  | 'listening'
+  | 'thinking'
+  | 'searching'
+  | 'working'
+  | 'happy'
+  | 'surprised'
+  | 'angry'
+  | 'sad'
+  | 'loading'
+  | 'confused'
+  | 'receiving';
+
+/**
+ * Grok state presentation categories. Only organizes Docs / Playground
+ * display; all 13 public names stay valid regardless of category.
+ */
+export type GrokStateCategory = 'emotion' | 'agent' | 'lifecycle';
+
+/**
+ * Presentation metadata for one Grok state. A Grok `name` is a dynamic state
+ * module (expression pool + cadence + blink + body motion), so its static
+ * first frame may look similar to other states even when the dynamics differ.
+ */
+export interface GrokStateMeta {
+  category: GrokStateCategory;
+  /** Chinese display name. */
+  label: string;
+  /** Short usage note shown on Docs cards. */
+  description?: string;
+  /** 'upstream' = ported from LaoA-GrokBot; 'dlc' reserved for DLC extensions. */
+  source: 'upstream' | 'dlc';
+}
+
+export interface GrokCategoryDef {
+  key: GrokStateCategory;
+  label: string;
+}
+
+export interface EmoPreviewCardOptions {
+  container: HTMLElement;
+  options: EmoOptions;
+  /** Auto-pause after this many ms of preview (default 2800). */
+  playFor?: number;
+  /** Keep the card static when the user prefers reduced motion (default true). */
+  respectReducedMotion?: boolean;
+  /** Pause the preview when the card leaves the viewport (default false). */
+  trackViewport?: boolean;
+}
+
+export interface EmoPreviewCardController {
+  element: HTMLElement;
+  controller: EmoController;
+  start(): void;
+  stop(): void;
+  setViewportVisible(visible: boolean): void;
+  dispose(): void;
+}
+
 export interface CapsulePreset {
   id: string;
   code: string;
@@ -26,21 +160,25 @@ export interface ProgressPreset {
 }
 
 export interface EmoPreset {
-  type: string;
+  type: EmoType;
   name: string;
   label: string;
   category: string;
   width: number;
   height: number;
-  frames: number;
-  fps: number;
+  engine: EmoEngine;
+  frames?: number;
+  fps?: number;
 }
 
 export interface EmoTypeDefinition {
-  type: string;
+  type: EmoType;
   label: string;
+  defaultName: string;
+  engine: EmoEngine;
   names: string[];
-  colorChannels: Array<'color' | 'accentColor'>;
+  partColors: string[];
+  shapes?: string[];
 }
 
 export interface Copy {
@@ -129,22 +267,15 @@ export interface ColorBackgroundOptions {
   [key: string]: unknown;
 }
 
-export interface EmoOptions {
-  type?: string;
-  name?: string;
+export interface EmoCommonOptions {
   width?: number | string;
   height?: number | string;
-  color?: string;
-  accentColor?: string | null;
   speed?: number;
   loop?: boolean;
   autoplay?: boolean;
-  direction?: 'forward' | 'reverse' | 1 | -1;
+  paused?: boolean;
   opacity?: number;
   fit?: 'contain' | 'cover' | 'fill';
-  renderer?: 'svg' | 'canvas';
-  paused?: boolean;
-  segment?: [number, number] | null;
   background?: string;
   label?: string;
   instanceName?: string;
@@ -152,6 +283,25 @@ export interface EmoOptions {
   [key: string]: unknown;
 }
 
+export interface MiaoEmoOptions extends EmoCommonOptions {
+  type?: 'miao';
+  name?: MiaoName;
+  partColors?: MiaoPartColors;
+  renderer?: 'svg' | 'canvas';
+  direction?: 'forward' | 'reverse' | 1 | -1;
+  segment?: [number, number] | null;
+}
+
+export interface GrokEmoOptions extends EmoCommonOptions {
+  type: 'grok';
+  name?: GrokName;
+  partColors?: GrokPartColors;
+  shape?: GrokShape;
+  interactive?: boolean;
+}
+
+export type EmoOptions = MiaoEmoOptions | GrokEmoOptions;
+
 export interface Emitter {
   on(event: string, handler: (...args: any[]) => void): () => void;
   off(event: string, handler: (...args: any[]) => void): boolean;
@@ -275,18 +425,20 @@ export interface EmoController extends Emitter {
   stop(): this;
   setPaused(value: boolean): this;
   setSpeed(value: number): this;
-  setDirection(value: EmoOptions['direction']): this;
-  setSegment(value: EmoOptions['segment']): this;
+  setDirection(value: MiaoEmoOptions['direction']): this;
+  setSegment(value: [number, number] | null): this;
   setName(value: string): this;
-  setType(value: string): this;
-  setColors(color: string, accentColor?: string | null): this;
+  setType(value: EmoType): this;
+  setPartColors(value: EmoPartColors): this;
   setOpacity(value: number): this;
   setBackground(value: string): this;
   setSize(width?: number | string, height?: number | string): this;
-  setFit(value: EmoOptions['fit']): this;
-  setRenderer(value: EmoOptions['renderer']): this;
+  setFit(value: EmoCommonOptions['fit']): this;
+  setRenderer(value: 'svg' | 'canvas'): this;
   setLoop(value: boolean): this;
   setAutoplay(value: boolean): this;
+  setShape(value: GrokShape): this;
+  setInteractive(value: boolean): this;
   setLabel(value: string): this;
   dispose(): void;
   readonly speed: number;
@@ -298,9 +450,10 @@ export interface EmoController extends Emitter {
   readonly renderer: 'svg' | 'canvas';
   readonly paused: boolean;
   readonly segment: [number, number] | null;
-  readonly color: string;
-  readonly accentColor: string | null;
+  readonly partColors: EmoPartColors;
   readonly background: string;
+  readonly shape: GrokShape;
+  readonly interactive: boolean;
 }
 
 export declare class ProgressCapsuleController {
@@ -327,6 +480,7 @@ 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 function createEmo(container: HTMLElement, options?: EmoOptions): EmoController;
+export declare function createEmoPreviewCard(options: EmoPreviewCardOptions): EmoPreviewCardController;
 
 export declare const PRESETS: CapsulePreset[];
 export declare const PROGRESS_PRESETS: ProgressPreset[];
@@ -335,12 +489,19 @@ export declare function getPreset(kind: 'capsule' | 'progress', ref: string): Ca
 export declare const EMO_TYPES: EmoTypeDefinition[];
 export declare const EMO_PRESETS: EmoPreset[];
 export declare const EMO_CATEGORIES: Record<string, string>;
+export declare function getEmoType(type?: string): EmoTypeDefinition;
 export declare function getEmoPreset(type?: string, name?: string): EmoPreset;
+export declare function getEmoAnimation(type?: string, name?: string): any;
+export declare const GROK_CATEGORIES: GrokCategoryDef[];
+export declare const GROK_NAMES: GrokName[];
+export declare const GROK_STATE_META: Record<GrokName, GrokStateMeta>;
+export declare function getGrokNamesFor(tab: GrokStateCategory | 'all' | string): GrokName[];
+export declare function getGrokStateMeta(name: string): GrokStateMeta;
 
 export declare const DEFAULTS: {
   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'>>;
-  emo: Required<Pick<EmoOptions, 'type' | 'name' | 'width' | 'height' | 'color' | 'speed' | 'loop' | 'autoplay' | 'direction' | 'opacity' | 'fit' | 'renderer' | 'paused' | 'background' | 'respectReducedMotion'>> & Pick<EmoOptions, 'accentColor' | 'segment'>;
+  emo: Required<Pick<EmoCommonOptions, 'width' | 'height' | 'speed' | 'loop' | 'autoplay' | 'paused' | 'opacity' | 'fit' | 'background' | 'respectReducedMotion'>> & Pick<MiaoEmoOptions, 'type' | 'name' | 'partColors' | 'direction' | 'renderer' | 'segment'>;
 };
 
 export declare const COPY: Copy;

package/types/vue3.d.ts

@@ -1,4 +1,4 @@
-import { CapsuleOptions, ProgressOptions, EmoOptions } from './index.js';
+import { CapsuleOptions, ProgressOptions, MiaoEmoOptions, GrokEmoOptions, EmoCommonOptions } from './index.js';
 
 export interface CosmicCapsuleComponent {
   name: 'dlc-capsule';
@@ -95,7 +95,7 @@ export interface ColorBackgroundComponent {
 
 export interface EmoComponent {
   name: 'dlc-emo';
-  props: (keyof EmoOptions)[];
+  props: (keyof MiaoEmoOptions | keyof GrokEmoOptions)[];
   emits: string[];
   mounted: () => void;
   beforeUnmount: () => void;
@@ -106,18 +106,20 @@ export interface EmoComponent {
     stop(): any;
     setPaused(value: boolean): any;
     setSpeed(value: number): any;
-    setDirection(value: EmoOptions['direction']): any;
-    setSegment(value: EmoOptions['segment']): any;
+    setDirection(value: MiaoEmoOptions['direction']): any;
+    setSegment(value: [number, number] | null): any;
     setName(value: string): any;
     setType(value: string): any;
-    setColors(color: string, accentColor?: string | null): any;
+    setPartColors(value: import('./index').EmoPartColors): any;
     setOpacity(value: number): any;
     setBackground(value: string): any;
     setSize(width?: number | string, height?: number | string): any;
-    setFit(value: EmoOptions['fit']): any;
-    setRenderer(value: EmoOptions['renderer']): any;
+    setFit(value: EmoCommonOptions['fit']): any;
+    setRenderer(value: 'svg' | 'canvas'): any;
     setLoop(value: boolean): any;
     setAutoplay(value: boolean): any;
+    setShape(value: import('./index').GrokShape): any;
+    setInteractive(value: boolean): any;
     setLabel(value: string): any;
     getController(): any;
   };