@agent-native/core 0.85.7 → 0.86.1

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

@@ -2,10 +2,13 @@ import { agentChat } from "@agent-native/core";
 import {
   AgentPresenceChip,
   agentNativePath,
+  RecentEditHighlights,
   sendToAgentChat,
+  setClientAppState,
   usePinchZoom,
   useT,
   useAvatarUrl,
+  type AttributedRecentEdit,
   type CollabUser,
 } from "@agent-native/core/client";
 import { appStateKeyForBrowserTab } from "@shared/app-state-tabs";
@@ -23,8 +26,6 @@ import {
   type MouseEvent as ReactMouseEvent,
 } from "react";
 import { createPortal } from "react-dom";
-import type { Awareness } from "y-protocols/awareness";
-import type * as Y from "yjs";
 
 import { ExcalidrawSlide } from "@/components/deck/ExcalidrawSlide";
 import SlideRenderer from "@/components/deck/SlideRenderer";
@@ -56,8 +57,12 @@ import { enterSelectionMode } from "@/root";
 
 import type { DesignSystemData } from "../../../shared/api";
 import { BlockBubbleMenu } from "./BlockBubbleMenu";
-import CodeEditor from "./CodeEditor";
 import ImageOverlay from "./ImageOverlay";
+import {
+  SlideStyleInspector,
+  type SlideStylePatch,
+  type SlideStyleSnapshot,
+} from "./SlideStyleInspector";
 import { SpeakerNotesPanel } from "./SpeakerNotesPanel";
 
 let builderIdCounter = 0;
@@ -197,6 +202,147 @@ function stripBuilderIds(html: string): string {
   return cleaned.replace(/\s*data-builder-id="[^"]*"/g, "");
 }
 
+function cssPx(value: string): number {
+  const parsed = Number.parseFloat(value);
+  return Number.isFinite(parsed) ? parsed : 0;
+}
+
+function normalizedColor(value: string): string {
+  return value === "rgba(0, 0, 0, 0)" ? "transparent" : value;
+}
+
+function normalizedFontWeight(value: string): string {
+  if (value === "normal") return "400";
+  if (value === "bold") return "700";
+  const parsed = Number.parseInt(value, 10);
+  if (!Number.isFinite(parsed)) return "400";
+  if (parsed >= 700) return "700";
+  if (parsed >= 600) return "600";
+  if (parsed >= 500) return "500";
+  return "400";
+}
+
+function normalizedTextAlign(value: string): string {
+  if (value === "start") return "left";
+  if (value === "end") return "right";
+  return ["left", "center", "right", "justify"].includes(value)
+    ? value
+    : "left";
+}
+
+function stylePropertyName(property: string): string {
+  return property.replace(/[A-Z]/g, (letter) => `-${letter.toLowerCase()}`);
+}
+
+function elementPathFromRoot(
+  root: HTMLElement,
+  element: HTMLElement,
+): number[] {
+  const path: number[] = [];
+  let current: HTMLElement | null = element;
+  while (current && current !== root) {
+    const parent: HTMLElement | null = current.parentElement;
+    if (!parent) return [];
+    path.unshift(Array.prototype.indexOf.call(parent.children, current));
+    current = parent;
+  }
+  return path;
+}
+
+function resolveElementPath(
+  root: HTMLElement | null,
+  path: number[],
+): HTMLElement | null {
+  let current: Element | null = root;
+  for (const index of path) {
+    if (!current?.children[index]) return null;
+    current = current.children[index];
+  }
+  return current instanceof HTMLElement ? current : null;
+}
+
+function buildStyleSnapshot(
+  element: HTMLElement,
+  selector: string,
+): SlideStyleSnapshot {
+  const computed = window.getComputedStyle(element);
+  const textPreview = (element.textContent ?? "").trim().slice(0, 80);
+  const fontSize = cssPx(computed.fontSize);
+  const rawLineHeight = cssPx(computed.lineHeight);
+  const lineHeight =
+    rawLineHeight > 0 && fontSize > 0
+      ? Number((rawLineHeight / fontSize).toFixed(2))
+      : 1.2;
+  const paddingLeft = cssPx(computed.paddingLeft);
+  const paddingRight = cssPx(computed.paddingRight);
+  const paddingTop = cssPx(computed.paddingTop);
+  const paddingBottom = cssPx(computed.paddingBottom);
+
+  return {
+    selector,
+    label: element.getAttribute("aria-label") || element.tagName.toLowerCase(),
+    tagName: element.tagName.toLowerCase(),
+    textPreview,
+    isText: element.tagName !== "IMG" && !!textPreview,
+    isImage: element.tagName === "IMG",
+    color: normalizedColor(computed.color),
+    backgroundColor: normalizedColor(computed.backgroundColor),
+    fontSize,
+    fontWeight: normalizedFontWeight(computed.fontWeight),
+    lineHeight,
+    textAlign: normalizedTextAlign(computed.textAlign),
+    opacity: Math.round(Number(computed.opacity || 1) * 100),
+    borderRadius: cssPx(computed.borderTopLeftRadius),
+    borderWidth: cssPx(computed.borderTopWidth),
+    borderColor: normalizedColor(computed.borderTopColor),
+    paddingX: Math.round((paddingLeft + paddingRight) / 2),
+    paddingY: Math.round((paddingTop + paddingBottom) / 2),
+  };
+}
+
+interface SlideSelectionItem {
+  selector: string;
+  text?: string;
+  kind?: string;
+  tagName?: string;
+  imageSrc?: string;
+  style?: Partial<SlideStyleSnapshot>;
+}
+
+interface SlidesSelectionState {
+  deckId?: string;
+  slideId: string;
+  slideIndex: number;
+  slideNumber: number;
+  mode: "single" | "multi" | "image" | "editing";
+  activeTool?: "select" | "draw" | "pin";
+  items: SlideSelectionItem[];
+}
+
+function syncSelectionToAppState(state: SlidesSelectionState | null) {
+  const slidesKeys = [
+    appStateKeyForBrowserTab("slides-selection", TAB_ID),
+    "slides-selection",
+  ];
+  const genericKeys = [
+    appStateKeyForBrowserTab("selection", TAB_ID),
+    "selection",
+  ];
+  for (const key of slidesKeys) {
+    setClientAppState(key, state, {
+      keepalive: true,
+      requestSource: TAB_ID,
+    }).catch(() => {});
+  }
+  const generic = state ? { items: state.items } : null;
+  for (const key of genericKeys) {
+    setClientAppState(key, generic, {
+      keepalive: true,
+      requestSource: TAB_ID,
+    }).catch(() => {});
+  }
+}
+
 interface SlideEditorProps {
   slide: Slide;
   onUpdateSlide: (
@@ -207,7 +353,6 @@ interface SlideEditorProps {
    *  navigable but contentEditable / image overlays don't activate.
    *  Mirrors Google Slides' viewer experience. */
   readOnly?: boolean;
-  activeTab: "visual" | "code";
   onGenerateImage: () => void;
   onOpenAssetLibrary: (replaceSrc: string) => void;
   onUploadImage: (replaceSrc: string) => void;
@@ -219,14 +364,13 @@ interface SlideEditorProps {
     position?: { x: number; y: number },
   ) => void;
   onToggleObjectFit: (imgSrc: string, newFit: string) => void;
-  /** Yjs document for collaborative editing */
-  ydoc?: Y.Doc | null;
-  /** Yjs Awareness for cursor/presence sync */
-  awareness?: Awareness | null;
   /** Current user display info for cursor caret */
   collabUser?: { name: string; color: string };
   /** True briefly when AI agent is making edits */
   agentActive?: boolean;
+  /** Lingering recent edits (e.g. agent edits) to highlight over the canvas
+   *  when they target the currently-active slide. */
+  recentEdits?: AttributedRecentEdit[];
   /** Called when the user selects text and clicks the comment button */
   onComment?: (quotedText: string) => void;
   /** Zero-based index of the current slide */
@@ -351,6 +495,47 @@ function ImageSelectionOutline({ rect }: { rect: DOMRect }) {
   );
 }
 
+function ElementSelectionOutline({ rect }: { rect: DOMRect }) {
+  const pad = 2;
+  const handle = 7;
+  const handleClass =
+    "absolute size-[7px] rounded-sm border border-background bg-[#609FF8] shadow-sm";
+  return createPortal(
+    <div
+      style={{
+        position: "fixed",
+        top: rect.top - pad,
+        left: rect.left - pad,
+        width: rect.width + pad * 2,
+        height: rect.height + pad * 2,
+        pointerEvents: "none",
+        zIndex: 51,
+        border: "1.5px solid #609FF8",
+        borderRadius: 3,
+        boxShadow: "0 0 0 1px rgba(96, 159, 248, 0.2)",
+      }}
+    >
+      <span
+        className={handleClass}
+        style={{ left: -handle / 2, top: -handle / 2 }}
+      />
+      <span
+        className={handleClass}
+        style={{ right: -handle / 2, top: -handle / 2 }}
+      />
+      <span
+        className={handleClass}
+        style={{ left: -handle / 2, bottom: -handle / 2 }}
+      />
+      <span
+        className={handleClass}
+        style={{ right: -handle / 2, bottom: -handle / 2 }}
+      />
+    </div>,
+    document.body,
+  );
+}
+
 /** Outline rendered around a multi-select element */
 function MultiSelectOutline({ rect }: { rect: DOMRect }) {
   const pad = 1;
@@ -411,33 +596,6 @@ function rectsIntersect(
   );
 }
 
-/**
- * Push the multi-selection to application_state under "selection" so the
- * agent can read it. Empty array clears the key entirely.
- */
-function syncSelectionToAppState(
-  items: Array<{ selector: string; text: string }>,
-) {
-  const url = agentNativePath("/_agent-native/application-state/selection");
-  if (items.length === 0) {
-    fetch(url, {
-      method: "DELETE",
-      keepalive: true,
-      headers: { "X-Request-Source": TAB_ID },
-    }).catch(() => {});
-    return;
-  }
-  fetch(url, {
-    method: "PUT",
-    keepalive: true,
-    headers: {
-      "Content-Type": "application/json",
-      "X-Request-Source": TAB_ID,
-    },
-    body: JSON.stringify({ items }),
-  }).catch(() => {});
-}
-
 /**
  * Push the current slide's vertical-fit measurement to application_state.
  * Browser-tab requests read the tab-scoped key; the legacy global key stays
@@ -494,7 +652,6 @@ export default function SlideEditor({
   slide,
   onUpdateSlide,
   readOnly = false,
-  activeTab,
   onGenerateImage,
   onOpenAssetLibrary,
   onUploadImage,
@@ -516,6 +673,7 @@ export default function SlideEditor({
   deckId,
   onInlineEditStart,
   presentUsers = [],
+  recentEdits = [],
 }: SlideEditorProps) {
   const t = useT();
   const content = typeof slide.content === "string" ? slide.content : "";
@@ -534,6 +692,27 @@ export default function SlideEditor({
   const [selectionRect, setSelectionRect] = useState<DOMRect | null>(null);
   const containerRef = useRef<HTMLDivElement>(null);
   const scrollContainerRef = useRef<HTMLDivElement>(null);
+  // Wraps the rendered slide; used as the positioning container for the
+  // lingering "AI edited" ring when the active slide was just edited.
+  const slideCanvasRef = useRef<HTMLDivElement>(null);
+
+  // Recent edits (usually the agent's) that target THIS slide. The ring is
+  // drawn around the whole canvas since a slide-level `slides.<id>` descriptor
+  // refers to the entire slide.
+  const activeSlideId = slideId || slide.id;
+  const activeSlideEdits = recentEdits.filter((edit) => {
+    const d = edit.descriptor;
+    return (
+      d.kind === "paths" &&
+      Array.isArray(d.paths) &&
+      d.paths.some((p) => p === `slides.${activeSlideId}`)
+    );
+  });
+  const resolveCanvasRect = useCallback(
+    (): DOMRect | null =>
+      slideCanvasRef.current?.getBoundingClientRect() ?? null,
+    [],
+  );
 
   // --- Multi-select state ---
   /** Set of data-builder-id values currently in the multi-select */
@@ -544,6 +723,16 @@ export default function SlideEditor({
   const [multiSelectionRects, setMultiSelectionRects] = useState<
     Map<string, { rect: DOMRect; text: string; selector: string }>
   >(() => new Map());
+  const [selectedElementPath, setSelectedElementPath] = useState<
+    number[] | null
+  >(null);
+  const [selectedElementSelector, setSelectedElementSelector] = useState<
+    string | null
+  >(null);
+  const [selectedElementRect, setSelectedElementRect] =
+    useState<DOMRect | null>(null);
+  const [selectedStyleSnapshot, setSelectedStyleSnapshot] =
+    useState<SlideStyleSnapshot | null>(null);
   /** Anchor rect for the floating chip (the slide canvas) */
   const [chipAnchorRect, setChipAnchorRect] = useState<DOMRect | null>(null);
   /** Active marquee rectangle (viewport coords). null = not dragging. */
@@ -607,10 +796,16 @@ export default function SlideEditor({
       const horizontalPadding =
         (parseFloat(trackStyle?.paddingLeft ?? "0") || 0) +
         (parseFloat(trackStyle?.paddingRight ?? "0") || 0);
+      const verticalPadding =
+        (parseFloat(trackStyle?.paddingTop ?? "0") || 0) +
+        (parseFloat(trackStyle?.paddingBottom ?? "0") || 0);
       const nextFitZoom = computeCanvasFitZoom({
         viewportWidth: scrollContainer.clientWidth,
+        viewportHeight: scrollContainer.clientHeight,
         canvasWidth: dims.width,
+        canvasHeight: dims.height,
         horizontalPadding,
+        verticalPadding,
       });
 
       setFitCanvasZoom(nextFitZoom);
@@ -756,6 +951,78 @@ export default function SlideEditor({
     [readCurrentSlideContentHtml, slide.id],
   );
 
+  /** Resolve the slide-content root element (where selectable items live) */
+  const getSlideContent = useCallback((): HTMLElement | null => {
+    return (
+      (containerRef.current?.querySelector(
+        ".slide-content",
+      ) as HTMLElement | null) || null
+    );
+  }, []);
+
+  const resolveSelectedElement = useCallback((): HTMLElement | null => {
+    if (!selectedElementPath) return null;
+    return resolveElementPath(getSlideContent(), selectedElementPath);
+  }, [getSlideContent, selectedElementPath]);
+
+  const buildSelectionState = useCallback(
+    (
+      mode: SlidesSelectionState["mode"],
+      items: SlideSelectionItem[],
+      activeTool: SlidesSelectionState["activeTool"] = drawMode
+        ? "draw"
+        : pinMode
+          ? "pin"
+          : "select",
+    ): SlidesSelectionState => ({
+      deckId,
+      slideId: slide.id,
+      slideIndex,
+      slideNumber: slideIndex + 1,
+      mode,
+      activeTool,
+      items,
+    }),
+    [deckId, drawMode, pinMode, slide.id, slideIndex],
+  );
+
+  const clearSelectedElement = useCallback(() => {
+    setSelectedElementPath(null);
+    setSelectedElementSelector(null);
+    setSelectedElementRect(null);
+    setSelectedStyleSnapshot(null);
+  }, []);
+
+  const selectElementForStyling = useCallback(
+    (element: HTMLElement, selector: string) => {
+      const slideContent = getSlideContent();
+      if (!slideContent) return;
+      const path = elementPathFromRoot(slideContent, element);
+      if (path.length === 0) return;
+      const snapshot = buildStyleSnapshot(element, selector);
+      setSelectedElementPath(path);
+      setSelectedElementSelector(selector);
+      setSelectedElementRect(element.getBoundingClientRect());
+      setSelectedStyleSnapshot(snapshot);
+      syncSelectionToAppState(
+        buildSelectionState(snapshot.isImage ? "image" : "single", [
+          {
+            selector,
+            kind: snapshot.isImage ? "image" : "element",
+            tagName: snapshot.tagName,
+            text: snapshot.textPreview,
+            imageSrc:
+              element instanceof HTMLImageElement
+                ? (element.getAttribute("src") ?? undefined)
+                : undefined,
+            style: snapshot,
+          },
+        ]),
+      );
+    },
+    [buildSelectionState, getSlideContent],
+  );
+
   /** Exit edit mode, saving changes to slide.content */
   const exitInlineEdit = useCallback(() => {
     setEditingEl((el) => {
@@ -768,6 +1035,7 @@ export default function SlideEditor({
         onUpdateSlideRef.current({ content: html });
       }
       inlineEditDraftRef.current = null;
+      syncSelectionToAppState(null);
       return null;
     });
   }, [readCurrentSlideContentHtml]);
@@ -775,8 +1043,10 @@ export default function SlideEditor({
   /** Enter edit mode on a smart block (text leaf or smart group) */
   const enterInlineEdit = useCallback(
     (el: HTMLElement) => {
+      const selector = getBuilderSelector(el);
       el.contentEditable = "true";
       el.setAttribute("data-editing-block", "true");
+      clearSelectedElement();
       captureInlineEditDraft(slide.id);
       // Mark the deck dirty immediately so SSE/poll refreshes do not replace
       // the deck under an active contentEditable edit, even before the user
@@ -789,8 +1059,26 @@ export default function SlideEditor({
       // browsers, so it's safe to keep for keyboard delivery.
       el.focus({ preventScroll: true });
       setEditingEl(el);
+      if (selector) {
+        syncSelectionToAppState(
+          buildSelectionState("editing", [
+            {
+              selector,
+              kind: "text",
+              tagName: el.tagName.toLowerCase(),
+              text: (el.textContent ?? "").trim().slice(0, 200),
+            },
+          ]),
+        );
+      }
     },
-    [captureInlineEditDraft, onInlineEditStart, slide.id],
+    [
+      buildSelectionState,
+      captureInlineEditDraft,
+      clearSelectedElement,
+      onInlineEditStart,
+      slide.id,
+    ],
   );
 
   // Exit edit mode when switching slides — save pending content first so
@@ -891,6 +1179,50 @@ export default function SlideEditor({
     };
   }, [selectedImg]);
 
+  useEffect(() => {
+    if (!selectedElementPath || !selectedElementSelector) return;
+    const update = () => {
+      const element = resolveSelectedElement();
+      if (!element) {
+        clearSelectedElement();
+        syncSelectionToAppState(null);
+        return;
+      }
+      const snapshot = buildStyleSnapshot(element, selectedElementSelector);
+      setSelectedElementRect(element.getBoundingClientRect());
+      setSelectedStyleSnapshot(snapshot);
+      syncSelectionToAppState(
+        buildSelectionState(snapshot.isImage ? "image" : "single", [
+          {
+            selector: selectedElementSelector,
+            kind: snapshot.isImage ? "image" : "element",
+            tagName: snapshot.tagName,
+            text: snapshot.textPreview,
+            imageSrc:
+              element instanceof HTMLImageElement
+                ? (element.getAttribute("src") ?? undefined)
+                : undefined,
+            style: snapshot,
+          },
+        ]),
+      );
+    };
+    update();
+    window.addEventListener("resize", update);
+    window.addEventListener("scroll", update, true);
+    return () => {
+      window.removeEventListener("resize", update);
+      window.removeEventListener("scroll", update, true);
+    };
+  }, [
+    buildSelectionState,
+    clearSelectedElement,
+    resolveSelectedElement,
+    selectedElementPath,
+    selectedElementSelector,
+    slide.content,
+  ]);
+
   // Deselect when clicking outside
   useEffect(() => {
     if (!selectedImg) return;
@@ -928,15 +1260,6 @@ export default function SlideEditor({
 
   // --- Multi-select helpers ---
 
-  /** Resolve the slide-content root element (where selectable items live) */
-  const getSlideContent = useCallback((): HTMLElement | null => {
-    return (
-      (containerRef.current?.querySelector(
-        ".slide-content",
-      ) as HTMLElement | null) || null
-    );
-  }, []);
-
   /**
    * Apply a new multi-selection: caches rects + selectors and pushes to
    * application_state. Pass an empty set to clear.
@@ -948,7 +1271,7 @@ export default function SlideEditor({
         string,
         { rect: DOMRect; text: string; selector: string }
       >();
-      const items: Array<{ selector: string; text: string }> = [];
+      const items: SlideSelectionItem[] = [];
       if (slideContent) {
         ids.forEach((id) => {
           const el = slideContent.querySelector(
@@ -958,19 +1281,27 @@ export default function SlideEditor({
           const selector = `[data-builder-id="${id}"]`;
           const text = (el.textContent || "").trim().slice(0, 200);
           rects.set(id, { rect: el.getBoundingClientRect(), text, selector });
-          items.push({ selector, text });
+          items.push({
+            selector,
+            text,
+            kind: el.tagName === "IMG" ? "image" : "element",
+            tagName: el.tagName.toLowerCase(),
+          });
         });
       }
       setMultiSelection(ids);
       setMultiSelectionRects(rects);
+      if (ids.size > 0) clearSelectedElement();
       // Anchor the chip to the slide canvas (clickable wrapper)
       const canvas = containerRef.current?.querySelector(
         ".slide-image-clickable",
       ) as HTMLElement | null;
       setChipAnchorRect(canvas?.getBoundingClientRect() || null);
-      syncSelectionToAppState(items);
+      syncSelectionToAppState(
+        items.length > 0 ? buildSelectionState("multi", items) : null,
+      );
     },
-    [getSlideContent],
+    [buildSelectionState, clearSelectedElement, getSlideContent],
   );
 
   const clearMultiSelection = useCallback(() => {
@@ -1048,8 +1379,9 @@ export default function SlideEditor({
     setMultiSelection(new Set());
     setMultiSelectionRects(new Map());
     setChipAnchorRect(null);
-    syncSelectionToAppState([]);
-  }, [slide.id]);
+    clearSelectedElement();
+    syncSelectionToAppState(null);
+  }, [clearSelectedElement, slide.id]);
 
   // Escape key clears multi-selection (only when not inline-editing)
   useEffect(() => {
@@ -1084,6 +1416,18 @@ export default function SlideEditor({
     [],
   );
 
+  const findSelectableElement = useCallback(
+    (target: HTMLElement, slideContent: HTMLElement): HTMLElement | null => {
+      let el: HTMLElement | null = target;
+      while (el && slideContent.contains(el) && el !== slideContent) {
+        if (el.getAttribute("data-builder-id")) return el;
+        el = el.parentElement;
+      }
+      return null;
+    },
+    [],
+  );
+
   /** True if the click is on "whitespace" inside the slide (not on any leaf) */
   const isSlideWhitespaceTarget = useCallback(
     (target: HTMLElement, slideContent: HTMLElement): boolean => {
@@ -1120,8 +1464,12 @@ export default function SlideEditor({
 
       // Clear single-select feedback when starting a marquee on whitespace
       // (non-additive). Additive marquee preserves the existing selection.
-      if (!marqueeAdditiveRef.current && multiSelection.size > 0) {
-        applyMultiSelection(new Set());
+      if (!marqueeAdditiveRef.current) {
+        clearSelectedElement();
+        syncSelectionToAppState(null);
+        if (multiSelection.size > 0) {
+          applyMultiSelection(new Set());
+        }
       }
     },
     [
@@ -1130,6 +1478,7 @@ export default function SlideEditor({
       isSlideWhitespaceTarget,
       multiSelection,
       applyMultiSelection,
+      clearSelectedElement,
     ],
   );
 
@@ -1294,6 +1643,8 @@ export default function SlideEditor({
       // with zero movement won't trigger pointerup with a real rect).
       if (slideContent && isSlideWhitespaceTarget(target, slideContent)) {
         if (multiSelection.size > 0) clearMultiSelection();
+        clearSelectedElement();
+        syncSelectionToAppState(null);
         return;
       }
 
@@ -1304,8 +1655,12 @@ export default function SlideEditor({
       showImageOverlay(target);
 
       // Send style-editing postMessage with a unique selector for the clicked element
-      const selector = getBuilderSelector(target);
-      if (selector) {
+      const selectableEl = slideContent
+        ? findSelectableElement(target, slideContent)
+        : null;
+      const selector = selectableEl ? getBuilderSelector(selectableEl) : null;
+      if (selector && selectableEl) {
+        selectElementForStyling(selectableEl, selector);
         enterSelectionMode("agentNative.enterStyleEditing", { selector });
       }
     },
@@ -1314,10 +1669,13 @@ export default function SlideEditor({
       editingEl,
       getSlideContent,
       findSelectableId,
+      findSelectableElement,
       isSlideWhitespaceTarget,
       multiSelection,
       applyMultiSelection,
       clearMultiSelection,
+      clearSelectedElement,
+      selectElementForStyling,
     ],
   );
 
@@ -1332,6 +1690,57 @@ export default function SlideEditor({
     [showImageOverlay],
   );
 
+  const applySelectedStylePatch = useCallback(
+    (patch: SlideStylePatch) => {
+      const element = resolveSelectedElement();
+      if (!element || !selectedElementSelector) return;
+
+      for (const [property, value] of Object.entries(patch)) {
+        if (value === undefined) continue;
+        element.style.setProperty(stylePropertyName(property), value);
+      }
+
+      if (
+        patch.borderWidth &&
+        patch.borderWidth !== "0" &&
+        patch.borderWidth !== "0px" &&
+        window.getComputedStyle(element).borderStyle === "none"
+      ) {
+        element.style.borderStyle = "solid";
+      }
+
+      const html = readCurrentSlideContentHtml();
+      if (html !== null) {
+        onUpdateSlideRef.current({ content: html });
+      }
+
+      const snapshot = buildStyleSnapshot(element, selectedElementSelector);
+      setSelectedElementRect(element.getBoundingClientRect());
+      setSelectedStyleSnapshot(snapshot);
+      syncSelectionToAppState(
+        buildSelectionState(snapshot.isImage ? "image" : "single", [
+          {
+            selector: selectedElementSelector,
+            kind: snapshot.isImage ? "image" : "element",
+            tagName: snapshot.tagName,
+            text: snapshot.textPreview,
+            imageSrc:
+              element instanceof HTMLImageElement
+                ? (element.getAttribute("src") ?? undefined)
+                : undefined,
+            style: snapshot,
+          },
+        ]),
+      );
+    },
+    [
+      buildSelectionState,
+      readCurrentSlideContentHtml,
+      resolveSelectedElement,
+      selectedElementSelector,
+    ],
+  );
+
   // --- Pending visual updates ---
   const [pendingUpdateCount, setPendingUpdateCount] = useState(0);
 
@@ -1383,16 +1792,17 @@ export default function SlideEditor({
     [showImageOverlay, enterInlineEdit, isHtmlSlide, readOnly],
   );
 
-  const slideElementSelected = !!selectedImg || !!editingEl;
+  const slideElementSelected =
+    !!selectedImg || !!editingEl || !!selectedStyleSnapshot;
 
   return (
     <div
-      className="flex-1 flex flex-col h-full overflow-hidden"
+      className="relative flex h-full min-h-0 flex-1 flex-col overflow-hidden"
       data-slide-element-selected={slideElementSelected ? "true" : undefined}
     >
-      <div className="flex-1 overflow-hidden">
-        {activeTab === "visual" ? (
-          slide.excalidrawData ? (
+      <div className="flex min-h-0 flex-1 overflow-hidden">
+        <div className="min-w-0 flex-1 overflow-hidden">
+          {slide.excalidrawData ? (
             <div className="h-full bg-background">
               <ExcalidrawSlide
                 initialData={slide.excalidrawData}
@@ -1471,7 +1881,9 @@ export default function SlideEditor({
                     style={{ width: canvasWidth, maxWidth: canvasWidth }}
                   >
                     <div
+                      ref={slideCanvasRef}
                       className="slide-image-clickable relative"
+                      data-editable={!readOnly ? "true" : undefined}
                       onClick={handleSlideClick}
                       onContextMenu={handleSlideContextMenu}
                       onDoubleClick={handleSlideDoubleClick}
@@ -1488,6 +1900,15 @@ export default function SlideEditor({
                         aspectRatio={aspectRatio}
                         onOverflowChange={handleOverflowChange}
                       />
+                      {/* Fading "AI edited" ring around the canvas when the
+                          agent just edited THIS slide (component handles fade). */}
+                      {activeSlideEdits.length > 0 && (
+                        <RecentEditHighlights
+                          edits={activeSlideEdits}
+                          resolveRect={resolveCanvasRect}
+                          containerRef={slideCanvasRef}
+                        />
+                      )}
                       {/* Double-click hint — only shown for HTML slides that support inline editing */}
                       {isHoveringText && !editingEl && isHtmlSlide && (
                         <div className="absolute bottom-2 left-1/2 -translate-x-1/2 rounded bg-black/60 px-2 py-0.5 text-xs text-white/40 pointer-events-none select-none">
@@ -1534,22 +1955,36 @@ export default function SlideEditor({
                 </div>
               </div>
             </div>
-          )
-        ) : (
-          <CodeEditor slide={slide} onUpdateSlide={onUpdateSlide} />
+          )}
+        </div>
+
+        {selectedStyleSnapshot && !readOnly && (
+          <div className="hidden h-full w-[17rem] shrink-0 border-l border-border/70 bg-background/95 lg:block">
+            <SlideStyleInspector
+              snapshot={selectedStyleSnapshot}
+              designSystem={designSystem}
+              className="h-full w-full rounded-none border-0 bg-transparent shadow-none"
+              onChange={applySelectedStylePatch}
+              onClose={() => {
+                clearSelectedElement();
+                syncSelectionToAppState(null);
+              }}
+            />
+          </div>
         )}
       </div>
 
-      {activeTab === "visual" && (
-        <SpeakerNotesPanel
-          notes={slide.notes}
-          onChange={(notes) => onUpdateSlide({ notes })}
-          slideIndex={slideIndex}
-          slideCount={slideCount}
-        />
-      )}
+      <SpeakerNotesPanel
+        notes={slide.notes}
+        onChange={(notes) => onUpdateSlide({ notes })}
+        slideIndex={slideIndex}
+        slideCount={slideCount}
+      />
 
       {selectionRect && <ImageSelectionOutline rect={selectionRect} />}
+      {selectedElementRect && (
+        <ElementSelectionOutline rect={selectedElementRect} />
+      )}
 
       {/* Multi-select outlines */}
       {Array.from(multiSelectionRects.entries()).map(([id, v]) => (