@agent-native/core 0.137.0 → 0.137.2

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/lib/recent-references.ts

@@ -0,0 +1,82 @@
+export const RECENT_REFERENCES_STORAGE_KEY = "slides:recent-references";
+
+export type RecentReferenceKind = "deck" | "design-system";
+
+export interface RecentReference {
+  id: string;
+  kind: RecentReferenceKind;
+  lastUsedAt: number;
+}
+
+export interface RecentReferencesResult {
+  items: RecentReference[];
+  readable: boolean;
+}
+
+const MAX_RECENT_REFERENCES = 8;
+
+function isRecentReference(value: unknown): value is RecentReference {
+  if (!value || typeof value !== "object") return false;
+  const candidate = value as Partial<RecentReference>;
+  return (
+    typeof candidate.id === "string" &&
+    candidate.id.length > 0 &&
+    (candidate.kind === "deck" || candidate.kind === "design-system") &&
+    typeof candidate.lastUsedAt === "number" &&
+    Number.isFinite(candidate.lastUsedAt)
+  );
+}
+
+export function readRecentReferences(
+  storage: Pick<Storage, "getItem"> | null | undefined = typeof window ===
+  "undefined"
+    ? null
+    : window.localStorage,
+): RecentReferencesResult {
+  if (!storage) return { items: [], readable: true };
+
+  let raw: string | null;
+  try {
+    raw = storage.getItem(RECENT_REFERENCES_STORAGE_KEY);
+  } catch {
+    return { items: [], readable: false };
+  }
+
+  if (raw === null) return { items: [], readable: true };
+
+  try {
+    const parsed: unknown = JSON.parse(raw);
+    if (!Array.isArray(parsed)) return { items: [], readable: false };
+    return {
+      items: parsed.filter(isRecentReference).slice(0, MAX_RECENT_REFERENCES),
+      readable: true,
+    };
+  } catch {
+    return { items: [], readable: false };
+  }
+}
+
+export function rememberRecentReference(
+  reference: Omit<RecentReference, "lastUsedAt">,
+  storage:
+    | Pick<Storage, "getItem" | "setItem">
+    | null
+    | undefined = typeof window === "undefined" ? null : window.localStorage,
+): RecentReferencesResult {
+  const current = readRecentReferences(storage);
+  if (!storage || !current.readable) return current;
+
+  const next: RecentReference[] = [
+    { ...reference, lastUsedAt: Date.now() },
+    ...current.items.filter(
+      (item) => !(item.id === reference.id && item.kind === reference.kind),
+    ),
+  ].slice(0, MAX_RECENT_REFERENCES);
+
+  try {
+    storage.setItem(RECENT_REFERENCES_STORAGE_KEY, JSON.stringify(next));
+    return { items: next, readable: true };
+  } catch {
+    return { items: current.items, readable: false };
+  }
+}

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,
@@ -296,6 +298,9 @@ export default function DeckEditor() {
     handleSubmit: handleQuestionSubmit,
     handleSkip: handleQuestionSkip,
   } = useGuidedQuestionFlow({
+    stateKey: "guided-questions",
+    browserTabId: TAB_ID,
+    queryKey: ["guided-questions"],
     submitMessage: "Here are my answers — go ahead and create the slides.",
     skipMessage:
       "Skip the questions — just go ahead and create the slides with your best judgment.",
@@ -327,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;
@@ -938,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"
@@ -975,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}
@@ -1049,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 && (
           <>
@@ -1068,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 =
@@ -1110,8 +1123,6 @@ export default function DeckEditor() {
                     setGeneratingSlideSelected(true);
                     if (window.innerWidth < 768) setSidebarOpen(false);
                   }}
-                  addSlideGenerating={addSlideGenerating}
-                  onAddSlideGeneratingChange={setAddSlideGenerating}
                 />
               </DndContext>
             </div>
@@ -1162,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,
@@ -1194,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