@agent-native/core 0.130.2 → 0.131.3

package/corpus/templates/slides/app/components/editor/rich-text-selection.ts

@@ -0,0 +1,270 @@
+/**
+ * DOM-only helpers for the contentEditable slide text surface. The inspector
+ * owns persistence; these helpers deliberately only touch the live edit DOM.
+ */
+
+export const INLINE_TEXT_STYLE_KEYS = [
+  "color",
+  "fontFamily",
+  "fontSize",
+  "fontWeight",
+  "fontStyle",
+  "textDecoration",
+  "letterSpacing",
+  "lineHeight",
+] as const;
+
+export type InlineTextStyleKey = (typeof INLINE_TEXT_STYLE_KEYS)[number];
+
+export type InlineTextStylePatch = Partial<Record<InlineTextStyleKey, string>>;
+
+export type InlineTextStyleValues = Record<InlineTextStyleKey, string | null>;
+
+export interface InlineTextStyleSnapshot {
+  scope: "selection" | "block";
+  values: InlineTextStyleValues;
+  mixed: InlineTextStyleKey[];
+}
+
+export interface InlineTextStyleApplication {
+  scope: "selection" | "block";
+  range?: Range;
+}
+
+const CSS_PROPERTY_NAMES: Record<InlineTextStyleKey, string> = {
+  color: "color",
+  fontFamily: "font-family",
+  fontSize: "font-size",
+  fontWeight: "font-weight",
+  fontStyle: "font-style",
+  textDecoration: "text-decoration",
+  letterSpacing: "letter-spacing",
+  lineHeight: "line-height",
+};
+
+function hasRangeInside(editable: HTMLElement, range: Range) {
+  return (
+    editable.contains(range.startContainer) &&
+    editable.contains(range.endContainer) &&
+    editable.contains(range.commonAncestorContainer)
+  );
+}
+
+function stylePatchEntries(patch: InlineTextStylePatch) {
+  return INLINE_TEXT_STYLE_KEYS.flatMap((key) => {
+    const value = patch[key]?.trim();
+    return value ? [[key, value] as const] : [];
+  });
+}
+
+function applyPatch(element: HTMLElement, patch: InlineTextStylePatch) {
+  for (const [key, value] of stylePatchEntries(patch)) {
+    element.style.setProperty(CSS_PROPERTY_NAMES[key], value);
+  }
+}
+
+function selectedInlineWrapper(editable: HTMLElement, range: Range) {
+  let candidate =
+    range.startContainer instanceof HTMLElement
+      ? range.startContainer
+      : range.startContainer.parentElement;
+  const selectedText = range.toString();
+
+  while (candidate && candidate !== editable) {
+    if (
+      candidate instanceof HTMLSpanElement &&
+      candidate.dataset.slideInlineStyle === "true" &&
+      candidate.contains(range.startContainer) &&
+      candidate.contains(range.endContainer) &&
+      candidate.textContent === selectedText
+    ) {
+      return candidate;
+    }
+    candidate = candidate.parentElement;
+  }
+  return null;
+}
+
+function elementAttributesMatch(a: HTMLSpanElement, b: HTMLSpanElement) {
+  if (a.attributes.length !== b.attributes.length) return false;
+  return Array.from(a.attributes).every(
+    (attribute) => b.getAttribute(attribute.name) === attribute.value,
+  );
+}
+
+/** Removes only markup that cannot affect the resulting rich text. */
+export function normalizeInlineTextSpans(
+  editable: HTMLElement,
+  preserve?: HTMLSpanElement,
+) {
+  const spans = Array.from(editable.querySelectorAll("span"));
+  for (const span of spans.reverse()) {
+    if (!span.isConnected) continue;
+    if (!span.textContent && span.children.length === 0) {
+      span.remove();
+      continue;
+    }
+    if (span.attributes.length === 0) {
+      span.replaceWith(...Array.from(span.childNodes));
+    }
+  }
+
+  let merged = true;
+  while (merged) {
+    merged = false;
+    for (const span of Array.from(editable.querySelectorAll("span"))) {
+      const next = span.nextSibling;
+      if (
+        next instanceof HTMLSpanElement &&
+        span !== preserve &&
+        next !== preserve &&
+        elementAttributesMatch(span, next)
+      ) {
+        span.append(...Array.from(next.childNodes));
+        next.remove();
+        merged = true;
+      }
+    }
+  }
+}
+
+/**
+ * Returns a non-empty native selection only when both of its endpoints belong
+ * to this editable. A range in another slide must never receive inspector CSS.
+ */
+export function getEditableTextRange(
+  editable: HTMLElement,
+  selection: Selection | null = window.getSelection(),
+) {
+  if (!selection || selection.rangeCount !== 1 || selection.isCollapsed) {
+    return null;
+  }
+  const range = selection.getRangeAt(0);
+  return hasRangeInside(editable, range) ? range : null;
+}
+
+/** Clones the live selection before an inspector control takes focus. */
+export function snapshotEditableTextRange(
+  editable: HTMLElement,
+  selection: Selection | null = window.getSelection(),
+) {
+  return getEditableTextRange(editable, selection)?.cloneRange() ?? null;
+}
+
+/** Restores a captured range only while it is still safe to use in this block. */
+export function restoreEditableTextRange(
+  editable: HTMLElement,
+  range: Range | null,
+  selection: Selection | null = window.getSelection(),
+) {
+  if (!range || !selection || !hasRangeInside(editable, range)) return false;
+  editable.focus();
+  selection.removeAllRanges();
+  selection.addRange(range);
+  return true;
+}
+
+/**
+ * Styles precisely the selected fragment. extractContents preserves partially
+ * selected nested markup; patching the extracted descendants also overrides a
+ * prior inline color or font on a nested span without touching unselected text.
+ */
+export function applyInlineTextStyle(
+  editable: HTMLElement,
+  patch: InlineTextStylePatch,
+  selection: Selection | null = window.getSelection(),
+): InlineTextStyleApplication {
+  const range = getEditableTextRange(editable, selection);
+  if (!range || stylePatchEntries(patch).length === 0)
+    return { scope: "block" };
+
+  let wrapper = selectedInlineWrapper(editable, range);
+  if (!wrapper) {
+    const fragment = range.extractContents();
+    wrapper = document.createElement("span");
+    wrapper.dataset.slideInlineStyle = "true";
+    wrapper.append(fragment);
+    range.insertNode(wrapper);
+  }
+
+  applyPatch(wrapper, patch);
+  // Existing nested spans can carry explicit values, so give every selected
+  // descendant the patch too. Reusing an exact wrapper keeps scrub updates
+  // flat instead of nesting one span per pointermove.
+  for (const child of Array.from(wrapper.querySelectorAll<HTMLElement>("*"))) {
+    applyPatch(child, patch);
+  }
+  // The active wrapper must survive normalization so the returned Range stays
+  // connected to the editable. A later edit may merge older adjacent runs.
+  normalizeInlineTextSpans(editable, wrapper);
+
+  const nextRange = document.createRange();
+  nextRange.selectNodeContents(wrapper);
+  if (selection) {
+    selection.removeAllRanges();
+    selection.addRange(nextRange);
+  }
+  return { scope: "selection", range: nextRange };
+}
+
+function selectionTextElements(editable: HTMLElement, range: Range) {
+  const walker = document.createTreeWalker(editable, NodeFilter.SHOW_TEXT);
+  const elements = new Set<HTMLElement>();
+  let node = walker.nextNode();
+  while (node) {
+    if (node.textContent && range.intersectsNode(node)) {
+      const parent = node.parentElement;
+      if (parent) elements.add(parent);
+    }
+    node = walker.nextNode();
+  }
+  return Array.from(elements);
+}
+
+function computedStyleValues(element: HTMLElement): InlineTextStyleValues {
+  const computed = window.getComputedStyle(element);
+  return Object.fromEntries(
+    INLINE_TEXT_STYLE_KEYS.map((key) => [
+      key,
+      computed.getPropertyValue(CSS_PROPERTY_NAMES[key]) || null,
+    ]),
+  ) as InlineTextStyleValues;
+}
+
+/**
+ * Reads the active selection's effective styles, returning null plus the key in
+ * `mixed` when multiple selected text runs disagree. A collapsed/cross-block
+ * selection intentionally reports the editable's block-level text style.
+ */
+export function getInlineTextStyleSnapshot(
+  editable: HTMLElement,
+  selection: Selection | null = window.getSelection(),
+): InlineTextStyleSnapshot {
+  const range = getEditableTextRange(editable, selection);
+  return getInlineTextStyleSnapshotForRange(editable, range);
+}
+
+export function getInlineTextStyleSnapshotForRange(
+  editable: HTMLElement,
+  range: Range | null,
+): InlineTextStyleSnapshot {
+  const safeRange =
+    range && !range.collapsed && hasRangeInside(editable, range) ? range : null;
+  const targets = safeRange ? selectionTextElements(editable, safeRange) : [];
+  const styles = (targets.length > 0 ? targets : [editable]).map(
+    computedStyleValues,
+  );
+  const values = {} as InlineTextStyleValues;
+  const mixed: InlineTextStyleKey[] = [];
+
+  for (const key of INLINE_TEXT_STYLE_KEYS) {
+    const first = styles[0]?.[key] ?? null;
+    if (styles.some((style) => style[key] !== first)) {
+      values[key] = null;
+      mixed.push(key);
+    } else {
+      values[key] = first;
+    }
+  }
+  return { scope: safeRange ? "selection" : "block", values, mixed };
+}

package/corpus/templates/slides/app/components/editor/slide-escape-arbiter.ts

@@ -0,0 +1,34 @@
+export type SlideEscapeAction =
+  | "edit"
+  | "gesture"
+  | "mode"
+  | "multi-selection"
+  | "single-selection"
+  | "canvas"
+  | "none";
+
+export function decideSlideEscape({
+  editing,
+  activeGesture,
+  activeMode,
+  multiSelection,
+  singleSelection,
+  targetOwnsEscape,
+  overlayOwnsEscape,
+}: {
+  editing: boolean;
+  activeGesture: boolean;
+  activeMode: boolean;
+  multiSelection: boolean;
+  singleSelection: boolean;
+  targetOwnsEscape: boolean;
+  overlayOwnsEscape: boolean;
+}): SlideEscapeAction {
+  if (targetOwnsEscape || overlayOwnsEscape) return "none";
+  if (editing) return "edit";
+  if (activeGesture) return "gesture";
+  if (activeMode) return "mode";
+  if (multiSelection) return "multi-selection";
+  if (singleSelection) return "single-selection";
+  return "canvas";
+}

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

@@ -0,0 +1,368 @@
+export const MIN_SLIDE_OBJECT_SIZE = 24;
+
+export type ResizeHandle = "nw" | "n" | "ne" | "w" | "e" | "sw" | "s" | "se";
+
+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 interface SlideObjectGeometry {
+  x: number;
+  y: number;
+  width: number;
+  height: number;
+}
+
+export interface SlideLayoutRect {
+  left: number;
+  top: number;
+  width: number;
+  height: number;
+}
+
+export interface SlideObjectLayoutSnapshot {
+  display: string;
+  flexGrow: string;
+  flexShrink: string;
+  flexBasis: string;
+  alignSelf: string;
+}
+
+export interface ResizeOptions {
+  handle: ResizeHandle;
+  dx: number;
+  dy: number;
+  preserveAspectRatio: boolean;
+  minSize?: number;
+}
+
+export type SlidesSelectionMode =
+  | "single"
+  | "multi"
+  | "image"
+  | "editing"
+  | "box-selected"
+  | "resizing"
+  | "canvas";
+
+export type SlidesSelectionTool = "select" | "draw" | "pin" | "text";
+
+export interface SlidesSelectionState<TItem> {
+  deckId?: string;
+  slideId: string;
+  slideIndex: number;
+  slideNumber: number;
+  mode: SlidesSelectionMode;
+  activeTool: SlidesSelectionTool;
+  items: TItem[];
+}
+
+export interface SlideSelectionIdentity {
+  selector: string;
+  runtimeSelector?: string;
+  objectId?: string;
+}
+
+function escapeAttributeValue(value: string): string {
+  return value.replaceAll("\\", "\\\\").replaceAll('"', '\\"');
+}
+
+export function getSlideSelectionIdentity(
+  element: HTMLElement,
+  runtimeSelector: string,
+): SlideSelectionIdentity {
+  const objectId = element.getAttribute("data-slide-object-id");
+  if (!objectId) return { selector: runtimeSelector };
+  return {
+    selector: `[data-slide-object-id="${escapeAttributeValue(objectId)}"]`,
+    runtimeSelector,
+    objectId,
+  };
+}
+
+export function getSlideSelectionMode(
+  element: { isImage: boolean; isAbsolute: boolean },
+  override?: SlidesSelectionMode,
+): SlidesSelectionMode {
+  if (override) return override;
+  if (element.isImage) return "image";
+  return element.isAbsolute ? "box-selected" : "single";
+}
+
+export function createSlidesSelectionState<TItem>({
+  deckId,
+  slideId,
+  slideIndex,
+  mode,
+  items,
+  drawMode,
+  pinMode,
+  textBoxMode,
+  activeTool,
+}: {
+  deckId?: string;
+  slideId: string;
+  slideIndex: number;
+  mode: SlidesSelectionMode;
+  items: TItem[];
+  drawMode: boolean;
+  pinMode: boolean;
+  textBoxMode: boolean;
+  activeTool?: SlidesSelectionTool;
+}): SlidesSelectionState<TItem> {
+  return {
+    deckId,
+    slideId,
+    slideIndex,
+    slideNumber: slideIndex + 1,
+    mode,
+    activeTool:
+      activeTool ??
+      (drawMode ? "draw" : pinMode ? "pin" : textBoxMode ? "text" : "select"),
+    items,
+  };
+}
+
+export function createSlideObjectId(): string {
+  if (typeof crypto !== "undefined" && "randomUUID" in crypto) {
+    return crypto.randomUUID();
+  }
+  return `slide-object-${Date.now()}-${Math.random().toString(36).slice(2)}`;
+}
+
+export function ensureSlideObjectId(element: HTMLElement): string {
+  const existing = element.getAttribute("data-slide-object-id");
+  if (existing) return existing;
+  const id = createSlideObjectId();
+  element.setAttribute("data-slide-object-id", id);
+  return id;
+}
+
+export function findSlideObjectById(
+  root: HTMLElement,
+  objectId: string,
+): HTMLElement | null {
+  return (
+    Array.from(
+      root.querySelectorAll<HTMLElement>("[data-slide-object-id]"),
+    ).find(
+      (element) => element.getAttribute("data-slide-object-id") === objectId,
+    ) ?? null
+  );
+}
+
+/**
+ * Absolute offsets resolve against the nearest ancestor that establishes a
+ * containing block, not necessarily the slide's autofit layer. Keeping the
+ * original parent preserves nested layout semantics while this resolver keeps
+ * the measured viewport position stable when that child becomes freeform.
+ */
+export function resolveSlideObjectContainingBlock(
+  element: HTMLElement,
+  slideLayer: HTMLElement,
+): HTMLElement {
+  let ancestor = element.parentElement;
+  while (ancestor && ancestor !== slideLayer) {
+    const style = window.getComputedStyle(ancestor);
+    const position = style.position || "static";
+    const hasTransform = Boolean(style.transform && style.transform !== "none");
+    const hasPerspective = Boolean(
+      style.perspective && style.perspective !== "none",
+    );
+    const hasFilter = Boolean(style.filter && style.filter !== "none");
+    const containment = style.contain ?? "";
+    const hasContainment = ["layout", "paint", "strict", "content"].some(
+      (value) => containment.split(/\s+/).includes(value),
+    );
+
+    if (
+      position !== "static" ||
+      hasTransform ||
+      hasPerspective ||
+      hasFilter ||
+      hasContainment
+    ) {
+      return ancestor;
+    }
+    ancestor = ancestor.parentElement;
+  }
+  return slideLayer;
+}
+
+export function removeTransientBuilderIds(element: HTMLElement): void {
+  element.removeAttribute("data-builder-id");
+  element.querySelectorAll("[data-builder-id]").forEach((node) => {
+    node.removeAttribute("data-builder-id");
+  });
+}
+
+export function cloneSlideObject(element: HTMLElement): HTMLElement {
+  const clone = element.cloneNode(true) as HTMLElement;
+  removeTransientBuilderIds(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
+  // to the corresponding element in the original object.
+  clone
+    .querySelectorAll<HTMLElement>("[data-slide-object-id]")
+    .forEach((descendant) => {
+      descendant.setAttribute("data-slide-object-id", createSlideObjectId());
+    });
+  return clone;
+}
+
+/**
+ * Take an in-flow slide element out of layout without pulling the rest of the
+ * slide with it. The shallow, hidden copy keeps its original flex/grid slot;
+ * the live element can then become an independently movable canvas object.
+ */
+export function freezeSlideElementForFreeform(
+  element: HTMLElement,
+  geometry: SlideObjectGeometry,
+  layout: SlideObjectLayoutSnapshot,
+): HTMLElement {
+  const objectId = ensureSlideObjectId(element);
+  const spacer = element.cloneNode(false) as HTMLElement;
+  removeTransientBuilderIds(spacer);
+  spacer.removeAttribute("id");
+  spacer.removeAttribute("data-slide-object-id");
+  spacer.removeAttribute("contenteditable");
+  spacer.removeAttribute("data-editing-block");
+  spacer.classList.add("fmd-layout-spacer");
+  spacer.setAttribute("data-slide-layout-spacer-for", objectId);
+  spacer.setAttribute("aria-hidden", "true");
+  spacer.style.visibility = "hidden";
+  spacer.style.pointerEvents = "none";
+  spacer.style.userSelect = "none";
+  spacer.style.boxSizing = "border-box";
+  spacer.style.width = `${geometry.width}px`;
+  spacer.style.height = `${geometry.height}px`;
+  spacer.style.minWidth = "0";
+  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;
+  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.
+  spacer.style.display =
+    layout.display === "inline" ? "inline-block" : layout.display;
+
+  element.before(spacer);
+  element.classList.add("fmd-freeform-object");
+  element.style.position = "absolute";
+  element.style.left = `${geometry.x}px`;
+  element.style.top = `${geometry.y}px`;
+  element.style.width = `${geometry.width}px`;
+  element.style.height = `${geometry.height}px`;
+  element.style.boxSizing = "border-box";
+  // 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";
+  return spacer;
+}
+
+/** Remove a freeform object and the invisible layout slot that anchors it. */
+export function removeSlideObjectAndLayoutSpacer(element: HTMLElement): void {
+  const objectId = element.getAttribute("data-slide-object-id");
+  if (objectId) {
+    const owner = element.parentElement ?? element.ownerDocument;
+    for (const spacer of Array.from(
+      owner.querySelectorAll<HTMLElement>("[data-slide-layout-spacer-for]"),
+    )) {
+      if (spacer.getAttribute("data-slide-layout-spacer-for") === objectId) {
+        spacer.remove();
+      }
+    }
+  }
+  element.remove();
+}
+
+/** Convert a viewport click into the unscaled fmd-slide coordinate system. */
+export function clientPointToSlideCoordinates(
+  clientX: number,
+  clientY: number,
+  rect: SlideLayoutRect,
+  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;
+  return {
+    x: Math.round(x),
+    y: Math.round(y),
+  };
+}
+
+export function resizeSlideObject(
+  start: SlideObjectGeometry,
+  {
+    handle,
+    dx,
+    dy,
+    preserveAspectRatio,
+    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;
+  }
+
+  width = Math.max(minSize, width);
+  height = Math.max(minSize, height);
+  return {
+    width,
+    height,
+    x: fromWest ? start.x + start.width - width : start.x,
+    y: fromNorth ? start.y + start.height - height : start.y,
+  };
+}
+
+export function escapedEditingSelection<T>(
+  editing: T | null,
+  selected: T | null,
+): { editing: null; selected: T | null } {
+  return { editing: null, selected: editing ?? selected };
+}

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

@@ -0,0 +1,13 @@
+import type { CollabUser } from "@agent-native/core/client/collab";
+import { DEFAULT_AGENT_IDENTITY } from "@agent-native/toolkit/collab-ui";
+
+export function getPassiveSlidePresenceUsers(
+  users: CollabUser[],
+  agentActive: boolean | undefined,
+): CollabUser[] {
+  if (!agentActive) return users;
+
+  return users.filter(
+    (user) => user.email.trim().toLowerCase() !== DEFAULT_AGENT_IDENTITY.email,
+  );
+}