collabmd 0.1.48 → 0.1.51

package/src/domain/excalidraw-agent-verification.js

@@ -0,0 +1,554 @@
+const BASIC_SHAPE_TYPES = new Set(['diamond', 'ellipse', 'rectangle']);
+const LINEAR_TYPES = new Set(['arrow', 'freedraw', 'line']);
+const CONNECTOR_TYPES = new Set(['arrow', 'line']);
+const RENDERED_TYPES = new Set([...BASIC_SHAPE_TYPES, ...LINEAR_TYPES, 'text']);
+const MAX_SUMMARY_ELEMENTS = 500;
+const MAX_WARNINGS = 200;
+const MAX_RENDER_DIMENSION = 4096;
+const BOUND_TEXT_CENTER_TOLERANCE = 2;
+
+const FONT_FAMILY_NAMES = new Map([
+  [1, 'Virgil'],
+  [2, 'Helvetica'],
+  [3, 'Cascadia'],
+  [5, 'Excalifont'],
+  [6, 'Nunito'],
+  [7, 'Lilita One'],
+  [8, 'Comic Shanns'],
+  [9, 'Liberation Sans'],
+  [10, 'Assistant'],
+]);
+
+function finiteNumber(value, fallback = 0) {
+  const number = Number(value);
+  return Number.isFinite(number) ? number : fallback;
+}
+
+function elementBounds(element) {
+  const x = finiteNumber(element?.x);
+  const y = finiteNumber(element?.y);
+  if (LINEAR_TYPES.has(element?.type) && Array.isArray(element.points) && element.points.length > 0) {
+    const points = element.points
+      .filter((point) => Array.isArray(point) && point.length === 2)
+      .map(([pointX, pointY]) => [x + finiteNumber(pointX), y + finiteNumber(pointY)]);
+    if (points.length === 0) return null;
+    const xs = points.map(([pointX]) => pointX);
+    const ys = points.map(([, pointY]) => pointY);
+    const left = Math.min(...xs);
+    const top = Math.min(...ys);
+    return {
+      height: Math.max(...ys) - top,
+      width: Math.max(...xs) - left,
+      x: left,
+      y: top,
+    };
+  }
+  const width = finiteNumber(element?.width, Number.NaN);
+  const height = finiteNumber(element?.height, Number.NaN);
+  if (!Number.isFinite(width) || !Number.isFinite(height)) return null;
+  return {
+    height: Math.abs(height),
+    width: Math.abs(width),
+    x: width < 0 ? x + width : x,
+    y: height < 0 ? y + height : y,
+  };
+}
+
+function mergeBounds(boxes) {
+  if (boxes.length === 0) return { height: 0, width: 0, x: 0, y: 0 };
+  const left = Math.min(...boxes.map(({ x }) => x));
+  const top = Math.min(...boxes.map(({ y }) => y));
+  const right = Math.max(...boxes.map(({ width, x }) => x + width));
+  const bottom = Math.max(...boxes.map(({ height, y }) => y + height));
+  return { height: bottom - top, width: right - left, x: left, y: top };
+}
+
+
+function boxContains(outer, inner) {
+  return outer.x <= inner.x
+    && outer.y <= inner.y
+    && outer.x + outer.width >= inner.x + inner.width
+    && outer.y + outer.height >= inner.y + inner.height;
+}
+
+function boxesOverlap(left, right) {
+  return Math.min(left.x + left.width, right.x + right.width) - Math.max(left.x, right.x) > 1
+    && Math.min(left.y + left.height, right.y + right.height) - Math.max(left.y, right.y) > 1;
+}
+
+function sharesGroup(left, right) {
+  return Array.isArray(right?.groupIds) && left?.groupIds?.some?.((groupId) => right.groupIds.includes(groupId)) === true;
+}
+
+function segmentIntersectsBoxInterior(start, end, bounds) {
+  const inset = Math.min(1, bounds.width / 4, bounds.height / 4);
+  const ranges = [
+    [finiteNumber(start[0]), finiteNumber(end[0]) - finiteNumber(start[0]), bounds.x + inset, bounds.x + bounds.width - inset],
+    [finiteNumber(start[1]), finiteNumber(end[1]) - finiteNumber(start[1]), bounds.y + inset, bounds.y + bounds.height - inset],
+  ];
+  let entry = 0;
+  let exit = 1;
+  for (const [origin, delta, minimum, maximum] of ranges) {
+    if (delta === 0) {
+      if (origin <= minimum || origin >= maximum) return false;
+      continue;
+    }
+    const first = (minimum - origin) / delta;
+    const second = (maximum - origin) / delta;
+    entry = Math.max(entry, Math.min(first, second));
+    exit = Math.min(exit, Math.max(first, second));
+    if (entry > exit) return false;
+  }
+  return entry <= 1 && exit >= 0;
+}
+
+function connectorThroughComponentWarning(connector, component) {
+  if (
+    !CONNECTOR_TYPES.has(connector?.type)
+    || !BASIC_SHAPE_TYPES.has(component?.type)
+    || finiteNumber(component.angle) !== 0
+    || sharesGroup(connector, component)
+  ) {
+    return null;
+  }
+  const componentId = String(component.id ?? '');
+  if (
+    connector.startBinding?.elementId === componentId
+    || connector.endBinding?.elementId === componentId
+  ) {
+    return null;
+  }
+  const bounds = elementBounds(component);
+  const points = Array.isArray(connector.points)
+    ? connector.points
+      .filter((point) => Array.isArray(point) && point.length === 2)
+      .map(([x, y]) => [
+        finiteNumber(connector.x) + finiteNumber(x),
+        finiteNumber(connector.y) + finiteNumber(y),
+      ])
+    : [];
+  if (!bounds || points.length < 2) return null;
+  const isInside = ([x, y]) => (
+    x >= bounds.x
+    && x <= bounds.x + bounds.width
+    && y >= bounds.y
+    && y <= bounds.y + bounds.height
+  );
+  if (isInside(points[0]) || isInside(points.at(-1))) return null;
+  for (let index = 1; index < points.length; index += 1) {
+    if (segmentIntersectsBoxInterior(points[index - 1], points[index], bounds)) {
+      const connectorId = String(connector.id ?? '');
+      return warning(
+        'connector-through-component',
+        `Connector ${connectorId} passes through component ${componentId}.`,
+        [connectorId, componentId],
+      );
+    }
+  }
+  return null;
+}
+
+function unintendedOverlapWarning(left, right) {
+  if (
+    !BASIC_SHAPE_TYPES.has(left?.type)
+    || !BASIC_SHAPE_TYPES.has(right?.type)
+    || finiteNumber(left.angle) !== 0
+    || finiteNumber(right.angle) !== 0
+    || sharesGroup(left, right)
+  ) {
+    return null;
+  }
+  const leftBounds = elementBounds(left);
+  const rightBounds = elementBounds(right);
+  if (
+    !leftBounds
+    || !rightBounds
+    || !boxesOverlap(leftBounds, rightBounds)
+    || boxContains(leftBounds, rightBounds)
+    || boxContains(rightBounds, leftBounds)
+  ) {
+    return null;
+  }
+  const leftId = String(left.id ?? '');
+  const rightId = String(right.id ?? '');
+  return warning(
+    'unintended-overlap',
+    `Components ${leftId} and ${rightId} overlap without a shared group.`,
+    [leftId, rightId],
+  );
+}
+
+function summarizeElement(element, paintOrder, activeElements) {
+  const bounds = elementBounds(element) ?? { height: 0, width: 0, x: 0, y: 0 };
+  const summary = {
+    height: bounds.height,
+    id: String(element?.id ?? ''),
+    paintOrder,
+    type: String(element?.type ?? 'unknown'),
+    width: bounds.width,
+    x: bounds.x,
+    y: bounds.y,
+  };
+  const elementBehind = activeElements[paintOrder - 1];
+  const elementInFront = activeElements[paintOrder + 1];
+  if (elementInFront?.id) summary.behind = String(elementInFront.id);
+  if (elementBehind?.id) summary.inFrontOf = String(elementBehind.id);
+  if (element?.type === 'text') summary.text = String(element.text ?? '');
+  if (element?.type === 'text') {
+    const fontFamily = finiteNumber(element.fontFamily, 5);
+    summary.fontFamily = fontFamily;
+    summary.fontName = FONT_FAMILY_NAMES.get(fontFamily) ?? `Unknown (${fontFamily})`;
+    summary.fontSize = finiteNumber(element.fontSize, 20);
+    summary.lineHeight = finiteNumber(element.lineHeight, 1.25);
+    if (element.containerId) summary.containerId = String(element.containerId);
+    if (element.textAlign) summary.textAlign = String(element.textAlign);
+    if (element.verticalAlign) summary.verticalAlign = String(element.verticalAlign);
+  }
+  if (element?.startBinding?.elementId) summary.startElementId = String(element.startBinding.elementId);
+  if (element?.endBinding?.elementId) summary.endElementId = String(element.endBinding.elementId);
+  return summary;
+}
+
+function warning(code, message, elementIds = []) {
+  return { code, elementIds, message };
+}
+
+function textOverflowWarning(element, bounds, id) {
+  if (element?.type !== 'text' || element.autoResize === true || !bounds) return null;
+  const text = String(element.text ?? '');
+  const fontSize = finiteNumber(element.fontSize, 20);
+  const lines = text.split('\n');
+  const expectedWidth = Math.max(1, ...lines.map((line) => line.length)) * fontSize * 0.6;
+  const expectedHeight = Math.max(1, lines.length) * fontSize * finiteNumber(element.lineHeight, 1.25);
+  return bounds.width + 1 < expectedWidth || bounds.height + 1 < expectedHeight
+    ? warning('text-overflow', `Text element ${id} may be clipped by its bounds.`, [id])
+    : null;
+}
+
+function expectedTextHeight(element) {
+  const lines = String(element?.text ?? '').split('\n');
+  return Math.max(1, lines.length)
+    * finiteNumber(element?.fontSize, 20)
+    * finiteNumber(element?.lineHeight, 1.25);
+}
+
+function collectBoundTextLayout(elements) {
+  const activeById = new Map(elements.map((element) => [String(element.id), element]));
+  const layout = {
+    boundText: {
+      misaligned: 0,
+      outsideContainer: 0,
+      staleHeight: 0,
+      total: 0,
+    },
+  };
+  const warnings = [];
+
+  elements.forEach((element) => {
+    if (element?.type !== 'text' || !element.containerId) return;
+    const container = activeById.get(String(element.containerId));
+    if (!container || !BASIC_SHAPE_TYPES.has(container.type) || finiteNumber(container.angle) !== 0) {
+      return;
+    }
+    const textBounds = elementBounds(element);
+    const containerBounds = elementBounds(container);
+    if (!textBounds || !containerBounds) return;
+
+    const id = String(element.id ?? '');
+    const containerId = String(container.id ?? '');
+    const textCenterX = textBounds.x + (textBounds.width / 2);
+    const textCenterY = textBounds.y + (textBounds.height / 2);
+    const containerCenterX = containerBounds.x + (containerBounds.width / 2);
+    const containerCenterY = containerBounds.y + (containerBounds.height / 2);
+    const offsetX = textCenterX - containerCenterX;
+    const offsetY = textCenterY - containerCenterY;
+    const centered = Math.abs(offsetX) <= BOUND_TEXT_CENTER_TOLERANCE
+      && Math.abs(offsetY) <= BOUND_TEXT_CENTER_TOLERANCE;
+
+    layout.boundText.total += 1;
+    if (!centered) {
+      layout.boundText.misaligned += 1;
+      warnings.push(warning(
+        'bound-text-not-centered',
+        `Bound text ${id} is offset ${Math.round(offsetX)} horizontally and ${Math.round(offsetY)} vertically from container ${containerId}.`,
+        [id, containerId],
+      ));
+    }
+
+    if (!boxContains(containerBounds, textBounds)) {
+      layout.boundText.outsideContainer += 1;
+      warnings.push(warning(
+        'bound-text-outside-container',
+        `Bound text ${id} extends outside container ${containerId}.`,
+        [id, containerId],
+      ));
+    }
+
+    if (Math.abs(textBounds.height - expectedTextHeight(element)) > BOUND_TEXT_CENTER_TOLERANCE) {
+      layout.boundText.staleHeight += 1;
+      warnings.push(warning(
+        'bound-text-height-stale',
+        `Bound text ${id} has height ${Math.round(textBounds.height)} but its current text metrics require ${Math.round(expectedTextHeight(element))}.`,
+        [id, containerId],
+      ));
+    }
+  });
+
+  return { layout, warnings };
+}
+
+function boundEndpointWarning(element, binding, endpointName, activeById) {
+  if (!binding?.elementId || !LINEAR_TYPES.has(element?.type) || !Array.isArray(element.points)) {
+    return null;
+  }
+  const targetId = String(binding.elementId);
+  const target = activeById.get(targetId);
+  if (!target || finiteNumber(target.angle) !== 0) return null;
+  const point = endpointName === 'start' ? element.points[0] : element.points.at(-1);
+  const bounds = elementBounds(target);
+  if (!Array.isArray(point) || point.length !== 2 || !bounds) return null;
+  const pointX = finiteNumber(element.x) + finiteNumber(point[0]);
+  const pointY = finiteNumber(element.y) + finiteNumber(point[1]);
+  const dx = Math.max(bounds.x - pointX, 0, pointX - (bounds.x + bounds.width));
+  const dy = Math.max(bounds.y - pointY, 0, pointY - (bounds.y + bounds.height));
+  const distance = Math.hypot(dx, dy);
+  if (distance <= 32) return null;
+  const id = String(element.id ?? '');
+  return warning(
+    'bound-endpoint-far',
+    `Element ${id} ${endpointName} endpoint is ${Math.round(distance)} diagram units from bound target ${targetId}.`,
+    [id, targetId],
+  );
+}
+
+function collectElementWarnings(element, activeById, seenIds) {
+  const warnings = [];
+  const id = String(element?.id ?? '');
+  if (!id) warnings.push(warning('missing-id', 'Element has no id.'));
+  else if (seenIds.has(id)) warnings.push(warning('duplicate-id', `Element id ${id} is duplicated.`, [id]));
+  seenIds.add(id);
+
+  const bounds = elementBounds(element);
+  const hasInvalidBounds = !bounds || (
+    LINEAR_TYPES.has(element?.type)
+      ? bounds.width <= 0 && bounds.height <= 0
+      : bounds.width <= 0 || bounds.height <= 0
+  );
+  if (hasInvalidBounds) {
+    warnings.push(warning('invalid-bounds', `Element ${id || '(missing id)'} has invalid or zero-size bounds.`, id ? [id] : []));
+  }
+  if (!RENDERED_TYPES.has(element?.type)) {
+    warnings.push(warning('unsupported-render-type', `Element ${id || '(missing id)'} uses unsupported render type ${element?.type}.`, id ? [id] : []));
+  }
+  for (const [endpointName, binding] of [
+    ['start', element?.startBinding],
+    ['end', element?.endBinding],
+  ]) {
+    if (binding?.elementId && !activeById.has(String(binding.elementId))) {
+      warnings.push(warning('missing-binding-target', `Element ${id} binds to missing element ${binding.elementId}.`, [id, String(binding.elementId)]));
+      continue;
+    }
+    const endpointWarning = boundEndpointWarning(element, binding, endpointName, activeById);
+    if (endpointWarning) warnings.push(endpointWarning);
+  }
+  const overflow = textOverflowWarning(element, bounds, id);
+  if (overflow) warnings.push(overflow);
+  if (finiteNumber(element?.strokeWidth, 2) > 32) {
+    warnings.push(warning('large-stroke', `Element ${id} has a stroke wider than 32 diagram units.`, [id]));
+  }
+  return warnings;
+}
+
+function isOpaqueSolidRectangle(element) {
+  return element?.type === 'rectangle'
+    && element.fillStyle === 'solid'
+    && finiteNumber(element.opacity, 100) === 100
+    && String(element.backgroundColor ?? 'transparent').toLowerCase() !== 'transparent';
+}
+
+function collectWarnings(elements, { inspectOcclusion = true } = {}) {
+  const warnings = [];
+  const push = (entry) => {
+    if (warnings.length < MAX_WARNINGS) warnings.push(entry);
+  };
+  const activeById = new Map(elements.map((element) => [String(element.id), element]));
+  const seenIds = new Set();
+  for (const element of elements) {
+    collectElementWarnings(element, activeById, seenIds).forEach(push);
+  }
+
+  for (const connector of elements) {
+    if (!CONNECTOR_TYPES.has(connector.type)) continue;
+    for (const component of elements) {
+      const intersection = connectorThroughComponentWarning(connector, component);
+      if (intersection) push(intersection);
+    }
+  }
+  for (let leftIndex = 0; leftIndex < elements.length; leftIndex += 1) {
+    for (let rightIndex = leftIndex + 1; rightIndex < elements.length; rightIndex += 1) {
+      const overlap = unintendedOverlapWarning(elements[leftIndex], elements[rightIndex]);
+      if (overlap) push(overlap);
+    }
+  }
+
+  if (inspectOcclusion) {
+    for (let hiddenIndex = 0; hiddenIndex < elements.length; hiddenIndex += 1) {
+      const hidden = elements[hiddenIndex];
+      const hiddenBounds = elementBounds(hidden);
+      if (!hiddenBounds) continue;
+      for (let foregroundIndex = hiddenIndex + 1; foregroundIndex < elements.length; foregroundIndex += 1) {
+        const foreground = elements[foregroundIndex];
+        const foregroundBounds = elementBounds(foreground);
+        if (
+          foregroundBounds
+          && isOpaqueSolidRectangle(foreground)
+          && boxContains(foregroundBounds, hiddenBounds)
+        ) {
+          push(warning(
+            'fully-occluded',
+            `Element ${hidden.id} is fully occluded by ${foreground.id}.`,
+            [String(hidden.id), String(foreground.id)],
+          ));
+          break;
+        }
+      }
+    }
+  }
+  return warnings;
+}
+
+export function inspectAgentExcalidrawScene(scene = {}, {
+  includeElements = true,
+  inspectOcclusion = true,
+} = {}) {
+  const activeElements = (Array.isArray(scene?.elements) ? scene.elements : [])
+    .filter((element) => element && !element.isDeleted);
+  const boxes = activeElements.map(elementBounds).filter(Boolean);
+  const boundTextLayout = collectBoundTextLayout(activeElements);
+  const warnings = [
+    ...collectWarnings(activeElements, { inspectOcclusion }),
+    ...boundTextLayout.warnings,
+  ].slice(0, MAX_WARNINGS);
+  return {
+    bounds: mergeBounds(boxes),
+    elementCount: activeElements.length,
+    elements: includeElements
+      ? activeElements
+        .slice(0, MAX_SUMMARY_ELEMENTS)
+        .map((element, paintOrder) => summarizeElement(element, paintOrder, activeElements))
+      : [],
+    truncated: (!includeElements && activeElements.length > 0)
+      || activeElements.length > MAX_SUMMARY_ELEMENTS
+      || warnings.length >= MAX_WARNINGS,
+    layout: boundTextLayout.layout,
+    valid: warnings.length === 0,
+    warnings,
+  };
+}
+
+function escapeXml(value) {
+  return String(value)
+    .replaceAll('&', '&amp;')
+    .replaceAll('<', '&lt;')
+    .replaceAll('>', '&gt;')
+    .replaceAll('"', '&quot;')
+    .replaceAll("'", '&apos;');
+}
+
+function safeColor(value, fallback) {
+  const color = String(value ?? '').trim();
+  return /^(?:#[\da-f]{3,8}|transparent)$/iu.test(color) ? color : fallback;
+}
+
+function strokeAttributes(element) {
+  const dash = element?.strokeStyle === 'dashed'
+    ? ' stroke-dasharray="12 8"'
+    : element?.strokeStyle === 'dotted' ? ' stroke-dasharray="3 6"' : '';
+  return `stroke="${safeColor(element?.strokeColor, '#1e1e1e')}" stroke-width="${Math.max(0.5, finiteNumber(element?.strokeWidth, 2))}" stroke-linecap="round" stroke-linejoin="round"${dash} opacity="${Math.min(1, Math.max(0, finiteNumber(element?.opacity, 100) / 100))}"`;
+}
+
+function rotationAttribute(element, bounds) {
+  const angle = finiteNumber(element?.angle);
+  if (!angle) return '';
+  const degrees = angle * (180 / Math.PI);
+  return ` transform="rotate(${degrees} ${bounds.x + (bounds.width / 2)} ${bounds.y + (bounds.height / 2)})"`;
+}
+
+function renderText(element, bounds) {
+  const lines = String(element?.text ?? '').split('\n');
+  const fontSize = Math.max(1, finiteNumber(element?.fontSize, 20));
+  const lineHeight = fontSize * finiteNumber(element?.lineHeight, 1.25);
+  const startY = bounds.y + (bounds.height / 2) - ((lines.length - 1) * lineHeight / 2);
+  const spans = lines.map((line, index) => `<tspan x="${bounds.x + (bounds.width / 2)}" y="${startY + (index * lineHeight)}">${escapeXml(line)}</tspan>`).join('');
+  return `<text text-anchor="middle" dominant-baseline="middle" font-family="Arial, sans-serif" font-size="${fontSize}" fill="${safeColor(element?.strokeColor, '#1e1e1e')}"${rotationAttribute(element, bounds)}>${spans}</text>`;
+}
+
+function renderLinearElement(element) {
+  const originX = finiteNumber(element?.x);
+  const originY = finiteNumber(element?.y);
+  const points = Array.isArray(element?.points) ? element.points : [];
+  const coordinates = points
+    .filter((point) => Array.isArray(point) && point.length === 2)
+    .map(([x, y]) => [originX + finiteNumber(x), originY + finiteNumber(y)]);
+  if (coordinates.length < 2) return '';
+  const path = coordinates.map(([x, y], index) => `${index === 0 ? 'M' : 'L'} ${x} ${y}`).join(' ');
+  const markerStart = element?.startArrowhead ? ' marker-start="url(#arrow-start)"' : '';
+  const markerEnd = element?.type === 'arrow' && element?.endArrowhead !== null ? ' marker-end="url(#arrow-end)"' : '';
+  return `<path d="${path}" fill="none" ${strokeAttributes(element)}${markerStart}${markerEnd}/>`;
+}
+
+function renderElement(element) {
+  const bounds = elementBounds(element);
+  if (!bounds) return '';
+  if (element.type === 'text') return renderText(element, bounds);
+  if (LINEAR_TYPES.has(element.type)) return renderLinearElement(element);
+  const fill = safeColor(element.backgroundColor, 'transparent');
+  const rotation = rotationAttribute(element, bounds);
+  if (element.type === 'ellipse') {
+    return `<ellipse cx="${bounds.x + (bounds.width / 2)}" cy="${bounds.y + (bounds.height / 2)}" rx="${bounds.width / 2}" ry="${bounds.height / 2}" fill="${fill}" ${strokeAttributes(element)}${rotation}/>`;
+  }
+  if (element.type === 'diamond') {
+    const centerX = bounds.x + (bounds.width / 2);
+    const centerY = bounds.y + (bounds.height / 2);
+    const points = `${centerX},${bounds.y} ${bounds.x + bounds.width},${centerY} ${centerX},${bounds.y + bounds.height} ${bounds.x},${centerY}`;
+    return `<polygon points="${points}" fill="${fill}" ${strokeAttributes(element)}${rotation}/>`;
+  }
+  if (element.type === 'rectangle') {
+    return `<rect x="${bounds.x}" y="${bounds.y}" width="${bounds.width}" height="${bounds.height}" rx="8" fill="${fill}" ${strokeAttributes(element)}${rotation}/>`;
+  }
+  return '';
+}
+
+export function renderAgentExcalidrawSvg(scene, {
+  padding = 32,
+  scale = 1,
+} = {}) {
+  const activeElements = (Array.isArray(scene?.elements) ? scene.elements : [])
+    .filter((element) => element && !element.isDeleted);
+  const bounds = mergeBounds(activeElements.map(elementBounds).filter(Boolean));
+  const inset = Math.min(100, Math.max(0, finiteNumber(padding, 32)));
+  const sceneWidth = Math.max(1, bounds.width + (inset * 2));
+  const sceneHeight = Math.max(1, bounds.height + (inset * 2));
+  const requestedScale = Math.min(4, Math.max(0.25, finiteNumber(scale, 1)));
+  const appliedScale = Math.min(
+    requestedScale,
+    MAX_RENDER_DIMENSION / sceneWidth,
+    MAX_RENDER_DIMENSION / sceneHeight,
+  );
+  const width = Math.max(1, Math.ceil(sceneWidth * appliedScale));
+  const height = Math.max(1, Math.ceil(sceneHeight * appliedScale));
+  const viewX = bounds.x - inset;
+  const viewY = bounds.y - inset;
+  const elements = activeElements.map(renderElement).join('');
+  const svg = `<svg xmlns="http://www.w3.org/2000/svg" width="${width}" height="${height}" viewBox="${viewX} ${viewY} ${sceneWidth} ${sceneHeight}"><defs><marker id="arrow-end" markerWidth="10" markerHeight="10" refX="8" refY="3" orient="auto" markerUnits="strokeWidth"><path d="M0,0 L0,6 L9,3 z" fill="#1e1e1e"/></marker><marker id="arrow-start" markerWidth="10" markerHeight="10" refX="1" refY="3" orient="auto-start-reverse" markerUnits="strokeWidth"><path d="M9,0 L9,6 L0,3 z" fill="#1e1e1e"/></marker></defs><rect x="${viewX}" y="${viewY}" width="${sceneWidth}" height="${sceneHeight}" fill="#ffffff"/>${elements}</svg>`;
+  return {
+    elementCount: activeElements.length,
+    height,
+    scale: appliedScale,
+    svg,
+    width,
+    renderer: 'collabmd-basic-svg',
+    rendererVersion: '1',
+    warnings: ['preview-not-pixel-identical'],
+  };
+}

package/src/domain/excalidraw-room-codec.js

@@ -11,6 +11,7 @@ export const EXCALIDRAW_META_KEY = 'excalidraw-meta';
 export const EXCALIDRAW_ROOM_SCHEMA_VERSION = 1;
 export const EXCALIDRAW_ROOM_TEXT_KEY = 'codemirror';
 export const EXCALIDRAW_SCHEMA_VERSION_KEY = 'schemaVersion';
+export const EXCALIDRAW_REPLACE_GENERATION_KEY = 'replaceGeneration';
 
 function createEmptyScene() {
   return {
@@ -61,11 +62,7 @@ function parseSceneJson(rawJson, { fallbackToEmpty = true } = {}) {
 }
 
 function cloneJsonValue(value) {
-  if (value === undefined) {
-    return undefined;
-  }
-
-  return JSON.parse(JSON.stringify(value));
+  return structuredClone(value);
 }
 
 function getRevisionKey(element) {
@@ -226,6 +223,15 @@ export function isExcalidrawRoomDocStructured(ydoc) {
   return Number(meta.get(EXCALIDRAW_SCHEMA_VERSION_KEY)) === EXCALIDRAW_ROOM_SCHEMA_VERSION;
 }
 
+export function readExcalidrawReplaceGeneration(ydoc) {
+  if (!ydoc) {
+    return 0;
+  }
+
+  const value = Number(ydoc.getMap(EXCALIDRAW_META_KEY).get(EXCALIDRAW_REPLACE_GENERATION_KEY));
+  return Number.isFinite(value) && value > 0 ? value : 0;
+}
+
 export function ensureExcalidrawRoomSchema(ydoc) {
   const meta = ydoc.getMap(EXCALIDRAW_META_KEY);
   if (Number(meta.get(EXCALIDRAW_SCHEMA_VERSION_KEY)) !== EXCALIDRAW_ROOM_SCHEMA_VERSION) {
@@ -299,7 +305,7 @@ export function replaceExcalidrawRoomScene(ydoc, rawScene, {
   }
 
   const scene = normalizeScene(rawScene);
-  ensureExcalidrawRoomSchema(ydoc);
+  const meta = ensureExcalidrawRoomSchema(ydoc);
 
   const elementsMap = ydoc.getMap(EXCALIDRAW_ELEMENTS_KEY);
   const filesMap = ydoc.getMap(EXCALIDRAW_FILES_KEY);
@@ -325,6 +331,7 @@ export function replaceExcalidrawRoomScene(ydoc, rawScene, {
   const nextAppState = normalizeAppState(scene.appState);
   appStateMap.set('gridSize', nextAppState.gridSize);
   appStateMap.set('viewBackgroundColor', nextAppState.viewBackgroundColor);
+  meta.set(EXCALIDRAW_REPLACE_GENERATION_KEY, readExcalidrawReplaceGeneration(ydoc) + 1);
 
   return scene;
 }

package/src/domain/literal-text-search.js

@@ -0,0 +1,13 @@
+const WORD_CHARACTER = /[\p{L}\p{N}_]/u;
+
+function isWordCharacterAt(value, index) {
+  if (index < 0 || index >= value.length) return false;
+  let start = index;
+  const codeUnit = value.charCodeAt(index);
+  if (index > 0 && codeUnit >= 0xDC00 && codeUnit <= 0xDFFF) start -= 1;
+  return WORD_CHARACTER.test(String.fromCodePoint(value.codePointAt(start)));
+}
+
+export function isWholeWordMatch(value, start, end) {
+  return !isWordCharacterAt(value, start - 1) && !isWordCharacterAt(value, end);
+}