@tanishqkancharla/diffmap 0.4.0 → 0.6.1

package/src/viewer/CallStackDiff.tsx

@@ -1,39 +1,33 @@
-import {
-  backgroundColor,
-  colors,
-  focusRing,
-  LARGE_SCALE,
-  spacing,
-  text,
-  Tooltip,
-} from "maui";
+import { colors, focusRing, LARGE_SCALE, text, Tooltip } from "maui";
 import { defineVars, style, useStyles } from "purse-styles";
 import { codeFontFamily } from "../codeFont.js";
-import type { SourceAnnotation, SourceNavigation } from "../annotations.js";
+import {
+  callStackRow,
+  type SourceAnnotation,
+  type SourceNavigation,
+} from "../annotations.js";
 import { lineSymbolMatches, type CodeNote } from "../codeNotes.js";
 import { NoteText, NoteTokens } from "./notes.tsx";
-import { pierreShell } from "./pierre.js";
+import { fenceTitle, pierreShell } from "./pierre.js";
 
 export function CallStackDiff(
   props: {
     lines: SourceAnnotation[];
     highlights: number[];
     notes: CodeNote[];
+    title: string | undefined;
   } & SourceNavigation,
 ) {
   const shell = useStyles(pierreShell, styles.shell);
+  const titleClassName = useStyles(fenceTitle);
   const rowClassName = useStyles(styles.row);
   return (
-    <div className={shell} data-diffmap-kind="callstack">
+    <figure className={shell} data-diffmap-kind="callstack">
+      {props.title !== undefined && (
+        <figcaption className={titleClassName}>{props.title}</figcaption>
+      )}
       {props.lines.map((line, index) => {
-        const sign = line.text.startsWith("+")
-          ? "+"
-          : line.text.startsWith("-")
-            ? "-"
-            : " ";
-        const label = line.text.replace(/^[+ -]/, "");
-        const tree = /^[ \t│┃├└─]*/u.exec(label)![0];
-        const description = label.slice(tree.length);
+        const { sign, tree, description } = callStackRow(line.text);
         const comment = description.indexOf("#");
         const linked = line.references.length > 0;
         const row = index + 1;
@@ -125,27 +119,30 @@ export function CallStackDiff(
           </Tooltip>
         );
       })}
-    </div>
+    </figure>
   );
 }
 
 const rowSize = defineVars({
-  height: { default: "28px", [LARGE_SCALE]: "40px" },
+  height: { default: "22px", [LARGE_SCALE]: "32px" },
 });
 
 const styles = {
-  shell: style(
-    text({ size: "sm", fontWeight: 500, color: "highContrast" }),
-    spacing.padding({ y: 2 }),
-    {
-      backgroundColor: backgroundColor.app,
-      overflowX: "hidden",
-      maxWidth: "100%",
+  // Sized like Maui's code block, but in the proportional UI font.
+  shell: style(text({ size: "xs", fontWeight: 400, color: "highContrast" }), {
+    margin: 0,
+    paddingBlock: "8px",
+    overflowX: "hidden",
+    maxWidth: "100%",
+    // The shell's top padding goes below the title, between it and the rows.
+    "& > figcaption": {
+      marginTop: "-8px",
+      marginBottom: "8px",
     },
-  ),
+  }),
   row: style(
-    spacing.padding({ x: 3 }),
     {
+      paddingInline: "12px",
       display: "flex",
       alignItems: "center",
       gap: "12px",
@@ -174,7 +171,6 @@ const styles = {
         backgroundColor: colors.red[5],
         boxShadow: `inset 3px 0 ${colors.red[9]}`,
       },
-      "&[data-note]": { cursor: "help" },
       // The sign fills the row gutter, so the dot follows the label instead.
       "&[data-note='start'] .stack-label::after": {
         content: '""',
@@ -204,7 +200,7 @@ const styles = {
         alignSelf: "center",
         flex: "1 1 auto",
         minWidth: 0,
-        paddingBlock: "3px",
+        paddingBlock: "1px",
         overflow: "hidden",
         textOverflow: "ellipsis",
         whiteSpace: "nowrap",

package/src/viewer/ChangesCard.tsx

@@ -1,7 +1,6 @@
 import { useId, useState } from "react";
 import { AnimatePresence, motion, useReducedMotion } from "motion/react";
 import {
-  backgroundColor,
   borderColor,
   ChevronRight,
   colors,
@@ -245,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

package/src/viewer/CodeBlock.tsx

@@ -1,19 +1,38 @@
 import { useEffect, useState, type ReactNode } from "react";
 import { getSharedHighlighter } from "@pierre/diffs";
-import { codeBlockStyles, colors, Tooltip, useTheme } from "maui";
+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 highlighted lines and hover notes. */
+/** 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");
 
@@ -54,9 +73,34 @@ export function CodeBlock(props: {
   }
 
   return (
-    <pre className={className} data-diffmap-kind="code">
-      <code>{rows}</code>
-    </pre>
+    <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>
   );
 }
 
@@ -95,11 +139,40 @@ function useTokenLines(source: string, lang: string): Token[][] {
   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,
-    "& > code": {
+    // `:is(pre)` outranks the prose rule that shrinks inline code to 0.875em.
+    "&:is(pre) > code": {
       display: "inline-block",
       verticalAlign: "top",
       minWidth: "100%",
@@ -117,7 +190,6 @@ const styles = {
     "& .line-note": {
       display: "block",
       position: "relative",
-      cursor: "help",
       outline: "none",
     },
     "& .line-note::before": lineNoteDot,

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

@@ -19,6 +19,8 @@ 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}
       />
@@ -51,6 +53,7 @@ export function Fence(props: { fence: FenceModel } & SourceNavigation) {
         lines={fence.lines}
         highlights={fence.highlights}
         notes={fence.notes}
+        title={fence.title}
         selectedAnnotation={props.selectedAnnotation}
         onSelectAnnotation={props.onSelectAnnotation}
       />
@@ -74,6 +77,7 @@ export function Fence(props: { fence: FenceModel } & SourceNavigation) {
       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,
   }),
 };

package/src/viewer/MermaidBlock.tsx

@@ -8,26 +8,36 @@ import {
   colors,
   fontFamily,
   spacing,
+  text,
 } 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 { markDiagramChanges } from "./diagramDiff.js";
 import { linkDiagram } from "./diagramLinks.js";
+import { fenceTitle, pierreShell } from "./pierre.js";
 
 type MermaidProps = {
   source: string;
   annotations: DiagramAnnotation[];
+  sides: { today: string; proposed: string } | undefined;
+  title: string | undefined;
 } & SourceNavigation;
 
 export function MermaidBlock(props: MermaidProps) {
   const [fullscreen, setFullscreen] = useState(false);
-  const frame = useStyles(styles.frame);
+  const frame = useStyles(pierreShell, styles.frame);
   const expand = useStyles(styles.expand);
   const dialog = useStyles(styles.dialog);
   const header = useStyles(styles.header);
+  const caption = useStyles(fenceTitle);
+  const dialogTitle = useStyles(styles.dialogTitle);
   return (
-    <div className={frame}>
+    <figure className={frame}>
+      {props.title !== undefined && (
+        <figcaption className={caption}>{props.title}</figcaption>
+      )}
       <MermaidDiagram {...props} fullscreen={false} />
       <Button
         className={expand}
@@ -42,10 +52,11 @@ export function MermaidBlock(props: MermaidProps) {
         isOpen={fullscreen}
         onOpenChange={setFullscreen}
         size="lg"
-        aria-label="Diagram"
+        aria-label={props.title ?? "Diagram"}
         className={dialog}
       >
         <div className={header}>
+          <span className={dialogTitle}>{props.title}</span>
           <Button
             size="sm"
             variant="quiet"
@@ -65,7 +76,7 @@ export function MermaidBlock(props: MermaidProps) {
           }}
         />
       </Dialog>
-    </div>
+    </figure>
   );
 }
 
@@ -75,10 +86,10 @@ function MermaidDiagram(props: MermaidProps & { fullscreen: boolean }) {
     styles.shell,
     props.fullscreen ? styles.fullscreenShell : styles.inlineShell,
   );
-  const svg = useMemo(
-    () =>
+  const svg = useMemo(() => {
+    const draw = (source: string) =>
       mermaidSvg({
-        source: props.source,
+        source,
         bg: backgroundColor.app,
         fg: colors.gray[12],
         accent: colors.accent[9],
@@ -86,9 +97,15 @@ function MermaidDiagram(props: MermaidProps & { fullscreen: boolean }) {
         surface: backgroundColor.element,
         border: colors.gray[6],
         font: fontFamily,
-      }),
-    [props.source],
-  );
+      });
+    const all = draw(props.source);
+    if (all instanceof Error || props.sides === undefined) return all;
+    const today = draw(props.sides.today);
+    if (today instanceof Error) return today;
+    const proposed = draw(props.sides.proposed);
+    if (proposed instanceof Error) return proposed;
+    return markDiagramChanges(all, { today, proposed });
+  }, [props.source, props.sides]);
   const linked = useMemo(
     () => (svg instanceof Error ? svg : linkDiagram(svg, props.annotations)),
     [svg, props.annotations],
@@ -152,16 +169,23 @@ function MermaidDiagram(props: MermaidProps & { fullscreen: boolean }) {
 }
 
 const styles = {
+  // A card like a code block: the title row, then the diagram, padded.
   frame: style({
     position: "relative",
     width: "100%",
-    minWidth: 0,
+    margin: 0,
+    // Room for the full-screen button, which sits in the title row.
+    "& > figcaption": { paddingRight: "40px" },
+    "& > [data-diffmap-kind='mermaid']": { padding: spacing.value(6) },
   }),
   expand: style({
     position: "absolute",
-    top: 0,
-    insetInlineEnd: 0,
+    top: "6px",
+    right: "6px",
   }),
+  dialogTitle: style(
+    text({ size: "xs", fontWeight: 500, color: "lowContrast" }),
+  ),
   dialog: style({
     width: "calc(100vw - 32px)",
     height: "calc(100dvh - 32px)",
@@ -170,7 +194,8 @@ const styles = {
   }),
   header: style({
     display: "flex",
-    justifyContent: "flex-end",
+    alignItems: "center",
+    justifyContent: "space-between",
   }),
   inlineShell: style({
     maxHeight: "60vh",
@@ -210,5 +235,21 @@ const styles = {
       width: "100%",
       height: "auto",
     },
+    ...changeStyles("-", colors.red),
+    ...changeStyles("+", colors.green),
+    ...changeStyles("~", colors.amber),
   }),
 };
+
+/** Colors a `mermaid diff`'s marked nodes and edges; removed ones are dashed. */
+function changeStyles(sign: string, scale: typeof colors.red) {
+  const marked = `[data-change='${sign}']`;
+  const dash = sign === "-" ? { strokeDasharray: "5 3" } : {};
+  return {
+    [`& [data-id]${marked} > :is(rect, polygon, circle, ellipse, path), & .edge-label${marked} > rect`]:
+      { fill: scale[2], stroke: scale[9], strokeWidth: 1.5, ...dash },
+    [`& ${marked} text`]: { fill: scale[11] },
+    [`& :is(polyline, line)${marked}, & ${marked} > :is(line, polyline, path)`]:
+      { stroke: scale[9], strokeWidth: 1.5, ...dash },
+  };
+}