studiograph 1.3.48-next.261 → 1.3.48-next.263

package/dist/core/artifact-frame-document.js

@@ -20,11 +20,11 @@ import { computeFrameLayout, FRAME_LAYOUT_DEFAULT_GAP } from './artifact-frame-l
 import { escapeAttribute, escapeHtml, escapeScript, escapeStyle } from './artifact-escape.js';
 import { applyAssetResolution, artifactCsp } from './artifact-asset-resolution.js';
 import { brokenImageScriptTag, libraryTags } from './artifact-libraries.js';
-import { SANITIZE_CSS_URLS_TWIN } from './artifact-paged-css.js';
-/** Cap (ms) on the in-sandbox `document.fonts.ready` wait before Paged.js
- *  fragments. The host inlines workspace-asset fonts as data: URLs so this
- *  normally resolves immediately; the cap only bites when a font falls back to a
- *  slow network endpoint, trading a worst-case late-font reflow for not stalling
+import { rewriteAuthorCssForColumns } from './artifact-columns-css.js';
+/** Cap (ms) on the in-sandbox `document.fonts.ready` wait before the columns
+ *  compositor measures. The host inlines workspace-asset fonts as data: URLs so
+ *  this normally resolves immediately; the cap only bites when a font falls back
+ *  to a slow network endpoint, trading a worst-case late-font reflow for not stalling
  *  the canvas for many seconds. Interpolated into the pagination bootstrap. */
 const FONT_READY_TIMEOUT_MS = 2000;
 /** Artboard fill for a frame that opts into `neutral`. The DEFAULT (unset) is
@@ -138,21 +138,6 @@ function sharedStyleTags(bundle) {
         .map(([path, css]) => `<style data-artifact-file="${escapeAttribute(path)}">\n${escapeStyle(css)}\n</style>`)
         .join('\n');
 }
-/** Concatenated shared stylesheet TEXT (raw CSS). Paged.js only honors break
- *  rules (`break-before/after/inside`, named pages) from stylesheets handed to
- *  its polisher — CSS that merely sits in the document head styles the content
- *  visually but is invisible to the fragmenter. So the authored shared CSS is
- *  passed to `preview()` alongside the `@page` rule (it is ALSO in the head for
- *  global styling; double-application is idempotent). */
-function sharedCssText(bundle) {
-    const files = bundle.shared?.files;
-    if (!files)
-        return '';
-    return Object.entries(files)
-        .filter(([path]) => path.toLowerCase().endsWith('.css'))
-        .map(([, css]) => css)
-        .join('\n');
-}
 /** The platform layout CSS: a transparent canvas sized to the total extent, with
  *  each frame container absolutely positioned at its computed rect. Fixed frames
  *  get an exact height (content clips); auto-height frames grow to content
@@ -390,9 +375,27 @@ function frameRuntimeScript(artifactId, surface, fullBleed = false, whiteboard =
     selected.set(t.targetId, { el: target, target: t });
     publishSelection();
   };
+  // Clip an element rect to a box (both in iframe viewport coords), returning the
+  // visible intersection as a plain {x,y,width,height}. A paginated document renders
+  // each page as a [data-sg-page-window] (overflow:hidden) onto ONE column of a single
+  // native multi-column flow; a block that fragments across a column (= page) boundary
+  // has a getBoundingClientRect spanning BOTH pages, and getBoundingClientRect ignores
+  // the window's clip — so a selection of it would draw ACROSS pages. Clipping to the
+  // page window keeps the overlay on the current page (its only visible part there).
+  const clipRectToBox = (rect, box) => {
+    const left = Math.max(rect.left, box.left);
+    const top = Math.max(rect.top, box.top);
+    const right = Math.min(rect.right, box.right);
+    const bottom = Math.min(rect.bottom, box.bottom);
+    return { x: left, y: top, width: Math.max(0, right - left), height: Math.max(0, bottom - top) };
+  };
   const descriptorFor = (el) => {
     const frame = el.closest('[data-sg-frame]');
-    const rect = el.getBoundingClientRect();
+    // Only content inside a paginated page window is clipped; furniture and a bare
+    // frame/tile selection (not inside a window) keep their full rect.
+    const pageWindow = el.closest('[data-sg-page-window]');
+    const elRect = el.getBoundingClientRect();
+    const rect = pageWindow ? clipRectToBox(elRect, pageWindow.getBoundingClientRect()) : elRect;
     const frameId = frame ? frame.getAttribute('data-sg-frame-id') : '';
     // Never emit an empty selector (the host drops empty-selector targets): the
     // frame element addresses by its frame id, anything else by its DOM path,
@@ -870,51 +873,45 @@ function deckStandaloneRuntime() {
 })();`;
 }
 /** Present a `document` artifact as a continuous vertical scroll through its
- *  pages — read like a PDF, not stepped like a deck. The pages are Paged.js's
- *  natural `.pagedjs_page` boxes (present-document does NOT promote them — see the
- *  bootstrap's `promote` gate — so they keep Paged.js's vertical flow); a
- *  non-paginated (auto/fill-height) document frame flows as a single page. The
+ *  pages — read like a PDF, not stepped like a deck. The columns compositor
+ *  replaces the source frame with discrete `[data-sg-frame][data-sg-page]` page
+ *  tiles (it runs in EVERY mode; `promote` only selects whether their layout is
+ *  host-driven (editor grid) or CSS-driven (this scroll column)); a non-paginated
+ *  (auto/fill-height) document frame flows as a single page tile-free frame. The
  *  host sizes the iframe to the present stage; the page column scrolls internally.
- *  Mirrors the `pagedFullscreenCss` reader model — `!important` + the surface
- *  scope win over Paged.js's runtime-injected `.pagedjs_*` styles (which reset
- *  left/top/transform and would otherwise absolutely-position the pages). */
-function presentDocumentLayoutCss(bundle, surfaceAttr = 'present') {
-    const surface = `html[data-artifact-surface="${surfaceAttr}"]`;
+ *  Each tile carries its own inline PW×PH geometry + background from the
+ *  compositor — here we only center it (`margin:0 auto`) and gap it. */
+function presentDocumentLayoutCss(bundle) {
     // A non-paginated (auto/fill-height) document frame IS the page — give the frame
-    // itself page chrome. A paginated frame's wrapper stays transparent; its pages
-    // get chrome via .pagedjs_page below.
+    // itself page chrome. A paginated frame is removed and replaced by page tiles,
+    // which get their chrome from the [data-sg-page] rule below.
     const rules = bundle.frames
         .map((frame) => {
         const width = typeof frame.geometry.width === 'number' ? `${frame.geometry.width}px` : '100%';
         const minHeight = typeof frame.geometry.height === 'number' ? `min-height:${frame.geometry.height}px;` : '';
         const background = frameBackground(frame.layout, frame.background, bundle.display?.background);
-        return `[data-sg-frame-id="${frame.id}"]:not([data-sg-paginated]){width:${width};max-width:100%;margin:0 auto 32px;${minHeight}background:${background};box-shadow:0 6px 24px rgba(0,0,0,0.18);}`;
+        return `[data-sg-frame-id="${frame.id}"]:not([data-sg-page]){width:${width};max-width:100%;margin:0 auto 32px;${minHeight}background:${background};box-shadow:0 6px 24px rgba(0,0,0,0.18);}`;
     })
         .join('\n');
-    // The page column MUST use block flow, not flex: Chromium does not accumulate
-    // `counter-increment` across FLEX items, so a flex `.pagedjs_pages` renders the
-    // "Page N of M" footer (which resolves `counter(page)`) as "Page 1" on every
-    // page. Block boxes accumulate the page counter correctly. Pages center with
-    // `margin:0 auto` (fixed-width box in a full-width column) and gap with
-    // `margin-bottom`; the body block-stacks frames + scrolls.
+    // The page column uses block flow: each PW×PH tile centers with `margin:0 auto`
+    // (fixed-width box in a full-width column), gaps with `margin-bottom`, and the
+    // body block-stacks the tiles + scrolls. Page numbers are baked literal text in
+    // the per-tile furniture overlay, so there is no cross-tile `counter()` to keep.
     return `html,body{margin:0;padding:0;background:transparent;height:100%;}
 body{box-sizing:border-box;min-height:100%;overflow:auto;padding:48px 0;}
 [data-sg-frame]{position:relative;box-sizing:border-box;background:transparent;overflow:visible;}
-[data-sg-frame][data-sg-paginated]{display:block;width:100%;}
-${surface} .pagedjs_pages{display:block !important;width:auto !important;margin:0 !important;padding:0 !important;background:transparent !important;}
-${surface} .pagedjs_page{position:relative !important;left:auto !important;top:auto !important;margin:0 auto 32px !important;transform:none !important;background:#fff;box-shadow:0 6px 24px rgba(0,0,0,0.18);}
-${surface} .pagedjs_sheet{box-shadow:none !important;}
+[data-sg-frame][data-sg-page]{margin:0 auto 32px;overflow:hidden;box-shadow:0 6px 24px rgba(0,0,0,0.18);}
 ${furniturePositionCss()}
 ${rules}`;
 }
 // ---------------------------------------------------------------------------
-// Document pagination (P3.3). A `document` frame holds ONE flowing content
-// stream; when a Paged.js source is supplied the platform fragments it into page
-// boxes INSIDE the sandbox (CSS Paged Media — @page geometry, running headers/
-// footers, page counters, break rules). The page count is a render OUTPUT, never
-// authored or persisted (the authored `document` frame is the single source of
-// truth — frame model `ResolvedFrame.origin: 'derived'`). Print shares the same
-// fragmentation, so PDF export gets faithful page breaks for free.
+// Document pagination. A `document` frame holds ONE flowing content stream; the
+// native-columns compositor (columnsCompositorBootstrap) lays it out as a multi-
+// column flow INSIDE the sandbox (one column == one page) and materializes a
+// discrete page TILE per page. The page count is a render OUTPUT, never authored
+// or persisted (the authored `document` frame is the single source of truth —
+// frame model `ResolvedFrame.origin: 'derived'`). PDF export prints the same
+// tiles, so it matches the on-screen pagination exactly.
 //
 // A `document` frame paginates only when its height is a fixed page box (e.g.
 // US Letter 816×1056); a `document` with `height:'auto'` stays a single flowing
@@ -922,39 +919,85 @@ ${rules}`;
 // Defaults live in the model (DEFAULT_PAGE_MARGINS) so the validation cross-check
 // and this render agree on what an absent `pageMargins` side resolves to.
 // ---------------------------------------------------------------------------
-// The Paged.js source is a large (~500KB) static library; escapeScript scans it
-// for `</script` on every build. Memoize by identity so a session pays once.
-let escapedPagedCache = null;
-function escapedPagedSource(source) {
-    if (escapedPagedCache && escapedPagedCache.source === source)
-        return escapedPagedCache.escaped;
-    const escaped = escapeScript(source);
-    escapedPagedCache = { source, escaped };
-    return escaped;
-}
-/** The frames the platform paginates: `pages` layout with a fixed page box
+/** A frame the columns compositor paginates: `pages` layout with a fixed page box
  *  (numeric width AND height). A `'fill'`/`'auto'` pages frame is a single flowing
  *  page, not paginated. */
-function paginatedFrames(bundle) {
-    return bundle.frames.filter((frame) => frame.layout === 'pages'
+function isColumnPaginatedFrame(frame) {
+    return frame.layout === 'pages'
         && typeof frame.geometry.width === 'number'
-        && typeof frame.geometry.height === 'number');
+        && typeof frame.geometry.height === 'number';
+}
+/** The frames the platform paginates (see {@link isColumnPaginatedFrame}). */
+function paginatedFrames(bundle) {
+    return bundle.frames.filter(isColumnPaginatedFrame);
+}
+/** Rewrite a paginated frame's CSS for the native-columns compositor (forced page
+ *  breaks → column breaks; `position:running()` removed), covering BOTH `<style>`
+ *  blocks AND inline `style="…"` / `style='…'` attributes. An element with an inline
+ *  `style="break-before:page"` (the offer-letter signature-block idiom) would
+ *  otherwise survive un-mapped and only paginate by Chromium's lenient page→column
+ *  coercion inside multicol — not guaranteed cross-browser. Each value runs through
+ *  the same token-safe {@link rewriteAuthorCssForColumns}.
+ *
+ *  ONE left-to-right scan over an alternation whose `<style>`-block branch is FIRST,
+ *  so the scanner consumes a whole style element before it can reach a `style=`
+ *  literal sitting in that element's CSS text (an `[style]` attribute selector, a
+ *  `content:"…style=…"` string): only real markup attributes match the inline branch
+ *  — no double-processing. A style element's text can't contain `</style>`, so the
+ *  non-greedy block match is safe. (Limitation, mirroring the url() segmenter's: body
+ *  TEXT shaped exactly like `style="break-before:page"` would also be rewritten; that
+ *  pathological case is not worth a full HTML parser, and the value itself is still
+ *  token-safe — strings/url()/comments inside it are preserved. Only QUOTED
+ *  attribute values are matched; a rare unquoted single-declaration
+ *  `style=break-before:page` is left to the browser's lenient page→column coercion,
+ *  as it was before this mapping existed.) */
+export function rewritePaginatedContentStyles(html) {
+    return html.replace(/(<style\b[^>]*>)([\s\S]*?)(<\/style>)|(\sstyle\s*=\s*)("([^"]*)"|'([^']*)')/gi, (_m, blockOpen, blockCss, blockClose, attrPrefix, attrQuoted, dq, sq) => {
+        if (blockOpen !== undefined) {
+            return blockOpen + rewriteAuthorCssForColumns(blockCss) + blockClose;
+        }
+        const quote = attrQuoted[0];
+        const value = dq !== undefined ? dq : sq;
+        return attrPrefix + quote + rewriteAuthorCssForColumns(value) + quote;
+    });
+}
+/** A bundle whose author CSS is mapped for the native-columns compositor: every
+ *  shared `.css` file + each paginated frame's inline `<style>` blocks run through
+ *  {@link rewriteAuthorCssForColumns}. Build-time (no sandbox runtime twin).
+ *  Geometry, ids, furniture, and non-paginated frames are untouched, so the layout
+ *  + predicates computed from it are identical to the source bundle. */
+function rewriteBundleForColumns(bundle) {
+    const shared = bundle.shared;
+    const files = shared?.files;
+    const rewrittenFiles = files
+        ? Object.fromEntries(Object.entries(files).map(([path, content]) => [path, path.toLowerCase().endsWith('.css') ? rewriteAuthorCssForColumns(content) : content]))
+        : files;
+    return {
+        ...bundle,
+        // Rewrite shared `.css` files AND any `<style>` blocks in `shared.head` (an
+        // author can put CSS there too — its break/running rules must map for columns).
+        ...(shared
+            ? { shared: { ...shared, files: rewrittenFiles, ...(shared.head ? { head: rewritePaginatedContentStyles(shared.head) } : {}) } }
+            : {}),
+        frames: bundle.frames.map((frame) => isColumnPaginatedFrame(frame) ? { ...frame, content: rewritePaginatedContentStyles(frame.content) } : frame),
+    };
 }
-/** Whether a HOST-LESS render (PNG/PDF/inspect/standalone download) should carry
- *  the Paged.js source to fragment this bundle into a page column. THE single
+/** Whether a HOST-LESS render (PNG/PDF/inspect/standalone download) lays this
+ *  bundle out as a scrolling page COLUMN of compositor-built page tiles. THE single
  *  source of truth for that decision across every host-less caller (the headless
  *  render, the export route, the MCP export tool), so none drifts from the
  *  builder's actual column layout.
  *
  *  Requires a FULLY-paginated document — every frame is a `pages` frame — with at
  *  least one fixed page box. A MIXED artifact (pages + other layouts) is NOT
- *  paginated host-less: the column layout ({@link isPagesArtifact}) wouldn't
- *  apply, so it would fall to the clipped grid AND the render's page-box selector
- *  would switch to `.pagedjs_page` and drop the non-page frames entirely. Instead
- *  a mixed artifact renders as the grid with every frame present (the live editor,
- *  which PROMOTES pages into the grid, is the surface that paginates mixed). This
- *  also drops the `.some(layout === 'pages')` variants that shipped ~500KB of
- *  Paged.js for an auto/fill `pages` frame the builder never paginates. */
+ *  paginated host-less: the column layout ({@link isPagesArtifact}) wouldn't apply,
+ *  so it would fall to the clipped grid AND the render's page-box selector would
+ *  switch to the page TILES and drop the non-page frames entirely. Instead a mixed
+ *  artifact renders as the grid with every frame present (the live editor, which
+ *  composites pages into the grid, is the surface that paginates mixed). The
+ *  compositor itself is always inlined (no library to load), so this no longer
+ *  gates a multi-hundred-KB Paged.js fetch — only the host-less COLUMN vs GRID
+ *  layout choice + the page-box selector. */
 export function bundleNeedsPagination(bundle) {
     return isPagesArtifact(bundle) && paginatedFrames(bundle).length > 0;
 }
@@ -970,34 +1013,17 @@ function resolvePageMargins(frame) {
         left: m?.left ?? DEFAULT_PAGE_MARGINS.left,
     };
 }
-/** The OVERRIDABLE `@page` defaults for one document frame: author margins and a
- *  "Page N of M" counter in the bottom-RIGHT corner. Bottom-right (not -center) so
- *  it never sits under a centered/left footer furniture band, which also lives in
- *  the bottom margin. This sheet is applied BEFORE the author's shared CSS, so an
- *  author can override the margin and the counter box with their own CSS Paged
- *  Media. The page SIZE is NOT here — it is locked to the frame geometry by
- *  pageSizeRuleCss (applied LAST) so author CSS can't desync the page box from the
- *  canvas frame. Passed to Paged.js as stylesheet TEXT (never a URL — no fetch
- *  under `connect-src 'none'`). */
-function pageRuleCss(frame) {
-    const m = resolvePageMargins(frame);
-    return `@page{margin:${m.top}px ${m.right}px ${m.bottom}px ${m.left}px;`
-        + `@bottom-right{content:"Page " counter(page) " of " counter(pages);`
-        + `font:12px var(--sg-furniture-font, system-ui, -apple-system, sans-serif);color:#6b7280;}}`;
-}
-/** The AUTHORITATIVE `@page { size }` rule, locked to the frame geometry. Applied
- *  as the LAST sheet (after author CSS) so the paginated page box always matches
- *  the canvas frame's geometry — the page SIZE is the frame's `geometry`, not
- *  something author CSS overrides (which would clip/gap the geometry-forced frame
- *  box and desync the reported page count). Margins/margin-boxes stay overridable.
- *  This locks the GENERIC `@page` size (the common case); a named/pseudo page with
- *  its own size (e.g. `@page cover { size: A4 }`) is a deliberate advanced
- *  divergence and is left to the author — it will simply not match the canvas
- *  frame box, which is their choice. */
-function pageSizeRuleCss(frame) {
-    const width = frame.geometry.width;
-    const height = frame.geometry.height;
-    return `@page{size:${width}px ${height}px;}`;
+/** A content reset for the multi-column flow: cap replaced elements + tables to
+ *  the content-column width. Native multicol does NOT shrink an over-wide element
+ *  — it overflows the column HORIZONTALLY, which inflates the two-pass page-count
+ *  measure (the Range right edge extends past the last column → phantom pages).
+ *  Capping the common wide-content culprits (images, media, tables, code blocks) to
+ *  100% keeps the measure honest AND matches the page-document contract (content
+ *  fits the page). Low specificity so an author can opt out. (An author who FORCES
+ *  a plain block wider than the column can still inflate the count — documented.) */
+function columnFlowResetCss() {
+    return `[data-sg-doc-flow] img{max-width:100%;height:auto;}
+[data-sg-doc-flow] svg,[data-sg-doc-flow] video,[data-sg-doc-flow] canvas,[data-sg-doc-flow] table,[data-sg-doc-flow] pre{max-width:100%;}`;
 }
 /** Base style for the injected per-page furniture (running header/footer). Only
  *  font/color/positioning-context here — the actual top/bottom/left/right offset
@@ -1008,71 +1034,69 @@ function pageSizeRuleCss(frame) {
 function furniturePositionCss() {
     return `[data-sg-furniture]{position:absolute;font:12px var(--sg-furniture-font, system-ui, -apple-system, sans-serif);color:#374151;pointer-events:none;}`;
 }
-/** Host CSS that neutralizes Paged.js's default preview chrome (gray backdrop,
- *  centering, shadows) so each promoted page sits flush as a white artboard, and
- *  carries the base style for the injected header/footer furniture (its offset is
- *  set inline per page from the frame's margins). */
+/** Host CSS for the editor/export GRID pagination path: just the base style for
+ *  the injected per-page furniture overlay (running header/footer + page number).
+ *  The page tiles themselves are positioned by frameLayoutCss / the host's
+ *  apply-layout, and carry their content window + multi-column flow + background
+ *  inline from the columns compositor. */
 function paginationHostCss() {
-    return `.pagedjs_pages{display:block;width:auto;padding:0;background:transparent;}
-.pagedjs_page{margin:0;background:#fff;position:relative;box-shadow:none;}
-.pagedjs_sheet{box-shadow:none;}
-[data-sg-derived] .pagedjs_page{margin:0;}
-${furniturePositionCss()}`;
+    return furniturePositionCss();
 }
-/** The in-sandbox pagination bootstrap. After fonts settle it fragments each
- *  paginated `document` frame's flowing content via Paged.js and injects per-page
- *  running header/footer furniture (the first/last page variants override middle).
+export function columnPageGeometry(frame) {
+    const margins = resolvePageMargins(frame);
+    const width = frame.geometry.width;
+    const height = frame.geometry.height;
+    const contentWidth = width - margins.left - margins.right;
+    const contentHeight = height - margins.top - margins.bottom;
+    const gap = margins.right + margins.left + 40;
+    return { width, height, contentWidth, contentHeight, gap, pitch: contentWidth + gap, margins };
+}
+/** The in-sandbox NATIVE-COLUMNS pagination compositor (replaces Paged.js). After
+ *  fonts settle it lays each paginated `document` frame's flowing content out as a
+ *  multi-column flow (one column == one page), then materializes discrete page
+ *  TILES — one `[data-sg-frame][data-sg-page]` per page, each a `width`×`height`
+ *  box with a margin-inset `overflow:hidden` window holding a clone of the flow
+ *  translated `−i*pitch` so only page `i` shows — plus the furniture overlay
+ *  (running header/footer + a default "Page N of M"). The break/running author CSS
+ *  was already mapped to columns at build time ({@link rewriteAuthorCssForColumns}).
  *
- *  `promote` selects the DOM outcome:
- *   - true (live host: editor/present): every page box is PROMOTED to a top-level
- *     `[data-sg-frame]` with a derived id (`<sourceId>__p<n>`) so derived pages
- *     reuse the same per-frame machinery as authored frames (host chrome,
- *     selection, present, inspect); a `frame-pages` message tells the host to lay
- *     them out in a column.
- *   - false (export/print, host:'none'): pages stay in Paged.js's native
- *     `.pagedjs_page` structure in place, so Chromium's print engine maps each
- *     page box to one PDF page (`preferCSSPageSize`) — no guillotine.
+ *  `promote` selects only the tile LAYOUT:
+ *   - true (live host: editor/present grid): tiles are absolutely placed (the host's
+ *     apply-layout refines them) and a `frame-pages` message reports the derived
+ *     `<sourceId>__p<n>` ids so the host lays them out + drives selection/zoom/pan.
+ *   - false (export / scroll present / standalone): tiles are laid out by CSS
+ *     (presentDocumentLayoutCss) as a centered scroll column; no host message.
  *
- *  Runs after the Paged.js source defines the UMD global. */
-function paginationBootstrap(frames, artifactId, promote, sharedCss, renderId, hostedCanvas) {
+ *  Either way it sets `<html data-sg-paginated-done>` once finished — the settle
+ *  signal a host-less render (PNG/PDF/inspect) waits on. NOTE: no backticks in this
+ *  string-built bootstrap — they would close the template literal. */
+function columnsCompositorBootstrap(frames, artifactId, promote, renderId, hostedCanvas, displayBackground) {
     const configById = {};
     for (const frame of frames) {
         configById[frame.id] = {
-            css: pageRuleCss(frame),
-            sizeCss: pageSizeRuleCss(frame),
-            width: frame.geometry.width,
-            height: frame.geometry.height,
+            ...columnPageGeometry(frame),
             title: frame.title || 'Document',
-            margins: resolvePageMargins(frame),
+            background: frameBackground(frame.layout, frame.background, displayBackground),
             ...(frame.furniture ? { furniture: frame.furniture } : {}),
+            ...(frame.pageNumbers ? { pageNumbers: frame.pageNumbers } : {}),
         };
     }
     return `
 (() => {
   const artifactId = ${JSON.stringify(artifactId)};
   const renderId = ${JSON.stringify(renderId)};
-  const GAP = ${FRAME_LAYOUT_DEFAULT_GAP};
+  const FRAME_GAP = ${FRAME_LAYOUT_DEFAULT_GAP};
   const PROMOTE = ${JSON.stringify(promote)};
   const HOSTED_CANVAS = ${JSON.stringify(hostedCanvas)};
-  // Runtime twin of the core sanitizer (src/core/artifact-paged-css.ts), injected
-  // verbatim. Neutralizes every non-absolute url() to about:blank in the CSS handed
-  // to Paged.js, because Paged.js calls new URL(value) (no base) on each url() token
-  // and a scheme-less ref throws synchronously, aborting the whole pagination run.
-  // Only the Paged-fed copy is sanitized — the head <style> keeps real url()s and
-  // paints fonts/backgrounds. Runs AFTER asset resolution (the embedded SHARED_CSS
-  // is already token-rewritten), so it can't fight the ?at= rewrite.
-  ${SANITIZE_CSS_URLS_TWIN}
-  const SHARED_CSS = sanitizeCssUrlsForPagination(${JSON.stringify(sharedCss)});
+  const DONE_ATTR = 'data-sg-paginated-done';
   const PAGINATE = ${JSON.stringify(configById)};
   const cssEscape = (value) => (window.CSS && CSS.escape) ? CSS.escape(value) : String(value);
-  // The UMD global is Paged (paged.js) or PagedModule (paged.min.js).
-  const Paged = window.Paged || window.PagedModule;
-  // Pick the page-position variant: page 1 -> first (or middle), last page -> last
-  // (or middle), every other page -> middle.
+  // Pick the page-position furniture variant: page 1 -> first (or middle), last
+  // page -> last (or middle), every other page -> middle.
   const pickSlot = (slots, index, count) => index === 0
     ? (slots.first || slots.middle)
     : (index === count - 1 ? (slots.last || slots.middle) : slots.middle);
-  const addRegion = (page, html, region, margins) => {
+  const addRegion = (tile, html, region, margins, anchor, offset) => {
     if (!html) return;
     const el = document.createElement('div');
     el.setAttribute('data-sg-furniture', '');
@@ -1081,213 +1105,214 @@ function paginationBootstrap(frames, artifactId, promote, sharedCss, renderId, h
     el.style.left = margins.left + 'px';
     el.style.right = margins.right + 'px';
     el.innerHTML = html;
-    page.appendChild(el);
-    // Position from the MEASURED height so a tall letterhead never overlaps the
-    // body: bottom-align the header to just above the content (within the top
-    // margin), top-align the footer to just below the content (within the bottom
-    // margin). Clamp to a min inset from the page edge. The auto "Page N of M"
-    // counter is bottom-RIGHT, so a centered/left footer band clears it. If a
-    // margin is smaller than its furniture the author must grow pageMargins —
-    // out-of-flow furniture can't reserve space.
+    tile.appendChild(el);
+    // Two placements, by anchor:
+    //  - 'page' (letterhead/masthead): pin to the page's OUTER edge — header at the
+    //    top edge, footer at the bottom edge, offset px in — independent of margin
+    //    depth, so a masthead rides high with a deep body margin (no content-padding
+    //    hack). Height-independent.
+    //  - 'content' (default, running header/footer): bottom-align the header to just
+    //    above the content (within the top margin) / top-align the footer to just
+    //    below it, from the MEASURED height so a tall band never overlaps the body.
+    // The default "Page N of M" counter is bottom-RIGHT, so a centered/left footer
+    // band clears it. If a margin is smaller than its furniture the author must grow
+    // pageMargins — out-of-flow furniture can't reserve space.
     const GAP = 10, MIN_INSET = 8;
     const place = () => {
+      if (anchor === 'page') {
+        // Pin to the page's outer edge, offset px in (default MIN_INSET).
+        const inset = (typeof offset === 'number') ? offset : MIN_INSET;
+        if (region === 'header') el.style.top = inset + 'px';
+        else el.style.bottom = inset + 'px';
+        return;
+      }
+      // Content anchor: offset is the GAP between the band and the content edge
+      // (default GAP) — so it has effect on both anchors, per the model.
+      const gap = (typeof offset === 'number') ? offset : GAP;
       const h = el.offsetHeight;
-      if (region === 'header') el.style.top = Math.max(MIN_INSET, margins.top - GAP - h) + 'px';
-      else el.style.bottom = Math.max(MIN_INSET, margins.bottom - GAP - h) + 'px';
+      if (region === 'header') el.style.top = Math.max(MIN_INSET, margins.top - gap - h) + 'px';
+      else el.style.bottom = Math.max(MIN_INSET, margins.bottom - gap - h) + 'px';
     };
     place();
     // A logo <img> without a fixed height measures 0 until it loads, which would
-    // mis-place the band; re-place once each image settles (the render waits for
-    // network-idle, so the reposition lands before capture).
+    // mis-place a content-anchored band; re-place once each image settles (the render
+    // waits for network-idle, so the reposition lands before capture).
     el.querySelectorAll('img').forEach((img) => { if (!img.complete) img.addEventListener('load', place); });
   };
-  const addFurniture = (page, furniture, index, count, margins) => {
-    if (furniture.header) addRegion(page, pickSlot(furniture.header, index, count), 'header', margins);
-    if (furniture.footer) addRegion(page, pickSlot(furniture.footer, index, count), 'footer', margins);
+  const addFurniture = (tile, furniture, index, count, margins) => {
+    if (furniture.header) addRegion(tile, pickSlot(furniture.header, index, count), 'header', margins, furniture.header.anchor, furniture.header.offset);
+    if (furniture.footer) addRegion(tile, pickSlot(furniture.footer, index, count), 'footer', margins, furniture.footer.anchor, furniture.footer.offset);
   };
-  const paginate = async () => {
-    if (!Paged || !Paged.Previewer) return;
-    // Paged.js fragments after fonts settle so line breaks match the final type.
-    // The host inlines workspace-asset fonts as data: URLs, so this normally
-    // resolves immediately; but TIME-BOX it so a font that falls back to a slow
-    // network endpoint can't stall pagination for many seconds — past the cap we
-    // paginate with whatever loaded (worst case: a fallback-metric reflow when the
-    // late font swaps in, far better than a multi-second blank canvas).
-    try {
-      if (document.fonts && document.fonts.ready) {
-        await Promise.race([document.fonts.ready, new Promise(function (r) { setTimeout(r, ${FONT_READY_TIMEOUT_MS}); })]);
-      }
-    } catch {}
+  // The DEFAULT page number, bottom-right within the bottom margin (replaces the
+  // removed Paged.js @page{@bottom-right{counter(page)}} default). Baked as literal
+  // text per tile — no cross-tile counter() to keep — so every document keeps page
+  // numbers even when it declares no furniture.
+  const addPageNumber = (tile, index, count, margins, cfg) => {
+    cfg = cfg || {};
+    if (cfg.show === false) return;
+    if (cfg.showOnFirst === false && index === 0) return;
+    const startAt = (typeof cfg.startAt === 'number') ? cfg.startAt : 1;
+    const n = startAt + index;
+    const m = startAt + count - 1;
+    const format = (typeof cfg.format === 'string') ? cfg.format : 'Page {n} of {m}';
+    const text = format.replace(/\\{n\\}/g, String(n)).replace(/\\{m\\}/g, String(m));
+    if (!text) return;
+    const position = cfg.position || 'bottom-right';
+    const isTop = position.indexOf('top-') === 0;
+    const el = document.createElement('div');
+    el.setAttribute('data-sg-furniture', '');
+    el.setAttribute('data-sg-furniture-region', 'pagenum');
+    el.style.color = '#6b7280';
+    // Vertical: offset px from the nearer page edge, else centered in the band
+    // (the legacy default: bottom-right at about bottom-margin/2).
+    const band = isTop ? margins.top : margins.bottom;
+    const v = (typeof cfg.offset === 'number') ? cfg.offset : Math.max(8, Math.round(band / 2) - 8);
+    el.style[isTop ? 'top' : 'bottom'] = v + 'px';
+    // Horizontal: aligned to the content column's left/right edge, or centered
+    // WITHIN the content column (spanning left..right with text-align, like a
+    // furniture band) so it stays aligned under asymmetric margins.
+    if (position.indexOf('-left') >= 0) el.style.left = margins.left + 'px';
+    else if (position.indexOf('-right') >= 0) el.style.right = margins.right + 'px';
+    else { el.style.left = margins.left + 'px'; el.style.right = margins.right + 'px'; el.style.textAlign = 'center'; }
+    el.textContent = text;
+    tile.appendChild(el);
+  };
+  const compose = async () => {
     const expansions = [];
-    // Frames whose pagination THREW (e.g. a CSS pattern Paged.js still chokes on).
-    // Reported to the host so it can surface a non-blocking "couldn't paginate"
-    // hint instead of silently showing a clipped, margin-less single page.
+    // Frames whose composition THREW. Reported to the host so it can surface a
+    // non-blocking "couldn't paginate" hint instead of a clipped single page.
     const failed = [];
-    for (const id of Object.keys(PAGINATE)) {
-      const source = document.querySelector('[data-sg-frame-id="' + cssEscape(id) + '"]');
-      if (!source || !source.parentNode) continue;
-      const cfg = PAGINATE[id];
-      const content = document.createElement('div');
-      // Wrap the flowing stream in a single container element. Paged.js's
-      // createBreakToken walks up from the break node and dereferences a null
-      // parent when the paginated root's DIRECT children are the breakable blocks
-      // (a long paragraph split mid-element crashes); a wrapper gives every block
-      // a non-null parent chain within the root. (Verified: bare children throw
-      // "Cannot read properties of null (reading 'getAttribute')"; wrapped works.)
-      content.innerHTML = '<div data-sg-doc-flow>' + source.innerHTML + '</div>';
-      // Hoist any <style>/<link> out of the flowing stream into <head>. A style
-      // node sitting IN the paginated flow trips Paged.js's fragmenter (it counts
-      // as a child to walk but has no box) — in the editor surface it yields a
-      // blank first page + over-pagination (e.g. an inline @font-face block paged a
-      // 2-page letter to 4). Styles still apply globally from <head>, where they
-      // belong. Only document frames reach this bootstrap, so decks/apps are
-      // untouched. We ALSO collect inline <style> text into inlineCss and feed it
-      // to the paginator below: Paged.js only honors @page / break / running rules
-      // from the sheets passed to preview(), so an author who put those in an
-      // inline <style> (rather than shared.files) would otherwise see them painted
-      // but ignored for pagination.
-      let inlineCss = '';
-      content.querySelectorAll('style, link[rel="stylesheet"]').forEach((node) => {
-        if (node.tagName === 'STYLE') inlineCss += (node.textContent || '') + ' ';
-        document.head.appendChild(node);
-      });
-      // Render straight into the source frame in BOTH modes (in place). Promote
-      // then moves each page box out to a top-level frame (the canvas owns layout);
-      // export leaves them in place so Paged.js's print structure maps to PDF pages.
-      // Rendering promote into an OFFSCREEN position:absolute container made Paged.js
-      // spuriously split the flow wrapper and emit a blank leading page (plus a
-      // tightened first page) whenever an author used a position:running() letterhead
-      // band — an editor-canvas-only defect (export, which always rendered in place,
-      // was clean). Rendering in place gives promote the exact in-flow geometry
-      // export uses, so the running-element pagination matches. data-sg-derived
-      // still tags the source so paginationHostCss neutralizes Paged.js preview
-      // chrome while the pages live inside it (before promotion).
-      // Capture the authored markup before clearing so a pagination FAILURE restores
-      // the frame to its EXACT original DOM (an un-paginated single flow), not the
-      // doc-flow-wrapped, style-hoisted content copy — which would drop direct-child
-      // selectors like [data-sg-frame-id] > .cover. (source still holds its original
-      // inline styles here: the hoist above moved style/link out of the content clone.)
-      const originalHtml = source.innerHTML;
-      if (PROMOTE) source.setAttribute('data-sg-derived', '');
-      source.innerHTML = '';
-      let pageEls;
+    // ALWAYS run on every exit path (success, per-frame throw, or top-level throw):
+    // mark the settle signal + post frame-pages, so a host-less render's wait
+    // resolves and the live host never holds the reveal forever.
+    const finish = () => {
+      try { document.documentElement.setAttribute(DONE_ATTR, ''); } catch {}
+      if (PROMOTE) {
+        try { parent.postMessage({ channel: 'studiograph-artifact', artifactId: artifactId, type: 'frame-pages', renderId: renderId, expansions: expansions, failed: failed }, '*'); } catch {}
+      }
+    };
+    try {
+      // Measure after fonts settle so column breaks match the final type. Fonts are
+      // inlined as data: URLs by the host, so this normally resolves immediately;
+      // TIME-BOX it so a slow font endpoint can't stall composition for seconds.
       try {
-        const previewer = new Paged.Previewer();
-        // Sheet ORDER is the cascade, in three layers:
-        //   1. sg-pagination.css — the OVERRIDABLE platform defaults (margins +
-        //      bottom-right page counter), FIRST so author CSS can override them.
-        //   2. sg-shared.css — the AUTHOR's CSS, so their @page margins, margin
-        //      boxes (@top-center/@bottom-left/…), named pages, running elements
-        //      (position:running()), and break rules win over our defaults. This is
-        //      what keeps documents fully open to divergent CSS Paged Media layouts.
-        //   3. sg-page-size.css — the AUTHORITATIVE @page{size}, LAST, locked to the
-        //      frame geometry so author CSS can't desync the page box from the
-        //      canvas frame (which is sized + laid out from geometry).
-        // (1b) sg-frame-inline.css — CSS lifted from the frame's own inline <style>
-        //      blocks, in the author layer so its @page/break/running rules paginate
-        //      too. Objects are CSS TEXT (no fetch under connect-src 'none').
-        const sheets = [{ 'sg-pagination.css': cfg.css }];
-        if (SHARED_CSS) sheets.push({ 'sg-shared.css': SHARED_CSS });
-        // Sanitize inline frame CSS too: a frame <style> with a relative url()
-        // would crash Paged.js exactly like the shared sheet. (SHARED_CSS is
-        // sanitized once up top.)
-        const safeInlineCss = sanitizeCssUrlsForPagination(inlineCss);
-        if (safeInlineCss) sheets.push({ 'sg-frame-inline.css': safeInlineCss });
-        sheets.push({ 'sg-page-size.css': cfg.sizeCss });
-        await previewer.preview(content, sheets, source);
-        pageEls = Array.prototype.slice.call(source.querySelectorAll('.pagedjs_page'));
-      } catch (error) {
-        console.error('Artifact pagination failed for frame ' + id, error);
-        failed.push({ id: id, reason: String((error && error.message) || error) });
-        // Restore the source to its exact authored DOM as an un-paginated single flow
-        // (both modes now render in place, so the source was cleared above).
-        source.removeAttribute('data-sg-derived');
-        source.innerHTML = originalHtml;
-        continue;
+        if (document.fonts && document.fonts.ready) {
+          await Promise.race([document.fonts.ready, new Promise(function (r) { setTimeout(r, ${FONT_READY_TIMEOUT_MS}); })]);
+        }
+      } catch {}
+      for (const id of Object.keys(PAGINATE)) {
+        const source = document.querySelector('[data-sg-frame-id="' + cssEscape(id) + '"]');
+        if (!source || !source.parentNode) continue;
+        const cfg = PAGINATE[id];
+        try {
+          const PW = cfg.width, PH = cfg.height, CW = cfg.contentWidth, CH = cfg.contentHeight;
+          const GAP = cfg.gap, PITCH = cfg.pitch, m = cfg.margins;
+          // Hoist inline <style>/<link> out of the flow into <head> so they apply
+          // ONCE (not duplicated per page clone) and don't sit inside the multicol
+          // flow. They were rewritten for columns at build time with the shared CSS.
+          source.querySelectorAll('style, link[rel="stylesheet"]').forEach((node) => document.head.appendChild(node));
+          const flowHtml = source.innerHTML;
+          // Two-pass deterministic geometry: multicol STRETCHES columns to fill the
+          // container, drifting positions, so pass 1 measures the page count at a
+          // wide width and pass 2 pins the flow to exactly n*CW+(n-1)*GAP (+ an
+          // explicit column-count) so columns are exactly CW. Measure the real
+          // content extent via a Range (stretched columns inflate scrollWidth and
+          // would invent phantom empty pages).
+          const master = document.createElement('div');
+          master.setAttribute('data-sg-measure', '');
+          // data-sg-doc-flow so the columnFlowResetCss media caps apply during the
+          // measure too (else a wide img/table overflows here and over-counts pages).
+          master.setAttribute('data-sg-doc-flow', '');
+          master.style.cssText = 'position:absolute;left:-99999px;top:0;visibility:hidden;height:' + CH + 'px;width:8000px;column-width:' + CW + 'px;column-gap:' + GAP + 'px;column-fill:auto;';
+          master.innerHTML = flowHtml;
+          document.body.appendChild(master);
+          const measure = () => {
+            const range = document.createRange();
+            range.selectNodeContents(master);
+            const right = range.getBoundingClientRect().right - master.getBoundingClientRect().left;
+            return Math.max(1, Math.ceil((right - 1) / PITCH));
+          };
+          let n = measure();
+          let exact = n * CW + (n - 1) * GAP;
+          master.style.width = exact + 'px';
+          master.style.columnCount = String(n);
+          n = measure();
+          exact = n * CW + (n - 1) * GAP;
+          document.body.removeChild(master);
+          const reported = [];
+          const startLeft = source.offsetLeft;
+          let cursorTop = source.offsetTop;
+          for (let i = 0; i < n; i++) {
+            const pid = id + '__p' + (i + 1);
+            const tile = document.createElement('section');
+            tile.setAttribute('data-sg-frame', '');
+            tile.setAttribute('data-sg-frame-id', pid);
+            tile.setAttribute('data-frame-layout', 'pages');
+            tile.setAttribute('data-sg-derived-from', id);
+            tile.setAttribute('data-sg-page', String(i + 1));
+            tile.setAttribute('role', 'group');
+            tile.setAttribute('aria-label', cfg.title + ' — page ' + (i + 1));
+            tile.style.width = PW + 'px';
+            tile.style.height = PH + 'px';
+            tile.style.background = cfg.background;
+            // PROMOTE (editor grid): place absolutely; the host's apply-layout
+            // refines with the same column math. Scroll modes leave the position to
+            // presentDocumentLayoutCss (margin:0 auto centering).
+            if (PROMOTE) { tile.style.left = startLeft + 'px'; tile.style.top = cursorTop + 'px'; cursorTop += PH + FRAME_GAP; }
+            const win = document.createElement('div');
+            win.setAttribute('data-sg-page-window', '');
+            win.style.cssText = 'position:absolute;overflow:hidden;top:' + m.top + 'px;left:' + m.left + 'px;width:' + CW + 'px;height:' + CH + 'px;';
+            const flow = document.createElement('div');
+            flow.setAttribute('data-sg-doc-flow', '');
+            flow.style.cssText = 'height:' + CH + 'px;width:' + exact + 'px;column-width:' + CW + 'px;column-gap:' + GAP + 'px;column-fill:auto;column-count:' + n + ';transform:translateX(' + (-i * PITCH) + 'px);';
+            flow.innerHTML = flowHtml;
+            // Clone hygiene: each tile holds a full clone of the flow, so author ids
+            // repeat across tiles. We do NOT strip them — the clones are IDENTICAL,
+            // so an SVG url(#grad)/href="#x" resolves to the first matching id (same
+            // gradient/anchor on every page); stripping would instead break a
+            // gradient's own def→fill reference WITHIN the clone. The host draws a11y
+            // from its own per-tile proxies, so duplicate ids don't reach the a11y tree.
+            win.appendChild(flow);
+            tile.appendChild(win);
+            addFurniture(tile, cfg.furniture || {}, i, n, m);
+            addPageNumber(tile, i, n, m, cfg.pageNumbers);
+            source.parentNode.insertBefore(tile, source);
+            reported.push({ id: pid, width: PW, height: PH });
+          }
+          source.parentNode.removeChild(source);
+          expansions.push({ sourceId: id, title: cfg.title, pages: reported });
+        } catch (error) {
+          console.error('Artifact column pagination failed for frame ' + id, error);
+          failed.push({ id: id, reason: String((error && error.message) || error) });
+          // Leave the source frame in place as an un-paginated single flow.
+          continue;
+        }
       }
-      const furniture = cfg.furniture || {};
-      const margins = cfg.margins;
-      if (!PROMOTE) {
-        pageEls.forEach((page, index) => addFurniture(page, furniture, index, pageEls.length, margins));
-        source.setAttribute('data-sg-paginated', '');
-        source.setAttribute('data-sg-pages', String(pageEls.length));
-        continue;
+      // A document's author CSS often sets a body background (the page color). The
+      // hoisted inline styles + the head shared CSS can paint the WHOLE hosted
+      // surface behind the tiles (the editor grid reads as a solid slab, present
+      // loses page separation). Re-assert the transparent canvas LAST so the tiles
+      // keep their own background and the gaps show the canvas. HOSTED_CANVAS only
+      // (host iframe: editor grid + live present); standalone export / PDF / PNG —
+      // where body IS the document backdrop — are untouched.
+      if (HOSTED_CANVAS) {
+        const canvasReset = document.createElement('style');
+        canvasReset.setAttribute('data-sg-canvas-reset', '');
+        canvasReset.textContent = 'html,body{background:transparent !important;}';
+        document.head.appendChild(canvasReset);
       }
-      const startLeft = source.offsetLeft;
-      let cursorTop = source.offsetTop;
-      const reported = [];
-      pageEls.forEach((page, index) => {
-        addFurniture(page, furniture, index, pageEls.length, margins);
-        // Force the page-box size on the moved element so it survives leaving the
-        // Paged.js .pagedjs_pages flow; margin boxes use custom props set on
-        // .pagedjs_page itself, which travel with it.
-        page.style.width = cfg.width + 'px';
-        page.style.height = cfg.height + 'px';
-        const pid = id + '__p' + (index + 1);
-        const frame = document.createElement('section');
-        frame.setAttribute('data-sg-frame', '');
-        frame.setAttribute('data-sg-frame-id', pid);
-        frame.setAttribute('data-frame-layout', 'pages');
-        frame.setAttribute('data-sg-derived-from', id);
-        frame.setAttribute('data-sg-page', String(index + 1));
-        frame.setAttribute('role', 'group');
-        frame.setAttribute('aria-label', cfg.title + ' — page ' + (index + 1));
-        frame.style.width = cfg.width + 'px';
-        frame.style.height = cfg.height + 'px';
-        // Re-establish BOTH page counters that Paged.js kept on the .pagedjs_pages
-        // container we removed by promoting each page to its own top-level frame:
-        // the pages-total on EVERY page so "of M" resolves M (not 0), and a
-        // page-zero reset on the FIRST page so the running number accumulates across
-        // the promoted sibling frames (1..M). Without an explicit reset of the page
-        // counter on a common scope, Chromium implicitly resets it per element and
-        // every footer reads "Page 1". counter-reset scopes to following siblings,
-        // so resetting on the first page also restarts numbering per document when an
-        // artifact has more than one paginated frame.
-        frame.style.counterReset = (index === 0 ? 'page 0 ' : '') + 'pages ' + pageEls.length;
-        // Initial column placement (host apply-layout refines with the same math).
-        frame.style.left = startLeft + 'px';
-        frame.style.top = cursorTop + 'px';
-        cursorTop += cfg.height + GAP;
-        frame.appendChild(page);
-        source.parentNode.insertBefore(frame, source);
-        reported.push({ id: pid, width: cfg.width, height: cfg.height });
-      });
-      // Promotion moved every page box out of the source frame; drop the now-empty
-      // source (its Paged.js .pagedjs_pages shell). Both modes render in place now,
-      // so there is no separate offscreen container to remove.
-      source.parentNode.removeChild(source);
-      expansions.push({ sourceId: id, title: cfg.title, pages: reported });
-    }
-    // A document's author CSS usually sets a body background (the page color). The
-    // bootstrap hoists the frame's inline style to head at runtime, so that rule wins
-    // over the platform's transparent canvas and paints the WHOLE hosted surface
-    // behind the page boxes -- the editor grid reads as a solid slab, the present
-    // view loses its page separation -- instead of pages floating on the canvas.
-    // Re-assert the transparent canvas LAST (after the hoisted author styles): the
-    // page boxes keep their own background, so pages stay their page color and the
-    // gaps show the canvas. HOSTED_CANVAS only (host iframe: editor grid + live
-    // present), so standalone export / PDF / PNG -- where body IS the document
-    // backdrop -- are untouched. Runs for both promote and present (present returns
-    // just below). (Only document frames reach this bootstrap. NOTE: no backticks in
-    // this string-built bootstrap -- they close the template literal.)
-    if (HOSTED_CANVAS) {
-      const canvasReset = document.createElement('style');
-      canvasReset.setAttribute('data-sg-canvas-reset', '');
-      canvasReset.textContent = 'html,body{background:transparent !important;}';
-      document.head.appendChild(canvasReset);
+      if (PROMOTE) {
+        // Renumber data-frame-index across all top-level frames in DOM order so
+        // selection's frameIndex stays consistent after the tiles replace the source.
+        Array.prototype.slice.call(document.querySelectorAll('[data-sg-frame]'))
+          .forEach((el, i) => el.setAttribute('data-frame-index', String(i)));
+      }
+    } finally {
+      finish();
     }
-    if (!PROMOTE) return;
-    // Renumber data-frame-index across all top-level frames in DOM order so
-    // selection's frameIndex stays consistent after promotion.
-    Array.prototype.slice.call(document.querySelectorAll('[data-sg-frame]'))
-      .forEach((el, i) => el.setAttribute('data-frame-index', String(i)));
-    // Always post — even with zero successful expansions — so the host knows
-    // pagination has SETTLED and stops holding the reveal (a frame that failed
-    // to paginate just renders as its un-paginated single flow).
-    try { parent.postMessage({ channel: 'studiograph-artifact', artifactId, type: 'frame-pages', renderId, expansions, failed }, '*'); } catch {}
   };
-  if (document.readyState === 'loading') window.addEventListener('DOMContentLoaded', () => { paginate(); });
-  else paginate();
+  if (document.readyState === 'loading') window.addEventListener('DOMContentLoaded', () => { compose(); });
+  else compose();
 })();`;
 }
 /**
@@ -1319,8 +1344,8 @@ export function buildFrameDocument(bundle, ctx) {
     const deckStandalone = ctx.host === 'none' && !!ctx.interactive
         && !whiteboard && !fullBleed && !isPagesArtifact(bundle);
     // A present document scrolls through its pages (PDF-style) instead of stepping
-    // frame-by-frame: it keeps Paged.js's natural vertical .pagedjs_pages flow (no
-    // promotion) and uses the scroll-column layout + a non-stepper runtime.
+    // frame-by-frame: the compositor builds page tiles (no host promotion) laid out
+    // by the scroll-column layout, with a non-stepper runtime.
     const presentDocument = isPresent && !fullBleed && isPagesArtifact(bundle);
     // A standalone (downloaded HTML) document reads the same way: a PDF-style page
     // column that scrolls natively. surface is 'export' (not 'present') and there is
@@ -1330,10 +1355,9 @@ export function buildFrameDocument(bundle, ctx) {
     const documentStandalone = ctx.host === 'none' && !!ctx.interactive && !fullBleed && isPagesArtifact(bundle);
     // A STATIC document export (PNG/PDF — host:'none', non-interactive) lays pages
     // out as a column too. The grid would give the single `pages` source frame a
-    // one-page fixed height + overflow:hidden, clipping every page after the first
-    // (Paged.js stacks them inside that clipped box); the column stacks each
-    // `.pagedjs_page` as a visible, measurable box so per-page PNG/PDF capture sees
-    // every page.
+    // one-page fixed height + overflow:hidden, clipping every page after the first;
+    // the column stacks each compositor-built page tile as a visible, measurable box
+    // so per-page PNG/PDF capture sees every page.
     const documentExport = ctx.host === 'none' && !ctx.interactive && !fullBleed && isPagesArtifact(bundle);
     // Every path that lays pages out as a column rather than the grid.
     const scrollDocument = presentDocument || documentStandalone || documentExport;
@@ -1349,7 +1373,7 @@ export function buildFrameDocument(bundle, ctx) {
             : fullBleed
                 ? fullBleedLayoutCss(bundle)
                 : scrollDocument
-                    ? presentDocumentLayoutCss(bundle, surface)
+                    ? presentDocumentLayoutCss(bundle)
                     : isPresent && !whiteboard
                         ? presentLayoutCss(bundle)
                         : frameLayoutCss(bundle, layout, ctx.host === 'iframe' ? ctx.colorScheme : undefined);
@@ -1367,12 +1391,26 @@ export function buildFrameDocument(bundle, ctx) {
             : isPresent && !presentDocument && !whiteboard
                 ? presentRuntimeScript(bundle.artifactId)
                 : frameRuntimeScript(bundle.artifactId, surface, fullBleed, whiteboard);
-    // Document frames paginate when a Paged.js source is supplied (full-bleed is a
-    // single non-document frame, never paginated).
-    const paginate = !fullBleed && ctx.pagedSource ? paginatedFrames(bundle) : [];
-    // Promote each page to a top-level frame for the live host's grid (editor) — but
-    // NOT for a present document, which keeps Paged.js's native vertical flow so its
-    // pages scroll as one column (export/host:none never promotes either).
+    // Document frames paginate via the inlined native-columns compositor (no library
+    // to load). Full-bleed is a single non-document frame, never paginated. The gate
+    // is host-aware (matches the pre-columns pagedSource gate, so behavior is
+    // unchanged): a LIVE host (editor/present iframe) composites ANY paginated frame
+    // into the grid — including a MIXED artifact's lone `pages` frame, which the host
+    // promotes alongside the other frames. A HOST-LESS render only composites a PURE
+    // pages document (every frame is `pages` → the scroll-column layout applies); a
+    // mixed host-less render leaves the `pages` frame as a single grid box (no scroll
+    // column to lay tiles in → unpositioned tiles would overlap), exactly as
+    // `bundleNeedsPagination` (isPagesArtifact) gated before.
+    const paginatable = !fullBleed ? paginatedFrames(bundle) : [];
+    const paginate = paginatable.length > 0 && (ctx.host === 'iframe' || isPagesArtifact(bundle)) ? paginatable : [];
+    // When the doc paginates, map its author CSS (shared + paginated frames' inline
+    // <style>) for columns — forced page breaks → column breaks, position:running()
+    // neutralized — so the head + body emit the column-ready CSS. Geometry/ids/layout
+    // are unchanged, so everything else still reads from the source `bundle`.
+    const docBundle = paginate.length ? rewriteBundleForColumns(bundle) : bundle;
+    // Compose pages into the live host's grid as absolutely-placed tiles (editor) —
+    // but NOT for a present document, which lays its page tiles out as a CSS scroll
+    // column (export/host:none never promotes either).
     const promote = ctx.host === 'iframe' && !presentDocument;
     const head = [
         '<meta charset="utf-8">',
@@ -1380,21 +1418,24 @@ export function buildFrameDocument(bundle, ctx) {
         ctx.baseHref ? `<base href="${escapeAttribute(ctx.baseHref)}">` : '',
         '<meta name="generator" content="Studiograph Artifact Canvas">',
         `<title>${escapeHtml(bundle.title)}</title>`,
-        bundle.shared?.head ?? '',
+        docBundle.shared?.head ?? '',
         tokensStyleTag(bundle.tokens),
         // The whiteboard ink-token contract (theme-aware --sg-ink/-muted/-surface).
         // Before the author's shared CSS so authored rules can reference the vars;
         // only a whiteboard surface is platform-themed, so other layouts emit nothing.
         whiteboard ? `<style data-artifact-whiteboard-tokens>${whiteboardThemeTokensCss(ctx.colorScheme, ctx.host, whiteboardStandalone)}</style>` : '',
-        sharedStyleTags(bundle),
+        sharedStyleTags(docBundle),
         `<style data-artifact-frame-layout>\n${layoutCss}\n</style>`,
         // Bake the grab cursor for an always-hand surface (present whiteboard) so it
         // shows from first paint instead of waiting for the runtime's load handler.
         handCursorByDefault ? '<style data-artifact-cursor>html,body{cursor:grab;}</style>' : '',
-        // The editor/export page-neutralization + furniture CSS. A present document
-        // folds its own page chrome + furniture into presentDocumentLayoutCss (its
-        // pages scroll, they aren't promoted/printed), so it skips this.
+        // The editor/export GRID furniture base CSS. A scroll document folds the same
+        // furniture base into presentDocumentLayoutCss, so it skips this.
         paginate.length && !scrollDocument ? `<style data-artifact-pagination>\n${paginationHostCss()}\n</style>` : '',
+        // Content reset for the multi-column flow (caps over-wide media/tables so they
+        // don't overflow the column and inflate the page-count measure). Applies to the
+        // measure master + every tile clone (both carry data-sg-doc-flow).
+        paginate.length ? `<style data-artifact-columns-reset>\n${columnFlowResetCss()}\n</style>` : '',
         libraryTags(bundle.libraries ?? [], ctx.librarySources),
         // A live host (iframe) drives chrome/transform; a standalone interactive
         // whiteboard / deck self-hosts its own pan-zoom / stepper — all need the runtime.
@@ -1406,11 +1447,10 @@ export function buildFrameDocument(bundle, ctx) {
     // (a present document scrolls; a whiteboard/full-bleed present fills).
     const staticPresentActive = ctx.host === 'none' && isPresent && !scrollDocument && !whiteboard && !fullBleed;
     const body = [
-        frameContainersHtml(bundle, staticPresentActive),
+        frameContainersHtml(docBundle, staticPresentActive),
         whiteboardStandalone ? whiteboardStandaloneToolbarHtml() : '',
         deckStandalone ? deckStandaloneControlsHtml() : '',
-        paginate.length ? `<script data-artifact-paged>${escapedPagedSource(ctx.pagedSource)}</script>` : '',
-        paginate.length ? `<script data-artifact-pagination>${escapeScript(paginationBootstrap(paginate, bundle.artifactId, promote, sharedCssText(bundle), ctx.renderId ?? '', ctx.host === 'iframe'))}</script>` : '',
+        paginate.length ? `<script data-artifact-pagination>${escapeScript(columnsCompositorBootstrap(paginate, bundle.artifactId, promote, ctx.renderId ?? '', ctx.host === 'iframe', bundle.display?.background))}</script>` : '',
         brokenImageScriptTag(),
         sharedScriptTags(bundle),
     ].filter(Boolean).join('\n');