@artkit-ai/react 0.1.0 → 0.2.0

package/src/components/version-diff.tsx

@@ -1,266 +0,0 @@
-import type { Artifact, ChangeSummary } from '@artkit-ai/core';
-import { Columns2, Rows2 } from 'lucide-react';
-import { useMemo, useState } from 'react';
-import { type ArtkitContextValue, useArtkit } from '../context.js';
-import { useArtifact } from '../hooks.js';
-import { diffLines, type LineDiffEntry, toSplitRows } from '../line-diff.js';
-import { ChangeList, cx, ErrorMessage, Loading, rootAttributes, type Slots, slot } from './shared.js';
-
-export type DiffLayout = 'unified' | 'split';
-export type ArtifactVersionDiffPart = 'toolbar' | 'changes' | 'lines';
-
-export interface ArtifactVersionDiffProps {
-  /** Load both versions by id. */
-  id?: string;
-  /** Older version; defaults to the one before `to`. */
-  from?: number;
-  /** Newer version; defaults to the latest. */
-  to?: number;
-  /** Or pass both artifacts directly. */
-  before?: Artifact;
-  after?: Artifact;
-  layout?: DiffLayout;
-  defaultLayout?: DiffLayout;
-  onLayoutChange?(layout: DiffLayout): void;
-  /** Show the structural change list from `kind.diff` (default true). */
-  showChanges?: boolean;
-  /** Show the line diff of the full projections (default true). */
-  showLines?: boolean;
-  className?: string;
-  slots?: Slots<ArtifactVersionDiffPart>;
-}
-
-export interface VersionComparison {
-  changes: ChangeSummary[];
-  lines: LineDiffEntry[];
-}
-
-/** Structural changes plus a line diff of the full text projections. `before` undefined means empty. */
-export function compareVersions(
-  ctx: ArtkitContextValue,
-  before: Artifact | undefined,
-  after: Artifact,
-): VersionComparison {
-  const kind = ctx.registry.get(after.kind);
-  const beforeContent = before?.content ?? kind.empty();
-  const changes: ChangeSummary[] = [];
-  if (before && before.title !== after.title) {
-    changes.push({
-      type: 'changed',
-      target: 'envelope:title',
-      summary: `'${before.title}' → '${after.title}'`,
-    });
-  }
-  try {
-    changes.push(...kind.diff(beforeContent, after.content));
-  } catch {
-    // The text diff below still shows what changed.
-  }
-  const project = (content: unknown, artifact: Artifact) => {
-    try {
-      return kind.project(content, {
-        mode: 'full',
-        locale: artifact.locale,
-        theme: ctx.themeFor(artifact.themeId),
-      }).text;
-    } catch {
-      return JSON.stringify(content, null, 2);
-    }
-  };
-  const lines = diffLines(before ? project(beforeContent, before) : '', project(after.content, after));
-  return { changes, lines };
-}
-
-/** Side-by-side or highlighted comparison between two versions (spec §13.1). */
-export function ArtifactVersionDiff(props: ArtifactVersionDiffProps) {
-  const ctx = useArtkit();
-  const { t } = ctx;
-  const [ownLayout, setOwnLayout] = useState<DiffLayout>(props.defaultLayout ?? 'unified');
-  const layout = props.layout ?? ownLayout;
-  const setLayout = (next: DiffLayout) => {
-    setOwnLayout(next);
-    props.onLayoutChange?.(next);
-  };
-
-  const afterQuery = useArtifact(
-    props.after ? undefined : props.id,
-    props.to === undefined ? {} : { version: props.to },
-  );
-  const after = props.after ?? afterQuery.artifact;
-  const fromVersion = props.from ?? (after && after.version > 1 ? after.version - 1 : undefined);
-  const beforeQuery = useArtifact(
-    props.before || fromVersion === undefined ? undefined : (props.id ?? after?.id),
-    {
-      ...(fromVersion === undefined ? {} : { version: fromVersion }),
-    },
-  );
-  const before = props.before ?? (fromVersion === undefined ? undefined : beforeQuery.artifact);
-
-  const comparison = useMemo(
-    () => (after && ctx.registry.has(after.kind) ? compareVersions(ctx, before, after) : undefined),
-    [ctx, before, after],
-  );
-
-  const error = afterQuery.error ?? beforeQuery.error;
-  const waiting = !after || (fromVersion !== undefined && !before);
-  const attrs = rootAttributes(ctx, after?.themeId);
-  if (error) {
-    return (
-      <div className={cx('ak-root ak-diff', props.className)} {...attrs}>
-        <ErrorMessage error={error} />
-      </div>
-    );
-  }
-  if (waiting || !comparison || !after) {
-    return (
-      <div className={cx('ak-root ak-diff', props.className)} {...attrs}>
-        <Loading />
-      </div>
-    );
-  }
-
-  const beforeLabel = before ? t('diffBefore', { version: before.version }) : '—';
-  const afterLabel = t('diffAfter', { version: after.version });
-
-  return (
-    <div className={cx('ak-root ak-diff', props.className)} {...attrs}>
-      {props.showChanges === false ? null : (
-        <section aria-label={t('changes')}>
-          <ChangeList changes={comparison.changes} {...slot(props.slots, 'changes', '')} />
-        </section>
-      )}
-      {props.showLines === false ? null : (
-        <>
-          <fieldset {...slot(props.slots, 'toolbar', 'ak-diff-toolbar')}>
-            <legend className="ak-sr-only">{t('diffViewLabel')}</legend>
-            {(['unified', 'split'] as const).map((option) => (
-              <button
-                key={option}
-                type="button"
-                className="ak-button"
-                aria-pressed={layout === option}
-                onClick={() => setLayout(option)}
-              >
-                {option === 'unified' ? <Rows2 aria-hidden="true" /> : <Columns2 aria-hidden="true" />}
-                {option === 'unified' ? t('diffUnified') : t('diffSplit')}
-              </button>
-            ))}
-          </fieldset>
-          {layout === 'unified' ? (
-            <UnifiedLines
-              lines={comparison.lines}
-              caption={`${beforeLabel} → ${afterLabel}`}
-              slots={props.slots}
-            />
-          ) : (
-            <SplitLines
-              lines={comparison.lines}
-              beforeLabel={beforeLabel}
-              afterLabel={afterLabel}
-              slots={props.slots}
-            />
-          )}
-        </>
-      )}
-    </div>
-  );
-}
-
-function Marker({ type }: { type: LineDiffEntry['type'] }) {
-  const { t } = useArtkit();
-  if (type === 'equal') return <td className="ak-diff-marker" />;
-  return (
-    <td className="ak-diff-marker">
-      <span aria-hidden="true">{type === 'insert' ? '+' : '−'}</span>
-      <span className="ak-sr-only">{type === 'insert' ? t('lineAdded') : t('lineRemoved')}</span>
-    </td>
-  );
-}
-
-function UnifiedLines({
-  lines,
-  caption,
-  slots,
-}: {
-  lines: LineDiffEntry[];
-  caption: string;
-  slots?: Slots<ArtifactVersionDiffPart> | undefined;
-}) {
-  return (
-    <table {...slot(slots, 'lines', 'ak-diff-lines')} data-layout="unified">
-      <caption className="ak-sr-only">{caption}</caption>
-      <tbody>
-        {lines.map((line) => (
-          <tr
-            key={`${line.type}:${line.oldLine ?? '-'}:${line.newLine ?? '-'}`}
-            className="ak-diff-line"
-            data-type={line.type}
-          >
-            <th scope="row">{line.oldLine ?? ''}</th>
-            <th scope="row">{line.newLine ?? ''}</th>
-            <Marker type={line.type} />
-            <td>{line.text}</td>
-          </tr>
-        ))}
-      </tbody>
-    </table>
-  );
-}
-
-function SplitLines({
-  lines,
-  beforeLabel,
-  afterLabel,
-  slots,
-}: {
-  lines: LineDiffEntry[];
-  beforeLabel: string;
-  afterLabel: string;
-  slots?: Slots<ArtifactVersionDiffPart> | undefined;
-}) {
-  const rows = useMemo(() => toSplitRows(lines), [lines]);
-  return (
-    <table {...slot(slots, 'lines', 'ak-diff-lines')} data-layout="split">
-      <thead>
-        <tr>
-          <th scope="col" colSpan={3}>
-            {beforeLabel}
-          </th>
-          <th scope="col" colSpan={3}>
-            {afterLabel}
-          </th>
-        </tr>
-      </thead>
-      <tbody>
-        {rows.map((row) => (
-          <tr key={`${row.left?.oldLine ?? '-'}:${row.right?.newLine ?? '-'}`}>
-            <th scope="row">{row.left?.oldLine ?? ''}</th>
-            {row.left && row.left.type !== 'equal' ? (
-              <Marker type="delete" />
-            ) : (
-              <td className="ak-diff-marker" />
-            )}
-            <td
-              className="ak-diff-cell"
-              data-type={row.left && row.left.type !== 'equal' ? 'delete' : undefined}
-            >
-              {row.left?.text ?? ''}
-            </td>
-            <th scope="row">{row.right?.newLine ?? ''}</th>
-            {row.right && row.right.type !== 'equal' ? (
-              <Marker type="insert" />
-            ) : (
-              <td className="ak-diff-marker" />
-            )}
-            <td
-              className="ak-diff-cell"
-              data-type={row.right && row.right.type !== 'equal' ? 'insert' : undefined}
-            >
-              {row.right?.text ?? ''}
-            </td>
-          </tr>
-        ))}
-      </tbody>
-    </table>
-  );
-}

package/src/line-diff.ts

@@ -1,111 +0,0 @@
-export type LineDiffType = 'equal' | 'insert' | 'delete';
-
-export interface LineDiffEntry {
-  type: LineDiffType;
-  text: string;
-  /** 1-based line number in the old text (equal and delete). */
-  oldLine?: number;
-  /** 1-based line number in the new text (equal and insert). */
-  newLine?: number;
-}
-
-export interface LineDiffOptions {
-  /**
-   * Upper bound for the LCS table (rows × columns) after trimming the common prefix and suffix.
-   * Above it the middle is reported as a block replacement, keeping memory bounded on huge projections.
-   */
-  maxCells?: number;
-}
-
-const splitLines = (text: string) => (text === '' ? [] : text.replace(/\r\n?/g, '\n').split('\n'));
-
-/** Line diff based on the longest common subsequence, with common prefix/suffix trimmed first. */
-export function diffLines(before: string, after: string, options: LineDiffOptions = {}): LineDiffEntry[] {
-  const a = splitLines(before);
-  const b = splitLines(after);
-  const maxCells = options.maxCells ?? 4_000_000;
-  let start = 0;
-  while (start < a.length && start < b.length && a[start] === b[start]) start++;
-  let endA = a.length;
-  let endB = b.length;
-  while (endA > start && endB > start && a[endA - 1] === b[endB - 1]) {
-    endA--;
-    endB--;
-  }
-
-  const out: LineDiffEntry[] = [];
-  for (let i = 0; i < start; i++) out.push({ type: 'equal', text: a[i]!, oldLine: i + 1, newLine: i + 1 });
-
-  const midA = a.slice(start, endA);
-  const midB = b.slice(start, endB);
-  const n = midA.length;
-  const m = midB.length;
-  if (n > 0 && m > 0 && n * m <= maxCells) {
-    // lengths[i][j] = LCS length of midA[i..] and midB[j..], stored flat.
-    const width = m + 1;
-    const lengths = new Uint32Array((n + 1) * width);
-    for (let i = n - 1; i >= 0; i--) {
-      for (let j = m - 1; j >= 0; j--) {
-        lengths[i * width + j] =
-          midA[i] === midB[j]
-            ? lengths[(i + 1) * width + j + 1]! + 1
-            : Math.max(lengths[(i + 1) * width + j]!, lengths[i * width + j + 1]!);
-      }
-    }
-    let i = 0;
-    let j = 0;
-    while (i < n && j < m) {
-      if (midA[i] === midB[j]) {
-        out.push({ type: 'equal', text: midA[i]!, oldLine: start + i + 1, newLine: start + j + 1 });
-        i++;
-        j++;
-      } else if (lengths[(i + 1) * width + j]! >= lengths[i * width + j + 1]!) {
-        out.push({ type: 'delete', text: midA[i]!, oldLine: start + i + 1 });
-        i++;
-      } else {
-        out.push({ type: 'insert', text: midB[j]!, newLine: start + j + 1 });
-        j++;
-      }
-    }
-    for (; i < n; i++) out.push({ type: 'delete', text: midA[i]!, oldLine: start + i + 1 });
-    for (; j < m; j++) out.push({ type: 'insert', text: midB[j]!, newLine: start + j + 1 });
-  } else {
-    for (let k = 0; k < n; k++) out.push({ type: 'delete', text: midA[k]!, oldLine: start + k + 1 });
-    for (let k = 0; k < m; k++) out.push({ type: 'insert', text: midB[k]!, newLine: start + k + 1 });
-  }
-
-  for (let k = 0; k < a.length - endA; k++) {
-    out.push({ type: 'equal', text: a[endA + k]!, oldLine: endA + k + 1, newLine: endB + k + 1 });
-  }
-  return out;
-}
-
-export interface SplitRow {
-  left?: LineDiffEntry;
-  right?: LineDiffEntry;
-}
-
-/** Pairs deletions with the insertions that follow them, for a side-by-side layout. */
-export function toSplitRows(entries: LineDiffEntry[]): SplitRow[] {
-  const rows: SplitRow[] = [];
-  let index = 0;
-  while (index < entries.length) {
-    const entry = entries[index]!;
-    if (entry.type === 'equal') {
-      rows.push({ left: entry, right: entry });
-      index++;
-      continue;
-    }
-    const deletes: LineDiffEntry[] = [];
-    const inserts: LineDiffEntry[] = [];
-    while (index < entries.length && entries[index]!.type === 'delete') deletes.push(entries[index++]!);
-    while (index < entries.length && entries[index]!.type === 'insert') inserts.push(entries[index++]!);
-    for (let k = 0; k < Math.max(deletes.length, inserts.length); k++) {
-      const row: SplitRow = {};
-      if (deletes[k]) row.left = deletes[k];
-      if (inserts[k]) row.right = inserts[k];
-      rows.push(row);
-    }
-  }
-  return rows;
-}