@hypen-space/web 0.2.11 → 0.3.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hypen-space/web",
-  "version": "0.2.11",
+  "version": "0.3.0",
   "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.11"
+    "@hypen-space/core": "^0.3.0"
   },
   "devDependencies": {
     "@types/bun": "latest",
@@ -79,6 +79,6 @@
   "repository": {
     "type": "git",
     "url": "https://github.com/hypen-lang/hypen-engine-rs.git",
-    "directory": "hypen-render-bun/packages/web"
+    "directory": "hypen-web/packages/web"
   }
 }

package/src/canvas/QUICKSTART.md

@@ -39,9 +39,8 @@ type AppState = {
 // Define module
 const appModule = app
   .defineState<AppState>({ count: 0 })
-  .onAction("increment", async (action, state, next) => {
+  .onAction("increment", async ({ state }) => {
     state.count++;
-    next();
   })
   .build();
 
@@ -342,12 +341,11 @@ Object.assign(state, {
 ```typescript
 let timeoutId: number;
 
-.onAction("search", async (action, state, next) => {
+.onAction("search", async ({ action, state }) => {
   clearTimeout(timeoutId);
   timeoutId = setTimeout(() => {
     // Do expensive search
     state.results = search(action.query);
-    next();
   }, 300);
 })
 ```

package/src/dom/applicators/effects.ts

@@ -7,7 +7,51 @@ import type { ApplicatorHandler } from "./index.js";
 export const effectsHandlers: Record<string, ApplicatorHandler> = {
   // Shadow effects
   boxShadow: (el, value) => {
-    el.style.boxShadow = String(value);
+    if (typeof value === "string") {
+      el.style.boxShadow = value;
+    } else if (typeof value === "object" && value !== null) {
+      // Object format: { x, y, blur, spread, color, inset }
+      const obj = value as Record<string, any>;
+      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") {
+      // Just blur/elevation as number
+      el.style.boxShadow = `0 ${value}px ${value * 2}px rgba(0,0,0,0.2)`;
+    }
+  },
+
+  // Compound shadow with explicit offset support
+  shadow: (el, value) => {
+    if (typeof value === "object" && value !== null) {
+      const obj = value as Record<string, any>;
+      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") {
+      // Elevation-style: shadow grows with value
+      el.style.boxShadow = `0 ${value}px ${value * 2}px rgba(0,0,0,0.2)`;
+    } else {
+      el.style.boxShadow = String(value);
+    }
+  },
+
+  // Elevation (Material Design style)
+  elevation: (el, value) => {
+    const level = typeof value === "number" ? value : parseInt(String(value), 10);
+    if (!isNaN(level) && level >= 0) {
+      // Map elevation to box-shadow similar to Material Design
+      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) => {