From ce4082bc419a1ad1cb45fb78dfd1da0231232b35 Mon Sep 17 00:00:00 2001
From: Alexandre Rousseau <alexandre@rsseau.fr>
Date: Thu, 25 Jul 2024 21:46:43 +0200
Subject: [PATCH 01/34] feat(ui): implement new Slider. WF-37

---
 .../public/components/sliderinput.png         | Bin 10830 -> 5456 bytes
 .../core_components/base/BaseInputRange.vue   | 253 ++++++++++++++++++
 .../base/BaseJsonViewerValue.vue              |   5 +-
 .../core_components/input/CoreSliderInput.vue |  72 ++---
 src/ui/src/renderer/useFormValueBroker.ts     |   4 +-
 5 files changed, 285 insertions(+), 49 deletions(-)
 create mode 100644 src/ui/src/core_components/base/BaseInputRange.vue

diff --git a/docs/framework/public/components/sliderinput.png b/docs/framework/public/components/sliderinput.png
index ab4527598fe8954ce9a11e6b64e20fb3e30a5f9f..b3c2efddec515455d631f56f69f59f3939c46d3d 100644
GIT binary patch
literal 5456
zcmcgwS6EZqx?O;v()9=^C7^<CflxOfT|vOmM0yKlOMp;9ks=)xQKX7Uq)V01l_ns?
zjfw~udVtVTAcS5e0dgki<(~6!-tN8YA#2TibIr2;@sBa)A7f;w!^X_Z3_%bZ;`S|L
z2%;+o&xNO$!0(!G-YU4AxUYdQJq51NQ%=u7`+}dArJsqHvtOX2FA8$OczL4W_wV_l
zP?-C!UVdu~t!ki?#BnE0UzDRC+6yCOiuOc77APknDFvaM{w_i?QZj!ENlPoqN-2SV
zj0}V{wM<OY<wU9>=v*=4)=kp~nJW_^-lo3}J2vp0Ssp^trZ<vKoaHmB`IGnT$>*jL
z!#D13#lo}RJ<>N3n@({{qYo%5)MPf%b?0M1d$wuU&@tr>GuO1bNhjgZuf6|~dqzXT
zi2gJ-i8}8a9`O?^Fl;ODs4$wj9^SKjeKqLER%qbpC|+$rW#O}w!N55P;+~#cp@*Qw
zYZ@$&!-Xhrs7>Y+9EwD7T0>BmPz?m7-gKpd#2@$4LzYarj8GNp|3OE0&gZeQFCEWY
z*SZaPA{in-b*%K3;BYS-&&#lCQuo&OZW%EAC^0K_Iv))S|2<>37NY!79qP4zjsB0N
z#i_BCXWaR!ASXwvZ#^uZotxw0<rU57DUu8$=}|iGgy*>vD*PL1&$+}he~2I(e6?^m
z9Ay*RT2@sh_2kKuYx45upvTa!F0As(WmQ#Vw4>|z2cL=I;KkmH9Sv{4f7eCy@2(J0
z=cB_nV(o7yZ*Fe#d$P701qV~$EwU8?s==msb=t=(`mf(iPdmi(%IPMmQHtNce?QpY
zpSQW`t0Qodoqw^ea^US9@)sU^Q+@ro{K^Zm&VR_tny|64O{@|}MvBYI#Cy_Yb?$W}
zm>C%*UAlBB<@M|0<z){!1%;4xGlm;`2b6nB>FK-%8S)1E`}>CYoa;UsR}C|b%*|7e
zj`mvJ|BgD1+<k$?zWw>r3HibM6KOwRCvj=9FJD(r&m<tA&KaM*@~-jm<HvH&-RCDh
z_-GCd4KbfO)tePKNg9EjJv;mE-B?-?uGXEf<f2YZv$nAjz!L}ra(|(olJ|6E9cH2=
zE-ntXQ;+K6hTGKX$H&JDP`-C|-VF|J3|N~iFD@=-r*d<1FY!(Nj!qC%mq36h-n@BJ
zR7}jo$|`MlZK@Ki9o>;2z$@z<mr=<N*^;sCk6USnYyQh4(&aYwhA0%u4UO)5!osuN
zWq)LR{4yMFW^9~nZEdYI(VCa1aYtn%s-(2E*0G(5i-)HaheLpOzy=4_XWGrItZ@5V
z3(74HsxvWHvwOjFtslu4VeH{i_9I7q?SabP_<a~(>BQG~zMX-bBh&Ko^5FGPCu?2s
zFl2ME+0M?6Qt0n0Zn$+pW@aWV{;*F+khH&$W8vgfFd0mSo0*yxzk7H0>YeOC0HvP`
z3vWTNNE;o376u0K11%Pnc0-wp_x%oj`)J*|<x1UMDXFM1M<TN-Y#Z_j_7TX-Itiv2
zOvQXp#)9uxCJ5%(h-+*dOL5Yb*;^ql)U4z_h533A-`&%BOI;hQ?dqEck?|SZZ5KT1
zeFs-j89%^B91Wla3kwV9k%1E^U75Mr+044;-7)tfVObfO_e6rv`t;2XOD--hL!x<w
zEm~LRA7{@tuH?&3G^^)Wn3_6KsML()?he6-aSvD5#hQsCgAD#KT^ZUwK0?W}bw4cP
z_sr9trKKf9>S$|3D~U{Y*Ojp-vz)1ci->$laninZ>ot$0-LfC8+6A9JGcyC`m6NL-
z;02S7uDCNrPA+28h6@lcw|l(8s|P$gJ3AZqCPPGOdsrJc$@VmBX=&*!44-m9S$}`O
zFybkPp!v<44>PzzIs|FIb>!sau1QH5Sy@>zv$8JNOaR=ydi{Fwy}F>FVDsTF5efTx
zFh*!8;<0=1NxE(VgB=XGuAr=Jlbn*CUUD~I+rKfw)HEek(p~~V0pD!;Jq+@;XpI`K
zK@T)ez<7ABA}DJSG$Lsi<S5*->J3pXJ9z0D$bZC=+5yx1-NuC<S*2$#Yx@!9!ER9z
z_J>Or%BmLr)n8(H^pXLJ{WpIi5CD`9-Q3+p5L@#-<NzAZ<gIS9uCA`%&XO5cjxJJ}
zB2qKfULe*U&GvGz?#3J0xv%jiMn*>UVZZnH6<gkPegBTh)m?M9cj}*bloGH~J+P{u
zdA$#nk>OIgvPJ}u6~MCzs*R(+{9F*cKi}<B1DBKxRD?kv^6kwzc%x^AkBZQ{#Yn0K
zyS=@A{nssS!JN7&&hYRGn$^MKA+nCtNe$SV#qRE{%tur%F1ljFYWS4=ToZ}(ZRLyD
zUSA6zpLa`SvYgYmBnjfkN<fx!prJ8Qu_8b|!@!tO{UN~2%nVjMsCvvpj*hv{pFg*)
zQw`ZI>ym$KnB_Y<zfBr2oSQnZ$F1<^mZr%-+dO*XXYyNGCf`ZD5o-!q>5u1A5bh);
z4NU}2!4Zw2`@UEnA-(<=mvvN(a3N#lBY=aF#>Per5i`{?fr?O6R8+b@uV3#8_(c@K
zs~TK$#UNc65xkiD^c-Mu#8^|HS3Px&SbwLLI<Z!Bf58yD14TB8pRqP3PDo?2xyH+i
zi*Kv{{=^}SNL1N;Hn5)!VxnY@_xHbv0eLASE8E1cEF^Rz*_J7$DLZV}ijk3#1Q;NA
z{};B&BXGKnu6chxLxSq=={Y2eSIIwye?9G&WQ5Ph)s&QT9W$RUYDT-x{QV@k0HCx3
z8GT3^c>5|Pr9eb4brG<R1ep#Bw7OLDHBnGfU0q#7SlAT=Uny`klb4SVa95s%eVCb#
zk55T)aZ-;nxoUgNxf(tC9+f<n>eUKz*Uin%*F#cNw4cy=<PXO6Qw*oV-xy{o6=r7g
z<6GNk3c=g1p5q_x8WR~uS$HH&(P-Sgkg%|385x;By(U$#^@Yh}=BW9F1u+Q;L$B7u
zItgTB0fiEr1@u9(c{>?gPU%Ift+eoRyXG<UR1WQ6fila}T0A@Z*O!hCcR<Jqy%jiI
zUxrr;4ye*G$IW#l62vM$&Ne8}LyfbmPwZ41K8y@87Ime<Wku2e^zR3^9L~;0MV*k9
zl*ID`J|EDkRZ!PX;78B@{OLE=I)PDGz~`*FDtnAb$;!(Q$Hl}*v$abxFfjBCm0AP_
z`E0xrv*?~_f2v$}l94ejH#c{lT-iEVy0=i#v?`OIpRcSU?>Y9f22a@`8vp_@NhZzB
z-P6|5$>2~~k3?6G>LccVcE0R6I0(h^@KoA1^ml*zCdEKc-xxXt3_uSMUqg3w5Clck
z_j5WnV1)aNy}5?eslchQ`7~J<rRA<KUm(gO5ohb<bAp1EV8dc^a%L~D-WjfPYzN3I
z85yxGEGk-hc}J}eU|xBGFg0br)<UhQ^CT8oRXZP3RZchsw;a%9Y;3&Uc{Rs%b-V$Y
zAOM3^jE~!@9&QgD%iJ*r%*=lIskdf-c(9T8BU_a?v$0RkFfX?*eDsLEu%O@%QBhqU
z30tF}paxjz`c2Qtk5)7w=K>2$wm~ybcub9q-mHbKg*;D4FbBRsJMMfgh><IKxLoPM
zx&t;0q?=(wL&I2|X9g@}Svnr3Y7Hz!<6MIBpZC79dXCi~bQ1VUL(H0x_fyAoRogqO
zjAG_xy_MlRVgRa(bBXG^0g4bLS>3JA0zv=P<VnB5eq?~WWu5<b{h?ncrrsS;WV*a(
zx`u`ZFnSiSix)2*H{~(oe>6?3uGBL|@@(h`_2I&(yXekj5z%YcHUh30Ub=kw)r%Lo
zpFiL7!qT^~oPzsRc}=PHWGNGfC_neL$>tM0-h7v8raxoq#jad&ZtJO1la!G$26PWR
z&w9W$h;nA3W?C2y_iQ_vDh%@O4>-Jsh=LYfqPR1cN2@!CBHOQDxiL;(;D<%MOiJP$
z8XgXAii5oy^#B%iBj5rUAeZrKwBv)OD7%?CmT|l5DyRO(CI|mgXx)$3A4ox`AJf~@
z6&7xBBSXUkQBhG-d;3a&Gq;_kA%WB)EEcOwAuZ1=ED-D^Pe(pk?}@Yvq8;uXn;BGB
zs{aV!MJ159)-(#CwFcN8Ad~3%?lkLqOxCgCT*wajfeQ-{Z#mk2tM0F4sHdlApTf~L
zYx#`ssw(oC&-UWoCs9$0*&(Yh2J4pAzrPX#xOsC7mD;*GrLon?W}7>zJ1Nm@eDjto
z7It<Oht$2mQ|~8dkGJ$1{pm6<FYlj@f1f}$1@v625+-f_>H>_lwCP;0rl!Ws!9my|
z6Nbje#|3}USN-t=^iR*oFtfESD=86WWMUG%bV*}lW5c>BpuA-(Yt40KtX4pyi$Jgd
z4jd4ok(SmIkRdz3wj2E8s^NBjDJ0b^J@BaG*a@#S?_~?)Dk=<*NiQHE;AsH(hP{P)
z*qZRe;8&@sOGnf-f}Uh^f#y?obbkS&5qP}_EW1PG<(g@qpr9aKL&ISpLgijzWSii*
zc!j~<-rkuyJ>YtuCngersEZ(!16K#tk2W~Mw)=FfTS6P`f_`y%rEoYv_bxJJjxTA%
ztx~94IkYkzSkSFwAvZI7C45aq#n!;U0C>CAD!fZhSP?Mz203aID1p$>heQ?tsxwDN
zN6aiNFDol62eyjPOXc;G#+H_^i}cfG9~><Wm1Z%e4%T_!1AG)_EeW{;ke)d{FH|6#
zinL<6{YQpdpnTP59`YIQtE+1tY|OHIvb7rlYXdy&R6Qd@m9Pd2>_tXKDW3vn@fX(K
z+}pcqpw26TN|Z4$0pgZiFg9kbrK971NZC2oQxhWa({6*scN3oQgAC^WtL-u{FttFL
zn>W7lDTN<=IHt6vB{z{PSKM}&N56mj=1rMPo;q9&d<A9!EQNA*UYh+9`#e5=2;6pn
z<8=o@U>7O}F^PiVVwzZ_!QrADFuLf)i#NgUDa+OPl(aP5_VzYAk3h%g&#pb`a_LI`
zB|so>Ae^qiYUvsnm?4qK#HHzDq@99apIJlGo&R?I?Y|v1Ge<n+y|BIa%uBc;T{x}1
zWr8-H{=J=?lJaxqY;d=3E&V#HImh2I6Br9{xEhc%W4H@UI|u?7C+GBvF|>Wz+1mRo
zC+C~EI94z0jIp*h(?iDbXuujt;FQ%IvL`Ad(@!k)<GgSIcifVe?jsgL>-6j#d3pg&
zNHiKfR_&6QAfQ|XzHQ~8WA*5tU@0OZA|&b*O-)vOT3*}r)4fy)<QQ2qRxee&514#v
z@g?XnTP|Z_x>{HxyMWSQex3dPcMHGu=}&4Er`jAeTtDT56~0PJdP62u1`;L2#q|Mf
zpU1?I-hPKznZ!Rw>U{b985|M^P)*(4`t&R}D$iK2e*nk3a;xg1t`+y;vb(;%zBH~A
z4!zUsLX_@-JL=_ulR+J%2G9qjT9+OdU6qmsOV~V6QQh0OjewymsMCB3W&sm#f#OEl
z^Y+J!vW||9WA9P1bF_MoQ4I$=Zx&hjcEhfFeX6+C>@Qu&Qs7?&0Co;~NW2|SWOP_B
zu6)V9pqG=K@+0e|gnhD`yU0KatLFRBf-{#3H|7edR}elX1s6X}R`5o?@_xXH5re<j
zZI%rCebeT~PKx7gSr<giR>8A}fto=O17|K{y+>E_WC-Cfd|v&UYSXvFaEKKX#f?Fr
zV`>zUqDtfjwfwxoLP;4ieXpDbOLG7vrN*(@)MReIMN^|dusrq3BzeDu&Qh@SWS>}}
zNEnZ$u}v%AaD6-jl%wOCYa#!359v@_ibM0AgwzsyH4;6$HkTF4R?lU5@^L^IZP#2K
zT|Jd*-71C25NvxClo{l4QTt1+c~}x5Z{Uks$;Z{wVe>oN&mZO$S-KT3(|iQ8hl?5U
zgS)gg2orO$6OXre`0$ANG<$MorOSdg>~uNDRz@wALH&_il8jA(n9fJpI>*~&c{`I{
zPVNSJ^Lw|M*=jrGg?sOXH3~cwoL6us(9T*uPCIPe`zmih`guBHjSHGiO-rt@7%Hi2
z=>y%kthor*U`UMp^$|I<kiY|z9Hs~L5QM>%l$hzox;V>Yo(!K1f_GP87<zUl1!($b
z)Z-vAS&^YZxd#Q3^%`V9=~xc0lkn{QvWfTUqG~RYLvr%+K?Q>KEo`Ed)Zl_stRBv>
zfgN5O-7W%=JaP&l^RZDmRiGH;EmqUQIsYqXdXXm@dv&ly9Ckt+kH^c}3xg>?`;`6t
zLEtx2P~bt5(ea>+Ou_Snw>G(QVxKJ3_#ODS527Cg9)#qjH`_o^{rO~#N2*(7Lix9b
zEq1{}ym*TdlQJzAtap;SJPGPgHX53qu%@h+M4q<p%-O3k#OrL%bdHmJM5zJ<M^z|i
zRbI=7_?J2rW0{Iy?r@B^v)w-_)^5Q}c@&6wogr2Gg33<M{Z|a%{9o$;a^@cgX>*uR
zv**u1%;;G4#q)0@-nyl`m9so0y`YW&KnJ1k$VLilY3<=H@Ai4l(Y5uQf^UEC=P67|
zY7w|BT;RzM{Z;{xJA3BZp{xHCqs8spHZ*?j6TKI>|C&xsNxhvhP?%SpO_mjH^o-VW
zpj%}A4>WfwibEA=ti5djlGnmW?HmP@q3Nue>56)~nH|f_H}IU+>#r$FB=44O5`r|Y
wNZJ&^)z!hj{kL5DS9Q)|N9g~fTDK9AZ>aM#Yff+pR68Mrmf@`m4Tnen1lqBCIRF3v

literal 10830
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
R2P%w*y4nVJi#4CT`d^#_-U0vs

diff --git a/src/ui/src/core_components/base/BaseInputRange.vue b/src/ui/src/core_components/base/BaseInputRange.vue
new file mode 100644
index 000000000..cb2da6eee
--- /dev/null
+++ b/src/ui/src/core_components/base/BaseInputRange.vue
@@ -0,0 +1,253 @@
+<template>
+	<div
+		role="slider"
+		:aria-valuemin="min"
+		:aria-valuemax="max"
+		:aria-valuenow="value"
+		:aria-valuetext="`${value} (${Math.round(progress)}%)`"
+		class="BaseInputRange"
+		:class="{
+			'BaseInputRange--popover-always-visible':
+				popoverDisplayMode === 'always',
+		}"
+	>
+		<transition>
+			<div
+				v-show="isPopoverDisplayed"
+				class="BaseInputRange__popover"
+				:style="{ left: popoverLeft }"
+			>
+				<span class="BaseInputRange__popover__content">
+					{{ value }}
+				</span>
+			</div>
+		</transition>
+		<div
+			ref="slider"
+			class="BaseInputRange__slider"
+			@mousedown="handleMouseDown"
+		>
+			<div
+				class="BaseInputRange__slider__progress"
+				:style="{ width: `calc(${progress}% + ${thumbRadius}px)` }"
+			></div>
+		</div>
+		<button
+			ref="thumb"
+			type="button"
+			class="BaseInputRange__thumb"
+			:style="{ left: thumbLeft }"
+			aria-label="Use the arrow keys to increase or decrease the value."
+			@keydown.left="updateValue(+model - step)"
+			@keydown.right="updateValue(+model + step)"
+			@mousedown="handleMouseDown"
+		></button>
+	</div>
+</template>
+
+<script setup lang="ts">
+import { computed, PropType, ref, toRef, watch } from "vue";
+
+const props = defineProps({
+	min: { type: Number, default: 0 },
+	max: { type: Number, default: 100 },
+	step: { type: Number, default: 1 },
+	popoverDisplayMode: {
+		type: String as PropType<"always" | "onChange">,
+		default: "onChange",
+	},
+});
+
+const model = defineModel("value", { type: Number, default: 50 });
+
+const thumbRadius = 9;
+
+const thumb = ref<HTMLElement>();
+const slider = ref<HTMLElement>();
+
+const progress = computed(() => {
+	if (typeof model.value !== "number") return 50;
+	return ((model.value - props.min) / (props.max - props.min)) * 100;
+});
+
+const isPopoverDisplayed = ref(props.popoverDisplayMode === "always");
+let popoverTimeout = null;
+
+watch(toRef(props.popoverDisplayMode), () => {
+	if (props.popoverDisplayMode === "always") isPopoverDisplayed.value = true;
+});
+
+function displayPopover() {
+	if (props.popoverDisplayMode === "always") return;
+	isPopoverDisplayed.value = true;
+
+	if (popoverTimeout) {
+		clearTimeout(popoverTimeout);
+		popoverTimeout = null;
+	}
+
+	popoverTimeout = setTimeout(() => {
+		isPopoverDisplayed.value = false;
+		popoverTimeout = null;
+	}, 1_000);
+}
+
+// clamp(0px, calc(62% - 9px), calc(100% - 18px))
+const thumbLeft = computed(
+	() => `clamp(
+		0px,
+		calc(${progress.value}% - ${thumbRadius}px),
+		calc(100% - ${thumbRadius * 2}px)
+	)`,
+);
+
+const popoverLeft = computed(() => `calc(${thumbLeft.value} - 3px)`);
+
+function updateValue(value: number) {
+	displayPopover();
+	if (props.min !== undefined && value < props.min) return;
+	if (props.max !== undefined && value > props.max) return;
+
+	// round the value to the closest step
+	const relativeValue = value - props.min;
+	const stepIndex = Math.round(relativeValue / props.step);
+	const roundedValue = props.min + stepIndex * props.step;
+
+	if (model.value !== roundedValue) model.value = roundedValue;
+}
+
+function handleMouseDown(initialEvent: MouseEvent) {
+	document.addEventListener("mousemove", onMouseMove);
+	document.addEventListener("mouseup", onMouseUp);
+
+	const sliderBoundingRect = slider.value.getBoundingClientRect();
+
+	// trigger immediate value update to handle user click
+	onMouseMove(initialEvent);
+
+	function onMouseMove(event: MouseEvent) {
+		const progress =
+			(event.x - sliderBoundingRect.left) /
+			(sliderBoundingRect.right - sliderBoundingRect.left);
+
+		if (progress > 1 || progress < 0) return;
+
+		const value = Math.round(
+			(props.max - props.min) * progress + props.min,
+		);
+		updateValue(value);
+	}
+
+	function onMouseUp() {
+		document.removeEventListener("mouseup", onMouseUp);
+		document.removeEventListener("mousemove", onMouseMove);
+	}
+}
+</script>
+
+<style scoped>
+.BaseInputRange {
+	--thumb-color: var(--accentColor);
+	--thumb-shadow-color: rgba(228, 231, 237, 0.4);
+	--slider-color: var(--softenedAccentColor);
+	--slider-bg-color: var(--separatorColor);
+	--popover-bg-color: var(--popoverBackgroundColor, rgba(0, 0, 0, 1));
+	width: 100%;
+
+	position: relative;
+	padding-top: 5px;
+	padding-bottom: 5px;
+}
+
+.BaseInputRange--popover-always-visible {
+	/* add extra margin to make sure the popover does not overflow on something */
+	margin-top: 24px;
+}
+
+.BaseInputRange__slider {
+	height: 8px;
+	width: 100%;
+	border-radius: 4px;
+	background-color: var(--slider-bg-color);
+}
+
+.BaseInputRange__slider__progress {
+	height: 100%;
+	max-width: 100%;
+	border-radius: 4px;
+	background-color: var(--slider-color);
+}
+
+.BaseInputRange__thumb {
+	border: none;
+
+	height: 18px;
+	width: 18px;
+	border-radius: 50%;
+	background-color: var(--thumb-color);
+
+	position: absolute;
+	top: 0;
+
+	transition: box-shadow ease-in-out 0.5s;
+}
+
+.BaseInputRange__thumb:active {
+	box-shadow: 0 0 0 6px var(--thumb-shadow-color);
+}
+
+.BaseInputRange__thumb:focus-visible {
+	box-shadow: 0 0 0 6px var(--thumb-shadow-color);
+	outline: 1px solid blue;
+	outline-offset: 2px;
+}
+
+.BaseInputRange__popover {
+	position: absolute;
+	top: -24px;
+	font-size: 10px;
+	z-index: 2;
+
+	color: var(--popoverColor, white);
+
+	background: var(--popover-bg-color);
+	height: 18px;
+	width: 24px;
+	max-width: 24px;
+
+	border-radius: 4px;
+
+	display: flex;
+	align-items: center;
+	justify-content: center;
+}
+
+.BaseInputRange__popover::after {
+	content: "";
+	width: 0;
+	height: 0;
+	border-left: 4px solid transparent;
+	border-right: 4px solid transparent;
+	border-top: 5px solid var(--popover-bg-color);
+	position: absolute;
+	bottom: -5px;
+	left: calc(50% - 4px);
+}
+
+.BaseInputRange__popover__content {
+	overflow: hidden;
+	text-overflow: ellipsis;
+	text-align: center;
+}
+
+/* start invisible */
+.v-enter-active,
+.v-leave-active {
+	transition: opacity 0.2s ease-in-out;
+}
+
+.v-enter-from,
+.v-leave-to {
+	opacity: 0;
+}
+</style>
diff --git a/src/ui/src/core_components/base/BaseJsonViewerValue.vue b/src/ui/src/core_components/base/BaseJsonViewerValue.vue
index 12b0c819f..9c82f5c92 100644
--- a/src/ui/src/core_components/base/BaseJsonViewerValue.vue
+++ b/src/ui/src/core_components/base/BaseJsonViewerValue.vue
@@ -7,7 +7,10 @@ import { PropType, computed } from "vue";
 import type { JsonValue } from "./BaseJsonViewer.vue";
 
 const props = defineProps({
-	data: { type: Object as PropType<JsonValue>, required: true },
+	data: {
+		type: [Object, String, Number] as PropType<JsonValue>,
+		required: true,
+	},
 });
 
 const dataFormatted = computed(() => JSON.stringify(props.data));
diff --git a/src/ui/src/core_components/input/CoreSliderInput.vue b/src/ui/src/core_components/input/CoreSliderInput.vue
index 4bb2d384d..34f0b78d1 100644
--- a/src/ui/src/core_components/input/CoreSliderInput.vue
+++ b/src/ui/src/core_components/input/CoreSliderInput.vue
@@ -4,33 +4,22 @@
 		:label="fields.label.value"
 		class="CoreSliderInput"
 	>
-		<div class="inputArea">
-			<input
-				type="range"
-				:value="formValue"
-				:min="fields.minValue.value"
-				:max="fields.maxValue.value"
-				:step="fields.stepSize.value"
-				@input="
-					($event) =>
-						handleInput(
-							($event.target as HTMLInputElement).value,
-							'wf-number-change',
-						)
-				"
-			/>
-			<div class="valueContainer">
-				<h3>{{ formValue }}</h3>
-			</div>
-		</div>
+		<BaseInputRange
+			popover-display-mode="always"
+			:value="formValue"
+			:min="fields.minValue.value"
+			:max="fields.maxValue.value"
+			:step="fields.stepSize.value"
+			@update:value="handleInput($event, 'wf-number-change')"
+		/>
 	</BaseInputWrapper>
 </template>
 
 <script lang="ts">
-import { FieldType } from "../../writerTypes";
+import { ComponentPublicInstance } from "vue";
 import { accentColor, cssClasses } from "../../renderer/sharedStyleFields";
+import { FieldCategory, FieldType } from "../../writerTypes";
 import BaseInputWrapper from "../base/BaseInputWrapper.vue";
-import { ComponentPublicInstance } from "vue";
 
 const description =
 	"A user input component that allows users to select numeric values using a slider with optional constraints like min, max, and step.";
@@ -72,6 +61,20 @@ export default {
 				init: "1",
 			},
 			accentColor,
+			popoverColor: {
+				name: "Popover color",
+				type: FieldType.Color,
+				category: FieldCategory.Style,
+				applyStyleVariable: true,
+				default: "white",
+			},
+			popoverBackgroundColor: {
+				name: "Popover background",
+				type: FieldType.Color,
+				category: FieldCategory.Style,
+				applyStyleVariable: true,
+				default: "rgba(0, 0, 0, 1)",
+			},
 			cssClasses,
 		},
 		events: {
@@ -89,13 +92,14 @@ export default {
 import { inject, ref } from "vue";
 import injectionKeys from "../../injectionKeys";
 import { useFormValueBroker } from "../../renderer/useFormValueBroker";
+import BaseInputRange from "../base/BaseInputRange.vue";
 
 const fields = inject(injectionKeys.evaluatedFields);
 const rootInstance = ref<ComponentPublicInstance | null>(null);
 const wf = inject(injectionKeys.core);
 const instancePath = inject(injectionKeys.instancePath);
 
-const { formValue, handleInput } = useFormValueBroker(
+const { formValue, handleInput } = useFormValueBroker<number>(
 	wf,
 	instancePath,
 	rootInstance,
@@ -110,28 +114,4 @@ const { formValue, handleInput } = useFormValueBroker(
 	width: 100%;
 	max-width: 50ch;
 }
-
-.inputArea {
-	display: flex;
-	align-items: center;
-	gap: 8px;
-	border-radius: 8px;
-	border: 1px solid transparent;
-}
-
-input {
-	flex: 1 1 auto;
-	min-width: 0;
-	margin: 0;
-	accent-color: var(--accentColor);
-	border-radius: 8px;
-	height: 38px;
-	outline: none;
-}
-
-.valueContainer {
-	min-width: 0;
-	flex: 0 0 auto;
-	text-align: center;
-}
 </style>
diff --git a/src/ui/src/renderer/useFormValueBroker.ts b/src/ui/src/renderer/useFormValueBroker.ts
index 3d2623973..8eee4d78d 100644
--- a/src/ui/src/renderer/useFormValueBroker.ts
+++ b/src/ui/src/renderer/useFormValueBroker.ts
@@ -101,7 +101,7 @@ export function useFormValueBroker<T = any>(
 		() => getBindingValue(),
 		(value) => {
 			if (isBusy.value) return;
-			formValue.value = value;
+			formValue.value = value as T;
 		},
 		{ immediate: true },
 	);
@@ -110,7 +110,7 @@ export function useFormValueBroker<T = any>(
 		formValue,
 		(newValue) => {
 			if (typeof newValue === "undefined") {
-				formValue.value = "";
+				formValue.value = "" as T;
 			}
 		},
 		{ immediate: true },

From 33eb0c4295fb53362ddc61cc936586cb249777ed Mon Sep 17 00:00:00 2001
From: Alexandre Rousseau <alexandre@rsseau.fr>
Date: Tue, 13 Aug 2024 21:44:23 +0200
Subject: [PATCH 02/34] feat(ui): harmonize CSS cursors. WF-35

Setup `cursor: pointer` for differents core components and also for
differents parts of the application.
---
 src/ui/src/builder/BuilderHeader.vue              |  1 +
 src/ui/src/builder/BuilderTreeBranch.vue          |  1 +
 src/ui/src/builder/sharedStyles.css               | 10 +++++++++-
 .../core_components/input/CoreCheckboxInput.vue   |  5 +++++
 .../src/core_components/input/CoreDateInput.vue   |  1 +
 .../src/core_components/input/CoreRadioInput.vue  |  7 ++++++-
 .../src/core_components/input/CoreRatingInput.vue |  1 +
 .../src/core_components/input/CoreTimeInput.vue   |  1 +
 src/ui/src/core_components/layout/CoreSidebar.vue |  1 +
 src/ui/src/renderer/sharedStyles.css              | 15 +++++++++++----
 src/ui/src/wds/WdsDropdownInput.vue               |  1 +
 11 files changed, 38 insertions(+), 6 deletions(-)

diff --git a/src/ui/src/builder/BuilderHeader.vue b/src/ui/src/builder/BuilderHeader.vue
index 4c13288a7..d2bae0061 100644
--- a/src/ui/src/builder/BuilderHeader.vue
+++ b/src/ui/src/builder/BuilderHeader.vue
@@ -134,6 +134,7 @@ const customHandlerModalCloseAction: ModalAction = {
 }
 
 .syncHealth {
+	cursor: pointer;
 	background: var(--builderHeaderBackgroundHoleColor);
 	border-radius: 18px;
 	padding-left: 16px;
diff --git a/src/ui/src/builder/BuilderTreeBranch.vue b/src/ui/src/builder/BuilderTreeBranch.vue
index 1ec6f34eb..4f68793fd 100644
--- a/src/ui/src/builder/BuilderTreeBranch.vue
+++ b/src/ui/src/builder/BuilderTreeBranch.vue
@@ -278,6 +278,7 @@ onMounted(() => {
 	color: rgba(0, 0, 0, 0.5);
 	display: flex;
 	align-items: center;
+	cursor: pointer;
 }
 
 .main.matching {
diff --git a/src/ui/src/builder/sharedStyles.css b/src/ui/src/builder/sharedStyles.css
index 97644191e..c26e9fccd 100644
--- a/src/ui/src/builder/sharedStyles.css
+++ b/src/ui/src/builder/sharedStyles.css
@@ -12,7 +12,7 @@
 	--builderSubtleSeparatorColor: rgba(0, 0, 0, 0.05);
 	--builderIntenseSeparatorColor: rgba(0, 0, 0, 0.2);
 	--builderSelectedColor: rgba(210, 234, 244, 0.8);
-	--builderIntenseSelectedColor: #6985FF;
+	--builderIntenseSelectedColor: #6985ff;
 	--builderSubtleHighlightColor: rgba(0, 0, 0, 0.05);
 	--builderSubtleHighlightColorSolid: #f2f2f2;
 	--builderDisabledColor: rgb(180, 180, 180);
@@ -106,6 +106,14 @@ textarea[variant="code"] {
 	font-family: Consolas, monospace;
 }
 
+input[type="button"],
+input[type="submit"],
+input[type="radio"],
+input[type="reset"],
+input[type="color"] {
+	cursor: pointer;
+}
+
 code {
 	font-family: monospace;
 }
diff --git a/src/ui/src/core_components/input/CoreCheckboxInput.vue b/src/ui/src/core_components/input/CoreCheckboxInput.vue
index f77e40b46..2161b08d6 100644
--- a/src/ui/src/core_components/input/CoreCheckboxInput.vue
+++ b/src/ui/src/core_components/input/CoreCheckboxInput.vue
@@ -159,6 +159,11 @@ function getCheckedKeys() {
 	font-size: 0.75rem;
 }
 
+label,
+input {
+	cursor: pointer;
+}
+
 input {
 	margin-right: 8px;
 	accent-color: var(--accentColor);
diff --git a/src/ui/src/core_components/input/CoreDateInput.vue b/src/ui/src/core_components/input/CoreDateInput.vue
index 5d0e17cb5..6489b139e 100644
--- a/src/ui/src/core_components/input/CoreDateInput.vue
+++ b/src/ui/src/core_components/input/CoreDateInput.vue
@@ -91,6 +91,7 @@ input {
 	padding: 8.5px 12px 8.5px 12px;
 	font-size: 0.875rem;
 	outline: none;
+	cursor: text;
 }
 
 input:focus {
diff --git a/src/ui/src/core_components/input/CoreRadioInput.vue b/src/ui/src/core_components/input/CoreRadioInput.vue
index 42269e21a..adfa50d33 100644
--- a/src/ui/src/core_components/input/CoreRadioInput.vue
+++ b/src/ui/src/core_components/input/CoreRadioInput.vue
@@ -34,7 +34,7 @@
 </template>
 
 <script lang="ts">
-import { inject, Ref } from "vue";
+import { inject } from "vue";
 import { ref } from "vue";
 import { FieldCategory, FieldType } from "../../writerTypes";
 import {
@@ -144,6 +144,11 @@ const { formValue, handleInput } = useFormValueBroker(
 	font-size: 0.75rem;
 }
 
+label,
+input {
+	cursor: pointer;
+}
+
 input {
 	margin-right: 8px;
 	accent-color: var(--accentColor);
diff --git a/src/ui/src/core_components/input/CoreRatingInput.vue b/src/ui/src/core_components/input/CoreRatingInput.vue
index 81d0241d4..1c394c68f 100644
--- a/src/ui/src/core_components/input/CoreRatingInput.vue
+++ b/src/ui/src/core_components/input/CoreRatingInput.vue
@@ -257,6 +257,7 @@ const feedbackRating = computed(() => {
 	gap: 8px;
 	flex-wrap: nowrap;
 	position: relative;
+	cursor: pointer;
 }
 
 .unit {
diff --git a/src/ui/src/core_components/input/CoreTimeInput.vue b/src/ui/src/core_components/input/CoreTimeInput.vue
index c64289dd5..5c433403f 100644
--- a/src/ui/src/core_components/input/CoreTimeInput.vue
+++ b/src/ui/src/core_components/input/CoreTimeInput.vue
@@ -91,6 +91,7 @@ input {
 	padding: 8.5px 12px 8.5px 12px;
 	font-size: 0.875rem;
 	outline: none;
+	cursor: text;
 }
 
 input:focus {
diff --git a/src/ui/src/core_components/layout/CoreSidebar.vue b/src/ui/src/core_components/layout/CoreSidebar.vue
index dcc9a345e..59a5c642e 100644
--- a/src/ui/src/core_components/layout/CoreSidebar.vue
+++ b/src/ui/src/core_components/layout/CoreSidebar.vue
@@ -161,6 +161,7 @@ onMounted(() => {
 	justify-content: center;
 	stroke: var(--primaryTextColor);
 	border: 1px solid var(--separatorColor);
+	pointer: cursor;
 }
 
 .collapserContainer .collapserArrow {
diff --git a/src/ui/src/renderer/sharedStyles.css b/src/ui/src/renderer/sharedStyles.css
index 91390ab8f..639056f77 100644
--- a/src/ui/src/renderer/sharedStyles.css
+++ b/src/ui/src/renderer/sharedStyles.css
@@ -22,7 +22,7 @@ h2 {
 h3 {
 	font-size: 1.25rem;
 	font-weight: 500;
-	line-height: 120%;	
+	line-height: 120%;
 }
 
 h4 {
@@ -55,6 +55,14 @@ code {
 	background-color: var(--separatorColor);
 }
 
+input[type="button"],
+input[type="submit"],
+input[type="radio"],
+input[type="reset"],
+input[type="color"] {
+	cursor: pointer;
+}
+
 .component {
 	font-size: 0.875rem;
 }
@@ -97,10 +105,9 @@ code {
 	display: block;
 }
 
-[data-writer-container].crackedContainer.horizontal
-	> [data-writer-slot-of-id] {
+[data-writer-container].crackedContainer.horizontal > [data-writer-slot-of-id] {
 	animation: appearHorizontal 0.2s forwards;
-	align-self:center;
+	align-self: center;
 	display: block;
 }
 
diff --git a/src/ui/src/wds/WdsDropdownInput.vue b/src/ui/src/wds/WdsDropdownInput.vue
index 98c0b7808..bc216e9e7 100644
--- a/src/ui/src/wds/WdsDropdownInput.vue
+++ b/src/ui/src/wds/WdsDropdownInput.vue
@@ -17,6 +17,7 @@ select {
 	max-width: 100%;
 	width: fit-content;
 	outline: none;
+	cursor: pointer;
 }
 
 select:focus {

From 1fc79b6e17c695bada3985f67af69e58e37ab12d Mon Sep 17 00:00:00 2001
From: Alexandre Rousseau <alexandre@rsseau.fr>
Date: Wed, 14 Aug 2024 00:03:58 +0200
Subject: [PATCH 03/34] feat(ui): add filter to `BuilderSidebarToolbar`. WF-42

I introduced a component named `BuilderSidebarTitleSearch` which extract the existing search logic of `BuilderSidebarTree` and use it for `BuilderSidebarToolbar`.

I also took the opportunity to improve the accessibility since we use `<i>` elements as button, but they're not focusable and clickable with the keyboard.

And finally, I introduced an E2E test which cover the new feature.
---
 .../src/builder/BuilderSidebarTitleSearch.vue | 99 +++++++++++++++++++
 src/ui/src/builder/BuilderSidebarToolbar.vue  | 74 +++++++++-----
 src/ui/src/builder/BuilderSidebarTree.vue     | 79 +++------------
 tests/e2e/tests/sidebar.spec.ts               | 80 +++++++++++++++
 4 files changed, 240 insertions(+), 92 deletions(-)
 create mode 100644 src/ui/src/builder/BuilderSidebarTitleSearch.vue
 create mode 100644 tests/e2e/tests/sidebar.spec.ts

diff --git a/src/ui/src/builder/BuilderSidebarTitleSearch.vue b/src/ui/src/builder/BuilderSidebarTitleSearch.vue
new file mode 100644
index 000000000..c82230646
--- /dev/null
+++ b/src/ui/src/builder/BuilderSidebarTitleSearch.vue
@@ -0,0 +1,99 @@
+<template>
+	<div v-if="isSearchActive" class="BuilderSidebarTitleSearch">
+		<input
+			ref="searchInput"
+			v-model="searchQuery"
+			type="text"
+			placeholder="Search..."
+		/>
+		<slot />
+		<i
+			:class="{ disabled: disabled }"
+			class="searchIcon material-symbols-outlined"
+			title="Close"
+			tabindex="0"
+			@keydown.enter="toggleSearch"
+			@click="toggleSearch"
+		>
+			close
+		</i>
+	</div>
+	<div v-else class="BuilderSidebarTitleSearch">
+		<i class="material-symbols-outlined">{{ icon }}</i>
+		<h3>{{ title }}</h3>
+		<i
+			title="Search"
+			class="searchIcon material-symbols-outlined"
+			tabindex="0"
+			@keydown.enter="toggleSearch"
+			@click="toggleSearch"
+		>
+			search
+		</i>
+	</div>
+</template>
+
+<script setup lang="ts">
+import { nextTick, ref, Ref } from "vue";
+
+defineProps({
+	icon: { type: String, required: true },
+	title: { type: String, required: true },
+	disabled: { type: Boolean, required: false },
+});
+
+const searchQuery = defineModel({ type: String, default: "" });
+
+defineEmits({});
+
+const searchInput: Ref<HTMLInputElement> = ref(null);
+const isSearchActive: Ref<boolean> = ref(false);
+
+async function toggleSearch() {
+	isSearchActive.value = !isSearchActive.value;
+	if (isSearchActive.value) {
+		await nextTick();
+		searchInput.value.focus();
+	} else {
+		searchQuery.value = "";
+	}
+}
+</script>
+
+<style scoped>
+@import "./sharedStyles.css";
+
+.BuilderSidebarTitleSearch {
+	display: flex;
+	gap: 8px;
+	align-items: center;
+	font-size: 1rem;
+
+	background: var(--builderBackgroundColor);
+	padding: 16px;
+	top: 0;
+	position: sticky;
+	font-size: 1rem;
+}
+
+.BuilderSidebarTitleSearch h3 {
+	font-weight: 500;
+	font-size: 0.875rem;
+	flex-grow: 1;
+}
+
+.BuilderSidebarTitleSearch .searchIcon {
+	cursor: pointer;
+}
+
+.BuilderSidebarTitleSearch .searchIcon.disabled {
+	color: var(--builderDisabledColor);
+}
+
+.BuilderSidebarTitleSearch input {
+	outline: 0;
+	border: 0;
+	flex-grow: 1;
+	width: 50%;
+}
+</style>
diff --git a/src/ui/src/builder/BuilderSidebarToolbar.vue b/src/ui/src/builder/BuilderSidebarToolbar.vue
index deb50f3aa..1c369f994 100644
--- a/src/ui/src/builder/BuilderSidebarToolbar.vue
+++ b/src/ui/src/builder/BuilderSidebarToolbar.vue
@@ -1,22 +1,23 @@
 <template>
 	<div class="BuilderSidebarToolbar">
-		<div class="sectionTitle">
-			<i class="material-symbols-outlined"> handyman </i>
-			<h3>Toolkit</h3>
-		</div>
+		<BuilderSidebarTitleSearch
+			v-model="searchQuery"
+			title="Toolkit"
+			icon="handyman"
+		/>
 		<div class="categories">
 			<template
 				v-for="(categoryData, category) in categoriesData"
 				:key="category"
 			>
-				<div v-if="categoryData.isVisible !== false" class="category">
+				<div v-if="shouldDisplayCategory(category)" class="category">
 					<div class="title">
 						<i class="material-symbols-outlined">{{
 							categoryData.icon ?? "question_mark"
 						}}</i>
 						<h4>{{ category }}</h4>
 
-						<div
+						<button
 							class="drop-arrow"
 							@click="toggleCollapseCategory(category)"
 						>
@@ -27,10 +28,14 @@
 										: "expand_less"
 								}}
 							</i>
-						</div>
+						</button>
 					</div>
 
-					<div v-show="!categoryData.isCollapsed" class="components">
+					<div
+						v-show="!categoryData.isCollapsed"
+						class="components"
+						:aria-expanded="!categoryData.isCollapsed"
+					>
 						<div
 							v-for="(
 								definition, type
@@ -63,18 +68,23 @@ import { Ref, computed, inject, ref } from "vue";
 import { useDragDropComponent } from "./useDragDropComponent";
 import injectionKeys from "../injectionKeys";
 import { Component, WriterComponentDefinition } from "../writerTypes";
+import BuilderSidebarTitleSearch from "./BuilderSidebarTitleSearch.vue";
 
 const wf = inject(injectionKeys.core);
 const ssbm = inject(injectionKeys.builderManager);
 const { removeInsertionCandidacy } = useDragDropComponent(wf);
 
+type CategoryId = "Root" | "Layout" | "Content" | "Input" | "Embed" | "Other";
+
 type CategoryData = {
 	isVisible?: boolean;
 	isCollapsed?: boolean;
 	icon?: string;
 };
 
-const categoriesData: Ref<Record<string, CategoryData>> = ref({
+const searchQuery = ref("");
+
+const categoriesData: Ref<Record<CategoryId, CategoryData>> = ref({
 	Root: {
 		isVisible: false,
 	},
@@ -100,6 +110,15 @@ const categoriesData: Ref<Record<string, CategoryData>> = ref({
 	},
 });
 
+function shouldDisplayCategory(categoryId: CategoryId): boolean {
+	if (categoriesData.value[categoryId]?.isVisible === false) return false;
+
+	return (
+		Object.keys(definitionsByDisplayCategory.value[categoryId] ?? {})
+			.length > 0
+	);
+}
+
 function toggleCollapseCategory(categoryId: string) {
 	const categoryData = categoriesData.value[categoryId];
 	categoryData.isCollapsed = !categoryData.isCollapsed;
@@ -107,13 +126,21 @@ function toggleCollapseCategory(categoryId: string) {
 
 const definitionsByDisplayCategory = computed(() => {
 	const types = wf.getSupportedComponentTypes();
-	const result: Record<
-		string,
-		Record<string, WriterComponentDefinition>
+	const result: Partial<
+		Record<CategoryId, Record<string, WriterComponentDefinition>>
 	> = {};
 
 	types.map((type) => {
 		const definition = wf.getComponentDefinition(type);
+
+		const matchingSearch =
+			searchQuery.value === "" ||
+			definition.name
+				.toLocaleLowerCase()
+				.includes(searchQuery.value.toLocaleLowerCase());
+
+		if (!matchingSearch) return;
+
 		const isMatch = Object.keys(categoriesData.value).includes(
 			definition.category,
 		);
@@ -149,20 +176,6 @@ const handleDragEnd = (ev: DragEvent) => {
 	font-size: 0.7rem;
 }
 
-.BuilderSidebarToolbar > .sectionTitle {
-	padding: 16px;
-	position: sticky;
-	top: 0;
-	background: var(--builderBackgroundColor);
-	font-size: 0.875rem;
-	height: 40px;
-}
-
-h3 {
-	font-weight: 500;
-	font-size: 0.875rem;
-}
-
 .categories {
 	padding: 0 12px 12px 12px;
 	flex: 1 1 auto;
@@ -201,6 +214,14 @@ h3 {
 }
 
 .drop-arrow {
+	/* reset button default */
+	border: none;
+	background-color: unset;
+	padding: 0;
+	margin: 0;
+	height: auto;
+	width: auto;
+
 	border-radius: 50%;
 	min-width: 24px;
 	min-height: 24px;
@@ -212,5 +233,6 @@ h3 {
 
 .drop-arrow:hover {
 	background: var(--builderSubtleSeparatorColor);
+	color: unset;
 }
 </style>
diff --git a/src/ui/src/builder/BuilderSidebarTree.vue b/src/ui/src/builder/BuilderSidebarTree.vue
index b3cb18341..c6678fe65 100644
--- a/src/ui/src/builder/BuilderSidebarTree.vue
+++ b/src/ui/src/builder/BuilderSidebarTree.vue
@@ -1,23 +1,11 @@
 <template>
 	<div class="BuilderSidebarTree">
-		<div v-if="!isSearchActive" class="sectionTitle">
-			<i class="material-symbols-outlined"> account_tree </i>
-			<h3>Component Tree</h3>
-			<i
-				title="Search"
-				class="searchIcon material-symbols-outlined"
-				@click="toggleSearch"
-			>
-				search
-			</i>
-		</div>
-		<div v-if="isSearchActive" class="sectionTitle">
-			<input
-				ref="searchInput"
-				v-model="searchQuery"
-				type="text"
-				placeholder="Search..."
-			/>
+		<BuilderSidebarTitleSearch
+			v-model="searchQuery"
+			title="Component Tree"
+			icon="account_tree"
+			:disabled="!matchAvailable"
+		>
 			<i
 				:class="{ disabled: !matchAvailable }"
 				class="searchIcon material-symbols-outlined"
@@ -26,6 +14,8 @@
 						? `Go to match ${previousMatchIndex + 1} of ${matchingComponents.length}`
 						: `Previous match`
 				"
+				tabindex="0"
+				@keydown.enter="goToPreviousMatch"
 				@click="goToPreviousMatch"
 			>
 				navigate_before
@@ -38,19 +28,13 @@
 						? `Go to match ${nextMatchIndex + 1} of ${matchingComponents.length}`
 						: `Next match`
 				"
+				tabindex="0"
+				@keydown.enter="goToNextMatch"
 				@click="goToNextMatch"
 			>
 				navigate_next
 			</i>
-			<i
-				:class="{ disabled: !matchAvailable }"
-				class="searchIcon material-symbols-outlined"
-				title="Close"
-				@click="toggleSearch"
-			>
-				close
-			</i>
-		</div>
+		</BuilderSidebarTitleSearch>
 		<div ref="componentTree" class="components">
 			<div
 				v-for="component in rootComponents"
@@ -79,6 +63,7 @@ import BuilderTreeBranch from "./BuilderTreeBranch.vue";
 import injectionKeys from "../injectionKeys";
 import { Component } from "../writerTypes";
 import { watch } from "vue";
+import BuilderSidebarTitleSearch from "./BuilderSidebarTitleSearch.vue";
 
 const wf = inject(injectionKeys.core);
 const ssbm = inject(injectionKeys.builderManager);
@@ -86,24 +71,12 @@ const ssbm = inject(injectionKeys.builderManager);
 const { createAndInsertComponent, goToComponentParentPage } =
 	useComponentActions(wf, ssbm);
 
-const searchInput: Ref<HTMLInputElement> = ref(null);
-const isSearchActive: Ref<boolean> = ref(false);
 const searchQuery: Ref<string> = ref(null);
 const matchIndex: Ref<number> = ref(-1);
 const rootComponents = computed(() => {
 	return wf.getComponents(null, { sortedByPosition: true });
 });
 
-async function toggleSearch() {
-	isSearchActive.value = !isSearchActive.value;
-	if (isSearchActive.value) {
-		await nextTick();
-		searchInput.value.focus();
-	} else {
-		searchQuery.value = null;
-	}
-}
-
 function determineMatch(component: Component, query: string): boolean {
 	if (component.id.toLocaleLowerCase().includes(query)) return true;
 	if (component.type.toLocaleLowerCase().includes(query)) return true;
@@ -158,7 +131,6 @@ function goToNextMatch() {
 }
 
 const matchingComponents: ComputedRef<Component[]> = computed(() => {
-	if (!isSearchActive.value) return;
 	if (!searchQuery.value) return;
 	const query = searchQuery.value.toLocaleLowerCase();
 	const components = wf.getComponents();
@@ -192,35 +164,10 @@ async function addPage() {
 	flex-direction: column;
 }
 
-.sectionTitle {
-	background: var(--builderBackgroundColor);
-	padding: 16px;
-	top: 0;
-	position: sticky;
-	font-size: 1rem;
-}
-
-.sectionTitle h3 {
-	font-weight: 500;
-	font-size: 0.875rem;
-	flex-grow: 1;
-}
-
-.sectionTitle .searchIcon {
-	cursor: pointer;
-}
-
-.sectionTitle .searchIcon.disabled {
+.searchIcon.disabled {
 	color: var(--builderDisabledColor);
 }
 
-.sectionTitle input {
-	outline: 0;
-	border: 0;
-	flex-grow: 1;
-	width: 50%;
-}
-
 .components {
 	padding: 0 12px 12px 12px;
 }
diff --git a/tests/e2e/tests/sidebar.spec.ts b/tests/e2e/tests/sidebar.spec.ts
new file mode 100644
index 000000000..afc268100
--- /dev/null
+++ b/tests/e2e/tests/sidebar.spec.ts
@@ -0,0 +1,80 @@
+import { test, expect } from "@playwright/test";
+
+test.describe("sidebar", () => {
+	let url: string;
+
+	test.beforeAll(async ({ request }) => {
+		const response = await request.post(`/preset/empty_page`);
+		expect(response.ok()).toBeTruthy();
+		({ url } = await response.json());
+	});
+
+	test.afterAll(async ({ request }) => {
+		await request.delete(url);
+	});
+
+	test.beforeEach(async ({ page }) => {
+		await page.goto(url);
+		test.setTimeout(5000);
+	});
+
+	test.describe("Toolkit", () => {
+		test("should filter", async ({ page }) => {
+			// click on icon to begin search
+			await page
+				.locator(
+					`.BuilderSidebarToolbar .BuilderSidebarTitleSearch i[title="Search"]`,
+				)
+				.click();
+
+			// search a button
+			await page
+				.locator(`.BuilderSidebarToolbar .BuilderSidebarTitleSearch input`)
+				.fill("button");
+
+			// should have only one result
+			expect(
+				await page.locator(`.BuilderSidebarToolbar .component`).count(),
+			).toBe(1);
+
+			// close search
+			await page
+				.locator(
+					`.BuilderSidebarToolbar .BuilderSidebarTitleSearch i[title="Close"]`,
+				)
+				.click();
+
+			// should reset the search
+			expect(
+				await page.locator(`.BuilderSidebarToolbar .component`).count(),
+			).not.toBe(1);
+		});
+
+		test("should be compatible with keyboard navigation", async ({ page }) => {
+			// click on icon to begin search
+			await page
+				.locator(
+					`.BuilderSidebarToolbar .BuilderSidebarTitleSearch i[title="Search"]`,
+				)
+				.click();
+
+			// search a button
+			await page
+				.locator(`.BuilderSidebarToolbar .BuilderSidebarTitleSearch input`)
+				.fill("button");
+
+			// should have only one result
+			expect(
+				await page.locator(`.BuilderSidebarToolbar .component`).count(),
+			).toBe(1);
+
+			await page.keyboard.press("Tab");
+			await page.keyboard.press("Enter");
+
+			// should reset the search
+			expect(
+				await page.locator(`.BuilderSidebarToolbar .component`).count(),
+			).not.toBe(1);
+		});
+	});
+});

From 762e82b10ab00c50a6aafba66bc5d44a44ca0461 Mon Sep 17 00:00:00 2001
From: Fabien Arcellier <fabien.arcellier@gmail.com>
Date: Wed, 24 Jul 2024 08:31:17 +0200
Subject: [PATCH 04/34] feat: trigger a calculated property on mutation

* feat: implement subscribe_mutation
---
 src/writer/core.py         |  59 +++++++++++++++-
 tests/backend/test_core.py | 135 +++++++++++++++++++++++++++++++++++++
 2 files changed, 193 insertions(+), 1 deletion(-)

diff --git a/src/writer/core.py b/src/writer/core.py
index c565066f9..91b67c398 100644
--- a/src/writer/core.py
+++ b/src/writer/core.py
@@ -16,7 +16,7 @@
 import traceback
 import urllib.request
 from abc import ABCMeta
-from functools import wraps
+from functools import partial, wraps
 from multiprocessing.process import BaseProcess
 from types import ModuleType
 from typing import (
@@ -107,6 +107,21 @@ class Config:
     mode: str = "run"
     logger: Optional[logging.Logger] = None
 
+@dataclasses.dataclass
+class MutationSubscription:
+    """
+    Describes a subscription to a mutation.
+
+    The path on which this subscription is subscribed and the handler
+    to execute when a mutation takes place on this path.
+
+    >>> def myhandler(state):
+    >>>     state["b"] = state["a"]
+
+    >>> m = MutationSubscription(path="a.c", handler=myhandler)
+    """
+    path: str # Path to subscribe
+    handler: Callable # Handler to execute when mutation happens
 
 class FileWrapper:
 
@@ -327,6 +342,7 @@ class StateProxy:
 
     def __init__(self, raw_state: Dict = {}):
         self.state: Dict[str, Any] = {}
+        self.local_mutation_subscriptions: List[MutationSubscription] = []
         self.initial_assignment = True
         self.mutated: Set[str] = set()
         self.ingest(raw_state)
@@ -356,6 +372,11 @@ def __setitem__(self, key, raw_value) -> None:
                 f"State keys must be strings. Received {str(key)} ({type(key)}).")
 
         self.state[key] = raw_value
+
+        for local_mutation in self.local_mutation_subscriptions:
+            if local_mutation.path == key:
+                local_mutation.handler()
+
         self._apply_raw(f"+{key}")
 
     def __delitem__(self, key: str) -> None:
@@ -659,6 +680,42 @@ def _set_state_item(self, key: str, value: Any):
                 self._state_proxy[key] = value
 
 
+    def subscribe_mutation(self, path: Union[str, List[str]], handler: Callable) -> None:
+        """
+        Automatically triggers a handler when a mutation occurs in the state.
+
+        >>> def _increment_counter(state):
+        >>>     state_proxy['my_counter'] += 1
+        >>>
+        >>> state = WriterState({'a': 1, 'c': {'a': 1, 'b': 3}, 'my_counter': 0})
+        >>> state.subscribe_mutation('a', _increment_counter)
+        >>> state.subscribe_mutation('c.a', _increment_counter)
+        >>> state['a'] = 2 # will trigger _increment_counter
+        >>> state['a'] = 3 # will trigger _increment_counter
+        >>> state['c']['a'] = 2 # will trigger _increment_counter
+
+        :param path: path of mutation to monitor
+        :param func: handler to call when the path is mutated
+        """
+        if isinstance(path, str):
+            path_list = [path]
+        else:
+            path_list = path
+
+        for p in path_list:
+            state_proxy = self._state_proxy
+            path_parts = p.split(".")
+            final_handler = partial(handler, self)
+            for i, path_part in enumerate(path_parts):
+                if i == len(path_parts) - 1:
+                    local_mutation = MutationSubscription(path_parts[-1], final_handler)
+                    state_proxy.local_mutation_subscriptions.append(local_mutation)
+                elif path_part in state_proxy:
+                    state_proxy = state_proxy[path_part]
+                else:
+                    raise ValueError("Mutation subscription failed - {p} not found in state")
+
+
 class WriterState(State):
     """
     Root state. Comprises user configurable state and
diff --git a/tests/backend/test_core.py b/tests/backend/test_core.py
index b3bf26293..efdce395f 100644
--- a/tests/backend/test_core.py
+++ b/tests/backend/test_core.py
@@ -393,6 +393,141 @@ def test_remove_then_replace_nested_dictionary_should_trigger_mutation(self):
         }
         assert _state.to_dict() == {"nested": {"a": 1, "b": 2, "c": {"d": 3}}}
 
+    def test_subscribe_mutation_trigger_handler_when_mutation_happen(self):
+        """
+        Tests that the handler that subscribes to a mutation fires when the mutation occurs.
+        """
+        # Assign
+        def _increment_counter(state):
+            state['my_counter'] += 1
+
+        _state = WriterState({"a": 1, "my_counter": 0})
+        _state.user_state.get_mutations_as_dict()
+
+        # Acts
+        _state.subscribe_mutation('a', _increment_counter)
+        _state['a'] = 2
+
+        # Assert
+        assert _state['my_counter'] == 1
+
+    def test_subscribe_nested_mutation_should_trigger_handler_when_mutation_happen(self):
+        """
+        Tests that a handler that subscribes to a nested mutation triggers when the mutation occurs.
+        """
+        # Assign
+        def _increment_counter(state):
+            state['my_counter'] += 1
+
+        _state = WriterState({"a": 1, "c": {"a" : 1}, "my_counter": 0})
+        _state.user_state.get_mutations_as_dict()
+
+        # Acts
+        _state.subscribe_mutation('c.a', _increment_counter)
+        _state['c']['a'] = 2
+
+        # Assert
+        assert _state['my_counter'] == 1
+
+    def test_subscribe_2_mutation_should_trigger_handler_when_mutation_happen(self):
+        """
+        Tests that it is possible to subscribe to 2 mutations simultaneously
+        """
+        # Assign
+        def _increment_counter(state):
+            state['my_counter'] += 1
+
+        _state = WriterState({"a": 1, "c": {"a" : 1}, "my_counter": 0})
+        _state.user_state.get_mutations_as_dict()
+
+        # Acts
+        _state.subscribe_mutation(['a', 'c.a'], _increment_counter)
+        _state['c']['a'] = 2
+        _state['a'] = 2
+
+        # Assert
+        assert _state['my_counter'] == 2
+        mutations = _state.user_state.get_mutations_as_dict()
+        assert mutations['+my_counter'] == 2
+
+    def test_subscribe_mutation_should_trigger_cascading_handler(self):
+        """
+        Tests that multiple handlers can be triggered in cascade if one of them modifies a value
+        that is listened to by another handler during a mutation.
+        """
+        # Assign
+        def _increment_counter(state):
+            state['my_counter'] += 1
+
+        def _increment_counter2(state):
+            state['my_counter2'] += 1
+
+        _state = WriterState({"a": 1, "my_counter": 0, "my_counter2": 0})
+        _state.user_state.get_mutations_as_dict()
+
+        # Acts
+        _state.subscribe_mutation('a', _increment_counter)
+        _state.subscribe_mutation('my_counter', _increment_counter2)
+        _state['a'] = 2
+
+        # Assert
+        assert _state['my_counter'] == 1
+        assert _state['my_counter2'] == 1
+        mutations = _state.user_state.get_mutations_as_dict()
+        assert mutations['+my_counter'] == 1
+        assert mutations['+my_counter2'] == 1
+
+    def test_subscribe_mutation_should_raise_error_on_infinite_cascading(self):
+        """
+        Tests that an infinite recursive loop is detected and an error is raised if mutations cascade
+
+        Python seems to raise a RecursionError by himself, so we just check that the error is raised
+        """
+        try:
+            # Assign
+            def _increment_counter(state):
+                state['my_counter'] += 1
+
+            def _increment_counter2(state):
+                state['my_counter2'] += 1
+
+            _state = WriterState({"a": 1, "my_counter": 0, "my_counter2": 0})
+            _state.user_state.get_mutations_as_dict()
+
+            # Acts
+            _state.subscribe_mutation('a', _increment_counter)
+            _state.subscribe_mutation('my_counter', _increment_counter2)
+            _state.subscribe_mutation('my_counter2', _increment_counter)
+            _state['a'] = 2
+            pytest.fail("Should raise an error")
+        except RecursionError:
+            assert True
+
+    def test_subscribe_mutation_with_typed_state_should_manage_mutation(self):
+        """
+        Tests that a mutation handler is triggered on a typed state and can use attributes directly.
+        """
+        # Assign
+        class MyState(wf.WriterState):
+            counter: int
+            total: int
+
+        def cumulative_sum(state: MyState):
+            state.total += state.counter
+
+        initial_state = wf.init_state({
+            "counter": 0,
+            "total": 0
+        }, schema=MyState)
+
+        initial_state.subscribe_mutation('counter', cumulative_sum)
+
+        # Acts
+        initial_state['counter'] = 1
+        initial_state['counter'] = 3
+
+        # Assert
+        assert initial_state['total'] == 4
 
 class TestWriterState:
 

From 1162809a333817596e86aa0e461e91930ee04ad2 Mon Sep 17 00:00:00 2001
From: Fabien Arcellier <fabien.arcellier@gmail.com>
Date: Fri, 26 Jul 2024 08:38:28 +0200
Subject: [PATCH 05/34] feat: trigger a calculated property on mutation

* feat: implement fixture to isolate test of global context
---
 tests/backend/fixtures/writer_fixtures.py | 40 +++++++++++++++++++++++
 tests/backend/test_core.py                | 35 ++++++++++----------
 2 files changed, 58 insertions(+), 17 deletions(-)
 create mode 100644 tests/backend/fixtures/writer_fixtures.py

diff --git a/tests/backend/fixtures/writer_fixtures.py b/tests/backend/fixtures/writer_fixtures.py
new file mode 100644
index 000000000..e6e9341ff
--- /dev/null
+++ b/tests/backend/fixtures/writer_fixtures.py
@@ -0,0 +1,40 @@
+import contextlib
+import copy
+
+from writer import WriterState, core, core_ui
+from writer.core import Config, SessionManager
+
+
+@contextlib.contextmanager
+def new_app_context():
+    """
+    Creates a new application context for testing, independent of the global state.
+
+    This fixture avoids conflicts between tests that use the same global state.
+    At the end of the context, the global state is restored to its original state.
+
+    >>> with writer_fixtures.new_app_context():
+    >>>     initial_state = wf.init_state({
+    >>>            "counter": 0,
+    >>>            "total": 0
+    >>>     }, schema=MyState)
+    """
+    saved_context_vars = {}
+    core_context_vars = ['initial_state', 'base_component_tree', 'session_manager']
+    core_config_vars = copy.deepcopy(core.Config)
+
+    for var in core_context_vars:
+        saved_context_vars[var] = getattr(core, var)
+
+    core.initial_state = WriterState()
+    core.base_component_tree = core_ui.build_base_component_tree()
+    core.session_manager = SessionManager()
+    Config.mode = "run"
+    Config.logger = None
+
+    yield
+
+    for var in core_context_vars:
+        setattr(core, var, saved_context_vars[var])
+
+    core.Config = core_config_vars
diff --git a/tests/backend/test_core.py b/tests/backend/test_core.py
index efdce395f..82ff37ead 100644
--- a/tests/backend/test_core.py
+++ b/tests/backend/test_core.py
@@ -30,7 +30,7 @@
 from writer.core_ui import Component
 from writer.ss_types import WriterEvent
 
-from backend.fixtures import core_ui_fixtures
+from backend.fixtures import core_ui_fixtures, writer_fixtures
 from tests.backend import test_app_dir
 
 raw_state_dict = {
@@ -507,27 +507,28 @@ def test_subscribe_mutation_with_typed_state_should_manage_mutation(self):
         """
         Tests that a mutation handler is triggered on a typed state and can use attributes directly.
         """
-        # Assign
-        class MyState(wf.WriterState):
-            counter: int
-            total: int
+        with writer_fixtures.new_app_context():
+            # Assign
+            class MyState(wf.WriterState):
+                counter: int
+                total: int
 
-        def cumulative_sum(state: MyState):
-            state.total += state.counter
+            def cumulative_sum(state: MyState):
+                state.total += state.counter
 
-        initial_state = wf.init_state({
-            "counter": 0,
-            "total": 0
-        }, schema=MyState)
+            initial_state = wf.init_state({
+                "counter": 0,
+                "total": 0
+            }, schema=MyState)
 
-        initial_state.subscribe_mutation('counter', cumulative_sum)
+            initial_state.subscribe_mutation('counter', cumulative_sum)
 
-        # Acts
-        initial_state['counter'] = 1
-        initial_state['counter'] = 3
+            # Acts
+            initial_state['counter'] = 1
+            initial_state['counter'] = 3
 
-        # Assert
-        assert initial_state['total'] == 4
+            # Assert
+            assert initial_state['total'] == 4
 
 class TestWriterState:
 

From 7596eea2689717972c22c8250dccf5840bd67841 Mon Sep 17 00:00:00 2001
From: Fabien Arcellier <fabien.arcellier@gmail.com>
Date: Mon, 29 Jul 2024 11:37:43 +0200
Subject: [PATCH 06/34] feat: trigger a calculated property on mutation

* feat: implement calculated properties
---
 src/writer/__init__.py     |  4 ++
 src/writer/core.py         | 82 ++++++++++++++++++++++++++++++++++----
 tests/backend/test_core.py | 62 ++++++++++++++++++++++++++++
 3 files changed, 140 insertions(+), 8 deletions(-)

diff --git a/src/writer/__init__.py b/src/writer/__init__.py
index 1639e1974..255cb89da 100644
--- a/src/writer/__init__.py
+++ b/src/writer/__init__.py
@@ -17,6 +17,9 @@
     session_manager,
     session_verifier,
 )
+from writer.core import (
+    writerproperty as property,
+)
 from writer.ui import WriterUIManager
 
 VERSION = importlib.metadata.version("writer")
@@ -94,6 +97,7 @@ def init_state(raw_state: Dict[str, Any], schema: Optional[Type[S]] = None) -> U
         raise ValueError("Root schema must inherit from WriterState")
 
     _initial_state: S = new_initial_state(concrete_schema, raw_state)
+
     return _initial_state
 
 
diff --git a/src/writer/core.py b/src/writer/core.py
index 91b67c398..a01185c29 100644
--- a/src/writer/core.py
+++ b/src/writer/core.py
@@ -4,6 +4,7 @@
 import copy
 import dataclasses
 import datetime
+import functools
 import inspect
 import io
 import json
@@ -14,6 +15,7 @@
 import secrets
 import time
 import traceback
+import types
 import urllib.request
 from abc import ABCMeta
 from functools import partial, wraps
@@ -76,7 +78,6 @@ def get_app_process() -> 'AppProcess':
     raise RuntimeError( "Failed to retrieve the AppProcess: running in wrong context")
 
 
-
 def import_failure(rvalue: Any = None):
     """
     This decorator captures the failure to load a volume and returns a value instead.
@@ -511,7 +512,6 @@ def get_annotations(instance) -> Dict[str, Any]:
         ann = {}
     return ann
 
-
 class StateMeta(type):
     """
     Constructs a class at runtime that extends WriterState or State
@@ -562,16 +562,15 @@ def bind_annotations_to_state_proxy(cls, klass):
                 proxy = DictPropertyProxy("_state_proxy", key)
                 setattr(klass, key, proxy)
 
-
 class State(metaclass=StateMeta):
-    """
-    `State` represents a state of the application.
-    """
-
     def __init__(self, raw_state: Dict[str, Any] = {}):
         self._state_proxy: StateProxy = StateProxy(raw_state)
         self.ingest(raw_state)
 
+        # Cette étape enregistre les propriétés associés à l'instance
+        for attribute in calculated_properties_per_state_type.get(self.__class__, []):
+            getattr(self, attribute)
+
     def ingest(self, raw_state: Dict[str, Any]) -> None:
         """
         hydrates a state from raw data by applying a schema when it is provided.
@@ -680,7 +679,7 @@ def _set_state_item(self, key: str, value: Any):
                 self._state_proxy[key] = value
 
 
-    def subscribe_mutation(self, path: Union[str, List[str]], handler: Callable) -> None:
+    def subscribe_mutation(self, path: Union[str, List[str]], handler: Callable[['State'], None]) -> None:
         """
         Automatically triggers a handler when a mutation occurs in the state.
 
@@ -2067,6 +2066,73 @@ def new_initial_state(klass: Type[S], raw_state: dict) -> S:
 
     return initial_state
 
+"""
+This variable contains the list of properties calculated for each class 
+that inherits from State.
+
+This mechanic allows Writer Framework to subscribe to mutations that trigger 
+these properties when loading an application.
+"""
+calculated_properties_per_state_type: Dict[Type[State], List[str]] = {}
+
+def writerproperty(path: Union[str, List[str]]):
+    """
+    Mechanism for declaring a calculated property whenever an attribute changes
+    in the state of the Writer Framework application.
+
+    >>> class MyState(wf.WriterState):
+    >>>     counter: int
+    >>>
+    >>>     @wf.property("counter")
+    >>>     def double_counter(self):
+    >>>         return self.counter * 2
+
+    This mechanism also supports a calculated property that depends on several dependencies.
+
+    >>> class MyState(wf.WriterState):
+    >>>     counterA: int
+    >>>     counterB: int
+    >>>
+    >>>     @wf.property(["counterA", "counterB"])
+    >>>     def counter_sum(self):
+    >>>         return self.counterA + self.counterB
+    """
+
+    class Property():
+
+        def __init__(self, func):
+            self.func = func
+            self.instance = None
+            self.property_name = None
+
+        def __call__(self, *args, **kwargs):
+            return self.func(*args, **kwargs)
+
+        def __set_name__(self, owner: Type[State], name: str):
+            """
+            Saves the calculated properties when loading the class.
+            """
+            if owner not in calculated_properties_per_state_type:
+                calculated_properties_per_state_type[owner] = []
+
+            calculated_properties_per_state_type[owner].append(name)
+            self.property_name = name
+
+        def __get__(self, instance: State, cls):
+            """
+            This mechanism retrieves the property instance.
+            """
+            property_name = self.property_name
+            if self.instance is None:
+                def calculated_property_handler(state):
+                    instance._state_proxy[property_name] = self.func(state)
+
+                instance.subscribe_mutation(path, calculated_property_handler)
+                self.instance = instance
+
+            return self.func(instance)
+
+    return Property
 
 def session_verifier(func: Callable) -> Callable:
     """
diff --git a/tests/backend/test_core.py b/tests/backend/test_core.py
index 82ff37ead..0f432d320 100644
--- a/tests/backend/test_core.py
+++ b/tests/backend/test_core.py
@@ -1196,6 +1196,7 @@ def session_verifier_2(headers: Dict[str, str]) -> None:
         )
         assert s_invalid is None
 
+
 class TestEditableDataframe:
 
     def test_editable_dataframe_expose_pandas_dataframe_as_df_property(self) -> None:
@@ -1562,3 +1563,64 @@ def myfunc():
         return 2
 
     assert myfunc() == 2
+
+class TestCalculatedProperty():
+
+    def test_calculated_property_should_be_triggered_when_dependent_property_is_changing(self):
+        # Assign
+        class MyState(wf.WriterState):
+            counter: int
+
+            @wf.property('counter')
+            def counter_str(self) -> str:
+                return str(self.counter)
+
+        with writer_fixtures.new_app_context():
+            state = wf.init_state({'counter': 0}, MyState)
+            state.user_state.get_mutations_as_dict()
+
+            # Acts
+            state.counter = 2
+
+            # Assert
+            mutations = state.user_state.get_mutations_as_dict()
+            assert '+counter_str' in mutations
+            assert mutations['+counter_str'] == '2'
+
+    def test_calculated_property_should_be_invoked_as_property(self):
+        # Assign
+        class MyState(wf.WriterState):
+            counter: int
+
+            @wf.property('counter')
+            def counter_str(self) -> str:
+                return str(self.counter)
+
+        with writer_fixtures.new_app_context():
+            state = wf.init_state({'counter': 0}, MyState)
+            state.user_state.get_mutations_as_dict()
+
+            # Assert
+            assert state.counter_str == '0'
+
+    def test_calculated_property_should_be_triggered_when_one_dependent_property_is_changing(self):
+        # Assign
+        class MyState(wf.WriterState):
+            counterA: int
+            counterB: int
+
+            @wf.property(['counterA', 'counterB'])
+            def counter_sum(self) -> int:
+                return self.counterA + self.counterB
+
+        with writer_fixtures.new_app_context():
+            state = wf.init_state({'counterA': 2, 'counterB': 4}, MyState)
+            state.user_state.get_mutations_as_dict()
+
+            # Acts
+            state.counterA = 4
+
+            # Assert
+            mutations = state.user_state.get_mutations_as_dict()
+            assert '+counter_sum' in mutations
+            assert mutations['+counter_sum'] == 8

From ec6dc471c5b1065696e12c94990d91f06fe77087 Mon Sep 17 00:00:00 2001
From: Fabien Arcellier <fabien.arcellier@gmail.com>
Date: Thu, 1 Aug 2024 06:56:23 +0200
Subject: [PATCH 07/34] feat: trigger a calculated property on mutation

* docs: improve the documentation of application state
---
 docs/framework/application-state.mdx | 30 ++++++++++++++++++++++++++++
 1 file changed, 30 insertions(+)

diff --git a/docs/framework/application-state.mdx b/docs/framework/application-state.mdx
index 50b65383f..0b200f8f2 100644
--- a/docs/framework/application-state.mdx
+++ b/docs/framework/application-state.mdx
@@ -113,3 +113,33 @@ The front-end cannot directly display complex data types such as Pandas datafram
     Pandas dataframes are converted to JSON and can be used in _Dataframe_ components.
   </Tab>
 </Tabs>
+
+## State schema
+
+State schema is a feature that allows you to define the structure of the state.
+This is useful for ensuring that the state is always in the expected format.
+
+Schema allows you to use features like
+
+* typing checking with mypy / ruff
+* autocomplete in IDEs
+* declare dictionaries
+* automatically calculate mutations on properties
+
+more into [Advanced > State schema](./state-schema)
+
+```python
+import writer as wf
+
+class AppSchema(wf.WriterState):
+    counter: int
+
+initial_state = wf.init_state({
+    "counter": 0
+}, schema=AppSchema)
+
+# Event handler
+# It receives the session state as an argument and mutates it
+def increment(state: AppSchema):
+    state.counter += 1
+```

From b6c2702c769ffa3332b9728445834cbe5c545fe6 Mon Sep 17 00:00:00 2001
From: Fabien Arcellier <fabien.arcellier@gmail.com>
Date: Thu, 1 Aug 2024 07:40:18 +0200
Subject: [PATCH 08/34] feat: trigger a calculated property on mutation

* fix: make it works on writer framework
---
 src/writer/core.py | 11 ++++++++---
 1 file changed, 8 insertions(+), 3 deletions(-)

diff --git a/src/writer/core.py b/src/writer/core.py
index a01185c29..8c136f13b 100644
--- a/src/writer/core.py
+++ b/src/writer/core.py
@@ -709,6 +709,11 @@ def subscribe_mutation(self, path: Union[str, List[str]], handler: Callable[['St
                 if i == len(path_parts) - 1:
                     local_mutation = MutationSubscription(path_parts[-1], final_handler)
                     state_proxy.local_mutation_subscriptions.append(local_mutation)
+
+                    # At startup, the application must be informed of the
+                    # existing states. To cause this, we trigger manually
+                    # the handler.
+                    final_handler()
                 elif path_part in state_proxy:
                     state_proxy = state_proxy[path_part]
                 else:
@@ -2102,7 +2107,7 @@ class Property():
 
         def __init__(self, func):
             self.func = func
-            self.instance = None
+            self.instances = set()
             self.property_name = None
 
         def __call__(self, *args, **kwargs):
@@ -2123,12 +2128,12 @@ def __get__(self, instance: State, cls):
             This mechanism retrieves the property instance.
             """
             property_name = self.property_name
-            if self.instance is None:
+            if instance not in self.instances:
                 def calculated_property_handler(state):
                     instance._state_proxy[property_name] = self.func(state)
 
                 instance.subscribe_mutation(path, calculated_property_handler)
-                self.instance = instance
+                self.instances.add(instance)
 
             return self.func(instance)
 

From 27fa261a6e7d0d9bbd7e74e8e80c6f4d9eaa6a18 Mon Sep 17 00:00:00 2001
From: Fabien Arcellier <fabien.arcellier@gmail.com>
Date: Thu, 1 Aug 2024 07:42:42 +0200
Subject: [PATCH 09/34] feat: trigger a calculated property on mutation

* docs: add documentation about calculated properties
---
 docs/framework/state-schema.mdx | 24 ++++++++++++++++++++++++
 1 file changed, 24 insertions(+)

diff --git a/docs/framework/state-schema.mdx b/docs/framework/state-schema.mdx
index 4ee875ed2..7305d9b5f 100644
--- a/docs/framework/state-schema.mdx
+++ b/docs/framework/state-schema.mdx
@@ -62,6 +62,30 @@ initial_state = wf.init_state({
 }, schema=AppSchema)
 ```
 
+## Calculated properties
+
+Calculated properties are updated automatically when a dependency changes.
+They can be used to calculate values derived from application state.
+
+```python
+class MyAppState(wf.State):
+  counter: List[int]
+
+class MyState(wf.WriterState):
+  counter: List[int]
+
+  @wf.property(['counter', 'app.counter'])
+  def total_counter(self):
+    return sum(self.counter) + sum(self.app.counter)
+
+initial_state = wf.init_state({
+    "counter": 0,
+    "my_app": {
+        "counter": 0
+    }
+}, schema=MyState)
+```
+
 ## Multi-level dictionary
 
 Some components like _Vega Lite Chart_ require specifying a graph in the form of a multi-level dictionary.

From 786271b03c812cf57f06cd27b4d29fe0a11b94b8 Mon Sep 17 00:00:00 2001
From: Fabien Arcellier <fabien.arcellier@gmail.com>
Date: Thu, 1 Aug 2024 07:54:14 +0200
Subject: [PATCH 10/34] feat: trigger a calculated property on mutation

* fix: trigger initial mutation on calculated properties
---
 src/writer/core.py | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/src/writer/core.py b/src/writer/core.py
index 8c136f13b..7f3afd55c 100644
--- a/src/writer/core.py
+++ b/src/writer/core.py
@@ -679,7 +679,7 @@ def _set_state_item(self, key: str, value: Any):
                 self._state_proxy[key] = value
 
 
-    def subscribe_mutation(self, path: Union[str, List[str]], handler: Callable[['State'], None]) -> None:
+    def subscribe_mutation(self, path: Union[str, List[str]], handler: Callable[['State'], None], initial_triggered: bool = False) -> None:
         """
         Automatically triggers a handler when a mutation occurs in the state.
 
@@ -713,7 +713,8 @@ def subscribe_mutation(self, path: Union[str, List[str]], handler: Callable[['St
                     # At startup, the application must be informed of the
                     # existing states. To cause this, we trigger manually
                     # the handler.
-                    final_handler()
+                    if initial_triggered is True:
+                        final_handler()
                 elif path_part in state_proxy:
                     state_proxy = state_proxy[path_part]
                 else:
@@ -2132,7 +2133,7 @@ def __get__(self, instance: State, cls):
                 def calculated_property_handler(state):
                     instance._state_proxy[property_name] = self.func(state)
 
-                instance.subscribe_mutation(path, calculated_property_handler)
+                instance.subscribe_mutation(path, calculated_property_handler, initial_triggered=True)
                 self.instances.add(instance)
 
             return self.func(instance)

From 1b56d1f37536bf33239453ee200eaa6278424aff Mon Sep 17 00:00:00 2001
From: Fabien Arcellier <fabien.arcellier@gmail.com>
Date: Thu, 1 Aug 2024 07:58:57 +0200
Subject: [PATCH 11/34] feat: trigger a calculated property on mutation

* docs: document mutation event
---
 docs/framework/event-handlers.mdx | 22 ++++++++++++++++++++++
 1 file changed, 22 insertions(+)

diff --git a/docs/framework/event-handlers.mdx b/docs/framework/event-handlers.mdx
index 6617c8357..c91cfadc4 100644
--- a/docs/framework/event-handlers.mdx
+++ b/docs/framework/event-handlers.mdx
@@ -136,6 +136,28 @@ def hande_click_cleaner(state):
 ```
 </CodeGroup>
 
+## Mutation event
+
+You can subscribe to mutations on a specific key in the state.
+This is useful when you want to trigger a function every time a specific key is mutated.
+
+```python
+import writer as wf
+
+def _increment_counter(state):
+    state['my_counter'] += 1
+
+state = wf.init_state({"a": 1, "my_counter": 0})
+state.subscribe_mutation('a', _increment_counter)
+
+state['a'] = 2  # trigger _increment_counter mutation
+```
+
+```python
+state.subscribe_mutation('a.b', _increment_counter)  # subscribe to nested key
+state.subscribe_mutation(['title', 'app.title'], _increment_counter)  # subscribe to multiple keys
+```
+
 ## Receiving a payload
 
 Several events include additional data, known as the event's payload. The event handler can receive that data using the `payload` argument.

From 9dcbd48c97c4f8d6f0abd682467a679aea25c819 Mon Sep 17 00:00:00 2001
From: Fabien Arcellier <fabien.arcellier@gmail.com>
Date: Thu, 1 Aug 2024 08:03:17 +0200
Subject: [PATCH 12/34] feat: trigger a calculated property on mutation

* chore: review
---
 src/writer/core.py | 7 +++----
 1 file changed, 3 insertions(+), 4 deletions(-)

diff --git a/src/writer/core.py b/src/writer/core.py
index 7f3afd55c..3c422516e 100644
--- a/src/writer/core.py
+++ b/src/writer/core.py
@@ -18,7 +18,6 @@
 import types
 import urllib.request
 from abc import ABCMeta
-from functools import partial, wraps
 from multiprocessing.process import BaseProcess
 from types import ModuleType
 from typing import (
@@ -92,7 +91,7 @@ def import_failure(rvalue: Any = None):
     :param rvalue: the value to return
     """
     def decorator(func):
-        @wraps(func)
+        @functools.wraps(func)
         def wrapper(*args, **kwargs):
             try:
                 return func(*args, **kwargs)
@@ -567,7 +566,7 @@ def __init__(self, raw_state: Dict[str, Any] = {}):
         self._state_proxy: StateProxy = StateProxy(raw_state)
         self.ingest(raw_state)
 
-        # Cette étape enregistre les propriétés associés à l'instance
+        # This step saves the properties associated with the instance
         for attribute in calculated_properties_per_state_type.get(self.__class__, []):
             getattr(self, attribute)
 
@@ -704,7 +703,7 @@ def subscribe_mutation(self, path: Union[str, List[str]], handler: Callable[['St
         for p in path_list:
             state_proxy = self._state_proxy
             path_parts = p.split(".")
-            final_handler = partial(handler, self)
+            final_handler = functools.partial(handler, self)
             for i, path_part in enumerate(path_parts):
                 if i == len(path_parts) - 1:
                     local_mutation = MutationSubscription(path_parts[-1], final_handler)

From 160b69e518bccbcbc6de9739711c89cc98cb738d Mon Sep 17 00:00:00 2001
From: Fabien Arcellier <fabien.arcellier@gmail.com>
Date: Sun, 4 Aug 2024 09:23:49 +0200
Subject: [PATCH 13/34] feat: trigger a calculated property on mutation

* feat: subscribe_mutation supports an event handler as a function
---
 src/writer/core.py         | 99 ++++++++++++++++++++++++++++++--------
 tests/backend/test_core.py | 21 ++++++++
 2 files changed, 100 insertions(+), 20 deletions(-)

diff --git a/src/writer/core.py b/src/writer/core.py
index 3c422516e..c8e4bcb7e 100644
--- a/src/writer/core.py
+++ b/src/writer/core.py
@@ -18,6 +18,7 @@
 import types
 import urllib.request
 from abc import ABCMeta
+from contextvars import ContextVar
 from multiprocessing.process import BaseProcess
 from types import ModuleType
 from typing import (
@@ -120,11 +121,56 @@ class MutationSubscription:
 
     >>> m = MutationSubscription(path="a.c", handler=myhandler)
     """
-    path: str # Path to subscribe
+    path: str
     handler: Callable # Handler to execute when mutation happens
 
-class FileWrapper:
+    def __post_init__(self):
+        if len(self.path) == 0:
+            raise ValueError("path cannot be empty.")
+        
+        path_parts = self.path.split(".")
+        for part in path_parts:
+            if len(part) == 0:
+                raise ValueError(f"path {self.path} cannot have empty parts.")
+
+    @property
+    def local_path(self) -> str:
+        """
+        Returns the last part of the key to monitor on the state
+
+        >>> m = MutationSubscription(path="a.c", handler=myhandler)
+        >>> m.local_path
+        >>> "c"
+        """
+        path_parts = self.path.split(".")
+        return path_parts[-1]
+
+class StateRecursionWatcher():
+    limit = 128
+
+    def __init__(self):
+        self.counter_recursion = 0
+
+_state_recursion_watcher = ContextVar("state_recursion_watcher", default=StateRecursionWatcher())
+
+@contextlib.contextmanager
+def state_recursion_new(key: str):
+    """
+    Context manager to watch the state recursion on mutation subscriptions.
+
+    The context throws a RecursionError exception if more than 128 cascading mutations
+    are performed on the same state
+    """
+    recursion_watcher = _state_recursion_watcher.get()
+    try:
+        recursion_watcher.counter_recursion += 1
+        if recursion_watcher.counter_recursion > recursion_watcher.limit:
+            raise RecursionError(f"State Recursion limit reached {recursion_watcher.limit}.")
+        yield
+    finally:
+        recursion_watcher.counter_recursion -= 1
 
+class FileWrapper:
     """
     A wrapper for either a string pointing to a file or a file-like object with a read() method.
     Provides a method for retrieving the data as data URL.
@@ -360,34 +406,44 @@ def ingest(self, raw_state: Dict) -> None:
     def items(self) -> Sequence[Tuple[str, Any]]:
         return cast(Sequence[Tuple[str, Any]], self.state.items())
 
-    def get(self, key) -> Any:
+    def get(self, key: str) -> Any:
         return self.state.get(key)
 
-    def __getitem__(self, key) -> Any:
+    def __getitem__(self, key: str) -> Any:
         return self.state.get(key)
 
-    def __setitem__(self, key, raw_value) -> None:
-        if not isinstance(key, str):
-            raise ValueError(
-                f"State keys must be strings. Received {str(key)} ({type(key)}).")
+    def __setitem__(self, key: str, raw_value: Any) -> None:
+        with state_recursion_new(key):
+            if not isinstance(key, str):
+                raise ValueError(
+                    f"State keys must be strings. Received {str(key)} ({type(key)}).")
+            previous_value = self.state.get(key)
+            self.state[key] = raw_value
 
-        self.state[key] = raw_value
+            for local_mutation in self.local_mutation_subscriptions:
+                if local_mutation.local_path == key:
+                    from writer.ui import WriterUIManager
 
-        for local_mutation in self.local_mutation_subscriptions:
-            if local_mutation.path == key:
-                local_mutation.handler()
+                    context = {"mutation": local_mutation.path}
+                    payload = {
+                        "mutation_previous_value": previous_value,
+                        "mutation_value": raw_value
+                    }
+                    ui = WriterUIManager()
+                    args = build_writer_func_arguments(local_mutation.handler, {"context": context, "payload": payload, "ui": ui})
+                    local_mutation.handler(*args)
 
-        self._apply_raw(f"+{key}")
+            self._apply_raw(f"+{key}")
 
     def __delitem__(self, key: str) -> None:
         if key in self.state:
             del self.state[key]
             self._apply_raw(f"-{key}")  # Using "-" prefix to indicate deletion
 
-    def remove(self, key) -> None:
+    def remove(self, key: str) -> None:
         return self.__delitem__(key)
 
-    def _apply_raw(self, key) -> None:
+    def _apply_raw(self, key: str) -> None:
         self.mutated.add(key)
 
     def apply_mutation_marker(self, key: Optional[str] = None, recursive: bool = False) -> None:
@@ -562,9 +618,12 @@ def bind_annotations_to_state_proxy(cls, klass):
                 setattr(klass, key, proxy)
 
 class State(metaclass=StateMeta):
-    def __init__(self, raw_state: Dict[str, Any] = {}):
-        self._state_proxy: StateProxy = StateProxy(raw_state)
-        self.ingest(raw_state)
+
+    def __init__(self, raw_state: Dict[str, Any] | None = None):
+        final_raw_state = raw_state if raw_state is not None else {}
+
+        self._state_proxy: StateProxy = StateProxy(final_raw_state)
+        self.ingest(final_raw_state)
 
         # This step saves the properties associated with the instance
         for attribute in calculated_properties_per_state_type.get(self.__class__, []):
@@ -678,7 +737,7 @@ def _set_state_item(self, key: str, value: Any):
                 self._state_proxy[key] = value
 
 
-    def subscribe_mutation(self, path: Union[str, List[str]], handler: Callable[['State'], None], initial_triggered: bool = False) -> None:
+    def subscribe_mutation(self, path: Union[str, List[str]], handler: Callable[..., None], initial_triggered: bool = False) -> None:
         """
         Automatically triggers a handler when a mutation occurs in the state.
 
@@ -706,7 +765,7 @@ def subscribe_mutation(self, path: Union[str, List[str]], handler: Callable[['St
             final_handler = functools.partial(handler, self)
             for i, path_part in enumerate(path_parts):
                 if i == len(path_parts) - 1:
-                    local_mutation = MutationSubscription(path_parts[-1], final_handler)
+                    local_mutation = MutationSubscription(p, final_handler)
                     state_proxy.local_mutation_subscriptions.append(local_mutation)
 
                     # At startup, the application must be informed of the
diff --git a/tests/backend/test_core.py b/tests/backend/test_core.py
index 0f432d320..18231b383 100644
--- a/tests/backend/test_core.py
+++ b/tests/backend/test_core.py
@@ -503,6 +503,27 @@ def _increment_counter2(state):
         except RecursionError:
             assert True
 
+    def test_subscribe_mutation_should_raise_accept_event_handler_as_callback(self):
+        """
+        Tests that the handler that subscribes to a mutation can accept an event as a parameter
+        """
+        # Assign
+        def _increment_counter(state, payload, context: dict, ui):
+            state['my_counter'] += 1
+
+            # Assert
+            assert payload['mutation_previous_value'] == 1
+            assert payload['mutation_value'] == 2
+            assert context['mutation'] == 'a'
+
+        _state = WriterState({"a": 1, "my_counter": 0})
+        _state.user_state.get_mutations_as_dict()
+
+        # Acts
+        _state.subscribe_mutation('a', _increment_counter)
+        _state['a'] = 2
+
+
     def test_subscribe_mutation_with_typed_state_should_manage_mutation(self):
         """
         Tests that a mutation handler is triggered on a typed state and can use attributes directly.

From 33f2d8e33a06ba97090d5c8a6ed091cd37645e08 Mon Sep 17 00:00:00 2001
From: Fabien Arcellier <fabien.arcellier@gmail.com>
Date: Sun, 4 Aug 2024 10:46:12 +0200
Subject: [PATCH 14/34] feat: trigger a calculated property on mutation

* feat: subscribe_mutation supports an event handler as a function
* feat: subscribe_mutation supports an async event handler as a function
---
 docs/framework/event-handlers.mdx |  41 ++++-
 src/writer/app_runner.py          | 133 +++++++-------
 src/writer/core.py                | 295 +++++++++++++++++++++++-------
 tests/backend/test_core.py        |  26 ++-
 4 files changed, 356 insertions(+), 139 deletions(-)

diff --git a/docs/framework/event-handlers.mdx b/docs/framework/event-handlers.mdx
index c91cfadc4..cbb41b5dd 100644
--- a/docs/framework/event-handlers.mdx
+++ b/docs/framework/event-handlers.mdx
@@ -141,7 +141,8 @@ def hande_click_cleaner(state):
 You can subscribe to mutations on a specific key in the state.
 This is useful when you want to trigger a function every time a specific key is mutated.
 
-```python
+<CodeGroup>
+```python simple subscription
 import writer as wf
 
 def _increment_counter(state):
@@ -153,10 +154,44 @@ state.subscribe_mutation('a', _increment_counter)
 state['a'] = 2  # trigger _increment_counter mutation
 ```
 
-```python
-state.subscribe_mutation('a.b', _increment_counter)  # subscribe to nested key
+```python multiple subscriptions
+import writer as wf
+
+def _increment_counter(state):
+    state['my_counter'] += 1
+
+state = wf.init_state({
+	'title': 'Hello',
+	'app': {'title', 'Writer Framework'},
+	'my_counter': 0}
+)
+
 state.subscribe_mutation(['title', 'app.title'], _increment_counter)  # subscribe to multiple keys
+
+state['title'] = "Hello Pigeon"  # trigger _increment_counter mutation
+```
+
+```python trigger event handler
+import writer as wf
+
+def _increment_counter(state, context: dict, payload: dict, session: dict, ui: WriterUIManager):
+	if context['event'] == 'mutation' and context['mutation'] == 'a':
+		if payload['previous_value'] > payload['new_value']:
+			state['my_counter'] += 1
+
+state = wf.init_state({"a": 1, "my_counter": 0})
+state.subscribe_mutation('a', _increment_counter)
+
+state['a'] = 2  # increment my_counter
+state['a'] = 3  # increment my_counter
+state['a'] = 2  # do nothing
 ```
+</CodeGroup>
+
+<Tip>
+`subscribe_mutation` is compatible with event handler signature. It will accept all the arguments
+of the event handler (`context`, `payload`, ...).
+</Tip>
 
 ## Receiving a payload
 
diff --git a/src/writer/app_runner.py b/src/writer/app_runner.py
index a6cb0fa90..3f0bc2aa4 100644
--- a/src/writer/app_runner.py
+++ b/src/writer/app_runner.py
@@ -19,7 +19,7 @@
 from watchdog.observers.polling import PollingObserver
 
 from writer import VERSION
-from writer.core import EventHandlerRegistry, MiddlewareRegistry, WriterSession
+from writer.core import EventHandlerRegistry, MiddlewareRegistry, WriterSession, use_request_context
 from writer.core_ui import ingest_bmc_component_tree
 from writer.ss_types import (
     AppProcessServerRequest,
@@ -232,71 +232,72 @@ def _handle_message(self, session_id: str, request: AppProcessServerRequest) ->
         """
         import writer
 
-        session = None
-        type = request.type
-
-        if type == "sessionInit":
-            si_req_payload = InitSessionRequestPayload.parse_obj(
-                request.payload)
-            return AppProcessServerResponse(
-                status="ok",
-                status_message=None,
-                payload=self._handle_session_init(si_req_payload)
-            )
-
-        session = writer.session_manager.get_session(session_id)
-        if not session:
-            raise MessageHandlingException("Session not found.")
-        session.update_last_active_timestamp()
-
-        if type == "checkSession":
-            return AppProcessServerResponse(
-                status="ok",
-                status_message=None,
-                payload=None
-            )
-
-        if type == "event":
-            ev_req_payload = WriterEvent.parse_obj(request.payload)
-            return AppProcessServerResponse(
-                status="ok",
-                status_message=None,
-                payload=self._handle_event(session, ev_req_payload)
-            )
-        
-        if type == "stateEnquiry":
-            return AppProcessServerResponse(
-                status="ok",
-                status_message=None,
-                payload=self._handle_state_enquiry(session)
-            )
-
-        if type == "stateContent":
-            return AppProcessServerResponse(
-                status="ok",
-                status_message=None,
-                payload=self._handle_state_content(session)
-            )
-
-        if type == "setUserinfo":
-            session.userinfo = request.payload
-            return AppProcessServerResponse(
-                status="ok",
-                status_message=None,
-                payload=None
-            )
-
-        if self.mode == "edit" and type == "componentUpdate":
-            cu_req_payload = ComponentUpdateRequestPayload.parse_obj(
-                request.payload)
-            self._handle_component_update(session, cu_req_payload)
-            return AppProcessServerResponse(
-                status="ok",
-                status_message=None,
-                payload=None
-            )
-
-        raise MessageHandlingException("Invalid event.")
+        with use_request_context(session_id, request):
+            session = None
+            type = request.type
+
+            if type == "sessionInit":
+                si_req_payload = InitSessionRequestPayload.parse_obj(
+                    request.payload)
+                return AppProcessServerResponse(
+                    status="ok",
+                    status_message=None,
+                    payload=self._handle_session_init(si_req_payload)
+                )
+
+            session = writer.session_manager.get_session(session_id)
+            if not session:
+                raise MessageHandlingException("Session not found.")
+            session.update_last_active_timestamp()
+
+            if type == "checkSession":
+                return AppProcessServerResponse(
+                    status="ok",
+                    status_message=None,
+                    payload=None
+                )
+
+            if type == "event":
+                ev_req_payload = WriterEvent.parse_obj(request.payload)
+                return AppProcessServerResponse(
+                    status="ok",
+                    status_message=None,
+                    payload=self._handle_event(session, ev_req_payload)
+                )
+
+            if type == "stateEnquiry":
+                return AppProcessServerResponse(
+                    status="ok",
+                    status_message=None,
+                    payload=self._handle_state_enquiry(session)
+                )
+
+            if type == "stateContent":
+                return AppProcessServerResponse(
+                    status="ok",
+                    status_message=None,
+                    payload=self._handle_state_content(session)
+                )
+
+            if type == "setUserinfo":
+                session.userinfo = request.payload
+                return AppProcessServerResponse(
+                    status="ok",
+                    status_message=None,
+                    payload=None
+                )
+
+            if self.mode == "edit" and type == "componentUpdate":
+                cu_req_payload = ComponentUpdateRequestPayload.parse_obj(
+                    request.payload)
+                self._handle_component_update(session, cu_req_payload)
+                return AppProcessServerResponse(
+                    status="ok",
+                    status_message=None,
+                    payload=None
+                )
+
+            raise MessageHandlingException("Invalid event.")
 
     def _execute_user_code(self) -> None:
         """
diff --git a/src/writer/core.py b/src/writer/core.py
index c8e4bcb7e..7c94b19aa 100644
--- a/src/writer/core.py
+++ b/src/writer/core.py
@@ -24,6 +24,7 @@
 from typing import (
     TYPE_CHECKING,
     Any,
+    Awaitable,
     Callable,
     Dict,
     Generator,
@@ -61,7 +62,30 @@
     import polars
 
     from writer.app_runner import AppProcess
+    from writer.ss_types import AppProcessServerRequest
 
+@dataclasses.dataclass
+class CurrentRequest:
+    session_id: str
+    request: 'AppProcessServerRequest'
+
+_current_request: ContextVar[Optional[CurrentRequest]] = ContextVar("current_request", default=None)
+
+@contextlib.contextmanager
+def use_request_context(session_id: str, request: 'AppProcessServerRequest'):
+    """
+    Context manager to set the current request context.
+
+    >>> session_id = "xxxxxxxxxxxxxxxxxxxxxxxxx"
+    >>> request = AppProcessServerRequest(type='event', payload=EventPayload(event='my_event'))
+    >>> with use_request_context(session_id, request):
+    >>>     pass
+    """
+    try:
+        _current_request.set(CurrentRequest(session_id, request))
+        yield
+    finally:
+        _current_request.set(None)
 
 def get_app_process() -> 'AppProcess':
     """
@@ -121,8 +145,11 @@ class MutationSubscription:
 
     >>> m = MutationSubscription(path="a.c", handler=myhandler)
     """
+    type: Literal['subscription', 'property']
     path: str
     handler: Callable # Handler to execute when mutation happens
+    state: 'State'
+    property_name: Optional[str] = None
 
     def __post_init__(self):
         if len(self.path) == 0:
@@ -417,21 +444,31 @@ def __setitem__(self, key: str, raw_value: Any) -> None:
             if not isinstance(key, str):
                 raise ValueError(
                     f"State keys must be strings. Received {str(key)} ({type(key)}).")
-            previous_value = self.state.get(key)
+            old_value = self.state.get(key)
             self.state[key] = raw_value
 
             for local_mutation in self.local_mutation_subscriptions:
                 if local_mutation.local_path == key:
-                    from writer.ui import WriterUIManager
-
-                    context = {"mutation": local_mutation.path}
-                    payload = {
-                        "mutation_previous_value": previous_value,
-                        "mutation_value": raw_value
-                    }
-                    ui = WriterUIManager()
-                    args = build_writer_func_arguments(local_mutation.handler, {"context": context, "payload": payload, "ui": ui})
-                    local_mutation.handler(*args)
+                    if local_mutation.type == 'subscription':
+                        context_data = {
+                            "event": "mutation",
+                            "mutation": local_mutation.path
+                        }
+                        payload = {
+                            "previous_value": old_value,
+                            "new_value": raw_value
+                        }
+
+                        writer_event_handler_invoke(local_mutation.handler, {
+                            "state": local_mutation.state,
+                            "context": context_data,
+                            "payload": payload,
+                            "session": _event_handler_session_info(),
+                            "ui": _event_handler_ui_manager()
+                        })
+                    elif local_mutation.type == 'property':
+                        assert local_mutation.property_name is not None
+                        self[local_mutation.property_name] = local_mutation.handler(local_mutation.state)
 
             self._apply_raw(f"+{key}")
 
@@ -619,7 +656,7 @@ def bind_annotations_to_state_proxy(cls, klass):
 
 class State(metaclass=StateMeta):
 
-    def __init__(self, raw_state: Dict[str, Any] | None = None):
+    def __init__(self, raw_state: Optional[Dict[str, Any]] = None):
         final_raw_state = raw_state if raw_state is not None else {}
 
         self._state_proxy: StateProxy = StateProxy(final_raw_state)
@@ -737,12 +774,15 @@ def _set_state_item(self, key: str, value: Any):
                 self._state_proxy[key] = value
 
 
-    def subscribe_mutation(self, path: Union[str, List[str]], handler: Callable[..., None], initial_triggered: bool = False) -> None:
+    def subscribe_mutation(self,
+                           path: Union[str, List[str]],
+                           handler: Callable[..., Union[None, Awaitable[None]]],
+                           initial_triggered: bool = False) -> None:
         """
         Automatically triggers a handler when a mutation occurs in the state.
 
         >>> def _increment_counter(state):
-        >>>     state_proxy['my_counter'] += 1
+        >>>     state['my_counter'] += 1
         >>>
         >>> state = WriterState({'a': 1, 'c': {'a': 1, 'b': 3}, 'my_counter': 0})
         >>> state.subscribe_mutation('a', _increment_counter)
@@ -751,6 +791,15 @@ def subscribe_mutation(self, path: Union[str, List[str]], handler: Callable[...,
         >>> state['a'] = 3 # will trigger _increment_counter
         >>> state['c']['a'] = 2 # will trigger _increment_counter
 
+        subscribe mutation accepts the signature of an event handler.
+
+        >>> def _increment_counter(state, payload, context, session, ui):
+        >>>     state['my_counter'] += 1
+        >>>
+        >>> state = WriterState({'a': 1, 'my_counter': 0})
+        >>> state.subscribe_mutation('a', _increment_counter)
+        >>> state['a'] = 2 # will trigger _increment_counter
+
         :param path: path of mutation to monitor
         :param func: handler to call when the path is mutated
         """
@@ -762,21 +811,68 @@ def subscribe_mutation(self, path: Union[str, List[str]], handler: Callable[...,
         for p in path_list:
             state_proxy = self._state_proxy
             path_parts = p.split(".")
-            final_handler = functools.partial(handler, self)
             for i, path_part in enumerate(path_parts):
                 if i == len(path_parts) - 1:
-                    local_mutation = MutationSubscription(p, final_handler)
+                    local_mutation = MutationSubscription('subscription', p, handler, self)
                     state_proxy.local_mutation_subscriptions.append(local_mutation)
 
                     # At startup, the application must be informed of the
                     # existing states. To cause this, we trigger manually
                     # the handler.
                     if initial_triggered is True:
-                        final_handler()
+                        writer_event_handler_invoke(handler, {
+                            "state": self,
+                            "context": {"event": "init"},
+                            "payload": {},
+                            "session": {},
+                            "ui": _event_handler_ui_manager()
+                        })
+
                 elif path_part in state_proxy:
                     state_proxy = state_proxy[path_part]
                 else:
-                    raise ValueError("Mutation subscription failed - {p} not found in state")
+                    raise ValueError(f"Mutation subscription failed - {p} not found in state")
+
+    def calculated_property(self,
+                            property_name: str,
+                            path: Union[str, List[str]],
+                            handler: Callable[..., Union[None, Awaitable[None]]]) -> None:
+        """
+        Update a calculated property when a mutation triggers
+
+        This method is dedicated to be used through a calculated property. It is not
+        recommended to invoke it directly.
+
+        >>> class MyState(State):
+        >>>     title: str
+        >>>
+        >>>     wf.property('title')
+        >>>     def title_upper(self):
+        >>>         return self.title.upper()
+
+        Usage
+        =====
+
+        >>> state = wf.init_state({'title': 'hello world'})
+        >>> state.calculated_property('title_upper', 'title', lambda state: state.title.upper())
+        """
+        if isinstance(path, str):
+            path_list = [path]
+        else:
+            path_list = path
+
+        for p in path_list:
+            state_proxy = self._state_proxy
+            path_parts = p.split(".")
+            for i, path_part in enumerate(path_parts):
+                if i == len(path_parts) - 1:
+                    local_mutation = MutationSubscription('property', p, handler, self, property_name)
+                    state_proxy.local_mutation_subscriptions.append(local_mutation)
+                    state_proxy[property_name] = handler(self)
+                elif path_part in state_proxy:
+                    state_proxy = state_proxy[path_part]
+                else:
+                    raise ValueError(f"Property subscription failed - {p} not found in state")
 
 
 class WriterState(State):
@@ -824,7 +920,10 @@ def get_clone(self) -> 'WriterState':
                                            "The state may contain unpickable objects, such as modules.",
                                            traceback.format_exc())
             return substitute_state
-        return self.__class__(cloned_user_state, cloned_mail)
+
+        cloned_state = self.__class__(cloned_user_state, cloned_mail)
+        _clone_mutation_subscriptions(cloned_state, self)
+        return cloned_state
 
     def add_mail(self, type: str, payload: Any) -> None:
         mail_item = {
@@ -969,7 +1068,7 @@ def __init__(self, middleware: Callable):
 
     @contextlib.contextmanager
     def execute(self, args: dict):
-        middleware_args = build_writer_func_arguments(self.middleware, args)
+        middleware_args = writer_event_handler_build_arguments(self.middleware, args)
         it = self.middleware(*middleware_args)
         try:
             yield from it
@@ -993,7 +1092,7 @@ def executors(self) -> List[MiddlewareExecutor]:
         Retrieves middlewares prepared for execution
 
         >>> executors = middleware_registry.executors()
-        >>> result = handle_with_middlewares_executor(executors, lambda state: pass, {'state': {}, 'payload': {}})
+        >>> result = writer_event_handler_invoke_with_middlewares(executors, lambda state: pass, {'state': {}, 'payload': {}})
         """
         return self.registry
 
@@ -1596,21 +1695,14 @@ def _call_handler_callable(
             raise ValueError(f"""Invalid handler. Couldn't find the handler "{ handler }".""")
 
         # Preparation of arguments
-        from writer.ui import WriterUIManager
-
         context_data = self.evaluator.get_context_data(instance_path)
         context_data['event'] = event_type
         writer_args = {
             'state': self.session_state,
             'payload': payload,
             'context': context_data,
-            'session': {
-                'id': self.session.session_id,
-                'cookies': self.session.cookies,
-                'headers': self.session.headers,
-                'userinfo': self.session.userinfo or {}
-            },
-            'ui': WriterUIManager()
+            'session':_event_handler_session_info(),
+            'ui': _event_handler_ui_manager()
         }
 
         # Invocation of handler
@@ -1620,7 +1712,7 @@ def _call_handler_callable(
             contextlib.redirect_stdout(io.StringIO()) as f:
             middlewares_executors = current_app_process.middleware_registry.executors()
 
-            result = handle_with_middlewares_executor(middlewares_executors, callable_handler, writer_args)
+            result = writer_event_handler_invoke_with_middlewares(middlewares_executors, callable_handler, writer_args)
             captured_stdout = f.getvalue()
 
         if captured_stdout:
@@ -2166,7 +2258,7 @@ class Property():
 
         def __init__(self, func):
             self.func = func
-            self.instances = set()
+            self.initialized = False
             self.property_name = None
 
         def __call__(self, *args, **kwargs):
@@ -2174,7 +2266,7 @@ def __call__(self, *args, **kwargs):
 
         def __set_name__(self, owner: Type[State], name: str):
             """
-            Saves the calculated properties when loading the class.
+            Saves the calculated properties when loading a State class.
             """
             if owner not in calculated_properties_per_state_type:
                 calculated_properties_per_state_type[owner] = []
@@ -2186,13 +2278,14 @@ def __get__(self, instance: State, cls):
             """
             This mechanism retrieves the property instance.
             """
-            property_name = self.property_name
-            if instance not in self.instances:
-                def calculated_property_handler(state):
-                    instance._state_proxy[property_name] = self.func(state)
+            args = inspect.getfullargspec(self.func)
+            if len(args.args) > 1:
+                logging.warning(f"Wrong signature for calculated property '{instance.__class__.__name__}:{self.property_name}'. It must declare only self argument.")
+                return None
 
-                instance.subscribe_mutation(path, calculated_property_handler, initial_triggered=True)
-                self.instances.add(instance)
+            if self.initialized is False:
+                instance.calculated_property(property_name=self.property_name, path=path, handler=self.func)
+                self.initialized = True
 
             return self.func(instance)
 
@@ -2209,6 +2302,25 @@ def wrapped(*args, **kwargs):
     session_manager.add_verifier(func)
     return wrapped
 
+
+def get_session() -> Optional[WriterSession]:
+    """
+    Retrieves the current session.
+
+    This function works exclusively in the context of a request.
+    """
+    req = _current_request.get()
+    if req is None:
+        return None
+
+    session_id = req.session_id
+    session = session_manager.get_session(session_id)
+    if not session:
+        return None
+
+    return session
+
+
 def reset_base_component_tree() -> None:
     """
     Reset the base component tree to zero
@@ -2218,8 +2330,56 @@ def reset_base_component_tree() -> None:
     global base_component_tree
     base_component_tree = core_ui.build_base_component_tree()
 
+def _clone_mutation_subscriptions(session_state: State, app_state: State, root_state: Optional['State'] = None) -> None:
+    """
+    clone subscriptions on mutations between the initial state of the application and the state created for the session
+
+    >>> state = wf.init_state({"counter": 0})
+    >>> state.subscribe_mutation("counter", lambda state: print(state["counter"]))
 
-def handler_executor(callable_handler: Callable, writer_args: dict) -> Any:
+    >>> session_state = state.get_clone()
+
+    :param session_state:
+    :param app_state:
+    :param root_state:
+    """
+    state_proxy_app = app_state._state_proxy
+    state_proxy_session = session_state._state_proxy
+
+    state_proxy_session.local_mutation_subscriptions = []
+
+    _root_state = root_state if root_state is not None else session_state
+    for mutation_subscription in state_proxy_app.local_mutation_subscriptions:
+        new_mutation_subscription = copy.copy(mutation_subscription)
+        new_mutation_subscription.state = _root_state if new_mutation_subscription.type == "subscription" else session_state
+        session_state._state_proxy.local_mutation_subscriptions.append(new_mutation_subscription)
+
+
+
+def writer_event_handler_build_arguments(func: Callable, writer_args: dict) -> List[Any]:
+    """
+    Constructs the list of arguments based on the signature of the function
+    which can be a handler or middleware.
+
+    >>> def my_event_handler(state, context):
+    >>>     yield
+
+    >>> args = writer_event_handler_build_arguments(my_event_handler, {'state': {}, 'payload': {}, 'context': {"target": '11'}, 'session': None, 'ui': None})
+    >>> [{}, {"target": '11'}]
+
+    :param func: the function that will be called
+    :param writer_args: the possible arguments in writer (state, payload, ...)
+    """
+    handler_args = inspect.getfullargspec(func).args
+    func_args = []
+    for arg in handler_args:
+        if arg in writer_args:
+            func_args.append(writer_args[arg])
+
+    return func_args
+
+
+def writer_event_handler_invoke(callable_handler: Callable, writer_args: dict) -> Any:
     """
     Runs a handler based on its signature.
 
@@ -2229,13 +2389,13 @@ def handler_executor(callable_handler: Callable, writer_args: dict) -> Any:
     >>> def my_handler(state):
     >>>     state['a'] = 2
     >>>
-    >>> handler_executor(my_handler, {'state': {'a': 1}, 'payload': None, 'context': None, 'session': None, 'ui': None})
+    >>> writer_event_handler_invoke(my_handler, {'state': {'a': 1}, 'payload': None, 'context': None, 'session': None, 'ui': None})
     """
     is_async_handler = inspect.iscoroutinefunction(callable_handler)
     if (not callable(callable_handler) and not is_async_handler):
         raise ValueError("Invalid handler. The handler isn't a callable object.")
 
-    handler_args = build_writer_func_arguments(callable_handler, writer_args)
+    handler_args = writer_event_handler_build_arguments(callable_handler, writer_args)
 
     if is_async_handler:
         async_wrapper = _async_wrapper_internal(callable_handler, handler_args)
@@ -2245,7 +2405,7 @@ def handler_executor(callable_handler: Callable, writer_args: dict) -> Any:
 
     return result
 
-def handle_with_middlewares_executor(middlewares_executors: List[MiddlewareExecutor], callable_handler: Callable, writer_args: dict) -> Any:
+def writer_event_handler_invoke_with_middlewares(middlewares_executors: List[MiddlewareExecutor], callable_handler: Callable, writer_args: dict) -> Any:
     """
     Runs the middlewares then the handler. This function allows you to manage exceptions that are triggered in middleware
 
@@ -2257,36 +2417,14 @@ def handle_with_middlewares_executor(middlewares_executors: List[MiddlewareExecu
     >>>     yield
 
     >>> executor = MiddlewareExecutor(my_middleware, {'state': {}, 'payload': None, 'context': None, 'session': None, 'ui': None})
-    >>> handle_with_middlewares_executor([executor], my_handler, {'state': {}, 'payload': None, 'context': None, 'session': None, 'ui': None}
+    >>> writer_event_handler_invoke_with_middlewares([executor], my_handler, {'state': {}, 'payload': None, 'context': None, 'session': None, 'ui': None}
     """
     if len(middlewares_executors) == 0:
-        return handler_executor(callable_handler, writer_args)
+        return writer_event_handler_invoke(callable_handler, writer_args)
     else:
         executor = middlewares_executors[0]
         with executor.execute(writer_args):
-            return handle_with_middlewares_executor(middlewares_executors[1:], callable_handler, writer_args)
-
-def build_writer_func_arguments(func: Callable, writer_args: dict) -> List[Any]:
-    """
-    Constructs the list of arguments based on the signature of the function
-    which can be a handler or middleware.
-
-    >>> def my_event_handler(state, context):
-    >>>     yield
-
-    >>> args = build_writer_func_arguments(my_event_handler, {'state': {}, 'payload': {}, 'context': {"target": '11'}, 'session': None, 'ui': None})
-    >>> [{}, {"target": '11'}]
-
-    :param func: the function that will be called
-    :param writer_args: the possible arguments in writer (state, payload, ...)
-    """
-    handler_args = inspect.getfullargspec(func).args
-    func_args = []
-    for arg in handler_args:
-        if arg in writer_args:
-            func_args.append(writer_args[arg])
-
-    return func_args
+            return writer_event_handler_invoke_with_middlewares(middlewares_executors[1:], callable_handler, writer_args)
 
 
 async def _async_wrapper_internal(callable_handler: Callable, arg_values: List[Any]) -> Any:
@@ -2331,6 +2469,27 @@ def _assert_record_match_list_of_records(df: List[Dict[str, Any]], record: Dict[
     if columns != columns_record:
         raise ValueError(f"Columns mismatch. Expected {columns}, got {columns_record}")
 
+def _event_handler_session_info() -> Dict[str, Any]:
+    """
+    Returns the session information for the current event handler.
+
+    This information is exposed in the session parameter of a handler
+    
+    """
+    current_session = get_session()
+    session_info: Dict[str, Any] = {}
+    if current_session is not None:
+        session_info['id'] = current_session.session_id
+        session_info['cookies'] = current_session.cookies
+        session_info['headers'] = current_session.headers
+        session_info['userinfo'] = current_session.userinfo or {}
+
+    return session_info
+
+def _event_handler_ui_manager():
+    from writer.ui import WriterUIManager
+    return WriterUIManager()
+
 
 def _split_record_as_pandas_record_and_index(param: dict, index_columns: list) -> Tuple[dict, tuple]:
     """
diff --git a/tests/backend/test_core.py b/tests/backend/test_core.py
index 18231b383..33c7d13ad 100644
--- a/tests/backend/test_core.py
+++ b/tests/backend/test_core.py
@@ -477,6 +477,28 @@ def _increment_counter2(state):
         assert mutations['+my_counter'] == 1
         assert mutations['+my_counter2'] == 1
 
+    def test_subscribe_mutation_should_work_with_async_event_handler(self):
+        """
+        Tests that multiple handlers can be triggered in cascade if one of them modifies a value
+        that is listened to by another handler during a mutation.
+        """
+        # Assign
+        async def _increment_counter(state):
+            state['my_counter'] += 1
+
+        _state = WriterState({"a": 1, "my_counter": 0})
+        _state.user_state.get_mutations_as_dict()
+
+        # Acts
+        _state.subscribe_mutation('a', _increment_counter)
+        _state['a'] = 2
+
+        # Assert
+        assert _state['my_counter'] == 1
+
+        mutations = _state.user_state.get_mutations_as_dict()
+        assert mutations['+my_counter'] == 1
+
     def test_subscribe_mutation_should_raise_error_on_infinite_cascading(self):
         """
         Tests that an infinite recursive loop is detected and an error is raised if mutations cascade
@@ -512,9 +534,9 @@ def _increment_counter(state, payload, context: dict, ui):
             state['my_counter'] += 1
 
             # Assert
-            assert payload['mutation_previous_value'] == 1
-            assert payload['mutation_value'] == 2
             assert context['mutation'] == 'a'
+            assert payload['previous_value'] == 1
+            assert payload['new_value'] == 2
 
         _state = WriterState({"a": 1, "my_counter": 0})
         _state.user_state.get_mutations_as_dict()

From c2c582258ba2a789e024183c57ef65b3993829fb Mon Sep 17 00:00:00 2001
From: Fabien Arcellier <fabien.arcellier@gmail.com>
Date: Mon, 12 Aug 2024 16:31:43 +0200
Subject: [PATCH 15/34] feat: trigger a calculated property on mutation

* fix: handle dot separated expression on subscribe mutation
---
 src/writer/core.py         | 44 +++++++++++++++++++++++++++++++++++---
 tests/backend/test_core.py | 37 ++++++++++++++++++++++++++++++++
 2 files changed, 78 insertions(+), 3 deletions(-)

diff --git a/src/writer/core.py b/src/writer/core.py
index 7c94b19aa..7502582ce 100644
--- a/src/writer/core.py
+++ b/src/writer/core.py
@@ -155,7 +155,7 @@ def __post_init__(self):
         if len(self.path) == 0:
             raise ValueError("path cannot be empty.")
         
-        path_parts = self.path.split(".")
+        path_parts = parse_state_variable_expression(self.path)
         for part in path_parts:
             if len(part) == 0:
                 raise ValueError(f"path {self.path} cannot have empty parts.")
@@ -169,7 +169,7 @@ def local_path(self) -> str:
         >>> m.local_path
         >>> "c"
         """
-        path_parts = self.path.split(".")
+        path_parts = parse_state_variable_expression(self.path)
         return path_parts[-1]
 
 class StateRecursionWatcher():
@@ -800,6 +800,15 @@ def subscribe_mutation(self,
         >>> state.subscribe_mutation('a', _increment_counter)
         >>> state['a'] = 2 # will trigger _increment_counter
 
+        subscribe mutation accepts escaped dot expressions to encode key that contains `dot` separator
+
+        >>> def _increment_counter(state, payload, context, session, ui):
+        >>>     state['my_counter'] += 1
+        >>>
+        >>> state = WriterState({'a.b': 1, 'my_counter': 0})
+        >>> state.subscribe_mutation('a\.b', _increment_counter)
+        >>> state['a.b'] = 2 # will trigger _increment_counter
+
         :param path: path of mutation to monitor
         :param func: handler to call when the path is mutated
         """
@@ -810,7 +819,7 @@ def subscribe_mutation(self,
 
         for p in path_list:
             state_proxy = self._state_proxy
-            path_parts = p.split(".")
+            path_parts = parse_state_variable_expression(p)
             for i, path_part in enumerate(path_parts):
                 if i == len(path_parts) - 1:
                     local_mutation = MutationSubscription('subscription', p, handler, self)
@@ -2355,6 +2364,35 @@ def _clone_mutation_subscriptions(session_state: State, app_state: State, root_s
         session_state._state_proxy.local_mutation_subscriptions.append(new_mutation_subscription)
 
 
+def parse_state_variable_expression(p: str):
+    """
+    Parses a state variable expression into a list of parts.
+
+    >>> parse_state_variable_expression("a.b.c")
+    >>> ["a", "b", "c"]
+
+    >>> parse_state_variable_expression("a\.b.c")
+    >>> ["a.b", "c"]
+    """
+    parts = []
+    it = 0
+    last_split = 0
+    while it < len(p):
+        if p[it] == '\\':
+            it += 2
+        elif p[it] == '.':
+            new_part = p[last_split: it]
+            parts.append(new_part.replace('\\.', '.'))
+
+            last_split = it + 1
+            it += 1
+        else:
+            it += 1
+
+    new_part = p[last_split: len(p)]
+    parts.append(new_part.replace('\\.', '.'))
+    return parts
+
 
 def writer_event_handler_build_arguments(func: Callable, writer_args: dict) -> List[Any]:
     """
diff --git a/tests/backend/test_core.py b/tests/backend/test_core.py
index 33c7d13ad..b08c68983 100644
--- a/tests/backend/test_core.py
+++ b/tests/backend/test_core.py
@@ -26,6 +26,7 @@
     StateSerialiserException,
     WriterState,
     import_failure,
+    parse_state_variable_expression,
 )
 from writer.core_ui import Component
 from writer.ss_types import WriterEvent
@@ -573,6 +574,30 @@ def cumulative_sum(state: MyState):
             # Assert
             assert initial_state['total'] == 4
 
+    def test_subscribe_mutation_should_manage_escaping_in_subscription(self):
+        """
+        Tests that a key that contains a `.` can be used to subscribe to
+        a mutation using the escape character.
+        """
+        with writer_fixtures.new_app_context():
+            # Assign
+            def cumulative_sum(state):
+                state['total'] += state['a.b']
+
+            initial_state = wf.init_state({
+                "a.b": 0,
+                "total": 0
+            })
+
+            initial_state.subscribe_mutation('a\.b', cumulative_sum)
+
+            # Acts
+            initial_state['a.b'] = 1
+            initial_state['a.b'] = 3
+
+            # Assert
+            assert initial_state['total'] == 4
+
 class TestWriterState:
 
     # Initialised manually
@@ -1667,3 +1692,15 @@ def counter_sum(self) -> int:
             mutations = state.user_state.get_mutations_as_dict()
             assert '+counter_sum' in mutations
             assert mutations['+counter_sum'] == 8
+
+
+def test_parse_state_variable_expression_should_process_expression():
+    """
+    Test that the parse_state_variable_expression function will process
+    the expression correctly
+    """
+    # When
+    assert parse_state_variable_expression('features') == ['features']
+    assert parse_state_variable_expression('features.eyes') == ['features', 'eyes']
+    assert parse_state_variable_expression('features\.eyes') == ['features.eyes']
+    assert parse_state_variable_expression('features\.eyes.color') == ['features.eyes', 'color']

From 6c819a94fda05288679a5a56123afdaa33cef266 Mon Sep 17 00:00:00 2001
From: Fabien Arcellier <fabien.arcellier@gmail.com>
Date: Thu, 15 Aug 2024 07:39:19 +0200
Subject: [PATCH 16/34] fix: npm run custom.dev run dev server started instead
 of custom.dev

---
 package.json                 | 2 +-
 src/ui/vite.config.custom.ts | 1 +
 2 files changed, 2 insertions(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 8ea98e1d8..2d749778c 100644
--- a/package.json
+++ b/package.json
@@ -18,7 +18,7 @@
 		"dev": "npm run -w writer-ui dev",
 		"storybook": "npm run -w writer-ui storybook",
 		"storybook.build": "npm run -w writer-ui storybook.build",
-		"custom.dev": "npm run -w writer-ui dev",
+		"custom.dev": "npm run -w writer-ui custom.dev",
 
 		"cli:test": "pytest tests -o log_cli=true ",
 		"cli:lint": "mypy ./src/writer --exclude app_templates/* && ruff check",
diff --git a/src/ui/vite.config.custom.ts b/src/ui/vite.config.custom.ts
index 9d0ecd30c..2534e3385 100644
--- a/src/ui/vite.config.custom.ts
+++ b/src/ui/vite.config.custom.ts
@@ -46,6 +46,7 @@ export default defineConfig({
 		},
 	},
 	server: {
+		port: 5174,
 		proxy: {
 			"/api": {
 				target: "http://127.0.0.1:5000",

From eadc5760ec6443d022a4270948c788c60769bf8e Mon Sep 17 00:00:00 2001
From: Fabien Arcellier <fabien.arcellier@gmail.com>
Date: Sat, 10 Aug 2024 07:09:00 +0200
Subject: [PATCH 17/34] feat: checkbox for inversion of visibility value

* feat: implement reverse option
---
 .../src/builder/BuilderSettingsVisibility.vue | 21 +++++++++++++++++++
 src/ui/src/builder/useComponentActions.ts     |  3 +++
 src/ui/src/renderer/useEvaluator.ts           |  3 ++-
 src/ui/src/writerTypes.ts                     |  1 +
 src/writer/core_ui.py                         |  1 +
 5 files changed, 28 insertions(+), 1 deletion(-)

diff --git a/src/ui/src/builder/BuilderSettingsVisibility.vue b/src/ui/src/builder/BuilderSettingsVisibility.vue
index d3cf31a2e..209d77390 100644
--- a/src/ui/src/builder/BuilderSettingsVisibility.vue
+++ b/src/ui/src/builder/BuilderSettingsVisibility.vue
@@ -47,9 +47,24 @@
 							setVisibleValue(
 								component.id,
 								(ev.target as HTMLInputElement).value,
+								component.visibleReversed,
 							)
 					"
 				/>
+				<div class="flexRow">
+					<input
+						type="checkbox"
+						:checked="component.visibleReversed"
+						@input="
+							(ev: Event) =>
+								setVisibleValue(
+									component.id,
+									component.visible,
+									(ev.target as HTMLInputElement).checked,
+								)
+						"
+					/><span>Reverse</span>
+				</div>
 				<div class="desc">
 					Reference a state or context element that will evaluate to
 					true or false. Reference the element directly, i.e. use
@@ -87,4 +102,10 @@ const component = computed(() => wf.getComponentById(ssbm.getSelectedId()));
 .content {
 	padding: 16px 12px 12px 12px;
 }
+
+.flexRow {
+	display: flex;
+	flex-direction: row;
+	gap: 8px;
+}
 </style>
diff --git a/src/ui/src/builder/useComponentActions.ts b/src/ui/src/builder/useComponentActions.ts
index 1bee56827..876b62c77 100644
--- a/src/ui/src/builder/useComponentActions.ts
+++ b/src/ui/src/builder/useComponentActions.ts
@@ -695,6 +695,7 @@ export function useComponentActions(wf: Core, ssbm: BuilderManager) {
 	function setVisibleValue(
 		componentId: Component["id"],
 		visible: Component["visible"],
+		reversed: boolean = false,
 	) {
 		const component = wf.getComponentById(componentId);
 		if (!component) return;
@@ -704,8 +705,10 @@ export function useComponentActions(wf: Core, ssbm: BuilderManager) {
 
 		if (visible === true && typeof component.visible != "undefined") {
 			delete component.visible;
+			delete component.visibleReversed;
 		} else {
 			component.visible = visible;
+			component.visibleReversed = reversed;
 		}
 
 		ssbm.registerPostMutation(component);
diff --git a/src/ui/src/renderer/useEvaluator.ts b/src/ui/src/renderer/useEvaluator.ts
index d402efad8..348ba3673 100644
--- a/src/ui/src/renderer/useEvaluator.ts
+++ b/src/ui/src/renderer/useEvaluator.ts
@@ -215,7 +215,8 @@ export function useEvaluator(wf: Core) {
 			component.visible as string,
 			instancePath,
 		);
-		return !!evaluated;
+
+		return component.visibleReversed === true ? !evaluated : !!evaluated;
 	}
 
 	return {
diff --git a/src/ui/src/writerTypes.ts b/src/ui/src/writerTypes.ts
index 7ad8500ff..4793e796b 100644
--- a/src/ui/src/writerTypes.ts
+++ b/src/ui/src/writerTypes.ts
@@ -19,6 +19,7 @@ export type Component = {
 	isCodeManaged?: boolean;
 	handlers?: Record<string, string>;
 	visible?: boolean | string;
+	visibleReversed?: boolean;
 	binding?: {
 		eventType: string;
 		stateRef: string;
diff --git a/src/writer/core_ui.py b/src/writer/core_ui.py
index d5fbd94d0..1720709d4 100644
--- a/src/writer/core_ui.py
+++ b/src/writer/core_ui.py
@@ -44,6 +44,7 @@ class Component(BaseModel):
     parentId: Optional[str] = None
     handlers: Optional[Dict[str, str]] = None
     visible: Optional[Union[bool, str]] = None
+    visibleReversed: Optional[Union[bool]] = None
     binding: Optional[Dict] = None
 
     def to_dict(self) -> Dict:

From e9f0ecca41ec4989a106c1d79ee84616d375b010 Mon Sep 17 00:00:00 2001
From: Fabien Arcellier <fabien.arcellier@gmail.com>
Date: Tue, 13 Aug 2024 05:54:51 +0200
Subject: [PATCH 18/34] feat: checkbox for inversion of visibility value

* feat: implement visible entity
---
 apps/default/ui.json                          |  38 +-
 apps/hello/ui.json                            | 177 +++++-
 .../src/builder/BuilderSettingsVisibility.vue |  33 +-
 src/ui/src/builder/useComponentActions.ts     |  28 +-
 src/ui/src/renderer/useEvaluator.ts           |   8 +-
 src/ui/src/writerTypes.ts                     |   9 +-
 src/writer/app_runner.py                      |   7 +-
 src/writer/audit_and_fix.py                   |  46 ++
 src/writer/core_ui.py                         |  11 +-
 tests/backend/fixtures/__init__.py            |  13 +
 .../obsoletes/ui_obsolete_visible.json        |  36 ++
 tests/backend/test_audit_and_fix.py           |  27 +
 tests/backend/testapp/ui.json                 | 544 ++++++------------
 13 files changed, 528 insertions(+), 449 deletions(-)
 create mode 100644 src/writer/audit_and_fix.py
 create mode 100644 tests/backend/fixtures/obsoletes/ui_obsolete_visible.json
 create mode 100644 tests/backend/test_audit_and_fix.py

diff --git a/apps/default/ui.json b/apps/default/ui.json
index 9e210de40..471d19b6d 100644
--- a/apps/default/ui.json
+++ b/apps/default/ui.json
@@ -1,6 +1,6 @@
 {
     "metadata": {
-        "writer_version": "0.5.0"
+        "writer_version": "0.6.2rc3"
     },
     "components": {
         "root": {
@@ -11,8 +11,7 @@
             },
             "isCodeManaged": false,
             "position": 0,
-            "handlers": {},
-            "visible": true
+            "handlers": {}
         },
         "c0f99a9e-5004-4e75-a6c6-36f17490b134": {
             "id": "c0f99a9e-5004-4e75-a6c6-36f17490b134",
@@ -23,8 +22,7 @@
             "isCodeManaged": false,
             "position": 0,
             "parentId": "root",
-            "handlers": {},
-            "visible": true
+            "handlers": {}
         },
         "bebc5fe9-63a7-46a7-b0fa-62303555cfaf": {
             "id": "bebc5fe9-63a7-46a7-b0fa-62303555cfaf",
@@ -35,8 +33,7 @@
             "isCodeManaged": false,
             "position": 0,
             "parentId": "c0f99a9e-5004-4e75-a6c6-36f17490b134",
-            "handlers": {},
-            "visible": true
+            "handlers": {}
         },
         "28d3885b-0fb8-4d41-97c6-978540015431": {
             "id": "28d3885b-0fb8-4d41-97c6-978540015431",
@@ -48,8 +45,7 @@
             "isCodeManaged": false,
             "position": 1,
             "parentId": "c0f99a9e-5004-4e75-a6c6-36f17490b134",
-            "handlers": {},
-            "visible": true
+            "handlers": {}
         },
         "9556c0e3-8584-4ac9-903f-908a775a33ec": {
             "id": "9556c0e3-8584-4ac9-903f-908a775a33ec",
@@ -63,8 +59,7 @@
             "parentId": "0d05bc9f-1655-4d0b-bc9b-c2f4c71a5117",
             "handlers": {
                 "click": "increment"
-            },
-            "visible": true
+            }
         },
         "51d1554e-1b88-461c-9353-1419cba0053a": {
             "id": "51d1554e-1b88-461c-9353-1419cba0053a",
@@ -78,8 +73,7 @@
             "parentId": "0d05bc9f-1655-4d0b-bc9b-c2f4c71a5117",
             "handlers": {
                 "click": "decrement"
-            },
-            "visible": true
+            }
         },
         "0d05bc9f-1655-4d0b-bc9b-c2f4c71a5117": {
             "id": "0d05bc9f-1655-4d0b-bc9b-c2f4c71a5117",
@@ -90,8 +84,7 @@
             "isCodeManaged": false,
             "position": 0,
             "parentId": "f3777e75-3659-4d44-8ef7-aeec0d06855b",
-            "handlers": {},
-            "visible": true
+            "handlers": {}
         },
         "172a14df-f73a-44fa-8fb1-e8648e7d32d2": {
             "id": "172a14df-f73a-44fa-8fb1-e8648e7d32d2",
@@ -104,8 +97,7 @@
             "isCodeManaged": false,
             "position": 0,
             "parentId": "c2519671-9ce7-44e7-ba4e-b0efda9cb20e",
-            "handlers": {},
-            "visible": true
+            "handlers": {}
         },
         "d4a5e62c-c6fe-49c4-80d4-33862af8727d": {
             "id": "d4a5e62c-c6fe-49c4-80d4-33862af8727d",
@@ -114,8 +106,7 @@
             "isCodeManaged": false,
             "position": 0,
             "parentId": "28d3885b-0fb8-4d41-97c6-978540015431",
-            "handlers": {},
-            "visible": true
+            "handlers": {}
         },
         "f3777e75-3659-4d44-8ef7-aeec0d06855b": {
             "id": "f3777e75-3659-4d44-8ef7-aeec0d06855b",
@@ -129,8 +120,7 @@
             "isCodeManaged": false,
             "position": 2,
             "parentId": "d4a5e62c-c6fe-49c4-80d4-33862af8727d",
-            "handlers": {},
-            "visible": true
+            "handlers": {}
         },
         "c2519671-9ce7-44e7-ba4e-b0efda9cb20e": {
             "id": "c2519671-9ce7-44e7-ba4e-b0efda9cb20e",
@@ -141,8 +131,7 @@
             "isCodeManaged": false,
             "position": 0,
             "parentId": "d4a5e62c-c6fe-49c4-80d4-33862af8727d",
-            "handlers": {},
-            "visible": true
+            "handlers": {}
         },
         "d4a71819-7444-4083-a1c7-7995452a7abf": {
             "id": "d4a71819-7444-4083-a1c7-7995452a7abf",
@@ -151,8 +140,7 @@
             "isCodeManaged": false,
             "position": 1,
             "parentId": "d4a5e62c-c6fe-49c4-80d4-33862af8727d",
-            "handlers": {},
-            "visible": true
+            "handlers": {}
         }
     }
 }
\ No newline at end of file
diff --git a/apps/hello/ui.json b/apps/hello/ui.json
index 42858f31c..6db57e02f 100644
--- a/apps/hello/ui.json
+++ b/apps/hello/ui.json
@@ -1,6 +1,6 @@
 {
     "metadata": {
-        "writer_version": "0.5.0"
+        "writer_version": "0.6.2rc3"
     },
     "components": {
         "root": {
@@ -86,7 +86,12 @@
             },
             "isCodeManaged": false,
             "position": 0,
-            "parentId": "9c30af6d-4ee5-4782-9169-0f361d67fa76"
+            "parentId": "9c30af6d-4ee5-4782-9169-0f361d67fa76",
+            "visible": {
+                "expression": true,
+                "binding": "",
+                "reversed": false
+            }
         },
         "ee919cd6-8153-4f34-8c6a-bfc1153df360": {
             "id": "ee919cd6-8153-4f34-8c6a-bfc1153df360",
@@ -623,7 +628,11 @@
             "position": 0,
             "parentId": "6a490318-239e-4fe9-a56b-f0f33d628c87",
             "handlers": {},
-            "visible": true
+            "visible": {
+                "expression": true,
+                "binding": "",
+                "reversed": false
+            }
         },
         "6d895924-e808-44aa-a119-f4e2d7f394f3": {
             "id": "6d895924-e808-44aa-a119-f4e2d7f394f3",
@@ -661,7 +670,11 @@
             "position": 0,
             "parentId": "feb9ca67-6670-483d-a895-22b031426a13",
             "handlers": {},
-            "visible": true
+            "visible": {
+                "expression": true,
+                "binding": "",
+                "reversed": false
+            }
         },
         "1c05b2e7-3a31-40dd-b6b8-77ded7c6bc0f": {
             "id": "1c05b2e7-3a31-40dd-b6b8-77ded7c6bc0f",
@@ -671,7 +684,11 @@
             "position": 0,
             "parentId": "c6392876-7cfd-4680-8725-b04f43ff294f",
             "handlers": {},
-            "visible": true
+            "visible": {
+                "expression": true,
+                "binding": "",
+                "reversed": false
+            }
         },
         "feb9ca67-6670-483d-a895-22b031426a13": {
             "id": "feb9ca67-6670-483d-a895-22b031426a13",
@@ -683,7 +700,11 @@
             "position": 0,
             "parentId": "1c05b2e7-3a31-40dd-b6b8-77ded7c6bc0f",
             "handlers": {},
-            "visible": true
+            "visible": {
+                "expression": true,
+                "binding": "",
+                "reversed": false
+            }
         },
         "3b325899-e560-40ea-ba54-9c55967af1e3": {
             "id": "3b325899-e560-40ea-ba54-9c55967af1e3",
@@ -695,7 +716,11 @@
             "position": 1,
             "parentId": "1c05b2e7-3a31-40dd-b6b8-77ded7c6bc0f",
             "handlers": {},
-            "visible": true
+            "visible": {
+                "expression": true,
+                "binding": "",
+                "reversed": false
+            }
         },
         "a0cd99db-0cbe-40ca-b9cb-b1670ec60dd8": {
             "id": "a0cd99db-0cbe-40ca-b9cb-b1670ec60dd8",
@@ -707,7 +732,11 @@
             "position": 2,
             "parentId": "1c05b2e7-3a31-40dd-b6b8-77ded7c6bc0f",
             "handlers": {},
-            "visible": true
+            "visible": {
+                "expression": true,
+                "binding": "",
+                "reversed": false
+            }
         },
         "5dcd137b-76bd-4a5f-ae5c-5b629035500e": {
             "id": "5dcd137b-76bd-4a5f-ae5c-5b629035500e",
@@ -719,7 +748,11 @@
             "position": 3,
             "parentId": "1c05b2e7-3a31-40dd-b6b8-77ded7c6bc0f",
             "handlers": {},
-            "visible": true
+            "visible": {
+                "expression": true,
+                "binding": "",
+                "reversed": false
+            }
         },
         "6a81f847-4d1d-4110-9cc1-12c716150e66": {
             "id": "6a81f847-4d1d-4110-9cc1-12c716150e66",
@@ -734,7 +767,11 @@
             "position": 0,
             "parentId": "3b325899-e560-40ea-ba54-9c55967af1e3",
             "handlers": {},
-            "visible": true
+            "visible": {
+                "expression": true,
+                "binding": "",
+                "reversed": false
+            }
         },
         "8e54e9d2-a7c8-4f74-897f-fa5791cd82da": {
             "id": "8e54e9d2-a7c8-4f74-897f-fa5791cd82da",
@@ -749,7 +786,11 @@
             "position": 0,
             "parentId": "a0cd99db-0cbe-40ca-b9cb-b1670ec60dd8",
             "handlers": {},
-            "visible": true
+            "visible": {
+                "expression": true,
+                "binding": "",
+                "reversed": false
+            }
         },
         "07f50628-4679-48a8-9a5d-07dcaf171afb": {
             "id": "07f50628-4679-48a8-9a5d-07dcaf171afb",
@@ -764,7 +805,11 @@
             "position": 0,
             "parentId": "5dcd137b-76bd-4a5f-ae5c-5b629035500e",
             "handlers": {},
-            "visible": true
+            "visible": {
+                "expression": true,
+                "binding": "",
+                "reversed": false
+            }
         },
         "4cca0893-5ad7-4152-b805-5c87babc4dee": {
             "id": "4cca0893-5ad7-4152-b805-5c87babc4dee",
@@ -774,7 +819,11 @@
             "position": 1,
             "parentId": "c6392876-7cfd-4680-8725-b04f43ff294f",
             "handlers": {},
-            "visible": true
+            "visible": {
+                "expression": true,
+                "binding": "",
+                "reversed": false
+            }
         },
         "23bc1387-26ed-4ff2-8565-b027c2960c3c": {
             "id": "23bc1387-26ed-4ff2-8565-b027c2960c3c",
@@ -792,7 +841,11 @@
             "position": 1,
             "parentId": "root",
             "handlers": {},
-            "visible": true
+            "visible": {
+                "expression": true,
+                "binding": "",
+                "reversed": false
+            }
         },
         "1d195388-35a3-43e1-b825-1d263b100a28": {
             "id": "1d195388-35a3-43e1-b825-1d263b100a28",
@@ -804,7 +857,11 @@
             "position": 0,
             "parentId": "23bc1387-26ed-4ff2-8565-b027c2960c3c",
             "handlers": {},
-            "visible": true
+            "visible": {
+                "expression": true,
+                "binding": "",
+                "reversed": false
+            }
         },
         "771dc336-69b2-400e-9ea3-e881e2332c9d": {
             "id": "771dc336-69b2-400e-9ea3-e881e2332c9d",
@@ -816,7 +873,11 @@
             "position": 0,
             "parentId": "dfaae7f9-db20-4f70-a376-919bdc7b6010",
             "handlers": {},
-            "visible": true
+            "visible": {
+                "expression": true,
+                "binding": "",
+                "reversed": false
+            }
         },
         "9c77aee4-e2a0-4e8b-9c2b-377f939bb51e": {
             "id": "9c77aee4-e2a0-4e8b-9c2b-377f939bb51e",
@@ -841,7 +902,11 @@
             "handlers": {
                 "click": "$goToPage_main"
             },
-            "visible": true
+            "visible": {
+                "expression": true,
+                "binding": "",
+                "reversed": false
+            }
         },
         "8fe33adf-a5ea-4c7a-8d1d-59cc4dc14f05": {
             "id": "8fe33adf-a5ea-4c7a-8d1d-59cc4dc14f05",
@@ -851,7 +916,11 @@
             "position": 1,
             "parentId": "23bc1387-26ed-4ff2-8565-b027c2960c3c",
             "handlers": {},
-            "visible": true
+            "visible": {
+                "expression": true,
+                "binding": "",
+                "reversed": false
+            }
         },
         "7402263c-cb8b-412d-b170-e6dc6ffcb706": {
             "id": "7402263c-cb8b-412d-b170-e6dc6ffcb706",
@@ -863,7 +932,11 @@
             "position": 1,
             "parentId": "8fe33adf-a5ea-4c7a-8d1d-59cc4dc14f05",
             "handlers": {},
-            "visible": true
+            "visible": {
+                "expression": true,
+                "binding": "",
+                "reversed": false
+            }
         },
         "dfaae7f9-db20-4f70-a376-919bdc7b6010": {
             "id": "dfaae7f9-db20-4f70-a376-919bdc7b6010",
@@ -875,7 +948,11 @@
             "position": 0,
             "parentId": "8fe33adf-a5ea-4c7a-8d1d-59cc4dc14f05",
             "handlers": {},
-            "visible": true
+            "visible": {
+                "expression": true,
+                "binding": "",
+                "reversed": false
+            }
         },
         "5bc38721-8b48-43d5-a454-ee5ebe713a4c": {
             "id": "5bc38721-8b48-43d5-a454-ee5ebe713a4c",
@@ -908,7 +985,11 @@
             "position": 2,
             "parentId": "771dc336-69b2-400e-9ea3-e881e2332c9d",
             "handlers": {},
-            "visible": true
+            "visible": {
+                "expression": true,
+                "binding": "",
+                "reversed": false
+            }
         },
         "03f422ce-bc36-4000-8eb1-da1cc00948c9": {
             "id": "03f422ce-bc36-4000-8eb1-da1cc00948c9",
@@ -923,7 +1004,11 @@
             "handlers": {
                 "click": "$goToPage_story"
             },
-            "visible": true
+            "visible": {
+                "expression": true,
+                "binding": "",
+                "reversed": false
+            }
         },
         "2df56a4b-b6e7-423d-a7a1-5d23c77f65fa": {
             "id": "2df56a4b-b6e7-423d-a7a1-5d23c77f65fa",
@@ -944,7 +1029,11 @@
             "position": 0,
             "parentId": "771dc336-69b2-400e-9ea3-e881e2332c9d",
             "handlers": {},
-            "visible": true
+            "visible": {
+                "expression": true,
+                "binding": "",
+                "reversed": false
+            }
         },
         "77cb256b-ef12-4a55-a051-500497f41302": {
             "id": "77cb256b-ef12-4a55-a051-500497f41302",
@@ -956,7 +1045,11 @@
             "position": 2,
             "parentId": "5bc38721-8b48-43d5-a454-ee5ebe713a4c",
             "handlers": {},
-            "visible": true
+            "visible": {
+                "expression": true,
+                "binding": "",
+                "reversed": false
+            }
         },
         "ed010441-0cac-4aa5-9e6f-97228e0c3536": {
             "id": "ed010441-0cac-4aa5-9e6f-97228e0c3536",
@@ -971,7 +1064,11 @@
             "handlers": {
                 "click": "handle_story_download"
             },
-            "visible": true
+            "visible": {
+                "expression": true,
+                "binding": "",
+                "reversed": false
+            }
         },
         "e1ax8ctt8lrao0e4": {
             "id": "e1ax8ctt8lrao0e4",
@@ -983,7 +1080,11 @@
             "position": 3,
             "parentId": "ee919cd6-8153-4f34-8c6a-bfc1153df360",
             "handlers": {},
-            "visible": true
+            "visible": {
+                "expression": true,
+                "binding": "",
+                "reversed": false
+            }
         },
         "j3jkho6tb97u0onr": {
             "id": "j3jkho6tb97u0onr",
@@ -997,7 +1098,11 @@
             "position": 0,
             "parentId": "e1ax8ctt8lrao0e4",
             "handlers": {},
-            "visible": true
+            "visible": {
+                "expression": true,
+                "binding": "",
+                "reversed": false
+            }
         },
         "4wzaubf275w17gac": {
             "id": "4wzaubf275w17gac",
@@ -1010,7 +1115,11 @@
             "position": 0,
             "parentId": "j3jkho6tb97u0onr",
             "handlers": {},
-            "visible": true
+            "visible": {
+                "expression": true,
+                "binding": "",
+                "reversed": false
+            }
         },
         "19binb4yi70gesho": {
             "id": "19binb4yi70gesho",
@@ -1042,7 +1151,11 @@
                 "wf-change-page": "handle_paginated_members_page_change",
                 "wf-change-page-size": "handle_paginated_members_page_size_change"
             },
-            "visible": true
+            "visible": {
+                "expression": true,
+                "binding": "",
+                "reversed": false
+            }
         },
         "b27lw9ex8ig3x17p": {
             "id": "b27lw9ex8ig3x17p",
@@ -1054,7 +1167,11 @@
             "isCodeManaged": false,
             "position": 2,
             "parentId": "9c30af6d-4ee5-4782-9169-0f361d67fa76",
-            "visible": true
+            "visible": {
+                "expression": true,
+                "binding": "",
+                "reversed": false
+            }
         },
         "804e15bf-11a7-463d-8082-f46ea3acac1b": {
             "id": "804e15bf-11a7-463d-8082-f46ea3acac1b",
diff --git a/src/ui/src/builder/BuilderSettingsVisibility.vue b/src/ui/src/builder/BuilderSettingsVisibility.vue
index 209d77390..f899059e5 100644
--- a/src/ui/src/builder/BuilderSettingsVisibility.vue
+++ b/src/ui/src/builder/BuilderSettingsVisibility.vue
@@ -11,7 +11,7 @@
 					:class="{
 						active:
 							typeof component.visible == 'undefined' ||
-							component.visible === true,
+							component.visible.expression === true,
 					}"
 					@click="() => setVisibleValue(component.id, true)"
 				>
@@ -19,26 +19,39 @@
 				</div>
 				<div
 					class="chip"
-					:class="{ active: component.visible === false }"
+					:class="{ active: component.visible?.expression === false }"
 					@click="() => setVisibleValue(component.id, false)"
 				>
 					No
 				</div>
 				<div
 					class="chip"
-					:class="{ active: typeof component.visible === 'string' }"
-					@click="() => setVisibleValue(component.id, '')"
+					:class="{
+						active: component.visible?.expression === 'custom',
+					}"
+					@click="
+						() =>
+							setVisibleValue(
+								component.id,
+								'custom',
+								component.visible?.binding,
+								component.visible?.reversed,
+							)
+					"
 				>
 					Custom
 				</div>
 			</div>
 			<div
-				v-if="typeof component.visible === 'string'"
+				v-if="
+					typeof component.visible != 'undefined' &&
+					component.visible.expression === 'custom'
+				"
 				class="fieldWrapper"
 			>
 				<span class="name">Visibility value</span>
 				<BuilderTemplateInput
-					:value="component.visible"
+					:value="component.visible.binding"
 					type="state"
 					class="content"
 					placeholder="my_visibility_state_value"
@@ -46,20 +59,22 @@
 						(ev: Event) =>
 							setVisibleValue(
 								component.id,
+								'custom',
 								(ev.target as HTMLInputElement).value,
-								component.visibleReversed,
+								component.visible.reversed,
 							)
 					"
 				/>
 				<div class="flexRow">
 					<input
 						type="checkbox"
-						:checked="component.visibleReversed"
+						:checked="component.visible.reversed"
 						@input="
 							(ev: Event) =>
 								setVisibleValue(
 									component.id,
-									component.visible,
+									'custom',
+									component.visible.binding,
 									(ev.target as HTMLInputElement).checked,
 								)
 						"
diff --git a/src/ui/src/builder/useComponentActions.ts b/src/ui/src/builder/useComponentActions.ts
index 876b62c77..89b430373 100644
--- a/src/ui/src/builder/useComponentActions.ts
+++ b/src/ui/src/builder/useComponentActions.ts
@@ -142,8 +142,7 @@ export function useComponentActions(wf: Core, ssbm: BuilderManager) {
 			parentId,
 			content: initContent,
 			handlers: {},
-			position: position ?? getNextInsertionPosition(parentId, type),
-			visible: true,
+			position: position ?? getNextInsertionPosition(parentId, type)
 		};
 
 		return component;
@@ -694,7 +693,8 @@ export function useComponentActions(wf: Core, ssbm: BuilderManager) {
 	 */
 	function setVisibleValue(
 		componentId: Component["id"],
-		visible: Component["visible"],
+		visible: boolean | string,
+		binding: string = "",
 		reversed: boolean = false,
 	) {
 		const component = wf.getComponentById(componentId);
@@ -703,12 +703,22 @@ export function useComponentActions(wf: Core, ssbm: BuilderManager) {
 		ssbm.openMutationTransaction(transactionId, `Change visibility`, true);
 		ssbm.registerPreMutation(component);
 
-		if (visible === true && typeof component.visible != "undefined") {
-			delete component.visible;
-			delete component.visibleReversed;
-		} else {
-			component.visible = visible;
-			component.visibleReversed = reversed;
+		if (component.visible == null) {
+			component.visible = {
+				expression: true,
+				binding: "",
+				reversed: false,
+			};
+		}
+
+		if (typeof visible == "boolean") {
+			component.visible.expression = visible;
+		} else if (visible == "custom") {
+			component.visible = {
+				expression: "custom",
+				binding: binding,
+				reversed: reversed,
+			};
 		}
 
 		ssbm.registerPostMutation(component);
diff --git a/src/ui/src/renderer/useEvaluator.ts b/src/ui/src/renderer/useEvaluator.ts
index 348ba3673..c7793954b 100644
--- a/src/ui/src/renderer/useEvaluator.ts
+++ b/src/ui/src/renderer/useEvaluator.ts
@@ -209,14 +209,14 @@ export function useEvaluator(wf: Core) {
 		if (!component) return;
 
 		if (typeof component.visible === "undefined") return true;
-		if (component.visible === true) return true;
-		if (component.visible === false) return false;
+		if (component.visible.expression === true) return true;
+		if (component.visible.expression === false) return false;
 		const evaluated = evaluateExpression(
-			component.visible as string,
+			component.visible.binding as string,
 			instancePath,
 		);
 
-		return component.visibleReversed === true ? !evaluated : !!evaluated;
+		return component.visible.reversed === true ? !evaluated : !!evaluated;
 	}
 
 	return {
diff --git a/src/ui/src/writerTypes.ts b/src/ui/src/writerTypes.ts
index 4793e796b..a5c772b1e 100644
--- a/src/ui/src/writerTypes.ts
+++ b/src/ui/src/writerTypes.ts
@@ -10,6 +10,12 @@ type ComponentId = string
  * Multiple instances of a single component can exists. For example, via Repeater.
  */
 
+type VisibleField = {
+	expression: boolean | string; // True | False | 'custom'
+	binding: string; // variable binding when expression is custom
+	reversed: boolean;
+};
+
 export type Component = {
 	id: ComponentId;
 	parentId: string;
@@ -18,8 +24,7 @@ export type Component = {
 	content: Record<string, string>;
 	isCodeManaged?: boolean;
 	handlers?: Record<string, string>;
-	visible?: boolean | string;
-	visibleReversed?: boolean;
+	visible?: VisibleField;
 	binding?: {
 		eventType: string;
 		stateRef: string;
diff --git a/src/writer/app_runner.py b/src/writer/app_runner.py
index 3f0bc2aa4..a6a35738b 100644
--- a/src/writer/app_runner.py
+++ b/src/writer/app_runner.py
@@ -18,7 +18,7 @@
 from pydantic import ValidationError
 from watchdog.observers.polling import PollingObserver
 
-from writer import VERSION
+from writer import VERSION, audit_and_fix
 from writer.core import EventHandlerRegistry, MiddlewareRegistry, WriterSession, use_request_context
 from writer.core_ui import ingest_bmc_component_tree
 from writer.ss_types import (
@@ -552,7 +552,7 @@ def run(self) -> None:
             message = self.log_queue.get()
             if message is None:
                 break
-            self.logger.handle(message)            
+            self.logger.handle(message)
 
 
 class AppRunner:
@@ -692,6 +692,8 @@ def _load_persisted_components(self) -> Dict:
         components = file_payload.get("components")
         if components is None:
             raise ValueError("Components not found in file.")
+        
+        components = audit_and_fix.fix_components(components)
         return components
 
     async def check_session(self, session_id: str) -> bool:
@@ -865,4 +867,3 @@ def run_async_in_thread():
         thread.start()
         thread.join()
         return
-
diff --git a/src/writer/audit_and_fix.py b/src/writer/audit_and_fix.py
new file mode 100644
index 000000000..856fd191a
--- /dev/null
+++ b/src/writer/audit_and_fix.py
@@ -0,0 +1,46 @@
+"""
+This module allows you to migrate obsolete data structures to newer data structures.
+For example, when loading the ui.
+"""
+
+
+def fix_components(components: dict) -> dict:
+    """
+    Migrates obsolete components to their newer format and avoids errors in Pydantic.
+    """
+    components = _fix_visible_fields(components)
+    return components
+
+
+def _fix_visible_fields(components: dict) -> dict:
+    """
+    Migrates the component visibility attribute to a more descriptive format.
+
+    >>> components['root']['visible'] = True
+
+    >>> components['root']['visible'] = {
+    >>>     'expression': True,
+    >>>     'binding': "",
+    >>>     'reversed': False
+    >>> }
+
+    If the visible attribute does not exist, it remains absent.
+    """
+    for key, value in components.items():
+        visible = value.get('visible')
+
+        if visible is not None and isinstance(visible, bool):
+            components[key]['visible'] = {
+                'expression': visible,
+                'binding': "",
+                "reversed": False
+            }
+
+        if visible is not None and isinstance(visible, str):
+            components[key]['visible'] = {
+                'expression': "custom",
+                'binding': visible,
+                'reversed': False
+            }
+
+    return components
diff --git a/src/writer/core_ui.py b/src/writer/core_ui.py
index 1720709d4..f61ecd4f4 100644
--- a/src/writer/core_ui.py
+++ b/src/writer/core_ui.py
@@ -4,9 +4,10 @@
 import uuid
 from contextvars import ContextVar
 from enum import Enum
-from typing import Any, Dict, List, Optional, Union, cast
+from typing import Any, Dict, List, Literal, Optional, Union, cast
 
 from pydantic import BaseModel, Field
+from typing_extensions import TypedDict
 
 current_parent_container: ContextVar[Union["Component", None]] = \
     ContextVar("current_parent_container")
@@ -35,6 +36,11 @@ class Branch(Enum):
     session_cmc = "session_cmc"
 
 
+class VisibileFields(TypedDict):
+    expression: Union[bool, Literal['custom']]
+    binding: str
+    reversed: bool
+
 class Component(BaseModel):
     id: str = Field(default_factory=generate_component_id)
     type: str
@@ -43,8 +49,7 @@ class Component(BaseModel):
     position: int = 0
     parentId: Optional[str] = None
     handlers: Optional[Dict[str, str]] = None
-    visible: Optional[Union[bool, str]] = None
-    visibleReversed: Optional[Union[bool]] = None
+    visible: Optional[VisibileFields] = None
     binding: Optional[Dict] = None
 
     def to_dict(self) -> Dict:
diff --git a/tests/backend/fixtures/__init__.py b/tests/backend/fixtures/__init__.py
index e69de29bb..b89465d62 100644
--- a/tests/backend/fixtures/__init__.py
+++ b/tests/backend/fixtures/__init__.py
@@ -0,0 +1,13 @@
+import io
+import os.path
+
+fixture_path = os.path.realpath(os.path.dirname(__file__))
+
+def load_fixture_content(path) -> str:
+    """
+    Load the contents of a file from the fixture folder
+
+    >>> c = load_fixture_content('obsoletes/ui_obsolete_visible.json')
+    """
+    with io.open(os.path.join(fixture_path, path), 'r', encoding='utf-8') as f:
+        return f.read()
diff --git a/tests/backend/fixtures/obsoletes/ui_obsolete_visible.json b/tests/backend/fixtures/obsoletes/ui_obsolete_visible.json
new file mode 100644
index 000000000..9122cab4d
--- /dev/null
+++ b/tests/backend/fixtures/obsoletes/ui_obsolete_visible.json
@@ -0,0 +1,36 @@
+{
+  "root": {
+	"id": "root",
+	"type": "root",
+	"content": {
+	  "appName": "Hello",
+	  "emptinessColor": "#ffffff"
+	},
+	"isCodeManaged": false,
+	"position": 0
+  },
+  "bb4d0e86-619e-4367-a180-be28ab6059f4": {
+	"id": "root",
+	"type": "page",
+	"content": {
+		"pageMode": "",
+		"key": "main"
+	},
+	"isCodeManaged": false,
+	"position": 0,
+	"parentId": "root",
+	"visible": true
+  },
+  "bb4d0e86-619e-4367-a180-be28abxxxx": {
+	"id": "root",
+	"type": "page",
+	"content": {
+		"pageMode": "",
+		"key": "main"
+	},
+	"isCodeManaged": false,
+	"position": 0,
+	"parentId": "root",
+	"visible": "value"
+  }
+}
diff --git a/tests/backend/test_audit_and_fix.py b/tests/backend/test_audit_and_fix.py
new file mode 100644
index 000000000..723b1a17c
--- /dev/null
+++ b/tests/backend/test_audit_and_fix.py
@@ -0,0 +1,27 @@
+import json
+
+from writer import audit_and_fix
+
+from backend.fixtures import load_fixture_content
+
+
+def test_fix_components_should_fix_visible_fields():
+    # Given
+    obsolete_components = load_fixture_content('obsoletes/ui_obsolete_visible.json')
+    components = json.loads(obsolete_components)
+
+    # When
+    final_components = audit_and_fix.fix_components(components)
+
+    # Then
+    assert "visible" not in final_components["root"]
+    assert final_components['bb4d0e86-619e-4367-a180-be28ab6059f4']['visible'] == {
+        'expression': True,
+        'binding': "",
+        'reversed': False
+    }
+    assert final_components['bb4d0e86-619e-4367-a180-be28abxxxx']['visible'] == {
+        'expression': "custom",
+        'binding': "value",
+        'reversed': False
+    }
diff --git a/tests/backend/testapp/ui.json b/tests/backend/testapp/ui.json
index 9337baca4..0b0945062 100644
--- a/tests/backend/testapp/ui.json
+++ b/tests/backend/testapp/ui.json
@@ -701,8 +701,7 @@
             "isCodeManaged": false,
             "position": 0,
             "parentId": "6a490318-239e-4fe9-a56b-f0f33d628c87",
-            "handlers": {},
-            "visible": true
+            "handlers": {}
         },
         "6d895924-e808-44aa-a119-f4e2d7f394f3": {
             "id": "6d895924-e808-44aa-a119-f4e2d7f394f3",
@@ -740,8 +739,7 @@
             "isCodeManaged": false,
             "position": 0,
             "parentId": "feb9ca67-6670-483d-a895-22b031426a13",
-            "handlers": {},
-            "visible": true
+            "handlers": {}
         },
         "1c05b2e7-3a31-40dd-b6b8-77ded7c6bc0f": {
             "id": "1c05b2e7-3a31-40dd-b6b8-77ded7c6bc0f",
@@ -750,8 +748,7 @@
             "isCodeManaged": false,
             "position": 0,
             "parentId": "c6392876-7cfd-4680-8725-b04f43ff294f",
-            "handlers": {},
-            "visible": true
+            "handlers": {}
         },
         "feb9ca67-6670-483d-a895-22b031426a13": {
             "id": "feb9ca67-6670-483d-a895-22b031426a13",
@@ -762,8 +759,7 @@
             "isCodeManaged": false,
             "position": 0,
             "parentId": "1c05b2e7-3a31-40dd-b6b8-77ded7c6bc0f",
-            "handlers": {},
-            "visible": true
+            "handlers": {}
         },
         "3b325899-e560-40ea-ba54-9c55967af1e3": {
             "id": "3b325899-e560-40ea-ba54-9c55967af1e3",
@@ -774,8 +770,7 @@
             "isCodeManaged": false,
             "position": 1,
             "parentId": "1c05b2e7-3a31-40dd-b6b8-77ded7c6bc0f",
-            "handlers": {},
-            "visible": true
+            "handlers": {}
         },
         "a0cd99db-0cbe-40ca-b9cb-b1670ec60dd8": {
             "id": "a0cd99db-0cbe-40ca-b9cb-b1670ec60dd8",
@@ -786,8 +781,7 @@
             "isCodeManaged": false,
             "position": 2,
             "parentId": "1c05b2e7-3a31-40dd-b6b8-77ded7c6bc0f",
-            "handlers": {},
-            "visible": true
+            "handlers": {}
         },
         "5dcd137b-76bd-4a5f-ae5c-5b629035500e": {
             "id": "5dcd137b-76bd-4a5f-ae5c-5b629035500e",
@@ -798,8 +792,7 @@
             "isCodeManaged": false,
             "position": 3,
             "parentId": "1c05b2e7-3a31-40dd-b6b8-77ded7c6bc0f",
-            "handlers": {},
-            "visible": true
+            "handlers": {}
         },
         "6a81f847-4d1d-4110-9cc1-12c716150e66": {
             "id": "6a81f847-4d1d-4110-9cc1-12c716150e66",
@@ -813,8 +806,7 @@
             "isCodeManaged": false,
             "position": 0,
             "parentId": "3b325899-e560-40ea-ba54-9c55967af1e3",
-            "handlers": {},
-            "visible": true
+            "handlers": {}
         },
         "8e54e9d2-a7c8-4f74-897f-fa5791cd82da": {
             "id": "8e54e9d2-a7c8-4f74-897f-fa5791cd82da",
@@ -828,8 +820,7 @@
             "isCodeManaged": false,
             "position": 0,
             "parentId": "a0cd99db-0cbe-40ca-b9cb-b1670ec60dd8",
-            "handlers": {},
-            "visible": true
+            "handlers": {}
         },
         "07f50628-4679-48a8-9a5d-07dcaf171afb": {
             "id": "07f50628-4679-48a8-9a5d-07dcaf171afb",
@@ -843,8 +834,7 @@
             "isCodeManaged": false,
             "position": 0,
             "parentId": "5dcd137b-76bd-4a5f-ae5c-5b629035500e",
-            "handlers": {},
-            "visible": true
+            "handlers": {}
         },
         "4cca0893-5ad7-4152-b805-5c87babc4dee": {
             "id": "4cca0893-5ad7-4152-b805-5c87babc4dee",
@@ -853,8 +843,7 @@
             "isCodeManaged": false,
             "position": 1,
             "parentId": "c6392876-7cfd-4680-8725-b04f43ff294f",
-            "handlers": {},
-            "visible": true
+            "handlers": {}
         },
         "b5915be5-774d-441a-a616-9f85e8e85c8e": {
             "id": "b5915be5-774d-441a-a616-9f85e8e85c8e",
@@ -867,8 +856,7 @@
             "parentId": "2d326b15-da90-496e-86e8-7fdd4bcbe822",
             "handlers": {
                 "click": "test_context"
-            },
-            "visible": true
+            }
         },
         "6014485e-2418-42bd-a111-8683a8b87de4": {
             "id": "6014485e-2418-42bd-a111-8683a8b87de4",
@@ -879,8 +867,7 @@
             "isCodeManaged": false,
             "position": 6,
             "parentId": "2d326b15-da90-496e-86e8-7fdd4bcbe822",
-            "handlers": {},
-            "visible": true
+            "handlers": {}
         },
         "03796247-dec4-4671-85c9-16559789e013": {
             "id": "03796247-dec4-4671-85c9-16559789e013",
@@ -891,8 +878,7 @@
             "isCodeManaged": false,
             "position": 1,
             "parentId": "root",
-            "handlers": {},
-            "visible": true
+            "handlers": {}
         },
         "7730df5b-8731-4123-bacc-898e7347b124": {
             "id": "7730df5b-8731-4123-bacc-898e7347b124",
@@ -903,8 +889,7 @@
             "isCodeManaged": false,
             "position": 2,
             "parentId": "root",
-            "handlers": {},
-            "visible": true
+            "handlers": {}
         },
         "6010765e-9ac3-4570-84bf-913ae404e03a": {
             "id": "6010765e-9ac3-4570-84bf-913ae404e03a",
@@ -912,8 +897,7 @@
             "content": {},
             "isCodeManaged": false,
             "position": 2,
-            "parentId": "7730df5b-8731-4123-bacc-898e7347b124",
-            "visible": true
+            "parentId": "7730df5b-8731-4123-bacc-898e7347b124"
         },
         "9bd98acc-b429-42da-afc0-5798089d5d59": {
             "id": "9bd98acc-b429-42da-afc0-5798089d5d59",
@@ -927,7 +911,6 @@
             "handlers": {
                 "wf-change": "payload_inspector"
             },
-            "visible": true,
             "binding": {
                 "eventType": "wf-change",
                 "stateRef": "b.name"
@@ -946,7 +929,6 @@
             "handlers": {
                 "wf-change": "payload_inspector"
             },
-            "visible": true,
             "binding": {
                 "eventType": "wf-change",
                 "stateRef": "b.summary"
@@ -964,7 +946,6 @@
             "handlers": {
                 "wf-number-change": "payload_inspector"
             },
-            "visible": true,
             "binding": {
                 "eventType": "wf-number-change",
                 "stateRef": "b.pet_count"
@@ -985,7 +966,6 @@
             "handlers": {
                 "wf-number-change": "payload_inspector"
             },
-            "visible": true,
             "binding": {
                 "eventType": "wf-number-change",
                 "stateRef": "b.review_score"
@@ -1003,7 +983,6 @@
             "handlers": {
                 "wf-date-change": "payload_inspector"
             },
-            "visible": true,
             "binding": {
                 "eventType": "wf-date-change",
                 "stateRef": "b.join_date"
@@ -1021,7 +1000,6 @@
             "handlers": {
                 "wf-option-change": "payload_inspector"
             },
-            "visible": true,
             "binding": {
                 "eventType": "wf-option-change",
                 "stateRef": "b.default_radio"
@@ -1039,7 +1017,6 @@
             "handlers": {
                 "wf-options-change": "payload_inspector"
             },
-            "visible": true,
             "binding": {
                 "eventType": "wf-options-change",
                 "stateRef": "b.default_checkbox"
@@ -1057,7 +1034,6 @@
             "handlers": {
                 "wf-option-change": "payload_inspector"
             },
-            "visible": true,
             "binding": {
                 "eventType": "wf-option-change",
                 "stateRef": "b.default_dropdown"
@@ -1076,7 +1052,6 @@
             "handlers": {
                 "wf-file-change": "payload_inspector"
             },
-            "visible": true,
             "binding": {
                 "eventType": "wf-file-change",
                 "stateRef": "b.files"
@@ -1095,7 +1070,6 @@
             "handlers": {
                 "wf-option-change": "payload_inspector"
             },
-            "visible": true,
             "binding": {
                 "eventType": "wf-option-change",
                 "stateRef": "b.language"
@@ -1110,8 +1084,7 @@
             "isCodeManaged": false,
             "position": 3,
             "parentId": "7730df5b-8731-4123-bacc-898e7347b124",
-            "handlers": {},
-            "visible": true
+            "handlers": {}
         },
         "69e40d75-af2f-4015-9bce-6311587d796f": {
             "id": "69e40d75-af2f-4015-9bce-6311587d796f",
@@ -1122,8 +1095,7 @@
             "isCodeManaged": false,
             "position": 0,
             "parentId": "2ab19af7-1efa-4012-af35-f01c3d39a409",
-            "handlers": {},
-            "visible": true
+            "handlers": {}
         },
         "c76ac5ff-8459-4421-9be2-faead4a17458": {
             "id": "c76ac5ff-8459-4421-9be2-faead4a17458",
@@ -1134,8 +1106,7 @@
             "isCodeManaged": false,
             "position": 0,
             "parentId": "7730df5b-8731-4123-bacc-898e7347b124",
-            "handlers": {},
-            "visible": true
+            "handlers": {}
         },
         "2e10d41b-83b6-422b-a2c2-7e19b1834d45": {
             "id": "2e10d41b-83b6-422b-a2c2-7e19b1834d45",
@@ -1144,8 +1115,7 @@
             "isCodeManaged": false,
             "position": 1,
             "parentId": "7730df5b-8731-4123-bacc-898e7347b124",
-            "handlers": {},
-            "visible": true
+            "handlers": {}
         },
         "35986d56-3a1a-4ded-bb5c-b60c2046756f": {
             "id": "35986d56-3a1a-4ded-bb5c-b60c2046756f",
@@ -1156,8 +1126,7 @@
             "isCodeManaged": false,
             "position": 3,
             "parentId": "root",
-            "handlers": {},
-            "visible": true
+            "handlers": {}
         },
         "3eb28922-ef5c-47de-88aa-d100c503a2f5": {
             "id": "3eb28922-ef5c-47de-88aa-d100c503a2f5",
@@ -1168,8 +1137,7 @@
             "isCodeManaged": false,
             "position": 5,
             "parentId": "7730df5b-8731-4123-bacc-898e7347b124",
-            "handlers": {},
-            "visible": true
+            "handlers": {}
         },
         "2893e4ee-2ce4-4357-8fa9-9eba8eb2f3f5": {
             "id": "2893e4ee-2ce4-4357-8fa9-9eba8eb2f3f5",
@@ -1180,8 +1148,7 @@
             "isCodeManaged": false,
             "position": 0,
             "parentId": "3eb28922-ef5c-47de-88aa-d100c503a2f5",
-            "handlers": {},
-            "visible": true
+            "handlers": {}
         },
         "5ee24c0d-e09e-4789-a9f9-111d5d581f11": {
             "id": "5ee24c0d-e09e-4789-a9f9-111d5d581f11",
@@ -1193,7 +1160,6 @@
             "position": 4,
             "parentId": "7730df5b-8731-4123-bacc-898e7347b124",
             "handlers": {},
-            "visible": true,
             "binding": {
                 "eventType": "wf-change",
                 "stateRef": "b.just_binding"
@@ -1210,8 +1176,7 @@
             "parentId": "35986d56-3a1a-4ded-bb5c-b60c2046756f",
             "handlers": {
                 "click": "payload_inspector"
-            },
-            "visible": true
+            }
         },
         "d1cbbd60-6f27-4fe9-af89-8f0493e5dcea": {
             "id": "d1cbbd60-6f27-4fe9-af89-8f0493e5dcea",
@@ -1222,8 +1187,7 @@
             "isCodeManaged": false,
             "position": 2,
             "parentId": "35986d56-3a1a-4ded-bb5c-b60c2046756f",
-            "handlers": {},
-            "visible": true
+            "handlers": {}
         },
         "b87338f7-1879-4060-8c6b-7f813a94736e": {
             "id": "b87338f7-1879-4060-8c6b-7f813a94736e",
@@ -1232,8 +1196,7 @@
             "isCodeManaged": false,
             "position": 5,
             "parentId": "35986d56-3a1a-4ded-bb5c-b60c2046756f",
-            "handlers": {},
-            "visible": true
+            "handlers": {}
         },
         "42cce1fb-8bba-4175-a6e2-c8caf920f148": {
             "id": "42cce1fb-8bba-4175-a6e2-c8caf920f148",
@@ -1247,7 +1210,6 @@
             "handlers": {
                 "click": "payload_inspector"
             },
-            "visible": true,
             "binding": {
                 "eventType": "wf-click",
                 "stateRef": "not-a-bindable-event"
@@ -1262,8 +1224,7 @@
             "isCodeManaged": false,
             "position": 8,
             "parentId": "35986d56-3a1a-4ded-bb5c-b60c2046756f",
-            "handlers": {},
-            "visible": true
+            "handlers": {}
         },
         "92f59f46-e2ac-47a4-8b78-da20a24299bf": {
             "id": "92f59f46-e2ac-47a4-8b78-da20a24299bf",
@@ -1272,8 +1233,7 @@
             "isCodeManaged": false,
             "position": 9,
             "parentId": "35986d56-3a1a-4ded-bb5c-b60c2046756f",
-            "handlers": {},
-            "visible": true
+            "handlers": {}
         },
         "04927b91-a0c4-4555-9874-1f65542ffb9f": {
             "id": "04927b91-a0c4-4555-9874-1f65542ffb9f",
@@ -1286,8 +1246,7 @@
             "isCodeManaged": false,
             "position": 10,
             "parentId": "35986d56-3a1a-4ded-bb5c-b60c2046756f",
-            "handlers": {},
-            "visible": true
+            "handlers": {}
         },
         "1a928b2a-4f6b-4a79-95a4-b93a6c2aaef2": {
             "id": "1a928b2a-4f6b-4a79-95a4-b93a6c2aaef2",
@@ -1298,8 +1257,7 @@
             "isCodeManaged": false,
             "position": 13,
             "parentId": "35986d56-3a1a-4ded-bb5c-b60c2046756f",
-            "handlers": {},
-            "visible": true
+            "handlers": {}
         },
         "d1628b64-28be-46a3-a9ab-3f232c0e9775": {
             "id": "d1628b64-28be-46a3-a9ab-3f232c0e9775",
@@ -1310,8 +1268,7 @@
             "isCodeManaged": false,
             "position": 17,
             "parentId": "35986d56-3a1a-4ded-bb5c-b60c2046756f",
-            "handlers": {},
-            "visible": true
+            "handlers": {}
         },
         "8d280fda-2b63-4830-85bb-836feff2faae": {
             "id": "8d280fda-2b63-4830-85bb-836feff2faae",
@@ -1322,8 +1279,7 @@
             "isCodeManaged": false,
             "position": 16,
             "parentId": "35986d56-3a1a-4ded-bb5c-b60c2046756f",
-            "handlers": {},
-            "visible": true
+            "handlers": {}
         },
         "b6c2d765-1460-407a-8833-850cd9f2a9a0": {
             "id": "b6c2d765-1460-407a-8833-850cd9f2a9a0",
@@ -1334,8 +1290,7 @@
             "isCodeManaged": false,
             "position": 15,
             "parentId": "35986d56-3a1a-4ded-bb5c-b60c2046756f",
-            "handlers": {},
-            "visible": true
+            "handlers": {}
         },
         "0eda1376-932c-4a1e-a575-2fe66520e4ca": {
             "id": "0eda1376-932c-4a1e-a575-2fe66520e4ca",
@@ -1346,8 +1301,7 @@
             "isCodeManaged": false,
             "position": 14,
             "parentId": "35986d56-3a1a-4ded-bb5c-b60c2046756f",
-            "handlers": {},
-            "visible": true
+            "handlers": {}
         },
         "919ce03d-bb5f-4adc-a93d-da66159ac977": {
             "id": "919ce03d-bb5f-4adc-a93d-da66159ac977",
@@ -1360,8 +1314,7 @@
             "isCodeManaged": false,
             "position": 11,
             "parentId": "35986d56-3a1a-4ded-bb5c-b60c2046756f",
-            "handlers": {},
-            "visible": true
+            "handlers": {}
         },
         "82a893ae-6328-44c4-9669-87797caedf7e": {
             "id": "82a893ae-6328-44c4-9669-87797caedf7e",
@@ -1375,8 +1328,7 @@
             "isCodeManaged": false,
             "position": 12,
             "parentId": "35986d56-3a1a-4ded-bb5c-b60c2046756f",
-            "handlers": {},
-            "visible": true
+            "handlers": {}
         },
         "5cc43590-aed8-4a78-8ca9-9841ab1e11c2": {
             "id": "5cc43590-aed8-4a78-8ca9-9841ab1e11c2",
@@ -1388,8 +1340,7 @@
             "isCodeManaged": false,
             "position": 1,
             "parentId": "35986d56-3a1a-4ded-bb5c-b60c2046756f",
-            "handlers": {},
-            "visible": true
+            "handlers": {}
         },
         "4a7a5121-da30-4c6b-8977-91a5848e3702": {
             "id": "4a7a5121-da30-4c6b-8977-91a5848e3702",
@@ -1401,8 +1352,7 @@
             "isCodeManaged": false,
             "position": 3,
             "parentId": "35986d56-3a1a-4ded-bb5c-b60c2046756f",
-            "handlers": {},
-            "visible": true
+            "handlers": {}
         },
         "6739dcac-5078-4acb-885b-2721e2efd994": {
             "id": "6739dcac-5078-4acb-885b-2721e2efd994",
@@ -1414,8 +1364,7 @@
             "isCodeManaged": false,
             "position": 4,
             "parentId": "35986d56-3a1a-4ded-bb5c-b60c2046756f",
-            "handlers": {},
-            "visible": true
+            "handlers": {}
         },
         "88ea37a5-eb07-4740-ae42-a3eeeacca310": {
             "id": "88ea37a5-eb07-4740-ae42-a3eeeacca310",
@@ -1426,8 +1375,7 @@
             "isCodeManaged": false,
             "position": 4,
             "parentId": "root",
-            "handlers": {},
-            "visible": true
+            "handlers": {}
         },
         "c55caf0b-39c1-4fe5-8756-7506b3e3a19a": {
             "id": "c55caf0b-39c1-4fe5-8756-7506b3e3a19a",
@@ -1436,8 +1384,7 @@
             "isCodeManaged": false,
             "position": -2,
             "parentId": "88ea37a5-eb07-4740-ae42-a3eeeacca310",
-            "handlers": {},
-            "visible": true
+            "handlers": {}
         },
         "ca8f9355-c26b-44a6-85c1-46d2182a576e": {
             "id": "ca8f9355-c26b-44a6-85c1-46d2182a576e",
@@ -1448,8 +1395,7 @@
             "isCodeManaged": false,
             "position": 0,
             "parentId": "c55caf0b-39c1-4fe5-8756-7506b3e3a19a",
-            "handlers": {},
-            "visible": true
+            "handlers": {}
         },
         "4d686ee6-ab59-41f0-8537-e91fed85af50": {
             "id": "4d686ee6-ab59-41f0-8537-e91fed85af50",
@@ -1460,8 +1406,7 @@
             "isCodeManaged": false,
             "position": 0,
             "parentId": "88ea37a5-eb07-4740-ae42-a3eeeacca310",
-            "handlers": {},
-            "visible": true
+            "handlers": {}
         },
         "ee91f05a-6cac-4cf0-96dd-090a7bf09bd6": {
             "id": "ee91f05a-6cac-4cf0-96dd-090a7bf09bd6",
@@ -1472,8 +1417,7 @@
             "isCodeManaged": false,
             "position": 0,
             "parentId": "d4d9fd0d-b347-42d9-9786-a9873cdd0912",
-            "handlers": {},
-            "visible": true
+            "handlers": {}
         },
         "5190d792-4e80-40a9-b168-051018b12f3d": {
             "id": "5190d792-4e80-40a9-b168-051018b12f3d",
@@ -1482,8 +1426,7 @@
             "isCodeManaged": false,
             "position": 1,
             "parentId": "88ea37a5-eb07-4740-ae42-a3eeeacca310",
-            "handlers": {},
-            "visible": true
+            "handlers": {}
         },
         "d4d9fd0d-b347-42d9-9786-a9873cdd0912": {
             "id": "d4d9fd0d-b347-42d9-9786-a9873cdd0912",
@@ -1494,8 +1437,7 @@
             "isCodeManaged": false,
             "position": 0,
             "parentId": "5190d792-4e80-40a9-b168-051018b12f3d",
-            "handlers": {},
-            "visible": true
+            "handlers": {}
         },
         "c937bbfd-a510-432c-8e58-c50eecd5c67a": {
             "id": "c937bbfd-a510-432c-8e58-c50eecd5c67a",
@@ -1506,8 +1448,7 @@
             "isCodeManaged": false,
             "position": 1,
             "parentId": "5190d792-4e80-40a9-b168-051018b12f3d",
-            "handlers": {},
-            "visible": true
+            "handlers": {}
         },
         "04acdbfb-2e72-45b3-9fad-367cda5164b5": {
             "id": "04acdbfb-2e72-45b3-9fad-367cda5164b5",
@@ -1518,8 +1459,7 @@
             "isCodeManaged": false,
             "position": 0,
             "parentId": "c937bbfd-a510-432c-8e58-c50eecd5c67a",
-            "handlers": {},
-            "visible": true
+            "handlers": {}
         },
         "56074976-153a-4af3-ad65-fbd49da61f32": {
             "id": "56074976-153a-4af3-ad65-fbd49da61f32",
@@ -1528,8 +1468,7 @@
             "isCodeManaged": false,
             "position": 3,
             "parentId": "88ea37a5-eb07-4740-ae42-a3eeeacca310",
-            "handlers": {},
-            "visible": true
+            "handlers": {}
         },
         "c2b20427-0e95-4086-94f7-56df84fd4912": {
             "id": "c2b20427-0e95-4086-94f7-56df84fd4912",
@@ -1540,8 +1479,7 @@
             "isCodeManaged": false,
             "position": 0,
             "parentId": "56074976-153a-4af3-ad65-fbd49da61f32",
-            "handlers": {},
-            "visible": true
+            "handlers": {}
         },
         "ad8bd11b-3f89-4839-b2d3-4c7f52c267bd": {
             "id": "ad8bd11b-3f89-4839-b2d3-4c7f52c267bd",
@@ -1552,8 +1490,7 @@
             "isCodeManaged": false,
             "position": 1,
             "parentId": "56074976-153a-4af3-ad65-fbd49da61f32",
-            "handlers": {},
-            "visible": true
+            "handlers": {}
         },
         "e702f506-8ec1-495e-9d8e-e488120b9a7b": {
             "id": "e702f506-8ec1-495e-9d8e-e488120b9a7b",
@@ -1564,8 +1501,7 @@
             "isCodeManaged": false,
             "position": 2,
             "parentId": "56074976-153a-4af3-ad65-fbd49da61f32",
-            "handlers": {},
-            "visible": true
+            "handlers": {}
         },
         "c72a3364-03d9-4fb1-ac1f-13a1785e18c0": {
             "id": "c72a3364-03d9-4fb1-ac1f-13a1785e18c0",
@@ -1576,8 +1512,7 @@
             "isCodeManaged": false,
             "position": 0,
             "parentId": "ad8bd11b-3f89-4839-b2d3-4c7f52c267bd",
-            "handlers": {},
-            "visible": true
+            "handlers": {}
         },
         "065e4f07-c707-4cc7-8cbe-143be5ab2486": {
             "id": "065e4f07-c707-4cc7-8cbe-143be5ab2486",
@@ -1588,8 +1523,7 @@
             "isCodeManaged": false,
             "position": 0,
             "parentId": "e702f506-8ec1-495e-9d8e-e488120b9a7b",
-            "handlers": {},
-            "visible": true
+            "handlers": {}
         },
         "511bedb8-f856-451f-8ee4-a123d934b744": {
             "id": "511bedb8-f856-451f-8ee4-a123d934b744",
@@ -1600,8 +1534,7 @@
             "isCodeManaged": false,
             "position": 0,
             "parentId": "065e4f07-c707-4cc7-8cbe-143be5ab2486",
-            "handlers": {},
-            "visible": true
+            "handlers": {}
         },
         "5ab397b2-4283-44ab-ba9f-4cde3b422641": {
             "id": "5ab397b2-4283-44ab-ba9f-4cde3b422641",
@@ -1612,8 +1545,7 @@
             "isCodeManaged": false,
             "position": 1,
             "parentId": "e702f506-8ec1-495e-9d8e-e488120b9a7b",
-            "handlers": {},
-            "visible": true
+            "handlers": {}
         },
         "ba15571d-4baa-4c65-b600-45af1c32ca75": {
             "id": "ba15571d-4baa-4c65-b600-45af1c32ca75",
@@ -1624,8 +1556,7 @@
             "isCodeManaged": false,
             "position": 4,
             "parentId": "88ea37a5-eb07-4740-ae42-a3eeeacca310",
-            "handlers": {},
-            "visible": true
+            "handlers": {}
         },
         "5a098fd8-1b39-41d9-881e-6cf8e47c4088": {
             "id": "5a098fd8-1b39-41d9-881e-6cf8e47c4088",
@@ -1636,8 +1567,7 @@
             "isCodeManaged": false,
             "position": 0,
             "parentId": "ba15571d-4baa-4c65-b600-45af1c32ca75",
-            "handlers": {},
-            "visible": true
+            "handlers": {}
         },
         "bf8db13c-c4b4-4a6d-bb98-247ed6d1da21": {
             "id": "bf8db13c-c4b4-4a6d-bb98-247ed6d1da21",
@@ -1648,8 +1578,7 @@
             "isCodeManaged": false,
             "position": 1,
             "parentId": "ba15571d-4baa-4c65-b600-45af1c32ca75",
-            "handlers": {},
-            "visible": true
+            "handlers": {}
         },
         "e4e5c10f-f5f3-44cb-bd3a-34e4f771829e": {
             "id": "e4e5c10f-f5f3-44cb-bd3a-34e4f771829e",
@@ -1658,8 +1587,7 @@
             "isCodeManaged": false,
             "position": 2,
             "parentId": "88ea37a5-eb07-4740-ae42-a3eeeacca310",
-            "handlers": {},
-            "visible": true
+            "handlers": {}
         },
         "28a2212b-bc58-4398-8a72-2554e5296490": {
             "id": "28a2212b-bc58-4398-8a72-2554e5296490",
@@ -1670,8 +1598,7 @@
             "isCodeManaged": false,
             "position": 5,
             "parentId": "root",
-            "handlers": {},
-            "visible": true
+            "handlers": {}
         },
         "b8b10d7e-932f-4a23-baf5-a7a944a4c4a4": {
             "id": "b8b10d7e-932f-4a23-baf5-a7a944a4c4a4",
@@ -1684,8 +1611,7 @@
             "parentId": "28a2212b-bc58-4398-8a72-2554e5296490",
             "handlers": {
                 "click": "payload_inspector"
-            },
-            "visible": true
+            }
         },
         "04915674-0afd-4f53-9dfd-301887e7e005": {
             "id": "04915674-0afd-4f53-9dfd-301887e7e005",
@@ -1696,8 +1622,7 @@
             "isCodeManaged": false,
             "position": 1,
             "parentId": "28a2212b-bc58-4398-8a72-2554e5296490",
-            "handlers": {},
-            "visible": true
+            "handlers": {}
         },
         "f2c445a4-9d3c-4c38-9fe3-cda02126d5d0": {
             "id": "f2c445a4-9d3c-4c38-9fe3-cda02126d5d0",
@@ -1708,8 +1633,7 @@
             "isCodeManaged": false,
             "position": 0,
             "parentId": "04915674-0afd-4f53-9dfd-301887e7e005",
-            "handlers": {},
-            "visible": true
+            "handlers": {}
         },
         "1b3c8d83-36c1-4c74-9dcd-110160c16081": {
             "id": "1b3c8d83-36c1-4c74-9dcd-110160c16081",
@@ -1720,8 +1644,7 @@
             "isCodeManaged": false,
             "position": 0,
             "parentId": "f2c445a4-9d3c-4c38-9fe3-cda02126d5d0",
-            "handlers": {},
-            "visible": true
+            "handlers": {}
         },
         "7aa7e13b-31c4-4a60-be09-502da875eeda": {
             "id": "7aa7e13b-31c4-4a60-be09-502da875eeda",
@@ -1734,8 +1657,7 @@
             "isCodeManaged": false,
             "position": 0,
             "parentId": "1b3c8d83-36c1-4c74-9dcd-110160c16081",
-            "handlers": {},
-            "visible": true
+            "handlers": {}
         },
         "056faae6-fc09-4482-b046-9818e62714c0": {
             "id": "056faae6-fc09-4482-b046-9818e62714c0",
@@ -1747,8 +1669,7 @@
             "isCodeManaged": false,
             "position": 2,
             "parentId": "28a2212b-bc58-4398-8a72-2554e5296490",
-            "handlers": {},
-            "visible": true
+            "handlers": {}
         },
         "f39b508d-6fec-465c-856c-c064179a46d0": {
             "id": "f39b508d-6fec-465c-856c-c064179a46d0",
@@ -1759,8 +1680,7 @@
             "isCodeManaged": false,
             "position": 0,
             "parentId": "056faae6-fc09-4482-b046-9818e62714c0",
-            "handlers": {},
-            "visible": true
+            "handlers": {}
         },
         "c2086d6c-22d7-4fc9-bb53-bd346c6ce711": {
             "id": "c2086d6c-22d7-4fc9-bb53-bd346c6ce711",
@@ -1771,8 +1691,7 @@
             "isCodeManaged": false,
             "position": 0,
             "parentId": "f39b508d-6fec-465c-856c-c064179a46d0",
-            "handlers": {},
-            "visible": true
+            "handlers": {}
         },
         "b97d32ca-49f5-47b2-ae2a-a61e757f395a": {
             "id": "b97d32ca-49f5-47b2-ae2a-a61e757f395a",
@@ -1786,8 +1705,7 @@
             "handlers": {
                 "wf-tick": "handle_timer_tick",
                 "wf-not-a-real-event": "handle_not_a_real_function"
-            },
-            "visible": true
+            }
         },
         "f4076626-ccb1-46d9-baf8-265fd5bd11bf": {
             "id": "f4076626-ccb1-46d9-baf8-265fd5bd11bf",
@@ -1798,8 +1716,7 @@
             "isCodeManaged": false,
             "position": 5,
             "parentId": "28a2212b-bc58-4398-8a72-2554e5296490",
-            "handlers": {},
-            "visible": true
+            "handlers": {}
         },
         "30f4990c-256c-4527-b6ea-65033126bfa9": {
             "id": "30f4990c-256c-4527-b6ea-65033126bfa9",
@@ -1810,8 +1727,7 @@
             "isCodeManaged": false,
             "position": 6,
             "parentId": "28a2212b-bc58-4398-8a72-2554e5296490",
-            "handlers": {},
-            "visible": true
+            "handlers": {}
         },
         "5862cc96-b231-4da5-8226-9814dd0bfd62": {
             "id": "5862cc96-b231-4da5-8226-9814dd0bfd62",
@@ -1824,8 +1740,7 @@
             "parentId": "f39b508d-6fec-465c-856c-c064179a46d0",
             "handlers": {
                 "click": "payload_inspector"
-            },
-            "visible": true
+            }
         },
         "0f68ff82-a59a-41fc-9f8a-cad8ef51dce0": {
             "id": "0f68ff82-a59a-41fc-9f8a-cad8ef51dce0",
@@ -1838,8 +1753,7 @@
             "parentId": "28a2212b-bc58-4398-8a72-2554e5296490",
             "handlers": {
                 "wf-tick": "handle_timer_tick"
-            },
-            "visible": true
+            }
         },
         "b5a11459-735d-463f-ad7a-cafb2de7c8ae": {
             "id": "b5a11459-735d-463f-ad7a-cafb2de7c8ae",
@@ -1851,8 +1765,7 @@
             "isCodeManaged": false,
             "position": 7,
             "parentId": "28a2212b-bc58-4398-8a72-2554e5296490",
-            "handlers": {},
-            "visible": true
+            "handlers": {}
         },
         "9090bad3-2584-46e7-a937-a0afc81f2c81": {
             "id": "9090bad3-2584-46e7-a937-a0afc81f2c81",
@@ -1865,8 +1778,7 @@
             "parentId": "28a2212b-bc58-4398-8a72-2554e5296490",
             "handlers": {
                 "wf-webcam": "handle_webcam"
-            },
-            "visible": true
+            }
         },
         "21a9ec0b-708d-4f22-a52f-00b92fbc8f2a": {
             "id": "21a9ec0b-708d-4f22-a52f-00b92fbc8f2a",
@@ -1877,8 +1789,7 @@
             "isCodeManaged": false,
             "position": 7,
             "parentId": "7730df5b-8731-4123-bacc-898e7347b124",
-            "handlers": {},
-            "visible": true
+            "handlers": {}
         },
         "fb2ff612-35d8-4b08-af75-0b895e19ed81": {
             "id": "fb2ff612-35d8-4b08-af75-0b895e19ed81",
@@ -1891,8 +1802,7 @@
             "parentId": "7730df5b-8731-4123-bacc-898e7347b124",
             "handlers": {
                 "click": "handle_form_submit"
-            },
-            "visible": true
+            }
         },
         "4b6f14b0-b2d9-43e7-8aba-8d3e939c1f83": {
             "id": "4b6f14b0-b2d9-43e7-8aba-8d3e939c1f83",
@@ -1901,8 +1811,7 @@
             "isCodeManaged": false,
             "position": 6,
             "parentId": "root",
-            "handlers": {},
-            "visible": true
+            "handlers": {}
         },
         "0cd59329-29c8-4887-beee-39794065221e": {
             "id": "0cd59329-29c8-4887-beee-39794065221e",
@@ -1913,8 +1822,7 @@
             "isCodeManaged": false,
             "position": 0,
             "parentId": "4b6f14b0-b2d9-43e7-8aba-8d3e939c1f83",
-            "handlers": {},
-            "visible": true
+            "handlers": {}
         },
         "f811ca14-8915-443d-8dd3-77ae69fb80f4": {
             "id": "f811ca14-8915-443d-8dd3-77ae69fb80f4",
@@ -1927,8 +1835,7 @@
             "isCodeManaged": false,
             "position": 1,
             "parentId": "4b6f14b0-b2d9-43e7-8aba-8d3e939c1f83",
-            "handlers": {},
-            "visible": true
+            "handlers": {}
         },
         "2e688107-f865-419b-a07b-95103197e3fd": {
             "id": "2e688107-f865-419b-a07b-95103197e3fd",
@@ -1939,8 +1846,7 @@
             "isCodeManaged": false,
             "position": 0,
             "parentId": "f811ca14-8915-443d-8dd3-77ae69fb80f4",
-            "handlers": {},
-            "visible": true
+            "handlers": {}
         },
         "d99d976a-bdf0-4fc4-8379-4998e7a58440": {
             "id": "d99d976a-bdf0-4fc4-8379-4998e7a58440",
@@ -1951,8 +1857,7 @@
             "isCodeManaged": false,
             "position": 3,
             "parentId": "9c30af6d-4ee5-4782-9169-0f361d67fa76",
-            "handlers": {},
-            "visible": true
+            "handlers": {}
         },
         "3991ac75-1219-49e7-a70d-6b782c27b4e0": {
             "id": "3991ac75-1219-49e7-a70d-6b782c27b4e0",
@@ -1965,8 +1870,7 @@
             "parentId": "9c30af6d-4ee5-4782-9169-0f361d67fa76",
             "handlers": {
                 "click": "$goToPage_inputTest"
-            },
-            "visible": true
+            }
         },
         "add45c35-6a73-4f9a-bade-22fecd738967": {
             "id": "add45c35-6a73-4f9a-bade-22fecd738967",
@@ -1979,8 +1883,7 @@
             "parentId": "9c30af6d-4ee5-4782-9169-0f361d67fa76",
             "handlers": {
                 "click": "$goToPage_content"
-            },
-            "visible": true
+            }
         },
         "06c660f8-e3d6-4bdd-92be-64cb080ee933": {
             "id": "06c660f8-e3d6-4bdd-92be-64cb080ee933",
@@ -1992,8 +1895,7 @@
             "isCodeManaged": false,
             "position": 7,
             "parentId": "root",
-            "handlers": {},
-            "visible": true
+            "handlers": {}
         },
         "d15b9cf1-7e79-4ee5-9f0d-7c38c6b6c070": {
             "id": "d15b9cf1-7e79-4ee5-9f0d-7c38c6b6c070",
@@ -2006,8 +1908,7 @@
             "isCodeManaged": false,
             "position": 1,
             "parentId": "06c660f8-e3d6-4bdd-92be-64cb080ee933",
-            "handlers": {},
-            "visible": true
+            "handlers": {}
         },
         "9f589947-0ea9-4a70-9d57-4ae52543be42": {
             "id": "9f589947-0ea9-4a70-9d57-4ae52543be42",
@@ -2018,8 +1919,7 @@
             "isCodeManaged": false,
             "position": 0,
             "parentId": "d15b9cf1-7e79-4ee5-9f0d-7c38c6b6c070",
-            "handlers": {},
-            "visible": true
+            "handlers": {}
         },
         "2b3a1237-8884-4fc7-a7a7-fdc51511e6f2": {
             "id": "2b3a1237-8884-4fc7-a7a7-fdc51511e6f2",
@@ -2028,8 +1928,7 @@
             "isCodeManaged": false,
             "position": 0,
             "parentId": "9f589947-0ea9-4a70-9d57-4ae52543be42",
-            "handlers": {},
-            "visible": true
+            "handlers": {}
         },
         "faf077b6-c62f-4a5a-b24e-4590efcae11f": {
             "id": "faf077b6-c62f-4a5a-b24e-4590efcae11f",
@@ -2040,8 +1939,7 @@
             "isCodeManaged": false,
             "position": 0,
             "parentId": "2b3a1237-8884-4fc7-a7a7-fdc51511e6f2",
-            "handlers": {},
-            "visible": true
+            "handlers": {}
         },
         "b36b1692-0358-4594-b641-fe6addbf91b5": {
             "id": "b36b1692-0358-4594-b641-fe6addbf91b5",
@@ -2053,8 +1951,7 @@
             "isCodeManaged": false,
             "position": 0,
             "parentId": "faf077b6-c62f-4a5a-b24e-4590efcae11f",
-            "handlers": {},
-            "visible": true
+            "handlers": {}
         },
         "b87ff7c9-9849-401a-a89b-85d8e9e6f628": {
             "id": "b87ff7c9-9849-401a-a89b-85d8e9e6f628",
@@ -2065,8 +1962,7 @@
             "isCodeManaged": false,
             "position": 2,
             "parentId": "2b3a1237-8884-4fc7-a7a7-fdc51511e6f2",
-            "handlers": {},
-            "visible": true
+            "handlers": {}
         },
         "ff144a8c-42df-426b-8eb8-928eacb311f4": {
             "id": "ff144a8c-42df-426b-8eb8-928eacb311f4",
@@ -2078,8 +1974,7 @@
             "isCodeManaged": false,
             "position": 1,
             "parentId": "b87ff7c9-9849-401a-a89b-85d8e9e6f628",
-            "handlers": {},
-            "visible": true
+            "handlers": {}
         },
         "ee336cd4-8127-40ff-a6e7-0689950655a0": {
             "id": "ee336cd4-8127-40ff-a6e7-0689950655a0",
@@ -2095,8 +1990,7 @@
             "parentId": "b87ff7c9-9849-401a-a89b-85d8e9e6f628",
             "handlers": {
                 "click": "handle_add_to_list"
-            },
-            "visible": true
+            }
         },
         "3332d2f4-f70e-4354-981b-dfda3a76ae34": {
             "id": "3332d2f4-f70e-4354-981b-dfda3a76ae34",
@@ -2107,8 +2001,7 @@
             "isCodeManaged": false,
             "position": 0,
             "parentId": "b87ff7c9-9849-401a-a89b-85d8e9e6f628",
-            "handlers": {},
-            "visible": true
+            "handlers": {}
         },
         "dd335761-033a-47eb-9ddf-c3e3d25ba8a8": {
             "id": "dd335761-033a-47eb-9ddf-c3e3d25ba8a8",
@@ -2117,8 +2010,7 @@
             "isCodeManaged": false,
             "position": 1,
             "parentId": "2b3a1237-8884-4fc7-a7a7-fdc51511e6f2",
-            "handlers": {},
-            "visible": true
+            "handlers": {}
         },
         "cd02f864-b72a-44fe-bd52-1929c0fd6c7f": {
             "id": "cd02f864-b72a-44fe-bd52-1929c0fd6c7f",
@@ -2129,8 +2021,7 @@
             "isCodeManaged": false,
             "position": 2,
             "parentId": "06c660f8-e3d6-4bdd-92be-64cb080ee933",
-            "handlers": {},
-            "visible": true
+            "handlers": {}
         },
         "abaa1903-e58e-4a67-92ef-d7065f1a7fcf": {
             "id": "abaa1903-e58e-4a67-92ef-d7065f1a7fcf",
@@ -2141,8 +2032,7 @@
             "isCodeManaged": false,
             "position": 0,
             "parentId": "06c660f8-e3d6-4bdd-92be-64cb080ee933",
-            "handlers": {},
-            "visible": true
+            "handlers": {}
         },
         "af23e21b-b8ff-47d3-a72f-83eb53f5f452": {
             "id": "af23e21b-b8ff-47d3-a72f-83eb53f5f452",
@@ -2154,7 +2044,11 @@
             "position": 3,
             "parentId": "06c660f8-e3d6-4bdd-92be-64cb080ee933",
             "handlers": {},
-            "visible": "",
+            "visible": {
+			  "expression": "custom",
+			  "binding": "",
+			  "reversed": false
+			},
             "binding": {
                 "eventType": "wf-change",
                 "stateRef": "name"
@@ -2172,8 +2066,7 @@
             "parentId": "9c30af6d-4ee5-4782-9169-0f361d67fa76",
             "handlers": {
                 "click": "handle_file_download"
-            },
-            "visible": true
+            }
         },
         "272f0871-585e-4662-8ae1-a8cd6067b60b": {
             "id": "272f0871-585e-4662-8ae1-a8cd6067b60b",
@@ -2187,8 +2080,7 @@
             "parentId": "9c30af6d-4ee5-4782-9169-0f361d67fa76",
             "handlers": {
                 "click": "add_notification"
-            },
-            "visible": true
+            }
         },
         "232d749a-5e0c-4802-bbe1-f8cae06db112": {
             "id": "232d749a-5e0c-4802-bbe1-f8cae06db112",
@@ -2201,8 +2093,7 @@
             "parentId": "28a2212b-bc58-4398-8a72-2554e5296490",
             "handlers": {
                 "click": "bad_event_handler"
-            },
-            "visible": true
+            }
         },
         "b92be113-3059-4fc9-b152-b6b2c1f0c969": {
             "id": "b92be113-3059-4fc9-b152-b6b2c1f0c969",
@@ -2216,8 +2107,7 @@
             "parentId": "7730df5b-8731-4123-bacc-898e7347b124",
             "handlers": {
                 "wf-file-change": "file_change_handler"
-            },
-            "visible": true
+            }
         },
         "5c0df6e8-4dd8-4485-a244-8e9e7f4b4675": {
             "id": "5c0df6e8-4dd8-4485-a244-8e9e7f4b4675",
@@ -2231,8 +2121,7 @@
             "parentId": "9c30af6d-4ee5-4782-9169-0f361d67fa76",
             "handlers": {
                 "click": "increment"
-            },
-            "visible": true
+            }
         },
         "15bd7d51-1a8c-4359-a892-253294684e1d": {
             "id": "15bd7d51-1a8c-4359-a892-253294684e1d",
@@ -2243,8 +2132,7 @@
             "isCodeManaged": false,
             "position": 0,
             "parentId": "84378aea-b64c-49a3-9539-f854532279ee",
-            "handlers": {},
-            "visible": true
+            "handlers": {}
         },
         "b3df6ccd-20d4-4761-b8ed-8eabcf95f4be": {
             "id": "b3df6ccd-20d4-4761-b8ed-8eabcf95f4be",
@@ -2255,8 +2143,7 @@
             "isCodeManaged": false,
             "position": 2,
             "parentId": "bb4d0e86-619e-4367-a180-be28ab6059f4",
-            "handlers": {},
-            "visible": true
+            "handlers": {}
         },
         "575542f1-bb18-429c-9d6a-706edc7512be": {
             "id": "575542f1-bb18-429c-9d6a-706edc7512be",
@@ -2267,8 +2154,7 @@
             "isCodeManaged": false,
             "position": 7,
             "parentId": "35986d56-3a1a-4ded-bb5c-b60c2046756f",
-            "handlers": {},
-            "visible": true
+            "handlers": {}
         },
         "aade8074-13be-4e11-a405-a71b8138e6ae": {
             "id": "aade8074-13be-4e11-a405-a71b8138e6ae",
@@ -2277,8 +2163,7 @@
             "isCodeManaged": false,
             "position": 8,
             "parentId": "root",
-            "handlers": {},
-            "visible": true
+            "handlers": {}
         },
         "35f579dd-4205-413a-9c4f-1caf015a598a": {
             "id": "35f579dd-4205-413a-9c4f-1caf015a598a",
@@ -2289,8 +2174,7 @@
             "isCodeManaged": false,
             "position": 1,
             "parentId": "aade8074-13be-4e11-a405-a71b8138e6ae",
-            "handlers": {},
-            "visible": true
+            "handlers": {}
         },
         "4c65268c-b536-4671-8081-c69be3e84161": {
             "id": "4c65268c-b536-4671-8081-c69be3e84161",
@@ -2301,8 +2185,7 @@
             "isCodeManaged": false,
             "position": 2,
             "parentId": "aade8074-13be-4e11-a405-a71b8138e6ae",
-            "handlers": {},
-            "visible": true
+            "handlers": {}
         },
         "436ba1be-1194-4da9-9eb3-a10e9ec019f1": {
             "id": "436ba1be-1194-4da9-9eb3-a10e9ec019f1",
@@ -2313,8 +2196,7 @@
             "isCodeManaged": false,
             "position": 5,
             "parentId": "aade8074-13be-4e11-a405-a71b8138e6ae",
-            "handlers": {},
-            "visible": true
+            "handlers": {}
         },
         "7a89f965-8c1d-473c-a565-947be62faa43": {
             "id": "7a89f965-8c1d-473c-a565-947be62faa43",
@@ -2325,8 +2207,7 @@
             "isCodeManaged": false,
             "position": 45,
             "parentId": "aade8074-13be-4e11-a405-a71b8138e6ae",
-            "handlers": {},
-            "visible": true
+            "handlers": {}
         },
         "e2d3c1be-c43e-4b8a-84a8-90649da0b55e": {
             "id": "e2d3c1be-c43e-4b8a-84a8-90649da0b55e",
@@ -2337,8 +2218,7 @@
             "isCodeManaged": false,
             "position": 6,
             "parentId": "aade8074-13be-4e11-a405-a71b8138e6ae",
-            "handlers": {},
-            "visible": true
+            "handlers": {}
         },
         "ddbedb50-5fbe-43a3-b221-8f7d59c617da": {
             "id": "ddbedb50-5fbe-43a3-b221-8f7d59c617da",
@@ -2349,8 +2229,7 @@
             "isCodeManaged": false,
             "position": 7,
             "parentId": "aade8074-13be-4e11-a405-a71b8138e6ae",
-            "handlers": {},
-            "visible": true
+            "handlers": {}
         },
         "21dda1e9-a972-4f74-972d-d13f5e2941de": {
             "id": "21dda1e9-a972-4f74-972d-d13f5e2941de",
@@ -2361,8 +2240,7 @@
             "isCodeManaged": false,
             "position": 8,
             "parentId": "aade8074-13be-4e11-a405-a71b8138e6ae",
-            "handlers": {},
-            "visible": true
+            "handlers": {}
         },
         "6ee3de2e-7333-469f-9ced-1e08d9231117": {
             "id": "6ee3de2e-7333-469f-9ced-1e08d9231117",
@@ -2373,8 +2251,7 @@
             "isCodeManaged": false,
             "position": 9,
             "parentId": "aade8074-13be-4e11-a405-a71b8138e6ae",
-            "handlers": {},
-            "visible": true
+            "handlers": {}
         },
         "f0659dad-aa37-457e-80fe-02b900f38694": {
             "id": "f0659dad-aa37-457e-80fe-02b900f38694",
@@ -2385,8 +2262,7 @@
             "isCodeManaged": false,
             "position": 10,
             "parentId": "aade8074-13be-4e11-a405-a71b8138e6ae",
-            "handlers": {},
-            "visible": true
+            "handlers": {}
         },
         "380f8a0b-38f3-414a-ab9f-7034629f5e8e": {
             "id": "380f8a0b-38f3-414a-ab9f-7034629f5e8e",
@@ -2397,8 +2273,7 @@
             "isCodeManaged": false,
             "position": 11,
             "parentId": "aade8074-13be-4e11-a405-a71b8138e6ae",
-            "handlers": {},
-            "visible": true
+            "handlers": {}
         },
         "e43471a7-2e58-437f-8daf-489b221b464a": {
             "id": "e43471a7-2e58-437f-8daf-489b221b464a",
@@ -2409,8 +2284,7 @@
             "isCodeManaged": false,
             "position": 12,
             "parentId": "aade8074-13be-4e11-a405-a71b8138e6ae",
-            "handlers": {},
-            "visible": true
+            "handlers": {}
         },
         "a16cf781-114f-4e74-a09a-578a3e2a3fcd": {
             "id": "a16cf781-114f-4e74-a09a-578a3e2a3fcd",
@@ -2421,8 +2295,7 @@
             "isCodeManaged": false,
             "position": 13,
             "parentId": "aade8074-13be-4e11-a405-a71b8138e6ae",
-            "handlers": {},
-            "visible": true
+            "handlers": {}
         },
         "71500567-d3db-4d67-89aa-86ea8fecc4ed": {
             "id": "71500567-d3db-4d67-89aa-86ea8fecc4ed",
@@ -2433,8 +2306,7 @@
             "isCodeManaged": false,
             "position": 14,
             "parentId": "aade8074-13be-4e11-a405-a71b8138e6ae",
-            "handlers": {},
-            "visible": true
+            "handlers": {}
         },
         "0e8d0885-954a-4b95-9cfd-0a8ed2ed8683": {
             "id": "0e8d0885-954a-4b95-9cfd-0a8ed2ed8683",
@@ -2445,8 +2317,7 @@
             "isCodeManaged": false,
             "position": 15,
             "parentId": "aade8074-13be-4e11-a405-a71b8138e6ae",
-            "handlers": {},
-            "visible": true
+            "handlers": {}
         },
         "a039b488-a523-42bc-84d0-f9b3f5185052": {
             "id": "a039b488-a523-42bc-84d0-f9b3f5185052",
@@ -2457,8 +2328,7 @@
             "isCodeManaged": false,
             "position": 16,
             "parentId": "aade8074-13be-4e11-a405-a71b8138e6ae",
-            "handlers": {},
-            "visible": true
+            "handlers": {}
         },
         "8582c124-474c-4da5-80c5-16bca90f4d98": {
             "id": "8582c124-474c-4da5-80c5-16bca90f4d98",
@@ -2469,8 +2339,7 @@
             "isCodeManaged": false,
             "position": 17,
             "parentId": "aade8074-13be-4e11-a405-a71b8138e6ae",
-            "handlers": {},
-            "visible": true
+            "handlers": {}
         },
         "d88e0ff3-4acb-474c-b37c-9cd7ea51fd26": {
             "id": "d88e0ff3-4acb-474c-b37c-9cd7ea51fd26",
@@ -2481,8 +2350,7 @@
             "isCodeManaged": false,
             "position": 18,
             "parentId": "aade8074-13be-4e11-a405-a71b8138e6ae",
-            "handlers": {},
-            "visible": true
+            "handlers": {}
         },
         "de7a750f-6c88-4fbb-8962-93714b6be485": {
             "id": "de7a750f-6c88-4fbb-8962-93714b6be485",
@@ -2493,8 +2361,7 @@
             "isCodeManaged": false,
             "position": 19,
             "parentId": "aade8074-13be-4e11-a405-a71b8138e6ae",
-            "handlers": {},
-            "visible": true
+            "handlers": {}
         },
         "110625bc-bad4-4b44-b20f-51339554d77b": {
             "id": "110625bc-bad4-4b44-b20f-51339554d77b",
@@ -2505,8 +2372,7 @@
             "isCodeManaged": false,
             "position": 20,
             "parentId": "aade8074-13be-4e11-a405-a71b8138e6ae",
-            "handlers": {},
-            "visible": true
+            "handlers": {}
         },
         "eb568d28-e6de-4deb-978b-a10d6cb3c454": {
             "id": "eb568d28-e6de-4deb-978b-a10d6cb3c454",
@@ -2517,8 +2383,7 @@
             "isCodeManaged": false,
             "position": 21,
             "parentId": "aade8074-13be-4e11-a405-a71b8138e6ae",
-            "handlers": {},
-            "visible": true
+            "handlers": {}
         },
         "4a94898f-01b2-4424-8db9-9ed75e788611": {
             "id": "4a94898f-01b2-4424-8db9-9ed75e788611",
@@ -2529,8 +2394,7 @@
             "isCodeManaged": false,
             "position": 22,
             "parentId": "aade8074-13be-4e11-a405-a71b8138e6ae",
-            "handlers": {},
-            "visible": true
+            "handlers": {}
         },
         "f8136c45-f868-4858-928a-f007f9a7dfbe": {
             "id": "f8136c45-f868-4858-928a-f007f9a7dfbe",
@@ -2541,8 +2405,7 @@
             "isCodeManaged": false,
             "position": 23,
             "parentId": "aade8074-13be-4e11-a405-a71b8138e6ae",
-            "handlers": {},
-            "visible": true
+            "handlers": {}
         },
         "1a8ca9b4-afc5-4055-9709-bd27cd7fd7aa": {
             "id": "1a8ca9b4-afc5-4055-9709-bd27cd7fd7aa",
@@ -2553,8 +2416,7 @@
             "isCodeManaged": false,
             "position": 24,
             "parentId": "aade8074-13be-4e11-a405-a71b8138e6ae",
-            "handlers": {},
-            "visible": true
+            "handlers": {}
         },
         "6a308e3d-c5a0-400e-9036-6183aecac714": {
             "id": "6a308e3d-c5a0-400e-9036-6183aecac714",
@@ -2565,8 +2427,7 @@
             "isCodeManaged": false,
             "position": 25,
             "parentId": "aade8074-13be-4e11-a405-a71b8138e6ae",
-            "handlers": {},
-            "visible": true
+            "handlers": {}
         },
         "a71a65fc-8710-40fb-8410-6c676072dab5": {
             "id": "a71a65fc-8710-40fb-8410-6c676072dab5",
@@ -2577,8 +2438,7 @@
             "isCodeManaged": false,
             "position": 26,
             "parentId": "aade8074-13be-4e11-a405-a71b8138e6ae",
-            "handlers": {},
-            "visible": true
+            "handlers": {}
         },
         "ff213e0d-4e33-494d-8765-6738010ea932": {
             "id": "ff213e0d-4e33-494d-8765-6738010ea932",
@@ -2589,8 +2449,7 @@
             "isCodeManaged": false,
             "position": 27,
             "parentId": "aade8074-13be-4e11-a405-a71b8138e6ae",
-            "handlers": {},
-            "visible": true
+            "handlers": {}
         },
         "25f8e06e-5a86-4e5c-afbc-6191c4146bd8": {
             "id": "25f8e06e-5a86-4e5c-afbc-6191c4146bd8",
@@ -2601,8 +2460,7 @@
             "isCodeManaged": false,
             "position": 28,
             "parentId": "aade8074-13be-4e11-a405-a71b8138e6ae",
-            "handlers": {},
-            "visible": true
+            "handlers": {}
         },
         "48cb52fa-bb6a-43e7-aa7a-cbc0b30156b1": {
             "id": "48cb52fa-bb6a-43e7-aa7a-cbc0b30156b1",
@@ -2613,8 +2471,7 @@
             "isCodeManaged": false,
             "position": 29,
             "parentId": "aade8074-13be-4e11-a405-a71b8138e6ae",
-            "handlers": {},
-            "visible": true
+            "handlers": {}
         },
         "7d914a22-e7aa-4340-9b88-36423a5566a3": {
             "id": "7d914a22-e7aa-4340-9b88-36423a5566a3",
@@ -2625,8 +2482,7 @@
             "isCodeManaged": false,
             "position": 30,
             "parentId": "aade8074-13be-4e11-a405-a71b8138e6ae",
-            "handlers": {},
-            "visible": true
+            "handlers": {}
         },
         "bcbae34f-72fd-40b3-8678-d4b986b47cd5": {
             "id": "bcbae34f-72fd-40b3-8678-d4b986b47cd5",
@@ -2637,8 +2493,7 @@
             "isCodeManaged": false,
             "position": 31,
             "parentId": "aade8074-13be-4e11-a405-a71b8138e6ae",
-            "handlers": {},
-            "visible": true
+            "handlers": {}
         },
         "574ec17c-ed69-49a6-b991-29354b8a8a76": {
             "id": "574ec17c-ed69-49a6-b991-29354b8a8a76",
@@ -2649,8 +2504,7 @@
             "isCodeManaged": false,
             "position": 32,
             "parentId": "aade8074-13be-4e11-a405-a71b8138e6ae",
-            "handlers": {},
-            "visible": true
+            "handlers": {}
         },
         "27a21b92-0ed0-4044-8eb4-69979a285e2a": {
             "id": "27a21b92-0ed0-4044-8eb4-69979a285e2a",
@@ -2661,8 +2515,7 @@
             "isCodeManaged": false,
             "position": 33,
             "parentId": "aade8074-13be-4e11-a405-a71b8138e6ae",
-            "handlers": {},
-            "visible": true
+            "handlers": {}
         },
         "c759135c-72ed-43b8-ab91-8bce748dcd58": {
             "id": "c759135c-72ed-43b8-ab91-8bce748dcd58",
@@ -2673,8 +2526,7 @@
             "isCodeManaged": false,
             "position": 35,
             "parentId": "aade8074-13be-4e11-a405-a71b8138e6ae",
-            "handlers": {},
-            "visible": true
+            "handlers": {}
         },
         "210f45a4-c8da-48b2-a2ff-bca06ca7f8a3": {
             "id": "210f45a4-c8da-48b2-a2ff-bca06ca7f8a3",
@@ -2685,8 +2537,7 @@
             "isCodeManaged": false,
             "position": 36,
             "parentId": "aade8074-13be-4e11-a405-a71b8138e6ae",
-            "handlers": {},
-            "visible": true
+            "handlers": {}
         },
         "0bdf78ac-2824-4116-8e14-af2c363c3b45": {
             "id": "0bdf78ac-2824-4116-8e14-af2c363c3b45",
@@ -2697,8 +2548,7 @@
             "isCodeManaged": false,
             "position": 37,
             "parentId": "aade8074-13be-4e11-a405-a71b8138e6ae",
-            "handlers": {},
-            "visible": true
+            "handlers": {}
         },
         "a4a6316d-5fb1-47e2-976b-97265533fc97": {
             "id": "a4a6316d-5fb1-47e2-976b-97265533fc97",
@@ -2709,8 +2559,7 @@
             "isCodeManaged": false,
             "position": 38,
             "parentId": "aade8074-13be-4e11-a405-a71b8138e6ae",
-            "handlers": {},
-            "visible": true
+            "handlers": {}
         },
         "aa8ab024-25a5-4d33-82cf-f20146e9cf28": {
             "id": "aa8ab024-25a5-4d33-82cf-f20146e9cf28",
@@ -2721,8 +2570,7 @@
             "isCodeManaged": false,
             "position": 0,
             "parentId": "4c65268c-b536-4671-8081-c69be3e84161",
-            "handlers": {},
-            "visible": true
+            "handlers": {}
         },
         "1c5b7db1-f8fa-4c7b-9daf-db60045fd16e": {
             "id": "1c5b7db1-f8fa-4c7b-9daf-db60045fd16e",
@@ -2733,8 +2581,7 @@
             "isCodeManaged": false,
             "position": 39,
             "parentId": "aade8074-13be-4e11-a405-a71b8138e6ae",
-            "handlers": {},
-            "visible": true
+            "handlers": {}
         },
         "95690cbc-8d71-4079-936e-c625250fa337": {
             "id": "95690cbc-8d71-4079-936e-c625250fa337",
@@ -2745,8 +2592,7 @@
             "isCodeManaged": false,
             "position": 41,
             "parentId": "aade8074-13be-4e11-a405-a71b8138e6ae",
-            "handlers": {},
-            "visible": true
+            "handlers": {}
         },
         "857dc6fc-d6f7-4dd1-bbc3-6f0dea011d54": {
             "id": "857dc6fc-d6f7-4dd1-bbc3-6f0dea011d54",
@@ -2757,8 +2603,7 @@
             "isCodeManaged": false,
             "position": 42,
             "parentId": "aade8074-13be-4e11-a405-a71b8138e6ae",
-            "handlers": {},
-            "visible": true
+            "handlers": {}
         },
         "aac79665-3341-4784-a105-433baf45dde3": {
             "id": "aac79665-3341-4784-a105-433baf45dde3",
@@ -2769,8 +2614,7 @@
             "isCodeManaged": false,
             "position": 43,
             "parentId": "aade8074-13be-4e11-a405-a71b8138e6ae",
-            "handlers": {},
-            "visible": true
+            "handlers": {}
         },
         "d0f010ac-2048-49f3-91ff-e17e145298ed": {
             "id": "d0f010ac-2048-49f3-91ff-e17e145298ed",
@@ -2781,8 +2625,7 @@
             "isCodeManaged": false,
             "position": 44,
             "parentId": "aade8074-13be-4e11-a405-a71b8138e6ae",
-            "handlers": {},
-            "visible": true
+            "handlers": {}
         },
         "b3aa5f2f-d952-4021-a506-7a4515388580": {
             "id": "b3aa5f2f-d952-4021-a506-7a4515388580",
@@ -2793,8 +2636,7 @@
             "isCodeManaged": false,
             "position": 46,
             "parentId": "aade8074-13be-4e11-a405-a71b8138e6ae",
-            "handlers": {},
-            "visible": true
+            "handlers": {}
         },
         "d07b8382-dca7-4061-b0ca-22edd43e06b1": {
             "id": "d07b8382-dca7-4061-b0ca-22edd43e06b1",
@@ -2805,8 +2647,7 @@
             "isCodeManaged": false,
             "position": 47,
             "parentId": "aade8074-13be-4e11-a405-a71b8138e6ae",
-            "handlers": {},
-            "visible": true
+            "handlers": {}
         },
         "9005a1fc-c560-4ca4-9626-b660031c9c8e": {
             "id": "9005a1fc-c560-4ca4-9626-b660031c9c8e",
@@ -2817,8 +2658,7 @@
             "isCodeManaged": false,
             "position": 48,
             "parentId": "aade8074-13be-4e11-a405-a71b8138e6ae",
-            "handlers": {},
-            "visible": true
+            "handlers": {}
         },
         "440de4a5-b901-4626-a282-3aee83a007c5": {
             "id": "440de4a5-b901-4626-a282-3aee83a007c5",
@@ -2829,8 +2669,7 @@
             "isCodeManaged": false,
             "position": 49,
             "parentId": "aade8074-13be-4e11-a405-a71b8138e6ae",
-            "handlers": {},
-            "visible": true
+            "handlers": {}
         },
         "2e8069dd-0017-42f3-a13b-44e19f132c4f": {
             "id": "2e8069dd-0017-42f3-a13b-44e19f132c4f",
@@ -2841,8 +2680,7 @@
             "isCodeManaged": false,
             "position": 50,
             "parentId": "aade8074-13be-4e11-a405-a71b8138e6ae",
-            "handlers": {},
-            "visible": true
+            "handlers": {}
         },
         "cab6894d-98e1-426f-876c-ca1c81bb7a30": {
             "id": "cab6894d-98e1-426f-876c-ca1c81bb7a30",
@@ -2853,8 +2691,7 @@
             "isCodeManaged": false,
             "position": 51,
             "parentId": "aade8074-13be-4e11-a405-a71b8138e6ae",
-            "handlers": {},
-            "visible": true
+            "handlers": {}
         },
         "8a937df7-c974-455e-b2bc-40445621ef40": {
             "id": "8a937df7-c974-455e-b2bc-40445621ef40",
@@ -2865,8 +2702,7 @@
             "isCodeManaged": false,
             "position": 52,
             "parentId": "aade8074-13be-4e11-a405-a71b8138e6ae",
-            "handlers": {},
-            "visible": true
+            "handlers": {}
         },
         "16d1a673-48f3-47de-a875-1053ffb58e65": {
             "id": "16d1a673-48f3-47de-a875-1053ffb58e65",
@@ -2875,8 +2711,7 @@
             "isCodeManaged": false,
             "position": 58,
             "parentId": "aade8074-13be-4e11-a405-a71b8138e6ae",
-            "handlers": {},
-            "visible": true
+            "handlers": {}
         },
         "58807828-af04-434d-9a0a-6419ced716d7": {
             "id": "58807828-af04-434d-9a0a-6419ced716d7",
@@ -2885,8 +2720,7 @@
             "isCodeManaged": false,
             "position": 53,
             "parentId": "aade8074-13be-4e11-a405-a71b8138e6ae",
-            "handlers": {},
-            "visible": true
+            "handlers": {}
         },
         "23e7a993-1344-4c3a-a65f-87b72b9d72a3": {
             "id": "23e7a993-1344-4c3a-a65f-87b72b9d72a3",
@@ -2895,8 +2729,7 @@
             "isCodeManaged": false,
             "position": 54,
             "parentId": "aade8074-13be-4e11-a405-a71b8138e6ae",
-            "handlers": {},
-            "visible": true
+            "handlers": {}
         },
         "47dd20f8-4477-4a7d-935a-c2615aaa684d": {
             "id": "47dd20f8-4477-4a7d-935a-c2615aaa684d",
@@ -2907,8 +2740,7 @@
             "isCodeManaged": false,
             "position": 55,
             "parentId": "aade8074-13be-4e11-a405-a71b8138e6ae",
-            "handlers": {},
-            "visible": true
+            "handlers": {}
         },
         "f0e45dc7-a752-49cd-8315-79cce246f8db": {
             "id": "f0e45dc7-a752-49cd-8315-79cce246f8db",
@@ -2917,8 +2749,7 @@
             "isCodeManaged": false,
             "position": 56,
             "parentId": "aade8074-13be-4e11-a405-a71b8138e6ae",
-            "handlers": {},
-            "visible": true
+            "handlers": {}
         },
         "2ca1282f-df91-42cd-bb95-9ece65df27ae": {
             "id": "2ca1282f-df91-42cd-bb95-9ece65df27ae",
@@ -2929,8 +2760,7 @@
             "isCodeManaged": false,
             "position": 57,
             "parentId": "aade8074-13be-4e11-a405-a71b8138e6ae",
-            "handlers": {},
-            "visible": true
+            "handlers": {}
         },
         "04da32e4-11c9-400f-ba44-3be79c760ca7": {
             "id": "04da32e4-11c9-400f-ba44-3be79c760ca7",
@@ -2939,8 +2769,7 @@
             "isCodeManaged": false,
             "position": 59,
             "parentId": "aade8074-13be-4e11-a405-a71b8138e6ae",
-            "handlers": {},
-            "visible": true
+            "handlers": {}
         },
         "10e93acf-3b13-40a8-ac8d-8222bfb4d7ca": {
             "id": "10e93acf-3b13-40a8-ac8d-8222bfb4d7ca",
@@ -2949,8 +2778,7 @@
             "isCodeManaged": false,
             "position": 0,
             "parentId": "aade8074-13be-4e11-a405-a71b8138e6ae",
-            "handlers": {},
-            "visible": true
+            "handlers": {}
         },
         "6f0e9441-217c-4b1d-a6cb-2201eeaee406": {
             "id": "6f0e9441-217c-4b1d-a6cb-2201eeaee406",
@@ -2961,8 +2789,7 @@
             "isCodeManaged": false,
             "position": 34,
             "parentId": "aade8074-13be-4e11-a405-a71b8138e6ae",
-            "handlers": {},
-            "visible": true
+            "handlers": {}
         },
         "1faaa29d-96d3-404a-b8f5-7d392cd55177": {
             "id": "1faaa29d-96d3-404a-b8f5-7d392cd55177",
@@ -2973,8 +2800,7 @@
             "isCodeManaged": false,
             "position": 40,
             "parentId": "aade8074-13be-4e11-a405-a71b8138e6ae",
-            "handlers": {},
-            "visible": true
+            "handlers": {}
         },
         "a34cba3c-0eb6-4bc8-bd69-67ee80ee6005": {
             "id": "a34cba3c-0eb6-4bc8-bd69-67ee80ee6005",
@@ -2983,8 +2809,7 @@
             "isCodeManaged": false,
             "position": -2,
             "parentId": "aade8074-13be-4e11-a405-a71b8138e6ae",
-            "handlers": {},
-            "visible": true
+            "handlers": {}
         },
         "2e46c38b-6405-42ad-ad9c-d237a53a7d30": {
             "id": "2e46c38b-6405-42ad-ad9c-d237a53a7d30",
@@ -2998,8 +2823,7 @@
             "parentId": "9c30af6d-4ee5-4782-9169-0f361d67fa76",
             "handlers": {
                 "wf-option-change": "update_cities"
-            },
-            "visible": true
+            }
         },
         "20a4329c-4b14-4743-adaa-698ff0629aed": {
             "id": "20a4329c-4b14-4743-adaa-698ff0629aed",
@@ -3011,8 +2835,7 @@
             "isCodeManaged": false,
             "position": 12,
             "parentId": "9c30af6d-4ee5-4782-9169-0f361d67fa76",
-            "handlers": {},
-            "visible": true
+            "handlers": {}
         },
         "00f02bed-2113-4449-8af3-0f2c76a6bca4": {
             "id": "00f02bed-2113-4449-8af3-0f2c76a6bca4",
@@ -3024,8 +2847,7 @@
             "isCodeManaged": false,
             "position": 4,
             "parentId": "aade8074-13be-4e11-a405-a71b8138e6ae",
-            "handlers": {},
-            "visible": true
+            "handlers": {}
         },
         "2a413447-4d40-4ade-8cf0-639f292ff353": {
             "id": "2a413447-4d40-4ade-8cf0-639f292ff353",
@@ -3037,8 +2859,7 @@
             "isCodeManaged": false,
             "position": 3,
             "parentId": "aade8074-13be-4e11-a405-a71b8138e6ae",
-            "handlers": {},
-            "visible": true
+            "handlers": {}
         },
         "242a8268-10d1-4e2c-96bd-f17ffe9e9b28": {
             "id": "242a8268-10d1-4e2c-96bd-f17ffe9e9b28",
@@ -3050,8 +2871,7 @@
             "isCodeManaged": false,
             "position": 13,
             "parentId": "9c30af6d-4ee5-4782-9169-0f361d67fa76",
-            "handlers": {},
-            "visible": true
+            "handlers": {}
         },
         "c9e4e0d9-771e-47c2-863a-55ce8a98bfa5": {
             "id": "c9e4e0d9-771e-47c2-863a-55ce8a98bfa5",
@@ -3063,7 +2883,6 @@
             "position": 6,
             "parentId": "6010765e-9ac3-4570-84bf-913ae404e03a",
             "handlers": {},
-            "visible": true,
             "binding": {
                 "eventType": "wf-options-change",
                 "stateRef": "b.default_checkbox"
@@ -3080,7 +2899,6 @@
             "position": 4,
             "parentId": "6010765e-9ac3-4570-84bf-913ae404e03a",
             "handlers": {},
-            "visible": true,
             "binding": {
                 "eventType": "wf-option-change",
                 "stateRef": "b.language"
@@ -3097,8 +2915,7 @@
             "parentId": "9c30af6d-4ee5-4782-9169-0f361d67fa76",
             "handlers": {
                 "wf-click": "test_async_handler"
-            },
-            "visible": true
+            }
         },
         "3apnnxxg7pubdeqp": {
             "id": "3apnnxxg7pubdeqp",
@@ -3109,8 +2926,7 @@
             "isCodeManaged": false,
             "position": 8,
             "parentId": "9c30af6d-4ee5-4782-9169-0f361d67fa76",
-            "handlers": {},
-            "visible": true
+            "handlers": {}
         }
     }
-}
\ No newline at end of file
+}

From ee9e6c09bdd2b9c071198dc986ae111d6f0967aa Mon Sep 17 00:00:00 2001
From: Ramiro Medina <64783088+ramedina86@users.noreply.github.com>
Date: Fri, 23 Aug 2024 11:26:56 +0000
Subject: [PATCH 19/34] feat: Feature flags

---
 src/ui/src/builder/BuilderHeader.vue | 21 +++++++++++++++++----
 src/ui/src/core/index.ts             |  7 +++++++
 src/writer/app_runner.py             |  3 ++-
 src/writer/core.py                   |  1 +
 src/writer/serve.py                  |  6 ++++--
 src/writer/ss_types.py               |  2 ++
 tests/backend/test_serve.py          | 16 ++++++++++++++++
 tests/backend/testapp/main.py        |  2 ++
 8 files changed, 51 insertions(+), 7 deletions(-)

diff --git a/src/ui/src/builder/BuilderHeader.vue b/src/ui/src/builder/BuilderHeader.vue
index d2bae0061..34e0a22a1 100644
--- a/src/ui/src/builder/BuilderHeader.vue
+++ b/src/ui/src/builder/BuilderHeader.vue
@@ -82,16 +82,29 @@ const animate = () => {
 };
 
 const syncHealthStatus = () => {
+	let s = "";
+	const featureFlags = wf.getFeatureFlags();
+
 	switch (wf.syncHealth.value) {
 		case "offline":
-			return "Offline. Not syncing.";
+			s += "Offline. Not syncing.";
+			break;
 		case "connected":
-			return "Online. Syncing...";
+			s += "Online. Syncing...";
+			break;
 		case "idle":
-			return "Sync not initialised.";
+			s += "Sync not initialised.";
+			break;
 		case "suspended":
-			return "Sync suspended.";
+			s += "Sync suspended.";
+			break;
+	}
+
+	if (featureFlags.length > 0) {
+		s += ` Feature flags: ${featureFlags.join(", ")}`;
 	}
+
+	return s;
 };
 
 function showStateExplorer() {
diff --git a/src/ui/src/core/index.ts b/src/ui/src/core/index.ts
index 04c434292..e9b0ff906 100644
--- a/src/ui/src/core/index.ts
+++ b/src/ui/src/core/index.ts
@@ -24,6 +24,7 @@ export function generateCore() {
 	let sessionId: string = null;
 	const sessionTimestamp: Ref<number> = ref(null);
 	const mode: Ref<"run" | "edit"> = ref(null);
+	const featureFlags: Ref<string[]> = ref([]);
 	const runCode: Ref<string> = ref(null);
 	const components: Ref<ComponentMap> = ref({});
 	const userFunctions: Ref<UserFunction[]> = ref([]);
@@ -98,6 +99,7 @@ export function generateCore() {
 		collateMail(initData.mail);
 		sessionId = initData.sessionId;
 		sessionTimestamp.value = new Date().getTime();
+		featureFlags.value = initData.featureFlags;
 
 		// Only returned for edit (Builder) mode
 
@@ -567,6 +569,10 @@ export function generateCore() {
 		return userState.value;
 	}
 
+	function getFeatureFlags() {
+		return featureFlags.value;
+	}
+
 	const core = {
 		webSocket,
 		syncHealth,
@@ -594,6 +600,7 @@ export function generateCore() {
 		getSessionTimestamp,
 		getUserState,
 		isChildOf,
+		getFeatureFlags,
 	};
 
 	return core;
diff --git a/src/writer/app_runner.py b/src/writer/app_runner.py
index a6a35738b..f91b7b06e 100644
--- a/src/writer/app_runner.py
+++ b/src/writer/app_runner.py
@@ -150,7 +150,8 @@ def _handle_session_init(self, payload: InitSessionRequestPayload) -> InitSessio
             sessionId=session.session_id,
             mail=session.session_state.mail,
             components=session.session_component_tree.to_dict(),
-            userFunctions=self._get_user_functions()
+            userFunctions=self._get_user_functions(),
+            featureFlags=writer.Config.feature_flags
         )
 
         session.session_state.clear_mail()
diff --git a/src/writer/core.py b/src/writer/core.py
index 7502582ce..cbfe02ac6 100644
--- a/src/writer/core.py
+++ b/src/writer/core.py
@@ -131,6 +131,7 @@ class Config:
     is_mail_enabled_for_log: bool = False
     mode: str = "run"
     logger: Optional[logging.Logger] = None
+    feature_flags = []
 
 @dataclasses.dataclass
 class MutationSubscription:
diff --git a/src/writer/serve.py b/src/writer/serve.py
index f52611344..f22b6dff0 100644
--- a/src/writer/serve.py
+++ b/src/writer/serve.py
@@ -149,7 +149,8 @@ def _get_run_starter_pack(payload: InitSessionResponsePayload):
             mail=payload.mail,
             components=payload.components,
             userFunctions=payload.userFunctions,
-            extensionPaths=cached_extension_paths
+            extensionPaths=cached_extension_paths,
+            featureFlags=payload.featureFlags
         )
 
     def _get_edit_starter_pack(payload: InitSessionResponsePayload):
@@ -163,7 +164,8 @@ def _get_edit_starter_pack(payload: InitSessionResponsePayload):
             components=payload.components,
             userFunctions=payload.userFunctions,
             runCode=run_code,
-            extensionPaths=cached_extension_paths
+            extensionPaths=cached_extension_paths,
+            featureFlags=payload.featureFlags
         )
 
     @app.get("/api/health")
diff --git a/src/writer/ss_types.py b/src/writer/ss_types.py
index c7e65d9e8..442a0f3d1 100644
--- a/src/writer/ss_types.py
+++ b/src/writer/ss_types.py
@@ -43,6 +43,7 @@ class InitResponseBody(BaseModel):
     components: Dict
     userFunctions: List[Dict]
     extensionPaths: List
+    featureFlags: List[str]
 
 
 class InitResponseBodyRun(InitResponseBody):
@@ -129,6 +130,7 @@ class InitSessionResponsePayload(BaseModel):
     mail: List
     userFunctions: List[Dict]
     components: Dict
+    featureFlags: List[str]
 
 
 class InitSessionResponse(AppProcessServerResponse):
diff --git a/tests/backend/test_serve.py b/tests/backend/test_serve.py
index f5b0514a7..c617de37e 100644
--- a/tests/backend/test_serve.py
+++ b/tests/backend/test_serve.py
@@ -169,3 +169,19 @@ def test_server_setup_hook_is_ignored_when_its_disabled(self):
         with fastapi.testclient.TestClient(asgi_app) as client:
             res = client.get("/probes/healthcheck")
             assert res.status_code == 404
+
+    def test_feature_flags(self):
+        """
+        This test verifies that feature flags are carried to the frontend.
+
+        """
+        asgi_app: fastapi.FastAPI = writer.serve.get_asgi_app(
+            test_app_dir, "run")
+        with fastapi.testclient.TestClient(asgi_app) as client:
+            res = client.post("/api/init", json={
+                "proposedSessionId": None
+            }, headers={
+                "Content-Type": "application/json"
+            })
+            feature_flags = res.json().get("featureFlags")
+            assert feature_flags == ["flag_one", "flag_two"]
\ No newline at end of file
diff --git a/tests/backend/testapp/main.py b/tests/backend/testapp/main.py
index 53df2ac09..7742d84b9 100644
--- a/tests/backend/testapp/main.py
+++ b/tests/backend/testapp/main.py
@@ -9,6 +9,8 @@
 import writer as wf
 import writer.core
 
+writer.Config.feature_flags.append("flag_one")
+writer.Config.feature_flags.append("flag_two")
 
 @wf.middleware()
 def my_middleware(state):

From 5d55479e1e6af4452e5559cca270026a87d9ca1e Mon Sep 17 00:00:00 2001
From: Ramiro Medina <64783088+ramedina86@users.noreply.github.com>
Date: Fri, 23 Aug 2024 11:35:32 +0000
Subject: [PATCH 20/34] fix: Type

---
 src/writer/core.py | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/writer/core.py b/src/writer/core.py
index cbfe02ac6..ef58c63a9 100644
--- a/src/writer/core.py
+++ b/src/writer/core.py
@@ -131,7 +131,7 @@ class Config:
     is_mail_enabled_for_log: bool = False
     mode: str = "run"
     logger: Optional[logging.Logger] = None
-    feature_flags = []
+    feature_flags: list[str] = []
 
 @dataclasses.dataclass
 class MutationSubscription:

From 0ae795abda80446ab32e57da334d67a9119ffe6d Mon Sep 17 00:00:00 2001
From: Ramiro Medina <64783088+ramedina86@users.noreply.github.com>
Date: Fri, 23 Aug 2024 18:02:56 +0200
Subject: [PATCH 21/34] Update src/ui/src/core/index.ts

Co-authored-by: Alexandre Rousseau <alexandre@rsseau.fr>
---
 src/ui/src/core/index.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/ui/src/core/index.ts b/src/ui/src/core/index.ts
index e9b0ff906..1ad28604b 100644
--- a/src/ui/src/core/index.ts
+++ b/src/ui/src/core/index.ts
@@ -24,7 +24,7 @@ export function generateCore() {
 	let sessionId: string = null;
 	const sessionTimestamp: Ref<number> = ref(null);
 	const mode: Ref<"run" | "edit"> = ref(null);
-	const featureFlags: Ref<string[]> = ref([]);
+	const featureFlags = shallowRef<string[]>([]);
 	const runCode: Ref<string> = ref(null);
 	const components: Ref<ComponentMap> = ref({});
 	const userFunctions: Ref<UserFunction[]> = ref([]);

From dda21c344a88d3b8e23ae95bf20cdc0a425aaa49 Mon Sep 17 00:00:00 2001
From: Ramiro Medina <64783088+ramedina86@users.noreply.github.com>
Date: Fri, 23 Aug 2024 18:03:33 +0200
Subject: [PATCH 22/34] Update src/ui/src/core/index.ts

Co-authored-by: Alexandre Rousseau <alexandre@rsseau.fr>
---
 src/ui/src/core/index.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/ui/src/core/index.ts b/src/ui/src/core/index.ts
index 1ad28604b..e6ec1a08d 100644
--- a/src/ui/src/core/index.ts
+++ b/src/ui/src/core/index.ts
@@ -600,7 +600,7 @@ export function generateCore() {
 		getSessionTimestamp,
 		getUserState,
 		isChildOf,
-		getFeatureFlags,
+		featureFlags: readonly(featureFlags),
 	};
 
 	return core;

From a1d7c501cbd00e1e78a31a2a8ea25ec2411d135b Mon Sep 17 00:00:00 2001
From: Ramiro Medina <64783088+ramedina86@users.noreply.github.com>
Date: Fri, 23 Aug 2024 16:15:08 +0000
Subject: [PATCH 23/34] chore: Changes to support Alex's suggestions

---
 apps/hello/main.py                   | 3 +++
 src/ui/src/builder/BuilderHeader.vue | 6 ++----
 src/ui/src/core/index.ts             | 6 +-----
 3 files changed, 6 insertions(+), 9 deletions(-)

diff --git a/apps/hello/main.py b/apps/hello/main.py
index fb11ecac0..72c40dac2 100644
--- a/apps/hello/main.py
+++ b/apps/hello/main.py
@@ -8,6 +8,9 @@
 
 # EVENT HANDLERS
 
+wf.Config.feature_flags.append("dog")
+wf.Config.feature_flags.append("duck")
+
 def handle_timer_tick(state: WriterState):
     df = state["random_df"]
     for i in range(5):
diff --git a/src/ui/src/builder/BuilderHeader.vue b/src/ui/src/builder/BuilderHeader.vue
index 34e0a22a1..8e3f90e4c 100644
--- a/src/ui/src/builder/BuilderHeader.vue
+++ b/src/ui/src/builder/BuilderHeader.vue
@@ -83,8 +83,6 @@ const animate = () => {
 
 const syncHealthStatus = () => {
 	let s = "";
-	const featureFlags = wf.getFeatureFlags();
-
 	switch (wf.syncHealth.value) {
 		case "offline":
 			s += "Offline. Not syncing.";
@@ -100,8 +98,8 @@ const syncHealthStatus = () => {
 			break;
 	}
 
-	if (featureFlags.length > 0) {
-		s += ` Feature flags: ${featureFlags.join(", ")}`;
+	if (wf.featureFlags.value.length > 0) {
+		s += ` Feature flags: ${wf.featureFlags.value.join(", ")}`;
 	}
 
 	return s;
diff --git a/src/ui/src/core/index.ts b/src/ui/src/core/index.ts
index e6ec1a08d..e9c54384a 100644
--- a/src/ui/src/core/index.ts
+++ b/src/ui/src/core/index.ts
@@ -1,6 +1,6 @@
 /* eslint-disable @typescript-eslint/ban-types */
 /* eslint-disable @typescript-eslint/no-explicit-any */
-import { ref, Ref } from "vue";
+import { readonly, ref, Ref, shallowRef } from "vue";
 import {
 	Component,
 	ComponentMap,
@@ -569,10 +569,6 @@ export function generateCore() {
 		return userState.value;
 	}
 
-	function getFeatureFlags() {
-		return featureFlags.value;
-	}
-
 	const core = {
 		webSocket,
 		syncHealth,

From 35bd4a91a6c195a4c495ae3396c0157f5b499c89 Mon Sep 17 00:00:00 2001
From: Ramiro Medina <64783088+ramedina86@users.noreply.github.com>
Date: Fri, 23 Aug 2024 16:23:31 +0000
Subject: [PATCH 24/34] fix: Remove test code

---
 apps/hello/main.py | 3 ---
 1 file changed, 3 deletions(-)

diff --git a/apps/hello/main.py b/apps/hello/main.py
index 72c40dac2..fb11ecac0 100644
--- a/apps/hello/main.py
+++ b/apps/hello/main.py
@@ -8,9 +8,6 @@
 
 # EVENT HANDLERS
 
-wf.Config.feature_flags.append("dog")
-wf.Config.feature_flags.append("duck")
-
 def handle_timer_tick(state: WriterState):
     df = state["random_df"]
     for i in range(5):

From 249db8d0677d3ec782a991f44c3fd9ce08c6c579 Mon Sep 17 00:00:00 2001
From: Dmitry Mozolevsky <dmitrymozolevsky@Dmitrys-MacBook-Air.local>
Date: Sun, 25 Aug 2024 19:33:30 -0700
Subject: [PATCH 25/34] fix: getting the BaseControlBar import to AnnotatedText
 component

---
 src/ui/src/core_components/content/CoreAnnotatedText.vue | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/ui/src/core_components/content/CoreAnnotatedText.vue b/src/ui/src/core_components/content/CoreAnnotatedText.vue
index 6223fff75..64e2808dd 100644
--- a/src/ui/src/core_components/content/CoreAnnotatedText.vue
+++ b/src/ui/src/core_components/content/CoreAnnotatedText.vue
@@ -29,6 +29,7 @@
 
 <script lang="ts">
 import { cssClasses, primaryTextColor } from "../../renderer/sharedStyleFields";
+import BaseControlBar from "../base/BaseControlBar.vue";
 export default {
 	writer: {
 		name: "Annotated text",

From 4836c3643899e0e707d2f10b059970d6a976e4a4 Mon Sep 17 00:00:00 2001
From: Ramiro Medina <64783088+ramedina86@users.noreply.github.com>
Date: Mon, 26 Aug 2024 20:21:32 +0000
Subject: [PATCH 26/34] feat: Abstract components

---
 src/ui/src/core/index.ts       | 13 ++++++++++++
 src/ui/src/core/templateMap.ts | 38 +++++++++++++++++++++++++++++++---
 src/ui/src/writerTypes.ts      | 13 ++++++++----
 src/writer/abstract.py         | 15 ++++++++++++++
 src/writer/serve.py            |  8 ++++---
 src/writer/ss_types.py         |  6 ++++++
 tests/backend/test_serve.py    | 30 +++++++++++++++++++++++++++
 7 files changed, 113 insertions(+), 10 deletions(-)
 create mode 100644 src/writer/abstract.py

diff --git a/src/ui/src/core/index.ts b/src/ui/src/core/index.ts
index 04c434292..6bf7e52a0 100644
--- a/src/ui/src/core/index.ts
+++ b/src/ui/src/core/index.ts
@@ -2,6 +2,7 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 import { ref, Ref } from "vue";
 import {
+	AbstractTemplate,
 	Component,
 	ComponentMap,
 	InstancePath,
@@ -11,6 +12,7 @@ import {
 import {
 	getSupportedComponentTypes,
 	getComponentDefinition,
+	registerAbstractComponentTemplate,
 } from "./templateMap";
 import * as typeHierarchy from "./typeHierarchy";
 import { auditAndFixComponents } from "./auditAndFix";
@@ -98,6 +100,7 @@ export function generateCore() {
 		collateMail(initData.mail);
 		sessionId = initData.sessionId;
 		sessionTimestamp.value = new Date().getTime();
+		loadAbstractTemplates(initData.abstractTemplates);
 
 		// Only returned for edit (Builder) mode
 
@@ -112,6 +115,16 @@ export function generateCore() {
 		await sendComponentUpdate();
 	}
 
+	function loadAbstractTemplates(
+		abstractTemplates: Record<string, AbstractTemplate>,
+	) {
+		Object.entries(abstractTemplates ?? {}).forEach(
+			([type, abstractTemplate]) => {
+				registerAbstractComponentTemplate(type, abstractTemplate);
+			},
+		);
+	}
+
 	function getSessionTimestamp() {
 		return sessionTimestamp.value;
 	}
diff --git a/src/ui/src/core/templateMap.ts b/src/ui/src/core/templateMap.ts
index 23b7d91ad..2511cc4ba 100644
--- a/src/ui/src/core/templateMap.ts
+++ b/src/ui/src/core/templateMap.ts
@@ -63,7 +63,7 @@ import CoreRoot from "../core_components/root/CoreRoot.vue";
 
 import CoreMapbox from "../core_components/embed/CoreMapbox.vue";
 
-import { WriterComponentDefinition } from "../writerTypes";
+import { AbstractTemplate, WriterComponentDefinition } from "../writerTypes";
 import { h } from "vue";
 
 const templateMap = {
@@ -124,6 +124,10 @@ const templateMap = {
 	jsonviewer: CoreJsonViewer,
 };
 
+const abstractTemplateMap: Record<string, AbstractTemplate> = {};
+
+templateMap["sectiondiff"] = CoreSection;
+
 if (WRITER_LIVE_CCT === "yes") {
 	/*
 	Assigns the components in custom_components to the template map,
@@ -163,8 +167,29 @@ function fallbackTemplate(type: string) {
 	};
 }
 
+function getMergedAbstractTemplate(type: string) {
+	const template = abstractTemplateMap[type];
+	if (!template) return;
+	const baseType = template.baseType;
+	return {
+		...templateMap[baseType],
+		writer: {
+			...templateMap[baseType].writer,
+			...abstractTemplateMap[type].writer,
+			fields: {
+				...templateMap[baseType].writer?.fields,
+				...abstractTemplateMap[type].writer?.fields,
+			},
+		},
+	};
+}
+
 export function getTemplate(type: string) {
-	return templateMap[type] ?? fallbackTemplate(type);
+	return (
+		getMergedAbstractTemplate(type) ??
+		templateMap[type] ??
+		fallbackTemplate(type)
+	);
 }
 
 export function getComponentDefinition(
@@ -174,11 +199,18 @@ export function getComponentDefinition(
 }
 
 export function getSupportedComponentTypes() {
-	return Object.keys(templateMap);
+	return [...Object.keys(templateMap), ...Object.keys(abstractTemplateMap)];
 }
 
 export function registerComponentTemplate(type: string, vueComponent: any) {
 	templateMap[type] = vueComponent;
 }
 
+export function registerAbstractComponentTemplate(
+	type: string,
+	abstractTemplate: AbstractTemplate,
+) {
+	abstractTemplateMap[type] = abstractTemplate;
+}
+
 export default templateMap;
diff --git a/src/ui/src/writerTypes.ts b/src/ui/src/writerTypes.ts
index a5c772b1e..c63c35586 100644
--- a/src/ui/src/writerTypes.ts
+++ b/src/ui/src/writerTypes.ts
@@ -1,9 +1,9 @@
-import { generateCore } from "./core"
-import { generateBuilderManager } from "./builder/builderManager"
+import { generateCore } from "./core";
+import { generateBuilderManager } from "./builder/builderManager";
 
-export type Core = ReturnType<typeof generateCore>
+export type Core = ReturnType<typeof generateCore>;
 
-type ComponentId = string
+type ComponentId = string;
 
 /**
  * Basic building block of applications.
@@ -131,3 +131,8 @@ export type ComponentMap = Record<Component["id"], Component>;
 export type MailItem = { type: string; payload: Record<string, string> };
 
 export type UserFunction = { name: string; args: string[] };
+
+export type AbstractTemplate = {
+	baseType: string;
+	writer: WriterComponentDefinition;
+};
diff --git a/src/writer/abstract.py b/src/writer/abstract.py
new file mode 100644
index 000000000..4177d39df
--- /dev/null
+++ b/src/writer/abstract.py
@@ -0,0 +1,15 @@
+"""
+
+Abstract templates.
+
+They're used to register new component templates, based on existing frontend templates and a backend-provided component definition. 
+
+"""
+
+from typing import Dict
+from writer.ss_types import AbstractTemplate
+
+templates:Dict[str, AbstractTemplate]  = {}
+
+def register_abstract_template(type: str, abstract_template: AbstractTemplate):
+    templates[type] = abstract_template
\ No newline at end of file
diff --git a/src/writer/serve.py b/src/writer/serve.py
index f52611344..b8db230cd 100644
--- a/src/writer/serve.py
+++ b/src/writer/serve.py
@@ -20,7 +20,7 @@
 from pydantic import ValidationError
 from starlette.websockets import WebSocket, WebSocketDisconnect, WebSocketState
 
-from writer import VERSION
+from writer import VERSION, abstract
 from writer.app_runner import AppRunner
 from writer.ss_types import (
     AppProcessServerResponse,
@@ -149,7 +149,8 @@ def _get_run_starter_pack(payload: InitSessionResponsePayload):
             mail=payload.mail,
             components=payload.components,
             userFunctions=payload.userFunctions,
-            extensionPaths=cached_extension_paths
+            extensionPaths=cached_extension_paths,
+            abstractTemplates=abstract.templates
         )
 
     def _get_edit_starter_pack(payload: InitSessionResponsePayload):
@@ -163,7 +164,8 @@ def _get_edit_starter_pack(payload: InitSessionResponsePayload):
             components=payload.components,
             userFunctions=payload.userFunctions,
             runCode=run_code,
-            extensionPaths=cached_extension_paths
+            extensionPaths=cached_extension_paths,
+            abstractTemplates=abstract.templates
         )
 
     @app.get("/api/health")
diff --git a/src/writer/ss_types.py b/src/writer/ss_types.py
index c7e65d9e8..8a20d5e22 100644
--- a/src/writer/ss_types.py
+++ b/src/writer/ss_types.py
@@ -28,6 +28,11 @@ def read(self) -> Any:
                       "event", "codeUpdate", "codeSave", "checkSession",
                       "keepAlive", "stateEnquiry", "setUserinfo", "stateContent"]
 
+
+class AbstractTemplate(BaseModel):
+    baseType: str
+    writer: Dict
+
 # Web server models
 
 
@@ -43,6 +48,7 @@ class InitResponseBody(BaseModel):
     components: Dict
     userFunctions: List[Dict]
     extensionPaths: List
+    abstractTemplates: Dict[str, AbstractTemplate]
 
 
 class InitResponseBodyRun(InitResponseBody):
diff --git a/tests/backend/test_serve.py b/tests/backend/test_serve.py
index f5b0514a7..f8534611c 100644
--- a/tests/backend/test_serve.py
+++ b/tests/backend/test_serve.py
@@ -3,6 +3,7 @@
 import fastapi
 import fastapi.testclient
 import pytest
+import writer.abstract
 import writer.serve
 from fastapi import FastAPI
 
@@ -169,3 +170,32 @@ def test_server_setup_hook_is_ignored_when_its_disabled(self):
         with fastapi.testclient.TestClient(asgi_app) as client:
             res = client.get("/probes/healthcheck")
             assert res.status_code == 404
+
+    def test_abstract_components(self):
+        writer.abstract.register_abstract_template("sectiona", {
+            "baseType": "section",
+            "writer": {
+                "name": "Section A"
+            }
+        })
+        writer.abstract.register_abstract_template("columnb", {
+            "baseType": "column",
+            "writer": {
+                "description": "Cloned Column component"
+            }
+        })
+
+        asgi_app: fastapi.FastAPI = writer.serve.get_asgi_app(
+            test_app_dir, "run")
+
+        with fastapi.testclient.TestClient(asgi_app) as client:
+            res = client.post("/api/init", json={
+                "proposedSessionId": None
+            }, headers={
+                "Content-Type": "application/json"
+            })
+            abstract_templates = res.json().get("abstractTemplates")
+            section_a = abstract_templates.get("sectiona")
+            column_b = abstract_templates.get("columnb")
+            assert section_a.get("writer").get("name") == "Section A"
+            assert column_b.get("writer").get("description") == "Cloned Column component"

From 14735cdfa017d97950ff4414ba3ef0c2d7a9892f Mon Sep 17 00:00:00 2001
From: Ramiro Medina <64783088+ramedina86@users.noreply.github.com>
Date: Mon, 26 Aug 2024 20:27:38 +0000
Subject: [PATCH 27/34] fix: Test

---
 tests/backend/test_serve.py | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/tests/backend/test_serve.py b/tests/backend/test_serve.py
index f9ed53ad3..0e366ac41 100644
--- a/tests/backend/test_serve.py
+++ b/tests/backend/test_serve.py
@@ -187,6 +187,12 @@ def test_abstract_components(self):
 
         asgi_app: fastapi.FastAPI = writer.serve.get_asgi_app(
             test_app_dir, "run")
+        with fastapi.testclient.TestClient(asgi_app) as client:
+            res = client.post("/api/init", json={
+                "proposedSessionId": None
+            }, headers={
+                "Content-Type": "application/json"
+            })
         abstract_templates = res.json().get("abstractTemplates")
         section_a = abstract_templates.get("sectiona")
         column_b = abstract_templates.get("columnb")

From d3416ce1a3a39726edaa781400a90b839dc53ca9 Mon Sep 17 00:00:00 2001
From: Ramiro Medina <64783088+ramedina86@users.noreply.github.com>
Date: Mon, 26 Aug 2024 20:31:55 +0000
Subject: [PATCH 28/34] fix: Missing commas

---
 src/writer/serve.py | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/writer/serve.py b/src/writer/serve.py
index d98cae3a7..c65012522 100644
--- a/src/writer/serve.py
+++ b/src/writer/serve.py
@@ -150,7 +150,7 @@ def _get_run_starter_pack(payload: InitSessionResponsePayload):
             components=payload.components,
             userFunctions=payload.userFunctions,
             extensionPaths=cached_extension_paths,
-            featureFlags=payload.featureFlags
+            featureFlags=payload.featureFlags,
             abstractTemplates=abstract.templates
         )
 
@@ -166,7 +166,7 @@ def _get_edit_starter_pack(payload: InitSessionResponsePayload):
             userFunctions=payload.userFunctions,
             runCode=run_code,
             extensionPaths=cached_extension_paths,
-            featureFlags=payload.featureFlags
+            featureFlags=payload.featureFlags,
             abstractTemplates=abstract.templates
         )
 

From 18dbad91cb470edb7b8f820613c0f95ff2c6f2f9 Mon Sep 17 00:00:00 2001
From: Ramiro Medina <64783088+ramedina86@users.noreply.github.com>
Date: Mon, 26 Aug 2024 20:32:01 +0000
Subject: [PATCH 29/34] fix: Tests

---
 tests/backend/test_serve.py | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/tests/backend/test_serve.py b/tests/backend/test_serve.py
index 0e366ac41..901813bb1 100644
--- a/tests/backend/test_serve.py
+++ b/tests/backend/test_serve.py
@@ -193,11 +193,11 @@ def test_abstract_components(self):
             }, headers={
                 "Content-Type": "application/json"
             })
-        abstract_templates = res.json().get("abstractTemplates")
-        section_a = abstract_templates.get("sectiona")
-        column_b = abstract_templates.get("columnb")
-        assert section_a.get("writer").get("name") == "Section A"
-        assert column_b.get("writer").get("description") == "Cloned Column component"
+            abstract_templates = res.json().get("abstractTemplates")
+            section_a = abstract_templates.get("sectiona")
+            column_b = abstract_templates.get("columnb")
+            assert section_a.get("writer").get("name") == "Section A"
+            assert column_b.get("writer").get("description") == "Cloned Column component"
           
     def test_feature_flags(self):
         """
@@ -212,5 +212,5 @@ def test_feature_flags(self):
             }, headers={
                 "Content-Type": "application/json"
             })
-        feature_flags = res.json().get("featureFlags")
-        assert feature_flags == ["flag_one", "flag_two"]
\ No newline at end of file
+            feature_flags = res.json().get("featureFlags")
+            assert feature_flags == ["flag_one", "flag_two"]
\ No newline at end of file

From 26165f5bcc9634cb774e6774ac6d6216744c07c9 Mon Sep 17 00:00:00 2001
From: Ramiro Medina <64783088+ramedina86@users.noreply.github.com>
Date: Mon, 26 Aug 2024 20:32:57 +0000
Subject: [PATCH 30/34] fix: Remove test code

---
 src/ui/src/core/templateMap.ts | 2 --
 1 file changed, 2 deletions(-)

diff --git a/src/ui/src/core/templateMap.ts b/src/ui/src/core/templateMap.ts
index 2511cc4ba..dc1f2c04b 100644
--- a/src/ui/src/core/templateMap.ts
+++ b/src/ui/src/core/templateMap.ts
@@ -126,8 +126,6 @@ const templateMap = {
 
 const abstractTemplateMap: Record<string, AbstractTemplate> = {};
 
-templateMap["sectiondiff"] = CoreSection;
-
 if (WRITER_LIVE_CCT === "yes") {
 	/*
 	Assigns the components in custom_components to the template map,

From c37823b7b5738eefa1a38d92d8b68d14d9396766 Mon Sep 17 00:00:00 2001
From: Ramiro Medina <64783088+ramedina86@users.noreply.github.com>
Date: Mon, 26 Aug 2024 20:37:04 +0000
Subject: [PATCH 31/34] fix: Linter

---
 src/writer/abstract.py | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/writer/abstract.py b/src/writer/abstract.py
index 4177d39df..b0ce57f98 100644
--- a/src/writer/abstract.py
+++ b/src/writer/abstract.py
@@ -7,6 +7,7 @@
 """
 
 from typing import Dict
+
 from writer.ss_types import AbstractTemplate
 
 templates:Dict[str, AbstractTemplate]  = {}

From 755b1c1d1f6603fb93e615697d9652cdccabb022 Mon Sep 17 00:00:00 2001
From: Fabien Arcellier <fabien.arcellier@gmail.com>
Date: Mon, 26 Aug 2024 16:43:13 +0200
Subject: [PATCH 32/34] fix: custom stylesheet and js are not loaded after OIDC
 authentication

* fix: restore initial mails when getting session into init
---
 src/writer/app_runner.py |  3 ++-
 src/writer/auth.py       |  6 +++---
 src/writer/core.py       | 13 ++++++++-----
 3 files changed, 13 insertions(+), 9 deletions(-)

diff --git a/src/writer/app_runner.py b/src/writer/app_runner.py
index f91b7b06e..35d580763 100644
--- a/src/writer/app_runner.py
+++ b/src/writer/app_runner.py
@@ -132,9 +132,10 @@ def _handle_session_init(self, payload: InitSessionRequestPayload) -> InitSessio
 
         import writer
 
-        session = writer.session_manager.get_session(payload.proposedSessionId)
+        session = writer.session_manager.get_session(payload.proposedSessionId, restore_intial_mails=True)
         if session is None:
             session = writer.session_manager.get_new_session(payload.cookies, payload.headers, payload.proposedSessionId)
+
         if session is None:
             raise MessageHandlingException("Session rejected.")
 
diff --git a/src/writer/auth.py b/src/writer/auth.py
index 646208543..28f6ba6da 100644
--- a/src/writer/auth.py
+++ b/src/writer/auth.py
@@ -188,14 +188,14 @@ def register(self,
         redirect_url = urljoin(self.host_url, self.callback_authorize)
         host_url_path = urlpath(self.host_url)
         callback_authorize_path = urljoin(host_url_path, self.callback_authorize)
-        asset_assets_path = urljoin(host_url_path, "assets")
+        static_assets_path = urljoin(host_url_path, "static")
 
         logger.debug(f"[auth] oidc - url redirect: {redirect_url}")
         logger.debug(f"[auth] oidc - endpoint authorize: {self.url_authorize}")
         logger.debug(f"[auth] oidc - endpoint token: {self.url_oauthtoken}")
         logger.debug(f"[auth] oidc - path: {host_url_path}")
         logger.debug(f"[auth] oidc - authorize path: {callback_authorize_path}")
-        logger.debug(f"[auth] oidc - asset path: {asset_assets_path}")
+        logger.debug(f"[auth] oidc - static asset path: {static_assets_path}")
         self.authlib = OAuth2Session(
             client_id=self.client_id,
             client_secret=self.client_secret,
@@ -211,7 +211,7 @@ def register(self,
         async def oidc_middleware(request: Request, call_next):
             session = request.cookies.get('session')
 
-            if session is not None or request.url.path in [callback_authorize_path] or request.url.path.startswith(asset_assets_path):
+            if session is not None or request.url.path in [callback_authorize_path] or request.url.path.startswith(static_assets_path):
                 response: Response = await call_next(request)
                 return response
             else:
diff --git a/src/writer/core.py b/src/writer/core.py
index ef58c63a9..8dffa16cb 100644
--- a/src/writer/core.py
+++ b/src/writer/core.py
@@ -1622,16 +1622,19 @@ def get_new_session(self, cookies: Optional[Dict] = None, headers: Optional[Dict
             new_id = self._generate_session_id()
         else:
             new_id = proposed_session_id
-        new_session = WriterSession(
-            new_id, cookies, headers)
+        new_session = WriterSession(new_id, cookies, headers)
         self.sessions[new_id] = new_session
         return new_session
 
-    def get_session(self, session_id: Optional[str]) -> Optional[WriterSession]:
+    def get_session(self, session_id: Optional[str], restore_intial_mails: bool = False) -> Optional[WriterSession]:
         if session_id is None:
             return None
 
-        return self.sessions.get(session_id)
+        session = self.sessions.get(session_id)
+        if session is not None and restore_intial_mails is True:
+            session.session_state.mail = copy.copy(initial_state.mail)
+
+        return session
 
     def _generate_session_id(self) -> str:
         return secrets.token_hex(SessionManager.TOKEN_SIZE_BYTES)
@@ -2552,4 +2555,4 @@ def _split_record_as_pandas_record_and_index(param: dict, index_columns: list) -
 state_serialiser = StateSerialiser()
 initial_state = WriterState()
 base_component_tree = core_ui.build_base_component_tree()
-session_manager = SessionManager()
+session_manager: SessionManager = SessionManager()

From 4ba4370ba2743c6a366106122356ef0218086cfd Mon Sep 17 00:00:00 2001
From: Fabien Arcellier <fabien.arcellier@gmail.com>
Date: Tue, 27 Aug 2024 08:03:01 +0200
Subject: [PATCH 33/34] fix: custom stylesheet and js are not loaded after OIDC
 authentication

---
 src/writer/app_runner.py | 2 +-
 src/writer/core.py       | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/writer/app_runner.py b/src/writer/app_runner.py
index 35d580763..b52899740 100644
--- a/src/writer/app_runner.py
+++ b/src/writer/app_runner.py
@@ -132,7 +132,7 @@ def _handle_session_init(self, payload: InitSessionRequestPayload) -> InitSessio
 
         import writer
 
-        session = writer.session_manager.get_session(payload.proposedSessionId, restore_intial_mails=True)
+        session = writer.session_manager.get_session(payload.proposedSessionId, restore_initial_mail=True)
         if session is None:
             session = writer.session_manager.get_new_session(payload.cookies, payload.headers, payload.proposedSessionId)
 
diff --git a/src/writer/core.py b/src/writer/core.py
index 8dffa16cb..e0c060342 100644
--- a/src/writer/core.py
+++ b/src/writer/core.py
@@ -1626,12 +1626,12 @@ def get_new_session(self, cookies: Optional[Dict] = None, headers: Optional[Dict
         self.sessions[new_id] = new_session
         return new_session
 
-    def get_session(self, session_id: Optional[str], restore_intial_mails: bool = False) -> Optional[WriterSession]:
+    def get_session(self, session_id: Optional[str], restore_initial_mail: bool = False) -> Optional[WriterSession]:
         if session_id is None:
             return None
 
         session = self.sessions.get(session_id)
-        if session is not None and restore_intial_mails is True:
+        if session is not None and restore_initial_mail is True:
             session.session_state.mail = copy.copy(initial_state.mail)
 
         return session

From 1716b1f15279ad4f2b966006158528ba44dd52c8 Mon Sep 17 00:00:00 2001
From: Ramiro Medina <64783088+ramedina86@users.noreply.github.com>
Date: Tue, 27 Aug 2024 10:34:37 +0000
Subject: [PATCH 34/34] chore: Version bump

---
 pyproject.toml | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/pyproject.toml b/pyproject.toml
index 44fc02097..fdc8dd5be 100644
--- a/pyproject.toml
+++ b/pyproject.toml
@@ -4,7 +4,7 @@ build-backend = "poetry.core.masonry.api"
 
 [tool.poetry]
 name = "writer"
-version = "0.7.0"
+version = "0.7.1"
 description = "An open-source, Python framework for building feature-rich apps that are fully integrated with the Writer platform."
 authors = ["Writer, Inc."]
 readme = "README.md"