@agent-native/core 0.152.1 → 0.153.0

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

@@ -88,6 +88,10 @@ import { shortcutLabel } from "@/lib/utils";
 import { enterSelectionMode } from "@/root";
 
 import type { DesignSystemData } from "../../../shared/api";
+import {
+  AlignmentGuides,
+  type AlignmentGuideViewport,
+} from "./AlignmentGuides";
 import { BlockBubbleMenu } from "./BlockBubbleMenu";
 import {
   createSlidesCanvasGestureController,
@@ -126,6 +130,7 @@ import {
 } from "./selection-overlay-measurement";
 import { decideSlideEscape } from "./slide-escape-arbiter";
 import {
+  alignSlideObjectMembers,
   applySlideObjectMoveDelta,
   buildPastedSlideObjects,
   clientPointToSlideCoordinates,
@@ -138,6 +143,7 @@ import {
   ensureSlideTextBoxCanvas,
   findSlideObjectById,
   freezeSlideElementForFreeform,
+  distributeSlideObjectMembers,
   getSlideTextBoxDefaultColor,
   getSlideSelectionIdentity,
   getSlideSelectionMode,
@@ -146,7 +152,12 @@ import {
   isDeletableSlideElement,
   removeSlideObjectAndLayoutSpacer,
   resolveSlideObjectContainingBlock,
+  snapSlideObjectMove,
+  unionSlideObjectGeometries,
   type CopiedSlideObjects,
+  type SlideAlignmentGuide,
+  type SlideObjectAlignment,
+  type SlideObjectDistribution,
   type ResizeHandle,
   type SlideObjectGeometry,
   type SlideObjectZOrderTarget,
@@ -215,6 +226,22 @@ function isSlideCanvasShell(element: HTMLElement): boolean {
   );
 }
 
+function resolveSlidePositioningLayer(
+  element: HTMLElement,
+): HTMLElement | null {
+  const fmdSlide = element.closest<HTMLElement>(".fmd-slide");
+  if (fmdSlide) {
+    return (
+      Array.from(fmdSlide.children).find(
+        (child): child is HTMLElement =>
+          child instanceof HTMLElement &&
+          child.hasAttribute("data-fmd-autofit-content"),
+      ) ?? fmdSlide
+    );
+  }
+  return element.closest<HTMLElement>("[data-slide-canvas]");
+}
+
 function ensureBuilderId(element: HTMLElement): string {
   const existing = element.getAttribute("data-builder-id");
   if (existing) return existing;
@@ -643,6 +670,8 @@ interface SlideEditorProps {
    * edit, even before a `content` update has been flushed.
    */
   onInlineEditStart?: () => void;
+  /** Called after inline edit mode exits and its draft has been handed off. */
+  onInlineEditEnd?: () => void;
   /** Other users (besides the current user) currently viewing/editing THIS
    *  slide. Drives the soft same-slide-edit indicator on the canvas so a user
    *  knows before they clobber someone else's last-writer-wins text edit. */
@@ -1065,6 +1094,7 @@ export default function SlideEditor({
   slideTitle,
   deckId,
   onInlineEditStart,
+  onInlineEditEnd,
   presentUsers = [],
   recentEdits = [],
 }: SlideEditorProps) {
@@ -1180,6 +1210,10 @@ export default function SlideEditor({
     w: number;
     h: number;
   } | null>(null);
+  const [activeAlignmentGuides, setActiveAlignmentGuides] = useState<{
+    guides: SlideAlignmentGuide[];
+    viewport: AlignmentGuideViewport;
+  } | null>(null);
   /** Content overflow for the current slide (both axes 0 = fits). Reported by the
    *  renderer so we can prompt the agent to rewrite the slide HTML instead of
    *  silently scaling it down (which created unbalanced right/bottom margins
@@ -1799,6 +1833,7 @@ export default function SlideEditor({
     ) {
       onUpdateSlideRef.current({ content: html });
     }
+    onInlineEditEnd?.();
     inlineEditDraftRef.current = null;
     inlineEditInitialContentRef.current = null;
     const escape = slidesCanvasInteractionCore.escape({
@@ -1821,6 +1856,7 @@ export default function SlideEditor({
     slide.id,
     clearSelectedElement,
     syncSelectionToAppState,
+    onInlineEditEnd,
   ]);
 
   /** Enter edit mode on a smart block (text leaf or smart group) */
@@ -1880,10 +1916,11 @@ export default function SlideEditor({
       onUpdateSlideRef.current({ content: draft.content }, previousSlideId);
       inlineEditDraftRef.current = null;
     }
+    if (editing || draft) onInlineEditEnd?.();
     inlineEditInitialContentRef.current = null;
 
     previousSlideIdRef.current = slide.id;
-  }, [slide.id]);
+  }, [onInlineEditEnd, slide.id]);
 
   useEffect(() => {
     if (!editingEl) return;
@@ -3157,6 +3194,131 @@ export default function SlideEditor({
     [],
   );
 
+  const applyMultiObjectGeometryPlan = useCallback(
+    (
+      members: ReturnType<typeof collectMovableSlideObjects>,
+      plan: Map<string, SlideObjectGeometry>,
+    ) => {
+      if (
+        members.length < 2 ||
+        plan.size !== members.length ||
+        members.some((member) => !plan.has(member.objectId))
+      ) {
+        return;
+      }
+      for (const member of members) {
+        const geometry = plan.get(member.objectId);
+        if (geometry) applyObjectGeometry(member.element, geometry);
+      }
+      const builderIds = new Set(
+        members
+          .map((member) => member.element.getAttribute("data-builder-id"))
+          .filter((id): id is string => Boolean(id)),
+      );
+      refreshMultiSelectionRects(builderIds);
+      commitMultiObjectChange(members.map((member) => member.objectId));
+    },
+    [applyObjectGeometry, commitMultiObjectChange, refreshMultiSelectionRects],
+  );
+
+  const handleAlignSelectedObjects = useCallback(
+    (alignment: SlideObjectAlignment) => {
+      const selection = getObjectOperationSelection();
+      if (!selection || selection.elements.length < 2) return;
+      const members = collectMovableSlideObjects(
+        selection.elements,
+        getObjectGeometry,
+      );
+      if (members.length !== selection.elements.length) return;
+      applyMultiObjectGeometryPlan(
+        members,
+        alignSlideObjectMembers(members, alignment),
+      );
+    },
+    [
+      applyMultiObjectGeometryPlan,
+      getObjectGeometry,
+      getObjectOperationSelection,
+    ],
+  );
+
+  const handleDistributeSelectedObjects = useCallback(
+    (distribution: SlideObjectDistribution) => {
+      const selection = getObjectOperationSelection();
+      if (!selection || selection.elements.length < 3) return;
+      const members = collectMovableSlideObjects(
+        selection.elements,
+        getObjectGeometry,
+      );
+      if (members.length !== selection.elements.length) return;
+      applyMultiObjectGeometryPlan(
+        members,
+        distributeSlideObjectMembers(members, distribution),
+      );
+    },
+    [
+      applyMultiObjectGeometryPlan,
+      getObjectGeometry,
+      getObjectOperationSelection,
+    ],
+  );
+
+  const updateAlignmentGuides = useCallback(
+    (
+      guides: readonly SlideAlignmentGuide[],
+      positioningLayer: HTMLElement,
+      canvas: { width: number; height: number },
+    ) => {
+      if (guides.length === 0) {
+        setActiveAlignmentGuides(null);
+        return;
+      }
+      setActiveAlignmentGuides({
+        guides: [...guides],
+        viewport: {
+          rect: positioningLayer.getBoundingClientRect(),
+          canvas,
+        },
+      });
+    },
+    [],
+  );
+
+  const clearAlignmentGuides = useCallback(() => {
+    setActiveAlignmentGuides(null);
+  }, []);
+
+  const getSnapPeerGeometries = useCallback(
+    (movingElements: readonly HTMLElement[], positioningLayer: HTMLElement) => {
+      const slideRoot =
+        positioningLayer.closest<HTMLElement>(".fmd-slide") ??
+        positioningLayer.closest<HTMLElement>("[data-slide-canvas]");
+      if (!slideRoot || movingElements.length === 0) return [];
+
+      const movingSet = new Set(movingElements);
+      const containingBlock = resolveSlideObjectContainingBlock(
+        movingElements[0],
+        positioningLayer,
+      );
+      return Array.from(
+        slideRoot.querySelectorAll<HTMLElement>("[data-slide-object-id]"),
+      )
+        .filter(
+          (element) =>
+            !movingSet.has(element) &&
+            !movingElements.some((moving) => moving.contains(element)) &&
+            (element.closest<HTMLElement>(".fmd-slide") ??
+              element.closest<HTMLElement>("[data-slide-canvas]")) ===
+              slideRoot &&
+            isPersistedFreeformObject(element) &&
+            resolveSlideObjectContainingBlock(element, positioningLayer) ===
+              containingBlock,
+        )
+        .map(getObjectGeometry);
+    },
+    [getObjectGeometry],
+  );
+
   const startElementDrag = useCallback(
     (
       e: React.PointerEvent,
@@ -3182,6 +3344,12 @@ export default function SlideEditor({
       ) {
         return;
       }
+      let positioningLayer =
+        resolveSlidePositioningLayer(element) ?? slideCanvas;
+      let snapCanvas = {
+        width: positioningLayer.offsetWidth || slideWidth,
+        height: positioningLayer.offsetHeight || slideHeight,
+      };
 
       // Pointer-down on the selection perimeter is a move gesture, never a
       // text caret placement. A selected object's body, however, has to keep
@@ -3220,6 +3388,14 @@ export default function SlideEditor({
         }
         promotedToFreeform = true;
         origin = getObjectGeometry(element);
+        const promotedPositioningLayer = resolveSlidePositioningLayer(element);
+        if (promotedPositioningLayer) {
+          positioningLayer = promotedPositioningLayer;
+          snapCanvas = {
+            width: positioningLayer.offsetWidth || slideWidth,
+            height: positioningLayer.offsetHeight || slideHeight,
+          };
+        }
         return true;
       };
 
@@ -3266,6 +3442,7 @@ export default function SlideEditor({
         window.removeEventListener("pointermove", onMove);
         window.removeEventListener("pointerup", onUp);
         window.removeEventListener("pointercancel", onCancel);
+        clearAlignmentGuides();
         if (activeGestureCancelRef.current === onCancel) {
           activeGestureCancelRef.current = null;
         }
@@ -3310,11 +3487,20 @@ export default function SlideEditor({
             stampBuilderIds(clone);
             activeElement = clone;
           }
+          const snap = snapSlideObjectMove({
+            moving: dragOrigin,
+            deltaX: gesture.canvasDelta.x,
+            deltaY: gesture.canvasDelta.y,
+            peers: getSnapPeerGeometries([activeElement], positioningLayer),
+            canvas: snapCanvas,
+            bypass: gesture.pointer.metaKey || gesture.pointer.ctrlKey,
+          });
           applyObjectGeometry(activeElement, {
             ...dragOrigin,
-            x: dragOrigin.x + gesture.canvasDelta.x,
-            y: dragOrigin.y + gesture.canvasDelta.y,
+            x: dragOrigin.x + snap.deltaX,
+            y: dragOrigin.y + snap.deltaY,
           });
+          updateAlignmentGuides(snap.guides, positioningLayer, snapCanvas);
           const selector = getBuilderSelector(activeElement);
           if (selector) selectElementForStyling(activeElement, selector);
           return { handled: true };
@@ -3423,10 +3609,14 @@ export default function SlideEditor({
     },
     [
       applyObjectGeometry,
+      clearAlignmentGuides,
+      getSnapPeerGeometries,
       getObjectGeometry,
       readCurrentSlideContentHtml,
       readOnly,
       selectElementForStyling,
+      snapSlideObjectMove,
+      updateAlignmentGuides,
     ],
   );
 
@@ -3621,7 +3811,6 @@ export default function SlideEditor({
       ) {
         return;
       }
-
       const promotions: Array<{
         element: HTMLElement;
         originalClassName: string;
@@ -3634,6 +3823,7 @@ export default function SlideEditor({
       let members: ReturnType<typeof collectMovableSlideObjects> = [];
       let prepared = false;
       let promotionsRestored = false;
+      let groupPositioningLayer: HTMLElement | null = null;
 
       const removeFreeformLayoutSpacer = (element: HTMLElement) => {
         const objectId = element.getAttribute("data-slide-object-id");
@@ -3767,6 +3957,7 @@ export default function SlideEditor({
           return false;
         }
 
+        groupPositioningLayer = positioningLayer;
         members = nextMembers;
         return true;
       };
@@ -3775,6 +3966,7 @@ export default function SlideEditor({
         window.removeEventListener("pointermove", onMove);
         window.removeEventListener("pointerup", onUp);
         window.removeEventListener("pointercancel", onCancel);
+        clearAlignmentGuides();
         if (activeGestureCancelRef.current === onCancel) {
           activeGestureCancelRef.current = null;
         }
@@ -3788,12 +3980,35 @@ export default function SlideEditor({
           // Claim the click only once a real drag starts, so a click without
           // movement on a multi-selected object remains normal editor input.
           suppressNextClickRef.current = true;
+          const moving = unionSlideObjectGeometries(
+            members.map((member) => member.start),
+          );
+          const positioningLayer = groupPositioningLayer;
+          if (!moving || !positioningLayer) {
+            return { handled: false, reason: "unhandled" };
+          }
+          const snapCanvas = {
+            width: positioningLayer.offsetWidth || slideWidth,
+            height: positioningLayer.offsetHeight || slideHeight,
+          };
+          const snap = snapSlideObjectMove({
+            moving,
+            deltaX: gesture.canvasDelta.x,
+            deltaY: gesture.canvasDelta.y,
+            peers: getSnapPeerGeometries(
+              members.map((member) => member.element),
+              positioningLayer,
+            ),
+            canvas: snapCanvas,
+            bypass: gesture.pointer.metaKey || gesture.pointer.ctrlKey,
+          });
           applySlideObjectMoveDelta(
             members,
-            gesture.canvasDelta.x,
-            gesture.canvasDelta.y,
+            snap.deltaX,
+            snap.deltaY,
             applyObjectGeometry,
           );
+          updateAlignmentGuides(snap.guides, positioningLayer, snapCanvas);
           refreshMultiSelectionRects(ids);
           return { handled: true };
         },
@@ -3899,12 +4114,17 @@ export default function SlideEditor({
     },
     [
       applyObjectGeometry,
+      clearAlignmentGuides,
       freezeElementForFreeformSelection,
-      refreshMultiSelectionRects,
+      getSnapPeerGeometries,
       getObjectGeometry,
       getSlideContent,
       readCurrentSlideContentHtml,
       readOnly,
+      refreshMultiSelectionRects,
+      snapSlideObjectMove,
+      unionSlideObjectGeometries,
+      updateAlignmentGuides,
     ],
   );
 
@@ -4787,6 +5007,10 @@ export default function SlideEditor({
   const isSelectedElementDraggable = selectedForDrag
     ? getComputedStyle(selectedForDrag).position === "absolute"
     : false;
+  const objectOperationSelection = getObjectOperationSelection();
+  const hasObjectSelection = objectOperationSelection !== null;
+  const objectSelectionCount = objectOperationSelection?.elements.length ?? 0;
+
   // Excalidraw slides have no selectable slide content, so the row collapses
   // to its slide-level state — but that state owns the background picker, and
   // SlideRenderer paints `slide.background` behind the drawing, so the row has
@@ -4811,6 +5035,9 @@ export default function SlideEditor({
         onBackgroundChange={applySlideBackground}
         onArrange={handleArrangeSelected}
         onToggleList={handleToggleList}
+        objectSelectionCount={objectSelectionCount}
+        onAlignObjects={handleAlignSelectedObjects}
+        onDistributeObjects={handleDistributeSelectedObjects}
       />
     </div>
   ) : null;
@@ -4831,13 +5058,14 @@ export default function SlideEditor({
         onBackgroundChange={applySlideBackground}
         onArrange={handleArrangeSelected}
         onToggleList={handleToggleList}
+        objectSelectionCount={objectSelectionCount}
+        onAlignObjects={handleAlignSelectedObjects}
+        onDistributeObjects={handleDistributeSelectedObjects}
         className="slide-context-toolbar--top-row"
       />
     </div>
   ) : null;
 
-  const hasObjectSelection = getObjectOperationSelection() !== null;
-
   return (
     <div
       className="relative flex h-full min-h-0 flex-1 flex-col overflow-hidden rounded-l-lg bg-[var(--slides-editor-surface)]"
@@ -5139,6 +5367,13 @@ export default function SlideEditor({
         <MarqueeRect rect={marquee} viewportRect={selectionViewportRect} />
       )}
 
+      {activeAlignmentGuides && (
+        <AlignmentGuides
+          guides={activeAlignmentGuides.guides}
+          viewport={activeAlignmentGuides.viewport}
+        />
+      )}
+
       {/* Floating "N selected" chip */}
       <MultiSelectChip
         count={multiSelection.size}

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

@@ -34,7 +34,7 @@ export function SlideOverflowWarning({
       // w-max/nowrap: the containing block is the zoomed slide canvas, so at
       // low zoom the banner would otherwise wrap to a height taller than its
       // own -top-12 offset and spill down over the slide.
-      className="absolute -top-12 left-0 z-20 flex w-max items-center gap-2 whitespace-nowrap rounded-md border border-foreground/40 px-2 py-1 text-xs text-foreground"
+      className="absolute -top-12 left-0 z-20 flex w-max items-center gap-2 whitespace-nowrap rounded-md bg-card px-2 py-1 text-xs text-foreground shadow-sm"
       onPointerDown={(event) => event.stopPropagation()}
       onClick={(event) => event.stopPropagation()}
     >

package/corpus/templates/slides/app/components/editor/canvas-interactions/slides-canvas-adapter.ts

@@ -61,9 +61,9 @@ const slidesCanvasInteractionConfig = {
   minSize: MIN_SLIDE_OBJECT_SIZE,
   capabilities: {
     multiSelection: true,
-    snapping: false,
-    alignment: false,
-    distribution: false,
+    snapping: true,
+    alignment: true,
+    distribution: true,
     grouping: false,
     rotation: false,
     marquee: true,

package/corpus/templates/slides/app/components/editor/slide-object-interactions.ts

@@ -821,6 +821,224 @@ export function applySlideObjectMoveDelta(
   }
 }
 
+export type SlideAlignmentGuideOrientation = "vertical" | "horizontal";
+
+export interface SlideAlignmentGuide {
+  orientation: SlideAlignmentGuideOrientation;
+  /** Position in the shared slide coordinate space. */
+  position: number;
+  /** Visible span in the shared slide coordinate space. */
+  start: number;
+  end: number;
+}
+
+export interface SlideObjectSnapResult {
+  deltaX: number;
+  deltaY: number;
+  guides: SlideAlignmentGuide[];
+}
+
+export type SlideObjectAlignment =
+  | "left"
+  | "center"
+  | "right"
+  | "top"
+  | "middle"
+  | "bottom";
+
+export type SlideObjectDistribution = "horizontal" | "vertical";
+
+export const SLIDE_OBJECT_SNAP_TOLERANCE = 8;
+
+function nearestSnapAdjustment(
+  movingStart: number,
+  movingSize: number,
+  proposedDelta: number,
+  targetPositions: number[],
+  tolerance: number,
+): { delta: number; position: number } | null {
+  const anchors = [0, movingSize / 2, movingSize];
+  let closest: { distance: number; delta: number; position: number } | null =
+    null;
+
+  for (const anchor of anchors) {
+    const proposedPosition = movingStart + proposedDelta + anchor;
+    for (const position of targetPositions) {
+      const adjustment = position - proposedPosition;
+      const distance = Math.abs(adjustment);
+      if (distance > tolerance) continue;
+      if (!closest || distance < closest.distance) {
+        closest = { distance, delta: proposedDelta + adjustment, position };
+      }
+    }
+  }
+
+  return closest ? { delta: closest.delta, position: closest.position } : null;
+}
+
+function uniquePositions(positions: number[]): number[] {
+  return Array.from(new Set(positions));
+}
+
+function objectAnchorPositions(
+  objects: readonly SlideObjectGeometry[],
+  axis: "x" | "y",
+): number[] {
+  return objects.flatMap((object) => {
+    const start = axis === "x" ? object.x : object.y;
+    const size = axis === "x" ? object.width : object.height;
+    return [start, start + size / 2, start + size];
+  });
+}
+
+/**
+ * Snap a proposed object/group delta to nearby peer or canvas anchors. The
+ * moving geometry is the object itself for a single drag and the union bounds
+ * for a group drag. The caller can bypass this transient behavior with the
+ * platform modifier used by Figma (Cmd/Ctrl) without changing persisted data.
+ */
+export function snapSlideObjectMove({
+  moving,
+  deltaX,
+  deltaY,
+  peers,
+  canvas,
+  tolerance = SLIDE_OBJECT_SNAP_TOLERANCE,
+  bypass = false,
+}: {
+  moving: SlideObjectGeometry;
+  deltaX: number;
+  deltaY: number;
+  peers: readonly SlideObjectGeometry[];
+  canvas?: { width: number; height: number };
+  tolerance?: number;
+  bypass?: boolean;
+}): SlideObjectSnapResult {
+  if (bypass) return { deltaX, deltaY, guides: [] };
+
+  const xTargets = objectAnchorPositions(peers, "x");
+  const yTargets = objectAnchorPositions(peers, "y");
+  if (canvas) {
+    xTargets.push(0, canvas.width / 2, canvas.width);
+    yTargets.push(0, canvas.height / 2, canvas.height);
+  }
+
+  const xSnap = nearestSnapAdjustment(
+    moving.x,
+    moving.width,
+    deltaX,
+    uniquePositions(xTargets),
+    tolerance,
+  );
+  const ySnap = nearestSnapAdjustment(
+    moving.y,
+    moving.height,
+    deltaY,
+    uniquePositions(yTargets),
+    tolerance,
+  );
+  const guides: SlideAlignmentGuide[] = [];
+  if (xSnap) {
+    guides.push({
+      orientation: "vertical",
+      position: xSnap.position,
+      start: 0,
+      end: canvas?.height ?? moving.y + moving.height,
+    });
+  }
+  if (ySnap) {
+    guides.push({
+      orientation: "horizontal",
+      position: ySnap.position,
+      start: 0,
+      end: canvas?.width ?? moving.x + moving.width,
+    });
+  }
+
+  return {
+    deltaX: xSnap?.delta ?? deltaX,
+    deltaY: ySnap?.delta ?? deltaY,
+    guides,
+  };
+}
+
+export function unionSlideObjectGeometries(
+  geometries: readonly SlideObjectGeometry[],
+): SlideObjectGeometry | null {
+  if (geometries.length === 0) return null;
+  const left = Math.min(...geometries.map((geometry) => geometry.x));
+  const top = Math.min(...geometries.map((geometry) => geometry.y));
+  const right = Math.max(
+    ...geometries.map((geometry) => geometry.x + geometry.width),
+  );
+  const bottom = Math.max(
+    ...geometries.map((geometry) => geometry.y + geometry.height),
+  );
+  return { x: left, y: top, width: right - left, height: bottom - top };
+}
+
+export function alignSlideObjectMembers(
+  members: readonly SlideObjectMoveMember[],
+  alignment: SlideObjectAlignment,
+): Map<string, SlideObjectGeometry> {
+  const bounds = unionSlideObjectGeometries(
+    members.map((member) => member.start),
+  );
+  if (!bounds) return new Map();
+
+  const plan = new Map<string, SlideObjectGeometry>();
+  for (const member of members) {
+    const geometry = { ...member.start };
+    if (alignment === "left") geometry.x = bounds.x;
+    if (alignment === "center") {
+      geometry.x = bounds.x + (bounds.width - geometry.width) / 2;
+    }
+    if (alignment === "right") {
+      geometry.x = bounds.x + bounds.width - geometry.width;
+    }
+    if (alignment === "top") geometry.y = bounds.y;
+    if (alignment === "middle") {
+      geometry.y = bounds.y + (bounds.height - geometry.height) / 2;
+    }
+    if (alignment === "bottom") {
+      geometry.y = bounds.y + bounds.height - geometry.height;
+    }
+    plan.set(member.objectId, geometry);
+  }
+  return plan;
+}
+
+export function distributeSlideObjectMembers(
+  members: readonly SlideObjectMoveMember[],
+  distribution: SlideObjectDistribution,
+): Map<string, SlideObjectGeometry> {
+  if (members.length < 3) return new Map();
+
+  const axis = distribution === "horizontal" ? "x" : "y";
+  const size = distribution === "horizontal" ? "width" : "height";
+  const sorted = [...members].sort((left, right) => {
+    const positionDelta = left.start[axis] - right.start[axis];
+    return positionDelta || left.objectId.localeCompare(right.objectId);
+  });
+  const first = sorted[0].start[axis];
+  const lastEnd = Math.max(
+    ...sorted.map((member) => member.start[axis] + member.start[size]),
+  );
+  const occupied = sorted.reduce((sum, member) => sum + member.start[size], 0);
+  const gap = (lastEnd - first - occupied) / (sorted.length - 1);
+  const plan = new Map<string, SlideObjectGeometry>();
+  let cursor = first;
+
+  for (const member of sorted) {
+    const geometry = { ...member.start };
+    geometry[axis] = cursor;
+    plan.set(member.objectId, geometry);
+    cursor += member.start[size] + gap;
+  }
+
+  return plan;
+}
+
 export interface CopiedSlideObjects {
   html: string[];
 }