@pgcorp/ui-kit 0.8.1 → 0.10.0

package/src/components/shared/data-display/SDiffViewer.vue

@@ -0,0 +1,499 @@
+<template>
+  <section
+    v-bind="ownedAttrs.bindings()"
+    class="s-diff-viewer"
+    :data-layout="validatedLayout"
+    :data-viewport="validatedViewport"
+    :data-state="status"
+    :aria-label="validatedAriaLabel"
+    :style="rootStyle"
+  >
+    <header class="s-diff-viewer__header">
+      <div class="s-diff-viewer__sources">
+        <span class="s-diff-viewer__source" data-side="before">{{ beforeLabel }}</span>
+        <span class="s-diff-viewer__direction" aria-hidden="true">→</span>
+        <span class="s-diff-viewer__source" data-side="after">{{ afterLabel }}</span>
+      </div>
+      <span v-if="result" class="s-diff-viewer__summary">
+        {{ t('editor.diffSummary', { added: result.summary.addedLineCount, removed: result.summary.removedLineCount }) }}
+      </span>
+    </header>
+
+    <div v-if="validatedLayout === 'split' && status === 'ready'" class="s-diff-viewer__split-header" aria-hidden="true">
+      <span>{{ beforeLabel }}</span>
+      <span>{{ afterLabel }}</span>
+    </div>
+
+    <SAsyncState :state="asyncState" presentation="block">
+      <template #error="{ message }">
+        <div class="s-diff-viewer__error">
+          <SMessage severity="danger" size="sm">{{ message }}</SMessage>
+          <SButton
+            :label="t('actions.retry')"
+            appearance="soft"
+            severity="secondary"
+            size="sm"
+            @click="retry"
+          />
+        </div>
+      </template>
+
+      <div class="s-diff-viewer__viewport">
+        <SVirtualList
+          :items="renderRows"
+          :item-size="DIFF_ROW_HEIGHT"
+          :overscan="8"
+          :height="null"
+          :item-key="rowKey"
+          :item-label="rowLabel"
+          :accessible-label="validatedAriaLabel"
+        >
+          <template #default="{ item }">
+            <div v-if="item.kind === 'gap'" class="s-diff-viewer__gap-row">
+              <SButton
+                :label="gapButtonLabel(item)"
+                :disclosure="{ expanded: item.expanded, controls: gapControlsId(item.gap.id), iconPlacement: 'leading' }"
+                appearance="text"
+                severity="secondary"
+                size="xs"
+                density="compact"
+                width="full"
+                @click="toggleGap(item.gap.id)"
+              />
+            </div>
+
+            <div
+              v-else-if="item.kind === 'unified-line'"
+              class="s-diff-viewer__unified-row"
+              :data-kind="item.line.kind"
+              :id="item.gapId ? gapControlsId(item.gapId) : undefined"
+            >
+              <span class="s-diff-viewer__marker" aria-hidden="true">{{ unifiedMarker(item.line.kind) }}</span>
+              <span class="s-diff-viewer__line-number" aria-hidden="true">{{ item.line.before?.lineNumber ?? '' }}</span>
+              <span class="s-diff-viewer__line-number" aria-hidden="true">{{ item.line.after?.lineNumber ?? '' }}</span>
+              <span class="s-diff-viewer__code-cell">
+                <SCodeTokenLine
+                  :text="unifiedSide(item.line).text"
+                  :language="unifiedLanguage(item.line)"
+                />
+                <span
+                  v-if="unifiedSide(item.line).lineBreak === 'none'"
+                  class="s-diff-viewer__missing-break"
+                  :aria-label="t('editor.diffMissingLineBreak')"
+                >∅</span>
+              </span>
+            </div>
+
+            <div
+              v-else
+              class="s-diff-viewer__split-row"
+              :id="item.gapId ? gapControlsId(item.gapId) : undefined"
+            >
+              <div class="s-diff-viewer__split-cell" :data-kind="item.beforeKind">
+                <span class="s-diff-viewer__line-number" aria-hidden="true">{{ item.before?.lineNumber ?? '' }}</span>
+                <span v-if="item.before" class="s-diff-viewer__code-cell">
+                  <SCodeTokenLine :text="item.before.text" :language="validatedBefore.language" wrap />
+                  <span
+                    v-if="item.before.lineBreak === 'none'"
+                    class="s-diff-viewer__missing-break"
+                    :aria-label="t('editor.diffMissingLineBreak')"
+                  >∅</span>
+                </span>
+              </div>
+              <div class="s-diff-viewer__split-cell" :data-kind="item.afterKind">
+                <span class="s-diff-viewer__line-number" aria-hidden="true">{{ item.after?.lineNumber ?? '' }}</span>
+                <span v-if="item.after" class="s-diff-viewer__code-cell">
+                  <SCodeTokenLine :text="item.after.text" :language="validatedAfter.language" wrap />
+                  <span
+                    v-if="item.after.lineBreak === 'none'"
+                    class="s-diff-viewer__missing-break"
+                    :aria-label="t('editor.diffMissingLineBreak')"
+                  >∅</span>
+                </span>
+              </div>
+            </div>
+          </template>
+        </SVirtualList>
+      </div>
+    </SAsyncState>
+  </section>
+</template>
+
+<script setup lang="ts">
+import {
+  computed,
+  onBeforeUnmount,
+  ref,
+  watch,
+  type CSSProperties,
+} from 'vue'
+
+import { useUiKitLocale } from '../../../composables/useUiKitLocale'
+import {
+  createDiffRuntime,
+  SDiffComputationCancelledError,
+} from '../../../internal/diffRuntime'
+import { useOwnedAttrs } from '../../../internal/ownedAttrs'
+import {
+  validateBoundedInteger,
+  validateExactString,
+  validateNonEmptyString,
+} from '../../../internal/runtimeContract'
+import SButton from '../controls/SButton.vue'
+import SAsyncState, { type SAsyncStateContract } from '../feedback/SAsyncState.vue'
+import SMessage from './SMessage.vue'
+import SCodeTokenLine from './_internal/SCodeTokenLine.vue'
+import SVirtualList from './SVirtualList.vue'
+import {
+  S_DIFF_MAX_CONTEXT_LINES,
+  validateDiffSource,
+  type SDiffGap,
+  type SDiffLanguage,
+  type SDiffLine,
+  type SDiffLineKind,
+  type SDiffLineSide,
+  type SDiffResult,
+  type SDiffSource,
+} from './diff'
+
+defineOptions({ inheritAttrs: false })
+
+/** Presentation of canonical line operations. Split mode pairs adjacent remove/add runs by position. */
+export type SDiffViewerLayout = 'unified' | 'split'
+/** Semantic viewport sizes shared with code surfaces; fill consumes the containing block. */
+export type SDiffViewerViewport = 'content' | 'compact' | 'standard' | 'expanded' | 'fill'
+
+/** Public exact-text diff contract. Inputs are validated without newline or payload normalization. */
+export interface Props {
+  /** Previous exact source snapshot. */
+  before: SDiffSource
+  /** Current exact source snapshot. */
+  after: SDiffSource
+  layout?: SDiffViewerLayout
+  /** Unchanged lines retained around each changed hunk. */
+  contextLines?: number
+  /** Optional controlled set of expanded unchanged gap identities. */
+  expandedGapIds?: readonly string[]
+  viewport?: SDiffViewerViewport
+  /** Accessible name for the diff region and its virtualized line collection. */
+  ariaLabel: string
+}
+
+type UnifiedLineRow = {
+  readonly kind: 'unified-line'
+  readonly key: string
+  readonly line: SDiffLine
+  readonly gapId?: string
+}
+
+type SplitLineRow = {
+  readonly kind: 'split-line'
+  readonly key: string
+  readonly before?: SDiffLineSide
+  readonly after?: SDiffLineSide
+  readonly beforeKind: SDiffLineKind | 'empty'
+  readonly afterKind: SDiffLineKind | 'empty'
+  readonly gapId?: string
+}
+
+type GapRow = {
+  readonly kind: 'gap'
+  readonly key: string
+  readonly gap: SDiffGap
+  readonly expanded: boolean
+}
+
+type DiffRenderRow = UnifiedLineRow | SplitLineRow | GapRow
+
+const DIFF_ROW_HEIGHT = 32
+const props = withDefaults(defineProps<Props>(), {
+  layout: 'unified',
+  contextLines: 3,
+  expandedGapIds: undefined,
+  viewport: 'standard',
+})
+const emit = defineEmits<{
+  (event: 'update:expandedGapIds', value: readonly string[]): void
+  (event: 'retry'): void
+  (event: 'computed', result: SDiffResult): void
+}>()
+const { t } = useUiKitLocale()
+const ownedAttrs = useOwnedAttrs({ component: 'SDiffViewer', owner: 'diff viewer root' })
+const runtime = createDiffRuntime()
+const result = ref<SDiffResult | null>(null)
+const status = ref<'loading' | 'ready' | 'empty' | 'error'>('loading')
+const errorMessage = ref('')
+const uncontrolledExpandedGapIds = ref<readonly string[]>(Object.freeze([]))
+let generation = 0
+let abortController: AbortController | null = null
+
+const validatedBefore = computed(() => validateDiffSource('SDiffViewer', 'before', props.before))
+const validatedAfter = computed(() => validateDiffSource('SDiffViewer', 'after', props.after))
+const validatedLayout = computed(() => validateExactString(
+  'SDiffViewer',
+  'layout',
+  props.layout,
+  ['unified', 'split'] as const,
+))
+const validatedViewport = computed(() => validateExactString(
+  'SDiffViewer',
+  'viewport',
+  props.viewport,
+  ['content', 'compact', 'standard', 'expanded', 'fill'] as const,
+))
+const validatedContextLines = computed(() => validateBoundedInteger(
+  'SDiffViewer',
+  'contextLines',
+  props.contextLines,
+  { minimum: 0, maximum: S_DIFF_MAX_CONTEXT_LINES },
+))
+const validatedAriaLabel = computed(() => validateNonEmptyString('SDiffViewer', 'ariaLabel', props.ariaLabel))
+const beforeLabel = computed(() => validatedBefore.value.label ?? t('editor.diffBefore'))
+const afterLabel = computed(() => validatedAfter.value.label ?? t('editor.diffAfter'))
+
+function validateExpandedGapIds(value: unknown, currentResult: SDiffResult | null): readonly string[] {
+  if (!Array.isArray(value)) throw new TypeError('SDiffViewer: expandedGapIds must be an array.')
+  const gapIds = new Set(currentResult?.gaps.map((gap) => gap.id) ?? [])
+  const seen = new Set<string>()
+  value.forEach((candidate, index) => {
+    const id = validateNonEmptyString('SDiffViewer', `expandedGapIds[${index}]`, candidate)
+    if (seen.has(id)) throw new TypeError(`SDiffViewer: expandedGapIds contains duplicate ${JSON.stringify(id)}.`)
+    if (currentResult !== null && !gapIds.has(id)) {
+      throw new RangeError(`SDiffViewer: expandedGapIds[${index}] ${JSON.stringify(id)} is stale.`)
+    }
+    seen.add(id)
+  })
+  return Object.freeze([...seen])
+}
+
+const expandedGapIds = computed(() => props.expandedGapIds === undefined
+  ? uncontrolledExpandedGapIds.value
+  : validateExpandedGapIds(props.expandedGapIds, result.value))
+const expandedGapSet = computed(() => new Set(expandedGapIds.value))
+
+const asyncState = computed<SAsyncStateContract>(() => {
+  if (status.value === 'loading') return { status: 'loading', message: t('editor.diffComputing') }
+  if (status.value === 'empty') return { status: 'empty', message: t('editor.diffNoChanges') }
+  if (status.value === 'error') return { status: 'error', message: errorMessage.value }
+  return { status: 'ready' }
+})
+
+function alignSplitLines(lines: readonly SDiffLine[]): SplitLineRow[] {
+  const rows: SplitLineRow[] = []
+  let index = 0
+  while (index < lines.length) {
+    const line = lines[index]
+    if (line.kind === 'unchanged') {
+      rows.push({
+        kind: 'split-line',
+        key: `split:${line.id}`,
+        before: line.before,
+        after: line.after,
+        beforeKind: 'unchanged',
+        afterKind: 'unchanged',
+      })
+      index += 1
+      continue
+    }
+    const changedBlock: SDiffLine[] = []
+    while (index < lines.length && lines[index].kind !== 'unchanged') {
+      changedBlock.push(lines[index])
+      index += 1
+    }
+    const removed = changedBlock.filter((changedLine) => changedLine.kind === 'removed')
+    const added = changedBlock.filter((changedLine) => changedLine.kind === 'added')
+    const pairCount = Math.max(removed.length, added.length)
+    for (let pairIndex = 0; pairIndex < pairCount; pairIndex += 1) {
+      const beforeLine = removed[pairIndex]
+      const afterLine = added[pairIndex]
+      rows.push({
+        kind: 'split-line',
+        key: `split:${beforeLine?.id ?? '-'}:${afterLine?.id ?? '-'}`,
+        ...(beforeLine?.before === undefined ? {} : { before: beforeLine.before }),
+        ...(afterLine?.after === undefined ? {} : { after: afterLine.after }),
+        beforeKind: beforeLine === undefined ? 'empty' : 'removed',
+        afterKind: afterLine === undefined ? 'empty' : 'added',
+      })
+    }
+  }
+  return rows
+}
+
+function lineRows(lines: readonly SDiffLine[], gapId?: string): Array<UnifiedLineRow | SplitLineRow> {
+  const rows: Array<UnifiedLineRow | SplitLineRow> = validatedLayout.value === 'split'
+    ? alignSplitLines(lines)
+    : lines.map((line) => ({
+        kind: 'unified-line',
+        key: `unified:${line.id}`,
+        line,
+      }))
+  if (gapId === undefined || rows.length === 0) return rows
+  const [firstRow, ...remainingRows] = rows
+  return [{ ...firstRow, gapId }, ...remainingRows]
+}
+
+const renderRows = computed<readonly DiffRenderRow[]>(() => {
+  const current = result.value
+  if (current === null || current.summary.changedLineCount === 0) return Object.freeze([])
+  const segments = [
+    ...current.hunks.map((hunk) => ({ kind: 'hunk' as const, value: hunk })),
+    ...current.gaps.map((gap) => ({ kind: 'gap' as const, value: gap })),
+  ].sort((left, right) => left.value.lineStart - right.value.lineStart)
+  const rows: DiffRenderRow[] = []
+  for (const segment of segments) {
+    if (segment.kind === 'hunk') {
+      rows.push(...lineRows(current.lines.slice(segment.value.lineStart, segment.value.lineEnd)))
+      continue
+    }
+    const expanded = expandedGapSet.value.has(segment.value.id)
+    rows.push({
+      kind: 'gap',
+      key: `gap-control:${segment.value.id}`,
+      gap: segment.value,
+      expanded,
+    })
+    if (expanded) {
+      rows.push(...lineRows(
+        current.lines.slice(segment.value.lineStart, segment.value.lineEnd),
+        segment.value.id,
+      ))
+    }
+  }
+  return Object.freeze(rows)
+})
+
+function estimateCodeColumns(text: string): number {
+  let columns = 0
+  for (const character of text) {
+    if (character === '\t') {
+      columns += 2 - (columns % 2)
+      continue
+    }
+    if (/\p{Mark}/u.test(character)) continue
+    columns += /^[\u0000-\u007f]$/u.test(character) ? 1 : 2
+  }
+  return columns
+}
+
+const unifiedCodeColumns = computed(() => {
+  let maximum = 1
+  for (const line of result.value?.lines ?? []) {
+    if (line.before !== undefined) maximum = Math.max(maximum, estimateCodeColumns(line.before.text))
+    if (line.after !== undefined) maximum = Math.max(maximum, estimateCodeColumns(line.after.text))
+  }
+  return maximum
+})
+
+const rootStyle = computed<CSSProperties>(() => ({
+  '--s-diff-content-row-count': String(Math.max(3, Math.min(14, renderRows.value.length + 1))),
+  '--s-diff-unified-code-inline-size': `${unifiedCodeColumns.value}ch`,
+}))
+
+function rowKey(row: DiffRenderRow): string {
+  return row.key
+}
+
+function describeLine(kind: SDiffLineKind, before: SDiffLineSide | undefined, after: SDiffLineSide | undefined): string {
+  if (kind === 'removed') return t('editor.diffRemovedLine', { line: before?.lineNumber ?? '' })
+  if (kind === 'added') return t('editor.diffAddedLine', { line: after?.lineNumber ?? '' })
+  return t('editor.diffUnchangedLine', {
+    before: before?.lineNumber ?? '',
+    after: after?.lineNumber ?? '',
+  })
+}
+
+function rowLabel(row: DiffRenderRow): string {
+  if (row.kind === 'gap') return gapButtonLabel(row)
+  if (row.kind === 'unified-line') return describeLine(row.line.kind, row.line.before, row.line.after)
+  return [
+    row.before === undefined ? '' : describeLine(row.beforeKind as SDiffLineKind, row.before, undefined),
+    row.after === undefined ? '' : describeLine(row.afterKind as SDiffLineKind, undefined, row.after),
+  ].filter(Boolean).join('; ')
+}
+
+function gapButtonLabel(row: GapRow): string {
+  return row.expanded
+    ? t('editor.diffCollapseGap', { count: row.gap.lineCount })
+    : t('editor.diffExpandGap', { count: row.gap.lineCount })
+}
+
+function gapControlsId(gapId: string): string {
+  return `s-diff-${gapId.replace(/[^a-zA-Z0-9_-]/gu, '-')}`
+}
+
+function toggleGap(gapId: string): void {
+  const next = new Set(expandedGapIds.value)
+  if (next.has(gapId)) next.delete(gapId)
+  else next.add(gapId)
+  const value = Object.freeze([...next])
+  if (props.expandedGapIds === undefined) uncontrolledExpandedGapIds.value = value
+  emit('update:expandedGapIds', value)
+}
+
+function unifiedMarker(kind: SDiffLineKind): string {
+  return kind === 'removed' ? '−' : kind === 'added' ? '+' : ' '
+}
+
+function unifiedSide(line: SDiffLine): SDiffLineSide {
+  const side = line.kind === 'removed' ? line.before : line.after
+  if (side === undefined) throw new Error(`SDiffViewer: ${line.id} has no renderable side.`)
+  return side
+}
+
+function unifiedLanguage(line: SDiffLine): SDiffLanguage | undefined {
+  return line.kind === 'removed' ? validatedBefore.value.language : validatedAfter.value.language
+}
+
+async function computeCurrentDiff(): Promise<void> {
+  const currentGeneration = generation += 1
+  abortController?.abort()
+  abortController = new AbortController()
+  result.value = null
+  status.value = 'loading'
+  errorMessage.value = ''
+  try {
+    const computedResult = await runtime.compute(
+      validatedBefore.value,
+      validatedAfter.value,
+      { contextLines: validatedContextLines.value },
+      abortController.signal,
+    )
+    if (currentGeneration !== generation) return
+    if (props.expandedGapIds !== undefined) {
+      validateExpandedGapIds(props.expandedGapIds, computedResult)
+    }
+    result.value = computedResult
+    if (props.expandedGapIds === undefined) {
+      const activeGapIds = new Set(computedResult.gaps.map((gap) => gap.id))
+      uncontrolledExpandedGapIds.value = Object.freeze(
+        uncontrolledExpandedGapIds.value.filter((gapId) => activeGapIds.has(gapId)),
+      )
+    }
+    status.value = computedResult.summary.changedLineCount === 0 ? 'empty' : 'ready'
+    emit('computed', computedResult)
+  } catch (cause) {
+    if (currentGeneration !== generation || cause instanceof SDiffComputationCancelledError) return
+    status.value = 'error'
+    errorMessage.value = cause instanceof Error ? cause.message : String(cause)
+  }
+}
+
+function retry(): void {
+  emit('retry')
+  void computeCurrentDiff()
+}
+
+watch(
+  [validatedBefore, validatedAfter, validatedContextLines],
+  () => { void computeCurrentDiff() },
+  { immediate: true },
+)
+
+onBeforeUnmount(() => {
+  generation += 1
+  abortController?.abort()
+  runtime.dispose()
+})
+</script>
+
+<style lang="postcss" src="./SDiffViewer.css" scoped></style>