@lapismd/design-core 0.1.0

package/src/shared/diff/file-change-stats/index.ts

@@ -0,0 +1,2 @@
+export { default as FileChangeStats } from "./FileChangeStats.svelte";
+export { formatDiffDelta } from "./format-diff-delta.js";

package/src/shared/diff/file-diff/FileDiff.css

@@ -0,0 +1,234 @@
+@import "../diff.tokens.css";
+
+.ui-diff-file-diff,
+.ui-diff-file-diff-composer {
+  width: 100%;
+  min-width: 0;
+  color: var(--foreground);
+  font-family: var(--ui-diff-mono);
+  font-size: 0.75rem;
+}
+
+.ui-diff-file-diff {
+  display: flex;
+  height: 100%;
+  min-height: 0;
+  flex-direction: column;
+  background: var(--ui-diff-surface);
+}
+
+.ui-diff-file-diff__empty {
+  margin: 0;
+  padding: 1.5rem 0.75rem;
+  color: var(--muted-foreground);
+  text-align: center;
+  font-family: inherit;
+}
+
+.ui-diff-file-diff__row {
+  display: flex;
+  align-items: stretch;
+  min-width: 0;
+  width: 100%;
+}
+
+.ui-diff-file-diff__row[data-variant="added"] {
+  background: var(--ui-diff-added-background);
+}
+
+.ui-diff-file-diff__row[data-variant="removed"] {
+  background: var(--ui-diff-removed-background);
+}
+
+.ui-diff-file-diff__row--empty {
+  min-height: 1.25rem;
+  background: color-mix(in srgb, var(--muted) 35%, transparent);
+}
+
+.ui-diff-file-diff__gutter {
+  flex: 0 0 3rem;
+  padding-inline: 0.5rem;
+  color: var(--ui-diff-gutter);
+  text-align: end;
+  user-select: none;
+}
+
+.ui-diff-file-diff__marker {
+  flex: 0 0 1rem;
+  color: var(--ui-diff-gutter);
+  user-select: none;
+}
+
+.ui-diff-file-diff__text {
+  min-width: 0;
+  flex: 1 1 auto;
+  white-space: pre;
+  padding-inline-end: 0.5rem;
+}
+
+.ui-diff-file-diff[data-wrap="true"] {
+  overflow-x: hidden;
+}
+
+.ui-diff-file-diff[data-wrap="true"] .ui-diff-file-diff__row {
+  max-width: 100%;
+}
+
+.ui-diff-file-diff[data-wrap="true"] [data-ui-part="scroll-area-viewport"] > * {
+  max-width: 100%;
+}
+
+.ui-diff-file-diff[data-wrap="true"] .ui-diff-file-diff__text {
+  white-space: pre-wrap;
+  overflow-wrap: anywhere;
+  word-break: break-word;
+}
+
+.ui-diff-file-diff__text [data-tone="added"] {
+  background: var(--ui-diff-segment-added);
+}
+
+.ui-diff-file-diff__text [data-tone="removed"] {
+  background: var(--ui-diff-segment-removed);
+}
+
+.ui-diff-file-diff__collapse-actions {
+  display: flex;
+  gap: 0.25rem;
+  padding: 0.125rem 0.25rem;
+}
+
+.ui-diff-file-diff__scroll,
+.ui-diff-file-diff__pane-scroll {
+  flex: 1 1 auto;
+  min-width: 0;
+  min-height: 0;
+  height: 100%;
+}
+
+.ui-diff-file-diff__split {
+  display: grid;
+  flex: 1 1 auto;
+  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
+  align-items: stretch;
+  min-width: 0;
+  min-height: 0;
+  height: 100%;
+}
+
+.ui-diff-file-diff__pane {
+  position: relative;
+  display: flex;
+  min-width: 0;
+  min-height: 0;
+  height: 100%;
+  flex-direction: column;
+  overflow: hidden;
+}
+
+.ui-diff-file-diff__pane::before {
+  content: "";
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  z-index: 0;
+  width: 3rem;
+  pointer-events: none;
+  background-color: var(--ui-diff-surface);
+  background-image: linear-gradient(
+    var(--ui-diff-gutter-wash),
+    var(--ui-diff-gutter-wash)
+  );
+}
+
+.ui-diff-file-diff__pane + .ui-diff-file-diff__pane {
+  border-left: 1px solid var(--ui-diff-border);
+}
+
+.ui-diff-file-diff[data-view-mode="split"] .ui-diff-file-diff__row {
+  min-height: 1.25rem;
+  line-height: 1.25rem;
+}
+
+.ui-diff-file-diff[data-view-mode="split"] .ui-diff-file-diff__gutter {
+  position: sticky;
+  left: 0;
+  z-index: 1;
+  box-sizing: border-box;
+  background-color: var(--ui-diff-surface);
+  background-image: linear-gradient(
+    var(--ui-diff-gutter-wash),
+    var(--ui-diff-gutter-wash)
+  );
+}
+
+.ui-diff-file-diff[data-view-mode="split"]
+  .ui-diff-file-diff__row[data-variant="added"]
+  .ui-diff-file-diff__gutter {
+  background-color: var(--ui-diff-surface);
+  background-image: linear-gradient(
+    var(--ui-diff-added-background),
+    var(--ui-diff-added-background)
+  );
+}
+
+.ui-diff-file-diff[data-view-mode="split"]
+  .ui-diff-file-diff__row[data-variant="removed"]
+  .ui-diff-file-diff__gutter {
+  background-color: var(--ui-diff-surface);
+  background-image: linear-gradient(
+    var(--ui-diff-removed-background),
+    var(--ui-diff-removed-background)
+  );
+}
+
+.ui-diff-file-diff__pane-stack {
+  display: flex;
+  min-height: 100%;
+  flex: 1 1 auto;
+  flex-direction: column;
+}
+
+.ui-diff-file-diff__pane-stack::after {
+  content: "";
+  flex: 1 1 auto;
+  width: 3rem;
+  min-height: 0;
+  background-color: var(--ui-diff-surface);
+  background-image: linear-gradient(
+    var(--ui-diff-gutter-wash),
+    var(--ui-diff-gutter-wash)
+  );
+}
+
+.ui-diff-file-diff[data-view-mode="split"]:not([data-wrap="true"])
+  .ui-diff-file-diff__pane-stack {
+  width: max-content;
+  min-width: 100%;
+}
+
+.ui-diff-file-diff[data-view-mode="split"]:not([data-wrap="true"])
+  .ui-diff-file-diff__text {
+  min-width: max-content;
+  flex: 0 0 auto;
+}
+
+.ui-diff-file-diff-composer {
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+}
+
+.ui-diff-file-diff-composer__file {
+  border: var(--ui-diff-frame-border);
+  border-radius: var(--ui-diff-frame-radius);
+  overflow: hidden;
+}
+
+.ui-diff-file-diff-composer__header {
+  padding: 0.375rem 0.75rem;
+  border-bottom: 1px solid var(--ui-diff-border);
+  background: var(--muted);
+  font-weight: 650;
+}

package/src/shared/diff/file-diff/FileDiff.svelte

@@ -0,0 +1,381 @@
+<script lang="ts">
+  import type { Snippet } from "svelte";
+  import { onMount } from "svelte";
+  import ChevronDownIcon from "@lucide/svelte/icons/chevron-down";
+  import ChevronUpIcon from "@lucide/svelte/icons/chevron-up";
+  import ChevronsUpDownIcon from "@lucide/svelte/icons/chevrons-up-down";
+  import { Button } from "../../shadcn/button/index.js";
+  import * as ScrollArea from "../../shadcn/scroll-area/index.js";
+  import { ensureHighlightStyles } from "../../shadcn/code-block/index.js";
+  import {
+    INCREMENTAL_EXPAND_STEP,
+    INCREMENTAL_EXPAND_THRESHOLD,
+    buildDisplayItems,
+    buildUnifiedDiffRows,
+    isBinaryFilePath,
+    lineNumberForSplitSide,
+    pairRowsForSplit,
+    parsePatchToRows,
+    type CollapsedContextBlock,
+    type ExpandedBlockState,
+    type UnifiedDiffRow,
+  } from "../core/unified-diff.js";
+  import { expandAll, expandBottom, expandTop } from "./expand.js";
+  import { highlightText } from "./highlight.js";
+  import { resolveDiffLanguage } from "./language.js";
+  import type {
+    FileDiffLineContext,
+    FileDiffScrollTarget,
+    FileDiffViewMode,
+  } from "./types.js";
+  import "./FileDiff.css";
+
+  let {
+    path,
+    oldText = null,
+    newText = null,
+    patch,
+    viewMode = "unified",
+    wrap = false,
+    language,
+    scrollTo,
+    lineAccessory,
+  }: {
+    path: string;
+    oldText?: string | null;
+    newText?: string | null;
+    /** Unified patch used when old/new texts are omitted. */
+    patch?: string;
+    viewMode?: FileDiffViewMode;
+    wrap?: boolean;
+    language?: string;
+    scrollTo?: FileDiffScrollTarget | null;
+    lineAccessory?: Snippet<[FileDiffLineContext]>;
+  } = $props();
+
+  let expandedBlocks = $state<ExpandedBlockState>({});
+  let rootEl: HTMLElement | null = $state(null);
+
+  const resolvedLanguage = $derived(resolveDiffLanguage(path, language));
+  const binary = $derived(isBinaryFilePath(path));
+  const rows = $derived.by((): UnifiedDiffRow[] => {
+    if (binary) return [];
+    if (patch != null && oldText == null && newText == null) {
+      return parsePatchToRows(patch);
+    }
+    return buildUnifiedDiffRows(oldText, newText ?? "");
+  });
+  const displayItems = $derived(buildDisplayItems(rows, expandedBlocks));
+  const splitPairs = $derived(pairRowsForSplit(rows));
+  const empty = $derived(!binary && rows.length === 0);
+
+  onMount(() => {
+    ensureHighlightStyles();
+  });
+
+  $effect(() => {
+    const target = scrollTo;
+    if (!target || !rootEl) return;
+    if (target.path && target.path !== path) return;
+    const variant = target.variant
+      ? `[data-diff-line-variant="${target.variant}"]`
+      : "";
+    const node = rootEl.querySelector<HTMLElement>(
+      `[data-diff-line-number="${target.lineNumber}"]${variant}`,
+    );
+    node?.scrollIntoView({ block: "center", inline: "nearest" });
+  });
+
+  $effect(() => {
+    const container = rootEl;
+    const shouldSync = viewMode === "split";
+    const syncHorizontal = shouldSync && !wrap;
+    if (!container || !shouldSync) return;
+    const targets = [
+      ...container.querySelectorAll<HTMLElement>(
+        "[data-ui-part='file-diff-pane'] [data-ui-part='scroll-area-viewport']",
+      ),
+    ];
+    if (targets.length === 0) return;
+    let syncing = false;
+    const listeners = targets.map((target) => {
+      const onScroll = () => {
+        if (syncing) return;
+        syncing = true;
+        for (const candidate of targets) {
+          if (candidate === target) continue;
+          if (candidate.scrollTop !== target.scrollTop) {
+            candidate.scrollTop = target.scrollTop;
+          }
+          if (
+            syncHorizontal &&
+            candidate.scrollLeft !== target.scrollLeft
+          ) {
+            candidate.scrollLeft = target.scrollLeft;
+          }
+        }
+        syncing = false;
+      };
+      target.addEventListener("scroll", onScroll, { passive: true });
+      return () => target.removeEventListener("scroll", onScroll);
+    });
+    return () => {
+      for (const stop of listeners) stop();
+    };
+  });
+
+  $effect(() => {
+    const container = rootEl;
+    const shouldAlign = viewMode === "split" && wrap;
+    if (!container) return;
+    const pairKeys = [
+      ...new Set(
+        [
+          ...container.querySelectorAll<HTMLElement>(
+            "[data-ui-part='diff-row'][data-pair-key], .ui-diff-file-diff__row--empty[data-pair-key]",
+          ),
+        ].map((node) => node.dataset.pairKey ?? ""),
+      ),
+    ].filter(Boolean);
+    for (const pairKey of pairKeys) {
+      const nodes = [
+        ...container.querySelectorAll<HTMLElement>(
+          `[data-ui-part='diff-row'][data-pair-key="${pairKey}"], .ui-diff-file-diff__row--empty[data-pair-key="${pairKey}"]`,
+        ),
+      ];
+      for (const node of nodes) node.style.minHeight = "";
+      if (!shouldAlign) continue;
+      const height = Math.max(
+        ...nodes.map((node) => node.getBoundingClientRect().height),
+        0,
+      );
+      for (const node of nodes) node.style.minHeight = `${height}px`;
+    }
+  });
+
+  function lineContext(row: UnifiedDiffRow): FileDiffLineContext {
+    return {
+      path,
+      lineNumber: row.lineNumber,
+      variant: row.variant,
+      text: row.text,
+    };
+  }
+</script>
+
+{#snippet highlightedText(row: UnifiedDiffRow)}
+  {#if row.segments}
+    <span class="ui-diff-file-diff__text">
+      {#each row.segments as segment (segment.key)}
+        <span data-tone={segment.tone === "context" ? undefined : segment.tone}>
+          {#each highlightText(segment.text, resolvedLanguage) as part (part.key)}
+            {#if part.type}
+              <span class={`ui-code-token-${part.type}`}>{part.text}</span>
+            {:else}
+              {part.text}
+            {/if}
+          {/each}
+        </span>
+      {/each}
+    </span>
+  {:else}
+    <span class="ui-diff-file-diff__text">
+      {#each highlightText(row.text, resolvedLanguage) as part (part.key)}
+        {#if part.type}
+          <span class={`ui-code-token-${part.type}`}>{part.text}</span>
+        {:else}
+          {part.text}
+        {/if}
+      {/each}
+    </span>
+  {/if}
+{/snippet}
+
+{#snippet unifiedRow(row: UnifiedDiffRow)}
+  <div
+    class="ui-diff-file-diff__row"
+    data-ui-part="diff-row"
+    data-diff-line-path={path}
+    data-diff-line-number={row.lineNumber ?? ""}
+    data-diff-line-variant={row.variant}
+    data-variant={row.variant}
+  >
+    <span class="ui-diff-file-diff__gutter" aria-hidden="true">
+      {row.lineNumber ?? ""}
+    </span>
+    <span class="ui-diff-file-diff__marker" aria-hidden="true">
+      {row.variant === "added" ? "+" : row.variant === "removed" ? "-" : " "}
+    </span>
+    {@render highlightedText(row)}
+    {#if lineAccessory}
+      {@render lineAccessory(lineContext(row))}
+    {/if}
+  </div>
+{/snippet}
+
+{#snippet splitCell(
+    row: UnifiedDiffRow | null,
+    side: "left" | "right",
+    pairKey: string,
+  )}
+  {#if row}
+    <div
+      class="ui-diff-file-diff__row"
+      data-ui-part="diff-row"
+      data-diff-line-path={path}
+      data-diff-line-number={row.lineNumber ?? ""}
+      data-diff-line-variant={row.variant}
+      data-variant={row.variant}
+      data-side={side}
+      data-pair-key={pairKey}
+    >
+      <span class="ui-diff-file-diff__gutter" aria-hidden="true">
+        {lineNumberForSplitSide(row, side) ?? ""}
+      </span>
+      {@render highlightedText(row)}
+      {#if lineAccessory}
+        {@render lineAccessory(lineContext(row))}
+      {/if}
+    </div>
+  {:else}
+    <div
+      class="ui-diff-file-diff__row ui-diff-file-diff__row--empty"
+      data-side={side}
+      data-pair-key={pairKey}
+    ></div>
+  {/if}
+{/snippet}
+
+{#snippet collapsedControls(block: CollapsedContextBlock)}
+  {#if block.expanded}
+    <Button
+      variant="ghost"
+      size="sm"
+      onclick={() => {
+        expandedBlocks = expandAll(expandedBlocks, block.id);
+      }}
+    >
+      <ChevronDownIcon />
+      Hide {block.count} unmodified lines
+    </Button>
+  {:else if block.count < INCREMENTAL_EXPAND_THRESHOLD}
+    <Button
+      variant="ghost"
+      size="sm"
+      onclick={() => {
+        expandedBlocks = expandAll(expandedBlocks, block.id);
+      }}
+    >
+      <ChevronsUpDownIcon />
+      Show {block.count} unmodified lines
+    </Button>
+  {:else}
+    <div class="ui-diff-file-diff__collapse-actions">
+      <Button
+        variant="ghost"
+        size="sm"
+        onclick={() => {
+          expandedBlocks = expandTop(
+            expandedBlocks,
+            block.id,
+            INCREMENTAL_EXPAND_STEP,
+          );
+        }}
+      >
+        <ChevronDownIcon />
+        ↓ {INCREMENTAL_EXPAND_STEP} lines
+      </Button>
+      <Button
+        variant="ghost"
+        size="sm"
+        onclick={() => {
+          expandedBlocks = expandAll(expandedBlocks, block.id);
+        }}
+      >
+        <ChevronsUpDownIcon />
+        Show all {block.count} lines
+      </Button>
+      <Button
+        variant="ghost"
+        size="sm"
+        onclick={() => {
+          expandedBlocks = expandBottom(
+            expandedBlocks,
+            block.id,
+            INCREMENTAL_EXPAND_STEP,
+          );
+        }}
+      >
+        <ChevronUpIcon />
+        ↑ {INCREMENTAL_EXPAND_STEP} lines
+      </Button>
+    </div>
+  {/if}
+{/snippet}
+
+<div
+  bind:this={rootEl}
+  class="ui-diff-file-diff"
+  data-ui-component="file-diff"
+  data-ui-part="file-diff"
+  data-view-mode={viewMode}
+  data-wrap={wrap ? "true" : undefined}
+  data-diff-file-path={path}
+>
+  {#if binary}
+    <p class="ui-diff-file-diff__empty">Binary file not shown</p>
+  {:else if empty}
+    <p class="ui-diff-file-diff__empty">No textual changes</p>
+  {:else if viewMode === "split"}
+    <div class="ui-diff-file-diff__split">
+      {#each ["left", "right"] as side (side)}
+        {@const paneSide = side as "left" | "right"}
+        <section
+          class="ui-diff-file-diff__pane"
+          data-ui-part="file-diff-pane"
+          data-side={paneSide}
+          aria-label={paneSide === "left"
+            ? "Previous revision"
+            : "Later revision"}
+        >
+          <ScrollArea.Root
+            class="ui-diff-file-diff__pane-scroll"
+            type="auto"
+            orientation={wrap ? "vertical" : "both"}
+          >
+            <div class="ui-diff-file-diff__pane-stack">
+              {#each splitPairs as pair (pair.key)}
+                {@render splitCell(
+                  paneSide === "left" ? pair.left : pair.right,
+                  paneSide,
+                  pair.key,
+                )}
+              {/each}
+            </div>
+          </ScrollArea.Root>
+        </section>
+      {/each}
+    </div>
+  {:else}
+    <ScrollArea.Root
+      class="ui-diff-file-diff__scroll"
+      type="auto"
+      orientation={wrap ? "vertical" : "both"}
+    >
+      {#each displayItems as item (item.type === "row" ? item.row.key : item.block.id)}
+        {#if item.type === "row"}
+          {@render unifiedRow(item.row)}
+        {:else}
+          <div data-ui-part="collapsed-context">
+            {@render collapsedControls(item.block)}
+            {#if item.block.expanded}
+              {#each item.block.rows as row (row.key)}
+                {@render unifiedRow(row)}
+              {/each}
+            {/if}
+          </div>
+        {/if}
+      {/each}
+    </ScrollArea.Root>
+  {/if}
+</div>

package/src/shared/diff/file-diff/FileDiffComposer.svelte

@@ -0,0 +1,61 @@
+<script lang="ts">
+  import type { Snippet } from "svelte";
+  import { truncatePathMiddle } from "../core/unified-diff.js";
+  import FileDiff from "./FileDiff.svelte";
+  import type {
+    FileDiffFile,
+    FileDiffLineContext,
+    FileDiffScrollTarget,
+    FileDiffViewMode,
+  } from "./types.js";
+  import "./FileDiff.css";
+
+  let {
+    files,
+    viewMode = "unified",
+    scrollTo,
+    lineAccessory,
+  }: {
+    files: FileDiffFile[];
+    viewMode?: FileDiffViewMode;
+    scrollTo?: FileDiffScrollTarget | null;
+    lineAccessory?: Snippet<[FileDiffLineContext]>;
+  } = $props();
+</script>
+
+<div
+  class="ui-diff-file-diff-composer"
+  data-ui-component="file-diff-composer"
+  data-ui-part="file-diff-composer"
+>
+  {#if files.length === 0}
+    <p class="ui-diff-file-diff__empty">No file diffs</p>
+  {:else}
+    {#each files as file (file.path)}
+      <section
+        class="ui-diff-file-diff-composer__file"
+        data-ui-part="file-section"
+        data-diff-file-path={file.path}
+      >
+        <header class="ui-diff-file-diff-composer__header">
+          <span title={file.path}>{truncatePathMiddle(file.path)}</span>
+        </header>
+        <FileDiff
+          path={file.path}
+          oldText={file.oldText}
+          newText={file.newText}
+          patch={file.patch}
+          language={file.language}
+          {viewMode}
+          scrollTo={scrollTo?.path === file.path ||
+          (scrollTo != null &&
+            scrollTo.path == null &&
+            files[0]?.path === file.path)
+            ? scrollTo
+            : null}
+          {lineAccessory}
+        />
+      </section>
+    {/each}
+  {/if}
+</div>