@lapismd/design-core 0.1.0

package/src/shared/diff/merge-editor/MergeEditorDemo.css

@@ -0,0 +1,41 @@
+.ui-diff-merge-demo {
+  display: flex;
+  min-width: 0;
+  min-height: 32rem;
+  flex-direction: column;
+  gap: 0.75rem;
+}
+
+.ui-diff-merge-demo__toolbar {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 0.75rem 1rem;
+  border: 1px solid var(--border);
+  border-radius: calc(var(--radius) * 0.8);
+  background: var(--muted);
+  padding: 0.5rem 0.75rem;
+}
+
+.ui-diff-merge-demo__field,
+.ui-diff-merge-demo__check {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.375rem;
+  color: var(--foreground);
+  font-size: 0.75rem;
+}
+
+.ui-diff-merge-demo__field select {
+  min-width: 12rem;
+  border: 1px solid var(--border);
+  border-radius: calc(var(--radius) * 0.6);
+  background: var(--background);
+  color: inherit;
+  padding: 0.25rem 0.5rem;
+}
+
+.ui-diff-merge-demo__editor {
+  min-height: 0;
+  flex: 1;
+}

package/src/shared/diff/merge-editor/MergeEditorDemo.svelte

@@ -0,0 +1,91 @@
+<script lang="ts">
+  import * as ToggleGroup from "../../shadcn/toggle-group/index.js";
+  import { mergeDemoFixtures } from "./demo-fixtures.js";
+  import MergeEditor from "./MergeEditor.svelte";
+  import type { MergeEditorMode } from "./types.js";
+  import "./MergeEditorDemo.css";
+
+  let {
+    fixtureId = $bindable("mismerge-quicksort"),
+    mode = $bindable<MergeEditorMode>("three-way"),
+    editable = $bindable(true),
+    ignoreWhitespace = $bindable(false),
+    ignoreCase = $bindable(false),
+    syncHorizontalScroll = $bindable(false),
+  }: {
+    fixtureId?: string;
+    mode?: MergeEditorMode;
+    editable?: boolean;
+    ignoreWhitespace?: boolean;
+    ignoreCase?: boolean;
+    syncHorizontalScroll?: boolean;
+  } = $props();
+
+  const fixture = $derived(
+    mergeDemoFixtures.find((item) => item.id === fixtureId) ??
+      mergeDemoFixtures[0],
+  );
+
+  function setMode(next: string | undefined) {
+    if (next === "one-way" || next === "three-way") mode = next;
+  }
+</script>
+
+<div class="ui-diff-merge-demo" data-ui-part="merge-demo">
+  <div class="ui-diff-merge-demo__toolbar">
+    <label class="ui-diff-merge-demo__field">
+      <span>Fixture</span>
+      <select bind:value={fixtureId} aria-label="Fixture">
+        {#each mergeDemoFixtures as item (item.id)}
+          <option value={item.id}>{item.label}</option>
+        {/each}
+      </select>
+    </label>
+    <ToggleGroup.Root
+      type="single"
+      value={mode}
+      onValueChange={setMode}
+      variant="outline"
+      size="sm"
+      aria-label="Merge mode"
+    >
+      <ToggleGroup.Item value="three-way">3-way</ToggleGroup.Item>
+      <ToggleGroup.Item value="one-way">2-pane</ToggleGroup.Item>
+    </ToggleGroup.Root>
+    <label class="ui-diff-merge-demo__check">
+      <input type="checkbox" bind:checked={editable} />
+      <span>Editable</span>
+    </label>
+    <label class="ui-diff-merge-demo__check">
+      <input type="checkbox" bind:checked={ignoreWhitespace} />
+      <span>Ignore whitespace</span>
+    </label>
+    <label class="ui-diff-merge-demo__check">
+      <input type="checkbox" bind:checked={ignoreCase} />
+      <span>Ignore case</span>
+    </label>
+    <label class="ui-diff-merge-demo__check">
+      <input type="checkbox" bind:checked={syncHorizontalScroll} />
+      <span>Sync horizontal scroll</span>
+    </label>
+  </div>
+  <div class="ui-diff-merge-demo__editor">
+    {#key `${fixture.id}:${mode}:${ignoreWhitespace}:${ignoreCase}`}
+      <MergeEditor
+        {mode}
+        {editable}
+        {ignoreWhitespace}
+        {ignoreCase}
+        {syncHorizontalScroll}
+        path={fixture.path}
+        language={fixture.language}
+        left={fixture.left}
+        base={fixture.base}
+        right={fixture.right}
+        leftLabel={fixture.leftLabel}
+        baseLabel={fixture.baseLabel}
+        rightLabel={fixture.rightLabel}
+      />
+    {/key}
+  </div>
+</div>

package/src/shared/diff/merge-editor/connector.ts

@@ -0,0 +1,94 @@
+import type {
+  RenderConnection,
+  RenderVisualKind,
+} from "../core/merge/render-model.js";
+
+export type ConnectorLaneName = "left" | "right";
+
+export interface ConnectorPathGeometry {
+  id: string;
+  visualKind: RenderVisualKind;
+  path: string;
+}
+
+export interface ConnectorLaneGeometry {
+  width: number;
+  height: number;
+  paths: ConnectorPathGeometry[];
+}
+
+export interface ConnectorGeometry {
+  left: ConnectorLaneGeometry;
+  right: ConnectorLaneGeometry;
+}
+
+export const EMPTY_CONNECTOR_LANE: ConnectorLaneGeometry = {
+  width: 40,
+  height: 0,
+  paths: [],
+};
+
+export const EMPTY_CONNECTOR_GEOMETRY: ConnectorGeometry = {
+  left: EMPTY_CONNECTOR_LANE,
+  right: EMPTY_CONNECTOR_LANE,
+};
+
+export function connectorPath(
+  width: number,
+  fromTop: number,
+  fromBottom: number,
+  toTop: number,
+  toBottom: number,
+): string {
+  const bend = Math.min(8, Math.max(4, width / 4));
+  return [
+    `M 0 ${fromTop}`,
+    `C ${bend} ${fromTop}, ${width - bend} ${toTop}, ${width} ${toTop}`,
+    `L ${width} ${toBottom}`,
+    `C ${width - bend} ${toBottom}, ${bend} ${fromBottom}, 0 ${fromBottom}`,
+    "Z",
+  ].join(" ");
+}
+
+export function measureConnectorLane(
+  container: HTMLElement,
+  laneName: ConnectorLaneName,
+  connections: readonly RenderConnection[],
+): ConnectorLaneGeometry {
+  const lane = container.querySelector<HTMLElement>(
+    `[data-connector-lane="${laneName}"]`,
+  );
+  if (!lane) {
+    return EMPTY_CONNECTOR_LANE;
+  }
+  const laneRect = lane.getBoundingClientRect();
+  const width = lane.clientWidth || 40;
+  const height = lane.clientHeight;
+  const paths = connections.flatMap((connection): ConnectorPathGeometry[] => {
+    const from = container.querySelector<HTMLElement>(
+      `[data-render-component-id="${connection.fromComponentId}"]`,
+    );
+    const to = container.querySelector<HTMLElement>(
+      `[data-render-component-id="${connection.toComponentId}"]`,
+    );
+    if (!from || !to) {
+      return [];
+    }
+    const fromRect = from.getBoundingClientRect();
+    const toRect = to.getBoundingClientRect();
+    return [
+      {
+        id: connection.id,
+        visualKind: connection.visualKind,
+        path: connectorPath(
+          width,
+          fromRect.top - laneRect.top,
+          fromRect.bottom - laneRect.top,
+          toRect.top - laneRect.top,
+          toRect.bottom - laneRect.top,
+        ),
+      },
+    ];
+  });
+  return { width, height, paths };
+}

package/src/shared/diff/merge-editor/demo-fixtures.ts

@@ -0,0 +1,428 @@
+import { mismergeQuicksortFixture } from "./mismerge-quicksort-fixture.js";
+
+export type MergeDemoFixture = {
+  id: string;
+  label: string;
+  path: string;
+  language: string;
+  leftLabel: string;
+  baseLabel: string;
+  rightLabel: string;
+  left: string;
+  base: string;
+  right: string;
+};
+
+export const mergeDemoFixtures: MergeDemoFixture[] = [
+  {
+    id: "mismerge-quicksort",
+    label: "MisMerge quicksort",
+    path: mismergeQuicksortFixture.path,
+    language: mismergeQuicksortFixture.language,
+    leftLabel: mismergeQuicksortFixture.leftLabel,
+    baseLabel: "Base",
+    rightLabel: mismergeQuicksortFixture.rightLabel,
+    left: mismergeQuicksortFixture.left,
+    base: mismergeQuicksortFixture.base,
+    right: mismergeQuicksortFixture.right,
+  },
+  {
+    id: "quicksort-c",
+    label: "Quicksort C",
+    path: "quicksort.c",
+    language: "c",
+    leftLabel: "Left",
+    baseLabel: "Base",
+    rightLabel: "Right",
+    left: `void swap(int *a, int *b) {
+  int t = *a;
+  *a = *b;
+  *b = t;
+}
+
+int partition(int array[], int low, int high) {
+  int pivot = array[high];
+  int i = low - 1;
+
+  for (int j = low; j < high; j++) {
+    if (array[j] <= pivot) {
+      i++;
+      swap(&array[i], &array[j]);
+    }
+  }
+  swap(&array[high], &array[i + 1]);
+
+  return i + 1;
+}
+
+/**
+ * Simple implementation of the Quick Sort
+ */
+void quick_sort(int array[], int low, int high) {
+  if (low < high) {
+    int pi = partition(array, low, high);
+
+    quick_sort(array, low, pi - 1);
+    quick_sort(array, pi + 1, high);
+  }
+}
+`,
+    base: `void swap(int *a, int *b) {
+  int t = *a;
+  *a = *b;
+  *b = t;
+}
+
+int partition(int array[], int low, int high) {
+  int pivot = array[high];
+  int i = low - 1;
+
+  // Move all the elements higher than the pivot
+  // to the left side of the partition
+  for (int j = low; j < high; j++) {
+    if (array[j] <= pivot) {
+      i++;
+      swap(&array[i], &array[j]);
+    }
+  }
+  swap(&array[i + 1], &array[high]);
+
+  return i + 1;
+}
+
+void quick_sort(int array[], int low, int high) {
+  if (low < high) {
+    int pi = partition(array, low, high);
+
+    quick_sort(array, low, pi - 1);
+    quick_sort(array, pi + 1, high);
+  }
+}
+`,
+    right: `void swap(int *a, int *b) {
+  int t = *a;
+  *a = *b;
+  *b = t;
+}
+
+int partition(int *array, int low, int high) {
+  int pivot = array[high];
+  int i = low - 1;
+
+  for (int j = low; j < high; j++) {
+    if (array[j] <= pivot) {
+      i++;
+      swap(&array[i], &array[j]);
+    }
+  }
+  swap(
+    &array[i + 1],
+    &array[high]
+  );
+
+  return i + 1;
+}
+
+void quick_sort(int array[], int low, int high) {
+  if (low < high) {
+    int pi = partition(array, low, high);
+
+    quick_sort(array, low, pi - 1);
+    quick_sort(array, pi + 1, high);
+  }
+}
+`,
+  },
+  {
+    id: "merge-preview-c",
+    label: "Merge preview C",
+    path: "merge-preview.c",
+    language: "c",
+    leftLabel: "Left",
+    baseLabel: "Base",
+    rightLabel: "Right",
+    base: `#include <stdio.h>
+#include <string.h>
+
+typedef struct {
+  const char *base_url;
+  const char *project;
+  const char *branch;
+  const char *query;
+  int page;
+  int page_size;
+  int timeout_ms;
+  int include_archived;
+} MergePreviewRequest;
+
+static int clamp_page_size(int page_size) {
+  if (page_size < 1) {
+    return 1;
+  }
+  if (page_size > 100) {
+    return 100;
+  }
+  return page_size;
+}
+
+static void append_bool_param(char *buffer, size_t size, const char *name, int enabled) {
+  snprintf(buffer + strlen(buffer), size - strlen(buffer), "&%s=%s", name, enabled ? "true" : "false");
+}
+
+static void append_debug_header(char *response, size_t size, const MergePreviewRequest *request) {
+  snprintf(
+    response + strlen(response),
+    size - strlen(response),
+    "X-Debug-Trace: project=%s branch=%s query=%s page=%d page_size=%d timeout_ms=%d\\n",
+    request->project,
+    request->branch,
+    request->query,
+    request->page,
+    request->page_size,
+    request->timeout_ms
+  );
+}
+
+int build_merge_preview_url(const MergePreviewRequest *request, char *buffer, size_t size) {
+  if (!request || !buffer || size == 0) {
+    return -1;
+  }
+
+  snprintf(
+    buffer,
+    size,
+    "%s/api/v1/projects/%s/compare?branch=%s&query=%s&page=%d&page_size=%d&timeout_ms=%d",
+    request->base_url,
+    request->project,
+    request->branch,
+    request->query,
+    request->page,
+    clamp_page_size(request->page_size),
+    request->timeout_ms
+  );
+  append_bool_param(buffer, size, "include_archived", request->include_archived);
+
+  return 0;
+}
+
+int send_merge_preview_request(const MergePreviewRequest *request, char *response, size_t response_size) {
+  char url[1024];
+  int status = build_merge_preview_url(request, url, sizeof(url));
+
+  if (status != 0) {
+    return status;
+  }
+
+  snprintf(response, response_size, "GET %s HTTP/1.1\\nHost: merge-preview.internal\\n", url);
+  append_debug_header(response, response_size, request);
+  snprintf(response + strlen(response), response_size - strlen(response), "\\n");
+  return 200;
+}
+`,
+    left: `#include <stdio.h>
+#include <string.h>
+
+typedef struct {
+  const char *base_url;
+  const char *project;
+  const char *branch;
+  const char *query;
+  int page;
+  int page_size;
+  int timeout_ms;
+  int include_archived;
+  const char *viewer;
+} MergePreviewRequest;
+
+static int clamp_page_size(int page_size) {
+  if (page_size <= 0) {
+    return 25;
+  }
+  if (page_size > 250) {
+    return 250;
+  }
+  return page_size;
+}
+
+static void append_bool_param(char *buffer, size_t size, const char *name, int enabled) {
+  snprintf(buffer + strlen(buffer), size - strlen(buffer), "&%s=%s", name, enabled ? "true" : "false");
+}
+
+static void append_string_param(char *buffer, size_t size, const char *name, const char *value) {
+  if (!value || value[0] == '\\0') {
+    return;
+  }
+
+  snprintf(buffer + strlen(buffer), size - strlen(buffer), "&%s=%s", name, value);
+}
+
+static void append_debug_header(char *response, size_t size, const MergePreviewRequest *request) {
+  snprintf(
+    response + strlen(response),
+    size - strlen(response),
+    "X-Debug-Trace: viewer=%s project=%s branch=%s query=%s page=%d page_size=%d timeout_ms=%d\\n",
+    request->viewer,
+    request->project,
+    request->branch,
+    request->query,
+    request->page,
+    request->page_size,
+    request->timeout_ms
+  );
+}
+
+int build_merge_preview_url(const MergePreviewRequest *request, char *buffer, size_t size) {
+  if (!request || !buffer || size == 0) {
+    return -1;
+  }
+
+  snprintf(
+    buffer,
+    size,
+    "%s/api/v2/projects/%s/compare?branch=%s&query=%s&page=%d&page_size=%d&timeout_ms=%d",
+    request->base_url,
+    request->project,
+    request->branch,
+    request->query,
+    request->page,
+    clamp_page_size(request->page_size),
+    request->timeout_ms
+  );
+  append_bool_param(buffer, size, "include_archived", request->include_archived);
+  append_bool_param(buffer, size, "expand_conflicts", 1);
+  append_string_param(buffer, size, "viewer", request->viewer);
+
+  return 0;
+}
+
+int send_merge_preview_request(const MergePreviewRequest *request, char *response, size_t response_size) {
+  char url[1024];
+  int status = build_merge_preview_url(request, url, sizeof(url));
+
+  if (status != 0) {
+    return status;
+  }
+
+  snprintf(response, response_size, "GET %s HTTP/1.1\\nHost: merge-preview.internal\\n", url);
+  append_debug_header(response, response_size, request);
+  snprintf(response + strlen(response), response_size - strlen(response), "X-Merge-Mode: interactive\\n");
+  snprintf(response + strlen(response), response_size - strlen(response), "X-Preview-Source: dashboard\\n\\n");
+  return 202;
+}
+`,
+    right: `#include <stdio.h>
+#include <string.h>
+
+typedef struct {
+  const char *base_url;
+  const char *project;
+  const char *target_branch;
+  const char *query;
+  int page;
+  int page_size;
+  int timeout_ms;
+  int include_archived;
+  int compact_output;
+} MergePreviewRequest;
+
+static int clamp_page_size(int page_size) {
+  if (page_size < 1) {
+    return 1;
+  }
+  if (page_size > 50) {
+    return 50;
+  }
+  return page_size;
+}
+
+static void append_bool_param(char *buffer, size_t size, const char *name, int enabled) {
+  snprintf(buffer + strlen(buffer), size - strlen(buffer), "&%s=%d", name, enabled ? 1 : 0);
+}
+
+static void append_debug_header(char *response, size_t size, const MergePreviewRequest *request) {
+  snprintf(
+    response + strlen(response),
+    size - strlen(response),
+    "X-Debug-Trace: project=%s target_branch=%s query=%s page=%d per_page=%d timeout=%d compact=%d\\n",
+    request->project,
+    request->target_branch,
+    request->query,
+    request->page,
+    request->page_size,
+    request->timeout_ms,
+    request->compact_output
+  );
+}
+
+int build_merge_preview_url(const MergePreviewRequest *request, char *buffer, size_t size) {
+  if (!request || !buffer || size == 0) {
+    return -1;
+  }
+
+  snprintf(
+    buffer,
+    size,
+    "%s/api/v1/merge-preview/%s?target_branch=%s&search=%s&page=%d&per_page=%d&timeout=%d",
+    request->base_url,
+    request->project,
+    request->target_branch,
+    request->query,
+    request->page,
+    clamp_page_size(request->page_size),
+    request->timeout_ms
+  );
+  append_bool_param(buffer, size, "include_archived", request->include_archived);
+  append_bool_param(buffer, size, "compact", request->compact_output);
+
+  return 0;
+}
+
+int send_merge_preview_request(const MergePreviewRequest *request, char *response, size_t response_size) {
+  char url[1024];
+  int status = build_merge_preview_url(request, url, sizeof(url));
+
+  if (status != 0) {
+    return status;
+  }
+
+  snprintf(response, response_size, "GET %s HTTP/1.1\\nHost: merge-preview.internal\\n", url);
+  append_debug_header(response, response_size, request);
+  snprintf(response + strlen(response), response_size - strlen(response), "X-Merge-Mode: compact\\n\\n");
+  return 206;
+}
+`,
+  },
+  {
+    id: "vcs-rust",
+    label: "VCS Rust conflict",
+    path: "src/conflict.rs",
+    language: "rust",
+    leftLabel: "Ours",
+    baseLabel: "Base",
+    rightLabel: "Theirs",
+    left: `pub fn conflict_label() -> &'static str {
+    "left"
+}
+`,
+    base: `pub fn conflict_label() -> &'static str {
+    "base"
+}
+`,
+    right: `pub fn conflict_label() -> &'static str {
+    "right"
+}
+`,
+  },
+  {
+    id: "ignore-options",
+    label: "Case and whitespace",
+    path: "value.ts",
+    language: "typescript",
+    leftLabel: "Left",
+    baseLabel: "Base",
+    rightLabel: "Right",
+    left: "Value\n",
+    base: "value\n",
+    right: " value \n",
+  },
+];

package/src/shared/diff/merge-editor/index.ts

@@ -0,0 +1,9 @@
+export { default as MergeEditor } from "./MergeEditor.svelte";
+export { mergeDemoFixtures, type MergeDemoFixture } from "./demo-fixtures.js";
+export { mismergeQuicksortFixture } from "./mismerge-quicksort-fixture.js";
+export { quicksortFixture } from "./quicksort-fixture.js";
+export type {
+  MergeEditorMode,
+  MergeResolvedChange,
+  MergeSide,
+} from "./types.js";

package/src/shared/diff/merge-editor/mismerge-quicksort-fixture.ts

@@ -0,0 +1,12 @@
+/** Official BearToCode/mismerge demo `placeholder/*-quicksort.c` texts. */
+export const mismergeQuicksortFixture = {
+  path: "quicksort.c",
+  language: "c",
+  leftLabel: "Left",
+  baseLabel: "Resolved",
+  rightLabel: "Right",
+  left: "void swap(int *a, int *b) {\n  int t = *a;\n  *a = *b;\n  *b = t;\n}\n\nint partition(int array[], int low, int high) {\n  int pivot = array[high];\n  int i = low - 1;\n\n  for (int j = low; j < high; j++) {\n    if (array[j] <= pivot) {\n      i++;\n      swap(&array[i], &array[j]);\n    }\n  }\n  swap(&array[high], &array[i + 1]);\n  \n  return i + 1;\n}\n\n/**\n * Simple implementation of the Quick Sort algorithm.\n */\nvoid quick_sort(int array[], int low, int high) {\n  if (low < high) {\n    int pi = partition(array, low, high);\n   \n    quick_sort(array, low, pi - 1);\n    quick_sort(array, pi + 1, high);\n  }\n}",
+  base: "void swap(int *a, int *b) {\n  int t = *a;\n  *a = *b;\n  *b = t;\n}\n\nint partition(int array[], int low, int high) {\n  int pivot = array[high];\n  int i = low - 1;\n\n\t// Move all the elements higher than the pivot\n\t// to the left side of the partition\n  for (int j = low; j < high; j++) {\n    if (array[j] <= pivot) {\n      i++;\n      swap(&array[i], &array[j]);\n    }\n  }\n  swap(&array[i + 1], &array[high]);\n  \n  return i + 1;\n}\n\nvoid quick_sort(int array[], int low, int high) {\n  if (low < high) {\n    int pi = partition(array, low, high);\n   \n    quick_sort(array, low, pi - 1);\n    quick_sort(array, pi + 1, high);\n  }\n}",
+  right:
+    "void swap(int *a, int *b) {\n  int t = *a;\n  *a = *b;\n  *b = t;\n}\n\nint partition(int *array, int low, int high) {\n  int pivot = array[high];\n  int i = low - 1;\n\n  for (int j = low; j < high; j++) {\n    if (array[j] <= pivot) {\n      i++;\n      swap(&array[i], &array[j]);\n    }\n  }\n  swap(\n\t\t&array[i + 1], \n\t\t&array[high]\n\t);\n  \n  return i + 1;\n}\n\nvoid quick_sort(int array[], int low, int high) {\n  if (low < high) {\n    int pi = partition(array, low, high);\n   \n    quick_sort(array, low, pi - 1);\n    quick_sort(array, pi + 1, high);\n  }\n}",
+} as const;

package/src/shared/diff/merge-editor/quicksort-fixture.ts

@@ -0,0 +1,6 @@
+import { mergeDemoFixtures } from "./demo-fixtures.js";
+
+/** Changeyard merge demo `quicksort-c` fixture, used to compare overlay bands. */
+export const quicksortFixture = mergeDemoFixtures.find(
+  (fixture) => fixture.id === "quicksort-c",
+)!;

package/src/shared/diff/merge-editor/types.ts

@@ -0,0 +1,11 @@
+import type { MergeMode, MergeSide } from "../core/merge/types.js";
+
+export interface MergeResolvedChange {
+  resolved: boolean;
+  conflictCount: number;
+  unresolvedConflictCount: number;
+  content: string;
+}
+
+export type MergeEditorMode = MergeMode;
+export type { MergeSide };