Major update for v1 and tests

src/styles/ZoomControls.css

@@ -0,0 +1,66 @@
+.zoom-controls {
+  display: inline-flex;
+  align-items: center;
+  gap: 0;
+  background: #fff;
+  border: 1px solid var(--border);
+  border-radius: var(--radius-pill);
+  padding: 4px;
+  box-shadow: var(--shadow-xs);
+}
+
+.zoom-controls__btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 28px;
+  height: 28px;
+  border-radius: 999px;
+  background: transparent;
+  border: none;
+  color: var(--text-secondary);
+}
+
+.zoom-controls__btn:hover:not(:disabled) {
+  background: var(--brand-pink-soft);
+  color: var(--brand-pink-strong);
+}
+
+.zoom-controls__btn:disabled {
+  opacity: 0.35;
+  cursor: not-allowed;
+}
+
+.zoom-controls__value {
+  min-width: 48px;
+  font-size: 12px;
+  font-weight: 600;
+  color: var(--text-primary);
+  text-align: center;
+}
+
+/* Divider between zoom controls and snap toggle (Change 5). 1px hairline
+ * in the border colour, sized to match the height of the buttons minus a
+ * little vertical padding so it doesn't reach all the way to the pill's
+ * rounded edge. */
+.zoom-controls__divider {
+  display: inline-block;
+  width: 1px;
+  height: 18px;
+  background: var(--border);
+  margin: 0 4px;
+}
+
+/* Snap toggle. Reuses the base zoom-controls__btn styling for size /
+ * hover, plus an active variant so the user can see at a glance
+ * whether snap is on. Active = soft pink fill + strong pink icon,
+ * matching the rest of the editor's "selected" / "active" affordances. */
+.zoom-controls__btn--snap.is-active {
+  background: var(--brand-pink-soft);
+  color: var(--brand-pink-strong);
+}
+
+.zoom-controls__btn--snap.is-active:hover:not(:disabled) {
+  background: var(--brand-pink);
+  color: #fff;
+}