@navaramap/three-react 0.0.0

package/LICENSE

@@ -0,0 +1,8 @@
+Copyright (c) 2026 MapLibre contributors
+
+This project is dual-licensed under either of
+
+- Apache License, Version 2.0 (see LICENSE-APACHE)
+- MIT license (see LICENSE-MIT)
+
+at your option.

package/README.md

@@ -0,0 +1,128 @@
+# @navaramap/three-react
+
+React bindings for Navara Three. It provides a small set of components and hooks to use `@navaramap/three` declaratively from React apps.
+
+## Install
+
+```bash
+pnpm add @navaramap/three @navaramap/three-react react react-dom three
+```
+
+## Quick Start
+
+Wrap your app with `ViewProvider`, then add layers with the `Layer` component.
+
+```tsx
+// App.tsx
+import { ViewProvider } from "@navaramap/three-react";
+import { Layers } from "./Layers";
+
+export default function App() {
+  return (
+    <ViewProvider>
+      <Layers />
+    </ViewProvider>
+  );
+}
+```
+
+```tsx
+// Layers.tsx
+import {
+  JAPAN_GSI_ELEVATION_DECODER,
+  type LayerDescription,
+  type TilesLayer,
+  Layer as NavaraLayer,
+} from "@navaramap/three";
+import { useViewContext, Layer } from "@navaramap/three-react";
+import { useEffect, useMemo } from "react";
+
+export function Layers() {
+  const { view } = useViewContext();
+
+  // Credit the data through the built-in attribution UI.
+  useEffect(() => {
+    view?.attribution?.add([
+      {
+        attribution: "Geospatial Information Authority of Japan (GSI)",
+        attributionUrl: "https://maps.gsi.go.jp/development/ichiran.html",
+      },
+    ]);
+  }, [view]);
+
+  const baseTiles = useMemo<LayerDescription>(
+    () => ({
+      type: "tiles",
+      data: { url: "…" },
+      raster_tile: { min_zoom: 2, max_zoom: 18 },
+    }),
+    [],
+  );
+
+  const terrain = useMemo<LayerDescription>(
+    () => ({
+      type: "terrain",
+      data: { url: "…" },
+      raster_terrain: {
+        min_zoom: 6,
+        max_zoom: 15,
+        elevation_decoder: JAPAN_GSI_ELEVATION_DECODER(),
+        cast_shadow: true,
+        receive_shadow: true,
+      },
+    }),
+    [],
+  );
+
+  return (
+    <>
+      <Layer config={baseTiles} />
+      <Layer config={terrain} />
+    </>
+  );
+}
+```
+
+## API
+
+- `ViewProvider`
+  - Props: `{ canvas?: HTMLCanvasElement | RefObject<HTMLCanvasElement> }`.
+  - Creates a `ThreeView` and provides it via context. If no `canvas` is given, a fullscreen canvas is appended to `document.body`.
+
+- `useViewContext<CustomLayerDescriptions>()`
+  - Returns `{ view }` where `view` is the underlying `ThreeView<CustomLayerDescriptions>`.
+  - Must be used inside `ViewProvider`.
+
+- `Layer`
+  - Props: `{ config: LayerDescription; onReady?: (handle) => void }`.
+  - Declaratively adds a layer on mount and updates it when `config` changes. The `onReady` callback receives a layer handle.
+
+## Canvas control (optional)
+
+If you want to host the canvas inside your own layout, pass a ref to `ViewProvider`:
+
+```tsx
+import { useRef } from "react";
+import { ViewProvider } from "@navaramap/three-react";
+
+export function AppWithCanvas() {
+  const canvasRef = useRef<HTMLCanvasElement | null>(null);
+  return (
+    <div style={{ position: "relative", width: "100vw", height: "100vh" }}>
+      <canvas ref={canvasRef} style={{ width: "100%", height: "100%" }} />
+      <ViewProvider canvas={canvasRef}>
+        <Layers />
+      </ViewProvider>
+    </div>
+  );
+}
+```
+
+## Notes
+
+- This package is client-side only; if using SSR, render these components on the client.
+- Types are included.
+
+## License
+
+MIT OR Apache-2.0

package/dist/index.d.ts

@@ -0,0 +1,61 @@
+import { BaseHandle } from '@navaramap/three';
+import { BuiltInEffectDescription } from '@navaramap/three';
+import { default as default_2 } from '@navaramap/three';
+import { Descriptions } from '@navaramap/three';
+import { EffectConfig } from '@navaramap/three';
+import { EffectDesc as EffectDesc_2 } from '@navaramap/three';
+import { EmptyDescriptions } from '@navaramap/three';
+import { FC } from 'react';
+import { Layer as Layer_2 } from '@navaramap/three';
+import { LayerDescription } from '@navaramap/three';
+import { LightConfig } from '@navaramap/three';
+import { LightDesc as LightDesc_2 } from '@navaramap/three';
+import { MeshConfig } from '@navaramap/three';
+import { MeshDesc as MeshDesc_2 } from '@navaramap/three';
+import { Options } from '@navaramap/three';
+import { Plugin as Plugin_2 } from '@navaramap/three';
+import { PropsWithChildren } from 'react';
+import { RefObject } from 'react';
+
+export declare function EffectDesc<L extends EffectDesc_2 = EffectDesc_2>({ config, onReady, }: PropsWithChildren<EffectDescProps<L>>): null;
+
+declare type EffectDescProps<L extends EffectDesc_2 = EffectDesc_2> = {
+    config: EffectConfig | BuiltInEffectDescription;
+    onReady?: (handle: BaseHandle<L>) => (() => void) | void;
+};
+
+export declare function Layer({ config, onReady }: PropsWithChildren<LayerProps>): null;
+
+declare type LayerProps = {
+    config: LayerDescription;
+    onReady?: (handle: Layer_2) => (() => void) | void;
+};
+
+export declare function LightDesc<L extends LightDesc_2 = LightDesc_2>({ config, onReady, }: PropsWithChildren<LightDescProps<L>>): null;
+
+declare type LightDescProps<L extends LightDesc_2 = LightDesc_2> = {
+    config: LightConfig;
+    onReady?: (handle: BaseHandle<L>) => (() => void) | void;
+};
+
+export declare function MeshDesc<L extends MeshDesc_2 = MeshDesc_2>({ config, onReady, }: PropsWithChildren<MeshDescProps<L>>): null;
+
+declare type MeshDescProps<L extends MeshDesc_2 = MeshDesc_2> = {
+    config: MeshConfig;
+    onReady?: (handle: BaseHandle<L>) => (() => void) | void;
+};
+
+export declare const useViewContext: <D extends Descriptions = EmptyDescriptions>() => Required<ViewContextValues<D>>;
+
+declare type ViewContextValues<D extends Descriptions = EmptyDescriptions> = {
+    view?: default_2<D>;
+};
+
+export declare const ViewProvider: FC<PropsWithChildren<ViewProviderProps>>;
+
+export declare type ViewProviderProps = {
+    canvas?: HTMLCanvasElement | RefObject<HTMLCanvasElement>;
+    plugins?: Plugin_2[];
+} & Options;
+
+export { }

package/dist/index.js

@@ -0,0 +1,105 @@
+import e from "@navaramap/three";
+import { createContext as t, useCallback as n, useContext as r, useEffect as i, useRef as a, useState as o } from "react";
+//#region \0rolldown/runtime.js
+var s = (e, t) => () => (t || (e((t = { exports: {} }).exports, t), e = null), t.exports), c = /* @__PURE__ */ s(((e) => {
+	var t = Symbol.for("react.transitional.element");
+	function n(e, n, r) {
+		var i = null;
+		if (r !== void 0 && (i = "" + r), n.key !== void 0 && (i = "" + n.key), "key" in n) for (var a in r = {}, n) a !== "key" && (r[a] = n[a]);
+		else r = n;
+		return n = r.ref, {
+			$$typeof: t,
+			type: e,
+			key: i,
+			ref: n === void 0 ? null : n,
+			props: r
+		};
+	}
+	e.jsx = n;
+})), l = (/* @__PURE__ */ s(((e, t) => {
+	t.exports = c();
+})))(), u = t(void 0), d = () => {
+	let e = r(u);
+	if (!e) throw Error("Navara React Error: You have to invoke this hook inside of ViewProvider.");
+	return e;
+}, f = ({ canvas: t, children: n, plugins: r, ...s }) => {
+	let [c, d] = o(), [f, p] = o(!1), m = a(void 0);
+	return i(() => {
+		if (m.current) {
+			console.warn("You need to recreate ThreeView.");
+			return;
+		}
+		let n = new e({
+			canvas: t && "current" in t ? t.current : t,
+			...s
+		});
+		if (r) for (let e of r) n.addPlugin(e);
+		return d(n), m.current = n, (async () => {
+			try {
+				await n.init(), p(!0);
+			} catch (e) {
+				console.error("Navara init failed:", e);
+			}
+		})(), () => {};
+	}, [
+		t,
+		s,
+		r
+	]), /* @__PURE__ */ (0, l.jsx)(u.Provider, {
+		value: { view: c },
+		children: f ? n : null
+	});
+};
+//#endregion
+//#region src/Layer.tsx
+function p({ config: e, onReady: t }) {
+	let { view: n } = d(), r = a(null), o = a(e), s = a(t);
+	return i(() => {
+		o.current = e, s.current = t;
+	}, [e, t]), i(() => {
+		let e = n.addLayer(o.current);
+		r.current = e;
+		let t = s.current?.(e);
+		return () => {
+			t?.(), e.delete(), r.current = null;
+		};
+	}, [n]), i(() => {
+		if (r.current) if ("data" in e) {
+			let { data: t, ...n } = e;
+			r.current.update(n);
+		} else r.current.update(e);
+	}, [e]), null;
+}
+function m(e, t, n, r) {
+	let o = a(null), s = a(e), c = a(n), l = a(r);
+	i(() => {
+		s.current = e, c.current = n, l.current = r;
+	}, [
+		e,
+		n,
+		r
+	]), i(() => {
+		let e = s.current(c.current);
+		o.current = e;
+		let t = l.current?.(e);
+		return () => {
+			t?.(), e.delete(), o.current = null;
+		};
+	}, [t]), i(() => {
+		o.current && o.current.update(n);
+	}, [n]);
+}
+function h({ config: e, onReady: t }) {
+	let { view: r } = d();
+	return m(n((e) => r.addMesh(e), [r]), r, e, t), null;
+}
+function g({ config: e, onReady: t }) {
+	let { view: r } = d();
+	return m(n((e) => r.addLight(e), [r]), r, e, t), null;
+}
+function _({ config: e, onReady: t }) {
+	let { view: r } = d();
+	return m(n((e) => r.addEffect(e), [r]), r, e, t), null;
+}
+//#endregion
+export { _ as EffectDesc, p as Layer, g as LightDesc, h as MeshDesc, f as ViewProvider, d as useViewContext };

package/dist/index.umd.cjs

@@ -0,0 +1 @@
+(function(e,t){typeof exports==`object`&&typeof module<`u`?t(exports,require("@navaramap/three"),require("react")):typeof define==`function`&&define.amd?define([`exports`,`@navaramap/three`,`react`],t):(e=typeof globalThis<`u`?globalThis:e||self,t(e.NavaraThreeReact={},e._navaramap_three,e.react))})(this,function(e,t,n){Object.defineProperty(e,Symbol.toStringTag,{value:`Module`});var r=Object.create,i=Object.defineProperty,a=Object.getOwnPropertyDescriptor,o=Object.getOwnPropertyNames,s=Object.getPrototypeOf,c=Object.prototype.hasOwnProperty,l=(e,t)=>()=>(t||(e((t={exports:{}}).exports,t),e=null),t.exports),u=(e,t,n,r)=>{if(t&&typeof t==`object`||typeof t==`function`)for(var s=o(t),l=0,u=s.length,d;l<u;l++)d=s[l],!c.call(e,d)&&d!==n&&i(e,d,{get:(e=>t[e]).bind(null,d),enumerable:!(r=a(t,d))||r.enumerable});return e};t=((e,t,n)=>(n=e==null?{}:r(s(e)),u(t||!e||!e.__esModule?i(n,`default`,{value:e,enumerable:!0}):n,e)))(t,1);var d=l((e=>{var t=Symbol.for(`react.transitional.element`);function n(e,n,r){var i=null;if(r!==void 0&&(i=``+r),n.key!==void 0&&(i=``+n.key),`key`in n)for(var a in r={},n)a!==`key`&&(r[a]=n[a]);else r=n;return n=r.ref,{$$typeof:t,type:e,key:i,ref:n===void 0?null:n,props:r}}e.jsx=n})),f=l(((e,t)=>{t.exports=d()}))(),p=(0,n.createContext)(void 0),m=()=>{let e=(0,n.useContext)(p);if(!e)throw Error(`Navara React Error: You have to invoke this hook inside of ViewProvider.`);return e},h=({canvas:e,children:r,plugins:i,...a})=>{let[o,s]=(0,n.useState)(),[c,l]=(0,n.useState)(!1),u=(0,n.useRef)(void 0);return(0,n.useEffect)(()=>{if(u.current){console.warn(`You need to recreate ThreeView.`);return}let n=new t.default({canvas:e&&`current`in e?e.current:e,...a});if(i)for(let e of i)n.addPlugin(e);return s(n),u.current=n,(async()=>{try{await n.init(),l(!0)}catch(e){console.error(`Navara init failed:`,e)}})(),()=>{}},[e,a,i]),(0,f.jsx)(p.Provider,{value:{view:o},children:c?r:null})};function g({config:e,onReady:t}){let{view:r}=m(),i=(0,n.useRef)(null),a=(0,n.useRef)(e),o=(0,n.useRef)(t);return(0,n.useEffect)(()=>{a.current=e,o.current=t},[e,t]),(0,n.useEffect)(()=>{let e=r.addLayer(a.current);i.current=e;let t=o.current?.(e);return()=>{t?.(),e.delete(),i.current=null}},[r]),(0,n.useEffect)(()=>{if(i.current)if(`data`in e){let{data:t,...n}=e;i.current.update(n)}else i.current.update(e)},[e]),null}function _(e,t,r,i){let a=(0,n.useRef)(null),o=(0,n.useRef)(e),s=(0,n.useRef)(r),c=(0,n.useRef)(i);(0,n.useEffect)(()=>{o.current=e,s.current=r,c.current=i},[e,r,i]),(0,n.useEffect)(()=>{let e=o.current(s.current);a.current=e;let t=c.current?.(e);return()=>{t?.(),e.delete(),a.current=null}},[t]),(0,n.useEffect)(()=>{a.current&&a.current.update(r)},[r])}function v({config:e,onReady:t}){let{view:r}=m();return _((0,n.useCallback)(e=>r.addMesh(e),[r]),r,e,t),null}function y({config:e,onReady:t}){let{view:r}=m();return _((0,n.useCallback)(e=>r.addLight(e),[r]),r,e,t),null}function b({config:e,onReady:t}){let{view:r}=m();return _((0,n.useCallback)(e=>r.addEffect(e),[r]),r,e,t),null}e.EffectDesc=b,e.Layer=g,e.LightDesc=y,e.MeshDesc=v,e.ViewProvider=h,e.useViewContext=m});

package/package.json

@@ -0,0 +1,44 @@
+{
+  "name": "@navaramap/three-react",
+  "type": "module",
+  "version": "0.0.0",
+  "main": "dist/index.umd.cjs",
+  "module": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "files": [
+    "src",
+    "dist"
+  ],
+  "license": "MIT OR Apache-2.0",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/reearth/navara.git",
+    "directory": "web/navara_three_react"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "peerDependencies": {
+    "react": ">=19",
+    "three": ">=0.183.0",
+    "@navaramap/three": "0.0.0"
+  },
+  "devDependencies": {
+    "@types/react": "19.2.17",
+    "@types/react-dom": "19.2.3",
+    "@types/three": "0.185.1",
+    "three": "0.185.1",
+    "@navaramap/three": "0.0.0"
+  },
+  "scripts": {
+    "type-check": "tsc && tsc -p tsconfig.node.json",
+    "build": "pnpm type-check && vite build --watch=false",
+    "build:dev": "vite build --mode development",
+    "build:dev:watch": "pnpm build:dev --watch",
+    "test": "vitest --passWithNoTests --watch=false",
+    "lint": "eslint . --fix",
+    "lint:check": "eslint .",
+    "format": "prettier --write --ignore-path ../../.gitignore --ignore-path ../../.prettierignore .",
+    "format:check": "prettier --check --ignore-path ../../.gitignore --ignore-path ../../.prettierignore ."
+  }
+}

package/src/Layer.tsx

@@ -0,0 +1,173 @@
+import {
+  type BaseDesc,
+  type BaseHandle,
+  type MeshDesc as MeshDescClass,
+  type LightDesc as LightDescClass,
+  type EffectDesc as EffectDescClass,
+  type Layer as NavaraLayer,
+  type LayerDescription,
+  type MeshConfig,
+  type LightConfig,
+  type EffectConfig,
+  type BuiltInEffectDescription,
+} from "@navaramap/three";
+import { useCallback, useEffect, useRef, type PropsWithChildren } from "react";
+
+import { useViewContext } from "./ViewContext";
+
+type LayerProps = {
+  config: LayerDescription;
+  // eslint-disable-next-line @typescript-eslint/no-invalid-void-type
+  onReady?: (handle: NavaraLayer) => (() => void) | void;
+};
+
+export function Layer({ config, onReady }: PropsWithChildren<LayerProps>) {
+  const { view } = useViewContext();
+
+  const handleRef = useRef<NavaraLayer | null>(null);
+
+  const configRef = useRef(config);
+  const onReadyRef = useRef(onReady);
+
+  // Sync the latest-value refs outside render (react-hooks/refs). This effect
+  // is declared first so it runs before the mount effect below re-runs.
+  useEffect(() => {
+    configRef.current = config;
+    onReadyRef.current = onReady;
+  }, [config, onReady]);
+
+  useEffect(() => {
+    const handle = view.addLayer(configRef.current);
+    handleRef.current = handle;
+    const unmount = onReadyRef.current?.(handle);
+    return () => {
+      unmount?.();
+      handle.delete();
+      handleRef.current = null;
+    };
+  }, [view]);
+
+  useEffect(() => {
+    if (handleRef.current) {
+      if ("data" in config) {
+        const { data: _data, ...withoutData } = config;
+        handleRef.current.update(withoutData);
+      } else {
+        handleRef.current.update(config);
+      }
+    }
+  }, [config]);
+
+  return null;
+}
+
+function useDeclarationLayer<L extends BaseDesc>(
+  addFn: (config: Record<string, unknown>) => BaseHandle<L>,
+  view: object,
+  config: Record<string, unknown>,
+  // eslint-disable-next-line @typescript-eslint/no-invalid-void-type
+  onReady?: (handle: BaseHandle<L>) => (() => void) | void,
+) {
+  const handleRef = useRef<BaseHandle<L> | null>(null);
+  const addFnRef = useRef(addFn);
+  const configRef = useRef(config);
+  const onReadyRef = useRef(onReady);
+
+  // Sync the latest-value refs outside render (react-hooks/refs). This effect
+  // is declared first so it runs before the mount effect below re-runs.
+  useEffect(() => {
+    addFnRef.current = addFn;
+    configRef.current = config;
+    onReadyRef.current = onReady;
+  }, [addFn, config, onReady]);
+
+  useEffect(() => {
+    const handle = addFnRef.current(configRef.current);
+    handleRef.current = handle;
+    const unmount = onReadyRef.current?.(handle);
+    return () => {
+      unmount?.();
+      handle.delete();
+      handleRef.current = null;
+    };
+  }, [view]);
+
+  useEffect(() => {
+    if (handleRef.current) {
+      handleRef.current.update(config as never);
+    }
+  }, [config]);
+}
+
+type MeshDescProps<L extends MeshDescClass = MeshDescClass> = {
+  config: MeshConfig;
+  // eslint-disable-next-line @typescript-eslint/no-invalid-void-type
+  onReady?: (handle: BaseHandle<L>) => (() => void) | void;
+};
+
+export function MeshDesc<L extends MeshDescClass = MeshDescClass>({
+  config,
+  onReady,
+}: PropsWithChildren<MeshDescProps<L>>) {
+  const { view } = useViewContext();
+  const addFn = useCallback(
+    (c: Record<string, unknown>) => view.addMesh<L>(c as MeshConfig),
+    [view],
+  );
+  useDeclarationLayer<L>(
+    addFn,
+    view,
+    config as Record<string, unknown>,
+    onReady,
+  );
+  return null;
+}
+
+type LightDescProps<L extends LightDescClass = LightDescClass> = {
+  config: LightConfig;
+  // eslint-disable-next-line @typescript-eslint/no-invalid-void-type
+  onReady?: (handle: BaseHandle<L>) => (() => void) | void;
+};
+
+export function LightDesc<L extends LightDescClass = LightDescClass>({
+  config,
+  onReady,
+}: PropsWithChildren<LightDescProps<L>>) {
+  const { view } = useViewContext();
+  const addFn = useCallback(
+    (c: Record<string, unknown>) => view.addLight<L>(c as LightConfig),
+    [view],
+  );
+  useDeclarationLayer<L>(
+    addFn,
+    view,
+    config as Record<string, unknown>,
+    onReady,
+  );
+  return null;
+}
+
+type EffectDescProps<L extends EffectDescClass = EffectDescClass> = {
+  config: EffectConfig | BuiltInEffectDescription;
+  // eslint-disable-next-line @typescript-eslint/no-invalid-void-type
+  onReady?: (handle: BaseHandle<L>) => (() => void) | void;
+};
+
+export function EffectDesc<L extends EffectDescClass = EffectDescClass>({
+  config,
+  onReady,
+}: PropsWithChildren<EffectDescProps<L>>) {
+  const { view } = useViewContext();
+  const addFn = useCallback(
+    (c: Record<string, unknown>) =>
+      view.addEffect<L>(c as EffectConfig | BuiltInEffectDescription),
+    [view],
+  );
+  useDeclarationLayer<L>(
+    addFn,
+    view,
+    config as Record<string, unknown>,
+    onReady,
+  );
+  return null;
+}

package/src/ViewContext.tsx

@@ -0,0 +1,85 @@
+import ThreeView from "@navaramap/three";
+import type {
+  Plugin,
+  Options,
+  Descriptions,
+  EmptyDescriptions,
+} from "@navaramap/three";
+import { createContext, useContext, useEffect, useRef, useState } from "react";
+import type { FC, PropsWithChildren, RefObject } from "react";
+
+type ViewContextValues<D extends Descriptions = EmptyDescriptions> = {
+  view?: ThreeView<D>;
+};
+
+const ViewContext = createContext<ViewContextValues | undefined>(undefined);
+
+// eslint-disable-next-line react-refresh/only-export-components
+export const useViewContext = <
+  D extends Descriptions = EmptyDescriptions,
+>() => {
+  const ctx = useContext(ViewContext);
+  if (!ctx) {
+    throw new Error(
+      "Navara React Error: You have to invoke this hook inside of ViewProvider.",
+    );
+  }
+
+  return ctx as Required<ViewContextValues<D>>;
+};
+
+export type ViewProviderProps = {
+  canvas?: HTMLCanvasElement | RefObject<HTMLCanvasElement>;
+  plugins?: Plugin[];
+} & Options;
+
+export const ViewProvider: FC<PropsWithChildren<ViewProviderProps>> = ({
+  canvas,
+  children,
+  plugins,
+  ...opts
+}) => {
+  const [view, setView] = useState<ThreeView | undefined>();
+  const [isReady, setIsReady] = useState(false);
+  // The ref is written when the view is created in the effect below; syncing it
+  // during render is both redundant and disallowed by react-hooks/refs.
+  const viewRef = useRef<ThreeView | undefined>(undefined);
+
+  useEffect(() => {
+    if (viewRef.current) {
+      console.warn("You need to recreate ThreeView.");
+      return;
+    }
+
+    const innerCanvas = canvas && "current" in canvas ? canvas.current : canvas;
+
+    const v = new ThreeView({ canvas: innerCanvas, ...opts });
+    if (plugins) {
+      for (const plugin of plugins) {
+        v.addPlugin(plugin);
+      }
+    }
+    setView(v);
+    viewRef.current = v;
+
+    (async () => {
+      try {
+        await v.init();
+        setIsReady(true);
+      } catch (e) {
+        console.error("Navara init failed:", e);
+      }
+    })();
+
+    return () => {
+      // TODO
+      // v.dispose();
+    };
+  }, [canvas, opts, plugins]);
+
+  return (
+    <ViewContext.Provider value={{ view }}>
+      {isReady ? children : null}
+    </ViewContext.Provider>
+  );
+};

package/src/index.ts

@@ -0,0 +1,2 @@
+export { Layer, MeshDesc, LightDesc, EffectDesc } from "./Layer";
+export * from "./ViewContext";

package/src/vite-env.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="vite/client" />
+
+declare module "*.glsl" {
+  const shader: string;
+  export default shader;
+}