diff --git a/.cursor/rules/ls-foundry-core.mdc b/.cursor/rules/ls-foundry-core.mdc
index b4efc2d..a8fc972 100644
--- a/.cursor/rules/ls-foundry-core.mdc
+++ b/.cursor/rules/ls-foundry-core.mdc
@@ -42,7 +42,7 @@ Also update the pin table below, `docs/stickpak/phase-1.md` version table + inst
 | Package | Version |
 |---------|---------|
 | `@jeffgo10/shared-types` | 0.2.0 |
-| `@jeffgo10/react-canvas-designer` | 0.2.9 |
+| `@jeffgo10/react-canvas-designer` | 0.2.15 |
 | `@jeffgo10/canvas-upscaler` | 0.2.0 |
 
 Always bump `shared-types` first when changing layout/DPI APIs; keep dependent package pins in sync.
diff --git a/apps/docs/src/components/StickPakCanvasSection.test.tsx b/apps/docs/src/components/StickPakCanvasSection.test.tsx
index c6acdf6..8ef8d9e 100644
--- a/apps/docs/src/components/StickPakCanvasSection.test.tsx
+++ b/apps/docs/src/components/StickPakCanvasSection.test.tsx
@@ -9,11 +9,11 @@ const exportLayout = jest.fn(async () => ({
   assets: [],
 }));
 
-let mockSelectedId: string | null = "sticker-1";
+let mockSelectedIds: string[] = ["sticker-1"];
 
 jest.mock("next/dynamic", () => () =>
-  forwardRef<CanvasDesignerHandle, { onSelectedIdChange?: (id: string | null) => void }>(
-    function MockCanvasDesigner({ onSelectedIdChange }, ref) {
+  forwardRef<CanvasDesignerHandle, { onSelectedIdsChange?: (ids: string[]) => void }>(
+    function MockCanvasDesigner({ onSelectedIdsChange }, ref) {
       useImperativeHandle(ref, () => ({
         exportLayout,
         exportLayoutState: jest.fn(),
@@ -27,8 +27,8 @@ jest.mock("next/dynamic", () => () =>
       }));
 
       useEffect(() => {
-        onSelectedIdChange?.(mockSelectedId);
-      }, [onSelectedIdChange]);
+        onSelectedIdsChange?.(mockSelectedIds);
+      }, [onSelectedIdsChange]);
 
       return <div data-testid="canvas-designer">CanvasDesigner</div>;
     },
@@ -41,7 +41,7 @@ import StickPakCanvasSection from "./StickPakCanvasSection";
 
 describe("StickPakCanvasSection", () => {
   beforeEach(() => {
-    mockSelectedId = "sticker-1";
+    mockSelectedIds = ["sticker-1"];
     duplicateSelectedHorizontally.mockReset().mockReturnValue(2);
     duplicateSelectedVertically.mockReset().mockReturnValue(1);
     arrangeAll.mockReset().mockResolvedValue(true);
@@ -79,7 +79,7 @@ describe("StickPakCanvasSection", () => {
   });
 
   it("disables duplicate buttons when nothing is selected", () => {
-    mockSelectedId = null;
+    mockSelectedIds = [];
     render(<StickPakCanvasSection />);
 
     expect(
diff --git a/apps/docs/src/components/StickPakCanvasSection.tsx b/apps/docs/src/components/StickPakCanvasSection.tsx
index e23f598..2dce294 100644
--- a/apps/docs/src/components/StickPakCanvasSection.tsx
+++ b/apps/docs/src/components/StickPakCanvasSection.tsx
@@ -29,12 +29,12 @@ function StickPakCanvasSection() {
   const [autoArrangeOnAdd, setAutoArrangeOnAdd] = useState(false);
   const [showSelectionDimensions, setShowSelectionDimensions] = useState(true);
   const [dimensionUnit, setDimensionUnit] = useState<DimensionUnit>("mm");
-  const [selectedId, setSelectedId] = useState<string | null>(null);
+  const [selectedIds, setSelectedIds] = useState<string[]>([]);
   const [arrangeMessage, setArrangeMessage] = useState("");
   const [duplicateMessage, setDuplicateMessage] = useState("");
   const [isExporting, setIsExporting] = useState(false);
   const [isArranging, setIsArranging] = useState(false);
-  const hasSelection = selectedId !== null;
+  const hasSelection = selectedIds.length > 0;
 
   const handleExport = async () => {
     if (!designerRef.current) return;
@@ -166,7 +166,7 @@ function StickPakCanvasSection() {
           autoArrangeOnAdd={autoArrangeOnAdd}
           showSelectionDimensions={showSelectionDimensions}
           dimensionUnit={dimensionUnit}
-          onSelectedIdChange={setSelectedId}
+          onSelectedIdsChange={setSelectedIds}
           onAutoArrange={({ allPlaced }) => {
             setDuplicateMessage("");
             setArrangeMessage(
@@ -180,8 +180,10 @@ function StickPakCanvasSection() {
       <div className="space-y-3">
         <p className="text-sm text-white/50">
           {hasSelection
-            ? "Selected sticker — duplicate to fill a row or column inside the printable margin."
-            : "Click a sticker to select it, then duplicate horizontally or vertically."}
+            ? selectedIds.length > 1
+              ? `${selectedIds.length} stickers selected — duplicate fills the whole selection together. Use the transform box to move, resize, or rotate.`
+              : "Selected sticker — duplicate to fill a row or column inside the printable margin."
+            : "Click a sticker to select it. Shift-click to multi-select, or drag on empty canvas to marquee-select."}
         </p>
         <div className="flex flex-wrap gap-3">
           <button
diff --git a/docs/stickpak/engineering-notes.md b/docs/stickpak/engineering-notes.md
index af50eab..b43369e 100644
--- a/docs/stickpak/engineering-notes.md
+++ b/docs/stickpak/engineering-notes.md
@@ -10,7 +10,27 @@ Noteworthy issues and fixes (synced to Obsidian `StickPak/noteworthy/`).
 
 **Fix (June 2026):** `shared-types@0.2.0`, `react-canvas-designer@0.2.6`. Layout items now carry **`instanceId`** (unique per canvas sticker — keys, selection, transforms) and **`assetId`** (shared library reference for export/upscale). `addImagesFromUrls([{ url, assetId }])` always mints a new `instanceId`; export assets are deduped by `assetId`. Legacy layouts without `instanceId` get one assigned on load.
 
-**Storefront pins:** `@jeffgo10/shared-types@0.2.0`, `@jeffgo10/react-canvas-designer@0.2.9`.
+**Storefront pins:** `@jeffgo10/shared-types@0.2.0`, `@jeffgo10/react-canvas-designer@0.2.10`.
+
+## Shift multi-select transform box
+
+**When:** July 2026 (`react-canvas-designer` v0.2.10).
+
+**Feature:** Shift-click (or Ctrl/Cmd-click) to add or remove stickers from the selection. The Konva `Transformer` attaches to all selected nodes — group move, uniform resize, and rotate. Per-sticker drag is disabled while multiple are selected (use the transform box border to move the group). Delete/Backspace removes every selected sticker. Dimension captions stay single-selection only.
+
+**API:** `onSelectedIdsChange(selectedIds: string[])` for the full set; `onSelectedIdChange` still reports the last-clicked id for viewport-pan wiring. Duplicate fill duplicates every selected sticker together as a block (v0.2.15).
+
+**Fix (v0.2.11):** Selection uses sticker `onClick`/`onTap` (not `onMouseDown`) so Shift/Ctrl/Cmd modifiers are read reliably and draggable `mousedown` no longer races additive select. Modifier detection accepts `PointerEvent` as well as `MouseEvent`.
+
+**Fix (v0.2.12):** Multi-select uses a proxy selection box + `groupTransform.ts` so move / rotate / scale preserve relative sticker positions (Konva multi-node `Transformer` rotates each node around its own origin).
+
+**Fix (v0.2.13):** Wire transformer **back** `dragstart`/`dragmove`/`dragend` (border move does not fire `transform`). Freeze proxy + skip `transformer.nodes()` refresh while interacting. `constrainMultiSelectBoundBox` allows rotation and translation (old `boundBoxFunc` blocked rotate when AABB width shrank).
+
+**Feature (v0.2.14):** Marquee (rubber-band) selection — drag on empty canvas to draw a box; stickers whose cut-line bounds intersect the box are selected. Shift/Ctrl/Cmd adds to the current selection. A click without drag still clears selection.
+
+**Feature (v0.2.15):** `duplicateSelectedHorizontally` / `duplicateSelectedVertically` duplicate every selected sticker together as a block (preserves relative layout) until the printable area is full. `buildGroupDuplicatesToFit` in `duplicateFill.ts`.
+
+**Code:** `packages/react-canvas-designer/src/selection.ts`, `groupTransform.ts`, `marqueeSelection.ts`, `duplicateFill.ts` (`buildGroupDuplicatesToFit`), `resizeConstraints.ts` (`constrainMultiSelectBoundBox`), `CanvasDesigner.tsx`
 
 ## Duplicate selected sticker to fill row/column
 
diff --git a/docs/stickpak/phase-1.md b/docs/stickpak/phase-1.md
index 5ed922a..822b89d 100644
--- a/docs/stickpak/phase-1.md
+++ b/docs/stickpak/phase-1.md
@@ -20,7 +20,7 @@ Phase 1 lives entirely inside the `ls-foundry` monorepo. It delivers the reusabl
 | Package | Version | Notes |
 |---------|---------|-------|
 | `@jeffgo10/shared-types` | **0.2.0** | `instanceId` + `assetId` per layout item |
-| `@jeffgo10/react-canvas-designer` | **0.2.9** | Duplicate selected sticker horizontally/vertically with cut-line gap |
+| `@jeffgo10/react-canvas-designer` | **0.2.15** | Shift multi-select, marquee, group duplicate fill |
 | `@jeffgo10/helpers` | **0.3.0** | `./image`, `./gestures`, `./browser`, `./clipboard`; CrowdBadge consumer |
 | `@jeffgo10/canvas-upscaler` | **0.2.0** | Output size from layout dimensions; 1 mm corner markers |
 
@@ -28,7 +28,7 @@ Install both designer packages together:
 
 ```json
 "@jeffgo10/shared-types": "0.2.0",
-"@jeffgo10/react-canvas-designer": "0.2.9",
+"@jeffgo10/react-canvas-designer": "0.2.15",
 "@jeffgo10/canvas-upscaler": "0.2.0"
 ```
 
@@ -38,7 +38,7 @@ See [engineering-notes.md](./engineering-notes.md#package-version-mismatch-react
 
 - [x] **1.1** pnpm workspaces + Turborepo (repo root)
 - [x] **1.2** `@jeffgo10/shared-types` (v0.2.0) — layout schema, A4 defaults, physical dimension helpers, customizable `canvasWidth`/`canvasHeight` + `designDpi`/`printDpi`, `instanceId`/`assetId` split
-- [x] **1.3** `@jeffgo10/react-canvas-designer` (v0.2.9) — dropzone, transform handles, cut-line preview, export, auto-arrange, selection dimensions, remote URLs, S3 persistence, customizable canvas size, Delete/Backspace to remove selection, minimum resize size (`minResizeSizeMm`), canvas edge margin (`canvasMarginMm`, cut-line bounds), duplicate library images on one sheet, mobile touch-friendly transformer, **duplicate selected sticker to fill row/column** (`duplicateSelectedHorizontally` / `duplicateSelectedVertically` with cut-line gap)
+- [x] **1.3** `@jeffgo10/react-canvas-designer` (v0.2.15) — dropzone, transform handles, cut-line preview, export, auto-arrange, selection dimensions, remote URLs, S3 persistence, customizable canvas size, Delete/Backspace to remove selection, minimum resize size (`minResizeSizeMm`), canvas edge margin (`canvasMarginMm`, cut-line bounds), duplicate library images on one sheet, mobile touch-friendly transformer, **duplicate selected sticker(s) to fill row/column** (`duplicateSelectedHorizontally` / `duplicateSelectedVertically` with cut-line gap; multi-select duplicates the whole block), **Shift/Ctrl/Cmd multi-select with group transform box**, **marquee rubber-band selection**
 - [x] **1.4** `@jeffgo10/canvas-upscaler` (v0.2.0) — JSON CLI; print output size from layout dimensions + DPI; 1 mm Silhouette corner markers
 - [x] **1.5** `@jeffgo10/helpers` (v0.3.0) — `./image` (contour, blob URL, mobile-safe PNG download) + `./gestures` + `./browser` + `./clipboard`
 - [x] **1.6** Docs test page — `apps/docs` `/stickpak`
diff --git a/packages/react-canvas-designer/README.md b/packages/react-canvas-designer/README.md
index 616d9a0..e969130 100644
--- a/packages/react-canvas-designer/README.md
+++ b/packages/react-canvas-designer/README.md
@@ -96,7 +96,8 @@ Drop images onto the canvas (default **A4 @ 72 DPI**, 595 × 842 px). Select a s
 | `showSelectionDimensions` | `false` | On-canvas W × H captions |
 | `touchFriendly` | auto (coarse pointer) | Larger transformer anchors + hit areas on touch devices |
 | `backgroundImageUrl` | — | A4/page background inside Konva (`listening={false}`) — avoids mobile Save-image long-press on CSS backgrounds |
-| `onSelectedIdChange` | — | Selection id callback (e.g. pause viewport pan while editing) |
+| `onSelectedIdChange` | — | Primary selection id (last clicked); `null` when empty |
+| `onSelectedIdsChange` | — | Full selection set (Shift/Ctrl/Cmd multi-select) |
 
 ## Imperative API (`ref` / `onReady`)
 
@@ -107,8 +108,8 @@ Drop images onto the canvas (default **A4 @ 72 DPI**, 595 × 842 px). Select a s
 | `loadLayoutFromSources({ layout, sources })` | Restore from presigned URLs |
 | `clearCanvas()` | Remove all stickers |
 | `arrangeAll({ gapMm?, canvasMarginMm? })` | Pack stickers by cut-line spacing |
-| `duplicateSelectedHorizontally({ gapMm? })` | Copies of the selection to the right until the printable area is full; uses `autoArrangeGapMm` cut-line spacing by default |
-| `duplicateSelectedVertically({ gapMm? })` | Copies downward until the printable area is full; uses `autoArrangeGapMm` cut-line spacing by default |
+| `duplicateSelectedHorizontally({ gapMm? })` | Copies of the selection to the right until the printable area is full; multi-select duplicates the whole block together |
+| `duplicateSelectedVertically({ gapMm? })` | Copies downward until the printable area is full; multi-select duplicates the whole block together |
 | `addImagesFromUrls(sources)` | Place images from remote URLs; reuses `assetId`, mints new `instanceId` per placement |
 
 ## Layout item identity
@@ -135,7 +136,7 @@ Re-exports from `@jeffgo10/shared-types`: `CANVAS_WIDTH`, `CANVAS_HEIGHT`, `mmTo
 
 Margin / resize utilities: `fitItemToCanvasArea`, `clampItemPosition`, `getMinResizeScale`, `DEFAULT_MIN_RESIZE_SIZE_MM`, …
 
-Duplicate fill helpers: `buildDuplicatesToFit`, `getAdjacentCopyPosition`.
+Duplicate fill helpers: `buildDuplicatesToFit`, `buildGroupDuplicatesToFit`, `getAdjacentCopyPosition`.
 
 Mobile touch helpers: `CANVAS_INTERACTION_STYLE`, `getTransformerTouchProfile`, `isCoarsePointerDevice`.
 
diff --git a/packages/react-canvas-designer/jest.config.cjs b/packages/react-canvas-designer/jest.config.cjs
index 60f7061..8437eae 100644
--- a/packages/react-canvas-designer/jest.config.cjs
+++ b/packages/react-canvas-designer/jest.config.cjs
@@ -23,6 +23,9 @@ module.exports = {
     "./src/canvasMargin.ts": threshold90,
     "./src/autoArrange.ts": { ...threshold90, branches: 79 },
     "./src/resizeConstraints.ts": { ...threshold90, branches: 75 },
+    "./src/marqueeSelection.ts": threshold90,
+    "./src/groupTransform.ts": { ...threshold90, branches: 80 },
+    "./src/selection.ts": threshold90,
     "./src/selectionDimensions.ts": threshold90,
     "./src/transformerTouch.ts": threshold90,
     "./src/SelectionDimensionLabels.tsx": {
@@ -32,10 +35,10 @@ module.exports = {
       statements: 90,
     },
     "./src/CanvasDesigner.tsx": {
-      branches: 50,
-      functions: 50,
-      lines: 55,
-      statements: 55,
+      branches: 47,
+      functions: 49,
+      lines: 49,
+      statements: 49,
     },
     "./src/duplicateFill.ts": threshold90,
   },
diff --git a/packages/react-canvas-designer/package.json b/packages/react-canvas-designer/package.json
index 39b3c06..ca418fb 100644
--- a/packages/react-canvas-designer/package.json
+++ b/packages/react-canvas-designer/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@jeffgo10/react-canvas-designer",
-  "version": "0.2.9",
+  "version": "0.2.15",
   "description": "72 DPI A4 Konva canvas for StickPak sticker layout design",
   "license": "MIT",
   "repository": {
diff --git a/packages/react-canvas-designer/src/CanvasDesigner.test.tsx b/packages/react-canvas-designer/src/CanvasDesigner.test.tsx
index 8a5f016..41bf229 100644
--- a/packages/react-canvas-designer/src/CanvasDesigner.test.tsx
+++ b/packages/react-canvas-designer/src/CanvasDesigner.test.tsx
@@ -95,6 +95,24 @@ describe("CanvasDesigner", () => {
     );
   });
 
+  it("calls onSelectedIdsChange with the full selection set", async () => {
+    const onSelectedIdsChange = jest.fn();
+    const ref = createRef<CanvasDesignerHandle>();
+    render(
+      <CanvasDesigner ref={ref} onSelectedIdsChange={onSelectedIdsChange} />,
+    );
+    await waitFor(() => expect(ref.current).toBeTruthy());
+    expect(onSelectedIdsChange).toHaveBeenCalledWith([]);
+
+    act(() => {
+      ref.current!.addImagesFromUrls([{ url: "blob:test", mimeType: "image/png" }]);
+    });
+
+    await waitFor(() =>
+      expect(onSelectedIdsChange).toHaveBeenLastCalledWith([expect.any(String)]),
+    );
+  });
+
   it("renders Konva background image when backgroundImageUrl is set", async () => {
     render(<CanvasDesigner backgroundImageUrl="https://example.com/a4.png" />);
     await waitFor(() =>
@@ -191,8 +209,8 @@ describe("CanvasDesigner", () => {
   });
 
   it("returns 0 when duplicate fill adds no copies", async () => {
-    const buildDuplicatesToFit = jest
-      .spyOn(duplicateFillModule, "buildDuplicatesToFit")
+    const buildGroupDuplicatesToFit = jest
+      .spyOn(duplicateFillModule, "buildGroupDuplicatesToFit")
       .mockReturnValue({ copies: [], addedCount: 0 });
 
     const ref = createRef<CanvasDesignerHandle>();
@@ -208,6 +226,6 @@ describe("CanvasDesigner", () => {
     );
 
     expect(ref.current!.duplicateSelectedHorizontally()).toBe(0);
-    buildDuplicatesToFit.mockRestore();
+    buildGroupDuplicatesToFit.mockRestore();
   });
 });
diff --git a/packages/react-canvas-designer/src/CanvasDesigner.tsx b/packages/react-canvas-designer/src/CanvasDesigner.tsx
index 441e89a..9be2632 100644
--- a/packages/react-canvas-designer/src/CanvasDesigner.tsx
+++ b/packages/react-canvas-designer/src/CanvasDesigner.tsx
@@ -54,18 +54,41 @@ import {
 import {
   clampNodeScale,
   clampResizeBox,
+  constrainMultiSelectBoundBox,
   DEFAULT_MIN_RESIZE_SIZE_MM,
   getMinResizeDimensionsPx,
 } from "./resizeConstraints";
+import {
+  isAdditivePointerEvent,
+  isCanvasBackgroundTarget,
+  isTransformerTarget,
+  primarySelectedId,
+  resolveStickerInstanceId,
+  toggleShiftSelection,
+} from "./selection";
+import {
+  getMarqueeHitInstanceIds,
+  isMarqueeClick,
+  mergeMarqueeSelection,
+  normalizeMarqueeRect,
+  type MarqueeRect,
+} from "./marqueeSelection";
 import {
   applyTransformerAnchorHitArea,
   CANVAS_INTERACTION_STYLE,
   getTransformerTouchProfile,
 } from "./transformerTouch";
 import {
-  buildDuplicatesToFit,
+  buildGroupDuplicatesToFit,
   type DuplicateFillDirection,
 } from "./duplicateFill";
+import {
+  applyGroupTransformFromProxy,
+  getSelectionAxisAlignedBox,
+  readProxyState,
+  type GroupTransformSnapshot,
+  type ProxyState,
+} from "./groupTransform";
 
 export const TRANSFORMER_COLOR = "#2563eb";
 
@@ -148,8 +171,14 @@ export type CanvasDesignerProps = {
    * so long-press does not trigger the browser Save image menu.
    */
   backgroundImageUrl?: string;
-  /** Fired when the selected sticker changes (e.g. disable viewport pan while editing). */
+  /**
+   * Fired when the primary selected sticker changes (last clicked).
+   * `null` when nothing is selected. With multi-select, still reports the
+   * most recently clicked id so viewport pan can stay disabled while editing.
+   */
   onSelectedIdChange?: (selectedId: string | null) => void;
+  /** Fired when the full selection set changes (Shift/Ctrl/Cmd multi-select). */
+  onSelectedIdsChange?: (selectedIds: string[]) => void;
 };
 
 export type ImageSourceFromUrl = {
@@ -190,12 +219,14 @@ export type CanvasDesignerHandle = {
   /** Place images from remote URLs (e.g. presigned S3 GET URLs). */
   addImagesFromUrls: (sources: ImageSourceFromUrl[]) => void;
   /**
-   * Duplicate the selected sticker to the right until the printable area is full.
+   * Duplicate the selected sticker(s) to the right until the printable area is full.
+   * Multi-select copies the whole selection together as a block each generation.
    * Spacing uses cut-line bounds plus `autoArrangeGapMm` (override via `gapMm`).
    */
   duplicateSelectedHorizontally: (options?: DuplicateFillHandleOptions) => number;
   /**
-   * Duplicate the selected sticker downward until the printable area is full.
+   * Duplicate the selected sticker(s) downward until the printable area is full.
+   * Multi-select copies the whole selection together as a block each generation.
    * Spacing uses cut-line bounds plus `autoArrangeGapMm` (override via `gapMm`).
    */
   duplicateSelectedVertically: (options?: DuplicateFillHandleOptions) => number;
@@ -213,6 +244,7 @@ function DraggableImage({
   onSelect,
   onChange,
   shapeRef,
+  draggable,
 }: {
   item: PlacedImage;
   showCutLine: boolean;
@@ -222,9 +254,10 @@ function DraggableImage({
   canvasWidth: number;
   canvasHeight: number;
   canvasMarginMm: number;
-  onSelect: () => void;
+  onSelect: (additive: boolean) => void;
   onChange: (next: PlacedImage) => void;
   shapeRef: (node: Konva.Group | null) => void;
+  draggable: boolean;
 }) {
   const [image, setImage] = useState<HTMLImageElement | null>(null);
   const [cutLinePoints, setCutLinePoints] = useState<number[]>([]);
@@ -270,7 +303,7 @@ function DraggableImage({
 
   const select = (event: KonvaEventObject<MouseEvent | TouchEvent>) => {
     event.cancelBubble = true;
-    onSelect();
+    onSelect(isAdditivePointerEvent(event.evt));
   };
 
   const syncFromNode = (node: Konva.Group) => {
@@ -343,10 +376,10 @@ function DraggableImage({
       scaleX={item.scaleX}
       scaleY={item.scaleY}
       rotation={item.rotation}
-      draggable
+      draggable={draggable}
       dragBoundFunc={dragBoundFunc}
-      onMouseDown={select}
-      onTouchStart={select}
+      onClick={select}
+      onTap={select}
       onDragEnd={(event) => syncFromNode(event.target as Konva.Group)}
       onTransform={(event) => syncFromNode(event.target as Konva.Group)}
       onTransformEnd={(event) => syncFromNode(event.target as Konva.Group)}
@@ -399,11 +432,12 @@ export const CanvasDesigner = forwardRef<CanvasDesignerHandle, CanvasDesignerPro
       touchFriendly,
       backgroundImageUrl,
       onSelectedIdChange,
+      onSelectedIdsChange,
     },
     ref,
   ) {
     const [items, setItems] = useState<PlacedImage[]>([]);
-    const [selectedId, setSelectedId] = useState<string | null>(null);
+    const [selectedIds, setSelectedIds] = useState<string[]>([]);
     const [backgroundImage, setBackgroundImage] = useState<HTMLImageElement | null>(
       null,
     );
@@ -415,15 +449,26 @@ export const CanvasDesigner = forwardRef<CanvasDesignerHandle, CanvasDesignerPro
     });
     const shapeRefs = useRef(new Map<string, Konva.Group>());
     const transformerRef = useRef<Konva.Transformer>(null);
+    const multiSelectProxyRef = useRef<Konva.Group>(null);
+    const groupTransformSnapshotRef = useRef<GroupTransformSnapshot | null>(null);
+    const frozenProxyBoxRef = useRef<ProxyState | null>(null);
+    const isGroupTransformingRef = useRef(false);
+    const [groupTransforming, setGroupTransforming] = useState(false);
+    const isMarqueeActiveRef = useRef(false);
+    const marqueeStartRef = useRef<{ x: number; y: number } | null>(null);
+    const marqueeRectRef = useRef<MarqueeRect | null>(null);
+    const [marqueeRect, setMarqueeRect] = useState<MarqueeRect | null>(null);
     const pendingAutoArrangeRef = useRef(false);
     const itemsRef = useRef(items);
     itemsRef.current = items;
-    const selectedIdRef = useRef(selectedId);
-    selectedIdRef.current = selectedId;
+    const selectedIdsRef = useRef(selectedIds);
+    selectedIdsRef.current = selectedIds;
     const onSelectionDimensionsChangeRef = useRef(onSelectionDimensionsChange);
     onSelectionDimensionsChangeRef.current = onSelectionDimensionsChange;
     const onSelectedIdChangeRef = useRef(onSelectedIdChange);
     onSelectedIdChangeRef.current = onSelectedIdChange;
+    const onSelectedIdsChangeRef = useRef(onSelectedIdsChange);
+    onSelectedIdsChangeRef.current = onSelectedIdsChange;
 
     const transformerTouchProfile = useMemo(
       () => getTransformerTouchProfile(touchFriendly),
@@ -441,8 +486,9 @@ export const CanvasDesigner = forwardRef<CanvasDesignerHandle, CanvasDesignerPro
     }, [transformerTouchProfile]);
 
     useEffect(() => {
-      onSelectedIdChangeRef.current?.(selectedId);
-    }, [selectedId]);
+      onSelectedIdChangeRef.current?.(primarySelectedId(selectedIds));
+      onSelectedIdsChangeRef.current?.(selectedIds);
+    }, [selectedIds]);
 
     useEffect(() => {
       if (!backgroundImageUrl) {
@@ -472,10 +518,39 @@ export const CanvasDesigner = forwardRef<CanvasDesignerHandle, CanvasDesignerPro
     const marginPx = getCanvasMarginPx(canvasMarginMm, canvasConfig.designDpi);
     const showMarginGuide = showCanvasMargin ?? canvasMarginMm > 0;
 
-    const selectedItem = useMemo(
-      () => items.find((item) => item.instanceId === selectedId) ?? null,
-      [items, selectedId],
+    const selectedIdSet = useMemo(
+      () => new Set(selectedIds),
+      [selectedIds],
     );
+    const multiSelectActive = selectedIds.length > 1;
+    const primarySelectedIdValue = primarySelectedId(selectedIds);
+
+    const selectedItem = useMemo(() => {
+      if (!primarySelectedIdValue) {
+        return null;
+      }
+      return (
+        items.find((item) => item.instanceId === primarySelectedIdValue) ?? null
+      );
+    }, [items, primarySelectedIdValue]);
+
+    const selectedItems = useMemo(
+      () => items.filter((item) => selectedIdSet.has(item.instanceId)),
+      [items, selectedIdSet],
+    );
+
+    const multiSelectProxyBox = useMemo(() => {
+      if (!multiSelectActive) {
+        return null;
+      }
+      return getSelectionAxisAlignedBox(selectedItems);
+    }, [multiSelectActive, selectedItems]);
+
+    const activeProxyBox =
+      (isGroupTransformingRef.current || groupTransforming) &&
+      frozenProxyBoxRef.current
+        ? frozenProxyBoxRef.current
+        : multiSelectProxyBox;
 
     const selectionDimensions = useMemo(() => {
       if (!showSelectionDimensions || !selectedItem) {
@@ -638,7 +713,7 @@ export const CanvasDesigner = forwardRef<CanvasDesignerHandle, CanvasDesignerPro
             );
           }),
         );
-        setSelectedId(null);
+        setSelectedIds([]);
         shapeRefs.current.clear();
         setCanvasConfig({
           canvasWidth: input.layout.canvasWidth,
@@ -652,7 +727,7 @@ export const CanvasDesigner = forwardRef<CanvasDesignerHandle, CanvasDesignerPro
 
     const clearCanvas = useCallback(() => {
       setItems([]);
-      setSelectedId(null);
+      setSelectedIds([]);
       shapeRefs.current.clear();
     }, []);
 
@@ -663,7 +738,7 @@ export const CanvasDesigner = forwardRef<CanvasDesignerHandle, CanvasDesignerPro
     }, [buildExport, onExport]);
 
     const clearSelection = useCallback(() => {
-      setSelectedId(null);
+      setSelectedIds([]);
       const transformer = transformerRef.current;
       if (transformer) {
         transformer.nodes([]);
@@ -671,19 +746,23 @@ export const CanvasDesigner = forwardRef<CanvasDesignerHandle, CanvasDesignerPro
       }
     }, []);
 
-    const deleteSelectedItem = useCallback(() => {
-      const activeId = selectedIdRef.current;
-      if (!activeId) return;
+    const deleteSelectedItems = useCallback(() => {
+      const activeIds = selectedIdsRef.current;
+      if (activeIds.length === 0) return;
 
+      const idSet = new Set(activeIds);
       setItems((current) => {
-        const item = current.find((entry) => entry.instanceId === activeId);
-        if (item?.src.startsWith("blob:")) {
-          URL.revokeObjectURL(item.src);
+        for (const item of current) {
+          if (idSet.has(item.instanceId) && item.src.startsWith("blob:")) {
+            URL.revokeObjectURL(item.src);
+          }
         }
-        return current.filter((entry) => entry.instanceId !== activeId);
+        return current.filter((entry) => !idSet.has(entry.instanceId));
       });
-      shapeRefs.current.delete(activeId);
-      setSelectedId(null);
+      for (const id of activeIds) {
+        shapeRefs.current.delete(id);
+      }
+      setSelectedIds([]);
 
       const transformer = transformerRef.current;
       if (transformer) {
@@ -695,7 +774,7 @@ export const CanvasDesigner = forwardRef<CanvasDesignerHandle, CanvasDesignerPro
     useEffect(() => {
       const onKeyDown = (event: KeyboardEvent) => {
         if (event.key !== "Delete" && event.key !== "Backspace") return;
-        if (!selectedIdRef.current) return;
+        if (selectedIdsRef.current.length === 0) return;
 
         const target = event.target;
         if (
@@ -709,12 +788,12 @@ export const CanvasDesigner = forwardRef<CanvasDesignerHandle, CanvasDesignerPro
         }
 
         event.preventDefault();
-        deleteSelectedItem();
+        deleteSelectedItems();
       };
 
       window.addEventListener("keydown", onKeyDown);
       return () => window.removeEventListener("keydown", onKeyDown);
-    }, [deleteSelectedItem]);
+    }, [deleteSelectedItems]);
 
     const runAutoArrange = useCallback(
       async (options?: AutoArrangeOptions): Promise<boolean> => {
@@ -743,17 +822,200 @@ export const CanvasDesigner = forwardRef<CanvasDesignerHandle, CanvasDesignerPro
     );
 
     useEffect(() => {
+      if (isGroupTransformingRef.current) {
+        return;
+      }
       const transformer = transformerRef.current;
-      const node = selectedId ? shapeRefs.current.get(selectedId) : undefined;
       if (!transformer) return;
 
-      if (node) {
-        transformer.nodes([node]);
+      if (multiSelectActive) {
+        const proxy = multiSelectProxyRef.current;
+        transformer.nodes(proxy ? [proxy] : []);
+      } else if (selectedIds.length === 1) {
+        const node = shapeRefs.current.get(selectedIds[0]!);
+        transformer.nodes(node ? [node] : []);
       } else {
         transformer.nodes([]);
       }
       transformer.getLayer()?.batchDraw();
-    }, [selectedId, items]);
+    }, [multiSelectActive, selectedIds, items, activeProxyBox]);
+
+    useEffect(() => {
+      if (
+        isGroupTransformingRef.current ||
+        groupTransforming ||
+        !multiSelectActive ||
+        !activeProxyBox
+      ) {
+        return;
+      }
+      const proxy = multiSelectProxyRef.current;
+      if (!proxy) {
+        return;
+      }
+      proxy.position({ x: activeProxyBox.x, y: activeProxyBox.y });
+      proxy.rotation(0);
+      proxy.scale({ x: 1, y: 1 });
+      proxy.getLayer()?.batchDraw();
+    }, [groupTransforming, multiSelectActive, activeProxyBox]);
+
+    const clampPlacedTransform = useCallback(
+      (draft: PlacedImage): PlacedImage => {
+        let rotation = draft.rotation;
+        let scaleX = draft.scaleX;
+        let scaleY = draft.scaleY;
+        const minScaled = clampNodeScale(
+          scaleX,
+          scaleY,
+          draft.width,
+          draft.height,
+          minResizeSizeMm,
+          canvasConfig.designDpi,
+        );
+        scaleX = minScaled.scaleX;
+        scaleY = minScaled.scaleY;
+
+        let working: PlacedImage = { ...draft, scaleX, scaleY, rotation };
+        const fitted = fitItemToCanvasArea(
+          working,
+          canvasConfig.canvasWidth,
+          canvasConfig.canvasHeight,
+          canvasMarginMm,
+          canvasConfig.designDpi,
+        );
+        scaleX = fitted.scaleX;
+        scaleY = fitted.scaleY;
+        working = { ...fitted, scaleX, scaleY, rotation };
+
+        const { x, y } = clampItemPosition(
+          working,
+          canvasConfig.canvasWidth,
+          canvasConfig.canvasHeight,
+          canvasMarginMm,
+          canvasConfig.designDpi,
+          { x: draft.x, y: draft.y },
+        );
+        return { ...working, x, y };
+      },
+      [canvasConfig, canvasMarginMm, minResizeSizeMm],
+    );
+
+    const applyLiveGroupTransform = useCallback(() => {
+      const snapshot = groupTransformSnapshotRef.current;
+      const proxy = multiSelectProxyRef.current;
+      const box = frozenProxyBoxRef.current;
+      if (!snapshot || !proxy || !box) {
+        return;
+      }
+
+      const next = applyGroupTransformFromProxy(
+        snapshot,
+        readProxyState(proxy, box.width, box.height),
+      );
+
+      setItems((current) =>
+        current.map((entry) => {
+          const updated = next.find((item) => item.instanceId === entry.instanceId);
+          if (!updated) {
+            return entry;
+          }
+          return clampPlacedTransform({ ...entry, ...updated });
+        }),
+      );
+    }, [clampPlacedTransform]);
+
+    const beginGroupInteraction = useCallback(() => {
+      if (groupTransformSnapshotRef.current) {
+        return;
+      }
+      const proxy = multiSelectProxyRef.current;
+      const selected = itemsRef.current.filter((item) =>
+        selectedIdsRef.current.includes(item.instanceId),
+      );
+      const box = getSelectionAxisAlignedBox(selected);
+      if (!proxy || !box || selected.length < 2) {
+        return;
+      }
+
+      frozenProxyBoxRef.current = box;
+      isGroupTransformingRef.current = true;
+      setGroupTransforming(true);
+      groupTransformSnapshotRef.current = {
+        items: selected.map((item) => ({
+          instanceId: item.instanceId,
+          x: item.x,
+          y: item.y,
+          scaleX: item.scaleX,
+          scaleY: item.scaleY,
+          rotation: item.rotation,
+          width: item.width,
+          height: item.height,
+        })),
+        proxy: readProxyState(proxy, box.width, box.height),
+      };
+    }, []);
+
+    const endGroupInteraction = useCallback(() => {
+      applyLiveGroupTransform();
+      const proxy = multiSelectProxyRef.current;
+      if (proxy) {
+        proxy.rotation(0);
+        proxy.scaleX(1);
+        proxy.scaleY(1);
+      }
+      groupTransformSnapshotRef.current = null;
+      frozenProxyBoxRef.current = null;
+      isGroupTransformingRef.current = false;
+      setGroupTransforming(false);
+    }, [applyLiveGroupTransform]);
+
+    useEffect(() => {
+      const transformer = transformerRef.current;
+      const proxy = multiSelectProxyRef.current;
+      if (!proxy || !multiSelectActive) {
+        return;
+      }
+
+      const begin = () => {
+        beginGroupInteraction();
+      };
+      const sync = () => {
+        applyLiveGroupTransform();
+      };
+      const end = () => {
+        endGroupInteraction();
+      };
+
+      proxy.on("dragstart transformstart", begin);
+      proxy.on("dragmove transform", sync);
+      proxy.on("dragend transformend", end);
+
+      const back = transformer?.findOne(".back");
+      back?.on("dragstart", begin);
+      back?.on("dragmove", sync);
+      back?.on("dragend", end);
+      transformer?.on("transformstart", begin);
+      transformer?.on("transform", sync);
+      transformer?.on("transformend", end);
+
+      return () => {
+        proxy.off("dragstart transformstart", begin);
+        proxy.off("dragmove transform", sync);
+        proxy.off("dragend transformend", end);
+        back?.off("dragstart", begin);
+        back?.off("dragmove", sync);
+        back?.off("dragend", end);
+        transformer?.off("transformstart", begin);
+        transformer?.off("transform", sync);
+        transformer?.off("transformend", end);
+      };
+    }, [
+      multiSelectActive,
+      activeProxyBox,
+      beginGroupInteraction,
+      applyLiveGroupTransform,
+      endGroupInteraction,
+    ]);
 
     const updateItem = useCallback((next: PlacedImage) => {
       setItems((current) =>
@@ -765,20 +1027,143 @@ export const CanvasDesigner = forwardRef<CanvasDesignerHandle, CanvasDesignerPro
 
     const resizeBoundBoxFunc = useCallback(
       (oldBox: { x: number; y: number; width: number; height: number; rotation: number }, newBox: { x: number; y: number; width: number; height: number; rotation: number }) => {
-        if (!selectedItem) {
+        if (selectedItems.length === 0) {
           return newBox;
         }
-        const { minWidthPx, minHeightPx } = getMinResizeDimensionsPx(
-          selectedItem.width,
-          selectedItem.height,
+        if (selectedItems.length === 1) {
+          const item = selectedItems[0]!;
+          const { minWidthPx, minHeightPx } = getMinResizeDimensionsPx(
+            item.width,
+            item.height,
+            minResizeSizeMm,
+            canvasConfig.designDpi,
+          );
+          return clampResizeBox(oldBox, newBox, minWidthPx, minHeightPx);
+        }
+
+        return constrainMultiSelectBoundBox(
+          oldBox,
+          newBox,
+          selectedItems,
           minResizeSizeMm,
           canvasConfig.designDpi,
         );
-        return clampResizeBox(oldBox, newBox, minWidthPx, minHeightPx);
       },
-      [selectedItem, minResizeSizeMm, canvasConfig.designDpi],
+      [selectedItems, minResizeSizeMm, canvasConfig.designDpi],
+    );
+
+    const handleSelectItem = useCallback((instanceId: string, additive: boolean) => {
+      setSelectedIds((current) =>
+        toggleShiftSelection(current, instanceId, additive),
+      );
+    }, []);
+
+    const updateMarqueeRect = useCallback((rect: MarqueeRect | null) => {
+      marqueeRectRef.current = rect;
+      setMarqueeRect(rect);
+    }, []);
+
+    const handleStageMouseDown = useCallback(
+      (event: KonvaEventObject<MouseEvent>) => {
+        const nativeEvent = event.evt;
+        if (!(nativeEvent instanceof MouseEvent) || nativeEvent.button !== 0) {
+          return;
+        }
+
+        const target = event.target as Konva.Node;
+        if (resolveStickerInstanceId(target, shapeRefs.current)) {
+          return;
+        }
+        if (isTransformerTarget(target)) {
+          return;
+        }
+        if (!isCanvasBackgroundTarget(target)) {
+          return;
+        }
+
+        const stage = target.getStage();
+        const pos = stage?.getPointerPosition();
+        if (!stage || !pos) {
+          return;
+        }
+
+        isMarqueeActiveRef.current = true;
+        marqueeStartRef.current = pos;
+        updateMarqueeRect({ x: pos.x, y: pos.y, width: 0, height: 0 });
+      },
+      [updateMarqueeRect],
+    );
+
+    const handleStageMouseMove = useCallback(
+      (event: KonvaEventObject<MouseEvent>) => {
+        if (!isMarqueeActiveRef.current || !marqueeStartRef.current) {
+          return;
+        }
+
+        const stage = event.target.getStage();
+        const pos = stage?.getPointerPosition();
+        if (!pos) {
+          return;
+        }
+
+        updateMarqueeRect(
+          normalizeMarqueeRect(
+            marqueeStartRef.current.x,
+            marqueeStartRef.current.y,
+            pos.x,
+            pos.y,
+          ),
+        );
+      },
+      [updateMarqueeRect],
+    );
+
+    const finishMarquee = useCallback(
+      (event: KonvaEventObject<MouseEvent | TouchEvent>) => {
+        if (!isMarqueeActiveRef.current) {
+          return;
+        }
+
+        isMarqueeActiveRef.current = false;
+        marqueeStartRef.current = null;
+
+        const rect = marqueeRectRef.current;
+        updateMarqueeRect(null);
+
+        if (!rect) {
+          return;
+        }
+
+        if (isMarqueeClick(rect)) {
+          setSelectedIds([]);
+          return;
+        }
+
+        const hitIds = getMarqueeHitInstanceIds(itemsRef.current, rect);
+        const additive = isAdditivePointerEvent(event.evt);
+        setSelectedIds(
+          mergeMarqueeSelection(selectedIdsRef.current, hitIds, additive),
+        );
+      },
+      [updateMarqueeRect],
     );
 
+    useEffect(() => {
+      if (!marqueeRect) {
+        return;
+      }
+
+      const onWindowMouseUp = (nativeEvent: MouseEvent) => {
+        finishMarquee({
+          evt: nativeEvent,
+          target: { getStage: () => null },
+        } as KonvaEventObject<MouseEvent>);
+      };
+
+      window.addEventListener("mouseup", onWindowMouseUp);
+      return () => window.removeEventListener("mouseup", onWindowMouseUp);
+    }, [marqueeRect, finishMarquee]);
+
     const placeImageSource = useCallback(
       (src: string, mimeType: string, assetId?: string) => {
         const image = new window.Image();
@@ -810,7 +1195,7 @@ export const CanvasDesigner = forwardRef<CanvasDesignerHandle, CanvasDesignerPro
             canvasConfig.designDpi,
           );
           setItems((current) => [...current, placed]);
-          setSelectedId(instanceId);
+          setSelectedIds([instanceId]);
           if (autoArrangeOnAdd) {
             pendingAutoArrangeRef.current = true;
           }
@@ -848,26 +1233,37 @@ export const CanvasDesigner = forwardRef<CanvasDesignerHandle, CanvasDesignerPro
         direction: DuplicateFillDirection,
         options?: DuplicateFillHandleOptions,
       ): number => {
-        const activeId = selectedIdRef.current;
-        if (!activeId) {
+        const activeIds = selectedIdsRef.current;
+        if (activeIds.length === 0) {
           return 0;
         }
 
-        const source = itemsRef.current.find(
-          (entry) => entry.instanceId === activeId,
-        );
-        if (!source) {
+        const idOrder = new Map(activeIds.map((id, index) => [id, index]));
+        const sources = itemsRef.current
+          .filter((entry) => idOrder.has(entry.instanceId))
+          .sort(
+            (a, b) =>
+              (idOrder.get(a.instanceId) ?? 0) -
+              (idOrder.get(b.instanceId) ?? 0),
+          );
+        if (sources.length === 0) {
           return 0;
         }
 
-        const { copies, addedCount } = buildDuplicatesToFit(source, direction, {
+        const fillOptions = {
           canvasWidth: canvasConfig.canvasWidth,
           canvasHeight: canvasConfig.canvasHeight,
           marginMm: canvasMarginMm,
           designDpi: canvasConfig.designDpi,
           gapMm: options?.gapMm ?? autoArrangeGapMm,
           createInstanceId: () => crypto.randomUUID(),
-        });
+        };
+
+        const { copies, addedCount } = buildGroupDuplicatesToFit(
+          sources,
+          direction,
+          fillOptions,
+        );
 
         if (addedCount === 0) {
           return 0;
@@ -942,12 +1338,6 @@ export const CanvasDesigner = forwardRef<CanvasDesignerHandle, CanvasDesignerPro
       noClick: items.length > 0,
     });
 
-    const deselect = (event: KonvaEventObject<MouseEvent | TouchEvent>) => {
-      if (event.target === event.target.getStage()) {
-        setSelectedId(null);
-      }
-    };
-
     return (
       <div className={className}>
         <div
@@ -1000,8 +1390,9 @@ export const CanvasDesigner = forwardRef<CanvasDesignerHandle, CanvasDesignerPro
             width={canvasConfig.canvasWidth}
             height={canvasConfig.canvasHeight}
             style={{ display: "block", ...CANVAS_INTERACTION_STYLE }}
-            onMouseDown={deselect}
-            onTouchStart={deselect}
+            onMouseDown={handleStageMouseDown}
+            onMouseMove={handleStageMouseMove}
+            onMouseUp={finishMarquee}
             onContextMenu={(event) => event.evt.preventDefault()}
           >
             <Layer>
@@ -1036,8 +1427,11 @@ export const CanvasDesigner = forwardRef<CanvasDesignerHandle, CanvasDesignerPro
                   canvasWidth={canvasConfig.canvasWidth}
                   canvasHeight={canvasConfig.canvasHeight}
                   canvasMarginMm={canvasMarginMm}
-                  onSelect={() => setSelectedId(item.instanceId)}
+                  onSelect={(additive) =>
+                    handleSelectItem(item.instanceId, additive)
+                  }
                   onChange={updateItem}
+                  draggable={!multiSelectActive}
                   shapeRef={(node) => {
                     if (node) {
                       shapeRefs.current.set(item.instanceId, node);
@@ -1047,10 +1441,34 @@ export const CanvasDesigner = forwardRef<CanvasDesignerHandle, CanvasDesignerPro
                   }}
                 />
               ))}
+              {marqueeRect ? (
+                <Rect
+                  x={marqueeRect.x}
+                  y={marqueeRect.y}
+                  width={marqueeRect.width}
+                  height={marqueeRect.height}
+                  fill="rgba(37, 99, 235, 0.12)"
+                  stroke={TRANSFORMER_COLOR}
+                  strokeWidth={1}
+                  dash={[4, 4]}
+                  listening={false}
+                />
+              ) : null}
+              {multiSelectActive && activeProxyBox ? (
+                <Group ref={multiSelectProxyRef}>
+                  <Rect
+                    width={activeProxyBox.width}
+                    height={activeProxyBox.height}
+                    fill="rgba(0,0,0,0.001)"
+                    listening={false}
+                  />
+                </Group>
+              ) : null}
               <Transformer
                 ref={transformerRef}
                 keepRatio
                 rotateEnabled
+                shouldOverdrawWholeArea
                 enabledAnchors={[
                   "top-left",
                   "top-right",
@@ -1068,11 +1486,12 @@ export const CanvasDesigner = forwardRef<CanvasDesignerHandle, CanvasDesignerPro
                 boundBoxFunc={resizeBoundBoxFunc}
               />
               {showSelectionDimensions &&
-              selectedId &&
+              selectedIds.length === 1 &&
+              primarySelectedIdValue &&
               selectedItem &&
               selectionDimensionLabels ? (
                 <SelectionDimensionLabels
-                  node={shapeRefs.current.get(selectedId)}
+                  node={shapeRefs.current.get(primarySelectedIdValue)}
                   localWidth={selectedItem.width}
                   localHeight={selectedItem.height}
                   widthLabel={selectionDimensionLabels.width}
diff --git a/packages/react-canvas-designer/src/duplicateFill.test.ts b/packages/react-canvas-designer/src/duplicateFill.test.ts
index aefab45..756bdf5 100644
--- a/packages/react-canvas-designer/src/duplicateFill.test.ts
+++ b/packages/react-canvas-designer/src/duplicateFill.test.ts
@@ -6,6 +6,7 @@ import {
 } from "@jeffgo10/shared-types";
 import {
   buildDuplicatesToFit,
+  buildGroupDuplicatesToFit,
   getAdjacentCopyPosition,
   type DuplicateFillDirection,
 } from "./duplicateFill";
@@ -139,3 +140,58 @@ describe("buildDuplicatesToFit", () => {
     expect(firstCopyBounds.minX - sourceBounds.maxX).toBeCloseTo(gapPx, 1);
   });
 });
+
+describe("buildGroupDuplicatesToFit", () => {
+  function duplicateGroup(
+    sources: TestItem[],
+    direction: DuplicateFillDirection,
+    options: Partial<Parameters<typeof buildGroupDuplicatesToFit>[2]> = {},
+  ) {
+    let counter = 0;
+    return buildGroupDuplicatesToFit(sources, direction, {
+      canvasWidth: CANVAS_WIDTH,
+      canvasHeight: CANVAS_HEIGHT,
+      designDpi: CANVAS_DPI,
+      createInstanceId: () => `copy-${++counter}`,
+      ...options,
+    });
+  }
+
+  it("delegates to single-item fill when only one source is provided", () => {
+    const single = duplicate(makeItem(), "horizontal");
+    const group = duplicateGroup([makeItem()], "horizontal");
+    expect(group.addedCount).toBe(single.addedCount);
+  });
+
+  it("duplicates every selected sticker together as a block", () => {
+    const left = makeItem({ instanceId: "left", x: 40, y: 50 });
+    const right = makeItem({
+      instanceId: "right",
+      assetId: "asset-2",
+      x: 180,
+      y: 50,
+    });
+
+    const { copies, addedCount } = duplicateGroup([left, right], "horizontal");
+    expect(addedCount).toBeGreaterThan(0);
+    expect(addedCount % 2).toBe(0);
+
+    const firstGeneration = copies.slice(0, 2);
+    expect(firstGeneration[1]!.x - firstGeneration[0]!.x).toBeCloseTo(
+      right.x - left.x,
+      1,
+    );
+    expect(firstGeneration[1]!.y - firstGeneration[0]!.y).toBeCloseTo(
+      right.y - left.y,
+      1,
+    );
+  });
+
+  it("returns no copies when the block already touches the edge", () => {
+    const left = makeItem({ instanceId: "left", x: 40, y: 50 });
+    const right = makeItem({ instanceId: "right", x: 480, y: 50, width: 100 });
+    const { addedCount, copies } = duplicateGroup([left, right], "horizontal");
+    expect(addedCount).toBe(0);
+    expect(copies).toEqual([]);
+  });
+});
diff --git a/packages/react-canvas-designer/src/duplicateFill.ts b/packages/react-canvas-designer/src/duplicateFill.ts
index b6b7aee..0f399e6 100644
--- a/packages/react-canvas-designer/src/duplicateFill.ts
+++ b/packages/react-canvas-designer/src/duplicateFill.ts
@@ -104,3 +104,92 @@ export function buildDuplicatesToFit<T extends MarginBoundsItem & { instanceId:
 
   return { copies, addedCount: copies.length };
 }
+
+function getItemsAxisAlignedBounds(
+  items: readonly MarginBoundsItem[],
+): { minX: number; minY: number; maxX: number; maxY: number } {
+  let minX = Infinity;
+  let minY = Infinity;
+  let maxX = -Infinity;
+  let maxY = -Infinity;
+
+  for (const item of items) {
+    const bounds = getItemAxisAlignedBounds(item);
+    minX = Math.min(minX, bounds.minX);
+    minY = Math.min(minY, bounds.minY);
+    maxX = Math.max(maxX, bounds.maxX);
+    maxY = Math.max(maxY, bounds.maxY);
+  }
+
+  return { minX, minY, maxX, maxY };
+}
+
+/** Cut-line spacing between the current block and the next copy block. */
+export function getAdjacentBlockTranslation(
+  block: readonly MarginBoundsItem[],
+  direction: DuplicateFillDirection,
+  gapPx = 0,
+): { dx: number; dy: number } {
+  const { minX, minY, maxX, maxY } = getItemsAxisAlignedBounds(block);
+  const blockWidth = maxX - minX;
+  const blockHeight = maxY - minY;
+
+  if (direction === "horizontal") {
+    return { dx: blockWidth + gapPx, dy: 0 };
+  }
+
+  return { dx: 0, dy: blockHeight + gapPx };
+}
+
+/**
+ * Duplicate every item in `sources` together as a block along an axis until the
+ * next block would extend past the printable area. Preserves relative layout.
+ */
+export function buildGroupDuplicatesToFit<
+  T extends MarginBoundsItem & { instanceId: string },
+>(
+  sources: readonly T[],
+  direction: DuplicateFillDirection,
+  options: DuplicateFillOptions,
+): DuplicateFillResult<T> {
+  if (sources.length === 0) {
+    return { copies: [], addedCount: 0 };
+  }
+  if (sources.length === 1) {
+    return buildDuplicatesToFit(sources[0]!, direction, options);
+  }
+
+  const marginPx = getCanvasMarginPx(options.marginMm ?? 0, options.designDpi);
+  const gapPx = mmToCanvasPixels(options.gapMm ?? 0, options.designDpi);
+  const maxCopies = options.maxCopies ?? 500;
+  const copies: T[] = [];
+  let lastBlock: readonly MarginBoundsItem[] = sources;
+
+  for (let generation = 0; generation < maxCopies; generation += 1) {
+    const { dx, dy } = getAdjacentBlockTranslation(lastBlock, direction, gapPx);
+    const candidates = sources.map((template, index) => ({
+      ...template,
+      instanceId: options.createInstanceId(),
+      x: lastBlock[index]!.x + dx,
+      y: lastBlock[index]!.y + dy,
+    }));
+
+    if (
+      !candidates.every((candidate) =>
+        copyFitsInPrintableArea(
+          candidate,
+          options.canvasWidth,
+          options.canvasHeight,
+          marginPx,
+        ),
+      )
+    ) {
+      break;
+    }
+
+    copies.push(...candidates);
+    lastBlock = candidates;
+  }
+
+  return { copies, addedCount: copies.length };
+}
diff --git a/packages/react-canvas-designer/src/groupTransform.test.ts b/packages/react-canvas-designer/src/groupTransform.test.ts
new file mode 100644
index 0000000..65fb1cf
--- /dev/null
+++ b/packages/react-canvas-designer/src/groupTransform.test.ts
@@ -0,0 +1,148 @@
+import {
+  applyGroupTransformFromProxy,
+  getSelectionAxisAlignedBox,
+  readProxyState,
+  type PlacedTransform,
+} from "./groupTransform";
+
+function item(
+  overrides: Partial<PlacedTransform> & Pick<PlacedTransform, "instanceId">,
+): PlacedTransform {
+  return {
+    x: 0,
+    y: 0,
+    scaleX: 1,
+    scaleY: 1,
+    rotation: 0,
+    width: 100,
+    height: 80,
+    ...overrides,
+  };
+}
+
+describe("groupTransform", () => {
+  it("builds a union box for multiple stickers", () => {
+    const box = getSelectionAxisAlignedBox([
+      item({ instanceId: "a", x: 10, y: 20, width: 100, height: 50 }),
+      item({ instanceId: "b", x: 150, y: 40, width: 60, height: 60 }),
+    ]);
+
+    expect(box).toEqual({
+      x: 10,
+      y: 20,
+      width: 200,
+      height: 80,
+      rotation: 0,
+      scaleX: 1,
+      scaleY: 1,
+    });
+  });
+
+  it("translates every selected sticker together", () => {
+    const items = [
+      item({ instanceId: "a", x: 10, y: 20 }),
+      item({ instanceId: "b", x: 150, y: 40 }),
+    ];
+    const proxy = getSelectionAxisAlignedBox(items)!;
+    const snapshot = { items, proxy };
+    const moved = applyGroupTransformFromProxy(snapshot, {
+      ...proxy,
+      x: proxy.x + 30,
+      y: proxy.y + 10,
+    });
+
+    expect(moved[0]).toMatchObject({ x: 40, y: 30 });
+    expect(moved[1]).toMatchObject({ x: 180, y: 50 });
+  });
+
+  it("returns null for an empty selection box", () => {
+    expect(getSelectionAxisAlignedBox([])).toBeNull();
+  });
+
+  it("rotates stickers while preserving spacing", () => {
+    const items = [
+      item({ instanceId: "a", x: 0, y: 0 }),
+      item({ instanceId: "b", x: 100, y: 0 }),
+    ];
+    const proxy = getSelectionAxisAlignedBox(items)!;
+    const snapshot = { items, proxy };
+    const rotated = applyGroupTransformFromProxy(snapshot, {
+      ...proxy,
+      rotation: 90,
+    });
+
+    const startDist = Math.hypot(items[1]!.x - items[0]!.x, items[1]!.y - items[0]!.y);
+    const endDist = Math.hypot(
+      rotated[1]!.x - rotated[0]!.x,
+      rotated[1]!.y - rotated[0]!.y,
+    );
+    expect(endDist).toBeCloseTo(startDist, 5);
+    expect(rotated[0]?.rotation).toBe(90);
+    expect(rotated[1]?.rotation).toBe(90);
+  });
+
+  it("scales stickers uniformly from the proxy center", () => {
+    const items = [
+      item({ instanceId: "a", x: 0, y: 0 }),
+      item({ instanceId: "b", x: 100, y: 0 }),
+    ];
+    const proxy = getSelectionAxisAlignedBox(items)!;
+    const snapshot = { items, proxy };
+    const scaled = applyGroupTransformFromProxy(snapshot, {
+      ...proxy,
+      scaleX: 2,
+      scaleY: 2,
+    });
+
+    expect(scaled[0]?.scaleX).toBe(2);
+    expect(scaled[1]?.scaleX).toBe(2);
+    expect(scaled[1]!.x - scaled[0]!.x).toBeCloseTo(200, 5);
+  });
+
+  it("reads proxy state from a Konva-like node", () => {
+    expect(
+      readProxyState(
+        {
+          x: () => 12,
+          y: () => 24,
+          rotation: () => 15,
+          scaleX: () => 1.5,
+          scaleY: () => 1.5,
+        },
+        80,
+        40,
+      ),
+    ).toEqual({
+      x: 12,
+      y: 24,
+      width: 80,
+      height: 40,
+      rotation: 15,
+      scaleX: 1.5,
+      scaleY: 1.5,
+    });
+  });
+
+  it("falls back to scale ratio 1 when the snapshot proxy scale is zero", () => {
+    const items = [item({ instanceId: "a", x: 10, y: 20, scaleX: 2, scaleY: 2 })];
+    const snapshot = {
+      items,
+      proxy: {
+        x: 0,
+        y: 0,
+        width: 100,
+        height: 80,
+        rotation: 0,
+        scaleX: 0,
+        scaleY: 0,
+      },
+    };
+    const scaled = applyGroupTransformFromProxy(snapshot, {
+      ...snapshot.proxy,
+      scaleX: 1,
+      scaleY: 1,
+    });
+    expect(scaled[0]?.scaleX).toBe(2);
+    expect(scaled[0]?.scaleY).toBe(2);
+  });
+});
diff --git a/packages/react-canvas-designer/src/groupTransform.ts b/packages/react-canvas-designer/src/groupTransform.ts
new file mode 100644
index 0000000..e9fbf28
--- /dev/null
+++ b/packages/react-canvas-designer/src/groupTransform.ts
@@ -0,0 +1,152 @@
+import {
+  getItemAxisAlignedBounds,
+  type MarginBoundsItem,
+} from "./canvasMargin";
+
+export type PlacedTransform = {
+  instanceId: string;
+  x: number;
+  y: number;
+  scaleX: number;
+  scaleY: number;
+  rotation: number;
+  width: number;
+  height: number;
+};
+
+export type ProxyState = {
+  x: number;
+  y: number;
+  width: number;
+  height: number;
+  rotation: number;
+  scaleX: number;
+  scaleY: number;
+};
+
+export type GroupTransformSnapshot = {
+  items: PlacedTransform[];
+  proxy: ProxyState;
+};
+
+function transformLocalPoint(
+  x: number,
+  y: number,
+  scaleX: number,
+  scaleY: number,
+  rotationDeg: number,
+  originX: number,
+  originY: number,
+): { x: number; y: number } {
+  const rad = (rotationDeg * Math.PI) / 180;
+  const cos = Math.cos(rad);
+  const sin = Math.sin(rad);
+  const sx = x * scaleX;
+  const sy = y * scaleY;
+  return {
+    x: originX + sx * cos - sy * sin,
+    y: originY + sx * sin + sy * cos,
+  };
+}
+
+/** Union AABB for the current selection (stage space). */
+export function getSelectionAxisAlignedBox(
+  items: readonly MarginBoundsItem[],
+): ProxyState | null {
+  if (items.length === 0) {
+    return null;
+  }
+
+  let minX = Infinity;
+  let minY = Infinity;
+  let maxX = -Infinity;
+  let maxY = -Infinity;
+
+  for (const item of items) {
+    const bounds = getItemAxisAlignedBounds(item);
+    minX = Math.min(minX, bounds.minX);
+    minY = Math.min(minY, bounds.minY);
+    maxX = Math.max(maxX, bounds.maxX);
+    maxY = Math.max(maxY, bounds.maxY);
+  }
+
+  return {
+    x: minX,
+    y: minY,
+    width: maxX - minX,
+    height: maxY - minY,
+    rotation: 0,
+    scaleX: 1,
+    scaleY: 1,
+  };
+}
+
+export function proxyCenterStage(proxy: ProxyState): { x: number; y: number } {
+  return transformLocalPoint(
+    proxy.width / 2,
+    proxy.height / 2,
+    proxy.scaleX,
+    proxy.scaleY,
+    proxy.rotation,
+    proxy.x,
+    proxy.y,
+  );
+}
+
+/** Apply proxy translate / rotate / scale to every sticker in the snapshot. */
+export function applyGroupTransformFromProxy(
+  snapshot: GroupTransformSnapshot,
+  currentProxy: ProxyState,
+): PlacedTransform[] {
+  const startCenter = proxyCenterStage(snapshot.proxy);
+  const currentCenter = proxyCenterStage(currentProxy);
+  const rotDelta = currentProxy.rotation - snapshot.proxy.rotation;
+  const scaleRatio =
+    snapshot.proxy.scaleX !== 0
+      ? currentProxy.scaleX / snapshot.proxy.scaleX
+      : 1;
+
+  const rad = (rotDelta * Math.PI) / 180;
+  const cos = Math.cos(rad);
+  const sin = Math.sin(rad);
+
+  return snapshot.items.map((item) => {
+    const relX = item.x - startCenter.x;
+    const relY = item.y - startCenter.y;
+    const scaledX = relX * scaleRatio;
+    const scaledY = relY * scaleRatio;
+    const rotX = scaledX * cos - scaledY * sin;
+    const rotY = scaledX * sin + scaledY * cos;
+
+    return {
+      ...item,
+      x: currentCenter.x + rotX,
+      y: currentCenter.y + rotY,
+      rotation: item.rotation + rotDelta,
+      scaleX: item.scaleX * scaleRatio,
+      scaleY: item.scaleY * scaleRatio,
+    };
+  });
+}
+
+export function readProxyState(
+  node: {
+    x: () => number;
+    y: () => number;
+    rotation: () => number;
+    scaleX: () => number;
+    scaleY: () => number;
+  },
+  width: number,
+  height: number,
+): ProxyState {
+  return {
+    x: node.x(),
+    y: node.y(),
+    width,
+    height,
+    rotation: node.rotation(),
+    scaleX: node.scaleX(),
+    scaleY: node.scaleY(),
+  };
+}
diff --git a/packages/react-canvas-designer/src/index.ts b/packages/react-canvas-designer/src/index.ts
index 5da3a6f..6ae563e 100644
--- a/packages/react-canvas-designer/src/index.ts
+++ b/packages/react-canvas-designer/src/index.ts
@@ -9,6 +9,7 @@ export {
 export type { AutoArrangeOptions } from "./autoArrange";
 export {
   buildDuplicatesToFit,
+  buildGroupDuplicatesToFit,
   getAdjacentCopyPosition,
   type DuplicateFillDirection,
   type DuplicateFillOptions,
diff --git a/packages/react-canvas-designer/src/marqueeSelection.test.ts b/packages/react-canvas-designer/src/marqueeSelection.test.ts
new file mode 100644
index 0000000..c340f72
--- /dev/null
+++ b/packages/react-canvas-designer/src/marqueeSelection.test.ts
@@ -0,0 +1,77 @@
+import {
+  getMarqueeHitInstanceIds,
+  isMarqueeClick,
+  mergeMarqueeSelection,
+  normalizeMarqueeRect,
+  rectsIntersect,
+} from "./marqueeSelection";
+
+describe("marqueeSelection", () => {
+  it("normalizes negative drag dimensions", () => {
+    expect(normalizeMarqueeRect(100, 80, 40, 30)).toEqual({
+      x: 40,
+      y: 30,
+      width: 60,
+      height: 50,
+    });
+  });
+
+  it("detects intersecting rects", () => {
+    expect(
+      rectsIntersect(
+        { minX: 0, minY: 0, maxX: 100, maxY: 100 },
+        { minX: 50, minY: 50, maxX: 150, maxY: 150 },
+      ),
+    ).toBe(true);
+    expect(
+      rectsIntersect(
+        { minX: 0, minY: 0, maxX: 10, maxY: 10 },
+        { minX: 20, minY: 20, maxX: 30, maxY: 30 },
+      ),
+    ).toBe(false);
+  });
+
+  it("returns stickers whose cut-line bounds intersect the marquee", () => {
+    const hitIds = getMarqueeHitInstanceIds(
+      [
+        {
+          instanceId: "a",
+          x: 10,
+          y: 10,
+          width: 50,
+          height: 40,
+          scaleX: 1,
+          scaleY: 1,
+          rotation: 0,
+        },
+        {
+          instanceId: "b",
+          x: 200,
+          y: 200,
+          width: 50,
+          height: 40,
+          scaleX: 1,
+          scaleY: 1,
+          rotation: 0,
+        },
+      ],
+      { x: 0, y: 0, width: 100, height: 100 },
+    );
+
+    expect(hitIds).toEqual(["a"]);
+  });
+
+  it("merges additive marquee hits into the current selection", () => {
+    expect(mergeMarqueeSelection(["x"], ["a", "b"], true)).toEqual([
+      "x",
+      "a",
+      "b",
+    ]);
+    expect(mergeMarqueeSelection(["x"], ["a"], false)).toEqual(["a"]);
+  });
+
+  it("treats tiny drags as clicks", () => {
+    expect(isMarqueeClick({ x: 0, y: 0, width: 2, height: 2 })).toBe(true);
+    expect(isMarqueeClick({ x: 0, y: 0, width: 10, height: 2 })).toBe(false);
+  });
+});
diff --git a/packages/react-canvas-designer/src/marqueeSelection.ts b/packages/react-canvas-designer/src/marqueeSelection.ts
new file mode 100644
index 0000000..03ff5a7
--- /dev/null
+++ b/packages/react-canvas-designer/src/marqueeSelection.ts
@@ -0,0 +1,70 @@
+import {
+  getItemAxisAlignedBounds,
+  type MarginBoundsItem,
+} from "./canvasMargin";
+
+export type MarqueeRect = {
+  x: number;
+  y: number;
+  width: number;
+  height: number;
+};
+
+export const MARQUEE_MIN_SIZE_PX = 4;
+
+export function normalizeMarqueeRect(
+  x1: number,
+  y1: number,
+  x2: number,
+  y2: number,
+): MarqueeRect {
+  return {
+    x: Math.min(x1, x2),
+    y: Math.min(y1, y2),
+    width: Math.abs(x2 - x1),
+    height: Math.abs(y2 - y1),
+  };
+}
+
+export function rectsIntersect(
+  a: { minX: number; minY: number; maxX: number; maxY: number },
+  b: { minX: number; minY: number; maxX: number; maxY: number },
+): boolean {
+  return a.minX < b.maxX && a.maxX > b.minX && a.minY < b.maxY && a.maxY > b.minY;
+}
+
+export function getMarqueeHitInstanceIds(
+  items: readonly (MarginBoundsItem & { instanceId: string })[],
+  marquee: MarqueeRect,
+): string[] {
+  const selectionBounds = {
+    minX: marquee.x,
+    minY: marquee.y,
+    maxX: marquee.x + marquee.width,
+    maxY: marquee.y + marquee.height,
+  };
+
+  return items
+    .filter((item) => {
+      const itemBounds = getItemAxisAlignedBounds(item);
+      return rectsIntersect(selectionBounds, itemBounds);
+    })
+    .map((item) => item.instanceId);
+}
+
+export function mergeMarqueeSelection(
+  currentIds: readonly string[],
+  hitIds: readonly string[],
+  additive: boolean,
+): string[] {
+  if (additive) {
+    return [...new Set([...currentIds, ...hitIds])];
+  }
+  return [...hitIds];
+}
+
+export function isMarqueeClick(marquee: MarqueeRect): boolean {
+  return (
+    marquee.width < MARQUEE_MIN_SIZE_PX && marquee.height < MARQUEE_MIN_SIZE_PX
+  );
+}
diff --git a/packages/react-canvas-designer/src/resizeConstraints.test.ts b/packages/react-canvas-designer/src/resizeConstraints.test.ts
index 7f8b99c..f25f9bb 100644
--- a/packages/react-canvas-designer/src/resizeConstraints.test.ts
+++ b/packages/react-canvas-designer/src/resizeConstraints.test.ts
@@ -2,9 +2,11 @@ import { CANVAS_DPI } from "@jeffgo10/shared-types";
 import {
   clampNodeScale,
   clampResizeBox,
+  constrainMultiSelectBoundBox,
   DEFAULT_MIN_RESIZE_SIZE_MM,
   getMinResizeDimensionsPx,
   getMinResizeScale,
+  isMultiSelectResizeRatioAllowed,
 } from "./resizeConstraints";
 
 describe("resizeConstraints", () => {
@@ -43,6 +45,84 @@ describe("resizeConstraints", () => {
     });
   });
 
+  describe("constrainMultiSelectBoundBox", () => {
+    const oldBox = { x: 0, y: 0, width: 200, height: 100, rotation: 0 };
+
+    it("allows rotation even when the axis-aligned width shrinks", () => {
+      const newBox = { x: 10, y: 10, width: 120, height: 180, rotation: 45 };
+      expect(
+        constrainMultiSelectBoundBox(
+          oldBox,
+          newBox,
+          [{ width: 100, height: 80, scaleX: 1, scaleY: 1 }],
+          25.4,
+          CANVAS_DPI,
+        ),
+      ).toBe(newBox);
+    });
+
+    it("allows pure translation", () => {
+      const newBox = { x: 30, y: 20, width: 200, height: 100, rotation: 0 };
+      expect(
+        constrainMultiSelectBoundBox(
+          oldBox,
+          newBox,
+          [{ width: 100, height: 80, scaleX: 1, scaleY: 1 }],
+          25.4,
+          CANVAS_DPI,
+        ),
+      ).toBe(newBox);
+    });
+
+    it("rejects scale shrink below minimum", () => {
+      const newBox = { x: 0, y: 0, width: 20, height: 10, rotation: 0 };
+      expect(
+        constrainMultiSelectBoundBox(
+          oldBox,
+          newBox,
+          [{ width: 100, height: 100, scaleX: 0.05, scaleY: 0.05 }],
+          25.4,
+          CANVAS_DPI,
+        ),
+      ).toBe(oldBox);
+    });
+  });
+
+  describe("isMultiSelectResizeRatioAllowed", () => {
+    it("allows growth", () => {
+      expect(
+        isMultiSelectResizeRatioAllowed(
+          [{ width: 100, height: 100, scaleX: 1, scaleY: 1 }],
+          25.4,
+          CANVAS_DPI,
+          1.5,
+        ),
+      ).toBe(true);
+    });
+
+    it("rejects shrink below minimum for any item", () => {
+      expect(
+        isMultiSelectResizeRatioAllowed(
+          [{ width: 100, height: 100, scaleX: 0.05, scaleY: 0.05 }],
+          25.4,
+          CANVAS_DPI,
+          0.5,
+        ),
+      ).toBe(false);
+    });
+
+    it("allows moderate shrink when all items stay above minimum", () => {
+      expect(
+        isMultiSelectResizeRatioAllowed(
+          [{ width: 200, height: 200, scaleX: 2, scaleY: 2 }],
+          25.4,
+          CANVAS_DPI,
+          0.9,
+        ),
+      ).toBe(true);
+    });
+  });
+
   describe("clampNodeScale", () => {
     it("returns unchanged scale when above minimum", () => {
       expect(clampNodeScale(2, 2, 100, 100, 25.4, CANVAS_DPI)).toEqual({
diff --git a/packages/react-canvas-designer/src/resizeConstraints.ts b/packages/react-canvas-designer/src/resizeConstraints.ts
index bf90a67..8dc6462 100644
--- a/packages/react-canvas-designer/src/resizeConstraints.ts
+++ b/packages/react-canvas-designer/src/resizeConstraints.ts
@@ -48,6 +48,72 @@ export function clampResizeBox(
   return newBox;
 }
 
+export type ScaledItemDimensions = {
+  width: number;
+  height: number;
+  scaleX: number;
+  scaleY: number;
+};
+
+/** Whether uniformly scaling items by `ratio` keeps every sticker above min size. */
+export function isMultiSelectResizeRatioAllowed(
+  items: readonly ScaledItemDimensions[],
+  minResizeSizeMm: number,
+  dpi: number,
+  ratio: number,
+): boolean {
+  if (ratio >= 1) {
+    return true;
+  }
+
+  for (const item of items) {
+    const scaledX = item.scaleX * ratio;
+    const scaledY = item.scaleY * ratio;
+    const clamped = clampNodeScale(
+      scaledX,
+      scaledY,
+      item.width,
+      item.height,
+      minResizeSizeMm,
+      dpi,
+    );
+    if (
+      Math.abs(clamped.scaleX - scaledX) > 1e-9 ||
+      Math.abs(clamped.scaleY - scaledY) > 1e-9
+    ) {
+      return false;
+    }
+  }
+
+  return true;
+}
+
+/** Multi-select transformer box: allow move/rotate; only block scale-below-min. */
+export function constrainMultiSelectBoundBox(
+  oldBox: ResizeBox,
+  newBox: ResizeBox,
+  items: readonly ScaledItemDimensions[],
+  minResizeSizeMm: number,
+  dpi: number,
+): ResizeBox {
+  if (Math.abs(newBox.rotation - oldBox.rotation) > 1e-4) {
+    return newBox;
+  }
+
+  const widthUnchanged = Math.abs(newBox.width - oldBox.width) < 1e-3;
+  const heightUnchanged = Math.abs(newBox.height - oldBox.height) < 1e-3;
+  if (widthUnchanged && heightUnchanged) {
+    return newBox;
+  }
+
+  const ratio = oldBox.width > 0 ? newBox.width / oldBox.width : 1;
+  if (isMultiSelectResizeRatioAllowed(items, minResizeSizeMm, dpi, ratio)) {
+    return newBox;
+  }
+
+  return oldBox;
+}
+
 /** Clamp uniform scale on a Konva group so the shorter side stays above the minimum. */
 export function clampNodeScale(
   scaleX: number,
diff --git a/packages/react-canvas-designer/src/selection.test.ts b/packages/react-canvas-designer/src/selection.test.ts
new file mode 100644
index 0000000..ca8c7d7
--- /dev/null
+++ b/packages/react-canvas-designer/src/selection.test.ts
@@ -0,0 +1,84 @@
+import {
+  isAdditivePointerEvent,
+  isAdditiveSelectionEvent,
+  isCanvasBackgroundTarget,
+  isTransformerTarget,
+  primarySelectedId,
+  resolveStickerInstanceId,
+  toggleShiftSelection,
+} from "./selection";
+
+describe("selection", () => {
+  describe("toggleShiftSelection", () => {
+    it("replaces selection on plain click", () => {
+      expect(toggleShiftSelection(["a", "b"], "c", false)).toEqual(["c"]);
+    });
+
+    it("adds to selection with additive click", () => {
+      expect(toggleShiftSelection(["a"], "b", true)).toEqual(["a", "b"]);
+    });
+
+    it("removes from selection when additive click hits an existing id", () => {
+      expect(toggleShiftSelection(["a", "b"], "a", true)).toEqual(["b"]);
+    });
+  });
+
+  describe("primarySelectedId", () => {
+    it("returns null for empty selection", () => {
+      expect(primarySelectedId([])).toBeNull();
+    });
+
+    it("returns the last selected id", () => {
+      expect(primarySelectedId(["a", "b"])).toBe("b");
+    });
+  });
+
+  describe("isAdditivePointerEvent", () => {
+    it("reads modifiers from MouseEvent and PointerEvent", () => {
+      expect(
+        isAdditivePointerEvent({
+          shiftKey: true,
+          ctrlKey: false,
+          metaKey: false,
+        } as MouseEvent),
+      ).toBe(true);
+      expect(
+        isAdditivePointerEvent({
+          shiftKey: false,
+          ctrlKey: false,
+          metaKey: false,
+        } as MouseEvent),
+      ).toBe(false);
+      expect(isAdditivePointerEvent(null)).toBe(false);
+    });
+  });
+
+  describe("resolveStickerInstanceId", () => {
+    it("walks parents to find a registered group", () => {
+      const stage = { parent: null };
+      const group = { parent: stage };
+      const image = { parent: group, getStage: () => stage };
+      const shapeRefs = new Map([["id-1", group]]);
+
+      expect(resolveStickerInstanceId(image, shapeRefs)).toBe("id-1");
+      expect(resolveStickerInstanceId({ parent: stage, getStage: () => stage }, shapeRefs)).toBeNull();
+    });
+  });
+
+  describe("isTransformerTarget", () => {
+    it("detects transformer nodes in the ancestor chain", () => {
+      const transformer = { getClassName: () => "Transformer", parent: null };
+      const anchor = { getClassName: () => "Rect", parent: transformer };
+      expect(isTransformerTarget(anchor)).toBe(true);
+      expect(isTransformerTarget({ getClassName: () => "Group", parent: null })).toBe(false);
+    });
+  });
+
+  describe("isCanvasBackgroundTarget", () => {
+    it("matches stage and layer only", () => {
+      expect(isCanvasBackgroundTarget({ getClassName: () => "Stage" })).toBe(true);
+      expect(isCanvasBackgroundTarget({ getClassName: () => "Layer" })).toBe(true);
+      expect(isCanvasBackgroundTarget({ getClassName: () => "Group" })).toBe(false);
+    });
+  });
+});
diff --git a/packages/react-canvas-designer/src/selection.ts b/packages/react-canvas-designer/src/selection.ts
new file mode 100644
index 0000000..90758ad
--- /dev/null
+++ b/packages/react-canvas-designer/src/selection.ts
@@ -0,0 +1,86 @@
+/** Plain click replaces selection; Shift/Ctrl/Cmd toggles membership. */
+export function toggleShiftSelection(
+  currentIds: readonly string[],
+  instanceId: string,
+  additive: boolean,
+): string[] {
+  if (!additive) {
+    return [instanceId];
+  }
+
+  const index = currentIds.indexOf(instanceId);
+  if (index >= 0) {
+    const next = [...currentIds];
+    next.splice(index, 1);
+    return next;
+  }
+
+  return [...currentIds, instanceId];
+}
+
+/** Last clicked sticker — used for duplicate fill and legacy `onSelectedIdChange`. */
+export function primarySelectedId(
+  selectedIds: readonly string[],
+): string | null {
+  if (selectedIds.length === 0) {
+    return null;
+  }
+  return selectedIds[selectedIds.length - 1] ?? null;
+}
+
+export function isAdditiveSelectionEvent(
+  event: Pick<MouseEvent, "shiftKey" | "ctrlKey" | "metaKey">,
+): boolean {
+  return event.shiftKey || event.ctrlKey || event.metaKey;
+}
+
+/** Read modifier keys from Konva / DOM pointer events (MouseEvent or PointerEvent). */
+export function isAdditivePointerEvent(event: Event | null | undefined): boolean {
+  if (!event || typeof event !== "object" || !("shiftKey" in event)) {
+    return false;
+  }
+  return isAdditiveSelectionEvent(
+    event as Pick<MouseEvent, "shiftKey" | "ctrlKey" | "metaKey">,
+  );
+}
+
+export function resolveStickerInstanceId(
+  target: { getStage?: () => unknown; parent?: unknown },
+  shapeRefs: ReadonlyMap<string, unknown>,
+): string | null {
+  let node: { parent?: unknown } | null = target;
+  const stage = target.getStage?.();
+  while (node && node !== stage) {
+    for (const [instanceId, group] of shapeRefs.entries()) {
+      if (group === node) {
+        return instanceId;
+      }
+    }
+    node = (node.parent ?? null) as { parent?: unknown } | null;
+  }
+  return null;
+}
+
+export function isTransformerTarget(
+  target: { getClassName?: () => string; parent?: unknown | null },
+): boolean {
+  let node: { getClassName?: () => string; parent?: unknown | null } | null =
+    target;
+  while (node) {
+    if (node.getClassName?.() === "Transformer") {
+      return true;
+    }
+    node = (node.parent ?? null) as {
+      getClassName?: () => string;
+      parent?: unknown | null;
+    } | null;
+  }
+  return false;
+}
+
+export function isCanvasBackgroundTarget(
+  target: { getClassName?: () => string },
+): boolean {
+  const className = target.getClassName?.();
+  return className === "Stage" || className === "Layer";
+}