@agent-native/core-corpus 0.214.0 → 0.216.0

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

@@ -0,0 +1,390 @@
+import type { SlideImageDropPosition } from "./slide-image-replacement";
+
+const VIDEO_WIDTH = 320;
+const VIDEO_HEIGHT = 180;
+const VIDEO_FILE_EXTENSIONS = new Set([
+  "avi",
+  "m4v",
+  "mkv",
+  "mov",
+  "mp4",
+  "mpeg",
+  "mpg",
+  "ogv",
+  "webm",
+]);
+const MEDIA_CONTROL_KEYS = new Set([
+  " ",
+  "ArrowDown",
+  "ArrowLeft",
+  "ArrowRight",
+  "ArrowUp",
+  "End",
+  "Home",
+]);
+
+export interface InsertSlideVideoOptions {
+  position?: SlideImageDropPosition;
+  objectId?: string;
+  label?: string;
+  geometry?: SlideVideoGeometry;
+}
+
+export interface SlideVideoGeometry {
+  left: number;
+  top: number;
+  width: number;
+  height: number;
+}
+
+export interface PendingSlideVideoPreview {
+  objectId: string;
+  label: string;
+  statusLabel: string;
+  geometry: SlideVideoGeometry;
+}
+
+export function initialSlideVideoGeometry(
+  position?: SlideImageDropPosition,
+): SlideVideoGeometry {
+  const width = VIDEO_WIDTH;
+  const height = VIDEO_HEIGHT;
+  return {
+    left: Math.max(0, Math.round((position?.x ?? 640) - width / 2)),
+    top: Math.max(0, Math.round((position?.y ?? 360) - height / 2)),
+    width,
+    height,
+  };
+}
+
+export function insertPendingSlideVideoPlaceholder(
+  content: string,
+  preview: PendingSlideVideoPreview,
+): string {
+  const doc = parseSlideContent(content);
+  if (findPendingVideoPlaceholder(doc, preview.objectId)) return content;
+
+  const placeholder = doc.createElement("div");
+  placeholder.className = "fmd-video-upload-placeholder skeleton-shimmer";
+  placeholder.setAttribute("data-slide-object-id", preview.objectId);
+  placeholder.setAttribute(
+    "data-slide-video-upload-placeholder",
+    preview.objectId,
+  );
+  placeholder.setAttribute("role", "status");
+  placeholder.setAttribute("aria-busy", "true");
+  placeholder.setAttribute(
+    "aria-label",
+    `${preview.statusLabel} ${preview.label}`.trim(),
+  );
+  placeholder.setAttribute("style", videoGeometryStyle(preview.geometry));
+
+  const slideRoot = doc.body.querySelector<HTMLElement>(".fmd-slide");
+  if (slideRoot) {
+    slideRoot.appendChild(placeholder);
+  } else {
+    doc.body.append(placeholder);
+  }
+
+  return doc.body.innerHTML;
+}
+
+export function hasPendingSlideVideoPlaceholder(
+  content: string,
+  objectId: string,
+): boolean {
+  return Boolean(
+    findPendingVideoPlaceholder(parseSlideContent(content), objectId),
+  );
+}
+
+export function capturePendingSlideVideoGeometry(
+  content: string,
+  preview: PendingSlideVideoPreview,
+): PendingSlideVideoPreview {
+  const placeholder = findPendingVideoPlaceholder(
+    parseSlideContent(content),
+    preview.objectId,
+  );
+  if (!placeholder) return preview;
+
+  const style = placeholder.style;
+  const geometry = {
+    left: Number.parseFloat(style.left),
+    top: Number.parseFloat(style.top),
+    width: Number.parseFloat(style.width),
+    height: Number.parseFloat(style.height),
+  };
+  if (Object.values(geometry).some((value) => !Number.isFinite(value))) {
+    return preview;
+  }
+  return { ...preview, geometry };
+}
+
+export function stripPendingSlideVideoPlaceholders(
+  content: string,
+  objectIds: readonly string[],
+): string {
+  if (objectIds.length === 0) return content;
+  const doc = parseSlideContent(content);
+  let changed = false;
+  for (const objectId of objectIds) {
+    for (const placeholder of Array.from(
+      doc.querySelectorAll<HTMLElement>(
+        "[data-slide-video-upload-placeholder]",
+      ),
+    )) {
+      if (
+        placeholder.getAttribute("data-slide-video-upload-placeholder") !==
+        objectId
+      ) {
+        continue;
+      }
+      placeholder.remove();
+      changed = true;
+    }
+  }
+  return changed ? doc.body.innerHTML : content;
+}
+
+export type VideoPlaybackMode = "click" | "autoplay";
+
+export interface VideoPlaybackSettings {
+  mode: VideoPlaybackMode;
+  loop: boolean;
+}
+
+export function videoPlaybackSettingsFor(
+  video: HTMLVideoElement,
+): VideoPlaybackSettings {
+  return {
+    mode:
+      video.hasAttribute("autoplay") ||
+      video.getAttribute("data-video-autoplay") === "true"
+        ? "autoplay"
+        : "click",
+    loop: video.hasAttribute("loop"),
+  };
+}
+
+export function isMediaKeyboardEvent(event: KeyboardEvent): boolean {
+  if (!MEDIA_CONTROL_KEYS.has(event.key)) return false;
+  const targetsMedia = (target: EventTarget | null): boolean =>
+    target instanceof Element && Boolean(target.closest("video, audio"));
+  if (targetsMedia(event.target)) return true;
+  if (
+    typeof event.composedPath === "function" &&
+    event.composedPath().some(targetsMedia)
+  )
+    return true;
+  return targetsMedia(document.activeElement);
+}
+
+function targetsNativeRadioGroup(targets: (EventTarget | null)[]): boolean {
+  return targets.some((target) => {
+    if (
+      !(target instanceof HTMLInputElement) ||
+      target.type !== "radio" ||
+      !target.name
+    ) {
+      return false;
+    }
+    const root = target.getRootNode() as Document | ShadowRoot;
+    const candidates = target.form
+      ? Array.from(target.form.elements)
+      : Array.from(
+          root.querySelectorAll<HTMLInputElement>('input[type="radio"]'),
+        );
+    return (
+      candidates.filter(
+        (radio) =>
+          radio instanceof HTMLInputElement &&
+          radio.type === "radio" &&
+          radio.name === target.name &&
+          radio.form === target.form,
+      ).length > 1
+    );
+  });
+}
+
+export function isInteractiveKeyboardEvent(event: KeyboardEvent): boolean {
+  const targets = [
+    event.target,
+    ...(typeof event.composedPath === "function" ? event.composedPath() : []),
+    document.activeElement,
+  ];
+  const matches = (selector: string) =>
+    targets.some(
+      (target) =>
+        target instanceof Element && Boolean(target.closest(selector)),
+    );
+
+  if (
+    (event.key.length === 1 || event.key === "Escape") &&
+    matches('select, [role="combobox"]')
+  ) {
+    return true;
+  }
+  if (
+    matches(
+      'textarea, input:not([type]), input[type="text"], input[type="search"], input[type="email"], input[type="url"], input[type="tel"], input[type="password"], [contenteditable]:not([contenteditable="false"]), [role="textbox"]',
+    )
+  ) {
+    return true;
+  }
+  if (event.key === " ") {
+    const buttonControls =
+      'button, input[type="button"], input[type="submit"], input[type="reset"], [role="button"]';
+    const focusedButton = targets
+      .filter((target): target is Element => target instanceof Element)
+      .map((target) => target.closest(buttonControls))
+      .find((target): target is Element => target !== null);
+    if (focusedButton) return focusedButton.matches(":focus-visible");
+
+    return matches(
+      'input[type="checkbox"], input[type="radio"], input[type="file"], input[type="color"], input[type="date"], input[type="datetime-local"], input[type="month"], input[type="time"], input[type="week"], select, summary, [role="checkbox"], [role="radio"], [role="switch"], [role="listbox"], [role="option"], [role="tab"], [role="menuitem"], [role="menuitemcheckbox"], [role="menuitemradio"]',
+    );
+  }
+  const isRadioGroup =
+    targetsNativeRadioGroup(targets) ||
+    matches('[role="radiogroup"], [role="radio"]');
+  return (
+    ["ArrowLeft", "ArrowRight", "ArrowUp", "ArrowDown"].includes(event.key) &&
+    (isRadioGroup ||
+      matches(
+        'select, input[type="range"], input[type="number"], input[type="date"], input[type="datetime-local"], input[type="month"], input[type="time"], input[type="week"], [role="combobox"], [role="listbox"], [role="slider"], [role="spinbutton"], [role="tablist"], [role="tree"], [role="treeitem"], [role="menu"], [role="menubar"], [role="grid"], [role="tab"]',
+      ))
+  );
+}
+
+export function applyVideoPlaybackSettings(
+  video: HTMLVideoElement,
+  settings: VideoPlaybackSettings,
+): void {
+  video.setAttribute("controls", "");
+  video.setAttribute("playsinline", "");
+  const wasAutoplay =
+    video.hasAttribute("autoplay") ||
+    video.getAttribute("data-video-autoplay") === "true";
+  if (settings.mode === "autoplay") {
+    video.setAttribute("autoplay", "");
+    video.setAttribute("muted", "");
+  } else {
+    video.removeAttribute("autoplay");
+    if (wasAutoplay) video.removeAttribute("muted");
+    video.removeAttribute("data-video-autoplay");
+  }
+  if (settings.loop) video.setAttribute("loop", "");
+  else video.removeAttribute("loop");
+}
+
+export function videoFileLooksSupported(file: File): boolean {
+  const extension = file.name.split(".").at(-1)?.toLowerCase();
+  return (
+    file.type === "video/mp4" ||
+    file.type === "video/webm" ||
+    extension === "mp4" ||
+    extension === "webm"
+  );
+}
+
+export function videoFileLooksLikeVideo(file: File): boolean {
+  const extension = file.name.split(".").at(-1)?.toLowerCase();
+  return (
+    file.type.startsWith("video/") ||
+    (extension !== undefined && VIDEO_FILE_EXTENSIONS.has(extension))
+  );
+}
+
+export function insertDroppedVideoIntoSlideHtml(
+  content: string,
+  src: string,
+  options: InsertSlideVideoOptions = {},
+): string {
+  const doc = new DOMParser().parseFromString(
+    `<body>${content}</body>`,
+    "text/html",
+  );
+  const video = doc.createElement("video");
+  const geometry =
+    options.geometry ?? initialSlideVideoGeometry(options.position);
+
+  video.setAttribute("src", src);
+  video.setAttribute("controls", "");
+  video.setAttribute("playsinline", "");
+  video.setAttribute("preload", "metadata");
+  if (options.label?.trim()) {
+    video.setAttribute("aria-label", options.label.trim());
+  }
+  video.setAttribute(
+    "data-slide-object-id",
+    options.objectId ?? createSlideObjectId(),
+  );
+  video.className = "fmd-video-uploaded";
+  video.setAttribute(
+    "style",
+    videoGeometryStyle(geometry) + " object-fit: contain;",
+  );
+
+  const slideRoot = doc.body.querySelector<HTMLElement>(".fmd-slide");
+  if (slideRoot) {
+    ensureSlideRootIsPositioned(slideRoot);
+    slideRoot.appendChild(video);
+  } else {
+    doc.body.append(doc.createTextNode("\n\n"), video);
+  }
+
+  return doc.body.innerHTML;
+}
+
+function parseSlideContent(content: string): Document {
+  return new DOMParser().parseFromString(
+    `<body>${content}</body>`,
+    "text/html",
+  );
+}
+
+function findPendingVideoPlaceholder(
+  doc: Document,
+  objectId: string,
+): HTMLElement | null {
+  return (
+    Array.from(
+      doc.querySelectorAll<HTMLElement>(
+        "[data-slide-video-upload-placeholder]",
+      ),
+    ).find(
+      (element) =>
+        element.getAttribute("data-slide-video-upload-placeholder") ===
+        objectId,
+    ) ?? null
+  );
+}
+
+function videoGeometryStyle(geometry: SlideVideoGeometry): string {
+  return `position: absolute; left: ${geometry.left}px; top: ${geometry.top}px; width: ${geometry.width}px; height: ${geometry.height}px; max-width: none; max-height: none; margin: 0; box-sizing: border-box; z-index: 1;`;
+}
+
+function ensureSlideRootIsPositioned(slideRoot: HTMLElement): void {
+  if (hasStyleProperty(slideRoot.getAttribute("style") ?? "", "position")) {
+    return;
+  }
+  slideRoot.setAttribute(
+    "style",
+    `${(slideRoot.getAttribute("style") ?? "").trim().replace(/;+\s*$/, "")}; position: relative;`.replace(
+      /^;\s*/,
+      "",
+    ),
+  );
+}
+
+function createSlideObjectId(): string {
+  if (typeof crypto !== "undefined" && "randomUUID" in crypto) {
+    return crypto.randomUUID();
+  }
+  return `slide-object-${Date.now()}-${Math.random().toString(36).slice(2)}`;
+}
+
+function hasStyleProperty(style: string, property: string): boolean {
+  return new RegExp(`(?:^|;)\\s*${property}\\s*:`, "i").test(style);
+}

package/corpus/templates/slides-2/app/lib/slides-relay-tracking.ts

@@ -0,0 +1,114 @@
+import { track } from "@agent-native/core/client/analytics";
+import { isSyntheticTrafficValue } from "@agent-native/core/shared/test-traffic";
+import { SOURCE_RUNTIME_EXPORT_ERROR_CODE } from "@shared/source-runtime-export";
+
+/**
+ * Browser events recorded by the app server, so ad blockers cannot drop them.
+ * The relay needs a signed-in session; signed-out viewers use `trackEvent`.
+ */
+export function trackSlidesRelay(
+  name: string,
+  properties: Record<string, unknown>,
+): void {
+  // These run inside export catch blocks and unload handlers, so a throw here
+  // would replace the user's real error or break navigation. Telemetry loss is
+  // always preferable to affecting the flow it describes.
+  try {
+    // The relay skips the browser-side synthetic check that trackEvent
+    // applies; test identities are still dropped on the server.
+    if (
+      typeof window !== "undefined" &&
+      isSyntheticTrafficValue(
+        (window as { __AGENT_NATIVE_SYNTHETIC_TRAFFIC__?: unknown })
+          .__AGENT_NATIVE_SYNTHETIC_TRAFFIC__,
+      )
+    ) {
+      return;
+    }
+    void track(name, {
+      ...properties,
+      app_name: "slides-2",
+      template_name: "slides-2",
+    }).catch(() => {
+      // coercion-ok: a failed analytics send must never surface to the user.
+    });
+  } catch {
+    // coercion-ok: a failed analytics send must never surface to the user.
+  }
+}
+
+export type BrowserDeckExportFormat = "pdf" | "pptx" | "google_slides";
+
+export interface BrowserDeckExportFacts {
+  deckId?: string;
+  generationAttemptId?: string;
+}
+
+export function trackBrowserDeckExported(
+  exportFormat: BrowserDeckExportFormat,
+  facts: BrowserDeckExportFacts & {
+    slideCount: number;
+    status: "completed" | "failed";
+    errorType?: string;
+    renderLocation?: "server" | "browser";
+  },
+): void {
+  trackSlidesRelay("deck_exported", {
+    ...(facts.deckId ? { output_id: facts.deckId } : {}),
+    output_type: "deck",
+    export_format: exportFormat,
+    render_location: facts.renderLocation ?? "browser",
+    status: facts.status,
+    ...(facts.errorType ? { error_type: facts.errorType } : {}),
+    slide_count: facts.slideCount,
+    ...(facts.generationAttemptId
+      ? { generation_attempt_id: facts.generationAttemptId }
+      : {}),
+  });
+}
+
+export function browserExportErrorType(error: unknown): string {
+  if (error instanceof Error && error.name === "AbortError") return "cancelled";
+  if (
+    Boolean(
+      error &&
+      typeof error === "object" &&
+      (error as { errorCode?: unknown }).errorCode ===
+        SOURCE_RUNTIME_EXPORT_ERROR_CODE,
+    )
+  ) {
+    return SOURCE_RUNTIME_EXPORT_ERROR_CODE;
+  }
+  return "export_error";
+}
+
+const sentDeckReadyViews = new Set<string>();
+
+/**
+ * True the first time it is called for an attempt in this page. Reloads and
+ * other devices can send it again; the warehouse dedupes on the attempt id.
+ */
+export function firstDeckReadyView(generationAttemptId: string): boolean {
+  if (sentDeckReadyViews.has(generationAttemptId)) return false;
+  sentDeckReadyViews.add(generationAttemptId);
+  return true;
+}
+
+/**
+ * Runs `callback` now if the tab is visible, otherwise on the next switch to
+ * visible. The returned cleanup cancels a callback that has not run yet.
+ */
+export function runWhenTabVisible(callback: () => void): () => void {
+  if (document.visibilityState === "visible") {
+    callback();
+    return () => {};
+  }
+  const onVisibilityChange = () => {
+    if (document.visibilityState !== "visible") return;
+    document.removeEventListener("visibilitychange", onVisibilityChange);
+    callback();
+  };
+  document.addEventListener("visibilitychange", onVisibilityChange);
+  return () =>
+    document.removeEventListener("visibilitychange", onVisibilityChange);
+}

package/corpus/templates/slides-2/app/lib/streaming-slide-html.ts

@@ -0,0 +1,77 @@
+export interface PartialAddSlideInput {
+  deckId?: string;
+  content?: string;
+}
+
+interface PartialJsonString {
+  value: string;
+  complete: boolean;
+}
+
+function readPartialJsonString(
+  source: string,
+  key: string,
+): PartialJsonString | undefined {
+  const keyMatch = new RegExp(`"${key}"\\s*:\\s*"`).exec(source);
+  if (!keyMatch) return undefined;
+
+  let value = "";
+  let escaped = false;
+  for (
+    let index = keyMatch.index + keyMatch[0].length;
+    index < source.length;
+    index++
+  ) {
+    const char = source[index];
+    if (escaped) {
+      escaped = false;
+      if (char === "u") {
+        const code = source.slice(index + 1, index + 5);
+        if (!/^[0-9a-fA-F]{4}$/.test(code)) {
+          return { value, complete: false };
+        }
+        value += String.fromCharCode(Number.parseInt(code, 16));
+        index += 4;
+      } else {
+        value +=
+          char === "n"
+            ? "\n"
+            : char === "r"
+              ? "\r"
+              : char === "t"
+                ? "\t"
+                : char;
+      }
+      continue;
+    }
+    if (char === "\\") {
+      escaped = true;
+      continue;
+    }
+    if (char === '"') return { value, complete: true };
+    value += char;
+  }
+
+  return { value, complete: false };
+}
+
+export function parsePartialAddSlideInput(
+  argsText: string,
+): PartialAddSlideInput {
+  try {
+    const parsed = JSON.parse(argsText) as Record<string, unknown>;
+    return {
+      ...(typeof parsed.deckId === "string" ? { deckId: parsed.deckId } : {}),
+      ...(typeof parsed.content === "string"
+        ? { content: parsed.content }
+        : {}),
+    };
+  } catch {
+    const deckId = readPartialJsonString(argsText, "deckId");
+    const content = readPartialJsonString(argsText, "content");
+    return {
+      ...(deckId?.complete ? { deckId: deckId.value } : {}),
+      ...(content ? { content: content.value } : {}),
+    };
+  }
+}

package/corpus/templates/slides-2/app/lib/tab-id.ts

@@ -0,0 +1,3 @@
+import { getBrowserTabId } from "@agent-native/core/client/hooks";
+
+export const TAB_ID = getBrowserTabId();

package/corpus/templates/slides-2/app/lib/template-navigation.ts

@@ -0,0 +1,15 @@
+export function templateLibraryPath(templateId?: string, search?: string) {
+  const params = new URLSearchParams();
+  if (templateId) params.set("templateId", templateId);
+  if (search) params.set("search", search);
+  return `/templates${params.size ? `?${params}` : ""}`;
+}
+
+export function templateLibraryNavigation(search: string) {
+  const params = new URLSearchParams(search);
+  return {
+    view: "templates",
+    templateId: params.get("templateId")?.slice(0, 200) || undefined,
+    search: params.get("search")?.slice(0, 200) || undefined,
+  };
+}

package/corpus/templates/slides-2/app/lib/text-tool-shortcut.ts

@@ -0,0 +1,75 @@
+export interface TextToolShortcutEvent {
+  key: string;
+  altKey: boolean;
+  ctrlKey: boolean;
+  metaKey: boolean;
+  shiftKey: boolean;
+  defaultPrevented: boolean;
+  repeat: boolean;
+  isComposing: boolean;
+  target: EventTarget | null;
+}
+
+interface SlideToolShortcutOptions {
+  canEdit: boolean;
+  activeElement: Element | null;
+  blockingSurfaceOpen: boolean;
+}
+
+const EDITABLE_OR_BLOCKING_SELECTOR = [
+  "input",
+  "textarea",
+  "select",
+  "[contenteditable='true']",
+  "[role='textbox']",
+  "[role='dialog']",
+  "[role='menu']",
+  "[role='listbox']",
+].join(", ");
+
+function isEditableOrBlockingTarget(target: EventTarget | null): boolean {
+  return (
+    target instanceof Element &&
+    target.closest(EDITABLE_OR_BLOCKING_SELECTOR) !== null
+  );
+}
+
+function shouldActivateSlideTool(
+  event: TextToolShortcutEvent,
+  key: "r" | "t",
+  { canEdit, activeElement, blockingSurfaceOpen }: SlideToolShortcutOptions,
+): boolean {
+  if (
+    !canEdit ||
+    event.defaultPrevented ||
+    event.repeat ||
+    event.isComposing ||
+    event.key.toLowerCase() !== key ||
+    event.altKey ||
+    event.ctrlKey ||
+    event.metaKey ||
+    event.shiftKey ||
+    blockingSurfaceOpen
+  ) {
+    return false;
+  }
+
+  return (
+    !isEditableOrBlockingTarget(event.target) &&
+    !isEditableOrBlockingTarget(activeElement)
+  );
+}
+
+export function shouldActivateTextTool(
+  event: TextToolShortcutEvent,
+  options: SlideToolShortcutOptions,
+): boolean {
+  return shouldActivateSlideTool(event, "t", options);
+}
+
+export function shouldActivateRectangleTool(
+  event: TextToolShortcutEvent,
+  options: SlideToolShortcutOptions,
+): boolean {
+  return shouldActivateSlideTool(event, "r", options);
+}