@hypen-space/web 0.4.956 → 0.4.980

package/src/canvas/layout.ts

@@ -12,6 +12,7 @@ import {
   parseSize,
   cssLengthToPx,
   cssLengthToDimension,
+  resolveLineHeight,
   setCurrentViewport,
   getCurrentViewport,
 } from "./utils.js";
@@ -179,9 +180,22 @@ function buildTaffyStyle(
   // `List` is the DSL's vertical-stack iterator (see dom/components/list.ts
   // — `flex-direction: column` is its default). Match that here so feeds
   // like Notifications stack their rows vertically instead of flowing
-  // sideways. The `direction` prop can still flip it to row.
-  const isListColumn = type === "list" && props.direction !== "horizontal";
-  const isColumn = !isStack && (type === "column" || isListColumn || props.flexDirection === "column");
+  // sideways. The legacy `direction` prop can flip it to row, and so can
+  // a Tailwind `flex-row` class which lands on `props.flexDirection`
+  // (without this, top-tab strips built as `List.flex-row` stacked
+  // vertically because the List default won the tie-break).
+  const isListColumn =
+    type === "list" &&
+    props.direction !== "horizontal" &&
+    props.flexDirection !== "row";
+  // Button defaults to `flex-direction: column` to match the DOM renderer
+  // (see dom/components/button.ts). With Taffy's default `align-items:
+  // stretch`, treating Button as a row caused inner `Column { Icon, Text }`
+  // children to collapse onto each other (icon overlapping label). Only
+  // apply the column default when no explicit `flexDirection` is set so a
+  // Tailwind `flex-row` on a button still wins.
+  const isButtonColumn = type === "button" && props.flexDirection === undefined;
+  const isColumn = !isStack && (type === "column" || isListColumn || isButtonColumn || props.flexDirection === "column");
   const isGrid = !isStack && (type === "grid" || props.display === "grid");
 
   if (isStack) {
@@ -372,7 +386,7 @@ function buildTaffyStyle(
     // Taffy defaults to `box-sizing: border-box`, so we add the
     // padding/border ourselves into `size.height`.
     const fontSize = cssLengthToPx(props.fontSize) ?? 16;
-    const lineHeight = cssLengthToPx(props.lineHeight) ?? fontSize * 1.5;
+    const lineHeight = resolveLineHeight(props.lineHeight, fontSize) ?? fontSize * 1.5;
     const minRows = type === "textarea" ? Math.max(1, Number(props.rows) || 3) : 1;
     const padTop = cssLengthToPx(props.paddingTop ?? props.padding) ?? 0;
     const padBottom = cssLengthToPx(props.paddingBottom ?? props.padding) ?? 0;
@@ -394,7 +408,30 @@ function buildTaffyStyle(
       (parent.type.toLowerCase() === "grid" || parent.props.display === "grid");
     const widthIn = parentIsGridLayout && props.width === "100%" ? undefined : props.width;
     const heightIn = parentIsGridLayout && props.height === "100%" ? undefined : props.height;
-    style.size = { width: toDimension(widthIn), height: toDimension(heightIn) };
+
+    // Mirror the DOM rule `[data-hypen-type="row"]:has(> [data-hypen-flex])
+    // { width: 100% }` (and the symmetric column case). When a flex
+    // container has no explicit main-axis size and any child opts into
+    // weighted growth (`flex` / `flexGrow > 0`), Taffy would otherwise
+    // size the container to its min-content — so a Row of `flex-1`
+    // segmented-control buttons stayed pill-sized instead of stretching
+    // across the parent. Only do this when at least one child explicitly
+    // asks for flex, matching the DOM `:has(> [data-hypen-flex])` guard.
+    const isRowContainer = !isStack && !isGrid && !isColumn;
+    const isColumnContainer = !isStack && !isGrid && isColumn;
+    const childAsksFlex = node.children.some((c) => {
+      const fg = parseFloat(c.props.flexGrow);
+      if (Number.isFinite(fg) && fg > 0) return true;
+      const f = parseFloat(c.props.flex);
+      return Number.isFinite(f) && f > 0;
+    });
+    let resolvedWidth = toDimension(widthIn);
+    let resolvedHeight = toDimension(heightIn);
+    if (childAsksFlex) {
+      if (isRowContainer && widthIn === undefined) resolvedWidth = "100%";
+      if (isColumnContainer && heightIn === undefined) resolvedHeight = "100%";
+    }
+    style.size = { width: resolvedWidth, height: resolvedHeight };
   }
 
   // --- Min / Max constraints -------------------------------------------------
@@ -769,12 +806,17 @@ function buildTree(
   // container with size 0×0, and downstream siblings were placed on top of
   // each other ("1,431 likes" overlapping the caption row was the visible
   // symptom).
-  if (node.type.toLowerCase() === "text" && props[0] && node.children.length === 0) {
-    const text = String(props[0] || "");
+  // `props[0] != null` — not `props[0]` truthy. The number `0`, the empty
+  // string, and `false` are valid text content; falsy guards here let
+  // those cases skip the measurement leaf and inherit a 0-height container,
+  // which made siblings stack on top of each other (a bound `0` overlapping
+  // the next line was the visible symptom in calorie-counter's hero).
+  if (node.type.toLowerCase() === "text" && props[0] != null && node.children.length === 0) {
+    const text = String(props[0]);
     const fontSize = cssLengthToPx(props.fontSize) ?? 16;
     const fontWeight = props.fontWeight || "normal";
     const fontFamily = props.fontFamily || "system-ui, sans-serif";
-    const lineHeight = cssLengthToPx(props.lineHeight) ?? fontSize * 1.2;
+    const lineHeight = resolveLineHeight(props.lineHeight, fontSize) ?? fontSize * 1.2;
 
     const p = parseSpacing(props.padding || 0);
     if (props.paddingTop !== undefined) p.top = cssLengthToPx(props.paddingTop) ?? 0;
@@ -1201,12 +1243,13 @@ function computeLayoutFallback(
     if (height === null) height = size;
   }
 
-  if (node.type.toLowerCase() === "text" && node.props[0]) {
-    const text = String(node.props[0] || "");
+  // Same `!= null` rule as above — `0` / `""` / `false` are valid text.
+  if (node.type.toLowerCase() === "text" && node.props[0] != null) {
+    const text = String(node.props[0]);
     const fontSize = cssLengthToPx(props.fontSize) ?? 16;
     const fontWeight = props.fontWeight || "normal";
     const fontFamily = props.fontFamily || "system-ui, sans-serif";
-    const lineHeight = cssLengthToPx(props.lineHeight) ?? fontSize * 1.2;
+    const lineHeight = resolveLineHeight(props.lineHeight, fontSize) ?? fontSize * 1.2;
 
     const maxWidth = width || availableAfterMargin.width - padding.left - padding.right;
     const maxLinesRaw = props.maxLines;

package/src/canvas/paint.ts

@@ -9,7 +9,7 @@ import { renderText } from "./text.js";
 import { ScrollManager, isScrollable } from "./scroll.js";
 import { getVisibleChildren, VIRTUALIZE_THRESHOLD } from "./virtualize.js";
 import type { SelectionManager } from "./selection.js";
-import { cssLengthToPx } from "./utils.js";
+import { cssLengthToPx, resolveLineHeight } from "./utils.js";
 
 /**
  * Module-level reference to the active SelectionManager so paintText
@@ -271,13 +271,14 @@ function paintText(ctx: CanvasRenderingContext2D, node: VirtualNode): void {
   const layout = node.layout!;
   const props = node.props;
 
-  let text = String(props[0] || props.text || "");
+  // `??` (not `||`) so a bound `0`, `false`, or `""` still renders.
+  let text = String(props[0] ?? props.text ?? "");
   const color = props.color || "#000000";
   const fontSize = cssLengthToPx(props.fontSize) ?? 16;
   const fontWeight = props.fontWeight || "normal";
   const fontFamily = props.fontFamily || "system-ui, sans-serif";
   const textAlign = props.textAlign || "left";
-  const lineHeight = cssLengthToPx(props.lineHeight) ?? fontSize * 1.2;
+  const lineHeight = resolveLineHeight(props.lineHeight, fontSize) ?? fontSize * 1.2;
   const textDecoration = props.textDecoration || "none";
   const textTransform = props.textTransform || "none";
   const letterSpacing = cssLengthToPx(props.letterSpacing) ?? 0;
@@ -474,7 +475,7 @@ function paintInput(ctx: CanvasRenderingContext2D, node: VirtualNode): void {
     const fontSize = cssLengthToPx(props.fontSize) ?? 16;
     const fontWeight = props.fontWeight || "normal";
     const fontFamily = props.fontFamily || "system-ui, sans-serif";
-    const lineHeight = cssLengthToPx(props.lineHeight) ?? fontSize * 1.2;
+    const lineHeight = resolveLineHeight(props.lineHeight, fontSize) ?? fontSize * 1.2;
 
     renderText(
       ctx,
@@ -1332,8 +1333,8 @@ function paintBadge(ctx: CanvasRenderingContext2D, node: VirtualNode): void {
   drawRoundedRect(ctx, x, y, width, height, radius);
   ctx.fill();
 
-  // Text content
-  const text = String(props[0] || props.text || "");
+  // `??` so a literal `0`/`false`/`""` value still renders.
+  const text = String(props[0] ?? props.text ?? "");
   if (text) {
     ctx.fillStyle = props.color || "#ffffff";
     ctx.font = `${props.fontWeight || "bold"} ${props.fontSize || 10}px ${props.fontFamily || "sans-serif"}`;
@@ -1368,8 +1369,8 @@ function paintAvatar(ctx: CanvasRenderingContext2D, node: VirtualNode): void {
   ctx.arc(centerX, centerY, radius, 0, Math.PI * 2);
   ctx.fill();
 
-  // Text initials if provided
-  const text = String(props[0] || props.text || props.initials || "");
+  // `??` so a literal `0`/`false`/`""` value still renders.
+  const text = String(props[0] ?? props.text ?? props.initials ?? "");
   if (text) {
     ctx.fillStyle = props.color || "#ffffff";
     ctx.font = `${props.fontWeight || "bold"} ${props.fontSize || size / 2.5}px ${props.fontFamily || "sans-serif"}`;
@@ -1509,7 +1510,8 @@ function paintLink(ctx: CanvasRenderingContext2D, node: VirtualNode): void {
   const layout = node.layout!;
   const props = node.props;
 
-  const text = String(props[0] || props.text || "");
+  // `??` so a literal `0`/`false`/`""` value still renders.
+  const text = String(props[0] ?? props.text ?? "");
   const color = node.hovered ? (props.hoverColor || "#0056b3") : (props.color || "#007bff");
   const fontSize = cssLengthToPx(props.fontSize) ?? 16;
   const fontWeight = props.fontWeight || "normal";

package/src/canvas/text.ts

@@ -191,7 +191,13 @@ export function renderText(
   ctx.save();
   ctx.font = font;
   ctx.fillStyle = style.color;
-  ctx.textBaseline = "top";
+  // Use `middle` baseline so we can position each glyph at the visual centre
+  // of its line box. With `top`, canvas draws from the top of the EM square
+  // and any extra `line-height − font-size` space lands as padding BELOW the
+  // glyph — visible as `+` inside a round FAB drifting toward the top of
+  // the circle. CSS centres glyphs within the line box; matching that
+  // requires `middle` + half-lineHeight offset.
+  ctx.textBaseline = "middle";
 
   const metrics = measureText(ctx, text, style, width, maxLines, textOverflow);
 
@@ -206,7 +212,8 @@ export function renderText(
   // Render each line
   for (let i = 0; i < metrics.lines.length; i++) {
     const line = metrics.lines[i];
-    const lineY = startY + i * metrics.lineHeight;
+    // Centre of the line box (top of line + half of line-height).
+    const lineY = startY + i * metrics.lineHeight + metrics.lineHeight / 2;
 
     // Calculate X based on text alignment
     let lineX = x;

package/src/canvas/utils.ts

@@ -86,6 +86,38 @@ export function cssLengthToPx(value: any): number | null {
   }
 }
 
+/**
+ * Resolve a CSS `line-height` value to a pixel value.
+ *
+ * Unitless numbers (e.g. `1`, `1.5`, `"1.25"`) are CSS multipliers of the
+ * font-size — `line-height: 1` (Tailwind's `leading-none`) means line box =
+ * 1 × font-size, NOT 1 pixel. Without this branch, `cssLengthToPx("1")`
+ * returned literally `1`, and a Column of `leading-none` Texts collapsed
+ * each line to 1px tall — emoji + label in a bottom-tab button rendered at
+ * the same y and overlapped.
+ *
+ * Anything with an explicit unit (`16px`, `1.5em`, `1rem`, `120%` is
+ * rejected → null since Taffy/measure expects px) falls through to
+ * `cssLengthToPx`.
+ */
+export function resolveLineHeight(value: any, fontSize: number): number | null {
+  if (value === undefined || value === null) return null;
+  if (typeof value === "number" && Number.isFinite(value)) {
+    // Unitless number: multiplier of font-size (matches CSS spec).
+    return value * fontSize;
+  }
+  if (typeof value === "string") {
+    const s = value.trim();
+    if (s === "" || s === "auto" || s === "normal") return null;
+    // Pure numeric string with no unit → unitless multiplier.
+    if (/^-?\d*\.?\d+$/.test(s)) {
+      const n = parseFloat(s);
+      return Number.isFinite(n) ? n * fontSize : null;
+    }
+  }
+  return cssLengthToPx(value);
+}
+
 /**
  * Parse a CSS length string for Taffy's Dimension type. Keeps `%` values as
  * the tagged percentage string, turns `"auto"`/empty/invalid into `"auto"`,

package/src/dom/components/badge.ts

@@ -35,7 +35,8 @@ export const badgeHandler: ComponentHandler = {
     }
 
     // Text content
-    const text = props["0"] || props.text;
+    // `??` (not `||`) so the literal `0`, `false`, `""` still render.
+    const text = props["0"] ?? props.text;
     if (text !== undefined) {
       el.textContent = String(text);
     }

package/src/dom/components/heading.ts

@@ -32,7 +32,8 @@ export const headingHandler: ComponentHandler = {
     }
 
     // Text content
-    const text = props["0"] || props.text;
+    // `??` (not `||`) so the literal `0`, `false`, `""` still render.
+    const text = props["0"] ?? props.text;
     if (text !== undefined) {
       el.textContent = String(text);
     }

package/src/dom/components/paragraph.ts

@@ -13,7 +13,8 @@ export const paragraphHandler: ComponentHandler = {
 
   applyProps(el: HTMLElement, props: Record<string, any>): void {
     // Text content
-    const text = props["0"] || props.text;
+    // `??` (not `||`) so the literal `0`, `false`, `""` still render.
+    const text = props["0"] ?? props.text;
     if (text !== undefined) {
       el.textContent = String(text);
     }

package/src/dom/components/text.ts

@@ -20,8 +20,11 @@ export const textHandler: ComponentHandler = {
   },
 
   applyProps(el: HTMLElement, props: Record<string, any>): void {
-    // Text content from first positional arg or "text" prop
-    const text = props["0"] || props.text;
+    // Text content from first positional arg or "text" prop. Use `??` (not
+    // `||`) so the literal number `0`, `false`, and the empty string still
+    // render — `||` falls through on falsy values and a bound `0` was
+    // disappearing entirely on web while iOS rendered it correctly.
+    const text = props["0"] ?? props.text;
     if (text !== undefined) {
       // Store the original text template for state interpolation
       el.dataset.textTemplate = String(text);