@agent-native/core 0.130.2 → 0.131.3

package/corpus/templates/slides/app/components/deck/DeckCard.tsx

@@ -2,12 +2,15 @@ import { useT } from "@agent-native/core/client/i18n";
 import { CreativeContextShareSheet } from "@agent-native/creative-context/client";
 import { VisibilityBadge } from "@agent-native/toolkit/sharing";
 import {
+  IconBuildingCommunity,
   IconDots,
   IconTrash,
   IconCopy,
   IconPencil,
   IconPalette,
   IconPlus,
+  IconStar,
+  IconStarFilled,
 } from "@tabler/icons-react";
 import { useState, useRef, useEffect } from "react";
 import { Link } from "react-router";
@@ -28,8 +31,12 @@ interface DeckCardProps {
   onDelete: (id: string) => void;
   onRename: (id: string, newTitle: string) => void;
   onDuplicate: (id: string) => void;
+  onToggleStar: (id: string, starred: boolean) => void;
   isDuplicating?: boolean;
   designSystemTitle?: string | null;
+  isWorkspaceDefault?: boolean;
+  canSetWorkspaceDefault?: boolean;
+  onSetWorkspaceDefault?: (id: string, isDefault: boolean) => void;
 }
 
 export default function DeckCard({
@@ -37,8 +44,12 @@ export default function DeckCard({
   onDelete,
   onRename,
   onDuplicate,
+  onToggleStar,
   isDuplicating = false,
   designSystemTitle,
+  isWorkspaceDefault = false,
+  canSetWorkspaceDefault = false,
+  onSetWorkspaceDefault,
 }: DeckCardProps) {
   const t = useT();
   const firstSlide = deck.slides?.[0];
@@ -48,6 +59,7 @@ export default function DeckCard({
   const [contextOpen, setContextOpen] = useState(false);
   const inputRef = useRef<HTMLInputElement>(null);
   const pendingRenameRef = useRef(false);
+  const pendingWorkspaceDefaultRef = useRef(false);
 
   useEffect(() => {
     if (isRenaming) {
@@ -133,6 +145,12 @@ export default function DeckCard({
             <span className="shrink-0 whitespace-nowrap">
               {deck.slides.length} slide{deck.slides.length !== 1 ? "s" : ""}
             </span>
+            {isWorkspaceDefault && (
+              <span className="inline-flex shrink-0 items-center gap-1 rounded border border-[#609FF8]/40 px-1.5 py-0.5 text-[10px] text-[#609FF8]">
+                <IconBuildingCommunity className="h-3 w-3 shrink-0" />
+                {t("home.workspaceDefaultBadge")}
+              </span>
+            )}
             {deck.designSystemId && (
               <span className="inline-flex min-w-0 max-w-full items-center gap-1 rounded border border-border px-1.5 py-0.5 text-[10px] text-muted-foreground/80">
                 <IconPalette className="h-3 w-3 shrink-0 text-[#609FF8]" />
@@ -145,8 +163,30 @@ export default function DeckCard({
         </div>
       </Link>
 
-      {/* Menu Button - always visible on touch devices */}
-      <div className="absolute top-2 end-2 sm:opacity-0 sm:group-hover:opacity-100">
+      {/* Star + menu buttons - always visible on touch devices */}
+      <div className="absolute top-2 end-2 flex items-center gap-1">
+        {deck.createdByMe !== false && (
+          <button
+            onClick={(e) => {
+              e.preventDefault();
+              e.stopPropagation();
+              onToggleStar(deck.id, !deck.starred);
+            }}
+            className={`rounded-md border border-border bg-black/60 p-2 backdrop-blur-sm hover:bg-black/80 sm:p-1.5 ${
+              deck.starred ? "" : "sm:opacity-0 sm:group-hover:opacity-100"
+            }`}
+            aria-label={
+              deck.starred ? t("home.unstarDeck") : t("home.starDeck")
+            }
+            aria-pressed={Boolean(deck.starred)}
+          >
+            {deck.starred ? (
+              <IconStarFilled className="h-3.5 w-3.5 text-[#F5C451]" />
+            ) : (
+              <IconStar className="h-3.5 w-3.5 text-foreground/70" />
+            )}
+          </button>
+        )}
         <DropdownMenu open={menuOpen} onOpenChange={setMenuOpen}>
           <DropdownMenuTrigger asChild>
             <button
@@ -154,7 +194,7 @@ export default function DeckCard({
                 e.preventDefault();
                 e.stopPropagation();
               }}
-              className="p-2 sm:p-1.5 rounded-md bg-black/60 backdrop-blur-sm border border-border hover:bg-black/80"
+              className="p-2 sm:p-1.5 rounded-md bg-black/60 backdrop-blur-sm border border-border hover:bg-black/80 sm:opacity-0 sm:group-hover:opacity-100"
               aria-label={t("raw.deckOptions")}
             >
               <IconDots className="w-3.5 h-3.5 text-foreground/70" />
@@ -169,6 +209,16 @@ export default function DeckCard({
                 pendingRenameRef.current = false;
                 setIsRenaming(true);
               }
+              // Opening a modal dialog while this menu is still tearing down
+              // leaves `pointer-events: none` stuck on <body>: two dismissable
+              // layers overlap and the survivor never restores the style. Wait
+              // for the menu to finish closing, and keep focus off the trigger
+              // so the dialog owns it.
+              if (pendingWorkspaceDefaultRef.current) {
+                e.preventDefault();
+                pendingWorkspaceDefaultRef.current = false;
+                onSetWorkspaceDefault?.(deck.id, !isWorkspaceDefault);
+              }
             }}
           >
             <DropdownMenuItem
@@ -200,6 +250,20 @@ export default function DeckCard({
               <IconPlus className="w-3.5 h-3.5 me-2" />
               {t("creativeContext.addToContext" /* i18n-key-ignore */)}
             </DropdownMenuItem>
+            {canSetWorkspaceDefault && onSetWorkspaceDefault && (
+              <DropdownMenuItem
+                onSelect={(event) => {
+                  event.preventDefault();
+                  pendingWorkspaceDefaultRef.current = true;
+                  setMenuOpen(false);
+                }}
+              >
+                <IconBuildingCommunity className="w-3.5 h-3.5 me-2" />
+                {isWorkspaceDefault
+                  ? t("home.clearWorkspaceDefault")
+                  : t("home.setWorkspaceDefault")}
+              </DropdownMenuItem>
+            )}
             <DropdownMenuSeparator />
             <DropdownMenuItem
               onSelect={() => {

package/corpus/templates/slides/app/components/deck/SlideRenderer.tsx

@@ -219,6 +219,29 @@ function measureContentBounds(target: HTMLElement): {
   minX: number;
   minY: number;
 } {
+  const descendants = Array.from(
+    target.querySelectorAll<HTMLElement>("*"),
+  ).filter((element) => element.tagName.toLowerCase() !== "style");
+  const isFreeformElement = (element: HTMLElement) => {
+    let current: HTMLElement | null = element;
+    while (current && current !== target) {
+      const position =
+        current.style.position || window.getComputedStyle(current).position;
+      if (
+        current.classList.contains("fmd-freeform-object") ||
+        current.classList.contains("fmd-text-box") ||
+        current.hasAttribute("data-slide-object-id") ||
+        position === "absolute" ||
+        position === "fixed"
+      ) {
+        return true;
+      }
+      current = current.parentElement;
+    }
+    return false;
+  };
+  const hasFreeformContent = descendants.some(isFreeformElement);
+
   const targetRect = target.getBoundingClientRect();
   // `scrollWidth` / `clientWidth` return CSS pixels; `getBoundingClientRect`
   // returns layout pixels after every ancestor transform. In presentation
@@ -238,11 +261,16 @@ function measureContentBounds(target: HTMLElement): {
 
   let minX = 0;
   let minY = 0;
-  let maxX = target.scrollWidth;
-  let maxY = target.scrollHeight;
-
-  for (const el of Array.from(target.querySelectorAll<HTMLElement>("*"))) {
-    if (el.tagName.toLowerCase() === "style") continue;
+  // Absolutely positioned objects intentionally move independently of the
+  // flow layout. They still expand scrollWidth/scrollHeight, but fitting the
+  // entire layer around them creates a feedback loop where dragging one object
+  // scales and shifts every sibling. When a layer contains freeform content,
+  // derive overflow from normal-flow element bounds instead.
+  let maxX = hasFreeformContent ? target.clientWidth : target.scrollWidth;
+  let maxY = hasFreeformContent ? target.clientHeight : target.scrollHeight;
+
+  for (const el of descendants) {
+    if (isFreeformElement(el)) continue;
     const rect = el.getBoundingClientRect();
     if (rect.width === 0 && rect.height === 0) continue;
 
@@ -258,8 +286,8 @@ function measureContentBounds(target: HTMLElement): {
   }
 
   return {
-    contentWidth: Math.max(target.scrollWidth, maxX - minX),
-    contentHeight: Math.max(target.scrollHeight, maxY - minY),
+    contentWidth: Math.max(target.clientWidth, maxX - minX),
+    contentHeight: Math.max(target.clientHeight, maxY - minY),
     minX,
     minY,
   };
@@ -316,7 +344,11 @@ function useSlideAutofit(
 
       for (const target of targets) {
         if (isEditing) {
-          resetTarget(target);
+          // Entering inline edit must not change the canvas geometry. The
+          // contenteditable attribute is observed below, so resetting the fit
+          // transform here made a horizontally fitted slide jump as soon as a
+          // user clicked its text. Freeze the most recent fit until the edit
+          // commits, then measure the saved HTML again.
           continue;
         }
 

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

@@ -2,6 +2,7 @@ import { useT } from "@agent-native/core/client/i18n";
 import { ShareButton } from "@agent-native/core/client/sharing";
 import { VisibilityBadge } from "@agent-native/toolkit/sharing";
 import {
+  IconBuildingCommunity,
   IconDots,
   IconPalette,
   IconStar,
@@ -34,6 +35,9 @@ interface DesignSystemCardProps {
   onClick: () => void;
   onSetDefault: () => void;
   onDelete: () => void;
+  isWorkspaceDefault?: boolean;
+  canSetWorkspaceDefault?: boolean;
+  onSetWorkspaceDefault?: (isDefault: boolean) => void;
 }
 
 function firstFontName(stack: string): string {
@@ -50,6 +54,9 @@ export function DesignSystemCard({
   onClick,
   onSetDefault,
   onDelete,
+  isWorkspaceDefault = false,
+  canSetWorkspaceDefault = false,
+  onSetWorkspaceDefault,
 }: DesignSystemCardProps) {
   const t = useT();
   const swatchColors = [
@@ -112,7 +119,7 @@ export function DesignSystemCard({
             resourceId={id}
             resourceTitle={title}
           />
-          {canManage && (
+          {(canManage || canSetWorkspaceDefault) && (
             <DropdownMenu modal={false}>
               <DropdownMenuTrigger asChild>
                 <Button
@@ -125,13 +132,25 @@ export function DesignSystemCard({
                 </Button>
               </DropdownMenuTrigger>
               <DropdownMenuContent align="end">
-                <DropdownMenuItem
-                  onClick={onDelete}
-                  className="text-red-400 focus:text-red-400"
-                >
-                  <IconTrash className="w-3.5 h-3.5 me-2" />
-                  {t("designSystems.delete")}
-                </DropdownMenuItem>
+                {canSetWorkspaceDefault && onSetWorkspaceDefault && (
+                  <DropdownMenuItem
+                    onClick={() => onSetWorkspaceDefault(!isWorkspaceDefault)}
+                  >
+                    <IconBuildingCommunity className="w-3.5 h-3.5 me-2" />
+                    {isWorkspaceDefault
+                      ? t("home.clearWorkspaceDefault")
+                      : t("home.setWorkspaceDefault")}
+                  </DropdownMenuItem>
+                )}
+                {canManage && (
+                  <DropdownMenuItem
+                    onClick={onDelete}
+                    className="text-red-400 focus:text-red-400"
+                  >
+                    <IconTrash className="w-3.5 h-3.5 me-2" />
+                    {t("designSystems.delete")}
+                  </DropdownMenuItem>
+                )}
               </DropdownMenuContent>
             </DropdownMenu>
           )}
@@ -174,6 +193,12 @@ export function DesignSystemCard({
           >
             {title}
           </h3>
+          {isWorkspaceDefault && (
+            <span className="ms-auto inline-flex shrink-0 items-center gap-1 rounded border border-[#609FF8]/40 px-1.5 py-0.5 text-[10px] text-[#609FF8]">
+              <IconBuildingCommunity className="h-3 w-3 shrink-0" />
+              {t("home.workspaceDefaultBadge")}
+            </span>
+          )}
           {isDefault && (
             <span className="ml-auto shrink-0 text-[10px] font-medium uppercase text-[#609FF8] bg-[#609FF8]/10 px-1.5 py-0.5 rounded">
               Default

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

@@ -57,6 +57,8 @@ interface EditorSidebarProps {
   recentEdits?: AttributedRecentEdit[];
   /** Deck aspect ratio (defaults to 16:9 when omitted) */
   aspectRatio?: AspectRatio;
+  /** True while a newly-created deck is being populated slide by slide. */
+  deckGenerating?: boolean;
 }
 
 /** Extract the slide id from a `{kind:"paths",paths:["slides.<id>"]}` edit. */
@@ -551,6 +553,7 @@ export default function EditorSidebar({
   slidePresence,
   recentEdits,
   aspectRatio,
+  deckGenerating = false,
 }: EditorSidebarProps) {
   const t = useT();
   const activeIndex = slides.findIndex((s) => s.id === activeSlideId);
@@ -574,6 +577,7 @@ export default function EditorSidebar({
     [],
   );
   const { generating, submit: agentSubmit } = useAgentGenerating();
+  const showGeneratingSlide = deckGenerating || addSlideGenerating;
 
   const registerSlideButton = useCallback(
     (slideId: string, node: HTMLButtonElement | null) => {
@@ -634,7 +638,7 @@ export default function EditorSidebar({
         <span className="text-xs font-medium text-muted-foreground uppercase tracking-wider">
           {t("editorSidebar.slides")}
         </span>
-        {addSlideGenerating ? (
+        {showGeneratingSlide ? (
           <IconLoader2 className="w-4 h-4 text-muted-foreground animate-spin" />
         ) : (
           <Tooltip>
@@ -676,7 +680,7 @@ export default function EditorSidebar({
             />
           ))}
         </SortableContext>
-        {addSlideGenerating && (
+        {showGeneratingSlide && (
           <GeneratingSlideSkeleton
             index={slides.length}
             aspectRatio={aspectRatio}