@lapis-notes/history 0.1.4 → 0.2.0

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

@@ -0,0 +1,84 @@
+<script lang="ts">
+  import type { Snippet } from "svelte";
+  import {
+    FileListing,
+    FileListingViewModeToggle,
+    FileChangeStats,
+    type FileListingFile,
+    type FileListingDirectory,
+    type FileListingViewMode,
+  } from "@lapismd/design-core/diff";
+  import "./repository-conflict-file-tree.css";
+
+  let {
+    files,
+    directories = [],
+    mode = "tree",
+    collapsedDirectoryPaths,
+    selectedPath = "",
+    hasMore = false,
+    loading = false,
+    showChangeStats = false,
+    onSelectPath,
+    onLoadMore,
+    onModeChange,
+    onDirectoryToggle,
+    empty,
+  }: {
+    files: readonly FileListingFile[];
+    directories?: readonly FileListingDirectory[];
+    mode?: FileListingViewMode;
+    collapsedDirectoryPaths?: ReadonlySet<string>;
+    selectedPath?: string | undefined;
+    hasMore?: boolean;
+    loading?: boolean;
+    showChangeStats?: boolean;
+    onSelectPath: (path: string) => void;
+    onLoadMore?: () => void;
+    onModeChange?: (mode: FileListingViewMode) => void;
+    onDirectoryToggle?: (path: string) => void;
+    empty?: Snippet;
+  } = $props();
+</script>
+
+<div class="community-projects__file-tree">
+  <div class="community-projects__file-tree-actions">
+    <span class="community-projects__file-tree-title">Files</span>
+    <span class="community-projects__file-tree-count">{files.length}</span>
+    <FileListingViewModeToggle {mode} {onModeChange} />
+  </div>
+  {#if !files.length && !directories.length && empty}
+    {@render empty()}
+  {:else}
+    <div class="review-conflict-file-list">
+      <FileListing
+        files={[...files]}
+        directories={[...directories]}
+        {mode}
+        {collapsedDirectoryPaths}
+        selectedPath={selectedPath || null}
+        virtualize
+        {hasMore}
+        {loading}
+        loadingLabel="Loading more repository files"
+        {onSelectPath}
+        {onLoadMore}
+        {onDirectoryToggle}
+      >
+        {#snippet fileLabel({ name })}<span class="review-conflict-file-label"
+            >{name}</span
+          >{/snippet}
+        {#snippet fileMeta({ file })}
+          {#if showChangeStats}
+            {#if typeof file.additions === "number" && typeof file.deletions === "number"}
+              <FileChangeStats
+                additions={file.additions}
+                deletions={file.deletions}
+              />
+            {:else}<span class="sr-only">Line counts unavailable</span>{/if}
+          {:else}<span class="sr-only">Repository file</span>{/if}
+        {/snippet}
+      </FileListing>
+    </div>
+  {/if}
+</div>

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

@@ -0,0 +1,21 @@
+import type { Snippet } from "svelte";
+import { type FileListingFile, type FileListingDirectory, type FileListingViewMode } from "@lapismd/design-core/diff";
+import "./repository-conflict-file-tree.css";
+type $$ComponentProps = {
+    files: readonly FileListingFile[];
+    directories?: readonly FileListingDirectory[];
+    mode?: FileListingViewMode;
+    collapsedDirectoryPaths?: ReadonlySet<string>;
+    selectedPath?: string | undefined;
+    hasMore?: boolean;
+    loading?: boolean;
+    showChangeStats?: boolean;
+    onSelectPath: (path: string) => void;
+    onLoadMore?: () => void;
+    onModeChange?: (mode: FileListingViewMode) => void;
+    onDirectoryToggle?: (path: string) => void;
+    empty?: Snippet;
+};
+declare const RepositoryConflictFileTree: import("svelte").Component<$$ComponentProps, {}, "">;
+type RepositoryConflictFileTree = ReturnType<typeof RepositoryConflictFileTree>;
+export default RepositoryConflictFileTree;

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

@@ -0,0 +1,35 @@
+<script lang="ts">
+  import { untrack } from "svelte";
+  import type { LocalConflictDescriptor } from "@lapismd/jj-history";
+  import RepositoryConflictText from "./RepositoryConflictText.svelte";
+  let {
+    conflict,
+    draft,
+    onChange,
+  }: {
+    conflict: LocalConflictDescriptor;
+    draft?: string;
+    onChange(content: string): void;
+  } = $props();
+  // This seed belongs to this mounted path; keystrokes must not rebuild the editor.
+  const seed = untrack(
+    () =>
+      draft ??
+      (conflict.editor.status === "text" ? conflict.editor.contents[1] : ""),
+  );
+</script>
+
+<section class="store-conflict-path" aria-label={`Conflict ${conflict.path}`}>
+  {#if conflict.editor.status === "text" && conflict.editor.contents.length === 3}
+    <div class="store-conflict-path__editor">
+      <RepositoryConflictText
+        path={conflict.path}
+        left={conflict.editor.contents[0]}
+        base={seed}
+        right={conflict.editor.contents[2]}
+        editable
+        onResolvedChange={({ content }) => onChange(content)}
+      />
+    </div>
+  {:else}<p>Merge editor unavailable for this native conflict shape.</p>{/if}
+</section>

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

@@ -0,0 +1,9 @@
+import type { LocalConflictDescriptor } from "@lapismd/jj-history";
+type $$ComponentProps = {
+    conflict: LocalConflictDescriptor;
+    draft?: string;
+    onChange(content: string): void;
+};
+declare const RepositoryConflictPath: import("svelte").Component<$$ComponentProps, {}, "">;
+type RepositoryConflictPath = ReturnType<typeof RepositoryConflictPath>;
+export default RepositoryConflictPath;

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

@@ -0,0 +1,133 @@
+<script lang="ts">
+  import RepositorySkeleton from "../RepositorySkeleton.svelte";
+  import { untrack } from "svelte";
+  import { MediaQuery } from "svelte/reactivity";
+  import type { LocalConflictDescriptor } from "@lapismd/jj-history";
+  import { Button } from "@lapismd/design-core/shadcn/button";
+  import RepositoryConflictSurface from "./RepositoryConflictSurface.svelte";
+  import RepositoryConflictActions from "./RepositoryConflictActions.svelte";
+  import RepositoryConflictPath from "./RepositoryConflictPath.svelte";
+  let {
+    open,
+    conflicts,
+    ready,
+    busy,
+    onLoad,
+    onClose,
+  }: {
+    open: boolean;
+    conflicts: readonly LocalConflictDescriptor[];
+    ready: boolean;
+    busy: boolean;
+    onLoad(): void;
+    onClose(): void;
+  } = $props();
+  const compact = new MediaQuery("(max-width: 700px)");
+  let browserOpen = $state(true),
+    activePath = $state("");
+  let drafts = $state<Record<string, string>>({});
+  let staged = $state<
+    Record<string, { type: "delete" } | { type: "uploaded_file"; text: string }>
+  >({});
+  let preview = $state(false);
+  let requested = $state(false);
+  const active = $derived(
+    conflicts.find((c) => c.path === activePath) ?? conflicts[0],
+  );
+  const selected = $derived(active ? staged[active.path] : undefined);
+  $effect(() => {
+    if (compact.current) browserOpen = false;
+  });
+  $effect(() => {
+    if (open && !requested) {
+      requested = true;
+      untrack(() => onLoad());
+    }
+  });
+  function stage() {
+    if (active?.editor.status !== "text") return;
+    staged[active.path] = {
+      type: "uploaded_file",
+      text: drafts[active.path] ?? active.editor.contents[1] ?? "",
+    };
+  }
+</script>
+
+<RepositoryConflictSurface
+  {open}
+  label="Resolve native conflicts"
+  {busy}
+  locked={busy || preview}
+  bind:browserOpen
+  compact={compact.current}
+  files={conflicts}
+  activePath={active?.path ?? ""}
+  onSelect={(path) => {
+    activePath = path;
+    if (compact.current) browserOpen = false;
+  }}
+  {onClose}
+>
+  {#snippet actions()}
+    {#if ready && active}<RepositoryConflictActions
+        {preview}
+        resolution={selected?.type}
+        selectedCount={Object.keys(staged).length}
+        pathCount={conflicts.length}
+        onDelete={() => {
+          if (!active) return;
+          if (selected?.type === "delete") delete staged[active.path];
+          else staged[active.path] = { type: "delete" };
+        }}
+        onStage={stage}
+        onPreview={() => {
+          if (Object.keys(staged).length) preview = true;
+        }}
+        onBack={() => (preview = false)}
+      />{/if}
+  {/snippet}
+  {#if !ready}
+    {#if busy}<RepositorySkeleton
+        kind="conflicts"
+        label="Loading native conflict details…"
+      />
+    {:else}<p role="status">Conflict details are unavailable.</p>
+      <Button variant="outline" size="sm" onclick={onLoad}
+        >Retry conflict details</Button
+      >
+    {/if}
+  {:else if !conflicts.length}<p>
+      No conflict descriptors are available for this revision.
+    </p>
+  {:else if preview}
+    <section
+      class="store-conflict-preview"
+      aria-label="Conflict resolution preview"
+    >
+      <h2>Resolution draft</h2>
+      {#each Object.entries(staged) as [path, resolution] (path)}
+        <p>{resolution.type === "delete" ? "Delete" : "Replace"} {path}</p>
+        {#if resolution.type === "uploaded_file"}<pre><code
+              >{resolution.text}</code
+            ></pre>{/if}
+      {/each}
+      <p>
+        Draft retained locally while this revision stays selected. Applying
+        repository changes is unavailable in this read-only plugin.
+      </p>
+    </section>
+  {:else if active}
+    <div class="store-conflict-editor__path">
+      {#key active.path}<RepositoryConflictPath
+          conflict={active}
+          draft={drafts[active.path]}
+          onChange={(content) => {
+            drafts[active.path] = content;
+            const current = staged[active.path];
+            if (current?.type === "uploaded_file" && current.text !== content)
+              delete staged[active.path];
+          }}
+        />{/key}
+    </div>
+  {/if}
+</RepositoryConflictSurface>

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

@@ -0,0 +1,12 @@
+import type { LocalConflictDescriptor } from "@lapismd/jj-history";
+type $$ComponentProps = {
+    open: boolean;
+    conflicts: readonly LocalConflictDescriptor[];
+    ready: boolean;
+    busy: boolean;
+    onLoad(): void;
+    onClose(): void;
+};
+declare const RepositoryConflictResolution: import("svelte").Component<$$ComponentProps, {}, "">;
+type RepositoryConflictResolution = ReturnType<typeof RepositoryConflictResolution>;
+export default RepositoryConflictResolution;

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

@@ -0,0 +1,105 @@
+<script lang="ts">
+  import { setContext, type Snippet } from "svelte";
+  import {
+    conflictMenuContext,
+    type ConflictMenuState,
+  } from "../../controllers/conflict-menu.js";
+  import { AppShell } from "@lapismd/design-core/shell";
+  import { Button } from "@lapismd/design-core/shadcn/button";
+  import XIcon from "@lucide/svelte/icons/x";
+  import RepositorySidebarToggleIcon from "./RepositorySidebarToggleIcon.svelte";
+  import RepositoryConflictBody from "./RepositoryConflictBody.svelte";
+  import "./repository-conflicts.css";
+  let bodyHeight = $state(0);
+  function measure(node: HTMLDivElement) {
+    const observer = new ResizeObserver(() => {
+      bodyHeight = node.clientHeight;
+    });
+    observer.observe(node);
+    return { destroy: () => observer.disconnect() };
+  }
+  let {
+    open,
+    label,
+    returnFocus,
+    busy,
+    dismissOnEscape = true,
+    locked,
+    browserOpen = $bindable(true),
+    compact,
+    files,
+    activePath,
+    onSelect,
+    onClose,
+    actions,
+    children,
+  }: {
+    open: boolean;
+    label: string;
+    returnFocus?: HTMLElement | null;
+    busy: boolean;
+    dismissOnEscape?: boolean;
+    locked: boolean;
+    browserOpen?: boolean;
+    compact: boolean;
+    files: readonly { path: string }[];
+    activePath: string;
+    onSelect: (path: string) => void;
+    onClose: () => void;
+    actions: Snippet;
+    children: Snippet;
+  } = $props();
+  const menus = new Set<symbol>();
+  let menuCount = $state(0);
+  setContext<ConflictMenuState>(conflictMenuContext, (id, next) => {
+    if (next) menus.add(id);
+    else menus.delete(id);
+    menuCount = menus.size;
+  });
+</script>
+
+<AppShell.SurfaceLayer
+  {open}
+  {returnFocus}
+  {label}
+  coverPanelIds={["right"]}
+  mobilePlacement="root"
+  dismissOnEscape={!busy && dismissOnEscape && menuCount === 0}
+  onDismiss={onClose}
+  class="store-conflict-editor"
+>
+  <AppShell.SurfaceLayer.Header class="store-conflict-editor__header">
+    <Button
+      type="button"
+      variant="ghost"
+      size="icon-sm"
+      aria-label={`${browserOpen ? "Hide" : "Show"} conflict file browser`}
+      title={`${browserOpen ? "Hide" : "Show"} conflict file browser`}
+      aria-expanded={browserOpen}
+      aria-controls="conflict-file-browser"
+      onclick={() => (browserOpen = !browserOpen)}
+      ><RepositorySidebarToggleIcon expanded={browserOpen} /></Button
+    >
+    <h1 class="store-conflict-editor__title">Resolve conflicts</h1>
+    {@render actions()}
+    <Button
+      type="button"
+      variant="ghost"
+      size="icon-sm"
+      aria-label="Close conflict editor"
+      disabled={busy}
+      onclick={onClose}><XIcon aria-hidden="true" /></Button
+    >
+  </AppShell.SurfaceLayer.Header>
+  <div class="store-conflict-editor__body" use:measure>
+    <RepositoryConflictBody
+      {files}
+      height={bodyHeight}
+      {activePath}
+      {browserOpen}
+      {compact}
+      {locked}
+      {onSelect}>{@render children()}</RepositoryConflictBody
+    >
+  </div>
+</AppShell.SurfaceLayer>

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

@@ -0,0 +1,23 @@
+import { type Snippet } from "svelte";
+import "./repository-conflicts.css";
+type $$ComponentProps = {
+    open: boolean;
+    label: string;
+    returnFocus?: HTMLElement | null;
+    busy: boolean;
+    dismissOnEscape?: boolean;
+    locked: boolean;
+    browserOpen?: boolean;
+    compact: boolean;
+    files: readonly {
+        path: string;
+    }[];
+    activePath: string;
+    onSelect: (path: string) => void;
+    onClose: () => void;
+    actions: Snippet;
+    children: Snippet;
+};
+declare const RepositoryConflictSurface: import("svelte").Component<$$ComponentProps, {}, "browserOpen">;
+type RepositoryConflictSurface = ReturnType<typeof RepositoryConflictSurface>;
+export default RepositoryConflictSurface;

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

@@ -0,0 +1,104 @@
+<script lang="ts">
+  import { getContext, onDestroy, type ComponentProps } from "svelte";
+  import { MergeEditor } from "@lapismd/design-core/diff";
+  import * as DropdownMenu from "@lapismd/design-core/shadcn/dropdown-menu";
+  import { Button } from "@lapismd/design-core/shadcn/button";
+  import EllipsisVertical from "@lucide/svelte/icons/ellipsis-vertical";
+  import {
+    conflictMenuContext,
+    type ConflictMenuState,
+  } from "../../controllers/conflict-menu.js";
+  let {
+    path,
+    headerActions: hostActions,
+    ...props
+  }: ComponentProps<typeof MergeEditor> = $props();
+  let settings = $state({
+    wrap: false,
+    syncHorizontalScroll: true,
+    ignoreWhitespace: false,
+    ignoreCase: false,
+  });
+  const ignoreWhitespace = $derived(
+    props.ignoreWhitespace ?? settings.ignoreWhitespace,
+  );
+  const ignoreCase = $derived(props.ignoreCase ?? settings.ignoreCase);
+  const menuId = Symbol("merge-settings");
+  const nestedMenu = getContext<ConflictMenuState | undefined>(
+    conflictMenuContext,
+  );
+  function update(patch: Partial<typeof settings>) {
+    settings = { ...settings, ...patch };
+  }
+  function menuOpen(next: boolean) {
+    if (next) nestedMenu?.(menuId, true);
+    else queueMicrotask(() => nestedMenu?.(menuId, false));
+  }
+  onDestroy(() => nestedMenu?.(menuId, false));
+</script>
+
+<MergeEditor
+  {path}
+  language={path?.endsWith(".md") ? "markdown" : null}
+  baseLabel="Resolved"
+  editableSides={["base"]}
+  {...props}
+  wrap={props.wrap ?? settings.wrap}
+  syncHorizontalScroll={props.syncHorizontalScroll ??
+    settings.syncHorizontalScroll}
+  {ignoreWhitespace}
+  {ignoreCase}
+  onResolvedChange={(change) =>
+    props.onResolvedChange?.({
+      ...change,
+      // Comparison filters cannot certify that a native conflict was resolved.
+      resolved: change.resolved && !ignoreWhitespace && !ignoreCase,
+    })}
+>
+  {#snippet headerActions()}
+    {@render hostActions?.()}
+    <DropdownMenu.Root onOpenChange={menuOpen}>
+      <DropdownMenu.Trigger>
+        {#snippet child({ props: triggerProps })}
+          <Button
+            {...triggerProps}
+            variant="ghost"
+            size="icon-xs"
+            aria-label="Merge editor settings"
+            title="Merge editor settings"
+          >
+            <EllipsisVertical aria-hidden="true" />
+          </Button>
+        {/snippet}
+      </DropdownMenu.Trigger>
+      <DropdownMenu.Content align="end" style="min-width: 14rem">
+        <DropdownMenu.Group>
+          <DropdownMenu.CheckboxItem
+            checked={props.wrap ?? settings.wrap}
+            onCheckedChange={(wrap) => update({ wrap })}
+            closeOnSelect={false}>Wrap lines</DropdownMenu.CheckboxItem
+          >
+          <DropdownMenu.CheckboxItem
+            checked={props.syncHorizontalScroll ??
+              settings.syncHorizontalScroll}
+            onCheckedChange={(syncHorizontalScroll) =>
+              update({ syncHorizontalScroll })}
+            closeOnSelect={false}
+            >Sync horizontal scroll</DropdownMenu.CheckboxItem
+          >
+          <DropdownMenu.Separator />
+          <DropdownMenu.CheckboxItem
+            checked={ignoreWhitespace}
+            onCheckedChange={(ignoreWhitespace) => update({ ignoreWhitespace })}
+            closeOnSelect={false}>Ignore whitespace</DropdownMenu.CheckboxItem
+          >
+          <DropdownMenu.CheckboxItem
+            checked={ignoreCase}
+            onCheckedChange={(ignoreCase) => update({ ignoreCase })}
+            closeOnSelect={false}>Ignore case</DropdownMenu.CheckboxItem
+          >
+        </DropdownMenu.Group>
+      </DropdownMenu.Content>
+    </DropdownMenu.Root>
+  {/snippet}
+</MergeEditor>

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

@@ -0,0 +1,26 @@
+declare const RepositoryConflictText: import("svelte").Component<{
+    mode?: import("@lapismd/design-core/diff").MergeEditorMode;
+    left: string;
+    right: string;
+    base?: string;
+    leftLabel?: string;
+    baseLabel?: string;
+    rightLabel?: string;
+    path?: string;
+    headerCenter?: import("svelte").Snippet;
+    headerActions?: import("svelte").Snippet;
+    language?: string | null;
+    readOnly?: boolean;
+    editable?: boolean;
+    editableSides?: readonly import("@lapismd/design-core/diff").MergeSide[];
+    ignoreWhitespace?: boolean;
+    ignoreCase?: boolean;
+    syncHorizontalScroll?: boolean;
+    wrap?: boolean;
+    onLeftChange?: (content: string) => void;
+    onBaseChange?: (content: string) => void;
+    onRightChange?: (content: string) => void;
+    onResolvedChange?: (state: import("@lapismd/design-core/diff").MergeResolvedChange) => void;
+}, {}, "">;
+type RepositoryConflictText = ReturnType<typeof RepositoryConflictText>;
+export default RepositoryConflictText;

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

@@ -0,0 +1,52 @@
+<script lang="ts">
+  let {
+    side = "left",
+    expanded = true,
+  }: {
+    side?: "left" | "right";
+    expanded?: boolean;
+  } = $props();
+</script>
+
+<svg
+  class="community-sidebar-toggle-icon"
+  data-ui-part="sidebar-toggle-icon"
+  data-side={side}
+  data-expanded={expanded}
+  xmlns="http://www.w3.org/2000/svg"
+  width="24"
+  height="24"
+  viewBox="0 0 24 24"
+  fill="none"
+  stroke="currentColor"
+  stroke-width="2"
+  stroke-linecap="round"
+  stroke-linejoin="round"
+  aria-hidden="true"
+>
+  <rect x="1" y="2" width="22" height="20" rx="4"></rect>
+  <g transform={side === "right" ? "translate(24 0) scale(-1 1)" : undefined}>
+    <rect
+      class="community-sidebar-toggle-icon__indicator"
+      x="4"
+      y="5"
+      width={expanded ? 6 : 2}
+      height="14"
+      rx="2"
+      fill="currentColor"
+      data-ui-part="sidebar-toggle-indicator"
+    ></rect>
+  </g>
+</svg>
+
+<style>
+  .community-sidebar-toggle-icon__indicator {
+    width: 2px;
+    transition: width 140ms ease;
+  }
+
+  .community-sidebar-toggle-icon[data-expanded="true"]
+    .community-sidebar-toggle-icon__indicator {
+    width: 6px;
+  }
+</style>

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

@@ -0,0 +1,7 @@
+type $$ComponentProps = {
+    side?: "left" | "right";
+    expanded?: boolean;
+};
+declare const RepositorySidebarToggleIcon: import("svelte").Component<$$ComponentProps, {}, "">;
+type RepositorySidebarToggleIcon = ReturnType<typeof RepositorySidebarToggleIcon>;
+export default RepositorySidebarToggleIcon;