@tanishqkancharla/diffmap 0.1.5 → 0.3.0

package/src/viewer/ChangesCard.tsx

@@ -0,0 +1,267 @@
+import {
+  backgroundColor,
+  borderColor,
+  colors,
+  Css,
+  File,
+  FileCode,
+  FileText,
+  focusRing,
+  GitBranch,
+  text,
+} from "maui";
+import { style, useStyles } from "purse-styles";
+import type { SourceAnnotation, SourceNavigation } from "../annotations.js";
+import {
+  isCommitRev,
+  shortRev,
+  WORKING,
+  type ChangedFile,
+  type Changes,
+  type Rev,
+} from "../changes.js";
+import { codeFontFamily } from "../codeFont.js";
+import { useChanges } from "./changesSource.ts";
+import { pierreShell } from "./pierre.js";
+
+/** A phase's file summary. Review opens every file; a row focuses one. */
+export function ChangesCard(props: { rev: Rev } & SourceNavigation) {
+  const changes = useChanges(props.rev);
+  const shell = useStyles(pierreShell, styles.shell);
+  const header = useStyles(styles.header);
+  const row = useStyles(styles.row);
+  const review = useStyles(styles.review);
+  const muted = useStyles(styles.muted);
+  const range = useStyles(styles.range);
+  const open = (annotation: SourceAnnotation) =>
+    props.onSelectAnnotation(annotation);
+  const files =
+    changes === undefined || changes instanceof Error ? [] : changes.files;
+  return (
+    <div className={shell} data-diffmap-kind="changes">
+      <div className={header}>
+        <GitBranch size="sm" />
+        <span className={range}>{revLabel(props.rev, changes)}</span>
+        {changes === undefined || changes instanceof Error ? (
+          <span className={muted}>
+            {changes === undefined ? "Loading changes…" : changes.message}
+          </span>
+        ) : (
+          <ChangesSummary changes={changes} />
+        )}
+        {files.length > 0 && (
+          <button
+            type="button"
+            className={review}
+            aria-controls="source-diff-panel"
+            onClick={() =>
+              open({
+                text: "Review",
+                references: [{ kind: "changes", rev: props.rev }],
+              })
+            }
+          >
+            Review
+          </button>
+        )}
+      </div>
+      {files.map((file) => {
+        const annotation: SourceAnnotation = {
+          text: file.path,
+          references: [
+            props.rev === WORKING
+              ? { kind: "file", path: file.path }
+              : { kind: "file", rev: props.rev, path: file.path },
+          ],
+        };
+        return (
+          <button
+            key={file.path}
+            type="button"
+            className={row}
+            title={file.path}
+            aria-controls="source-diff-panel"
+            aria-pressed={
+              props.selectedAnnotation?.text === file.path &&
+              props.selectedAnnotation.references[0]?.kind === "file" &&
+              props.selectedAnnotation.references[0].rev ===
+                annotation.references[0]!.rev
+            }
+            onClick={() => open(annotation)}
+          >
+            <FileIcon path={file.path} />
+            <span className="name">
+              {file.path.split("/").pop()}
+              {file.status === "deleted" && (
+                <span className={muted}> deleted</span>
+              )}
+            </span>
+            <DiffStat file={file} />
+          </button>
+        );
+      })}
+    </div>
+  );
+}
+
+/** "9 files changed +214 −119" for a whole rev; the card and the Diff panel header share it. */
+export function ChangesSummary(props: {
+  changes: Changes;
+  className?: string;
+}) {
+  const summary = useStyles(styles.summary);
+  const { files, truncated } = props.changes;
+  const additions = files.reduce((sum, file) => sum + file.additions, 0);
+  const deletions = files.reduce((sum, file) => sum + file.deletions, 0);
+  const count = files.length;
+  return (
+    <span className={`${summary} ${props.className ?? ""}`}>
+      <span
+        title={
+          truncated === true
+            ? "GitHub listed only these files. Open the commit on GitHub for the rest."
+            : undefined
+        }
+      >
+        {count}
+        {truncated === true && "+"} {count === 1 ? "file" : "files"} changed
+      </span>
+      {additions > 0 && <span className="added">+{additions}</span>}
+      {deletions > 0 && <span className="removed">−{deletions}</span>}
+    </span>
+  );
+}
+
+/** Labels the rev as the range picker does: a commit by its title, a range as `<from>…<to>`. */
+function revLabel(rev: Rev, changes: Changes | Error | undefined) {
+  const single = isCommitRev(rev) && !rev.includes("..");
+  if (single && changes !== undefined && !(changes instanceof Error))
+    return changes.title;
+  return shortRev(rev).replace("..", "…");
+}
+
+function DiffStat(props: { file: ChangedFile }) {
+  if (props.file.binary) return <span className="stat">binary</span>;
+  return (
+    <span className="stat">
+      {props.file.additions > 0 && (
+        <span className="added">+{props.file.additions}</span>
+      )}
+      {props.file.deletions > 0 && (
+        <span className="removed">−{props.file.deletions}</span>
+      )}
+    </span>
+  );
+}
+
+function FileIcon(props: { path: string }) {
+  const extension = props.path.split(".").pop()?.toLowerCase() ?? "";
+  if (/^(css|scss|less)$/.test(extension)) return <Css size="sm" />;
+  if (/^(md|mdx|txt|rst)$/.test(extension)) return <FileText size="sm" />;
+  if (
+    /^(c|cc|cpp|cs|go|h|java|jsx?|kt|mjs|cjs|py|rb|rs|sh|swift|tsx?|vue|svelte|json|ya?ml|toml|html)$/.test(
+      extension,
+    )
+  )
+    return <FileCode size="sm" />;
+  return <File size="sm" />;
+}
+
+/** Left inset of the file rows' icons. */
+const ROW_INSET = 6;
+/** Review's box inset from the card's top and right edges: (36px header − 24px button) / 2. */
+const EDGE = 6;
+/** Right inset of the stats, which Review's text also ends at. */
+const STAT_INSET = 12;
+
+const styles = {
+  shell: style(text({ size: "sm", color: "highContrast" }), {
+    backgroundColor: backgroundColor.app,
+    maxWidth: "100%",
+  }),
+  // Same insets and gap as the file rows, so the branch icon lines up with the file icons
+  // and the range with the names. Review's box sits EDGE from the top and right; its
+  // text lines up with the stats.
+  header: style({
+    display: "flex",
+    alignItems: "center",
+    gap: "10px",
+    minHeight: "36px",
+    paddingLeft: `${String(ROW_INSET)}px`,
+    paddingRight: `${String(EDGE)}px`,
+    "& > svg": { flexShrink: 0, color: colors.gray[11] },
+    // Divides the summary from the file rows; a card with no files has no divider.
+    "&:not(:last-child)": { borderBottom: `1px solid ${borderColor.border}` },
+  }),
+  range: style(text({ size: "sm", fontWeight: 500, color: "highContrast" }), {
+    flex: "1 1 auto",
+    minWidth: 0,
+    overflow: "hidden",
+    textOverflow: "ellipsis",
+    whiteSpace: "nowrap",
+  }),
+  summary: style(text({ size: "sm", color: "lowContrast" }), {
+    display: "flex",
+    gap: "8px",
+    flexShrink: 0,
+    whiteSpace: "nowrap",
+    fontVariantNumeric: "tabular-nums",
+    "& .added, & .removed": { fontFamily: codeFontFamily },
+    "& .added": { color: colors.green[11] },
+    "& .removed": { color: colors.red[11] },
+  }),
+  review: style(
+    text({ size: "sm", fontWeight: 400, color: "highContrast" }),
+    {
+      height: "24px",
+      padding: `0 ${String(STAT_INSET - EDGE)}px`,
+      border: 0,
+      borderRadius: "4px",
+      background: "transparent",
+      cursor: "pointer",
+      "&:hover": { backgroundColor: colors.gray[3] },
+    },
+    focusRing(),
+  ),
+  row: style(
+    {
+      paddingLeft: `${String(ROW_INSET)}px`,
+      paddingRight: `${String(STAT_INSET)}px`,
+      display: "flex",
+      alignItems: "center",
+      gap: "10px",
+      width: "100%",
+      minHeight: "32px",
+      font: "inherit",
+      textAlign: "left",
+      color: "inherit",
+      background: "transparent",
+      border: 0,
+      cursor: "pointer",
+      "& > svg": { flexShrink: 0, color: colors.gray[11] },
+      "& .name": {
+        flex: "1 1 auto",
+        minWidth: 0,
+        overflow: "hidden",
+        textOverflow: "ellipsis",
+        whiteSpace: "nowrap",
+      },
+      "& .stat": {
+        display: "flex",
+        gap: "8px",
+        flexShrink: 0,
+        fontFamily: codeFontFamily,
+        fontVariantNumeric: "tabular-nums",
+        color: colors.gray[11],
+      },
+      "& .added": { color: colors.green[11] },
+      "& .removed": { color: colors.red[11] },
+      "&:hover": { backgroundColor: colors.gray[3] },
+      "&[aria-pressed='true'], &[aria-pressed='true']:hover": {
+        backgroundColor: colors.blue[3],
+      },
+    },
+    focusRing(),
+  ),
+  muted: style({ color: colors.gray[11] }),
+};

package/src/viewer/ComarkView.tsx

@@ -1,8 +1,9 @@
 import { createElement, type ReactNode, useState } from "react";
 import {
   Checkbox,
+  Code,
   colors,
-  monospace,
+  focusRing,
   radius,
   spacing,
   Table,
@@ -19,7 +20,7 @@ import type {
   ViewerElement,
   ViewerNode,
 } from "../parseViewer.js";
-import type { SourceNavigation } from "../annotations.js";
+import type { SourceAnnotation, SourceNavigation } from "../annotations.js";
 import { Fence } from "./Fence.tsx";
 import { HtmlPlaceholder } from "./HtmlPlaceholder.tsx";
 import { useViewerMode } from "./viewerMode.ts";
@@ -60,6 +61,11 @@ function renderNode(
   if (node.type === "view") {
     return <Fence key={key} fence={node.fence} {...navigation} />;
   }
+  if (node.type === "reference") {
+    return (
+      <InlineReference key={key} annotation={node.annotation} {...navigation} />
+    );
+  }
   return renderElement(node, key, navigation, trustedHtml);
 }
 
@@ -89,7 +95,15 @@ function renderElement(
     );
   }
   if (node.tag === "code") {
-    return <InlineChip key={key}>{children}</InlineChip>;
+    return (
+      <Code
+        key={key}
+        {...domAttrs(node)}
+        style={{ whiteSpace: "normal", overflowWrap: "anywhere" }}
+      >
+        {children}
+      </Code>
+    );
   }
   if (voidTags.has(node.tag)) {
     return createElement(node.tag, { key, ...domAttrs(node) });
@@ -156,12 +170,33 @@ function renderTable(
   );
 }
 
+function InlineReference(
+  props: { annotation: SourceAnnotation } & SourceNavigation,
+) {
+  const className = useStyles(inlineReferenceClass);
+  return (
+    <button
+      type="button"
+      className={className}
+      aria-pressed={props.selectedAnnotation === props.annotation}
+      aria-controls="source-diff-panel"
+      title={props.annotation.text}
+      onClick={() => props.onSelectAnnotation(props.annotation)}
+    >
+      <Code>{props.annotation.text}</Code>
+    </button>
+  );
+}
+
 function TaskListItem(props: { node: ViewerElement; children: ReactNode }) {
   const [checked, setChecked] = useState(props.node.attrs.checked === true);
+  const className = useStyles(taskListItemClass);
   return (
     <li
       id={props.node.attrs.id}
-      className={props.node.attrs.className}
+      className={[className, props.node.attrs.className]
+        .filter(Boolean)
+        .join(" ")}
       data-task=""
     >
       <span className="diffmap-task-checkbox">
@@ -171,13 +206,14 @@ function TaskListItem(props: { node: ViewerElement; children: ReactNode }) {
           setChecked={setChecked}
         />
       </span>
-      {props.children}
+      <div className="diffmap-task-content">{props.children}</div>
     </li>
   );
 }
 
 function nodeText(node: ViewerNode): string {
   if (node.type === "text") return node.value;
+  if (node.type === "reference") return node.annotation.text;
   if (node.type !== "element") return "";
   return node.children.map(nodeText).join("");
 }
@@ -194,16 +230,48 @@ function domAttrs(node: ViewerElement) {
   };
 }
 
-function InlineChip(props: { children?: ReactNode }) {
-  const className = useStyles(inlineCodeClass);
-  return <code className={className}>{props.children}</code>;
-}
-
-const inlineCodeClass = style(
-  monospace,
-  radius.md,
-  spacing.padding({ x: 2, y: 1 }),
+const inlineReferenceClass = style(
+  radius.sm,
   {
-    backgroundColor: colors.gray[4],
+    display: "inline",
+    padding: 0,
+    border: 0,
+    font: "inherit",
+    color: "inherit",
+    background: "transparent",
+    cursor: "pointer",
+    "& > code": { color: colors.blue[11] },
+    "&:hover > code": { backgroundColor: colors.blue[3] },
+    "&[aria-pressed='true'] > code": {
+      backgroundColor: colors.blue[4],
+      color: colors.blue[12],
+    },
   },
+  focusRing(),
 );
+
+const taskListItemClass = style({
+  display: "grid",
+  gridTemplateColumns: "auto minmax(0, 1fr)",
+  alignItems: "start",
+  columnGap: spacing.value(3),
+  "& > .diffmap-task-checkbox": {
+    display: "flex",
+    alignItems: "center",
+    minHeight: "1lh",
+  },
+  "& > .diffmap-task-content": {
+    minWidth: 0,
+  },
+  "& .diffmap-task-checkbox label > span:last-child": {
+    position: "absolute",
+    width: "1px",
+    height: "1px",
+    padding: 0,
+    margin: "-1px",
+    overflow: "hidden",
+    clip: "rect(0, 0, 0, 0)",
+    whiteSpace: "nowrap",
+    border: 0,
+  },
+});

package/src/viewer/Fence.tsx

@@ -2,6 +2,7 @@ import { CodeBlock } from "maui";
 import type { Fence as FenceModel } from "../parseFence.js";
 import type { SourceNavigation } from "../annotations.js";
 import { CallStackDiff } from "./CallStackDiff.tsx";
+import { ChangesCard } from "./ChangesCard.tsx";
 import { CodeDiff } from "./CodeDiff.tsx";
 import { FileExcerpt } from "./FileExcerpt.tsx";
 import { HtmlBlock } from "./HtmlBlock.tsx";
@@ -25,7 +26,14 @@ export function Fence(props: { fence: FenceModel } & SourceNavigation) {
     if (!trustedHtml) return <HtmlPlaceholder />;
     return <HtmlBlock source={fence.source} />;
   }
-  if (fence.kind === "source-diff") return undefined;
+  if (fence.kind === "changes")
+    return (
+      <ChangesCard
+        rev={fence.rev}
+        selectedAnnotation={props.selectedAnnotation}
+        onSelectAnnotation={props.onSelectAnnotation}
+      />
+    );
   if (fence.kind === "callstack")
     return (
       <CallStackDiff

package/src/viewer/MermaidBlock.tsx

@@ -1,19 +1,80 @@
-import { useEffect, useMemo, useRef } from "react";
-import { backgroundColor, colors, fontFamily } from "maui";
+import { useEffect, useMemo, useRef, useState } from "react";
+import {
+  Button,
+  Close,
+  Dialog,
+  Maximize,
+  backgroundColor,
+  colors,
+  fontFamily,
+  spacing,
+} from "maui";
 import { style, useStyles } from "purse-styles";
 import { mermaidSvg } from "../mermaid.js";
 import type { DiagramAnnotation } from "../diagramAnnotations.js";
 import type { SourceNavigation } from "../annotations.js";
 import { linkDiagram } from "./diagramLinks.js";
 
-export function MermaidBlock(
-  props: {
-    source: string;
-    annotations: DiagramAnnotation[];
-  } & SourceNavigation,
-) {
+type MermaidProps = {
+  source: string;
+  annotations: DiagramAnnotation[];
+} & SourceNavigation;
+
+export function MermaidBlock(props: MermaidProps) {
+  const [fullscreen, setFullscreen] = useState(false);
+  const frame = useStyles(styles.frame);
+  const expand = useStyles(styles.expand);
+  const dialog = useStyles(styles.dialog);
+  const header = useStyles(styles.header);
+  return (
+    <div className={frame}>
+      <MermaidDiagram {...props} fullscreen={false} />
+      <Button
+        className={expand}
+        size="sm"
+        variant="quiet"
+        aria-label="Full screen"
+        onClick={() => setFullscreen(true)}
+      >
+        <Maximize size="xs" />
+      </Button>
+      <Dialog
+        isOpen={fullscreen}
+        onOpenChange={setFullscreen}
+        size="lg"
+        aria-label="Diagram"
+        className={dialog}
+      >
+        <div className={header}>
+          <Button
+            size="sm"
+            variant="quiet"
+            slot="close"
+            aria-label="Exit full screen"
+          >
+            <Close size="xs" />
+          </Button>
+        </div>
+        <MermaidDiagram
+          {...props}
+          fullscreen
+          onSelectAnnotation={(annotation) => {
+            // The Diff panel opens behind the dialog, so leave full screen.
+            setFullscreen(false);
+            props.onSelectAnnotation(annotation);
+          }}
+        />
+      </Dialog>
+    </div>
+  );
+}
+
+function MermaidDiagram(props: MermaidProps & { fullscreen: boolean }) {
   const container = useRef<HTMLDivElement>(null);
-  const shell = useStyles(styles.shell);
+  const shell = useStyles(
+    styles.shell,
+    props.fullscreen ? styles.fullscreenShell : styles.inlineShell,
+  );
   const svg = useMemo(
     () =>
       mermaidSvg({
@@ -91,9 +152,37 @@ export function MermaidBlock(
 }
 
 const styles = {
-  shell: style({
+  frame: style({
+    position: "relative",
     width: "100%",
+    minWidth: 0,
+  }),
+  expand: style({
+    position: "absolute",
+    top: 0,
+    insetInlineEnd: 0,
+  }),
+  dialog: style({
+    width: "calc(100vw - 32px)",
+    height: "calc(100dvh - 32px)",
+    padding: spacing.value(6),
+    "& > [role='dialog']": { flex: 1, minHeight: 0, gap: spacing.value(2) },
+  }),
+  header: style({
+    display: "flex",
+    justifyContent: "flex-end",
+  }),
+  inlineShell: style({
     maxHeight: "60vh",
+    "& svg": { maxHeight: "60vh" },
+  }),
+  fullscreenShell: style({
+    flex: 1,
+    "& svg": { height: "100%" },
+  }),
+  shell: style({
+    width: "100%",
+    minHeight: 0,
     overflow: "auto",
     minWidth: 0,
     border: 0,
@@ -120,7 +209,6 @@ const styles = {
       display: "block",
       width: "100%",
       height: "auto",
-      maxHeight: "60vh",
     },
   }),
 };