@thehammer/template-verification 0.2.13 → 0.2.15

package/dist/components/VerifiedField.vue.d.ts

@@ -24,46 +24,66 @@ import type { MetaCarrier } from "../types";
  * hover panel, so the same sentence reaches a screen reader and a mouse
  * hovering the glyph, and neither costs a second piece of chrome in the page.
  *
- * ==== NOTHING MOVES, AND NOTHING IS COVERED ====
+ * ==== PLACEMENT: MOSTLY OUTSIDE THE VALUE, NEVER IN ITS OWN RESERVED SPACE ====
  *
- * Two requirements, and the shape below is the one that satisfies BOTH.
+ * Operator decision (SG-432 comment #4534/#4536, SG-638), verbatim: "Absolute
+ * positioned OUTSIDE of the data point, should overlay partially like 50%
+ * outside and 50% above so it covers a very small portion of the text. Hover
+ * over the text should fade to 30% the overlay checkmark, but still clickable
+ * for the action."
  *
- * 1. NO REFLOW. Turning the overlay on or off, or a field going from
- *    "unverified" to "verified", must not move a single character of the
- *    letter. The document is the deliverable, and a reviewer toggling the
- *    overlay must be looking at the same pagination they will print.
- * 2. NO OCCLUSION. The value must stay fully readable. A mark that hides the
- *    claimant's surname or the year of the accident makes the letter unusable,
- *    which is worse than any layout wobble.
+ * That is exactly what renders below, and nothing reserves space for it:
  *
- * The mark therefore lives in a PERMANENTLY RESERVED SLOT: `.tv-mark-slot` is
- * an empty fixed-width inline-block rendered beside every value ALWAYS —
- * overlay on, overlay off, tracked or untracked, on screen and on paper. It is
- * the slot, not the mark, that occupies the inline space, so the space never
- * appears or disappears and nothing ever reflows. The mark is absolutely
- * positioned INSIDE that slot, so its own width — a bare confidence dot, a
- * verified chip, either of them wearing a discrepancy flag — can never push a
- * character either.
+ * 1. NO REFLOW. The mark is always `position: absolute`, taken out of normal
+ *    flow. Turning the overlay on or off, or a field going from "unverified"
+ *    to "verified", moves no character — there is no slot to appear, grow, or
+ *    disappear, on screen or in print.
+ * 2. MOSTLY OUTSIDE THE VALUE. The mark is centred on a point at the TOP-RIGHT
+ *    corner of the value's own trailing edge — half its width sits to the
+ *    right of that corner (outside the text entirely) and half sits to the
+ *    left (over the last character); half its height sits above that corner
+ *    (outside, above the line) and half sits below (over the top of the last
+ *    character). Only that one small corner is ever covered, never the whole
+ *    glyph the old zero-space `right: 0` shape used to hide (`Abdinasir Abdi`
+ *    rendering as `Abdinasir ✔`).
  *
- * Two earlier shapes, and why each one loses:
+ * ==== ANCHORING TO THE TRAILING EDGE OF WRAPPED TEXT ====
  *
- * - `inline-flex` row with a gap (the original): every mark pushed the rest of
- *   its line along, so the whole letter reflowed the moment the overlay was
- *   switched on. Fails (1).
- * - Absolute at `right: 0` against the wrapper, occupying zero inline space
- *   (the shape this replaces): it bought (1) by overlaying the last characters
- *   of the value — `Abdinasir Abdi` rendered as `Abdinasir ✔`, `October 23,
- *   2024` as `October 23, 2 ✔`. Fails (2), and fails it on exactly the two
- *   fields a reader most needs. `left: 100%` is the same trade with the damage
- *   moved onto whatever the template wrote next, which is no better.
+ * A value can wrap across lines, and the mark has to track wherever the LAST
+ * line ends — not the value's own bounding box, which spans every line. The
+ * fix is a trailing, zero-size `<span class="tv-mark-anchor">`, written as the
+ * next inline SIBLING immediately after `.tv-field-value` (both children of
+ * `.tv-field`) — not nested inside the value, so the mark's own glyph is never
+ * part of the value's own text/accessible content (copy/paste and
+ * `.textContent` on the value read exactly the value, nothing appended). As
+ * an ordinary inline box with zero width and zero height, the anchor takes up
+ * no visual space and is laid out by the browser exactly where an extra
+ * character would have gone — because inline layout is one continuous
+ * formatting context across element boundaries, a `<span>` boundary does not
+ * start a new line, so the anchor lands on whatever line the value's own text
+ * wrapped to, exactly as if it were one more character of that text. It is
+ * `position: relative`, so it is the positioning containing block for the
+ * mark, which is `position: absolute; left: 0; top: 0; transform:
+ * translate(-50%, -50%)` inside it — centring the mark's box exactly on the
+ * anchor's own (0, 0) point, which is what produces the 50%-outside / 50%-
+ * above split described above. This is the correct technique for inline text
+ * specifically because an inline box's position is resolved by the same
+ * line-breaking algorithm that wraps the text itself; a box anchored to
+ * `.tv-field-value`'s own (single) bounding rect cannot express "the end of
+ * whichever line is last."
  *
- * What the reserved slot costs, stated plainly: about one-and-a-bit character
- * widths of permanent space after every data point, present even in print. That
- * is the price of never covering a value, and it is deliberately paid in the
- * one place a document can absorb it — inter-word space — rather than on top of
- * the words themselves. It is NOT hidden by the `@media print` chrome rule: the
- * slot is not chrome, so the printed page is laid out identically to the screen
- * and only the glyph goes away.
+ * ==== HOVER FADE, STILL CLICKABLE, FULL OPACITY ON FOCUS ====
+ *
+ * `.tv-field-value:hover ~ .tv-mark-anchor .tv-overlay` fades the mark to 30%
+ * opacity while the VALUE is hovered (the general-sibling combinator reaches
+ * the anchor from its preceding sibling). `.tv-overlay:hover` covers hovering
+ * the MARK directly — together the two satisfy the operator's decision
+ * ("hover over the text... the overlay checkmark") without nesting the mark
+ * inside the value's own text. Opacity never disables pointer events, so the
+ * mark stays a real, clickable `<button>` at 30%. `:focus-visible` raises it
+ * back to full opacity with higher selector specificity than either hover
+ * rule, so a keyboard user tabbing to the mark while the pointer happens to
+ * be resting on the value still sees it clearly.
  */
 type __VLS_Props = {
     source?: MetaCarrier;

package/dist/index.d.ts

@@ -41,4 +41,4 @@ export type { WalkedDataPoint } from "./lib/walk";
 export { computeProgress } from "./lib/progress";
 export type { VerificationProgress } from "./lib/progress";
 export { CHROME_CLASS, ENABLED_STORAGE_KEY } from "./constants";
-export type { VerificationStatus, ResolvedSource, SourceChoice, VerificationSource, ExtractedCandidate, OverrideCandidate, ClaimCandidate, CandidateSet, DataPointAnchor, ResolvedValue, DataPointMeta, MetaCarrier, SaveOverrideArgs, SaveOverrideFn, } from "./types";
+export type { VerificationStatus, ResolvedSource, SourceChoice, VerificationSource, ExtractedCandidate, HumanCitation, OverrideCandidate, ClaimCandidate, CandidateSet, DataPointAnchor, ResolvedValue, DataPointMeta, MetaCarrier, SaveOverrideArgs, SaveOverrideFn, } from "./types";