basefn 1.0.0

package/src/Demo.res.mjs

@@ -0,0 +1,2328 @@
+// Generated by ReScript, PLEASE EDIT WITH CARE
+
+import * as Xote from "xote/src/Xote.res.mjs";
+import * as Xote__JSX from "xote/src/Xote__JSX.res.mjs";
+import * as Basefn__Kbd from "./components/Basefn__Kbd.res.mjs";
+import * as Stdlib_Bool from "@rescript/runtime/lib/es6/Stdlib_Bool.js";
+import * as Basefn__Card from "./components/Basefn__Card.res.mjs";
+import * as Basefn__Grid from "./components/Basefn__Grid.res.mjs";
+import * as Basefn__Tabs from "./components/Basefn__Tabs.res.mjs";
+import * as Basefn__Alert from "./components/Basefn__Alert.res.mjs";
+import * as Basefn__Badge from "./components/Basefn__Badge.res.mjs";
+import * as Basefn__Input from "./components/Basefn__Input.res.mjs";
+import * as Basefn__Label from "./components/Basefn__Label.res.mjs";
+import * as Basefn__Modal from "./components/Basefn__Modal.res.mjs";
+import * as Basefn__Radio from "./components/Basefn__Radio.res.mjs";
+import * as Basefn__Toast from "./components/Basefn__Toast.res.mjs";
+import * as Basefn__Avatar from "./components/Basefn__Avatar.res.mjs";
+import * as Basefn__Button from "./components/Basefn__Button.res.mjs";
+import * as Basefn__Drawer from "./components/Basefn__Drawer.res.mjs";
+import * as Basefn__Select from "./components/Basefn__Select.res.mjs";
+import * as Basefn__Slider from "./components/Basefn__Slider.res.mjs";
+import * as Basefn__Switch from "./components/Basefn__Switch.res.mjs";
+import * as Basefn__Topbar from "./components/Basefn__Topbar.res.mjs";
+import * as Basefn__Sidebar from "./components/Basefn__Sidebar.res.mjs";
+import * as Basefn__Spinner from "./components/Basefn__Spinner.res.mjs";
+import * as Basefn__Stepper from "./components/Basefn__Stepper.res.mjs";
+import * as Basefn__Tooltip from "./components/Basefn__Tooltip.res.mjs";
+import * as Basefn__Checkbox from "./components/Basefn__Checkbox.res.mjs";
+import * as Basefn__Dropdown from "./components/Basefn__Dropdown.res.mjs";
+import * as Basefn__Progress from "./components/Basefn__Progress.res.mjs";
+import * as Basefn__Textarea from "./components/Basefn__Textarea.res.mjs";
+import * as Basefn__Timeline from "./components/Basefn__Timeline.res.mjs";
+import * as Primitive_option from "@rescript/runtime/lib/es6/Primitive_option.js";
+import * as Basefn__Accordion from "./components/Basefn__Accordion.res.mjs";
+import * as Basefn__AppLayout from "./components/Basefn__AppLayout.res.mjs";
+import * as Basefn__Separator from "./components/Basefn__Separator.res.mjs";
+import * as Basefn__Breadcrumb from "./components/Basefn__Breadcrumb.res.mjs";
+import * as Basefn__Typography from "./components/Basefn__Typography.res.mjs";
+
+import './styles/variables.css'
+;
+
+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 handleNameChange = evt => {
+    let target = evt.target;
+    Xote.Signal.set(name, target.value);
+  };
+  let handleEmailChange = evt => {
+    let target = evt.target;
+    Xote.Signal.set(email, target.value);
+  };
+  let handlePasswordChange = evt => {
+    let target = evt.target;
+    Xote.Signal.set(password, target.value);
+  };
+  let handleMessageChange = evt => {
+    let target = evt.target;
+    Xote.Signal.set(message, target.value);
+  };
+  let handleTermsChange = _evt => Xote.Signal.update(agreeToTerms, prev => !prev);
+  let handleNewsletterChange = _evt => Xote.Signal.update(newsletter, prev => !prev);
+  let handleColorChange = evt => {
+    let target = evt.target;
+    Xote.Signal.set(selectedColor, target.value);
+  };
+  let handleSubmit = _evt => {
+    Xote.Signal.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)));
+    setTimeout(() => {
+      Xote.Signal.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");
+    console.log("Form reset");
+  };
+  let selectOptions = [
+    {
+      value: "option1",
+      label: "Web Development"
+    },
+    {
+      value: "option2",
+      label: "Mobile Development"
+    },
+    {
+      value: "option3",
+      label: "UI/UX Design"
+    },
+    {
+      value: "option4",
+      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")
+      }),
+      Xote__JSX.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.")
+      }),
+      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, {
+                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, {
+                    text: {
+                      TAG: "Static",
+                      _0: "Crested Caracara"
+                    },
+                    variant: "Unstyled",
+                    class: "bold"
+                  }),
+                  Xote__JSX.jsx(Basefn__Typography.make, {
+                    text: {
+                      TAG: "Static",
+                      _0: "Bird of prey"
+                    },
+                    variant: "Small"
+                  })
+                ])
+              })
+            ])
+          }),
+          Xote__JSX.Elements.jsx("br", {}),
+          Xote__JSX.jsxs(Basefn__Grid.make, {
+            children: Xote__JSX.array([
+              Xote__JSX.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, {
+                  text: {
+                    TAG: "Static",
+                    _0: "Crested Caracara"
+                  },
+                  variant: "P",
+                  class: "bold"
+                })
+              })
+            ])
+          }),
+          Xote__JSX.Elements.jsx("br", {}),
+          Xote__JSX.jsxs(Basefn__Grid.make, {
+            children: Xote__JSX.array([
+              Xote__JSX.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, {
+                  text: {
+                    TAG: "Static",
+                    _0: "Crested Caracara"
+                  },
+                  variant: "Unstyled"
+                })
+              })
+            ])
+          }),
+          Xote__JSX.Elements.jsx("br", {}),
+          Xote__JSX.jsxs(Basefn__Grid.make, {
+            gap: "1rem",
+            children: Xote__JSX.array([
+              Xote__JSX.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, {
+                    text: {
+                      TAG: "Static",
+                      _0: "Crested Caracara"
+                    },
+                    variant: "H4"
+                  }),
+                  Xote__JSX.jsx(Basefn__Typography.make, {
+                    text: {
+                      TAG: "Static",
+                      _0: "Bird of prey"
+                    },
+                    variant: "H6",
+                    class: "muted font-normal"
+                  })
+                ])
+              })
+            ])
+          })
+        ]),
+        style: "margin-bottom: 2rem;"
+      }),
+      Xote__JSX.jsxs(Basefn__Card.make, {
+        children: Xote__JSX.array([
+          Xote__JSX.jsx(Basefn__Label.make, {
+            text: "Full Name",
+            required: true
+          }),
+          Xote__JSX.jsx(Basefn__Input.make, {
+            value: {
+              TAG: "Reactive",
+              _0: name
+            },
+            onInput: handleNameChange,
+            type_: "Text",
+            placeholder: "John Doe"
+          }),
+          Xote__JSX.Elements.jsx("br", {}),
+          Xote__JSX.jsx(Basefn__Label.make, {
+            text: "Email Address",
+            required: true
+          }),
+          Xote__JSX.jsx(Basefn__Input.make, {
+            value: {
+              TAG: "Reactive",
+              _0: email
+            },
+            onInput: handleEmailChange,
+            type_: "Email",
+            placeholder: "john@example.com"
+          }),
+          Xote__JSX.Elements.jsx("br", {}),
+          Xote__JSX.jsx(Basefn__Label.make, {
+            text: "Password",
+            required: true
+          }),
+          Xote__JSX.jsx(Basefn__Input.make, {
+            value: {
+              TAG: "Reactive",
+              _0: password
+            },
+            onInput: handlePasswordChange,
+            type_: "Password",
+            placeholder: "Enter a secure password"
+          })
+        ])
+      }),
+      Xote__JSX.Elements.jsx("br", {}),
+      Xote__JSX.jsxs(Basefn__Card.make, {
+        children: Xote__JSX.array([
+          Xote__JSX.jsx(Basefn__Label.make, {
+            text: "Area of Interest",
+            required: false
+          }),
+          Xote__JSX.jsx(Basefn__Select.make, {
+            value: selectedOption,
+            onChange: e => {
+              let target = e.target;
+              Xote.Signal.set(selectedOption, target.value);
+            },
+            options: selectOptionsSignal
+          }),
+          Xote__JSX.Elements.jsx("br", {}),
+          Xote__JSX.jsx(Basefn__Label.make, {
+            text: "Favorite Color",
+            required: false
+          }),
+          Xote__JSX.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),
+                onChange: handleColorChange,
+                value: "blue",
+                label: "Blue",
+                name: "radio"
+              }),
+              Xote__JSX.jsx(Basefn__Radio.make, {
+                checked: Xote.Computed.make(() => Xote.Signal.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),
+                onChange: handleColorChange,
+                value: "red",
+                label: "Red",
+                name: "radio"
+              })
+            ])
+          })
+        ])
+      }),
+      Xote__JSX.Elements.jsx("br", {}),
+      Xote__JSX.jsxs(Basefn__Card.make, {
+        children: Xote__JSX.array([
+          Xote__JSX.jsx(Basefn__Label.make, {
+            text: "Message",
+            required: false
+          }),
+          Xote__JSX.jsx(Basefn__Textarea.make, {
+            value: {
+              TAG: "Reactive",
+              _0: message
+            },
+            onInput: handleMessageChange,
+            placeholder: "Tell us more about yourself..."
+          })
+        ])
+      }),
+      Xote__JSX.Elements.jsx("br", {}),
+      Xote__JSX.jsxs(Basefn__Card.make, {
+        children: Xote__JSX.array([
+          Xote__JSX.Elements.jsx("div", {
+            style: "margin-bottom: 1.5rem;",
+            children: Xote__JSX.jsx(Basefn__Checkbox.make, {
+              checked: agreeToTerms,
+              onChange: handleTermsChange,
+              label: "I agree to the terms and conditions"
+            })
+          }),
+          Xote__JSX.Elements.jsx("div", {
+            style: "margin-bottom: 2rem;",
+            children: Xote__JSX.jsx(Basefn__Checkbox.make, {
+              checked: newsletter,
+              onChange: handleNewsletterChange,
+              label: "Subscribe to our newsletter"
+            })
+          }),
+          Xote__JSX.Elements.jsxs("div", {
+            style: "display: flex; gap: 1rem; flex-wrap: wrap;",
+            children: Xote__JSX.array([
+              {
+                TAG: "SignalFragment",
+                _0: Xote.Computed.make(() => [Xote__JSX.jsx(Basefn__Button.make, {
+                    disabled: {
+                      TAG: "Reactive",
+                      _0: isSubmitting
+                    },
+                    label: Xote.Signal.get(isSubmitting) ? ({
+                        TAG: "Static",
+                        _0: "Submitting..."
+                      }) : ({
+                        TAG: "Static",
+                        _0: "Submit Form"
+                      }),
+                    onClick: handleSubmit,
+                    variant: "Primary"
+                  })], undefined)
+              },
+              Xote__JSX.jsx(Basefn__Button.make, {
+                disabled: {
+                  TAG: "Reactive",
+                  _0: isSubmitting
+                },
+                label: {
+                  TAG: "Static",
+                  _0: "reset"
+                },
+                onClick: handleReset,
+                variant: "Secondary"
+              }),
+              Xote__JSX.jsx(Basefn__Button.make, {
+                disabled: {
+                  TAG: "Reactive",
+                  _0: isSubmitting
+                },
+                label: {
+                  TAG: "Static",
+                  _0: "Cancel"
+                },
+                variant: "Ghost"
+              })
+            ])
+          })
+        ])
+      }),
+      Xote__JSX.Elements.jsxs("div", {
+        style: "margin-top: 2rem;",
+        children: Xote__JSX.array([
+          Xote__JSX.jsx(Basefn__Typography.make, {
+            text: {
+              TAG: "Static",
+              _0: "Alerts"
+            },
+            variant: "H4"
+          }),
+          Xote__JSX.Elements.jsx("p", {
+            style: "color: #6b7280; margin: 0.5rem 0 1rem 0;",
+            children: Xote.Component.text("Display important messages with different severity levels.")
+          }),
+          Xote__JSX.Elements.jsxs("div", {
+            style: "display: flex; flex-direction: column; gap: 1rem;",
+            children: Xote__JSX.array([
+              Xote__JSX.jsx(Basefn__Alert.make, {
+                title: "Information",
+                message: Xote.Signal.make("This is an informational alert message.", undefined, undefined),
+                variant: "Info"
+              }),
+              Xote__JSX.jsx(Basefn__Alert.make, {
+                title: "Success",
+                message: Xote.Signal.make("Your changes have been saved successfully!", undefined, undefined),
+                variant: "Success"
+              }),
+              Xote__JSX.jsx(Basefn__Alert.make, {
+                title: "Warning",
+                message: Xote.Signal.make("Please review your input before proceeding.", undefined, undefined),
+                variant: "Warning"
+              }),
+              Xote__JSX.jsx(Basefn__Alert.make, {
+                title: "Error",
+                message: Xote.Signal.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),
+                variant: "Info",
+                dismissible: true
+              })
+            ])
+          })
+        ])
+      }),
+      Xote__JSX.Elements.jsxs("div", {
+        style: "margin-top: 2rem;",
+        children: Xote__JSX.array([
+          Xote__JSX.jsx(Basefn__Typography.make, {
+            text: {
+              TAG: "Static",
+              _0: "Progress"
+            },
+            variant: "H4"
+          }),
+          Xote__JSX.Elements.jsx("p", {
+            style: "color: #6b7280; margin: 0.5rem 0 1rem 0;",
+            children: Xote.Component.text("Show progress indicators for ongoing operations.")
+          }),
+          Xote__JSX.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),
+                  variant: "Primary",
+                  showLabel: true
+                })
+              }),
+              Xote__JSX.Elements.jsx("div", {
+                children: Xote__JSX.jsx(Basefn__Progress.make, {
+                  value: Xote.Signal.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),
+                  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),
+                  variant: "Success",
+                  showLabel: true,
+                  label: "Complete"
+                })
+              }),
+              Xote__JSX.Elements.jsxs("div", {
+                children: Xote__JSX.array([
+                  Xote__JSX.jsx(Basefn__Progress.make, {
+                    value: downloadProgress,
+                    variant: "Primary",
+                    showLabel: true,
+                    label: "Dynamic Progress"
+                  }),
+                  Xote__JSX.jsx(Basefn__Button.make, {
+                    label: {
+                      TAG: "Static",
+                      _0: "Simulate Progress"
+                    },
+                    onClick: _evt => {
+                      Xote.Signal.set(downloadProgress, 0.0);
+                      let intervalId = {
+                        contents: undefined
+                      };
+                      let id = setInterval(() => Xote.Signal.update(downloadProgress, prev => {
+                        let next = prev + 5.0;
+                        if (next < 100.0) {
+                          return next;
+                        }
+                        let id = intervalId.contents;
+                        if (id !== undefined) {
+                          clearInterval(Primitive_option.valFromOption(id));
+                        }
+                        return 100.0;
+                      }), 100);
+                      intervalId.contents = Primitive_option.some(id);
+                    },
+                    variant: "Secondary"
+                  })
+                ])
+              }),
+              Xote__JSX.Elements.jsxs("div", {
+                children: Xote__JSX.array([
+                  Xote__JSX.Elements.jsx("p", {
+                    style: "color: #6b7280; margin-bottom: 0.5rem;",
+                    children: Xote.Component.text("Indeterminate progress:")
+                  }),
+                  Xote__JSX.jsx(Basefn__Progress.make, {
+                    value: Xote.Signal.make(0.0, undefined, undefined),
+                    variant: "Primary",
+                    indeterminate: true
+                  })
+                ])
+              })
+            ])
+          })
+        ])
+      }),
+      Xote__JSX.Elements.jsxs("div", {
+        style: "margin-top: 2rem;",
+        children: Xote__JSX.array([
+          Xote__JSX.jsx(Basefn__Typography.make, {
+            text: {
+              TAG: "Static",
+              _0: "Tabs"
+            },
+            variant: "H4"
+          }),
+          Xote__JSX.Elements.jsx("p", {
+            style: "color: #6b7280; margin: 0.5rem 0 1rem 0;",
+            children: Xote.Component.text("Organize content into tabbed sections.")
+          }),
+          Xote__JSX.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, {
+                      text: {
+                        TAG: "Static",
+                        _0: "Account Settings"
+                      },
+                      variant: "H5"
+                    }),
+                    Xote__JSX.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.")
+                    })
+                  ])
+                })
+              },
+              {
+                value: "security",
+                label: "Security",
+                content: Xote__JSX.Elements.jsxs("div", {
+                  children: Xote__JSX.array([
+                    Xote__JSX.jsx(Basefn__Typography.make, {
+                      text: {
+                        TAG: "Static",
+                        _0: "Security Settings"
+                      },
+                      variant: "H5"
+                    }),
+                    Xote__JSX.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.")
+                    }),
+                    Xote__JSX.Elements.jsx("div", {
+                      style: "margin-top: 1rem;",
+                      children: Xote__JSX.jsx(Basefn__Checkbox.make, {
+                        checked: Xote.Signal.make(true, undefined, undefined),
+                        onChange: param => {},
+                        label: "Enable two-factor authentication"
+                      })
+                    })
+                  ])
+                })
+              },
+              {
+                value: "notifications",
+                label: "Notifications",
+                content: Xote__JSX.Elements.jsxs("div", {
+                  children: Xote__JSX.array([
+                    Xote__JSX.jsx(Basefn__Typography.make, {
+                      text: {
+                        TAG: "Static",
+                        _0: "Notification Preferences"
+                      },
+                      variant: "H5"
+                    }),
+                    Xote__JSX.Elements.jsx("p", {
+                      style: "color: #6b7280; margin-top: 0.5rem;",
+                      children: Xote.Component.text("Choose how you want to receive notifications.")
+                    }),
+                    Xote__JSX.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),
+                          onChange: param => {},
+                          label: "Email notifications"
+                        }),
+                        Xote__JSX.jsx(Basefn__Checkbox.make, {
+                          checked: Xote.Signal.make(false, undefined, undefined),
+                          onChange: param => {},
+                          label: "SMS notifications"
+                        }),
+                        Xote__JSX.jsx(Basefn__Checkbox.make, {
+                          checked: Xote.Signal.make(true, undefined, undefined),
+                          onChange: param => {},
+                          label: "Push notifications"
+                        })
+                      ])
+                    })
+                  ])
+                })
+              },
+              {
+                value: "billing",
+                label: "Billing",
+                content: Xote__JSX.Elements.jsxs("div", {
+                  children: Xote__JSX.array([
+                    Xote__JSX.jsx(Basefn__Typography.make, {
+                      text: {
+                        TAG: "Static",
+                        _0: "Billing Information"
+                      },
+                      variant: "H5"
+                    }),
+                    Xote__JSX.Elements.jsx("p", {
+                      style: "color: #6b7280; margin-top: 0.5rem;",
+                      children: Xote.Component.text("View and manage your billing information, payment methods, and invoices.")
+                    })
+                  ])
+                }),
+                disabled: true
+              }
+            ]
+          })
+        ])
+      }),
+      Xote__JSX.Elements.jsxs("div", {
+        style: "margin-top: 2rem;",
+        children: Xote__JSX.array([
+          Xote__JSX.jsx(Basefn__Typography.make, {
+            text: {
+              TAG: "Static",
+              _0: "Accordion"
+            },
+            variant: "H4"
+          }),
+          Xote__JSX.Elements.jsx("p", {
+            style: "color: #6b7280; margin: 0.5rem 0 1rem 0;",
+            children: Xote.Component.text("Collapsible content sections with expand/collapse functionality.")
+          }),
+          Xote__JSX.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.")
+                })
+              },
+              {
+                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:")
+                    }),
+                    Xote__JSX.Elements.jsx("br", {}),
+                    Xote__JSX.jsx(Basefn__Typography.make, {
+                      text: {
+                        TAG: "Static",
+                        _0: "npm install basefn-ui"
+                      },
+                      variant: "Code"
+                    })
+                  ])
+                })
+              },
+              {
+                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.")
+                })
+              },
+              {
+                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.")
+                })
+              }
+            ],
+            defaultOpen: ["faq1"],
+            multiple: true
+          })
+        ])
+      }),
+      Xote__JSX.Elements.jsxs("div", {
+        style: "margin-top: 2rem;",
+        children: Xote__JSX.array([
+          Xote__JSX.jsx(Basefn__Typography.make, {
+            text: {
+              TAG: "Static",
+              _0: "Breadcrumb"
+            },
+            variant: "H4"
+          }),
+          Xote__JSX.Elements.jsx("p", {
+            style: "color: #6b7280; margin: 0.5rem 0 1rem 0;",
+            children: Xote.Component.text("Navigation breadcrumbs to show the current page hierarchy.")
+          }),
+          Xote__JSX.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", {
+                    style: "color: #6b7280; margin-bottom: 0.5rem; font-size: 0.875rem;",
+                    children: Xote.Component.text("Default separator:")
+                  }),
+                  Xote__JSX.jsx(Basefn__Breadcrumb.make, {
+                    items: [
+                      {
+                        label: "Home",
+                        href: "#",
+                        onClick: undefined
+                      },
+                      {
+                        label: "Products",
+                        href: "#",
+                        onClick: undefined
+                      },
+                      {
+                        label: "Electronics",
+                        href: "#",
+                        onClick: undefined
+                      },
+                      {
+                        label: "Laptops",
+                        href: undefined,
+                        onClick: undefined
+                      }
+                    ]
+                  })
+                ])
+              }),
+              Xote__JSX.Elements.jsxs("div", {
+                children: Xote__JSX.array([
+                  Xote__JSX.Elements.jsx("p", {
+                    style: "color: #6b7280; margin-bottom: 0.5rem; font-size: 0.875rem;",
+                    children: Xote.Component.text("Custom separator:")
+                  }),
+                  Xote__JSX.jsx(Basefn__Breadcrumb.make, {
+                    items: [
+                      {
+                        label: "Home",
+                        href: "#",
+                        onClick: undefined
+                      },
+                      {
+                        label: "Settings",
+                        href: "#",
+                        onClick: undefined
+                      },
+                      {
+                        label: "Account",
+                        href: undefined,
+                        onClick: undefined
+                      }
+                    ],
+                    separator: ">"
+                  })
+                ])
+              }),
+              Xote__JSX.Elements.jsxs("div", {
+                children: Xote__JSX.array([
+                  Xote__JSX.Elements.jsx("p", {
+                    style: "color: #6b7280; margin-bottom: 0.5rem; font-size: 0.875rem;",
+                    children: Xote.Component.text("With onClick handlers:")
+                  }),
+                  Xote__JSX.jsx(Basefn__Breadcrumb.make, {
+                    items: [
+                      {
+                        label: "Dashboard",
+                        href: undefined,
+                        onClick: () => {
+                          console.log("Navigate to Dashboard");
+                        }
+                      },
+                      {
+                        label: "Users",
+                        href: undefined,
+                        onClick: () => {
+                          console.log("Navigate to Users");
+                        }
+                      },
+                      {
+                        label: "Profile",
+                        href: undefined,
+                        onClick: undefined
+                      }
+                    ],
+                    separator: "\u2022"
+                  })
+                ])
+              })
+            ])
+          })
+        ])
+      }),
+      Xote__JSX.jsx(Basefn__Separator.make, {
+        orientation: "Horizontal",
+        variant: "Solid",
+        label: "Tier 3"
+      }),
+      Xote__JSX.Elements.jsxs("div", {
+        style: "margin-top: 3rem;",
+        children: Xote__JSX.array([
+          Xote__JSX.jsx(Basefn__Typography.make, {
+            text: {
+              TAG: "Static",
+              _0: "Interactive Components"
+            },
+            variant: "H2",
+            align: "Left"
+          }),
+          Xote__JSX.jsx(Basefn__Typography.make, {
+            text: {
+              TAG: "Static",
+              _0: "Explore the Tier 3 advanced interactive components below."
+            },
+            variant: "Muted"
+          })
+        ])
+      }),
+      Xote__JSX.Elements.jsxs("div", {
+        style: "margin-top: 2rem;",
+        children: Xote__JSX.array([
+          Xote__JSX.jsx(Basefn__Typography.make, {
+            text: {
+              TAG: "Static",
+              _0: "Modal / Dialog"
+            },
+            variant: "H4"
+          }),
+          Xote__JSX.Elements.jsx("p", {
+            style: "color: #6b7280; margin: 0.5rem 0 1rem 0;",
+            children: Xote.Component.text("Display content in an overlay dialog.")
+          }),
+          Xote__JSX.jsx(Basefn__Button.make, {
+            label: {
+              TAG: "Static",
+              _0: "Open Modal"
+            },
+            onClick: param => Xote.Signal.set(isModalOpen, true),
+            variant: "Primary"
+          }),
+          Xote__JSX.jsxs(Basefn__Modal.make, {
+            isOpen: isModalOpen,
+            onClose: () => Xote.Signal.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.")
+              }),
+              Xote__JSX.Elements.jsx("p", {
+                style: "margin-top: 1rem;",
+                children: Xote.Component.text("Modals are great for focused user interactions and confirmations.")
+              })
+            ]),
+            footer: Xote__JSX.Elements.jsxs("div", {
+              style: "display: flex; gap: 0.5rem;",
+              children: Xote__JSX.array([
+                Xote__JSX.jsx(Basefn__Button.make, {
+                  label: {
+                    TAG: "Static",
+                    _0: "Cancel"
+                  },
+                  onClick: param => Xote.Signal.set(isModalOpen, false),
+                  variant: "Ghost"
+                }),
+                Xote__JSX.jsx(Basefn__Button.make, {
+                  label: {
+                    TAG: "Static",
+                    _0: "Confirm"
+                  },
+                  onClick: param => {
+                    console.log("Confirmed!");
+                    Xote.Signal.set(isModalOpen, false);
+                  },
+                  variant: "Primary"
+                })
+              ])
+            })
+          })
+        ])
+      }),
+      Xote__JSX.Elements.jsxs("div", {
+        style: "margin-top: 2rem;",
+        children: Xote__JSX.array([
+          Xote__JSX.jsx(Basefn__Typography.make, {
+            text: {
+              TAG: "Static",
+              _0: "Switch / Toggle"
+            },
+            variant: "H4"
+          }),
+          Xote__JSX.Elements.jsx("p", {
+            style: "color: #6b7280; margin: 0.5rem 0 1rem 0;",
+            children: Xote.Component.text("Binary on/off switches for settings and preferences.")
+          }),
+          Xote__JSX.Elements.jsxs("div", {
+            style: "display: flex; flex-direction: column; gap: 1rem;",
+            children: Xote__JSX.array([
+              Xote__JSX.jsx(Basefn__Switch.make, {
+                checked: switchEnabled,
+                label: "Enable feature"
+              }),
+              Xote__JSX.jsx(Basefn__Switch.make, {
+                checked: darkModeSwitch,
+                label: "Dark mode",
+                size: "Lg"
+              }),
+              Xote__JSX.jsx(Basefn__Switch.make, {
+                checked: notificationsSwitch,
+                label: "Push notifications",
+                size: "Sm"
+              }),
+              Xote__JSX.jsx(Basefn__Switch.make, {
+                checked: Xote.Signal.make(true, undefined, undefined),
+                label: "Disabled switch",
+                disabled: true,
+                size: "Md"
+              })
+            ])
+          })
+        ])
+      }),
+      Xote__JSX.Elements.jsxs("div", {
+        style: "margin-top: 2rem;",
+        children: Xote__JSX.array([
+          Xote__JSX.jsx(Basefn__Typography.make, {
+            text: {
+              TAG: "Static",
+              _0: "Slider"
+            },
+            variant: "H4"
+          }),
+          Xote__JSX.Elements.jsx("p", {
+            style: "color: #6b7280; margin: 0.5rem 0 1rem 0;",
+            children: Xote.Component.text("Select a value from a range.")
+          }),
+          Xote__JSX.Elements.jsxs("div", {
+            style: "display: flex; flex-direction: column; gap: 2rem;",
+            children: Xote__JSX.array([
+              Xote__JSX.jsx(Basefn__Slider.make, {
+                value: sliderValue,
+                label: "Volume",
+                showValue: true
+              }),
+              Xote__JSX.jsx(Basefn__Slider.make, {
+                value: Xote.Signal.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),
+                min: 0.0,
+                max: 5.0,
+                step: 1.0,
+                label: "Rating",
+                showValue: true,
+                markers: [
+                  "0",
+                  "1",
+                  "2",
+                  "3",
+                  "4",
+                  "5"
+                ]
+              })
+            ])
+          })
+        ])
+      }),
+      Xote__JSX.Elements.jsxs("div", {
+        style: "margin-top: 2rem;",
+        children: Xote__JSX.array([
+          Xote__JSX.jsx(Basefn__Typography.make, {
+            text: {
+              TAG: "Static",
+              _0: "Tooltip"
+            },
+            variant: "H4"
+          }),
+          Xote__JSX.Elements.jsx("p", {
+            style: "color: #6b7280; margin: 0.5rem 0 1rem 0;",
+            children: Xote.Component.text("Show contextual information on hover.")
+          }),
+          Xote__JSX.Elements.jsxs("div", {
+            style: "display: flex; gap: 1rem; flex-wrap: wrap;",
+            children: Xote__JSX.array([
+              Xote__JSX.jsx(Basefn__Tooltip.make, {
+                content: "This appears on top",
+                position: "Top",
+                children: Xote__JSX.jsx(Basefn__Button.make, {
+                  label: {
+                    TAG: "Static",
+                    _0: "Hover me )(top)"
+                  },
+                  variant: "Secondary"
+                })
+              }),
+              Xote__JSX.jsx(Basefn__Tooltip.make, {
+                content: "This appears on bottom",
+                position: "Bottom",
+                children: Xote__JSX.jsx(Basefn__Button.make, {
+                  label: {
+                    TAG: "Static",
+                    _0: "Hover me )(bottom)"
+                  },
+                  variant: "Secondary"
+                })
+              }),
+              Xote__JSX.jsx(Basefn__Tooltip.make, {
+                content: "This appears on left",
+                position: "Left",
+                children: Xote__JSX.jsx(Basefn__Button.make, {
+                  label: {
+                    TAG: "Static",
+                    _0: "Hover me )(left)"
+                  },
+                  variant: "Secondary"
+                })
+              }),
+              Xote__JSX.jsx(Basefn__Tooltip.make, {
+                content: "This appears on right",
+                position: "Right",
+                children: Xote__JSX.jsx(Basefn__Button.make, {
+                  label: {
+                    TAG: "Static",
+                    _0: "Hover me )(right)"
+                  },
+                  variant: "Secondary"
+                })
+              })
+            ])
+          })
+        ])
+      }),
+      Xote__JSX.Elements.jsxs("div", {
+        style: "margin-top: 2rem;",
+        children: Xote__JSX.array([
+          Xote__JSX.jsx(Basefn__Typography.make, {
+            text: {
+              TAG: "Static",
+              _0: "Dropdown Menu"
+            },
+            variant: "H4"
+          }),
+          Xote__JSX.Elements.jsx("p", {
+            style: "color: #6b7280; margin: 0.5rem 0 1rem 0;",
+            children: Xote.Component.text("Contextual menu with actions.")
+          }),
+          Xote__JSX.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, {
+                  label: {
+                    TAG: "Static",
+                    _0: "Actions"
+                  },
+                  variant: "Secondary"
+                }),
+                items: [
+                  {
+                    TAG: "Item",
+                    _0: {
+                      label: "Edit",
+                      onClick: () => {
+                        console.log("Edit clicked");
+                      }
+                    }
+                  },
+                  {
+                    TAG: "Item",
+                    _0: {
+                      label: "Duplicate",
+                      onClick: () => {
+                        console.log("Duplicate clicked");
+                      }
+                    }
+                  },
+                  "Separator",
+                  {
+                    TAG: "Item",
+                    _0: {
+                      label: "Archive",
+                      onClick: () => {
+                        console.log("Archive clicked");
+                      }
+                    }
+                  },
+                  {
+                    TAG: "Item",
+                    _0: {
+                      label: "Delete",
+                      onClick: () => {
+                        console.log("Delete clicked");
+                      },
+                      danger: true
+                    }
+                  }
+                ]
+              }),
+              Xote__JSX.jsx(Basefn__Dropdown.make, {
+                trigger: Xote__JSX.jsx(Basefn__Button.make, {
+                  label: {
+                    TAG: "Static",
+                    _0: "More options"
+                  },
+                  variant: "Ghost"
+                }),
+                items: [
+                  {
+                    TAG: "Item",
+                    _0: {
+                      label: "Settings",
+                      onClick: () => {
+                        console.log("Settings");
+                      }
+                    }
+                  },
+                  {
+                    TAG: "Item",
+                    _0: {
+                      label: "Help",
+                      onClick: () => {
+                        console.log("Help");
+                      }
+                    }
+                  },
+                  "Separator",
+                  {
+                    TAG: "Item",
+                    _0: {
+                      label: "Disabled item",
+                      onClick: () => {
+                        console.log("Should not fire");
+                      },
+                      disabled: true
+                    }
+                  }
+                ],
+                align: "right"
+              })
+            ])
+          })
+        ])
+      }),
+      Xote__JSX.Elements.jsxs("div", {
+        style: "margin-top: 2rem;",
+        children: Xote__JSX.array([
+          Xote__JSX.jsx(Basefn__Typography.make, {
+            text: {
+              TAG: "Static",
+              _0: "Toast / Notification"
+            },
+            variant: "H4"
+          }),
+          Xote__JSX.Elements.jsx("p", {
+            style: "color: #6b7280; margin: 0.5rem 0 1rem 0;",
+            children: Xote.Component.text("Temporary notification messages.")
+          }),
+          Xote__JSX.Elements.jsx("div", {
+            style: "display: flex; gap: 0.75rem; flex-wrap: wrap;",
+            children: Xote__JSX.jsx(Basefn__Button.make, {
+              label: {
+                TAG: "Static",
+                _0: "Show Toast"
+              },
+              onClick: param => Xote.Signal.set(toastVisible, true),
+              variant: "Primary"
+            })
+          }),
+          Xote__JSX.jsx(Basefn__Toast.make, {
+            title: "Success!",
+            message: "Your changes have been saved successfully.",
+            variant: "Success",
+            isVisible: toastVisible,
+            onClose: () => {
+              console.log("Toast closed");
+            }
+          })
+        ])
+      }),
+      Xote__JSX.jsx(Basefn__Separator.make, {
+        orientation: "Horizontal",
+        variant: "Solid",
+        label: "Tier 4"
+      }),
+      Xote__JSX.Elements.jsxs("div", {
+        style: "margin-top: 3rem;",
+        children: Xote__JSX.array([
+          Xote__JSX.jsx(Basefn__Typography.make, {
+            text: {
+              TAG: "Static",
+              _0: "Navigation & Layout"
+            },
+            variant: "H2",
+            align: "Left"
+          }),
+          Xote__JSX.jsx(Basefn__Typography.make, {
+            text: {
+              TAG: "Static",
+              _0: "Explore the Tier 4 navigation and layout components below."
+            },
+            variant: "Muted"
+          })
+        ])
+      }),
+      Xote__JSX.Elements.jsxs("div", {
+        style: "margin-top: 2rem;",
+        children: Xote__JSX.array([
+          Xote__JSX.jsx(Basefn__Typography.make, {
+            text: {
+              TAG: "Static",
+              _0: "Stepper"
+            },
+            variant: "H4"
+          }),
+          Xote__JSX.Elements.jsx("p", {
+            style: "color: #6b7280; margin: 0.5rem 0 1rem 0;",
+            children: Xote.Component.text("Multi-step process indicator with progress tracking.")
+          }),
+          Xote__JSX.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", {
+                    style: "color: #6b7280; margin-bottom: 1rem; font-size: 0.875rem;",
+                    children: Xote.Component.text("Horizontal stepper:")
+                  }),
+                  Xote__JSX.jsx(Basefn__Stepper.make, {
+                    steps: [
+                      {
+                        title: "Account Info",
+                        description: "Enter your details",
+                        status: "Completed"
+                      },
+                      {
+                        title: "Verification",
+                        description: "Verify your email",
+                        status: "Active"
+                      },
+                      {
+                        title: "Preferences",
+                        description: "Set your preferences",
+                        status: "Inactive"
+                      },
+                      {
+                        title: "Complete",
+                        description: "All done!",
+                        status: "Inactive"
+                      }
+                    ],
+                    currentStep: currentStep,
+                    orientation: "Horizontal",
+                    onStepClick: step => {
+                      Xote.Signal.set(currentStep, step);
+                      console.log("Step clicked:", step);
+                    }
+                  })
+                ])
+              }),
+              Xote__JSX.Elements.jsxs("div", {
+                children: Xote__JSX.array([
+                  Xote__JSX.Elements.jsx("p", {
+                    style: "color: #6b7280; margin-bottom: 1rem; font-size: 0.875rem;",
+                    children: Xote.Component.text("Vertical stepper:")
+                  }),
+                  Xote__JSX.jsx(Basefn__Stepper.make, {
+                    steps: [
+                      {
+                        title: "Order Placed",
+                        description: "Your order has been confirmed",
+                        status: "Completed"
+                      },
+                      {
+                        title: "Processing",
+                        description: "We are preparing your order",
+                        status: "Completed"
+                      },
+                      {
+                        title: "Shipped",
+                        description: "Your order is on the way",
+                        status: "Active"
+                      },
+                      {
+                        title: "Delivered",
+                        description: "Enjoy your purchase!",
+                        status: "Inactive"
+                      }
+                    ],
+                    currentStep: Xote.Signal.make(2, undefined, undefined),
+                    orientation: "Vertical"
+                  })
+                ])
+              })
+            ])
+          })
+        ])
+      }),
+      Xote__JSX.Elements.jsxs("div", {
+        style: "margin-top: 2rem;",
+        children: Xote__JSX.array([
+          Xote__JSX.jsx(Basefn__Typography.make, {
+            text: {
+              TAG: "Static",
+              _0: "Drawer / Sidebar"
+            },
+            variant: "H4"
+          }),
+          Xote__JSX.Elements.jsx("p", {
+            style: "color: #6b7280; margin: 0.5rem 0 1rem 0;",
+            children: Xote.Component.text("Slide-in panels for additional content.")
+          }),
+          Xote__JSX.Elements.jsx("div", {
+            style: "display: flex; gap: 0.75rem; flex-wrap: wrap;",
+            children: Xote__JSX.jsx(Basefn__Button.make, {
+              label: {
+                TAG: "Static",
+                _0: "Open Drawer"
+              },
+              onClick: param => Xote.Signal.set(isDrawerOpen, true),
+              variant: "Primary"
+            })
+          }),
+          Xote__JSX.jsx(Basefn__Drawer.make, {
+            isOpen: isDrawerOpen,
+            onClose: () => Xote.Signal.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, {
+                  text: {
+                    TAG: "Static",
+                    _0: "Drawer Content"
+                  },
+                  variant: "H5"
+                }),
+                Xote__JSX.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.")
+                }),
+                Xote__JSX.Elements.jsxs("div", {
+                  style: "margin-top: 1.5rem;",
+                  children: Xote__JSX.array([
+                    Xote__JSX.jsx(Basefn__Label.make, {
+                      text: "Name"
+                    }),
+                    Xote__JSX.jsx(Basefn__Input.make, {
+                      value: {
+                        TAG: "Static",
+                        _0: ""
+                      },
+                      type_: "Text",
+                      placeholder: "Enter your name"
+                    })
+                  ])
+                }),
+                Xote__JSX.Elements.jsxs("div", {
+                  style: "margin-top: 1rem;",
+                  children: Xote__JSX.array([
+                    Xote__JSX.jsx(Basefn__Label.make, {
+                      text: "Email"
+                    }),
+                    Xote__JSX.jsx(Basefn__Input.make, {
+                      value: {
+                        TAG: "Static",
+                        _0: ""
+                      },
+                      type_: "Email",
+                      placeholder: "Enter your email"
+                    })
+                  ])
+                }),
+                Xote__JSX.Elements.jsxs("div", {
+                  style: "margin-top: 1rem;",
+                  children: Xote__JSX.array([
+                    Xote__JSX.jsx(Basefn__Label.make, {
+                      text: "Message"
+                    }),
+                    Xote__JSX.jsx(Basefn__Textarea.make, {
+                      value: {
+                        TAG: "Static",
+                        _0: ""
+                      },
+                      placeholder: "Enter a message"
+                    })
+                  ])
+                })
+              ])
+            }),
+            footer: Xote__JSX.Elements.jsxs("div", {
+              style: "display: flex; gap: 0.5rem; justify-content: flex-end;",
+              children: Xote__JSX.array([
+                Xote__JSX.jsx(Basefn__Button.make, {
+                  label: {
+                    TAG: "Static",
+                    _0: "Cancel"
+                  },
+                  onClick: param => Xote.Signal.set(isDrawerOpen, false),
+                  variant: "Ghost"
+                }),
+                Xote__JSX.jsx(Basefn__Button.make, {
+                  label: {
+                    TAG: "Static",
+                    _0: "Save"
+                  },
+                  onClick: param => {
+                    console.log("Saved!");
+                    Xote.Signal.set(isDrawerOpen, false);
+                  },
+                  variant: "Primary"
+                })
+              ])
+            })
+          })
+        ])
+      }),
+      Xote__JSX.Elements.jsxs("div", {
+        style: "margin-top: 2rem;",
+        children: Xote__JSX.array([
+          Xote__JSX.jsx(Basefn__Typography.make, {
+            text: {
+              TAG: "Static",
+              _0: "Timeline"
+            },
+            variant: "H4"
+          }),
+          Xote__JSX.Elements.jsx("p", {
+            style: "color: #6b7280; margin: 0.5rem 0 1rem 0;",
+            children: Xote.Component.text("Display chronological events in a visual timeline.")
+          }),
+          Xote__JSX.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", {
+                    style: "color: #6b7280; margin-bottom: 1rem; font-size: 0.875rem;",
+                    children: Xote.Component.text("Vertical timeline:")
+                  }),
+                  Xote__JSX.jsx(Basefn__Timeline.make, {
+                    items: [
+                      {
+                        title: "Project Created",
+                        timestamp: "2 hours ago",
+                        description: "Initial project setup and configuration",
+                        variant: "Success",
+                        icon: "\u2713"
+                      },
+                      {
+                        title: "First Commit",
+                        timestamp: "1 hour ago",
+                        description: "Added base components and styling",
+                        variant: "Success",
+                        icon: "\u2713"
+                      },
+                      {
+                        title: "Code Review",
+                        timestamp: "30 minutes ago",
+                        description: "Team reviewing the implementation",
+                        variant: "Primary",
+                        icon: undefined
+                      },
+                      {
+                        title: "Deployment",
+                        timestamp: "Pending",
+                        description: "Awaiting approval for production deployment",
+                        variant: "Default",
+                        icon: undefined
+                      }
+                    ],
+                    orientation: "Vertical"
+                  })
+                ])
+              }),
+              Xote__JSX.Elements.jsxs("div", {
+                children: Xote__JSX.array([
+                  Xote__JSX.Elements.jsx("p", {
+                    style: "color: #6b7280; margin-bottom: 1rem; font-size: 0.875rem;",
+                    children: Xote.Component.text("With different variants:")
+                  }),
+                  Xote__JSX.jsx(Basefn__Timeline.make, {
+                    items: [
+                      {
+                        title: "Success Event",
+                        timestamp: undefined,
+                        description: "Operation completed successfully",
+                        variant: "Success",
+                        icon: "\u2713"
+                      },
+                      {
+                        title: "Warning Event",
+                        timestamp: undefined,
+                        description: "Requires attention",
+                        variant: "Warning",
+                        icon: "!"
+                      },
+                      {
+                        title: "Error Event",
+                        timestamp: undefined,
+                        description: "Operation failed",
+                        variant: "Error",
+                        icon: "\u00d7"
+                      }
+                    ],
+                    orientation: "Vertical"
+                  })
+                ])
+              })
+            ])
+          })
+        ])
+      }),
+      Xote__JSX.jsx(Basefn__Separator.make, {
+        orientation: "Horizontal",
+        variant: "Solid",
+        label: "App Layouts"
+      }),
+      Xote__JSX.Elements.jsxs("div", {
+        style: "margin-top: 3rem;",
+        children: Xote__JSX.array([
+          Xote__JSX.jsx(Basefn__Typography.make, {
+            text: {
+              TAG: "Static",
+              _0: "Application Layouts"
+            },
+            variant: "H2",
+            align: "Left"
+          }),
+          Xote__JSX.jsx(Basefn__Typography.make, {
+            text: {
+              TAG: "Static",
+              _0: "Complete application layout structures with sidebar and topbar combinations."
+            },
+            variant: "Muted"
+          })
+        ])
+      }),
+      Xote__JSX.Elements.jsxs("div", {
+        style: "margin-top: 2rem;",
+        children: Xote__JSX.array([
+          Xote__JSX.jsx(Basefn__Typography.make, {
+            text: {
+              TAG: "Static",
+              _0: "Layout Variants"
+            },
+            variant: "H4"
+          }),
+          Xote__JSX.Elements.jsx("p", {
+            style: "color: #6b7280; margin: 0.5rem 0 1rem 0;",
+            children: Xote.Component.text("Different application layout configurations.")
+          }),
+          Xote__JSX.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, {
+                    text: {
+                      TAG: "Static",
+                      _0: "Sidebar Only Layout"
+                    },
+                    variant: "H5"
+                  }),
+                  Xote__JSX.Elements.jsx("p", {
+                    style: "color: #6b7280; margin: 0.5rem 0 1rem 0; font-size: 0.875rem;",
+                    children: Xote.Component.text("Application with sidebar navigation")
+                  }),
+                  Xote__JSX.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"),
+                        sections: [
+                          {
+                            title: "Main",
+                            items: [
+                              {
+                                label: "Dashboard",
+                                icon: "\u2302",
+                                active: Xote.Signal.get(activeNavItem) === "home",
+                                url: "/profile"
+                              },
+                              {
+                                label: "Analytics",
+                                icon: "\u{1F4CA}",
+                                active: Xote.Signal.get(activeNavItem) === "analytics",
+                                url: "/profile"
+                              }
+                            ]
+                          },
+                          {
+                            title: "Settings",
+                            items: [
+                              {
+                                label: "Profile",
+                                icon: "\u{1F464}",
+                                active: Xote.Signal.get(activeNavItem) === "profile",
+                                url: "/profile"
+                              },
+                              {
+                                label: "Settings",
+                                icon: "\u2699",
+                                active: Xote.Signal.get(activeNavItem) === "settings",
+                                url: "/profile"
+                              }
+                            ]
+                          }
+                        ],
+                        size: "Md"
+                      }),
+                      children: Xote__JSX.Elements.jsxs("div", {
+                        style: "padding: 2rem;",
+                        children: Xote__JSX.array([
+                          Xote__JSX.jsx(Basefn__Typography.make, {
+                            text: {
+                              TAG: "Static",
+                              _0: "Main Content Area"
+                            },
+                            variant: "H3"
+                          }),
+                          Xote__JSX.Elements.jsx("p", {
+                            style: "margin-top: 1rem;",
+                            children: Xote.Component.text("This is the main content area. The sidebar provides persistent navigation.")
+                          })
+                        ])
+                      })
+                    })
+                  })
+                ])
+              }),
+              Xote__JSX.Elements.jsxs("div", {
+                children: Xote__JSX.array([
+                  Xote__JSX.jsx(Basefn__Typography.make, {
+                    text: {
+                      TAG: "Static",
+                      _0: "Topbar Only Layout"
+                    },
+                    variant: "H5"
+                  }),
+                  Xote__JSX.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")
+                  }),
+                  Xote__JSX.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"),
+                        navItems: [
+                          {
+                            label: "Home",
+                            active: Xote.Signal.get(activeNavItem) === "home",
+                            onClick: () => Xote.Signal.set(activeNavItem, "home")
+                          },
+                          {
+                            label: "Products",
+                            active: Xote.Signal.get(activeNavItem) === "products",
+                            onClick: () => Xote.Signal.set(activeNavItem, "products")
+                          },
+                          {
+                            label: "About",
+                            active: Xote.Signal.get(activeNavItem) === "about",
+                            onClick: () => Xote.Signal.set(activeNavItem, "about")
+                          }
+                        ],
+                        rightContent: Xote__JSX.Elements.jsxs("div", {
+                          style: "display: flex; gap: 0.5rem;",
+                          children: Xote__JSX.array([
+                            Xote__JSX.jsx(Basefn__Button.make, {
+                              label: {
+                                TAG: "Static",
+                                _0: "Sign In"
+                              },
+                              variant: "Ghost"
+                            }),
+                            Xote__JSX.jsx(Basefn__Button.make, {
+                              label: {
+                                TAG: "Static",
+                                _0: "Sign Up"
+                              },
+                              variant: "Primary"
+                            })
+                          ])
+                        })
+                      }),
+                      children: Xote__JSX.Elements.jsxs("div", {
+                        style: "padding: 2rem;",
+                        children: Xote__JSX.array([
+                          Xote__JSX.jsx(Basefn__Typography.make, {
+                            text: {
+                              TAG: "Static",
+                              _0: "Main Content Area"
+                            },
+                            variant: "H3"
+                          }),
+                          Xote__JSX.Elements.jsx("p", {
+                            style: "margin-top: 1rem;",
+                            children: Xote.Component.text("This layout uses only a top navigation bar.")
+                          })
+                        ])
+                      })
+                    })
+                  })
+                ])
+              }),
+              Xote__JSX.Elements.jsxs("div", {
+                children: Xote__JSX.array([
+                  Xote__JSX.jsx(Basefn__Typography.make, {
+                    text: {
+                      TAG: "Static",
+                      _0: "Sidebar + Topbar Layout"
+                    },
+                    variant: "H5"
+                  }),
+                  Xote__JSX.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")
+                  }),
+                  Xote__JSX.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"),
+                        sections: [{
+                            title: "Navigation",
+                            items: [
+                              {
+                                label: "Dashboard",
+                                icon: "\u2302",
+                                active: true,
+                                url: "/"
+                              },
+                              {
+                                label: "Projects",
+                                icon: "\u{1F4C1}",
+                                active: false,
+                                url: "/"
+                              },
+                              {
+                                label: "Tasks",
+                                icon: "\u2713",
+                                active: false,
+                                url: "/"
+                              }
+                            ]
+                          }],
+                        size: "Md",
+                        collapsed: Xote.Signal.get(sidebarCollapsed)
+                      }),
+                      topbar: Xote__JSX.jsx(Basefn__Topbar.make, {
+                        rightContent: Xote__JSX.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),
+                              variant: "Primary"
+                            }),
+                            Xote__JSX.jsx(Basefn__Avatar.make, {
+                              src: "https://ui-avatars.com/api/?name=John+Doe",
+                              size: "Sm"
+                            })
+                          ])
+                        }),
+                        onMenuClick: () => Xote.Signal.update(sidebarCollapsed, prev => !prev)
+                      }),
+                      children: Xote__JSX.Elements.jsxs("div", {
+                        style: "padding: 2rem;",
+                        children: Xote__JSX.array([
+                          Xote__JSX.jsx(Basefn__Typography.make, {
+                            text: {
+                              TAG: "Static",
+                              _0: "Dashboard"
+                            },
+                            variant: "H3"
+                          }),
+                          Xote__JSX.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.")
+                          }),
+                          Xote__JSX.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, {
+                                    text: {
+                                      TAG: "Static",
+                                      _0: "Total Users"
+                                    },
+                                    variant: "H6"
+                                  }),
+                                  Xote__JSX.jsx(Basefn__Typography.make, {
+                                    text: {
+                                      TAG: "Static",
+                                      _0: "1,234"
+                                    },
+                                    variant: "H2",
+                                    class: "text-primary"
+                                  })
+                                ])
+                              }),
+                              Xote__JSX.jsxs(Basefn__Card.make, {
+                                children: Xote__JSX.array([
+                                  Xote__JSX.jsx(Basefn__Typography.make, {
+                                    text: {
+                                      TAG: "Static",
+                                      _0: "Active Projects"
+                                    },
+                                    variant: "H6"
+                                  }),
+                                  Xote__JSX.jsx(Basefn__Typography.make, {
+                                    text: {
+                                      TAG: "Static",
+                                      _0: "45"
+                                    },
+                                    variant: "H2"
+                                  })
+                                ])
+                              }),
+                              Xote__JSX.jsxs(Basefn__Card.make, {
+                                children: Xote__JSX.array([
+                                  Xote__JSX.jsx(Basefn__Typography.make, {
+                                    text: {
+                                      TAG: "Static",
+                                      _0: "Completed Tasks"
+                                    },
+                                    variant: "H6"
+                                  }),
+                                  Xote__JSX.jsx(Basefn__Typography.make, {
+                                    text: {
+                                      TAG: "Static",
+                                      _0: "892"
+                                    },
+                                    variant: "H2"
+                                  })
+                                ])
+                              })
+                            ])
+                          })
+                        ])
+                      }),
+                      sidebarSize: "md",
+                      sidebarCollapsed: Xote.Signal.get(sidebarCollapsed)
+                    })
+                  })
+                ])
+              })
+            ])
+          })
+        ])
+      }),
+      Xote__JSX.jsx(Basefn__Separator.make, {
+        orientation: "Horizontal",
+        variant: "Dashed",
+        label: "Foundational"
+      }),
+      Xote__JSX.Elements.jsxs("div", {
+        style: "margin-top: 3rem;",
+        children: Xote__JSX.array([
+          Xote__JSX.jsx(Basefn__Typography.make, {
+            text: {
+              TAG: "Static",
+              _0: "Foundation Components"
+            },
+            variant: "H2",
+            align: "Left"
+          }),
+          Xote__JSX.jsx(Basefn__Typography.make, {
+            text: {
+              TAG: "Static",
+              _0: "Explore the Tier 1 foundation components below."
+            },
+            variant: "Muted"
+          })
+        ])
+      }),
+      Xote__JSX.Elements.jsxs("div", {
+        style: "margin-top: 2rem;",
+        children: Xote__JSX.array([
+          Xote__JSX.jsx(Basefn__Typography.make, {
+            text: {
+              TAG: "Static",
+              _0: "Badges"
+            },
+            variant: "H4"
+          }),
+          Xote__JSX.Elements.jsx("p", {
+            style: "color: #6b7280; margin: 0.5rem 0 1rem 0;",
+            children: Xote.Component.text("Display status indicators and labels with various styles.")
+          }),
+          Xote__JSX.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),
+                variant: "Default"
+              }),
+              Xote__JSX.jsx(Basefn__Badge.make, {
+                label: Xote.Signal.make("Primary", undefined, undefined),
+                variant: "Primary"
+              }),
+              Xote__JSX.jsx(Basefn__Badge.make, {
+                label: Xote.Signal.make("Secondary", undefined, undefined),
+                variant: "Secondary"
+              }),
+              Xote__JSX.jsx(Basefn__Badge.make, {
+                label: Xote.Signal.make("Success", undefined, undefined),
+                variant: "Success"
+              }),
+              Xote__JSX.jsx(Basefn__Badge.make, {
+                label: Xote.Signal.make("Warning", undefined, undefined),
+                variant: "Warning"
+              }),
+              Xote__JSX.jsx(Basefn__Badge.make, {
+                label: Xote.Signal.make("Error", undefined, undefined),
+                variant: "Error"
+              })
+            ])
+          }),
+          Xote__JSX.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),
+                variant: "Primary",
+                size: "Sm"
+              }),
+              Xote__JSX.jsx(Basefn__Badge.make, {
+                label: Xote.Signal.make("Medium", undefined, undefined),
+                variant: "Primary",
+                size: "Md"
+              }),
+              Xote__JSX.jsx(Basefn__Badge.make, {
+                label: Xote.Signal.make("Large", undefined, undefined),
+                variant: "Primary",
+                size: "Lg"
+              }),
+              Xote__JSX.jsx(Basefn__Badge.make, {
+                label: Xote.Signal.make("Online", undefined, undefined),
+                variant: "Success",
+                dot: true
+              }),
+              Xote__JSX.jsx(Basefn__Badge.make, {
+                label: Xote.Signal.make("Away", undefined, undefined),
+                variant: "Warning",
+                dot: true
+              })
+            ])
+          })
+        ])
+      }),
+      Xote__JSX.jsx(Basefn__Separator.make, {
+        orientation: "Horizontal",
+        variant: "Dashed",
+        label: "Spinners"
+      }),
+      Xote__JSX.Elements.jsxs("div", {
+        style: "margin-top: 2rem;",
+        children: Xote__JSX.array([
+          Xote__JSX.jsx(Basefn__Typography.make, {
+            text: {
+              TAG: "Static",
+              _0: "Spinners"
+            },
+            variant: "H4"
+          }),
+          Xote__JSX.Elements.jsx("p", {
+            style: "color: #6b7280; margin: 0.5rem 0 1rem 0;",
+            children: Xote.Component.text("Loading indicators in different sizes and colors.")
+          }),
+          Xote__JSX.Elements.jsxs("div", {
+            style: "display: flex; gap: 2rem; flex-wrap: wrap; align-items: center;",
+            children: Xote__JSX.array([
+              Xote__JSX.jsx(Basefn__Spinner.make, {
+                size: "Sm",
+                variant: "Default"
+              }),
+              Xote__JSX.jsx(Basefn__Spinner.make, {
+                size: "Md",
+                variant: "Primary"
+              }),
+              Xote__JSX.jsx(Basefn__Spinner.make, {
+                size: "Lg",
+                variant: "Secondary"
+              }),
+              Xote__JSX.jsx(Basefn__Spinner.make, {
+                size: "Xl",
+                variant: "Primary"
+              })
+            ])
+          }),
+          Xote__JSX.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, {
+                size: "Md",
+                variant: "Primary",
+                label: "Loading..."
+              }),
+              Xote__JSX.jsx(Basefn__Spinner.make, {
+                size: "Lg",
+                variant: "Default",
+                label: Xote.Signal.get(isSubmitting) ? "Submitting..." : "Ready"
+              })
+            ])
+          })
+        ])
+      }),
+      Xote__JSX.jsx(Basefn__Separator.make, {
+        orientation: "Horizontal",
+        variant: "Dotted"
+      }),
+      Xote__JSX.Elements.jsxs("div", {
+        style: "margin-top: 2rem;",
+        children: Xote__JSX.array([
+          Xote__JSX.jsx(Basefn__Typography.make, {
+            text: {
+              TAG: "Static",
+              _0: "Keyboard Shortcuts"
+            },
+            variant: "H4"
+          }),
+          Xote__JSX.Elements.jsx("p", {
+            style: "color: #6b7280; margin: 0.5rem 0 1rem 0;",
+            children: Xote.Component.text("Display keyboard shortcuts in a visually appealing way.")
+          }),
+          Xote__JSX.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", {
+                    style: "color: #6b7280; margin-right: 0.5rem;",
+                    children: Xote.Component.text("Copy:")
+                  }),
+                  Xote__JSX.jsx(Basefn__Kbd.make, {
+                    keys: Xote.Signal.make([
+                      "Ctrl",
+                      "C"
+                    ], undefined, undefined),
+                    size: "Md"
+                  })
+                ])
+              }),
+              Xote__JSX.Elements.jsxs("div", {
+                children: Xote__JSX.array([
+                  Xote__JSX.Elements.jsx("span", {
+                    style: "color: #6b7280; margin-right: 0.5rem;",
+                    children: Xote.Component.text("Paste:")
+                  }),
+                  Xote__JSX.jsx(Basefn__Kbd.make, {
+                    keys: Xote.Signal.make([
+                      "Ctrl",
+                      "V"
+                    ], undefined, undefined),
+                    size: "Md"
+                  })
+                ])
+              }),
+              Xote__JSX.Elements.jsxs("div", {
+                children: Xote__JSX.array([
+                  Xote__JSX.Elements.jsx("span", {
+                    style: "color: #6b7280; margin-right: 0.5rem;",
+                    children: Xote.Component.text("Save:")
+                  }),
+                  Xote__JSX.jsx(Basefn__Kbd.make, {
+                    keys: Xote.Signal.make([
+                      "Ctrl",
+                      "S"
+                    ], undefined, undefined),
+                    size: "Md"
+                  })
+                ])
+              }),
+              Xote__JSX.Elements.jsxs("div", {
+                children: Xote__JSX.array([
+                  Xote__JSX.Elements.jsx("span", {
+                    style: "color: #6b7280; margin-right: 0.5rem;",
+                    children: Xote.Component.text("Select All:")
+                  }),
+                  Xote__JSX.jsx(Basefn__Kbd.make, {
+                    keys: Xote.Signal.make([
+                      "Ctrl",
+                      "A"
+                    ], undefined, undefined),
+                    size: "Md"
+                  })
+                ])
+              })
+            ])
+          }),
+          Xote__JSX.Elements.jsxs("div", {
+            style: "margin-top: 1rem;",
+            children: Xote__JSX.array([
+              Xote__JSX.jsx(Basefn__Kbd.make, {
+                keys: Xote.Signal.make([
+                  "Shift",
+                  "Alt",
+                  "F"
+                ], undefined, undefined),
+                size: "Sm"
+              }),
+              Xote__JSX.Elements.jsx("span", {
+                style: "color: #6b7280; margin-left: 0.5rem;",
+                children: Xote.Component.text("Format Document")
+              })
+            ])
+          })
+        ])
+      }),
+      Xote__JSX.jsx(Basefn__Separator.make, {
+        orientation: "Horizontal",
+        variant: "Solid"
+      }),
+      Xote__JSX.Elements.jsxs("div", {
+        style: "margin-top: 2rem;",
+        children: Xote__JSX.array([
+          Xote__JSX.jsx(Basefn__Typography.make, {
+            text: {
+              TAG: "Static",
+              _0: "Typography"
+            },
+            variant: "H4"
+          }),
+          Xote__JSX.Elements.jsx("p", {
+            style: "color: #6b7280; margin: 0.5rem 0 1rem 0;",
+            children: Xote.Component.text("Consistent text styling across your application.")
+          }),
+          Xote__JSX.Elements.jsxs("div", {
+            style: "display: flex; flex-direction: column; gap: 1rem;",
+            children: Xote__JSX.array([
+              Xote__JSX.jsx(Basefn__Typography.make, {
+                text: {
+                  TAG: "Static",
+                  _0: "Heading 1"
+                },
+                variant: "H1"
+              }),
+              Xote__JSX.jsx(Basefn__Typography.make, {
+                text: {
+                  TAG: "Static",
+                  _0: "Heading 2"
+                },
+                variant: "H2"
+              }),
+              Xote__JSX.jsx(Basefn__Typography.make, {
+                text: {
+                  TAG: "Static",
+                  _0: "Heading 3"
+                },
+                variant: "H3"
+              }),
+              Xote__JSX.jsx(Basefn__Typography.make, {
+                text: {
+                  TAG: "Static",
+                  _0: "Heading 4"
+                },
+                variant: "H4"
+              }),
+              Xote__JSX.jsx(Basefn__Typography.make, {
+                text: {
+                  TAG: "Static",
+                  _0: "Heading 5"
+                },
+                variant: "H5"
+              }),
+              Xote__JSX.jsx(Basefn__Typography.make, {
+                text: {
+                  TAG: "Static",
+                  _0: "Heading 6"
+                },
+                variant: "H6"
+              }),
+              Xote__JSX.jsx(Basefn__Separator.make, {
+                orientation: "Horizontal",
+                variant: "Dashed"
+              }),
+              Xote__JSX.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, {
+                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, {
+                text: {
+                  TAG: "Static",
+                  _0: "This is small text, useful for captions and helper text."
+                },
+                variant: "Small"
+              }),
+              Xote__JSX.jsx(Basefn__Typography.make, {
+                text: {
+                  TAG: "Static",
+                  _0: "This is muted text with reduced emphasis."
+                },
+                variant: "Muted"
+              }),
+              Xote__JSX.jsx(Basefn__Typography.make, {
+                text: {
+                  TAG: "Static",
+                  _0: "const hello = 'world'"
+                },
+                variant: "Code"
+              })
+            ])
+          })
+        ])
+      }),
+      Xote__JSX.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", {
+            style: "margin-top: 0; color: #374151;",
+            children: Xote.Component.text("Form State (Real-time)")
+          }),
+          Xote__JSX.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 ? "..." : ""
+            ) + `
+Terms: ` + Stdlib_Bool.toString(Xote.Signal.get(agreeToTerms)) + `
+Newsletter: ` + Stdlib_Bool.toString(Xote.Signal.get(newsletter)))
+          })
+        ])
+      })
+    ])
+  });
+}
+
+let Demo = {
+  make: Demo$Demo
+};
+
+Xote.Component.mountById(Xote__JSX.jsx(Demo$Demo, {}), "root");
+
+export {
+  Demo,
+}
+/*  Not a pure module */