takumi-pdf 0.10.0 → 0.11.0

package/README.md

@@ -30,7 +30,7 @@ bun add takumi-pdf
 ```tsx
 import { writeFile } from "node:fs/promises";
 import { googleFonts } from "@takumi-rs/helpers";
-import { render } from "takumi-pdf";
+import { PageNumber, TotalPages, render } from "takumi-pdf";
 
 const pdf = await render(
   <main tw="flex flex-col gap-4">
@@ -45,7 +45,7 @@ const pdf = await render(
     fonts: await googleFonts(["Inter"]),
     footer: (
       <div tw="flex w-full justify-center text-[10px] text-gray-500">
-        Page <span className="pageNumber" /> of <span className="totalPages" />
+        Page <PageNumber /> of <TotalPages />
       </div>
     ),
   },
@@ -74,28 +74,22 @@ const pdf = await render(report, {
 
 ## Headers and footers
 
-Headers and footers repeat on every page. Elements whose class list includes `pageNumber` or `totalPages` receive the counter as text.
+Headers and footers repeat on every page. `<PageNumber />` and `<TotalPages />` place the counters; the `format` prop picks a CSS counter style.
 
 ```tsx
+import { PageNumber, TotalPages } from "takumi-pdf";
+
 const pdf = await render(report, {
   footer: (
     <div style={{ fontSize: 12 }}>
-      Page <span className="pageNumber" /> of <span className="totalPages" />
+      第 <PageNumber format="trad-chinese-informal" /> 頁,共{" "}
+      <TotalPages format="trad-chinese-informal" /> 頁
     </div>
   ),
 });
 ```
 
-Add a CSS counter-style name to the class list to format the number:
-
-```tsx
-footer: (
-  <div style={{ fontSize: 12 }}>
-    第 <span className="pageNumber trad-chinese-informal" /> 頁,共{" "}
-    <span className="totalPages trad-chinese-informal" /> 頁
-  </div>
-),
-```
+The primitives render class hooks, the same `pageNumber` / `totalPages` names Chromium's print templates use, so HTML input writes `<span class="pageNumber"></span>` directly.
 
 | Counter style                               | Example       |
 | ------------------------------------------- | ------------- |
@@ -166,9 +160,27 @@ const pdf = await render(
 | `break-inside: avoid`         | Keeps the element on one page when it fits.             |
 | `box-decoration-break: clone` | Repeats borders and backgrounds on every page fragment. |
 
+## Tables
+
+`<table>` markup lays out on shared column tracks, so column x positions stay identical across pages. A `<thead>` paints again at the top of every page its table continues onto, when it is at most a quarter of the page tall and no header cell spans into the body.
+
+```tsx
+const pdf = await render(
+  <table>
+    <thead>
+      <tr>
+        <th>Name</th>
+        <th>Qty</th>
+      </tr>
+    </thead>
+    <tbody>{rows}</tbody>
+  </table>,
+);
+```
+
 ## Links, outline, and metadata
 
-Anchors with an `href` become clickable link annotations. `outline: true` builds PDF bookmarks from `h1` through `h6` headings. `metadata` fills the document properties:
+Anchors with an `href` become clickable link annotations. `<TargetPageNumber />` prints the page a link's target lands on, which is what a table of contents needs. `outline: true` builds PDF bookmarks from `h1` through `h6` headings. `metadata` fills the document properties:
 
 ```tsx
 const pdf = await render(report, {
@@ -188,7 +200,7 @@ Omit `metadata` to keep output byte-identical across runs.
 
 Output is **tagged by default**: HTML semantics (`h1` through `h6`, `p`, `img` with `alt`, `a`, lists) become a PDF structure tree, like Chromium's print-to-PDF. Set `tagged: "ua1"` to validate against PDF/UA-1, or `tagged: false` to drop the tree when file size matters more than accessibility.
 
-`<table>` markup is not supported, and a table built out of flex rows carries no `Table` structure elements.
+`<table>` markup lays out and paints, but carries no `Table` structure elements yet.
 
 `pdfa` renders archival output. Validation runs during rendering. A document that cannot conform fails with the violated rule instead of writing a broken file. Every level, and PDF/UA-1, passes [veraPDF](https://verapdf.org).
 

package/bundlers/node.d.ts

@@ -1 +1,2 @@
 export * from "../dist/export.mjs";
+export { default } from "../dist/export.mjs";

package/dist/export.cjs

@@ -2,6 +2,7 @@ Object.defineProperties(exports, {
 	__esModule: { value: true },
 	[Symbol.toStringTag]: { value: "Module" }
 });
+const require_primitives = require("./primitives.cjs");
 let _takumi_rs_helpers_html = require("@takumi-rs/helpers/html");
 let _takumi_rs_helpers_jsx = require("@takumi-rs/helpers/jsx");
 let _takumi_rs_helpers_renderer = require("@takumi-rs/helpers/renderer");
@@ -135,10 +136,10 @@ function __wbg_get_imports() {
 		__proto__: null,
 		"./takumi_pdf_wasm_bg.js": {
 			__proto__: null,
-			__wbg_Error_92b29b0548f8b746: function(arg0, arg1) {
+			__wbg_Error_408e67f47ca7b58b: function(arg0, arg1) {
 				return addHeapObject(Error(getStringFromWasm0(arg0, arg1)));
 			},
-			__wbg_Number_9a4e0ecb0fa16705: function(arg0) {
+			__wbg_Number_3890faa6d3ff057d: function(arg0) {
 				return Number(getObject(arg0));
 			},
 			__wbg_String_8564e559799eccda: function(arg0, arg1) {
@@ -147,55 +148,55 @@ function __wbg_get_imports() {
 				getDataViewMemory0().setInt32(arg0 + 4, len1, true);
 				getDataViewMemory0().setInt32(arg0 + 0, ptr1, true);
 			},
-			__wbg___wbindgen_bigint_get_as_i64_d968e41184ae354f: function(arg0, arg1) {
+			__wbg___wbindgen_bigint_get_as_i64_c4ecf48528083721: function(arg0, arg1) {
 				const v = getObject(arg1);
 				const ret = typeof v === "bigint" ? v : void 0;
 				getDataViewMemory0().setBigInt64(arg0 + 8, isLikeNone(ret) ? BigInt(0) : ret, true);
 				getDataViewMemory0().setInt32(arg0 + 0, !isLikeNone(ret), true);
 			},
-			__wbg___wbindgen_boolean_get_fa956cfa2d1bd751: function(arg0) {
+			__wbg___wbindgen_boolean_get_c9c83ebd41b34df3: function(arg0) {
 				const v = getObject(arg0);
 				const ret = typeof v === "boolean" ? v : void 0;
 				return isLikeNone(ret) ? 16777215 : ret ? 1 : 0;
 			},
-			__wbg___wbindgen_debug_string_c25d447a39f5578f: function(arg0, arg1) {
+			__wbg___wbindgen_debug_string_a57024b9c6e4a48b: function(arg0, arg1) {
 				const ptr1 = passStringToWasm0(debugString(getObject(arg1)), wasm.__wbindgen_export, wasm.__wbindgen_export2);
 				const len1 = WASM_VECTOR_LEN;
 				getDataViewMemory0().setInt32(arg0 + 4, len1, true);
 				getDataViewMemory0().setInt32(arg0 + 0, ptr1, true);
 			},
-			__wbg___wbindgen_in_aca499c5de7ff5e5: function(arg0, arg1) {
+			__wbg___wbindgen_in_ac983077f137f2e6: function(arg0, arg1) {
 				return getObject(arg0) in getObject(arg1);
 			},
-			__wbg___wbindgen_is_bigint_2f76dc55065b4273: function(arg0) {
+			__wbg___wbindgen_is_bigint_8ffbbef442139384: function(arg0) {
 				return typeof getObject(arg0) === "bigint";
 			},
-			__wbg___wbindgen_is_function_1ff95bcc5517c252: function(arg0) {
+			__wbg___wbindgen_is_function_5e4570eb24ffa122: function(arg0) {
 				return typeof getObject(arg0) === "function";
 			},
-			__wbg___wbindgen_is_object_a27215656b807791: function(arg0) {
+			__wbg___wbindgen_is_object_a2790eb24c211ea0: function(arg0) {
 				const val = getObject(arg0);
 				return typeof val === "object" && val !== null;
 			},
-			__wbg___wbindgen_is_string_ea5e6cc2e4141dfe: function(arg0) {
+			__wbg___wbindgen_is_string_e6f02f0ea5f20a32: function(arg0) {
 				return typeof getObject(arg0) === "string";
 			},
-			__wbg___wbindgen_is_undefined_c05833b95a3cf397: function(arg0) {
+			__wbg___wbindgen_is_undefined_6cff064c44e0d823: function(arg0) {
 				return getObject(arg0) === void 0;
 			},
-			__wbg___wbindgen_jsval_eq_e659fcf7b0e32763: function(arg0, arg1) {
+			__wbg___wbindgen_jsval_eq_0a18949a61670320: function(arg0, arg1) {
 				return getObject(arg0) === getObject(arg1);
 			},
-			__wbg___wbindgen_jsval_loose_eq_db4c3b15f63fc170: function(arg0, arg1) {
+			__wbg___wbindgen_jsval_loose_eq_acf2776254a8d832: function(arg0, arg1) {
 				return getObject(arg0) == getObject(arg1);
 			},
-			__wbg___wbindgen_number_get_394265ed1e1b84ee: function(arg0, arg1) {
+			__wbg___wbindgen_number_get_136b9679cab35cfb: function(arg0, arg1) {
 				const obj = getObject(arg1);
 				const ret = typeof obj === "number" ? obj : void 0;
 				getDataViewMemory0().setFloat64(arg0 + 8, isLikeNone(ret) ? 0 : ret, true);
 				getDataViewMemory0().setInt32(arg0 + 0, !isLikeNone(ret), true);
 			},
-			__wbg___wbindgen_string_get_b0ca35b86a603356: function(arg0, arg1) {
+			__wbg___wbindgen_string_get_d154f1e671052120: function(arg0, arg1) {
 				const obj = getObject(arg1);
 				const ret = typeof obj === "string" ? obj : void 0;
 				var ptr1 = isLikeNone(ret) ? 0 : passStringToWasm0(ret, wasm.__wbindgen_export, wasm.__wbindgen_export2);
@@ -203,30 +204,30 @@ function __wbg_get_imports() {
 				getDataViewMemory0().setInt32(arg0 + 4, len1, true);
 				getDataViewMemory0().setInt32(arg0 + 0, ptr1, true);
 			},
-			__wbg___wbindgen_throw_344f42d3211c4765: function(arg0, arg1) {
+			__wbg___wbindgen_throw_bb96b2010945f0bc: function(arg0, arg1) {
 				throw new Error(getStringFromWasm0(arg0, arg1));
 			},
-			__wbg_call_8a2dd23819f8a60a: function() {
+			__wbg_call_1c5886ab9c57d1c7: function() {
 				return handleError(function(arg0, arg1) {
 					return addHeapObject(getObject(arg0).call(getObject(arg1)));
 				}, arguments);
 			},
-			__wbg_done_89b2b13e91a60321: function(arg0) {
+			__wbg_done_669171204c3dcae2: function(arg0) {
 				return getObject(arg0).done;
 			},
-			__wbg_entries_015dc610cd81ede0: function(arg0) {
+			__wbg_entries_7774d489e1da5f4f: function(arg0) {
 				return addHeapObject(Object.entries(getObject(arg0)));
 			},
-			__wbg_get_507a50627bffa49b: function(arg0, arg1) {
+			__wbg_get_c0c8f8d7da0c03dd: function(arg0, arg1) {
 				const ret = getObject(arg0)[arg1 >>> 0];
 				return addHeapObject(ret);
 			},
-			__wbg_get_c7eb1f358a7654df: function() {
+			__wbg_get_d173c0308df22d37: function() {
 				return handleError(function(arg0, arg1) {
 					return addHeapObject(Reflect.get(getObject(arg0), getObject(arg1)));
 				}, arguments);
 			},
-			__wbg_get_unchecked_6e0ad6d2a41b06f6: function(arg0, arg1) {
+			__wbg_get_unchecked_e20b893aeafc3fca: function(arg0, arg1) {
 				const ret = getObject(arg0)[arg1 >>> 0];
 				return addHeapObject(ret);
 			},
@@ -234,7 +235,7 @@ function __wbg_get_imports() {
 				const ret = getObject(arg0)[getObject(arg1)];
 				return addHeapObject(ret);
 			},
-			__wbg_instanceof_ArrayBuffer_4480b9e0068a8adb: function(arg0) {
+			__wbg_instanceof_ArrayBuffer_993d02d2d254cad1: function(arg0) {
 				let result;
 				try {
 					result = getObject(arg0) instanceof ArrayBuffer;
@@ -243,7 +244,7 @@ function __wbg_get_imports() {
 				}
 				return result;
 			},
-			__wbg_instanceof_Map_e5b5e3db98422fcc: function(arg0) {
+			__wbg_instanceof_Map_9a4d6ead180ae3a9: function(arg0) {
 				let result;
 				try {
 					result = getObject(arg0) instanceof Map;
@@ -252,7 +253,7 @@ function __wbg_get_imports() {
 				}
 				return result;
 			},
-			__wbg_instanceof_Uint8Array_309b927aaf7a3fc7: function(arg0) {
+			__wbg_instanceof_Uint8Array_f935dbb0aa7cdeed: function(arg0) {
 				let result;
 				try {
 					result = getObject(arg0) instanceof Uint8Array;
@@ -261,53 +262,53 @@ function __wbg_get_imports() {
 				}
 				return result;
 			},
-			__wbg_isArray_0677c962b281d01a: function(arg0) {
+			__wbg_isArray_6339f732981044bf: function(arg0) {
 				return Array.isArray(getObject(arg0));
 			},
-			__wbg_isSafeInteger_04f36e4056f1b851: function(arg0) {
+			__wbg_isSafeInteger_f3d6cd19ccfe4512: function(arg0) {
 				return Number.isSafeInteger(getObject(arg0));
 			},
-			__wbg_iterator_6f722e4a93058b71: function() {
+			__wbg_iterator_5cebbb86e33c6dd6: function() {
 				const ret = Symbol.iterator;
 				return addHeapObject(ret);
 			},
-			__wbg_length_1f0964f4a5e2c6d8: function(arg0) {
+			__wbg_length_36bd29c6848c2144: function(arg0) {
 				return getObject(arg0).length;
 			},
-			__wbg_length_370319915dc99107: function(arg0) {
+			__wbg_length_ecfa2c63d3d0d82c: function(arg0) {
 				return getObject(arg0).length;
 			},
-			__wbg_new_32b398fb48b6d94a: function() {
+			__wbg_new_116be93542d39019: function() {
 				return addHeapObject(new Array());
 			},
-			__wbg_new_b667d279fd5aa943: function(arg0, arg1) {
+			__wbg_new_358857d90afd5a2d: function(arg0, arg1) {
 				return addHeapObject(new Error(getStringFromWasm0(arg0, arg1)));
 			},
-			__wbg_new_cd45aabdf6073e84: function(arg0) {
+			__wbg_new_77cc4f4f472aeb81: function(arg0) {
 				return addHeapObject(new Uint8Array(getObject(arg0)));
 			},
-			__wbg_new_da52cf8fe3429cb2: function() {
+			__wbg_new_ebe3e0f6837f0879: function() {
 				return addHeapObject(/* @__PURE__ */ new Object());
 			},
-			__wbg_next_6dbf2c0ac8cde20f: function(arg0) {
-				const ret = getObject(arg0).next;
-				return addHeapObject(ret);
-			},
-			__wbg_next_71f2aa1cb3d1e37e: function() {
+			__wbg_next_42cf16ee0dafc9e2: function() {
 				return handleError(function(arg0) {
 					return addHeapObject(getObject(arg0).next());
 				}, arguments);
 			},
-			__wbg_prototypesetcall_4770620bbe4688a0: function(arg0, arg1, arg2) {
+			__wbg_next_8f26b64fa5e9f64b: function(arg0) {
+				const ret = getObject(arg0).next;
+				return addHeapObject(ret);
+			},
+			__wbg_prototypesetcall_de8e0d9553586985: function(arg0, arg1, arg2) {
 				Uint8Array.prototype.set.call(getArrayU8FromWasm0(arg0, arg1), getObject(arg2));
 			},
 			__wbg_set_6be42768c690e380: function(arg0, arg1, arg2) {
 				getObject(arg0)[takeObject(arg1)] = takeObject(arg2);
 			},
-			__wbg_set_8a16b38e4805b298: function(arg0, arg1, arg2) {
+			__wbg_set_a80955eb93b145c6: function(arg0, arg1, arg2) {
 				getObject(arg0)[arg1 >>> 0] = takeObject(arg2);
 			},
-			__wbg_value_a5d5488a9589444a: function(arg0) {
+			__wbg_value_1e2369fab29b420e: function(arg0) {
 				const ret = getObject(arg0).value;
 				return addHeapObject(ret);
 			},
@@ -493,10 +494,11 @@ function __wbg_finalize_init(instance, module) {
 }
 async function __wbg_load(module, imports) {
 	if (typeof Response === "function" && module instanceof Response) {
+		if (!module.ok) throw new Error(`failed to fetch Wasm: ${module.status} ${module.statusText} fetching '${module.url}'`);
 		if (typeof WebAssembly.instantiateStreaming === "function") try {
 			return await WebAssembly.instantiateStreaming(module, imports);
 		} catch (e) {
-			if (module.ok && expectedResponseType(module.type) && module.headers.get("Content-Type") !== "application/wasm") console.warn("`WebAssembly.instantiateStreaming` failed because your server does not serve Wasm with `application/wasm` MIME type. Falling back to `WebAssembly.instantiate` which is slower. Original error:\n", e);
+			if (expectedResponseType(module.type) && module.headers.get("Content-Type") !== "application/wasm") console.warn("`WebAssembly.instantiateStreaming` failed because your server does not serve Wasm with `application/wasm` MIME type. Falling back to `WebAssembly.instantiate` which is slower. Original error:\n", e);
 			else throw e;
 		}
 		const bytes = await module.arrayBuffer();
@@ -578,6 +580,7 @@ var PdfRenderer = class {
 			source: [
 				main.node,
 				...bands,
+				_takumi_rs_helpers.LIST_MARKER_CHARACTERS,
 				counterCharacters([main.node, ...bands].flatMap((tree) => classNames(tree)))
 			]
 		}), images, fontFamilies);
@@ -612,7 +615,11 @@ var PdfRenderer = class {
 		const main = await resolveNode(node);
 		const resources = await this.fonts.resolveResources(fonts && (0, _takumi_rs_helpers.subsetFonts)({
 			fonts,
-			source: [main.node, counterCharacters(classNames(main.node))]
+			source: [
+				main.node,
+				_takumi_rs_helpers.LIST_MARKER_CHARACTERS,
+				counterCharacters(classNames(main.node))
+			]
 		}), images, fontFamilies);
 		const sheets = [...stylesheets ?? [], ...main.stylesheets];
 		return this.inner.measure(main.node, {
@@ -643,7 +650,10 @@ function measure(node, options) {
 	return shared.measure(node, options);
 }
 //#endregion
+exports.PageNumber = require_primitives.PageNumber;
 exports.PdfRenderer = PdfRenderer;
+exports.TargetPageNumber = require_primitives.TargetPageNumber;
+exports.TotalPages = require_primitives.TotalPages;
 exports.default = __wbg_init;
 exports.initSync = initSync;
 exports.measure = measure;

package/dist/export.d.cts

@@ -1,3 +1,4 @@
+import { CounterProps, CounterStyle, PageNumber, TargetPageNumber, TotalPages } from "./primitives.cjs";
 import { FontLoader, FontLoader as FontLoader$1, ImagesInput, ImagesInput as ImagesInput$1, RegisteredFamilyLike } from "@takumi-rs/helpers/renderer";
 import { Node, ReactElementLike } from "@takumi-rs/helpers";
 import { ReactNode } from "react";
@@ -309,4 +310,4 @@ declare function render(node: NodeInput, options?: RenderOptions): Promise<Uint8
 /** Measures with a lazily created shared {@link PdfRenderer}. */
 declare function measure(node: NodeInput, options?: MeasureOptions): Promise<MeasuredSize>;
 //#endregion
-export { ArchivalAttachment, Attachment, Dimensions, type FontLoader, type ImagesInput, MeasureOptions, MeasuredSize, NodeInput, PageMargin, PageMarginSide, PageSize, PageSizeName, PdfMetadata, PdfRenderer, RenderOptions, ViewportInput, XmpProperty, XmpSchema, __wbg_init as default, initSync, measure, render };
+export { ArchivalAttachment, Attachment, type CounterProps, type CounterStyle, Dimensions, type FontLoader, type ImagesInput, MeasureOptions, MeasuredSize, NodeInput, PageMargin, PageMarginSide, PageNumber, PageSize, PageSizeName, PdfMetadata, PdfRenderer, RenderOptions, TargetPageNumber, TotalPages, ViewportInput, XmpProperty, XmpSchema, __wbg_init as default, initSync, measure, render };

package/dist/export.d.mts

@@ -1,3 +1,4 @@
+import { CounterProps, CounterStyle, PageNumber, TargetPageNumber, TotalPages } from "./primitives.mjs";
 import { FontLoader, FontLoader as FontLoader$1, ImagesInput, ImagesInput as ImagesInput$1, RegisteredFamilyLike } from "@takumi-rs/helpers/renderer";
 import { Node, ReactElementLike } from "@takumi-rs/helpers";
 import { ReactNode } from "react";
@@ -309,4 +310,4 @@ declare function render(node: NodeInput, options?: RenderOptions): Promise<Uint8
 /** Measures with a lazily created shared {@link PdfRenderer}. */
 declare function measure(node: NodeInput, options?: MeasureOptions): Promise<MeasuredSize>;
 //#endregion
-export { ArchivalAttachment, Attachment, Dimensions, type FontLoader, type ImagesInput, MeasureOptions, MeasuredSize, NodeInput, PageMargin, PageMarginSide, PageSize, PageSizeName, PdfMetadata, PdfRenderer, RenderOptions, ViewportInput, XmpProperty, XmpSchema, __wbg_init as default, initSync, measure, render };
+export { ArchivalAttachment, Attachment, type CounterProps, type CounterStyle, Dimensions, type FontLoader, type ImagesInput, MeasureOptions, MeasuredSize, NodeInput, PageMargin, PageMarginSide, PageNumber, PageSize, PageSizeName, PdfMetadata, PdfRenderer, RenderOptions, TargetPageNumber, TotalPages, ViewportInput, XmpProperty, XmpSchema, __wbg_init as default, initSync, measure, render };

package/dist/export.mjs

@@ -1,7 +1,8 @@
+import { PageNumber, TargetPageNumber, TotalPages } from "./primitives.mjs";
 import { fromHtml } from "@takumi-rs/helpers/html";
 import { fromJsx } from "@takumi-rs/helpers/jsx";
 import { FontRegistry } from "@takumi-rs/helpers/renderer";
-import { subsetFonts } from "@takumi-rs/helpers";
+import { LIST_MARKER_CHARACTERS, subsetFonts } from "@takumi-rs/helpers";
 //#region pkg/takumi_pdf_wasm.js
 /**
 * A PDF renderer holding registered fonts and a decoded-resource cache.
@@ -131,10 +132,10 @@ function __wbg_get_imports() {
 		__proto__: null,
 		"./takumi_pdf_wasm_bg.js": {
 			__proto__: null,
-			__wbg_Error_92b29b0548f8b746: function(arg0, arg1) {
+			__wbg_Error_408e67f47ca7b58b: function(arg0, arg1) {
 				return addHeapObject(Error(getStringFromWasm0(arg0, arg1)));
 			},
-			__wbg_Number_9a4e0ecb0fa16705: function(arg0) {
+			__wbg_Number_3890faa6d3ff057d: function(arg0) {
 				return Number(getObject(arg0));
 			},
 			__wbg_String_8564e559799eccda: function(arg0, arg1) {
@@ -143,55 +144,55 @@ function __wbg_get_imports() {
 				getDataViewMemory0().setInt32(arg0 + 4, len1, true);
 				getDataViewMemory0().setInt32(arg0 + 0, ptr1, true);
 			},
-			__wbg___wbindgen_bigint_get_as_i64_d968e41184ae354f: function(arg0, arg1) {
+			__wbg___wbindgen_bigint_get_as_i64_c4ecf48528083721: function(arg0, arg1) {
 				const v = getObject(arg1);
 				const ret = typeof v === "bigint" ? v : void 0;
 				getDataViewMemory0().setBigInt64(arg0 + 8, isLikeNone(ret) ? BigInt(0) : ret, true);
 				getDataViewMemory0().setInt32(arg0 + 0, !isLikeNone(ret), true);
 			},
-			__wbg___wbindgen_boolean_get_fa956cfa2d1bd751: function(arg0) {
+			__wbg___wbindgen_boolean_get_c9c83ebd41b34df3: function(arg0) {
 				const v = getObject(arg0);
 				const ret = typeof v === "boolean" ? v : void 0;
 				return isLikeNone(ret) ? 16777215 : ret ? 1 : 0;
 			},
-			__wbg___wbindgen_debug_string_c25d447a39f5578f: function(arg0, arg1) {
+			__wbg___wbindgen_debug_string_a57024b9c6e4a48b: function(arg0, arg1) {
 				const ptr1 = passStringToWasm0(debugString(getObject(arg1)), wasm.__wbindgen_export, wasm.__wbindgen_export2);
 				const len1 = WASM_VECTOR_LEN;
 				getDataViewMemory0().setInt32(arg0 + 4, len1, true);
 				getDataViewMemory0().setInt32(arg0 + 0, ptr1, true);
 			},
-			__wbg___wbindgen_in_aca499c5de7ff5e5: function(arg0, arg1) {
+			__wbg___wbindgen_in_ac983077f137f2e6: function(arg0, arg1) {
 				return getObject(arg0) in getObject(arg1);
 			},
-			__wbg___wbindgen_is_bigint_2f76dc55065b4273: function(arg0) {
+			__wbg___wbindgen_is_bigint_8ffbbef442139384: function(arg0) {
 				return typeof getObject(arg0) === "bigint";
 			},
-			__wbg___wbindgen_is_function_1ff95bcc5517c252: function(arg0) {
+			__wbg___wbindgen_is_function_5e4570eb24ffa122: function(arg0) {
 				return typeof getObject(arg0) === "function";
 			},
-			__wbg___wbindgen_is_object_a27215656b807791: function(arg0) {
+			__wbg___wbindgen_is_object_a2790eb24c211ea0: function(arg0) {
 				const val = getObject(arg0);
 				return typeof val === "object" && val !== null;
 			},
-			__wbg___wbindgen_is_string_ea5e6cc2e4141dfe: function(arg0) {
+			__wbg___wbindgen_is_string_e6f02f0ea5f20a32: function(arg0) {
 				return typeof getObject(arg0) === "string";
 			},
-			__wbg___wbindgen_is_undefined_c05833b95a3cf397: function(arg0) {
+			__wbg___wbindgen_is_undefined_6cff064c44e0d823: function(arg0) {
 				return getObject(arg0) === void 0;
 			},
-			__wbg___wbindgen_jsval_eq_e659fcf7b0e32763: function(arg0, arg1) {
+			__wbg___wbindgen_jsval_eq_0a18949a61670320: function(arg0, arg1) {
 				return getObject(arg0) === getObject(arg1);
 			},
-			__wbg___wbindgen_jsval_loose_eq_db4c3b15f63fc170: function(arg0, arg1) {
+			__wbg___wbindgen_jsval_loose_eq_acf2776254a8d832: function(arg0, arg1) {
 				return getObject(arg0) == getObject(arg1);
 			},
-			__wbg___wbindgen_number_get_394265ed1e1b84ee: function(arg0, arg1) {
+			__wbg___wbindgen_number_get_136b9679cab35cfb: function(arg0, arg1) {
 				const obj = getObject(arg1);
 				const ret = typeof obj === "number" ? obj : void 0;
 				getDataViewMemory0().setFloat64(arg0 + 8, isLikeNone(ret) ? 0 : ret, true);
 				getDataViewMemory0().setInt32(arg0 + 0, !isLikeNone(ret), true);
 			},
-			__wbg___wbindgen_string_get_b0ca35b86a603356: function(arg0, arg1) {
+			__wbg___wbindgen_string_get_d154f1e671052120: function(arg0, arg1) {
 				const obj = getObject(arg1);
 				const ret = typeof obj === "string" ? obj : void 0;
 				var ptr1 = isLikeNone(ret) ? 0 : passStringToWasm0(ret, wasm.__wbindgen_export, wasm.__wbindgen_export2);
@@ -199,30 +200,30 @@ function __wbg_get_imports() {
 				getDataViewMemory0().setInt32(arg0 + 4, len1, true);
 				getDataViewMemory0().setInt32(arg0 + 0, ptr1, true);
 			},
-			__wbg___wbindgen_throw_344f42d3211c4765: function(arg0, arg1) {
+			__wbg___wbindgen_throw_bb96b2010945f0bc: function(arg0, arg1) {
 				throw new Error(getStringFromWasm0(arg0, arg1));
 			},
-			__wbg_call_8a2dd23819f8a60a: function() {
+			__wbg_call_1c5886ab9c57d1c7: function() {
 				return handleError(function(arg0, arg1) {
 					return addHeapObject(getObject(arg0).call(getObject(arg1)));
 				}, arguments);
 			},
-			__wbg_done_89b2b13e91a60321: function(arg0) {
+			__wbg_done_669171204c3dcae2: function(arg0) {
 				return getObject(arg0).done;
 			},
-			__wbg_entries_015dc610cd81ede0: function(arg0) {
+			__wbg_entries_7774d489e1da5f4f: function(arg0) {
 				return addHeapObject(Object.entries(getObject(arg0)));
 			},
-			__wbg_get_507a50627bffa49b: function(arg0, arg1) {
+			__wbg_get_c0c8f8d7da0c03dd: function(arg0, arg1) {
 				const ret = getObject(arg0)[arg1 >>> 0];
 				return addHeapObject(ret);
 			},
-			__wbg_get_c7eb1f358a7654df: function() {
+			__wbg_get_d173c0308df22d37: function() {
 				return handleError(function(arg0, arg1) {
 					return addHeapObject(Reflect.get(getObject(arg0), getObject(arg1)));
 				}, arguments);
 			},
-			__wbg_get_unchecked_6e0ad6d2a41b06f6: function(arg0, arg1) {
+			__wbg_get_unchecked_e20b893aeafc3fca: function(arg0, arg1) {
 				const ret = getObject(arg0)[arg1 >>> 0];
 				return addHeapObject(ret);
 			},
@@ -230,7 +231,7 @@ function __wbg_get_imports() {
 				const ret = getObject(arg0)[getObject(arg1)];
 				return addHeapObject(ret);
 			},
-			__wbg_instanceof_ArrayBuffer_4480b9e0068a8adb: function(arg0) {
+			__wbg_instanceof_ArrayBuffer_993d02d2d254cad1: function(arg0) {
 				let result;
 				try {
 					result = getObject(arg0) instanceof ArrayBuffer;
@@ -239,7 +240,7 @@ function __wbg_get_imports() {
 				}
 				return result;
 			},
-			__wbg_instanceof_Map_e5b5e3db98422fcc: function(arg0) {
+			__wbg_instanceof_Map_9a4d6ead180ae3a9: function(arg0) {
 				let result;
 				try {
 					result = getObject(arg0) instanceof Map;
@@ -248,7 +249,7 @@ function __wbg_get_imports() {
 				}
 				return result;
 			},
-			__wbg_instanceof_Uint8Array_309b927aaf7a3fc7: function(arg0) {
+			__wbg_instanceof_Uint8Array_f935dbb0aa7cdeed: function(arg0) {
 				let result;
 				try {
 					result = getObject(arg0) instanceof Uint8Array;
@@ -257,53 +258,53 @@ function __wbg_get_imports() {
 				}
 				return result;
 			},
-			__wbg_isArray_0677c962b281d01a: function(arg0) {
+			__wbg_isArray_6339f732981044bf: function(arg0) {
 				return Array.isArray(getObject(arg0));
 			},
-			__wbg_isSafeInteger_04f36e4056f1b851: function(arg0) {
+			__wbg_isSafeInteger_f3d6cd19ccfe4512: function(arg0) {
 				return Number.isSafeInteger(getObject(arg0));
 			},
-			__wbg_iterator_6f722e4a93058b71: function() {
+			__wbg_iterator_5cebbb86e33c6dd6: function() {
 				const ret = Symbol.iterator;
 				return addHeapObject(ret);
 			},
-			__wbg_length_1f0964f4a5e2c6d8: function(arg0) {
+			__wbg_length_36bd29c6848c2144: function(arg0) {
 				return getObject(arg0).length;
 			},
-			__wbg_length_370319915dc99107: function(arg0) {
+			__wbg_length_ecfa2c63d3d0d82c: function(arg0) {
 				return getObject(arg0).length;
 			},
-			__wbg_new_32b398fb48b6d94a: function() {
+			__wbg_new_116be93542d39019: function() {
 				return addHeapObject(new Array());
 			},
-			__wbg_new_b667d279fd5aa943: function(arg0, arg1) {
+			__wbg_new_358857d90afd5a2d: function(arg0, arg1) {
 				return addHeapObject(new Error(getStringFromWasm0(arg0, arg1)));
 			},
-			__wbg_new_cd45aabdf6073e84: function(arg0) {
+			__wbg_new_77cc4f4f472aeb81: function(arg0) {
 				return addHeapObject(new Uint8Array(getObject(arg0)));
 			},
-			__wbg_new_da52cf8fe3429cb2: function() {
+			__wbg_new_ebe3e0f6837f0879: function() {
 				return addHeapObject(/* @__PURE__ */ new Object());
 			},
-			__wbg_next_6dbf2c0ac8cde20f: function(arg0) {
-				const ret = getObject(arg0).next;
-				return addHeapObject(ret);
-			},
-			__wbg_next_71f2aa1cb3d1e37e: function() {
+			__wbg_next_42cf16ee0dafc9e2: function() {
 				return handleError(function(arg0) {
 					return addHeapObject(getObject(arg0).next());
 				}, arguments);
 			},
-			__wbg_prototypesetcall_4770620bbe4688a0: function(arg0, arg1, arg2) {
+			__wbg_next_8f26b64fa5e9f64b: function(arg0) {
+				const ret = getObject(arg0).next;
+				return addHeapObject(ret);
+			},
+			__wbg_prototypesetcall_de8e0d9553586985: function(arg0, arg1, arg2) {
 				Uint8Array.prototype.set.call(getArrayU8FromWasm0(arg0, arg1), getObject(arg2));
 			},
 			__wbg_set_6be42768c690e380: function(arg0, arg1, arg2) {
 				getObject(arg0)[takeObject(arg1)] = takeObject(arg2);
 			},
-			__wbg_set_8a16b38e4805b298: function(arg0, arg1, arg2) {
+			__wbg_set_a80955eb93b145c6: function(arg0, arg1, arg2) {
 				getObject(arg0)[arg1 >>> 0] = takeObject(arg2);
 			},
-			__wbg_value_a5d5488a9589444a: function(arg0) {
+			__wbg_value_1e2369fab29b420e: function(arg0) {
 				const ret = getObject(arg0).value;
 				return addHeapObject(ret);
 			},
@@ -489,10 +490,11 @@ function __wbg_finalize_init(instance, module) {
 }
 async function __wbg_load(module, imports) {
 	if (typeof Response === "function" && module instanceof Response) {
+		if (!module.ok) throw new Error(`failed to fetch Wasm: ${module.status} ${module.statusText} fetching '${module.url}'`);
 		if (typeof WebAssembly.instantiateStreaming === "function") try {
 			return await WebAssembly.instantiateStreaming(module, imports);
 		} catch (e) {
-			if (module.ok && expectedResponseType(module.type) && module.headers.get("Content-Type") !== "application/wasm") console.warn("`WebAssembly.instantiateStreaming` failed because your server does not serve Wasm with `application/wasm` MIME type. Falling back to `WebAssembly.instantiate` which is slower. Original error:\n", e);
+			if (expectedResponseType(module.type) && module.headers.get("Content-Type") !== "application/wasm") console.warn("`WebAssembly.instantiateStreaming` failed because your server does not serve Wasm with `application/wasm` MIME type. Falling back to `WebAssembly.instantiate` which is slower. Original error:\n", e);
 			else throw e;
 		}
 		const bytes = await module.arrayBuffer();
@@ -574,6 +576,7 @@ var PdfRenderer = class {
 			source: [
 				main.node,
 				...bands,
+				LIST_MARKER_CHARACTERS,
 				counterCharacters([main.node, ...bands].flatMap((tree) => classNames(tree)))
 			]
 		}), images, fontFamilies);
@@ -608,7 +611,11 @@ var PdfRenderer = class {
 		const main = await resolveNode(node);
 		const resources = await this.fonts.resolveResources(fonts && subsetFonts({
 			fonts,
-			source: [main.node, counterCharacters(classNames(main.node))]
+			source: [
+				main.node,
+				LIST_MARKER_CHARACTERS,
+				counterCharacters(classNames(main.node))
+			]
 		}), images, fontFamilies);
 		const sheets = [...stylesheets ?? [], ...main.stylesheets];
 		return this.inner.measure(main.node, {
@@ -639,4 +646,4 @@ function measure(node, options) {
 	return shared.measure(node, options);
 }
 //#endregion
-export { PdfRenderer, __wbg_init as default, initSync, measure, render };
+export { PageNumber, PdfRenderer, TargetPageNumber, TotalPages, __wbg_init as default, initSync, measure, render };

package/dist/primitives.cjs

@@ -0,0 +1,48 @@
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+//#region src/primitives.ts
+const ELEMENT = Symbol.for("react.transitional.element");
+function counter(hook, { format, className, ...rest }) {
+	return element("span", {
+		...rest,
+		className: [
+			hook,
+			format,
+			className
+		].filter(Boolean).join(" ")
+	});
+}
+function element(type, props) {
+	return Object.assign({
+		type,
+		props,
+		key: null
+	}, { $$typeof: ELEMENT });
+}
+/**
+* The number of the page this element lands on. Meaningful inside a `header`
+* or `footer` band (or a `position: fixed` box), where it renumbers per page.
+*/
+function PageNumber(props = {}) {
+	return counter("pageNumber", props);
+}
+/** The document's total page count. Same placement rules as {@link PageNumber}. */
+function TotalPages(props = {}) {
+	return counter("totalPages", props);
+}
+/**
+* The number of the page a link's target element lands on, for cross
+* references like "see page 12" and tables of contents. Without `href` it
+* reads the nearest enclosing `<a>`; with one it renders its own link.
+*/
+function TargetPageNumber({ href, ...props }) {
+	const span = counter("targetPageNumber", props);
+	if (href === void 0) return span;
+	return element("a", {
+		href,
+		children: span
+	});
+}
+//#endregion
+exports.PageNumber = PageNumber;
+exports.TargetPageNumber = TargetPageNumber;
+exports.TotalPages = TotalPages;

package/dist/primitives.d.cts

@@ -0,0 +1,32 @@
+import { CSSProperties, ReactElement } from "react";
+//#region src/primitives.d.ts
+/**
+ * A `@counter-style` name the page counters can format in, matching the set
+ * the renderer's `@counter-style` substitution knows.
+ */
+type CounterStyle = "decimal" | "decimal-leading-zero" | "lower-roman" | "upper-roman" | "lower-alpha" | "lower-latin" | "upper-alpha" | "upper-latin" | "lower-greek" | "hiragana" | "katakana" | "trad-chinese-informal" | "cjk-ideographic" | "cjk-decimal" | "arabic-indic" | "bengali" | "cambodian" | "khmer" | "devanagari" | "gujarati" | "gurmukhi" | "kannada" | "lao" | "malayalam" | "mongolian" | "myanmar" | "oriya" | "persian" | "urdu" | "tamil" | "telugu" | "thai" | "tibetan";
+/** Props shared by the page counter primitives. */
+type CounterProps = {
+  /** Counter style the number formats in. Defaults to decimal. */
+  format?: CounterStyle;
+  className?: string;
+  style?: CSSProperties;
+  tw?: string;
+};
+/**
+ * The number of the page this element lands on. Meaningful inside a `header`
+ * or `footer` band (or a `position: fixed` box), where it renumbers per page.
+ */
+declare function PageNumber(props?: CounterProps): ReactElement;
+/** The document's total page count. Same placement rules as {@link PageNumber}. */
+declare function TotalPages(props?: CounterProps): ReactElement;
+/**
+ * The number of the page a link's target element lands on, for cross
+ * references like "see page 12" and tables of contents. Without `href` it
+ * reads the nearest enclosing `<a>`; with one it renders its own link.
+ */
+declare function TargetPageNumber({ href, ...props }: CounterProps & {
+  href?: string;
+}): ReactElement;
+//#endregion
+export { CounterProps, CounterStyle, PageNumber, TargetPageNumber, TotalPages };

package/dist/primitives.d.mts

@@ -0,0 +1,32 @@
+import { CSSProperties, ReactElement } from "react";
+//#region src/primitives.d.ts
+/**
+ * A `@counter-style` name the page counters can format in, matching the set
+ * the renderer's `@counter-style` substitution knows.
+ */
+type CounterStyle = "decimal" | "decimal-leading-zero" | "lower-roman" | "upper-roman" | "lower-alpha" | "lower-latin" | "upper-alpha" | "upper-latin" | "lower-greek" | "hiragana" | "katakana" | "trad-chinese-informal" | "cjk-ideographic" | "cjk-decimal" | "arabic-indic" | "bengali" | "cambodian" | "khmer" | "devanagari" | "gujarati" | "gurmukhi" | "kannada" | "lao" | "malayalam" | "mongolian" | "myanmar" | "oriya" | "persian" | "urdu" | "tamil" | "telugu" | "thai" | "tibetan";
+/** Props shared by the page counter primitives. */
+type CounterProps = {
+  /** Counter style the number formats in. Defaults to decimal. */
+  format?: CounterStyle;
+  className?: string;
+  style?: CSSProperties;
+  tw?: string;
+};
+/**
+ * The number of the page this element lands on. Meaningful inside a `header`
+ * or `footer` band (or a `position: fixed` box), where it renumbers per page.
+ */
+declare function PageNumber(props?: CounterProps): ReactElement;
+/** The document's total page count. Same placement rules as {@link PageNumber}. */
+declare function TotalPages(props?: CounterProps): ReactElement;
+/**
+ * The number of the page a link's target element lands on, for cross
+ * references like "see page 12" and tables of contents. Without `href` it
+ * reads the nearest enclosing `<a>`; with one it renders its own link.
+ */
+declare function TargetPageNumber({ href, ...props }: CounterProps & {
+  href?: string;
+}): ReactElement;
+//#endregion
+export { CounterProps, CounterStyle, PageNumber, TargetPageNumber, TotalPages };

package/dist/primitives.mjs

@@ -0,0 +1,45 @@
+//#region src/primitives.ts
+const ELEMENT = Symbol.for("react.transitional.element");
+function counter(hook, { format, className, ...rest }) {
+	return element("span", {
+		...rest,
+		className: [
+			hook,
+			format,
+			className
+		].filter(Boolean).join(" ")
+	});
+}
+function element(type, props) {
+	return Object.assign({
+		type,
+		props,
+		key: null
+	}, { $$typeof: ELEMENT });
+}
+/**
+* The number of the page this element lands on. Meaningful inside a `header`
+* or `footer` band (or a `position: fixed` box), where it renumbers per page.
+*/
+function PageNumber(props = {}) {
+	return counter("pageNumber", props);
+}
+/** The document's total page count. Same placement rules as {@link PageNumber}. */
+function TotalPages(props = {}) {
+	return counter("totalPages", props);
+}
+/**
+* The number of the page a link's target element lands on, for cross
+* references like "see page 12" and tables of contents. Without `href` it
+* reads the nearest enclosing `<a>`; with one it renders its own link.
+*/
+function TargetPageNumber({ href, ...props }) {
+	const span = counter("targetPageNumber", props);
+	if (href === void 0) return span;
+	return element("a", {
+		href,
+		children: span
+	});
+}
+//#endregion
+export { PageNumber, TargetPageNumber, TotalPages };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "takumi-pdf",
-  "version": "0.10.0",
+  "version": "0.11.0",
   "description": "Render paged PDFs from JSX, HTML, and CSS. No headless browser.",
   "keywords": [
     "chromium-free",
@@ -98,6 +98,16 @@
       "types": "./bundlers/node.d.ts",
       "default": "./bundlers/next.mjs"
     },
+    "./primitives": {
+      "import": {
+        "types": "./dist/primitives.d.mts",
+        "default": "./dist/primitives.mjs"
+      },
+      "require": {
+        "types": "./dist/primitives.d.cts",
+        "default": "./dist/primitives.cjs"
+      }
+    },
     "./no-init": {
       "import": {
         "types": "./dist/export.d.mts",
@@ -126,11 +136,10 @@
   "scripts": {
     "build": "wasm-pack build ../takumi-pdf-wasm --no-pack --release --out-dir ../takumi-pdf-js/pkg --target web && bun build:js",
     "build:js": "tsdown",
-    "build:debug": "wasm-pack build ../takumi-pdf-wasm --no-pack --dev --out-dir ../takumi-pdf-js/pkg --target web && bun build:js",
     "publish-lint": "attw --pack . && publint --strict ."
   },
   "dependencies": {
-    "@takumi-rs/helpers": "2.9.1"
+    "@takumi-rs/helpers": "2.10.0"
   },
   "devDependencies": {
     "@types/bun": "^1.3.14",