@lapis-notes/history 0.1.2 → 0.2.0

package/dist/repository/components/RepositoryRevisions.svelte

@@ -0,0 +1,115 @@
+<script lang="ts">
+  import { Button } from "@lapismd/design-core/shadcn/button";
+  import type { HistoryController } from "../controllers/history-controller.js";
+  import { type HistoryState } from "../controllers/history-state.js";
+  let {
+    state,
+    controller,
+    copyText,
+    onOpenDiff,
+    onOpenEvolution,
+    onResolveConflicts,
+    onRestoreVault,
+    evolutionOpen = false,
+    graphRevisions,
+    graphLabel = "Revision graph",
+    comparisonTargets,
+    comparisonLabel,
+    comparisonUnavailable,
+  }: {
+    state: HistoryState;
+    controller: Pick<
+      HistoryController,
+      | "clearRevision"
+      | "selectRevision"
+      | "moreCommits"
+      | "loadParents"
+      | "selectBase"
+      | "selectPath"
+      | "morePaths"
+    >;
+    onOpenDiff(): void;
+    onOpenEvolution?(): void;
+    onResolveConflicts?(): void;
+    onRestoreVault?(): void;
+    evolutionOpen?: boolean;
+    graphRevisions?: import("../controllers/graph/model.js").RepositoryLogRevision[];
+    graphLabel?: string;
+    comparisonTargets?: readonly string[];
+    comparisonLabel?: string;
+    comparisonUnavailable?: string;
+    copyText(value: string): Promise<void>;
+  } = $props();
+  import RepositoryRevisionFiles from "./RepositoryRevisionFiles.svelte";
+  import RepositoryCommitMessage from "./RepositoryCommitMessage.svelte";
+  import RepositoryRevisionActions from "./RepositoryRevisionActions.svelte";
+  import RepositoryGraph from "./RepositoryGraph.svelte";
+  import { commitRows } from "../controllers/graph/model.js";
+  const hasMessageBody = $derived(
+    Boolean(state.revision?.description.split("\n").slice(1).join("\n").trim()),
+  );
+  const revisions = $derived(graphRevisions ?? commitRows(state.commits));
+</script>
+
+<div class="repository-revisions">
+  {#if !state.commitsReady && !state.busy}<p role="status">
+      Revisions are unavailable. Refresh to try again.
+    </p>
+  {:else if state.commitsReady && !state.commits.length && !state.busy}<p>
+      No revisions in this operation.
+    </p>{/if}
+  <RepositoryGraph
+    commits={state.commits}
+    {revisions}
+    {copyText}
+    selectedId={state.revision?.id}
+    label={graphLabel}
+    onSelect={(id) => {
+      const commit = state.commits.find((item) => item.id === id);
+      if (state.revision?.id === id) void controller.clearRevision();
+      else if (commit) void controller.selectRevision(commit);
+    }}
+  >
+    {#snippet selectedFiles()}
+      {#if onOpenEvolution || onRestoreVault || (state.revision?.conflicted && onResolveConflicts)}<RepositoryRevisionActions
+          expanded={evolutionOpen}
+          onEvolution={onOpenEvolution}
+          onResolve={state.revision?.conflicted
+            ? onResolveConflicts
+            : undefined}
+          onRestore={onRestoreVault}
+        />{/if}
+      <RepositoryCommitMessage
+        description={state.revision?.description ?? ""}
+      />
+      {#if !comparisonUnavailable}<RepositoryRevisionFiles
+          {copyText}
+          {state}
+          {controller}
+          {onOpenDiff}
+          {comparisonTargets}
+          {comparisonLabel}
+          separateActions={!hasMessageBody &&
+            Boolean(
+              onOpenEvolution ||
+                onRestoreVault ||
+                (state.revision?.conflicted && onResolveConflicts),
+            )}
+        />{/if}{/snippet}
+  </RepositoryGraph>
+  {#if state.next}<Button
+      size="sm"
+      disabled={state.busy}
+      onclick={() => controller.moreCommits()}>More revisions</Button
+    >{/if}
+  {#if state.commits.length === 200}<p>Showing the first 200 revisions.</p>{/if}
+</div>
+
+<style>
+  .repository-revisions {
+    min-width: 0;
+  }
+  p {
+    padding: 0.75rem;
+  }
+</style>

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

@@ -0,0 +1,20 @@
+import type { HistoryController } from "../controllers/history-controller.js";
+import { type HistoryState } from "../controllers/history-state.js";
+type $$ComponentProps = {
+    state: HistoryState;
+    controller: Pick<HistoryController, "clearRevision" | "selectRevision" | "moreCommits" | "loadParents" | "selectBase" | "selectPath" | "morePaths">;
+    onOpenDiff(): void;
+    onOpenEvolution?(): void;
+    onResolveConflicts?(): void;
+    onRestoreVault?(): void;
+    evolutionOpen?: boolean;
+    graphRevisions?: import("../controllers/graph/model.js").RepositoryLogRevision[];
+    graphLabel?: string;
+    comparisonTargets?: readonly string[];
+    comparisonLabel?: string;
+    comparisonUnavailable?: string;
+    copyText(value: string): Promise<void>;
+};
+declare const RepositoryRevisions: import("svelte").Component<$$ComponentProps, {}, "">;
+type RepositoryRevisions = ReturnType<typeof RepositoryRevisions>;
+export default RepositoryRevisions;

package/dist/repository/components/RepositoryShell.svelte

@@ -0,0 +1,44 @@
+<script lang="ts">
+  import "./repository-column-chrome.css";
+  import "./repository-review-identifiers.css";
+  import "./repository-picker-options.css";
+  import { onDestroy, type Snippet } from "svelte";
+  import { AppShell, AppShellController } from "@lapismd/design-core/shell";
+  let { children, surface }: { children: Snippet; surface?: Snippet } =
+    $props();
+  const shell = new AppShellController();
+  onDestroy(() => void shell.dispose());
+</script>
+
+<div class="repository-shell">
+  <AppShell.Root
+    controller={shell}
+    displayMode="desktop"
+    desktopMinMainWidth={0}
+  >
+    <AppShell.Main>
+      <AppShell.Body layout="regions" element="div">
+        <div class="repository-body-frame">{@render children()}</div>
+      </AppShell.Body>
+    </AppShell.Main>
+    {@render surface?.()}
+  </AppShell.Root>
+</div>
+
+<style>
+  .repository-shell {
+    height: 100%;
+    min-width: 0;
+    min-height: 0;
+    --ui-shell-height: 100%;
+  }
+  .repository-body-frame {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    min-width: 0;
+    min-height: 0;
+    flex: 1;
+    overflow: hidden;
+  }
+</style>

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

@@ -0,0 +1,11 @@
+import "./repository-column-chrome.css";
+import "./repository-review-identifiers.css";
+import "./repository-picker-options.css";
+import { type Snippet } from "svelte";
+type $$ComponentProps = {
+    children: Snippet;
+    surface?: Snippet;
+};
+declare const RepositoryShell: import("svelte").Component<$$ComponentProps, {}, "">;
+type RepositoryShell = ReturnType<typeof RepositoryShell>;
+export default RepositoryShell;

package/dist/repository/components/RepositorySkeleton.svelte

@@ -0,0 +1,138 @@
+<script lang="ts">
+  import { Skeleton } from "@lapismd/design-core/shadcn/skeleton";
+  let {
+    kind = "log",
+    label = "Loading repository history",
+  }: {
+    kind?:
+      | "log"
+      | "file-history"
+      | "files"
+      | "diff"
+      | "operation"
+      | "blame"
+      | "conflicts";
+    label?: string;
+  } = $props();
+  const widths = ["72%", "54%", "86%", "61%", "78%", "48%"];
+</script>
+
+<div
+  class="repository-skeleton"
+  data-skeleton={kind}
+  role="status"
+  aria-label={label}
+>
+  <span class="loading-label">{label}</span>
+  <div aria-hidden="true">
+    {#if kind === "operation"}
+      <div class="metadata">
+        <Skeleton style="width:75%;height:1.1rem" /><Skeleton
+          style="width:45%;height:0.75rem"
+        />
+      </div>
+    {/if}
+    {#if kind === "blame" || kind === "diff" || kind === "conflicts"}
+      <div
+        class="source-columns"
+        class:blame={kind === "blame"}
+        class:conflicts={kind === "conflicts"}
+      >
+        {#each Array(kind === "conflicts" ? 3 : 2) as _, column (column)}
+          <div class="source-pane">
+            {#each Array(12) as _, row (row)}
+              <div class="source-line">
+                <Skeleton style="width:1.25rem;height:0.625rem" />
+                <Skeleton
+                  style={`width:${widths[(row + column) % widths.length]};height:0.625rem`}
+                />
+              </div>
+            {/each}
+          </div>
+        {/each}
+      </div>
+    {:else}
+      {#each Array(kind === "files" || kind === "operation" ? 4 : 6) as _, row (row)}
+        <div
+          class="skeleton-row"
+          class:compact={kind === "files" || kind === "operation"}
+        >
+          {#if kind === "log"}<Skeleton
+              style="width:1.75rem;height:1.75rem;border-radius:999px"
+            />
+          {:else}<Skeleton style="width:0.75rem;height:0.75rem" />{/if}
+          <div class="skeleton-content">
+            <Skeleton
+              style={`width:${widths[row % widths.length]};height:0.75rem`}
+            />
+            {#if kind !== "files"}<Skeleton
+                style="width:38%;height:0.625rem"
+              />{/if}
+          </div>
+          {#if kind === "log" || kind === "file-history"}<Skeleton
+              style="width:4.5rem;height:1.25rem"
+            />{/if}
+        </div>
+      {/each}
+    {/if}
+  </div>
+</div>
+
+<style>
+  .repository-skeleton {
+    padding: 0.75rem;
+    min-width: 0;
+  }
+  .loading-label {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    overflow: hidden;
+    clip-path: inset(50%);
+    white-space: nowrap;
+  }
+  .skeleton-row {
+    display: flex;
+    align-items: center;
+    gap: 0.65rem;
+    min-height: 4.5rem;
+  }
+  .skeleton-row.compact {
+    min-height: 2rem;
+  }
+  .skeleton-content {
+    flex: 1;
+    min-width: 0;
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+  }
+  .source-columns {
+    display: grid;
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+    gap: 1rem;
+  }
+  .source-columns.blame {
+    grid-template-columns: min(22rem, 45%) minmax(0, 1fr);
+    gap: 0;
+  }
+  .source-columns.conflicts {
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+  }
+  .source-pane + .source-pane {
+    border-left: 1px solid var(--border);
+    padding-left: 0.75rem;
+  }
+  .source-line {
+    display: flex;
+    align-items: center;
+    gap: 0.65rem;
+    height: 28px;
+  }
+  .metadata {
+    display: flex;
+    flex-direction: column;
+    gap: 0.75rem;
+    padding-block: 0.5rem 1rem;
+  }
+</style>

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

@@ -0,0 +1,7 @@
+type $$ComponentProps = {
+    kind?: "log" | "file-history" | "files" | "diff" | "operation" | "blame" | "conflicts";
+    label?: string;
+};
+declare const RepositorySkeleton: import("svelte").Component<$$ComponentProps, {}, "">;
+type RepositorySkeleton = ReturnType<typeof RepositorySkeleton>;
+export default RepositorySkeleton;

package/dist/repository/components/RepositorySourcePicker.svelte

@@ -0,0 +1,114 @@
+<script lang="ts">
+  import * as Popover from "@lapismd/design-core/shadcn/popover";
+  import * as CommandView from "@lapismd/design-core/shadcn/command-view";
+  import { Button } from "@lapismd/design-core/shadcn/button";
+  import { Skeleton } from "@lapismd/design-core/shadcn/skeleton";
+  import GitBranch from "@lucide/svelte/icons/git-branch";
+  import History from "@lucide/svelte/icons/history";
+  import CircleCheckIcon from "@lucide/svelte/icons/circle-check";
+  import type {
+    HistorySourcePicker,
+    HistorySource,
+  } from "../controllers/history-source.js";
+  let { picker }: { picker: HistorySourcePicker } = $props();
+  let open = $state(false),
+    loading = $state(false),
+    original = $state(false);
+  const options = [
+    {
+      source: "backup" as HistorySource,
+      label: "Automatic vault history",
+      description: "Saved-file checkpoints managed by this plugin",
+    },
+    {
+      source: "original" as HistorySource,
+      label: "Original repository",
+      description: "Read existing JJ history without changing it",
+    },
+  ];
+  async function load() {
+    loading = true;
+    try {
+      original = (await picker.load()).original;
+    } catch (error) {
+      picker.report(error);
+    } finally {
+      loading = false;
+    }
+  }
+</script>
+
+<Popover.Root
+  bind:open
+  onOpenChange={(next) => {
+    if (next) void load();
+  }}
+>
+  <Popover.Trigger>
+    {#snippet child({ props })}<Button
+        {...props}
+        variant="ghost"
+        size="sm"
+        aria-label={`History source: ${picker.selected === "backup" ? "Backup" : "Original"}`}
+        title="Select history source"
+      >
+        {#if picker.selected === "backup"}<History
+            aria-hidden="true"
+          />{:else}<GitBranch aria-hidden="true" />{/if}
+        {picker.selected === "backup" ? "Backup" : "Original"}
+      </Button>{/snippet}
+  </Popover.Trigger>
+  <Popover.Content
+    align="end"
+    aria-label="Select history source"
+    style="--ui-popover-width:min(24rem,calc(100vw - 2rem));--ui-popover-padding:0"
+  >
+    <CommandView.Root label="Select history source" shouldFilter={false}>
+      <CommandView.List aria-label="History sources">
+        {#if loading}<div
+            class="loading"
+            role="status"
+            aria-label="Loading history sources"
+          >
+            <Skeleton style="height:2rem" /><Skeleton style="height:2rem" />
+          </div>
+        {:else}<CommandView.Group>
+            {#each options.filter((item) => item.source === "backup" || original || picker.selected === "original") as option (option.source)}
+              <CommandView.Item
+                value={option.source}
+                onSelect={() => {
+                  open = false;
+                  if (option.source !== picker.selected)
+                    picker.select(option.source);
+                }}
+              >
+                <CommandView.ItemIcon
+                  >{#if option.source === picker.selected}<CircleCheckIcon
+                      fill="var(--foreground)"
+                      stroke="var(--background)"
+                      aria-hidden="true"
+                    />{:else if option.source === "original"}<GitBranch
+                      aria-hidden="true"
+                    />{:else}<History
+                      aria-hidden="true"
+                    />{/if}</CommandView.ItemIcon
+                >
+                <CommandView.ItemLabel>{option.label}</CommandView.ItemLabel>
+                <CommandView.ItemDescription
+                  >{option.description}</CommandView.ItemDescription
+                >
+              </CommandView.Item>
+            {/each}
+          </CommandView.Group>{/if}
+      </CommandView.List>
+    </CommandView.Root>
+  </Popover.Content>
+</Popover.Root>
+
+<style>
+  .loading {
+    display: grid;
+    gap: 0.5rem;
+    padding: 0.75rem;
+  }
+</style>

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

@@ -0,0 +1,7 @@
+import type { HistorySourcePicker } from "../controllers/history-source.js";
+type $$ComponentProps = {
+    picker: HistorySourcePicker;
+};
+declare const RepositorySourcePicker: import("svelte").Component<$$ComponentProps, {}, "">;
+type RepositorySourcePicker = ReturnType<typeof RepositorySourcePicker>;
+export default RepositorySourcePicker;

package/dist/repository/components/RepositoryUpstreamActions.svelte

@@ -0,0 +1,125 @@
+<script lang="ts">
+  import { onMount } from "svelte";
+  import * as Tooltip from "@lapismd/design-core/shadcn/tooltip";
+  import { Button } from "@lapismd/design-core/shadcn/button";
+  import CircleArrowDown from "@lucide/svelte/icons/circle-arrow-down";
+  import ArrowDown from "@lucide/svelte/icons/arrow-down";
+  import ArrowUp from "@lucide/svelte/icons/arrow-up";
+  import type { SyncController } from "../controllers/sync-controller.js";
+  import type { SyncState } from "../controllers/sync.js";
+  let {
+    controller,
+    unavailable = false,
+  }: { controller?: SyncController; unavailable?: boolean } = $props();
+  let state: SyncState = $state({
+    busy: false,
+    phase: "ready",
+    enabled: true,
+    recovery: false,
+  });
+  onMount(() => {
+    const stop = controller?.subscribe((next) => (state = next));
+    void controller?.run("status");
+    return stop;
+  });
+  const actions = [
+    { action: "fetch", label: "Fetch from upstream", Icon: CircleArrowDown },
+    { action: "pull", label: "Pull from upstream", Icon: ArrowDown },
+    { action: "push", label: "Push to upstream", Icon: ArrowUp },
+  ] as const;
+  const counts = $derived(state.upstream?.divergence);
+</script>
+
+<div
+  class="upstream-actions"
+  role="group"
+  aria-label="Upstream actions"
+  aria-busy={state.busy}
+>
+  <Tooltip.Provider>
+    {#each actions as action (action.action)}
+      {@const blocked =
+        unavailable ||
+        !controller ||
+        state.busy ||
+        !state.upstream?.configuration ||
+        (action.action !== "fetch" &&
+          (state.recovery || Boolean(state.proposal?.conflicts.length))) ||
+        (action.action === "push" && !state.upstream?.configuration?.canPush)}
+      <Tooltip.Root>
+        <Tooltip.Trigger>
+          {#snippet child({ props })}
+            <span {...blocked ? props : {}} class="action-trigger">
+              <Button
+                {...!blocked ? props : {}}
+                variant="ghost"
+                size="sm"
+                class="upstream-action"
+                disabled={blocked}
+                onclick={(event) => {
+                  if (typeof props.onclick === "function") props.onclick(event);
+                  void controller?.run(action.action);
+                }}
+              >
+                <action.Icon data-icon="inline-start" aria-hidden="true" />
+                <span class="sr-label">{action.label}</span>
+                {#if action.action !== "fetch"}<span class="count"
+                    >{counts?.[
+                      action.action === "pull" ? "incoming" : "outgoing"
+                    ] ?? "—"}</span
+                  >{/if}
+              </Button>
+            </span>
+          {/snippet}
+        </Tooltip.Trigger>
+        <Tooltip.Content role="tooltip">
+          <strong>{action.label}</strong>
+          {#if action.action !== "fetch"}<span class="count-description"
+              >{counts
+                ? `${counts[action.action === "pull" ? "incoming" : "outgoing"]} ${action.action === "pull" ? "incoming" : "outgoing"} commits since the last fetch`
+                : "Commit count unavailable until upstream history is fetched"}</span
+            >{/if}
+        </Tooltip.Content>
+      </Tooltip.Root>
+    {/each}
+  </Tooltip.Provider>
+</div>
+
+<style>
+  .upstream-actions {
+    display: flex;
+    align-items: center;
+    margin-inline-start: auto;
+    gap: 0.125rem;
+    flex: none;
+  }
+  .action-trigger {
+    display: inline-flex;
+  }
+  .sr-label {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    overflow: hidden;
+    clip-path: inset(50%);
+    white-space: nowrap;
+  }
+  .upstream-actions :global(.upstream-action) {
+    height: 1.75rem;
+    padding: 0 0.35rem;
+    gap: 0.3rem;
+  }
+  .upstream-actions :global(.upstream-action svg) {
+    width: 1rem;
+    height: 1rem;
+  }
+  .count {
+    font-variant-numeric: tabular-nums;
+    font-size: 0.75rem;
+  }
+  .count-description {
+    display: block;
+    font-size: 0.75rem;
+  }
+</style>

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

@@ -0,0 +1,8 @@
+import type { SyncController } from "../controllers/sync-controller.js";
+type $$ComponentProps = {
+    controller?: SyncController;
+    unavailable?: boolean;
+};
+declare const RepositoryUpstreamActions: import("svelte").Component<$$ComponentProps, {}, "">;
+type RepositoryUpstreamActions = ReturnType<typeof RepositoryUpstreamActions>;
+export default RepositoryUpstreamActions;