@aptoma/folio-tools 1.0.1

package/build-and-run.js

@@ -0,0 +1,54 @@
+#!/usr/bin/env node
+'use strict';
+const esbuild = require('esbuild');
+const path = require('path');
+const {execFileSync, spawn} = require('child_process');
+const pkg = require(path.join(process.cwd(), 'package.json'));
+
+let child = null;
+
+function killChild(signal = 'SIGTERM') {
+	if (!child) return;
+	try {
+		child.kill(signal);
+	} catch (_) {
+		// ignore
+	}
+}
+
+function startServer() {
+	killChild('SIGTERM');
+
+	try {
+		execFileSync(process.execPath, [path.join(__dirname, 'test-vm.js')], {stdio: 'inherit'});
+	} catch {
+		return;
+	}
+
+	child = spawn(process.execPath, [path.join(__dirname, 'server/index.js')], {stdio: 'inherit', shell: false});
+	child.on('exit', (code, signal) => {
+		child = null;
+		if (signal) process.exit(0);
+		process.exit(code ?? 0);
+	});
+}
+
+process.on('SIGINT', () => {
+	killChild('SIGINT');
+	process.exit(0);
+});
+process.on('SIGTERM', () => {
+	killChild('SIGTERM');
+	process.exit(0);
+});
+process.on('exit', () => {
+	killChild('SIGTERM');
+});
+
+esbuild.build({
+	entryPoints: ['src/index.ts'],
+	outfile: pkg.main,
+	bundle: true,
+	platform: 'node',
+	format: 'cjs'
+}).then(startServer).catch(() => process.exit(1));

package/build.js

@@ -0,0 +1,13 @@
+#!/usr/bin/env node
+'use strict';
+const esbuild = require('esbuild');
+const path = require('path');
+const pkg = require(path.join(process.cwd(), 'package.json'));
+
+esbuild.build({
+	entryPoints: ['src/index.ts'],
+	outfile: pkg.main,
+	bundle: true,
+	platform: 'node',
+	format: 'cjs'
+}).catch(() => process.exit(1));

package/dev.js

@@ -0,0 +1,16 @@
+#!/usr/bin/env node
+'use strict';
+// Starts nodemon with the folio build-and-run script.
+// nodemon.json in the calling project controls watch paths and extensions.
+const {spawn} = require('child_process');
+const path = require('path');
+
+const child = spawn(
+	require.resolve('nodemon/bin/nodemon'),
+	[path.join(__dirname, 'build-and-run.js')],
+	{stdio: 'inherit', shell: false}
+);
+
+process.on('SIGINT', () => child.kill('SIGINT'));
+process.on('SIGTERM', () => child.kill('SIGTERM'));
+child.on('exit', (code, signal) => process.exit(signal ? 0 : (code ?? 0)));

package/dist/index.d.ts

@@ -0,0 +1,3 @@
+export * from './src/types';
+export * from './src/utils';
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../index.ts"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAC;AAC5B,cAAc,aAAa,CAAC"}

package/dist/index.js

@@ -0,0 +1,18 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./src/types"), exports);
+__exportStar(require("./src/utils"), exports);

package/dist/src/types.d.ts

@@ -0,0 +1,122 @@
+export interface Dimension {
+    height: number;
+    width: number;
+    unit: string;
+}
+export interface RawMargin {
+    top: number;
+    bottom: number;
+    inside: number;
+    outside: number;
+    unit: string;
+}
+export interface Column {
+    number: number;
+    gap: number;
+    unit: string;
+}
+export interface Baseline {
+    height: number;
+    offsetTop: number;
+    unit: string;
+}
+export interface Edition {
+    _id: string;
+    publishDate: string;
+    dimension: Dimension;
+    margin: RawMargin;
+    baseline: Baseline;
+    column: Column;
+}
+export interface PageProperties {
+    section?: string;
+    [key: string]: unknown;
+}
+export interface Page {
+    _id: string;
+    number: number;
+    displayNumber: number;
+    withoutFolio?: boolean;
+    properties?: PageProperties;
+    baseline?: Partial<Baseline>;
+    column?: Partial<Column>;
+    margin?: Partial<RawMargin>;
+}
+export interface EditionObject {
+    _id: string;
+    x: number;
+    y: number;
+    height: number;
+    width: number;
+    pages: string[];
+    itemId?: string;
+    divider?: Record<string, unknown>;
+}
+export interface Item {
+    _id: string;
+    article?: Record<string, unknown>;
+    pdf?: Record<string, unknown>;
+    ad?: Record<string, unknown>;
+    html?: Record<string, unknown>;
+    frontpage?: Record<string, unknown>;
+    [key: string]: unknown;
+}
+export interface Payload {
+    pageId: string;
+    data: {
+        edition: Edition;
+        pages: Page[];
+        objects: EditionObject[];
+        items: Item[];
+    };
+}
+export interface ComputedMargin {
+    top: number;
+    bottom: number;
+    inside: number;
+    outside: number;
+    left: number;
+    right: number;
+    unit: 'mm';
+}
+export interface PagePosition {
+    top: string;
+    left: string;
+    width: string;
+    height: string;
+}
+export interface PageElement extends Record<string, unknown> {
+    _id: string;
+    index: number;
+    x: number;
+    y: number;
+    height: number;
+    width: number;
+    pages: string[];
+    itemId?: string;
+    divider?: Record<string, unknown>;
+    type?: string;
+    pagePosition: PagePosition;
+}
+export interface PreparedPage {
+    number: number;
+    side: 'left' | 'right';
+    dimensions: Dimension;
+    margin: ComputedMargin;
+    column: Column;
+    baseline: Baseline;
+    date: string;
+    withoutFolio?: boolean;
+    properties: PageProperties;
+    elements: PageElement[];
+    section: string;
+}
+export interface Layer {
+    name: string;
+    order: string;
+    html: string;
+}
+export interface Http {
+    request(opts: unknown, retries?: number): Promise<Response>;
+}
+//# sourceMappingURL=types.d.ts.map

package/dist/src/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/types.ts"],"names":[],"mappings":"AAEA,MAAM,WAAW,SAAS;IACzB,MAAM,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,MAAM,CAAC;CACb;AAED,MAAM,WAAW,SAAS;IACzB,GAAG,EAAE,MAAM,CAAC;IACZ,MAAM,EAAE,MAAM,CAAC;IACf,MAAM,EAAE,MAAM,CAAC;IACf,OAAO,EAAE,MAAM,CAAC;IAChB,IAAI,EAAE,MAAM,CAAC;CACb;AAED,MAAM,WAAW,MAAM;IACtB,MAAM,EAAE,MAAM,CAAC;IACf,GAAG,EAAE,MAAM,CAAC;IACZ,IAAI,EAAE,MAAM,CAAC;CACb;AAED,MAAM,WAAW,QAAQ;IACxB,MAAM,EAAE,MAAM,CAAC;IACf,SAAS,EAAE,MAAM,CAAC;IAClB,IAAI,EAAE,MAAM,CAAC;CACb;AAED,MAAM,WAAW,OAAO;IACvB,GAAG,EAAE,MAAM,CAAC;IACZ,WAAW,EAAE,MAAM,CAAC;IACpB,SAAS,EAAE,SAAS,CAAC;IACrB,MAAM,EAAE,SAAS,CAAC;IAClB,QAAQ,EAAE,QAAQ,CAAC;IACnB,MAAM,EAAE,MAAM,CAAC;CACf;AAED,MAAM,WAAW,cAAc;IAC9B,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAC;CACvB;AAED,MAAM,WAAW,IAAI;IACpB,GAAG,EAAE,MAAM,CAAC;IACZ,MAAM,EAAE,MAAM,CAAC;IACf,aAAa,EAAE,MAAM,CAAC;IACtB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,UAAU,CAAC,EAAE,cAAc,CAAC;IAC5B,QAAQ,CAAC,EAAE,OAAO,CAAC,QAAQ,CAAC,CAAC;IAC7B,MAAM,CAAC,EAAE,OAAO,CAAC,MAAM,CAAC,CAAC;IACzB,MAAM,CAAC,EAAE,OAAO,CAAC,SAAS,CAAC,CAAC;CAC5B;AAED,MAAM,WAAW,aAAa;IAC7B,GAAG,EAAE,MAAM,CAAC;IACZ,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;IACV,MAAM,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,EAAE,CAAC;IAChB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,OAAO,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;CAClC;AAED,MAAM,WAAW,IAAI;IACpB,GAAG,EAAE,MAAM,CAAC;IACZ,OAAO,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IAClC,GAAG,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IAC9B,EAAE,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IAC7B,IAAI,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IAC/B,SAAS,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IACpC,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAC;CACvB;AAED,MAAM,WAAW,OAAO;IACvB,MAAM,EAAE,MAAM,CAAC;IACf,IAAI,EAAE;QACL,OAAO,EAAE,OAAO,CAAC;QACjB,KAAK,EAAE,IAAI,EAAE,CAAC;QACd,OAAO,EAAE,aAAa,EAAE,CAAC;QACzB,KAAK,EAAE,IAAI,EAAE,CAAC;KACd,CAAC;CACF;AAID,MAAM,WAAW,cAAc;IAC9B,GAAG,EAAE,MAAM,CAAC;IACZ,MAAM,EAAE,MAAM,CAAC;IACf,MAAM,EAAE,MAAM,CAAC;IACf,OAAO,EAAE,MAAM,CAAC;IAChB,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,IAAI,CAAC;CACX;AAED,MAAM,WAAW,YAAY;IAC5B,GAAG,EAAE,MAAM,CAAC;IACZ,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;CACf;AAED,MAAM,WAAW,WAAY,SAAQ,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC;IAC3D,GAAG,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,MAAM,CAAC;IACd,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;IACV,MAAM,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,EAAE,CAAC;IAChB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,OAAO,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IAClC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,YAAY,EAAE,YAAY,CAAC;CAC3B;AAED,MAAM,WAAW,YAAY;IAC5B,MAAM,EAAE,MAAM,CAAC;IACf,IAAI,EAAE,MAAM,GAAG,OAAO,CAAC;IACvB,UAAU,EAAE,SAAS,CAAC;IACtB,MAAM,EAAE,cAAc,CAAC;IACvB,MAAM,EAAE,MAAM,CAAC;IACf,QAAQ,EAAE,QAAQ,CAAC;IACnB,IAAI,EAAE,MAAM,CAAC;IACb,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,UAAU,EAAE,cAAc,CAAC;IAC3B,QAAQ,EAAE,WAAW,EAAE,CAAC;IACxB,OAAO,EAAE,MAAM,CAAC;CAChB;AAED,MAAM,WAAW,KAAK;IACrB,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,MAAM,CAAC;CACb;AAED,MAAM,WAAW,IAAI;IACpB,OAAO,CAAC,IAAI,EAAE,OAAO,EAAE,OAAO,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC,QAAQ,CAAC,CAAC;CAC5D"}

package/dist/src/types.js

@@ -0,0 +1,3 @@
+"use strict";
+// Raw API shapes from DrEdition payload
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/src/utils.d.ts

@@ -0,0 +1,14 @@
+import { Baseline, Column, ComputedMargin, Dimension, EditionObject, Item, PageElement, PreparedPage, RawMargin } from './types';
+export declare function getGridCssProps({ column, baseline, dimensions, margin }: {
+    column: Column;
+    baseline: Baseline;
+    dimensions: Dimension;
+    margin: ComputedMargin;
+}): string[];
+export declare function getMarginsInMm(edition: {
+    margin: RawMargin;
+}, page: {
+    margin?: Partial<RawMargin>;
+}): ComputedMargin;
+export declare function convertObjectsToPageElements(objects: EditionObject[], items: Item[], preparedPage: PreparedPage): PageElement[];
+//# sourceMappingURL=utils.d.ts.map

package/dist/src/utils.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../src/utils.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,QAAQ,EAAE,MAAM,EAAE,cAAc,EAAE,SAAS,EAAE,aAAa,EAAE,IAAI,EAAE,WAAW,EAAE,YAAY,EAAE,SAAS,EAAC,MAAM,SAAS,CAAC;AAE/H,wBAAgB,eAAe,CAAC,EAAC,MAAM,EAAE,QAAQ,EAAE,UAAU,EAAE,MAAM,EAAC,EAAE;IACvE,MAAM,EAAE,MAAM,CAAC;IACf,QAAQ,EAAE,QAAQ,CAAC;IACnB,UAAU,EAAE,SAAS,CAAC;IACtB,MAAM,EAAE,cAAc,CAAC;CACvB,GAAG,MAAM,EAAE,CAqBX;AAMD,wBAAgB,cAAc,CAAC,OAAO,EAAE;IAAC,MAAM,EAAE,SAAS,CAAA;CAAC,EAAE,IAAI,EAAE;IAAC,MAAM,CAAC,EAAE,OAAO,CAAC,SAAS,CAAC,CAAA;CAAC,GAAG,cAAc,CAYhH;AAMD,wBAAgB,4BAA4B,CAAC,OAAO,EAAE,aAAa,EAAE,EAAE,KAAK,EAAE,IAAI,EAAE,EAAE,YAAY,EAAE,YAAY,GAAG,WAAW,EAAE,CAQ/H"}

package/dist/src/utils.js

@@ -0,0 +1,84 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getGridCssProps = getGridCssProps;
+exports.getMarginsInMm = getMarginsInMm;
+exports.convertObjectsToPageElements = convertObjectsToPageElements;
+function getGridCssProps({ column, baseline, dimensions, margin }) {
+    if (!column || !baseline)
+        return [];
+    const contentWidth = dimensions.width - margin.left - margin.right;
+    const colCount = column.number;
+    const gap = column.gap;
+    const colWidth = (contentWidth - gap * (colCount - 1)) / colCount;
+    const props = [`--grid-column-count: ${colCount}`];
+    for (let i = 1; i <= colCount; i++) {
+        const left = margin.left + (i - 1) * (colWidth + gap);
+        const right = left + colWidth;
+        props.push(`--grid-col-${i}-left: ${round(left)}mm`);
+        props.push(`--grid-col-${i}-right: ${round(right)}mm`);
+    }
+    const toMm = baseline.unit === 'pt' ? (n) => n * 0.3528 : (n) => n;
+    props.push(`--grid-baseline-first: ${round(toMm(baseline.offsetTop))}mm`);
+    props.push(`--grid-baseline-increment: ${round(toMm(baseline.height))}mm`);
+    return props;
+}
+function round(n) {
+    return Math.round(n * 1000) / 1000;
+}
+function getMarginsInMm(edition, page) {
+    const toMm = edition.margin.unit === 'pt' ? convertPt2Mm : (n) => n;
+    const m = Object.assign({}, edition.margin, page.margin);
+    return {
+        top: toMm(m.top),
+        bottom: toMm(m.bottom),
+        inside: toMm(m.inside),
+        outside: toMm(m.outside),
+        left: 0,
+        right: 0,
+        unit: 'mm'
+    };
+}
+function convertPt2Mm(value) {
+    return value * 0.3528;
+}
+function convertObjectsToPageElements(objects, items, preparedPage) {
+    return objects.reduce((acc, object, index) => {
+        const element = createPageElement(object, items, index + 1);
+        assignPagePosition(element, preparedPage);
+        acc.push(element);
+        return acc;
+    }, []);
+}
+function createPageElement(object, items, index) {
+    const element = {
+        ...object,
+        index,
+        pagePosition: { top: '', left: '', width: '', height: '' }
+    };
+    if (object.divider) {
+        element.type = 'divider';
+        return element;
+    }
+    const item = items.find((item) => item._id === object.itemId);
+    if (item) {
+        Object.assign(element, item);
+        element.type = getItemType(item);
+    }
+    return element;
+}
+function getItemType(item) {
+    const types = ['article', 'pdf', 'ad', 'html', 'frontpage'];
+    return types.find((type) => item[type]);
+}
+function assignPagePosition(element, preparedPage) {
+    if (preparedPage.side === 'right' && element.pages.length > 1) {
+        const articleArea = preparedPage.dimensions.width - preparedPage.margin.inside - preparedPage.margin.outside;
+        element.x = element.x - articleArea - 2 * preparedPage.margin.inside;
+    }
+    element.pagePosition = {
+        top: element.y + 'mm',
+        left: element.x + 'mm',
+        width: element.width + 'mm',
+        height: element.height + 'mm'
+    };
+}

package/package.json

@@ -0,0 +1,48 @@
+{
+  "name": "@aptoma/folio-tools",
+  "version": "1.0.1",
+  "description": "Build tooling and dev server for Aptoma DrEdition print folio renderers",
+  "license": "Unlicensed",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "files": [
+    "dist/",
+    "server/",
+    "build.js",
+    "build-and-run.js",
+    "dev.js",
+    "test-vm.js"
+  ],
+  "bin": {
+    "folio-build": "./build.js",
+    "folio-dev": "./dev.js",
+    "folio-test-vm": "./test-vm.js"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/aptoma/folio-tools.git"
+  },
+  "scripts": {
+    "build": "tsc",
+    "prepublishOnly": "tsc",
+    "prerelease-check": "tsc --noEmit",
+    "release": "npm run prerelease-check && release-it -n -i patch",
+    "release:minor": "npm run prerelease-check && release-it -n -i minor",
+    "release:major": "npm run prerelease-check && release-it -n -i major"
+  },
+  "dependencies": {
+    "@hapi/hapi": "^20.2.1",
+    "@hapi/inert": "^6.0.5",
+    "esbuild": "^0.27.3",
+    "joi": "^17.6.0",
+    "node-fetch": "^2.6.7",
+    "nodemon": "^2.0.15",
+    "vm2": "^3.10.5"
+  },
+  "devDependencies": {
+    "@types/node": "^25.3.0",
+    "auto-changelog": "^2.5.0",
+    "release-it": "^19.0.5",
+    "typescript": "^5.9.3"
+  }
+}

package/server/dredition.js

@@ -0,0 +1,53 @@
+'use strict';
+
+const path = require('path');
+const fetch = require('node-fetch');
+const https = require('https');
+
+const config = require(path.join(process.cwd(), 'config/config'));
+
+const httpsAgent = new https.Agent({rejectUnauthorized: false});
+
+function apiFetch(url, extraHeaders = {}) {
+	return fetch(url, {
+		headers: {
+			Authorization: `apikey ${config.dredition.apikey}`,
+			...extraHeaders
+		},
+		agent: httpsAgent
+	});
+}
+
+const editionCache = {};
+
+async function getEditionById(editionId) {
+	if (!editionCache[editionId] || isExpired(editionCache[editionId])) {
+		const url = `${config.dredition.url}/print-editions/${editionId}`;
+		const response = await apiFetch(url, {Accept: 'application/vnd.dredition.v11+json'});
+
+		if (!response.ok) {
+			return null;
+		}
+
+		const {data} = await response.json();
+		editionCache[editionId] = {data, lastUpdated: Date.now()};
+	}
+
+	return editionCache[editionId].data;
+}
+
+function isExpired({lastUpdated}) {
+	return lastUpdated < Date.now() - 15000;
+}
+
+async function getPageFolioData(editionId, pageId) {
+	const url = `${config.dredition.url}/print-editions/${editionId}/pages/${pageId}/folio-data`;
+	return apiFetch(url, {Accept: 'application/vnd.dredition.v11+json'});
+}
+
+async function getProductList() {
+	const url = `${config.dredition.url}/print-editions?page[number]=1&page[size]=20&fields[editions]=id,title,updatedAt&fields[products]=id,title&filter[isTemplate]=0&sort=-updatedAt`;
+	return apiFetch(url);
+}
+
+module.exports = {getEditionById, getPageFolioData, getProductList};

package/server/grid-overlay.js

@@ -0,0 +1,139 @@
+'use strict';
+
+class FgGridOverlay extends HTMLElement {
+	connectedCallback() {
+		if (this.shadowRoot) return; // guard against re-connection after DOM move
+
+		const st = getComputedStyle(document.documentElement);
+		const colCount = parseInt(st.getPropertyValue('--grid-column-count'), 10) || 0;
+		if (!colCount) return;
+
+		// Position relative to .page — move self there if needed
+		const page = document.querySelector('.page');
+		if (page && this.parentElement !== page) {
+			page.appendChild(this); // triggers connectedCallback again; guard above prevents double-init
+			return;
+		}
+
+		const shadow = this.attachShadow({mode: 'open'});
+		shadow.innerHTML = this._template(st, colCount);
+
+		const root = shadow;
+		function wire(cbId, layerId) {
+			const cb = root.getElementById(cbId);
+			const layer = root.getElementById(layerId);
+			if (localStorage.getItem(cbId) === 'true') {
+				cb.checked = true;
+				layer.style.display = 'block';
+			}
+			cb.addEventListener('change', function () {
+				layer.style.display = this.checked ? 'block' : 'none';
+				localStorage.setItem(cbId, this.checked);
+			});
+		}
+		wire('fg-cb-margins', 'fg-margins');
+		wire('fg-cb-columns', 'fg-columns');
+		wire('fg-cb-baseline', 'fg-baseline');
+	}
+
+	_template(st, colCount) {
+		const columnLines = this._buildColumnLines(st, colCount);
+		return `
+<style>
+:host {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    pointer-events: none;
+    z-index: 400;
+}
+#fg-margins {
+    position: absolute;
+    top: var(--margin-top);
+    left: var(--margin-left);
+    right: var(--margin-right);
+    bottom: var(--margin-bottom);
+    border: 1px dashed rgba(224, 64, 251, 0.7);
+    pointer-events: none;
+    display: none;
+}
+#fg-columns {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    pointer-events: none;
+    display: none;
+}
+.col-line {
+    position: absolute;
+    top: var(--margin-top);
+    bottom: var(--margin-bottom);
+    width: 1px;
+    background: rgba(77, 182, 172, 0.5);
+}
+#fg-baseline {
+    position: absolute;
+    top: calc(var(--margin-top) + var(--grid-baseline-first));
+    left: var(--margin-left);
+    right: var(--margin-right);
+    bottom: var(--margin-bottom);
+    pointer-events: none;
+    display: none;
+    background-image: repeating-linear-gradient(
+        to bottom,
+        rgba(3, 155, 229, 0.5) 0,
+        rgba(3, 155, 229, 0.5) 1px,
+        transparent 1px,
+        transparent var(--grid-baseline-increment)
+    );
+}
+#fg-controls {
+    position: fixed;
+    bottom: 8px;
+    right: 8px;
+    z-index: 999;
+    font: 400 11px/20px sans-serif;
+    background: rgba(255, 255, 255, 0.92);
+    color: #111;
+    padding: 4px 10px;
+    border-radius: 3px;
+    display: flex;
+    gap: 10px;
+    align-items: center;
+    pointer-events: auto;
+}
+#fg-controls label {
+    cursor: pointer;
+    display: flex;
+    gap: 4px;
+    align-items: center;
+}
+</style>
+<div id="fg-margins"></div>
+<div id="fg-columns">${columnLines}</div>
+<div id="fg-baseline"></div>
+<div id="fg-controls">
+    <label><input type="checkbox" id="fg-cb-margins"> <span style="color:#e040fb">Margins</span></label>
+    <label><input type="checkbox" id="fg-cb-columns"> <span style="color:#4db6ac">Columns</span></label>
+    <label><input type="checkbox" id="fg-cb-baseline"> <span style="color:#039be5">Baseline</span></label>
+</div>`;
+	}
+
+	_buildColumnLines(st, colCount) {
+		const lines = [];
+		for (let i = 1; i <= colCount; i++) {
+			for (const side of ['left', 'right']) {
+				const x = st.getPropertyValue(`--grid-col-${i}-${side}`).trim();
+				lines.push(`<div class="col-line" style="left:${x}"></div>`);
+			}
+		}
+		return lines.join('\n');
+	}
+}
+
+customElements.define('fg-grid-overlay', FgGridOverlay);
+document.body.appendChild(document.createElement('fg-grid-overlay'));

package/server/index.js

@@ -0,0 +1,75 @@
+'use strict';
+
+const path = require('path');
+const Hapi = require('@hapi/hapi');
+const Joi = require('joi');
+
+const config = require(path.join(process.cwd(), 'config/config'));
+const {preview} = require('./preview');
+const {products} = require('./products');
+
+const server = Hapi.server(config.server);
+
+start().catch((err) => {
+	console.error(err.stack);
+	server.stop({timeout: 5000}, () => {
+		console.log('Server stopped');
+		process.exit(1);
+	});
+});
+
+async function start() {
+	await server.register([require('@hapi/inert')]);
+
+	server.route({
+		method: 'GET',
+		path: '/',
+		handler: products
+	});
+
+	server.route({
+		method: 'GET',
+		path: '/preview',
+		handler: preview,
+		options: {
+			validate: {
+				query: Joi.object({
+					editionId: Joi.string(),
+					pageId: Joi.string().default(''),
+					layer: Joi.number().default(0)
+				})
+			}
+		}
+	});
+
+	server.route({
+		method: 'GET',
+		path: '/stylesheets/{param*}',
+		handler: {
+			directory: {
+				path: path.join(process.cwd(), 'stylesheets')
+			}
+		}
+	});
+
+	server.route({
+		method: 'GET',
+		path: '/files/{param*}',
+		handler: {
+			directory: {
+				path: path.join(process.cwd(), 'files')
+			}
+		}
+	});
+
+	server.route({
+		method: 'GET',
+		path: '/dev/grid-overlay.js',
+		handler: {
+			file: path.join(__dirname, 'grid-overlay.js')
+		}
+	});
+
+	await server.start();
+	console.log('Folio server running at:', server.info.uri);
+}

package/server/preview.js

@@ -0,0 +1,68 @@
+'use strict';
+
+const path = require('path');
+
+const config = require(path.join(process.cwd(), 'config/config'));
+const pkg = require(path.join(process.cwd(), 'package.json'));
+const renderer = require(path.join(process.cwd(), pkg.main));
+const {getEditionById, getPageFolioData} = require('./dredition');
+
+const GRID_OVERLAY = `<script src="/dev/grid-overlay.js"></script>`;
+
+const PAGE_NAV_SCRIPT = `<script>
+document.addEventListener('keydown', function (e) {
+    if (e.key !== 'j' && e.key !== 'k') return;
+    var links = Array.from(document.querySelectorAll('.page-nav a'));
+    var currentPageId = new URLSearchParams(location.search).get('pageId');
+    var current = links.findIndex(function (a) {
+        return new URL(a.href).searchParams.get('pageId') === currentPageId;
+    });
+    var target = current + (e.key === 'j' ? 1 : -1);
+    if (target >= 0 && target < links.length) location.href = links[target].href;
+});
+</script>`;
+
+async function getPageLinks(editionId) {
+	const data = await getEditionById(editionId);
+	if (!data) {
+		return [];
+	}
+	return data.pageOrder.map((pageId, index) => {
+		return `<a href="/preview?editionId=${editionId}&pageId=${pageId}">${index + 1}</a>`;
+	});
+}
+
+async function getFirstPageId(editionId) {
+	const data = await getEditionById(editionId);
+	if (!data) {
+		return null;
+	}
+	return data.pageOrder[0];
+}
+
+async function preview(req) {
+	const editionId = req.query.editionId;
+	const pageId = req.query.pageId || (await getFirstPageId(editionId));
+	const pages = await getPageLinks(editionId);
+
+	try {
+		const response = await getPageFolioData(editionId, pageId);
+		const data = await response.json();
+
+		if (!response.ok) {
+			data.help = `Check api url, used: ${config.dredition.url}`;
+			return data;
+		}
+
+		const layers = await renderer.render(data, `http://localhost:${config.server.port}`, null);
+		return layers[req.query.layer].html.replace(
+			'</body>',
+			`${GRID_OVERLAY}<div class="page-nav">${pages.join('\n')}</div>${PAGE_NAV_SCRIPT}</body>`
+		);
+	} catch (err) {
+		console.log(err);
+		return err;
+	}
+}
+
+module.exports = {preview};

package/server/products.js

@@ -0,0 +1,36 @@
+'use strict';
+
+const {getProductList} = require('./dredition');
+
+async function products() {
+	try {
+		const response = await getProductList();
+		const result = await response.json();
+
+		if (result.errors) {
+			return result.errors;
+		}
+
+		const productsWithEditions = result.included.products.map((product) => {
+			product.editions = result.data.filter((edition) => edition.product === product._id);
+			return product;
+		});
+
+		return `
+		<html><body style="font: 400 12pt/16pt sans-serif">${productsWithEditions.reduce((html, product) => {
+			return (
+				html +
+				`<h2>${product.title}</h2>` +
+				product.editions.reduce((html, edition) => {
+					return html + `<a href="/preview?editionId=${edition._id}">${edition.title}</a><br/>`;
+				}, '')
+			);
+		}, '')}</body></html>
+		`;
+	} catch (err) {
+		console.log(err);
+		return err;
+	}
+}
+
+module.exports = {products};

package/test-vm.js

@@ -0,0 +1,10 @@
+#!/usr/bin/env node
+'use strict';
+
+const {NodeVM, VMScript} = require('vm2');
+const vm = new NodeVM({
+	sandbox: {self: null}
+});
+const file = require('fs').readFileSync('./files/index.js').toString();
+const script = new VMScript(file);
+vm.run(script);