snice 5.2.3 → 6.0.0

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

@@ -1,5 +1,5 @@
 /*!
- * snice v5.2.3
+ * snice v6.0.0
  * A decorator-driven web component library with differential rendering, routing, controllers, and 130+ ready-made UI components. Use as much or as little as you want. Zero dependencies, works anywhere.
  * (c) 2024
  * Released under the MIT License.
@@ -64,6 +64,34 @@ var SniceChat = (function (exports, snice) {
     return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
   };
 
+  /**
+   * Built-in snice icon set — a small curated subset of Heroicons, used by
+   * components as their default glyph when no consumer slot or `icon` prop is
+   * provided. Consumers can always override by slotting their own icon library
+   * (Font Awesome, Material Symbols, Lucide, custom SVG, etc.).
+   *
+   * Copied from Heroicons v2 — MIT License, © Tailwind Labs.
+   * https://github.com/tailwindlabs/heroicons
+   *
+   * Why embed instead of depending on a package:
+   * - Snice ships zero runtime dependencies beyond the framework itself.
+   * - We only need ~15 glyphs; the full Heroicons package is 600+ icons.
+   * - Embedding sidesteps shadow DOM / module-resolution concerns and keeps
+   *   default icons available even in sandboxed environments.
+   *
+   * All SVGs:
+   * - viewBox="0 0 24 24"
+   * - solid variants use `fill="currentColor"`
+   * - outline variants use `stroke="currentColor"` + no fill
+   *
+   * Components pass `currentColor` through by setting `color:` on the wrapper.
+   */
+  // ─── SOLID (filled) — used for status / selected / active contexts ────────
+  const PAPER_AIRPLANE_SOLID = /*html*/ `<svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M3.478 2.404a.75.75 0 0 0-.926.941l2.432 7.905H13.5a.75.75 0 0 1 0 1.5H4.984l-2.432 7.905a.75.75 0 0 0 .926.94 60.519 60.519 0 0 0 18.445-8.986.75.75 0 0 0 0-1.218A60.517 60.517 0 0 0 3.478 2.404Z"/></svg>`;
+  const TRASH = /*html*/ `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m14.74 9-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 0 1-2.244 2.077H8.084a2.25 2.25 0 0 1-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 0 0-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 0 1 3.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 0 0-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 0 0-7.5 0"/></svg>`;
+  const PENCIL = /*html*/ `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m16.862 4.487 1.687-1.688a1.875 1.875 0 1 1 2.652 2.652L6.832 19.82a4.5 4.5 0 0 1-1.897 1.13l-2.685.8.8-2.685a4.5 4.5 0 0 1 1.13-1.897L16.863 4.487Zm0 0L19.5 7.125"/></svg>`;
+  const PAPER_CLIP = /*html*/ `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m18.375 12.739-7.693 7.693a4.5 4.5 0 0 1-6.364-6.364l10.94-10.94A3 3 0 1 1 19.5 7.372L8.552 18.32m.009-.01-.01.01m5.699-9.941-7.81 7.81a1.5 1.5 0 0 0 2.112 2.13"/></svg>`;
+
   /**
    * Detects icon type and returns appropriate template
    *
@@ -120,6 +148,15 @@ var SniceChat = (function (exports, snice) {
       }
       return snice.html `<span class="${className}" part="icon">${icon}</span>`;
   }
+  /**
+   * Fallback accent hues (muted/business tones). Used when CSS vars haven't
+   * been applied (test environments, SSR) or when the 8 accent tokens have
+   * been stripped. Keep in lockstep with `theme.css` --snice-color-accent-1..8.
+   */
+  const FALLBACK_ACCENTS = [
+      'hsl(214 55% 48%)', 'hsl(27 62% 50%)', 'hsl(160 40% 40%)', 'hsl(275 32% 52%)',
+      'hsl(42 62% 48%)', 'hsl(340 42% 55%)', 'hsl(110 32% 42%)', 'hsl(195 45% 46%)',
+  ];
 
   var cssContent$1 = ":host{display:block;font-family:var(--snice-font-family, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif)}.empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:var(--snice-spacing-2xl,3rem) var(--snice-spacing-xl,2rem);color:var(--snice-color-text-secondary,rgb(82 82 82));animation:snice-empty-in 360ms var(--snice-ease-out,ease) backwards}@keyframes snice-empty-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}.empty-state--small{padding:var(--snice-spacing-xl,2rem) var(--snice-spacing-lg,1.5rem)}.empty-state--medium{padding:var(--snice-spacing-2xl,3rem) var(--snice-spacing-xl,2rem)}.empty-state--large{padding:var(--snice-spacing-3xl,4rem) var(--snice-spacing-2xl,2.5rem)}.empty-state__icon-wrapper{display:flex;align-items:center;justify-content:center;margin-bottom:var(--snice-spacing-lg,1.5rem);position:relative;width:calc(var(--snice-font-size-4xl,4rem) * 1.8);height:calc(var(--snice-font-size-4xl,4rem) * 1.8)}.empty-state__icon-wrapper::before{content:'';position:absolute;inset:0;border-radius:50%;border:1px dashed color-mix(in srgb,var(--snice-color-border,#ddd) 70%,transparent);animation:18s linear infinite snice-empty-halo}@keyframes snice-empty-halo{to{transform:rotate(360deg)}}.empty-state__icon{font-size:var(--snice-font-size-4xl, 4rem);opacity:.5;line-height:1}.empty-state__icon-wrapper ::slotted(*){display:flex;align-items:center;justify-content:center;font-size:var(--snice-font-size-4xl, 4rem);opacity:.5;line-height:1}.empty-state__icon-wrapper ::slotted(svg){width:var(--snice-font-size-4xl,4rem);height:var(--snice-font-size-4xl,4rem)}.empty-state__icon-wrapper ::slotted(img){width:var(--snice-font-size-4xl,4rem);height:var(--snice-font-size-4xl,4rem);object-fit:contain}.empty-state--small .empty-state__icon-wrapper{margin-bottom:var(--snice-spacing-md,1rem);width:calc(var(--snice-font-size-3xl,3rem) * 1.8);height:calc(var(--snice-font-size-3xl,3rem) * 1.8)}.empty-state--small .empty-state__icon{font-size:var(--snice-font-size-3xl, 3rem)}.empty-state--small .empty-state__icon-wrapper ::slotted(*){font-size:var(--snice-font-size-3xl, 3rem)}.empty-state--small .empty-state__icon-wrapper ::slotted(img),.empty-state--small .empty-state__icon-wrapper ::slotted(svg){width:var(--snice-font-size-3xl,3rem);height:var(--snice-font-size-3xl,3rem)}.empty-state--large .empty-state__icon-wrapper{margin-bottom:var(--snice-spacing-xl,2rem);width:calc(var(--snice-font-size-5xl,5rem) * 1.8);height:calc(var(--snice-font-size-5xl,5rem) * 1.8)}.empty-state--large .empty-state__icon{font-size:var(--snice-font-size-5xl, 5rem)}.empty-state--large .empty-state__icon-wrapper ::slotted(*){font-size:var(--snice-font-size-5xl, 5rem)}.empty-state--large .empty-state__icon-wrapper ::slotted(img),.empty-state--large .empty-state__icon-wrapper ::slotted(svg){width:var(--snice-font-size-5xl,5rem);height:var(--snice-font-size-5xl,5rem)}.empty-state__title{font-family:var(--snice-font-family-display);font-size:var(--snice-heading-lg, 1.25rem);font-weight:var(--snice-font-weight-semibold,600);color:var(--snice-color-text,rgb(23 23 23));margin:0 0 var(--snice-spacing-xs,.5rem) 0}.empty-state--small .empty-state__title{font-family:var(--snice-font-family-display);font-size:var(--snice-heading-md, 1.125rem);margin-bottom:var(--snice-spacing-2xs,.375rem)}.empty-state--large .empty-state__title{font-family:var(--snice-font-family-display);font-size:var(--snice-heading-xl, 1.5rem);margin-bottom:var(--snice-spacing-sm,.75rem)}.empty-state__description{font-size:var(--snice-font-size-sm, .875rem);color:var(--snice-color-text-secondary,rgb(82 82 82));margin:0 0 var(--snice-spacing-lg,1.5rem) 0;max-width:32rem;line-height:var(--snice-line-height-normal, 1.5)}.empty-state--small .empty-state__description{font-size:var(--snice-font-size-xs, .8125rem);margin-bottom:var(--snice-spacing-md,1rem)}.empty-state--large .empty-state__description{font-size:var(--snice-font-size-md, 1rem);margin-bottom:var(--snice-spacing-xl,2rem)}.empty-state__action{display:inline-flex;align-items:center;justify-content:center;padding:var(--snice-spacing-xs,.5rem) var(--snice-spacing-md,1rem);font-size:var(--snice-font-size-sm, .875rem);font-weight:var(--snice-font-weight-medium,500);color:var(--snice-color-text-inverse,rgb(250 250 250));background:var(--snice-color-primary,rgb(37 99 235));border:none;border-radius:var(--snice-border-radius-md,.375rem);text-decoration:none;cursor:pointer;transition:background var(--snice-transition-fast, 150ms)}.empty-state__action:hover{background:var(--snice-color-primary-hover,rgb(29 78 216))}.empty-state--small .empty-state__action{padding:var(--snice-spacing-2xs,.375rem) var(--snice-spacing-sm,.75rem);font-size:var(--snice-font-size-xs, .8125rem)}.empty-state--large .empty-state__action{padding:var(--snice-spacing-sm,.625rem) var(--snice-spacing-lg,1.25rem);font-size:var(--snice-font-size-md, 1rem)}.empty-state__extra ::slotted(*){margin-top:var(--snice-spacing-md,1rem)}";
 
@@ -241,7 +278,416 @@ var SniceChat = (function (exports, snice) {
       return _classThis;
   })();
 
-  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}";
+  var markdownStyles = ":host{display:block;font-family:var(--snice-font-family, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif);contain:layout style paint;color:var(--snice-color-text,rgb(23 23 23));line-height:var(--snice-line-height-normal, 1.5);font-size:var(--snice-font-size-md, 1rem);word-wrap:break-word;overflow-wrap:break-word}.markdown-body{max-width:100%}.markdown-body h1,.markdown-body h2,.markdown-body h3,.markdown-body h4,.markdown-body h5,.markdown-body h6{font-family:var(--snice-font-family-display);color:var(--snice-color-text,rgb(23 23 23));font-weight:var(--snice-font-weight-semibold,600);line-height:1.25;margin-top:var(--snice-spacing-lg,1.5rem);margin-bottom:var(--snice-spacing-md,1rem)}.markdown-body h1{font-family:var(--snice-font-family-display);font-size:2rem;border-bottom:1px solid var(--snice-color-border,rgb(226 226 226));padding-bottom:var(--snice-spacing-xs,.5rem)}.markdown-body h2{font-family:var(--snice-font-family-display);font-size:1.5rem;border-bottom:1px solid var(--snice-color-border,rgb(226 226 226));padding-bottom:var(--snice-spacing-xs,.5rem)}.markdown-body h3{font-family:var(--snice-font-family-display);font-size:1.25rem}.markdown-body h4{font-family:var(--snice-font-family-display);font-size:1rem}.markdown-body h5{font-family:var(--snice-font-family-display);font-size:.875rem}.markdown-body h6{font-family:var(--snice-font-family-display);font-size:.875rem;color:var(--snice-color-text-tertiary,rgb(115 115 115))}.markdown-body p{margin-top:0;margin-bottom:var(--snice-spacing-md,1rem)}.markdown-body a{color:var(--snice-color-primary,rgb(37 99 235));text-decoration:none;cursor:pointer}.markdown-body a:hover{text-decoration:underline}.markdown-body strong{font-weight:var(--snice-font-weight-semibold,600)}.markdown-body em{font-style:italic}.markdown-body del{text-decoration:line-through;color:var(--snice-color-text-secondary,rgb(82 82 82))}.markdown-body ol,.markdown-body ul{margin-top:0;margin-bottom:var(--snice-spacing-md,1rem);padding-left:var(--snice-spacing-xl,2rem)}.markdown-body li{margin-bottom:var(--snice-spacing-2xs,.25rem)}.markdown-body li>ol,.markdown-body li>ul{margin-top:var(--snice-spacing-2xs,.25rem);margin-bottom:0}.markdown-body .task-list-item{list-style-type:none;margin-left:-1.5rem;padding-left:0}.markdown-body .task-list-item input[type=checkbox]{margin-right:var(--snice-spacing-xs,.5rem);vertical-align:middle}.markdown-body blockquote{margin:0 0 var(--snice-spacing-md,1rem) 0;padding:var(--snice-spacing-xs,.5rem) var(--snice-spacing-md,1rem);border-left:4px solid var(--snice-color-border,rgb(226 226 226));color:var(--snice-color-text-secondary,rgb(82 82 82));background:var(--snice-color-surface-container-high,rgb(252 251 249));border-radius:0 var(--snice-border-radius-md,.25rem) var(--snice-border-radius-md,.25rem) 0}.markdown-body blockquote>:last-child{margin-bottom:0}.markdown-body code{padding:.125rem .375rem;font-size:.875em;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);font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;white-space:nowrap}.markdown-body pre{margin-top:0;margin-bottom:var(--snice-spacing-md,1rem);padding: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-lg,.5rem);overflow-x:auto;font-size:.875rem;line-height:1.6}.markdown-body pre code{padding:0;background:0 0;border:none;border-radius:0;white-space:pre;font-size:inherit}.markdown-body table{width:100%;border-collapse:collapse;margin-bottom:var(--snice-spacing-md,1rem);font-size:var(--snice-font-size-sm, .875rem)}.markdown-body td,.markdown-body th{padding:var(--snice-spacing-xs,.5rem) var(--snice-spacing-sm,.75rem);border:1px solid var(--snice-color-border,rgb(226 226 226));text-align:left}.markdown-body th{background:var(--snice-color-surface-container-high,rgb(252 251 249));font-weight:var(--snice-font-weight-semibold,600)}.markdown-body tr:nth-child(2n){background:var(--snice-color-surface-container-high,rgb(252 251 249))}.markdown-body hr{border:none;border-top:1px solid var(--snice-color-border,rgb(226 226 226));margin:var(--snice-spacing-lg,1.5rem) 0}.markdown-body img{max-width:100%;height:auto;border-radius:var(--snice-border-radius-md,.25rem)}:host([theme=github]) .markdown-body h1{font-family:var(--snice-font-family-display);font-size:2em}:host([theme=github]) .markdown-body h2{font-family:var(--snice-font-family-display);font-size:1.5em}:host([theme=github]) .markdown-body h3{font-family:var(--snice-font-family-display);font-size:1.25em}:host([theme=github]) .markdown-body blockquote{border-left-color:var(--snice-color-text-tertiary,rgb(115 115 115));background:0 0}:host([theme=github]) .markdown-body pre{background:var(--snice-color-surface-container,rgb(246 248 250));color:var(--snice-color-text,rgb(36 41 47))}:host([theme=github]) .markdown-body code{background:var(--snice-color-surface-container,rgb(246 248 250));color:var(--snice-color-text,rgb(36 41 47))}";
+
+  // Sanitization: strip dangerous tags/attributes
+  const DANGEROUS_TAGS = /^(script|iframe|object|embed|form|input|button|select|textarea|link|meta|style|applet|base|basefont|bgsound|blink|body|frame|frameset|head|html|isindex|ilayer|layer|marquee|param|plaintext|title|xml)$/i;
+  const DANGEROUS_ATTRS = /^(on\w+|style|srcdoc|action|formaction|data-bind|xmlns)$/i;
+  const DANGEROUS_PROTOCOLS = /^(javascript|vbscript|data):/i;
+  function sanitizeHtml(html) {
+      // Pre-strip script/style tags before DOMParser to prevent execution in some environments
+      const preStripped = html.replace(/<(script|style)\b[^>]*>[\s\S]*?<\/\1>/gi, '').replace(/<(script|style)\b[^>]*\/?>/gi, '');
+      const parser = new DOMParser();
+      const doc = parser.parseFromString(preStripped, 'text/html');
+      const walk = (node) => {
+          const children = Array.from(node.children);
+          for (const child of children) {
+              if (DANGEROUS_TAGS.test(child.tagName)) {
+                  child.remove();
+                  continue;
+              }
+              const attrs = Array.from(child.attributes);
+              for (const attr of attrs) {
+                  if (DANGEROUS_ATTRS.test(attr.name)) {
+                      child.removeAttribute(attr.name);
+                  }
+                  if (attr.name === 'href' || attr.name === 'src') {
+                      if (DANGEROUS_PROTOCOLS.test(attr.value.trim())) {
+                          child.removeAttribute(attr.name);
+                      }
+                  }
+              }
+              walk(child);
+          }
+      };
+      walk(doc.body);
+      return doc.body.innerHTML;
+  }
+  // Escape HTML special characters
+  function escapeHtml(str) {
+      return str.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;');
+  }
+  // Lightweight GFM-compatible markdown parser
+  function parseMarkdown(md) {
+      if (!md)
+          return '';
+      let result = md;
+      // Normalize line endings
+      result = result.replace(/\r\n/g, '\n').replace(/\r/g, '\n');
+      // Extract code blocks first to protect them from parsing
+      const codeBlocks = [];
+      result = result.replace(/```(\w*)\n([\s\S]*?)```/g, (_match, lang, code) => {
+          const escaped = escapeHtml(code.replace(/\n$/, ''));
+          const langAttr = lang ? ` class="language-${escapeHtml(lang)}"` : '';
+          codeBlocks.push(`<pre><code${langAttr}>${escaped}</code></pre>`);
+          return `\x00CB${codeBlocks.length - 1}\x00`;
+      });
+      // Extract inline code
+      const inlineCodes = [];
+      result = result.replace(/`([^`\n]+)`/g, (_match, code) => {
+          inlineCodes.push(`<code>${escapeHtml(code)}</code>`);
+          return `\x00IC${inlineCodes.length - 1}\x00`;
+      });
+      // Horizontal rules (before list processing)
+      result = result.replace(/^([-*_]){3,}\s*$/gm, '<hr>');
+      // Headings
+      result = result.replace(/^######\s+(.+)$/gm, '<h6>$1</h6>');
+      result = result.replace(/^#####\s+(.+)$/gm, '<h5>$1</h5>');
+      result = result.replace(/^####\s+(.+)$/gm, '<h4>$1</h4>');
+      result = result.replace(/^###\s+(.+)$/gm, '<h3>$1</h3>');
+      result = result.replace(/^##\s+(.+)$/gm, '<h2>$1</h2>');
+      result = result.replace(/^#\s+(.+)$/gm, '<h1>$1</h1>');
+      // Blockquotes
+      result = result.replace(/^((?:>\s?.*\n?)+)/gm, (match) => {
+          const content = match.replace(/^>\s?/gm, '').trim();
+          return `<blockquote>${content}</blockquote>`;
+      });
+      // Tables (GFM)
+      result = result.replace(/^(\|.+\|)\n(\|[-:\s|]+\|)\n((?:\|.+\|\n?)*)/gm, (_match, headerRow, _separator, bodyRows) => {
+          const headers = headerRow.split('|').filter((c) => c.trim()).map((c) => `<th>${c.trim()}</th>`).join('');
+          const rows = bodyRows.trim().split('\n').map((row) => {
+              const cells = row.split('|').filter((c) => c.trim()).map((c) => `<td>${c.trim()}</td>`).join('');
+              return `<tr>${cells}</tr>`;
+          }).join('');
+          return `<table><thead><tr>${headers}</tr></thead><tbody>${rows}</tbody></table>`;
+      });
+      // Task lists (before regular lists)
+      result = result.replace(/^(\s*)- \[x\]\s+(.+)$/gm, '$1<li class="task-list-item"><input type="checkbox" checked disabled> $2</li>');
+      result = result.replace(/^(\s*)- \[ \]\s+(.+)$/gm, '$1<li class="task-list-item"><input type="checkbox" disabled> $2</li>');
+      // Unordered lists
+      result = result.replace(/^((?:\s*[-*+]\s+.+\n?)+)/gm, (match) => {
+          const items = match.trim().split('\n').map(line => {
+              const content = line.replace(/^\s*[-*+]\s+/, '');
+              if (content.startsWith('<li class="task-list-item">'))
+                  return content;
+              return `<li>${content}</li>`;
+          }).join('');
+          return `<ul>${items}</ul>`;
+      });
+      // Ordered lists
+      result = result.replace(/^((?:\s*\d+\.\s+.+\n?)+)/gm, (match) => {
+          const items = match.trim().split('\n').map(line => {
+              const content = line.replace(/^\s*\d+\.\s+/, '');
+              return `<li>${content}</li>`;
+          }).join('');
+          return `<ol>${items}</ol>`;
+      });
+      // Images — escape src attribute and alt text so payloads like
+      //   ![x](/ onerror="...")  cannot break out of the attribute context.
+      result = result.replace(/!\[([^\]]*)\]\(([^)]+)\)/g, (_m, alt, src) => `<img src="${snice.escapeAttr(src)}" alt="${snice.escapeAttr(alt)}">`);
+      // Links — same escaping for href + text.
+      result = result.replace(/\[([^\]]+)\]\(([^)]+)\)/g, (_m, text, href) => `<a href="${snice.escapeAttr(href)}">${escapeHtml(text)}</a>`);
+      // Autolinks (GFM)
+      result = result.replace(/(^|[^"(])(https?:\/\/[^\s<>]+)/g, (_m, lead, url) => `${lead}<a href="${snice.escapeAttr(url)}">${escapeHtml(url)}</a>`);
+      // Bold and italic (process bold first)
+      result = result.replace(/\*\*\*(.+?)\*\*\*/g, '<strong><em>$1</em></strong>');
+      result = result.replace(/___(.+?)___/g, '<strong><em>$1</em></strong>');
+      result = result.replace(/\*\*(.+?)\*\*/g, '<strong>$1</strong>');
+      result = result.replace(/__(.+?)__/g, '<strong>$1</strong>');
+      result = result.replace(/\*(.+?)\*/g, '<em>$1</em>');
+      result = result.replace(/_(.+?)_/g, '<em>$1</em>');
+      // Strikethrough (GFM)
+      result = result.replace(/~~(.+?)~~/g, '<del>$1</del>');
+      // Paragraphs: wrap standalone text lines
+      result = result.replace(/^(?!<[a-z/]|$|\x00)(.+)$/gm, '<p>$1</p>');
+      // Clean up double paragraphs / empty paragraphs
+      result = result.replace(/<p><\/p>/g, '');
+      result = result.replace(/(<\/(?:ul|ol|blockquote|table|pre|h[1-6]|hr)>)\s*<p>/g, '$1\n<p>');
+      // Restore inline codes
+      result = result.replace(/\x00IC(\d+)\x00/g, (_match, idx) => inlineCodes[parseInt(idx)]);
+      // Restore code blocks
+      result = result.replace(/(?:<p>)?\x00CB(\d+)\x00(?:<\/p>)?/g, (_match, idx) => codeBlocks[parseInt(idx)]);
+      return result.trim();
+  }
+  (() => {
+      let _classDecorators = [snice.element('snice-markdown')];
+      let _classDescriptor;
+      let _classExtraInitializers = [];
+      let _classThis;
+      let _classSuper = HTMLElement;
+      let _instanceExtraInitializers = [];
+      let _content_decorators;
+      let _content_initializers = [];
+      let _content_extraInitializers = [];
+      let _sanitize_decorators;
+      let _sanitize_initializers = [];
+      let _sanitize_extraInitializers = [];
+      let _theme_decorators;
+      let _theme_initializers = [];
+      let _theme_extraInitializers = [];
+      let _renderedHtml_decorators;
+      let _renderedHtml_initializers = [];
+      let _renderedHtml_extraInitializers = [];
+      let _componentStyles_decorators;
+      let _init_decorators;
+      let _handleSlotChange_decorators;
+      let _handleContentChange_decorators;
+      let _handleSanitizeChange_decorators;
+      let _handleLinkClick_decorators;
+      let _emitRender_decorators;
+      let _emitLinkClick_decorators;
+      let _renderContent_decorators;
+      (class extends _classSuper {
+          static { _classThis = this; }
+          static {
+              const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
+              _content_decorators = [snice.property({ attribute: false })];
+              _sanitize_decorators = [snice.property({ type: Boolean })];
+              _theme_decorators = [snice.property()];
+              _renderedHtml_decorators = [snice.property({ attribute: false })];
+              _componentStyles_decorators = [snice.styles()];
+              _init_decorators = [snice.ready()];
+              _handleSlotChange_decorators = [snice.on('slotchange', { target: 'slot' })];
+              _handleContentChange_decorators = [snice.watch('content')];
+              _handleSanitizeChange_decorators = [snice.watch('sanitize')];
+              _handleLinkClick_decorators = [snice.on('click', { target: 'a' })];
+              _emitRender_decorators = [snice.dispatch('markdown-render', { bubbles: true, composed: true })];
+              _emitLinkClick_decorators = [snice.dispatch('link-click', { bubbles: true, composed: true })];
+              _renderContent_decorators = [snice.render()];
+              __esDecorate(this, null, _componentStyles_decorators, { kind: "method", name: "componentStyles", static: false, private: false, access: { has: obj => "componentStyles" in obj, get: obj => obj.componentStyles }, 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, _handleSlotChange_decorators, { kind: "method", name: "handleSlotChange", static: false, private: false, access: { has: obj => "handleSlotChange" in obj, get: obj => obj.handleSlotChange }, metadata: _metadata }, null, _instanceExtraInitializers);
+              __esDecorate(this, null, _handleContentChange_decorators, { kind: "method", name: "handleContentChange", static: false, private: false, access: { has: obj => "handleContentChange" in obj, get: obj => obj.handleContentChange }, metadata: _metadata }, null, _instanceExtraInitializers);
+              __esDecorate(this, null, _handleSanitizeChange_decorators, { kind: "method", name: "handleSanitizeChange", static: false, private: false, access: { has: obj => "handleSanitizeChange" in obj, get: obj => obj.handleSanitizeChange }, metadata: _metadata }, null, _instanceExtraInitializers);
+              __esDecorate(this, null, _handleLinkClick_decorators, { kind: "method", name: "handleLinkClick", static: false, private: false, access: { has: obj => "handleLinkClick" in obj, get: obj => obj.handleLinkClick }, metadata: _metadata }, null, _instanceExtraInitializers);
+              __esDecorate(this, null, _emitRender_decorators, { kind: "method", name: "emitRender", static: false, private: false, access: { has: obj => "emitRender" in obj, get: obj => obj.emitRender }, metadata: _metadata }, null, _instanceExtraInitializers);
+              __esDecorate(this, null, _emitLinkClick_decorators, { kind: "method", name: "emitLinkClick", static: false, private: false, access: { has: obj => "emitLinkClick" in obj, get: obj => obj.emitLinkClick }, metadata: _metadata }, null, _instanceExtraInitializers);
+              __esDecorate(this, null, _renderContent_decorators, { kind: "method", name: "renderContent", static: false, private: false, access: { has: obj => "renderContent" in obj, get: obj => obj.renderContent }, metadata: _metadata }, null, _instanceExtraInitializers);
+              __esDecorate(null, null, _content_decorators, { kind: "field", name: "content", static: false, private: false, access: { has: obj => "content" in obj, get: obj => obj.content, set: (obj, value) => { obj.content = value; } }, metadata: _metadata }, _content_initializers, _content_extraInitializers);
+              __esDecorate(null, null, _sanitize_decorators, { kind: "field", name: "sanitize", static: false, private: false, access: { has: obj => "sanitize" in obj, get: obj => obj.sanitize, set: (obj, value) => { obj.sanitize = value; } }, metadata: _metadata }, _sanitize_initializers, _sanitize_extraInitializers);
+              __esDecorate(null, null, _theme_decorators, { kind: "field", name: "theme", static: false, private: false, access: { has: obj => "theme" in obj, get: obj => obj.theme, set: (obj, value) => { obj.theme = value; } }, metadata: _metadata }, _theme_initializers, _theme_extraInitializers);
+              __esDecorate(null, null, _renderedHtml_decorators, { kind: "field", name: "renderedHtml", static: false, private: false, access: { has: obj => "renderedHtml" in obj, get: obj => obj.renderedHtml, set: (obj, value) => { obj.renderedHtml = value; } }, metadata: _metadata }, _renderedHtml_initializers, _renderedHtml_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 });
+              __runInitializers(_classThis, _classExtraInitializers);
+          }
+          componentStyles() {
+              return snice.css /*css*/ `${markdownStyles}`;
+          }
+          init() {
+              if (!this.content) {
+                  this.readSlottedContent();
+              }
+              if (this.content) {
+                  this.renderMarkdown();
+              }
+          }
+          handleSlotChange() {
+              this.readSlottedContent();
+          }
+          readSlottedContent() {
+              const text = this.textContent?.trim();
+              if (text) {
+                  this.content = text;
+                  this.renderMarkdown();
+              }
+          }
+          handleContentChange() {
+              this.renderMarkdown();
+          }
+          handleSanitizeChange() {
+              this.renderMarkdown();
+          }
+          renderMarkdown() {
+              let parsed = parseMarkdown(this.content);
+              if (this.sanitize) {
+                  parsed = sanitizeHtml(parsed);
+              }
+              this.renderedHtml = parsed;
+              this.emitRender();
+          }
+          handleLinkClick(e) {
+              const anchor = e.target;
+              if (anchor?.tagName === 'A') {
+                  e.preventDefault();
+                  this.emitLinkClick(anchor.getAttribute('href') || '', anchor.textContent || '');
+              }
+          }
+          emitRender() {
+              return { html: this.renderedHtml };
+          }
+          emitLinkClick(href, text) {
+              return { href, text };
+          }
+          /** Set content programmatically and re-render */
+          setContent(markdown) {
+              this.content = markdown;
+              this.renderMarkdown();
+          }
+          renderContent() {
+              return snice.html /*html*/ `
+      <slot style="display:none"></slot>
+      <div class="markdown-body" part="base">${snice.unsafeHTML(this.renderedHtml)}</div>
+    `;
+          }
+          constructor() {
+              super(...arguments);
+              // Reactive so parents can drive it via a .content template binding — a
+              // plain field would render once and go stale on later assignments.
+              this.content = (__runInitializers(this, _instanceExtraInitializers), __runInitializers(this, _content_initializers, ''));
+              this.sanitize = (__runInitializers(this, _content_extraInitializers), __runInitializers(this, _sanitize_initializers, true));
+              this.theme = (__runInitializers(this, _sanitize_extraInitializers), __runInitializers(this, _theme_initializers, 'default'));
+              this.renderedHtml = (__runInitializers(this, _theme_extraInitializers), __runInitializers(this, _renderedHtml_initializers, ''));
+              __runInitializers(this, _renderedHtml_extraInitializers);
+          }
+      });
+      return _classThis;
+  })();
+
+  /**
+   * snice-chat-message - declarative message authoring for snice-chat.
+   *
+   * A config-carrier element (same pattern as snice-column): it renders only a
+   * <slot> and exposes getMessageDefinition() so the parent snice-chat can read
+   * its props + slotted body as a ChatMessage. It does not render the message
+   * itself — the parent owns all rendering and the styling part surface.
+   *
+   * @element snice-chat-message
+   */
+  (() => {
+      let _classDecorators = [snice.element('snice-chat-message')];
+      let _classDescriptor;
+      let _classExtraInitializers = [];
+      let _classThis;
+      let _classSuper = HTMLElement;
+      let _instanceExtraInitializers = [];
+      let _author_decorators;
+      let _author_initializers = [];
+      let _author_extraInitializers = [];
+      let _avatar_decorators;
+      let _avatar_initializers = [];
+      let _avatar_extraInitializers = [];
+      let _type_decorators;
+      let _type_initializers = [];
+      let _type_extraInitializers = [];
+      let _format_decorators;
+      let _format_initializers = [];
+      let _format_extraInitializers = [];
+      let _edited_decorators;
+      let _edited_initializers = [];
+      let _edited_extraInitializers = [];
+      let _authorColor_decorators;
+      let _authorColor_initializers = [];
+      let _authorColor_extraInitializers = [];
+      let _reactions_decorators;
+      let _reactions_initializers = [];
+      let _reactions_extraInitializers = [];
+      let _attachment_decorators;
+      let _attachment_initializers = [];
+      let _attachment_extraInitializers = [];
+      let _thread_decorators;
+      let _thread_initializers = [];
+      let _thread_extraInitializers = [];
+      let _render_decorators;
+      (class extends _classSuper {
+          static { _classThis = this; }
+          static {
+              const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
+              _author_decorators = [snice.property()];
+              _avatar_decorators = [snice.property()];
+              _type_decorators = [snice.property()];
+              _format_decorators = [snice.property()];
+              _edited_decorators = [snice.property({ type: Boolean })];
+              _authorColor_decorators = [snice.property({ attribute: 'author-color' })];
+              _reactions_decorators = [snice.property({ type: Array, attribute: false })];
+              _attachment_decorators = [snice.property({ type: Object, attribute: false })];
+              _thread_decorators = [snice.property({ type: Array, attribute: false })];
+              _render_decorators = [snice.render()];
+              __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, _author_decorators, { kind: "field", name: "author", static: false, private: false, access: { has: obj => "author" in obj, get: obj => obj.author, set: (obj, value) => { obj.author = value; } }, metadata: _metadata }, _author_initializers, _author_extraInitializers);
+              __esDecorate(null, null, _avatar_decorators, { kind: "field", name: "avatar", static: false, private: false, access: { has: obj => "avatar" in obj, get: obj => obj.avatar, set: (obj, value) => { obj.avatar = value; } }, metadata: _metadata }, _avatar_initializers, _avatar_extraInitializers);
+              __esDecorate(null, null, _type_decorators, { kind: "field", name: "type", static: false, private: false, access: { has: obj => "type" in obj, get: obj => obj.type, set: (obj, value) => { obj.type = value; } }, metadata: _metadata }, _type_initializers, _type_extraInitializers);
+              __esDecorate(null, null, _format_decorators, { kind: "field", name: "format", static: false, private: false, access: { has: obj => "format" in obj, get: obj => obj.format, set: (obj, value) => { obj.format = value; } }, metadata: _metadata }, _format_initializers, _format_extraInitializers);
+              __esDecorate(null, null, _edited_decorators, { kind: "field", name: "edited", static: false, private: false, access: { has: obj => "edited" in obj, get: obj => obj.edited, set: (obj, value) => { obj.edited = value; } }, metadata: _metadata }, _edited_initializers, _edited_extraInitializers);
+              __esDecorate(null, null, _authorColor_decorators, { kind: "field", name: "authorColor", static: false, private: false, access: { has: obj => "authorColor" in obj, get: obj => obj.authorColor, set: (obj, value) => { obj.authorColor = value; } }, metadata: _metadata }, _authorColor_initializers, _authorColor_extraInitializers);
+              __esDecorate(null, null, _reactions_decorators, { kind: "field", name: "reactions", static: false, private: false, access: { has: obj => "reactions" in obj, get: obj => obj.reactions, set: (obj, value) => { obj.reactions = value; } }, metadata: _metadata }, _reactions_initializers, _reactions_extraInitializers);
+              __esDecorate(null, null, _attachment_decorators, { kind: "field", name: "attachment", static: false, private: false, access: { has: obj => "attachment" in obj, get: obj => obj.attachment, set: (obj, value) => { obj.attachment = value; } }, metadata: _metadata }, _attachment_initializers, _attachment_extraInitializers);
+              __esDecorate(null, null, _thread_decorators, { kind: "field", name: "thread", static: false, private: false, access: { has: obj => "thread" in obj, get: obj => obj.thread, set: (obj, value) => { obj.thread = value; } }, metadata: _metadata }, _thread_initializers, _thread_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 });
+              __runInitializers(_classThis, _classExtraInitializers);
+          }
+          render() {
+              return snice.html /*html*/ `<slot></slot>`;
+          }
+          /** Serialize this element into a ChatMessage for the parent chat. */
+          getMessageDefinition() {
+              const timestampAttr = this.getAttribute('timestamp');
+              const definition = {
+                  id: '',
+                  type: this.type,
+                  content: (this.textContent ?? '').trim(),
+                  author: this.author,
+                  timestamp: timestampAttr ? new Date(timestampAttr) : new Date(),
+                  edited: this.edited,
+              };
+              if (this.format)
+                  definition.format = this.format;
+              if (this.avatar)
+                  definition.avatar = this.avatar;
+              if (this.authorColor)
+                  definition.authorColor = this.authorColor;
+              if (this.reactions)
+                  definition.reactions = this.reactions;
+              if (this.attachment)
+                  definition.attachment = this.attachment;
+              if (this.thread)
+                  definition.thread = this.thread;
+              return definition;
+          }
+          constructor() {
+              super(...arguments);
+              this.author = (__runInitializers(this, _instanceExtraInitializers), __runInitializers(this, _author_initializers, ''));
+              this.avatar = (__runInitializers(this, _author_extraInitializers), __runInitializers(this, _avatar_initializers, ''));
+              this.type = (__runInitializers(this, _avatar_extraInitializers), __runInitializers(this, _type_initializers, 'text'));
+              // No default: undefined defers to the chat-level `markdown` flag, exactly
+              // like an imperative addMessage() without a format.
+              this.format = (__runInitializers(this, _type_extraInitializers), __runInitializers(this, _format_initializers, void 0));
+              this.edited = (__runInitializers(this, _format_extraInitializers), __runInitializers(this, _edited_initializers, false));
+              this.authorColor = (__runInitializers(this, _edited_extraInitializers), __runInitializers(this, _authorColor_initializers, ''));
+              // Rich fields have no attribute form — set them as JS properties.
+              this.reactions = (__runInitializers(this, _authorColor_extraInitializers), __runInitializers(this, _reactions_initializers, void 0));
+              this.attachment = (__runInitializers(this, _reactions_extraInitializers), __runInitializers(this, _attachment_initializers, void 0));
+              this.thread = (__runInitializers(this, _attachment_extraInitializers), __runInitializers(this, _thread_initializers, void 0));
+              __runInitializers(this, _thread_extraInitializers);
+          }
+      });
+      return _classThis;
+  })();
+
+  /**
+   * 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
@@ -279,6 +725,26 @@ var SniceChat = (function (exports, snice) {
           .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
    *
@@ -290,7 +756,6 @@ var SniceChat = (function (exports, snice) {
    * @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
    */
@@ -325,23 +790,53 @@ var SniceChat = (function (exports, snice) {
       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; }
@@ -355,11 +850,28 @@ var SniceChat = (function (exports, snice) {
               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)
@@ -380,31 +892,46 @@ var SniceChat = (function (exports, snice) {
               _showTyping_decorators = [snice.property({ type: Boolean, attribute: 'show-typing' })];
               _showAvatars_decorators = [snice.property({ type: Boolean, attribute: 'show-avatars' })];
               _showTimestamps_decorators = [snice.property({ type: Boolean, attribute: 'show-timestamps' })];
+              _authorColors_decorators = [snice.property({ type: Object, attribute: false })];
+              _colorAuthors_decorators = [snice.property({ type: Boolean, attribute: 'color-authors' })];
+              _markdown_decorators = [snice.property({ type: Boolean })];
+              _layout_decorators = [snice.property()];
+              _editingId_decorators = [snice.property({ attribute: false })];
+              _confirmingDeleteId_decorators = [snice.property({ attribute: false })];
               _messagesArea_decorators = [snice.query('.messages-area')];
               _inputField_decorators = [snice.query('.input-field')];
+              _editField_decorators = [snice.query('.edit-field')];
+              _editBox_decorators = [snice.query('.message-edit')];
+              _confirmBox_decorators = [snice.query('.message-confirm')];
               _styles_decorators = [snice.styles()];
               _init_decorators = [snice.ready()];
+              _onSlottedMessagesChanged_decorators = [snice.observe('mutation:childList')];
+              _onSlottedMessageAttributesChanged_decorators = [snice.observe('mutation:attributes', { subtree: true })];
               _cleanup_decorators = [snice.dispose()];
               _messagesChanged_decorators = [snice.watch('messages')];
               _emitMessageSend_decorators = [snice.dispatch('message-send', { bubbles: true, composed: true })];
               _emitMessageEdit_decorators = [snice.dispatch('message-edit', { bubbles: true, composed: true })];
               _emitMessageDelete_decorators = [snice.dispatch('message-delete', { bubbles: true, composed: true })];
               _emitMessageReact_decorators = [snice.dispatch('message-react', { bubbles: true, composed: true })];
-              _emitMessageThread_decorators = [snice.dispatch('message-thread', { bubbles: true, composed: true })];
               _emitTypingStart_decorators = [snice.dispatch('typing-start', { bubbles: true, composed: true })];
               _emitTypingStop_decorators = [snice.dispatch('typing-stop', { bubbles: true, composed: true })];
+              _focusEditField_decorators = [snice.watch('editingId')];
+              _revealDeleteConfirm_decorators = [snice.watch('confirmingDeleteId')];
               _render_decorators = [snice.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);
@@ -414,8 +941,17 @@ var SniceChat = (function (exports, snice) {
               __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 });
@@ -426,6 +962,50 @@ var SniceChat = (function (exports, snice) {
           }
           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);
@@ -433,9 +1013,13 @@ var SniceChat = (function (exports, snice) {
                   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 };
@@ -449,9 +1033,6 @@ var SniceChat = (function (exports, snice) {
           emitMessageReact(messageId, emoji) {
               return { messageId, emoji };
           }
-          emitMessageThread(messageId) {
-              return { messageId };
-          }
           emitTypingStart() {
               return {};
           }
@@ -566,26 +1147,95 @@ var SniceChat = (function (exports, snice) {
               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 snice.html /*html*/ `
@@ -612,23 +1262,58 @@ var SniceChat = (function (exports, snice) {
       </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 snice.html /*html*/ `<snice-markdown part="message-text" class="message-text" .content=${message.content}></snice-markdown>`;
+              }
+              return snice.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 snice.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 snice.html /*html*/ `
-      <div class="message" data-message-id="${message.id}">
+      <div part="message ${ownPart}" class="message ${ownClass}" data-message-id="${message.id}">
         ${this.showAvatars
                 ? snice.html `
-              <div class="message-avatar">
+              <div part="avatar" class="message-avatar">
                 ${message.avatar
                     ? snice.html `<img src="${message.avatar}" alt="${message.author}" />`
                     : getInitials(message.author)}
@@ -637,55 +1322,70 @@ var SniceChat = (function (exports, snice) {
                 : ''}
         <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
-                ? snice.html `<span class="message-timestamp">${formatTime(message.timestamp)}</span>`
+                ? snice.html `<span part="timestamp" class="message-timestamp">${formatTime(message.timestamp)}</span>`
                 : ''}
-            ${message.edited ? snice.html `<span class="message-edited">(edited)</span>` : ''}
+            ${message.edited ? snice.html `<span part="edited" class="message-edited">(edited)</span>` : ''}
           </div>
-          ${message.content ? snice.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 snice.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 snice.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 snice.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
                 ? snice.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">
+                ${snice.unsafeHTML(PENCIL)}
+              </button>
+              <button class="action-button" @click=${() => this.handleDelete(messageId)} title="Delete" aria-label="Delete message">
+                ${snice.unsafeHTML(TRASH)}
+              </button>
             `
                 : ''}
       </div>
@@ -696,13 +1396,13 @@ var SniceChat = (function (exports, snice) {
                   return '';
               if (attachment.type === 'image') {
                   return snice.html /*html*/ `
-        <div class="message-attachment">
+        <div part="attachment" class="message-attachment">
           <img src="${attachment.url}" alt="${attachment.name}" />
         </div>
       `;
               }
               return snice.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">
@@ -721,20 +1421,24 @@ var SniceChat = (function (exports, snice) {
       </div>
     `;
           }
-          renderReactions(messageId, reactions, isCurrentUser) {
+          renderReactions(messageId, reactions) {
               if (!reactions || reactions.length === 0)
                   return '';
               return snice.html /*html*/ `
-      <div class="message-reactions">
-        ${reactions.map((reaction) => snice.html `
+      <div part="reactions" class="message-reactions">
+        ${reactions.map((reaction) => {
+                const isActive = reaction.users.includes(this.currentUser);
+                return snice.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>
     `;
           }
@@ -744,7 +1448,7 @@ var SniceChat = (function (exports, snice) {
                   return '';
               return snice.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>
@@ -775,20 +1479,12 @@ var SniceChat = (function (exports, snice) {
                     @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>
+                    ${snice.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>
+              ${snice.unsafeHTML(PAPER_AIRPLANE_SOLID)}
             </button>
           </div>
         </div>