@lostgradient/cinder 0.6.0 → 0.8.0

package/src/components/review-editor/comment-composer.svelte

@@ -0,0 +1,271 @@
+<script lang="ts" module>
+export {};
+</script>
+
+<script lang="ts">
+/**
+ * CommentComposer is a markdown textarea for creating comments in the ReviewEditor.
+ *
+ * Features:
+ * - Keyboard shortcuts: Cmd/Ctrl+Enter to submit, Escape to cancel
+ * - Auto-expand to fit content
+ * - Blocks whitespace-only submit
+ * - Loading and error states
+ * - Accessible with proper ARIA attributes
+ *
+ * @example
+ * ```svelte
+ * <CommentComposer
+ *   id="comment-1"
+ *   bind:value={comment}
+ *   onsubmit={(body) => createComment(body)}
+ *   oncancel={() => closeComposer()}
+ * />
+ * ```
+ */
+import { classNames } from '../../utilities/class-names.ts';
+import Button from '../button/button.svelte';
+let { id, value = $bindable(''), placeholder = 'Write a comment...', disabled = false, loading = false, error, minRows = 3, maxRows, autoExpand = true, class: className, onsubmit, oncancel, actions, ...rest } = $props();
+let textareaElement = $state(null);
+/**
+ * Detect if user is on macOS for keyboard shortcut hints.
+ */
+const isMac = $derived.by(() => {
+    if (typeof navigator === 'undefined')
+        return false;
+    if ('userAgentData' in navigator && navigator.userAgentData) {
+        return navigator.userAgentData.platform === 'macOS';
+    }
+    return /Mac|iPhone|iPad|iPod/.test(navigator.userAgent);
+});
+const errorId = $derived(`${id}-error`);
+const canSubmit = $derived(value.trim().length > 0 && !disabled && !loading);
+/**
+ * Calculate dynamic row count based on content.
+ */
+const dynamicRows = $derived.by(() => {
+    if (!autoExpand)
+        return minRows;
+    // Count newlines in content
+    const lineCount = (value.match(/\n/g) || []).length + 1;
+    // Clamp between minRows and maxRows
+    let rows = Math.max(minRows, lineCount);
+    if (maxRows !== undefined) {
+        rows = Math.min(rows, maxRows);
+    }
+    return rows;
+});
+function handleSubmit(event) {
+    event.preventDefault();
+    if (!canSubmit)
+        return;
+    onsubmit?.(value.trim());
+    // Clear the value after submit
+    value = '';
+    // Keep focus on textarea after submit
+    textareaElement?.focus();
+}
+function handleKeyDown(event) {
+    // Cmd/Ctrl + Enter to submit
+    if (event.key === 'Enter' && (event.metaKey || event.ctrlKey)) {
+        event.preventDefault();
+        if (canSubmit) {
+            onsubmit?.(value.trim());
+            value = '';
+            textareaElement?.focus();
+        }
+        return;
+    }
+    // Escape to cancel
+    if (event.key === 'Escape' && oncancel) {
+        event.preventDefault();
+        oncancel();
+    }
+}
+/** Focus the textarea */
+export function focus() {
+    textareaElement?.focus();
+}
+/** Select all text in the textarea */
+export function selectAll() {
+    textareaElement?.select();
+}
+/** Clear the input */
+export function clear() {
+    value = '';
+    textareaElement?.focus();
+}
+</script>
+
+<form class={classNames('comment-composer', className)} onsubmit={handleSubmit}>
+  <label for={id} class="sr-only">Comment</label>
+
+  <div class="comment-composer-textarea-container">
+    <textarea
+      bind:this={textareaElement}
+      {id}
+      class="comment-composer-textarea"
+      data-has-error={!!error}
+      {placeholder}
+      disabled={disabled || loading}
+      bind:value
+      onkeydown={handleKeyDown}
+      rows={dynamicRows}
+      aria-invalid={error ? 'true' : undefined}
+      aria-describedby={error ? errorId : undefined}
+      aria-busy={loading ? 'true' : undefined}
+      {...rest}
+    ></textarea>
+
+    <div class="comment-composer-inline-submit">
+      <Button type="submit" variant="primary" size="xs" disabled={!canSubmit} {loading}>
+        {loading ? 'Sending...' : 'Comment'}
+      </Button>
+    </div>
+  </div>
+
+  {#if error}
+    <p id={errorId} class="comment-composer-error" role="alert">
+      {error}
+    </p>
+  {/if}
+
+  <div class="comment-composer-footer">
+    <span class="comment-composer-hint">
+      <kbd>{isMac ? '⌘' : 'Ctrl'}</kbd><kbd>↵</kbd> to submit
+    </span>
+
+    <div class="comment-composer-actions">
+      {#if actions}
+        {@render actions()}
+      {:else if oncancel}
+        <Button variant="ghost" size="xs" onclick={oncancel} disabled={loading}>Cancel</Button>
+      {/if}
+    </div>
+  </div>
+</form>
+
+<style>
+  .comment-composer {
+    display: flex;
+    flex-direction: column;
+    gap: var(--cinder-space-2);
+  }
+
+  .comment-composer-textarea-container {
+    position: relative;
+  }
+
+  .comment-composer-inline-submit {
+    position: absolute;
+    right: var(--cinder-space-2);
+    bottom: var(--cinder-space-2);
+    opacity: 0;
+    pointer-events: none;
+    transition: opacity var(--cinder-duration-fast) var(--cinder-ease-standard);
+  }
+
+  .comment-composer-textarea-container:focus-within .comment-composer-inline-submit {
+    opacity: 1;
+    pointer-events: auto;
+  }
+
+  .comment-composer-textarea {
+    width: 100%;
+    min-height: 4.5rem;
+    padding: var(--cinder-space-2);
+    /* Extra bottom padding to accommodate inline submit button */
+    padding-bottom: calc(var(--cinder-space-2) + 1.5rem + var(--cinder-space-2));
+    font-family: inherit;
+    font-size: var(--cinder-text-sm);
+    line-height: var(--cinder-leading-normal);
+    color: var(--cinder-text);
+    background: var(--cinder-surface);
+    border: 1px solid var(--cinder-border);
+    border-radius: var(--cinder-radius-md);
+    resize: vertical;
+    transition: border-color var(--cinder-duration-fast) var(--cinder-ease-standard);
+  }
+
+  .comment-composer-textarea::placeholder {
+    color: var(--cinder-text-subtle);
+  }
+
+  .comment-composer-textarea:focus {
+    border-color: var(--cinder-accent);
+    outline: var(--cinder-ring-width) solid transparent;
+    outline-offset: var(--cinder-ring-offset);
+    box-shadow: var(--_cinder-focus-ring-shadow);
+  }
+
+  .comment-composer-textarea:disabled {
+    cursor: not-allowed;
+    opacity: 0.5;
+    background: var(--cinder-surface-inset);
+  }
+
+  .comment-composer-textarea[data-has-error='true'] {
+    border-color: var(--cinder-danger);
+  }
+
+  @media (forced-colors: active) {
+    .comment-composer-textarea:focus {
+      outline: var(--cinder-ring-width) solid Highlight;
+      outline-offset: 1px;
+    }
+  }
+
+  .comment-composer-error {
+    margin: 0;
+    font-size: var(--cinder-text-xs);
+    color: var(--cinder-danger);
+  }
+
+  .comment-composer-footer {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: var(--cinder-space-2);
+  }
+
+  .comment-composer-hint {
+    display: flex;
+    align-items: center;
+    gap: var(--cinder-space-0-5);
+    font-size: var(--cinder-text-xs);
+    color: var(--cinder-text-subtle);
+  }
+
+  .comment-composer-hint kbd {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    min-width: 1.25rem;
+    height: 1.25rem;
+    padding: 0 var(--cinder-space-1);
+    font-family: inherit;
+    font-size: var(--cinder-text-xs);
+    background: var(--cinder-surface-raised);
+    border: 1px solid var(--cinder-border);
+    border-radius: var(--cinder-radius-sm);
+  }
+
+  .comment-composer-actions {
+    display: flex;
+    align-items: center;
+    gap: var(--cinder-space-2);
+  }
+
+  /* Screen reader only utility */
+  .sr-only {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    white-space: nowrap;
+    border: 0;
+  }
+</style>

package/src/components/review-editor/comment-list.svelte

@@ -0,0 +1,311 @@
+<script lang="ts" module>
+export {};
+</script>
+
+<script lang="ts">
+import { classNames } from '../../utilities/class-names.ts';
+import { formatRelativeTime } from '../../utilities/format-date.ts';
+import Button from '../button/button.svelte';
+import Pencil from 'lucide-svelte/icons/pencil';
+import Trash2 from 'lucide-svelte/icons/trash-2';
+let { comments, currentUserId, mode = 'edit', class: className, onupdate, ondelete, } = $props();
+// Filter out soft-deleted comments
+const visibleComments = $derived(comments.filter((c) => !('deletedAt' in c) || !c.deletedAt));
+// Track which comment is being edited
+let editingCommentId = $state(null);
+let editingBody = $state('');
+function startEdit(comment) {
+    editingCommentId = comment.id;
+    editingBody = comment.body;
+}
+function cancelEdit() {
+    editingCommentId = null;
+    editingBody = '';
+}
+function saveEdit(commentId) {
+    if (editingBody.trim()) {
+        onupdate?.(commentId, editingBody.trim());
+    }
+    cancelEdit();
+}
+function handleEditKeyDown(event, commentId) {
+    if (event.key === 'Escape') {
+        cancelEdit();
+    }
+    else if (event.key === 'Enter' && (event.metaKey || event.ctrlKey)) {
+        event.preventDefault();
+        saveEdit(commentId);
+    }
+}
+function canEditComment(comment) {
+    return mode !== 'readonly' && comment.authorId === currentUserId;
+}
+function canDeleteComment(comment) {
+    return mode !== 'readonly' && comment.authorId === currentUserId;
+}
+</script>
+
+<div class={classNames('comment-list', className)}>
+  {#each visibleComments as comment (comment.id)}
+    <article class="comment" data-comment-id={comment.id}>
+      <header class="comment-header">
+        <div class="comment-author">
+          <div class="comment-avatar" aria-hidden="true">
+            {comment.authorId.charAt(0).toUpperCase()}
+          </div>
+          <span class="comment-author-name">{comment.authorId}</span>
+        </div>
+        <div class="comment-meta">
+          <time class="comment-time" datetime={comment.createdAt} title={comment.createdAt}>
+            {formatRelativeTime(comment.createdAt)}
+          </time>
+          {#if 'editedAt' in comment && comment.editedAt}
+            <span class="comment-edited" title={`Edited ${comment.editedAt}`}>(edited)</span>
+          {/if}
+        </div>
+      </header>
+
+      {#if editingCommentId === comment.id}
+        <div class="comment-edit">
+          <label for="{comment.id}-edit" class="sr-only">Edit comment</label>
+          <textarea
+            id="{comment.id}-edit"
+            class="comment-edit-textarea"
+            bind:value={editingBody}
+            onkeydown={(e) => handleEditKeyDown(e, comment.id)}
+            rows={3}
+          ></textarea>
+          <div class="comment-edit-actions">
+            <Button variant="ghost" size="xs" onclick={cancelEdit}>Cancel</Button>
+            <Button
+              variant="primary"
+              size="xs"
+              onclick={() => saveEdit(comment.id)}
+              disabled={!editingBody.trim()}
+            >
+              Save
+            </Button>
+          </div>
+        </div>
+      {:else}
+        <div class="comment-body">
+          {comment.body}
+        </div>
+      {/if}
+
+      {#if mode !== 'readonly' && editingCommentId !== comment.id}
+        <div class="comment-actions">
+          {#if canEditComment(comment)}
+            <button
+              type="button"
+              class="comment-action"
+              onclick={() => startEdit(comment)}
+              aria-label="Edit comment"
+              title="Edit comment"
+            >
+              <Pencil class="cinder-icon-sm" />
+            </button>
+          {/if}
+          {#if canDeleteComment(comment)}
+            <button
+              type="button"
+              class="comment-action comment-action-danger"
+              onclick={() => ondelete?.(comment.id)}
+              aria-label="Delete comment"
+              title="Delete comment"
+            >
+              <Trash2 class="cinder-icon-sm" />
+            </button>
+          {/if}
+        </div>
+      {/if}
+    </article>
+  {/each}
+
+  {#if visibleComments.length === 0}
+    <p class="comment-list-empty">No comments yet.</p>
+  {/if}
+</div>
+
+<style>
+  .comment-list {
+    display: flex;
+    flex-direction: column;
+    gap: var(--cinder-space-4);
+  }
+
+  .comment {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    gap: var(--cinder-space-2);
+    padding: var(--cinder-space-3);
+    background: var(--cinder-surface);
+    border: 1px solid var(--cinder-border-muted);
+    border-radius: var(--cinder-radius-md);
+  }
+
+  .comment:hover .comment-actions {
+    opacity: 1;
+  }
+
+  .comment-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: var(--cinder-space-2);
+  }
+
+  .comment-author {
+    display: flex;
+    align-items: center;
+    gap: var(--cinder-space-2);
+  }
+
+  .comment-avatar {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 1.5rem;
+    height: 1.5rem;
+    font-size: var(--cinder-text-xs);
+    font-weight: var(--cinder-font-medium);
+    color: var(--cinder-accent-contrast);
+    background: var(--cinder-accent);
+    border-radius: var(--cinder-radius-full);
+  }
+
+  .comment-author-name {
+    font-size: var(--cinder-text-sm);
+    font-weight: var(--cinder-font-medium);
+    color: var(--cinder-text);
+  }
+
+  .comment-meta {
+    display: flex;
+    align-items: center;
+    gap: var(--cinder-space-1);
+  }
+
+  .comment-time {
+    font-size: var(--cinder-text-xs);
+    color: var(--cinder-text-subtle);
+  }
+
+  .comment-edited {
+    font-size: var(--cinder-text-xs);
+    color: var(--cinder-text-subtle);
+    font-style: italic;
+  }
+
+  .comment-body {
+    font-size: var(--cinder-text-sm);
+    line-height: var(--cinder-leading-relaxed);
+    color: var(--cinder-text);
+    white-space: pre-wrap;
+    word-break: break-word;
+  }
+
+  .comment-edit {
+    display: flex;
+    flex-direction: column;
+    gap: var(--cinder-space-2);
+  }
+
+  .comment-edit-textarea {
+    width: 100%;
+    min-height: 4rem;
+    padding: var(--cinder-space-2);
+    font-family: inherit;
+    font-size: var(--cinder-text-sm);
+    line-height: var(--cinder-leading-normal);
+    color: var(--cinder-text);
+    background: var(--cinder-surface);
+    border: 1px solid var(--cinder-border);
+    border-radius: var(--cinder-radius-md);
+    resize: vertical;
+  }
+
+  .comment-edit-textarea:focus {
+    border-color: var(--cinder-accent);
+    outline: var(--cinder-ring-width) solid transparent;
+    outline-offset: var(--cinder-ring-offset);
+    box-shadow: var(--_cinder-focus-ring-shadow);
+  }
+
+  @media (forced-colors: active) {
+    .comment-edit-textarea:focus {
+      outline: var(--cinder-ring-width) solid Highlight;
+      outline-offset: 1px;
+    }
+  }
+
+  .comment-edit-actions {
+    display: flex;
+    justify-content: flex-end;
+    gap: var(--cinder-space-2);
+  }
+
+  .comment-actions {
+    position: absolute;
+    top: var(--cinder-space-2);
+    right: var(--cinder-space-2);
+    display: flex;
+    gap: var(--cinder-space-1);
+    opacity: 0;
+    transition: opacity var(--cinder-duration-fast) var(--cinder-ease-standard);
+  }
+
+  .comment:focus-within .comment-actions {
+    opacity: 1;
+  }
+
+  .comment-action {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 1.5rem;
+    height: 1.5rem;
+    color: var(--cinder-text-muted);
+    background: var(--cinder-surface-raised);
+    border: 1px solid var(--cinder-border);
+    border-radius: var(--cinder-radius-sm);
+    cursor: pointer;
+    transition:
+      background-color var(--cinder-duration-fast) var(--cinder-ease-standard),
+      color var(--cinder-duration-fast) var(--cinder-ease-standard);
+  }
+
+  @media (hover: hover) {
+    .comment-action:hover {
+      color: var(--cinder-text);
+      background: var(--cinder-surface-hover);
+    }
+
+    .comment-action-danger:hover {
+      color: var(--cinder-color-danger-fg);
+      background: var(--cinder-color-danger-bg);
+      border-color: var(--cinder-color-danger-border);
+    }
+  }
+
+  .comment-list-empty {
+    font-size: var(--cinder-text-sm);
+    color: var(--cinder-text-subtle);
+    text-align: center;
+    padding: var(--cinder-space-4);
+  }
+
+  /* Screen reader only utility */
+  .sr-only {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    white-space: nowrap;
+    border: 0;
+  }
+</style>