gutterpress 0.9.0-alpha.2 → 0.10.0-alpha.3

package/dist/render.js

@@ -1,7 +1,49 @@
-// src/lib/markdown/markdown-it-paged.js
+// src/lib/markdown/markers.js
+function unwrapAttrBraces(token) {
+  if (typeof token !== "string")
+    return token;
+  let t = token.trim();
+  if (t.startsWith("{"))
+    t = t.slice(1).trim();
+  if (t.endsWith("}"))
+    t = t.slice(0, -1).trim();
+  return t || token;
+}
 function isBareToken(token) {
   return token && !token.includes("=") && !token.startsWith(".") && !token.startsWith("#");
 }
+var KNOWN_KINDS = [
+  "chapter",
+  "spread",
+  "page",
+  "section",
+  "continue",
+  "page-break",
+  "column-break",
+  "end-section"
+];
+var BARE_TOKEN_RE = /^[A-Za-z0-9_][A-Za-z0-9_.:-]*$/;
+function editDistance(a, b) {
+  let prev = Array.from({ length: b.length + 1 }, (_, j) => j);
+  for (let i = 1;i <= a.length; i++) {
+    const cur = [i];
+    for (let j = 1;j <= b.length; j++) {
+      cur[j] = Math.min(prev[j] + 1, cur[j - 1] + 1, prev[j - 1] + (a[i - 1] === b[j - 1] ? 0 : 1));
+    }
+    prev = cur;
+  }
+  return prev[b.length];
+}
+function nearestKind(word) {
+  const w = word.toLowerCase();
+  if (w.length < 3)
+    return null;
+  for (const kind of KNOWN_KINDS) {
+    if (editDistance(w, kind) <= 1)
+      return kind;
+  }
+  return null;
+}
 function escapeHtml(s) {
   return String(s).replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
 }
@@ -38,9 +80,11 @@ function parseMarkerLine(line) {
   }
   if (buf)
     tokens.push(buf);
+  for (let i = 1;i < tokens.length; i++)
+    tokens[i] = unwrapAttrBraces(tokens[i]);
   const head = tokens[0];
   const kind = head.slice(1);
-  if (!["chapter", "spread", "page", "section", "continue", "page-break", "column-break", "end-section"].includes(kind))
+  if (!KNOWN_KINDS.includes(kind))
     return null;
   if (kind === "page-break" || kind === "column-break" || kind === "end-section" || kind === "continue") {
     return { kind, name: null, attrs: {} };
@@ -62,6 +106,18 @@ function parseMarkerLine(line) {
   const classes = [];
   let sawExplicitAttr = false;
   let hasAmbiguousBareToken = false;
+  const unknownTokens = [];
+  for (const t of body) {
+    if (t.startsWith(".") || t.startsWith("#")) {
+      if (!BARE_TOKEN_RE.test(t.slice(1).trim()))
+        unknownTokens.push(t);
+      continue;
+    }
+    if (t.indexOf("=") > 0)
+      continue;
+    if (!BARE_TOKEN_RE.test(t))
+      unknownTokens.push(t);
+  }
   for (let idx = 0;idx < body.length; idx++) {
     if (idx === nameIndex) {
       if (sawExplicitAttr && isBareToken(body[idx]))
@@ -104,6 +160,11 @@ function parseMarkerLine(line) {
   const marker = { kind, name, attrs };
   if (hasAmbiguousBareToken)
     marker.__ambiguousBareToken = true;
+  if (unknownTokens.length)
+    marker.__unknownTokens = unknownTokens;
+  if (bareTokens.length > 1 && !hasAmbiguousBareToken && !unknownTokens.length) {
+    marker.__extraBareTokens = { tokens: bareTokens, named: name !== null };
+  }
   return marker;
 }
 function warn(env, line, type, message, marker) {
@@ -148,7 +209,6 @@ function attachDataAttrs(token, kind, name, attrs) {
 }
 function plugin(md, pluginOptions = {}) {
   const options = {
-    implicitPage: false,
     preferPagesInSpreads: false,
     ...pluginOptions
   };
@@ -169,6 +229,19 @@ function plugin(md, pluginOptions = {}) {
       delete parsed.__ambiguousBareToken;
       warn(state.env, startLine + 1, "ambiguous_marker_token", "A bare marker token after a key=value attribute is being interpreted as the marker name (or an extra class). Use comma-separated classes (class=a,b) or .class shorthand instead.", parsed);
     }
+    if (parsed.__unknownTokens) {
+      const unknown = parsed.__unknownTokens;
+      delete parsed.__unknownTokens;
+      for (const t of unknown) {
+        warn(state.env, startLine + 1, "unrecognized_marker_token", `@${parsed.kind}: "${t}" is not something a marker understands, so it was kept verbatim as a class name. Write a class as .my-class (or {.my-class}), an id as #my-id, and anything else as key=value.`, parsed);
+      }
+    }
+    if (parsed.__extraBareTokens) {
+      const { tokens, named } = parsed.__extraBareTokens;
+      delete parsed.__extraBareTokens;
+      const list = tokens.map((t) => `"${t}"`).join(", ");
+      warn(state.env, startLine + 1, "extra_bare_marker_token", named ? `@${parsed.kind}: only the first plain word (${list.split(", ")[0]}) is used as the name; the rest (${tokens.slice(1).map((t) => `"${t}"`).join(", ")}) became class names instead. Quote a name that contains spaces ("${tokens.join(" ")}"), or write classes as .${tokens.slice(1).join(" .")}.` : `@${parsed.kind}: ${list} are several plain words, but a marker has only one name slot — so NONE of them was used as the name and they all became class names instead. Quote a name that contains spaces ("${tokens.join(" ")}"), or write classes as .${tokens.join(" .")}.`, parsed);
+    }
     state.line = startLine + 1;
     return true;
   }
@@ -176,9 +249,33 @@ function plugin(md, pluginOptions = {}) {
     alt: ["paragraph", "reference", "blockquote", "list"]
   });
   const SCOPE_CLOSE_ORDER = ["section", "page", "spread", "chapter"];
+  function scanForMistypedMarkers(state) {
+    for (let tokenIndex = 0;tokenIndex < state.tokens.length; tokenIndex++) {
+      const tok = state.tokens[tokenIndex];
+      if (tok.type !== "inline" || !tok.map)
+        continue;
+      const opener = state.tokens[tokenIndex - 1];
+      if (!opener || opener.type !== "paragraph_open")
+        continue;
+      const lines = tok.content.split(`
+`);
+      for (let i = 0;i < lines.length; i++) {
+        const m = /^@([A-Za-z][A-Za-z0-9-]*)(?=\s|$)/.exec(lines[i].trim());
+        if (!m)
+          continue;
+        if (KNOWN_KINDS.includes(m[1]))
+          continue;
+        const suggestion = nearestKind(m[1]);
+        if (!suggestion)
+          continue;
+        warn(state.env, tok.map[0] + i + 1, "unknown_marker", `"@${m[1]}" is not a marker Gutterpress knows, so this line was left as ordinary text. Did you mean "@${suggestion}"? (marker names are lower-case).`, null);
+      }
+    }
+  }
   md.core.ruler.after("block", "layout_transform", function(state) {
     if (!state.env.__layoutMarkersUsed)
       return;
+    scanForMistypedMarkers(state);
     const out = [];
     setDepth(state.env, 0);
     const stack = {
@@ -217,6 +314,7 @@ function plugin(md, pluginOptions = {}) {
     };
     function openChapter(meta) {
       const t = new state.Token("layout_chapter_open", "div", 1);
+      t.meta = { line: meta.__line };
       const classes = meta.attrs?.class || "";
       addClasses(t, "chapter", classes);
       attachDataAttrs(t, "chapter", meta.name, meta.attrs || {});
@@ -231,6 +329,7 @@ function plugin(md, pluginOptions = {}) {
     }
     function openSpread(meta) {
       const t = new state.Token("layout_spread_open", "div", 1);
+      t.meta = { line: meta.__line };
       addClasses(t, "spread", meta.attrs && meta.attrs.class ? meta.attrs.class : "");
       attachDataAttrs(t, "spread", meta.name, meta.attrs || {});
       stack.open({ kind: "spread", noPagesYet: true, sawAnyPage: false }, t);
@@ -238,6 +337,7 @@ function plugin(md, pluginOptions = {}) {
     function openPage(meta) {
       const chapter = stack.get("chapter");
       const t = new state.Token("layout_page_open", "div", 1);
+      t.meta = { line: meta.__line };
       const explicit = meta.attrs && meta.attrs.class ? meta.attrs.class : "";
       const counterClass = chapter ? chapter.counterClass : "";
       const tokens = explicit ? explicit.split(/\s+/) : [];
@@ -267,7 +367,7 @@ function plugin(md, pluginOptions = {}) {
       const t = new state.Token("layout_section_open", "div", 1);
       addClasses(t, "section", meta.attrs && meta.attrs.class ? meta.attrs.class : "");
       attachDataAttrs(t, "section", meta.name, meta.attrs || {});
-      t.meta = { hasColumnBreak: false };
+      t.meta = { hasColumnBreak: false, line: meta.__line };
       stack.open({
         kind: "section",
         meta: { name: meta.name || null, attrs: { ...meta.attrs || {} } },
@@ -303,14 +403,6 @@ function plugin(md, pluginOptions = {}) {
       }
       if (kind === "section") {
         stack.close("section");
-        if (!stack.has("page")) {
-          if (options.implicitPage) {
-            warn(state.env, line, "implicit_page", '@section used without an open @page; creating an implicit page wrapper (data-page="auto").', meta);
-            openPage({ name: "auto", attrs: {}, __line: line });
-          } else {
-            warn(state.env, line, "section_without_page", "@section used without an open @page; region will render but will not be wrapped in a page.", meta);
-          }
-        }
         const spread = stack.get("spread");
         if (spread && spread.noPagesYet) {
           warn(state.env, line, "spread_without_pages", "@section inside a spread without an explicit @page. Allowed (adhoc spread), but explicit @page markers give stronger control.", meta);
@@ -328,9 +420,10 @@ function plugin(md, pluginOptions = {}) {
           name: section.meta.name,
           attrs: { ...section.meta.attrs || {} }
         };
+        contMeta.__line = line;
         const cls = (contMeta.attrs.class || "").split(/\s+/).filter(Boolean);
-        if (!cls.includes("gutterpress-continued"))
-          cls.push("gutterpress-continued");
+        if (!cls.includes("gp-continued"))
+          cls.push("gp-continued");
         contMeta.attrs.class = cls.join(" ");
         stack.close("section");
         openSection(contMeta);
@@ -338,7 +431,8 @@ function plugin(md, pluginOptions = {}) {
       }
       if (kind === "page-break") {
         const t = new state.Token("layout_page_break", "div", 0);
-        t.attrSet("class", "md-page-break");
+        t.meta = { line };
+        t.attrSet("class", "gp-page-break");
         t.attrSet("aria-hidden", "true");
         out.push(t);
         continue;
@@ -352,7 +446,8 @@ function plugin(md, pluginOptions = {}) {
           }
         }
         const t = new state.Token("layout_column_break", "div", 0);
-        t.attrSet("class", "md-column-break");
+        t.meta = { line };
+        t.attrSet("class", "gp-column-break");
         t.attrSet("aria-hidden", "true");
         out.push(t);
         continue;
@@ -389,7 +484,11 @@ function plugin(md, pluginOptions = {}) {
     const cls = token.attrGet("class") || "";
     if (cls.includes("col-split") && token.meta && token.meta.hasColumnBreak) {
       setDepth(env, getDepth(env) + 1);
-      return `<div class="${escapeAttr(cls)}"><div class="col">
+      const rangeAttr = token.attrGet("data-source-range");
+      const rangeHtml = rangeAttr ? ` data-source-range="${escapeAttr(rangeAttr)}"` : "";
+      const chapterAttr = token.attrGet("data-chapter-src");
+      const chapterHtml = chapterAttr ? ` data-chapter-src="${escapeAttr(chapterAttr)}"` : "";
+      return `<div class="${escapeAttr(cls)}"${rangeHtml}${chapterHtml}><div class="col">
 `;
     }
     return self.renderToken(tokens, idx, opts);
@@ -403,8 +502,12 @@ function plugin(md, pluginOptions = {}) {
     return self.renderToken(tokens, idx, opts);
   };
   md.renderer.rules.layout_page_break = (tokens, idx) => {
-    const cls = tokens[idx].attrGet("class") || "md-page-break";
-    return `<div class="${escapeAttr(cls)}" aria-hidden="true"></div>
+    const cls = tokens[idx].attrGet("class") || "gp-page-break";
+    const rangeAttr = tokens[idx].attrGet("data-source-range");
+    const rangeHtml = rangeAttr ? ` data-source-range="${escapeAttr(rangeAttr)}"` : "";
+    const chapterAttr = tokens[idx].attrGet("data-chapter-src");
+    const chapterHtml = chapterAttr ? ` data-chapter-src="${escapeAttr(chapterAttr)}"` : "";
+    return `<div class="${escapeAttr(cls)}" aria-hidden="true"${rangeHtml}${chapterHtml}></div>
 `;
   };
   md.renderer.rules.layout_column_break = (tokens, idx, opts, env) => {
@@ -412,32 +515,192 @@ function plugin(md, pluginOptions = {}) {
       return `</div><div class="col">
 `;
     }
-    const cls = tokens[idx].attrGet("class") || "md-column-break";
-    return `<div class="${escapeAttr(cls)}" aria-hidden="true"></div>
+    const cls = tokens[idx].attrGet("class") || "gp-column-break";
+    const rangeAttr = tokens[idx].attrGet("data-source-range");
+    const rangeHtml = rangeAttr ? ` data-source-range="${escapeAttr(rangeAttr)}"` : "";
+    const chapterAttr = tokens[idx].attrGet("data-chapter-src");
+    const chapterHtml = chapterAttr ? ` data-chapter-src="${escapeAttr(chapterAttr)}"` : "";
+    return `<div class="${escapeAttr(cls)}" aria-hidden="true"${rangeHtml}${chapterHtml}></div>
 `;
   };
   md.renderer.rules.layout_marker = () => "";
 }
-var PAGED_CSS = `
-.md-page-break { break-before: page; }
+var MARKER_CSS = `
+/* The UA default of 8px body margin is a screen affordance with no meaning
+   in paged media, and engines disagree about it: a polyfill that treats the
+   page div as the page box drops it, native print keeps it. Left in place it
+   insets EVERY page's content by 8px per side, and -- measured, 300dpi,
+   6x4in sheet -- it is what stops a full-width block from reaching the
+   paper: it lands at 0.080..5.917in of a 6in sheet instead of
+   0.000..6.000in, because width:100% resolves against the BODY content box,
+   not the page's. Zeroing it here (first in the cascade) makes the two
+   agree. Authors who want a body margin still just declare one. */
+body { margin: 0; }
+
+.gp-page-break { break-before: page; }
 .page { break-before: page; }
 .spread { break-before: page; }
-.section { break-inside: avoid; }
-.section.col-split { break-inside: auto; }
-.md-column-break { break-after: column; height: 0; font-size: 0; line-height: 0; visibility: hidden; }
+:where(.page, .spread) { position: relative; }
+.gp-column-break { break-after: column; height: 0; font-size: 0; line-height: 0; visibility: hidden; }
 
-.center { display: block; margin-left: auto; margin-right: auto; max-width: 100%; }
-.float-left { float: left; margin: 0 1em 1em 0; max-width: 50%; }
-.float-right { float: right; margin: 0 0 1em 1em; max-width: 50%; }
-.full-width { display: block; width: 100%; max-width: 100%; }
-.full-bleed {
+:where(h1,h2,h3,h4,h5,h6) { break-after: avoid; }
+:where(img, svg, video) { max-width: 100%; }
+:where(p > img:only-child, figure > img) { width: fit-content; max-width: 100%; height: auto; vertical-align: bottom; }
+:where(.section, figure) > :where(:first-child) { break-before: avoid; }
+
+`;
+
+// src/lib/markdown/gutterpress-css.ts
+var GUTTERPRESS_CSS = `
+/* gp-* author image/block vocabulary. One vocabulary, gp-* only — the
+   pre-vocabulary utility names (.center/.float-left/.float-right/
+   .full-width/.full-bleed) were REMOVED when gp-* shipped; books rename
+   the classes in their markdown (see the migration note). Source ORDER is
+   the contract — see the doctrine comment above. */
+
+/* flow positions */
+.gp-left {
+  float: left;
+  margin: 0 var(--gp-gap, 1em) var(--gp-gap, 1em) 0;
+  max-width: 50%;
+}
+.gp-right {
+  float: right;
+  margin: 0 0 var(--gp-gap, 1em) var(--gp-gap, 1em);
+  max-width: 50%;
+}
+.gp-center {
   display: block;
+  float: none;
+  margin-left: auto;
+  margin-right: auto;
+  max-width: 100%;
+}
+.gp-full {
+  display: block;
+  float: none;
+  width: 100%;
+  max-width: 100%;
+}
+@page gp-full-bleed { margin-left: 0; margin-right: 0; }
+.gp-bleed {
+  display: block;
+  float: none;
   break-before: page;
+  page: gp-full-bleed;
   max-width: none;
-  width: calc(100% + var(--pagedjs-margin-left, 0px) + var(--pagedjs-margin-right, 0px));
-  margin-left: calc(-1 * var(--pagedjs-margin-left, 0px));
-  margin-right: calc(-1 * var(--pagedjs-margin-right, 0px));
+  width: 100%;
+  margin-left: 0;
+  margin-right: 0;
+}
+
+/* sizes — AFTER the flow positions so max-width:100% lifts the floats' 50%
+   cap at equal specificity */
+.gp-small { width: 25%; max-width: 100%; }
+.gp-medium { width: 50%; max-width: 100%; }
+.gp-large { width: 75%; max-width: 100%; }
+
+/* float clearance presets — consumed by var(--gp-gap) in the float rules
+   above and by .gp-shape's shape-margin below; --gp-gap itself is
+   author-settable CSS */
+.gp-tight { --gp-gap: 0.5em; }
+.gp-loose { --gp-gap: 2em; }
+
+/* column runs — plain CSS Multi-column, exposed as author vocabulary so
+   "put this in two columns" does not require borrowing a styled container
+   from the book's own component layer. That borrowing is what this exists
+   to prevent: a book whose theme paints .section chrome by default gives
+   every author who opens a section just to start a column run a panel they
+   did not ask for, and the book then needs a reset rule to take it back.
+   With a neutral primitive the author opts into columns and nothing else.
+
+   Permanent vocabulary, not a shim: Chromium implements multicol natively
+   and these rules are the standard properties verbatim, so there is no
+   spec gap here to remove later. Deliberately minimal — column-fill is
+   NOT set, because the correct value depends on whether the run fragments
+   across pages (auto packs each page's columns; the CSS initial balance is
+   right for a run that fits on one page) and only the author knows which.
+   --gp-column-gap is author-settable. */
+.gp-columns-2 { columns: 2; column-gap: var(--gp-column-gap, 1.5em); }
+.gp-columns-3 { columns: 3; column-gap: var(--gp-column-gap, 1.5em); }
+
+/* shape wrap — text follows the image's alpha silhouette instead of its
+   rectangular box. shape-outside only applies to floats, so this is inert
+   without .gp-left/.gp-right (and under .gp-pin, which un-floats). The
+   shape URL cannot be written in CSS (url() contexts can't read attr()),
+   so the image renderer rule (images.ts) mirrors the src into an inline
+   --gp-shape:url(...) custom property whenever it sees this class --
+   authors only ever type the class. threshold 0.2 ignores near-transparent
+   anti-aliasing halos; shape-margin shares the float-gap vocabulary. */
+img.gp-shape {
+  shape-outside: var(--gp-shape);
+  shape-image-threshold: 0.2;
+  shape-margin: var(--gp-gap, 1em);
 }
+
+/* pin — within the nearest positioned ancestor (.page/.spread, rule above).
+   inset:0 and the explicit centers are load-bearing; see doctrine comment. */
+.gp-pin {
+  position: absolute;
+  inset: 0;
+  align-self: center;
+  justify-self: center;
+  margin: 0;
+  max-width: 100%;
+}
+
+/* pin edge modifiers — AFTER .gp-pin to beat its center defaults;
+   justify-self is inert on in-flow floats, so gp-left/gp-right safely do
+   double duty as flow float + pin edge */
+.gp-top { align-self: start; }
+.gp-bottom { align-self: end; }
+.gp-left { justify-self: start; }
+.gp-right { justify-self: end; }
+
+/* wrapper-margin neutralization (same pattern and rationale as the
+   .gp-bleed paragraph-margin note in the doctrine comment; for pin, the
+   emptied paragraph would otherwise leave a phantom margin gap in flow) */
+:where(p:has(> img.gp-bleed:only-child)) { margin: 0; }
+:where(p:has(> img.gp-pin:only-child)) { margin: 0; }
+
+/* depth — a named ladder for z-index, so books stop hand-tuning bare
+   integers. A real book measured 21 z-index declarations using only four
+   distinct values (-1, 0, 1, 2), each written literally at its use site.
+   The custom properties are the author-settable surface (a book needing a
+   deeper stack raises them once); the classes are the shorthand.
+
+   NOT named "layer": CSS Paged Media 3 §3.1 already defines "page layers"
+   (page background, canvas, borders, contents, margin boxes) and those are
+   parts of the PAGE BOX, not a z-ladder for content. Reusing the word for a
+   different concept would collide with the spec vocabulary this project
+   tracks. The pin EDGE modifiers already own .gp-top/.gp-bottom, so the
+   ladder avoids those words too.
+
+   .gp-behind is the one that earns its place: it puts a pinned image UNDER
+   the page's text, which is otherwise impossible to express without a bare
+   negative z-index. "Above" needs no class — an out-of-flow pin already
+   paints above in-flow content.
+
+   Two things silently defeat .gp-behind, neither visible at the use site:
+     - a stacking context on the .page/.spread ancestor (z-index, isolation,
+       opacity, filter, transform on it traps the negative layer inside).
+       Core keeps .page/.spread at 'position: relative; z-index: auto'
+       precisely so they are not stacking contexts.
+     - a clipping ancestor (overflow other than visible), the same mechanism
+       that clips a .gp-bleed plate back to the wrapper's width.
+   The build-time engine.layer.trapped audit reports both against the live
+   ancestor chain. printsafe/page-containment is only an early source hint for
+   declarations written directly on .page/.spread. */
+:root {
+  --gp-z-behind: -1;
+  --gp-z-base: 0;
+  --gp-z-raised: 1;
+  --gp-z-front: 2;
+}
+.gp-behind { z-index: var(--gp-z-behind); }
+.gp-base   { z-index: var(--gp-z-base); }
+.gp-raised { z-index: var(--gp-z-raised); }
+.gp-front  { z-index: var(--gp-z-front); }
 `;
 
 // src/lib/markdown/chapter-id.ts
@@ -485,6 +748,42 @@ function debug(message, ...args) {
 // src/lib/markdown/renderer.ts
 import markdownItAttrs from "markdown-it-attrs";
 import markdownItFootnote from "markdown-it-footnote";
+
+// src/lib/markdown/gp-pin-scope.js
+function warn2(env, line, type, message, marker) {
+  if (!env.layoutWarnings)
+    env.layoutWarnings = [];
+  env.layoutWarnings.push({ line, type, message, marker });
+}
+function gpPinScope(md) {
+  const PIN_OUTSIDE_PAGE_MSG = "A .gp-pin element is not inside any @page or @spread, so it is pinned to the whole document instead of the page it sits on — it can print on a completely different sheet. Move it inside an @page or @spread block, or remove .gp-pin.";
+  function hasPinClass(token) {
+    const cls = token.attrGet && token.attrGet("class");
+    return typeof cls === "string" && cls.split(/\s+/).includes("gp-pin");
+  }
+  md.core.ruler.push("gp_pin_scope_check", function(state) {
+    let depth = 0;
+    for (const token of state.tokens) {
+      if (token.type === "layout_page_open" || token.type === "layout_spread_open") {
+        depth += 1;
+      } else if (token.type === "layout_page_close" || token.type === "layout_spread_close") {
+        depth -= 1;
+      } else if (depth === 0) {
+        if (token.type === "inline" && token.children) {
+          for (const child of token.children) {
+            if (child.type === "image" && hasPinClass(child)) {
+              warn2(state.env, (token.map?.[0] ?? 0) + 1, "pin_outside_page", PIN_OUTSIDE_PAGE_MSG);
+            }
+          }
+        } else if (token.nesting === 1 && hasPinClass(token)) {
+          warn2(state.env, (token.map?.[0] ?? 0) + 1, "pin_outside_page", PIN_OUTSIDE_PAGE_MSG);
+        }
+      }
+    }
+  });
+}
+
+// src/lib/markdown/renderer.ts
 import markdownItSourceMap from "markdown-it-source-map";
 import markdownItDeflist from "markdown-it-deflist";
 import markdownItMark from "markdown-it-mark";
@@ -493,16 +792,77 @@ import markdownItSup from "markdown-it-sup";
 import markdownItAbbr from "markdown-it-abbr";
 
 // src/lib/markdown/images.ts
+var isSrcsetSpace = (char) => char === "\t" || char === `
+` || char === "\f" || char === "\r" || char === " ";
+function parseSrcsetUrlCandidates(input) {
+  const candidates = [];
+  let position = 0;
+  while (position < input.length) {
+    while (position < input.length && (isSrcsetSpace(input[position]) || input[position] === ",")) {
+      position++;
+    }
+    if (position >= input.length)
+      break;
+    const urlStart = position;
+    while (position < input.length && !isSrcsetSpace(input[position]))
+      position++;
+    let urlEnd = position;
+    if (input[urlEnd - 1] === ",") {
+      while (urlEnd > urlStart && input[urlEnd - 1] === ",")
+        urlEnd--;
+      if (urlEnd > urlStart) {
+        candidates.push({
+          url: input.slice(urlStart, urlEnd),
+          start: urlStart,
+          end: urlEnd
+        });
+      }
+      continue;
+    }
+    let parenDepth = 0;
+    while (position < input.length) {
+      const char = input[position];
+      if (char === "(")
+        parenDepth++;
+      else if (char === ")" && parenDepth > 0)
+        parenDepth--;
+      else if (char === "," && parenDepth === 0) {
+        position++;
+        break;
+      }
+      position++;
+    }
+    if (urlEnd > urlStart) {
+      candidates.push({
+        url: input.slice(urlStart, urlEnd),
+        start: urlStart,
+        end: urlEnd
+      });
+    }
+  }
+  return candidates;
+}
 function registerImageRule(md) {
   const defaultRender = md.renderer.rules.image ?? ((tokens, idx, options, _env, self) => self.renderToken(tokens, idx, options));
   md.renderer.rules.image = (tokens, idx, options, env, self) => {
     const token = tokens[idx];
+    for (const child of token.children ?? []) {
+      if (child.type === "text_special" || child.type === "code_inline")
+        child.type = "text";
+    }
     const srcIdx = token.attrIndex("src");
     if (srcIdx >= 0 && token.attrs) {
       const src = token.attrs[srcIdx][1];
       if (src) {
         const bucket = env ?? {};
         (bucket.imageRefs ??= []).push(src);
+        const cls = token.attrGet("class");
+        if (cls && cls.split(/\s+/).includes("gp-shape")) {
+          const cssUrl = src.replace(/\\/g, "\\\\").replace(/"/g, "\\\"");
+          const decl = `--gp-shape:url("${cssUrl}")`;
+          const existing = token.attrGet("style");
+          token.attrSet("style", existing ? `${decl}; ${existing}` : decl);
+        }
       }
     }
     return defaultRender(tokens, idx, options, env, self);
@@ -510,25 +870,337 @@ function registerImageRule(md) {
 }
 function collectHtmlImageRefs(html) {
   const refs = [];
-  const srcRe = /<img\b[^>]*?\bsrc\s*=\s*(?:"([^"]*)"|'([^']*)'|([^\s>]+))/gi;
-  let m;
-  while (m = srcRe.exec(html)) {
-    const src = m[1] ?? m[2] ?? m[3];
+  const tags = [];
+  const collectTags = (active) => {
+    for (const match of active.matchAll(/<(?:"[^"]*"|'[^']*'|[^'">])*>/g)) {
+      if (/^<(?:img|source)\b/i.test(match[0]))
+        tags.push(match[0]);
+    }
+  };
+  const protectedRegion = /<!--[\s\S]*?-->|<(script|style|pre|code|textarea)\b[^>]*>[\s\S]*?<\/\1\s*>/gi;
+  let last = 0;
+  for (const match of html.matchAll(protectedRegion)) {
+    const index = match.index ?? 0;
+    collectTags(html.slice(last, index));
+    last = index + match[0].length;
+  }
+  collectTags(html.slice(last));
+  const attr = (tag, name) => {
+    const match = new RegExp(`[\\t\\n\\f\\r ]${name}[\\t\\n\\f\\r ]*=[\\t\\n\\f\\r ]*(?:"([^"]*)"|'([^']*)'|([^\\t\\n\\f\\r >]+))`, "i").exec(tag);
+    return match?.[1] ?? match?.[2] ?? match?.[3];
+  };
+  for (const tag of tags) {
+    if (!/^<img\b/i.test(tag))
+      continue;
+    const src = attr(tag, "src");
     if (src)
       refs.push(src);
   }
-  const srcsetRe = /<(?:img|source)\b[^>]*?\bsrcset\s*=\s*(?:"([^"]*)"|'([^']*)')/gi;
-  while (m = srcsetRe.exec(html)) {
-    const list = m[1] ?? m[2] ?? "";
-    for (const candidate of list.split(",")) {
-      const url = candidate.trim().split(/\s+/)[0];
-      if (url)
-        refs.push(url);
-    }
+  for (const tag of tags) {
+    const list = attr(tag, "srcset") ?? "";
+    refs.push(...parseSrcsetUrlCandidates(list).map((candidate) => candidate.url));
   }
   return refs;
 }
 
+// src/lib/markdown/source-range.ts
+var SOURCE_RANGE_ATTR = "data-source-range";
+var SOURCE_CHAPTER_ATTR = "data-chapter-src";
+var SELF_CLOSING_BLOCK_TYPES = new Set([
+  "fence",
+  "hr",
+  "html_block",
+  "layout_page_break",
+  "layout_column_break"
+]);
+function isFiniteRangeTuple(value) {
+  return Array.isArray(value) && value.length === 2 && Number.isFinite(value[0]) && Number.isFinite(value[1]);
+}
+function resolveRange(token) {
+  if (isFiniteRangeTuple(token.map)) {
+    return [token.map[0], token.map[1]];
+  }
+  const meta = token.meta;
+  const line = meta?.line;
+  if (typeof line === "number" && Number.isFinite(line)) {
+    return [line - 1, line];
+  }
+  return null;
+}
+function isAnnotationTarget(token) {
+  if (token.nesting === 1)
+    return true;
+  return token.nesting === 0 && SELF_CLOSING_BLOCK_TYPES.has(token.type);
+}
+function annotateToken(token, chapter) {
+  if (!isAnnotationTarget(token))
+    return;
+  const range = resolveRange(token);
+  if (!range)
+    return;
+  token.attrSet(SOURCE_RANGE_ATTR, `${range[0]}:${range[1]}`);
+  if (chapter)
+    token.attrSet(SOURCE_CHAPTER_ATTR, chapter);
+}
+var sourceRangeRule = (state) => {
+  const chapter = typeof state.env?.sourceChapter === "string" ? state.env.sourceChapter : null;
+  for (const token of state.tokens) {
+    annotateToken(token, chapter);
+  }
+};
+
+// src/lib/markdown/inline-source.ts
+var SOURCE_TOKEN_ATTR = "data-gp-source-token";
+var SOURCE_OCCURRENCE_ATTR = "data-gp-source-occurrence";
+var RESERVED_ATTRS = new Set([SOURCE_TOKEN_ATTR, SOURCE_OCCURRENCE_ATTR]);
+function isHtmlSpace(char) {
+  return char === " " || char === "\t" || char === `
+` || char === "\r" || char === "\f";
+}
+function stripReservedAttrsFromTag(html) {
+  let out = "";
+  let inTag = false;
+  let quote = "";
+  for (let i = 0;i < html.length; ) {
+    const char = html[i];
+    if (!inTag) {
+      out += char;
+      if (char === "<")
+        inTag = true;
+      i++;
+      continue;
+    }
+    if (quote) {
+      out += char;
+      if (char === quote)
+        quote = "";
+      i++;
+      continue;
+    }
+    if (char === '"' || char === "'") {
+      quote = char;
+      out += char;
+      i++;
+      continue;
+    }
+    if (char === ">") {
+      inTag = false;
+      out += char;
+      i++;
+      continue;
+    }
+    if (!isHtmlSpace(char)) {
+      out += char;
+      i++;
+      continue;
+    }
+    let nameStart = i;
+    while (isHtmlSpace(html[nameStart]))
+      nameStart++;
+    let nameEnd = nameStart;
+    while (nameEnd < html.length && !isHtmlSpace(html[nameEnd]) && html[nameEnd] !== "=" && html[nameEnd] !== "/" && html[nameEnd] !== ">")
+      nameEnd++;
+    const name = html.slice(nameStart, nameEnd).toLowerCase();
+    if (!RESERVED_ATTRS.has(name)) {
+      out += html.slice(i, nameStart);
+      i = nameStart;
+      continue;
+    }
+    i = nameEnd;
+    while (isHtmlSpace(html[i]))
+      i++;
+    if (html[i] !== "=")
+      continue;
+    i++;
+    while (isHtmlSpace(html[i]))
+      i++;
+    const valueQuote = html[i];
+    if (valueQuote === '"' || valueQuote === "'") {
+      for (i++;i < html.length && html[i] !== valueQuote; i++) {}
+      if (html[i] === valueQuote)
+        i++;
+    } else {
+      while (i < html.length && !isHtmlSpace(html[i]) && html[i] !== ">")
+        i++;
+    }
+  }
+  return out;
+}
+function tagEnd(html, start) {
+  let quote = "";
+  for (let i = start + 1;i < html.length; i++) {
+    const char = html[i];
+    if (quote) {
+      if (char === quote)
+        quote = "";
+    } else if (char === '"' || char === "'")
+      quote = char;
+    else if (char === ">")
+      return i + 1;
+  }
+  return html.length;
+}
+function tagIdentity(tag) {
+  let i = 1;
+  while (isHtmlSpace(tag[i]))
+    i++;
+  const closing = tag[i] === "/";
+  if (closing) {
+    i++;
+    while (isHtmlSpace(tag[i]))
+      i++;
+  }
+  const start = i;
+  while (i < tag.length) {
+    const char = tag[i].toLowerCase();
+    if (char >= "a" && char <= "z" || char >= "0" && char <= "9" || char === "-")
+      i++;
+    else
+      break;
+  }
+  return i > start ? { name: tag.slice(start, i).toLowerCase(), closing } : null;
+}
+function findProtectedClose(html, tag, from) {
+  const needle = `</${tag}`;
+  for (let at = html.indexOf(needle, from);at >= 0; at = html.indexOf(needle, at + needle.length)) {
+    const boundary = html[at + needle.length];
+    if (boundary === ">" || boundary === "/" || isHtmlSpace(boundary))
+      return at;
+  }
+  return -1;
+}
+function stripReservedRawHtmlAttrs(html, initialProtectedTag = "") {
+  const protectedTags = new Set([
+    "script",
+    "style",
+    "textarea",
+    "title",
+    "xmp",
+    "iframe",
+    "noembed",
+    "noframes",
+    "noscript",
+    "plaintext"
+  ]);
+  const lower = html.toLowerCase();
+  let out = "";
+  let i = 0;
+  let protectedTag = initialProtectedTag;
+  while (i < html.length) {
+    if (protectedTag) {
+      if (protectedTag === "plaintext")
+        return { html: out + html.slice(i), protectedTag };
+      const closeAt = findProtectedClose(lower, protectedTag, i);
+      if (closeAt < 0)
+        return { html: out + html.slice(i), protectedTag };
+      out += html.slice(i, closeAt);
+      i = closeAt;
+      protectedTag = "";
+      continue;
+    }
+    if (html.startsWith("<!--", i)) {
+      const closeAt = html.indexOf("-->", i + 4);
+      const end2 = closeAt < 0 ? html.length : closeAt + 3;
+      out += html.slice(i, end2);
+      i = end2;
+      continue;
+    }
+    if (html[i] !== "<") {
+      out += html[i++];
+      continue;
+    }
+    const end = tagEnd(html, i);
+    const tag = html.slice(i, end);
+    const identity = tagIdentity(tag);
+    if (!identity) {
+      out += tag;
+    } else if (!identity.closing && (identity.name === "img" || identity.name === "a")) {
+      out += stripReservedAttrsFromTag(tag);
+    } else {
+      out += tag;
+      if (!identity.closing && protectedTags.has(identity.name)) {
+        protectedTag = identity.name;
+      }
+    }
+    i = end;
+  }
+  return { html: out, protectedTag };
+}
+function occurrenceAt(source, token, target) {
+  let occurrence = 0;
+  let from = 0;
+  while (from < target) {
+    const found = source.indexOf(token, from);
+    if (found < 0 || found >= target)
+      break;
+    occurrence++;
+    from = found + token.length;
+  }
+  return occurrence;
+}
+function registerInlineSourceMetadata(md) {
+  md.core.ruler.push("inline_source_raw_html", (state) => {
+    let protectedTag = "";
+    for (const block of state.tokens) {
+      if (block.type === "html_block") {
+        const sanitized = stripReservedRawHtmlAttrs(block.content, protectedTag);
+        block.content = sanitized.html;
+        protectedTag = sanitized.protectedTag;
+        continue;
+      }
+      if (!block.children)
+        continue;
+      for (const token of block.children) {
+        if (token.type !== "html_inline")
+          continue;
+        const sanitized = stripReservedRawHtmlAttrs(token.content, protectedTag);
+        token.content = sanitized.html;
+        protectedTag = sanitized.protectedTag;
+      }
+    }
+  });
+  const ruler = md.inline.ruler;
+  for (const [ruleName, tokenType] of [["image", "image"], ["link", "link_open"]]) {
+    const entry = ruler.__rules__.find((rule) => rule.name === ruleName);
+    if (!entry)
+      continue;
+    const original = entry.fn;
+    ruler.at(ruleName, (state, silent) => {
+      const sourceStart = state.pos;
+      const tokenStart = state.tokens.length;
+      const matched = original(state, silent);
+      if (!matched || silent)
+        return matched;
+      const token = state.tokens.slice(tokenStart).find((candidate) => candidate.type === tokenType);
+      if (!token)
+        return matched;
+      const sourceToken = state.src.slice(sourceStart, state.pos);
+      if (sourceToken.includes(`
+`) || sourceToken.includes("\r"))
+        return matched;
+      token.meta ??= {};
+      token.meta.gpInlineSource = {
+        token: sourceToken,
+        occurrence: occurrenceAt(state.src, sourceToken, sourceStart)
+      };
+      return matched;
+    });
+    const originalRender = md.renderer.rules[tokenType];
+    md.renderer.rules[tokenType] = (tokens, index, options, env, renderer) => {
+      const token = tokens[index];
+      if (token.attrs) {
+        token.attrs = token.attrs.filter(([name]) => !RESERVED_ATTRS.has(name.toLowerCase()));
+      }
+      const source = token.meta?.gpInlineSource;
+      if (source) {
+        token.attrSet(SOURCE_TOKEN_ATTR, source.token);
+        token.attrSet(SOURCE_OCCURRENCE_ATTR, String(source.occurrence));
+      }
+      return originalRender ? originalRender(tokens, index, options, env, renderer) : renderer.renderToken(tokens, index, options);
+    };
+  }
+}
+
 // src/lib/markdown/renderer.ts
 function hasDefaultExport(plugin2) {
   return !!plugin2 && typeof plugin2 === "object" && "default" in plugin2;
@@ -553,10 +1225,13 @@ function createMarkdownRenderer(customPlugins) {
   md.use(unwrapPlugin(markdownItDeflist));
   md.use(unwrapPlugin(markdownItSourceMap));
   md.use(plugin);
+  md.use(gpPinScope);
   registerImageRule(md);
   if (customPlugins && customPlugins.length > 0) {
     applyPlugins(md, customPlugins);
   }
+  registerInlineSourceMetadata(md);
+  md.core.ruler.push("source_range", sourceRangeRule);
   return md;
 }
 function applyPlugins(md, plugins) {
@@ -580,16 +1255,6 @@ function collectPluginCss(plugins) {
 `);
 }
 
-// src/lib/pagedjs-marker.ts
-var PAGEDJS_VERSION = "0.4.3";
-var PAGEDJS_POLYFILL_MARKER = "data-pagedjs-polyfill";
-function pagedjsPolyfillTag(version = PAGEDJS_VERSION) {
-  return `<script ${PAGEDJS_POLYFILL_MARKER}="${version}"></script>`;
-}
-function pagedjsPolyfillTagRegex() {
-  return /<script\b[^>]*(?:\bdata-pagedjs-polyfill\b|\bsrc=["'][^"']*paged\.polyfill[^"']*["'])[^>]*>\s*<\/script>/gi;
-}
-
 // src/lib/markdown/assemble.ts
 async function assembleBookHtml(opts) {
   const title = opts.title ?? "Document";
@@ -612,6 +1277,8 @@ async function assembleBookHtml(opts) {
       throw new Error(`Failed to read file ${file}: ${errorMsg}`);
     }
     const env = {};
+    if (opts.annotateSourceChapters)
+      env.sourceChapter = chapterId;
     const rendered = md.render(content, env);
     if (env.layoutWarnings && env.layoutWarnings.length > 0) {
       opts.onChapterWarnings?.(chapterId, env.layoutWarnings);
@@ -635,8 +1302,10 @@ ${rendered}
     opts.onImageRefs([...imageRefs]);
   }
   const inlineCss = [
-    `/* markdown-it-paged */
-${PAGED_CSS.trim()}`,
+    `/* gutterpress markers */
+${MARKER_CSS.trim()}`,
+    `/* gutterpress */
+${GUTTERPRESS_CSS.trim()}`,
     pluginCss ? `/* user plugin css */
 ${pluginCss.trim()}` : null,
     projectCss ? `/* project css */
@@ -653,7 +1322,6 @@ ${projectCss.trim()}` : null
   <style data-project-css>
 ${inlineCss}
 </style>
-  ${pagedjsPolyfillTag()}
 </head>
 <body>
 ${bodyContent}
@@ -661,13 +1329,9 @@ ${bodyContent}
 </html>`;
 }
 export {
-  pagedjsPolyfillTagRegex,
-  pagedjsPolyfillTag,
   createMarkdownRenderer,
   collectPluginCss,
   assembleBookHtml,
   applyPlugins,
-  PAGED_CSS,
-  PAGEDJS_VERSION,
-  PAGEDJS_POLYFILL_MARKER
+  MARKER_CSS
 };