@lostgradient/cinder 0.6.0 → 0.7.0

package/src/components/diff-viewer/diff-front-matter.svelte

@@ -0,0 +1,52 @@
+<script lang="ts" module>
+export {};
+</script>
+
+<script lang="ts">
+import { classNames } from '../../utilities/class-names.ts';
+import FrontMatterHeader from './front-matter-header.svelte';
+import DiffLine from './diff-line.svelte';
+let { id = 'front-matter', diffs, viewMode, expanded = $bindable(true), badgeLabel = null, badgeVariant = 'warning', wordChangeRenderer, class: className, ...rest } = $props();
+/**
+ * Whether there are any changes in the front matter.
+ * Derived from the diffs - if any line is not 'same', there are changes.
+ */
+const hasChanges = $derived(diffs.some((d) => d.type !== 'same'));
+const toggleId = $derived(`${id}-toggle`);
+const contentId = $derived(`${id}-content`);
+</script>
+
+<div class={classNames('front-matter-section', className)} data-has-changes={hasChanges} {...rest}>
+  <FrontMatterHeader
+    id={toggleId}
+    controlsId={contentId}
+    bind:expanded
+    variant="inline"
+    {badgeLabel}
+    {badgeVariant}
+  />
+
+  {#if expanded}
+    <div id={contentId} class="front-matter-content">
+      {#each diffs as lineDiff, idx (`fm-${idx}:${lineDiff.type}:${lineDiff.type === 'modified' ? lineDiff.newText : lineDiff.text}`)}
+        <DiffLine diff={lineDiff} {viewMode} {wordChangeRenderer} />
+      {/each}
+    </div>
+  {/if}
+</div>
+
+<style>
+  .front-matter-section {
+    border-bottom: 1px solid var(--cinder-border);
+    margin-bottom: var(--cinder-space-2);
+  }
+
+  .front-matter-section[data-has-changes='true'] {
+    border-inline-start: 3px solid var(--cinder-warning);
+  }
+
+  .front-matter-content {
+    border-top: 1px solid var(--cinder-border);
+    background: color-mix(in oklch, var(--cinder-surface-inset), transparent 50%);
+  }
+</style>

package/src/components/diff-viewer/diff-line.svelte

@@ -0,0 +1,340 @@
+<script lang="ts" module>
+export {};
+</script>
+
+<script lang="ts">
+import { classNames } from '../../utilities/class-names.ts';
+let { diff, viewMode, selected = false, onselect, wordChangeRenderer, class: className, } = $props();
+/**
+ * Whether this line should be visible based on view mode.
+ * - Unified: show all line types
+ * - Final: hide 'removed' lines (show current state)
+ * - Original: hide 'added' lines (show baseline)
+ */
+const isVisible = $derived.by(() => {
+    if (diff.type === 'same')
+        return true;
+    if (viewMode === 'unified')
+        return true;
+    if (viewMode === 'final')
+        return diff.type !== 'removed';
+    if (viewMode === 'original')
+        return diff.type !== 'added';
+    return true;
+});
+/**
+ * Whether this line is interactive (clickable for selection).
+ * Same lines are not selectable.
+ */
+const isInteractive = $derived(diff.type !== 'same' && onselect !== undefined);
+const accessibleLineLabel = $derived.by(() => {
+    const text = diff.type === 'modified'
+        ? viewMode === 'original'
+            ? diff.oldText
+            : viewMode === 'final'
+                ? diff.newText
+                : `${diff.oldText} changed to ${diff.newText}`
+        : diff.text;
+    const typeLabel = diff.type === 'added'
+        ? 'Added line'
+        : diff.type === 'removed'
+            ? 'Removed line'
+            : 'Modified line';
+    return `${typeLabel}: ${text || 'blank line'}`;
+});
+</script>
+
+{#if isVisible}
+  {#if diff.type === 'same'}
+    <!-- Same line: static div, not interactive -->
+    <div class={classNames('diff-line', className)}>
+      <span class="diff-gutter"></span>
+      <span class="diff-text">{diff.text || '\u00A0'}</span>
+    </div>
+  {:else if diff.type === 'added'}
+    <!-- Added line -->
+    {#if isInteractive}
+      <button
+        class={classNames('diff-line diff-line-added', className)}
+        data-selected={selected}
+        aria-label={accessibleLineLabel}
+        onclick={onselect}
+        type="button"
+      >
+        <span class="diff-gutter">+</span>
+        <span class="diff-text">{diff.text || '\u00A0'}</span>
+      </button>
+    {:else}
+      <div class={classNames('diff-line diff-line-added', className)} data-selected={selected}>
+        <span class="diff-gutter">+</span>
+        <span class="diff-text">{diff.text || '\u00A0'}</span>
+      </div>
+    {/if}
+  {:else if diff.type === 'removed'}
+    <!-- Removed line: strikethrough only in unified view, plain text in original view -->
+    {@const showStrikethrough = viewMode === 'unified'}
+    {#if isInteractive}
+      <button
+        class={classNames(
+          'diff-line',
+          showStrikethrough ? 'diff-line-removed' : 'diff-line-removed-original',
+          className,
+        )}
+        data-selected={selected}
+        aria-label={accessibleLineLabel}
+        onclick={onselect}
+        type="button"
+      >
+        <span class="diff-gutter">{showStrikethrough ? '-' : ''}</span>
+        <span class="diff-text">
+          {#if showStrikethrough}
+            <del>{diff.text || '\u00A0'}</del>
+          {:else}
+            {diff.text || '\u00A0'}
+          {/if}
+        </span>
+      </button>
+    {:else}
+      <div
+        class={classNames(
+          'diff-line',
+          showStrikethrough ? 'diff-line-removed' : 'diff-line-removed-original',
+          className,
+        )}
+        data-selected={selected}
+      >
+        <span class="diff-gutter">{showStrikethrough ? '-' : ''}</span>
+        <span class="diff-text">
+          {#if showStrikethrough}
+            <del>{diff.text || '\u00A0'}</del>
+          {:else}
+            {diff.text || '\u00A0'}
+          {/if}
+        </span>
+      </div>
+    {/if}
+  {:else if diff.type === 'modified'}
+    <!-- Modified line: rendering depends on view mode -->
+    {@const lineClass =
+      viewMode === 'unified'
+        ? 'diff-line-modified'
+        : viewMode === 'final'
+          ? 'diff-line-modified-final'
+          : 'diff-line-modified-original'}
+    {@const displayText =
+      viewMode === 'unified' ? null : viewMode === 'final' ? diff.newText : diff.oldText}
+
+    {#if isInteractive}
+      <button
+        class={classNames('diff-line', lineClass, className)}
+        data-selected={selected}
+        aria-label={accessibleLineLabel}
+        onclick={onselect}
+        type="button"
+      >
+        <span class="diff-gutter">~</span>
+        <span class="diff-text">
+          {#if viewMode === 'unified'}
+            <!-- Unified: show word-level changes -->
+            {#if wordChangeRenderer}
+              {@render wordChangeRenderer({ changes: diff.wordChanges })}
+            {:else}
+              <span class="word-changes">
+                {#each diff.wordChanges as wordChange, widx (`${widx}:${wordChange.type}:${wordChange.text}`)}
+                  {#if wordChange.type === 'same'}
+                    <span>{wordChange.text}</span>
+                  {:else if wordChange.type === 'removed'}
+                    <del class="word-removed">{wordChange.text}</del>
+                  {:else if wordChange.type === 'added'}
+                    <ins class="word-added">{wordChange.text}</ins>
+                  {/if}
+                {/each}
+              </span>
+            {/if}
+          {:else}
+            <!-- Final/Original: show single text -->
+            {displayText || '\u00A0'}
+          {/if}
+        </span>
+      </button>
+    {:else}
+      <div class={classNames('diff-line', lineClass, className)} data-selected={selected}>
+        <span class="diff-gutter">~</span>
+        <span class="diff-text">
+          {#if viewMode === 'unified'}
+            {#if wordChangeRenderer}
+              {@render wordChangeRenderer({ changes: diff.wordChanges })}
+            {:else}
+              <span class="word-changes">
+                {#each diff.wordChanges as wordChange, widx (`${widx}:${wordChange.type}:${wordChange.text}`)}
+                  {#if wordChange.type === 'same'}
+                    <span>{wordChange.text}</span>
+                  {:else if wordChange.type === 'removed'}
+                    <del class="word-removed">{wordChange.text}</del>
+                  {:else if wordChange.type === 'added'}
+                    <ins class="word-added">{wordChange.text}</ins>
+                  {/if}
+                {/each}
+              </span>
+            {/if}
+          {:else}
+            {displayText || '\u00A0'}
+          {/if}
+        </span>
+      </div>
+    {/if}
+  {/if}
+{/if}
+
+<style>
+  .diff-line {
+    display: flex;
+    width: 100%;
+    min-height: 1.5em;
+  }
+
+  button.diff-line {
+    all: unset;
+    display: flex;
+    width: 100%;
+    min-height: 1.5em;
+    cursor: pointer;
+    box-sizing: border-box;
+  }
+
+  /* Each diff line is a full-bleed row inside the scrollable viewer; an outset
+     ring is clipped at the row edges, so paint an INSET ring (Strategy B-inset). */
+  button.diff-line:focus-visible {
+    outline: var(--cinder-ring-width) solid transparent;
+    box-shadow: inset 0 0 0 var(--cinder-ring-width)
+      var(--_cinder-diff-line-ring, var(--cinder-ring-color));
+  }
+
+  @media (forced-colors: active) {
+    button.diff-line:focus-visible {
+      outline: var(--cinder-ring-width) solid ButtonText;
+      outline-offset: calc(var(--cinder-ring-width) * -1);
+    }
+  }
+
+  .diff-line[data-selected='true'] {
+    outline: var(--cinder-ring-width) solid var(--cinder-accent);
+    outline-offset: calc(var(--cinder-ring-width) * -1);
+    background: color-mix(in oklch, var(--cinder-accent), transparent 90%);
+    z-index: 1;
+  }
+
+  .diff-gutter {
+    flex-shrink: 0;
+    width: 2rem;
+    padding: var(--cinder-space-0-5) var(--cinder-space-2);
+    text-align: center;
+    color: var(--cinder-text-muted);
+    background: var(--cinder-surface-inset);
+    border-inline-end: 1px solid var(--cinder-border);
+    user-select: none;
+    font-weight: var(--cinder-font-medium);
+  }
+
+  .diff-text {
+    flex: 1;
+    padding: var(--cinder-space-0-5) var(--cinder-space-3);
+    white-space: pre-wrap;
+    word-wrap: break-word;
+  }
+
+  /* Added lines (DEP-47: underline provides non-color indicator for a11y) */
+  .diff-line-added .diff-text {
+    background: var(--cinder-color-success-bg);
+    text-decoration: underline;
+    text-decoration-color: var(--cinder-success);
+    text-decoration-thickness: 2px;
+    text-underline-offset: 2px;
+  }
+
+  .diff-line-added .diff-gutter {
+    background: var(--cinder-color-success-border);
+    color: var(--cinder-color-success-fg);
+  }
+
+  /* Removed lines */
+  .diff-line-removed .diff-text {
+    background: var(--cinder-color-danger-bg);
+  }
+
+  .diff-line-removed .diff-gutter {
+    background: var(--cinder-color-danger-border);
+    color: var(--cinder-color-danger-fg);
+  }
+
+  .diff-line-removed del {
+    text-decoration: line-through;
+    opacity: 0.8;
+  }
+
+  /* Removed lines in original view: render as plain text (baseline content) */
+  .diff-line-removed-original .diff-text {
+    background: transparent;
+  }
+
+  .diff-line-removed-original .diff-gutter {
+    background: var(--cinder-surface-inset);
+    color: var(--cinder-text-muted);
+  }
+
+  /* Modified lines (unified view) */
+  .diff-line-modified .diff-text {
+    background: color-mix(in oklch, var(--cinder-color-info-bg), transparent 85%);
+  }
+
+  .diff-line-modified .diff-gutter {
+    background: color-mix(in oklch, var(--cinder-color-info-bg), transparent 60%);
+    color: var(--cinder-color-info-fg);
+  }
+
+  .word-changes {
+    display: inline;
+  }
+
+  .word-removed {
+    background: var(--cinder-color-danger-bg);
+    color: var(--cinder-color-danger-fg);
+    text-decoration: line-through;
+    border-radius: 2px;
+    padding: 0 2px;
+    box-shadow: inset 0 0 0 1px var(--cinder-color-danger-border);
+  }
+
+  /* DEP-47: underline provides non-color indicator for a11y */
+  .word-added {
+    background: var(--cinder-color-success-bg);
+    color: var(--cinder-color-success-fg);
+    text-decoration: underline;
+    text-decoration-color: var(--cinder-success);
+    text-decoration-thickness: 2px;
+    text-underline-offset: 2px;
+    border-radius: 2px;
+    padding: 0 2px;
+    box-shadow: inset 0 0 0 1px var(--cinder-color-success-border);
+  }
+
+  /* Modified in final view (highlight subtly) */
+  .diff-line-modified-final .diff-text {
+    background: color-mix(in oklch, var(--cinder-color-info-bg), transparent 85%);
+  }
+
+  .diff-line-modified-final .diff-gutter {
+    background: color-mix(in oklch, var(--cinder-color-info-bg), transparent 65%);
+    color: var(--cinder-color-info-fg);
+  }
+
+  /* Modified in original view (highlight subtly) */
+  .diff-line-modified-original .diff-text {
+    background: color-mix(in oklch, var(--cinder-color-info-bg), transparent 85%);
+  }
+
+  .diff-line-modified-original .diff-gutter {
+    background: color-mix(in oklch, var(--cinder-color-info-bg), transparent 65%);
+    color: var(--cinder-color-info-fg);
+  }
+</style>

package/src/components/diff-viewer/diff-summary-bar.svelte

@@ -0,0 +1,106 @@
+<script lang="ts" module>
+export {};
+</script>
+
+<script lang="ts">
+/**
+ * Compact summary bar showing diff statistics with expand/collapse toggle.
+ *
+ * Displays:
+ * - Total change count (insertions + deletions + replacements)
+ * - Word delta: "+N" for added, "-N" for removed
+ * - Expand/collapse button to show/hide the full DiffViewer
+ *
+ * @example
+ * ```svelte
+ * <DiffSummaryBar {stats} bind:expanded />
+ * ```
+ */
+import { classNames } from '../../utilities/class-names.ts';
+import Badge from '../badge/badge.svelte';
+import Button from '../button/button.svelte';
+import ChevronDown from 'lucide-svelte/icons/chevron-down';
+import ChevronUp from 'lucide-svelte/icons/chevron-up';
+import FileText from 'lucide-svelte/icons/file-text';
+let { stats, expanded = $bindable(false), class: className, ...rest } = $props();
+// Total change count (lines added + removed + modified)
+const changeCount = $derived(stats.added + stats.removed + stats.modified);
+// Singular/plural handling
+const changeLabel = $derived(changeCount === 1 ? 'line' : 'lines');
+</script>
+
+<div class={classNames('diff-summary-bar', className)} {...rest}>
+  <div class="summary-content">
+    <FileText class="cinder-icon-sm text-muted" aria-hidden="true" />
+    <Badge variant="neutral">{changeCount} {changeLabel}</Badge>
+    <span class="stats-text">
+      {#if stats.added > 0}
+        <span class="stat-added">+{stats.added}</span>
+      {/if}
+      {#if stats.removed > 0}
+        <span class="stat-removed">-{stats.removed}</span>
+      {/if}
+      {#if stats.modified > 0}
+        <span class="stat-modified">~{stats.modified}</span>
+      {/if}
+    </span>
+  </div>
+  <Button variant="ghost" size="sm" onclick={() => (expanded = !expanded)}>
+    {expanded ? 'Hide' : 'Review'}
+    {#if expanded}
+      <ChevronUp class="cinder-icon-sm" />
+    {:else}
+      <ChevronDown class="cinder-icon-sm" />
+    {/if}
+  </Button>
+</div>
+
+<style>
+  .diff-summary-bar {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: var(--cinder-space-4);
+    padding: var(--cinder-space-2) var(--cinder-space-4);
+    background: var(--cinder-surface-raised);
+    border-top: 1px solid var(--cinder-border);
+    border-radius: 0 0 var(--cinder-radius-md) var(--cinder-radius-md);
+  }
+
+  .summary-content {
+    display: flex;
+    align-items: center;
+    gap: var(--cinder-space-2);
+  }
+
+  .stats-text {
+    display: flex;
+    align-items: center;
+    gap: var(--cinder-space-1);
+    font-size: var(--cinder-text-sm);
+    color: var(--cinder-text-muted);
+  }
+
+  .stat-added {
+    color: var(--cinder-success);
+    font-weight: var(--cinder-font-medium);
+  }
+
+  .stat-removed {
+    color: var(--cinder-danger);
+    font-weight: var(--cinder-font-medium);
+  }
+
+  .stat-modified {
+    color: var(--cinder-warning);
+    font-weight: var(--cinder-font-medium);
+  }
+
+  /* Responsive: stack on very narrow screens */
+  @media (max-width: 360px) {
+    .diff-summary-bar {
+      flex-wrap: wrap;
+      gap: var(--cinder-space-2);
+    }
+  }
+</style>

package/src/components/diff-viewer/diff-toolbar.svelte

@@ -0,0 +1,182 @@
+<script lang="ts" module>
+export {};
+</script>
+
+<script lang="ts">
+import { classNames } from '../../utilities/class-names.ts';
+import Badge from '../badge/badge.svelte';
+import Button from '../button/button.svelte';
+import Kbd from '../kbd/kbd.svelte';
+import Segment from '../segment/segment.svelte';
+import SegmentedControl from '../segmented-control/segmented-control.svelte';
+import Spinner from '../spinner/spinner.svelte';
+import ChevronLeft from 'lucide-svelte/icons/chevron-left';
+import ChevronRight from 'lucide-svelte/icons/chevron-right';
+import RefreshCw from 'lucide-svelte/icons/refresh-cw';
+import RotateCcw from 'lucide-svelte/icons/rotate-ccw';
+let { viewMode = $bindable('unified'), stats, changeCount, currentChangeIndex, hasChanges, readonly = false, diffState, onjumpnext, onjumpprevious, onrevertall, ontriggercompute, actions, class: className, ...rest } = $props();
+// Default diffState values if not provided
+const tier = $derived(diffState?.tier ?? 'realtime');
+const isStale = $derived(diffState?.isStale ?? false);
+const isComputing = $derived(diffState?.isComputing ?? false);
+</script>
+
+<div class={classNames('diff-toolbar', className)} {...rest}>
+  <div class="toolbar-left">
+    <SegmentedControl
+      id="diff-view-mode"
+      selectionMode="single"
+      size="sm"
+      label="View mode"
+      hideLabel
+      bind:value={viewMode}
+    >
+      <Segment value="unified">Unified</Segment>
+      <Segment value="final">Final</Segment>
+      <Segment value="original">Original</Segment>
+    </SegmentedControl>
+    <div class="stats">
+      {#if stats.added > 0}
+        <Badge variant="success" size="xs" class="stat-badge">+{stats.added}</Badge>
+      {/if}
+      {#if stats.removed > 0}
+        <Badge variant="danger" size="xs" class="stat-badge">-{stats.removed}</Badge>
+      {/if}
+      {#if stats.modified > 0}
+        <Badge variant="accent" size="xs" class="stat-badge">~{stats.modified}</Badge>
+      {/if}
+      {#if stats.added === 0 && stats.removed === 0 && stats.modified === 0}
+        <span class="no-changes">No changes</span>
+      {/if}
+      <!-- Stale/Computing indicators (DEP-47) -->
+      {#if isStale}
+        <Badge variant="warning" size="xs" class="stat-badge">Outdated</Badge>
+      {/if}
+      {#if isComputing}
+        <Spinner size="sm" />
+      {/if}
+    </div>
+  </div>
+
+  <div class="toolbar-right">
+    <!-- Custom toolbar actions (injected by parent) -->
+    {#if actions}
+      {@render actions()}
+    {/if}
+
+    <!-- Revert All button -->
+    {#if hasChanges && !readonly && onrevertall}
+      <Button variant="secondary" size="xs" onclick={onrevertall}>
+        <RotateCcw class="cinder-icon-sm" />
+        Revert All
+      </Button>
+    {/if}
+
+    <!-- Size-based gating controls (DEP-47) -->
+    {#if tier === 'manual' && ontriggercompute}
+      <Button variant="secondary" size="xs" onclick={ontriggercompute} disabled={isComputing}>
+        <RefreshCw class="cinder-icon-sm" />
+        Compute Diff
+      </Button>
+    {/if}
+
+    {#if hasChanges}
+      {#if changeCount > 0}
+        <div class="navigation">
+          <Button variant="ghost" size="xs" onclick={onjumpprevious} aria-label="Previous change">
+            <ChevronLeft class="cinder-icon-sm" />
+          </Button>
+          <span class="change-counter">
+            {currentChangeIndex >= 0 ? currentChangeIndex + 1 : '-'} / {changeCount}
+          </span>
+          <Button variant="ghost" size="xs" onclick={onjumpnext} aria-label="Next change">
+            <ChevronRight class="cinder-icon-sm" />
+          </Button>
+        </div>
+        <div class="shortcuts">
+          <Kbd label="[" />
+          <Kbd label="]" />
+        </div>
+      {:else}
+        <!-- Only front matter changes, no body navigation available -->
+        <span class="front-matter-only-hint">Front matter only</span>
+      {/if}
+    {:else}
+      <Badge variant="success">No changes</Badge>
+    {/if}
+  </div>
+</div>
+
+<style>
+  .diff-toolbar {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    justify-content: space-between;
+    gap: var(--cinder-space-2);
+    padding: var(--cinder-space-1-5) var(--cinder-space-3);
+    border-bottom: 1px solid var(--cinder-border);
+    background: var(--cinder-surface);
+  }
+
+  .toolbar-left {
+    display: flex;
+    align-items: center;
+    gap: var(--cinder-space-3);
+  }
+
+  .stats {
+    display: flex;
+    align-items: center;
+    gap: var(--cinder-space-1);
+  }
+
+  :global(.stat-badge) {
+    font-family: var(--cinder-font-mono);
+    height: 1.25rem;
+    min-width: 1.5rem;
+    justify-content: center;
+  }
+
+  .no-changes {
+    font-size: var(--cinder-text-xs);
+    color: var(--cinder-text-muted);
+  }
+
+  .toolbar-right {
+    display: flex;
+    align-items: center;
+    gap: var(--cinder-space-3);
+  }
+
+  .navigation {
+    display: flex;
+    align-items: center;
+    gap: var(--cinder-space-1);
+  }
+
+  .change-counter {
+    font-size: var(--cinder-text-xs);
+    font-family: var(--cinder-font-mono);
+    color: var(--cinder-text-muted);
+    min-width: 3rem;
+    text-align: center;
+  }
+
+  .shortcuts {
+    display: flex;
+    align-items: center;
+    gap: var(--cinder-space-1);
+  }
+
+  .front-matter-only-hint {
+    font-size: var(--cinder-text-xs);
+    color: var(--cinder-text-muted);
+  }
+
+  @media (max-width: 480px) {
+    .shortcuts {
+      display: none;
+    }
+  }
+</style>