@agent-native/core 0.176.1 → 0.176.2-nightly-20260831184159

package/corpus/templates/slides/actions/update-slide.ts

@@ -15,7 +15,10 @@ import { z } from "zod";
 import { normalizeSlidePadding } from "../app/lib/normalize-slide-padding.js";
 import { getDb, schema } from "../server/db/index.js"; // ensure registerShareableResource runs
 import { notifyClients } from "../server/handlers/decks.js";
-import { createDeckVersionSnapshot } from "../server/lib/deck-versions.js";
+import {
+  createDeckVersionSnapshot,
+  deckVersionChatContextFromAction,
+} from "../server/lib/deck-versions.js";
 import {
   applySlideContentEdits,
   formatSlideHtml,
@@ -30,6 +33,11 @@ import {
   hashSlideContent,
 } from "../shared/slide-fit.js";
 import { slideLabelFor, touchAgentSlidePresence } from "./_agent-presence.js";
+import {
+  assertDeckWriteApplied,
+  deckRevisionWhere,
+  nextDeckRevision,
+} from "./_deck-write.js";
 import { withDeckLock } from "./patch-deck.js";
 
 function deckDeepLink(deckId: string): string {
@@ -94,9 +102,184 @@ function storedCreativeContext(value: unknown): {
   };
 }
 
+const unresolvedPlaceholderPattern =
+  /__[A-Za-z][A-Za-z0-9]*(?:[_ -][A-Za-z0-9]+)*__/g;
+
+function assertNoNewUnresolvedPlaceholders(
+  previousContent: string,
+  nextContent: string,
+): void {
+  const previous = new Set(previousContent.match(unresolvedPlaceholderPattern));
+  const introduced = [
+    ...new Set(nextContent.match(unresolvedPlaceholderPattern)),
+  ].filter((marker) => !previous.has(marker));
+  if (introduced.length > 0) {
+    throw new Error(
+      `Slide edit introduced unresolved placeholder content: ${introduced.join(", ")}. Re-read the slide and preserve the existing content instead of using markers as stand-ins.`,
+    );
+  }
+}
+
+function styleInvariant(content: string): string {
+  return content
+    .replace(/<style\b[^>]*>[\s\S]*?<\/style>/gi, "")
+    .replace(/\s+style\s*=\s*(?:"[^"]*"|'[^']*'|[^\s>]+)/gi, "")
+    .replace(/\s+/g, " ")
+    .trim();
+}
+
+const protectedStyleProperties = new Set([
+  "padding",
+  "padding-block",
+  "padding-block-start",
+  "padding-block-end",
+  "padding-inline",
+  "padding-inline-start",
+  "padding-inline-end",
+  "padding-top",
+  "padding-right",
+  "padding-bottom",
+  "padding-left",
+  "margin",
+  "margin-block",
+  "margin-block-start",
+  "margin-block-end",
+  "margin-inline",
+  "margin-inline-start",
+  "margin-inline-end",
+  "margin-top",
+  "margin-right",
+  "margin-bottom",
+  "margin-left",
+  "gap",
+  "row-gap",
+  "column-gap",
+  "font-family",
+  "font-size",
+  "font-style",
+  "font-weight",
+  "line-height",
+  "letter-spacing",
+  "width",
+  "height",
+  "min-width",
+  "max-width",
+  "min-height",
+  "max-height",
+  "position",
+  "top",
+  "right",
+  "bottom",
+  "left",
+  "inset",
+  "inset-block",
+  "inset-inline",
+  "display",
+  "visibility",
+  "content",
+  "opacity",
+  "overflow",
+  "overflow-x",
+  "overflow-y",
+  "white-space",
+  "word-break",
+  "overflow-wrap",
+  "flex",
+  "flex-direction",
+  "flex-wrap",
+  "flex-grow",
+  "flex-shrink",
+  "flex-basis",
+  "grid",
+  "grid-template-columns",
+  "grid-template-rows",
+  "grid-column",
+  "grid-row",
+  "align-items",
+  "align-content",
+  "align-self",
+  "justify-content",
+  "justify-items",
+  "justify-self",
+  "transform",
+  "clip",
+  "clip-path",
+  "text-indent",
+  "box-sizing",
+  "aspect-ratio",
+  "object-fit",
+  "object-position",
+]);
+
+function protectedStyleInvariant(content: string): string {
+  const styleBlocks = Array.from(
+    content.matchAll(/<style\b[^>]*>([\s\S]*?)<\/style>/gi),
+    (match) => match[1] ?? "",
+  );
+  const inlineStyles = Array.from(
+    content.matchAll(/\s+style\s*=\s*(?:"([^"]*)"|'([^']*)'|([^\s>]+))/gi),
+    (match) => match[1] ?? match[2] ?? match[3] ?? "",
+  );
+  const ruleSignatures: string[] = [];
+  for (const stylesheet of styleBlocks) {
+    const source = stylesheet.replace(/\/\*[\s\S]*?\*\//g, "");
+    for (const rule of source.matchAll(/([^{}]+)\{([^{}]*)\}/g)) {
+      const declarations = protectedCssDeclarations(rule[2]);
+      if (declarations.length > 0) {
+        ruleSignatures.push(
+          `rule:${rule[1].replace(/\s+/g, " ").trim()}{${declarations.join(";")}}`,
+        );
+      }
+    }
+  }
+  const inlineSignatures: string[] = [];
+  let inlineIndex = 0;
+  for (const style of inlineStyles) {
+    const declarations = protectedCssDeclarations(style);
+    if (declarations.length > 0) {
+      inlineSignatures.push(`inline:${inlineIndex}{${declarations.join(";")}}`);
+      inlineIndex += 1;
+    }
+  }
+  return [...ruleSignatures.sort(), ...inlineSignatures].join("|");
+}
+
+function protectedCssDeclarations(style: string): string[] {
+  const declarations: string[] = [];
+  const source = style.replace(/\/\*[\s\S]*?\*\//g, "");
+  for (const match of source.matchAll(
+    /(?:^|[;{])\s*([\w-]+)\s*:\s*([^;{}]+)/g,
+  )) {
+    const property = match[1].toLowerCase();
+    if (protectedStyleProperties.has(property) || property.startsWith("--")) {
+      declarations.push(`${property}:${match[2].replace(/\s+/g, " ").trim()}`);
+    }
+  }
+  return declarations.sort();
+}
+
+function assertStyleOnlyEdit(
+  previousContent: string,
+  nextContent: string,
+): void {
+  if (styleInvariant(previousContent) !== styleInvariant(nextContent)) {
+    throw new Error(
+      "Style-only slide edits must preserve text, markup, element order, and layout structure; use edits that change only CSS declarations",
+    );
+  }
+  if (
+    protectedStyleInvariant(previousContent) !==
+    protectedStyleInvariant(nextContent)
+  ) {
+    throw new Error(
+      "Style-only slide edits must preserve text, markup, and protected layout CSS; use edits that change only the requested visual CSS declarations",
+    );
+  }
+}
+
 export default defineAction({
   description:
-    "Atomically patch a slide's HTML like a code editor: send several exact edits against the current source, optionally format it with Prettier, and sync the result live to open editors. Prefer edits over fullContent so unrelated markup is not regenerated. Use baseContentHash from get-deck to reject stale patches. Content edits clear existing click-reveal metadata; use patch-deck with the complete animations list when the edit intentionally changes both content and reveals. Source-imported slides preserve their original images and factual copy by default. The action returns immediately after persistence; layoutFit.status=pending means the open editor will measure the new content asynchronously, and get-layout-overflows can check the returned contentHash plus layoutFitRevision later.",
+    "Atomically patch a slide's HTML like a code editor: send several exact edits against the current source, optionally format it with Prettier, and sync the result live to open editors. Use exactly one input mode: edits, legacy find/replace, or fullContent. Mixed modes are rejected and write nothing. Prefer edits over fullContent so unrelated markup is not regenerated, especially for style-only requests, reorders, or changes that must stay consistent across lists, tables, or other representations. For style-only requests, set styleOnly=true and use edits that change only the requested CSS declarations and preserve text and layout properties; the action rejects text or markup changes and fullContent in that mode. Never use unresolved placeholder markers as stand-ins for preserved content. Use baseContentHash from get-deck to reject stale patches, then re-read the targeted slide to verify every affected representation and the requested scope. Content edits clear existing click-reveal metadata; style-only CSS edits preserve it because the HTML structure remains stable. Use patch-deck with the complete animations list when a content edit intentionally changes both content and reveals. Source-imported slides preserve their original images and factual copy by default. The action returns immediately after persistence; layoutFit.status=pending means the open editor will measure the new content asynchronously, and get-layout-overflows can check the returned contentHash plus layoutFitRevision later.",
   schema: z.object({
     deckId: z.string().describe("Deck ID"),
     slideId: z.string().describe("Slide ID"),
@@ -157,6 +340,13 @@ export default defineAction({
       .describe(
         "Ordered atomic edits against the current HTML. Each edit must match unless required=false. Use expectedMatches to make ambiguity explicit.",
       ),
+    styleOnly: z
+      .boolean()
+      .optional()
+      .default(false)
+      .describe(
+        "Set true for a styling-only request. Requires edits and rejects any change outside CSS declarations, including text, markup, or layout structure.",
+      ),
     baseContentHash: z
       .string()
       .optional()
@@ -196,7 +386,7 @@ export default defineAction({
       .describe("Exact context item versions that influenced this slide edit."),
   }),
   http: false,
-  run: async (args) => {
+  run: async (args, ctx) => {
     const {
       deckId,
       slideId,
@@ -207,21 +397,35 @@ export default defineAction({
       baseContentHash,
       format,
       preserveSource,
+      styleOnly,
       contextPackId,
       contextModeOverride,
       reuseLabels,
     } = args;
-    if (!edits && find === undefined && fullContent === undefined) {
+    const hasLegacyMode = find !== undefined || replace !== undefined;
+    const inputModeCount =
+      Number(Boolean(edits)) +
+      Number(hasLegacyMode) +
+      Number(fullContent !== undefined);
+    if (inputModeCount === 0) {
       throw new Error("One of --edits, --find, or --fullContent is required");
     }
-    if (find !== undefined && find.length === 0) {
-      throw new Error("find must not be empty for legacy search/replace");
+    if (inputModeCount > 1) {
+      throw new Error(
+        "Use exactly one input mode: --edits, --find/--replace, or --fullContent; do not combine modes",
+      );
     }
-    if (edits && (find !== undefined || fullContent !== undefined)) {
+    if (styleOnly && !edits) {
       throw new Error(
-        "Use --edits instead of combining it with --find or --fullContent",
+        "Style-only slide edits require --edits and cannot use --fullContent or legacy find/replace",
       );
     }
+    if (replace !== undefined && find === undefined) {
+      throw new Error("Legacy --replace requires --find");
+    }
+    if (find !== undefined && find.length === 0) {
+      throw new Error("find must not be empty for legacy search/replace");
+    }
     await assertAccess("deck", deckId, "editor");
 
     // ─── Read-modify-write under the shared per-deck lock ───────────────────
@@ -246,6 +450,7 @@ export default defineAction({
           data: schema.decks.data,
           ownerEmail: schema.decks.ownerEmail,
           designSystemId: schema.decks.designSystemId,
+          updatedAt: schema.decks.updatedAt,
         })
         .from(schema.decks)
         .where(eq(schema.decks.id, deckId))
@@ -302,15 +507,22 @@ export default defineAction({
       // per-edit breakdown to report.
       let editResults: string[] | undefined;
       const previousContent = String(slide.content ?? "");
-
-      if (fullContent !== undefined) {
-        const nextContent = normalizeSlidePadding(fullContent);
+      const validateNextContent = (nextContent: string) => {
+        assertNoNewUnresolvedPlaceholders(previousContent, nextContent);
+        if (styleOnly) {
+          assertStyleOnlyEdit(previousContent, nextContent);
+        }
         assertSourceSlidePreserved({
           metadata: sourceImportForDeck(deck.sourceImport),
           slideId,
           nextContent,
           preserveSource,
         });
+      };
+
+      if (fullContent !== undefined) {
+        const nextContent = normalizeSlidePadding(fullContent);
+        validateNextContent(nextContent);
         slide.content = nextContent;
         applied = nextContent !== previousContent;
       } else if (edits) {
@@ -322,13 +534,10 @@ export default defineAction({
           edits as SlideContentEdit[],
           format,
         );
-        const nextContent = normalizeSlidePadding(patched.content);
-        assertSourceSlidePreserved({
-          metadata: sourceImportForDeck(deck.sourceImport),
-          slideId,
-          nextContent,
-          preserveSource,
-        });
+        const nextContent = styleOnly
+          ? patched.content
+          : normalizeSlidePadding(patched.content);
+        validateNextContent(nextContent);
         slide.content = nextContent;
         applied = patched.changed;
         editResults = patched.applied;
@@ -342,12 +551,7 @@ export default defineAction({
             previousContent.slice(0, idx) +
             (replace ?? "") +
             previousContent.slice(idx + find.length);
-          assertSourceSlidePreserved({
-            metadata: sourceImportForDeck(deck.sourceImport),
-            slideId,
-            nextContent,
-            preserveSource,
-          });
+          validateNextContent(nextContent);
           slide.content = nextContent;
           applied = nextContent !== previousContent;
         }
@@ -360,7 +564,7 @@ export default defineAction({
       // that path, so preserving the old list would reveal the wrong content.
       // patch-deck is the explicit escape hatch when content and animations
       // are intentionally revised together.
-      if (applied && Array.isArray(slide.animations)) {
+      if (applied && Array.isArray(slide.animations) && !styleOnly) {
         delete slide.animations;
       }
 
@@ -435,22 +639,31 @@ export default defineAction({
                 contextPackId: validated.contextPackId,
                 reuseLabels: mergedReuseLabels,
               };
-        await createDeckVersionSnapshot(
-          {
-            id: row.id,
-            title: row.title ?? "Untitled",
-            data: row.data ?? "",
-            ownerEmail: row.ownerEmail ?? "",
-          },
-          { label: "Before slide edit" },
-        );
-        const now = new Date().toISOString();
+        const now = nextDeckRevision(row.updatedAt);
         deck.updatedAt = now;
         await db.transaction(async (tx: any) => {
-          await tx
+          await createDeckVersionSnapshot(
+            {
+              id: row.id,
+              title: row.title ?? "Untitled",
+              data: row.data ?? "",
+              ownerEmail: row.ownerEmail ?? "",
+            },
+            {
+              force:
+                ctx?.caller === "tool" ||
+                ctx?.caller === "mcp" ||
+                ctx?.caller === "a2a",
+              chatContext: deckVersionChatContextFromAction(ctx),
+              label: "Before slide edit",
+              db: tx,
+            },
+          );
+          const updateResult = await tx
             .update(schema.decks)
             .set({ data: JSON.stringify(deck), updatedAt: now })
-            .where(eq(schema.decks.id, deckId));
+            .where(deckRevisionWhere(schema.decks, deckId, row.updatedAt));
+          assertDeckWriteApplied(updateResult, deckId, "slide edit");
           await recordGenerationCreativeContext(
             {
               appId: "slides",

package/corpus/templates/slides/app/components/deck/SlideRenderer.tsx

@@ -676,6 +676,7 @@ const STATIC_WEIGHT_GOOGLE_FONTS = [
   "Inconsolata",
   "Instrument Sans",
   "Josefin Sans",
+  "JetBrains Mono",
   "Kanit",
   "Karla",
   "Lato",
@@ -768,12 +769,12 @@ export function prepareImportedFonts(html: string): {
 } {
   const hrefs = new Set<string>();
   const rewritten = html.replace(
-    /(font-family:\s*)'([^']*)'/gi,
-    (match, prefix: string, name: string) => {
+    /(font-family:\s*)(["'])(.*?)\2/gi,
+    (match, prefix: string, quote: string, name: string) => {
       const font = resolveImportedFont(name);
       if (!font) return match;
       hrefs.add(font.href);
-      return `${prefix}'${font.family}'`;
+      return `${prefix}${quote}${font.family}${quote}`;
     },
   );
   return { html: rewritten, hrefs: [...hrefs] };
@@ -1063,9 +1064,14 @@ export function SlideInner({
   // Slides with fmd-slide markup carry their layout in the raw HTML contract;
   // render them as-is so supported semantic classes and inline styles survive.
   const content = typeof slide.content === "string" ? slide.content : "";
+  const trimmedContent = content.trimStart();
+  const isConvertedMarkdownImage =
+    /^<img\b\s+data-markdown-image(?:\s*=\s*(?:"true"|'true'|true))?(?:\s|>)/i.test(
+      trimmedContent,
+    );
   const isRawHtml =
     content.includes('class="fmd-slide"') ||
-    content.trimStart().startsWith("<") ||
+    (trimmedContent.startsWith("<") && !isConvertedMarkdownImage) ||
     ["blank", "section", "statement", "full-image"].includes(slide.layout);
 
   if (!isRawHtml && slide.layout === "two-column") {

package/corpus/templates/slides/app/components/editor/EditorActionCluster.tsx

@@ -4,7 +4,7 @@ import {
   IconCircle,
   IconLine,
   IconPlus,
-  IconShape2,
+  IconShape,
   IconSquare,
   IconTextSize,
   IconTriangle,
@@ -158,7 +158,7 @@ export function EditorActionCluster({
                       shapeMenuOpen || shapeType ? ACTIVE_CLASS : IDLE_CLASS,
                     )}
                   >
-                    <IconShape2 className="size-4" />
+                    <IconShape className="size-4" />
                   </button>
                 </PopoverTrigger>
               </TooltipTrigger>

package/corpus/templates/slides/app/components/editor/EditorToolbar.tsx

@@ -34,7 +34,7 @@ import {
   IconPlus,
   IconSquare,
   IconTextSize,
-  IconTransitionRight,
+  IconBolt,
   IconLayersSubtract,
 } from "@tabler/icons-react";
 import { useTheme } from "next-themes";
@@ -445,9 +445,9 @@ export default function EditorToolbar({
         commands.push({
           id: "element-animations",
           group: "slideTools",
-          label: t("editorToolbar.elementAnimations"),
+          label: t("animations.title"),
           keywords: ["animation", "motion", "transition"],
-          icon: IconTransitionRight,
+          icon: IconBolt,
           active: animationsOpen,
           run: onToggleAnimations,
         });
@@ -505,7 +505,7 @@ export default function EditorToolbar({
           group: "slideTools" as const,
           label: t(transition.labelKey),
           keywords: ["slide", "transition", transition.value],
-          icon: IconTransitionRight,
+          icon: IconBolt,
           active: activeSlideTransition === transition.value,
           run: () => onChangeSlideTransition(transition.value),
         })),
@@ -662,7 +662,7 @@ export default function EditorToolbar({
       <Tooltip>
         <TooltipTrigger asChild>
           <Link
-            to="/"
+            to="/home"
             className={`${TOOLBAR_ICON_BUTTON_CLASS} hover:bg-accent`}
             aria-label={t("editorToolbar.backToDecks")}
           >
@@ -754,7 +754,6 @@ export default function EditorToolbar({
           activeUsers={activeUsers ?? []}
           agentPresent={agentPresent}
           agentActive={agentActive}
-          showAgentEditingDot={false}
           currentUserEmail={currentUserEmail}
           className="flex-shrink-0 pl-2"
         />
@@ -803,8 +802,8 @@ export default function EditorToolbar({
                           : undefined
                       }
                     >
-                      <IconTransitionRight className="size-4" />
-                      {t("editorToolbar.elementAnimations")}
+                      <IconBolt className="size-4" />
+                      {t("animations.title")}
                     </DropdownMenuItem>
                   )}
                   {canEdit && currentSlide && onToggleLayers && (

package/corpus/templates/slides/app/components/editor/ImageOverlay.tsx

@@ -7,18 +7,25 @@ import {
   IconMaximize,
   IconMinimize,
 } from "@tabler/icons-react";
-import { useEffect, useRef } from "react";
+import { useEffect, useLayoutEffect, useRef, useState } from "react";
 import { createPortal } from "react-dom";
 
+import {
+  IMAGE_OBJECT_POSITION_VALUES,
+  type ImageObjectPosition,
+} from "@/lib/slide-image-replacement";
+
 interface ImageOverlayProps {
   anchorRect: DOMRect;
   src: string;
   objectFit: "cover" | "contain";
+  objectPosition: ImageObjectPosition;
   onGenerate: () => void;
   onLibrary: () => void;
   onUpload: () => void;
   onDownload: () => void;
   onToggleObjectFit: () => void;
+  onChangeObjectPosition: (objectPosition: ImageObjectPosition) => void;
   onClose: () => void;
 }
 
@@ -26,15 +33,19 @@ export default function ImageOverlay({
   anchorRect,
   src,
   objectFit,
+  objectPosition,
   onGenerate,
   onLibrary,
   onUpload,
   onDownload,
   onToggleObjectFit,
+  onChangeObjectPosition,
   onClose,
 }: ImageOverlayProps) {
   const t = useT();
   const menuRef = useRef<HTMLDivElement>(null);
+  const [menuHeight, setMenuHeight] = useState(0);
+  const isPlaceholder = src.startsWith("placeholder:");
 
   useEffect(() => {
     const handleClick = (e: MouseEvent) => {
@@ -53,6 +64,11 @@ export default function ImageOverlay({
     };
   }, [onClose]);
 
+  useLayoutEffect(() => {
+    const height = menuRef.current?.getBoundingClientRect().height;
+    if (height && height !== menuHeight) setMenuHeight(height);
+  }, [anchorRect, isPlaceholder, menuHeight, objectFit]);
+
   const menuWidth = 180;
   const vw = window.innerWidth;
   const vh = window.innerHeight;
@@ -61,13 +77,14 @@ export default function ImageOverlay({
 
   if (vw < 640) {
     left = Math.max(8, (vw - menuWidth) / 2);
-    top = Math.min(anchorRect.bottom + 8, vh - 260);
+    top = anchorRect.bottom + 8;
   } else {
     left = anchorRect.left - menuWidth - 8;
     top = anchorRect.top + anchorRect.height / 2 - 100;
     if (left < 8) left = 8;
   }
-  top = Math.max(8, Math.min(top, vh - 220));
+  const maxTop = Math.max(8, vh - (menuHeight || 220) - 8);
+  top = Math.max(8, Math.min(top, maxTop));
 
   return createPortal(
     <div
@@ -116,15 +133,64 @@ export default function ImageOverlay({
         <IconDownload className="w-3.5 h-3.5 text-muted-foreground" />
         Download
       </button>
-      <div className="mx-1.5 border-t border-border" />
-      <button onClick={onToggleObjectFit} className="image-overlay-btn">
-        {objectFit === "cover" ? (
-          <IconMinimize className="w-3.5 h-3.5 text-muted-foreground" />
-        ) : (
-          <IconMaximize className="w-3.5 h-3.5 text-muted-foreground" />
-        )}
-        Fit: {objectFit === "cover" ? "Cover" : "Contain"}
-      </button>
+      {!isPlaceholder && (
+        <>
+          <div className="mx-1.5 border-t border-border" />
+          <button onClick={onToggleObjectFit} className="image-overlay-btn">
+            {objectFit === "cover" ? (
+              <IconMinimize className="w-3.5 h-3.5 text-muted-foreground" />
+            ) : (
+              <IconMaximize className="w-3.5 h-3.5 text-muted-foreground" />
+            )}
+            Fit: {objectFit === "cover" ? "Cover" : "Contain"}
+          </button>
+          {objectFit === "cover" && (
+            <label className="image-overlay-position">
+              <span>{t("styleInspector.position")}</span>
+              <select
+                aria-label={t("styleInspector.position")}
+                value={objectPosition}
+                onChange={(event) => {
+                  const value = event.currentTarget.value;
+                  if (
+                    IMAGE_OBJECT_POSITION_VALUES.includes(
+                      value as ImageObjectPosition,
+                    )
+                  ) {
+                    onChangeObjectPosition(value as ImageObjectPosition);
+                  }
+                }}
+              >
+                <option value="left top">
+                  {t("styleInspector.top")} {t("styleInspector.left")}
+                </option>
+                <option value="center top">
+                  {t("styleInspector.top")} {t("styleInspector.center")}
+                </option>
+                <option value="right top">
+                  {t("styleInspector.top")} {t("styleInspector.right")}
+                </option>
+                <option value="left center">{t("styleInspector.left")}</option>
+                <option value="center center">
+                  {t("styleInspector.center")}
+                </option>
+                <option value="right center">
+                  {t("styleInspector.right")}
+                </option>
+                <option value="left bottom">
+                  {t("styleInspector.bottom")} {t("styleInspector.left")}
+                </option>
+                <option value="center bottom">
+                  {t("styleInspector.bottom")} {t("styleInspector.center")}
+                </option>
+                <option value="right bottom">
+                  {t("styleInspector.bottom")} {t("styleInspector.right")}
+                </option>
+              </select>
+            </label>
+          )}
+        </>
+      )}
     </div>,
     document.body,
   );