@hypen-space/web 0.4.82 → 0.4.84

package/src/canvas/scroll.ts

@@ -58,10 +58,36 @@ export function createScrollState(): ScrollState {
   };
 }
 
-/** Returns true if the node is configured as a scrollable container. */
+/** Returns true if the node is configured as a scrollable container.
+ *
+ * Accepts both forms the engine and user code emit:
+ *   - `overflow: "scroll" | "auto"` — CSS-style (DOM parity)
+ *   - `scrollable: true | "vertical" | "horizontal" | "both"` — Hypen DSL form
+ */
 export function isScrollable(node: VirtualNode): boolean {
+  const axes = getScrollAxes(node);
+  return axes.x || axes.y;
+}
+
+/**
+ * Resolve which axes a node is allowed to scroll on.
+ *
+ * `scrollable: "horizontal"` means a horizontal strip — the user expects
+ * vertical drags / wheel events to bubble out, and content overflowing the
+ * Y axis must NOT inflate scrollHeight (otherwise the strip jitters
+ * vertically on touch).
+ */
+export function getScrollAxes(node: VirtualNode): { x: boolean; y: boolean } {
   const overflow = node.props.overflow;
-  return overflow === "scroll" || overflow === "auto";
+  if (overflow === "scroll" || overflow === "auto") return { x: true, y: true };
+  const scrollable = node.props.scrollable;
+  if (scrollable === true) return { x: true, y: true };
+  if (typeof scrollable === "string") {
+    if (scrollable === "horizontal") return { x: true, y: false };
+    if (scrollable === "vertical") return { x: false, y: true };
+    if (scrollable === "both") return { x: true, y: true };
+  }
+  return { x: false, y: false };
 }
 
 /** Ensure a scroll state is attached; returns the (possibly new) state. */
@@ -165,12 +191,13 @@ export class ScrollManager {
   // -------------------------------------------------------------------------
 
   private canvasPoint(clientX: number, clientY: number): Point {
+    // Logical CSS pixels — layout is in logical units (the renderer scales the
+    // ctx by dpr once at setup), so hit tests must match. See the same note in
+    // `events.ts#getCanvasCoordinates`.
     const rect = this.canvas.getBoundingClientRect();
-    const scaleX = this.canvas.width / rect.width;
-    const scaleY = this.canvas.height / rect.height;
     return {
-      x: (clientX - rect.left) * scaleX,
-      y: (clientY - rect.top) * scaleY,
+      x: clientX - rect.left,
+      y: clientY - rect.top,
     };
   }
 
@@ -234,12 +261,13 @@ export class ScrollManager {
   ): boolean {
     const ss = node.scrollState;
     if (!ss) return false;
+    const axes = getScrollAxes(node);
     const { maxX, maxY } = maxScroll(node);
 
-    if (dy < 0 && ss.scrollY > 0) return true;
-    if (dy > 0 && ss.scrollY < maxY) return true;
-    if (dx < 0 && ss.scrollX > 0) return true;
-    if (dx > 0 && ss.scrollX < maxX) return true;
+    if (axes.y && dy < 0 && ss.scrollY > 0) return true;
+    if (axes.y && dy > 0 && ss.scrollY < maxY) return true;
+    if (axes.x && dx < 0 && ss.scrollX > 0) return true;
+    if (axes.x && dx > 0 && ss.scrollX < maxX) return true;
 
     return false;
   }
@@ -264,10 +292,11 @@ export class ScrollManager {
     if (!target) return;
 
     const ss = ensureScrollState(target);
+    const axes = getScrollAxes(target);
     const { maxX, maxY } = maxScroll(target);
 
-    const canScrollX = maxX > 0;
-    const canScrollY = maxY > 0;
+    const canScrollX = axes.x && maxX > 0;
+    const canScrollY = axes.y && maxY > 0;
     if (!canScrollX && !canScrollY) return;
 
     if (canScrollY) {
@@ -364,16 +393,14 @@ export class ScrollManager {
     if (!node) return;
 
     const ss = ensureScrollState(node);
+    const axes = getScrollAxes(node);
     const { maxX, maxY } = maxScroll(node);
     const now = performance.now();
     const dt = now - this.lastPointerTime;
 
-    const rect = this.canvas.getBoundingClientRect();
-    const scaleX = this.canvas.width / rect.width;
-    const scaleY = this.canvas.height / rect.height;
-
-    const dx = -(clientX - this.lastPointerX) * scaleX;
-    const dy = -(clientY - this.lastPointerY) * scaleY;
+    // Logical pixel deltas — layout (and scroll bounds) live in logical units.
+    const dx = axes.x ? -(clientX - this.lastPointerX) : 0;
+    const dy = axes.y ? -(clientY - this.lastPointerY) : 0;
 
     ss.scrollX = clampScroll(ss.scrollX + dx, maxX, true);
     ss.scrollY = clampScroll(ss.scrollY + dy, maxY, true);
@@ -626,7 +653,8 @@ export class ScrollManager {
       ScrollManager.updateScrollBounds(child);
     }
 
-    if (!isScrollable(node)) return;
+    const axes = getScrollAxes(node);
+    if (!axes.x && !axes.y) return;
 
     const ss = ensureScrollState(node);
     let maxRight = 0;
@@ -641,8 +669,11 @@ export class ScrollManager {
       maxBottom = Math.max(maxBottom, relY + child.layout.height + child.layout.margin.bottom);
     }
 
-    ss.scrollWidth = maxRight;
-    ss.scrollHeight = maxBottom;
+    // Cap content size to the viewport on disabled axes — otherwise a
+    // horizontal strip with tall children would report a phantom scrollHeight
+    // and the touch handler would let users drag vertically into nothing.
+    ss.scrollWidth = axes.x ? maxRight : Math.min(maxRight, node.layout.contentWidth);
+    ss.scrollHeight = axes.y ? maxBottom : Math.min(maxBottom, node.layout.contentHeight);
 
     // Clamp current scroll to new bounds
     const { maxX, maxY } = maxScroll(node);
@@ -677,8 +708,15 @@ export class ScrollManager {
 // ---------------------------------------------------------------------------
 
 /**
- * Get absolute bounds for a node, accounting for scroll offsets of all
- * ancestors. This is the scroll-aware replacement for getAbsoluteBounds.
+ * Get the on-screen bounds for a node, accounting for scroll offsets of all
+ * ancestors. `node.layout.{x,y}` is already absolute (computed in
+ * `writeLayout` for the Taffy path and the fallback equivalent), so we only
+ * need to subtract each scrollable ancestor's offset — the same translation
+ * the paint pipeline applies via `ctx.translate(-scrollX, -scrollY)`.
+ *
+ * NOTE: an earlier version walked up to add `current.layout.contentX`,
+ * which double-counted the parent's padding+border. That made hit testing
+ * land on the wrong node any time content was nested more than a level deep.
  */
 export function getScrollAwareBounds(node: VirtualNode): Rectangle | null {
   if (!node.layout) return null;
@@ -687,16 +725,11 @@ export function getScrollAwareBounds(node: VirtualNode): Rectangle | null {
   let y = node.layout.y;
 
   let current = node.parent;
-  while (current && current.layout) {
-    x += current.layout.contentX;
-    y += current.layout.contentY;
-
-    // Apply ancestor scroll offset
+  while (current) {
     if (current.scrollState) {
       x -= current.scrollState.scrollX;
       y -= current.scrollState.scrollY;
     }
-
     current = current.parent;
   }
 

package/src/canvas/selection.ts

@@ -101,12 +101,11 @@ export class SelectionManager {
   // -------------------------------------------------------------------------
 
   private canvasPoint(e: MouseEvent): Point {
+    // Logical CSS pixels — same convention as `events.ts#getCanvasCoordinates`.
     const rect = this.canvas.getBoundingClientRect();
-    const scaleX = this.canvas.width / rect.width;
-    const scaleY = this.canvas.height / rect.height;
     return {
-      x: (e.clientX - rect.left) * scaleX,
-      y: (e.clientY - rect.top) * scaleY,
+      x: e.clientX - rect.left,
+      y: e.clientY - rect.top,
     };
   }
 

package/src/canvas/utils.ts

@@ -6,6 +6,65 @@
 
 import type { BoxSpacing, Rectangle, Point, VirtualNode } from "./types.js";
 
+// Pixel equivalent for 1rem (and 1em, which we approximate the same without a
+// real inheritance chain). The engine emits Tailwind values — `0.75rem`,
+// `1rem`, `3.5rem` — and any earlier `parseFloat` path was stripping the unit
+// and treating `3.5rem` as 3.5px, collapsing whole layouts to 1/16 size.
+const ROOT_FONT_PX = 16;
+
+/**
+ * Parse a CSS length string (or number) into pixels.
+ * Returns `null` for `"auto"` or unparseable input; returns `null` for `%`
+ * values so callers can decide whether to keep the percentage verbatim or
+ * fall back to 0.
+ */
+export function cssLengthToPx(value: any): number | null {
+  if (typeof value === "number") return Number.isFinite(value) ? value : null;
+  if (typeof value !== "string") return null;
+  const s = value.trim();
+  if (s === "" || s === "auto") return null;
+  if (s.endsWith("%")) return null;
+  const match = s.match(/^(-?\d*\.?\d+)\s*([a-zA-Z]+)?$/);
+  if (!match) return null;
+  const n = parseFloat(match[1]);
+  if (!Number.isFinite(n)) return null;
+  const unit = (match[2] || "px").toLowerCase();
+  switch (unit) {
+    case "px": return n;
+    case "rem":
+    case "em": return n * ROOT_FONT_PX;
+    // We don't have a viewport reference here; treat vw/vh as unitless px
+    // fallback so the layout gets _some_ numeric value rather than zero.
+    case "vw":
+    case "vh": return n;
+    // Point/pica — rarely seen from the engine but honoured for completeness.
+    case "pt": return n * (96 / 72);
+    case "pc": return n * 16;
+    case "in": return n * 96;
+    case "cm": return n * (96 / 2.54);
+    case "mm": return n * (96 / 25.4);
+    default: return n;
+  }
+}
+
+/**
+ * Parse a CSS length string for Taffy's Dimension type. Keeps `%` values as
+ * the tagged percentage string, turns `"auto"`/empty/invalid into `"auto"`,
+ * converts everything else (including rem/em) through `cssLengthToPx`.
+ */
+export function cssLengthToDimension(value: any): "auto" | number | `${number}%` {
+  if (value === undefined || value === null || value === "auto") return "auto";
+  if (typeof value === "number") return Number.isFinite(value) ? value : "auto";
+  if (typeof value === "string") {
+    const s = value.trim();
+    if (s === "" || s === "auto") return "auto";
+    if (s.endsWith("%")) return s as `${number}%`;
+    const px = cssLengthToPx(s);
+    return px !== null ? px : "auto";
+  }
+  return "auto";
+}
+
 /**
  * Parse spacing value (margin, padding).
  *
@@ -22,7 +81,7 @@ export function parseSpacing(value: any): BoxSpacing {
   }
 
   if (typeof value === "string") {
-    const parts = value.split(/\s+/).map((v) => parseFloat(v) || 0);
+    const parts = value.split(/\s+/).map((v) => cssLengthToPx(v) ?? 0);
     return spacingFromArray(parts);
   }
 
@@ -35,17 +94,17 @@ export function parseSpacing(value: any): BoxSpacing {
       value.left !== undefined
     ) {
       return {
-        top: parseFloat(value.top) || 0,
-        right: parseFloat(value.right) || 0,
-        bottom: parseFloat(value.bottom) || 0,
-        left: parseFloat(value.left) || 0,
+        top: cssLengthToPx(value.top) ?? 0,
+        right: cssLengthToPx(value.right) ?? 0,
+        bottom: cssLengthToPx(value.bottom) ?? 0,
+        left: cssLengthToPx(value.left) ?? 0,
       };
     }
 
     // Positional form: walk contiguous "0", "1", … keys.
     const args: number[] = [];
     for (let i = 0; value[String(i)] !== undefined; i++) {
-      args.push(parseFloat(value[String(i)]) || 0);
+      args.push(cssLengthToPx(value[String(i)]) ?? 0);
     }
     if (args.length > 0) {
       return spacingFromArray(args);
@@ -71,17 +130,12 @@ function spacingFromArray(parts: number[]): BoxSpacing {
 }
 
 /**
- * Parse size value (width, height)
- * Returns pixel value or null for "auto"
+ * Parse size value (width, height) into pixels.
+ * Returns `null` for `"auto"`, percentages, or unparseable input — callers
+ * that want to keep the percentage form should use `cssLengthToDimension`.
  */
 export function parseSize(value: any): number | null {
-  if (typeof value === "number") return value;
-  if (typeof value === "string") {
-    if (value === "auto") return null;
-    const num = parseFloat(value);
-    return isNaN(num) ? null : num;
-  }
-  return null;
+  return cssLengthToPx(value);
 }
 
 /**
@@ -109,8 +163,12 @@ export function isPointInRoundedRect(
   // Quick reject if outside bounding box
   if (!isPointInRect(point, rect)) return false;
 
-  // No radius means simple rectangle
+  // No radius means simple rectangle. Clamp the radius to the box, since
+  // Tailwind's `rounded-full` arrives as 9999 — without clamping, the
+  // corner-test math thinks the corners are far outside the box and
+  // mis-classifies hits.
   if (radius <= 0) return true;
+  radius = Math.min(radius, width / 2, height / 2);
 
   const px = point.x;
   const py = point.y;
@@ -212,25 +270,19 @@ export function findNodeById(root: VirtualNode, id: string): VirtualNode | null
 }
 
 /**
- * Get absolute bounds of node (including transformations)
+ * Get absolute bounds of a node. `node.layout.{x,y}` is already absolute
+ * (the layout pass writes parent.absX + child.x in both the Taffy and JS
+ * fallback paths), so this is a thin wrapper for callers that work in
+ * `Rectangle` shape.
+ *
+ * Use `getScrollAwareBounds` (in `scroll.ts`) when ancestor scroll offsets
+ * matter — e.g. for hit testing.
  */
 export function getAbsoluteBounds(node: VirtualNode): Rectangle | null {
   if (!node.layout) return null;
-
-  let x = node.layout.x;
-  let y = node.layout.y;
-
-  // Walk up tree to accumulate offsets
-  let current = node.parent;
-  while (current && current.layout) {
-    x += current.layout.contentX;
-    y += current.layout.contentY;
-    current = current.parent;
-  }
-
   return {
-    x,
-    y,
+    x: node.layout.x,
+    y: node.layout.y,
     width: node.layout.width,
     height: node.layout.height,
   };

package/src/dom/applicators/border.ts

@@ -44,6 +44,15 @@ export const borderHandlers: Record<string, ApplicatorHandler> = {
 
   borderWidth: (el, value) => {
     el.style.borderWidth = typeof value === "number" ? `${value}px` : String(value);
+    // CSS `border-style` default is `none`, so a width-only border draws
+    // nothing. The Hypen DSL writes `.borderWidth(2).borderColor(...)`
+    // expecting a visible stroke (the social Stories ring + the Profile
+    // page Edit button). Override `none` too — the Button component
+    // resets `border: none` at create time, so the inherited
+    // border-style is "none" by the time this applicator lands.
+    if (!el.style.borderStyle || el.style.borderStyle === "none") {
+      el.style.borderStyle = "solid";
+    }
   },
 
   borderStyle: (el, value) => {

package/src/dom/applicators/font.ts

@@ -89,7 +89,22 @@ export const fontHandlers: Record<string, ApplicatorHandler> = {
   },
 
   textAlign: (el, value) => {
-    el.style.textAlign = String(value);
+    const v = String(value);
+    el.style.textAlign = v;
+    // `text-align: center | right | end | justify` only takes visible
+    // effect when the box is wider than the text. Hypen's Text defaults
+    // to `inline-block` (shrink-to-fit), so without this an author
+    // writing `Text("Edit Profile").tw("text-center")` saw the same
+    // left-flush text whether they set `text-center` or not (the
+    // social Profile page Edit button). Stretch the box across its
+    // flex parent and switch to block so the alignment has room to act.
+    if (v === "center" || v === "right" || v === "end" || v === "justify") {
+      if (!el.style.alignSelf) el.style.alignSelf = "stretch";
+      if (!el.style.width) el.style.width = "100%";
+      if (el.style.display === "inline-block" || !el.style.display) {
+        el.style.display = "block";
+      }
+    }
   },
 
   lineHeight: (el, value) => {

package/src/dom/applicators/layout.ts

@@ -104,14 +104,24 @@ export const layoutHandlers: Record<string, ApplicatorHandler> = {
   // Use .weight(1) to make element take remaining space in Row/Column
   weight: (el, value) => {
     el.style.flex = String(value);
-    // Mark element as having flex for CSS parent detection
+    // CSS sets `min-width/min-height: auto` (= min-content) on flex items by
+    // default, so a flex-1 child can never shrink below its intrinsic
+    // content size — meaning a 20,000-tall feed inside a 900px viewport
+    // overflowed because HomePage's `flex-1` couldn't shrink. The classic
+    // CSS workaround is `min-*: 0`. Apply it here so authors don't need to
+    // remember; explicit user `minWidth`/`minHeight` overrides it (the
+    // applicator runs after `weight`/`flex`).
+    if (!el.style.minWidth) el.style.minWidth = "0";
+    if (!el.style.minHeight) el.style.minHeight = "0";
     el.dataset.hypenFlex = "true";
   },
 
   // flex: CSS flex shorthand (kept for CSS compatibility)
   flex: (el, value) => {
     el.style.flex = String(value);
-    // Mark element as having flex for CSS parent detection
+    // See note on `weight` above — flex children need `min-*: 0` to shrink.
+    if (!el.style.minWidth) el.style.minWidth = "0";
+    if (!el.style.minHeight) el.style.minHeight = "0";
     el.dataset.hypenFlex = "true";
   },
 
@@ -132,18 +142,35 @@ export const layoutHandlers: Record<string, ApplicatorHandler> = {
   },
 
   scrollable: (el, value) => {
-    if (value === true || value === "true") {
+    // CSS spec: setting `overflow-x` to a non-visible value forces
+    // `overflow-y: auto` (and vice versa) — you can't mix `visible` with
+    // a scrolling axis. That combo makes the element a scroll container
+    // on both axes, and flex items with overflow get `min-height: auto`
+    // collapsed to 0, so a `scrollable("horizontal")` row inside a
+    // flex-column parent (the social Stories carousel) shrank to just
+    // its padding (18 tall) instead of hugging its 92-tall avatars. We
+    // pin `min-height`/`min-width` to `fit-content` on the non-scroll
+    // axis so the intrinsic size survives.
+    if (value === true || value === "true" || value === "both") {
       el.style.overflow = "auto";
     } else if (value === false || value === "false") {
       el.style.overflow = "hidden";
     } else if (value === "vertical") {
-      el.style.overflowX = "hidden";
       el.style.overflowY = "auto";
+      if (!el.style.minWidth) el.style.minWidth = "fit-content";
     } else if (value === "horizontal") {
       el.style.overflowX = "auto";
-      el.style.overflowY = "hidden";
-    } else if (value === "both") {
-      el.style.overflow = "auto";
+      if (!el.style.minHeight) el.style.minHeight = "fit-content";
+      // A flex-column parent with `align-items: flex-start` (our Column
+      // default, matching iOS/Android "wrap to content") leaves a child
+      // row at its natural width — so a 5×96 carousel was 498 wide inside
+      // a 470 viewport and the whole page scrolled horizontally. Force
+      // the scroll container to fit the parent's cross-axis and clamp at
+      // that width so the overflow is trapped inside.
+      if (!el.style.alignSelf) el.style.alignSelf = "stretch";
+      if (!el.style.width) el.style.width = "100%";
+      if (!el.style.maxWidth) el.style.maxWidth = "100%";
+      if (!el.style.minWidth) el.style.minWidth = "0";
     } else {
       el.style.overflow = String(value);
     }

package/src/dom/applicators/margin.ts

@@ -4,33 +4,13 @@
 
 import type { ApplicatorHandler } from "./types.js";
 
-// Helper to extract numeric value from applicator value
-const getNumericValue = (value: any): number | null => {
-  if (typeof value === "number") return value;
-  if (typeof value === "object" && value["0"] !== undefined) return Number(value["0"]);
-  if (typeof value === "string") return parseFloat(value);
-  return null;
-};
-
-// Extract a CSS length value, supporting numbers, strings ("auto", "10px",
-// percentages), or `{0: value}` positional form. Returns null if no value.
-const getCssLengthValue = (value: any): string | null => {
-  if (value === null || value === undefined) return null;
-  if (typeof value === "number") return `${value}px`;
-  if (typeof value === "string") return value;
-  if (typeof value === "object") {
-    if (value["0"] !== undefined) {
-      const inner = value["0"];
-      if (typeof inner === "number") return `${inner}px`;
-      if (typeof inner === "string") return inner;
-    }
-  }
-  return null;
-};
-
-// Format a value as a CSS length: numbers become "Npx", strings pass through
+// Format a value as a CSS length: numbers become "Npx", strings pass through.
+// Same caveat as `padding.ts#toCssLength`: rem/em/% values must survive,
+// otherwise `parseFloat("0.5rem")` collapses to literal `0.5px`.
 const toCssLength = (v: any): string => {
+  if (v == null) return "";
   if (typeof v === "number") return `${v}px`;
+  if (typeof v === "object" && v["0"] !== undefined) return toCssLength(v["0"]);
   return String(v);
 };
 
@@ -77,38 +57,31 @@ export const marginHandler: ApplicatorHandler = (el, value) => {
 };
 
 // Directional margin handlers for .marginTop(8), .marginBottom(8), etc.
+// All routed through `toCssLength` so `rem` / `em` / `%` units survive.
 export const marginTopHandler: ApplicatorHandler = (el, value) => {
-  const v = getNumericValue(value);
-  if (v !== null) el.style.marginTop = `${v}px`;
+  el.style.marginTop = toCssLength(value);
 };
 
 export const marginBottomHandler: ApplicatorHandler = (el, value) => {
-  const v = getNumericValue(value);
-  if (v !== null) el.style.marginBottom = `${v}px`;
+  el.style.marginBottom = toCssLength(value);
 };
 
 export const marginLeftHandler: ApplicatorHandler = (el, value) => {
-  const v = getNumericValue(value);
-  if (v !== null) el.style.marginLeft = `${v}px`;
+  el.style.marginLeft = toCssLength(value);
 };
 
 export const marginRightHandler: ApplicatorHandler = (el, value) => {
-  const v = getNumericValue(value);
-  if (v !== null) el.style.marginRight = `${v}px`;
+  el.style.marginRight = toCssLength(value);
 };
 
 export const marginHorizontalHandler: ApplicatorHandler = (el, value) => {
-  const v = getNumericValue(value);
-  if (v !== null) {
-    el.style.marginLeft = `${v}px`;
-    el.style.marginRight = `${v}px`;
-  }
+  const css = toCssLength(value);
+  el.style.marginLeft = css;
+  el.style.marginRight = css;
 };
 
 export const marginVerticalHandler: ApplicatorHandler = (el, value) => {
-  const v = getNumericValue(value);
-  if (v !== null) {
-    el.style.marginTop = `${v}px`;
-    el.style.marginBottom = `${v}px`;
-  }
+  const css = toCssLength(value);
+  el.style.marginTop = css;
+  el.style.marginBottom = css;
 };

package/src/dom/applicators/padding.ts

@@ -4,17 +4,16 @@
 
 import type { ApplicatorHandler } from "./types.js";
 
-// Helper to extract numeric value from applicator value
-const getNumericValue = (value: any): number | null => {
-  if (typeof value === "number") return value;
-  if (typeof value === "object" && value["0"] !== undefined) return Number(value["0"]);
-  if (typeof value === "string") return parseFloat(value);
-  return null;
-};
-
-// Format a value as a CSS length: numbers become "Npx", strings pass through
+// Format a value as a CSS length: numbers become "Npx", strings pass through.
+// Strings come through verbatim because the Tailwind→CSS pipeline emits
+// values like `"0.5rem"` (= py-2) or `"1rem"` (= px-4); stripping the unit
+// via `parseFloat` collapsed them to literal `0.5px` / `1px` and the
+// social feed rendered with no usable spacing (avatars touched the
+// container edges, the BottomNav fell off-screen, etc.).
 const toCssLength = (v: any): string => {
+  if (v == null) return "";
   if (typeof v === "number") return `${v}px`;
+  if (typeof v === "object" && v["0"] !== undefined) return toCssLength(v["0"]);
   return String(v);
 };
 
@@ -65,38 +64,31 @@ export const paddingHandler: ApplicatorHandler = (el, value) => {
 };
 
 // Directional padding handlers for .paddingTop(8), .paddingBottom(8), etc.
+// All routed through `toCssLength` so `rem` / `em` / `%` units survive.
 export const paddingTopHandler: ApplicatorHandler = (el, value) => {
-  const v = getNumericValue(value);
-  if (v !== null) el.style.paddingTop = `${v}px`;
+  el.style.paddingTop = toCssLength(value);
 };
 
 export const paddingBottomHandler: ApplicatorHandler = (el, value) => {
-  const v = getNumericValue(value);
-  if (v !== null) el.style.paddingBottom = `${v}px`;
+  el.style.paddingBottom = toCssLength(value);
 };
 
 export const paddingLeftHandler: ApplicatorHandler = (el, value) => {
-  const v = getNumericValue(value);
-  if (v !== null) el.style.paddingLeft = `${v}px`;
+  el.style.paddingLeft = toCssLength(value);
 };
 
 export const paddingRightHandler: ApplicatorHandler = (el, value) => {
-  const v = getNumericValue(value);
-  if (v !== null) el.style.paddingRight = `${v}px`;
+  el.style.paddingRight = toCssLength(value);
 };
 
 export const paddingHorizontalHandler: ApplicatorHandler = (el, value) => {
-  const v = getNumericValue(value);
-  if (v !== null) {
-    el.style.paddingLeft = `${v}px`;
-    el.style.paddingRight = `${v}px`;
-  }
+  const css = toCssLength(value);
+  el.style.paddingLeft = css;
+  el.style.paddingRight = css;
 };
 
 export const paddingVerticalHandler: ApplicatorHandler = (el, value) => {
-  const v = getNumericValue(value);
-  if (v !== null) {
-    el.style.paddingTop = `${v}px`;
-    el.style.paddingBottom = `${v}px`;
-  }
+  const css = toCssLength(value);
+  el.style.paddingTop = css;
+  el.style.paddingBottom = css;
 };

package/src/dom/applicators/typography.ts

@@ -6,7 +6,17 @@ import type { ApplicatorHandler } from "./types.js";
 
 export const typographyHandlers: Record<string, ApplicatorHandler> = {
   textAlign: (el, value) => {
-    el.style.textAlign = String(value);
+    const v = String(value);
+    el.style.textAlign = v;
+    // Mirror `font.ts#textAlign`: stretch + block so non-left alignments
+    // actually have room to act in a shrink-to-fit `Text` element.
+    if (v === "center" || v === "right" || v === "end" || v === "justify") {
+      if (!el.style.alignSelf) el.style.alignSelf = "stretch";
+      if (!el.style.width) el.style.width = "100%";
+      if (el.style.display === "inline-block" || !el.style.display) {
+        el.style.display = "block";
+      }
+    }
   },
 
   textTransform: (el, value) => {