@hypen-space/web 0.4.946 → 0.4.948

package/src/dom/applicators/advanced-layout.ts

@@ -4,6 +4,7 @@
 
 import type { ApplicatorHandler } from "./index.js";
 import { mapAlignmentValue } from "./layout.js";
+import { toCssLength } from "./size.js";
 
 export const advancedLayoutHandlers: Record<string, ApplicatorHandler> = {
   // Flexbox properties
@@ -12,7 +13,7 @@ export const advancedLayoutHandlers: Record<string, ApplicatorHandler> = {
   },
 
   flexBasis: (el, value) => {
-    el.style.flexBasis = typeof value === "number" ? `${value}px` : String(value);
+    el.style.flexBasis = toCssLength(value);
   },
 
   alignContent: (el, value) => {
@@ -80,11 +81,11 @@ export const advancedLayoutHandlers: Record<string, ApplicatorHandler> = {
   },
 
   rowGap: (el, value) => {
-    el.style.rowGap = typeof value === "number" ? `${value}px` : String(value);
+    el.style.rowGap = toCssLength(value);
   },
 
   columnGap: (el, value) => {
-    el.style.columnGap = typeof value === "number" ? `${value}px` : String(value);
+    el.style.columnGap = toCssLength(value);
   },
 
   placeItems: (el, value) => {
@@ -105,23 +106,23 @@ export const advancedLayoutHandlers: Record<string, ApplicatorHandler> = {
   },
 
   top: (el, value) => {
-    el.style.top = typeof value === "number" ? `${value}px` : String(value);
+    el.style.top = toCssLength(value);
   },
 
   right: (el, value) => {
-    el.style.right = typeof value === "number" ? `${value}px` : String(value);
+    el.style.right = toCssLength(value);
   },
 
   bottom: (el, value) => {
-    el.style.bottom = typeof value === "number" ? `${value}px` : String(value);
+    el.style.bottom = toCssLength(value);
   },
 
   left: (el, value) => {
-    el.style.left = typeof value === "number" ? `${value}px` : String(value);
+    el.style.left = toCssLength(value);
   },
 
   inset: (el, value) => {
-    el.style.inset = typeof value === "number" ? `${value}px` : String(value);
+    el.style.inset = toCssLength(value);
   },
 
   zIndex: (el, value) => {

package/src/dom/applicators/border.ts

@@ -3,6 +3,7 @@
  */
 
 import type { ApplicatorHandler } from "./types.js";
+import { toCssLength } from "./size.js";
 
 export const borderHandlers: Record<string, ApplicatorHandler> = {
   // Compound border applicator - can take width, color, style, radius
@@ -16,7 +17,7 @@ export const borderHandlers: Record<string, ApplicatorHandler> = {
 
       // Width
       if (obj.width !== undefined) {
-        el.style.borderWidth = typeof obj.width === "number" ? `${obj.width}px` : String(obj.width);
+        el.style.borderWidth = toCssLength(obj.width);
       }
 
       // Color
@@ -34,7 +35,7 @@ export const borderHandlers: Record<string, ApplicatorHandler> = {
 
       // Radius
       if (obj.radius !== undefined) {
-        el.style.borderRadius = typeof obj.radius === "number" ? `${obj.radius}px` : String(obj.radius);
+        el.style.borderRadius = toCssLength(obj.radius);
       }
     } else if (typeof value === "string") {
       // CSS shorthand like "1px solid black"
@@ -43,7 +44,7 @@ export const borderHandlers: Record<string, ApplicatorHandler> = {
   },
 
   borderWidth: (el, value) => {
-    el.style.borderWidth = typeof value === "number" ? `${value}px` : String(value);
+    el.style.borderWidth = toCssLength(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
@@ -60,38 +61,30 @@ export const borderHandlers: Record<string, ApplicatorHandler> = {
   },
 
   borderRadius: (el, value) => {
-    if (typeof value === "number") {
-      el.style.borderRadius = `${value}px`;
-    } else if (typeof value === "object" && value !== null) {
+    if (typeof value === "object" && value !== null) {
       // Support for individual corners
       const obj = value as Record<string, any>;
       const topLeft = obj.topLeft ?? obj.topStart ?? 0;
       const topRight = obj.topRight ?? obj.topEnd ?? 0;
       const bottomRight = obj.bottomRight ?? obj.bottomEnd ?? 0;
       const bottomLeft = obj.bottomLeft ?? obj.bottomStart ?? 0;
-
-      const formatValue = (v: any) => typeof v === "number" ? `${v}px` : String(v);
-      el.style.borderRadius = `${formatValue(topLeft)} ${formatValue(topRight)} ${formatValue(bottomRight)} ${formatValue(bottomLeft)}`;
+      el.style.borderRadius = `${toCssLength(topLeft)} ${toCssLength(topRight)} ${toCssLength(bottomRight)} ${toCssLength(bottomLeft)}`;
     } else {
-      el.style.borderRadius = String(value);
+      el.style.borderRadius = toCssLength(value);
     }
   },
 
   // Alias for borderRadius (Compose naming)
   cornerRadius: (el, value) => {
-    if (typeof value === "number") {
-      el.style.borderRadius = `${value}px`;
-    } else if (typeof value === "object" && value !== null) {
+    if (typeof value === "object" && value !== null) {
       const obj = value as Record<string, any>;
       const topLeft = obj.topLeft ?? obj.topStart ?? 0;
       const topRight = obj.topRight ?? obj.topEnd ?? 0;
       const bottomRight = obj.bottomRight ?? obj.bottomEnd ?? 0;
       const bottomLeft = obj.bottomLeft ?? obj.bottomStart ?? 0;
-
-      const formatValue = (v: any) => typeof v === "number" ? `${v}px` : String(v);
-      el.style.borderRadius = `${formatValue(topLeft)} ${formatValue(topRight)} ${formatValue(bottomRight)} ${formatValue(bottomLeft)}`;
+      el.style.borderRadius = `${toCssLength(topLeft)} ${toCssLength(topRight)} ${toCssLength(bottomRight)} ${toCssLength(bottomLeft)}`;
     } else {
-      el.style.borderRadius = String(value);
+      el.style.borderRadius = toCssLength(value);
     }
   },
 };

package/src/dom/applicators/effects.ts

@@ -3,6 +3,7 @@
  */
 
 import type { ApplicatorHandler } from "./types.js";
+import { toCssLength } from "./size.js";
 
 export const effectsHandlers: Record<string, ApplicatorHandler> = {
   // Shadow effects
@@ -12,10 +13,10 @@ export const effectsHandlers: Record<string, ApplicatorHandler> = {
     } else if (typeof value === "object" && value !== null) {
       // Object format: { x, y, blur, spread, color, inset }
       const obj = value as Record<string, any>;
-      const x = typeof obj.x === "number" ? `${obj.x}px` : (obj.x ?? obj.offsetX ?? "0px");
-      const y = typeof obj.y === "number" ? `${obj.y}px` : (obj.y ?? obj.offsetY ?? "0px");
-      const blur = typeof obj.blur === "number" ? `${obj.blur}px` : (obj.blur ?? obj.radius ?? "0px");
-      const spread = typeof obj.spread === "number" ? `${obj.spread}px` : (obj.spread ?? "0px");
+      const x = toCssLength(obj.x ?? obj.offsetX ?? 0);
+      const y = toCssLength(obj.y ?? obj.offsetY ?? 0);
+      const blur = toCssLength(obj.blur ?? obj.radius ?? 0);
+      const spread = toCssLength(obj.spread ?? 0);
       const color = obj.color ?? "rgba(0,0,0,0.2)";
       const inset = obj.inset ? "inset " : "";
       el.style.boxShadow = `${inset}${x} ${y} ${blur} ${spread} ${color}`;
@@ -29,9 +30,9 @@ export const effectsHandlers: Record<string, ApplicatorHandler> = {
   shadow: (el, value) => {
     if (typeof value === "object" && value !== null) {
       const obj = value as Record<string, any>;
-      const x = typeof obj.x === "number" ? `${obj.x}px` : (obj.x ?? obj.offsetX ?? "0px");
-      const y = typeof obj.y === "number" ? `${obj.y}px` : (obj.y ?? obj.offsetY ?? "0px");
-      const blur = typeof obj.blur === "number" ? `${obj.blur}px` : (obj.blur ?? obj.radius ?? "4px");
+      const x = toCssLength(obj.x ?? obj.offsetX ?? 0);
+      const y = toCssLength(obj.y ?? obj.offsetY ?? 0);
+      const blur = toCssLength(obj.blur ?? obj.radius ?? 4);
       const color = obj.color ?? "rgba(0,0,0,0.2)";
       el.style.boxShadow = `${x} ${y} ${blur} ${color}`;
     } else if (typeof value === "number") {
@@ -69,7 +70,7 @@ export const effectsHandlers: Record<string, ApplicatorHandler> = {
 
   // Individual filter functions
   blur: (el, value) => {
-    const val = typeof value === "number" ? `${value}px` : String(value);
+    const val = toCssLength(value);
     const current = el.style.filter || "";
     el.style.filter = current ? `${current} blur(${val})` : `blur(${val})`;
   },

package/src/dom/applicators/font.ts

@@ -3,6 +3,7 @@
  */
 
 import type { ApplicatorHandler } from "./types.js";
+import { toCssLength } from "./size.js";
 
 // Track loaded Google Fonts to avoid duplicate link tags
 const loadedGoogleFonts = new Set<string>();
@@ -75,7 +76,7 @@ function processFontFamily(value: string): string {
 
 export const fontHandlers: Record<string, ApplicatorHandler> = {
   fontSize: (el, value) => {
-    el.style.fontSize = typeof value === "number" ? `${value}px` : String(value);
+    el.style.fontSize = toCssLength(value);
   },
 
   fontWeight: (el, value) => {

package/src/dom/applicators/layout.ts

@@ -3,6 +3,7 @@
  */
 
 import type { ApplicatorHandler } from "./types.js";
+import { toCssLength } from "./size.js";
 
 /**
  * Maps Hypen alignment values to CSS flexbox values.
@@ -97,7 +98,7 @@ export const layoutHandlers: Record<string, ApplicatorHandler> = {
   },
 
   gap: (el, value) => {
-    el.style.gap = typeof value === "number" ? `${value}px` : String(value);
+    el.style.gap = toCssLength(value);
   },
 
   // weight: unified cross-platform API (same as flex)

package/src/dom/applicators/margin.ts

@@ -3,15 +3,15 @@
  */
 
 import type { ApplicatorHandler } from "./types.js";
+import { toCssLength as toCssLengthShared } from "./size.js";
 
-// 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`.
+// See `padding.ts#toCssLength` — shared helper normalises `dp` / `sp` / `pt`
+// (which CSS doesn't understand) to `px`, and passes `rem` / `em` / `%`
+// through unchanged.
 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);
+  return toCssLengthShared(v);
 };
 
 // Collect positional args ("0", "1", "2", "3") in order, stopping at the first gap.
@@ -30,7 +30,7 @@ export const marginHandler: ApplicatorHandler = (el, value) => {
   }
 
   if (typeof value !== "object" || value === null) {
-    el.style.margin = String(value);
+    el.style.margin = toCssLength(value);
     return;
   }
 

package/src/dom/applicators/padding.ts

@@ -3,18 +3,18 @@
  */
 
 import type { ApplicatorHandler } from "./types.js";
+import { toCssLength as toCssLengthShared } from "./size.js";
 
-// 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.).
+// Format a value as a CSS length. Delegates to the shared helper in
+// `size.ts` so `dp` / `sp` / `pt` normalise to `px` (CSS doesn't understand
+// those suffixes). Numbers become `${n}px`; anything CSS already knows
+// (`rem`, `em`, `%`, `calc(...)`, …) passes through unchanged. The object
+// form (`v["0"]`) is carried over from the legacy applicator-argument
+// shape that sometimes reaches this handler.
 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);
+  return toCssLengthShared(v);
 };
 
 // Collect positional args ("0", "1", "2", "3") in order, stopping at the first
@@ -34,7 +34,7 @@ export const paddingHandler: ApplicatorHandler = (el, value) => {
   }
 
   if (typeof value !== "object" || value === null) {
-    el.style.padding = String(value);
+    el.style.padding = toCssLength(value);
     return;
   }
 

package/src/dom/applicators/size.ts

@@ -16,8 +16,14 @@ import type { ApplicatorHandler } from "./types.js";
 /**
  * Parse a size value and return CSS-compatible string.
  * Ensures cross-platform compatibility with Android/iOS.
+ *
+ * Exported for reuse by other DOM applicators (padding, margin, font,
+ * typography, border, …) that historically passed strings through
+ * untouched. CSS doesn't understand `dp` / `sp`, so `fontSize("24dp")`
+ * or `padding("16sp")` would otherwise be silently dropped by the
+ * browser even though the Android / iOS renderers accept them.
  */
-function parseSizeValue(value: any): string | null {
+export function parseSizeValue(value: any): string | null {
   if (value === null || value === undefined) return null;
 
   // Numbers default to px
@@ -42,8 +48,10 @@ function parseSizeValue(value: any): string | null {
       return "100%";
   }
 
-  // Parse value with unit
-  const match = str.match(/^(-?[\d.]+)\s*(px|dp|pt|%|vw|vh|vmin|vmax|em|rem)?$/);
+  // Parse value with unit. `sp` is accepted as an alias for `dp` — on web,
+  // density-independent and scale-independent units all collapse to CSS
+  // `px` at 96dpi (there's no separate text-scaling knob on the DOM side).
+  const match = str.match(/^(-?[\d.]+)\s*(px|dp|pt|sp|%|vw|vh|vmin|vmax|em|rem)?$/);
   if (!match) {
     // Pass through other CSS values as-is (e.g., "calc(...)", "fit-content")
     return str;
@@ -57,13 +65,17 @@ function parseSizeValue(value: any): string | null {
       // Absolute pixels - use as-is
       return `${num}px`;
     case "dp":
-    case "pt":
-      // Density-independent points
-      // On web, 1dp/1pt ≈ 1px at standard density (96dpi)
-      // CSS already handles this via px, so we just use px
-      // For true density independence, we'd need to query devicePixelRatio
-      // but CSS px is already defined as 1/96th of an inch
+    case "sp":
+      // Density/scale-independent logical pixels.
+      // On web, 1dp/1sp = 1 CSS px at standard density (96dpi).
+      // (`sp` does not yet scale with the user's text-size preference
+      // — that's a separate cross-renderer change.)
       return `${num}px`;
+    case "pt":
+      // Typographic point = 1/72 inch. Emit native CSS `pt` so the
+      // browser's own length resolution runs (1pt = 1.333… CSS px at
+      // 96dpi). Matches the 96/72 multiplier used on iOS and Android.
+      return `${num}pt`;
     case "%":
       return `${num}%`;
     case "vw":
@@ -83,6 +95,19 @@ function parseSizeValue(value: any): string | null {
   }
 }
 
+/**
+ * Coerce a Hypen length value to a CSS length string for applicators that
+ * feed directly into `el.style.*`. Numbers become `${n}px`; strings with
+ * platform-agnostic units (`dp`, `sp`, `pt`) are normalised; anything the
+ * browser already understands (`em`, `rem`, `%`, `calc(...)`, …) passes
+ * through.
+ */
+export function toCssLength(value: any): string {
+  if (value === null || value === undefined) return "";
+  if (typeof value === "number") return `${value}px`;
+  return parseSizeValue(value) ?? String(value);
+}
+
 export const sizeHandlers: Record<string, ApplicatorHandler> = {
   width: (el, value) => {
     const size = parseSizeValue(value);

package/src/dom/applicators/transform.ts

@@ -3,6 +3,7 @@
  */
 
 import type { ApplicatorHandler } from "./types.js";
+import { toCssLength } from "./size.js";
 
 export const transformHandlers: Record<string, ApplicatorHandler> = {
   transform: (el, value) => {
@@ -15,19 +16,19 @@ export const transformHandlers: Record<string, ApplicatorHandler> = {
 
   translateX: (el, value) => {
     const current = el.style.transform || "";
-    const val = typeof value === "number" ? `${value}px` : String(value);
+    const val = toCssLength(value);
     el.style.transform = current ? `${current} translateX(${val})` : `translateX(${val})`;
   },
 
   translateY: (el, value) => {
     const current = el.style.transform || "";
-    const val = typeof value === "number" ? `${value}px` : String(value);
+    const val = toCssLength(value);
     el.style.transform = current ? `${current} translateY(${val})` : `translateY(${val})`;
   },
 
   translateZ: (el, value) => {
     const current = el.style.transform || "";
-    const val = typeof value === "number" ? `${value}px` : String(value);
+    const val = toCssLength(value);
     el.style.transform = current ? `${current} translateZ(${val})` : `translateZ(${val})`;
   },
 
@@ -86,7 +87,7 @@ export const transformHandlers: Record<string, ApplicatorHandler> = {
   },
 
   perspective: (el, value) => {
-    el.style.perspective = typeof value === "number" ? `${value}px` : String(value);
+    el.style.perspective = toCssLength(value);
   },
 };
 

package/src/dom/applicators/typography.ts

@@ -3,6 +3,7 @@
  */
 
 import type { ApplicatorHandler } from "./types.js";
+import { toCssLength } from "./size.js";
 
 export const typographyHandlers: Record<string, ApplicatorHandler> = {
   textAlign: (el, value) => {
@@ -36,23 +37,30 @@ export const typographyHandlers: Record<string, ApplicatorHandler> = {
   },
 
   textDecorationThickness: (el, value) => {
-    el.style.textDecorationThickness = typeof value === "number" ? `${value}px` : String(value);
+    el.style.textDecorationThickness = toCssLength(value);
   },
 
   letterSpacing: (el, value) => {
-    el.style.letterSpacing = typeof value === "number" ? `${value}px` : String(value);
+    el.style.letterSpacing = toCssLength(value);
   },
 
   wordSpacing: (el, value) => {
-    el.style.wordSpacing = typeof value === "number" ? `${value}px` : String(value);
+    el.style.wordSpacing = toCssLength(value);
   },
 
   lineHeight: (el, value) => {
-    el.style.lineHeight = String(value);
+    // `line-height` is unitless by convention when the value is a bare
+    // number (CSS multiplier on the element's font-size); only normalise
+    // when the value carries a length unit like `dp` / `sp`.
+    if (typeof value === "string" && /^-?[\d.]+\s*(dp|sp)$/i.test(value.trim())) {
+      el.style.lineHeight = toCssLength(value);
+    } else {
+      el.style.lineHeight = String(value);
+    }
   },
 
   textIndent: (el, value) => {
-    el.style.textIndent = typeof value === "number" ? `${value}px` : String(value);
+    el.style.textIndent = toCssLength(value);
   },
 
   textOverflow: (el, value) => {