From 1aa74c0a9fb891bd60457e0ebcd314c0dae916af Mon Sep 17 00:00:00 2001
From: Steffen Becker <stffn.becker@gmail.com>
Date: Thu, 13 Aug 2026 11:50:53 +0000
Subject: [PATCH] feat: a footnotes and endnotes options dialog
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Numbering format, start value, restart, position, prefix/suffix and the two
styles per class, plus the separator's length, thickness, spacing, alignment
and colour. The separator rides :root custom properties, so editor.css draws
the line and pageBreaks.ts reserves its band from the same values. A settings
change is no document change, so it carries a resync meta — without it the
numbering kept the format it was typed under.
---
 src/App.svelte                                |   6 +
 src/lib/components/Editor.svelte              |  22 ++
 src/lib/components/NoteOptionsDialog.svelte   | 246 ++++++++++++++++++
 src/lib/components/ToolbarExpanded.svelte     |  16 +-
 src/lib/components/ribbon/Ribbon.svelte       |   4 +-
 .../ribbon/tabs/ReferencesTab.svelte          |  10 +-
 src/lib/editor/extensions/notes.ts            |   6 +-
 src/lib/i18n/locales/de.ts                    |  29 +++
 src/lib/i18n/locales/en.ts                    |  29 +++
 src/lib/storage/noteSettings.ts               |  13 +
 src/styles/editor.css                         |  13 +-
 11 files changed, 381 insertions(+), 13 deletions(-)
 create mode 100644 src/lib/components/NoteOptionsDialog.svelte

diff --git a/src/App.svelte b/src/App.svelte
index ba6d7db..477f991 100644
--- a/src/App.svelte
+++ b/src/App.svelte
@@ -40,6 +40,7 @@
   import UiLanguagePicker from './lib/components/UiLanguagePicker.svelte';
   import AboutDialog from './lib/components/AboutDialog.svelte';
   import StyleManagerDialog from './lib/components/StyleManagerDialog.svelte';
+  import NoteOptionsDialog from './lib/components/NoteOptionsDialog.svelte';
   import { t } from './lib/i18n/i18n.svelte';
   import { withShortcut } from './lib/i18n/shortcut';
   import { DEFAULT_SHORTCUTS, matchesEvent, shortcutHint } from './lib/editor/shortcuts';
@@ -56,6 +57,7 @@
   let aboutOpen = $state(false);
   let styleManagerOpen = $state(false);
   let styleManagerFamily = $state<StyleFamily>('paragraph');
+  let noteOptionsOpen = $state(false);
 
   function openStyleManager(family: StyleFamily) {
     styleManagerFamily = family;
@@ -201,6 +203,7 @@
     saveSpacingModel(spacingModel);
   });
 
+
   $effect(() => {
     savePageRtl(pageRtl);
   });
@@ -862,6 +865,7 @@
       {hfActive}
       onManageStyles={openStyleManager}
       onManageTableStyles={() => openStyleManager('table')}
+      onNoteOptions={() => (noteOptionsOpen = true)}
       onEditZone={(zone) => (hfActive = zone)}
       onFind={openFind}
       {namePlaceholder}
@@ -1096,6 +1100,7 @@
           onEditZone={(zone) => (hfActive = zone)}
           onDebugDump={handleDebugDump}
           onManageTableStyles={() => openStyleManager('table')}
+          onNoteOptions={() => (noteOptionsOpen = true)}
         />
       </div>
       {@render toolbarScrollbar()}
@@ -1212,6 +1217,7 @@
   <!-- One instance for every entry point (styles gallery, insert-table menu): the
        callers only say which family to land on. -->
   <StyleManagerDialog bind:open={styleManagerOpen} family={styleManagerFamily} editor={activeEditor} />
+  <NoteOptionsDialog bind:open={noteOptionsOpen} />
 </main>
 
 <style>
diff --git a/src/lib/components/Editor.svelte b/src/lib/components/Editor.svelte
index b059fa4..bde2f43 100644
--- a/src/lib/components/Editor.svelte
+++ b/src/lib/components/Editor.svelte
@@ -22,6 +22,9 @@
   import { DEFAULT_TAB_INTERVAL_CM } from '../storage/tabInterval';
   import { type Orientation } from '../storage/pageOrientation';
   import { type SpacingModel } from '../storage/spacingModel';
+  import { applyNoteVars } from '../storage/noteSettings';
+  import { noteSettings } from '../storage/notes.svelte';
+  import { RESYNC_NOTES } from '../editor/extensions/notes';
   import { applyPageSizeVars, type PageFormat } from '../storage/pageFormat';
   import { DEFAULT_HF_DISTANCES, hfIsEmpty, hfUsesChapterField, type HfDoc, type HfZone, type HfDistances, type HfSet } from '../storage/headerFooter';
   import { FORCE_PAGE_RECALC, pageOfElement, readVerticalMargins, type TableBreakBand } from '../editor/extensions/pageBreaks';
@@ -261,6 +264,25 @@
     });
   });
 
+  // The separator's own band is part of the space pagination reserves for a page's
+  // notes, so a change to it has to re-measure — and the line is drawn from the same
+  // custom properties.
+  $effect(() => {
+    applyNoteVars(noteSettings());
+    const ed = editor;
+    if (!ed) return;
+    requestAnimationFrame(() => {
+      if (ed.view.dom.isConnected) {
+        // The numbering follows the settings too, and nothing about them is a
+        // document change the sync pass would otherwise see.
+        ed.view.dispatch(ed.state.tr
+          .setMeta('addToHistory', false)
+          .setMeta(RESYNC_NOTES, true)
+          .setMeta(FORCE_PAGE_RECALC, true));
+      }
+    });
+  });
+
   // Bundled fonts (Liberation Serif, Carlito, …) load with font-display:swap, so text
   // can reflow after pagination first runs (e.g. imported content in a not-yet-loaded
   // font). Re-paginate when fonts finish so page positions and the HF band settle.
diff --git a/src/lib/components/NoteOptionsDialog.svelte b/src/lib/components/NoteOptionsDialog.svelte
new file mode 100644
index 0000000..39e73ad
--- /dev/null
+++ b/src/lib/components/NoteOptionsDialog.svelte
@@ -0,0 +1,246 @@
+<script lang="ts">
+  import {
+    DEFAULT_NOTE_SETTINGS, type NoteKind, type NoteNumFormat, type NoteRestart, type NoteSettings,
+  } from '../storage/noteSettings';
+  import { noteSettings, setNoteSettings } from '../storage/notes.svelte';
+  import { styleSheet } from '../styles/sheet.svelte';
+  import { formatOrdinal } from '../utils/orderedListTypes';
+  import { t } from '../i18n/i18n.svelte';
+
+  // LibreOffice's Tools ▸ Footnotes and Endnotes. Everything here round-trips to ODF's
+  // text:notes-configuration + style:footnote-sep and to Word's w:footnotePr.
+  let { open = $bindable(false) }: { open?: boolean } = $props();
+
+  let dialogEl = $state<HTMLDialogElement | null>(null);
+  let kind = $state<NoteKind>('footnote');
+
+  $effect(() => {
+    const el = dialogEl;
+    if (!el) return;
+    if (open && !el.open) el.showModal();
+    else if (!open && el.open) el.close();
+  });
+
+  const FORMATS: NoteNumFormat[] = ['1', 'i', 'I', 'a', 'A'];
+  const RESTARTS: NoteRestart[] = ['document', 'page', 'chapter'];
+  const ALIGNS = ['left', 'center', 'right'] as const;
+
+  const cls = $derived(noteSettings()[kind]);
+  const sep = $derived(noteSettings().separator);
+  // Three running values, so a format reads as a sequence rather than a letter.
+  const preview = (f: NoteNumFormat) => [0, 1, 2].map((i) => formatOrdinal(i + 1, f)).join(', ');
+
+  function patch(next: Partial<NoteSettings[NoteKind]>) {
+    const s = noteSettings();
+    setNoteSettings({ ...s, [kind]: { ...s[kind], ...next } });
+  }
+
+  function patchSep(next: Partial<NoteSettings['separator']>) {
+    const s = noteSettings();
+    setNoteSettings({ ...s, separator: { ...s.separator, ...next } });
+  }
+
+  const num = (e: Event) => parseFloat((e.currentTarget as HTMLInputElement).value.replace(',', '.'));
+</script>
+
+<dialog
+  bind:this={dialogEl}
+  onclose={() => (open = false)}
+  onclick={(e) => e.target === dialogEl && (open = false)}
+  aria-label={t().notesDialog.title}
+>
+  <div class="body">
+    <h2>{t().notesDialog.title}</h2>
+
+    <div class="tabs" role="tablist">
+      {#each ['footnote', 'endnote'] as const as k}
+        <button
+          role="tab"
+          aria-selected={kind === k}
+          class:selected={kind === k}
+          onclick={() => (kind = k)}
+        >{k === 'footnote' ? t().notesDialog.tabFootnotes : t().notesDialog.tabEndnotes}</button>
+      {/each}
+    </div>
+
+    <fieldset>
+      <legend>{t().notesDialog.numbering}</legend>
+      <label class="row">
+        <span>{t().notesDialog.format}</span>
+        <select value={cls.numFormat} onchange={(e) => patch({ numFormat: e.currentTarget.value as NoteNumFormat })}>
+          {#each FORMATS as f}<option value={f}>{preview(f)}</option>{/each}
+        </select>
+      </label>
+      <label class="row">
+        <span>{t().notesDialog.startAt}</span>
+        <input type="number" min="1" max="9999" value={cls.startAt}
+          onchange={(e) => { const v = num(e); if (v >= 1) patch({ startAt: Math.round(v) }); }} />
+      </label>
+      <label class="row">
+        <span>{t().notesDialog.restart}</span>
+        <select value={cls.restart} onchange={(e) => patch({ restart: e.currentTarget.value as NoteRestart })}>
+          {#each RESTARTS as r}
+            <option value={r}>{r === 'page' ? t().notesDialog.restartPage : r === 'chapter' ? t().notesDialog.restartChapter : t().notesDialog.restartDocument}</option>
+          {/each}
+        </select>
+      </label>
+      {#if kind === 'footnote'}
+        <label class="row">
+          <span>{t().notesDialog.position}</span>
+          <select value={cls.position} onchange={(e) => patch({ position: e.currentTarget.value === 'document' ? 'document' : 'page' })}>
+            <option value="page">{t().notesDialog.positionPage}</option>
+            <option value="document">{t().notesDialog.positionDocument}</option>
+          </select>
+        </label>
+      {/if}
+      <div class="row">
+        <span>{t().notesDialog.affix}</span>
+        <input class="affix" value={cls.prefix} placeholder={t().notesDialog.prefix}
+          onchange={(e) => patch({ prefix: e.currentTarget.value })} />
+        <input class="affix" value={cls.suffix} placeholder={t().notesDialog.suffix}
+          onchange={(e) => patch({ suffix: e.currentTarget.value })} />
+      </div>
+    </fieldset>
+
+    <fieldset>
+      <legend>{t().notesDialog.styles}</legend>
+      <label class="row">
+        <span>{t().notesDialog.bodyStyle}</span>
+        <select value={cls.bodyStyle} onchange={(e) => patch({ bodyStyle: e.currentTarget.value })}>
+          {#each Object.keys(styleSheet().paragraph) as name}<option value={name}>{name}</option>{/each}
+          {#if !styleSheet().paragraph[cls.bodyStyle]}<option value={cls.bodyStyle}>{cls.bodyStyle}</option>{/if}
+        </select>
+      </label>
+      <label class="row">
+        <span>{t().notesDialog.citationStyle}</span>
+        <select value={cls.citationStyle} onchange={(e) => patch({ citationStyle: e.currentTarget.value })}>
+          {#each Object.keys(styleSheet().character) as name}<option value={name}>{name}</option>{/each}
+          {#if !styleSheet().character[cls.citationStyle]}<option value={cls.citationStyle}>{cls.citationStyle}</option>{/if}
+        </select>
+      </label>
+    </fieldset>
+
+    <!-- The separator is a footnote-only thing: the endnote list opens its own page. -->
+    {#if kind === 'footnote'}
+      <fieldset>
+        <legend>{t().notesDialog.separator}</legend>
+        <label class="row">
+          <span>{t().notesDialog.sepWidth}</span>
+          <input type="number" min="0" max="100" step="1" value={sep.relWidthPercent}
+            onchange={(e) => { const v = num(e); if (v >= 0 && v <= 100) patchSep({ relWidthPercent: v }); }} />
+        </label>
+        <label class="row">
+          <span>{t().notesDialog.sepWeight}</span>
+          <input type="number" min="0" max="20" step="0.25" value={sep.weightPt}
+            onchange={(e) => { const v = num(e); if (v >= 0) patchSep({ weightPt: v }); }} />
+        </label>
+        <label class="row">
+          <span>{t().notesDialog.sepAbove}</span>
+          <input type="number" min="0" max="5" step="0.05" value={sep.spaceAboveCm}
+            onchange={(e) => { const v = num(e); if (v >= 0) patchSep({ spaceAboveCm: v }); }} />
+        </label>
+        <label class="row">
+          <span>{t().notesDialog.sepBelow}</span>
+          <input type="number" min="0" max="5" step="0.05" value={sep.spaceBelowCm}
+            onchange={(e) => { const v = num(e); if (v >= 0) patchSep({ spaceBelowCm: v }); }} />
+        </label>
+        <label class="row">
+          <span>{t().notesDialog.sepAlign}</span>
+          <select value={sep.align} onchange={(e) => patchSep({ align: e.currentTarget.value as 'left' })}>
+            {#each ALIGNS as a}<option value={a}>{t().align[a]}</option>{/each}
+          </select>
+        </label>
+        <label class="row">
+          <span>{t().notesDialog.sepColor}</span>
+          <input type="color" value={sep.color} onchange={(e) => patchSep({ color: e.currentTarget.value })} />
+        </label>
+      </fieldset>
+    {/if}
+
+    <div class="actions">
+      <button class="reset" onclick={() => setNoteSettings(DEFAULT_NOTE_SETTINGS)}>{t().notesDialog.reset}</button>
+      <span class="spacer"></span>
+      <button class="primary" onclick={() => (open = false)}>{t().common.close}</button>
+    </div>
+  </div>
+</dialog>
+
+<style>
+  dialog {
+    /* The global reset zeroes every margin, which also takes the auto centring a
+       modal <dialog> gets by default. */
+    margin: auto;
+    border: none;
+    border-radius: 8px;
+    padding: 0;
+    background: var(--color-surface);
+    color: var(--color-text);
+    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
+  }
+
+  dialog::backdrop { background: rgba(0, 0, 0, 0.35); }
+
+  .body {
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+    width: 460px;
+    max-height: 80vh;
+    overflow-y: auto;
+    padding: 18px 20px 16px;
+    font-family: var(--font-sans);
+    font-size: 0.85rem;
+  }
+
+  h2 { font-size: 1rem; }
+
+  .tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--color-border); }
+  .tabs button {
+    border: none;
+    border-bottom: 2px solid transparent;
+    background: none;
+    color: var(--color-text-muted);
+    padding: 6px 12px;
+    font: inherit;
+    cursor: pointer;
+  }
+  .tabs button.selected { border-bottom-color: var(--color-primary); color: var(--color-text); }
+
+  fieldset { border: 1px solid var(--color-border); border-radius: var(--radius); padding: 8px 10px 10px; }
+  legend { color: var(--color-text-muted); padding: 0 4px; }
+
+  .row { display: flex; align-items: center; gap: 8px; padding: 3px 0; }
+  .row > span { flex: 1; color: var(--color-text-muted); }
+
+  input, select {
+    height: 26px;
+    width: 150px;
+    border: 1px solid var(--color-border);
+    border-radius: var(--radius);
+    background: var(--color-surface);
+    color: var(--color-text);
+    padding: 0 6px;
+    font: inherit;
+  }
+  input[type='color'] { width: 44px; padding: 2px; }
+  .affix { width: 68px; }
+
+  .actions { display: flex; align-items: center; gap: 8px; }
+  .spacer { flex: 1; }
+
+  .actions button {
+    border: 1px solid var(--color-primary);
+    border-radius: var(--radius);
+    background: var(--color-primary);
+    color: #fff;
+    padding: 5px 14px;
+    font: inherit;
+    cursor: pointer;
+  }
+  .actions .reset {
+    border-color: var(--color-border);
+    background: var(--color-surface);
+    color: var(--color-text-muted);
+  }
+  .actions .reset:hover { background: var(--color-btn-hover); }
+</style>
diff --git a/src/lib/components/ToolbarExpanded.svelte b/src/lib/components/ToolbarExpanded.svelte
index b67c962..6346a8f 100644
--- a/src/lib/components/ToolbarExpanded.svelte
+++ b/src/lib/components/ToolbarExpanded.svelte
@@ -30,8 +30,8 @@
   import { t } from '../i18n/i18n.svelte';
   import { shortcutHint, type ShortcutId } from '../editor/shortcuts';
 
-  let { editor, tick, showFormattingMarks = $bindable(), showRuler = $bindable(true), pageMargins = $bindable(DEFAULT_MARGINS), pageOrientation = $bindable<Orientation>('portrait'), pageFormat = $bindable<PageFormat>('A4'), hfDistances = $bindable(DEFAULT_HF_DISTANCES), differentFirstPage = $bindable(false), differentOddEven = $bindable(false), hfActive = null, onEditZone, onDebugDump, onManageTableStyles }:
-    { editor: Editor | null; tick: number; showFormattingMarks: boolean; showRuler?: boolean; pageMargins?: PageMargins; pageOrientation?: Orientation; pageFormat?: PageFormat; hfDistances?: HfDistances; differentFirstPage?: boolean; differentOddEven?: boolean; hfActive?: 'header' | 'footer' | null; onEditZone?: (zone: 'header' | 'footer') => void; onDebugDump?: () => void; onManageTableStyles?: () => void } = $props();
+  let { editor, tick, showFormattingMarks = $bindable(), showRuler = $bindable(true), pageMargins = $bindable(DEFAULT_MARGINS), pageOrientation = $bindable<Orientation>('portrait'), pageFormat = $bindable<PageFormat>('A4'), hfDistances = $bindable(DEFAULT_HF_DISTANCES), differentFirstPage = $bindable(false), differentOddEven = $bindable(false), hfActive = null, onEditZone, onDebugDump, onManageTableStyles, onNoteOptions }:
+    { editor: Editor | null; tick: number; showFormattingMarks: boolean; showRuler?: boolean; pageMargins?: PageMargins; pageOrientation?: Orientation; pageFormat?: PageFormat; hfDistances?: HfDistances; differentFirstPage?: boolean; differentOddEven?: boolean; hfActive?: 'header' | 'footer' | null; onEditZone?: (zone: 'header' | 'footer') => void; onDebugDump?: () => void; onManageTableStyles?: () => void; onNoteOptions?: () => void } = $props();
 
   const PAGE_FORMATS = Object.keys(PAGE_FORMAT_CM) as PageFormat[];
 
@@ -1749,6 +1749,18 @@
           <path d="M2 13.5h9" stroke="currentColor" stroke-width="1.3" stroke-linecap="round" />
         </svg>
       </button>
+      <button
+        onclick={() => onNoteOptions?.()}
+        disabled={!onNoteOptions}
+        title={t().notesDialog.title}
+        aria-label={t().notesDialog.title}
+      >
+        <svg width="16" height="16" viewBox="0 0 16 16" fill="none" aria-hidden="true">
+          <path d="M2 3h8M2 6h6M2 9h8" stroke="currentColor" stroke-width="1.3" stroke-linecap="round" />
+          <path d="M2 12.5h5" stroke="currentColor" stroke-width="1.3" stroke-linecap="round" />
+          <path d="M12 10.5a2 2 0 1 1 0 4 2 2 0 0 1 0-4z" stroke="currentColor" stroke-width="1.3" />
+        </svg>
+      </button>
       <div class="link-wrap" use:linkClickOutside>
         <button
           class:active={isLink}
diff --git a/src/lib/components/ribbon/Ribbon.svelte b/src/lib/components/ribbon/Ribbon.svelte
index bdc4a0c..9c4b442 100644
--- a/src/lib/components/ribbon/Ribbon.svelte
+++ b/src/lib/components/ribbon/Ribbon.svelte
@@ -47,6 +47,7 @@
     hfActive = null,
     onManageStyles,
     onManageTableStyles,
+    onNoteOptions,
     onEditZone,
     onFind,
     namePlaceholder = '',
@@ -74,6 +75,7 @@
     hfActive?: HfZone | null;
     onManageStyles?: (family: StyleFamily) => void;
     onManageTableStyles?: (family: StyleFamily) => void;
+    onNoteOptions?: () => void;
     onEditZone?: (zone: HfZone) => void;
     onFind?: (mode: 'find' | 'replace') => void;
     namePlaceholder?: string;
@@ -284,7 +286,7 @@
     {:else if tab === 'layout'}
       <LayoutTab {editor} {tick} {hfActive} bind:pageMargins bind:pageOrientation bind:pageFormat onParagraphDialog={() => (paragraphDialogOpen = true)} />
     {:else if tab === 'references'}
-      <ReferencesTab {editor} {tick} {hfActive} />
+      <ReferencesTab {editor} {tick} {hfActive} {onNoteOptions} />
     {:else if tab === 'review'}
       <ReviewTab {editor} {tick} {documentLanguage} {onLanguage} />
     {:else if tab === 'view'}
diff --git a/src/lib/components/ribbon/tabs/ReferencesTab.svelte b/src/lib/components/ribbon/tabs/ReferencesTab.svelte
index ea4ff76..8e324f0 100644
--- a/src/lib/components/ribbon/tabs/ReferencesTab.svelte
+++ b/src/lib/components/ribbon/tabs/ReferencesTab.svelte
@@ -7,10 +7,11 @@
   import { t } from '../../../i18n/i18n.svelte';
   import { shortcutHint } from '../../../editor/shortcuts';
 
-  let { editor, tick, hfActive = null }: {
+  let { editor, tick, hfActive = null, onNoteOptions }: {
     editor: Editor | null;
     tick: number;
     hfActive?: HfZone | null;
+    onNoteOptions?: () => void;
   } = $props();
 
   // The document holds at most one, so the first hit is it.
@@ -79,6 +80,13 @@
     disabled={!editor || !!hfActive}
     onclick={() => editor?.chain().focus().insertNote('endnote').run()}
   />
+  <RibbonButton
+    icon="tocLevels"
+    label={t().ribbon.noteOptions}
+    title={t().notesDialog.title}
+    disabled={!onNoteOptions}
+    onclick={() => onNoteOptions?.()}
+  />
 </RibbonGroup>
 
 <style>
diff --git a/src/lib/editor/extensions/notes.ts b/src/lib/editor/extensions/notes.ts
index 46f6449..ad57f70 100644
--- a/src/lib/editor/extensions/notes.ts
+++ b/src/lib/editor/extensions/notes.ts
@@ -210,6 +210,10 @@ export function noteLabels(refs: NoteRefInfo[], settings: NoteSettings): Map<str
 
 const notesKey = new PluginKey('notes');
 
+// Meta asking for a renumber without a document change: the numbering follows the
+// settings, and changing those in the dialog edits nothing the sync pass would see.
+export const RESYNC_NOTES = 'resyncNotes';
+
 export interface NotesOptions {
   settings: () => NoteSettings;
 }
@@ -301,7 +305,7 @@ export const Notes = Extension.create<NotesOptions>({
         // both at once would need positions from a document this transaction is still
         // rewriting.
         appendTransaction(trs, _oldState, newState) {
-          if (!trs.some((tr) => tr.docChanged)) return null;
+          if (!trs.some((tr) => tr.docChanged || tr.getMeta(RESYNC_NOTES))) return null;
           return syncStructure(newState) ?? syncNumbers(newState, getSettings());
         },
       }),
diff --git a/src/lib/i18n/locales/de.ts b/src/lib/i18n/locales/de.ts
index db99c20..a5d708e 100644
--- a/src/lib/i18n/locales/de.ts
+++ b/src/lib/i18n/locales/de.ts
@@ -462,6 +462,35 @@ const de: Messages = {
     noLeader: 'Kein Füllzeichen',
     defaultInterval: 'Standardtabstopps',
   },
+  notesDialog: {
+    title: 'Fuß- und Endnoten',
+    tabFootnotes: 'Fußnoten',
+    tabEndnotes: 'Endnoten',
+    numbering: 'Nummerierung',
+    format: 'Format',
+    startAt: 'Beginnen bei',
+    restart: 'Nummerierung neu beginnen',
+    restartDocument: 'Fortlaufend',
+    restartPage: 'Pro Seite',
+    restartChapter: 'Pro Abschnitt',
+    position: 'Position',
+    positionPage: 'Seitenende',
+    positionDocument: 'Dokumentende',
+    affix: 'Vor / nach der Nummer',
+    prefix: 'Davor',
+    suffix: 'Danach',
+    styles: 'Vorlagen',
+    bodyStyle: 'Notentext',
+    citationStyle: 'Notenanker',
+    separator: 'Trennlinie',
+    sepWidth: 'Länge (% der Textbreite)',
+    sepWeight: 'Dicke (pt)',
+    sepAbove: 'Abstand oben (cm)',
+    sepBelow: 'Abstand unten (cm)',
+    sepAlign: 'Ausrichtung',
+    sepColor: 'Farbe',
+    reset: 'Auf LibreOffice-Standard zurücksetzen',
+  },
   ribbon: {
     tabs: {
       file: 'Datei',
diff --git a/src/lib/i18n/locales/en.ts b/src/lib/i18n/locales/en.ts
index 622201f..c613577 100644
--- a/src/lib/i18n/locales/en.ts
+++ b/src/lib/i18n/locales/en.ts
@@ -466,6 +466,35 @@ const en = {
     noLeader: 'No leader',
     defaultInterval: 'Default tab stops',
   },
+  notesDialog: {
+    title: 'Footnotes and Endnotes',
+    tabFootnotes: 'Footnotes',
+    tabEndnotes: 'Endnotes',
+    numbering: 'Numbering',
+    format: 'Format',
+    startAt: 'Start at',
+    restart: 'Restart numbering',
+    restartDocument: 'Continuous',
+    restartPage: 'Each page',
+    restartChapter: 'Each section',
+    position: 'Position',
+    positionPage: 'Bottom of page',
+    positionDocument: 'End of document',
+    affix: 'Before / after the number',
+    prefix: 'Before',
+    suffix: 'After',
+    styles: 'Styles',
+    bodyStyle: 'Note text',
+    citationStyle: 'Note anchor',
+    separator: 'Separator line',
+    sepWidth: 'Length (% of the text width)',
+    sepWeight: 'Thickness (pt)',
+    sepAbove: 'Space above (cm)',
+    sepBelow: 'Space below (cm)',
+    sepAlign: 'Alignment',
+    sepColor: 'Color',
+    reset: 'Reset to LibreOffice defaults',
+  },
   ribbon: {
     tabs: {
       file: 'File',
diff --git a/src/lib/storage/noteSettings.ts b/src/lib/storage/noteSettings.ts
index f4a06a9..5fe6814 100644
--- a/src/lib/storage/noteSettings.ts
+++ b/src/lib/storage/noteSettings.ts
@@ -133,3 +133,16 @@ export function loadNoteSettings(): NoteSettings {
 export function saveNoteSettings(s: NoteSettings): void {
   localStorage.setItem(KEY, JSON.stringify(s));
 }
+
+// The separator's geometry on :root, where editor.css draws the line from it and
+// pageBreaks.ts reads back the band it has to reserve. The three lengths are
+// registered (@property), so they resolve to px there.
+export function applyNoteVars(s: NoteSettings): void {
+  const root = document.documentElement.style;
+  root.setProperty('--note-sep-above', `${s.separator.spaceAboveCm}cm`);
+  root.setProperty('--note-sep-below', `${s.separator.spaceBelowCm}cm`);
+  root.setProperty('--note-sep-weight', `${s.separator.weightPt}pt`);
+  root.setProperty('--note-sep-rel-width', `${s.separator.relWidthPercent}%`);
+  root.setProperty('--note-sep-color', s.separator.color);
+  root.setProperty('--note-sep-align', s.separator.align);
+}
diff --git a/src/styles/editor.css b/src/styles/editor.css
index cd0e56e..2d6d583 100644
--- a/src/styles/editor.css
+++ b/src/styles/editor.css
@@ -284,11 +284,6 @@
 @property --note-sep-above { syntax: '<length>'; inherits: true; initial-value: 0.1cm; }
 @property --note-sep-weight { syntax: '<length>'; inherits: true; initial-value: 0.5pt; }
 @property --note-sep-below { syntax: '<length>'; inherits: true; initial-value: 0.1cm; }
-.paper .tiptap {
-  --note-sep-rel-width: 25%;
-  --note-sep-color: #000000;
-  --note-sep-align: left;
-}
 .paper .tiptap .note-ref {
   /* style:text-position="super 58%" on LibreOffice's Footnote anchor style. */
   vertical-align: super;
@@ -334,10 +329,12 @@
      nothing. The reservation above still uses the true weight, as a hairline border
      does — the line is a pixel wider than it measures, not the space it sits in. */
   height: max(1px, var(--note-sep-weight));
-  background-image: linear-gradient(var(--note-sep-color), var(--note-sep-color));
-  background-size: var(--note-sep-rel-width) 100%;
+  /* The two non-length values carry their own default: only a registered property
+     takes one from @property, and the dialog writes all of them onto :root. */
+  background-image: linear-gradient(var(--note-sep-color, #000), var(--note-sep-color, #000));
+  background-size: var(--note-sep-rel-width, 25%) 100%;
   background-repeat: no-repeat;
-  background-position: var(--note-sep-align) top;
+  background-position: var(--note-sep-align, left) top;
 }
 
 /* Formulas (formula.ts). MathML needs a font with an OpenType MATH table or Chromium