demo(/2): direct-manipulation card grid — drag/rotate/crop/reorder/resize

Replaces the prior text-only "What's added" features list with an interactive
showcase: 4 cols × 2 rows of colored-rect SVG cards, each demoing one of the
fork's direct-manipulation features:

- rotate (-15° tilt) / drag (with 4-arrow icon + "hold ⌘ to disable snap")
- crop (mild) / crop (aggressive) — both say "double-click to crop"
- reorder (back, z=101) / reorder (front, z=1000) — partial overlap, hotkey
  hints burned in
- resize (AR-locked, bigger) / resize (free-AR, stretched) — each labeled

All cards are `<img v-drag>` so dblclick → crop mode works on any of them.
SVGs use `preserveAspectRatio="none"` so x/y-resize stretches the artwork to
fill the wrapper instead of letterboxing — trade-off: rounded corners go
elliptical when the wrapper distorts from the natural 1.71:1 AR.

`feat-resize-locked` uses the new `data-lock-ar="1.7143"` directive attribute
to keep AR; corner handles preserve ratio, L/R/T/B border handles are hidden.

slides.coords.yaml carries the default positions for all 8 cards.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

Author: ryan-williams

demo/starter/public/feature-crop-2.svg

@@ -1,4 +1,14 @@
 # Slidev drag coords — auto-managed by the dev server.
 # Tracked in git by default; add to .gitignore if you'd rather keep positions personal.
 # Top-level keys are slide numbers (1-based); values are dragId → posStr.
-{}
+"1":
+  ClZua: 530,460,160,72
+"2":
+  feat-reorder-2: 503,228,180,105,0,1000
+  feat-crop: 287,172,180,105,0,100,16,16,10,7
+  feat-crop-2: 288,251,180,105,0,100,28,9,28,28
+  feat-drag: 85,325,180,105
+  feat-rotate: 76,174,180,105,-15
+  feat-reorder-1: 483,178,180,105,0,101
+  feat-resize-locked: 696,174,235,137
+  feat-resize: 696,327,264,93

demo/starter/public/feature-crop.svg

@@ -33,13 +33,7 @@ publish:
 
 # <span class="font-mono">Open&#8209;Athena<span class="opacity-50">/</span>slidev</span>
 
-A fork that adds <span class="text-white font-semibold">direct manipulation</span> — click + drag, snap, crop, undo, multi-tab live edits.
-
-<v-drag pos="410,400,160,56">
-  <div class="bg-primary text-white rounded-lg shadow-xl cursor-move font-medium select-none w-full h-full flex items-center justify-center">
-    👈 drag me
-  </div>
-</v-drag>
+A fork of <a href="https://sli.dev" target="_blank" class="text-white font-semibold underline underline-offset-4 decoration-white/40 hover:decoration-white">sli.dev</a> that adds <span class="text-white font-semibold">direct manipulation</span> — click + drag, snap, crop, undo, multi-tab live edits.
 
 <div class="abs-bl m-6 text-sm">
   <a href="https://github.com/Open-Athena/slidev" target="_blank" class="text-white !text-opacity-90 hover:!text-opacity-100 underline underline-offset-4 decoration-white/40 hover:decoration-white">
@@ -54,53 +48,34 @@ Press space / → to advance.
 
 ---
 layout: default
+title: Direct manipulation
 ---
 
-# What's added
-
-The slides that follow are the unmodified upstream `slidev` starter deck — these capabilities are active throughout:
-
-<div class="grid grid-cols-2 gap-x-8 gap-y-3 mt-6 text-base">
-
-<div>
-
-**Click + drag** to move any `<v-drag>` element body.
-
-</div><div>
-
-**Snap-align** to edges/centers of other elements; **Shift** / **⌘** disables.
-
-</div><div>
-
-**Resize · rotate · crop** — handles on selected elements; double-click an image to crop, **Alt** locks AR.
-
-</div><div>
-
-**Z-order**: ⌘↑ / ⌘↓ forward/back; **Shift** for to-front/to-back.
+# Direct manipulation
 
-</div><div>
+In OA/slidev, click any image to **drag**, **resize**, **rotate**, or **reorder** it; **double-click** to enter **crop** mode. Try it on the cards below.
 
-**Undo / redo** with Cmd+Z / Cmd+Shift+Z, persisted across reloads.<br/>**History drawer** shows every edit; click to restore.
-
-</div><div>
-
-**Insert image**: press `i` to pick, or drop image / video files on the slide.
-
-</div><div>
-
-**Mobile**: pinch-zoom + pan slides; pinch-vs-drag guards on touch elements.
-
-</div><div>
-
-**Live multi-tab editing** — drag in one tab, see it in all others (dev server: SSE; static deploys: localStorage events).
+<img v-drag="'feat-rotate'" src="/feature-rotate.svg">
+<img v-drag="'feat-drag'" src="/feature-drag.svg">
+<img v-drag="'feat-crop'" src="/feature-crop.svg">
+<img v-drag="'feat-crop-2'" src="/feature-crop-2.svg">
+<img v-drag="'feat-reorder-1'" src="/feature-reorder.svg">
+<img v-drag="'feat-reorder-2'" src="/feature-reorder-2.svg">
+<img v-drag="'feat-resize'" src="/feature-resize.svg">
+<img v-drag="'feat-resize-locked'" src="/feature-resize-locked.svg" data-lock-ar="1.7143">
 
+<div class="abs-b mb-3 w-full text-center text-xs opacity-60">
+Reorder: <kbd>⌘↑</kbd> / <kbd>⌘↓</kbd> forward/back · <kbd>⇧⌘↑</kbd> / <kbd>⇧⌘↓</kbd> to-front/back &nbsp;·&nbsp; Undo / redo: <kbd>⌘Z</kbd> / <kbd>⇧⌘Z</kbd>
 </div>
 
-</div>
+---
+layout: center
+class: text-center
+---
 
-<div class="mt-8 text-sm opacity-60">
-Try the draggable Tweet on the "Components" slide, or the example boxes on the "Draggable Elements" slide.
-</div>
+# Upstream `slidev` deck follows
+
+The fork's direct-manipulation features are active throughout — try grabbing the Tweet on the Components slide, or the logo on the Draggable Elements slide.
 
 ---