pi-declaw 0.2.0

package/playground/inline-diff.ts

@@ -0,0 +1,131 @@
+import { diffWords } from './diff.ts';
+
+type Node = { tag: string; attrs: string; text: string; children: Node[] };
+type Segment = { start: number; end: number; tags: string[] };
+const inlineTags = new Set(['strong', 'em', 'code']);
+const allowed = /^(p|h[1-6]|strong|em|code|pre|ol|ul|li|table|thead|tbody|tr|th|td)$/;
+const unmark = (html: string) => html.replace(/<(?:del|ins) class="change">|<\/(?:del|ins)>/g, '');
+const escape = (s: string) => s.replace(/[&<>"']/g, c => ({ '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;' })[c]!);
+const decode = (s: string) => s.replace(/&(amp|lt|gt|quot|#39);/g, (_, entity: string) => ({ amp: '&', lt: '<', gt: '>', quot: '"', '#39': "'" })[entity]!);
+
+/** Parse only the bounded, inert HTML produced by markdown.ts. Never raw model HTML. */
+function parse(html: string): Node {
+  const root: Node = { tag: '', attrs: '', text: '', children: [] }, stack = [root];
+  for (const token of unmark(html).matchAll(/<([^>]+)>|([^<]+)/g)) {
+    if (token[2] !== undefined) {
+      stack.at(-1)!.children.push({ tag: '', attrs: '', text: decode(token[2]), children: [] });
+    } else if (token[1].startsWith('/')) {
+      if (stack.length === 1 || stack.pop()!.tag !== token[1].slice(1)) throw new Error('Unbalanced generated Markdown');
+    } else {
+      const match = /^([a-z][a-z0-9]*)(.*)$/.exec(token[1]);
+      if (!match || !allowed.test(match[1]) || !(match[2] === '' || match[1] === 'ol' && /^ start="\d+"$/.test(match[2]))) throw new Error('Unsupported generated Markdown tag');
+      if (stack.length > 96) throw new Error('Generated Markdown nesting limit');
+      const node: Node = { tag: match[1], attrs: match[2], text: '', children: [] };
+      stack.at(-1)!.children.push(node); stack.push(node);
+    }
+  }
+  if (stack.length !== 1) throw new Error('Unclosed generated Markdown');
+  return root;
+}
+const serialize = (n: Node): string => n.tag ? `<${n.tag}${n.attrs}>${n.children.map(serialize).join('')}</${n.tag}>` : escape(n.text);
+const phrasing = (n: Node): boolean => !n.tag || inlineTags.has(n.tag) && n.children.every(phrasing);
+const children = (n: Node) => n.children.some(c => c.tag && !inlineTags.has(c.tag))
+  ? n.children.filter(c => c.tag || c.text.trim()) : n.children;
+const sameShape = (a: Node, b: Node) => a.tag === b.tag && a.attrs === b.attrs;
+function marked(n: Node, kind: 'remove' | 'add'): string {
+  if (!n.tag) return n.text ? `<${kind === 'remove' ? 'del' : 'ins'} class="change">${escape(n.text)}</${kind === 'remove' ? 'del' : 'ins'}>` : '';
+  return `<${n.tag}${n.attrs}>${n.children.map(c => marked(c, kind)).join('')}</${n.tag}>`;
+}
+function flatten(nodes: Node[]) {
+  let text = ''; const segments: Segment[] = [];
+  function visit(node: Node, tags: string[]) {
+    if (!node.tag) {
+      const start = text.length; text += node.text;
+      if (text.length > start) segments.push({ start, end: text.length, tags });
+    } else node.children.forEach(c => visit(c, [...tags, node.tag]));
+  }
+  nodes.forEach(n => visit(n, []));
+  return { text, segments };
+}
+function inline(before: Node[], after: Node[], allowGap: boolean): string {
+  const left = flatten(before), right = flatten(after);
+  if (left.text === right.text && before.map(serialize).join('') !== after.map(serialize).join('')) {
+    return before.map(n => marked(n, 'remove')).join('') + (allowGap ? '<span class="diff-gap"> </span>' : '') + after.map(n => marked(n, 'add')).join('');
+  }
+  const parts = diffWords(left.text, right.text).parts;
+  let a = 0, b = 0, output = '';
+  for (let i = 0; i < parts.length; i++) {
+    const part = parts[i], side = part.kind === 'remove' ? left : right;
+    const start = part.kind === 'remove' ? a : b, end = start + part.text.length;
+    // This is presentation spacing between two alternatives, not source content.
+    if (allowGap && part.kind === 'add' && parts[i - 1]?.kind === 'remove' && /\S$/.test(parts[i - 1].text) && /^\S/.test(part.text)) output += '<span class="diff-gap"> </span>';
+    let low = 0, high = side.segments.length;
+    while (low < high) { const mid = (low + high) >>> 1; if (side.segments[mid].end <= start) low = mid + 1; else high = mid; }
+    for (let at = low; at < side.segments.length && side.segments[at].start < end; at++) {
+      const segment = side.segments[at];
+      let leaf = escape(side.text.slice(Math.max(start, segment.start), Math.min(end, segment.end)));
+      if (part.kind !== 'equal') {
+        const tag = part.kind === 'remove' ? 'del' : 'ins';
+        leaf = `<${tag} class="change">${leaf}</${tag}>`;
+      }
+      for (const tag of [...segment.tags].reverse()) leaf = `<${tag}>${leaf}</${tag}>`;
+      output += leaf;
+    }
+    if (part.kind !== 'add') a += part.text.length;
+    if (part.kind !== 'remove') b += part.text.length;
+  }
+  return output;
+}
+
+export function markBlock(html: string, kind: 'remove' | 'add'): string {
+  return children(parse(html)).map(n => marked(n, kind)).join('');
+}
+
+/** Merge compatible paragraphs, list items and table cells in place. Common text
+ * occurs once; replacements are adjacent del/ins within the same sentence.
+ * Structural insertions/deletions remain at their actual tree positions.
+ */
+export function mergeInlineBlocks(beforeHtml: string, afterHtml: string): string | null {
+  const a = children(parse(beforeHtml)), b = children(parse(afterHtml));
+  if (a.length !== 1 || b.length !== 1 || !sameShape(a[0], b[0])) return null;
+  let budget = 250_000;
+  function merge(left: Node, right: Node): string {
+    if (serialize(left) === serialize(right)) return serialize(right);
+    if (!left.tag) return inline([left], [right], true);
+    const body = left.children.every(phrasing) && right.children.every(phrasing)
+      ? inline(left.children, right.children, left.tag !== 'pre' && left.tag !== 'code')
+      : sequence(children(left), children(right));
+    return `<${right.tag}${right.attrs}>${body}</${right.tag}>`;
+  }
+  function sequence(left: Node[], right: Node[]): string {
+    const leftKeys = left.map(serialize), rightKeys = right.map(serialize);
+    let output = '';
+    function pairs(from: number, to: number, otherFrom: number, otherTo: number) {
+      while (from < to || otherFrom < otherTo) {
+        if (from < to && otherFrom < otherTo && sameShape(left[from], right[otherFrom])) {
+          output += merge(left[from++], right[otherFrom++]);
+        } else {
+          if (from < to) output += marked(left[from++], 'remove');
+          if (otherFrom < otherTo) output += marked(right[otherFrom++], 'add');
+        }
+      }
+    }
+    const columns = right.length + 1, cells = (left.length + 1) * columns;
+    if (cells > budget) { pairs(0, left.length, 0, right.length); return output; }
+    budget -= cells;
+    const lengths = new Uint32Array(cells);
+    for (let i = left.length - 1; i >= 0; i--) for (let j = right.length - 1; j >= 0; j--) {
+      lengths[i * columns + j] = leftKeys[i] === rightKeys[j] ? 1 + lengths[(i + 1) * columns + j + 1] : Math.max(lengths[(i + 1) * columns + j], lengths[i * columns + j + 1]);
+    }
+    let i = 0, j = 0, start = 0, otherStart = 0;
+    while (i < left.length && j < right.length) {
+      if (leftKeys[i] === rightKeys[j]) {
+        pairs(start, i, otherStart, j); output += rightKeys[j]; start = ++i; otherStart = ++j;
+      } else if (lengths[(i + 1) * columns + j] >= lengths[i * columns + j + 1]) i++;
+      else j++;
+    }
+    pairs(start, left.length, otherStart, right.length);
+    return output;
+  }
+  return merge(a[0], b[0]);
+}

package/playground/markdown.ts

@@ -0,0 +1,239 @@
+import { diffWords } from './diff.ts';
+
+/** Half-open UTF-16 offsets into the unmodified Markdown source. */
+export interface Mark { start: number; end: number; kind: 'remove' | 'add' }
+interface Range { start: number; end: number }
+interface Line extends Range { next: number }
+const escape = (text: string) => text.replace(/[&<>"']/g, char =>
+  ({ '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;' })[char]!);
+
+/** A small, inert Markdown subset, not CommonMark. Links/images remain literal text.
+ * Line views retain source offsets when list indentation is removed. Marks are
+ * emitted only at literal leaves, so they cannot alter parsing or cross tags.
+ * Depth and delimiter-search budgets fall back to literal text, never truncation.
+ */
+export function renderMarkdown(source: string, marks: Mark[] = []): string {
+  const ranges: Mark[] = [];
+  for (const mark of marks.filter(m => Number.isInteger(m.start) && Number.isInteger(m.end) &&
+    (m.kind === 'remove' || m.kind === 'add')).slice().sort((a, b) => a.start - b.start)) {
+    const start = Math.max(0, mark.start, ranges.at(-1)?.end ?? 0);
+    const end = Math.min(source.length, mark.end);
+    if (end > start) ranges.push({ start, end, kind: mark.kind });
+  }
+  const literal = (start: number, end: number): string => {
+    if (start >= end) return '';
+    let html = '', cursor = start, low = 0, high = ranges.length;
+    while (low < high) {
+      const mid = (low + high) >>> 1;
+      if (ranges[mid].end <= start) low = mid + 1;
+      else high = mid;
+    }
+    for (let i = low; i < ranges.length && ranges[i].start < end; i++) {
+      const mark = ranges[i], a = Math.max(cursor, mark.start), b = Math.min(end, mark.end);
+      html += escape(source.slice(cursor, a));
+      const tag = mark.kind === 'remove' ? 'del' : 'ins';
+      html += `<${tag} class="change">${escape(source.slice(a, b))}</${tag}>`;
+      cursor = b;
+    }
+    return html + escape(source.slice(cursor, end));
+  };
+  let searches = 100_000;
+  const inline = (start: number, end: number, depth = 0): string => {
+    if (depth >= 16 || searches <= 0) return literal(start, end);
+    const text = source.slice(start, end);
+    const tokens = [...text.matchAll(/\\[!"#$%&'()*+,\-./:;<=>?@[\]\\^_`{|}~]|`+|\*+|_+/g)];
+    let html = '', cursor = 0;
+    const codeEnd = (index: number) => {
+      const delimiter = tokens[index][0];
+      let at = tokens[index].index! + delimiter.length;
+      while (searches-- > 0 && (at = text.indexOf(delimiter, at)) >= 0) {
+        // Backslashes are literal inside code; only an exact backtick run closes it.
+        if (text[at - 1] !== '`' && text[at + delimiter.length] !== '`') return at;
+        at += delimiter.length;
+      }
+      return -1;
+    };
+    for (let i = 0; i < tokens.length && searches > 0; i++) {
+      const token = tokens[i], at = token.index!, delimiter = token[0];
+      if (at < cursor) continue;
+      html += literal(start + cursor, start + at);
+      cursor = at;
+      if (delimiter[0] === '\\') {
+        html += literal(start + at + 1, start + at + 2);
+        cursor += 2;
+        continue;
+      }
+      if (delimiter[0] === '`') {
+        const close = codeEnd(i);
+        if (close >= 0) {
+          html += `<code>${literal(start + at + delimiter.length, start + close)}</code>`;
+          cursor = close + delimiter.length;
+        } else {
+          html += literal(start + at, start + at + delimiter.length);
+          cursor += delimiter.length;
+        }
+        continue;
+      }
+      let close = -1;
+      if (delimiter.length <= 3 && /\S/.test(text[at + delimiter.length] ?? '') &&
+        !(delimiter[0] === '_' && /[\p{L}\p{N}_]/u.test(text[at - 1] ?? ''))) {
+        for (let j = i + 1; j < tokens.length && searches-- > 0; j++) {
+          if (tokens[j][0][0] === '`') {
+            const codeClose = codeEnd(j);
+            if (codeClose >= 0) {
+              const next = codeClose + tokens[j][0].length;
+              while (j + 1 < tokens.length && tokens[j + 1].index! < next) j++;
+              continue;
+            }
+          }
+          if (tokens[j][0] === delimiter && /\S/.test(text[tokens[j].index! - 1] ?? '') &&
+            !(delimiter[0] === '_' && /[\p{L}\p{N}_]/u.test(text[tokens[j].index! + delimiter.length] ?? ''))) {
+            close = j; break;
+          }
+        }
+      }
+      if (close >= 0) {
+        const bodyStart = start + at + delimiter.length, bodyEnd = start + tokens[close].index!;
+        const tags = delimiter.length === 3 ? ['strong', 'em'] : [delimiter.length === 2 ? 'strong' : 'em'];
+        html += tags.map(t => `<${t}>`).join('') + inline(bodyStart, bodyEnd, depth + 1) +
+          [...tags].reverse().map(t => `</${t}>`).join('');
+        cursor = tokens[close].index! + delimiter.length;
+        i = close;
+      } else {
+        html += literal(start + at, start + at + delimiter.length);
+        cursor += delimiter.length;
+      }
+    }
+    return html + literal(start + cursor, end);
+  };
+  const lines: Line[] = [];
+  for (let start = 0; start < source.length;) {
+    const lf = source.indexOf('\n', start), next = lf < 0 ? source.length : lf + 1;
+    const end = lf < 0 ? next : lf > start && source[lf - 1] === '\r' ? lf - 1 : lf;
+    lines.push({ start, end, next });
+    start = next;
+  }
+  const text = (line: Range) => source.slice(line.start, line.end);
+  const blank = (line: Line) => !text(line).trim();
+  const trim = (range: Range): Range => {
+    const value = text(range), left = value.length - value.trimStart().length;
+    return { start: range.start + left, end: Math.max(range.start + left, range.end - (value.length - value.trimEnd().length)) };
+  };
+  const heading = (line: Line) => /^ {0,3}(#{1,6})(?:[ \t]+|$)/.exec(text(line));
+  const fence = (line: Line) => /^ {0,3}(`{3,}|~{3,})([^\r\n]*)$/.exec(text(line));
+  const item = (line: Line) => /^( {0,3})([-+*]|\d{1,9}[.)])([ \t]+|$)/.exec(text(line));
+  const indent = (line: Line) => /^ */.exec(text(line))![0].length;
+  const cells = (line: Line): Range[] | null => {
+    const value = text(line), cuts: number[] = [];
+    let ticks = 0;
+    for (let i = 0; i < value.length; i++) {
+      if (value[i] === '\\') { i++; continue; }
+      if (value[i] === '`') {
+        let count = 1;
+        while (value[i + count] === '`') count++;
+        ticks = ticks === count ? 0 : ticks || count;
+        i += count - 1;
+      } else if (value[i] === '|' && !ticks) cuts.push(line.start + i);
+    }
+    if (!cuts.length) return null;
+    const bounds = [line.start - 1, ...cuts, line.end];
+    const result = bounds.slice(0, -1).map((bound, i) => trim({ start: bound + 1, end: bounds[i + 1] }));
+    if (result[0].start === result[0].end) result.shift();
+    if (result.at(-1)?.start === result.at(-1)?.end) result.pop();
+    return result;
+  };
+  const tableHeader = (rows: Line[], index: number) => {
+    if (!rows[index + 1]) return null;
+    const header = cells(rows[index]), rule = cells(rows[index + 1]);
+    return header?.length && rule?.length === header.length && rule.every(cell => /^:?-{3,}:?$/.test(text(cell)))
+      ? header : null;
+  };
+  const blocks = (rows: Line[], depth = 0): string => {
+    if (depth >= 32) return `<pre>${rows.map(line => literal(line.start, line.next)).join('')}</pre>`;
+    const out: string[] = [];
+    for (let i = 0; i < rows.length;) {
+      const line = rows[i];
+      if (blank(line)) { i++; continue; }
+      const opening = fence(line);
+      if (opening) {
+        const closing = new RegExp(`^ {0,3}${opening[1][0]}{${opening[1].length},}[ \\t]*$`);
+        const body: string[] = [];
+        for (i++; i < rows.length && !closing.test(text(rows[i])); i++) body.push(literal(rows[i].start, rows[i].next));
+        if (i < rows.length) i++;
+        out.push(`<pre><code>${body.join('')}</code></pre>`);
+        continue;
+      }
+      const title = heading(line);
+      if (title) {
+        const level = title[1].length;
+        out.push(`<h${level}>${inline(line.start + title[0].length, line.end)}</h${level}>`);
+        i++; continue;
+      }
+      const first = item(line);
+      if (first) {
+        const ordered = /^\d/.test(first[2]), tag = ordered ? 'ol' : 'ul', base = first[1].length;
+        const start = ordered ? ` start="${Number.parseInt(first[2], 10)}"` : '';
+        const entries: string[] = [];
+        while (i < rows.length) {
+          const marker = item(rows[i]);
+          if (!marker || marker[1].length !== base || /^\d/.test(marker[2]) !== ordered) break;
+          const width = marker[0].length;
+          const children: Line[] = [{ ...rows[i], start: rows[i].start + width }];
+          i++;
+          while (i < rows.length) {
+            if (blank(rows[i])) {
+              children.push({ ...rows[i], start: rows[i].start + Math.min(width, indent(rows[i])) });
+              i++; continue;
+            }
+            if (indent(rows[i]) < width) break;
+            children.push({ ...rows[i], start: rows[i].start + width });
+            i++;
+          }
+          entries.push(`<li>${blocks(children, depth + 1)}</li>`);
+        }
+        out.push(`<${tag}${start}>${entries.join('')}</${tag}>`);
+        continue;
+      }
+      const header = tableHeader(rows, i);
+      if (header) {
+        const row = (values: Range[], cellTag: string) => `<tr>${values.map(cell =>
+          `<${cellTag}>${inline(cell.start, cell.end)}</${cellTag}>`).join('')}</tr>`;
+        const body: string[] = [];
+        i += 2;
+        while (i < rows.length) {
+          const values = cells(rows[i]);
+          // Do not silently drop extra cells or swallow malformed rows.
+          if (!values || values.length !== header.length) break;
+          body.push(row(values, 'td')); i++;
+        }
+        out.push(`<table><thead>${row(header, 'th')}</thead><tbody>${body.join('')}</tbody></table>`);
+        continue;
+      }
+      const paragraph: string[] = [];
+      do {
+        const current = rows[i++];
+        paragraph.push(inline(current.start, current.end));
+        if (i >= rows.length || blank(rows[i]) || heading(rows[i]) || fence(rows[i]) || item(rows[i]) || tableHeader(rows, i)) break;
+        paragraph.push(literal(current.end, current.next));
+      } while (i < rows.length);
+      out.push(`<p>${paragraph.join('')}</p>`);
+    }
+    return out.join('\n');
+  };
+  return blocks(lines);
+}
+
+export function renderComparison(before: string, after: string): {
+  beforeHtml: string; afterHtml: string; granularity: 'word' | 'block'; changed: boolean;
+} {
+  const diff = diffWords(before, after), left: Mark[] = [], right: Mark[] = [];
+  let beforeOffset = 0, afterOffset = 0;
+  for (const part of diff.parts) {
+    if (part.kind === 'remove') left.push({ start: beforeOffset, end: beforeOffset + part.text.length, kind: 'remove' });
+    if (part.kind === 'add') right.push({ start: afterOffset, end: afterOffset + part.text.length, kind: 'add' });
+    if (part.kind !== 'add') beforeOffset += part.text.length;
+    if (part.kind !== 'remove') afterOffset += part.text.length;
+  }
+  return { beforeHtml: renderMarkdown(before, left), afterHtml: renderMarkdown(after, right),
+    granularity: diff.granularity, changed: before !== after };
+}