gpui-react 0.1.7

package/README.md

@@ -0,0 +1,116 @@
+# React-GPUI Renderer
+
+A React renderer for GPUI (Zed's GPU-accelerated UI framework) using Bun native FFI.
+
+## Architecture
+
+```
+React Component (JSX)
+         ↓
+React Reconciler (src/reconciler/host-config.ts)
+         ↓
+Element Store (src/reconciler/element-store.ts)
+         ↓
+Bun FFI (src/reconciler/gpui-binding.ts)
+         ↓
+Rust FFI (rust/src/lib.rs)
+         ↓
+GPUI Runtime (rust/src/renderer.rs)
+         ↓
+GPU Rendering (GPUI)
+```
+
+## Project Structure
+
+```
+gpui-react/
+├── rust/              # Rust FFI library (cdylib)
+│   └── src/        # FFI exports, GPUI rendering, command bus
+├── src/reconciler/   # React reconciler, FFI bindings, element store
+└── demo/             # Demo applications (5 entry points)
+```
+
+## Quick Start
+
+### 1. Build Rust Library
+
+```bash
+cd rust && cargo build --release
+```
+
+### 2. Run Demos
+
+```bash
+bun run demo               # Basic elements
+bun run event-demo         # Event handling
+bun run styled-demo        # Styled components
+bun run flex-demo          # Flexbox layout
+bun run elements-demo      # Span, image elements
+```
+
+## API Reference
+
+### createRoot(container)
+
+Create a GPUI rendering root for a container element.
+
+```typescript
+import { createRoot } from 'gpui-react';
+
+const container = document.getElementById('root');
+const root = createRoot(container);
+root.render(<App />);
+```
+
+### Supported Elements
+
+| Element | GPUI Mapping | Notes |
+|---------|--------------|-------|
+| `div` | `div()` | Block container |
+| `span` | `span()` | Inline container, contains text children |
+| `text` | Text nodes | Always child of span |
+
+### Event Handlers
+
+```jsx
+<div onClick={handleClick} onHover={handleHover}>
+  <span>Click me</span>
+</div>
+```
+的恩托斯
+**Supported:** `onClick`, `onHover`, `onMouseEnter`, `onMouseLeave`
+
+### Styles
+
+```jsx
+<div style={{
+  color: '#fff',
+  backgroundColor: '#333',
+  fontSize: 16,
+  width: 200,
+  height: 100,
+  margin: 10,
+  padding: 20,
+  borderRadius: 8,
+  display: 'flex',
+  flexDirection: 'row',
+  justifyContent: 'center',
+  alignItems: 'center',
+  gap: 8
+}}>
+  Content
+</div>
+```
+
+## Documentation
+
+- **[AGENTS.md](./AGENTS.md)** - Root knowledge base
+- **[src/reconciler/AGENTS.md](./src/reconciler/AGENTS.md)** - React reconciler layer
+- **[rust/src/AGENTS.md](./rust/src/AGENTS.md)** - Rust FFI layer
+- **[ROADMAP.md](./ROADMAP.md)** - Development roadmap
+
+## Requirements
+
+- [Bun](https://bun.sh) ≥ 1.0
+- [Rust](https://rust-lang.org) ≥ 1.70
+- GPUI dependencies (downloaded automatically on first cargo build)

package/dist/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./reconciler/renderer";
+//# 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,cAAc,uBAAuB,CAAA"}

package/dist/index.js

@@ -0,0 +1 @@
+export * from "./reconciler/renderer";

package/dist/reconciler/ctx.d.ts

@@ -0,0 +1,7 @@
+interface AppContext {
+    windowId: number;
+}
+export declare const AppContext: import("react").Context<AppContext>;
+export declare const useAppContext: () => AppContext;
+export {};
+//# sourceMappingURL=ctx.d.ts.map

package/dist/reconciler/ctx.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ctx.d.ts","sourceRoot":"","sources":["../../src/reconciler/ctx.ts"],"names":[],"mappings":"AAEA,UAAU,UAAU;IAChB,QAAQ,EAAE,MAAM,CAAA;CACnB;AAED,eAAO,MAAM,UAAU,qCAErB,CAAA;AAEF,eAAO,MAAM,aAAa,kBAEzB,CAAA"}

package/dist/reconciler/ctx.js

@@ -0,0 +1,7 @@
+import { createContext, useContext } from "react";
+export const AppContext = createContext({
+    windowId: 0
+});
+export const useAppContext = () => {
+    return useContext(AppContext);
+};

package/dist/reconciler/element-store.d.ts

@@ -0,0 +1,22 @@
+export interface ElementData {
+    globalId: number;
+    type: string;
+    text?: string;
+    children: number[];
+    style?: Record<string, any>;
+    eventHandlers?: Record<string, number>;
+}
+export declare class ElementStore {
+    private store;
+    private nextId;
+    private rootId;
+    reset(): void;
+    createElement(type: string, text?: string, style?: Record<string, any>): number;
+    getStore(element: ElementData): ElementStore | undefined;
+    appendChild(parentId: number, childId: number): void;
+    removeChild(parentId: number, childId: number): void;
+    setContainerChild(childId: number): void;
+    getElement(globalId: number): ElementData | undefined;
+    getRoot(): ElementData;
+}
+//# sourceMappingURL=element-store.d.ts.map

package/dist/reconciler/element-store.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"element-store.d.ts","sourceRoot":"","sources":["../../src/reconciler/element-store.ts"],"names":[],"mappings":"AAEA,MAAM,WAAW,WAAW;IAC1B,QAAQ,EAAE,MAAM,CAAC;IACjB,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,MAAM,EAAE,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;IAC5B,aAAa,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;CACxC;AAID,qBAAa,YAAY;IACvB,OAAO,CAAC,KAAK,CAAkC;IAC/C,OAAO,CAAC,MAAM,CAAK;IACnB,OAAO,CAAC,MAAM,CAAuB;IAErC,KAAK,IAAI,IAAI;IAMb,aAAa,CAAC,IAAI,EAAE,MAAM,EAAE,IAAI,CAAC,EAAE,MAAM,EAAE,KAAK,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,MAAM;IAe/E,QAAQ,CAAC,OAAO,EAAE,WAAW,GAAG,YAAY,GAAG,SAAS;IAIxD,WAAW,CAAC,QAAQ,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,GAAG,IAAI;IAOpD,WAAW,CAAC,QAAQ,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,GAAG,IAAI;IAUpD,iBAAiB,CAAC,OAAO,EAAE,MAAM,GAAG,IAAI;IAOxC,UAAU,CAAC,QAAQ,EAAE,MAAM,GAAG,WAAW,GAAG,SAAS;IAIrD,OAAO,IAAI,WAAW;CAMvB"}

package/dist/reconciler/element-store.js

@@ -0,0 +1,61 @@
+import { trace } from "./logging";
+const STORE_SYMBOL = Symbol('store');
+export class ElementStore {
+    store = new Map();
+    nextId = 2;
+    rootId = null;
+    reset() {
+        this.store.clear();
+        this.nextId = 2;
+        this.rootId = null;
+    }
+    createElement(type, text, style) {
+        const globalId = this.nextId++;
+        const element = {
+            globalId,
+            type,
+            text,
+            style,
+            children: [],
+        };
+        Object.defineProperty(element, STORE_SYMBOL, { value: this, writable: false, enumerable: false });
+        this.store.set(globalId, element);
+        trace("createElement", { type, globalId, style });
+        return globalId;
+    }
+    getStore(element) {
+        return element[STORE_SYMBOL];
+    }
+    appendChild(parentId, childId) {
+        const parent = this.store.get(parentId);
+        if (!parent)
+            throw new Error(`Parent element ${parentId} not found`);
+        parent.children.push(childId);
+        trace("appendChild", { parentId, childId });
+    }
+    removeChild(parentId, childId) {
+        const parent = this.store.get(parentId);
+        if (!parent)
+            throw new Error(`Parent element ${parentId} not found`);
+        const index = parent.children.indexOf(childId);
+        if (index !== -1) {
+            parent.children.splice(index, 1);
+            trace("removeChild", { parentId, childId });
+        }
+    }
+    setContainerChild(childId) {
+        if (this.rootId === null) {
+            this.rootId = childId;
+            trace("setContainerChild - rootId", this.rootId);
+        }
+    }
+    getElement(globalId) {
+        return this.store.get(globalId);
+    }
+    getRoot() {
+        if (this.rootId === null) {
+            throw new Error("No root element created yet");
+        }
+        return this.store.get(this.rootId);
+    }
+}

package/dist/reconciler/events.d.ts

@@ -0,0 +1,13 @@
+/**
+ * Event Types for React-GPUI Renderer
+ */
+export type EventHandler = (event: Event) => void;
+export type MouseEvent = {
+    type: 'click' | 'hover' | 'mouseenter' | 'mouseleave';
+    target: number;
+    button?: number;
+    clientX?: number;
+    clientY?: number;
+};
+export type Event = MouseEvent;
+//# sourceMappingURL=events.d.ts.map

package/dist/reconciler/events.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"events.d.ts","sourceRoot":"","sources":["../../src/reconciler/events.ts"],"names":[],"mappings":"AAAA;;GAEG;AAEH,MAAM,MAAM,YAAY,GAAG,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,CAAC;AAElD,MAAM,MAAM,UAAU,GAAG;IACvB,IAAI,EAAE,OAAO,GAAG,OAAO,GAAG,YAAY,GAAG,YAAY,CAAC;IACtD,MAAM,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB,CAAC;AAEF,MAAM,MAAM,KAAK,GAAG,UAAU,CAAC"}

package/dist/reconciler/events.js

@@ -0,0 +1,4 @@
+/**
+ * Event Types for React-GPUI Renderer
+ */
+export {};

package/dist/reconciler/gpui-binding.d.ts

@@ -0,0 +1,7 @@
+export declare let currentWindowId: number;
+export declare function init(): void;
+export declare function createWindow(width: number, height: number, title?: string): number;
+export declare function renderFrame(windowId: number, element: any): void;
+export declare function triggerRender(windowId: number): void;
+export declare function batchElementUpdates(windowId: number, elements: any[]): void;
+//# sourceMappingURL=gpui-binding.d.ts.map

package/dist/reconciler/gpui-binding.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"gpui-binding.d.ts","sourceRoot":"","sources":["../../src/reconciler/gpui-binding.ts"],"names":[],"mappings":"AAiDA,eAAO,IAAI,eAAe,EAAE,MAAU,CAAC;AA8BvC,wBAAgB,IAAI,IAAI,IAAI,CAM3B;AAED,wBAAgB,YAAY,CAAC,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAalF;AAED,wBAAgB,WAAW,CAAC,QAAQ,EAAE,MAAM,EAAE,OAAO,EAAE,GAAG,GAAG,IAAI,CAsEhE;AAED,wBAAgB,aAAa,CAAC,QAAQ,EAAE,MAAM,GAAG,IAAI,CAQpD;AAED,wBAAgB,mBAAmB,CAAC,QAAQ,EAAE,MAAM,EAAE,QAAQ,EAAE,GAAG,EAAE,GAAG,IAAI,CAiC3E"}

package/dist/reconciler/gpui-binding.js

@@ -0,0 +1,179 @@
+import { dlopen, FFIType, suffix, ptr } from "bun:ffi";
+import { join } from "path";
+import { sleep } from "bun";
+import { info, debug, trace } from "./logging";
+const libName = `libgpui_renderer.${suffix}`;
+const libPath = join(import.meta.dir, "../native/linux-x64", libName);
+info(`Loading GPUI library from: ${libPath}`);
+const liveBuffers = [];
+const lib = dlopen(libPath, {
+    gpui_init: {
+        args: [FFIType.ptr],
+        returns: FFIType.void,
+    },
+    gpui_create_window: {
+        args: [FFIType.f32, FFIType.f32, FFIType.ptr, FFIType.ptr],
+        returns: FFIType.void,
+    },
+    gpui_is_ready: {
+        args: [],
+        returns: FFIType.bool,
+    },
+    gpui_render_frame: {
+        args: [FFIType.ptr, FFIType.ptr, FFIType.ptr, FFIType.ptr, FFIType.ptr, FFIType.ptr, FFIType.ptr],
+        returns: FFIType.void,
+    },
+    gpui_trigger_render: {
+        args: [FFIType.ptr, FFIType.ptr],
+        returns: FFIType.void,
+    },
+    gpui_free_result: {
+        args: [FFIType.ptr],
+        returns: FFIType.void,
+    },
+    gpui_batch_update_elements: {
+        args: [FFIType.ptr, FFIType.ptr, FFIType.ptr, FFIType.ptr],
+        returns: FFIType.void,
+    },
+});
+if (!lib.symbols) {
+    throw new Error("Failed to load GPUI library");
+}
+const FFI_RESULT_SIZE = 16;
+export let currentWindowId = 0;
+function checkResult(resultBuffer) {
+    const status = new DataView(resultBuffer.buffer).getInt32(0, true);
+    if (status !== 0) {
+        const errorPtr = new DataView(resultBuffer.buffer).getInt32(8, true);
+        lib.symbols.gpui_free_result(resultBuffer);
+        throw new Error(`GPUI operation failed: error ptr=${errorPtr}`);
+    }
+    const errorCheck = new DataView(resultBuffer.buffer).getInt32(8, true);
+    if (errorCheck !== 0) {
+        lib.symbols.gpui_free_result(resultBuffer);
+    }
+}
+function checkWindowCreateResult(resultBuffer) {
+    const status = new DataView(resultBuffer.buffer).getInt32(0, true);
+    if (status !== 0) {
+        const errorPtr = new DataView(resultBuffer.buffer).getInt32(8, true);
+        lib.symbols.gpui_free_result(resultBuffer);
+        throw new Error(`GPUI window creation failed: error ptr=${errorPtr}`);
+    }
+    const windowId = new DataView(resultBuffer.buffer).getBigUint64(8, true);
+    return Number(windowId);
+}
+export function init() {
+    const resultBuffer = new Uint8Array(FFI_RESULT_SIZE);
+    lib.symbols.gpui_init(resultBuffer);
+    checkResult(resultBuffer);
+    waitGpuiReady();
+}
+export function createWindow(width, height, title) {
+    const resultBuffer = new Uint8Array(FFI_RESULT_SIZE);
+    // 编码 title 字符串，添加 null 终止符
+    const titleStr = title || "React-GPUI";
+    const titleBuffer = new TextEncoder().encode(titleStr + "\0");
+    liveBuffers.push(titleBuffer.buffer); // 保持引用防止 GC
+    const titlePtr = ptr(titleBuffer);
+    lib.symbols.gpui_create_window(width, height, titlePtr, resultBuffer);
+    currentWindowId = checkWindowCreateResult(resultBuffer);
+    info(`Created window with id: ${currentWindowId}`);
+    return currentWindowId;
+}
+export function renderFrame(windowId, element) {
+    trace("renderFrame called");
+    debug("Element", element);
+    liveBuffers.length = 0;
+    const windowIdBuffer = new ArrayBuffer(8);
+    new DataView(windowIdBuffer).setBigInt64(0, BigInt(windowId), true);
+    liveBuffers.push(windowIdBuffer);
+    const windowIdPtr = ptr(windowIdBuffer);
+    const globalIdBuffer = new ArrayBuffer(8);
+    new DataView(globalIdBuffer).setBigInt64(0, BigInt(element.globalId), true);
+    liveBuffers.push(globalIdBuffer);
+    const globalIdPtr = ptr(globalIdBuffer);
+    const typeBuffer = new TextEncoder().encode(element.type + "\0");
+    liveBuffers.push(typeBuffer.buffer);
+    const typePtr = ptr(typeBuffer);
+    const textContent = element.text || " ";
+    const textBuffer = new TextEncoder().encode(textContent + "\0");
+    liveBuffers.push(textBuffer.buffer);
+    const textPtr = ptr(textBuffer);
+    const childrenArray = element.children || [];
+    const childCountBuffer = new ArrayBuffer(8);
+    new DataView(childCountBuffer).setBigInt64(0, BigInt(childrenArray.length), true);
+    liveBuffers.push(childCountBuffer);
+    const childCountPtr = ptr(childCountBuffer);
+    const childrenByteLength = Math.max(childrenArray.length * 8, 8);
+    const childrenBuffer = new ArrayBuffer(childrenByteLength);
+    if (childrenArray.length > 0) {
+        const childrenView = new BigInt64Array(childrenBuffer);
+        for (let i = 0; i < childrenArray.length; i++) {
+            childrenView[i] = BigInt(childrenArray[i]);
+        }
+    }
+    liveBuffers.push(childrenBuffer);
+    const childrenPtr = ptr(childrenBuffer);
+    debug("FFI params", {
+        windowId,
+        globalId: element.globalId,
+        type: element.type,
+        text: textContent,
+        childCount: childrenArray.length,
+        children: childrenArray
+    });
+    const resultBuffer = new Uint8Array(8);
+    lib.symbols.gpui_render_frame(windowIdPtr, globalIdPtr, typePtr, textPtr, childCountPtr, childrenPtr, resultBuffer);
+    const status = new DataView(resultBuffer.buffer).getInt32(0, true);
+    if (status !== 0) {
+        throw new Error(`GPUI render failed with status: ${status}`);
+    }
+    trace("renderFrame completed");
+}
+export function triggerRender(windowId) {
+    const windowIdBuffer = new ArrayBuffer(8);
+    new DataView(windowIdBuffer).setBigInt64(0, BigInt(windowId), true);
+    liveBuffers.push(windowIdBuffer);
+    const windowIdPtr = ptr(windowIdBuffer);
+    const triggerBuffer = new Uint8Array(8);
+    lib.symbols.gpui_trigger_render(windowIdPtr, triggerBuffer);
+}
+export function batchElementUpdates(windowId, elements) {
+    if (elements.length === 0) {
+        return;
+    }
+    info(`Batching ${elements.length} element updates for window ${windowId}`);
+    liveBuffers.length = 0;
+    const windowIdBuffer = new ArrayBuffer(8);
+    new DataView(windowIdBuffer).setBigInt64(0, BigInt(windowId), true);
+    liveBuffers.push(windowIdBuffer);
+    const windowIdPtr = ptr(windowIdBuffer);
+    const countBuffer = new ArrayBuffer(8);
+    new DataView(countBuffer).setBigInt64(0, BigInt(elements.length), true);
+    liveBuffers.push(countBuffer);
+    const countPtr = ptr(countBuffer);
+    const elementsJsonString = JSON.stringify(elements);
+    debug("batchElementUpdates - elements JSON", elementsJsonString.substring(0, 500));
+    const elementsBuffer = new TextEncoder().encode(elementsJsonString + "\0");
+    liveBuffers.push(elementsBuffer.buffer);
+    const elementsPtr = ptr(elementsBuffer);
+    const resultBuffer = new Uint8Array(8);
+    lib.symbols.gpui_batch_update_elements(windowIdPtr, countPtr, elementsPtr, resultBuffer);
+    const triggerBuffer = new Uint8Array(8);
+    lib.symbols.gpui_trigger_render(windowIdPtr, triggerBuffer);
+    info(`Batch update completed for ${elements.length} elements`);
+}
+function waitGpuiReady() {
+    let delay = 1;
+    const maxDelay = 100;
+    const maxTotalWait = 5000;
+    const startTime = Date.now();
+    while (Date.now() - startTime < maxTotalWait) {
+        if (lib.symbols.gpui_is_ready()) {
+            break;
+        }
+        sleep(Math.min(delay, maxDelay));
+        delay *= 2;
+    }
+}

package/dist/reconciler/host-config.d.ts

@@ -0,0 +1,33 @@
+import { ElementStore } from "./element-store";
+import { HostConfig } from "react-reconciler";
+type Type = string;
+type Props = any;
+type Container = ElementStore;
+type SuspenseInstance = never;
+type HydratableInstance = never;
+type FormInstance = never;
+type PublicInstance = Element;
+type HostContext = object;
+type ChildSet = never;
+type TimeoutHandle = number;
+type NoTimeout = -1;
+type TransitionStatus = any;
+export interface Instance {
+    id: number;
+    type: string;
+    text?: string;
+    children: Instance[];
+    style?: Record<string, any>;
+    eventHandlers?: Record<string, number>;
+    store: ElementStore;
+}
+export interface TextInstance {
+    id: number;
+    type: "text";
+    text: string;
+    children: [];
+    store: ElementStore;
+}
+export declare const hostConfig: HostConfig<Type, Props, Container, Instance, TextInstance, SuspenseInstance, HydratableInstance, FormInstance, PublicInstance, HostContext, ChildSet, TimeoutHandle, NoTimeout, TransitionStatus>;
+export {};
+//# sourceMappingURL=host-config.d.ts.map

package/dist/reconciler/host-config.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"host-config.d.ts","sourceRoot":"","sources":["../../src/reconciler/host-config.ts"],"names":[],"mappings":"AACA,OAAO,EAAC,YAAY,EAAc,MAAM,iBAAiB,CAAC;AAI1D,OAAO,EAAC,UAAU,EAAe,MAAM,kBAAkB,CAAC;AAM1D,KAAK,IAAI,GAAG,MAAM,CAAC;AACnB,KAAK,KAAK,GAAG,GAAG,CAAC;AACjB,KAAK,SAAS,GAAG,YAAY,CAAC;AAC9B,KAAK,gBAAgB,GAAG,KAAK,CAAC;AAC9B,KAAK,kBAAkB,GAAG,KAAK,CAAC;AAChC,KAAK,YAAY,GAAG,KAAK,CAAC;AAC1B,KAAK,cAAc,GAAG,OAAO,CAAC;AAC9B,KAAK,WAAW,GAAG,MAAM,CAAC;AAC1B,KAAK,QAAQ,GAAG,KAAK,CAAC;AACtB,KAAK,aAAa,GAAG,MAAM,CAAC;AAC5B,KAAK,SAAS,GAAG,CAAC,CAAC,CAAC;AACpB,KAAK,gBAAgB,GAAG,GAAG,CAAC;AAG5B,MAAM,WAAW,QAAQ;IACrB,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,QAAQ,EAAE,CAAC;IACrB,KAAK,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;IAC5B,aAAa,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IACvC,KAAK,EAAE,YAAY,CAAC;CACvB;AAED,MAAM,WAAW,YAAY;IACzB,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,EAAE,EAAE,CAAC;IACb,KAAK,EAAE,YAAY,CAAC;CACvB;AA6ED,eAAO,MAAM,UAAU,EAAE,UAAU,CAC/B,IAAI,EACJ,KAAK,EACL,SAAS,EACT,QAAQ,EACR,YAAY,EACZ,gBAAgB,EAChB,kBAAkB,EAClB,YAAY,EACZ,cAAc,EACd,WAAW,EACX,QAAQ,EACR,aAAa,EACb,SAAS,EACT,gBAAgB,CA0SnB,CAAA"}

package/dist/reconciler/host-config.js

@@ -0,0 +1,270 @@
+import { renderFrame, batchElementUpdates, currentWindowId } from "./gpui-binding";
+import { mapStyleToProps } from "./styles";
+import { DefaultEventPriority, NoEventPriority } from "react-reconciler/constants";
+import { trace, info, warn } from "./logging";
+let nextEventId = 0;
+const eventHandlers = new Map();
+const pendingUpdates = [];
+function registerEventHandler(handler) {
+    const id = nextEventId++;
+    eventHandlers.set(id, handler);
+    return id;
+}
+function extractStyleProps(props) {
+    const styleProps = {};
+    if (props.style) {
+        Object.assign(styleProps, props.style);
+    }
+    if (props.className) {
+        warn("className not yet supported, use style prop instead");
+    }
+    if (props.onClick) {
+        styleProps.onClick = props.onClick;
+    }
+    if (props.onHover) {
+        styleProps.onHover = props.onHover;
+    }
+    if (props.onMouseEnter) {
+        styleProps.onMouseEnter = props.onMouseEnter;
+    }
+    if (props.onMouseLeave) {
+        styleProps.onMouseLeave = props.onMouseLeave;
+    }
+    return styleProps;
+}
+function extractEventHandlers(props) {
+    const handlers = {};
+    if (props.onClick) {
+        handlers['onClick'] = registerEventHandler(props.onClick);
+    }
+    if (props.onHover) {
+        handlers['onHover'] = registerEventHandler(props.onHover);
+    }
+    if (props.onMouseEnter) {
+        handlers['onMouseEnter'] = registerEventHandler(props.onMouseEnter);
+    }
+    if (props.onMouseLeave) {
+        handlers['onMouseLeave'] = registerEventHandler(props.onMouseLeave);
+    }
+    return handlers;
+}
+function queueElementUpdate(element) {
+    if (!element)
+        return;
+    const existingIndex = pendingUpdates.findIndex((e) => e.globalId === element.globalId);
+    if (existingIndex !== -1) {
+        pendingUpdates[existingIndex] = element;
+    }
+    else {
+        pendingUpdates.push(element);
+    }
+}
+let currentUpdatePriority = 0;
+export const hostConfig = {
+    supportsMutation: true,
+    supportsPersistence: false,
+    supportsHydration: false,
+    isPrimaryRenderer: true,
+    getPublicInstance(_instance) {
+        return document.createElement("div");
+    },
+    getRootHostContext(_rootContainer) {
+        return {};
+    },
+    getChildHostContext(_parentHostContext, _type, _rootContainer) {
+        return {};
+    },
+    prepareForCommit(_containerInfo) {
+        return {};
+    },
+    resetAfterCommit(containerInfo) {
+        if (pendingUpdates.length > 0) {
+            info(`Processing ${pendingUpdates.length} batched updates`);
+            batchElementUpdates(currentWindowId, pendingUpdates);
+            pendingUpdates.length = 0;
+        }
+        const root = containerInfo.getRoot();
+        trace("resetAfterCommit - root element", root);
+        renderFrame(currentWindowId, root);
+        setImmediate(() => {
+            if (typeof window !== 'undefined' && window.__gpuiTrigger) {
+                window.__gpuiTrigger();
+            }
+        });
+    },
+    shouldSetTextContent(_type, _props) {
+        return false;
+    },
+    resetTextContent(_instance) {
+    },
+    createTextInstance(text, rootContainer, _hostContext, _internalHandle) {
+        const styleProps = extractStyleProps({ style: {} });
+        const styles = mapStyleToProps(styleProps);
+        const id = rootContainer.createElement("text", String(text), styles);
+        trace("createTextInstance", { text, id, styles });
+        const instance = {
+            id,
+            type: "text",
+            text: String(text),
+            children: [],
+            store: rootContainer,
+        };
+        queueElementUpdate(rootContainer.getElement(id));
+        return instance;
+    },
+    commitTextUpdate(textInstance, oldText, newText) {
+        textInstance.text = String(newText);
+        trace("commitTextUpdate", { oldText, newText });
+        const element = textInstance.store.getElement(textInstance.id);
+        if (element) {
+            element.text = String(newText);
+            queueElementUpdate(element);
+        }
+    },
+    createInstance(type, props, rootContainer, _hostContext, _internalHandle) {
+        const styleProps = extractStyleProps(props);
+        const styles = mapStyleToProps(styleProps);
+        const eventHandlers = extractEventHandlers(props);
+        const id = rootContainer.createElement(type, undefined, { ...styles, eventHandlers });
+        trace("createInstance", { type, id, styles, eventHandlers });
+        const instance = {
+            id,
+            type,
+            children: [],
+            style: styles,
+            eventHandlers,
+            store: rootContainer,
+        };
+        queueElementUpdate(rootContainer.getElement(id));
+        return instance;
+    },
+    appendInitialChild(parentInstance, child) {
+        trace("appendInitialChild", { parent: parentInstance, child });
+        parentInstance.children.push(child);
+        parentInstance.store.appendChild(parentInstance.id, child.id);
+        queueElementUpdate(parentInstance.store.getElement(parentInstance.id));
+    },
+    appendChild(parentInstance, child) {
+        trace("appendChild", { parent: parentInstance, child });
+        parentInstance.children.push(child);
+        parentInstance.store.appendChild(parentInstance.id, child.id);
+        queueElementUpdate(parentInstance.store.getElement(parentInstance.id));
+    },
+    appendChildToContainer(container, child) {
+        trace("appendChildToContainer", { container, child });
+        const childInstance = child;
+        container.setContainerChild(childInstance.id);
+        queueElementUpdate(container.getElement(childInstance.id));
+    },
+    insertBefore(parentInstance, child, beforeChild) {
+        const childInstance = child;
+        const beforeChildInstance = beforeChild;
+        const beforeIndex = parentInstance.children.indexOf(beforeChildInstance);
+        if (beforeIndex !== -1) {
+            parentInstance.children.splice(beforeIndex, 0, childInstance);
+        }
+        else {
+            parentInstance.children.push(childInstance);
+        }
+        queueElementUpdate(parentInstance.store.getElement(parentInstance.id));
+    },
+    insertInContainerBefore(_container, child, beforeChild) {
+        trace("insertInContainerBefore", { child, beforeChild });
+    },
+    removeChild(parentInstance, child) {
+        const childInstance = child;
+        const index = parentInstance.children.indexOf(childInstance);
+        if (index !== -1) {
+            parentInstance.children.splice(index, 1);
+        }
+        parentInstance.store.removeChild(parentInstance.id, childInstance.id);
+        queueElementUpdate(parentInstance.store.getElement(parentInstance.id));
+    },
+    removeChildFromContainer(_container, child) {
+        trace("removeChildFromContainer", { container: _container, child });
+        const childInstance = child;
+        _container.removeChild(_container.getRoot().globalId, childInstance.id);
+    },
+    commitUpdate(instance, _type, _prevProps, nextProps, _internalHandle) {
+        if (nextProps && typeof nextProps.children === "string") {
+            instance.text = String(nextProps.children);
+            const element = instance.store.getElement(instance.id);
+            if (element) {
+                queueElementUpdate(element);
+            }
+        }
+    },
+    finalizeInitialChildren(_instance, _type, _props, _rootContainer, _hostContext) {
+        return false;
+    },
+    clearContainer(_container) {
+    },
+    hideInstance(_instance) {
+    },
+    unhideInstance(_instance, _props) {
+    },
+    detachDeletedInstance(instance) {
+        trace("detachDeletedInstance", { instance });
+    },
+    prepareScopeUpdate(_scopeInstance, _instance) {
+    },
+    getInstanceFromScope(_scopeInstance) {
+        return null;
+    },
+    scheduleTimeout(fn, delay) {
+        return setTimeout(fn, delay);
+    },
+    cancelTimeout(id) {
+        clearTimeout(id);
+    },
+    noTimeout: -1,
+    preparePortalMount(_containerInfo) {
+    },
+    getInstanceFromNode(_node) {
+        return null;
+    },
+    beforeActiveInstanceBlur() {
+    },
+    afterActiveInstanceBlur() {
+    },
+    NotPendingTransition: null,
+    HostTransitionContext: null,
+    resetFormInstance(_form) {
+    },
+    requestPostPaintCallback(_callback) {
+    },
+    shouldAttemptEagerTransition() {
+        return false;
+    },
+    trackSchedulerEvent() {
+    },
+    resolveEventType() {
+        return null;
+    },
+    resolveEventTimeStamp() {
+        return Date.now();
+    },
+    maySuspendCommit(_type, _props) {
+        return false;
+    },
+    preloadInstance(_type, _props) {
+        return false;
+    },
+    startSuspendingCommit() {
+    },
+    suspendInstance(_type, _props) {
+    },
+    waitForCommitToBeReady() {
+        return null;
+    },
+    setCurrentUpdatePriority(newPriority) {
+        currentUpdatePriority = newPriority;
+    },
+    getCurrentUpdatePriority: () => currentUpdatePriority,
+    resolveUpdatePriority() {
+        if (currentUpdatePriority !== NoEventPriority) {
+            return currentUpdatePriority;
+        }
+        return DefaultEventPriority;
+    },
+};

package/dist/reconciler/logging.d.ts

@@ -0,0 +1,10 @@
+type LogLevel = 'error' | 'warn' | 'info' | 'debug' | 'trace';
+export declare function initLogging(): void;
+export declare function log(level: LogLevel, message: string, ...args: unknown[]): void;
+export declare function trace(message: string, ...args: unknown[]): void;
+export declare function debug(message: string, ...args: unknown[]): void;
+export declare function info(message: string, ...args: unknown[]): void;
+export declare function warn(message: string, ...args: unknown[]): void;
+export declare function error(message: string, ...args: unknown[]): void;
+export {};
+//# sourceMappingURL=logging.d.ts.map

package/dist/reconciler/logging.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"logging.d.ts","sourceRoot":"","sources":["../../src/reconciler/logging.ts"],"names":[],"mappings":"AAAA,KAAK,QAAQ,GAAG,OAAO,GAAG,MAAM,GAAG,MAAM,GAAG,OAAO,GAAG,OAAO,CAAC;AAkC9D,wBAAgB,WAAW,IAAI,IAAI,CAGlC;AAED,wBAAgB,GAAG,CAAC,KAAK,EAAE,QAAQ,EAAE,OAAO,EAAE,MAAM,EAAE,GAAG,IAAI,EAAE,OAAO,EAAE,GAAG,IAAI,CAoB9E;AAED,wBAAgB,KAAK,CAAC,OAAO,EAAE,MAAM,EAAE,GAAG,IAAI,EAAE,OAAO,EAAE,GAAG,IAAI,CAE/D;AAED,wBAAgB,KAAK,CAAC,OAAO,EAAE,MAAM,EAAE,GAAG,IAAI,EAAE,OAAO,EAAE,GAAG,IAAI,CAE/D;AAED,wBAAgB,IAAI,CAAC,OAAO,EAAE,MAAM,EAAE,GAAG,IAAI,EAAE,OAAO,EAAE,GAAG,IAAI,CAE9D;AAED,wBAAgB,IAAI,CAAC,OAAO,EAAE,MAAM,EAAE,GAAG,IAAI,EAAE,OAAO,EAAE,GAAG,IAAI,CAE9D;AAED,wBAAgB,KAAK,CAAC,OAAO,EAAE,MAAM,EAAE,GAAG,IAAI,EAAE,OAAO,EAAE,GAAG,IAAI,CAE/D"}

package/dist/reconciler/logging.js

@@ -0,0 +1,68 @@
+const LOG_LEVELS = ['error', 'warn', 'info', 'debug', 'trace'];
+function getLogLevel() {
+    const envLevel = process.env.RUST_LOG?.toLowerCase();
+    if (envLevel && LOG_LEVELS.includes(envLevel)) {
+        return envLevel;
+    }
+    return 'info';
+}
+function getLocalTime() {
+    const now = new Date();
+    const year = now.getFullYear();
+    const month = String(now.getMonth() + 1).padStart(2, '0');
+    const day = String(now.getDate()).padStart(2, '0');
+    const hours = String(now.getHours()).padStart(2, '0');
+    const minutes = String(now.getMinutes()).padStart(2, '0');
+    const seconds = String(now.getSeconds()).padStart(2, '0');
+    return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
+}
+function shouldLog(level) {
+    const currentLevel = getLogLevel();
+    return LOG_LEVELS.indexOf(level) <= LOG_LEVELS.indexOf(currentLevel);
+}
+function formatMessage(level, message, args) {
+    const timestamp = getLocalTime();
+    const argsStr = args && args.length > 0 ? '\n' + args.map(a => JSON.stringify(a, null, 2)).join('\n') : '';
+    return `${timestamp} ${level.toUpperCase()} ${message}${argsStr}`;
+}
+export function initLogging() {
+    const level = getLogLevel();
+    console.log(`${getLocalTime()} INFO  init: Logging system initialized (level: ${level})`);
+}
+export function log(level, message, ...args) {
+    if (!shouldLog(level))
+        return;
+    const formatted = formatMessage(level, message, args);
+    switch (level) {
+        case 'error':
+            console.error(formatted);
+            break;
+        case 'warn':
+            console.warn(formatted);
+            break;
+        case 'info':
+            console.log(formatted);
+            break;
+        case 'debug':
+            console.debug(formatted);
+            break;
+        case 'trace':
+            console.trace(formatted);
+            break;
+    }
+}
+export function trace(message, ...args) {
+    log('trace', message, ...args);
+}
+export function debug(message, ...args) {
+    log('debug', message, ...args);
+}
+export function info(message, ...args) {
+    log('info', message, ...args);
+}
+export function warn(message, ...args) {
+    log('warn', message, ...args);
+}
+export function error(message, ...args) {
+    log('error', message, ...args);
+}

package/dist/reconciler/reconciler.d.ts

@@ -0,0 +1,6 @@
+import ReactReconciler from "react-reconciler";
+import React from "react";
+import { ElementStore } from "./element-store";
+export declare const reconciler: ReactReconciler.Reconciler<ElementStore, import("./host-config").Instance, import("./host-config").TextInstance, never, never, Element>;
+export declare function _render(element: React.ReactNode, root: ElementStore): any;
+//# sourceMappingURL=reconciler.d.ts.map

package/dist/reconciler/reconciler.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"reconciler.d.ts","sourceRoot":"","sources":["../../src/reconciler/reconciler.ts"],"names":[],"mappings":"AAAA,OAAO,eAAe,MAAM,kBAAkB,CAAC;AAE/C,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAc,YAAY,EAAC,MAAM,iBAAiB,CAAC;AAG1D,eAAO,MAAM,UAAU,yIAA8B,CAAA;AAGrD,wBAAgB,OAAO,CAAC,OAAO,EAAE,KAAK,CAAC,SAAS,EAAE,IAAI,EAAE,YAAY,OAkBnE"}

package/dist/reconciler/reconciler.js

@@ -0,0 +1,9 @@
+import ReactReconciler from "react-reconciler";
+import { hostConfig } from "./host-config";
+import { ConcurrentRoot } from "react-reconciler/constants";
+export const reconciler = ReactReconciler(hostConfig);
+export function _render(element, root) {
+    const container = reconciler.createContainer(root, ConcurrentRoot, null, false, null, "", console.error, console.error, console.error, console.error, null);
+    reconciler.updateContainer(element, container, null, () => { });
+    return container;
+}

package/dist/reconciler/renderer.d.ts

@@ -0,0 +1,12 @@
+import * as React from "react";
+export type Root = {
+    render: (children: React.ReactNode) => void;
+    unmount: () => void;
+};
+export type RootProps = {
+    width: number;
+    height: number;
+    title?: string;
+};
+export declare function createRoot({ width, height, title }: RootProps): Root;
+//# sourceMappingURL=renderer.d.ts.map

package/dist/reconciler/renderer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"renderer.d.ts","sourceRoot":"","sources":["../../src/reconciler/renderer.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAM/B,MAAM,MAAM,IAAI,GAAG;IACf,MAAM,EAAE,CAAC,QAAQ,EAAE,KAAK,CAAC,SAAS,KAAK,IAAI,CAAC;IAC5C,OAAO,EAAE,MAAM,IAAI,CAAC;CACvB,CAAC;AAEF,MAAM,MAAM,SAAS,GAAG;IACpB,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;CAClB,CAAA;AAED,wBAAgB,UAAU,CAAC,EACI,KAAK,EAAE,MAAM,EAAE,KAAK,EACvB,EAAE,SAAS,GAAG,IAAI,CAuB7C"}

package/dist/reconciler/renderer.js

@@ -0,0 +1,21 @@
+import * as React from "react";
+import { _render, reconciler } from "./reconciler";
+import { init, createWindow } from "./gpui-binding";
+import { ElementStore } from "./element-store";
+import { AppContext } from "./ctx";
+export function createRoot({ width, height, title }) {
+    let container = null;
+    init();
+    const windowId = createWindow(width, height, title);
+    console.log("Created window with id:", windowId);
+    const elementStore = new ElementStore();
+    return {
+        render(node) {
+            container = _render(React.createElement(AppContext.Provider, { value: { windowId } }, node), elementStore);
+        },
+        unmount() {
+            reconciler.updateContainer(null, container, null, () => {
+            });
+        },
+    };
+}

package/dist/reconciler/styles.d.ts

@@ -0,0 +1,66 @@
+/**
+ * Style Utilities for React-GPUI Renderer
+ *
+ * Handles conversion between React style props and GPUI style values
+ */
+export interface StyleProps {
+    color?: string;
+    backgroundColor?: string;
+    borderColor?: string;
+    fontSize?: number | string;
+    fontWeight?: string | number;
+    width?: number | string;
+    height?: number | string;
+    margin?: number | string;
+    marginTop?: number | string;
+    marginRight?: number | string;
+    marginBottom?: number | string;
+    marginLeft?: number | string;
+    padding?: number | string;
+    paddingTop?: number | string;
+    paddingRight?: number | string;
+    paddingBottom?: number | string;
+    paddingLeft?: number | string;
+    display?: 'flex' | 'block' | 'inline' | 'inline-block';
+    flexDirection?: 'row' | 'column';
+    justifyContent?: 'flex-start' | 'center' | 'flex-end' | 'space-between' | 'space-around' | 'space-evenly';
+    alignItems?: 'flex-start' | 'center' | 'flex-end' | 'stretch';
+    gap?: number | string;
+    borderRadius?: number | string;
+    opacity?: number;
+    src?: string;
+    alt?: string;
+    onClick?: (event: MouseEvent) => void;
+    onHover?: (event: MouseEvent) => void;
+    onMouseEnter?: (event: MouseEvent) => void;
+    onMouseLeave?: (event: MouseEvent) => void;
+}
+/**
+ * Parse CSS color string to GPUI RGB value
+ * Supports: hex (#RRGGBB, #RGB), rgb(r, g, b), rgba(r, g, b, a), named colors
+ */
+export declare function parseColor(color: string): number;
+/**
+ * Parse size value to pixels
+ * Supports: px, em, rem, %, number (assumed px)
+ */
+export declare function parseSize(size: number | string): number;
+/**
+ * Parse font weight
+ */
+export declare function parseFontWeight(weight: string | number): string;
+/**
+ * Parse margin/padding shorthand
+ * Supports: 1-4 values (CSS-like syntax)
+ * Returns: [top, right, bottom, left]
+ */
+export declare function parseSpacing(value: number | string): [number, number, number, number];
+/**
+ * Parse margin/padding individual values
+ */
+export declare function parseSpacingIndividual(top?: number | string, right?: number | string, bottom?: number | string, left?: number | string): [number, number, number, number];
+/**
+ * Map React style props to GPUI style object
+ */
+export declare function mapStyleToProps(props: StyleProps): Record<string, any>;
+//# sourceMappingURL=styles.d.ts.map

package/dist/reconciler/styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../src/reconciler/styles.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,MAAM,WAAW,UAAU;IACzB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC3B,UAAU,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC7B,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACzB,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACzB,SAAS,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC5B,WAAW,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC9B,YAAY,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC/B,UAAU,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC7B,OAAO,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC1B,UAAU,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC7B,YAAY,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC/B,aAAa,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAChC,WAAW,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC9B,OAAO,CAAC,EAAE,MAAM,GAAG,OAAO,GAAG,QAAQ,GAAG,cAAc,CAAC;IACvD,aAAa,CAAC,EAAE,KAAK,GAAG,QAAQ,CAAC;IACjC,cAAc,CAAC,EAAE,YAAY,GAAG,QAAQ,GAAG,UAAU,GAAG,eAAe,GAAG,cAAc,GAAG,cAAc,CAAC;IAC1G,UAAU,CAAC,EAAE,YAAY,GAAG,QAAQ,GAAG,UAAU,GAAG,SAAS,CAAC;IAC9D,GAAG,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACtB,YAAY,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC/B,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,UAAU,KAAK,IAAI,CAAC;IACtC,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,UAAU,KAAK,IAAI,CAAC;IACtC,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,UAAU,KAAK,IAAI,CAAC;IAC3C,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,UAAU,KAAK,IAAI,CAAC;CAC5C;AAED;;;GAGG;AACH,wBAAgB,UAAU,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,CA2ChD;AAED;;;GAGG;AACH,wBAAgB,SAAS,CAAC,IAAI,EAAE,MAAM,GAAG,MAAM,GAAG,MAAM,CAgCvD;AAED;;GAEG;AACH,wBAAgB,eAAe,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM,GAAG,MAAM,CAc/D;AAED;;;;GAIG;AACH,wBAAgB,YAAY,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,GAAG,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,CAAC,CAGrF;AAED;;GAEG;AACH,wBAAgB,sBAAsB,CACpC,GAAG,CAAC,EAAE,MAAM,GAAG,MAAM,EACrB,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,EACvB,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,EACxB,IAAI,CAAC,EAAE,MAAM,GAAG,MAAM,GACrB,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,CAAC,CAOlC;AAED;;GAEG;AACH,wBAAgB,eAAe,CAAC,KAAK,EAAE,UAAU,GAAG,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAsFtE"}

package/dist/reconciler/styles.js

@@ -0,0 +1,214 @@
+/**
+ * Style Utilities for React-GPUI Renderer
+ *
+ * Handles conversion between React style props and GPUI style values
+ */
+/**
+ * Parse CSS color string to GPUI RGB value
+ * Supports: hex (#RRGGBB, #RGB), rgb(r, g, b), rgba(r, g, b, a), named colors
+ */
+export function parseColor(color) {
+    if (!color) {
+        return 0x000000;
+    }
+    if (color.startsWith('#')) {
+        const hex = color.slice(1);
+        if (hex.length === 3) {
+            const r = parseInt(hex[0] + hex[0], 16);
+            const g = parseInt(hex[1] + hex[1], 16);
+            const b = parseInt(hex[2] + hex[2], 16);
+            return (r << 16) | (g << 8) | b;
+        }
+        else if (hex.length === 6) {
+            const r = parseInt(hex.slice(0, 2), 16);
+            const g = parseInt(hex.slice(2, 4), 16);
+            const b = parseInt(hex.slice(4, 6), 16);
+            return (r << 16) | (g << 8) | b;
+        }
+    }
+    const rgbMatch = color.match(/rgb\s*\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*\)/);
+    if (rgbMatch) {
+        const r = parseInt(rgbMatch[1], 10);
+        const g = parseInt(rgbMatch[2], 10);
+        const b = parseInt(rgbMatch[3], 10);
+        return (r << 16) | (g << 8) | b;
+    }
+    const rgbaMatch = color.match(/rgba\s*\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*,\s*[\d.]+\s*\)/);
+    if (rgbaMatch) {
+        const r = parseInt(rgbaMatch[1], 10);
+        const g = parseInt(rgbaMatch[2], 10);
+        const b = parseInt(rgbaMatch[3], 10);
+        return (r << 16) | (g << 8) | b;
+    }
+    const namedColor = NAMED_COLORS[color.toLowerCase()];
+    if (namedColor !== undefined) {
+        return namedColor;
+    }
+    console.warn(`Unknown color format: ${color}, using black`);
+    return 0x000000;
+}
+/**
+ * Parse size value to pixels
+ * Supports: px, em, rem, %, number (assumed px)
+ */
+export function parseSize(size) {
+    if (typeof size === 'number') {
+        return size;
+    }
+    if (typeof size === 'string') {
+        const s = size.trim();
+        if (s.endsWith('px')) {
+            return parseFloat(s.slice(0, -2));
+        }
+        if (s.endsWith('em')) {
+            return parseFloat(s.slice(0, -2)) * 16;
+        }
+        if (s.endsWith('rem')) {
+            return parseFloat(s.slice(0, -3)) * 16;
+        }
+        if (s.endsWith('%')) {
+            return parseFloat(s.slice(0, -1));
+        }
+        const parsed = parseFloat(s);
+        if (!isNaN(parsed)) {
+            return parsed;
+        }
+    }
+    console.warn(`Unknown size format: ${size}, using 0`);
+    return 0;
+}
+/**
+ * Parse font weight
+ */
+export function parseFontWeight(weight) {
+    if (typeof weight === 'number') {
+        return weight.toString();
+    }
+    const normalized = weight.toLowerCase();
+    const weightMap = {
+        'normal': '400',
+        'bold': '700',
+        'lighter': '300',
+        'bolder': '900',
+    };
+    return weightMap[normalized] || normalized;
+}
+/**
+ * Parse margin/padding shorthand
+ * Supports: 1-4 values (CSS-like syntax)
+ * Returns: [top, right, bottom, left]
+ */
+export function parseSpacing(value) {
+    const parsed = parseSize(value);
+    return [parsed, parsed, parsed, parsed];
+}
+/**
+ * Parse margin/padding individual values
+ */
+export function parseSpacingIndividual(top, right, bottom, left) {
+    return [
+        top !== undefined ? parseSize(top) : 0,
+        right !== undefined ? parseSize(right) : 0,
+        bottom !== undefined ? parseSize(bottom) : 0,
+        left !== undefined ? parseSize(left) : 0,
+    ];
+}
+/**
+ * Map React style props to GPUI style object
+ */
+export function mapStyleToProps(props) {
+    const result = {};
+    if (props.color) {
+        result.textColor = parseColor(props.color);
+    }
+    if (props.backgroundColor) {
+        result.bgColor = parseColor(props.backgroundColor);
+    }
+    if (props.borderColor) {
+        result.borderColor = parseColor(props.borderColor);
+    }
+    if (props.fontSize) {
+        result.textSize = parseSize(props.fontSize);
+    }
+    if (props.fontWeight) {
+        result.fontWeight = parseFontWeight(props.fontWeight);
+    }
+    if (props.width) {
+        result.width = parseSize(props.width);
+    }
+    if (props.height) {
+        result.height = parseSize(props.height);
+    }
+    if (props.margin !== undefined) {
+        const [mt, mr, mb, ml] = parseSpacing(props.margin);
+        result.marginTop = mt;
+        result.marginRight = mr;
+        result.marginBottom = mb;
+        result.marginLeft = ml;
+    }
+    else {
+        if (props.marginTop !== undefined)
+            result.marginTop = parseSize(props.marginTop);
+        if (props.marginRight !== undefined)
+            result.marginRight = parseSize(props.marginRight);
+        if (props.marginBottom !== undefined)
+            result.marginBottom = parseSize(props.marginBottom);
+        if (props.marginLeft !== undefined)
+            result.marginLeft = parseSize(props.marginLeft);
+    }
+    if (props.padding !== undefined) {
+        const [pt, pr, pb, pl] = parseSpacing(props.padding);
+        result.paddingTop = pt;
+        result.paddingRight = pr;
+        result.paddingBottom = pb;
+        result.paddingLeft = pl;
+    }
+    else {
+        if (props.paddingTop !== undefined)
+            result.paddingTop = parseSize(props.paddingTop);
+        if (props.paddingRight !== undefined)
+            result.paddingRight = parseSize(props.paddingRight);
+        if (props.paddingBottom !== undefined)
+            result.paddingBottom = parseSize(props.paddingBottom);
+        if (props.paddingLeft !== undefined)
+            result.paddingLeft = parseSize(props.paddingLeft);
+    }
+    if (props.display) {
+        result.display = props.display;
+    }
+    if (props.flexDirection) {
+        result.flexDirection = props.flexDirection;
+    }
+    if (props.justifyContent) {
+        result.justifyContent = props.justifyContent;
+    }
+    if (props.alignItems) {
+        result.alignItems = props.alignItems;
+    }
+    if (props.gap !== undefined) {
+        result.gap = parseSize(props.gap);
+    }
+    if (props.borderRadius) {
+        result.borderRadius = parseSize(props.borderRadius);
+    }
+    if (props.opacity !== undefined) {
+        result.opacity = Math.max(0, Math.min(1, props.opacity));
+    }
+    return result;
+}
+/**
+ * Named color map (common colors only for MVP)
+ */
+const NAMED_COLORS = {
+    'black': 0x000000,
+    'white': 0xffffff,
+    'red': 0xff0000,
+    'green': 0x00ff00,
+    'blue': 0x0000ff,
+    'yellow': 0xffff00,
+    'cyan': 0x00ffff,
+    'magenta': 0xff00ff,
+    'gray': 0x808080,
+    'grey': 0x808080,
+    'transparent': 0x000000,
+};

package/package.json

@@ -0,0 +1,44 @@
+{
+  "name": "gpui-react",
+  "version": "0.1.7",
+  "module": "src/index.ts",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "files": [
+    "dist/",
+    "src/native/"
+  ],
+  "devDependencies": {
+    "@types/react": "^19.0.0",
+    "@types/react-reconciler": "^0.32.0",
+    "bun-types": "latest",
+    "typescript": "^5.9.3",
+    "react": ">=19.0.0"
+  },
+  "scripts": {
+    "build": "bun run build:rust && bun run build:ts && bun run copy:native",
+    "build:rust": "cd rust && cargo build --release",
+    "build:ts": "tsc",
+    "copy:native": "node scripts/copy-native.js",
+    "build:all": "bun run build && echo 'Build complete for distribution'",
+    "release": "node scripts/release.js",
+    "release:dry-run": "node scripts/release.js patch --dry-run",
+    "release:status": "node scripts/release.js --status",
+    "demo": "bun run demo/index.ts",
+    "styled-demo": "bun run demo/styled-index.ts",
+    "flex-demo": "bun run demo/flex-index.ts",
+    "elements-demo": "bun run demo/elements-index.ts",
+    "event-demo": "bun run demo/event-index.ts",
+    "test": "bun run src/reconciler/__tests__/element-store.test.ts",
+    "dev": "bun run build:rust && bun run demo",
+    "postinstall": "node scripts/postinstall.js"
+  },
+  "type": "module",
+  "dependencies": {
+    "react-reconciler": "^0.32.0"
+  },
+  "engines": {
+    "bun": ">=1.2.0",
+    "node": ">=18.0.0"
+  }
+}