slides editing added

backend/app/db.py

@@ -11,8 +11,13 @@ class Base(DeclarativeBase):
 
 
 _sqlite = settings.database_url.startswith("sqlite")
-_connect_args = {"check_same_thread": False, "timeout": 30} if _sqlite else {}
-engine = create_engine(settings.database_url, pool_pre_ping=True, connect_args=_connect_args)
+# Postgres: a connection that dies silently (laptop sleep, network change, Neon dropping it) otherwise leaves a query
+# waiting on the socket forever, and the worker loop with it. Keepalives notice a dead peer within about a minute
+# and the query fails instead; connect_timeout does the same for a connect that never completes.
+_pg_connect_args = {"connect_timeout": 10, "keepalives": 1, "keepalives_idle": 30, "keepalives_interval": 10,
+                    "keepalives_count": 3}
+_connect_args = {"check_same_thread": False, "timeout": 30} if _sqlite else _pg_connect_args
+engine = create_engine(settings.database_url, pool_pre_ping=True, pool_recycle=300, connect_args=_connect_args)
 
 if _sqlite:
     # Local dev: the API and the worker share one file. WAL lets reads run during a write, the busy

backend/app/routers/artifacts.py

@@ -19,7 +19,10 @@ from app.services.renderer import COMPOSITIONS
 from app.services.storage import storage
 from app.services.usage import check_limit
 from app.slides import export as slide_export
+from app.slides.build import BadEdit, restructure
+from app.slides.build import slots as slide_slots
 from app.slides.build import stored as stored_deck
+from app.slides.build import view as slide_pages
 from app.slides.themes import theme_id as slide_theme_id
 
 router = APIRouter(prefix="/api/artifacts", tags=["artifacts"])
@@ -297,6 +300,45 @@ def slide_deck_file(artifact_id: uuid.UUID, ext: Literal["pdf", "pptx"], ctx: Ct
     return Response(data, media_type=media, headers={"Content-Disposition": f'attachment; filename="{name}.{ext}"'})
 
 
+class DeckIn(BaseModel):
+    # The deck's slides as the editor has them, in the stored shape (app.slides.content.empty_slide); coerced on arrival
+    slides: list[dict] = Field(min_length=1, max_length=60)
+
+
+def _editable_deck(ctx: Ctx, artifact_id: uuid.UUID) -> Artifact:
+    a = get_artifact_or_404(ctx, artifact_id)
+    if a.type != "slide_deck" or a.status != "ready":
+        raise HTTPException(400, "Only a finished slide deck can be edited.")
+    return a
+
+
+@router.post("/{artifact_id}/deck-preview")
+def preview_deck(artifact_id: uuid.UUID, body: DeckIn, ctx: Ctx = Depends(get_ctx)):
+    """The editor's slides drawn, without saving: after a slide is added, removed, moved or changed to another layout,
+    or a text box is added or removed. Returns the slides as they will be kept (variants given, text fitted)."""
+    a = _editable_deck(ctx, artifact_id)
+    try:
+        deck = restructure(a.content_json or {}, body.slides, final=False)
+    except BadEdit as exc:
+        raise HTTPException(400, str(exc)) from exc
+    content = {**(a.content_json or {}), "deck": deck}
+    return {"slides": deck["slides"], "slides_html": slide_pages(content), "slide_slots": slide_slots(content)}
+
+
+@router.put("/{artifact_id}/deck")
+def save_deck(artifact_id: uuid.UUID, body: DeckIn, ctx: Ctx = Depends(get_ctx)):
+    """The editor's slides kept: text, speaker notes, and which slides there are, in what order and layout. The deck is
+    fitted again (with the Chrome check), so the slides, the PDF and the PowerPoint all show it."""
+    a = _editable_deck(ctx, artifact_id)
+    try:
+        deck = restructure(a.content_json or {}, body.slides, final=True)
+    except BadEdit as exc:
+        raise HTTPException(400, str(exc)) from exc
+    a.content_json = {**(a.content_json or {}), "deck": deck}
+    ctx.db.commit()
+    return serialize_artifact(a, latest_jobs(ctx.db, [a.id]).get(a.id))
+
+
 @router.patch("/{artifact_id}")
 def patch_artifact(artifact_id: uuid.UUID, body: PatchIn, ctx: Ctx = Depends(get_ctx)):
     a = get_artifact_or_404(ctx, artifact_id)

backend/app/services/artifacts.py

@@ -9,6 +9,7 @@ from sqlalchemy.orm import Session, object_session
 from app.models import Artifact, Job
 from app.services.jobs import create_job, serialize_job
 from app.services.storage import storage
+from app.slides.build import slots as slide_slots
 from app.slides.build import view as slide_pages
 
 TYPE_LABELS = {
@@ -87,7 +88,7 @@ def serialize_artifact(a: Artifact, job: Job | None = None) -> dict:
 
         content = {**content, "html": infographic_html(content), "html_landscape": infographic_html(content, "landscape")}
     if a.type == "slide_deck" and a.status == "ready":
-        content = {**content, "slides_html": slide_pages(content)}
+        content = {**content, "slides_html": slide_pages(content), "slide_slots": slide_slots(content)}
     if a.type == "report" and any(b.get("type") == "infographic" for b in content.get("blocks") or []):
         content = {**content, "blocks": report_blocks(a)}
     slides = content.get("slide_keys") or []

backend/app/slides/build.py

@@ -1,14 +1,17 @@
 """From a written deck to what is stored and shown. `finish` picks each slide's variant, fits its text, and checks
-the result in Chrome when one is installed. `view` reads a stored deck back (clamped again, so older or edited decks
-still draw) and gives its pages; one slide that cannot be drawn becomes a plain one instead of breaking the deck."""
+the result in Chrome when one is installed. `restructure` takes a deck back from the editor and fits it again.
+`view` reads a stored deck back (clamped again, so older or edited decks still draw) and gives its pages; one slide
+that cannot be drawn becomes a plain one instead of breaking the deck."""
 
 import copy
 import logging
+import random
+from collections import Counter
 
 from app.infographics.image import ImageUnavailable
 from app.slides import export
 from app.slides.content import clamp_deck, clamp_slide, empty_slide
-from app.slides.layout import SCALES, assign_variants, compose, seed_of
+from app.slides.layout import GEOMETRY, SCALES, VARIANTS, assign_variants, compose, fits_variant, seed_of
 from app.slides.render import slide_html
 from app.slides.themes import theme_id
 
@@ -23,11 +26,17 @@ def fit(deck: dict, theme: str, fmt: str, seed: int) -> dict:
 
 
 def finish(deck: dict, theme: str, fmt: str, seed: int, previous: list[tuple[str, str]] | None = None) -> dict:
-    """Variants, fitted text, and a Chrome check that no text box overflows (slides that do are drawn a step
-    smaller and fitted again). Raises ValueError when a slide cannot be drawn at all."""
+    """Variants, then refit. Raises ValueError when a slide cannot be drawn at all."""
     theme = theme_id(theme)
     deck = copy.deepcopy(deck)
     assign_variants(deck["slides"], theme, seed, previous)
+    return refit(deck, theme, fmt, seed)
+
+
+def refit(deck: dict, theme: str, fmt: str, seed: int) -> dict:
+    """Fitted text and a Chrome check that no text box overflows (slides that do are drawn a step smaller and fitted
+    again), keeping each slide's variant. Raises ValueError when a slide cannot be drawn at all."""
+    theme = theme_id(theme)
     deck = fit(deck, theme, fmt, seed)
     for _ in range(3):
         try:
@@ -45,6 +54,70 @@ def finish(deck: dict, theme: str, fmt: str, seed: int, previous: list[tuple[str
     return deck
 
 
+class BadEdit(ValueError):
+    """A deck sent back from the editor that cannot be kept (no slides, or too many)."""
+
+
+MAX_SLIDES = 30
+
+
+def fill_variants(slides: list[dict], theme: str, seed: int) -> None:
+    """Give a variant, in place, to each slide that has none or whose variant no longer suits it (a new slide, a changed
+    layout, a card row now with five points). Every other slide keeps its own, so editing one slide never redraws the
+    rest. The choice follows assign_variants: suited to the content, not the same as a neighbour, unused ones first."""
+    theme = theme_id(theme)
+    def ok(i: int) -> bool:
+        s = slides[i]
+        return s["variant"] in VARIANTS[s["layout"]] and fits_variant(s, theme, s["variant"])
+    keep = [ok(i) for i in range(len(slides))]
+    for i, s in enumerate(slides):
+        before = (slides[i - 1]["layout"], slides[i - 1]["variant"]) if i else None
+        if keep[i] and (s["layout"], s["variant"]) != before:
+            continue
+        after = (slides[i + 1]["layout"], slides[i + 1]["variant"]) if i + 1 < len(slides) and keep[i + 1] else None
+        options = [v for v in VARIANTS[s["layout"]] if fits_variant(s, theme, v)] or list(VARIANTS[s["layout"]])
+        fresh = [v for v in options if (s["layout"], v) not in (before, after)] or options
+        used = Counter((x["layout"], x["variant"]) for j, x in enumerate(slides) if j != i)
+        rnd = random.Random(seed + i)
+        s["variant"] = min(fresh, key=lambda v: (used[(s["layout"], v)], rnd.random()))
+        keep[i] = True
+
+
+def restructure(content: dict, slides: object, final: bool) -> dict:
+    """The stored deck with the slides the editor sent (text edited, slides added, removed, moved, or changed to another
+    layout). They are coerced like model output (clamp_deck: plain text, the format's limits, valid layouts), slides
+    that need one get a variant, and the deck is fitted: quickly for a preview, with the Chrome check when `final`."""
+    got = stored(content)
+    if not got:
+        raise BadEdit("This deck has no slides to edit.")
+    deck, theme, fmt, seed = got
+    if not isinstance(slides, list) or not slides:
+        raise BadEdit("A deck needs at least one slide.")
+    if len(slides) > MAX_SLIDES:
+        raise BadEdit(f"A deck can have at most {MAX_SLIDES} slides.")
+    new = clamp_deck({"title": deck["title"], "subtitle": deck["subtitle"], "slides": slides}, fmt)
+    if not new:
+        raise BadEdit("A deck needs at least one slide with a heading.")
+    for s in new["slides"]:
+        s["shrink"] = 0  # text changed: fitted afresh, so shorter text can be drawn larger again
+    fill_variants(new["slides"], theme, seed)
+    return refit(new, theme, fmt, seed) if final else fit(new, theme, fmt, seed)
+
+
+def slots(content: dict) -> list[list[str]]:
+    """For each slide, the parts its variant has a place for (kicker, lead, body, by, closing...): what the editor
+    can offer to add."""
+    got = stored(content)
+    if not got:
+        return []
+    deck, theme, _fmt, _seed = got
+    out = []
+    for s in deck["slides"]:
+        variants = GEOMETRY[theme][s["layout"]]
+        out.append(sorted(k for k, v in (variants.get(s["variant"]) or next(iter(variants.values()))).items() if v))
+    return out
+
+
 def stored(content: dict) -> tuple[dict, str, str, int] | None:
     """A stored deck, clamped, with its theme, format and seed (None when there is none)."""
     fmt = content.get("format") if content.get("format") in ("detailed", "presenter") else "detailed"

backend/app/slides/content.py

@@ -111,6 +111,23 @@ def _column(raw: object, lim: dict) -> dict:
     return {"label": clip(c.get("label"), lim["label"]), "items": items}
 
 
+_LIMIT_KEY = {"kicker": "kicker", "heading": "heading", "lead": "lead", "closing": "closing", "stat.value": "value",
+              "stat.label": "stat_label", "quote.text": "quote", "quote.by": "by", "left.label": "label",
+              "right.label": "label", "left.items": "item", "right.items": "item", "points.term": "term",
+              "points.text": "text", "takeaways": "takeaway"}
+
+
+def field_limit(layout: str, field: str, fmt: str) -> int:
+    """How many characters `field` may hold on a slide of this layout: what clamp_slide cuts it to."""
+    lim = LIMITS[fmt if fmt in FORMATS else "detailed"]
+    key = re.sub(r"\.\d+", "", field)  # "points.2.text" -> "points.text"
+    if layout == "title" and key in ("heading", "lead"):
+        return lim["title" if key == "heading" else "subtitle"]
+    if layout == "agenda" and key == "points.text":
+        return lim["agenda"]
+    return lim[_LIMIT_KEY[key]]
+
+
 def empty_slide(layout: str = "points") -> dict:
     return {"layout": layout, "variant": "", "kicker": "", "heading": "", "lead": "", "points": [],
             "left": {"label": "", "items": []}, "right": {"label": "", "items": []},

backend/app/slides/decor.py

@@ -12,7 +12,7 @@ from app.slides.themes import H, W
 
 @dataclass
 class Shape:
-    kind: str  # glow | planet | ring | const | stars
+    kind: str  # glow | planet | ring | band | const | stars
     cx: float = 0
     cy: float = 0
     r: float = 0
@@ -24,6 +24,10 @@ class Shape:
     width: float = 2.0
     points: list[tuple[float, float, float, float]] = field(default_factory=list)  # stars: x, y, r, opacity
     edges: list[tuple[int, int]] = field(default_factory=list)
+    # ring, band: only this part of the path, in degrees round it (0 to 180 is the half nearer the viewer, below the
+    # centre before the tilt). None: all of it.
+    arc: tuple[float, float] | None = None
+    inner: float = 0  # band: the inner edge, as a share of rx and ry (the band fills from there out to the ring)
 
 
 @dataclass
@@ -73,6 +77,38 @@ def _constellation(rnd: random.Random, box: tuple[float, float, float, float], n
     return Shape("const", points=pts, edges=edges, color="accent", opacity=0.85)
 
 
+def on_ring(ring: Shape, degrees: float) -> tuple[float, float]:
+    """The point at `degrees` round a ring's path, after its tilt: where a planet sits so it is on the drawn line.
+    Same maths as the renderers (SVG rotate(rot cx cy), the PowerPoint's polyline)."""
+    a, rot = math.radians(degrees), math.radians(ring.rot)
+    x, y = ring.rx * math.cos(a), ring.ry * math.sin(a)
+    return ring.cx + x * math.cos(rot) - y * math.sin(rot), ring.cy + x * math.sin(rot) + y * math.cos(rot)
+
+
+def ring_path(s: Shape, scale: float = 1.0, steps: int = 180) -> list[tuple[float, float]]:
+    """Points along a ring's (scaled) path, over its arc, for the renderers to draw."""
+    a0, a1 = s.arc or (0, 360)
+    scaled = Shape("ring", s.cx, s.cy, rx=s.rx * scale, ry=s.ry * scale, rot=s.rot)
+    return [on_ring(scaled, a0 + (a1 - a0) * k / steps) for k in range(steps + 1)]
+
+
+# A ringed planet's band, from the inside out: (inner, outer, opacity) as shares of the ring. A brighter inner ring
+# and a fainter outer one with a dark gap between, as Saturn's are.
+BANDS = ((0.72, 0.86, 0.34), (0.89, 1.0, 0.22))
+NEAR, FAR = (0, 180), (180, 360)
+
+
+def ringed_planet(cx: float, cy: float, r: float, rx: float, ry: float, rot: float, opacity: float = 1.0) -> list[Shape]:
+    """A planet inside its rings: the far half of the rings goes behind the planet and the near half in front, so the
+    rings wrap round it instead of lying flat over its face. The far half is a little dimmer, being further away."""
+    def half(arc: tuple[float, float], op: float) -> list[Shape]:
+        out = [Shape("band", cx, cy, rx=rx * hi, ry=ry * hi, rot=rot, color="accent", opacity=o * op, arc=arc, inner=lo / hi)
+               for lo, hi, o in BANDS]
+        out.append(Shape("ring", cx, cy, rx=rx, ry=ry, rot=rot, color="accent", opacity=0.8 * op, width=2, arc=arc))
+        return out
+    return [*half(FAR, 0.6 * opacity), Shape("planet", cx, cy, r), *half(NEAR, opacity)]
+
+
 def build(theme: str, layout: str, variant: str, seed: int, index: int) -> Decor:
     """The drawing for one slide."""
     dark = theme == "dark-space"
@@ -91,8 +127,8 @@ def build(theme: str, layout: str, variant: str, seed: int, index: int) -> Decor
         elif key == ("title", "b"):
             cx, cy = 1520 + j(60), 300 + j(50)
             hot = (cx, cy)
-            shapes += [Shape("glow", cx, cy, 520, color="accent2", opacity=0.5), Shape("planet", cx, cy, 230 + j(25)),
-                       Shape("ring", cx, cy, rx=400, ry=78, rot=-18 + j(6), color="accent", opacity=0.55, width=2.5)]
+            shapes += [Shape("glow", cx, cy, 520, color="accent2", opacity=0.5),
+                       *ringed_planet(cx, cy, 230 + j(25), rx=395, ry=82, rot=-18 + j(6))]
         elif key == ("title", "c"):
             hot = (1450, 540)
             shapes += [Shape("glow", 1450, 540, 620, color="accent2", opacity=0.35),
@@ -114,32 +150,29 @@ def build(theme: str, layout: str, variant: str, seed: int, index: int) -> Decor
                 x0, y0, x1, y1 = free
                 r = min(x1 - x0, y1 - y0) * rnd.uniform(0.26, 0.34)
                 cx, cy = rnd.uniform(x0 + r, x1 - r), rnd.uniform(y0 + r, y1 - r)
-                shapes += [Shape("glow", cx, cy, r * 2.2, color="accent2", opacity=0.35), Shape("planet", cx, cy, r),
-                           Shape("ring", cx, cy, rx=r * 1.7, ry=r * 0.34, rot=-16 + j(10), color="accent", opacity=0.5, width=2)]
+                shapes += [Shape("glow", cx, cy, r * 2.2, color="accent2", opacity=0.35),
+                           *ringed_planet(cx, cy, r, rx=r * 1.8, ry=r * 0.38, rot=-16 + j(10), opacity=0.9)]
     else:
         ring = lambda cx, cy, r, op=0.3: Shape("ring", cx, cy, rx=r, ry=r, color="accent2", opacity=op, width=2)  # noqa: E731
         if key == ("title", "a"):
             cx, cy = 2010 + j(40), 540 + j(60)
             hot = (1500, 540)
-            shapes += [ring(cx, cy, 360), ring(cx, cy, 540, 0.24), ring(cx, cy, 740, 0.18)]
-            a = math.radians(200 + j(20))
-            shapes.append(Shape("planet", cx + 540 * math.cos(a), cy + 540 * math.sin(a), 34))
+            orbit = ring(cx, cy, 540, 0.24)
+            shapes += [ring(cx, cy, 360), orbit, ring(cx, cy, 740, 0.18), Shape("planet", *on_ring(orbit, 200 + j(20)), 34)]
         elif key == ("title", "b"):
             hot = (1500, 820)
             shapes += [Shape("glow", 1560, 840, 520, color="accent", opacity=0.12),
                        _constellation(rnd, (1360, 660, 1800, 980), 7)]
         elif key == ("title", "c"):
             hot = (960, 540)
-            shapes += [Shape("ring", 960, 520, rx=900, ry=330, rot=-10 + j(4), color="accent2", opacity=0.28, width=2.5),
-                       Shape("ring", 960, 520, rx=1040, ry=400, rot=-10 + j(4), color="accent2", opacity=0.14, width=2)]
-            a = math.radians(rnd.choice((20, 160, 200, 340)) + j(10))
-            shapes.append(Shape("planet", 960 + 900 * math.cos(a), 520 + 330 * math.sin(a), 30))
-        elif key == ("section", "a"):
-            shapes += [ring(1960, 560, 300), ring(1960, 560, 460, 0.22), ring(1960, 560, 640, 0.15),
-                       Shape("planet", 1960 - 460 + 6, 560 + j(80), 26)]
-        elif key == ("section", "b"):
-            shapes += [ring(-40, 560, 300), ring(-40, 560, 460, 0.22), ring(-40, 560, 640, 0.15),
-                       Shape("planet", -40 + 460 - 6, 560 + j(80), 26)]
+            rot = -10 + j(4)  # one tilt for both, so the rings stay concentric
+            orbit = Shape("ring", 960, 520, rx=900, ry=330, rot=rot, color="accent2", opacity=0.28, width=2.5)
+            shapes += [orbit, Shape("ring", 960, 520, rx=1040, ry=400, rot=rot, color="accent2", opacity=0.14, width=2),
+                       Shape("planet", *on_ring(orbit, rnd.choice((20, 160, 200, 340)) + j(10)), 30)]
+        elif key in (("section", "a"), ("section", "b")):
+            cx, toward = (1960, 180) if variant == "a" else (-40, 0)  # the planet sits on the side facing the text
+            orbit = ring(cx, 560, 460, 0.22)
+            shapes += [ring(cx, 560, 300), orbit, ring(cx, 560, 640, 0.15), Shape("planet", *on_ring(orbit, toward + j(10)), 26)]
         elif key == ("closing", "c"):
             hot = (960, 860)
             shapes += [Shape("ring", 960, 540, rx=1000, ry=470, rot=6 + j(4), color="accent2", opacity=0.2, width=2.5)]

backend/app/slides/export.py

@@ -22,9 +22,9 @@ from pptx.oxml.ns import qn
 from pptx.util import Emu, Pt
 
 from app.infographics.image import ImageUnavailable, chrome
-from app.slides.decor import Decor, Shape, build
+from app.slides.decor import Decor, Shape, build, ring_path
 from app.slides.layout import El, compose
-from app.slides.render import color, deck_print_html, planet_colors
+from app.slides.render import SHADE, color, deck_print_html, planet_colors, ring_shade
 from app.slides.themes import FONTS, THEMES, H, Palette, W, theme_id
 
 TIMEOUT = 120
@@ -144,6 +144,10 @@ def background(decor: Decor, pal: Palette, dark: bool) -> bytes:
     layer = Image.new("RGBA", (W, H), (0, 0, 0, 0))
     draw = ImageDraw.Draw(layer)
     for s in decor.shapes:
+        if s.kind in ("glow", "planet", "band"):  # pasted straight onto the sky: put down the lines drawn so far
+            sky.alpha_composite(layer)  # first, so the order is the page's (a ring's far half behind its planet)
+            layer = Image.new("RGBA", (W, H), (0, 0, 0, 0))
+            draw = ImageDraw.Draw(layer)
         _draw(sky, layer, draw, s, pal, dark)
     sky = Image.alpha_composite(sky, layer).convert("RGB")
     buf = io.BytesIO()
@@ -174,6 +178,10 @@ def _draw(sky: Image.Image, layer: Image.Image, draw: ImageDraw.ImageDraw, s: Sh
         disc.putalpha(mask)
         _paste_clipped(sky, disc, s.cx - s.r, s.cy - s.r)
         draw.ellipse((s.cx - s.r, s.cy - s.r, s.cx + s.r, s.cy + s.r), outline=_hex_rgb(rim) + (180,), width=3)
+    elif s.kind == "band":
+        sky.alpha_composite(_band(s, c))
+    elif s.kind == "ring" and s.arc:
+        draw.line(ring_path(s), fill=c + (int(255 * s.opacity),), width=max(1, round(s.width)), joint="curve")
     elif s.kind == "ring":
         steps = 360
         rot = math.radians(s.rot)
@@ -191,6 +199,25 @@ def _draw(sky: Image.Image, layer: Image.Image, draw: ImageDraw.ImageDraw, s: Sh
             draw.ellipse((x - r, y - r, x + r, y + r), fill=c + (int(255 * s.opacity),))
 
 
+def _band(s: Shape, c: tuple[int, int, int]) -> Image.Image:
+    """A ringed planet's band as a slide-sized layer: the shape filled, faded left to right as the page's SHADE."""
+    shape = Image.new("L", (W, H), 0)
+    ImageDraw.Draw(shape).polygon(ring_path(s) + ring_path(s, s.inner)[::-1], fill=255)
+    lo, hi = ring_shade(s)
+    ramp = []
+    for x in range(W):
+        t = min(1.0, max(0.0, (x - lo) / (hi - lo))) if hi > lo else 0.0
+        (o0, a0), (o1, a1) = next((SHADE[k], SHADE[k + 1]) for k in range(len(SHADE) - 1) if t <= SHADE[k + 1][0])
+        ramp.append(int(255 * s.opacity * (a0 + (a1 - a0) * (t - o0) / (o1 - o0))))
+    fade = Image.new("L", (W, 1))
+    fade.putdata(ramp)
+    alpha = Image.new("L", (W, H), 0)
+    alpha.paste(fade.resize((W, H)), mask=shape)
+    out = Image.new("RGBA", (W, H), c + (0,))
+    out.putalpha(alpha)
+    return out
+
+
 def _paste_clipped(base: Image.Image, img: Image.Image, x: float, y: float) -> None:
     """alpha_composite `img` onto `base` at (x, y), clipping whatever falls outside."""
     x, y = int(x), int(y)

backend/app/slides/layout.py

@@ -18,8 +18,8 @@ from app.slides.themes import theme_id
 
 # --- geometry -------------------------------------------------------------------------------------------------------
 # A block is (x, y, w, h[, align[, valign[, kind]]]). `kind` says how a body, a column or the closing line is drawn.
-# Dark space: cinematic, centred openers and closers, asymmetric splits. Light space: editorial, left aligned, top
-# anchored, mirrored splits.
+# Night stellar (dark-space): cinematic, centred openers and closers, asymmetric splits. Moon light (light-space):
+# editorial, left aligned, top anchored, mirrored splits.
 
 GEOMETRY: dict[str, dict[str, dict[str, dict[str, tuple]]]] = {
     "dark-space": {
@@ -160,7 +160,7 @@ def block(theme: str, layout: str, variant: str, name: str) -> tuple | None:
 
 # --- picking variants -----------------------------------------------------------------------------------------------
 
-def _fits(slide: dict, theme: str, variant: str) -> bool:
+def fits_variant(slide: dict, theme: str, variant: str) -> bool:
     """Whether a variant suits this slide's content (a card row needs 3 or 4 points, a timeline 3 to 5)."""
     layout = slide["layout"]
     n = len(slide["points"])
@@ -187,7 +187,7 @@ def assign_variants(slides: list[dict], theme: str, seed: int, previous: list[tu
     before: tuple[str, str] | None = None
     previous = previous or []
     for i, s in enumerate(slides):
-        options = [v for v in VARIANTS[s["layout"]] if _fits(s, theme, v)] or list(VARIANTS[s["layout"]])
+        options = [v for v in VARIANTS[s["layout"]] if fits_variant(s, theme, v)] or list(VARIANTS[s["layout"]])
         fresh = [v for v in options if (s["layout"], v) != before]
         if not fresh:  # the only variant that suits it was just used: any other one draws it too, so never repeat
             fresh = [v for v in VARIANTS[s["layout"]] if (s["layout"], v) != before] or options
@@ -219,6 +219,7 @@ class Run:
     text: str
     bold: bool = False
     color: str = "ink"
+    field: str = ""  # where the text lives in the slide ("heading", "points.2.text"), so the page can edit it; "" is ours
 
 
 def _lines(runs: list[Run], width: float, size: float, font: str, upper: bool, track: float) -> int:
@@ -291,16 +292,16 @@ def _scales(start: int, grow: bool = False) -> tuple[float, ...]:
     """Scales to try, largest first: from `start` down, with the growing ones first when allowed and not shrunk."""
     return (GROW + SCALES) if grow and start == 0 else SCALES[start:]
 
-# Base font sizes in px, by format. Presenter slides carry fewer words, so they are drawn larger.
+# Base font sizes in px, by format (both themes). Presenter slides carry fewer words, so they are drawn larger.
 TYPE = {
-    "detailed": {"kicker": 22, "heading": 60, "title": 100, "section": 80, "lead": 30, "title_lead": 34, "point": 28,
-                 "card_term": 30, "card_text": 25, "value": 220, "label": 34, "quote": 52, "by": 24, "take": 28,
-                 "closing": 46, "closing_big": 66, "agenda": 32, "col_label": 28, "col_item": 27, "num": 22,
-                 "footer": 18},
-    "presenter": {"kicker": 24, "heading": 72, "title": 112, "section": 92, "lead": 36, "title_lead": 38,
-                  "point": 40, "card_term": 34, "card_text": 34, "value": 260, "label": 40, "quote": 60, "by": 26,
-                  "take": 36, "closing": 56, "closing_big": 78, "agenda": 36, "col_label": 30, "col_item": 36,
-                  "num": 24, "footer": 18},
+    "detailed": {"kicker": 24, "heading": 66, "title": 110, "section": 88, "lead": 33, "title_lead": 37, "point": 31,
+                 "card_term": 33, "card_text": 28, "value": 242, "label": 37, "quote": 57, "by": 26, "take": 31,
+                 "closing": 51, "closing_big": 73, "agenda": 35, "col_label": 31, "col_item": 30, "num": 24,
+                 "footer": 20},
+    "presenter": {"kicker": 26, "heading": 79, "title": 123, "section": 101, "lead": 40, "title_lead": 42,
+                  "point": 44, "card_term": 37, "card_text": 37, "value": 286, "label": 44, "quote": 66, "by": 29,
+                  "take": 40, "closing": 62, "closing_big": 86, "agenda": 40, "col_label": 33, "col_item": 40,
+                  "num": 26, "footer": 20},
 }
 
 
@@ -341,10 +342,11 @@ def _text(role: str, rect: tuple, paras: list[list[Run]], base: float, start: in
               upper=upper, track=track, gap=size * gap_em)
 
 
-def _point_runs(p: dict, fmt: str) -> list[Run]:
+def _point_runs(p: dict, i: int, fmt: str) -> list[Run]:
     if p["term"] and fmt == "detailed":
-        return [Run(p["term"] + ".", True, "ink"), Run(" " + p["text"], False, "mute")]
-    return [Run(p["text"], False, "ink")]
+        return [Run(p["term"], True, "ink", f"points.{i}.term"), Run(". ", True, "ink"),
+                Run(p["text"], False, "mute", f"points.{i}.text")]
+    return [Run(p["text"], False, "ink", f"points.{i}.text")]
 
 
 def _body(els: list[El], s: dict, rect: tuple, kind: str, fmt: str, t: dict, start: int, dark: bool) -> None:
@@ -354,13 +356,13 @@ def _body(els: list[El], s: dict, rect: tuple, kind: str, fmt: str, t: dict, sta
 
     if kind in ("list", "list2", "agenda_list", "agenda_grid", "take_stack"):
         if kind in ("agenda_list", "agenda_grid"):
-            items = [[Run(p["text"], False, "ink")] for p in pts]
+            items = [[Run(p["text"], False, "ink", f"points.{i}.text")] for i, p in enumerate(pts)]
             base, numbered = t["agenda"], True
         elif kind == "take_stack":
-            items = [[Run(tx, False, "ink")] for tx in s["takeaways"]]
+            items = [[Run(tx, False, "ink", f"takeaways.{i}")] for i, tx in enumerate(s["takeaways"])]
             base, numbered = t["take"], True
         else:
-            items = [_point_runs(p, fmt) for p in pts]
+            items = [_point_runs(p, i, fmt) for i, p in enumerate(pts)]
             base, numbered = t["point"], False
         cols = 2 if kind in ("list2", "agenda_grid") and len(items) >= 3 else 1
         per = math.ceil(len(items) / cols)
@@ -466,15 +468,16 @@ def _body(els: list[El], s: dict, rect: tuple, kind: str, fmt: str, t: dict, sta
             align = "center" if kind == "take_arc" else "left"
             if term:
                 th = text_height([[Run(term, True)]], inner_w, ts, 1.15, "display")
-                els.append(El("text", "term", cx + pad, cy, inner_w, th + 2, paras=[[Run(term, True, "ink")]], size=ts,
+                els.append(El("text", "term", cx + pad, cy, inner_w, th + 2, paras=[[Run(term, True, "ink", f"points.{i}.term")]], size=ts,
                               lh=1.15, font="display", align=align))
                 cy += th + ts * 0.5
-            els.append(El("text", "item", cx + pad, cy, inner_w, y + h - pad - cy, paras=[[Run(text, False, "mute" if term else "ink")]],
-                          size=xs, lh=1.4, align=align))
+            where = f"points.{i}.text" if kind == "cards" else f"takeaways.{i}"
+            els.append(El("text", "item", cx + pad, cy, inner_w, y + h - pad - cy,
+                          paras=[[Run(text, False, "mute" if term else "ink", where)]], size=xs, lh=1.4, align=align))
         return
 
     if kind in ("timeline_v", "timeline_h"):
-        items = [_point_runs(p, fmt) for p in pts]
+        items = [_point_runs(p, i, fmt) for i, p in enumerate(pts)]
         n = len(items)
         r = 28
         if kind == "timeline_v":
@@ -548,7 +551,7 @@ def _columns(els: list[El], s: dict, rects: tuple[tuple, tuple], t: dict, start:
     else:
         raise NoFit(("left", "right")[bad[0]] + "_items")
     panel_h = max(need) + 2 * pad + top + 8
-    for col, (x, y, w, h, *_) in zip(sides, rects, strict=True):
+    for side, col, (x, y, w, h, *_) in zip(("left", "right"), sides, rects, strict=True):
         if kind == "panel":
             els.append(El("rect", "panel", x, y, w, min(h, panel_h), fill="card", stroke="cardline", stroke_w=2, radius=22))
         else:
@@ -558,13 +561,14 @@ def _columns(els: list[El], s: dict, rects: tuple[tuple, tuple], t: dict, start:
         _, heights = measure(col, iw, ls, xs)
         if col["label"]:
             lab_h = text_height([[Run(col["label"], True)]], iw, ls, 1.2, "display")
-            els.append(El("text", "col_label", ix, cy, iw, lab_h + 2, paras=[[Run(col["label"], True, "accent")]],
+            els.append(El("text", "col_label", ix, cy, iw, lab_h + 2, paras=[[Run(col["label"], True, "accent", f"{side}.label")]],
                           size=ls, lh=1.2, font="display"))
             cy += lab_h + xs * 0.9
-        for item, hh in zip(col["items"], heights, strict=True):
+        for n, (item, hh) in enumerate(zip(col["items"], heights, strict=True)):
             d = xs * 0.32
             els.append(El("circle", "dot", ix + 2, cy + xs * 0.69 - d / 2, d, d, fill="accent"))
-            els.append(El("text", "item", ix + 40, cy, iw - 40, hh + 2, paras=[[Run(item, False, "ink")]], size=xs, lh=1.38))
+            els.append(El("text", "item", ix + 40, cy, iw - 40, hh + 2, paras=[[Run(item, False, "ink", f"{side}.items.{n}")]],
+                          size=xs, lh=1.38))
             cy += hh + xs * 0.75
 
 
@@ -592,13 +596,13 @@ def _compose_once(s: dict, deck: dict, index: int, theme: str, fmt: str, start:
         x, y, w, h, align, *_ = k
         bar_x = x + (w - 64) / 2 if align == "center" else (x + w - 64 if align == "right" else x)
         els.append(El("rect", "bar", bar_x, y - 18, 64, 5, fill="accent"))
-        els.append(_text("kicker", k, [[Run(s["kicker"], True, "accent")]], t["kicker"], 0, font="mono", lh=1.2,
+        els.append(_text("kicker", k, [[Run(s["kicker"], True, "accent", "kicker")]], t["kicker"], 0, font="mono", lh=1.2,
                          upper=True, track=0.16, field_name="kicker"))
 
     heading_base = {"title": t["title"], "section": t["section"]}.get(layout, t["heading"])
     hr = rect("heading")
     if hr and s["heading"]:
-        els.append(_text("heading", hr, [[Run(s["heading"], True, "ink")]], heading_base, start, font="display",
+        els.append(_text("heading", hr, [[Run(s["heading"], True, "ink", "heading")]], heading_base, start, font="display",
                          lh=1.08, field_name="heading"))
 
     lr = rect("lead")
@@ -609,20 +613,20 @@ def _compose_once(s: dict, deck: dict, index: int, theme: str, fmt: str, start:
             # Under a top aligned heading in the same column: follow the heading instead of waiting at the box's top.
             top = head.y + head.text_height() + head.size * 0.55
             lr = (lr[0], top, lr[2], lr[1] + lr[3] - top, *lr[4:])
-        els.append(_text("lead", lr, [[Run(s["lead"], False, "mute")]], base, start, lh=1.4, field_name="lead"))
+        els.append(_text("lead", lr, [[Run(s["lead"], False, "mute", "lead")]], base, start, lh=1.4, field_name="lead"))
 
     if layout == "stat":
-        els.append(_text("value", rect("value"), [[Run(s["stat"]["value"], True, "accent")]], t["value"], start,
+        els.append(_text("value", rect("value"), [[Run(s["stat"]["value"], True, "accent", "stat.value")]], t["value"], start,
                          font="display", lh=1.0, field_name="stat_value"))
-        els.append(_text("label", rect("label"), [[Run(s["stat"]["label"], False, "ink")]], t["label"], start, lh=1.35,
+        els.append(_text("label", rect("label"), [[Run(s["stat"]["label"], False, "ink", "stat.label")]], t["label"], start, lh=1.35,
                          field_name="stat_label", grow=True))
     if layout == "quote":
         q = rect("quote")
-        els.append(_text("quote", q, [[Run("“", True, "accent"), Run(s["quote"]["text"], False, "ink"),
+        els.append(_text("quote", q, [[Run("“", True, "accent"), Run(s["quote"]["text"], False, "ink", "quote.text"),
                                        Run("”", True, "accent")]], t["quote"], start, font="display", lh=1.22,
                          field_name="quote", grow=True))
         if s["quote"]["by"] and (b := rect("by")):
-            els.append(_text("by", b, [[Run(s["quote"]["by"], False, "mute")]], t["by"], 0, font="mono", lh=1.3,
+            els.append(_text("by", b, [[Run(s["quote"]["by"], False, "mute", "quote.by")]], t["by"], 0, font="mono", lh=1.3,
                              upper=True, track=0.08, field_name="by"))
     if layout == "two_column":
         _columns(els, s, (rect("left"), rect("right")), t, start)
@@ -636,11 +640,11 @@ def _compose_once(s: dict, deck: dict, index: int, theme: str, fmt: str, start:
             x, y, w, h, *_ = cr
             els.append(El("rect", "band", x, y, w, h, fill="band", radius=24))
             inner = (x + 60, y, w - 120, h, "left", "middle")
-            els.append(_text("closing", inner, [[Run(s["closing"], True, "bandink")]], t["closing"], start,
+            els.append(_text("closing", inner, [[Run(s["closing"], True, "bandink", "closing")]], t["closing"], start,
                              font="display", lh=1.15, field_name="closing"))
         else:
             base = t["closing_big"] if kind == "big" else t["closing"]
-            els.append(_text("closing", cr, [[Run(s["closing"], True, "ink")]], base, start, font="display", lh=1.12,
+            els.append(_text("closing", cr, [[Run(s["closing"], True, "ink", "closing")]], base, start, font="display", lh=1.12,
                              field_name="closing", grow=kind == "big"))
 
     if layout != "title":

backend/app/slides/render.py

@@ -1,10 +1,13 @@
 """A deck as HTML: one standalone page per slide (shown in the app in a sandboxed frame, scaled to fit) and one page
 with every slide (printed to PDF). Every word from the model is escaped; the markup is all ours."""
 
+import math
+
 from markupsafe import escape
 
-from app.slides.decor import Decor, Shape, build
-from app.slides.layout import Composed, El, compose
+from app.slides.content import field_limit
+from app.slides.decor import Decor, Shape, build, ring_path
+from app.slides.layout import Composed, El, Run, compose
 from app.slides.themes import FONTS, THEMES, H, Palette, W, theme_id
 
 FONT_LINK = ("https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;700&family=Inter:wght@400;500;700"
@@ -35,8 +38,8 @@ html,body{{margin:0;padding:0}}
 .dark .r-heading.l-title,.dark .r-value{{text-shadow:0 0 48px rgba(33,124,255,.45)}}
 .dark .r-marker{{box-shadow:0 0 36px rgba(33,124,255,.75)}}
 .dark .r-bar{{box-shadow:0 0 18px rgba(77,148,255,.8)}}
-.light .r-card,.light .r-panel{{box-shadow:0 18px 44px rgba(11,26,58,.08)}}
-.light .r-band{{box-shadow:0 18px 44px rgba(11,26,58,.18)}}
+.light .r-card,.light .r-panel{{box-shadow:0 18px 44px rgba(11,26,58,.14)}}
+.light .r-band{{box-shadow:0 18px 44px rgba(11,26,58,.26)}}
 """
 
 
@@ -44,14 +47,14 @@ def _style(**kw) -> str:
     return ";".join(f"{k.replace('_', '-')}:{v}" for k, v in kw.items() if v is not None)
 
 
-def _el(e: El, pal: Palette, layout: str) -> str:
+def _el(e: El, pal: Palette, layout: str, fmt: str) -> str:
     box = dict(left=f"{e.x:.1f}px", top=f"{e.y:.1f}px", width=f"{e.w:.1f}px", height=f"{e.h:.1f}px")
     if e.kind == "text":
         paras = []
         for i, p in enumerate(e.paras):
             runs = "".join(
-                f'<span style="color:{color(pal, r.color)}{";font-weight:700" if r.bold else ""}">{escape(r.text)}</span>'
-                for r in p)
+                f'<span{_editable(r, layout, fmt)} style="color:{color(pal, r.color)}{";font-weight:700" if r.bold else ""}">'
+                f'{escape(r.text)}</span>' for r in p)
             gap = f' style="margin-top:{e.gap:.1f}px"' if i and e.gap else ""
             paras.append(f"<p{gap}>{runs}</p>")
         css = _style(**box, font_size=f"{e.size}px", line_height=str(e.lh), font_family=_FAMILY[e.font],
@@ -72,6 +75,11 @@ def _el(e: El, pal: Palette, layout: str) -> str:
     return f'<div class="e r-{e.role}" style="{css}"></div>'
 
 
+def _editable(r: Run, layout: str, fmt: str) -> str:
+    """Where a run's text lives and how long it may be, for the page's editor (none on our own text: numbers, footers)."""
+    return f' data-f="{r.field}" data-max="{field_limit(layout, r.field, fmt)}"' if r.field else ""
+
+
 def _svg(d: Decor, pal: Palette, dark: bool, uid: str) -> str:
     defs, out = [], []
     for n, s in enumerate(d.shapes):
@@ -97,6 +105,16 @@ def _shape(s: Shape, pal: Palette, dark: bool, gid: str, defs: list[str]) -> str
                     f'<stop offset="1" stop-color="{lo}"/></radialGradient>')
         return (f'<circle cx="{s.cx:.0f}" cy="{s.cy:.0f}" r="{s.r:.0f}" fill="url(#{gid})"/>'
                 f'<circle cx="{s.cx:.0f}" cy="{s.cy:.0f}" r="{s.r:.0f}" fill="none" stroke="{rim}" stroke-width="3" opacity=".7"/>')
+    if s.kind == "band":
+        lo, hi = ring_shade(s)
+        defs.append(f'<linearGradient id="{gid}" gradientUnits="userSpaceOnUse" x1="{lo:.0f}" y1="0" x2="{hi:.0f}" y2="0">'
+                    + "".join(f'<stop offset="{o}" stop-color="{c}" stop-opacity="{a * s.opacity:.3f}"/>' for o, a in SHADE)
+                    + "</linearGradient>")
+        pts = ring_path(s) + ring_path(s, s.inner)[::-1]
+        return f'<path d="M{_pts(pts)}Z" fill="url(#{gid})"/>'
+    if s.kind == "ring" and s.arc:
+        return (f'<path d="M{_pts(ring_path(s))}" fill="none" stroke="{c}" stroke-width="{s.width}" '
+                f'stroke-linecap="round" opacity="{s.opacity}"/>')
     if s.kind == "ring":
         return (f'<ellipse cx="{s.cx:.0f}" cy="{s.cy:.0f}" rx="{s.rx:.0f}" ry="{s.ry:.0f}" fill="none" stroke="{c}" '
                 f'stroke-width="{s.width}" opacity="{s.opacity}" transform="rotate({s.rot:.1f} {s.cx:.0f} {s.cy:.0f})"/>')
@@ -109,16 +127,30 @@ def _shape(s: Shape, pal: Palette, dark: bool, gid: str, defs: list[str]) -> str
     return ""
 
 
+# How brightly a ringed planet's band shows across its width, left to right: lit from the upper left, as the planet is.
+SHADE = ((0, 1.0), (0.45, 0.8), (1, 0.3))
+
+
+def ring_shade(s: Shape) -> tuple[float, float]:
+    """The band's left and right extent on the slide, which SHADE runs across."""
+    half = math.hypot(s.rx * math.cos(math.radians(s.rot)), s.ry * math.sin(math.radians(s.rot)))
+    return s.cx - half, s.cx + half
+
+
+def _pts(pts: list[tuple[float, float]]) -> str:
+    return "L".join(f"{x:.1f} {y:.1f}" for x, y in pts)
+
+
 def planet_colors(pal: Palette, dark: bool) -> tuple[str, str, str]:
     """Lit side, dark side and rim of a planet."""
     return ("#1d4fb3", "#020713", pal.accent) if dark else ("#5d9bff", pal.accent2, pal.accent)
 
 
-def slide_body(c: Composed, deck: dict, index: int, theme: str) -> str:
+def slide_body(c: Composed, deck: dict, index: int, theme: str, fmt: str) -> str:
     t = THEMES[theme]
     s = c.slide
     d = build(theme, s["layout"], s["variant"], c.seed, index)
-    els = "".join(_el(e, t.pal, s["layout"]) for e in c.elements)
+    els = "".join(_el(e, t.pal, s["layout"], fmt) for e in c.elements)
     cls = f"slide {'dark' if t.dark else 'light'} l-{s['layout']} v-{s['variant']}"
     return f'<div class="{cls}" style="background:{t.pal.bg1}">{_svg(d, t.pal, t.dark, f"s{index}g")}{els}</div>'
 
@@ -131,14 +163,14 @@ def _page(body: str, extra_css: str = "") -> str:
 def slide_html(deck: dict, index: int, theme: str, fmt: str, seed: int) -> str:
     """One slide as a standalone page."""
     theme = theme_id(theme)
-    return _page(slide_body(compose(deck, index, theme, fmt, seed), deck, index, theme),
+    return _page(slide_body(compose(deck, index, theme, fmt, seed), deck, index, theme, fmt),
                  f"body{{background:{THEMES[theme].pal.bg1}}}")
 
 
 def deck_print_html(deck: dict, theme: str, fmt: str, seed: int, script: str = "") -> str:
     """Every slide on one page, one per printed page."""
     theme = theme_id(theme)
-    body = "".join(slide_body(compose(deck, i, theme, fmt, seed), deck, i, theme) for i in range(len(deck["slides"])))
+    body = "".join(slide_body(compose(deck, i, theme, fmt, seed), deck, i, theme, fmt) for i in range(len(deck["slides"])))
     css = (f"@page{{size:{W}px {H}px;margin:0}}body{{background:{THEMES[theme].pal.bg1}}}"
            ".slide{break-after:page;page-break-after:always}.slide:last-child{break-after:auto;page-break-after:auto}"
            "*{-webkit-print-color-adjust:exact;print-color-adjust:exact}")

backend/app/slides/themes.py

@@ -31,12 +31,12 @@ class Theme:
 
 
 THEMES: dict[str, Theme] = {t.id: t for t in (
-    Theme("dark-space", "Dark space", True, Palette(
+    Theme("dark-space", "Night stellar", True, Palette(
         bg1="#000000", bg2="#0a1736", ink="#ffffff", mute="#b4bccc", accent="#4d94ff", accent2="#217cff",
         card="#0b1326", cardline="#1f3156", line="#26385c", band="#0e1c3d", bandink="#ffffff", star="#ffffff")),
-    Theme("light-space", "Light space", False, Palette(
-        bg1="#e9eef9", bg2="#ffffff", ink="#0b1a3a", mute="#4b5a7a", accent="#217cff", accent2="#0b3d91",
-        card="#ffffff", cardline="#d3dcef", line="#c6d1ea", band="#0b1a3a", bandink="#ffffff", star="#0b1a3a")),
+    Theme("light-space", "Moon light", False, Palette(
+        bg1="#c3cddf", bg2="#dfe5ef", ink="#0b1a3a", mute="#36435f", accent="#1858c4", accent2="#0b3d91",
+        card="#e9eef6", cardline="#b3bfd5", line="#a7b4cc", band="#0b1a3a", bandink="#ffffff", star="#0b1a3a")),
 )}
 DEFAULT_THEME = "dark-space"
 

backend/tests/test_slides.py

@@ -436,3 +436,155 @@ def test_the_closing_is_tried_again_and_a_repeated_heading_goes(client, auth, ru
     assert len(tries) == 2 and slides[-1]["closing"] == "Price the work like it matters."
     headings = [s["heading"] for s in slides]
     assert len(headings) == len(set(headings)) and 6 <= len(slides) <= 8
+
+
+@pytest.mark.parametrize("key", [("title", "a"), ("title", "c"), ("section", "a"), ("section", "b")])
+def test_light_planets_sit_on_their_ring(key):
+    """A planet beside rings is drawn on one of them, tilt included, whatever the seed."""
+    import math
+
+    from app.slides.decor import build
+
+    for seed in range(40):
+        shapes = build("light-space", *key, seed, 0).shapes
+        rings = [s for s in shapes if s.kind == "ring"]
+        for p in (s for s in shapes if s.kind == "planet"):
+            def off(r, p=p):  # how far the planet's centre is from the ring's line, in units of the ring
+                rot = math.radians(-r.rot)
+                dx, dy = p.cx - r.cx, p.cy - r.cy
+                x, y = dx * math.cos(rot) - dy * math.sin(rot), dx * math.sin(rot) + dy * math.cos(rot)
+                return abs(math.hypot(x / r.rx, y / r.ry) - 1)
+            assert min(off(r) for r in rings) < 1e-6, (key, seed)
+
+
+@pytest.mark.parametrize("key", [("title", "b"), ("points", "a")])
+def test_dark_rings_wrap_round_their_planet(key):
+    """A ringed planet's far half is drawn before the planet (hidden behind it) and the near half after (in front)."""
+    from app.slides.decor import FAR, NEAR, build
+
+    for seed in range(10):
+        shapes = build("dark-space", *key, seed, 0).shapes
+        at = next(i for i, s in enumerate(shapes) if s.kind == "planet")
+        rings = [(i, s) for i, s in enumerate(shapes) if s.kind in ("ring", "band")]
+        assert rings and all(s.arc for _, s in rings)
+        assert all(i < at for i, s in rings if s.arc == FAR) and all(i > at for i, s in rings if s.arc == NEAR)
+        assert all(s.rx * s.inner > shapes[at].r for _, s in rings if s.kind == "band")  # the band clears the planet
+
+
+@pytest.mark.parametrize("theme", ["dark-space", "light-space"])
+def test_every_variant_marks_its_editable_text(theme):
+    """Every piece of a slide's own text is drawn in a span the editor can find, with the field's real limit; numbers
+    and footers are not editable."""
+    from app.slides.content import field_limit
+
+    for fmt in ("detailed", "presenter"):
+        for layout, variants in GEOMETRY[theme].items():
+            for v in variants:
+                deck = clamp_deck({"title": "T", "slides": [{"layout": layout, **FULL[layout]}]}, fmt)
+                deck["slides"][0]["variant"] = v
+                html = slide_html(deck, 0, theme, fmt, 3)
+                found = dict(re.findall(r'data-f="([^"]+)" data-max="(\d+)"', html))
+                assert "heading" in found or layout in ("quote", "closing"), (layout, v)
+                assert all(int(n) == field_limit(layout, f, fmt) for f, n in found.items())
+                s = deck["slides"][0]
+                want = {"points": [f"points.{i}.text" for i in range(len(s["points"]))], "stat": ["stat.value", "stat.label"],
+                        "quote": ["quote.text", "quote.by"], "two_column": ["left.label", "right.items.1"],
+                        "closing": [f"takeaways.{i}" for i in range(len(s["takeaways"]))] + ["closing"]}.get(layout, [])
+                assert set(want) <= set(found), (fmt, layout, v, found)
+                assert not any(f.startswith("footer") for f in found)
+
+
+def _ready_deck(client, auth, run_jobs, monkeypatch, llm):  # noqa: F811
+    pricing, nb = _notebook_with_pricing(client, auth, run_jobs)
+    _fake_many(monkeypatch, pricing["path"], {})
+    llm["OutlineDeck"] = _outline(5)
+    llm["WriteClosing"] = CLOSING
+    art = client.post("/api/artifacts/generate", json={"type": "slide_deck", "notebook_id": nb["id"],
+                      "document_ids": [pricing["id"]], "deck_length": "short"}, headers=auth).json()
+    run_jobs()
+    return client.get(f"/api/artifacts/{art['id']}", headers=auth).json()
+
+
+def test_edited_deck_is_saved_fitted_and_downloaded(client, auth, run_jobs, feed, llm, monkeypatch, no_chrome):  # noqa: F811
+    done = _ready_deck(client, auth, run_jobs, monkeypatch, llm)
+    slides = copy.deepcopy(done["content"]["deck"]["slides"])
+    assert len(done["content"]["slide_slots"]) == len(slides) and "heading" in done["content"]["slide_slots"][0]
+    pi = next(i for i, s in enumerate(slides) if s["points"] and s["layout"] == "points")
+    slides[0]["heading"] = "A brand new title"
+    slides[0]["notes"] = "Say hello first."
+    slides[pi]["points"][0]["text"] = "Edited point " + "very long " * 60
+    slides[-1]["takeaways"][1] = "  An <b>edited</b> takeaway  "
+    url = f"/api/artifacts/{done['id']}/deck"
+    saved = client.put(url, json={"slides": slides}, headers=auth)
+    assert saved.status_code == 200, saved.text
+    after = saved.json()["content"]
+    s = after["deck"]["slides"]
+    assert s[0]["heading"] == "A brand new title" and s[0]["notes"] == "Say hello first."
+    assert s[pi]["points"][0]["text"].startswith("Edited point") and len(s[pi]["points"][0]["text"]) <= LIMITS["detailed"]["text"]
+    assert s[-1]["takeaways"][1] == "An edited takeaway"  # plain text only
+    before = done["content"]["deck"]["slides"]
+    assert [(x["layout"], x["variant"]) for x in s] == [(x["layout"], x["variant"]) for x in before]  # designs kept
+    assert "A brand new title" in after["slides_html"][0]
+    pptx = client.get(f"/api/artifacts/{done['id']}/slides.pptx", headers=auth)
+    texts = [sh.text_frame.text for sh in Presentation(io.BytesIO(pptx.content)).slides[0].shapes if sh.has_text_frame]
+    assert any("A brand new title" in t for t in texts)
+
+    assert client.put(url, json={"slides": []}, headers=auth).status_code == 422
+    assert client.put(url, json={"slides": [{"layout": "points", "heading": ""}]}, headers=auth).status_code == 400
+    assert client.put(url, json={"slides": [slides[0]] * 31}, headers=auth).status_code == 400
+    kept = client.get(f"/api/artifacts/{done['id']}", headers=auth).json()["content"]["deck"]["slides"]
+    assert kept[0]["heading"] == "A brand new title" and len(kept) == len(slides)  # a refused save changes nothing
+
+
+def test_slides_can_be_added_removed_moved_and_change_layout(client, auth, run_jobs, feed, llm, monkeypatch, no_chrome):  # noqa: F811
+    done = _ready_deck(client, auth, run_jobs, monkeypatch, llm)
+    slides = copy.deepcopy(done["content"]["deck"]["slides"])
+    n = len(slides)
+    pi = next(i for i, s in enumerate(slides) if s["layout"] == "points")
+    edited = copy.deepcopy(slides)
+    edited[pi]["points"].append({"term": "", "text": "A point added by hand"})  # a text box added
+    edited[pi]["lead"] = ""  # and one removed
+    stat = {"layout": "stat", "variant": "", "heading": "A new stat slide", "stat": {"value": "42%", "label": "Readers who stayed"}}
+    edited.insert(1, stat)  # a slide added
+    edited.insert(2, copy.deepcopy(edited[0]) | {"variant": ""})  # a slide duplicated
+    del edited[-2]  # a slide removed
+    edited[-1], edited[-2] = edited[-2], edited[-1]  # two moved
+    url = f"/api/artifacts/{done['id']}"
+    prev = client.post(f"{url}/deck-preview", json={"slides": edited}, headers=auth)
+    assert prev.status_code == 200, prev.text
+    got = prev.json()
+    out = got["slides"]
+    assert len(out) == n + 1 and len(got["slides_html"]) == n + 1 and len(got["slide_slots"]) == n + 1
+    assert out[1]["layout"] == "stat" and out[1]["variant"] and "42%" in got["slides_html"][1]
+    assert "value" in got["slide_slots"][1] and "label" in got["slide_slots"][1]
+    moved = next(s for s in out if s["heading"] == slides[pi]["heading"])
+    assert moved["points"][-1]["text"] == "A point added by hand" and moved["lead"] == ""
+    pairs = [(x["layout"], x["variant"]) for x in out]
+    assert all(a != b for a, b in zip(pairs, pairs[1:], strict=False))  # no two alike in a row
+    assert client.get(url, headers=auth).json()["content"]["deck"]["slides"] == done["content"]["deck"]["slides"]  # preview saves nothing
+
+    # a layout change: the points slide becomes a quote slide
+    q = next(i for i, s in enumerate(edited) if s["layout"] == "points")
+    edited[q] = {**edited[q], "layout": "quote", "variant": "", "quote": {"text": "Price the work like it matters.", "by": "A writer"}}
+    saved = client.put(f"{url}/deck", json={"slides": edited}, headers=auth).json()["content"]
+    assert saved["deck"]["slides"][q]["layout"] == "quote" and saved["deck"]["slides"][q]["variant"]
+    assert len(saved["deck"]["slides"]) == n + 1
+    pptx = client.get(f"{url}/slides.pptx", headers=auth)
+    assert len(Presentation(io.BytesIO(pptx.content)).slides) == n + 1
+
+
+def test_fill_variants_keeps_good_variants_and_fixes_the_rest():
+    from app.slides.build import fill_variants
+
+    deck = clamp_deck({"title": "T", "slides": [{"layout": lay, **FULL[lay]} for lay in ("title", "points", "points", "stat", "closing")]},
+                      "detailed")
+    assign_variants(deck["slides"], "dark-space", seed=3)
+    before = [s["variant"] for s in deck["slides"]]
+    fill_variants(deck["slides"], "dark-space", 3)
+    assert [s["variant"] for s in deck["slides"]] == before  # nothing to fix: nothing changes
+    deck["slides"][3]["variant"] = ""  # new
+    deck["slides"][2]["variant"] = deck["slides"][1]["variant"]  # the same as the slide before it
+    fill_variants(deck["slides"], "dark-space", 3)
+    assert deck["slides"][3]["variant"] in VARIANTS["stat"]
+    assert deck["slides"][2]["variant"] != deck["slides"][1]["variant"]
+    assert [s["variant"] for s in deck["slides"]][:2] == before[:2] and deck["slides"][4]["variant"] == before[4]

frontend/src/api/endpoints.ts

@@ -161,6 +161,31 @@ export const artifactsApi = {
   retry: (id: string) => post<Artifact>(`/api/artifacts/${id}/retry`),
   /** A slide deck as a PDF (exactly as shown) or an editable PowerPoint. */
   slidesFile: (id: string, ext: "pdf" | "pptx") => apiBlob(`/api/artifacts/${id}/slides.${ext}`),
+  /** A slide deck's slides as the editor has them, drawn without saving (after a slide or a text box is added,
+   * removed, moved or changed to another layout). Returns them as they will be kept. */
+  previewDeck: (id: string, slides: EditSlide[]) =>
+    post<{ slides: EditSlide[]; slides_html: string[]; slide_slots: string[][] }>(`/api/artifacts/${id}/deck-preview`, { slides }),
+  /** The editor's slides kept: the server fits the deck again and returns it. */
+  saveDeck: (id: string, slides: EditSlide[]) => put<Artifact>(`/api/artifacts/${id}/deck`, { slides }),
+};
+
+/** One slide in the stored shape (backend app/slides/content.py, empty_slide). */
+export type EditSlide = {
+  layout: string;
+  variant: string;
+  kicker: string;
+  heading: string;
+  lead: string;
+  points: { term: string; text: string }[];
+  left: { label: string; items: string[] };
+  right: { label: string; items: string[] };
+  stat: { value: string; label: string };
+  quote: { text: string; by: string };
+  takeaways: string[];
+  closing: string;
+  notes: string;
+  sources: { title?: string; path: string; line_start: number; line_end: number }[];
+  shrink?: number;
 };
 
 export const jobsApi = {

frontend/src/components/SlideDeck.tsx

@@ -1,6 +1,7 @@
 import { useCallback, useEffect, useLayoutEffect, useRef, useState, type CSSProperties, type ReactNode } from "react";
 import { createPortal } from "react-dom";
-import { artifactsApi, type GenerateBody } from "../api/endpoints";
+import { artifactsApi, type EditSlide, type GenerateBody } from "../api/endpoints";
+import { addActions, convert, type DeckFmt, LAYOUTS, MAX_SLIDES, newSlide, problem, removable, removeField, setText } from "./slideDeckEdit";
 import type { Artifact, ChatSummary } from "../api/types";
 import { Dropdown } from "./Dropdown";
 import { useJob } from "../hooks/useJob";
@@ -11,8 +12,8 @@ import { ConfirmDeleteModal, errorMessage, formatDate, JobProgress, Modal } from
 /** The two deck themes. Their slides are laid out on the server (backend/app/slides); the thumbnails are rendered from
  * them (backend/scripts/render_slide_thumbnails.py). */
 export const SLIDE_THEMES = [
-  { id: "dark-space", name: "Dark space", blurb: "Night sky, planets and a blue glow" },
-  { id: "light-space", name: "Light space", blurb: "Daylight sky, orbits and constellations" },
+  { id: "dark-space", name: "Night stellar", blurb: "Night sky, planets and a blue glow" },
+  { id: "light-space", name: "Moon light", blurb: "Moonlit sky, orbits and constellations" },
 ] as const;
 
 const FORMATS = [
@@ -108,16 +109,203 @@ export function SlideDeckDialog({ notebookId, notebookTitle, chats, currentChatI
   );
 }
 
-/** One slide (HTML from our own layout, every word escaped) in a sandboxed frame, scaled to fit the box it is given. */
-export function SlideFrame({ html, title, fit = "width", hidden = false }: {
+/** The editor that runs inside an editable slide's frame. The frame is sandboxed with allow-scripts but not
+ * allow-same-origin, so this script (and anything else in the slide) can never reach this page: the two only talk by
+ * postMessage. The page says when edit mode is on and which text boxes may be removed ({type: "sd-mode", editing,
+ * removable}); the frame reports each edit ({type: "sd-edit", field, text}), a box's remove button
+ * ({type: "sd-remove", field}) and that it is ready ({type: "sd-ready"}). Self-contained: it is sent as source.
+ *
+ * In edit mode the spans the server marks with data-f (and data-max) are editable, single line, plain text, no longer
+ * than the field holds; every text box is framed (dashed, solid on hover, lit while typing), and a click anywhere in a
+ * box types into it. Sizes are slide pixels: the slide is drawn 1920 wide and scaled down. */
+function slideEditor() {
+  const css = `.sd-box{outline:3px dashed rgba(33,124,255,.8);outline-offset:10px;border-radius:6px;cursor:text;
+background-color:rgba(33,124,255,.07);transition:outline-color .12s,box-shadow .12s}
+.sd-box:hover{outline-style:solid}
+.sd-box:focus-within{outline:4px solid #217cff;box-shadow:0 0 0 14px rgba(33,124,255,.22)}
+[data-f]{outline:none;caret-color:#217cff}
+[data-f]:empty{display:inline-block;min-width:1.2em;min-height:1em;background:rgba(255,93,93,.25)}
+.sd-x{position:absolute;top:-34px;right:-34px;z-index:2;width:48px;height:48px;padding:0;border:3px solid #fff;border-radius:50%;
+background:#e5484d;color:#fff;font:700 30px/1 Inter,system-ui,sans-serif;cursor:pointer;opacity:.45;transition:opacity .12s;
+box-shadow:0 4px 14px rgba(0,0,0,.35)}
+.sd-box:hover .sd-x,.sd-box:focus-within .sd-x{opacity:1}
+.sd-x:hover{background:#c9353a}`;
+  const spans = Array.from(document.querySelectorAll<HTMLElement>("[data-f]"));
+  const boxes = Array.from(new Set(spans.map((el) => el.closest<HTMLElement>(".e")).filter((b): b is HTMLElement => !!b)));
+  const style = document.createElement("style");
+  style.textContent = css;
+  let on = false;
+  const field = (t: EventTarget | null) => {
+    const el = t as HTMLElement | null;
+    return on && el && el.dataset && el.dataset.f ? el : null;
+  };
+  const room = (el: HTMLElement) => {
+    const sel = document.getSelection();
+    const picked = sel && sel.rangeCount && el.contains(sel.anchorNode) ? sel.toString().length : 0;
+    return Number(el.dataset.max || 9999) - ((el.textContent || "").length - picked);
+  };
+  let removers: HTMLElement[] = [];
+  const setMode = (editing: boolean, removable: string[]) => {
+    on = editing;
+    removers.forEach((x) => x.remove());
+    removers = [];
+    for (const el of spans) {
+      if (!editing) {
+        el.removeAttribute("contenteditable");
+        continue;
+      }
+      try {
+        el.contentEditable = "plaintext-only";
+      } catch {
+        el.contentEditable = "true"; // no plaintext-only: paste is made plain below
+      }
+      el.spellcheck = true;
+    }
+    boxes.forEach((b) => b.classList.toggle("sd-box", editing));
+    // One remove button per box that may go: for a point's box, the point itself (its text) before its title.
+    if (editing) {
+      for (const b of boxes) {
+        const fields = Array.from(b.querySelectorAll<HTMLElement>("[data-f]")).map((el) => el.dataset.f || "");
+        const f = fields.find((x) => x.endsWith(".text") && removable.includes(x)) || fields.find((x) => removable.includes(x));
+        if (!f) continue;
+        const x = document.createElement("button");
+        x.className = "sd-x";
+        x.type = "button";
+        x.textContent = "×";
+        x.title = "Remove this text box";
+        x.setAttribute("aria-label", "Remove this text box");
+        x.contentEditable = "false";
+        x.dataset.remove = f;
+        b.appendChild(x);
+        removers.push(x);
+      }
+    }
+    if (editing) document.head.appendChild(style);
+    else {
+      style.remove();
+      const sel = document.getSelection();
+      if (sel) sel.removeAllRanges();
+    }
+  };
+  // A click in a box but not on its text (the box is often larger than the words): type at the end of the nearest text.
+  document.addEventListener("mousedown", (e) => {
+    const t = e.target as HTMLElement | null;
+    if (!on || !t || field(t) || !t.closest) return;
+    const x = t.closest<HTMLElement>(".sd-x");
+    if (x) {
+      e.preventDefault();
+      parent.postMessage({ type: "sd-remove", field: x.dataset.remove }, "*");
+      return;
+    }
+    const box = t.closest<HTMLElement>(".sd-box");
+    if (!box) return;
+    let near: HTMLElement | null = null;
+    let best = Infinity;
+    box.querySelectorAll<HTMLElement>("[data-f]").forEach((el) => {
+      const r = el.getBoundingClientRect();
+      const d = Math.hypot(Math.max(r.left - e.clientX, 0, e.clientX - r.right), Math.max(r.top - e.clientY, 0, e.clientY - r.bottom));
+      if (d < best) [near, best] = [el, d];
+    });
+    if (!near) return;
+    e.preventDefault();
+    const el: HTMLElement = near;
+    el.focus();
+    const range = document.createRange();
+    range.selectNodeContents(el);
+    range.collapse(false);
+    const sel = document.getSelection();
+    if (sel) {
+      sel.removeAllRanges();
+      sel.addRange(range);
+    }
+  });
+  document.addEventListener("beforeinput", (e) => {
+    const el = field(e.target);
+    if (!el) return;
+    if (e.inputType === "insertParagraph" || e.inputType === "insertLineBreak") {
+      e.preventDefault(); // one line: Enter is done
+      el.blur();
+    } else if (e.inputType === "insertText" && e.data && e.data.length > room(el)) {
+      e.preventDefault();
+    }
+  });
+  document.addEventListener("paste", (e) => {
+    const el = field(e.target);
+    if (!el) return;
+    e.preventDefault();
+    const text = ((e.clipboardData && e.clipboardData.getData("text/plain")) || "").replace(/\s+/g, " ").slice(0, Math.max(room(el), 0));
+    if (text) document.execCommand("insertText", false, text);
+  });
+  document.addEventListener("drop", (e) => {
+    if (field(e.target)) e.preventDefault(); // dragged text could bring markup or overflow
+  });
+  document.addEventListener("input", (e) => {
+    const el = field(e.target);
+    if (el) parent.postMessage({ type: "sd-edit", field: el.dataset.f, text: el.textContent || "" }, "*");
+  });
+  document.addEventListener("keydown", (e) => {
+    const el = field(e.target);
+    if (el && e.key === "Escape") el.blur();
+  });
+  window.addEventListener("message", (e) => {
+    if (e.source === parent && e.data && e.data.type === "sd-mode") {
+      setMode(!!e.data.editing, Array.isArray(e.data.removable) ? e.data.removable : []);
+    }
+  });
+  parent.postMessage({ type: "sd-ready" }, "*");
+}
+
+const EDITOR_TAG = `<script>(${slideEditor.toString()})()</script>`;
+
+/** One slide (HTML from our own layout, every word escaped) in a sandboxed frame, scaled to fit the box it is given.
+ * With `onEdit` the frame also runs the slide editor (still isolated from this page: an opaque origin), and while
+ * `editing` its text is edited in place. */
+export function SlideFrame({ html, title, fit = "width", hidden = false, editing = false, onEdit, removable, onRemove }: {
   html: string;
   title: string;
   /** "width": as wide as the box, 16:9. "contain": as large as fits in the box both ways (presenting). */
   fit?: "width" | "contain";
   hidden?: boolean;
+  editing?: boolean;
+  /** Text was edited: where it lives on the slide ("heading", "points.2.text") and what it says now. */
+  onEdit?: (field: string, text: string) => void;
+  /** The text boxes that get a remove button in edit mode, and what a click on one does. */
+  removable?: string[];
+  onRemove?: (field: string) => void;
 }) {
   const box = useRef<HTMLDivElement>(null);
+  const frame = useRef<HTMLIFrameElement>(null);
   const [scale, setScale] = useState(0.2);
+  const editRef = useRef(onEdit);
+  editRef.current = onEdit;
+  const editingRef = useRef(editing);
+  editingRef.current = editing;
+  const removeRef = useRef(onRemove);
+  removeRef.current = onRemove;
+  const removableKey = (removable ?? []).join(",");
+  const removableRef = useRef(removable ?? []);
+  removableRef.current = removable ?? [];
+  const withEditor = !!onEdit;
+  const doc = withEditor ? html.replace("</body>", `${EDITOR_TAG}</body>`) : html;
+  const tell = (on: boolean) =>
+    frame.current?.contentWindow?.postMessage({ type: "sd-mode", editing: on, removable: removableRef.current }, "*");
+  useEffect(() => {
+    if (!withEditor) return;
+    const onMessage = (e: MessageEvent) => {
+      if (e.source !== frame.current?.contentWindow || !e.data || typeof e.data !== "object") return;
+      if (e.data.type === "sd-ready") tell(editingRef.current); // loaded (again): in the mode the page is in
+      else if (e.data.type === "sd-edit" && typeof e.data.field === "string" && typeof e.data.text === "string") {
+        if (editingRef.current) editRef.current?.(e.data.field, e.data.text);
+      } else if (e.data.type === "sd-remove" && typeof e.data.field === "string" && removableRef.current.includes(e.data.field)) {
+        if (editingRef.current) removeRef.current?.(e.data.field);
+      }
+    };
+    window.addEventListener("message", onMessage);
+    return () => window.removeEventListener("message", onMessage);
+  }, [withEditor]);
+  useEffect(() => {
+    if (withEditor) tell(editing);
+  }, [editing, withEditor, removableKey]);
   useEffect(() => {
     const el = box.current;
     if (!el) return;
@@ -132,9 +320,10 @@ export function SlideFrame({ html, title, fit = "width", hidden = false }: {
     return () => ro.disconnect();
   }, [fit]);
   return (
-    <div ref={box} className={`sd-frame sd-frame-${fit}`} style={hidden ? { visibility: "hidden" } : undefined} aria-hidden={hidden}>
-      <iframe title={title} srcDoc={html} sandbox="" tabIndex={-1} width={SLIDE_W} height={SLIDE_H}
-              style={{ transform: `translate(-50%, -50%) scale(${scale})` }} />
+    <div ref={box} className={`sd-frame sd-frame-${fit}${editing ? " sd-frame-edit" : ""}`}
+         style={hidden ? { visibility: "hidden" } : undefined} aria-hidden={hidden}>
+      <iframe ref={frame} title={title} srcDoc={doc} sandbox={withEditor ? "allow-scripts" : ""} tabIndex={editing ? undefined : -1}
+              width={SLIDE_W} height={SLIDE_H} style={{ transform: `translate(-50%, -50%) scale(${scale})` }} />
     </div>
   );
 }
@@ -279,8 +468,9 @@ function FloatingMenu({ menu, children }: { menu: ReturnType<typeof useMenu>; ch
   );
 }
 
-/** Saves the deck as a PDF (exactly as shown) or an editable PowerPoint, drawn by the server. */
-function useDeckDownload(artifact: Artifact) {
+/** Saves the deck as a PDF (exactly as shown) or an editable PowerPoint, drawn by the server. `prepare` runs first
+ * (the viewer saves unsaved edits, so the file has them) and stops the download when it returns false. */
+function useDeckDownload(artifact: Artifact, prepare?: () => Promise<boolean>) {
   const [busy, setBusy] = useState<"pdf" | "pptx" | null>(null);
   const [error, setError] = useState<string | null>(null);
   const name = deckTitle(artifact).replace(/[^\w\- ]+/g, "").trim().slice(0, 80) || "Slide deck";
@@ -288,6 +478,7 @@ function useDeckDownload(artifact: Artifact) {
     setBusy(ext);
     setError(null);
     try {
+      if (prepare && !(await prepare())) return;
       const blob = await artifactsApi.slidesFile(artifact.id, ext);
       const url = URL.createObjectURL(blob);
       const a = document.createElement("a");
@@ -322,9 +513,9 @@ function ago(iso: string | null): string {
 }
 
 /** Download, in the popup's header: a menu of PDF or PowerPoint. */
-function DownloadMenu({ artifact }: { artifact: Artifact }) {
+function DownloadMenu({ artifact, prepare }: { artifact: Artifact; prepare?: () => Promise<boolean> }) {
   const menu = useMenu();
-  const dl = useDeckDownload(artifact);
+  const dl = useDeckDownload(artifact, prepare);
   return (
     <div className="sd-menu-wrap" ref={menu.ref}>
       <button type="button" className="sd-icon-btn" aria-haspopup="menu" aria-expanded={menu.open} disabled={dl.busy !== null}
@@ -349,8 +540,9 @@ function DownloadMenu({ artifact }: { artifact: Artifact }) {
 
 /** Everything a deck can do, behind its three dots (the row's and the popup's): rename, download, present, speaker
  * notes (in the popup) and delete (asks once more first). */
-function DeckMenu({ artifact, onRename, onPresent, onDelete, notes, onNotes }: {
+function DeckMenu({ artifact, onRename, onPresent, onDelete, notes, onNotes, prepare }: {
   artifact: Artifact;
+  prepare?: () => Promise<boolean>;
   onRename?: () => void;
   onPresent: () => void;
   onDelete: () => Promise<void>;
@@ -358,7 +550,7 @@ function DeckMenu({ artifact, onRename, onPresent, onDelete, notes, onNotes }: {
   onNotes?: () => void;
 }) {
   const menu = useMenu();
-  const dl = useDeckDownload(artifact);
+  const dl = useDeckDownload(artifact, prepare);
   const [confirming, setConfirming] = useState(false);
   const pick = (fn: () => void) => () => {
     menu.setOpen(false);
@@ -414,21 +606,207 @@ const PencilIcon = () => (
   </SvgIcon>
 );
 
-/** The deck in a popup: its actions along the top (present, a larger preview, download, more) and every slide below,
- * one after another. A click on a slide presents from it. */
-export function SlideDeckViewer({ artifact, onClose, onDelete }: {
+const ArrowUpIcon = () => <SvgIcon><path d="M12 19V5M6 11l6-6 6 6" /></SvgIcon>;
+const ArrowDownIcon = () => <SvgIcon><path d="M12 5v14M6 13l6 6 6-6" /></SvgIcon>;
+const DuplicateIcon = () => (
+  <SvgIcon>
+    <rect x="8" y="8" width="12" height="12" rx="2" />
+    <path d="M16 8V6a2 2 0 0 0-2-2H6a2 2 0 0 0-2 2v8a2 2 0 0 0 2 2h2" />
+  </SvgIcon>
+);
+
+/** The working copy edit mode changes: the slides as the editor has them, drawn, and what each slide's design has a
+ * place for. Typing changes the slides only (the frame already shows it); anything else is drawn again by the server. */
+type Draft = { slides: EditSlide[]; pages: string[]; slots: string[][] };
+
+function draftOf(artifact: Artifact): Draft {
+  const c = artifact.content;
+  return {
+    slides: JSON.parse(JSON.stringify(Array.isArray(c.deck?.slides) ? c.deck.slides : [])) as EditSlide[],
+    pages: Array.isArray(c.slides_html) ? (c.slides_html as string[]) : [],
+    slots: Array.isArray(c.slide_slots) ? (c.slide_slots as string[][]) : [],
+  };
+}
+
+/** One slide's controls in edit mode: its layout, the text boxes it can gain, and moving, duplicating or deleting it. */
+function SlideTools({ k, count, slide, slots, fmt, busy, onChange, onMove, onDuplicate, onDelete }: {
+  k: number;
+  count: number;
+  slide: EditSlide;
+  slots: string[];
+  fmt: DeckFmt;
+  busy: boolean;
+  onChange: (next: EditSlide) => void;
+  onMove: (by: -1 | 1) => void;
+  onDuplicate: () => void;
+  onDelete: () => void;
+}) {
+  return (
+    <div className="sd-tools" role="toolbar" aria-label={`Slide ${k + 1}`}>
+      <span className="sd-tools-no">Slide {k + 1}</span>
+      <label className="sd-tools-layout">
+        <span className="sr-only">Layout of slide {k + 1}</span>
+        <select className="input" value={slide.layout} disabled={busy} onChange={(e) => onChange(convert(slide, e.target.value, fmt))}>
+          {LAYOUTS.map((l) => <option key={l.id} value={l.id}>{l.name}</option>)}
+        </select>
+      </label>
+      {addActions(slide, slots, fmt).map((a) => (
+        <button key={a.id} type="button" className="sd-tool" disabled={busy} onClick={() => onChange(a.apply(slide))}>+ {a.label}</button>
+      ))}
+      <span className="sd-tools-gap" />
+      <button type="button" className="sd-icon-btn sd-tool-icon" title="Move up" aria-label={`Move slide ${k + 1} up`}
+              disabled={busy || k === 0} onClick={() => onMove(-1)}><ArrowUpIcon /></button>
+      <button type="button" className="sd-icon-btn sd-tool-icon" title="Move down" aria-label={`Move slide ${k + 1} down`}
+              disabled={busy || k === count - 1} onClick={() => onMove(1)}><ArrowDownIcon /></button>
+      <button type="button" className="sd-icon-btn sd-tool-icon" title="Duplicate slide" aria-label={`Duplicate slide ${k + 1}`}
+              disabled={busy || count >= MAX_SLIDES} onClick={onDuplicate}><DuplicateIcon /></button>
+      <button type="button" className="sd-icon-btn sd-tool-icon sd-tool-danger" title="Delete slide" aria-label={`Delete slide ${k + 1}`}
+              disabled={busy || count <= 1} onClick={onDelete}><TrashIcon size={20} /></button>
+    </div>
+  );
+}
+
+/** "+ Add slide" after a slide in edit mode: a new slide of the layout picked. */
+function AddSlide({ after, busy, full, onAdd }: { after: number; busy: boolean; full: boolean; onAdd: (layout: string) => void }) {
+  return (
+    <div className="sd-add-slide">
+      <label>
+        <span className="sr-only">Add a slide after slide {after + 1}</span>
+        <select className="input" value="" disabled={busy || full} onChange={(e) => e.target.value && onAdd(e.target.value)}>
+          <option value="">{full ? `At most ${MAX_SLIDES} slides` : "+ Add slide here"}</option>
+          {LAYOUTS.map((l) => <option key={l.id} value={l.id}>{l.name}</option>)}
+        </select>
+      </label>
+    </div>
+  );
+}
+
+/** The deck in a popup: its actions along the top (edit, present, a larger preview, download, more) and every slide
+ * below, one after another. A click on a slide presents from it. The pencil opens edit mode: every text on the slides
+ * is a framed text box to type in (with a remove button where the slide can do without it), each slide has its
+ * controls (layout, text boxes to add, move, duplicate, delete), slides can be added between them, and the speaker
+ * notes are editable too. Save keeps it all; leaving edit mode or closing with unsaved changes asks first. Presenting
+ * or downloading saves first, so both show the edited deck. */
+export function SlideDeckViewer({ artifact, onClose, onDelete, onSaved }: {
   artifact: Artifact;
   onClose: () => void;
   onDelete: () => Promise<void>;
+  /** The deck as the server has it now (saved, or fetched afresh). */
+  onSaved: (artifact: Artifact) => void;
 }) {
-  const { pages, slides } = deckOf(artifact);
+  const stored = deckOf(artifact);
   const [big, setBig] = useState(false);
   const [notes, setNotes] = useState(false);
   const [presenting, setPresenting] = useState<number | null>(null);
   const [inView, setInView] = useState(0);
+  const [draft, setDraft] = useState<Draft | null>(null); // edit mode when set
+  const [dirty, setDirty] = useState(false);
+  const [busy, setBusy] = useState(false); // the server is drawing the slides again
+  const [saving, setSaving] = useState(false);
+  const [saveError, setSaveError] = useState<string | null>(null);
+  // Unsaved changes and the viewer is closing, or edit mode is being left: Save, Don't save or Cancel.
+  const [asking, setAsking] = useState<"close" | "done" | null>(null);
+  const [opening, setOpening] = useState(false); // fetching the deck afresh before edit mode
+  const [version, setVersion] = useState(0); // bumped to draw the slides again from the stored deck (changes dropped)
+  const previewSeq = useRef(0);
   const stack = useRef<HTMLOListElement>(null);
   const c = artifact.content;
-  const theme = SLIDE_THEMES.find((t) => t.id === c.theme)?.name ?? "Dark space";
+  const fmt: DeckFmt = c.format === "presenter" ? "presenter" : "detailed";
+  const theme = SLIDE_THEMES.find((t) => t.id === c.theme)?.name ?? "Night stellar";
+  const editing = draft !== null;
+  const pages = draft ? draft.pages : stored.pages;
+  const slides: DeckSlide[] = draft ? draft.slides : stored.slides;
+
+  const save = async (): Promise<boolean> => {
+    if (!draft || !dirty) return true;
+    const wrong = problem(draft.slides);
+    if (wrong) {
+      setSaveError(wrong);
+      return false;
+    }
+    setSaving(true);
+    setSaveError(null);
+    try {
+      const next = await artifactsApi.saveDeck(artifact.id, draft.slides);
+      onSaved(next);
+      setDraft(draftOf(next));
+      setDirty(false);
+      return true;
+    } catch (e) {
+      setSaveError(errorMessage(e));
+      return false;
+    } finally {
+      setSaving(false);
+    }
+  };
+  // A change to the deck's structure (a slide or a text box added, removed, moved, another layout): drawn by the server.
+  const restructure = async (next: EditSlide[]) => {
+    if (!draft) return;
+    setDraft({ ...draft, slides: next });
+    setDirty(true);
+    setBusy(true);
+    setSaveError(null);
+    const seq = ++previewSeq.current;
+    try {
+      const got = await artifactsApi.previewDeck(artifact.id, next);
+      if (seq === previewSeq.current) setDraft({ slides: got.slides, pages: got.slides_html, slots: got.slide_slots });
+    } catch (e) {
+      if (seq === previewSeq.current) setSaveError(errorMessage(e));
+    } finally {
+      if (seq === previewSeq.current) setBusy(false);
+    }
+  };
+  const change = (k: number, slide: EditSlide) => draft && void restructure(draft.slides.map((x, i) => (i === k ? slide : x)));
+  const move = (k: number, by: -1 | 1) => {
+    if (!draft) return;
+    const next = [...draft.slides];
+    [next[k], next[k + by]] = [next[k + by], next[k]];
+    void restructure(next);
+  };
+  const insert = (at: number, slide: EditSlide) => draft && void restructure([...draft.slides.slice(0, at), slide, ...draft.slides.slice(at)]);
+  const typed = (k: number, field: string, text: string) => {
+    setDraft((d) => (d ? { ...d, slides: d.slides.map((x, i) => (i === k ? setText(x, field, text) : x)) } : d));
+    setDirty(true);
+  };
+  const requestClose = () => (dirty ? setAsking("close") : onClose());
+  const leave = () => {
+    setDraft(null);
+    setDirty(false);
+    setBusy(false);
+    setSaveError(null);
+    previewSeq.current++;
+    setVersion((v) => v + 1);
+  };
+  const stopEditing = () => (dirty ? setAsking("done") : leave());
+  // Edit mode works on the deck as the server has it now (a deck loaded before an update has no editable text).
+  const startEditing = async () => {
+    setOpening(true);
+    setSaveError(null);
+    try {
+      const fresh = await artifactsApi.get(artifact.id);
+      onSaved(fresh);
+      if (!deckOf(fresh).pages.some((html) => html.includes("data-f="))) {
+        setSaveError("This deck can't be edited. Generate it again to edit its text.");
+        return;
+      }
+      setDraft(draftOf(fresh));
+    } catch (e) {
+      setSaveError(errorMessage(e));
+    } finally {
+      setOpening(false);
+    }
+  };
+  const present = async (k: number) => {
+    if (await save()) setPresenting(k);
+  };
+
+  // Leaving the page (closing the tab, reloading) with unsaved changes: the browser asks too.
+  useEffect(() => {
+    if (!dirty) return;
+    const warn = (e: BeforeUnloadEvent) => e.preventDefault();
+    window.addEventListener("beforeunload", warn);
+    return () => window.removeEventListener("beforeunload", warn);
+  }, [dirty]);
 
   // The slide most in view: Present starts there.
   useEffect(() => {
@@ -446,22 +824,35 @@ export function SlideDeckViewer({ artifact, onClose, onDelete }: {
     }, { root, threshold: [0, 0.25, 0.5, 0.75, 1] });
     root.querySelectorAll("[data-i]").forEach((el) => io.observe(el));
     return () => io.disconnect();
-  }, [pages.length, notes]);
+  }, [pages.length, notes, editing]);
 
   const actions = (
     <div className="sd-head-actions" role="toolbar" aria-label="Slide deck">
-      <button type="button" className="sd-icon-btn" title="Start slideshow" aria-label="Start slideshow" disabled={!pages.length}
-              onClick={() => setPresenting(inView)}>
+      {editing ? (
+        <>
+          <button type="button" className="btn btn-primary btn-small sd-save" disabled={saving || busy || !dirty} onClick={() => void save()}>
+            {saving ? (<><span className="nbv-send-spinner" aria-hidden="true" /> Saving...</>) : "Save"}
+          </button>
+          <button type="button" className="btn btn-small sd-save" disabled={saving} onClick={stopEditing}>Done</button>
+        </>
+      ) : (
+        <button type="button" className="sd-icon-btn" title="Edit slides" aria-label="Edit slides" disabled={!pages.length || opening}
+                onClick={() => void startEditing()}>
+          {opening ? <span className="nbv-send-spinner" aria-hidden="true" /> : <PencilIcon />}
+        </button>
+      )}
+      <button type="button" className="sd-icon-btn" title="Start slideshow" aria-label="Start slideshow"
+              disabled={!pages.length || saving || busy} onClick={() => void present(inView)}>
         <PlayIcon size={20} />
       </button>
       <button type="button" className="sd-icon-btn" title={big ? "Smaller preview" : "Larger preview"} aria-pressed={big}
               aria-label={big ? "Smaller preview" : "Larger preview"} onClick={() => setBig((b) => !b)}>
         {big ? <CollapseIcon size={20} /> : <ExpandIcon size={20} />}
       </button>
-      {pages.length > 0 && <DownloadMenu artifact={artifact} />}
-      <DeckMenu artifact={artifact} onPresent={() => setPresenting(inView)} onDelete={onDelete}
+      {pages.length > 0 && <DownloadMenu artifact={artifact} prepare={save} />}
+      <DeckMenu artifact={artifact} onPresent={() => void present(inView)} onDelete={onDelete} prepare={save}
                 notes={notes} onNotes={() => setNotes((n) => !n)} />
-      <button type="button" className="sd-icon-btn" onClick={onClose} title="Close" aria-label="Close">
+      <button type="button" className="sd-icon-btn" onClick={requestClose} title="Close" aria-label="Close">
         <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" aria-hidden="true">
           <path d="M6 6l12 12M18 6L6 18" />
         </svg>
@@ -470,29 +861,55 @@ export function SlideDeckViewer({ artifact, onClose, onDelete }: {
   );
 
   return (
-    <Modal title={deckTitle(artifact)} onClose={onClose} wide actions={actions}>
+    <Modal title={deckTitle(artifact)} onClose={requestClose} wide actions={actions}>
       <div className={`sd-view${big ? " big" : ""}`}>
         <p className="muted small sd-meta">
-          {pages.length} slides · {c.format === "presenter" ? "Presenter" : "Detailed"} · {theme}
+          {pages.length} slides · {fmt === "presenter" ? "Presenter" : "Detailed"} · {theme}
           {c.source ? ` · from ${sourceSummary(c.source)}` : ""}
+          <span className="sd-edit-hint">
+            {editing ? ` · Editing: click a text box to type${busy ? " · Updating..." : dirty ? " · Unsaved changes" : ""}` : ""}
+          </span>
         </p>
+        {saveError && !asking && <p className="error-text small sd-edit-error" role="alert">{saveError}</p>}
         {pages.length === 0 ? (
           <p className="error-text">This deck has no slides to show. Try generating it again.</p>
         ) : (
-          <ol className="sd-stack" ref={stack} aria-label="Slides">
+          <ol className={`sd-stack${busy ? " sd-busy" : ""}`} ref={stack} aria-label="Slides" aria-busy={busy}>
             {pages.map((html, k) => {
               const s = slides[k];
               const sources = [...new Map((s?.sources ?? []).map((x) => [x.title || x.path, x])).values()];
+              const e = draft?.slides[k];
               return (
                 <li key={k} data-i={k}>
-                  <button type="button" className="sd-slide" onClick={() => setPresenting(k)}
-                          aria-label={`Present from slide ${k + 1}: ${s?.heading ?? ""}`}>
-                    <SlideFrame html={html} title={`Slide ${k + 1}`} />
-                  </button>
+                  {draft && e && (
+                    <SlideTools k={k} count={draft.slides.length} slide={e} slots={draft.slots[k] ?? []} fmt={fmt} busy={busy || saving}
+                                onChange={(next) => change(k, next)} onMove={(by) => move(k, by)}
+                                onDuplicate={() => insert(k + 1, { ...JSON.parse(JSON.stringify(e)), variant: "" })}
+                                onDelete={() => void restructure(draft.slides.filter((_, i) => i !== k))} />
+                  )}
+                  <div className={`sd-slide${editing ? " sd-slide-editing" : ""}`} role={editing ? undefined : "button"}
+                       tabIndex={editing ? undefined : 0} aria-label={editing ? undefined : `Present from slide ${k + 1}: ${s?.heading ?? ""}`}
+                       onClick={editing ? undefined : () => void present(k)}
+                       onKeyDown={editing ? undefined : (ev) => (ev.key === "Enter" || ev.key === " ") && (ev.preventDefault(), void present(k))}>
+                    <SlideFrame key={version} html={html} title={`Slide ${k + 1}: ${s?.heading ?? ""}`} editing={editing && !busy}
+                                onEdit={(field, text) => typed(k, field, text)}
+                                removable={e ? removable(e) : []} onRemove={(field) => e && change(k, removeField(e, field))} />
+                  </div>
                   {notes && (
                     <div className="sd-notes">
-                      <span className="vw-label">Slide {k + 1}</span>
-                      <p>{s?.notes || <span className="muted">No notes for this slide.</span>}</p>
+                      {e ? (
+                        <>
+                          <label className="vw-label" htmlFor={`sd-notes-${artifact.id}-${k}`}>Slide {k + 1} notes</label>
+                          <textarea id={`sd-notes-${artifact.id}-${k}`} className="textarea sd-notes-edit" rows={3} maxLength={1500}
+                                    placeholder="No notes for this slide yet." value={e.notes}
+                                    onChange={(ev) => typed(k, "notes", ev.target.value)} />
+                        </>
+                      ) : (
+                        <>
+                          <span className="vw-label">Slide {k + 1}</span>
+                          <p>{s?.notes || <span className="muted">No notes for this slide.</span>}</p>
+                        </>
+                      )}
                       {sources.length > 0 && (
                         <p className="muted small">
                           From {sources.map((x) => `${x.title || x.path} (lines ${x.line_start} to ${x.line_end})`).join("; ")}
@@ -500,6 +917,10 @@ export function SlideDeckViewer({ artifact, onClose, onDelete }: {
                       )}
                     </div>
                   )}
+                  {draft && (
+                    <AddSlide after={k} busy={busy || saving} full={draft.slides.length >= MAX_SLIDES}
+                              onAdd={(layout) => insert(k + 1, newSlide(layout, fmt))} />
+                  )}
                 </li>
               );
             })}
@@ -507,6 +928,30 @@ export function SlideDeckViewer({ artifact, onClose, onDelete }: {
         )}
       </div>
       {presenting !== null && <SlidePresenter artifact={artifact} start={presenting} onClose={() => setPresenting(null)} />}
+      {asking && (
+        <Modal title="Save changes?" onClose={() => !saving && setAsking(null)}>
+          <div className="stack sd-confirm">
+            <p>You edited this slide deck. Do you want to save your changes{asking === "close" ? " before closing" : ""}?</p>
+            {saveError && <p className="error-text" role="alert">{saveError}</p>}
+            <div className="row sd-confirm-actions">
+              <button type="button" className="btn" onClick={() => setAsking(null)} disabled={saving}>Cancel</button>
+              <button type="button" className="btn" disabled={saving} onClick={() => {
+                if (asking === "close") return onClose();
+                leave();
+                setAsking(null);
+              }}>Don't save</button>
+              <button type="button" className="btn btn-primary" disabled={saving || busy} autoFocus onClick={async () => {
+                if (!(await save())) return;
+                if (asking === "close") return onClose();
+                setAsking(null);
+                leave();
+              }}>
+                {saving ? (<><span className="nbv-send-spinner" aria-hidden="true" /> Saving...</>) : "Save"}
+              </button>
+            </div>
+          </div>
+        </Modal>
+      )}
     </Modal>
   );
 }
@@ -598,7 +1043,7 @@ export function SlideDeckRow({ artifact: initial, onRemoved }: { artifact: Artif
         </div>
       )}
       {error && <p className="error-text small sd-item-progress">{error}</p>}
-      {open && <SlideDeckViewer artifact={artifact} onClose={() => setOpen(false)} onDelete={remove} />}
+      {open && <SlideDeckViewer artifact={artifact} onClose={() => setOpen(false)} onDelete={remove} onSaved={setArtifact} />}
       {presenting && <SlidePresenter artifact={artifact} onClose={() => setPresenting(false)} />}
     </div>
   );

frontend/src/components/slideDeckEdit.ts

@@ -0,0 +1,173 @@
+/** The slide deck editor's rules: what a slide can gain or lose, how it changes to another layout, and what must not be
+ * left empty. They mirror the server (backend/app/slides/content.py: LIMITS and clamp_slide), which coerces whatever
+ * comes back anyway; these only keep the editor from offering what the server would undo. */
+import type { EditSlide } from "../api/endpoints";
+
+export type DeckFmt = "detailed" | "presenter";
+
+/** The layouts a slide can have, in the order the editor lists them. */
+export const LAYOUTS: { id: string; name: string }[] = [
+  { id: "title", name: "Title" },
+  { id: "section", name: "Section" },
+  { id: "points", name: "Points" },
+  { id: "two_column", name: "Two columns" },
+  { id: "stat", name: "Big number" },
+  { id: "quote", name: "Quote" },
+  { id: "agenda", name: "Agenda" },
+  { id: "closing", name: "Closing" },
+];
+
+export const MAX_SLIDES = 30;
+
+const max = (fmt: DeckFmt) => ({ points: fmt === "presenter" ? 4 : 5, agenda: 14, takeaways: 3, items: 4 });
+
+const clone = (s: EditSlide): EditSlide => JSON.parse(JSON.stringify(s)) as EditSlide;
+
+/** A new slide of `layout`, with placeholder text to type over. */
+export function newSlide(layout: string, fmt: DeckFmt): EditSlide {
+  const blank: EditSlide = {
+    layout: "section", variant: "", kicker: "", heading: "New slide", lead: "", points: [],
+    left: { label: "", items: [] }, right: { label: "", items: [] }, stat: { value: "", label: "" },
+    quote: { text: "", by: "" }, takeaways: [], closing: "", notes: "", sources: [],
+  };
+  return convert(blank, layout, fmt);
+}
+
+/** The slide changed to another layout. Its words carry over (points become a column's items, a closing's
+ * takeaways...); what the new layout needs and the slide lacks is filled with placeholder text. The old layout's
+ * content stays in the slide, so changing back brings it back. */
+export function convert(s: EditSlide, layout: string, fmt: DeckFmt): EditSlide {
+  const out = { ...clone(s), layout, variant: "" };
+  const m = max(fmt);
+  const words = [...s.points.map((p) => p.text), ...s.takeaways, ...s.left.items, ...s.right.items].filter(Boolean);
+  const some = (n: number, fallback: string[]) => (words.length >= 2 ? words : fallback).slice(0, n);
+  if (layout === "points" && out.points.length < 2) {
+    out.points = some(m.points, ["First point", "Second point", "Third point"]).map((text) => ({ term: "", text }));
+  } else if (layout === "agenda" && out.points.length < 2) {
+    out.points = some(m.agenda, ["First topic", "Second topic", "Third topic"]).map((text) => ({ term: "", text }));
+  } else if (layout === "two_column" && !(out.left.items.length && out.right.items.length)) {
+    const items = some(2 * m.items, ["A point on this side", "Another point", "A point on that side", "Another point"]);
+    const half = Math.ceil(items.length / 2);
+    out.left = { label: out.left.label || "One side", items: items.slice(0, half).slice(0, m.items) };
+    out.right = { label: out.right.label || "The other side", items: items.slice(half).slice(0, m.items) };
+  } else if (layout === "stat" && !(out.stat.value && out.stat.label)) {
+    out.stat = { value: out.stat.value || "42%", label: out.stat.label || words[0] || "What this number means" };
+  } else if (layout === "quote" && !out.quote.text) {
+    out.quote = { text: words[0] || out.lead || "A line worth quoting.", by: out.quote.by };
+  } else if (layout === "closing" && !out.takeaways.length && !out.closing) {
+    out.takeaways = some(m.takeaways, ["First takeaway", "Second takeaway", "Third takeaway"]);
+  }
+  return out;
+}
+
+export type AddAction = { id: string; label: string; apply: (s: EditSlide) => EditSlide };
+
+/** The text boxes a slide can gain: only those its design has a place for (`slots`, from the server) and that it
+ * does not have yet, within the format's limits. */
+export function addActions(s: EditSlide, slots: string[], fmt: DeckFmt): AddAction[] {
+  const m = max(fmt);
+  const has = (slot: string) => slots.includes(slot);
+  const act = (id: string, label: string, change: (c: EditSlide) => void): AddAction => ({
+    id, label, apply: (from) => {
+      const c = clone(from);
+      change(c);
+      return c;
+    },
+  });
+  const out: AddAction[] = [];
+  if (has("kicker") && !s.kicker) out.push(act("kicker", "Kicker", (c) => (c.kicker = "Kicker")));
+  if (has("lead") && !s.lead) out.push(act("lead", "Subtitle", (c) => (c.lead = "A sentence that adds context.")));
+  if (s.layout === "points" && has("body") && s.points.length < m.points) {
+    out.push(act("point", "Bullet", (c) => c.points.push({ term: "", text: "New point" })));
+  }
+  if (s.layout === "agenda" && has("body") && s.points.length < m.agenda) {
+    out.push(act("point", "Topic", (c) => c.points.push({ term: "", text: "New topic" })));
+  }
+  if (s.layout === "two_column") {
+    for (const side of ["left", "right"] as const) {
+      const name = side === "left" ? "Left" : "Right";
+      if (!s[side].label) out.push(act(`${side}-label`, `${name} heading`, (c) => (c[side].label = "Heading")));
+      if (s[side].items.length < m.items) out.push(act(`${side}-item`, `${name} item`, (c) => c[side].items.push("New item")));
+    }
+  }
+  if (s.layout === "quote" && has("by") && !s.quote.by) out.push(act("by", "Author", (c) => (c.quote.by = "Name")));
+  if (s.layout === "closing") {
+    if (has("body") && s.takeaways.length < m.takeaways) out.push(act("takeaway", "Takeaway", (c) => c.takeaways.push("New takeaway")));
+    if (has("closing") && !s.closing) out.push(act("closing", "Closing line", (c) => (c.closing = "One line to end on.")));
+  }
+  return out;
+}
+
+/** The text boxes on a slide that can be removed (a point only while the slide keeps enough of them; the heading, a
+ * stat or a quote never: the layout needs them). Each is the `data-f` of the text drawn in that box. */
+export function removable(s: EditSlide): string[] {
+  const out: string[] = [];
+  if (s.kicker) out.push("kicker");
+  if (s.lead) out.push("lead");
+  if (s.quote.by) out.push("quote.by");
+  if (s.closing && s.takeaways.length) out.push("closing");
+  const minPoints = 2;
+  s.points.forEach((p, i) => {
+    if (p.term) out.push(`points.${i}.term`);
+    if (s.points.length > minPoints) out.push(`points.${i}.text`);
+  });
+  if (s.takeaways.length > 1 || s.closing) s.takeaways.forEach((_, i) => out.push(`takeaways.${i}`));
+  for (const side of ["left", "right"] as const) {
+    if (s[side].label) out.push(`${side}.label`);
+    if (s[side].items.length > 1) s[side].items.forEach((_, i) => out.push(`${side}.items.${i}`));
+  }
+  return out;
+}
+
+/** The slide without the text box at `field`: a point, takeaway or column item goes; other text is emptied. */
+export function removeField(s: EditSlide, field: string): EditSlide {
+  const c = clone(s);
+  const [a, b, d] = field.split(".");
+  if (a === "points" && d === "text") c.points.splice(Number(b), 1);
+  else if (a === "points" && d === "term") c.points[Number(b)].term = "";
+  else if (a === "takeaways") c.takeaways.splice(Number(b), 1);
+  else if ((a === "left" || a === "right") && b === "items") c[a].items.splice(Number(d), 1);
+  else if ((a === "left" || a === "right") && b === "label") c[a].label = "";
+  else if (a === "quote" && b === "by") c.quote.by = "";
+  else if (a === "kicker" || a === "lead" || a === "closing") c[a] = "";
+  return c;
+}
+
+/** The slide with the text at `field` ("points.2.text", "left.items.0", "heading") set to `text`. */
+export function setText(s: EditSlide, field: string, text: string): EditSlide {
+  const c = clone(s);
+  const path = field.split(".");
+  let at: Record<string, unknown> | unknown[] = c as unknown as Record<string, unknown>;
+  for (const k of path.slice(0, -1)) at = (at as Record<string, unknown>)[k] as Record<string, unknown>;
+  const last = path[path.length - 1];
+  if (Array.isArray(at)) at[Number(last)] = text;
+  else if (at && typeof at === "object") at[last] = text;
+  return c;
+}
+
+const blank = (t: string) => !t.replace(/\s+/g, "");
+
+/** What stops the deck from being saved as it is ("Slide 3: the heading can't be empty."), or null. */
+export function problem(slides: EditSlide[]): string | null {
+  for (const [i, s] of slides.entries()) {
+    const at = (what: string) => `Slide ${i + 1}: ${what} can't be empty.`;
+    if (blank(s.heading) && s.layout !== "quote" && s.layout !== "closing") return at("the heading");
+    if (s.layout === "points" || s.layout === "agenda") {
+      const n = s.points.findIndex((p) => blank(p.text));
+      if (n >= 0) return at(`${s.layout === "agenda" ? "topic" : "point"} ${n + 1}`);
+    }
+    if (s.layout === "two_column") {
+      for (const side of ["left", "right"] as const) {
+        const n = s[side].items.findIndex(blank);
+        if (n >= 0) return at(`the ${side} column's item ${n + 1}`);
+      }
+    }
+    if (s.layout === "stat" && (blank(s.stat.value) || blank(s.stat.label))) return at(blank(s.stat.value) ? "the number" : "the number's label");
+    if (s.layout === "quote" && blank(s.quote.text)) return at("the quote");
+    if (s.layout === "closing") {
+      const n = s.takeaways.findIndex(blank);
+      if (n >= 0) return at(`takeaway ${n + 1}`);
+    }
+  }
+  return null;
+}

frontend/src/components/ui.tsx

@@ -69,17 +69,21 @@ export function Modal({
   actions?: ReactNode;
 }) {
   const ref = useRef<HTMLDivElement>(null);
+  // The latest onClose, so a parent passing a new function each render neither re-binds Escape nor (worse) pulls focus
+  // back to the dialog, away from whatever is being typed in.
+  const close = useRef(onClose);
+  close.current = onClose;
   useEffect(() => {
     const onKey = (e: KeyboardEvent) => {
       if (e.key !== "Escape") return;
       // A modal opened from a modal (a picker over the composer): Escape closes only the top one.
       const open = document.querySelectorAll(".modal-backdrop");
-      if (open[open.length - 1] === ref.current?.parentElement) onClose();
+      if (open[open.length - 1] === ref.current?.parentElement) close.current();
     };
     document.addEventListener("keydown", onKey);
-    ref.current?.focus();
+    ref.current?.focus(); // once, on opening
     return () => document.removeEventListener("keydown", onKey);
-  }, [onClose]);
+  }, []);
   // Rendered into <body>: a parent with backdrop-filter or transform (cards have one) would otherwise become the
   // containing block of this fixed backdrop and trap the modal inside that card.
   return createPortal(

frontend/src/styles/pages.css

@@ -8360,6 +8360,11 @@ details.map-legend[open] summary {
   pointer-events: none;
 }
 
+/* In edit mode the slide's text is edited in place, so the frame takes the mouse */
+.sd-frame-edit iframe {
+  pointer-events: auto;
+}
+
 /* A deck in the notebook's list: a quiet row (icon, title, "2 sources · 5d ago", menu), highlighted on hover */
 .sd-item {
   display: grid;
@@ -8636,6 +8641,121 @@ details.map-legend[open] summary {
   box-shadow: var(--glow-sm);
 }
 
+/* Edit mode: the slide's text boxes are clicked into, so no pointer; the slide being typed in is lit */
+.sd-slide-editing {
+  cursor: default;
+}
+
+.sd-slide-editing:focus-within {
+  border-color: var(--blue);
+  box-shadow: var(--glow-sm);
+}
+
+.sd-save {
+  height: 36px;
+  margin-right: 6px;
+  padding: 0 18px;
+}
+
+.sd-edit-hint {
+  color: var(--text-2);
+}
+
+.sd-edit-error {
+  margin: -4px 0 10px;
+}
+
+/* Edit mode: each slide's controls above it (layout, text boxes to add, move, duplicate, delete) */
+.sd-tools {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 6px;
+  margin-bottom: 8px;
+}
+
+.sd-tools-no {
+  margin-right: 4px;
+  color: var(--text-2);
+  font-size: 0.8125rem;
+  font-weight: 600;
+}
+
+.sd-tools-layout select,
+.sd-add-slide select {
+  width: auto;
+  height: 32px;
+  padding: 0 30px 0 12px;
+  font-size: 0.8125rem;
+}
+
+.sd-tool {
+  height: 32px;
+  padding: 0 12px;
+  border: 1px dashed var(--line-strong);
+  border-radius: 999px;
+  background: transparent;
+  color: var(--text);
+  font: 600 0.8125rem var(--font-body);
+  cursor: pointer;
+}
+
+.sd-tool:hover:not(:disabled) {
+  border-color: var(--blue);
+  background: var(--surface-2);
+}
+
+.sd-tool:disabled {
+  opacity: 0.5;
+  cursor: default;
+}
+
+.sd-tools-gap {
+  flex: 1;
+}
+
+.sd-tool-icon {
+  width: 32px;
+  height: 32px;
+}
+
+.sd-tool-danger:hover:not(:disabled) {
+  color: #ff8a8a;
+}
+
+/* Between two slides in edit mode: a divider line with "+ Add slide here" on it */
+.sd-add-slide {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+  margin: 20px 0 12px;
+}
+
+.sd-add-slide::before,
+.sd-add-slide::after {
+  content: "";
+  flex: 1;
+  height: 1px;
+  background: var(--line-strong);
+}
+
+.sd-add-slide select {
+  border-style: dashed;
+}
+
+/* The server is drawing the slides again: they wait, not taking clicks */
+.sd-stack.sd-busy .sd-slide {
+  opacity: 0.6;
+  pointer-events: none;
+  transition: opacity 0.15s;
+}
+
+.sd-notes-edit {
+  min-height: 84px;
+  resize: vertical;
+  line-height: 1.6;
+}
+
 .sd-notes {
   display: grid;
   gap: 6px;