basefn 1.10.0 → 1.11.0

package/src/Demo.res.mjs

@@ -1,9 +1,11 @@
 // Generated by ReScript, PLEASE EDIT WITH CARE
 
-import * as Xote from "xote/src/Xote.res.mjs";
 import * as Basefn from "./Basefn.res.mjs";
-import * as Xote__JSX from "xote/src/Xote__JSX.res.mjs";
+import * as Node$Xote from "xote/src/Node.res.mjs";
+import * as Signal$Xote from "xote/src/Signal.res.mjs";
 import * as Stdlib_Bool from "@rescript/runtime/lib/es6/Stdlib_Bool.js";
+import * as XoteJSX$Xote from "xote/src/XoteJSX.res.mjs";
+import * as Computed$Xote from "xote/src/Computed.res.mjs";
 import * as Primitive_option from "@rescript/runtime/lib/es6/Primitive_option.js";
 
 import './styles/variables.css'
@@ -13,73 +15,73 @@ import './eita.css'
 ;
 
 function Demo$Demo(props) {
-  let name = Xote.Signal.make("", undefined, undefined);
-  let email = Xote.Signal.make("", undefined, undefined);
-  let password = Xote.Signal.make("", undefined, undefined);
-  let message = Xote.Signal.make("", undefined, undefined);
-  let agreeToTerms = Xote.Signal.make(false, undefined, undefined);
-  let newsletter = Xote.Signal.make(false, undefined, undefined);
-  let selectedOption = Xote.Signal.make("option1", undefined, undefined);
-  let selectedColor = Xote.Signal.make("blue", undefined, undefined);
-  let isSubmitting = Xote.Signal.make(false, undefined, undefined);
-  let downloadProgress = Xote.Signal.make(65.0, undefined, undefined);
-  let isModalOpen = Xote.Signal.make(false, undefined, undefined);
-  let sliderValue = Xote.Signal.make(50.0, undefined, undefined);
-  let switchEnabled = Xote.Signal.make(false, undefined, undefined);
-  let darkModeSwitch = Xote.Signal.make(true, undefined, undefined);
-  let notificationsSwitch = Xote.Signal.make(false, undefined, undefined);
-  let toastVisible = Xote.Signal.make(false, undefined, undefined);
-  let currentStep = Xote.Signal.make(1, undefined, undefined);
-  let isDrawerOpen = Xote.Signal.make(false, undefined, undefined);
-  let activeNavItem = Xote.Signal.make("home", undefined, undefined);
-  let sidebarCollapsed = Xote.Signal.make(false, undefined, undefined);
+  let name = Signal$Xote.make("", undefined, undefined);
+  let email = Signal$Xote.make("", undefined, undefined);
+  let password = Signal$Xote.make("", undefined, undefined);
+  let message = Signal$Xote.make("", undefined, undefined);
+  let agreeToTerms = Signal$Xote.make(false, undefined, undefined);
+  let newsletter = Signal$Xote.make(false, undefined, undefined);
+  let selectedOption = Signal$Xote.make("option1", undefined, undefined);
+  let selectedColor = Signal$Xote.make("blue", undefined, undefined);
+  let isSubmitting = Signal$Xote.make(false, undefined, undefined);
+  let downloadProgress = Signal$Xote.make(65.0, undefined, undefined);
+  let isModalOpen = Signal$Xote.make(false, undefined, undefined);
+  let sliderValue = Signal$Xote.make(50.0, undefined, undefined);
+  let switchEnabled = Signal$Xote.make(false, undefined, undefined);
+  let darkModeSwitch = Signal$Xote.make(true, undefined, undefined);
+  let notificationsSwitch = Signal$Xote.make(false, undefined, undefined);
+  let toastVisible = Signal$Xote.make(false, undefined, undefined);
+  let currentStep = Signal$Xote.make(1, undefined, undefined);
+  let isDrawerOpen = Signal$Xote.make(false, undefined, undefined);
+  let activeNavItem = Signal$Xote.make("home", undefined, undefined);
+  let sidebarCollapsed = Signal$Xote.make(false, undefined, undefined);
   let handleNameChange = evt => {
     let target = evt.target;
-    Xote.Signal.set(name, target.value);
+    Signal$Xote.set(name, target.value);
   };
   let handleEmailChange = evt => {
     let target = evt.target;
-    Xote.Signal.set(email, target.value);
+    Signal$Xote.set(email, target.value);
   };
   let handlePasswordChange = evt => {
     let target = evt.target;
-    Xote.Signal.set(password, target.value);
+    Signal$Xote.set(password, target.value);
   };
   let handleMessageChange = evt => {
     let target = evt.target;
-    Xote.Signal.set(message, target.value);
+    Signal$Xote.set(message, target.value);
   };
-  let handleTermsChange = _evt => Xote.Signal.update(agreeToTerms, prev => !prev);
-  let handleNewsletterChange = _evt => Xote.Signal.update(newsletter, prev => !prev);
+  let handleTermsChange = _evt => Signal$Xote.update(agreeToTerms, prev => !prev);
+  let handleNewsletterChange = _evt => Signal$Xote.update(newsletter, prev => !prev);
   let handleColorChange = evt => {
     let target = evt.target;
-    Xote.Signal.set(selectedColor, target.value);
+    Signal$Xote.set(selectedColor, target.value);
   };
   let handleSubmit = _evt => {
-    Xote.Signal.set(isSubmitting, true);
+    Signal$Xote.set(isSubmitting, true);
     console.log("=== Form Submission ===");
-    console.log(`Name: ` + Xote.Signal.get(name));
-    console.log(`Email: ` + Xote.Signal.get(email));
-    console.log(`Password: ` + Xote.Signal.get(password));
-    console.log(`Message: ` + Xote.Signal.get(message));
-    console.log(`Selected Option: ` + Xote.Signal.get(selectedOption));
-    console.log(`Selected Color: ` + Xote.Signal.get(selectedColor));
-    console.log(`Agree to Terms: ` + Stdlib_Bool.toString(Xote.Signal.get(agreeToTerms)));
-    console.log(`Newsletter: ` + Stdlib_Bool.toString(Xote.Signal.get(newsletter)));
+    console.log(`Name: ` + Signal$Xote.get(name));
+    console.log(`Email: ` + Signal$Xote.get(email));
+    console.log(`Password: ` + Signal$Xote.get(password));
+    console.log(`Message: ` + Signal$Xote.get(message));
+    console.log(`Selected Option: ` + Signal$Xote.get(selectedOption));
+    console.log(`Selected Color: ` + Signal$Xote.get(selectedColor));
+    console.log(`Agree to Terms: ` + Stdlib_Bool.toString(Signal$Xote.get(agreeToTerms)));
+    console.log(`Newsletter: ` + Stdlib_Bool.toString(Signal$Xote.get(newsletter)));
     setTimeout(() => {
-      Xote.Signal.set(isSubmitting, false);
+      Signal$Xote.set(isSubmitting, false);
       console.log("Form submitted successfully!");
     }, 2000);
   };
   let handleReset = _evt => {
-    Xote.Signal.set(name, "");
-    Xote.Signal.set(email, "");
-    Xote.Signal.set(password, "");
-    Xote.Signal.set(message, "");
-    Xote.Signal.set(agreeToTerms, false);
-    Xote.Signal.set(newsletter, false);
-    Xote.Signal.set(selectedOption, "option1");
-    Xote.Signal.set(selectedColor, "blue");
+    Signal$Xote.set(name, "");
+    Signal$Xote.set(email, "");
+    Signal$Xote.set(password, "");
+    Signal$Xote.set(message, "");
+    Signal$Xote.set(agreeToTerms, false);
+    Signal$Xote.set(newsletter, false);
+    Signal$Xote.set(selectedOption, "option1");
+    Signal$Xote.set(selectedColor, "blue");
     console.log("Form reset");
   };
   let selectOptions = [
@@ -100,27 +102,27 @@ function Demo$Demo(props) {
       label: "Other"
     }
   ];
-  let selectOptionsSignal = Xote.Signal.make(selectOptions, undefined, undefined);
-  return Xote__JSX.jsxs(Xote__JSX.jsxFragment, {
-    children: Xote__JSX.array([
-      Xote.Component.textSignal(() => Xote.Signal.get(selectedOption)),
-      Xote__JSX.Elements.jsx("h1", {
-        children: Xote.Component.text("basefn-UI Component Library")
+  let selectOptionsSignal = Signal$Xote.make(selectOptions, undefined, undefined);
+  return XoteJSX$Xote.jsxs(XoteJSX$Xote.jsxFragment, {
+    children: XoteJSX$Xote.array([
+      Node$Xote.signalText(() => Signal$Xote.get(selectedOption)),
+      XoteJSX$Xote.Elements.jsx("h1", {
+        children: Node$Xote.text("basefn-UI Component Library")
       }),
-      Xote__JSX.Elements.jsx("p", {
+      XoteJSX$Xote.Elements.jsx("p", {
         style: "color: #6b7280; margin-bottom: 2rem;",
-        children: Xote.Component.text("A demonstration of all form components with both static and reactive values.")
+        children: Node$Xote.text("A demonstration of all form components with both static and reactive values.")
       }),
-      Xote__JSX.jsxs(Basefn.Card.make, {
-        children: Xote__JSX.array([
-          Xote__JSX.jsxs(Basefn.Grid.make, {
-            children: Xote__JSX.array([
-              Xote__JSX.jsx(Basefn.Avatar.make, {
+      XoteJSX$Xote.jsxs(Basefn.Card.make, {
+        children: XoteJSX$Xote.array([
+          XoteJSX$Xote.jsxs(Basefn.Grid.make, {
+            children: XoteJSX$Xote.array([
+              XoteJSX$Xote.jsx(Basefn.Avatar.make, {
                 src: "https://upload.wikimedia.org/wikipedia/commons/a/ad/Schopfkarakara.jpg"
               }),
-              Xote__JSX.Elements.jsxs("div", {
-                children: Xote__JSX.array([
-                  Xote__JSX.jsx(Basefn.Typography.make, {
+              XoteJSX$Xote.Elements.jsxs("div", {
+                children: XoteJSX$Xote.array([
+                  XoteJSX$Xote.jsx(Basefn.Typography.make, {
                     text: {
                       TAG: "Static",
                       _0: "Crested Caracara"
@@ -128,7 +130,7 @@ function Demo$Demo(props) {
                     variant: "Unstyled",
                     class: "bold"
                   }),
-                  Xote__JSX.jsx(Basefn.Typography.make, {
+                  XoteJSX$Xote.jsx(Basefn.Typography.make, {
                     text: {
                       TAG: "Static",
                       _0: "Bird of prey"
@@ -139,14 +141,14 @@ function Demo$Demo(props) {
               })
             ])
           }),
-          Xote__JSX.Elements.jsx("br", {}),
-          Xote__JSX.jsxs(Basefn.Grid.make, {
-            children: Xote__JSX.array([
-              Xote__JSX.jsx(Basefn.Avatar.make, {
+          XoteJSX$Xote.Elements.jsx("br", {}),
+          XoteJSX$Xote.jsxs(Basefn.Grid.make, {
+            children: XoteJSX$Xote.array([
+              XoteJSX$Xote.jsx(Basefn.Avatar.make, {
                 src: "https://upload.wikimedia.org/wikipedia/commons/a/ad/Schopfkarakara.jpg"
               }),
-              Xote__JSX.Elements.jsx("div", {
-                children: Xote__JSX.jsx(Basefn.Typography.make, {
+              XoteJSX$Xote.Elements.jsx("div", {
+                children: XoteJSX$Xote.jsx(Basefn.Typography.make, {
                   text: {
                     TAG: "Static",
                     _0: "Crested Caracara"
@@ -157,15 +159,15 @@ function Demo$Demo(props) {
               })
             ])
           }),
-          Xote__JSX.Elements.jsx("br", {}),
-          Xote__JSX.jsxs(Basefn.Grid.make, {
-            children: Xote__JSX.array([
-              Xote__JSX.jsx(Basefn.Avatar.make, {
+          XoteJSX$Xote.Elements.jsx("br", {}),
+          XoteJSX$Xote.jsxs(Basefn.Grid.make, {
+            children: XoteJSX$Xote.array([
+              XoteJSX$Xote.jsx(Basefn.Avatar.make, {
                 src: "https://upload.wikimedia.org/wikipedia/commons/a/ad/Schopfkarakara.jpg",
                 size: "Sm"
               }),
-              Xote__JSX.Elements.jsx("div", {
-                children: Xote__JSX.jsx(Basefn.Typography.make, {
+              XoteJSX$Xote.Elements.jsx("div", {
+                children: XoteJSX$Xote.jsx(Basefn.Typography.make, {
                   text: {
                     TAG: "Static",
                     _0: "Crested Caracara"
@@ -175,24 +177,24 @@ function Demo$Demo(props) {
               })
             ])
           }),
-          Xote__JSX.Elements.jsx("br", {}),
-          Xote__JSX.jsxs(Basefn.Grid.make, {
+          XoteJSX$Xote.Elements.jsx("br", {}),
+          XoteJSX$Xote.jsxs(Basefn.Grid.make, {
             gap: "1rem",
-            children: Xote__JSX.array([
-              Xote__JSX.jsx(Basefn.Avatar.make, {
+            children: XoteJSX$Xote.array([
+              XoteJSX$Xote.jsx(Basefn.Avatar.make, {
                 src: "https://upload.wikimedia.org/wikipedia/commons/a/ad/Schopfkarakara.jpg",
                 size: "Lg"
               }),
-              Xote__JSX.Elements.jsxs("div", {
-                children: Xote__JSX.array([
-                  Xote__JSX.jsx(Basefn.Typography.make, {
+              XoteJSX$Xote.Elements.jsxs("div", {
+                children: XoteJSX$Xote.array([
+                  XoteJSX$Xote.jsx(Basefn.Typography.make, {
                     text: {
                       TAG: "Static",
                       _0: "Crested Caracara"
                     },
                     variant: "H4"
                   }),
-                  Xote__JSX.jsx(Basefn.Typography.make, {
+                  XoteJSX$Xote.jsx(Basefn.Typography.make, {
                     text: {
                       TAG: "Static",
                       _0: "Bird of prey"
@@ -207,13 +209,13 @@ function Demo$Demo(props) {
         ]),
         style: "margin-bottom: 2rem;"
       }),
-      Xote__JSX.jsxs(Basefn.Card.make, {
-        children: Xote__JSX.array([
-          Xote__JSX.jsx(Basefn.Label.make, {
+      XoteJSX$Xote.jsxs(Basefn.Card.make, {
+        children: XoteJSX$Xote.array([
+          XoteJSX$Xote.jsx(Basefn.Label.make, {
             text: "Full Name",
             required: true
           }),
-          Xote__JSX.jsx(Basefn.Input.make, {
+          XoteJSX$Xote.jsx(Basefn.Input.make, {
             value: {
               TAG: "Reactive",
               _0: name
@@ -222,12 +224,12 @@ function Demo$Demo(props) {
             type_: "Text",
             placeholder: "John Doe"
           }),
-          Xote__JSX.Elements.jsx("br", {}),
-          Xote__JSX.jsx(Basefn.Label.make, {
+          XoteJSX$Xote.Elements.jsx("br", {}),
+          XoteJSX$Xote.jsx(Basefn.Label.make, {
             text: "Email Address",
             required: true
           }),
-          Xote__JSX.jsx(Basefn.Input.make, {
+          XoteJSX$Xote.jsx(Basefn.Input.make, {
             value: {
               TAG: "Reactive",
               _0: email
@@ -236,12 +238,12 @@ function Demo$Demo(props) {
             type_: "Email",
             placeholder: "john@example.com"
           }),
-          Xote__JSX.Elements.jsx("br", {}),
-          Xote__JSX.jsx(Basefn.Label.make, {
+          XoteJSX$Xote.Elements.jsx("br", {}),
+          XoteJSX$Xote.jsx(Basefn.Label.make, {
             text: "Password",
             required: true
           }),
-          Xote__JSX.jsx(Basefn.Input.make, {
+          XoteJSX$Xote.jsx(Basefn.Input.make, {
             value: {
               TAG: "Reactive",
               _0: password
@@ -252,45 +254,45 @@ function Demo$Demo(props) {
           })
         ])
       }),
-      Xote__JSX.Elements.jsx("br", {}),
-      Xote__JSX.jsxs(Basefn.Card.make, {
-        children: Xote__JSX.array([
-          Xote__JSX.jsx(Basefn.Label.make, {
+      XoteJSX$Xote.Elements.jsx("br", {}),
+      XoteJSX$Xote.jsxs(Basefn.Card.make, {
+        children: XoteJSX$Xote.array([
+          XoteJSX$Xote.jsx(Basefn.Label.make, {
             text: "Area of Interest",
             required: false
           }),
-          Xote__JSX.jsx(Basefn.Select.make, {
+          XoteJSX$Xote.jsx(Basefn.Select.make, {
             value: selectedOption,
             onChange: e => {
               let target = e.target;
-              Xote.Signal.set(selectedOption, target.value);
+              Signal$Xote.set(selectedOption, target.value);
             },
             options: selectOptionsSignal
           }),
-          Xote__JSX.Elements.jsx("br", {}),
-          Xote__JSX.jsx(Basefn.Label.make, {
+          XoteJSX$Xote.Elements.jsx("br", {}),
+          XoteJSX$Xote.jsx(Basefn.Label.make, {
             text: "Favorite Color",
             required: false
           }),
-          Xote__JSX.Elements.jsxs("div", {
+          XoteJSX$Xote.Elements.jsxs("div", {
             style: "display: flex; gap: 1rem; margin-top: 0.5rem;",
-            children: Xote__JSX.array([
-              Xote__JSX.jsx(Basefn.Radio.make, {
-                checked: Xote.Computed.make(() => Xote.Signal.get(selectedColor) === "blue", undefined),
+            children: XoteJSX$Xote.array([
+              XoteJSX$Xote.jsx(Basefn.Radio.make, {
+                checked: Computed$Xote.make(() => Signal$Xote.get(selectedColor) === "blue", undefined),
                 onChange: handleColorChange,
                 value: "blue",
                 label: "Blue",
                 name: "radio"
               }),
-              Xote__JSX.jsx(Basefn.Radio.make, {
-                checked: Xote.Computed.make(() => Xote.Signal.get(selectedColor) === "green", undefined),
+              XoteJSX$Xote.jsx(Basefn.Radio.make, {
+                checked: Computed$Xote.make(() => Signal$Xote.get(selectedColor) === "green", undefined),
                 onChange: handleColorChange,
                 value: "green",
                 label: "Green",
                 name: "radio"
               }),
-              Xote__JSX.jsx(Basefn.Radio.make, {
-                checked: Xote.Computed.make(() => Xote.Signal.get(selectedColor) === "red", undefined),
+              XoteJSX$Xote.jsx(Basefn.Radio.make, {
+                checked: Computed$Xote.make(() => Signal$Xote.get(selectedColor) === "red", undefined),
                 onChange: handleColorChange,
                 value: "red",
                 label: "Red",
@@ -300,14 +302,14 @@ function Demo$Demo(props) {
           })
         ])
       }),
-      Xote__JSX.Elements.jsx("br", {}),
-      Xote__JSX.jsxs(Basefn.Card.make, {
-        children: Xote__JSX.array([
-          Xote__JSX.jsx(Basefn.Label.make, {
+      XoteJSX$Xote.Elements.jsx("br", {}),
+      XoteJSX$Xote.jsxs(Basefn.Card.make, {
+        children: XoteJSX$Xote.array([
+          XoteJSX$Xote.jsx(Basefn.Label.make, {
             text: "Message",
             required: false
           }),
-          Xote__JSX.jsx(Basefn.Textarea.make, {
+          XoteJSX$Xote.jsx(Basefn.Textarea.make, {
             value: {
               TAG: "Reactive",
               _0: message
@@ -317,36 +319,36 @@ function Demo$Demo(props) {
           })
         ])
       }),
-      Xote__JSX.Elements.jsx("br", {}),
-      Xote__JSX.jsxs(Basefn.Card.make, {
-        children: Xote__JSX.array([
-          Xote__JSX.Elements.jsx("div", {
+      XoteJSX$Xote.Elements.jsx("br", {}),
+      XoteJSX$Xote.jsxs(Basefn.Card.make, {
+        children: XoteJSX$Xote.array([
+          XoteJSX$Xote.Elements.jsx("div", {
             style: "margin-bottom: 1.5rem;",
-            children: Xote__JSX.jsx(Basefn.Checkbox.make, {
+            children: XoteJSX$Xote.jsx(Basefn.Checkbox.make, {
               checked: agreeToTerms,
               onChange: handleTermsChange,
               label: "I agree to the terms and conditions"
             })
           }),
-          Xote__JSX.Elements.jsx("div", {
+          XoteJSX$Xote.Elements.jsx("div", {
             style: "margin-bottom: 2rem;",
-            children: Xote__JSX.jsx(Basefn.Checkbox.make, {
+            children: XoteJSX$Xote.jsx(Basefn.Checkbox.make, {
               checked: newsletter,
               onChange: handleNewsletterChange,
               label: "Subscribe to our newsletter"
             })
           }),
-          Xote__JSX.Elements.jsxs("div", {
+          XoteJSX$Xote.Elements.jsxs("div", {
             style: "display: flex; gap: 1rem; flex-wrap: wrap;",
-            children: Xote__JSX.array([
+            children: XoteJSX$Xote.array([
               {
                 TAG: "SignalFragment",
-                _0: Xote.Computed.make(() => [Xote__JSX.jsx(Basefn.Button.make, {
+                _0: Computed$Xote.make(() => [XoteJSX$Xote.jsx(Basefn.Button.make, {
                     disabled: {
                       TAG: "Reactive",
                       _0: isSubmitting
                     },
-                    label: Xote.Signal.get(isSubmitting) ? ({
+                    label: Signal$Xote.get(isSubmitting) ? ({
                         TAG: "Static",
                         _0: "Submitting..."
                       }) : ({
@@ -357,7 +359,7 @@ function Demo$Demo(props) {
                     variant: "Primary"
                   })], undefined)
               },
-              Xote__JSX.jsx(Basefn.Button.make, {
+              XoteJSX$Xote.jsx(Basefn.Button.make, {
                 disabled: {
                   TAG: "Reactive",
                   _0: isSubmitting
@@ -369,7 +371,7 @@ function Demo$Demo(props) {
                 onClick: handleReset,
                 variant: "Secondary"
               }),
-              Xote__JSX.jsx(Basefn.Button.make, {
+              XoteJSX$Xote.jsx(Basefn.Button.make, {
                 disabled: {
                   TAG: "Reactive",
                   _0: isSubmitting
@@ -384,45 +386,45 @@ function Demo$Demo(props) {
           })
         ])
       }),
-      Xote__JSX.Elements.jsxs("div", {
+      XoteJSX$Xote.Elements.jsxs("div", {
         style: "margin-top: 2rem;",
-        children: Xote__JSX.array([
-          Xote__JSX.jsx(Basefn.Typography.make, {
+        children: XoteJSX$Xote.array([
+          XoteJSX$Xote.jsx(Basefn.Typography.make, {
             text: {
               TAG: "Static",
               _0: "Alerts"
             },
             variant: "H4"
           }),
-          Xote__JSX.Elements.jsx("p", {
+          XoteJSX$Xote.Elements.jsx("p", {
             style: "color: #6b7280; margin: 0.5rem 0 1rem 0;",
-            children: Xote.Component.text("Display important messages with different severity levels.")
+            children: Node$Xote.text("Display important messages with different severity levels.")
           }),
-          Xote__JSX.Elements.jsxs("div", {
+          XoteJSX$Xote.Elements.jsxs("div", {
             style: "display: flex; flex-direction: column; gap: 1rem;",
-            children: Xote__JSX.array([
-              Xote__JSX.jsx(Basefn.Alert.make, {
+            children: XoteJSX$Xote.array([
+              XoteJSX$Xote.jsx(Basefn.Alert.make, {
                 title: "Information",
-                message: Xote.Signal.make("This is an informational alert message.", undefined, undefined),
+                message: Signal$Xote.make("This is an informational alert message.", undefined, undefined),
                 variant: "Info"
               }),
-              Xote__JSX.jsx(Basefn.Alert.make, {
+              XoteJSX$Xote.jsx(Basefn.Alert.make, {
                 title: "Success",
-                message: Xote.Signal.make("Your changes have been saved successfully!", undefined, undefined),
+                message: Signal$Xote.make("Your changes have been saved successfully!", undefined, undefined),
                 variant: "Success"
               }),
-              Xote__JSX.jsx(Basefn.Alert.make, {
+              XoteJSX$Xote.jsx(Basefn.Alert.make, {
                 title: "Warning",
-                message: Xote.Signal.make("Please review your input before proceeding.", undefined, undefined),
+                message: Signal$Xote.make("Please review your input before proceeding.", undefined, undefined),
                 variant: "Warning"
               }),
-              Xote__JSX.jsx(Basefn.Alert.make, {
+              XoteJSX$Xote.jsx(Basefn.Alert.make, {
                 title: "Error",
-                message: Xote.Signal.make("An error occurred while processing your request.", undefined, undefined),
+                message: Signal$Xote.make("An error occurred while processing your request.", undefined, undefined),
                 variant: "Error"
               }),
-              Xote__JSX.jsx(Basefn.Alert.make, {
-                message: Xote.Signal.make("This is a dismissible alert. Click the X to close it.", undefined, undefined),
+              XoteJSX$Xote.jsx(Basefn.Alert.make, {
+                message: Signal$Xote.make("This is a dismissible alert. Click the X to close it.", undefined, undefined),
                 variant: "Info",
                 dismissible: true
               })
@@ -430,73 +432,73 @@ function Demo$Demo(props) {
           })
         ])
       }),
-      Xote__JSX.Elements.jsxs("div", {
+      XoteJSX$Xote.Elements.jsxs("div", {
         style: "margin-top: 2rem;",
-        children: Xote__JSX.array([
-          Xote__JSX.jsx(Basefn.Typography.make, {
+        children: XoteJSX$Xote.array([
+          XoteJSX$Xote.jsx(Basefn.Typography.make, {
             text: {
               TAG: "Static",
               _0: "Progress"
             },
             variant: "H4"
           }),
-          Xote__JSX.Elements.jsx("p", {
+          XoteJSX$Xote.Elements.jsx("p", {
             style: "color: #6b7280; margin: 0.5rem 0 1rem 0;",
-            children: Xote.Component.text("Show progress indicators for ongoing operations.")
+            children: Node$Xote.text("Show progress indicators for ongoing operations.")
           }),
-          Xote__JSX.Elements.jsxs("div", {
+          XoteJSX$Xote.Elements.jsxs("div", {
             style: "display: flex; flex-direction: column; gap: 2rem;",
-            children: Xote__JSX.array([
-              Xote__JSX.Elements.jsx("div", {
-                children: Xote__JSX.jsx(Basefn.Progress.make, {
-                  value: Xote.Signal.make(25.0, undefined, undefined),
+            children: XoteJSX$Xote.array([
+              XoteJSX$Xote.Elements.jsx("div", {
+                children: XoteJSX$Xote.jsx(Basefn.Progress.make, {
+                  value: Signal$Xote.make(25.0, undefined, undefined),
                   variant: "Primary",
                   showLabel: true
                 })
               }),
-              Xote__JSX.Elements.jsx("div", {
-                children: Xote__JSX.jsx(Basefn.Progress.make, {
-                  value: Xote.Signal.make(50.0, undefined, undefined),
+              XoteJSX$Xote.Elements.jsx("div", {
+                children: XoteJSX$Xote.jsx(Basefn.Progress.make, {
+                  value: Signal$Xote.make(50.0, undefined, undefined),
                   variant: "Success",
                   showLabel: true,
                   label: "Upload"
                 })
               }),
-              Xote__JSX.Elements.jsx("div", {
-                children: Xote__JSX.jsx(Basefn.Progress.make, {
-                  value: Xote.Signal.make(75.0, undefined, undefined),
+              XoteJSX$Xote.Elements.jsx("div", {
+                children: XoteJSX$Xote.jsx(Basefn.Progress.make, {
+                  value: Signal$Xote.make(75.0, undefined, undefined),
                   variant: "Warning",
                   showLabel: true,
                   label: "Processing"
                 })
               }),
-              Xote__JSX.Elements.jsx("div", {
-                children: Xote__JSX.jsx(Basefn.Progress.make, {
-                  value: Xote.Signal.make(100.0, undefined, undefined),
+              XoteJSX$Xote.Elements.jsx("div", {
+                children: XoteJSX$Xote.jsx(Basefn.Progress.make, {
+                  value: Signal$Xote.make(100.0, undefined, undefined),
                   variant: "Success",
                   showLabel: true,
                   label: "Complete"
                 })
               }),
-              Xote__JSX.Elements.jsxs("div", {
-                children: Xote__JSX.array([
-                  Xote__JSX.jsx(Basefn.Progress.make, {
+              XoteJSX$Xote.Elements.jsxs("div", {
+                children: XoteJSX$Xote.array([
+                  XoteJSX$Xote.jsx(Basefn.Progress.make, {
                     value: downloadProgress,
                     variant: "Primary",
                     showLabel: true,
                     label: "Dynamic Progress"
                   }),
-                  Xote__JSX.jsx(Basefn.Button.make, {
+                  XoteJSX$Xote.jsx(Basefn.Button.make, {
                     label: {
                       TAG: "Static",
                       _0: "Simulate Progress"
                     },
                     onClick: _evt => {
-                      Xote.Signal.set(downloadProgress, 0.0);
+                      Signal$Xote.set(downloadProgress, 0.0);
                       let intervalId = {
                         contents: undefined
                       };
-                      let id = setInterval(() => Xote.Signal.update(downloadProgress, prev => {
+                      let id = setInterval(() => Signal$Xote.update(downloadProgress, prev => {
                         let next = prev + 5.0;
                         if (next < 100.0) {
                           return next;
@@ -513,14 +515,14 @@ function Demo$Demo(props) {
                   })
                 ])
               }),
-              Xote__JSX.Elements.jsxs("div", {
-                children: Xote__JSX.array([
-                  Xote__JSX.Elements.jsx("p", {
+              XoteJSX$Xote.Elements.jsxs("div", {
+                children: XoteJSX$Xote.array([
+                  XoteJSX$Xote.Elements.jsx("p", {
                     style: "color: #6b7280; margin-bottom: 0.5rem;",
-                    children: Xote.Component.text("Indeterminate progress:")
+                    children: Node$Xote.text("Indeterminate progress:")
                   }),
-                  Xote__JSX.jsx(Basefn.Progress.make, {
-                    value: Xote.Signal.make(0.0, undefined, undefined),
+                  XoteJSX$Xote.jsx(Basefn.Progress.make, {
+                    value: Signal$Xote.make(0.0, undefined, undefined),
                     variant: "Primary",
                     indeterminate: true
                   })
@@ -530,37 +532,37 @@ function Demo$Demo(props) {
           })
         ])
       }),
-      Xote__JSX.Elements.jsxs("div", {
+      XoteJSX$Xote.Elements.jsxs("div", {
         style: "margin-top: 2rem;",
-        children: Xote__JSX.array([
-          Xote__JSX.jsx(Basefn.Typography.make, {
+        children: XoteJSX$Xote.array([
+          XoteJSX$Xote.jsx(Basefn.Typography.make, {
             text: {
               TAG: "Static",
               _0: "Tabs"
             },
             variant: "H4"
           }),
-          Xote__JSX.Elements.jsx("p", {
+          XoteJSX$Xote.Elements.jsx("p", {
             style: "color: #6b7280; margin: 0.5rem 0 1rem 0;",
-            children: Xote.Component.text("Organize content into tabbed sections.")
+            children: Node$Xote.text("Organize content into tabbed sections.")
           }),
-          Xote__JSX.jsx(Basefn.Tabs.make, {
+          XoteJSX$Xote.jsx(Basefn.Tabs.make, {
             tabs: [
               {
                 value: "account",
                 label: "Account",
-                content: Xote__JSX.Elements.jsxs("div", {
-                  children: Xote__JSX.array([
-                    Xote__JSX.jsx(Basefn.Typography.make, {
+                content: XoteJSX$Xote.Elements.jsxs("div", {
+                  children: XoteJSX$Xote.array([
+                    XoteJSX$Xote.jsx(Basefn.Typography.make, {
                       text: {
                         TAG: "Static",
                         _0: "Account Settings"
                       },
                       variant: "H5"
                     }),
-                    Xote__JSX.Elements.jsx("p", {
+                    XoteJSX$Xote.Elements.jsx("p", {
                       style: "color: #6b7280; margin-top: 0.5rem;",
-                      children: Xote.Component.text("Manage your account settings and preferences here. You can update your profile information, change your password, and configure notification settings.")
+                      children: Node$Xote.text("Manage your account settings and preferences here. You can update your profile information, change your password, and configure notification settings.")
                     })
                   ])
                 })
@@ -568,23 +570,23 @@ function Demo$Demo(props) {
               {
                 value: "security",
                 label: "Security",
-                content: Xote__JSX.Elements.jsxs("div", {
-                  children: Xote__JSX.array([
-                    Xote__JSX.jsx(Basefn.Typography.make, {
+                content: XoteJSX$Xote.Elements.jsxs("div", {
+                  children: XoteJSX$Xote.array([
+                    XoteJSX$Xote.jsx(Basefn.Typography.make, {
                       text: {
                         TAG: "Static",
                         _0: "Security Settings"
                       },
                       variant: "H5"
                     }),
-                    Xote__JSX.Elements.jsx("p", {
+                    XoteJSX$Xote.Elements.jsx("p", {
                       style: "color: #6b7280; margin-top: 0.5rem;",
-                      children: Xote.Component.text("Configure your security preferences including two-factor authentication, active sessions, and security logs.")
+                      children: Node$Xote.text("Configure your security preferences including two-factor authentication, active sessions, and security logs.")
                     }),
-                    Xote__JSX.Elements.jsx("div", {
+                    XoteJSX$Xote.Elements.jsx("div", {
                       style: "margin-top: 1rem;",
-                      children: Xote__JSX.jsx(Basefn.Checkbox.make, {
-                        checked: Xote.Signal.make(true, undefined, undefined),
+                      children: XoteJSX$Xote.jsx(Basefn.Checkbox.make, {
+                        checked: Signal$Xote.make(true, undefined, undefined),
                         onChange: param => {},
                         label: "Enable two-factor authentication"
                       })
@@ -595,34 +597,34 @@ function Demo$Demo(props) {
               {
                 value: "notifications",
                 label: "Notifications",
-                content: Xote__JSX.Elements.jsxs("div", {
-                  children: Xote__JSX.array([
-                    Xote__JSX.jsx(Basefn.Typography.make, {
+                content: XoteJSX$Xote.Elements.jsxs("div", {
+                  children: XoteJSX$Xote.array([
+                    XoteJSX$Xote.jsx(Basefn.Typography.make, {
                       text: {
                         TAG: "Static",
                         _0: "Notification Preferences"
                       },
                       variant: "H5"
                     }),
-                    Xote__JSX.Elements.jsx("p", {
+                    XoteJSX$Xote.Elements.jsx("p", {
                       style: "color: #6b7280; margin-top: 0.5rem;",
-                      children: Xote.Component.text("Choose how you want to receive notifications.")
+                      children: Node$Xote.text("Choose how you want to receive notifications.")
                     }),
-                    Xote__JSX.Elements.jsxs("div", {
+                    XoteJSX$Xote.Elements.jsxs("div", {
                       style: "display: flex; flex-direction: column; gap: 0.75rem; margin-top: 1rem;",
-                      children: Xote__JSX.array([
-                        Xote__JSX.jsx(Basefn.Checkbox.make, {
-                          checked: Xote.Signal.make(true, undefined, undefined),
+                      children: XoteJSX$Xote.array([
+                        XoteJSX$Xote.jsx(Basefn.Checkbox.make, {
+                          checked: Signal$Xote.make(true, undefined, undefined),
                           onChange: param => {},
                           label: "Email notifications"
                         }),
-                        Xote__JSX.jsx(Basefn.Checkbox.make, {
-                          checked: Xote.Signal.make(false, undefined, undefined),
+                        XoteJSX$Xote.jsx(Basefn.Checkbox.make, {
+                          checked: Signal$Xote.make(false, undefined, undefined),
                           onChange: param => {},
                           label: "SMS notifications"
                         }),
-                        Xote__JSX.jsx(Basefn.Checkbox.make, {
-                          checked: Xote.Signal.make(true, undefined, undefined),
+                        XoteJSX$Xote.jsx(Basefn.Checkbox.make, {
+                          checked: Signal$Xote.make(true, undefined, undefined),
                           onChange: param => {},
                           label: "Push notifications"
                         })
@@ -634,18 +636,18 @@ function Demo$Demo(props) {
               {
                 value: "billing",
                 label: "Billing",
-                content: Xote__JSX.Elements.jsxs("div", {
-                  children: Xote__JSX.array([
-                    Xote__JSX.jsx(Basefn.Typography.make, {
+                content: XoteJSX$Xote.Elements.jsxs("div", {
+                  children: XoteJSX$Xote.array([
+                    XoteJSX$Xote.jsx(Basefn.Typography.make, {
                       text: {
                         TAG: "Static",
                         _0: "Billing Information"
                       },
                       variant: "H5"
                     }),
-                    Xote__JSX.Elements.jsx("p", {
+                    XoteJSX$Xote.Elements.jsx("p", {
                       style: "color: #6b7280; margin-top: 0.5rem;",
-                      children: Xote.Component.text("View and manage your billing information, payment methods, and invoices.")
+                      children: Node$Xote.text("View and manage your billing information, payment methods, and invoices.")
                     })
                   ])
                 }),
@@ -655,39 +657,39 @@ function Demo$Demo(props) {
           })
         ])
       }),
-      Xote__JSX.Elements.jsxs("div", {
+      XoteJSX$Xote.Elements.jsxs("div", {
         style: "margin-top: 2rem;",
-        children: Xote__JSX.array([
-          Xote__JSX.jsx(Basefn.Typography.make, {
+        children: XoteJSX$Xote.array([
+          XoteJSX$Xote.jsx(Basefn.Typography.make, {
             text: {
               TAG: "Static",
               _0: "Accordion"
             },
             variant: "H4"
           }),
-          Xote__JSX.Elements.jsx("p", {
+          XoteJSX$Xote.Elements.jsx("p", {
             style: "color: #6b7280; margin: 0.5rem 0 1rem 0;",
-            children: Xote.Component.text("Collapsible content sections with expand/collapse functionality.")
+            children: Node$Xote.text("Collapsible content sections with expand/collapse functionality.")
           }),
-          Xote__JSX.jsx(Basefn.Accordion.make, {
+          XoteJSX$Xote.jsx(Basefn.Accordion.make, {
             items: [
               {
                 value: "faq1",
                 title: "What is basefn-UI?",
-                content: Xote__JSX.Elements.jsx("p", {
-                  children: Xote.Component.text("basefn-UI is a modern, reactive UI component library built with ReScript and Xote. It provides a comprehensive set of accessible and customizable components for building web applications.")
+                content: XoteJSX$Xote.Elements.jsx("p", {
+                  children: Node$Xote.text("basefn-UI is a modern, reactive UI component library built with ReScript and Xote. It provides a comprehensive set of accessible and customizable components for building web applications.")
                 })
               },
               {
                 value: "faq2",
                 title: "How do I install basefn-UI?",
-                content: Xote__JSX.Elements.jsxs("div", {
-                  children: Xote__JSX.array([
-                    Xote__JSX.Elements.jsx("p", {
-                      children: Xote.Component.text("You can install basefn-UI via npm or yarn. Here's how to get started:")
+                content: XoteJSX$Xote.Elements.jsxs("div", {
+                  children: XoteJSX$Xote.array([
+                    XoteJSX$Xote.Elements.jsx("p", {
+                      children: Node$Xote.text("You can install basefn-UI via npm or yarn. Here's how to get started:")
                     }),
-                    Xote__JSX.Elements.jsx("br", {}),
-                    Xote__JSX.jsx(Basefn.Typography.make, {
+                    XoteJSX$Xote.Elements.jsx("br", {}),
+                    XoteJSX$Xote.jsx(Basefn.Typography.make, {
                       text: {
                         TAG: "Static",
                         _0: "npm install basefn-ui"
@@ -700,15 +702,15 @@ function Demo$Demo(props) {
               {
                 value: "faq3",
                 title: "Is basefn-UI customizable?",
-                content: Xote__JSX.Elements.jsx("p", {
-                  children: Xote.Component.text("Yes! basefn-UI is fully customizable. You can override the default styles using CSS variables or by providing custom CSS classes. Each component accepts standard HTML attributes including className and style.")
+                content: XoteJSX$Xote.Elements.jsx("p", {
+                  children: Node$Xote.text("Yes! basefn-UI is fully customizable. You can override the default styles using CSS variables or by providing custom CSS classes. Each component accepts standard HTML attributes including className and style.")
                 })
               },
               {
                 value: "faq4",
                 title: "Does basefn-UI support TypeScript?",
-                content: Xote__JSX.Elements.jsx("p", {
-                  children: Xote.Component.text("basefn-UI is built with ReScript, which provides excellent type safety. While it doesn't directly use TypeScript, ReScript's type system is even more robust and catches errors at compile time.")
+                content: XoteJSX$Xote.Elements.jsx("p", {
+                  children: Node$Xote.text("basefn-UI is built with ReScript, which provides excellent type safety. While it doesn't directly use TypeScript, ReScript's type system is even more robust and catches errors at compile time.")
                 })
               }
             ],
@@ -717,30 +719,30 @@ function Demo$Demo(props) {
           })
         ])
       }),
-      Xote__JSX.Elements.jsxs("div", {
+      XoteJSX$Xote.Elements.jsxs("div", {
         style: "margin-top: 2rem;",
-        children: Xote__JSX.array([
-          Xote__JSX.jsx(Basefn.Typography.make, {
+        children: XoteJSX$Xote.array([
+          XoteJSX$Xote.jsx(Basefn.Typography.make, {
             text: {
               TAG: "Static",
               _0: "Breadcrumb"
             },
             variant: "H4"
           }),
-          Xote__JSX.Elements.jsx("p", {
+          XoteJSX$Xote.Elements.jsx("p", {
             style: "color: #6b7280; margin: 0.5rem 0 1rem 0;",
-            children: Xote.Component.text("Navigation breadcrumbs to show the current page hierarchy.")
+            children: Node$Xote.text("Navigation breadcrumbs to show the current page hierarchy.")
           }),
-          Xote__JSX.Elements.jsxs("div", {
+          XoteJSX$Xote.Elements.jsxs("div", {
             style: "display: flex; flex-direction: column; gap: 1.5rem;",
-            children: Xote__JSX.array([
-              Xote__JSX.Elements.jsxs("div", {
-                children: Xote__JSX.array([
-                  Xote__JSX.Elements.jsx("p", {
+            children: XoteJSX$Xote.array([
+              XoteJSX$Xote.Elements.jsxs("div", {
+                children: XoteJSX$Xote.array([
+                  XoteJSX$Xote.Elements.jsx("p", {
                     style: "color: #6b7280; margin-bottom: 0.5rem; font-size: 0.875rem;",
-                    children: Xote.Component.text("Default separator:")
+                    children: Node$Xote.text("Default separator:")
                   }),
-                  Xote__JSX.jsx(Basefn.Breadcrumb.make, {
+                  XoteJSX$Xote.jsx(Basefn.Breadcrumb.make, {
                     items: [
                       {
                         label: "Home",
@@ -766,13 +768,13 @@ function Demo$Demo(props) {
                   })
                 ])
               }),
-              Xote__JSX.Elements.jsxs("div", {
-                children: Xote__JSX.array([
-                  Xote__JSX.Elements.jsx("p", {
+              XoteJSX$Xote.Elements.jsxs("div", {
+                children: XoteJSX$Xote.array([
+                  XoteJSX$Xote.Elements.jsx("p", {
                     style: "color: #6b7280; margin-bottom: 0.5rem; font-size: 0.875rem;",
-                    children: Xote.Component.text("Custom separator:")
+                    children: Node$Xote.text("Custom separator:")
                   }),
-                  Xote__JSX.jsx(Basefn.Breadcrumb.make, {
+                  XoteJSX$Xote.jsx(Basefn.Breadcrumb.make, {
                     items: [
                       {
                         label: "Home",
@@ -794,13 +796,13 @@ function Demo$Demo(props) {
                   })
                 ])
               }),
-              Xote__JSX.Elements.jsxs("div", {
-                children: Xote__JSX.array([
-                  Xote__JSX.Elements.jsx("p", {
+              XoteJSX$Xote.Elements.jsxs("div", {
+                children: XoteJSX$Xote.array([
+                  XoteJSX$Xote.Elements.jsx("p", {
                     style: "color: #6b7280; margin-bottom: 0.5rem; font-size: 0.875rem;",
-                    children: Xote.Component.text("With onClick handlers:")
+                    children: Node$Xote.text("With onClick handlers:")
                   }),
-                  Xote__JSX.jsx(Basefn.Breadcrumb.make, {
+                  XoteJSX$Xote.jsx(Basefn.Breadcrumb.make, {
                     items: [
                       {
                         label: "Dashboard",
@@ -830,15 +832,15 @@ function Demo$Demo(props) {
           })
         ])
       }),
-      Xote__JSX.jsx(Basefn.Separator.make, {
+      XoteJSX$Xote.jsx(Basefn.Separator.make, {
         orientation: "Horizontal",
         variant: "Solid",
         label: "Tier 3"
       }),
-      Xote__JSX.Elements.jsxs("div", {
+      XoteJSX$Xote.Elements.jsxs("div", {
         style: "margin-top: 3rem;",
-        children: Xote__JSX.array([
-          Xote__JSX.jsx(Basefn.Typography.make, {
+        children: XoteJSX$Xote.array([
+          XoteJSX$Xote.jsx(Basefn.Typography.make, {
             text: {
               TAG: "Static",
               _0: "Interactive Components"
@@ -846,7 +848,7 @@ function Demo$Demo(props) {
             variant: "H2",
             align: "Left"
           }),
-          Xote__JSX.jsx(Basefn.Typography.make, {
+          XoteJSX$Xote.jsx(Basefn.Typography.make, {
             text: {
               TAG: "Static",
               _0: "Explore the Tier 3 advanced interactive components below."
@@ -855,61 +857,61 @@ function Demo$Demo(props) {
           })
         ])
       }),
-      Xote__JSX.Elements.jsxs("div", {
+      XoteJSX$Xote.Elements.jsxs("div", {
         style: "margin-top: 2rem;",
-        children: Xote__JSX.array([
-          Xote__JSX.jsx(Basefn.Typography.make, {
+        children: XoteJSX$Xote.array([
+          XoteJSX$Xote.jsx(Basefn.Typography.make, {
             text: {
               TAG: "Static",
               _0: "Modal / Dialog"
             },
             variant: "H4"
           }),
-          Xote__JSX.Elements.jsx("p", {
+          XoteJSX$Xote.Elements.jsx("p", {
             style: "color: #6b7280; margin: 0.5rem 0 1rem 0;",
-            children: Xote.Component.text("Display content in an overlay dialog.")
+            children: Node$Xote.text("Display content in an overlay dialog.")
           }),
-          Xote__JSX.jsx(Basefn.Button.make, {
+          XoteJSX$Xote.jsx(Basefn.Button.make, {
             label: {
               TAG: "Static",
               _0: "Open Modal"
             },
-            onClick: param => Xote.Signal.set(isModalOpen, true),
+            onClick: param => Signal$Xote.set(isModalOpen, true),
             variant: "Primary"
           }),
-          Xote__JSX.jsxs(Basefn.Modal.make, {
+          XoteJSX$Xote.jsxs(Basefn.Modal.make, {
             isOpen: isModalOpen,
-            onClose: () => Xote.Signal.set(isModalOpen, false),
+            onClose: () => Signal$Xote.set(isModalOpen, false),
             title: "Example Modal",
             size: "Md",
-            children: Xote__JSX.array([
-              Xote__JSX.Elements.jsx("p", {
-                children: Xote.Component.text("This is a modal dialog. You can include any content here. Click the backdrop or the close button to dismiss.")
+            children: XoteJSX$Xote.array([
+              XoteJSX$Xote.Elements.jsx("p", {
+                children: Node$Xote.text("This is a modal dialog. You can include any content here. Click the backdrop or the close button to dismiss.")
               }),
-              Xote__JSX.Elements.jsx("p", {
+              XoteJSX$Xote.Elements.jsx("p", {
                 style: "margin-top: 1rem;",
-                children: Xote.Component.text("Modals are great for focused user interactions and confirmations.")
+                children: Node$Xote.text("Modals are great for focused user interactions and confirmations.")
               })
             ]),
-            footer: Xote__JSX.Elements.jsxs("div", {
+            footer: XoteJSX$Xote.Elements.jsxs("div", {
               style: "display: flex; gap: 0.5rem;",
-              children: Xote__JSX.array([
-                Xote__JSX.jsx(Basefn.Button.make, {
+              children: XoteJSX$Xote.array([
+                XoteJSX$Xote.jsx(Basefn.Button.make, {
                   label: {
                     TAG: "Static",
                     _0: "Cancel"
                   },
-                  onClick: param => Xote.Signal.set(isModalOpen, false),
+                  onClick: param => Signal$Xote.set(isModalOpen, false),
                   variant: "Ghost"
                 }),
-                Xote__JSX.jsx(Basefn.Button.make, {
+                XoteJSX$Xote.jsx(Basefn.Button.make, {
                   label: {
                     TAG: "Static",
                     _0: "Confirm"
                   },
                   onClick: param => {
                     console.log("Confirmed!");
-                    Xote.Signal.set(isModalOpen, false);
+                    Signal$Xote.set(isModalOpen, false);
                   },
                   variant: "Primary"
                 })
@@ -918,39 +920,39 @@ function Demo$Demo(props) {
           })
         ])
       }),
-      Xote__JSX.Elements.jsxs("div", {
+      XoteJSX$Xote.Elements.jsxs("div", {
         style: "margin-top: 2rem;",
-        children: Xote__JSX.array([
-          Xote__JSX.jsx(Basefn.Typography.make, {
+        children: XoteJSX$Xote.array([
+          XoteJSX$Xote.jsx(Basefn.Typography.make, {
             text: {
               TAG: "Static",
               _0: "Switch / Toggle"
             },
             variant: "H4"
           }),
-          Xote__JSX.Elements.jsx("p", {
+          XoteJSX$Xote.Elements.jsx("p", {
             style: "color: #6b7280; margin: 0.5rem 0 1rem 0;",
-            children: Xote.Component.text("Binary on/off switches for settings and preferences.")
+            children: Node$Xote.text("Binary on/off switches for settings and preferences.")
           }),
-          Xote__JSX.Elements.jsxs("div", {
+          XoteJSX$Xote.Elements.jsxs("div", {
             style: "display: flex; flex-direction: column; gap: 1rem;",
-            children: Xote__JSX.array([
-              Xote__JSX.jsx(Basefn.Switch.make, {
+            children: XoteJSX$Xote.array([
+              XoteJSX$Xote.jsx(Basefn.Switch.make, {
                 checked: switchEnabled,
                 label: "Enable feature"
               }),
-              Xote__JSX.jsx(Basefn.Switch.make, {
+              XoteJSX$Xote.jsx(Basefn.Switch.make, {
                 checked: darkModeSwitch,
                 label: "Dark mode",
                 size: "Lg"
               }),
-              Xote__JSX.jsx(Basefn.Switch.make, {
+              XoteJSX$Xote.jsx(Basefn.Switch.make, {
                 checked: notificationsSwitch,
                 label: "Push notifications",
                 size: "Sm"
               }),
-              Xote__JSX.jsx(Basefn.Switch.make, {
-                checked: Xote.Signal.make(true, undefined, undefined),
+              XoteJSX$Xote.jsx(Basefn.Switch.make, {
+                checked: Signal$Xote.make(true, undefined, undefined),
                 label: "Disabled switch",
                 disabled: true,
                 size: "Md"
@@ -959,38 +961,38 @@ function Demo$Demo(props) {
           })
         ])
       }),
-      Xote__JSX.Elements.jsxs("div", {
+      XoteJSX$Xote.Elements.jsxs("div", {
         style: "margin-top: 2rem;",
-        children: Xote__JSX.array([
-          Xote__JSX.jsx(Basefn.Typography.make, {
+        children: XoteJSX$Xote.array([
+          XoteJSX$Xote.jsx(Basefn.Typography.make, {
             text: {
               TAG: "Static",
               _0: "Slider"
             },
             variant: "H4"
           }),
-          Xote__JSX.Elements.jsx("p", {
+          XoteJSX$Xote.Elements.jsx("p", {
             style: "color: #6b7280; margin: 0.5rem 0 1rem 0;",
-            children: Xote.Component.text("Select a value from a range.")
+            children: Node$Xote.text("Select a value from a range.")
           }),
-          Xote__JSX.Elements.jsxs("div", {
+          XoteJSX$Xote.Elements.jsxs("div", {
             style: "display: flex; flex-direction: column; gap: 2rem;",
-            children: Xote__JSX.array([
-              Xote__JSX.jsx(Basefn.Slider.make, {
+            children: XoteJSX$Xote.array([
+              XoteJSX$Xote.jsx(Basefn.Slider.make, {
                 value: sliderValue,
                 label: "Volume",
                 showValue: true
               }),
-              Xote__JSX.jsx(Basefn.Slider.make, {
-                value: Xote.Signal.make(25.0, undefined, undefined),
+              XoteJSX$Xote.jsx(Basefn.Slider.make, {
+                value: Signal$Xote.make(25.0, undefined, undefined),
                 min: 0.0,
                 max: 100.0,
                 step: 5.0,
                 label: "Brightness",
                 showValue: true
               }),
-              Xote__JSX.jsx(Basefn.Slider.make, {
-                value: Xote.Signal.make(3.0, undefined, undefined),
+              XoteJSX$Xote.jsx(Basefn.Slider.make, {
+                value: Signal$Xote.make(3.0, undefined, undefined),
                 min: 0.0,
                 max: 5.0,
                 step: 1.0,
@@ -1009,27 +1011,27 @@ function Demo$Demo(props) {
           })
         ])
       }),
-      Xote__JSX.Elements.jsxs("div", {
+      XoteJSX$Xote.Elements.jsxs("div", {
         style: "margin-top: 2rem;",
-        children: Xote__JSX.array([
-          Xote__JSX.jsx(Basefn.Typography.make, {
+        children: XoteJSX$Xote.array([
+          XoteJSX$Xote.jsx(Basefn.Typography.make, {
             text: {
               TAG: "Static",
               _0: "Tooltip"
             },
             variant: "H4"
           }),
-          Xote__JSX.Elements.jsx("p", {
+          XoteJSX$Xote.Elements.jsx("p", {
             style: "color: #6b7280; margin: 0.5rem 0 1rem 0;",
-            children: Xote.Component.text("Show contextual information on hover.")
+            children: Node$Xote.text("Show contextual information on hover.")
           }),
-          Xote__JSX.Elements.jsxs("div", {
+          XoteJSX$Xote.Elements.jsxs("div", {
             style: "display: flex; gap: 1rem; flex-wrap: wrap;",
-            children: Xote__JSX.array([
-              Xote__JSX.jsx(Basefn.Tooltip.make, {
+            children: XoteJSX$Xote.array([
+              XoteJSX$Xote.jsx(Basefn.Tooltip.make, {
                 content: "This appears on top",
                 position: "Top",
-                children: Xote__JSX.jsx(Basefn.Button.make, {
+                children: XoteJSX$Xote.jsx(Basefn.Button.make, {
                   label: {
                     TAG: "Static",
                     _0: "Hover me )(top)"
@@ -1037,10 +1039,10 @@ function Demo$Demo(props) {
                   variant: "Secondary"
                 })
               }),
-              Xote__JSX.jsx(Basefn.Tooltip.make, {
+              XoteJSX$Xote.jsx(Basefn.Tooltip.make, {
                 content: "This appears on bottom",
                 position: "Bottom",
-                children: Xote__JSX.jsx(Basefn.Button.make, {
+                children: XoteJSX$Xote.jsx(Basefn.Button.make, {
                   label: {
                     TAG: "Static",
                     _0: "Hover me )(bottom)"
@@ -1048,10 +1050,10 @@ function Demo$Demo(props) {
                   variant: "Secondary"
                 })
               }),
-              Xote__JSX.jsx(Basefn.Tooltip.make, {
+              XoteJSX$Xote.jsx(Basefn.Tooltip.make, {
                 content: "This appears on left",
                 position: "Left",
-                children: Xote__JSX.jsx(Basefn.Button.make, {
+                children: XoteJSX$Xote.jsx(Basefn.Button.make, {
                   label: {
                     TAG: "Static",
                     _0: "Hover me )(left)"
@@ -1059,10 +1061,10 @@ function Demo$Demo(props) {
                   variant: "Secondary"
                 })
               }),
-              Xote__JSX.jsx(Basefn.Tooltip.make, {
+              XoteJSX$Xote.jsx(Basefn.Tooltip.make, {
                 content: "This appears on right",
                 position: "Right",
-                children: Xote__JSX.jsx(Basefn.Button.make, {
+                children: XoteJSX$Xote.jsx(Basefn.Button.make, {
                   label: {
                     TAG: "Static",
                     _0: "Hover me )(right)"
@@ -1074,25 +1076,25 @@ function Demo$Demo(props) {
           })
         ])
       }),
-      Xote__JSX.Elements.jsxs("div", {
+      XoteJSX$Xote.Elements.jsxs("div", {
         style: "margin-top: 2rem;",
-        children: Xote__JSX.array([
-          Xote__JSX.jsx(Basefn.Typography.make, {
+        children: XoteJSX$Xote.array([
+          XoteJSX$Xote.jsx(Basefn.Typography.make, {
             text: {
               TAG: "Static",
               _0: "Dropdown Menu"
             },
             variant: "H4"
           }),
-          Xote__JSX.Elements.jsx("p", {
+          XoteJSX$Xote.Elements.jsx("p", {
             style: "color: #6b7280; margin: 0.5rem 0 1rem 0;",
-            children: Xote.Component.text("Contextual menu with actions.")
+            children: Node$Xote.text("Contextual menu with actions.")
           }),
-          Xote__JSX.Elements.jsxs("div", {
+          XoteJSX$Xote.Elements.jsxs("div", {
             style: "display: flex; gap: 1rem;",
-            children: Xote__JSX.array([
-              Xote__JSX.jsx(Basefn.Dropdown.make, {
-                trigger: Xote__JSX.jsx(Basefn.Button.make, {
+            children: XoteJSX$Xote.array([
+              XoteJSX$Xote.jsx(Basefn.Dropdown.make, {
+                trigger: XoteJSX$Xote.jsx(Basefn.Button.make, {
                   label: {
                     TAG: "Static",
                     _0: "Actions"
@@ -1140,8 +1142,8 @@ function Demo$Demo(props) {
                   }
                 ]
               }),
-              Xote__JSX.jsx(Basefn.Dropdown.make, {
-                trigger: Xote__JSX.jsx(Basefn.Button.make, {
+              XoteJSX$Xote.jsx(Basefn.Dropdown.make, {
+                trigger: XoteJSX$Xote.jsx(Basefn.Button.make, {
                   label: {
                     TAG: "Static",
                     _0: "More options"
@@ -1185,32 +1187,32 @@ function Demo$Demo(props) {
           })
         ])
       }),
-      Xote__JSX.Elements.jsxs("div", {
+      XoteJSX$Xote.Elements.jsxs("div", {
         style: "margin-top: 2rem;",
-        children: Xote__JSX.array([
-          Xote__JSX.jsx(Basefn.Typography.make, {
+        children: XoteJSX$Xote.array([
+          XoteJSX$Xote.jsx(Basefn.Typography.make, {
             text: {
               TAG: "Static",
               _0: "Toast / Notification"
             },
             variant: "H4"
           }),
-          Xote__JSX.Elements.jsx("p", {
+          XoteJSX$Xote.Elements.jsx("p", {
             style: "color: #6b7280; margin: 0.5rem 0 1rem 0;",
-            children: Xote.Component.text("Temporary notification messages.")
+            children: Node$Xote.text("Temporary notification messages.")
           }),
-          Xote__JSX.Elements.jsx("div", {
+          XoteJSX$Xote.Elements.jsx("div", {
             style: "display: flex; gap: 0.75rem; flex-wrap: wrap;",
-            children: Xote__JSX.jsx(Basefn.Button.make, {
+            children: XoteJSX$Xote.jsx(Basefn.Button.make, {
               label: {
                 TAG: "Static",
                 _0: "Show Toast"
               },
-              onClick: param => Xote.Signal.set(toastVisible, true),
+              onClick: param => Signal$Xote.set(toastVisible, true),
               variant: "Primary"
             })
           }),
-          Xote__JSX.jsx(Basefn.Toast.make, {
+          XoteJSX$Xote.jsx(Basefn.Toast.make, {
             title: "Success!",
             message: "Your changes have been saved successfully.",
             variant: "Success",
@@ -1221,15 +1223,15 @@ function Demo$Demo(props) {
           })
         ])
       }),
-      Xote__JSX.jsx(Basefn.Separator.make, {
+      XoteJSX$Xote.jsx(Basefn.Separator.make, {
         orientation: "Horizontal",
         variant: "Solid",
         label: "Tier 4"
       }),
-      Xote__JSX.Elements.jsxs("div", {
+      XoteJSX$Xote.Elements.jsxs("div", {
         style: "margin-top: 3rem;",
-        children: Xote__JSX.array([
-          Xote__JSX.jsx(Basefn.Typography.make, {
+        children: XoteJSX$Xote.array([
+          XoteJSX$Xote.jsx(Basefn.Typography.make, {
             text: {
               TAG: "Static",
               _0: "Navigation & Layout"
@@ -1237,7 +1239,7 @@ function Demo$Demo(props) {
             variant: "H2",
             align: "Left"
           }),
-          Xote__JSX.jsx(Basefn.Typography.make, {
+          XoteJSX$Xote.jsx(Basefn.Typography.make, {
             text: {
               TAG: "Static",
               _0: "Explore the Tier 4 navigation and layout components below."
@@ -1246,30 +1248,30 @@ function Demo$Demo(props) {
           })
         ])
       }),
-      Xote__JSX.Elements.jsxs("div", {
+      XoteJSX$Xote.Elements.jsxs("div", {
         style: "margin-top: 2rem;",
-        children: Xote__JSX.array([
-          Xote__JSX.jsx(Basefn.Typography.make, {
+        children: XoteJSX$Xote.array([
+          XoteJSX$Xote.jsx(Basefn.Typography.make, {
             text: {
               TAG: "Static",
               _0: "Stepper"
             },
             variant: "H4"
           }),
-          Xote__JSX.Elements.jsx("p", {
+          XoteJSX$Xote.Elements.jsx("p", {
             style: "color: #6b7280; margin: 0.5rem 0 1rem 0;",
-            children: Xote.Component.text("Multi-step process indicator with progress tracking.")
+            children: Node$Xote.text("Multi-step process indicator with progress tracking.")
           }),
-          Xote__JSX.Elements.jsxs("div", {
+          XoteJSX$Xote.Elements.jsxs("div", {
             style: "display: flex; flex-direction: column; gap: 2rem;",
-            children: Xote__JSX.array([
-              Xote__JSX.Elements.jsxs("div", {
-                children: Xote__JSX.array([
-                  Xote__JSX.Elements.jsx("p", {
+            children: XoteJSX$Xote.array([
+              XoteJSX$Xote.Elements.jsxs("div", {
+                children: XoteJSX$Xote.array([
+                  XoteJSX$Xote.Elements.jsx("p", {
                     style: "color: #6b7280; margin-bottom: 1rem; font-size: 0.875rem;",
-                    children: Xote.Component.text("Horizontal stepper:")
+                    children: Node$Xote.text("Horizontal stepper:")
                   }),
-                  Xote__JSX.jsx(Basefn.Stepper.make, {
+                  XoteJSX$Xote.jsx(Basefn.Stepper.make, {
                     steps: [
                       {
                         title: "Account Info",
@@ -1295,19 +1297,19 @@ function Demo$Demo(props) {
                     currentStep: currentStep,
                     orientation: "Horizontal",
                     onStepClick: step => {
-                      Xote.Signal.set(currentStep, step);
+                      Signal$Xote.set(currentStep, step);
                       console.log("Step clicked:", step);
                     }
                   })
                 ])
               }),
-              Xote__JSX.Elements.jsxs("div", {
-                children: Xote__JSX.array([
-                  Xote__JSX.Elements.jsx("p", {
+              XoteJSX$Xote.Elements.jsxs("div", {
+                children: XoteJSX$Xote.array([
+                  XoteJSX$Xote.Elements.jsx("p", {
                     style: "color: #6b7280; margin-bottom: 1rem; font-size: 0.875rem;",
-                    children: Xote.Component.text("Vertical stepper:")
+                    children: Node$Xote.text("Vertical stepper:")
                   }),
-                  Xote__JSX.jsx(Basefn.Stepper.make, {
+                  XoteJSX$Xote.jsx(Basefn.Stepper.make, {
                     steps: [
                       {
                         title: "Order Placed",
@@ -1330,7 +1332,7 @@ function Demo$Demo(props) {
                         status: "Inactive"
                       }
                     ],
-                    currentStep: Xote.Signal.make(2, undefined, undefined),
+                    currentStep: Signal$Xote.make(2, undefined, undefined),
                     orientation: "Vertical"
                   })
                 ])
@@ -1339,57 +1341,57 @@ function Demo$Demo(props) {
           })
         ])
       }),
-      Xote__JSX.Elements.jsxs("div", {
+      XoteJSX$Xote.Elements.jsxs("div", {
         style: "margin-top: 2rem;",
-        children: Xote__JSX.array([
-          Xote__JSX.jsx(Basefn.Typography.make, {
+        children: XoteJSX$Xote.array([
+          XoteJSX$Xote.jsx(Basefn.Typography.make, {
             text: {
               TAG: "Static",
               _0: "Drawer / Sidebar"
             },
             variant: "H4"
           }),
-          Xote__JSX.Elements.jsx("p", {
+          XoteJSX$Xote.Elements.jsx("p", {
             style: "color: #6b7280; margin: 0.5rem 0 1rem 0;",
-            children: Xote.Component.text("Slide-in panels for additional content.")
+            children: Node$Xote.text("Slide-in panels for additional content.")
           }),
-          Xote__JSX.Elements.jsx("div", {
+          XoteJSX$Xote.Elements.jsx("div", {
             style: "display: flex; gap: 0.75rem; flex-wrap: wrap;",
-            children: Xote__JSX.jsx(Basefn.Button.make, {
+            children: XoteJSX$Xote.jsx(Basefn.Button.make, {
               label: {
                 TAG: "Static",
                 _0: "Open Drawer"
               },
-              onClick: param => Xote.Signal.set(isDrawerOpen, true),
+              onClick: param => Signal$Xote.set(isDrawerOpen, true),
               variant: "Primary"
             })
           }),
-          Xote__JSX.jsx(Basefn.Drawer.make, {
+          XoteJSX$Xote.jsx(Basefn.Drawer.make, {
             isOpen: isDrawerOpen,
-            onClose: () => Xote.Signal.set(isDrawerOpen, false),
+            onClose: () => Signal$Xote.set(isDrawerOpen, false),
             position: "Right",
             size: "Md",
             title: "Drawer Panel",
-            children: Xote__JSX.Elements.jsxs("div", {
-              children: Xote__JSX.array([
-                Xote__JSX.jsx(Basefn.Typography.make, {
+            children: XoteJSX$Xote.Elements.jsxs("div", {
+              children: XoteJSX$Xote.array([
+                XoteJSX$Xote.jsx(Basefn.Typography.make, {
                   text: {
                     TAG: "Static",
                     _0: "Drawer Content"
                   },
                   variant: "H5"
                 }),
-                Xote__JSX.Elements.jsx("p", {
+                XoteJSX$Xote.Elements.jsx("p", {
                   style: "margin-top: 1rem;",
-                  children: Xote.Component.text("This is a drawer panel. You can use it for navigation, forms, or any additional content that doesn't fit in the main view.")
+                  children: Node$Xote.text("This is a drawer panel. You can use it for navigation, forms, or any additional content that doesn't fit in the main view.")
                 }),
-                Xote__JSX.Elements.jsxs("div", {
+                XoteJSX$Xote.Elements.jsxs("div", {
                   style: "margin-top: 1.5rem;",
-                  children: Xote__JSX.array([
-                    Xote__JSX.jsx(Basefn.Label.make, {
+                  children: XoteJSX$Xote.array([
+                    XoteJSX$Xote.jsx(Basefn.Label.make, {
                       text: "Name"
                     }),
-                    Xote__JSX.jsx(Basefn.Input.make, {
+                    XoteJSX$Xote.jsx(Basefn.Input.make, {
                       value: {
                         TAG: "Static",
                         _0: ""
@@ -1399,13 +1401,13 @@ function Demo$Demo(props) {
                     })
                   ])
                 }),
-                Xote__JSX.Elements.jsxs("div", {
+                XoteJSX$Xote.Elements.jsxs("div", {
                   style: "margin-top: 1rem;",
-                  children: Xote__JSX.array([
-                    Xote__JSX.jsx(Basefn.Label.make, {
+                  children: XoteJSX$Xote.array([
+                    XoteJSX$Xote.jsx(Basefn.Label.make, {
                       text: "Email"
                     }),
-                    Xote__JSX.jsx(Basefn.Input.make, {
+                    XoteJSX$Xote.jsx(Basefn.Input.make, {
                       value: {
                         TAG: "Static",
                         _0: ""
@@ -1415,13 +1417,13 @@ function Demo$Demo(props) {
                     })
                   ])
                 }),
-                Xote__JSX.Elements.jsxs("div", {
+                XoteJSX$Xote.Elements.jsxs("div", {
                   style: "margin-top: 1rem;",
-                  children: Xote__JSX.array([
-                    Xote__JSX.jsx(Basefn.Label.make, {
+                  children: XoteJSX$Xote.array([
+                    XoteJSX$Xote.jsx(Basefn.Label.make, {
                       text: "Message"
                     }),
-                    Xote__JSX.jsx(Basefn.Textarea.make, {
+                    XoteJSX$Xote.jsx(Basefn.Textarea.make, {
                       value: {
                         TAG: "Static",
                         _0: ""
@@ -1432,25 +1434,25 @@ function Demo$Demo(props) {
                 })
               ])
             }),
-            footer: Xote__JSX.Elements.jsxs("div", {
+            footer: XoteJSX$Xote.Elements.jsxs("div", {
               style: "display: flex; gap: 0.5rem; justify-content: flex-end;",
-              children: Xote__JSX.array([
-                Xote__JSX.jsx(Basefn.Button.make, {
+              children: XoteJSX$Xote.array([
+                XoteJSX$Xote.jsx(Basefn.Button.make, {
                   label: {
                     TAG: "Static",
                     _0: "Cancel"
                   },
-                  onClick: param => Xote.Signal.set(isDrawerOpen, false),
+                  onClick: param => Signal$Xote.set(isDrawerOpen, false),
                   variant: "Ghost"
                 }),
-                Xote__JSX.jsx(Basefn.Button.make, {
+                XoteJSX$Xote.jsx(Basefn.Button.make, {
                   label: {
                     TAG: "Static",
                     _0: "Save"
                   },
                   onClick: param => {
                     console.log("Saved!");
-                    Xote.Signal.set(isDrawerOpen, false);
+                    Signal$Xote.set(isDrawerOpen, false);
                   },
                   variant: "Primary"
                 })
@@ -1459,30 +1461,30 @@ function Demo$Demo(props) {
           })
         ])
       }),
-      Xote__JSX.Elements.jsxs("div", {
+      XoteJSX$Xote.Elements.jsxs("div", {
         style: "margin-top: 2rem;",
-        children: Xote__JSX.array([
-          Xote__JSX.jsx(Basefn.Typography.make, {
+        children: XoteJSX$Xote.array([
+          XoteJSX$Xote.jsx(Basefn.Typography.make, {
             text: {
               TAG: "Static",
               _0: "Timeline"
             },
             variant: "H4"
           }),
-          Xote__JSX.Elements.jsx("p", {
+          XoteJSX$Xote.Elements.jsx("p", {
             style: "color: #6b7280; margin: 0.5rem 0 1rem 0;",
-            children: Xote.Component.text("Display chronological events in a visual timeline.")
+            children: Node$Xote.text("Display chronological events in a visual timeline.")
           }),
-          Xote__JSX.Elements.jsxs("div", {
+          XoteJSX$Xote.Elements.jsxs("div", {
             style: "display: flex; flex-direction: column; gap: 2rem;",
-            children: Xote__JSX.array([
-              Xote__JSX.Elements.jsxs("div", {
-                children: Xote__JSX.array([
-                  Xote__JSX.Elements.jsx("p", {
+            children: XoteJSX$Xote.array([
+              XoteJSX$Xote.Elements.jsxs("div", {
+                children: XoteJSX$Xote.array([
+                  XoteJSX$Xote.Elements.jsx("p", {
                     style: "color: #6b7280; margin-bottom: 1rem; font-size: 0.875rem;",
-                    children: Xote.Component.text("Vertical timeline:")
+                    children: Node$Xote.text("Vertical timeline:")
                   }),
-                  Xote__JSX.jsx(Basefn.Timeline.make, {
+                  XoteJSX$Xote.jsx(Basefn.Timeline.make, {
                     items: [
                       {
                         title: "Project Created",
@@ -1517,13 +1519,13 @@ function Demo$Demo(props) {
                   })
                 ])
               }),
-              Xote__JSX.Elements.jsxs("div", {
-                children: Xote__JSX.array([
-                  Xote__JSX.Elements.jsx("p", {
+              XoteJSX$Xote.Elements.jsxs("div", {
+                children: XoteJSX$Xote.array([
+                  XoteJSX$Xote.Elements.jsx("p", {
                     style: "color: #6b7280; margin-bottom: 1rem; font-size: 0.875rem;",
-                    children: Xote.Component.text("With different variants:")
+                    children: Node$Xote.text("With different variants:")
                   }),
-                  Xote__JSX.jsx(Basefn.Timeline.make, {
+                  XoteJSX$Xote.jsx(Basefn.Timeline.make, {
                     items: [
                       {
                         title: "Success Event",
@@ -1555,15 +1557,15 @@ function Demo$Demo(props) {
           })
         ])
       }),
-      Xote__JSX.jsx(Basefn.Separator.make, {
+      XoteJSX$Xote.jsx(Basefn.Separator.make, {
         orientation: "Horizontal",
         variant: "Solid",
         label: "App Layouts"
       }),
-      Xote__JSX.Elements.jsxs("div", {
+      XoteJSX$Xote.Elements.jsxs("div", {
         style: "margin-top: 3rem;",
-        children: Xote__JSX.array([
-          Xote__JSX.jsx(Basefn.Typography.make, {
+        children: XoteJSX$Xote.array([
+          XoteJSX$Xote.jsx(Basefn.Typography.make, {
             text: {
               TAG: "Static",
               _0: "Application Layouts"
@@ -1571,7 +1573,7 @@ function Demo$Demo(props) {
             variant: "H2",
             align: "Left"
           }),
-          Xote__JSX.jsx(Basefn.Typography.make, {
+          XoteJSX$Xote.jsx(Basefn.Typography.make, {
             text: {
               TAG: "Static",
               _0: "Complete application layout structures with sidebar and topbar combinations."
@@ -1580,41 +1582,41 @@ function Demo$Demo(props) {
           })
         ])
       }),
-      Xote__JSX.Elements.jsxs("div", {
+      XoteJSX$Xote.Elements.jsxs("div", {
         style: "margin-top: 2rem;",
-        children: Xote__JSX.array([
-          Xote__JSX.jsx(Basefn.Typography.make, {
+        children: XoteJSX$Xote.array([
+          XoteJSX$Xote.jsx(Basefn.Typography.make, {
             text: {
               TAG: "Static",
               _0: "Layout Variants"
             },
             variant: "H4"
           }),
-          Xote__JSX.Elements.jsx("p", {
+          XoteJSX$Xote.Elements.jsx("p", {
             style: "color: #6b7280; margin: 0.5rem 0 1rem 0;",
-            children: Xote.Component.text("Different application layout configurations.")
+            children: Node$Xote.text("Different application layout configurations.")
           }),
-          Xote__JSX.Elements.jsxs("div", {
+          XoteJSX$Xote.Elements.jsxs("div", {
             style: "display: flex; flex-direction: column; gap: 2rem;",
-            children: Xote__JSX.array([
-              Xote__JSX.Elements.jsxs("div", {
-                children: Xote__JSX.array([
-                  Xote__JSX.jsx(Basefn.Typography.make, {
+            children: XoteJSX$Xote.array([
+              XoteJSX$Xote.Elements.jsxs("div", {
+                children: XoteJSX$Xote.array([
+                  XoteJSX$Xote.jsx(Basefn.Typography.make, {
                     text: {
                       TAG: "Static",
                       _0: "Sidebar Only Layout"
                     },
                     variant: "H5"
                   }),
-                  Xote__JSX.Elements.jsx("p", {
+                  XoteJSX$Xote.Elements.jsx("p", {
                     style: "color: #6b7280; margin: 0.5rem 0 1rem 0; font-size: 0.875rem;",
-                    children: Xote.Component.text("Application with sidebar navigation")
+                    children: Node$Xote.text("Application with sidebar navigation")
                   }),
-                  Xote__JSX.Elements.jsx("div", {
+                  XoteJSX$Xote.Elements.jsx("div", {
                     style: "border: 2px solid #e5e7eb; border-radius: 0.5rem; overflow: hidden; height: 400px;",
-                    children: Xote__JSX.jsx(Basefn.AppLayout.make, {
-                      sidebar: Xote__JSX.jsx(Basefn.Sidebar.make, {
-                        logo: Xote.Component.text("eita UI"),
+                    children: XoteJSX$Xote.jsx(Basefn.AppLayout.make, {
+                      sidebar: XoteJSX$Xote.jsx(Basefn.Sidebar.make, {
+                        logo: Node$Xote.text("eita UI"),
                         sections: [
                           {
                             title: "Main",
@@ -1622,13 +1624,13 @@ function Demo$Demo(props) {
                               {
                                 label: "Dashboard",
                                 icon: "\u2302",
-                                active: Xote.Signal.get(activeNavItem) === "home",
+                                active: Signal$Xote.get(activeNavItem) === "home",
                                 url: "/profile"
                               },
                               {
                                 label: "Analytics",
                                 icon: "\u{1F4CA}",
-                                active: Xote.Signal.get(activeNavItem) === "analytics",
+                                active: Signal$Xote.get(activeNavItem) === "analytics",
                                 url: "/profile"
                               }
                             ]
@@ -1639,13 +1641,13 @@ function Demo$Demo(props) {
                               {
                                 label: "Profile",
                                 icon: "\u{1F464}",
-                                active: Xote.Signal.get(activeNavItem) === "profile",
+                                active: Signal$Xote.get(activeNavItem) === "profile",
                                 url: "/profile"
                               },
                               {
                                 label: "Settings",
                                 icon: "\u2699",
-                                active: Xote.Signal.get(activeNavItem) === "settings",
+                                active: Signal$Xote.get(activeNavItem) === "settings",
                                 url: "/profile"
                               }
                             ]
@@ -1653,19 +1655,19 @@ function Demo$Demo(props) {
                         ],
                         size: "Md"
                       }),
-                      children: Xote__JSX.Elements.jsxs("div", {
+                      children: XoteJSX$Xote.Elements.jsxs("div", {
                         style: "padding: 2rem;",
-                        children: Xote__JSX.array([
-                          Xote__JSX.jsx(Basefn.Typography.make, {
+                        children: XoteJSX$Xote.array([
+                          XoteJSX$Xote.jsx(Basefn.Typography.make, {
                             text: {
                               TAG: "Static",
                               _0: "Main Content Area"
                             },
                             variant: "H3"
                           }),
-                          Xote__JSX.Elements.jsx("p", {
+                          XoteJSX$Xote.Elements.jsx("p", {
                             style: "margin-top: 1rem;",
-                            children: Xote.Component.text("This is the main content area. The sidebar provides persistent navigation.")
+                            children: Node$Xote.text("This is the main content area. The sidebar provides persistent navigation.")
                           })
                         ])
                       })
@@ -1673,52 +1675,52 @@ function Demo$Demo(props) {
                   })
                 ])
               }),
-              Xote__JSX.Elements.jsxs("div", {
-                children: Xote__JSX.array([
-                  Xote__JSX.jsx(Basefn.Typography.make, {
+              XoteJSX$Xote.Elements.jsxs("div", {
+                children: XoteJSX$Xote.array([
+                  XoteJSX$Xote.jsx(Basefn.Typography.make, {
                     text: {
                       TAG: "Static",
                       _0: "Topbar Only Layout"
                     },
                     variant: "H5"
                   }),
-                  Xote__JSX.Elements.jsx("p", {
+                  XoteJSX$Xote.Elements.jsx("p", {
                     style: "color: #6b7280; margin: 0.5rem 0 1rem 0; font-size: 0.875rem;",
-                    children: Xote.Component.text("Application with top navigation bar")
+                    children: Node$Xote.text("Application with top navigation bar")
                   }),
-                  Xote__JSX.Elements.jsx("div", {
+                  XoteJSX$Xote.Elements.jsx("div", {
                     style: "border: 2px solid #e5e7eb; border-radius: 0.5rem; overflow: hidden; height: 300px;",
-                    children: Xote__JSX.jsx(Basefn.AppLayout.make, {
-                      topbar: Xote__JSX.jsx(Basefn.Topbar.make, {
-                        logo: Xote.Component.text("eita UI"),
+                    children: XoteJSX$Xote.jsx(Basefn.AppLayout.make, {
+                      topbar: XoteJSX$Xote.jsx(Basefn.Topbar.make, {
+                        logo: Node$Xote.text("eita UI"),
                         navItems: [
                           {
                             label: "Home",
-                            active: Xote.Signal.get(activeNavItem) === "home",
-                            onClick: () => Xote.Signal.set(activeNavItem, "home")
+                            active: Signal$Xote.get(activeNavItem) === "home",
+                            onClick: () => Signal$Xote.set(activeNavItem, "home")
                           },
                           {
                             label: "Products",
-                            active: Xote.Signal.get(activeNavItem) === "products",
-                            onClick: () => Xote.Signal.set(activeNavItem, "products")
+                            active: Signal$Xote.get(activeNavItem) === "products",
+                            onClick: () => Signal$Xote.set(activeNavItem, "products")
                           },
                           {
                             label: "About",
-                            active: Xote.Signal.get(activeNavItem) === "about",
-                            onClick: () => Xote.Signal.set(activeNavItem, "about")
+                            active: Signal$Xote.get(activeNavItem) === "about",
+                            onClick: () => Signal$Xote.set(activeNavItem, "about")
                           }
                         ],
-                        rightContent: Xote__JSX.Elements.jsxs("div", {
+                        rightContent: XoteJSX$Xote.Elements.jsxs("div", {
                           style: "display: flex; gap: 0.5rem;",
-                          children: Xote__JSX.array([
-                            Xote__JSX.jsx(Basefn.Button.make, {
+                          children: XoteJSX$Xote.array([
+                            XoteJSX$Xote.jsx(Basefn.Button.make, {
                               label: {
                                 TAG: "Static",
                                 _0: "Sign In"
                               },
                               variant: "Ghost"
                             }),
-                            Xote__JSX.jsx(Basefn.Button.make, {
+                            XoteJSX$Xote.jsx(Basefn.Button.make, {
                               label: {
                                 TAG: "Static",
                                 _0: "Sign Up"
@@ -1728,19 +1730,19 @@ function Demo$Demo(props) {
                           ])
                         })
                       }),
-                      children: Xote__JSX.Elements.jsxs("div", {
+                      children: XoteJSX$Xote.Elements.jsxs("div", {
                         style: "padding: 2rem;",
-                        children: Xote__JSX.array([
-                          Xote__JSX.jsx(Basefn.Typography.make, {
+                        children: XoteJSX$Xote.array([
+                          XoteJSX$Xote.jsx(Basefn.Typography.make, {
                             text: {
                               TAG: "Static",
                               _0: "Main Content Area"
                             },
                             variant: "H3"
                           }),
-                          Xote__JSX.Elements.jsx("p", {
+                          XoteJSX$Xote.Elements.jsx("p", {
                             style: "margin-top: 1rem;",
-                            children: Xote.Component.text("This layout uses only a top navigation bar.")
+                            children: Node$Xote.text("This layout uses only a top navigation bar.")
                           })
                         ])
                       })
@@ -1748,24 +1750,24 @@ function Demo$Demo(props) {
                   })
                 ])
               }),
-              Xote__JSX.Elements.jsxs("div", {
-                children: Xote__JSX.array([
-                  Xote__JSX.jsx(Basefn.Typography.make, {
+              XoteJSX$Xote.Elements.jsxs("div", {
+                children: XoteJSX$Xote.array([
+                  XoteJSX$Xote.jsx(Basefn.Typography.make, {
                     text: {
                       TAG: "Static",
                       _0: "Sidebar + Topbar Layout"
                     },
                     variant: "H5"
                   }),
-                  Xote__JSX.Elements.jsx("p", {
+                  XoteJSX$Xote.Elements.jsx("p", {
                     style: "color: #6b7280; margin: 0.5rem 0 1rem 0; font-size: 0.875rem;",
-                    children: Xote.Component.text("Full application layout with both sidebar and topbar")
+                    children: Node$Xote.text("Full application layout with both sidebar and topbar")
                   }),
-                  Xote__JSX.Elements.jsx("div", {
+                  XoteJSX$Xote.Elements.jsx("div", {
                     style: "border: 2px solid #e5e7eb; border-radius: 0.5rem; overflow: hidden; height: 500px;",
-                    children: Xote__JSX.jsx(Basefn.AppLayout.make, {
-                      sidebar: Xote__JSX.jsx(Basefn.Sidebar.make, {
-                        logo: Xote.Component.text("basefn"),
+                    children: XoteJSX$Xote.jsx(Basefn.AppLayout.make, {
+                      sidebar: XoteJSX$Xote.jsx(Basefn.Sidebar.make, {
+                        logo: Node$Xote.text("basefn"),
                         sections: [{
                             title: "Navigation",
                             items: [
@@ -1790,51 +1792,51 @@ function Demo$Demo(props) {
                             ]
                           }],
                         size: "Md",
-                        collapsed: Xote.Signal.get(sidebarCollapsed)
+                        collapsed: Signal$Xote.get(sidebarCollapsed)
                       }),
-                      topbar: Xote__JSX.jsx(Basefn.Topbar.make, {
-                        rightContent: Xote__JSX.Elements.jsxs("div", {
+                      topbar: XoteJSX$Xote.jsx(Basefn.Topbar.make, {
+                        rightContent: XoteJSX$Xote.Elements.jsxs("div", {
                           style: "display: flex; align-items: center; gap: 1rem;",
-                          children: Xote__JSX.array([
-                            Xote__JSX.jsx(Basefn.Badge.make, {
-                              label: Xote.Signal.make("3", undefined, undefined),
+                          children: XoteJSX$Xote.array([
+                            XoteJSX$Xote.jsx(Basefn.Badge.make, {
+                              label: Signal$Xote.make("3", undefined, undefined),
                               variant: "Primary"
                             }),
-                            Xote__JSX.jsx(Basefn.Avatar.make, {
+                            XoteJSX$Xote.jsx(Basefn.Avatar.make, {
                               src: "https://ui-avatars.com/api/?name=John+Doe",
                               size: "Sm"
                             })
                           ])
                         }),
-                        onMenuClick: () => Xote.Signal.update(sidebarCollapsed, prev => !prev)
+                        onMenuClick: () => Signal$Xote.update(sidebarCollapsed, prev => !prev)
                       }),
-                      children: Xote__JSX.Elements.jsxs("div", {
+                      children: XoteJSX$Xote.Elements.jsxs("div", {
                         style: "padding: 2rem;",
-                        children: Xote__JSX.array([
-                          Xote__JSX.jsx(Basefn.Typography.make, {
+                        children: XoteJSX$Xote.array([
+                          XoteJSX$Xote.jsx(Basefn.Typography.make, {
                             text: {
                               TAG: "Static",
                               _0: "Dashboard"
                             },
                             variant: "H3"
                           }),
-                          Xote__JSX.Elements.jsx("p", {
+                          XoteJSX$Xote.Elements.jsx("p", {
                             style: "margin-top: 1rem;",
-                            children: Xote.Component.text("This is a complete application layout with both sidebar and topbar. Click the menu button in the topbar to toggle the sidebar.")
+                            children: Node$Xote.text("This is a complete application layout with both sidebar and topbar. Click the menu button in the topbar to toggle the sidebar.")
                           }),
-                          Xote__JSX.Elements.jsxs("div", {
+                          XoteJSX$Xote.Elements.jsxs("div", {
                             style: "margin-top: 2rem; display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 1rem;",
-                            children: Xote__JSX.array([
-                              Xote__JSX.jsxs(Basefn.Card.make, {
-                                children: Xote__JSX.array([
-                                  Xote__JSX.jsx(Basefn.Typography.make, {
+                            children: XoteJSX$Xote.array([
+                              XoteJSX$Xote.jsxs(Basefn.Card.make, {
+                                children: XoteJSX$Xote.array([
+                                  XoteJSX$Xote.jsx(Basefn.Typography.make, {
                                     text: {
                                       TAG: "Static",
                                       _0: "Total Users"
                                     },
                                     variant: "H6"
                                   }),
-                                  Xote__JSX.jsx(Basefn.Typography.make, {
+                                  XoteJSX$Xote.jsx(Basefn.Typography.make, {
                                     text: {
                                       TAG: "Static",
                                       _0: "1,234"
@@ -1844,16 +1846,16 @@ function Demo$Demo(props) {
                                   })
                                 ])
                               }),
-                              Xote__JSX.jsxs(Basefn.Card.make, {
-                                children: Xote__JSX.array([
-                                  Xote__JSX.jsx(Basefn.Typography.make, {
+                              XoteJSX$Xote.jsxs(Basefn.Card.make, {
+                                children: XoteJSX$Xote.array([
+                                  XoteJSX$Xote.jsx(Basefn.Typography.make, {
                                     text: {
                                       TAG: "Static",
                                       _0: "Active Projects"
                                     },
                                     variant: "H6"
                                   }),
-                                  Xote__JSX.jsx(Basefn.Typography.make, {
+                                  XoteJSX$Xote.jsx(Basefn.Typography.make, {
                                     text: {
                                       TAG: "Static",
                                       _0: "45"
@@ -1862,16 +1864,16 @@ function Demo$Demo(props) {
                                   })
                                 ])
                               }),
-                              Xote__JSX.jsxs(Basefn.Card.make, {
-                                children: Xote__JSX.array([
-                                  Xote__JSX.jsx(Basefn.Typography.make, {
+                              XoteJSX$Xote.jsxs(Basefn.Card.make, {
+                                children: XoteJSX$Xote.array([
+                                  XoteJSX$Xote.jsx(Basefn.Typography.make, {
                                     text: {
                                       TAG: "Static",
                                       _0: "Completed Tasks"
                                     },
                                     variant: "H6"
                                   }),
-                                  Xote__JSX.jsx(Basefn.Typography.make, {
+                                  XoteJSX$Xote.jsx(Basefn.Typography.make, {
                                     text: {
                                       TAG: "Static",
                                       _0: "892"
@@ -1885,7 +1887,7 @@ function Demo$Demo(props) {
                         ])
                       }),
                       sidebarSize: "md",
-                      sidebarCollapsed: Xote.Signal.get(sidebarCollapsed)
+                      sidebarCollapsed: Signal$Xote.get(sidebarCollapsed)
                     })
                   })
                 ])
@@ -1894,15 +1896,15 @@ function Demo$Demo(props) {
           })
         ])
       }),
-      Xote__JSX.jsx(Basefn.Separator.make, {
+      XoteJSX$Xote.jsx(Basefn.Separator.make, {
         orientation: "Horizontal",
         variant: "Dashed",
         label: "Foundational"
       }),
-      Xote__JSX.Elements.jsxs("div", {
+      XoteJSX$Xote.Elements.jsxs("div", {
         style: "margin-top: 3rem;",
-        children: Xote__JSX.array([
-          Xote__JSX.jsx(Basefn.Typography.make, {
+        children: XoteJSX$Xote.array([
+          XoteJSX$Xote.jsx(Basefn.Typography.make, {
             text: {
               TAG: "Static",
               _0: "Foundation Components"
@@ -1910,7 +1912,7 @@ function Demo$Demo(props) {
             variant: "H2",
             align: "Left"
           }),
-          Xote__JSX.jsx(Basefn.Typography.make, {
+          XoteJSX$Xote.jsx(Basefn.Typography.make, {
             text: {
               TAG: "Static",
               _0: "Explore the Tier 1 foundation components below."
@@ -1919,74 +1921,74 @@ function Demo$Demo(props) {
           })
         ])
       }),
-      Xote__JSX.Elements.jsxs("div", {
+      XoteJSX$Xote.Elements.jsxs("div", {
         style: "margin-top: 2rem;",
-        children: Xote__JSX.array([
-          Xote__JSX.jsx(Basefn.Typography.make, {
+        children: XoteJSX$Xote.array([
+          XoteJSX$Xote.jsx(Basefn.Typography.make, {
             text: {
               TAG: "Static",
               _0: "Badges"
             },
             variant: "H4"
           }),
-          Xote__JSX.Elements.jsx("p", {
+          XoteJSX$Xote.Elements.jsx("p", {
             style: "color: #6b7280; margin: 0.5rem 0 1rem 0;",
-            children: Xote.Component.text("Display status indicators and labels with various styles.")
+            children: Node$Xote.text("Display status indicators and labels with various styles.")
           }),
-          Xote__JSX.Elements.jsxs("div", {
+          XoteJSX$Xote.Elements.jsxs("div", {
             style: "display: flex; gap: 0.75rem; flex-wrap: wrap; align-items: center;",
-            children: Xote__JSX.array([
-              Xote__JSX.jsx(Basefn.Badge.make, {
-                label: Xote.Signal.make("Default", undefined, undefined),
+            children: XoteJSX$Xote.array([
+              XoteJSX$Xote.jsx(Basefn.Badge.make, {
+                label: Signal$Xote.make("Default", undefined, undefined),
                 variant: "Default"
               }),
-              Xote__JSX.jsx(Basefn.Badge.make, {
-                label: Xote.Signal.make("Primary", undefined, undefined),
+              XoteJSX$Xote.jsx(Basefn.Badge.make, {
+                label: Signal$Xote.make("Primary", undefined, undefined),
                 variant: "Primary"
               }),
-              Xote__JSX.jsx(Basefn.Badge.make, {
-                label: Xote.Signal.make("Secondary", undefined, undefined),
+              XoteJSX$Xote.jsx(Basefn.Badge.make, {
+                label: Signal$Xote.make("Secondary", undefined, undefined),
                 variant: "Secondary"
               }),
-              Xote__JSX.jsx(Basefn.Badge.make, {
-                label: Xote.Signal.make("Success", undefined, undefined),
+              XoteJSX$Xote.jsx(Basefn.Badge.make, {
+                label: Signal$Xote.make("Success", undefined, undefined),
                 variant: "Success"
               }),
-              Xote__JSX.jsx(Basefn.Badge.make, {
-                label: Xote.Signal.make("Warning", undefined, undefined),
+              XoteJSX$Xote.jsx(Basefn.Badge.make, {
+                label: Signal$Xote.make("Warning", undefined, undefined),
                 variant: "Warning"
               }),
-              Xote__JSX.jsx(Basefn.Badge.make, {
-                label: Xote.Signal.make("Error", undefined, undefined),
+              XoteJSX$Xote.jsx(Basefn.Badge.make, {
+                label: Signal$Xote.make("Error", undefined, undefined),
                 variant: "Error"
               })
             ])
           }),
-          Xote__JSX.Elements.jsxs("div", {
+          XoteJSX$Xote.Elements.jsxs("div", {
             style: "display: flex; gap: 0.75rem; flex-wrap: wrap; align-items: center; margin-top: 1rem;",
-            children: Xote__JSX.array([
-              Xote__JSX.jsx(Basefn.Badge.make, {
-                label: Xote.Signal.make("Small", undefined, undefined),
+            children: XoteJSX$Xote.array([
+              XoteJSX$Xote.jsx(Basefn.Badge.make, {
+                label: Signal$Xote.make("Small", undefined, undefined),
                 variant: "Primary",
                 size: "Sm"
               }),
-              Xote__JSX.jsx(Basefn.Badge.make, {
-                label: Xote.Signal.make("Medium", undefined, undefined),
+              XoteJSX$Xote.jsx(Basefn.Badge.make, {
+                label: Signal$Xote.make("Medium", undefined, undefined),
                 variant: "Primary",
                 size: "Md"
               }),
-              Xote__JSX.jsx(Basefn.Badge.make, {
-                label: Xote.Signal.make("Large", undefined, undefined),
+              XoteJSX$Xote.jsx(Basefn.Badge.make, {
+                label: Signal$Xote.make("Large", undefined, undefined),
                 variant: "Primary",
                 size: "Lg"
               }),
-              Xote__JSX.jsx(Basefn.Badge.make, {
-                label: Xote.Signal.make("Online", undefined, undefined),
+              XoteJSX$Xote.jsx(Basefn.Badge.make, {
+                label: Signal$Xote.make("Online", undefined, undefined),
                 variant: "Success",
                 dot: true
               }),
-              Xote__JSX.jsx(Basefn.Badge.make, {
-                label: Xote.Signal.make("Away", undefined, undefined),
+              XoteJSX$Xote.jsx(Basefn.Badge.make, {
+                label: Signal$Xote.make("Away", undefined, undefined),
                 variant: "Warning",
                 dot: true
               })
@@ -1994,92 +1996,92 @@ function Demo$Demo(props) {
           })
         ])
       }),
-      Xote__JSX.jsx(Basefn.Separator.make, {
+      XoteJSX$Xote.jsx(Basefn.Separator.make, {
         orientation: "Horizontal",
         variant: "Dashed",
         label: "Spinners"
       }),
-      Xote__JSX.Elements.jsxs("div", {
+      XoteJSX$Xote.Elements.jsxs("div", {
         style: "margin-top: 2rem;",
-        children: Xote__JSX.array([
-          Xote__JSX.jsx(Basefn.Typography.make, {
+        children: XoteJSX$Xote.array([
+          XoteJSX$Xote.jsx(Basefn.Typography.make, {
             text: {
               TAG: "Static",
               _0: "Spinners"
             },
             variant: "H4"
           }),
-          Xote__JSX.Elements.jsx("p", {
+          XoteJSX$Xote.Elements.jsx("p", {
             style: "color: #6b7280; margin: 0.5rem 0 1rem 0;",
-            children: Xote.Component.text("Loading indicators in different sizes and colors.")
+            children: Node$Xote.text("Loading indicators in different sizes and colors.")
           }),
-          Xote__JSX.Elements.jsxs("div", {
+          XoteJSX$Xote.Elements.jsxs("div", {
             style: "display: flex; gap: 2rem; flex-wrap: wrap; align-items: center;",
-            children: Xote__JSX.array([
-              Xote__JSX.jsx(Basefn.Spinner.make, {
+            children: XoteJSX$Xote.array([
+              XoteJSX$Xote.jsx(Basefn.Spinner.make, {
                 size: "Sm",
                 variant: "Default"
               }),
-              Xote__JSX.jsx(Basefn.Spinner.make, {
+              XoteJSX$Xote.jsx(Basefn.Spinner.make, {
                 size: "Md",
                 variant: "Primary"
               }),
-              Xote__JSX.jsx(Basefn.Spinner.make, {
+              XoteJSX$Xote.jsx(Basefn.Spinner.make, {
                 size: "Lg",
                 variant: "Secondary"
               }),
-              Xote__JSX.jsx(Basefn.Spinner.make, {
+              XoteJSX$Xote.jsx(Basefn.Spinner.make, {
                 size: "Xl",
                 variant: "Primary"
               })
             ])
           }),
-          Xote__JSX.Elements.jsxs("div", {
+          XoteJSX$Xote.Elements.jsxs("div", {
             style: "display: flex; gap: 2rem; flex-wrap: wrap; margin-top: 1.5rem;",
-            children: Xote__JSX.array([
-              Xote__JSX.jsx(Basefn.Spinner.make, {
+            children: XoteJSX$Xote.array([
+              XoteJSX$Xote.jsx(Basefn.Spinner.make, {
                 size: "Md",
                 variant: "Primary",
                 label: "Loading..."
               }),
-              Xote__JSX.jsx(Basefn.Spinner.make, {
+              XoteJSX$Xote.jsx(Basefn.Spinner.make, {
                 size: "Lg",
                 variant: "Default",
-                label: Xote.Signal.get(isSubmitting) ? "Submitting..." : "Ready"
+                label: Signal$Xote.get(isSubmitting) ? "Submitting..." : "Ready"
               })
             ])
           })
         ])
       }),
-      Xote__JSX.jsx(Basefn.Separator.make, {
+      XoteJSX$Xote.jsx(Basefn.Separator.make, {
         orientation: "Horizontal",
         variant: "Dotted"
       }),
-      Xote__JSX.Elements.jsxs("div", {
+      XoteJSX$Xote.Elements.jsxs("div", {
         style: "margin-top: 2rem;",
-        children: Xote__JSX.array([
-          Xote__JSX.jsx(Basefn.Typography.make, {
+        children: XoteJSX$Xote.array([
+          XoteJSX$Xote.jsx(Basefn.Typography.make, {
             text: {
               TAG: "Static",
               _0: "Keyboard Shortcuts"
             },
             variant: "H4"
           }),
-          Xote__JSX.Elements.jsx("p", {
+          XoteJSX$Xote.Elements.jsx("p", {
             style: "color: #6b7280; margin: 0.5rem 0 1rem 0;",
-            children: Xote.Component.text("Display keyboard shortcuts in a visually appealing way.")
+            children: Node$Xote.text("Display keyboard shortcuts in a visually appealing way.")
           }),
-          Xote__JSX.Elements.jsxs("div", {
+          XoteJSX$Xote.Elements.jsxs("div", {
             style: "display: flex; gap: 1.5rem; flex-wrap: wrap; align-items: center;",
-            children: Xote__JSX.array([
-              Xote__JSX.Elements.jsxs("div", {
-                children: Xote__JSX.array([
-                  Xote__JSX.Elements.jsx("span", {
+            children: XoteJSX$Xote.array([
+              XoteJSX$Xote.Elements.jsxs("div", {
+                children: XoteJSX$Xote.array([
+                  XoteJSX$Xote.Elements.jsx("span", {
                     style: "color: #6b7280; margin-right: 0.5rem;",
-                    children: Xote.Component.text("Copy:")
+                    children: Node$Xote.text("Copy:")
                   }),
-                  Xote__JSX.jsx(Basefn.Kbd.make, {
-                    keys: Xote.Signal.make([
+                  XoteJSX$Xote.jsx(Basefn.Kbd.make, {
+                    keys: Signal$Xote.make([
                       "Ctrl",
                       "C"
                     ], undefined, undefined),
@@ -2087,14 +2089,14 @@ function Demo$Demo(props) {
                   })
                 ])
               }),
-              Xote__JSX.Elements.jsxs("div", {
-                children: Xote__JSX.array([
-                  Xote__JSX.Elements.jsx("span", {
+              XoteJSX$Xote.Elements.jsxs("div", {
+                children: XoteJSX$Xote.array([
+                  XoteJSX$Xote.Elements.jsx("span", {
                     style: "color: #6b7280; margin-right: 0.5rem;",
-                    children: Xote.Component.text("Paste:")
+                    children: Node$Xote.text("Paste:")
                   }),
-                  Xote__JSX.jsx(Basefn.Kbd.make, {
-                    keys: Xote.Signal.make([
+                  XoteJSX$Xote.jsx(Basefn.Kbd.make, {
+                    keys: Signal$Xote.make([
                       "Ctrl",
                       "V"
                     ], undefined, undefined),
@@ -2102,14 +2104,14 @@ function Demo$Demo(props) {
                   })
                 ])
               }),
-              Xote__JSX.Elements.jsxs("div", {
-                children: Xote__JSX.array([
-                  Xote__JSX.Elements.jsx("span", {
+              XoteJSX$Xote.Elements.jsxs("div", {
+                children: XoteJSX$Xote.array([
+                  XoteJSX$Xote.Elements.jsx("span", {
                     style: "color: #6b7280; margin-right: 0.5rem;",
-                    children: Xote.Component.text("Save:")
+                    children: Node$Xote.text("Save:")
                   }),
-                  Xote__JSX.jsx(Basefn.Kbd.make, {
-                    keys: Xote.Signal.make([
+                  XoteJSX$Xote.jsx(Basefn.Kbd.make, {
+                    keys: Signal$Xote.make([
                       "Ctrl",
                       "S"
                     ], undefined, undefined),
@@ -2117,14 +2119,14 @@ function Demo$Demo(props) {
                   })
                 ])
               }),
-              Xote__JSX.Elements.jsxs("div", {
-                children: Xote__JSX.array([
-                  Xote__JSX.Elements.jsx("span", {
+              XoteJSX$Xote.Elements.jsxs("div", {
+                children: XoteJSX$Xote.array([
+                  XoteJSX$Xote.Elements.jsx("span", {
                     style: "color: #6b7280; margin-right: 0.5rem;",
-                    children: Xote.Component.text("Select All:")
+                    children: Node$Xote.text("Select All:")
                   }),
-                  Xote__JSX.jsx(Basefn.Kbd.make, {
-                    keys: Xote.Signal.make([
+                  XoteJSX$Xote.jsx(Basefn.Kbd.make, {
+                    keys: Signal$Xote.make([
                       "Ctrl",
                       "A"
                     ], undefined, undefined),
@@ -2134,121 +2136,121 @@ function Demo$Demo(props) {
               })
             ])
           }),
-          Xote__JSX.Elements.jsxs("div", {
+          XoteJSX$Xote.Elements.jsxs("div", {
             style: "margin-top: 1rem;",
-            children: Xote__JSX.array([
-              Xote__JSX.jsx(Basefn.Kbd.make, {
-                keys: Xote.Signal.make([
+            children: XoteJSX$Xote.array([
+              XoteJSX$Xote.jsx(Basefn.Kbd.make, {
+                keys: Signal$Xote.make([
                   "Shift",
                   "Alt",
                   "F"
                 ], undefined, undefined),
                 size: "Sm"
               }),
-              Xote__JSX.Elements.jsx("span", {
+              XoteJSX$Xote.Elements.jsx("span", {
                 style: "color: #6b7280; margin-left: 0.5rem;",
-                children: Xote.Component.text("Format Document")
+                children: Node$Xote.text("Format Document")
               })
             ])
           })
         ])
       }),
-      Xote__JSX.jsx(Basefn.Separator.make, {
+      XoteJSX$Xote.jsx(Basefn.Separator.make, {
         orientation: "Horizontal",
         variant: "Solid"
       }),
-      Xote__JSX.Elements.jsxs("div", {
+      XoteJSX$Xote.Elements.jsxs("div", {
         style: "margin-top: 2rem;",
-        children: Xote__JSX.array([
-          Xote__JSX.jsx(Basefn.Typography.make, {
+        children: XoteJSX$Xote.array([
+          XoteJSX$Xote.jsx(Basefn.Typography.make, {
             text: {
               TAG: "Static",
               _0: "Typography"
             },
             variant: "H4"
           }),
-          Xote__JSX.Elements.jsx("p", {
+          XoteJSX$Xote.Elements.jsx("p", {
             style: "color: #6b7280; margin: 0.5rem 0 1rem 0;",
-            children: Xote.Component.text("Consistent text styling across your application.")
+            children: Node$Xote.text("Consistent text styling across your application.")
           }),
-          Xote__JSX.Elements.jsxs("div", {
+          XoteJSX$Xote.Elements.jsxs("div", {
             style: "display: flex; flex-direction: column; gap: 1rem;",
-            children: Xote__JSX.array([
-              Xote__JSX.jsx(Basefn.Typography.make, {
+            children: XoteJSX$Xote.array([
+              XoteJSX$Xote.jsx(Basefn.Typography.make, {
                 text: {
                   TAG: "Static",
                   _0: "Heading 1"
                 },
                 variant: "H1"
               }),
-              Xote__JSX.jsx(Basefn.Typography.make, {
+              XoteJSX$Xote.jsx(Basefn.Typography.make, {
                 text: {
                   TAG: "Static",
                   _0: "Heading 2"
                 },
                 variant: "H2"
               }),
-              Xote__JSX.jsx(Basefn.Typography.make, {
+              XoteJSX$Xote.jsx(Basefn.Typography.make, {
                 text: {
                   TAG: "Static",
                   _0: "Heading 3"
                 },
                 variant: "H3"
               }),
-              Xote__JSX.jsx(Basefn.Typography.make, {
+              XoteJSX$Xote.jsx(Basefn.Typography.make, {
                 text: {
                   TAG: "Static",
                   _0: "Heading 4"
                 },
                 variant: "H4"
               }),
-              Xote__JSX.jsx(Basefn.Typography.make, {
+              XoteJSX$Xote.jsx(Basefn.Typography.make, {
                 text: {
                   TAG: "Static",
                   _0: "Heading 5"
                 },
                 variant: "H5"
               }),
-              Xote__JSX.jsx(Basefn.Typography.make, {
+              XoteJSX$Xote.jsx(Basefn.Typography.make, {
                 text: {
                   TAG: "Static",
                   _0: "Heading 6"
                 },
                 variant: "H6"
               }),
-              Xote__JSX.jsx(Basefn.Separator.make, {
+              XoteJSX$Xote.jsx(Basefn.Separator.make, {
                 orientation: "Horizontal",
                 variant: "Dashed"
               }),
-              Xote__JSX.jsx(Basefn.Typography.make, {
+              XoteJSX$Xote.jsx(Basefn.Typography.make, {
                 text: {
                   TAG: "Static",
                   _0: "This is a regular paragraph with normal text styling and comfortable line height."
                 },
                 variant: "P"
               }),
-              Xote__JSX.jsx(Basefn.Typography.make, {
+              XoteJSX$Xote.jsx(Basefn.Typography.make, {
                 text: {
                   TAG: "Static",
                   _0: "This is a lead paragraph that stands out with larger text and is perfect for introductions."
                 },
                 variant: "Lead"
               }),
-              Xote__JSX.jsx(Basefn.Typography.make, {
+              XoteJSX$Xote.jsx(Basefn.Typography.make, {
                 text: {
                   TAG: "Static",
                   _0: "This is small text, useful for captions and helper text."
                 },
                 variant: "Small"
               }),
-              Xote__JSX.jsx(Basefn.Typography.make, {
+              XoteJSX$Xote.jsx(Basefn.Typography.make, {
                 text: {
                   TAG: "Static",
                   _0: "This is muted text with reduced emphasis."
                 },
                 variant: "Muted"
               }),
-              Xote__JSX.jsx(Basefn.Typography.make, {
+              XoteJSX$Xote.jsx(Basefn.Typography.make, {
                 text: {
                   TAG: "Static",
                   _0: "const hello = 'world'"
@@ -2259,25 +2261,25 @@ function Demo$Demo(props) {
           })
         ])
       }),
-      Xote__JSX.Elements.jsxs("div", {
+      XoteJSX$Xote.Elements.jsxs("div", {
         style: "margin-top: 3rem; padding: 1rem; background-color: #f3f4f6; border-radius: 0.5rem;",
-        children: Xote__JSX.array([
-          Xote__JSX.Elements.jsx("h3", {
+        children: XoteJSX$Xote.array([
+          XoteJSX$Xote.Elements.jsx("h3", {
             style: "margin-top: 0; color: #374151;",
-            children: Xote.Component.text("Form State (Real-time)")
+            children: Node$Xote.text("Form State (Real-time)")
           }),
-          Xote__JSX.Elements.jsx("pre", {
+          XoteJSX$Xote.Elements.jsx("pre", {
             style: "background-color: #1f2937; color: #f9fafb; padding: 1rem; border-radius: 0.25rem; overflow-x: auto; font-size: 0.875rem;",
-            children: Xote.Component.textSignal(() => `Name: ` + Xote.Signal.get(name) + `
-Email: ` + Xote.Signal.get(email) + `
-Password: ` + "*".repeat(Xote.Signal.get(password).length) + `
-Interest: ` + Xote.Signal.get(selectedOption) + `
-Color: ` + Xote.Signal.get(selectedColor) + `
-Message: ` + Xote.Signal.get(message).slice(0, 50) + (
-              Xote.Signal.get(message).length > 50 ? "..." : ""
+            children: Node$Xote.signalText(() => `Name: ` + Signal$Xote.get(name) + `
+Email: ` + Signal$Xote.get(email) + `
+Password: ` + "*".repeat(Signal$Xote.get(password).length) + `
+Interest: ` + Signal$Xote.get(selectedOption) + `
+Color: ` + Signal$Xote.get(selectedColor) + `
+Message: ` + Signal$Xote.get(message).slice(0, 50) + (
+              Signal$Xote.get(message).length > 50 ? "..." : ""
             ) + `
-Terms: ` + Stdlib_Bool.toString(Xote.Signal.get(agreeToTerms)) + `
-Newsletter: ` + Stdlib_Bool.toString(Xote.Signal.get(newsletter)))
+Terms: ` + Stdlib_Bool.toString(Signal$Xote.get(agreeToTerms)) + `
+Newsletter: ` + Stdlib_Bool.toString(Signal$Xote.get(newsletter)))
           })
         ])
       })
@@ -2289,7 +2291,7 @@ let Demo = {
   make: Demo$Demo
 };
 
-Xote.Component.mountById(Xote__JSX.jsx(Demo$Demo, {}), "root");
+Node$Xote.mountById(XoteJSX$Xote.jsx(Demo$Demo, {}), "root");
 
 export {
   Demo,