@blender-ui/react 0.1.0 → 0.2.0

package/README.md

@@ -103,7 +103,8 @@ cover yet.
   [`@blender-ui/native`](https://www.npmjs.com/package/@blender-ui/native),
   and `act(fn)` is for tests.
   - Window options: `title`, `width`, `height`, `resizable`, `gpu`,
-    `headless`.
+    `slug`, `headless`, and `theme` (`'dark'`, the default, or `'light'`:
+    Blender's Light theme; `BUI_THEME` applies otherwise).
 
 ## Standalone apps
 
@@ -129,7 +130,8 @@ lists updating through signals, or use `--bun`.
 
 ## Benchmarks
 
-Ryzen 7 5800U laptop, Windows 11, GPU renderer, React's production build.
+Ryzen 7 5800U laptop, Windows 11, GPU renderer, React's production build,
+measured before the latest features landed.
 The full method is in the [guide](https://github.com/ppmpreetham/BUI/blob/main/docs/javascript.md#performance).
 
 **Startup:** a small React app that quits at its first frame; medians of 12
@@ -156,10 +158,14 @@ launches.
 
 ## Requirements
 
-- **Windows x64** for native windows; `headless: true` renders off-screen.
+- **Windows x64** prebuilt. On **Linux**, build the `@blender-ui/native`
+  addon from source (`npm run build` in `bindings/node`) and windows are
+  native X11 windows. On **macOS** it's headless for now. `headless: true`
+  renders off-screen anywhere.
 - **Node.js 18** or newer, or Bun.
 - **React 19.3.**
 
 Guide: [docs/javascript.md](https://github.com/ppmpreetham/BUI/blob/main/docs/javascript.md) ·
+Website: [bui.preetham.top](https://bui.preetham.top) ·
 Source: [github.com/ppmpreetham/BUI](https://github.com/ppmpreetham/BUI) ·
 License: GPL-2.0-or-later

package/index.d.ts

@@ -93,3 +93,18 @@ declare module 'react' {
     buiSignal: ReadSignal<unknown>
   }
 }
+
+/** Blender's widgets as components: always drawn and handled like Blender.
+ *  Their lowercase HTML counterparts look like a browser's form controls
+ *  (and like Blender inside an element with the `styled` attribute). */
+type BlenderProps = Record<string, unknown> & { children?: ReactNode }
+export function Button (props: BlenderProps): ReactNode
+export function Checkbox (props: BlenderProps): ReactNode
+export function Radio (props: BlenderProps): ReactNode
+export function NumberField (props: BlenderProps): ReactNode
+export function NumberSlider (props: BlenderProps): ReactNode
+export function TextField (props: BlenderProps): ReactNode
+export function TextArea (props: BlenderProps): ReactNode
+export function ColorSwatch (props: BlenderProps): ReactNode
+export function Dropdown (props: BlenderProps): ReactNode
+export function ProgressBar (props: BlenderProps): ReactNode

package/index.js

@@ -321,7 +321,7 @@ function createRoot (window) {
  * @returns {{ app: App, window: import('@blender-ui/native').Window, root: ReturnType<typeof createRoot> }}
  */
 function render (element, options = {}) {
-  const app = options.app ?? new App({ gpu: options.gpu, slug: options.slug, headless: options.headless })
+  const app = options.app ?? new App({ gpu: options.gpu, slug: options.slug, headless: options.headless, theme: options.theme })
   const window = app.window(options)
   const root = createRoot(window)
   root.render(element)
@@ -339,7 +339,18 @@ function act (fn) {
 const reactHooks = {}
 for (const k of Object.keys(React)) if (/^use([A-Z]|$)/.test(k)) reactHooks[k] = React[k]
 
+// Blender's widgets as components: `<NumberSlider min={0} max={10} />`,
+// `<Button onClick={..}>Apply</Button>`. Always Blender widgets; their
+// lowercase HTML counterparts look like a browser's (Blender's inside `styled`).
+const blenderComponents = {}
+for (const name of Object.keys(native.BLENDER_COMPONENTS)) {
+  const C = (props) => React.createElement(name, props)
+  Object.defineProperty(C, 'name', { value: name })
+  blenderComponents[name] = C
+}
+
 module.exports = {
+  ...blenderComponents,
   ...reactHooks,
   ...hooks,
   render,

package/package.json

@@ -1,74 +1,74 @@
-{
-  "name": "@blender-ui/react",
-  "version": "0.1.0",
-  "description": "React renderer for BUI: Blender's UI in native windows from JSX, with React's hooks backed by signals. Node.js and Bun.",
-  "main": "index.js",
-  "types": "index.d.ts",
-  "exports": {
-    ".": {
-      "types": "./index.d.ts",
-      "default": "./index.js"
-    },
-    "./jsx-runtime": {
-      "types": "./jsx-runtime.d.ts",
-      "default": "./jsx-runtime.js"
-    },
-    "./jsx-dev-runtime": {
-      "types": "./jsx-dev-runtime.d.ts",
-      "default": "./jsx-dev-runtime.js"
-    },
-    "./package.json": "./package.json"
-  },
-  "files": [
-    "index.js",
-    "hooks.js",
-    "index.d.ts",
-    "jsx-runtime.js",
-    "jsx-runtime.d.ts",
-    "jsx-dev-runtime.js",
-    "jsx-dev-runtime.d.ts",
-    "README.md",
-    "LICENSE"
-  ],
-  "scripts": {
-    "test": "node --test",
-    "prepublishOnly": "node --test",
-    "prepack": "node -e \"require('fs').copyFileSync('../../LICENSE', 'LICENSE')\"",
-    "postpack": "node -e \"require('fs').rmSync('LICENSE', { force: true })\""
-  },
-  "engines": {
-    "node": ">=18"
-  },
-  "dependencies": {
-    "@blender-ui/native": "^0.2.0",
-    "react-reconciler": "0.34.0"
-  },
-  "peerDependencies": {
-    "react": "^19.3.0"
-  },
-  "devDependencies": {
-    "react": "19.3.1"
-  },
-  "license": "GPL-2.0-or-later",
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/ppmpreetham/BUI.git",
-    "directory": "bindings/react"
-  },
-  "homepage": "https://github.com/ppmpreetham/BUI/blob/main/docs/javascript.md",
-  "bugs": {
-    "url": "https://github.com/ppmpreetham/BUI/issues"
-  },
-  "keywords": [
-    "react",
-    "renderer",
-    "react-reconciler",
-    "signals",
-    "blender",
-    "ui",
-    "desktop",
-    "native",
-    "tailwind",
-    "bun"
-  ]
-}
+{
+  "name": "@blender-ui/react",
+  "version": "0.2.0",
+  "description": "React renderer for BUI: Blender's UI in native windows from JSX, with React's hooks backed by signals. Node.js and Bun.",
+  "main": "index.js",
+  "types": "index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./index.d.ts",
+      "default": "./index.js"
+    },
+    "./jsx-runtime": {
+      "types": "./jsx-runtime.d.ts",
+      "default": "./jsx-runtime.js"
+    },
+    "./jsx-dev-runtime": {
+      "types": "./jsx-dev-runtime.d.ts",
+      "default": "./jsx-dev-runtime.js"
+    },
+    "./package.json": "./package.json"
+  },
+  "files": [
+    "index.js",
+    "hooks.js",
+    "index.d.ts",
+    "jsx-runtime.js",
+    "jsx-runtime.d.ts",
+    "jsx-dev-runtime.js",
+    "jsx-dev-runtime.d.ts",
+    "README.md",
+    "LICENSE"
+  ],
+  "scripts": {
+    "test": "node --test",
+    "prepublishOnly": "node --test",
+    "prepack": "node -e \"require('fs').copyFileSync('../../LICENSE', 'LICENSE')\"",
+    "postpack": "node -e \"require('fs').rmSync('LICENSE', { force: true })\""
+  },
+  "engines": {
+    "node": ">=18"
+  },
+  "dependencies": {
+    "@blender-ui/native": "^0.2.1",
+    "react-reconciler": "0.34.0"
+  },
+  "peerDependencies": {
+    "react": "^19.3.0"
+  },
+  "devDependencies": {
+    "react": "19.3.1"
+  },
+  "license": "GPL-2.0-or-later",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/ppmpreetham/BUI.git",
+    "directory": "bindings/react"
+  },
+  "homepage": "https://bui.preetham.top",
+  "bugs": {
+    "url": "https://github.com/ppmpreetham/BUI/issues"
+  },
+  "keywords": [
+    "react",
+    "renderer",
+    "react-reconciler",
+    "signals",
+    "blender",
+    "ui",
+    "desktop",
+    "native",
+    "tailwind",
+    "bun"
+  ]
+}