npm - @hypen-space/web - Versions diffs - 0.2.0 - Mend

@hypen-space/web 0.2.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (195) hide show

package/dist/chunk-2s02mkzs.js +32 -0
package/dist/chunk-2s02mkzs.js.map +9 -0
package/dist/src/canvas/accessibility.js +152 -0
package/dist/src/canvas/accessibility.js.map +10 -0
package/dist/src/canvas/events.js +198 -0
package/dist/src/canvas/events.js.map +10 -0
package/dist/src/canvas/index.js +28 -0
package/dist/src/canvas/index.js.map +9 -0
package/dist/src/canvas/input.js +132 -0
package/dist/src/canvas/input.js.map +10 -0
package/dist/src/canvas/layout.js +309 -0
package/dist/src/canvas/layout.js.map +10 -0
package/dist/src/canvas/paint.js +878 -0
package/dist/src/canvas/paint.js.map +10 -0
package/dist/src/canvas/renderer.js +276 -0
package/dist/src/canvas/renderer.js.map +10 -0
package/dist/src/canvas/text.js +118 -0
package/dist/src/canvas/text.js.map +10 -0
package/dist/src/canvas/types.js +2 -0
package/dist/src/canvas/types.js.map +9 -0
package/dist/src/canvas/utils.js +139 -0
package/dist/src/canvas/utils.js.map +10 -0
package/dist/src/dom/applicators/advanced-layout.js +111 -0
package/dist/src/dom/applicators/advanced-layout.js.map +10 -0
package/dist/src/dom/applicators/background.js +54 -0
package/dist/src/dom/applicators/background.js.map +10 -0
package/dist/src/dom/applicators/border.js +33 -0
package/dist/src/dom/applicators/border.js.map +10 -0
package/dist/src/dom/applicators/color.js +36 -0
package/dist/src/dom/applicators/color.js.map +10 -0
package/dist/src/dom/applicators/display.js +57 -0
package/dist/src/dom/applicators/display.js.map +10 -0
package/dist/src/dom/applicators/effects.js +89 -0
package/dist/src/dom/applicators/effects.js.map +10 -0
package/dist/src/dom/applicators/events.js +518 -0
package/dist/src/dom/applicators/events.js.map +10 -0
package/dist/src/dom/applicators/font.js +39 -0
package/dist/src/dom/applicators/font.js.map +10 -0
package/dist/src/dom/applicators/index.js +296 -0
package/dist/src/dom/applicators/index.js.map +10 -0
package/dist/src/dom/applicators/layout.js +86 -0
package/dist/src/dom/applicators/layout.js.map +10 -0
package/dist/src/dom/applicators/margin.js +32 -0
package/dist/src/dom/applicators/margin.js.map +10 -0
package/dist/src/dom/applicators/padding.js +35 -0
package/dist/src/dom/applicators/padding.js.map +10 -0
package/dist/src/dom/applicators/size.js +42 -0
package/dist/src/dom/applicators/size.js.map +10 -0
package/dist/src/dom/applicators/transform.js +92 -0
package/dist/src/dom/applicators/transform.js.map +10 -0
package/dist/src/dom/applicators/transition.js +66 -0
package/dist/src/dom/applicators/transition.js.map +10 -0
package/dist/src/dom/applicators/typography.js +87 -0
package/dist/src/dom/applicators/typography.js.map +10 -0
package/dist/src/dom/canvas/index.js +50 -0
package/dist/src/dom/canvas/index.js.map +10 -0
package/dist/src/dom/components/audio.js +48 -0
package/dist/src/dom/components/audio.js.map +10 -0
package/dist/src/dom/components/avatar.js +58 -0
package/dist/src/dom/components/avatar.js.map +10 -0
package/dist/src/dom/components/badge.js +55 -0
package/dist/src/dom/components/badge.js.map +10 -0
package/dist/src/dom/components/button.js +29 -0
package/dist/src/dom/components/button.js.map +10 -0
package/dist/src/dom/components/card.js +33 -0
package/dist/src/dom/components/card.js.map +10 -0
package/dist/src/dom/components/center.js +32 -0
package/dist/src/dom/components/center.js.map +10 -0
package/dist/src/dom/components/checkbox.js +54 -0
package/dist/src/dom/components/checkbox.js.map +10 -0
package/dist/src/dom/components/column.js +31 -0
package/dist/src/dom/components/column.js.map +10 -0
package/dist/src/dom/components/container.js +29 -0
package/dist/src/dom/components/container.js.map +10 -0
package/dist/src/dom/components/divider.js +45 -0
package/dist/src/dom/components/divider.js.map +10 -0
package/dist/src/dom/components/grid.js +44 -0
package/dist/src/dom/components/grid.js.map +10 -0
package/dist/src/dom/components/heading.js +47 -0
package/dist/src/dom/components/heading.js.map +10 -0
package/dist/src/dom/components/image.js +39 -0
package/dist/src/dom/components/image.js.map +10 -0
package/dist/src/dom/components/index.js +217 -0
package/dist/src/dom/components/index.js.map +10 -0
package/dist/src/dom/components/input.js +41 -0
package/dist/src/dom/components/input.js.map +10 -0
package/dist/src/dom/components/link.js +42 -0
package/dist/src/dom/components/link.js.map +10 -0
package/dist/src/dom/components/list.js +42 -0
package/dist/src/dom/components/list.js.map +10 -0
package/dist/src/dom/components/paragraph.js +35 -0
package/dist/src/dom/components/paragraph.js.map +10 -0
package/dist/src/dom/components/progressbar.js +57 -0
package/dist/src/dom/components/progressbar.js.map +10 -0
package/dist/src/dom/components/route.js +44 -0
package/dist/src/dom/components/route.js.map +10 -0
package/dist/src/dom/components/router.js +33 -0
package/dist/src/dom/components/router.js.map +10 -0
package/dist/src/dom/components/row.js +31 -0
package/dist/src/dom/components/row.js.map +10 -0
package/dist/src/dom/components/select.js +57 -0
package/dist/src/dom/components/select.js.map +10 -0
package/dist/src/dom/components/slider.js +48 -0
package/dist/src/dom/components/slider.js.map +10 -0
package/dist/src/dom/components/spacer.js +30 -0
package/dist/src/dom/components/spacer.js.map +10 -0
package/dist/src/dom/components/spinner.js +65 -0
package/dist/src/dom/components/spinner.js.map +10 -0
package/dist/src/dom/components/stack.js +45 -0
package/dist/src/dom/components/stack.js.map +10 -0
package/dist/src/dom/components/switch.js +83 -0
package/dist/src/dom/components/switch.js.map +10 -0
package/dist/src/dom/components/text.js +37 -0
package/dist/src/dom/components/text.js.map +10 -0
package/dist/src/dom/components/textarea.js +51 -0
package/dist/src/dom/components/textarea.js.map +10 -0
package/dist/src/dom/components/video.js +51 -0
package/dist/src/dom/components/video.js.map +10 -0
package/dist/src/dom/debug.js +170 -0
package/dist/src/dom/debug.js.map +10 -0
package/dist/src/dom/events.js +112 -0
package/dist/src/dom/events.js.map +10 -0
package/dist/src/dom/index.js +73 -0
package/dist/src/dom/index.js.map +9 -0
package/dist/src/dom/renderer.js +277 -0
package/dist/src/dom/renderer.js.map +10 -0
package/dist/src/index.js +89 -0
package/dist/src/index.js.map +9 -0
package/package.json +84 -0
package/src/canvas/QUICKSTART.md +421 -0
package/src/canvas/README.md +376 -0
package/src/canvas/accessibility.ts +218 -0
package/src/canvas/events.ts +307 -0
package/src/canvas/index.ts +35 -0
package/src/canvas/input.ts +210 -0
package/src/canvas/layout.ts +401 -0
package/src/canvas/paint.ts +1321 -0
package/src/canvas/renderer.ts +422 -0
package/src/canvas/text.ts +182 -0
package/src/canvas/types.ts +137 -0
package/src/canvas/utils.ts +218 -0
package/src/dom/README.md +265 -0
package/src/dom/applicators/advanced-layout.ts +128 -0
package/src/dom/applicators/background.ts +50 -0
package/src/dom/applicators/border.ts +19 -0
package/src/dom/applicators/color.ts +23 -0
package/src/dom/applicators/display.ts +54 -0
package/src/dom/applicators/effects.ts +97 -0
package/src/dom/applicators/events.ts +689 -0
package/src/dom/applicators/font.ts +27 -0
package/src/dom/applicators/index.ts +354 -0
package/src/dom/applicators/layout.ts +92 -0
package/src/dom/applicators/margin.ts +18 -0
package/src/dom/applicators/padding.ts +18 -0
package/src/dom/applicators/size.ts +31 -0
package/src/dom/applicators/transform.ts +93 -0
package/src/dom/applicators/transition.ts +65 -0
package/src/dom/applicators/typography.ts +91 -0
package/src/dom/canvas/index.ts +60 -0
package/src/dom/components/audio.ts +45 -0
package/src/dom/components/avatar.ts +49 -0
package/src/dom/components/badge.ts +45 -0
package/src/dom/components/button.ts +13 -0
package/src/dom/components/card.ts +19 -0
package/src/dom/components/center.ts +16 -0
package/src/dom/components/checkbox.ts +54 -0
package/src/dom/components/column.ts +15 -0
package/src/dom/components/container.ts +13 -0
package/src/dom/components/divider.ts +37 -0
package/src/dom/components/grid.ts +40 -0
package/src/dom/components/heading.ts +41 -0
package/src/dom/components/image.ts +27 -0
package/src/dom/components/index.ts +115 -0
package/src/dom/components/input.ts +29 -0
package/src/dom/components/link.ts +35 -0
package/src/dom/components/list.ts +30 -0
package/src/dom/components/paragraph.ts +23 -0
package/src/dom/components/progressbar.ts +51 -0
package/src/dom/components/route.ts +37 -0
package/src/dom/components/router.ts +22 -0
package/src/dom/components/row.ts +15 -0
package/src/dom/components/select.ts +56 -0
package/src/dom/components/slider.ts +45 -0
package/src/dom/components/spacer.ts +16 -0
package/src/dom/components/spinner.ts +60 -0
package/src/dom/components/stack.ts +34 -0
package/src/dom/components/switch.ts +86 -0
package/src/dom/components/text.ts +24 -0
package/src/dom/components/textarea.ts +50 -0
package/src/dom/components/video.ts +50 -0
package/src/dom/debug.ts +247 -0
package/src/dom/events.ts +168 -0
package/src/dom/index.ts +11 -0
package/src/dom/renderer.ts +327 -0
package/src/index.ts +56 -0

package/package.json ADDED Viewed

@@ -0,0 +1,84 @@
+{
+  "name": "@hypen-space/web",
+  "version": "0.2.0",
+  "description": "Hypen web renderers - DOM and Canvas rendering for browsers",
+  "type": "module",
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "browser": "./dist/index.js",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "browser": "./dist/index.js",
+      "bun": "./src/index.ts",
+      "import": "./dist/index.js",
+      "default": "./dist/index.js"
+    },
+    "./dom": {
+      "types": "./dist/dom/index.d.ts",
+      "browser": "./dist/dom/index.js",
+      "bun": "./src/dom/index.ts",
+      "import": "./dist/dom/index.js",
+      "default": "./dist/dom/index.js"
+    },
+    "./canvas": {
+      "types": "./dist/canvas/index.d.ts",
+      "browser": "./dist/canvas/index.js",
+      "bun": "./src/canvas/index.ts",
+      "import": "./dist/canvas/index.js",
+      "default": "./dist/canvas/index.js"
+    },
+    "./hypen": {
+      "types": "./dist/hypen.d.ts",
+      "browser": "./dist/hypen.js",
+      "bun": "./src/hypen.ts",
+      "import": "./dist/hypen.js",
+      "default": "./dist/hypen.js"
+    }
+  },
+  "files": [
+    "dist",
+    "src"
+  ],
+  "scripts": {
+    "build": "bun run build.ts",
+    "build:types": "tsc --emitDeclarationOnly",
+    "typecheck": "tsc --noEmit",
+    "clean": "rm -rf dist"
+  },
+  "dependencies": {
+    "@hypen-space/core": "workspace:*"
+  },
+  "devDependencies": {
+    "@types/bun": "latest",
+    "typescript": "^5"
+  },
+  "peerDependencies": {
+    "typescript": "^5"
+  },
+  "peerDependenciesMeta": {
+    "typescript": {
+      "optional": true
+    }
+  },
+  "keywords": [
+    "hypen",
+    "ui",
+    "dom",
+    "canvas",
+    "renderer",
+    "browser"
+  ],
+  "engines": {
+    "node": ">=18.0.0"
+  },
+  "sideEffects": false,
+  "author": "Ian Rumac",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/hypen-lang/hypen-engine-rs.git",
+    "directory": "hypen-render-bun/packages/web"
+  }
+}

package/src/canvas/QUICKSTART.md ADDED Viewed

@@ -0,0 +1,421 @@
+# Canvas Renderer Quick Start
+Get started with the Hypen Canvas Renderer in 5 minutes.
+## Installation
+```bash
+bun add @hypen/core
+```
+## Basic Setup
+### 1. Create HTML File
+```html
+<!DOCTYPE html>
+<html>
+<head>
+  <title>My Canvas App</title>
+</head>
+<body>
+  <canvas id="app" width="800" height="600"></canvas>
+  <script type="module" src="./app.ts"></script>
+</body>
+</html>
+```
+### 2. Create App (`app.ts`)
+```typescript
+import { Engine, app, HypenModuleInstance } from "@hypen/core";
+import { CanvasRenderer } from "@hypen/core/canvas";
+// Define state
+type AppState = {
+  count: number;
+};
+// Define module
+const appModule = app
+  .defineState<AppState>({ count: 0 })
+  .onAction("increment", async (action, state, next) => {
+    state.count++;
+    next();
+  })
+  .build();
+// Setup
+async function main() {
+  // Get canvas
+  const canvas = document.getElementById("app") as HTMLCanvasElement;
+  // Initialize engine
+  const engine = new Engine();
+  await engine.init();
+  // Create renderer
+  const renderer = new CanvasRenderer(canvas, engine, {
+    devicePixelRatio: window.devicePixelRatio,
+    backgroundColor: "#ffffff",
+  });
+  // Connect renderer
+  engine.setRenderCallback((patches) => {
+    renderer.applyPatches(patches);
+  });
+  // Create module
+  const instance = new HypenModuleInstance(engine, appModule);
+  // Render UI
+  await engine.renderSource(`
+    Column {
+      padding: 20
+      gap: 10
+      Text("Count: \${state.count}") {
+        fontSize: 24
+      }
+      Button("@actions.increment") {
+        padding: 10
+        backgroundColor: #007bff
+        borderRadius: 4
+        Text("Increment") {
+          color: white
+        }
+      }
+    }
+  `);
+}
+main();
+```
+### 3. Run
+```bash
+bun app.ts
+```
+Open `http://localhost:3000` (or your dev server) and you'll see your app!
+## Features Overview
+### Layouts
+```typescript
+// Vertical layout
+Column {
+  gap: 10
+  padding: 20
+  Text("Item 1")
+  Text("Item 2")
+}
+// Horizontal layout
+Row {
+  gap: 5
+  justifyContent: center
+  Text("Left")
+  Text("Right")
+}
+```
+### Styling
+```typescript
+Text("Styled Text") {
+  fontSize: 18
+  fontWeight: bold
+  color: #333333
+  padding: 10
+  backgroundColor: #f0f0f0
+  borderRadius: 4
+}
+```
+### Buttons
+```typescript
+Button("@actions.save") {
+  padding: 12
+  backgroundColor: #28a745
+  borderRadius: 6
+  Text("Save") {
+    color: white
+    fontSize: 16
+    fontWeight: 500
+  }
+}
+```
+### Inputs
+```typescript
+Input {
+  value: "\${state.name}"
+  placeholder: "Enter name"
+  padding: 8
+  fontSize: 14
+}
+```
+## Common Patterns
+### Counter
+```typescript
+Column {
+  Row {
+    gap: 10
+    Button("@actions.decrement") {
+      Text("-")
+    }
+    Text("\${state.count}") {
+      fontSize: 24
+    }
+    Button("@actions.increment") {
+      Text("+")
+    }
+  }
+}
+```
+### Form
+```typescript
+Column {
+  gap: 15
+  padding: 20
+  Text("Login") {
+    fontSize: 24
+    fontWeight: bold
+  }
+  Input {
+    placeholder: "Username"
+    value: "\${state.username}"
+  }
+  Input {
+    placeholder: "Password"
+    type: password
+    value: "\${state.password}"
+  }
+  Button("@actions.login") {
+    Text("Login")
+  }
+}
+```
+### Card
+```typescript
+Container {
+  padding: 20
+  backgroundColor: white
+  borderRadius: 8
+  borderWidth: 1
+  borderColor: #e0e0e0
+  Column {
+    gap: 10
+    Text("Card Title") {
+      fontSize: 20
+      fontWeight: bold
+    }
+    Text("Card content goes here")
+    Button("@actions.action") {
+      Text("Action")
+    }
+  }
+}
+```
+## Configuration Options
+```typescript
+const renderer = new CanvasRenderer(canvas, engine, {
+  // Display
+  devicePixelRatio: window.devicePixelRatio,  // HiDPI support
+  backgroundColor: "#ffffff",                  // Canvas background
+  // Features
+  enableAccessibility: true,      // Screen reader support
+  enableHitTesting: true,         // Mouse events
+  enableInputOverlay: true,       // Text input support
+  // Debug
+  showLayoutBounds: false,        // Show red boxes around elements
+  logPerformance: false,          // Log FPS to console
+});
+```
+## Custom Painters
+Draw custom components:
+```typescript
+renderer.registerPainter("Circle", (ctx, node) => {
+  const layout = node.layout!;
+  const radius = Math.min(layout.width, layout.height) / 2;
+  const centerX = layout.x + layout.width / 2;
+  const centerY = layout.y + layout.height / 2;
+  ctx.fillStyle = node.props.color || "#000";
+  ctx.beginPath();
+  ctx.arc(centerX, centerY, radius, 0, Math.PI * 2);
+  ctx.fill();
+});
+```
+Use in Hypen DSL:
+```typescript
+Circle {
+  width: 100
+  height: 100
+  color: #ff0000
+}
+```
+## Responsive Canvas
+Make canvas responsive:
+```typescript
+function setupCanvas() {
+  const canvas = document.getElementById("app") as HTMLCanvasElement;
+  function resize() {
+    const dpr = window.devicePixelRatio;
+    canvas.width = window.innerWidth * dpr;
+    canvas.height = window.innerHeight * dpr;
+    canvas.style.width = `${window.innerWidth}px`;
+    canvas.style.height = `${window.innerHeight}px`;
+    // Trigger re-render
+    engine.renderSource(ui);
+  }
+  window.addEventListener("resize", resize);
+  resize();
+  return canvas;
+}
+```
+## Performance Tips
+### 1. Batch Updates
+```typescript
+// Bad: Multiple updates trigger multiple renders
+state.count = 1;
+state.name = "Alice";
+state.active = true;
+// Good: Single update
+Object.assign(state, {
+  count: 1,
+  name: "Alice",
+  active: true,
+});
+```
+### 2. Debounce Real-time Updates
+```typescript
+let timeoutId: number;
+.onAction("search", async (action, state, next) => {
+  clearTimeout(timeoutId);
+  timeoutId = setTimeout(() => {
+    // Do expensive search
+    state.results = search(action.query);
+    next();
+  }, 300);
+})
+```
+### 3. Measure Performance
+```typescript
+const renderer = new CanvasRenderer(canvas, engine, {
+  logPerformance: true,  // Logs FPS and frame times
+});
+```
+## Troubleshooting
+### Canvas is Blurry
+Make sure to set `devicePixelRatio`:
+```typescript
+const renderer = new CanvasRenderer(canvas, engine, {
+  devicePixelRatio: window.devicePixelRatio,
+});
+```
+### Text Input Not Working
+Ensure `enableInputOverlay` is true:
+```typescript
+const renderer = new CanvasRenderer(canvas, engine, {
+  enableInputOverlay: true,
+});
+```
+### Nothing Renders
+1. Check canvas size is not 0x0
+2. Ensure engine is initialized: `await engine.init()`
+3. Check console for errors
+4. Enable debug mode: `showLayoutBounds: true`
+### Poor Performance
+1. Enable performance logging: `logPerformance: true`
+2. Check if too many elements (> 1000)
+3. Reduce update frequency
+4. Consider layer caching (future feature)
+## Next Steps
+- Read the [Canvas Renderer README](./README.md)
+- See [Canvas vs DOM comparison](../../docs/CANVAS_VS_DOM.md)
+- Check the [implementation plan](./plan.md)
+- Try the [example](../../examples/canvas-counter.ts)
+## Getting Help
+- Check the [main documentation](../../README.md)
+- Look at [examples](../../examples/)
+- File an issue on GitHub
+Happy coding! 🎨