@hypen-space/web 0.2.8 → 0.2.9

package/dist/src/dom/applicators/advanced-layout.js

@@ -65,6 +65,20 @@ var init_advanced_layout = __esm(() => {
     gridTemplateRows: (el, value) => {
       el.style.gridTemplateRows = String(value);
     },
+    gridColumns: (el, value) => {
+      if (typeof value === "number") {
+        el.style.gridTemplateColumns = `repeat(${value}, 1fr)`;
+      } else {
+        el.style.gridTemplateColumns = String(value);
+      }
+    },
+    gridRows: (el, 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);
     },
@@ -130,4 +144,4 @@ export {
   advancedLayoutHandlers
 };
 
-//# debugId=BCE516F91DB22F3864756E2164756E21
+//# debugId=C1185D52B17FE3EF64756E2164756E21

package/dist/src/dom/applicators/advanced-layout.js.map

@@ -2,9 +2,9 @@
   "version": 3,
   "sources": ["../src/dom/applicators/advanced-layout.ts"],
   "sourcesContent": [
-    "/**\n * Advanced Layout Applicators (Flexbox, Grid, Positioning)\n */\n\nimport type { ApplicatorHandler } from \"./index.js\";\n\nexport const advancedLayoutHandlers: Record<string, ApplicatorHandler> = {\n  // Flexbox properties\n  flexDirection: (el, value) => {\n    el.style.flexDirection = String(value);\n  },\n\n  flexWrap: (el, value) => {\n    el.style.flexWrap = String(value);\n  },\n\n  flexBasis: (el, value) => {\n    el.style.flexBasis = typeof value === \"number\" ? `${value}px` : String(value);\n  },\n\n  justifyContent: (el, value) => {\n    el.style.justifyContent = String(value);\n  },\n\n  alignItems: (el, value) => {\n    el.style.alignItems = String(value);\n  },\n\n  alignContent: (el, value) => {\n    el.style.alignContent = String(value);\n  },\n\n  alignSelf: (el, value) => {\n    el.style.alignSelf = String(value);\n  },\n\n  order: (el, value) => {\n    el.style.order = String(value);\n  },\n\n  // Grid properties\n  gridTemplateColumns: (el, value) => {\n    el.style.gridTemplateColumns = String(value);\n  },\n\n  gridTemplateRows: (el, value) => {\n    el.style.gridTemplateRows = String(value);\n  },\n\n  gridTemplateAreas: (el, value) => {\n    el.style.gridTemplateAreas = String(value);\n  },\n\n  gridColumn: (el, value) => {\n    el.style.gridColumn = String(value);\n  },\n\n  gridRow: (el, value) => {\n    el.style.gridRow = String(value);\n  },\n\n  gridArea: (el, value) => {\n    el.style.gridArea = String(value);\n  },\n\n  gridAutoFlow: (el, value) => {\n    el.style.gridAutoFlow = String(value);\n  },\n\n  gridAutoColumns: (el, value) => {\n    el.style.gridAutoColumns = String(value);\n  },\n\n  gridAutoRows: (el, value) => {\n    el.style.gridAutoRows = String(value);\n  },\n\n  rowGap: (el, value) => {\n    el.style.rowGap = typeof value === \"number\" ? `${value}px` : String(value);\n  },\n\n  columnGap: (el, value) => {\n    el.style.columnGap = typeof value === \"number\" ? `${value}px` : String(value);\n  },\n\n  placeItems: (el, value) => {\n    el.style.placeItems = String(value);\n  },\n\n  placeContent: (el, value) => {\n    el.style.placeContent = String(value);\n  },\n\n  placeSelf: (el, value) => {\n    el.style.placeSelf = String(value);\n  },\n\n  // Positioning\n  position: (el, value) => {\n    el.style.position = String(value);\n  },\n\n  top: (el, value) => {\n    el.style.top = typeof value === \"number\" ? `${value}px` : String(value);\n  },\n\n  right: (el, value) => {\n    el.style.right = typeof value === \"number\" ? `${value}px` : String(value);\n  },\n\n  bottom: (el, value) => {\n    el.style.bottom = typeof value === \"number\" ? `${value}px` : String(value);\n  },\n\n  left: (el, value) => {\n    el.style.left = typeof value === \"number\" ? `${value}px` : String(value);\n  },\n\n  inset: (el, value) => {\n    el.style.inset = typeof value === \"number\" ? `${value}px` : String(value);\n  },\n\n  zIndex: (el, value) => {\n    el.style.zIndex = String(value);\n  },\n};\n\n\n"
+    "/**\n * Advanced Layout Applicators (Flexbox, Grid, Positioning)\n */\n\nimport type { ApplicatorHandler } from \"./index.js\";\n\nexport const advancedLayoutHandlers: Record<string, ApplicatorHandler> = {\n  // Flexbox properties\n  flexDirection: (el, value) => {\n    el.style.flexDirection = String(value);\n  },\n\n  flexWrap: (el, value) => {\n    el.style.flexWrap = String(value);\n  },\n\n  flexBasis: (el, value) => {\n    el.style.flexBasis = typeof value === \"number\" ? `${value}px` : String(value);\n  },\n\n  justifyContent: (el, value) => {\n    el.style.justifyContent = String(value);\n  },\n\n  alignItems: (el, value) => {\n    el.style.alignItems = String(value);\n  },\n\n  alignContent: (el, value) => {\n    el.style.alignContent = String(value);\n  },\n\n  alignSelf: (el, value) => {\n    el.style.alignSelf = String(value);\n  },\n\n  order: (el, value) => {\n    el.style.order = String(value);\n  },\n\n  // Grid properties\n  gridTemplateColumns: (el, value) => {\n    el.style.gridTemplateColumns = String(value);\n  },\n\n  gridTemplateRows: (el, value) => {\n    el.style.gridTemplateRows = String(value);\n  },\n\n  // Unified API aliases (simpler names)\n  gridColumns: (el, value) => {\n    // Support number (repeat) or string (CSS value)\n    if (typeof value === \"number\") {\n      el.style.gridTemplateColumns = `repeat(${value}, 1fr)`;\n    } else {\n      el.style.gridTemplateColumns = String(value);\n    }\n  },\n\n  gridRows: (el, value) => {\n    // Support number (repeat) or string (CSS value)\n    if (typeof value === \"number\") {\n      el.style.gridTemplateRows = `repeat(${value}, 1fr)`;\n    } else {\n      el.style.gridTemplateRows = String(value);\n    }\n  },\n\n  gridTemplateAreas: (el, value) => {\n    el.style.gridTemplateAreas = String(value);\n  },\n\n  gridColumn: (el, value) => {\n    el.style.gridColumn = String(value);\n  },\n\n  gridRow: (el, value) => {\n    el.style.gridRow = String(value);\n  },\n\n  gridArea: (el, value) => {\n    el.style.gridArea = String(value);\n  },\n\n  gridAutoFlow: (el, value) => {\n    el.style.gridAutoFlow = String(value);\n  },\n\n  gridAutoColumns: (el, value) => {\n    el.style.gridAutoColumns = String(value);\n  },\n\n  gridAutoRows: (el, value) => {\n    el.style.gridAutoRows = String(value);\n  },\n\n  rowGap: (el, value) => {\n    el.style.rowGap = typeof value === \"number\" ? `${value}px` : String(value);\n  },\n\n  columnGap: (el, value) => {\n    el.style.columnGap = typeof value === \"number\" ? `${value}px` : String(value);\n  },\n\n  placeItems: (el, value) => {\n    el.style.placeItems = String(value);\n  },\n\n  placeContent: (el, value) => {\n    el.style.placeContent = String(value);\n  },\n\n  placeSelf: (el, value) => {\n    el.style.placeSelf = String(value);\n  },\n\n  // Positioning\n  position: (el, value) => {\n    el.style.position = String(value);\n  },\n\n  top: (el, value) => {\n    el.style.top = typeof value === \"number\" ? `${value}px` : String(value);\n  },\n\n  right: (el, value) => {\n    el.style.right = typeof value === \"number\" ? `${value}px` : String(value);\n  },\n\n  bottom: (el, value) => {\n    el.style.bottom = typeof value === \"number\" ? `${value}px` : String(value);\n  },\n\n  left: (el, value) => {\n    el.style.left = typeof value === \"number\" ? `${value}px` : String(value);\n  },\n\n  inset: (el, value) => {\n    el.style.inset = typeof value === \"number\" ? `${value}px` : String(value);\n  },\n\n  zIndex: (el, value) => {\n    el.style.zIndex = String(value);\n  },\n};\n\n\n"
   ],
-  "mappings": "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",
-  "debugId": "BCE516F91DB22F3864756E2164756E21",
+  "mappings": "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",
+  "debugId": "C1185D52B17FE3EF64756E2164756E21",
   "names": []
 }

package/dist/src/dom/applicators/border.js

@@ -35,6 +35,30 @@ __export(exports_border, {
 var borderHandlers;
 var init_border = __esm(() => {
   borderHandlers = {
+    border: (el, value) => {
+      if (typeof value === "number") {
+        el.style.borderWidth = `${value}px`;
+        el.style.borderStyle = "solid";
+      } else if (typeof value === "object" && value !== null) {
+        const obj = value;
+        if (obj.width !== undefined) {
+          el.style.borderWidth = typeof obj.width === "number" ? `${obj.width}px` : String(obj.width);
+        }
+        if (obj.color !== undefined) {
+          el.style.borderColor = String(obj.color);
+        }
+        if (obj.style !== undefined) {
+          el.style.borderStyle = String(obj.style);
+        } else {
+          el.style.borderStyle = "solid";
+        }
+        if (obj.radius !== undefined) {
+          el.style.borderRadius = typeof obj.radius === "number" ? `${obj.radius}px` : String(obj.radius);
+        }
+      } else if (typeof value === "string") {
+        el.style.border = value;
+      }
+    },
     borderWidth: (el, value) => {
       el.style.borderWidth = typeof value === "number" ? `${value}px` : String(value);
     },
@@ -42,7 +66,34 @@ var init_border = __esm(() => {
       el.style.borderStyle = String(value);
     },
     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) {
+        const obj = value;
+        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) => typeof v === "number" ? `${v}px` : String(v);
+        el.style.borderRadius = `${formatValue(topLeft)} ${formatValue(topRight)} ${formatValue(bottomRight)} ${formatValue(bottomLeft)}`;
+      } else {
+        el.style.borderRadius = String(value);
+      }
+    },
+    cornerRadius: (el, value) => {
+      if (typeof value === "number") {
+        el.style.borderRadius = `${value}px`;
+      } else if (typeof value === "object" && value !== null) {
+        const obj = value;
+        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) => typeof v === "number" ? `${v}px` : String(v);
+        el.style.borderRadius = `${formatValue(topLeft)} ${formatValue(topRight)} ${formatValue(bottomRight)} ${formatValue(bottomLeft)}`;
+      } else {
+        el.style.borderRadius = String(value);
+      }
     }
   };
 });
@@ -52,4 +103,4 @@ export {
   borderHandlers
 };
 
-//# debugId=46426568870103DD64756E2164756E21
+//# debugId=89023929D14976CF64756E2164756E21

package/dist/src/dom/applicators/border.js.map

@@ -2,9 +2,9 @@
   "version": 3,
   "sources": ["../src/dom/applicators/border.ts"],
   "sourcesContent": [
-    "/**\n * Border Applicators\n */\n\nimport type { ApplicatorHandler } from \"./index.js\";\n\nexport const borderHandlers: Record<string, ApplicatorHandler> = {\n  borderWidth: (el, value) => {\n    el.style.borderWidth = typeof value === \"number\" ? `${value}px` : String(value);\n  },\n\n  borderStyle: (el, value) => {\n    el.style.borderStyle = String(value);\n  },\n\n  borderRadius: (el, value) => {\n    el.style.borderRadius = typeof value === \"number\" ? `${value}px` : String(value);\n  },\n};\n"
+    "/**\n * Border Applicators\n */\n\nimport type { ApplicatorHandler } from \"./index.js\";\n\nexport const borderHandlers: Record<string, ApplicatorHandler> = {\n  // Compound border applicator - can take width, color, style, radius\n  border: (el, value) => {\n    if (typeof value === \"number\") {\n      // Just width\n      el.style.borderWidth = `${value}px`;\n      el.style.borderStyle = \"solid\";\n    } else if (typeof value === \"object\" && value !== null) {\n      const obj = value as Record<string, any>;\n\n      // Width\n      if (obj.width !== undefined) {\n        el.style.borderWidth = typeof obj.width === \"number\" ? `${obj.width}px` : String(obj.width);\n      }\n\n      // Color\n      if (obj.color !== undefined) {\n        el.style.borderColor = String(obj.color);\n      }\n\n      // Style (solid, dashed, dotted, etc.)\n      if (obj.style !== undefined) {\n        el.style.borderStyle = String(obj.style);\n      } else {\n        // Default to solid if not specified\n        el.style.borderStyle = \"solid\";\n      }\n\n      // Radius\n      if (obj.radius !== undefined) {\n        el.style.borderRadius = typeof obj.radius === \"number\" ? `${obj.radius}px` : String(obj.radius);\n      }\n    } else if (typeof value === \"string\") {\n      // CSS shorthand like \"1px solid black\"\n      el.style.border = value;\n    }\n  },\n\n  borderWidth: (el, value) => {\n    el.style.borderWidth = typeof value === \"number\" ? `${value}px` : String(value);\n  },\n\n  borderStyle: (el, value) => {\n    el.style.borderStyle = String(value);\n  },\n\n  borderRadius: (el, value) => {\n    if (typeof value === \"number\") {\n      el.style.borderRadius = `${value}px`;\n    } else if (typeof value === \"object\" && value !== null) {\n      // Support for individual corners\n      const obj = value as Record<string, any>;\n      const topLeft = obj.topLeft ?? obj.topStart ?? 0;\n      const topRight = obj.topRight ?? obj.topEnd ?? 0;\n      const bottomRight = obj.bottomRight ?? obj.bottomEnd ?? 0;\n      const bottomLeft = obj.bottomLeft ?? obj.bottomStart ?? 0;\n\n      const formatValue = (v: any) => typeof v === \"number\" ? `${v}px` : String(v);\n      el.style.borderRadius = `${formatValue(topLeft)} ${formatValue(topRight)} ${formatValue(bottomRight)} ${formatValue(bottomLeft)}`;\n    } else {\n      el.style.borderRadius = String(value);\n    }\n  },\n\n  // Alias for borderRadius (Compose naming)\n  cornerRadius: (el, value) => {\n    if (typeof value === \"number\") {\n      el.style.borderRadius = `${value}px`;\n    } else if (typeof value === \"object\" && value !== null) {\n      const obj = value as Record<string, any>;\n      const topLeft = obj.topLeft ?? obj.topStart ?? 0;\n      const topRight = obj.topRight ?? obj.topEnd ?? 0;\n      const bottomRight = obj.bottomRight ?? obj.bottomEnd ?? 0;\n      const bottomLeft = obj.bottomLeft ?? obj.bottomStart ?? 0;\n\n      const formatValue = (v: any) => typeof v === \"number\" ? `${v}px` : String(v);\n      el.style.borderRadius = `${formatValue(topLeft)} ${formatValue(topRight)} ${formatValue(bottomRight)} ${formatValue(bottomLeft)}`;\n    } else {\n      el.style.borderRadius = String(value);\n    }\n  },\n};\n"
   ],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAMa;AAAA;AAAA,mBAAoD;AAAA,IAC/D,aAAa,CAAC,IAAI,UAAU;AAAA,MAC1B,GAAG,MAAM,cAAc,OAAO,UAAU,WAAW,GAAG,YAAY,OAAO,KAAK;AAAA;AAAA,IAGhF,aAAa,CAAC,IAAI,UAAU;AAAA,MAC1B,GAAG,MAAM,cAAc,OAAO,KAAK;AAAA;AAAA,IAGrC,cAAc,CAAC,IAAI,UAAU;AAAA,MAC3B,GAAG,MAAM,eAAe,OAAO,UAAU,WAAW,GAAG,YAAY,OAAO,KAAK;AAAA;AAAA,EAEnF;AAAA;",
-  "debugId": "46426568870103DD64756E2164756E21",
+  "mappings": "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",
+  "debugId": "89023929D14976CF64756E2164756E21",
   "names": []
 }

package/dist/src/dom/applicators/index.js

@@ -102,6 +102,30 @@ __export(exports_border, {
 var borderHandlers;
 var init_border = __esm(() => {
   borderHandlers = {
+    border: (el, value) => {
+      if (typeof value === "number") {
+        el.style.borderWidth = `${value}px`;
+        el.style.borderStyle = "solid";
+      } else if (typeof value === "object" && value !== null) {
+        const obj = value;
+        if (obj.width !== undefined) {
+          el.style.borderWidth = typeof obj.width === "number" ? `${obj.width}px` : String(obj.width);
+        }
+        if (obj.color !== undefined) {
+          el.style.borderColor = String(obj.color);
+        }
+        if (obj.style !== undefined) {
+          el.style.borderStyle = String(obj.style);
+        } else {
+          el.style.borderStyle = "solid";
+        }
+        if (obj.radius !== undefined) {
+          el.style.borderRadius = typeof obj.radius === "number" ? `${obj.radius}px` : String(obj.radius);
+        }
+      } else if (typeof value === "string") {
+        el.style.border = value;
+      }
+    },
     borderWidth: (el, value) => {
       el.style.borderWidth = typeof value === "number" ? `${value}px` : String(value);
     },
@@ -109,7 +133,34 @@ var init_border = __esm(() => {
       el.style.borderStyle = String(value);
     },
     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) {
+        const obj = value;
+        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) => typeof v === "number" ? `${v}px` : String(v);
+        el.style.borderRadius = `${formatValue(topLeft)} ${formatValue(topRight)} ${formatValue(bottomRight)} ${formatValue(bottomLeft)}`;
+      } else {
+        el.style.borderRadius = String(value);
+      }
+    },
+    cornerRadius: (el, value) => {
+      if (typeof value === "number") {
+        el.style.borderRadius = `${value}px`;
+      } else if (typeof value === "object" && value !== null) {
+        const obj = value;
+        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) => typeof v === "number" ? `${v}px` : String(v);
+        el.style.borderRadius = `${formatValue(topLeft)} ${formatValue(topRight)} ${formatValue(bottomRight)} ${formatValue(bottomLeft)}`;
+      } else {
+        el.style.borderRadius = String(value);
+      }
     }
   };
 });
@@ -139,6 +190,43 @@ var init_size = __esm(() => {
     },
     maxHeight: (el, value) => {
       el.style.maxHeight = typeof value === "number" ? `${value}px` : String(value);
+    },
+    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;
+        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 {
+        const size = String(value);
+        el.style.width = size;
+        el.style.height = size;
+      }
+    },
+    fillMaxWidth: (el, value) => {
+      if (value === false)
+        return;
+      const fraction = typeof value === "number" ? value : 1;
+      el.style.width = `${fraction * 100}%`;
+    },
+    fillMaxHeight: (el, value) => {
+      if (value === false)
+        return;
+      const fraction = typeof value === "number" ? value : 1;
+      el.style.height = `${fraction * 100}%`;
+    },
+    fillMaxSize: (el, value) => {
+      if (value === false)
+        return;
+      const fraction = typeof value === "number" ? value : 1;
+      el.style.width = `${fraction * 100}%`;
+      el.style.height = `${fraction * 100}%`;
     }
   };
 });
@@ -1014,6 +1102,20 @@ var init_advanced_layout = __esm(() => {
     gridTemplateRows: (el, value) => {
       el.style.gridTemplateRows = String(value);
     },
+    gridColumns: (el, value) => {
+      if (typeof value === "number") {
+        el.style.gridTemplateColumns = `repeat(${value}, 1fr)`;
+      } else {
+        el.style.gridTemplateColumns = String(value);
+      }
+    },
+    gridRows: (el, 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);
     },
@@ -1443,4 +1545,4 @@ export {
   ApplicatorRegistry
 };
 
-//# debugId=6896ADAF94F7505464756E2164756E21
+//# debugId=4E66FE319E3D673364756E2164756E21