@agent-native/core 0.176.1 → 0.177.0-nightly-20260828155142

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

@@ -84,6 +84,9 @@ import {
 import {
   createPlaceholderImageTarget,
   imageFileLooksSupported,
+  imageOccurrenceInRenderedSlide,
+  normalizeImageObjectPosition,
+  type ImageObjectPosition,
   type SlideImageDropPosition,
 } from "@/lib/slide-image-replacement";
 import { TAB_ID } from "@/lib/tab-id";
@@ -555,6 +558,22 @@ function buildStyleSnapshot(
   const paddingBottom = cssPx(computed.paddingBottom);
   const parsedZIndex = Number(computed.zIndex);
   const zIndex = Number.isFinite(parsedZIndex) ? parsedZIndex : 0;
+  const isImage =
+    element.tagName === "IMG" ||
+    element.classList.contains("fmd-pptx-image") ||
+    element.getAttribute("data-pptx-element-kind") === "image";
+  const objectFit =
+    element.tagName === "IMG"
+      ? computed.objectFit === "contain"
+        ? "contain"
+        : "cover"
+      : undefined;
+  const objectPosition =
+    element.tagName === "IMG"
+      ? normalizeImageObjectPosition(
+          element.style.objectPosition || computed.objectPosition,
+        )
+      : undefined;
 
   const selectedTextStyle =
     inlineTextStyle?.scope === "selection" ? inlineTextStyle : null;
@@ -572,10 +591,9 @@ function buildStyleSnapshot(
     isText:
       element.tagName !== "IMG" &&
       (!!textPreview || element.classList.contains("fmd-text-box")),
-    isImage:
-      element.tagName === "IMG" ||
-      element.classList.contains("fmd-pptx-image") ||
-      element.getAttribute("data-pptx-element-kind") === "image",
+    isImage,
+    objectFit,
+    objectPosition,
     color:
       selectedColor === null || selectedColor === undefined
         ? normalizedColor(computed.color)
@@ -631,6 +649,7 @@ function selectionItemForElement(
   element: HTMLElement,
   runtimeSelector: string,
   snapshot?: SlideStyleSnapshot,
+  imageStyle?: Pick<SlideStyleSnapshot, "objectFit" | "objectPosition">,
 ): SlideSelectionItem {
   const identity = getSlideSelectionIdentity(element, runtimeSelector);
   return {
@@ -647,7 +666,9 @@ function selectionItemForElement(
       element instanceof HTMLImageElement
         ? (element.getAttribute("src") ?? undefined)
         : (element.querySelector("img")?.getAttribute("src") ?? undefined),
-    style: snapshot ? { ...snapshot, selector: identity.selector } : undefined,
+    style: snapshot
+      ? { ...snapshot, ...imageStyle, selector: identity.selector }
+      : undefined,
   };
 }
 
@@ -719,7 +740,16 @@ interface SlideEditorProps {
     url: string,
     position?: SlideImageDropPosition,
   ) => void;
-  onToggleObjectFit: (imgSrc: string, newFit: string) => void;
+  onToggleObjectFit: (
+    imgSrc: string,
+    newFit: "cover" | "contain",
+    imageOccurrence?: number,
+  ) => void;
+  onChangeObjectPosition: (
+    imgSrc: string,
+    objectPosition: ImageObjectPosition,
+    imageOccurrence?: number,
+  ) => void;
   /** Current user display info for cursor caret */
   collabUser?: { name: string; color: string };
   /** True briefly when AI agent is making edits */
@@ -1197,6 +1227,7 @@ export default function SlideEditor({
   onDropImage,
   onDropImageUrl,
   onToggleObjectFit,
+  onChangeObjectPosition,
   agentActive,
   slideIndex = 0,
   designSystem,
@@ -1235,6 +1266,8 @@ export default function SlideEditor({
     rect: DOMRect;
     src: string;
     objectFit: "cover" | "contain";
+    objectPosition: ImageObjectPosition;
+    imageOccurrence: number;
   } | null>(null);
   const [selectedImg, setSelectedImg] = useState<HTMLImageElement | null>(null);
   const [selectionRect, setSelectionRect] = useState<DOMRect | null>(null);
@@ -2990,10 +3023,11 @@ export default function SlideEditor({
 
   const getPlaceholderTarget = useCallback(
     (placeholder: HTMLElement): string => {
-      const slideContent = getSlideContent();
-      const placeholders = slideContent
+      const placeholders = containerRef.current
         ? Array.from(
-            slideContent.querySelectorAll<HTMLElement>(".fmd-img-placeholder"),
+            containerRef.current.querySelectorAll<HTMLElement>(
+              ".slide-content .fmd-img-placeholder",
+            ),
           )
         : [];
       const index = Math.max(0, placeholders.indexOf(placeholder));
@@ -3002,7 +3036,7 @@ export default function SlideEditor({
         placeholder.textContent?.trim() || "image",
       );
     },
-    [getSlideContent],
+    [],
   );
 
   const getImageReplacementTarget = useCallback(
@@ -5793,22 +5827,31 @@ export default function SlideEditor({
     );
   }, [multiSelection.size, multiSelectionRects, slide.id, slideIndex]);
 
+  const publishImageSelection = useCallback(
+    (
+      element: HTMLElement,
+      imageStyle?: Pick<SlideStyleSnapshot, "objectFit" | "objectPosition">,
+    ) => {
+      const selector =
+        getBuilderSelector(element) ??
+        `[data-builder-id="${ensureBuilderId(element)}"]`;
+      const snapshot = buildStyleSnapshot(element, selector);
+      syncSelectionToAppState(
+        buildSelectionState("image", [
+          selectionItemForElement(
+            element,
+            selector,
+            { ...snapshot, isImage: true },
+            imageStyle,
+          ),
+        ]),
+      );
+    },
+    [buildSelectionState],
+  );
+
   const showImageOverlay = useCallback(
     (target: HTMLElement) => {
-      const publishImageSelection = (element: HTMLElement) => {
-        const selector =
-          getBuilderSelector(element) ??
-          `[data-builder-id="${ensureBuilderId(element)}"]`;
-        const snapshot = buildStyleSnapshot(element, selector);
-        syncSelectionToAppState(
-          buildSelectionState("image", [
-            selectionItemForElement(element, selector, {
-              ...snapshot,
-              isImage: true,
-            }),
-          ]),
-        );
-      };
       if (target.tagName === "IMG") {
         const img = target as HTMLImageElement;
         const rect = img.getBoundingClientRect();
@@ -5818,8 +5861,22 @@ export default function SlideEditor({
             ? "contain"
             : "cover"
         ) as "cover" | "contain";
+        const computedStyle = window.getComputedStyle(img);
+        const position = normalizeImageObjectPosition(
+          img.style.objectPosition || computedStyle.objectPosition,
+        );
+        const imageOccurrence = imageOccurrenceInRenderedSlide(
+          containerRef.current,
+          img,
+        );
         setSelectedImg(img);
-        setImageOverlay({ rect, src, objectFit: fit });
+        setImageOverlay({
+          rect,
+          src,
+          objectFit: fit,
+          objectPosition: position,
+          imageOccurrence,
+        });
         publishImageSelection(img);
         return;
       }
@@ -5834,11 +5891,13 @@ export default function SlideEditor({
           rect,
           src: getPlaceholderTarget(placeholder),
           objectFit: "cover",
+          objectPosition: "center center",
+          imageOccurrence: 0,
         });
         publishImageSelection(placeholder);
       }
     },
-    [buildSelectionState, getPlaceholderTarget],
+    [getPlaceholderTarget, publishImageSelection],
   );
 
   // Browsers put the dragged element's outerHTML on the "text/html" data
@@ -6993,6 +7052,7 @@ export default function SlideEditor({
           anchorRect={imageOverlay.rect}
           src={imageOverlay.src}
           objectFit={imageOverlay.objectFit}
+          objectPosition={imageOverlay.objectPosition}
           onGenerate={onGenerateImage}
           onLibrary={() => onOpenAssetLibrary(imageOverlay.src)}
           onUpload={() => onUploadImage(imageOverlay.src)}
@@ -7000,8 +7060,32 @@ export default function SlideEditor({
           onToggleObjectFit={() => {
             const newFit =
               imageOverlay.objectFit === "cover" ? "contain" : "cover";
-            onToggleObjectFit(imageOverlay.src, newFit);
+            onToggleObjectFit(
+              imageOverlay.src,
+              newFit,
+              imageOverlay.imageOccurrence,
+            );
             setImageOverlay({ ...imageOverlay, objectFit: newFit });
+            if (selectedImg) {
+              publishImageSelection(selectedImg, {
+                objectFit: newFit,
+                objectPosition: imageOverlay.objectPosition,
+              });
+            }
+          }}
+          onChangeObjectPosition={(objectPosition) => {
+            onChangeObjectPosition(
+              imageOverlay.src,
+              objectPosition,
+              imageOverlay.imageOccurrence,
+            );
+            setImageOverlay({ ...imageOverlay, objectPosition });
+            if (selectedImg) {
+              publishImageSelection(selectedImg, {
+                objectFit: imageOverlay.objectFit,
+                objectPosition,
+              });
+            }
           }}
           onClose={() => setImageOverlay(null)}
         />

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

@@ -2,18 +2,10 @@ import {
   IconChevronDown,
   IconChevronRight,
   IconGripVertical,
-  IconLayersSubtract,
   IconX,
 } from "@tabler/icons-react";
 import { useState, type DragEvent } from "react";
 
-import { Button } from "@/components/ui/button";
-import {
-  Tooltip,
-  TooltipContent,
-  TooltipTrigger,
-} from "@/components/ui/tooltip";
-
 export interface SlidesLayerNode {
   id: string;
   label: string;
@@ -82,11 +74,12 @@ function LayerRow({
   return (
     <div
       role="treeitem"
+      aria-level={depth + 1}
       aria-expanded={children.length ? expanded : undefined}
       aria-selected={selected}
     >
       <div
-        className={`group flex min-h-9 items-center gap-1 rounded-md px-2 text-sm transition-colors ${selected ? "bg-accent text-accent-foreground" : "hover:bg-accent/60"} ${dragging ? "opacity-50" : ""}`}
+        className={`group flex h-8 items-center gap-1 rounded-[5px] px-2 text-xs text-foreground/90 transition-colors ${selected ? "bg-accent text-accent-foreground" : "hover:bg-accent hover:text-foreground"} ${dragging ? "opacity-50" : ""}`}
         style={{ paddingLeft: `${8 + depth * 16}px` }}
         onDragOver={(event) => event.preventDefault()}
         onDragEnter={() => setDragging(true)}
@@ -96,14 +89,14 @@ function LayerRow({
         {children.length ? (
           <button
             type="button"
-            className="rounded p-0.5 text-muted-foreground hover:text-foreground"
+            className="rounded-sm p-0.5 text-muted-foreground outline-none hover:text-foreground focus-visible:ring-1 focus-visible:ring-ring"
             aria-label={expanded ? labels.collapse : labels.expand}
             onClick={() => setExpanded((value) => !value)}
           >
             {expanded ? (
-              <IconChevronDown size={15} />
+              <IconChevronDown size={16} />
             ) : (
-              <IconChevronRight size={15} />
+              <IconChevronRight size={16} />
             )}
           </button>
         ) : (
@@ -112,7 +105,7 @@ function LayerRow({
         <button
           type="button"
           draggable
-          className="flex min-w-0 flex-1 items-center gap-2 py-1.5 text-left"
+          className="flex min-w-0 flex-1 items-center gap-2 py-0.5 text-left outline-none focus-visible:ring-1 focus-visible:ring-ring"
           onDragStart={(event) => {
             event.dataTransfer.setData("text/plain", node.id);
             event.dataTransfer.effectAllowed = "move";
@@ -126,7 +119,7 @@ function LayerRow({
           }
         >
           <IconGripVertical
-            size={15}
+            size={14}
             className="shrink-0 text-muted-foreground/60"
             aria-hidden="true"
           />
@@ -162,31 +155,24 @@ export function SlidesLayersPanel({
 }: SlidesLayersPanelProps) {
   return (
     <aside
-      className="flex h-full w-64 flex-col border-l border-border bg-background"
+      className="flex h-full w-72 min-w-0 flex-col bg-background"
       aria-label={labels.title}
     >
-      <header className="flex h-11 items-center justify-between border-b border-border px-3">
-        <div className="flex items-center gap-2 text-sm font-medium">
-          <IconLayersSubtract size={16} aria-hidden="true" />
+      <header className="flex h-14 shrink-0 items-center justify-between border-b border-border px-4">
+        <h2 className="text-sm font-semibold text-foreground">
           {labels.title}
-        </div>
-        <Tooltip>
-          <TooltipTrigger asChild>
-            <Button
-              variant="ghost"
-              size="icon"
-              className="size-7"
-              onClick={onClose}
-              aria-label={labels.close}
-            >
-              <IconX size={16} />
-            </Button>
-          </TooltipTrigger>
-          <TooltipContent>{labels.close}</TooltipContent>
-        </Tooltip>
+        </h2>
+        <button
+          type="button"
+          className="rounded-md p-1.5 text-muted-foreground hover:bg-accent hover:text-foreground"
+          onClick={onClose}
+          aria-label={labels.close}
+        >
+          <IconX className="size-4" />
+        </button>
       </header>
       <div
-        className="min-h-0 flex-1 overflow-y-auto p-2"
+        className="min-h-0 flex-1 overflow-y-auto py-2"
         role="tree"
         aria-label={labels.title}
       >

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

@@ -11,6 +11,8 @@ export interface SlideStyleSnapshot {
   textPreview: string;
   isText: boolean;
   isImage: boolean;
+  objectFit?: "cover" | "contain";
+  objectPosition?: string;
   isAbsolute: boolean;
   x: number;
   y: number;

package/corpus/templates/slides/app/global.css

@@ -1153,6 +1153,8 @@ button[title="Open agent sidebar"] {
   display: flex;
   flex-direction: column;
   gap: 2px;
+  max-height: calc(100vh - 16px);
+  overflow-y: auto;
   animation: overlay-fade-in 0.12s ease-out;
 }
 
@@ -1217,6 +1219,39 @@ button[title="Open agent sidebar"] {
   color: hsl(var(--popover-foreground));
 }
 
+.image-overlay-position {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 8px 14px;
+  border-radius: 8px;
+  font-size: 13px;
+  font-weight: 500;
+  color: hsl(var(--popover-foreground) / 0.8);
+}
+
+.image-overlay-position:hover,
+.image-overlay-position:focus-within {
+  background: hsl(var(--accent));
+  color: hsl(var(--popover-foreground));
+}
+
+.image-overlay-position select {
+  min-width: 0;
+  flex: 1;
+  border: 0;
+  outline: none;
+  background: transparent;
+  color: inherit;
+  font: inherit;
+  cursor: pointer;
+}
+
+.image-overlay-position option {
+  background: hsl(var(--popover));
+  color: hsl(var(--popover-foreground));
+}
+
 /* ─── Inline Slide Editor (TipTap) ─── */
 
 .slide-tiptap-editor {

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

@@ -311,13 +311,144 @@ function cleanNode(
   return out;
 }
 
+/**
+ * Elements whose unclosed start tag swallows the rest of the document in a real
+ * parser. `embed` is deliberately absent: it is void, so it never has a closing
+ * tag and requiring one would truncate every slide that contains a valid one.
+ */
+const SWALLOWING_ELEMENTS = /^(script|style|textarea|iframe|object|svg|math)$/i;
+
+/** Elements whose children the HTML parser reads as text rather than markup. */
+const RAW_TEXT_ELEMENTS = /^(script|style|textarea|title)$/i;
+
+/**
+ * Start-tag positions in `html`, skipping comments and anything inside a quoted
+ * attribute value.
+ *
+ * Scanning the serialized string with a bare regex cannot tell a tag from text:
+ * `<p title="Use <style> here">` reads as a `<style>` start tag, and truncating
+ * there drops the rest of a perfectly valid slide.
+ */
+function startTagPositions(
+  html: string,
+): { name: string; index: number; end: number }[] {
+  const found: { name: string; index: number; end: number }[] = [];
+  for (let i = 0; i < html.length; i++) {
+    if (html[i] !== "<") continue;
+    if (html.startsWith("<!--", i)) {
+      const end = html.indexOf("-->", i + 4);
+      i = end === -1 ? html.length : end + 2;
+      continue;
+    }
+    const name = /^<([a-z][a-z0-9-]*)/i.exec(html.slice(i, i + 32))?.[1];
+    // Walk to this tag's `>`, stepping over quoted values so a `<` or `>`
+    // inside one is not read as markup.
+    let cursor = i + 1;
+    let quote = "";
+    while (cursor < html.length) {
+      const char = html[cursor];
+      if (quote) {
+        if (char === quote) quote = "";
+      } else if (char === '"' || char === "'") {
+        quote = char;
+      } else if (char === ">") {
+        break;
+      }
+      cursor++;
+    }
+    if (!name) {
+      i = cursor;
+      continue;
+    }
+    const lower = name.toLowerCase();
+    found.push({ name: lower, index: i, end: cursor });
+    if (RAW_TEXT_ELEMENTS.test(lower)) {
+      // A raw-text element's body is text, not markup — `content: "<script>"`
+      // inside a stylesheet is a CSS string, and reading it as a start tag
+      // truncated everything after it. Skip to the close tag; no close tag is
+      // the unclosed case the caller is looking for, and everything past it is
+      // swallowed anyway, so there is nothing further to find.
+      const closing = new RegExp(`</\\s*${lower}\\s*>`, "i").exec(
+        html.slice(cursor),
+      );
+      if (!closing) return found;
+      i = cursor + closing.index + closing[0].length - 1;
+      continue;
+    }
+    i = cursor;
+  }
+  return found;
+}
+
+/**
+ * Truncates at the first swallowing element that never closes.
+ *
+ * The regex path has to drop the remainder to agree with `cleanNode`. It must
+ * check for the closing tag to do that: the sweep used to match any of these
+ * tags and cut to the end of the string unconditionally, which ate the
+ * sanitized `<style>` block the pass above it had just emitted — and every
+ * heading and paragraph after it. A deck with one stylesheet rendered as an
+ * empty slide on the SSR'd share and present pages.
+ */
+function dropFromFirstUnclosedRawText(html: string): string {
+  for (const { name, index } of startTagPositions(html)) {
+    if (!SWALLOWING_ELEMENTS.test(name)) continue;
+    const closing = new RegExp(`</\\s*${name}\\s*>`, "i");
+    if (!closing.test(html.slice(index))) return html.slice(0, index);
+  }
+  return html;
+}
+
+/**
+ * Rewrites `/` attribute separators inside start tags as spaces.
+ *
+ * `/` is a legal separator between attributes, so `<img src="x"/onerror="…">`
+ * is an image with a live handler — and every attribute scrub below is anchored
+ * on whitespace, so none of them matched it. Normalizing here rather than
+ * widening each scrub to `[\s/]+` is what keeps a legitimate value intact: a
+ * URL like `https://cdn.example/onerror=logo.png` lives inside quotes, and this
+ * only touches separators outside them.
+ */
+function normalizeTagAttributeSeparators(html: string): string {
+  const tags = startTagPositions(html);
+  if (!tags.length) return html;
+  let out = "";
+  let copied = 0;
+  for (const { index, end } of tags) {
+    // Start after the tag name so `</p>` and the opening `<` are untouched.
+    const nameEnd = /^<[a-z][a-z0-9-]*/i.exec(html.slice(index, end))?.[0]
+      .length;
+    if (nameEnd === undefined) continue;
+    const from = index + nameEnd;
+    let region = "";
+    let quote = "";
+    for (let i = from; i < end; i++) {
+      const char = html[i];
+      if (quote) {
+        if (char === quote) quote = "";
+        region += char;
+      } else if (char === '"' || char === "'") {
+        quote = char;
+        region += char;
+      } else if (char === "/") {
+        region += " ";
+      } else {
+        region += char;
+      }
+    }
+    out += html.slice(copied, from) + region;
+    copied = end;
+  }
+  return out + html.slice(copied);
+}
+
 function sanitizeHtmlString(
   html: string,
   scopeSelector?: string,
   allowBlobImages = false,
 ): string {
   return (
-    html
+    normalizeTagAttributeSeparators(html)
       .replace(/<style\b[^>]*>([\s\S]*?)<\/\s*style\s*>/gi, (_match, css) => {
         const safeCss = sanitizeStyleSheet(String(css), scopeSelector);
         return safeCss
@@ -335,10 +466,7 @@ function sanitizeHtmlString(
       // twin runs instead of cleanNode(). An unclosed raw-text or embedding
       // element swallows the rest of the document in a real parser, so dropping
       // the remainder is what keeps this path agreeing with the DOM path.
-      .replace(
-        /<(script|style|textarea|iframe|object|embed|svg|math)\b[\s\S]*$/i,
-        "",
-      )
+      .replace(/[\s\S]*/, dropFromFirstUnclosedRawText)
       .replace(
         /<(script|iframe|object|embed|form|input|button|select|textarea|meta|base|link|svg|math)\b[^>]*\/?>/gi,
         "",