@kedataindo/docflow-layout-engine 0.0.1

package/dist/index.cjs

@@ -0,0 +1,416 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var index_exports = {};
+__export(index_exports, {
+  PAGE_SIZES: () => PAGE_SIZES,
+  PageBreaker: () => PageBreaker,
+  PageLayout: () => PageLayout,
+  getPageSize: () => getPageSize
+});
+module.exports = __toCommonJS(index_exports);
+
+// src/types.ts
+var PAGE_SIZES = [
+  { id: "a4", name: "A4", pageWidth: 794, pageHeight: 1123 },
+  { id: "f4", name: "F4", pageWidth: 816, pageHeight: 1204 },
+  { id: "letter", name: "Letter", pageWidth: 816, pageHeight: 1056 },
+  { id: "legal", name: "Legal", pageWidth: 816, pageHeight: 1344 },
+  { id: "a5", name: "A5", pageWidth: 559, pageHeight: 794 }
+];
+function getPageSize(id) {
+  return PAGE_SIZES.find((size) => size.id === id);
+}
+
+// src/PageBreaker.ts
+var PageBreaker = class {
+  constructor(measureTextBlock = () => null) {
+    this.measureTextBlock = measureTextBlock;
+  }
+  measureTextBlock;
+  computePages(blocks, pageHeight, maxCharsPerPage) {
+    const pages = [];
+    let currentBlocks = [];
+    let currentFrom = 0;
+    let currentTo = 0;
+    let usedHeight = 0;
+    let i = 0;
+    let block = blocks[0];
+    while (block) {
+      const blockHeight = block.bottom - block.top;
+      if (!block.canSplit && blockHeight > pageHeight) {
+        block = { ...block, pageOverflow: true };
+      }
+      if (currentBlocks.length === 0) {
+        currentFrom = block.from;
+      }
+      if (block.forceBreak && currentBlocks.length > 0) {
+        pages.push({ from: currentFrom, to: currentTo, blocks: currentBlocks });
+        currentBlocks = [];
+        usedHeight = 0;
+        currentFrom = block.from;
+        currentTo = block.from;
+      }
+      if (block.pageOverflow) {
+        if (currentBlocks.length > 0) {
+          pages.push({ from: currentFrom, to: currentTo, blocks: currentBlocks });
+          currentBlocks = [];
+          usedHeight = 0;
+        }
+        currentBlocks = [block];
+        currentFrom = block.from;
+        currentTo = block.to;
+        pages.push({ from: currentFrom, to: currentTo, blocks: currentBlocks });
+        currentBlocks = [];
+        usedHeight = 0;
+        i++;
+        block = blocks[i];
+        continue;
+      }
+      let blockSpan;
+      if (currentBlocks.length === 0) {
+        const marginTop = block.marginTop ?? 0;
+        const marginBottom = block.marginBottom ?? 0;
+        blockSpan = block.bottom - block.top + marginTop + marginBottom;
+      } else {
+        const prevBlock = currentBlocks[currentBlocks.length - 1];
+        const gap = Math.max(0, block.top - prevBlock.bottom);
+        blockSpan = gap + (block.bottom - block.top) + (block.marginBottom ?? 0);
+      }
+      const fitsInPage = usedHeight + blockSpan <= pageHeight;
+      let exceedsCharLimit = false;
+      if (maxCharsPerPage && fitsInPage) {
+        const charsWithBlock = currentTo - currentFrom + (block.to - block.from);
+        exceedsCharLimit = charsWithBlock > maxCharsPerPage;
+      }
+      if (fitsInPage && !exceedsCharLimit) {
+        currentBlocks.push(block);
+        currentTo = block.to;
+        usedHeight += blockSpan;
+        i++;
+        block = blocks[i];
+        continue;
+      }
+      if (block.canSplit) {
+        const remaining = pageHeight - usedHeight;
+        const split = this.splitBlock(block, remaining);
+        if (split) {
+          currentBlocks.push(split.current);
+          currentTo = split.current.to;
+          pages.push({
+            from: currentFrom,
+            to: currentTo,
+            blocks: currentBlocks
+          });
+          currentBlocks = [];
+          usedHeight = 0;
+          block = split.next;
+          continue;
+        }
+      }
+      if (currentBlocks.length > 0) {
+        pages.push({ from: currentFrom, to: currentTo, blocks: currentBlocks });
+        currentBlocks = [];
+        usedHeight = 0;
+      }
+      currentBlocks.push(block);
+      currentFrom = block.from;
+      currentTo = block.to;
+      usedHeight = block.bottom - block.top + (block.marginTop ?? 0) + (block.marginBottom ?? 0);
+      i++;
+      block = blocks[i];
+    }
+    if (currentBlocks.length > 0) {
+      pages.push({ from: currentFrom, to: currentTo, blocks: currentBlocks });
+    }
+    return pages;
+  }
+  splitBlock(block, availableHeight) {
+    const totalChars = block.to - block.from;
+    if (totalChars <= 0 || availableHeight <= 0) return null;
+    if (totalChars < 10 || availableHeight < 20) return null;
+    let lo = 0;
+    let hi = totalChars;
+    let best = -1;
+    while (lo <= hi) {
+      const mid = Math.floor((lo + hi) / 2);
+      const height = this.measureTextBlock(block, mid);
+      if (height === null) return null;
+      if (height <= availableHeight) {
+        best = mid;
+        lo = mid + 1;
+      } else {
+        hi = mid - 1;
+      }
+    }
+    if (best <= 0 || best >= totalChars - 3) return null;
+    const currentHeight = this.measureTextBlock(block, best);
+    if (currentHeight === null) return null;
+    const splitOffset = block.from + best;
+    const current = {
+      ...block,
+      to: splitOffset,
+      bottom: block.top + currentHeight,
+      splitOffset
+    };
+    const next = {
+      ...block,
+      from: splitOffset,
+      top: block.top + currentHeight,
+      splitOffset: void 0
+    };
+    return { current, next };
+  }
+};
+
+// src/PageLayout.ts
+var PageLayout = class {
+  element;
+  editorView;
+  options;
+  breaker;
+  debounceMs;
+  shadowRoot = null;
+  resizeObserver = null;
+  debounceTimer = null;
+  lastDocHash = "";
+  lastShadowHash = "";
+  lastSize = { width: 0, height: 0 };
+  lastResult = null;
+  pendingResolvers = [];
+  constructor(editor, options, debounceMs = 150) {
+    if (editor instanceof HTMLElement) {
+      this.element = editor;
+    } else {
+      this.element = editor.dom;
+      this.editorView = editor.view;
+    }
+    this.options = {
+      pageHeight: options.pageHeight,
+      pageWidth: options.pageWidth ?? 0,
+      margins: options.margins ?? { top: 0, bottom: 0, left: 0, right: 0 },
+      maxCharsPerPage: options.maxCharsPerPage ?? 0
+    };
+    this.debounceMs = debounceMs;
+    this.breaker = new PageBreaker(
+      (block, offset) => this.measureTextOffset(block, offset)
+    );
+  }
+  measureBlocks(root) {
+    const container = root ?? this.element;
+    const containerRect = container.getBoundingClientRect();
+    const blocks = [];
+    let fallbackPos = 0;
+    for (const child of Array.from(container.children)) {
+      if (!(child instanceof HTMLElement)) continue;
+      const nodeType = child.getAttribute("data-node-type") ?? child.tagName.toLowerCase();
+      let pmFrom = parseInt(child.getAttribute("data-from") ?? "-1", 10);
+      let pmTo = parseInt(child.getAttribute("data-to") ?? "-1", 10);
+      if ((pmFrom < 0 || pmTo < pmFrom) && this.editorView) {
+        try {
+          pmFrom = this.editorView.posAtDOM(child, 0);
+          pmTo = this.editorView.posAtDOM(child, child.childNodes.length);
+        } catch (e) {
+        }
+      }
+      if (pmFrom < 0 || pmTo < pmFrom) {
+        pmFrom = fallbackPos;
+        const textLen = child.textContent?.length ?? 0;
+        pmTo = fallbackPos + textLen + 2;
+        fallbackPos = pmTo;
+      }
+      const rect = child.getBoundingClientRect();
+      const canSplit = this.isTextBlock(nodeType);
+      const forceBreak = child.getAttribute("data-page-break") === "true" || nodeType === "pageBreak";
+      const style = getComputedStyle(child);
+      const marginTop = parseFloat(style.marginTop) || 0;
+      const marginBottom = parseFloat(style.marginBottom) || 0;
+      blocks.push({
+        nodeType,
+        from: pmFrom,
+        to: pmTo,
+        top: rect.top - containerRect.top,
+        bottom: rect.bottom - containerRect.top,
+        rect,
+        canSplit,
+        forceBreak,
+        marginTop,
+        marginBottom
+      });
+    }
+    return blocks;
+  }
+  layout(immediate = false) {
+    return new Promise((resolve) => {
+      this.pendingResolvers.push(resolve);
+      if (immediate || this.debounceMs <= 0) {
+        this.runLayout();
+      } else {
+        this.scheduleLayout();
+      }
+    });
+  }
+  observe(container) {
+    this.resizeObserver?.disconnect();
+    this.resizeObserver = new ResizeObserver(() => {
+      this.layout();
+    });
+    this.resizeObserver.observe(container);
+  }
+  destroy() {
+    if (this.debounceTimer) {
+      clearTimeout(this.debounceTimer);
+      this.debounceTimer = null;
+    }
+    this.pendingResolvers = [];
+    this.resizeObserver?.disconnect();
+    this.resizeObserver = null;
+    if (this.shadowRoot?.parentNode) {
+      this.shadowRoot.parentNode.removeChild(this.shadowRoot);
+    }
+    this.shadowRoot = null;
+    this.lastResult = null;
+    this.lastDocHash = "";
+    this.lastShadowHash = "";
+  }
+  scheduleLayout() {
+    if (this.debounceTimer) clearTimeout(this.debounceTimer);
+    this.debounceTimer = setTimeout(() => {
+      this.runLayout();
+    }, this.debounceMs);
+  }
+  runLayout() {
+    if (this.debounceTimer) {
+      clearTimeout(this.debounceTimer);
+      this.debounceTimer = null;
+    }
+    const docHash = this.computeDocHash();
+    const size = this.getContainerSize();
+    if (this.lastResult && this.lastDocHash === docHash && this.lastSize.width === size.width && this.lastSize.height === size.height) {
+      this.resolveAll(this.lastResult);
+      return this.lastResult;
+    }
+    this.prepareShadowLayout();
+    const root = this.element;
+    const blocks = this.measureBlocks(root);
+    const availableHeight = this.availableHeight();
+    const pages = this.breaker.computePages(blocks, availableHeight, this.options.maxCharsPerPage);
+    const result = { pages, invalidatedAt: Date.now() };
+    this.lastResult = result;
+    this.lastDocHash = docHash;
+    this.lastSize = size;
+    this.resolveAll(result);
+    return result;
+  }
+  resolveAll(result) {
+    for (const resolve of this.pendingResolvers) {
+      resolve(result);
+    }
+    this.pendingResolvers = [];
+  }
+  computeDocHash() {
+    let hash = "";
+    for (const child of Array.from(this.element.children)) {
+      if (child instanceof HTMLElement) {
+        hash += child.tagName + (child.getAttribute("data-from") ?? "") + (child.getAttribute("data-to") ?? "") + (child.getAttribute("data-node-type") ?? "") + (child.textContent ?? "");
+      }
+    }
+    return hash;
+  }
+  getContainerSize() {
+    const rect = this.element.getBoundingClientRect();
+    return { width: rect.width, height: rect.height };
+  }
+  availableHeight() {
+    const { top, bottom } = this.options.margins;
+    return this.options.pageHeight - top - bottom;
+  }
+  prepareShadowLayout() {
+    if (!this.shadowRoot) {
+      const shadow = document.createElement("div");
+      shadow.setAttribute("data-layout-shadow", "true");
+      shadow.style.position = "absolute";
+      shadow.style.top = "-9999px";
+      shadow.style.left = "-9999px";
+      shadow.style.visibility = "hidden";
+      shadow.style.pointerEvents = "none";
+      shadow.style.overflow = "hidden";
+      if (this.options.pageWidth > 0) {
+        shadow.style.width = `${this.options.pageWidth}px`;
+      }
+      shadow.className = this.element.className || "tiptap ProseMirror";
+      document.body.appendChild(shadow);
+      this.shadowRoot = shadow;
+    }
+    const currentHash = this.computeDocHash();
+    if (this.lastShadowHash !== currentHash) {
+      this.shadowRoot.innerHTML = "";
+      for (const child of Array.from(this.element.children)) {
+        this.shadowRoot.appendChild(child.cloneNode(true));
+      }
+      const elements = Array.from(this.shadowRoot.getElementsByTagName("*"));
+      elements.forEach((el) => {
+        el.style.removeProperty("margin-top");
+      });
+      this.lastShadowHash = currentHash;
+    }
+  }
+  isTextBlock(nodeType) {
+    return ["paragraph", "heading", "list", "blockquote", "codeBlock"].includes(
+      nodeType
+    );
+  }
+  measureTextOffset(block, offset) {
+    if (offset <= 0) return 0;
+    const root = this.shadowRoot ?? this.element;
+    const el = root.querySelector(`[data-from="${block.from}"]`);
+    if (!el) return null;
+    const start = this.findTextNodeAtOffset(el, 0);
+    const end = this.findTextNodeAtOffset(el, offset);
+    if (!start || !end) return null;
+    const range = document.createRange();
+    range.setStart(start.node, start.offset);
+    range.setEnd(end.node, end.offset);
+    const rects = range.getClientRects();
+    if (!rects.length) return null;
+    return rects[rects.length - 1].bottom - rects[0].top;
+  }
+  findTextNodeAtOffset(root, offset) {
+    const walker = document.createTreeWalker(root, NodeFilter.SHOW_TEXT);
+    let remaining = offset;
+    let node = walker.nextNode();
+    while (node) {
+      const length = node.textContent?.length ?? 0;
+      if (remaining <= length) {
+        return { node, offset: remaining };
+      }
+      remaining -= length;
+      node = walker.nextNode();
+    }
+    return null;
+  }
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  PAGE_SIZES,
+  PageBreaker,
+  PageLayout,
+  getPageSize
+});

package/dist/index.d.cts

@@ -0,0 +1,102 @@
+interface BlockInfo {
+    nodeType: string;
+    from: number;
+    to: number;
+    top: number;
+    bottom: number;
+    rect?: DOMRect;
+    canSplit: boolean;
+    forceBreak?: boolean;
+    splitOffset?: number;
+    /** True when this block's height exceeds the available page height.
+     *  The renderer should apply overflow-hidden at the page level to clip it. */
+    pageOverflow?: boolean;
+    /** CSS margin-top in pixels (computed style) */
+    marginTop?: number;
+    /** CSS margin-bottom in pixels (computed style) */
+    marginBottom?: number;
+}
+interface Page {
+    from: number;
+    to: number;
+    blocks: BlockInfo[];
+}
+interface LayoutOptions {
+    pageHeight: number;
+    pageWidth?: number;
+    margins?: {
+        top: number;
+        bottom: number;
+        left: number;
+        right: number;
+    };
+    /**
+     * Maximum characters per page, used as a secondary cutoff alongside the
+     * height-based limit.  Computed dynamically from font metrics, margins,
+     * and page dimensions so it adapts to font-size / orientation changes.
+     */
+    maxCharsPerPage?: number;
+}
+interface LayoutResult {
+    pages: Page[];
+    invalidatedAt?: number;
+}
+interface PageSize {
+    id: string;
+    name: string;
+    pageWidth: number;
+    pageHeight: number;
+}
+declare const PAGE_SIZES: PageSize[];
+declare function getPageSize(id: string): PageSize | undefined;
+
+type MeasureTextBlock = (block: BlockInfo, offset: number) => number | null;
+interface SplitResult {
+    current: BlockInfo;
+    next: BlockInfo;
+}
+declare class PageBreaker {
+    private measureTextBlock;
+    constructor(measureTextBlock?: MeasureTextBlock);
+    computePages(blocks: BlockInfo[], pageHeight: number, maxCharsPerPage?: number): Page[];
+    splitBlock(block: BlockInfo, availableHeight: number): SplitResult | null;
+}
+
+interface EditorLike {
+    dom: HTMLElement;
+    view?: {
+        posAtDOM: (node: Node, offset: number) => number;
+    };
+}
+declare class PageLayout {
+    private readonly element;
+    private readonly editorView;
+    private readonly options;
+    private readonly breaker;
+    private readonly debounceMs;
+    private shadowRoot;
+    private resizeObserver;
+    private debounceTimer;
+    private lastDocHash;
+    private lastShadowHash;
+    private lastSize;
+    private lastResult;
+    private pendingResolvers;
+    constructor(editor: EditorLike | HTMLElement, options: LayoutOptions, debounceMs?: number);
+    measureBlocks(root?: HTMLElement): BlockInfo[];
+    layout(immediate?: boolean): Promise<LayoutResult>;
+    observe(container: HTMLElement): void;
+    destroy(): void;
+    private scheduleLayout;
+    private runLayout;
+    private resolveAll;
+    private computeDocHash;
+    private getContainerSize;
+    private availableHeight;
+    private prepareShadowLayout;
+    private isTextBlock;
+    private measureTextOffset;
+    private findTextNodeAtOffset;
+}
+
+export { type BlockInfo, type EditorLike, type LayoutOptions, type LayoutResult, type MeasureTextBlock, PAGE_SIZES, type Page, PageBreaker, PageLayout, type PageSize, type SplitResult, getPageSize };

package/dist/index.d.ts

@@ -0,0 +1,102 @@
+interface BlockInfo {
+    nodeType: string;
+    from: number;
+    to: number;
+    top: number;
+    bottom: number;
+    rect?: DOMRect;
+    canSplit: boolean;
+    forceBreak?: boolean;
+    splitOffset?: number;
+    /** True when this block's height exceeds the available page height.
+     *  The renderer should apply overflow-hidden at the page level to clip it. */
+    pageOverflow?: boolean;
+    /** CSS margin-top in pixels (computed style) */
+    marginTop?: number;
+    /** CSS margin-bottom in pixels (computed style) */
+    marginBottom?: number;
+}
+interface Page {
+    from: number;
+    to: number;
+    blocks: BlockInfo[];
+}
+interface LayoutOptions {
+    pageHeight: number;
+    pageWidth?: number;
+    margins?: {
+        top: number;
+        bottom: number;
+        left: number;
+        right: number;
+    };
+    /**
+     * Maximum characters per page, used as a secondary cutoff alongside the
+     * height-based limit.  Computed dynamically from font metrics, margins,
+     * and page dimensions so it adapts to font-size / orientation changes.
+     */
+    maxCharsPerPage?: number;
+}
+interface LayoutResult {
+    pages: Page[];
+    invalidatedAt?: number;
+}
+interface PageSize {
+    id: string;
+    name: string;
+    pageWidth: number;
+    pageHeight: number;
+}
+declare const PAGE_SIZES: PageSize[];
+declare function getPageSize(id: string): PageSize | undefined;
+
+type MeasureTextBlock = (block: BlockInfo, offset: number) => number | null;
+interface SplitResult {
+    current: BlockInfo;
+    next: BlockInfo;
+}
+declare class PageBreaker {
+    private measureTextBlock;
+    constructor(measureTextBlock?: MeasureTextBlock);
+    computePages(blocks: BlockInfo[], pageHeight: number, maxCharsPerPage?: number): Page[];
+    splitBlock(block: BlockInfo, availableHeight: number): SplitResult | null;
+}
+
+interface EditorLike {
+    dom: HTMLElement;
+    view?: {
+        posAtDOM: (node: Node, offset: number) => number;
+    };
+}
+declare class PageLayout {
+    private readonly element;
+    private readonly editorView;
+    private readonly options;
+    private readonly breaker;
+    private readonly debounceMs;
+    private shadowRoot;
+    private resizeObserver;
+    private debounceTimer;
+    private lastDocHash;
+    private lastShadowHash;
+    private lastSize;
+    private lastResult;
+    private pendingResolvers;
+    constructor(editor: EditorLike | HTMLElement, options: LayoutOptions, debounceMs?: number);
+    measureBlocks(root?: HTMLElement): BlockInfo[];
+    layout(immediate?: boolean): Promise<LayoutResult>;
+    observe(container: HTMLElement): void;
+    destroy(): void;
+    private scheduleLayout;
+    private runLayout;
+    private resolveAll;
+    private computeDocHash;
+    private getContainerSize;
+    private availableHeight;
+    private prepareShadowLayout;
+    private isTextBlock;
+    private measureTextOffset;
+    private findTextNodeAtOffset;
+}
+
+export { type BlockInfo, type EditorLike, type LayoutOptions, type LayoutResult, type MeasureTextBlock, PAGE_SIZES, type Page, PageBreaker, PageLayout, type PageSize, type SplitResult, getPageSize };

package/dist/index.js

@@ -0,0 +1,386 @@
+// src/types.ts
+var PAGE_SIZES = [
+  { id: "a4", name: "A4", pageWidth: 794, pageHeight: 1123 },
+  { id: "f4", name: "F4", pageWidth: 816, pageHeight: 1204 },
+  { id: "letter", name: "Letter", pageWidth: 816, pageHeight: 1056 },
+  { id: "legal", name: "Legal", pageWidth: 816, pageHeight: 1344 },
+  { id: "a5", name: "A5", pageWidth: 559, pageHeight: 794 }
+];
+function getPageSize(id) {
+  return PAGE_SIZES.find((size) => size.id === id);
+}
+
+// src/PageBreaker.ts
+var PageBreaker = class {
+  constructor(measureTextBlock = () => null) {
+    this.measureTextBlock = measureTextBlock;
+  }
+  measureTextBlock;
+  computePages(blocks, pageHeight, maxCharsPerPage) {
+    const pages = [];
+    let currentBlocks = [];
+    let currentFrom = 0;
+    let currentTo = 0;
+    let usedHeight = 0;
+    let i = 0;
+    let block = blocks[0];
+    while (block) {
+      const blockHeight = block.bottom - block.top;
+      if (!block.canSplit && blockHeight > pageHeight) {
+        block = { ...block, pageOverflow: true };
+      }
+      if (currentBlocks.length === 0) {
+        currentFrom = block.from;
+      }
+      if (block.forceBreak && currentBlocks.length > 0) {
+        pages.push({ from: currentFrom, to: currentTo, blocks: currentBlocks });
+        currentBlocks = [];
+        usedHeight = 0;
+        currentFrom = block.from;
+        currentTo = block.from;
+      }
+      if (block.pageOverflow) {
+        if (currentBlocks.length > 0) {
+          pages.push({ from: currentFrom, to: currentTo, blocks: currentBlocks });
+          currentBlocks = [];
+          usedHeight = 0;
+        }
+        currentBlocks = [block];
+        currentFrom = block.from;
+        currentTo = block.to;
+        pages.push({ from: currentFrom, to: currentTo, blocks: currentBlocks });
+        currentBlocks = [];
+        usedHeight = 0;
+        i++;
+        block = blocks[i];
+        continue;
+      }
+      let blockSpan;
+      if (currentBlocks.length === 0) {
+        const marginTop = block.marginTop ?? 0;
+        const marginBottom = block.marginBottom ?? 0;
+        blockSpan = block.bottom - block.top + marginTop + marginBottom;
+      } else {
+        const prevBlock = currentBlocks[currentBlocks.length - 1];
+        const gap = Math.max(0, block.top - prevBlock.bottom);
+        blockSpan = gap + (block.bottom - block.top) + (block.marginBottom ?? 0);
+      }
+      const fitsInPage = usedHeight + blockSpan <= pageHeight;
+      let exceedsCharLimit = false;
+      if (maxCharsPerPage && fitsInPage) {
+        const charsWithBlock = currentTo - currentFrom + (block.to - block.from);
+        exceedsCharLimit = charsWithBlock > maxCharsPerPage;
+      }
+      if (fitsInPage && !exceedsCharLimit) {
+        currentBlocks.push(block);
+        currentTo = block.to;
+        usedHeight += blockSpan;
+        i++;
+        block = blocks[i];
+        continue;
+      }
+      if (block.canSplit) {
+        const remaining = pageHeight - usedHeight;
+        const split = this.splitBlock(block, remaining);
+        if (split) {
+          currentBlocks.push(split.current);
+          currentTo = split.current.to;
+          pages.push({
+            from: currentFrom,
+            to: currentTo,
+            blocks: currentBlocks
+          });
+          currentBlocks = [];
+          usedHeight = 0;
+          block = split.next;
+          continue;
+        }
+      }
+      if (currentBlocks.length > 0) {
+        pages.push({ from: currentFrom, to: currentTo, blocks: currentBlocks });
+        currentBlocks = [];
+        usedHeight = 0;
+      }
+      currentBlocks.push(block);
+      currentFrom = block.from;
+      currentTo = block.to;
+      usedHeight = block.bottom - block.top + (block.marginTop ?? 0) + (block.marginBottom ?? 0);
+      i++;
+      block = blocks[i];
+    }
+    if (currentBlocks.length > 0) {
+      pages.push({ from: currentFrom, to: currentTo, blocks: currentBlocks });
+    }
+    return pages;
+  }
+  splitBlock(block, availableHeight) {
+    const totalChars = block.to - block.from;
+    if (totalChars <= 0 || availableHeight <= 0) return null;
+    if (totalChars < 10 || availableHeight < 20) return null;
+    let lo = 0;
+    let hi = totalChars;
+    let best = -1;
+    while (lo <= hi) {
+      const mid = Math.floor((lo + hi) / 2);
+      const height = this.measureTextBlock(block, mid);
+      if (height === null) return null;
+      if (height <= availableHeight) {
+        best = mid;
+        lo = mid + 1;
+      } else {
+        hi = mid - 1;
+      }
+    }
+    if (best <= 0 || best >= totalChars - 3) return null;
+    const currentHeight = this.measureTextBlock(block, best);
+    if (currentHeight === null) return null;
+    const splitOffset = block.from + best;
+    const current = {
+      ...block,
+      to: splitOffset,
+      bottom: block.top + currentHeight,
+      splitOffset
+    };
+    const next = {
+      ...block,
+      from: splitOffset,
+      top: block.top + currentHeight,
+      splitOffset: void 0
+    };
+    return { current, next };
+  }
+};
+
+// src/PageLayout.ts
+var PageLayout = class {
+  element;
+  editorView;
+  options;
+  breaker;
+  debounceMs;
+  shadowRoot = null;
+  resizeObserver = null;
+  debounceTimer = null;
+  lastDocHash = "";
+  lastShadowHash = "";
+  lastSize = { width: 0, height: 0 };
+  lastResult = null;
+  pendingResolvers = [];
+  constructor(editor, options, debounceMs = 150) {
+    if (editor instanceof HTMLElement) {
+      this.element = editor;
+    } else {
+      this.element = editor.dom;
+      this.editorView = editor.view;
+    }
+    this.options = {
+      pageHeight: options.pageHeight,
+      pageWidth: options.pageWidth ?? 0,
+      margins: options.margins ?? { top: 0, bottom: 0, left: 0, right: 0 },
+      maxCharsPerPage: options.maxCharsPerPage ?? 0
+    };
+    this.debounceMs = debounceMs;
+    this.breaker = new PageBreaker(
+      (block, offset) => this.measureTextOffset(block, offset)
+    );
+  }
+  measureBlocks(root) {
+    const container = root ?? this.element;
+    const containerRect = container.getBoundingClientRect();
+    const blocks = [];
+    let fallbackPos = 0;
+    for (const child of Array.from(container.children)) {
+      if (!(child instanceof HTMLElement)) continue;
+      const nodeType = child.getAttribute("data-node-type") ?? child.tagName.toLowerCase();
+      let pmFrom = parseInt(child.getAttribute("data-from") ?? "-1", 10);
+      let pmTo = parseInt(child.getAttribute("data-to") ?? "-1", 10);
+      if ((pmFrom < 0 || pmTo < pmFrom) && this.editorView) {
+        try {
+          pmFrom = this.editorView.posAtDOM(child, 0);
+          pmTo = this.editorView.posAtDOM(child, child.childNodes.length);
+        } catch (e) {
+        }
+      }
+      if (pmFrom < 0 || pmTo < pmFrom) {
+        pmFrom = fallbackPos;
+        const textLen = child.textContent?.length ?? 0;
+        pmTo = fallbackPos + textLen + 2;
+        fallbackPos = pmTo;
+      }
+      const rect = child.getBoundingClientRect();
+      const canSplit = this.isTextBlock(nodeType);
+      const forceBreak = child.getAttribute("data-page-break") === "true" || nodeType === "pageBreak";
+      const style = getComputedStyle(child);
+      const marginTop = parseFloat(style.marginTop) || 0;
+      const marginBottom = parseFloat(style.marginBottom) || 0;
+      blocks.push({
+        nodeType,
+        from: pmFrom,
+        to: pmTo,
+        top: rect.top - containerRect.top,
+        bottom: rect.bottom - containerRect.top,
+        rect,
+        canSplit,
+        forceBreak,
+        marginTop,
+        marginBottom
+      });
+    }
+    return blocks;
+  }
+  layout(immediate = false) {
+    return new Promise((resolve) => {
+      this.pendingResolvers.push(resolve);
+      if (immediate || this.debounceMs <= 0) {
+        this.runLayout();
+      } else {
+        this.scheduleLayout();
+      }
+    });
+  }
+  observe(container) {
+    this.resizeObserver?.disconnect();
+    this.resizeObserver = new ResizeObserver(() => {
+      this.layout();
+    });
+    this.resizeObserver.observe(container);
+  }
+  destroy() {
+    if (this.debounceTimer) {
+      clearTimeout(this.debounceTimer);
+      this.debounceTimer = null;
+    }
+    this.pendingResolvers = [];
+    this.resizeObserver?.disconnect();
+    this.resizeObserver = null;
+    if (this.shadowRoot?.parentNode) {
+      this.shadowRoot.parentNode.removeChild(this.shadowRoot);
+    }
+    this.shadowRoot = null;
+    this.lastResult = null;
+    this.lastDocHash = "";
+    this.lastShadowHash = "";
+  }
+  scheduleLayout() {
+    if (this.debounceTimer) clearTimeout(this.debounceTimer);
+    this.debounceTimer = setTimeout(() => {
+      this.runLayout();
+    }, this.debounceMs);
+  }
+  runLayout() {
+    if (this.debounceTimer) {
+      clearTimeout(this.debounceTimer);
+      this.debounceTimer = null;
+    }
+    const docHash = this.computeDocHash();
+    const size = this.getContainerSize();
+    if (this.lastResult && this.lastDocHash === docHash && this.lastSize.width === size.width && this.lastSize.height === size.height) {
+      this.resolveAll(this.lastResult);
+      return this.lastResult;
+    }
+    this.prepareShadowLayout();
+    const root = this.element;
+    const blocks = this.measureBlocks(root);
+    const availableHeight = this.availableHeight();
+    const pages = this.breaker.computePages(blocks, availableHeight, this.options.maxCharsPerPage);
+    const result = { pages, invalidatedAt: Date.now() };
+    this.lastResult = result;
+    this.lastDocHash = docHash;
+    this.lastSize = size;
+    this.resolveAll(result);
+    return result;
+  }
+  resolveAll(result) {
+    for (const resolve of this.pendingResolvers) {
+      resolve(result);
+    }
+    this.pendingResolvers = [];
+  }
+  computeDocHash() {
+    let hash = "";
+    for (const child of Array.from(this.element.children)) {
+      if (child instanceof HTMLElement) {
+        hash += child.tagName + (child.getAttribute("data-from") ?? "") + (child.getAttribute("data-to") ?? "") + (child.getAttribute("data-node-type") ?? "") + (child.textContent ?? "");
+      }
+    }
+    return hash;
+  }
+  getContainerSize() {
+    const rect = this.element.getBoundingClientRect();
+    return { width: rect.width, height: rect.height };
+  }
+  availableHeight() {
+    const { top, bottom } = this.options.margins;
+    return this.options.pageHeight - top - bottom;
+  }
+  prepareShadowLayout() {
+    if (!this.shadowRoot) {
+      const shadow = document.createElement("div");
+      shadow.setAttribute("data-layout-shadow", "true");
+      shadow.style.position = "absolute";
+      shadow.style.top = "-9999px";
+      shadow.style.left = "-9999px";
+      shadow.style.visibility = "hidden";
+      shadow.style.pointerEvents = "none";
+      shadow.style.overflow = "hidden";
+      if (this.options.pageWidth > 0) {
+        shadow.style.width = `${this.options.pageWidth}px`;
+      }
+      shadow.className = this.element.className || "tiptap ProseMirror";
+      document.body.appendChild(shadow);
+      this.shadowRoot = shadow;
+    }
+    const currentHash = this.computeDocHash();
+    if (this.lastShadowHash !== currentHash) {
+      this.shadowRoot.innerHTML = "";
+      for (const child of Array.from(this.element.children)) {
+        this.shadowRoot.appendChild(child.cloneNode(true));
+      }
+      const elements = Array.from(this.shadowRoot.getElementsByTagName("*"));
+      elements.forEach((el) => {
+        el.style.removeProperty("margin-top");
+      });
+      this.lastShadowHash = currentHash;
+    }
+  }
+  isTextBlock(nodeType) {
+    return ["paragraph", "heading", "list", "blockquote", "codeBlock"].includes(
+      nodeType
+    );
+  }
+  measureTextOffset(block, offset) {
+    if (offset <= 0) return 0;
+    const root = this.shadowRoot ?? this.element;
+    const el = root.querySelector(`[data-from="${block.from}"]`);
+    if (!el) return null;
+    const start = this.findTextNodeAtOffset(el, 0);
+    const end = this.findTextNodeAtOffset(el, offset);
+    if (!start || !end) return null;
+    const range = document.createRange();
+    range.setStart(start.node, start.offset);
+    range.setEnd(end.node, end.offset);
+    const rects = range.getClientRects();
+    if (!rects.length) return null;
+    return rects[rects.length - 1].bottom - rects[0].top;
+  }
+  findTextNodeAtOffset(root, offset) {
+    const walker = document.createTreeWalker(root, NodeFilter.SHOW_TEXT);
+    let remaining = offset;
+    let node = walker.nextNode();
+    while (node) {
+      const length = node.textContent?.length ?? 0;
+      if (remaining <= length) {
+        return { node, offset: remaining };
+      }
+      remaining -= length;
+      node = walker.nextNode();
+    }
+    return null;
+  }
+};
+export {
+  PAGE_SIZES,
+  PageBreaker,
+  PageLayout,
+  getPageSize
+};

package/package.json

@@ -0,0 +1,37 @@
+{
+  "name": "@kedataindo/docflow-layout-engine",
+  "version": "0.0.1",
+  "type": "module",
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs"
+    }
+  },
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org",
+    "access": "public"
+  },
+  "files": [
+    "dist"
+  ],
+  "dependencies": {
+    "@tiptap/pm": "^2.11.0",
+    "@kedataindo/docflow-core": "0.0.2"
+  },
+  "devDependencies": {
+    "happy-dom": "^20.10.6",
+    "tsup": "^8.3.0",
+    "typescript": "^5.6.3",
+    "vitest": "^2.1.3"
+  },
+  "scripts": {
+    "build": "tsup src/index.ts --format esm,cjs --dts",
+    "typecheck": "tsc --noEmit",
+    "test:unit": "vitest run"
+  }
+}