fb-slides 0.11.1 → 0.11.3

package/CHANGELOG.md

@@ -7,6 +7,28 @@ this — which makes it worth being able to see what arrived.
 Entries are written as the work lands, under **Unreleased**; the release commit
 that stamps the version renames that heading to the version and its date.
 
+## 0.11.3 — 2026-09-27
+
+- **Aurora keeps the signature in the bottom-right corner.** The pack used to
+  move the logo and name to the left, on top of the slide number, and put a
+  dashed progress bar where the signature belongs. The signature now sits where
+  every other theme puts it, and the dashed bar is gone; the slide number under
+  the arrows is the one indicator left.
+- **Aurora's two lights sit a step further back.** The violet top-left and the
+  green bottom-right were strong enough to read as colour fields; both are now
+  mixed a little more towards the dark, so they stay atmosphere behind the
+  slide.
+
+## 0.11.2 — 2026-09-27
+
+- **A second sequence diagram keeps its arrows and step numbers.** Mermaid
+  names a sequence diagram's markers with fixed ids — `arrowhead`,
+  `sequencenumber` — so with two of them in one deck the second pointed at the
+  first one's markers, and while that slide was hidden they did not paint: no
+  arrowheads, and white step numbers with no circle behind them. Every id
+  inside a diagram now carries the diagram's own prefix, and its references and
+  stylesheet follow.
+
 ## 0.11.1 — 2026-09-23
 
 - **`build` ships the runtime again from an installed package.** `dist/` came

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "fb-slides",
-  "version": "0.11.1",
+  "version": "0.11.3",
   "type": "module",
   "description": "Markdown-driven reveal.js decks: live demo embeds, annotation, mermaid, and a zero-config dev server",
   "keywords": [

package/runtime/deck.js

@@ -384,6 +384,7 @@ for (const [i, code] of [...diagrams].entries()) {
     // does not care that the slide it is going into is currently hidden.
     const { svg } = await mermaid.render(`mermaid-${i}`, code.textContent.trim());
     holder.innerHTML = svg;
+    scopeIds(holder, `mermaid-${i}`);
   } catch (error) {
     console.error('[deck] mermaid failed', error);
     continue;
@@ -391,6 +392,36 @@ for (const [i, code] of [...diagrams].entries()) {
   code.closest('pre').replaceWith(holder);
 }
 
+// A sequence diagram names its markers with fixed ids — `arrowhead`,
+// `sequencenumber`, `crosshead` — so two of them in one deck share those ids, and
+// `url(#arrowhead)` resolves to the first diagram's marker. When that slide is
+// hidden (`display:none`) the marker does not paint: the second diagram loses its
+// arrows and the numbered circles behind its white step numbers. Every id inside
+// a diagram gets the diagram's own prefix, and the references follow.
+function scopeIds(root, prefix) {
+  const renamed = new Map();
+  for (const el of root.querySelectorAll('svg [id]')) {
+    if (el.id.startsWith(prefix)) continue;
+    renamed.set(el.id, `${prefix}-${el.id}`);
+    el.id = renamed.get(el.id);
+  }
+  if (!renamed.size) return;
+  // The diagram's own stylesheet colours the markers by id (`#arrowhead path`).
+  for (const style of root.querySelectorAll('svg style')) {
+    style.textContent = style.textContent.replace(/#([\w-]+)/g, (m, id) => (renamed.has(id) ? `#${renamed.get(id)}` : m));
+  }
+  const ref = /url\(#([^)]+)\)/g;
+  for (const el of root.querySelectorAll('svg *')) {
+    for (const attr of [...el.attributes]) {
+      if (attr.value.includes('url(#')) {
+        attr.value = attr.value.replace(ref, (m, id) => (renamed.has(id) ? `url(#${renamed.get(id)})` : m));
+      } else if ((attr.name === 'href' || attr.name === 'xlink:href') && renamed.has(attr.value.slice(1))) {
+        attr.value = `#${renamed.get(attr.value.slice(1))}`;
+      }
+    }
+  }
+}
+
 // ---------------------------------------------------------------------------
 // highlight.js stops at the edge of a template literal's `${…}`: it tags the
 // interpolation but leaves most of its contents untokenised, so

package/runtime/themes/custom-aurora.css

@@ -34,15 +34,16 @@
 
 /* The base theme paints two cool halos here. These are the same idea turned up:
    a violet pooling top-left and a green rising from the floor, both far enough
-   off the text to stay atmosphere rather than decoration. */
+   off the text to stay atmosphere rather than decoration. Kept well under
+   full strength: at 78/70 they read as colour fields, not as light. */
 /* On <html> alone, with <body> cleared. The base theme paints the same gradient
    on both, which is invisible at its strength but not at this one: two identical
    translucent layers are darker than one, so the deck grows a seam exactly where
    <body> stops being as tall as the page. */
 html {
   background:
-    radial-gradient(1100px 760px at 22% 8%, color-mix(in srgb, var(--aurora-1) 78%, transparent) 0%, transparent 62%),
-    radial-gradient(900px 620px at 88% 92%, color-mix(in srgb, var(--aurora-2) 70%, transparent) 0%, transparent 58%),
+    radial-gradient(1430px 760px at 22% 8%, color-mix(in srgb, var(--aurora-1) 28%, transparent) 0%, transparent 62%),
+    radial-gradient(1170px 620px at 88% 92%, color-mix(in srgb, var(--aurora-2) 24%, transparent) 0%, transparent 58%),
     var(--bg);
   background-attachment: fixed;
 }
@@ -130,51 +131,19 @@ body,
   box-shadow: 0 6px 20px color-mix(in srgb, var(--accent) 35%, transparent);
 }
 
-/* --- the progress, as segments ------------------------------------------- */
-/* reveal's progress is one filled bar. Cut into dashes it reads as "four of
-   these, you are on the first" from the back of the room, which a hairline
-   never does — and it stays one element, so nothing has to count slides. */
-.reveal .progress {
-  height: 6px;
-  bottom: 14px;
-  left: auto;
-  right: 22px;
-  width: 78px;
-  background: transparent;
-  --dash: repeating-linear-gradient(
-    to right,
-    currentColor 0 14px,
-    transparent 14px 22px
-  );
-}
-.reveal .progress::after {
-  content: '';
-  position: absolute;
-  inset: 0;
-  color: color-mix(in srgb, var(--text) 22%, transparent);
-  background: var(--dash);
-  border-radius: 999px;
-}
-.reveal .progress span {
-  position: relative;
-  z-index: 1;
-  height: 100%;
-  color: var(--accent);
-  background: var(--dash);
-  border-radius: 999px;
-}
+/* --- no progress bar ------------------------------------------------------ */
+/* The slide number under the arrows already says where you are; a second
+   indicator in the opposite corner competed with the signature for it.
+   `!important` because reveal writes `display: block` inline on the bar when
+   `progress` is on, and a stylesheet rule alone loses to that. */
+.reveal .progress { display: none !important; }
 
-/* The signature moves to the left corner, opposite the progress, and loses the
-   pill: on this much light a second bordered shape is one too many. */
-#deck-sig {
-  right: auto;
-  left: 16px;
-  flex-direction: row;
-}
+/* The signature keeps the base corner, bottom right, and only loses the pill:
+   on this much light a second bordered shape is one too many. */
 #deck-sig img { height: 54px; }
 #deck-sig .sig-name {
-  margin: 0 0 12px -22px;
-  padding: 5px 13px 5px 30px;
+  margin: 0 -22px 12px 0;
+  padding: 5px 30px 5px 13px;
   background: none;
   border-color: transparent;
   backdrop-filter: none;