@agent-native/core 0.153.10 → 0.154.1

package/corpus/templates/slides/app/components/design-system/DesignSystemSetup.tsx

@@ -19,6 +19,7 @@ import {
   IconCheck,
   IconExternalLink,
   IconChevronDown,
+  IconRefresh,
 } from "@tabler/icons-react";
 import { useState, useCallback, useEffect, useRef, useMemo } from "react";
 import { toast } from "sonner";
@@ -59,6 +60,8 @@ interface DesignSystemSetupProps {
 interface GitHubLink {
   id: string;
   url: string;
+  ref?: string;
+  include?: string[];
 }
 
 interface UploadedFile {
@@ -81,6 +84,13 @@ interface BuilderSourceDetails {
   tokenValues?: Record<string, string>;
   docCount?: number;
   warning?: string;
+  githubSources?: Array<{
+    repoUrl: string;
+    ref?: string;
+    include?: string[];
+    exclude?: string[];
+  }>;
+  syncedAt?: string;
 }
 
 interface ExistingDesignSystem {
@@ -91,6 +101,25 @@ interface ExistingDesignSystem {
   builder?: BuilderSourceDetails | null;
 }
 
+interface BuilderIndexInput {
+  projectName?: string;
+  description?: string;
+  githubSources?: Array<{
+    repoUrl: string;
+    ref?: string;
+    include?: string[];
+    exclude?: string[];
+  }>;
+  githubRepoUrl?: string;
+  codeFiles?: Array<{
+    filename: string;
+    content: string;
+    mimeType?: string;
+    encoding?: "utf8" | "base64";
+  }>;
+  designMd?: string;
+}
+
 type OtherSource = "brand" | "code" | "files" | "existing" | "context";
 
 function normalizeWebsiteUrlInput(input: string): string | null {
@@ -134,6 +163,8 @@ export function DesignSystemSetup({
   const [websiteUrl, setWebsiteUrl] = useState("");
   const [websiteUrls, setWebsiteUrls] = useState<string[]>([]);
   const [githubUrl, setGithubUrl] = useState("");
+  const [githubRef, setGithubRef] = useState("");
+  const [githubPaths, setGithubPaths] = useState("");
   const [githubLinks, setGithubLinks] = useState<GitHubLink[]>([]);
   const [codeFiles, setCodeFiles] = useState<UploadedFile[]>([]);
   const [docFiles, setDocFiles] = useState<UploadedFile[]>([]);
@@ -211,6 +242,13 @@ export function DesignSystemSetup({
   const imageInputRef = useRef<HTMLInputElement>(null);
   const figInputRef = useRef<HTMLInputElement>(null);
   const updateSystemMutation = useActionMutation("update-design-system");
+  const syncSystemMutation = useActionMutation(
+    "sync-design-system-with-builder",
+  );
+  const indexSystemMutation = useActionMutation<
+    BuilderIndexResult,
+    BuilderIndexInput
+  >("index-design-system-with-builder");
 
   const {
     data: existingDs,
@@ -267,6 +305,8 @@ export function DesignSystemSetup({
       setWebsiteUrl("");
       setWebsiteUrls([]);
       setGithubUrl("");
+      setGithubRef("");
+      setGithubPaths("");
       setGithubLinks([]);
       setCodeFiles([]);
       setDocFiles([]);
@@ -323,9 +363,23 @@ export function DesignSystemSetup({
   const addGithubLink = useCallback(() => {
     const url = githubUrl.trim();
     if (!url) return;
-    setGithubLinks((prev) => [...prev, { id: crypto.randomUUID(), url }]);
+    const include = githubPaths
+      .split(/[\n,]/)
+      .map((path) => path.trim().replace(/^\/+|\/+$/g, ""))
+      .filter(Boolean);
+    setGithubLinks((prev) => [
+      ...prev,
+      {
+        id: crypto.randomUUID(),
+        url,
+        ...(githubRef.trim() ? { ref: githubRef.trim() } : {}),
+        ...(include.length > 0 ? { include: [...new Set(include)] } : {}),
+      },
+    ]);
     setGithubUrl("");
-  }, [githubUrl]);
+    setGithubRef("");
+    setGithubPaths("");
+  }, [githubPaths, githubRef, githubUrl]);
 
   const readTextFiles = useCallback(
     (
@@ -432,12 +486,66 @@ export function DesignSystemSetup({
     }
   };
 
+  const handleSync = useCallback(async () => {
+    if (!editingId || !existingDs?.builder?.githubSources?.length) return;
+    setGenerating(true);
+    try {
+      await syncSystemMutation.mutateAsync({ id: editingId });
+      toast.success(t("designSystemSetup.syncStarted"));
+    } catch (error) {
+      toast.error(t("designSystemSetup.syncFailed"), {
+        description:
+          error instanceof Error
+            ? error.message
+            : t("designSystemSetup.syncFailed"),
+      });
+    } finally {
+      setGenerating(false);
+    }
+  }, [editingId, existingDs, syncSystemMutation, t]);
+
   const handleGenerate = useCallback(async () => {
     if (editingId) {
       await handleEditSave();
       return;
     }
 
+    const isGithubOnlySource =
+      githubLinks.length > 0 &&
+      websiteUrls.length === 0 &&
+      codeFiles.length === 0 &&
+      !builderIndexResult &&
+      docFiles.length === 0 &&
+      imageFiles.length === 0 &&
+      !selectedSystemId &&
+      !brandNotes.trim() &&
+      !customInstructions.trim();
+    if (isGithubOnlySource) {
+      setGenerating(true);
+      try {
+        await indexSystemMutation.mutateAsync({
+          projectName: companyName.trim() || undefined,
+          githubSources: githubLinks.map((link) => ({
+            repoUrl: link.url,
+            ...(link.ref ? { ref: link.ref } : {}),
+            ...(link.include?.length ? { include: link.include } : {}),
+          })),
+        });
+        toast.success(t("designSystemSetup.generationStarted"));
+        onComplete();
+      } catch (error) {
+        toast.error(t("designSystemSetup.updateFailed"), {
+          description:
+            error instanceof Error
+              ? error.message
+              : t("designSystemSetup.updateFailed"),
+        });
+      } finally {
+        setGenerating(false);
+      }
+      return;
+    }
+
     const requestedTitle = companyName.trim();
     const localDesignSystemId = builderIndexResult?.localDesignSystemId;
     if (requestedTitle && localDesignSystemId) {
@@ -485,7 +593,15 @@ export function DesignSystemSetup({
 
     if (githubLinks.length > 0) {
       parts.push(
-        `\n## Connect Code: GitHub Repositories\nStart Builder DSI indexing for each repository with \`index-design-system-with-builder\`:\n${githubLinks.map((l) => `- ${l.url}`).join("\n")}\n\nBuilder is the source of truth for repo/code design-system indexing. The action also creates a local selectable proxy design system for Slides flows. If Builder is not connected, stop and tell me to connect Builder (free tier available) from Settings.`,
+        `\n## Connect Code: GitHub Repositories\nMake one call to \`index-design-system-with-builder\` with \`githubSources\` set to this JSON array:\n\n\`\`\`json\n${JSON.stringify(
+          githubLinks.map((link) => ({
+            repoUrl: link.url,
+            ...(link.ref ? { ref: link.ref } : {}),
+            ...(link.include?.length ? { include: link.include } : {}),
+          })),
+          null,
+          2,
+        )}\n\`\`\`\n\nBuilder is the source of truth for repo/code design-system indexing. The action creates one local selectable proxy design system for Slides flows. If Builder is not connected, stop and tell me to connect Builder (free tier available) from Settings.`,
       );
     }
 
@@ -610,6 +726,7 @@ export function DesignSystemSetup({
     onComplete,
     t,
     updateSystemMutation,
+    indexSystemMutation,
     existingDs,
   ]);
 
@@ -651,7 +768,16 @@ export function DesignSystemSetup({
               </div>
 
               {editingId && existingDs?.builder ? (
-                <BuilderSourceStatus builder={existingDs.builder} />
+                <BuilderSourceStatus
+                  builder={existingDs.builder}
+                  onSync={
+                    existingDs.builder.githubSources?.length &&
+                    existingDs.builder.sourceKind !== "mixed"
+                      ? handleSync
+                      : undefined
+                  }
+                  syncing={syncSystemMutation.isPending}
+                />
               ) : null}
 
               {!editingId && (
@@ -895,8 +1021,28 @@ export function DesignSystemSetup({
                         {t("designSystemSetup.add")}
                       </Button>
                     </div>
+                    <div className="grid gap-2 sm:grid-cols-2">
+                      <Input
+                        value={githubRef}
+                        onChange={(e) => setGithubRef(e.target.value)}
+                        placeholder={t("designSystemSetup.githubRef")}
+                        aria-label={t("designSystemSetup.githubRef")}
+                        className="bg-accent border-border text-foreground placeholder:text-muted-foreground"
+                      />
+                      <Input
+                        value={githubPaths}
+                        onChange={(e) => setGithubPaths(e.target.value)}
+                        placeholder={t("designSystemSetup.githubPaths")}
+                        aria-label={t("designSystemSetup.githubPaths")}
+                        className="bg-accent border-border text-foreground placeholder:text-muted-foreground"
+                      />
+                    </div>
                     <TagList
-                      items={githubLinks.map((l) => l.url)}
+                      items={githubLinks.map((l) =>
+                        [l.url, l.ref, l.include?.join(", ")]
+                          .filter(Boolean)
+                          .join(" · "),
+                      )}
                       onRemove={(i) =>
                         setGithubLinks((p) => p.filter((_, j) => j !== i))
                       }
@@ -1253,7 +1399,15 @@ function SourceAccordionRow({
   );
 }
 
-function BuilderSourceStatus({ builder }: { builder: BuilderSourceDetails }) {
+function BuilderSourceStatus({
+  builder,
+  onSync,
+  syncing = false,
+}: {
+  builder: BuilderSourceDetails;
+  onSync?: () => void;
+  syncing?: boolean;
+}) {
   const t = useT();
   const docs = builder.docCount ?? builder.docs?.length ?? 0;
   const tokens = Object.keys(builder.tokenValues ?? {}).length;
@@ -1357,20 +1511,39 @@ function BuilderSourceStatus({ builder }: { builder: BuilderSourceDetails }) {
           {statusTitle}
         </div>
       </div>
-      {builder.builderUrl ? (
-        <div className="mt-3 border-t border-border pt-3">
-          <a
-            href={withBuilderUtmTrackingParams(builder.builderUrl, {
-              campaign: "product",
-              content: "design_system_intelligence",
-            })}
-            target="_blank"
-            rel="noreferrer"
-            className="inline-flex items-center gap-1.5 text-xs font-medium text-foreground underline-offset-4 hover:underline"
-          >
-            {t("designSystemSetup.sourceOpenInBuilder")}
-            <IconExternalLink className="size-3.5" />
-          </a>
+      {builder.builderUrl || onSync ? (
+        <div className="mt-3 flex flex-wrap items-center gap-3 border-t border-border pt-3">
+          {builder.builderUrl ? (
+            <a
+              href={withBuilderUtmTrackingParams(builder.builderUrl, {
+                campaign: "product",
+                content: "design_system_intelligence",
+              })}
+              target="_blank"
+              rel="noreferrer"
+              className="inline-flex items-center gap-1.5 text-xs font-medium text-foreground underline-offset-4 hover:underline"
+            >
+              {t("designSystemSetup.sourceOpenInBuilder")}
+              <IconExternalLink className="size-3.5" />
+            </a>
+          ) : null}
+          {onSync ? (
+            <Button
+              type="button"
+              variant="ghost"
+              size="sm"
+              onClick={onSync}
+              disabled={syncing}
+              className="h-7 gap-1.5 px-2 text-xs"
+            >
+              <IconRefresh
+                className={cn("size-3.5", syncing && "animate-spin")}
+              />
+              {syncing
+                ? t("designSystemSetup.syncingSource")
+                : t("designSystemSetup.syncSource")}
+            </Button>
+          ) : null}
         </div>
       ) : null}
     </section>

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

@@ -1,12 +1,24 @@
 import { useT } from "@agent-native/core/client/i18n";
-import { IconLoader2, IconPlus, IconTextSize } from "@tabler/icons-react";
+import {
+  IconLoader2,
+  IconPlus,
+  IconTextSize,
+  IconTransitionRight,
+} from "@tabler/icons-react";
 import { useEffect, useRef, useState } from "react";
 
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
 import {
   Tooltip,
   TooltipContent,
   TooltipTrigger,
 } from "@/components/ui/tooltip";
+import type { Slide } from "@/context/DeckContext";
 import { useAgentGenerating } from "@/hooks/use-agent-generating";
 import { cn } from "@/lib/utils";
 
@@ -19,6 +31,15 @@ const IDLE_CLASS =
 const ACTIVE_CLASS = "bg-accent text-foreground";
 const DIVIDER_CLASS = "mx-1 h-4 w-px shrink-0 bg-border";
 
+type SlideTransition = NonNullable<Slide["transition"]>;
+
+const TRANSITIONS: { value: SlideTransition; labelKey: string }[] = [
+  { value: "instant", labelKey: "editorToolbar.transition_instant" },
+  { value: "fade", labelKey: "editorToolbar.transition_fade" },
+  { value: "slide", labelKey: "editorToolbar.transition_slide" },
+  { value: "zoom", labelKey: "editorToolbar.transition_zoom" },
+];
+
 /**
  * Add slide, undo, redo, and add-text-box — the actions that stay put
  * regardless of what is selected. Rendered at the head of the contextual
@@ -36,6 +57,8 @@ export function EditorActionCluster({
   onDuplicateCurrentSlide,
   textBoxMode,
   onToggleTextBoxMode,
+  slideTransition,
+  onChangeSlideTransition,
   className,
 }: {
   deckId: string;
@@ -49,12 +72,19 @@ export function EditorActionCluster({
   onDuplicateCurrentSlide?: () => void;
   textBoxMode?: boolean;
   onToggleTextBoxMode?: () => void;
+  slideTransition?: Slide["transition"];
+  onChangeSlideTransition?: (transition: SlideTransition) => void;
   className?: string;
 }) {
   const t = useT();
   const { generating, submit: agentSubmit } = useAgentGenerating();
   const [addSlideOpen, setAddSlideOpen] = useState(false);
   const addSlideRef = useRef<HTMLButtonElement>(null);
+  // "none" is a legacy alias the presentation view already treats as instant.
+  const activeTransition: SlideTransition =
+    !slideTransition || slideTransition === "none"
+      ? "instant"
+      : slideTransition;
 
   useEffect(() => {
     if (!generating) onAddSlideGeneratingChange?.(false);
@@ -125,6 +155,48 @@ export function EditorActionCluster({
           </Tooltip>
         </>
       )}
+
+      {onChangeSlideTransition && currentSlideId && (
+        <>
+          <div className={DIVIDER_CLASS} />
+          <DropdownMenu>
+            <Tooltip>
+              <TooltipTrigger asChild>
+                <DropdownMenuTrigger asChild>
+                  <button
+                    type="button"
+                    aria-label={t("editorToolbar.transition")}
+                    className={cn(
+                      BUTTON_CLASS,
+                      activeTransition === "instant"
+                        ? IDLE_CLASS
+                        : ACTIVE_CLASS,
+                    )}
+                  >
+                    <IconTransitionRight className="size-4" />
+                  </button>
+                </DropdownMenuTrigger>
+              </TooltipTrigger>
+              <TooltipContent>{t("editorToolbar.transition")}</TooltipContent>
+            </Tooltip>
+            <DropdownMenuContent align="start" className="w-40">
+              {TRANSITIONS.map((transition) => (
+                <DropdownMenuItem
+                  key={transition.value}
+                  onSelect={() => onChangeSlideTransition(transition.value)}
+                  className={
+                    activeTransition === transition.value
+                      ? "bg-accent text-accent-foreground"
+                      : undefined
+                  }
+                >
+                  {t(transition.labelKey)}
+                </DropdownMenuItem>
+              ))}
+            </DropdownMenuContent>
+          </DropdownMenu>
+        </>
+      )}
     </div>
   );
 }

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

@@ -17,8 +17,7 @@ import {
 import { CSS } from "@dnd-kit/utilities";
 import { appStateKeyForBrowserTab } from "@shared/app-state-tabs";
 import { hashSlideContent, type DeckFitState } from "@shared/slide-fit";
-import { useRef, useEffect } from "react";
-import { useCallback } from "react";
+import { useCallback, useEffect, useRef, useState } from "react";
 
 import SlideRenderer from "@/components/deck/SlideRenderer";
 import type { SlideOverflowInfo } from "@/components/deck/SlideRenderer";
@@ -34,6 +33,7 @@ import { getAspectRatioDims, type AspectRatio } from "@/lib/aspect-ratios";
 import { TAB_ID } from "@/lib/tab-id";
 
 import type { DesignSystemData } from "../../../shared/api";
+import { isSlideTextEditingTarget } from "./slide-text-targets";
 
 interface EditorSidebarProps {
   slides: Slide[];
@@ -198,7 +198,12 @@ function SortableSlideThumb({
         type="button"
         {...(readOnly ? {} : attributes)}
         {...(readOnly ? {} : listeners)}
-        onClick={onSelect}
+        onClick={(event) => {
+          // Safari does not focus a button on click, and the slide copy/paste
+          // and delete shortcuts are scoped to a focused thumbnail.
+          event.currentTarget.focus();
+          onSelect();
+        }}
         onFocus={onSelect}
         aria-label={t("editorSidebar.selectSlide", { number: index + 1 })}
         aria-current={isActive ? "true" : undefined}
@@ -317,6 +322,7 @@ export default function EditorSidebar({
   generatingSlideSelected = false,
   onSelectGeneratingSlide,
 }: EditorSidebarProps) {
+  const [thumbnailListScrolled, setThumbnailListScrolled] = useState(false);
   const slideButtonRefs = useRef(new Map<string, HTMLButtonElement>());
   const measurementsRef = useRef(
     new Map<
@@ -391,6 +397,10 @@ export default function EditorSidebar({
     measurementsRef.current.clear();
   }, [deckId, aspectRatio]);
 
+  useEffect(() => {
+    setThumbnailListScrolled(false);
+  }, [deckId]);
+
   useEffect(() => {
     return () => {
       if (writeTimerRef.current) clearTimeout(writeTimerRef.current);
@@ -419,12 +429,20 @@ export default function EditorSidebar({
   useEffect(() => {
     const handleKeyDown = (e: KeyboardEvent) => {
       if (e.key !== "ArrowUp" && e.key !== "ArrowDown") return;
-      // Don't intercept if user is typing in an input/textarea or contenteditable
+      // Text editing and selected canvas objects own arrow keys. The marker
+      // query also covers a transient focus loss after a native selection.
       const tag = (e.target as HTMLElement)?.tagName;
       if (
         tag === "INPUT" ||
         tag === "TEXTAREA" ||
-        (e.target as HTMLElement)?.isContentEditable
+        isSlideTextEditingTarget(
+          e.target,
+          document.activeElement,
+          document.querySelector(
+            '[contenteditable="true"], [data-editing-block="true"]',
+          ),
+        ) ||
+        document.querySelector('[data-slide-element-selected="true"]')
       )
         return;
 
@@ -454,39 +472,51 @@ export default function EditorSidebar({
 
   return (
     <div className="flex h-full min-h-0 w-48 flex-shrink-0 flex-col bg-background sm:w-52">
-      <div className="relative min-h-0 flex-1 space-y-1 overflow-y-auto overscroll-contain p-2">
-        <SortableContext
-          items={slides.map((s) => s.id)}
-          strategy={verticalListSortingStrategy}
+      <div
+        className="relative min-h-0 flex-1"
+        data-slides-thumbnail-scroll={
+          thumbnailListScrolled ? "scrolled" : "top"
+        }
+      >
+        <div
+          className="h-full min-h-0 space-y-1 overflow-y-auto overscroll-contain p-2"
+          onScroll={(event) => {
+            setThumbnailListScrolled(event.currentTarget.scrollTop > 1);
+          }}
         >
-          {slides.map((slide, index) => (
-            <SortableSlideThumb
-              key={slide.id}
-              slide={slide}
-              index={index}
-              isActive={slide.id === activeSlideId}
-              onSelect={() => onSelectSlide(slide.id)}
-              readOnly={readOnly}
-              registerButtonRef={registerSlideButton}
-              presenceUsers={slidePresence?.get(slide.id) ?? []}
+          <SortableContext
+            items={slides.map((s) => s.id)}
+            strategy={verticalListSortingStrategy}
+          >
+            {slides.map((slide, index) => (
+              <SortableSlideThumb
+                key={slide.id}
+                slide={slide}
+                index={index}
+                isActive={slide.id === activeSlideId}
+                onSelect={() => onSelectSlide(slide.id)}
+                readOnly={readOnly}
+                registerButtonRef={registerSlideButton}
+                presenceUsers={slidePresence?.get(slide.id) ?? []}
+                aspectRatio={aspectRatio}
+                designSystem={designSystem}
+                aiEditing={aiEditedSlideIds.has(slide.id)}
+                onOverflowChange={(info) =>
+                  handleSlideOverflowChange(slide, info)
+                }
+              />
+            ))}
+          </SortableContext>
+          {generatingSlide && (
+            <GeneratingSlideSkeleton
+              index={generatingSlide.index}
               aspectRatio={aspectRatio}
               designSystem={designSystem}
-              aiEditing={aiEditedSlideIds.has(slide.id)}
-              onOverflowChange={(info) =>
-                handleSlideOverflowChange(slide, info)
-              }
+              selected={generatingSlideSelected}
+              onSelect={onSelectGeneratingSlide}
             />
-          ))}
-        </SortableContext>
-        {generatingSlide && (
-          <GeneratingSlideSkeleton
-            index={generatingSlide.index}
-            aspectRatio={aspectRatio}
-            designSystem={designSystem}
-            selected={generatingSlideSelected}
-            onSelect={onSelectGeneratingSlide}
-          />
-        )}
+          )}
+        </div>
       </div>
     </div>
   );