@lapis-notes/history 0.1.4 → 0.2.0

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;
+}

package/dist/repository/components/blame/blame-view.js

@@ -0,0 +1,73 @@
+import { historySource, } from "../../controllers/history-source.js";
+import { View } from "@lapis-notes/api";
+import { mount, unmount } from "svelte";
+import RepositoryBlamePanel from "./RepositoryBlamePanel.svelte";
+export class BlameView extends View {
+    plugin;
+    #source = "backup";
+    #selection;
+    #controller;
+    #component;
+    constructor(leaf, plugin) {
+        super(leaf);
+        this.plugin = plugin;
+    }
+    getViewType() {
+        return "repository-file-blame";
+    }
+    getDisplayText() {
+        return this.#selection ? `Blame · ${this.#selection.path}` : "File blame";
+    }
+    getIcon() {
+        return "git-merge-conflict";
+    }
+    getState() {
+        return { ...this.#selection, source: this.#source };
+    }
+    async setState(state) {
+        const source = historySource(state);
+        if (this.#controller && source !== this.#source)
+            throw new Error("Open a separate tab to change history source");
+        this.#source = source;
+        this.#selection =
+            typeof state.operation === "string" &&
+                typeof state.commit === "string" &&
+                typeof state.path === "string"
+                ? { operation: state.operation, commit: state.commit, path: state.path }
+                : undefined;
+        if (this.#controller && this.#selection)
+            await this.#controller.open(this.#selection);
+        await super.setState(state);
+    }
+    async onOpen() { }
+    async onClose() { }
+    onload() {
+        const controller = (this.#controller = this.plugin.createBlameController(this.#source));
+        this.#component = mount(RepositoryBlamePanel, {
+            target: this.containerEl,
+            props: {
+                controller,
+                copyText: (value) => this.plugin.copyIdentifier(value),
+                onOpen: (commit) => {
+                    const operation = controller.state.selection?.operation;
+                    if (operation)
+                        void this.plugin
+                            .open(operation, commit, this.#source)
+                            .catch((error) => this.plugin.report(error));
+                },
+            },
+        });
+        if (this.#selection)
+            void controller.open(this.#selection);
+    }
+    onunload() {
+        if (this.#component)
+            void unmount(this.#component);
+        this.#component = undefined;
+        if (this.#controller)
+            void this.plugin
+                .release(this.#controller)
+                .catch((error) => this.plugin.report(error));
+        this.#controller = undefined;
+    }
+}

package/dist/repository/components/blame/editor-actions.d.ts

@@ -0,0 +1,3 @@
+import type { RepositoryPlugin } from "../repository-plugin.js";
+/** The enabled plugin owns editor contributions and their read-only controllers. */
+export declare function registerBlameEditorActions(plugin: RepositoryPlugin): void;

package/dist/repository/components/blame/editor-actions.js

@@ -0,0 +1,53 @@
+import { FileView } from "@lapis-notes/api";
+/** The enabled plugin owns editor contributions and their read-only controllers. */
+export function registerBlameEditorActions(plugin) {
+    const app = plugin.app;
+    const actions = new Map();
+    let disposed = false;
+    const sync = () => {
+        if (disposed)
+            return;
+        app.workspace.iterateRootLeaves((leaf) => {
+            const view = leaf.view;
+            if (!(view instanceof FileView))
+                return;
+            const installed = actions.get(view);
+            if (installed && view.actions.includes(installed))
+                return;
+            view.addAction("git-merge-conflict", "Blame file", async () => {
+                if (disposed || !view.file)
+                    return;
+                const path = view.file.path;
+                const controller = plugin.createFileHistoryController();
+                try {
+                    await controller.follow(path);
+                    const { operation, workspaceCommit: commit } = controller.state;
+                    if (!disposed && view.file?.path === path && operation && commit)
+                        await plugin.openBlame(operation, commit, path);
+                }
+                catch (error) {
+                    if (!disposed)
+                        plugin.report(error);
+                }
+                finally {
+                    await plugin.release(controller);
+                }
+            });
+            actions.set(view, view.actions.at(-1));
+        });
+    };
+    const fileOpen = app.workspace.on("file-open", sync);
+    const leafChange = app.workspace.on("active-leaf-change", sync);
+    const layoutChange = app.workspace.on("layout-change", sync);
+    plugin.register(() => {
+        disposed = true;
+        app.workspace.offref(fileOpen);
+        app.workspace.offref(leafChange);
+        app.workspace.offref(layoutChange);
+        for (const [view, action] of actions)
+            view.actions = view.actions.filter((value) => value !== action);
+        actions.clear();
+    });
+    app.workspace.onLayoutReady(sync);
+    sync();
+}

package/dist/repository/components/conflicts/RepositoryConflictActions.svelte

@@ -0,0 +1,83 @@
+<script lang="ts">
+  import { Button } from "@lapismd/design-core/shadcn/button";
+  import Trash2Icon from "@lucide/svelte/icons/trash-2";
+  import FileCheck2Icon from "@lucide/svelte/icons/file-check-2";
+  import EyeIcon from "@lucide/svelte/icons/eye";
+  import ArrowLeftIcon from "@lucide/svelte/icons/arrow-left";
+  import CheckIcon from "@lucide/svelte/icons/check";
+  let {
+    preview,
+    resolution,
+    selectedCount,
+    pathCount,
+    onDelete,
+    onStage,
+    onPreview,
+    onBack,
+  }: {
+    preview: boolean;
+    resolution?: "delete" | "uploaded_file";
+    selectedCount: number;
+    pathCount: number;
+    onDelete(): void;
+    onStage(): void;
+    onPreview(): void;
+    onBack(): void;
+  } = $props();
+</script>
+
+<div
+  class="store-conflict-editor__actions"
+  role="group"
+  aria-label="Conflict actions"
+>
+  {#if !preview}
+    <Button
+      type="button"
+      size="sm"
+      variant={resolution === "delete" ? "destructive" : "outline"}
+      aria-label="Delete path"
+      title="Delete path"
+      aria-pressed={resolution === "delete"}
+      onclick={onDelete}
+    >
+      <Trash2Icon data-icon="inline-start" aria-hidden="true" />
+      <span class="store-conflict-editor__action-label">Delete path</span>
+    </Button>
+    {#if resolution === "uploaded_file"}
+      <span class="store-conflict-editor__staged" role="status"
+        >Merged file staged</span
+      >
+    {/if}
+    <Button
+      type="button"
+      size="sm"
+      variant="outline"
+      aria-label="Stage merged file"
+      title="Stage merged file"
+      onclick={onStage}
+    >
+      <FileCheck2Icon data-icon="inline-start" aria-hidden="true" />
+      <span class="store-conflict-editor__action-label">Stage merged file</span>
+    </Button>
+    <Button
+      type="button"
+      size="sm"
+      disabled={selectedCount === 0}
+      onclick={onPreview}
+    >
+      <EyeIcon data-icon="inline-start" aria-hidden="true" />Preview {selectedCount}/{pathCount}
+    </Button>
+  {:else}
+    <Button type="button" size="sm" variant="outline" onclick={onBack}>
+      <ArrowLeftIcon data-icon="inline-start" aria-hidden="true" />Back
+    </Button>
+    <Button
+      size="sm"
+      disabled
+      title="Native conflict commands are not connected in this preview"
+    >
+      <CheckIcon data-icon="inline-start" aria-hidden="true" />Apply resolution
+    </Button>
+  {/if}
+</div>

package/dist/repository/components/conflicts/RepositoryConflictActions.svelte.d.ts

@@ -0,0 +1,13 @@
+type $$ComponentProps = {
+    preview: boolean;
+    resolution?: "delete" | "uploaded_file";
+    selectedCount: number;
+    pathCount: number;
+    onDelete(): void;
+    onStage(): void;
+    onPreview(): void;
+    onBack(): void;
+};
+declare const RepositoryConflictActions: import("svelte").Component<$$ComponentProps, {}, "">;
+type RepositoryConflictActions = ReturnType<typeof RepositoryConflictActions>;
+export default RepositoryConflictActions;

package/dist/repository/components/conflicts/RepositoryConflictBody.svelte

@@ -0,0 +1,93 @@
+<script lang="ts">
+  import { AppShell, AppShellController } from "@lapismd/design-core/shell";
+  import type { FileListingViewMode } from "@lapismd/design-core/diff";
+  import { onDestroy, type Snippet } from "svelte";
+  import RepositoryConflictFileTree from "./RepositoryConflictFileTree.svelte";
+
+  let {
+    height,
+    files,
+    activePath,
+    browserOpen,
+    compact,
+    locked,
+    onSelect,
+    children,
+  }: {
+    height: number;
+    files: readonly { path: string }[];
+    activePath: string;
+    browserOpen: boolean;
+    compact: boolean;
+    locked: boolean;
+    onSelect: (path: string) => void;
+    children: Snippet;
+  } = $props();
+  const shell = new AppShellController();
+  onDestroy(() => void shell.dispose());
+  let mode = $state<FileListingViewMode>("tree");
+  let collapsed = $state(new Set<string>());
+  function toggleDirectory(path: string) {
+    const next = new Set(collapsed);
+    if (!next.delete(path)) next.add(path);
+    collapsed = next;
+  }
+</script>
+
+<AppShell.Root
+  controller={shell}
+  displayMode="desktop"
+  desktopMinMainWidth={0}
+  class="store-conflict-editor__body-shell"
+  style={`--ui-shell-height:${height}px`}
+>
+  <AppShell.Main>
+    <AppShell.Body
+      layout="regions"
+      element="section"
+      label="Conflict editor body"
+    >
+      <AppShell.Body.Sidebar
+        id="conflict-file-browser"
+        panelId="conflict-file-browser"
+        side="left"
+        label="Conflict file browser"
+        open={browserOpen}
+        scrollbarVisibility="hover"
+        class="community-projects__file-tree-region"
+        style={`--ui-shell-body-sidebar-width: ${compact ? "100%" : "15rem"}`}
+      >
+        <div
+          class="store-conflict-editor__file-browser"
+          inert={locked}
+          aria-disabled={locked}
+        >
+          <RepositoryConflictFileTree
+            {files}
+            {mode}
+            collapsedDirectoryPaths={collapsed}
+            selectedPath={activePath}
+            onSelectPath={(path) => {
+              if (!locked) onSelect(path);
+            }}
+            onModeChange={(next) => (mode = next)}
+            onDirectoryToggle={toggleDirectory}
+          />
+        </div>
+      </AppShell.Body.Sidebar>
+      <AppShell.Body.Content
+        label="Conflict merge content"
+        scrollbarVisibility="hover"
+        class="store-conflict-editor__content"
+        hidden={compact && browserOpen}
+      >
+        <div
+          class="store-conflict-editor__content-body"
+          style={`height:${height}px`}
+        >
+          {@render children()}
+        </div>
+      </AppShell.Body.Content>
+    </AppShell.Body>
+  </AppShell.Main>
+</AppShell.Root>

package/dist/repository/components/conflicts/RepositoryConflictBody.svelte.d.ts

@@ -0,0 +1,16 @@
+import { type Snippet } from "svelte";
+type $$ComponentProps = {
+    height: number;
+    files: readonly {
+        path: string;
+    }[];
+    activePath: string;
+    browserOpen: boolean;
+    compact: boolean;
+    locked: boolean;
+    onSelect: (path: string) => void;
+    children: Snippet;
+};
+declare const RepositoryConflictBody: import("svelte").Component<$$ComponentProps, {}, "">;
+type RepositoryConflictBody = ReturnType<typeof RepositoryConflictBody>;
+export default RepositoryConflictBody;