fix(invoices): invoice PDF draft stamp, page breaks, wrapping, units, multi-line descriptions (#2369)

* fix(invoices): draft stamp out of flow, page-break control, whole-word wrapping, English units, multi-line descriptions

A user reported five things about the invoice PDF after the English
translation shipped:

- The yellow draft banner pushed the whole document down, so a draft
  previewed differently from the final invoice. It is now a small stamp in
  the page's top margin (absolute, fixed), repeated on every page, out of
  the flow.
- Table rows, totals, the payment box and the notice boxes could split
  across a page break, and a section heading could be left alone at the
  bottom of a page. Those blocks now carry wrap={false}; headings and the
  table header carry minPresenceAhead.
- react-pdf hyphenated Swedish words with English patterns ("Septem-ber").
  Descriptions, notes, notices and the footer now wrap whole words.
- "st" printed verbatim on an English invoice. The editor's known units map
  to English labels at render time; user-typed units print as stored.
- Descriptions were single-line inputs, so a user could never choose where
  a line breaks. The editor field is now an auto-growing textarea; the PDF
  and the on-screen views keep the line breaks; the Peppol item name
  collapses them (single-line field).

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01BuYbae3WWwYzBucTUVayoW

* fix(invoices): keep long tokens printable and oversize text splittable in the invoice PDF

Skeptic findings on the first commit:

- A word wider than its column was dropped from the page or overprinted the
  quantity column, because the no-hyphenation callback gave react-pdf no
  break point inside it. Words up to 16 characters still wrap whole; longer
  tokens (URLs, e-mail addresses, references) break after separators and
  every 16 characters.
- wrap={false} on a text row or notes taller than a page clipped everything
  past the page edge. Line descriptions and notes are now kept together only
  while a line estimate says they fit; past that they split.
- A multi-line description reached the periodisering voucher text and broke
  the SIE export (one record per line). The accrual builder and the Peppol
  item name share toSingleLine(); the SIE writer collapses line breaks in
  quoted text as a format guard.
- The English no-number draft stamp ended 1.3pt below the top margin.

Tests lay the document out with @react-pdf/layout and assert that no text
node ends past the page edge and that every line's ink stays inside its
column, for 80-line descriptions and notes, a 3000-character description,
and four long tokens.

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01BuYbae3WWwYzBucTUVayoW

* fix(invoices): count rendered lines and cap the kept-together budget so no font can clip a row

Skeptic cycle 2: with the bundled Source Serif 4 font (13.7pt per line)
and a description of 20 source lines of wide glyphs, the estimate said
"fits" while the chunked token wrapping produced 58 rendered lines; the
non-splittable row then ran off the page. The estimate now counts the
chunks a long token is broken into, and the cap is 12 lines: at 20pt per
line that is under a third of the page for any font a company can pick.

The page-edge test now measures absolute positions (box.top is
parent-relative) and covers the bundled serif case through
prepareInvoiceFont().

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01BuYbae3WWwYzBucTUVayoW

* fix(invoices): keep words whole by estimated ink width, not a character cap

Skeptic cycle 2 (regression): the flat 16-character cap gave react-pdf a
break point inside ordinary Swedish compounds (Fastighetsskötse-l,
Företagsförsäkri-ng), which the breaker used whenever it filled the line
better. Words are now kept whole whenever a rough per-glyph width estimate
says they fit the column; only a token wider than the column gets parts,
after separators and where the column is full. The page-fit estimate uses
the same widths.

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01BuYbae3WWwYzBucTUVayoW

* fix(invoices): estimate word width from real Helvetica metrics

Skeptic cycle 3: the hand-rolled per-glyph estimate over-counted ordinary
lowercase (6.5pt for a 5.56pt glyph), so 24 to 28 character compounds
(Momskompensationsansökan, Mervärdesskattedeklarationen) were still handed
a break point while they fit the column, and under-counted rare glyphs
(æ, œ, Cyrillic) so a token of those could overflow. The estimate now uses
Helvetica advances measured through react-pdf's own metrics
(lib/invoices/pdf-glyph-widths.ts) with a 10% margin for the bundled
fonts, and counts any glyph outside Helvetica at the widest Latin advance.

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01BuYbae3WWwYzBucTUVayoW

* docs(invoices): state the bundled-font width margin accurately

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01BuYbae3WWwYzBucTUVayoW

* fix(invoices): review round: SIE backslash escaping, text-row budget, ROT/RUT box keep-together

- CodeQL: the SIE quoted-text escaper left backslashes alone while backslash
  is the escape character. It now writes a literal backslash as two, and the
  parser unescapes both that and the escaped quote, so text round-trips.
- CodeRabbit: a free-text row renders at full table width but was budgeted
  at the description column, so it could split unnecessarily. It uses the
  full-width budget now.
- CodeRabbit: the ROT/RUT box was unconditionally kept on one page although
  its per-line breakdown carries the (possibly multi-line) descriptions. It
  uses the same keep-together estimate as rows and notes, and its line texts
  wrap whole words.

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01BuYbae3WWwYzBucTUVayoW

---------

Co-authored-by: Claude Fable 5.1 <noreply@anthropic.com>

components/invoices/AutoGrowTextarea.tsx

@@ -0,0 +1,51 @@
+'use client'
+
+import { forwardRef, useCallback, useLayoutEffect, useRef, type TextareaHTMLAttributes } from 'react'
+import { cn } from '@/lib/utils'
+
+/**
+ * A single-line-looking textarea that grows with its content.
+ *
+ * Invoice line descriptions used to be `<input>`s, so a user could never put
+ * a line break where they wanted one; the PDF then wrapped wherever the
+ * column ran out. This keeps the dense one-row look of the editor grid while
+ * letting Enter insert a newline, and re-measures on every render so a
+ * prefilled multi-line description (edit flow) opens at the right height.
+ */
+export const AutoGrowTextarea = forwardRef<HTMLTextAreaElement, TextareaHTMLAttributes<HTMLTextAreaElement>>(
+  function AutoGrowTextarea({ className, onInput, ...props }, ref) {
+    const inner = useRef<HTMLTextAreaElement | null>(null)
+
+    const setRef = useCallback(
+      (el: HTMLTextAreaElement | null) => {
+        inner.current = el
+        if (typeof ref === 'function') ref(el)
+        else if (ref) ref.current = el
+      },
+      [ref],
+    )
+
+    useLayoutEffect(() => {
+      resize(inner.current)
+    })
+
+    return (
+      <textarea
+        {...props}
+        ref={setRef}
+        rows={1}
+        onInput={(e) => {
+          resize(e.currentTarget)
+          onInput?.(e)
+        }}
+        className={cn('block resize-none overflow-hidden leading-5', className)}
+      />
+    )
+  },
+)
+
+function resize(el: HTMLTextAreaElement | null) {
+  if (!el) return
+  el.style.height = 'auto'
+  el.style.height = `${el.scrollHeight}px`
+}

components/invoices/InvoiceEditor.tsx

@@ -7,6 +7,7 @@ import { createClient } from '@/lib/supabase/client'
 import { useForm, useFieldArray, Controller, type FieldErrors } from 'react-hook-form'
 import { Reorder } from 'framer-motion'
 import { SortableRow } from '@/components/ui/sortable-row'
+import { AutoGrowTextarea } from '@/components/invoices/AutoGrowTextarea'
 import { zodResolver } from '@hookform/resolvers/zod'
 import { z } from 'zod'
 import { addDays, format } from 'date-fns'
@@ -2295,7 +2296,7 @@ export default function InvoiceEditor(props: InvoiceEditorProps = { mode: 'creat
                               className={cn('group border-b border-border', settleIndex === index && 'row-settle')}
                             >
                               <div className="flex items-center gap-1 py-1">
-                                <input
+                                <AutoGrowTextarea
                                   {...register(`items.${index}.description`)}
                                   placeholder={t('text_row_placeholder')}
                                   aria-label={t('text_row_label')}
@@ -2356,7 +2357,7 @@ export default function InvoiceEditor(props: InvoiceEditorProps = { mode: 'creat
                             className={cn('group border-b border-border', settleIndex === index && 'row-settle')}
                           >
                             <div className={cn(rowGridClass, 'py-1')}>
-                              <input
+                              <AutoGrowTextarea
                                 {...register(`items.${index}.description`)}
                                 placeholder={t('description_placeholder')}
                                 aria-label={t('description_label')}

components/invoices/InvoiceReviewContent.tsx

@@ -168,13 +168,13 @@ export function InvoiceReviewContent({
             {items.map((item, index) =>
               isTextLikeLine(item) ? (
                 <tr key={index} className="border-b last:border-0">
-                  <td className="py-2 text-muted-foreground" colSpan={showVatColumn ? 6 : 5}>
+                  <td className="whitespace-pre-line py-2 text-muted-foreground" colSpan={showVatColumn ? 6 : 5}>
                     {item.description || ' '}
                   </td>
                 </tr>
               ) : (
                 <tr key={index} className="border-b last:border-0">
-                  <td className="py-2">
+                  <td className="whitespace-pre-line py-2">
                     {item.description}
                     {itemHasAccrual(item) && (
                       <p className="mt-1 flex items-center gap-1 text-xs text-muted-foreground">
@@ -213,10 +213,10 @@ export function InvoiceReviewContent({
       <div className="sm:hidden space-y-2">
         {items.map((item, index) =>
           isTextLikeLine(item) ? (
-            <p key={index} className="text-sm text-muted-foreground px-1">{item.description || ' '}</p>
+            <p key={index} className="whitespace-pre-line text-sm text-muted-foreground px-1">{item.description || ' '}</p>
           ) : (
             <div key={index} className="border rounded-lg p-3 text-sm space-y-1.5">
-              <p className="font-medium">{item.description}</p>
+              <p className="whitespace-pre-line font-medium">{item.description}</p>
               {itemHasAccrual(item) && (
                 <p className="flex items-center gap-1 text-xs text-muted-foreground">
                   <CalendarClock className="h-3 w-3 shrink-0" />