@hypen-space/web 0.2.7 → 0.2.9

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hypen-space/web",
-  "version": "0.2.7",
+  "version": "0.2.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.2.7"
+    "@hypen-space/core": "^0.2.9"
   },
   "devDependencies": {
     "@types/bun": "latest",

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

@@ -47,6 +47,25 @@ export const advancedLayoutHandlers: Record<string, ApplicatorHandler> = {
     el.style.gridTemplateRows = String(value);
   },
 
+  // Unified API aliases (simpler names)
+  gridColumns: (el, value) => {
+    // Support number (repeat) or string (CSS value)
+    if (typeof value === "number") {
+      el.style.gridTemplateColumns = `repeat(${value}, 1fr)`;
+    } else {
+      el.style.gridTemplateColumns = String(value);
+    }
+  },
+
+  gridRows: (el, value) => {
+    // Support number (repeat) or string (CSS value)
+    if (typeof value === "number") {
+      el.style.gridTemplateRows = `repeat(${value}, 1fr)`;
+    } else {
+      el.style.gridTemplateRows = String(value);
+    }
+  },
+
   gridTemplateAreas: (el, value) => {
     el.style.gridTemplateAreas = String(value);
   },

package/src/dom/applicators/border.ts

@@ -5,6 +5,43 @@
 import type { ApplicatorHandler } from "./index.js";
 
 export const borderHandlers: Record<string, ApplicatorHandler> = {
+  // Compound border applicator - can take width, color, style, radius
+  border: (el, value) => {
+    if (typeof value === "number") {
+      // Just width
+      el.style.borderWidth = `${value}px`;
+      el.style.borderStyle = "solid";
+    } else if (typeof value === "object" && value !== null) {
+      const obj = value as Record<string, any>;
+
+      // Width
+      if (obj.width !== undefined) {
+        el.style.borderWidth = typeof obj.width === "number" ? `${obj.width}px` : String(obj.width);
+      }
+
+      // Color
+      if (obj.color !== undefined) {
+        el.style.borderColor = String(obj.color);
+      }
+
+      // Style (solid, dashed, dotted, etc.)
+      if (obj.style !== undefined) {
+        el.style.borderStyle = String(obj.style);
+      } else {
+        // Default to solid if not specified
+        el.style.borderStyle = "solid";
+      }
+
+      // Radius
+      if (obj.radius !== undefined) {
+        el.style.borderRadius = typeof obj.radius === "number" ? `${obj.radius}px` : String(obj.radius);
+      }
+    } else if (typeof value === "string") {
+      // CSS shorthand like "1px solid black"
+      el.style.border = value;
+    }
+  },
+
   borderWidth: (el, value) => {
     el.style.borderWidth = typeof value === "number" ? `${value}px` : String(value);
   },
@@ -14,6 +51,38 @@ export const borderHandlers: Record<string, ApplicatorHandler> = {
   },
 
   borderRadius: (el, value) => {
-    el.style.borderRadius = typeof value === "number" ? `${value}px` : String(value);
+    if (typeof value === "number") {
+      el.style.borderRadius = `${value}px`;
+    } else 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)}`;
+    } else {
+      el.style.borderRadius = String(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) {
+      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)}`;
+    } else {
+      el.style.borderRadius = String(value);
+    }
   },
 };

package/src/dom/applicators/size.ts

@@ -28,4 +28,50 @@ export const sizeHandlers: Record<string, ApplicatorHandler> = {
   maxHeight: (el, value) => {
     el.style.maxHeight = typeof value === "number" ? `${value}px` : String(value);
   },
+
+  // Combined size applicator - sets both width and height
+  size: (el, value) => {
+    if (typeof value === "number") {
+      el.style.width = `${value}px`;
+      el.style.height = `${value}px`;
+    } else if (typeof value === "object" && value !== null) {
+      const obj = value as Record<string, any>;
+      if (obj.width !== undefined) {
+        el.style.width = typeof obj.width === "number" ? `${obj.width}px` : String(obj.width);
+      }
+      if (obj.height !== undefined) {
+        el.style.height = typeof obj.height === "number" ? `${obj.height}px` : String(obj.height);
+      }
+    } else {
+      // Single value for both
+      const size = String(value);
+      el.style.width = size;
+      el.style.height = size;
+    }
+  },
+
+  // Fill max width - shorthand for width: 100%
+  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}%`;
+  },
+
+  // Fill max height - shorthand for height: 100%
+  fillMaxHeight: (el, value) => {
+    if (value === false) return;
+    // Value can be a fraction (0-1) or boolean
+    const fraction = typeof value === "number" ? value : 1;
+    el.style.height = `${fraction * 100}%`;
+  },
+
+  // Fill max size - shorthand for width: 100% and height: 100%
+  fillMaxSize: (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}%`;
+    el.style.height = `${fraction * 100}%`;
+  },
 };