@pgcorp/ui-kit 0.10.0 → 0.10.1

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

@@ -1,499 +0,0 @@
-<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>