@lapis-notes/history 0.1.4 → 0.2.0

package/dist/repository/components/RepositoryOperations.svelte

@@ -0,0 +1,199 @@
+<script lang="ts">
+  import type { HistorySourcePicker } from "../controllers/history-source.js";
+  import RepositorySkeleton from "./RepositorySkeleton.svelte";
+  import { repositoryWorkspaces } from "../controllers/workspaces.js";
+  import { onMount, onDestroy, untrack } from "svelte";
+  import { Button } from "@lapismd/design-core/shadcn/button";
+  import RepositoryLogHeader from "./RepositoryLogHeader.svelte";
+  import * as ColumnCanvas from "@lapismd/design-core/shadcn/column-canvas";
+  import type { OperationController } from "../controllers/operation-controller.js";
+  import { initialOperationState } from "../controllers/operation-state.js";
+  import { operationRows } from "../controllers/graph/model.js";
+  import { createLogCanvas } from "../controllers/log-canvas.js";
+  import RepositoryOperationFiles from "./RepositoryOperationFiles.svelte";
+  import RepositoryOperationColumn from "./RepositoryOperationColumn.svelte";
+  import RepositoryShell from "./RepositoryShell.svelte";
+  import RepositoryGraph from "./RepositoryGraph.svelte";
+  let {
+    controller,
+    sources,
+    initialOperation,
+    copyText,
+    onHistory,
+  }: {
+    sources?: HistorySourcePicker;
+    controller: OperationController;
+    initialOperation?: string;
+    copyText(value: string): Promise<void>;
+    onHistory?(operation: string): void;
+  } = $props();
+  let state = $state(initialOperationState());
+  const pins = $derived([
+    ...new Set([...state.heads, ...(state.operation ? [state.operation] : [])]),
+  ]);
+  const rows = $derived(operationRows(state.nodes));
+  const selection = $derived(
+    `${state.selected?.id ?? ""}/${state.files.path ?? ""}`,
+  );
+  const canvas = createLogCanvas();
+  let selectedOperation: string | undefined;
+  onDestroy(() => void canvas.dispose());
+  $effect(() => {
+    selection;
+    const id = untrack(() => state.selected?.id);
+    const path = untrack(() => state.files.path);
+    untrack(() => {
+      canvas.clear();
+      if (id) {
+        canvas.select(0, id);
+      }
+      if (id && id !== selectedOperation) canvas.open("diff");
+      selectedOperation = id;
+      if (path) {
+        canvas.select(1, path);
+        canvas.open("diff");
+      } else if (!id) canvas.close("diff");
+    });
+  });
+  onMount(() => {
+    const unsubscribe = controller.subscribe((value) => (state = value));
+    void controller.refresh(initialOperation);
+    return unsubscribe;
+  });
+</script>
+
+<RepositoryShell>
+  <section
+    class="repository-operations"
+    aria-label="Repository operation log"
+    aria-busy={state.busy}
+  >
+    <div class="operation-columns">
+      <ColumnCanvas.Root controller={canvas} aria-label="Operation log columns">
+        <ColumnCanvas.Column
+          id="revisions"
+          columnTitle="Op Log"
+          aria-label="Operations"
+        >
+          <RepositoryLogHeader
+            {sources}
+            {copyText}
+            nodes={state.nodes}
+            workspaces={repositoryWorkspaces(state.workspaceCommits)}
+            workspace={state.workspace}
+            onWorkspaceSelect={(next) => void controller.selectWorkspace(next)}
+            onWorkspaceOpen={() => void controller.loadWorkspaces()}
+            title="Op Log"
+            count={state.nodes.length}
+            operations={pins}
+            operation={state.operation}
+            selectionLabel="Pinned operation"
+            busy={state.busy}
+            onSelect={(operation) => controller.selectPin(operation)}
+            onRefresh={() => controller.refresh()}
+          />
+          <ColumnCanvas.Body>
+            {#if state.phase === "loading"}<RepositorySkeleton
+                label="Preparing operation log…"
+              />
+            {:else if state.phase === "unavailable"}<p role="status">
+                Operation log is unavailable for this vault. Refresh to try
+                again.
+              </p>
+            {:else if !state.headsReady}<RepositorySkeleton
+                label="Loading repository operations…"
+              />
+            {:else if !state.operation}<p role="status">
+                {state.heads.length > 1
+                  ? "Choose an operation to inspect its ancestry."
+                  : "No repository operations available."}
+              </p>{/if}
+            {#if state.snapshot}
+              {#if state.selected && !state.nodes.some((node) => node.id === state.selected?.id)}
+                <section aria-label="Selected operation outside loaded graph">
+                  <p>The selected operation is outside this graph page.</p>
+                  <RepositoryOperationFiles
+                    {copyText}
+                    commits={state.commits}
+                    onHistory={onHistory && state.selected
+                      ? () => onHistory?.(state.selected!.id)
+                      : undefined}
+                    {state}
+                    {controller}
+                    onOpenDiff={() => canvas.open("diff")}
+                    onOpenDetails={() => canvas.open("diff")}
+                  />
+                </section>
+              {/if}
+              {#if !state.ready && !state.busy}<p role="status">
+                  Operations are unavailable. Refresh to try again.
+                </p>
+              {:else if state.ready && !state.nodes.length}<p>
+                  No operations in this history.
+                </p>{/if}
+              <RepositoryGraph
+                operationTitles
+                {copyText}
+                commitLabel="operation ID"
+                revisions={rows}
+                selectedId={state.selected?.id}
+                label="Operation graph"
+                onSelect={(id) => {
+                  const node = state.nodes.find((item) => item.id === id);
+                  if (node)
+                    void (state.selected?.id === id
+                      ? controller.clearSelection()
+                      : controller.select(node));
+                }}
+              >
+                {#snippet selectedFiles()}<RepositoryOperationFiles
+                    {copyText}
+                    commits={state.commits}
+                    onHistory={onHistory && state.selected
+                      ? () => onHistory?.(state.selected!.id)
+                      : undefined}
+                    {state}
+                    {controller}
+                    onOpenDiff={() => canvas.open("diff")}
+                    onOpenDetails={() => canvas.open("diff")}
+                  />{/snippet}
+              </RepositoryGraph>
+              {#if state.next}<Button
+                  size="sm"
+                  disabled={state.busy}
+                  onclick={() => controller.more()}>More operations</Button
+                >{/if}
+              {#if state.nodes.length === 200}<p>
+                  Showing the first 200 operations.
+                </p>{/if}
+            {/if}
+          </ColumnCanvas.Body>
+        </ColumnCanvas.Column>
+        <RepositoryOperationColumn {state} {controller} {copyText} />
+      </ColumnCanvas.Root>
+    </div>
+  </section>
+</RepositoryShell>
+
+<style>
+  .repository-operations {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    min-height: 0;
+    background: var(--ui-workspace-view-background, var(--background));
+    color: var(--ui-workspace-view-foreground, var(--foreground));
+    font-size: 0.875rem;
+  }
+  .operation-columns {
+    display: block;
+    width: 100%;
+    min-width: 0;
+    min-height: 0;
+    flex: 1;
+    overflow: hidden;
+  }
+  p {
+    padding: 0.75rem;
+  }
+</style>

package/dist/repository/components/RepositoryOperations.svelte.d.ts

@@ -0,0 +1,12 @@
+import type { HistorySourcePicker } from "../controllers/history-source.js";
+import type { OperationController } from "../controllers/operation-controller.js";
+type $$ComponentProps = {
+    sources?: HistorySourcePicker;
+    controller: OperationController;
+    initialOperation?: string;
+    copyText(value: string): Promise<void>;
+    onHistory?(operation: string): void;
+};
+declare const RepositoryOperations: import("svelte").Component<$$ComponentProps, {}, "">;
+type RepositoryOperations = ReturnType<typeof RepositoryOperations>;
+export default RepositoryOperations;

package/dist/repository/components/RepositoryPanel.svelte

@@ -0,0 +1,207 @@
+<script lang="ts">
+  import type { HistorySourcePicker } from "../controllers/history-source.js";
+  import RepositorySkeleton from "./RepositorySkeleton.svelte";
+  import RepositoryConflictResolution from "./conflicts/RepositoryConflictResolution.svelte";
+  import { repositoryWorkspaces } from "../controllers/workspaces.js";
+  import { onMount, onDestroy, untrack } from "svelte";
+  import * as ColumnCanvas from "@lapismd/design-core/shadcn/column-canvas";
+  import { createLogCanvas } from "../controllers/log-canvas.js";
+  import RepositoryLogHeader from "./RepositoryLogHeader.svelte";
+  import type { HistoryController } from "../controllers/history-controller.js";
+  import { initialHistoryState } from "../controllers/history-state.js";
+  import RepositoryRevisions from "./RepositoryRevisions.svelte";
+  import RepositoryDiffColumn from "./RepositoryDiffColumn.svelte";
+  import RepositoryShell from "./RepositoryShell.svelte";
+  import RepositoryRestoreDialog from "./RepositoryRestoreDialog.svelte";
+  import type { RestoreController } from "../controllers/restore.js";
+  import { openHistoryRevision } from "../controllers/open-history-revision.js";
+  let {
+    controller,
+    sources,
+    initialOperation,
+    initialRevision,
+    initialLoad,
+    copyText,
+    restore,
+  }: {
+    sources?: HistorySourcePicker;
+    controller: HistoryController;
+    initialOperation?: string;
+    initialRevision?: string;
+    initialLoad?: Promise<void>;
+    copyText(value: string): Promise<void>;
+    restore?: RestoreController;
+  } = $props();
+  let snapshot = $state(initialHistoryState());
+  let conflictsOpen = $state(false);
+  const selectionContext = $derived(
+    `${snapshot.operation ?? ""}/${snapshot.revision?.id ?? ""}`,
+  );
+  $effect(() => {
+    selectionContext;
+    untrack(() => {
+      conflictsOpen = false;
+    });
+  });
+  const operations = $derived([
+    ...new Set([
+      ...snapshot.heads,
+      ...(snapshot.operation ? [snapshot.operation] : []),
+    ]),
+  ]);
+  const canvas = createLogCanvas();
+  onDestroy(() => void canvas.dispose());
+  const selection = $derived(
+    `${snapshot.revision?.id ?? ""}/${snapshot.path ?? ""}`,
+  );
+  const restoreCheckpoint = $derived(
+    snapshot.revision
+      ? snapshot.revision.workspaces.length &&
+        snapshot.revision.parents.length === 1
+        ? snapshot.revision.parents[0]
+        : snapshot.revision.id
+      : undefined,
+  );
+  $effect(() => {
+    selection;
+    const revision = untrack(() => snapshot.revision?.id);
+    const path = untrack(() => snapshot.path);
+    untrack(() => {
+      canvas.clear();
+      if (revision) {
+        canvas.select(0, revision);
+      }
+      if (path) {
+        canvas.select(1, path);
+        canvas.open("diff");
+      } else canvas.close("diff");
+    });
+  });
+  onMount(() => {
+    let mounted = true;
+    const unsubscribe = controller.subscribe((value) => (snapshot = value));
+    void (initialLoad ?? controller.refresh(initialOperation)).then(() => {
+      if (mounted && initialRevision)
+        return openHistoryRevision(controller, initialRevision);
+    });
+    return () => {
+      mounted = false;
+      unsubscribe();
+    };
+  });
+</script>
+
+<RepositoryShell>
+  <section
+    class="repository-panel"
+    aria-label="Repository history"
+    aria-busy={snapshot.busy}
+  >
+    <div class="repository-columns">
+      <ColumnCanvas.Root
+        controller={canvas}
+        aria-label="Repository history columns"
+      >
+        <ColumnCanvas.Column
+          id="revisions"
+          columnTitle="JJ Log"
+          aria-label="Revisions"
+        >
+          <RepositoryLogHeader
+            {sources}
+            {copyText}
+            workspaces={repositoryWorkspaces(snapshot.commits)}
+            workspace={snapshot.workspace}
+            onWorkspaceSelect={(next) => void controller.selectWorkspace(next)}
+            title="JJ Log"
+            count={snapshot.commits.length}
+            {operations}
+            operation={snapshot.operation}
+            busy={snapshot.busy}
+            onSelect={(operation) => controller.selectOperation(operation)}
+            onRefresh={() => controller.refresh()}
+          />
+          <ColumnCanvas.Body>
+            {#if snapshot.phase === "loading"}<RepositorySkeleton
+                label="Preparing repository history…"
+              />
+            {:else if snapshot.phase === "unavailable"}<p role="status">
+                Repository history is unavailable for this vault. Refresh to try
+                again.
+              </p>
+            {:else if !snapshot.headsReady}<RepositorySkeleton
+                label="Loading repository operations…"
+              />
+            {:else if !snapshot.operation}<p role="status">
+                {snapshot.heads.length > 1
+                  ? "Choose an operation to inspect its history."
+                  : "No repository operations available."}
+              </p>
+            {/if}
+
+            {#if snapshot.snapshot}
+              <RepositoryRevisions
+                state={snapshot}
+                {controller}
+                {copyText}
+                onOpenDiff={() => canvas.open("diff")}
+                onResolveConflicts={() => (conflictsOpen = true)}
+                onRestoreVault={restore?.service.previewVault &&
+                restoreCheckpoint
+                  ? () => restore.prepareVault(restoreCheckpoint!)
+                  : undefined}
+              />
+            {/if}
+          </ColumnCanvas.Body>
+        </ColumnCanvas.Column>
+        <RepositoryDiffColumn
+          state={snapshot}
+          {controller}
+          onRestore={restore && snapshot.revision && snapshot.path
+            ? () => restore.prepare(restoreCheckpoint!, snapshot.path!)
+            : undefined}
+        />
+      </ColumnCanvas.Root>
+    </div>
+  </section>
+  {#snippet surface()}
+    {#if snapshot.revision?.conflicted}
+      {#key snapshot.revision.id}
+        <RepositoryConflictResolution
+          open={conflictsOpen}
+          conflicts={snapshot.conflicts}
+          ready={snapshot.conflictsReady}
+          busy={snapshot.busy}
+          onLoad={() => void controller.loadConflicts()}
+          onClose={() => (conflictsOpen = false)}
+        />
+      {/key}
+    {/if}
+  {/snippet}
+</RepositoryShell>
+{#if restore}<RepositoryRestoreDialog controller={restore} />{/if}
+
+<style>
+  .repository-panel {
+    container: repository-history / inline-size;
+    height: 100%;
+    min-height: 0;
+    display: flex;
+    flex-direction: column;
+    color: var(--ui-workspace-view-foreground, var(--foreground));
+    background: var(--ui-workspace-view-background, var(--background));
+    font-size: 0.875rem;
+  }
+  p {
+    margin: 0;
+    padding: 1rem;
+  }
+  .repository-columns {
+    display: block;
+    width: 100%;
+    min-width: 0;
+    min-height: 0;
+    flex: 1;
+    overflow: hidden;
+  }
+</style>

package/dist/repository/components/RepositoryPanel.svelte.d.ts

@@ -0,0 +1,15 @@
+import type { HistorySourcePicker } from "../controllers/history-source.js";
+import type { HistoryController } from "../controllers/history-controller.js";
+import type { RestoreController } from "../controllers/restore.js";
+type $$ComponentProps = {
+    sources?: HistorySourcePicker;
+    controller: HistoryController;
+    initialOperation?: string;
+    initialRevision?: string;
+    initialLoad?: Promise<void>;
+    copyText(value: string): Promise<void>;
+    restore?: RestoreController;
+};
+declare const RepositoryPanel: import("svelte").Component<$$ComponentProps, {}, "">;
+type RepositoryPanel = ReturnType<typeof RepositoryPanel>;
+export default RepositoryPanel;

package/dist/repository/components/RepositoryParentSummary.svelte

@@ -0,0 +1,52 @@
+<script lang="ts">
+  import RepositoryAuthorAvatar from "./RepositoryAuthorAvatar.svelte";
+  let {
+    target,
+    author,
+    email,
+    handle,
+    description,
+  }: {
+    target?: string;
+    author?: string;
+    email?: string;
+    handle?: string;
+    description?: string;
+  } = $props();
+</script>
+
+<span class="repository-review-parent-summary">
+  <span class="repository-review-parent-avatar">
+    <RepositoryAuthorAvatar
+      name={author ?? "Unknown author"}
+      {email}
+      {handle}
+    />
+  </span>
+  <span class="repository-review-parent-message" title={description}>
+    {description?.split("\n")[0] ||
+      (target ? "Parent details unavailable" : "Choose a parent")}
+  </span>
+</span>
+
+<style>
+  .repository-review-parent-summary {
+    display: flex;
+    flex: 1 1 0;
+    min-width: 0;
+    align-items: center;
+    gap: 0.5rem;
+    text-align: start;
+  }
+  .repository-review-parent-avatar {
+    display: inline-flex;
+    flex: none;
+  }
+  .repository-review-parent-message {
+    flex: 1 1 0;
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+</style>

package/dist/repository/components/RepositoryParentSummary.svelte.d.ts

@@ -0,0 +1,10 @@
+type $$ComponentProps = {
+    target?: string;
+    author?: string;
+    email?: string;
+    handle?: string;
+    description?: string;
+};
+declare const RepositoryParentSummary: import("svelte").Component<$$ComponentProps, {}, "">;
+type RepositoryParentSummary = ReturnType<typeof RepositoryParentSummary>;
+export default RepositoryParentSummary;

package/dist/repository/components/RepositoryPickerSearch.svelte

@@ -0,0 +1,51 @@
+<script lang="ts">
+  import * as CommandView from "@lapismd/design-core/shadcn/command-view";
+  import * as Popover from "@lapismd/design-core/shadcn/popover";
+  import { Button } from "@lapismd/design-core/shadcn/button";
+  import XIcon from "@lucide/svelte/icons/x";
+  let {
+    query = $bindable(""),
+    inputRef = $bindable(null),
+    placeholder,
+    label,
+    closeLabel,
+    grid = true,
+  }: {
+    query?: string;
+    inputRef?: HTMLInputElement | null;
+    placeholder: string;
+    label: string;
+    closeLabel: string;
+    grid?: boolean;
+  } = $props();
+</script>
+
+<div class="repository-review-picker-search">
+  <CommandView.Input
+    aria-haspopup={grid ? "grid" : "listbox"}
+    bind:ref={inputRef}
+    bind:value={query}
+    {placeholder}
+    aria-label={label}
+  />
+  <Popover.Close>
+    {#snippet child({ props })}<Button
+        {...props}
+        variant="ghost"
+        size="icon-sm"
+        aria-label={closeLabel}><XIcon aria-hidden="true" /></Button
+      >{/snippet}
+  </Popover.Close>
+</div>
+
+<style>
+  .repository-review-picker-search {
+    display: grid;
+    grid-template-columns: minmax(0, 1fr) auto;
+    align-items: center;
+    gap: 0.25rem;
+    padding: 0.125rem 0.5rem;
+    border-bottom: 1px solid var(--border);
+    --ui-command-view-border-color: transparent;
+  }
+</style>

package/dist/repository/components/RepositoryPickerSearch.svelte.d.ts

@@ -0,0 +1,11 @@
+type $$ComponentProps = {
+    query?: string;
+    inputRef?: HTMLInputElement | null;
+    placeholder: string;
+    label: string;
+    closeLabel: string;
+    grid?: boolean;
+};
+declare const RepositoryPickerSearch: import("svelte").Component<$$ComponentProps, {}, "query" | "inputRef">;
+type RepositoryPickerSearch = ReturnType<typeof RepositoryPickerSearch>;
+export default RepositoryPickerSearch;

package/dist/repository/components/RepositoryRestoreDialog.svelte

@@ -0,0 +1,81 @@
+<script lang="ts">
+  import { onMount } from "svelte";
+  import * as AlertDialog from "@lapismd/design-core/shadcn/alert-dialog";
+  import { Button } from "@lapismd/design-core/shadcn/button";
+  import { Skeleton } from "@lapismd/design-core/shadcn/skeleton";
+  import type {
+    RestoreController,
+    RestoreState,
+  } from "../controllers/restore.js";
+  let { controller }: { controller: RestoreController } = $props();
+  let state = $state<RestoreState>({ open: false, busy: false });
+  onMount(() => controller.subscribe((value) => (state = value)));
+</script>
+
+<AlertDialog.Root
+  open={state.open}
+  onOpenChange={(open) => {
+    if (!open) controller.dismiss();
+  }}
+>
+  <AlertDialog.Content>
+    <AlertDialog.Header>
+      <AlertDialog.Title
+        >{state.scope === "vault"
+          ? "Restore vault checkpoint"
+          : "Restore file version"}</AlertDialog.Title
+      >
+      <AlertDialog.Description>
+        {#if state.recovery}
+          An earlier restore was interrupted. Continue to check its original
+          receipt. Newer edits will be retained. You can cancel to review
+          another checkpoint.
+        {:else if state.vault}
+          Restore the vault to this checkpoint: {state.vault.added} files added,
+          {state.vault.modified} changed and {state.vault.deleted} removed. A safety
+          checkpoint saves all current files first. App runtime and excluded files
+          are retained.
+        {:else if state.preview}
+          {state.preview.deleted ? "Remove" : "Restore"}
+          {state.preview.path} to the selected version. A safety checkpoint saves
+          your current files first. Any edits made since this preview must be reviewed
+          again.
+        {:else}Preparing the selected file version…{/if}
+      </AlertDialog.Description>
+    </AlertDialog.Header>
+    {#if state.busy && !state.preview && !state.vault && !state.recovery}<div
+        class="restore-skeleton"
+        aria-label="Preparing restore"
+      >
+        <Skeleton style="height:1rem;width:80%" /><Skeleton
+          style="height:1rem;width:60%"
+        />
+      </div>{/if}
+    <AlertDialog.Footer>
+      <AlertDialog.Cancel disabled={state.busy}>Cancel</AlertDialog.Cancel>
+      {#if state.recovery && controller.service.keepCurrent}<Button
+          variant="outline"
+          disabled={state.busy}
+          onclick={() => controller.keepCurrent()}>Keep current files</Button
+        >{/if}
+      <Button
+        disabled={(!state.preview && !state.vault && !state.recovery) ||
+          state.busy}
+        onclick={() => controller.apply()}
+        >{state.busy
+          ? "Restoring…"
+          : state.scope === "vault"
+            ? "Restore vault"
+            : "Restore file"}</Button
+      >
+    </AlertDialog.Footer>
+  </AlertDialog.Content>
+</AlertDialog.Root>
+
+<style>
+  .restore-skeleton {
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+  }
+</style>

package/dist/repository/components/RepositoryRestoreDialog.svelte.d.ts

@@ -0,0 +1,7 @@
+import type { RestoreController } from "../controllers/restore.js";
+type $$ComponentProps = {
+    controller: RestoreController;
+};
+declare const RepositoryRestoreDialog: import("svelte").Component<$$ComponentProps, {}, "">;
+type RepositoryRestoreDialog = ReturnType<typeof RepositoryRestoreDialog>;
+export default RepositoryRestoreDialog;