@tanishqkancharla/diffmap 0.1.4 → 0.1.5

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

@@ -24,6 +24,7 @@ import {
 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,
@@ -80,6 +81,7 @@ export function SourceDiffPanel(props: {
   const code = useStyles(styles.code);
   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;
@@ -103,7 +105,7 @@ export function SourceDiffPanel(props: {
         ? source.message
         : selection?.reference.kind === "file" &&
             source === undefined &&
-            mode !== "gist"
+            (mode === "local" || mode === "github" || hostFiles !== undefined)
           ? "Opening source…"
           : undefined;
   const selectedLines = useMemo<CodeViewLineSelection | null>(() => {
@@ -122,6 +124,13 @@ 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,
@@ -150,14 +159,25 @@ export function SourceDiffPanel(props: {
   });
 
   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,
@@ -326,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}`,
@@ -351,7 +370,7 @@ const styles = {
       flexShrink: 0,
     },
   ),
-  titleRow: style(flex({ direction: "row", align: "center" }), {
+  titleRow: style(flex({ direction: "row", alignItems: "center" }), {
     gap: "6px",
     minWidth: 0,
   }),

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,41 +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",
-    backgroundColor: "transparent",
-    "@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": {
@@ -206,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,
+  },
+});