@agent-native/core 0.152.0 → 0.153.0

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,
@@ -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/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,
@@ -52,6 +59,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 +147,9 @@ export function SlideContextToolbar({
   onBackgroundChange,
   onArrange,
   onToggleList,
+  objectSelectionCount = 0,
+  onAlignObjects,
+  onDistributeObjects,
 }: {
   snapshot: SlideStyleSnapshot | null;
   background: string | undefined;
@@ -147,6 +161,9 @@ 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;
 }) {
   const t = useT();
   const documentColors = tokenPalette(designSystem, t).map(
@@ -189,6 +206,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 +225,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 ? (