@tanishqkancharla/diffmap 0.1.4 → 0.1.5

package/src/viewer/ViewerApp.tsx

@@ -1,10 +1,18 @@
-import { useEffect, useRef, useState, type ReactNode } from "react";
+import {
+  useCallback,
+  useEffect,
+  useRef,
+  useState,
+  type ReactNode,
+} from "react";
 import {
   backgroundColor,
   border,
   colors,
   flex,
   flexItem,
+  H1,
+  P,
   proseHtml,
   proseMaxWidth,
   spacing,
@@ -14,9 +22,15 @@ import { style, useStyles } from "purse-styles";
 import type { ViewerDocument } from "../parseViewer.js";
 import { ComarkView } from "./ComarkView.tsx";
 import { SourceDiffPanel, type SourceSelection } from "./SourceDiffPanel.js";
-import { DoneButton } from "./DoneButton.tsx";
+import { CloseServerButton } from "./CloseServerButton.tsx";
 import { DiffButton } from "./DiffButton.tsx";
-import { TableOfContents } from "./TableOfContents.tsx";
+import { TocButton } from "./TocButton.tsx";
+import {
+  hasTableOfContents,
+  TableOfContents,
+  TOC_OPEN_MIN_WIDTH_PX,
+  TOC_SIDE_MARGIN_PX,
+} from "./TableOfContents.tsx";
 import { ViewerModeContext, type ViewerMode } from "./viewerMode.ts";
 
 type ViewerMeta = {
@@ -32,9 +46,7 @@ export function ViewerApp(props: {
   const viewerDocument = props.document;
   const meta = useViewerMeta(props.mode === "local");
   const [selection, setSelection] = useState<SourceSelection>();
-  const [showDiffPanel, setShowDiffPanel] = useState(
-    viewerDocument.sourceDiffs.length > 0,
-  );
+  const [showDiffPanel, setShowDiffPanel] = useState(false);
   const hasSourceDiffs =
     viewerDocument.sourceDiffs.length > 0 || viewerDocument.hasReferences;
   const diffPanelOpen = hasSourceDiffs && showDiffPanel;
@@ -55,7 +67,64 @@ export function ViewerApp(props: {
   const prose = useStyles(styles.prose);
   const content = useStyles(proseHtml("md"), styles.content);
   const closed = useStyles(styles.closed);
+  const closedCopy = useStyles(styles.closedCopy);
+  const stage = useStyles(styles.stage);
   const articleRef = useRef<HTMLElement>(null);
+  const hasToc = hasTableOfContents(viewerDocument.headings);
+  const tocDismissed = useRef(false);
+  const tocPinned = useRef(false);
+  const tocFits = useRef(window.innerWidth >= TOC_OPEN_MIN_WIDTH_PX);
+  const remeasureToc = useRef<() => void>(() => {});
+  const [tocOpen, setTocOpen] = useState<TocMode | undefined>(() =>
+    hasToc && window.innerWidth >= TOC_OPEN_MIN_WIDTH_PX ? "space" : undefined,
+  );
+  const tocExpanded = tocOpen !== undefined;
+  const onDwellOpen = useCallback(() => {
+    setTocOpen((mode) =>
+      mode === "click" || mode === "space" ? mode : "dwell",
+    );
+  }, []);
+  const onDwellClose = useCallback(() => {
+    setTocOpen((mode) => {
+      if (mode === "click" || mode === "space") return mode;
+      if (tocFits.current && !tocDismissed.current) {
+        return tocPinned.current ? "click" : "space";
+      }
+      return undefined;
+    });
+  }, []);
+
+  useEffect(() => {
+    if (!hasToc) return;
+    const measure = () => {
+      const node = articleRef.current;
+      if (node !== null && node.clientWidth === 0) return;
+      const width = node?.clientWidth ?? window.innerWidth;
+      const next = width >= TOC_OPEN_MIN_WIDTH_PX;
+      const previous = tocFits.current;
+      tocFits.current = next;
+      if (previous === next) return;
+      if (!next) {
+        setTocOpen(undefined);
+        return;
+      }
+      setTocOpen((mode) => {
+        if (mode === "click" || mode === "dwell") return mode;
+        if (tocDismissed.current) return undefined;
+        return tocPinned.current ? "click" : "space";
+      });
+    };
+    remeasureToc.current = measure;
+    const observer = new ResizeObserver(measure);
+    const articleNode = articleRef.current;
+    if (articleNode) observer.observe(articleNode);
+    window.addEventListener("resize", measure);
+    return () => {
+      observer.disconnect();
+      window.removeEventListener("resize", measure);
+      remeasureToc.current = () => {};
+    };
+  }, [hasToc]);
 
   useEffect(() => {
     document.title = title;
@@ -68,7 +137,14 @@ export function ViewerApp(props: {
   }, []);
 
   if (shutDown) {
-    return <main className={closed}>Closed.</main>;
+    return (
+      <main className={closed}>
+        <div className={closedCopy}>
+          <H1>Closed spec</H1>
+          <P>The local server stopped.</P>
+        </div>
+      </main>
+    );
   }
 
   return (
@@ -76,18 +152,37 @@ export function ViewerApp(props: {
       <div className={shell}>
         <header className={header}>
           <div className={heading}>
+            {hasToc && (
+              <TocButton
+                expanded={tocExpanded}
+                onClick={() => {
+                  if (tocExpanded) {
+                    tocDismissed.current = true;
+                    tocPinned.current = false;
+                    setTocOpen(undefined);
+                    return;
+                  }
+                  tocDismissed.current = false;
+                  tocPinned.current = true;
+                  setTocOpen("click");
+                }}
+              />
+            )}
             <div className={titleClass}>{title}</div>
           </div>
           <div className={actions}>
             {hasSourceDiffs && (
               <DiffButton
                 pressed={showDiffPanel}
-                onClick={() => setShowDiffPanel((open) => !open)}
+                onClick={() => {
+                  setShowDiffPanel((open) => !open);
+                  window.requestAnimationFrame(() => remeasureToc.current());
+                }}
               />
             )}
             {props.headerActions}
             {props.mode === "local" && (
-              <DoneButton
+              <CloseServerButton
                 onClick={() => {
                   setShutDown(true);
                   // oxlint-disable-next-line typescript/no-floating-promises -- React click callbacks cannot await the server shutdown request.
@@ -97,41 +192,53 @@ export function ViewerApp(props: {
             )}
           </div>
         </header>
-        <div className={body} data-has-source-diffs={diffPanelOpen}>
-          <TableOfContents
-            headings={viewerDocument.headings}
-            articleRef={articleRef}
-          />
-          <article ref={articleRef} className={article}>
-            <div className={prose}>
-              <div className={content} data-diffmap-kind="page">
-                <ComarkView
-                  document={viewerDocument}
-                  selectedAnnotation={selection?.annotation}
-                  onSelectAnnotation={(line) => {
-                    setShowDiffPanel(true);
-                    setSelection({
-                      annotation: line,
-                      reference: line.references[0]!,
-                    });
-                  }}
-                />
+        <div className={stage}>
+          <div className={body} data-has-source-diffs={diffPanelOpen}>
+            <article ref={articleRef} className={article}>
+              <div className={prose} data-has-toc={hasToc ? "true" : "false"}>
+                <div className={content} data-diffmap-kind="page">
+                  <ComarkView
+                    document={viewerDocument}
+                    selectedAnnotation={selection?.annotation}
+                    onSelectAnnotation={(line) => {
+                      setShowDiffPanel(true);
+                      setSelection({
+                        annotation: line,
+                        reference: line.references[0]!,
+                      });
+                      window.requestAnimationFrame(() =>
+                        remeasureToc.current(),
+                      );
+                    }}
+                  />
+                </div>
+                {hasToc && (
+                  <TableOfContents
+                    headings={viewerDocument.headings}
+                    articleRef={articleRef}
+                    open={tocExpanded}
+                    onDwellOpen={onDwellOpen}
+                    onDwellClose={onDwellClose}
+                  />
+                )}
               </div>
-            </div>
-          </article>
-          {diffPanelOpen && (
-            <SourceDiffPanel
-              items={viewerDocument.sourceDiffs}
-              selection={selection}
-              onSelect={setSelection}
-            />
-          )}
+            </article>
+            {diffPanelOpen && (
+              <SourceDiffPanel
+                items={viewerDocument.sourceDiffs}
+                selection={selection}
+                onSelect={setSelection}
+              />
+            )}
+          </div>
         </div>
       </div>
     </ViewerModeContext.Provider>
   );
 }
 
+type TocMode = "click" | "dwell" | "space";
+
 function useViewerMeta(enabled: boolean) {
   const [meta, setMeta] = useState<ViewerMeta>();
   useEffect(() => {
@@ -161,7 +268,7 @@ const styles = {
     backgroundColor: colors.gray[4],
   }),
   header: style(
-    flex({ direction: "row", align: "center", justify: "between" }),
+    flex({ direction: "row", alignItems: "center", justifyContent: "between" }),
     spacing.padding({ x: 6, y: 3 }),
     flexItem({ size: "hug" }),
     border(["bottom"], "border"),
@@ -170,8 +277,9 @@ const styles = {
       backgroundColor: backgroundColor.app,
     },
   ),
-  heading: style(flex({ direction: "column" }), {
+  heading: style(flex({ direction: "row", alignItems: "center", gap: 3 }), {
     minWidth: 0,
+    flex: "1 1 auto",
   }),
   title: style(text({ size: "md", fontWeight: 600, color: "highContrast" }), {
     minWidth: 0,
@@ -179,38 +287,46 @@ const styles = {
     textOverflow: "ellipsis",
     whiteSpace: "nowrap",
   }),
-  actions: style(flex({ direction: "row", align: "center", gap: 3 }), {
+  actions: style(flex({ direction: "row", alignItems: "center", gap: 3 }), {
     flexShrink: 0,
   }),
+  stage: style(flex({ direction: "column" }), {
+    position: "relative",
+    flex: "1 1 auto",
+    minWidth: 0,
+    minHeight: 0,
+  }),
   body: style({
     display: "grid",
-    gridTemplateColumns: "var(--diffmap-columns)",
     gridTemplateRows: "minmax(0, 1fr)",
-    "--diffmap-columns": "minmax(0, max-content) minmax(0, 1fr)",
     flex: "1 1 auto",
     minHeight: 0,
     minWidth: 0,
     overflow: "hidden",
     backgroundColor: backgroundColor.app,
+    "--diffmap-columns": "minmax(0, 1fr)",
+    "--diffmap-areas": '"article"',
+    gridTemplateColumns: "var(--diffmap-columns)",
+    gridTemplateAreas: "var(--diffmap-areas)",
     "&[data-has-source-diffs='true']": {
-      "--diffmap-columns":
-        "minmax(0, max-content) minmax(0, 1fr) minmax(0, 1fr)",
+      "--diffmap-columns": "minmax(0, 1fr) minmax(0, 1fr)",
+      "--diffmap-areas": '"article diff"',
     },
     "@media (max-width: 900px)": {
       gridTemplateColumns: "minmax(0, 1fr)",
       gridTemplateRows: "minmax(0, 1fr) auto",
+      gridTemplateAreas: '"article" "diff"',
     },
   }),
   article: style(spacing.padding({ x: 12, y: 12 }), {
-    gridColumn: "2",
+    gridArea: "article",
     flex: "1 1 auto",
     minWidth: 0,
     minHeight: 0,
     overflowY: "auto",
     backgroundColor: backgroundColor.app,
-    "@media (max-width: 900px)": {
-      gridColumn: "1",
-    },
+    // Scrollport size for the sticky gutter rail (`100cqh`).
+    containerType: "size",
   }),
   prose: style({
     display: "grid",
@@ -218,9 +334,13 @@ const styles = {
     width: "100%",
     maxWidth: "none",
     minWidth: 0,
+    "&[data-has-toc='true']": {
+      gridTemplateColumns: `minmax(${String(TOC_SIDE_MARGIN_PX)}px, 1fr) minmax(0, ${proseMaxWidth}) minmax(${String(TOC_SIDE_MARGIN_PX)}px, 1fr)`,
+    },
   }),
   content: style({
     gridColumn: "2 / 3",
+    gridRow: "1",
     width: "100%",
     maxWidth: "none",
     minWidth: 0,
@@ -250,11 +370,23 @@ const styles = {
     },
   }),
   closed: style(
-    text({ size: "md", fontWeight: 500, color: "highContrast" }),
-    spacing.padding({ all: 12 }),
+    flex({
+      direction: "column",
+      alignItems: "center",
+      justifyContent: "center",
+    }),
+    spacing.padding({ x: 12, y: 12 }),
     {
       minHeight: "100vh",
       backgroundColor: backgroundColor.app,
     },
   ),
+  closedCopy: style(
+    flex({ direction: "column", alignItems: "center", gap: 3 }),
+    {
+      width: "100%",
+      maxWidth: proseMaxWidth,
+      textAlign: "center",
+    },
+  ),
 };

package/src/viewer/sourceNavigation.ts

@@ -1,10 +1,11 @@
-import { useEffect, useState } from "react";
+import { useEffect, useMemo, useState } from "react";
 import type { CodeViewDiffItem, CodeViewLineSelection } from "@pierre/diffs";
 import type { SourceReference } from "../annotations.js";
 import type { SourceDefinition, DefinitionResponse } from "../definitions.js";
 import { DiffmapDefinitionError } from "../errors.js";
 import { useGitHubPin } from "../github/pin.ts";
 import { fetchPinnedBlob, findSymbolLineRange } from "../github/fetchRepo.ts";
+import { useHostFiles } from "../host/files.ts";
 import { useViewerMode } from "./viewerMode.ts";
 
 export async function requestSource(
@@ -46,10 +47,15 @@ export function useSourceReference(reference: SourceReference | undefined) {
     result: SourceDefinition | Error;
   }>();
   const pin = useGitHubPin();
+  const hostFiles = useHostFiles();
   const mode = useViewerMode();
+  const hostResult = useMemo(() => {
+    if (reference?.kind !== "file" || hostFiles === undefined) return undefined;
+    return readHostFileReference(hostFiles, reference);
+  }, [reference, hostFiles]);
   useEffect(() => {
     if (reference?.kind !== "file") return;
-    if (mode === "gist") return;
+    if (hostFiles !== undefined) return;
     let active = true;
     if (pin !== undefined) {
       // Pinned GitHub spec: load this path at the spec commit SHA, never main.
@@ -89,6 +95,7 @@ export function useSourceReference(reference: SourceReference | undefined) {
         active = false;
       };
     }
+    if (mode !== "local") return;
     const params = new URLSearchParams({ path: reference.path });
     if (reference.symbol !== undefined) params.set("symbol", reference.symbol);
     if (reference.start !== undefined)
@@ -101,10 +108,37 @@ export function useSourceReference(reference: SourceReference | undefined) {
     return () => {
       active = false;
     };
-  }, [reference, pin, mode]);
+  }, [reference, pin, mode, hostFiles]);
+  if (hostResult !== undefined) return hostResult;
   return resolution?.reference === reference ? resolution?.result : undefined;
 }
 
+function readHostFileReference(
+  files: Record<string, string>,
+  reference: Extract<SourceReference, { kind: "file" }>,
+): SourceDefinition | Error {
+  const contents = files[reference.path];
+  if (contents === undefined) {
+    return new DiffmapDefinitionError({
+      reason: `No hosted file for ${reference.path}.`,
+    });
+  }
+  const lineCount = Math.max(1, contents.split(/\r?\n/).length);
+  const range =
+    reference.symbol !== undefined
+      ? findSymbolLineRange(contents, reference.symbol)
+      : {
+          start: reference.start ?? 1,
+          end: reference.end ?? lineCount,
+        };
+  return {
+    path: reference.path,
+    contents,
+    start: range.start,
+    end: range.end,
+  };
+}
+
 export function matchingSourceDiff(
   source: SourceDefinition,
   items: CodeViewDiffItem[],

package/src/viewer/viewerMode.ts

@@ -1,6 +1,6 @@
 import { createContext, useContext } from "react";
 
-export type ViewerMode = "local" | "gist" | "github";
+export type ViewerMode = "local" | "gist" | "github" | "host";
 
 export const ViewerModeContext = createContext<ViewerMode>("local");
 

package/vite.config.ts

@@ -34,7 +34,7 @@ export default defineConfig(({ command }) => {
     },
     clearScreen: false,
     server: {
-      port: 4177,
+      port: 0,
       strictPort: false,
     },
   };

package/src/viewer/Check.tsx

@@ -1,24 +0,0 @@
-import type { SVGProps } from "react";
-
-export function Check(props: SVGProps<SVGSVGElement>) {
-  return (
-    <svg
-      focusable="false"
-      aria-hidden="true"
-      role="img"
-      width={24}
-      height={24}
-      fill="none"
-      viewBox="0 0 24 24"
-      {...props}
-    >
-      <path
-        stroke="currentColor"
-        strokeLinecap="round"
-        strokeLinejoin="round"
-        strokeWidth={1.5}
-        d="M5.75 12.5L10 16.75L18.25 7.25"
-      />
-    </svg>
-  );
-}

package/src/viewer/DoneButton.tsx

@@ -1,32 +0,0 @@
-import { Button, background, colors, iconSizeValues, text } from "maui";
-import { style, useStyles } from "purse-styles";
-import { Check } from "./Check.tsx";
-
-const checkIcon = style({
-  width: iconSizeValues.sm,
-  height: iconSizeValues.sm,
-});
-
-export function DoneButton(props: { onClick?: () => void }) {
-  const checkClass = useStyles(checkIcon);
-  const primaryClass = useStyles(primaryButtonClass);
-  return (
-    <Button className={primaryClass} onClick={props.onClick}>
-      <Check className={checkClass} />
-      Done
-    </Button>
-  );
-}
-
-const primaryButtonClass = style(
-  background.accent,
-  text({ size: "xs", fontWeight: 400, color: "onAccent" }),
-  {
-    "&:hover": {
-      backgroundColor: colors.accent[10],
-    },
-    "&:active": {
-      backgroundColor: colors.accent[11],
-    },
-  },
-);