@agent-native/core-corpus 0.213.1 → 0.216.0

package/corpus/templates/slides-2/app/lib/design-systems.ts

@@ -0,0 +1,231 @@
+export interface TweakDefinition {
+  id: string;
+  label: string;
+  type: "color-swatches" | "segment" | "toggle" | "slider";
+  options?: { value: string; label: string; color?: string }[];
+  defaultValue: string | number | boolean;
+  cssVar?: string;
+}
+
+export interface DesignSystemPreset {
+  id: string;
+  name: string;
+  tweaks: TweakDefinition[];
+  defaultTokens: {
+    accent: string;
+    background: string;
+    text: string;
+    textMuted: string;
+    headingFont: string;
+    bodyFont: string;
+  };
+}
+
+export const DESIGN_SYSTEM_PRESETS: DesignSystemPreset[] = [
+  {
+    id: "default",
+    name: "Dark",
+    tweaks: [
+      {
+        id: "accentColor",
+        label: "Accent color",
+        type: "color-swatches",
+        options: [
+          { value: "#00E5FF", label: "Cyan", color: "#00E5FF" }, // guard:allow-raw-color — saved slide design-system palette value, not app chrome.
+          { value: "#609FF8", label: "Blue", color: "#609FF8" }, // guard:allow-raw-color — saved slide design-system palette value, not app chrome.
+          { value: "#4ADE80", label: "Green", color: "#4ADE80" }, // guard:allow-raw-color — saved slide design-system palette value, not app chrome.
+          { value: "#F472B6", label: "Pink", color: "#F472B6" }, // guard:allow-raw-color — saved slide design-system palette value, not app chrome.
+          { value: "#FBBF24", label: "Gold", color: "#FBBF24" }, // guard:allow-raw-color — saved slide design-system palette value, not app chrome.
+        ],
+        defaultValue: "#00E5FF", // guard:allow-raw-color — saved slide design-system palette value, not app chrome.
+        cssVar: "--ds-accent",
+      },
+      {
+        id: "titleCase",
+        label: "Title case",
+        type: "segment",
+        options: [
+          { value: "lowercase", label: "lower" },
+          { value: "capitalize", label: "Title" },
+          { value: "uppercase", label: "UPPER" },
+        ],
+        defaultValue: "uppercase",
+      },
+      {
+        id: "paperBackground",
+        label: "Paper background",
+        type: "segment",
+        options: [
+          { value: "warm", label: "warm" },
+          { value: "cool", label: "cool" },
+          { value: "dark", label: "dark" },
+        ],
+        defaultValue: "dark",
+      },
+    ],
+    defaultTokens: {
+      accent: "#00E5FF", // guard:allow-raw-color — saved slide design-system palette value, not app chrome.
+      background: "#000000", // guard:allow-raw-color — saved slide design-system palette value, not app chrome.
+      text: "#ffffff", // guard:allow-raw-color — saved slide design-system palette value, not app chrome.
+      textMuted: "rgba(255,255,255,0.55)", // guard:allow-raw-color — saved slide design-system palette value, not app chrome.
+      headingFont: "Poppins",
+      bodyFont: "Poppins",
+    },
+  },
+  {
+    id: "light",
+    name: "Light",
+    tweaks: [
+      {
+        id: "accentColor",
+        label: "Accent color",
+        type: "color-swatches",
+        options: [
+          { value: "#2563EB", label: "Blue", color: "#2563EB" }, // guard:allow-raw-color — saved slide design-system palette value, not app chrome.
+          { value: "#0891B2", label: "Teal", color: "#0891B2" }, // guard:allow-raw-color — saved slide design-system palette value, not app chrome.
+          { value: "#7C3AED", label: "Violet", color: "#7C3AED" }, // guard:allow-raw-color — saved slide design-system palette value, not app chrome.
+          { value: "#DC2626", label: "Red", color: "#DC2626" }, // guard:allow-raw-color — saved slide design-system palette value, not app chrome.
+          { value: "#059669", label: "Emerald", color: "#059669" }, // guard:allow-raw-color — saved slide design-system palette value, not app chrome.
+        ],
+        defaultValue: "#2563EB", // guard:allow-raw-color — saved slide design-system palette value, not app chrome.
+        cssVar: "--ds-accent",
+      },
+      {
+        id: "titleCase",
+        label: "Title case",
+        type: "segment",
+        options: [
+          { value: "lowercase", label: "lower" },
+          { value: "capitalize", label: "Title" },
+          { value: "uppercase", label: "UPPER" },
+        ],
+        defaultValue: "capitalize",
+      },
+      {
+        id: "paperBackground",
+        label: "Paper background",
+        type: "segment",
+        options: [
+          { value: "warm", label: "warm" },
+          { value: "cool", label: "cool" },
+          { value: "white", label: "white" },
+        ],
+        defaultValue: "white",
+      },
+    ],
+    defaultTokens: {
+      accent: "#2563EB", // guard:allow-raw-color — saved slide design-system palette value, not app chrome.
+      background: "#FFFFFF", // guard:allow-raw-color — saved slide design-system palette value, not app chrome.
+      text: "#1a1a1a", // guard:allow-raw-color — saved slide design-system palette value, not app chrome.
+      textMuted: "rgba(0,0,0,0.5)", // guard:allow-raw-color — saved slide design-system palette value, not app chrome.
+      headingFont: "Inter",
+      bodyFont: "Inter",
+    },
+  },
+  {
+    id: "corporate",
+    name: "Corporate",
+    tweaks: [
+      {
+        id: "accentColor",
+        label: "Accent color",
+        type: "color-swatches",
+        options: [
+          { value: "#1E40AF", label: "Navy", color: "#1E40AF" }, // guard:allow-raw-color — saved slide design-system palette value, not app chrome.
+          { value: "#0F766E", label: "Teal", color: "#0F766E" }, // guard:allow-raw-color — saved slide design-system palette value, not app chrome.
+          { value: "#92400E", label: "Amber", color: "#92400E" }, // guard:allow-raw-color — saved slide design-system palette value, not app chrome.
+          { value: "#6B21A8", label: "Purple", color: "#6B21A8" }, // guard:allow-raw-color — saved slide design-system palette value, not app chrome.
+          { value: "#166534", label: "Green", color: "#166534" }, // guard:allow-raw-color — saved slide design-system palette value, not app chrome.
+        ],
+        defaultValue: "#1E40AF", // guard:allow-raw-color — saved slide design-system palette value, not app chrome.
+        cssVar: "--ds-accent",
+      },
+      {
+        id: "titleCase",
+        label: "Title case",
+        type: "segment",
+        options: [
+          { value: "lowercase", label: "lower" },
+          { value: "capitalize", label: "Title" },
+          { value: "uppercase", label: "UPPER" },
+        ],
+        defaultValue: "capitalize",
+      },
+      {
+        id: "paperBackground",
+        label: "Paper background",
+        type: "segment",
+        options: [
+          { value: "warm", label: "warm" },
+          { value: "slate", label: "slate" },
+          { value: "white", label: "white" },
+        ],
+        defaultValue: "white",
+      },
+    ],
+    defaultTokens: {
+      accent: "#1E40AF", // guard:allow-raw-color — saved slide design-system palette value, not app chrome.
+      background: "#F8FAFC", // guard:allow-raw-color — saved slide design-system palette value, not app chrome.
+      text: "#0F172A", // guard:allow-raw-color — saved slide design-system palette value, not app chrome.
+      textMuted: "rgba(15,23,42,0.55)", // guard:allow-raw-color — saved slide design-system palette value, not app chrome.
+      headingFont: "Inter",
+      bodyFont: "Inter",
+    },
+  },
+  {
+    id: "minimal",
+    name: "Minimal",
+    tweaks: [
+      {
+        id: "accentColor",
+        label: "Accent color",
+        type: "color-swatches",
+        options: [
+          { value: "#404040", label: "Charcoal", color: "#404040" }, // guard:allow-raw-color — saved slide design-system palette value, not app chrome.
+          { value: "#737373", label: "Gray", color: "#737373" }, // guard:allow-raw-color — saved slide design-system palette value, not app chrome.
+          { value: "#171717", label: "Black", color: "#171717" }, // guard:allow-raw-color — saved slide design-system palette value, not app chrome.
+          { value: "#A3A3A3", label: "Silver", color: "#A3A3A3" }, // guard:allow-raw-color — saved slide design-system palette value, not app chrome.
+          { value: "#525252", label: "Zinc", color: "#525252" }, // guard:allow-raw-color — saved slide design-system palette value, not app chrome.
+        ],
+        defaultValue: "#404040", // guard:allow-raw-color — saved slide design-system palette value, not app chrome.
+        cssVar: "--ds-accent",
+      },
+      {
+        id: "titleCase",
+        label: "Title case",
+        type: "segment",
+        options: [
+          { value: "lowercase", label: "lower" },
+          { value: "capitalize", label: "Title" },
+          { value: "uppercase", label: "UPPER" },
+        ],
+        defaultValue: "lowercase",
+      },
+      {
+        id: "paperBackground",
+        label: "Paper background",
+        type: "segment",
+        options: [
+          { value: "warm", label: "warm" },
+          { value: "cool", label: "cool" },
+          { value: "white", label: "white" },
+        ],
+        defaultValue: "cool",
+      },
+    ],
+    defaultTokens: {
+      accent: "#404040", // guard:allow-raw-color — saved slide design-system palette value, not app chrome.
+      background: "#FAFAFA", // guard:allow-raw-color — saved slide design-system palette value, not app chrome.
+      text: "#262626", // guard:allow-raw-color — saved slide design-system palette value, not app chrome.
+      textMuted: "rgba(38,38,38,0.5)", // guard:allow-raw-color — saved slide design-system palette value, not app chrome.
+      headingFont: "Inter",
+      bodyFont: "Inter",
+    },
+  },
+];
+
+export function getPreset(id: string): DesignSystemPreset {
+  return (
+    DESIGN_SYSTEM_PRESETS.find((p) => p.id === id) || DESIGN_SYSTEM_PRESETS[0]
+  );
+}

package/corpus/templates/slides-2/app/lib/dynamic-import.ts

@@ -0,0 +1,50 @@
+import { appStorageKey } from "@shared/app-storage";
+
+const RELOAD_GUARD_KEY = appStorageKey("export-module-reload-attempted");
+
+const STALE_CHUNK_PATTERN =
+  /fetch dynamically imported module|error loading dynamically imported module/i;
+
+function isStaleChunkError(error: unknown): boolean {
+  const message = error instanceof Error ? error.message : String(error);
+  return STALE_CHUNK_PATTERN.test(message);
+}
+
+function hasAlreadyReloaded(): boolean {
+  try {
+    return sessionStorage.getItem(RELOAD_GUARD_KEY) === "1";
+  } catch {
+    // Avoid a reload loop when sessionStorage cannot persist the retry marker.
+    return true;
+  }
+}
+
+function markReloaded(): boolean {
+  try {
+    sessionStorage.setItem(RELOAD_GUARD_KEY, "1");
+    return true;
+  } catch {
+    // coercion-ok: without a durable marker, the importer reports its normal retry error instead of reloading.
+    return false;
+  }
+}
+
+export async function importExportModule<T>(
+  loader: () => Promise<T>,
+): Promise<T> {
+  try {
+    return await loader();
+  } catch (error) {
+    if (isStaleChunkError(error) && !hasAlreadyReloaded() && markReloaded()) {
+      window.location.reload();
+      return new Promise<T>(() => {});
+    }
+    try {
+      return await loader();
+    } catch {
+      throw new Error(
+        "Couldn't load the export module. Refresh the page and try again.",
+      );
+    }
+  }
+}

package/corpus/templates/slides-2/app/lib/editor-agent-handoff.ts

@@ -0,0 +1,92 @@
+import { sendToAgentChat } from "@agent-native/core/client/agent-chat";
+
+import type { DrawAnnotation } from "../components/visual-editor/DrawOverlay";
+
+export interface EditorAgentPrompt {
+  message: string;
+  submit: boolean;
+}
+
+export function buildSelectionHandoffPrompt(args: {
+  slideNumber: number;
+  slideId: string;
+  selectors: readonly string[];
+}): EditorAgentPrompt | null {
+  if (args.selectors.length === 0) return null;
+  return {
+    message: `[Current selection on slide ${args.slideNumber} (${args.slideId}): ${args.selectors.join(", ")}]\n`,
+    submit: false,
+  };
+}
+
+export function buildDrawingHandoffPrompt(args: {
+  slideId: string;
+  annotations: readonly DrawAnnotation[];
+  instruction: string;
+  canvasSize: { width: number; height: number };
+}): EditorAgentPrompt {
+  const summary = args.annotations
+    .map((annotation) =>
+      annotation.type === "path"
+        ? `[stroke ${annotation.color} w=${annotation.lineWidth}] ${annotation.pathData}`
+        : `[label "${annotation.text}" at ${annotation.position.x.toFixed(0)},${annotation.position.y.toFixed(0)}]`,
+    )
+    .join("\n");
+  return {
+    message: [
+      `[Drawing on slide ${args.slideId}]`,
+      `Canvas size: ${args.canvasSize.width.toFixed(0)}x${args.canvasSize.height.toFixed(0)}`,
+      summary,
+      "",
+      args.instruction || "Apply these annotations to the slide.",
+    ].join("\n"),
+    submit: true,
+  };
+}
+
+export type ContextToolbarQuickPick =
+  | "tightenTone"
+  | "polish"
+  | "translate"
+  | "makeMoreVisual"
+  | "generateImage"
+  | "removeBackground";
+
+// Agent-facing instructions, not UI copy: the visible labels are localized.
+const QUICK_PICK_INSTRUCTIONS: Record<ContextToolbarQuickPick, string> = {
+  tightenTone: "Tighten the tone of the selected text: shorter, more direct.", // i18n-ignore agent prompt
+  polish: "Polish the selected text: fix grammar and flow, keep the meaning.", // i18n-ignore agent prompt
+  translate:
+    "Translate the selected text. Ask which language if it is not obvious.", // i18n-ignore agent prompt
+  makeMoreVisual:
+    "Make the selected content more visual: replace prose with a clearer layout, diagram, or imagery.", // i18n-ignore agent prompt
+  generateImage: "Generate a new image to replace the selected image.", // i18n-ignore agent prompt
+  removeBackground: "Remove the background from the selected image.", // i18n-ignore agent prompt
+};
+
+export function buildQuickPickPrompt(args: {
+  pick: ContextToolbarQuickPick;
+  slideNumber: number;
+  slideId: string;
+  selectors: readonly string[];
+}): EditorAgentPrompt {
+  return {
+    message: [
+      `[Current selection on slide ${args.slideNumber} (${args.slideId}): ${args.selectors.join(", ")}]`,
+      QUICK_PICK_INSTRUCTIONS[args.pick],
+    ].join("\n"),
+    submit: true,
+  };
+}
+
+export function openAgentPanel(): void {
+  window.dispatchEvent(new Event("agent-panel:open"));
+}
+
+export function sendEditorPromptToAgent(prompt: EditorAgentPrompt): void {
+  sendToAgentChat({
+    message: prompt.message,
+    submit: prompt.submit,
+    chatTarget: "local",
+  });
+}

package/corpus/templates/slides-2/app/lib/editor-shortcuts.ts

@@ -0,0 +1,153 @@
+interface EditorShortcutEvent {
+  key: string;
+  code?: string;
+  altKey: boolean;
+  ctrlKey: boolean;
+  metaKey: boolean;
+  shiftKey: boolean;
+  defaultPrevented?: boolean;
+  repeat: boolean;
+  isComposing: boolean;
+  target: EventTarget | null;
+}
+
+const EDITABLE_OR_BLOCKING_SELECTOR = [
+  "input",
+  "textarea",
+  "select",
+  "[contenteditable='true']",
+  "[role='textbox']",
+  "[role='dialog']",
+  "[role='menu']",
+  "[role='listbox']",
+].join(", ");
+
+function isEditableSurface(target: EventTarget | null): boolean {
+  return (
+    target instanceof HTMLElement &&
+    (target.closest(
+      "input, textarea, select, [contenteditable='true'], [role='textbox']",
+    ) !== null ||
+      target.isContentEditable)
+  );
+}
+
+function isEditableOrBlockingTarget(target: EventTarget | null): boolean {
+  return (
+    target instanceof Element &&
+    target.closest(EDITABLE_OR_BLOCKING_SELECTOR) !== null
+  );
+}
+
+function isFormControlTarget(target: EventTarget | null): boolean {
+  return (
+    target instanceof Element &&
+    target.closest("input, textarea, select") !== null
+  );
+}
+
+export function isGoogleSlidesCommentShortcut(event: EditorShortcutEvent) {
+  return (
+    !event.repeat &&
+    !event.isComposing &&
+    !event.shiftKey &&
+    (event.key.toLowerCase() === "m" || event.code === "KeyM") &&
+    event.altKey &&
+    (event.ctrlKey || event.metaKey)
+  );
+}
+
+export function shouldStopSlidesItalicShortcut(event: EditorShortcutEvent) {
+  if (
+    event.repeat ||
+    event.isComposing ||
+    event.key.toLowerCase() !== "i" ||
+    event.altKey ||
+    event.shiftKey ||
+    !(event.ctrlKey || event.metaKey)
+  ) {
+    return false;
+  }
+
+  return true;
+}
+
+export function isSlidesItalicEditableTarget(event: EditorShortcutEvent) {
+  return isEditableSurface(event.target);
+}
+
+export function shouldSuppressSlidesItalicShortcut(event: EditorShortcutEvent) {
+  return (
+    shouldStopSlidesItalicShortcut(event) &&
+    !isSlidesItalicEditableTarget(event)
+  );
+}
+
+export function shouldActivateSlidesCommentShortcut(
+  event: EditorShortcutEvent,
+  {
+    canComment,
+    activeElement,
+    focusedCanvas,
+    blockingSurfaceOpen,
+  }: {
+    canComment: boolean;
+    activeElement: Element | null;
+    focusedCanvas: boolean;
+    blockingSurfaceOpen: boolean;
+  },
+): boolean {
+  if (!canComment || blockingSurfaceOpen) {
+    return false;
+  }
+
+  const key = event.key.toLowerCase();
+  const plainCanvasShortcut =
+    key === "c" && !event.altKey && !event.ctrlKey && !event.metaKey;
+  if (isGoogleSlidesCommentShortcut(event)) {
+    return (
+      focusedCanvas &&
+      !isFormControlTarget(event.target) &&
+      !isFormControlTarget(activeElement)
+    );
+  }
+
+  return (
+    !event.defaultPrevented &&
+    !event.repeat &&
+    !event.isComposing &&
+    !event.shiftKey &&
+    plainCanvasShortcut &&
+    focusedCanvas &&
+    !isEditableOrBlockingTarget(event.target) &&
+    !isEditableOrBlockingTarget(activeElement)
+  );
+}
+
+export function shouldCreateSlideWithShortcut(
+  event: EditorShortcutEvent,
+  {
+    canEdit,
+    activeElement,
+    blockingSurfaceOpen,
+  }: {
+    canEdit: boolean;
+    activeElement: Element | null;
+    blockingSurfaceOpen: boolean;
+  },
+): boolean {
+  return (
+    canEdit &&
+    !event.defaultPrevented &&
+    !event.repeat &&
+    !event.isComposing &&
+    event.key.toLowerCase() === "m" &&
+    event.ctrlKey &&
+    !event.metaKey &&
+    !event.altKey &&
+    !event.shiftKey &&
+    !blockingSurfaceOpen &&
+    !isEditableOrBlockingTarget(event.target) &&
+    !isEditableOrBlockingTarget(activeElement)
+  );
+}

package/corpus/templates/slides-2/app/lib/export-google-slides-client.ts

@@ -0,0 +1,168 @@
+import { appBasePath } from "@agent-native/core/client/api-path";
+
+import type { AspectRatio } from "./aspect-ratios";
+import { buildDeckPptxBlob } from "./export-pptx-client";
+import {
+  getGoogleDocsStatus,
+  googleDocsRouteErrorMessage,
+} from "./google-docs-client";
+import { retargetPptxForGoogleSlides } from "./pptx-google-slides";
+import {
+  browserExportErrorType,
+  trackBrowserDeckExported,
+  type BrowserDeckExportFacts,
+} from "./slides-relay-tracking";
+
+interface GoogleSlidesExportSlide {
+  id: string;
+  notes?: string;
+}
+
+export type GoogleSlidesExportResult =
+  | { url: string }
+  /** Drive was unavailable, so the PPTX was downloaded for a manual import. */
+  | { url: null; downloaded: true; reason: string }
+  /** The export action should send the user through Google OAuth first. */
+  | { url: null; requiresConnection: true; reason: string };
+
+export interface DeckPptxFile {
+  blob: Blob;
+  filename: string;
+}
+
+async function googleDriveIsConnected(): Promise<boolean> {
+  const response = await getGoogleDocsStatus();
+  const connected = response.data?.connected;
+  if (!response.ok || response.unreadable || typeof connected !== "boolean") {
+    throw new Error(
+      googleDocsRouteErrorMessage(
+        response,
+        `Could not check Google Drive (${response.status})`,
+      ),
+    );
+  }
+  return connected === true;
+}
+
+export { fetchDeckPptxFromServer } from "./deck-export-file-client";
+
+function triggerBlobDownload(blob: Blob, filename: string) {
+  const url = URL.createObjectURL(blob);
+  const a = document.createElement("a");
+  a.href = url;
+  a.download = filename;
+  a.rel = "noopener";
+  document.body.appendChild(a);
+  a.click();
+  a.remove();
+  window.setTimeout(() => URL.revokeObjectURL(url), 60_000);
+}
+
+export async function exportDeckToGoogleSlides(
+  deckTitle: string,
+  slides: GoogleSlidesExportSlide[],
+  aspectRatio?: AspectRatio,
+  buildPptx?: () => Promise<DeckPptxFile>,
+  analytics?: BrowserDeckExportFacts,
+): Promise<GoogleSlidesExportResult> {
+  const renderLocation = buildPptx ? "server" : "browser";
+  let connected: boolean;
+  try {
+    connected = await googleDriveIsConnected();
+  } catch (error) {
+    // No export happened, so this failure is unambiguous and nothing else
+    // reports it.
+    if (analytics) {
+      trackBrowserDeckExported("google_slides", {
+        ...analytics,
+        slideCount: slides.length,
+        renderLocation,
+        status: "failed",
+        errorType: "connection_check_failed",
+      });
+    }
+    throw error;
+  }
+  if (!connected) {
+    // Same outcome the upload route records when it detects this itself.
+    if (analytics) {
+      trackBrowserDeckExported("google_slides", {
+        ...analytics,
+        slideCount: slides.length,
+        renderLocation,
+        status: "failed",
+        errorType: "google_not_connected",
+      });
+    }
+    return {
+      url: null,
+      requiresConnection: true,
+      reason: "No connected Google account.",
+    };
+  }
+
+  let built: DeckPptxFile;
+  try {
+    built = buildPptx
+      ? await buildPptx().then(async (file) => ({
+          ...file,
+          blob: await retargetPptxForGoogleSlides(file.blob),
+        }))
+      : await buildDeckPptxBlob(deckTitle, slides, aspectRatio, {
+          target: "google-slides",
+        });
+  } catch (error) {
+    // The upload route reports every export that reaches it.
+    if (analytics) {
+      trackBrowserDeckExported("google_slides", {
+        ...analytics,
+        slideCount: slides.length,
+        renderLocation,
+        status: "failed",
+        errorType: browserExportErrorType(error),
+      });
+    }
+    throw error;
+  }
+  const { blob, filename } = built;
+
+  const form = new FormData();
+  form.append("file", blob, filename);
+  form.append("title", deckTitle);
+  if (analytics?.deckId) {
+    form.append("deckId", analytics.deckId);
+    form.append("renderLocation", renderLocation);
+  }
+
+  // A rejected upload doesn't prove the route never ran (the response can be
+  // lost after Drive accepted the file), so it is left to the route's own
+  // event; an export with no outcome counts as failed_unknown downstream.
+  const res = await fetch(`${appBasePath()}/api/exports/google-slides`, {
+    method: "POST",
+    body: form,
+  });
+
+  // coercion-ok: if the result body is unreadable, the built deck is downloaded and the route records its own outcome.
+  const payload = (await res.json().catch(() => null)) as {
+    url?: string;
+    error?: string;
+    code?: string;
+  } | null;
+
+  if (res.ok && payload?.url) return { url: payload.url };
+
+  if (payload?.code === "google-not-connected") {
+    return {
+      url: null,
+      requiresConnection: true,
+      reason: payload.error ?? "No connected Google account.",
+    };
+  }
+
+  triggerBlobDownload(blob, filename);
+  return {
+    url: null,
+    downloaded: true,
+    reason: payload?.error ?? `HTTP ${res.status}`,
+  };
+}