snice 4.9.0 → 4.10.0

package/dist/cdn/comments/README.md

@@ -0,0 +1,27 @@
+# Snice Comments - CDN Build
+
+CDN build of the Snice comments component. Requires the Snice runtime (`snice-runtime.min.js`) to be loaded first.
+
+## Usage
+
+```html
+<script src="snice-runtime.min.js"></script>
+<script src="snice-comments.min.js"></script>
+<snice-comments></snice-comments>
+```
+
+## Size
+- Minified: 18.5 KB
+- Gzipped: 4.9 KB
+
+## Theme
+For proper styling, link the Snice theme CSS:
+```html
+<link rel="stylesheet" href="https://unpkg.com/snice/dist/components/theme/theme.css">
+```
+
+## Documentation
+https://snice.dev
+
+## License
+MIT

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

@@ -0,0 +1,544 @@
+/*!
+ * snice v4.9.0
+ * Imperative TypeScript framework for building vanilla web components with decorators, differential rendering, routing, and controllers. No virtual DOM, no build complexity.
+ * (c) 2024
+ * Released under the MIT License.
+ */
+if(typeof globalThis.Snice==="undefined"){console.warn("[snice] snice-runtime.min.js must be loaded before snice-comments.min.js");}
+var SniceComments = (function (exports, snice) {
+  'use strict';
+
+  /******************************************************************************
+  Copyright (c) Microsoft Corporation.
+
+  Permission to use, copy, modify, and/or distribute this software for any
+  purpose with or without fee is hereby granted.
+
+  THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+  REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
+  AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+  INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
+  LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
+  OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
+  PERFORMANCE OF THIS SOFTWARE.
+  ***************************************************************************** */
+  /* global Reflect, Promise, SuppressedError, Symbol, Iterator */
+
+
+  function __esDecorate(ctor, descriptorIn, decorators, contextIn, initializers, extraInitializers) {
+    function accept(f) { if (f !== void 0 && typeof f !== "function") throw new TypeError("Function expected"); return f; }
+    var kind = contextIn.kind, key = kind === "getter" ? "get" : kind === "setter" ? "set" : "value";
+    var target = !descriptorIn && ctor ? contextIn["static"] ? ctor : ctor.prototype : null;
+    var descriptor = descriptorIn || (target ? Object.getOwnPropertyDescriptor(target, contextIn.name) : {});
+    var _, done = false;
+    for (var i = decorators.length - 1; i >= 0; i--) {
+        var context = {};
+        for (var p in contextIn) context[p] = p === "access" ? {} : contextIn[p];
+        for (var p in contextIn.access) context.access[p] = contextIn.access[p];
+        context.addInitializer = function (f) { if (done) throw new TypeError("Cannot add initializers after decoration has completed"); extraInitializers.push(accept(f || null)); };
+        var result = (0, decorators[i])(kind === "accessor" ? { get: descriptor.get, set: descriptor.set } : descriptor[key], context);
+        if (kind === "accessor") {
+            if (result === void 0) continue;
+            if (result === null || typeof result !== "object") throw new TypeError("Object expected");
+            if (_ = accept(result.get)) descriptor.get = _;
+            if (_ = accept(result.set)) descriptor.set = _;
+            if (_ = accept(result.init)) initializers.unshift(_);
+        }
+        else if (_ = accept(result)) {
+            if (kind === "field") initializers.unshift(_);
+            else descriptor[key] = _;
+        }
+    }
+    if (target) Object.defineProperty(target, contextIn.name, descriptor);
+    done = true;
+  }
+  function __runInitializers(thisArg, initializers, value) {
+    var useValue = arguments.length > 2;
+    for (var i = 0; i < initializers.length; i++) {
+        value = useValue ? initializers[i].call(thisArg, value) : initializers[i].call(thisArg);
+    }
+    return useValue ? value : void 0;
+  }
+  typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) {
+    var e = new Error(message);
+    return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
+  };
+
+  var cssContent = ":host{display:block;contain:layout style paint;font-family:var(--snice-font-family, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif);color:var(--snice-color-text,rgb(23 23 23));--comments-bg:var(--snice-color-background, rgb(255 255 255));--comments-border:var(--snice-color-border, rgb(226 226 226));--comments-text:var(--snice-color-text, rgb(23 23 23));--comments-text-secondary:var(--snice-color-text-secondary, rgb(82 82 82));--comments-text-tertiary:var(--snice-color-text-tertiary, rgb(115 115 115));--comments-primary:var(--snice-color-primary, rgb(37 99 235));--comments-danger:var(--snice-color-danger, rgb(220 38 38));--comments-bg-element:var(--snice-color-background-element, rgb(252 251 249))}*{box-sizing:border-box}.comments{display:flex;flex-direction:column;gap:var(--snice-spacing-md,1rem)}.comments__input-area{display:flex;gap:var(--snice-spacing-sm,.75rem);align-items:flex-start}.comments__input{flex:1;min-height:2.5rem;padding:var(--snice-spacing-xs,.5rem) var(--snice-spacing-sm,.75rem);border:1px solid var(--comments-border);border-radius:var(--snice-border-radius-md,.25rem);background:var(--comments-bg);color:var(--comments-text);font-family:inherit;font-size:var(--snice-font-size-md, 1rem);resize:vertical;line-height:var(--snice-line-height-normal, 1.5)}.comments__input:focus{outline:var(--snice-focus-ring-width,2px) solid var(--snice-focus-ring-color,rgb(59 130 246 / .5));outline-offset:var(--snice-focus-ring-offset,2px);border-color:var(--comments-primary)}.comments__input::placeholder{color:var(--comments-text-tertiary)}.comments__submit{padding:var(--snice-spacing-xs,.5rem) var(--snice-spacing-md,1rem);background:var(--comments-primary);color:rgb(255 255 255);border:none;border-radius:var(--snice-border-radius-md,.25rem);cursor:pointer;font-family:inherit;font-size:var(--snice-font-size-md, 1rem);font-weight:var(--snice-font-weight-medium,500);transition:opacity var(--snice-transition-fast, 150ms);white-space:nowrap}.comments__submit:hover{opacity:.9}.comments__submit:disabled{opacity:.4;cursor:not-allowed}.comments__submit:focus-visible{outline:var(--snice-focus-ring-width,2px) solid var(--snice-focus-ring-color,rgb(59 130 246 / .5));outline-offset:var(--snice-focus-ring-offset,2px)}.comments__list{display:flex;flex-direction:column;gap:var(--snice-spacing-sm,.75rem)}.comment{display:flex;gap:var(--snice-spacing-sm,.75rem);align-items:flex-start}.comment__avatar{width:2.25rem;height:2.25rem;border-radius:50%;background:var(--comments-bg-element);flex-shrink:0;overflow:hidden;display:flex;align-items:center;justify-content:center;font-size:.875rem;font-weight:var(--snice-font-weight-semibold,600);color:var(--comments-text-secondary)}.comment__avatar img{width:100%;height:100%;object-fit:cover}.comment__body{flex:1;min-width:0}.comment__header{display:flex;align-items:baseline;gap:var(--snice-spacing-xs,.5rem);margin-bottom:var(--snice-spacing-3xs,.125rem)}.comment__author{font-weight:var(--snice-font-weight-semibold,600);font-size:var(--snice-font-size-md, 1rem);color:var(--comments-text)}.comment__time{font-size:.75rem;color:var(--comments-text-tertiary)}.comment__text{font-size:var(--snice-font-size-md, 1rem);line-height:var(--snice-line-height-normal, 1.5);color:var(--comments-text);margin:0;white-space:pre-wrap;word-break:break-word}.comment__actions{display:flex;gap:var(--snice-spacing-sm,.75rem);margin-top:var(--snice-spacing-2xs,.25rem)}.comment__action{display:inline-flex;align-items:center;gap:var(--snice-spacing-3xs,.125rem);background:0 0;border:none;cursor:pointer;font-family:inherit;font-size:.75rem;color:var(--comments-text-tertiary);padding:var(--snice-spacing-3xs,.125rem) var(--snice-spacing-2xs,.25rem);border-radius:var(--snice-border-radius-md,.25rem);transition:color var(--snice-transition-fast, 150ms),background var(--snice-transition-fast, 150ms)}.comment__action:hover{color:var(--comments-text-secondary);background:var(--comments-bg-element)}.comment__action:focus-visible{outline:var(--snice-focus-ring-width,2px) solid var(--snice-focus-ring-color,rgb(59 130 246 / .5));outline-offset:var(--snice-focus-ring-offset,2px)}.comment__action--liked,.comment__action--liked:hover{color:var(--comments-primary)}.comment__action--delete:hover{color:var(--comments-danger)}.comment__like-count{font-size:.75rem}.comment__replies{margin-top:var(--snice-spacing-sm,.75rem);margin-left:var(--snice-spacing-lg,1.5rem);padding-left:var(--snice-spacing-sm,.75rem);border-left:2px solid var(--comments-border);display:flex;flex-direction:column;gap:var(--snice-spacing-sm,.75rem)}.comment__reply-input{display:flex;gap:var(--snice-spacing-xs,.5rem);margin-top:var(--snice-spacing-xs,.5rem);margin-left:var(--snice-spacing-lg,1.5rem);padding-left:var(--snice-spacing-sm,.75rem)}.comment__reply-input .comments__input{font-size:.875rem;min-height:2rem;padding:var(--snice-spacing-2xs,.25rem) var(--snice-spacing-xs,.5rem)}.comment__reply-input .comments__submit{font-size:.8125rem;padding:var(--snice-spacing-2xs,.25rem) var(--snice-spacing-sm,.75rem)}.comment__cancel{padding:var(--snice-spacing-2xs,.25rem) var(--snice-spacing-sm,.75rem);background:0 0;border:1px solid var(--comments-border);border-radius:var(--snice-border-radius-md,.25rem);cursor:pointer;font-family:inherit;font-size:.8125rem;color:var(--comments-text-secondary);transition:background var(--snice-transition-fast, 150ms)}.comment__cancel:hover{background:var(--comments-bg-element)}.comments__empty{text-align:center;padding:var(--snice-spacing-xl,2rem);color:var(--comments-text-tertiary);font-style:italic}";
+
+  /**
+   * <snice-comment> — declarative child element for comments.
+   *
+   * Usage:
+   *   <snice-comments current-user="John">
+   *     <snice-comment author="Alice" avatar="alice.jpg" timestamp="2024-01-15T10:30:00Z">
+   *       Great article!
+   *       <snice-comment author="Bob" timestamp="2024-01-15T11:00:00Z">
+   *         Thanks Alice!
+   *       </snice-comment>
+   *     </snice-comment>
+   *   </snice-comments>
+   *
+   * Attributes: author, avatar, timestamp, likes (number), liked (boolean)
+   * Nested <snice-comment> elements become replies.
+   */
+  let SniceComment = (() => {
+      let _classDecorators = [snice.element('snice-comment')];
+      let _classDescriptor;
+      let _classExtraInitializers = [];
+      let _classThis;
+      let _classSuper = HTMLElement;
+      let _instanceExtraInitializers = [];
+      let _renderContent_decorators;
+      let _componentStyles_decorators;
+      (class extends _classSuper {
+          static { _classThis = this; }
+          static {
+              const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
+              _renderContent_decorators = [snice.render()];
+              _componentStyles_decorators = [snice.styles()];
+              __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(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(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);
+          }
+          renderContent() {
+              return snice.html `<slot></slot>`;
+          }
+          componentStyles() {
+              return snice.css `:host { display: none; }`;
+          }
+          constructor() {
+              super(...arguments);
+              __runInitializers(this, _instanceExtraInitializers);
+          }
+      });
+      return _classThis;
+  })();
+  let SniceComments = (() => {
+      let _classDecorators = [snice.element('snice-comments')];
+      let _classDescriptor;
+      let _classExtraInitializers = [];
+      let _classThis;
+      let _classSuper = HTMLElement;
+      let _instanceExtraInitializers = [];
+      let _comments_decorators;
+      let _comments_initializers = [];
+      let _comments_extraInitializers = [];
+      let _currentUser_decorators;
+      let _currentUser_initializers = [];
+      let _currentUser_extraInitializers = [];
+      let _allowReplies_decorators;
+      let _allowReplies_initializers = [];
+      let _allowReplies_extraInitializers = [];
+      let _allowLikes_decorators;
+      let _allowLikes_initializers = [];
+      let _allowLikes_extraInitializers = [];
+      let _maxDepth_decorators;
+      let _maxDepth_initializers = [];
+      let _maxDepth_extraInitializers = [];
+      let _newInput_decorators;
+      let _newInput_initializers = [];
+      let _newInput_extraInitializers = [];
+      let _init_decorators;
+      let _handleSlotChange_decorators;
+      let _handleCommentsChange_decorators;
+      let _emitCommentAdd_decorators;
+      let _emitCommentReply_decorators;
+      let _emitCommentDelete_decorators;
+      let _emitCommentLike_decorators;
+      let _renderContent_decorators;
+      let _componentStyles_decorators;
+      (class extends _classSuper {
+          static { _classThis = this; }
+          constructor() {
+              super(...arguments);
+              this.comments = (__runInitializers(this, _instanceExtraInitializers), __runInitializers(this, _comments_initializers, []));
+              this.currentUser = (__runInitializers(this, _comments_extraInitializers), __runInitializers(this, _currentUser_initializers, ''));
+              this.allowReplies = (__runInitializers(this, _currentUser_extraInitializers), __runInitializers(this, _allowReplies_initializers, true));
+              this.allowLikes = (__runInitializers(this, _allowReplies_extraInitializers), __runInitializers(this, _allowLikes_initializers, true));
+              this.maxDepth = (__runInitializers(this, _allowLikes_extraInitializers), __runInitializers(this, _maxDepth_initializers, 3));
+              this.newInput = (__runInitializers(this, _maxDepth_extraInitializers), __runInitializers(this, _newInput_initializers, void 0));
+              this.replyingTo = (__runInitializers(this, _newInput_extraInitializers), null);
+              this.replyText = '';
+              this.newCommentText = '';
+          }
+          static {
+              const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
+              _comments_decorators = [snice.property({ type: Array })];
+              _currentUser_decorators = [snice.property({ attribute: 'current-user' })];
+              _allowReplies_decorators = [snice.property({ type: Boolean, attribute: 'allow-replies' })];
+              _allowLikes_decorators = [snice.property({ type: Boolean, attribute: 'allow-likes' })];
+              _maxDepth_decorators = [snice.property({ type: Number, attribute: 'max-depth' })];
+              _newInput_decorators = [snice.query('.comments__new-input')];
+              _init_decorators = [snice.ready()];
+              _handleSlotChange_decorators = [snice.on('slotchange', { target: 'slot' })];
+              _handleCommentsChange_decorators = [snice.watch('comments')];
+              _emitCommentAdd_decorators = [snice.dispatch('comment-add', { bubbles: true, composed: true })];
+              _emitCommentReply_decorators = [snice.dispatch('comment-reply', { bubbles: true, composed: true })];
+              _emitCommentDelete_decorators = [snice.dispatch('comment-delete', { bubbles: true, composed: true })];
+              _emitCommentLike_decorators = [snice.dispatch('comment-like', { bubbles: true, composed: true })];
+              _renderContent_decorators = [snice.render()];
+              _componentStyles_decorators = [snice.styles()];
+              __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, _handleCommentsChange_decorators, { kind: "method", name: "handleCommentsChange", static: false, private: false, access: { has: obj => "handleCommentsChange" in obj, get: obj => obj.handleCommentsChange }, metadata: _metadata }, null, _instanceExtraInitializers);
+              __esDecorate(this, null, _emitCommentAdd_decorators, { kind: "method", name: "emitCommentAdd", static: false, private: false, access: { has: obj => "emitCommentAdd" in obj, get: obj => obj.emitCommentAdd }, metadata: _metadata }, null, _instanceExtraInitializers);
+              __esDecorate(this, null, _emitCommentReply_decorators, { kind: "method", name: "emitCommentReply", static: false, private: false, access: { has: obj => "emitCommentReply" in obj, get: obj => obj.emitCommentReply }, metadata: _metadata }, null, _instanceExtraInitializers);
+              __esDecorate(this, null, _emitCommentDelete_decorators, { kind: "method", name: "emitCommentDelete", static: false, private: false, access: { has: obj => "emitCommentDelete" in obj, get: obj => obj.emitCommentDelete }, metadata: _metadata }, null, _instanceExtraInitializers);
+              __esDecorate(this, null, _emitCommentLike_decorators, { kind: "method", name: "emitCommentLike", static: false, private: false, access: { has: obj => "emitCommentLike" in obj, get: obj => obj.emitCommentLike }, 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(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(null, null, _comments_decorators, { kind: "field", name: "comments", static: false, private: false, access: { has: obj => "comments" in obj, get: obj => obj.comments, set: (obj, value) => { obj.comments = value; } }, metadata: _metadata }, _comments_initializers, _comments_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);
+              __esDecorate(null, null, _allowReplies_decorators, { kind: "field", name: "allowReplies", static: false, private: false, access: { has: obj => "allowReplies" in obj, get: obj => obj.allowReplies, set: (obj, value) => { obj.allowReplies = value; } }, metadata: _metadata }, _allowReplies_initializers, _allowReplies_extraInitializers);
+              __esDecorate(null, null, _allowLikes_decorators, { kind: "field", name: "allowLikes", static: false, private: false, access: { has: obj => "allowLikes" in obj, get: obj => obj.allowLikes, set: (obj, value) => { obj.allowLikes = value; } }, metadata: _metadata }, _allowLikes_initializers, _allowLikes_extraInitializers);
+              __esDecorate(null, null, _maxDepth_decorators, { kind: "field", name: "maxDepth", static: false, private: false, access: { has: obj => "maxDepth" in obj, get: obj => obj.maxDepth, set: (obj, value) => { obj.maxDepth = value; } }, metadata: _metadata }, _maxDepth_initializers, _maxDepth_extraInitializers);
+              __esDecorate(null, null, _newInput_decorators, { kind: "field", name: "newInput", static: false, private: false, access: { has: obj => "newInput" in obj, get: obj => obj.newInput, set: (obj, value) => { obj.newInput = value; } }, metadata: _metadata }, _newInput_initializers, _newInput_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);
+          }
+          init() {
+              this.collectCommentsFromChildren();
+          }
+          handleSlotChange() {
+              this.collectCommentsFromChildren();
+          }
+          /** Reads <snice-comment> children into the comments array (only if no comments set via property) */
+          collectCommentsFromChildren() {
+              if (this.comments.length > 0)
+                  return;
+              const commentEls = Array.from(this.querySelectorAll(':scope > snice-comment'));
+              if (commentEls.length === 0)
+                  return;
+              this.comments = commentEls.map(el => this.parseCommentElement(el));
+          }
+          parseCommentElement(el) {
+              // Get direct text content (excluding child element text)
+              const text = Array.from(el.childNodes)
+                  .filter(n => n.nodeType === Node.TEXT_NODE)
+                  .map(n => n.textContent?.trim())
+                  .filter(Boolean)
+                  .join(' ');
+              const comment = {
+                  id: el.getAttribute('id') || `c_${Date.now()}_${Math.random().toString(36).slice(2, 8)}`,
+                  author: el.getAttribute('author') || 'Anonymous',
+                  text,
+                  timestamp: el.getAttribute('timestamp') || new Date().toISOString(),
+                  likes: parseInt(el.getAttribute('likes') || '0', 10),
+                  liked: el.hasAttribute('liked'),
+              };
+              if (el.getAttribute('avatar')) {
+                  comment.avatar = el.getAttribute('avatar');
+              }
+              // Parse nested <snice-comment> as replies
+              const replyEls = Array.from(el.querySelectorAll(':scope > snice-comment'));
+              if (replyEls.length > 0) {
+                  comment.replies = replyEls.map(r => this.parseCommentElement(r));
+              }
+              return comment;
+          }
+          handleCommentsChange() {
+              // Re-render on comments change
+          }
+          generateId() {
+              return `c_${Date.now()}_${Math.random().toString(36).slice(2, 8)}`;
+          }
+          getInitials(name) {
+              return name
+                  .split(' ')
+                  .map(part => part.charAt(0))
+                  .join('')
+                  .toUpperCase()
+                  .slice(0, 2);
+          }
+          formatTimestamp(ts) {
+              try {
+                  const date = new Date(ts);
+                  const now = new Date();
+                  const diff = now.getTime() - date.getTime();
+                  const minutes = Math.floor(diff / 60000);
+                  const hours = Math.floor(diff / 3600000);
+                  const days = Math.floor(diff / 86400000);
+                  if (minutes < 1)
+                      return 'just now';
+                  if (minutes < 60)
+                      return `${minutes}m ago`;
+                  if (hours < 24)
+                      return `${hours}h ago`;
+                  if (days < 7)
+                      return `${days}d ago`;
+                  return date.toLocaleDateString();
+              }
+              catch {
+                  return ts;
+              }
+          }
+          findComment(comments, id) {
+              for (const c of comments) {
+                  if (c.id === id)
+                      return c;
+                  if (c.replies) {
+                      const found = this.findComment(c.replies, id);
+                      if (found)
+                          return found;
+                  }
+              }
+              return null;
+          }
+          removeComment(comments, id) {
+              return comments
+                  .filter(c => c.id !== id)
+                  .map(c => ({
+                  ...c,
+                  replies: c.replies ? this.removeComment(c.replies, id) : undefined
+              }));
+          }
+          updateComment(comments, id, updater) {
+              return comments.map(c => {
+                  if (c.id === id)
+                      return updater(c);
+                  if (c.replies) {
+                      return { ...c, replies: this.updateComment(c.replies, id, updater) };
+                  }
+                  return c;
+              });
+          }
+          // --- Public API ---
+          addComment(text, parentId) {
+              if (!text.trim())
+                  return;
+              const newComment = {
+                  id: this.generateId(),
+                  author: this.currentUser || 'Anonymous',
+                  text: text.trim(),
+                  timestamp: new Date().toISOString(),
+                  likes: 0,
+                  liked: false
+              };
+              if (parentId) {
+                  const parent = this.findComment(this.comments, parentId);
+                  if (!parent)
+                      return;
+                  this.comments = this.updateComment(this.comments, parentId, c => ({
+                      ...c,
+                      replies: [...(c.replies || []), newComment]
+                  }));
+                  this.emitCommentReply({
+                      id: newComment.id,
+                      text: newComment.text,
+                      author: newComment.author,
+                      parentId
+                  });
+              }
+              else {
+                  this.comments = [...this.comments, newComment];
+                  this.emitCommentAdd({
+                      id: newComment.id,
+                      text: newComment.text,
+                      author: newComment.author
+                  });
+              }
+          }
+          deleteComment(id) {
+              const comment = this.findComment(this.comments, id);
+              if (!comment)
+                  return;
+              this.comments = this.removeComment(this.comments, id);
+              this.emitCommentDelete({ id });
+          }
+          likeComment(id) {
+              const comment = this.findComment(this.comments, id);
+              if (!comment)
+                  return;
+              const newLiked = !comment.liked;
+              const newLikes = (comment.likes || 0) + (newLiked ? 1 : -1);
+              this.comments = this.updateComment(this.comments, id, c => ({
+                  ...c,
+                  liked: newLiked,
+                  likes: newLikes
+              }));
+              this.emitCommentLike({
+                  id,
+                  likes: newLikes,
+                  liked: newLiked
+              });
+          }
+          emitCommentAdd(detail) {
+              return detail;
+          }
+          emitCommentReply(detail) {
+              return detail;
+          }
+          emitCommentDelete(detail) {
+              return detail;
+          }
+          emitCommentLike(detail) {
+              return detail;
+          }
+          handleNewComment() {
+              if (!this.newCommentText.trim())
+                  return;
+              this.addComment(this.newCommentText);
+              this.newCommentText = '';
+              if (this.newInput) {
+                  this.newInput.value = '';
+              }
+          }
+          handleReply(parentId) {
+              if (!this.replyText.trim())
+                  return;
+              this.addComment(this.replyText, parentId);
+              this.replyText = '';
+              this.replyingTo = null;
+          }
+          handleNewInputChange(e) {
+              this.newCommentText = e.target.value;
+          }
+          handleReplyInputChange(e) {
+              this.replyText = e.target.value;
+          }
+          handleNewKeydown(e) {
+              if (e.key === 'Enter' && (e.ctrlKey || e.metaKey)) {
+                  e.preventDefault();
+                  this.handleNewComment();
+              }
+          }
+          handleReplyKeydown(e, parentId) {
+              if (e.key === 'Enter' && (e.ctrlKey || e.metaKey)) {
+                  e.preventDefault();
+                  this.handleReply(parentId);
+              }
+              if (e.key === 'Escape') {
+                  this.replyingTo = null;
+              }
+          }
+          startReply(commentId) {
+              this.replyingTo = commentId;
+              this.replyText = '';
+          }
+          cancelReply() {
+              this.replyingTo = null;
+              this.replyText = '';
+          }
+          renderComment(comment, depth) {
+              const canReply = this.allowReplies && depth < this.maxDepth;
+              const isOwn = this.currentUser && comment.author === this.currentUser;
+              const isReplying = this.replyingTo === comment.id;
+              const hasLikes = (comment.likes || 0) > 0;
+              return snice.html /*html*/ `
+      <div class="comment" data-id="${comment.id}">
+        <div class="comment__avatar">
+          <if ${comment.avatar}>
+            <img src="${comment.avatar}" alt="${comment.author}" />
+          </if>
+          <if ${!comment.avatar}>
+            ${this.getInitials(comment.author)}
+          </if>
+        </div>
+        <div class="comment__body">
+          <div class="comment__header">
+            <span class="comment__author">${comment.author}</span>
+            <span class="comment__time">${this.formatTimestamp(comment.timestamp)}</span>
+          </div>
+          <p class="comment__text">${comment.text}</p>
+          <div class="comment__actions">
+            <if ${this.allowLikes}>
+              <button class="comment__action ${comment.liked ? 'comment__action--liked' : ''}"
+                      @click=${() => this.likeComment(comment.id)}
+                      aria-label="${comment.liked ? 'Unlike' : 'Like'}">
+                <span>${comment.liked ? '\u2764' : '\u2661'}</span>
+                <if ${hasLikes}>
+                  <span class="comment__like-count">${comment.likes}</span>
+                </if>
+              </button>
+            </if>
+            <if ${canReply}>
+              <button class="comment__action"
+                      @click=${() => this.startReply(comment.id)}
+                      aria-label="Reply">
+                Reply
+              </button>
+            </if>
+            <if ${isOwn}>
+              <button class="comment__action comment__action--delete"
+                      @click=${() => this.deleteComment(comment.id)}
+                      aria-label="Delete comment">
+                Delete
+              </button>
+            </if>
+          </div>
+
+          <if ${isReplying}>
+            <div class="comment__reply-input">
+              <textarea class="comments__input"
+                        placeholder="Write a reply..."
+                        rows="1"
+                        @input=${this.handleReplyInputChange}
+                        @keydown=${(e) => this.handleReplyKeydown(e, comment.id)}></textarea>
+              <button class="comments__submit"
+                      @click=${() => this.handleReply(comment.id)}>
+                Reply
+              </button>
+              <button class="comment__cancel"
+                      @click=${() => this.cancelReply()}>
+                Cancel
+              </button>
+            </div>
+          </if>
+
+          <if ${comment.replies && comment.replies.length > 0}>
+            <div class="comment__replies">
+              ${(comment.replies || []).map(reply => this.renderComment(reply, depth + 1))}
+            </div>
+          </if>
+        </div>
+      </div>
+    `;
+          }
+          renderContent() {
+              const hasComments = this.comments.length > 0;
+              return snice.html /*html*/ `
+      <div class="comments" part="base">
+        <div class="comments__input-area" part="input-area">
+          <textarea class="comments__input comments__new-input"
+                    placeholder="Write a comment..."
+                    rows="2"
+                    @input=${this.handleNewInputChange}
+                    @keydown=${this.handleNewKeydown}></textarea>
+          <button class="comments__submit"
+                  @click=${() => this.handleNewComment()}
+                  aria-label="Post comment">
+            Post
+          </button>
+        </div>
+
+        <if ${hasComments}>
+          <div class="comments__list" part="list">
+            ${this.comments.map(c => this.renderComment(c, 0))}
+          </div>
+        </if>
+        <if ${!hasComments}>
+          <div class="comments__empty">No comments yet. Be the first to comment!</div>
+        </if>
+      </div>
+    `;
+          }
+          componentStyles() {
+              return snice.css `${cssContent}`;
+          }
+      });
+      return _classThis;
+  })();
+
+  exports.SniceComment = SniceComment;
+  exports.SniceComments = SniceComments;
+
+  return exports;
+
+})({}, Snice);
+//# sourceMappingURL=snice-comments.js.map