weasyprint-tsx 0.1.0 → 0.1.1

package/bun.lock

@@ -4,10 +4,13 @@
   "workspaces": {
     "": {
       "name": "@weasyprint-tsx/build",
+      "dependencies": {
+        "@fontsource-variable/public-sans": "^5.2.7",
+      },
     },
     "packages/build": {
       "name": "@weasyprint-tsx/build",
-      "version": "0.0.1",
+      "version": "0.1.1",
       "bin": {
         "weasyprint-tsx": "./src/cli.ts",
       },
@@ -24,14 +27,21 @@
     },
     "packages/create": {
       "name": "@weasyprint-tsx/create",
-      "version": "0.0.1",
+      "version": "0.1.0",
       "bin": {
-        "create-weasyprint-tsx": "src/cli.ts",
+        "create-weasyprint-tsx": "cli.js",
+      },
+      "dependencies": {
+        "highlight.js": "11.11.1",
       },
     },
     "packages/ui": {
       "name": "@weasyprint-tsx/ui",
-      "version": "0.0.1",
+      "version": "0.1.0",
+      "dependencies": {
+        "highlight.js": "^11.11.1",
+        "katex": "^0.16.47",
+      },
     },
   },
   "packages": {
@@ -45,6 +55,8 @@
 
     "@csstools/utilities": ["@csstools/utilities@3.0.0", "", { "peerDependencies": { "postcss": "^8.4" } }, "sha512-etDqA/4jYvOGBM6yfKCOsEXfH96BKztZdgGmGqKi2xHnDe0ILIBraRspwgYatJH9JsCZ5HCGoCst8w18EKOAdg=="],
 
+    "@fontsource-variable/public-sans": ["@fontsource-variable/public-sans@5.2.7", "", {}, "sha512-4mvade2J3slKkvwRkS+p8T3szet/0vhWoSnuUJTVU81Uo2pRpSZY/Y8bSLRqpSwzIPxjVmRJ53oq6JKP/l/PSg=="],
+
     "@jridgewell/gen-mapping": ["@jridgewell/gen-mapping@0.3.13", "", { "dependencies": { "@jridgewell/sourcemap-codec": "^1.5.0", "@jridgewell/trace-mapping": "^0.3.24" } }, "sha512-2kkt/7niJ6MgEPxF0bYdQ6etZaA+fQvDcLKckhy1yIQOzaoKjBBjSj63/aLVjYE3qhRt5dvM+uUyfCg6UKCBbA=="],
 
     "@jridgewell/remapping": ["@jridgewell/remapping@2.3.5", "", { "dependencies": { "@jridgewell/gen-mapping": "^0.3.5", "@jridgewell/trace-mapping": "^0.3.24" } }, "sha512-LI9u/+laYG4Ds1TDKSJW2YPrIlcVYOwi2fUC6xB43lueCjgxV4lffOCZCtYFiH6TNOX+tQKXx97T4IKHbhyHEQ=="],
@@ -95,14 +107,20 @@
 
     "bun-types": ["bun-types@1.3.14", "", { "dependencies": { "@types/node": "*" } }, "sha512-4N0ig0fEomHt5R0KCFWjovxow98rIoRwKolrYdCcknNwMekCXRnWEUvgu5soYV8QXtVsrUD8B95MBOZGPvr6KQ=="],
 
+    "commander": ["commander@8.3.0", "", {}, "sha512-OkTL9umf+He2DZkUq8f8J9of7yL6RJKI24dVITBmNfZBmri9zYZQrKkuXiKhyfPSu8tUhnVBB1iKXevvnlR4Ww=="],
+
     "detect-libc": ["detect-libc@2.1.2", "", {}, "sha512-Btj2BOOO83o3WyH59e8MgXsxEQVcarkUOpEYrubB0urwnN10yQ364rsiByU11nZlqWYZm05i/of7io4mzihBtQ=="],
 
     "enhanced-resolve": ["enhanced-resolve@5.24.0", "", { "dependencies": { "graceful-fs": "^4.2.4", "tapable": "^2.3.3" } }, "sha512-SkE2t82KlkkxQRVMVLAGKxLfORGQfrkx5dkj+vlgXRVNEdPc4eZcR+J/Fvj8C+yKSFH5L0q3NFlyufOVQnCcYQ=="],
 
     "graceful-fs": ["graceful-fs@4.2.11", "", {}, "sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ=="],
 
+    "highlight.js": ["highlight.js@11.11.1", "", {}, "sha512-Xwwo44whKBVCYoliBQwaPvtd/2tYFkRQtXDWj1nackaV2JPXx3L0+Jvd8/qCJ2p+ML0/XVkJ2q+Mr+UVdpJK5w=="],
+
     "jiti": ["jiti@2.7.0", "", { "bin": { "jiti": "lib/jiti-cli.mjs" } }, "sha512-AC/7JofJvZGrrneWNaEnJeOLUx+JlGt7tNa0wZiRPT4MY1wmfKjt2+6O2p2uz2+skll8OZZmJMNqeke7kKbNgQ=="],
 
+    "katex": ["katex@0.16.47", "", { "dependencies": { "commander": "^8.3.0" }, "bin": { "katex": "cli.js" } }, "sha512-Eeo8Ys1doU1z+x8AZsPpQu+p/QcZBI5PeOo7QGQdy2x2m0MU/hYagBbGOmXwr5KVbEfVuWv9LpnQWeehogurjg=="],
+
     "lightningcss": ["lightningcss@1.32.0", "", { "dependencies": { "detect-libc": "^2.0.3" }, "optionalDependencies": { "lightningcss-android-arm64": "1.32.0", "lightningcss-darwin-arm64": "1.32.0", "lightningcss-darwin-x64": "1.32.0", "lightningcss-freebsd-x64": "1.32.0", "lightningcss-linux-arm-gnueabihf": "1.32.0", "lightningcss-linux-arm64-gnu": "1.32.0", "lightningcss-linux-arm64-musl": "1.32.0", "lightningcss-linux-x64-gnu": "1.32.0", "lightningcss-linux-x64-musl": "1.32.0", "lightningcss-win32-arm64-msvc": "1.32.0", "lightningcss-win32-x64-msvc": "1.32.0" } }, "sha512-NXYBzinNrblfraPGyrbPoD19C1h9lfI/1mzgWYvXUTe414Gz/X1FD2XBZSZM7rRTrMA8JL3OtAaGifrIKhQ5yQ=="],
 
     "lightningcss-android-arm64": ["lightningcss-android-arm64@1.32.0", "", { "os": "android", "cpu": "arm64" }, "sha512-YK7/ClTt4kAK0vo6w3X+Pnm0D2cf2vPHbhOXdoNti1Ga0al1P4TBZhwjATvjNwLEBCnKvjJc2jQgHXH0NEwlAg=="],

package/package.json

@@ -1,9 +1,14 @@
 {
   "name": "weasyprint-tsx",
-  "version": "0.1.0",
+  "version": "0.1.1",
+  "bin": {
+    "create-weasyprint-tsx": "bun packages/create/cli.ts",
+    "build-weasyprint-tsx": "bun packages/build/src/cli.ts"
+  },
   "scripts": {
     "dev": "bun packages/build/src/cli.ts --watch",
-    "init" : "bun packages/create/cli.ts"
+    "init": "bun packages/create/cli.ts",
+    "build": "bun packages/build/src/cli.ts"
   },
   "workspaces": [
     "packages/*"

package/packages/build/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@weasyprint-tsx/build",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "main": "./src/index.ts",
   "exports": { ".": "./src/index.ts" },
   "types": "./src/index.ts",

package/packages/build/src/build.ts

@@ -1,12 +1,12 @@
-import { join } from "path";
-import { DConfig } from "./config";
+import tailwindcss from "@tailwindcss/postcss";
 import { BunPlugin } from "bun";
+import { join } from "path";
 import postcss from "postcss";
 import customProperties from "postcss-custom-properties";
-import tailwindcss from "@tailwindcss/postcss";
-import { injectDevScript } from "./server";
 import { h } from "preact";
 import { renderToStaticMarkup } from "preact-render-to-string";
+import { DConfig } from "./config";
+import { DEV_SCRIPT } from "./server";
 
 const tailwindPlugin: BunPlugin = {
   name: "tailwind-postcss",
@@ -49,17 +49,17 @@ export async function buildHTML(cfg: DConfig, dev: boolean = false) {
     join(BUILD_DIR, `index.js?t=${performance.now()}`)
   );
 
-  const html = "<!DOCTYPE html>" + renderToStaticMarkup(h(Document, {}));
-
-  await Bun.write(BUILD_PATH, html);
+  let html = "<!DOCTYPE html>" + renderToStaticMarkup(h(Document, {}));
 
   if (dev) {
-    injectDevScript(BUILD_PATH);
+    html = html.replace("</html>", `${DEV_SCRIPT}</html>`);
   }
+  await Bun.write(BUILD_PATH, html);
   process.stdout.write(
     `Bun HTML build -- ${(performance.now() - t0).toFixed(2)}ms\n`,
   );
-  return Bun.hash(html);
+  const css = await Bun.file(join(BUILD_DIR, "index.css")).text();
+  return Bun.hash(html + css);
 }
 
 function buildArgs(cfg: DConfig): string[] {

package/packages/build/src/config.ts

@@ -24,7 +24,7 @@ export interface Config {
   };
   dev?: {
     port?: number;
-    watch?: string;
+    watch?: string[];
   };
 }
 
@@ -44,7 +44,7 @@ const defaultConfig = {
   },
   dev: {
     port: 3000,
-    watch: "src",
+    watch: ["src"],
   },
 } satisfies Config;
 

package/packages/build/src/orchestrator.ts

@@ -1,8 +1,8 @@
 import { watch } from "fs";
+import { join } from "path";
 import { buildHTML, buildPDF } from "./build";
 import { loadConfig } from "./config";
 import { bumpPing, startServer } from "./server";
-import { join } from "path";
 
 export async function buildOnce(output?: string) {
   const cfg = await loadConfig();
@@ -22,7 +22,7 @@ export async function buildOnce(output?: string) {
 
 export async function devMode(output?: string) {
   const cfg = await loadConfig();
-  const WATCH_DIR = join(process.cwd(), cfg.dev.watch);
+  const WATCH_DIRS = cfg.dev.watch.map((p) => join(process.cwd(), p));
 
   if (output) cfg.io.output = cfg.io.output ?? output;
   process.stdout.write(`Dev: http://localhost:${cfg.dev.port}`);
@@ -52,10 +52,12 @@ export async function devMode(output?: string) {
 
   startServer(cfg.dev.port, cfg.io.buildDir);
 
-  watch(WATCH_DIR, {}, async (ev, f) => {
-    process.stdout.write(`${ev} : file changed ${f}`);
-    await rebuild();
-  });
+  WATCH_DIRS.forEach((dir) =>
+    watch(dir, { recursive: true }, async (_, f) => {
+      process.stdout.write(`file changed ${f}`);
+      await rebuild();
+    }),
+  );
 
   await Bun.sleep(Infinity);
 }

package/packages/build/src/server.ts

@@ -1,6 +1,6 @@
 import { join } from "path";
 
-const DEV_SCRIPT = `<script>var _t=null;setInterval(function(){fetch('/__dev_ping').then(function(r){return r.text();}).then(function(s){if(_t!==null&&s!==_t)location.reload();_t=s;}).catch(function(){});},300);</script>`;
+export const DEV_SCRIPT = `<script>var _t=null;setInterval(function(){fetch('/__dev_ping').then(function(r){return r.text();}).then(function(s){if(_t!==null&&s!==_t)location.reload();_t=s;}).catch(function(){});},1000);</script>`;
 
 let pingCounter = 0;
 
@@ -19,8 +19,9 @@ export function startServer(port: number, buildDir: string): void {
           headers: { "Cache-Control": "no-store" },
         });
       }
-
-      const file = Bun.file(join(process.cwd(), buildDir , "index.html"));
+      const pathname = url.pathname === "/" ? "/index.html" : url.pathname;
+      if (pathname == "/favicon.ico") return new Response(null);
+      const file = Bun.file(join(process.cwd(), buildDir, pathname));
       return new Response(file);
     },
   });
@@ -29,8 +30,6 @@ export function startServer(port: number, buildDir: string): void {
 export async function injectDevScript(htmlPath: string): Promise<void> {
   let html = await Bun.file(htmlPath).text();
   if (!html.includes("/__dev_ping")) {
-    html = html.replace("</html>", `${DEV_SCRIPT}</html>`);
     await Bun.write(htmlPath, html);
   }
 }
-

package/packages/ui/package.json

@@ -1,8 +1,11 @@
 {
   "name": "@weasyprint-tsx/ui",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "exports": {
     ".": "./src/index.ts"
   },
-  "types": "./src/index.ts"
+  "types": "./src/index.ts",
+  "dependencies": {
+    "highlight.js": "11.11.1"
+  }
 }

package/packages/ui/src/BlockBox.tsx

@@ -16,8 +16,8 @@ interface BlockProps extends ComponentProps<"div"> {
   align?: "middle" | "top" | "bottom";
 }
 
-export function Block(_props: BlockProps): null {
-  return null;
+export function Block({ children }: BlockProps) {
+  return children;
 }
 
 export function BlockBox({
@@ -40,7 +40,10 @@ export function BlockBox({
   const child = blockList.map(
     ({ props: { style, ratio = 1, className, centered, align, ...props } }) => (
       <div
-        style={mergeStyle(style, { "--ratio": ratio, "--block-box-align": align })}
+        style={mergeStyle(style, {
+          "--ratio": ratio,
+          "--block-box-align": align,
+        })}
         className={joinClasses(
           className,
           styles.block,

package/packages/ui/src/CodeBlock.module.css

@@ -0,0 +1,4 @@
+.pre {
+  background-color: var(--codeblock-bg, #0f172a);
+  color: var(--codeblock-color, #cbd5e1);
+}

package/packages/ui/src/CodeBlock.tsx

@@ -1,16 +1,34 @@
 import hljs from "highlight.js";
 import "highlight.js/styles/atom-one-dark.css";
 import { ComponentProps } from "preact";
+import styles from "./CodeBlock.module.css";
+import { joinClasses, mergeStyle } from "./utils";
 
 interface CodeBlockProps extends Omit<ComponentProps<"code">, "children"> {
   language: string;
   code: string;
+  bgColor?: string;
+  color?: string;
+
 }
 
-export function CodeBlock({ code, language, ...props }: CodeBlockProps) {
+export function CodeBlock({
+  code,
+  language,
+  bgColor,
+  color,
+  style,
+  className,
+  ...props
+}: CodeBlockProps) {
   const codeBlock = hljs.highlight(code, { language: language });
+  const css = mergeStyle(style, {
+    "--codeblock-bg": bgColor,
+    "--color-color" : color,
+    breakInside: "avoid",
+  });
   return (
-    <pre style={{breakInside : "avoid"}}>
+    <pre style={css} className={joinClasses(className, styles.pre)}>
       <code {...props} dangerouslySetInnerHTML={{ __html: codeBlock.value }} />
     </pre>
   );

package/packages/ui/src/Stack.module.css

@@ -0,0 +1,9 @@
+.stack {
+  & > * {
+    margin-left: var(--stack-ml, 0);
+    margin-right: var(--stack-mr, 0);
+    &:not(:last-child) {
+      margin-bottom: var(--stack-gap, 0);
+    }
+  }
+}

package/packages/ui/src/Stack.tsx

@@ -0,0 +1,24 @@
+import { ComponentProps } from "preact";
+import styles from "./Stack.module.css";
+import { joinClasses, mergeStyle } from "./utils";
+
+interface StackProps extends ComponentProps<"div"> {
+  gap?: number | string;
+  align?: "left" | "right";
+}
+
+export function Stack({ gap, align, className, style, ...props }: StackProps) {
+  const css = mergeStyle(style, {
+    "--stack-gap": gap,
+    "--stack-ml": align === "left" ? undefined : "auto",
+    "--stack-mr": align === "right" ? undefined : "auto",
+  });
+
+  return (
+    <div
+      style={css}
+      className={joinClasses(className, styles.stack)}
+      {...props}
+    />
+  );
+}

package/packages/ui/src/Title.module.css

@@ -1,28 +1,31 @@
-
-.h1,
-.h2,
-.h3,
-.h4,
-.h5,
-.h6 {
-  &::before {
-    float: left;
-    clear: left;
-  }
-  &[data-marker]::before {
-    content: attr(data-marker);
-  }
+.h1::before,
+.h2::before,
+.h3::before,
+.h4::before,
+.h5::before,
+.h6::before {
+  float: left;
+  clear: left;
 }
 
+.h1[data-marker]::before,
+.h2[data-marker]::before,
+.h3[data-marker]::before,
+.h4[data-marker]::before,
+.h5[data-marker]::before,
+.h6[data-marker]::before {
+  content: attr(data-marker);
+}
 
 .h1 {
   color: var(--h1-color, inherit);
   font-size: var(--h1-fontsize, inherit);
   counter-reset: count-h2 count-h3 count-h4 count-h5 count-h6;
   counter-increment: count-h1;
-  &::before {
-    content: counter(count-h1, upper-roman) ". ";
-  }
+}
+
+:where(.h1)::before {
+  content: counter(count-h1, upper-roman) ". ";
 }
 
 .h2 {
@@ -30,9 +33,10 @@
   font-size: var(--h2-fontsize, inherit);
   counter-reset: count-h3 count-h4 count-h5 count-h6;
   counter-increment: count-h2;
-  &::before {
-    content: counter(count-h2, decimal) ". ";
-  }
+}
+
+:where(.h2)::before {
+  content: counter(count-h2, decimal) ". ";
 }
 
 .h3 {
@@ -40,9 +44,10 @@
   font-size: var(--h3-fontsize, inherit);
   counter-reset: count-h4 count-h5 count-h6;
   counter-increment: count-h3;
-  &::before {
-    content: counter(count-h3, lower-alpha) ". ";
-  }
+}
+
+:where(.h3)::before {
+  content: counter(count-h3, upper-alpha) ". ";
 }
 
 .h4 {
@@ -50,9 +55,10 @@
   font-size: var(--h4-fontsize, inherit);
   counter-reset: count-h5 count-h6;
   counter-increment: count-h4;
-  &::before {
-    content: counter(count-h4, lower-alpha) ". ";
-  }
+}
+
+:where(.h4)::before {
+  content: counter(count-h4, decimal) ". ";
 }
 
 .h5 {
@@ -60,16 +66,18 @@
   font-size: var(--h5-fontsize, inherit);
   counter-reset: count-h6;
   counter-increment: count-h5;
-  &::before {
-    content: counter(count-h5, lower-alpha) ". ";
-  }
+}
+
+:where(.h5)::before {
+  content: counter(count-h5, lower-alpha) ". ";
 }
 
 .h6 {
   color: var(--h6-color, inherit);
   font-size: var(--h6-fontsize, inherit);
   counter-increment: count-h6;
-  &::before {
-    content: counter(count-h6, lower-alpha) ". ";
-  }
+}
+
+:where(.h6)::before {
+  content: counter(count-h6, lower-roman) ". ";
 }

package/packages/ui/src/index.ts

@@ -4,6 +4,7 @@ export { DotLine } from "./DotLine";
 export { Equation } from "./Equation";
 export { LI, OL, UL } from "./List";
 export { Page, PageBreak } from "./Page";
+export { Stack } from "./Stack";
 export { Entry, Table } from "./Table";
 export { H1, H2, H3, H4, H5, H6, ResetCounter, Title } from "./Titles";
 

package/src/index.css

@@ -19,16 +19,21 @@ body {
   font-size: 10pt;
   line-height: 1.75;
   font-family: system-ui, sans-serif;
+  font-family: "Public Sans Variable", sans-serif;
 }
 
-h1, h2, h3 {
+h1,
+h2,
+h3 {
   line-height: 1.2;
 }
 
+
+
 code {
   font-family: ui-monospace, monospace;
   font-size: 0.88em;
-  background: #f1f5f9;
+  background: #4490dd;
   padding: 0.1em 0.3em;
   border-radius: 3px;
 }

package/src/index.tsx

@@ -1,11 +1,16 @@
 import {
-  H1, H2, H3,
-  Page, PageBreak,
-  UL, OL, LI,
-  Table, Entry,
-  BlockBox, Block,
   CodeBlock,
   DotLine,
+  Entry,
+  H1,
+  H2,
+  H3,
+  LI,
+  OL,
+  PageBreak,
+  Stack,
+  Table,
+  UL,
 } from "@weasyprint-tsx/ui";
 import "./index.css";
 
@@ -56,148 +61,286 @@ export default function Document() {
         <link rel="stylesheet" href="index.css" />
       </head>
       <body>
-
         {/* ── Cover ── */}
-        <Page>
-          <div style={{ marginBottom: "1.5cm" }}>
-            <H1 fontSize="28pt" color="#1e40af">weasyprint-tsx</H1>
-            <p style={{ fontSize: "13pt", color: "#475569", marginTop: "0.3cm" }}>
-              Write PDFs in TSX — Bun bundles your Preact components into HTML,
-              WeasyPrint renders them as PDF.
-            </p>
-            <DotLine width="100%" color="#cbd5e1" />
-          </div>
-
-          <BlockBox gap="1cm">
-            <Block ratio={1}>
-              <H3 color="#1e40af">Requirements</H3>
-              <UL>
-                <LI>Bun ≥ 1.0</LI>
-                <LI>WeasyPrint (pip install weasyprint)</LI>
-              </UL>
-            </Block>
-            <Block ratio={1}>
-              <H3 color="#1e40af">Quick start</H3>
-              <OL>
-                <LI>bunx create-weasyprint-tsx my-doc</LI>
-                <LI>cd my-doc &amp;&amp; bun install</LI>
-                <LI>bun run dev</LI>
-              </OL>
-            </Block>
-          </BlockBox>
-        </Page>
+        <div style={{ marginBottom: "1.5cm" }}>
+          <H1 fontSize="28pt" color="#1e40af">
+            weasyprint-tsx
+          </H1>
+          <p style={{ fontSize: "13pt", color: "#475569", marginTop: "0.3cm" }}>
+            Write PDFs in TSX — Bun bundles your Preact components into HTML,
+            WeasyPrint renders them as PDF.
+          </p>
+          <DotLine width="100%" color="#cbd5e1" />
+        </div>
 
+        <Stack gap="1cm">
+          <div className="w-1/2">
+            <H3 color="#1e40af">Requirements</H3>
+            <UL>
+              <LI>Bun ≥ 1.0</LI>
+              <LI>WeasyPrint (pip install weasyprint)</LI>
+            </UL>
+          </div>
+          <div className="w-1/2">
+            <H3 color="#1e40af">
+              Quick start
+            </H3>
+            <OL>
+              <LI>bunx create-weasyprint-tsx my-doc</LI>
+              <LI>cd my-doc &amp;&amp; bun install</LI>
+              <LI>bun run dev</LI>
+            </OL>
+          </div>
+        </Stack>
         <PageBreak />
 
         {/* ── Getting Started ── */}
-        <Page>
-          <H2 color="#1e40af">Getting Started</H2>
+        <H2 color="#1e40af">Getting Started</H2>
 
-          <p>
-            The <code>create-weasyprint-tsx</code> scaffolder generates a ready-to-use
-            project. After installation, two scripts are available:
-          </p>
+        <p>
+          The <code>create-weasyprint-tsx</code> scaffolder generates a
+          ready-to-use project. After installation, two scripts are available:
+        </p>
 
-          <Table orientation="col" headerBg="#1e40af" headerFontSize="9pt" cellFontSize="9pt" borderColor="#e2e8f0">
-            <Entry content={["Script", "Effect"]} />
-            <Entry content={["bun run dev", "Watch src/, rebuild on change, serve preview at localhost:3000"]} />
-            <Entry content={["bun run build", "Build once, write output.pdf"]} />
-          </Table>
+        <Table
+          orientation="col"
+          headerBg="#1e40af"
+          headerFontSize="9pt"
+          cellFontSize="9pt"
+          borderColor="#e2e8f0"
+        >
+          <Entry content={["Script", "Effect"]} />
+          <Entry
+            content={[
+              "bun run dev",
+              "Watch src/, rebuild on change, serve preview at localhost:3000",
+            ]}
+          />
+          <Entry content={["bun run build", "Build once, write output.pdf"]} />
+        </Table>
 
-          <H3>Project structure</H3>
-          <CodeBlock language="plaintext" code={`my-doc/
+        <H3>Project structure</H3>
+        <CodeBlock
+          language="plaintext"
+          code={`my-doc/
 ├── src/
 │   ├── index.tsx          # Document root — export a default Preact component
 │   └── index.css          # Styles — must start with @import "tailwindcss"
 ├── weasyprint-tsx.config.ts
-└── package.json`} />
-
-          <H3>Entry point</H3>
-          <p>
-            <code>src/index.tsx</code> must export a default component that renders a
-            complete HTML document. WeasyPrint receives the full HTML string.
-          </p>
-          <CodeBlock language="tsx" code={indexCode} />
-        </Page>
+└── package.json`}
+        />
 
-        <PageBreak />
+        <H3>Entry point</H3>
+        <p>
+          <code>src/index.tsx</code> must export a default component that
+          renders a complete HTML document. WeasyPrint receives the full HTML
+          string.
+        </p>
+        <CodeBlock language="tsx" code={indexCode} />
 
         {/* ── Configuration ── */}
-        <Page>
-          <H2 color="#1e40af">Configuration</H2>
-          <p>
-            Create <code>weasyprint-tsx.config.ts</code> at the project root to
-            override any default:
-          </p>
-          <CodeBlock language="typescript" code={configCode} />
-
-          <H3>All config fields</H3>
-
-          <Table orientation="col" headerBg="#334155" headerFontSize="8.5pt" cellFontSize="8.5pt" borderColor="#e2e8f0">
-            <Entry content={["Field", "Default", "Description"]} />
-            <Entry content={["io.input", "src/index.tsx", "TSX entry point"]} />
-            <Entry content={["io.output", "output.pdf", "Output PDF path"]} />
-            <Entry content={["io.buildDir", ".build", "Intermediate HTML directory"]} />
-            <Entry content={["io.media_type", "print", "CSS media type"]} />
-            <Entry content={["weasyprint.path", "weasyprint", "Path to WeasyPrint binary"]} />
-            <Entry content={["weasyprint.dpi", "—", "Output resolution"]} />
-            <Entry content={["weasyprint.optimize_images", "—", "Compress images in output"]} />
-            <Entry content={["weasyprint.pdf_forms", "—", "Enable PDF form fields"]} />
-            <Entry content={["weasyprint.pdf_variant", "—", "pdf/a-1b, pdf/ua-1, …"]} />
-            <Entry content={["weasyprint.full_fonts", "—", "Embed full font files"]} />
-            <Entry content={["weasyprint.cache", "—", "Font/image cache folder"]} />
-            <Entry content={["dev.port", "3000", "Dev server port"]} />
-            <Entry content={["dev.watch", "src", "Directory to watch"]} />
-            <Entry content={["pdf.stylesheets", "[]", "Extra CSS files via --stylesheet"]} />
-          </Table>
-        </Page>
+        <H2 color="#1e40af">Configuration</H2>
+        <p>
+          Create <code>weasyprint-tsx.config.ts</code> at the project root to
+          override any default:
+        </p>
+        <CodeBlock language="typescript" code={configCode} />
 
-        <PageBreak />
+        <H3>All config fields</H3>
+
+        <Table
+          orientation="col"
+          headerBg="#334155"
+          headerFontSize="8.5pt"
+          cellFontSize="8.5pt"
+          borderColor="#e2e8f0"
+        >
+          <Entry content={["Field", "Default", "Description"]} />
+          <Entry content={["io.input", "src/index.tsx", "TSX entry point"]} />
+          <Entry content={["io.output", "output.pdf", "Output PDF path"]} />
+          <Entry
+            content={["io.buildDir", ".build", "Intermediate HTML directory"]}
+          />
+          <Entry content={["io.media_type", "print", "CSS media type"]} />
+          <Entry
+            content={[
+              "weasyprint.path",
+              "weasyprint",
+              "Path to WeasyPrint binary",
+            ]}
+          />
+          <Entry content={["weasyprint.dpi", "—", "Output resolution"]} />
+          <Entry
+            content={[
+              "weasyprint.optimize_images",
+              "—",
+              "Compress images in output",
+            ]}
+          />
+          <Entry
+            content={["weasyprint.pdf_forms", "—", "Enable PDF form fields"]}
+          />
+          <Entry
+            content={["weasyprint.pdf_variant", "—", "pdf/a-1b, pdf/ua-1, …"]}
+          />
+          <Entry
+            content={["weasyprint.full_fonts", "—", "Embed full font files"]}
+          />
+          <Entry
+            content={["weasyprint.cache", "—", "Font/image cache folder"]}
+          />
+          <Entry content={["dev.port", "3000", "Dev server port"]} />
+          <Entry content={["dev.watch", "src", "Directory to watch"]} />
+          <Entry
+            content={[
+              "pdf.stylesheets",
+              "[]",
+              "Extra CSS files via --stylesheet",
+            ]}
+          />
+        </Table>
 
         {/* ── UI Components ── */}
-        <Page>
-          <H2 color="#1e40af">UI Components</H2>
-          <p>
-            <code>@weasyprint-tsx/ui</code> provides print-optimized Preact components.
-            Import everything from the package root:
-          </p>
-          <CodeBlock language="ts" code={`import { H1, H2, Page, PageBreak, UL, OL, LI, Table, Entry, BlockBox, Block, DotLine, CodeBlock, Equation } from "@weasyprint-tsx/ui";`} />
-
-          <H3>Page &amp; Layout</H3>
-          <Table orientation="row" headerBg="#f1f5f9" borderColor="#e2e8f0" headerFontSize="8.5pt" cellFontSize="8.5pt">
-            <Entry content={["Page", "Wraps a page section (<section>). Accepts page?: string for named page rules."]} />
-            <Entry content={["PageBreak", "Inserts a CSS page break. No props."]} />
-            <Entry content={["BlockBox", "Multi-column flex container. Props: gap, basis, centered, align."]} />
-            <Entry content={["Block", "Column inside BlockBox. Props: ratio, centered, align."]} />
-          </Table>
-
-          <H3>Headings</H3>
-          <Table orientation="row" headerBg="#f1f5f9" borderColor="#e2e8f0" headerFontSize="8.5pt" cellFontSize="8.5pt">
-            <Entry content={["H1 – H6", "Render h1–h6. Props: marker (data-marker for CSS counters), color, fontSize."]} />
-            <Entry content={["ResetCounter", "Hidden div that resets CSS counters. Use at the top of numbered sections."]} />
-          </Table>
-
-          <H3>Lists</H3>
-          <Table orientation="row" headerBg="#f1f5f9" borderColor="#e2e8f0" headerFontSize="8.5pt" cellFontSize="8.5pt">
-            <Entry content={["UL", "Unordered list. Props: marker (bullet char), gap, pre."]} />
-            <Entry content={["OL", "Ordered list. Props: start, counterType (decimal/lower-alpha/upper-roman/…), markerPre, markerPost, gap, pre."]} />
-            <Entry content={["LI", "List item. Props: marker (override bullet), count (override counter)."]} />
-          </Table>
-
-          <H3>Table</H3>
-          <Table orientation="row" headerBg="#f1f5f9" borderColor="#e2e8f0" headerFontSize="8.5pt" cellFontSize="8.5pt">
-            <Entry content={["Table", `orientation "col" (default): first Entry is the header row. orientation "row": first cell of each Entry is the row header. Also: headerBg, cellBg, borderWidth, borderColor, headerFontSize, cellFontSize.`]} />
-            <Entry content={["Entry", "Data row/column. content: ComponentChild[] holds cell values. Accepts per-entry overrides: headerBg, cellBg."]} />
-          </Table>
-
-          <H3>Inline elements</H3>
-          <Table orientation="row" headerBg="#f1f5f9" borderColor="#e2e8f0" headerFontSize="8.5pt" cellFontSize="8.5pt">
-            <Entry content={["DotLine", "Repeating dot fill line. Props: num, width, inline, color, lineHeight."]} />
-            <Entry content={["CodeBlock", "Syntax-highlighted code (highlight.js). Props: language, code."]} />
-            <Entry content={["Equation", "LaTeX via KaTeX. Props: tex, displayMode, aligned, chemical."]} />
-          </Table>
-        </Page>
+        <H2 color="#1e40af">UI Components</H2>
+        <p>
+          <code>@weasyprint-tsx/ui</code> provides print-optimized Preact
+          components. Import everything from the package root:
+        </p>
+        <CodeBlock
+          language="ts"
+          code={`import { H1, H2, Page, PageBreak, UL, OL, LI, Table, Entry, BlockBox, Block, DotLine, CodeBlock, Equation } from "@weasyprint-tsx/ui";`}
+        />
+
+        <H3>Page &amp; Layout</H3>
+        <Table
+          orientation="row"
+          headerBg="#f1f5f9"
+          borderColor="#e2e8f0"
+          headerFontSize="8.5pt"
+          cellFontSize="8.5pt"
+        >
+          <Entry
+            content={[
+              "Page",
+              "Wraps a page section (<section>). Accepts page?: string for named page rules.",
+            ]}
+          />
+          <Entry
+            content={["PageBreak", "Inserts a CSS page break. No props."]}
+          />
+          <Entry
+            content={[
+              "BlockBox",
+              "Multi-column flex container. Props: gap, basis, centered, align.",
+            ]}
+          />
+          <Entry
+            content={[
+              "Block",
+              "Column inside BlockBox. Props: ratio, centered, align.",
+            ]}
+          />
+        </Table>
+
+        <H3>Headings</H3>
+        <Table
+          orientation="row"
+          headerBg="#f1f5f9"
+          borderColor="#e2e8f0"
+          headerFontSize="8.5pt"
+          cellFontSize="8.5pt"
+        >
+          <Entry
+            content={[
+              "H1 – H6",
+              "Render h1–h6. Props: marker (data-marker for CSS counters), color, fontSize.",
+            ]}
+          />
+          <Entry
+            content={[
+              "ResetCounter",
+              "Hidden div that resets CSS counters. Use at the top of numbered sections.",
+            ]}
+          />
+        </Table>
+
+        <H3>Lists</H3>
+        <Table
+          orientation="row"
+          headerBg="#f1f5f9"
+          borderColor="#e2e8f0"
+          headerFontSize="8.5pt"
+          cellFontSize="8.5pt"
+        >
+          <Entry
+            content={[
+              "UL",
+              "Unordered list. Props: marker (bullet char), gap, pre.",
+            ]}
+          />
+          <Entry
+            content={[
+              "OL",
+              "Ordered list. Props: start, counterType (decimal/lower-alpha/upper-roman/…), markerPre, markerPost, gap, pre.",
+            ]}
+          />
+          <Entry
+            content={[
+              "LI",
+              "List item. Props: marker (override bullet), count (override counter).",
+            ]}
+          />
+        </Table>
+
+        <H3>Table</H3>
+        <Table
+          orientation="row"
+          headerBg="#f1f5f9"
+          borderColor="#e2e8f0"
+          headerFontSize="8.5pt"
+          cellFontSize="8.5pt"
+        >
+          <Entry
+            content={[
+              "Table",
+              `orientation "col" (default): first Entry is the header row. orientation "row": first cell of each Entry is the row header. Also: headerBg, cellBg, borderWidth, borderColor, headerFontSize, cellFontSize.`,
+            ]}
+          />
+          <Entry
+            content={[
+              "Entry",
+              "Data row/column. content: ComponentChild[] holds cell values. Accepts per-entry overrides: headerBg, cellBg.",
+            ]}
+          />
+        </Table>
 
+        <H3>Inline elements</H3>
+        <Table
+          orientation="row"
+          headerBg="#f1f5f9"
+          borderColor="#e2e8f0"
+          headerFontSize="8.5pt"
+          cellFontSize="8.5pt"
+        >
+          <Entry
+            content={[
+              "DotLine",
+              "Repeating dot fill line. Props: num, width, inline, color, lineHeight.",
+            ]}
+          />
+          <Entry
+            content={[
+              "CodeBlock",
+              "Syntax-highlighted code (highlight.js). Props: language, code.",
+            ]}
+          />
+          <Entry
+            content={[
+              "Equation",
+              "LaTeX via KaTeX. Props: tex, displayMode, aligned, chemical.",
+            ]}
+          />
+        </Table>
       </body>
     </html>
   );

package/testUI/index.css

@@ -0,0 +1 @@
+@import "tailwindcss";

package/testUI/index.tsx

@@ -0,0 +1,20 @@
+import { Stack } from "@weasyprint-tsx/ui";
+import "./index.css";
+
+export default function Document() {
+  return (
+    <html>
+      <head>
+        <meta charset="UTF-8" />
+        <title>weasyprint-tsx</title>
+        <link rel="stylesheet" href="index.css" />
+      </head>
+      <body>
+        <Stack gap={"1cm"} className="border-2 border-solid h-125 py-5">
+          <div className="bg-green-800 size-50"></div>
+          <div className="bg-blue-800 size-50"></div>
+        </Stack>
+      </body>
+    </html>
+  );
+}

package/weasyprint-tsx.config.ts

@@ -4,4 +4,12 @@ export default {
   io: {
     output: "ReadMe.pdf",
   },
+
+  // io: {
+  //   output: "TestUI.pdf",
+  //   input: "testUI/index.tsx",
+  // },
+  // dev: {
+  //   watch: ["packages/ui/", "testUI"],
+  // },
 } satisfies Config;