Add layout pagination package and demos

README.md

@@ -28,6 +28,7 @@ Vitrine is organized as a pnpm workspace monorepo with several publishable packa
 |---------|-----------|----------|-------------|
 | Core | `packages/core` | `vitrine` | Block tree, rendering, events, hit-testing, frustum culling — zero GUI dependencies |
 | GUI | `packages/gui` | `vitrine-gui` | High-level GUI controls, theming, layout, and `VitrineComponent` |
+| Layout & Pagination | `packages/layout-pagination` | `vitrine-layout-pagination` | Renderer-agnostic document layout and pagination contracts |
 | Tables | `packages/tables` | `vitrine-tables` | Table layout model and extension contracts |
 | Tables Adapter | `packages/tables-vitrine` | `vitrine-tables-adapter` | Vitrine adapter for table rendering |
 | Texta | `packages/texta` | `texta` | Attributed text engine for semantic and render transformations |

packages/demo/component-demo.html

@@ -181,7 +181,7 @@ <h2>Raw Blocks</h2>
 
   <nav class="page-nav">
     <a href="calendar.html">← Calendar</a>
-    <a href="text-selection-debug.html">Text Selection Debug (Regular) →</a>
+    <a href="text-selection.html">Text Selection →</a>
   </nav>
 </body>
 </html>

packages/demo/gallery.html

@@ -523,7 +523,7 @@ <h3>Performance</h3>
       </div>
 
       <nav class="page-nav">
-        <a href="text-selection-debug.html">← Text Selection Debug</a>
+        <a href="layout-pagination-flow.html">← Flow Document Demo</a>
         <a href="basic.html">Basic Blocks →</a>
       </nav>
     </div>

packages/demo/layout-pagination-flow-setup.js

@@ -0,0 +1,27 @@
+import { VitrineComponent } from 'vitrine-gui';
+import { registerTextaBlockType } from 'texta/browser';
+import {
+  buildFlowPageFlipWrapper,
+  createFlowPageFlipState
+} from 'vitrine-layout-pagination-adapter';
+import { documentFlow, flowResult } from './layout-pagination-scenarios.ts';
+
+registerTextaBlockType();
+
+const flowFlipState = createFlowPageFlipState();
+
+const component = VitrineComponent.block(() => (
+  buildFlowPageFlipWrapper(documentFlow, flowResult, flowFlipState, {
+    x: 270,
+    y: 96,
+    mainScale: 1.12,
+    thumbnailScale: 0.18,
+    thumbnailGap: 22
+  })
+), {
+  width: 1600,
+  height: 1120,
+  renderMode: 'continuous'
+});
+
+component.mount(document.getElementById('canvas'));

packages/demo/layout-pagination-flow.html

@@ -0,0 +1,94 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <link rel="icon" type="image/png" href="favicon.png" />
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Vitrine - Layout Pagination Flow Document</title>
+  <style>
+    :root {
+      color-scheme: light;
+      font-family: Inter, "Segoe UI", sans-serif;
+      background: #e2e8f0;
+      color: #0f172a;
+    }
+    body {
+      margin: 0;
+      background: linear-gradient(180deg, #e2e8f0 0%, #cbd5e1 100%);
+    }
+    .page {
+      max-width: 1660px;
+      margin: 0 auto;
+      padding: 28px 28px 84px;
+    }
+    h1 {
+      margin: 0;
+      font-size: 32px;
+      letter-spacing: -0.03em;
+    }
+    .intro {
+      max-width: 920px;
+      margin: 10px 0 22px;
+      color: #334155;
+      line-height: 1.55;
+    }
+    .canvas-shell {
+      border: 1px solid rgba(148, 163, 184, 0.45);
+      border-radius: 22px;
+      background: rgba(248, 250, 252, 0.92);
+      overflow: hidden;
+      box-shadow: 0 18px 45px rgba(15, 23, 42, 0.14);
+    }
+    #canvas {
+      width: 100%;
+      min-height: 1140px;
+    }
+    .caption {
+      margin: 14px 18px 18px;
+      color: #475569;
+      font-size: 13px;
+    }
+    .page-nav {
+      position: fixed;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      display: flex;
+      justify-content: space-between;
+      padding: 12px 20px;
+      border-top: 1px solid rgba(148, 163, 184, 0.4);
+      background: rgba(248, 250, 252, 0.92);
+      backdrop-filter: blur(10px);
+      font-size: 14px;
+    }
+    .page-nav a {
+      color: #2563eb;
+      text-decoration: none;
+      font-weight: 600;
+    }
+    .page-nav a:hover {
+      text-decoration: underline;
+    }
+  </style>
+</head>
+<body>
+  <div class="page">
+    <h1>Layout Pagination — Flow Document</h1>
+    <p class="intro">
+      Standalone paginated document preview with realistic page proportions, repeated header/footer regions,
+      and explicit semantic page breaks for markdown-like content.
+    </p>
+    <div class="canvas-shell">
+      <div id="canvas"></div>
+      <p class="caption">Flow content is paginated semantically into pages; it is not merely sliced by viewport.</p>
+    </div>
+  </div>
+
+  <div class="page-nav">
+    <a href="layout-pagination-presentation.html">← Presentation Demo</a>
+    <a href="gallery.html">Gallery →</a>
+  </div>
+
+  <script type="module" src="./layout-pagination-flow-setup.js"></script>
+</body>
+</html>

packages/demo/layout-pagination-presentation-setup.js

@@ -0,0 +1,27 @@
+import { VitrineComponent } from 'vitrine-gui';
+import { registerTextaBlockType } from 'texta/browser';
+import {
+  buildPresentationPageFlipWrapper,
+  createPresentationPageFlipState
+} from 'vitrine-layout-pagination-adapter';
+import { documentPresentation, presentationResult } from './layout-pagination-scenarios.ts';
+
+registerTextaBlockType();
+
+const slideFlipState = createPresentationPageFlipState();
+
+const component = VitrineComponent.block(() => (
+  buildPresentationPageFlipWrapper(documentPresentation, presentationResult, slideFlipState, {
+    x: 72,
+    y: 92,
+    mainScale: 0.86,
+    thumbnailScale: 0.17,
+    thumbnailGap: 20
+  })
+), {
+  width: 1600,
+  height: 980,
+  renderMode: 'continuous'
+});
+
+component.mount(document.getElementById('canvas'));

packages/demo/layout-pagination-presentation.html

@@ -0,0 +1,94 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <link rel="icon" type="image/png" href="favicon.png" />
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Vitrine - Layout Pagination Presentation</title>
+  <style>
+    :root {
+      color-scheme: dark;
+      font-family: Inter, "Segoe UI", sans-serif;
+      background: #020617;
+      color: #e2e8f0;
+    }
+    body {
+      margin: 0;
+      background: radial-gradient(circle at top, rgba(37, 99, 235, 0.16), transparent 28%), #020617;
+    }
+    .page {
+      max-width: 1600px;
+      margin: 0 auto;
+      padding: 28px 28px 84px;
+    }
+    h1 {
+      margin: 0;
+      font-size: 32px;
+      letter-spacing: -0.03em;
+    }
+    .intro {
+      max-width: 900px;
+      margin: 10px 0 22px;
+      color: #94a3b8;
+      line-height: 1.5;
+    }
+    .canvas-shell {
+      border: 1px solid rgba(148, 163, 184, 0.2);
+      border-radius: 22px;
+      background: rgba(15, 23, 42, 0.72);
+      overflow: hidden;
+      box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35);
+    }
+    #canvas {
+      width: 100%;
+      min-height: 980px;
+    }
+    .caption {
+      margin: 14px 18px 18px;
+      color: #94a3b8;
+      font-size: 13px;
+    }
+    .page-nav {
+      position: fixed;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      display: flex;
+      justify-content: space-between;
+      padding: 12px 20px;
+      border-top: 1px solid rgba(148, 163, 184, 0.2);
+      background: rgba(2, 6, 23, 0.92);
+      backdrop-filter: blur(10px);
+      font-size: 14px;
+    }
+    .page-nav a {
+      color: #60a5fa;
+      text-decoration: none;
+      font-weight: 600;
+    }
+    .page-nav a:hover {
+      text-decoration: underline;
+    }
+  </style>
+</head>
+<body>
+  <div class="page">
+    <h1>Layout Pagination — Presentation</h1>
+    <p class="intro">
+      Standalone presentation-page preview with explicit 16:9 slide geometry, a large active slide,
+      and a realistic thumbnail rail for browser-authored slide decks.
+    </p>
+    <div class="canvas-shell">
+      <div id="canvas"></div>
+      <p class="caption">Slides are explicit pages. The page size remains fixed; only the browser preview scales.</p>
+    </div>
+  </div>
+
+  <div class="page-nav">
+    <a href="text-selection-debug-texta.html">← Text Selection Debug (Texta)</a>
+    <a href="layout-pagination-flow.html">Flow Document Demo →</a>
+  </div>
+
+  <script type="module" src="./layout-pagination-presentation-setup.js"></script>
+</body>
+</html>