angular-my-report 0.1.0 → 0.1.1

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

@@ -1,211 +0,0 @@
-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

@@ -1,197 +0,0 @@
-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

@@ -1,73 +0,0 @@
-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

@@ -1,161 +0,0 @@
-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),
-  };
-}