weasyprint-tsx 0.1.0 → 0.1.2

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.2",
+  "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.3",
   "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,28 +1,20 @@
 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();
   if (output) cfg.io.output = output;
-  let t0 = performance.now();
 
   await buildHTML(cfg);
-  process.stdout.write(
-    `Bun HTML build -- ${(performance.now() - t0).toFixed(2)} ms`,
-  );
   await buildPDF(cfg);
-  t0 = performance.now();
-  process.stdout.write(
-    `Weasyprint PDF build -- ${(performance.now() - t0).toFixed(2)} ms → ${cfg.io.output}`,
-  );
 }
 
 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 +44,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,12 @@
 {
   "name": "@weasyprint-tsx/ui",
-  "version": "0.1.0",
+  "version": "0.1.4",
   "exports": {
     ".": "./src/index.ts"
   },
-  "types": "./src/index.ts"
+  "types": "./src/index.ts",
+  "dependencies": {
+    "highlight.js": "11.11.1",
+    "katex": "^0.16.47"
+  }
 }

package/packages/ui/src/BlockBox.tsx

@@ -2,7 +2,7 @@ import { ComponentProps, toChildArray, VNode } from "preact";
 import styles from "./BlockBox.module.css";
 import { joinClasses, mergeStyle } from "./utils";
 
-interface BlockBoxProps extends ComponentProps<"div"> {
+export interface BlockBoxProps extends ComponentProps<"div"> {
   children: VNode<BlockProps>[] | VNode<BlockProps>;
   gap?: string;
   basis?: number;
@@ -10,14 +10,14 @@ interface BlockBoxProps extends ComponentProps<"div"> {
   align?: "middle" | "top" | "bottom";
 }
 
-interface BlockProps extends ComponentProps<"div"> {
+export interface BlockProps extends ComponentProps<"div"> {
   ratio?: number;
   centered?: boolean;
   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"> {
+export 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/DotLine.tsx

@@ -2,7 +2,7 @@ import { ComponentProps } from "preact";
 import styles from "./DotLine.module.css";
 import { joinClasses, mergeStyle } from "./utils";
 
-interface DotLineProps extends ComponentProps<"span"> {
+export interface DotLineProps extends ComponentProps<"span"> {
   num?: number;
   width?: number | string;
   inline?: boolean;

package/packages/ui/src/Equation.tsx

@@ -5,11 +5,12 @@ import { ComponentProps } from "preact";
 import styles from "./Equation.module.css";
 import { joinClasses } from "./utils";
 
-interface EquationProps extends Omit<ComponentProps<"span">, "children"> {
+export interface EquationProps extends Omit<ComponentProps<"span">, "children"> {
   tex: string;
   displayMode?: boolean;
   aligned?: boolean;
   chemical?: boolean;
+  numberFormat?: boolean;
 }
 export function Equation({
   tex,
@@ -17,15 +18,16 @@ export function Equation({
   className = "",
   aligned = false,
   chemical = false,
+  numberFormat = true,
   ...props
 }: EquationProps) {
+  const numberFormated = numberFormat ? formatNumber(tex) : tex;
   const alignedCode = aligned
     ? `\\begin{aligned}
-${tex}
+${numberFormated}
 \\end{aligned}`
-    : tex;
+    : numberFormated;
   const chemCode = chemical ? `\\ce{${alignedCode}}` : alignedCode;
-
   return (
     <span
       dangerouslySetInnerHTML={{
@@ -36,3 +38,50 @@ ${tex}
     />
   );
 }
+
+export interface SymbolProps {
+  children?: string;
+}
+
+export function symbolFactory(
+  fn: (txt?: string, children?: string) => string | undefined,
+  txt?: string,
+  init?: string,
+) {
+  return function ({ children = init }: SymbolProps) {
+    return <Equation tex={fn(txt, children) ?? ""} />;
+  };
+}
+
+export function underscriptFactory(txt: string, init?: string) {
+  return symbolFactory(
+    (txt, children) => (children ? `${txt}_{${children}}` : `${txt}`),
+    txt,
+    init,
+  );
+}
+
+export function functionFactory(txt: string, init: string = "x") {
+  return symbolFactory(
+    (txt, children) => (children ? `${txt}(${children})` : `${txt}`),
+    txt,
+    init,
+  );
+}
+
+function formatNumber(tex: string | undefined) {
+  if (!tex) return "";
+  return tex.replace(/\d+(?:\.\d+)?/g, (match) => {
+    const [intPart, decPart] = match.split(".");
+    const formattedInt = intPart.replace(/(\d)(?=(\d{3})+(?!\d))/g, "$1\\,");
+    if (decPart === undefined) return formattedInt;
+    const formattedDec = decPart.replace(/(\d{3})(?=\d)/g, "$1\\,");
+    return `${formattedInt},${formattedDec}\\:`;
+  });
+}
+
+export function Eq(props: SymbolProps) {
+  return symbolFactory((_, children) => {
+    return formatNumber(children);
+  })(props);
+}

package/packages/ui/src/List.tsx

@@ -9,24 +9,24 @@ export type CounterType =
   | "lower-roman"
   | "upper-roman";
 
-interface ListItemProps extends ComponentProps<"div"> {
+export interface ListItemProps extends ComponentProps<"div"> {
   count?: number;
   marker?: string;
 }
 
-interface ListProps extends ComponentProps<"div"> {
+export interface ListProps extends ComponentProps<"div"> {
   pre?: ComponentChildren;
   gap?: string | number;
 }
 
-interface OLProps extends ListProps {
+export interface OLProps extends ListProps {
   start?: number;
   counterType?: CounterType;
   markerPre?: string;
   markerPost?: string;
 }
 
-interface ULProps extends ListProps {
+export interface ULProps extends ListProps {
   marker?: string;
 }
 

package/packages/ui/src/Page.tsx

@@ -1,7 +1,7 @@
 import { ComponentProps } from "preact";
 import styles from "./Page.module.css";
 import { joinClasses, mergeStyle } from "./utils";
-interface PageProps {
+export interface PageProps {
   page?: string;
 }
 

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";
+
+export 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/Table.tsx

@@ -22,7 +22,7 @@ export function Entry(_props: TableEntryProps): null {
   return null;
 }
 
-interface TableProps extends ComponentProps<"table"> {
+export interface TableProps extends ComponentProps<"table"> {
   orientation?: "col" | "row";
   contentClass?: string;
   headerClass?: string;

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/Titles.tsx

@@ -2,9 +2,9 @@ import { ComponentProps, ComponentType } from "preact";
 import styles from "./Title.module.css";
 import { joinClasses, mergeStyle } from "./utils";
 
-type Htype = "h1" | "h2" | "h3" | "h4" | "h5" | "h6";
+export type Htype = "h1" | "h2" | "h3" | "h4" | "h5" | "h6";
 
-type Hprops<h extends Htype> = ComponentProps<h> & {
+export type Hprops<h extends Htype> = ComponentProps<h> & {
   marker?: string;
   color?: string;
   fontSize?: string;
@@ -73,7 +73,7 @@ export function H6({ className = "", marker, color, fontSize, style, ...props }:
 
 const TAG_MAP = { h1: H1, h2: H2, h3: H3, h4: H4, h5: H5, h6: H6 };
 
-type TitleProps<h extends Htype> = Hprops<h> & { type: h };
+export type TitleProps<h extends Htype> = Hprops<h> & { type: h };
 export function Title<h extends Htype>({ type, ...props }: TitleProps<h>) {
   const Tag = TAG_MAP[type] as ComponentType<Hprops<h>>;
   return <Tag {...(props as Hprops<h>)} />;

package/packages/ui/src/index.ts

@@ -1,9 +1,24 @@
 export { Block, BlockBox } from "./BlockBox";
+export type { BlockBoxProps, BlockProps } from "./BlockBox";
 export { CodeBlock } from "./CodeBlock";
+export type { CodeBlockProps } from "./CodeBlock";
 export { DotLine } from "./DotLine";
-export { Equation } from "./Equation";
+export type { DotLineProps } from "./DotLine";
+export {
+    Eq, Equation,
+    functionFactory, symbolFactory,
+    underscriptFactory
+} from "./Equation";
+export type { EquationProps, SymbolProps } from "./Equation";
 export { LI, OL, UL } from "./List";
+export type { CounterType, ListItemProps, ListProps, OLProps, ULProps } from "./List";
 export { Page, PageBreak } from "./Page";
+export type { PageProps } from "./Page";
+export { Stack } from "./Stack";
+export type { StackProps } from "./Stack";
 export { Entry, Table } from "./Table";
+export type { TableEntryProps, TableProps } from "./Table";
 export { H1, H2, H3, H4, H5, H6, ResetCounter, Title } from "./Titles";
+export type { Hprops, Htype, TitleProps } from "./Titles";
+export * from "./utils";
 

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,22 @@
+import { Eq, Equation, functionFactory } from "@weasyprint-tsx/ui";
+import "./index.css";
+
+const S = functionFactory("S" , "x")
+
+export default function Document() {
+  return (
+    <html>
+      <head>
+        <meta charset="UTF-8" />
+        <title>weasyprint-tsx</title>
+        <link rel="stylesheet" href="index.css" />
+      </head>
+      <body>
+        <Equation tex="C_m = 50000.0000000000000000001 g/L"></Equation>
+        <Eq>151545312313513.13543545345343 a151515131 .13513513</Eq>
+        <S/>
+        <S>g</S>
+      </body>
+    </html>
+  );
+}

package/weasyprint-tsx.config.ts

@@ -1,7 +1,15 @@
 import { Config } from "./packages/build/src/config";
 
 export default {
+  // io: {
+  //   output: "ReadMe.pdf",
+  // },
+
   io: {
-    output: "ReadMe.pdf",
+    output: "TestUI.pdf",
+    input: "testUI/index.tsx",
+  },
+  dev: {
+    watch: ["packages/ui/", "testUI"],
   },
 } satisfies Config;