@hypen-space/web 0.2.12 → 0.3.0

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

@@ -36,7 +36,43 @@ var effectsHandlers;
 var init_effects = __esm(() => {
   effectsHandlers = {
     boxShadow: (el, value) => {
-      el.style.boxShadow = String(value);
+      if (typeof value === "string") {
+        el.style.boxShadow = value;
+      } else if (typeof value === "object" && value !== null) {
+        const obj = value;
+        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 color = obj.color ?? "rgba(0,0,0,0.2)";
+        const inset = obj.inset ? "inset " : "";
+        el.style.boxShadow = `${inset}${x} ${y} ${blur} ${spread} ${color}`;
+      } else if (typeof value === "number") {
+        el.style.boxShadow = `0 ${value}px ${value * 2}px rgba(0,0,0,0.2)`;
+      }
+    },
+    shadow: (el, value) => {
+      if (typeof value === "object" && value !== null) {
+        const obj = value;
+        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 color = obj.color ?? "rgba(0,0,0,0.2)";
+        el.style.boxShadow = `${x} ${y} ${blur} ${color}`;
+      } else if (typeof value === "number") {
+        el.style.boxShadow = `0 ${value}px ${value * 2}px rgba(0,0,0,0.2)`;
+      } else {
+        el.style.boxShadow = String(value);
+      }
+    },
+    elevation: (el, value) => {
+      const level = typeof value === "number" ? value : parseInt(String(value), 10);
+      if (!isNaN(level) && level >= 0) {
+        const y = level * 0.5;
+        const blur = level * 1.5;
+        const opacity = Math.min(0.1 + level * 0.02, 0.4);
+        el.style.boxShadow = `0 ${y}px ${blur}px rgba(0,0,0,${opacity})`;
+      }
     },
     textShadow: (el, value) => {
       el.style.textShadow = String(value);
@@ -108,4 +144,4 @@ export {
   effectsHandlers
 };
 
-//# debugId=F77A90F9B32405B164756E2164756E21
+//# debugId=0F5BA22BBF40ACCD64756E2164756E21

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

@@ -2,9 +2,9 @@
   "version": 3,
   "sources": ["../src/dom/applicators/effects.ts"],
   "sourcesContent": [
-    "/**\n * Visual Effects Applicators (Shadows, Filters, Blend Modes)\n */\n\nimport type { ApplicatorHandler } from \"./index.js\";\n\nexport const effectsHandlers: Record<string, ApplicatorHandler> = {\n  // Shadow effects\n  boxShadow: (el, value) => {\n    el.style.boxShadow = String(value);\n  },\n\n  textShadow: (el, value) => {\n    el.style.textShadow = String(value);\n  },\n\n  // Filter effects\n  filter: (el, value) => {\n    el.style.filter = String(value);\n  },\n\n  backdropFilter: (el, value) => {\n    el.style.backdropFilter = String(value);\n  },\n\n  // Individual filter functions\n  blur: (el, value) => {\n    const val = typeof value === \"number\" ? `${value}px` : String(value);\n    const current = el.style.filter || \"\";\n    el.style.filter = current ? `${current} blur(${val})` : `blur(${val})`;\n  },\n\n  brightness: (el, value) => {\n    const current = el.style.filter || \"\";\n    el.style.filter = current ? `${current} brightness(${value})` : `brightness(${value})`;\n  },\n\n  contrast: (el, value) => {\n    const current = el.style.filter || \"\";\n    el.style.filter = current ? `${current} contrast(${value})` : `contrast(${value})`;\n  },\n\n  grayscale: (el, value) => {\n    const current = el.style.filter || \"\";\n    el.style.filter = current ? `${current} grayscale(${value})` : `grayscale(${value})`;\n  },\n\n  hueRotate: (el, value) => {\n    const val = String(value);\n    const current = el.style.filter || \"\";\n    el.style.filter = current ? `${current} hue-rotate(${val})` : `hue-rotate(${val})`;\n  },\n\n  invert: (el, value) => {\n    const current = el.style.filter || \"\";\n    el.style.filter = current ? `${current} invert(${value})` : `invert(${value})`;\n  },\n\n  saturate: (el, value) => {\n    const current = el.style.filter || \"\";\n    el.style.filter = current ? `${current} saturate(${value})` : `saturate(${value})`;\n  },\n\n  sepia: (el, value) => {\n    const current = el.style.filter || \"\";\n    el.style.filter = current ? `${current} sepia(${value})` : `sepia(${value})`;\n  },\n\n  dropShadow: (el, value) => {\n    const current = el.style.filter || \"\";\n    el.style.filter = current ? `${current} drop-shadow(${value})` : `drop-shadow(${value})`;\n  },\n\n  // Blend modes\n  mixBlendMode: (el, value) => {\n    el.style.mixBlendMode = String(value);\n  },\n\n  backgroundBlendMode: (el, value) => {\n    el.style.backgroundBlendMode = String(value);\n  },\n\n  // Clip and mask\n  clipPath: (el, value) => {\n    el.style.clipPath = String(value);\n  },\n\n  mask: (el, value) => {\n    el.style.mask = String(value);\n  },\n\n  maskImage: (el, value) => {\n    el.style.maskImage = String(value);\n  },\n};\n\n\n"
+    "/**\n * Visual Effects Applicators (Shadows, Filters, Blend Modes)\n */\n\nimport type { ApplicatorHandler } from \"./index.js\";\n\nexport const effectsHandlers: Record<string, ApplicatorHandler> = {\n  // Shadow effects\n  boxShadow: (el, value) => {\n    if (typeof value === \"string\") {\n      el.style.boxShadow = value;\n    } else if (typeof value === \"object\" && value !== null) {\n      // Object format: { x, y, blur, spread, color, inset }\n      const obj = value as Record<string, any>;\n      const x = typeof obj.x === \"number\" ? `${obj.x}px` : (obj.x ?? obj.offsetX ?? \"0px\");\n      const y = typeof obj.y === \"number\" ? `${obj.y}px` : (obj.y ?? obj.offsetY ?? \"0px\");\n      const blur = typeof obj.blur === \"number\" ? `${obj.blur}px` : (obj.blur ?? obj.radius ?? \"0px\");\n      const spread = typeof obj.spread === \"number\" ? `${obj.spread}px` : (obj.spread ?? \"0px\");\n      const color = obj.color ?? \"rgba(0,0,0,0.2)\";\n      const inset = obj.inset ? \"inset \" : \"\";\n      el.style.boxShadow = `${inset}${x} ${y} ${blur} ${spread} ${color}`;\n    } else if (typeof value === \"number\") {\n      // Just blur/elevation as number\n      el.style.boxShadow = `0 ${value}px ${value * 2}px rgba(0,0,0,0.2)`;\n    }\n  },\n\n  // Compound shadow with explicit offset support\n  shadow: (el, value) => {\n    if (typeof value === \"object\" && value !== null) {\n      const obj = value as Record<string, any>;\n      const x = typeof obj.x === \"number\" ? `${obj.x}px` : (obj.x ?? obj.offsetX ?? \"0px\");\n      const y = typeof obj.y === \"number\" ? `${obj.y}px` : (obj.y ?? obj.offsetY ?? \"0px\");\n      const blur = typeof obj.blur === \"number\" ? `${obj.blur}px` : (obj.blur ?? obj.radius ?? \"4px\");\n      const color = obj.color ?? \"rgba(0,0,0,0.2)\";\n      el.style.boxShadow = `${x} ${y} ${blur} ${color}`;\n    } else if (typeof value === \"number\") {\n      // Elevation-style: shadow grows with value\n      el.style.boxShadow = `0 ${value}px ${value * 2}px rgba(0,0,0,0.2)`;\n    } else {\n      el.style.boxShadow = String(value);\n    }\n  },\n\n  // Elevation (Material Design style)\n  elevation: (el, value) => {\n    const level = typeof value === \"number\" ? value : parseInt(String(value), 10);\n    if (!isNaN(level) && level >= 0) {\n      // Map elevation to box-shadow similar to Material Design\n      const y = level * 0.5;\n      const blur = level * 1.5;\n      const opacity = Math.min(0.1 + level * 0.02, 0.4);\n      el.style.boxShadow = `0 ${y}px ${blur}px rgba(0,0,0,${opacity})`;\n    }\n  },\n\n  textShadow: (el, value) => {\n    el.style.textShadow = String(value);\n  },\n\n  // Filter effects\n  filter: (el, value) => {\n    el.style.filter = String(value);\n  },\n\n  backdropFilter: (el, value) => {\n    el.style.backdropFilter = String(value);\n  },\n\n  // Individual filter functions\n  blur: (el, value) => {\n    const val = typeof value === \"number\" ? `${value}px` : String(value);\n    const current = el.style.filter || \"\";\n    el.style.filter = current ? `${current} blur(${val})` : `blur(${val})`;\n  },\n\n  brightness: (el, value) => {\n    const current = el.style.filter || \"\";\n    el.style.filter = current ? `${current} brightness(${value})` : `brightness(${value})`;\n  },\n\n  contrast: (el, value) => {\n    const current = el.style.filter || \"\";\n    el.style.filter = current ? `${current} contrast(${value})` : `contrast(${value})`;\n  },\n\n  grayscale: (el, value) => {\n    const current = el.style.filter || \"\";\n    el.style.filter = current ? `${current} grayscale(${value})` : `grayscale(${value})`;\n  },\n\n  hueRotate: (el, value) => {\n    const val = String(value);\n    const current = el.style.filter || \"\";\n    el.style.filter = current ? `${current} hue-rotate(${val})` : `hue-rotate(${val})`;\n  },\n\n  invert: (el, value) => {\n    const current = el.style.filter || \"\";\n    el.style.filter = current ? `${current} invert(${value})` : `invert(${value})`;\n  },\n\n  saturate: (el, value) => {\n    const current = el.style.filter || \"\";\n    el.style.filter = current ? `${current} saturate(${value})` : `saturate(${value})`;\n  },\n\n  sepia: (el, value) => {\n    const current = el.style.filter || \"\";\n    el.style.filter = current ? `${current} sepia(${value})` : `sepia(${value})`;\n  },\n\n  dropShadow: (el, value) => {\n    const current = el.style.filter || \"\";\n    el.style.filter = current ? `${current} drop-shadow(${value})` : `drop-shadow(${value})`;\n  },\n\n  // Blend modes\n  mixBlendMode: (el, value) => {\n    el.style.mixBlendMode = String(value);\n  },\n\n  backgroundBlendMode: (el, value) => {\n    el.style.backgroundBlendMode = String(value);\n  },\n\n  // Clip and mask\n  clipPath: (el, value) => {\n    el.style.clipPath = String(value);\n  },\n\n  mask: (el, value) => {\n    el.style.mask = String(value);\n  },\n\n  maskImage: (el, value) => {\n    el.style.maskImage = String(value);\n  },\n};\n\n\n"
   ],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAMa;AAAA;AAAA,oBAAqD;AAAA,IAEhE,WAAW,CAAC,IAAI,UAAU;AAAA,MACxB,GAAG,MAAM,YAAY,OAAO,KAAK;AAAA;AAAA,IAGnC,YAAY,CAAC,IAAI,UAAU;AAAA,MACzB,GAAG,MAAM,aAAa,OAAO,KAAK;AAAA;AAAA,IAIpC,QAAQ,CAAC,IAAI,UAAU;AAAA,MACrB,GAAG,MAAM,SAAS,OAAO,KAAK;AAAA;AAAA,IAGhC,gBAAgB,CAAC,IAAI,UAAU;AAAA,MAC7B,GAAG,MAAM,iBAAiB,OAAO,KAAK;AAAA;AAAA,IAIxC,MAAM,CAAC,IAAI,UAAU;AAAA,MACnB,MAAM,MAAM,OAAO,UAAU,WAAW,GAAG,YAAY,OAAO,KAAK;AAAA,MACnE,MAAM,UAAU,GAAG,MAAM,UAAU;AAAA,MACnC,GAAG,MAAM,SAAS,UAAU,GAAG,gBAAgB,SAAS,QAAQ;AAAA;AAAA,IAGlE,YAAY,CAAC,IAAI,UAAU;AAAA,MACzB,MAAM,UAAU,GAAG,MAAM,UAAU;AAAA,MACnC,GAAG,MAAM,SAAS,UAAU,GAAG,sBAAsB,WAAW,cAAc;AAAA;AAAA,IAGhF,UAAU,CAAC,IAAI,UAAU;AAAA,MACvB,MAAM,UAAU,GAAG,MAAM,UAAU;AAAA,MACnC,GAAG,MAAM,SAAS,UAAU,GAAG,oBAAoB,WAAW,YAAY;AAAA;AAAA,IAG5E,WAAW,CAAC,IAAI,UAAU;AAAA,MACxB,MAAM,UAAU,GAAG,MAAM,UAAU;AAAA,MACnC,GAAG,MAAM,SAAS,UAAU,GAAG,qBAAqB,WAAW,aAAa;AAAA;AAAA,IAG9E,WAAW,CAAC,IAAI,UAAU;AAAA,MACxB,MAAM,MAAM,OAAO,KAAK;AAAA,MACxB,MAAM,UAAU,GAAG,MAAM,UAAU;AAAA,MACnC,GAAG,MAAM,SAAS,UAAU,GAAG,sBAAsB,SAAS,cAAc;AAAA;AAAA,IAG9E,QAAQ,CAAC,IAAI,UAAU;AAAA,MACrB,MAAM,UAAU,GAAG,MAAM,UAAU;AAAA,MACnC,GAAG,MAAM,SAAS,UAAU,GAAG,kBAAkB,WAAW,UAAU;AAAA;AAAA,IAGxE,UAAU,CAAC,IAAI,UAAU;AAAA,MACvB,MAAM,UAAU,GAAG,MAAM,UAAU;AAAA,MACnC,GAAG,MAAM,SAAS,UAAU,GAAG,oBAAoB,WAAW,YAAY;AAAA;AAAA,IAG5E,OAAO,CAAC,IAAI,UAAU;AAAA,MACpB,MAAM,UAAU,GAAG,MAAM,UAAU;AAAA,MACnC,GAAG,MAAM,SAAS,UAAU,GAAG,iBAAiB,WAAW,SAAS;AAAA;AAAA,IAGtE,YAAY,CAAC,IAAI,UAAU;AAAA,MACzB,MAAM,UAAU,GAAG,MAAM,UAAU;AAAA,MACnC,GAAG,MAAM,SAAS,UAAU,GAAG,uBAAuB,WAAW,eAAe;AAAA;AAAA,IAIlF,cAAc,CAAC,IAAI,UAAU;AAAA,MAC3B,GAAG,MAAM,eAAe,OAAO,KAAK;AAAA;AAAA,IAGtC,qBAAqB,CAAC,IAAI,UAAU;AAAA,MAClC,GAAG,MAAM,sBAAsB,OAAO,KAAK;AAAA;AAAA,IAI7C,UAAU,CAAC,IAAI,UAAU;AAAA,MACvB,GAAG,MAAM,WAAW,OAAO,KAAK;AAAA;AAAA,IAGlC,MAAM,CAAC,IAAI,UAAU;AAAA,MACnB,GAAG,MAAM,OAAO,OAAO,KAAK;AAAA;AAAA,IAG9B,WAAW,CAAC,IAAI,UAAU;AAAA,MACxB,GAAG,MAAM,YAAY,OAAO,KAAK;AAAA;AAAA,EAErC;AAAA;",
-  "debugId": "F77A90F9B32405B164756E2164756E21",
+  "mappings": "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",
+  "debugId": "0F5BA22BBF40ACCD64756E2164756E21",
   "names": []
 }