From ef03f731d112a3fd3ea2f5948fa75a87d2d4f3d6 Mon Sep 17 00:00:00 2001
From: thePR0M3TH3AN <53631862+PR0M3TH3AN@users.noreply.github.com>
Date: Thu, 4 Jun 2026 09:32:11 -0400
Subject: [PATCH] =?UTF-8?q?docs:=20audit=20pass=20=E2=80=94=20fix=20wrong?=
=?UTF-8?q?=20shortcut=20+=20behaviour=20claims?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
Swept the help pages against the actual code paths and removed /
corrected claims that didn't ship.
vector-tools.md
- Removed: spacebar temp-pan, Alt duplicate-as-you-drag, generic
Shift-constrain.
- Added: verified shortcuts (Cmd+Z/Y/D/C/X/V/G, Cmd+]/[ with
Shift modifier, Cmd+J / Cmd+Alt+J in Pen edit mode,
Delete/Backspace for layers + anchors).
tool-select.md
- Removed Cmd+A (not wired), Alt-drag-duplicate (not wired),
Shift-constrain-axis drag (not wired), Cmd-click stack-walk
(not wired). Kept the verified marquee + multi-select.
tool-direct-select.md
- Re-wrote anchor / handle interactions to match the actual hit-
test branches (Alt-click anchor toggles kind in one click; Alt-
drag a handle breaks symmetry; Alt-click segment inserts an
anchor; plain drag of a segment bows it). Removed the "click an
endpoint to continue drawing" claim — that's a Pen-only flow.
tool-hand.md
- Removed every fictional zoom shortcut (Cmd+wheel, Cmd+0,
Cmd+= / Cmd+-). Documented the real zoom controls (−/+/Fit
buttons + dropdown in the canvas toolbar). Spacebar reposition
scoped correctly to the Pen tool only.
tool-pen.md
- Clarified that the Pen options pane has its own Fill / Stroke
inputs (separate from any "Stroke panel" that doesn't actually
exist).
tool-pencil.md
- Removed every claim that wasn't true: smoothing slider, Alt-drag
append, auto-close. Pencil writes a plain polyline (M…L L L…),
one layer per stroke. Tool options pane has only colour + width.
tool-shape.md
- Filled in the missing primitives (rounded-rect / circle /
triangle — total 8, not 5). Removed Shift / Alt drag modifiers
that aren't checked in startShapeDrag / commitShapeFromDrag.
Added the small-drag → default-size fallback that the code does
do.
tool-text.md
- Replaced the "drag a rectangle to size" claim with the actual
click-to-place behaviour (placeTextWithTool drops a fixed-size
box at the cursor + auto-flips to Select with the box focused).
Softened the Cmd+B/I/U claims to "browser native rich-text
shortcuts" since they're not wired in the app code.
tool-eyedropper.md
- Replaced the fictional "inline ⊙ buttons next to colour fields"
with the real OS-colour-picker eyedropper that Chrome's native
shows.
panel-layers.md
- Removed Cmd+A select-all (not wired). Added Shift modifier to
Cmd+]/[ for bring-to-front / send-to-back. Clarified that
position units are inches in print modes, pixels in Custom Art
/ Slide / Deck (matches the unit toggle behaviour).
Co-Authored-By: Claude Opus 4.7
---
src/help/panel-layers.md | 16 +++++----
src/help/tool-direct-select.md | 16 +++++----
src/help/tool-eyedropper.md | 19 +++++++----
src/help/tool-hand.md | 28 +++++++---------
src/help/tool-pen.md | 12 ++++---
src/help/tool-pencil.md | 51 +++++++++++-----------------
src/help/tool-select.md | 26 ++++++---------
src/help/tool-shape.md | 61 +++++++++++++++++-----------------
src/help/tool-text.md | 31 +++++++++--------
src/help/vector-tools.md | 21 ++++++++----
10 files changed, 141 insertions(+), 140 deletions(-)
diff --git a/src/help/panel-layers.md b/src/help/panel-layers.md
index d3fac2e..667270f 100644
--- a/src/help/panel-layers.md
+++ b/src/help/panel-layers.md
@@ -40,11 +40,14 @@ Each row in the layer list shows:
- **Drag** rows to reorder. Z-order on the canvas follows the
list order (top of the list = top of the stack).
- **Cmd/Ctrl + ]** / **Cmd/Ctrl + [** sends selected layers
- forward / backward.
-- **Shift+click** to multi-select; then drag a contiguous block.
+ forward / backward. Add **Shift** for bring-to-front / send-to-
+ back.
+- **Shift+click** (or Cmd / Ctrl + click) to multi-select rows.
- **Group** — select multiple rows + click the Group button (or
- Cmd/Ctrl + G) to collapse them under a single expandable row.
- Groups have their own visibility / lock toggles that cascade.
+ press **Cmd/Ctrl + G**) to collapse them under a single
+ expandable row. Groups have their own visibility / lock toggles
+ that cascade.
+- **Ungroup** — click an active group's Ungroup button.
## Layer options (the per-layer right-side pane)
@@ -52,8 +55,9 @@ Clicking a layer in the list (or selecting it on the canvas)
populates a contextual options block in the right-side floating
pane. Common controls:
-- **Position** — x / y / w / h in inches (or px in screen-DPI
- modes). Aspect-ratio lock keeps width + height proportional.
+- **Position** — x / y / w / h in canvas units (inches for print
+ modes; pixels for Custom Art / Slide / Deck). The 🔒 button
+ toggles aspect-ratio lock so changing w updates h proportionally.
- **Rotation** — 0–360°.
- **Opacity** — 0–1.
- **Fit** — for image layers: cover / contain / fill / none.
diff --git a/src/help/tool-direct-select.md b/src/help/tool-direct-select.md
index b21d7ee..444eca2 100644
--- a/src/help/tool-direct-select.md
+++ b/src/help/tool-direct-select.md
@@ -21,8 +21,8 @@ counterpart to Select, which moves the whole layer.
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.
+- **Alt+click an anchor** toggles between smooth point and corner
+ point.
## Multi-anchor edits
@@ -36,11 +36,13 @@ counterpart to Select, which moves the whole layer.
## 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).
+- **Drag a segment** between two anchors to bow it (curve-direct-
+ edit) without moving the anchors themselves.
+- **Alt+click a segment** to insert a new anchor at the click point
+ and drag it.
+- To continue drawing from an open endpoint, switch to the **Pen
+ tool** and click the endpoint — Direct Selection alone won't
+ extend the path.
## Tips
diff --git a/src/help/tool-eyedropper.md b/src/help/tool-eyedropper.md
index e7d75c7..9744ffb 100644
--- a/src/help/tool-eyedropper.md
+++ b/src/help/tool-eyedropper.md
@@ -14,14 +14,19 @@ native `window.EyeDropper` API.
focus (right-side panel).
- Press **Esc** to cancel without sampling.
-## Inline eyedropper buttons
+## OS colour picker eyedropper
-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.
+The browser's native colour picker (which opens when you click any
+colour field in the right-side panels) also includes its own
+eyedropper button in Chromium-based browsers — useful when you
+want to sample a colour directly into a specific field instead of
+the active slot. Behaviour differs by browser:
+
+- **Chromium-based** (Chrome / Edge / Brave) — the native colour
+ picker has an eyedropper inside.
+- **Safari / Firefox** — no built-in eyedropper. Type a hex value
+ by hand or use the dedicated toolbar tool to sample into the
+ active swatch.
## Browser support
diff --git a/src/help/tool-hand.md b/src/help/tool-hand.md
index bcb74db..a4da63d 100644
--- a/src/help/tool-hand.md
+++ b/src/help/tool-hand.md
@@ -9,28 +9,24 @@ when the canvas extends beyond the visible area.
- The cursor changes to a closed grab while dragging.
- Doesn't select, modify, or create layers.
-## Temp-pan from any tool
+## Pen-mode Spacebar reposition
-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).
+A specific case: while mid-draw with the **Pen tool**, holding
+**Spacebar** repositions the anchor you're currently placing (and
+slides its handles with it). This is a Pen-tool-only behaviour, not
+a global "temp-pan". Release to commit the anchor.
## Zoom controls
-Zoom isn't tied to the Hand tool — it works from any tool:
+Zoom isn't tied to the Hand tool — it works from any tool via the
+canvas toolbar at the top of the canvas:
-- **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".
+- **− / +** buttons step by 10 % each.
+- **Zoom dropdown** chooses a preset level.
+- **Fit** button auto-fits the artboard to the viewport.
## 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.
+- For pixel-precise alignment, zoom in via the **+** button until
+ pixel boundaries are visible, then pan with the Hand tool.
diff --git a/src/help/tool-pen.md b/src/help/tool-pen.md
index ac97d19..e9543d0 100644
--- a/src/help/tool-pen.md
+++ b/src/help/tool-pen.md
@@ -65,11 +65,13 @@ With **multiple anchors selected via the Direct Selection tool**:
## 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.
+- The Pen tool's options pane has its own **Fill colour**, **Stroke
+ colour**, and **Stroke width** inputs — set them before you start
+ drawing for immediate visual feedback. They're separate from any
+ layer's existing stroke settings.
+- The **Fill closed path** checkbox in the options pane controls
+ whether a closed path renders with its fill colour or stays
+ outline-only.
- 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.
diff --git a/src/help/tool-pencil.md b/src/help/tool-pencil.md
index 0e3879e..97ce001 100644
--- a/src/help/tool-pencil.md
+++ b/src/help/tool-pencil.md
@@ -1,45 +1,32 @@
# 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.
+Freehand drawing. Your pointer's path is sampled as a polyline of
+line segments — each stroke becomes its own `shape` (path) layer.
## 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.
+- The resulting layer is a vector `shape` (path kind) — same
+ underlying data model as a Pen path, so you can edit it with
+ [Direct Selection](#/help/tool-direct-select) afterwards (drag
+ individual anchors, bow segments, etc).
-## Smoothing
+## Tool options
-The pencil applies a default smoothing pass that:
+The right-side **Tool options** pane has two inputs:
-- 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).
+- **Stroke colour** — the line colour.
+- **Stroke width** — in pixels.
-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.
+Both apply at draw time. They're separate from any selected
+layer's stroke settings.
## 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.
+- Pencil strokes are stored as line-to segments (no smoothing in
+ v1). For a smoothed curve, draw with the **Pen tool** instead and
+ pull tangent handles where you want curves.
+- Each release creates a new layer — for multi-stroke sketches you
+ can group the layers later via the Layers panel.
+- Trackpad input gives you smoother visual motion than a mouse, but
+ the underlying path stays a polyline either way.
diff --git a/src/help/tool-select.md b/src/help/tool-select.md
index b938223..f9c7629 100644
--- a/src/help/tool-select.md
+++ b/src/help/tool-select.md
@@ -6,22 +6,20 @@ The default tool. Moves, scales, and rotates whole layers.
- **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** the layer body to move it.
+- **Drag a corner handle** to scale on both axes.
- **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.
+- **Drag the rotate handle** above the top edge to rotate.
+- **Cmd/Ctrl + D** duplicates the selected layer.
## Multi-select
-- **Shift+click** another layer to add it to the selection.
-- **Cmd/Ctrl+A** selects every layer on the current surface.
+- **Shift+click** (or Cmd / Ctrl + click) another layer to add it to
+ the selection.
- **Marquee box-select** — click an empty area of the canvas and drag.
Every layer whose bounding box intersects the marquee joins the
- selection.
+ selection. Hold **Shift / Cmd / Ctrl** while marqueeing to add to
+ the existing selection instead of replacing it.
With ≥2 layers selected, the **Align & Distribute** panel + the
**Pathfinder** ops (for vector shapes) become available.
@@ -36,8 +34,6 @@ With ≥2 layers selected, the **Align & Distribute** panel + the
## 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).
+- A locked layer (lock icon in the Layers panel) refuses drag input
+ on the canvas; the row in the list still highlights on hover.
+- Hidden layers (eye icon off) don't intercept canvas clicks at all.
diff --git a/src/help/tool-shape.md b/src/help/tool-shape.md
index c71011e..881b420 100644
--- a/src/help/tool-shape.md
+++ b/src/help/tool-shape.md
@@ -1,44 +1,45 @@
# 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.
+Drops vector primitives by drag-creating a bounding box on the
+canvas. The right-side **Tool options** pane picks which primitive +
+its fill / stroke before you drag.
## Primitives
+The options pane's **Shape** dropdown:
+
- **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.
+- **Rounded rectangle** — same but with a configurable corner radius.
+- **Circle** — perfect circle inscribed in the drag bbox.
+- **Ellipse** — ellipse inscribing the drag bbox.
+- **Triangle** — equilateral-ish triangle inscribed in the bbox.
+- **Polygon** — N-sided regular polygon.
+- **Star** — M-pointed star.
+- **Line** — line from drag start to drag end.
-## Drag modifiers
+## Tool options
-- **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.
+- **Shape** — the dropdown above.
+- **Fill** checkbox — toggle whether the new shape gets a solid fill.
+- **Fill colour** — picker when Fill is on.
+- **Stroke colour** + **Stroke width** — applies as the new shape's
+ stroke. Setting Stroke width to 0 + Fill on = filled-only.
## 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.
+Every primitive stores an internal `shape.kind` plus parameter data
+(point count, inner radius, corner radius, etc). You can tweak those
+parameters later from the layer-options pane. Switching to **Direct
+Selection** on a primitive auto-converts it into an editable
+anchors-plus-handles path, after which the primitive parameters are
+replaced by the raw path data.
## 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.
+- For non-rectangular text containers: draw a shape, then add a text
+ layer on top + use the text layer's **Clip** option (in the layer-
+ options pane) to clip the text to the shape.
+- The **line** primitive's endpoints are anchors — switching to
+ Direct Selection lets you move each endpoint independently.
+- A drag shorter than ~0.08 in drops a default-sized shape at the
+ cursor (so a click without dragging still creates something).
diff --git a/src/help/tool-text.md b/src/help/tool-text.md
index a34e805..fa12597 100644
--- a/src/help/tool-text.md
+++ b/src/help/tool-text.md
@@ -5,29 +5,28 @@ 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.
+- **Click** the canvas. A default-sized text box drops at the click
+ point, the tool auto-flips back to Select, and the box's
+ contentEditable area gains focus so you can start typing
+ immediately. The placeholder text is pre-selected so your first
+ keystroke replaces it.
## Editing
-A text layer's content is HTML (rich text). Inline marks supported:
+A text layer's content is HTML (rich text). Inline marks are
+applied via the text-layer-options inline buttons (or the browser's
+native rich-text shortcuts when the contenteditable area has focus
+— browser behaviour differs):
-- **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).
+- **Bold**, *italic*, underline, strikethrough — via the inline
+ toolbar buttons that appear with a text layer selected.
+- Inline link — use the link button in the layer-options pane to
+ add a URL to selected text.
Block formatting:
-- Headings via the right-side type panel.
-- Bulleted / numbered lists (Enter continues the list; empty Enter
- exits).
-- Alignment (left / center / right / justify).
+- Alignment (left / center / right) via the **Alignment** dropdown.
+- Font, size, colour via the **Type** options pane.
## Right-side Type panel
diff --git a/src/help/vector-tools.md b/src/help/vector-tools.md
index ca0c16f..9eff8f5 100644
--- a/src/help/vector-tools.md
+++ b/src/help/vector-tools.md
@@ -42,10 +42,19 @@ whatever you've selected.
## 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).
+- **Cmd/Ctrl + Y** — redo (alternate).
+- **Cmd/Ctrl + D** — duplicate selected layer.
+- **Cmd/Ctrl + C / X / V** — copy / cut / paste layer(s).
+- **Cmd/Ctrl + G** — group selected layers.
+- **Cmd/Ctrl + ] / [** — bring forward / send backward; add **Shift**
+ for bring-to-front / send-to-back.
+- **Cmd/Ctrl + J** — close path / join two selected endpoints
+ (Pen / Direct Selection edit mode only).
+- **Cmd/Ctrl + Alt + J** — average selected anchors to their centroid
+ (Pen / Direct Selection edit mode only).
+- **Delete / Backspace** — remove selected layer; remove selected
+ anchor in Pen / Direct Selection edit mode.
+- **Shift + click** (or Cmd / Ctrl + click) — additive multi-select.
+- **Shift while drawing with the Pen tool** — constrain the next
+ anchor to a 45° angle from the previous one.