@uniweb/press 0.4.4 → 0.4.5

package/src/docx/PageChrome.jsx

@@ -0,0 +1,109 @@
+/**
+ * Page-chrome builders — page header, page footer, and page-number
+ * field codes.
+ *
+ * Stage 4 of kb/framework/plans/press-professional-docx.md.
+ *
+ * The underlying registration plumbing already exists in Press:
+ * `useDocumentOutput(block, 'docx', body, { role: 'header' })` lifts
+ * a fragment into the docx Section's header; `role: 'footer'` does the
+ * same for the footer. These builders are ergonomic wrappers — they
+ * give foundations a JSX shape that matches how Word documents are
+ * usually authored (a tree with PageHeader / PageFooter elements at
+ * the top level), and route the registration internally.
+ *
+ * Usage in a section component:
+ *
+ *   import {
+ *     useDocumentOutput,
+ *     useDocumentOutputAsHeader,
+ *     useDocumentOutputAsFooter,
+ *   } from '@uniweb/press'
+ *   import {
+ *     PageHeader, PageFooter, PageNumber, TotalPages,
+ *   } from '@uniweb/press/docx'
+ *
+ *   function Cover({ block }) {
+ *     useDocumentOutput(block, 'docx', body)
+ *     useDocumentOutputAsHeader(block, 'docx',
+ *       <PageHeader>
+ *         <Paragraph data-alignment="right">
+ *           <Image src="logo.png" />
+ *         </Paragraph>
+ *       </PageHeader>
+ *     )
+ *     useDocumentOutputAsFooter(block, 'docx',
+ *       <PageFooter>
+ *         <Paragraph data-alignment="center">
+ *           <TextRun>Page </TextRun><PageNumber />
+ *           <TextRun> of </TextRun><TotalPages />
+ *         </Paragraph>
+ *       </PageFooter>
+ *     )
+ *   }
+ *
+ * The PageHeader / PageFooter components are layout-transparent: they
+ * render their children inside an HTML container that the IR walker
+ * treats as a normal sequence of paragraphs. The role-based routing
+ * happens at the registration layer (useDocumentOutputAsHeader / Footer),
+ * not via element identity. This lets foundations build complex headers
+ * (multi-row layouts, brand blocks) without the IR walker needing a
+ * special "page header" type.
+ */
+
+/**
+ * Wrapper element for a page header. Renders its children with no
+ * additional structure — used as a documentation/identity hint at the
+ * top of a header tree, and to give foundations a single JSX node to
+ * pass to `useDocumentOutputAsHeader`.
+ */
+export function PageHeader({ children }) {
+    return <>{children}</>
+}
+
+/**
+ * Wrapper element for a page footer. Mirror of PageHeader.
+ */
+export function PageFooter({ children }) {
+    return <>{children}</>
+}
+
+/**
+ * The current page number, as a Word field code that updates on
+ * print/preview. Inline element — usable inside any TextRun-context
+ * (Paragraph children, table cells, etc.).
+ *
+ * The IR walker has special-cased '_currentPage' as text content
+ * since pre-Press days; we emit a TextRun-shaped span carrying
+ * exactly that sentinel so the existing pipeline turns it into a
+ * <w:fldSimple> / <w:fldChar> page reference.
+ */
+export function PageNumber() {
+    return <span data-type="text">_currentPage</span>
+}
+
+/**
+ * The total number of pages. Companion to PageNumber for "Page X of Y"
+ * footer patterns.
+ */
+export function TotalPages() {
+    return <span data-type="text">_totalPages</span>
+}
+
+/**
+ * Common page-size presets, in twips. Foundations pass these to
+ * `compile('docx', { pageSize: pageSizes.A4 })` to override Word's
+ * default. The orientation field is set separately via the
+ * `pageOrientation` compile option (or by spreading + overriding).
+ *
+ * ISO A-series and US presets are exact. Other sizes available
+ * directly through the docx library if needed.
+ */
+export const pageSizes = {
+    A4: { width: 11906, height: 16838 },        // 21.0 × 29.7 cm
+    A5: { width: 8419, height: 11906 },          // 14.8 × 21.0 cm
+    A3: { width: 16838, height: 23811 },         // 29.7 × 42.0 cm
+    LETTER: { width: 12240, height: 15840 },     // 8.5 × 11 in
+    LEGAL: { width: 12240, height: 20160 },      // 8.5 × 14 in
+    TABLOID: { width: 15840, height: 24480 },    // 11 × 17 in
+}

package/src/docx/Paragraph.jsx

@@ -11,26 +11,93 @@
  */
 import { parseStyledString } from './parseStyledString.js'
 import TextRun from './TextRun.jsx'
+import Math from './Math.jsx'
+
+/**
+ * Build the data-* attribute pairs for paragraph-level Stage-3 props.
+ * Returns a plain object that gets spread onto the rendered element.
+ */
+function paragraphPolishProps({ tabStops, indent, role }) {
+    const out = {}
+    if (Array.isArray(tabStops) && tabStops.length) {
+        out['data-tab-stops'] = JSON.stringify(tabStops)
+    }
+    if (indent && typeof indent === 'object') {
+        // Lower-cased data-* keys to match the IR attribute map.
+        if (indent.left != null) out['data-indent-left'] = indent.left
+        if (indent.right != null) out['data-indent-right'] = indent.right
+        if (indent.firstLine != null) out['data-indent-firstline'] = indent.firstLine
+        if (indent.hanging != null) out['data-indent-hanging'] = indent.hanging
+    }
+    // Stage 6.0: <Paragraph role="Title"> attaches a named OOXML
+    // paragraph style. Resolution to actual font/size/color happens
+    // through theme.typography at compile time.
+    if (typeof role === 'string' && role.length) {
+        out['data-paragraph-style'] = role
+    }
+    return out
+}
+
+/**
+ * Block-level text container with optional styled string parsing.
+ *
+ * - Without `data`: renders children directly with data-type="paragraph".
+ * - With `data`: parses the HTML string for inline marks (<strong>, <em>,
+ *   <u>) and hyperlinks (<a href="...">) and renders as styled children.
+ *
+ * @param {Object} props
+ * @param {React.ElementType} [props.as='p'] - Element to render.
+ * @param {string} [props.data] - HTML string with inline marks.
+ * @param {Array<{position:number, type?:string, leader?:string}>} [props.tabStops]
+ *   Stage 3: paragraph-level tab stops. Position is in twips; type defaults
+ *   to 'left'; leader is 'none' (default), 'dot', 'hyphen', 'underscore',
+ *   'middleDot'. Combine with `<Tab/>` (or `{'\t'}`) inside the paragraph
+ *   children to align text on the stops.
+ * @param {{left?:number,right?:number,firstLine?:number,hanging?:number}} [props.indent]
+ *   Stage 3: paragraph indentation, in twips.
+ */
+export default function Paragraph({
+    as: Tag = 'p',
+    data,
+    tabStops,
+    indent,
+    role,
+    children,
+    ...props
+}) {
+    const polish = paragraphPolishProps({ tabStops, indent, role })
 
-export default function Paragraph({ as: Tag = 'p', data, children, ...props }) {
     if (data) {
         const parts = parseStyledString(data)
 
         return (
-            <Tag data-type="paragraph" {...props}>
-                {parts.map((part, i) =>
-                    part.type === 'link' ? (
-                        <a
-                            key={i}
-                            data-type="externalHyperlink"
-                            data-link={part.href}
-                            href={part.href}
-                        >
-                            <span data-type="text" data-style="Hyperlink">
-                                {part.content}
-                            </span>
-                        </a>
-                    ) : (
+            <Tag data-type="paragraph" {...polish} {...props}>
+                {parts.map((part, i) => {
+                    if (part.type === 'link') {
+                        return (
+                            <a
+                                key={i}
+                                data-type="externalHyperlink"
+                                data-link={part.href}
+                                href={part.href}
+                            >
+                                <span data-type="text" data-style="Hyperlink">
+                                    {part.content}
+                                </span>
+                            </a>
+                        )
+                    }
+                    if (part.type === 'math') {
+                        return (
+                            <Math
+                                key={i}
+                                latex={part.latex}
+                                display={part.display}
+                                id={part.id}
+                            />
+                        )
+                    }
+                    return (
                         <TextRun
                             key={i}
                             bold={part.bold}
@@ -40,18 +107,27 @@ export default function Paragraph({ as: Tag = 'p', data, children, ...props }) {
                             {part.content}
                         </TextRun>
                     )
-                )}
+                })}
             </Tag>
         )
     }
 
     return (
-        <Tag data-type="paragraph" {...props}>
+        <Tag data-type="paragraph" {...polish} {...props}>
             {children}
         </Tag>
     )
 }
 
+/**
+ * Inline tab marker. Emits a docx Tab element that interacts with the
+ * parent paragraph's tabStops. JSX-friendly alternative to writing
+ * `{'\t'}` literally (which React's whitespace handling can swallow).
+ */
+export function Tab(props) {
+    return <span data-type="tab" {...props} />
+}
+
 /**
  * Render an array of paragraph strings. Convenience wrapper used by
  * the default Section component pattern.

package/src/docx/Table.jsx

@@ -1,11 +1,7 @@
 /**
  * Table, Tr, Td — ergonomic wrappers for Press's table vocabulary.
  *
- * Foundations that built tables before this existed hand-rolled <div>s
- * with data-type="table"/"tableRow"/"tableCell" attributes plus width,
- * margin, and border data attributes per cell. These components ship
- * sensible defaults and a shared column-widths channel, so the common
- * case reduces to:
+ * Common case (percent column widths, soft borders):
  *
  *   <Table widths={[15, 60, 25]}>
  *     <Tr header>
@@ -20,6 +16,20 @@
  *     </Tr>
  *   </Table>
  *
+ * Stage 1 of press-professional-docx adds:
+ *
+ *   - <Table columnWidths={[cm(15), cm(4), cm(1.5), cm(4)]} layout="fixed">
+ *     fixed-width columns specified in twips (use the unit helpers).
+ *   - <Table width={{ size: 100, type: 'pct' }}>
+ *     whole-table width.
+ *   - <Table borders={{ top: { style: 'single', size: 4, color: 'cccccc' }, … }}>
+ *     table-default borders. Per-cell borders still win.
+ *   - <Td shading="4775b2"> or <Td shading={{ fill: '4775b2', type: 'clear' }}>
+ *     cell background color.
+ *   - <Td valign="center"> top | center | bottom.
+ *   - <Tr header> now also marks the row as a docx tableHeader, so it
+ *     repeats at the top of each new page when the table breaks.
+ *
  * Every data-* attribute set by default can be overridden by passing the
  * same attribute on the Td — explicit spreads win. String children are
  * wrapped in a Press <Paragraph> automatically; complex cells (multiple
@@ -38,6 +48,26 @@ import {
 } from 'react'
 import Paragraph from './Paragraph.jsx'
 import TextRun from './TextRun.jsx'
+import { useDocumentTheme, resolveThemeColor } from '../ThemeContext.js'
+
+/**
+ * Run a borders object through theme color resolution. Each side's
+ * `color` key may be a hex literal or a theme key like 'softBorder'.
+ */
+function resolveBordersTheme(borders, theme) {
+    if (!borders) return borders
+    const out = {}
+    for (const [side, sideProps] of Object.entries(borders)) {
+        if (!sideProps) continue
+        out[side] = {
+            ...sideProps,
+            ...(sideProps.color
+                ? { color: resolveThemeColor(sideProps.color, theme) }
+                : {}),
+        }
+    }
+    return out
+}
 
 const TableCtx = createContext({ widths: null, borderColor: 'cccccc' })
 
@@ -45,20 +75,83 @@ const TableCtx = createContext({ widths: null, borderColor: 'cccccc' })
  * Table — the outer wrapper.
  *
  * @param {Object} props
- * @param {number[]} [props.widths] - Column widths in percent; each Td reads its
- *   width by column index. Omit to let every cell declare its own width.
- * @param {string} [props.borderColor='cccccc'] - Hex (no #) for cell borders.
+ * @param {number[]} [props.widths] - Column widths in percent. Each Td reads
+ *   its width by column index. Cell-level widths are emitted via
+ *   `data-width-size`/`data-width-type=pct`.
+ * @param {number[]} [props.columnWidths] - Column widths in twips. Sets
+ *   docx `columnWidths` for layout-aware sizing. Use the unit helpers
+ *   (cm, mm, inch, pt) to express them naturally. When set, `layout`
+ *   defaults to 'fixed' so Word doesn't redistribute columns.
+ * @param {'fixed'|'autofit'} [props.layout] - Table layout type. 'fixed'
+ *   honors columnWidths exactly; 'autofit' lets Word redistribute to
+ *   fit content. Defaults to 'fixed' when columnWidths is provided.
+ * @param {{size: number, type?: string}} [props.width] - Whole-table width.
+ *   { size, type } where type is 'pct' (percent), 'dxa' (twips), or 'auto'.
+ * @param {Object} [props.borders] - Table-default borders. Same shape as
+ *   per-cell borders: { top, bottom, left, right, insideHorizontal,
+ *   insideVertical } each with { style, size, color }.
+ * @param {string} [props.borderColor='cccccc'] - Hex (no #) for cell-level
+ *   default borders. Used by Td when no per-cell borders are set.
  */
 export function Table({
     widths,
+    columnWidths,
+    layout,
+    width,
+    borders,
     borderColor = 'cccccc',
     className,
     children,
     ...props
 }) {
+    const theme = useDocumentTheme()
+    const tableAttrs = {}
+
+    if (columnWidths && columnWidths.length) {
+        tableAttrs['data-table-column-widths'] = columnWidths.join(',')
+        // Default to fixed when the foundation gave us widths — Word
+        // otherwise redistributes them. Honor an explicit `layout` prop.
+        tableAttrs['data-table-layout'] = layout || 'fixed'
+    } else if (layout) {
+        tableAttrs['data-table-layout'] = layout
+    }
+
+    if (width) {
+        if (width.size != null) tableAttrs['data-table-width-size'] = width.size
+        tableAttrs['data-table-width-type'] = width.type ?? 'pct'
+    }
+
+    const resolvedBorders = resolveBordersTheme(borders, theme)
+    if (resolvedBorders) {
+        for (const [side, sideProps] of Object.entries(resolvedBorders)) {
+            if (!sideProps) continue
+            // The IR map uses `insideh`/`insidev` (single token) to keep
+            // attribute names parser-friendly. Translate from camelCase.
+            const sideKey =
+                side === 'insideHorizontal'
+                    ? 'insideh'
+                    : side === 'insideVertical'
+                      ? 'insidev'
+                      : side
+            if (sideProps.style)
+                tableAttrs[`data-table-borders-${sideKey}-style`] = sideProps.style
+            if (sideProps.size != null)
+                tableAttrs[`data-table-borders-${sideKey}-size`] = sideProps.size
+            if (sideProps.color)
+                tableAttrs[`data-table-borders-${sideKey}-color`] = sideProps.color
+        }
+    }
+
+    // Resolve borderColor against the theme too — it's the per-cell
+    // default border color used when a Td doesn't override.
+    const resolvedBorderColor =
+        resolveThemeColor(borderColor, theme) ?? borderColor
+
     return (
-        <TableCtx.Provider value={{ widths, borderColor }}>
-            <div data-type="table" className={className} {...props}>
+        <TableCtx.Provider
+            value={{ widths, borderColor: resolvedBorderColor, theme }}
+        >
+            <div data-type="table" className={className} {...tableAttrs} {...props}>
                 {children}
             </div>
         </TableCtx.Provider>
@@ -72,20 +165,34 @@ export function Table({
  * cell can look up its width from the Table context, and to mark cells
  * in a `header` row for the default emphasis + heavier bottom border.
  *
+ * Column-index assignment is span-aware: a <Td colSpan={3}> takes
+ * three column slots, so the next cell is at index 3, not 1. Without
+ * this, a row with a colSpan'd cell followed by a per-column-width
+ * cell would pull the wrong width from `widths={…}`.
+ *
  * @param {Object} props
- * @param {boolean} [props.header=false] - Bolds text and thickens the border.
+ * @param {boolean} [props.header=false] - Bolds text, thickens the bottom
+ *   border, and marks the row as a docx tableHeader (it repeats at the
+ *   top of each new page when the table breaks across pages).
  */
 export function Tr({ header = false, className, children, ...props }) {
-    const cells = Children.toArray(children).map((child, idx) =>
-        isValidElement(child)
-            ? cloneElement(child, {
-                  _col: child.props._col ?? idx,
-                  _header: child.props._header ?? header,
-              })
-            : child,
-    )
+    let nextCol = 0
+    const cells = Children.toArray(children).map((child) => {
+        if (!isValidElement(child)) return child
+        const col = child.props._col ?? nextCol
+        const span =
+            typeof child.props.colSpan === 'number' && child.props.colSpan > 1
+                ? child.props.colSpan
+                : 1
+        nextCol = col + span
+        return cloneElement(child, {
+            _col: col,
+            _header: child.props._header ?? header,
+        })
+    })
+    const rowAttrs = header ? { 'data-row-header': '' } : {}
     return (
-        <div data-type="tableRow" className={className} {...props}>
+        <div data-type="tableRow" className={className} {...rowAttrs} {...props}>
             {cells}
         </div>
     )
@@ -108,6 +215,12 @@ const CELL_PAD = { top: 80, bottom: 80, left: 120, right: 120 }
  * @param {number} [props.width] - Column width in percent (overrides Table.widths).
  * @param {boolean} [props.emphasis=false] - Force bold regardless of header state.
  * @param {'single'|'double'|'none'|string} [props.borderBottom] - Bottom border style.
+ * @param {string|{fill: string, type?: string, color?: string}} [props.shading] -
+ *   Cell background fill. String shorthand is the hex color (no '#'),
+ *   defaulting to a solid fill. Object form lets you set the OOXML
+ *   shading type ('clear' default = plain fill, 'pct25' / 'horzStripe' / …
+ *   for patterns).
+ * @param {'top'|'center'|'bottom'} [props.valign] - Vertical alignment of cell content.
  */
 export function Td({
     _col = 0,
@@ -115,12 +228,16 @@ export function Td({
     width,
     emphasis = false,
     borderBottom,
+    shading,
+    valign,
+    colSpan,
+    rowSpan,
     className,
     style,
     children,
     ...rest
 }) {
-    const { widths, borderColor } = useContext(TableCtx)
+    const { widths, borderColor, theme } = useContext(TableCtx)
     const colWidth = width ?? widths?.[_col]
 
     const defaults = {
@@ -140,6 +257,24 @@ export function Td({
         defaults['data-width-size'] = colWidth
         defaults['data-width-type'] = 'pct'
     }
+    if (shading) {
+        const s =
+            typeof shading === 'string' ? { fill: shading } : shading
+        const resolvedFill = resolveThemeColor(s.fill, theme)
+        const resolvedColor = resolveThemeColor(s.color, theme)
+        if (resolvedFill) defaults['data-shading-fill'] = resolvedFill
+        if (s.type) defaults['data-shading-type'] = s.type
+        if (resolvedColor) defaults['data-shading-color'] = resolvedColor
+    }
+    if (valign) {
+        defaults['data-valign'] = valign
+    }
+    if (typeof colSpan === 'number' && colSpan > 1) {
+        defaults['data-grid-span'] = colSpan
+    }
+    if (typeof rowSpan === 'number' && rowSpan > 1) {
+        defaults['data-row-span'] = rowSpan
+    }
 
     const flexStyle =
         colWidth != null

package/src/docx/TextRun.jsx

@@ -1,19 +1,98 @@
+import {
+    useDocumentTheme,
+    resolveThemeColor,
+    resolveThemeFont,
+} from '../ThemeContext.js'
+
+/**
+ * Stage 6.1 safety net. If a Date object reaches a TextRun as a
+ * child, coerce it to ISO YYYY-MM-DD before React's default
+ * stringification produces "Sat Feb 28 2026 19:00:00 GMT-0500 …".
+ *
+ * The right way to render a date is via `<DateText value={…} format="…"/>`
+ * from @uniweb/press/format, which gives the foundation control over
+ * locale and format. This safety net is the floor: a careless
+ * `<TextRun>{date}</TextRun>` produces a readable date instead of a
+ * garbage timezone string — and avoids the React 19 "Objects are not
+ * valid as a React child (found: Invalid Date)" runtime error.
+ *
+ * Walks one level of direct children. We can't use React.Children.map
+ * here because it rejects Date objects upfront (only plain objects
+ * are special-cased; Date counts as "object").
+ */
+function coerceDate(child) {
+    if (!(child instanceof Date)) return child
+    if (Number.isNaN(child.getTime())) return ''
+    const y = child.getUTCFullYear()
+    const m = String(child.getUTCMonth() + 1).padStart(2, '0')
+    const d = String(child.getUTCDate()).padStart(2, '0')
+    return `${y}-${m}-${d}`
+}
+
+function coerceDateChildren(children) {
+    if (children == null) return children
+    if (Array.isArray(children)) return children.map(coerceDate)
+    return coerceDate(children)
+}
+
 /**
  * Inline text span. Renders <span data-type="text"> with optional
- * bold/italic/underline via data attributes.
+ * bold/italic/underline + color/size/font via data attributes.
  *
  * Maps to the `text` IR node type → docx TextRun.
+ *
+ * @param {Object} props
+ * @param {boolean} [props.bold]
+ * @param {boolean} [props.italics]
+ * @param {boolean} [props.underline]
+ * @param {string} [props.color] - Hex color (with or without '#') or a
+ *   theme key ('accent', 'body', 'muted', 'softBorder'). Theme keys
+ *   resolve via the active <DocumentProvider theme={…}>; literals
+ *   pass through after stripping any leading '#'.
+ * @param {number} [props.size] - Font size in half-points (so 28pt = 56).
+ *   Use the convertPointsToHalfPoints helper to keep the doubling
+ *   intent visible in foundation code.
+ * @param {string} [props.font] - Font family name (e.g. 'Calibri') or a
+ *   theme key ('body', 'heading', 'mono').
+ * @param {string} [props.style] - Named character/paragraph style.
  */
-export default function TextRun({ children, bold, italics, underline, style, ...props }) {
+export default function TextRun({
+    children,
+    bold,
+    italics,
+    underline,
+    color,
+    size,
+    font,
+    smallCaps,
+    allCaps,
+    strike,
+    style,
+    role,
+    ...props
+}) {
+    const theme = useDocumentTheme()
+    const resolvedColor = resolveThemeColor(color, theme)
+    const resolvedFont = resolveThemeFont(font, theme)
+    // Stage 6.0: `role="Label"` references a named OOXML character
+    // style. Maps to `data-style` (the existing run-style channel).
+    // Inline overrides (color, size, bold, …) win over the style.
+    const resolvedStyle = style ?? role
     const dataProps = { 'data-type': 'text' }
     if (bold) dataProps['data-bold'] = 'true'
     if (italics) dataProps['data-italics'] = 'true'
     if (underline) dataProps['data-underline'] = 'true'
-    if (style) dataProps['data-style'] = style
+    if (resolvedColor) dataProps['data-color'] = resolvedColor
+    if (size != null) dataProps['data-size'] = size
+    if (resolvedFont) dataProps['data-font'] = resolvedFont
+    if (smallCaps) dataProps['data-smallcaps'] = 'true'
+    if (allCaps) dataProps['data-allcaps'] = 'true'
+    if (strike) dataProps['data-strike'] = 'true'
+    if (resolvedStyle) dataProps['data-style'] = resolvedStyle
 
     return (
         <span {...dataProps} {...props}>
-            {children}
+            {coerceDateChildren(children)}
         </span>
     )
 }

package/src/docx/index.js

@@ -11,10 +11,12 @@
  * '@uniweb/press/docx' does not pull in the ~3.4 MB docx library.
  */
 
-export { default as Paragraph, Paragraphs } from './Paragraph.jsx'
+export { default as Paragraph, Paragraphs, Tab } from './Paragraph.jsx'
 export { default as TextRun } from './TextRun.jsx'
 export { H1, H2, H3, H4 } from './Headings.jsx'
 export { default as Image, Images } from './Image.jsx'
+export { default as BrandLogo } from './BrandLogo.jsx'
+export { default as Math } from './Math.jsx'
 export { default as Caption } from './Caption.jsx'
 export { default as Figure } from './Figure.jsx'
 export { Table, Tr, Td } from './Table.jsx'
@@ -24,10 +26,21 @@ export { BulletList, NumberedList } from './Lists.jsx'
 export { default as TableOfContents } from './TableOfContents.jsx'
 export { default as FootnoteReference } from './FootnoteReference.jsx'
 export { default as WebOnly } from './WebOnly.jsx'
+export {
+    PageHeader,
+    PageFooter,
+    PageNumber,
+    TotalPages,
+    pageSizes,
+} from './PageChrome.jsx'
 
 export {
     convertMillimetersToTwip,
     convertCentimetersToTwip,
     convertInchesToTwip,
     convertPointsToHalfPoints,
+    cm,
+    mm,
+    inch,
+    pt,
 } from './units.js'