@djangocfg/widget-code 0.1.1

package/src/diff-viewer/components/SplitView.tsx

@@ -0,0 +1,270 @@
+// Adapted from jalcoui (MIT) — github.com/jal-co/ui
+
+'use client';
+
+import * as React from 'react';
+import type { Language, PrismTheme } from 'prism-react-renderer';
+import { Virtuoso } from 'react-virtuoso';
+import { cn } from '@djangocfg/ui-core/lib';
+import { DIFF_TONE_CLASSES, type DiffLine } from '../types';
+import { DiffLineContent } from './DiffLineContent';
+
+interface SplitViewProps {
+  lines: DiffLine[];
+  numWidth: number;
+  /** Longest content line in ch (global, from the viewer root) — the shared
+   * minimum width of every content cell, so all rows are equally wide and the
+   * OUTER `overflow-x-auto` scrolls the whole block as one unit. Before this,
+   * each content cell carried its own `overflow-x-auto` and every line
+   * scrolled independently. */
+  maxContentCh: number;
+  language: Language | null;
+  prismTheme: PrismTheme;
+  /** The host already caps this block's height and owns the scroller, so the
+   *  virtualized path must not open a second one inside it. */
+  hostScrolls?: boolean;
+}
+
+// See UnifiedView for context — same threshold + viewport size keeps both
+// layouts behaviorally aligned.
+const VIRTUALIZE_THRESHOLD = 100;
+const VIRTUAL_VIEWPORT_HEIGHT = 480;
+
+/**
+ * Align consecutive `removed` / `added` runs into a pair of columns.
+ * Pure-add rows leave the left column empty; pure-remove rows leave the
+ * right column empty. Context rows duplicate on both sides.
+ *
+ * The pairing is the same shape jalcoui ships — we keep it so downstream
+ * consumers' visual baseline doesn't move.
+ */
+function pairLines(lines: DiffLine[]): Array<{
+  left: DiffLine | null;
+  right: DiffLine | null;
+}> {
+  const pairs: Array<{ left: DiffLine | null; right: DiffLine | null }> = [];
+
+  let i = 0;
+  while (i < lines.length) {
+    const line = lines[i];
+    if (line === undefined) {
+      i++;
+      continue;
+    }
+    if (line.type === 'context') {
+      pairs.push({ left: line, right: line });
+      i++;
+      continue;
+    }
+    if (line.type === 'removed') {
+      const removed: DiffLine[] = [];
+      for (let next = lines[i]; next !== undefined && next.type === 'removed'; next = lines[i]) {
+        removed.push(next);
+        i++;
+      }
+      const added: DiffLine[] = [];
+      for (let next = lines[i]; next !== undefined && next.type === 'added'; next = lines[i]) {
+        added.push(next);
+        i++;
+      }
+      const maxLen = Math.max(removed.length, added.length);
+      for (let j = 0; j < maxLen; j++) {
+        pairs.push({
+          left: removed[j] ?? null,
+          right: added[j] ?? null,
+        });
+      }
+      continue;
+    }
+    // line.type === 'added' with no preceding removed run
+    pairs.push({ left: null, right: line });
+    i++;
+  }
+
+  return pairs;
+}
+
+function sidePrefix(side: 'old' | 'new', type: DiffLine['type'] | undefined) {
+  if (!type || type === 'context') return ' ';
+  if (side === 'old' && type === 'removed') return '-';
+  if (side === 'new' && type === 'added') return '+';
+  return ' ';
+}
+
+interface HalfProps {
+  line: DiffLine | null;
+  side: 'old' | 'new';
+  numWidth: number;
+  maxContentCh: number;
+  language: Language | null;
+  prismTheme: PrismTheme;
+}
+
+function Half({ line, side, numWidth, maxContentCh, language, prismTheme }: HalfProps) {
+  const tone = line ? DIFF_TONE_CLASSES[line.type] : DIFF_TONE_CLASSES.context;
+  const gutterCh = `calc(${numWidth}ch + 1rem)`;
+  // The content track's MINIMUM is the longest line in the whole diff (+ the
+  // cell's own 1.5rem horizontal padding). Every row therefore renders at the
+  // same width: short diffs still stretch to fill (1fr), long diffs push the
+  // row past the container so the viewer-level `overflow-x-auto` scrolls the
+  // whole block — never one line at a time.
+  const contentCh = `minmax(calc(${maxContentCh}ch + 1.5rem), 1fr)`;
+  return (
+    <div
+      className={cn('grid items-start', tone.row)}
+      style={{
+        gridTemplateColumns: `${gutterCh} 1.5rem ${contentCh}`,
+      }}
+    >
+      <div
+        className={cn(
+          'select-none px-2 text-right tabular-nums whitespace-nowrap',
+          tone.num,
+        )}
+      >
+        {(side === 'old' ? line?.oldNumber : line?.newNumber) ?? ''}
+      </div>
+      <div
+        className={cn(
+          'select-none text-center whitespace-nowrap',
+          tone.num,
+        )}
+      >
+        {sidePrefix(side, line?.type)}
+      </div>
+      <div
+        className={cn(
+          // overflow-x-clip: the width math below reserves the longest line,
+          // so this never cuts real content — it only stops estimation-error
+          // glyph runs (CJK/emoji render wider than their code-unit count)
+          // from bleeding under the neighbouring column.
+          'whitespace-pre px-3 overflow-x-clip',
+          line ? tone.text : 'text-muted-foreground/40',
+        )}
+      >
+        {line ? (
+          <DiffLineContent
+            content={line.content}
+            language={language}
+            prismTheme={prismTheme}
+          />
+        ) : (
+          ' '
+        )}
+      </div>
+    </div>
+  );
+}
+
+interface PairRowProps {
+  pair: { left: DiffLine | null; right: DiffLine | null };
+  numWidth: number;
+  maxContentCh: number;
+  language: Language | null;
+  prismTheme: PrismTheme;
+}
+
+function PairRow({ pair, numWidth, maxContentCh, language, prismTheme }: PairRowProps) {
+  // Tailwind's `grid-cols-2` is repeat(2, minmax(0, 1fr)) — the 0 minimum let
+  // each column shrink below its Half's reserved width, so the inner grids
+  // silently overflowed into each other while the row itself never exceeded
+  // the container (the viewer-level scroller never engaged). The columns must
+  // carry the SAME deterministic minimum the Half reserves inside: gutter
+  // (numWidth ch + 1rem) + 1.5rem prefix + content (maxContentCh ch + 1.5rem
+  // padding). Short diffs still split 50/50 (1fr); long diffs push the row
+  // wider than the container and the outer `overflow-x-auto` scrolls the
+  // whole block.
+  const halfMin = `calc(${numWidth}ch + 1rem + 1.5rem + ${maxContentCh}ch + 1.5rem)`;
+  return (
+    <div
+      className="grid font-mono text-[13px] leading-relaxed"
+      style={{ gridTemplateColumns: `repeat(2, minmax(${halfMin}, 1fr))` }}
+    >
+      <div className="border-r border-border/40">
+        <Half
+          line={pair.left}
+          side="old"
+          numWidth={numWidth}
+          maxContentCh={maxContentCh}
+          language={language}
+          prismTheme={prismTheme}
+        />
+      </div>
+      <div>
+        <Half
+          line={pair.right}
+          side="new"
+          numWidth={numWidth}
+          maxContentCh={maxContentCh}
+          language={language}
+          prismTheme={prismTheme}
+        />
+      </div>
+    </div>
+  );
+}
+
+/**
+ * Side-by-side diff. Left half = old, right half = new. Each row is a
+ * single grid wrapping two `<Half>` halves so a `<Virtuoso>` list can
+ * virtualize the whole stack with naturally synchronized scrolling.
+ *
+ * Both halves receive the SAME globally-computed `numWidth` so the two
+ * gutter columns are pixel-identical regardless of which side has the
+ * longer line numbers.
+ */
+export function SplitView({
+  lines,
+  numWidth,
+  maxContentCh,
+  language,
+  prismTheme,
+  hostScrolls = false,
+}: SplitViewProps) {
+  const pairs = React.useMemo(() => pairLines(lines), [lines]);
+
+  // See UnifiedView: a host that caps the height owns the scroller, and nesting
+  // a second one of the same height is what leaves blank bands mid-list.
+  if (pairs.length > VIRTUALIZE_THRESHOLD && !hostScrolls) {
+    // Virtualized rows share the same global `maxContentCh`, so scroll width
+    // stays stable as rows mount/unmount. The Virtuoso scroller owns BOTH
+    // axes here (CSS can't mix visible-x with auto-y), which is still
+    // whole-block scrolling — just inside the fixed-height viewport.
+    return (
+      <div data-slot="diff-viewer-split">
+        <Virtuoso
+          data={pairs}
+          style={{ height: VIRTUAL_VIEWPORT_HEIGHT }}
+          // See UnifiedView for why `initialItemCount` is required —
+          // without it, embedded iframes start with a zero-height list.
+          initialItemCount={Math.min(pairs.length, 30)}
+          itemContent={(_, pair) => (
+            <PairRow
+              pair={pair}
+              numWidth={numWidth}
+              maxContentCh={maxContentCh}
+              language={language}
+              prismTheme={prismTheme}
+            />
+          )}
+          increaseViewportBy={{ top: 200, bottom: 400 }}
+        />
+      </div>
+    );
+  }
+
+  return (
+    <div data-slot="diff-viewer-split">
+      {pairs.map((pair, idx) => (
+        <PairRow
+          key={idx}
+          pair={pair}
+          numWidth={numWidth}
+          maxContentCh={maxContentCh}
+          language={language}
+          prismTheme={prismTheme}
+        />
+      ))}
+    </div>
+  );
+}

package/src/diff-viewer/components/UnifiedView.tsx

@@ -0,0 +1,189 @@
+// Adapted from jalcoui (MIT) — github.com/jal-co/ui
+
+'use client';
+
+import * as React from 'react';
+import type { Language, PrismTheme } from 'prism-react-renderer';
+import { Virtuoso } from 'react-virtuoso';
+import { cn } from '@djangocfg/ui-core/lib';
+import { DIFF_TONE_CLASSES, type DiffLine } from '../types';
+import { DiffLineContent } from './DiffLineContent';
+
+interface UnifiedViewProps {
+  lines: DiffLine[];
+  numWidth: number;
+  /** Longest content line in ch (global, from the viewer root) — shared
+   * minimum width of the content column, so every row is equally wide and the
+   * outer `overflow-x-auto` scrolls the block with full-bleed row tints. */
+  maxContentCh: number;
+  language: Language | null;
+  prismTheme: PrismTheme;
+  /** The host already caps this block's height and owns the scroller, so the
+   *  virtualized path must not open a second one inside it. */
+  hostScrolls?: boolean;
+}
+
+function linePrefix(type: DiffLine['type']) {
+  if (type === 'added') return '+';
+  if (type === 'removed') return '-';
+  return ' ';
+}
+
+// Threshold above which we switch from a plain DOM table to a virtualized
+// list. Mirrors LogViewer — under this size the DOM stays debuggable;
+// above it tokenization + layout of thousands of rows starts to dominate
+// scroll.
+const VIRTUALIZE_THRESHOLD = 100;
+// Height of the scrolling viewport when virtualized. Kept here (not a prop)
+// because every existing consumer expects the viewer to expand to its
+// content; only the >100-line path needs a fixed window to virtualize.
+//
+// A HOST THAT ALREADY CAPS THE HEIGHT MUST SAY SO (`hostScrolls`). Chat used
+// to wrap this in its own 480px `overflowY:auto` box while Virtuoso opened a
+// second 480px scroller inside it — two scrollers of identical height, neither
+// owning the scroll position Virtuoso measures against. Virtuoso then sized its
+// spacers against a viewport it did not control and left ~250px of blank list
+// between two consecutively-numbered rows, which reads as "the diff lost some
+// lines" when nothing was lost at all.
+const VIRTUAL_VIEWPORT_HEIGHT = 480;
+
+interface RowProps {
+  line: DiffLine;
+  numWidth: number;
+  maxContentCh: number;
+  language: Language | null;
+  prismTheme: PrismTheme;
+}
+
+/**
+ * One unified-diff row. CSS grid (not a table cell) so a `<Virtuoso>`
+ * list can virtualize identical rows without a host `<table>` (the
+ * `display: table-row-group` virtual scrollers force on `<tbody>` doesn't
+ * play with arbitrary row heights).
+ */
+function Row({ line, numWidth, maxContentCh, language, prismTheme }: RowProps) {
+  const tone = DIFF_TONE_CLASSES[line.type];
+  const gutterCh = `calc(${numWidth}ch + 1rem)`;
+  // Same global minimum as SplitView: every row renders at the width of the
+  // longest line, so row background tints stay full-bleed while the outer
+  // `overflow-x-auto` scrolls the whole block.
+  const contentCh = `minmax(calc(${maxContentCh}ch + 1.5rem), 1fr)`;
+  return (
+    <div
+      className={cn(
+        'grid items-start font-mono text-[13px] leading-relaxed',
+        tone.row,
+      )}
+      style={{
+        gridTemplateColumns: `${gutterCh} ${gutterCh} 1.5rem ${contentCh}`,
+      }}
+    >
+      <div
+        className={cn(
+          'select-none px-2 text-right tabular-nums whitespace-nowrap',
+          tone.num,
+        )}
+      >
+        {line.oldNumber ?? ''}
+      </div>
+      <div
+        className={cn(
+          'select-none px-2 text-right tabular-nums whitespace-nowrap',
+          tone.num,
+        )}
+      >
+        {line.newNumber ?? ''}
+      </div>
+      <div
+        className={cn(
+          'select-none text-center whitespace-nowrap',
+          tone.num,
+        )}
+      >
+        {linePrefix(line.type)}
+      </div>
+      <div className={cn('whitespace-pre px-3', tone.text)}>
+        <DiffLineContent
+          content={line.content}
+          language={language}
+          prismTheme={prismTheme}
+        />
+      </div>
+    </div>
+  );
+}
+
+/**
+ * Single-column unified diff. Two gutters on the left carry the old / new
+ * line numbers, the third (narrow) column is the +/-/space prefix, then
+ * the content. Background tint per row signals the change kind.
+ *
+ * The gutter widths come from the globally-computed `numWidth` (passed
+ * down from the viewer root). Using CSS grid with the same explicit
+ * `gridTemplateColumns` on every row guarantees pixel-identical gutters
+ * across all rows, even when content sizes vary.
+ *
+ * Diffs above {@link VIRTUALIZE_THRESHOLD} lines render through
+ * `<Virtuoso>` so 1k–10k-line diffs don't lock the main thread.
+ */
+export function UnifiedView({
+  lines,
+  numWidth,
+  maxContentCh,
+  language,
+  prismTheme,
+  hostScrolls = false,
+}: UnifiedViewProps) {
+  // A host that caps the height owns the scroller; virtualizing inside it would
+  // nest a second one of the same size (see VIRTUAL_VIEWPORT_HEIGHT). Render
+  // every row plainly instead.
+  //
+  // The DOM cost is bounded by the PRODUCER, not by hope: cmdop's agent caps a
+  // patch at 400 changed lines (`diffcompute.go: maxChangedLines`) and sends
+  // stats-only above that, so a chat diff tops out around a thousand rows
+  // including context — an order of magnitude below where virtualization earns
+  // its keep. What it buys back is what GitHub publicly lost when it
+  // virtualized its own diff view: Ctrl+F, select-all and printing. diff2html
+  // and react-diff-view ship without virtualization for the same reason.
+  if (lines.length > VIRTUALIZE_THRESHOLD && !hostScrolls) {
+    return (
+      <div data-slot="diff-viewer-unified">
+        <Virtuoso
+          data={lines}
+          style={{ height: VIRTUAL_VIEWPORT_HEIGHT }}
+          // `initialItemCount` forces SSR-style initial render so rows
+          // appear immediately on first paint instead of waiting for
+          // ResizeObserver — without it, embedded iframes (Storybook,
+          // docs sites) sometimes start at zero height and the list
+          // stays empty until a window resize.
+          initialItemCount={Math.min(lines.length, 30)}
+          itemContent={(_, line) => (
+            <Row
+              line={line}
+              numWidth={numWidth}
+              maxContentCh={maxContentCh}
+              language={language}
+              prismTheme={prismTheme}
+            />
+          )}
+          increaseViewportBy={{ top: 200, bottom: 400 }}
+        />
+      </div>
+    );
+  }
+
+  return (
+    <div data-slot="diff-viewer-unified">
+      {lines.map((line, i) => (
+        <Row
+          key={i}
+          line={line}
+          numWidth={numWidth}
+          maxContentCh={maxContentCh}
+          language={language}
+          prismTheme={prismTheme}
+        />
+      ))}
+    </div>
+  );
+}

package/src/diff-viewer/diff-viewer.stories.tsx

@@ -0,0 +1,168 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { DiffViewer } from '.';
+
+const meta = {
+  title: 'Widgets/Code/DiffViewer',
+  component: DiffViewer,
+  tags: ['autodocs'],
+  parameters: {
+    docs: {
+      description: {
+        component:
+          'Line-by-line code diff. Pass `oldCode` + `newCode` to let the viewer run a tiny LCS, or pass `patch` for a pre-computed unified-diff. `layout="split"` switches to a side-by-side render. Optional `language` reuses the same `prism-react-renderer` instance as the `PrettyCode` tool — no second highlighter is loaded.',
+      },
+    },
+  },
+} satisfies Meta<typeof DiffViewer>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+const SMALL_OLD = `function greet(name) {
+  console.log('hi ' + name);
+}
+
+greet('world');
+`;
+
+const SMALL_NEW = `function greet(name: string) {
+  // greet politely
+  console.log(\`hello, \${name}!\`);
+}
+
+greet('world');
+`;
+
+const SQL_OLD = `SELECT id, name
+FROM users
+WHERE active = true
+ORDER BY id;`;
+
+const SQL_NEW = `SELECT id, name, email
+FROM users
+WHERE active = true
+  AND deleted_at IS NULL
+ORDER BY id DESC
+LIMIT 100;`;
+
+const PYTHON_OLD = `def total(items):
+    s = 0
+    for i in items:
+        s = s + i
+    return s
+`;
+
+const PYTHON_NEW = `from functools import reduce
+
+def total(items):
+    return reduce(lambda acc, i: acc + i, items, 0)
+`;
+
+function buildLargeDiff(): { oldCode: string; newCode: string } {
+  // 1200 lines on each side, ~15% changed — exercises the LCS path.
+  const oldLines: string[] = [];
+  const newLines: string[] = [];
+  for (let i = 0; i < 1200; i++) {
+    const base = `const value_${i} = compute(${i});`;
+    oldLines.push(base);
+    if (i % 7 === 0) {
+      newLines.push(`const value_${i} = compute(${i}, { strict: true });`);
+    } else if (i % 11 === 0) {
+      newLines.push(`// dropped value_${i}`);
+    } else {
+      newLines.push(base);
+    }
+  }
+  return { oldCode: oldLines.join('\n'), newCode: newLines.join('\n') };
+}
+
+export const Unified: Story = {
+  args: {
+    oldCode: SMALL_OLD,
+    newCode: SMALL_NEW,
+    layout: 'unified',
+    oldTitle: 'greet.js',
+    newTitle: 'greet.ts',
+    language: 'typescript',
+  },
+};
+
+export const Split: Story = {
+  args: {
+    oldCode: SMALL_OLD,
+    newCode: SMALL_NEW,
+    layout: 'split',
+    oldTitle: 'greet.js',
+    newTitle: 'greet.ts',
+    language: 'typescript',
+  },
+};
+
+export const SmallChange: Story = {
+  args: {
+    oldCode: 'console.log("hello");',
+    newCode: 'console.log("hello, world");',
+    layout: 'unified',
+  },
+};
+
+export const SyntaxHighlightedSQL: Story = {
+  args: {
+    oldCode: SQL_OLD,
+    newCode: SQL_NEW,
+    language: 'sql',
+    layout: 'split',
+    oldTitle: 'query.v1.sql',
+    newTitle: 'query.v2.sql',
+  },
+};
+
+export const SyntaxHighlightedPython: Story = {
+  args: {
+    oldCode: PYTHON_OLD,
+    newCode: PYTHON_NEW,
+    language: 'python',
+    layout: 'unified',
+    oldTitle: 'total.py (loop)',
+    newTitle: 'total.py (reduce)',
+  },
+};
+
+export const FromUnifiedPatch: Story = {
+  args: {
+    patch: `--- a/config.ts\n+++ b/config.ts\n@@ -1,4 +1,5 @@\n const config = {\n-  debug: false,\n+  debug: true,\n+  verbose: true,\n   port: 3000,\n };\n`,
+    layout: 'unified',
+    oldTitle: 'config.ts',
+    newTitle: 'config.ts',
+    language: 'typescript',
+  },
+};
+
+export const LargeChange: Story = {
+  args: {
+    ...buildLargeDiff(),
+    layout: 'unified',
+    oldTitle: 'large.before.ts',
+    newTitle: 'large.after.ts',
+    language: 'typescript',
+    // Keep context small so the rendered list stays manageable; the LCS
+    // still runs over all 1200 lines.
+    context: 2,
+  },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'Stresses the LCS path with ~1200 lines per side and ~15% changes. The LCS runs once (memoized) and the context window keeps the rendered row count practical.',
+      },
+    },
+  },
+};
+
+export const Empty: Story = {
+  args: {
+    oldCode: '',
+    newCode: '',
+    layout: 'unified',
+  },
+};

package/src/diff-viewer/hooks/useDiff.ts

@@ -0,0 +1,47 @@
+// Adapted from jalcoui (MIT) — github.com/jal-co/ui
+
+import { useMemo } from 'react';
+import {
+  computeStats,
+  diffLines,
+  lineNumberWidth,
+  parseUnifiedPatch,
+} from '../utils/computeDiff';
+import type { DiffInput, DiffLine, DiffStats } from '../types';
+
+interface UseDiffOptions {
+  input: DiffInput;
+  /** Context lines around each change-hunk. @default 3 */
+  context?: number;
+}
+
+interface UseDiffResult {
+  lines: DiffLine[];
+  numWidth: number;
+  stats: DiffStats;
+}
+
+/**
+ * Memoize the diff computation so a re-render of the viewer (e.g. tab
+ * switch, header copy click) doesn't re-run the LCS. The dependency
+ * surface intentionally narrows to the two input strings / patch — the
+ * `context` knob too, since a different window emits a different line
+ * list.
+ */
+export function useDiff({ input, context = 3 }: UseDiffOptions): UseDiffResult {
+  const isPatch = 'patch' in input && typeof input.patch === 'string';
+  const oldCode = isPatch ? '' : input.oldCode;
+  const newCode = isPatch ? '' : input.newCode;
+  const patch = isPatch ? (input as { patch: string }).patch : '';
+
+  return useMemo(() => {
+    const lines = isPatch
+      ? parseUnifiedPatch(patch)
+      : diffLines(oldCode, newCode, context);
+    return {
+      lines,
+      numWidth: lineNumberWidth(lines),
+      stats: computeStats(lines),
+    };
+  }, [isPatch, patch, oldCode, newCode, context]);
+}