@kestack/web-platform 0.0.0-stage → 0.0.1

package/src/components/viewers/diff-viewer/render-model.ts

@@ -0,0 +1,123 @@
+import type { DiffHunk } from 'laymos';
+import type { SourceViewerLine } from '../source-viewer';
+
+import { alignHunks, unifiedLines, type DiffCell, type DiffRow } from './align';
+import { collapseRuns } from './collapse';
+
+export interface SplitSection {
+  readonly header: string;
+  readonly left: SideContent;
+  readonly right: SideContent;
+}
+
+export interface SideContent {
+  readonly content: string;
+  readonly lines: readonly SourceViewerLine[];
+}
+
+export function splitSections(
+  hunks: readonly DiffHunk[],
+): readonly SplitSection[] {
+  return alignHunks(hunks).map(({ header, rows }) => ({
+    header,
+    left: side(rows.map(({ left }) => left)),
+    right: side(rows.map(({ right }) => right)),
+  }));
+}
+
+export function splitRows(hunks: readonly DiffHunk[]): readonly DiffRow[] {
+  return alignHunks(hunks).flatMap(({ rows }) => rows);
+}
+
+export function sideOfRows(
+  rows: readonly DiffRow[],
+  which: 'left' | 'right',
+): SideContent {
+  return side(rows.map((row) => row[which]));
+}
+
+export function unifiedSide(hunks: readonly DiffHunk[]): SideContent {
+  const entries = unifiedLines(hunks);
+  return {
+    content: entries.map(({ content }) => content).join('\n'),
+    lines: entries.map(unifiedLineStatus),
+  };
+}
+
+function unifiedLineStatus(
+  entry: ReturnType<typeof unifiedLines>[number],
+): SourceViewerLine {
+  switch (entry.kind) {
+    case 'header':
+      return { status: 'meta' };
+    case 'added':
+      return { status: 'add', number: entry.newNumber };
+    case 'removed':
+      return { status: 'remove', number: entry.oldNumber };
+    default:
+      return { status: 'context', number: entry.newNumber };
+  }
+}
+
+function side(cells: readonly DiffCell[]): SideContent {
+  return {
+    content: cells
+      .map((cell) => (cell.kind === 'empty' ? '' : cell.line.content))
+      .join('\n'),
+    lines: cells.map((cell) => {
+      if (cell.kind === 'empty') return { status: 'empty' as const };
+      const number =
+        cell.kind === 'added' ? cell.line.newNumber : cell.line.oldNumber;
+      const status =
+        cell.kind === 'added'
+          ? ('add' as const)
+          : cell.kind === 'removed'
+            ? ('remove' as const)
+            : ('context' as const);
+      return number === undefined ? { status } : { status, number };
+    }),
+  };
+}
+
+// One side on its own is just that file: every line it contains, in order,
+// numbered as it is numbered there, with no alignment padding and no marks.
+export function fullSide(
+  hunks: readonly DiffHunk[],
+  side: 'left' | 'right',
+): SideContent {
+  const skipped = side === 'left' ? 'added' : 'removed';
+  const lines = hunks
+    .flatMap((hunk) => hunk.lines)
+    .filter(({ kind }) => kind !== skipped);
+  return {
+    content: lines.map(({ content }) => content).join('\n'),
+    lines: lines.map((line) => {
+      const number = side === 'left' ? line.oldNumber : line.newNumber;
+      return number === undefined
+        ? { status: 'context' as const }
+        : { status: 'context' as const, number };
+    }),
+  };
+}
+
+export interface UnifiedChunk {
+  readonly collapsible: boolean;
+  readonly count: number;
+  readonly side: SideContent;
+}
+
+export function unifiedChunks(
+  hunks: readonly DiffHunk[],
+): readonly UnifiedChunk[] {
+  const entries = unifiedLines(hunks);
+  return collapseRuns(entries, (entry) => entry.kind === 'context').map(
+    (run) => ({
+      collapsible: run.collapsible,
+      count: run.items.length,
+      side: {
+        content: run.items.map(({ content }) => content).join('\n'),
+        lines: run.items.map(unifiedLineStatus),
+      },
+    }),
+  );
+}

package/src/components/viewers/diff-viewer/sync-rows.ts

@@ -0,0 +1,41 @@
+// Both panes scroll independently, so their rows must be kept level by hand:
+// a wrapped line on one side is taller than its partner on the other.
+export function equalizeRowHeights(
+  left: HTMLElement,
+  right: HTMLElement,
+): void {
+  const leftLines = left.querySelectorAll<HTMLElement>('.source-line');
+  const rightLines = right.querySelectorAll<HTMLElement>('.source-line');
+  const count = Math.min(leftLines.length, rightLines.length);
+
+  for (let index = 0; index < count; index += 1) {
+    (leftLines[index] as HTMLElement).style.minHeight = '';
+    (rightLines[index] as HTMLElement).style.minHeight = '';
+  }
+  for (let index = 0; index < count; index += 1) {
+    const leftLine = leftLines[index] as HTMLElement;
+    const rightLine = rightLines[index] as HTMLElement;
+    const height = Math.max(leftLine.offsetHeight, rightLine.offsetHeight);
+    leftLine.style.minHeight = `${height}px`;
+    rightLine.style.minHeight = `${height}px`;
+  }
+}
+
+export function syncScroll(
+  from: HTMLElement,
+  to: HTMLElement,
+  lock: { current: boolean },
+): void {
+  if (lock.current) {
+    lock.current = false;
+    return;
+  }
+  lock.current = true;
+  to.scrollTop = from.scrollTop;
+}
+
+export function clearRowHeights(pane: HTMLElement): void {
+  for (const line of pane.querySelectorAll<HTMLElement>('.source-line')) {
+    line.style.minHeight = '';
+  }
+}

package/src/components/viewers/file-tree/expand.ts

@@ -0,0 +1,58 @@
+function folderPaths(files: string[]): string[] {
+  const folders = new Set<string>();
+  for (const file of files) {
+    const segments = file.split('/');
+    for (let i = 1; i < segments.length; i++) {
+      folders.add(segments.slice(0, i).join('/'));
+    }
+  }
+  return [...folders];
+}
+
+export function expandAll(files: string[]): string[] {
+  return folderPaths(files);
+}
+
+export function expandToDepth(files: string[], depth: number): string[] {
+  return folderPaths(files).filter(
+    (folder) => folder.split('/').length <= depth,
+  );
+}
+
+export function expandTo(files: string[], path: string): string[] {
+  const folders = new Set(folderPaths(files));
+  const segments = path.split('/');
+  const result: string[] = [];
+  for (let i = 1; i <= segments.length; i++) {
+    const prefix = segments.slice(0, i).join('/');
+    if (folders.has(prefix)) result.push(prefix);
+  }
+  return result;
+}
+
+export function toggleSubtree(
+  files: string[],
+  expanded: string[],
+  path: string,
+): string[] {
+  const prefix = `${path}/`;
+  const outsideDescendants = expanded.filter(
+    (folder) => !folder.startsWith(prefix),
+  );
+  const descendants = folderPaths(files).filter((folder) =>
+    folder.startsWith(prefix),
+  );
+  if (descendants.length === 0) {
+    return expanded.includes(path)
+      ? outsideDescendants.filter((folder) => folder !== path)
+      : [...outsideDescendants, path];
+  }
+  if (!expanded.includes(path)) return [...outsideDescendants, path];
+
+  const isDeepExpanded = descendants.every((folder) =>
+    expanded.includes(folder),
+  );
+  return isDeepExpanded
+    ? outsideDescendants
+    : [...new Set([...outsideDescendants, ...descendants])];
+}

package/src/components/viewers/file-tree/file-tree.tsx

@@ -0,0 +1,199 @@
+import {
+  FileIcon,
+  FolderIcon,
+  FolderMinusIcon,
+  FolderOpenIcon,
+} from 'lucide-react';
+import { useMemo, type ReactNode } from 'react';
+import { cn } from '#lib/utils';
+import { toggleSubtree } from './expand';
+
+type TreeNode = {
+  path: string;
+  name: string;
+  children: TreeNode[] | null;
+};
+
+type Emphasis = 'highlighted' | 'dimmed' | null;
+
+type FileTreeProps = {
+  files: string[];
+  expanded: string[];
+  onExpandedChange: (expanded: string[]) => void;
+  highlightedPaths?: string[];
+  dimmedPaths?: string[];
+  /** Dim every row that is neither highlighted nor an ancestor of a highlight. */
+  dimOthers?: boolean;
+  onPathClick?: (path: string) => void;
+  renderSuffix?: (path: string) => ReactNode;
+  classNameForPath?: (path: string) => string | undefined;
+  /** Accent for the leading icon only — a second signal independent of row text. */
+  iconClassNameForPath?: (path: string) => string | undefined;
+  className?: string;
+};
+
+const collator = new Intl.Collator('en', {
+  numeric: true,
+  sensitivity: 'base',
+});
+
+function buildTree(files: string[]): TreeNode[] {
+  const root: TreeNode = { path: '', name: '', children: [] };
+  const byPath = new Map<string, TreeNode>([['', root]]);
+  for (const file of files) {
+    // A trailing slash declares an explicit (possibly empty) folder.
+    const isExplicitFolder = file.endsWith('/');
+    const segments = (isExplicitFolder ? file.slice(0, -1) : file).split('/');
+    let parent = root;
+    for (let i = 0; i < segments.length; i++) {
+      const path = segments.slice(0, i + 1).join('/');
+      let node = byPath.get(path);
+      if (!node) {
+        node = {
+          path,
+          name: segments[i]!,
+          children: i < segments.length - 1 || isExplicitFolder ? [] : null,
+        };
+        byPath.set(path, node);
+        parent.children!.push(node);
+      }
+      if (node.children) parent = node;
+    }
+  }
+  sortTree(root.children!);
+  return root.children!;
+}
+
+function sortTree(nodes: TreeNode[]) {
+  nodes.sort((a, b) => {
+    if ((a.children !== null) !== (b.children !== null)) {
+      return a.children !== null ? -1 : 1;
+    }
+    return collator.compare(a.name, b.name);
+  });
+  for (const node of nodes) {
+    if (node.children) sortTree(node.children);
+  }
+}
+
+function longestPrefixLength(path: string, prefixes: string[]): number {
+  let best = -1;
+  for (const prefix of prefixes) {
+    if (path === prefix || path.startsWith(`${prefix}/`)) {
+      best = Math.max(best, prefix.length);
+    }
+  }
+  return best;
+}
+
+export function FileTree({
+  files,
+  expanded,
+  onExpandedChange,
+  highlightedPaths = [],
+  dimmedPaths = [],
+  dimOthers = false,
+  onPathClick,
+  renderSuffix,
+  classNameForPath,
+  iconClassNameForPath,
+  className,
+}: FileTreeProps) {
+  const roots = useMemo(() => buildTree(files), [files]);
+  const expandedSet = useMemo(() => new Set(expanded), [expanded]);
+
+  // Longest matching prefix wins; on a tie, highlight beats dim.
+  const emphasisFor = (path: string): Emphasis => {
+    const highlight = longestPrefixLength(path, highlightedPaths);
+    const dim = longestPrefixLength(path, dimmedPaths);
+    if (highlight >= 0 || dim >= 0) {
+      return highlight >= dim ? 'highlighted' : 'dimmed';
+    }
+    if (!dimOthers) return null;
+    const isAncestorOfHighlight = highlightedPaths.some((prefix) =>
+      prefix.startsWith(`${path}/`),
+    );
+    return isAncestorOfHighlight ? null : 'dimmed';
+  };
+
+  const toggle = (path: string) => {
+    onExpandedChange(
+      expandedSet.has(path)
+        ? expanded.filter((item) => item !== path)
+        : [...expanded, path],
+    );
+  };
+
+  const renderNode = (node: TreeNode, depth: number): ReactNode => {
+    const isFolder = node.children !== null;
+    const isEmptyFolder = isFolder && node.children!.length === 0;
+    const isExpanded = isFolder && !isEmptyFolder && expandedSet.has(node.path);
+    const emphasis = emphasisFor(node.path);
+    const Icon = isEmptyFolder
+      ? FolderMinusIcon
+      : isFolder
+        ? isExpanded
+          ? FolderOpenIcon
+          : FolderIcon
+        : FileIcon;
+
+    return (
+      <div key={node.path}>
+        <button
+          type="button"
+          disabled={isEmptyFolder}
+          // Lets a caller find a row by its path, to bring it into view.
+          data-path={node.path}
+          aria-expanded={isFolder && !isEmptyFolder ? isExpanded : undefined}
+          style={{ paddingInlineStart: `${depth * 1 + 0.25}rem` }}
+          onClick={() => {
+            if (isFolder) toggle(node.path);
+            onPathClick?.(node.path);
+          }}
+          onContextMenu={(event) => {
+            if (!isFolder || isEmptyFolder) return;
+            event.preventDefault();
+            onExpandedChange(toggleSubtree(files, expanded, node.path));
+          }}
+          className={cn(
+            'flex w-full min-w-0 select-none items-center gap-1.5 rounded-md py-0.5 pe-1 text-sm',
+            isEmptyFolder
+              ? 'cursor-default text-muted-foreground'
+              : 'cursor-pointer hover:bg-accent/50',
+            emphasis === 'highlighted' && 'bg-primary/10 text-primary',
+            emphasis === 'dimmed' && 'opacity-40',
+            classNameForPath?.(node.path),
+          )}
+        >
+          <Icon
+            className={cn('size-4 shrink-0', iconClassNameForPath?.(node.path))}
+          />
+          <span title={node.name} className="min-w-0 truncate">
+            {node.name}
+          </span>
+          {renderSuffix ? (
+            <span className="ms-auto flex shrink-0 items-center">
+              {renderSuffix(node.path)}
+            </span>
+          ) : null}
+        </button>
+        {isExpanded ? (
+          <div className="relative">
+            <span
+              aria-hidden
+              className="absolute inset-y-0 w-px bg-border"
+              style={{ insetInlineStart: `${depth + 0.7}rem` }}
+            />
+            {node.children!.map((child) => renderNode(child, depth + 1))}
+          </div>
+        ) : null}
+      </div>
+    );
+  };
+
+  return (
+    <div className={cn('flex flex-col gap-px', className)}>
+      {roots.map((node) => renderNode(node, 0))}
+    </div>
+  );
+}

package/src/components/viewers/file-tree/index.ts

@@ -0,0 +1,2 @@
+export { expandAll, expandTo, expandToDepth, toggleSubtree } from './expand';
+export { FileTree } from './file-tree';