docs: per-tool pages for the vector-canvas toolbar

Adds a new "Vector tools" group to the in-app docs sidebar with one
page per toolbar tool + one page per supporting panel:

Toolbar tools (8):
- tool-select.md           — Select (V): move/scale/rotate whole layers,
                             multi-select, marquee, dive-into-path
- tool-direct-select.md    — Direct Selection (A): per-anchor edits,
                             handle break, segment-direct-edit
- tool-hand.md             — Hand (H): pan + temp-pan via Spacebar,
                             plus zoom controls (which work from any
                             tool)
- tool-pen.md              — Pen (P): full Illustrator parity —
                             Bézier draw, mid-draw spacebar reposition,
                             Alt handle-break, auto-add/delete anchors,
                             Cmd+J join, Cmd+Alt+J average
- tool-pencil.md           — Pencil (B): freehand → smoothed Bézier
- tool-shape.md            — Shape (S): rect/ellipse/polygon/star/line
                             primitives + Shift/Alt modifiers
- tool-text.md             — Text (T): rich-text layer + Type panel
                             + token notes
- tool-eyedropper.md       — Eyedropper (I): window.EyeDropper sample +
                             inline ⊙ buttons + browser-support notes

Supporting panels (3):
- pathfinder.md            — Unite/Subtract/Intersect/Exclude via the
                             vendored polygon-clipping
- align-distribute.md      — six align ops + four distribute ops, with
                             behaviour around locked layers
- free-transform.md        — multi-layer scale + rotate handles on
                             the selection bbox

Plus an overview page (vector-tools.md) with a keyed table of every
shortcut, a description of how the toolbar interacts with the Layers
panel, and the canvas-level keyboard shortcuts (Shift/Alt/arrow
nudges/Cmd+D/etc).

All linked into _DOCS_TOPICS as a new "Vector tools" group, ordered
after the existing Template-mode layouts section.

Co-Authored-By: Claude Opus 4.7 <[email protected]>

src/help/align-distribute.md

@@ -0,0 +1,60 @@
+# Align & Distribute
+
+Lines up multiple selected layers along a shared axis; spaces them
+evenly. Lives in the right-side **Align** panel, available whenever
+≥2 layers are selected.
+
+## Align ops
+
+Six alignment ops, organised in two rows. Each acts on every layer
+in the current selection:
+
+### Horizontal align (uses each layer's left / center / right edge)
+
+- **Align left** — every layer's left edge sets to the leftmost
+  selected layer's left.
+- **Align horizontal center** — every layer's horizontal center
+  sets to the midpoint of the selection's combined bounding box.
+- **Align right** — every layer's right edge sets to the
+  rightmost selected layer's right.
+
+### Vertical align (uses each layer's top / middle / bottom edge)
+
+- **Align top** — every layer's top sets to the topmost selected
+  layer's top.
+- **Align vertical middle** — every layer's vertical middle sets
+  to the midpoint of the selection's combined bounding box.
+- **Align bottom** — every layer's bottom sets to the bottommost
+  selected layer's bottom.
+
+## Distribute ops
+
+Spread three or more selected layers so their spacing is even.
+The outermost two layers stay put; intermediate layers redistribute.
+
+- **Distribute horizontal centers** — equal horizontal-center
+  spacing.
+- **Distribute vertical centers** — equal vertical-center spacing.
+- **Distribute horizontal gap** — equal *gap* between layer
+  bounding boxes horizontally (different from center-spacing when
+  layers have different widths).
+- **Distribute vertical gap** — equal vertical gap.
+
+## Behaviour notes
+
+- A locked layer in the selection is **ignored** by both align and
+  distribute — it stays put while everything else rearranges
+  around it.
+- The selection's combined bounding box is the reference for the
+  "center" ops. If you want to align to the canvas centre, select
+  every layer + the canvas margin first (or use a background-spanning
+  color layer).
+
+## Tips
+
+- For evenly-spaced rows of cards / chapters / icons: layout the
+  first and last positions, then **Distribute horizontal gap** with
+  the row of layers selected — the middles snap into place.
+- Combine with **Free Transform** to scale + align in two steps:
+  free-transform-scale to size everything to a common dimension,
+  then align.

src/help/free-transform.md

@@ -0,0 +1,47 @@
+# Free Transform
+
+Rotation + scale handles wrapped around the combined bounding box of
+the current selection. Lets you transform multiple layers as a group
+without flipping tools.
+
+## When the handles appear
+
+- Select any layer with the [Select tool](#/help/tool-select) — the
+  eight bounding-box handles + the small rotation handle appear
+  automatically.
+- Multi-select two or more layers — the handles wrap the combined
+  bounding box.
+- Press the **Free Transform** button (right-side toolbox) explicitly
+  to refresh the handles after a manual property edit.
+
+## Handles
+
+- **Eight bbox handles** — corners scale on both axes; sides scale
+  on one axis. Hold **Shift** to keep the aspect ratio on a corner
+  drag.
+- **Rotation handle** — small dot above the top edge. Drag to
+  rotate around the bbox centre. Hold **Shift** to snap to 15°
+  increments.
+
+## Multi-layer behaviour
+
+When two or more layers are selected:
+
+- Scaling proportionally rescales each layer's `x`, `y`, `w`, `h`
+  relative to the combined bounding box. Layers far from the
+  pivoted handle move and resize more than layers near it (the
+  intuitive result).
+- Rotating rotates each layer around the **group** centre. Each
+  layer's individual `rotate` value increments by the rotation
+  amount, and its `x/y` recompute to walk the orbit.
+
+## Tips
+
+- Free Transform composes well with [Align & Distribute](#/help/align-distribute) —
+  resize a row of layers to a common size with the scale handles
+  first, then align them.
+- For a single layer, the same handles + behaviour are available
+  via plain Select. Free Transform's value is the multi-layer
+  group transform.
+- Locked layers in the selection are ignored — they stay put while
+  the rest of the group transforms around them.

src/help/pathfinder.md

@@ -0,0 +1,45 @@
+# Pathfinder
+
+Boolean combine operations for vector shapes. Lives in the right-
+side **Pathfinder** panel, which becomes available when ≥2 vector
+shapes are selected.
+
+## The four ops
+
+- **Unite** — merges every selected shape into one combined fill
+  (boolean OR). Outer outlines join; interior overlaps disappear.
+- **Subtract** — removes every shape behind the topmost selected
+  shape from the topmost. Use this to "punch holes".
+- **Intersect** — keeps only the area common to every selected
+  shape (boolean AND). Hairline overlaps result in a hairline
+  output.
+- **Exclude** — XOR. Areas covered by an odd number of shapes
+  stay filled; even-coverage areas are removed.
+
+## How it works
+
+Powered by the vendored **polygon-clipping** library (~29 KB).
+Each Bézier shape gets flattened into polygon segments at a
+tolerance that keeps curves visually identical, the boolean op
+runs in flat-polygon space, and the result re-encodes as a
+single path layer.
+
+## Layer behaviour
+
+- The result is a new layer that **replaces** the selected shapes —
+  the originals are removed (use undo if you regret it).
+- The new layer inherits the fill / stroke / opacity of the
+  **frontmost** selected shape (highest z).
+- The new layer's position is the bounding box of all inputs,
+  so re-selection handles cover the combined region.
+
+## Tips
+
+- For complex multi-step ops (e.g., "subtract A from B then unite
+  with C"), do them one pair at a time — pathfinder operates on
+  the current selection.
+- The result is still an editable path. [Direct Selection](#/help/tool-direct-select)
+  lets you tweak the resulting anchors after the boolean.
+- Pathfinder ops on shapes with very dense curves (hundreds of
+  control points) can take a noticeable beat — large logos with
+  fine detail are the slow case.

src/help/tool-direct-select.md

@@ -0,0 +1,52 @@
+# Direct Selection tool (A)
+
+Edits anchors + Bézier handles on a single vector path. The
+counterpart to Select, which moves the whole layer.
+
+## Engaging a path
+
+- Switch to the tool (press **A**) and click a vector shape — every
+  anchor + handle appears.
+- Or with Select active, **double-click** the shape to dive in.
+- Non-pen primitives (rectangle, ellipse, polygon, star) auto-convert
+  to an editable path when you enter Direct Selection on them.
+
+## Single-anchor interactions
+
+- **Click** an anchor to select it (filled square).
+- **Drag** to move just that anchor; the segments connected to it
+  follow.
+- **Shift+click** more anchors to multi-select.
+- **Drag the small handle dot** off an anchor to adjust its tangent.
+  By default both handles move symmetrically (smooth point).
+- **Alt+drag** a handle to break symmetry — corner point with
+  independent handles per side.
+- **Click an anchor without dragging, then Alt+click** to flip
+  between smooth point and corner point.
+
+## Multi-anchor edits
+
+- Marquee around the path with empty-space drag — every anchor
+  inside the marquee selects.
+- **Arrow keys** nudge every selected anchor by 1 px. **Shift+Arrow**
+  by 10 px.
+- **Backspace / Delete** removes selected anchors. Adjacent segments
+  rejoin if the removed anchor was interior; the path opens if the
+  removed anchor was an endpoint.
+
+## Segment edits
+
+- **Drag a segment** between two anchors to bow it without moving
+  the anchors themselves (curve-direct-edit).
+- **Click an endpoint** when the path is open to continue drawing
+  from it (auto-flips you to the Pen tool with the path's last
+  anchor pre-selected).
+
+## Tips
+
+- The tool icon is light blue (vs. the Select tool's black arrow)
+  so you can tell at a glance which mode you're in.
+- Clicking off-canvas (or pressing **Esc**) deselects all anchors
+  and flips back to Select.
+- See also: [Pen tool](#/help/tool-pen) for drawing new paths from
+  scratch.

src/help/tool-eyedropper.md

@@ -0,0 +1,41 @@
+# Eyedropper tool (I)
+
+Samples a colour from anywhere on screen — Artstr canvas, another
+browser tab, your desktop wallpaper, anywhere. Uses the browser's
+native `window.EyeDropper` API.
+
+## Behaviour
+
+- Click the toolbar button (or press **I**) → the cursor changes to
+  a crosshair and a magnified pixel-grid follows the pointer.
+- Click anywhere on screen to sample that pixel's colour.
+- The sampled hex value lands in the **currently-active colour
+  swatch** — whichever fill / stroke / background slot last had
+  focus (right-side panel).
+- Press **Esc** to cancel without sampling.
+
+## Inline eyedropper buttons
+
+You don't need the toolbar tool to use the eyedropper — many
+colour-input fields in the right-side panels have a small ⊙ button
+next to them that triggers a one-shot sample directly into that
+specific field. Use that when you want to sample a colour for a
+specific property (e.g., stroke colour) without affecting the
+"active" slot.
+
+## Browser support
+
+- Chromium-based browsers (Chrome / Edge / Brave / Arc) — full
+  support.
+- Safari / Firefox — `window.EyeDropper` isn't implemented; the
+  button is disabled with a tooltip explaining the gap. Fall back
+  to manually entering a hex value or copying one from another tool.
+
+## Tips
+
+- The pixel-grid magnifier shows a 3×3 zoomed view around the
+  pointer so you can land on the exact pixel — useful when
+  sampling thin lines or anti-aliased edges.
+- The eyedropper is the easiest way to colour-match a logo or
+  branded element on another tab — just pop the source open
+  next to Artstr and sample directly.

src/help/tool-hand.md

@@ -0,0 +1,36 @@
+# Hand tool (H)
+
+Pans the canvas viewport. Useful for navigating large artboards
+when the canvas extends beyond the visible area.
+
+## Behaviour
+
+- **Drag** the canvas to pan in any direction.
+- The cursor changes to a closed grab while dragging.
+- Doesn't select, modify, or create layers.
+
+## Temp-pan from any tool
+
+You rarely need to switch to the Hand tool explicitly:
+
+- **Hold Spacebar** with any other tool active to temp-pan. The
+  cursor switches to the grab cursor; release the spacebar to pop
+  back to the previous tool. Works mid-stroke for the Pen + Pencil
+  tools (the in-progress draft stays put).
+
+## Zoom controls
+
+Zoom isn't tied to the Hand tool — it works from any tool:
+
+- **Cmd/Ctrl + scroll wheel** zooms toward the cursor.
+- **Cmd/Ctrl + + / -** zoom in / out by one preset step.
+- **Cmd/Ctrl + 0** fits the artboard to the viewport.
+- The **Zoom** select at the top of the canvas chooses a preset
+  level (25% → 400%) or "Fit".
+
+## Tips
+
+- The temp-pan modifier is essentially the only reason to flip to
+  the Hand tool deliberately — it gives you a momentary pan without
+  losing your active tool's modal state.
+- A trackpad two-finger swipe also pans without a tool change.

src/help/tool-pen.md

@@ -0,0 +1,75 @@
+# Pen tool (P)
+
+Illustrator-parity Bézier path tool. Click to drop anchors,
+click-drag for tangent handles. Outputs a vector `shape` layer
+(path kind) — editable later with [Direct Selection](#/help/tool-direct-select).
+
+## Drawing a new path
+
+- **Click** to drop a corner anchor.
+- **Click-drag** to drop an anchor and pull tangent handles for a
+  smooth curve.
+- **Shift+click** constrains the segment to a 45° angle (horizontal,
+  vertical, or diagonal).
+- **Close the path** by clicking the first anchor (the cursor shows
+  a small ○ when you're over it).
+- **Esc** or switching tools commits the draft as an open path.
+
+## Modifying mid-draw
+
+- **Spacebar (hold)** — reposition the anchor you're currently
+  placing without dropping it. Release to commit.
+- **Alt+drag** while pulling a handle — break symmetry so the
+  outgoing and incoming handles can point in different directions
+  (corner-with-handles).
+- **Click the most recent anchor** before clicking elsewhere to
+  delete just that handle, switching it from smooth to corner.
+
+## Editing an existing path
+
+When the Pen tool's cursor hovers over an existing path of the
+selected layer:
+
+- **Click a segment** between two anchors → adds a new anchor at
+  that point.
+- **Click an anchor** → removes it (auto-rejoin neighbours).
+- **Click an endpoint** when the path is open → continues drawing
+  from that endpoint.
+
+When hovering an anchor on a path **not** currently selected, the
+Pen cursor stays as the normal pen — click only selects the layer.
+
+## Multi-path operations
+
+With ≥2 vector shapes selected, the **Pathfinder** panel becomes
+available:
+
+- **Unite** — boolean OR.
+- **Subtract** — front minus back.
+- **Intersect** — boolean AND.
+- **Exclude** — XOR.
+
+See [Pathfinder](#/help/pathfinder) for the full ops list.
+
+## Joining and averaging anchors (Cmd+J / Cmd+Alt+J)
+
+With **multiple anchors selected via the Direct Selection tool**:
+
+- **Cmd+J** — join the two endpoints into a single anchor (or
+  bridge two open paths into one). If the two endpoints are
+  coincident, they merge; otherwise a connecting straight segment
+  is added.
+- **Cmd+Alt+J** — average (move both anchors to the midpoint
+  between them). Combined with **Cmd+J** afterwards, gives you a
+  literal Illustrator-style merge.
+
+## Tips
+
+- The stroke thickness while drawing matches what's set in the
+  right-side **Stroke** panel — set width + colour before you start
+  if you want immediate visual feedback.
+- Pen and Pencil store the same underlying path data, so a Pencil
+  sketch can be opened with Direct Selection + edited with the Pen
+  ops without conversion.
+- The canvas grid + snap settings (right-side panel) help with
+  precise vector placement.

src/help/tool-pencil.md

@@ -0,0 +1,45 @@
+# Pencil tool (B)
+
+Freehand drawing. Your pointer's path is recorded as a sequence of
+points then smoothed into a Bézier path on release.
+
+## Drawing
+
+- **Click + drag** to draw. Release to commit.
+- The resulting layer is a vector `shape` (path kind) — identical
+  data model to a path drawn with the Pen tool, so you can edit it
+  with [Direct Selection](#/help/tool-direct-select) afterwards.
+
+## Smoothing
+
+The pencil applies a default smoothing pass that:
+
+- Drops every Nth point to reduce noise.
+- Fits Bézier handles to the remaining points using a curvature-
+  preserving algorithm.
+- Closes the path automatically if your release point is within a
+  short distance of the start (configurable threshold).
+
+The right-side **Tool options** pane has a smoothing slider — drop
+it to 0 to get every raw input point preserved; crank it up for
+sketch-style smoothed strokes.
+
+## Modifiers
+
+- **Alt+drag** — add to the currently-selected path (extends it
+  from the closest endpoint).
+- **Shift+click** an endpoint of the currently-selected path to
+  continue from that endpoint with a single straight segment.
+
+## Stroke + fill
+
+Like the Pen, the active **Stroke** panel + **Fill** panel apply at
+draw time. A pencil layer with a fill becomes a closed-shape fill;
+with stroke only it stays a single drawn line.
+
+## Tips
+
+- Trackpad input gives you nicer curves than a mouse — natural
+  micro-jitter feeds the smoother better.
+- For a pixel-perfect path, switch to the **Pen** tool instead —
+  Pencil is for organic strokes, Pen for deliberate Bézier work.

src/help/tool-select.md

@@ -0,0 +1,43 @@
+# Select tool (V)
+
+The default tool. Moves, scales, and rotates whole layers.
+
+## Single-layer interactions
+
+- **Click** a layer to select it. Eight handles appear around the
+  bounding box.
+- **Drag** to move. Hold **Shift** to constrain to the nearest 45°
+  axis (horizontal, vertical, or diagonal).
+- **Drag a corner handle** to scale. Hold **Shift** to keep the
+  aspect ratio.
+- **Drag a side handle** to scale on one axis.
+- **Drag the small rotate handle** above the top edge to rotate. Hold
+  **Shift** to snap to 15° increments.
+- **Hold Alt while dragging** to duplicate the layer in place.
+
+## Multi-select
+
+- **Shift+click** another layer to add it to the selection.
+- **Cmd/Ctrl+A** selects every layer on the current surface.
+- **Marquee box-select** — click an empty area of the canvas and drag.
+  Every layer whose bounding box intersects the marquee joins the
+  selection.
+
+With ≥2 layers selected, the **Align & Distribute** panel + the
+**Pathfinder** ops (for vector shapes) become available.
+
+## Dive into a path
+
+- **Double-click** a vector shape with Select active to flip to
+  Direct Selection on that path. The path's anchors + handles
+  appear so you can edit them.
+- Clicking outside the shape with Direct Selection active deselects
+  and pops you back to Select.
+
+## Tips
+
+- The Select tool ignores the per-layer visibility / lock state set
+  in the Layers panel. A locked layer still highlights on hover but
+  refuses drag input.
+- Hold **Cmd/Ctrl** while clicking to pick up a layer that's behind
+  another layer at the click point (z-stack walk).

src/help/tool-shape.md

@@ -0,0 +1,44 @@
+# Shape tool (S)
+
+Drops vector primitives — rectangle, ellipse, polygon, star, line.
+The right-side **Tool options** pane picks the primitive + per-shape
+parameters before you drag.
+
+## Primitives
+
+- **Rectangle** — drag a bounding box.
+- **Ellipse** — drag a bounding box; the ellipse inscribes it.
+- **Polygon** — N-sided regular polygon. The options pane sets the
+  side count (3 – 32) before you drag.
+- **Star** — M-pointed star. Options pane sets points + inner-radius
+  ratio.
+- **Line** — drag from start to end.
+
+## Drag modifiers
+
+- **Shift** — constrain to a perfect square / circle, snap polygon
+  rotation to 15°, lock line to 45° angles.
+- **Alt** — draw from the centre outward instead of corner-to-corner.
+
+## Why these are vector
+
+Every shape is stored as a Bézier path under the hood. Switching to
+**Direct Selection** on any of them auto-converts the primitive into
+an editable anchors-plus-handles path. You can then add / remove /
+modify anchors like any other path.
+
+## Fill + stroke
+
+The right-side **Fill** and **Stroke** panels apply at draw time:
+
+- Solid colour, gradient, or "none".
+- Stroke width, dash pattern, line cap.
+- The active settings render live in the preview while you drag.
+
+## Tips
+
+- For non-rectangular text containers, draw a shape, then add a text
+  layer on top + use the layer's **Clip** option to clip the text
+  to the shape.
+- The **line** primitive's endpoints are anchors — they show up under
+  Direct Selection and can be moved independently.

src/help/tool-text.md

@@ -0,0 +1,61 @@
+# Text tool (T)
+
+Drops a text layer. Drag to size the bounding box; the layer is
+created with `contentEditable` set so you can type immediately.
+
+## Creating
+
+- **Drag** a rectangle on the canvas to size the text box.
+- The cursor lands inside the box at the end of the drag — start
+  typing.
+- **Click + release without dragging** drops a default-sized text
+  box at the click point.
+
+## Editing
+
+A text layer's content is HTML (rich text). Inline marks supported:
+
+- **Bold** (`**bold**` or **Cmd/Ctrl + B**)
+- *Italic* (`*italic*` or **Cmd/Ctrl + I**)
+- Underline (toolbar button or **Cmd/Ctrl + U**)
+- Strikethrough
+- Inline link (paste a URL while text is selected; or use the link
+  button in the **Type** panel).
+
+Block formatting:
+
+- Headings via the right-side type panel.
+- Bulleted / numbered lists (Enter continues the list; empty Enter
+  exits).
+- Alignment (left / center / right / justify).
+
+## Right-side Type panel
+
+When a text layer is selected:
+
+- Font family picker (system fonts + a vendored Google Fonts subset).
+- Font size + weight + style.
+- Colour (with the [Eyedropper](#/help/tool-eyedropper) inline).
+- Letter spacing, line height.
+- Horizontal + vertical alignment within the box.
+- Padding (inset from the box edge).
+
+## Behaviour notes
+
+- Text rasterizes via the browser's font engine — what you see is
+  what the PNG export captures. PDF export emits real PDF text for
+  fonts on the embeddable allowlist (Times / Helvetica / Courier
+  families); other fonts fall back to vector paths in the PDF.
+- Linked-design and pixel-art layers can sit on top of text without
+  the text losing its editability.
+- For multi-page **books**, place body-text headings via the chapter
+  editor's markdown (the reflow engine handles pagination there) —
+  the Text tool is for designed-page captions / titles, not body.
+
+## Tips
+
+- A locked layer (lock icon in the Layers panel) refuses clicks —
+  unlock first if a text box won't activate.
+- Token text (`{page-number}` etc) in a **book master** text layer
+  resolves per-page. Token text in a designed-page text layer stays
+  literal.

src/help/vector-tools.md

@@ -0,0 +1,51 @@
+# Vector tools — overview
+
+The left-hand toolbar lives on every canvas-style artboard (Custom Art,
+Slide, single deck slide, book pages, book masters). It picks the
+active tool — what your pointer does when you click + drag the canvas.
+
+## The toolbar
+
+| Key | Tool | What it does |
+|-----|------|-------------|
+| **V** | [Select](#/help/tool-select) | Move / scale / rotate whole layers. The default. |
+| **A** | [Direct Selection](#/help/tool-direct-select) | Edit anchors + handles on a single path. |
+| **H** | [Hand](#/help/tool-hand) | Pan the canvas (hold spacebar for a quick temp-pan from any other tool). |
+| **P** | [Pen](#/help/tool-pen) | Click to drop anchors, click-drag for Bézier handles. Illustrator-parity behaviour. |
+| **B** | [Pencil](#/help/tool-pencil) | Freehand drawing. Smoothed into a Bézier path on release. |
+| **S** | [Shape](#/help/tool-shape) | Drop primitives — rectangle / ellipse / polygon / star / line. |
+| **T** | [Text](#/help/tool-text) | Drop a text layer. Drag to size, then type. |
+| **I** | [Eyedropper](#/help/tool-eyedropper) | Sample a colour from anywhere on screen. |
+
+## Supporting panels
+
+These aren't toolbar tools — they're floating panels that operate on
+whatever you've selected.
+
+- [**Pathfinder**](#/help/pathfinder) — Unite / Subtract / Intersect /
+  Exclude on two or more selected shapes.
+- [**Align & Distribute**](#/help/align-distribute) — line up multiple
+  layers; even-space-distribute.
+- [**Free Transform**](#/help/free-transform) — rotate / scale handles
+  around the selection bbox without flipping tools.
+
+## How the toolbar interacts with the layer list
+
+- Selecting a layer in the **Layers** panel acts like clicking it with
+  the Select tool — handles appear, the canvas selects it.
+- Double-clicking a vector shape with Select drops you into Direct
+  Selection on that path (Illustrator-style "dive in"). Click outside
+  the shape (or hit Esc) to pop back out.
+- The active tool persists per session — switching tabs / modes keeps
+  your last tool active.
+
+## Keyboard shortcuts (canvas focus)
+
+- **V / A / H / P / B / S / T / I** — switch tools.
+- **Shift** while drawing — constrain (square / circle / 45° angles).
+- **Alt** — duplicate-as-you-drag for a selected layer.
+- **Arrow keys** — nudge selection by 1 px; **Shift+Arrow** by 10 px.
+- **Cmd/Ctrl + D** — duplicate selected.
+- **Cmd/Ctrl + Z** / **Cmd/Ctrl + Shift + Z** — undo / redo.
+- **Delete / Backspace** — remove selected.
+- **Spacebar** — hold to temp-pan (releases back to the previous tool).

src/index.html

@@ -12055,6 +12055,18 @@
       { slug: 'deck',      title: 'Slide deck',         group: 'Template-mode layouts', file: 'help/deck.md' },
       { slug: 'pixelart',  title: 'Pixel art',          group: 'Template-mode layouts', file: 'help/pixelart.md' },
       { slug: 'book',      title: 'Book',               group: 'Template-mode layouts', file: 'help/book.md' },
+      { slug: 'vector-tools',    title: 'Overview',           group: 'Vector tools', file: 'help/vector-tools.md' },
+      { slug: 'tool-select',     title: 'Select (V)',         group: 'Vector tools', file: 'help/tool-select.md' },
+      { slug: 'tool-direct-select', title: 'Direct Selection (A)', group: 'Vector tools', file: 'help/tool-direct-select.md' },
+      { slug: 'tool-hand',       title: 'Hand (H)',           group: 'Vector tools', file: 'help/tool-hand.md' },
+      { slug: 'tool-pen',        title: 'Pen (P)',            group: 'Vector tools', file: 'help/tool-pen.md' },
+      { slug: 'tool-pencil',     title: 'Pencil (B)',         group: 'Vector tools', file: 'help/tool-pencil.md' },
+      { slug: 'tool-shape',      title: 'Shape (S)',          group: 'Vector tools', file: 'help/tool-shape.md' },
+      { slug: 'tool-text',       title: 'Text (T)',           group: 'Vector tools', file: 'help/tool-text.md' },
+      { slug: 'tool-eyedropper', title: 'Eyedropper (I)',     group: 'Vector tools', file: 'help/tool-eyedropper.md' },
+      { slug: 'pathfinder',      title: 'Pathfinder',         group: 'Vector tools', file: 'help/pathfinder.md' },
+      { slug: 'align-distribute',title: 'Align & Distribute', group: 'Vector tools', file: 'help/align-distribute.md' },
+      { slug: 'free-transform',  title: 'Free Transform',     group: 'Vector tools', file: 'help/free-transform.md' },
     ];
     const _docsCache = new Map(); // slug → rendered HTML
     let _docsActiveSlug = 'index';