@kabmo-labs/kabmo 0.7.0 → 0.9.0

package/src/client/components/workspace/diff-panel/SplitView.tsx

@@ -1,209 +0,0 @@
-import { useMemo } from 'preact/hooks';
-import type { SplitDiffRow } from '@/shared/lib/fs/diff-parser';
-import { highlightLines } from '@/shared/lib/code/syntax-highlight';
-import { useSyntaxReady } from '@/client/hooks/ui/syntax-ready';
-import { useScrollRestore } from '@/client/hooks/editor/use-scroll-restore';
-
-interface SplitViewProps {
-  rows: SplitDiffRow[];
-  language: string;
-  /** Wrap long lines instead of scrolling horizontally. */
-  wordWrap: boolean;
-  /**
-   * The diff tab these rows belong to, so its scroll offset is remembered — or
-   * null for a caller with no tab of its own (a diff inside a chat tool card,
-   * where the timeline owns the scrolling).
-   */
-  tabKey: string | null;
-}
-
-export function SplitView({ rows, language, wordWrap, tabKey }: SplitViewProps) {
-  const syntaxReady = useSyntaxReady();
-  // Its own offset: split rows and unified lines are different heights, and
-  // switching shape must not carry one view's position onto the other's rows.
-  const scroll = useScrollRestore({ tabKey, surface: 'split' });
-
-  const htmlByIndex = useMemo(() => {
-    const left = new Array<string>(rows.length).fill('');
-    const right = new Array<string>(rows.length).fill('');
-    let start = -1;
-    const flush = (end: number) => {
-      if (start < 0) return;
-      const group = rows.slice(start, end);
-      const leftHtml = highlightLines(group.map((r) => r.left?.text ?? '').join('\n'), language);
-      const rightHtml = highlightLines(group.map((r) => r.right?.text ?? '').join('\n'), language);
-      for (let i = start; i < end; i++) {
-        left[i] = leftHtml[i - start] ?? '';
-        right[i] = rightHtml[i - start] ?? '';
-      }
-      start = -1;
-    };
-    rows.forEach((row, idx) => {
-      if (row.isMeta) flush(idx);
-      else if (start < 0) start = idx;
-    });
-    flush(rows.length);
-    return { left, right };
-  }, [rows, language, syntaxReady]);
-
-  if (rows.length === 0) {
-    return (
-      <div className="flex-1 flex items-center justify-center text-ink/40 font-mono text-xs p-8">
-        No differences between working file and target.
-      </div>
-    );
-  }
-
-  return (
-    <div
-      ref={scroll.ref}
-      onScroll={scroll.onScroll}
-      data-testid="diff-scroller"
-      className="w-full h-full overflow-auto font-mono text-xs select-text bg-paper text-ink code-surface"
-    >
-      {/* The room under the last row belongs to the content, not the scroller:
-          a scroll container's own bottom padding is not part of its scrollable
-          overflow, so the padding has to sit inside it to have any effect. */}
-      <div className={`pb-4 ${wordWrap ? 'w-full' : 'w-max min-w-full min-w-[700px]'}`}>
-        <div className="grid grid-cols-2 sticky top-0 z-10 bg-canvas border-b border-ink/10 text-[11px] text-ink/70 font-sans select-none shadow-xs">
-          <div className="px-3 py-1 font-medium border-r border-ink/10 flex items-center justify-between">
-            <span>Original (HEAD / Base)</span>
-          </div>
-          <div className="px-3 py-1 font-medium flex items-center justify-between">
-            <span>Modified (Working Tree)</span>
-          </div>
-        </div>
-
-        {/* Wrap needs `table-fixed`: auto layout sizes a column by its widest
-            cell's UNAMBIGUOUS minimum (`overflow-wrap: break-word` does not
-            lower it), so a long line would widen the table and scroll instead of
-            wrapping. Fixed layout takes its widths from the FIRST row — which
-            here is the `colSpan={4}` meta row, so every column came out equal
-            (measured 99px) and the line-number gutters grew to the width of a
-            code column. The colgroup states them instead: two 48px gutters and
-            the two content columns sharing the rest. */}
-        <table className={`border-collapse ${wordWrap ? 'table-fixed w-full' : 'w-full'}`}>
-          {wordWrap && (
-            <colgroup>
-              <col className="w-12" />
-              <col />
-              <col className="w-12" />
-              <col />
-            </colgroup>
-          )}
-          <tbody>
-            {rows.map((row, idx) => {
-              if (row.isMeta) {
-                return (
-                  <tr key={idx} className="bg-canvas border-y border-ink/10 text-meta select-none">
-                    <td colSpan={4} className="py-1 px-3 text-[11px] font-semibold text-meta text-center font-mono">
-                      {row.metaText}
-                    </td>
-                  </tr>
-                );
-              }
-
-              const left = row.left;
-              const right = row.right;
-
-              const isLeftDel = left?.type === 'del';
-              const isRightAdd = right?.type === 'add';
-
-              return (
-                <tr key={idx} className="border-b border-ink/[0.04]">
-                  {/* Left Line Number */}
-                  <td
-                    className={`w-12 py-0.5 px-2 text-right text-[10px] select-none border-r border-ink/10 font-mono ${
-                      wordWrap ? 'align-top' : ''
-                    } ${
-                      isLeftDel
-                        ? 'bg-error/15 text-error font-semibold'
-                        : left
-                        ? 'bg-canvas/50 text-ink/40'
-                        : 'bg-canvas/80 text-transparent'
-                    }`}
-                  >
-                    {left?.lineNumber || ''}
-                  </td>
-
-                  {/* Left Content (Original) */}
-                  <td
-                    className={`py-0.5 px-2 border-r border-ink/10 text-ink ${
-                      wordWrap ? 'whitespace-pre-wrap break-words align-top' : 'min-w-[320px] whitespace-pre'
-                    } ${
-                      isLeftDel
-                        ? 'bg-error/10'
-                        : left
-                        ? 'hover:bg-ink/[0.02]'
-                        : 'bg-canvas/40 select-none'
-                    }`}
-                  >
-                    {left ? (
-                      <>
-                        <span className={`inline-block w-4 text-center select-none font-bold ${isLeftDel ? 'text-error' : 'opacity-0'}`}>
-                          {isLeftDel ? '-' : ' '}
-                        </span>
-                        <span
-                          className="shiki"
-                          dangerouslySetInnerHTML={{
-                            __html: left.text ? htmlByIndex.left[idx] || '&nbsp;' : '&nbsp;',
-                          }}
-                        />
-                      </>
-                    ) : (
-                      <span className="opacity-0">&nbsp;</span>
-                    )}
-                  </td>
-
-                  {/* Right Line Number */}
-                  <td
-                    className={`w-12 py-0.5 px-2 text-right text-[10px] select-none border-r border-ink/10 font-mono ${
-                      wordWrap ? 'align-top' : ''
-                    } ${
-                      isRightAdd
-                        ? 'bg-success/15 text-success font-semibold'
-                        : right
-                        ? 'bg-canvas/50 text-ink/40'
-                        : 'bg-canvas/80 text-transparent'
-                    }`}
-                  >
-                    {right?.lineNumber || ''}
-                  </td>
-
-                  {/* Right Content (Modified) */}
-                  <td
-                    className={`py-0.5 px-2 text-ink ${
-                      wordWrap ? 'whitespace-pre-wrap break-words align-top' : 'min-w-[320px] whitespace-pre'
-                    } ${
-                      isRightAdd
-                        ? 'bg-success/10'
-                        : right
-                        ? 'hover:bg-ink/[0.02]'
-                        : 'bg-canvas/40 select-none'
-                    }`}
-                  >
-                    {right ? (
-                      <>
-                        <span className={`inline-block w-4 text-center select-none font-bold ${isRightAdd ? 'text-success' : 'opacity-0'}`}>
-                          {isRightAdd ? '+' : ' '}
-                        </span>
-                        <span
-                          className="shiki"
-                          dangerouslySetInnerHTML={{
-                            __html: right.text ? htmlByIndex.right[idx] || '&nbsp;' : '&nbsp;',
-                          }}
-                        />
-                      </>
-                    ) : (
-                      <span className="opacity-0">&nbsp;</span>
-                    )}
-                  </td>
-                </tr>
-              );
-            })}
-          </tbody>
-        </table>
-      </div>
-    </div>
-  );
-}

package/src/client/components/workspace/diff-panel/UnifiedView.tsx

@@ -1,150 +0,0 @@
-import { useMemo } from 'preact/hooks';
-import type { DiffLine } from '@/shared/lib/fs/diff-parser';
-import { highlightLines } from '@/shared/lib/code/syntax-highlight';
-import { useSyntaxReady } from '@/client/hooks/ui/syntax-ready';
-import { useScrollRestore } from '@/client/hooks/editor/use-scroll-restore';
-
-interface UnifiedViewProps {
-  lines: DiffLine[];
-  language: string;
-  /** Wrap long lines instead of scrolling horizontally. */
-  wordWrap: boolean;
-  /**
-   * The diff tab these rows belong to, so its scroll offset is remembered — or
-   * null for a caller with no tab of its own (a diff inside a chat tool card,
-   * where the timeline owns the scrolling).
-   */
-  tabKey: string | null;
-}
-
-export function UnifiedView({ lines, language, wordWrap, tabKey }: UnifiedViewProps) {
-  const syntaxReady = useSyntaxReady();
-  // The unified and split shapes are different row counts and heights for the
-  // same diff, so each keeps its own offset (see `ScrollSurface`).
-  const scroll = useScrollRestore({ tabKey, surface: 'unified' });
-
-  const htmlByIndex = useMemo(() => {
-    const out = new Array<string>(lines.length).fill('');
-    let start = -1;
-    const flush = (end: number) => {
-      if (start < 0) return;
-      const html = highlightLines(lines.slice(start, end).map((l) => l.text).join('\n'), language);
-      for (let i = start; i < end; i++) out[i] = html[i - start] ?? '';
-      start = -1;
-    };
-    lines.forEach((line, idx) => {
-      if (line.type === 'meta') flush(idx);
-      else if (start < 0) start = idx;
-    });
-    flush(lines.length);
-    return out;
-  }, [lines, language, syntaxReady]);
-
-  if (lines.length === 0) {
-    return (
-      <div className="flex-1 flex items-center justify-center text-ink/40 font-mono text-xs p-8">
-        No differences between working file and target.
-      </div>
-    );
-  }
-
-  return (
-    <div
-      ref={scroll.ref}
-      onScroll={scroll.onScroll}
-      data-testid="diff-scroller"
-      className="w-full h-full overflow-auto font-mono text-xs select-text bg-paper text-ink code-surface"
-    >
-      {/* The room under the last row belongs to the content, not the scroller:
-          a scroll container's own bottom padding is not part of its scrollable
-          overflow, so the padding has to sit inside it to have any effect. */}
-      <div className={`pb-4 ${wordWrap ? 'w-full' : 'w-max min-w-full'}`}>
-        {/* Wrap needs `table-fixed`: auto layout sizes a column by its widest
-            cell's UNAMBIGUOUS minimum (`overflow-wrap: break-word` does not
-            lower it), so a long line would still widen the table and scroll
-            instead of wrapping. Fixed layout takes the width from the row's
-            own box, which is what makes the cell's wrap rule effective. */}
-        <table className={`border-collapse ${wordWrap ? 'table-fixed w-full' : 'w-max min-w-full'}`}>
-          <tbody>
-            {lines.map((line, idx) => {
-              if (line.type === 'meta') {
-                return (
-                  <tr key={idx} className="bg-canvas border-y border-ink/10 text-meta select-none">
-                    <td className="w-12 text-center py-1 px-2 text-[10px] opacity-60 border-r border-ink/10 font-mono">...</td>
-                    <td className="w-12 text-center py-1 px-2 text-[10px] opacity-60 border-r border-ink/10 font-mono">...</td>
-                    <td className="py-1 px-3 text-[11px] font-semibold text-meta font-mono tracking-tight">{line.text}</td>
-                  </tr>
-                );
-              }
-
-              const isAdd = line.type === 'add';
-              const isDel = line.type === 'del';
-
-              return (
-                <tr
-                  key={idx}
-                  className={`transition-colors group ${
-                    isAdd
-                      ? 'bg-success/10 hover:bg-success/15'
-                      : isDel
-                      ? 'bg-error/10 hover:bg-error/15'
-                      : 'hover:bg-ink/[0.03]'
-                  }`}
-                >
-                  {/* Old line number. Top-aligned when the row wraps, or the
-                      number would float to the middle of a multi-line cell
-                      instead of naming its first line. */}
-                  <td
-                    className={`w-12 py-0.5 px-2 text-right text-[10px] select-none border-r border-ink/10 font-mono ${
-                      wordWrap ? 'align-top' : ''
-                    } ${
-                      isDel
-                        ? 'bg-error/15 text-error font-semibold'
-                        : isAdd
-                        ? 'bg-success/15 text-success/70'
-                        : 'bg-canvas/50 text-ink/40'
-                    }`}
-                  >
-                    {line.oldLineNumber || ''}
-                  </td>
-
-                  {/* New line number */}
-                  <td
-                    className={`w-12 py-0.5 px-2 text-right text-[10px] select-none border-r border-ink/10 font-mono ${
-                      wordWrap ? 'align-top' : ''
-                    } ${
-                      isAdd
-                        ? 'bg-success/15 text-success font-semibold'
-                        : isDel
-                        ? 'bg-error/15 text-error/70'
-                        : 'bg-canvas/50 text-ink/40'
-                    }`}
-                  >
-                    {line.newLineNumber || ''}
-                  </td>
-
-                  {/* Change prefix & code text */}
-                  <td className={`py-0.5 px-3 text-ink pr-6 ${wordWrap ? 'whitespace-pre-wrap break-words align-top' : 'whitespace-pre'}`}>
-                    <span
-                      className={`inline-block w-4 text-center select-none font-bold ${
-                        isAdd ? 'text-success' : isDel ? 'text-error' : 'opacity-0'
-                      }`}
-                    >
-                      {isAdd ? '+' : isDel ? '-' : ' '}
-                    </span>
-                    <span
-                      className="shiki"
-                      dangerouslySetInnerHTML={{
-                        __html: line.text ? htmlByIndex[idx] || '&nbsp;' : '&nbsp;',
-                      }}
-                    />
-                  </td>
-                </tr>
-              );
-            })}
-          </tbody>
-        </table>
-      </div>
-    </div>
-  );
-}

package/src/client/hooks/editor/scroll-container.test.ts

@@ -1,102 +0,0 @@
-/**
- * @license
- * SPDX-License-Identifier: Apache-2.0
- */
-
-/**
- * The scroll-container walk, shared by the editor's lazy window and the find
- * widget's reveal.
- *
- * The two must agree: one resolves which lines to draw from the visible band,
- * the other moves that band. Two copies of this walk would let the widget scroll
- * a container the window never reads — the match would be marked somewhere
- * nobody can see. Exercised against a real DOM (happy-dom) because the answer is
- * a computed style.
- */
-
-import { afterAll, beforeAll, describe, expect, test } from 'bun:test';
-import { Window } from 'happy-dom';
-
-import { findScrollContainer } from '@/client/hooks/editor/scroll-container';
-
-const installed: Record<string, unknown> = {};
-const displaced: Record<string, unknown> = {};
-
-beforeAll(() => {
-  const win = new Window({ url: 'http://localhost' });
-  for (const key of ['window', 'document', 'Node', 'Element', 'HTMLElement', 'getComputedStyle']) {
-    displaced[key] = (globalThis as Record<string, unknown>)[key];
-    installed[key] = (win as unknown as Record<string, unknown>)[key];
-    (globalThis as Record<string, unknown>)[key] = installed[key];
-  }
-});
-
-afterAll(() => {
-  for (const key of Object.keys(installed)) {
-    if (displaced[key] === undefined) delete (globalThis as Record<string, unknown>)[key];
-    else (globalThis as Record<string, unknown>)[key] = displaced[key];
-  }
-});
-
-/** An element whose computed style reports `overflow-y`, with a scrollable height. */
-function makeElement(overflowY: string, scrollable: boolean): HTMLElement {
-  const element = document.createElement('div');
-  element.style.overflowY = overflowY;
-  if (scrollable) {
-    // happy-dom reports clientHeight 0, so the walk's `scrollHeight > clientHeight`
-    // test needs a stubbed pair to describe a container that can actually scroll.
-    Object.defineProperty(element, 'scrollHeight', { value: 400, configurable: true });
-    Object.defineProperty(element, 'clientHeight', { value: 100, configurable: true });
-  }
-  return element;
-}
-
-describe('findScrollContainer', () => {
-  test('finds the nearest ancestor that scrolls', () => {
-    const outer = makeElement('auto', true);
-    const inner = makeElement('visible', false);
-    const surface = document.createElement('div');
-    inner.appendChild(surface);
-    outer.appendChild(inner);
-    document.body.appendChild(outer);
-
-    expect(findScrollContainer(surface)).toBe(outer);
-    outer.remove();
-  });
-
-  test('skips a container that cannot actually scroll', () => {
-    // `overflow: auto` on a box whose content fits is not a scroller: returning
-    // it would make `revealOffset` write scrollTop onto a box that ignores it.
-    const outer = makeElement('auto', true);
-    const fitted = makeElement('auto', false);
-    const surface = document.createElement('div');
-    fitted.appendChild(surface);
-    outer.appendChild(fitted);
-    document.body.appendChild(outer);
-
-    expect(findScrollContainer(surface)).toBe(outer);
-    outer.remove();
-  });
-
-  test('reports nothing when no ancestor scrolls', () => {
-    const plain = document.createElement('div');
-    const surface = document.createElement('div');
-    plain.appendChild(surface);
-    document.body.appendChild(plain);
-
-    expect(findScrollContainer(surface)).toBeNull();
-    plain.remove();
-  });
-
-  test('prefers the nearest scroller, so a nested panel scrolls itself', () => {
-    const outer = makeElement('auto', true);
-    const inner = makeElement('scroll', true);
-    const surface = document.createElement('div');
-    inner.appendChild(surface);
-    outer.appendChild(inner);
-    document.body.appendChild(outer);
-
-    expect(findScrollContainer(surface)).toBe(inner);
-    outer.remove();
-  });
-});

package/src/client/hooks/editor/scroll-container.ts

@@ -1,26 +0,0 @@
-/**
- * @license
- * SPDX-License-Identifier: Apache-2.0
- */
-
-/**
- * The ancestor a code surface actually scrolls inside.
- *
- * The lazy editor window and the find widget's "scroll to this match" both need
- * this answer, and they must agree: one resolves which lines to draw from the
- * visible band, the other moves that band. Two copies of the walk would let the
- * widget scroll a container the window never reads.
- *
- * Walks up rather than taking a ref: the surface is mounted under different
- * scrollers (the desktop editor panel, the phone's full-screen editor) and is
- * also mounted inside a page that scrolls itself, which is the `null` case.
- */
-export function findScrollContainer(element: HTMLElement): HTMLElement | null {
-  for (let node = element.parentElement; node; node = node.parentElement) {
-    const overflowY = getComputedStyle(node).overflowY;
-    if ((overflowY === 'auto' || overflowY === 'scroll' || overflowY === 'overlay') && node.scrollHeight > node.clientHeight) {
-      return node;
-    }
-  }
-  return null;
-}

package/src/client/hooks/editor/use-code-window.ts

@@ -1,100 +0,0 @@
-import { useCallback, useEffect, useLayoutEffect, useRef, useState } from 'preact/hooks';
-import type { RefObject } from 'preact';
-
-import { codeWindow, firstWindow, resolveWindow, sameWindow, type CodeWindow, type LineGeometry, type LineWindow } from '@/shared/lib/code/lazy-window';
-import { findScrollContainer } from '@/client/hooks/editor/scroll-container';
-
-export interface UseCodeWindowOptions {
-  /** The surface's root box: the frame every line offset in `geometry` is measured from. */
-  rootRef: RefObject<HTMLElement | null>;
-  /** Lines in the document on screen. */
-  lineCount: number;
-  /** Document geometry, or null until the wrap/row measurement lands. */
-  geometry: LineGeometry | null;
-  /** False for short documents (they render whole) and when geometry cannot be measured. */
-  enabled: boolean;
-}
-
-/**
- * The lines visible inside the scroll container `root` lives in.
- *
- * Both rectangles are read in viewport coordinates, so this needs no knowledge
- * of scroll offsets: the part of the editor's box the container actually shows
- * is exactly the band between the two.
- */
-function visibleWindow(root: HTMLElement, geometry: LineGeometry): LineWindow {
-  const frameTop = root.getBoundingClientRect().top;
-  const container = findScrollContainer(root);
-  const viewTop = container ? container.getBoundingClientRect().top : 0;
-  const viewBottom = container
-    ? container.getBoundingClientRect().bottom
-    : globalThis.innerHeight || geometry.rowHeight;
-  return resolveWindow(geometry, viewTop - frameTop, viewBottom - viewTop);
-}
-
-/**
- * Rendering window for the lazy editor surface.
- *
- * A long document is highlighted, gutters and all, only where it can be seen;
- * this hook owns which lines those are and re-resolves them on scroll, on
- * resize, and whenever the geometry moves (a keystroke re-wraps a line). The
- * scroll listener is a capturing one on the window: scroll events do not
- * bubble, but they do reach a capturing listener, so the surface follows
- * whichever ancestor scrolls — the desktop editor panel, the phone's
- * full-screen editor, or the page.
- *
- * Returns null for a document that renders whole, which is the caller's cue to
- * keep the plain, unwindowed surface.
- */
-export function useCodeWindow({ rootRef, lineCount, geometry, enabled }: UseCodeWindowOptions): CodeWindow | null {
-  const [lineWindow, setLineWindow] = useState<LineWindow | null>(null);
-
-  const compute = useCallback(() => {
-    const root = rootRef.current;
-    if (!enabled || !root) return;
-    const next = geometry ? visibleWindow(root, geometry) : firstWindow(lineCount);
-    setLineWindow((previous) => (sameWindow(previous, next) ? previous : next));
-  }, [enabled, geometry, lineCount, rootRef]);
-
-  // Layout effect: the first window has to be resolved before the browser
-  // paints, or a long document flashes its untouched opening lines.
-  useLayoutEffect(() => {
-    compute();
-  }, [compute]);
-
-  // The listeners follow `enabled`, not `compute`: re-resolving on every
-  // keystroke must not tear down and rebuild the observer each time.
-  const computeRef = useRef(compute);
-  computeRef.current = compute;
-  useEffect(() => {
-    if (!enabled) return;
-    let frame = 0;
-    const schedule = () => {
-      if (frame) return;
-      frame = requestAnimationFrame(() => {
-        frame = 0;
-        computeRef.current();
-      });
-    };
-    window.addEventListener('scroll', schedule, { passive: true, capture: true });
-    window.addEventListener('resize', schedule);
-    const observer = typeof ResizeObserver === 'undefined' ? null : new ResizeObserver(schedule);
-    const root = rootRef.current;
-    if (root) observer?.observe(root);
-    return () => {
-      if (frame) cancelAnimationFrame(frame);
-      window.removeEventListener('scroll', schedule, { capture: true });
-      window.removeEventListener('resize', schedule);
-      observer?.disconnect();
-    };
-  }, [enabled, rootRef]);
-
-  if (!enabled) return null;
-  if (!geometry) {
-    // First commit: the layout effect above lands the real window in the same
-    // frame, so this only bounds how much the opening render is allowed to draw.
-    const opening = firstWindow(lineCount);
-    return { ...opening, top: 0, bottom: 0, breakAtEnd: opening.end >= lineCount };
-  }
-  return codeWindow(geometry, lineWindow ?? firstWindow(geometry.lineCount));
-}