Snap-to-grid for moving/resizing canvas objects, plus a per-sheet grid size

Sheet.gridSize (4-200px, default 24, configurable in Settings -> Blatt)
now doubles as both the visible dot-grid's spacing and the snap
increment while dragging to move any canvas object, or free/viewport-
resizing a chart/text/button/fixed-viewport table. An "Automatisch"
table's resize is left unsnapped on top of this -- it already
discretizes to row/col boundaries by construction.

Also fixes the visible grid not actually lining up with real snap
positions once zoomed: the dot pattern's background-size now scales
with zoom like the objects themselves already did, instead of staying a
fixed screen-pixel size regardless of zoom level.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>

src/components/SheetCanvas.vue

@@ -6,6 +6,7 @@
  */
 import { computed, ref } from 'vue';
 import { useDocument } from '../store/document';
+import { DEFAULT_GRID_SIZE } from '../store/types';
 import CanvasObject from './CanvasObject.vue';
 import TheLogo from './TheLogo.vue';
 
@@ -30,6 +31,16 @@ const appearance = computed(() => {
   return s;
 });
 const showGrid = computed(() => sheet.value.showGrid !== false);
+/** Also the snap increment CanvasObject.vue moves/resizes against -- see
+ *  its own doc comment. */
+const gridSize = computed(() => sheet.value.gridSize ?? DEFAULT_GRID_SIZE);
+/** Scaled by zoom (unlike the rest of `.canvas-scroll`, which isn't) so the
+ *  visible dots always land exactly where an object will actually snap --
+ *  otherwise a zoomed-in/out grid would visually lie about the snap. */
+const gridStyle = computed(() => {
+  const px = gridSize.value * zoom.value;
+  return { backgroundSize: `${px}px ${px}px` };
+});
 
 /** Unscaled plane size: enclose every object with generous margin.
  *  A `fixed`-viewport table only ever occupies its own `view.width`/
@@ -92,6 +103,7 @@ function selectObj(id: string) {
     <div
       class="canvas-scroll"
       :class="{ 'no-grid': !showGrid }"
+      :style="gridStyle"
       tabindex="0"
       @wheel="onWheel"
       @keydown="onKeydown"
@@ -151,11 +163,11 @@ function selectObj(id: string) {
   inset: 0;
   overflow: auto;
   background-color: var(--bg);
-  /* grid dots use a fixed neutral so they read on any custom backdrop */
+  /* grid dots use a fixed neutral so they read on any custom backdrop --
+     background-size is set inline (gridStyle) from the sheet's gridSize */
   background-image:
     linear-gradient(rgba(128, 128, 128, 0.22) 1px, transparent 1px),
     linear-gradient(90deg, rgba(128, 128, 128, 0.22) 1px, transparent 1px);
-  background-size: 24px 24px;
   background-position: 0 0;
   outline: none;
 }