@tanishqkancharla/diffmap 0.1.3 → 0.1.5

package/src/viewer/SourceDiffPanel.tsx

@@ -22,12 +22,20 @@ import {
   type SourceReference,
 } from "../annotations.js";
 import type { SourceDefinition } from "../definitions.js";
+import { useGistPin } from "../gist/pin.ts";
+import { useGitHubPin } from "../github/pin.ts";
+import { useHostFiles } from "../host/files.ts";
 import {
   matchingSourceDiff,
   requestSource,
   useSourceReference,
 } from "./sourceNavigation.js";
 import { pierreDiffOptions, sourceSelectionCss } from "./pierre.js";
+import {
+  sourcePanelOrigin,
+  sourcePanelPath,
+  sourcePanelPin,
+} from "./sourceHeader.ts";
 import { useViewerMode } from "./viewerMode.ts";
 
 export type SourceSelection = {
@@ -66,12 +74,14 @@ export function SourceDiffPanel(props: {
   const definition = history.at(-1);
   const panel = useStyles(styles.panel);
   const header = useStyles(styles.header);
+  const titleRow = useStyles(styles.titleRow);
+  const titleClass = useStyles(styles.title);
+  const pinClass = useStyles(styles.pin);
   const links = useStyles(styles.links);
   const code = useStyles(styles.code);
-  const options = pierreDiffOptions({
-    themeType: resolvedTheme,
-    disableFileHeader: false,
-  });
+  const github = useGitHubPin();
+  const gist = useGistPin();
+  const hostFiles = useHostFiles();
   const selection = props.selection;
   const source = useSourceReference(selection?.reference);
   const resolvedFile = source instanceof Error ? undefined : source;
@@ -93,7 +103,9 @@ export function SourceDiffPanel(props: {
       ? navigation.status
       : source instanceof Error
         ? source.message
-        : selection?.reference.kind === "file" && source === undefined
+        : selection?.reference.kind === "file" &&
+            source === undefined &&
+            (mode === "local" || mode === "github" || hostFiles !== undefined)
           ? "Opening source…"
           : undefined;
   const selectedLines = useMemo<CodeViewLineSelection | null>(() => {
@@ -112,23 +124,67 @@ export function SourceDiffPanel(props: {
       },
     };
   }, [selection, file, linkedDiff]);
+  const rangeId = selectedLines?.id;
+  const rangeStart = selectedLines?.range.start;
+  const rangeEnd = selectedLines?.range.end;
+  const rangeSide =
+    selectedLines !== null && "side" in selectedLines.range
+      ? selectedLines.range.side
+      : undefined;
+
+  const openPath = sourcePanelPath({
+    filePath: file?.path,
+    reference: selection?.reference,
+    items: props.items,
+    linkedDiffId: linkedDiff?.id,
+  });
+  const origin = sourcePanelOrigin({
+    showingFile: file !== undefined,
+    reference: selection?.reference,
+    items: props.items,
+    linkedDiffId: linkedDiff?.id,
+  });
+  const pin =
+    openPath === undefined
+      ? { kind: "none" as const }
+      : sourcePanelPin({
+          origin,
+          path: openPath,
+          github,
+          gist,
+        });
+  const options = pierreDiffOptions({
+    themeType: resolvedTheme,
+    disableFileHeader: openPath !== undefined,
+  });
 
   useEffect(() => {
-    if (selectedLines === null) return;
+    if (
+      rangeId === undefined ||
+      rangeStart === undefined ||
+      rangeEnd === undefined
+    ) {
+      return;
+    }
     viewer.current?.scrollTo({
       type: "range",
-      ...selectedLines,
+      id: rangeId,
+      range: {
+        start: rangeStart,
+        end: rangeEnd,
+        ...(rangeSide === undefined ? {} : { side: rangeSide }),
+      },
       align: "center",
       behavior: "instant",
     });
-  }, [selectedLines]);
+  }, [rangeId, rangeStart, rangeEnd, rangeSide]);
 
   const onTokenClick: CodeViewOptions<undefined, undefined>["onTokenClick"] = (
     token,
     event,
     context,
   ) => {
-    if (mode === "gist") return;
+    if (mode !== "local") return;
     if (!event.metaKey && !event.ctrlKey) return;
     event.preventDefault();
     const item = context.item;
@@ -178,28 +234,53 @@ export function SourceDiffPanel(props: {
 
   return (
     <aside id="source-diff-panel" aria-label="Source changes" className={panel}>
-      <div className={header}>
-        <strong>
-          {definition !== undefined
-            ? "Symbol definition"
-            : file !== undefined
-              ? "Source file"
-              : "Source changes"}
-        </strong>
-        {definition !== undefined && (
-          <Button
-            variant="quiet"
-            onClick={() => {
-              request.current++;
-              setNavigation({
-                selection,
-                history: history.slice(0, -1),
-                status: undefined,
-              });
-            }}
+      <div className={header} data-diffmap-kind="source-header">
+        {openPath !== undefined && (
+          <div className={titleRow}>
+            <div className={titleClass} title={openPath}>
+              {openPath}
+            </div>
+            {definition !== undefined && (
+              <Button
+                variant="quiet"
+                onClick={() => {
+                  request.current++;
+                  setNavigation({
+                    selection,
+                    history: history.slice(0, -1),
+                    status: undefined,
+                  });
+                }}
+              >
+                {history.length === 1 ? "Back to reference" : "Back"}
+              </Button>
+            )}
+          </div>
+        )}
+        {pin.kind === "github" && (
+          <a
+            className={pinClass}
+            href={pin.href}
+            data-diffmap-pin="github"
+            title={pin.label}
           >
-            {history.length === 1 ? "Back to reference" : "Back"}
-          </Button>
+            {pin.label}
+          </a>
+        )}
+        {pin.kind === "gist" && (
+          <a
+            className={pinClass}
+            href={pin.href}
+            data-diffmap-pin="gist"
+            title={pin.label}
+          >
+            {pin.label}
+          </a>
+        )}
+        {pin.kind === "spec" && (
+          <span className={pinClass} data-diffmap-pin="spec">
+            {pin.label}
+          </span>
         )}
         {mode === "local" && (
           <span>⌘-click or Ctrl-click a symbol to go to its definition.</span>
@@ -210,32 +291,27 @@ export function SourceDiffPanel(props: {
             Select a linked stack row or diagram element to open its source.
           </span>
         ) : (
-          <>
-            <span>
-              {selection.annotation.text.replace(/^[+ -]/, "").trim()}
-            </span>
-            {selection.annotation.references.length > 1 && (
-              <div className={links} aria-label="Linked changes">
-                {selection.annotation.references.map((reference, index) => (
-                  <Button
-                    key={index}
-                    variantColor="blue"
-                    variant={
-                      reference === selection.reference ? "primary" : "quiet"
-                    }
-                    onClick={() =>
-                      props.onSelect({
-                        annotation: selection.annotation,
-                        reference,
-                      })
-                    }
-                  >
-                    {referenceLabel(reference)}
-                  </Button>
-                ))}
-              </div>
-            )}
-          </>
+          selection.annotation.references.length > 1 && (
+            <div className={links} aria-label="Linked changes">
+              {selection.annotation.references.map((reference, index) => (
+                <Button
+                  key={index}
+                  variantColor="blue"
+                  variant={
+                    reference === selection.reference ? "primary" : "quiet"
+                  }
+                  onClick={() =>
+                    props.onSelect({
+                      annotation: selection.annotation,
+                      reference,
+                    })
+                  }
+                >
+                  {referenceLabel(reference)}
+                </Button>
+              ))}
+            </div>
+          )
         )}
       </div>
       <CodeView
@@ -270,13 +346,12 @@ export function SourceDiffPanel(props: {
 
 const styles = {
   panel: style(flex({ direction: "column" }), border(["left"], "border"), {
-    gridColumn: "3",
+    gridArea: "diff",
     minWidth: 0,
     minHeight: 0,
     overflow: "hidden",
     backgroundColor: backgroundColor.app,
     "@media (max-width: 900px)": {
-      gridColumn: "1",
       height: "45vh",
       borderLeft: "none",
       borderTop: `1px solid ${borderColor.border}`,
@@ -289,12 +364,33 @@ const styles = {
     text({ size: "sm", color: "lowContrast" }),
     {
       gap: "6px",
-      overflowWrap: "anywhere",
+      minWidth: 0,
       maxHeight: "35%",
       overflowY: "auto",
       flexShrink: 0,
     },
   ),
+  titleRow: style(flex({ direction: "row", alignItems: "center" }), {
+    gap: "6px",
+    minWidth: 0,
+  }),
+  title: style(text({ size: "sm", fontWeight: 600, color: "highContrast" }), {
+    minWidth: 0,
+    flex: "1 1 auto",
+    overflow: "hidden",
+    textOverflow: "ellipsis",
+    whiteSpace: "nowrap",
+  }),
+  pin: style(text({ size: "sm", color: "lowContrast" }), {
+    minWidth: 0,
+    overflow: "hidden",
+    textOverflow: "ellipsis",
+    whiteSpace: "nowrap",
+    textDecoration: "none",
+    "&:is(a):hover": {
+      textDecoration: "underline",
+    },
+  }),
   links: style(flex({ direction: "row" }), { gap: "6px", flexWrap: "wrap" }),
   code: style({
     flex: "1 1 auto",

package/src/viewer/TableOfContents.tsx

@@ -1,35 +1,157 @@
-import { useEffect, useState, type RefObject } from "react";
-import { colors, focusRing, radius, spacing, text } from "maui";
+import { useEffect, useRef, useState, type RefObject } from "react";
+import {
+  background,
+  colors,
+  focusRing,
+  motionEasing,
+  radius,
+  shadow,
+  spacing,
+  text,
+} from "maui";
 import { style, useStyles } from "purse-styles";
 import type { ViewerHeading } from "../parseViewer.js";
 
 type TocItem = ViewerHeading & { children: TocItem[] };
 
+const TOC_LINE_MAX_PX = 24;
+const TOC_LINE_MIN_PX = 8;
+const TOC_LINE_STEP_PX = 6;
+const DWELL_MS = 50;
+const LEAVE_MS = 100;
+const TOC_TRANSITION_MS = 180;
+const TOC_MOTION = `opacity ${String(TOC_TRANSITION_MS)}ms ${motionEasing}, transform ${String(TOC_TRANSITION_MS)}ms ${motionEasing}`;
+
+/** Equal side gutters so the line rail fits and the article column stays centered. */
+export const TOC_SIDE_MARGIN_PX = 48;
+
+/**
+ * Same cutoff that used to open the wide overlay (1101px). Applied to the
+ * article column's remaining width, so a resize or an open Diff panel can
+ * drop below it even when the viewport used to qualify.
+ */
+export const TOC_OPEN_MIN_WIDTH_PX = 1101;
+
+export function hasTableOfContents(headings: ViewerHeading[]) {
+  return tocHeadings(headings).length > 0;
+}
+
+export function tocLineWidth(level: number, shallowestLevel: number) {
+  const depth = Math.max(0, level - shallowestLevel);
+  return Math.max(TOC_LINE_MIN_PX, TOC_LINE_MAX_PX - depth * TOC_LINE_STEP_PX);
+}
+
 export function TableOfContents(props: {
   headings: ViewerHeading[];
   articleRef: RefObject<HTMLElement | null>;
+  open: boolean;
+  onDwellOpen: () => void;
+  onDwellClose: () => void;
 }) {
-  const items = nestHeadings(tocHeadings(props.headings));
+  const headings = tocHeadings(props.headings);
+  const items = nestHeadings(headings);
   const { activeId, setActiveId } = useActiveHeading(
     props.headings,
     props.articleRef,
   );
-  const navClass = useStyles(styles.nav);
+  const railClass = useStyles(styles.rail);
+  const clusterClass = useStyles(styles.cluster);
+  const lineClass = useStyles(styles.line);
+  const cardClass = useStyles(styles.card);
   const listClass = useStyles(styles.list);
+  const hoveringRef = useRef(false);
+  const dwellTimer = useRef<number | undefined>(undefined);
+  const closeTimer = useRef<number | undefined>(undefined);
+  const onDwellOpen = props.onDwellOpen;
+  const onDwellClose = props.onDwellClose;
+
+  useEffect(() => {
+    const onPageLeave = () => {
+      // Leaving the window must close a movement-opened nav, never open one.
+      // A left-edge exit used to land in the dwell zone and spring the drawer.
+      hoveringRef.current = false;
+      window.clearTimeout(dwellTimer.current);
+      window.clearTimeout(closeTimer.current);
+      dwellTimer.current = undefined;
+      closeTimer.current = undefined;
+      onDwellClose();
+    };
+    document.documentElement.addEventListener("mouseleave", onPageLeave);
+    return () => {
+      document.documentElement.removeEventListener("mouseleave", onPageLeave);
+      window.clearTimeout(dwellTimer.current);
+      window.clearTimeout(closeTimer.current);
+    };
+  }, [onDwellClose]);
+
   if (items.length === 0) return undefined;
 
+  const shallowest = headings.reduce(
+    (min, heading) => Math.min(min, heading.level),
+    6,
+  );
+
   return (
     <nav
-      className={navClass}
+      id="diffmap-toc"
+      className={railClass}
       aria-label="Table of contents"
       data-diffmap-kind="toc"
+      data-open={props.open ? "true" : "false"}
     >
-      <TocList
-        items={items}
-        className={listClass}
-        activeId={activeId}
-        onSelect={setActiveId}
-      />
+      <div
+        className={clusterClass}
+        data-open={props.open ? "true" : "false"}
+        onPointerEnter={() => {
+          hoveringRef.current = true;
+          window.clearTimeout(closeTimer.current);
+          closeTimer.current = undefined;
+          if (props.open || dwellTimer.current !== undefined) return;
+          dwellTimer.current = window.setTimeout(() => {
+            dwellTimer.current = undefined;
+            if (!hoveringRef.current) return;
+            onDwellOpen();
+          }, DWELL_MS);
+        }}
+        onPointerLeave={() => {
+          hoveringRef.current = false;
+          window.clearTimeout(dwellTimer.current);
+          dwellTimer.current = undefined;
+          window.clearTimeout(closeTimer.current);
+          closeTimer.current = window.setTimeout(() => {
+            closeTimer.current = undefined;
+            if (hoveringRef.current) return;
+            onDwellClose();
+          }, LEAVE_MS);
+        }}
+      >
+        {headings.map((heading) => (
+          <span
+            key={heading.id}
+            className={lineClass}
+            data-diffmap-kind="toc-line"
+            data-level={heading.level}
+            data-current={activeId === heading.id ? "true" : "false"}
+            style={{ width: tocLineWidth(heading.level, shallowest) }}
+          />
+        ))}
+        <div
+          className={cardClass}
+          data-diffmap-kind="toc-card"
+          data-open={props.open ? "true" : "false"}
+          aria-hidden={!props.open}
+          inert={!props.open}
+        >
+          <TocList
+            items={items}
+            className={listClass}
+            activeId={activeId}
+            onSelect={(id) => {
+              setActiveId(id);
+            }}
+          />
+        </div>
+      </div>
     </nav>
   );
 }
@@ -150,40 +272,105 @@ function useActiveHeading(
   return { activeId, setActiveId };
 }
 
+const tocListRules = {
+  "&[data-diffmap-kind='toc-card'] ol": {
+    listStyle: "none",
+    counterReset: "none",
+    margin: 0,
+    padding: 0,
+  },
+  "&[data-diffmap-kind='toc-card'] ol ol": {
+    paddingInlineStart: spacing.value(6),
+  },
+  "&[data-diffmap-kind='toc-card'] ol > li::before": {
+    content: "none",
+  },
+  "&[data-diffmap-kind='toc-card'] a": {
+    fontWeight: 400,
+    textDecoration: "none",
+  },
+} as const;
+
 const styles = {
-  nav: style(spacing.padding({ left: 16, right: 6, top: 8, bottom: 8 }), {
-    boxSizing: "border-box",
+  rail: style({
+    // Sit in the prose grid's left gutter (column 1). Lines share that outer
+    // edge and grow inward. Sticky height keeps them in view, off the
+    // scrollbar, and on the article when Diff is open.
     gridColumn: "1",
-    alignSelf: "stretch",
-    minWidth: "240px",
-    width: "max-content",
-    maxWidth: "280px",
-    minHeight: 0,
-    height: "fit-content",
-    maxHeight: "100%",
-    marginTop: "auto",
-    marginBottom: "auto",
-    overflowY: "auto",
-    "@media (max-width: 1100px)": {
-      display: "none",
-    },
-    "&[data-diffmap-kind='toc'] ol": {
-      listStyle: "none",
-      counterReset: "none",
-      margin: 0,
-      padding: 0,
-    },
-    "&[data-diffmap-kind='toc'] ol ol": {
-      paddingInlineStart: spacing.value(6),
+    gridRow: "1",
+    position: "sticky",
+    top: 0,
+    alignSelf: "start",
+    justifySelf: "stretch",
+    boxSizing: "border-box",
+    width: "100%",
+    minWidth: 0,
+    height: "100cqh",
+    zIndex: 3,
+    display: "flex",
+    flexDirection: "column",
+    justifyContent: "center",
+    alignItems: "flex-start",
+    pointerEvents: "none",
+  }),
+  cluster: style(spacing.padding({ top: 4, bottom: 4, left: 2, right: 6 }), {
+    position: "relative",
+    display: "flex",
+    flexDirection: "column",
+    alignItems: "flex-start",
+    gap: spacing.value(6),
+    pointerEvents: "auto",
+    "&[data-open='true'] [data-diffmap-kind='toc-line']": {
+      opacity: 0,
     },
-    "&[data-diffmap-kind='toc'] ol > li::before": {
-      content: "none",
+  }),
+  line: style({
+    display: "block",
+    height: "2px",
+    flexShrink: 0,
+    borderRadius: "999px",
+    backgroundColor: colors.gray[8],
+    opacity: 1,
+    transition: `opacity ${String(TOC_TRANSITION_MS)}ms ${motionEasing}`,
+    "@media (prefers-reduced-motion: reduce)": {
+      transition: "none",
     },
-    "&[data-diffmap-kind='toc'] a": {
-      fontWeight: 400,
-      textDecoration: "none",
+    "&[data-current='true']": {
+      backgroundColor: colors.gray[12],
     },
   }),
+  card: style(
+    radius.lg,
+    shadow.medium,
+    background.element,
+    spacing.padding({ x: 3, y: 3 }),
+    {
+      position: "absolute",
+      insetInlineStart: 0,
+      top: "50%",
+      zIndex: 1,
+      boxSizing: "border-box",
+      width: "min(240px, calc(100cqw - 24px))",
+      maxHeight: "min(32rem, calc(100cqh - 24px))",
+      overflowX: "hidden",
+      overflowY: "auto",
+      overscrollBehavior: "contain",
+      transformOrigin: "left center",
+      opacity: 0,
+      pointerEvents: "none",
+      transform: "translateY(-50%) translateX(-6px) scale(0.98)",
+      transition: TOC_MOTION,
+      "@media (prefers-reduced-motion: reduce)": {
+        transition: "none",
+      },
+      "&[data-open='true']": {
+        opacity: 1,
+        pointerEvents: "auto",
+        transform: "translateY(-50%) translateX(0px) scale(1)",
+      },
+      ...tocListRules,
+    },
+  ),
   list: style(text({ size: "sm", fontWeight: 400, color: "lowContrast" })),
   item: style({
     "&::before": {
@@ -205,6 +392,10 @@ const styles = {
       "&[aria-current='location']": {
         color: colors.accent[9],
         fontWeight: 500,
+        backgroundColor: colors.accent[3],
+      },
+      "&[aria-current='location']:hover": {
+        backgroundColor: colors.accent[4],
       },
     },
   ),

package/src/viewer/TocButton.tsx

@@ -0,0 +1,27 @@
+import { Button, UnorderedList, backgroundColor } from "maui";
+import { style, useStyles } from "purse-styles";
+
+export function TocButton(props: { expanded: boolean; onClick?: () => void }) {
+  const className = useStyles(pressedClass);
+  return (
+    <Button
+      id="diffmap-toc-button"
+      className={className}
+      variant="quiet"
+      aria-label="Table of contents"
+      aria-pressed={props.expanded}
+      aria-expanded={props.expanded}
+      aria-controls="diffmap-toc"
+      onClick={props.onClick}
+    >
+      <UnorderedList size="sm" />
+    </Button>
+  );
+}
+
+const pressedClass = style({
+  flexShrink: 0,
+  "&[aria-pressed='true']": {
+    backgroundColor: backgroundColor.elementActive,
+  },
+});