fix(kbd): glyph instead of word for enter/backspace on non-Mac

docs/design/design-system/11-mockup-view.html

@@ -494,7 +494,7 @@ <h1 class="h1">A morning that tastes like <em>somewhere</em>.</h1>
           <div class="foot-area">
             <button class="add" title="New annotation">
               <span class="add-icon"><svg viewBox="0 0 16 16" fill="currentColor"><path d="M14 7v1H8v6H7V8H1V7h6V1h1v6h6z"/></svg></span>
-              <span class="add-label"><span>New annotation</span><span class="shortcut">⌘⇧N</span></span>
+              <span class="add-label"><span>New annotation</span><span class="shortcut">N</span></span>
             </button>
           </div>
         </aside>
@@ -622,7 +622,7 @@ <h1 class="h1">A morning that tastes like <em>somewhere</em>.</h1>
             <div class="foot-area">
               <button class="add">
                 <span class="add-icon"><svg viewBox="0 0 16 16" fill="currentColor"><path d="M14 7v1H8v6H7V8H1V7h6V1h1v6h6z"/></svg></span>
-                <span class="add-label"><span>New annotation</span><span class="shortcut">⌘⇧N</span></span>
+                <span class="add-label"><span>New annotation</span><span class="shortcut">N</span></span>
               </button>
             </div>
           </div>
@@ -944,7 +944,7 @@ <h1 class="h1">A morning that tastes like <em>somewhere</em>.</h1>
     <ul style="color:var(--text-dim);font-size:12.5px;line-height:1.7;list-style:disc;padding-left:20px;max-width:700px">
       <li><strong>Same-origin iframe.</strong> Mockups serve from <code>/m/[mockupId]/[...path]/route.ts</code> on the same origin so the parent can reach into the iframe document for click capture and pin coordinate resolution. Cross-origin would break the anchoring runtime; the route handler is the gatekeeper.</li>
       <li><strong>Pin anchoring.</strong> Pins are stored as DOM-relative <code>Anchor</code> records (CSS selector + offset) — see <code>src/lib/anchoring</code> and the strategy doc <code>docs/superpowers/specs/2026-05-18-pin-anchoring-strategy.md</code>. On iframe load <code>useViewerCanvas</code> attaches the canvas root + resolves all anchors to absolute coords for PinLayer to render.</li>
-      <li><strong>Marking mode lifecycle.</strong> Enter: composer opens or user hits ⌘⇧N. Canvas cursor → crosshair; <code>MarkingBar</code> mounts; in-iframe click handler armed. Click in iframe → drop pending pin with next color from palette. Done → POST annotation with pin anchors + body; pending pins promoted to real pins on success. Cancel → drop all pending pins, close composer, exit marking.</li>
+      <li><strong>Annotation flow lifecycle.</strong> The inline <a href="./32-draft-card.html"><code>DraftCard</code></a> mounts at the top of the rail when the user clicks <strong>+ New annotation</strong> or presses <kbd class="kbd-key">N</kbd>. Any subsequent click inside the iframe drops a draft pin (next color from palette); clicking a draft pin removes it. <strong>Send</strong> POSTs the annotation with pin anchors + body — draft pins are promoted to real pins on success and the DraftCard unmounts. <strong>Cancel</strong> discards (with <code>AlertDialog</code> confirm if body or pins are non-empty). There is no separate "marking mode" toggle.</li>
       <li><strong>Active annotation.</strong> Clicking a canvas pin OR a rail card sets <code>activeId</code> — both render the matching pin glowing + the matching card with its <code>.active</code> treatment + (if rail was collapsed) the rail expands and stays pinned. Esc clears <code>activeId</code>.</li>
       <li><strong>Rail collapse / expand / pin.</strong> Hover → expand (300 px, motion-base spring). Pointer leave → collapse, UNLESS pinned. The lock pill toggles a persisted preference (per-user); pinned state survives mockup switches.</li>
       <li><strong>Replies / edit / delete.</strong> Each card's kebab opens an action menu. Delete goes through <code>useConfirm</code> (Radix AlertDialog) — destructive confirmation is non-skippable per <a href="./14-dialog.html" style="color:var(--accent)"><code>14-dialog</code></a>. Reply opens an inline composer; Edit replaces the card body with a textarea.</li>

docs/design/design-system/18-annotations-rail.html

@@ -229,7 +229,7 @@ <h1 class="h1">18 — Annotations Rail</h1>
             <div class="badge" data-color="5">6</div>
           </div>
           <div class="foot-area">
-            <button class="add"><span class="add-icon"><svg width="14" height="14" viewBox="0 0 16 16" fill="currentColor"><path d="M14 7v1H8v6H7V8H1V7h6V1h1v6h6z"/></svg></span><span class="add-label">New<span class="kbd-group"><kbd class="kbd-key">Ctrl</kbd><span class="kbd-plus">+</span><kbd class="kbd-key">⇧</kbd><span class="kbd-plus">+</span><kbd class="kbd-key">N</kbd></span></span></button>
+            <button class="add"><span class="add-icon"><svg width="14" height="14" viewBox="0 0 16 16" fill="currentColor"><path d="M14 7v1H8v6H7V8H1V7h6V1h1v6h6z"/></svg></span><span class="add-label">New<span class="kbd-group"><kbd class="kbd-key">N</kbd></span></span></button>
           </div>
         </div>
       </div>
@@ -272,7 +272,7 @@ <h1 class="h1">18 — Annotations Rail</h1>
               </li>
             </ul>
             <div class="foot-area">
-              <button class="add"><span class="add-icon"><svg width="14" height="14" viewBox="0 0 16 16" fill="currentColor"><path d="M14 7v1H8v6H7V8H1V7h6V1h1v6h6z"/></svg></span><span class="add-label">New annotation<span class="kbd-group"><kbd class="kbd-key">Ctrl</kbd><span class="kbd-plus">+</span><kbd class="kbd-key">⇧</kbd><span class="kbd-plus">+</span><kbd class="kbd-key">N</kbd></span></span></button>
+              <button class="add"><span class="add-icon"><svg width="14" height="14" viewBox="0 0 16 16" fill="currentColor"><path d="M14 7v1H8v6H7V8H1V7h6V1h1v6h6z"/></svg></span><span class="add-label">New annotation<span class="kbd-group"><kbd class="kbd-key">N</kbd></span></span></button>
             </div>
           </div>
         </div>
@@ -313,7 +313,7 @@ <h1 class="h1">18 — Annotations Rail</h1>
             </li>
           </ul>
           <div class="foot-area">
-            <button class="add"><span class="add-icon"><svg width="14" height="14" viewBox="0 0 16 16" fill="currentColor"><path d="M14 7v1H8v6H7V8H1V7h6V1h1v6h6z"/></svg></span><span class="add-label">New annotation<span class="kbd-group"><kbd class="kbd-key">Ctrl</kbd><span class="kbd-plus">+</span><kbd class="kbd-key">⇧</kbd><span class="kbd-plus">+</span><kbd class="kbd-key">N</kbd></span></span></button>
+            <button class="add"><span class="add-icon"><svg width="14" height="14" viewBox="0 0 16 16" fill="currentColor"><path d="M14 7v1H8v6H7V8H1V7h6V1h1v6h6z"/></svg></span><span class="add-label">New annotation<span class="kbd-group"><kbd class="kbd-key">N</kbd></span></span></button>
           </div>
         </div>
       </div>
@@ -332,10 +332,10 @@ <h1 class="h1">18 — Annotations Rail</h1>
             <button class="lock">📌</button>
           </div>
           <div style="flex:1;display:flex;align-items:center;justify-content:center;padding:24px 16px;text-align:center;color:var(--text-muted);font-size:11px">
-            No annotations yet. Use <strong style="color:var(--text-dim)">Ctrl+⇧+N</strong> or the button below to add the first.
+            No annotations yet. Press <strong style="color:var(--text-dim)">N</strong> or the button below to add the first.
           </div>
           <div class="foot-area">
-            <button class="add"><span class="add-icon"><svg width="14" height="14" viewBox="0 0 16 16" fill="currentColor"><path d="M14 7v1H8v6H7V8H1V7h6V1h1v6h6z"/></svg></span><span class="add-label">New annotation<span class="kbd-group"><kbd class="kbd-key">Ctrl</kbd><span class="kbd-plus">+</span><kbd class="kbd-key">⇧</kbd><span class="kbd-plus">+</span><kbd class="kbd-key">N</kbd></span></span></button>
+            <button class="add"><span class="add-icon"><svg width="14" height="14" viewBox="0 0 16 16" fill="currentColor"><path d="M14 7v1H8v6H7V8H1V7h6V1h1v6h6z"/></svg></span><span class="add-label">New annotation<span class="kbd-group"><kbd class="kbd-key">N</kbd></span></span></button>
           </div>
         </div>
       </div>
@@ -549,7 +549,7 @@ <h1 class="h1">18 — Annotations Rail</h1>
       <li><strong>Programmatic pin.</strong> <code>expandSignal</code> bumps from parent pin the rail open (used after creating a new annotation so the user sees it land in the list).</li>
       <li><strong>Badge-card sync.</strong> Setting <code>activeAnnotationId</code> highlights both the badge (in the collapsed column) and the card (in the expanded list).</li>
       <li><strong>Add button.</strong> Native <code>&lt;button&gt;</code>. Morphs from 32 px circle (collapsed) to full-width pill (expanded) — same transition tokens as the rail width.</li>
-      <li><strong>Keyboard.</strong> The Ctrl+⇧+N shortcut (rendered on the add button) fires <code>onCreate</code> from anywhere in the canvas — registered globally by the parent.</li>
+      <li><strong>Keyboard.</strong> Single-key <kbd class="kbd-key">N</kbd> (rendered on the add button) fires <code>onCreate</code> from anywhere in the canvas — registered globally by the parent and suppressed while any input/textarea/contenteditable is focused so the letter still types normally.</li>
       <li><strong>DraftCard slot.</strong> When the parent passes a <code>draft</code> prop, the rail mounts a <a href="./32-draft-card.html" style="color:var(--accent)"><code>DraftCard</code></a> in a sticky <code>.draft-slot</code> at the top of the expanded body. While the slot is filled, the rail force-expands (no accent ring) and the footer add-button hides — the DraftCard is the entry. On send/discard, the rail returns to the user's prior pinned/unpinned preference.</li>
       <li><strong>Reduced motion.</strong> Under <code>prefers-reduced-motion: reduce</code>, both the width transition and the add-button morph collapse to a 0 ms snap via the token override at the top of the file.</li>
     </ul>

docs/design/design-system/29-kbd.html

@@ -338,7 +338,7 @@ <h1 class="h1">Kbd</h1>
           <td>Shortcut appears in an <code>aria-label</code>, <code>data-tooltip</code>, or any invisible/assistive context</td>
         </tr>
         <tr>
-          <td>Chip design is part of the surface's visual hierarchy (e.g. "New annotation ⌘⇧N" pill in the rail)</td>
+          <td>Chip design is part of the surface's visual hierarchy (e.g. "Toggle theme ⌘K" command-palette row)</td>
           <td>The string is dynamically constructed for spoken SR output</td>
         </tr>
       </tbody>