Content inside minjs<br />
(The <a href='#raw'>raw file</a> follows this syntax highlighted file.)<br /><br />
<link rel="stylesheet" href="https://unpkg.com/@highlightjs/cdn-assets@11.6.0/styles/stackoverflow-light.min.css">
<script src="https://unpkg.com/@highlightjs/cdn-assets@11.6.0/highlight.min.js"></script>
<script>hljs.highlightAll();</script>
<pre><code>&#34;use strict&#34;;
// One way to add dep to package.json of project: &#34;minjs&#34;: &#34;git&#43;https://git.ondollo.com/minjs.git#v0.XY.0&#34;
import * as R from &#34;ramda&#34;;import anime from &#34;animejs/lib/anime.es.js&#34;;import {create} from &#34;free-style&#34;
const l=console.log;const neon=R.allPass([R.isNotNil,R.complement(R.isEmpty)]);const eon=R.anyPass([R.isNil,R.isEmpty])
/* calling store returns an object like: {
	get state(), // Returns the current state object - this is a **getter**
	mod(o), // Modifies the state object (where cs is a clone of s) to be the result of: post(R.mergeRight(s,pre(o,cs)),cs)
	any(h) // Appends the niladic func (h) to the handlers (hs), which are each called any time s and s&#39; are different after s.mod is called
	on(lls,h) // Appends the niladic func (h) to the handlers (ls) - h is called if any of the lens (lls) values in s and s&#39; are different after s.mod is called
} */
const store=(o={},pre=R.identity,post=R.identity,...ihs)=&gt;{let s=o;let hs=ihs;let ls=[]
	return {get state(){return s},mod:(o)=&gt;{const cs=R.clone(s);const ns=post(R.mergeRight(s,pre(o,cs)),cs)
		if(R.complement(R.equals)(ns,s)){s=ns;R.map(R.call,hs);R.map((l)=&gt;{l(ns,cs)},ls)}return {onceAfter:(fn)=&gt;eon(fn) ? ()=&gt;{} : fn(s)}
	},any:(h)=&gt;{hs=R.append(h,hs)},
	on:(lls,h)=&gt;{
		ls=R.append(R.cond([ // TODO - filter out undefined from ls - here or later at call...
			[
				R.anyPass(R.map((l)=&gt;R.compose(R.not,R.apply(R.equals),R.map(R.view(l)),R.pair),lls)),
				R.thunkify(h)()
			]
		]),ls)}}}
const d=document;const dce=(e)=&gt;d.createElement(e);const dctn=(e)=&gt;d.createTextNode(e)
const dhac=(c)=&gt;d.head.appendChild(c);const dbac=(c)=&gt;d.body.appendChild(c);
const lcc=&#34;lcc&#34;&#43;crypto.randomUUID() // lcc is used as the internal key for tracking lifecycle funcs
const mot=R.tap((e)=&gt;{if(eon(e[lcc].added)&amp;&amp;eon(e[lcc].removed)){return} // TODO - only once... track e seperately
        (new MutationObserver((ms,o)=&gt;R.map((m)=&gt;{
			if(R.any((o)=&gt;o.contains(e), m.addedNodes)&amp;&amp;neon(e[lcc].added)){e[lcc].added(e)}
			if(R.any((o)=&gt;o.contains(e), m.removedNodes)&amp;&amp;neon(e[lcc].removed)){o.disconnect();e[lcc].removed(e)}
        })(ms))).observe(window.document,{childList:true,subtree:true})})
const e=(t,a={},...cs)=&gt;{ // Inspired by hscrpt - use &#39;className&#39; for class and all lowercase for handlers - t is the tag name as a string, a is an object of attribute kvs, cs are children
	const el=dce(t);R.mapObjIndexed((v,k)=&gt;(eon(v) ? (delete el[k]) : el[k]=v),R.dissoc(&#34;lifecycle&#34;,a));	// The attr &#39;lifecycle&#39; is unique.
	el[lcc]={};R.mapObjIndexed((v,k)=&gt;el[lcc][k]=v,a.lifecycle);						// The lifecycle methods are: &#39;added&#39; and &#39;removed&#39;
	R.map((c)=&gt;{if(c){el.appendChild(R.is(String,c) ? dctn(c) : c)}},R.when(R.is(Array),R.unnest,cs));
	return mot(el)}
const innere=(t,a,s)=&gt;{const el=e(t,a);el.innerHTML=s;return el} // If you want to create an element where innerHTML is set to &#39;s&#39; - an SVG element is a likely candidate for this
const ge=(id)=&gt;{const r=d.getElementById(id);if(false&amp;&amp;eon(r)){l(&#34;Unable to find an element by id:&#34;, id, &#34;returning:&#34;, r)};return r}
const stopEvent=(e)=&gt;{e.preventDefault();e.stopPropagation()}
const onEFN=(pred)=&gt;(f,stopProp=true)=&gt;(e)=&gt;{if(pred(e)){f(e);if(stopProp){stopEvent(e)}}} // Not an R.when, since params are given at different times
const focusIfVisible=(id)=&gt;{if(neon(ge(id))&amp;&amp;(ge(id).offsetParent!=null)){ ge(id).focus() }}
const addjs=(src)=&gt;{const s=dce(&#34;script&#34;);s.setAttribute(&#34;src&#34;, src);s.async=false;dbac(s)}
const addcss=(o)=&gt;{const s=create();const r=s.registerStyle(o);const se=dce(&#34;style&#34;);se.textContent=s.getStyles();dhac(se);return r}
const callall=R.compose(R.apply(R.compose),R.map(R.tap))
const valueByID=(id)=&gt;ge(id).value;const disableID=(id)=&gt;R.mergeLeft({[`disabled${id}`]:true});const enableID=(id)=&gt;R.mergeLeft({[`disabled${id}`]:false})
const disableable=(s)=&gt;R.when((o)=&gt;s.state[`disabled${o.id}`], R.assoc(&#34;disabled&#34;,true))
const clearValueByID=(id)=&gt;ge(id).value=&#34;&#34;
const debounce=(t)=&gt;{let id=null;return (fn)=&gt;{if(id){clearTimeout(id)}id=setTimeout(fn,t)}}
const wls=window.localStorage;const jp=JSON.parse;const js=JSON.stringify

const onEnter=onEFN(R.whereEq({key:&#34;Enter&#34;,keyCode:13}))
const sduMoveDuration=1000
const sduStayDuration=sduMoveDuration*6
const slideDownUp=(t)=&gt;()=&gt;{anime({targets:t,translateY:[&#34;-100%&#34;,0],duration:sduMoveDuration,easing:&#34;easeInOutQuad&#34;,complete:()=&gt;{ // &#39;t&#39; are any targets as defined by animejs
	anime({targets:t,top:[0,&#34;-100%&#34;],duration:sduMoveDuration,delay:sduStayDuration,easing:&#34;easeInOutQuad&#34;,complete:()=&gt;{anime.remove(t)}})}})}
const fioMoveDuration=1000
const fioStayDuration=fioMoveDuration*2
const fadeInOut=(t)=&gt;()=&gt;{anime({targets:t,opacity:[&#34;0%&#34;,&#34;100%&#34;],duration:fioMoveDuration,easing:&#34;easeInOutQuad&#34;,complete:()=&gt;{ // &#39;t&#39; are any targets as defined by animejs
        anime({targets:t,opacity:[&#34;100%&#34;,&#34;0%&#34;],duration:fioMoveDuration,delay:fioStayDuration,easing:&#34;easeInOutQuad&#34;,complete:()=&gt;{anime.remove(t)}})}})}
const runAfterOneSecondPause=debounce(1000)
addcss({$global:true,
	&#34;*,*::before,*::after&#34;:{boxSizing:&#34;border-box&#34;}, &#34;*&#34;:{margin:0},
	html:{lineHeight:1.25}, body:{padding:0,letterSpacing:&#34;0.2px&#34;,fontSize:&#34;14pt&#34;},
	&#34;a,a:visited,a:hover,a:active&#34;:{color:&#34;LinkText&#34;},
},true)

const emptyFavicon=()=&gt;dhac(e(&#34;link&#34;,{rel:&#34;icon&#34;,href:&#34;data:;base64,iVBORw0KGgo=&#34;}))
const standardViewport=()=&gt;dhac(e(&#34;meta&#34;,{name:&#34;viewport&#34;,content:&#34;width=device-width, initial-scale=1&#34;}))

const uuid=()=&gt;crypto.randomUUID()
const ensureID=(o)=&gt;R.mergeLeft(o,{id:uuid()})
const mwk=R.mergeWithKey((k,l,r)=&gt;R.cond([
	[R.equals(&#34;value&#34;), R.always(r)],
	[R.equals(&#34;checked&#34;), R.always(r)],
	[R.equals(&#34;lifecycle&#34;), R.always(r)],
	[R.T,R.always(l)]]))
const ael=(k,f)=&gt;(e)=&gt;e.addEventListener(k,f)
const rel=(k,f)=&gt;(e)=&gt;e.removeEventListener(k,f)
const lc=R.compose(R.fromPairs, R.zip([&#34;added&#34;,&#34;removed&#34;]))
const gsFrom=(s,lens)=&gt;[()=&gt;R.view(lens,s.state), (v)=&gt;s.mod(R.set(lens,v,s.state))]
const valueUsing=R.curry((s,lens,o)=&gt;{o=ensureID(o);const [fg,fs]=gsFrom(s,lens);const f=R.compose(fs, R.path([&#34;target&#34;,&#34;value&#34;]));
	return mwk(o,{value:fg(),lifecycle:lc([ael(&#34;input&#34;,f),rel(&#34;input&#34;,f)])})})
const displayUsing=R.curry((s,lens,o)=&gt;{o=ensureID(o);const [fg,_]=gsFrom(s,lens);return mwk(o,{lifecycle:lc([(e)=&gt;e.textContent=fg()])})})
const checkedUsing=R.curry((s,lens,o)=&gt;{o=ensureID(o);const [fg,fs]=gsFrom(s,lens);const f=R.compose(fs, R.path([&#34;target&#34;,&#34;checked&#34;]));
        return mwk(o,{checked:fg(),lifecycle:lc([ael(&#34;change&#34;,f),rel(&#34;change&#34;,f)])})})
const display=R.curry((s,fg,o)=&gt;{o=ensureID(o);s.any(()=&gt;ge(o.id).textContent=fg());return mwk(o,{lifecycle:lc([(e)=&gt;e.textContent=fg()])})})
const direct=(t,lls,s,f)=&gt;{const id=uuid();s.on(lls,()=&gt;ge(id).replaceChildren(f()));return e(t,{id:id,style:&#34;display:contents&#34;},f())}
const just=(f,lls,s,o)=&gt;{o=ensureID(o);s.on(lls,()=&gt;f(s,ge(o.id)));return o}
const dek=(id)=&gt;`disabled${id}` // Next line is: ...DEA, ...DEL, ...Disable, ...Enable
const deToggle=(id,s)=&gt;[()=&gt;R.lensPath([dek(id)]),()=&gt;R.when((o)=&gt;s.state[dek(o.id)],R.assoc(&#34;disabled&#34;,true)),()=&gt;s.mod({[dek(id)]:true}),()=&gt;s.mod({[dek(id)]:false})]

let twid=&#34;&#34;;let tdocs=[];let docs=(wid,s)=&gt;{twid=wid;tdocs=R.append(s,tdocs)}
(async ()=&gt;{
	import(&#34;commonmark&#34;).then((mod)=&gt;{
		const codeBlockAdjustments=(wid)=&gt;`setTimeout(()=&gt;{
			Array.from(document.querySelectorAll(&#34;#`&#43;wid&#43;` pre&#34;)).forEach((e)=&gt;{
				const dn=document.createElement(&#34;details&#34;);const sn=document.createElement(&#34;summary&#34;)
				sn.textContent=&#34;Code sample&#34;;e.parentNode.insertBefore(dn,e);dn.appendChild(sn);dn.appendChild(e)
			})},0)`
		const r=new mod.Parser({smart:true});const w=new mod.HtmlRenderer({safe:true});
		docs=R.curry((wid,s)=&gt;{
			addcss({$global:true,
				[`#${wid} &gt; h3`]:{marginBottom:&#34;1em&#34;},
				[`#${wid} &gt; p:has(&#43; details)`]:{margin:&#34;1.75em&#34;,marginLeft:&#34;-2em&#34;,marginRight:0,transform:&#34;translate(2em)&#34;,border:&#34;1px solid lavender&#34;},
				[`#${wid} details`]:{width:&#34;30em&#34;,padding:&#34;.25em&#34;,border:&#34;1px solid black&#34;,backgroundColor:&#34;white&#34;,position:&#34;absolute&#34;,transform:&#34;translate(30em,-2em)&#34;},
				[`#${wid} details &gt; summary`]:{cursor:&#34;pointer&#34;},
				[`#${wid} details[open]`]:{zIndex:1000},
				[`#${wid} details[closed]`]:{zIndex:0},
			})
			const p=r.parse(s);const walker=p.walker();let el=null
			while((el=walker.next())){
				const n=el.node;
				if(el.entering &amp;&amp; n.type===&#39;code_block&#39;){
					if(n.info.includes(&#34;codeBlockAdjustments&#34;)){n.literal=codeBlockAdjustments(wid)}
					if(n.info.includes(&#34;run&#34;)){const sc=dce(&#34;script&#34;);sc.innerHTML=n.literal;dbac(sc)}
					if(n.info.includes(&#34;hide&#34;)){n.unlink()}else{n.insertBefore(new mod.Node(&#34;paragraph&#34;,n.sourcepos))}
				}
			}
			document.getElementById(wid).innerHTML=w.render(p)
		})
		if(tdocs.length&gt;0){R.map(docs(twid),tdocs)}
	}).catch((err)=&gt;l(`Failed to use commonmark to generate docs in &#39;${twid}&#39;: ${err}`))
})()

Object.assign(globalThis,{
	R,anime,
	l,neon,eon,
	store,
	d,dce,dctn,dhac,dbac,
	e,innere,
	ge,
	stopEvent,onEFN,onEnter,
	focusIfVisible,
	addjs,
	addcss,
	callall,
	valueByID,disableID,enableID,clearValueByID,
	disableable,
	debounce,runAfterOneSecondPause,
	wls,jp,js,
	slideDownUp,fadeInOut,
	emptyFavicon,standardViewport,
	uuid,
	ensureID,
	ael,rel,
	lc,
	gsFrom,
	valueUsing,displayUsing,checkedUsing,display,direct,just,
	dek,deToggle,
	docs,
})
</code></pre>
<br /><br />
<div id='raw'>The raw file follows...</div>
<br /><br />
<div style="border:solid 1px black; padding:1em; overflow:scroll" contentEditable><pre>&#34;use strict&#34;;
// One way to add dep to package.json of project: &#34;minjs&#34;: &#34;git&#43;https://git.ondollo.com/minjs.git#v0.XY.0&#34;
import * as R from &#34;ramda&#34;;import anime from &#34;animejs/lib/anime.es.js&#34;;import {create} from &#34;free-style&#34;
const l=console.log;const neon=R.allPass([R.isNotNil,R.complement(R.isEmpty)]);const eon=R.anyPass([R.isNil,R.isEmpty])
/* calling store returns an object like: {
	get state(), // Returns the current state object - this is a **getter**
	mod(o), // Modifies the state object (where cs is a clone of s) to be the result of: post(R.mergeRight(s,pre(o,cs)),cs)
	any(h) // Appends the niladic func (h) to the handlers (hs), which are each called any time s and s&#39; are different after s.mod is called
	on(lls,h) // Appends the niladic func (h) to the handlers (ls) - h is called if any of the lens (lls) values in s and s&#39; are different after s.mod is called
} */
const store=(o={},pre=R.identity,post=R.identity,...ihs)=&gt;{let s=o;let hs=ihs;let ls=[]
	return {get state(){return s},mod:(o)=&gt;{const cs=R.clone(s);const ns=post(R.mergeRight(s,pre(o,cs)),cs)
		if(R.complement(R.equals)(ns,s)){s=ns;R.map(R.call,hs);R.map((l)=&gt;{l(ns,cs)},ls)}return {onceAfter:(fn)=&gt;eon(fn) ? ()=&gt;{} : fn(s)}
	},any:(h)=&gt;{hs=R.append(h,hs)},
	on:(lls,h)=&gt;{
		ls=R.append(R.cond([ // TODO - filter out undefined from ls - here or later at call...
			[
				R.anyPass(R.map((l)=&gt;R.compose(R.not,R.apply(R.equals),R.map(R.view(l)),R.pair),lls)),
				R.thunkify(h)()
			]
		]),ls)}}}
const d=document;const dce=(e)=&gt;d.createElement(e);const dctn=(e)=&gt;d.createTextNode(e)
const dhac=(c)=&gt;d.head.appendChild(c);const dbac=(c)=&gt;d.body.appendChild(c);
const lcc=&#34;lcc&#34;&#43;crypto.randomUUID() // lcc is used as the internal key for tracking lifecycle funcs
const mot=R.tap((e)=&gt;{if(eon(e[lcc].added)&amp;&amp;eon(e[lcc].removed)){return} // TODO - only once... track e seperately
        (new MutationObserver((ms,o)=&gt;R.map((m)=&gt;{
			if(R.any((o)=&gt;o.contains(e), m.addedNodes)&amp;&amp;neon(e[lcc].added)){e[lcc].added(e)}
			if(R.any((o)=&gt;o.contains(e), m.removedNodes)&amp;&amp;neon(e[lcc].removed)){o.disconnect();e[lcc].removed(e)}
        })(ms))).observe(window.document,{childList:true,subtree:true})})
const e=(t,a={},...cs)=&gt;{ // Inspired by hscrpt - use &#39;className&#39; for class and all lowercase for handlers - t is the tag name as a string, a is an object of attribute kvs, cs are children
	const el=dce(t);R.mapObjIndexed((v,k)=&gt;(eon(v) ? (delete el[k]) : el[k]=v),R.dissoc(&#34;lifecycle&#34;,a));	// The attr &#39;lifecycle&#39; is unique.
	el[lcc]={};R.mapObjIndexed((v,k)=&gt;el[lcc][k]=v,a.lifecycle);						// The lifecycle methods are: &#39;added&#39; and &#39;removed&#39;
	R.map((c)=&gt;{if(c){el.appendChild(R.is(String,c) ? dctn(c) : c)}},R.when(R.is(Array),R.unnest,cs));
	return mot(el)}
const innere=(t,a,s)=&gt;{const el=e(t,a);el.innerHTML=s;return el} // If you want to create an element where innerHTML is set to &#39;s&#39; - an SVG element is a likely candidate for this
const ge=(id)=&gt;{const r=d.getElementById(id);if(false&amp;&amp;eon(r)){l(&#34;Unable to find an element by id:&#34;, id, &#34;returning:&#34;, r)};return r}
const stopEvent=(e)=&gt;{e.preventDefault();e.stopPropagation()}
const onEFN=(pred)=&gt;(f,stopProp=true)=&gt;(e)=&gt;{if(pred(e)){f(e);if(stopProp){stopEvent(e)}}} // Not an R.when, since params are given at different times
const focusIfVisible=(id)=&gt;{if(neon(ge(id))&amp;&amp;(ge(id).offsetParent!=null)){ ge(id).focus() }}
const addjs=(src)=&gt;{const s=dce(&#34;script&#34;);s.setAttribute(&#34;src&#34;, src);s.async=false;dbac(s)}
const addcss=(o)=&gt;{const s=create();const r=s.registerStyle(o);const se=dce(&#34;style&#34;);se.textContent=s.getStyles();dhac(se);return r}
const callall=R.compose(R.apply(R.compose),R.map(R.tap))
const valueByID=(id)=&gt;ge(id).value;const disableID=(id)=&gt;R.mergeLeft({[`disabled${id}`]:true});const enableID=(id)=&gt;R.mergeLeft({[`disabled${id}`]:false})
const disableable=(s)=&gt;R.when((o)=&gt;s.state[`disabled${o.id}`], R.assoc(&#34;disabled&#34;,true))
const clearValueByID=(id)=&gt;ge(id).value=&#34;&#34;
const debounce=(t)=&gt;{let id=null;return (fn)=&gt;{if(id){clearTimeout(id)}id=setTimeout(fn,t)}}
const wls=window.localStorage;const jp=JSON.parse;const js=JSON.stringify

const onEnter=onEFN(R.whereEq({key:&#34;Enter&#34;,keyCode:13}))
const sduMoveDuration=1000
const sduStayDuration=sduMoveDuration*6
const slideDownUp=(t)=&gt;()=&gt;{anime({targets:t,translateY:[&#34;-100%&#34;,0],duration:sduMoveDuration,easing:&#34;easeInOutQuad&#34;,complete:()=&gt;{ // &#39;t&#39; are any targets as defined by animejs
	anime({targets:t,top:[0,&#34;-100%&#34;],duration:sduMoveDuration,delay:sduStayDuration,easing:&#34;easeInOutQuad&#34;,complete:()=&gt;{anime.remove(t)}})}})}
const fioMoveDuration=1000
const fioStayDuration=fioMoveDuration*2
const fadeInOut=(t)=&gt;()=&gt;{anime({targets:t,opacity:[&#34;0%&#34;,&#34;100%&#34;],duration:fioMoveDuration,easing:&#34;easeInOutQuad&#34;,complete:()=&gt;{ // &#39;t&#39; are any targets as defined by animejs
        anime({targets:t,opacity:[&#34;100%&#34;,&#34;0%&#34;],duration:fioMoveDuration,delay:fioStayDuration,easing:&#34;easeInOutQuad&#34;,complete:()=&gt;{anime.remove(t)}})}})}
const runAfterOneSecondPause=debounce(1000)
addcss({$global:true,
	&#34;*,*::before,*::after&#34;:{boxSizing:&#34;border-box&#34;}, &#34;*&#34;:{margin:0},
	html:{lineHeight:1.25}, body:{padding:0,letterSpacing:&#34;0.2px&#34;,fontSize:&#34;14pt&#34;},
	&#34;a,a:visited,a:hover,a:active&#34;:{color:&#34;LinkText&#34;},
},true)

const emptyFavicon=()=&gt;dhac(e(&#34;link&#34;,{rel:&#34;icon&#34;,href:&#34;data:;base64,iVBORw0KGgo=&#34;}))
const standardViewport=()=&gt;dhac(e(&#34;meta&#34;,{name:&#34;viewport&#34;,content:&#34;width=device-width, initial-scale=1&#34;}))

const uuid=()=&gt;crypto.randomUUID()
const ensureID=(o)=&gt;R.mergeLeft(o,{id:uuid()})
const mwk=R.mergeWithKey((k,l,r)=&gt;R.cond([
	[R.equals(&#34;value&#34;), R.always(r)],
	[R.equals(&#34;checked&#34;), R.always(r)],
	[R.equals(&#34;lifecycle&#34;), R.always(r)],
	[R.T,R.always(l)]]))
const ael=(k,f)=&gt;(e)=&gt;e.addEventListener(k,f)
const rel=(k,f)=&gt;(e)=&gt;e.removeEventListener(k,f)
const lc=R.compose(R.fromPairs, R.zip([&#34;added&#34;,&#34;removed&#34;]))
const gsFrom=(s,lens)=&gt;[()=&gt;R.view(lens,s.state), (v)=&gt;s.mod(R.set(lens,v,s.state))]
const valueUsing=R.curry((s,lens,o)=&gt;{o=ensureID(o);const [fg,fs]=gsFrom(s,lens);const f=R.compose(fs, R.path([&#34;target&#34;,&#34;value&#34;]));
	return mwk(o,{value:fg(),lifecycle:lc([ael(&#34;input&#34;,f),rel(&#34;input&#34;,f)])})})
const displayUsing=R.curry((s,lens,o)=&gt;{o=ensureID(o);const [fg,_]=gsFrom(s,lens);return mwk(o,{lifecycle:lc([(e)=&gt;e.textContent=fg()])})})
const checkedUsing=R.curry((s,lens,o)=&gt;{o=ensureID(o);const [fg,fs]=gsFrom(s,lens);const f=R.compose(fs, R.path([&#34;target&#34;,&#34;checked&#34;]));
        return mwk(o,{checked:fg(),lifecycle:lc([ael(&#34;change&#34;,f),rel(&#34;change&#34;,f)])})})
const display=R.curry((s,fg,o)=&gt;{o=ensureID(o);s.any(()=&gt;ge(o.id).textContent=fg());return mwk(o,{lifecycle:lc([(e)=&gt;e.textContent=fg()])})})
const direct=(t,lls,s,f)=&gt;{const id=uuid();s.on(lls,()=&gt;ge(id).replaceChildren(f()));return e(t,{id:id,style:&#34;display:contents&#34;},f())}
const just=(f,lls,s,o)=&gt;{o=ensureID(o);s.on(lls,()=&gt;f(s,ge(o.id)));return o}
const dek=(id)=&gt;`disabled${id}` // Next line is: ...DEA, ...DEL, ...Disable, ...Enable
const deToggle=(id,s)=&gt;[()=&gt;R.lensPath([dek(id)]),()=&gt;R.when((o)=&gt;s.state[dek(o.id)],R.assoc(&#34;disabled&#34;,true)),()=&gt;s.mod({[dek(id)]:true}),()=&gt;s.mod({[dek(id)]:false})]

let twid=&#34;&#34;;let tdocs=[];let docs=(wid,s)=&gt;{twid=wid;tdocs=R.append(s,tdocs)}
(async ()=&gt;{
	import(&#34;commonmark&#34;).then((mod)=&gt;{
		const codeBlockAdjustments=(wid)=&gt;`setTimeout(()=&gt;{
			Array.from(document.querySelectorAll(&#34;#`&#43;wid&#43;` pre&#34;)).forEach((e)=&gt;{
				const dn=document.createElement(&#34;details&#34;);const sn=document.createElement(&#34;summary&#34;)
				sn.textContent=&#34;Code sample&#34;;e.parentNode.insertBefore(dn,e);dn.appendChild(sn);dn.appendChild(e)
			})},0)`
		const r=new mod.Parser({smart:true});const w=new mod.HtmlRenderer({safe:true});
		docs=R.curry((wid,s)=&gt;{
			addcss({$global:true,
				[`#${wid} &gt; h3`]:{marginBottom:&#34;1em&#34;},
				[`#${wid} &gt; p:has(&#43; details)`]:{margin:&#34;1.75em&#34;,marginLeft:&#34;-2em&#34;,marginRight:0,transform:&#34;translate(2em)&#34;,border:&#34;1px solid lavender&#34;},
				[`#${wid} details`]:{width:&#34;30em&#34;,padding:&#34;.25em&#34;,border:&#34;1px solid black&#34;,backgroundColor:&#34;white&#34;,position:&#34;absolute&#34;,transform:&#34;translate(30em,-2em)&#34;},
				[`#${wid} details &gt; summary`]:{cursor:&#34;pointer&#34;},
				[`#${wid} details[open]`]:{zIndex:1000},
				[`#${wid} details[closed]`]:{zIndex:0},
			})
			const p=r.parse(s);const walker=p.walker();let el=null
			while((el=walker.next())){
				const n=el.node;
				if(el.entering &amp;&amp; n.type===&#39;code_block&#39;){
					if(n.info.includes(&#34;codeBlockAdjustments&#34;)){n.literal=codeBlockAdjustments(wid)}
					if(n.info.includes(&#34;run&#34;)){const sc=dce(&#34;script&#34;);sc.innerHTML=n.literal;dbac(sc)}
					if(n.info.includes(&#34;hide&#34;)){n.unlink()}else{n.insertBefore(new mod.Node(&#34;paragraph&#34;,n.sourcepos))}
				}
			}
			document.getElementById(wid).innerHTML=w.render(p)
		})
		if(tdocs.length&gt;0){R.map(docs(twid),tdocs)}
	}).catch((err)=&gt;l(`Failed to use commonmark to generate docs in &#39;${twid}&#39;: ${err}`))
})()

Object.assign(globalThis,{
	R,anime,
	l,neon,eon,
	store,
	d,dce,dctn,dhac,dbac,
	e,innere,
	ge,
	stopEvent,onEFN,onEnter,
	focusIfVisible,
	addjs,
	addcss,
	callall,
	valueByID,disableID,enableID,clearValueByID,
	disableable,
	debounce,runAfterOneSecondPause,
	wls,jp,js,
	slideDownUp,fadeInOut,
	emptyFavicon,standardViewport,
	uuid,
	ensureID,
	ael,rel,
	lc,
	gsFrom,
	valueUsing,displayUsing,checkedUsing,display,direct,just,
	dek,deToggle,
	docs,
})
<pre></div>