basefn 1.10.0 → 1.11.0

package/src/Example.res

@@ -55,7 +55,7 @@ module ExampleForm = {
     ])
 
     <div style="max-width: 50rem; margin: auto;">
-      <h1> {Component.text("Contact Form Example")} </h1>
+      <h1> {Node.text("Contact Form Example")} </h1>
 
       <div style="margin-bottom: 1rem;">
         <Label text="Name" required={true} />
@@ -99,7 +99,7 @@ module ExampleForm = {
 
       <div style="display: flex; gap: 1rem;">
         <Button onClick={handleSubmit} variant={Button.Primary} disabled={Reactive(isSubmitting)}>
-          {Component.textSignal(() => Signal.get(isSubmitting) ? "Submitting..." : "Submit")}
+          {Node.signalText(() => Signal.get(isSubmitting) ? "Submitting..." : "Submit")}
         </Button>
         <Button label={Static("Cancel")} variant={Button.Ghost} />
       </div>
@@ -108,4 +108,4 @@ module ExampleForm = {
 }
 
 // Mount the example form
-Component.mountById(<ExampleForm />, "root")
+Node.mountById(<ExampleForm />, "root")

package/src/Example.res.mjs

@@ -1,40 +1,41 @@
 // Generated by ReScript, PLEASE EDIT WITH CARE
 
-import * as Xote from "xote/src/Xote.res.mjs";
 import * as Basefn from "./Basefn.res.mjs";
-import * as Xote__JSX from "xote/src/Xote__JSX.res.mjs";
+import * as Node$Xote from "xote/src/Node.res.mjs";
+import * as Signal$Xote from "xote/src/Signal.res.mjs";
+import * as XoteJSX$Xote from "xote/src/XoteJSX.res.mjs";
 
 function Example$ExampleForm(props) {
-  let name = Xote.Signal.make("", undefined, undefined);
-  let email = Xote.Signal.make("", undefined, undefined);
-  let message = Xote.Signal.make("", undefined, undefined);
-  let agreeToTerms = Xote.Signal.make(false, undefined, undefined);
-  let selectedOption = Xote.Signal.make("option1", undefined, undefined);
-  let isSubmitting = Xote.Signal.make(false, undefined, undefined);
+  let name = Signal$Xote.make("", undefined, undefined);
+  let email = Signal$Xote.make("", undefined, undefined);
+  let message = Signal$Xote.make("", undefined, undefined);
+  let agreeToTerms = Signal$Xote.make(false, undefined, undefined);
+  let selectedOption = Signal$Xote.make("option1", undefined, undefined);
+  let isSubmitting = Signal$Xote.make(false, undefined, undefined);
   let handleNameChange = evt => {
     let target = evt.target;
-    Xote.Signal.set(name, target.value);
+    Signal$Xote.set(name, target.value);
   };
   let handleEmailChange = evt => {
     let target = evt.target;
-    Xote.Signal.set(email, target.value);
+    Signal$Xote.set(email, target.value);
   };
   let handleMessageChange = evt => {
     let target = evt.target;
-    Xote.Signal.set(message, target.value);
+    Signal$Xote.set(message, target.value);
   };
-  let handleCheckboxChange = _evt => Xote.Signal.update(agreeToTerms, prev => !prev);
+  let handleCheckboxChange = _evt => Signal$Xote.update(agreeToTerms, prev => !prev);
   let handleSubmit = _evt => {
-    Xote.Signal.set(isSubmitting, true);
+    Signal$Xote.set(isSubmitting, true);
     console.log("Submitting form...");
-    console.log(`Name: ` + Xote.Signal.get(name));
-    console.log(`Email: ` + Xote.Signal.get(email));
-    console.log(`Message: ` + Xote.Signal.get(message));
+    console.log(`Name: ` + Signal$Xote.get(name));
+    console.log(`Email: ` + Signal$Xote.get(email));
+    console.log(`Message: ` + Signal$Xote.get(message));
     setTimeout(() => {
-      Xote.Signal.set(isSubmitting, false);
+      Signal$Xote.set(isSubmitting, false);
     }, 1000);
   };
-  let selectOptions = Xote.Signal.make([
+  let selectOptions = Signal$Xote.make([
     {
       value: "option1",
       label: "Option 1"
@@ -48,20 +49,20 @@ function Example$ExampleForm(props) {
       label: "Option 3"
     }
   ], undefined, undefined);
-  return Xote__JSX.Elements.jsxs("div", {
+  return XoteJSX$Xote.Elements.jsxs("div", {
     style: "max-width: 50rem; margin: auto;",
-    children: Xote__JSX.array([
-      Xote__JSX.Elements.jsx("h1", {
-        children: Xote.Component.text("Contact Form Example")
+    children: XoteJSX$Xote.array([
+      XoteJSX$Xote.Elements.jsx("h1", {
+        children: Node$Xote.text("Contact Form Example")
       }),
-      Xote__JSX.Elements.jsxs("div", {
+      XoteJSX$Xote.Elements.jsxs("div", {
         style: "margin-bottom: 1rem;",
-        children: Xote__JSX.array([
-          Xote__JSX.jsx(Basefn.Label.make, {
+        children: XoteJSX$Xote.array([
+          XoteJSX$Xote.jsx(Basefn.Label.make, {
             text: "Name",
             required: true
           }),
-          Xote__JSX.jsx(Basefn.Input.make, {
+          XoteJSX$Xote.jsx(Basefn.Input.make, {
             value: {
               TAG: "Reactive",
               _0: name
@@ -72,14 +73,14 @@ function Example$ExampleForm(props) {
           })
         ])
       }),
-      Xote__JSX.Elements.jsxs("div", {
+      XoteJSX$Xote.Elements.jsxs("div", {
         style: "margin-bottom: 1rem;",
-        children: Xote__JSX.array([
-          Xote__JSX.jsx(Basefn.Label.make, {
+        children: XoteJSX$Xote.array([
+          XoteJSX$Xote.jsx(Basefn.Label.make, {
             text: "Email",
             required: true
           }),
-          Xote__JSX.jsx(Basefn.Input.make, {
+          XoteJSX$Xote.jsx(Basefn.Input.make, {
             value: {
               TAG: "Reactive",
               _0: email
@@ -90,27 +91,27 @@ function Example$ExampleForm(props) {
           })
         ])
       }),
-      Xote__JSX.Elements.jsxs("div", {
+      XoteJSX$Xote.Elements.jsxs("div", {
         style: "margin-bottom: 1rem;",
-        children: Xote__JSX.array([
-          Xote__JSX.jsx(Basefn.Label.make, {
+        children: XoteJSX$Xote.array([
+          XoteJSX$Xote.jsx(Basefn.Label.make, {
             text: "Choose an option",
             required: false
           }),
-          Xote__JSX.jsx(Basefn.Select.make, {
+          XoteJSX$Xote.jsx(Basefn.Select.make, {
             value: selectedOption,
             options: selectOptions
           })
         ])
       }),
-      Xote__JSX.Elements.jsxs("div", {
+      XoteJSX$Xote.Elements.jsxs("div", {
         style: "margin-bottom: 1rem;",
-        children: Xote__JSX.array([
-          Xote__JSX.jsx(Basefn.Label.make, {
+        children: XoteJSX$Xote.array([
+          XoteJSX$Xote.jsx(Basefn.Label.make, {
             text: "Message",
             required: false
           }),
-          Xote__JSX.jsx(Basefn.Textarea.make, {
+          XoteJSX$Xote.jsx(Basefn.Textarea.make, {
             value: {
               TAG: "Reactive",
               _0: message
@@ -120,20 +121,20 @@ function Example$ExampleForm(props) {
           })
         ])
       }),
-      Xote__JSX.Elements.jsx("div", {
+      XoteJSX$Xote.Elements.jsx("div", {
         style: "margin-bottom: 1rem;",
-        children: Xote__JSX.jsx(Basefn.Checkbox.make, {
+        children: XoteJSX$Xote.jsx(Basefn.Checkbox.make, {
           checked: agreeToTerms,
           onChange: handleCheckboxChange,
           label: "I agree to the terms and conditions"
         })
       }),
-      Xote__JSX.Elements.jsxs("div", {
+      XoteJSX$Xote.Elements.jsxs("div", {
         style: "display: flex; gap: 1rem;",
-        children: Xote__JSX.array([
-          Xote__JSX.jsx(Basefn.Button.make, {
-            children: Xote.Component.textSignal(() => {
-              if (Xote.Signal.get(isSubmitting)) {
+        children: XoteJSX$Xote.array([
+          XoteJSX$Xote.jsx(Basefn.Button.make, {
+            children: Node$Xote.signalText(() => {
+              if (Signal$Xote.get(isSubmitting)) {
                 return "Submitting...";
               } else {
                 return "Submit";
@@ -146,7 +147,7 @@ function Example$ExampleForm(props) {
             onClick: handleSubmit,
             variant: "Primary"
           }),
-          Xote__JSX.jsx(Basefn.Button.make, {
+          XoteJSX$Xote.jsx(Basefn.Button.make, {
             label: {
               TAG: "Static",
               _0: "Cancel"
@@ -163,7 +164,7 @@ let ExampleForm = {
   make: Example$ExampleForm
 };
 
-Xote.Component.mountById(Xote__JSX.jsx(Example$ExampleForm, {}), "root");
+Node$Xote.mountById(XoteJSX$Xote.jsx(Example$ExampleForm, {}), "root");
 
 export {
   ExampleForm,

package/src/components/Basefn__Accordion.res

@@ -2,12 +2,12 @@
 
 module Signal = Xote.Signal
 module Computed = Xote.Computed
-module Component = Xote.Component
+module Node = Xote.Node
 
 type accordionItem = {
   value: string,
   title: string,
-  content: Component.node,
+  content: Node.node,
   disabled?: bool,
 }
 
@@ -52,7 +52,7 @@ let make = (
           onClick={_ => toggleItem(item.value, item.disabled)}
           disabled={item.disabled->Option.getOr(false)}
         >
-          <span> {Component.text(item.title)} </span>
+          <span> {Node.text(item.title)} </span>
           <span
             class={Computed.make(() => {
               let baseClass = "basefn-accordion__icon"
@@ -60,7 +60,7 @@ let make = (
               baseClass ++ openClass
             })}
           >
-            {Component.text("\u25bc")}
+            {Node.text("\u25bc")}
           </span>
         </button>
         <div
@@ -76,6 +76,6 @@ let make = (
         </div>
       </div>
     })
-    ->Component.fragment}
+    ->Node.fragment}
   </div>
 }

package/src/components/Basefn__Accordion.res.mjs

@@ -1,8 +1,10 @@
 // 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 Node$Xote from "xote/src/Node.res.mjs";
+import * as Signal$Xote from "xote/src/Signal.res.mjs";
 import * as Core__Option from "@rescript/core/src/Core__Option.res.mjs";
+import * as XoteJSX$Xote from "xote/src/XoteJSX.res.mjs";
+import * as Computed$Xote from "xote/src/Computed.res.mjs";
 
 import './Basefn__Accordion.css'
 ;
@@ -10,18 +12,15 @@ import './Basefn__Accordion.css'
 function Basefn__Accordion(props) {
   let __multiple = props.multiple;
   let multiple = __multiple !== undefined ? __multiple : false;
-  let openItems = Xote.Signal.make(Core__Option.getOr(props.defaultOpen, []), undefined, undefined);
-  return Xote__JSX.Elements.jsx("div", {
+  let openItems = Signal$Xote.make(Core__Option.getOr(props.defaultOpen, []), undefined, undefined);
+  return XoteJSX$Xote.Elements.jsx("div", {
     class: "basefn-accordion",
-    children: Xote.Component.fragment(props.items.map(item => {
-      let itemIsOpen = Xote.Computed.make(() => {
-        let value = item.value;
-        return Xote.Signal.get(openItems).includes(value);
-      }, undefined);
-      return Xote__JSX.Elements.jsxsKeyed("div", {
+    children: Node$Xote.fragment(props.items.map(item => {
+      let itemIsOpen = Computed$Xote.make(() => Signal$Xote.get(openItems).includes(item.value), undefined);
+      return XoteJSX$Xote.Elements.jsxsKeyed("div", {
         class: "basefn-accordion__item",
-        children: Xote__JSX.array([
-          Xote__JSX.Elements.jsxs("button", {
+        children: XoteJSX$Xote.array([
+          XoteJSX$Xote.Elements.jsxs("button", {
             class: "basefn-accordion__trigger",
             disabled: Core__Option.getOr(item.disabled, false),
             onClick: param => {
@@ -30,7 +29,7 @@ function Basefn__Accordion(props) {
               if (disabled !== undefined && disabled) {
                 return;
               }
-              Xote.Signal.update(openItems, current => {
+              Signal$Xote.update(openItems, current => {
                 if (current.includes(value)) {
                   return current.filter(item => item !== value);
                 } else if (multiple) {
@@ -40,25 +39,25 @@ function Basefn__Accordion(props) {
                 }
               });
             },
-            children: Xote__JSX.array([
-              Xote__JSX.Elements.jsx("span", {
-                children: Xote.Component.text(item.title)
+            children: XoteJSX$Xote.array([
+              XoteJSX$Xote.Elements.jsx("span", {
+                children: Node$Xote.text(item.title)
               }),
-              Xote__JSX.Elements.jsx("span", {
-                class: Xote.Computed.make(() => {
-                  let openClass = Xote.Signal.get(itemIsOpen) ? " basefn-accordion__icon--open" : "";
+              XoteJSX$Xote.Elements.jsx("span", {
+                class: Computed$Xote.make(() => {
+                  let openClass = Signal$Xote.get(itemIsOpen) ? " basefn-accordion__icon--open" : "";
                   return "basefn-accordion__icon" + openClass;
                 }, undefined),
-                children: Xote.Component.text("\u25bc")
+                children: Node$Xote.text("\u25bc")
               })
             ])
           }),
-          Xote__JSX.Elements.jsx("div", {
-            class: Xote.Computed.make(() => {
-              let stateClass = Xote.Signal.get(itemIsOpen) ? " basefn-accordion__content--expanded" : " basefn-accordion__content--collapsed";
+          XoteJSX$Xote.Elements.jsx("div", {
+            class: Computed$Xote.make(() => {
+              let stateClass = Signal$Xote.get(itemIsOpen) ? " basefn-accordion__content--expanded" : " basefn-accordion__content--collapsed";
               return "basefn-accordion__content" + stateClass;
             }, undefined),
-            children: Xote__JSX.Elements.jsx("div", {
+            children: XoteJSX$Xote.Elements.jsx("div", {
               class: "basefn-accordion__content-inner",
               children: item.content
             })
@@ -73,14 +72,14 @@ let Signal;
 
 let Computed;
 
-let Component;
+let Node;
 
 let make = Basefn__Accordion;
 
 export {
   Signal,
   Computed,
-  Component,
+  Node,
   make,
 }
 /*  Not a pure module */

package/src/components/Basefn__Alert.res

@@ -44,16 +44,16 @@ let make = (
           <div class="basefn-alert__content">
             {switch title {
             | Some(titleText) =>
-              <div class="basefn-alert__title"> {Component.text(titleText)} </div>
+              <div class="basefn-alert__title"> {Node.text(titleText)} </div>
             | None => <> </>
             }}
             <div class="basefn-alert__message">
-              {Component.textSignal(() => Signal.get(message))}
+              {Node.signalText(() => Signal.get(message))}
             </div>
           </div>
           {dismissible
             ? <button class="basefn-alert__dismiss" onClick={_ => handleDismiss()}>
-                {Component.text("\u00d7")}
+                {Node.text("\u00d7")}
               </button>
             : <> </>}
         </div>,
@@ -64,5 +64,5 @@ let make = (
   })
 
   // Use signalFragment to reactively render the content
-  Component.signalFragment(content)
+  Node.signalFragment(content)
 }

package/src/components/Basefn__Alert.res.mjs

@@ -1,7 +1,9 @@
 // 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 Node$Xote from "xote/src/Node.res.mjs";
+import * as Signal$Xote from "xote/src/Signal.res.mjs";
+import * as XoteJSX$Xote from "xote/src/XoteJSX.res.mjs";
+import * as Computed$Xote from "xote/src/Computed.res.mjs";
 
 import './Basefn__Alert.css'
 ;
@@ -27,9 +29,9 @@ function Basefn__Alert(props) {
   let title = props.title;
   let variant = __variant !== undefined ? __variant : "Info";
   let dismissible = __dismissible !== undefined ? __dismissible : false;
-  let isVisible = Xote.Signal.make(true, undefined, undefined);
+  let isVisible = Signal$Xote.make(true, undefined, undefined);
   let handleDismiss = () => {
-    Xote.Signal.set(isVisible, false);
+    Signal$Xote.set(isVisible, false);
     if (onDismiss !== undefined) {
       return onDismiss();
     }
@@ -38,29 +40,29 @@ function Basefn__Alert(props) {
     let variantClass = "basefn-alert--" + variantToString(variant);
     return "basefn-alert " + variantClass;
   };
-  return Xote.Component.signalFragment(Xote.Computed.make(() => {
-    if (Xote.Signal.get(isVisible)) {
-      return [Xote__JSX.Elements.jsxs("div", {
+  return Node$Xote.signalFragment(Computed$Xote.make(() => {
+    if (Signal$Xote.get(isVisible)) {
+      return [XoteJSX$Xote.Elements.jsxs("div", {
           class: getClassName(),
-          children: Xote__JSX.array([
-            Xote__JSX.Elements.jsxs("div", {
+          children: XoteJSX$Xote.array([
+            XoteJSX$Xote.Elements.jsxs("div", {
               class: "basefn-alert__content",
-              children: Xote__JSX.array([
-                title !== undefined ? Xote__JSX.Elements.jsx("div", {
+              children: XoteJSX$Xote.array([
+                title !== undefined ? XoteJSX$Xote.Elements.jsx("div", {
                     class: "basefn-alert__title",
-                    children: Xote.Component.text(title)
-                  }) : Xote__JSX.jsx(Xote__JSX.jsxFragment, {}),
-                Xote__JSX.Elements.jsx("div", {
+                    children: Node$Xote.text(title)
+                  }) : XoteJSX$Xote.jsx(XoteJSX$Xote.jsxFragment, {}),
+                XoteJSX$Xote.Elements.jsx("div", {
                   class: "basefn-alert__message",
-                  children: Xote.Component.textSignal(() => Xote.Signal.get(message))
+                  children: Node$Xote.signalText(() => Signal$Xote.get(message))
                 })
               ])
             }),
-            dismissible ? Xote__JSX.Elements.jsx("button", {
+            dismissible ? XoteJSX$Xote.Elements.jsx("button", {
                 class: "basefn-alert__dismiss",
                 onClick: param => handleDismiss(),
-                children: Xote.Component.text("\u00d7")
-              }) : Xote__JSX.jsx(Xote__JSX.jsxFragment, {})
+                children: Node$Xote.text("\u00d7")
+              }) : XoteJSX$Xote.jsx(XoteJSX$Xote.jsxFragment, {})
           ])
         })];
     } else {

package/src/components/Basefn__AlertDialog.res

@@ -55,17 +55,17 @@ let make = (
         <div class="basefn-alert-dialog-backdrop" onClick={handleBackdropClick}>
           <div class="basefn-alert-dialog" role="alertdialog">
             <div class="basefn-alert-dialog__header">
-              <h2 class="basefn-alert-dialog__title"> {Component.text(title)} </h2>
+              <h2 class="basefn-alert-dialog__title"> {Node.text(title)} </h2>
             </div>
             <div class="basefn-alert-dialog__body">
-              <p class="basefn-alert-dialog__description"> {Component.text(description)} </p>
+              <p class="basefn-alert-dialog__description"> {Node.text(description)} </p>
             </div>
             <div class="basefn-alert-dialog__footer">
               <button class="basefn-alert-dialog__cancel" onClick={handleCancel}>
-                {Component.text(cancelLabel)}
+                {Node.text(cancelLabel)}
               </button>
               <button class={getConfirmButtonClass()} onClick={handleConfirm}>
-                {Component.text(confirmLabel)}
+                {Node.text(confirmLabel)}
               </button>
             </div>
           </div>
@@ -76,5 +76,5 @@ let make = (
     }
   })
 
-  Component.signalFragment(content)
+  Node.signalFragment(content)
 }

package/src/components/Basefn__AlertDialog.res.mjs

@@ -1,7 +1,9 @@
 // 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 Node$Xote from "xote/src/Node.res.mjs";
+import * as Signal$Xote from "xote/src/Signal.res.mjs";
+import * as XoteJSX$Xote from "xote/src/XoteJSX.res.mjs";
+import * as Computed$Xote from "xote/src/Computed.res.mjs";
 
 import './Basefn__AlertDialog.css'
 ;
@@ -39,52 +41,52 @@ function Basefn__AlertDialog(props) {
     }
   };
   let handleCancel = param => {
-    Xote.Signal.set(isOpen, false);
+    Signal$Xote.set(isOpen, false);
     onCancel();
   };
   let handleConfirm = param => {
-    Xote.Signal.set(isOpen, false);
+    Signal$Xote.set(isOpen, false);
     onConfirm();
   };
   let getConfirmButtonClass = () => {
     let variantClass = " basefn-alert-dialog__confirm--" + variantToString(variant);
     return "basefn-alert-dialog__confirm" + variantClass;
   };
-  return Xote.Component.signalFragment(Xote.Computed.make(() => {
-    if (Xote.Signal.get(isOpen)) {
-      return [Xote__JSX.Elements.jsx("div", {
+  return Node$Xote.signalFragment(Computed$Xote.make(() => {
+    if (Signal$Xote.get(isOpen)) {
+      return [XoteJSX$Xote.Elements.jsx("div", {
           class: "basefn-alert-dialog-backdrop",
           onClick: handleBackdropClick,
-          children: Xote__JSX.Elements.jsxs("div", {
+          children: XoteJSX$Xote.Elements.jsxs("div", {
             class: "basefn-alert-dialog",
             role: "alertdialog",
-            children: Xote__JSX.array([
-              Xote__JSX.Elements.jsx("div", {
+            children: XoteJSX$Xote.array([
+              XoteJSX$Xote.Elements.jsx("div", {
                 class: "basefn-alert-dialog__header",
-                children: Xote__JSX.Elements.jsx("h2", {
+                children: XoteJSX$Xote.Elements.jsx("h2", {
                   class: "basefn-alert-dialog__title",
-                  children: Xote.Component.text(title)
+                  children: Node$Xote.text(title)
                 })
               }),
-              Xote__JSX.Elements.jsx("div", {
+              XoteJSX$Xote.Elements.jsx("div", {
                 class: "basefn-alert-dialog__body",
-                children: Xote__JSX.Elements.jsx("p", {
+                children: XoteJSX$Xote.Elements.jsx("p", {
                   class: "basefn-alert-dialog__description",
-                  children: Xote.Component.text(description)
+                  children: Node$Xote.text(description)
                 })
               }),
-              Xote__JSX.Elements.jsxs("div", {
+              XoteJSX$Xote.Elements.jsxs("div", {
                 class: "basefn-alert-dialog__footer",
-                children: Xote__JSX.array([
-                  Xote__JSX.Elements.jsx("button", {
+                children: XoteJSX$Xote.array([
+                  XoteJSX$Xote.Elements.jsx("button", {
                     class: "basefn-alert-dialog__cancel",
                     onClick: handleCancel,
-                    children: Xote.Component.text(cancelLabel)
+                    children: Node$Xote.text(cancelLabel)
                   }),
-                  Xote__JSX.Elements.jsx("button", {
+                  XoteJSX$Xote.Elements.jsx("button", {
                     class: getConfirmButtonClass(),
                     onClick: handleConfirm,
-                    children: Xote.Component.text(confirmLabel)
+                    children: Node$Xote.text(confirmLabel)
                   })
                 ])
               })

package/src/components/Basefn__AppLayout.res

@@ -7,9 +7,9 @@ type topbarPosition = Inline | AboveAll
 
 @jsx.component
 let make = (
-  ~sidebar: option<Component.node>=?,
-  ~topbar: option<Component.node>=?,
-  ~children: Component.node,
+  ~sidebar: option<Node.node>=?,
+  ~topbar: option<Node.node>=?,
+  ~children: Node.node,
   ~contentWidth: contentWidth=FullWidth,
   ~noPadding: bool=false,
   ~sidebarSize: option<string>=?, // "sm" | "md" | "lg"