@tanishqkancharla/diffmap 0.1.4 → 0.2.0

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/FileExcerpt.tsx

@@ -5,6 +5,7 @@ import { useStyles } from "purse-styles";
 import { pierreFileOptions, pierreShell } from "./pierre.ts";
 import { useViewerMode } from "./viewerMode.ts";
 import { useGitHubPin } from "../github/pin.ts";
+import { useHostFiles } from "../host/files.ts";
 import { fetchPinnedBlob } from "../github/fetchRepo.ts";
 
 type FileExcerptPayload = {
@@ -43,8 +44,10 @@ function useFileExcerpt(input: { path: string; start: number; end: number }) {
   const [excerpt, setExcerpt] = useState<FileExcerptPayload>();
   const mode = useViewerMode();
   const pin = useGitHubPin();
+  const hostFiles = useHostFiles();
+  const hostExcerpt = hostFileExcerpt(hostFiles, input);
   useEffect(() => {
-    if (mode === "gist") return;
+    if (hostFiles !== undefined) return;
     if (mode === "github") {
       if (pin === undefined) return;
       // oxlint-disable-next-line typescript/no-floating-promises -- React effects cannot await; this request owns the excerpt update.
@@ -69,6 +72,7 @@ function useFileExcerpt(input: { path: string; start: number; end: number }) {
         });
       return;
     }
+    if (mode !== "local") return;
     const params = new URLSearchParams({
       path: input.path,
       start: String(input.start),
@@ -87,6 +91,24 @@ function useFileExcerpt(input: { path: string; start: number; end: number }) {
       .catch((cause) => {
         console.warn("diffmap file excerpt failed", cause);
       });
-  }, [input.path, input.start, input.end, mode, pin]);
-  return excerpt;
+  }, [input.path, input.start, input.end, mode, pin, hostFiles]);
+  return hostExcerpt ?? excerpt;
+}
+
+function hostFileExcerpt(
+  files: Record<string, string> | undefined,
+  input: { path: string; start: number; end: number },
+): FileExcerptPayload | undefined {
+  if (files === undefined) return undefined;
+  const contents = files[input.path];
+  if (contents === undefined) return undefined;
+  const lines = contents.split(/\r?\n/);
+  const start = input.start;
+  const end = Math.min(input.end, lines.length);
+  return {
+    path: input.path,
+    start,
+    end,
+    contents: lines.slice(start - 1, end).join("\n"),
+  };
 }

package/src/viewer/HtmlPlaceholder.tsx

@@ -1,10 +1,15 @@
 import { colors, radius, spacing, text } from "maui";
 import { style, useStyles } from "purse-styles";
+import { useViewerMode } from "./viewerMode.ts";
 
 export function HtmlPlaceholder(props: { inline?: boolean }) {
   const inline = props.inline === true;
   const className = useStyles(inline ? styles.inline : styles.block);
-  const copy = "HTML from this gist is not rendered.";
+  const mode = useViewerMode();
+  const copy =
+    mode === "gist"
+      ? "HTML from this gist is not rendered."
+      : "HTML is not rendered on the hosted viewer.";
   if (inline) return <span className={className}>{copy}</span>;
   return (
     <aside className={className} data-diffmap-kind="html-disabled">

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",
     },
   }),
 };