@hypen-space/web 0.2.0

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

@@ -0,0 +1,128 @@
+/**
+ * Advanced Layout Applicators (Flexbox, Grid, Positioning)
+ */
+
+import type { ApplicatorHandler } from "./index.js";
+
+export const advancedLayoutHandlers: Record<string, ApplicatorHandler> = {
+  // Flexbox properties
+  flexDirection: (el, value) => {
+    el.style.flexDirection = String(value);
+  },
+
+  flexWrap: (el, value) => {
+    el.style.flexWrap = String(value);
+  },
+
+  flexBasis: (el, value) => {
+    el.style.flexBasis = typeof value === "number" ? `${value}px` : String(value);
+  },
+
+  justifyContent: (el, value) => {
+    el.style.justifyContent = String(value);
+  },
+
+  alignItems: (el, value) => {
+    el.style.alignItems = String(value);
+  },
+
+  alignContent: (el, value) => {
+    el.style.alignContent = String(value);
+  },
+
+  alignSelf: (el, value) => {
+    el.style.alignSelf = String(value);
+  },
+
+  order: (el, value) => {
+    el.style.order = String(value);
+  },
+
+  // Grid properties
+  gridTemplateColumns: (el, value) => {
+    el.style.gridTemplateColumns = String(value);
+  },
+
+  gridTemplateRows: (el, value) => {
+    el.style.gridTemplateRows = String(value);
+  },
+
+  gridTemplateAreas: (el, value) => {
+    el.style.gridTemplateAreas = String(value);
+  },
+
+  gridColumn: (el, value) => {
+    el.style.gridColumn = String(value);
+  },
+
+  gridRow: (el, value) => {
+    el.style.gridRow = String(value);
+  },
+
+  gridArea: (el, value) => {
+    el.style.gridArea = String(value);
+  },
+
+  gridAutoFlow: (el, value) => {
+    el.style.gridAutoFlow = String(value);
+  },
+
+  gridAutoColumns: (el, value) => {
+    el.style.gridAutoColumns = String(value);
+  },
+
+  gridAutoRows: (el, value) => {
+    el.style.gridAutoRows = String(value);
+  },
+
+  rowGap: (el, value) => {
+    el.style.rowGap = typeof value === "number" ? `${value}px` : String(value);
+  },
+
+  columnGap: (el, value) => {
+    el.style.columnGap = typeof value === "number" ? `${value}px` : String(value);
+  },
+
+  placeItems: (el, value) => {
+    el.style.placeItems = String(value);
+  },
+
+  placeContent: (el, value) => {
+    el.style.placeContent = String(value);
+  },
+
+  placeSelf: (el, value) => {
+    el.style.placeSelf = String(value);
+  },
+
+  // Positioning
+  position: (el, value) => {
+    el.style.position = String(value);
+  },
+
+  top: (el, value) => {
+    el.style.top = typeof value === "number" ? `${value}px` : String(value);
+  },
+
+  right: (el, value) => {
+    el.style.right = typeof value === "number" ? `${value}px` : String(value);
+  },
+
+  bottom: (el, value) => {
+    el.style.bottom = typeof value === "number" ? `${value}px` : String(value);
+  },
+
+  left: (el, value) => {
+    el.style.left = typeof value === "number" ? `${value}px` : String(value);
+  },
+
+  inset: (el, value) => {
+    el.style.inset = typeof value === "number" ? `${value}px` : String(value);
+  },
+
+  zIndex: (el, value) => {
+    el.style.zIndex = String(value);
+  },
+};
+
+

package/src/dom/applicators/background.ts

@@ -0,0 +1,50 @@
+/**
+ * Background Applicators
+ */
+
+import type { ApplicatorHandler } from "./index.js";
+
+export const backgroundHandlers: Record<string, ApplicatorHandler> = {
+  backgroundImage: (el, value) => {
+    el.style.backgroundImage = String(value);
+  },
+
+  backgroundSize: (el, value) => {
+    el.style.backgroundSize = String(value);
+  },
+
+  backgroundPosition: (el, value) => {
+    el.style.backgroundPosition = String(value);
+  },
+
+  backgroundRepeat: (el, value) => {
+    el.style.backgroundRepeat = String(value);
+  },
+
+  backgroundAttachment: (el, value) => {
+    el.style.backgroundAttachment = String(value);
+  },
+
+  backgroundClip: (el, value) => {
+    el.style.backgroundClip = String(value);
+  },
+
+  backgroundOrigin: (el, value) => {
+    el.style.backgroundOrigin = String(value);
+  },
+
+  // Gradient helpers
+  linearGradient: (el, value) => {
+    el.style.backgroundImage = `linear-gradient(${value})`;
+  },
+
+  radialGradient: (el, value) => {
+    el.style.backgroundImage = `radial-gradient(${value})`;
+  },
+
+  conicGradient: (el, value) => {
+    el.style.backgroundImage = `conic-gradient(${value})`;
+  },
+};
+
+

package/src/dom/applicators/border.ts

@@ -0,0 +1,19 @@
+/**
+ * Border Applicators
+ */
+
+import type { ApplicatorHandler } from "./index.js";
+
+export const borderHandlers: Record<string, ApplicatorHandler> = {
+  borderWidth: (el, value) => {
+    el.style.borderWidth = typeof value === "number" ? `${value}px` : String(value);
+  },
+
+  borderStyle: (el, value) => {
+    el.style.borderStyle = String(value);
+  },
+
+  borderRadius: (el, value) => {
+    el.style.borderRadius = typeof value === "number" ? `${value}px` : String(value);
+  },
+};

package/src/dom/applicators/color.ts

@@ -0,0 +1,23 @@
+/**
+ * Color Applicators
+ */
+
+import type { ApplicatorHandler } from "./index.js";
+
+export const colorHandlers: Record<string, ApplicatorHandler> = {
+  color: (el, value) => {
+    el.style.color = String(value);
+  },
+
+  backgroundColor: (el, value) => {
+    el.style.backgroundColor = String(value);
+  },
+
+  borderColor: (el, value) => {
+    el.style.borderColor = String(value);
+  },
+
+  opacity: (el, value) => {
+    el.style.opacity = String(value);
+  },
+};

package/src/dom/applicators/display.ts

@@ -0,0 +1,54 @@
+/**
+ * Display and Visibility Applicators
+ */
+
+import type { ApplicatorHandler } from "./index.js";
+
+export const displayHandlers: Record<string, ApplicatorHandler> = {
+  display: (el, value) => {
+    el.style.display = String(value);
+  },
+
+  visibility: (el, value) => {
+    el.style.visibility = String(value);
+  },
+
+  overflowX: (el, value) => {
+    el.style.overflowX = String(value);
+  },
+
+  overflowY: (el, value) => {
+    el.style.overflowY = String(value);
+  },
+
+  pointerEvents: (el, value) => {
+    el.style.pointerEvents = String(value);
+  },
+
+  userSelect: (el, value) => {
+    el.style.userSelect = String(value);
+  },
+
+  resize: (el, value) => {
+    el.style.resize = String(value);
+  },
+
+  boxSizing: (el, value) => {
+    el.style.boxSizing = String(value);
+  },
+
+  // Sizing helpers
+  aspectRatio: (el, value) => {
+    el.style.aspectRatio = String(value);
+  },
+
+  objectFit: (el, value) => {
+    el.style.objectFit = String(value);
+  },
+
+  objectPosition: (el, value) => {
+    el.style.objectPosition = String(value);
+  },
+};
+
+

package/src/dom/applicators/effects.ts

@@ -0,0 +1,97 @@
+/**
+ * Visual Effects Applicators (Shadows, Filters, Blend Modes)
+ */
+
+import type { ApplicatorHandler } from "./index.js";
+
+export const effectsHandlers: Record<string, ApplicatorHandler> = {
+  // Shadow effects
+  boxShadow: (el, value) => {
+    el.style.boxShadow = String(value);
+  },
+
+  textShadow: (el, value) => {
+    el.style.textShadow = String(value);
+  },
+
+  // Filter effects
+  filter: (el, value) => {
+    el.style.filter = String(value);
+  },
+
+  backdropFilter: (el, value) => {
+    el.style.backdropFilter = String(value);
+  },
+
+  // Individual filter functions
+  blur: (el, value) => {
+    const val = typeof value === "number" ? `${value}px` : String(value);
+    const current = el.style.filter || "";
+    el.style.filter = current ? `${current} blur(${val})` : `blur(${val})`;
+  },
+
+  brightness: (el, value) => {
+    const current = el.style.filter || "";
+    el.style.filter = current ? `${current} brightness(${value})` : `brightness(${value})`;
+  },
+
+  contrast: (el, value) => {
+    const current = el.style.filter || "";
+    el.style.filter = current ? `${current} contrast(${value})` : `contrast(${value})`;
+  },
+
+  grayscale: (el, value) => {
+    const current = el.style.filter || "";
+    el.style.filter = current ? `${current} grayscale(${value})` : `grayscale(${value})`;
+  },
+
+  hueRotate: (el, value) => {
+    const val = String(value);
+    const current = el.style.filter || "";
+    el.style.filter = current ? `${current} hue-rotate(${val})` : `hue-rotate(${val})`;
+  },
+
+  invert: (el, value) => {
+    const current = el.style.filter || "";
+    el.style.filter = current ? `${current} invert(${value})` : `invert(${value})`;
+  },
+
+  saturate: (el, value) => {
+    const current = el.style.filter || "";
+    el.style.filter = current ? `${current} saturate(${value})` : `saturate(${value})`;
+  },
+
+  sepia: (el, value) => {
+    const current = el.style.filter || "";
+    el.style.filter = current ? `${current} sepia(${value})` : `sepia(${value})`;
+  },
+
+  dropShadow: (el, value) => {
+    const current = el.style.filter || "";
+    el.style.filter = current ? `${current} drop-shadow(${value})` : `drop-shadow(${value})`;
+  },
+
+  // Blend modes
+  mixBlendMode: (el, value) => {
+    el.style.mixBlendMode = String(value);
+  },
+
+  backgroundBlendMode: (el, value) => {
+    el.style.backgroundBlendMode = String(value);
+  },
+
+  // Clip and mask
+  clipPath: (el, value) => {
+    el.style.clipPath = String(value);
+  },
+
+  mask: (el, value) => {
+    el.style.mask = String(value);
+  },
+
+  maskImage: (el, value) => {
+    el.style.maskImage = String(value);
+  },
+};
+
+