From 2f9e0a99361da191c1326ae3244d9a188a48ba70 Mon Sep 17 00:00:00 2001
From: Kenneth <kenneth@nym.sh>
Date: Sat, 28 Feb 2026 01:27:37 +0000
Subject: [PATCH] Rename package from jrx to jfx

Co-authored-by: Ona <no-reply@ona.com>
---
 .devcontainer/devcontainer.json |  2 +-
 README.md                       | 28 +++++++++----------
 example/bun.lock                | 18 +++++--------
 example/components.ts           | 14 +++++-----
 example/package.json            |  4 +--
 example/specs/full.tsx          |  4 +--
 example/specs/simple.tsx        |  6 ++---
 example/src/App.tsx             |  2 +-
 example/src/index.html          |  2 +-
 example/src/server.ts           |  2 +-
 package.json                    |  2 +-
 src/index.ts                    |  4 +--
 src/integration.test.tsx        | 48 ++++++++++++++++-----------------
 src/jsx-runtime.ts              | 32 +++++++++++-----------
 src/jsx.test.tsx                | 14 +++++-----
 src/render.test.tsx             |  6 ++---
 src/render.ts                   | 24 ++++++++---------
 src/spec-validator.test.tsx     |  8 +++---
 src/test-components.ts          | 22 +++++++--------
 src/types.ts                    | 44 +++++++++++++++---------------
 tsconfig.json                   |  6 ++---
 21 files changed, 144 insertions(+), 148 deletions(-)

diff --git a/.devcontainer/devcontainer.json b/.devcontainer/devcontainer.json
index 67b3c52..0fb5bdd 100644
--- a/.devcontainer/devcontainer.json
+++ b/.devcontainer/devcontainer.json
@@ -1,5 +1,5 @@
 {
-	"name": "jrx",
+	"name": "jfx",
 	"build": {
 		"context": ".",
 		"dockerfile": "Dockerfile"
diff --git a/README.md b/README.md
index 1b66241..71fd577 100644
--- a/README.md
+++ b/README.md
@@ -1,22 +1,22 @@
-# jrx
+# jfx
 
 JSX factory for [json-render](https://github.com/vercel-labs/json-render). Write JSX, get Spec JSON.
 
 ## Install
 
 ```bash
-bun add jrx @json-render/core
+bun add jfx @json-render/core
 ```
 
 ## Setup
 
-Configure your `tsconfig.json` to use jrx as the JSX source:
+Configure your `tsconfig.json` to use jfx as the JSX source:
 
 ```json
 {
   "compilerOptions": {
     "jsx": "react-jsx",
-    "jsxImportSource": "jrx"
+    "jsxImportSource": "jfx"
   }
 }
 ```
@@ -24,7 +24,7 @@ Configure your `tsconfig.json` to use jrx as the JSX source:
 Or use a per-file pragma:
 
 ```tsx
-/** @jsxImportSource jrx */
+/** @jsxImportSource jfx */
 ```
 
 ## Usage
@@ -34,18 +34,18 @@ Or use a per-file pragma:
 Create wrapper functions that map JSX tags to json-render component type names:
 
 ```ts
-import { jsx } from "jrx/jsx-runtime";
-import type { JrxNode } from "jrx";
+import { jsx } from "jfx/jsx-runtime";
+import type { JfxNode } from "jfx";
 
-export function Stack(props: Record<string, unknown>): JrxNode {
+export function Stack(props: Record<string, unknown>): JfxNode {
   return jsx("Stack", props);
 }
 
-export function Text(props: Record<string, unknown>): JrxNode {
+export function Text(props: Record<string, unknown>): JfxNode {
   return jsx("Text", props);
 }
 
-export function Button(props: Record<string, unknown>): JrxNode {
+export function Button(props: Record<string, unknown>): JfxNode {
   return jsx("Button", props);
 }
 ```
@@ -53,12 +53,12 @@ export function Button(props: Record<string, unknown>): JrxNode {
 ### Render JSX to Spec JSON
 
 ```tsx
-import { render } from "jrx";
+import { render } from "jfx";
 import { Stack, Text, Button } from "./components";
 
 const spec = render(
   <Stack>
-    <Text content="Hello from jrx!" />
+    <Text content="Hello from jfx!" />
     <Button label="Click me" />
   </Stack>
 );
@@ -72,7 +72,7 @@ This produces:
   "elements": {
     "text-1": {
       "type": "Text",
-      "props": { "content": "Hello from jrx!" }
+      "props": { "content": "Hello from jfx!" }
     },
     "button-1": {
       "type": "Button",
@@ -135,7 +135,7 @@ These props are extracted from JSX and mapped to Spec fields rather than passed
 
 ## Example
 
-The `example/` directory contains a Bun HTTP server that demonstrates jrx in action. It shows JSX source, live rendered UI (via `@json-render/react`), and JSON output side by side.
+The `example/` directory contains a Bun HTTP server that demonstrates jfx in action. It shows JSX source, live rendered UI (via `@json-render/react`), and JSON output side by side.
 
 ```bash
 cd example
diff --git a/example/bun.lock b/example/bun.lock
index 8fb4e8c..b9b1d23 100644
--- a/example/bun.lock
+++ b/example/bun.lock
@@ -3,11 +3,11 @@
   "configVersion": 1,
   "workspaces": {
     "": {
-      "name": "jrx-example",
+      "name": "jfx-example",
       "dependencies": {
         "@json-render/core": "0.10.0",
         "@json-render/react": "0.10.0",
-        "jrx": "file:..",
+        "jfx": "file:..",
         "react": "19.2.4",
         "react-dom": "19.2.4",
         "shiki": "^4.0.0",
@@ -171,7 +171,7 @@
 
     "@types/mdast": ["@types/mdast@4.0.4", "", { "dependencies": { "@types/unist": "*" } }, "sha512-kGaNbPh1k7AFzgpud/gMdvIm5xuECykRR+JnWKQno9TAXVa6WIVCGTPvYGekIDL4uwCZQSYbUxNBSb1aUo79oA=="],
 
-    "@types/node": ["@types/node@25.3.2", "", { "dependencies": { "undici-types": "~7.18.0" } }, "sha512-RpV6r/ij22zRRdyBPcxDeKAzH43phWVKEjL2iksqo1Vz3CuBUrgmPpPhALKiRfU7OMCmeeO9vECBMsV0hMTG8Q=="],
+    "@types/node": ["@types/node@20.19.35", "", { "dependencies": { "undici-types": "~6.21.0" } }, "sha512-Uarfe6J91b9HAUXxjvSOdiO2UPOKLm07Q1oh0JHxoZ1y8HoqxDAu3gVrsrOHeiio0kSsoVBt4wFrKOm0dKxVPQ=="],
 
     "@types/react": ["@types/react@19.2.14", "", { "dependencies": { "csstype": "^3.2.2" } }, "sha512-ilcTH/UniCkMdtexkoCN0bI7pMcJDvmQFPvuPvmEaYA/NSfFTAgdUSLAoVjaRJm7+6PvcM+q1zYOwS4wTYMF9w=="],
 
@@ -241,9 +241,9 @@
 
     "html-void-elements": ["html-void-elements@3.0.0", "", {}, "sha512-bEqo66MRXsUGxWHV5IP0PUiAWwoEjba4VCzg0LjFJBpchPaTfyfCKTG6bc5F8ucKec3q5y6qOdGyYTSBEvhCrg=="],
 
-    "joycon": ["joycon@3.1.1", "", {}, "sha512-34wB/Y7MW7bzjKRjUKTa46I2Z7eV62Rkhva+KkopW7Qvv/OSWBqvkSY7vusOPrNuZcUG3tApvdVgNB8POj3SPw=="],
+    "jfx": ["jfx@file:..", { "devDependencies": { "@json-render/core": "0.10.0", "@json-render/react": "0.10.0", "@testing-library/react": "16.3.2", "@types/bun": "^1.3.9", "@types/react": "19.2.3", "happy-dom": "18.0.1", "react": "19.2.4", "react-dom": "19.2.4", "tsup": "8.5.1", "typescript": "5.9.3" }, "peerDependencies": { "@json-render/core": ">=0.10.0" } }],
 
-    "jrx": ["jrx@file:..", { "devDependencies": { "@json-render/core": "0.10.0", "@json-render/react": "0.10.0", "@testing-library/react": "16.3.2", "@types/bun": "^1.3.9", "@types/react": "19.2.3", "happy-dom": "18.0.1", "react": "19.2.4", "react-dom": "19.2.4", "tsup": "8.5.1", "typescript": "5.9.3" }, "peerDependencies": { "@json-render/core": ">=0.10.0" } }],
+    "joycon": ["joycon@3.1.1", "", {}, "sha512-34wB/Y7MW7bzjKRjUKTa46I2Z7eV62Rkhva+KkopW7Qvv/OSWBqvkSY7vusOPrNuZcUG3tApvdVgNB8POj3SPw=="],
 
     "js-tokens": ["js-tokens@4.0.0", "", {}, "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ=="],
 
@@ -347,7 +347,7 @@
 
     "ufo": ["ufo@1.6.3", "", {}, "sha512-yDJTmhydvl5lJzBmy/hyOAA0d+aqCBuwl818haVdYCRrWV84o7YyeVm4QlVHStqNrrJSTb6jKuFAVqAFsr+K3Q=="],
 
-    "undici-types": ["undici-types@7.18.2", "", {}, "sha512-AsuCzffGHJybSaRrmr5eHr81mwJU3kjw6M+uprWvCXiNeN9SOGwQ3Jn8jb8m3Z6izVgknn1R0FTCEAP2QrLY/w=="],
+    "undici-types": ["undici-types@6.21.0", "", {}, "sha512-iwDZqg0QAGrg9Rav5H4n0M64c3mkR59cJ6wQp+7C4nI0gsmExaedaYLNO44eT4AtBBwjbTiGPMlt2Md0T9H9JQ=="],
 
     "unist-util-is": ["unist-util-is@6.0.1", "", { "dependencies": { "@types/unist": "^3.0.0" } }, "sha512-LsiILbtBETkDz8I9p1dQ0uyRUWuaQzd/cuEeS1hoRSyW5E5XGmTzlwY1OrNzzakGowI9Dr/I8HVaw4hTtnxy8g=="],
 
@@ -369,10 +369,6 @@
 
     "zwitch": ["zwitch@2.0.4", "", {}, "sha512-bXE4cR/kVZhKZX/RjPEflHaKVhUVl85noU3v6b8apfQEc1x4A+zBxjZ4lN8LqGd6WZ3dl98pY4o717VFmoPp+A=="],
 
-    "happy-dom/@types/node": ["@types/node@20.19.35", "", { "dependencies": { "undici-types": "~6.21.0" } }, "sha512-Uarfe6J91b9HAUXxjvSOdiO2UPOKLm07Q1oh0JHxoZ1y8HoqxDAu3gVrsrOHeiio0kSsoVBt4wFrKOm0dKxVPQ=="],
-
-    "jrx/@types/react": ["@types/react@19.2.3", "", { "dependencies": { "csstype": "^3.0.2" } }, "sha512-k5dJVszUiNr1DSe8Cs+knKR6IrqhqdhpUwzqhkS8ecQTSf3THNtbfIp/umqHMpX2bv+9dkx3fwDv/86LcSfvSg=="],
-
-    "happy-dom/@types/node/undici-types": ["undici-types@6.21.0", "", {}, "sha512-iwDZqg0QAGrg9Rav5H4n0M64c3mkR59cJ6wQp+7C4nI0gsmExaedaYLNO44eT4AtBBwjbTiGPMlt2Md0T9H9JQ=="],
+    "jfx/@types/react": ["@types/react@19.2.3", "", { "dependencies": { "csstype": "^3.0.2" } }, "sha512-k5dJVszUiNr1DSe8Cs+knKR6IrqhqdhpUwzqhkS8ecQTSf3THNtbfIp/umqHMpX2bv+9dkx3fwDv/86LcSfvSg=="],
   }
 }
diff --git a/example/components.ts b/example/components.ts
index 480beb8..ef79983 100644
--- a/example/components.ts
+++ b/example/components.ts
@@ -1,23 +1,23 @@
-import { jsx } from "jrx/jsx-runtime";
-import type { JrxNode } from "jrx";
+import { jsx } from "jfx/jsx-runtime";
+import type { JfxNode } from "jfx";
 
 
-export function Stack(props: Record<string, unknown>): JrxNode {
+export function Stack(props: Record<string, unknown>): JfxNode {
   return jsx("Stack", props);
 }
 
-export function Card(props: Record<string, unknown>): JrxNode {
+export function Card(props: Record<string, unknown>): JfxNode {
   return jsx("Card", props);
 }
 
-export function Text(props: Record<string, unknown>): JrxNode {
+export function Text(props: Record<string, unknown>): JfxNode {
   return jsx("Text", props);
 }
 
-export function Button(props: Record<string, unknown>): JrxNode {
+export function Button(props: Record<string, unknown>): JfxNode {
   return jsx("Button", props);
 }
 
-export function Input(props: Record<string, unknown>): JrxNode {
+export function Input(props: Record<string, unknown>): JfxNode {
   return jsx("Input", props);
 }
diff --git a/example/package.json b/example/package.json
index 5e62cdd..43051d1 100644
--- a/example/package.json
+++ b/example/package.json
@@ -1,5 +1,5 @@
 {
-  "name": "jrx-example",
+  "name": "jfx-example",
   "private": true,
   "type": "module",
   "scripts": {
@@ -10,7 +10,7 @@
   "dependencies": {
     "@json-render/core": "0.10.0",
     "@json-render/react": "0.10.0",
-    "jrx": "file:..",
+    "jfx": "file:..",
     "react": "19.2.4",
     "react-dom": "19.2.4",
     "shiki": "^4.0.0"
diff --git a/example/specs/full.tsx b/example/specs/full.tsx
index 190a3bf..fd92b8a 100644
--- a/example/specs/full.tsx
+++ b/example/specs/full.tsx
@@ -1,5 +1,5 @@
-/** @jsxImportSource jrx */
-import { render } from "jrx";
+/** @jsxImportSource jfx */
+import { render } from "jfx";
 import { Stack, Card, Text, Button, Input } from "../components";
 
 export const fullSpec = render(
diff --git a/example/specs/simple.tsx b/example/specs/simple.tsx
index 2c4d013..3c14723 100644
--- a/example/specs/simple.tsx
+++ b/example/specs/simple.tsx
@@ -1,10 +1,10 @@
-/** @jsxImportSource jrx */
-import { render } from "jrx";
+/** @jsxImportSource jfx */
+import { render } from "jfx";
 import { Stack, Text, Button } from "../components";
 
 export const simpleSpec = render(
   <Stack>
-    <Text content="Hello from jrx!" />
+    <Text content="Hello from jfx!" />
     <Button label="Click me" />
   </Stack>
 );
diff --git a/example/src/App.tsx b/example/src/App.tsx
index bfa0f6e..bb8d2eb 100644
--- a/example/src/App.tsx
+++ b/example/src/App.tsx
@@ -75,7 +75,7 @@ export function App() {
   if (!activeSpec) {
     return (
       <div style={{ maxWidth: 600, margin: "60px auto", padding: "0 24px" }}>
-        <h1 style={{ fontSize: "24px", marginBottom: "8px" }}>jrx examples</h1>
+        <h1 style={{ fontSize: "24px", marginBottom: "8px" }}>jfx examples</h1>
         <p style={{ color: "var(--text-secondary)", fontSize: "14px", marginBottom: "24px" }}>
           JSX &rarr; json-render Spec. Pick a spec to see the live UI and JSON
           output.
diff --git a/example/src/index.html b/example/src/index.html
index cd6645e..1a0e358 100644
--- a/example/src/index.html
+++ b/example/src/index.html
@@ -3,7 +3,7 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>jrx example</title>
+    <title>jfx example</title>
     <style>
       :root {
         --bg: #f5f5f5;
diff --git a/example/src/server.ts b/example/src/server.ts
index 5d94ddd..67777ea 100644
--- a/example/src/server.ts
+++ b/example/src/server.ts
@@ -46,4 +46,4 @@ const server = serve({
   },
 });
 
-console.log(`jrx example server running at ${server.url}`);
+console.log(`jfx example server running at ${server.url}`);
diff --git a/package.json b/package.json
index 23bf3d8..8f08886 100644
--- a/package.json
+++ b/package.json
@@ -1,5 +1,5 @@
 {
-  "name": "jrx",
+  "name": "jfx",
   "version": "0.1.0",
   "license": "MIT",
   "description": "JSX factory for json-render. Write JSX, get Spec JSON.",
diff --git a/src/index.ts b/src/index.ts
index de3d532..da5e872 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -1,3 +1,3 @@
 export { render } from "./render";
-export { isJrxNode, JRX_NODE, FRAGMENT } from "./types";
-export type { JrxNode, JrxComponent, RenderOptions } from "./types";
+export { isJfxNode, JFX_NODE, FRAGMENT } from "./types";
+export type { JfxNode, JfxComponent, RenderOptions } from "./types";
diff --git a/src/integration.test.tsx b/src/integration.test.tsx
index 78a7e0f..6f0c04a 100644
--- a/src/integration.test.tsx
+++ b/src/integration.test.tsx
@@ -1,11 +1,11 @@
 /** @jsxImportSource react */
 
 /**
- * Integration tests: verify that Specs produced by jrx are consumable
+ * Integration tests: verify that Specs produced by jfx are consumable
  * by @json-render/react's Renderer.
  *
  * This file uses React JSX (via the pragma above) for the React component
- * tree, and jrx's jsx()/jsxs() via the component wrappers for building Specs.
+ * tree, and jfx's jsx()/jsxs() via the component wrappers for building Specs.
  */
 
 import { describe, it, expect, mock } from "bun:test";
@@ -19,7 +19,7 @@ import {
 } from "@json-render/react";
 import { useStateStore } from "@json-render/react";
 import { jsx, jsxs } from "./jsx-runtime";
-import { render as jrxRender } from "./render";
+import { render as jfxRender } from "./render";
 import {
   Stack as JStack,
   Card as JCard,
@@ -64,7 +64,7 @@ function StateProbe() {
 const registry = { Button, Text, Stack, Card };
 
 // ---------------------------------------------------------------------------
-// Helper: render a jrx spec with @json-render/react
+// Helper: render a jfx spec with @json-render/react
 // ---------------------------------------------------------------------------
 
 function renderSpec(spec: Spec, handlers?: Record<string, (...args: unknown[]) => void>) {
@@ -80,15 +80,15 @@ function renderSpec(spec: Spec, handlers?: Record<string, (...args: unknown[]) =
 // Basic rendering
 // =============================================================================
 
-describe("jrx → @json-render/react round-trip", () => {
+describe("jfx → @json-render/react round-trip", () => {
   it("renders a single element", () => {
-    const spec = jrxRender(jsx(JText, { content: "Hello from jrx" }));
+    const spec = jfxRender(jsx(JText, { content: "Hello from jfx" }));
     renderSpec(spec);
-    expect(screen.getByTestId("text").textContent).toBe("Hello from jrx");
+    expect(screen.getByTestId("text").textContent).toBe("Hello from jfx");
   });
 
   it("renders nested elements with children", () => {
-    const spec = jrxRender(
+    const spec = jfxRender(
       jsxs(JCard, {
         title: "My Card",
         children: [jsx(JText, { content: "Inside card" })],
@@ -101,7 +101,7 @@ describe("jrx → @json-render/react round-trip", () => {
   });
 
   it("renders a tree with multiple children", () => {
-    const spec = jrxRender(
+    const spec = jfxRender(
       jsxs(JStack, {
         children: [
           jsx(JText, { content: "First" }),
@@ -116,7 +116,7 @@ describe("jrx → @json-render/react round-trip", () => {
   });
 
   it("renders a deep tree", () => {
-    const spec = jrxRender(
+    const spec = jfxRender(
       jsxs(JStack, {
         children: [
           jsxs(JCard, {
@@ -136,9 +136,9 @@ describe("jrx → @json-render/react round-trip", () => {
 // State + actions (adapted from chained-actions.test.tsx)
 // =============================================================================
 
-describe("jrx specs with state and actions", () => {
+describe("jfx specs with state and actions", () => {
   it("renders with initial state", () => {
-    const spec = jrxRender(jsx(JText, { content: "Stateful" }), {
+    const spec = jfxRender(jsx(JText, { content: "Stateful" }), {
       state: { count: 42 },
     });
     renderSpec(spec);
@@ -148,7 +148,7 @@ describe("jrx specs with state and actions", () => {
   });
 
   it("setState action updates state on button press", async () => {
-    const spec = jrxRender(
+    const spec = jfxRender(
       jsx(JButton, {
         label: "Set",
         on: {
@@ -172,7 +172,7 @@ describe("jrx specs with state and actions", () => {
   });
 
   it("chained pushState + setState resolves correctly", async () => {
-    const spec = jrxRender(
+    const spec = jfxRender(
       jsx(JButton, {
         label: "Chain",
         on: {
@@ -206,7 +206,7 @@ describe("jrx specs with state and actions", () => {
   });
 
   it("multiple pushState chain resolves correctly", async () => {
-    const spec = jrxRender(
+    const spec = jfxRender(
       jsx(JButton, {
         label: "Go",
         on: {
@@ -242,9 +242,9 @@ describe("jrx specs with state and actions", () => {
 // Spec structural validity
 // =============================================================================
 
-describe("jrx spec structural validity", () => {
+describe("jfx spec structural validity", () => {
   it("all child references resolve to existing elements", () => {
-    const spec = jrxRender(
+    const spec = jfxRender(
       jsxs(JStack, {
         children: [
           jsxs(JCard, {
@@ -272,12 +272,12 @@ describe("jrx spec structural validity", () => {
   });
 
   it("root element exists in elements map", () => {
-    const spec = jrxRender(jsx(JCard, { title: "Root" }));
+    const spec = jfxRender(jsx(JCard, { title: "Root" }));
     expect(spec.elements[spec.root]).toBeDefined();
   });
 
   it("element count matches node count", () => {
-    const spec = jrxRender(
+    const spec = jfxRender(
       jsxs(JStack, {
         children: [
           jsx(JCard, { title: "A" }),
@@ -294,9 +294,9 @@ describe("jrx spec structural validity", () => {
 // Dynamic features (ported from json-render's dynamic-forms.test.tsx)
 // =============================================================================
 
-describe("jrx specs with dynamic features", () => {
+describe("jfx specs with dynamic features", () => {
   it("$state prop expressions resolve at render time", () => {
-    const spec = jrxRender(
+    const spec = jfxRender(
       jsx(JText, { content: { $state: "/message" } }),
       { state: { message: "Dynamic hello" } },
     );
@@ -306,7 +306,7 @@ describe("jrx specs with dynamic features", () => {
   });
 
   it("visibility condition hides element when false", () => {
-    const spec = jrxRender(
+    const spec = jfxRender(
       jsxs(JStack, {
         children: [
           jsx(JText, {
@@ -324,7 +324,7 @@ describe("jrx specs with dynamic features", () => {
 
   it("visibility condition shows element when true", () => {
     cleanup();
-    const spec = jrxRender(
+    const spec = jfxRender(
       jsxs(JStack, {
         children: [
           jsx(JText, {
@@ -343,7 +343,7 @@ describe("jrx specs with dynamic features", () => {
   it("watchers fire when watched state changes", async () => {
     const loadCities = mock();
 
-    const spec = jrxRender(
+    const spec = jfxRender(
       jsxs(JStack, {
         children: [
           jsx(JButton, {
diff --git a/src/jsx-runtime.ts b/src/jsx-runtime.ts
index c4a59ea..dea63a5 100644
--- a/src/jsx-runtime.ts
+++ b/src/jsx-runtime.ts
@@ -2,12 +2,12 @@ import type {
   ActionBinding,
   VisibilityCondition,
 } from "@json-render/core";
-import { JRX_NODE, FRAGMENT, type JrxNode } from "./types";
-import type { JrxComponent } from "./types";
+import { JFX_NODE, FRAGMENT, type JfxNode } from "./types";
+import type { JfxComponent } from "./types";
 
 export { FRAGMENT as Fragment };
 
-/** Props reserved by jrx — extracted from JSX props and placed on the UIElement level. */
+/** Props reserved by jfx — extracted from JSX props and placed on the UIElement level. */
 const RESERVED_PROPS = new Set([
   "key",
   "children",
@@ -18,26 +18,26 @@ const RESERVED_PROPS = new Set([
 ]);
 
 /**
- * Normalize a raw `children` value from JSX props into a flat array of JrxNodes.
+ * Normalize a raw `children` value from JSX props into a flat array of JfxNodes.
  * Handles: undefined, single node, nested arrays, and filters out nulls/booleans.
  */
-function normalizeChildren(raw: unknown): JrxNode[] {
+function normalizeChildren(raw: unknown): JfxNode[] {
   if (raw == null || typeof raw === "boolean") return [];
 
   if (Array.isArray(raw)) {
-    const result: JrxNode[] = [];
+    const result: JfxNode[] = [];
     for (const child of raw) {
       if (child == null || typeof child === "boolean") continue;
       if (Array.isArray(child)) {
         result.push(...normalizeChildren(child));
       } else {
-        result.push(child as JrxNode);
+        result.push(child as JfxNode);
       }
     }
     return result;
   }
 
-  return [raw as JrxNode];
+  return [raw as JfxNode];
 }
 
 /**
@@ -56,20 +56,20 @@ function extractProps(
 }
 
 /** Accepted tag types: string literal, Fragment symbol, or a function component. */
-type JsxType = string | typeof FRAGMENT | JrxComponent;
+type JsxType = string | typeof FRAGMENT | JfxComponent;
 
 /**
  * Core factory — shared by `jsx` and `jsxs`.
  *
  * If `type` is a function, it is called with props (like React calls
- * function components). The function returns a JrxNode directly.
+ * function components). The function returns a JfxNode directly.
  *
- * If `type` is a string or Fragment, a JrxNode is constructed inline.
+ * If `type` is a string or Fragment, a JfxNode is constructed inline.
  */
 function createNode(
   type: JsxType,
   rawProps: Record<string, unknown> | null,
-): JrxNode {
+): JfxNode {
   const p = rawProps ?? {};
 
   // Function component — call it, just like React does.
@@ -78,7 +78,7 @@ function createNode(
   }
 
   return {
-    $$typeof: JRX_NODE,
+    $$typeof: JFX_NODE,
     type,
     props: extractProps(p),
     children: normalizeChildren(p.children),
@@ -102,7 +102,7 @@ export function jsx(
   type: JsxType,
   props: Record<string, unknown> | null,
   key?: string,
-): JrxNode {
+): JfxNode {
   const node = createNode(type, props);
   if (key != null) node.key = String(key);
   return node;
@@ -116,7 +116,7 @@ export function jsxs(
   type: JsxType,
   props: Record<string, unknown> | null,
   key?: string,
-): JrxNode {
+): JfxNode {
   const node = createNode(type, props);
   if (key != null) node.key = String(key);
   return node;
@@ -133,7 +133,7 @@ export namespace JSX {
   }
 
   /** The type returned by JSX expressions. */
-  export type Element = JrxNode;
+  export type Element = JfxNode;
 
   export interface ElementChildrenAttribute {
     children: {};
diff --git a/src/jsx.test.tsx b/src/jsx.test.tsx
index 6cf11f1..24ff2f9 100644
--- a/src/jsx.test.tsx
+++ b/src/jsx.test.tsx
@@ -1,6 +1,6 @@
 import { describe, it, expect } from "bun:test";
 import { render } from "./render";
-import { isJrxNode, FRAGMENT } from "./types";
+import { isJfxNode, FRAGMENT } from "./types";
 import { jsx, jsxs, Fragment } from "./jsx-runtime";
 import {
   Stack,
@@ -18,25 +18,25 @@ import {
 // =============================================================================
 
 describe("jsx factory", () => {
-  it("jsx() with string type returns a JrxNode", () => {
+  it("jsx() with string type returns a JfxNode", () => {
     const node = jsx("Card", { title: "Hello" });
-    expect(isJrxNode(node)).toBe(true);
+    expect(isJfxNode(node)).toBe(true);
     expect(node.type).toBe("Card");
     expect(node.props).toEqual({ title: "Hello" });
   });
 
   it("jsx() with component function resolves typeName", () => {
     const node = jsx(Card, { title: "Hello" });
-    expect(isJrxNode(node)).toBe(true);
+    expect(isJfxNode(node)).toBe(true);
     expect(node.type).toBe("Card");
     expect(node.props).toEqual({ title: "Hello" });
   });
 
-  it("jsxs() returns a JrxNode with children", () => {
+  it("jsxs() returns a JfxNode with children", () => {
     const node = jsxs(Stack, {
       children: [jsx(Text, { content: "A" }), jsx(Text, { content: "B" })],
     });
-    expect(isJrxNode(node)).toBe(true);
+    expect(isJfxNode(node)).toBe(true);
     expect(node.children).toHaveLength(2);
   });
 
@@ -73,7 +73,7 @@ describe("jsx factory", () => {
 
   it("jsx() handles null props", () => {
     const node = jsx("Divider", null);
-    expect(isJrxNode(node)).toBe(true);
+    expect(isJfxNode(node)).toBe(true);
     expect(node.props).toEqual({});
     expect(node.children).toEqual([]);
   });
diff --git a/src/render.test.tsx b/src/render.test.tsx
index 619588b..5d5a51b 100644
--- a/src/render.test.tsx
+++ b/src/render.test.tsx
@@ -1,6 +1,6 @@
 import { describe, it, expect } from "bun:test";
 import { render } from "./render";
-import { FRAGMENT, type JrxNode } from "./types";
+import { FRAGMENT, type JfxNode } from "./types";
 import { jsx } from "./jsx-runtime";
 import {
   Stack,
@@ -300,7 +300,7 @@ describe("state passthrough", () => {
 // =============================================================================
 
 describe("error handling", () => {
-  it("throws for non-JrxNode input", () => {
-    expect(() => render({} as JrxNode)).toThrow(/expects a JrxNode/);
+  it("throws for non-JfxNode input", () => {
+    expect(() => render({} as JfxNode)).toThrow(/expects a JfxNode/);
   });
 });
diff --git a/src/render.ts b/src/render.ts
index b372f96..d8b2bef 100644
--- a/src/render.ts
+++ b/src/render.ts
@@ -1,12 +1,12 @@
 import type { Spec, UIElement } from "@json-render/core";
-import { FRAGMENT, type JrxNode, type RenderOptions, isJrxNode } from "./types";
+import { FRAGMENT, type JfxNode, type RenderOptions, isJfxNode } from "./types";
 
 /**
- * Flatten a JrxNode tree into a json-render `Spec`.
+ * Flatten a JfxNode tree into a json-render `Spec`.
  *
  * Analogous to `ReactDOM.render` but produces JSON instead of DOM mutations.
  *
- * @param node  - Root JrxNode (produced by JSX)
+ * @param node  - Root JfxNode (produced by JSX)
  * @param options - Optional render configuration (e.g. initial state)
  * @returns A json-render `Spec` ready for any renderer
  *
@@ -20,9 +20,9 @@ import { FRAGMENT, type JrxNode, type RenderOptions, isJrxNode } from "./types";
  * );
  * ```
  */
-export function render(node: JrxNode, options?: RenderOptions): Spec {
-  if (!isJrxNode(node)) {
-    throw new Error("render() expects a JrxNode produced by JSX.");
+export function render(node: JfxNode, options?: RenderOptions): Spec {
+  if (!isJfxNode(node)) {
+    throw new Error("render() expects a JfxNode produced by JSX.");
   }
 
   if (node.type === FRAGMENT) {
@@ -66,12 +66,12 @@ function generateKey(
 
 /**
  * Resolve the children of a node, expanding fragments inline.
- * Returns an array of concrete (non-fragment) JrxNodes.
+ * Returns an array of concrete (non-fragment) JfxNodes.
  */
-function expandChildren(children: JrxNode[]): JrxNode[] {
-  const result: JrxNode[] = [];
+function expandChildren(children: JfxNode[]): JfxNode[] {
+  const result: JfxNode[] = [];
   for (const child of children) {
-    if (!isJrxNode(child)) continue;
+    if (!isJfxNode(child)) continue;
     if (child.type === FRAGMENT) {
       // Recursively expand nested fragments
       result.push(...expandChildren(child.children));
@@ -83,11 +83,11 @@ function expandChildren(children: JrxNode[]): JrxNode[] {
 }
 
 /**
- * Recursively flatten a JrxNode into the elements map.
+ * Recursively flatten a JfxNode into the elements map.
  * Returns the key assigned to this node.
  */
 function flattenNode(
-  node: JrxNode,
+  node: JfxNode,
   elements: Record<string, UIElement>,
   counters: Map<string, number>,
   usedKeys: Set<string>,
diff --git a/src/spec-validator.test.tsx b/src/spec-validator.test.tsx
index c6b18c4..348e46f 100644
--- a/src/spec-validator.test.tsx
+++ b/src/spec-validator.test.tsx
@@ -1,7 +1,7 @@
 /**
  * Ported from json-render's core/src/spec-validator.test.ts.
  *
- * Runs @json-render/core's validateSpec against Specs produced by jrx
+ * Runs @json-render/core's validateSpec against Specs produced by jfx
  * to prove structural correctness.
  */
 
@@ -19,7 +19,7 @@ import {
   Select,
 } from "./test-components";
 
-describe("validateSpec on jrx-produced specs", () => {
+describe("validateSpec on jfx-produced specs", () => {
   it("validates a simple single-element spec", () => {
     const spec = render(<Text text="hello" />);
     const result = validateSpec(spec);
@@ -90,7 +90,7 @@ describe("validateSpec on jrx-produced specs", () => {
     expect(result.issues.some((i) => i.code === "watch_in_props")).toBe(false);
   });
 
-  it("no orphaned elements in jrx output", () => {
+  it("no orphaned elements in jfx output", () => {
     const spec = render(
       <Stack>
         <Text text="A" />
@@ -101,7 +101,7 @@ describe("validateSpec on jrx-produced specs", () => {
     expect(result.issues.some((i) => i.code === "orphaned_element")).toBe(false);
   });
 
-  it("no missing children in jrx output", () => {
+  it("no missing children in jfx output", () => {
     const spec = render(
       <Stack>
         <Card title="X">
diff --git a/src/test-components.ts b/src/test-components.ts
index 8d66f7a..d8ce9d3 100644
--- a/src/test-components.ts
+++ b/src/test-components.ts
@@ -1,42 +1,42 @@
 import { jsx } from "./jsx-runtime";
-import type { JrxNode } from "./types";
+import type { JfxNode } from "./types";
 
-export function Stack(props: Record<string, unknown>): JrxNode {
+export function Stack(props: Record<string, unknown>): JfxNode {
   return jsx("Stack", props);
 }
 
-export function Card(props: Record<string, unknown>): JrxNode {
+export function Card(props: Record<string, unknown>): JfxNode {
   return jsx("Card", props);
 }
 
-export function Text(props: Record<string, unknown>): JrxNode {
+export function Text(props: Record<string, unknown>): JfxNode {
   return jsx("Text", props);
 }
 
-export function Button(props: Record<string, unknown>): JrxNode {
+export function Button(props: Record<string, unknown>): JfxNode {
   return jsx("Button", props);
 }
 
-export function Badge(props: Record<string, unknown>): JrxNode {
+export function Badge(props: Record<string, unknown>): JfxNode {
   return jsx("Badge", props);
 }
 
-export function List(props: Record<string, unknown>): JrxNode {
+export function List(props: Record<string, unknown>): JfxNode {
   return jsx("List", props);
 }
 
-export function ListItem(props: Record<string, unknown>): JrxNode {
+export function ListItem(props: Record<string, unknown>): JfxNode {
   return jsx("ListItem", props);
 }
 
-export function Select(props: Record<string, unknown>): JrxNode {
+export function Select(props: Record<string, unknown>): JfxNode {
   return jsx("Select", props);
 }
 
-export function Input(props: Record<string, unknown>): JrxNode {
+export function Input(props: Record<string, unknown>): JfxNode {
   return jsx("Input", props);
 }
 
-export function Divider(props: Record<string, unknown>): JrxNode {
+export function Divider(props: Record<string, unknown>): JfxNode {
   return jsx("Divider", props);
 }
diff --git a/src/types.ts b/src/types.ts
index 75b893c..966dcf9 100644
--- a/src/types.ts
+++ b/src/types.ts
@@ -4,19 +4,19 @@ import type {
 } from "@json-render/core";
 
 // ---------------------------------------------------------------------------
-// JrxNode — intermediate representation produced by the JSX factory
+// JfxNode — intermediate representation produced by the JSX factory
 // ---------------------------------------------------------------------------
 
 /**
- * Sentinel symbol identifying a JrxNode (prevents plain objects from
+ * Sentinel symbol identifying a JfxNode (prevents plain objects from
  * being mistaken for nodes).
  */
-export const JRX_NODE = Symbol.for("jrx.node");
+export const JFX_NODE = Symbol.for("jfx.node");
 
 /**
  * Sentinel symbol for Fragment grouping.
  */
-export const FRAGMENT = Symbol.for("jrx.fragment");
+export const FRAGMENT = Symbol.for("jfx.fragment");
 
 /**
  * A node in the intermediate JSX tree.
@@ -24,9 +24,9 @@ export const FRAGMENT = Symbol.for("jrx.fragment");
  * Created by the `jsx` / `jsxs` factory functions and consumed by `render()`
  * which flattens the tree into a json-render `Spec`.
  */
-export interface JrxNode {
-  /** Brand symbol — always `JRX_NODE` */
-  $$typeof: typeof JRX_NODE;
+export interface JfxNode {
+  /** Brand symbol — always `JFX_NODE` */
+  $$typeof: typeof JFX_NODE;
 
   /**
    * Component type name (e.g. `"Card"`, `"Button"`).
@@ -38,7 +38,7 @@ export interface JrxNode {
   props: Record<string, unknown>;
 
   /** Child nodes */
-  children: JrxNode[];
+  children: JfxNode[];
 
   // -- Reserved / meta fields (extracted from JSX props) --
 
@@ -59,20 +59,20 @@ export interface JrxNode {
 }
 
 // ---------------------------------------------------------------------------
-// JrxComponent — a function usable as a JSX tag that maps to a type string
+// JfxComponent — a function usable as a JSX tag that maps to a type string
 // ---------------------------------------------------------------------------
 
 /**
- * A jrx component function. Works like a React function component:
+ * A jfx component function. Works like a React function component:
  * when used as a JSX tag (`<Card />`), the factory calls the function
- * with props and gets back a JrxNode.
+ * with props and gets back a JfxNode.
  */
-export type JrxComponent = (props: Record<string, unknown>) => JrxNode;
+export type JfxComponent = (props: Record<string, unknown>) => JfxNode;
 
 /**
- * Define a jrx component for use as a JSX tag.
+ * Define a jfx component for use as a JSX tag.
  *
- * Creates a function that, when called with props, produces a JrxNode
+ * Creates a function that, when called with props, produces a JfxNode
  * with the given type name — just like a React component returns
  * React elements.
  *
@@ -82,12 +82,12 @@ export type JrxComponent = (props: Record<string, unknown>) => JrxNode;
  * const spec = render(<Card title="Hello"><Text content="World" /></Card>);
  * ```
  */
-export function component(typeName: string): JrxComponent {
+export function component(typeName: string): JfxComponent {
   // Import createNodeFromString lazily to avoid circular dep
   // (jsx-runtime imports types). Instead, we build the node inline.
   return (props: Record<string, unknown>) => {
     return {
-      $$typeof: JRX_NODE,
+      $$typeof: JFX_NODE,
       type: typeName,
       props: filterReserved(props),
       children: normalizeChildrenRaw(props.children),
@@ -110,21 +110,21 @@ function filterReserved(props: Record<string, unknown>): Record<string, unknown>
   return out;
 }
 
-function normalizeChildrenRaw(raw: unknown): JrxNode[] {
+function normalizeChildrenRaw(raw: unknown): JfxNode[] {
   if (raw == null || typeof raw === "boolean") return [];
   if (Array.isArray(raw)) {
-    const result: JrxNode[] = [];
+    const result: JfxNode[] = [];
     for (const child of raw) {
       if (child == null || typeof child === "boolean") continue;
       if (Array.isArray(child)) {
         result.push(...normalizeChildrenRaw(child));
       } else {
-        result.push(child as JrxNode);
+        result.push(child as JfxNode);
       }
     }
     return result;
   }
-  return [raw as JrxNode];
+  return [raw as JfxNode];
 }
 
 // ---------------------------------------------------------------------------
@@ -140,10 +140,10 @@ export interface RenderOptions {
 // Type guard
 // ---------------------------------------------------------------------------
 
-export function isJrxNode(value: unknown): value is JrxNode {
+export function isJfxNode(value: unknown): value is JfxNode {
   return (
     typeof value === "object" &&
     value !== null &&
-    (value as JrxNode).$$typeof === JRX_NODE
+    (value as JfxNode).$$typeof === JFX_NODE
   );
 }
diff --git a/tsconfig.json b/tsconfig.json
index 5693de1..6a0dead 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -14,11 +14,11 @@
     "outDir": "dist",
     "rootDir": "src",
     "jsx": "react-jsx",
-    "jsxImportSource": "jrx",
+    "jsxImportSource": "jfx",
     "baseUrl": ".",
     "paths": {
-      "jrx/jsx-runtime": ["./src/jsx-runtime"],
-      "jrx/jsx-dev-runtime": ["./src/jsx-dev-runtime"]
+      "jfx/jsx-runtime": ["./src/jsx-runtime"],
+      "jfx/jsx-dev-runtime": ["./src/jsx-dev-runtime"]
     }
   },
   "include": ["src"]