@agent-native/core 0.152.1 → 0.153.1

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

@@ -0,0 +1,75 @@
+import type { CSSProperties } from "react";
+import { createPortal } from "react-dom";
+
+import type {
+  SlideAlignmentGuide,
+  SlideObjectGeometry,
+} from "./slide-object-interactions";
+
+export interface AlignmentGuideViewport {
+  rect: Pick<DOMRect, "left" | "top" | "width" | "height">;
+  canvas: Pick<SlideObjectGeometry, "width" | "height">;
+}
+
+export function AlignmentGuides({
+  guides,
+  viewport,
+}: {
+  guides: readonly SlideAlignmentGuide[];
+  viewport: AlignmentGuideViewport | null;
+}) {
+  if (!viewport || guides.length === 0 || typeof document === "undefined") {
+    return null;
+  }
+
+  const scaleX =
+    viewport.canvas.width > 0 ? viewport.rect.width / viewport.canvas.width : 1;
+  const scaleY =
+    viewport.canvas.height > 0
+      ? viewport.rect.height / viewport.canvas.height
+      : 1;
+  const lineStyle: CSSProperties = {
+    position: "fixed",
+    pointerEvents: "none",
+    zIndex: 70,
+    backgroundColor: "hsl(var(--destructive))",
+    boxShadow: "0 0 0 1px hsl(var(--destructive) / 0.2)",
+  };
+
+  return createPortal(
+    <div data-slide-alignment-guides aria-hidden="true">
+      {guides.map((guide, index) => {
+        if (guide.orientation === "vertical") {
+          return (
+            <div
+              key={`vertical-${guide.position}-${index}`}
+              data-slide-alignment-guide="vertical"
+              style={{
+                ...lineStyle,
+                left: viewport.rect.left + guide.position * scaleX,
+                top: viewport.rect.top + guide.start * scaleY,
+                width: 1,
+                height: Math.max(1, (guide.end - guide.start) * scaleY),
+              }}
+            />
+          );
+        }
+
+        return (
+          <div
+            key={`horizontal-${guide.position}-${index}`}
+            data-slide-alignment-guide="horizontal"
+            style={{
+              ...lineStyle,
+              left: viewport.rect.left + guide.start * scaleX,
+              top: viewport.rect.top + guide.position * scaleY,
+              width: Math.max(1, (guide.end - guide.start) * scaleX),
+              height: 1,
+            }}
+          />
+        );
+      })}
+    </div>,
+    document.body,
+  );
+}

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

@@ -74,6 +74,8 @@ interface EditorToolbarProps {
    *  edit affordances disabled, matching Google Slides' viewer experience.
    *  Defaults to true for backward compatibility. */
   canEdit?: boolean;
+  /** Whether the user may create and manage comments without editing slides. */
+  canComment?: boolean;
   onTitleChange: (title: string) => void;
   slideCount: number;
   currentSlideIndex: number;
@@ -185,6 +187,7 @@ export default function EditorToolbar({
   addSlideGenerating = false,
   onAddSlideGeneratingChange,
   canEdit = true,
+  canComment = canEdit,
 }: EditorToolbarProps) {
   const t = useT();
   // Public decks default to the read-only presentation URL so recipients do
@@ -385,17 +388,17 @@ export default function EditorToolbar({
           run: onToggleDrawMode,
         });
       }
-      if (onTogglePinMode) {
-        commands.push({
-          id: "pin-comments",
-          group: "slideTools",
-          label: t("editorToolbar.pinComments"),
-          keywords: ["comment", "pin"],
-          icon: IconPin,
-          active: pinMode,
-          run: onTogglePinMode,
-        });
-      }
+    }
+    if (canComment && onTogglePinMode) {
+      commands.push({
+        id: "pin-comments",
+        group: "slideTools",
+        label: t("editorToolbar.pinComments"),
+        keywords: ["comment", "pin"],
+        icon: IconPin,
+        active: pinMode,
+        run: onTogglePinMode,
+      });
     }
     if (onToggleComments) {
       commands.push({
@@ -498,6 +501,7 @@ export default function EditorToolbar({
     return commands;
   }, [
     animationsOpen,
+    canComment,
     canEdit,
     commentsOpen,
     currentSlide,
@@ -632,7 +636,7 @@ export default function EditorToolbar({
       />
 
       {/* Consolidated editor menu */}
-      <div className="flex-shrink-0">
+      <div className="ml-auto flex-shrink-0">
         <DropdownMenu>
           <Tooltip>
             <TooltipTrigger asChild>
@@ -673,74 +677,70 @@ export default function EditorToolbar({
               </>
             )}
 
-            {canEdit &&
-              (onToggleAnimations ||
-                onToggleTweaks ||
-                onToggleDrawMode ||
-                onTogglePinMode) && (
-                <>
-                  <DropdownMenuSeparator />
-                  <DropdownMenuLabel>
-                    {t("editorToolbar.slideTools")}
-                  </DropdownMenuLabel>
-                  <DropdownMenuGroup>
-                    {currentSlide && onToggleAnimations && (
-                      <DropdownMenuItem
-                        onSelect={onToggleAnimations}
-                        className={
-                          animationsOpen
-                            ? "bg-accent text-accent-foreground"
-                            : undefined
-                        }
-                      >
-                        <IconBolt className="size-4" />
-                        {t("editorToolbar.elementAnimations")}
-                      </DropdownMenuItem>
-                    )}
-                    {onToggleTweaks && (
-                      <DropdownMenuItem
-                        onSelect={onToggleTweaks}
-                        className={
-                          tweaksOpen
-                            ? "bg-accent text-accent-foreground"
-                            : undefined
-                        }
-                      >
-                        <IconAdjustments className="size-4" />
-                        {t("editorToolbar.tweaks")}
-                      </DropdownMenuItem>
-                    )}
-                    {onToggleDrawMode && (
-                      <DropdownMenuItem
-                        onSelect={onToggleDrawMode}
-                        data-toolbar-draw-button
-                        className={
-                          drawMode
-                            ? "bg-accent text-accent-foreground"
-                            : undefined
-                        }
-                      >
-                        <IconPencilPlus className="size-4" />
-                        {t("editorToolbar.drawOnSlide")}
-                      </DropdownMenuItem>
-                    )}
-                    {onTogglePinMode && (
-                      <DropdownMenuItem
-                        onSelect={onTogglePinMode}
-                        data-toolbar-pin-button
-                        className={
-                          pinMode
-                            ? "bg-accent text-accent-foreground"
-                            : undefined
-                        }
-                      >
-                        <IconPin className="size-4" />
-                        {t("editorToolbar.pinComments")}
-                      </DropdownMenuItem>
-                    )}
-                  </DropdownMenuGroup>
-                </>
-              )}
+            {((canEdit &&
+              (onToggleAnimations || onToggleTweaks || onToggleDrawMode)) ||
+              (canComment && onTogglePinMode)) && (
+              <>
+                <DropdownMenuSeparator />
+                <DropdownMenuLabel>
+                  {t("editorToolbar.slideTools")}
+                </DropdownMenuLabel>
+                <DropdownMenuGroup>
+                  {canEdit && currentSlide && onToggleAnimations && (
+                    <DropdownMenuItem
+                      onSelect={onToggleAnimations}
+                      className={
+                        animationsOpen
+                          ? "bg-accent text-accent-foreground"
+                          : undefined
+                      }
+                    >
+                      <IconBolt className="size-4" />
+                      {t("editorToolbar.elementAnimations")}
+                    </DropdownMenuItem>
+                  )}
+                  {canEdit && onToggleTweaks && (
+                    <DropdownMenuItem
+                      onSelect={onToggleTweaks}
+                      className={
+                        tweaksOpen
+                          ? "bg-accent text-accent-foreground"
+                          : undefined
+                      }
+                    >
+                      <IconAdjustments className="size-4" />
+                      {t("editorToolbar.tweaks")}
+                    </DropdownMenuItem>
+                  )}
+                  {canEdit && onToggleDrawMode && (
+                    <DropdownMenuItem
+                      onSelect={onToggleDrawMode}
+                      data-toolbar-draw-button
+                      className={
+                        drawMode
+                          ? "bg-accent text-accent-foreground"
+                          : undefined
+                      }
+                    >
+                      <IconPencilPlus className="size-4" />
+                      {t("editorToolbar.drawOnSlide")}
+                    </DropdownMenuItem>
+                  )}
+                  {canComment && onTogglePinMode && (
+                    <DropdownMenuItem
+                      onSelect={onTogglePinMode}
+                      data-toolbar-pin-button
+                      className={
+                        pinMode ? "bg-accent text-accent-foreground" : undefined
+                      }
+                    >
+                      <IconPin className="size-4" />
+                      {t("editorToolbar.pinComments")}
+                    </DropdownMenuItem>
+                  )}
+                </DropdownMenuGroup>
+              </>
+            )}
 
             {onToggleComments && (
               <>
@@ -825,7 +825,7 @@ export default function EditorToolbar({
           resourceId={deckId}
           resourceTitle={deckTitle}
           roleCopy={{
-            viewer: {
+            commenter: {
               label: t("editorToolbar.commenterRoleLabel"),
               description: t("editorToolbar.commenterRoleDescription"),
             },

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

@@ -6,6 +6,7 @@ import {
   IconCheck,
   IconLoader2,
   IconExternalLink,
+  IconChevronDown,
 } from "@tabler/icons-react";
 import { useState, type ReactNode } from "react";
 
@@ -86,7 +87,7 @@ export default function ShareDialog({ deck, children }: ShareDialogProps) {
       <PopoverTrigger asChild>{children}</PopoverTrigger>
       <PopoverContent
         align="end"
-        className="w-[420px] bg-card border-border p-4"
+        className="w-[min(420px,calc(100vw-2rem))] bg-card border-border p-4"
       >
         {showCloudUpgrade || isLocal ? (
           <CloudUpgrade
@@ -104,35 +105,37 @@ export default function ShareDialog({ deck, children }: ShareDialogProps) {
                 <IconShare2 className="w-4 h-4 text-[#609FF8]" />
                 {t("share.title")}
               </div>
-              <div className="text-muted-foreground text-xs mt-0.5">
-                {t("share.description", { title: deck.title })}
-              </div>
             </div>
 
             <div className="space-y-4">
               {!shareUrl ? (
                 <>
-                  <div className="bg-muted/50 rounded-lg p-3 border border-border">
-                    <h4 className="text-sm font-medium text-foreground/90 mb-2">
+                  <details className="group rounded-md border border-border bg-muted/30">
+                    <summary className="flex cursor-pointer list-none items-center justify-between gap-3 px-3 py-2.5 text-sm font-medium [&::-webkit-details-marker]:hidden">
                       {t("share.whatGetsShared")}
-                    </h4>
-                    <ul className="text-xs text-muted-foreground space-y-1">
-                      <li>
-                        {t("share.slideContent", {
-                          count: deck.slides.length,
-                        })}
-                      </li>
-                      <li>{t("share.presentationView")}</li>
-                    </ul>
-                    <h4 className="text-sm font-medium text-foreground/90 mt-3 mb-2">
-                      {t("share.whatStaysPrivate")}
-                    </h4>
-                    <ul className="text-xs text-muted-foreground space-y-1">
-                      <li>{t("share.speakerNotes")}</li>
-                      <li>{t("share.otherPresentations")}</li>
-                      <li>{t("share.editingAccess")}</li>
-                    </ul>
-                  </div>
+                      <IconChevronDown className="size-4 shrink-0 text-muted-foreground transition-transform group-open:rotate-180" />
+                    </summary>
+                    <div className="space-y-3 border-t border-border px-3 py-3 text-xs text-muted-foreground">
+                      <ul className="space-y-1">
+                        <li>
+                          {t("share.slideContent", {
+                            count: deck.slides.length,
+                          })}
+                        </li>
+                        <li>{t("share.presentationView")}</li>
+                      </ul>
+                      <div>
+                        <h4 className="mb-1 font-medium text-foreground/90">
+                          {t("share.whatStaysPrivate")}
+                        </h4>
+                        <ul className="space-y-1">
+                          <li>{t("share.speakerNotes")}</li>
+                          <li>{t("share.otherPresentations")}</li>
+                          <li>{t("share.editingAccess")}</li>
+                        </ul>
+                      </div>
+                    </div>
+                  </details>
 
                   {error && (
                     <p className="text-xs text-red-400 bg-red-400/10 px-3 py-2 rounded-lg">
@@ -194,7 +197,7 @@ export default function ShareDialog({ deck, children }: ShareDialogProps) {
                     {t("share.openSharedLink")}
                   </a>
 
-                  <p className="text-[11px] text-muted-foreground/70 text-center">
+                  <p className="sr-only text-[11px] text-muted-foreground/70 text-center">
                     {t("share.anyoneWithLink")}
                   </p>
                 </>

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

@@ -12,6 +12,8 @@ import {
   IconAlignLeft,
   IconAlignRight,
   IconAngle,
+  IconArrowsLeftRight,
+  IconArrowsUpDown,
   IconArrowAutofitHeight,
   IconArrowAutofitWidth,
   IconBorderRadius,
@@ -20,7 +22,12 @@ import {
   IconDots,
   IconGridDots,
   IconItalic,
+  IconLayoutAlignBottom,
+  IconLayoutAlignCenter,
   IconLayoutAlignLeft,
+  IconLayoutAlignMiddle,
+  IconLayoutAlignRight,
+  IconLayoutAlignTop,
   IconLetterCase,
   IconList,
   IconListNumbers,
@@ -29,6 +36,8 @@ import {
   IconStackBack,
   IconStackFront,
   IconUnderline,
+  IconZoomIn,
+  IconZoomOut,
 } from "@tabler/icons-react";
 import type { ReactNode } from "react";
 
@@ -52,6 +61,10 @@ import {
 import { cn, shortcutLabel } from "@/lib/utils";
 
 import type { SlideListKind } from "./list-editing";
+import type {
+  SlideObjectAlignment,
+  SlideObjectDistribution,
+} from "./slide-object-interactions";
 import {
   backgroundCssValue,
   formatValue,
@@ -136,6 +149,10 @@ export function SlideContextToolbar({
   onBackgroundChange,
   onArrange,
   onToggleList,
+  objectSelectionCount = 0,
+  onAlignObjects,
+  onDistributeObjects,
+  zoomControls,
 }: {
   snapshot: SlideStyleSnapshot | null;
   background: string | undefined;
@@ -147,6 +164,16 @@ export function SlideContextToolbar({
   onBackgroundChange: (background: string) => void;
   onArrange?: (target: "front" | "back") => void;
   onToggleList?: (kind: SlideListKind) => void;
+  objectSelectionCount?: number;
+  onAlignObjects?: (alignment: SlideObjectAlignment) => void;
+  onDistributeObjects?: (distribution: SlideObjectDistribution) => void;
+  zoomControls?: {
+    value: number;
+    onZoomOut: () => void;
+    onZoomIn: () => void;
+    canZoomOut: boolean;
+    canZoomIn: boolean;
+  };
 }) {
   const t = useT();
   const documentColors = tokenPalette(designSystem, t).map(
@@ -189,6 +216,8 @@ export function SlideContextToolbar({
   // Null means the slide uses a background this picker cannot represent (named
   // utility, gradient); surface that as Mixed rather than guessing a hex.
   const slideBackground = backgroundCssValue(background);
+  const hasMultiObjectSelection = objectSelectionCount >= 2;
+  const canDistributeObjects = objectSelectionCount >= 3;
 
   return (
     <div
@@ -206,17 +235,113 @@ export function SlideContextToolbar({
           <div className={TOOLBAR_DIVIDER} />
         </>
       )}
+      {hasMultiObjectSelection && (
+        <>
+          <DropdownMenu>
+            <Tooltip>
+              <TooltipTrigger asChild>
+                <DropdownMenuTrigger asChild>
+                  <Button
+                    type="button"
+                    variant="ghost"
+                    size="icon"
+                    className={MENU_BUTTON_CLASS}
+                    aria-label={t("styleInspector.align")}
+                  >
+                    <IconLayoutAlignLeft className="size-3.5" />
+                  </Button>
+                </DropdownMenuTrigger>
+              </TooltipTrigger>
+              <TooltipContent>{t("styleInspector.align")}</TooltipContent>
+            </Tooltip>
+            <DropdownMenuContent
+              align="start"
+              className="w-44"
+              {...inlineEditSurfaceProps}
+            >
+              <DropdownMenuItem onSelect={() => onAlignObjects?.("left")}>
+                <IconLayoutAlignLeft className="size-4" />
+                {t("styleInspector.left")}
+              </DropdownMenuItem>
+              <DropdownMenuItem onSelect={() => onAlignObjects?.("center")}>
+                <IconLayoutAlignCenter className="size-4" />
+                {t("styleInspector.center")}
+              </DropdownMenuItem>
+              <DropdownMenuItem onSelect={() => onAlignObjects?.("right")}>
+                <IconLayoutAlignRight className="size-4" />
+                {t("styleInspector.right")}
+              </DropdownMenuItem>
+              <DropdownMenuItem onSelect={() => onAlignObjects?.("top")}>
+                <IconLayoutAlignTop className="size-4" />
+                {t("styleInspector.top")}
+              </DropdownMenuItem>
+              <DropdownMenuItem onSelect={() => onAlignObjects?.("middle")}>
+                <IconLayoutAlignMiddle className="size-4" />
+                {t("styleInspector.middle")}
+              </DropdownMenuItem>
+              <DropdownMenuItem onSelect={() => onAlignObjects?.("bottom")}>
+                <IconLayoutAlignBottom className="size-4" />
+                {t("styleInspector.bottom")}
+              </DropdownMenuItem>
+            </DropdownMenuContent>
+          </DropdownMenu>
+
+          <DropdownMenu>
+            <Tooltip>
+              <TooltipTrigger asChild>
+                <DropdownMenuTrigger asChild>
+                  <Button
+                    type="button"
+                    variant="ghost"
+                    size="icon"
+                    className={MENU_BUTTON_CLASS}
+                    aria-label={t("styleInspector.distribute")}
+                  >
+                    <IconArrowsLeftRight className="size-3.5" />
+                  </Button>
+                </DropdownMenuTrigger>
+              </TooltipTrigger>
+              <TooltipContent>
+                {`${t("styleInspector.distribute")} (${objectSelectionCount})`}
+              </TooltipContent>
+            </Tooltip>
+            <DropdownMenuContent
+              align="start"
+              className="w-52"
+              {...inlineEditSurfaceProps}
+            >
+              <DropdownMenuItem
+                disabled={!canDistributeObjects}
+                onSelect={() => onDistributeObjects?.("horizontal")}
+              >
+                <IconArrowsLeftRight className="size-4" />
+                {t("styleInspector.horizontal")}
+              </DropdownMenuItem>
+              <DropdownMenuItem
+                disabled={!canDistributeObjects}
+                onSelect={() => onDistributeObjects?.("vertical")}
+              >
+                <IconArrowsUpDown className="size-4" />
+                {t("styleInspector.vertical")}
+              </DropdownMenuItem>
+            </DropdownMenuContent>
+          </DropdownMenu>
+          <div className={TOOLBAR_DIVIDER} />
+        </>
+      )}
       {!snapshot ? (
-        <VisualColorPicker
-          label={t("styleInspector.slideBackground")}
-          value={slideBackground ?? ""}
-          mixed={slideBackground === null}
-          mixedLabel={t("styleInspector.mixed")}
-          documentColors={documentColors}
-          variant="swatch"
-          contentProps={inlineEditSurfaceProps}
-          onChange={onBackgroundChange}
-        />
+        hasMultiObjectSelection ? null : (
+          <VisualColorPicker
+            label={t("styleInspector.slideBackground")}
+            value={slideBackground ?? ""}
+            mixed={slideBackground === null}
+            mixedLabel={t("styleInspector.mixed")}
+            documentColors={documentColors}
+            variant="swatch"
+            contentProps={inlineEditSurfaceProps}
+            onChange={onBackgroundChange}
+          />
+        )
       ) : (
         <>
           {snapshot.isText ? (
@@ -799,6 +924,46 @@ export function SlideContextToolbar({
           </Popover>
         </>
       )}
+      {zoomControls && (
+        <>
+          <div className={TOOLBAR_DIVIDER} />
+          <Tooltip>
+            <TooltipTrigger asChild>
+              <Button
+                type="button"
+                variant="ghost"
+                size="icon"
+                className={MENU_BUTTON_CLASS}
+                onClick={zoomControls.onZoomOut}
+                disabled={!zoomControls.canZoomOut}
+                aria-label={t("raw.zoomOut")}
+              >
+                <IconZoomOut className="size-3.5" />
+              </Button>
+            </TooltipTrigger>
+            <TooltipContent>{t("raw.zoomOut")}</TooltipContent>
+          </Tooltip>
+          <span className="w-11 shrink-0 text-center text-xs tabular-nums text-muted-foreground">
+            {zoomControls.value}%
+          </span>
+          <Tooltip>
+            <TooltipTrigger asChild>
+              <Button
+                type="button"
+                variant="ghost"
+                size="icon"
+                className={MENU_BUTTON_CLASS}
+                onClick={zoomControls.onZoomIn}
+                disabled={!zoomControls.canZoomIn}
+                aria-label={t("raw.zoomIn")}
+              >
+                <IconZoomIn className="size-3.5" />
+              </Button>
+            </TooltipTrigger>
+            <TooltipContent>{t("raw.zoomIn")}</TooltipContent>
+          </Tooltip>
+        </>
+      )}
     </div>
   );
 }