Merge e4b832d37d into 64f5dd942c

2024-05-06 17:17:06 +02:00 · 2024-05-06 17:17:06 +02:00 · 623f537657
parent 64f5dd942c e4b832d37d
commit 623f537657
43 changed files with 1524 additions and 45 deletions
--- a/core/language/en-GB/Search.multids
+++ b/core/language/en-GB/Search.multids
@ -18,3 +18,31 @@ Standard/Matches: //<small><<resultCount>> matches</small>//
 System/Caption: System
 System/Hint: Search for system tiddlers
 System/Matches: //<small><<resultCount>> matches</small>//
+Variables/Caption: Variables
+Variables/Content: Variable content
+Variables/Clear/Exclude: Clear exlude
+Variables/Clear/Search: Clear search
+Variables/Exclude: Exclude:
+Variables/Exclude/Edit: Edit
+Variables/Function/Content: Function definition
+Variables/Function/Definition: Function definition
+Variables/Exclude/Hide: Hide exclude input
+Variables/Exclude/Hint: Exclude Filter eg: [prefix[.]]
+Variables/Exclude/Save: Create new exclude filter
+Variables/Exclude/Show: Show exclude input
+Variables/Exclude/Show/Config: Show saved exclude configurations
+Variables/Exclude/Description: EDIT ME - Description is shown in the dropdown
+Variables/ExpandAll: Expand all:
+Variables/FoldAll: Fold all:
+Variables/Filter: Search:
+Variables/Filter/Hint: Search Variable Name eg: .attr
+Variables/Hint: Filter global variables
+Variables/Info/Reset: Reset details search input
+Variables/Info/Toggle/Show: Show details search input
+Variables/Info/Toggle/Hide: Hide details search input
+Variables/Matches: //<small><<resultCount>> matches</small>//
+Variables/Search: Search Variables
+Variables/Search/Details: Search tiddler text, tags:
+Variables/Signature: Variable signature
+Variables/Option/Type: Type:
+Variables/Option/Sort: Sort:
--- a/core/language/en-GB/Snippets/variables-prefix-dot.tid
+++ b/core/language/en-GB/Snippets/variables-prefix-dot.tid
@ -0,0 +1,5 @@
+description: [prefix[.]] Documentation variables prefixed with a dot
+tags: $:/tags/Variables/Exclude/Snippet
+title: $:/variables/exclude/prefix-dot
+
+[prefix[.]]
--- a/core/modules/filters/format/variable.js
+++ b/core/modules/filters/format/variable.js
@ -0,0 +1,33 @@
+/*\
+title: $:/core/modules/filters/format/variable.js
+type: application/javascript
+module-type: formatfilteroperator
+\*/
+(function(){
+
+/*jslint node: true, browser: true */
+/*global $tw: false */
+"use strict";
+
+/*
+Export our filter function
+*/
+exports.variable = function(source,operand,options) {
+	var results = [],
+		widget = options.widget,
+		variable,
+		varInfo,
+		variableTemplate = (operand.length >=6  && operand) ? operand : "$type$ $name$($params$) $firstLine$";
+
+	source(function(tiddler,title) {
+		varInfo = widget.getVariableInfo(title, {});
+		varInfo.name = title;
+		if(title && title.length) {
+			variable = $tw.utils.formatVariableString(variableTemplate, varInfo);
+			results.push(variable);
+		}
+	});
+	return results;
+};
+
+})();
--- a/core/modules/filters/getvariable.js
+++ b/core/modules/filters/getvariable.js
@ -16,9 +16,18 @@ Filter operator for replacing input values by the value of the variable with the
 Export our filter function
 */
 exports.getvariable = function(source,operator,options) {
-	var results = [];
+	var results = [],
+		operand = operator.operand || "text",
+		widget = options.widget;
 	source(function(tiddler,title) {
-		results.push(options.widget.getVariable(title) || "");
+		var variable = widget.getVariableInfo(title, {}),
+			text = "";
+		if(operand === "text") {
+			text = variable.text;
+		} else if((operand === "value") && variable.srcVariable) {
+			text = variable.srcVariable.value;
+		}
+		results.push(text || "");
 	});
 	return results;
 };
--- a/core/modules/filters/jsonvariable.js
+++ b/core/modules/filters/jsonvariable.js
@ -0,0 +1,33 @@
+/*\
+title: $:/core/modules/filters/jsonvariable.js
+type: application/javascript
+module-type: filteroperator
+
+Filter operator to get widget variable info and
+Display as JSON with basic formatting
+
+\*/
+(function(){
+
+/*jslint node: true, browser: true */
+/*global $tw: false */
+"use strict";
+
+/*
+Export our filter function
+*/
+exports.jsonvariable = function(source,operator,options) {
+	var results = [],
+		widget = options.widget;
+	// "replacer" must be defined, otherwise JSON.stringify will throw a circular reference error RSOD
+	// "replacer" does not contain: isCacheable
+	var replacer= "params name value default resultList srcVariable text isFunctionDefinition isProcedureDefinition isWidgetDefinition isMacroDefinition".split(" ");
+	source(function(tiddler,title) {
+		var variable = widget.getVariableInfo(title, {}),
+		text = JSON.stringify(variable,replacer);
+		results.push(text || "");
+	});
+	return results;
+};
+
+})();
--- a/core/modules/filters/variables.js
+++ b/core/modules/filters/variables.js
@ -16,17 +16,58 @@ Filter operator for returning the names of the active variables
 Export our filter function
 */
 exports.variables = function(source,operator,options) {
+	var operands = [];
+	$tw.utils.each(operator.operands,function(operand,index){
+		operands.push({
+			name: (index + 1).toString(),
+			value: operand
+		});
+	});
 	var names = [],
-		widget = options.widget;
+		sort,
+		widget = options.widget,
+		included = (operands[0].value) ? operands[0].value : "var fn proc macro widget";
+		// all will overwrite 
+		included = ((included.indexOf("all") !== -1)) ? "var fn proc macro widget" : included;
+
+		// variableTemplate = (operands.length > 1 && operands[1]) ? operands[1].value : "$type$ $name$($params$) $firstLine$";
+
+	switch(operator.suffix) {
+		case "raw":
+			sort = false;
+			break;
+		case "alphabetical":  // the fallthrough is intentional. "alphabetical" is default
+		default:
+			sort = true;
+			break;
+	}
 	while(widget && !widget.hasOwnProperty("variables")) {
 		widget = widget.parentWidget;
 	}
 	if(widget && widget.variables) {
 		for(var variable in widget.variables) {
-			names.push(variable);
+			var varInfo = widget.getVariableInfo(variable, {});
+
+			// varInfo.name = variable;
+			// variable = $tw.utils.formatVariableString(variableTemplate, varInfo);
+
+			if( ((included.indexOf("fn") !== -1) && varInfo.srcVariable.isFunctionDefinition ) ||
+				((included.indexOf("proc") !== -1) && varInfo.srcVariable.isProcedureDefinition ) ||
+				((included.indexOf("macro") !== -1) && varInfo.srcVariable.isMacroDefinition ) ||
+				((included.indexOf("widget") !== -1) && varInfo.srcVariable.isWidgetDefinition ) )
+			{
+				names.push(variable);
+			} else if((included.indexOf("var") !== -1) && !varInfo.srcVariable.isFunctionDefinition && !varInfo.srcVariable.isProcedureDefinition && !varInfo.srcVariable.isMacroDefinition && !varInfo.srcVariable.isWidgetDefinition )
+			{
+				names.push(variable);
+			}
 		}
 	}
-	return names.sort();
+	if(sort) {
+		return names.sort();
+	} else {
+		return names;
+	}
 };

 })();
--- a/core/modules/utils/utils.js
+++ b/core/modules/utils/utils.js
@ -309,6 +309,66 @@ exports.slowInSlowOut = function(t) {
 	return (1 - ((Math.cos(t * Math.PI) + 1) / 2));
 };

+exports.formatVariableString = function(template,options) {
+	var result = "",
+		firstLine = "",
+		name = options.name || "",
+		params = options.params || "",
+		os = options.srcVariable || options.name;
+	var	type = (os.isFunctionDefinition) ? "\\\\function" : (os.isMacroDefinition) ? "\\\\define" :
+			(os.isProcedureDefinition) ? "\\\\procedure" : (os.isWidgetDefinition) ? "\\\\widget" : "",
+		varType = (os.isFunctionDefinition) ? "fn" : (os.isMacroDefinition) ? "macro" :
+			(os.isProcedureDefinition) ? "proc" : (os.isWidgetDefinition) ? "widget" : "var";
+		var t = (!os.isFunctionDefinition && !os.isMacroDefinition && !os.isProcedureDefinition && !os.isWidgetDefinition) ? "$name$" : template;
+		var matches = [
+			[/^\$type\$/i, function() {
+				return (type) ? type : "";
+			}],
+			[/^\$name\$/i, function() {
+				return name;
+			}],
+			[/^\$params\$/i, function() {
+				var elements = [],
+					paramString = "";
+				if(params && params[0] && params[0].name) {
+					$tw.utils.each(params, function(p) {
+						elements.push(p.name + ((p.default) ? ':"' + p.default + '"' : ""));
+					});
+					paramString = elements.join(", ");
+				}
+				// return (type) ? "(" + paramString  + ")" : "";
+				return (type) ? paramString : "";
+			}],
+			[/^\$firstLine\$/i, function() {
+				var lines = os.value.split("\n"),
+					suffix = (lines.length > 1) ? "..." : "";
+				return (os.isFunctionDefinition) ? lines[0].replace("\\", "\\\\") + suffix: "";
+			}],
+			[/^\$varType\$/i, function() {
+				return varType;
+			}]
+		];
+		while(t.length){
+			var matchString = "";
+			$tw.utils.each(matches, function(m) {
+				var match = m[0].exec(t);
+				if(match) {
+					matchString = m[1].call(null,match);
+					t = t.substr(match[0].length);
+					return false;
+				}
+			});
+			if(matchString) {
+				result += matchString;
+			} else {
+				result += t.charAt(0);
+				t = t.substr(1);
+			}
+		}
+		result = result.replace(/\\(.)/g,"$1");
+		return result.trim();
+};
+
 exports.formatTitleString = function(template,options) {
 	var base = options.base || "",
 		separator = options.separator || "",
--- a/core/modules/widgets/widget.js
+++ b/core/modules/widgets/widget.js
@ -166,6 +166,8 @@ Widget.prototype.getVariableInfo = function(name,options) {
 			});
 			resultList = this.wiki.filterTiddlers(value,this.makeFakeWidgetWithVariables(variables),options.source);
 			value = resultList[0] || "";
+		} else {
+			params = variable.params;
 		}
 		return {
 			text: value,
--- a/core/ui/AdvancedSearch/Variables.tid
+++ b/core/ui/AdvancedSearch/Variables.tid
@ -0,0 +1,27 @@
+caption: {{$:/language/Search/Variables/Caption}}
+created: 20240215233810357
+list-before: $:/core/ui/AdvancedSearch/Filter
+modified: 20240429173634149
+tags: $:/tags/AdvancedSearch
+title: $:/core/ui/AdvancedSearch/Variables
+type: text/vnd.tiddlywiki
+
+\define set-next-input-tab(beforeafter:"after")
+<!-- TODO move stateTitle to field  -->
+<$macrocall $name="change-input-tab"
+	stateTitle="$:/state/tab--1498284803"
+	tag="$:/tags/AdvancedSearch"
+	beforeafter="$beforeafter$"
+	defaultState="$:/core/ui/AdvancedSearch/System"
+	actions="<$action-setfield $tiddler='$:/state/advancedsearch/currentTab' text=<<nextTab>>/>"/>
+\end
+
+{{$:/language/Search/Variables/Hint}}
+
+<div class="tc-search tc-advanced-search">
+<$keyboard key="((input-tab-right))" actions=<<set-next-input-tab>>>
+	<$keyboard key="((input-tab-left))" actions=<<set-next-input-tab "before">>>
+		<<search-variables>>
+	</$keyboard>
+</$keyboard>
+</div>
--- a/core/ui/AdvancedSearch/Variables_ItemTemplate.tid
+++ b/core/ui/AdvancedSearch/Variables_ItemTemplate.tid
@ -0,0 +1,16 @@
+title: $:/core/ui/AdvancedSearch/Variables/ItemTemplate
+
+\whitespace trim
+
+\procedure editSnippet()
+<$action-sendmessage $message="tm-edit-tiddler" title=<<currentTiddler>> />
+\end
+
+<$link to={{!!text}} >
+	<$let tv-wikilinks="no">
+		<$transclude field="description"/>
+	</$let>
+</$link>
+<$button actions=<<editSnippet>> class="tc-btn-invisible tc-small-gap-left" tooltip={{$:/language/Search/Variables/Exclude/Edit}}>
+	{{$:/core/images/edit-button}}
+</$button>
--- a/core/wiki/macros/dumpvariables.tid
+++ b/core/wiki/macros/dumpvariables.tid
@ -1,14 +1,464 @@
 title: $:/core/macros/dumpvariables
-tags: $:/tags/Macro
+tags: $:/tags/Global

-\define dumpvariables()
 \whitespace trim
-<ul>
-<$list filter="[variables[]]" variable="varname">
-<li>
-<strong><code><$text text=<<varname>>/></code></strong>:<br/>
-<$codeblock code={{{ [<varname>getvariable[]] }}}/>
-</li>
-</$list>
-</ul>
+
+\procedure lingo-base() $:/language/Search/Variables/
+
+<!-- CONST string definitions -->
+\procedure DV-VAR-FILTER-OPTIONS() all fn var proc macro widget
+\procedure DV-FILTER-OPTIONS() $:/temp/varSearch/options
+\procedure DV-SORT-OPTIONS() $:/temp/varSearch/sort
+
+<!-- Filter strings selected by "Sort" dropdown -->
+\procedure DV-RAW-FILTER-STR() [variables:raw<_tf.dv-type>]
+\procedure DV-FILTER-STR() [variables<_tf.dv-type>]
+
+<!-- State or temp variable base-names -->
+\procedure DV-FOLDED() $:/temp/varFolded
+\procedure DV-SEARCH() $:/temp/varSearch
+\procedure DV-SEARCH-DETAILS() $:/temp/varSearch/details
+\procedure DV-SEARCH-STATE() $:/state/varSearch/name
+\procedure DV-EXCLUDE() $:/state/varExclude
+
+<!-- HiddenSettings typeSelector options: checkbox, radio (default) -->
+\procedure DV-TYPE-CONFIG() $:/config/DumpVariables/type-selector
+
+<!-- Construct filter strings -->
+\function tf.dv-filterString() [<_tf.dv-sort>match[raw]then<DV-RAW-FILTER-STR>else<DV-FILTER-STR>]
+\function tf.dv-formattedVar() [<varname>format:variable<_tf.dv-varFormatStr>]
+
+\function tf.dv-foldedState() [<DV-FOLDED>] [<qualify>] +[join[/]]
+
+<!-- ============================ -->
+<!-- dumpvariables main procedure -->
+<!-- ============================ -->
+\procedure dumpvariables(type sort subfilter:"[[]]" format)
+	<!-- The following function is needed since the "format" string can contain closing brackets ")" -->
+	<!-- Be aware that the "format" filter operator uses $var-name$ for compatibility reasons -->
+	\function _tf.dv-varFormatStr() [<format>!is[blank]then<format>else[$type$ $name$($params$)]]
+	\function _tf.dv-type() [<type>]
+	\function _tf.dv-sort() [<sort>]
+
+	<p>
+		<$text text=`${ [subfilter<tf.dv-filterString>]
+			+[filter<subfilter>]
+			+[count[]] }$`
+		/>
+		<<lingo Matches>>
+		<% if [<subfilter>split[]count[]compare::gt[4]] %>
+			<span class="tc-small-gap-left"><$text text=`subfilter: $(subfilter)$`/></span>
+		<%endif%>
+	</p>
+
+	<ul>
+		<$list filter="[subfilter<tf.dv-filterString>] +[filter<subfilter>]" variable="varname">
+			<li>
+				<code title={{$:/language/Search/Variables/Signature}}><$text text=<<tf.dv-formattedVar>>/></code><br/>
+				<% if [<tf.dv-formattedVar>prefix[\function]] %>
+					<pre title={{$:/language/Search/Variables/Function/Definition}}><code><$text text={{{ [<varname>getvariable[value]] }}}/></code></pre>
+				<% endif %>
+				<pre title={{$:/language/Search/Variables/Content}}><code><$text text={{{ [<varname>getvariable[]] }}}/></code></pre>
+			</li>
+		</$list>
+	</ul>
 \end
+
+<!-- search-variables helper functions -->
+\procedure dv-toggleState()
+<$action-setfield $tiddler=<<tf.dv-varState>> text={{{ [<tf.dv-varState>get[text]] +[toggle[yes],[no]] }}}/>
+<<dv-toggleInfoState>>
+\end
+
+\procedure dv-toggleInfoState()
+<$action-setfield $tiddler=<<tf.dv-toggleInfoState>>
+	text={{{ [<tf.dv-toggleInfoState>get[text]] +[toggle[yes],[no]] }}}
+/>
+<!-- Existing user modified "search text details" should be preserved. If empty use default formatted signature -->
+<!-- Be aware that the "format" filter operator uses $var-name$ for compatibility reasons -->
+<$action-setfield $tiddler=<<tf.dv-detailsSearch>>
+	text={{{ [<tf.dv-getDetailsSearchText>!is[blank]then<tf.dv-getDetailsSearchText>] :else[<varname>format:variable[$type$ $name$]] }}}
+/>
+\end
+
+\procedure dv-setDetailsSearchText()
+<!-- Existing user modified "search text details" should be preserved. If empty use default formatted signature -->
+<!-- Be aware that the "format" filter operator uses $var-name$ for compatibility reasons -->
+<$action-setfield $tiddler=<<tf.dv-detailsSearch>>
+	text={{{ [<varname>format:variable[$type$ $name$]] }}}
+/>
+\end
+
+\procedure dv-clearStatesButton()
+<span class="tc-small-gap"><<lingo FoldAll>></span>
+<$button class="tc-btn-invisible tc-tiny-gap-left" tooltip={{$:/language/Search/Variables/FoldAll}}>
+	<!-- "search text details" should be preserved -->
+	<$action-deletetiddler $filter="[prefix<DV-SEARCH-STATE>]"/>
+	{{$:/core/images/fold-all-button}}
+</$button>
+\end
+
+\procedure dv-clearSearchButton()
+<$button class="tc-btn-invisible btn-x" tooltip={{$:/language/Search/Variables/Clear/Search}}>
+	<$action-deletetiddler $tiddler=<<tf.dv-searchText>>/>
+	<$action-sendmessage $message="tm-focus-selector" $param="input.x-inp"/>
+	{{$:/core/images/close-button}}
+</$button>
+\end
+
+\procedure dv-clearExcludeButton()
+<$button class="tc-btn-invisible btn-yy" tooltip={{$:/language/Search/Variables/Clear/Exclude}}>
+	<$action-deletetiddler $tiddler=<<tf.dv-excludeText>>/>
+	<$action-sendmessage $message="tm-focus-selector" $param="input.y-inp"/>
+	{{$:/core/images/close-button}}
+</$button>
+\end
+
+\procedure dv-expandAllStatesButton()
+<span class="tc-tiny-gap"><<lingo ExpandAll>></span>
+<$button class="tc-btn-invisible" tooltip={{$:/language/Search/Variables/ExpandAll}}>
+	<$action-setfield $tiddler=<<DV-SEARCH-STATE>>
+		text={{{ [<tf.dv-toggleInfoState>get[text]] +[toggle[yes],[no]] }}}
+	/>
+	<!-- only expand currently visible elements -->
+	<$list filter="[subfilter<tf.dv-filterString>] +[search::some<tf.dv-getSearchText>] +[filter<subfilter>]"
+		variable="varname"
+	>
+		<$action-setfield $tiddler=<<tf.dv-varState>> text="yes"/>
+	</$list>
+	{{$:/core/images/unfold-all-button}}
+</$button>
+\end
+
+\procedure dv-info()
+<div class="multi-columns">
+	<$list filter="[all[tiddlers+shadows]] :filter[search:text,tags:words<tf.dv-getDetailsSearchText>] 
+		-[[$:/config/OriginalTiddlerPaths]]
+		-[[$:/HistoryList]]
+		-[[$:/StoryList]]
+		-[[$:/core]]
+		:filter[!type[application/javascript]]
+		:filter[!prefix[$:/temp/]]
+		:filter[!prefix[$:/state/]]
+		:filter[!plugin-type[plugin]]"
+	>
+		<$link class="tc-small-gap-left"/><br>
+	</$list>
+</div>
+\end
+
+\function tf.dv-tmpTypeOptions() [<DV-FILTER-OPTIONS>] [<qualify>] +[join[/]]
+\function tf.dv-tmpSortOptions() [<DV-SORT-OPTIONS>] [<qualify>] +[join[/]]
+
+\function tf.dv-searchText() [<DV-SEARCH>] [<qualify>] +[join[/]]
+\function tf.dv-getSearchText() [<tf.dv-searchText>get[text]]
+
+\function tf.dv-excludeText() [<DV-EXCLUDE>] [<qualify>] +[join[/]]
+\function tf.dv-getExcludeText() [<tf.dv-excludeText>get[text]]
+
+\function tf.dv-detailsSearch() [<DV-SEARCH-DETAILS>] [<varname>] [<qualify>] +[join[/]]
+\function tf.dv-getDetailsSearchText() [<tf.dv-detailsSearch>get[text]]
+
+\function tf.dv-varState() [<DV-SEARCH-STATE>] [<varname>] [<qualify>] +[join[/]]
+\function tf.dv-toggleInfoState() [<DV-SEARCH-STATE>] [<varname>] +[join[/]]
+
+<!-- =============================== -->
+<!-- search-variables main procedure -->
+<!-- =============================== -->
+\procedure search-variables(type sort subfilter:"[[]]" format)
+	<!-- The following function is needed since the "format" string can contain closing brackets ")" -->
+	<!-- Be aware that the "format" filter operator uses $var-name$ for compatibility reasons -->
+	\function _tf.dv-varFormatStr() [<format>!is[blank]then<format>else[$type$ $name$($params$)]]
+	\function _tf.dv-type() [<type>!is[blank]then<type>] :else[<tf.dv-tmpTypeOptions>get[text]]
+	\function _tf.dv-sort() [<sort>!is[blank]then<sort>] :else[<tf.dv-tmpSortOptions>get[text]] :else[[alphabetical]]
+
+	<<dv-searchForm>>
+
+	<p tabindex="0">
+		<$text text=`${ [subfilter<tf.dv-filterString>]
+			+[search::some<tf.dv-getSearchText>]
+			+[filter<subfilter>]
+			+[!filter<tf.dv-getExcludeText>]
+			+[count[]] }$`
+		/>
+			<<lingo Matches>>
+		<% if [<subfilter>split[]count[]compare::gt[4]] %>
+			<span class="tc-small-gap-left"><$text text=`subfilter: $(subfilter)$`/></span>
+		<%endif%>
+	</p>
+
+	<div class="tc-variables-results">
+	<$list filter="[subfilter<tf.dv-filterString>]
+			+[search::some<tf.dv-getSearchText>]
+			+[filter<subfilter>]
+			+[!filter<tf.dv-getExcludeText>]"
+		variable="varname"
+	>
+		<div class="tc-var-item">
+			<$button actions=<<dv-toggleState>> class="tc-small-gap-left tc-btn-invisible">
+				<% if [<tf.dv-varState>get[text]match[yes]] %>
+					{{$:/core/images/down-arrow}}
+				<% else %>
+					{{$:/core/images/right-arrow}}
+				<% endif %>
+				<code title={{$:/language/Search/Variables/Signature}} class="tc-small-gap-right"><$text text=<<tf.dv-formattedVar>>/></code>
+			</$button>
+			<% if [<tf.dv-formattedVar>prefix[\function]] %>
+				<!-- Be aware that the "format" filter operator uses $var-name$ for compatibility reasons -->
+				<span tabindex="0" class="tc-tiny-gap-right" title={{$:/language/Search/Variables/Function/Content}}>
+					<$text text={{{ [<varname>format:variable[$firstLine$]] }}}/>
+				</span>
+			<% endif %>
+
+			<% if [<tf.dv-varState>get[text]match[yes]] %>
+				<$button actions=<<dv-toggleInfoState>>
+					class="tc-btn-details tc-btn-invisible tc-small-gap-left"
+				>
+					<% if [<tf.dv-toggleInfoState>get[text]match[yes]] %>
+						<span title={{$:/language/Search/Variables/Info/Toggle/Hide}}>{{$:/core/images/up-arrow}}</span>
+					<% else %>
+						<span title={{$:/language/Search/Variables/Info/Toggle/Show}}>{{$:/core/images/advanced-search-button}}</span>
+					<% endif %>
+				</$button>
+				<blockquote class="tc-quote">
+					<% if [<tf.dv-toggleInfoState>get[text]match[yes]] %>
+						<div class="tc-labeled-input-wrapper">
+							<span tabindex="0" class="tc-fixed-label tc-align-right"><<lingo Search/Details>></span>
+							<$edit-text tiddler=<<tf.dv-detailsSearch>> tag=input class="tc-fluid-input tc-small-gap-left"/>
+							<$button actions=<<dv-setDetailsSearchText>>
+								class="tc-btn-invisible tc-tiny-gap-left"
+								tooltip={{$:/language/Search/Variables/Info/Reset}}
+							>
+								{{$:/core/images/refresh-button}}
+							</$button>
+						</div>
+						<<dv-info>>
+					<% endif %>
+					<% if [<varname>prefix[\function]] %>
+						<$codeblock code={{{ [<varname>getvariable[value]] }}}/>
+					<% endif %>
+					<pre tabindex="0" title={{$:/language/Search/Variables/Content}}><code><$text text={{{ [<varname>getvariable[]] }}}/></code></pre>
+				</blockquote>
+			<% endif %>
+		</div>
+	</$list>
+	</div>
+\end
+
+
+<!-- ================================== -->
+<!-- Grid Based Advanced Variables Form -->
+<!-- ================================== -->
+
+\procedure dv-search-input-box()
+<span class="x-txt"><$text text={{$:/language/Search/Variables/Filter}}/></span>
+<$edit-text tiddler=<<tf.dv-searchText>>
+	tag=input
+	class="txt-input x-inp"
+	placeholder={{$:/language/Search/Variables/Filter/Hint}}
+	focus="yes"
+/>
+<<dv-clearSearchButton>>
+\end
+
+\procedure dv-exclude-input-box()
+<span class="y-txt"><$text text={{$:/language/Search/Variables/Exclude}}/></span>
+<$edit-text tiddler=<<tf.dv-excludeText>>
+	tag=input
+	class="txt-input y-inp"
+	placeholder={{$:/language/Search/Variables/Exclude/Hint}}
+/>
+<<moreVariablesPopup>>
+<% if [<tf.dv-getExcludeText>!is[blank]] %>
+	<<dv-clearExcludeButton>>
+<% endif %>
+\end
+
+\function tf.dv-opt-class() "c" [<option>] +[join[-]] "tc-tiny-gap-right" "tc-dv-filterOptions" +[join[ ]]
+
+\procedure dv-filterOptions()
+<style>
+.tc-dv-filterOptions [data-gap="right"] {
+	width: auto;
+	margin-right: .25em;
+}
+</style>
+<span class="t-txt"><<lingo Option/Type>></span>
+<%if [<type>!is[blank]] %>
+	<span> <!-- span is needed to overwrite grid-area settings -->
+		<$list filter="[<_tf.dv-type>split[ ]]" variable="option">
+			<code class=<<tf.dv-opt-class>> ><<option>></code>
+		</$list>
+	</span>
+<% else %>
+	<$list filter="[enlist<DV-VAR-FILTER-OPTIONS>]" variable="option">
+		<%if [<DV-TYPE-CONFIG>get[text]match[checkbox]] %>
+			<$checkbox tiddler=<<tf.dv-tmpTypeOptions>>
+				listField="text"
+				checked=<<option>>
+				default="all"
+				class=<<tf.dv-opt-class>>
+				data-gap="right"
+			>
+				<<option>>
+			</$checkbox>
+		<% else %>
+			<$radio tiddler=<<tf.dv-tmpTypeOptions>>
+				listField="text" value=<<option>>
+				default="all"
+				class=<<tf.dv-opt-class>>
+				data-gap="right"
+			>
+				<<option>>
+			</$radio>
+		<% endif %>
+	</$list>
+<% endif %>
+\end
+
+\procedure dv-sortOptions()
+<span class="sel-txt">
+	<<lingo Option/Sort>>
+</span>
+<%if [<sort>!is[blank]] %>
+	<code class="sel-drop"><<_tf.dv-sort>></code>
+<% else %>
+	<$select tiddler=<<tf.dv-tmpSortOptions>>
+		default="alphabetical"
+		class="sel-drop"
+	>
+		<option value="alphabetical">alphabetical</option>
+		<option value="raw">raw</option>
+	</$select>
+<% endif %>
+\end
+
+\procedure dv-expandFoldOption()
+<span class="ex-btn">
+<% if [<DV-SEARCH-STATE>get[text]match[yes]] %>
+	<<dv-clearStatesButton>>
+<% else %>
+	<<dv-expandAllStatesButton>>
+<% endif %>
+</span>
+\end
+
+<!-- ========================================== -->
+<!-- Main -- Grid Based Advanced Variables Form -->
+<!-- ========================================== -->
+\procedure dv-searchForm()
+<div class="tc-flexible-form">
+	<div class="tc-advanced-search-container">
+	<span class="tc-dv-type"><<dv-filterOptions>></span>
+	<span class="tc-dv-sort"><<dv-sortOptions>></span>
+	<span class="tc-dv-extra"><<dv-expandFoldOption>></span>
+	</div>
+	<div class="tc-flexible-input-container">
+		<$reveal stateTitle=<<tf.dv-foldedState>>
+			tag="div"
+			class=`btn-fld ${[<tf.dv-getExcludeText>!is[blank]then[btn-fld-has-exluded]]}$`
+			type="nomatch"
+			text="show"
+			default="hide"
+		>
+			<$button tooltip={{$:/language/Search/Variables/Exclude/Show}} class="tc-dv-btn tc-btn-invisible">
+				<$action-setfield $tiddler=<<tf.dv-foldedState>> $field=text $value="show"/>
+				<% if [<tf.dv-getExcludeText>!is[blank]]%>
+					{{$:/core/images/star-filled}}
+				<% else %>
+					{{$:/core/images/right-arrow}}
+				<% endif %>
+			</$button>
+		</$reveal>
+		<$reveal stateTitle=<<tf.dv-foldedState>>
+			tag="div"
+			class=`btn-fld ${[<tf.dv-getExcludeText>!is[blank]then[btn-fld-has-exluded]]}$`
+			type="nomatch"
+			text="hide"
+			default="hide"
+			style="align-self: center;"
+		>
+			<$button tooltip={{$:/language/Search/Variables/Exclude/Hide}}  class="tc-dv-btn tc-btn-invisible">
+				<$action-setfield $tiddler=<<tf.dv-foldedState>> $field=text $value="hide"/>
+				<% if [<tf.dv-getExcludeText>!is[blank]]%>
+					{{$:/core/images/star-filled}}
+				<% else %>
+					{{$:/core/images/up-arrow}}
+				<% endif %>
+			</$button>
+		</$reveal>
+		<<dv-search-input-box>>
+		<% if [<tf.dv-foldedState>get[text]match[show]] %>
+			<<dv-exclude-input-box>>
+		<% endif %>
+	</div>
+</div>
+\end
+
+<!-- ==================== -->
+<!-- More Variables Popup -->
+
+\procedure dv-lc-actions()
+<$action-setfield $tiddler=<<tf.dv-excludeText>> text=<<navigateTo>>/>
+<!-- <$action-sendmessage $message="tm-focus-selector" $param="input.y-inp"/> -->
+\end
+
+\procedure dv-addNewVariableFilter-actions()
+<$action-sendmessage
+	$message="tm-new-tiddler"
+	tags="$:/tags/Variables/Exclude/Snippet"
+	description=<<lingo Exclude/Description>>
+	text=<<tf.dv-getExcludeText>>
+/>
+
+<$action-deletetiddler
+	$tiddler=<<dropdown-state>>
+/>
+\end
+
+\procedure dv-addNewVariableFilter()
+<$button tag="a"
+	actions=<<dv-addNewVariableFilter-actions>>
+	class="tc-tiddlylink"
+	aria-label={{$:/language/Search/Variables/Exclude/Save}}
+	tabindex="0"
+>
+	<em>
+		<$text text={{$:/language/Search/Variables/Exclude/Save}}/>
+	</em>
+</$button>
+\end
+
+\procedure moreVariablesPopup()
+<span class="tc-popup-keep btn-y">
+	<$button popup=<<qualify "$:/state/variableDropdown">> 
+		class="tc-btn-invisible"
+		tooltip={{$:/language/Search/Variables/Exclude/Show/Config}}
+	>
+		{{$:/core/images/down-arrow}}
+	</$button>
+</span>
+
+<$reveal state=<<qualify "$:/state/variableDropdown">> type="popup" position="belowleft">
+	<$let name="tv-show-missing-links" value="yes">
+		<$linkcatcher actions=<<dv-lc-actions>> >
+			<div class="tc-block-dropdown-wrapper">
+				<div class="tc-block-dropdown tc-variables-dropdown">
+					<!-- <$macrocall $name="list-tagged-draggable"
+						tag="$:/tags/Variables/Exclude/Snippet"
+						subFilter="!is[draft]"
+						itemTemplate="$:/core/ui/AdvancedSearch/Variables/ItemTemplate"
+					/>  --> <!-- TODO make drag & drop sorting possible -->
+					<$list filter="[all[shadows+tiddlers]tag[$:/tags/Variables/Exclude/Snippet]!is[draft]]">
+						<div>
+							{{||$:/core/ui/AdvancedSearch/Variables/ItemTemplate}}
+						</div>
+					</$list>
+					<hr>
+					<<dv-addNewVariableFilter>>
+				</div>
+			</div>
+		</$linkcatcher>
+	</$let>
+</$reveal>
+\end
--- a/editions/tw5.com/tiddlers/$__config_ViewToolbarButtons_Visibility_$__core_ui_Buttons_fold-bar.tid
+++ b/editions/tw5.com/tiddlers/$__config_ViewToolbarButtons_Visibility_$__core_ui_Buttons_fold-bar.tid
@ -0,0 +1,6 @@
+created: 20240311170828385
+modified: 20240311170828385
+title: $:/config/ViewToolbarButtons/Visibility/$:/core/ui/Buttons/fold-bar
+type: text/vnd.tiddlywiki
+
+show
--- a/editions/tw5.com/tiddlers/$__plugins_wikilabs_link-to-tabs.json
+++ b/editions/tw5.com/tiddlers/$__plugins_wikilabs_link-to-tabs.json
--- a/editions/tw5.com/tiddlers/$__plugins_wikilabs_link-to-tabs.json.meta
+++ b/editions/tw5.com/tiddlers/$__plugins_wikilabs_link-to-tabs.json.meta
@ -0,0 +1,11 @@
+author: Mario Pietsch
+core-version: >=5.3.3
+dependents: 
+description: Internal links are added to tabs if selected
+icon: $:/plugins/wikilabs/link-to-tabs/icon
+list: readme settings license history
+name: Link to Tabs
+plugin-type: plugin
+title: $:/plugins/wikilabs/link-to-tabs
+type: application/json
+version: 3.0.0
--- a/editions/tw5.com/tiddlers/$__tab.json
+++ b/editions/tw5.com/tiddlers/$__tab.json
@ -0,0 +1,32 @@
+{
+    "tiddlers": {
+        "$:/config/ShortcutInfo/tab": {
+            "text": "Insert Tab",
+            "title": "$:/config/ShortcutInfo/tab"
+        },
+        "$:/config/shortcuts-mac/tab": {
+            "text": "tab",
+            "title": "$:/config/shortcuts-mac/tab"
+        },
+        "$:/config/shortcuts-not-mac/tab": {
+            "text": "tab",
+            "title": "$:/config/shortcuts-not-mac/tab"
+        },
+        "$:/tab/icon": {
+            "text": "<svg class=\"tc-image-tab tc-image-button\" width=\"22pt\" height=\"22pt\" viewBox=\"0 0 128 128\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M122 123h-11.5V65.3H122zm-19.3-28.8L73.9 123V99.9H6.6V88.4h67.3V65.3zM6.6 65.4V7.7h11.5v57.7zm19.3-28.8L54.7 7.8v23.1H122v11.5H54.7v23.1z\"/></svg>",
+            "tags": "$:/tags/Image",
+            "title": "$:/tab/icon"
+        },
+        "$:/insert/tab": {
+            "text": "<$action-sendmessage\n\t$message=\"tm-edit-text-operation\"\n\t$param=\"insert-text\"\n\ttext={{{ [charcode[9]] }}}\n/>",
+            "title": "$:/insert/tab",
+            "tags": "$:/tags/EditorToolbar",
+            "icon": "$:/tab/icon",
+            "caption": "Tab",
+            "description": "Insert Tab",
+            "condition": "[<targetTiddler>!has[type]] [<targetTiddler>type[text/vnd.tiddlywiki]]",
+            "shortcuts": "((tab))",
+            "condition-disabled": "[[$:/temp/bold/disabled]get[state-disabled]else[no]]"
+        }
+    }
+}
--- a/editions/tw5.com/tiddlers/$__tab.json.meta
+++ b/editions/tw5.com/tiddlers/$__tab.json.meta
@ -0,0 +1,7 @@
+description: Toolbar button to get a tab space character
+modified: 20230806185015211
+name: Tab character
+plugin-type: plugin
+title: $:/tab
+type: application/json
+version: 0.0.2
--- a/editions/tw5.com/tiddlers/$__themes_tiddlywiki_vanilla_settings_editorfontfamily.tid
+++ b/editions/tw5.com/tiddlers/$__themes_tiddlywiki_vanilla_settings_editorfontfamily.tid
@ -0,0 +1,6 @@
+created: 20240312113200405
+modified: 20240312113200405
+title: $:/themes/tiddlywiki/vanilla/settings/editorfontfamily
+type: text/vnd.tiddlywiki
+
+"SFMono-Regular",Consolas,"Liberation Mono",Menlo,Courier,monospace
--- a/editions/tw5.com/tiddlers/dump-type-fn-raw.tid
+++ b/editions/tw5.com/tiddlers/dump-type-fn-raw.tid
@ -0,0 +1,7 @@
+created: 20240427113318944
+modified: 20240427113819817
+tags: 
+title: dump-type-fn-raw
+type: text/vnd.tiddlywiki
+
+<<.example 1 """<<dumpvariables  type:"fn" sort:"raw"  >>""">>
--- a/editions/tw5.com/tiddlers/dump-with-subfilter.tid
+++ b/editions/tw5.com/tiddlers/dump-with-subfilter.tid
@ -0,0 +1,9 @@
+created: 20240218195424844
+modified: 20240427113751174
+tags: 
+title: dump-with-subfilter
+type: text/vnd.tiddlywiki
+
+<<.example 1 """<<dumpvariables  sort:raw subfilter:"[search::some[thisTiddler .attr ]]" >>""">>
+
+ 
--- a/editions/tw5.com/tiddlers/features/VariableFormat.tid
+++ b/editions/tw5.com/tiddlers/features/VariableFormat.tid
@ -0,0 +1,22 @@
+created: 20240219185725834
+modified: 20240501103053921
+tags: Features
+title: VariableFormat
+type: text/vnd.tiddlywiki
+
+<<.from-version "5.3.4">>
+
+Finding "self explaining" variable names for functions, procedures, widgets and macros is difficult. So if variables are listed with <<.mlink dumpvariables>>, <<.mlink search-variables>> or from the "Variables" tab in the $:/AdvancedSearch, it's not obvious ''how'' they work and how they are defined. 
+
+The <<.olink variables>> operator returns all "visible" variables from the current context, depending on where the filter run is executed. The getvariable-operator allows us to return the "text" or the "value" of variables. But this information is not enough to get a good understanding of existing variables. 
+
+So using getvariable-operator in combination with the <<.olink format>> operator we are able to improve information in variable listings. 
+
+|Token |Substituted Value |h
+|`$type$` |variabe type eg: `\function`, `\procedure` and so on |
+|`$name$` |returns the name of the variable |
+|`$params$` |returns a list of parameters, which are defined with functions, procedures ... |
+|`$firstLine$` |returns the first line of the variable content-type as used by <<.olink getvariable>> |
+|`$varType$` |returns `var`, `fn`, ` proc`, ` macro` or ` widget` which can be used with the <<.olink variables>> operator |
+
+See: <<.mlink dumpvariables>>, <<.mlink search-variables>> or $:/AdvancedSearch
--- a/editions/tw5.com/tiddlers/filters/examples/format
+++ b/editions/tw5.com/tiddlers/filters/examples/format
@ -1,5 +1,5 @@
 created: 20201020102735123
-modified: 20230226135641976
+modified: 20240501103205895
 tags: [[Operator Examples]] [[format Operator]]
 title: format Operator (Examples)
 type: text/vnd.tiddlywiki
@ -29,9 +29,12 @@ A JSON string formatted as JSON – note how the JSON string is normalised to re

 <<.tip "To create a string to save a [[title list|Title List]] into a list field, use `format:titlelist[]` with the [[join operator|join Operator]]">>
 <<.operator-example 8 """[tag[TableOfContents]format:titlelist[]join[ ]]""">>
-For example, to save titles tagged `TableOfContents` to the titles field of the tiddler [[format titlelist test]]:

+A variable formatted as procedure definition. Also see: [[search-variables Macro]]
+<<.operator-example 9 """[[.attr]format:variable[$type$ $name$($params$) $firstLine$]]""">>
+
+For example, to save titles tagged `TableOfContents` to the titles field of the tiddler [[format titlelist test]]:
 <$macrocall $name='wikitext-example-without-html'
 src='<$button>Try it
-<$action-setfield $tiddler="format titlelist test" titles={{{ [tag[TableOfContents]format:titlelist[]join[ ]] }}}/>
+<$action-setfield $tiddler="format titlelist test" text={{{ [tag[TableOfContents]format:titlelist[]join[ ]] }}}/>
 </$button>'/>
--- a/editions/tw5.com/tiddlers/filters/examples/variables.tid
+++ b/editions/tw5.com/tiddlers/filters/examples/variables.tid
@ -1,7 +1,13 @@
 created: 20190330100101453
-modified: 20190330100101453
+modified: 20240219184535837
 tags: [[variables Operator]] [[Operator Examples]]
 title: variables Operator (Examples)
 type: text/vnd.tiddlywiki

 <<.operator-example 1 "[variables[]prefix[colour]]" "returns the names of any variables whose names start with ''colour''">>
+
+<<.operator-example 2 "[variables[fn]]" "returns the names of any variables which are defined as `\function`s">>
+
+<<.operator-example 3 "[variables[proc]]" "returns the names of any variables which are defined as `\procedure`s">>
+
+<<.tip """Also see the filter operator <<.olink format>> to find out about variable "title" formatting""">>
--- a/editions/tw5.com/tiddlers/filters/format.tid
+++ b/editions/tw5.com/tiddlers/filters/format.tid
@ -22,6 +22,7 @@ The suffix <<.place B>> is one of the following supported string formats:
 |^`relativedate` |The input string is interpreted as a UTC date and displayed as the interval from the present instant. Any operator parameters <<.place C>> are ignored |
 |^`timestamp` |<<.from-version "5.3.0">> The input string is interpreted as number of milliseconds since the [[ECMAScript epoch|https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date#the_ecmascript_epoch_and_timestamps]], 1 January 1970, and displayed according to the DateFormat specified in the optional operator parameter. (Defaults to "[UTC]YYYY0MM0DD0hh0mm0ss0XXX") |
 |^`titlelist` |<<.from-version "5.2.0">> The input string wrapped in double square brackets if it contains a space. Appropriate for use in a [[title list|Title List]]. |
+|^`variable` |<<.from-version "5.3.4">> The input string is interpreted as a variable name, which can be formatted using the VariableFormat. Defaults to `$type$ $name$($params$) $firstLine$`|

 Invalid input strings are dropped by the <<.op format>> operator.

--- a/editions/tw5.com/tiddlers/filters/getvariable.tid
+++ b/editions/tw5.com/tiddlers/filters/getvariable.tid
@ -1,12 +1,13 @@
+caption: getvariable
 created: 20190330100101453
-modified: 20190330100101453
+modified: 20240219183835439
+op-input: a selection of variable names
+op-output: the values of each of the variables named in the input titles (or blank if the variable is not defined)
+op-parameter: <<.from-version "5.3.4">> defaults to: "text". optional: "value". Content type <<.param T>> of the varible content that should be returned
+op-purpose: select all values of variables named in the input titles
 tags: [[Filter Operators]] [[Special Operators]]
 title: getvariable Operator
-caption: getvariable
-op-purpose: select all values of variables named in the input titles
-op-input: a selection of variable names
-op-parameter: ignored
-op-output: the values of each of the variables named in the input titles (or blank if the variable is not defined)
+type: text/vnd.tiddlywiki

 <<.from-version "5.1.20">> The usual way to retrieve a variable value within a filter is with the angle brackets notation. For example, `[<currentTiddler>]` will retrieve the value of the variable called `currentTiddler`. 

@ -14,4 +15,13 @@ The `getvariable` filter operator provides an alternative way to retrieve a vari

 The advantage of `getvariable` is that it makes it possible to work with variables whose name is computed, and not known in advance. For example, `[<myvariable>getvariable[]]` gets the value of the variable whose name is given in the variable `myvariable`.

+''Content Type:'' <<.from-version "5.3.4">>
+
+The Prameter <<.param T>> by default is "text". Variables, that are defined as eg: `\function`s have two useful content types: 
+
+* ''text'' ... contains the wikified text of the filter expression
+* ''value'' ... contains the definition string
+
+For any other variable type "text" and "value" are the same thing. 
+
 <<.operator-examples "getvariable">>
--- a/editions/tw5.com/tiddlers/filters/variables.tid
+++ b/editions/tw5.com/tiddlers/filters/variables.tid
@ -1,16 +1,38 @@
+caption: variables
 created: 20190330100101453
-modified: 20190330100101453
+modified: 20240501101748198
+op-input: ignored
+op-output: the names of all the actively defined variables
+op-parameter: <<.from-version "5.3.4">> whitespace separated list of variable-types
+op-parameter-name: T
+op-purpose: select the names of all the actively defined variables
+op-suffix: <<.from-version "5.3.4">> deafults to: "sort", optional: "raw", see more details below
+op-suffix-name: S
 tags: [[Filter Operators]] [[Special Operators]] [[Selection Constructors]]
 title: variables Operator
 type: text/vnd.tiddlywiki
-caption: variables
-op-purpose: select the names of all the actively defined variables
-op-input: ignored
-op-parameter: none
-op-output: the names of all the actively defined variables

-<<.from-version "5.1.20">> The primary purpose of the `variables` operator is to implement the [[dumpvariables Macro]]:
+<<.from-version "5.1.20">> The primary purpose of the `variables` operator is to implement the <<.mlink dumpvariables>> or the <<.mlink serach-variables>> macros.
+
+`[variables:<sort>[<parameters>]]`
+
+''Possible Suffixes: <<.place S>>:'' <<.from-version "5.3.4">>
+
+* ''alphabetical'' (default): By default the returned list is alphabetically sorted
+* ''raw'': The variable list will be returned as created. The variables "near" the filter run will show up first. So if variables are defined in the tiddler, where the <<.mlink dumpvariables>> or <<.mlink search-variables>> macros are executed, they will be listed first. 
+
+''Parameters <<.place T>>:'' <<.from-version "5.3.4">>
+
+The parameters <<.place T>> allow a ''whitespace separated list'' of variable codes that should be listed
+
+* Default is `all` or `fn, var, proc, macro, widget`
+
+* ''all'' ... If set it takes precedence and will show all variables
+* ''fn'' ... Will only show variables defined as functions eg: `\function test-01()`
+* ''var'' ... Will only show standard variables defined with eg: `<$let test="test">...</$let>`
+* ''proc'' ... Will only show variables defined as procedures eg: `\procedure test-02()`
+* ''macro'' ... Will only show variables defined as macros eg: `\define test-macro()`
+* ''widgets'' ... Will only show variables defined as widgets eg: `\widget my-widget()`

-<$codeblock code={{$:/core/macros/dumpvariables}}/>

 <<.operator-examples "variables">>
--- a/editions/tw5.com/tiddlers/flexible-form-backup.tid
+++ b/editions/tw5.com/tiddlers/flexible-form-backup.tid
@ -0,0 +1,112 @@
+created: 20240424104446409
+modified: 20240424104446409
+title: /core/template/flexible-form
+type: text/vnd.tiddlywiki
+
+\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-advanced-search-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>
+
--- a/editions/tw5.com/tiddlers/hiddensettings/Hidden
+++ b/editions/tw5.com/tiddlers/hiddensettings/Hidden
@ -0,0 +1,11 @@
+created: 20240501111046716
+modified: 20240501111407244
+tags: [[Hidden Settings]]
+title: Hidden Setting: Variable Search Type Configuration
+type: text/vnd.tiddlywiki
+
+$:/config/DumpVariables/type-selector defines if radio-buttons or checkboxes are used in $:/AdvancedSearch ''-> Variables'' tab.
+
+; Options
+: `radio` (default) if config tiddler is missing
+: `checkbox` -- to use checkboxes instead of radio-buttons
--- a/editions/tw5.com/tiddlers/jsonvariable
+++ b/editions/tw5.com/tiddlers/jsonvariable
@ -0,0 +1,41 @@
+created: 20240506132850677
+modified: 20240506151551620
+tags: [[Operator Examples]] [[jsonvariable Operator]]
+title: jsonvariable Operator (Examples)
+type: text/vnd.tiddlywiki
+
+The following example shows the "internal" structure of the `fn.test` function defined in <<.olink jsonvariable>> operator
+
+<<.example 1 """\procedure testProc() [[aa aa]] bb
+\function fn.test(splitChar:" " not-used) [enlist<testProc>format:titlelist[]]
+
+<pre><code><$text text={{{[[fn.test]jsonvariable[]]}}}/></code></pre>
+""">>
+
+The following example shows the same structure ''pretty printed'' using the <<.olink format>> filter operator
+
+<<.example 2 """\procedure testProc() [[aa aa]] bb
+\function fn.test(splitChar:" " not-used) [enlist<testProc>format:titlelist[]]
+
+\function tab() [charcode[9]]
+
+<pre><code><$text text={{{[[fn.test]jsonvariable[]format:json<tab>]}}}/></code></pre>
+""">>
+
+The following example extracts the ''function definition'' using the <<.olink jsonextract>> filter operator
+
+<<.example 3 """\procedure testProc() [[aa aa]] bb
+\function fn.test(splitChar:" " not-used) [enlist<testProc>format:titlelist[]]
+
+<pre><code><$text text={{{[[fn.test]jsonvariable[]jsonextract[srcVariable],[value]]}}}/></code></pre>
+""">>
+
+The following example extracts the `srcVariables.params` without pretty printing using <<.olink jsonextract>>
+
+<<.example 4 """\procedure testProc() [[aa aa]] bb
+\function fn.test(splitChar:" " not-used) [enlist<testProc>format:titlelist[]]
+
+\function tab() [charcode[9]]
+
+<pre><code><$text text={{{[[fn.test]jsonvariable[]jsonextract[srcVariable],[params]format:json<tab>]}}}/></code></pre>""">>
+
--- a/editions/tw5.com/tiddlers/jsonvariable
+++ b/editions/tw5.com/tiddlers/jsonvariable
@ -0,0 +1,45 @@
+caption: jsonvariable
+created: 20240506131935424
+modified: 20240506151517068
+op-input: a selection variable names
+op-output: the JSON string values of each of the retrieved properties
+op-parameter: one or more indexes of the property to retrieve
+op-parameter-name: R
+op-purpose: retrieve the JSON string from a ~TiddlyWiki variable
+tags: [[Filter Operators]] [[JSON Operators]]
+title: jsonvariable Operator
+type: text/vnd.tiddlywiki
+
+\procedure testProc() [[aa aa]] bb
+\function fn.test(splitChar:" " not-used) [enlist<testProc>format:titlelist[]]
+\function tab() [charcode[9]]
+
+<<.from-version "5.3.4">>
+
+The <<.op jsonvariable>> operator is used to retrieve variables as JSON substrings. See also the following related operators:
+
+Properties within a JSON object are identified by a sequence of indexes. In the following example, we use a procedure: `testProc` and a function: `fn.test` to show the possibilities of <<.op jsonvariable>>. The `tab`-function is needed for the <<.olink format>> ooperator, which is used to "pretty-print" the output.
+
+```
+\procedure testProc() [[aa aa]] bb
+\function fn.test(splitChar:" " not-used) [enlist<testProc>format:titlelist[]]
+
+\function tab() [charcode[9]]
+
+<pre><code><$text text={{{[[fn.test]jsonvariable[]format:json<tab>]}}}/></code></pre>
+```
+
+Which results to:
+
+<pre><code><$text text={{{[[fn.test]jsonvariable[]format:json<tab>]}}}/></code></pre>
+
+Also see:
+
+* <<.olink jsonextract>> to retrieve a JSON value as a string of JSON
+* <<.olink jsonget>> to retrieve the values of a property in JSON data
+* <<.olink jsontype>> to retrieve the type of a JSON value
+* <<.olink jsonindexes>> to retrieve the names of the fields of a JSON object, or the indexes of a JSON array
+
+Every TW variable has this internal structure, which we can use to extract the info we need. 
+
+!! <<.operator-examples "jsonvariable">>
--- a/editions/tw5.com/tiddlers/macros/DumpVariablesMacro.tid
+++ b/editions/tw5.com/tiddlers/macros/DumpVariablesMacro.tid
@ -1,11 +1,11 @@
+caption: dumpvariables
 created: 20140908104107181
-modified: 20150221151454000
+modified: 20240501101941520
 tags: Macros [[Core Macros]]
 title: dumpvariables Macro
 type: text/vnd.tiddlywiki
-caption: dumpvariables

-The <<.def dumpvariables>> [[macro|Macros]] returns a table showing the values of all [[variables|Variables]] and [[macros|Macros]] that exist at that position in the [[widget tree|Widgets]].
+The <<.def dumpvariables>> [[macro|Macros]] returns a table showing the values of all [[variables|Variables]], [[procedures|Procedures]], [[functions|Functions]], [[widgets|Widgets]] and [[macros|Macros]] that exist at that position in the [[widget tree|Widgets]].

 It is useful for debugging and exploring ~TiddlyWiki's internals.

@ -13,6 +13,21 @@ Placeholders are replaced with values in the normal way, but using the default v

 !! Parameters

-(none)
+The following parameters are <<.from-version "5.3.4">>

-<<.macro-examples "dumpvariables">>
+; type
+: If type is empty all variable types are shown: `fn, var, proc, macro, widget`. Using the type parameter will reduce the list.
+
+; sort
+: `raw`: Is used to allow the <<.olink variables>> to return a raw list.
+: `alphabetical`: If sort is missing, by ''default ''the list is alphabetically sorted.
+
+; subfilter
+: This parameter limits the number of variables that are listed eg:  `subfilter:"[search::some[sort .attr]]" `
+
+; format
+: Format the output string using the VariableFormat. Defaults to `$type$ $name$($params$) $firstLine$`.
+
+Also see: [[search-variables Macro]]
+
+!!! <<.macro-examples "dumpvariables">>
--- a/editions/tw5.com/tiddlers/macros/examples/dumpvariables.tid
+++ b/editions/tw5.com/tiddlers/macros/examples/dumpvariables.tid
@ -1,14 +1,29 @@
 created: 20150221151358000
-modified: 20150221151415000
+modified: 20240427120040367
 tags: [[dumpvariables Macro]] [[Macro Examples]]
 title: dumpvariables Macro (Examples)
 type: text/vnd.tiddlywiki

+The following example will list all variables that contain the word "example" in uppercase ''and'' also lowercase, due to the default setting of the <<.olink search>> operator.
+
 <$macrocall $name=".example" n="1"
-eg="""<$set name="EXAMPLE" value="123.$(EXAMPLE2)$.789">
-<$set name="EXAMPLE2" value="456">
+eg="""<$let EXAMPLE="123" >
+<<dumpvariables subfilter:"[search::some[EXAMPLE dumpvariables]]">>
+</$let>"""/>
+
+Listing only specific varibles can be achieved using the <<.olink search>> operator as a subfilter
+
+<$macrocall $name=".example" n="2"
+eg="""<$let EXAMPLE="123" >
+<<dumpvariables subfilter:"[search::casesensitive,some[EXAMPLE dumpvariables]]">>
+</$let>"""/>
+
+<$macrocall $name=".example" n="3"
+eg="""<<dumpvariables subfilter:"[prefix[.a]]">>"""/>
+
+''The following list will be very long.'' It shows all variables known within this tiddler. Using the macro in a ''different context''. Eg: the sidebar, variables will show ''different values''.
+
+<$macrocall $name=".example" n="4"
+eg="""<<dumpvariables>>"""/>

-<<dumpvariables>>

-</$set>
-</$set>"""/>
--- a/editions/tw5.com/tiddlers/macros/examples/search-variables
+++ b/editions/tw5.com/tiddlers/macros/examples/search-variables
@ -0,0 +1,35 @@
+created: 20240427121446051
+modified: 20240501121207308
+title: search-variables Macro (Examples)
+type: text/vnd.tiddlywiki
+
+The following example will list all variables that contain the word "example" in uppercase ''and'' also lowercase, due to the default setting of the <<.olink search>> operator.
+
+While ''the following list will be long'' it should be easy to refine it. It shows all variables known within this tiddler. Using the procedure in a ''different context''. Eg: the sidebar, variables will show ''different values''.
+
+<$macrocall $name=".example" n="1"
+eg="""<div><<search-variables >></div>"""/>
+
+<$macrocall $name=".example" n="2"
+eg="""<div><$let EXAMPLE="123" >
+<<search-variables subfilter:"[search::some[EXAMPLE dumpvariables]]">>
+</$let></div>"""/>
+
+Listing only specific varibles can be achieved using the <<.olink search>> operator as a subfilter.
+
+<<.tip """The ''transclusion'' variable is set to eg:"3" so if several "search interfaces" are open in the same tiddler, that type and sort parameters should have no side effects.""">>
+
+<$macrocall $name=".example" n="3"
+eg="""<div><$let EXAMPLE="123" transclusion="3">
+<<search-variables subfilter:"[search::casesensitive,some[EXAMPLE dumpvariables]]">>
+</$let></div>"""/>
+
+<$macrocall $name=".example" n="4"
+eg="""<div><<search-variables subfilter:"[prefix[.a]]">></div>"""/>
+
+<$macrocall $name=".example" n="5"
+eg="""<div><<search-variables type:"fn" sort:"raw">></div>"""/>
+
+<$macrocall $name=".example" n="6"
+eg="""<div><<search-variables type:"fn" sort:"raw" subfilter:"[prefix[.]]">></div>"""/>
+
--- a/editions/tw5.com/tiddlers/macros/search-variables
+++ b/editions/tw5.com/tiddlers/macros/search-variables
@ -0,0 +1,34 @@
+caption: search-variables
+created: 20240427120451313
+modified: 20240501101929800
+tags: Macros [[Core Macros]]
+title: search-variables Macro
+type: text/vnd.tiddlywiki
+
+This macro is <<.from-version "5.3.4">>
+
+The <<.def search-variables>> presents a form, which allows fast filtering of the resulting list. This procedure is also used in the $:/AdvancedSearch ''-> Variables'' tab.
+
+It returns a table showing the values of all [[variables|Variables]], [[procedures|Procedures]], [[functions|Functions]], [[widgets|Widgets]] and [[macros|Macros]] that exist at that position in the [[widget tree|Widgets]].
+
+It is useful for debugging and exploring ~TiddlyWiki's internals.
+
+!! Parameters
+
+; type
+: If type is empty all variable types are shown
+: optional: `fn, var, proc, macro, widget`. Using the type parameter will reduce the list.
+
+; sort
+: `raw`: Is used to allow the <<.olink variables>> to return a raw list.
+: `alphabetical`: If sort is missing, by ''default ''the list is alphabetically sorted.
+
+; subfilter
+: This parameter limits the number of variables that are listed eg:  `subfilter:"[search::some[sort .attr]]" `
+
+; format
+: Format the output string using the VariableFormat. Defaults to `$type$ $name$($params$) $firstLine$`.
+
+Also see: [[dumpvariables Macro]]
+
+!!! <<.macro-examples "search-variables">>
--- a/editions/tw5.com/tiddlers/search-variable-parameter-test.tid
+++ b/editions/tw5.com/tiddlers/search-variable-parameter-test.tid
@ -0,0 +1,13 @@
+created: 20240218173858951
+modified: 20240223200921450
+tags: 
+title: search-variable-parameter-test
+type: text/vnd.tiddlywiki
+
+\procedure asdf()
+<$let EXAMPLE="123" >
+<<search-variables type:"" sort:"" subfilter:"[search::some[]]"  format:"$type$ $name$($params$)"  >>
+</$let>
+\end
+
+<<asdf>>
--- a/editions/tw5.com/tiddlers/test-dumpvariables-sort-raw.tid
+++ b/editions/tw5.com/tiddlers/test-dumpvariables-sort-raw.tid
@ -0,0 +1,10 @@
+created: 20240218202032583
+modified: 20240427114143241
+tags: 
+title: test-dumpvariables-sort-raw
+type: text/vnd.tiddlywiki
+
+<<.example 1 """\procedure asdf(test:"hallo", x ) <<test>>
+
+<<dumpvariables sort:"raw">> """>>
+
--- a/editions/tw5.com/tiddlers/test-jsonvariable-conat.tid
+++ b/editions/tw5.com/tiddlers/test-jsonvariable-conat.tid
@ -0,0 +1,40 @@
+created: 20240506101435113
+modified: 20240506140610448
+tags: 
+title: test-jsonvariable-conat
+type: text/vnd.tiddlywiki
+
+''Nice to have''
+
+<<.example 1 """\function tab() [charcode[9]]
+
+<pre><$text text={{{[[.concat]jsonvariable[]]}}}/></pre>
+""">>
+
+''Human readable version''
+
+<<.example 2 """\function tab() [charcode[9]]
+
+<pre><$text text={{{[[.concat]jsonvariable[]format:json<tab>]}}}/></pre>
+""">>
+
+''Function definition''
+
+<<.example 3 """\function tab() [charcode[9]]
+
+<pre><$text text={{{[[.concat]jsonvariable[]jsonextract[srcVariable],[value]format:json<tab>]}}}/></pre>
+""">>
+
+''Get parameters''
+
+<<.example 4 """\function tab() [charcode[9]]
+
+<pre><$text text={{{[[.concat]jsonvariable[]jsonextract[srcVariable],[params]format:json<tab>]}}}/></pre>
+""">>
+
+''Expected''
+
+<<.example 5 """\function tab() [charcode[9]]
+
+<pre><$text text={{{[[.concat]format:variable[]]}}}/></pre>
+""">>
--- a/editions/tw5.com/tiddlers/test-search-variables.tid
+++ b/editions/tw5.com/tiddlers/test-search-variables.tid
@ -0,0 +1,8 @@
+created: 20240216004004135
+modified: 20240223200900425
+tags: 
+title: test-search-variables
+type: text/vnd.tiddlywiki
+
+
+<<search-variables type:"">>
--- a/editions/tw5.com/tiddlers/test-search-widget.tid
+++ b/editions/tw5.com/tiddlers/test-search-widget.tid
@ -0,0 +1,9 @@
+created: 20240430134820097
+modified: 20240430135154411
+tags: $:/tags/Global
+title: test-search-widget
+type: text/vnd.tiddlywiki
+
+\widget $w.test-world()
+Hello World
+\end
--- a/editions/tw5.com/tiddlers/test-snippet.tid
+++ b/editions/tw5.com/tiddlers/test-snippet.tid
@ -0,0 +1,8 @@
+created: 20240430135650615
+description: prefixed dot and prefixed DV-
+modified: 20240430135725412
+tags: $:/tags/Variables/Exclude/Snippet
+title: test-snippet
+type: text/vnd.tiddlywiki
+
+[prefix[.]] [prefix[DV-]] 
--- a/editions/tw5.com/tiddlers/test-sort-raw.tid
+++ b/editions/tw5.com/tiddlers/test-sort-raw.tid
@ -0,0 +1,7 @@
+created: 20240430092721150
+modified: 20240430111853759
+tags: 
+title: test-sort-raw
+type: text/vnd.tiddlywiki
+
+<div><<search-variables type:"macro proc fn" sort:raw >></div>
--- a/editions/tw5.com/tiddlers/test-widget.tid
+++ b/editions/tw5.com/tiddlers/test-widget.tid
@ -0,0 +1,21 @@
+created: 20240222140353499
+modified: 20240222142402534
+tags: 
+title: test-widget
+type: text/vnd.tiddlywiki
+
+\widget $my.widget(one:'Jaguar')
+<$text text=<<one>>/>
+<$slot $name="ts-raw">
+	Whale
+</$slot>
+\end
+
+<$my.widget one="Dingo">
+	Crocodile
+</$my.widget>
+
+<$my.widget/>
+
+<<dumpvariables subfilter:"[search::casesensitive,some[my. transc]]">>
+
--- a/themes/tiddlywiki/vanilla/base.tid
+++ b/themes/tiddlywiki/vanilla/base.tid
@ -372,6 +372,24 @@ Table utility classes
 	padding: 3px;
 }

+/* Labeled text input, where input is max width */
+.tc-labeled-input-wrapper {
+	display: flex;
+	padding: 6px 0;
+}
+
+.tc-align-right {
+	text-align: right;
+}
+
+.tc-fixed-label {
+	flex: auto;
+}
+
+.tc-fluid-input {
+	flex: 20;
+}
+
 /*
 CSV parser plugin
 */
@ -920,7 +938,11 @@ button.tc-btn-invisible.tc-remove-tag-button {
 }

 .tc-advanced-search input {
-	width: 60%;
+	width: 90%;
+}
+
+.tc-advanced-search .tc-flexible-form .txt-input {
+	width: 100%;
 }

 .tc-search a svg {
@ -1943,6 +1965,25 @@ html body.tc-body.tc-single-tiddler-window {
 	text-decoration: none;
 }

+.tc-block-dropdown-wrapper .tc-edit-type-dropdown,
+.tc-block-dropdown-wrapper .tc-variables-dropdown {
+	position: relative;
+}
+
+.tc-block-dropdown-wrapper .tc-variables-dropdown a {
+	display: inline-block;
+	width: 90%;
+}
+
+.tc-block-dropdown-wrapper .tc-variables-dropdown svg {
+	height: .9rem;
+	width: .9rem;
+}
+
+.tc-variables-dropdown a.tc-tiddlylink-missing {
+	font-style: normal;
+}
+
 .tc-search-results {
 	padding: 0 7px 0 7px;
 }
--- a/themes/tiddlywiki/vanilla/flexible-form-styles.tid
+++ b/themes/tiddlywiki/vanilla/flexible-form-styles.tid
@ -0,0 +1,167 @@
+title: /core/template/flexible-form/styles
+tags: $:/tags/Stylesheet
+
+.tc-flexible-form {
+	<!-- outline: 1px solid blue; -->
+	overflow: auto;
+	margin-bottom: 1em;
+}
+
+.tc-advanced-search-container {
+	padding: 4px 3px 3px 3px;
+	border-bottom: 1px dotted black;
+	display: grid;
+	grid-column-gap: 1em;
+	grid-row-gap: 0.2em;
+	grid-template-columns: minmax(max-content, auto) minmax(max-content, auto) 1fr;
+	grid-template-areas:
+		"tc-dv-type tc-dv-sort tc-dv-extra";
+}
+
+.tc-dv-type {
+	grid-area: tc-dv-type;
+	display: grid;
+	grid-column-gap: 0.3em;
+	grid-row-gap: 0.2em;
+	grid-template-columns: 5.3em;
+	grid-template-areas:
+		"t-txt c-all c-fn c-var c-proc c-macro c-widget";
+}
+
+.tc-dv-filterOptions {
+	<!-- border: 1px solid <<colour code-border>>; -->
+	padding: 0 .3em;
+}
+
+.tc-dv-sort {
+	grid-area: tc-dv-sort;
+	display: grid;
+	grid-column-gap: 0.3em;
+	grid-row-gap: 0.2em;
+	grid-template-columns: 6em 9em;
+	grid-template-areas:
+		"sel-txt sel-drop";
+}
+
+.tc-dv-extra {
+	grid-area: tc-dv-extra;
+	display: grid;
+	grid-column-gap: 0.3em;
+	grid-row-gap: 0.2em;
+	grid-template-columns: 1fr;
+	grid-template-areas:
+		"ex-btn";
+}
+
+<!-- TODO Try this without a media query!!! -->
+@media (max-width:
+	<$text text={{{ [{$:/themes/tiddlywiki/vanilla/metrics/sidebarbreakpoint}removesuffix[px]]
+		[{$:/themes/tiddlywiki/vanilla/metrics/sidebarwidth}removesuffix[px]]
+		:reduce[<currentTiddler>add<accumulator>addsuffix[px]] }}}
+	/>) {
+	.tc-dv-sort {
+		grid-template-columns: 5.3em 9em;
+	}
+
+	.tc-advanced-search-container {
+		grid-column-gap: 0.1em;
+		grid-template-areas:
+			"tc-dv-type tc-dv-type tc-dv-type"
+			"tc-dv-sort tc-dv-sort tc-dv-extra";
+	}
+}
+
+.tc-flexible-input-container {
+	padding: 4px 3px 3px 3px;
+	display: grid;
+	grid-row-gap: 0.2em;
+	grid-column-gap: 0.3em;
+	grid-template-columns: 1em 4em 1fr 1.5em 1.5em;
+	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-has-exluded button:hover svg,
+.btn-fld-has-exluded button svg {
+	<!-- fill: <<colour dirty-indicator>>; -->
+}
+
+.tc-variables-results button.tc-btn-details svg {
+	width: .9em;
+	height: .9em;
+}
+
+.btn-fld {
+	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-all {
+	grid-area: c-all;
+}
+.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;
+	border: 1px solid <<colour code-border>>;
+}
+.ex-btn {
+	grid-area: ex-btn;
+}