@celestia-island/hikari 0.55.147 → 0.55.149

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@celestia-island/hikari",
-  "version": "0.55.147",
+  "version": "0.55.149",
   "private": false,
   "type": "module",
   "description": "Hikari Vue 3 component library — production-grade UI components based on shittim-chest design system",

package/src/components/HkDiffViewer.scss

@@ -0,0 +1,204 @@
+// HkDiffViewer — grouped, collapsible unified-diff rendering.
+// Sibling of the markdown code-block chrome: same subtle surface, same
+// mono stack, same hidden native scrollbars (overlay rails are attached
+// by the consumer's scroll container).
+
+@use "./hikari-vars" as vars;
+
+.hk-diff-viewer {
+  border: 1px solid var(--hi-color-border, #646464);
+  border-radius: var(--radius-sm);
+  background: var(--hi-color-bg-subtle, #21262d);
+  overflow: hidden; // clip hunk/gap bands to the rounded corners
+}
+
+.hk-diff-viewer__body {
+  overflow-x: auto;
+  font-size: var(--text-xs);
+  line-height: 1.55;
+  scrollbar-width: none;
+
+  &::-webkit-scrollbar {
+    display: none;
+  }
+}
+
+// One diff row: old number | new number | sign | content. The row is at
+// least the container width (so tints span edge to edge) and grows with
+// the longest content (so the container can scroll horizontally).
+.hk-diff-viewer__line {
+  display: grid;
+  grid-template-columns: 4.2ch 4.2ch 2ch 1fr;
+  width: 100%;
+  min-width: max-content;
+  font-family: var(--font-mono, vars.$hikari-font-family-mono);
+  white-space: pre;
+  color: var(--hi-color-text-primary, #1e1e1e);
+
+  &[data-kind="add"] {
+    background: rgb(var(--color-success) / 12%);
+
+    .hk-diff-viewer__sign {
+      color: rgb(var(--color-success));
+    }
+  }
+
+  &[data-kind="del"] {
+    background: rgb(var(--color-error) / 12%);
+
+    .hk-diff-viewer__sign {
+      color: rgb(var(--color-error));
+    }
+  }
+}
+
+.hk-diff-viewer__no {
+  padding: 0 0.8ch;
+  text-align: end;
+  color: var(--hi-color-text-tertiary, #8b949e);
+  opacity: 0.75;
+  user-select: none;
+}
+
+.hk-diff-viewer__sign {
+  user-select: none;
+  text-align: center;
+  font-weight: 600;
+}
+
+.hk-diff-viewer__code {
+  padding-inline-end: 1ch;
+  min-width: 0;
+}
+
+// ── hunk groups ────────────────────────────────────────────────────────────
+.hk-diff-viewer__hunk + .hk-diff-viewer__hunk,
+.hk-diff-viewer__hunk-body {
+  border-top: 1px solid var(--hi-color-border, #646464);
+}
+
+.hk-diff-viewer__hunk-head {
+  display: flex;
+  align-items: center;
+  gap: 0.5em;
+  width: 100%;
+  padding: 0.3em 0.8em;
+  border: 0;
+  background: var(--hi-color-bg-subtle, #21262d);
+  color: var(--hi-color-text-secondary, #666666);
+  font: inherit;
+  text-align: start;
+  cursor: pointer;
+  user-select: none;
+
+  &:hover {
+    color: var(--hi-color-text-primary, #1e1e1e);
+  }
+
+  &:focus-visible {
+    outline: 2px solid var(--hi-color-primary, #7aa2f7);
+    outline-offset: -2px;
+  }
+}
+
+.hk-diff-viewer__hunk-range {
+  font-weight: 600;
+  letter-spacing: 0.01em;
+}
+
+.hk-diff-viewer__hunk-section {
+  color: var(--hi-color-text-tertiary, #8b949e);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  min-width: 0;
+  flex: 1;
+}
+
+.hk-diff-viewer__hunk-stats {
+  display: inline-flex;
+  gap: 0.6em;
+  margin-inline-start: auto;
+  font-style: normal;
+
+  em {
+    font-style: normal;
+    font-weight: 600;
+  }
+
+  em[data-kind="add"] {
+    color: rgb(var(--color-success));
+  }
+
+  em[data-kind="del"] {
+    color: rgb(var(--color-error));
+  }
+}
+
+// ── collapsed unchanged regions ────────────────────────────────────────────
+.hk-diff-viewer__gap {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.5em;
+  width: 100%;
+  padding: 0.35em 0.8em;
+  border: 0;
+  border-top: 1px dashed var(--hi-color-border, #646464);
+  background: rgb(var(--color-primary) / 5%);
+  color: var(--hi-color-text-tertiary, #8b949e);
+  font: inherit;
+  cursor: pointer;
+  user-select: none;
+
+  &:hover:not(:disabled) {
+    background: rgb(var(--color-primary) / 10%);
+    color: var(--hi-color-text-primary, #1e1e1e);
+  }
+
+  &:focus-visible {
+    outline: 2px solid var(--hi-color-primary, #7aa2f7);
+    outline-offset: -2px;
+  }
+
+  &:disabled {
+    cursor: progress;
+  }
+
+  &[data-state="failed"] {
+    background: rgb(var(--color-error) / 8%);
+    color: rgb(var(--color-error));
+  }
+
+  // Without a loadContext fetcher the row is a passive divider.
+  &[data-state="static"] {
+    cursor: default;
+
+    &:hover {
+      background: rgb(var(--color-primary) / 5%);
+      color: var(--hi-color-text-tertiary, #8b949e);
+    }
+  }
+}
+
+.hk-diff-viewer__gap-label {
+  font-size: 0.95em;
+}
+
+// A gap directly after the last hunk still gets its dashed separator.
+.hk-diff-viewer__hunk + .hk-diff-viewer__gap,
+.hk-diff-viewer__gap + .hk-diff-viewer__hunk .hk-diff-viewer__hunk-head {
+  border-top: 1px dashed var(--hi-color-border, #646464);
+}
+
+// ── raw fallback (unparseable input) ───────────────────────────────────────
+.hk-diff-viewer__raw {
+  margin: 0;
+  padding: 0.6em 0.8em;
+  font-family: var(--font-mono, vars.$hikari-font-family-mono);
+  font-size: var(--text-xs);
+  line-height: 1.55;
+  white-space: pre-wrap;
+  word-break: break-word;
+  color: var(--hi-color-text-primary, #1e1e1e);
+}

package/src/components/HkDiffViewer.test.tsx

@@ -0,0 +1,240 @@
+import { afterEach, describe, expect, it, vi } from "vitest";
+import { createApp, defineComponent, h, nextTick, ref, type App } from "vue";
+
+import HkDiffViewer from "./HkDiffViewer";
+
+/**
+ * HkDiffViewer — the rendered half: hunk grouping, collapsed unchanged
+ * regions and the async expander contract (loadContext round-trips,
+ * anchor policy, failure/retry, reset on diff change).
+ */
+
+const apps: App[] = [];
+afterEach(() => {
+  for (const app of apps.splice(0)) app.unmount();
+  document.body.innerHTML = "";
+});
+
+function mount(props: Record<string, unknown>) {
+  const container = document.createElement("div");
+  document.body.appendChild(container);
+  const Root = defineComponent({
+    setup() {
+      return () => h(HkDiffViewer, props as never);
+    },
+  });
+  const app = createApp(Root);
+  app.mount(container);
+  apps.push(app);
+  return container;
+}
+
+/** Diff with a 9-line leading gap, one mixed hunk, and a 5-line trailing gap. */
+const DIFF = [
+  "--- a/a.toml",
+  "+++ b/a.toml",
+  "@@ -10,4 +10,5 @@",
+  " ctx-a",
+  "-old",
+  "+new-1",
+  "+new-2",
+  " ctx-b",
+  " ctx-c",
+  "",
+].join("\n");
+
+const tick = () => new Promise((r) => setTimeout(r, 0));
+
+describe("HkDiffViewer", () => {
+  it("groups the diff into hunk cards with per-hunk stats and both-side numbers", async () => {
+    const root = mount({ diff: DIFF, totalLines: 19 });
+    await nextTick();
+    const head = root.querySelector(".hk-diff-viewer__hunk-head")!;
+    expect(head.textContent).toContain("@@ -10,4 +10,5 @@");
+    expect(head.querySelector('[data-kind="add"]')!.textContent).toBe("+2");
+    expect(head.querySelector('[data-kind="del"]')!.textContent).toBe("−1");
+    const lines = [...root.querySelectorAll(".hk-diff-viewer__line")];
+    // 6 hunk lines (3 context + 1 del + 2 add); gap rows are not .line
+    expect(lines).toHaveLength(6);
+    const kinds = lines.map((l) => l.getAttribute("data-kind"));
+    expect(kinds).toEqual(["context", "del", "add", "add", "context", "context"]);
+    const delLine = lines[1];
+    expect(delLine.querySelectorAll(".hk-diff-viewer__no")[0].textContent).toBe("11");
+    expect(delLine.querySelectorAll(".hk-diff-viewer__no")[1].textContent).toBe("");
+  });
+
+  it("renders unchanged regions as static dividers without a loadContext fetcher", async () => {
+    const root = mount({ diff: DIFF, totalLines: 19 });
+    await nextTick();
+    const gaps = [...root.querySelectorAll(".hk-diff-viewer__gap")];
+    expect(gaps).toHaveLength(2); // leading 9 + trailing 5
+    expect(gaps[0].tagName).toBe("DIV"); // not a button — nothing to fetch with
+    expect(gaps[0].textContent).toContain("9");
+    expect(gaps[1].textContent).toContain("5");
+  });
+
+  it("expands an unchanged region asynchronously via loadContext", async () => {
+    const seen: Array<[number, number]> = [];
+    const loadContext = vi.fn(async (start: number, count: number) => {
+      seen.push([start, count]);
+      return Array.from({ length: count }, (_, i) => `line-${start + i}`);
+    });
+    const root = mount({ diff: DIFF, totalLines: 19, loadContext, contextChunk: 4 });
+    await nextTick();
+
+    // Trailing gap [15..19] (5 lines, anchor start): first click fetches 15..18.
+    const trailing = root.querySelectorAll(".hk-diff-viewer__gap")[1] as HTMLButtonElement;
+    expect(trailing.tagName).toBe("BUTTON");
+    trailing.click();
+    await tick();
+    await nextTick();
+    expect(seen).toEqual([[15, 4]]);
+    let text = root.textContent!;
+    expect(text).toContain("line-15");
+    expect(text).toContain("line-18");
+    // One line remains hidden → the expander stays, now counting 1.
+    const after = root.querySelectorAll(".hk-diff-viewer__gap")[1] as HTMLButtonElement;
+    expect(after.textContent).toContain("1");
+
+    // Second click completes the region; the divider disappears entirely.
+    after.click();
+    await tick();
+    await nextTick();
+    expect(seen[1]).toEqual([19, 1]);
+    expect(root.querySelectorAll(".hk-diff-viewer__gap")).toHaveLength(1); // only the leading gap
+    text = root.textContent!;
+    expect(text).toContain("line-19");
+    // Revealed context lines carry both-side numbers (shift = 0 here).
+    const revealed = [...root.querySelectorAll(".hk-diff-viewer__line[data-kind='context']")];
+    expect(revealed.length).toBeGreaterThan(4);
+  });
+
+  it("expands the LEADING gap bottom-up (lines nearest the hunk first)", async () => {
+    const seen: Array<[number, number]> = [];
+    const loadContext = vi.fn(async (start: number, count: number) => {
+      seen.push([start, count]);
+      return Array.from({ length: count }, (_, i) => `L${start + i}`);
+    });
+    const root = mount({ diff: DIFF, totalLines: 19, loadContext, contextChunk: 4 });
+    await nextTick();
+    const leading = root.querySelectorAll(".hk-diff-viewer__gap")[0] as HTMLButtonElement;
+    leading.click();
+    await tick();
+    await nextTick();
+    expect(seen).toEqual([[6, 4]]); // bottom 4 of the 9-line leading gap
+    const text = root.textContent!;
+    expect(text).toContain("L6");
+    expect(text).toContain("L9");
+    expect(text).not.toContain("L5");
+  });
+
+  it("marks a failed fetch inline and retries on the next click", async () => {
+    let calls = 0;
+    const loadContext = vi.fn(async () => {
+      calls += 1;
+      if (calls === 1) return null; // transport failure
+      return ["recovered"];
+    });
+    const root = mount({
+      diff: DIFF,
+      totalLines: 19,
+      loadContext,
+      contextChunk: 1, // trailing gap is 5 lines; irrelevant — leading used
+    });
+    await nextTick();
+    const gap = root.querySelectorAll(".hk-diff-viewer__gap")[1] as HTMLButtonElement;
+    gap.click();
+    await tick();
+    await nextTick();
+    expect(root.querySelector(".hk-diff-viewer__gap[data-state='failed']")).toBeTruthy();
+    expect(loadContext).toHaveBeenCalledTimes(1);
+
+    (root.querySelector(".hk-diff-viewer__gap[data-state='failed']") as HTMLButtonElement).click();
+    await tick();
+    await nextTick();
+    expect(loadContext).toHaveBeenCalledTimes(2);
+    expect(root.querySelector(".hk-diff-viewer__gap[data-state='failed']")).toBeNull();
+    expect(root.textContent).toContain("recovered");
+  });
+
+  it("bottom-aligns a SHORT response in the leading gap (R1)", async () => {
+    // A clipping host answers fewer lines than requested: for the
+    // bottom-anchored leading gap the arrived lines are the ones NEAREST
+    // the hunk — storing them top-aligned would permanently hide those.
+    const seen: Array<[number, number]> = [];
+    const loadContext = vi.fn(async (start: number, count: number) => {
+      seen.push([start, count]);
+      // Clips to 2 lines regardless of the requested window.
+      return ["L8", "L9"].slice(0, Math.min(2, count));
+    });
+    const root = mount({ diff: DIFF, totalLines: 19, loadContext, contextChunk: 4 });
+    await nextTick();
+    const leading = root.querySelectorAll(".hk-diff-viewer__gap")[0] as HTMLButtonElement;
+    leading.click();
+    await tick();
+    await nextTick();
+    expect(seen).toEqual([[6, 4]]); // bottom 4 of the 9-line gap requested…
+    const text = root.textContent!;
+    expect(text).toContain("L8"); // …but the 2 that arrived render…
+    expect(text).toContain("L9"); //   …nearest the hunk (bottom-aligned)
+    expect(text).not.toContain("L6");
+    // 7 lines remain hidden; the expander persists with the new count.
+    const after = root.querySelectorAll(".hk-diff-viewer__gap")[0] as HTMLButtonElement;
+    expect(after.textContent).toContain("7");
+  });
+
+  it("collapses and re-expands a hunk via its header", async () => {
+    const root = mount({ diff: DIFF, totalLines: 19 });
+    await nextTick();
+    const head = root.querySelector(".hk-diff-viewer__hunk-head") as HTMLButtonElement;
+    expect(root.querySelectorAll(".hk-diff-viewer__line")).toHaveLength(6);
+    head.click();
+    await nextTick();
+    expect(root.querySelectorAll(".hk-diff-viewer__line")).toHaveLength(0);
+    head.click();
+    await nextTick();
+    expect(root.querySelectorAll(".hk-diff-viewer__line")).toHaveLength(6);
+  });
+
+  it("resets gap state when the diff prop changes", async () => {
+    const loadContext = vi.fn(async (start: number, count: number) =>
+      Array.from({ length: count }, (_, i) => `line-${start + i}`),
+    );
+    const container = document.createElement("div");
+    document.body.appendChild(container);
+    const diffRef = ref(DIFF);
+    const Root = defineComponent({
+      setup() {
+        return () =>
+          h(HkDiffViewer, {
+            diff: diffRef.value,
+            totalLines: 19,
+            loadContext,
+            contextChunk: 100,
+          } as never);
+      },
+    });
+    const app = createApp(Root);
+    app.mount(container);
+    apps.push(app);
+    await nextTick();
+
+    (container.querySelector(".hk-diff-viewer__gap") as HTMLButtonElement).click();
+    await tick();
+    await nextTick();
+    expect(container.textContent).toContain("line-1");
+
+    // A different diff must drop the fetched lines and recompute gaps.
+    diffRef.value = "@@ -3,2 +3,2 @@\n-a\n+b\n";
+    await nextTick();
+    expect(container.textContent).not.toContain("line-1");
+    expect(container.textContent).toContain("15"); // trailing gap of the new diff
+  });
+
+  it("degrades unparseable input to a raw <pre>", async () => {
+    const root = mount({ diff: "not a diff\nat all" });
+    await nextTick();
+    expect(root.querySelector(".hk-diff-viewer__raw")!.textContent).toContain("not a diff");
+    expect(root.querySelector(".hk-diff-viewer__hunk")).toBeNull();
+  });
+});