open/ktg-plugin-marketplace
1
0
Fork 0
Code Issues Pull requests Releases Wiki Activity Actions

feat(voyage): add three annotation creation gestures + form modal — v4.2 Step 9 [skip-docs]

Browse source 
Three creation gestures + shared form modal for the v4.2 annotation
playground (per critical decisions #2-#4 + research-06):

Gesture 1 — text-anchored adder-popup:
  - mouseup-debounce 200ms (settles selection)
  - 300ms grace before hide (Hypothes.is friction-mitigation)
  - floating .voyage-adder-popup positioned at selection-bound corner
  - click -> opens form modal with derived heading-path + line + snippet

Gesture 2 — paragraph-anchored hover-icon:
  - 24px pencil SVG injected per <p>/<li> after each render
  - opacity 0 default, opacity 1 on hover/focus-visible
  - click -> opens form modal with no snippet

Gesture 3 — page-level note:
  - .voyage-page-note-btn injected in viewport
  - click -> opens form modal with target=page

Form modal (shared):
  - role="dialog" aria-modal="true" + aria-labelledby
  - 400px right-anchored on backdrop (per critical decision #3)
  - 4 intent buttons (Fiks / Endre / Spørsmål / Block) as aria-pressed group
  - <textarea> required for comment
  - ESC + backdrop-click + Avbryt close
  - Lagre persists via saveModalAsAnnotation

Anchor-ID generation (per critical decision #2 + risk-assessor H7):
  - sequential ANN-NNNN per project+file scope
  - persisted in localStorage under voyage_ann_<project>__<file>.drafts

Test coverage: tests/playground/voyage-playground.test.mjs +3 cases —
aria-modal, ANN-, 300ms grace.

Verify: node --test tests/playground/voyage-playground.test.mjs ->
16 pass / 0 fail.
Full npm test: 590 pass / 0 fail / 2 skipped (Docker).

Refs plan.md Step 9 + critical decisions #2/#3/#4 + research-06.
This commit is contained in:
Kjell Tore Guttormsen 2026-05-09 15:22:52 +02:00
commit a7a6a53686
2 changed files with 512 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

17
plugins/voyage/tests/playground/voyage-playground.test.mjs
View file

@ -95,3 +95,20 @@ test('playground/lib/ contains vendored markdown-it + front-matter + highlight b
assert.ok(existsSync(join(PLAYGROUND_LIB, f)), `playground/lib/${f} expected from vendor-playground-libs.mjs`);
}
});
// --- Step 9 — annotation creation gestures + form modal ---------------
test('voyage-playground.html declares aria-modal="true" (Step 9 form modal A11Y)', () => {
const text = readFileSync(HTML, 'utf-8');
assert.match(text, /aria-modal="true"/, 'form modal must carry aria-modal="true"');
});
test('voyage-playground.html declares ANN- anchor-ID prefix (Step 9 ID generation)', () => {
const text = readFileSync(HTML, 'utf-8');
assert.match(text, /ANN-/, 'sequential ANN-NNNN ID generation must appear in playground JS');
});
test('voyage-playground.html declares 300ms grace constant (Step 9 adder-popup grace)', () => {
const text = readFileSync(HTML, 'utf-8');
assert.match(text, /300\s*ms|GRACE_MS\s*=\s*300|ADDER_GRACE_MS/i, '300ms grace period for adder-popup must be present');
});