@geometra/client 0.1.0

package/dist/client.d.ts

@@ -0,0 +1,26 @@
+import type { ComputedLayout } from 'textura';
+import type { Renderer, UIElement } from '@geometra/core';
+export interface TexturaClientOptions {
+    /** WebSocket URL to connect to. Default: 'ws://localhost:3100'. */
+    url?: string;
+    /** The renderer to paint with. */
+    renderer: Renderer;
+    /** Optional canvas element for forwarding pointer events. */
+    canvas?: HTMLCanvasElement;
+}
+export interface TexturaClient {
+    /** Current layout (if received). */
+    layout: ComputedLayout | null;
+    /** Current tree (if received). */
+    tree: UIElement | null;
+    /** Disconnect from server. */
+    close(): void;
+}
+/**
+ * Connect to a Textura server and render received geometry.
+ *
+ * The client is a thin paint layer — all layout computation happens server-side.
+ * Pointer events on the canvas are forwarded to the server for hit-testing.
+ */
+export declare function createClient(options: TexturaClientOptions): TexturaClient;
+//# sourceMappingURL=client.d.ts.map

package/dist/client.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"client.d.ts","sourceRoot":"","sources":["../src/client.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,SAAS,CAAA;AAC7C,OAAO,KAAK,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAA;AAqBzD,MAAM,WAAW,oBAAoB;IACnC,mEAAmE;IACnE,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ,kCAAkC;IAClC,QAAQ,EAAE,QAAQ,CAAA;IAClB,6DAA6D;IAC7D,MAAM,CAAC,EAAE,iBAAiB,CAAA;CAC3B;AAED,MAAM,WAAW,aAAa;IAC5B,oCAAoC;IACpC,MAAM,EAAE,cAAc,GAAG,IAAI,CAAA;IAC7B,kCAAkC;IAClC,IAAI,EAAE,SAAS,GAAG,IAAI,CAAA;IACtB,8BAA8B;IAC9B,KAAK,IAAI,IAAI,CAAA;CACd;AAqBD;;;;;GAKG;AACH,wBAAgB,YAAY,CAAC,OAAO,EAAE,oBAAoB,GAAG,aAAa,CAoEzE"}

package/dist/client.js

@@ -0,0 +1,82 @@
+/** Apply patches to a computed layout tree (mutates in place). */
+function applyPatches(layout, patches) {
+    for (const patch of patches) {
+        let node = layout;
+        for (const idx of patch.path) {
+            const child = node.children[idx];
+            if (!child)
+                break;
+            node = child;
+        }
+        if (patch.x !== undefined)
+            node.x = patch.x;
+        if (patch.y !== undefined)
+            node.y = patch.y;
+        if (patch.width !== undefined)
+            node.width = patch.width;
+        if (patch.height !== undefined)
+            node.height = patch.height;
+    }
+}
+/**
+ * Connect to a Textura server and render received geometry.
+ *
+ * The client is a thin paint layer — all layout computation happens server-side.
+ * Pointer events on the canvas are forwarded to the server for hit-testing.
+ */
+export function createClient(options) {
+    const url = options.url ?? 'ws://localhost:3100';
+    const { renderer, canvas } = options;
+    const state = {
+        layout: null,
+        tree: null,
+        close() {
+            ws.close();
+            cleanup();
+        },
+    };
+    const ws = new WebSocket(url);
+    ws.addEventListener('message', (event) => {
+        const msg = JSON.parse(String(event.data));
+        if (msg.type === 'frame') {
+            state.layout = msg.layout;
+            state.tree = msg.tree;
+            renderer.render(msg.layout, msg.tree);
+        }
+        else if (msg.type === 'patch' && state.layout && state.tree) {
+            applyPatches(state.layout, msg.patches);
+            renderer.render(state.layout, state.tree);
+        }
+    });
+    // Forward pointer events to server
+    const sendEvent = (eventType, e) => {
+        if (ws.readyState !== WebSocket.OPEN)
+            return;
+        const rect = canvas?.getBoundingClientRect();
+        const x = rect ? e.clientX - rect.left : e.clientX;
+        const y = rect ? e.clientY - rect.top : e.clientY;
+        ws.send(JSON.stringify({ type: 'event', eventType, x, y }));
+    };
+    const handlers = [];
+    if (canvas) {
+        const onClick = (e) => sendEvent('onClick', e);
+        const onPointerDown = (e) => sendEvent('onPointerDown', e);
+        const onPointerUp = (e) => sendEvent('onPointerUp', e);
+        const onPointerMove = (e) => sendEvent('onPointerMove', e);
+        canvas.addEventListener('click', onClick);
+        canvas.addEventListener('pointerdown', onPointerDown);
+        canvas.addEventListener('pointerup', onPointerUp);
+        canvas.addEventListener('pointermove', onPointerMove);
+        handlers.push(['click', onClick], ['pointerdown', onPointerDown], ['pointerup', onPointerUp], ['pointermove', onPointerMove]);
+    }
+    function cleanup() {
+        if (canvas) {
+            for (const [event, handler] of handlers) {
+                canvas.removeEventListener(event, handler);
+            }
+        }
+        renderer.destroy();
+    }
+    return state;
+}
+//# sourceMappingURL=client.js.map

package/dist/client.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"client.js","sourceRoot":"","sources":["../src/client.ts"],"names":[],"mappings":"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"}

package/dist/index.d.ts

@@ -0,0 +1,3 @@
+export { createClient } from './client.js';
+export type { TexturaClient, TexturaClientOptions } from './client.js';
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,aAAa,CAAA;AAC1C,YAAY,EAAE,aAAa,EAAE,oBAAoB,EAAE,MAAM,aAAa,CAAA"}

package/dist/index.js

@@ -0,0 +1,2 @@
+export { createClient } from './client.js';
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,aAAa,CAAA"}

package/package.json

@@ -0,0 +1,38 @@
+{
+  "name": "@geometra/client",
+  "version": "0.1.0",
+  "description": "Thin client that receives server-computed geometry and paints via renderer",
+  "license": "MIT",
+  "type": "module",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/razroo/textrura-framework",
+    "directory": "packages/client"
+  },
+  "homepage": "https://razroo.github.io/textrura-framework",
+  "keywords": [
+    "textura",
+    "client",
+    "websocket",
+    "thin-client",
+    "dom-free"
+  ],
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build": "rm -rf dist && tsc -p tsconfig.build.json",
+    "check": "tsc --noEmit"
+  },
+  "dependencies": {
+    "@geometra/core": "^0.1.0"
+  }
+}