search-variables works -- dumpvariables uses outdated text-substitution

core/language/en-GB/Search.multids

@@ -28,7 +28,7 @@ Variables/Exclude/Show: Show exclude input
 Variables/Exclude/Description: EDIT ME - Description is shown in the dropdown
 Variables/ExpandAll: Expand All:
 Variables/FoldAll: Fold All:
-Variables/Filter: Filter:
+Variables/Filter: Search:
 Variables/Filter/Hint: Text eg: .attr
 Variables/Hint: Filter global variables
 Variables/Matches: //<small><<resultCount>> matches</small>//

core/wiki/macros/dumpvariables.tid

@@ -4,25 +4,32 @@ tags: $:/tags/Global
 \whitespace trim
 
 <!-- CONST string definitions -->
-\define DV-VAR-FILTER-OPTIONS() fn var proc macro widget
+\procedure DV-VAR-FILTER-OPTIONS() fn var proc macro widget
-\define DV-TMP-FILTER-OPTIONS() $:/temp/varSearch/options
+\procedure DV-FILTER-OPTIONS() $:/temp/varSearch/options
-\define DV-TMP-SORT-OPTIONS() $:/temp/varSearch/sort
+\procedure DV-SORT-OPTIONS() $:/temp/varSearch/sort
 
-\define DV-RAW-FILTER-STR() [variables:raw<_tf.dv-type>]
+<!-- Filter strings selected by "Sort" dropdown -->
-\define DV-FILTER-STR() [variables<_tf.dv-type>]
+\procedure DV-RAW-FILTER-STR() [variables:raw<_tf.dv-type>]
+\procedure DV-FILTER-STR() [variables<_tf.dv-type>]
 
-\define DV-TMP-SEARCH() $:/temp/varSearch
+<!-- State or temp variable base-names -->
-\define DV-TMP-SEARCH-DETAILS() $:/temp/varSearch/details
+\procedure DV-FOLDED() $:/temp/varFolded
-\define DV-SEARCH-STATE() $:/state/varSearch
+\procedure DV-SEARCH() $:/temp/varSearch
-\define DV-TMP-EXCLUDE() $:/state/varExclude
+\procedure DV-SEARCH-DETAILS() $:/temp/varSearch/details
+\procedure DV-SEARCH-STATE() $:/state/varSearch
+\procedure DV-EXCLUDE() $:/state/varExclude
 
+<!-- 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-varFormat>]
 
+\function tf.dv-foldedState() [<DV-FOLDED>] [<qualify>] +[join[/]]
+
 <!-- =================== -->
 <!-- dumpvariables main  -->
 <!-- =================== -->
 \procedure dumpvariables(type sort subfilter:"[[]]" format)
+
 <!-- The following function is needed since the "format" string can contain closing brackets ")" -->
 \function _tf.dv-varFormat() [<format>!is[blank]then<format>else[$type$ $name$($params$)]]
 \function _tf.dv-type() [<type>]
@@ -46,13 +53,16 @@ tags: $:/tags/Global
 \end
 
 \procedure dv-toggleInfoState()
-<$action-setfield $tiddler=<<tf.dv-toggleInfoState>> text={{{ [<tf.dv-toggleInfoState>get[text]] +[toggle[yes],[no]] }}}/>
+<$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 -->
-<$action-setfield $tiddler=<<tf.dv-detailsSearch>> text={{{ [<tf.dv-getDetailsSearchText>!is[blank]then<tf.dv-getDetailsSearchText>] :else[<varname>format:variable[$type$ $name$($params$)]] }}} />
+<$action-setfield $tiddler=<<tf.dv-detailsSearch>>
+	text={{{ [<tf.dv-getDetailsSearchText>!is[blank]then<tf.dv-getDetailsSearchText>] :else[<varname>format:variable[$type$ $name$($params$)]] }}}
+/>
 \end
 
 \procedure dv-clearStatesButton()
-<span class="tc-small-gap-left">|</span>
 <span class="tc-small-gap">{{$:/language/Search/Variables/FoldAll}}</span>
 <$button class="tc-btn-invisible tc-tiny-gap-left">
 	<!-- "search text details" should be preserved -->
@@ -62,26 +72,33 @@ tags: $:/tags/Global
 \end
 
 \procedure dv-clearSearchButton()
-<$button class="tc-btn-invisible tc-tiny-gap-left">
+<$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 dv-clearExcludeButton()
-<$button class="tc-btn-invisible">
+<$button class="tc-btn-invisible btn-yy"
+	tooltip=`${ [{$:/language/Search/Variables/Clear}] [{$:/language/Search/Variables/Exclude}] +[join[ ]] }$`
+>
 	<$action-deletetiddler $tiddler=<<tf.dv-excludeText>>/>
 	{{$:/core/images/close-button}}
 </$button>
 \end
 
 \procedure dv-expandAllStatesButton()
-<span class="tc-small-gap-left">|</span>
 <span class="tc-small-gap">{{$:/language/Search/Variables/ExpandAll}}</span>
 <$button class="tc-btn-invisible tc-tiny-gap-left">
-	<$action-setfield $tiddler=<<DV-SEARCH-STATE>> text={{{ [<tf.dv-toggleInfoState>get[text]] +[toggle[yes],[no]] }}}/>
+	<$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">
+	<$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}}
@@ -134,16 +151,16 @@ tags: $:/tags/Global
 </span>
 \end
 
-\function tf.dv-tmpTypeOptions() [<DV-TMP-FILTER-OPTIONS>] [<qualify>] +[join[/]]
+\function tf.dv-tmpTypeOptions() [<DV-FILTER-OPTIONS>] [<qualify>] +[join[/]]
-\function tf.dv-tmpSortOptions() [<DV-TMP-SORT-OPTIONS>] [<qualify>] +[join[/]]
+\function tf.dv-tmpSortOptions() [<DV-SORT-OPTIONS>] [<qualify>] +[join[/]]
 
-\function tf.dv-searchText() [<DV-TMP-SEARCH>] [<qualify>] +[join[/]]
+\function tf.dv-searchText() [<DV-SEARCH>] [<qualify>] +[join[/]]
 \function tf.dv-getSearchText() [<tf.dv-searchText>get[text]]
 
-\function tf.dv-excludeText() [<DV-TMP-EXCLUDE>] [<qualify>] +[join[/]]
+\function tf.dv-excludeText() [<DV-EXCLUDE>] [<qualify>] +[join[/]]
 \function tf.dv-getExcludeText() [<tf.dv-excludeText>get[text]]
 
-\function tf.dv-detailsSearch() [<DV-TMP-SEARCH-DETAILS>] [<varname>] [<qualify>] +[join[/]]
+\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[/]]
@@ -153,40 +170,20 @@ tags: $:/tags/Global
 <!-- search-variables main function -->
 <!-- ============================== -->
 \procedure search-variables(type sort subfilter:"[[]]" format)
+
 <!-- The following function is needed since the "format" string can contain closing brackets ")" -->
 \function _tf.dv-varFormat() [<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]]
 
-<% if [<type>is[blank]] %>
+<<dv-searchForm>>
-	<<dv-filterOptions>>
-<% endif %>
-<% if [<sort>is[blank]] %>
-	<<dv-sortOptions>>
-<% endif %>
 
-<% if [<DV-SEARCH-STATE>get[text]match[yes]] %>
+<$list filter="[subfilter<tf.dv-filterString>] 
-	<<dv-clearStatesButton>>
+		+[search::some<tf.dv-getSearchText>]
-<% else %>
+		+[filter<subfilter>]
-	<<dv-expandAllStatesButton>>
+		+[!filter<tf.dv-getExcludeText>]"
-<% endif %>
+	variable="varname"
-
+>
-<div class="tc-dv-search-input">
-	<% if [<thisTiddler>!match[$:/AdvancedSearch]] %>
-		<%if [<sort>!is[blank]] %><code class="tc-small-gap">sort:<<_tf.dv-sort>></code><%endif%>
-		<%if [<type>!is[blank]] %><code class="tc-small-gap">type:<<_tf.dv-type>></code><%endif%>
-	<% endif %>
-	<$text text={{$:/language/Search/Variables/Filter}}/>
-	<$edit-text tiddler=<<tf.dv-searchText>> tag=input class="tc-tiny-gap-left" placeholder={{$:/language/Search/Variables/Filter/Hint}}/> <<dv-clearSearchButton>>
-	<br>
-	<$text text={{$:/language/Search/Variables/Exclude}}/>
-	<$edit-text tiddler=<<tf.dv-excludeText>> tag=input class="tc-tiny-gap" placeholder={{$:/language/Search/Variables/Exclude/Hint}}/>
-	<<variablesMorePopup>>
-	<% if [<tf.dv-getExcludeText>!is[blank]] %>
-		<<dv-clearExcludeButton>>
-	<% endif %>
-</div>
-<$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]] %>
@@ -226,17 +223,131 @@ tags: $:/tags/Global
 </$list>
 \end
 
-<!-- ============== -->
+
+<!-- ================================== -->
+<!-- Grid Based Advanced Variables Form -->
+
+\procedure dv-search-input-box()
+<%if [<sort>!is[blank]] %>
+	<code class="tc-small-gap">sort:<<_tf.dv-sort>></code>
+<%endif%>
+<%if [<type>!is[blank]] %>
+	<code class="tc-small-gap">type:<<_tf.dv-type>></code>
+<%endif%>
+<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="filter variables by name"
+/>
+<<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"
+/>
+<<moreVariablesPopup>>
+<% if [<tf.dv-getExcludeText>!is[blank]] %>
+	<<dv-clearExcludeButton>>
+<% endif %>
+\end
+
+\function tf.dv-opt-class() "c" [<option>] +[join[-]] "tc-dv-filterOptions" +[join[ ]]
+
+\procedure dv-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<DV-VAR-FILTER-OPTIONS>]" variable="option">
+	<$checkbox tiddler=<<tf.dv-tmpTypeOptions>> listField="text" checked=<<option>>
+		class=<<tf.dv-opt-class>> data-gap="right"
+	>
+		<<option>>
+	</$checkbox>
+</$list>
+\end
+
+\procedure dv-sortOptions()
+<span class="sel-txt">
+	{{$:/language/Search/Variables/Option/Sort}}
+</span>
+<$select tiddler=<<tf.dv-tmpSortOptions>>
+	default="alphabetical"
+	class="sel-drop"
+>
+	<option value="alphabetical">alphabetical</option>
+	<option value="raw">raw</option>
+</$select>
+\end
+
+\procedure dv-expandFoldOption()
+<span class="ex-btn">
+<% if [<DV-SEARCH-STATE>get[text]match[yes]] %>
+	<<dv-clearStatesButton>>
+<% else %>
+	<<dv-expandAllStatesButton>>
+<% endif %>
+</span>
+\end
+
+\procedure dv-searchForm()
+<div class="tc-flexible-form">
+	<div class="tc-flexible-checkbox-container">
+	<<dv-filterOptions>> <<dv-sortOptions>> <<dv-expandFoldOption>>
+	</div>
+	<div class="tc-flexible-input-container">
+		<$reveal stateTitle=<<tf.dv-foldedState>>
+			tag="div"
+			class="btn-fld"
+			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"/>
+				{{$:/core/images/right-arrow}}
+			</$button>
+		</$reveal>
+		<$reveal stateTitle=<<tf.dv-foldedState>>
+			tag="div"
+			class="btn-fld"
+			type="nomatch"
+			text="hide"
+			default="hide"
+		>
+			<$button tooltip={{$:/language/Search/Variables/Exclude/Hide}}  class="tc-dv-btn tc-btn-invisible">
+				<$action-setfield $tiddler=<<tf.dv-foldedState>> $field=text $value="hide"/>
+				{{$:/core/images/up-arrow}}
+			</$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 -->
 
 <!-- TODO Select the focus to right input -->
-\procedure lc-actionsXX()
+\procedure dv-lc-actionsXX()
 <$action-setfield $tiddler="$:/temp/advancedsearch" text=<<navigateTo>>/>
 <$action-setfield $tiddler="$:/temp/advancedsearch/input" text=<<navigateTo>>/>
 <$action-setfield $tiddler="$:/temp/advancedsearch/refresh" text="yes"/>
 <$action-sendmessage $message="tm-focus-selector" $param=".tc-advanced-search input"/>
 \end
 
-\procedure lc-actions()
+\procedure dv-lc-actions()
 <$action-setfield $tiddler=<<tf.dv-excludeText>> text=<<navigateTo>>/>
 \end
 
@@ -254,7 +365,6 @@ tags: $:/tags/Global
 \end
 
 \procedure addNewVariableFilter()
-<hr>
 <$button tag="a" actions=<<addVariableFilter>> class="tc-tiddlylink">
 	<em>
 		<$text text={{$:/language/Search/Variables/Exclude/Save}}/>
@@ -262,23 +372,29 @@ tags: $:/tags/Global
 </$button>
 \end
 
-\procedure variablesMorePopup()
+\procedure moreVariablesPopup()
-<span class="tc-popup-keep">
+<span class="tc-popup-keep btn-y">
 	<$button popup=<<qualify "$:/state/variableDropdown">> class="tc-btn-invisible">
 		{{$:/core/images/down-arrow}}
 	</$button>
 </span>
 
-<$reveal state=<<qualify "$:/state/variableDropdown">> type="popup" position="below">
+<$reveal state=<<qualify "$:/state/variableDropdown">> type="popup" position="belowleft">
 	<$let name="tv-show-missing-links" value="yes">
-		<$linkcatcher actions=<<lc-actions>> >
+		<$linkcatcher actions=<<dv-lc-actions>> >
 			<div class="tc-block-dropdown-wrapper">
 				<div class="tc-block-dropdown tc-variables-dropdown">
-					<$macrocall $name="list-tagged-draggable"
+					<!-- <$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>
 					<<addNewVariableFilter>>
 				</div>
 			</div>

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-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>
+

editions/tw5.com/tiddlers/flexible-form-styles.tid

@@ -0,0 +1,103 @@
+title: /core/template/flexible-form/styles
+tags: $:/tags/Stylesheet
+
+.tc-flexible-form {
+	<!-- outline: 1px solid blue; -->
+	overflow: auto;
+	margin-bottom: 1em;
+}
+.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 8em 1fr;
+	grid-template-areas:
+		"t-txt c-fn c-var c-proc c-macro c-widget sel-txt sel-drop ex-btn";
+}
+
+.tc-flexible-input-container {
+	padding: 4px 3px 3px 3px;
+	display: grid;
+	<% if [<tf.dv-foldedState>get[text]match[show]] %>
+		grid-row-gap: 0.2em;
+	<% endif %>
+	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 {
+	<% if [<tf.dv-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;
+}
+.ex-btn {
+	grid-area: ex-btn;
+}

themes/tiddlywiki/vanilla/base.tid

@@ -938,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 {
@@ -1954,6 +1958,7 @@ 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;
 }
@@ -1968,7 +1973,9 @@ html body.tc-body.tc-single-tiddler-window {
 	width: .9rem;
 }
 
-
+.tc-variables-dropdown a.tc-tiddlylink-missing {
+	font-style: normal;
+}
 
 .tc-search-results {
 	padding: 0 7px 0 7px;