@hypen-space/web 0.3.7 → 0.3.9

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hypen-space/web",
-  "version": "0.3.7",
+  "version": "0.3.9",
   "description": "Hypen web renderers - DOM and Canvas rendering for browsers",
   "type": "module",
   "main": "./dist/src/index.js",
@@ -48,7 +48,7 @@
     "clean": "rm -rf dist"
   },
   "dependencies": {
-    "@hypen-space/core": "^0.3.5"
+    "@hypen-space/core": "^0.3.9"
   },
   "devDependencies": {
     "@types/bun": "latest",

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

@@ -3,6 +3,7 @@
  */
 
 import type { ApplicatorHandler } from "./index.js";
+import { mapAlignmentValue } from "./layout.js";
 
 export const advancedLayoutHandlers: Record<string, ApplicatorHandler> = {
   // Flexbox properties
@@ -19,11 +20,11 @@ export const advancedLayoutHandlers: Record<string, ApplicatorHandler> = {
   },
 
   justifyContent: (el, value) => {
-    el.style.justifyContent = String(value);
+    el.style.justifyContent = mapAlignmentValue(String(value));
   },
 
   alignItems: (el, value) => {
-    el.style.alignItems = String(value);
+    el.style.alignItems = mapAlignmentValue(String(value));
   },
 
   alignContent: (el, value) => {

package/src/dom/applicators/background.ts

@@ -2,7 +2,7 @@
  * Background Applicators
  */
 
-import type { ApplicatorHandler } from "./index.js";
+import type { ApplicatorHandler } from "./types.js";
 
 export const backgroundHandlers: Record<string, ApplicatorHandler> = {
   backgroundImage: (el, value) => {

package/src/dom/applicators/border.ts

@@ -2,7 +2,7 @@
  * Border Applicators
  */
 
-import type { ApplicatorHandler } from "./index.js";
+import type { ApplicatorHandler } from "./types.js";
 
 export const borderHandlers: Record<string, ApplicatorHandler> = {
   // Compound border applicator - can take width, color, style, radius

package/src/dom/applicators/color.ts

@@ -2,7 +2,7 @@
  * Color Applicators
  */
 
-import type { ApplicatorHandler } from "./index.js";
+import type { ApplicatorHandler } from "./types.js";
 
 export const colorHandlers: Record<string, ApplicatorHandler> = {
   color: (el, value) => {

package/src/dom/applicators/display.ts

@@ -2,7 +2,7 @@
  * Display and Visibility Applicators
  */
 
-import type { ApplicatorHandler } from "./index.js";
+import type { ApplicatorHandler } from "./types.js";
 
 export const displayHandlers: Record<string, ApplicatorHandler> = {
   display: (el, value) => {

package/src/dom/applicators/effects.ts

@@ -2,7 +2,7 @@
  * Visual Effects Applicators (Shadows, Filters, Blend Modes)
  */
 
-import type { ApplicatorHandler } from "./index.js";
+import type { ApplicatorHandler } from "./types.js";
 
 export const effectsHandlers: Record<string, ApplicatorHandler> = {
   // Shadow effects

package/src/dom/applicators/events.ts

@@ -5,13 +5,13 @@
  * Uses a factory pattern to reduce boilerplate and ensure consistency.
  */
 
-import type { ApplicatorHandler } from "./index.js";
+import type { ApplicatorHandler } from "./types.js";
 import {
   getElementDisposables,
   disposableListener,
   disposableTimeout,
   type Disposable,
-} from "@hypen-space/core";
+} from "@hypen-space/core/disposable";
 import {
   type IEngine,
   getEngine,

package/src/dom/applicators/font.ts

@@ -2,7 +2,7 @@
  * Font Applicators with Google Fonts support
  */
 
-import type { ApplicatorHandler } from "./index.js";
+import type { ApplicatorHandler } from "./types.js";
 
 // Track loaded Google Fonts to avoid duplicate link tags
 const loadedGoogleFonts = new Set<string>();

package/src/dom/applicators/index.ts

@@ -4,7 +4,42 @@
  * Handles style applicators (modifiers) for Hypen components
  */
 
-export type ApplicatorHandler = (element: HTMLElement, value: any) => void;
+// Re-export the type from types.ts to maintain API compatibility
+export type { ApplicatorHandler } from "./types.js";
+import type { ApplicatorHandler } from "./types.js";
+
+// Static imports for all applicator handlers (avoids circular dependency)
+import {
+  paddingHandler,
+  paddingTopHandler,
+  paddingBottomHandler,
+  paddingLeftHandler,
+  paddingRightHandler,
+  paddingHorizontalHandler,
+  paddingVerticalHandler,
+} from "./padding.js";
+import {
+  marginHandler,
+  marginTopHandler,
+  marginBottomHandler,
+  marginLeftHandler,
+  marginRightHandler,
+  marginHorizontalHandler,
+  marginVerticalHandler,
+} from "./margin.js";
+import { colorHandlers } from "./color.js";
+import { borderHandlers } from "./border.js";
+import { sizeHandlers } from "./size.js";
+import { fontHandlers } from "./font.js";
+import { layoutHandlers } from "./layout.js";
+import { eventHandlers } from "./events.js";
+import { typographyHandlers } from "./typography.js";
+import { transformHandlers } from "./transform.js";
+import { effectsHandlers } from "./effects.js";
+import { advancedLayoutHandlers } from "./advanced-layout.js";
+import { backgroundHandlers } from "./background.js";
+import { displayHandlers } from "./display.js";
+import { transitionHandlers } from "./transition.js";
 
 /**
  * Tailwind breakpoint values for responsive variants
@@ -388,26 +423,23 @@ export class ApplicatorRegistry {
 
   /**
    * Register default applicator handlers
+   * Uses statically imported handlers (defined at top of file) to avoid circular dependencies
    */
   private registerDefaults(): void {
-    const { paddingHandler } = require("./padding.js");
-    const { marginHandler } = require("./margin.js");
-    const { colorHandlers } = require("./color.js");
-    const { borderHandlers } = require("./border.js");
-    const { sizeHandlers } = require("./size.js");
-    const { fontHandlers } = require("./font.js");
-    const { layoutHandlers } = require("./layout.js");
-    const { eventHandlers } = require("./events.js");
-    const { typographyHandlers } = require("./typography.js");
-    const { transformHandlers } = require("./transform.js");
-    const { effectsHandlers } = require("./effects.js");
-    const { advancedLayoutHandlers } = require("./advanced-layout.js");
-    const { backgroundHandlers } = require("./background.js");
-    const { displayHandlers } = require("./display.js");
-    const { transitionHandlers } = require("./transition.js");
-
     this.register("padding", paddingHandler);
+    this.register("paddingTop", paddingTopHandler);
+    this.register("paddingBottom", paddingBottomHandler);
+    this.register("paddingLeft", paddingLeftHandler);
+    this.register("paddingRight", paddingRightHandler);
+    this.register("paddingHorizontal", paddingHorizontalHandler);
+    this.register("paddingVertical", paddingVerticalHandler);
     this.register("margin", marginHandler);
+    this.register("marginTop", marginTopHandler);
+    this.register("marginBottom", marginBottomHandler);
+    this.register("marginLeft", marginLeftHandler);
+    this.register("marginRight", marginRightHandler);
+    this.register("marginHorizontal", marginHorizontalHandler);
+    this.register("marginVertical", marginVerticalHandler);
 
     for (const [name, handler] of Object.entries(colorHandlers)) {
       this.register(name, handler as ApplicatorHandler);

package/src/dom/applicators/layout.ts

@@ -2,13 +2,13 @@
  * Layout Applicators (Flexbox/Grid)
  */
 
-import type { ApplicatorHandler } from "./index.js";
+import type { ApplicatorHandler } from "./types.js";
 
 /**
  * Maps Hypen alignment values to CSS flexbox values.
  * Ensures consistent cross-platform API (Android/iOS/Web).
  */
-function mapAlignmentValue(value: string): string {
+export function mapAlignmentValue(value: string): string {
   const v = String(value).toLowerCase();
   switch (v) {
     // Positional values -> CSS equivalents
@@ -44,9 +44,14 @@ export const layoutHandlers: Record<string, ApplicatorHandler> = {
   // Unified alignment API - works for both Column and Row
   verticalAlignment: (el, value) => {
     const val = mapAlignmentValue(String(value));
-    // Check flex-direction to determine which CSS property to set
-    const flexDirection = getComputedStyle(el).flexDirection;
-    if (flexDirection === "column" || flexDirection === "column-reverse") {
+    // Check display and flex-direction to determine which CSS property to set
+    const display = el.style.display || getComputedStyle(el).display;
+    const flexDirection = el.style.flexDirection || getComputedStyle(el).flexDirection;
+
+    if (display === "grid") {
+      // For Grid (Stack): use align-items to align children vertically
+      el.style.alignItems = val;
+    } else if (flexDirection === "column" || flexDirection === "column-reverse") {
       // For column: vertical is the main axis (justify-content)
       el.style.justifyContent = val;
     } else {
@@ -57,14 +62,28 @@ export const layoutHandlers: Record<string, ApplicatorHandler> = {
 
   horizontalAlignment: (el, value) => {
     const val = mapAlignmentValue(String(value));
-    // Check flex-direction to determine which CSS property to set
-    const flexDirection = getComputedStyle(el).flexDirection;
-    if (flexDirection === "column" || flexDirection === "column-reverse") {
+    // Check display and flex-direction to determine which CSS property to set
+    const display = el.style.display || getComputedStyle(el).display;
+    const flexDirection = el.style.flexDirection || getComputedStyle(el).flexDirection;
+
+    if (display === "grid") {
+      // For Grid (Stack): use justify-items to align children horizontally
+      el.style.justifyItems = val;
+    } else if (flexDirection === "column" || flexDirection === "column-reverse") {
       // For column: horizontal is the cross axis (align-items)
       el.style.alignItems = val;
-    } else {
+    } else if (flexDirection === "row" || flexDirection === "row-reverse") {
       // For row: horizontal is the main axis (justify-content)
       el.style.justifyContent = val;
+      // For arrangement to have visible effect, Row needs to fill available width
+      // (matching iOS/Android behavior where non-start alignment auto-expands)
+      // Only auto-expand if not scrollable
+      if (val !== "flex-start" && el.style.overflow !== "auto" && el.style.overflowX !== "auto") {
+        el.style.width = "100%";
+      }
+    } else {
+      // Fallback for other display types
+      el.style.justifyContent = val;
     }
   },
 

package/src/dom/applicators/margin.ts

@@ -1,18 +1,68 @@
 /**
- * Margin Applicator
+ * Margin Applicators
  */
 
-import type { ApplicatorHandler } from "./index.js";
+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;
+};
 
 export const marginHandler: ApplicatorHandler = (el, value) => {
   if (typeof value === "number") {
     el.style.margin = `${value}px`;
   } else if (typeof value === "object") {
-    if (value.left !== undefined) el.style.marginLeft = `${value.left}px`;
-    if (value.right !== undefined) el.style.marginRight = `${value.right}px`;
-    if (value.top !== undefined) el.style.marginTop = `${value.top}px`;
-    if (value.bottom !== undefined) el.style.marginBottom = `${value.bottom}px`;
+    // Handle {0: value} format from .margin(value)
+    if (value["0"] !== undefined && Object.keys(value).length === 1) {
+      el.style.margin = `${value["0"]}px`;
+    } else {
+      if (value.left !== undefined) el.style.marginLeft = `${value.left}px`;
+      if (value.right !== undefined) el.style.marginRight = `${value.right}px`;
+      if (value.top !== undefined) el.style.marginTop = `${value.top}px`;
+      if (value.bottom !== undefined) el.style.marginBottom = `${value.bottom}px`;
+    }
   } else {
     el.style.margin = String(value);
   }
 };
+
+// Directional margin handlers for .marginTop(8), .marginBottom(8), etc.
+export const marginTopHandler: ApplicatorHandler = (el, value) => {
+  const v = getNumericValue(value);
+  if (v !== null) el.style.marginTop = `${v}px`;
+};
+
+export const marginBottomHandler: ApplicatorHandler = (el, value) => {
+  const v = getNumericValue(value);
+  if (v !== null) el.style.marginBottom = `${v}px`;
+};
+
+export const marginLeftHandler: ApplicatorHandler = (el, value) => {
+  const v = getNumericValue(value);
+  if (v !== null) el.style.marginLeft = `${v}px`;
+};
+
+export const marginRightHandler: ApplicatorHandler = (el, value) => {
+  const v = getNumericValue(value);
+  if (v !== null) el.style.marginRight = `${v}px`;
+};
+
+export const marginHorizontalHandler: ApplicatorHandler = (el, value) => {
+  const v = getNumericValue(value);
+  if (v !== null) {
+    el.style.marginLeft = `${v}px`;
+    el.style.marginRight = `${v}px`;
+  }
+};
+
+export const marginVerticalHandler: ApplicatorHandler = (el, value) => {
+  const v = getNumericValue(value);
+  if (v !== null) {
+    el.style.marginTop = `${v}px`;
+    el.style.marginBottom = `${v}px`;
+  }
+};

package/src/dom/applicators/padding.ts

@@ -1,18 +1,68 @@
 /**
- * Padding Applicator
+ * Padding Applicators
  */
 
-import type { ApplicatorHandler } from "./index.js";
+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;
+};
 
 export const paddingHandler: ApplicatorHandler = (el, value) => {
   if (typeof value === "number") {
     el.style.padding = `${value}px`;
   } else if (typeof value === "object") {
-    if (value.left !== undefined) el.style.paddingLeft = `${value.left}px`;
-    if (value.right !== undefined) el.style.paddingRight = `${value.right}px`;
-    if (value.top !== undefined) el.style.paddingTop = `${value.top}px`;
-    if (value.bottom !== undefined) el.style.paddingBottom = `${value.bottom}px`;
+    // Handle {0: value} format from .padding(value)
+    if (value["0"] !== undefined && Object.keys(value).length === 1) {
+      el.style.padding = `${value["0"]}px`;
+    } else {
+      if (value.left !== undefined) el.style.paddingLeft = `${value.left}px`;
+      if (value.right !== undefined) el.style.paddingRight = `${value.right}px`;
+      if (value.top !== undefined) el.style.paddingTop = `${value.top}px`;
+      if (value.bottom !== undefined) el.style.paddingBottom = `${value.bottom}px`;
+    }
   } else {
     el.style.padding = String(value);
   }
 };
+
+// Directional padding handlers for .paddingTop(8), .paddingBottom(8), etc.
+export const paddingTopHandler: ApplicatorHandler = (el, value) => {
+  const v = getNumericValue(value);
+  if (v !== null) el.style.paddingTop = `${v}px`;
+};
+
+export const paddingBottomHandler: ApplicatorHandler = (el, value) => {
+  const v = getNumericValue(value);
+  if (v !== null) el.style.paddingBottom = `${v}px`;
+};
+
+export const paddingLeftHandler: ApplicatorHandler = (el, value) => {
+  const v = getNumericValue(value);
+  if (v !== null) el.style.paddingLeft = `${v}px`;
+};
+
+export const paddingRightHandler: ApplicatorHandler = (el, value) => {
+  const v = getNumericValue(value);
+  if (v !== null) el.style.paddingRight = `${v}px`;
+};
+
+export const paddingHorizontalHandler: ApplicatorHandler = (el, value) => {
+  const v = getNumericValue(value);
+  if (v !== null) {
+    el.style.paddingLeft = `${v}px`;
+    el.style.paddingRight = `${v}px`;
+  }
+};
+
+export const paddingVerticalHandler: ApplicatorHandler = (el, value) => {
+  const v = getNumericValue(value);
+  if (v !== null) {
+    el.style.paddingTop = `${v}px`;
+    el.style.paddingBottom = `${v}px`;
+  }
+};

package/src/dom/applicators/size.ts

@@ -11,7 +11,7 @@
  * - "wrap" / "auto": fit content
  */
 
-import type { ApplicatorHandler } from "./index.js";
+import type { ApplicatorHandler } from "./types.js";
 
 /**
  * Parse a size value and return CSS-compatible string.
@@ -135,12 +135,22 @@ export const sizeHandlers: Record<string, ApplicatorHandler> = {
     }
   },
 
-  // Fill max width - shorthand for width: 100%
+  // Fill max width - stretch to fill parent width
   fillMaxWidth: (el, value) => {
     if (value === false) return;
-    // Value can be a fraction (0-1) or boolean
     const fraction = typeof value === "number" ? value : 1;
-    el.style.width = `${fraction * 100}%`;
+    if (fraction === 1) {
+      // For 100% width: use align-self stretch in Column (cross-axis)
+      // and width 100% as fallback for Row and other contexts
+      el.style.alignSelf = "stretch";
+      el.style.width = "100%";
+      el.style.minWidth = "0"; // Prevent flex item from overflowing
+    } else {
+      // For fractional width, use percentage
+      el.style.width = `${fraction * 100}%`;
+    }
+    // For grid containers (Stack)
+    el.style.justifySelf = "stretch";
   },
 
   // Fill max height - shorthand for height: 100%

package/src/dom/applicators/transform.ts

@@ -2,7 +2,7 @@
  * Transform Applicators
  */
 
-import type { ApplicatorHandler } from "./index.js";
+import type { ApplicatorHandler } from "./types.js";
 
 export const transformHandlers: Record<string, ApplicatorHandler> = {
   transform: (el, value) => {

package/src/dom/applicators/transition.ts

@@ -2,7 +2,7 @@
  * Transition and Animation Applicators
  */
 
-import type { ApplicatorHandler } from "./index.js";
+import type { ApplicatorHandler } from "./types.js";
 
 export const transitionHandlers: Record<string, ApplicatorHandler> = {
   transition: (el, value) => {

package/src/dom/applicators/types.ts

@@ -0,0 +1,7 @@
+/**
+ * Applicator Handler Type
+ *
+ * Separated to avoid circular dependencies between index.ts and individual handlers.
+ */
+
+export type ApplicatorHandler = (element: HTMLElement, value: any) => void;

package/src/dom/applicators/typography.ts

@@ -2,7 +2,7 @@
  * Typography Applicators
  */
 
-import type { ApplicatorHandler } from "./index.js";
+import type { ApplicatorHandler } from "./types.js";
 
 export const typographyHandlers: Record<string, ApplicatorHandler> = {
   textAlign: (el, value) => {

package/src/dom/components/avatar.ts

@@ -23,10 +23,11 @@ export const avatarHandler: ComponentHandler = {
   },
 
   applyProps(el: HTMLElement, props: Record<string, any>): void {
-    // Image source
-    if (props.src !== undefined) {
+    // Image source - support named arg with .0 suffix, positional arg, or plain name
+    const src = props["src.0"] || props["0"] || props.src || props.source;
+    if (src !== undefined) {
       const img = document.createElement("img");
-      img.src = String(props.src);
+      img.src = String(src);
       img.style.width = "100%";
       img.style.height = "100%";
       img.style.objectFit = "cover";

package/src/dom/components/button.ts

@@ -1,5 +1,9 @@
 /**
  * Button Component
+ *
+ * Renders as a flex container. Children align to start by default (matching iOS).
+ * Use .horizontalAlignment("center") to center content.
+ * Reset default HTML button styles for cross-platform consistency.
  */
 
 import type { ComponentHandler } from "./index.js";
@@ -7,6 +11,19 @@ import type { ComponentHandler } from "./index.js";
 export const buttonHandler: ComponentHandler = {
   create(): HTMLElement {
     const el = document.createElement("button");
+    // Reset default button styles for cross-platform consistency
+    el.style.border = "none";
+    el.style.background = "none";
+    el.style.padding = "0";
+    el.style.margin = "0";
+    el.style.font = "inherit";
+    el.style.color = "inherit";
+    el.style.cursor = "pointer";
+    // Make it a flex container - align to start by default (matching iOS)
+    // Use .horizontalAlignment("center") to center content
+    el.style.display = "flex";
+    el.style.flexDirection = "column";
+    el.style.alignItems = "flex-start";
     el.dataset.hypenType = "button";
     return el;
   },

package/src/dom/components/column.ts

@@ -1,5 +1,9 @@
 /**
  * Column Component - Vertical Stack
+ *
+ * Children wrap to content by default (matching Android/iOS behavior).
+ * Column stretches to fill parent's width so children with fillMaxWidth work.
+ * Use .fillMaxWidth() on children or .horizontalAlignment("stretch") to stretch.
  */
 
 import type { ComponentHandler } from "./index.js";
@@ -9,6 +13,11 @@ export const columnHandler: ComponentHandler = {
     const el = document.createElement("div");
     el.style.display = "flex";
     el.style.flexDirection = "column";
+    // Wrap children to content by default (match iOS/Android behavior)
+    el.style.alignItems = "flex-start";
+    // Stretch to fill parent's width so children with fillMaxWidth can reference it
+    // This matches iOS/Android where Column expands to accommodate children that want to stretch
+    el.style.alignSelf = "stretch";
     el.dataset.hypenType = "column";
     return el;
   },

package/src/dom/components/container.ts

@@ -7,6 +7,8 @@ import type { ComponentHandler } from "./index.js";
 export const containerHandler: ComponentHandler = {
   create(): HTMLElement {
     const el = document.createElement("div");
+    // Simple block container - wraps to content by default
+    // Use .fillMaxWidth(true) to stretch
     el.dataset.hypenType = "container";
     return el;
   },

package/src/dom/components/list.ts

@@ -8,6 +8,9 @@ export const listHandler: ComponentHandler = {
   create(): HTMLElement {
     const el = document.createElement("div");
     el.style.display = "flex";
+    el.style.flexDirection = "column"; // Default to vertical (like Android)
+    // Default to flex-start to match Android/iOS behavior
+    el.style.alignItems = "flex-start";
     el.style.overflow = "auto";
     el.dataset.hypenType = "list";
     return el;

package/src/dom/components/row.ts

@@ -1,5 +1,7 @@
 /**
  * Row Component - Horizontal Stack
+ * Children keep their intrinsic size by default (matching iOS/Android behavior).
+ * Use .weight(1) on children to make them expand equally.
  */
 
 import type { ComponentHandler } from "./index.js";
@@ -9,6 +11,8 @@ export const rowHandler: ComponentHandler = {
     const el = document.createElement("div");
     el.style.display = "flex";
     el.style.flexDirection = "row";
+    // Wrap to content by default (match iOS/Android behavior)
+    el.style.alignItems = "flex-start";
     el.dataset.hypenType = "row";
     return el;
   },

package/src/dom/components/stack.ts

@@ -4,29 +4,41 @@
 
 import type { ComponentHandler } from "./index.js";
 
+// Inject global styles once
+let stackStylesInjected = false;
+function ensureStackStyles(): void {
+  if (stackStylesInjected) return;
+  stackStylesInjected = true;
+
+  const style = document.createElement("style");
+  style.id = "hypen-stack-styles";
+  style.textContent = `
+    [data-hypen-type="stack"] {
+      position: relative;
+      display: grid;
+      grid-template-areas: "stack";
+      /* Default alignment: top-left (matching iOS/Android ZStack default) */
+      justify-items: start;
+      align-items: start;
+      /* Ensure Stack participates properly in flex layouts (Row/Column) */
+      min-width: 0;
+      min-height: 0;
+    }
+    [data-hypen-type="stack"] > * {
+      grid-area: stack;
+      /* Don't set justify-self/align-self here - let parent's justify-items/align-items control */
+    }
+  `;
+  document.head.appendChild(style);
+}
+
 export const stackHandler: ComponentHandler = {
   create(): HTMLElement {
+    ensureStackStyles();
+
     const el = document.createElement("div");
-    el.style.position = "relative";
-    el.style.display = "flex";
     el.dataset.hypenType = "stack";
-    
-    // Children will be absolutely positioned
-    const style = document.createElement("style");
-    style.textContent = `
-      [data-hypen-type="stack"] > * {
-        position: absolute;
-        top: 0;
-        left: 0;
-        width: 100%;
-        height: 100%;
-      }
-      [data-hypen-type="stack"] > *:first-child {
-        position: relative;
-      }
-    `;
-    el.appendChild(style);
-    
+
     return el;
   },
 };