@base-framework/atoms 1.0.65 → 1.0.67

package/README.md

@@ -207,6 +207,152 @@ The callback function will be called when the data property changes. The callbac
 }
 ```
 
+### OnLoad and OnStateLoad Atoms
+The OnLoad and OnStateLoad atoms are specialized versions that automatically watch for a 'loaded' property. OnLoad watches component data/context/state, while OnStateLoad specifically watches component state.
+
+```javascript
+// OnLoad - watches for 'loaded' property in component data/context/state
+Div({ class: "content-container" }, [
+    H1('My Content'),
+
+    // Shows content when loaded is true, nothing when false
+    OnLoad((loaded, element, parent) =>
+        Div({ class: "loaded-content" }, [
+            P('Content has been loaded!')
+        ])
+    ),
+
+    // With a fallback for when not loaded
+    OnLoad(
+        (loaded, element, parent) =>
+            Div({ class: "loaded-content" }, [
+                P('Content loaded successfully!')
+            ]),
+        // Fallback content when not loaded
+        Div({ class: "loading-spinner" }, 'Loading...')
+    )
+])
+
+// OnStateLoad - specifically watches component state
+Div({ class: "dashboard" }, [
+    OnStateLoad((loaded, element, parent) =>
+        Dashboard({ data: parent.state.dashboardData })
+    )
+])
+```
+
+### OnOpen and OnStateOpen Atoms
+The OnOpen and OnStateOpen atoms watch for an 'open' property to show/hide content. Useful for modals, dropdowns, and collapsible content.
+
+```javascript
+// OnOpen - watches for 'open' property in component data/context/state
+Div({ class: "modal-container" }, [
+    Button({
+        click: (e, parent) => parent.data.open = true
+    }, 'Open Modal'),
+
+    // Modal only shows when open is true
+    OnOpen((open, element, parent) =>
+        Div({ class: "modal-overlay" }, [
+            Div({ class: "modal-content" }, [
+                H2('Modal Title'),
+                P('Modal content goes here'),
+                Button({
+                    click: (e, parent) => parent.data.open = false
+                }, 'Close')
+            ])
+        ])
+    )
+])
+
+// OnStateOpen - specifically watches component state
+Nav({ class: "navigation" }, [
+    Button({
+        click: (e, parent) => parent.state.open = !parent.state.open
+    }, 'Toggle Menu'),
+
+    OnStateOpen((open, element, parent) =>
+        Ul({ class: "nav-menu" }, [
+            Li(A({ href: "/home" }, 'Home')),
+            Li(A({ href: "/about" }, 'About')),
+            Li(A({ href: "/contact" }, 'Contact'))
+        ])
+    )
+])
+```
+
+### If and IfState Atoms
+The If and IfState atoms allow conditional rendering based on exact value matches. They take a property name, expected value, and callback function.
+
+```javascript
+// If - watches component data/context/state for exact value match
+Div({ class: "user-profile" }, [
+    H1('User Profile'),
+
+    // Show admin panel only when role equals 'admin'
+    If('role', 'admin', (role, element, parent) =>
+        Div({ class: "admin-panel" }, [
+            H2('Admin Controls'),
+            Button('Manage Users'),
+            Button('System Settings')
+        ])
+    ),
+
+    // Show different content based on subscription status
+    If('subscription', 'premium', (subscription, element, parent) =>
+        Div({ class: "premium-features" }, [
+            P('Premium Features Available'),
+            Button('Advanced Analytics'),
+            Button('Priority Support')
+        ])
+    ),
+
+    If('subscription', 'basic', (subscription, element, parent) =>
+        Div({ class: "upgrade-prompt" }, [
+            P('Upgrade to Premium for more features'),
+            Button('Upgrade Now')
+        ])
+    )
+])
+
+// IfState - specifically watches component state for exact matches
+Div({ class: "game-interface" }, [
+    IfState('gameStatus', 'playing', (status, element, parent) =>
+        Div({ class: "game-controls" }, [
+            Button('Pause Game'),
+            Button('Save Progress')
+        ])
+    ),
+
+    IfState('gameStatus', 'paused', (status, element, parent) =>
+        Div({ class: "pause-menu" }, [
+            Button('Resume Game'),
+            Button('Main Menu'),
+            Button('Quit Game')
+        ])
+    ),
+
+    IfState('gameStatus', 'gameOver', (status, element, parent) =>
+        Div({ class: "game-over" }, [
+            H2('Game Over!'),
+            P(`Final Score: ${parent.state.score}`),
+            Button('Play Again'),
+            Button('Main Menu')
+        ])
+    )
+])
+
+// If with custom data source
+Div({ class: "weather-widget" }, [
+    If(parent.weatherData, 'condition', 'sunny', (condition, element, parent) =>
+        Div({ class: "sunny-weather" }, [
+            Icon('sun'),
+            P('Perfect weather for outdoor activities!')
+        ])
+    )
+])
+```
+
 ### Use Parent Atom
 
 The UseParent atom allows for the parent component to be accessed in a child atom. This atom is useful when a child atom needs to access the parent component.

package/dist/atoms.js

@@ -1,2 +1,2 @@
-import{Atom as n}from"@base-framework/base";import{Builder as y,dataBinder as l}from"@base-framework/base";var b=o=>({tag:"comment",textContent:`${o.type} placeholder`,onCreated:o.onCreated});var k=(o,t,r,a)=>a,d=(o,t,r,a)=>{let c=null;return g=>{let u=o(g,t,a);if(u===void 0)return;c&&y.removeNode(c),u=k(a,r,g,u);let i=y.build(u,null,a);c=i.children[0],t.parentNode.insertBefore(i,t.nextSibling)}},f=o=>b({type:"on",onCreated:o.onCreated}),C=o=>o.data?o.data:o.context&&o.context.data?o.context.data:o.state?o.state:null,B=(...o)=>{let t=[...o],r=t.pop();if(typeof r=="function")return f({onCreated:(a,c)=>{if(t.length<2){let u=C(c);t.unshift(u)}let g=d(r,a,t[1],c);l.watch(a,t[0],t[1],g)}})},O=(...o)=>{let t=[...o],r=t.pop();if(typeof r=="function")return f({onCreated:(a,c)=>{if(t.length<2){let u=c.state;t.unshift(u)}let g=d(r,a,t[1],c);l.watch(a,t[0],t[1],g)}})},S=(...o)=>f({onCreated:(t,r)=>{let a=[...o],c=a.pop();if(typeof c!="function")return;a.length<2&&a.unshift(r.route);let g=d(c,t,a[1],r);l.watch(t,a[0],a[1],g)}}),T=(...o)=>{let t=[...o],r=t.pop();if(typeof r=="function")return f({onCreated:(a,c)=>{if(t.length<3){let p=C(c);t.unshift(p)}let g=t[2],i=d((p,x,s)=>p===g?r(p,x,s):null,a,t[1],c);l.watch(a,t[0],t[1],i)}})},L=(...o)=>{let t=[...o],r=t.pop();if(typeof r=="function")return f({onCreated:(a,c)=>{if(t.length<3){let p=c.state;t.unshift(p)}let g=t[2],i=d((p,x,s)=>p===g?r(p,x,s):null,a,t[1],c);l.watch(a,t[0],t[1],i)}})},D=(...o)=>{let t=[...o],r=typeof t[0]=="function"?t[0]:t[1];if(typeof r=="function")return f({onCreated:(a,c)=>{if(t.length<2){let s=C(c);t.unshift(s)}let g=t.length===3?t[2]:null,u=!0,i=(s,m,h)=>s===u?r(s,m,h):g,p="loaded",x=d(i,a,p,c);l.watch(a,t[0],p,x)}})},w=(...o)=>{let t=[...o],r=typeof t[0]=="function"?t[0]:t[1];if(typeof r=="function")return f({onCreated:(a,c)=>{if(t.length<2){let s=c.state;t.unshift(s)}let g=t.length===3?t[2]:null,u=!0,i=(s,m,h)=>s===u?r(s,m,h):g,p="loaded",x=d(i,a,p,c);l.watch(a,t[0],p,x)}})},H=(...o)=>{let t=[...o],r=typeof t[0]=="function"?t[0]:t[1];if(typeof r=="function")return f({onCreated:(a,c)=>{if(t.length<2){let s=C(c);t.unshift(s)}let g=null,u=!0,i=(s,m,h)=>s==u?r(s,m,h):g,p="open",x=d(i,a,p,c);l.watch(a,t[0],p,x)}})},I=(...o)=>{let t=[...o],r=typeof t[0]=="function"?t[0]:t[1];if(typeof r=="function")return f({onCreated:(a,c)=>{if(t.length<2){let s=c.state;t.unshift(s)}let g=null,u=!0,i=(s,m,h)=>s==u?r(s,m,h):g,p="open",x=d(i,a,p,c);l.watch(a,t[0],p,x)}})};import{Builder as P}from"@base-framework/base";var V=(o,t,r)=>{let a=o(r);if(a===void 0)return;let c=P.build(a,null,r);t.parentNode.insertBefore(c,t.nextSibling)},A=o=>b({type:"use",onCreated:o.onCreated}),R=o=>A({onCreated:(t,r)=>{V(o,t,r)}});var e=(o,t)=>({...o,children:t}),j=o=>({...o,tag:"DOCTYPE"}),z=n((o,t)=>e({...o,tag:"html"},t)),G=n((o,t)=>e({...o,tag:"script"},t)),J=n((o,t)=>e({...o,tag:"style"},t)),X=n((o,t)=>e({...o,tag:"head"},t)),Z=o=>({...o}),_=o=>({...o,tag:"meta"}),tt=o=>({...o,tag:"link"}),ot=n((o,t)=>e({...o,tag:"body"},t)),nt=n((o,t)=>e(o,t)),et=n((o,t)=>e({...o,tag:"dialog"},t)),at=n((o,t)=>e({...o,tag:"span"},t)),rt=n((o,t)=>e({...o,tag:"p"},t)),ct=n((o,t)=>e({...o,tag:"a"},t)),F=n((o,t)=>e({...o,tag:"button"},t)),st=n((o,t)=>F({...o,type:"submit"},t)),pt=n((o,t)=>e({...o,tag:"ul"},t)),gt=n((o,t)=>e({...o,tag:"li"},t)),ut=n(o=>e({...o,tag:"img"},null)),it=n(o=>e({...o,tag:"br"},null)),xt=n(o=>e({...o,tag:"hr"},null)),lt=n((o,t)=>e({...o,tag:"text"},t)),dt=n((o,t)=>e({...o,tag:"h1"},t)),ft=n((o,t)=>e({...o,tag:"h2"},t)),mt=n((o,t)=>e({...o,tag:"h3"},t)),ht=n((o,t)=>e({...o,tag:"h4"},t)),bt=n((o,t)=>e({...o,tag:"h5"},t)),Ct=n((o,t)=>e({...o,tag:"h6"},t)),v=n(o=>e({...o,tag:"input"},null)),yt=n((o,t)=>e({...o,tag:"label"},t)),kt=n(o=>v({...o,type:"checkbox"})),Bt=n((o,t)=>e({...o,tag:"section"},t)),Ot=n((o,t)=>e({...o,tag:"article"},t)),St=n((o,t)=>e({...o,tag:"header"},t)),Tt=n((o,t)=>e({...o,tag:"footer"},t)),Lt=n((o,t)=>e({...o,tag:"nav"},t)),Dt=n((o,t)=>e({...o,tag:"aside"},t)),wt=n((o,t)=>e({...o,tag:"figure"},t)),Ht=n((o,t)=>e({...o,tag:"figcaption"},t)),It=n((o,t)=>e({...o,tag:"main"},t)),Pt=n((o,t)=>e({...o,tag:"video"},t)),Vt=n((o,t)=>e({...o,tag:"audio"},t)),At=n((o,t)=>e({...o,tag:"table"},t)),Rt=n((o,t)=>e({...o,tag:"tr"},t)),Ft=n((o,t)=>e({...o,tag:"th"},t)),vt=n((o,t)=>e({...o,tag:"td"},t)),Mt=n((o,t)=>e({...o,tag:"thead"},t)),Nt=n((o,t)=>e({...o,tag:"tbody"},t)),Ut=n((o,t)=>e({...o,tag:"tfoot"},t)),qt=n((o,t)=>e({...o,tag:"form"},t)),Et=n((o,t)=>e({...o,tag:"select"},t)),Kt=n((o,t)=>e({...o,tag:"option"},t)),Qt=n((o,t)=>e({...o,tag:"textarea"},t)),Wt=n((o,t)=>e({...o,tag:"canvas"},t)),Yt=n((o,t)=>e({...o,tag:"progress"},t)),$t=n((o,t)=>e({...o,tag:"blockquote"},t)),jt=n((o,t)=>e({...o,tag:"pre"},t)),zt=n((o,t)=>e({...o,tag:"code"},t)),Gt=n((o,t)=>e({...o,tag:"ol"},t)),Jt=n((o,t)=>e({...o,tag:"dl"},t)),Xt=n((o,t)=>e({...o,tag:"dt"},t)),Zt=n((o,t)=>e({...o,tag:"dd"},t)),_t=n((o,t)=>e({...o,tag:"fieldset"},t)),to=n((o,t)=>e({...o,tag:"legend"},t)),oo=n((o,t)=>e({...o,tag:"meter"},t)),no=n((o,t)=>e({...o,tag:"iframe"},t)),eo=n((o,t)=>e({...o,tag:"details"},t)),ao=n((o,t)=>e({...o,tag:"summary"},t)),ro=n((o,t)=>e({...o,tag:"em"},t)),co=n((o,t)=>e({...o,tag:"strong"},t)),so=n((o,t)=>e({...o,tag:"small"},t)),po=n((o,t)=>e({...o,tag:"s"},t)),go=n((o,t)=>e({...o,tag:"cite"},t)),uo=n((o,t)=>e({...o,tag:"q"},t)),io=n((o,t)=>e({...o,tag:"dfn"},t)),xo=n((o,t)=>e({...o,tag:"abbr"},t)),lo=n((o,t)=>e({...o,tag:"data"},t)),fo=n((o,t)=>e({...o,tag:"time"},t)),mo=n((o,t)=>e({...o,tag:"var"},t)),ho=n((o,t)=>e({...o,tag:"samp"},t)),bo=n((o,t)=>e({...o,tag:"kbd"},t)),Co=n((o,t)=>e({...o,tag:"sub"},t)),yo=n((o,t)=>e({...o,tag:"sup"},t)),ko=n((o,t)=>e({...o,tag:"i"},t)),Bo=n((o,t)=>e({...o,tag:"b"},t)),Oo=n((o,t)=>e({...o,tag:"u"},t)),So=n((o,t)=>e({...o,tag:"mark"},t)),To=n((o,t)=>e({...o,tag:"ruby"},t)),Lo=n((o,t)=>e({...o,tag:"rt"},t)),Do=n((o,t)=>e({...o,tag:"rp"},t)),wo=n((o,t)=>e({...o,tag:"bdi"},t)),Ho=n((o,t)=>e({...o,tag:"bdo"},t)),Io=n(o=>e({...o,tag:"wbr"},null)),Po=n(o=>e({...o,tag:"comment"},null));export{ct as A,xo as Abbr,Ot as Article,Dt as Aside,Vt as Audio,Bo as B,wo as Bdi,Ho as Bdo,$t as Blockquote,ot as Body,it as Br,F as Button,Wt as Canvas,kt as Checkbox,go as Cite,zt as Code,Po as Comment,lo as Data,Zt as Dd,eo as Details,io as Dfn,et as Dialog,nt as Div,Jt as Dl,j as Doctype,Xt as Dt,ro as Em,_t as Fieldset,Ht as Figcaption,wt as Figure,Tt as Footer,qt as Form,dt as H1,ft as H2,mt as H3,ht as H4,bt as H5,Ct as H6,X as Head,St as Header,xt as Hr,z as Html,ko as I,T as If,L as IfState,no as Iframe,ut as Img,v as Input,bo as Kbd,yt as Label,to as Legend,gt as Li,tt as Link,It as Main,So as Mark,_ as Meta,oo as Meter,Lt as Nav,Gt as Ol,B as On,D as OnLoad,H as OnOpen,S as OnRoute,O as OnState,w as OnStateLoad,I as OnStateOpen,Kt as Option,rt as P,jt as Pre,Yt as Progress,uo as Q,Do as Rp,Lo as Rt,To as Ruby,po as S,ho as Samp,G as Script,Bt as Section,Et as Select,so as Small,at as Span,co as Strong,J as Style,Co as Sub,st as SubmitButton,ao as Summary,yo as Sup,At as Table,Nt as Tbody,vt as Td,lt as Text,Qt as Textarea,Ut as Tfoot,Ft as Th,Mt as Thead,fo as Time,Z as Title,Rt as Tr,Oo as U,pt as Ul,R as UseParent,mo as Var,Pt as Video,Io as Wbr};
+import{Atom as e}from"@base-framework/base";import{Builder as R,dataBinder as D}from"@base-framework/base";var f=t=>({tag:"comment",textContent:`${t.type} placeholder`,onCreated:t.onCreated});import{Data as H}from"@base-framework/base";var g={xs:0,sm:640,md:768,lg:1024,xl:1280,"2xl":1536},C=t=>t>=g["2xl"]?"2xl":t>=g.xl?"xl":t>=g.lg?"lg":t>=g.md?"md":t>=g.sm?"sm":"xs",I=(t,o)=>{let a=g[t]||0,s=g[o]||0;return a>=s},l=new H({size:null,width:0}),X=()=>{if(typeof window>"u")return;let t=window.innerWidth,o=C(t);l.size=o,l.width=t;let a=()=>{let s=window.innerWidth,r=C(s);(s!==l.width||r!==l.size)&&(l.width=s,l.size=r)};return window.addEventListener("resize",a),()=>{window.removeEventListener("resize",a)}},U=null;typeof window<"u"&&(U=X());var u=t=>o=>{if(typeof o=="function")return h(l,"size",(a,s,r)=>I(a,t)?o(l.width,s,r):null)},A=u("xs"),E=u("sm"),B=u("md"),w=u("lg"),k=u("xl"),L=u("2xl");var c={PARENT:"parent",STATE:"state",ROUTE:"route"},P=(t,o)=>{switch(o){case c.PARENT:return M(t);case c.STATE:return t.state;case c.ROUTE:return t.route;default:return null}},y=(t,o,a=null)=>(s,r,p)=>s===o?t(s,r,p):a,O=(t,o=null)=>y(t,!0,o),d=(t,o=null,a=null)=>(...s)=>{let r=[...s],p=r.pop();if(typeof p=="function")return z({onCreated:(i,x)=>{if(r.length<(o?1:2)){let N=P(x,t);r.unshift(N)}let m=o||r[1],b=a?a(p,r):p,T=v(b,i,m,x);D.watch(i,r[0],m,T)}})},S=(t,o,a)=>(...s)=>{let r=[...s],p=typeof r[0]=="function"?r[0]:r[1];if(typeof p=="function")return z({onCreated:(i,x)=>{if(r.length<2||typeof r[0]=="function"){let T=P(x,t);r.unshift(T)}let m=a(p,r),b=v(m,i,o,x);D.watch(i,r[0],o,b)}})},v=(t,o,a,s)=>{let r=null;return p=>{let i=t(p,o,s);if(i===void 0)return;r&&R.removeNode(r);let x=R.build(i,null,s);r=x.children[0],o.parentNode.insertBefore(x,o.nextSibling)}},z=t=>f({type:"on",onCreated:t.onCreated}),M=t=>t.data?t.data:t.context&&t.context.data?t.context.data:t.state?t.state:null,h=d(c.PARENT),F=d(c.STATE),W=d(c.ROUTE),q=d(c.PARENT,null,(t,o)=>y(t,o[2])),K=d(c.STATE,null,(t,o)=>y(t,o[2])),V=S(c.PARENT,"loaded",(t,o)=>{let a=o.length===3?o[2]:null;return O(t,a)}),Q=S(c.STATE,"loaded",(t,o)=>{let a=o.length===3?o[2]:null;return O(t,a)}),Y=S(c.PARENT,"open",t=>O(t)),_=S(c.STATE,"open",t=>O(t));import{Builder as $}from"@base-framework/base";var j=(t,o,a)=>{let s=t(a);if(s===void 0)return;let r=$.build(s,null,a);o.parentNode.insertBefore(r,o.nextSibling)},G=t=>f({type:"use",onCreated:t.onCreated}),J=t=>G({onCreated:(o,a)=>{j(t,o,a)}});var n=(t,o)=>({...t,children:o}),mt=t=>({...t,tag:"DOCTYPE"}),ft=e((t,o)=>n({...t,tag:"html"},o)),Ot=e((t,o)=>n({...t,tag:"script"},o)),St=e((t,o)=>n({...t,tag:"style"},o)),bt=e((t,o)=>n({...t,tag:"head"},o)),Tt=t=>({...t}),ht=t=>({...t,tag:"meta"}),yt=t=>({...t,tag:"link"}),Ct=e((t,o)=>n({...t,tag:"body"},o)),At=e((t,o)=>n(t,o)),Et=e((t,o)=>n({...t,tag:"dialog"},o)),Bt=e((t,o)=>n({...t,tag:"span"},o)),wt=e((t,o)=>n({...t,tag:"p"},o)),kt=e((t,o)=>n({...t,tag:"a"},o)),Z=e((t,o)=>n({...t,tag:"button"},o)),Lt=e((t,o)=>Z({...t,type:"submit"},o)),Rt=e((t,o)=>n({...t,tag:"ul"},o)),Dt=e((t,o)=>n({...t,tag:"li"},o)),Pt=e(t=>n({...t,tag:"img"},null)),vt=e(t=>n({...t,tag:"br"},null)),zt=e(t=>n({...t,tag:"hr"},null)),Nt=e((t,o)=>n({...t,tag:"text"},o)),Ht=e((t,o)=>n({...t,tag:"h1"},o)),It=e((t,o)=>n({...t,tag:"h2"},o)),Xt=e((t,o)=>n({...t,tag:"h3"},o)),Ut=e((t,o)=>n({...t,tag:"h4"},o)),Mt=e((t,o)=>n({...t,tag:"h5"},o)),Ft=e((t,o)=>n({...t,tag:"h6"},o)),tt=e(t=>n({...t,tag:"input"},null)),Wt=e((t,o)=>n({...t,tag:"label"},o)),qt=e(t=>tt({...t,type:"checkbox"})),Kt=e((t,o)=>n({...t,tag:"section"},o)),Vt=e((t,o)=>n({...t,tag:"article"},o)),Qt=e((t,o)=>n({...t,tag:"header"},o)),Yt=e((t,o)=>n({...t,tag:"footer"},o)),_t=e((t,o)=>n({...t,tag:"nav"},o)),$t=e((t,o)=>n({...t,tag:"aside"},o)),jt=e((t,o)=>n({...t,tag:"figure"},o)),Gt=e((t,o)=>n({...t,tag:"figcaption"},o)),Jt=e((t,o)=>n({...t,tag:"main"},o)),Zt=e((t,o)=>n({...t,tag:"video"},o)),to=e((t,o)=>n({...t,tag:"audio"},o)),oo=e((t,o)=>n({...t,tag:"table"},o)),eo=e((t,o)=>n({...t,tag:"tr"},o)),no=e((t,o)=>n({...t,tag:"th"},o)),ro=e((t,o)=>n({...t,tag:"td"},o)),ao=e((t,o)=>n({...t,tag:"thead"},o)),so=e((t,o)=>n({...t,tag:"tbody"},o)),co=e((t,o)=>n({...t,tag:"tfoot"},o)),po=e((t,o)=>n({...t,tag:"form"},o)),io=e((t,o)=>n({...t,tag:"select"},o)),xo=e((t,o)=>n({...t,tag:"option"},o)),lo=e((t,o)=>n({...t,tag:"textarea"},o)),go=e((t,o)=>n({...t,tag:"canvas"},o)),uo=e((t,o)=>n({...t,tag:"progress"},o)),mo=e((t,o)=>n({...t,tag:"blockquote"},o)),fo=e((t,o)=>n({...t,tag:"pre"},o)),Oo=e((t,o)=>n({...t,tag:"code"},o)),So=e((t,o)=>n({...t,tag:"ol"},o)),bo=e((t,o)=>n({...t,tag:"dl"},o)),To=e((t,o)=>n({...t,tag:"dt"},o)),ho=e((t,o)=>n({...t,tag:"dd"},o)),yo=e((t,o)=>n({...t,tag:"fieldset"},o)),Co=e((t,o)=>n({...t,tag:"legend"},o)),Ao=e((t,o)=>n({...t,tag:"meter"},o)),Eo=e((t,o)=>n({...t,tag:"iframe"},o)),Bo=e((t,o)=>n({...t,tag:"details"},o)),wo=e((t,o)=>n({...t,tag:"summary"},o)),ko=e((t,o)=>n({...t,tag:"em"},o)),Lo=e((t,o)=>n({...t,tag:"strong"},o)),Ro=e((t,o)=>n({...t,tag:"small"},o)),Do=e((t,o)=>n({...t,tag:"s"},o)),Po=e((t,o)=>n({...t,tag:"cite"},o)),vo=e((t,o)=>n({...t,tag:"q"},o)),zo=e((t,o)=>n({...t,tag:"dfn"},o)),No=e((t,o)=>n({...t,tag:"abbr"},o)),Ho=e((t,o)=>n({...t,tag:"data"},o)),Io=e((t,o)=>n({...t,tag:"time"},o)),Xo=e((t,o)=>n({...t,tag:"var"},o)),Uo=e((t,o)=>n({...t,tag:"samp"},o)),Mo=e((t,o)=>n({...t,tag:"kbd"},o)),Fo=e((t,o)=>n({...t,tag:"sub"},o)),Wo=e((t,o)=>n({...t,tag:"sup"},o)),qo=e((t,o)=>n({...t,tag:"i"},o)),Ko=e((t,o)=>n({...t,tag:"b"},o)),Vo=e((t,o)=>n({...t,tag:"u"},o)),Qo=e((t,o)=>n({...t,tag:"mark"},o)),Yo=e((t,o)=>n({...t,tag:"ruby"},o)),_o=e((t,o)=>n({...t,tag:"rt"},o)),$o=e((t,o)=>n({...t,tag:"rp"},o)),jo=e((t,o)=>n({...t,tag:"bdi"},o)),Go=e((t,o)=>n({...t,tag:"bdo"},o)),Jo=e(t=>n({...t,tag:"wbr"},null)),Zo=e(t=>n({...t,tag:"comment"},null));export{kt as A,No as Abbr,Vt as Article,$t as Aside,to as Audio,Ko as B,jo as Bdi,Go as Bdo,mo as Blockquote,Ct as Body,vt as Br,Z as Button,go as Canvas,qt as Checkbox,Po as Cite,Oo as Code,Zo as Comment,Ho as Data,ho as Dd,Bo as Details,zo as Dfn,Et as Dialog,At as Div,bo as Dl,mt as Doctype,To as Dt,ko as Em,yo as Fieldset,Gt as Figcaption,jt as Figure,Yt as Footer,po as Form,Ht as H1,It as H2,Xt as H3,Ut as H4,Mt as H5,Ft as H6,bt as Head,Qt as Header,zt as Hr,ft as Html,qo as I,q as If,K as IfState,Eo as Iframe,Pt as Img,tt as Input,Mo as Kbd,Wt as Label,Co as Legend,Dt as Li,yt as Link,Jt as Main,Qo as Mark,ht as Meta,Ao as Meter,_t as Nav,So as Ol,h as On,L as On2Xl,w as OnLg,V as OnLoad,B as OnMd,Y as OnOpen,W as OnRoute,E as OnSm,F as OnState,Q as OnStateLoad,_ as OnStateOpen,k as OnXl,A as OnXs,xo as Option,wt as P,fo as Pre,uo as Progress,vo as Q,$o as Rp,_o as Rt,Yo as Ruby,Do as S,Uo as Samp,Ot as Script,Kt as Section,io as Select,Ro as Small,Bt as Span,Lo as Strong,St as Style,Fo as Sub,Lt as SubmitButton,wo as Summary,Wo as Sup,oo as Table,so as Tbody,ro as Td,Nt as Text,lo as Textarea,co as Tfoot,no as Th,ao as Thead,Io as Time,Tt as Title,eo as Tr,Vo as U,Rt as Ul,J as UseParent,Xo as Var,Zt as Video,Jo as Wbr};
 //# sourceMappingURL=atoms.js.map

package/dist/atoms.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
-  "sources": ["../src/atoms.js", "../src/on/on.js", "../src/comment.js", "../src/use/use.js"],
-  "sourcesContent": ["import { Atom } from '@base-framework/base';\r\nimport { If, IfState, On, OnLoad, OnOpen, OnRoute, OnState, OnStateLoad, OnStateOpen } from './on/on.js';\r\nimport { UseParent } from './use/use.js';\r\nexport { If, IfState, On, OnLoad, OnOpen, OnRoute, OnState, OnStateLoad, OnStateOpen, UseParent };\r\n\r\n/**\r\n * Creates a generic HTML tag.\r\n *\r\n * @param {object} props - Properties for the HTML element.\r\n * @param {array} children - Children elements of the HTML element.\r\n * @returns {object} - Returns an object representing the HTML element.\r\n */\r\nconst Tag = (props, children) => {\r\n    return { ...props, children };\r\n};\r\n\r\n/**\r\n * Creates a Doctype tag.\r\n *\r\n * @param {object} props - Properties for the HTML element.\r\n * @returns {object} - Returns an object representing the HTML element.\r\n */\r\nexport const Doctype = (props) => ({ ...props, tag: 'DOCTYPE' });\r\n\r\n/**\r\n * Creates an HTML tag.\r\n *\r\n * @param {object} props - Properties for the HTML element.\r\n * @param {array} children - Children elements of the HTML element.\r\n * @returns {object} - Returns an object representing the HTML element.\r\n */\r\nexport const Html = Atom((props, children) => Tag({ ...props, tag: 'html' }, children));\r\n\r\n/**\r\n * Creates a script tag.\r\n *\r\n * @param {object} props - Properties for the HTML element.\r\n * @param {array} children - Children elements of the HTML element.\r\n * @returns {object} - Returns an object representing the HTML element.\r\n */\r\nexport const Script = Atom((props, children) => Tag({ ...props, tag: 'script' }, children));\r\n\r\n/**\r\n * Creates a style tag.\r\n *\r\n * @param {object} props - Properties for the HTML element.\r\n * @param {array} children - Children elements of the HTML element.\r\n * @returns {object} - Returns an object representing the HTML element.\r\n */\r\nexport const Style = Atom((props, children) => Tag({ ...props, tag: 'style' }, children));\r\n\r\n/**\r\n * Creates a head tag.\r\n *\r\n * @param {object} props - Properties for the head element.\r\n * @param {array} children - Children elements of the head.\r\n * @returns {object} - Returns an object representing the head element.\r\n */\r\nexport const Head = Atom((props, children) => Tag({ ...props, tag: 'head' }, children));\r\n\r\n/**\r\n * Creates a title tag.\r\n *\r\n * @param {object} props - Properties for the title element.\r\n */\r\nexport const Title = (props) =>\r\n{\r\n    return { ...props };\r\n};\r\n\r\n/**\r\n * Creates a meta tag.\r\n *\r\n * @param {object} props - Properties for the meta element.\r\n * @returns {object} - Returns an object representing the meta element.\r\n */\r\nexport const Meta = (props) => ({ ...props, tag: 'meta' });\r\n\r\n/**\r\n * Creates a link tag.\r\n *\r\n * @param {object} props - Properties for the link element.\r\n * @returns {object} - Returns an object representing the link element.\r\n */\r\nexport const Link = (props) => ({ ...props, tag: 'link' });\r\n\r\n/**\r\n * Creates a body tag.\r\n *\r\n * @param {object} props - Properties for the body element.\r\n * @param {array} children - Children elements of the body.\r\n * @returns {object} - Returns an object representing the body element.\r\n */\r\nexport const Body = Atom((props, children) => Tag({ ...props, tag: 'body' }, children));\r\n\r\n/**\r\n * Creates a div element.\r\n *\r\n * @param {object} props - Properties for the div element.\r\n * @param {array} children - Children elements of the div.\r\n * @returns {object} - Returns an object representing the div element.\r\n */\r\nexport const Div = Atom((props, children) => Tag(props, children));\r\n\r\n/**\r\n * Creates a dialog element.\r\n *\r\n * @param {object} props - Properties for the div element.\r\n * @param {array} children - Children elements of the div.\r\n * @returns {object} - Returns an object representing the dialog element.\r\n */\r\nexport const Dialog = Atom((props, children) => Tag({ ...props, tag: 'dialog' }, children));\r\n\r\n/**\r\n * Creates a span element.\r\n *\r\n * @param {object} props - Properties for the span element.\r\n * @param {array} children - Children elements of the span.\r\n * @returns {object} - Returns an object representing the span element.\r\n */\r\nexport const Span = Atom((props, children) => Tag({ ...props, tag: 'span' }, children));\r\n\r\n/**\r\n * Creates a paragraph (p) element.\r\n *\r\n * @param {object} props - Properties for the paragraph element.\r\n * @param {array} children - Children elements of the paragraph.\r\n * @returns {object} - Returns an object representing the paragraph element.\r\n */\r\nexport const P = Atom((props, children) => Tag({ ...props, tag: 'p' }, children));\r\n\r\n/**\r\n * Creates an anchor (a) element.\r\n *\r\n * @param {object} props - Properties for the anchor element.\r\n * @param {array} children - Children elements of the anchor.\r\n * @return {object} - Returns an object representing the anchor element.\r\n */\r\nexport const A = Atom((props, children) => Tag({ ...props, tag: 'a' }, children));\r\n\r\n/**\r\n * Creates a button element.\r\n *\r\n * @param {object} props - Properties for the element.\r\n * @param {array} children - Children elements.\r\n * @returns {object} - Returns an object representing the element.\r\n */\r\nexport const Button = Atom((props, children) => Tag({ ...props, tag: 'button' }, children));\r\n\r\n/**\r\n * Creates a submit button element.\r\n *\r\n * @param {object} props - Properties for the element.\r\n * @param {array} children - Children elements.\r\n * @returns {object} - Returns an object representing the element.\r\n */\r\nexport const SubmitButton = Atom((props, children) => Button({ ...props, type: 'submit' }, children));\r\n\r\n/**\r\n * Creates an unordered list (ul) element.\r\n *\r\n * @param {object} props - Properties for the element.\r\n * @param {array} children - Children elements.\r\n * @returns {object} - Returns an object representing the element.\r\n */\r\nexport const Ul = Atom((props, children) => Tag({ ...props, tag: 'ul' }, children));\r\n\r\n/**\r\n * Creates a list item (li) element.\r\n *\r\n * @param {object} props - Properties for the element.\r\n * @param {array} children - Children elements.\r\n * @returns {object} - Returns an object representing the element.\r\n */\r\nexport const Li = Atom((props, children) => Tag({ ...props, tag: 'li' }, children));\r\n\r\n/**\r\n * Creates an image (img) element.\r\n */\r\nexport const Img = Atom((props) => Tag({ ...props, tag: 'img' }, null));\r\n\r\n/**\r\n * Create a br element.\r\n *\r\n * @param {object} props - Properties for the br element.\r\n * @returns {object} - Returns an object representing the br element.\r\n */\r\nexport const Br = Atom((props) => Tag({ ...props, tag: 'br' }, null));\r\n\r\n/**\r\n * Creates a horizontal rule (hr) element.\r\n *\r\n * @param {object} props - Properties for the hr element.\r\n * @returns {object} - Returns an object representing the hr element.\r\n */\r\nexport const Hr = Atom((props) => Tag({ ...props, tag: 'hr' }, null));\r\n\r\n/**\r\n * Creates a text (text) element.\r\n *\r\n * @param {object} props - Properties for the text element.\r\n * @param {array} children - Children elements of the text element.\r\n * @returns {object} - Returns an object representing the text element.\r\n */\r\nexport const Text = Atom((props, children) => Tag({ ...props, tag: 'text' }, children));\r\n\r\n/**\r\n * Creates a header 1 (h1) element.\r\n *\r\n * @param {object} props - Properties for the h1 element.\r\n * @param {array} children - Children elements of the h1 element.\r\n * @returns {object} - Returns an object representing the h1 element.\r\n */\r\nexport const H1 = Atom((props, children) => Tag({ ...props, tag: 'h1' }, children));\r\n\r\n/**\r\n * Creates a header 2 (h2) element.\r\n *\r\n * @param {object} props - Properties for the element.\r\n * @param {array} children - Children elements.\r\n * @returns {object} - Returns an object representing the element.\r\n */\r\nexport const H2 = Atom((props, children) => Tag({ ...props, tag: 'h2' }, children));\r\n\r\n/**\r\n * Creates a header 3 (h3) element.\r\n *\r\n * @param {object} props - Properties for the element.\r\n * @param {array} children - Children elements.\r\n * @returns {object} - Returns an object representing the element.\r\n */\r\nexport const H3 = Atom((props, children) => Tag({ ...props, tag: 'h3' }, children));\r\n\r\n/**\r\n * Creates a header 4 (h4) element.\r\n *\r\n * @param {object} props - Properties for the element.\r\n * @param {array} children - Children elements.\r\n * @returns {object} - Returns an object representing the element.\r\n */\r\nexport const H4 = Atom((props, children) => Tag({ ...props, tag: 'h4' }, children));\r\n\r\n/**\r\n * Creates a header 5 (h5) element.\r\n *\r\n * @param {object} props - Properties for the element.\r\n * @param {array} children - Children elements.\r\n * @returns {object} - Returns an object representing the element.\r\n */\r\nexport const H5 = Atom((props, children) => Tag({ ...props, tag: 'h5' }, children));\r\n\r\n/**\r\n * Creates a header 6 (h6) element.\r\n *\r\n * @param {object} props - Properties for the element.\r\n * @param {array} children - Children elements.\r\n * @returns {object} - Returns an object representing the element.\r\n */\r\nexport const H6 = Atom((props, children) => Tag({ ...props, tag: 'h6' }, children));\r\n\r\n/**\r\n * Creates an input element.\r\n *\r\n * @param {object} props - Properties for the element.\r\n * @param {array} children - Children elements.\r\n * @returns {object} - Returns an object representing the element.\r\n */\r\nexport const Input = Atom((props) => Tag({ ...props, tag: 'input' }, null));\r\n\r\n/**\r\n * Creates a label element.\r\n *\r\n * @param {object} props - Properties for the element.\r\n * @param {array} children - Children elements.\r\n * @returns {object} - Returns an object representing the element.\r\n */\r\nexport const Label = Atom((props, children) => Tag({ ...props, tag: 'label' }, children));\r\n\r\n/**\r\n * Creates a checkbox input element.\r\n *\r\n * @param {object} props - Properties for the checkbox input element.\r\n * @returns {object} - Returns an object representing the checkbox input element.\r\n */\r\nexport const Checkbox = Atom((props) => Input({ ...props, type: 'checkbox' }));\r\n\r\n/**\r\n * Creates a section element.\r\n *\r\n * @param {object} props - Properties for the element.\r\n * @param {array} children - Children elements.\r\n * @returns {object} - Returns an object representing the element.\r\n */\r\nexport const Section = Atom((props, children) => Tag({ ...props, tag: 'section' }, children));\r\n\r\n/**\r\n * Creates an article element.\r\n *\r\n * @param {object} props - Properties for the element.\r\n * @param {array} children - Children elements.\r\n * @returns {object} - Returns an object representing the element.\r\n */\r\nexport const Article = Atom((props, children) => Tag({ ...props, tag: 'article' }, children));\r\n\r\n/**\r\n * Creates a header (header) element.\r\n *\r\n * @param {object} props - Properties for the element.\r\n * @param {array} children - Children elements.\r\n * @returns {object} - Returns an object representing the element.\r\n */\r\nexport const Header = Atom((props, children) => Tag({ ...props, tag: 'header' }, children));\r\n\r\n/**\r\n * Creates a footer element.\r\n *\r\n * @param {object} props - Properties for the element.\r\n * @param {array} children - Children elements.\r\n * @returns {object} - Returns an object representing the element.\r\n */\r\nexport const Footer = Atom((props, children) => Tag({ ...props, tag: 'footer' }, children));\r\n\r\n/**\r\n * Creates a nav element.\r\n *\r\n * @param {object} props - Properties for the element.\r\n * @param {array} children - Children elements.\r\n * @returns {object} - Returns an object representing the element.\r\n */\r\nexport const Nav = Atom((props, children) => Tag({ ...props, tag: 'nav' }, children));\r\n\r\n/**\r\n * Creates an aside element.\r\n *\r\n * @param {object} props - Properties for the element.\r\n * @param {array} children - Children elements.\r\n * @returns {object} - Returns an object representing the element.\r\n */\r\nexport const Aside = Atom((props, children) => Tag({ ...props, tag: 'aside' }, children));\r\n\r\n/**\r\n * Creates a figure element.\r\n *\r\n * @param {object} props - Properties for the element.\r\n * @param {array} children - Children elements.\r\n * @returns {object} - Returns an object representing the element.\r\n */\r\nexport const Figure = Atom((props, children) => Tag({ ...props, tag: 'figure' }, children));\r\n\r\n/**\r\n * Creates a figcaption element.\r\n *\r\n * @param {object} props - Properties for the element.\r\n * @param {array} children - Children elements.\r\n * @returns {object} - Returns an object representing the element.\r\n */\r\nexport const Figcaption = Atom((props, children) => Tag({ ...props, tag: 'figcaption' }, children));\r\n\r\n/**\r\n * Creates a main element.\r\n *\r\n * @param {object} props - Properties for the element.\r\n * @param {array} children - Children elements.\r\n * @returns {object} - Returns an object representing the element.\r\n */\r\nexport const Main = Atom((props, children) => Tag({ ...props, tag: 'main' }, children));\r\n\r\n/**\r\n * Creates a video element.\r\n *\r\n * @param {object} props - Properties for the element.\r\n * @param {array} children - Children elements.\r\n * @returns {object} - Returns an object representing the element.\r\n */\r\nexport const Video = Atom((props, children) => Tag({ ...props, tag: 'video' }, children));\r\n\r\n/**\r\n * Creates an audio element.\r\n *\r\n * @param {object} props - Properties for the element.\r\n * @param {array} children - Children elements.\r\n * @returns {object} - Returns an object representing the element.\r\n */\r\nexport const Audio = Atom((props, children) => Tag({ ...props, tag: 'audio' }, children));\r\n\r\n/**\r\n * Creates a table element.\r\n *\r\n * @param {object} props - Properties for the element.\r\n * @param {array} children - Children elements.\r\n * @returns {object} - Returns an object representing the element.\r\n */\r\nexport const Table = Atom((props, children) => Tag({ ...props, tag: 'table' }, children));\r\n\r\n/**\r\n * Creates a table row (tr) element.\r\n *\r\n * @param {object} props - Properties for the element.\r\n * @param {array} children - Children elements.\r\n * @returns {object} - Returns an object representing the element.\r\n */\r\nexport const Tr = Atom((props, children) => Tag({ ...props, tag: 'tr' }, children));\r\n\r\n/**\r\n * Creates a table header (th) element.\r\n *\r\n * @param {object} props - Properties for the element.\r\n * @param {array} children - Children elements.\r\n * @returns {object} - Returns an object representing the element.\r\n */\r\nexport const Th = Atom((props, children) => Tag({ ...props, tag: 'th' }, children));\r\n\r\n/**\r\n * Creates a table data (td) element.\r\n *\r\n * @param {object} props - Properties for the element.\r\n * @param {array} children - Children elements.\r\n * @returns {object} - Returns an object representing the element.\r\n */\r\nexport const Td = Atom((props, children) => Tag({ ...props, tag: 'td' }, children));\r\n\r\n/**\r\n * Creates a table header group (thead) element.\r\n *\r\n * @param {object} props - Properties for the element.\r\n * @param {array} children - Children elements.\r\n * @returns {object} - Returns an object representing the element.\r\n */\r\nexport const Thead = Atom((props, children) => Tag({ ...props, tag: 'thead' }, children));\r\n\r\n/**\r\n * Creates a table body (tbody) element.\r\n *\r\n * @param {object} props - Properties for the element.\r\n * @param {array} children - Children elements.\r\n * @returns {object} - Returns an object representing the element.\r\n */\r\nexport const Tbody = Atom((props, children) => Tag({ ...props, tag: 'tbody' }, children));\r\n\r\n/**\r\n * Creates a table footer (tfoot) element.\r\n *\r\n * @param {object} props - Properties for the element.\r\n * @param {array} children - Children elements.\r\n * @returns {object} - Returns an object representing the element.\r\n */\r\nexport const Tfoot = Atom((props, children) => Tag({ ...props, tag: 'tfoot' }, children));\r\n\r\n/**\r\n * Creates a form element.\r\n *\r\n * @param {object} props - Properties for the element.\r\n * @param {array} children - Children elements.\r\n * @returns {object} - Returns an object representing the element.\r\n */\r\nexport const Form = Atom((props, children) => Tag({ ...props, tag: 'form' }, children));\r\n\r\n/**\r\n * Creates a select element.\r\n *\r\n * @param {object} props - Properties for the element.\r\n * @param {array} children - Children elements.\r\n * @returns {object} - Returns an object representing the element.\r\n */\r\nexport const Select = Atom((props, children) => Tag({ ...props, tag: 'select' }, children));\r\n\r\n/**\r\n * Creates an option element for a select tag.\r\n *\r\n * @param {object} props - Properties for the element.\r\n * @param {array} children - Children elements.\r\n * @returns {object} - Returns an object representing the element.\r\n */\r\nexport const Option = Atom((props, children) => Tag({ ...props, tag: 'option' }, children));\r\n\r\n/**\r\n * Creates a textarea element.\r\n *\r\n * @param {object} props - Properties for the element.\r\n * @param {array} children - Children elements.\r\n * @returns {object} - Returns an object representing the element.\r\n */\r\nexport const Textarea = Atom((props, children) => Tag({ ...props, tag: 'textarea' }, children));\r\n\r\n/**\r\n * Creates a canvas element.\r\n *\r\n * @param {object} props - Properties for the element.\r\n * @param {array} children - Children elements.\r\n * @returns {object} - Returns an object representing the element.\r\n */\r\nexport const Canvas = Atom((props, children) => Tag({ ...props, tag: 'canvas' }, children));\r\n\r\n/**\r\n * Creates a progress element.\r\n *\r\n * @param {object} props - Properties for the element.\r\n * @param {array} children - Children elements.\r\n * @returns {object} - Returns an object representing the element.\r\n */\r\nexport const Progress = Atom((props, children) => Tag({ ...props, tag: 'progress' }, children));\r\n\r\n/**\r\n * Creates a blockquote element.\r\n *\r\n * @param {object} props - Properties for the element.\r\n * @param {array} children - Children elements.\r\n * @returns {object} - Returns an object representing the element.\r\n */\r\nexport const Blockquote = Atom((props, children) => Tag({ ...props, tag: 'blockquote' }, children));\r\n\r\n/**\r\n * Creates a preformatted text (pre) element.\r\n *\r\n * @param {object} props - Properties for the element.\r\n * @param {array} children - Children elements.\r\n * @returns {object} - Returns an object representing the element.\r\n */\r\nexport const Pre = Atom((props, children) => Tag({ ...props, tag: 'pre' }, children));\r\n\r\n/**\r\n * Creates a code element.\r\n *\r\n * @param {object} props - Properties for the element.\r\n * @param {array} children - Children elements.\r\n * @returns {object} - Returns an object representing the element.\r\n */\r\nexport const Code = Atom((props, children) => Tag({ ...props, tag: 'code' }, children));\r\n\r\n/**\r\n * Creates an ordered list (ol) element.\r\n *\r\n * @param {object} props - Properties for the element.\r\n * @param {array} children - Children elements.\r\n * @returns {object} - Returns an object representing the element.\r\n */\r\nexport const Ol = Atom((props, children) => Tag({ ...props, tag: 'ol' }, children));\r\n\r\n/**\r\n * Creates a definition list (dl) element.\r\n *\r\n * @param {object} props - Properties for the element.\r\n * @param {array} children - Children elements.\r\n * @returns {object} - Returns an object representing the element.\r\n */\r\nexport const Dl = Atom((props, children) => Tag({ ...props, tag: 'dl' }, children));\r\n\r\n/**\r\n * Creates a definition term (dt) element.\r\n *\r\n * @param {object} props - Properties for the element.\r\n * @param {array} children - Children elements.\r\n * @returns {object} - Returns an object representing the element.\r\n */\r\nexport const Dt = Atom((props, children) => Tag({ ...props, tag: 'dt' }, children));\r\n\r\n/**\r\n * Creates a definition description (dd) element.\r\n *\r\n * @param {object} props - Properties for the element.\r\n * @param {array} children - Children elements.\r\n * @returns {object} - Returns an object representing the element.\r\n */\r\nexport const Dd = Atom((props, children) => Tag({ ...props, tag: 'dd' }, children));\r\n\r\n/**\r\n * Creates a fieldset element.\r\n *\r\n * @param {object} props - Properties for the element.\r\n * @param {array} children - Children elements.\r\n * @returns {object} - Returns an object representing the element.\r\n */\r\nexport const Fieldset = Atom((props, children) => Tag({ ...props, tag: 'fieldset' }, children));\r\n\r\n/**\r\n * Creates a legend element.\r\n *\r\n * @param {object} props - Properties for the element.\r\n * @param {array} children - Children elements.\r\n * @returns {object} - Returns an object representing the element.\r\n */\r\nexport const Legend = Atom((props, children) => Tag({ ...props, tag: 'legend' }, children));\r\n\r\n/**\r\n * Creates a meter element.\r\n *\r\n * @param {object} props - Properties for the element.\r\n * @param {array} children - Children elements.\r\n * @returns {object} - Returns an object representing the element.\r\n */\r\nexport const Meter = Atom((props, children) => Tag({ ...props, tag: 'meter' }, children));\r\n\r\n/**\r\n * Creates an iframe element.\r\n *\r\n * @param {object} props - Properties for the element.\r\n * @param {array} children - Children elements.\r\n * @returns {object} - Returns an object representing the element.\r\n */\r\nexport const Iframe = Atom((props, children) => Tag({ ...props, tag: 'iframe' }, children));\r\n\r\n/**\r\n * Creates a details element.\r\n *\r\n * @param {object} props - Properties for the element.\r\n * @param {array} children - Children elements.\r\n * @returns {object} - Returns an object representing the element.\r\n */\r\nexport const Details = Atom((props, children) => Tag({ ...props, tag: 'details' }, children));\r\n\r\n/**\r\n * Creates a summary element.\r\n *\r\n * @param {object} props - Properties for the element.\r\n * @param {array} children - Children elements.\r\n * @returns {object} - Returns an object representing the element.\r\n */\r\nexport const Summary = Atom((props, children) => Tag({ ...props, tag: 'summary' }, children));\r\n\r\n/**\r\n * Creates an em element.\r\n *\r\n * @param {object} props - Properties for the element.\r\n * @param {array} children - Children elements.\r\n * @returns {object} - Returns an object representing the element.\r\n */\r\nexport const Em = Atom((props, children) => Tag({ ...props, tag: 'em' }, children));\r\n\r\n/**\r\n * Creates a strong element.\r\n *\r\n * @param {object} props - Properties for the element.\r\n * @param {array} children - Children elements.\r\n * @returns {object} - Returns an object representing the element.\r\n */\r\nexport const Strong = Atom((props, children) => Tag({ ...props, tag: 'strong' }, children));\r\n\r\n/**\r\n * Creates a small element.\r\n *\r\n * @param {object} props - Properties for the element.\r\n * @param {array} children - Children elements.\r\n * @returns {object} - Returns an object representing the element.\r\n */\r\nexport const Small = Atom((props, children) => Tag({ ...props, tag: 'small' }, children));\r\n\r\n/**\r\n * Creates a s element (strikethrough).\r\n *\r\n * @param {object} props - Properties for the element.\r\n * @param {array} children - Children elements.\r\n * @returns {object} - Returns an object representing the element.\r\n */\r\nexport const S = Atom((props, children) => Tag({ ...props, tag: 's' }, children));\r\n\r\n/**\r\n * Creates a cite element.\r\n *\r\n * @param {object} props - Properties for the element.\r\n * @param {array} children - Children elements.\r\n * @returns {object} - Returns an object representing the element.\r\n */\r\nexport const Cite = Atom((props, children) => Tag({ ...props, tag: 'cite' }, children));\r\n\r\n/**\r\n * Creates a q element (inline quotation).\r\n */\r\nexport const Q = Atom((props, children) => Tag({ ...props, tag: 'q' }, children));\r\n\r\n/**\r\n * Creates a dfn element (definition element).\r\n *\r\n * @param {object} props - Properties for the element.\r\n * @param {array} children - Children elements.\r\n * @returns {object} - Returns an object representing the element.\r\n */\r\nexport const Dfn = Atom((props, children) => Tag({ ...props, tag: 'dfn' }, children));\r\n\r\n/**\r\n * Creates an abbr element (abbreviation).\r\n *\r\n * @param {object} props - Properties for the element.\r\n * @param {array} children - Children elements.\r\n * @returns {object} - Returns an object representing the element.\r\n */\r\nexport const Abbr = Atom((props, children) => Tag({ ...props, tag: 'abbr' }, children));\r\n\r\n/**\r\n * Creates a data element.\r\n *\r\n * @param {object} props - Properties for the element.\r\n * @param {array} children - Children elements.\r\n * @returns {object} - Returns an object representing the element.\r\n */\r\nexport const Data = Atom((props, children) => Tag({ ...props, tag: 'data' }, children));\r\n\r\n/**\r\n * Creates a time element.\r\n *\r\n * @param {object} props - Properties for the element.\r\n * @param {array} children - Children elements.\r\n * @returns {object} - Returns an object representing the element.\r\n */\r\nexport const Time = Atom((props, children) => Tag({ ...props, tag: 'time' }, children));\r\n\r\n/**\r\n * Creates a var element (variable).\r\n *\r\n * @param {object} props - Properties for the element.\r\n * @param {array} children - Children elements.\r\n * @returns {object} - Returns an object representing the element.\r\n */\r\nexport const Var = Atom((props, children) => Tag({ ...props, tag: 'var' }, children));\r\n\r\n/**\r\n * Creates a samp element (sample output).\r\n *\r\n * @param {object} props - Properties for the element.\r\n * @param {array} children - Children elements.\r\n * @returns {object} - Returns an object representing the element.\r\n */\r\nexport const Samp = Atom((props, children) => Tag({ ...props, tag: 'samp' }, children));\r\n\r\n/**\r\n * Creates a kbd element (keyboard input).\r\n *\r\n * @param {object} props - Properties for the element.\r\n * @param {array} children - Children elements.\r\n * @returns {object} - Returns an object representing the element.\r\n */\r\nexport const Kbd = Atom((props, children) => Tag({ ...props, tag: 'kbd' }, children));\r\n\r\n/**\r\n * Creates a sub element (subscript).\r\n *\r\n * @param {object} props - Properties for the element.\r\n * @param {array} children - Children elements.\r\n * @returns {object} - Returns an object representing the element.\r\n */\r\nexport const Sub = Atom((props, children) => Tag({ ...props, tag: 'sub' }, children));\r\n\r\n/**\r\n * Creates a sup element (superscript).\r\n *\r\n * @param {object} props - Properties for the element.\r\n * @param {array} children - Children elements.\r\n * @returns {object} - Returns an object representing the element.\r\n */\r\nexport const Sup = Atom((props, children) => Tag({ ...props, tag: 'sup' }, children));\r\n\r\n/**\r\n * Creates an i element (italic).\r\n *\r\n * @param {object} props - Properties for the element.\r\n * @param {array} children - Children elements.\r\n * @returns {object} - Returns an object representing the element.\r\n */\r\nexport const I = Atom((props, children) => Tag({ ...props, tag: 'i' }, children));\r\n\r\n/**\r\n * Creates a b element (bold).\r\n *\r\n * @param {object} props - Properties for the element.\r\n * @param {array} children - Children elements.\r\n * @returns {object} - Returns an object representing the element.\r\n */\r\nexport const B = Atom((props, children) => Tag({ ...props, tag: 'b' }, children));\r\n\r\n/**\r\n * Creates a u element (underline).\r\n *\r\n * @param {object} props - Properties for the element.\r\n * @param {array} children - Children elements.\r\n * @returns {object} - Returns an object representing the element.\r\n */\r\nexport const U = Atom((props, children) => Tag({ ...props, tag: 'u' }, children));\r\n\r\n/**\r\n * Creates a mark element.\r\n *\r\n * @param {object} props - Properties for the element.\r\n * @param {array} children - Children elements.\r\n * @returns {object} - Returns an object representing the element.\r\n */\r\nexport const Mark = Atom((props, children) => Tag({ ...props, tag: 'mark' }, children));\r\n\r\n/**\r\n * Creates a ruby element (for East Asian typography).\r\n *\r\n * @param {object} props - Properties for the element.\r\n * @param {array} children - Children elements.\r\n * @returns {object} - Returns an object representing the element.\r\n */\r\nexport const Ruby = Atom((props, children) => Tag({ ...props, tag: 'ruby' }, children));\r\n\r\n/**\r\n * Creates an rt element (explanation/pronunciation of characters in East Asian typography).\r\n *\r\n * @param {object} props - Properties for the element.\r\n * @param {array} children - Children elements.\r\n * @returns {object} - Returns an object representing the element.\r\n */\r\nexport const Rt = Atom((props, children) => Tag({ ...props, tag: 'rt' }, children));\r\n\r\n/**\r\n * Creates an rp element (for East Asian fallback parenthesis).\r\n *\r\n * @param {object} props - Properties for the element.\r\n * @param {array} children - Children elements.\r\n * @returns {object} - Returns an object representing the element.\r\n */\r\nexport const Rp = Atom((props, children) => Tag({ ...props, tag: 'rp' }, children));\r\n\r\n/**\r\n * Creates a bdi element (Bi-Directional Isolation).\r\n *\r\n * @param {object} props - Properties for the element.\r\n * @param {array} children - Children elements.\r\n * @returns {object} - Returns an object representing the element.\r\n */\r\nexport const Bdi = Atom((props, children) => Tag({ ...props, tag: 'bdi' }, children));\r\n\r\n/**\r\n * Creates a bdo element (Bi-Directional Override).\r\n *\r\n * @param {object} props - Properties for the element.\r\n * @param {array} children - Children elements.\r\n * @returns {object} - Returns an object representing the element.\r\n */\r\nexport const Bdo = Atom((props, children) => Tag({ ...props, tag: 'bdo' }, children));\r\n\r\n/**\r\n * Creates a wbr element (Word Break Opportunity).\r\n *\r\n * @param {object} props - Properties for the element.\r\n * @param {array} children - Children elements.\r\n * @returns {object} - Returns an object representing the element.\r\n */\r\nexport const Wbr = Atom((props) => Tag({ ...props, tag: 'wbr' }, null));\r\n\r\n/**\r\n * This will create a comment.\r\n *\r\n * @param {object} props\r\n * @returns {object}\r\n */\r\nexport const Comment = Atom((props) => Tag({ ...props, tag: 'comment' }, null));", "import { Builder, dataBinder } from \"@base-framework/base\";\r\nimport { Comment as BaseComment } from \"src/comment.js\";\r\n\r\n/**\r\n * This will set a previous result.\r\n *\r\n * @private\r\n * @param {object} parent\r\n * @param {string} prop\r\n * @param {string} value\r\n * @param {object} result\r\n * @returns {*}\r\n */\r\nconst checkPreviousResult = (parent, prop, value, result) =>\r\n{\r\n\tif (!parent || !result)\r\n\t{\r\n\t\treturn result;\r\n\t}\r\n\r\n\treturn result;\r\n};\r\n\r\n/**\r\n * This will set up the update layout function.\r\n *\r\n * @param {function} callBack\r\n * @param {object} ele\r\n * @param {string} prop\r\n * @param {object} parent\r\n * @returns {function}\r\n */\r\nconst updateLayout = (callBack, ele, prop, parent) =>\r\n{\r\n\t/**\r\n\t * This will hold the previous child element to\r\n\t * help remove it when updating.\r\n\t *\r\n\t * @type {(object|null)} prevEle\r\n\t */\r\n\tlet prevEle = null;\r\n\r\n\t/**\r\n\t * This will update the layout.\r\n\t *\r\n\t * @param {object} value\r\n\t * @returns {void}\r\n\t */\r\n\treturn (value) =>\r\n\t{\r\n\t\tlet layout = callBack(value, ele, parent);\r\n\t\tif (layout === undefined)\r\n\t\t{\r\n\t\t\treturn;\r\n\t\t}\r\n\r\n\t\t/**\r\n\t\t * This will remove the previous element if it exists.\r\n\t\t */\r\n\t\tif (prevEle)\r\n\t\t{\r\n\t\t\tBuilder.removeNode(prevEle);\r\n\t\t}\r\n\r\n\t\t/**\r\n\t\t * This will set the previous result if needed.\r\n\t\t */\r\n\t\tlayout = checkPreviousResult(parent, prop, value, layout);\r\n\r\n\t\t/**\r\n\t\t * This will build the layout and insert it after the\r\n\t\t * comment element.\r\n\t\t */\r\n\t\tconst frag = Builder.build(layout, null, parent);\r\n\t\tprevEle = frag.children[0];\r\n\r\n\t\tele.parentNode.insertBefore(frag, ele.nextSibling);\r\n\t};\r\n};\r\n\r\n/**\r\n * This will create a comment.\r\n *\r\n * @param {object} props\r\n * @returns {object}\r\n */\r\nconst Comment = (props) => BaseComment({\r\n\ttype: 'on',\r\n\tonCreated: props.onCreated\r\n});\r\n\r\n/**\r\n * This will get the parent set data.\r\n *\r\n * @param {object} parent\r\n * @returns {object|null}\r\n */\r\nexport const getParentData = (parent) =>\r\n{\r\n\tif (parent.data)\r\n\t{\r\n\t\treturn parent.data;\r\n\t}\r\n\r\n\tif (parent.context && parent.context.data)\r\n\t{\r\n\t\treturn parent.context.data;\r\n\t}\r\n\r\n\tif (parent.state)\r\n\t{\r\n\t\treturn parent.state;\r\n\t}\r\n\r\n\treturn null;\r\n};\r\n\r\n/**\r\n * This will create an on data tag.\r\n *\r\n * @overload\r\n * @param {object} data\r\n * @param {string} prop\r\n * @param {function} callBack\r\n *\r\n * @overload\r\n * @param {string} prop\r\n * @param {function} callBack\r\n *\r\n * @returns {object}\r\n */\r\nexport const On = (...args) =>\r\n{\r\n\tconst settings = [...args];\r\n\tconst callBack = settings.pop();\r\n\tif (typeof callBack !== 'function')\r\n\t{\r\n\t\treturn;\r\n\t}\r\n\r\n\t/**\r\n\t * This will create a comment to use as a placeholder\r\n\t * to keep the layout in place.\r\n\t */\r\n\treturn Comment({\r\n\t\tonCreated: (ele, parent) =>\r\n\t\t{\r\n\t\t\tif (settings.length < 2)\r\n\t\t\t{\r\n\t\t\t\t/**\r\n\t\t\t\t * This will get the parent data and add it to the\r\n\t\t\t\t * settings array.\r\n\t\t\t\t */\r\n\t\t\t\tconst data = getParentData(parent);\r\n\t\t\t\tsettings.unshift(data);\r\n\t\t\t}\r\n\r\n\t\t\tconst update = updateLayout(callBack, ele, settings[1], parent);\r\n\t\t\tdataBinder.watch(ele, settings[0], settings[1], update);\r\n\t\t}\r\n\t});\r\n};\r\n\r\n/**\r\n * This will create an on state tag.\r\n *\r\n * @overload\r\n * @param {object} data\r\n * @param {string} prop\r\n * @param {function} callBack\r\n *\r\n * @overload\r\n * @param {string} prop\r\n * @param {function} callBack\r\n *\r\n * @returns {object}\r\n */\r\nexport const OnState = (...args) =>\r\n{\r\n\tconst settings = [...args];\r\n\tconst callBack = settings.pop();\r\n\tif (typeof callBack !== 'function')\r\n\t{\r\n\t\treturn;\r\n\t}\r\n\r\n\t/**\r\n\t * This will create a comment to use as a placeholder\r\n\t * to keep the layout in place.\r\n\t */\r\n\treturn Comment({\r\n\t\tonCreated: (ele, parent) =>\r\n\t\t{\r\n\t\t\tif (settings.length < 2)\r\n\t\t\t{\r\n\t\t\t\tconst data = parent.state;\r\n\t\t\t\tsettings.unshift(data);\r\n\t\t\t}\r\n\r\n\t\t\tconst update = updateLayout(callBack, ele, settings[1], parent);\r\n\t\t\tdataBinder.watch(ele, settings[0], settings[1], update);\r\n\t\t}\r\n\t});\r\n};\r\n\r\n/**\r\n * This will create an on route tag.\r\n *\r\n * @overload\r\n * @param {object} data\r\n * @param {string} prop\r\n * @param {function} callBack\r\n *\r\n * @overload\r\n * @param {string} prop\r\n * @param {function} callBack\r\n *\r\n * @returns {object}\r\n */\r\nexport const OnRoute = (...args) =>\r\n{\r\n\t/**\r\n\t * This will create a comment to use as a placeholder\r\n\t * to keep the layout in place.\r\n\t */\r\n\treturn Comment({\r\n\t\tonCreated: (ele, parent) =>\r\n\t\t{\r\n\t\t\tconst settings = [...args];\r\n\t\t\tconst callBack = settings.pop();\r\n\t\t\tif (typeof callBack !== 'function')\r\n\t\t\t{\r\n\t\t\t\treturn;\r\n\t\t\t}\r\n\r\n\t\t\tif (settings.length < 2)\r\n\t\t\t{\r\n\t\t\t\tsettings.unshift(parent.route);\r\n\t\t\t}\r\n\r\n\t\t\tconst update = updateLayout(callBack, ele, settings[1], parent);\r\n\t\t\tdataBinder.watch(ele, settings[0], settings[1], update);\r\n\t\t}\r\n\t});\r\n};\r\n\r\n/**\r\n * This will create an if data tag.\r\n *\r\n * @overload\r\n * @param {object} data\r\n * @param {string} prop\r\n * @param {*} value\r\n * @param {function} callBack\r\n *\r\n * @overload\r\n * @param {string} prop\r\n * @param {*} value\r\n * @param {function} callBack\r\n *\r\n * @returns {object}\r\n */\r\nexport const If = (...args) =>\r\n{\r\n\tconst settings = [...args];\r\n\tconst callBack = settings.pop();\r\n\tif (typeof callBack !== 'function')\r\n\t{\r\n\t\treturn;\r\n\t}\r\n\r\n\t/**\r\n\t * This will create a comment to use as a placeholder\r\n\t * to keep the layout in place.\r\n\t */\r\n\treturn Comment({\r\n\t\tonCreated: (ele, parent) =>\r\n\t\t{\r\n\t\t\tif (settings.length < 3)\r\n\t\t\t{\r\n\t\t\t\t/**\r\n\t\t\t\t * This will get the parent data and add it to the\r\n\t\t\t\t * settings array.\r\n\t\t\t\t */\r\n\t\t\t\tconst data = getParentData(parent);\r\n\t\t\t\tsettings.unshift(data);\r\n\t\t\t}\r\n\r\n\t\t\t/**\r\n\t\t\t * This will check if the value is set and\r\n\t\t\t * if it matches the setting value.\r\n\t\t\t */\r\n\t\t\tconst settingValue = settings[2];\r\n\t\t\tconst updateCallback = (value, ele, parent) =>\r\n\t\t\t{\r\n\t\t\t\treturn (value === settingValue)? callBack(value, ele, parent) : null;\r\n\t\t\t};\r\n\r\n\t\t\tconst update = updateLayout(updateCallback, ele, settings[1], parent);\r\n\t\t\tdataBinder.watch(ele, settings[0], settings[1], update);\r\n\t\t}\r\n\t});\r\n};\r\n\r\n/**\r\n * This will create an if state tag.\r\n *\r\n * @overload\r\n * @param {object} data\r\n * @param {string} prop\r\n * @param {*} value\r\n * @param {function} callBack\r\n *\r\n * @overload\r\n * @param {string} prop\r\n * @param {*} value\r\n * @param {function} callBack\r\n *\r\n * @returns {object}\r\n */\r\nexport const IfState = (...args) =>\r\n{\r\n\tconst settings = [...args];\r\n\tconst callBack = settings.pop();\r\n\tif (typeof callBack !== 'function')\r\n\t{\r\n\t\treturn;\r\n\t}\r\n\r\n\t/**\r\n\t * This will create a comment to use as a placeholder\r\n\t * to keep the layout in place.\r\n\t */\r\n\treturn Comment({\r\n\t\tonCreated: (ele, parent) =>\r\n\t\t{\r\n\t\t\tif (settings.length < 3)\r\n\t\t\t{\r\n\t\t\t\tconst data = parent.state;\r\n\t\t\t\tsettings.unshift(data);\r\n\t\t\t}\r\n\r\n\t\t\t/**\r\n\t\t\t * This will check if the value is set and\r\n\t\t\t * if it matches the setting value.\r\n\t\t\t */\r\n\t\t\tconst settingValue = settings[2];\r\n\t\t\tconst updateCallback = (value, ele, parent) =>\r\n\t\t\t{\r\n\t\t\t\treturn (value === settingValue)? callBack(value, ele, parent) : null;\r\n\t\t\t};\r\n\r\n\t\t\tconst update = updateLayout(updateCallback, ele, settings[1], parent);\r\n\t\t\tdataBinder.watch(ele, settings[0], settings[1], update);\r\n\t\t}\r\n\t});\r\n};\r\n\r\n/**\r\n * This will create an on load data tag.\r\n *\r\n * @overload\r\n * @param {object} data\r\n * @param {function} callBack\r\n * @param {function|object|null} [notLoaded=null]\r\n *\r\n * @overload\r\n * @param {function} callBack\r\n * @param {function|object|null} [notLoaded=null]\r\n *\r\n * @returns {object}\r\n */\r\nexport const OnLoad = (...args) =>\r\n{\r\n\tconst settings = [...args];\r\n\tconst callBack = (typeof settings[0] === 'function') ? settings[0] : settings[1];\r\n\tif (typeof callBack !== 'function')\r\n\t{\r\n\t\treturn;\r\n\t}\r\n\r\n\t/**\r\n\t * This will create a comment to use as a placeholder\r\n\t * to keep the layout in place.\r\n\t */\r\n\treturn Comment({\r\n\t\tonCreated: (ele, parent) =>\r\n\t\t{\r\n\t\t\tif (settings.length < 2)\r\n\t\t\t{\r\n\t\t\t\t/**\r\n\t\t\t\t * This will get the parent data and add it to the\r\n\t\t\t\t * settings array.\r\n\t\t\t\t */\r\n\t\t\t\tconst data = getParentData(parent);\r\n\t\t\t\tsettings.unshift(data);\r\n\t\t\t}\r\n\r\n\t\t\tconst notLoaded = (settings.length === 3)? settings[2] : null;\r\n\r\n\t\t\t/**\r\n\t\t\t * This will check if the value is set and\r\n\t\t\t * if it matches the setting value.\r\n\t\t\t */\r\n\t\t\tconst settingValue = true;\r\n\t\t\tconst updateCallback = (value, ele, parent) =>\r\n\t\t\t{\r\n\t\t\t\treturn (value === settingValue)? callBack(value, ele, parent) : notLoaded;\r\n\t\t\t};\r\n\r\n\t\t\tconst prop = 'loaded';\r\n\t\t\tconst update = updateLayout(updateCallback, ele, prop, parent);\r\n\t\t\tdataBinder.watch(ele, settings[0], prop, update);\r\n\t\t}\r\n\t});\r\n};\r\n\r\n/**\r\n * This will create an on load data tag.\r\n *\r\n * @overload\r\n * @param {object} data\r\n * @param {function} callBack\r\n * @param {function|object|null} [notLoaded=null]\r\n *\r\n * @overload\r\n * @param {function} callBack\r\n * @param {function|object|null} [notLoaded=null]\r\n *\r\n * @returns {object}\r\n */\r\nexport const OnStateLoad = (...args) =>\r\n{\r\n\tconst settings = [...args];\r\n\tconst callBack = (typeof settings[0] === 'function') ? settings[0] : settings[1];\r\n\tif (typeof callBack !== 'function')\r\n\t{\r\n\t\treturn;\r\n\t}\r\n\r\n\t/**\r\n\t * This will create a comment to use as a placeholder\r\n\t * to keep the layout in place.\r\n\t */\r\n\treturn Comment({\r\n\t\tonCreated: (ele, parent) =>\r\n\t\t{\r\n\t\t\tif (settings.length < 2)\r\n\t\t\t{\r\n\t\t\t\t/**\r\n\t\t\t\t * This will get the parent data and add it to the\r\n\t\t\t\t * settings array.\r\n\t\t\t\t */\r\n\t\t\t\tconst data = parent.state;\r\n\t\t\t\tsettings.unshift(data);\r\n\t\t\t}\r\n\r\n\t\t\tconst notLoaded = (settings.length === 3)? settings[2] : null;\r\n\r\n\t\t\t/**\r\n\t\t\t * This will check if the value is set and\r\n\t\t\t * if it matches the setting value.\r\n\t\t\t */\r\n\t\t\tconst settingValue = true;\r\n\t\t\tconst updateCallback = (value, ele, parent) =>\r\n\t\t\t{\r\n\t\t\t\treturn (value === settingValue)? callBack(value, ele, parent) : notLoaded;\r\n\t\t\t};\r\n\r\n\t\t\tconst prop = 'loaded';\r\n\t\t\tconst update = updateLayout(updateCallback, ele, prop, parent);\r\n\t\t\tdataBinder.watch(ele, settings[0], prop, update);\r\n\t\t}\r\n\t});\r\n};\r\n\r\n/**\r\n * This will create an on load data tag.\r\n *\r\n * @overload\r\n * @param {object} data\r\n * @param {function} callBack\r\n * @param {function|object|null} [notLoaded=null]\r\n *\r\n * @overload\r\n * @param {function} callBack\r\n * @param {function|object|null} [notLoaded=null]\r\n *\r\n * @returns {object}\r\n */\r\nexport const OnOpen = (...args) =>\r\n{\r\n\tconst settings = [...args];\r\n\tconst callBack = (typeof settings[0] === 'function') ? settings[0] : settings[1];\r\n\tif (typeof callBack !== 'function')\r\n\t{\r\n\t\treturn;\r\n\t}\r\n\r\n\t/**\r\n\t * This will create a comment to use as a placeholder\r\n\t * to keep the layout in place.\r\n\t */\r\n\treturn Comment({\r\n\t\tonCreated: (ele, parent) =>\r\n\t\t{\r\n\t\t\tif (settings.length < 2)\r\n\t\t\t{\r\n\t\t\t\t/**\r\n\t\t\t\t * This will get the parent data and add it to the\r\n\t\t\t\t * settings array.\r\n\t\t\t\t */\r\n\t\t\t\tconst data = getParentData(parent);\r\n\t\t\t\tsettings.unshift(data);\r\n\t\t\t}\r\n\r\n\t\t\tconst notOpen = null;\r\n\r\n\t\t\t/**\r\n\t\t\t * This will check if the value is set and\r\n\t\t\t * if it matches the setting value.\r\n\t\t\t */\r\n\t\t\tconst settingValue = true;\r\n\t\t\tconst updateCallback = (value, ele, parent) =>\r\n\t\t\t{\r\n\t\t\t\treturn (value == settingValue)? callBack(value, ele, parent) : notOpen;\r\n\t\t\t};\r\n\r\n\t\t\tconst prop = 'open';\r\n\t\t\tconst update = updateLayout(updateCallback, ele, prop, parent);\r\n\t\t\tdataBinder.watch(ele, settings[0], prop, update);\r\n\t\t}\r\n\t});\r\n};\r\n\r\n/**\r\n * This will create an on load data tag.\r\n *\r\n * @overload\r\n * @param {object} data\r\n * @param {function} callBack\r\n * @param {function|object|null} [notLoaded=null]\r\n *\r\n * @overload\r\n * @param {function} callBack\r\n * @param {function|object|null} [notLoaded=null]\r\n *\r\n * @returns {object}\r\n */\r\nexport const OnStateOpen = (...args) =>\r\n{\r\n\tconst settings = [...args];\r\n\tconst callBack = (typeof settings[0] === 'function') ? settings[0] : settings[1];\r\n\tif (typeof callBack !== 'function')\r\n\t{\r\n\t\treturn;\r\n\t}\r\n\r\n\t/**\r\n\t * This will create a comment to use as a placeholder\r\n\t * to keep the layout in place.\r\n\t */\r\n\treturn Comment({\r\n\t\tonCreated: (ele, parent) =>\r\n\t\t{\r\n\t\t\tif (settings.length < 2)\r\n\t\t\t{\r\n\t\t\t\t/**\r\n\t\t\t\t * This will get the parent data and add it to the\r\n\t\t\t\t * settings array.\r\n\t\t\t\t */\r\n\t\t\t\tconst data = parent.state;\r\n\t\t\t\tsettings.unshift(data);\r\n\t\t\t}\r\n\r\n\t\t\tconst notOpen = null;\r\n\r\n\t\t\t/**\r\n\t\t\t * This will check if the value is set and\r\n\t\t\t * if it matches the setting value.\r\n\t\t\t */\r\n\t\t\tconst settingValue = true;\r\n\t\t\tconst updateCallback = (value, ele, parent) =>\r\n\t\t\t{\r\n\t\t\t\treturn (value == settingValue)? callBack(value, ele, parent) : notOpen;\r\n\t\t\t};\r\n\r\n\t\t\tconst prop = 'open';\r\n\t\t\tconst update = updateLayout(updateCallback, ele, prop, parent);\r\n\t\t\tdataBinder.watch(ele, settings[0], prop, update);\r\n\t\t}\r\n\t});\r\n};", "/**\r\n * This will create a comment.\r\n *\r\n * @param {object} props\r\n * @returns {object}\r\n */\r\nexport const Comment = (props) => ({\r\n    tag: 'comment',\r\n    textContent: `${props.type} placeholder`,\r\n    onCreated: props.onCreated\r\n});", "import { Builder } from \"@base-framework/base\";\r\nimport { Comment as BaseComment } from \"src/comment.js\";\r\n\r\n/**\r\n * This will set up the update layout function.\r\n *\r\n * @param {function} callBack\r\n * @param {object} ele\r\n * @param {object} parent\r\n * @returns {function}\r\n */\r\nconst updateLayout = (callBack, ele, parent) =>\r\n{\r\n\tconst layout = callBack(parent);\r\n\tif (layout === undefined)\r\n\t{\r\n\t\treturn;\r\n\t}\r\n\r\n\t/**\r\n\t * This will build the layout and insert it after the\r\n\t * comment element.\r\n\t */\r\n\tconst frag = Builder.build(layout, null, parent);\r\n\tele.parentNode.insertBefore(frag, ele.nextSibling);\r\n};\r\n\r\n/**\r\n * This will create a comment.\r\n *\r\n * @param {object} props\r\n * @returns {object}\r\n */\r\nconst Comment = (props) => BaseComment({\r\n\ttype: 'use',\r\n\tonCreated: props.onCreated\r\n});\r\n\r\n/**\r\n * This will create a use parent tag.\r\n *\r\n * @param {function} callBack\r\n * @returns {object}\r\n */\r\nexport const UseParent = (callBack) =>\r\n{\r\n\t/**\r\n\t * This will create a comment to use as a placeholder\r\n\t * to keep the layout in place.\r\n\t */\r\n\treturn Comment({\r\n\t\tonCreated: (ele, parent) =>\r\n\t\t{\r\n\t\t\tupdateLayout(callBack, ele, parent);\r\n\t\t}\r\n\t});\r\n};"],
-  "mappings": "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",
-  "names": ["Atom", "Builder", "dataBinder", "Comment", "props", "checkPreviousResult", "parent", "prop", "value", "result", "updateLayout", "callBack", "ele", "prevEle", "layout", "Builder", "frag", "Comment", "props", "getParentData", "On", "args", "settings", "data", "update", "dataBinder", "OnState", "OnRoute", "If", "settingValue", "IfState", "OnLoad", "notLoaded", "updateCallback", "OnStateLoad", "OnOpen", "notOpen", "OnStateOpen", "Builder", "updateLayout", "callBack", "ele", "parent", "layout", "frag", "Builder", "Comment", "props", "UseParent", "Tag", "props", "children", "Doctype", "Html", "Atom", "Script", "Style", "Head", "Title", "Meta", "Link", "Body", "Div", "Dialog", "Span", "P", "A", "Button", "SubmitButton", "Ul", "Li", "Img", "Br", "Hr", "Text", "H1", "H2", "H3", "H4", "H5", "H6", "Input", "Label", "Checkbox", "Section", "Article", "Header", "Footer", "Nav", "Aside", "Figure", "Figcaption", "Main", "Video", "Audio", "Table", "Tr", "Th", "Td", "Thead", "Tbody", "Tfoot", "Form", "Select", "Option", "Textarea", "Canvas", "Progress", "Blockquote", "Pre", "Code", "Ol", "Dl", "Dt", "Dd", "Fieldset", "Legend", "Meter", "Iframe", "Details", "Summary", "Em", "Strong", "Small", "S", "Cite", "Q", "Dfn", "Abbr", "Data", "Time", "Var", "Samp", "Kbd", "Sub", "Sup", "I", "B", "U", "Mark", "Ruby", "Rt", "Rp", "Bdi", "Bdo", "Wbr", "Comment"]
+  "sources": ["../src/atoms.js", "../src/on/on.js", "../src/comment.js", "../src/on/on-size.js", "../src/use/use.js"],
+  "sourcesContent": ["import { Atom } from '@base-framework/base';\r\nimport { If, IfState, On, On2Xl, OnLg, OnLoad, OnMd, OnOpen, OnRoute, OnSm, OnState, OnStateLoad, OnStateOpen, OnXl, OnXs } from './on/on.js';\r\nimport { UseParent } from './use/use.js';\r\nexport { If, IfState, On, On2Xl, OnLg, OnLoad, OnMd, OnOpen, OnRoute, OnSm, OnState, OnStateLoad, OnStateOpen, OnXl, OnXs, UseParent };\r\n\r\n/**\r\n * Creates a generic HTML tag.\r\n *\r\n * @param {object} props - Properties for the HTML element.\r\n * @param {array} children - Children elements of the HTML element.\r\n * @returns {object} - Returns an object representing the HTML element.\r\n */\r\nconst Tag = (props, children) => {\r\n    return { ...props, children };\r\n};\r\n\r\n/**\r\n * Creates a Doctype tag.\r\n *\r\n * @param {object} props - Properties for the HTML element.\r\n * @returns {object} - Returns an object representing the HTML element.\r\n */\r\nexport const Doctype = (props) => ({ ...props, tag: 'DOCTYPE' });\r\n\r\n/**\r\n * Creates an HTML tag.\r\n *\r\n * @param {object} props - Properties for the HTML element.\r\n * @param {array} children - Children elements of the HTML element.\r\n * @returns {object} - Returns an object representing the HTML element.\r\n */\r\nexport const Html = Atom((props, children) => Tag({ ...props, tag: 'html' }, children));\r\n\r\n/**\r\n * Creates a script tag.\r\n *\r\n * @param {object} props - Properties for the HTML element.\r\n * @param {array} children - Children elements of the HTML element.\r\n * @returns {object} - Returns an object representing the HTML element.\r\n */\r\nexport const Script = Atom((props, children) => Tag({ ...props, tag: 'script' }, children));\r\n\r\n/**\r\n * Creates a style tag.\r\n *\r\n * @param {object} props - Properties for the HTML element.\r\n * @param {array} children - Children elements of the HTML element.\r\n * @returns {object} - Returns an object representing the HTML element.\r\n */\r\nexport const Style = Atom((props, children) => Tag({ ...props, tag: 'style' }, children));\r\n\r\n/**\r\n * Creates a head tag.\r\n *\r\n * @param {object} props - Properties for the head element.\r\n * @param {array} children - Children elements of the head.\r\n * @returns {object} - Returns an object representing the head element.\r\n */\r\nexport const Head = Atom((props, children) => Tag({ ...props, tag: 'head' }, children));\r\n\r\n/**\r\n * Creates a title tag.\r\n *\r\n * @param {object} props - Properties for the title element.\r\n */\r\nexport const Title = (props) =>\r\n{\r\n    return { ...props };\r\n};\r\n\r\n/**\r\n * Creates a meta tag.\r\n *\r\n * @param {object} props - Properties for the meta element.\r\n * @returns {object} - Returns an object representing the meta element.\r\n */\r\nexport const Meta = (props) => ({ ...props, tag: 'meta' });\r\n\r\n/**\r\n * Creates a link tag.\r\n *\r\n * @param {object} props - Properties for the link element.\r\n * @returns {object} - Returns an object representing the link element.\r\n */\r\nexport const Link = (props) => ({ ...props, tag: 'link' });\r\n\r\n/**\r\n * Creates a body tag.\r\n *\r\n * @param {object} props - Properties for the body element.\r\n * @param {array} children - Children elements of the body.\r\n * @returns {object} - Returns an object representing the body element.\r\n */\r\nexport const Body = Atom((props, children) => Tag({ ...props, tag: 'body' }, children));\r\n\r\n/**\r\n * Creates a div element.\r\n *\r\n * @param {object} props - Properties for the div element.\r\n * @param {array} children - Children elements of the div.\r\n * @returns {object} - Returns an object representing the div element.\r\n */\r\nexport const Div = Atom((props, children) => Tag(props, children));\r\n\r\n/**\r\n * Creates a dialog element.\r\n *\r\n * @param {object} props - Properties for the div element.\r\n * @param {array} children - Children elements of the div.\r\n * @returns {object} - Returns an object representing the dialog element.\r\n */\r\nexport const Dialog = Atom((props, children) => Tag({ ...props, tag: 'dialog' }, children));\r\n\r\n/**\r\n * Creates a span element.\r\n *\r\n * @param {object} props - Properties for the span element.\r\n * @param {array} children - Children elements of the span.\r\n * @returns {object} - Returns an object representing the span element.\r\n */\r\nexport const Span = Atom((props, children) => Tag({ ...props, tag: 'span' }, children));\r\n\r\n/**\r\n * Creates a paragraph (p) element.\r\n *\r\n * @param {object} props - Properties for the paragraph element.\r\n * @param {array} children - Children elements of the paragraph.\r\n * @returns {object} - Returns an object representing the paragraph element.\r\n */\r\nexport const P = Atom((props, children) => Tag({ ...props, tag: 'p' }, children));\r\n\r\n/**\r\n * Creates an anchor (a) element.\r\n *\r\n * @param {object} props - Properties for the anchor element.\r\n * @param {array} children - Children elements of the anchor.\r\n * @return {object} - Returns an object representing the anchor element.\r\n */\r\nexport const A = Atom((props, children) => Tag({ ...props, tag: 'a' }, children));\r\n\r\n/**\r\n * Creates a button element.\r\n *\r\n * @param {object} props - Properties for the element.\r\n * @param {array} children - Children elements.\r\n * @returns {object} - Returns an object representing the element.\r\n */\r\nexport const Button = Atom((props, children) => Tag({ ...props, tag: 'button' }, children));\r\n\r\n/**\r\n * Creates a submit button element.\r\n *\r\n * @param {object} props - Properties for the element.\r\n * @param {array} children - Children elements.\r\n * @returns {object} - Returns an object representing the element.\r\n */\r\nexport const SubmitButton = Atom((props, children) => Button({ ...props, type: 'submit' }, children));\r\n\r\n/**\r\n * Creates an unordered list (ul) element.\r\n *\r\n * @param {object} props - Properties for the element.\r\n * @param {array} children - Children elements.\r\n * @returns {object} - Returns an object representing the element.\r\n */\r\nexport const Ul = Atom((props, children) => Tag({ ...props, tag: 'ul' }, children));\r\n\r\n/**\r\n * Creates a list item (li) element.\r\n *\r\n * @param {object} props - Properties for the element.\r\n * @param {array} children - Children elements.\r\n * @returns {object} - Returns an object representing the element.\r\n */\r\nexport const Li = Atom((props, children) => Tag({ ...props, tag: 'li' }, children));\r\n\r\n/**\r\n * Creates an image (img) element.\r\n */\r\nexport const Img = Atom((props) => Tag({ ...props, tag: 'img' }, null));\r\n\r\n/**\r\n * Create a br element.\r\n *\r\n * @param {object} props - Properties for the br element.\r\n * @returns {object} - Returns an object representing the br element.\r\n */\r\nexport const Br = Atom((props) => Tag({ ...props, tag: 'br' }, null));\r\n\r\n/**\r\n * Creates a horizontal rule (hr) element.\r\n *\r\n * @param {object} props - Properties for the hr element.\r\n * @returns {object} - Returns an object representing the hr element.\r\n */\r\nexport const Hr = Atom((props) => Tag({ ...props, tag: 'hr' }, null));\r\n\r\n/**\r\n * Creates a text (text) element.\r\n *\r\n * @param {object} props - Properties for the text element.\r\n * @param {array} children - Children elements of the text element.\r\n * @returns {object} - Returns an object representing the text element.\r\n */\r\nexport const Text = Atom((props, children) => Tag({ ...props, tag: 'text' }, children));\r\n\r\n/**\r\n * Creates a header 1 (h1) element.\r\n *\r\n * @param {object} props - Properties for the h1 element.\r\n * @param {array} children - Children elements of the h1 element.\r\n * @returns {object} - Returns an object representing the h1 element.\r\n */\r\nexport const H1 = Atom((props, children) => Tag({ ...props, tag: 'h1' }, children));\r\n\r\n/**\r\n * Creates a header 2 (h2) element.\r\n *\r\n * @param {object} props - Properties for the element.\r\n * @param {array} children - Children elements.\r\n * @returns {object} - Returns an object representing the element.\r\n */\r\nexport const H2 = Atom((props, children) => Tag({ ...props, tag: 'h2' }, children));\r\n\r\n/**\r\n * Creates a header 3 (h3) element.\r\n *\r\n * @param {object} props - Properties for the element.\r\n * @param {array} children - Children elements.\r\n * @returns {object} - Returns an object representing the element.\r\n */\r\nexport const H3 = Atom((props, children) => Tag({ ...props, tag: 'h3' }, children));\r\n\r\n/**\r\n * Creates a header 4 (h4) element.\r\n *\r\n * @param {object} props - Properties for the element.\r\n * @param {array} children - Children elements.\r\n * @returns {object} - Returns an object representing the element.\r\n */\r\nexport const H4 = Atom((props, children) => Tag({ ...props, tag: 'h4' }, children));\r\n\r\n/**\r\n * Creates a header 5 (h5) element.\r\n *\r\n * @param {object} props - Properties for the element.\r\n * @param {array} children - Children elements.\r\n * @returns {object} - Returns an object representing the element.\r\n */\r\nexport const H5 = Atom((props, children) => Tag({ ...props, tag: 'h5' }, children));\r\n\r\n/**\r\n * Creates a header 6 (h6) element.\r\n *\r\n * @param {object} props - Properties for the element.\r\n * @param {array} children - Children elements.\r\n * @returns {object} - Returns an object representing the element.\r\n */\r\nexport const H6 = Atom((props, children) => Tag({ ...props, tag: 'h6' }, children));\r\n\r\n/**\r\n * Creates an input element.\r\n *\r\n * @param {object} props - Properties for the element.\r\n * @param {array} children - Children elements.\r\n * @returns {object} - Returns an object representing the element.\r\n */\r\nexport const Input = Atom((props) => Tag({ ...props, tag: 'input' }, null));\r\n\r\n/**\r\n * Creates a label element.\r\n *\r\n * @param {object} props - Properties for the element.\r\n * @param {array} children - Children elements.\r\n * @returns {object} - Returns an object representing the element.\r\n */\r\nexport const Label = Atom((props, children) => Tag({ ...props, tag: 'label' }, children));\r\n\r\n/**\r\n * Creates a checkbox input element.\r\n *\r\n * @param {object} props - Properties for the checkbox input element.\r\n * @returns {object} - Returns an object representing the checkbox input element.\r\n */\r\nexport const Checkbox = Atom((props) => Input({ ...props, type: 'checkbox' }));\r\n\r\n/**\r\n * Creates a section element.\r\n *\r\n * @param {object} props - Properties for the element.\r\n * @param {array} children - Children elements.\r\n * @returns {object} - Returns an object representing the element.\r\n */\r\nexport const Section = Atom((props, children) => Tag({ ...props, tag: 'section' }, children));\r\n\r\n/**\r\n * Creates an article element.\r\n *\r\n * @param {object} props - Properties for the element.\r\n * @param {array} children - Children elements.\r\n * @returns {object} - Returns an object representing the element.\r\n */\r\nexport const Article = Atom((props, children) => Tag({ ...props, tag: 'article' }, children));\r\n\r\n/**\r\n * Creates a header (header) element.\r\n *\r\n * @param {object} props - Properties for the element.\r\n * @param {array} children - Children elements.\r\n * @returns {object} - Returns an object representing the element.\r\n */\r\nexport const Header = Atom((props, children) => Tag({ ...props, tag: 'header' }, children));\r\n\r\n/**\r\n * Creates a footer element.\r\n *\r\n * @param {object} props - Properties for the element.\r\n * @param {array} children - Children elements.\r\n * @returns {object} - Returns an object representing the element.\r\n */\r\nexport const Footer = Atom((props, children) => Tag({ ...props, tag: 'footer' }, children));\r\n\r\n/**\r\n * Creates a nav element.\r\n *\r\n * @param {object} props - Properties for the element.\r\n * @param {array} children - Children elements.\r\n * @returns {object} - Returns an object representing the element.\r\n */\r\nexport const Nav = Atom((props, children) => Tag({ ...props, tag: 'nav' }, children));\r\n\r\n/**\r\n * Creates an aside element.\r\n *\r\n * @param {object} props - Properties for the element.\r\n * @param {array} children - Children elements.\r\n * @returns {object} - Returns an object representing the element.\r\n */\r\nexport const Aside = Atom((props, children) => Tag({ ...props, tag: 'aside' }, children));\r\n\r\n/**\r\n * Creates a figure element.\r\n *\r\n * @param {object} props - Properties for the element.\r\n * @param {array} children - Children elements.\r\n * @returns {object} - Returns an object representing the element.\r\n */\r\nexport const Figure = Atom((props, children) => Tag({ ...props, tag: 'figure' }, children));\r\n\r\n/**\r\n * Creates a figcaption element.\r\n *\r\n * @param {object} props - Properties for the element.\r\n * @param {array} children - Children elements.\r\n * @returns {object} - Returns an object representing the element.\r\n */\r\nexport const Figcaption = Atom((props, children) => Tag({ ...props, tag: 'figcaption' }, children));\r\n\r\n/**\r\n * Creates a main element.\r\n *\r\n * @param {object} props - Properties for the element.\r\n * @param {array} children - Children elements.\r\n * @returns {object} - Returns an object representing the element.\r\n */\r\nexport const Main = Atom((props, children) => Tag({ ...props, tag: 'main' }, children));\r\n\r\n/**\r\n * Creates a video element.\r\n *\r\n * @param {object} props - Properties for the element.\r\n * @param {array} children - Children elements.\r\n * @returns {object} - Returns an object representing the element.\r\n */\r\nexport const Video = Atom((props, children) => Tag({ ...props, tag: 'video' }, children));\r\n\r\n/**\r\n * Creates an audio element.\r\n *\r\n * @param {object} props - Properties for the element.\r\n * @param {array} children - Children elements.\r\n * @returns {object} - Returns an object representing the element.\r\n */\r\nexport const Audio = Atom((props, children) => Tag({ ...props, tag: 'audio' }, children));\r\n\r\n/**\r\n * Creates a table element.\r\n *\r\n * @param {object} props - Properties for the element.\r\n * @param {array} children - Children elements.\r\n * @returns {object} - Returns an object representing the element.\r\n */\r\nexport const Table = Atom((props, children) => Tag({ ...props, tag: 'table' }, children));\r\n\r\n/**\r\n * Creates a table row (tr) element.\r\n *\r\n * @param {object} props - Properties for the element.\r\n * @param {array} children - Children elements.\r\n * @returns {object} - Returns an object representing the element.\r\n */\r\nexport const Tr = Atom((props, children) => Tag({ ...props, tag: 'tr' }, children));\r\n\r\n/**\r\n * Creates a table header (th) element.\r\n *\r\n * @param {object} props - Properties for the element.\r\n * @param {array} children - Children elements.\r\n * @returns {object} - Returns an object representing the element.\r\n */\r\nexport const Th = Atom((props, children) => Tag({ ...props, tag: 'th' }, children));\r\n\r\n/**\r\n * Creates a table data (td) element.\r\n *\r\n * @param {object} props - Properties for the element.\r\n * @param {array} children - Children elements.\r\n * @returns {object} - Returns an object representing the element.\r\n */\r\nexport const Td = Atom((props, children) => Tag({ ...props, tag: 'td' }, children));\r\n\r\n/**\r\n * Creates a table header group (thead) element.\r\n *\r\n * @param {object} props - Properties for the element.\r\n * @param {array} children - Children elements.\r\n * @returns {object} - Returns an object representing the element.\r\n */\r\nexport const Thead = Atom((props, children) => Tag({ ...props, tag: 'thead' }, children));\r\n\r\n/**\r\n * Creates a table body (tbody) element.\r\n *\r\n * @param {object} props - Properties for the element.\r\n * @param {array} children - Children elements.\r\n * @returns {object} - Returns an object representing the element.\r\n */\r\nexport const Tbody = Atom((props, children) => Tag({ ...props, tag: 'tbody' }, children));\r\n\r\n/**\r\n * Creates a table footer (tfoot) element.\r\n *\r\n * @param {object} props - Properties for the element.\r\n * @param {array} children - Children elements.\r\n * @returns {object} - Returns an object representing the element.\r\n */\r\nexport const Tfoot = Atom((props, children) => Tag({ ...props, tag: 'tfoot' }, children));\r\n\r\n/**\r\n * Creates a form element.\r\n *\r\n * @param {object} props - Properties for the element.\r\n * @param {array} children - Children elements.\r\n * @returns {object} - Returns an object representing the element.\r\n */\r\nexport const Form = Atom((props, children) => Tag({ ...props, tag: 'form' }, children));\r\n\r\n/**\r\n * Creates a select element.\r\n *\r\n * @param {object} props - Properties for the element.\r\n * @param {array} children - Children elements.\r\n * @returns {object} - Returns an object representing the element.\r\n */\r\nexport const Select = Atom((props, children) => Tag({ ...props, tag: 'select' }, children));\r\n\r\n/**\r\n * Creates an option element for a select tag.\r\n *\r\n * @param {object} props - Properties for the element.\r\n * @param {array} children - Children elements.\r\n * @returns {object} - Returns an object representing the element.\r\n */\r\nexport const Option = Atom((props, children) => Tag({ ...props, tag: 'option' }, children));\r\n\r\n/**\r\n * Creates a textarea element.\r\n *\r\n * @param {object} props - Properties for the element.\r\n * @param {array} children - Children elements.\r\n * @returns {object} - Returns an object representing the element.\r\n */\r\nexport const Textarea = Atom((props, children) => Tag({ ...props, tag: 'textarea' }, children));\r\n\r\n/**\r\n * Creates a canvas element.\r\n *\r\n * @param {object} props - Properties for the element.\r\n * @param {array} children - Children elements.\r\n * @returns {object} - Returns an object representing the element.\r\n */\r\nexport const Canvas = Atom((props, children) => Tag({ ...props, tag: 'canvas' }, children));\r\n\r\n/**\r\n * Creates a progress element.\r\n *\r\n * @param {object} props - Properties for the element.\r\n * @param {array} children - Children elements.\r\n * @returns {object} - Returns an object representing the element.\r\n */\r\nexport const Progress = Atom((props, children) => Tag({ ...props, tag: 'progress' }, children));\r\n\r\n/**\r\n * Creates a blockquote element.\r\n *\r\n * @param {object} props - Properties for the element.\r\n * @param {array} children - Children elements.\r\n * @returns {object} - Returns an object representing the element.\r\n */\r\nexport const Blockquote = Atom((props, children) => Tag({ ...props, tag: 'blockquote' }, children));\r\n\r\n/**\r\n * Creates a preformatted text (pre) element.\r\n *\r\n * @param {object} props - Properties for the element.\r\n * @param {array} children - Children elements.\r\n * @returns {object} - Returns an object representing the element.\r\n */\r\nexport const Pre = Atom((props, children) => Tag({ ...props, tag: 'pre' }, children));\r\n\r\n/**\r\n * Creates a code element.\r\n *\r\n * @param {object} props - Properties for the element.\r\n * @param {array} children - Children elements.\r\n * @returns {object} - Returns an object representing the element.\r\n */\r\nexport const Code = Atom((props, children) => Tag({ ...props, tag: 'code' }, children));\r\n\r\n/**\r\n * Creates an ordered list (ol) element.\r\n *\r\n * @param {object} props - Properties for the element.\r\n * @param {array} children - Children elements.\r\n * @returns {object} - Returns an object representing the element.\r\n */\r\nexport const Ol = Atom((props, children) => Tag({ ...props, tag: 'ol' }, children));\r\n\r\n/**\r\n * Creates a definition list (dl) element.\r\n *\r\n * @param {object} props - Properties for the element.\r\n * @param {array} children - Children elements.\r\n * @returns {object} - Returns an object representing the element.\r\n */\r\nexport const Dl = Atom((props, children) => Tag({ ...props, tag: 'dl' }, children));\r\n\r\n/**\r\n * Creates a definition term (dt) element.\r\n *\r\n * @param {object} props - Properties for the element.\r\n * @param {array} children - Children elements.\r\n * @returns {object} - Returns an object representing the element.\r\n */\r\nexport const Dt = Atom((props, children) => Tag({ ...props, tag: 'dt' }, children));\r\n\r\n/**\r\n * Creates a definition description (dd) element.\r\n *\r\n * @param {object} props - Properties for the element.\r\n * @param {array} children - Children elements.\r\n * @returns {object} - Returns an object representing the element.\r\n */\r\nexport const Dd = Atom((props, children) => Tag({ ...props, tag: 'dd' }, children));\r\n\r\n/**\r\n * Creates a fieldset element.\r\n *\r\n * @param {object} props - Properties for the element.\r\n * @param {array} children - Children elements.\r\n * @returns {object} - Returns an object representing the element.\r\n */\r\nexport const Fieldset = Atom((props, children) => Tag({ ...props, tag: 'fieldset' }, children));\r\n\r\n/**\r\n * Creates a legend element.\r\n *\r\n * @param {object} props - Properties for the element.\r\n * @param {array} children - Children elements.\r\n * @returns {object} - Returns an object representing the element.\r\n */\r\nexport const Legend = Atom((props, children) => Tag({ ...props, tag: 'legend' }, children));\r\n\r\n/**\r\n * Creates a meter element.\r\n *\r\n * @param {object} props - Properties for the element.\r\n * @param {array} children - Children elements.\r\n * @returns {object} - Returns an object representing the element.\r\n */\r\nexport const Meter = Atom((props, children) => Tag({ ...props, tag: 'meter' }, children));\r\n\r\n/**\r\n * Creates an iframe element.\r\n *\r\n * @param {object} props - Properties for the element.\r\n * @param {array} children - Children elements.\r\n * @returns {object} - Returns an object representing the element.\r\n */\r\nexport const Iframe = Atom((props, children) => Tag({ ...props, tag: 'iframe' }, children));\r\n\r\n/**\r\n * Creates a details element.\r\n *\r\n * @param {object} props - Properties for the element.\r\n * @param {array} children - Children elements.\r\n * @returns {object} - Returns an object representing the element.\r\n */\r\nexport const Details = Atom((props, children) => Tag({ ...props, tag: 'details' }, children));\r\n\r\n/**\r\n * Creates a summary element.\r\n *\r\n * @param {object} props - Properties for the element.\r\n * @param {array} children - Children elements.\r\n * @returns {object} - Returns an object representing the element.\r\n */\r\nexport const Summary = Atom((props, children) => Tag({ ...props, tag: 'summary' }, children));\r\n\r\n/**\r\n * Creates an em element.\r\n *\r\n * @param {object} props - Properties for the element.\r\n * @param {array} children - Children elements.\r\n * @returns {object} - Returns an object representing the element.\r\n */\r\nexport const Em = Atom((props, children) => Tag({ ...props, tag: 'em' }, children));\r\n\r\n/**\r\n * Creates a strong element.\r\n *\r\n * @param {object} props - Properties for the element.\r\n * @param {array} children - Children elements.\r\n * @returns {object} - Returns an object representing the element.\r\n */\r\nexport const Strong = Atom((props, children) => Tag({ ...props, tag: 'strong' }, children));\r\n\r\n/**\r\n * Creates a small element.\r\n *\r\n * @param {object} props - Properties for the element.\r\n * @param {array} children - Children elements.\r\n * @returns {object} - Returns an object representing the element.\r\n */\r\nexport const Small = Atom((props, children) => Tag({ ...props, tag: 'small' }, children));\r\n\r\n/**\r\n * Creates a s element (strikethrough).\r\n *\r\n * @param {object} props - Properties for the element.\r\n * @param {array} children - Children elements.\r\n * @returns {object} - Returns an object representing the element.\r\n */\r\nexport const S = Atom((props, children) => Tag({ ...props, tag: 's' }, children));\r\n\r\n/**\r\n * Creates a cite element.\r\n *\r\n * @param {object} props - Properties for the element.\r\n * @param {array} children - Children elements.\r\n * @returns {object} - Returns an object representing the element.\r\n */\r\nexport const Cite = Atom((props, children) => Tag({ ...props, tag: 'cite' }, children));\r\n\r\n/**\r\n * Creates a q element (inline quotation).\r\n */\r\nexport const Q = Atom((props, children) => Tag({ ...props, tag: 'q' }, children));\r\n\r\n/**\r\n * Creates a dfn element (definition element).\r\n *\r\n * @param {object} props - Properties for the element.\r\n * @param {array} children - Children elements.\r\n * @returns {object} - Returns an object representing the element.\r\n */\r\nexport const Dfn = Atom((props, children) => Tag({ ...props, tag: 'dfn' }, children));\r\n\r\n/**\r\n * Creates an abbr element (abbreviation).\r\n *\r\n * @param {object} props - Properties for the element.\r\n * @param {array} children - Children elements.\r\n * @returns {object} - Returns an object representing the element.\r\n */\r\nexport const Abbr = Atom((props, children) => Tag({ ...props, tag: 'abbr' }, children));\r\n\r\n/**\r\n * Creates a data element.\r\n *\r\n * @param {object} props - Properties for the element.\r\n * @param {array} children - Children elements.\r\n * @returns {object} - Returns an object representing the element.\r\n */\r\nexport const Data = Atom((props, children) => Tag({ ...props, tag: 'data' }, children));\r\n\r\n/**\r\n * Creates a time element.\r\n *\r\n * @param {object} props - Properties for the element.\r\n * @param {array} children - Children elements.\r\n * @returns {object} - Returns an object representing the element.\r\n */\r\nexport const Time = Atom((props, children) => Tag({ ...props, tag: 'time' }, children));\r\n\r\n/**\r\n * Creates a var element (variable).\r\n *\r\n * @param {object} props - Properties for the element.\r\n * @param {array} children - Children elements.\r\n * @returns {object} - Returns an object representing the element.\r\n */\r\nexport const Var = Atom((props, children) => Tag({ ...props, tag: 'var' }, children));\r\n\r\n/**\r\n * Creates a samp element (sample output).\r\n *\r\n * @param {object} props - Properties for the element.\r\n * @param {array} children - Children elements.\r\n * @returns {object} - Returns an object representing the element.\r\n */\r\nexport const Samp = Atom((props, children) => Tag({ ...props, tag: 'samp' }, children));\r\n\r\n/**\r\n * Creates a kbd element (keyboard input).\r\n *\r\n * @param {object} props - Properties for the element.\r\n * @param {array} children - Children elements.\r\n * @returns {object} - Returns an object representing the element.\r\n */\r\nexport const Kbd = Atom((props, children) => Tag({ ...props, tag: 'kbd' }, children));\r\n\r\n/**\r\n * Creates a sub element (subscript).\r\n *\r\n * @param {object} props - Properties for the element.\r\n * @param {array} children - Children elements.\r\n * @returns {object} - Returns an object representing the element.\r\n */\r\nexport const Sub = Atom((props, children) => Tag({ ...props, tag: 'sub' }, children));\r\n\r\n/**\r\n * Creates a sup element (superscript).\r\n *\r\n * @param {object} props - Properties for the element.\r\n * @param {array} children - Children elements.\r\n * @returns {object} - Returns an object representing the element.\r\n */\r\nexport const Sup = Atom((props, children) => Tag({ ...props, tag: 'sup' }, children));\r\n\r\n/**\r\n * Creates an i element (italic).\r\n *\r\n * @param {object} props - Properties for the element.\r\n * @param {array} children - Children elements.\r\n * @returns {object} - Returns an object representing the element.\r\n */\r\nexport const I = Atom((props, children) => Tag({ ...props, tag: 'i' }, children));\r\n\r\n/**\r\n * Creates a b element (bold).\r\n *\r\n * @param {object} props - Properties for the element.\r\n * @param {array} children - Children elements.\r\n * @returns {object} - Returns an object representing the element.\r\n */\r\nexport const B = Atom((props, children) => Tag({ ...props, tag: 'b' }, children));\r\n\r\n/**\r\n * Creates a u element (underline).\r\n *\r\n * @param {object} props - Properties for the element.\r\n * @param {array} children - Children elements.\r\n * @returns {object} - Returns an object representing the element.\r\n */\r\nexport const U = Atom((props, children) => Tag({ ...props, tag: 'u' }, children));\r\n\r\n/**\r\n * Creates a mark element.\r\n *\r\n * @param {object} props - Properties for the element.\r\n * @param {array} children - Children elements.\r\n * @returns {object} - Returns an object representing the element.\r\n */\r\nexport const Mark = Atom((props, children) => Tag({ ...props, tag: 'mark' }, children));\r\n\r\n/**\r\n * Creates a ruby element (for East Asian typography).\r\n *\r\n * @param {object} props - Properties for the element.\r\n * @param {array} children - Children elements.\r\n * @returns {object} - Returns an object representing the element.\r\n */\r\nexport const Ruby = Atom((props, children) => Tag({ ...props, tag: 'ruby' }, children));\r\n\r\n/**\r\n * Creates an rt element (explanation/pronunciation of characters in East Asian typography).\r\n *\r\n * @param {object} props - Properties for the element.\r\n * @param {array} children - Children elements.\r\n * @returns {object} - Returns an object representing the element.\r\n */\r\nexport const Rt = Atom((props, children) => Tag({ ...props, tag: 'rt' }, children));\r\n\r\n/**\r\n * Creates an rp element (for East Asian fallback parenthesis).\r\n *\r\n * @param {object} props - Properties for the element.\r\n * @param {array} children - Children elements.\r\n * @returns {object} - Returns an object representing the element.\r\n */\r\nexport const Rp = Atom((props, children) => Tag({ ...props, tag: 'rp' }, children));\r\n\r\n/**\r\n * Creates a bdi element (Bi-Directional Isolation).\r\n *\r\n * @param {object} props - Properties for the element.\r\n * @param {array} children - Children elements.\r\n * @returns {object} - Returns an object representing the element.\r\n */\r\nexport const Bdi = Atom((props, children) => Tag({ ...props, tag: 'bdi' }, children));\r\n\r\n/**\r\n * Creates a bdo element (Bi-Directional Override).\r\n *\r\n * @param {object} props - Properties for the element.\r\n * @param {array} children - Children elements.\r\n * @returns {object} - Returns an object representing the element.\r\n */\r\nexport const Bdo = Atom((props, children) => Tag({ ...props, tag: 'bdo' }, children));\r\n\r\n/**\r\n * Creates a wbr element (Word Break Opportunity).\r\n *\r\n * @param {object} props - Properties for the element.\r\n * @param {array} children - Children elements.\r\n * @returns {object} - Returns an object representing the element.\r\n */\r\nexport const Wbr = Atom((props) => Tag({ ...props, tag: 'wbr' }, null));\r\n\r\n/**\r\n * This will create a comment.\r\n *\r\n * @param {object} props\r\n * @returns {object}\r\n */\r\nexport const Comment = Atom((props) => Tag({ ...props, tag: 'comment' }, null));", "import { Builder, dataBinder } from \"@base-framework/base\";\r\nimport { Comment as BaseComment } from \"src/comment.js\";\r\n\r\n/**\r\n * Data source types for conditional rendering atoms.\r\n */\r\nconst DATA_SOURCES =\r\n{\r\n\tPARENT: 'parent',\r\n\tSTATE: 'state',\r\n\tROUTE: 'route'\r\n};\r\n\r\n/**\r\n * Gets the appropriate data source based on the type.\r\n *\r\n * @param {object} parent - The parent component\r\n * @param {string} sourceType - The data source type\r\n * @returns {object|null} The data source\r\n */\r\nconst getDataSource = (parent, sourceType) =>\r\n{\r\n\tswitch (sourceType)\r\n\t{\r\n\t\tcase DATA_SOURCES.PARENT:\r\n\t\t\treturn getParentData(parent);\r\n\t\tcase DATA_SOURCES.STATE:\r\n\t\t\treturn parent.state;\r\n\t\tcase DATA_SOURCES.ROUTE:\r\n\t\t\treturn parent.route;\r\n\t\tdefault:\r\n\t\t\treturn null;\r\n\t}\r\n};\r\n\r\n/**\r\n * Creates a conditional callback that only executes when the value equals the expected value.\r\n *\r\n * @param {function} callback - The callback to execute\r\n * @param {*} expectedValue - The value to compare against\r\n * @param {*} [fallback=null] - The fallback value when condition is not met\r\n * @returns {function} The conditional callback\r\n */\r\nconst createEqualityCallback = (callback, expectedValue, fallback = null) =>\r\n{\r\n\treturn (value, ele, parent) =>\r\n\t{\r\n\t\treturn (value === expectedValue) ? callback(value, ele, parent) : fallback;\r\n\t};\r\n};\r\n\r\n/**\r\n * Creates a conditional callback that only executes when the value is truthy.\r\n *\r\n * @param {function} callback - The callback to execute\r\n * @param {*} [fallback=null] - The fallback value when condition is not met\r\n * @returns {function} The conditional callback\r\n */\r\nconst createBooleanCallback = (callback, fallback = null) =>\r\n{\r\n\treturn createEqualityCallback(callback, true, fallback);\r\n};\r\n\r\n\r\n\r\n/**\r\n * Generic factory for creating conditional rendering atoms.\r\n *\r\n * @param {string} dataSourceType - The type of data source to use\r\n * @param {string|null} [defaultProp=null] - Default property name for this atom type\r\n * @param {function|null} [callbackTransformer=null] - Function to transform the callback\r\n * @returns {function} The atom factory function\r\n */\r\nconst createConditionalAtom = (dataSourceType, defaultProp = null, callbackTransformer = null) =>\r\n{\r\n\treturn (...args) =>\r\n\t{\r\n\t\tconst settings = [...args];\r\n\t\tconst callback = settings.pop();\r\n\t\tif (typeof callback !== 'function')\r\n\t\t{\r\n\t\t\treturn;\r\n\t\t}\r\n\r\n\t\treturn Comment(\r\n\t\t{\r\n\t\t\tonCreated: (ele, parent) =>\r\n\t\t\t{\r\n\t\t\t\t// Auto-inject data source if not provided\r\n\t\t\t\tif (settings.length < (defaultProp ? 1 : 2))\r\n\t\t\t\t{\r\n\t\t\t\t\tconst data = getDataSource(parent, dataSourceType);\r\n\t\t\t\t\tsettings.unshift(data);\r\n\t\t\t\t}\r\n\r\n\t\t\t\t// Use default property if provided and not specified\r\n\t\t\t\tconst prop = defaultProp || settings[1];\r\n\t\t\t\tconst finalCallback = callbackTransformer ? callbackTransformer(callback, settings) : callback;\r\n\r\n\t\t\t\tconst update = updateLayout(finalCallback, ele, prop, parent);\r\n\t\t\t\tdataBinder.watch(ele, settings[0], prop, update);\r\n\t\t\t}\r\n\t\t});\r\n\t};\r\n};\r\n\r\n/**\r\n * Special factory for OnLoad-style functions that have different argument patterns.\r\n *\r\n * @param {string} dataSourceType - The type of data source to use\r\n * @param {string} prop - The property name to watch\r\n * @param {function} callbackTransformer - Function to transform the callback\r\n * @returns {function} The atom factory function\r\n */\r\nconst createLoadStyleAtom = (dataSourceType, prop, callbackTransformer) =>\r\n{\r\n\treturn (...args) =>\r\n\t{\r\n\t\tconst settings = [...args];\r\n\t\tconst callback = (typeof settings[0] === 'function') ? settings[0] : settings[1];\r\n\t\tif (typeof callback !== 'function')\r\n\t\t{\r\n\t\t\treturn;\r\n\t\t}\r\n\r\n\t\treturn Comment(\r\n\t\t{\r\n\t\t\tonCreated: (ele, parent) =>\r\n\t\t\t{\r\n\t\t\t\tif (settings.length < 2 || typeof settings[0] === 'function')\r\n\t\t\t\t{\r\n\t\t\t\t\tconst data = getDataSource(parent, dataSourceType);\r\n\t\t\t\t\tsettings.unshift(data);\r\n\t\t\t\t}\r\n\r\n\t\t\t\tconst finalCallback = callbackTransformer(callback, settings);\r\n\t\t\t\tconst update = updateLayout(finalCallback, ele, prop, parent);\r\n\t\t\t\tdataBinder.watch(ele, settings[0], prop, update);\r\n\t\t\t}\r\n\t\t});\r\n\t};\r\n};\r\n\r\n\r\n\r\n/**\r\n * This will set up the update layout function.\r\n *\r\n * @param {function} callBack\r\n * @param {object} ele\r\n * @param {string} prop\r\n * @param {object} parent\r\n * @returns {function}\r\n */\r\nconst updateLayout = (callBack, ele, prop, parent) =>\r\n{\r\n\t/**\r\n\t * This will hold the previous child element to\r\n\t * help remove it when updating.\r\n\t *\r\n\t * @type {(object|null)} prevEle\r\n\t */\r\n\tlet prevEle = null;\r\n\r\n\t/**\r\n\t * This will update the layout.\r\n\t *\r\n\t * @param {object} value\r\n\t * @returns {void}\r\n\t */\r\n\treturn (value) =>\r\n\t{\r\n\t\tlet layout = callBack(value, ele, parent);\r\n\t\tif (layout === undefined)\r\n\t\t{\r\n\t\t\treturn;\r\n\t\t}\r\n\r\n\t\t/**\r\n\t\t * This will remove the previous element if it exists.\r\n\t\t */\r\n\t\tif (prevEle)\r\n\t\t{\r\n\t\t\tBuilder.removeNode(prevEle);\r\n\t\t}\r\n\r\n\t\t/**\r\n\t\t * This will build the layout and insert it after the\r\n\t\t * comment element.\r\n\t\t */\r\n\t\tconst frag = Builder.build(layout, null, parent);\r\n\t\tprevEle = frag.children[0];\r\n\r\n\t\tele.parentNode.insertBefore(frag, ele.nextSibling);\r\n\t};\r\n};\r\n\r\n/**\r\n * This will create a comment.\r\n *\r\n * @param {object} props\r\n * @returns {object}\r\n */\r\nconst Comment = (props) => BaseComment({\r\n\ttype: 'on',\r\n\tonCreated: props.onCreated\r\n});\r\n\r\n/**\r\n * This will get the parent set data.\r\n *\r\n * @param {object} parent\r\n * @returns {object|null}\r\n */\r\nexport const getParentData = (parent) =>\r\n{\r\n\tif (parent.data)\r\n\t{\r\n\t\treturn parent.data;\r\n\t}\r\n\r\n\tif (parent.context && parent.context.data)\r\n\t{\r\n\t\treturn parent.context.data;\r\n\t}\r\n\r\n\tif (parent.state)\r\n\t{\r\n\t\treturn parent.state;\r\n\t}\r\n\r\n\treturn null;\r\n};\r\n\r\n/**\r\n * This will create an on data tag.\r\n *\r\n * @overload\r\n * @param {object} data\r\n * @param {string} prop\r\n * @param {function} callBack\r\n *\r\n * @overload\r\n * @param {string} prop\r\n * @param {function} callBack\r\n *\r\n * @returns {object}\r\n */\r\nexport const On = createConditionalAtom(DATA_SOURCES.PARENT);\r\n\r\n/**\r\n * This will create an on state tag.\r\n *\r\n * @overload\r\n * @param {object} data\r\n * @param {string} prop\r\n * @param {function} callBack\r\n *\r\n * @overload\r\n * @param {string} prop\r\n * @param {function} callBack\r\n *\r\n * @returns {object}\r\n */\r\nexport const OnState = createConditionalAtom(DATA_SOURCES.STATE);\r\n\r\n/**\r\n * This will create an on route tag.\r\n *\r\n * @overload\r\n * @param {object} data\r\n * @param {string} prop\r\n * @param {function} callBack\r\n *\r\n * @overload\r\n * @param {string} prop\r\n * @param {function} callBack\r\n *\r\n * @returns {object}\r\n */\r\nexport const OnRoute = createConditionalAtom(DATA_SOURCES.ROUTE);\r\n\r\n/**\r\n * This will create an if data tag.\r\n *\r\n * @overload\r\n * @param {object} data\r\n * @param {string} prop\r\n * @param {*} value\r\n * @param {function} callBack\r\n *\r\n * @overload\r\n * @param {string} prop\r\n * @param {*} value\r\n * @param {function} callBack\r\n *\r\n * @returns {object}\r\n */\r\nexport const If = createConditionalAtom(\r\n\tDATA_SOURCES.PARENT,\r\n\tnull,\r\n\t(callback, settings) => createEqualityCallback(callback, settings[2])\r\n);\r\n\r\n/**\r\n * This will create an if state tag.\r\n *\r\n * @overload\r\n * @param {object} data\r\n * @param {string} prop\r\n * @param {*} value\r\n * @param {function} callBack\r\n *\r\n * @overload\r\n * @param {string} prop\r\n * @param {*} value\r\n * @param {function} callBack\r\n *\r\n * @returns {object}\r\n */\r\nexport const IfState = createConditionalAtom(\r\n\tDATA_SOURCES.STATE,\r\n\tnull,\r\n\t(callback, settings) => createEqualityCallback(callback, settings[2])\r\n);\r\n\r\n/**\r\n * This will create an on load data tag.\r\n *\r\n * @overload\r\n * @param {object} data\r\n * @param {function} callBack\r\n * @param {function|object|null} [notLoaded=null]\r\n *\r\n * @overload\r\n * @param {function} callBack\r\n * @param {function|object|null} [notLoaded=null]\r\n *\r\n * @returns {object}\r\n */\r\nexport const OnLoad = createLoadStyleAtom(\r\n\tDATA_SOURCES.PARENT,\r\n\t'loaded',\r\n\t(callback, settings) =>\r\n\t{\r\n\t\tconst notLoaded = (settings.length === 3) ? settings[2] : null;\r\n\t\treturn createBooleanCallback(callback, notLoaded);\r\n\t}\r\n);\r\n\r\n/**\r\n * This will create an on state load tag.\r\n *\r\n * @overload\r\n * @param {object} data\r\n * @param {function} callBack\r\n * @param {function|object|null} [notLoaded=null]\r\n *\r\n * @overload\r\n * @param {function} callBack\r\n * @param {function|object|null} [notLoaded=null]\r\n *\r\n * @returns {object}\r\n */\r\nexport const OnStateLoad = createLoadStyleAtom(\r\n\tDATA_SOURCES.STATE,\r\n\t'loaded',\r\n\t(callback, settings) =>\r\n\t{\r\n\t\tconst notLoaded = (settings.length === 3) ? settings[2] : null;\r\n\t\treturn createBooleanCallback(callback, notLoaded);\r\n\t}\r\n);\r\n\r\n/**\r\n * This will create an on open data tag.\r\n *\r\n * @overload\r\n * @param {object} data\r\n * @param {function} callBack\r\n *\r\n * @overload\r\n * @param {function} callBack\r\n *\r\n * @returns {object}\r\n */\r\nexport const OnOpen = createLoadStyleAtom(\r\n\tDATA_SOURCES.PARENT,\r\n\t'open',\r\n\t(callback) => createBooleanCallback(callback)\r\n);\r\n\r\n/**\r\n * This will create an on state open tag.\r\n *\r\n * @overload\r\n * @param {object} data\r\n * @param {function} callBack\r\n *\r\n * @overload\r\n * @param {function} callBack\r\n *\r\n * @returns {object}\r\n */\r\nexport const OnStateOpen = createLoadStyleAtom(\r\n\tDATA_SOURCES.STATE,\r\n\t'open',\r\n\t(callback) => createBooleanCallback(callback)\r\n);\r\n\r\n// Re-export responsive atoms from on-size.js for backward compatibility\r\nexport { On2Xl, OnLg, OnMd, OnSm, OnXl, OnXs } from './on-size.js';\r\n\r\n", "/**\r\n * This will create a comment.\r\n *\r\n * @param {object} props\r\n * @returns {object}\r\n */\r\nexport const Comment = (props) => ({\r\n    tag: 'comment',\r\n    textContent: `${props.type} placeholder`,\r\n    onCreated: props.onCreated\r\n});", "import { Data } from \"@base-framework/base\";\r\nimport { On } from \"./on.js\";\r\n\r\n/**\r\n * Tailwind CSS breakpoint sizes (mobile-first).\r\n */\r\nconst BREAKPOINTS =\r\n{\r\n\txs: 0,     // Extra small devices\r\n\tsm: 640,   // Small devices\r\n\tmd: 768,   // Medium devices\r\n\tlg: 1024,  // Large devices\r\n\txl: 1280,  // Extra large devices\r\n\t'2xl': 1536 // 2x extra large devices\r\n};\r\n\r\n/**\r\n * Gets the current breakpoint name based on window width.\r\n *\r\n * @param {number} width - The window width\r\n * @returns {string} The breakpoint name\r\n */\r\nconst getBreakpointName = (width) =>\r\n{\r\n\tif (width >= BREAKPOINTS['2xl']) return '2xl';\r\n\tif (width >= BREAKPOINTS.xl) return 'xl';\r\n\tif (width >= BREAKPOINTS.lg) return 'lg';\r\n\tif (width >= BREAKPOINTS.md) return 'md';\r\n\tif (width >= BREAKPOINTS.sm) return 'sm';\r\n\treturn 'xs';\r\n};\r\n\r\n/**\r\n * Checks if current window width meets the breakpoint requirement.\r\n *\r\n * @param {string} currentBreakpoint - Current breakpoint name\r\n * @param {string} targetBreakpoint - Target breakpoint to check\r\n * @returns {boolean} True if current breakpoint is >= target breakpoint\r\n */\r\nconst matchesBreakpoint = (currentBreakpoint, targetBreakpoint) =>\r\n{\r\n\tconst current = BREAKPOINTS[currentBreakpoint] || 0;\r\n\tconst target = BREAKPOINTS[targetBreakpoint] || 0;\r\n\treturn current >= target;\r\n};\r\n\r\n/**\r\n * Global data object for window size tracking.\r\n */\r\nconst sizeData = new Data({\r\n\tsize: null,\r\n\twidth: 0\r\n});\r\n\r\n/**\r\n * Initialize the size tracking system.\r\n */\r\nconst initializeSizeTracker = () =>\r\n{\r\n\tif (typeof window === 'undefined')\r\n\t{\r\n\t\treturn;\r\n\t}\r\n\r\n\t// Set initial values\r\n\tconst currentWidth = window.innerWidth;\r\n\tconst currentBreakpoint = getBreakpointName(currentWidth);\r\n\r\n\t// @ts-ignore\r\n\tsizeData.size = currentBreakpoint;\r\n\t// @ts-ignore\r\n\tsizeData.width = currentWidth;\r\n\r\n\t/**\r\n\t * Handle window resize events.\r\n\t */\r\n\tconst handleResize = () =>\r\n\t{\r\n\t\tconst newWidth = window.innerWidth;\r\n\t\tconst newBreakpoint = getBreakpointName(newWidth);\r\n\r\n\t\t// Only update if the breakpoint or width actually changed\r\n\t\t// @ts-ignore\r\n\t\tif (newWidth !== sizeData.width || newBreakpoint !== sizeData.size)\r\n\t\t{\r\n\t\t\t// @ts-ignore\r\n\t\t\tsizeData.width = newWidth;\r\n\t\t\t// @ts-ignore\r\n\t\t\tsizeData.size = newBreakpoint;\r\n\t\t}\r\n\t};\r\n\r\n\t// Add resize listener\r\n\twindow.addEventListener('resize', handleResize);\r\n\r\n\t// Return cleanup function\r\n\treturn () =>\r\n\t{\r\n\t\twindow.removeEventListener('resize', handleResize);\r\n\t};\r\n};\r\n\r\n// Initialize the tracker immediately\r\nlet cleanup = null;\r\nif (typeof window !== 'undefined')\r\n{\r\n\tcleanup = initializeSizeTracker();\r\n}\r\n\r\n/**\r\n * Factory for creating responsive breakpoint atoms.\r\n *\r\n * @param {string} targetBreakpoint - The breakpoint name (xs, sm, md, lg, xl, 2xl)\r\n * @returns {function} The responsive atom factory function\r\n */\r\nconst createResponsiveAtom = (targetBreakpoint) =>\r\n{\r\n\treturn (callback) =>\r\n\t{\r\n\t\tif (typeof callback !== 'function')\r\n\t\t{\r\n\t\t\treturn;\r\n\t\t}\r\n\r\n\t\t// Use the On atom to watch the sizeData.size property\r\n\t\treturn On(sizeData, 'size', (currentBreakpoint, ele, parent) =>\r\n\t\t{\r\n\t\t\t// Check if current breakpoint meets the target requirement\r\n\t\t\tif (matchesBreakpoint(currentBreakpoint, targetBreakpoint))\r\n\t\t\t{\r\n\t\t\t\t// Pass the current width to the callback for additional context\r\n\t\t\t\t// @ts-ignore\r\n\t\t\t\treturn callback(sizeData.width, ele, parent);\r\n\t\t\t}\r\n\r\n\t\t\t// Return null to prevent rendering when breakpoint doesn't match\r\n\t\t\treturn null;\r\n\t\t});\r\n\t};\r\n};\r\n\r\n/**\r\n * This will create a responsive xs breakpoint atom (0px+).\r\n * Renders when window width is 0px or larger (always renders).\r\n *\r\n * @param {function} callback - The callback function to render the layout\r\n * @returns {object} The responsive atom\r\n */\r\nexport const OnXs = createResponsiveAtom('xs');\r\n\r\n/**\r\n * This will create a responsive sm breakpoint atom (640px+).\r\n * Renders when window width is 640px or larger.\r\n *\r\n * @param {function} callback - The callback function to render the layout\r\n * @returns {object} The responsive atom\r\n */\r\nexport const OnSm = createResponsiveAtom('sm');\r\n\r\n/**\r\n * This will create a responsive md breakpoint atom (768px+).\r\n * Renders when window width is 768px or larger.\r\n *\r\n * @param {function} callback - The callback function to render the layout\r\n * @returns {object} The responsive atom\r\n */\r\nexport const OnMd = createResponsiveAtom('md');\r\n\r\n/**\r\n * This will create a responsive lg breakpoint atom (1024px+).\r\n * Renders when window width is 1024px or larger.\r\n *\r\n * @param {function} callback - The callback function to render the layout\r\n * @returns {object} The responsive atom\r\n */\r\nexport const OnLg = createResponsiveAtom('lg');\r\n\r\n/**\r\n * This will create a responsive xl breakpoint atom (1280px+).\r\n * Renders when window width is 1280px or larger.\r\n *\r\n * @param {function} callback - The callback function to render the layout\r\n * @returns {object} The responsive atom\r\n */\r\nexport const OnXl = createResponsiveAtom('xl');\r\n\r\n/**\r\n * This will create a responsive 2xl breakpoint atom (1536px+).\r\n * Renders when window width is 1536px or larger.\r\n *\r\n * @param {function} callback - The callback function to render the layout\r\n * @returns {object} The responsive atom\r\n */\r\nexport const On2Xl = createResponsiveAtom('2xl');\r\n\r\n/**\r\n * Export the size data for external access if needed.\r\n */\r\nexport { sizeData };\r\n\r\n/**\r\n * Export cleanup function for testing or manual cleanup.\r\n */\r\n\texport { cleanup as cleanupSizeTracker };\r\n\r\n\r\n", "import { Builder } from \"@base-framework/base\";\r\nimport { Comment as BaseComment } from \"src/comment.js\";\r\n\r\n/**\r\n * This will set up the update layout function.\r\n *\r\n * @param {function} callBack\r\n * @param {object} ele\r\n * @param {object} parent\r\n * @returns {function}\r\n */\r\nconst updateLayout = (callBack, ele, parent) =>\r\n{\r\n\tconst layout = callBack(parent);\r\n\tif (layout === undefined)\r\n\t{\r\n\t\treturn;\r\n\t}\r\n\r\n\t/**\r\n\t * This will build the layout and insert it after the\r\n\t * comment element.\r\n\t */\r\n\tconst frag = Builder.build(layout, null, parent);\r\n\tele.parentNode.insertBefore(frag, ele.nextSibling);\r\n};\r\n\r\n/**\r\n * This will create a comment.\r\n *\r\n * @param {object} props\r\n * @returns {object}\r\n */\r\nconst Comment = (props) => BaseComment({\r\n\ttype: 'use',\r\n\tonCreated: props.onCreated\r\n});\r\n\r\n/**\r\n * This will create a use parent tag.\r\n *\r\n * @param {function} callBack\r\n * @returns {object}\r\n */\r\nexport const UseParent = (callBack) =>\r\n{\r\n\t/**\r\n\t * This will create a comment to use as a placeholder\r\n\t * to keep the layout in place.\r\n\t */\r\n\treturn Comment({\r\n\t\tonCreated: (ele, parent) =>\r\n\t\t{\r\n\t\t\tupdateLayout(callBack, ele, parent);\r\n\t\t}\r\n\t});\r\n};"],
+  "mappings": "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",
+  "names": ["Atom", "Builder", "dataBinder", "Comment", "props", "Data", "BREAKPOINTS", "getBreakpointName", "width", "matchesBreakpoint", "currentBreakpoint", "targetBreakpoint", "current", "target", "sizeData", "Data", "initializeSizeTracker", "currentWidth", "handleResize", "newWidth", "newBreakpoint", "cleanup", "createResponsiveAtom", "callback", "On", "ele", "parent", "OnXs", "OnSm", "OnMd", "OnLg", "OnXl", "On2Xl", "DATA_SOURCES", "getDataSource", "parent", "sourceType", "getParentData", "createEqualityCallback", "callback", "expectedValue", "fallback", "value", "ele", "createBooleanCallback", "createConditionalAtom", "dataSourceType", "defaultProp", "callbackTransformer", "args", "settings", "Comment", "data", "prop", "finalCallback", "update", "updateLayout", "dataBinder", "createLoadStyleAtom", "callBack", "prevEle", "layout", "Builder", "frag", "props", "On", "OnState", "OnRoute", "If", "IfState", "OnLoad", "notLoaded", "OnStateLoad", "OnOpen", "OnStateOpen", "Builder", "updateLayout", "callBack", "ele", "parent", "layout", "frag", "Builder", "Comment", "props", "UseParent", "Tag", "props", "children", "Doctype", "Html", "Atom", "Script", "Style", "Head", "Title", "Meta", "Link", "Body", "Div", "Dialog", "Span", "P", "A", "Button", "SubmitButton", "Ul", "Li", "Img", "Br", "Hr", "Text", "H1", "H2", "H3", "H4", "H5", "H6", "Input", "Label", "Checkbox", "Section", "Article", "Header", "Footer", "Nav", "Aside", "Figure", "Figcaption", "Main", "Video", "Audio", "Table", "Tr", "Th", "Td", "Thead", "Tbody", "Tfoot", "Form", "Select", "Option", "Textarea", "Canvas", "Progress", "Blockquote", "Pre", "Code", "Ol", "Dl", "Dt", "Dd", "Fieldset", "Legend", "Meter", "Iframe", "Details", "Summary", "Em", "Strong", "Small", "S", "Cite", "Q", "Dfn", "Abbr", "Data", "Time", "Var", "Samp", "Kbd", "Sub", "Sup", "I", "B", "U", "Mark", "Ruby", "Rt", "Rp", "Bdi", "Bdo", "Wbr", "Comment"]
 }

package/dist/types/atoms.d.ts

@@ -713,11 +713,17 @@ export const Comment: Function;
 import { If } from './on/on.js';
 import { IfState } from './on/on.js';
 import { On } from './on/on.js';
+import { On2Xl } from './on/on.js';
+import { OnLg } from './on/on.js';
 import { OnLoad } from './on/on.js';
+import { OnMd } from './on/on.js';
 import { OnOpen } from './on/on.js';
 import { OnRoute } from './on/on.js';
+import { OnSm } from './on/on.js';
 import { OnState } from './on/on.js';
 import { OnStateLoad } from './on/on.js';
 import { OnStateOpen } from './on/on.js';
+import { OnXl } from './on/on.js';
+import { OnXs } from './on/on.js';
 import { UseParent } from './use/use.js';
-export { If, IfState, On, OnLoad, OnOpen, OnRoute, OnState, OnStateLoad, OnStateOpen, UseParent };
+export { If, IfState, On, On2Xl, OnLg, OnLoad, OnMd, OnOpen, OnRoute, OnSm, OnState, OnStateLoad, OnStateOpen, OnXl, OnXs, UseParent };

package/dist/types/on/on-size.d.ts

@@ -0,0 +1,55 @@
+/**
+ * This will create a responsive xs breakpoint atom (0px+).
+ * Renders when window width is 0px or larger (always renders).
+ *
+ * @param {function} callback - The callback function to render the layout
+ * @returns {object} The responsive atom
+ */
+export const OnXs: Function;
+/**
+ * This will create a responsive sm breakpoint atom (640px+).
+ * Renders when window width is 640px or larger.
+ *
+ * @param {function} callback - The callback function to render the layout
+ * @returns {object} The responsive atom
+ */
+export const OnSm: Function;
+/**
+ * This will create a responsive md breakpoint atom (768px+).
+ * Renders when window width is 768px or larger.
+ *
+ * @param {function} callback - The callback function to render the layout
+ * @returns {object} The responsive atom
+ */
+export const OnMd: Function;
+/**
+ * This will create a responsive lg breakpoint atom (1024px+).
+ * Renders when window width is 1024px or larger.
+ *
+ * @param {function} callback - The callback function to render the layout
+ * @returns {object} The responsive atom
+ */
+export const OnLg: Function;
+/**
+ * This will create a responsive xl breakpoint atom (1280px+).
+ * Renders when window width is 1280px or larger.
+ *
+ * @param {function} callback - The callback function to render the layout
+ * @returns {object} The responsive atom
+ */
+export const OnXl: Function;
+/**
+ * This will create a responsive 2xl breakpoint atom (1536px+).
+ * Renders when window width is 1536px or larger.
+ *
+ * @param {function} callback - The callback function to render the layout
+ * @returns {object} The responsive atom
+ */
+export const On2Xl: Function;
+/**
+ * Global data object for window size tracking.
+ */
+export const sizeData: Data;
+declare let cleanup: any;
+import { Data } from "@base-framework/base";
+export { cleanup as cleanupSizeTracker };

package/dist/types/on/on.d.ts

@@ -13,22 +13,7 @@ export function getParentData(parent: object): object | null;
  *
  * @returns {object}
  */
-export function On(data: object, prop: string, callBack: Function): any;
-/**
- * This will create an on data tag.
- *
- * @overload
- * @param {object} data
- * @param {string} prop
- * @param {function} callBack
- *
- * @overload
- * @param {string} prop
- * @param {function} callBack
- *
- * @returns {object}
- */
-export function On(prop: string, callBack: Function): object;
+export const On: Function;
 /**
  * This will create an on state tag.
  *
@@ -43,22 +28,7 @@ export function On(prop: string, callBack: Function): object;
  *
  * @returns {object}
  */
-export function OnState(data: object, prop: string, callBack: Function): any;
-/**
- * This will create an on state tag.
- *
- * @overload
- * @param {object} data
- * @param {string} prop
- * @param {function} callBack
- *
- * @overload
- * @param {string} prop
- * @param {function} callBack
- *
- * @returns {object}
- */
-export function OnState(prop: string, callBack: Function): object;
+export const OnState: Function;
 /**
  * This will create an on route tag.
  *
@@ -73,39 +43,7 @@ export function OnState(prop: string, callBack: Function): object;
  *
  * @returns {object}
  */
-export function OnRoute(data: object, prop: string, callBack: Function): any;
-/**
- * This will create an on route tag.
- *
- * @overload
- * @param {object} data
- * @param {string} prop
- * @param {function} callBack
- *
- * @overload
- * @param {string} prop
- * @param {function} callBack
- *
- * @returns {object}
- */
-export function OnRoute(prop: string, callBack: Function): object;
-/**
- * This will create an if data tag.
- *
- * @overload
- * @param {object} data
- * @param {string} prop
- * @param {*} value
- * @param {function} callBack
- *
- * @overload
- * @param {string} prop
- * @param {*} value
- * @param {function} callBack
- *
- * @returns {object}
- */
-export function If(data: object, prop: string, value: any, callBack: Function): any;
+export const OnRoute: Function;
 /**
  * This will create an if data tag.
  *
@@ -122,7 +60,7 @@ export function If(data: object, prop: string, value: any, callBack: Function):
  *
  * @returns {object}
  */
-export function If(prop: string, value: any, callBack: Function): object;
+export const If: Function;
 /**
  * This will create an if state tag.
  *
@@ -139,84 +77,7 @@ export function If(prop: string, value: any, callBack: Function): object;
  *
  * @returns {object}
  */
-export function IfState(data: object, prop: string, value: any, callBack: Function): any;
-/**
- * This will create an if state tag.
- *
- * @overload
- * @param {object} data
- * @param {string} prop
- * @param {*} value
- * @param {function} callBack
- *
- * @overload
- * @param {string} prop
- * @param {*} value
- * @param {function} callBack
- *
- * @returns {object}
- */
-export function IfState(prop: string, value: any, callBack: Function): object;
-/**
- * This will create an on load data tag.
- *
- * @overload
- * @param {object} data
- * @param {function} callBack
- * @param {function|object|null} [notLoaded=null]
- *
- * @overload
- * @param {function} callBack
- * @param {function|object|null} [notLoaded=null]
- *
- * @returns {object}
- */
-export function OnLoad(data: object, callBack: Function, notLoaded?: Function | object | null): any;
-/**
- * This will create an on load data tag.
- *
- * @overload
- * @param {object} data
- * @param {function} callBack
- * @param {function|object|null} [notLoaded=null]
- *
- * @overload
- * @param {function} callBack
- * @param {function|object|null} [notLoaded=null]
- *
- * @returns {object}
- */
-export function OnLoad(callBack: Function, notLoaded?: Function | object | null): object;
-/**
- * This will create an on load data tag.
- *
- * @overload
- * @param {object} data
- * @param {function} callBack
- * @param {function|object|null} [notLoaded=null]
- *
- * @overload
- * @param {function} callBack
- * @param {function|object|null} [notLoaded=null]
- *
- * @returns {object}
- */
-export function OnStateLoad(data: object, callBack: Function, notLoaded?: Function | object | null): any;
-/**
- * This will create an on load data tag.
- *
- * @overload
- * @param {object} data
- * @param {function} callBack
- * @param {function|object|null} [notLoaded=null]
- *
- * @overload
- * @param {function} callBack
- * @param {function|object|null} [notLoaded=null]
- *
- * @returns {object}
- */
-export function OnStateLoad(callBack: Function, notLoaded?: Function | object | null): object;
+export const IfState: Function;
 /**
  * This will create an on load data tag.
  *
@@ -231,9 +92,9 @@ export function OnStateLoad(callBack: Function, notLoaded?: Function | object |
  *
  * @returns {object}
  */
-export function OnOpen(data: object, callBack: Function, notLoaded?: Function | object | null): any;
+export const OnLoad: Function;
 /**
- * This will create an on load data tag.
+ * This will create an on state load tag.
  *
  * @overload
  * @param {object} data
@@ -246,34 +107,31 @@ export function OnOpen(data: object, callBack: Function, notLoaded?: Function |
  *
  * @returns {object}
  */
-export function OnOpen(callBack: Function, notLoaded?: Function | object | null): object;
+export const OnStateLoad: Function;
 /**
- * This will create an on load data tag.
+ * This will create an on open data tag.
  *
  * @overload
  * @param {object} data
  * @param {function} callBack
- * @param {function|object|null} [notLoaded=null]
  *
  * @overload
  * @param {function} callBack
- * @param {function|object|null} [notLoaded=null]
  *
  * @returns {object}
  */
-export function OnStateOpen(data: object, callBack: Function, notLoaded?: Function | object | null): any;
+export const OnOpen: Function;
 /**
- * This will create an on load data tag.
+ * This will create an on state open tag.
  *
  * @overload
  * @param {object} data
  * @param {function} callBack
- * @param {function|object|null} [notLoaded=null]
  *
  * @overload
  * @param {function} callBack
- * @param {function|object|null} [notLoaded=null]
  *
  * @returns {object}
  */
-export function OnStateOpen(callBack: Function, notLoaded?: Function | object | null): object;
+export const OnStateOpen: Function;
+export { On2Xl, OnLg, OnMd, OnSm, OnXl, OnXs } from "./on-size.js";

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@base-framework/atoms",
-	"version": "1.0.65",
+	"version": "1.0.67",
 	"description": "This will add default atoms to the base framework.",
 	"main": "./dist/atoms.js",
 	"scripts": {