snice 5.2.3 → 6.0.0

package/dist/components/chat/snice-chat.js

@@ -1,9 +1,32 @@
 import { __runInitializers, __esDecorate } from 'tslib';
-import { element, property, query, styles, ready, dispose, watch, dispatch, render, css, html } from 'snice';
+import { element, property, query, styles, ready, observe, dispose, watch, dispatch, render, css, html, unsafeHTML } from 'snice';
+import { PENCIL, TRASH, PAPER_CLIP, PAPER_AIRPLANE_SOLID } from '../icons/index.js';
+import { FALLBACK_ACCENTS } from '../utils.js';
 import '../empty-state/snice-empty-state.js';
-import '../utils.js';
+import '../markdown/snice-markdown.js';
+import './snice-chat-message.js';
 
-var cssContent = ":host{display:flex;flex-direction:column;height:var(--snice-chat-height,37.5rem);font-family:var(--snice-font-family, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif);font-size:var(--snice-font-size-md, 1rem);line-height:1.5;color:var(--snice-color-text,rgb(23 23 23));background:var(--snice-color-surface-container-high,rgb(252 251 249));border:1px solid var(--snice-color-border,rgb(226 226 226));border-radius:var(--snice-border-radius-md,.25rem);overflow:hidden;box-shadow:var(--snice-shadow-md,0 4px 6px -1px rgb(0 0 0 / .1),0 2px 4px -2px rgb(0 0 0 / .1))}.chat-container{display:flex;flex-direction:column;height:100%}.messages-area{flex:1;overflow-y:auto;padding:var(--snice-spacing-md,1rem);display:flex;flex-direction:column;gap:var(--snice-spacing-sm,.75rem)}.messages-area::-webkit-scrollbar{width:8px}.messages-area::-webkit-scrollbar-track{background:0 0}.messages-area::-webkit-scrollbar-thumb{background:var(--snice-color-border,rgb(226 226 226));border-radius:var(--snice-border-radius-md,.25rem)}.messages-area::-webkit-scrollbar-thumb:hover{background:var(--snice-color-text-secondary,rgb(82 82 82))}.message{display:flex;gap:var(--snice-spacing-sm,.75rem);padding:var(--snice-spacing-2xs,.25rem) 0;position:relative}.message:hover .message-actions{opacity:1}.message-avatar{width:2.25rem;height:2.25rem;border-radius:var(--snice-border-radius-md,.25rem);background:var(--snice-color-surface-container-low,rgb(250 250 250));display:flex;align-items:center;justify-content:center;color:var(--snice-color-text-secondary,rgb(82 82 82));font-weight:var(--snice-font-weight-semibold,600);font-size:var(--snice-font-size-sm, .875rem);flex-shrink:0}.message-avatar img{width:100%;height:100%;border-radius:var(--snice-border-radius-md,.25rem);object-fit:cover}.message-content{flex:1;min-width:0}.message-header{font-family:var(--snice-font-family-display);display:flex;align-items:baseline;gap:var(--snice-spacing-xs,.5rem);margin-bottom:var(--snice-spacing-3xs,.125rem)}.message-author{font-weight:var(--snice-font-weight-bold,700);color:var(--snice-color-text,rgb(23 23 23))}.message-timestamp{font-size:var(--snice-font-size-xs, .75rem);color:var(--snice-color-text-secondary,rgb(82 82 82))}.message-edited{font-size:var(--snice-font-size-xs, .75rem);color:var(--snice-color-text-secondary,rgb(82 82 82));font-style:italic}.message-text{word-wrap:break-word;white-space:pre-wrap;color:var(--snice-color-text,rgb(23 23 23))}.message.system{justify-content:center}.message.system .message-text{text-align:center;color:var(--snice-color-text-secondary,rgb(82 82 82));font-size:var(--snice-font-size-sm, .875rem);font-style:italic}.message-attachment{margin-top:var(--snice-spacing-xs,.5rem);border:1px solid var(--snice-color-border,rgb(226 226 226));border-radius:var(--snice-border-radius-md,.25rem);overflow:hidden;max-width:25rem}.message-attachment img{max-width:100%;display:block}.attachment-file{display:flex;align-items:center;gap:var(--snice-spacing-sm,.75rem);padding:var(--snice-spacing-sm,.75rem);background:var(--snice-color-surface-container-low,rgb(250 250 250))}.attachment-icon{width:2rem;height:2rem;display:flex;align-items:center;justify-content:center;background:var(--snice-color-surface,rgb(255 255 255));border-radius:var(--snice-border-radius-md,.25rem);color:var(--snice-color-text-secondary,rgb(82 82 82))}.attachment-info{flex:1;min-width:0}.attachment-name{font-weight:var(--snice-font-weight-medium,500);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.attachment-size{font-size:var(--snice-font-size-xs, .75rem);color:var(--snice-color-text-secondary,rgb(82 82 82))}.message-reactions{display:flex;gap:var(--snice-spacing-2xs,.25rem);margin-top:var(--snice-spacing-2xs,.25rem);flex-wrap:wrap}.reaction{display:flex;align-items:center;gap:var(--snice-spacing-2xs,.25rem);padding:var(--snice-spacing-3xs,.125rem) var(--snice-spacing-xs,.5rem);background:var(--snice-color-surface-container-low,rgb(250 250 250));border:1px solid var(--snice-color-border,rgb(226 226 226));border-radius:12px;font-size:var(--snice-font-size-sm, .875rem);cursor:pointer;transition:all var(--snice-transition-fast, 150ms)}.reaction:hover{background:var(--snice-color-surface-hover,rgb(242 242 242))}.reaction.active{background:var(--snice-color-primary,rgb(37 99 235));color:var(--snice-color-text-inverse,rgb(250 250 250));border-color:var(--snice-color-primary,rgb(37 99 235))}.reaction-emoji{font-size:var(--snice-font-size-sm, .875rem)}.reaction-count{font-size:var(--snice-font-size-xs, .75rem);font-weight:var(--snice-font-weight-medium,500)}.message-actions{position:absolute;top:-.75rem;right:var(--snice-spacing-md,1rem);background:var(--snice-color-surface-container-high,rgb(252 251 249));border:1px solid var(--snice-color-border,rgb(226 226 226));border-radius:var(--snice-border-radius-md,.25rem);box-shadow:var(--snice-shadow-md,0 4px 6px -1px rgb(0 0 0 / .1),0 2px 4px -2px rgb(0 0 0 / .1));display:flex;gap:var(--snice-spacing-3xs,.125rem);opacity:0;transition:opacity var(--snice-transition-fast, 150ms);padding:var(--snice-spacing-3xs,.125rem)}.action-button{width:1.75rem;height:1.75rem;border:none;background:0 0;cursor:pointer;border-radius:var(--snice-border-radius-md,.25rem);display:flex;align-items:center;justify-content:center;color:var(--snice-color-text-secondary,rgb(82 82 82));transition:background var(--snice-transition-fast, 150ms)}.action-button:hover{background:var(--snice-color-surface-hover,rgb(242 242 242))}.action-button svg{width:1rem;height:1rem}.typing-indicators{padding:0 var(--snice-spacing-md,1rem) var(--snice-spacing-xs,.5rem);min-height:1.5rem}.typing-indicator{display:flex;align-items:center;gap:var(--snice-spacing-xs,.5rem);font-size:var(--snice-font-size-sm, .875rem);color:var(--snice-color-text-secondary,rgb(82 82 82));font-style:italic}.typing-dots{display:flex;gap:.1875rem}.typing-dot{width:6px;height:6px;background:var(--snice-color-text-secondary,rgb(82 82 82));border-radius:50%;animation:1.4s ease-in-out infinite typing-bounce}.typing-dot:first-child{animation-delay:0s}.typing-dot:nth-child(2){animation-delay:.2s}.typing-dot:nth-child(3){animation-delay:.4s}@keyframes typing-bounce{0%,100%,60%{transform:translateY(0)}30%{transform:translateY(-4px)}}.input-area{border-top:1px solid var(--snice-color-border,rgb(226 226 226));padding:var(--snice-spacing-md,1rem);background:var(--snice-color-surface-container-high,rgb(252 251 249))}.input-container{display:flex;align-items:flex-end;gap:var(--snice-spacing-xs,.5rem);background:var(--snice-color-surface-container-lowest,rgb(255 255 255));border:1px solid var(--snice-color-border,rgb(226 226 226));border-radius:var(--snice-border-radius-md,.25rem);padding:var(--snice-spacing-xs,.5rem);transition:border-color var(--snice-transition-fast, 150ms)}.input-container:focus-within{border-color:var(--snice-color-primary,rgb(37 99 235))}.input-field{flex:1;border:none;outline:0;resize:none;font-family:inherit;font-size:var(--snice-font-size-md, 1rem);line-height:1.5;min-height:1.375rem;max-height:9.375rem;overflow-y:auto;background:0 0;color:var(--snice-color-text,rgb(23 23 23))}.input-field::placeholder{color:var(--snice-color-text-secondary,rgb(82 82 82))}.input-field::-webkit-scrollbar{width:4px}.input-field::-webkit-scrollbar-thumb{background:var(--snice-color-border,rgb(226 226 226));border-radius:var(--snice-border-radius-sm,.125rem)}.input-buttons{display:flex;gap:var(--snice-spacing-2xs,.25rem)}.input-button{width:2rem;height:2rem;border:none;background:0 0;cursor:pointer;border-radius:var(--snice-border-radius-md,.25rem);display:flex;align-items:center;justify-content:center;color:var(--snice-color-text-secondary,rgb(82 82 82));transition:background var(--snice-transition-fast, 150ms)}.input-button:hover{background:var(--snice-color-surface-hover,rgb(242 242 242))}.input-button:disabled{opacity:.5;cursor:not-allowed}.input-button.send{color:var(--snice-color-text-inverse,rgb(250 250 250));background:var(--snice-color-primary,rgb(37 99 235))}.input-button.send:hover:not(:disabled){background:var(--snice-color-primary-hover,rgb(29 78 216))}.input-button svg{width:1.125rem;height:1.125rem}input[type=file]{display:none}";
+/**
+ * Types for the snice-chat component
+ */
+/**
+ * How a message body is rendered
+ */
+var MessageFormat;
+(function (MessageFormat) {
+    MessageFormat["Text"] = "text";
+    MessageFormat["Markdown"] = "markdown";
+})(MessageFormat || (MessageFormat = {}));
+/**
+ * Built-in message layout for snice-chat
+ */
+var ChatLayout;
+(function (ChatLayout) {
+    ChatLayout["Default"] = "default";
+    ChatLayout["Bubbles"] = "bubbles";
+})(ChatLayout || (ChatLayout = {}));
+
+var cssContent = ":host{display:flex;flex-direction:column;height:var(--snice-chat-height,37.5rem);font-family:var(--snice-font-family, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif);font-size:var(--snice-font-size-md, 1rem);line-height:1.5;color:var(--snice-color-text,rgb(23 23 23));background:var(--snice-color-surface-container-high,rgb(252 251 249));border:1px solid var(--snice-color-border,rgb(226 226 226));border-radius:var(--snice-border-radius-md,.25rem);overflow:hidden;box-shadow:var(--snice-shadow-md,0 4px 6px -1px rgb(0 0 0 / .1),0 2px 4px -2px rgb(0 0 0 / .1))}.chat-container{display:flex;flex-direction:column;height:100%}.messages-area{flex:1;overflow-y:auto;padding:var(--snice-spacing-md,1rem);display:flex;flex-direction:column;gap:var(--snice-spacing-sm,.75rem)}.messages-area::-webkit-scrollbar{width:8px}.messages-area::-webkit-scrollbar-track{background:0 0}.messages-area::-webkit-scrollbar-thumb{background:var(--snice-color-border,rgb(226 226 226));border-radius:var(--snice-border-radius-md,.25rem)}.messages-area::-webkit-scrollbar-thumb:hover{background:var(--snice-color-text-secondary,rgb(82 82 82))}.message{display:flex;gap:var(--snice-spacing-sm,.75rem);padding:var(--snice-spacing-2xs,.25rem) 0;position:relative}.message:hover .message-actions{opacity:1}.message-avatar{width:2.25rem;height:2.25rem;border-radius:var(--snice-border-radius-md,.25rem);background:var(--snice-color-surface-container-low,rgb(250 250 250));display:flex;align-items:center;justify-content:center;color:var(--snice-color-text-secondary,rgb(82 82 82));font-weight:var(--snice-font-weight-semibold,600);font-size:var(--snice-font-size-sm, .875rem);flex-shrink:0}.message-avatar img{width:100%;height:100%;border-radius:var(--snice-border-radius-md,.25rem);object-fit:cover}.message-content{flex:1;min-width:0}.message-header{font-family:var(--snice-font-family-display);display:flex;align-items:baseline;gap:var(--snice-spacing-xs,.5rem);margin-bottom:var(--snice-spacing-3xs,.125rem)}.message-author{font-weight:var(--snice-font-weight-bold,700);color:var(--snice-chat-author-color,var(--snice-color-text,rgb(23 23 23)))}.message-timestamp{font-size:var(--snice-font-size-xs, .75rem);color:var(--snice-color-text-secondary,rgb(82 82 82))}.message-edited{font-size:var(--snice-font-size-xs, .75rem);color:var(--snice-color-text-secondary,rgb(82 82 82));font-style:italic}.message-text{word-wrap:break-word;white-space:pre-wrap;color:var(--snice-color-text,rgb(23 23 23))}snice-markdown.message-text{white-space:normal;display:block}.message.system{justify-content:center}.message.system .message-text{text-align:center;color:var(--snice-color-text-secondary,rgb(82 82 82));font-size:var(--snice-font-size-sm, .875rem);font-style:italic}.message-attachment{margin-top:var(--snice-spacing-xs,.5rem);border:1px solid var(--snice-color-border,rgb(226 226 226));border-radius:var(--snice-border-radius-md,.25rem);overflow:hidden;max-width:25rem}.message-attachment img{max-width:100%;display:block}.attachment-file{display:flex;align-items:center;gap:var(--snice-spacing-sm,.75rem);padding:var(--snice-spacing-sm,.75rem);background:var(--snice-color-surface-container-low,rgb(250 250 250))}.attachment-icon{width:2rem;height:2rem;display:flex;align-items:center;justify-content:center;background:var(--snice-color-surface,rgb(255 255 255));border-radius:var(--snice-border-radius-md,.25rem);color:var(--snice-color-text-secondary,rgb(82 82 82))}.attachment-info{flex:1;min-width:0}.attachment-name{font-weight:var(--snice-font-weight-medium,500);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.attachment-size{font-size:var(--snice-font-size-xs, .75rem);color:var(--snice-color-text-secondary,rgb(82 82 82))}.message-reactions{display:flex;gap:var(--snice-spacing-2xs,.25rem);margin-top:var(--snice-spacing-2xs,.25rem);flex-wrap:wrap}.reaction{display:flex;align-items:center;gap:var(--snice-spacing-2xs,.25rem);padding:var(--snice-spacing-3xs,.125rem) var(--snice-spacing-xs,.5rem);background:var(--snice-color-surface-container-low,rgb(250 250 250));border:1px solid var(--snice-color-border,rgb(226 226 226));border-radius:12px;font-size:var(--snice-font-size-sm, .875rem);cursor:pointer;transition:all var(--snice-transition-fast, 150ms)}.reaction:hover{background:var(--snice-color-surface-hover,rgb(242 242 242))}.reaction.active{background:var(--snice-color-primary,rgb(37 99 235));color:var(--snice-color-text-inverse,rgb(250 250 250));border-color:var(--snice-color-primary,rgb(37 99 235))}.reaction-emoji{font-size:var(--snice-font-size-sm, .875rem)}.reaction-count{font-size:var(--snice-font-size-xs, .75rem);font-weight:var(--snice-font-weight-medium,500)}.message-actions{position:absolute;top:-.75rem;right:var(--snice-spacing-md,1rem);background:var(--snice-color-surface-container-high,rgb(252 251 249));border:1px solid var(--snice-color-border,rgb(226 226 226));border-radius:var(--snice-border-radius-md,.25rem);box-shadow:var(--snice-shadow-md,0 4px 6px -1px rgb(0 0 0 / .1),0 2px 4px -2px rgb(0 0 0 / .1));display:flex;gap:var(--snice-spacing-3xs,.125rem);opacity:0;transition:opacity var(--snice-transition-fast, 150ms);padding:var(--snice-spacing-3xs,.125rem)}.action-button{width:1.75rem;height:1.75rem;border:none;background:0 0;cursor:pointer;border-radius:var(--snice-border-radius-md,.25rem);display:flex;align-items:center;justify-content:center;color:var(--snice-color-text-secondary,rgb(82 82 82));transition:background var(--snice-transition-fast, 150ms)}.action-button:hover{background:var(--snice-color-surface-hover,rgb(242 242 242))}.action-button svg{width:1rem;height:1rem}.action-emoji{font-size:var(--snice-font-size-sm, .875rem);line-height:1}.message-edit{display:flex;flex-direction:column;gap:var(--snice-spacing-xs,.5rem);margin-top:var(--snice-spacing-3xs,.125rem)}.edit-field{width:100%;box-sizing:border-box;resize:vertical;min-height:2.5rem;font-family:inherit;font-size:var(--snice-font-size-md, 1rem);line-height:1.5;color:var(--snice-color-text,rgb(23 23 23));background:var(--snice-color-surface-container-lowest,rgb(255 255 255));border:1px solid var(--snice-color-border,rgb(226 226 226));border-radius:var(--snice-border-radius-md,.25rem);padding:var(--snice-spacing-xs,.5rem)}.edit-field:focus{outline:0;border-color:var(--snice-color-primary,rgb(37 99 235))}.confirm-actions,.edit-actions{display:flex;gap:var(--snice-spacing-xs,.5rem)}.confirm-button,.edit-button{cursor:pointer;font-family:inherit;font-size:var(--snice-font-size-sm, .875rem);font-weight:var(--snice-font-weight-medium,500);padding:var(--snice-spacing-3xs,.125rem) var(--snice-spacing-sm,.75rem);border:1px solid var(--snice-color-border,rgb(226 226 226));border-radius:var(--snice-border-radius-md,.25rem);background:var(--snice-color-surface,rgb(255 255 255));color:var(--snice-color-text,rgb(23 23 23));transition:background var(--snice-transition-fast, 150ms)}.confirm-button:hover,.edit-button:hover{background:var(--snice-color-surface-hover,rgb(242 242 242))}.edit-save{background:var(--snice-color-primary,rgb(37 99 235));color:var(--snice-color-text-inverse,rgb(250 250 250));border-color:var(--snice-color-primary,rgb(37 99 235))}.edit-save:hover{background:var(--snice-color-primary-hover,rgb(29 78 216))}.message-confirm{display:flex;align-items:center;flex-wrap:wrap;gap:var(--snice-spacing-sm,.75rem);margin-top:var(--snice-spacing-xs,.5rem);padding:var(--snice-spacing-xs,.5rem) var(--snice-spacing-sm,.75rem);background:var(--snice-color-surface-container-low,rgb(250 250 250));border:1px solid var(--snice-color-border,rgb(226 226 226));border-radius:var(--snice-border-radius-md,.25rem)}.confirm-text{font-size:var(--snice-font-size-sm, .875rem);color:var(--snice-color-text-secondary,rgb(82 82 82))}.confirm-delete{background:var(--snice-color-danger,rgb(220 38 38));color:var(--snice-color-text-inverse,rgb(250 250 250));border-color:var(--snice-color-danger,rgb(220 38 38))}.confirm-delete:hover{background:var(--snice-color-danger,rgb(220 38 38));filter:brightness(.92)}.typing-indicators{padding:0 var(--snice-spacing-md,1rem) var(--snice-spacing-xs,.5rem);min-height:1.5rem}.typing-indicator{display:flex;align-items:center;gap:var(--snice-spacing-xs,.5rem);font-size:var(--snice-font-size-sm, .875rem);color:var(--snice-color-text-secondary,rgb(82 82 82));font-style:italic}.typing-dots{display:flex;gap:.1875rem}.typing-dot{width:6px;height:6px;background:var(--snice-color-text-secondary,rgb(82 82 82));border-radius:50%;animation:1.4s ease-in-out infinite typing-bounce}.typing-dot:first-child{animation-delay:0s}.typing-dot:nth-child(2){animation-delay:.2s}.typing-dot:nth-child(3){animation-delay:.4s}@keyframes typing-bounce{0%,100%,60%{transform:translateY(0)}30%{transform:translateY(-4px)}}.input-area{border-top:1px solid var(--snice-color-border,rgb(226 226 226));padding:var(--snice-spacing-md,1rem);background:var(--snice-color-surface-container-high,rgb(252 251 249))}.input-container{display:flex;align-items:flex-end;gap:var(--snice-spacing-xs,.5rem);background:var(--snice-color-surface-container-lowest,rgb(255 255 255));border:1px solid var(--snice-color-border,rgb(226 226 226));border-radius:var(--snice-border-radius-md,.25rem);padding:var(--snice-spacing-xs,.5rem);transition:border-color var(--snice-transition-fast, 150ms)}.input-container:focus-within{border-color:var(--snice-color-primary,rgb(37 99 235))}.input-field{flex:1;border:none;outline:0;resize:none;font-family:inherit;font-size:var(--snice-font-size-md, 1rem);line-height:1.5;min-height:1.375rem;max-height:9.375rem;overflow-y:auto;background:0 0;color:var(--snice-color-text,rgb(23 23 23))}.input-field::placeholder{color:var(--snice-color-text-secondary,rgb(82 82 82))}.input-field::-webkit-scrollbar{width:4px}.input-field::-webkit-scrollbar-thumb{background:var(--snice-color-border,rgb(226 226 226));border-radius:var(--snice-border-radius-sm,.125rem)}.input-buttons{display:flex;gap:var(--snice-spacing-2xs,.25rem)}.input-button{width:2rem;height:2rem;border:none;background:0 0;cursor:pointer;border-radius:var(--snice-border-radius-md,.25rem);display:flex;align-items:center;justify-content:center;color:var(--snice-color-text-secondary,rgb(82 82 82));transition:background var(--snice-transition-fast, 150ms)}.input-button:hover{background:var(--snice-color-surface-hover,rgb(242 242 242))}.input-button:disabled{opacity:.5;cursor:not-allowed}.input-button.send{color:var(--snice-color-text-inverse,rgb(250 250 250));background:var(--snice-color-primary,rgb(37 99 235))}.input-button.send:hover:not(:disabled){background:var(--snice-color-primary-hover,rgb(29 78 216))}.input-button svg{width:1.125rem;height:1.125rem}input[type=file]{display:none}:host([layout=bubbles]) .message.own{flex-direction:row-reverse}:host([layout=bubbles]) .message.own .message-content{display:flex;flex-direction:column;align-items:flex-end}:host([layout=bubbles]) .message.own .message-header{flex-direction:row-reverse}:host([layout=bubbles]) .message .message-text{display:inline-block;padding:var(--snice-spacing-xs,.5rem) var(--snice-spacing-sm,.75rem);border-radius:var(--snice-border-radius-lg,.5rem);background:var(--snice-color-surface-container,rgb(242 242 242))}:host([layout=bubbles]) .message.own .message-text{background:var(--snice-color-primary,rgb(37 99 235));color:var(--snice-color-text-inverse,rgb(250 250 250))}";
 
 /**
  * Generate unique ID
@@ -41,6 +64,26 @@ function getInitials(name) {
         .toUpperCase()
         .substring(0, 2);
 }
+/**
+ * Stable color for an author name: hash → one of the 8 accent slots. Returns a
+ * theme accent var with the shared concrete fallback.
+ */
+function autoAuthorColor(name) {
+    let hash = 0;
+    for (let i = 0; i < name.length; i++) {
+        hash = (hash * 31 + name.charCodeAt(i)) >>> 0;
+    }
+    const slot = (hash % 8) + 1;
+    return `var(--snice-color-accent-${slot}, ${FALLBACK_ACCENTS[slot - 1]})`;
+}
+/**
+ * Author colors ride on message data, so they can come from a backend. A CSS
+ * color never needs `;`, `{`, or `}` — reject values that could smuggle extra
+ * declarations into the inline style attribute.
+ */
+function isSafeCssColor(value) {
+    return !/[;{}]/.test(value);
+}
 /**
  * snice-chat - Chat interface component
  *
@@ -52,7 +95,6 @@ function getInitials(name) {
  * @fires {CustomEvent<{ messageId: string; newContent: string }>} message-edit - Fires when editing a message
  * @fires {CustomEvent<{ messageId: string }>} message-delete - Fires when deleting a message
  * @fires {CustomEvent<{ messageId: string; emoji: string }>} message-react - Fires when reacting to a message
- * @fires {CustomEvent<{ messageId: string }>} message-thread - Fires when starting a thread
  * @fires {CustomEvent<{}>} typing-start - Fires when user starts typing
  * @fires {CustomEvent<{}>} typing-stop - Fires when user stops typing
  */
@@ -87,23 +129,53 @@ let SniceChat = (() => {
     let _showTimestamps_decorators;
     let _showTimestamps_initializers = [];
     let _showTimestamps_extraInitializers = [];
+    let _authorColors_decorators;
+    let _authorColors_initializers = [];
+    let _authorColors_extraInitializers = [];
+    let _colorAuthors_decorators;
+    let _colorAuthors_initializers = [];
+    let _colorAuthors_extraInitializers = [];
+    let _markdown_decorators;
+    let _markdown_initializers = [];
+    let _markdown_extraInitializers = [];
+    let _layout_decorators;
+    let _layout_initializers = [];
+    let _layout_extraInitializers = [];
+    let _editingId_decorators;
+    let _editingId_initializers = [];
+    let _editingId_extraInitializers = [];
+    let _confirmingDeleteId_decorators;
+    let _confirmingDeleteId_initializers = [];
+    let _confirmingDeleteId_extraInitializers = [];
     let _messagesArea_decorators;
     let _messagesArea_initializers = [];
     let _messagesArea_extraInitializers = [];
     let _inputField_decorators;
     let _inputField_initializers = [];
     let _inputField_extraInitializers = [];
+    let _editField_decorators;
+    let _editField_initializers = [];
+    let _editField_extraInitializers = [];
+    let _editBox_decorators;
+    let _editBox_initializers = [];
+    let _editBox_extraInitializers = [];
+    let _confirmBox_decorators;
+    let _confirmBox_initializers = [];
+    let _confirmBox_extraInitializers = [];
     let _styles_decorators;
     let _init_decorators;
+    let _onSlottedMessagesChanged_decorators;
+    let _onSlottedMessageAttributesChanged_decorators;
     let _cleanup_decorators;
     let _messagesChanged_decorators;
     let _emitMessageSend_decorators;
     let _emitMessageEdit_decorators;
     let _emitMessageDelete_decorators;
     let _emitMessageReact_decorators;
-    let _emitMessageThread_decorators;
     let _emitTypingStart_decorators;
     let _emitTypingStop_decorators;
+    let _focusEditField_decorators;
+    let _revealDeleteConfirm_decorators;
     let _render_decorators;
     (class extends _classSuper {
         static { _classThis = this; }
@@ -117,11 +189,28 @@ let SniceChat = (() => {
             this.showTyping = (__runInitializers(this, _allowFiles_extraInitializers), __runInitializers(this, _showTyping_initializers, true));
             this.showAvatars = (__runInitializers(this, _showTyping_extraInitializers), __runInitializers(this, _showAvatars_initializers, true));
             this.showTimestamps = (__runInitializers(this, _showAvatars_extraInitializers), __runInitializers(this, _showTimestamps_initializers, true));
-            this.messagesArea = (__runInitializers(this, _showTimestamps_extraInitializers), __runInitializers(this, _messagesArea_initializers, void 0));
+            this.authorColors = (__runInitializers(this, _showTimestamps_extraInitializers), __runInitializers(this, _authorColors_initializers, {}));
+            this.colorAuthors = (__runInitializers(this, _authorColors_extraInitializers), __runInitializers(this, _colorAuthors_initializers, false));
+            this.markdown = (__runInitializers(this, _colorAuthors_extraInitializers), __runInitializers(this, _markdown_initializers, false));
+            this.layout = (__runInitializers(this, _markdown_extraInitializers), __runInitializers(this, _layout_initializers, ChatLayout.Default));
+            // Internal reactive state: id of the message currently being edited inline.
+            this.editingId = (__runInitializers(this, _layout_extraInitializers), __runInitializers(this, _editingId_initializers, null));
+            // Internal reactive state: id of the message pending inline delete-confirm.
+            this.confirmingDeleteId = (__runInitializers(this, _editingId_extraInitializers), __runInitializers(this, _confirmingDeleteId_initializers, null));
+            this.messagesArea = (__runInitializers(this, _confirmingDeleteId_extraInitializers), __runInitializers(this, _messagesArea_initializers, void 0));
             this.inputField = (__runInitializers(this, _messagesArea_extraInitializers), __runInitializers(this, _inputField_initializers, void 0));
-            this.typingIndicators = (__runInitializers(this, _inputField_extraInitializers), new Map());
+            this.editField = (__runInitializers(this, _inputField_extraInitializers), __runInitializers(this, _editField_initializers, void 0));
+            this.editBox = (__runInitializers(this, _editField_extraInitializers), __runInitializers(this, _editBox_initializers, void 0));
+            this.confirmBox = (__runInitializers(this, _editBox_extraInitializers), __runInitializers(this, _confirmBox_initializers, void 0));
+            this.typingIndicators = (__runInitializers(this, _confirmBox_extraInitializers), new Map());
             this.typingTimeout = null;
             this.fileInput = null;
+            // Element → stable message id, so re-ingesting doesn't mint new ids and
+            // orphan reactions/edit state keyed to the old ones.
+            this.slotMessageIds = new WeakMap();
+            // Every id ever minted for a slot element, so a removed slot child isn't
+            // misclassified as an imperative message and resurrected on re-ingest.
+            this.mintedSlotIds = new Set();
             this.handleKeyDown = (e) => {
                 const target = e.target;
                 if (target !== this.inputField)
@@ -142,31 +231,46 @@ let SniceChat = (() => {
             _showTyping_decorators = [property({ type: Boolean, attribute: 'show-typing' })];
             _showAvatars_decorators = [property({ type: Boolean, attribute: 'show-avatars' })];
             _showTimestamps_decorators = [property({ type: Boolean, attribute: 'show-timestamps' })];
+            _authorColors_decorators = [property({ type: Object, attribute: false })];
+            _colorAuthors_decorators = [property({ type: Boolean, attribute: 'color-authors' })];
+            _markdown_decorators = [property({ type: Boolean })];
+            _layout_decorators = [property()];
+            _editingId_decorators = [property({ attribute: false })];
+            _confirmingDeleteId_decorators = [property({ attribute: false })];
             _messagesArea_decorators = [query('.messages-area')];
             _inputField_decorators = [query('.input-field')];
+            _editField_decorators = [query('.edit-field')];
+            _editBox_decorators = [query('.message-edit')];
+            _confirmBox_decorators = [query('.message-confirm')];
             _styles_decorators = [styles()];
             _init_decorators = [ready()];
+            _onSlottedMessagesChanged_decorators = [observe('mutation:childList')];
+            _onSlottedMessageAttributesChanged_decorators = [observe('mutation:attributes', { subtree: true })];
             _cleanup_decorators = [dispose()];
             _messagesChanged_decorators = [watch('messages')];
             _emitMessageSend_decorators = [dispatch('message-send', { bubbles: true, composed: true })];
             _emitMessageEdit_decorators = [dispatch('message-edit', { bubbles: true, composed: true })];
             _emitMessageDelete_decorators = [dispatch('message-delete', { bubbles: true, composed: true })];
             _emitMessageReact_decorators = [dispatch('message-react', { bubbles: true, composed: true })];
-            _emitMessageThread_decorators = [dispatch('message-thread', { bubbles: true, composed: true })];
             _emitTypingStart_decorators = [dispatch('typing-start', { bubbles: true, composed: true })];
             _emitTypingStop_decorators = [dispatch('typing-stop', { bubbles: true, composed: true })];
+            _focusEditField_decorators = [watch('editingId')];
+            _revealDeleteConfirm_decorators = [watch('confirmingDeleteId')];
             _render_decorators = [render()];
             __esDecorate(this, null, _styles_decorators, { kind: "method", name: "styles", static: false, private: false, access: { has: obj => "styles" in obj, get: obj => obj.styles }, metadata: _metadata }, null, _instanceExtraInitializers);
             __esDecorate(this, null, _init_decorators, { kind: "method", name: "init", static: false, private: false, access: { has: obj => "init" in obj, get: obj => obj.init }, metadata: _metadata }, null, _instanceExtraInitializers);
+            __esDecorate(this, null, _onSlottedMessagesChanged_decorators, { kind: "method", name: "onSlottedMessagesChanged", static: false, private: false, access: { has: obj => "onSlottedMessagesChanged" in obj, get: obj => obj.onSlottedMessagesChanged }, metadata: _metadata }, null, _instanceExtraInitializers);
+            __esDecorate(this, null, _onSlottedMessageAttributesChanged_decorators, { kind: "method", name: "onSlottedMessageAttributesChanged", static: false, private: false, access: { has: obj => "onSlottedMessageAttributesChanged" in obj, get: obj => obj.onSlottedMessageAttributesChanged }, metadata: _metadata }, null, _instanceExtraInitializers);
             __esDecorate(this, null, _cleanup_decorators, { kind: "method", name: "cleanup", static: false, private: false, access: { has: obj => "cleanup" in obj, get: obj => obj.cleanup }, metadata: _metadata }, null, _instanceExtraInitializers);
             __esDecorate(this, null, _messagesChanged_decorators, { kind: "method", name: "messagesChanged", static: false, private: false, access: { has: obj => "messagesChanged" in obj, get: obj => obj.messagesChanged }, metadata: _metadata }, null, _instanceExtraInitializers);
             __esDecorate(this, null, _emitMessageSend_decorators, { kind: "method", name: "emitMessageSend", static: false, private: false, access: { has: obj => "emitMessageSend" in obj, get: obj => obj.emitMessageSend }, metadata: _metadata }, null, _instanceExtraInitializers);
             __esDecorate(this, null, _emitMessageEdit_decorators, { kind: "method", name: "emitMessageEdit", static: false, private: false, access: { has: obj => "emitMessageEdit" in obj, get: obj => obj.emitMessageEdit }, metadata: _metadata }, null, _instanceExtraInitializers);
             __esDecorate(this, null, _emitMessageDelete_decorators, { kind: "method", name: "emitMessageDelete", static: false, private: false, access: { has: obj => "emitMessageDelete" in obj, get: obj => obj.emitMessageDelete }, metadata: _metadata }, null, _instanceExtraInitializers);
             __esDecorate(this, null, _emitMessageReact_decorators, { kind: "method", name: "emitMessageReact", static: false, private: false, access: { has: obj => "emitMessageReact" in obj, get: obj => obj.emitMessageReact }, metadata: _metadata }, null, _instanceExtraInitializers);
-            __esDecorate(this, null, _emitMessageThread_decorators, { kind: "method", name: "emitMessageThread", static: false, private: false, access: { has: obj => "emitMessageThread" in obj, get: obj => obj.emitMessageThread }, metadata: _metadata }, null, _instanceExtraInitializers);
             __esDecorate(this, null, _emitTypingStart_decorators, { kind: "method", name: "emitTypingStart", static: false, private: false, access: { has: obj => "emitTypingStart" in obj, get: obj => obj.emitTypingStart }, metadata: _metadata }, null, _instanceExtraInitializers);
             __esDecorate(this, null, _emitTypingStop_decorators, { kind: "method", name: "emitTypingStop", static: false, private: false, access: { has: obj => "emitTypingStop" in obj, get: obj => obj.emitTypingStop }, metadata: _metadata }, null, _instanceExtraInitializers);
+            __esDecorate(this, null, _focusEditField_decorators, { kind: "method", name: "focusEditField", static: false, private: false, access: { has: obj => "focusEditField" in obj, get: obj => obj.focusEditField }, metadata: _metadata }, null, _instanceExtraInitializers);
+            __esDecorate(this, null, _revealDeleteConfirm_decorators, { kind: "method", name: "revealDeleteConfirm", static: false, private: false, access: { has: obj => "revealDeleteConfirm" in obj, get: obj => obj.revealDeleteConfirm }, metadata: _metadata }, null, _instanceExtraInitializers);
             __esDecorate(this, null, _render_decorators, { kind: "method", name: "render", static: false, private: false, access: { has: obj => "render" in obj, get: obj => obj.render }, metadata: _metadata }, null, _instanceExtraInitializers);
             __esDecorate(null, null, _messages_decorators, { kind: "field", name: "messages", static: false, private: false, access: { has: obj => "messages" in obj, get: obj => obj.messages, set: (obj, value) => { obj.messages = value; } }, metadata: _metadata }, _messages_initializers, _messages_extraInitializers);
             __esDecorate(null, null, _currentUser_decorators, { kind: "field", name: "currentUser", static: false, private: false, access: { has: obj => "currentUser" in obj, get: obj => obj.currentUser, set: (obj, value) => { obj.currentUser = value; } }, metadata: _metadata }, _currentUser_initializers, _currentUser_extraInitializers);
@@ -176,8 +280,17 @@ let SniceChat = (() => {
             __esDecorate(null, null, _showTyping_decorators, { kind: "field", name: "showTyping", static: false, private: false, access: { has: obj => "showTyping" in obj, get: obj => obj.showTyping, set: (obj, value) => { obj.showTyping = value; } }, metadata: _metadata }, _showTyping_initializers, _showTyping_extraInitializers);
             __esDecorate(null, null, _showAvatars_decorators, { kind: "field", name: "showAvatars", static: false, private: false, access: { has: obj => "showAvatars" in obj, get: obj => obj.showAvatars, set: (obj, value) => { obj.showAvatars = value; } }, metadata: _metadata }, _showAvatars_initializers, _showAvatars_extraInitializers);
             __esDecorate(null, null, _showTimestamps_decorators, { kind: "field", name: "showTimestamps", static: false, private: false, access: { has: obj => "showTimestamps" in obj, get: obj => obj.showTimestamps, set: (obj, value) => { obj.showTimestamps = value; } }, metadata: _metadata }, _showTimestamps_initializers, _showTimestamps_extraInitializers);
+            __esDecorate(null, null, _authorColors_decorators, { kind: "field", name: "authorColors", static: false, private: false, access: { has: obj => "authorColors" in obj, get: obj => obj.authorColors, set: (obj, value) => { obj.authorColors = value; } }, metadata: _metadata }, _authorColors_initializers, _authorColors_extraInitializers);
+            __esDecorate(null, null, _colorAuthors_decorators, { kind: "field", name: "colorAuthors", static: false, private: false, access: { has: obj => "colorAuthors" in obj, get: obj => obj.colorAuthors, set: (obj, value) => { obj.colorAuthors = value; } }, metadata: _metadata }, _colorAuthors_initializers, _colorAuthors_extraInitializers);
+            __esDecorate(null, null, _markdown_decorators, { kind: "field", name: "markdown", static: false, private: false, access: { has: obj => "markdown" in obj, get: obj => obj.markdown, set: (obj, value) => { obj.markdown = value; } }, metadata: _metadata }, _markdown_initializers, _markdown_extraInitializers);
+            __esDecorate(null, null, _layout_decorators, { kind: "field", name: "layout", static: false, private: false, access: { has: obj => "layout" in obj, get: obj => obj.layout, set: (obj, value) => { obj.layout = value; } }, metadata: _metadata }, _layout_initializers, _layout_extraInitializers);
+            __esDecorate(null, null, _editingId_decorators, { kind: "field", name: "editingId", static: false, private: false, access: { has: obj => "editingId" in obj, get: obj => obj.editingId, set: (obj, value) => { obj.editingId = value; } }, metadata: _metadata }, _editingId_initializers, _editingId_extraInitializers);
+            __esDecorate(null, null, _confirmingDeleteId_decorators, { kind: "field", name: "confirmingDeleteId", static: false, private: false, access: { has: obj => "confirmingDeleteId" in obj, get: obj => obj.confirmingDeleteId, set: (obj, value) => { obj.confirmingDeleteId = value; } }, metadata: _metadata }, _confirmingDeleteId_initializers, _confirmingDeleteId_extraInitializers);
             __esDecorate(null, null, _messagesArea_decorators, { kind: "field", name: "messagesArea", static: false, private: false, access: { has: obj => "messagesArea" in obj, get: obj => obj.messagesArea, set: (obj, value) => { obj.messagesArea = value; } }, metadata: _metadata }, _messagesArea_initializers, _messagesArea_extraInitializers);
             __esDecorate(null, null, _inputField_decorators, { kind: "field", name: "inputField", static: false, private: false, access: { has: obj => "inputField" in obj, get: obj => obj.inputField, set: (obj, value) => { obj.inputField = value; } }, metadata: _metadata }, _inputField_initializers, _inputField_extraInitializers);
+            __esDecorate(null, null, _editField_decorators, { kind: "field", name: "editField", static: false, private: false, access: { has: obj => "editField" in obj, get: obj => obj.editField, set: (obj, value) => { obj.editField = value; } }, metadata: _metadata }, _editField_initializers, _editField_extraInitializers);
+            __esDecorate(null, null, _editBox_decorators, { kind: "field", name: "editBox", static: false, private: false, access: { has: obj => "editBox" in obj, get: obj => obj.editBox, set: (obj, value) => { obj.editBox = value; } }, metadata: _metadata }, _editBox_initializers, _editBox_extraInitializers);
+            __esDecorate(null, null, _confirmBox_decorators, { kind: "field", name: "confirmBox", static: false, private: false, access: { has: obj => "confirmBox" in obj, get: obj => obj.confirmBox, set: (obj, value) => { obj.confirmBox = value; } }, metadata: _metadata }, _confirmBox_initializers, _confirmBox_extraInitializers);
             __esDecorate(null, _classDescriptor = { value: _classThis }, _classDecorators, { kind: "class", name: _classThis.name, metadata: _metadata }, null, _classExtraInitializers);
             _classThis = _classDescriptor.value;
             if (_metadata) Object.defineProperty(_classThis, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
@@ -188,6 +301,50 @@ let SniceChat = (() => {
         }
         init() {
             this.addEventListener('keydown', this.handleKeyDown);
+            this.ingestSlottedMessages();
+        }
+        // Declarative dual-API: read slotted <snice-chat-message> children as the
+        // messages source. An empty slot leaves the array untouched. Mirrors
+        // snice-table / snice-column. Slotted messages keep a stable id across
+        // re-ingests (keyed per element), runtime state (reactions, inline edits)
+        // survives, and imperatively-added messages are appended after the slot set.
+        onSlottedMessagesChanged() {
+            this.ingestSlottedMessages();
+        }
+        onSlottedMessageAttributesChanged() {
+            this.ingestSlottedMessages();
+        }
+        ingestSlottedMessages() {
+            const els = Array.from(this.querySelectorAll('snice-chat-message'));
+            if (els.length === 0)
+                return;
+            const existingById = new Map(this.messages.map((m) => [m.id, m]));
+            const slotMessages = els.map((el) => {
+                let id = this.slotMessageIds.get(el);
+                if (!id) {
+                    id = generateId();
+                    this.slotMessageIds.set(el, id);
+                    this.mintedSlotIds.add(id);
+                }
+                const definition = { ...el.getMessageDefinition(), id };
+                const existing = existingById.get(id);
+                if (!existing)
+                    return definition;
+                // Runtime state outranks the (possibly stale) light DOM: keep reactions
+                // accumulated via the UI unless the element declares its own, and keep
+                // an inline edit's content over the original slotted text.
+                if (!definition.reactions && existing.reactions)
+                    definition.reactions = existing.reactions;
+                if (existing.edited && !definition.edited) {
+                    definition.content = existing.content;
+                    definition.edited = true;
+                }
+                return definition;
+            });
+            // Imperatively-added messages (addMessage) are not backed by an element;
+            // keep them, appended after the slot set.
+            const imperative = this.messages.filter((m) => !this.mintedSlotIds.has(m.id));
+            this.messages = [...slotMessages, ...imperative];
         }
         cleanup() {
             this.removeEventListener('keydown', this.handleKeyDown);
@@ -195,9 +352,13 @@ let SniceChat = (() => {
                 clearTimeout(this.typingTimeout);
             }
         }
-        messagesChanged() {
-            // Scroll to bottom when new message added
-            setTimeout(() => this.scrollToBottom(), 0);
+        messagesChanged(oldMessages, newMessages) {
+            // Scroll to bottom only when a message was appended — reactions and edits
+            // reassign the array too, and must not yank the viewport while the user
+            // is scrolled up reading history.
+            if ((newMessages?.length ?? 0) > (oldMessages?.length ?? 0)) {
+                setTimeout(() => this.scrollToBottom(), 0);
+            }
         }
         emitMessageSend(message, attachments) {
             return { message, attachments };
@@ -211,9 +372,6 @@ let SniceChat = (() => {
         emitMessageReact(messageId, emoji) {
             return { messageId, emoji };
         }
-        emitMessageThread(messageId) {
-            return { messageId };
-        }
         emitTypingStart() {
             return {};
         }
@@ -328,26 +486,95 @@ let SniceChat = (() => {
             this.inputField.style.height = 'auto';
             this.inputField.style.height = `${Math.min(this.inputField.scrollHeight, 150)}px`;
         }
+        // Reactions are social: anyone can react to any message. Toggle the current
+        // user on/off the emoji, update the local model, and emit for a backend.
         handleReaction(messageId, emoji) {
+            const me = this.currentUser;
+            this.messages = this.messages.map((m) => {
+                if (m.id !== messageId)
+                    return m;
+                const reactions = [...(m.reactions ?? [])];
+                const i = reactions.findIndex((r) => r.emoji === emoji);
+                if (i === -1) {
+                    reactions.push({ emoji, count: 1, users: [me] });
+                }
+                else {
+                    const r = reactions[i];
+                    const removing = r.users.includes(me);
+                    const users = removing ? r.users.filter((u) => u !== me) : [...r.users, me];
+                    // Adjust by ±1 — never recompute from users.length, which destroys
+                    // server counts backed by truncated user lists (count 128, users [2]).
+                    const count = Math.max(users.length, r.count + (removing ? -1 : 1));
+                    if (count === 0)
+                        reactions.splice(i, 1);
+                    else
+                        reactions[i] = { ...r, count, users };
+                }
+                return { ...m, reactions };
+            });
             this.emitMessageReact(messageId, emoji);
         }
-        handleEdit(messageId) {
+        // Edit is inline: clicking edit swaps the body for a textarea. Owner-only.
+        // Inline modes are exclusive: opening one closes the other.
+        startEdit(messageId) {
+            this.confirmingDeleteId = null;
+            this.editingId = messageId;
+        }
+        cancelEdit() {
+            this.editingId = null;
+        }
+        commitEdit(messageId) {
+            const next = (this.editField?.value ?? '').trim();
             const message = this.messages.find((m) => m.id === messageId);
-            if (!message)
+            this.editingId = null;
+            if (!message || !next || next === message.content)
                 return;
-            // Simple prompt for now - in a real app, this would be inline editing
-            const newContent = prompt('Edit message:', message.content);
-            if (newContent && newContent !== message.content) {
-                this.emitMessageEdit(messageId, newContent);
+            this.updateMessage(messageId, { content: next, edited: true });
+            this.emitMessageEdit(messageId, next);
+        }
+        handleEditKeydown(e, messageId) {
+            if (e.key === 'Enter' && !e.shiftKey) {
+                e.preventDefault();
+                this.commitEdit(messageId);
+            }
+            else if (e.key === 'Escape') {
+                e.preventDefault();
+                this.cancelEdit();
             }
         }
+        focusEditField() {
+            if (this.editingId === null)
+                return;
+            // Watchers run before the re-render is even scheduled (renders flush on
+            // a microtask), so defer to a frame where the editor exists.
+            requestAnimationFrame(() => {
+                this.editField?.focus();
+                // The editor is taller than the message body it replaces; on the last
+                // message its Save/Cancel row would clip below the scroll area.
+                this.editBox?.scrollIntoView({ block: 'nearest' });
+            });
+        }
+        // Delete asks for inline confirmation (not a native confirm dialog).
+        // Owner-only. On confirm, updates the local model and emits for a backend.
+        // Inline modes are exclusive: opening one closes the other.
         handleDelete(messageId) {
-            if (confirm('Delete this message?')) {
-                this.emitMessageDelete(messageId);
-            }
+            this.editingId = null;
+            this.confirmingDeleteId = messageId;
+        }
+        revealDeleteConfirm() {
+            if (this.confirmingDeleteId === null)
+                return;
+            // Same clipping problem as the inline editor: the confirm row extends
+            // the last message past the bottom of the scroll area.
+            requestAnimationFrame(() => this.confirmBox?.scrollIntoView({ block: 'nearest' }));
+        }
+        confirmDelete(messageId) {
+            this.confirmingDeleteId = null;
+            this.deleteMessage(messageId);
+            this.emitMessageDelete(messageId);
         }
-        handleThread(messageId) {
-            this.emitMessageThread(messageId);
+        cancelDelete() {
+            this.confirmingDeleteId = null;
         }
         render() {
             return html /*html*/ `
@@ -374,23 +601,58 @@ let SniceChat = (() => {
       </div>
     `;
         }
+        // Per-message author color. Precedence: per-message override → authorColors
+        // map → auto (only when color-authors is set) → none (falls through to the
+        // default token in CSS). Computed per element instance — no global registry.
+        resolveAuthorColor(message) {
+            if (message.authorColor && isSafeCssColor(message.authorColor))
+                return message.authorColor;
+            const mapped = this.authorColors[message.author];
+            if (mapped && isSafeCssColor(mapped))
+                return mapped;
+            if (this.colorAuthors)
+                return autoAuthorColor(message.author);
+            return '';
+        }
+        // Markdown is opt-in: per-message format='markdown', or the component-wide
+        // `markdown` attribute (which a per-message format='text' can override).
+        shouldRenderMarkdown(message) {
+            if (message.format === MessageFormat.Markdown)
+                return true;
+            if (this.markdown && message.format !== MessageFormat.Text)
+                return true;
+            return false;
+        }
+        renderMessageBody(message) {
+            if (this.shouldRenderMarkdown(message)) {
+                return html /*html*/ `<snice-markdown part="message-text" class="message-text" .content=${message.content}></snice-markdown>`;
+            }
+            return html /*html*/ `<div part="message-text" class="message-text">${message.content}</div>`;
+        }
         renderMessage(message) {
             const isSystem = message.type === 'system';
             const isCurrentUser = message.author === this.currentUser;
             if (isSystem) {
                 return html /*html*/ `
-        <div class="message system" data-message-id="${message.id}">
+        <div part="message system-message" class="message system" data-message-id="${message.id}">
           <div class="message-content">
-            <div class="message-text">${message.content}</div>
+            <div part="message-text" class="message-text">${message.content}</div>
           </div>
         </div>
       `;
             }
+            const ownClass = isCurrentUser ? 'own' : 'other';
+            const ownPart = isCurrentUser ? 'message-own' : 'message-other';
+            const authorColor = this.resolveAuthorColor(message);
+            const authorStyle = authorColor ? `--snice-chat-author-color:${authorColor}` : '';
+            const isEditing = this.editingId === message.id;
+            const isConfirmingDelete = this.confirmingDeleteId === message.id;
+            const hasReactions = !!message.reactions && message.reactions.length > 0;
             return html /*html*/ `
-      <div class="message" data-message-id="${message.id}">
+      <div part="message ${ownPart}" class="message ${ownClass}" data-message-id="${message.id}">
         ${this.showAvatars
                 ? html `
-              <div class="message-avatar">
+              <div part="avatar" class="message-avatar">
                 ${message.avatar
                     ? html `<img src="${message.avatar}" alt="${message.author}" />`
                     : getInitials(message.author)}
@@ -399,55 +661,70 @@ let SniceChat = (() => {
                 : ''}
         <div class="message-content">
           <div class="message-header">
-            <span class="message-author">${message.author}</span>
+            <span part="author" class="message-author" style="${authorStyle}">${message.author}</span>
             ${this.showTimestamps
-                ? html `<span class="message-timestamp">${formatTime(message.timestamp)}</span>`
+                ? html `<span part="timestamp" class="message-timestamp">${formatTime(message.timestamp)}</span>`
                 : ''}
-            ${message.edited ? html `<span class="message-edited">(edited)</span>` : ''}
+            ${message.edited ? html `<span part="edited" class="message-edited">(edited)</span>` : ''}
           </div>
-          ${message.content ? html `<div class="message-text">${message.content}</div>` : ''}
+          ${isEditing
+                ? this.renderEditor(message)
+                : message.content ? this.renderMessageBody(message) : ''}
           ${message.attachment ? this.renderAttachment(message.attachment) : ''}
-          ${message.reactions && message.reactions.length > 0
-                ? this.renderReactions(message.id, message.reactions, isCurrentUser)
-                : ''}
+          ${hasReactions ? this.renderReactions(message.id, message.reactions) : ''}
+          ${isConfirmingDelete ? this.renderDeleteConfirm(message) : ''}
+        </div>
+        ${isEditing || isConfirmingDelete ? '' : this.renderActions(message.id, isCurrentUser)}
+      </div>
+    `;
+        }
+        // Inline message editor — replaces the body while editing. Enter saves,
+        // Shift+Enter newlines, Esc cancels.
+        renderEditor(message) {
+            return html /*html*/ `
+      <div class="message-edit">
+        <textarea
+          part="edit-input"
+          class="edit-field"
+          .value=${message.content}
+          @keydown=${(e) => this.handleEditKeydown(e, message.id)}
+        ></textarea>
+        <div class="edit-actions">
+          <button part="edit-save" class="edit-button edit-save" @click=${() => this.commitEdit(message.id)}>Save</button>
+          <button part="edit-cancel" class="edit-button" @click=${() => this.cancelEdit()}>Cancel</button>
+        </div>
+      </div>
+    `;
+        }
+        // Inline delete confirmation — replaces the hover actions while pending, so
+        // a misclick can't destroy a message. Confirm deletes + emits; Cancel aborts.
+        renderDeleteConfirm(message) {
+            return html /*html*/ `
+      <div part="delete-confirm" class="message-confirm">
+        <span class="confirm-text">Delete this message?</span>
+        <div class="confirm-actions">
+          <button part="delete-confirm-yes" class="confirm-button confirm-delete" @click=${() => this.confirmDelete(message.id)}>Delete</button>
+          <button part="delete-confirm-no" class="confirm-button" @click=${() => this.cancelDelete()}>Cancel</button>
         </div>
+      </div>
+    `;
+        }
+        // Hover action menu. React is available on every message (you react to
+        // others, not just yourself); edit and delete are owner-only.
+        renderActions(messageId, isCurrentUser) {
+            return html /*html*/ `
+      <div part="actions" class="message-actions">
+        <button class="action-button" @click=${() => this.handleReaction(messageId, '👍')} title="React" aria-label="React">
+          <span class="action-emoji" aria-hidden="true">🙂</span>
+        </button>
         ${isCurrentUser
                 ? html `
-              <div class="message-actions">
-                <button
-                  class="action-button"
-                  @click="${() => this.handleReaction(message.id, '👍')}"
-                  title="React"
-                >
-                  <svg viewBox="0 0 16 16" fill="currentColor">
-                    <path
-                      d="M8 0a8 8 0 1 1 0 16A8 8 0 0 1 8 0zM5.5 7.5a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm5 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2zM8 11c1.5 0 2.7-1 3.2-2H4.8c.5 1 1.7 2 3.2 2z"
-                    />
-                  </svg>
-                </button>
-                <button
-                  class="action-button"
-                  @click="${() => this.handleEdit(message.id)}"
-                  title="Edit"
-                >
-                  <svg viewBox="0 0 16 16" fill="currentColor">
-                    <path
-                      d="M11.013 1.427a1.75 1.75 0 0 1 2.474 0l1.086 1.086a1.75 1.75 0 0 1 0 2.474l-8.61 8.61c-.21.21-.47.364-.756.445l-3.251.93a.75.75 0 0 1-.927-.928l.929-3.25a1.75 1.75 0 0 1 .445-.758l8.61-8.61z"
-                    />
-                  </svg>
-                </button>
-                <button
-                  class="action-button"
-                  @click="${() => this.handleDelete(message.id)}"
-                  title="Delete"
-                >
-                  <svg viewBox="0 0 16 16" fill="currentColor">
-                    <path
-                      d="M11 1.75V3h2.25a.75.75 0 0 1 0 1.5H2.75a.75.75 0 0 1 0-1.5H5V1.75C5 .784 5.784 0 6.75 0h2.5C10.216 0 11 .784 11 1.75zM4.496 6.675l.66 6.6a.25.25 0 0 0 .249.225h5.19a.25.25 0 0 0 .249-.225l.66-6.6a.75.75 0 0 1 1.492.149l-.66 6.6A1.748 1.748 0 0 1 10.595 15h-5.19a1.75 1.75 0 0 1-1.741-1.575l-.66-6.6a.75.75 0 1 1 1.492-.15z"
-                    />
-                  </svg>
-                </button>
-              </div>
+              <button class="action-button" @click=${() => this.startEdit(messageId)} title="Edit" aria-label="Edit message">
+                ${unsafeHTML(PENCIL)}
+              </button>
+              <button class="action-button" @click=${() => this.handleDelete(messageId)} title="Delete" aria-label="Delete message">
+                ${unsafeHTML(TRASH)}
+              </button>
             `
                 : ''}
       </div>
@@ -458,13 +735,13 @@ let SniceChat = (() => {
                 return '';
             if (attachment.type === 'image') {
                 return html /*html*/ `
-        <div class="message-attachment">
+        <div part="attachment" class="message-attachment">
           <img src="${attachment.url}" alt="${attachment.name}" />
         </div>
       `;
             }
             return html /*html*/ `
-      <div class="message-attachment">
+      <div part="attachment" class="message-attachment">
         <div class="attachment-file">
           <div class="attachment-icon">
             <svg viewBox="0 0 16 16" fill="currentColor">
@@ -483,20 +760,24 @@ let SniceChat = (() => {
       </div>
     `;
         }
-        renderReactions(messageId, reactions, isCurrentUser) {
+        renderReactions(messageId, reactions) {
             if (!reactions || reactions.length === 0)
                 return '';
             return html /*html*/ `
-      <div class="message-reactions">
-        ${reactions.map((reaction) => html `
+      <div part="reactions" class="message-reactions">
+        ${reactions.map((reaction) => {
+                const isActive = reaction.users.includes(this.currentUser);
+                return html `
             <div
-              class="reaction ${reaction.users.includes(this.currentUser) ? 'active' : ''}"
+              part="reaction ${isActive ? 'reaction-active' : ''}"
+              class="reaction ${isActive ? 'active' : ''}"
               @click="${() => this.handleReaction(messageId, reaction.emoji)}"
             >
               <span class="reaction-emoji">${reaction.emoji}</span>
               <span class="reaction-count">${reaction.count}</span>
             </div>
-          `)}
+          `;
+            })}
       </div>
     `;
         }
@@ -506,7 +787,7 @@ let SniceChat = (() => {
                 return '';
             return html /*html*/ `
       <div class="typing-indicators">
-        <div class="typing-indicator">
+        <div part="typing-indicator" class="typing-indicator">
           <span>${users.map((u) => u.user).join(', ')} ${users.length === 1 ? 'is' : 'are'} typing</span>
           <div class="typing-dots">
             <div class="typing-dot"></div>
@@ -537,20 +818,12 @@ let SniceChat = (() => {
                     @click="${() => this.handleFileClick()}"
                     title="Attach file"
                   >
-                    <svg viewBox="0 0 16 16" fill="currentColor">
-                      <path
-                        d="M11.28 6.22a.75.75 0 0 0-1.06 0L7.25 9.19 5.78 7.72a.75.75 0 0 0-1.06 1.06l2 2a.75.75 0 0 0 1.06 0l3.5-3.5a.75.75 0 0 0 0-1.06zM16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zm-1.5 0a6.5 6.5 0 1 0-13 0 6.5 6.5 0 0 0 13 0z"
-                      />
-                    </svg>
+                    ${unsafeHTML(PAPER_CLIP)}
                   </button>
                 `
                 : ''}
             <button class="input-button send" @click="${() => this.sendMessage()}" title="Send">
-              <svg viewBox="0 0 16 16" fill="currentColor">
-                <path
-                  d="M1.724 2.016a.75.75 0 0 1 1.048-.964l12.5 7a.75.75 0 0 1 0 1.292l-12.5 7a.75.75 0 0 1-1.048-.964l1.5-6.5a.75.75 0 0 1 .584-.584l5.916-1.188-5.916-1.188a.75.75 0 0 1-.584-.584l-1.5-6.5z"
-                />
-              </svg>
+              ${unsafeHTML(PAPER_AIRPLANE_SOLID)}
             </button>
           </div>
         </div>