@scenography/react 0.1.0

package/dist/index.cjs

@@ -0,0 +1,54 @@
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+let react = require("react");
+let _scenography_engine = require("@scenography/engine");
+let react_jsx_runtime = require("react/jsx-runtime");
+//#region src/Gallery.tsx
+const fillStyle = {
+	display: "block",
+	width: "100%",
+	height: "100%"
+};
+/**
+* Declarative React wrapper over the engine. Mounts a `createGallery` onto a
+* canvas, keeps it sized to its container, and feeds scene changes through
+* `setScene` so edits reconcile without remounting.
+*/
+function Gallery({ scene, className, style, onReady }) {
+	const canvasRef = (0, react.useRef)(null);
+	const galleryRef = (0, react.useRef)(null);
+	(0, react.useEffect)(() => {
+		const canvas = canvasRef.current;
+		if (!canvas) return;
+		const gallery = (0, _scenography_engine.createGallery)(scene, { canvas });
+		galleryRef.current = gallery;
+		gallery.start();
+		onReady?.(gallery);
+		const resize = () => {
+			const parent = canvas.parentElement;
+			if (parent) gallery.resize(parent.clientWidth, parent.clientHeight);
+		};
+		resize();
+		const observer = new ResizeObserver(resize);
+		if (canvas.parentElement) observer.observe(canvas.parentElement);
+		return () => {
+			observer.disconnect();
+			gallery.dispose();
+			galleryRef.current = null;
+		};
+	}, []);
+	(0, react.useEffect)(() => {
+		galleryRef.current?.setScene(scene);
+	}, [scene]);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("canvas", {
+		ref: canvasRef,
+		className,
+		style: {
+			...fillStyle,
+			...style
+		}
+	});
+}
+//#endregion
+exports.Gallery = Gallery;
+
+//# sourceMappingURL=index.cjs.map

package/dist/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs","names":[],"sources":["../src/Gallery.tsx"],"sourcesContent":["import { useEffect, useRef, type CSSProperties } from \"react\";\nimport { createGallery, type Gallery as GalleryInstance } from \"@scenography/engine\";\nimport type { Scene } from \"@scenography/core\";\n\nexport interface GalleryProps {\n  /** The scene definition to render. Changing it hot-reconciles in place. */\n  scene: Scene;\n  className?: string;\n  style?: CSSProperties;\n  /** Called once with the gallery instance after it mounts (escape hatch). */\n  onReady?: (gallery: GalleryInstance) => void;\n}\n\nconst fillStyle: CSSProperties = { display: \"block\", width: \"100%\", height: \"100%\" };\n\n/**\n * Declarative React wrapper over the engine. Mounts a `createGallery` onto a\n * canvas, keeps it sized to its container, and feeds scene changes through\n * `setScene` so edits reconcile without remounting.\n */\nexport function Gallery({ scene, className, style, onReady }: GalleryProps): JSX.Element {\n  const canvasRef = useRef<HTMLCanvasElement>(null);\n  const galleryRef = useRef<GalleryInstance | null>(null);\n\n  // Mount once: create the gallery, track container size, run the loop.\n  useEffect(() => {\n    const canvas = canvasRef.current;\n    if (!canvas) return;\n\n    const gallery = createGallery(scene, { canvas });\n    galleryRef.current = gallery;\n    gallery.start();\n    onReady?.(gallery);\n\n    const resize = (): void => {\n      const parent = canvas.parentElement;\n      if (parent) gallery.resize(parent.clientWidth, parent.clientHeight);\n    };\n    resize();\n    const observer = new ResizeObserver(resize);\n    if (canvas.parentElement) observer.observe(canvas.parentElement);\n\n    return () => {\n      observer.disconnect();\n      gallery.dispose();\n      galleryRef.current = null;\n    };\n    // Mount/unmount only — scene updates are handled below.\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, []);\n\n  // Hot-reconcile whenever the scene definition changes.\n  useEffect(() => {\n    galleryRef.current?.setScene(scene);\n  }, [scene]);\n\n  return <canvas ref={canvasRef} className={className} style={{ ...fillStyle, ...style }} />;\n}\n"],"mappings":";;;;;AAaA,MAAM,YAA2B;CAAE,SAAS;CAAS,OAAO;CAAQ,QAAQ;AAAO;;;;;;AAOnF,SAAgB,QAAQ,EAAE,OAAO,WAAW,OAAO,WAAsC;CACvF,MAAM,aAAA,GAAA,MAAA,OAAA,CAAsC,IAAI;CAChD,MAAM,cAAA,GAAA,MAAA,OAAA,CAA4C,IAAI;CAGtD,CAAA,GAAA,MAAA,UAAA,OAAgB;EACd,MAAM,SAAS,UAAU;EACzB,IAAI,CAAC,QAAQ;EAEb,MAAM,WAAA,GAAA,oBAAA,cAAA,CAAwB,OAAO,EAAE,OAAO,CAAC;EAC/C,WAAW,UAAU;EACrB,QAAQ,MAAM;EACd,UAAU,OAAO;EAEjB,MAAM,eAAqB;GACzB,MAAM,SAAS,OAAO;GACtB,IAAI,QAAQ,QAAQ,OAAO,OAAO,aAAa,OAAO,YAAY;EACpE;EACA,OAAO;EACP,MAAM,WAAW,IAAI,eAAe,MAAM;EAC1C,IAAI,OAAO,eAAe,SAAS,QAAQ,OAAO,aAAa;EAE/D,aAAa;GACX,SAAS,WAAW;GACpB,QAAQ,QAAQ;GAChB,WAAW,UAAU;EACvB;CAGF,GAAG,CAAC,CAAC;CAGL,CAAA,GAAA,MAAA,UAAA,OAAgB;EACd,WAAW,SAAS,SAAS,KAAK;CACpC,GAAG,CAAC,KAAK,CAAC;CAEV,OAAO,iBAAA,GAAA,kBAAA,IAAA,CAAC,UAAD;EAAQ,KAAK;EAAsB;EAAW,OAAO;GAAE,GAAG;GAAW,GAAG;EAAM;CAAI,CAAA;AAC3F"}

package/dist/index.d.cts

@@ -0,0 +1,27 @@
+import { CSSProperties } from "react";
+import { Gallery as Gallery$1 } from "@scenography/engine";
+import { Scene } from "@scenography/core";
+
+//#region src/Gallery.d.ts
+interface GalleryProps {
+  /** The scene definition to render. Changing it hot-reconciles in place. */
+  scene: Scene;
+  className?: string;
+  style?: CSSProperties;
+  /** Called once with the gallery instance after it mounts (escape hatch). */
+  onReady?: (gallery: Gallery$1) => void;
+}
+/**
+ * Declarative React wrapper over the engine. Mounts a `createGallery` onto a
+ * canvas, keeps it sized to its container, and feeds scene changes through
+ * `setScene` so edits reconcile without remounting.
+ */
+declare function Gallery({
+  scene,
+  className,
+  style,
+  onReady
+}: GalleryProps): JSX.Element;
+//#endregion
+export { Gallery, type GalleryProps };
+//# sourceMappingURL=index.d.cts.map

package/dist/index.d.mts

@@ -0,0 +1,27 @@
+import { CSSProperties } from "react";
+import { Gallery as Gallery$1 } from "@scenography/engine";
+import { Scene } from "@scenography/core";
+
+//#region src/Gallery.d.ts
+interface GalleryProps {
+  /** The scene definition to render. Changing it hot-reconciles in place. */
+  scene: Scene;
+  className?: string;
+  style?: CSSProperties;
+  /** Called once with the gallery instance after it mounts (escape hatch). */
+  onReady?: (gallery: Gallery$1) => void;
+}
+/**
+ * Declarative React wrapper over the engine. Mounts a `createGallery` onto a
+ * canvas, keeps it sized to its container, and feeds scene changes through
+ * `setScene` so edits reconcile without remounting.
+ */
+declare function Gallery({
+  scene,
+  className,
+  style,
+  onReady
+}: GalleryProps): JSX.Element;
+//#endregion
+export { Gallery, type GalleryProps };
+//# sourceMappingURL=index.d.mts.map

package/dist/index.mjs

@@ -0,0 +1,53 @@
+import { useEffect, useRef } from "react";
+import { createGallery } from "@scenography/engine";
+import { jsx } from "react/jsx-runtime";
+//#region src/Gallery.tsx
+const fillStyle = {
+	display: "block",
+	width: "100%",
+	height: "100%"
+};
+/**
+* Declarative React wrapper over the engine. Mounts a `createGallery` onto a
+* canvas, keeps it sized to its container, and feeds scene changes through
+* `setScene` so edits reconcile without remounting.
+*/
+function Gallery({ scene, className, style, onReady }) {
+	const canvasRef = useRef(null);
+	const galleryRef = useRef(null);
+	useEffect(() => {
+		const canvas = canvasRef.current;
+		if (!canvas) return;
+		const gallery = createGallery(scene, { canvas });
+		galleryRef.current = gallery;
+		gallery.start();
+		onReady?.(gallery);
+		const resize = () => {
+			const parent = canvas.parentElement;
+			if (parent) gallery.resize(parent.clientWidth, parent.clientHeight);
+		};
+		resize();
+		const observer = new ResizeObserver(resize);
+		if (canvas.parentElement) observer.observe(canvas.parentElement);
+		return () => {
+			observer.disconnect();
+			gallery.dispose();
+			galleryRef.current = null;
+		};
+	}, []);
+	useEffect(() => {
+		galleryRef.current?.setScene(scene);
+	}, [scene]);
+	return /* @__PURE__ */ jsx("canvas", {
+		ref: canvasRef,
+		className,
+		style: {
+			...fillStyle,
+			...style
+		}
+	});
+}
+//#endregion
+export { Gallery };
+
+//# sourceMappingURL=index.mjs.map

package/dist/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.mjs","names":[],"sources":["../src/Gallery.tsx"],"sourcesContent":["import { useEffect, useRef, type CSSProperties } from \"react\";\nimport { createGallery, type Gallery as GalleryInstance } from \"@scenography/engine\";\nimport type { Scene } from \"@scenography/core\";\n\nexport interface GalleryProps {\n  /** The scene definition to render. Changing it hot-reconciles in place. */\n  scene: Scene;\n  className?: string;\n  style?: CSSProperties;\n  /** Called once with the gallery instance after it mounts (escape hatch). */\n  onReady?: (gallery: GalleryInstance) => void;\n}\n\nconst fillStyle: CSSProperties = { display: \"block\", width: \"100%\", height: \"100%\" };\n\n/**\n * Declarative React wrapper over the engine. Mounts a `createGallery` onto a\n * canvas, keeps it sized to its container, and feeds scene changes through\n * `setScene` so edits reconcile without remounting.\n */\nexport function Gallery({ scene, className, style, onReady }: GalleryProps): JSX.Element {\n  const canvasRef = useRef<HTMLCanvasElement>(null);\n  const galleryRef = useRef<GalleryInstance | null>(null);\n\n  // Mount once: create the gallery, track container size, run the loop.\n  useEffect(() => {\n    const canvas = canvasRef.current;\n    if (!canvas) return;\n\n    const gallery = createGallery(scene, { canvas });\n    galleryRef.current = gallery;\n    gallery.start();\n    onReady?.(gallery);\n\n    const resize = (): void => {\n      const parent = canvas.parentElement;\n      if (parent) gallery.resize(parent.clientWidth, parent.clientHeight);\n    };\n    resize();\n    const observer = new ResizeObserver(resize);\n    if (canvas.parentElement) observer.observe(canvas.parentElement);\n\n    return () => {\n      observer.disconnect();\n      gallery.dispose();\n      galleryRef.current = null;\n    };\n    // Mount/unmount only — scene updates are handled below.\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, []);\n\n  // Hot-reconcile whenever the scene definition changes.\n  useEffect(() => {\n    galleryRef.current?.setScene(scene);\n  }, [scene]);\n\n  return <canvas ref={canvasRef} className={className} style={{ ...fillStyle, ...style }} />;\n}\n"],"mappings":";;;;AAaA,MAAM,YAA2B;CAAE,SAAS;CAAS,OAAO;CAAQ,QAAQ;AAAO;;;;;;AAOnF,SAAgB,QAAQ,EAAE,OAAO,WAAW,OAAO,WAAsC;CACvF,MAAM,YAAY,OAA0B,IAAI;CAChD,MAAM,aAAa,OAA+B,IAAI;CAGtD,gBAAgB;EACd,MAAM,SAAS,UAAU;EACzB,IAAI,CAAC,QAAQ;EAEb,MAAM,UAAU,cAAc,OAAO,EAAE,OAAO,CAAC;EAC/C,WAAW,UAAU;EACrB,QAAQ,MAAM;EACd,UAAU,OAAO;EAEjB,MAAM,eAAqB;GACzB,MAAM,SAAS,OAAO;GACtB,IAAI,QAAQ,QAAQ,OAAO,OAAO,aAAa,OAAO,YAAY;EACpE;EACA,OAAO;EACP,MAAM,WAAW,IAAI,eAAe,MAAM;EAC1C,IAAI,OAAO,eAAe,SAAS,QAAQ,OAAO,aAAa;EAE/D,aAAa;GACX,SAAS,WAAW;GACpB,QAAQ,QAAQ;GAChB,WAAW,UAAU;EACvB;CAGF,GAAG,CAAC,CAAC;CAGL,gBAAgB;EACd,WAAW,SAAS,SAAS,KAAK;CACpC,GAAG,CAAC,KAAK,CAAC;CAEV,OAAO,oBAAC,UAAD;EAAQ,KAAK;EAAsB;EAAW,OAAO;GAAE,GAAG;GAAW,GAAG;EAAM;CAAI,CAAA;AAC3F"}

package/package.json

@@ -0,0 +1,45 @@
+{
+  "name": "@scenography/react",
+  "version": "0.1.0",
+  "description": "React bindings for scenography: a declarative <Gallery> component over the engine, with hot scene updates.",
+  "license": "MIT",
+  "files": [
+    "dist"
+  ],
+  "type": "module",
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.cts",
+  "exports": {
+    ".": {
+      "import": {
+        "types": "./dist/index.d.mts",
+        "default": "./dist/index.mjs"
+      },
+      "require": {
+        "types": "./dist/index.d.cts",
+        "default": "./dist/index.cjs"
+      }
+    }
+  },
+  "dependencies": {
+    "@scenography/engine": "0.1.0"
+  },
+  "devDependencies": {
+    "@types/react": "^18.3.0",
+    "@types/three": "^0.160.0",
+    "react": "^18.3.0",
+    "three": "^0.160.0",
+    "@scenography/core": "0.1.0"
+  },
+  "peerDependencies": {
+    "react": ">=18",
+    "three": ">=0.160.0",
+    "@scenography/core": "0.1.0"
+  },
+  "scripts": {
+    "build": "tsdown",
+    "dev": "tsdown --watch",
+    "typecheck": "tsc --noEmit"
+  }
+}