@lapis-notes/history 0.1.2 → 0.2.0

package/dist/repository/components/blame/RepositoryBlameGroup.svelte

@@ -0,0 +1,189 @@
+<script lang="ts">
+  import { Skeleton } from "@lapismd/design-core/shadcn/skeleton";
+  import type { TokenLine } from "@lapismd/design-core/shadcn/code-block";
+  import type { BlameCommit } from "../../controllers/blame-model.js";
+  import RepositoryAuthorAvatar from "../RepositoryAuthorAvatar.svelte";
+  import { RelativeTime } from "@lapismd/design-core/shadcn/relative-time";
+  import type { BlameChunk } from "../../controllers/blame-chunks.js";
+  import RepositoryBlameCommitTitle from "./RepositoryBlameCommitTitle.svelte";
+  let {
+    chunk,
+    lines,
+    tokens,
+    commit,
+    now,
+    pending,
+    onOpen,
+    stats,
+    wrap,
+  }: {
+    chunk: BlameChunk;
+    lines: string[];
+    tokens: TokenLine[];
+    commit?: BlameCommit;
+    now?: number;
+    pending: boolean;
+    onOpen?: (commit: string) => void;
+    stats?: { additions: number; deletions: number };
+    wrap: boolean;
+  } = $props();
+</script>
+
+<div
+  class="blame-group"
+  data-continued={chunk.continued || undefined}
+  data-first={chunk.start === 1 || undefined}
+  data-wrap={wrap}
+>
+  {#if chunk.end === lines.length + 1}<div
+      class="blame-group__end-divider"
+      aria-hidden="true"
+    ></div>{/if}
+  <div class="blame-group__gutter">
+    <div
+      class="blame-group__origin"
+      aria-label={`Origin for lines ${chunk.start}–${chunk.end - 1}${chunk.continued ? " (continued)" : ""}`}
+    >
+      {#if commit}
+        <RepositoryAuthorAvatar
+          name={commit.author.name}
+          email={commit.author.email}
+          size="xs"
+        />
+        <span class="blame-group__author" title={commit.author.name}
+          >{commit.author.name}</span
+        >
+        <RepositoryBlameCommitTitle
+          {commit}
+          {stats}
+          {now}
+          {onOpen}
+          continued={chunk.continued}
+        />
+        <span class="blame-group__time"
+          ><RelativeTime
+            timestamp={Number(commit.author.timestamp.millis)}
+            {now}
+          /></span
+        >
+      {:else if pending}
+        <span
+          class="blame-group__loading"
+          role="status"
+          aria-label={`Loading origin for lines ${chunk.start}–${chunk.end - 1}`}
+          ><Skeleton style="width:100%;height:0.8rem" /></span
+        >
+      {:else}
+        <span class="blame-group__unknown">Origin unavailable</span>
+      {/if}
+    </div>
+  </div>
+  <div class="blame-group__source">
+    {#each lines.slice(chunk.start - 1, chunk.end - 1) as line, index (index)}
+      {@const number = chunk.start + index}
+      <div class="blame-group__line" data-line={number}>
+        <span class="blame-group__number" aria-label={`Line ${number}`}
+          >{number}</span
+        >
+        <code
+          >{#each tokens[number - 1] ?? [] as token, ti (ti)}{line.slice(
+              ti ? tokens[number - 1]![ti - 1]!.end : 0,
+              token.start,
+            )}<span class={`ui-code-token-${token.type}`}
+              >{line.slice(token.start, token.end)}</span
+            >{/each}{line.slice(tokens[number - 1]?.at(-1)?.end ?? 0) ||
+            (line ? "" : "\u200b")}</code
+        >
+      </div>
+    {/each}
+  </div>
+</div>
+
+<style>
+  .blame-group {
+    position: relative;
+    display: grid;
+    grid-template-columns: min(22rem, 45cqw) minmax(0, 1fr);
+  }
+  .blame-group__end-divider {
+    position: absolute;
+    inset-inline: 0;
+    bottom: 0;
+    z-index: 2;
+    border-bottom: 1px solid var(--border);
+    pointer-events: none;
+  }
+  .blame-group__gutter {
+    position: sticky;
+    left: 0;
+    z-index: 1;
+    background: var(--background);
+    box-shadow: inset 0 1px 0 var(--border);
+    font-family: var(--font-sans, sans-serif);
+  }
+  .blame-group__origin {
+    position: sticky;
+    top: 0;
+    display: flex;
+    align-items: center;
+    gap: 0.4rem;
+    height: 28px;
+    box-sizing: border-box;
+    padding: 0 0.5rem;
+  }
+  .blame-group__source {
+    min-width: 0;
+    box-shadow: inset 0 1px 0 var(--border);
+  }
+  .blame-group[data-first] .blame-group__gutter {
+    box-shadow: none;
+  }
+  .blame-group[data-first] .blame-group__source {
+    box-shadow: none;
+  }
+  .blame-group__author {
+    max-width: 4.5rem;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    font-size: 0.75rem;
+  }
+  .blame-group__time {
+    flex: none;
+    color: var(--muted-foreground);
+    font-size: 0.75rem;
+  }
+  .blame-group__loading {
+    width: 100%;
+    padding: 0 0.5rem;
+  }
+  .blame-group__unknown {
+    color: var(--muted-foreground);
+    font-size: 0.75rem;
+  }
+  .blame-group__line {
+    display: flex;
+    min-height: 28px;
+    line-height: 28px;
+    white-space: pre;
+  }
+  .blame-group__number {
+    width: max(3rem, calc(var(--blame-line-digits, 3) * 1ch + 1rem));
+    flex: none;
+    text-align: right;
+    padding-right: 0.75rem;
+    color: var(--muted-foreground);
+    user-select: none;
+  }
+  code {
+    min-width: 0;
+    flex: 1;
+    font: inherit;
+    tab-size: 4;
+    padding-right: 1rem;
+  }
+  .blame-group[data-wrap="true"] code {
+    white-space: pre-wrap;
+    overflow-wrap: anywhere;
+  }
+</style>

package/dist/repository/components/blame/RepositoryBlameGroup.svelte.d.ts

@@ -0,0 +1,20 @@
+import type { TokenLine } from "@lapismd/design-core/shadcn/code-block";
+import type { BlameCommit } from "../../controllers/blame-model.js";
+import type { BlameChunk } from "../../controllers/blame-chunks.js";
+type $$ComponentProps = {
+    chunk: BlameChunk;
+    lines: string[];
+    tokens: TokenLine[];
+    commit?: BlameCommit;
+    now?: number;
+    pending: boolean;
+    onOpen?: (commit: string) => void;
+    stats?: {
+        additions: number;
+        deletions: number;
+    };
+    wrap: boolean;
+};
+declare const RepositoryBlameGroup: import("svelte").Component<$$ComponentProps, {}, "">;
+type RepositoryBlameGroup = ReturnType<typeof RepositoryBlameGroup>;
+export default RepositoryBlameGroup;

package/dist/repository/components/blame/RepositoryBlamePanel.svelte

@@ -0,0 +1,148 @@
+<script lang="ts">
+  import RepositorySkeleton from "../RepositorySkeleton.svelte";
+  import { onMount } from "svelte";
+  import { Button } from "@lapismd/design-core/shadcn/button";
+  import RefreshCwIcon from "@lucide/svelte/icons/refresh-cw";
+  import WrapTextIcon from "@lucide/svelte/icons/wrap-text";
+  import { Toggle } from "@lapismd/design-core/shadcn/toggle";
+  import * as Tooltip from "@lapismd/design-core/shadcn/tooltip";
+  import {
+    readBlameWrap,
+    saveBlameWrap,
+  } from "../../controllers/blame-preferences.js";
+  import type { BlameController } from "../../controllers/blame-controller.js";
+  import type { BlameState } from "../../controllers/blame-model.js";
+  import RepositoryBlameView from "./RepositoryBlameView.svelte";
+  import RepositoryFileTitle from "../RepositoryFileTitle.svelte";
+  import RepositoryIdentifiers from "../RepositoryIdentifiers.svelte";
+  import { encodeJjChangeId } from "../../controllers/graph/repository-log-graph.js";
+  import RepositoryShell from "../RepositoryShell.svelte";
+  let {
+    controller,
+    copyText,
+    onOpen,
+    commitStats,
+  }: {
+    controller: BlameController;
+    copyText(value: string): Promise<void>;
+    onOpen(commit: string): void;
+    commitStats?: Readonly<
+      Record<string, { additions: number; deletions: number }>
+    >;
+  } = $props();
+  let viewState = $state<BlameState>({ status: "loading", busy: false });
+  let wrap = $state(readBlameWrap());
+  onMount(() =>
+    controller.subscribe((value) => {
+      viewState = value;
+    }),
+  );
+</script>
+
+<RepositoryShell>
+  <section
+    class="blame-panel"
+    aria-label="File blame"
+    aria-busy={viewState.busy}
+  >
+    <header>
+      <span class="file-title"
+        ><RepositoryFileTitle path={viewState.selection?.path} /></span
+      >
+      <RepositoryIdentifiers
+        {copyText}
+        commitId={viewState.selection?.commit}
+        changeId={encodeJjChangeId(
+          viewState.progress?.commits[viewState.selection?.commit ?? ""]
+            ?.change_id ?? "",
+        )}
+        placement="inline"
+      />
+      <Tooltip.Provider>
+        <Tooltip.Root>
+          <Tooltip.Trigger>
+            {#snippet child({ props })}
+              <Toggle
+                {...props}
+                pressed={wrap}
+                onPressedChange={(pressed) => {
+                  wrap = pressed;
+                  saveBlameWrap(pressed);
+                }}
+                size="sm"
+                class="wrap-toggle"
+                aria-label="Wrap text"
+                ><WrapTextIcon aria-hidden="true" /></Toggle
+              >
+            {/snippet}
+          </Tooltip.Trigger>
+          <Tooltip.Content role="tooltip">Wrap text</Tooltip.Content>
+        </Tooltip.Root>
+      </Tooltip.Provider>
+      <Button
+        variant="ghost"
+        size="icon-sm"
+        aria-label="Refresh blame"
+        disabled={viewState.busy}
+        onclick={() => controller.refresh()}><RefreshCwIcon /></Button
+      >
+    </header>
+    {#if viewState.status === "failed"}<p role="status">
+        Blame is unavailable. Refresh to try again.
+      </p>{/if}
+    <div class="blame-body">
+      {#if viewState.contents === undefined && viewState.busy}<RepositorySkeleton
+          kind="blame"
+          label="Loading file blame…"
+        />
+      {:else if viewState.contents !== undefined}
+        <RepositoryBlameView
+          contents={viewState.contents}
+          path={viewState.selection?.path ?? ""}
+          view={viewState}
+          {onOpen}
+          {commitStats}
+          {wrap}
+        />
+      {/if}
+    </div>
+  </section>
+</RepositoryShell>
+
+<style>
+  .blame-panel {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    min-height: 0;
+    min-width: 0;
+    font-size: 0.875rem;
+  }
+  header {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    padding: 0.5rem 0.75rem;
+    border-bottom: 1px solid var(--border);
+  }
+  .file-title {
+    flex: 1;
+    min-width: 0;
+  }
+  header :global(.wrap-toggle) {
+    width: 1.75rem;
+    min-width: 1.75rem;
+    height: 1.75rem;
+    padding: 0;
+  }
+  p {
+    padding: 0.75rem;
+    margin: 0;
+    color: var(--muted-foreground);
+  }
+  .blame-body {
+    flex: 1;
+    min-height: 0;
+    min-width: 0;
+  }
+</style>

package/dist/repository/components/blame/RepositoryBlamePanel.svelte.d.ts

@@ -0,0 +1,13 @@
+import type { BlameController } from "../../controllers/blame-controller.js";
+type $$ComponentProps = {
+    controller: BlameController;
+    copyText(value: string): Promise<void>;
+    onOpen(commit: string): void;
+    commitStats?: Readonly<Record<string, {
+        additions: number;
+        deletions: number;
+    }>>;
+};
+declare const RepositoryBlamePanel: import("svelte").Component<$$ComponentProps, {}, "">;
+type RepositoryBlamePanel = ReturnType<typeof RepositoryBlamePanel>;
+export default RepositoryBlamePanel;

package/dist/repository/components/blame/RepositoryBlameRows.svelte

@@ -0,0 +1,137 @@
+<script lang="ts" generics="Row">
+  import {
+    createVirtualizer,
+    type VirtualItem,
+  } from "@tanstack/svelte-virtual";
+  import { get } from "svelte/store";
+  import { onDestroy, untrack, type Snippet } from "svelte";
+  let {
+    rows,
+    viewport,
+    getKey,
+    estimateSize,
+    row,
+    layoutKey,
+  }: {
+    rows: readonly Row[];
+    viewport?: HTMLElement | null;
+    getKey: (row: Row) => string;
+    estimateSize: (row: Row | undefined) => number;
+    row: Snippet<[Row]>;
+    layoutKey: boolean;
+  } = $props();
+  const virtualizer = createVirtualizer<HTMLElement, HTMLDivElement>({
+    count: 0,
+    getScrollElement: () => viewport ?? null,
+    getItemKey: (index) => getKey(rows[index]!),
+    estimateSize: (index) => estimateSize(rows[index]),
+    enabled: false,
+    overscan: 2,
+    useAnimationFrameWithResizeObserver: true,
+  });
+  let visibleRows = $state.raw<VirtualItem[]>([]);
+  let totalSize = $state(0);
+  // Keep measurement notifications attached to the pane, not a row effect.
+  const unsubscribe = untrack(() =>
+    virtualizer.subscribe((instance) => {
+      visibleRows = instance.getVirtualItems();
+      totalSize = instance.getTotalSize();
+    }),
+  );
+  onDestroy(unsubscribe);
+  const instance = get(virtualizer);
+  let list = $state<HTMLDivElement>();
+  function resizeRow(node: HTMLDivElement) {
+    instance.resizeItem(
+      Number(node.dataset.index),
+      Math.round(node.getBoundingClientRect().height),
+    );
+  }
+  function measureRow(node: HTMLDivElement) {
+    let frame = 0;
+    const observer = new ResizeObserver(() => {
+      cancelAnimationFrame(frame);
+      frame = requestAnimationFrame(() => resizeRow(node));
+    });
+    observer.observe(node);
+    resizeRow(node);
+    return {
+      destroy() {
+        cancelAnimationFrame(frame);
+        observer.disconnect();
+      },
+    };
+  }
+  $effect(() => {
+    const nextRows = rows,
+      nextViewport = viewport;
+    untrack(() =>
+      instance.setOptions({
+        count: nextRows.length,
+        getScrollElement: () => nextViewport ?? null,
+        getItemKey: (index) => getKey(nextRows[index]!),
+        estimateSize: (index) => estimateSize(nextRows[index]),
+        enabled: nextViewport != null,
+        overscan: 2,
+      }),
+    );
+  });
+  $effect(() => {
+    void rows;
+    void layoutKey;
+    const node = viewport,
+      host = list;
+    if (!node || !host) return;
+    let frame = 0;
+    const remeasure = () => {
+      cancelAnimationFrame(frame);
+      frame = requestAnimationFrame(() => {
+        instance.measure();
+        for (const row of host.querySelectorAll<HTMLDivElement>(
+          "[data-blame-row]",
+        ))
+          resizeRow(row);
+      });
+    };
+    const observer = new ResizeObserver(remeasure);
+    observer.observe(node);
+    remeasure();
+    return () => {
+      cancelAnimationFrame(frame);
+      observer.disconnect();
+    };
+  });
+</script>
+
+<div
+  bind:this={list}
+  class="blame-virtual-rows"
+  style:height={`${totalSize}px`}
+>
+  {#each visibleRows as virtualRow (virtualRow.key)}
+    {@const item = rows[virtualRow.index]}
+    {#if item}
+      <div
+        class="blame-virtual-row"
+        style:top={`${virtualRow.start}px`}
+        data-blame-row
+        data-index={virtualRow.index}
+        use:measureRow
+      >
+        {@render row(item)}
+      </div>
+    {/if}
+  {/each}
+</div>
+
+<style>
+  .blame-virtual-rows {
+    position: relative;
+    width: 100%;
+  }
+  .blame-virtual-row {
+    position: absolute;
+    inset-inline: 0;
+    width: 100%;
+  }
+</style>

package/dist/repository/components/blame/RepositoryBlameRows.svelte.d.ts

@@ -0,0 +1,32 @@
+import { type Snippet } from "svelte";
+declare function $$render<Row>(): {
+    props: {
+        rows: readonly Row[];
+        viewport?: HTMLElement | null;
+        getKey: (row: Row) => string;
+        estimateSize: (row: Row | undefined) => number;
+        row: Snippet<[Row]>;
+        layoutKey: boolean;
+    };
+    exports: {};
+    bindings: "";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<Row> {
+    props(): ReturnType<typeof $$render<Row>>['props'];
+    events(): ReturnType<typeof $$render<Row>>['events'];
+    slots(): ReturnType<typeof $$render<Row>>['slots'];
+    bindings(): "";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <Row>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<Row>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<Row>['props']>, ReturnType<__sveltets_Render<Row>['events']>, ReturnType<__sveltets_Render<Row>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<Row>['bindings']>;
+    } & ReturnType<__sveltets_Render<Row>['exports']>;
+    <Row>(internal: unknown, props: ReturnType<__sveltets_Render<Row>['props']> & {}): ReturnType<__sveltets_Render<Row>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+declare const RepositoryBlameRows: $$IsomorphicComponent;
+type RepositoryBlameRows<Row> = InstanceType<typeof RepositoryBlameRows<Row>>;
+export default RepositoryBlameRows;

package/dist/repository/components/blame/RepositoryBlameView.svelte

@@ -0,0 +1,121 @@
+<script lang="ts">
+  import {
+    tokenizeAsync,
+    type TokenLine,
+  } from "@lapismd/design-core/shadcn/code-block";
+  import { resolveDiffLanguage } from "@lapismd/design-core/diff";
+  import { ScrollArea } from "@lapismd/design-core/shadcn/scroll-area";
+  import type { BlameState } from "../../controllers/blame-model.js";
+  import RepositoryBlameRows from "./RepositoryBlameRows.svelte";
+  import RepositoryBlameGroup from "./RepositoryBlameGroup.svelte";
+  import {
+    blameChunks,
+    sourceLines,
+  } from "../../controllers/blame-chunks.js";
+  let {
+    contents,
+    path,
+    view,
+    now,
+    onOpen,
+    commitStats = {},
+    wrap = true,
+  }: {
+    contents: string;
+    path: string;
+    view: BlameState;
+    now?: number;
+    onOpen?: (commit: string) => void;
+    commitStats?: Readonly<
+      Record<string, { additions: number; deletions: number }>
+    >;
+    wrap?: boolean;
+  } = $props();
+  const lines = $derived(sourceLines(contents));
+  const chunks = $derived(
+    blameChunks(lines.length, view.progress?.ranges ?? []),
+  );
+  const columns = $derived(
+    lines.reduce(
+      (max, line) => Math.max(max, line.replaceAll("\t", "    ").length),
+      0,
+    ),
+  );
+  let viewport = $state<HTMLElement | null>(null);
+  let tokens = $state<TokenLine[]>([]);
+  $effect(() => {
+    const abort = new AbortController();
+    const code = contents;
+    const language = resolveDiffLanguage(path) ?? "plaintext";
+    tokens = [];
+    void (async () => {
+      const value = await tokenizeAsync(code, language, abort.signal);
+      if (!abort.signal.aborted) tokens = value;
+    })().catch(() => {
+      /* Highlighting is optional; plain source remains usable. */
+    });
+    return () => abort.abort();
+  });
+</script>
+
+<div class="store-blame">
+  <ScrollArea
+    bind:viewportRef={viewport}
+    orientation="both"
+    style="height:100%;min-height:0;min-width:0"
+    role="region"
+    aria-label={`Blame for ${path}`}
+  >
+    {#if lines.length === 0}
+      <p class="store-blame__empty">This file has no lines to attribute.</p>
+    {:else}
+      <div
+        class="store-blame__track"
+        style:width={wrap ? "100%" : `max(100%, calc(28rem + ${columns}ch))`}
+        style:--blame-line-digits={String(lines.length).length}
+      >
+        <RepositoryBlameRows
+          rows={chunks}
+          {viewport}
+          layoutKey={wrap}
+          getKey={(chunk) => String(chunk.start)}
+          estimateSize={(chunk) => (chunk ? chunk.end - chunk.start : 1) * 28}
+        >
+          {#snippet row(chunk)}
+            <RepositoryBlameGroup
+              {chunk}
+              {lines}
+              {tokens}
+              {wrap}
+              {now}
+              {onOpen}
+              commit={chunk.commitId
+                ? view.progress?.commits[chunk.commitId]
+                : undefined}
+              pending={view.status === "loading"}
+              stats={chunk.commitId ? commitStats[chunk.commitId] : undefined}
+            />
+          {/snippet}
+        </RepositoryBlameRows>
+      </div>
+    {/if}
+  </ScrollArea>
+</div>
+
+<style>
+  .store-blame {
+    container-type: inline-size;
+    height: 100%;
+    min-height: 0;
+    position: relative;
+    font-size: var(--community-text-secondary, 0.875rem);
+  }
+  .store-blame__track {
+    min-width: 100%;
+    font-family: var(--font-mono, monospace);
+  }
+  .store-blame__empty {
+    padding: 1rem;
+    color: var(--muted-foreground);
+  }
+</style>

package/dist/repository/components/blame/RepositoryBlameView.svelte.d.ts

@@ -0,0 +1,16 @@
+import type { BlameState } from "../../controllers/blame-model.js";
+type $$ComponentProps = {
+    contents: string;
+    path: string;
+    view: BlameState;
+    now?: number;
+    onOpen?: (commit: string) => void;
+    commitStats?: Readonly<Record<string, {
+        additions: number;
+        deletions: number;
+    }>>;
+    wrap?: boolean;
+};
+declare const RepositoryBlameView: import("svelte").Component<$$ComponentProps, {}, "">;
+type RepositoryBlameView = ReturnType<typeof RepositoryBlameView>;
+export default RepositoryBlameView;

package/dist/repository/components/blame/blame-view.d.ts

@@ -0,0 +1,16 @@
+import { View, type WorkspaceLeaf } from "@lapis-notes/api";
+import type { RepositoryPlugin } from "../repository-plugin.js";
+export declare class BlameView extends View {
+    #private;
+    private readonly plugin;
+    constructor(leaf: WorkspaceLeaf, plugin: RepositoryPlugin);
+    getViewType(): string;
+    getDisplayText(): string;
+    getIcon(): string;
+    getState(): Record<string, unknown>;
+    setState(state: Record<string, unknown>): Promise<void>;
+    protected onOpen(): Promise<void>;
+    protected onClose(): Promise<void>;
+    onload(): void;
+    onunload(): void;
+}