@tanishqkancharla/diffmap 0.3.0 → 0.6.0

package/src/viewer/ChangesCard.tsx

@@ -1,6 +1,8 @@
+import { useId, useState } from "react";
+import { AnimatePresence, motion, useReducedMotion } from "motion/react";
 import {
-  backgroundColor,
   borderColor,
+  ChevronRight,
   colors,
   Css,
   File,
@@ -8,12 +10,15 @@ import {
   FileText,
   focusRing,
   GitBranch,
+  motionDurationMs,
+  motionEasing,
   text,
 } from "maui";
 import { style, useStyles } from "purse-styles";
-import type { SourceAnnotation, SourceNavigation } from "../annotations.js";
+import type { SourceNavigation } from "../annotations.js";
 import {
   isCommitRev,
+  orderForReview,
   shortRev,
   WORKING,
   type ChangedFile,
@@ -24,19 +29,32 @@ 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) {
+/**
+ * A phase's file summary. Review opens every file; a row focuses one. Files
+ * the fence lists come first, in its order; the rest fold under a dimmed
+ * "N other files" section.
+ */
+export function ChangesCard(
+  props: { rev: Rev; review: string[] } & SourceNavigation,
+) {
   const changes = useChanges(props.rev);
+  const [showOther, setShowOther] = useState(false);
+  const otherId = useId();
+  const reducedMotion = useReducedMotion();
   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 toggle = useStyles(styles.row, styles.toggle);
   const files =
     changes === undefined || changes instanceof Error ? [] : changes.files;
+  const { reviewed, other } = orderForReview(files, props.review);
+  const rowProps = {
+    rev: props.rev,
+    selectedAnnotation: props.selectedAnnotation,
+    onSelectAnnotation: props.onSelectAnnotation,
+  };
   return (
     <div className={shell} data-diffmap-kind="changes">
       <div className={header}>
@@ -55,7 +73,7 @@ export function ChangesCard(props: { rev: Rev } & SourceNavigation) {
             className={review}
             aria-controls="source-diff-panel"
             onClick={() =>
-              open({
+              props.onSelectAnnotation({
                 text: "Review",
                 references: [{ kind: "changes", rev: props.rev }],
               })
@@ -65,45 +83,95 @@ export function ChangesCard(props: { rev: Rev } & SourceNavigation) {
           </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 (
+      {reviewed.map((file) => (
+        <FileRow key={file.path} file={file} {...rowProps} />
+      ))}
+      {other.length > 0 && (
+        <>
           <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)}
+            className={toggle}
+            aria-expanded={showOther}
+            aria-controls={otherId}
+            onClick={() => setShowOther((shown) => !shown)}
           >
-            <FileIcon path={file.path} />
+            <ChevronRight size="sm" />
             <span className="name">
-              {file.path.split("/").pop()}
-              {file.status === "deleted" && (
-                <span className={muted}> deleted</span>
-              )}
+              {other.length} other {other.length === 1 ? "file" : "files"}
             </span>
-            <DiffStat file={file} />
+            <DiffStat
+              additions={other.reduce((sum, file) => sum + file.additions, 0)}
+              deletions={other.reduce((sum, file) => sum + file.deletions, 0)}
+              binary={false}
+            />
           </button>
-        );
-      })}
+          <AnimatePresence initial={false}>
+            {showOther && (
+              <motion.div
+                key="other"
+                id={otherId}
+                role="group"
+                aria-label="Other files"
+                style={{ overflow: "hidden" }}
+                initial={{ height: 0, opacity: 0 }}
+                animate={{ height: "auto", opacity: 1 }}
+                exit={{ height: 0, opacity: 0 }}
+                transition={
+                  reducedMotion === true
+                    ? { duration: 0 }
+                    : { type: "spring", visualDuration: 0.22, bounce: 0 }
+                }
+              >
+                {other.map((file) => (
+                  <FileRow key={file.path} file={file} dimmed {...rowProps} />
+                ))}
+              </motion.div>
+            )}
+          </AnimatePresence>
+        </>
+      )}
     </div>
   );
 }
 
+/** One changed file; selecting it opens that file in the Diff panel. */
+function FileRow(
+  props: { rev: Rev; file: ChangedFile; dimmed?: boolean } & SourceNavigation,
+) {
+  const row = useStyles(styles.row);
+  const muted = useStyles(styles.muted);
+  const { file, rev } = props;
+  const reference =
+    rev === WORKING
+      ? { kind: "file" as const, path: file.path }
+      : { kind: "file" as const, rev, path: file.path };
+  const selected = props.selectedAnnotation?.references[0];
+  return (
+    <button
+      type="button"
+      className={row}
+      title={file.path}
+      data-dimmed={props.dimmed === true}
+      aria-controls="source-diff-panel"
+      aria-pressed={
+        props.selectedAnnotation?.text === file.path &&
+        selected?.kind === "file" &&
+        selected.rev === reference.rev
+      }
+      onClick={() =>
+        props.onSelectAnnotation({ text: file.path, references: [reference] })
+      }
+    >
+      <FileIcon path={file.path} />
+      <span className="name">
+        {file.path.split("/").pop()}
+        {file.status === "deleted" && <span className={muted}> deleted</span>}
+      </span>
+      <DiffStat {...file} />
+    </button>
+  );
+}
+
 /** "9 files changed +214 −119" for a whole rev; the card and the Diff panel header share it. */
 export function ChangesSummary(props: {
   changes: Changes;
@@ -140,15 +208,15 @@ function revLabel(rev: Rev, changes: Changes | Error | undefined) {
   return shortRev(rev).replace("..", "…");
 }
 
-function DiffStat(props: { file: ChangedFile }) {
-  if (props.file.binary) return <span className="stat">binary</span>;
+function DiffStat(
+  props: Pick<ChangedFile, "additions" | "deletions" | "binary">,
+) {
+  if (props.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>
+      {props.additions > 0 && <span className="added">+{props.additions}</span>}
+      {props.deletions > 0 && (
+        <span className="removed">−{props.deletions}</span>
       )}
     </span>
   );
@@ -176,7 +244,6 @@ 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
@@ -260,8 +327,29 @@ const styles = {
       "&[aria-pressed='true'], &[aria-pressed='true']:hover": {
         backgroundColor: colors.blue[3],
       },
+      // Files outside the review list recede until you point at or pick one.
+      "&[data-dimmed='true'] > *": {
+        opacity: 0.5,
+        transition: `opacity ${String(motionDurationMs)}ms ${motionEasing}`,
+      },
+      "&[data-dimmed='true']:is(:hover, :focus-visible, [aria-pressed='true']) > *":
+        { opacity: 1 },
     },
     focusRing(),
   ),
+  // A quiet footer row: the chevron sits in the icon column, so the count lines up with file names.
+  toggle: style({
+    color: colors.gray[11],
+    borderTop: `1px solid ${borderColor.border}`,
+    "& > svg": { transition: "transform 150ms ease-out" },
+    "&[aria-expanded='true'] > svg": { transform: "rotate(90deg)" },
+    // The total stat steps aside once the files show their own.
+    "& > .stat": {
+      opacity: 0.7,
+      transition: `opacity ${String(motionDurationMs)}ms ${motionEasing}`,
+    },
+    "&[aria-expanded='true'] > .stat": { opacity: 0 },
+    "&:hover": { color: colors.gray[12] },
+  }),
   muted: style({ color: colors.gray[11] }),
 };

package/src/viewer/CodeBlock.tsx

@@ -0,0 +1,204 @@
+import { useEffect, useState, type ReactNode } from "react";
+import { getSharedHighlighter } from "@pierre/diffs";
+import {
+  Button,
+  Check,
+  codeBlockStyles,
+  colors,
+  Copy,
+  Tooltip,
+  useTheme,
+} from "maui";
+import { style, useStyles } from "purse-styles";
+import { codeFontFamily } from "../codeFont.js";
+import { lineSymbolMatches, type CodeNote } from "../codeNotes.js";
+import { lineNoteDot, NoteText, NoteTokens, type Token } from "./notes.tsx";
+import { fenceTitle, pierreShell } from "./pierre.ts";
+
+/** A pseudocode fence with an optional title, highlighted lines, hover notes, and a copy button. */
+export function CodeBlock(props: {
+  lang: string;
+  source: string;
+  highlights: number[];
+  notes: CodeNote[];
+  title: string | undefined;
+}) {
+  const className = useStyles(codeBlockStyles.root, styles.block);
+  const figureClassName = useStyles(pierreShell, styles.figure);
+  const titleClassName = useStyles(fenceTitle);
+  const copyClassName = useStyles(styles.copy);
+  const [copied, setCopied] = useState(false);
+  useEffect(() => {
+    if (!copied) return;
+    const timer = setTimeout(() => setCopied(false), 1500);
+    return () => clearTimeout(timer);
+  }, [copied]);
+  const lines = useTokenLines(props.source, props.lang);
+  const sourceLines = props.source.split("\n");
+
+  const renderLine = (index: number) => (
+    <span
+      key={index}
+      className="line"
+      data-highlighted={props.highlights.includes(index + 1) || undefined}
+    >
+      <NoteTokens
+        tokens={lines[index] ?? []}
+        matches={lineSymbolMatches(sourceLines[index]!, props.notes)}
+      />
+    </span>
+  );
+
+  const rows: ReactNode[] = [];
+  for (let index = 0; index < sourceLines.length;) {
+    const note = props.notes.find(
+      (candidate) =>
+        candidate.target.kind === "lines" &&
+        candidate.target.start === index + 1,
+    );
+    if (note === undefined || note.target.kind !== "lines") {
+      rows.push(renderLine(index));
+      index++;
+      continue;
+    }
+    const range: ReactNode[] = [];
+    for (; index < note.target.end; index++) range.push(renderLine(index));
+    rows.push(
+      <Tooltip key={`note-${index}`} content={<NoteText text={note.text} />}>
+        <span className="line-note" tabIndex={0}>
+          {range}
+        </span>
+      </Tooltip>,
+    );
+  }
+
+  return (
+    <figure
+      className={figureClassName}
+      data-wrap={proseLangs.has(props.lang) || undefined}
+    >
+      {props.title !== undefined && (
+        <figcaption className={titleClassName}>{props.title}</figcaption>
+      )}
+      <pre className={className} data-diffmap-kind="code">
+        <code>{rows}</code>
+      </pre>
+      <Button
+        className={copyClassName}
+        variant="quiet"
+        data-copy=""
+        data-copied={copied || undefined}
+        size="sm"
+        aria-label={copied ? "Copied" : "Copy code"}
+        onPress={() => {
+          // oxlint-disable-next-line typescript/no-floating-promises -- Press handlers cannot await; the icon only changes once the write succeeds.
+          void navigator.clipboard.writeText(props.source).then(
+            () => setCopied(true),
+            (cause) => console.warn("diffmap copy failed", cause),
+          );
+        }}
+      >
+        {copied ? <Check size="sm" /> : <Copy size="sm" />}
+      </Button>
+    </figure>
+  );
+}
+
+/** Tokens per line from Pierre's highlighter; plain text until it loads or for unknown languages. */
+function useTokenLines(source: string, lang: string): Token[][] {
+  const { resolvedTheme } = useTheme();
+  const [highlighted, setHighlighted] = useState<{
+    key: string;
+    lines: Token[][];
+  }>();
+  const key = `${resolvedTheme}\n${lang}\n${source}`;
+  useEffect(() => {
+    let cancelled = false;
+    const theme = `pierre-${resolvedTheme}`;
+    const tokenize = async (language: string) => {
+      const highlighter = await getSharedHighlighter({
+        themes: [theme],
+        langs: [language],
+      });
+      return highlighter.codeToTokens(source, { lang: language, theme }).tokens;
+    };
+    // oxlint-disable-next-line typescript/no-floating-promises -- React effects cannot await; this request owns the token update.
+    void tokenize(lang)
+      .catch(() => tokenize("text"))
+      .then((lines) => {
+        if (!cancelled) setHighlighted({ key, lines });
+      })
+      .catch((cause) => {
+        console.warn("diffmap code highlight failed", cause);
+      });
+    return () => {
+      cancelled = true;
+    };
+  }, [key, lang, resolvedTheme, source]);
+  if (highlighted?.key === key) return highlighted.lines;
+  return source.split("\n").map((line) => [{ content: line }]);
+}
+
+/** Prose-like fences wrap long lines instead of scrolling. */
+const proseLangs = new Set(["text", "txt", "plaintext", "md", "markdown"]);
+
+const styles = {
+  // The figure is the card, so the block inside drops its own edge.
+  figure: style({
+    position: "relative",
+    margin: 0,
+    "& > pre": {
+      boxShadow: "none",
+      borderRadius: 0,
+      backgroundColor: "transparent",
+    },
+    // Room for the copy button, which sits in the title row.
+    "& > figcaption": { paddingRight: "40px" },
+    "&:hover > [data-copy], &:focus-within > [data-copy]": { opacity: 1 },
+    "&[data-wrap] > pre > code": { display: "block" },
+    "&[data-wrap] .line": { whiteSpace: "pre-wrap", overflowWrap: "anywhere" },
+  }),
+  // Hidden until the block is hovered or focused, and while it confirms a copy.
+  // Touch screens have no hover, so the button always shows there.
+  copy: style({
+    position: "absolute",
+    top: "6px",
+    right: "6px",
+    opacity: 0,
+    "&[data-copied]": { opacity: 1 },
+    "@media (hover: none)": { opacity: 1 },
+  }),
+  block: style({
+    fontFamily: codeFontFamily,
+    paddingInline: 0,
+    // `:is(pre)` outranks the prose rule that shrinks inline code to 0.875em.
+    "&:is(pre) > code": {
+      display: "inline-block",
+      verticalAlign: "top",
+      minWidth: "100%",
+      font: "inherit",
+    },
+    "& .line": {
+      display: "block",
+      minHeight: "1lh",
+      paddingInline: "12px",
+    },
+    "& .line[data-highlighted]": {
+      backgroundColor: colors.blue[3],
+      boxShadow: `inset 3px 0 ${colors.blue[9]}`,
+    },
+    "& .line-note": {
+      display: "block",
+      position: "relative",
+      cursor: "help",
+      outline: "none",
+    },
+    "& .line-note::before": lineNoteDot,
+    "& .line-note:hover > .line:not([data-highlighted])": {
+      backgroundColor: colors.gray[3],
+    },
+    "& .line-note:focus-visible": {
+      boxShadow: `inset 0 0 0 2px ${colors.blue[8]}`,
+    },
+  }),
+};

package/src/viewer/ComarkView.tsx

@@ -87,6 +87,13 @@ function renderElement(
       </blockquote>
     );
   }
+  if (node.tag === "details") {
+    return (
+      <Details key={key} summary={node.attrs.summary ?? "Details"}>
+        {children}
+      </Details>
+    );
+  }
   if (node.tag === "li" && node.attrs.task === true) {
     return (
       <TaskListItem key={key} node={node}>
@@ -188,6 +195,18 @@ function InlineReference(
   );
 }
 
+/** MDC `::details{summary="…"}`: content folded under a summary row. */
+function Details(props: { summary: string; children: ReactNode }) {
+  const className = useStyles(detailsClass);
+  const summaryClassName = useStyles(detailsSummaryClass);
+  return (
+    <details className={className}>
+      <summary className={summaryClassName}>{props.summary}</summary>
+      <div className="diffmap-details-content">{props.children}</div>
+    </details>
+  );
+}
+
 function TaskListItem(props: { node: ViewerElement; children: ReactNode }) {
   const [checked, setChecked] = useState(props.node.attrs.checked === true);
   const className = useStyles(taskListItemClass);
@@ -250,6 +269,21 @@ const inlineReferenceClass = style(
   focusRing(),
 );
 
+const detailsSummaryClass = style(radius.sm, focusRing(), {
+  cursor: "pointer",
+  width: "fit-content",
+  fontWeight: 500,
+});
+
+const detailsClass = style({
+  "& > .diffmap-details-content": {
+    display: "flex",
+    flexDirection: "column",
+    gap: spacing.value(8),
+    marginTop: spacing.value(6),
+  },
+});
+
 const taskListItemClass = style({
   display: "grid",
   gridTemplateColumns: "auto minmax(0, 1fr)",

package/src/viewer/Fence.tsx

@@ -1,13 +1,14 @@
-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 { CodeBlock } from "./CodeBlock.tsx";
 import { CodeDiff } from "./CodeDiff.tsx";
 import { FileExcerpt } from "./FileExcerpt.tsx";
 import { HtmlBlock } from "./HtmlBlock.tsx";
 import { HtmlPlaceholder } from "./HtmlPlaceholder.tsx";
 import { MermaidBlock } from "./MermaidBlock.tsx";
+import { ServiceDiagramBlock } from "./ServiceDiagramBlock.tsx";
 import { useViewerMode } from "./viewerMode.ts";
 
 export function Fence(props: { fence: FenceModel } & SourceNavigation) {
@@ -18,6 +19,17 @@ export function Fence(props: { fence: FenceModel } & SourceNavigation) {
       <MermaidBlock
         source={fence.source}
         annotations={fence.annotations}
+        sides={fence.sides}
+        title={fence.title}
+        selectedAnnotation={props.selectedAnnotation}
+        onSelectAnnotation={props.onSelectAnnotation}
+      />
+    );
+  if (fence.kind === "services")
+    return (
+      <ServiceDiagramBlock
+        source={fence.source}
+        parsed={fence.parsed}
         selectedAnnotation={props.selectedAnnotation}
         onSelectAnnotation={props.onSelectAnnotation}
       />
@@ -30,6 +42,7 @@ export function Fence(props: { fence: FenceModel } & SourceNavigation) {
     return (
       <ChangesCard
         rev={fence.rev}
+        review={fence.review}
         selectedAnnotation={props.selectedAnnotation}
         onSelectAnnotation={props.onSelectAnnotation}
       />
@@ -38,6 +51,9 @@ export function Fence(props: { fence: FenceModel } & SourceNavigation) {
     return (
       <CallStackDiff
         lines={fence.lines}
+        highlights={fence.highlights}
+        notes={fence.notes}
+        title={fence.title}
         selectedAnnotation={props.selectedAnnotation}
         onSelectAnnotation={props.onSelectAnnotation}
       />
@@ -55,5 +71,13 @@ export function Fence(props: { fence: FenceModel } & SourceNavigation) {
       />
     );
   }
-  return <CodeBlock lang={fence.lang}>{fence.source}</CodeBlock>;
+  return (
+    <CodeBlock
+      lang={fence.lang}
+      source={fence.source}
+      highlights={fence.highlights}
+      notes={fence.notes}
+      title={fence.title}
+    />
+  );
 }

package/src/viewer/HtmlBlock.tsx

@@ -1,4 +1,4 @@
-import { radius, shadow, spacing } from "maui";
+import { backgroundColor, radius, shadow, spacing } from "maui";
 import { style, useStyles } from "purse-styles";
 
 export function HtmlBlock(props: { source: string }) {
@@ -15,5 +15,6 @@ export function HtmlBlock(props: { source: string }) {
 const styles = {
   shell: style(radius.md, shadow.subtle, spacing.padding({ all: 4 }), {
     minWidth: 0,
+    backgroundColor: backgroundColor.element,
   }),
 };