flawed-avatar 0.2.1

package/src/renderer/styles/tokens.css

@@ -0,0 +1,220 @@
+/**
+ * Design Tokens
+ * Single source of truth for all design values
+ */
+
+:root {
+  /* ===========================
+   * COLORS
+   * =========================== */
+
+  /* Glass effect */
+  --glass-bg: rgba(15, 15, 25, 0.75);
+  --glass-bg-solid: rgb(15, 15, 25);
+  --glass-border: rgba(255, 255, 255, 0.1);
+  --glass-border-hover: rgba(255, 255, 255, 0.15);
+  --glass-blur: 12px;
+
+  /* Accent - Blue */
+  --accent-blue: rgba(100, 180, 255, 1);
+  --accent-blue-soft: rgba(100, 180, 255, 0.2);
+  --accent-blue-glow: rgba(100, 180, 255, 0.3);
+
+  /* Accent - Amber */
+  --accent-amber: rgba(255, 180, 100, 1);
+  --accent-amber-soft: rgba(255, 180, 100, 0.2);
+
+  /* Semantic Colors */
+  --color-error: #ff6b6b;
+  --color-error-soft: rgba(255, 107, 107, 0.2);
+  --color-success: #6bff8c;
+  --color-success-soft: rgba(107, 255, 140, 0.2);
+  --color-warning: var(--accent-amber);
+  --color-warning-soft: var(--accent-amber-soft);
+
+  /* Text */
+  --text-primary: #f0f0f0;
+  --text-secondary: #a0a0a0;
+  --text-assistant: #e8f0ff;
+  --text-user: #ffffff;
+
+  /* Surfaces */
+  --surface-message-assistant: rgba(255, 255, 255, 0.05);
+  --surface-message-user: rgba(100, 180, 255, 0.15);
+  --surface-input: rgba(255, 255, 255, 0.06);
+  --surface-button: rgba(255, 255, 255, 0.08);
+  --surface-button-hover: rgba(255, 255, 255, 0.15);
+
+  /* Interactive States */
+  --surface-hover: rgba(255, 255, 255, 0.08);
+  --surface-active: rgba(255, 255, 255, 0.12);
+  --surface-focus: rgba(100, 180, 255, 0.15);
+
+  /* Depth */
+  --surface-sunken: rgba(0, 0, 0, 0.2);
+  --surface-elevated: rgba(255, 255, 255, 0.03);
+
+  /* Scrollbar */
+  --scrollbar-thumb: rgba(255, 255, 255, 0.15);
+  --scrollbar-thumb-hover: rgba(255, 255, 255, 0.25);
+
+  /* ===========================
+   * TYPOGRAPHY
+   * =========================== */
+
+  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+
+  /* Font sizes */
+  --font-size-xs: 10px;
+  --font-size-sm: 11px;
+  --font-size-md: 12px;
+  --font-size-lg: 14px;
+  --font-size-xl: 16px;
+
+  /* Font weights */
+  --font-weight-normal: 400;
+  --font-weight-medium: 500;
+  --font-weight-semibold: 600;
+
+  /* Line heights */
+  --line-height-tight: 1.25;
+  --line-height-normal: 1.4;
+  --line-height-relaxed: 1.625;
+
+  /* Legacy alias */
+  --line-height: var(--line-height-normal);
+
+  /* ===========================
+   * SPACING (8px base)
+   * =========================== */
+
+  --space-0: 0;
+  --space-1: 4px;
+  --space-2: 8px;
+  --space-3: 12px;
+  --space-4: 16px;
+  --space-5: 20px;
+  --space-6: 24px;
+  --space-8: 32px;
+
+  /* Legacy aliases */
+  --space-xs: var(--space-1);
+  --space-sm: 6px;
+  --space-md: var(--space-2);
+  --space-lg: var(--space-3);
+  --space-xl: 14px;
+
+  /* Component-specific spacing */
+  --chat-message-margin: var(--space-6);
+  --chat-tail-width: var(--space-4);
+  --chat-tail-height: var(--space-2);
+
+  /* ===========================
+   * BORDER RADIUS
+   * =========================== */
+
+  --radius-sm: 4px;
+  --radius-md: 8px;
+  --radius-lg: 12px;
+  --radius-xl: 14px;
+  --radius-full: 9999px;
+
+  /* ===========================
+   * ANIMATION
+   * =========================== */
+
+  /* Easing functions */
+  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
+  --ease-out-back: cubic-bezier(0.34, 1.56, 0.64, 1);
+  --ease-spring: cubic-bezier(0.175, 0.885, 0.32, 1.275);
+  --ease-default: ease;
+
+  /* Durations */
+  --duration-instant: 50ms;
+  --duration-fast: 100ms;
+  --duration-normal: 150ms;
+  --duration-slow: 200ms;
+  --duration-slower: 300ms;
+  --duration-slowest: 500ms;
+
+  /* Legacy transition aliases */
+  --transition-fast: var(--duration-fast) var(--ease-default);
+  --transition-normal: var(--duration-normal) var(--ease-default);
+  --transition-slow: var(--duration-slower) var(--ease-default);
+
+  /* ===========================
+   * SHADOWS & GLOWS
+   * =========================== */
+
+  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.3);
+  --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.3);
+  --shadow-md: 0 4px 8px rgba(0, 0, 0, 0.35);
+  --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.4);
+  --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.5);
+
+  /* Legacy alias */
+  --shadow-elevated: var(--shadow-lg);
+  --shadow-glow: 0 0 12px var(--accent-blue-glow);
+
+  /* Glow effects */
+  --glow-blue-sm: 0 0 8px var(--accent-blue-glow);
+  --glow-blue-md: 0 0 16px var(--accent-blue-glow);
+  --glow-amber-sm: 0 0 8px var(--accent-amber-soft);
+
+  /* ===========================
+   * Z-INDEX SCALE
+   * =========================== */
+
+  --z-base: 0;
+  --z-dropdown: 10;
+  --z-sticky: 20;
+  --z-overlay: 30;
+  --z-modal: 40;
+  --z-toast: 50;
+
+  /* ===========================
+   * BREAKPOINTS (for reference in JS)
+   * =========================== */
+
+  --breakpoint-sm: 480px;
+  --breakpoint-md: 768px;
+}
+
+/* ===========================
+ * ACCESSIBILITY
+ * =========================== */
+
+/* Reduced motion */
+@media (prefers-reduced-motion: reduce) {
+  *,
+  *::before,
+  *::after {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+    scroll-behavior: auto !important;
+  }
+}
+
+/* High contrast mode */
+@media (prefers-contrast: more) {
+  :root {
+    --glass-bg: rgba(0, 0, 0, 0.95);
+    --glass-border: rgba(255, 255, 255, 0.5);
+    --text-primary: #ffffff;
+    --text-secondary: #e0e0e0;
+    --surface-message-assistant: rgba(255, 255, 255, 0.2);
+    --surface-message-user: rgba(100, 180, 255, 0.4);
+  }
+}
+
+/* Forced colors (Windows high contrast) */
+@media (forced-colors: active) {
+  :root {
+    --glass-bg: Canvas;
+    --glass-border: CanvasText;
+    --text-primary: CanvasText;
+    --text-secondary: CanvasText;
+    --accent-blue: LinkText;
+  }
+}

package/src/renderer/styles/utilities.css

@@ -0,0 +1,349 @@
+/**
+ * Utility classes for composition
+ * Low-specificity classes for common patterns
+ */
+
+/* === Display === */
+.hidden {
+  display: none !important;
+}
+
+.visible {
+  visibility: visible;
+}
+
+.invisible {
+  visibility: hidden;
+}
+
+.block {
+  display: block;
+}
+
+.inline-block {
+  display: inline-block;
+}
+
+/* === Flex === */
+.flex {
+  display: flex;
+}
+
+.inline-flex {
+  display: inline-flex;
+}
+
+.flex-col {
+  flex-direction: column;
+}
+
+.flex-row {
+  flex-direction: row;
+}
+
+.flex-wrap {
+  flex-wrap: wrap;
+}
+
+.flex-1 {
+  flex: 1;
+}
+
+.flex-shrink-0 {
+  flex-shrink: 0;
+}
+
+.items-start {
+  align-items: flex-start;
+}
+
+.items-center {
+  align-items: center;
+}
+
+.items-end {
+  align-items: flex-end;
+}
+
+.justify-start {
+  justify-content: flex-start;
+}
+
+.justify-center {
+  justify-content: center;
+}
+
+.justify-end {
+  justify-content: flex-end;
+}
+
+.justify-between {
+  justify-content: space-between;
+}
+
+/* === Gap === */
+.gap-0 {
+  gap: var(--space-0);
+}
+
+.gap-1 {
+  gap: var(--space-1);
+}
+
+.gap-2 {
+  gap: var(--space-2);
+}
+
+.gap-3 {
+  gap: var(--space-3);
+}
+
+.gap-4 {
+  gap: var(--space-4);
+}
+
+/* === Padding === */
+.p-0 {
+  padding: var(--space-0);
+}
+
+.p-1 {
+  padding: var(--space-1);
+}
+
+.p-2 {
+  padding: var(--space-2);
+}
+
+.p-3 {
+  padding: var(--space-3);
+}
+
+.p-4 {
+  padding: var(--space-4);
+}
+
+.px-2 {
+  padding-inline: var(--space-2);
+}
+
+.px-3 {
+  padding-inline: var(--space-3);
+}
+
+.px-4 {
+  padding-inline: var(--space-4);
+}
+
+.py-2 {
+  padding-block: var(--space-2);
+}
+
+.py-3 {
+  padding-block: var(--space-3);
+}
+
+.py-4 {
+  padding-block: var(--space-4);
+}
+
+/* === Margin === */
+.m-0 {
+  margin: var(--space-0);
+}
+
+.m-auto {
+  margin: auto;
+}
+
+.mx-auto {
+  margin-inline: auto;
+}
+
+.mb-2 {
+  margin-bottom: var(--space-2);
+}
+
+.mb-3 {
+  margin-bottom: var(--space-3);
+}
+
+/* === Text === */
+.text-xs {
+  font-size: var(--font-size-xs);
+}
+
+.text-sm {
+  font-size: var(--font-size-sm);
+}
+
+.text-md {
+  font-size: var(--font-size-md);
+}
+
+.text-lg {
+  font-size: var(--font-size-lg);
+}
+
+.text-xl {
+  font-size: var(--font-size-xl);
+}
+
+.font-normal {
+  font-weight: var(--font-weight-normal);
+}
+
+.font-medium {
+  font-weight: var(--font-weight-medium);
+}
+
+.font-semibold {
+  font-weight: var(--font-weight-semibold);
+}
+
+.text-primary {
+  color: var(--text-primary);
+}
+
+.text-secondary {
+  color: var(--text-secondary);
+}
+
+.text-start {
+  text-align: start;
+}
+
+.text-center {
+  text-align: center;
+}
+
+.text-end {
+  text-align: end;
+}
+
+.leading-tight {
+  line-height: var(--line-height-tight);
+}
+
+.leading-normal {
+  line-height: var(--line-height-normal);
+}
+
+.leading-relaxed {
+  line-height: var(--line-height-relaxed);
+}
+
+/* === Width/Height === */
+.w-full {
+  width: 100%;
+}
+
+.h-full {
+  height: 100%;
+}
+
+.min-h-0 {
+  min-height: 0;
+}
+
+/* === Overflow === */
+.overflow-hidden {
+  overflow: hidden;
+}
+
+.overflow-auto {
+  overflow: auto;
+}
+
+.overflow-y-auto {
+  overflow-y: auto;
+}
+
+.overflow-x-hidden {
+  overflow-x: hidden;
+}
+
+/* === Position === */
+.relative {
+  position: relative;
+}
+
+.absolute {
+  position: absolute;
+}
+
+.fixed {
+  position: fixed;
+}
+
+/* === Border radius === */
+.rounded-sm {
+  border-radius: var(--radius-sm);
+}
+
+.rounded-md {
+  border-radius: var(--radius-md);
+}
+
+.rounded-lg {
+  border-radius: var(--radius-lg);
+}
+
+.rounded-xl {
+  border-radius: var(--radius-xl);
+}
+
+.rounded-full {
+  border-radius: var(--radius-full);
+}
+
+/* === State utilities === */
+.is-loading {
+  pointer-events: none;
+  opacity: 0.6;
+}
+
+.is-disabled {
+  pointer-events: none;
+  opacity: 0.4;
+  cursor: not-allowed;
+}
+
+.is-active {
+  /* Component-specific active styles */
+}
+
+/* === Pointer events === */
+.pointer-events-none {
+  pointer-events: none;
+}
+
+.pointer-events-auto {
+  pointer-events: auto;
+}
+
+/* === Transitions === */
+.transition-fast {
+  transition: all var(--duration-fast) var(--ease-out-expo);
+}
+
+.transition-normal {
+  transition: all var(--duration-normal) var(--ease-out-expo);
+}
+
+.transition-slow {
+  transition: all var(--duration-slow) var(--ease-out-expo);
+}
+
+/* === Opacity === */
+.opacity-0 {
+  opacity: 0;
+}
+
+.opacity-50 {
+  opacity: 0.5;
+}
+
+.opacity-100 {
+  opacity: 1;
+}

package/src/renderer/types/avatar-bridge.d.ts

@@ -0,0 +1,86 @@
+interface ChatMessage {
+	id: string;
+	timestamp: number;
+	role: "user" | "assistant";
+	text: string;
+	agentId?: string;
+}
+
+interface ChatHistory {
+	schemaVersion: number;
+	messages: ChatMessage[];
+	lastUpdated: number;
+}
+
+interface AvatarSettings {
+	opacity: number;
+	idleTimeoutMs: number;
+	zoom: number;
+	position: { x: number; y: number } | null;
+}
+
+interface AvatarBridge {
+	setIgnoreMouseEvents(ignore: boolean): void;
+	startDrag(): void;
+	stopDrag(): void;
+	onVrmModelChanged(callback: (path: string) => void): void;
+	getVrmPath(): Promise<string>;
+	showContextMenu(): void;
+	openSettings(): void;
+	getCameraZoom(): Promise<number>;
+	saveCameraZoom(zoom: number): void;
+	onCameraZoomChanged(callback: (zoom: number) => void): void;
+	onAgentState(callback: (state: import("../../shared/types.js").AgentState) => void): void;
+	sendChat(text: string): void;
+	toggleChat(): void;
+	onChatVisibility(callback: (visible: boolean) => void): void;
+	getAnimationsConfig(): Promise<{
+		clips: Record<import("../../shared/types.js").AgentPhase, string[]>;
+	} | null>;
+
+	// Settings
+	getSettings(): Promise<AvatarSettings>;
+	setOpacity(opacity: number): void;
+	onOpacityChanged(callback: (opacity: number) => void): void;
+
+	// Chat history
+	getChatHistory(): Promise<ChatHistory>;
+	appendChatMessage(role: "user" | "assistant", text: string, agentId?: string): void;
+	clearChatHistory(): void;
+	onChatHistoryCleared(callback: () => void): void;
+
+	// Idle timeout
+	getIdleTimeout(): Promise<number>;
+	setIdleTimeout(ms: number): void;
+	onIdleTimeoutChanged(callback: (ms: number) => void): void;
+
+	// TTS
+	getTtsEnabled(): Promise<boolean>;
+	setTtsEnabled(enabled: boolean): void;
+	onTtsEnabledChanged(callback: (enabled: boolean) => void): void;
+
+	// TTS engine
+	getTtsEngine(): Promise<"web-speech" | "kokoro">;
+	setTtsEngine(engine: "web-speech" | "kokoro"): void;
+	onTtsEngineChanged(callback: (engine: "web-speech" | "kokoro") => void): void;
+
+	// TTS voice
+	getTtsVoice(): Promise<string>;
+	setTtsVoice(voice: string): void;
+	onTtsVoiceChanged(callback: (voice: string) => void): void;
+
+	// Scale
+	getScale(): Promise<number>;
+	onScaleChanged(callback: (scale: number) => void): void;
+
+	// Cursor tracking
+	startCursorTracking(): void;
+	stopCursorTracking(): void;
+	onCursorPosition(
+		callback: (x: number, y: number, screenWidth: number, screenHeight: number) => void,
+	): void;
+}
+
+interface Window {
+	avatarBridge: AvatarBridge;
+}

package/src/renderer/types/chat-bridge.d.ts

@@ -0,0 +1,37 @@
+interface ChatMessage {
+	id: string;
+	timestamp: number;
+	role: "user" | "assistant";
+	text: string;
+	agentId?: string;
+}
+
+interface ChatHistory {
+	schemaVersion: number;
+	messages: ChatMessage[];
+	lastUpdated: number;
+}
+
+interface ChatBridge {
+	onAgentState(callback: (state: import("../../shared/types.js").AgentState) => void): void;
+	sendChat(text: string): void;
+	setIgnoreMouseEvents(ignore: boolean): void;
+	notifyContentHidden(): void;
+	notifyContentShown(): void;
+	onShowBubble(callback: () => void): void;
+
+	// Chat history
+	getChatHistory(): Promise<ChatHistory>;
+	appendChatMessage(role: "user" | "assistant", text: string, agentId?: string): void;
+	clearChatHistory(): void;
+	onChatHistoryCleared(callback: () => void): void;
+
+	// Idle timeout
+	getIdleTimeout(): Promise<number>;
+	setIdleTimeout(ms: number): void;
+	onIdleTimeoutChanged(callback: (ms: number) => void): void;
+}
+
+interface Window {
+	chatBridge: ChatBridge;
+}