@weasyprint-tsx/ui 0.0.1

package/package.json

@@ -0,0 +1,7 @@
+{
+  "name": "@weasyprint-tsx/ui",
+  "version" : "0.0.1",
+  "workspaces": [
+    "packages/*"
+  ]
+}

package/src/BlockBox.module.css

@@ -0,0 +1,16 @@
+.container {
+  margin-left: calc(-1 * var(--block-box-gap, 0));
+}
+
+.block {
+  display: inline-block;
+  box-sizing: border-box;
+  width: calc(var(--ratio, 1) * 100% / var(--block-box-basis, 1));
+  vertical-align: var(--block-box-align, middle);
+  padding-left: var(--block-box-gap, 0);
+}
+
+.centered > * {
+  display: block;
+  margin: 0 auto;
+}

package/src/BlockBox.tsx

@@ -0,0 +1,66 @@
+import { ComponentProps, toChildArray, VNode } from "preact";
+import styles from "./BlockBox.module.css";
+import { joinClasses, mergeStyle } from "./utils";
+
+interface BlockBoxProps extends ComponentProps<"div"> {
+  children: VNode<BlockProps>[] | VNode<BlockProps>;
+  gap?: string;
+  basis?: number;
+  centered?: boolean;
+  align?: "middle" | "top" | "bottom";
+}
+
+interface BlockProps extends ComponentProps<"div"> {
+  ratio?: number;
+  centered?: boolean;
+  align?: "middle" | "top" | "bottom";
+}
+
+export function Block(_props: BlockProps): null {
+  return null;
+}
+
+export function BlockBox({
+  children,
+  className,
+  basis,
+  gap,
+  align,
+  centered: parentCentered = true,
+  style,
+  ...props
+}: BlockBoxProps) {
+  const blockList = toChildArray(children).filter(
+    (child) => (child as VNode).type === Block,
+  ) as VNode<BlockProps>[];
+
+  const blockBasis =
+    basis ?? blockList.reduce((acc, b) => acc + (b.props.ratio ?? 1), 0);
+
+  const child = blockList.map(
+    ({ props: { style, ratio = 1, className, centered, align, ...props } }) => (
+      <div
+        style={mergeStyle(style, { "--ratio": ratio, "--block-box-align": align })}
+        className={joinClasses(
+          className,
+          styles.block,
+          (centered ?? parentCentered) ? styles.centered : undefined,
+        )}
+        {...props}
+      />
+    ),
+  );
+
+  return (
+    <div
+      children={child}
+      className={joinClasses(className, styles.container)}
+      style={mergeStyle(style, {
+        "--block-box-basis": blockBasis,
+        "--block-box-gap": gap,
+        "--block-box-align": align,
+      })}
+      {...props}
+    />
+  );
+}

package/src/CodeBlock.tsx

@@ -0,0 +1,17 @@
+import hljs from "highlight.js";
+import "highlight.js/styles/atom-one-dark.css";
+import { ComponentProps } from "preact";
+
+interface CodeBlockProps extends Omit<ComponentProps<"code">, "children"> {
+  language: string;
+  code: string;
+}
+
+export function CodeBlock({ code, language, ...props }: CodeBlockProps) {
+  const codeBlock = hljs.highlight(code, { language: language });
+  return (
+    <pre style={{breakInside : "avoid"}}>
+      <code {...props} dangerouslySetInnerHTML={{ __html: codeBlock.value }} />
+    </pre>
+  );
+}

package/src/DotLine.module.css

@@ -0,0 +1,24 @@
+/* block mode: stacked answer lines */
+.block {
+  display: block;
+}
+
+.line {
+  display: block;
+  min-height: var(--dotline-height, 6mm);
+
+  margin-bottom: 2mm;
+  border-bottom: 1px dotted var(--dotline-color, #808080);
+  &:is(:last-child) {
+    margin-bottom: 3mm;
+  }
+}
+
+/* inline mode: fill-in-the-blank inside <p> */
+.inline {
+  display: inline-block;
+  vertical-align: baseline;
+  height: 0;
+  margin: 0 1mm;
+  border-bottom: 1px dotted var(--dotline-color, #808080);
+}

package/src/DotLine.tsx

@@ -0,0 +1,45 @@
+import { ComponentProps } from "preact";
+import styles from "./DotLine.module.css";
+import { joinClasses, mergeStyle } from "./utils";
+
+interface DotLineProps extends ComponentProps<"span"> {
+  num?: number;
+  width?: number | string;
+  inline?: boolean;
+  color?: string;
+  lineHeight?: string;
+}
+
+export function DotLine({
+  num = 1,
+  children,
+  width = "100%",
+  style,
+  className = "",
+  inline,
+  color,
+  lineHeight,
+  ...props
+}: DotLineProps) {
+  if (num === 0) return;
+  const css = mergeStyle(style, { width, "--dotline-color": color, "--dotline-height": lineHeight });
+
+  if (inline)
+    return (
+      <span
+        className={joinClasses(className, styles.inline)}
+        style={css}
+        {...props}
+      />
+    );
+
+  return (
+    <span className={joinClasses(className, styles.block)} style={css} {...props}>
+      {Array.from({ length: num }, (_, k) => (
+        <span key={k} className={styles.line}>
+          {k === 0 ? children : null}
+        </span>
+      ))}
+    </span>
+  );
+}

package/src/Equation.module.css

@@ -0,0 +1,4 @@
+.equation {
+    /* display: block; */
+    padding: 2px;
+}

package/src/Equation.tsx

@@ -0,0 +1,38 @@
+import { renderToString } from "katex";
+import "katex/contrib/mhchem";
+import "katex/dist/katex.min.css";
+import { ComponentProps } from "preact";
+import styles from "./Equation.module.css";
+import { joinClasses } from "./utils";
+
+interface EquationProps extends Omit<ComponentProps<"span">, "children"> {
+  tex: string;
+  displayMode?: boolean;
+  aligned?: boolean;
+  chemical?: boolean;
+}
+export function Equation({
+  tex,
+  displayMode,
+  className = "",
+  aligned = false,
+  chemical = false,
+  ...props
+}: EquationProps) {
+  const alignedCode = aligned
+    ? `\\begin{aligned}
+${tex}
+\\end{aligned}`
+    : tex;
+  const chemCode = chemical ? `\\ce{${alignedCode}}` : alignedCode;
+
+  return (
+    <span
+      dangerouslySetInnerHTML={{
+        __html: renderToString(chemCode, { displayMode }),
+      }}
+      className={joinClasses(className, styles.equation)}
+      {...props}
+    />
+  );
+}

package/src/List.module.css

@@ -0,0 +1,53 @@
+.ol {
+  & > .li {
+    counter-increment: list-items;
+    &::before {
+      content: var(--ol-marker-pre, "") counter(list-items, decimal)
+        var(--ol-marker-post, ". ");
+      margin-right: 1mm;
+    }
+  }
+  &[data-counter="lower-alpha"] .li::before {
+    content: var(--ol-marker-pre, "") counter(list-items, lower-alpha)
+      var(--ol-marker-post, ". ");
+  }
+  &[data-counter="upper-alpha"] .li::before {
+    content: var(--ol-marker-pre, "") counter(list-items, upper-alpha)
+      var(--ol-marker-post, ". ");
+  }
+  &[data-counter="lower-roman"] .li::before {
+    content: var(--ol-marker-pre, "") counter(list-items, lower-roman)
+      var(--ol-marker-post, ". ");
+  }
+  &[data-counter="upper-roman"] .li::before {
+    content: var(--ol-marker-pre, "") counter(list-items, upper-roman)
+      var(--ol-marker-post, ". ");
+  }
+}
+
+.ul {
+  .li {
+    &::before {
+      content: var(--ul-marker, "•");
+      margin-right: 1mm;
+    }
+  }
+}
+
+/* hanging indent so wrapped text aligns under content, not marker */
+.li {
+  &:not(:last-child) {
+    margin-bottom: var(--list-gap, 0);
+  }
+}
+
+/* pre+body side-by-side on an inner wrapper — outer div stays unstyled */
+.preWrapper {
+  display: grid;
+  grid-template-columns: max-content 1fr;
+  align-items: start;
+}
+
+.pre {
+  padding-right: 1mm;
+}

package/src/List.tsx

@@ -0,0 +1,120 @@
+import { ComponentChildren, ComponentProps } from "preact";
+import styles from "./List.module.css";
+import { cssString, joinClasses, mergeStyle } from "./utils";
+
+export type CounterType =
+  | "decimal"
+  | "lower-alpha"
+  | "upper-alpha"
+  | "lower-roman"
+  | "upper-roman";
+
+interface ListItemProps extends ComponentProps<"div"> {
+  count?: number;
+  marker?: string;
+}
+
+interface ListProps extends ComponentProps<"div"> {
+  pre?: ComponentChildren;
+  gap?: string | number;
+}
+
+interface OLProps extends ListProps {
+  start?: number;
+  counterType?: CounterType;
+  markerPre?: string;
+  markerPost?: string;
+}
+
+interface ULProps extends ListProps {
+  marker?: string;
+}
+
+export function LI({
+  className = "",
+  count = NaN,
+  style,
+  marker,
+  ...props
+}: ListItemProps) {
+  const css = mergeStyle(style, {
+    counterReset: count ? `list-items ${count - 1}` : undefined,
+    "--ul-marker": cssString(marker),
+  });
+  return (
+    <div style={css} {...props} className={joinClasses(className, styles.li)} />
+  );
+}
+
+function Body({
+  pre,
+  children,
+}: {
+  pre?: ComponentChildren;
+  children: ComponentChildren;
+}) {
+  if (!pre) return <>{children}</>;
+  return (
+    <div className={styles.preWrapper}>
+      <div className={styles.pre}>{pre}</div>
+      <div>{children}</div>
+    </div>
+  );
+}
+
+export function OL({
+  className = "",
+  start = 1,
+  counterType = "decimal",
+  markerPre,
+  markerPost,
+  style,
+  pre,
+  gap,
+  children,
+  ...props
+}: OLProps) {
+  const css = mergeStyle(style, {
+    counterReset: `list-items ${start - 1}`,
+    "--ol-marker-pre": cssString(markerPre),
+    "--ol-marker-post": cssString(markerPost),
+    "--list-gap": gap,
+  });
+  return (
+    <div
+      {...props}
+      className={joinClasses(className, styles.ol)}
+      style={css}
+      data-counter={counterType}
+    >
+      <Body pre={pre}>{children}</Body>
+    </div>
+  );
+}
+
+export function UL({
+  className = "",
+  marker,
+  style,
+  children,
+  pre,
+  gap,
+  ...props
+}: ULProps) {
+  const css = mergeStyle(style, {
+    "--ul-marker": cssString(marker),
+    "--list-gap": gap,
+  });
+  return (
+    <div {...props} className={joinClasses(className, styles.ul)} style={css}>
+      <Body pre={pre}>{children}</Body>
+    </div>
+  );
+}
+
+export function List({
+  kind,
+  ...props
+}: ListProps & { kind: "ul" | "ol"; start?: number }) {
+  return kind === "ul" ? <UL {...props} /> : <OL {...props} />;
+}

package/src/Page.module.css

@@ -0,0 +1,14 @@
+.pagebreak {
+  break-before: always;
+  height: 0;
+  width: 0;
+  margin: 0;
+  padding: 0;
+}
+
+.page {
+  min-height: 100%;
+  width: 100%;
+  break-before: always;
+  break-after: always;
+}

package/src/Page.tsx

@@ -0,0 +1,33 @@
+import { ComponentProps } from "preact";
+import styles from "./Page.module.css";
+import { joinClasses, mergeStyle } from "./utils";
+interface PageProps {
+  page?: string;
+}
+
+export function PageBreak({ page }: PageProps) {
+  return (
+    <div
+      style={{
+        page,
+      }}
+      className={styles.pagebreak}
+    />
+  );
+}
+export function Page({
+  page,
+  style,
+  className = "",
+  ...props
+}: PageProps & ComponentProps<"section">) {
+  const css = mergeStyle(style, { page });
+
+  return (
+    <section
+      style={css}
+      className={joinClasses(className, styles.page)}
+      {...props}
+    />
+  );
+}

package/src/Table.module.css

@@ -0,0 +1,55 @@
+.table {
+  --table-border-width: 1px;
+  --table-border-color: currentColor;
+  border-collapse: collapse;
+}
+
+.table th,
+.table td {
+  text-align: center;
+  vertical-align: middle;
+}
+
+.table th {
+  background-color: var(--table-header-color, transparent);
+  font-size: var(--table-header-fontsize, inherit);
+}
+
+.table td {
+  background-color: var(--table-cell-color, transparent);
+  font-size: var(--table-cell-fontsize, inherit);
+}
+
+/* ── Row orientation ──────────────────────────────────────────── */
+.row td,
+.row th {
+  border-right: var(--table-border-width, 1px) solid var(--table-border-color, currentColor);
+  border-bottom: var(--table-border-width, 1px) solid var(--table-border-color, currentColor);
+}
+
+.row tr td:last-child,
+.row tr th:last-child {
+  border-right: none;
+}
+
+.row tr:last-child td,
+.row tr:last-child th {
+  border-bottom: none;
+}
+
+/* ── Col orientation ──────────────────────────────────────────── */
+.col td,
+.col th {
+  border-right: var(--table-border-width, 1px) solid var(--table-border-color, currentColor);
+  border-bottom: var(--table-border-width, 1px) solid var(--table-border-color, currentColor);
+}
+
+.col tr td:last-child,
+.col tr th:last-child {
+  border-right: none;
+}
+
+.col tbody tr:last-child td,
+.col tbody tr:last-child th {
+  border-bottom: none;
+}

package/src/Table.tsx

@@ -0,0 +1,164 @@
+import {
+  ComponentChild,
+  ComponentProps,
+  toChildArray,
+  VNode
+} from "preact";
+import styles from "./Table.module.css";
+import { joinClasses, mergeStyle } from "./utils";
+
+
+
+export interface TableEntryProps extends ComponentProps<"th"> {
+  content: ComponentChild[];
+  contentClass?: string;
+  headerBg?: string;
+  cellBg?: string;
+  headerFontSize?: string;
+  cellFontSize?: string;
+}
+
+export function Entry(_props: TableEntryProps): null {
+  return null;
+}
+
+interface TableProps extends ComponentProps<"table"> {
+  orientation?: "col" | "row";
+  contentClass?: string;
+  headerClass?: string;
+  headerBg?: string;
+  cellBg?: string;
+  headerFontSize?: string;
+  cellFontSize?: string;
+  borderWidth?: string;
+  borderColor?: string;
+  children: VNode<TableEntryProps> | VNode<TableEntryProps>[];
+}
+
+
+export function Table({
+  children,
+  orientation = "col",
+  className,
+  style,
+  contentClass: parentContentClass = "",
+  headerClass,
+  headerBg,
+  cellBg,
+  headerFontSize,
+  cellFontSize,
+  borderWidth,
+  borderColor,
+  ...props
+}: TableProps) {
+  const headers = toChildArray(children)
+    .filter((child) => (child as VNode).type === Entry)
+    .map((child) => (child as VNode<TableEntryProps>).props);
+
+  const tableClass = joinClasses(
+    className,
+    styles.table,
+    styles[orientation],
+  ).trim();
+
+  const tableStyle = mergeStyle(style, {
+    "--table-header-color": headerBg,
+    "--table-cell-color": cellBg,
+    "--table-header-fontsize": headerFontSize,
+    "--table-cell-fontsize": cellFontSize,
+    "--table-border-width": borderWidth,
+    "--table-border-color": borderColor,
+  });
+
+  if (orientation === "row") {
+    return (
+      <table className={tableClass} style={tableStyle} {...props}>
+        <tbody>
+          {headers.map(
+            ({
+              children,
+              content,
+              className,
+              contentClass,
+              style,
+              headerBg,
+              cellBg,
+              headerFontSize,
+              cellFontSize,
+              ...props
+            }, i) => (
+              <tr key={i}>
+                <th
+                  scope="row"
+                  className={joinClasses(className, headerClass)}
+                  style={mergeStyle(style, {
+                    "--table-header-color": headerBg,
+                    "--table-header-fontsize": headerFontSize,
+                  })}
+                  {...props}
+                >
+                  {children}
+                </th>
+                {content.map((cell, j) => (
+                  <td
+                    key={j}
+                    className={joinClasses(contentClass, parentContentClass)}
+                    style={{ "--table-cell-color": cellBg, "--table-cell-fontsize": cellFontSize }}
+                  >
+                    {cell}
+                  </td>
+                ))}
+              </tr>
+            ),
+          )}
+        </tbody>
+      </table>
+    );
+  }
+
+  const rowCount = Math.max(...headers.map((h) => h.content.length));
+  return (
+    <table className={tableClass} style={tableStyle} {...props}>
+      <thead>
+        <tr>
+          {headers.map(
+            (
+              { children, content, className, contentClass, style, headerBg, cellBg, headerFontSize, cellFontSize, ...props },
+              i,
+            ) => (
+              <th
+                key={i}
+                className={joinClasses(className, headerClass)}
+                style={mergeStyle(style, {
+                  "--table-header-color": headerBg,
+                  "--table-header-fontsize": headerFontSize,
+                })}
+                {...props}
+              >
+                {children}
+              </th>
+            ),
+          )}
+        </tr>
+      </thead>
+      <tbody>
+        {Array.from({ length: rowCount }, (_, rowIdx) => (
+          <tr key={rowIdx}>
+            {headers.map(
+              ({ content, children, contentClass = "", cellBg, cellFontSize, ...props }, colIdx) => (
+                <td
+                  key={colIdx}
+                  {...props}
+                  className={joinClasses(contentClass, parentContentClass)}
+                  style={{ "--table-cell-color": cellBg, "--table-cell-fontsize": cellFontSize }}
+                >
+                  {content[rowIdx]}
+                </td>
+              ),
+            )}
+          </tr>
+        ))}
+      </tbody>
+    </table>
+  );
+}

package/src/Title.module.css

@@ -0,0 +1,75 @@
+
+.h1,
+.h2,
+.h3,
+.h4,
+.h5,
+.h6 {
+  &::before {
+    float: left;
+    clear: left;
+  }
+  &[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) ". ";
+  }
+}
+
+.h2 {
+  color: var(--h2-color, inherit);
+  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) ". ";
+  }
+}
+
+.h3 {
+  color: var(--h3-color, inherit);
+  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) ". ";
+  }
+}
+
+.h4 {
+  color: var(--h4-color, inherit);
+  font-size: var(--h4-fontsize, inherit);
+  counter-reset: count-h5 count-h6;
+  counter-increment: count-h4;
+  &::before {
+    content: counter(count-h4, lower-alpha) ". ";
+  }
+}
+
+.h5 {
+  color: var(--h5-color, inherit);
+  font-size: var(--h5-fontsize, inherit);
+  counter-reset: count-h6;
+  counter-increment: count-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) ". ";
+  }
+}

package/src/Titles.tsx

@@ -0,0 +1,105 @@
+import { ComponentProps, ComponentType } from "preact";
+import styles from "./Title.module.css";
+import { joinClasses, mergeStyle } from "./utils";
+
+type Htype = "h1" | "h2" | "h3" | "h4" | "h5" | "h6";
+
+type Hprops<h extends Htype> = ComponentProps<h> & {
+  marker?: string;
+  color?: string;
+  fontSize?: string;
+};
+
+export function H1({ className = "", marker, color, fontSize, style, ...props }: Hprops<"h1">) {
+  return (
+    <h1
+      data-marker={marker}
+      className={joinClasses(className, styles.h1)}
+      style={mergeStyle(style, { "--h1-color": color, "--h1-fontsize": fontSize })}
+      {...props}
+    />
+  );
+}
+export function H2({ className = "", marker, color, fontSize, style, ...props }: Hprops<"h2">) {
+  return (
+    <h2
+      data-marker={marker}
+      className={joinClasses(className, styles.h2)}
+      style={mergeStyle(style, { "--h2-color": color, "--h2-fontsize": fontSize })}
+      {...props}
+    />
+  );
+}
+export function H3({ className = "", marker, color, fontSize, style, ...props }: Hprops<"h3">) {
+  return (
+    <h3
+      data-marker={marker}
+      className={joinClasses(className, styles.h3)}
+      style={mergeStyle(style, { "--h3-color": color, "--h3-fontsize": fontSize })}
+      {...props}
+    />
+  );
+}
+export function H4({ className = "", marker, color, fontSize, style, ...props }: Hprops<"h4">) {
+  return (
+    <h4
+      data-marker={marker}
+      className={joinClasses(className, styles.h4)}
+      style={mergeStyle(style, { "--h4-color": color, "--h4-fontsize": fontSize })}
+      {...props}
+    />
+  );
+}
+export function H5({ className = "", marker, color, fontSize, style, ...props }: Hprops<"h5">) {
+  return (
+    <h5
+      data-marker={marker}
+      className={joinClasses(className, styles.h5)}
+      style={mergeStyle(style, { "--h5-color": color, "--h5-fontsize": fontSize })}
+      {...props}
+    />
+  );
+}
+export function H6({ className = "", marker, color, fontSize, style, ...props }: Hprops<"h6">) {
+  return (
+    <h6
+      data-marker={marker}
+      className={joinClasses(className, styles.h6)}
+      style={mergeStyle(style, { "--h6-color": color, "--h6-fontsize": fontSize })}
+      {...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 function Title<h extends Htype>({ type, ...props }: TitleProps<h>) {
+  const Tag = TAG_MAP[type] as ComponentType<Hprops<h>>;
+  return <Tag {...(props as Hprops<h>)} />;
+}
+
+export function ResetCounter({
+  type,
+  value,
+}: {
+  type: Htype | Htype[];
+  value?: number | (number | null)[];
+}) {
+  const types = Array.isArray(type) ? type : [type];
+  const values = Array.isArray(value) ? value : [value];
+  return (
+    <div
+      style={{
+        counterReset: types
+          .map((t, k) =>
+            `count-${t} ${(values[k % types.length] ?? 1) - 1}`.trim(),
+          )
+          .join(" "),
+        visibility: "hidden",
+        height: 0,
+        width: 0,
+      }}
+    />
+  );
+}

package/src/index.ts

@@ -0,0 +1,9 @@
+export { Block, BlockBox } from "./BlockBox";
+export { CodeBlock } from "./CodeBlock";
+export { DotLine } from "./DotLine";
+export { Equation } from "./Equation";
+export { LI, OL, UL } from "./List";
+export { Page, PageBreak } from "./Page";
+export { Entry, Table } from "./Table";
+export { H1, H2, H3, H4, H5, H6, ResetCounter, Title } from "./Titles";
+

package/src/utils.tsx

@@ -0,0 +1,26 @@
+import { CSSProperties, SignalLike, Signalish } from "preact";
+
+export const cssString = (v: string | undefined) =>
+  v !== undefined ? `"${v}"` : undefined;
+
+export function joinClasses(
+  ...classes: (string | SignalLike<string | undefined> | undefined)[]
+): string {
+  return classes.join(" ").trim();
+}
+
+export function mergeStyle(
+  base: Signalish<string | CSSProperties | undefined>,
+  extra: CSSProperties,
+): CSSProperties | string {
+  if (typeof base === "string") {
+    const extraStr = Object.entries(extra)
+      .filter(([, v]) => v != null)
+      .map(
+        ([k, v]) => `${k.replace(/[A-Z]/g, (c) => `-${c.toLowerCase()}`)}:${v}`,
+      )
+      .join(";");
+    return extraStr ? `${base};${extraStr}` : base;
+  }
+  return { ...(base?.value as CSSProperties), ...extra };
+}