@agent-native/core 0.137.1 → 0.137.3

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

@@ -0,0 +1,199 @@
+import type { DesignSystemData } from "@shared/api";
+
+import type { InlineTextStyleKey } from "./rich-text-selection";
+
+export interface SlideStyleSnapshot {
+  /** Omitted snapshots are existing object snapshots for backward compatibility. */
+  mode?: "object";
+  selector: string;
+  label: string;
+  tagName: string;
+  textPreview: string;
+  isText: boolean;
+  isImage: boolean;
+  isAbsolute: boolean;
+  x: number;
+  y: number;
+  width: number;
+  height: number;
+  rotation: number;
+  slideWidth: number;
+  slideHeight: number;
+  color: string;
+  backgroundColor: string;
+  fontSize: number;
+  fontWeight: string;
+  fontStyle: string;
+  textDecoration: string;
+  lineHeight: number;
+  textAlign: string;
+  opacity: number;
+  borderRadius: number;
+  borderWidth: number;
+  borderColor: string;
+  paddingX: number;
+  paddingY: number;
+  zIndex: number;
+  listKind: "bullet" | "ordered" | null;
+  textStyleScope?: "block" | "selection";
+  mixedTextStyles?: InlineTextStyleKey[];
+}
+
+export type SlideStylePatch = Partial<{
+  color: string;
+  backgroundColor: string;
+  fontSize: string;
+  fontWeight: string;
+  fontStyle: string;
+  textDecoration: string;
+  lineHeight: string;
+  textAlign: string;
+  opacity: string;
+  borderRadius: string;
+  borderWidth: string;
+  borderColor: string;
+  paddingLeft: string;
+  paddingRight: string;
+  paddingTop: string;
+  paddingBottom: string;
+  left: string;
+  top: string;
+  width: string;
+  height: string;
+  transform: string;
+  zIndex: string;
+}>;
+
+export function tokenPalette(
+  designSystem: DesignSystemData | undefined,
+  t: (key: string) => string,
+) {
+  const colors = designSystem?.colors;
+  const base = colors
+    ? [
+        {
+          label: t("styleInspector.primary"),
+          value: colors.primary,
+          color: colors.primary,
+        },
+        {
+          label: t("styleInspector.secondary"),
+          value: colors.secondary,
+          color: colors.secondary,
+        },
+        {
+          label: t("styleInspector.accent"),
+          value: colors.accent,
+          color: colors.accent,
+        },
+        {
+          label: t("styleInspector.surface"),
+          value: colors.surface,
+          color: colors.surface,
+        },
+        {
+          label: t("styleInspector.background"),
+          value: colors.background,
+          color: colors.background,
+        },
+        {
+          label: t("styleInspector.text"),
+          value: colors.text,
+          color: colors.text,
+        },
+        {
+          label: t("styleInspector.muted"),
+          value: colors.textMuted,
+          color: colors.textMuted,
+        },
+      ]
+    : [];
+
+  // Fixed swatches offered when a deck has no design system. These are
+  // document colors the user paints onto slide content, so they must stay
+  // literal — theming them would repaint finished decks on a theme switch.
+  const presets: Array<[key: string, hex: string]> = [
+    ["white", "#ffffff"], // guard:allow-raw-color
+    ["black", "#000000"], // guard:allow-raw-color
+    ["slate", "#1f2937"], // guard:allow-raw-color
+    ["blue", "#609ff8"], // guard:allow-raw-color
+    ["cyan", "#22d3ee"], // guard:allow-raw-color
+    ["emerald", "#34d399"], // guard:allow-raw-color
+    ["amber", "#fbbf24"], // guard:allow-raw-color
+    ["rose", "#fb7185"], // guard:allow-raw-color
+  ];
+
+  return [
+    ...base,
+    ...presets.map(([key, hex]) => ({
+      label: t(`styleInspector.${key}`),
+      value: hex,
+      color: hex,
+    })),
+  ];
+}
+
+// `slide.background` holds either a raw CSS value or a Tailwind arbitrary
+// class (`bg-[...]`), which SlideRenderer applies as a class rather than
+// an inline style. The picker only speaks CSS colors, so unwrap the arbitrary
+// form and report anything else (named utilities, gradients) as unreadable
+// rather than guessing a hex the slide is not actually using.
+export function backgroundCssValue(
+  background: string | undefined,
+): string | null {
+  // guard:allow-raw-color — mirrors SlideRenderer's own default slide fill
+  if (!background) return "#000000";
+  const arbitrary = background.match(/^bg-\[(.+)\]$/);
+  if (arbitrary) return arbitrary[1].replace(/_/g, " ");
+  return background.startsWith("bg-") ? null : background;
+}
+
+export function formatValue(value: number) {
+  return Number.isInteger(value)
+    ? String(value)
+    : String(Number(value.toFixed(2)));
+}
+
+export function rotationTransform(rotation: number) {
+  return `rotate(${formatValue(rotation)}deg)`;
+}
+
+export function resolveHorizontalAlignment(snapshot: SlideStyleSnapshot) {
+  if (snapshot.x <= 0) return "left";
+  const centered = (snapshot.slideWidth - snapshot.width) / 2;
+  return Math.abs(snapshot.x - centered) < 1 ? "center" : "right";
+}
+
+export function resolveVerticalAlignment(snapshot: SlideStyleSnapshot) {
+  if (snapshot.y <= 0) return "top";
+  const centered = (snapshot.slideHeight - snapshot.height) / 2;
+  return Math.abs(snapshot.y - centered) < 1 ? "middle" : "bottom";
+}
+
+export function horizontalAlignPatch(
+  snapshot: SlideStyleSnapshot,
+  alignment: string,
+): SlideStylePatch {
+  const available = Math.max(0, snapshot.slideWidth - snapshot.width);
+  const x =
+    alignment === "left"
+      ? 0
+      : alignment === "center"
+        ? available / 2
+        : available;
+  return { left: `${formatValue(x)}px` };
+}
+
+export function verticalAlignPatch(
+  snapshot: SlideStyleSnapshot,
+  alignment: string,
+): SlideStylePatch {
+  const available = Math.max(0, snapshot.slideHeight - snapshot.height);
+  const y =
+    alignment === "top"
+      ? 0
+      : alignment === "middle"
+        ? available / 2
+        : available;
+  return { top: `${formatValue(y)}px` };
+}

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

@@ -109,9 +109,10 @@ button[title="Open agent sidebar"] {
   --accent-cyan: 193 82% 31%;
 }
 
-/* Slides keeps the shared visual inspector behavior, but the dock needs the
+/* Slides keeps the shared visual inspector behavior, but the dock and context toolbar need the
    flatter, filled-control treatment used by the slide editor. */
-.slide-style-inspector {
+.slide-style-inspector,
+.slide-context-toolbar {
   --slides-inspector-control-background: hsl(var(--muted) / 0.82);
   --slides-inspector-divider: hsl(var(--border) / 0.7);
   --design-editor-control-bg: var(--slides-inspector-control-background);
@@ -161,11 +162,21 @@ button[title="Open agent sidebar"] {
   box-shadow: none;
 }
 
+/* The toolbar sits on a muted surface, so its inputs need the opposite
+   treatment to stay readable: a light box rather than a darker fill. */
+.slide-context-toolbar input {
+  border: 1px solid var(--slides-inspector-divider);
+  border-radius: 0.25rem;
+  background: hsl(var(--background));
+  box-shadow: none;
+}
+
 .slide-style-inspector input:focus {
   border: 0;
 }
 
-.slide-style-inspector .slides-inspector-segment {
+.slide-style-inspector .slides-inspector-segment,
+.slide-context-toolbar .slides-inspector-segment {
   min-height: 1.5rem;
   border: 0;
   border-radius: 0.125rem;

package/corpus/templates/slides/app/i18n/en-US.ts

@@ -404,6 +404,14 @@ const messages = {
     cornerRadius: "Corner radius",
     strokeWeight: "Weight",
     typography: "Typography",
+    weight: "Weight",
+    italic: "Italic",
+    underline: "Underline",
+    bulletList: "Bullet list",
+    numberedList: "Numbered list",
+    align: "Align",
+    decreaseSize: "Decrease font size",
+    increaseSize: "Increase font size",
     mixed: "Mixed",
     textColor: "Text color",
     primary: "Primary",
@@ -501,7 +509,6 @@ const messages = {
     noAi: "no AI",
     duplicateCurrentSlide: "Duplicate current slide",
     promptPlaceholder: "Describe the slides you want...",
-    slides: "Slides",
   },
   presentation: {
     loadFailed: "Could not load this presentation.",

package/corpus/templates/slides/app/pages/DeckEditor.tsx

@@ -31,6 +31,7 @@ import { SlideCommentsPanel } from "@/components/comments/SlideCommentsPanel";
 import { AnimationsPanel } from "@/components/editor/AnimationsPanel";
 import AssetLibraryPanel from "@/components/editor/AssetLibraryPanel";
 import { DeckEditorSkeleton } from "@/components/editor/DeckEditorSkeleton";
+import { EditorActionCluster } from "@/components/editor/EditorActionCluster";
 import EditorSidebar from "@/components/editor/EditorSidebar";
 import EditorToolbar from "@/components/editor/EditorToolbar";
 import GeneratingOverlay from "@/components/editor/GeneratingOverlay";
@@ -78,7 +79,7 @@ import { TAB_ID } from "@/lib/tab-id";
 import { shouldActivateTextTool } from "@/lib/text-tool-shortcut";
 import { shortcutLabel } from "@/lib/utils";
 
-type EditorSidePanel = "style" | "comments" | null;
+type EditorSidePanel = "comments" | null;
 
 function MissingDeckAccessPane({
   hasTeamJoinOption,
@@ -184,6 +185,8 @@ export default function DeckEditor() {
   const [sidebarOpen, setSidebarOpen] = useState(
     () => typeof window !== "undefined" && window.innerWidth >= 768,
   );
+  const [contextToolbarSlot, setContextToolbarSlot] =
+    useState<HTMLDivElement | null>(null);
   const [retryingMissingDeck, setRetryingMissingDeck] = useState(false);
   const [checkedDeckAccessKey, setCheckedDeckAccessKey] = useState<
     string | null
@@ -285,7 +288,6 @@ export default function DeckEditor() {
   });
   const { designSystem } = useDeckDesignSystem(deck?.designSystemId);
   const commentsOpen = sidePanel === "comments";
-  const styleOpen = sidePanel === "style";
 
   const {
     questions: questionFlowQuestions,
@@ -330,6 +332,12 @@ export default function DeckEditor() {
     if (!generatingSlideVisible) setGeneratingSlideSelected(false);
   }, [generatingSlideVisible]);
 
+  // The add-slide request is finished once the agent stops generating, so the
+  // rail's placeholder must not outlive it.
+  useEffect(() => {
+    if (!generating) setAddSlideGenerating(false);
+  }, [generating]);
+
   const previousSlideCountRef = useRef(slideCount);
   useEffect(() => {
     if (previousSlideCountRef.current === slideCount) return;
@@ -941,6 +949,13 @@ export default function DeckEditor() {
     ? `Current slide: ${currentSlide.id} (index ${currentIndex >= 0 ? currentIndex : 0}). Deck: ${id}.`
     : `Deck: ${id}.`;
 
+  const handleAddEmptySlide = () => {
+    const activeIdx = deck.slides.findIndex((s) => s.id === activeSlideId);
+    setActiveSlideId(
+      addSlide(id, "blank", activeIdx >= 0 ? activeIdx : undefined),
+    );
+  };
+
   return (
     <div
       className="flex h-full min-h-0 flex-1 flex-col overflow-hidden bg-background"
@@ -978,10 +993,6 @@ export default function DeckEditor() {
         onToggleComments={() =>
           setSidePanel((panel) => (panel === "comments" ? null : "comments"))
         }
-        styleOpen={styleOpen}
-        onToggleStyle={() =>
-          setSidePanel((panel) => (panel === "style" ? null : "style"))
-        }
         unresolvedCommentCount={unresolvedCommentCount}
         currentUserEmail={session?.email}
         animationsOpen={animationsOpen}
@@ -1052,8 +1063,19 @@ export default function DeckEditor() {
             updateDeck(id, { aspectRatio: previous });
           });
         }}
+        currentSlideId={currentSlide?.id}
+        addSlideGenerating={addSlideGenerating}
+        onAddSlideGeneratingChange={setAddSlideGenerating}
+        onAddEmptySlide={handleAddEmptySlide}
+        onDuplicateCurrentSlide={
+          currentSlide ? () => duplicateSlide(id, currentSlide.id) : undefined
+        }
       />
 
+      {/* Full-width host for the slide's contextual style toolbar: it spans the
+       * slide rail as well as the canvas, matching the deck toolbar above it. */}
+      <div ref={setContextToolbarSlot} className="shrink-0" />
+
       <div className="relative flex min-h-0 flex-1 overflow-hidden">
         {sidebarOpen && (
           <>
@@ -1071,24 +1093,12 @@ export default function DeckEditor() {
                   slides={deck.slides}
                   activeSlideId={currentSlide?.id || ""}
                   deckId={id}
-                  deckTitle={deck.title}
                   onSelectSlide={(slideId) => {
                     setGeneratingSlideSelected(false);
                     setActiveSlideId(slideId);
                     if (window.innerWidth < 768) setSidebarOpen(false);
                   }}
                   onDuplicateSlide={(slideId) => duplicateSlide(id, slideId)}
-                  onAddEmptySlide={() => {
-                    const activeIdx = deck.slides.findIndex(
-                      (s) => s.id === activeSlideId,
-                    );
-                    const newId = addSlide(
-                      id,
-                      "blank",
-                      activeIdx >= 0 ? activeIdx : undefined,
-                    );
-                    setActiveSlideId(newId);
-                  }}
                   onDeleteSlide={(slideId) => {
                     const idx = deck.slides.findIndex((s) => s.id === slideId);
                     const nextSlide =
@@ -1113,8 +1123,6 @@ export default function DeckEditor() {
                     setGeneratingSlideSelected(true);
                     if (window.innerWidth < 768) setSidebarOpen(false);
                   }}
-                  addSlideGenerating={addSlideGenerating}
-                  onAddSlideGeneratingChange={setAddSlideGenerating}
                 />
               </DndContext>
             </div>
@@ -1165,6 +1173,26 @@ export default function DeckEditor() {
             slide={currentSlide}
             deckId={id}
             readOnly={!canEdit}
+            contextToolbarSlot={contextToolbarSlot}
+            contextToolbarLeading={
+              canEdit ? (
+                <EditorActionCluster
+                  deckId={id}
+                  deckTitle={deck.title}
+                  currentSlideId={currentSlide.id}
+                  slideCount={deck.slides.length}
+                  currentSlideIndex={currentIndex >= 0 ? currentIndex : 0}
+                  addSlideGenerating={addSlideGenerating}
+                  onAddSlideGeneratingChange={setAddSlideGenerating}
+                  onAddEmptySlide={handleAddEmptySlide}
+                  onDuplicateCurrentSlide={() =>
+                    duplicateSlide(id, currentSlide.id)
+                  }
+                  textBoxMode={textBoxMode}
+                  onToggleTextBoxMode={toggleTextBoxMode}
+                />
+              ) : undefined
+            }
             onUpdateSlide={(updates, slideIdOverride, options) =>
               updateSlide(
                 id,
@@ -1197,8 +1225,6 @@ export default function DeckEditor() {
             slideIndex={currentIndex >= 0 ? currentIndex : 0}
             slideCount={deck.slides.length}
             designSystem={designSystem}
-            stylePanelOpen={styleOpen}
-            onCloseStylePanel={() => setSidePanel(null)}
             aspectRatio={deck.aspectRatio}
             collabUser={
               currentUser

package/corpus/templates/slides/changelog/2026-08-01-add-slide-moved-to-the-toolbar-and-the-slide-rail-is-now-mor.md

@@ -0,0 +1,9 @@
+---
+type: changed
+date: 2026-08-01
+---
+
+Adding a slide now starts from a `+` at the head of the editor toolbar, next to
+the deck title, instead of a header above the slide thumbnails. The rail itself
+drops that header, tucks the drag handle onto the thumbnail on hover, and is
+narrower — so more slides fit on screen and the canvas gets the width back.

package/corpus/templates/slides/changelog/2026-08-01-add-slide-undo-redo-and-the-text-tool-now-lead-the-slide-too.md

@@ -0,0 +1,9 @@
+---
+type: changed
+date: 2026-08-01
+---
+
+The contextual slide toolbar now opens with the actions that never change: add
+slide, undo, redo, and the text-box tool. Undo and redo previously worked only
+through Cmd+Z with no visible control; clicking them commits whatever text you
+are editing first, so nothing you just typed is lost.

package/corpus/templates/slides/changelog/2026-08-01-slide-styling-now-appears-in-a-contextual-toolbar-above-the-.md

@@ -0,0 +1,6 @@
+---
+type: improved
+date: 2026-08-01
+---
+
+Slide styling now appears in a contextual toolbar above the canvas, so the slide keeps its full width while you edit.

package/corpus/templates/slides/changelog/2026-08-01-the-slide-style-side-panel-is-retired-all-styling-now-lives-.md

@@ -0,0 +1,6 @@
+---
+type: improved
+date: 2026-08-01
+---
+
+The slide style side panel is retired; all styling now lives in the contextual toolbar above the canvas.

package/corpus/templates/slides/changelog/2026-08-03-the-slide-toolbar-is-denser-swatch-only-colors-dropdowns-for.md

@@ -0,0 +1,10 @@
+---
+type: changed
+date: 2026-08-03
+---
+
+Colour controls in the slide toolbar are now just the swatch, with no hex code
+beside it. Font weight and text alignment collapsed from four buttons each into
+a single control with a dropdown, and alignment uses standard icons instead of
+words. Undo and redo moved out of the toolbar into the overflow menu, since
+Cmd+Z already covers the common case.

package/corpus/templates/slides/changelog/2026-08-04-bullet-and-numbered-list-buttons-in-the-slide-toolbar-conver.md

@@ -0,0 +1,6 @@
+---
+type: added
+date: 2026-08-04
+---
+
+Bullet and numbered list buttons in the slide toolbar convert a text box to a real list

package/corpus/templates/slides/changelog/2026-08-04-italic-and-underline-are-now-one-click-away-in-the-slide-too.md

@@ -0,0 +1,6 @@
+---
+type: added
+date: 2026-08-04
+---
+
+Italic and underline are now one click away in the slide toolbar, without entering text edit mode

package/dist/collab/struct-routes.d.ts

@@ -13,8 +13,8 @@
  * Body: { json: any, fieldName?: string, type?: "map"|"array", requestSource?: string }
  */
 export declare const postCollabJson: import("h3").EventHandlerWithFetch<import("h3").EventHandlerRequest, Promise<{
-    error: string;
     ok?: undefined;
+    error: string;
 } | {
     error?: undefined;
     ok: boolean;

package/dist/observability/routes.d.ts

@@ -41,16 +41,16 @@ export declare function createObservabilityHandler(): import("h3").EventHandlerW
     thumbsUpRate: number;
     avgEvalScore: number;
 } | {
+    error?: undefined;
     summary: import("./types.js").TraceSummary;
     spans: import("./types.js").TraceSpan[];
     id?: undefined;
-    error?: undefined;
     ok?: undefined;
 } | {
+    error?: undefined;
     summary?: undefined;
     spans?: undefined;
     id: string;
-    error?: undefined;
     ok?: undefined;
 } | {
     summary?: undefined;
@@ -59,10 +59,10 @@ export declare function createObservabilityHandler(): import("h3").EventHandlerW
     error: any;
     ok?: undefined;
 } | {
+    error?: undefined;
     summary?: undefined;
     spans?: undefined;
     id?: undefined;
-    error?: undefined;
     ok: boolean;
 }>>;
 //# sourceMappingURL=routes.d.ts.map

package/dist/progress/routes.d.ts

@@ -15,7 +15,7 @@ export declare function createProgressHandler(): import("h3").EventHandlerWithFe
     error: string;
     ok?: undefined;
 } | {
-    ok: boolean;
     error?: undefined;
+    ok: boolean;
 }>>;
 //# sourceMappingURL=routes.d.ts.map

package/dist/server/transcribe-voice.d.ts

@@ -20,7 +20,7 @@ export declare function createTranscribeVoiceHandler(): import("h3").EventHandle
     error: string;
     text?: undefined;
 } | {
-    text: string;
     error?: undefined;
+    text: string;
 }>>;
 //# sourceMappingURL=transcribe-voice.d.ts.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@agent-native/core",
-  "version": "0.137.1",
+  "version": "0.137.3",
   "description": "Framework for agent-native application development — where AI agents and UI share SQL state, actions, and context",
   "homepage": "https://github.com/BuilderIO/agent-native#readme",
   "bugs": {
@@ -401,7 +401,7 @@
     "yjs": "^13.6.31",
     "zod": "^4.3.6",
     "@agent-native/recap-cli": "0.5.3",
-    "@agent-native/toolkit": "^0.12.2"
+    "@agent-native/toolkit": "^0.13.0"
   },
   "devDependencies": {
     "@ai-sdk/anthropic": "^3.0.71",