angular-my-report 0.0.0-stage → 0.1.0

package/src/lib/ui/properties/report-props.component.ts

@@ -0,0 +1,211 @@
+import { ChangeDetectionStrategy, Component, computed, inject } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+import type { BandType, PageSettings, ReportDefinition } from '../../model/types';
+import { BAND_LABELS, PAGE_SIZES, createBand, uid } from '../../model/defaults';
+import { DesignerStore } from '../designer.store';
+import { ReportExtrasComponent } from './report-extras.component';
+
+export function removeGroup(r: ReportDefinition, gid: string): void {
+  r.groups = r.groups.filter((g) => g.id !== gid);
+  r.bands = r.bands.filter((b) => b.groupId !== gid);
+}
+
+const OPTIONAL_BANDS: BandType[] = ['reportHeader', 'pageHeader', 'detail', 'pageFooter', 'reportFooter'];
+type PageKey = Exclude<keyof PageSettings, 'continuous'>;
+
+@Component({
+  selector: 'rpt-report-props',
+  standalone: true,
+  imports: [FormsModule, ReportExtrasComponent],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: `
+    @let r = report();
+    <h3>Report</h3>
+    <section>
+      <label class="prop-row"><span>Name</span>
+        <div class="prop-value"><input [ngModel]="r.name" (ngModelChange)="setName($event)" /></div>
+      </label>
+    </section>
+
+    <section>
+      <h4>Page</h4>
+      <label class="prop-row"><span>Size</span>
+        <div class="prop-value">
+          <select [ngModel]="sizeName()" (ngModelChange)="setSize($event)">
+            @for (k of sizeNames; track k) {
+              <option [value]="k">{{ k }}</option>
+            }
+            @if (sizeName() === 'Custom') {
+              <option value="Custom">Custom</option>
+            }
+          </select>
+        </div>
+      </label>
+      <label class="prop-row"><span>Orientation</span>
+        <div class="prop-value">
+          <select [ngModel]="landscape() ? 'landscape' : 'portrait'" (ngModelChange)="setOrientation($event)">
+            <option value="portrait">Portrait</option>
+            <option value="landscape">Landscape</option>
+          </select>
+        </div>
+      </label>
+      <div class="grid2">
+        @for (f of pageFields; track f.key) {
+          <label class="prop-row"><span>{{ f.label }}</span>
+            <div class="prop-value">
+              <input type="number" [min]="f.min" [ngModel]="r.page[f.key]" (ngModelChange)="setPage(f.key, f.min, $event)" />
+            </div>
+          </label>
+        }
+      </div>
+      <label class="check" title="Receipt roll: one page as long as its content, no page breaks">
+        <input type="checkbox" [ngModel]="!!r.page.continuous" (ngModelChange)="setContinuous($event)" /> Continuous (receipt roll, no page breaks)
+      </label>
+      <p class="hint">Units are pixels at 96 DPI (A4 = 794 × 1123, 80 mm receipt = 302 wide).</p>
+    </section>
+
+    <section>
+      <h4>Sections</h4>
+      @for (t of optionalBands; track t) {
+        <label class="check">
+          <input type="checkbox" [ngModel]="isVisible(t)" (ngModelChange)="setVisible(t, $event)" />
+          {{ labels[t] }}
+        </label>
+      }
+      <p class="hint">Without Detail, the report prints its header/footer once — fields there show the first/last record, or use sum(), count()… for totals.</p>
+    </section>
+
+    <section>
+      <h4>Groups</h4>
+      @for (g of r.groups; track g.id; let i = $index) {
+        <div class="group-row">
+          <span class="muted">{{ i + 1 }}.</span>
+          <input list="field-names" placeholder="Field name" [ngModel]="g.field" (ngModelChange)="setGroupField(g.id, $event)" />
+          <button class="small danger" title="Remove group" (click)="deleteGroup(g.id)">✕</button>
+        </div>
+      }
+      <button (click)="addGroup()">+ Add group</button>
+    </section>
+
+    <section>
+      <h4>Sort</h4>
+      @for (s of r.sort; track $index; let i = $index) {
+        <div class="group-row">
+          <input list="field-names" placeholder="Field name" [ngModel]="s.field" (ngModelChange)="setSort(i, 'field', $event)" />
+          <select [ngModel]="s.direction" (ngModelChange)="setSort(i, 'direction', $event)">
+            <option value="asc">Asc</option>
+            <option value="desc">Desc</option>
+          </select>
+          <button class="small danger" (click)="removeSort(i)">✕</button>
+        </div>
+      }
+      <button (click)="addSort()">+ Add sort</button>
+    </section>
+
+    <rpt-report-extras />
+  `,
+})
+export class ReportPropsComponent {
+  private readonly store = inject(DesignerStore);
+  protected readonly report = this.store.report;
+  protected readonly labels = BAND_LABELS;
+  protected readonly optionalBands = OPTIONAL_BANDS;
+  protected readonly sizeNames = Object.keys(PAGE_SIZES);
+  protected readonly pageFields: { key: PageKey; label: string; min: number }[] = [
+    { key: 'width', label: 'Width', min: 100 },
+    { key: 'height', label: 'Height', min: 100 },
+    { key: 'marginTop', label: 'Margin Top', min: 0 },
+    { key: 'marginBottom', label: 'Margin Bottom', min: 0 },
+    { key: 'marginLeft', label: 'Margin Left', min: 0 },
+    { key: 'marginRight', label: 'Margin Right', min: 0 },
+  ];
+
+  protected readonly landscape = computed(() => this.report().page.width > this.report().page.height);
+  protected readonly sizeName = computed(() => {
+    const p = this.report().page;
+    const hit = Object.entries(PAGE_SIZES).find(
+      ([, s]) => (s.width === p.width && s.height === p.height) || (s.width === p.height && s.height === p.width),
+    );
+    return hit?.[0] ?? 'Custom';
+  });
+
+  protected setName(v: string): void {
+    this.store.update((r) => (r.name = v));
+  }
+
+  protected setSize(name: string): void {
+    const s = PAGE_SIZES[name];
+    if (!s) return;
+    const land = this.landscape();
+    const receipt = name.startsWith('Receipt');
+    this.store.update((r) => {
+      r.page.width = land && !receipt ? s.height : s.width;
+      r.page.height = land && !receipt ? s.width : s.height;
+      if (receipt) {
+        // Thermal roll: narrow margins, page as long as the content.
+        r.page.continuous = true;
+        r.page.marginLeft = r.page.marginRight = name.includes('58') ? 6 : 10;
+        r.page.marginTop = 10;
+        r.page.marginBottom = 14;
+      } else r.page.continuous = false;
+    });
+  }
+
+  protected setContinuous(on: boolean): void {
+    this.store.update((r) => (r.page.continuous = on));
+  }
+
+  protected setOrientation(v: string): void {
+    if ((v === 'landscape') !== this.landscape()) this.store.update((r) => ([r.page.width, r.page.height] = [r.page.height, r.page.width]));
+  }
+
+  protected setPage(k: PageKey, min: number, v: number | null): void {
+    if (v != null && Number.isFinite(v)) this.store.update((r) => (r.page[k] = Math.max(min, v)));
+  }
+
+  protected isVisible(t: BandType): boolean {
+    return !!this.report().bands.find((b) => b.type === t)?.visible;
+  }
+
+  protected setVisible(t: BandType, on: boolean): void {
+    this.store.update((r) => {
+      const ex = r.bands.find((x) => x.type === t);
+      if (ex) ex.visible = on;
+      else r.bands.push(createBand(t, 30));
+    });
+  }
+
+  protected setGroupField(gid: string, v: string): void {
+    this.store.update((r) => {
+      const g = r.groups.find((x) => x.id === gid);
+      if (g) g.field = v;
+    });
+  }
+
+  protected deleteGroup(gid: string): void {
+    this.store.update((r) => removeGroup(r, gid));
+  }
+
+  protected addGroup(): void {
+    this.store.update((r) => {
+      const id = uid('grp');
+      r.groups.push({ id, field: '', direction: 'asc' });
+      r.bands.push(createBand('groupHeader', 26, id), createBand('groupFooter', 26, id));
+    });
+  }
+
+  protected setSort(i: number, k: 'field' | 'direction', v: string): void {
+    this.store.update((r) => {
+      if (k === 'field') r.sort[i].field = v;
+      else r.sort[i].direction = v as 'asc' | 'desc';
+    });
+  }
+
+  protected removeSort(i: number): void {
+    this.store.update((r) => r.sort.splice(i, 1));
+  }
+
+  protected addSort(): void {
+    this.store.update((r) => r.sort.push({ field: '', direction: 'asc' }));
+  }
+}

package/src/lib/ui/properties/table-props.component.ts

@@ -0,0 +1,197 @@
+import { ChangeDetectionStrategy, Component, computed, inject, input } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+import { ExprInputComponent } from './expr-input.component';
+import type { FormatKind, HAlign, ReportElement, TableColumn, TableSpec } from '../../model/types';
+import { columnWidths, createColumn, designTableHeight } from '../../engine/table';
+import { DesignerStore, findElement } from '../designer.store';
+
+const FORMAT_KINDS: FormatKind[] = ['none', 'number', 'currency', 'percent', 'date', 'datetime', 'time'];
+type ColorKey = 'headerBackground' | 'stripeBackground' | 'gridColor' | 'headerColor';
+
+@Component({
+  selector: 'rpt-table-props',
+  standalone: true,
+  imports: [FormsModule, ExprInputComponent],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: `
+    @let t = spec();
+    <section>
+      <h4>Table</h4>
+      <label class="check">
+        <input type="checkbox" [ngModel]="t.showHeader" (ngModelChange)="set(flag('showHeader', $event))" /> Header row
+      </label>
+      <label class="check">
+        <input type="checkbox" [ngModel]="t.repeatHeader" (ngModelChange)="set(flag('repeatHeader', $event))" /> Repeat header on each page
+      </label>
+      <label class="check">
+        <input type="checkbox" [ngModel]="t.showFooter" (ngModelChange)="set(flag('showFooter', $event))" /> Footer (totals) row
+      </label>
+      <div class="grid2">
+        <label class="prop-row"><span>Header h</span>
+          <div class="prop-value"><input type="number" min="8" [ngModel]="t.headerHeight" (ngModelChange)="height('headerHeight', $event)" /></div>
+        </label>
+        <label class="prop-row"><span>Row h</span>
+          <div class="prop-value"><input type="number" min="8" [ngModel]="t.rowHeight" (ngModelChange)="height('rowHeight', $event)" /></div>
+        </label>
+      </div>
+      <div class="prop-row"><span>Header fill</span>
+        <div class="prop-value">
+          <input type="color" [ngModel]="colorValue(t.headerBackground)" (ngModelChange)="set(color('headerBackground', $event))" />
+          <button class="small" [class.on]="t.headerBackground === 'transparent'" (click)="set(color('headerBackground', 'transparent'))">None</button>
+        </div>
+      </div>
+      <div class="prop-row"><span>Header text</span>
+        <div class="prop-value"><input type="color" [ngModel]="t.headerColor" (ngModelChange)="set(color('headerColor', $event))" /></div>
+      </div>
+      <div class="prop-row"><span>Row fill</span>
+        <div class="prop-value">
+          <input type="color" [ngModel]="colorValue(el().style.background)" (ngModelChange)="set(rowFill($event))" />
+          <button class="small" [class.on]="el().style.background === 'transparent'" (click)="set(rowFill('transparent'))">None</button>
+        </div>
+      </div>
+      <div class="prop-row"><span>Alt. row</span>
+        <div class="prop-value">
+          <input type="color" [ngModel]="colorValue(t.stripeBackground)" (ngModelChange)="set(color('stripeBackground', $event))" />
+          <button class="small" [class.on]="t.stripeBackground === 'transparent'" (click)="set(color('stripeBackground', 'transparent'))">None</button>
+        </div>
+      </div>
+      <div class="prop-row"><span>Grid lines</span>
+        <div class="prop-value">
+          <input type="color" [ngModel]="colorValue(t.gridColor)" (ngModelChange)="set(color('gridColor', $event))" />
+          <button class="small" [class.on]="t.gridColor === 'transparent'" (click)="set(color('gridColor', 'transparent'))">None</button>
+        </div>
+      </div>
+      <p class="hint">
+        Lists the rows of its band: all rows in Report Header/Footer, the group's rows in Group bands. It continues onto new pages
+        automatically. Drop a field on the table to add a column.
+      </p>
+    </section>
+
+    <section>
+      <h4>Columns</h4>
+      @for (c of t.columns; track c.id; let i = $index, last = $last) {
+        <div class="col-card">
+          <div class="col-head">
+            <strong>{{ i + 1 }}</strong>
+            <span class="muted">{{ widths()[i] }}px</span>
+            <span class="spacer"></span>
+            <button class="small" [disabled]="i === 0" title="Move left" (click)="moveColumn(i, -1)">←</button>
+            <button class="small" [disabled]="last" title="Move right" (click)="moveColumn(i, 1)">→</button>
+            <button class="small danger" title="Remove column" (click)="removeColumn(i)">✕</button>
+          </div>
+          <label class="prop-row"><span>Header</span>
+            <div class="prop-value"><input [ngModel]="c.header" (ngModelChange)="col(i, setHeader($event))" /></div>
+          </label>
+          <label class="prop-row"><span>Cell</span>
+            <div class="prop-value"><rpt-expr-input [value]="c.text" placeholder="{Field}" (valueChange)="col(i, setCell($event))" /></div>
+          </label>
+          @if (t.showFooter) {
+            <label class="prop-row"><span>Footer</span>
+              <div class="prop-value"><rpt-expr-input [value]="c.footer" placeholder="{sum(Amount)}" (valueChange)="col(i, setFooter($event))" /></div>
+            </label>
+          }
+          <div class="grid2">
+            <label class="prop-row"><span>Width</span>
+              <div class="prop-value">
+                <input type="number" min="0.1" step="0.1" [ngModel]="c.width" (ngModelChange)="colWidth(i, $event)" />
+              </div>
+            </label>
+            <label class="prop-row"><span>Align</span>
+              <div class="prop-value">
+                <select [ngModel]="c.align" (ngModelChange)="col(i, setAlign($event))">
+                  <option value="left">Left</option>
+                  <option value="center">Center</option>
+                  <option value="right">Right</option>
+                </select>
+              </div>
+            </label>
+          </div>
+          <div class="grid2">
+            <label class="prop-row"><span>Format</span>
+              <div class="prop-value">
+                <select [ngModel]="c.format.kind" (ngModelChange)="col(i, setFormat($event))">
+                  @for (k of formatKinds; track k) {
+                    <option [value]="k">{{ k }}</option>
+                  }
+                </select>
+              </div>
+            </label>
+            @if (c.format.kind === 'number' || c.format.kind === 'currency' || c.format.kind === 'percent') {
+              <label class="prop-row"><span>Decimals</span>
+                <div class="prop-value">
+                  <input type="number" min="0" [ngModel]="c.format.decimals" (ngModelChange)="colDecimals(i, $event)" />
+                </div>
+              </label>
+            }
+          </div>
+        </div>
+      }
+      <button (click)="addColumn()">+ Add column</button>
+    </section>
+  `,
+})
+export class TablePropsComponent {
+  private readonly store = inject(DesignerStore);
+  readonly el = input.required<ReportElement>();
+
+  protected readonly formatKinds = FORMAT_KINDS;
+  protected readonly spec = computed(() => this.el().table!);
+  protected readonly widths = computed(() => columnWidths(this.el()).map((w) => Math.round(w)));
+
+  /** Edits the table and keeps the element height in sync with its header/row/footer heights. */
+  protected set(fn: (t: TableSpec, e: ReportElement) => void): void {
+    const id = this.el().id;
+    this.store.update((r) => {
+      const f = findElement(r, id);
+      if (!f?.el.table) return;
+      fn(f.el.table, f.el);
+      f.el.h = designTableHeight(f.el.table);
+      f.band.height = Math.max(f.band.height, f.el.y + f.el.h);
+    });
+  }
+
+  protected col(i: number, fn: (c: TableColumn) => void): void {
+    this.set((t) => t.columns[i] && fn(t.columns[i]));
+  }
+
+  protected colorValue(v: string): string {
+    return !v || v === 'transparent' ? '#ffffff' : v;
+  }
+
+  protected flag = (k: 'showHeader' | 'repeatHeader' | 'showFooter', v: boolean) => (t: TableSpec) => (t[k] = v);
+  protected color = (k: ColorKey, v: string) => (t: TableSpec) => (t[k] = v);
+  protected rowFill = (v: string) => (_: TableSpec, e: ReportElement) => (e.style.background = v);
+  protected setHeader = (v: string) => (c: TableColumn) => (c.header = v);
+  protected setCell = (v: string) => (c: TableColumn) => (c.text = v);
+  protected setFooter = (v: string) => (c: TableColumn) => (c.footer = v);
+  protected setAlign = (v: HAlign) => (c: TableColumn) => (c.align = v);
+  protected setFormat = (v: FormatKind) => (c: TableColumn) => (c.format.kind = v);
+
+  protected height(k: 'headerHeight' | 'rowHeight', v: number | null): void {
+    if (v != null && Number.isFinite(v)) this.set((t) => (t[k] = Math.max(8, v)));
+  }
+
+  protected colWidth(i: number, v: number | null): void {
+    if (v != null && Number.isFinite(v)) this.col(i, (c) => (c.width = Math.max(0.1, v)));
+  }
+
+  protected colDecimals(i: number, v: number | null): void {
+    if (v != null && Number.isFinite(v)) this.col(i, (c) => (c.format.decimals = Math.max(0, Math.min(10, v))));
+  }
+
+  protected moveColumn(i: number, d: number): void {
+    this.set((t) => {
+      const j = i + d;
+      if (j < 0 || j >= t.columns.length) return;
+      [t.columns[i], t.columns[j]] = [t.columns[j], t.columns[i]];
+    });
+  }
+
+  protected removeColumn(i: number): void {
+    this.set((t) => t.columns.splice(i, 1));
+  }
+
+  protected addColumn(): void {
+    this.set((t) => t.columns.push(createColumn('')));
+  }
+}

package/src/lib/ui/viewer/page-view.component.ts

@@ -0,0 +1,73 @@
+import { ChangeDetectionStrategy, Component, computed, input } from '@angular/core';
+import { NgTemplateOutlet } from '@angular/common';
+import type { PageBackground, PageSettings, Watermark } from '../../model/types';
+import { contentWidth } from '../../model/defaults';
+import { ElementBoxComponent } from '../designer/element-box.component';
+import { SafeImagePipe } from '../designer/safe-image.pipe';
+import type { ViewPage } from './render';
+
+const FIT = { cover: 'cover', contain: 'contain', stretch: 'fill', center: 'none' } as const;
+
+/** One printed page: background, watermark, bands and their elements. */
+@Component({
+  selector: 'rpt-page-view',
+  standalone: true,
+  imports: [NgTemplateOutlet, ElementBoxComponent, SafeImagePipe],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: `
+    @let p = settings();
+    <div class="rpt-page" [class.roll]="p.continuous" [style.width.px]="p.width" [style.height.px]="page().height">
+      @if (page().background) {
+        <img class="rpt-bg" alt="" [src]="background().image | safeImage" [style.object-fit]="fit()" />
+      }
+      @if (page().watermark && watermark().layer === 'behind') {
+        <ng-container *ngTemplateOutlet="wm" />
+      }
+      @for (b of page().bands; track $index) {
+        <div style="position: absolute" [style.left.px]="p.marginLeft" [style.top.px]="b.top" [style.width.px]="contentWidth()" [style.height.px]="b.height">
+          @for (it of b.items; track it.key) {
+            <rpt-element
+              [el]="it.el"
+              [top]="it.top"
+              [height]="it.height"
+              [content]="it.content"
+              [tableData]="it.tableData"
+              [rows]="it.rows"
+              [attr.data-key]="it.key"
+              [class.find-hit]="highlights().has(it.key)"
+              [class.find-active]="active() === it.key"
+            />
+          }
+        </div>
+      }
+      @if (page().watermark && watermark().layer === 'front') {
+        <ng-container *ngTemplateOutlet="wm" />
+      }
+    </div>
+
+    <ng-template #wm>
+      @let w = watermark();
+      <div class="rpt-watermark" [style.opacity]="w.opacity">
+        @if (w.kind === 'image') {
+          <img alt="" [src]="w.image | safeImage" [style.width.%]="w.imageScale" [style.transform]="'rotate(' + w.angle + 'deg)'" />
+        } @else {
+          <span [style.font-size.px]="w.fontSize" [style.color]="w.color" [style.font-weight]="w.bold ? 700 : 400" [style.transform]="'rotate(' + w.angle + 'deg)'">{{
+            watermarkText()
+          }}</span>
+        }
+      </div>
+    </ng-template>
+  `,
+})
+export class PageViewComponent {
+  readonly page = input.required<ViewPage>();
+  readonly settings = input.required<PageSettings>();
+  readonly watermark = input.required<Watermark>();
+  readonly background = input.required<PageBackground>();
+  readonly watermarkText = input('');
+  readonly highlights = input<ReadonlySet<string>>(new Set());
+  readonly active = input<string | null>(null);
+
+  protected readonly contentWidth = computed(() => contentWidth(this.settings()));
+  protected readonly fit = computed(() => FIT[this.background().fit]);
+}

package/src/lib/ui/viewer/render.ts

@@ -0,0 +1,161 @@
+import type { ElementStyle, ReportDefinition, ReportElement } from '../../model/types';
+import { defaultBackground, defaultWatermark } from '../../model/defaults';
+import { contextFor, paginate, type PlacedElement } from '../../engine/renderer';
+import { evaluate, getPath, renderTemplate, truthy, type EvalContext, type Row } from '../../engine/expressions';
+import type { TableRenderData } from '../../engine/table';
+import type { ParamValues } from '../../engine/parameters';
+
+export interface ViewItem {
+  /** Unique within the document: page:band:element. Used for find highlights. */
+  key: string;
+  el: ReportElement;
+  rows?: Row[];
+  top: number;
+  height: number;
+  content: string;
+  tableData?: TableRenderData;
+  /** Plain text of the item (content or table cells), for Find. */
+  text: string;
+}
+
+export interface ViewBand {
+  top: number;
+  height: number;
+  items: ViewItem[];
+}
+
+export interface ViewPage {
+  index: number;
+  height: number;
+  background: boolean;
+  watermark: boolean;
+  bands: ViewBand[];
+}
+
+/** Group headers as a navigable tree. */
+export interface Bookmark {
+  label: string;
+  page: number;
+  top: number;
+  children: Bookmark[];
+}
+
+export interface ViewDocument {
+  pages: ViewPage[];
+  bookmarks: Bookmark[];
+  rowCount: number;
+  watermarkText: string;
+}
+
+const NO_FORMAT = { kind: 'none', decimals: 0, currency: '' } as const;
+
+/** Condition check that treats an invalid expression as "true" (never hides content by accident). */
+function holds(expr: string | undefined, ctx: EvalContext): boolean {
+  if (!expr?.trim()) return true;
+  try {
+    return truthy(evaluate(expr, ctx));
+  } catch {
+    return true;
+  }
+}
+
+/** Evaluates the visible slice of a table into cell strings. */
+function tableData(item: PlacedElement, ctx: EvalContext): TableRenderData | undefined {
+  const p = item.table;
+  const t = item.el.table;
+  if (!p || !t) return undefined;
+  const all = ctx.rows;
+  return {
+    header: p.header ? t.columns.map((c) => renderTemplate(c.header, ctx, NO_FORMAT)) : null,
+    headerHeight: p.headerHeight,
+    rows: p.rows.map((row, i) => {
+      const rctx = { ...ctx, row, rowNumber: p.startIndex + i + 1 };
+      return { cells: t.columns.map((c) => renderTemplate(c.text, rctx, c.format)), height: p.rowHeights[i], index: p.startIndex + i };
+    }),
+    footer: p.footer ? t.columns.map((c) => renderTemplate(c.footer, { ...ctx, rows: all, row: all[all.length - 1] }, c.format)) : null,
+    footerHeight: p.footerHeight,
+  };
+}
+
+function evaluateItem(key: string, it: PlacedElement, ctx: EvalContext, lastValue: Map<string, string>): ViewItem {
+  let el: ReportElement = it.el;
+  let content = ['line', 'rect', 'table', 'chart'].includes(el.kind) ? '' : renderTemplate(el.text, ctx, el.format);
+
+  const opts = el.fieldOptions;
+  if (opts && (el.kind === 'text' || el.kind === 'field')) {
+    if (!content.trim() && opts.nullText) content = renderTemplate(opts.nullText, ctx, el.format);
+    if (opts.hideDuplicates) {
+      if (lastValue.get(el.id) === content) content = '';
+      else lastValue.set(el.id, content);
+    }
+    const rule = opts.rules.find((r) => r.when.trim() && holds(r.when, ctx));
+    if (rule) {
+      const style: Partial<ElementStyle> = { color: rule.color };
+      if (rule.background) style.background = rule.background;
+      if (rule.bold) style.bold = true;
+      el = { ...el, style: { ...el.style, ...style } };
+    }
+  }
+  // Chart titles may contain fields, e.g. "Sales in {Country}".
+  if (el.chart) el = { ...el, chart: { ...el.chart, title: renderTemplate(el.chart.title, ctx, NO_FORMAT) } };
+
+  const td = tableData(it, ctx);
+  const text =
+    el.kind === 'barcode' || el.kind === 'qrcode' || el.kind === 'image'
+      ? ''
+      : td
+        ? [...(td.header ?? []), ...td.rows.flatMap((r) => r.cells), ...(td.footer ?? [])].join(' ')
+        : el.chart?.title ?? content;
+  return { key, el, rows: el.kind === 'chart' ? ctx.rows : undefined, top: it.top, height: it.height, content, tableData: td, text };
+}
+
+/** Lays out and evaluates the whole report into ready-to-draw pages, plus group bookmarks. */
+export function buildDocument(report: ReportDefinition, rows: Row[], params: ParamValues, root: unknown): ViewDocument {
+  const layout = paginate(report, rows, params, root);
+  const wm = { ...defaultWatermark(), ...report.watermark };
+  const bg = { ...defaultBackground(), ...report.background };
+
+  const pages: ViewPage[] = layout.map((pg) => {
+    const lastValue = new Map<string, string>(); // hide-duplicates state, per page
+    return {
+      index: pg.index,
+      height: pg.height ?? report.page.height,
+      background: bg.enabled && !!bg.image && (bg.pages === 'all' || pg.index === 0),
+      watermark: wm.enabled && (wm.kind === 'image' ? !!wm.image : !!wm.text) && (wm.pages === 'all' || pg.index === 0),
+      bands: pg.bands.map((pb, bi) => {
+        const ctx = contextFor(pb, pg, layout.length);
+        return {
+          top: pb.top,
+          height: pb.height,
+          items: pb.items
+            .filter((it) => holds(it.el.visibleWhen, ctx))
+            .map((it) => evaluateItem(`${pg.index}:${bi}:${it.el.id}`, it, ctx, lastValue)),
+        };
+      }),
+    };
+  });
+
+  // Bookmarks: one per group header, nested by group level.
+  const bookmarks: Bookmark[] = [];
+  const stack: Bookmark[] = [];
+  for (const pg of layout) {
+    for (const pb of pg.bands) {
+      if (pb.band.type !== 'groupHeader' || !pb.band.groupId) continue;
+      const level = report.groups.findIndex((g) => g.id === pb.band.groupId);
+      if (level < 0) continue;
+      const g = report.groups[level];
+      const bm: Bookmark = { label: String(getPath(pb.ctx.row, g.field) ?? '(blank)'), page: pg.index, top: pb.top, children: [] };
+      stack.length = level;
+      (level > 0 && stack[level - 1] ? stack[level - 1].children : bookmarks).push(bm);
+      stack[level] = bm;
+    }
+  }
+
+  const ctx: EvalContext = { row: undefined, rows: [], allRows: [], pageRows: [], rowNumber: 0, pageNumber: 1, totalPages: 1, reportName: report.name, params, root };
+  return {
+    pages,
+    bookmarks,
+    rowCount: layout.reduce((n, p) => n + p.rows.length, 0),
+    watermarkText: renderTemplate(wm.text, ctx, NO_FORMAT),
+  };
+}