@lapis-notes/history 0.1.2 → 0.2.0

package/dist/repository/components/RepositoryComparisonBar.svelte

@@ -0,0 +1,71 @@
+<script lang="ts">
+  import type { Snippet } from "svelte";
+  let {
+    children,
+    inset = false,
+    label = "Comparison parent",
+  }: { children: Snippet; inset?: boolean; label?: string } = $props();
+</script>
+
+<div class="repository-review-comparison-bar" data-inset={inset || undefined}>
+  <span class="repository-review-comparison-label">{label}</span>
+  {@render children()}
+</div>
+
+<style>
+  .repository-review-comparison-bar {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    min-width: 0;
+    padding: 0.25rem 0.75rem;
+    padding-inline-end: 0.5rem;
+    border-block-start: 1px solid var(--border);
+    background: color-mix(in srgb, var(--foreground) 4%, var(--background));
+    font-size: 0.75rem;
+  }
+  .repository-review-comparison-bar[data-inset] {
+    margin: -0.5rem -0.5rem 0.5rem;
+    border-block-start: 0;
+  }
+  .repository-review-comparison-label {
+    flex: none;
+    white-space: nowrap;
+    color: var(--muted-foreground);
+  }
+  .repository-review-comparison-bar
+    :global(.repository-review-parent-selector) {
+    position: relative;
+    flex: 1;
+    min-width: 0;
+  }
+  .repository-review-comparison-bar :global(.repository-review-parent-trigger) {
+    position: absolute;
+    inset: 0;
+    width: 100%;
+    height: 100%;
+    justify-content: flex-end;
+    padding-inline: 0.375rem;
+  }
+  .repository-review-comparison-bar :global(.repository-review-parent-value) {
+    position: relative;
+    display: flex;
+    min-width: 0;
+    min-height: 2.25rem;
+    box-sizing: border-box;
+    align-items: center;
+    gap: 0.375rem;
+    padding: 0.375rem 1.625rem 0.375rem 0.375rem;
+    pointer-events: none;
+  }
+  .repository-review-comparison-bar
+    :global(.repository-review-parent-identifiers) {
+    display: inline-flex;
+    flex: none;
+    pointer-events: auto;
+  }
+  .repository-review-comparison-bar :global(.repository-identifiers) {
+    flex: none;
+    flex-wrap: nowrap;
+  }
+</style>

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

@@ -0,0 +1,9 @@
+import type { Snippet } from "svelte";
+type $$ComponentProps = {
+    children: Snippet;
+    inset?: boolean;
+    label?: string;
+};
+declare const RepositoryComparisonBar: import("svelte").Component<$$ComponentProps, {}, "">;
+type RepositoryComparisonBar = ReturnType<typeof RepositoryComparisonBar>;
+export default RepositoryComparisonBar;

package/dist/repository/components/RepositoryComparisonTime.svelte

@@ -0,0 +1,32 @@
+<script lang="ts">
+  import { onMount } from "svelte";
+  import { formatRelativeTime } from "@lapismd/design-core/shadcn/relative-time";
+  let { timestamp }: { timestamp?: number } = $props();
+  let now = $state(Date.now());
+  onMount(() => {
+    const timer = setInterval(() => (now = Date.now()), 30_000);
+    return () => clearInterval(timer);
+  });
+  const time = $derived(
+    timestamp === undefined
+      ? undefined
+      : formatRelativeTime(timestamp, { now }),
+  );
+</script>
+
+{#if time}<time datetime={time.datetime} title={time.full}>{time.text}</time
+  >{/if}
+
+<style>
+  time {
+    display: inline-flex;
+    align-items: center;
+    align-self: center;
+    flex: none;
+    margin-inline-start: auto;
+    color: var(--muted-foreground);
+    font-size: 0.75rem;
+    line-height: 1;
+    white-space: nowrap;
+  }
+</style>

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

@@ -0,0 +1,6 @@
+type $$ComponentProps = {
+    timestamp?: number;
+};
+declare const RepositoryComparisonTime: import("svelte").Component<$$ComponentProps, {}, "">;
+type RepositoryComparisonTime = ReturnType<typeof RepositoryComparisonTime>;
+export default RepositoryComparisonTime;

package/dist/repository/components/RepositoryDiff.svelte

@@ -0,0 +1,56 @@
+<script lang="ts">
+  import { FileDiff, type FileDiffViewMode } from "@lapismd/design-core/diff";
+  import type { LocalFileDiffChange } from "@lapismd/jj-history";
+  import { diffText } from "../controllers/history-state.js";
+  let {
+    change,
+    viewMode = "unified",
+    wrap = false,
+    compact = false,
+  }: {
+    change: LocalFileDiffChange;
+    viewMode?: FileDiffViewMode;
+    wrap?: boolean;
+    compact?: boolean;
+  } = $props();
+  const content = $derived(diffText(change));
+</script>
+
+<section
+  class="repository-diff"
+  data-compact={compact || undefined}
+  data-view-mode={viewMode}
+  aria-label={`Changes to ${change.path}`}
+>
+  {#if "unavailable" in content}<p role="status">
+      Preview unavailable: {content.unavailable}.
+    </p>
+  {:else}<FileDiff
+      path={change.path}
+      oldText={content.oldText}
+      newText={content.newText}
+      {viewMode}
+      {wrap}
+    />{/if}
+</section>
+
+<style>
+  .repository-diff {
+    display: flex;
+    flex-direction: column;
+    min-width: 0;
+    min-height: 16rem;
+  }
+  .repository-diff[data-view-mode="split"] {
+    height: 100%;
+    min-height: 0;
+    flex: 1 1 0;
+  }
+  .repository-diff[data-compact] {
+    min-height: 0;
+  }
+  p {
+    padding: 1rem;
+    color: var(--muted-foreground);
+  }
+</style>

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

@@ -0,0 +1,11 @@
+import { type FileDiffViewMode } from "@lapismd/design-core/diff";
+import type { LocalFileDiffChange } from "@lapismd/jj-history";
+type $$ComponentProps = {
+    change: LocalFileDiffChange;
+    viewMode?: FileDiffViewMode;
+    wrap?: boolean;
+    compact?: boolean;
+};
+declare const RepositoryDiff: import("svelte").Component<$$ComponentProps, {}, "">;
+type RepositoryDiff = ReturnType<typeof RepositoryDiff>;
+export default RepositoryDiff;

package/dist/repository/components/RepositoryDiffColumn.svelte

@@ -0,0 +1,78 @@
+<script lang="ts">
+  import RepositorySkeleton from "./RepositorySkeleton.svelte";
+  import RepositoryFileTitle from "./RepositoryFileTitle.svelte";
+  import {
+    FileChangeStats,
+    type FileDiffViewMode,
+  } from "@lapismd/design-core/diff";
+  import * as ColumnCanvas from "@lapismd/design-core/shadcn/column-canvas";
+  import { Button } from "@lapismd/design-core/shadcn/button";
+  import type { HistoryState } from "../controllers/history-state.js";
+
+  import { changeStats } from "../controllers/history-files.js";
+  import RepositoryDiffControls from "./RepositoryDiffControls.svelte";
+  import RepositoryDiff from "./RepositoryDiff.svelte";
+  import RotateCcwIcon from "@lucide/svelte/icons/rotate-ccw";
+  let {
+    state: snapshot,
+    controller,
+    columnId = "diff",
+    label = "Revision changes",
+    closeLabel = "Close Diff column",
+    onRestore,
+  }: {
+    state: Pick<HistoryState, "path" | "diff" | "busy">;
+    controller: { selectPath(path: string): Promise<void> };
+    columnId?: string;
+    label?: string;
+    closeLabel?: string;
+    onRestore?(): void;
+  } = $props();
+  let viewMode = $state<FileDiffViewMode>("split");
+  let wrap = $state(false);
+  const stats = $derived(changeStats(snapshot.diff));
+</script>
+
+<ColumnCanvas.Column id={columnId} columnTitle="Diff" aria-label={label}>
+  <ColumnCanvas.Header>
+    <ColumnCanvas.Title
+      ><RepositoryFileTitle path={snapshot.path} /></ColumnCanvas.Title
+    >
+    <ColumnCanvas.HeaderActions class="repository-review-column-actions">
+      {#if stats}<FileChangeStats {...stats} showZero />{/if}
+      {#if onRestore}<Button
+          variant="ghost"
+          size="icon-sm"
+          aria-label="Restore this file version"
+          title="Restore this file version"
+          disabled={snapshot.busy}
+          onclick={onRestore}><RotateCcwIcon /></Button
+        >{/if}
+      <RepositoryDiffControls bind:viewMode bind:wrap />
+      <ColumnCanvas.Close aria-label={closeLabel} />
+    </ColumnCanvas.HeaderActions>
+  </ColumnCanvas.Header>
+  <ColumnCanvas.Body orientation="both">
+    {#if snapshot.diff}<RepositoryDiff
+        change={snapshot.diff}
+        {viewMode}
+        {wrap}
+      />
+    {:else if snapshot.path}{#if snapshot.busy}<RepositorySkeleton
+          kind="diff"
+          label="Loading file changes…"
+        />{:else}<p role="status">File preview is unavailable.</p>
+        <Button size="sm" onclick={() => controller.selectPath(snapshot.path!)}
+          >Retry preview</Button
+        >{/if}
+    {:else}<p role="status">Select a changed file to preview the diff.</p>{/if}
+  </ColumnCanvas.Body>
+</ColumnCanvas.Column>
+
+<style>
+  p {
+    padding: 1rem;
+    color: var(--muted-foreground);
+    font-size: 0.875rem;
+  }
+</style>

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

@@ -0,0 +1,14 @@
+import type { HistoryState } from "../controllers/history-state.js";
+type $$ComponentProps = {
+    state: Pick<HistoryState, "path" | "diff" | "busy">;
+    controller: {
+        selectPath(path: string): Promise<void>;
+    };
+    columnId?: string;
+    label?: string;
+    closeLabel?: string;
+    onRestore?(): void;
+};
+declare const RepositoryDiffColumn: import("svelte").Component<$$ComponentProps, {}, "">;
+type RepositoryDiffColumn = ReturnType<typeof RepositoryDiffColumn>;
+export default RepositoryDiffColumn;

package/dist/repository/components/RepositoryDiffControls.svelte

@@ -0,0 +1,117 @@
+<script lang="ts">
+  import type { FileDiffViewMode } from "@lapismd/design-core/diff";
+  import { Toggle } from "@lapismd/design-core/shadcn/toggle";
+  import * as ToggleGroup from "@lapismd/design-core/shadcn/toggle-group";
+  import Columns2 from "@lucide/svelte/icons/columns-2";
+  import Rows2 from "@lucide/svelte/icons/rows-2";
+  import WrapText from "@lucide/svelte/icons/wrap-text";
+  let {
+    viewMode = $bindable("unified"),
+    wrap = $bindable(false),
+  }: { viewMode?: FileDiffViewMode; wrap?: boolean } = $props();
+</script>
+
+<div class="repository-review-diff-controls">
+  <span class="repository-review-diff-chrome">
+    <ToggleGroup.Root
+      type="single"
+      value={viewMode}
+      onValueChange={(value) => {
+        if (value === "unified" || value === "split") viewMode = value;
+      }}
+      variant="outline"
+      size="sm"
+      class="repository-review-diff-group"
+      aria-label="Diff layout"
+    >
+      <ToggleGroup.Item
+        value="unified"
+        onclick={(event) => {
+          if (viewMode === "unified") event.preventDefault();
+        }}
+        class="repository-review-diff-control"
+        aria-label="Unified"
+        title="Show unified diff"
+        ><Rows2 class="repository-review-diff-icon" /></ToggleGroup.Item
+      >
+      <ToggleGroup.Item
+        value="split"
+        onclick={(event) => {
+          if (viewMode === "split") event.preventDefault();
+        }}
+        class="repository-review-diff-control"
+        aria-label="Split"
+        title="Show split diff"
+        ><Columns2 class="repository-review-diff-icon" /></ToggleGroup.Item
+      >
+    </ToggleGroup.Root>
+  </span>
+  <span class="repository-review-diff-chrome">
+    <Toggle
+      bind:pressed={wrap}
+      variant="outline"
+      size="sm"
+      class="repository-review-diff-control"
+      aria-label="Wrap text"
+      title="Wrap text"><WrapText class="repository-review-diff-icon" /></Toggle
+    >
+  </span>
+</div>
+
+<style>
+  .repository-review-diff-controls {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.25rem;
+  }
+  .repository-review-diff-chrome {
+    display: inline-flex;
+    align-items: stretch;
+    width: fit-content;
+    height: 1.375rem;
+    overflow: hidden;
+    border: 1px solid var(--border);
+    border-radius: calc(var(--radius) * 0.6);
+    background: var(--background);
+    box-shadow: none;
+  }
+  .repository-review-diff-chrome :global(.repository-review-diff-group) {
+    height: 100%;
+    border: 0;
+    box-shadow: none;
+    background: transparent;
+  }
+  .repository-review-diff-chrome :global(.repository-review-diff-control) {
+    box-sizing: border-box;
+    width: 1.375rem;
+    min-width: 1.375rem;
+    height: 100%;
+    padding: 0;
+    border: 0;
+    border-radius: 0;
+    box-shadow: none;
+    background: transparent;
+  }
+  .repository-review-diff-chrome
+    :global(.repository-review-diff-control + .repository-review-diff-control) {
+    border-left: 1px solid var(--border);
+  }
+  .repository-review-diff-controls
+    .repository-review-diff-chrome
+    :global(.repository-review-diff-control .repository-review-diff-icon) {
+    width: 0.75rem;
+    height: 0.75rem;
+  }
+  .repository-review-diff-chrome
+    :global(.repository-review-diff-control[data-state="on"]) {
+    background: color-mix(in srgb, var(--foreground) 12%, var(--background));
+    color: inherit;
+  }
+  .repository-review-diff-chrome
+    :global(
+      .repository-review-diff-control:not(:disabled):is(:hover, :focus-visible)
+    ) {
+    background: var(--repository-review-column-action-hover);
+    color: var(--foreground);
+  }
+</style>

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

@@ -0,0 +1,8 @@
+import type { FileDiffViewMode } from "@lapismd/design-core/diff";
+type $$ComponentProps = {
+    viewMode?: FileDiffViewMode;
+    wrap?: boolean;
+};
+declare const RepositoryDiffControls: import("svelte").Component<$$ComponentProps, {}, "wrap" | "viewMode">;
+type RepositoryDiffControls = ReturnType<typeof RepositoryDiffControls>;
+export default RepositoryDiffControls;

package/dist/repository/components/RepositoryFileHistory.svelte

@@ -0,0 +1,170 @@
+<script lang="ts">
+  import RepositorySkeleton from "./RepositorySkeleton.svelte";
+  import { onMount } from "svelte";
+  import { Button } from "@lapismd/design-core/shadcn/button";
+  import * as ScrollArea from "@lapismd/design-core/shadcn/scroll-area";
+  import RefreshCwIcon from "@lucide/svelte/icons/refresh-cw";
+  import GitMergeConflictIcon from "@lucide/svelte/icons/git-merge-conflict";
+  import FileClockIcon from "@lucide/svelte/icons/file-clock";
+  import * as Empty from "@lapismd/design-core/shadcn/empty";
+  import type {
+    FileHistoryController,
+    FileHistoryState,
+  } from "../controllers/file-history-controller.js";
+  import { commitRows } from "../controllers/graph/model.js";
+  import RepositoryGraph from "./RepositoryGraph.svelte";
+  import RepositoryFileTitle from "./RepositoryFileTitle.svelte";
+  import RepositoryOperationPinPicker from "./RepositoryOperationPinPicker.svelte";
+  let {
+    controller,
+    copyText,
+    onOpen,
+    onBlame,
+  }: {
+    controller: FileHistoryController;
+    copyText(value: string): Promise<void>;
+    onOpen(revision: string): void;
+    onBlame(): void;
+  } = $props();
+  let state = $state<FileHistoryState>();
+  const rows = $derived(commitRows(state?.commits ?? []));
+  const pins = $derived([
+    ...new Set([
+      ...(state?.heads ?? []),
+      ...(state?.operation ? [state.operation] : []),
+    ]),
+  ]);
+  onMount(() =>
+    controller.subscribe((value) => {
+      state = value;
+    }),
+  );
+</script>
+
+<section
+  class="file-history"
+  aria-label="Active file history"
+  aria-busy={state?.busy ?? false}
+>
+  <header>
+    <span class="file-title"
+      >{#if state?.path}<RepositoryFileTitle path={state.path} />{:else}File
+        history{/if}</span
+    >
+    <Button
+      variant="ghost"
+      size="icon-sm"
+      aria-label="Blame file"
+      title="Blame file"
+      disabled={!state?.path || !state.workspaceCommit || state.busy}
+      onclick={onBlame}><GitMergeConflictIcon /></Button
+    >
+    <Button
+      variant="ghost"
+      size="icon-sm"
+      aria-label="Refresh file history"
+      disabled={!state?.path || state.busy}
+      onclick={() => controller.refresh()}><RefreshCwIcon /></Button
+    >
+  </header>
+  {#if state?.path && !state.operation && pins.length > 1}<div class="file-pin">
+      <RepositoryOperationPinPicker
+        operations={pins}
+        operation={state.operation}
+        label="File history operation"
+        onSelect={(id) => void controller.refresh(id)}
+        {copyText}
+      />
+    </div>{/if}
+  <ScrollArea.Root style="flex:1;min-height:0;min-width:0">
+    {#if !state?.path}<Empty.Root role="status">
+        <Empty.Header>
+          <Empty.Media variant="icon"><FileClockIcon /></Empty.Media>
+          <Empty.Title>No file selected</Empty.Title>
+          <Empty.Description
+            >Open a file in the editor to see its revision history.</Empty.Description
+          >
+        </Empty.Header>
+      </Empty.Root>
+    {:else}
+      <RepositoryGraph
+        revisions={rows}
+        commits={state.commits}
+        label="File revision graph"
+        {copyText}
+        showAuthor={false}
+        onSelect={onOpen}
+      />
+      {#if state.busy}<RepositorySkeleton
+          kind="file-history"
+          label="Loading file history…"
+        />
+      {:else if state.phase === "unavailable"}<p role="status">
+          File history is unavailable. Refresh to try again.
+        </p>
+      {:else if !state.operation}<p role="status">
+          {state.heads.length > 1
+            ? "Choose an operation to inspect this file."
+            : "No repository history available."}
+        </p>
+      {:else if !state.commits.length}<Empty.Root role="status">
+          <Empty.Header>
+            <Empty.Media variant="icon"><FileClockIcon /></Empty.Media>
+            <Empty.Title>No file history</Empty.Title>
+            <Empty.Description
+              >No revisions changed this file at the selected operation.</Empty.Description
+            >
+          </Empty.Header>
+        </Empty.Root>{/if}
+      {#if state.next}<Button
+          variant="outline"
+          size="sm"
+          disabled={state.busy}
+          onclick={() => controller.more()}>More revisions</Button
+        >{/if}
+      {#if state.commits.length === 200}<p role="status">
+          Showing the first 200 matching revisions.
+        </p>{/if}
+    {/if}
+  </ScrollArea.Root>
+</section>
+
+<style>
+  .file-history {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    min-height: 0;
+    min-width: 0;
+    color: var(--foreground);
+    background: var(--background);
+    font-size: 0.8125rem;
+  }
+  header {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    box-sizing: border-box;
+    height: var(--ui-workspace-tab-height, 40px);
+    min-height: var(--ui-workspace-tab-height, 40px);
+    flex: 0 0 var(--ui-workspace-tab-height, 40px);
+    padding: 0 0.75rem;
+    border-bottom: 1px solid var(--border);
+  }
+  .file-title {
+    flex: 1;
+    min-width: 0;
+    overflow: hidden;
+    font-size: 0.875rem;
+  }
+  .file-pin {
+    padding: 0.5rem 0.75rem;
+    border-bottom: 1px solid var(--border);
+  }
+  p {
+    padding: 0.75rem;
+    margin: 0;
+    color: var(--muted-foreground);
+    line-height: 1.5;
+  }
+</style>

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

@@ -0,0 +1,10 @@
+import type { FileHistoryController } from "../controllers/file-history-controller.js";
+type $$ComponentProps = {
+    controller: FileHistoryController;
+    copyText(value: string): Promise<void>;
+    onOpen(revision: string): void;
+    onBlame(): void;
+};
+declare const RepositoryFileHistory: import("svelte").Component<$$ComponentProps, {}, "">;
+type RepositoryFileHistory = ReturnType<typeof RepositoryFileHistory>;
+export default RepositoryFileHistory;

package/dist/repository/components/RepositoryFileTitle.svelte

@@ -0,0 +1,30 @@
+<script lang="ts">
+  import FileTextIcon from "@lucide/svelte/icons/file-text";
+  let { path }: { path?: string } = $props();
+</script>
+
+<span class="repository-review-file-title">
+  {#if path}<FileTextIcon aria-hidden="true" />{/if}
+  <span title={path}>{path ?? "Diff"}</span>
+</span>
+
+<style>
+  .repository-review-file-title {
+    display: flex;
+    align-items: center;
+    gap: 0.375rem;
+    min-width: 0;
+  }
+  .repository-review-file-title :global(svg) {
+    flex: none;
+    width: 0.875rem;
+    height: 0.875rem;
+    color: var(--muted-foreground);
+  }
+  .repository-review-file-title > span {
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+</style>

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

@@ -0,0 +1,6 @@
+type $$ComponentProps = {
+    path?: string;
+};
+declare const RepositoryFileTitle: import("svelte").Component<$$ComponentProps, {}, "">;
+type RepositoryFileTitle = ReturnType<typeof RepositoryFileTitle>;
+export default RepositoryFileTitle;