@hypen-space/web 0.2.12 → 0.3.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hypen-space/web",
-  "version": "0.2.12",
+  "version": "0.3.1",
   "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.12"
+    "@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

@@ -5,7 +5,7 @@ Get started with the Hypen Canvas Renderer in 5 minutes.
 ## Installation
 
 ```bash
-bun add @hypen/core
+bun add @hypen-space/core
 ```
 
 ## Basic Setup
@@ -28,8 +28,8 @@ bun add @hypen/core
 ### 2. Create App (`app.ts`)
 
 ```typescript
-import { Engine, app, HypenModuleInstance } from "@hypen/core";
-import { CanvasRenderer } from "@hypen/core/canvas";
+import { Engine, app, HypenModuleInstance } from "@hypen-space/core";
+import { CanvasRenderer } from "@hypen-space/core/canvas";
 
 // Define state
 type AppState = {
@@ -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/canvas/README.md

@@ -14,8 +14,8 @@ The Canvas Renderer is a complete alternative to the DOM renderer that draws all
 ## Quick Start
 
 ```typescript
-import { Engine, app } from "@hypen/core";
-import { CanvasRenderer } from "@hypen/core/canvas";
+import { Engine, app } from "@hypen-space/core";
+import { CanvasRenderer } from "@hypen-space/core/canvas";
 
 // Setup canvas
 const canvas = document.getElementById("app") as HTMLCanvasElement;

package/src/canvas/renderer.ts

@@ -4,7 +4,7 @@
  * Main renderer class that orchestrates layout, painting, and events
  */
 
-import type { Renderer, Patch } from "@hypen/core";
+import type { Renderer, Patch } from "@hypen-space/core";
 
 // Interface for the engine that canvas renderer needs
 interface IEngine {

package/src/dom/README.md

@@ -38,8 +38,8 @@ src/dom/
 ### Browser Import
 
 ```typescript
-import { Engine, app, HypenModuleInstance } from "@hypen/core";
-import { DOMRenderer } from "@hypen/core/dom";
+import { Engine, app, HypenModuleInstance } from "@hypen-space/core";
+import { DOMRenderer } from "@hypen-space/core/dom";
 
 const engine = new Engine();
 await engine.init();
@@ -54,10 +54,10 @@ engine.setRenderCallback((patches) => {
 
 ```typescript
 // This will fail in Node.js/Bun (no DOM)
-import { DOMRenderer } from "@hypen/core/dom"; // ❌ Error
+import { DOMRenderer } from "@hypen-space/core/dom"; // ❌ Error
 
 // Use server-safe renderer instead
-import { ConsoleRenderer } from "@hypen/core"; // ✅ Works
+import { ConsoleRenderer } from "@hypen-space/core"; // ✅ Works
 ```
 
 ## Components

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) => {