@agent-native/core-corpus 0.214.0 → 0.217.0

package/corpus/templates/slides-2/app/lib/slide-comment-anchor.ts

@@ -0,0 +1,286 @@
+import type { SlideCommentAnchor } from "@shared/slide-comment-anchor";
+
+type Rect = Pick<DOMRectReadOnly, "left" | "top" | "width" | "height">;
+type TextRangeBoundaries = Pick<
+  Range,
+  "startContainer" | "startOffset" | "endContainer" | "endOffset" | "toString"
+>;
+
+function toPercent(value: number, extent: number): number {
+  if (!Number.isFinite(value) || !Number.isFinite(extent) || extent <= 0) {
+    return 0;
+  }
+  return Math.max(0, Math.min(100, (value / extent) * 100));
+}
+
+export function slideCommentAnchorAtPoint({
+  clientX,
+  clientY,
+  slideRect,
+  objectId,
+  objectRect,
+  targetText,
+  sourceHash,
+  sourceLocator,
+}: {
+  clientX: number;
+  clientY: number;
+  slideRect: Rect;
+  objectId?: string | null;
+  objectRect?: Rect | null;
+  targetText?: string;
+  sourceHash?: string;
+  sourceLocator?: { line: number; column: number };
+}): SlideCommentAnchor {
+  const sourceAnchor =
+    sourceHash && sourceLocator
+      ? { version: 1 as const, sourceHash, sourceLocator }
+      : null;
+  return {
+    x: toPercent(clientX - slideRect.left, slideRect.width),
+    y: toPercent(clientY - slideRect.top, slideRect.height),
+    ...(targetText ? { targetText: targetText.slice(0, 200) } : {}),
+    ...(objectId && !sourceAnchor ? { objectId } : {}),
+    ...(objectRect &&
+    objectRect.width > 0 &&
+    objectRect.height > 0 &&
+    (objectId || sourceAnchor)
+      ? {
+          objectX: toPercent(clientX - objectRect.left, objectRect.width),
+          objectY: toPercent(clientY - objectRect.top, objectRect.height),
+        }
+      : {}),
+    ...(sourceAnchor ?? {}),
+  };
+}
+
+export function slideCommentAnchorForRegion({
+  start,
+  end,
+  slideRect,
+  sourceHash,
+  sourceLocator,
+}: {
+  start: { x: number; y: number };
+  end: { x: number; y: number };
+  slideRect: Rect;
+  sourceHash: string;
+  sourceLocator?: { line: number; column: number };
+}): SlideCommentAnchor {
+  const startX = toPercent(start.x - slideRect.left, slideRect.width);
+  const startY = toPercent(start.y - slideRect.top, slideRect.height);
+  const endX = toPercent(end.x - slideRect.left, slideRect.width);
+  const endY = toPercent(end.y - slideRect.top, slideRect.height);
+  const width = Math.min(100, Math.max(0.25, Math.abs(endX - startX)));
+  const height = Math.min(100, Math.max(0.25, Math.abs(endY - startY)));
+  const x = Math.min(Math.min(startX, endX), 100 - width);
+  const y = Math.min(Math.min(startY, endY), 100 - height);
+
+  return {
+    version: 1,
+    sourceHash,
+    ...(sourceLocator ? { sourceLocator } : {}),
+    x: x + width / 2,
+    y: y + height / 2,
+    region: { x, y, width, height },
+  };
+}
+
+export function slideCommentAnchorFromRange({
+  range,
+  slideRect,
+  objectId,
+  objectRect,
+  objectElement,
+  targetText,
+}: {
+  range: Pick<Range, "getBoundingClientRect"> & Partial<TextRangeBoundaries>;
+  slideRect: Rect;
+  objectId?: string | null;
+  objectRect?: Rect | null;
+  objectElement?: Element | null;
+  targetText?: string;
+}): SlideCommentAnchor {
+  const rect = range.getBoundingClientRect();
+  const hasTextBoundaries = Boolean(
+    range.startContainer &&
+    range.endContainer &&
+    range.startOffset !== undefined &&
+    range.endOffset !== undefined &&
+    typeof range.toString === "function",
+  );
+  const offsets =
+    objectElement && hasTextBoundaries
+      ? textOffsetsForRange(range as TextRangeBoundaries, objectElement)
+      : null;
+  const anchor = slideCommentAnchorAtPoint({
+    clientX: rect.left + rect.width / 2,
+    clientY: rect.top + rect.height / 2,
+    slideRect,
+    objectId,
+    objectRect,
+    targetText,
+  });
+  return { ...anchor, ...(offsets ?? {}) };
+}
+
+function textOffsetsForRange(
+  range: TextRangeBoundaries,
+  objectElement: Element,
+): Pick<SlideCommentAnchor, "textStartOffset" | "textEndOffset"> | null {
+  if (
+    !objectElement.contains(range.startContainer) ||
+    !objectElement.contains(range.endContainer)
+  ) {
+    return null;
+  }
+
+  const textOffsetAt = (container: Node, offset: number) => {
+    const prefix = document.createRange();
+    prefix.selectNodeContents(objectElement);
+    prefix.setEnd(container, offset);
+    return prefix.toString().length;
+  };
+  const selectedText = range.toString();
+  const leadingWhitespace =
+    selectedText.length - selectedText.trimStart().length;
+  const trailingWhitespace =
+    selectedText.length - selectedText.trimEnd().length;
+  const textStartOffset =
+    textOffsetAt(range.startContainer, range.startOffset) + leadingWhitespace;
+  const textEndOffset =
+    textOffsetAt(range.endContainer, range.endOffset) - trailingWhitespace;
+  return textEndOffset > textStartOffset && textEndOffset <= 200_000
+    ? { textStartOffset, textEndOffset }
+    : null;
+}
+
+function textPointAtOffset(
+  root: Element,
+  offset: number,
+): { node: Text; offset: number } | null {
+  const walker = document.createTreeWalker(root, NodeFilter.SHOW_TEXT);
+  const textNodes: Text[] = [];
+  let node = walker.nextNode();
+  while (node) {
+    textNodes.push(node as Text);
+    node = walker.nextNode();
+  }
+  let cursor = 0;
+  for (const [index, text] of textNodes.entries()) {
+    const end = cursor + text.length;
+    if (offset < end) return { node: text, offset: offset - cursor };
+    if (offset === end) {
+      const next = textNodes
+        .slice(index + 1)
+        .find((candidate) => candidate.length);
+      return next
+        ? { node: next, offset: 0 }
+        : { node: text, offset: text.length };
+    }
+    cursor = end;
+  }
+  return null;
+}
+
+export function slideCommentTextRange(
+  objectElement: Element,
+  anchor: SlideCommentAnchor,
+  quotedText: string | null | undefined,
+): Range | null {
+  const quote = quotedText?.trim();
+  if (!quote) return null;
+  const text = objectElement.textContent ?? "";
+  let start = anchor.textStartOffset;
+  let end = anchor.textEndOffset;
+  if (
+    start === undefined ||
+    end === undefined ||
+    text.slice(start, end) !== quote
+  ) {
+    start = text.indexOf(quote);
+    if (start < 0 || text.indexOf(quote, start + quote.length) !== -1) {
+      return null;
+    }
+    end = start + quote.length;
+  }
+
+  const startPoint = textPointAtOffset(objectElement, start);
+  const endPoint = textPointAtOffset(objectElement, end);
+  if (!startPoint || !endPoint) return null;
+  const range = document.createRange();
+  range.setStart(startPoint.node, startPoint.offset);
+  range.setEnd(endPoint.node, endPoint.offset);
+  return range;
+}
+
+export function slideCommentThreadAtPoint(
+  threads: Array<{
+    threadId: string;
+    quotedText: string | null;
+    resolved: boolean;
+    anchor?: SlideCommentAnchor | null;
+  }>,
+  slideContent: Element,
+  clientX: number,
+  clientY: number,
+): string | null {
+  for (const thread of threads) {
+    const anchor = thread.anchor;
+    if (thread.resolved || !anchor || !thread.quotedText) continue;
+    const object = anchor.objectId
+      ? Array.from(
+          slideContent.querySelectorAll<HTMLElement>("[data-slide-object-id]"),
+        ).find(
+          (element) =>
+            element.getAttribute("data-slide-object-id") === anchor.objectId,
+        )
+      : slideContent;
+    if (!object) continue;
+    const range = slideCommentTextRange(object, anchor, thread.quotedText);
+    if (!range) continue;
+    for (const rect of Array.from(range.getClientRects())) {
+      if (
+        clientX >= rect.left &&
+        clientX <= rect.right &&
+        clientY >= rect.top &&
+        clientY <= rect.bottom
+      ) {
+        return thread.threadId;
+      }
+    }
+  }
+  return null;
+}
+
+export function slideCommentAnchorPosition(
+  anchor: SlideCommentAnchor,
+  slideRect: Rect,
+  objectRect?: Rect | null,
+): { x: number; y: number } {
+  if (
+    !anchor.objectId ||
+    anchor.objectX === undefined ||
+    anchor.objectY === undefined ||
+    !objectRect ||
+    objectRect.width <= 0 ||
+    objectRect.height <= 0
+  ) {
+    return { x: anchor.x, y: anchor.y };
+  }
+
+  return {
+    x: toPercent(
+      objectRect.left +
+        (objectRect.width * anchor.objectX) / 100 -
+        slideRect.left,
+      slideRect.width,
+    ),
+    y: toPercent(
+      objectRect.top +
+        (objectRect.height * anchor.objectY) / 100 -
+        slideRect.top,
+      slideRect.height,
+    ),
+  };
+}

package/corpus/templates/slides-2/app/lib/slide-content-merge.ts

@@ -0,0 +1,295 @@
+/**
+ * Three-way merge of slide HTML so two collaborators editing different objects
+ * on the same slide both keep their work. `base` is the content both sides
+ * started from, `local` the caller's unsaved draft, `remote` the saved copy
+ * another writer produced.
+ *
+ * Returns the merged HTML, or `null` when the edits overlap (same text node,
+ * same attribute, one side deleting what the other edited) or the markup
+ * cannot be aligned. A `null` is a real conflict the caller must surface; this
+ * never picks a side.
+ */
+export function mergeSlideContent(
+  base: string,
+  local: string,
+  remote: string,
+): string | null {
+  if (local === remote) return local;
+  if (base === remote) return local;
+  if (base === local) return remote;
+  if (typeof document === "undefined") return null;
+
+  const parse = (html: string) => {
+    const template = document.createElement("template");
+    template.innerHTML = html;
+    return Array.from(template.content.childNodes);
+  };
+  const merged = mergeChildren(parse(base), parse(local), parse(remote));
+  if (!merged) return null;
+
+  const out = document.createElement("template");
+  for (const node of merged) out.content.appendChild(node);
+  return out.innerHTML;
+}
+
+function signature(node: Node): string {
+  if (node instanceof Element) return node.outerHTML;
+  if (node.nodeType === Node.TEXT_NODE) return `#text:${node.nodeValue}`;
+  return `#${node.nodeType}:${node.nodeValue}`;
+}
+
+function nodeKeys(nodes: Node[]): string[] | null {
+  const ordinals = new Map<string, number>();
+  const keys = nodes.map((node) => {
+    const objectId =
+      node instanceof Element
+        ? node.getAttribute("data-slide-object-id")
+        : null;
+    if (objectId) return `o:${objectId}`;
+    const kind = node instanceof Element ? node.tagName : `#${node.nodeType}`;
+    const ordinal = ordinals.get(kind) ?? 0;
+    ordinals.set(kind, ordinal + 1);
+    return `${kind}:${ordinal}`;
+  });
+  return new Set(keys).size === keys.length ? keys : null;
+}
+
+function sameSequence(a: string[], b: string[]): boolean {
+  return a.length === b.length && a.every((key, index) => key === b[index]);
+}
+
+function mergeChildren(
+  base: Node[],
+  local: Node[],
+  remote: Node[],
+): Node[] | null {
+  const baseKeys = nodeKeys(base);
+  const localKeys = nodeKeys(local);
+  const remoteKeys = nodeKeys(remote);
+  if (!baseKeys || !localKeys || !remoteKeys) return null;
+
+  const byKey = (nodes: Node[], keys: string[]) =>
+    new Map(keys.map((key, index) => [key, nodes[index]]));
+  const baseNodes = byKey(base, baseKeys);
+  const localNodes = byKey(local, localKeys);
+  const remoteNodes = byKey(remote, remoteKeys);
+
+  const common = (keys: string[], other: Map<string, Node>) =>
+    keys.filter((key) => other.has(key));
+  const localReordered = !sameSequence(
+    common(baseKeys, localNodes),
+    common(localKeys, baseNodes),
+  );
+  const remoteReordered = !sameSequence(
+    common(baseKeys, remoteNodes),
+    common(remoteKeys, baseNodes),
+  );
+  if (localReordered && remoteReordered) return null;
+
+  const resolved = new Map<string, Node | null>();
+  for (const key of new Set([...baseKeys, ...localKeys, ...remoteKeys])) {
+    const b = baseNodes.get(key);
+    const l = localNodes.get(key);
+    const r = remoteNodes.get(key);
+    if (b) {
+      if (l && r) {
+        const node = mergeNode(b, l, r);
+        if (!node) return null;
+        resolved.set(key, node);
+      } else {
+        // Deleted on one side: only safe when the other side left it alone.
+        const survivor = l ?? r;
+        if (survivor && signature(survivor) !== signature(b)) return null;
+        resolved.set(key, null);
+      }
+    } else if (l && r) {
+      if (signature(l) !== signature(r)) return null;
+      resolved.set(key, l);
+    } else {
+      resolved.set(key, (l ?? r) as Node);
+    }
+  }
+
+  // The side that reordered supplies the order; the other side's additions and
+  // deletions are folded into it.
+  const [primary, secondary] = localReordered
+    ? [localKeys, remoteKeys]
+    : [remoteKeys, localKeys];
+  const order = primary.filter((key) => resolved.get(key));
+  for (const [index, key] of secondary.entries()) {
+    if (!resolved.get(key) || order.includes(key)) continue;
+    let anchor = -1;
+    for (let i = index - 1; i >= 0 && anchor < 0; i--) {
+      anchor = order.indexOf(secondary[i]);
+    }
+    order.splice(anchor + 1, 0, key);
+  }
+  return order.map((key) => resolved.get(key)!.cloneNode(true));
+}
+
+function mergeNode(base: Node, local: Node, remote: Node): Node | null {
+  const sb = signature(base);
+  const sl = signature(local);
+  const sr = signature(remote);
+  if (sl === sb || sl === sr) return remote;
+  if (sr === sb) return local;
+  if (
+    !(base instanceof Element) ||
+    !(local instanceof Element) ||
+    !(remote instanceof Element) ||
+    base.tagName !== local.tagName ||
+    base.tagName !== remote.tagName
+  ) {
+    return null;
+  }
+
+  const element = remote.cloneNode(false) as Element;
+  for (const name of new Set([
+    ...base.getAttributeNames(),
+    ...local.getAttributeNames(),
+    ...remote.getAttributeNames(),
+  ])) {
+    const value = mergeAttribute(
+      name,
+      base.getAttribute(name),
+      local.getAttribute(name),
+      remote.getAttribute(name),
+    );
+    if (value === undefined) return null;
+    if (value === null) element.removeAttribute(name);
+    else element.setAttribute(name, value);
+  }
+
+  const children = mergeChildren(
+    Array.from(base.childNodes),
+    Array.from(local.childNodes),
+    Array.from(remote.childNodes),
+  );
+  if (!children) return null;
+  element.replaceChildren(...children);
+  return element;
+}
+
+/** `undefined` means both sides changed the attribute differently. */
+function mergeAttribute(
+  name: string,
+  base: string | null,
+  local: string | null,
+  remote: string | null,
+): string | null | undefined {
+  if (local === remote || base === remote) return local;
+  if (base === local) return remote;
+  if (name !== "style" || base === null || local === null || remote === null) {
+    return undefined;
+  }
+
+  const b = parseStyle(base);
+  const l = parseStyle(local);
+  const r = parseStyle(remote);
+  if (!b || !l || !r) return undefined;
+  const merged = new Map(r);
+  for (const property of new Set([...b.keys(), ...l.keys(), ...r.keys()])) {
+    const value = mergeAttribute(
+      property,
+      b.get(property) ?? null,
+      l.get(property) ?? null,
+      r.get(property) ?? null,
+    );
+    if (value === undefined) return undefined;
+    if (value === null) merged.delete(property);
+    else merged.set(property, value);
+  }
+  return Array.from(merged, ([property, value]) => `${property}: ${value}`)
+    .join("; ")
+    .concat(merged.size > 0 ? ";" : "");
+}
+
+function parseStyle(style: string): Map<string, string> | null {
+  const declarations = new Map<string, string>();
+  const parts = splitCssAtTopLevel(style, ";");
+  if (!parts) return null;
+  for (const declaration of parts) {
+    if (!declaration.trim()) continue;
+    const values = splitCssAtTopLevel(declaration, ":");
+    if (!values || values.length < 2) return null;
+    const rawProperty = values.shift()!.trim();
+    const property = rawProperty.startsWith("--")
+      ? rawProperty
+      : rawProperty.toLowerCase();
+    const value = values.join(":").trim();
+    if (
+      !/^--[A-Za-z_][A-Za-z0-9_-]*$/.test(property) &&
+      !/^-?[A-Za-z_][A-Za-z0-9_-]*$/.test(property)
+    ) {
+      return null;
+    }
+    if (declarations.has(property)) return null;
+    if (!value && !property.startsWith("--")) return null;
+    declarations.set(property, value);
+  }
+  return declarations;
+}
+
+function splitCssAtTopLevel(input: string, separator: string): string[] | null {
+  const matchingOpen: Record<string, string> = {
+    ")": "(",
+    "]": "[",
+    "}": "{",
+  };
+  const stack: string[] = [];
+  const parts: string[] = [];
+  let start = 0;
+  let quote = "";
+  let escaped = false;
+  let comment = false;
+
+  for (let index = 0; index < input.length; index += 1) {
+    const char = input[index]!;
+    const next = input[index + 1];
+
+    if (comment) {
+      if (char === "*" && next === "/") {
+        comment = false;
+        index += 1;
+      }
+      continue;
+    }
+    if (escaped) {
+      escaped = false;
+      continue;
+    }
+    if (char === "\\") {
+      escaped = true;
+      continue;
+    }
+    if (quote) {
+      if (char === quote) quote = "";
+      continue;
+    }
+    if (char === "/" && next === "*") {
+      comment = true;
+      index += 1;
+      continue;
+    }
+    if (char === "'" || char === '"') {
+      quote = char;
+      continue;
+    }
+    if (char === "(" || char === "[" || char === "{") {
+      stack.push(char);
+      continue;
+    }
+    if (char in matchingOpen) {
+      if (stack.pop() !== matchingOpen[char]) return null;
+      continue;
+    }
+    if (char === separator && stack.length === 0) {
+      parts.push(input.slice(start, index));
+      start = index + 1;
+    }
+  }
+
+  if (quote || escaped || comment || stack.length > 0) return null;
+  parts.push(input.slice(start));
+  return parts;
+}