Editor: font-size presets + image insert/export support

Two editor features that were in flight alongside the sound work:
- FontSize TipTap extension (rides on textStyle) with Small/Normal/Large/
  Title presets in the toolbar; StatusBar + CSS support
- Image handling: internal/images handler, upload route + config, client
  API, EditorCore wiring, and md/html/docx export support for images

Claude-Session: https://claude.ai/code/session_016Yr6jELuRc7hyzYLccQKZd

web/src/index.css

@@ -98,6 +98,93 @@ button, a, input {
   padding: 0.1em 0.35em;
   border-radius: 6px;
 }
+/* Top formatting bar: a single line at rest so it stays slim, expanding to
+   reveal every control on hover (or while a control inside it has focus, e.g.
+   the link input or an open popover). The clipped right edge fades out as a hint
+   that more is available. */
+.petal-toolbar {
+  flex-wrap: nowrap;
+  overflow: hidden;
+  max-width: 100%;
+  -webkit-mask-image: linear-gradient(to right, #000 90%, transparent 100%);
+  mask-image: linear-gradient(to right, #000 90%, transparent 100%);
+}
+.petal-toolbar:hover,
+.petal-toolbar:focus-within {
+  flex-wrap: wrap;
+  overflow: visible;
+  -webkit-mask-image: none;
+  mask-image: none;
+}
+
+/* Highlighter mark — inline background swatch behind the text. */
+.petal-prose mark {
+  border-radius: 4px;
+  padding: 0.05em 0.15em;
+  /* color comes from the inline style the Highlight extension writes */
+}
+/* Inserted images: rounded, soft-shadowed, never wider than the column. The
+   selected-node ring matches the rest of the rose theme. Scoped to the editor's
+   own <img> (not a class) since Tiptap doesn't always carry the configured
+   class through to the rendered node. */
+.petal-prose img {
+  max-width: 100%;
+  height: auto;
+  border-radius: var(--radius-card);
+  box-shadow: var(--shadow-soft);
+}
+.petal-prose img.ProseMirror-selectednode {
+  outline: 2px solid var(--color-accent);
+  outline-offset: 2px;
+}
+/* Tables: soft pink grid, rounded outer corners, a tinted header row. Targeted
+   by element within the editor — Tiptap renders the <table> without our
+   configured class, so a `.petal-table` selector would never match. The wrapper
+   Tiptap adds (.tableWrapper) handles horizontal overflow scroll. */
+.petal-prose .tableWrapper {
+  overflow-x: auto;
+}
+.petal-prose table {
+  border-collapse: collapse;
+  width: 100%;
+  margin: 0.4em 0;
+  overflow: hidden;
+  border-radius: var(--radius-input);
+  border: 1px solid var(--color-border);
+  table-layout: fixed;
+}
+.petal-prose td,
+.petal-prose th {
+  border: 1px solid var(--color-border);
+  padding: 0.4em 0.6em;
+  vertical-align: top;
+  position: relative;
+  min-width: 3em;
+}
+.petal-prose th {
+  background: var(--color-surface-alt);
+  font-weight: 700;
+  text-align: left;
+}
+/* The cell being edited / the active selection inside a table. */
+.petal-prose .selectedCell::after {
+  content: '';
+  position: absolute;
+  inset: 0;
+  background: var(--color-surface-alt);
+  opacity: 0.5;
+  pointer-events: none;
+}
+/* The column-resize handle Tiptap draws between columns. */
+.petal-prose .column-resize-handle {
+  position: absolute;
+  right: -2px;
+  top: 0;
+  bottom: -2px;
+  width: 4px;
+  background: var(--color-accent);
+  pointer-events: none;
+}
 /* Placeholder shown on the empty first paragraph (Tiptap Placeholder ext). */
 .petal-prose p.is-editor-empty:first-child::before {
   content: attr(data-placeholder);