@agent-native/core 0.137.0 → 0.137.2

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

@@ -74,6 +74,11 @@ import {
   slidesCanvasInteractionCore,
 } from "./canvas-interactions";
 import ImageOverlay from "./ImageOverlay";
+import {
+  detectSlideListKind,
+  toggleSlideList,
+  type SlideListKind,
+} from "./list-editing";
 import {
   applyInlineTextStyle,
   getInlineTextStyleSnapshot,
@@ -119,13 +124,9 @@ import {
   type SlidesSelectionTool,
 } from "./slide-object-interactions";
 import { getPassiveSlidePresenceUsers } from "./slide-presence";
+import { type SlideStylePatch, type SlideStyleSnapshot } from "./slide-style";
+import { SlideContextToolbar } from "./SlideContextToolbar";
 import { SlideOverflowWarning } from "./SlideOverflowWarning";
-import {
-  SlideBackgroundInspector,
-  SlideStyleInspector,
-  type SlideStylePatch,
-  type SlideStyleSnapshot,
-} from "./SlideStyleInspector";
 import { SpeakerNotesPanel } from "./SpeakerNotesPanel";
 
 let builderIdCounter = 0;
@@ -293,7 +294,15 @@ function stripBuilderIds(html: string): string {
     cleaned = stripRoot?.innerHTML ?? doc.body.innerHTML;
   }
 
-  return cleaned.replace(/\s*data-builder-id="[^"]*"/g, "");
+  return (
+    cleaned
+      .replace(/\s*data-builder-id="[^"]*"/g, "")
+      // An active inline edit marks its host element. Serializing mid-edit —
+      // which the list toggles and the draft capture both do — would otherwise
+      // bake the editing state into saved slide content.
+      .replace(/\s*contenteditable="[^"]*"/gi, "")
+      .replace(/\s*data-editing-block="[^"]*"/g, "")
+  );
 }
 
 /**
@@ -359,6 +368,8 @@ const INLINE_INSPECTOR_STYLE_KEYS = [
   "color",
   "fontSize",
   "fontWeight",
+  "fontStyle",
+  "textDecoration",
 ] as const satisfies readonly (keyof SlideStylePatch)[];
 
 function inlineInspectorStylePatch(
@@ -448,6 +459,8 @@ function buildStyleSnapshot(
   const selectedColor = selectedTextStyle?.values.color;
   const selectedFontSize = selectedTextStyle?.values.fontSize;
   const selectedFontWeight = selectedTextStyle?.values.fontWeight;
+  const selectedFontStyle = selectedTextStyle?.values.fontStyle;
+  const selectedTextDecoration = selectedTextStyle?.values.textDecoration;
 
   return {
     selector,
@@ -471,6 +484,8 @@ function buildStyleSnapshot(
       selectedFontWeight === null || selectedFontWeight === undefined
         ? normalizedFontWeight(computed.fontWeight)
         : normalizedFontWeight(selectedFontWeight),
+    fontStyle: selectedFontStyle ?? computed.fontStyle,
+    textDecoration: selectedTextDecoration ?? computed.textDecorationLine,
     lineHeight,
     textAlign: normalizedTextAlign(computed.textAlign),
     opacity: Math.round(Number(computed.opacity || 1) * 100),
@@ -480,6 +495,7 @@ function buildStyleSnapshot(
     paddingX: Math.round((paddingLeft + paddingRight) / 2),
     paddingY: Math.round((paddingTop + paddingBottom) / 2),
     zIndex,
+    listKind: detectSlideListKind(element),
     textStyleScope: inlineTextStyle?.scope ?? "block",
     mixedTextStyles: selectedTextStyle?.mixed ?? [],
     isAbsolute,
@@ -565,6 +581,12 @@ interface SlideEditorProps {
    *  navigable but contentEditable / image overlays don't activate.
    *  Mirrors Google Slides' viewer experience. */
   readOnly?: boolean;
+  /** Full-width host for the contextual style toolbar, rendered by the editor
+   *  shell above the slide rail. Selection state lives here, so the toolbar is
+   *  portaled out rather than lifted. Falls back to rendering in place. */
+  contextToolbarSlot?: HTMLElement | null;
+  /** Selection-independent actions for the head of the contextual toolbar. */
+  contextToolbarLeading?: ReactNode;
   onGenerateImage: () => void;
   onOpenAssetLibrary: (replaceSrc: string) => void;
   onUploadImage: (replaceSrc: string) => void;
@@ -601,10 +623,6 @@ interface SlideEditorProps {
   designSystem?: DesignSystemData;
   /** Deck aspect ratio (defaults to 16:9 when omitted) */
   aspectRatio?: AspectRatio;
-  /** Whether the right-side style inspector is visible */
-  stylePanelOpen?: boolean;
-  /** Close the right-side style inspector */
-  onCloseStylePanel?: () => void;
   /** Whether the draw-to-prompt overlay is visible */
   drawMode?: boolean;
   /** Called when the draw overlay should exit (Esc, Send, close button) */
@@ -1027,6 +1045,8 @@ export default function SlideEditor({
   slide,
   onUpdateSlide,
   readOnly = false,
+  contextToolbarSlot,
+  contextToolbarLeading,
   onGenerateImage,
   onOpenAssetLibrary,
   onUploadImage,
@@ -1040,8 +1060,6 @@ export default function SlideEditor({
   slideCount = 1,
   designSystem,
   aspectRatio,
-  stylePanelOpen = false,
-  onCloseStylePanel,
   drawMode,
   onExitDrawMode,
   pinMode,
@@ -1141,7 +1159,6 @@ export default function SlideEditor({
     selector: selectedElementSelector,
     path: selectedElementPath,
     canvasZoom,
-    stylePanelOpen,
     revision: selectionMeasurementRevision,
   });
   const selectedElementRect = currentSelectionOverlayRect(
@@ -3986,6 +4003,45 @@ export default function SlideEditor({
     ],
   );
 
+  /** Bullet / numbered list toggle for the selected text object. */
+  const handleToggleList = useCallback(
+    (kind: SlideListKind) => {
+      const target = editingElRef.current ?? resolveSelectedElement();
+      if (!target) return;
+      // Editing one item still means "this list". Converting the LI itself
+      // would build a second list inside it instead of toggling the one it
+      // already belongs to.
+      const parentList =
+        target.tagName === "LI" ? target.closest("ul, ol") : null;
+      const element = (parentList as HTMLElement | null) ?? target;
+
+      const editing = editingElRef.current;
+      const converted = toggleSlideList(element, kind);
+      if (!converted) return;
+
+      // Conversions retag and replace nodes, so an active edit can be left
+      // pointing at a node that is no longer in the page. Move it onto the
+      // element that replaced it rather than silently writing into nothing.
+      if (editing && !editing.isConnected) {
+        converted.contentEditable = "true";
+        converted.setAttribute("data-editing-block", "true");
+        editingElRef.current = converted;
+        setEditingEl(converted);
+        converted.focus({ preventScroll: true });
+      }
+
+      const html = readCurrentSlideContentHtml();
+      if (html !== null) onUpdateSlideRef.current({ content: html });
+      const selector = getBuilderSelector(converted);
+      if (selector) selectElementForStyling(converted, selector);
+    },
+    [
+      readCurrentSlideContentHtml,
+      resolveSelectedElement,
+      selectElementForStyling,
+    ],
+  );
+
   // --- Pending visual updates ---
   const [pendingUpdateCount, setPendingUpdateCount] = useState(0);
 
@@ -4050,11 +4106,42 @@ export default function SlideEditor({
   const isSelectedElementDraggable = selectedForDrag
     ? getComputedStyle(selectedForDrag).position === "absolute"
     : false;
+  // Excalidraw slides have no selectable slide content, so the row collapses
+  // to its slide-level state — but that state owns the background picker, and
+  // SlideRenderer paints `slide.background` behind the drawing, so the row has
+  // to stay mounted or that background becomes uneditable.
+  const contextToolbar = !readOnly ? (
+    <div
+      className="hidden shrink-0 lg:block"
+      // Snapshotting the range is only half the job: without this marker the
+      // click-outside handler exits the edit and clears the snapshot before
+      // the button's onClick runs, so partial-text formatting would silently
+      // apply to the whole object.
+      data-slide-inline-edit-surface="true"
+      onPointerDownCapture={preserveRichTextSelection}
+    >
+      <SlideContextToolbar
+        snapshot={selectedStyleSnapshot}
+        background={slide.background}
+        designSystem={designSystem}
+        leading={contextToolbarLeading}
+        onChange={applySelectedStylePatch}
+        onBackgroundChange={applySlideBackground}
+        onArrange={handleArrangeSelected}
+        onToggleList={handleToggleList}
+      />
+    </div>
+  ) : null;
+
   return (
     <div
       className="relative flex h-full min-h-0 flex-1 flex-col overflow-hidden"
       data-slide-element-selected={slideElementSelected ? "true" : undefined}
     >
+      {contextToolbarSlot
+        ? createPortal(contextToolbar, contextToolbarSlot)
+        : contextToolbar}
+
       <div className="flex min-h-0 flex-1 overflow-hidden">
         <div className="min-w-0 flex-1 overflow-hidden">
           {slide.excalidrawData ? (
@@ -4197,37 +4284,6 @@ export default function SlideEditor({
             </div>
           )}
         </div>
-
-        {!readOnly && stylePanelOpen && (
-          <div
-            className="relative z-[70] hidden h-full w-[17rem] shrink-0 border-l border-border/70 bg-background/95 lg:block"
-            data-slide-style-dock="true"
-            onPointerDownCapture={preserveRichTextSelection}
-          >
-            {selectedStyleSnapshot ? (
-              <SlideStyleInspector
-                snapshot={selectedStyleSnapshot}
-                designSystem={designSystem}
-                className="h-full w-full rounded-none border-0 bg-transparent shadow-none"
-                onChange={applySelectedStylePatch}
-                onArrange={handleArrangeSelected}
-                onClose={() => {
-                  clearSelectedElement();
-                  syncSelectionToAppState(null);
-                  onCloseStylePanel?.();
-                }}
-              />
-            ) : (
-              <SlideBackgroundInspector
-                background={slide.background}
-                designSystem={designSystem}
-                className="h-full w-full rounded-none border-0 bg-transparent shadow-none"
-                onChange={applySlideBackground}
-                onClose={onCloseStylePanel}
-              />
-            )}
-          </div>
-        )}
       </div>
 
       <SpeakerNotesPanel

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

@@ -31,18 +31,21 @@ export function SlideOverflowWarning({
     <div
       role="status"
       aria-live="polite"
-      className="absolute top-3 left-3 z-20 flex items-center gap-2 rounded-md border border-amber-400/70 bg-amber-950/95 px-2.5 py-1.5 text-xs text-amber-50 shadow-lg"
+      className="absolute -top-12 left-0 z-20 flex items-center gap-2 rounded-md border border-foreground/40 px-2 py-1 text-xs text-foreground"
       onPointerDown={(event) => event.stopPropagation()}
       onClick={(event) => event.stopPropagation()}
     >
-      <IconAlertTriangle className="h-3.5 w-3.5 flex-shrink-0" stroke={2} />
+      <IconAlertTriangle
+        className="h-3.5 w-3.5 flex-shrink-0 text-foreground"
+        stroke={2}
+      />
       <span className="leading-tight">
         Layout overflows by {visibleOverflowLabel}
       </span>
       <Button
         size="sm"
         variant="ghost"
-        className="ml-1 h-6 cursor-pointer px-2 text-[11px] font-medium text-amber-50 hover:bg-amber-400/20 hover:text-white"
+        className="h-6 cursor-pointer px-1.5 text-[11px] font-medium text-foreground hover:bg-transparent hover:underline"
         onClick={onFix}
         disabled={isAskingAgentToFix}
       >
@@ -51,7 +54,7 @@ export function SlideOverflowWarning({
       <Button
         size="icon"
         variant="ghost"
-        className="size-6 cursor-pointer text-amber-50 hover:bg-amber-400/20 hover:text-white"
+        className="size-6 cursor-pointer text-foreground hover:bg-transparent hover:text-foreground/70"
         onClick={onDismiss}
         aria-label={dismissLabel}
         title={dismissLabel}

package/corpus/templates/slides/app/components/editor/bullet-editing.ts

@@ -200,9 +200,9 @@ export function convertMarkdownPrefixToBullet(el: HTMLElement): boolean {
 }
 
 /**
- * Walk up from a text leaf to the nearest enclosing styled bullet-row
- * container, so Enter can add a new item to the whole list instead of being
- * trapped inside one item.
+ * Walk up from a text leaf to the nearest enclosing list — a native UL/OL or
+ * a styled bullet-row container — so Enter can add a new item to the whole
+ * list instead of being trapped inside one item.
  */
 export function findEnclosingList(
   el: HTMLElement,
@@ -212,6 +212,14 @@ export function findEnclosingList(
   while (node && root.contains(node)) {
     const parentEl: HTMLElement | null = node.parentElement;
     if (!parentEl) break;
+    // A native item can only gain a sibling when the list is the editing
+    // host; with the LI itself as host the browser splits inside the item.
+    if (
+      node.tagName === "LI" &&
+      (parentEl.tagName === "UL" || parentEl.tagName === "OL")
+    ) {
+      return parentEl;
+    }
     if (isBulletRow(node) && isBulletList(parentEl)) return parentEl;
     // Even from a bullet row whose siblings aren't all bullets, treat the
     // parent as a list once it holds two or more bullet rows.

package/corpus/templates/slides/app/components/editor/commit-active-edit.ts

@@ -0,0 +1,21 @@
+/**
+ * The Cmd+Z handler in DeckContext deliberately ignores keystrokes while the
+ * user is typing, so the text editor keeps its own history. A menu item or
+ * button has no such escape hatch: without committing first, invoking undo
+ * mid-edit would skip the in-progress text and undo the deck op behind it,
+ * silently discarding what was just typed.
+ */
+export function commitActiveEditThenRun(run: () => void) {
+  const active = document.activeElement as HTMLElement | null;
+  if (
+    active &&
+    (active.isContentEditable ||
+      active.tagName === "INPUT" ||
+      active.tagName === "TEXTAREA")
+  ) {
+    active.blur();
+    requestAnimationFrame(run);
+    return;
+  }
+  run();
+}

package/corpus/templates/slides/app/components/editor/list-editing.ts

@@ -0,0 +1,219 @@
+/**
+ * Convert a slide text object between plain lines and real UL/OL markup.
+ *
+ * Decks generated by the agent represent bullets as styled flex rows (see
+ * `bullet-editing.ts`). Toolbar-created lists deliberately use semantic markup
+ * instead, because an ordered list must renumber itself when items are added,
+ * removed, or reordered, and styled rows cannot. Both shapes stay editable:
+ * `RICH_BLOCK_TAGS` in SlideEditor already treats UL/OL/LI as text blocks.
+ *
+ * No React exports, so this stays Fast-Refresh friendly and unit-testable.
+ */
+
+import { isBulletMarker } from "./bullet-editing";
+
+export type SlideListKind = "bullet" | "ordered";
+
+const LIST_TAG: Record<SlideListKind, "UL" | "OL"> = {
+  bullet: "UL",
+  ordered: "OL",
+};
+
+/**
+ * Tailwind's preflight sets `list-style: none` on every UL and OL, so the type
+ * has to be restated inline or the list renders with no markers at all. The
+ * marker sits outside the content box so a wrapped line aligns under its own
+ * text rather than under the marker, matching how styled rows already read.
+ */
+const LIST_STYLE: Record<SlideListKind, string> = {
+  bullet:
+    "margin:0;padding-left:1.25em;list-style-position:outside;list-style-type:disc;",
+  ordered:
+    "margin:0;padding-left:1.25em;list-style-position:outside;list-style-type:decimal;",
+};
+
+function isListTag(element: Element): boolean {
+  return element.tagName === "UL" || element.tagName === "OL";
+}
+
+/**
+ * The list this object is, or the single list it wholly contains. A list
+ * sitting beside other content is not something a whole-object toggle owns.
+ */
+function listElement(element: HTMLElement): HTMLElement | null {
+  if (isListTag(element)) return element;
+  const children = Array.from(element.children);
+  return children.length === 1 && isListTag(children[0])
+    ? (children[0] as HTMLElement)
+    : null;
+}
+
+export function detectSlideListKind(
+  element: HTMLElement | null,
+): SlideListKind | null {
+  const list = element ? listElement(element) : null;
+  if (!list) return null;
+  return list.tagName === "OL" ? "ordered" : "bullet";
+}
+
+/**
+ * Swap an element's tag while keeping its attributes and children. UL and OL
+ * differ only by tag, so switching list kind in place would otherwise leave an
+ * ordered list still rendering bullets.
+ */
+function retag(element: HTMLElement, tagName: string): HTMLElement {
+  const replacement = element.ownerDocument.createElement(tagName);
+  for (const attribute of Array.from(element.attributes)) {
+    replacement.setAttribute(attribute.name, attribute.value);
+  }
+  replacement.append(...Array.from(element.childNodes));
+  element.replaceWith(replacement);
+  return replacement;
+}
+
+const BLOCK_TAGS = new Set([
+  "ARTICLE",
+  "BLOCKQUOTE",
+  "DIV",
+  "H1",
+  "H2",
+  "H3",
+  "H4",
+  "H5",
+  "H6",
+  "LI",
+  "OL",
+  "P",
+  "PRE",
+  "SECTION",
+  "UL",
+]);
+
+/**
+ * The object's children when it is built out of block elements, or null when
+ * it holds a single run of text. Bare text or an inline tag at the top level
+ * means the content is one line: treating `<strong>` as a block would keep
+ * only its text and silently drop everything around it.
+ */
+function blockChildren(source: HTMLElement): HTMLElement[] | null {
+  const blocks: HTMLElement[] = [];
+  for (const node of Array.from(source.childNodes)) {
+    if (node.nodeType === Node.TEXT_NODE) {
+      if ((node.textContent ?? "").trim()) return null;
+      continue;
+    }
+    if (!(node instanceof HTMLElement)) continue;
+    // A break separates lines within a block run; it never makes one.
+    if (node.tagName === "BR") continue;
+    if (!BLOCK_TAGS.has(node.tagName)) return null;
+    blocks.push(node);
+  }
+  return blocks.length > 0 ? blocks : null;
+}
+
+/**
+ * The inner HTML of each line the object currently holds. A styled bullet row
+ * contributes only its text, so converting agent-generated bullets to a real
+ * list drops the now-duplicated marker instead of rendering two markers.
+ */
+function readLines(source: HTMLElement): string[] {
+  const blocks = blockChildren(source);
+
+  if (blocks) {
+    return blocks.flatMap((block) => {
+      const stripped = block.cloneNode(true) as HTMLElement;
+      for (const child of Array.from(stripped.children)) {
+        if (isBulletMarker(child)) child.remove();
+      }
+      const html = stripped.innerHTML.trim();
+      return html ? [html] : [];
+    });
+  }
+
+  return source.innerHTML
+    .split(/<br\s*\/?>/i)
+    .map((line) => line.trim())
+    .filter(Boolean);
+}
+
+function itemHtml(list: HTMLElement): string[] {
+  return Array.from(list.children)
+    .filter((child): child is HTMLElement => child instanceof HTMLElement)
+    .map((item) => item.innerHTML);
+}
+
+function buildList(
+  doc: Document,
+  kind: SlideListKind,
+  lines: string[],
+): HTMLElement {
+  const list = doc.createElement(LIST_TAG[kind]);
+  list.setAttribute("style", LIST_STYLE[kind]);
+  for (const line of lines) {
+    const item = doc.createElement("li");
+    item.innerHTML = line;
+    list.appendChild(item);
+  }
+  return list;
+}
+
+function buildLines(doc: Document, lines: string[]): DocumentFragment {
+  const fragment = doc.createDocumentFragment();
+  for (const line of lines) {
+    const block = doc.createElement("div");
+    block.innerHTML = line;
+    fragment.appendChild(block);
+  }
+  return fragment;
+}
+
+/**
+ * Toggle `element` into a list of `kind`: switching kind when it is already
+ * the other one, and back to plain lines when it already matches. Returns the
+ * element now holding the content, or null when there was nothing to convert
+ * so the caller can skip a pointless slide write.
+ */
+export function toggleSlideList(
+  element: HTMLElement,
+  kind: SlideListKind,
+): HTMLElement | null {
+  const doc = element.ownerDocument;
+  const existing = listElement(element);
+
+  if (!existing) {
+    const lines = readLines(element);
+    if (lines.length === 0) return null;
+    element.replaceChildren(buildList(doc, kind, lines));
+    return element;
+  }
+
+  const lines = itemHtml(existing);
+
+  if (existing.tagName !== LIST_TAG[kind]) {
+    // Same content, different marker. The tag alone is not enough: an inline
+    // `list-style-type` from the other kind would keep painting the old
+    // marker, so restate it. When the object itself was the list, the retagged
+    // node replaces it and is what the caller must go on using, since
+    // `element` is now detached.
+    const switched = retag(existing, LIST_TAG[kind]);
+    switched.style.setProperty(
+      "list-style-type",
+      kind === "ordered" ? "decimal" : "disc",
+    );
+    return existing === element ? switched : element;
+  }
+
+  if (existing === element) {
+    // The object itself is the list, so unwrapping means becoming a plain
+    // block; its attributes (object id, position, styling) must survive.
+    const unwrapped = retag(element, "DIV");
+    unwrapped.replaceChildren(buildLines(doc, lines));
+    unwrapped.style.removeProperty("padding-left");
+    unwrapped.style.removeProperty("list-style-position");
+    unwrapped.style.removeProperty("list-style-type");
+    return unwrapped;
+  }
+
+  existing.replaceWith(buildLines(doc, lines));
+  return element;
+}

package/corpus/templates/slides/app/components/editor/selection-overlay-measurement.ts

@@ -10,7 +10,6 @@ export interface SelectionOverlayMeasurementIdentity {
   selector: string | null;
   path: number[] | null;
   canvasZoom: number;
-  stylePanelOpen: boolean;
   revision: number;
 }
 
@@ -25,7 +24,6 @@ export function createSelectionOverlayMeasurementKey({
   selector,
   path,
   canvasZoom,
-  stylePanelOpen,
   revision,
 }: SelectionOverlayMeasurementIdentity): string {
   return JSON.stringify([
@@ -35,7 +33,6 @@ export function createSelectionOverlayMeasurementKey({
     selector,
     path,
     canvasZoom,
-    stylePanelOpen,
     revision,
   ]);
 }