@reekon-tools/boldr-utils 1.21.1 → 1.23.0

package/dist/export/pdf/tileContent.js

@@ -0,0 +1,218 @@
+// Resolve what each placed tile SHOWS, from the documents the caller loaded.
+// A pure mirror of the mobile canvas's renderMeasurementStamp branches
+// (skia-annotation.tsx) and the tile components' own rules (measurementTileFill,
+// convertMicrometers, the position labels), so a server render and the screen
+// agree on value, label and fill. No I/O: the caller fetches the docs.
+import { ColumnType, DecimalTolerance, FractionalTolerance, MeasurementType, convertUnitsToReadable, } from '../../types/firestore.js';
+import { describeGroupHeader } from '../../annotation/canvas/groupHeaderLayout.js';
+import { planeDimensionValueUm, planeLengthForPlaced, } from '../../annotation/canvas/planeGeometry.js';
+import { convertMicrometers } from '../../utils/micrometersToUnit.js';
+import { formGroupInputLabel, listGroupMeasurementLabel, } from '../../utils/indexLabels.js';
+import { calculateFormula } from '../../formulas/calculateFormula.js';
+import { applyGroupFormulaUm } from '../../formulas/groupFormula.js';
+import { FormulaColors, GeneralColors, SecondaryColors, TileColors, } from '../../theme/colors.js';
+/** Fill for a FORM formula-column tile (the job page's purple). */
+export const FORMULA_COLUMN_TILE_FILL = '#7B4783';
+/** Fill for a plane-computed length tile (calibration teal). */
+export const PLANE_COMPUTED_TILE_FILL = '#0E7490';
+const isScalarType = (type) => (type ?? MeasurementType.Length) !== MeasurementType.Length;
+/**
+ * The tile fill, in measurementTileFill's precedence: unsaved scratch grey-blue,
+ * completed grey, an explicit colour, formula magenta, else tile blue.
+ */
+export const measurementTileFillFor = ({ internal, isCompleted, groupFormula, color, }) => {
+    if (internal)
+        return SecondaryColors.accentBlue3;
+    if (isCompleted)
+        return GeneralColors.grey3;
+    if (color)
+        return color;
+    if (groupFormula)
+        return FormulaColors.purple;
+    return TileColors.activeBlue;
+};
+const columnOf = (ctx, placed) => {
+    const group = ctx.groups.find((g) => g.id === placed.groupId);
+    const section = ctx.sections.find((s) => s.id === group?.sectionId);
+    const columnIndex = section?.tableConfig.findIndex((c) => c.id === placed.columnId) ?? -1;
+    const column = columnIndex >= 0 ? section?.tableConfig[columnIndex] : undefined;
+    return { group, section, column, columnIndex };
+};
+const columnTileLabels = (ctx, placed) => {
+    const { group, column, columnIndex } = columnOf(ctx, placed);
+    return {
+        topLeftLabel: formGroupInputLabel(columnIndex, group?.groupIndex ?? 0),
+        topRightLabel: convertUnitsToReadable(ctx.units) ?? '',
+        bottomLabel: column?.name ?? 'Measurement',
+    };
+};
+const tileGroup = (ctx, placed) => ctx.groups.find((g) => g.id === (placed.groupId ?? ctx.hostGroupId));
+const convert = (ctx, um, unit, device) => convertMicrometers(um, unit, ctx.fractionalTolerance ?? FractionalTolerance.Sixteenth, ctx.decimalTolerance ?? DecimalTolerance.Hundredth, device);
+const measurementContent = (ctx, placed, m, column, columnIndex) => {
+    const group = tileGroup(ctx, placed);
+    const groupIndex = group?.groupIndex ?? 0;
+    const positionLabel = placed.columnId
+        ? formGroupInputLabel(columnIndex, groupIndex)
+        : listGroupMeasurementLabel(m.deviceMeasurementNumber, groupIndex);
+    // MeasurementTile shows the measurement's own label first, then the host's
+    // `label` prop (the override, else the column name).
+    const label = m.label || placed.labelOverride || column?.name;
+    const fill = measurementTileFillFor({
+        internal: m.fileId != null,
+        isCompleted: !!m.isCompleted,
+        groupFormula: group?.formula,
+    });
+    const formulaBar = fill === FormulaColors.purple;
+    // Angles and unitless numbers are stored as typed — never converted.
+    const scalar = column?.type === ColumnType.Angle || (!column && isScalarType(m.type));
+    if (scalar) {
+        const suffix = column?.type === ColumnType.Angle || m.type === MeasurementType.Angle
+            ? '°'
+            : '';
+        return {
+            kind: 'measurement',
+            value: `${m.value}${suffix}`,
+            unit: '',
+            positionLabel,
+            label,
+            fill,
+            formulaBar,
+        };
+    }
+    const groupFormula = group?.formula;
+    const unit = placed.unitOverride ?? ctx.units;
+    const formulaUm = groupFormula
+        ? applyGroupFormulaUm(groupFormula, m.value, unit)
+        : null;
+    const um = formulaUm ?? m.value;
+    const converted = convert(ctx, Math.abs(um), unit, formulaUm != null ? undefined : m.device);
+    return {
+        kind: 'measurement',
+        value: converted.value,
+        unit: converted.unit,
+        positionLabel,
+        label,
+        fill,
+        formulaBar,
+        negative: um < 0,
+    };
+};
+/** What a placed tile shows, from the documents in `ctx`. */
+export const resolveTileContent = (placed, ctx) => {
+    // Object tile: the placed file's preview.
+    if (placed.fileId) {
+        const file = ctx.filesById?.get(placed.fileId);
+        return file
+            ? {
+                kind: 'object',
+                name: file.name,
+                fileType: file.type,
+                thumbnail: file.thumbnail,
+            }
+            : { kind: 'object', name: 'Object removed' };
+    }
+    // Group-header chip.
+    if (placed.isGroupHeader) {
+        const group = ctx.groups.find((g) => g.id === placed.groupId);
+        const section = ctx.sections.find((s) => s.id === group?.sectionId);
+        return {
+            kind: 'header',
+            descriptor: describeGroupHeader({
+                group,
+                section,
+                collapsed: !!placed.collapsed,
+            }),
+        };
+    }
+    const { group, section, column, columnIndex } = columnOf(ctx, placed);
+    const columnType = column?.type;
+    // Plane-calibration dimension tile.
+    if (placed.planeEdge) {
+        const plane = ctx.canvas.planes?.find((p) => p.id === placed.planeId);
+        const dimUm = plane ? planeDimensionValueUm(plane, placed.planeEdge) : null;
+        if (dimUm != null) {
+            const c = convert(ctx, dimUm, ctx.units);
+            return { kind: 'planeDimension', value: c.value, unit: c.unit };
+        }
+        return { kind: 'empty' };
+    }
+    if (columnType === ColumnType.Instructions) {
+        const data = (column?.columnData ?? {});
+        return {
+            kind: 'instructions',
+            text: data.text ?? '',
+            textColor: data.textColor,
+            backgroundColor: data.backgroundColor,
+        };
+    }
+    // FORM formula column: the computed output, or the empty tile.
+    if (columnType === ColumnType.Formula) {
+        const formula = ctx.formulas?.find((f) => f.id ===
+            column?.columnData?.formulaId);
+        let result = null;
+        if (group && section && formula) {
+            try {
+                result = calculateFormula(formula, ctx.formulas ?? [], group.columns, section.tableConfig, Array.from(ctx.measurementsById.values()), ctx.units, ctx.fractionalTolerance ?? FractionalTolerance.Sixteenth, ctx.decimalTolerance ?? DecimalTolerance.Tenth);
+            }
+            catch {
+                result = null;
+            }
+        }
+        if (result !== null && result !== '' && Number.isFinite(Number(result))) {
+            const converted = convert(ctx, Math.abs(Number(result)), ctx.units);
+            return {
+                kind: 'measurement',
+                value: converted.value,
+                unit: converted.unit,
+                positionLabel: formGroupInputLabel(columnIndex, group?.groupIndex ?? 0),
+                label: placed.labelOverride ?? column?.name,
+                fill: FORMULA_COLUMN_TILE_FILL,
+                negative: Number(result) < 0,
+            };
+        }
+        return { kind: 'empty', ...columnTileLabels(ctx, placed) };
+    }
+    // Every other non-measurement FORM column stores a literal string.
+    // (Formula and Instructions columns returned above.)
+    const isNonMeasurementColumn = columnType != null &&
+        columnType !== ColumnType.Measurement &&
+        columnType !== ColumnType.Angle;
+    if (isNonMeasurementColumn) {
+        const raw = placed.columnId ? group?.columns?.[placed.columnId] : undefined;
+        return {
+            kind: 'literal',
+            value: raw != null && raw !== '' ? String(raw) : '',
+            ...columnTileLabels(ctx, placed),
+        };
+    }
+    // Bound measurement: by id, else through the FORM group's column slot.
+    let resolved;
+    if (placed.measurementId)
+        resolved = ctx.measurementsById.get(placed.measurementId);
+    if (!resolved && placed.columnId && group) {
+        const mid = group.columns?.[placed.columnId];
+        if (mid)
+            resolved = ctx.measurementsById.get(mid);
+    }
+    if (resolved)
+        return measurementContent(ctx, placed, resolved, column, columnIndex);
+    // Plane-computed length on a calibrated canvas.
+    if (placed.valueSource === 'plane') {
+        const um = planeLengthForPlaced(ctx.canvas.planes, placed);
+        if (um != null) {
+            const c = convert(ctx, Math.abs(um), placed.unitOverride ?? ctx.units);
+            return {
+                kind: 'measurement',
+                value: c.value,
+                unit: c.unit,
+                positionLabel: '',
+                label: placed.labelOverride,
+                fill: PLANE_COMPUTED_TILE_FILL,
+                negative: um < 0,
+            };
+        }
+    }
+    return placed.columnId
+        ? { kind: 'empty', ...columnTileLabels(ctx, placed) }
+        : { kind: 'empty' };
+};

package/dist/export/pdf/tiles.d.ts

@@ -0,0 +1,39 @@
+import { type PDFImage, type PDFOperator } from 'pdf-lib';
+import type { AnnotationCanvasState, PlacedMeasurementRef } from '../../types/annotation.js';
+import type { PdfFonts } from './fonts.js';
+import type { ResourceScope } from './resources.js';
+import type { AffineMatrix, DocRect } from './pageMapping.js';
+import type { PdfExportCalibration, ResolvedTileContent } from './types.js';
+export interface TilePaintContext {
+    /** Where fonts, images and opacity states get registered. */
+    scope: ResourceScope;
+    fonts: PdfFonts;
+    /** Object-tile thumbnail, when the content carries one and it embedded. */
+    thumbnail?: PDFImage;
+}
+export interface TileFootprint extends DocRect {
+    /** Design-space box the painter lays out in. */
+    design: {
+        width: number;
+        height: number;
+    };
+}
+/**
+ * Doc-space footprint of a placed tile. `fallbackDocEdge` is the doc-space
+ * edge a scale-1 measurement tile covers when neither the request nor the
+ * document carries a calibration.
+ */
+export declare const tileFootprint: (ref: PlacedMeasurementRef, canvas: Pick<AnnotationCanvasState, "tileDocSize">, calibration: PdfExportCalibration | undefined, fallbackDocEdge: number, design: {
+    width: number;
+    height: number;
+}) => TileFootprint;
+export declare const designBoxFor: (ref: PlacedMeasurementRef, content: ResolvedTileContent) => {
+    width: number;
+    height: number;
+};
+/** Doc ← design matrix for a footprint. */
+export declare const designToDocMatrix: (f: TileFootprint) => AffineMatrix;
+/** Operators for a tile in DESIGN space. */
+export declare const tileDesignOps: (ctx: TilePaintContext, content: ResolvedTileContent) => PDFOperator[];
+/** Operators for a tile in DOC space: design ops under the footprint matrix. */
+export declare const tileOps: (ctx: TilePaintContext, content: ResolvedTileContent, footprint: TileFootprint) => PDFOperator[];

package/dist/export/pdf/tiles.js

@@ -0,0 +1,392 @@
+// Tile chrome: measurement tiles, header chips, object tiles, plane dimension
+// chips and the blank input, drawn as PDF vectors. Each painter works in the
+// tile's DESIGN space (the 96-unit STAMP_TILE_SIZE square, or a header's
+// 200×56 / 90×65 box — the same natural-size-then-scale pattern the RN and
+// DOM tiles use), and the renderer scales that box into the tile's doc-space
+// footprint centred on the placed anchor.
+//
+// These are deliberately PDF-native renditions of the app's tiles — the same
+// fills, type hierarchy and layout — not pixel captures of them.
+import { clip, endPath, fill, popGraphicsState, pushGraphicsState, rectangle, stroke, } from 'pdf-lib';
+import { FileUploadType } from '../../types/firestore.js';
+import { STAMP_TILE_SIZE, stampTileDims, } from '../../annotation/canvas/stampLayout.js';
+import { GROUP_HEADER_STYLE, } from '../../annotation/canvas/groupHeaderLayout.js';
+import { FormColors, FormulaColors, GeneralColors, TileColors, } from '../../theme/colors.js';
+import { circlePathOps, fillStateOps, imageOps, polylinePathOps, roundedRectPathOps, strokeStateOps, withMatrix, } from './emit.js';
+const tileKind = (ref) => ref.fileId ? 'file' : ref.isGroupHeader ? 'header' : 'measurement';
+/**
+ * Doc-space footprint of a placed tile. `fallbackDocEdge` is the doc-space
+ * edge a scale-1 measurement tile covers when neither the request nor the
+ * document carries a calibration.
+ */
+export const tileFootprint = (ref, canvas, calibration, fallbackDocEdge, design) => {
+    const kind = tileKind(ref);
+    const measurementEdge = calibration?.tileDocSize ?? canvas.tileDocSize ?? fallbackDocEdge;
+    const edge = kind === 'header'
+        ? (calibration?.headerTileDocSize ?? measurementEdge)
+        : kind === 'file'
+            ? (calibration?.fileTileDocSize ?? measurementEdge)
+            : measurementEdge;
+    // stampTileDims at unit factors and unit zoom = the base footprint × the
+    // tile's own `scale`; the calibration edge then converts base units to doc.
+    const base = stampTileDims(ref, 1, 1, 1, 1);
+    const k = edge / STAMP_TILE_SIZE;
+    const width = base.width * k;
+    const height = base.height * k;
+    return {
+        x: ref.anchor.x - width / 2,
+        y: ref.anchor.y - height / 2,
+        width,
+        height,
+        design,
+    };
+};
+export const designBoxFor = (ref, content) => content.kind === 'header'
+    ? content.descriptor.design
+    : ref.isGroupHeader
+        ? { width: 200, height: 56 }
+        : { width: STAMP_TILE_SIZE, height: STAMP_TILE_SIZE };
+/** Doc ← design matrix for a footprint. */
+export const designToDocMatrix = (f) => {
+    const k = f.width / f.design.width;
+    return [k, 0, 0, k, f.x, f.y];
+};
+/* ------------------------------------------------------------------ *
+ * Shared bits
+ * ------------------------------------------------------------------ */
+const SQUARE = STAMP_TILE_SIZE;
+const CARD_RADIUS = 6;
+const filledRoundedRect = (x, y, w, h, r, color) => [
+    pushGraphicsState(),
+    ...fillStateOps(color),
+    ...roundedRectPathOps(x, y, w, h, r),
+    fill(),
+    popGraphicsState(),
+];
+const strokedRoundedRect = (x, y, w, h, r, color, width) => [
+    pushGraphicsState(),
+    ...strokeStateOps({ color, width, join: 'miter' }),
+    ...roundedRectPathOps(x + width / 2, y + width / 2, w - width, h - width, r),
+    stroke(),
+    popGraphicsState(),
+];
+/** Truncate to `maxWidth` with an ellipsis, like numberOfLines={1}. */
+const truncate = (fonts, text, size, maxWidth) => {
+    if (fonts.width(text, size) <= maxWidth)
+        return text;
+    const ell = '…';
+    let t = text;
+    while (t.length > 0 && fonts.width(t + ell, size) > maxWidth)
+        t = t.slice(0, -1);
+    return t.length > 0 ? t + ell : '';
+};
+/* ------------------------------------------------------------------ *
+ * Measurement value row: tokens with stacked fractions
+ * ------------------------------------------------------------------ */
+// Mirror of the mobile tileValueFont model at a 96-unit tile.
+const DIGIT_ADVANCE_EM = 0.68;
+const FRACTION_STACK_CHARS = 1.4;
+const FIT_K = 0.9 / DIGIT_ADVANCE_EM;
+const TILE_VALUE_MAX_TILE_SCALE = 0.8 / 3;
+const UNIT_FONT = 12; // clamp(96 × 0.1, 12, 16)
+const UNIT_RESERVE = Math.round(UNIT_FONT * (2 * 0.854 + 0.2));
+const tokenize = (value) => value
+    .trim()
+    .split(/\s+/)
+    .filter(Boolean)
+    .map((t) => {
+    if (!t.includes('/'))
+        return { text: t };
+    const [num, rest = ''] = t.split('/');
+    const den = rest.replace(/[^0-9]/g, '');
+    const suffix = rest.replace(/[0-9]/g, '');
+    return { text: t, fraction: { num: num ?? '', den, suffix } };
+});
+const effectiveLength = (tokens) => tokens.reduce((n, t, i) => n +
+    (i > 0 ? 1 : 0) +
+    (t.fraction
+        ? FRACTION_STACK_CHARS + t.fraction.suffix.length
+        : t.text.length), 0);
+/**
+ * Draw a converted value string centred at (cx, cy) in design units with
+ * whole parts large and fractions stacked over a rule. Returns the ops.
+ */
+const valueRowOps = (ctx, value, cx, cy, color, availableWidth, tileWidth) => {
+    const tokens = tokenize(value);
+    if (tokens.length === 0)
+        return [];
+    const chars = Math.max(effectiveLength(tokens), 1);
+    const fs = Math.min(TILE_VALUE_MAX_TILE_SCALE * tileWidth, (FIT_K / chars) * availableWidth);
+    const fracFs = fs * 0.8;
+    const gap = fs * 0.15;
+    // Measure the row.
+    const widths = tokens.map((t) => {
+        if (!t.fraction)
+            return ctx.fonts.width(t.text, fs);
+        const stack = Math.max(ctx.fonts.width(t.fraction.num, fracFs), ctx.fonts.width(t.fraction.den, fracFs));
+        return (stack + (t.fraction.suffix ? ctx.fonts.width(t.fraction.suffix, fs) : 0));
+    });
+    const total = widths.reduce((a, b) => a + b, 0) + gap * (tokens.length - 1);
+    let x = cx - total / 2;
+    const ops = [];
+    const baseline = cy + fs * 0.35; // cap-height centred on cy
+    tokens.forEach((t, i) => {
+        const w = widths[i];
+        if (!t.fraction) {
+            ops.push(...ctx.fonts.textOps(ctx.scope, t.text, fs, color, x, baseline));
+        }
+        else {
+            const stackW = Math.max(ctx.fonts.width(t.fraction.num, fracFs), ctx.fonts.width(t.fraction.den, fracFs));
+            const scx = x + stackW / 2;
+            // Numerator above the rule, denominator below; rule at the row centre.
+            ops.push(...ctx.fonts.textOps(ctx.scope, t.fraction.num, fracFs, color, scx, cy - fracFs * 0.15, { align: 'center' }), pushGraphicsState(), ...fillStateOps(color), rectangle(x, cy - fracFs * 0.05, stackW, Math.max(fracFs * 0.08, 0.8)), fill(), popGraphicsState(), ...ctx.fonts.textOps(ctx.scope, t.fraction.den, fracFs, color, scx, cy + fracFs * 0.85, { align: 'center' }));
+            if (t.fraction.suffix) {
+                ops.push(...ctx.fonts.textOps(ctx.scope, t.fraction.suffix, fs, color, x + stackW, baseline));
+            }
+        }
+        x += w + gap;
+    });
+    return ops;
+};
+/* ------------------------------------------------------------------ *
+ * Painters (design space, y-down)
+ * ------------------------------------------------------------------ */
+const measurementTileOps = (ctx, c) => {
+    const ops = filledRoundedRect(0, 0, SQUARE, SQUARE, CARD_RADIUS, c.fill);
+    const white = GeneralColors.white;
+    // Header row: position label, bold, top-left.
+    if (c.positionLabel) {
+        ops.push(...ctx.fonts.textOps(ctx.scope, c.positionLabel, 12, white, 6, 14));
+    }
+    // Value row, centred on the tile, between the two unit slots.
+    const hasUnit = !!c.unit;
+    const available = hasUnit ? SQUARE - 2 * UNIT_RESERVE : SQUARE - 8;
+    const valueText = (c.negative ? '-' : '') + c.value;
+    ops.push(...valueRowOps(ctx, valueText, SQUARE / 2, 48, white, available, SQUARE));
+    if (hasUnit) {
+        ops.push(...ctx.fonts.textOps(ctx.scope, c.unit, UNIT_FONT, white, SQUARE - UNIT_RESERVE / 2, 52, {
+            align: 'center',
+        }));
+    }
+    // Bottom label: bare white ink, or on the formula tile's dark-magenta bar.
+    if (c.label) {
+        const labelSize = 11;
+        if (c.formulaBar) {
+            ops.push(...filledRoundedRect(4, SQUARE - 20, SQUARE - 8, 16, 3, FormulaColors.darkPurple), ...strokedRoundedRect(4, SQUARE - 20, SQUARE - 8, 16, 3, FormulaColors.purple, 1));
+        }
+        const text = truncate(ctx.fonts, c.label, labelSize, SQUARE - 12);
+        ops.push(...ctx.fonts.textOps(ctx.scope, text, labelSize, white, SQUARE / 2, SQUARE - 8, { align: 'center' }));
+    }
+    return ops;
+};
+const emptyTileOps = (ctx, c) => {
+    const ink = FormColors.lightGrey1;
+    const ops = [
+        ...filledRoundedRect(0, 0, SQUARE, SQUARE, CARD_RADIUS, GeneralColors.grey2),
+        ...strokedRoundedRect(0, 0, SQUARE, SQUARE, CARD_RADIUS, GeneralColors.grey3, 1),
+    ];
+    if (c.topLeftLabel)
+        ops.push(...ctx.fonts.textOps(ctx.scope, c.topLeftLabel, 10, ink, 8, 18));
+    if (c.topRightLabel) {
+        ops.push(...ctx.fonts.textOps(ctx.scope, c.topRightLabel, 10, ink, SQUARE - 8, 18, {
+            align: 'right',
+        }));
+    }
+    // The "+" well.
+    ops.push(...filledRoundedRect(8, 28, SQUARE - 16, 40, 4, GeneralColors.grey3));
+    const cx = SQUARE / 2;
+    const cy = 48;
+    ops.push(pushGraphicsState(), ...strokeStateOps({ color: ink, width: 2.5, cap: 'round' }), ...polylinePathOps([
+        { x: cx - 8, y: cy },
+        { x: cx + 8, y: cy },
+    ]), stroke(), ...polylinePathOps([
+        { x: cx, y: cy - 8 },
+        { x: cx, y: cy + 8 },
+    ]), stroke(), popGraphicsState());
+    if (c.bottomLabel) {
+        const text = truncate(ctx.fonts, c.bottomLabel, 10, SQUARE - 16);
+        ops.push(...ctx.fonts.textOps(ctx.scope, text, 10, ink, cx, SQUARE - 10, {
+            align: 'center',
+        }));
+    }
+    return ops;
+};
+const literalTileOps = (ctx, c) => {
+    const filled = c.value !== '';
+    const fillColor = filled ? TileColors.activeBlue : GeneralColors.grey2;
+    const ink = filled ? GeneralColors.white : GeneralColors.grey4;
+    const ops = filledRoundedRect(0, 0, SQUARE, SQUARE, CARD_RADIUS, fillColor);
+    ops.push(...ctx.fonts.textOps(ctx.scope, c.topLeftLabel, 10, ink, 8, 18));
+    ops.push(...ctx.fonts.textOps(ctx.scope, c.topRightLabel, 10, ink, SQUARE - 8, 18, {
+        align: 'right',
+    }));
+    ops.push(...filledRoundedRect(8, 28, SQUARE - 16, 40, 4, filled ? TileColors.activeBlue : GeneralColors.grey3));
+    if (filled) {
+        const size = ctx.fonts.fitSize(c.value, SQUARE - 24, 16, 6);
+        ops.push(...ctx.fonts.textOps(ctx.scope, c.value, size, ink, SQUARE / 2, 48 + size * 0.35, { align: 'center' }));
+    }
+    const bottom = truncate(ctx.fonts, c.bottomLabel, 10, SQUARE - 16);
+    ops.push(...ctx.fonts.textOps(ctx.scope, bottom, 10, ink, SQUARE / 2, SQUARE - 10, {
+        align: 'center',
+    }));
+    return ops;
+};
+const globeOps = (cx, cy, size, color) => {
+    const r = size / 2 - 1;
+    return [
+        pushGraphicsState(),
+        ...strokeStateOps({ color, width: 1.75, join: 'round' }),
+        ...circlePathOps(cx, cy, r),
+        stroke(),
+        ...polylinePathOps([
+            { x: cx - r, y: cy },
+            { x: cx + r, y: cy },
+        ]),
+        stroke(),
+        // Meridian as a narrow ellipse: scale x by 0.45 around cx.
+        ...withMatrix([0.45, 0, 0, 1, cx * (1 - 0.45), 0], [...circlePathOps(cx, cy, r), stroke()]),
+        popGraphicsState(),
+    ];
+};
+const headerTileOps = (ctx, c) => {
+    const d = c.descriptor;
+    const S = GROUP_HEADER_STYLE;
+    const W = d.design.width;
+    const H = d.design.height;
+    const ops = filledRoundedRect(0, 0, W, H, S.radius, S.background);
+    const inner = W - 2 * S.padding;
+    const nameBlock = d.name !== null ? S.nameGap + S.nameFontSize * 1.2 : 0;
+    const badgesBlock = d.collapsed
+        ? d.badges.length * S.badgeHeight +
+            Math.max(0, d.badges.length - 1) * S.badgeGapCollapsed
+        : d.badges.length > 0
+            ? S.badgeHeight
+            : 0;
+    const contentH = badgesBlock + nameBlock;
+    let y = (H - contentH) / 2;
+    if (d.badges.length > 0) {
+        if (d.collapsed) {
+            d.badges.forEach((b, i) => {
+                const by = y + i * (S.badgeHeight + S.badgeGapCollapsed);
+                ops.push(...filledRoundedRect(S.padding, by, inner, S.badgeHeight, S.badgeRadius, b.background));
+                if (d.showGlobe)
+                    ops.push(...globeOps(W / 2, by + S.badgeHeight / 2, S.globeSize, S.globeColor));
+                else {
+                    const text = truncate(ctx.fonts, b.text, S.badgeFontSize, inner - 10);
+                    ops.push(...ctx.fonts.textOps(ctx.scope, text, S.badgeFontSize, S.badgeTextColor, W / 2, by + S.badgeHeight / 2 + S.badgeFontSize * 0.35, { align: 'center' }));
+                }
+            });
+        }
+        else {
+            const n = d.badges.length;
+            const bw = (inner - S.badgeGapExpanded * (n - 1)) / n;
+            d.badges.forEach((b, i) => {
+                const bx = S.padding + i * (bw + S.badgeGapExpanded);
+                ops.push(...filledRoundedRect(bx, y, bw, S.badgeHeight, S.badgeRadius, b.background));
+                if (d.showGlobe)
+                    ops.push(...globeOps(bx + bw / 2, y + S.badgeHeight / 2, S.globeSize, S.globeColor));
+                else {
+                    const text = truncate(ctx.fonts, b.text, S.badgeFontSize, bw - 10);
+                    ops.push(...ctx.fonts.textOps(ctx.scope, text, S.badgeFontSize, S.badgeTextColor, bx + bw / 2, y + S.badgeHeight / 2 + S.badgeFontSize * 0.35, { align: 'center' }));
+                }
+            });
+        }
+        y += badgesBlock;
+    }
+    if (d.name !== null) {
+        const text = truncate(ctx.fonts, d.name, S.nameFontSize, inner);
+        ops.push(...ctx.fonts.textOps(ctx.scope, text, S.nameFontSize, S.nameColor, W / 2, y + S.nameGap + S.nameFontSize * 0.95, { align: 'center' }));
+    }
+    return ops;
+};
+const OBJECT_INSET = 4;
+const OBJECT_BAR_HEIGHT = 20;
+const objectTileOps = (ctx, c) => {
+    const x = OBJECT_INSET;
+    const y = OBJECT_INSET;
+    const w = SQUARE - 2 * OBJECT_INSET;
+    const h = SQUARE - 2 * OBJECT_INSET;
+    const ops = [];
+    const thumb = ctx.thumbnail;
+    if (!thumb) {
+        ops.push(...filledRoundedRect(x, y, w, h, CARD_RADIUS, GeneralColors.grey2));
+        const name = truncate(ctx.fonts, c.name || 'Object removed', 9, w - 8);
+        ops.push(...ctx.fonts.textOps(ctx.scope, name, 9, GeneralColors.grey4, SQUARE / 2, SQUARE / 2 + 3, { align: 'center' }));
+        return ops;
+    }
+    // Thumbnail, cover-fit and clipped to the rounded card.
+    const scale = Math.max(w / thumb.width, h / thumb.height);
+    const iw = thumb.width * scale;
+    const ih = thumb.height * scale;
+    ops.push(pushGraphicsState(), ...roundedRectPathOps(x, y, w, h, CARD_RADIUS), clip(), endPath(), ...imageOps(ctx.scope.imageKey(thumb), x + (w - iw) / 2, y + (h - ih) / 2, iw, ih), popGraphicsState());
+    // Footer bar by object type: a layout group gets the magenta bar with white
+    // ink, a plain photo/background none, every document a white bar with dark ink.
+    const type = c.fileType;
+    const bar = type === FileUploadType.LayoutGroup
+        ? { fill: FormulaColors.darkPurple, ink: GeneralColors.white }
+        : type === FileUploadType.Background || type === undefined
+            ? null
+            : { fill: GeneralColors.white, ink: GeneralColors.darkGrey };
+    if (bar) {
+        ops.push(pushGraphicsState(), ...roundedRectPathOps(x, y, w, h, CARD_RADIUS), clip(), endPath(), ...fillStateOps(bar.fill), rectangle(x, y + h - OBJECT_BAR_HEIGHT, w, OBJECT_BAR_HEIGHT), fill(), popGraphicsState());
+        const name = truncate(ctx.fonts, c.name, 9, w - 8);
+        ops.push(...ctx.fonts.textOps(ctx.scope, name, 9, bar.ink, SQUARE / 2, y + h - OBJECT_BAR_HEIGHT / 2 + 3, { align: 'center' }));
+    }
+    return ops;
+};
+const planeChipOps = (ctx, c) => {
+    const ops = filledRoundedRect(0, 0, SQUARE, SQUARE, 8, TileColors.activeBlue);
+    const usable = SQUARE - 22;
+    const text = c.unit ? `${c.value} ${c.unit}` : c.value;
+    ops.push(...valueRowOps(ctx, text, SQUARE / 2, SQUARE / 2, GeneralColors.white, usable, SQUARE));
+    return ops;
+};
+const instructionsTileOps = (ctx, c) => {
+    const ops = filledRoundedRect(0, 0, SQUARE, SQUARE, 8, c.backgroundColor || '#EDEDED');
+    const color = c.textColor || '#2D3843';
+    const size = 11;
+    const maxW = SQUARE - 16;
+    // Word-wrap to at most four lines, like numberOfLines={4}.
+    const lines = [];
+    let current = '';
+    for (const word of c.text.split(/\s+/).filter(Boolean)) {
+        const next = current ? `${current} ${word}` : word;
+        if (ctx.fonts.width(next, size) <= maxW || !current)
+            current = next;
+        else {
+            lines.push(current);
+            current = word;
+        }
+        if (lines.length === 4)
+            break;
+    }
+    if (current && lines.length < 4)
+        lines.push(current);
+    const lh = size * 1.25;
+    const top = SQUARE / 2 - (lines.length * lh) / 2;
+    lines.forEach((line, i) => {
+        ops.push(...ctx.fonts.textOps(ctx.scope, truncate(ctx.fonts, line, size, maxW), size, color, SQUARE / 2, top + i * lh + size * 0.9, { align: 'center' }));
+    });
+    return ops;
+};
+/** Operators for a tile in DESIGN space. */
+export const tileDesignOps = (ctx, content) => {
+    switch (content.kind) {
+        case 'measurement':
+            return measurementTileOps(ctx, content);
+        case 'empty':
+            return emptyTileOps(ctx, content);
+        case 'literal':
+            return literalTileOps(ctx, content);
+        case 'header':
+            return headerTileOps(ctx, content);
+        case 'object':
+            return objectTileOps(ctx, content);
+        case 'planeDimension':
+            return planeChipOps(ctx, content);
+        case 'instructions':
+            return instructionsTileOps(ctx, content);
+    }
+};
+/** Operators for a tile in DOC space: design ops under the footprint matrix. */
+export const tileOps = (ctx, content, footprint) => withMatrix(designToDocMatrix(footprint), tileDesignOps(ctx, content));