diff --git a/editions/tw5.com/tiddlers/flexible-form.tid b/editions/tw5.com/tiddlers/flexible-form.tid
new file mode 100644
index 000000000..d7d317001
--- /dev/null
+++ b/editions/tw5.com/tiddlers/flexible-form.tid
@@ -0,0 +1,209 @@
+modified: 20240312123643000
+title: /core/template/flexible-form
+
+\parameters (sort, type)
+
+\whitespace trim
+
+\define FI-VAR-FILTER-OPTIONS() fn var proc macro widget
+
+\define FI-FOLDED() $:/temp/varFolded
+\define FI-SEARCH() $:/temp/varSearch
+\define FI-EXCLUDE() $:/temp/varExclude
+
+\function tf.fi-tmpTypeOptions() [<DV-TMP-FILTER-OPTIONS>] [<qualify>] +[join[/]]
+\function tf.fi-tmpSortOptions() [<DV-TMP-SORT-OPTIONS>] [<qualify>] +[join[/]]
+
+\function tf.fi-foldedState() [<FI-FOLDED>] [<qualify>] +[join[/]]
+
+\function tf.fi-searchText() [<FI-SEARCH>] [<qualify>] +[join[/]]
+\function tf.fi-getSearchText() [<tf.fi-searchText>get[text]]
+
+\function tf.fi-excludeText() [<FI-EXCLUDE>] [<qualify>] +[join[/]]
+\function tf.fi-getExcludeText() [<tf.fi-excludeText>get[text]]
+
+\procedure fi-clearSearchButton()
+<$button class="tc-btn-invisible btn-x" tooltip=`${ [{$:/language/Search/Variables/Clear}] [{$:/language/Search/Variables/Filter}] +[join[ ]] }$`>
+	<$action-deletetiddler $tiddler=<<tf.dv-searchText>>/>
+	{{$:/core/images/close-button}}
+</$button>
+\end
+
+\procedure fi-clearExcludeButton()
+<$button class="tc-btn-invisible btn-y" tooltip=`${ [{$:/language/Search/Variables/Clear}] [{$:/language/Search/Variables/Exclude}] +[join[ ]] }$`>
+	<$action-deletetiddler $tiddler=<<tf.dv-excludeText>>/>
+	{{$:/core/images/close-button}}
+</$button>
+\end
+
+\procedure fi-search-input-box()
+<%if [<sort>!is[blank]] %>
+	<code class="tc-small-gap">sort:<<_tf.fi-sort>></code>
+<%endif%>
+<%if [<type>!is[blank]] %>
+	<code class="tc-small-gap">type:<<_tf.fi-type>></code>
+<%endif%>
+<span class="x-txt"><$text text={{$:/language/Search/Variables/Filter}}/></span>
+<$edit-text tiddler=<<tf.fi-searchText>> tag=input class="x-inp" placeholder="filter variables by name"/> <<fi-clearSearchButton>>
+<% if [<DV-SEARCH-STATE>get[text]match[yes]] %>
+	<<fi-clearStatesButton>>
+<% else %>
+	<<fi-expandAllStatesButton>>
+<% endif %>
+\end
+
+\procedure fi-exclude-input-box()
+<span class="y-txt"><$text text={{$:/language/Search/Variables/Exclude}}/></span>
+<$edit-text tiddler=<<tf.fi-excludeText>> tag=input class="y-inp"/> <<fi-clearExcludeButton>>
+\end
+
+\function tf.fi-opt-class() "c" [<option>] +[join[-]] "tc-dv-filterOptions" +[join[ ]]
+
+\procedure fi-filterOptions()
+<style>
+.tc-dv-filterOptions [data-gap="right"] {
+	width: auto;
+	margin-right: .25em;
+}
+</style>
+<span class="t-txt">{{$:/language/Search/Variables/Option/Type}}</span>
+<$list filter="[enlist<FI-VAR-FILTER-OPTIONS>]" variable="option">
+	<$checkbox tiddler=<<tf.fi-tmpTypeOptions>> listField="text" checked=<<option>>
+		class=<<tf.fi-opt-class>> data-gap="right"
+	>
+		<<option>>
+	</$checkbox>
+</$list>
+\end
+
+\procedure fi-sortOptions()
+<span class="sel-txt">{{$:/language/Search/Variables/Option/Sort}}</span>
+<$select tiddler=<<tf.fi-tmpSortOptions>> default="alphabetical" class="sel-drop">
+	<option value="alphabetical">alphabetical</option>
+	<option value="raw">raw</option>
+</$select>
+\end
+
+<div class="tc-flexible-form">
+	<div class="tc-flexible-checkbox-container">
+	<<fi-filterOptions>> <<fi-sortOptions>>
+	</div>
+	<div class="tc-flexible-input-container">
+		<$reveal tag="div" type="nomatch" stateTitle=<<tf.fi-foldedState>> text="show" default="hide" class="btn-fld">
+			<$button tooltip={{$:/language/Search/Variables/Exclude/Show}}  class="tc-fi-btn tc-btn-invisible">
+				<$action-setfield $tiddler=<<tf.fi-foldedState>> $field=text $value="show"/>
+				{{$:/core/images/right-arrow}}
+			</$button>
+		</$reveal>
+		<$reveal tag="div" type="nomatch" stateTitle=<<tf.fi-foldedState>> text="hide" default="hide" class="btn-fld">
+			<$button tooltip={{$:/language/Search/Variables/Exclude/Hide}}  class="tc-fi-btn tc-btn-invisible">
+				<$action-setfield $tiddler=<<tf.fi-foldedState>> $field=text $value="hide"/>
+				{{$:/core/images/up-arrow}}
+			</$button>
+		</$reveal>
+		<<fi-search-input-box>>
+		<% if [<tf.fi-foldedState>get[text]match[show]] %>
+			<<fi-exclude-input-box>>
+		<% endif %>
+	</div>
+</div>
+
+<style>
+.tc-flexible-form {
+	outline: 1px solid blue;
+	overflow: auto;
+}
+.tc-flexible-checkbox-container {
+	padding: 4px 3px 3px 3px;
+	border-bottom: 1px dotted black;
+	display: grid;
+	grid-column-gap: 0.3em;
+	grid-template-columns: 5.3em 3em 3em 4em 4em 5em 5em 8em 1fr;
+	grid-template-areas:
+		"t-txt c-fn c-var c-proc c-macro c-widget sel-txt sel-drop";
+}
+
+.tc-flexible-input-container {
+	padding: 4px 3px 3px 3px;
+	display: grid;
+	<% if [<tf.fi-foldedState>get[text]match[show]] %>
+		grid-row-gap: 0.2em;
+	<% endif %>
+	grid-column-gap: 0.3em;
+	grid-template-columns: 1em 4em 1fr 1em 1em;
+	grid-template-areas:
+		"btn-fld x-txt x-inp btn-x btn-xx"
+		"btn-fld y-txt y-inp btn-y btn-yy";
+}
+
+.btn-fld {
+	<% if [<tf.fi-foldedState>get[text]match[show]] %>
+		align-self: center;
+	<% endif %>
+	padding: 0 2px;
+	grid-area: btn-fld;
+}
+
+.x-inp {
+	grid-area: x-inp;
+}
+.y-inp {
+	grid-area: y-inp;
+}
+
+.t-txt,
+.x-txt,
+.y-txt {
+	text-align: right;
+}
+.t-txt {
+	grid-area: t-txt;
+}
+.x-txt {
+	grid-area: x-txt;
+}
+.y-txt {
+	grid-area: y-txt;
+}
+
+.btn-t {
+	grid-area: btn-t;
+}
+.btn-x {
+	grid-area: btn-x;
+}
+.btn-y {
+	grid-area: btn-y;
+}
+
+.btn-xx {
+	grid-area: btn-xx;
+}
+.btn-yy {
+	grid-area: btn-yy;
+}
+
+.c-fn {
+	grid-area: c-fn;
+}
+.c-var {
+	grid-area: c-var;
+}
+.c-proc {
+	grid-area: c-proc;
+}
+.c-macro {
+	grid-area: c-macro;
+}
+.c-widget {
+	grid-area: c-widget;
+}
+.sel-txt {
+	text-align: right;
+	grid-area: sel-txt;
+}
+.sel-drop {
+	grid-area: sel-drop;
+}
+</style>
+