@agent-native/core 0.131.5 → 0.131.7

package/corpus/templates/slides/app/components/editor/slide-object-interactions.ts

@@ -1,23 +1,12 @@
-export const MIN_SLIDE_OBJECT_SIZE = 24;
+import {
+  clientPointToCanvasPoint,
+  resizeCanvasRect,
+  type CanvasResizeHandle,
+} from "@agent-native/toolkit/canvas-interactions";
 
-export type ResizeHandle = "nw" | "n" | "ne" | "w" | "e" | "sw" | "s" | "se";
+export const MIN_SLIDE_OBJECT_SIZE = 24;
 
-export type SelectedObjectDragStart = "perimeter" | "body" | null;
-
-/**
- * Resolve a selected freeform object's drag affordance without conflating a
- * normal body click (which still enters inline text editing) with a drag.
- */
-export function getSelectedObjectDragStart({
-  targetWithinSelectedObject,
-  pointerWithinMoveBand,
-}: {
-  targetWithinSelectedObject: boolean;
-  pointerWithinMoveBand: boolean;
-}): SelectedObjectDragStart {
-  if (pointerWithinMoveBand) return "perimeter";
-  return targetWithinSelectedObject ? "body" : null;
-}
+export type ResizeHandle = CanvasResizeHandle;
 
 export interface SlideObjectGeometry {
   x: number;
@@ -41,6 +30,23 @@ export interface SlideObjectLayoutSnapshot {
   alignSelf: string;
 }
 
+export interface SlideObjectTextPresentationSnapshot {
+  color: string;
+  direction: string;
+  fontFamily: string;
+  fontSize: string;
+  fontStyle: string;
+  fontWeight: string;
+  letterSpacing: string;
+  lineHeight: string;
+  textAlign: string;
+  textDecoration: string;
+  textShadow: string;
+  textTransform: string;
+  whiteSpace: string;
+  wordSpacing: string;
+}
+
 export interface ResizeOptions {
   handle: ResizeHandle;
   dx: number;
@@ -202,6 +208,109 @@ export function resolveSlideObjectContainingBlock(
   return slideLayer;
 }
 
+export interface SlideTextBoxCanvas {
+  fmdSlide: HTMLElement;
+  positioningLayer: HTMLElement;
+}
+
+/**
+ * Text objects need the same persisted coordinate root as other freeform
+ * objects. Markdown initially renders straight into `.slide-content`, so the
+ * first placement promotes that live flow DOM into an fmd-slide before it is
+ * saved. Copying the canvas layout values keeps the current visual alignment
+ * when the raw HTML renderer owns it after the edit is committed.
+ */
+export function ensureSlideTextBoxCanvas(
+  editorRoot: HTMLElement,
+): SlideTextBoxCanvas | null {
+  const existing = editorRoot.querySelector<HTMLElement>(".fmd-slide");
+  if (existing) {
+    const positioningLayer =
+      Array.from(existing.children).find(
+        (child): child is HTMLElement =>
+          child instanceof HTMLElement &&
+          child.hasAttribute("data-fmd-autofit-content"),
+      ) ?? existing;
+    return { fmdSlide: existing, positioningLayer };
+  }
+
+  const slideContents = Array.from(
+    editorRoot.querySelectorAll<HTMLElement>(".slide-content"),
+  );
+  // A two-column Markdown slide renders one independent content root per
+  // column. Promoting only the first and serializing it would discard the
+  // other column, so decline until both roots have a shared raw-HTML canvas.
+  if (slideContents.length !== 1) return null;
+  const slideContent = slideContents[0];
+  const canvas = slideContent?.closest<HTMLElement>("[data-slide-canvas]");
+  if (!slideContent || !canvas) return null;
+
+  const canvasStyle = window.getComputedStyle(canvas);
+  const fmdSlide = document.createElement("div");
+  fmdSlide.className = "fmd-slide";
+  fmdSlide.style.justifyContent = canvasStyle.justifyContent;
+  fmdSlide.style.alignItems = canvasStyle.alignItems;
+  fmdSlide.style.padding = canvasStyle.padding;
+  fmdSlide.style.textAlign = canvasStyle.textAlign;
+  fmdSlide.style.color = canvasStyle.color;
+  fmdSlide.style.fontFamily = canvasStyle.fontFamily;
+  fmdSlide.append(...Array.from(slideContent.childNodes));
+  slideContent.append(fmdSlide);
+
+  return { fmdSlide, positioningLayer: fmdSlide };
+}
+
+function hasUsableTextColor(color: string) {
+  return (
+    Boolean(color) &&
+    color !== "transparent" &&
+    !/rgba\([^)]*,\s*0\)$/.test(color)
+  );
+}
+
+function isTextRun(element: HTMLElement) {
+  return Boolean(element.textContent?.trim());
+}
+
+function isDarkColor(color: string) {
+  const channels = color.match(/rgba?\((\d+),\s*(\d+),\s*(\d+)/i);
+  if (!channels) return false;
+  const [, red, green, blue] = channels.map(Number);
+  return red * 0.2126 + green * 0.7152 + blue * 0.0722 < 140;
+}
+
+/** Choose rendered text before generic canvas shells, then keep the fallback legible. */
+export function getSlideTextBoxDefaultColor(
+  target: HTMLElement | null,
+  positioningLayer: HTMLElement,
+): string {
+  const candidates = [
+    ...Array.from(
+      positioningLayer.querySelectorAll<HTMLElement>(
+        "h1, h2, h3, h4, h5, h6, p, li, span",
+      ),
+    ).filter(isTextRun),
+    target?.matches("h1, h2, h3, h4, h5, h6, p, li, span") && isTextRun(target)
+      ? target
+      : null,
+  ];
+  for (const candidate of candidates) {
+    if (!candidate) continue;
+    const color = window.getComputedStyle(candidate).color;
+    if (hasUsableTextColor(color)) {
+      return color;
+    }
+  }
+
+  const canvas = positioningLayer.closest<HTMLElement>("[data-slide-canvas]");
+  const canvasStyle = canvas ? window.getComputedStyle(canvas) : null;
+  const designSystemText = canvasStyle?.getPropertyValue("--ds-text").trim();
+  if (designSystemText) return designSystemText;
+
+  const background = canvasStyle?.backgroundColor ?? "";
+  return isDarkColor(background) ? "#ffffff" : "#111827";
+}
+
 export function removeTransientBuilderIds(element: HTMLElement): void {
   element.removeAttribute("data-builder-id");
   element.querySelectorAll("[data-builder-id]").forEach((node) => {
@@ -209,9 +318,99 @@ export function removeTransientBuilderIds(element: HTMLElement): void {
   });
 }
 
+const ID_REFERENCE_ATTRIBUTES = [
+  "aria-activedescendant",
+  "aria-controls",
+  "aria-describedby",
+  "aria-details",
+  "aria-errormessage",
+  "aria-flowto",
+  "aria-labelledby",
+  "aria-owns",
+] as const;
+
+function escapeRegExp(value: string): string {
+  return value.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+}
+
+function createSlideObjectDomId(occupiedIds: Set<string>): string {
+  let id = `slide-object-dom-${createSlideObjectId()}`;
+  while (occupiedIds.has(id)) {
+    id = `slide-object-dom-${createSlideObjectId()}`;
+  }
+  occupiedIds.add(id);
+  return id;
+}
+
+function remintSlideObjectDomIds(
+  element: HTMLElement,
+  occupiedIds: Set<string> = new Set(
+    Array.from(element.ownerDocument.querySelectorAll<HTMLElement>("[id]")).map(
+      (node) => node.id,
+    ),
+  ),
+): void {
+  const idMap = new Map<string, string>();
+  const elements = [element, ...element.querySelectorAll<HTMLElement>("[id]")];
+
+  for (const node of elements) {
+    const id = node.getAttribute("id");
+    if (!id) continue;
+    const remintedId = createSlideObjectDomId(occupiedIds);
+    // Duplicate source ids are already ambiguous. Keep internal references
+    // pointed at the first occurrence, matching document.getElementById().
+    if (!idMap.has(id)) idMap.set(id, remintedId);
+    node.id = remintedId;
+  }
+
+  if (idMap.size === 0) return;
+
+  const remapIdReferences = (value: string): string =>
+    value
+      .split(/\s+/)
+      .map((id) => idMap.get(id) ?? id)
+      .join(" ");
+  const remapUrlReferences = (value: string): string => {
+    let result = value;
+    for (const [id, remintedId] of idMap) {
+      result = result.replace(
+        new RegExp(`url\\(\\s*#${escapeRegExp(id)}\\s*\\)`, "g"),
+        `url(#${remintedId})`,
+      );
+    }
+    return result;
+  };
+
+  for (const node of [element, ...element.querySelectorAll<HTMLElement>("*")]) {
+    const labelFor = node.getAttribute("for");
+    if (labelFor) node.setAttribute("for", idMap.get(labelFor) ?? labelFor);
+
+    for (const attribute of ID_REFERENCE_ATTRIBUTES) {
+      const value = node.getAttribute(attribute);
+      if (value) node.setAttribute(attribute, remapIdReferences(value));
+    }
+
+    for (const attribute of Array.from(node.attributes)) {
+      if (attribute.name === "id") continue;
+      if (attribute.name === "href" || attribute.name === "xlink:href") {
+        const remintedId = attribute.value.startsWith("#")
+          ? idMap.get(attribute.value.slice(1))
+          : undefined;
+        if (remintedId) node.setAttribute(attribute.name, `#${remintedId}`);
+        continue;
+      }
+      const remapped = remapUrlReferences(attribute.value);
+      if (remapped !== attribute.value) {
+        node.setAttribute(attribute.name, remapped);
+      }
+    }
+  }
+}
+
 export function cloneSlideObject(element: HTMLElement): HTMLElement {
   const clone = element.cloneNode(true) as HTMLElement;
   removeTransientBuilderIds(clone);
+  remintSlideObjectDomIds(clone);
   clone.setAttribute("data-slide-object-id", createSlideObjectId());
   // Nested freeform objects are independently addressable after a clone. Each
   // one needs a new persisted identity so selector-based edits cannot resolve
@@ -233,6 +432,7 @@ export function freezeSlideElementForFreeform(
   element: HTMLElement,
   geometry: SlideObjectGeometry,
   layout: SlideObjectLayoutSnapshot,
+  textPresentation?: SlideObjectTextPresentationSnapshot,
 ): HTMLElement {
   const objectId = ensureSlideObjectId(element);
   const spacer = element.cloneNode(false) as HTMLElement;
@@ -254,9 +454,12 @@ export function freezeSlideElementForFreeform(
   spacer.style.minHeight = "0";
   spacer.style.maxWidth = "none";
   spacer.style.maxHeight = "none";
-  spacer.style.flexGrow = layout.flexGrow;
-  spacer.style.flexShrink = layout.flexShrink;
-  spacer.style.flexBasis = layout.flexBasis;
+  // `geometry` is the already-laid-out border box. Letting the replacement
+  // flex item shrink that measured size a second time changes the autofit
+  // transform and makes the object jump as soon as it becomes absolute.
+  spacer.style.flexGrow = "0";
+  spacer.style.flexShrink = "0";
+  spacer.style.flexBasis = "auto";
   spacer.style.alignSelf = layout.alignSelf;
   // An inline placeholder cannot reserve a measured block's height. Preserve
   // inline text flow with inline-block while retaining block/grid displays.
@@ -274,6 +477,31 @@ export function freezeSlideElementForFreeform(
   // left/top describe the visible border box. Leaving flow margins on the
   // absolute element would offset it from the measured pre-freeze rect.
   element.style.margin = "0";
+  if (textPresentation) {
+    const properties: Array<
+      [keyof SlideObjectTextPresentationSnapshot, string]
+    > = [
+      ["color", "color"],
+      ["direction", "direction"],
+      ["fontFamily", "font-family"],
+      ["fontSize", "font-size"],
+      ["fontStyle", "font-style"],
+      ["fontWeight", "font-weight"],
+      ["letterSpacing", "letter-spacing"],
+      ["lineHeight", "line-height"],
+      ["textAlign", "text-align"],
+      ["textDecoration", "text-decoration"],
+      ["textShadow", "text-shadow"],
+      ["textTransform", "text-transform"],
+      ["whiteSpace", "white-space"],
+      ["wordSpacing", "word-spacing"],
+    ];
+    for (const [key, property] of properties) {
+      if (textPresentation[key] && !element.style.getPropertyValue(property)) {
+        element.style.setProperty(property, textPresentation[key]);
+      }
+    }
+  }
   return spacer;
 }
 
@@ -301,13 +529,13 @@ export function clientPointToSlideCoordinates(
   slideWidth: number,
   slideHeight: number,
 ): { x: number; y: number } {
-  const x =
-    rect.width > 0 ? ((clientX - rect.left) / rect.width) * slideWidth : 0;
-  const y =
-    rect.height > 0 ? ((clientY - rect.top) / rect.height) * slideHeight : 0;
+  const point = clientPointToCanvasPoint({ x: clientX, y: clientY }, rect, {
+    width: slideWidth,
+    height: slideHeight,
+  });
   return {
-    x: Math.round(x),
-    y: Math.round(y),
+    x: Math.round(point.x),
+    y: Math.round(point.y),
   };
 }
 
@@ -321,48 +549,274 @@ export function resizeSlideObject(
     minSize = MIN_SLIDE_OBJECT_SIZE,
   }: ResizeOptions,
 ): SlideObjectGeometry {
-  const fromWest = handle === "nw" || handle === "w" || handle === "sw";
-  const fromEast = handle === "ne" || handle === "e" || handle === "se";
-  const fromNorth = handle === "nw" || handle === "n" || handle === "ne";
-  const fromSouth = handle === "sw" || handle === "s" || handle === "se";
-  const resizesHorizontally = fromWest || fromEast;
-  const resizesVertically = fromNorth || fromSouth;
-  let width = start.width + (fromWest ? -dx : fromEast ? dx : 0);
-  let height = start.height + (fromNorth ? -dy : fromSouth ? dy : 0);
-
-  // Midpoint handles intentionally resize a single axis, even with Shift.
-  // Their opposing edge remains fixed and no implied perpendicular resize occurs.
-  if (
-    preserveAspectRatio &&
-    resizesHorizontally &&
-    resizesVertically &&
-    start.width > 0 &&
-    start.height > 0
-  ) {
-    const ratio = start.width / start.height;
-    const horizontalScale = width / start.width;
-    const verticalScale = height / start.height;
-    const scale =
-      Math.abs(horizontalScale - 1) >= Math.abs(verticalScale - 1)
-        ? horizontalScale
-        : verticalScale;
-    width = start.width * scale;
-    height = width / ratio;
+  return resizeCanvasRect(start, {
+    handle,
+    delta: { x: dx, y: dy },
+    preserveAspectRatio,
+    minWidth: minSize,
+    minHeight: minSize,
+  });
+}
+
+export type SlideObjectZOrderTarget = "front" | "back";
+
+function readSlideObjectZIndex(element: HTMLElement): number {
+  const raw = element.style.zIndex || window.getComputedStyle(element).zIndex;
+  const value = Number(raw);
+  return Number.isFinite(value) ? value : 0;
+}
+
+export interface SlideObjectZOrderChange {
+  /** z-index to assign to the moved element. */
+  value: number;
+  /** Peers that must be shifted up to make room, when there was none below. */
+  shiftPeers: { element: HTMLElement; value: number }[];
+}
+
+function isEditableFreeformSlideObject(element: HTMLElement): boolean {
+  return (
+    element.hasAttribute("data-slide-object-id") &&
+    (element.style.position || window.getComputedStyle(element).position) ===
+      "absolute"
+  );
+}
+
+function createsSlideObjectStackingContext(element: HTMLElement): boolean {
+  const style = window.getComputedStyle(element);
+  const inline = element.style;
+  const position = inline.position || style.position || "static";
+  const zIndex = inline.zIndex || style.zIndex;
+  const containment = inline.contain || style.contain || "";
+  const willChange = inline.willChange || style.willChange || "";
+  const opacity = Number.parseFloat(inline.opacity || style.opacity || "1");
+  const transform = inline.transform || style.transform;
+  const perspective = inline.perspective || style.perspective;
+  const filter = inline.filter || style.filter;
+  const backdropFilter = inline.backdropFilter || style.backdropFilter;
+  const isolation = inline.isolation || style.isolation;
+  const mixBlendMode = inline.mixBlendMode || style.mixBlendMode;
+
+  return (
+    position === "fixed" ||
+    position === "sticky" ||
+    (position !== "static" && zIndex !== "" && zIndex !== "auto") ||
+    (Number.isFinite(opacity) && opacity < 1) ||
+    (transform !== "" && transform !== "none") ||
+    (perspective !== "" && perspective !== "none") ||
+    (filter !== "" && filter !== "none") ||
+    (backdropFilter !== "" && backdropFilter !== "none") ||
+    isolation === "isolate" ||
+    (mixBlendMode !== "" && mixBlendMode !== "normal") ||
+    /(?:^|\s)(?:layout|paint|strict|content)(?:\s|$)/.test(containment) ||
+    /(?:^|,\s*)(?:transform|opacity|filter|perspective)(?:,\s*|$)/.test(
+      willChange,
+    )
+  );
+}
+
+function resolveSlideObjectStackingContext(
+  element: HTMLElement,
+  container: HTMLElement,
+): HTMLElement {
+  let ancestor = element.parentElement;
+  while (ancestor && ancestor !== container) {
+    if (createsSlideObjectStackingContext(ancestor)) return ancestor;
+    ancestor = ancestor.parentElement;
+  }
+  return container;
+}
+
+interface SlideObjectZOrderPeer {
+  element: HTMLElement;
+  zIndex: number;
+  order: number;
+}
+
+function getSlideObjectZOrderPeers(
+  element: HTMLElement,
+  container: HTMLElement,
+): SlideObjectZOrderPeer[] {
+  const containingBlock = resolveSlideObjectContainingBlock(element, container);
+  const stackingContext = resolveSlideObjectStackingContext(element, container);
+
+  return Array.from(
+    container.querySelectorAll<HTMLElement>("[data-slide-object-id]"),
+  ).flatMap((peer, order) => {
+    if (
+      peer === element ||
+      element.contains(peer) ||
+      !isEditableFreeformSlideObject(peer) ||
+      resolveSlideObjectContainingBlock(peer, container) !== containingBlock ||
+      resolveSlideObjectStackingContext(peer, container) !== stackingContext
+    ) {
+      return [];
+    }
+    const zIndex = readSlideObjectZIndex(peer);
+    // Negative layers are reserved for slide backgrounds. They must remain
+    // below editable objects, never be pulled up by send-to-back normalization.
+    if (zIndex < 0) return [];
+    return [{ element: peer, zIndex, order }];
+  });
+}
+
+/**
+ * Compute the z-index change that puts `element` in front of / behind every
+ * other freeform object inside `container`. Returns null when nothing needs
+ * to change.
+ */
+export function computeSlideObjectZOrder(
+  element: HTMLElement,
+  container: HTMLElement,
+  target: SlideObjectZOrderTarget,
+): SlideObjectZOrderChange | null {
+  if (!isEditableFreeformSlideObject(element)) return null;
+  const peers = getSlideObjectZOrderPeers(element, container);
+
+  if (peers.length === 0) return null;
+
+  const peerZIndexes = peers.map((peer) => peer.zIndex);
+  const currentValue = readSlideObjectZIndex(element);
+
+  if (target === "front") {
+    const value = Math.max(...peerZIndexes) + 1;
+    return value === currentValue ? null : { value, shiftPeers: [] };
   }
 
-  width = Math.max(minSize, width);
-  height = Math.max(minSize, height);
+  const minPeer = Math.min(...peerZIndexes);
+  const hasTiedPeers = new Set(peerZIndexes).size !== peers.length;
+  if (minPeer - 1 >= 0 && !hasTiedPeers) {
+    const value = minPeer - 1;
+    return value === currentValue ? null : { value, shiftPeers: [] };
+  }
+
+  // No room below zero, or an existing tie needs repair. Keep reserved negative
+  // layers untouched and give every editable peer a stable unique position.
+  const orderedPeers = [...peers].sort(
+    (left, right) => left.zIndex - right.zIndex || left.order - right.order,
+  );
+  return {
+    value: 0,
+    shiftPeers: orderedPeers.map((peer, index) => ({
+      element: peer.element,
+      value: index + 1,
+    })),
+  };
+}
+
+export interface SlideObjectMoveMember {
+  objectId: string;
+  element: HTMLElement;
+  start: SlideObjectGeometry;
+}
+
+function normalizeSlideObjectRoots(elements: HTMLElement[]): HTMLElement[] {
+  const uniqueElements = Array.from(new Set(elements));
+  return uniqueElements.filter(
+    (element) =>
+      !uniqueElements.some(
+        (candidate) => candidate !== element && candidate.contains(element),
+      ),
+  );
+}
+
+/**
+ * Snapshot the movable members of a multi-selection, keyed by durable object id.
+ * Elements that are not absolutely positioned cannot move and are excluded.
+ */
+export function collectMovableSlideObjects(
+  elements: HTMLElement[],
+  getGeometry: (element: HTMLElement) => SlideObjectGeometry,
+): SlideObjectMoveMember[] {
+  const seen = new Set<string>();
+  const members: SlideObjectMoveMember[] = [];
+  for (const element of normalizeSlideObjectRoots(elements)) {
+    const objectId = element.getAttribute("data-slide-object-id");
+    if (!objectId || seen.has(objectId)) continue;
+    if (
+      (element.style.position || window.getComputedStyle(element).position) !==
+      "absolute"
+    ) {
+      continue;
+    }
+    seen.add(objectId);
+    members.push({ objectId, element, start: getGeometry(element) });
+  }
+  return members;
+}
+
+/** Apply one shared delta to every member, relative to its captured start. */
+export function applySlideObjectMoveDelta(
+  members: SlideObjectMoveMember[],
+  deltaX: number,
+  deltaY: number,
+  applyGeometry: (element: HTMLElement, geometry: SlideObjectGeometry) => void,
+): void {
+  for (const member of members) {
+    applyGeometry(member.element, {
+      ...member.start,
+      x: member.start.x + deltaX,
+      y: member.start.y + deltaY,
+    });
+  }
+}
+
+export interface CopiedSlideObjects {
+  html: string[];
+}
+
+export function copySlideObjects(elements: HTMLElement[]): CopiedSlideObjects {
   return {
-    width,
-    height,
-    x: fromWest ? start.x + start.width - width : start.x,
-    y: fromNorth ? start.y + start.height - height : start.y,
+    html: normalizeSlideObjectRoots(elements).map((element) => {
+      const clone = cloneSlideObject(element);
+      return clone.outerHTML;
+    }),
   };
 }
 
-export function escapedEditingSelection<T>(
-  editing: T | null,
-  selected: T | null,
-): { editing: null; selected: T | null } {
-  return { editing: null, selected: editing ?? selected };
+export const SLIDE_OBJECT_PASTE_OFFSET = 16;
+
+function offsetInlinePx(
+  element: HTMLElement,
+  property: "left" | "top",
+  offset: number,
+): void {
+  const value = Number.parseFloat(element.style[property]);
+  if (!Number.isFinite(value)) return;
+  element.style[property] = `${value + offset}px`;
+}
+
+/**
+ * Rebuild pasted objects from stored HTML with fresh ids and a cascade offset,
+ * so a paste never collides exactly with its source.
+ */
+export function buildPastedSlideObjects(
+  copied: CopiedSlideObjects,
+  doc: Document,
+  offset: number = SLIDE_OBJECT_PASTE_OFFSET,
+): HTMLElement[] {
+  const pasted: HTMLElement[] = [];
+  const occupiedDomIds = new Set(
+    Array.from(doc.querySelectorAll<HTMLElement>("[id]")).map(
+      (element) => element.id,
+    ),
+  );
+  for (const html of copied.html) {
+    const template = doc.createElement("template");
+    template.innerHTML = html;
+    const element = template.content.firstElementChild;
+    if (!(element instanceof HTMLElement)) continue;
+    remintSlideObjectDomIds(element, occupiedDomIds);
+    // Remint every persisted id (root + nested) the same way cloneSlideObject
+    // does, so a pasted object never resolves to its source via selector.
+    element.setAttribute("data-slide-object-id", createSlideObjectId());
+    element
+      .querySelectorAll<HTMLElement>("[data-slide-object-id]")
+      .forEach((descendant) => {
+        descendant.setAttribute("data-slide-object-id", createSlideObjectId());
+      });
+    offsetInlinePx(element, "left", offset);
+    offsetInlinePx(element, "top", offset);
+    pasted.push(element);
+  }
+  return pasted;
 }