geonodes-web-render 0.1.0

package/dist/types/embed.d.ts

@@ -0,0 +1,12 @@
+export type GraphViewEmbedOptions = {
+    /** Raw asset data (e.g. "TreeClipper::H4sI...") */
+    payload: string;
+    /** Called when user requests close (e.g. modal close button). Use to unmount. */
+    onClose?: () => void;
+};
+export declare function GraphView(props: GraphViewEmbedOptions): import("react/jsx-runtime").JSX.Element;
+/**
+ * Mount the graph view into a DOM container. Call unmountGraphView() to remove.
+ */
+export declare function mountGraphView(container: HTMLElement, options: GraphViewEmbedOptions): () => void;
+export declare function unmountGraphView(): void;

package/dist/types/gn/components/GenericGNNode.d.ts

@@ -0,0 +1,2 @@
+import { NodeProps } from '@xyflow/react';
+export declare function GenericGNNode(props: NodeProps): import("react/jsx-runtime").JSX.Element;

package/dist/types/gn/components/GeometryNodesFlow.d.ts

@@ -0,0 +1,5 @@
+export declare function GeometryNodesFlow(props: {
+    jsonText: string;
+    /** When false, hide the panel header ("Geometry Nodes Graph" and node count). Default true. */
+    showHeader?: boolean;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/types/gn/components/RerouteNode.d.ts

@@ -0,0 +1,2 @@
+import { NodeProps } from '@xyflow/react';
+export declare function RerouteNode(props: NodeProps): import("react/jsx-runtime").JSX.Element;

package/dist/types/gn/components/SimulationZoneFrame.d.ts

@@ -0,0 +1,2 @@
+import { NodeProps } from '@xyflow/react';
+export declare function SimulationZoneFrame(props: NodeProps): import("react/jsx-runtime").JSX.Element;

package/dist/types/gn/importer/blenderTree.d.ts

@@ -0,0 +1,134 @@
+import { FloatCurveData, GraphIR, SocketDefaultValue, SocketDisplayShape } from '../ir/types';
+type BlenderSocket = {
+    id: number;
+    data: {
+        name: string;
+        type: string;
+        display_shape: SocketDisplayShape;
+        default_value?: unknown;
+        hide_value?: boolean;
+        enabled?: boolean;
+    };
+};
+type BlenderNode = {
+    id: number;
+    data: {
+        name: string;
+        label: string;
+        bl_idname: string;
+        width?: number;
+        location?: [number, number];
+        location_absolute?: [number, number];
+        inputs?: {
+            data: {
+                items: BlenderSocket[];
+            };
+        };
+        outputs?: {
+            data: {
+                items: BlenderSocket[];
+            };
+        };
+        socket_idname?: string;
+        single_input?: number;
+        single_output?: number;
+        vector?: number[];
+        mode?: string;
+        operation?: string;
+        data_type?: string;
+        use_clamp?: boolean;
+        mapping?: {
+            data: {
+                use_clip?: boolean;
+                clip_min_x?: number;
+                clip_min_y?: number;
+                clip_max_x?: number;
+                clip_max_y?: number;
+                extend?: string;
+                curves?: {
+                    data: {
+                        items: Array<{
+                            data: {
+                                points: {
+                                    data: {
+                                        items: Array<{
+                                            data: {
+                                                location: [number, number];
+                                                handle_type: string;
+                                            };
+                                        }>;
+                                    };
+                                };
+                            };
+                        }>;
+                    };
+                };
+            };
+        };
+    };
+};
+type BlenderLink = {
+    id: number;
+    data: {
+        from_socket: number;
+        to_socket: number;
+    };
+};
+export type BlenderTreeExport = {
+    node_trees: Array<{
+        id: number;
+        data: {
+            name: string;
+            nodes: {
+                data: {
+                    items: BlenderNode[];
+                };
+            };
+            links: {
+                data: {
+                    items: BlenderLink[];
+                };
+            };
+        };
+    }>;
+};
+export type NormalizedSocket = {
+    id: string;
+    name: string;
+    dataType: string;
+    displayShape: SocketDisplayShape;
+    color: string;
+    defaultValue: SocketDefaultValue | null;
+    hideValue: boolean;
+    enabled: boolean;
+    index: number;
+};
+export type NormalizedNode = {
+    id: string;
+    type: string;
+    label: string;
+    position: {
+        x: number;
+        y: number;
+    };
+    width: number;
+    headerColor: string;
+    inputs: NormalizedSocket[];
+    outputs: NormalizedSocket[];
+    floatCurve?: FloatCurveData;
+    properties?: Record<string, string>;
+};
+export type NormalizedLink = {
+    id: string;
+    fromSocketId: string;
+    toSocketId: string;
+};
+export type NormalizedGraph = {
+    id: string;
+    label: string;
+    nodes: NormalizedNode[];
+    links: NormalizedLink[];
+};
+export declare function normalizeBlenderGraph(raw: BlenderTreeExport): NormalizedGraph;
+export declare function toGraphIR(normalized: NormalizedGraph): GraphIR;
+export {};

package/dist/types/gn/ir/curvePath.d.ts

@@ -0,0 +1,22 @@
+import { FloatCurvePoint } from './types';
+type Vec2 = [number, number];
+export type CurvePathResult = {
+    /** SVG 'd' attribute for the curve stroke */
+    strokePath: string;
+    /** SVG 'd' attribute for the filled area (curve + baseline) */
+    fillPath: string;
+    /** SVG 'd' attribute for the zero-line (y=0) */
+    zeroLinePath: string;
+    /** mapped control-point positions in SVG space for dot rendering */
+    dotPositions: Vec2[];
+};
+/**
+ * Build SVG path strings for a float curve.
+ *
+ * @param pts          Ordered control points (sorted by X, as Blender stores them)
+ * @param clipMinX/Y   Visible range in curve space
+ * @param clipMaxX/Y
+ * @param svgW/H       Output SVG canvas dimensions
+ */
+export declare function buildCurvePaths(pts: FloatCurvePoint[], clipMinX: number, clipMinY: number, clipMaxX: number, clipMaxY: number, svgW: number, svgH: number): CurvePathResult;
+export {};

package/dist/types/gn/ir/nodeColors.d.ts

@@ -0,0 +1 @@
+export declare function nodeHeaderColor(blIdname: string): string;

package/dist/types/gn/ir/socketColors.d.ts

@@ -0,0 +1,2 @@
+export declare const SOCKET_COLORS: Record<string, string>;
+export declare function socketColor(dataType: string): string;

package/dist/types/gn/ir/types.d.ts

@@ -0,0 +1,64 @@
+export type SocketDirection = 'input' | 'output';
+export type FloatCurvePoint = {
+    location: [number, number];
+    handleType: string;
+};
+export type FloatCurveData = {
+    clipMinX: number;
+    clipMinY: number;
+    clipMaxX: number;
+    clipMaxY: number;
+    extend: string;
+    points: FloatCurvePoint[];
+};
+export type SocketDisplayShape = 'CIRCLE' | 'DIAMOND' | 'LINE' | 'LIST' | 'VOLUME_GRID';
+export type SocketDefaultValue = {
+    kind: 'scalar';
+    value: number | boolean | string;
+} | {
+    kind: 'vec';
+    values: number[];
+};
+export type SocketIR = {
+    id: string;
+    nodeId: string;
+    name: string;
+    direction: SocketDirection;
+    dataType: string;
+    displayShape: SocketDisplayShape;
+    color: string;
+    defaultValue: SocketDefaultValue | null;
+    hideValue: boolean;
+    enabled: boolean;
+    index: number;
+};
+export type NodeIR = {
+    id: string;
+    type: string;
+    label: string;
+    position: {
+        x: number;
+        y: number;
+    };
+    width: number;
+    headerColor: string;
+    inputs: SocketIR[];
+    outputs: SocketIR[];
+    floatCurve?: FloatCurveData;
+    /** Node-type-specific enum properties (e.g. operation, data_type for Compare) */
+    properties?: Record<string, string>;
+};
+export type EdgeIR = {
+    id: string;
+    sourceNodeId: string;
+    sourceSocketId: string;
+    targetNodeId: string;
+    targetSocketId: string;
+    color: string;
+};
+export type GraphIR = {
+    id: string;
+    label: string;
+    nodes: NodeIR[];
+    edges: EdgeIR[];
+};

package/dist/types/gn/xyflow/mapGraphIRToFlow.d.ts

@@ -0,0 +1,25 @@
+import { Edge, Node } from '@xyflow/react';
+import { FloatCurveData, GraphIR, SocketIR } from '../ir/types';
+export type GNFlowNodeData = {
+    label: string;
+    type: string;
+    width: number;
+    headerColor: string;
+    inputs: SocketIR[];
+    outputs: SocketIR[];
+    connectedInputIds: string[];
+    floatCurve?: FloatCurveData;
+    properties?: Record<string, string>;
+};
+export type GNRerouteNodeData = {
+    color: string;
+    inputSocketId: string;
+    outputSocketId: string;
+};
+export type SimulationZoneNodeData = {
+    label: string;
+};
+export declare function mapGraphIRToFlow(graph: GraphIR): {
+    nodes: Node[];
+    edges: Edge[];
+};

package/dist/types/utils/decodeTreeClipperPayload.d.ts

@@ -0,0 +1,2 @@
+/** Decode Tree Clipper asset data (optional "TreeClipper::" prefix + base64, optionally gzipped) to JSON string. */
+export declare function decodeTreeClipperPayload(raw: string): Promise<string>;

package/package.json

@@ -0,0 +1,69 @@
+{
+  "name": "geonodes-web-render",
+  "version": "0.1.0",
+  "description": "Browser-based viewer for Blender Geometry Nodes exported via Tree Clipper. Renders node trees as a read-only, Blender-styled graph.",
+  "type": "module",
+  "exports": {
+    "./embed": {
+      "import": "./dist/embed.js",
+      "types": "./dist/types/embed.d.ts"
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/kolibril13/geonodes-web-render"
+  },
+  "license": "MIT",
+  "keywords": [
+    "blender",
+    "geometry-nodes",
+    "node-graph",
+    "tree-clipper",
+    "react-flow",
+    "visualization"
+  ],
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc -b && vite build",
+    "build:lib": "vite build --config vite.lib.config.ts",
+    "lint": "eslint .",
+    "preview": "vite preview",
+    "prepublishOnly": "npm run build:lib"
+  },
+  "dependencies": {
+    "@codemirror/lang-json": "^6.0.2",
+    "@codemirror/state": "^6.6.0",
+    "@codemirror/theme-one-dark": "^6.1.3",
+    "@codemirror/view": "^6.40.0",
+    "@uiw/react-codemirror": "^4.25.8",
+    "@xyflow/react": "^12.10.1",
+    "react": "^18.0.0 || ^19.0.0",
+    "react-dom": "^18.0.0 || ^19.0.0"
+  },
+  "peerDependencies": {
+    "react": "^18.0.0 || ^19.0.0",
+    "react-dom": "^18.0.0 || ^19.0.0"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.29.0",
+    "@eslint/js": "^9.39.4",
+    "@rolldown/plugin-babel": "^0.2.0",
+    "@types/babel__core": "^7.20.5",
+    "@types/node": "^24.12.0",
+    "@types/react": "^19.2.14",
+    "@types/react-dom": "^19.2.3",
+    "@vitejs/plugin-react": "^6.0.0",
+    "babel-plugin-react-compiler": "^1.0.0",
+    "eslint": "^9.39.4",
+    "eslint-plugin-react-hooks": "^7.0.1",
+    "eslint-plugin-react-refresh": "^0.5.2",
+    "globals": "^17.4.0",
+    "typescript": "~5.9.3",
+    "typescript-eslint": "^8.56.1",
+    "vite": "^8.0.0",
+    "vite-plugin-dts": "^4.5.4"
+  }
+}