flawed-avatar 0.2.1

package/dist/renderer-bundle/styles/components/toast.css

@@ -0,0 +1,204 @@
+/**
+ * Toast Component
+ * Notification messages that appear temporarily
+ */
+
+/* === Toast Container === */
+.toast-container {
+  position: fixed;
+  bottom: var(--space-4);
+  left: 50%;
+  transform: translateX(-50%);
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-2);
+  z-index: var(--z-toast);
+  pointer-events: none;
+}
+
+/* === Base Toast === */
+.toast {
+  display: flex;
+  align-items: center;
+  gap: var(--space-2);
+  padding: var(--space-3) var(--space-4);
+  background: var(--glass-bg);
+  backdrop-filter: blur(var(--glass-blur));
+  -webkit-backdrop-filter: blur(var(--glass-blur));
+  border: 1px solid var(--glass-border);
+  border-radius: var(--radius-lg);
+  box-shadow: var(--shadow-lg);
+  color: var(--text-primary);
+  font-size: var(--font-size-sm);
+  pointer-events: auto;
+  transform: translateY(100%);
+  opacity: 0;
+  transition:
+    transform var(--duration-slower) var(--ease-out-back),
+    opacity var(--duration-normal);
+}
+
+/* Visible state */
+.toast.is-visible {
+  transform: translateY(0);
+  opacity: 1;
+}
+
+/* Exiting state */
+.toast.is-exiting {
+  transform: translateY(100%);
+  opacity: 0;
+  transition:
+    transform var(--duration-normal) var(--ease-out-expo),
+    opacity var(--duration-fast);
+}
+
+/* === Toast Variants === */
+.toast--error {
+  border-color: var(--color-error);
+  background: linear-gradient(
+    135deg,
+    rgba(255, 107, 107, 0.1) 0%,
+    var(--glass-bg) 100%
+  );
+}
+
+.toast--error .toast__icon {
+  color: var(--color-error);
+}
+
+.toast--success {
+  border-color: var(--color-success);
+  background: linear-gradient(
+    135deg,
+    rgba(107, 255, 140, 0.1) 0%,
+    var(--glass-bg) 100%
+  );
+}
+
+.toast--success .toast__icon {
+  color: var(--color-success);
+}
+
+.toast--warning {
+  border-color: var(--color-warning);
+  background: linear-gradient(
+    135deg,
+    rgba(255, 180, 100, 0.1) 0%,
+    var(--glass-bg) 100%
+  );
+}
+
+.toast--warning .toast__icon {
+  color: var(--color-warning);
+}
+
+.toast--info {
+  border-color: var(--accent-blue);
+  background: linear-gradient(
+    135deg,
+    rgba(100, 180, 255, 0.1) 0%,
+    var(--glass-bg) 100%
+  );
+}
+
+.toast--info .toast__icon {
+  color: var(--accent-blue);
+}
+
+/* === Toast Elements === */
+.toast__icon {
+  width: 16px;
+  height: 16px;
+  flex-shrink: 0;
+}
+
+.toast__message {
+  flex: 1;
+  line-height: var(--line-height-tight);
+}
+
+.toast__close {
+  width: 20px;
+  height: 20px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  border-radius: var(--radius-sm);
+  color: var(--text-secondary);
+  cursor: pointer;
+  transition:
+    background var(--duration-fast),
+    color var(--duration-fast);
+}
+
+.toast__close:hover {
+  background: var(--surface-hover);
+  color: var(--text-primary);
+}
+
+.toast__close svg {
+  width: 12px;
+  height: 12px;
+}
+
+/* === Toast with action === */
+.toast__action {
+  padding: var(--space-1) var(--space-2);
+  border-radius: var(--radius-sm);
+  background: var(--surface-button);
+  color: var(--accent-blue);
+  font-size: var(--font-size-xs);
+  font-weight: var(--font-weight-medium);
+  cursor: pointer;
+  transition:
+    background var(--duration-fast),
+    color var(--duration-fast);
+}
+
+.toast__action:hover {
+  background: var(--accent-blue-soft);
+  color: var(--text-primary);
+}
+
+/* === Progress bar for auto-dismiss === */
+.toast__progress {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  height: 2px;
+  background: var(--surface-sunken);
+  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
+  overflow: hidden;
+}
+
+.toast__progress-bar {
+  height: 100%;
+  background: var(--accent-blue);
+  transform-origin: left;
+  animation: toast-progress linear forwards;
+}
+
+@keyframes toast-progress {
+  from {
+    transform: scaleX(1);
+  }
+  to {
+    transform: scaleX(0);
+  }
+}
+
+/* Variant progress colors */
+.toast--error .toast__progress-bar {
+  background: var(--color-error);
+}
+
+.toast--success .toast__progress-bar {
+  background: var(--color-success);
+}
+
+.toast--warning .toast__progress-bar {
+  background: var(--color-warning);
+}

package/dist/renderer-bundle/styles/controls.css

@@ -0,0 +1,279 @@
+/**
+ * Avatar Controls Styles
+ * Uses BEM naming convention and button component
+ */
+
+@import "./tokens.css";
+@import "./components/button.css";
+
+/* Backdrop-filter fallback for unsupported browsers */
+@supports not (backdrop-filter: blur(1px)) {
+  .controls__btn {
+    background: var(--glass-bg-solid) !important;
+  }
+
+  /* Legacy support */
+  #controls button {
+    background: var(--glass-bg-solid) !important;
+  }
+}
+
+/* === Controls Container === */
+.controls {
+  position: absolute;
+  top: var(--space-1);
+  inset-inline-end: var(--space-2);
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-1);
+  opacity: 0;
+  transition: opacity var(--transition-slow);
+  pointer-events: none;
+  z-index: var(--z-dropdown);
+}
+
+/* Legacy ID support */
+#controls {
+  position: absolute;
+  top: var(--space-1);
+  inset-inline-end: var(--space-2);
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-1);
+  opacity: 0;
+  transition: opacity var(--transition-slow);
+  pointer-events: none;
+  z-index: var(--z-dropdown);
+}
+
+/* Show on hover (pixel-sampled opaque hit) */
+body.avatar-hovered .controls,
+body:hover .controls,
+.controls:focus-within {
+  opacity: 1;
+}
+
+/* Legacy support */
+body.avatar-hovered #controls,
+body:hover #controls,
+#controls:focus-within {
+  opacity: 1;
+}
+
+/* === Control Button === */
+.controls__btn {
+  width: 28px;
+  height: 28px;
+  border: none;
+  border-radius: var(--radius-md);
+  background: var(--surface-button);
+  backdrop-filter: blur(8px);
+  -webkit-backdrop-filter: blur(8px);
+  color: rgba(255, 255, 255, 0.7);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  pointer-events: auto;
+  padding: 0;
+  transition:
+    background var(--transition-normal),
+    color var(--transition-normal),
+    transform var(--transition-fast),
+    box-shadow var(--transition-fast);
+}
+
+.controls__btn:hover {
+  background: var(--surface-button-hover);
+  color: var(--text-primary);
+  transform: scale(1.05);
+}
+
+.controls__btn:active {
+  transform: scale(0.95);
+}
+
+.controls__btn:focus-visible {
+  outline: 2px solid var(--accent-blue);
+  outline-offset: 2px;
+}
+
+.controls__btn svg {
+  width: 14px;
+  height: 14px;
+}
+
+/* Legacy support */
+#controls button {
+  width: 28px;
+  height: 28px;
+  border: none;
+  border-radius: var(--radius-md);
+  background: var(--surface-button);
+  backdrop-filter: blur(8px);
+  -webkit-backdrop-filter: blur(8px);
+  color: rgba(255, 255, 255, 0.7);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  pointer-events: auto;
+  padding: 0;
+  transition:
+    background var(--transition-normal),
+    color var(--transition-normal),
+    transform var(--transition-fast),
+    box-shadow var(--transition-fast);
+}
+
+#controls button:hover {
+  background: var(--surface-button-hover);
+  color: var(--text-primary);
+  transform: scale(1.05);
+}
+
+#controls button:active {
+  transform: scale(0.95);
+}
+
+#controls button:focus-visible {
+  outline: 2px solid var(--accent-blue);
+  outline-offset: 2px;
+}
+
+#controls button svg {
+  width: 14px;
+  height: 14px;
+}
+
+/* === Drag Handle === */
+.controls__drag-handle {
+  cursor: grab;
+}
+
+.controls__drag-handle:active {
+  cursor: grabbing;
+}
+
+/* Legacy support */
+#drag-handle {
+  cursor: grab;
+}
+
+#drag-handle:active {
+  cursor: grabbing;
+}
+
+/* === Active State === */
+.controls__btn.is-active {
+  background: var(--accent-blue-soft);
+  color: var(--accent-blue);
+  box-shadow: var(--shadow-glow);
+}
+
+/* Chat toggle */
+.controls__chat-toggle.is-active {
+  background: var(--accent-blue-soft);
+  color: var(--accent-blue);
+  box-shadow: var(--shadow-glow);
+}
+
+/* Legacy support */
+#chat-toggle-btn.active {
+  background: var(--accent-blue-soft);
+  color: var(--accent-blue);
+  box-shadow: var(--shadow-glow);
+}
+
+/* === TTS Toggle === */
+.controls__tts-toggle .icon-on {
+  display: none;
+}
+
+.controls__tts-toggle .icon-off {
+  display: block;
+}
+
+.controls__tts-toggle.is-active .icon-on {
+  display: block;
+}
+
+.controls__tts-toggle.is-active .icon-off {
+  display: none;
+}
+
+.controls__tts-toggle.is-active {
+  background: var(--accent-blue-soft);
+  color: var(--accent-blue);
+  box-shadow: var(--shadow-glow);
+}
+
+.controls__tts-toggle.is-speaking {
+  animation: tts-pulse 1.5s ease-in-out infinite;
+}
+
+/* Legacy support */
+#tts-toggle-btn .icon-on {
+  display: none;
+}
+
+#tts-toggle-btn .icon-off {
+  display: block;
+}
+
+#tts-toggle-btn.active .icon-on {
+  display: block;
+}
+
+#tts-toggle-btn.active .icon-off {
+  display: none;
+}
+
+#tts-toggle-btn.active {
+  background: var(--accent-blue-soft);
+  color: var(--accent-blue);
+  box-shadow: var(--shadow-glow);
+}
+
+#tts-toggle-btn.speaking {
+  animation: tts-pulse 1.5s ease-in-out infinite;
+}
+
+@keyframes tts-pulse {
+  0%,
+  100% {
+    box-shadow: var(--shadow-glow);
+  }
+  50% {
+    box-shadow: var(--glow-blue-md);
+  }
+}
+
+/* === Responsive Design === */
+@media (max-width: 480px) {
+  .controls,
+  #controls {
+    top: var(--space-2);
+    inset-inline-end: var(--space-2);
+  }
+
+  .controls__btn,
+  #controls button {
+    width: 32px;
+    height: 32px;
+  }
+
+  .controls__btn svg,
+  #controls button svg {
+    width: 16px;
+    height: 16px;
+  }
+}
+
+/* === Forced Colors Mode === */
+@media (forced-colors: active) {
+  .controls__btn,
+  #controls button {
+    border: 2px solid currentColor;
+  }
+}