flawed-avatar 0.2.1 → 0.2.2

package/dist/settings-renderer-bundle/styles/chat.css

@@ -0,0 +1,516 @@
+/**
+ * Chat Component Styles
+ * Uses BEM naming convention and imports component styles
+ */
+
+@import "./tokens.css";
+@import "./base.css";
+@import "./components/button.css";
+@import "./components/input.css";
+@import "./components/indicator.css";
+@import "./components/toast.css";
+
+/* === Backdrop fallback === */
+@supports not (backdrop-filter: blur(1px)) {
+  .chat__body {
+    background: var(--glass-bg-solid) !important;
+  }
+}
+
+/* === Chat Container === */
+.chat {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  box-sizing: border-box;
+  min-height: 0;
+  overflow: hidden;
+}
+
+/* Legacy ID support - maps to BEM class */
+#chat-container {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  box-sizing: border-box;
+  min-height: 0;
+  overflow: hidden;
+}
+
+/* === Chat Body (glass panel) === */
+.chat__body {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  background:
+    linear-gradient(180deg, rgba(255, 255, 255, 0.03) 0%, transparent 40%),
+    var(--glass-bg);
+  backdrop-filter: blur(16px);
+  -webkit-backdrop-filter: blur(16px);
+  border: 1px solid var(--glass-border);
+  border-radius: var(--radius-xl);
+  box-shadow:
+    var(--shadow-lg),
+    inset 0 1px 0 rgba(255, 255, 255, 0.06);
+  min-height: 0;
+  overflow: hidden;
+}
+
+/* Legacy ID support */
+#chat-body {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  background:
+    linear-gradient(180deg, rgba(255, 255, 255, 0.03) 0%, transparent 40%),
+    var(--glass-bg);
+  backdrop-filter: blur(16px);
+  -webkit-backdrop-filter: blur(16px);
+  border: 1px solid var(--glass-border);
+  border-radius: var(--radius-xl);
+  box-shadow:
+    var(--shadow-lg),
+    inset 0 1px 0 rgba(255, 255, 255, 0.06);
+  min-height: 0;
+  overflow: hidden;
+}
+
+/* === Chat Tail (speech bubble pointer) === */
+.chat__tail {
+  width: var(--chat-tail-width);
+  height: var(--chat-tail-height);
+  margin: -1px auto 0;
+  background: var(--glass-bg);
+  clip-path: polygon(0 0, 100% 0, 50% 100%);
+}
+
+/* Legacy ID support */
+#chat-tail {
+  width: var(--chat-tail-width);
+  height: var(--chat-tail-height);
+  margin: -1px auto 0;
+  background: var(--glass-bg);
+  clip-path: polygon(0 0, 100% 0, 50% 100%);
+}
+
+/* === Chat Bubble Container === */
+.chat__bubble {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+  overflow: hidden;
+  opacity: 1;
+  pointer-events: auto;
+  transition: opacity var(--transition-slow);
+}
+
+/* Legacy ID support */
+#chat-bubble {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+  overflow: hidden;
+  opacity: 1;
+  pointer-events: auto;
+  transition: opacity var(--transition-slow);
+}
+
+/* === Messages Area === */
+.chat__messages {
+  flex: 1;
+  overflow-y: auto;
+  overflow-x: hidden;
+  padding: var(--space-2);
+  font-family: var(--font-sans);
+  font-size: var(--font-size-md);
+  line-height: var(--line-height);
+  color: var(--text-primary);
+  scroll-behavior: smooth;
+  contain: strict;
+  content-visibility: auto;
+  contain-intrinsic-size: 0 500px;
+}
+
+/* Legacy ID support */
+#chat-messages {
+  flex: 1;
+  overflow-y: auto;
+  overflow-x: hidden;
+  padding: var(--space-2);
+  font-family: var(--font-sans);
+  font-size: var(--font-size-md);
+  line-height: var(--line-height);
+  color: var(--text-primary);
+  scroll-behavior: smooth;
+  contain: strict;
+  content-visibility: auto;
+  contain-intrinsic-size: 0 500px;
+}
+
+/* === Message Bubbles === */
+.message {
+  padding: var(--space-3) var(--space-4);
+  margin-bottom: var(--space-2);
+  word-wrap: break-word;
+  animation: message-appear var(--duration-slower) var(--ease-out-expo);
+  box-shadow: var(--shadow-xs);
+  contain: content;
+  will-change: transform, opacity;
+}
+
+@keyframes message-appear {
+  from {
+    opacity: 0;
+    transform: translateY(8px) scale(0.98);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0) scale(1);
+  }
+}
+
+/* Assistant message */
+.message--assistant {
+  background: linear-gradient(
+    135deg,
+    var(--surface-message-assistant) 0%,
+    rgba(255, 255, 255, 0.02) 100%
+  );
+  border: 1px solid rgba(255, 255, 255, 0.05);
+  border-radius: var(--radius-lg) var(--radius-lg) var(--radius-lg) var(--radius-sm);
+  margin-inline-end: var(--chat-message-margin);
+  color: var(--text-assistant);
+}
+
+/* Legacy class support */
+.chat-assistant-msg {
+  background: linear-gradient(
+    135deg,
+    var(--surface-message-assistant) 0%,
+    rgba(255, 255, 255, 0.02) 100%
+  );
+  border: 1px solid rgba(255, 255, 255, 0.05);
+  border-radius: var(--radius-lg) var(--radius-lg) var(--radius-lg) var(--radius-sm);
+  margin-inline-end: var(--chat-message-margin);
+  color: var(--text-assistant);
+  padding: var(--space-3) var(--space-4);
+  margin-bottom: var(--space-2);
+  word-wrap: break-word;
+  animation: message-appear var(--duration-slower) var(--ease-out-expo);
+  box-shadow: var(--shadow-xs);
+}
+
+/* User message */
+.message--user {
+  background: linear-gradient(
+    135deg,
+    var(--surface-message-user) 0%,
+    rgba(100, 180, 255, 0.08) 100%
+  );
+  border: 1px solid rgba(100, 180, 255, 0.12);
+  border-radius: var(--radius-lg) var(--radius-lg) var(--radius-sm) var(--radius-lg);
+  margin-inline-start: var(--chat-message-margin);
+  color: var(--text-user);
+  text-align: end;
+}
+
+/* Legacy class support */
+.chat-user-msg {
+  background: linear-gradient(
+    135deg,
+    var(--surface-message-user) 0%,
+    rgba(100, 180, 255, 0.08) 100%
+  );
+  border: 1px solid rgba(100, 180, 255, 0.12);
+  border-radius: var(--radius-lg) var(--radius-lg) var(--radius-sm) var(--radius-lg);
+  margin-inline-start: var(--chat-message-margin);
+  color: var(--text-user);
+  text-align: end;
+  padding: var(--space-3) var(--space-4);
+  margin-bottom: var(--space-2);
+  word-wrap: break-word;
+  animation: message-appear var(--duration-slower) var(--ease-out-expo);
+  box-shadow: var(--shadow-xs);
+}
+
+/* === Empty State === */
+.chat-empty {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: var(--space-6);
+  text-align: center;
+  color: var(--text-secondary);
+  gap: var(--space-2);
+  flex: 1;
+}
+
+.chat-empty__icon {
+  width: 48px;
+  height: 48px;
+  opacity: 0.5;
+  font-size: 32px;
+}
+
+.chat-empty__title {
+  font-size: var(--font-size-md);
+  font-weight: var(--font-weight-medium);
+}
+
+.chat-empty__message {
+  font-size: var(--font-size-sm);
+  max-width: 200px;
+  line-height: var(--line-height-relaxed);
+}
+
+/* === Error State === */
+.chat-error {
+  display: flex;
+  align-items: center;
+  gap: var(--space-2);
+  padding: var(--space-3);
+  background: var(--color-error-soft);
+  border: 1px solid var(--color-error);
+  border-radius: var(--radius-md);
+  color: var(--color-error);
+  font-size: var(--font-size-sm);
+  margin: var(--space-2);
+}
+
+.chat-error__icon {
+  width: 16px;
+  height: 16px;
+  flex-shrink: 0;
+}
+
+.chat-error__message {
+  flex: 1;
+}
+
+.chat-error__retry {
+  padding: var(--space-1) var(--space-2);
+  background: transparent;
+  border: 1px solid var(--color-error);
+  border-radius: var(--radius-sm);
+  color: var(--color-error);
+  font-size: var(--font-size-xs);
+  cursor: pointer;
+  transition:
+    background var(--duration-fast),
+    color var(--duration-fast);
+}
+
+.chat-error__retry:hover {
+  background: var(--color-error);
+  color: var(--text-primary);
+}
+
+/* === Loading State === */
+.chat-loading {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-2);
+  padding: var(--space-2);
+}
+
+/* === Input Area === */
+.chat__input-row {
+  display: flex;
+  align-items: center;
+  gap: var(--space-sm);
+  padding: var(--space-2);
+  background: var(--surface-sunken);
+  border-top: 1px solid rgba(255, 255, 255, 0.05);
+}
+
+/* Legacy ID support */
+#chat-input-row {
+  display: flex;
+  align-items: center;
+  gap: var(--space-sm);
+  padding: var(--space-2);
+  background: var(--surface-sunken);
+  border-top: 1px solid rgba(255, 255, 255, 0.05);
+}
+
+/* Chat input - extends .input */
+.chat__input {
+  flex: 1;
+}
+
+/* Legacy ID support */
+#chat-input {
+  flex: 1;
+  background: var(--surface-input);
+  border: 1px solid var(--glass-border);
+  border-radius: var(--radius-full);
+  padding: var(--space-2) var(--space-xl);
+  color: var(--text-primary);
+  font-family: var(--font-sans);
+  font-size: var(--font-size-md);
+  outline: none;
+  transition:
+    border-color var(--transition-normal),
+    box-shadow var(--transition-normal);
+}
+
+#chat-input:focus {
+  border-color: rgba(100, 180, 255, 0.5);
+  box-shadow: 0 0 0 2px rgba(100, 180, 255, 0.15);
+}
+
+#chat-input::placeholder {
+  color: var(--text-secondary);
+  opacity: 0.6;
+}
+
+/* Send button - uses .btn .btn--icon */
+.chat__send {
+  /* Additional chat-specific styles if needed */
+}
+
+/* Legacy ID support */
+#send-btn {
+  width: 32px;
+  height: 32px;
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border: none;
+  border-radius: 50%;
+  background: var(--accent-blue-soft);
+  color: var(--accent-blue);
+  cursor: pointer;
+  transition:
+    background var(--transition-normal),
+    color var(--transition-normal),
+    transform var(--transition-fast),
+    opacity var(--transition-normal);
+}
+
+#send-btn:hover:not(:disabled) {
+  background: rgba(100, 180, 255, 0.35);
+  color: var(--text-primary);
+  transform: scale(1.05);
+}
+
+#send-btn:active:not(:disabled) {
+  transform: scale(0.95);
+}
+
+#send-btn:disabled {
+  opacity: 0.3;
+  cursor: not-allowed;
+}
+
+#send-btn:focus-visible {
+  outline: 2px solid var(--accent-blue);
+  outline-offset: 2px;
+}
+
+#send-btn svg {
+  width: 14px;
+  height: 14px;
+}
+
+/* === Character Counter === */
+.chat__char-counter {
+  font-size: var(--font-size-xs);
+  color: var(--text-secondary);
+  opacity: 0;
+  transition: opacity var(--transition-normal);
+  padding-inline-end: var(--space-1);
+}
+
+.chat__char-counter.is-visible {
+  opacity: 1;
+}
+
+.chat__char-counter--warning {
+  color: var(--accent-amber);
+}
+
+.chat__char-counter--error {
+  color: var(--color-error);
+}
+
+/* Legacy ID and class support */
+#char-counter {
+  font-size: var(--font-size-xs);
+  color: var(--text-secondary);
+  opacity: 0;
+  transition: opacity var(--transition-normal);
+  padding-inline-end: var(--space-1);
+}
+
+#char-counter.visible {
+  opacity: 1;
+}
+
+#char-counter.warning {
+  color: var(--accent-amber);
+}
+
+#char-counter.error {
+  color: var(--color-error);
+}
+
+/* === Responsive Design === */
+@media (max-width: 480px) {
+  .chat__body,
+  #chat-body {
+    border-radius: var(--radius-md);
+  }
+
+  .message,
+  .chat-assistant-msg,
+  .chat-user-msg {
+    padding: var(--space-2) var(--space-3);
+    font-size: var(--font-size-sm);
+  }
+
+  .message--assistant,
+  .chat-assistant-msg {
+    margin-inline-end: var(--space-3);
+  }
+
+  .message--user,
+  .chat-user-msg {
+    margin-inline-start: var(--space-3);
+  }
+
+  .chat__input,
+  #chat-input {
+    font-size: 16px; /* Prevent iOS zoom */
+  }
+}
+
+/* === Focus Indicators (Accessibility) === */
+:focus {
+  outline: none;
+}
+
+:focus-visible {
+  outline: 2px solid var(--accent-blue);
+  outline-offset: 2px;
+  box-shadow: 0 0 0 4px var(--surface-focus);
+}
+
+/* === Forced Colors Mode === */
+@media (forced-colors: active) {
+  .message,
+  .chat-assistant-msg,
+  .chat-user-msg {
+    border: 2px solid currentColor;
+  }
+
+  .chat-error {
+    border: 2px solid currentColor;
+  }
+}

package/dist/settings-renderer-bundle/styles/components/button.css

@@ -0,0 +1,221 @@
+/**
+ * Button Component
+ * Reusable button styles with variants
+ */
+
+/* === Base Button === */
+.btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border: none;
+  cursor: pointer;
+  font-family: var(--font-sans);
+  font-size: var(--font-size-md);
+  transition:
+    background var(--duration-fast) var(--ease-out-expo),
+    color var(--duration-fast) var(--ease-out-expo),
+    transform var(--duration-normal) var(--ease-out-back),
+    box-shadow var(--duration-fast) var(--ease-out-expo),
+    opacity var(--duration-normal);
+}
+
+.btn:hover:not(:disabled) {
+  transform: translateY(-1px);
+}
+
+.btn:active:not(:disabled) {
+  transform: translateY(0) scale(0.96);
+}
+
+.btn:disabled {
+  opacity: 0.4;
+  cursor: not-allowed;
+}
+
+/* Focus visible */
+.btn:focus {
+  outline: none;
+}
+
+.btn:focus-visible {
+  outline: 2px solid var(--accent-blue);
+  outline-offset: 2px;
+  box-shadow: 0 0 0 4px var(--surface-focus);
+}
+
+/* === Icon Button Variant === */
+.btn--icon {
+  width: 32px;
+  height: 32px;
+  padding: 0;
+  border-radius: 50%;
+  background: var(--accent-blue-soft);
+  color: var(--accent-blue);
+  flex-shrink: 0;
+}
+
+.btn--icon:hover:not(:disabled) {
+  background: rgba(100, 180, 255, 0.35);
+  color: var(--text-primary);
+  box-shadow: var(--glow-blue-sm);
+  transform: scale(1.05);
+}
+
+.btn--icon:active:not(:disabled) {
+  transform: scale(0.95);
+}
+
+.btn--icon svg {
+  width: 14px;
+  height: 14px;
+}
+
+/* === Ghost Button Variant === */
+.btn--ghost {
+  width: 28px;
+  height: 28px;
+  padding: 0;
+  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);
+}
+
+.btn--ghost:hover:not(:disabled) {
+  background: var(--surface-hover);
+  color: var(--text-primary);
+  box-shadow: var(--shadow-sm);
+  transform: scale(1.05);
+}
+
+.btn--ghost:active:not(:disabled) {
+  transform: scale(0.95);
+}
+
+.btn--ghost svg {
+  width: 14px;
+  height: 14px;
+}
+
+/* === Primary Button Variant === */
+.btn--primary {
+  padding: var(--space-2) var(--space-4);
+  border-radius: var(--radius-md);
+  background: var(--accent-blue);
+  color: rgba(0, 0, 0, 0.9);
+  font-weight: var(--font-weight-medium);
+}
+
+.btn--primary:hover:not(:disabled) {
+  background: rgba(120, 190, 255, 1);
+  box-shadow: var(--glow-blue-sm);
+}
+
+/* === Secondary Button Variant === */
+.btn--secondary {
+  padding: var(--space-2) var(--space-4);
+  border-radius: var(--radius-md);
+  background: var(--surface-button);
+  border: 1px solid var(--glass-border);
+  color: var(--text-primary);
+}
+
+.btn--secondary:hover:not(:disabled) {
+  background: var(--surface-hover);
+  border-color: var(--glass-border-hover);
+}
+
+/* === Size Variants === */
+.btn--sm {
+  width: 24px;
+  height: 24px;
+}
+
+.btn--sm svg {
+  width: 12px;
+  height: 12px;
+}
+
+.btn--lg {
+  width: 40px;
+  height: 40px;
+}
+
+.btn--lg svg {
+  width: 18px;
+  height: 18px;
+}
+
+/* === State Modifiers === */
+.btn--active,
+.btn.is-active {
+  background: var(--accent-blue-soft);
+  color: var(--accent-blue);
+  box-shadow: var(--shadow-glow);
+}
+
+.btn--loading {
+  position: relative;
+  color: transparent;
+  pointer-events: none;
+}
+
+.btn--loading::after {
+  content: "";
+  position: absolute;
+  width: 14px;
+  height: 14px;
+  border: 2px solid currentColor;
+  border-right-color: transparent;
+  border-radius: 50%;
+  animation: btn-spin 0.6s linear infinite;
+}
+
+@keyframes btn-spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+/* === Icon visibility toggle === */
+.btn .icon-on {
+  display: none;
+}
+
+.btn .icon-off {
+  display: block;
+}
+
+.btn.is-active .icon-on,
+.btn--active .icon-on {
+  display: block;
+}
+
+.btn.is-active .icon-off,
+.btn--active .icon-off {
+  display: none;
+}
+
+/* === Speaking animation === */
+.btn--speaking {
+  animation: btn-pulse 1.5s ease-in-out infinite;
+}
+
+@keyframes btn-pulse {
+  0%,
+  100% {
+    box-shadow: var(--shadow-glow);
+  }
+  50% {
+    box-shadow: var(--glow-blue-md);
+  }
+}
+
+/* === Forced colors mode === */
+@media (forced-colors: active) {
+  .btn {
+    border: 2px solid currentColor;
+  }
+}